@hed-hog/finance 0.0.246 → 0.0.250

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

@@ -9,6 +9,14 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { FilterBar } from '@/components/ui/filter-bar';
 import {
   Form,
@@ -166,7 +174,7 @@ function ImportarExtratoSheet({
                   <FormLabel>{t('importDialog.bankAccount')}</FormLabel>
                   <Select value={field.value} onValueChange={field.onChange}>
                     <FormControl>
-                      <SelectTrigger>
+                      <SelectTrigger className="w-full">
                         <SelectValue
                           placeholder={t('importDialog.selectAccount')}
                         />
@@ -238,8 +246,10 @@ export default function ExtratosPage() {
 
   const [contaFilter, setContaFilter] = useState<string>('');
   const [search, setSearch] = useState('');
+  const [extratoSelecionado, setExtratoSelecionado] =
+    useState<Statement | null>(null);
 
-  const { data: contasBancarias } = useQuery<BankAccount[]>({
+  const { data: contasBancarias = [] } = useQuery<BankAccount[]>({
     queryKey: ['finance-bank-accounts'],
     queryFn: async () => {
       const response = await request({
@@ -249,7 +259,6 @@ export default function ExtratosPage() {
 
       return (response?.data || []) as BankAccount[];
     },
-    initialData: [],
   });
 
   useEffect(() => {
@@ -285,7 +294,9 @@ export default function ExtratosPage() {
     searchParams,
   ]);
 
-  const { data: extratos, refetch: refetchExtratos } = useQuery<Statement[]>({
+  const { data: extratos = [], refetch: refetchExtratos } = useQuery<
+    Statement[]
+  >({
     queryKey: ['finance-statements', contaFilter],
     queryFn: async () => {
       if (!contaFilter) {
@@ -299,7 +310,6 @@ export default function ExtratosPage() {
 
       return (response?.data || []) as Statement[];
     },
-    initialData: [],
   });
 
   const filteredExtratos = useMemo(
@@ -311,6 +321,11 @@ export default function ExtratosPage() {
   );
 
   const conta = contasBancarias.find((item) => item.id === contaFilter);
+  const contaExtratoSelecionado = extratoSelecionado
+    ? contasBancarias.find(
+        (item) => item.id === extratoSelecionado.contaBancariaId
+      )
+    : undefined;
   const totalEntradas = filteredExtratos
     .filter((e) => e.tipo === 'entrada')
     .reduce((acc, e) => acc + e.valor, 0);
@@ -466,60 +481,182 @@ export default function ExtratosPage() {
           </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'
+          <div className="overflow-x-auto">
+            <Table className="min-w-[760px] table-fixed">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[110px]">
+                    {t('table.headers.date')}
+                  </TableHead>
+                  <TableHead>{t('table.headers.description')}</TableHead>
+                  <TableHead className="w-[130px] text-right">
+                    {t('table.headers.value')}
+                  </TableHead>
+                  <TableHead className="w-[110px]">
+                    {t('table.headers.type')}
+                  </TableHead>
+                  <TableHead className="w-[140px]">
+                    {t('table.headers.reconciliation')}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredExtratos.map((extrato) => (
+                  <TableRow
+                    key={extrato.id}
+                    className="cursor-pointer"
+                    onClick={() => setExtratoSelecionado(extrato)}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        setExtratoSelecionado(extrato);
                       }
-                    >
-                      {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')}
+                    }}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <TableCell>{formatarData(extrato.data)}</TableCell>
+                    <TableCell className="truncate" title={extrato.descricao}>
+                      {extrato.descricao}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <span
+                        className={
+                          extrato.tipo === 'entrada'
+                            ? 'text-green-600'
+                            : 'text-red-600'
+                        }
+                      >
+                        <Money value={extrato.valor} />
                       </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>
+                    </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>
+          </div>
         </CardContent>
       </Card>
+
+      <Dialog
+        open={!!extratoSelecionado}
+        onOpenChange={(open) => {
+          if (!open) {
+            setExtratoSelecionado(null);
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{t('table.title')}</DialogTitle>
+            <DialogDescription>{t('header.description')}</DialogDescription>
+          </DialogHeader>
+
+          {extratoSelecionado ? (
+            <div className="space-y-4 rounded-md border p-4">
+              <div className="text-center">
+                <p className="text-sm text-muted-foreground">
+                  {t('table.headers.reconciliation')}
+                </p>
+                <div className="mt-1 flex justify-center">
+                  <StatusBadge
+                    status={extratoSelecionado.statusConciliacao}
+                    type="conciliacao"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                <div>
+                  <p className="text-xs text-muted-foreground">
+                    {t('table.headers.date')}
+                  </p>
+                  <p className="font-medium">
+                    {formatarData(extratoSelecionado.data)}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">
+                    {t('table.headers.type')}
+                  </p>
+                  <p className="font-medium">
+                    {extratoSelecionado.tipo === 'entrada'
+                      ? t('types.inflow')
+                      : t('types.outflow')}
+                  </p>
+                </div>
+                <div className="sm:col-span-2">
+                  <p className="text-xs text-muted-foreground">
+                    {t('table.headers.description')}
+                  </p>
+                  <p className="font-medium wrap-break-word">
+                    {extratoSelecionado.descricao}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">
+                    {t('table.headers.value')}
+                  </p>
+                  <p
+                    className={`font-medium ${
+                      extratoSelecionado.tipo === 'entrada'
+                        ? 'text-green-600'
+                        : 'text-red-600'
+                    }`}
+                  >
+                    <Money value={extratoSelecionado.valor} />
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs text-muted-foreground">
+                    {t('importDialog.bankAccount')}
+                  </p>
+                  <p className="font-medium">
+                    {contaExtratoSelecionado
+                      ? `${contaExtratoSelecionado.banco} - ${contaExtratoSelecionado.descricao}`
+                      : '-'}
+                  </p>
+                </div>
+                <div className="sm:col-span-2">
+                  <p className="text-xs text-muted-foreground">ID</p>
+                  <p className="font-mono text-xs break-all">
+                    {extratoSelecionado.id}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ) : null}
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setExtratoSelecionado(null)}
+            >
+              {t('common.cancel')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Page>
   );
 }

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

@@ -20,7 +20,7 @@ import {
   TrendingUp,
   Wallet,
 } from 'lucide-react';
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import {
   CartesianGrid,
   Legend,
@@ -204,10 +204,14 @@ function ProximosVencimentos({
 function Alertas({
   titulosPagar,
   extratos,
+  periodoAberto,
+  locale,
   t,
 }: {
   titulosPagar: any[];
   extratos: any[];
+  periodoAberto?: { inicio?: string | null } | null;
+  locale: string;
   t: ReturnType<typeof useTranslations>;
 }) {
   const vencidos = titulosPagar.filter((t) =>
@@ -217,6 +221,10 @@ function Alertas({
     (e) => e.statusConciliacao === 'pendente'
   ).length;
 
+  const periodoBase = periodoAberto?.inicio ? new Date(periodoAberto.inicio) : new Date();
+  const mes = new Intl.DateTimeFormat(locale, { month: 'long' }).format(periodoBase);
+  const periodoAtual = `${mes.charAt(0).toUpperCase()}${mes.slice(1)}/${periodoBase.getFullYear()}`;
+
   return (
     <Card>
       <CardHeader>
@@ -249,7 +257,7 @@ function Alertas({
           <div className="flex items-center justify-between rounded-lg bg-blue-50 p-3">
             <span className="text-sm">{t('alerts.openPeriod')}</span>
             <Badge variant="outline" className="border-blue-500 text-blue-700">
-              {t('alerts.currentPeriod')}
+              {periodoAtual}
             </Badge>
           </div>
         </div>
@@ -260,6 +268,7 @@ function Alertas({
 
 export default function DashboardPage() {
   const t = useTranslations('finance.DashboardPage');
+  const locale = useLocale();
   const { data } = useFinanceData();
   const {
     kpis,
@@ -268,6 +277,7 @@ export default function DashboardPage() {
     titulosReceber,
     extratos,
     pessoas,
+    periodoAberto,
   } = data;
 
   const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
@@ -324,7 +334,13 @@ export default function DashboardPage() {
             <DashboardChart fluxoCaixaPrevisto={fluxoCaixaPrevisto} t={t} />
           </CardContent>
         </Card>
-        <Alertas titulosPagar={titulosPagar} extratos={extratos} t={t} />
+        <Alertas
+          titulosPagar={titulosPagar}
+          extratos={extratos}
+          periodoAberto={periodoAberto}
+          locale={locale}
+          t={t}
+        />
       </div>
 
       <ProximosVencimentos

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/finance",
-  "version": "0.0.246",
+  "version": "0.0.250",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -9,14 +9,14 @@
     "@nestjs/core": "^11",
     "@nestjs/jwt": "^11",
     "@nestjs/mapped-types": "*",
+    "@hed-hog/tag": "0.0.250",
     "@hed-hog/api-pagination": "0.0.5",
-    "@hed-hog/tag": "0.0.240",
+    "@hed-hog/contact": "0.0.250",
     "@hed-hog/api-prisma": "0.0.4",
-    "@hed-hog/api": "0.0.3",
-    "@hed-hog/contact": "0.0.240",
     "@hed-hog/api-types": "0.0.1",
     "@hed-hog/api-locale": "0.0.11",
-    "@hed-hog/core": "0.0.240"
+    "@hed-hog/api": "0.0.3",
+    "@hed-hog/core": "0.0.250"
   },
   "exports": {
     ".": {

package/src/finance.service.ts

@@ -728,6 +728,7 @@ export class FinanceService {
       bankAccountsResult,
       tagsResult,
       auditLogsResult,
+      openPeriodResult,
     ] = await Promise.allSettled([
       this.loadTitles('payable'),
       this.loadTitles('receivable'),
@@ -737,6 +738,7 @@ export class FinanceService {
       this.loadBankAccounts(),
       this.loadTags(),
       this.loadAuditLogs(),
+      this.loadOpenPeriod(),
     ]);
 
     const payables = payablesResult.status === 'fulfilled' ? payablesResult.value : [];
@@ -752,6 +754,8 @@ export class FinanceService {
     const tags = tagsResult.status === 'fulfilled' ? tagsResult.value : [];
     const auditLogs =
       auditLogsResult.status === 'fulfilled' ? auditLogsResult.value : [];
+    const openPeriod =
+      openPeriodResult.status === 'fulfilled' ? openPeriodResult.value : null;
 
     if (payablesResult.status === 'rejected') {
       this.logger.error('Failed to load finance payables', payablesResult.reason);
@@ -777,6 +781,9 @@ export class FinanceService {
     if (auditLogsResult.status === 'rejected') {
       this.logger.error('Failed to load finance audit logs', auditLogsResult.reason);
     }
+    if (openPeriodResult.status === 'rejected') {
+      this.logger.error('Failed to load finance open period', openPeriodResult.reason);
+    }
 
     const aprovacoesPendentes = payables
       .filter((title: any) => title.status === 'rascunho')
@@ -790,15 +797,10 @@ export class FinanceService {
         dataSolicitacao: title.criadoEm,
       }));
 
+    const kpis = this.calculateDashboardKpis(payables, receivables, bankAccounts);
+
     return {
-      kpis: {
-        saldoCaixa: 0,
-        aPagar30dias: 0,
-        aPagar7dias: 0,
-        aReceber30dias: 0,
-        aReceber7dias: 0,
-        inadimplencia: 0,
-      },
+      kpis,
       fluxoCaixaPrevisto: [],
       titulosPagar: payables,
       titulosReceber: receivables,
@@ -818,9 +820,96 @@ export class FinanceService {
       historicoContatos: [],
       entradasPrevistas: [],
       saidasPrevistas: [],
+      periodoAberto: openPeriod,
     };
   }
 
+  private calculateDashboardKpis(
+    payables: any[],
+    receivables: any[],
+    bankAccounts: any[],
+  ) {
+    const today = this.startOfDay(new Date());
+    const day7 = this.addDays(today, 7);
+    const day30 = this.addDays(today, 30);
+
+    const payableInstallments = this.extractOpenInstallments(payables);
+    const receivableInstallments = this.extractOpenInstallments(receivables);
+
+    const saldoCaixa = (bankAccounts || [])
+      .filter((account) => account?.ativo !== false)
+      .reduce((acc, account) => acc + Number(account?.saldoAtual || 0), 0);
+
+    const aPagar7dias = this.sumInstallmentsDueBetween(
+      payableInstallments,
+      today,
+      day7,
+    );
+    const aPagar30dias = this.sumInstallmentsDueBetween(
+      payableInstallments,
+      today,
+      day30,
+    );
+
+    const aReceber7dias = this.sumInstallmentsDueBetween(
+      receivableInstallments,
+      today,
+      day7,
+    );
+    const aReceber30dias = this.sumInstallmentsDueBetween(
+      receivableInstallments,
+      today,
+      day30,
+    );
+
+    const inadimplencia = receivableInstallments
+      .filter((installment) => this.startOfDay(new Date(installment.vencimento)) < today)
+      .reduce((acc, installment) => acc + Number(installment.valor || 0), 0);
+
+    return {
+      saldoCaixa: Number(saldoCaixa.toFixed(2)),
+      aPagar30dias: Number(aPagar30dias.toFixed(2)),
+      aPagar7dias: Number(aPagar7dias.toFixed(2)),
+      aReceber30dias: Number(aReceber30dias.toFixed(2)),
+      aReceber7dias: Number(aReceber7dias.toFixed(2)),
+      inadimplencia: Number(inadimplencia.toFixed(2)),
+    };
+  }
+
+  private extractOpenInstallments(titles: any[]) {
+    return (titles || []).flatMap((title) =>
+      (title?.parcelas || []).filter(
+        (installment) =>
+          installment?.status === 'aberto' ||
+          installment?.status === 'vencido' ||
+          installment?.status === 'parcial',
+      ),
+    );
+  }
+
+  private sumInstallmentsDueBetween(
+    installments: any[],
+    startDate: Date,
+    endDate: Date,
+  ) {
+    return (installments || [])
+      .filter((installment) => {
+        const dueDate = this.startOfDay(new Date(installment.vencimento));
+        return dueDate >= startDate && dueDate <= endDate;
+      })
+      .reduce((acc, installment) => acc + Number(installment.valor || 0), 0);
+  }
+
+  private startOfDay(date: Date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  }
+
+  private addDays(date: Date, days: number) {
+    const next = new Date(date);
+    next.setDate(next.getDate() + days);
+    return next;
+  }
+
   async listAccountsPayableInstallments(
     paginationParams: PaginationDTO,
     status?: string,
@@ -3416,6 +3505,30 @@ export class FinanceService {
     }));
   }
 
+  private async loadOpenPeriod() {
+    const openPeriod = await this.prisma.period_close.findFirst({
+      where: {
+        status: 'open',
+      },
+      orderBy: {
+        period_start: 'desc',
+      },
+      select: {
+        period_start: true,
+        period_end: true,
+      },
+    });
+
+    if (!openPeriod) {
+      return null;
+    }
+
+    return {
+      inicio: openPeriod.period_start?.toISOString?.() || null,
+      fim: openPeriod.period_end?.toISOString?.() || null,
+    };
+  }
+
   private async resolvePaymentMethodId(tx: any, paymentChannel?: string) {
     const paymentType = this.mapPaymentMethodFromPt(paymentChannel);