update tables

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

@@ -1,206 +1,39 @@
 'use client'
 
-import type { CellContext, ColumnDef } from '@tanstack/react-table'
+import type { ColumnDef } from '@tanstack/react-table'
 import { useToggle } from 'ahooks'
-import {
-  EllipsisVerticalIcon,
-  FileBadgeIcon,
-  HelpCircleIcon
-} from 'lucide-react'
+import { EllipsisVerticalIcon, FileBadgeIcon } from 'lucide-react'
 import type { ComponentProps } from 'react'
 
-import { Abbr } from '@repo/ui/components/abbr'
-import { DataTableColumnHeader } from '@repo/ui/components/data-table'
-import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
-import { Badge } from '@repo/ui/components/ui/badge'
 import { Button } from '@repo/ui/components/ui/button'
-import { Checkbox } from '@repo/ui/components/ui/checkbox'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
 } from '@repo/ui/components/ui/dropdown-menu'
-import { Progress } from '@repo/ui/components/ui/progress'
 import { Spinner } from '@repo/ui/components/ui/spinner'
-import { cn, initials } from '@repo/ui/lib/utils'
-import { labels, statuses } from '@repo/ui/routes/enrollments/data'
+import { DataTableColumnHeaderSelect } from '@repo/ui/components/data-table/column-select'
+import {
+  columns as columns_,
+  type Enrollment
+} from '@repo/ui/routes/enrollments/columns'
 
-// This type is used to define the shape of our data.
-// You can use a Zod schema here if you want.
-type Course = {
-  id: string
-  name: string
-}
-
-export type Enrollment = {
-  id: string
-  name: string
-  course: Course
-  status: string
-  progress: string
-  created_at: string
-}
-
-const formatted = new Intl.DateTimeFormat('pt-BR', {
-  day: '2-digit',
-  month: '2-digit',
-  year: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit'
-})
+export type { Enrollment }
 
 export const columns: ColumnDef<Enrollment>[] = [
   {
     id: 'select',
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && 'indeterminate')
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        className="cursor-pointer"
-        aria-label="Selecionar tudo"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        disabled={!row.getCanSelect()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
-        className="cursor-pointer"
-        aria-label="Selecionar linha"
-      />
-    )
-  },
-  {
-    accessorKey: 'user',
-    header: 'Colaborador',
-    enableHiding: false,
-    cell: ({ row }) => {
-      const user = row.getValue('user') as { name: string; email: string }
-
-      return (
-        <div className="flex gap-2.5 items-center">
-          <Avatar className="size-10 hidden lg:block">
-            <AvatarFallback>{initials(user.name)}</AvatarFallback>
-          </Avatar>
-
-          <ul>
-            <li className="font-bold">
-              <Abbr>{user.name}</Abbr>
-            </li>
-            <li className="text-muted-foreground text-sm">
-              <Abbr>{user.email}</Abbr>
-            </li>
-          </ul>
-        </div>
-      )
-    }
-  },
-  {
-    accessorKey: 'course',
-    header: 'Curso',
-    enableHiding: false,
-    cell: ({ row }) => {
-      const { name } = row.getValue('course') as { name: string }
-
-      return <Abbr>{name}</Abbr>
-    }
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status',
-    enableHiding: false,
-    cell: ({ row }) => {
-      const s = row.getValue('status') as string
-      const status = labels[s] ?? s
-      const { icon: Icon, color } = statuses?.[s] ?? { icon: HelpCircleIcon }
-
-      return (
-        <Badge variant="outline" className={cn(color, ' px-1.5')}>
-          <Icon className={cn('stroke-2', color)} />
-          {status}
-        </Badge>
-      )
-    }
-  },
-  {
-    accessorKey: 'progress',
-    header: 'Progresso',
-    enableHiding: false,
-    cell: ({ row }) => {
-      const progress = row.getValue('progress')
-
-      return (
-        <div className="flex gap-2.5 items-center ">
-          <Progress value={Number(progress)} className="w-32" />
-          <span className="text-xs">{String(progress)}%</span>
-        </div>
-      )
-    }
-  },
-  {
-    accessorKey: 'created_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    meta: { title: 'Cadastrado em' },
-    enableSorting: true,
-    enableHiding: true,
-    cell: cellDate
-  },
-  {
-    accessorKey: 'started_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    meta: { title: 'Iniciado em' },
-    enableSorting: true,
-    enableHiding: true,
-    cell: cellDate
-  },
-  {
-    accessorKey: 'completed_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    meta: { title: 'Concluído em' },
-    enableSorting: true,
-    enableHiding: true,
-    cell: cellDate
-  },
-  {
-    accessorKey: 'failed_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    meta: { title: 'Reprovado em' },
-    enableSorting: true,
-    enableHiding: true,
-    cell: cellDate
-  },
-  {
-    accessorKey: 'canceled_at',
-    header: ({ column }) => <DataTableColumnHeader column={column} />,
-    meta: { title: 'Cancelado em' },
-    enableSorting: true,
-    enableHiding: true,
-    cell: cellDate
+    header: DataTableColumnHeaderSelect,
+    cell: DataTableColumnHeaderSelect
   },
+  ...columns_,
   {
     id: 'actions',
-    cell: ({ row }) => <ActionMenu row={row} />
+    cell: ActionMenu
   }
 ]
 
-function cellDate<TData>({
-  row: { original },
-  cell: { column }
-}: CellContext<TData, unknown>) {
-  const accessorKey = column.columnDef.accessorKey as keyof TData
-  const value = original?.[accessorKey]
-
-  if (value) {
-    return formatted.format(new Date(value as string))
-  }
-
-  return <></>
-}
-
 function ActionMenu({ row }: { row: any }) {
   const [open, { set: setOpen }] = useToggle(false)
   const cert = row.original?.cert

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>
-  )
-}