update

apps/admin.saladeaula.digital/app/components/data-table.tsx

@@ -1,270 +0,0 @@
-'use client'
-
-import {
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-  type ColumnDef,
-  type Table as TTable,
-  type VisibilityState
-} from '@tanstack/react-table'
-import {
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  Columns2Icon
-} from 'lucide-react'
-import { createContext, useContext, useState, type ReactNode } from 'react'
-import { useSearchParams } from 'react-router'
-
-import { Button } from '@repo/ui/components/ui/button'
-import { Card, CardContent } from '@repo/ui/components/ui/card'
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger
-} from '@repo/ui/components/ui/dropdown-menu'
-import { Label } from '@repo/ui/components/ui/label'
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem
-} from '@repo/ui/components/ui/pagination'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@repo/ui/components/ui/select'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow
-} from '@repo/ui/components/ui/table'
-import { cn } from '@repo/ui/lib/utils'
-
-interface DataTableProps<TData, TValue> {
-  children?: ReactNode
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
-  pageIndex: number
-  pageSize: number
-  rowCount: number
-  hiddenColumn?: string[]
-}
-
-const TableContext = createContext<{ table: TTable<any> } | null>(null)
-
-export function DataTable<TData, TValue>({
-  children,
-  columns,
-  data,
-  pageIndex,
-  pageSize,
-  rowCount,
-  hiddenColumn = []
-}: DataTableProps<TData, TValue>) {
-  const [, setSearchParams] = useSearchParams()
-  const hiddenColumn_ = Object.fromEntries(
-    hiddenColumn.map((column) => [column, false])
-  )
-  const [columnVisibility, setColumnVisibility] =
-    useState<VisibilityState>(hiddenColumn_)
-  const [rowSelection, setRowSelection] = useState({})
-
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    onRowSelectionChange: setRowSelection,
-    state: {
-      rowSelection,
-      columnVisibility,
-      pagination: {
-        pageIndex,
-        pageSize
-      }
-    },
-    onColumnVisibilityChange: setColumnVisibility,
-    onPaginationChange: (updater) => {
-      const newState =
-        typeof updater === 'function'
-          ? updater({ pageIndex, pageSize })
-          : updater
-
-      setSearchParams((searchParams) => {
-        searchParams.set('p', newState?.pageIndex.toString())
-        searchParams.set('perPage', newState?.pageSize.toString())
-        return searchParams
-      })
-    },
-    manualPagination: true,
-    rowCount
-  })
-
-  return (
-    <TableContext value={{ table }}>
-      <div className="space-y-2.5 max-md:mb-2">
-        <Card className="relative w-full overflow-auto">
-          <CardContent>
-            {children}
-
-            <Table>
-              <TableHeader>
-                {table.getHeaderGroups().map((headerGroup) => (
-                  <TableRow
-                    key={headerGroup.id}
-                    className="hover:bg-transparent"
-                  >
-                    {headerGroup.headers.map((header) => {
-                      return (
-                        <TableHead key={header.id} className="p-4">
-                          {header.isPlaceholder
-                            ? null
-                            : flexRender(
-                                header.column.columnDef.header,
-                                header.getContext()
-                              )}
-                        </TableHead>
-                      )
-                    })}
-                  </TableRow>
-                ))}
-              </TableHeader>
-
-              <TableBody>
-                {table.getRowModel().rows?.length ? (
-                  table.getRowModel().rows.map((row) => (
-                    <TableRow
-                      key={row.id}
-                      data-state={row.getIsSelected() && 'selected'}
-                    >
-                      {row.getVisibleCells().map((cell) => (
-                        <TableCell key={cell.id} className="p-4">
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext()
-                          )}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))
-                ) : (
-                  <TableRow>
-                    <TableCell
-                      colSpan={columns.length}
-                      className="h-24 text-center"
-                    >
-                      Nenhum resultado.
-                    </TableCell>
-                  </TableRow>
-                )}
-              </TableBody>
-            </Table>
-          </CardContent>
-        </Card>
-
-        <div className="flex items-center justify-end gap-5">
-          <div className="hidden items-center gap-2.5 lg:flex">
-            <Label htmlFor="rows-per-page" className="text-sm font-medium">
-              Itens por página
-            </Label>
-            <Select
-              value={String(table.getState().pagination.pageSize)}
-              onValueChange={(value) => {
-                table.setPageSize(Number(value))
-              }}
-            >
-              <SelectTrigger size="sm" className="w-20">
-                <SelectValue
-                  placeholder={String(table.getState().pagination.pageSize)}
-                />
-              </SelectTrigger>
-              <SelectContent side="top">
-                {[12, 25, 50, 100].map((pageSize) => (
-                  <SelectItem key={pageSize} value={String(pageSize)}>
-                    {pageSize}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="flex items-center gap-5">
-            <Pagination>
-              <PaginationContent className="gap-2">
-                <PaginationItem>
-                  {(pageIndex + 1) * pageSize - pageSize + 1}-
-                  {Math.min((pageIndex + 1) * pageSize, rowCount)}
-                </PaginationItem>
-
-                <PaginationItem>
-                  <Button
-                    variant="ghost"
-                    className="cursor-pointer"
-                    onClick={() => table.previousPage()}
-                    disabled={!table.getCanPreviousPage()}
-                  >
-                    <ChevronLeftIcon />
-                  </Button>
-                </PaginationItem>
-
-                <PaginationItem>
-                  <Button
-                    variant="ghost"
-                    className="cursor-pointer"
-                    onClick={() => table.nextPage()}
-                    disabled={!table.getCanNextPage()}
-                  >
-                    <ChevronRightIcon />
-                  </Button>
-                </PaginationItem>
-              </PaginationContent>
-            </Pagination>
-          </div>
-        </div>
-      </div>
-    </TableContext>
-  )
-}
-
-export function CustomizeColumns({ className }: { className?: string }) {
-  const { table } = useContext(TableContext)
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" className={cn('cursor-pointer', className)}>
-          <Columns2Icon />
-          <span className="hidden lg:inline">Exibir colunas</span>
-          <span className="lg:hidden">Colunas</span>
-          <ChevronDownIcon />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-56 *:cursor-pointer">
-        {table
-          .getAllColumns()
-          .filter(
-            (column) =>
-              typeof column.accessorFn !== 'undefined' && column.getCanHide()
-          )
-          .map((column) => {
-            return (
-              <DropdownMenuCheckboxItem
-                key={column.id}
-                checked={column.getIsVisible()}
-                onCheckedChange={(value) => column.toggleVisibility(!!value)}
-              >
-                {column.columnDef.header}
-              </DropdownMenuCheckboxItem>
-            )
-          })}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}

apps/admin.saladeaula.digital/app/components/data-table/column-header.tsx

@@ -0,0 +1,66 @@
+import { type Column } from '@tanstack/react-table'
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from 'lucide-react'
+
+import { Button } from '@repo/ui/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@repo/ui/components/ui/dropdown-menu'
+import { cn } from '@repo/ui/lib/utils'
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  title: string
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>
+  }
+
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="data-[state=open]:bg-accent -ml-3 h-8"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === 'desc' ? (
+              <ArrowDown />
+            ) : column.getIsSorted() === 'asc' ? (
+              <ArrowUp />
+            ) : (
+              <ChevronsUpDown />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUp />
+            Cres.
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDown />
+            Decr.
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeOff />
+            Ocultar
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}

apps/admin.saladeaula.digital/app/components/data-table/data-table.tsx

@@ -0,0 +1,181 @@
+'use client'
+
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type ColumnSort,
+  type SortingState,
+  type Table,
+  type VisibilityState
+} from '@tanstack/react-table'
+import { createContext, useState, type ReactNode } from 'react'
+import { useSearchParams } from 'react-router'
+
+import { Card, CardContent } from '@repo/ui/components/ui/card'
+import {
+  Table as Table_,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@repo/ui/components/ui/table'
+import { DataTablePagination } from './pagination'
+
+interface DataTableProps<TData, TValue> {
+  children?: ReactNode
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+  pageIndex: number
+  sort: SortingState
+  pageSize: number
+  rowCount: number
+  hiddenColumn?: string[]
+}
+
+export const TableContext = createContext<{ table: Table<any> } | null>(null)
+
+export function DataTable<TData, TValue>({
+  children,
+  columns,
+  data,
+  sort,
+  pageIndex,
+  pageSize,
+  rowCount,
+  hiddenColumn = []
+}: DataTableProps<TData, TValue>) {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const hiddenColumn_ = Object.fromEntries(
+    hiddenColumn.map((column) => [column, false])
+  )
+  const [columnVisibility, setColumnVisibility] =
+    useState<VisibilityState>(hiddenColumn_)
+  const [rowSelection, setRowSelection] = useState({})
+  const sortParam = searchParams.get('sort')
+  const sorting = sortParam
+    ? sortParam.split(',').map((s) => {
+        const [id, dir] = s.split(':')
+        return { id, desc: dir === 'desc' }
+      })
+    : sort
+
+  const setPagination = (updater: any) => {
+    const newState =
+      typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater
+
+    setSearchParams((searchParams) => {
+      searchParams.set('p', newState?.pageIndex.toString())
+      searchParams.set('perPage', newState?.pageSize.toString())
+      return searchParams
+    })
+  }
+
+  const setSorting = (updater: any) => {
+    const newSorting =
+      typeof updater === 'function' ? updater(sorting) : updater
+
+    setSearchParams((searchParams) => {
+      if (newSorting.length) {
+        const sort = newSorting
+          .map((s: ColumnSort) => `${s.id}:${s.desc ? 'desc' : 'asc'}`)
+          .join(',')
+        searchParams.set('sort', sort)
+      }
+      return searchParams
+    })
+  }
+
+  const table = useReactTable({
+    data,
+    columns,
+    rowCount,
+    state: {
+      sorting,
+      rowSelection,
+      columnVisibility,
+      pagination: {
+        pageIndex,
+        pageSize
+      }
+    },
+    manualSorting: true,
+    manualPagination: true,
+    enableRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    onRowSelectionChange: setRowSelection,
+    onSortingChange: setSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination
+  })
+
+  return (
+    <TableContext value={{ table }}>
+      <div className="space-y-2.5 max-md:mb-2">
+        <Card className="relative w-full overflow-auto">
+          <CardContent>
+            {children}
+
+            <Table_>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow
+                    key={headerGroup.id}
+                    className="hover:bg-transparent"
+                  >
+                    {headerGroup.headers.map((header) => {
+                      return (
+                        <TableHead key={header.id} className="p-2.5">
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </TableHead>
+                      )
+                    })}
+                  </TableRow>
+                ))}
+              </TableHeader>
+
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow
+                      key={row.id}
+                      data-state={row.getIsSelected() && 'selected'}
+                    >
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id} className="p-2.5">
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      Nenhum resultado.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table_>
+          </CardContent>
+        </Card>
+
+        <DataTablePagination table={table} />
+      </div>
+    </TableContext>
+  )
+}

