update select

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

@@ -27,7 +27,7 @@ export function DataTableColumnHeader<TData, TValue>({
     <Button
       variant="ghost"
       size="sm"
-      className={cn('-ml-3 h-8 cursor-pointer', className)}
+      className={cn('-ml-3 cursor-pointer', className)}
       onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
     >
       <span>{title}</span>

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

@@ -3,7 +3,6 @@
 import {
   flexRender,
   getCoreRowModel,
-  getSortedRowModel,
   useReactTable,
   type ColumnDef,
   type ColumnSort,
@@ -89,6 +88,8 @@ export function DataTable<TData, TValue>({
     })
   }
 
+  // table.getSelectedRowModel().flatRows.map((row) => row.original)
+
   const table = useReactTable({
     data,
     columns,
@@ -105,6 +106,7 @@ export function DataTable<TData, TValue>({
     manualSorting: true,
     manualPagination: true,
     enableRowSelection: true,
+    getRowId: (row: any) => row.id,
     getCoreRowModel: getCoreRowModel(),
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,

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

@@ -1,5 +1,5 @@
 import { type Table } from '@tanstack/react-table'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
 
 import { Button } from '@repo/ui/components/ui/button'
 import {
@@ -21,63 +21,54 @@ export function DataTablePagination<TData>({
   const rowCount = table.getRowCount()
 
   return (
-    <div className="flex items-center">
+    <div className="flex items-center justify-end gap-3 lg:gap-6">
-      <div className="text-muted-foreground flex-1 text-sm">
+      <div className="flex items-center gap-2">
-        {table.getFilteredSelectedRowModel().rows.length} de{' '}
+        <p className="text-sm font-medium hidden lg:block">Itens por página</p>
-        {table.getFilteredRowModel().rows.length} linha(s) selecionada(s).
+        <Select
+          value={String(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={String(pageSize)}>
+                {pageSize}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
 
-      <div className="flex items-center gap-3 lg:gap-6">
+      <div className="text-sm font-medium">
-        <div className="flex items-center space-x-2">
+        {(pageIndex + 1) * pageSize - pageSize + 1}-
-          <p className="text-sm font-medium hidden lg:block">
+        {Math.min((pageIndex + 1) * pageSize, rowCount)}
-            Itens por página
+      </div>
-          </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">
+      <div className="flex items-center gap-2 *:cursor-pointer">
-          {(pageIndex + 1) * pageSize - pageSize + 1}-
+        <Button
-          {Math.min((pageIndex + 1) * pageSize, rowCount)}
+          variant="ghost"
-        </div>
+          size="icon"
-
+          className="size-8"
-        <div className="flex items-center gap-2 *:cursor-pointer">
+          onClick={() => table.previousPage()}
-          <Button
+          disabled={!table.getCanPreviousPage()}
-            variant="ghost"
+        >
-            size="icon"
+          <span className="sr-only">Ir para a página anterior</span>
-            className="size-8"
+          <ChevronLeftIcon />
-            onClick={() => table.previousPage()}
+        </Button>
-            disabled={!table.getCanPreviousPage()}
+        <Button
-          >
+          variant="ghost"
-            <span className="sr-only">Ir para a página anterior</span>
+          size="icon"
-            <ChevronLeft />
+          className="size-8"
-          </Button>
+          onClick={() => table.nextPage()}
-          <Button
+          disabled={!table.getCanNextPage()}
-            variant="ghost"
+        >
-            size="icon"
+          <span className="sr-only">Ir para a próxima página</span>
-            className="size-8"
+          <ChevronRightIcon />
-            onClick={() => table.nextPage()}
+        </Button>
-            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/range-calendar-filter.tsx

@@ -1,13 +1,20 @@
 'use client'
 
-import { CalendarIcon } from 'lucide-react'
+import { EllipsisIcon } from 'lucide-react'
-import { useState, type ReactNode } from 'react'
+import { useState } from 'react'
 import { type DateRange } from 'react-day-picker'
 import { ptBR } from 'react-day-picker/locale'
 
 import { Badge } from '@repo/ui/components/ui/badge'
 import { Button } from '@repo/ui/components/ui/button'
 import { Calendar } from '@repo/ui/components/ui/calendar'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger
+} from '@repo/ui/components/ui/dropdown-menu'
 import {
   Popover,
   PopoverContent,
@@ -23,53 +30,100 @@ const formatted = new Intl.DateTimeFormat('pt-BR', {
   year: '2-digit'
 })
 
+type FilterProps = {
+  rangeField?: string
+  dateRange?: DateRange
+}
+
 type RangeCalendarFilterProps = {
-  children?: ReactNode
+  title: string
-  value?: DateRange
+  icon: React.ComponentType
+  value?: FilterProps
+  options: { value: string; label: string }[]
   className?: string
-  onChange?: (values: DateRange | undefined) => void
+  onChange?: (values: FilterProps | undefined) => void
 }
 
 export function RangeCalendarFilter({
-  children,
+  title,
+  icon: Icon,
   value = undefined,
+  options = [],
   className,
   onChange
 }: RangeCalendarFilterProps) {
-  const [dateRange, setDateRange] = useState<DateRange | undefined>(value)
+  const [rangeField, setRangeField] = useState<string | undefined>(
+    value?.rangeField || options?.[0]?.value
+  )
+
+  const [dateRange, setDateRange] = useState<DateRange | undefined>(
+    value?.dateRange
+  )
 
   return (
     <Popover>
-      <PopoverTrigger asChild>
+      <div
-        <Button
+        className={cn(
-          variant="outline"
+          'h-9 border rounded-md bg-muted border-dashed flex items-center',
-          size="sm"
+          className
-          className={cn('h-9 border-dashed cursor-pointer', className)}
+        )}
-        >
+      >
-          <CalendarIcon /> Período
+        <PopoverTrigger asChild>
-          {dateRange && (
+          <Button variant="ghost" size="sm" className="cursor-pointer">
-            <>
+            <Icon /> {title}
-              <Separator orientation="vertical" className="mx-2 h-4" />
+            {dateRange && (
-              <div className="gap-1 flex">
+              <>
-                <Badge variant="outline" className="rounded-sm px-1 font-mono">
+                <Separator orientation="vertical" className="mx-0.5 h-4" />
-                  {formatted.format(dateRange.from)}
+                <div className="gap-1 flex">
-                </Badge>
+                  <Badge
-                <Badge variant="outline" className="rounded-sm px-1  font-mono">
+                    variant="outline"
-                  {formatted.format(dateRange.to)}
+                    className="rounded-sm px-1 font-mono"
-                </Badge>
+                  >
-              </div>
+                    {formatted.format(dateRange.from)}
-            </>
+                  </Badge>
-          )}
+                  <Badge
-        </Button>
+                    variant="outline"
-      </PopoverTrigger>
+                    className="rounded-sm px-1  font-mono"
-      <PopoverContent className="w-full p-0" align="start">
+                  >
-        {children && (
+                    {formatted.format(dateRange.to)}
+                  </Badge>
+                </div>
+              </>
+            )}
+          </Button>
+        </PopoverTrigger>
+
+        {dateRange && (
           <>
-            {children}
+            <Separator orientation="vertical" className="h-4" />
-            <Separator />
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="cursor-pointer">
+                  <EllipsisIcon />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-46" align="end">
+                <DropdownMenuRadioGroup
+                  value={rangeField}
+                  onValueChange={(rangeField) => {
+                    setRangeField(rangeField)
+                    onChange?.({ rangeField, dateRange })
+                  }}
+                  className="*:cursor-pointer"
+                >
+                  {options.map(({ label, value }, idx) => (
+                    <DropdownMenuRadioItem value={value} key={idx}>
+                      {label}
+                    </DropdownMenuRadioItem>
+                  ))}
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </>
         )}
+      </div>
 
+      <PopoverContent className="w-full p-0" align="start">
         <Calendar
           mode="range"
           locale={ptBR}
@@ -91,7 +145,7 @@ export function RangeCalendarFilter({
               dateRange.to = nextDay
             }
 
-            onChange?.(dateRange)
+            onChange?.({ rangeField, dateRange })
             setDateRange(dateRange)
           }}
         />

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/columns.tsx

@@ -52,6 +52,7 @@ export const columns: ColumnDef<Enrollment>[] = [
     cell: ({ row }) => (
       <Checkbox
         checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
         onCheckedChange={(value) => row.toggleSelected(!!value)}
         aria-label="Selecionar linha"
       />
@@ -149,9 +150,9 @@ export const columns: ColumnDef<Enrollment>[] = [
   {
     accessorKey: 'completed_at',
     header: ({ column }) => (
-      <DataTableColumnHeader column={column} title="Aprovado em" />
+      <DataTableColumnHeader column={column} title="Concluído em" />
     ),
-    meta: { title: 'Aprovado em' },
+    meta: { title: 'Concluído em' },
     enableSorting: true,
     enableHiding: true,
     cell: cellDate

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/data.tsx

@@ -23,7 +23,7 @@ export const statuses: Record<
   COMPLETED: {
     icon: CircleCheckIcon,
     color: 'text-green-400 [&_svg]:text-background [&_svg]:fill-green-500',
-    label: 'Aprovado'
+    label: 'Concluído'
   },
   FAILED: {
     icon: CircleXIcon,
@@ -44,3 +44,11 @@ export const labels: Record<string, string> = {
   FAILED: 'Reprovado',
   CANCELED: 'Cancelado'
 }
+
+export const sortings: Record<string, string> = {
+  created_at: 'Matriculado em',
+  started_at: 'Iniciado em',
+  completed_at: 'Concluído em',
+  failed_at: 'Reprovado em',
+  canceled_at: 'Cancelado em'
+}

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/route.tsx

@@ -1,8 +1,8 @@
 import type { Route } from './+types'
 
-import { PlusCircleIcon, PlusIcon } from 'lucide-react'
+import { CalendarIcon, PlusCircleIcon, PlusIcon } from 'lucide-react'
 import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
-import { Suspense, useState } from 'react'
+import { Suspense } from 'react'
 import { Await, Link, useSearchParams } from 'react-router'
 
 import { DataTable, DataTableViewOptions } from '@/components/data-table'
@@ -14,16 +14,8 @@ import { SearchForm } from '@repo/ui/components/search-form'
 import { Skeleton } from '@repo/ui/components/skeleton'
 import { Button } from '@repo/ui/components/ui/button'
 import { Kbd } from '@repo/ui/components/ui/kbd'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@repo/ui/components/ui/select'
 import { columns, type Enrollment } from './columns'
-import { statuses } from './data'
+import { sortings, statuses } from './data'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Matrículas' }]
@@ -33,17 +25,17 @@ export async function loader({ params, context, request }: Route.LoaderArgs) {
   const { searchParams } = new URL(request.url)
   const { orgid } = params
   const query = searchParams.get('q') || ''
-  const from = searchParams.get('from') || ''
+  const from = searchParams.get('from')
-  const to = searchParams.get('to') || ''
+  const to = searchParams.get('to')
   const sort = searchParams.get('sort') || 'created_at:desc'
-  const status = searchParams.getAll('status') || []
+  const status = searchParams.get('status')
   const page = Number(searchParams.get('p')) + 1
   const hitsPerPage = Number(searchParams.get('perPage')) || 25
 
   let builder = new MeiliSearchFilterBuilder().where('org_id', '=', orgid)
 
-  if (status.length) {
+  if (status) {
-    builder = builder.where('status', 'in', status)
+    builder = builder.where('status', 'in', status.split(','))
   }
 
   if (from && to) {
@@ -72,8 +64,8 @@ const formatted = new Intl.DateTimeFormat('en-CA', {
 
 export default function Route({ loaderData: { data } }) {
   const [searchParams, setSearchParams] = useSearchParams()
-  // const [rangeField, setRangeField] = useState<string>('created_at')
+  const status = searchParams.get('status')
-  const { rangeField, dateRange } = useRangeParams('created_at')
+  const rangeParams = useRangeParams()
 
   return (
     <Suspense fallback={<Skeleton />}>
@@ -126,26 +118,22 @@ export default function Route({ loaderData: { data } }) {
                 <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={searchParams.getAll('status')}
+                      value={status ? status.split(',') : []}
                       onChange={(statuses) => {
                         setSearchParams((searchParams) => {
                           searchParams.delete('status')
                           searchParams.delete('p')
 
                           if (statuses.length) {
-                            statuses.forEach((s) =>
+                            searchParams.set('status', statuses.join(','))
-                              searchParams.has('status', s)
-                                ? null
-                                : searchParams.append('status', s)
-                            )
                           }
 
                           return searchParams
                         })
                       }}
-                      title="Status"
                       options={Object.entries(statuses).map(([key, value]) => ({
                         value: key,
                         ...value
@@ -153,69 +141,39 @@ export default function Route({ loaderData: { data } }) {
                     />
 
                     <RangeCalendarFilter
+                      title="Período"
+                      icon={CalendarIcon}
+                      value={rangeParams}
                       className="lg:flex-1"
-                      value={dateRange}
+                      options={Object.entries(sortings).map(
-                      onChange={(dateRange) => {
+                        ([value, label]) => ({
+                          value,
+                          label
+                        })
+                      )}
+                      onChange={(props) => {
                         setSearchParams((searchParams) => {
-                          if (dateRange) {
+                          if (!props) {
-                            searchParams.set(
-                              'from',
-                              `${rangeField}:${formatted.format(dateRange.from)}`
-                            )
-                            searchParams.set(
-                              'to',
-                              formatted.format(dateRange.to)
-                            )
-                          } else {
                             searchParams.delete('from')
                             searchParams.delete('to')
+                            return searchParams
                           }
 
+                          const { rangeField, dateRange } = props
+
+                          searchParams.set(
+                            'from',
+                            `${rangeField}:${formatted.format(dateRange?.from)}`
+                          )
+                          searchParams.set(
+                            'to',
+                            formatted.format(dateRange?.to)
+                          )
+
                           return searchParams
                         })
                       }}
-                    >
+                    />
-                      <div className="p-2.5">
-                        <Select
-                          defaultValue={rangeField}
-                          onValueChange={(value) => {
-                            setSearchParams((searchParams) => {
-                              if (searchParams.has('from')) {
-                                searchParams.set(
-                                  'from',
-                                  `${value}:${dateRange?.from?.getTime()}`
-                                )
-                              }
-
-                              return searchParams
-                            })
-                          }}
-                        >
-                          <SelectTrigger className="w-full">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectGroup>
-                              <SelectItem value="created_at">
-                                Matriculado em
-                              </SelectItem>
-                              <SelectItem value="started_at">
-                                Iniciado em
-                              </SelectItem>
-                              <SelectItem value="completed_at">
-                                Aprovado em
-                              </SelectItem>
-                              <SelectItem value="failed_at">
-                                Reprovado em
-                              </SelectItem>
-                              <SelectItem value="canceled_at">
-                                Cancelado em
-                              </SelectItem>
-                            </SelectGroup>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                    </RangeCalendarFilter>
                   </div>
 
                   <div className="lg:ml-auto flex gap-2.5">
@@ -237,12 +195,12 @@ export default function Route({ loaderData: { data } }) {
   )
 }
 
-function useRangeParams(initRangeField: string) {
+function useRangeParams() {
   const [searchParams] = useSearchParams()
   const [from, to] = [searchParams.get('from'), searchParams.get('to')]
 
   if (!from || !to) {
-    return { rangeField: initRangeField, dateRange: undefined }
+    return {}
   }
 
   const [rangeField, from_] = from.split(':')

id.saladeaula.digital/app/oauth2.py

@@ -42,8 +42,7 @@ private_jwk = JsonWebKey.import_key(private_key)
 # https://docs.authlib.org/en/v0.12/specs/rfc6750.html#authlib.oauth2.rfc6750.BearerToken.GRANT_TYPES_EXPIRES_IN
 GRANT_TYPES_EXPIRES_IN = {
     'authorization_code': 60 * 3,  # 3 minutes
-    'refresh_token': 60 * 3,  # 3 minutes
+    'refresh_token': 3600,  # 1 hour
-    # 'refresh_token': 3600,  # 1 hour
 }
 
 

packages/ui/src/components/faceted-filter.tsx

@@ -21,8 +21,8 @@ import { Separator } from '@repo/ui/components/ui/separator'
 import { cn } from '@repo/ui/lib/utils'
 
 interface FacetedFilterProps<TData, TValue> {
-  value?: string[]
   title?: string
+  value?: string[]
   icon: React.ComponentType
   className?: string
   options: {
@@ -55,7 +55,7 @@ export function FacetedFilter<TData, TValue>({
           {title}
           {selectedValues?.size > 0 && (
             <>
-              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Separator orientation="vertical" className="mx-0.5 h-4" />
               <div className="gap-1 flex">
                 {selectedValues.size > 2 ? (
                   <Badge