@hed-hog/finance 0.0.223 → 0.0.225

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

@@ -0,0 +1,388 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { FilterBar } from '@/components/ui/filter-bar';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Money } from '@/components/ui/money';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { StatusBadge } from '@/components/ui/status-badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  CheckCircle,
+  Download,
+  Edit,
+  Eye,
+  MoreHorizontal,
+  Paperclip,
+  Plus,
+  Undo,
+  XCircle,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useState } from 'react';
+import { formatarData } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+function NovoTituloSheet({
+  pessoas,
+  categorias,
+  centrosCusto,
+  t,
+}: {
+  pessoas: any[];
+  categorias: any[];
+  centrosCusto: any[];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" />
+          {t('newTitle.action')}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>{t('newTitle.title')}</SheetTitle>
+          <SheetDescription>{t('newTitle.description')}</SheetDescription>
+        </SheetHeader>
+        <form className="mt-6 space-y-4">
+          <div className="grid gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="documento">{t('fields.document')}</Label>
+              <Input id="documento" placeholder="NF-00000" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="fornecedor">{t('fields.supplier')}</Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('common.select')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {pessoas
+                    .filter(
+                      (p) => p.tipo === 'fornecedor' || p.tipo === 'ambos'
+                    )
+                    .map((p) => (
+                      <SelectItem key={p.id} value={p.id}>
+                        {p.nome}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="competencia">{t('fields.competency')}</Label>
+                <Input id="competencia" type="month" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="vencimento">{t('fields.dueDate')}</Label>
+                <Input id="vencimento" type="date" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="valor">{t('fields.totalValue')}</Label>
+              <Input id="valor" type="number" placeholder="0,00" step="0.01" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="categoria">{t('fields.category')}</Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('common.select')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {categorias
+                    .filter((c) => c.natureza === 'despesa')
+                    .map((c) => (
+                      <SelectItem key={c.id} value={c.id}>
+                        {c.codigo} - {c.nome}
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="centroCusto">{t('fields.costCenter')}</Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('common.select')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {centrosCusto.map((c) => (
+                    <SelectItem key={c.id} value={c.id}>
+                      {c.codigo} - {c.nome}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="metodo">{t('fields.paymentMethod')}</Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('common.select')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="boleto">
+                    {t('paymentMethods.boleto')}
+                  </SelectItem>
+                  <SelectItem value="pix">PIX</SelectItem>
+                  <SelectItem value="transferencia">
+                    {t('paymentMethods.transfer')}
+                  </SelectItem>
+                  <SelectItem value="cartao">
+                    {t('paymentMethods.card')}
+                  </SelectItem>
+                  <SelectItem value="dinheiro">
+                    {t('paymentMethods.cash')}
+                  </SelectItem>
+                  <SelectItem value="cheque">
+                    {t('paymentMethods.check')}
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="descricao">{t('fields.description')}</Label>
+              <Textarea
+                id="descricao"
+                placeholder={t('newTitle.descriptionPlaceholder')}
+              />
+            </div>
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <Button type="button" variant="outline">
+              {t('common.cancel')}
+            </Button>
+            <Button type="submit">{t('common.save')}</Button>
+          </div>
+        </form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function TitulosPagarPage() {
+  const t = useTranslations('finance.PayableInstallmentsPage');
+  const { data } = useFinanceData();
+  const { titulosPagar, pessoas, categorias, centrosCusto } = data;
+
+  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
+  const getCategoriaById = (id?: string) => categorias.find((c) => c.id === id);
+
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('');
+
+  const filteredTitulos = titulosPagar.filter((titulo) => {
+    const matchesSearch =
+      titulo.documento.toLowerCase().includes(search.toLowerCase()) ||
+      getPessoaById(titulo.fornecedorId)
+        ?.nome.toLowerCase()
+        .includes(search.toLowerCase());
+
+    const matchesStatus = !statusFilter || titulo.status === statusFilter;
+
+    return matchesSearch && matchesStatus;
+  });
+
+  return (
+    <Page>
+      <PageHeader
+        title={t('header.title')}
+        description={t('header.description')}
+        breadcrumbs={[
+          { label: t('breadcrumbs.home'), href: '/' },
+          { label: t('breadcrumbs.finance'), href: '/finance' },
+          { label: t('breadcrumbs.current') },
+        ]}
+        actions={
+          <NovoTituloSheet
+            pessoas={pessoas}
+            categorias={categorias}
+            centrosCusto={centrosCusto}
+            t={t}
+          />
+        }
+      />
+
+      <FilterBar
+        searchPlaceholder={t('filters.searchPlaceholder')}
+        searchValue={search}
+        onSearchChange={setSearch}
+        filters={[
+          {
+            id: 'status',
+            label: t('filters.status'),
+            value: statusFilter,
+            onChange: setStatusFilter,
+            options: [
+              { value: 'all', label: t('statuses.all') },
+              { value: 'rascunho', label: t('statuses.rascunho') },
+              { value: 'aprovado', label: t('statuses.aprovado') },
+              { value: 'aberto', label: t('statuses.aberto') },
+              { value: 'parcial', label: t('statuses.parcial') },
+              { value: 'liquidado', label: t('statuses.liquidado') },
+              { value: 'vencido', label: t('statuses.vencido') },
+              { value: 'cancelado', label: t('statuses.cancelado') },
+            ],
+          },
+        ]}
+        activeFilters={statusFilter && statusFilter !== 'all' ? 1 : 0}
+        onClearFilters={() => setStatusFilter('')}
+      />
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('table.headers.document')}</TableHead>
+              <TableHead>{t('table.headers.supplier')}</TableHead>
+              <TableHead>{t('table.headers.competency')}</TableHead>
+              <TableHead>{t('table.headers.dueDate')}</TableHead>
+              <TableHead className="text-right">
+                {t('table.headers.value')}
+              </TableHead>
+              <TableHead>{t('table.headers.category')}</TableHead>
+              <TableHead>{t('table.headers.status')}</TableHead>
+              <TableHead className="w-[50px]" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredTitulos.map((titulo) => {
+              const fornecedor = getPessoaById(titulo.fornecedorId);
+              const categoria = getCategoriaById(titulo.categoriaId);
+              const proximaParcela = titulo.parcelas.find(
+                (p: any) => p.status === 'aberto' || p.status === 'vencido'
+              );
+
+              return (
+                <TableRow key={titulo.id}>
+                  <TableCell className="font-medium">
+                    <Link
+                      href={`/finance/accounts-payable/installments/${titulo.id}`}
+                      className="hover:underline"
+                    >
+                      {titulo.documento}
+                    </Link>
+                    {titulo.anexos.length > 0 && (
+                      <Paperclip className="ml-1 inline h-3 w-3 text-muted-foreground" />
+                    )}
+                  </TableCell>
+                  <TableCell>{fornecedor?.nome}</TableCell>
+                  <TableCell>{titulo.competencia}</TableCell>
+                  <TableCell>
+                    {proximaParcela
+                      ? formatarData(proximaParcela.vencimento)
+                      : '-'}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Money value={titulo.valorTotal} />
+                  </TableCell>
+                  <TableCell>{categoria?.nome}</TableCell>
+                  <TableCell>
+                    <StatusBadge status={titulo.status} />
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <MoreHorizontal className="h-4 w-4" />
+                          <span className="sr-only">
+                            {t('table.actions.srActions')}
+                          </span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem asChild>
+                          <Link
+                            href={`/finance/accounts-payable/installments/${titulo.id}`}
+                          >
+                            <Eye className="mr-2 h-4 w-4" />
+                            {t('table.actions.viewDetails')}
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Edit className="mr-2 h-4 w-4" />
+                          {t('table.actions.edit')}
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem>
+                          <CheckCircle className="mr-2 h-4 w-4" />
+                          {t('table.actions.approve')}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Download className="mr-2 h-4 w-4" />
+                          {t('table.actions.settle')}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Undo className="mr-2 h-4 w-4" />
+                          {t('table.actions.reverse')}
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem className="text-destructive">
+                          <XCircle className="mr-2 h-4 w-4" />
+                          {t('table.actions.cancel')}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">
+          {t('footer.showing', {
+            filtered: filteredTitulos.length,
+            total: titulosPagar.length,
+          })}
+        </p>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" disabled>
+            {t('footer.previous')}
+          </Button>
+          <Button variant="outline" size="sm" disabled>
+            {t('footer.next')}
+          </Button>
+        </div>
+      </div>
+    </Page>
+  );
+}