apps/admin.saladeaula.digital/app/components/data-table/index.ts

@@ -0,0 +1,3 @@
+export { DataTableColumnHeader } from './column-header'
+export { DataTable } from './data-table'
+export { DataTableViewOptions } from './view-options'

apps/admin.saladeaula.digital/app/components/data-table/pagination.tsx

@@ -0,0 +1,84 @@
+import { type Table } from '@tanstack/react-table'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+import { Button } from '@repo/ui/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@repo/ui/components/ui/select'
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>
+}
+
+export function DataTablePagination<TData>({
+  table
+}: DataTablePaginationProps<TData>) {
+  const { pageIndex, pageSize } = table.getState().pagination
+  const rowCount = table.getRowCount()
+
+  return (
+    <div className="flex items-center">
+      <div className="text-muted-foreground flex-1 text-sm">
+        {table.getFilteredSelectedRowModel().rows.length} de{' '}
+        {table.getFilteredRowModel().rows.length} linha(s) selecionada(s).
+      </div>
+
+      <div className="flex items-center gap-3 lg:gap-6">
+        <div className="flex items-center space-x-2">
+          <p className="text-sm font-medium hidden lg:block">
+            Itens por página
+          </p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value))
+            }}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[12, 25, 50, 100].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="text-sm font-medium">
+          {(pageIndex + 1) * pageSize - pageSize + 1}-
+          {Math.min((pageIndex + 1) * pageSize, rowCount)}
+        </div>
+
+        <div className="flex items-center gap-2 *:cursor-pointer">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Ir para a página anterior</span>
+            <ChevronLeft />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-8"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Ir para a próxima página</span>
+            <ChevronRight />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/admin.saladeaula.digital/app/components/data-table/view-options.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { useContext } from 'react'
+
+import { type Table } from '@tanstack/react-table'
+import { Columns2Icon } from 'lucide-react'
+
+import { Button } from '@repo/ui/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger
+} from '@repo/ui/components/ui/dropdown-menu'
+import { cn } from '@repo/ui/lib/utils'
+import { TableContext } from './data-table'
+
+export function DataTableViewOptions<TData>({
+  className
+}: {
+  className: string
+}) {
+  const ctx = useContext(TableContext) as { table: Table<TData> } | null
+
+  if (!ctx) {
+    throw new Error('TableContext is null')
+  }
+
+  const { table } = ctx
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className={cn('cursor-pointer', className)}>
+          <Columns2Icon /> Colunas
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-44  *:cursor-pointer">
+        {table
+          .getAllColumns()
+          .filter(
+            (column) =>
+              typeof column.accessorFn !== 'undefined' && column.getCanHide()
+          )
+          .map((column) => {
+            return (
+              <DropdownMenuCheckboxItem
+                key={column.id}
+                checked={column.getIsVisible()}
+                onCheckedChange={(value) => column.toggleVisibility(!!value)}
+              >
+                {column.columnDef?.meta?.title ?? column.id}
+              </DropdownMenuCheckboxItem>
+            )
+          })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

apps/admin.saladeaula.digital/app/components/range-calendar-filter.tsx

@@ -32,7 +32,7 @@ type RangeCalendarFilterProps = {
 
 export function RangeCalendarFilter({
   children,
-  value,
+  value = undefined,
   className,
   onChange
 }: RangeCalendarFilterProps) {
@@ -85,8 +85,8 @@ export function RangeCalendarFilter({
               return setDateRange(undefined)
             }
 
-            if (dateRange.to?.getTime() === dateRange.from?.getTime()) {
-              const nextDay = new Date(String(dateRange?.from))
+            if (dateRange.from?.getTime() === dateRange.to?.getTime()) {
+              const nextDay = new Date(String(dateRange.from))
               nextDay.setDate(nextDay.getDate() + 6)
               dateRange.to = nextDay
             }