@hed-hog/finance 0.0.223 → 0.0.225

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

@@ -0,0 +1,385 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+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 {
+  Download,
+  Edit,
+  Eye,
+  MoreHorizontal,
+  Paperclip,
+  Plus,
+  Send,
+} 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="FAT-00000" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="cliente">{t('fields.client')}</Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('common.select')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {pessoas
+                    .filter((p) => p.tipo === 'cliente' || 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 === 'receita')
+                    .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="canal">{t('fields.channel')}</Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('common.select')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="boleto">{t('channels.boleto')}</SelectItem>
+                  <SelectItem value="pix">PIX</SelectItem>
+                  <SelectItem value="cartao">{t('channels.card')}</SelectItem>
+                  <SelectItem value="transferencia">
+                    {t('channels.transfer')}
+                  </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 TitulosReceberPage() {
+  const t = useTranslations('finance.ReceivableInstallmentsPage');
+  const { data } = useFinanceData();
+  const { titulosReceber, pessoas, categorias, centrosCusto } = data;
+
+  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
+
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('');
+
+  const canalBadge = {
+    boleto: {
+      label: t('channels.boleto'),
+      className: 'bg-blue-100 text-blue-700',
+    },
+    pix: { label: 'PIX', className: 'bg-green-100 text-green-700' },
+    cartao: {
+      label: t('channels.card'),
+      className: 'bg-purple-100 text-purple-700',
+    },
+    transferencia: {
+      label: t('channels.transfer'),
+      className: 'bg-orange-100 text-orange-700',
+    },
+  };
+
+  const filteredTitulos = titulosReceber.filter((titulo) => {
+    const matchesSearch =
+      titulo.documento.toLowerCase().includes(search.toLowerCase()) ||
+      getPessoaById(titulo.clienteId)
+        ?.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: '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.client')}</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.channel')}</TableHead>
+              <TableHead>{t('table.headers.status')}</TableHead>
+              <TableHead className="w-[50px]" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredTitulos.map((titulo) => {
+              const cliente = getPessoaById(titulo.clienteId);
+              const canal =
+                canalBadge[titulo.canal as keyof typeof canalBadge] ||
+                canalBadge.transferencia;
+              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-receivable/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>{cliente?.nome}</TableCell>
+                  <TableCell>{titulo.competencia}</TableCell>
+                  <TableCell>
+                    {proximaParcela
+                      ? formatarData(proximaParcela.vencimento)
+                      : '-'}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Money value={titulo.valorTotal} />
+                  </TableCell>
+                  <TableCell>
+                    <Badge className={canal.className} variant="outline">
+                      {canal.label}
+                    </Badge>
+                  </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-receivable/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>
+                          <Download className="mr-2 h-4 w-4" />
+                          {t('table.actions.registerReceipt')}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <Send className="mr-2 h-4 w-4" />
+                          {t('table.actions.sendCollection')}
+                        </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: titulosReceber.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>
+  );
+}

package/hedhog/frontend/app/cash-and-banks/bank-accounts/page.tsx.ejs

@@ -0,0 +1,296 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+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 {
+  Building2,
+  Eye,
+  Landmark,
+  PiggyBank,
+  Plus,
+  RefreshCw,
+  TrendingUp,
+  Upload,
+  Wallet,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+function NovaContaSheet({ t }: { t: ReturnType<typeof useTranslations> }) {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" />
+          {t('newAccount.action')}
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="w-full sm:max-w-lg">
+        <SheetHeader>
+          <SheetTitle>{t('newAccount.title')}</SheetTitle>
+          <SheetDescription>{t('newAccount.description')}</SheetDescription>
+        </SheetHeader>
+        <form className="mt-6 space-y-4">
+          <div className="grid gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="banco">{t('fields.bank')}</Label>
+              <Input id="banco" placeholder={t('fields.bankPlaceholder')} />
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="agencia">{t('fields.branch')}</Label>
+                <Input id="agencia" placeholder="0000" />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="conta">{t('fields.account')}</Label>
+                <Input id="conta" placeholder="00000-0" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="tipo">{t('fields.type')}</Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('common.select')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="corrente">
+                    {t('types.corrente')}
+                  </SelectItem>
+                  <SelectItem value="poupanca">
+                    {t('types.poupanca')}
+                  </SelectItem>
+                  <SelectItem value="investimento">
+                    {t('types.investimento')}
+                  </SelectItem>
+                  <SelectItem value="caixa">{t('types.caixa')}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="descricao">{t('fields.description')}</Label>
+              <Input
+                id="descricao"
+                placeholder={t('fields.descriptionPlaceholder')}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="saldoInicial">{t('fields.initialBalance')}</Label>
+              <Input
+                id="saldoInicial"
+                type="number"
+                placeholder="0,00"
+                step="0.01"
+              />
+            </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 ContasBancariasPage() {
+  const t = useTranslations('finance.BankAccountsPage');
+  const { data } = useFinanceData();
+  const { contasBancarias } = data;
+
+  const tipoConfig = {
+    corrente: { label: t('types.corrente'), icon: Building2 },
+    poupanca: { label: t('types.poupanca'), icon: PiggyBank },
+    investimento: { label: t('types.investimento'), icon: TrendingUp },
+    caixa: { label: t('types.caixa'), icon: Wallet },
+  };
+
+  const saldoTotal = contasBancarias
+    .filter((c) => c.ativo)
+    .reduce((acc, c) => acc + c.saldoAtual, 0);
+
+  const saldoConciliadoTotal = contasBancarias
+    .filter((c) => c.ativo)
+    .reduce((acc, c) => acc + c.saldoConciliado, 0);
+
+  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={<NovaContaSheet t={t} />}
+      />
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.totalBalance')}
+            </CardTitle>
+            <Landmark className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={saldoTotal} />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.activeAccounts', {
+                count: contasBancarias.filter((c) => c.ativo).length,
+              })}
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.reconciledBalance')}
+            </CardTitle>
+            <RefreshCw className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={saldoConciliadoTotal} />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.difference')}:{' '}
+              <Money value={saldoTotal - saldoConciliadoTotal} />
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        {contasBancarias.map((conta) => {
+          const tipo =
+            tipoConfig[conta.tipo as keyof typeof tipoConfig] ||
+            tipoConfig.corrente;
+          const TipoIcon = tipo.icon;
+          const diferenca = conta.saldoAtual - conta.saldoConciliado;
+
+          return (
+            <Card key={conta.id} className={!conta.ativo ? 'opacity-60' : ''}>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+                      <TipoIcon className="h-5 w-5" />
+                    </div>
+                    <div>
+                      <CardTitle className="text-base">{conta.banco}</CardTitle>
+                      <CardDescription>
+                        {conta.agencia !== '-'
+                          ? t('accountCard.bankAccount', {
+                              agency: conta.agencia,
+                              account: conta.conta,
+                            })
+                          : conta.descricao}
+                      </CardDescription>
+                    </div>
+                  </div>
+                  {!conta.ativo && (
+                    <Badge variant="outline" className="text-muted-foreground">
+                      {t('status.inactive')}
+                    </Badge>
+                  )}
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  <div>
+                    <p className="text-sm text-muted-foreground">
+                      {t('accountCard.currentBalance')}
+                    </p>
+                    <p className="text-2xl font-bold">
+                      <Money value={conta.saldoAtual} />
+                    </p>
+                  </div>
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">
+                      {t('accountCard.reconciledBalance')}
+                    </span>
+                    <Money value={conta.saldoConciliado} />
+                  </div>
+                  {diferenca !== 0 && (
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">
+                        {t('accountCard.difference')}
+                      </span>
+                      <span
+                        className={
+                          diferenca > 0 ? 'text-green-600' : 'text-red-600'
+                        }
+                      >
+                        <Money value={diferenca} showSign />
+                      </span>
+                    </div>
+                  )}
+                  <div className="flex gap-2 pt-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="flex-1 bg-transparent"
+                      asChild
+                    >
+                      <Link href="/finance/cash-and-banks/statements">
+                        <Eye className="mr-2 h-4 w-4" />
+                        {t('accountCard.statement')}
+                      </Link>
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="flex-1 bg-transparent"
+                      asChild
+                    >
+                      <Link href="/finance/cash-and-banks/bank-reconciliation">
+                        <RefreshCw className="mr-2 h-4 w-4" />
+                        {t('accountCard.reconcile')}
+                      </Link>
+                    </Button>
+                    <Button variant="outline" size="sm">
+                      <Upload className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </Page>
+  );
+}