add export to users

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

@@ -1,20 +1,9 @@
 import type { Route } from './+types/route'
 
-import { flatten } from 'flat'
+import { CalendarIcon, PlusCircleIcon, PlusIcon } from 'lucide-react'
-import {
-  CalendarIcon,
-  ChevronDownIcon,
-  DownloadIcon,
-  FileSpreadsheetIcon,
-  FileTextIcon,
-  PlusCircleIcon,
-  PlusIcon
-} from 'lucide-react'
 import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
 import { Suspense, useState } from 'react'
 import { Await, Link, Outlet, useParams, useSearchParams } from 'react-router'
-import type { BookType } from 'xlsx'
-import * as XLSX from 'xlsx'
 
 import { DataTable, DataTableViewOptions } from '@repo/ui/components/data-table'
 import { FacetedFilter } from '@repo/ui/components/faceted-filter'
@@ -22,13 +11,8 @@ import { RangeCalendarFilter } from '@repo/ui/components/range-calendar-filter'
 import { SearchForm } from '@repo/ui/components/search-form'
 import { Skeleton } from '@repo/ui/components/skeleton'
 import { Button } from '@repo/ui/components/ui/button'
-import {
+import { ExportMenu } from '@repo/ui/components/export-menu'
-  DropdownMenu,
+
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from '@repo/ui/components/ui/dropdown-menu'
 import { Kbd } from '@repo/ui/components/ui/kbd'
 import { createSearch } from '@repo/util/meili'
 
@@ -81,6 +65,7 @@ const formatted = new Intl.DateTimeFormat('en-CA', {
 })
 
 export default function Route({ loaderData: { data } }) {
+  const { orgid } = useParams()
   const [searchParams, setSearchParams] = useSearchParams()
   const [selectedRows, setSelectedRows] = useState<Enrollment[]>([])
   const status = searchParams.get('status')
@@ -115,11 +100,15 @@ export default function Route({ loaderData: { data } }) {
               canceled_at: false
             }}
           >
-            <div className="flex gap-2.5 mb-2.5">
+            <div className="flex max-lg:flex-col gap-2.5 mb-2.5">
               {selectedRows.length ? (
                 <>
                   <div className="flex gap-2.5 items-center">
-                    <ExportMenu headers={headers} selectedRows={selectedRows} />
+                    <ExportMenu
+                      name={`${orgid}_enrollments`}
+                      headers={headers}
+                      selectedRows={selectedRows}
+                    />
                   </div>
                 </>
               ) : (
@@ -246,56 +235,3 @@ function useRangeParams() {
     }
   }
 }
-
-export function ExportMenu({
-  headers,
-  selectedRows = []
-}: {
-  headers: Record<string, string>
-  selectedRows: object[]
-}) {
-  const { orgid } = useParams()
-
-  const exportFile = (bookType: BookType) => () => {
-    if (!selectedRows.length) {
-      return
-    }
-    const now = new Date()
-    const header = Object.keys(headers)
-    const data = selectedRows.map((data) => {
-      const obj: Record<string, string> = flatten(data)
-      return Object.fromEntries(header.map((k) => [k, obj?.[k]]))
-    })
-    const workbook = XLSX.utils.book_new()
-    const worksheet = XLSX.utils.json_to_sheet(data, { header })
-
-    XLSX.utils.sheet_add_aoa(worksheet, [Object.values(headers)], {
-      origin: 'A1'
-    })
-    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
-    XLSX.writeFile(workbook, `${orgid}_users_${+now}.${bookType}`, {
-      bookType,
-      compression: true
-    })
-  }
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" className="cursor-pointer">
-          <DownloadIcon /> Baixar <ChevronDownIcon />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-52" align="start">
-        <DropdownMenuGroup className="*:cursor-pointer">
-          <DropdownMenuItem onClick={exportFile('xlsx')}>
-            <FileSpreadsheetIcon /> Microsoft Excel (.xlsx)
-          </DropdownMenuItem>
-          <DropdownMenuItem onClick={exportFile('csv')}>
-            <FileTextIcon /> CSV (.csv)
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

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

@@ -0,0 +1,8 @@
+export const headers = {
+  id: 'ID',
+  name: 'Nome',
+  email: 'Email',
+  cpf: 'CPF',
+  createDate: 'Cadastrado em',
+  lastLogin: 'Último acesso'
+}

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 { Suspense, useState } from 'react'
-import { Await, Link, useSearchParams } from 'react-router'
+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="flex max-lg:flex-col gap-2.5 mb-2.5">
-                <div className="2xl:w-1/4">
+                {selectedRows.length ? (
-                  <SearchForm
+                  <>
-                    placeholder={
+                    <div className="flex gap-2.5 items-center">
-                      <>
+                      <ExportMenu
-                        Digite <Kbd className="border font-mono">/</Kbd> para
+                        name={`${orgid}_users`}
-                        pesquisar
+                        headers={headers}
-                      </>
+                        selectedRows={selectedRows}
-                    }
+                      />
-                    defaultValue={searchParams.get('q') || ''}
+                    </div>
-                    onChange={(value) =>
+                  </>
-                      setSearchParams((searchParams) => {
+                ) : (
-                        searchParams.set('q', String(value))
+                  <>
-                        searchParams.delete('p')
+                    <div className="2xl:w-1/4">
-                        return searchParams
+                      <SearchForm
-                      })
+                        placeholder={
-                    }
+                          <>
-                  />
+                            Digite <Kbd className="border font-mono">/</Kbd>{' '}
-                </div>
+                            para pesquisar
-                <Button asChild>
+                          </>
-                  <Link to="add">
+                        }
-                    <PlusIcon /> Adicionar
+                        defaultValue={searchParams.get('q') || ''}
-                  </Link>
+                        onChange={(value) =>
-                </Button>
+                          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>
           )

packages/ui/src/components/export-menu.tsx

@@ -0,0 +1,70 @@
+import type { BookType } from 'xlsx'
+import { flatten } from 'flat'
+import {
+  ChevronDownIcon,
+  DownloadIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon
+} from 'lucide-react'
+import * as XLSX from 'xlsx'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@repo/ui/components/ui/dropdown-menu'
+import { Button } from '@repo/ui/components/ui/button'
+
+export function ExportMenu({
+  name,
+  headers,
+  selectedRows = []
+}: {
+  name: string
+  headers: Record<string, string>
+  selectedRows: object[]
+}) {
+  const exportFile = (bookType: BookType) => () => {
+    if (!selectedRows.length) {
+      return
+    }
+    const header = Object.keys(headers)
+    const data = selectedRows.map((data) => {
+      const obj: Record<string, string> = flatten(data)
+      return Object.fromEntries(header.map((k) => [k, obj?.[k]]))
+    })
+    const workbook = XLSX.utils.book_new()
+    const worksheet = XLSX.utils.json_to_sheet(data, { header })
+
+    XLSX.utils.sheet_add_aoa(worksheet, [Object.values(headers)], {
+      origin: 'A1'
+    })
+    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+    XLSX.writeFile(workbook, `${name}_${+new Date()}.${bookType}`, {
+      bookType,
+      compression: true
+    })
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="cursor-pointer">
+          <DownloadIcon /> Baixar <ChevronDownIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-52" align="start">
+        <DropdownMenuGroup className="*:cursor-pointer">
+          <DropdownMenuItem onClick={exportFile('xlsx')}>
+            <FileSpreadsheetIcon /> Microsoft Excel (.xlsx)
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={exportFile('csv')}>
+            <FileTextIcon /> CSV (.csv)
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

packages/ui/src/components/faceted-filter.tsx

@@ -108,7 +108,7 @@ export function FacetedFilter<TData, TValue>({
                   >
                     <div
                       className={cn(
-                        'flex size-4 items-center justify-center rounded-[4px] border',
+                        'flex size-4 items-center justify-center rounded-lg border',
                         isSelected
                           ? 'bg-primary border-primary text-primary-foreground'
                           : 'border-input [&_svg]:invisible'