update tables

apps/insights.saladeaula.digital/app/routes/_app.enrollments._index/route.tsx

@@ -1,37 +1,20 @@
 import type { Route } from './+types'
 
-import { flatten } from 'flat'
-import {
-  CalendarIcon,
-  ChevronDownIcon,
-  DownloadIcon,
-  FileSpreadsheetIcon,
-  FileTextIcon,
-  PlusCircleIcon
-} from 'lucide-react'
+import { CalendarIcon, PlusCircleIcon } from 'lucide-react'
 import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
 import { Suspense, useState } from 'react'
 import { Await, Outlet, 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'
 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 { Kbd } from '@repo/ui/components/ui/kbd'
+import { ExportMenu } from '@repo/ui/components/export-menu'
 import { createSearch } from '@repo/util/meili'
-
 import { headers, sortings, statuses } from '@repo/ui/routes/enrollments/data'
+
 import { columns, type Enrollment } from './columns'
 
 export function meta({}: Route.MetaArgs) {
@@ -112,7 +95,11 @@ export default function Route({ loaderData: { data } }) {
               {selectedRows.length ? (
                 <>
                   <div className="flex gap-2.5 items-center">
-                    <ExportMenu headers={headers} selectedRows={selectedRows} />
+                    <ExportMenu
+                      name="enrollments"
+                      headers={headers}
+                      selectedRows={selectedRows}
+                    />
                   </div>
                 </>
               ) : (
@@ -200,7 +187,7 @@ export default function Route({ loaderData: { data } }) {
                     </div>
 
                     <div className="lg:ml-auto flex gap-2.5">
-                      <DataTableViewOptions className="flex-1" />
+                      <DataTableViewOptions />
                     </div>
                   </div>
                 </>
@@ -233,54 +220,3 @@ function useRangeParams() {
     }
   }
 }
-
-export function ExportMenu({
-  headers,
-  selectedRows = []
-}: {
-  headers: Record<string, string>
-  selectedRows: object[]
-}) {
-  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, `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>
-  )
-}