@hed-hog/finance 0.0.223 → 0.0.225

package/hedhog/frontend/app/accounts-payable/installments/[id]/page.tsx.ejs

@@ -0,0 +1,410 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { AuditTimeline } from '@/components/ui/audit-timeline';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Money } from '@/components/ui/money';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  ArrowLeft,
+  CheckCircle,
+  Download,
+  Edit,
+  FileText,
+  MoreHorizontal,
+  Undo,
+  XCircle,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { formatarData } from '../../../_lib/formatters';
+import { useFinanceData } from '../../../_lib/use-finance-data';
+
+export default function TituloDetalhePage() {
+  const t = useTranslations('finance.PayableInstallmentDetailPage');
+  const params = useParams<{ id: string }>();
+  const id = params?.id;
+  const { data } = useFinanceData();
+  const {
+    titulosPagar,
+    pessoas,
+    categorias,
+    centrosCusto,
+    contasBancarias,
+    logsAuditoria,
+    tags,
+  } = data;
+
+  const titulo = titulosPagar.find((t) => t.id === id);
+
+  if (!titulo) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title={t('notFound.title')}
+          description={t('notFound.description')}
+          breadcrumbs={[
+            {
+              label: t('notFound.breadcrumbPayables'),
+              href: '/finance/accounts-payable/installments',
+            },
+            {
+              label: t('notFound.breadcrumbInstallments'),
+              href: '/finance/accounts-payable/installments',
+            },
+          ]}
+        />
+      </div>
+    );
+  }
+
+  const getPessoaById = (personId?: string) =>
+    pessoas.find((p) => p.id === personId);
+  const getCategoriaById = (categoryId?: string) =>
+    categorias.find((c) => c.id === categoryId);
+  const getCentroCustoById = (costCenterId?: string) =>
+    centrosCusto.find((c) => c.id === costCenterId);
+  const getContaBancariaById = (bankId?: string) =>
+    contasBancarias.find((c) => c.id === bankId);
+
+  const fornecedor = getPessoaById(titulo.fornecedorId);
+  const categoria = getCategoriaById(titulo.categoriaId);
+  const centroCusto = getCentroCustoById(titulo.centroCustoId);
+  const tituloTags = titulo.tags
+    .map((tagId: any) => tags.find((t: any) => t.id === tagId))
+    .filter(Boolean);
+
+  const auditEvents = logsAuditoria
+    .filter(
+      (log) => log.entidadeId === titulo.id && log.entidade === 'TituloPagar'
+    )
+    .map((log) => ({
+      id: log.id,
+      data: log.data,
+      usuarioId: log.usuarioId,
+      acao: log.acao,
+      detalhes: log.detalhes,
+      antes: log.antes,
+      depois: log.depois,
+    }));
+
+  return (
+    <Page>
+      <div className="flex items-center gap-4">
+        <Button variant="ghost" size="icon" asChild>
+          <Link href="/finance/accounts-payable/installments">
+            <ArrowLeft className="h-4 w-4" />
+          </Link>
+        </Button>
+        <PageHeader
+          title={titulo.documento}
+          description={titulo.descricao}
+          breadcrumbs={[
+            { label: t('breadcrumbs.home'), href: '/' },
+            { label: t('breadcrumbs.finance'), href: '/finance' },
+            {
+              label: t('breadcrumbs.payables'),
+              href: '/finance/accounts-payable/installments',
+            },
+            { label: titulo.documento },
+          ]}
+          actions={
+            <div className="flex items-center gap-2">
+              <StatusBadge status={titulo.status} />
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline">
+                    <MoreHorizontal className="mr-2 h-4 w-4" />
+                    {t('actions.title')}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem>
+                    <Edit className="mr-2 h-4 w-4" />
+                    {t('actions.edit')}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <CheckCircle className="mr-2 h-4 w-4" />
+                    {t('actions.approve')}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Download className="mr-2 h-4 w-4" />
+                    {t('actions.settle')}
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Undo className="mr-2 h-4 w-4" />
+                    {t('actions.reverse')}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem className="text-destructive">
+                    <XCircle className="mr-2 h-4 w-4" />
+                    {t('actions.cancel')}
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          }
+        />
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-3">
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>{t('documentData.title')}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <dl className="grid gap-4 sm:grid-cols-2">
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.supplier')}
+                </dt>
+                <dd className="mt-1">
+                  <Link
+                    href={`/cadastros/pessoas/${fornecedor?.id}`}
+                    className="hover:underline"
+                  >
+                    {fornecedor?.nome}
+                  </Link>
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.cnpjCpf')}
+                </dt>
+                <dd className="mt-1">{fornecedor?.documento}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.competency')}
+                </dt>
+                <dd className="mt-1">{titulo.competencia}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.totalValue')}
+                </dt>
+                <dd className="mt-1 text-lg font-semibold">
+                  <Money value={titulo.valorTotal} />
+                </dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.category')}
+                </dt>
+                <dd className="mt-1">{categoria?.nome}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.costCenter')}
+                </dt>
+                <dd className="mt-1">{centroCusto?.nome}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.createdAt')}
+                </dt>
+                <dd className="mt-1">{formatarData(titulo.criadoEm)}</dd>
+              </div>
+              <div>
+                <dt className="text-sm font-medium text-muted-foreground">
+                  {t('documentData.tags')}
+                </dt>
+                <dd className="mt-1 flex gap-1">
+                  {tituloTags.length > 0 ? (
+                    tituloTags.map((tag: any) => (
+                      <Badge
+                        key={tag?.id}
+                        variant="outline"
+                        style={{ borderColor: tag?.cor, color: tag?.cor }}
+                      >
+                        {tag?.nome}
+                      </Badge>
+                    ))
+                  ) : (
+                    <span className="text-muted-foreground">-</span>
+                  )}
+                </dd>
+              </div>
+            </dl>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('attachments.title')}</CardTitle>
+            <CardDescription>{t('attachments.description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {titulo.anexos.length > 0 ? (
+              <ul className="space-y-2">
+                {titulo.anexos.map((anexo: any, i: number) => (
+                  <li key={i}>
+                    <Button
+                      variant="ghost"
+                      className="h-auto w-full justify-start p-2"
+                    >
+                      <FileText className="mr-2 h-4 w-4" />
+                      {anexo}
+                    </Button>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                {t('attachments.none')}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="parcelas">
+        <TabsList>
+          <TabsTrigger value="parcelas">{t('tabs.installments')}</TabsTrigger>
+          <TabsTrigger value="liquidacoes">{t('tabs.settlements')}</TabsTrigger>
+          <TabsTrigger value="auditoria">{t('tabs.audit')}</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="parcelas" className="mt-4">
+          <Card>
+            <CardContent className="pt-6">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{t('installmentsTable.installment')}</TableHead>
+                    <TableHead>{t('installmentsTable.dueDate')}</TableHead>
+                    <TableHead className="text-right">
+                      {t('installmentsTable.value')}
+                    </TableHead>
+                    <TableHead>{t('installmentsTable.method')}</TableHead>
+                    <TableHead>{t('installmentsTable.status')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {titulo.parcelas.map((parcela: any) => (
+                    <TableRow key={parcela.id}>
+                      <TableCell>
+                        {parcela.numero}/{titulo.parcelas.length}
+                      </TableCell>
+                      <TableCell>{formatarData(parcela.vencimento)}</TableCell>
+                      <TableCell className="text-right">
+                        <Money value={parcela.valor} />
+                      </TableCell>
+                      <TableCell className="capitalize">
+                        {parcela.metodoPagamento}
+                      </TableCell>
+                      <TableCell>
+                        <StatusBadge status={parcela.status} />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="liquidacoes" className="mt-4">
+          <Card>
+            <CardContent className="pt-6">
+              {titulo.parcelas.some((p: any) => p.liquidacoes.length > 0) ? (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>{t('settlementsTable.date')}</TableHead>
+                      <TableHead className="text-right">
+                        {t('settlementsTable.value')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('settlementsTable.interest')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('settlementsTable.discount')}
+                      </TableHead>
+                      <TableHead className="text-right">
+                        {t('settlementsTable.fine')}
+                      </TableHead>
+                      <TableHead>{t('settlementsTable.account')}</TableHead>
+                      <TableHead>{t('settlementsTable.method')}</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {titulo.parcelas.flatMap((parcela: any) =>
+                      parcela.liquidacoes.map((liq: any) => {
+                        const conta = getContaBancariaById(liq.contaBancariaId);
+                        return (
+                          <TableRow key={liq.id}>
+                            <TableCell>{formatarData(liq.data)}</TableCell>
+                            <TableCell className="text-right">
+                              <Money value={liq.valor} />
+                            </TableCell>
+                            <TableCell className="text-right">
+                              <Money value={liq.juros} />
+                            </TableCell>
+                            <TableCell className="text-right">
+                              <Money value={liq.desconto} />
+                            </TableCell>
+                            <TableCell className="text-right">
+                              <Money value={liq.multa} />
+                            </TableCell>
+                            <TableCell>{conta?.descricao}</TableCell>
+                            <TableCell className="capitalize">
+                              {liq.metodo}
+                            </TableCell>
+                          </TableRow>
+                        );
+                      })
+                    )}
+                  </TableBody>
+                </Table>
+              ) : (
+                <p className="text-center text-muted-foreground py-8">
+                  {t('settlementsTable.none')}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="auditoria" className="mt-4">
+          <Card>
+            <CardContent className="pt-6">
+              {auditEvents.length > 0 ? (
+                <AuditTimeline events={auditEvents} />
+              ) : (
+                <p className="text-center text-muted-foreground py-8">
+                  {t('audit.none')}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </Page>
+  );
+}