add export to users

apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/route.tsx

@@ -1,8 +1,8 @@
 import type { Route } from './+types/route'
 
 import { PlusIcon } from 'lucide-react'
-import { Suspense } from 'react'
-import { Await, Link, useSearchParams } from 'react-router'
+import { Suspense, useState } from 'react'
+import { Await, Link, useParams, useSearchParams } from 'react-router'
 import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
 
 import { DataTable } from '@repo/ui/components/data-table'
@@ -10,6 +10,7 @@ import { SearchForm } from '@repo/ui/components/search-form'
 import { Skeleton } from '@repo/ui/components/skeleton'
 import { Button } from '@repo/ui/components/ui/button'
 import { Kbd } from '@repo/ui/components/ui/kbd'
+import { ExportMenu } from '@repo/ui/components/export-menu'
 import { createSearch } from '@repo/util/meili'
 
 export function meta({}: Route.MetaArgs) {
@@ -22,6 +23,7 @@ export function meta({}: Route.MetaArgs) {
   ]
 }
 
+import { headers } from './data'
 import { columns, type User } from './columns'
 
 export async function loader({ params, context, request }: Route.LoaderArgs) {
@@ -48,7 +50,9 @@ export async function loader({ params, context, request }: Route.LoaderArgs) {
 }
 
 export default function Route({ loaderData: { data } }) {
+  const { orgid } = useParams()
   const [searchParams, setSearchParams] = useSearchParams()
+  const [selectedRows, setSelectedRows] = useState<User[]>([])
 
   return (
     <Suspense fallback={<Skeleton />}>
@@ -71,31 +75,47 @@ export default function Route({ loaderData: { data } }) {
               pageIndex={page - 1}
               pageSize={hitsPerPage}
               rowCount={totalHits}
+              setSelectedRows={setSelectedRows}
             >
-              <div className="flex flex-col lg:flex-row justify-between gap-2.5 mb-2.5">
-                <div className="2xl:w-1/4">
-                  <SearchForm
-                    placeholder={
-                      <>
-                        Digite <Kbd className="border font-mono">/</Kbd> para
-                        pesquisar
-                      </>
-                    }
-                    defaultValue={searchParams.get('q') || ''}
-                    onChange={(value) =>
-                      setSearchParams((searchParams) => {
-                        searchParams.set('q', String(value))
-                        searchParams.delete('p')
-                        return searchParams
-                      })
-                    }
-                  />
-                </div>
-                <Button asChild>
-                  <Link to="add">
-                    <PlusIcon /> Adicionar
-                  </Link>
-                </Button>
+              <div className="flex max-lg:flex-col gap-2.5 mb-2.5">
+                {selectedRows.length ? (
+                  <>
+                    <div className="flex gap-2.5 items-center">
+                      <ExportMenu
+                        name={`${orgid}_users`}
+                        headers={headers}
+                        selectedRows={selectedRows}
+                      />
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div className="2xl:w-1/4">
+                      <SearchForm
+                        placeholder={
+                          <>
+                            Digite <Kbd className="border font-mono">/</Kbd>{' '}
+                            para pesquisar
+                          </>
+                        }
+                        defaultValue={searchParams.get('q') || ''}
+                        onChange={(value) =>
+                          setSearchParams((searchParams) => {
+                            searchParams.set('q', String(value))
+                            searchParams.delete('p')
+                            return searchParams
+                          })
+                        }
+                      />
+                    </div>
+
+                    <Button className="lg:ml-auto" asChild>
+                      <Link to="add">
+                        <PlusIcon /> Adicionar
+                      </Link>
+                    </Button>
+                  </>
+                )}
               </div>
             </DataTable>
           )