share route itens

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

@@ -42,8 +42,7 @@ import {
 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 './data'
+import { labels, statuses } from '@repo/ui/routes/enrollments/data'
 
 // This type is used to define the shape of our data.
 // You can use a Zod schema here if you want.
@@ -61,14 +60,6 @@ export type Enrollment = {
   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 const columns: ColumnDef<Enrollment>[] = [
   {
     id: 'select',

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

@@ -1,69 +0,0 @@
-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'
-}

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

@@ -3,7 +3,7 @@ import type { Route } from './+types/route'
 import { CalendarIcon, PlusCircleIcon, PlusIcon } from 'lucide-react'
 import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
 import { Suspense, useState } from 'react'
-import { Await, Link, Outlet, useParams, useSearchParams } from 'react-router'
+import { Await, Link, useParams, useSearchParams } from 'react-router'
 
 import { DataTable, DataTableViewOptions } from '@repo/ui/components/data-table'
 import { FacetedFilter } from '@repo/ui/components/faceted-filter'
@@ -12,12 +12,11 @@ import { SearchForm } from '@repo/ui/components/search-form'
 import { Skeleton } from '@repo/ui/components/skeleton'
 import { Button } from '@repo/ui/components/ui/button'
 import { ExportMenu } from '@repo/ui/components/export-menu'
-
 import { Kbd } from '@repo/ui/components/ui/kbd'
 import { createSearch } from '@repo/util/meili'
 
+import { headers, sortings, statuses } from '@repo/ui/routes/enrollments/data'
 import { columns, type Enrollment } from './columns'
-import { headers, sortings, statuses } from './data'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Matrículas' }]
@@ -45,16 +44,18 @@ export async function loader({ params, context, request }: Route.LoaderArgs) {
     builder = builder.where(field, 'between', [from_, to])
   }
 
+  const enrollments = createSearch({
+    index: 'betaeducacao-prod-enrollments',
+    filter: builder.build(),
+    sort: [sort],
+    query,
+    page,
+    hitsPerPage,
+    env: context.cloudflare.env
+  })
+
   return {
-    data: createSearch({
-      index: 'betaeducacao-prod-enrollments',
-      filter: builder.build(),
-      sort: [sort],
-      query,
-      page,
-      hitsPerPage,
-      env: context.cloudflare.env
-    })
+    data: enrollments
   }
 }
 
@@ -211,8 +212,6 @@ export default function Route({ loaderData: { data } }) {
           </DataTable>
         )}
       </Await>
-
-      <Outlet />
     </Suspense>
   )
 }

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

@@ -1,63 +0,0 @@
-'use client'
-
-import {
-  DataTableColumnDatetime,
-  DataTableColumnCurrency,
-  DataTableColumnHeader
-} from '@repo/ui/components/data-table'
-import { type ColumnDef } from '@tanstack/react-table'
-
-// 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' | 'processing' | 'success' | 'failed'
-  payment_method: 'PIX' | 'CREDIT_CARD' | 'MANUAL' | 'failed'
-  name: string
-}
-
-export const columns: ColumnDef<Order>[] = [
-  {
-    accessorKey: 'payment_method',
-    header: 'Forma de pag.'
-  },
-  {
-    accessorKey: 'status',
-    header: 'Status'
-  },
-  {
-    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} />
-    )
-  }
-]

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

@@ -8,7 +8,7 @@ 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 './columns'
+import { columns, type Order } from '@repo/ui/routes/orders/columns'
 
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Histórico de compras' }]

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

@@ -1,6 +1,5 @@
 'use client'
 
-import { formatCPF } from '@brazilian-utils/brazilian-utils'
 import { type ColumnDef } from '@tanstack/react-table'
 import { useToggle } from 'ahooks'
 import {

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

@@ -73,7 +73,7 @@ export default function Route({ loaderData }: Route.ComponentProps) {
             className="bg-background/15 backdrop-blur-sm
                        px-4 py-2 lg:py-4 sticky top-0 z-5"
           >
-            <div className="container mx-auto flex items-center">
+            <div className="container mx-auto flex items-center max-w-7xl">
               <SidebarTrigger className="md:hidden" />
               <ThemedImage className="max-md:hidden" />
 
@@ -85,7 +85,7 @@ export default function Route({ loaderData }: Route.ComponentProps) {
           </header>
 
           <div className="p-4">
-            <div className="container mx-auto relative">
+            <div className="container mx-auto relative max-w-7xl">
               <Outlet />
               <Toaster
                 position="top-center"