sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update tables

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-11-25 08:16:34 -03:00
parent 89b92948a6
commit d7fe03bd1f
23 changed files with 432 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,19 @@
'use client'
import type { ColumnDef } from '@tanstack/react-table'
import type { ComponentProps, MouseEvent } from 'react'
import { useRequest, useToggle } from 'ahooks'
import {
CircleXIcon,
EllipsisVerticalIcon,
FileBadgeIcon,
HelpCircleIcon,
LockOpenIcon
} from 'lucide-react'
import type { ComponentProps, MouseEvent } from 'react'
import { toast } from 'sonner'
import { Abbr } from '@repo/ui/components/abbr'
import {
DataTableColumnDatetime,
DataTableColumnHeader
DataTableColumnHeaderSelect,
DataTableColumnSelect
} from '@repo/ui/components/data-table'
import {
AlertDialog,
@@ -28,10 +26,8 @@ import {
AlertDialogTitle,
AlertDialogTrigger
} from '@repo/ui/components/ui/alert-dialog'
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,
@@ -39,170 +35,24 @@ import {
DropdownMenuSeparator,
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 {
type Enrollment,
columns as columns_
} 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
}
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',
meta: { title: 'Cadastrado em' },
enableSorting: true,
enableHiding: true,
header: ({ column }) => <DataTableColumnHeader column={column} />,
cell: ({ row, column }) => (
<DataTableColumnDatetime row={row} column={column} />
)
},
{
accessorKey: 'started_at',
meta: { title: 'Iniciado em' },
enableSorting: true,
enableHiding: true,
header: ({ column }) => <DataTableColumnHeader column={column} />,
cell: ({ row, column }) => (
<DataTableColumnDatetime row={row} column={column} />
)
},
{
accessorKey: 'completed_at',
meta: { title: 'Concluído em' },
enableSorting: true,
enableHiding: true,
header: ({ column }) => <DataTableColumnHeader column={column} />,
cell: ({ row, column }) => (
<DataTableColumnDatetime row={row} column={column} />
)
},
{
accessorKey: 'failed_at',
meta: { title: 'Reprovado em' },
enableSorting: true,
enableHiding: true,
header: ({ column }) => <DataTableColumnHeader column={column} />,
cell: ({ row, column }) => (
<DataTableColumnDatetime row={row} column={column} />
)
},
{
accessorKey: 'canceled_at',
meta: { title: 'Cancelado em' },
enableSorting: true,
enableHiding: true,
header: ({ column }) => <DataTableColumnHeader column={column} />,
cell: ({ row, column }) => (
<DataTableColumnDatetime row={row} column={column} />
)
header: DataTableColumnHeaderSelect,
cell: DataTableColumnSelect
},
...columns_,
{
id: 'actions',
cell: ({ row }) => <ActionMenu row={row} />
cell: ActionMenu
}
]

20
apps/admin.saladeaula.digital/app/routes/_.$orgid.orders._index/columns.tsx Normal file
View File

@@ -0,0 +1,20 @@
'use client'
import { type ColumnDef } from '@tanstack/react-table'
import {
DataTableColumnHeaderSelect,
DataTableColumnSelect
} from '@repo/ui/components/data-table'
import { columns as columns_, type Order } from '@repo/ui/routes/orders/columns'
export type { Order }
export const columns: ColumnDef<Order>[] = [
{
id: 'select',
header: DataTableColumnHeaderSelect,
cell: DataTableColumnSelect
},
...columns_
]

3
apps/admin.saladeaula.digital/app/routes/_.$orgid.orders._index/route.tsx
View File

