add download

2025-11-09 22:16:07 -03:00
parent f8dfa45ba3
commit 7f385bf175
8 changed files with 224 additions and 147 deletions
--- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/columns.tsx
+++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/columns.tsx
@@ -130,9 +130,9 @@ export const columns: ColumnDef<Enrollment>[] = [
  {
    accessorKey: 'created_at',
    header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Matriculado em" />
+      <DataTableColumnHeader column={column} title="Cadastrado em" />
    ),
-    meta: { title: 'Matriculado em' },
+    meta: { title: 'Cadastrado em' },
    enableSorting: true,
    enableHiding: true,
    cell: cellDate
--- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/data.tsx
+++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/data.tsx
@@ -40,13 +40,13 @@ export const statuses: Record<
 export const labels: Record<string, string> = {
  PENDING: 'Não iniciado',
  IN_PROGRESS: 'Em andamento',
-  COMPLETED: 'Aprovado',
+  COMPLETED: 'Concluído',
  FAILED: 'Reprovado',
  CANCELED: 'Cancelado'
 }

 export const sortings: Record<string, string> = {
-  created_at: 'Matriculado em',
+  created_at: 'Cadastrado em',
  started_at: 'Iniciado em',
  completed_at: 'Concluído em',
  failed_at: 'Reprovado em',
--- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/route.tsx
+++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/route.tsx
@@ -1,9 +1,21 @@
 import type { Route } from './+types'

-import { CalendarIcon, PlusCircleIcon, PlusIcon } from 'lucide-react'
+import { flatten } from 'flat'
+import {
+  CalendarIcon,
+  ChevronDownIcon,
+  DownloadIcon,
+  FileSpreadsheetIcon,
+  FileTextIcon,
+  PlusCircleIcon,
+  PlusIcon,
+  TagIcon
+} from 'lucide-react'
 import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
-import { Suspense } from 'react'
+import { Suspense, useState } from 'react'
 import { Await, Link, useSearchParams } from 'react-router'
+import type { BookType } from 'xlsx'
+import * as XLSX from 'xlsx'

 import { DataTable, DataTableViewOptions } from '@/components/data-table'
 import { RangeCalendarFilter } from '@/components/range-calendar-filter'
@@ -13,6 +25,13 @@ import { FacetedFilter } from '@repo/ui/components/faceted-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 { columns, type Enrollment } from './columns'
 import { sortings, statuses } from './data'
@@ -64,6 +83,7 @@ const formatted = new Intl.DateTimeFormat('en-CA', {

 export default function Route({ loaderData: { data } }) {
  const [searchParams, setSearchParams] = useSearchParams()
+  const [rowSelection, setRowSelection] = useState<Enrollment[]>([])
  const status = searchParams.get('status')
  const rangeParams = useRangeParams()

@@ -87,6 +107,7 @@ export default function Route({ loaderData: { data } }) {
              data={hits as Enrollment[]}
              pageIndex={page - 1}
              pageSize={hitsPerPage}
+              onRowSelectionChange={setRowSelection}
              rowCount={totalHits}
              hiddenColumn={[
                'completed_at',
@@ -95,97 +116,112 @@ export default function Route({ loaderData: { data } }) {
                'canceled_at'
              ]}
            >
-              <div className="flex flex-col 2xl:flex-row gap-2.5 mb-2.5">
-                <div className="w-full 2xl:w-1/3">
-                  <SearchForm
-                    defaultValue={searchParams.get('q') || ''}
-                    placeholder={
-                      <>
-                        Digite <Kbd className="border font-mono">/</Kbd> para
-                        pesquisar
-                      </>
-                    }
-                    onChange={(value) =>
-                      setSearchParams((searchParams) => {
-                        searchParams.set('q', String(value))
-                        searchParams.delete('p')
-                        return searchParams
-                      })
-                    }
-                  />
-                </div>
-
-                <div className="flex gap-2.5 max-lg:flex-col w-full">
-                  <div className="flex gap-2.5 max-lg:flex-col">
-                    <FacetedFilter
-                      title="Status"
-                      icon={PlusCircleIcon}
-                      className="lg:flex-1"
-                      value={status ? status.split(',') : []}
-                      onChange={(statuses) => {
-                        setSearchParams((searchParams) => {
-                          searchParams.delete('status')
-                          searchParams.delete('p')
-
-                          if (statuses.length) {
-                            searchParams.set('status', statuses.join(','))
-                          }
-
-                          return searchParams
-                        })
-                      }}
-                      options={Object.entries(statuses).map(([key, value]) => ({
-                        value: key,
-                        ...value
-                      }))}
-                    />
-
-                    <RangeCalendarFilter
-                      title="Período"
-                      icon={CalendarIcon}
-                      value={rangeParams}
-                      className="lg:flex-1"
-                      options={Object.entries(sortings).map(
-                        ([value, label]) => ({
-                          value,
-                          label
-                        })
-                      )}
-                      onChange={(props) => {
-                        setSearchParams((searchParams) => {
-                          if (!props) {
-                            searchParams.delete('from')
-                            searchParams.delete('to')
+              <div className="flex gap-2.5 mb-2.5">
+                {rowSelection.length ? (
+                  <>
+                    <div className="flex gap-2.5 items-center">
+                      <Button variant="outline">
+                        <TagIcon /> Marcador
+                      </Button>
+                      <DropdownMenuExport rowSelection={rowSelection} />
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div className="w-full 2xl:w-1/3">
+                      <SearchForm
+                        defaultValue={searchParams.get('q') || ''}
+                        placeholder={
+                          <>
+                            Digite <Kbd className="border font-mono">/</Kbd>{' '}
+                            para pesquisar
+                          </>
+                        }
+                        onChange={(value) =>
+                          setSearchParams((searchParams) => {
+                            searchParams.set('q', String(value))
+                            searchParams.delete('p')
                            return searchParams
-                          }
+                          })
+                        }
+                      />
+                    </div>

-                          const { rangeField, dateRange } = props
+                    <div className="flex gap-2.5 max-lg:flex-col w-full">
+                      <div className="flex gap-2.5 max-lg:flex-col">
+                        <FacetedFilter
+                          title="Status"
+                          icon={PlusCircleIcon}
+                          className="lg:flex-1"
+                          value={status ? status.split(',') : []}
+                          onChange={(statuses) => {
+                            setSearchParams((searchParams) => {
+                              searchParams.delete('status')
+                              searchParams.delete('p')

-                          searchParams.set(
-                            'from',
-                            `${rangeField}:${formatted.format(dateRange?.from)}`
-                          )
-                          searchParams.set(
-                            'to',
-                            formatted.format(dateRange?.to)
-                          )
+                              if (statuses.length) {
+                                searchParams.set('status', statuses.join(','))
+                              }

-                          return searchParams
-                        })
-                      }}
-                    />
-                  </div>
+                              return searchParams
+                            })
+                          }}
+                          options={Object.entries(statuses).map(
+                            ([key, value]) => ({
+                              value: key,
+                              ...value
+                            })
+                          )}
+                        />

-                  <div className="lg:ml-auto flex gap-2.5">
-                    <DataTableViewOptions className="flex-1" />
+                        <RangeCalendarFilter
+                          title="Período"
+                          icon={CalendarIcon}
+                          value={rangeParams}
+                          className="lg:flex-1"
+                          options={Object.entries(sortings).map(
+                            ([value, label]) => ({
+                              value,
+                              label
+                            })
+                          )}
+                          onChange={(props) => {
+                            setSearchParams((searchParams) => {
+                              if (!props) {
+                                searchParams.delete('from')
+                                searchParams.delete('to')
+                                return searchParams
+                              }

-                    <Button className="flex-1" asChild>
-                      <Link to="add">
-                        <PlusIcon /> Adicionar
-                      </Link>
-                    </Button>
-                  </div>
-                </div>
+                              const { rangeField, dateRange } = props
+
+                              searchParams.set(
+                                'from',
+                                `${rangeField}:${formatted.format(dateRange?.from)}`
+                              )
+                              searchParams.set(
+                                'to',
+                                formatted.format(dateRange?.to)
+                              )
+
+                              return searchParams
+                            })
+                          }}
+                        />
+                      </div>
+
+                      <div className="lg:ml-auto flex gap-2.5">
+                        <DataTableViewOptions className="flex-1" />
+
+                        <Button className="flex-1" asChild>
+                          <Link to="add">
+                            <PlusIcon /> Adicionar
+                          </Link>
+                        </Button>
+                      </div>
+                    </div>
+                  </>
+                )}
              </div>
            </DataTable>
          )
@@ -213,3 +249,67 @@ function useRangeParams() {
    }
  }
 }
+
+export function DropdownMenuExport({
+  rowSelection = []
+}: {
+  rowSelection: object[]
+}) {
+  const headers = {
+    id: 'ID',
+    'user.name': 'Nome',
+    'user.email': 'Email',
+    'user.cpf': 'CPF',
+    'course.name': 'Curso',
+    status: 'Status',
+    progress: 'Progresso',
+    created_at: 'Cadastrado em',
+    started_at: 'Iniciado em',
+    completed_at: 'Concluído em',
+    failed_at: 'Reprovado em',
+    canceled_at: 'Cancelado em'
+  }
+
+  const handleExport = (bookType: BookType) => () => {
+    if (!rowSelection.length) {
+      return
+    }
+
+    const header = Object.keys(headers)
+    const data = rowSelection.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, `${formatted.format(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={handleExport('xlsx')}>
+            <FileSpreadsheetIcon /> Microsoft Excel (.xlsx)
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={handleExport('csv')}>
+            <FileTextIcon /> CSV (.csv)
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}