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,
-  ChevronDownIcon,
-  DownloadIcon,
-  FileSpreadsheetIcon,
-  FileTextIcon,
-  PlusCircleIcon,
-  PlusIcon
-} from 'lucide-react'
+import { CalendarIcon, 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 {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from '@repo/ui/components/ui/dropdown-menu'
+import { ExportMenu } from '@repo/ui/components/export-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>
-  )
-}