@@ -7,7 +7,8 @@ import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
import { DataTable } from '@repo/ui/components/data-table'
import { Skeleton } from '@repo/ui/components/skeleton'
import { createSearch } from '@repo/util/meili'
import { columns, type Order } from '@repo/ui/routes/orders/columns'
import { columns, type Order } from './columns'
export function meta({}: Route.MetaArgs) {
return [{ title: 'Histórico de compras' }]

92
apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/columns.tsx
View File

@@ -10,12 +10,10 @@ import {
import { NavLink, useParams } from 'react-router'
import { toast } from 'sonner'
import { Abbr } from '@repo/ui/components/abbr'
import {
useDataTable,
DataTableColumnDatetime,
DataTableColumnHeader,
DataTableColumnCpfCnpj
DataTableColumnHeaderSelect,
DataTableColumnSelect
} from '@repo/ui/components/data-table'
import {
AlertDialog,
@@ -28,9 +26,7 @@ import {
AlertDialogTitle,
AlertDialogTrigger
} from '@repo/ui/components/ui/alert-dialog'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { Button } from '@repo/ui/components/ui/button'
import { Checkbox } from '@repo/ui/components/ui/checkbox'
import {
DropdownMenu,
DropdownMenuContent,
@@ -39,92 +35,20 @@ import {
} from '@repo/ui/components/ui/dropdown-menu'
import { Spinner } from '@repo/ui/components/ui/spinner'
import { initials } from '@repo/ui/lib/utils'
import { type User, columns as columns_ } from '@repo/ui/routes/users/columns'
// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type User = {
id: string
name: string
email: string
cpf?: string
cnpj?: string
}
export type { User }
export const columns: ColumnDef<User>[] = [
{
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"
/>
)
},
{
header: 'Colaborador',
cell: ({ row }) => {
const { name, email } = row.original
return (
<div className="flex gap-2.5 items-center">
<Avatar className="size-10 hidden lg:block">
<AvatarFallback>{initials(name)}</AvatarFallback>
</Avatar>
<ul>
<li className="font-bold">
<Abbr>{name}</Abbr>
</li>
<li className="text-muted-foreground text-sm">
<Abbr>{email}</Abbr>
</li>
</ul>
</div>
)
}
},
{
accessorKey: 'cpf',
header: 'CPF',
cell: ({ row, column }) => (
<DataTableColumnCpfCnpj row={row} column={column} />
)
},
{
accessorKey: 'createDate',
enableSorting: true,
meta: { title: 'Cadastrado em' },
header: ({ column }) => <DataTableColumnHeader column={column} />,
cell: ({ row, column }) => (
<DataTableColumnDatetime row={row} column={column} />
)
},
{
accessorKey: 'lastLogin',
enableSorting: true,
meta: { title: 'Último acesso' },
header: ({ column }) => <DataTableColumnHeader column={column} />,
cell: ({ row, column }) => (
<DataTableColumnDatetime row={row} column={column} />
)
header: DataTableColumnHeaderSelect,
cell: DataTableColumnSelect
},
...columns_,
{
id: 'actions',
cell: ({ row }) => <ActionMenu row={row} />
cell: ActionMenu
}
]

8
apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/data.tsx
View File

@@ -1,8 +0,0 @@
export const headers = {
id: 'ID',
name: 'Nome',
email: 'Email',
cpf: 'CPF',
createDate: 'Cadastrado em',
lastLogin: 'Último acesso'
}

6
apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/route.tsx
View File

@@ -12,6 +12,9 @@ import { Button } from '@repo/ui/components/ui/button'
import { Kbd } from '@repo/ui/components/ui/kbd'
import { ExportMenu } from '@repo/ui/components/export-menu'
import { createSearch } from '@repo/util/meili'
import { headers } from '@repo/ui/routes/users/data'
import { columns, type User } from './columns'
export function meta({}: Route.MetaArgs) {
return [
@@ -23,9 +26,6 @@ export function meta({}: Route.MetaArgs) {
]
}
import { headers } from './data'
import { columns, type User } from './columns'
export async function loader({ params, context, request }: Route.LoaderArgs) {
const { searchParams } = new URL(request.url)
const { orgid } = params

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

@@ -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

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

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

50
apps/insights.saladeaula.digital/app/routes/_app.orgs._index/columns.tsx
View File

@@ -1,30 +1,26 @@
'use client'
import { formatCNPJ } from '@brazilian-utils/brazilian-utils'
import { type ColumnDef } from '@tanstack/react-table'
import { Abbr } from '@repo/ui/components/abbr'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { initials } from '@repo/ui/lib/utils'
import {
DataTableColumnCpfCnpj,
DataTableColumnDatetime,
DataTableColumnHeaderSelect,
DataTableColumnSelect
} from '@repo/ui/components/data-table'
import type { Org } from '@repo/ui/routes/orgs/data'
// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Org = {
id: string
name: string
email: string
cnpj?: string
}
const formatted = new Intl.DateTimeFormat('pt-BR', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
export type { Org }
export const columns: ColumnDef<Org>[] = [
{
id: 'select',
header: DataTableColumnHeaderSelect,
cell: DataTableColumnSelect
},
{
header: 'Empresa',
cell: ({ row }) => {
@@ -49,25 +45,13 @@ export const columns: ColumnDef<Org>[] = [
}
},
{
accessorKey: 'cnpj',
header: 'CNPJ',
cell: ({ row }) => {
const { cnpj } = row.original
return <>{formatCNPJ(cnpj)}</>
}
cell: DataTableColumnCpfCnpj
},
{
accessorKey: 'createDate',
header: 'Cadastrado em',
meta: {
className: 'w-1/12'
},
cell: ({ row }) => {
const { createDate } = row.original
if (!createDate) {
return <></>
}
return formatted.format(new Date(createDate))
}
cell: DataTableColumnDatetime
}
]

33
apps/insights.saladeaula.digital/app/routes/_app.payments._index/columns.tsx
View File

@@ -1,17 +1,23 @@
'use client'
import { columns as columns_, type Order } from '@repo/ui/routes/orders/columns'
import { formatCNPJ, formatCPF } from '@brazilian-utils/brazilian-utils'
import { type ColumnDef } from '@tanstack/react-table'
import { Abbr } from '@repo/ui/components/abbr'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { initials } from '@repo/ui/lib/utils'
export type { Order }
import {
DataTableColumnCpfCnpj,
DataTableColumnHeaderSelect,
DataTableColumnSelect
} from '@repo/ui/components/data-table'
import { columns as columns_, type Order } from '@repo/ui/routes/orders/columns'
export const columns: ColumnDef<Order>[] = [
{
id: 'select',
header: DataTableColumnHeaderSelect,
cell: DataTableColumnSelect
},
{
header: 'Comprador',
cell: ({ row }) => {
@@ -36,20 +42,11 @@ export const columns: ColumnDef<Order>[] = [
}
},
{
accessorKey: 'cnpj_cpf',
header: 'CNPJ/CPF',
cell: ({ row }) => {
const { cpf, cnpj } = row.original
if (cpf) {
return <>{formatCPF(cpf)}</>
}
if (cnpj) {
return <>{formatCNPJ(cnpj)}</>
}
return <></>
}
// @ts-ignore
accessorFn: ({ cpf, cnpj }) => cpf ?? cnpj,
cell: DataTableColumnCpfCnpj
},
...columns_
]

51
apps/insights.saladeaula.digital/app/routes/_app.users._index/columns.tsx
View File

@@ -1,9 +1,14 @@
'use client'
import { formatCPF } from '@brazilian-utils/brazilian-utils'
import { type ColumnDef } from '@tanstack/react-table'
import { Abbr } from '@repo/ui/components/abbr'
import {
DataTableColumnDatetime,
DataTableColumnSelect,
DataTableColumnCpfCnpj,
DataTableColumnHeaderSelect
} from '@repo/ui/components/data-table'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { initials } from '@repo/ui/lib/utils'
@@ -16,15 +21,12 @@ export type User = {
cpf?: string
}
const formatted = new Intl.DateTimeFormat('pt-BR', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
export const columns: ColumnDef<User>[] = [
{
id: 'select',
header: DataTableColumnHeaderSelect,
cell: DataTableColumnSelect
},
{
header: 'Usuário',
cell: ({ row }) => {
@@ -49,37 +51,18 @@ export const columns: ColumnDef<User>[] = [
}
},
{
accessorKey: 'cpf',
header: 'CPF',
cell: ({ row }) => {
const { cpf } = row.original
if (cpf) {
return <>{formatCPF(cpf)}</>
}
return <></>
}
cell: DataTableColumnCpfCnpj
},
{
accessorKey: 'lastLogin',
header: 'Último accesso',
cell: ({ row }) => {
// Post-migration: rename `lastLogin` to `last_login`
if (row.original?.lastLogin) {
const lastLogin = new Date(row.original.lastLogin)
return formatted.format(lastLogin)
}
return <></>
}
cell: DataTableColumnDatetime
},
{
accessorKey: 'createDate',
header: 'Cadastrado em',
meta: {
className: 'w-1/12'
},
cell: ({ row }) => {
const created_at = new Date(row.original.createDate)
return formatted.format(created_at)
}
cell: DataTableColumnDatetime
}
]

8
packages/ui/src/components/data-table/column-cpfcnpj.tsx
View File

@@ -12,14 +12,6 @@ interface DataTableColumnDatetimeProps<TData, TValue>
column: Column<TData, TValue>
}
const formatted = new Intl.DateTimeFormat('pt-BR', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
export function DataTableColumnCpfCnpj<TData, TValue>({
row,
column

6
packages/ui/src/components/data-table/column-header.tsx → packages/ui/src/components/data-table/column-header-sort.tsx
View File

@@ -8,15 +8,15 @@ import {
import { Button } from '@repo/ui/components/ui/button'
import { cn } from '@repo/ui/lib/utils'
interface DataTableColumnHeaderProps<TData, TValue>
interface DataTableColumnHeaderSortProps<TData, TValue>
extends React.HTMLAttributes<HTMLDivElement> {
column: Column<TData, TValue>
}
export function DataTableColumnHeader<TData, TValue>({
export function DataTableColumnHeaderSort<TData, TValue>({
column,
className
}: DataTableColumnHeaderProps<TData, TValue>) {
}: DataTableColumnHeaderSortProps<TData, TValue>) {
// @ts-ignore
const title = column.columnDef?.meta?.title ?? column.id

43
packages/ui/src/components/data-table/column-select.tsx Normal file
View File

@@ -0,0 +1,43 @@
import type { Table, Row } from '@tanstack/react-table'
import { Checkbox } from '../ui/checkbox'
interface DataTableColumnHeaderSelectProps<TData>
extends React.HTMLAttributes<HTMLDivElement> {
table: Table<TData>
}
export function DataTableColumnHeaderSelect<TData>({
table
}: DataTableColumnHeaderSelectProps<TData>) {
return (
<Checkbox
checked={
table.getIsAllPageRowsSelected() ||
(table.getIsSomePageRowsSelected() && 'indeterminate')
}
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
className="cursor-pointer"
aria-label="Selecionar tudo"
/>
)
}
interface DataTableColumnSelectProps<TData>
extends React.HTMLAttributes<HTMLDivElement> {
row: Row<TData>
}
export function DataTableColumnSelect<TData>({
row
}: DataTableColumnSelectProps<TData>) {
return (
<Checkbox
checked={row.getIsSelected()}
disabled={!row.getCanSelect()}
onCheckedChange={(value) => row.toggleSelected(!!value)}
className="cursor-pointer"
aria-label="Selecionar linha"
/>
)
}

6
packages/ui/src/components/data-table/index.ts
View File

@@ -1,4 +1,8 @@
export { DataTableColumnHeader } from './column-header'
export { DataTableColumnHeaderSort } from './column-header-sort'
export {
DataTableColumnHeaderSelect,
DataTableColumnSelect
} from './column-select'
export { DataTableColumnDatetime } from './column-datetime'
export { DataTableColumnCpfCnpj } from './column-cpfcnpj'
export { DataTableColumnCurrency } from './column-currency'

2
packages/ui/src/components/data-table/view-options.tsx
View File

@@ -15,7 +15,7 @@ import { useDataTable } from './data-table'
export function DataTableViewOptions<TData>({
className
}: {
className: string
className?: string
}) {
const { table } = useDataTable()

127
packages/ui/src/routes/enrollments/columns.tsx Normal file
View File

@@ -0,0 +1,127 @@
'use client'
import type { ColumnDef } from '@tanstack/react-table'
import { HelpCircleIcon } from 'lucide-react'
import { Badge } from '@repo/ui/components/ui/badge'
import { Abbr } from '@repo/ui/components/abbr'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { Progress } from '@repo/ui/components/ui/progress'
import {
DataTableColumnDatetime,
DataTableColumnHeaderSort
} from '@repo/ui/components/data-table'
import { cn, initials } from '@repo/ui/lib/utils'
import { labels, statuses, type Enrollment } from './data'
export type { Enrollment }
export const columns: ColumnDef<Enrollment>[] = [
{
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',
meta: { title: 'Cadastrado em' },
enableSorting: true,
enableHiding: true,
header: DataTableColumnHeaderSort,
cell: DataTableColumnDatetime
},
{
accessorKey: 'started_at',
meta: { title: 'Iniciado em' },
enableSorting: true,
enableHiding: true,
header: DataTableColumnHeaderSort,
cell: DataTableColumnDatetime
},
{
accessorKey: 'completed_at',
meta: { title: 'Concluído em' },
enableSorting: true,
enableHiding: true,
header: DataTableColumnHeaderSort,
cell: DataTableColumnDatetime
},
{
accessorKey: 'failed_at',
meta: { title: 'Reprovado em' },
enableSorting: true,
enableHiding: true,
header: DataTableColumnHeaderSort,
cell: DataTableColumnDatetime
},
{
accessorKey: 'canceled_at',
meta: { title: 'Cancelado em' },
enableSorting: true,
enableHiding: true,
header: DataTableColumnHeaderSort,
cell: DataTableColumnDatetime
}
]

16
packages/ui/src/routes/enrollments/data.tsx
View File

@@ -7,6 +7,22 @@ import {
type LucideIcon
} from 'lucide-react'
// 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
}
export const statuses: Record<
string,
{ icon: LucideIcon; color?: string; label: string }

42
packages/ui/src/routes/orders/columns.tsx
View File

@@ -3,7 +3,7 @@
import {
DataTableColumnDatetime,
DataTableColumnCurrency,
DataTableColumnHeader
DataTableColumnHeaderSort
} from '@repo/ui/components/data-table'
import { type ColumnDef } from '@tanstack/react-table'
import { HelpCircleIcon } from 'lucide-react'
@@ -11,27 +11,17 @@ import { HelpCircleIcon } from 'lucide-react'
import { cn } from '@repo/ui/lib/utils'
import { Badge } from '@repo/ui/components/ui/badge'
import { labels, methods, statuses } from './data'
import { labels, methods, statuses, type Order } from './data'
// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Order = {
id: string
total: number
status: 'PENDING' | 'PAID' | 'DECLINED' | 'EXPIRED' | 'REFUNDED' | 'CANCELED'
payment_method: 'PIX' | 'CREDIT_CARD' | 'MANUAL' | 'BANK_SLIP'
name: string
}
export type { Order }
export const columns: ColumnDef<Order>[] = [
{
accessorKey: 'payment_method',
header: 'Forma de pag.',
cell: ({ row }) => {
const s = row.getValue('payment_method') as string
const paymentMethod = methods[s] ?? s
return <>{paymentMethod}</>
const paymentMethod = row.getValue('payment_method') as string
return <>{methods[paymentMethod] ?? paymentMethod}</>
}
},
{
@@ -53,35 +43,27 @@ export const columns: ColumnDef<Order>[] = [
{
accessorKey: 'total',
header: 'Valor total',
cell: ({ row, column }) => (
<DataTableColumnCurrency row={row} column={column} />
)
cell: DataTableColumnCurrency
},
{
accessorKey: 'create_date',
enableSorting: true,
meta: { title: 'Comprado em' },
header: ({ column }) => <DataTableColumnHeader column={column} />,
cell: ({ row, column }) => (
<DataTableColumnDatetime row={row} column={column} />
)
header: DataTableColumnHeaderSort,
cell: DataTableColumnDatetime
},
{
accessorKey: 'due_date',
enableSorting: true,
meta: { title: 'Vencimento em' },
header: ({ column }) => <DataTableColumnHeader column={column} />,
cell: ({ row, column }) => (
<DataTableColumnDatetime row={row} column={column} />
)
header: DataTableColumnHeaderSort,
cell: DataTableColumnDatetime
},
{
accessorKey: 'payment_date',
enableSorting: true,
meta: { title: 'Pago em' },
header: ({ column }) => <DataTableColumnHeader column={column} />,
cell: ({ row, column }) => (
<DataTableColumnDatetime row={row} column={column} />
)
header: DataTableColumnHeaderSort,
cell: DataTableColumnDatetime
}
]

35
packages/ui/src/routes/orders/data.tsx
View File

@@ -8,6 +8,17 @@ import {
type LucideIcon
} from 'lucide-react'
// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Order = {
id: string
total: number
status: 'PENDING' | 'PAID' | 'DECLINED' | 'EXPIRED' | 'REFUNDED' | 'CANCELED'
payment_method: 'PIX' | 'CREDIT_CARD' | 'BANK_SLIP' | 'MANUAL'
name: string
email: string
}
export const statuses: Record<
string,
{ icon: LucideIcon; color?: string; label: string }
@@ -22,25 +33,25 @@ export const statuses: Record<
color: 'text-green-400 [&_svg]:text-green-500',
label: 'Pago'
},
REFUNDED: {
icon: RotateCcwIcon,
color: 'text-orange-400 [&_svg]:text-orange-500',
label: 'Estornado'
DECLINED: {
icon: BanIcon,
color: 'text-red-400 [&_svg]:text-red-500',
label: 'Negado'
},
EXPIRED: {
icon: ClockAlertIcon,
color: 'text-orange-400 [&_svg]:text-orange-500',
label: 'Expirado'
},
REFUNDED: {
icon: RotateCcwIcon,
color: 'text-orange-400 [&_svg]:text-orange-500',
label: 'Estornado'
},
CANCELED: {
icon: CircleXIcon,
color: 'text-red-400 [&_svg]:text-red-500',
label: 'Cancelado'
},
DECLINED: {
icon: BanIcon,
color: 'text-red-400 [&_svg]:text-red-500',
label: 'Negado'
}
}
@@ -54,8 +65,8 @@ export const labels: Record<string, string> = {
}
export const methods: Record<string, string> = {
BANK_SLIP: 'Boleto bancário',
MANUAL: 'Depósito bancário',
PIX: 'Pix',
CREDIT_CARD: 'Cartão de crédito',
PIX: 'Pix'
BANK_SLIP: 'Boleto bancário',
MANUAL: 'Depósito bancário'
}

8
packages/ui/src/routes/orgs/data.tsx Normal file
View File

@@ -0,0 +1,8 @@
// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Org = {
id: string
name: string
email: string
cnpj?: string
}

60
packages/ui/src/routes/users/columns.tsx Normal file
View File

@@ -0,0 +1,60 @@
'use client'
import { type ColumnDef } from '@tanstack/react-table'
import { Abbr } from '@repo/ui/components/abbr'
import {
DataTableColumnDatetime,
DataTableColumnHeaderSort,
DataTableColumnCpfCnpj
} from '@repo/ui/components/data-table'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { initials } from '@repo/ui/lib/utils'
import type { User } from '@repo/ui/routes/users/data'
export type { User }
export const columns: ColumnDef<User>[] = [
{
header: 'Colaborador',
cell: ({ row }) => {
const { name, email } = row.original
return (
<div className="flex gap-2.5 items-center">
<Avatar className="size-10 hidden lg:block">
<AvatarFallback>{initials(name)}</AvatarFallback>
</Avatar>
<ul>
<li className="font-bold">
<Abbr>{name}</Abbr>
</li>
<li className="text-muted-foreground text-sm">
<Abbr>{email}</Abbr>
</li>
</ul>
</div>
)
}
},
{
accessorKey: 'cpf',
header: 'CPF',
cell: DataTableColumnCpfCnpj
},
{
accessorKey: 'createDate',
enableSorting: true,
meta: { title: 'Cadastrado em' },
header: DataTableColumnHeaderSort,
cell: DataTableColumnDatetime
},
{
accessorKey: 'lastLogin',
enableSorting: true,
meta: { title: 'Último acesso' },
header: DataTableColumnHeaderSort,
cell: DataTableColumnDatetime
}
]

18
packages/ui/src/routes/users/data.tsx Normal file
View File

@@ -0,0 +1,18 @@
// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type User = {
id: string
name: string
email: string
cpf?: string
cnpj?: string
}
export const headers = {
id: 'ID',
name: 'Nome',
email: 'Email',
cpf: 'CPF',
createDate: 'Cadastrado em',
lastLogin: 'Último acesso'
}