@hed-hog/lms 0.0.349 → 0.0.351

package/hedhog/frontend/app/bitcodes/page.tsx.ejs

@@ -0,0 +1,1016 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { EntityPicker } from '@/components/ui/entity-picker';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { KpiCardsGrid, type KpiCardItem } from '@/components/ui/kpi-cards-grid';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  ArrowDownLeft,
+  ArrowUpRight,
+  Coins,
+  Loader2,
+  MoreHorizontal,
+  Pencil,
+  Plus,
+  Trash2,
+  Wallet,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import * as z from 'zod';
+import {
+  loadPersonOptions,
+  type PersonPickerOption,
+} from '../enterprise/_components/enterprise-person-picker';
+
+type TransactionType = 'credit' | 'debit';
+
+type BitcodeWalletSummary = {
+  walletCount: number;
+  totalBalance: number;
+  transactionCount: number;
+  totalCredits: number;
+  totalDebits: number;
+};
+
+type BitcodeWallet = {
+  id: number;
+  personId: number;
+  personName: string;
+  currentBalance: number;
+  transactionCount: number;
+  totalCredits: number;
+  totalDebits: number;
+  createdAt?: string | null;
+  updatedAt?: string | null;
+};
+
+type BitcodeWalletTransaction = {
+  id: number;
+  walletId: number;
+  type: TransactionType;
+  amount: number;
+  description?: string | null;
+  createdAt?: string | null;
+  updatedAt?: string | null;
+};
+
+type BitcodeWalletDetail = BitcodeWallet & {
+  transactions: BitcodeWalletTransaction[];
+};
+
+type BitcodeWalletPaginatedResult = {
+  data: BitcodeWallet[];
+  total: number;
+  page: number;
+  pageSize: number;
+  lastPage: number;
+  summary: BitcodeWalletSummary;
+};
+
+const transactionTypeValues: TransactionType[] = ['credit', 'debit'];
+
+const walletSchema = (t: ReturnType<typeof useTranslations>) =>
+  z.object({
+    personId: z.coerce
+      .number()
+      .int()
+      .min(1, t('form.validation.personRequired')),
+  });
+
+const transactionSchema = (t: ReturnType<typeof useTranslations>) =>
+  z.object({
+    type: z.enum(transactionTypeValues as any),
+    amount: z.coerce
+      .number()
+      .int(t('transactions.form.validation.integer'))
+      .min(1, t('transactions.form.validation.positive')),
+    description: z
+      .string()
+      .max(2000, t('transactions.form.validation.max2000'))
+      .optional(),
+  });
+
+type WalletFormValues = z.infer<ReturnType<typeof walletSchema>>;
+type TransactionFormValues = z.infer<ReturnType<typeof transactionSchema>>;
+
+function formatBitcodes(value: number) {
+  return new Intl.NumberFormat('pt-BR').format(Number(value ?? 0));
+}
+
+function formatDateTime(value?: string | null) {
+  if (!value) return '—';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '—';
+  return new Intl.DateTimeFormat('pt-BR', {
+    dateStyle: 'short',
+    timeStyle: 'short',
+  }).format(date);
+}
+
+function getErrorMessage(error: unknown, fallback: string) {
+  if (
+    typeof error === 'object' &&
+    error !== null &&
+    'response' in error &&
+    typeof (error as { response?: unknown }).response === 'object' &&
+    (error as { response?: { data?: unknown } }).response !== null
+  ) {
+    const response = (
+      error as {
+        response?: { data?: { message?: unknown } };
+      }
+    ).response;
+    const message = response?.data?.message;
+    if (typeof message === 'string' && message.trim()) {
+      return message;
+    }
+  }
+
+  return fallback;
+}
+
+function TransactionTypeBadge({
+  type,
+  t,
+}: {
+  type: TransactionType;
+  t: ReturnType<typeof useTranslations>;
+}) {
+  const isCredit = type === 'credit';
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        isCredit
+          ? 'border-emerald-200 bg-emerald-50 text-emerald-700'
+          : 'border-rose-200 bg-rose-50 text-rose-700'
+      )}
+    >
+      {isCredit ? (
+        <ArrowUpRight className="mr-1 size-3.5" />
+      ) : (
+        <ArrowDownLeft className="mr-1 size-3.5" />
+      )}
+      {t(`transactions.types.${type}`)}
+    </Badge>
+  );
+}
+
+function WalletFormSheet({
+  open,
+  onOpenChange,
+  walletToEdit,
+  onSaved,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  walletToEdit: BitcodeWallet | null;
+  onSaved: () => void;
+}) {
+  const { request } = useApp();
+  const t = useTranslations('lms.BitcodesPage');
+  const walletId = walletToEdit?.id ?? null;
+
+  const [isSavingWallet, setIsSavingWallet] = useState(false);
+  const [isSavingTransaction, setIsSavingTransaction] = useState(false);
+
+  const walletForm = useForm<WalletFormValues>({
+    resolver: zodResolver(walletSchema(t)),
+    defaultValues: {
+      personId: walletToEdit?.personId ?? 0,
+    },
+  });
+
+  const transactionForm = useForm<TransactionFormValues>({
+    resolver: zodResolver(transactionSchema(t)),
+    defaultValues: {
+      type: 'credit',
+      amount: 1,
+      description: '',
+    },
+  });
+
+  const {
+    data: walletDetail,
+    isLoading: isLoadingWalletDetail,
+    refetch: refetchWalletDetail,
+  } = useQuery<BitcodeWalletDetail | null>({
+    queryKey: ['lms-bitcode-wallet-detail', walletId, open],
+    enabled: open && Boolean(walletId),
+    queryFn: async () => {
+      if (!walletId) return null;
+      const response = await request<BitcodeWalletDetail>({
+        url: `/lms/bitcode-wallets/${walletId}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  useEffect(() => {
+    if (!open) return;
+
+    walletForm.reset({
+      personId: walletToEdit?.personId ?? 0,
+    });
+  }, [open, walletForm, walletToEdit]);
+
+  useEffect(() => {
+    if (!open) return;
+    if (!walletDetail) {
+      transactionForm.reset({
+        type: 'credit',
+        amount: 1,
+        description: '',
+      });
+      return;
+    }
+
+    walletForm.reset({
+      personId: walletDetail.personId,
+    });
+  }, [open, walletDetail, transactionForm, walletForm]);
+
+  const handleSaveWallet = async (values: WalletFormValues) => {
+    try {
+      setIsSavingWallet(true);
+
+      if (walletToEdit) {
+        await request({
+          url: `/lms/bitcode-wallets/${walletToEdit.id}`,
+          method: 'PATCH',
+          data: values,
+        });
+        toast.success(t('messages.walletUpdated'));
+      } else {
+        await request({
+          url: '/lms/bitcode-wallets',
+          method: 'POST',
+          data: values,
+        });
+        toast.success(t('messages.walletCreated'));
+      }
+
+      await onSaved();
+      onOpenChange(false);
+    } catch (error: unknown) {
+      toast.error(getErrorMessage(error, t('messages.walletSaveError')));
+    } finally {
+      setIsSavingWallet(false);
+    }
+  };
+
+  const resetTransactionForm = () => {
+    transactionForm.reset({
+      type: 'credit',
+      amount: 1,
+      description: '',
+    });
+  };
+
+  const handleSaveTransaction = async (values: TransactionFormValues) => {
+    if (!walletId) return;
+
+    try {
+      setIsSavingTransaction(true);
+
+      const payload = {
+        type: values.type,
+        amount: values.amount,
+        description: values.description?.trim() || null,
+      };
+
+      await request({
+        url: `/lms/bitcode-wallets/${walletId}/transactions`,
+        method: 'POST',
+        data: payload,
+      });
+      toast.success(t('messages.transactionCreated'));
+
+      resetTransactionForm();
+      await refetchWalletDetail();
+      await onSaved();
+    } catch (error: unknown) {
+      toast.error(getErrorMessage(error, t('messages.transactionSaveError')));
+    } finally {
+      setIsSavingTransaction(false);
+    }
+  };
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <ResizableSheetContent
+          sheetId="lms-bitcodes-wallet-sheet"
+          defaultWidth={896}
+          minWidth={560}
+          maxWidth={1200}
+          className="w-full overflow-y-auto"
+        >
+          <SheetHeader>
+            <SheetTitle>
+              {walletToEdit ? t('sheet.editTitle') : t('sheet.createTitle')}
+            </SheetTitle>
+            <SheetDescription>
+              {walletToEdit
+                ? t('sheet.editDescription')
+                : t('sheet.createDescription')}
+            </SheetDescription>
+          </SheetHeader>
+
+          <div className="space-y-6 px-4 py-4">
+            <Form {...walletForm}>
+              <form
+                onSubmit={walletForm.handleSubmit(handleSaveWallet)}
+                className="space-y-4 rounded-xl border p-4"
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <div>
+                    <h3 className="font-semibold">{t('form.title')}</h3>
+                    <p className="text-sm text-muted-foreground">
+                      {t('form.description')}
+                    </p>
+                  </div>
+                  {walletDetail ? (
+                    <Badge variant="secondary">
+                      {t('form.currentBalance', {
+                        value: formatBitcodes(walletDetail.currentBalance),
+                      })}
+                    </Badge>
+                  ) : null}
+                </div>
+
+                <FormField
+                  control={walletForm.control}
+                  name="personId"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('form.person')}</FormLabel>
+                      <FormControl>
+                        <EntityPicker<PersonPickerOption>
+                          value={field.value || null}
+                          valueType="number"
+                          placeholder={t('form.personPlaceholder')}
+                          searchPlaceholder={t('form.personSearchPlaceholder')}
+                          entityLabel={t('form.personEntityLabel')}
+                          noResultsLabel={t('form.personEmpty')}
+                          clearable
+                          initialSelectedLabel={walletToEdit?.personName ?? ''}
+                          showCreateButton={false}
+                          loadOptions={(args) =>
+                            loadPersonOptions(request, args)
+                          }
+                          getOptionLabel={(option) => option.name}
+                          getOptionDescription={(option) =>
+                            option.email ?? undefined
+                          }
+                          onChange={(value) =>
+                            field.onChange(Number(value ?? 0))
+                          }
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <div className="flex justify-end gap-2">
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => onOpenChange(false)}
+                    disabled={isSavingWallet}
+                  >
+                    {t('actions.cancel')}
+                  </Button>
+                  <Button type="submit" disabled={isSavingWallet}>
+                    {isSavingWallet
+                      ? t('actions.saving')
+                      : t('actions.saveWallet')}
+                  </Button>
+                </div>
+              </form>
+            </Form>
+
+            {walletToEdit ? (
+              isLoadingWalletDetail ? (
+                <div className="space-y-3">
+                  <Skeleton className="h-28 w-full" />
+                  <Skeleton className="h-52 w-full" />
+                </div>
+              ) : walletDetail ? (
+                <div className="space-y-4">
+                  <KpiCardsGrid
+                    columns={3}
+                    items={[
+                      {
+                        key: 'balance',
+                        title: t('transactions.kpis.balance'),
+                        value: formatBitcodes(walletDetail.currentBalance),
+                        description: t('transactions.kpis.balanceDescription'),
+                        icon: Coins,
+                      },
+                      {
+                        key: 'credits',
+                        title: t('transactions.kpis.credits'),
+                        value: formatBitcodes(walletDetail.totalCredits),
+                        description: t('transactions.kpis.creditsDescription'),
+                        icon: ArrowUpRight,
+                      },
+                      {
+                        key: 'debits',
+                        title: t('transactions.kpis.debits'),
+                        value: formatBitcodes(walletDetail.totalDebits),
+                        description: t('transactions.kpis.debitsDescription'),
+                        icon: ArrowDownLeft,
+                      },
+                    ]}
+                  />
+
+                  <Form {...transactionForm}>
+                    <form
+                      onSubmit={transactionForm.handleSubmit(
+                        handleSaveTransaction
+                      )}
+                      className="space-y-4 rounded-xl border p-4"
+                    >
+                      <div className="flex items-center justify-between gap-3">
+                        <div>
+                          <h3 className="font-semibold">
+                            {t('transactions.form.createTitle')}
+                          </h3>
+                          <p className="text-sm text-muted-foreground">
+                            {t('transactions.form.description')}
+                          </p>
+                        </div>
+                      </div>
+
+                      <div className="grid gap-4 md:grid-cols-[180px_160px_1fr]">
+                        <FormField
+                          control={transactionForm.control}
+                          name="type"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                {t('transactions.form.type')}
+                              </FormLabel>
+                              <Select
+                                onValueChange={field.onChange}
+                                value={field.value}
+                              >
+                                <FormControl>
+                                  <SelectTrigger className="w-full">
+                                    <SelectValue
+                                      placeholder={t(
+                                        'transactions.form.typePlaceholder'
+                                      )}
+                                    />
+                                  </SelectTrigger>
+                                </FormControl>
+                                <SelectContent>
+                                  {transactionTypeValues.map((type) => (
+                                    <SelectItem key={type} value={type}>
+                                      {t(`transactions.types.${type}`)}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={transactionForm.control}
+                          name="amount"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                {t('transactions.form.amount')}
+                              </FormLabel>
+                              <FormControl>
+                                <Input
+                                  type="number"
+                                  min="1"
+                                  step="1"
+                                  {...field}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+
+                        <FormField
+                          control={transactionForm.control}
+                          name="description"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel>
+                                {t('transactions.form.descriptionLabel')}
+                              </FormLabel>
+                              <FormControl>
+                                <Textarea
+                                  rows={3}
+                                  placeholder={t(
+                                    'transactions.form.descriptionPlaceholder'
+                                  )}
+                                  {...field}
+                                  value={field.value ?? ''}
+                                />
+                              </FormControl>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                      </div>
+
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          onClick={resetTransactionForm}
+                          disabled={isSavingTransaction}
+                        >
+                          {t('actions.clear')}
+                        </Button>
+                        <Button type="submit" disabled={isSavingTransaction}>
+                          {isSavingTransaction ? (
+                            <>
+                              <Loader2 className="mr-2 size-4 animate-spin" />
+                              {t('actions.saving')}
+                            </>
+                          ) : (
+                            t('transactions.form.createAction')
+                          )}
+                        </Button>
+                      </div>
+                    </form>
+                  </Form>
+
+                  <div className="rounded-xl border">
+                    <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
+                      <div>
+                        <h3 className="font-semibold">
+                          {t('transactions.table.title')}
+                        </h3>
+                        <p className="text-sm text-muted-foreground">
+                          {t('transactions.table.description', {
+                            count: walletDetail.transactions.length,
+                          })}
+                        </p>
+                      </div>
+                    </div>
+
+                    {walletDetail.transactions.length === 0 ? (
+                      <div className="px-4 py-10 text-center text-sm text-muted-foreground">
+                        {t('transactions.empty')}
+                      </div>
+                    ) : (
+                      <div className="overflow-x-auto">
+                        <Table>
+                          <TableHeader>
+                            <TableRow>
+                              <TableHead>
+                                {t('transactions.table.type')}
+                              </TableHead>
+                              <TableHead>
+                                {t('transactions.table.amount')}
+                              </TableHead>
+                              <TableHead>
+                                {t('transactions.table.descriptionLabel')}
+                              </TableHead>
+                              <TableHead>
+                                {t('transactions.table.createdAt')}
+                              </TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {walletDetail.transactions.map((transaction) => (
+                              <TableRow key={transaction.id}>
+                                <TableCell>
+                                  <TransactionTypeBadge
+                                    type={transaction.type}
+                                    t={t}
+                                  />
+                                </TableCell>
+                                <TableCell
+                                  className={cn(
+                                    'font-medium',
+                                    transaction.type === 'credit'
+                                      ? 'text-emerald-600'
+                                      : 'text-rose-600'
+                                  )}
+                                >
+                                  {transaction.type === 'credit' ? '+' : '-'}
+                                  {formatBitcodes(transaction.amount)}
+                                </TableCell>
+                                <TableCell>
+                                  {transaction.description?.trim() || '—'}
+                                </TableCell>
+                                <TableCell>
+                                  {formatDateTime(transaction.createdAt)}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ) : null
+            ) : null}
+          </div>
+        </ResizableSheetContent>
+      </Sheet>
+    </>
+  );
+}
+
+export default function BitcodesPage() {
+  const { request } = useApp();
+  const t = useTranslations('lms.BitcodesPage');
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:lms-bitcodes:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
+  const [searchInput, setSearchInput] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [walletToEdit, setWalletToEdit] = useState<BitcodeWallet | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [walletToDelete, setWalletToDelete] = useState<BitcodeWallet | null>(
+    null
+  );
+  const [isDeletingWallet, setIsDeletingWallet] = useState(false);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setDebouncedSearch(searchInput.trim());
+      setPage(1);
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [searchInput]);
+
+  const {
+    data: paginate = {
+      data: [],
+      total: 0,
+      page: 1,
+      pageSize,
+      lastPage: 1,
+      summary: {
+        walletCount: 0,
+        totalBalance: 0,
+        transactionCount: 0,
+        totalCredits: 0,
+        totalDebits: 0,
+      },
+    },
+    isLoading,
+    refetch,
+  } = useQuery<BitcodeWalletPaginatedResult>({
+    queryKey: ['lms-bitcode-wallets', page, pageSize, debouncedSearch],
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      });
+      if (debouncedSearch) params.set('search', debouncedSearch);
+
+      const response = await request<BitcodeWalletPaginatedResult>({
+        url: `/lms/bitcode-wallets?${params.toString()}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+    placeholderData: (prev) =>
+      prev ?? {
+        data: [],
+        total: 0,
+        page: 1,
+        pageSize,
+        lastPage: 1,
+        summary: {
+          walletCount: 0,
+          totalBalance: 0,
+          transactionCount: 0,
+          totalCredits: 0,
+          totalDebits: 0,
+        },
+      },
+  });
+
+  const totalPages = Math.max(
+    1,
+    paginate.lastPage || Math.ceil((paginate.total || 0) / pageSize) || 1
+  );
+
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages);
+  }, [page, totalPages]);
+
+  const kpiItems = useMemo<KpiCardItem[]>(
+    () => [
+      {
+        key: 'wallets',
+        title: t('kpis.wallets'),
+        value: formatBitcodes(paginate.summary.walletCount),
+        description: t('kpis.walletsDescription'),
+        icon: Wallet,
+      },
+      {
+        key: 'balance',
+        title: t('kpis.balance'),
+        value: formatBitcodes(paginate.summary.totalBalance),
+        description: t('kpis.balanceDescription'),
+        icon: Coins,
+      },
+      {
+        key: 'transactions',
+        title: t('kpis.transactions'),
+        value: formatBitcodes(paginate.summary.transactionCount),
+        description: t('kpis.transactionsDescription'),
+        icon: ArrowUpRight,
+      },
+      {
+        key: 'movement',
+        title: t('kpis.movement'),
+        value: `${formatBitcodes(paginate.summary.totalCredits)} / ${formatBitcodes(
+          paginate.summary.totalDebits
+        )}`,
+        description: t('kpis.movementDescription'),
+        icon: ArrowDownLeft,
+      },
+    ],
+    [paginate.summary, t]
+  );
+
+  const handleDeleteWallet = async () => {
+    if (!walletToDelete) return;
+
+    try {
+      setIsDeletingWallet(true);
+      await request({
+        url: `/lms/bitcode-wallets/${walletToDelete.id}`,
+        method: 'DELETE',
+      });
+      toast.success(t('messages.walletDeleted'));
+      setDeleteDialogOpen(false);
+      setWalletToDelete(null);
+      await refetch();
+    } catch (error: unknown) {
+      toast.error(getErrorMessage(error, t('messages.walletDeleteError')));
+    } finally {
+      setIsDeletingWallet(false);
+    }
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.lms'), href: '/lms' },
+          { label: t('breadcrumbs.current') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+        actions={[
+          {
+            label: t('actions.createWallet'),
+            onClick: () => {
+              setWalletToEdit(null);
+              setSheetOpen(true);
+            },
+            icon: <Plus className="h-4 w-4" />,
+          },
+        ]}
+      />
+
+      <KpiCardsGrid items={kpiItems} />
+
+      <SearchBar
+        searchQuery={searchInput}
+        onSearchChange={(value) => setSearchInput(value)}
+        onSearch={() => setPage(1)}
+        placeholder={t('filters.searchPlaceholder')}
+      />
+
+      {isLoading ? (
+        <div className="space-y-3 p-4">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <Skeleton key={index} className="h-16 w-full" />
+          ))}
+        </div>
+      ) : paginate.data.length === 0 ? (
+        <EmptyState
+          icon={<Wallet className="h-12 w-12" />}
+          title={t('empty.title')}
+          description={t('empty.description')}
+          actionLabel={t('actions.createWallet')}
+          actionIcon={<Plus className="mr-2 h-4 w-4" />}
+          onAction={() => {
+            setWalletToEdit(null);
+            setSheetOpen(true);
+          }}
+        />
+      ) : (
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.person')}</TableHead>
+                <TableHead>{t('table.balance')}</TableHead>
+                <TableHead>{t('table.credits')}</TableHead>
+                <TableHead>{t('table.debits')}</TableHead>
+                <TableHead>{t('table.transactions')}</TableHead>
+                <TableHead>{t('table.updatedAt')}</TableHead>
+                <TableHead className="w-10" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginate.data.map((wallet) => (
+                <TableRow
+                  key={wallet.id}
+                  className="cursor-pointer"
+                  onDoubleClick={() => {
+                    setWalletToEdit(wallet);
+                    setSheetOpen(true);
+                  }}
+                >
+                  <TableCell>
+                    <div className="min-w-0">
+                      <div className="truncate font-medium">
+                        {wallet.personName}
+                      </div>
+                      <div className="truncate text-xs text-muted-foreground">
+                        {t('table.personId', { id: wallet.personId })}
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell className="font-semibold">
+                    {formatBitcodes(wallet.currentBalance)}
+                  </TableCell>
+                  <TableCell className="text-emerald-600">
+                    +{formatBitcodes(wallet.totalCredits)}
+                  </TableCell>
+                  <TableCell className="text-rose-600">
+                    -{formatBitcodes(wallet.totalDebits)}
+                  </TableCell>
+                  <TableCell>
+                    {formatBitcodes(wallet.transactionCount)}
+                  </TableCell>
+                  <TableCell>{formatDateTime(wallet.updatedAt)}</TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon" className="h-8 w-8">
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setWalletToEdit(wallet);
+                            setSheetOpen(true);
+                          }}
+                        >
+                          <Pencil className="mr-2 h-4 w-4" />
+                          {t('actions.edit')}
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          className="text-red-600"
+                          onClick={() => {
+                            setWalletToDelete(wallet);
+                            setDeleteDialogOpen(true);
+                          }}
+                        >
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          {t('actions.delete')}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={paginate.total}
+        onPageChange={setPage}
+        onPageSizeChange={(nextPageSize) => {
+          setPageSize(nextPageSize);
+          setPage(1);
+        }}
+        pageSizeOptions={[6, 12, 24]}
+      />
+
+      <WalletFormSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        walletToEdit={walletToEdit}
+        onSaved={() => refetch()}
+      />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('deleteDialog.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteDialog.description', {
+                name: walletToDelete?.personName ?? '',
+              })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="flex justify-end gap-2">
+            <AlertDialogCancel disabled={isDeletingWallet}>
+              {t('actions.cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteWallet}
+              disabled={isDeletingWallet}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {isDeletingWallet ? t('actions.deleting') : t('actions.delete')}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+    </Page>
+  );
+}