share route itens

packages/ui/package.json

@@ -5,6 +5,7 @@
   "exports": {
     "./globals.css": "./src/globals.css",
     "./lib/*": "./src/lib/*.ts",
+    "./routes/*": "./src/routes/*.tsx",
     "./hooks/*": [
       "./src/hooks/*.ts",
       "./src/hooks/*.tsx"

packages/ui/src/routes/enrollments/data.tsx

@@ -0,0 +1,69 @@
+import {
+  CircleCheckIcon,
+  CircleIcon,
+  CircleOffIcon,
+  CircleXIcon,
+  TimerIcon,
+  type LucideIcon
+} from 'lucide-react'
+
+export const statuses: Record<
+  string,
+  { icon: LucideIcon; color?: string; label: string }
+> = {
+  PENDING: {
+    icon: CircleIcon,
+    label: 'Não iniciado'
+  },
+  IN_PROGRESS: {
+    icon: TimerIcon,
+    color: 'text-blue-400 [&_svg]:text-blue-500',
+    label: 'Em andamento'
+  },
+  COMPLETED: {
+    icon: CircleCheckIcon,
+    color: 'text-green-400 [&_svg]:text-background [&_svg]:fill-green-500',
+    label: 'Concluído'
+  },
+  FAILED: {
+    icon: CircleXIcon,
+    color: 'text-red-400 [&_svg]:text-red-500',
+    label: 'Reprovado'
+  },
+  CANCELED: {
+    icon: CircleOffIcon,
+    color: 'text-orange-400 [&_svg]:text-orange-500',
+    label: 'Cancelado'
+  }
+}
+
+export const labels: Record<string, string> = {
+  PENDING: 'Não iniciado',
+  IN_PROGRESS: 'Em andamento',
+  COMPLETED: 'Concluído',
+  FAILED: 'Reprovado',
+  CANCELED: 'Cancelado'
+}
+
+export const sortings: Record<string, string> = {
+  created_at: 'Cadastrado em',
+  started_at: 'Iniciado em',
+  completed_at: 'Concluído em',
+  failed_at: 'Reprovado em',
+  canceled_at: 'Cancelado em'
+}
+
+export 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'
+}

packages/ui/src/routes/orders/columns.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import {
+  DataTableColumnDatetime,
+  DataTableColumnCurrency,
+  DataTableColumnHeader
+} from '@repo/ui/components/data-table'
+import { type ColumnDef } from '@tanstack/react-table'
+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'
+
+// 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 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}</>
+    }
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    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: 'total',
+    header: 'Valor total',
+    cell: ({ row, column }) => (
+      <DataTableColumnCurrency row={row} column={column} />
+    )
+  },
+  {
+    accessorKey: 'create_date',
+    enableSorting: true,
+    meta: { title: 'Comprado em' },
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
+  },
+  {
+    accessorKey: 'due_date',
+    enableSorting: true,
+    meta: { title: 'Vencimento em' },
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
+  },
+  {
+    accessorKey: 'payment_date',
+    enableSorting: true,
+    meta: { title: 'Pago em' },
+    header: ({ column }) => <DataTableColumnHeader column={column} />,
+    cell: ({ row, column }) => (
+      <DataTableColumnDatetime row={row} column={column} />
+    )
+  }
+]

packages/ui/src/routes/orders/data.tsx

@@ -0,0 +1,61 @@
+import {
+  CheckCircleIcon,
+  ClockAlertIcon,
+  RotateCcwIcon,
+  CircleXIcon,
+  ClockIcon,
+  BanIcon,
+  type LucideIcon
+} from 'lucide-react'
+
+export const statuses: Record<
+  string,
+  { icon: LucideIcon; color?: string; label: string }
+> = {
+  PENDING: {
+    icon: ClockIcon,
+    label: 'Pendente',
+    color: 'text-blue-400 [&_svg]:text-blue-500'
+  },
+  PAID: {
+    icon: CheckCircleIcon,
+    color: 'text-green-400 [&_svg]:text-green-500',
+    label: 'Pago'
+  },
+  REFUNDED: {
+    icon: RotateCcwIcon,
+    color: 'text-orange-400 [&_svg]:text-orange-500',
+    label: 'Estornado'
+  },
+  EXPIRED: {
+    icon: ClockAlertIcon,
+    color: 'text-orange-400 [&_svg]:text-orange-500',
+    label: 'Expirado'
+  },
+  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'
+  }
+}
+
+export const labels: Record<string, string> = {
+  PENDING: 'Pendente',
+  PAID: 'Pago',
+  DECLINED: 'Negado',
+  EXPIRED: 'Expirado',
+  REFUNDED: 'Estornado',
+  CANCELED: 'Cancelado'
+}
+
+export const methods: Record<string, string> = {
+  BANK_SLIP: 'Boleto bancário',
+  MANUAL: 'Depósito bancário',
+  CREDIT_CARD: 'Cartão de crédito',
+  PIX: 'Pix'
+}