@hed-hog/finance 0.0.223 → 0.0.225

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

@@ -0,0 +1,427 @@
+'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 { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Money } from '@/components/ui/money';
+import { Progress } from '@/components/ui/progress';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { StatusBadge } from '@/components/ui/status-badge';
+import { Check, DollarSign, Link2, RefreshCw } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { formatarData, formatarMoeda } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+function CriarAjusteDialog({ t }: { t: ReturnType<typeof useTranslations> }) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          <DollarSign className="mr-2 h-4 w-4" />
+          {t('adjustment.action')}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('adjustment.title')}</DialogTitle>
+          <DialogDescription>{t('adjustment.description')}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="tipo">{t('adjustment.type')}</Label>
+            <Select>
+              <SelectTrigger>
+                <SelectValue placeholder={t('common.select')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="tarifa">
+                  {t('adjustment.types.bankFee')}
+                </SelectItem>
+                <SelectItem value="juros">
+                  {t('adjustment.types.interest')}
+                </SelectItem>
+                <SelectItem value="diferenca">
+                  {t('adjustment.types.valueDifference')}
+                </SelectItem>
+                <SelectItem value="outro">
+                  {t('adjustment.types.other')}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="valor">{t('adjustment.value')}</Label>
+            <Input id="valor" type="number" placeholder="0,00" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="descricao">{t('adjustment.details')}</Label>
+            <Input
+              id="descricao"
+              placeholder={t('adjustment.detailsPlaceholder')}
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline">{t('common.cancel')}</Button>
+          <Button>{t('adjustment.submit')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default function ConciliacaoPage() {
+  const t = useTranslations('finance.BankReconciliationPage');
+  const { data } = useFinanceData();
+  const { extratos, titulosPagar, titulosReceber, contasBancarias, pessoas } =
+    data;
+
+  const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
+
+  const extratosPendentes = extratos.filter(
+    (e) => e.statusConciliacao === 'pendente'
+  );
+
+  const titulosAbertos = [
+    ...titulosPagar.flatMap((t: any) =>
+      t.parcelas
+        .filter((p: any) => p.status === 'aberto' || p.status === 'vencido')
+        .map((p: any) => ({
+          id: `pagar-${t.id}-${p.id}`,
+          tipo: 'pagar' as const,
+          documento: t.documento,
+          pessoa: getPessoaById(t.fornecedorId)?.nome || '',
+          vencimento: p.vencimento,
+          valor: p.valor,
+        }))
+    ),
+    ...titulosReceber.flatMap((t: any) =>
+      t.parcelas
+        .filter((p: any) => p.status === 'aberto' || p.status === 'vencido')
+        .map((p: any) => ({
+          id: `receber-${t.id}-${p.id}`,
+          tipo: 'receber' as const,
+          documento: t.documento,
+          pessoa: getPessoaById(t.clienteId)?.nome || '',
+          vencimento: p.vencimento,
+          valor: p.valor,
+        }))
+    ),
+  ];
+
+  const [contaFilter, setContaFilter] = useState<string>('1');
+  const [selectedExtrato, setSelectedExtrato] = useState<string | null>(null);
+  const [selectedTitulo, setSelectedTitulo] = useState<string | null>(null);
+
+  const extratosFiltered = extratosPendentes.filter(
+    (e) => e.contaBancariaId === contaFilter
+  );
+
+  const totalConciliado = extratos.filter(
+    (e) =>
+      e.contaBancariaId === contaFilter && e.statusConciliacao === 'conciliado'
+  ).length;
+  const totalExtratoConta = extratos.filter(
+    (e) => e.contaBancariaId === contaFilter
+  ).length;
+  const percentualConciliado =
+    totalExtratoConta > 0
+      ? Math.round((totalConciliado / totalExtratoConta) * 100)
+      : 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') },
+        ]}
+      />
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <Select value={contaFilter} onValueChange={setContaFilter}>
+          <SelectTrigger className="w-[280px]">
+            <SelectValue placeholder={t('filters.selectAccount')} />
+          </SelectTrigger>
+          <SelectContent>
+            {contasBancarias.map((conta) => (
+              <SelectItem key={conta.id} value={conta.id}>
+                {conta.banco} - {conta.descricao}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <div className="flex gap-2">
+          <CriarAjusteDialog t={t} />
+          <Button disabled={!selectedExtrato || !selectedTitulo}>
+            <Link2 className="mr-2 h-4 w-4" />
+            {t('actions.reconcileSelected')}
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.reconciled')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{percentualConciliado}%</div>
+            <Progress value={percentualConciliado} className="mt-2" />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.pending')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{extratosFiltered.length}</div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.transactions')}
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.discrepancies')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-orange-600">0</div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.toResolve')}
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.difference')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={2230.5} />
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t('cards.notReconciled')}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <RefreshCw className="h-4 w-4" />
+              {t('statement.title')}
+            </CardTitle>
+            <CardDescription>{t('statement.description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              {extratosFiltered.length > 0 ? (
+                extratosFiltered.map((extrato) => (
+                  <div
+                    key={extrato.id}
+                    className={`flex items-center gap-3 rounded-lg border p-3 cursor-pointer transition-colors ${
+                      selectedExtrato === extrato.id
+                        ? 'border-primary bg-primary/5'
+                        : 'hover:bg-muted/50'
+                    }`}
+                    onClick={() =>
+                      setSelectedExtrato(
+                        selectedExtrato === extrato.id ? null : extrato.id
+                      )
+                    }
+                  >
+                    <Checkbox
+                      checked={selectedExtrato === extrato.id}
+                      onCheckedChange={() =>
+                        setSelectedExtrato(
+                          selectedExtrato === extrato.id ? null : extrato.id
+                        )
+                      }
+                    />
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm font-medium">
+                          {extrato.descricao}
+                        </span>
+                        <span
+                          className={`font-semibold ${
+                            extrato.tipo === 'entrada'
+                              ? 'text-green-600'
+                              : 'text-red-600'
+                          }`}
+                        >
+                          {extrato.tipo === 'saida' && '-'}
+                          {formatarMoeda(extrato.valor)}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                        <span>{formatarData(extrato.data)}</span>
+                        <StatusBadge
+                          status={extrato.statusConciliacao}
+                          type="conciliacao"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <div className="flex flex-col items-center justify-center py-8 text-center">
+                  <Check className="h-12 w-12 text-green-500" />
+                  <p className="mt-2 font-medium">
+                    {t('statement.emptyTitle')}
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    {t('statement.emptyDescription')}
+                  </p>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <DollarSign className="h-4 w-4" />
+              {t('openTitles.title')}
+            </CardTitle>
+            <CardDescription>{t('openTitles.description')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2 max-h-[400px] overflow-y-auto">
+              {titulosAbertos.map((titulo) => (
+                <div
+                  key={titulo.id}
+                  className={`flex items-center gap-3 rounded-lg border p-3 cursor-pointer transition-colors ${
+                    selectedTitulo === titulo.id
+                      ? 'border-primary bg-primary/5'
+                      : 'hover:bg-muted/50'
+                  }`}
+                  onClick={() =>
+                    setSelectedTitulo(
+                      selectedTitulo === titulo.id ? null : titulo.id
+                    )
+                  }
+                >
+                  <Checkbox
+                    checked={selectedTitulo === titulo.id}
+                    onCheckedChange={() =>
+                      setSelectedTitulo(
+                        selectedTitulo === titulo.id ? null : titulo.id
+                      )
+                    }
+                  />
+                  <div className="flex-1">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm font-medium">
+                          {titulo.documento}
+                        </span>
+                        <Badge
+                          variant="outline"
+                          className={
+                            titulo.tipo === 'pagar'
+                              ? 'border-red-200 text-red-700'
+                              : 'border-green-200 text-green-700'
+                          }
+                        >
+                          {titulo.tipo === 'pagar'
+                            ? t('openTitles.pay')
+                            : t('openTitles.receive')}
+                        </Badge>
+                      </div>
+                      <span className="font-semibold">
+                        {formatarMoeda(titulo.valor)}
+                      </span>
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                      {t('openTitles.personDue', {
+                        person: titulo.pessoa,
+                        dueDate: formatarData(titulo.vencimento),
+                      })}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {selectedExtrato && selectedTitulo && (
+        <Card className="border-primary">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-primary">
+              <Link2 className="h-4 w-4" />
+              {t('ready.title')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-muted-foreground">
+                  {t('ready.description')}
+                </p>
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    setSelectedExtrato(null);
+                    setSelectedTitulo(null);
+                  }}
+                >
+                  {t('common.cancel')}
+                </Button>
+                <Button>
+                  <Check className="mr-2 h-4 w-4" />
+                  {t('actions.reconcile')}
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </Page>
+  );
+}

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

@@ -0,0 +1,273 @@
+'use client';
+
+import { Page, PageHeader } from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+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 { StatusBadge } from '@/components/ui/status-badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { ArrowDownRight, ArrowUpRight, Download, Upload } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { formatarData } from '../../_lib/formatters';
+import { useFinanceData } from '../../_lib/use-finance-data';
+
+function ImportarExtratoDialog({
+  contasBancarias,
+  t,
+}: {
+  contasBancarias: any[];
+  t: ReturnType<typeof useTranslations>;
+}) {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>
+          <Upload className="mr-2 h-4 w-4" />
+          {t('importDialog.action')}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('importDialog.title')}</DialogTitle>
+          <DialogDescription>{t('importDialog.description')}</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="conta">{t('importDialog.bankAccount')}</Label>
+            <Select>
+              <SelectTrigger>
+                <SelectValue placeholder={t('importDialog.selectAccount')} />
+              </SelectTrigger>
+              <SelectContent>
+                {contasBancarias.map((conta: any) => (
+                  <SelectItem key={conta.id} value={conta.id}>
+                    {conta.banco} - {conta.descricao}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="arquivo">{t('importDialog.file')}</Label>
+            <Input id="arquivo" type="file" accept=".ofx,.csv" />
+            <p className="text-xs text-muted-foreground">
+              {t('importDialog.acceptedFormats')}
+            </p>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline">{t('common.cancel')}</Button>
+          <Button>{t('importDialog.submit')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default function ExtratosPage() {
+  const t = useTranslations('finance.StatementsPage');
+  const { data } = useFinanceData();
+  const { extratos, contasBancarias } = data;
+
+  const [contaFilter, setContaFilter] = useState<string>('1');
+  const [search, setSearch] = useState('');
+
+  const filteredExtratos = extratos.filter((extrato) => {
+    const matchesConta = extrato.contaBancariaId === contaFilter;
+    const matchesSearch = extrato.descricao
+      .toLowerCase()
+      .includes(search.toLowerCase());
+    return matchesConta && matchesSearch;
+  });
+
+  const conta = contasBancarias.find((item) => item.id === contaFilter);
+  const totalEntradas = filteredExtratos
+    .filter((e) => e.tipo === 'entrada')
+    .reduce((acc, e) => acc + e.valor, 0);
+  const totalSaidas = filteredExtratos
+    .filter((e) => e.tipo === 'saida')
+    .reduce((acc, e) => acc + e.valor, 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={
+          <div className="flex gap-2">
+            <Button variant="outline">
+              <Download className="mr-2 h-4 w-4" />
+              {t('actions.export')}
+            </Button>
+            <ImportarExtratoDialog contasBancarias={contasBancarias} t={t} />
+          </div>
+        }
+      />
+
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        <Select value={contaFilter} onValueChange={setContaFilter}>
+          <SelectTrigger className="w-[280px]">
+            <SelectValue placeholder={t('filters.selectAccount')} />
+          </SelectTrigger>
+          <SelectContent>
+            {contasBancarias.map((conta) => (
+              <SelectItem key={conta.id} value={conta.id}>
+                {conta.banco} - {conta.descricao}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <div className="flex-1">
+          <FilterBar
+            searchPlaceholder={t('filters.searchPlaceholder')}
+            searchValue={search}
+            onSearchChange={setSearch}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              {t('cards.inflows')}
+            </CardTitle>
+            <ArrowUpRight className="h-4 w-4 text-green-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-green-600">
+              <Money value={totalEntradas} />
+            </div>
+          </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.outflows')}
+            </CardTitle>
+            <ArrowDownRight className="h-4 w-4 text-red-500" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold text-red-600">
+              <Money value={totalSaidas} />
+            </div>
+          </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.accountBalance')}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              <Money value={conta?.saldoAtual || 0} />
+            </div>
+            <p className="text-xs text-muted-foreground">{conta?.descricao}</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('table.title')}</CardTitle>
+          <CardDescription>
+            {t('table.foundTransactions', { count: filteredExtratos.length })}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t('table.headers.date')}</TableHead>
+                <TableHead>{t('table.headers.description')}</TableHead>
+                <TableHead className="text-right">
+                  {t('table.headers.value')}
+                </TableHead>
+                <TableHead>{t('table.headers.type')}</TableHead>
+                <TableHead>{t('table.headers.reconciliation')}</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredExtratos.map((extrato) => (
+                <TableRow key={extrato.id}>
+                  <TableCell>{formatarData(extrato.data)}</TableCell>
+                  <TableCell>{extrato.descricao}</TableCell>
+                  <TableCell className="text-right">
+                    <span
+                      className={
+                        extrato.tipo === 'entrada'
+                          ? 'text-green-600'
+                          : 'text-red-600'
+                      }
+                    >
+                      {extrato.tipo === 'saida' && '-'}
+                      <Money value={extrato.valor} />
+                    </span>
+                  </TableCell>
+                  <TableCell>
+                    {extrato.tipo === 'entrada' ? (
+                      <span className="flex items-center gap-1 text-green-600">
+                        <ArrowUpRight className="h-4 w-4" />
+                        {t('types.inflow')}
+                      </span>
+                    ) : (
+                      <span className="flex items-center gap-1 text-red-600">
+                        <ArrowDownRight className="h-4 w-4" />
+                        {t('types.outflow')}
+                      </span>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <StatusBadge
+                      status={extrato.statusConciliacao}
+                      type="conciliacao"
+                    />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </Page>
+  );
+}