@hed-hog/finance 0.0.279 → 0.0.286

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { Page, PageHeader } from '@/components/entity-list';
+import { EmptyState, Page, PageHeader } from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
 import {
   Card,
@@ -357,16 +357,27 @@ function ImportarExtratoSheet({
   defaultBankAccountId,
   onImported,
   onBankAccountCreated,
+  open,
+  onOpenChange,
 }: {
   contasBancarias: BankAccount[];
   t: ReturnType<typeof useTranslations>;
   defaultBankAccountId?: string;
   onImported: () => Promise<any> | void;
   onBankAccountCreated: (createdBankAccountId?: string) => Promise<void> | void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }) {
   const { request, showToastHandler } = useApp();
-  const [open, setOpen] = useState(false);
+  const [internalOpen, setInternalOpen] = useState(false);
   const [openNovaContaSheet, setOpenNovaContaSheet] = useState(false);
+  const isOpen = open ?? internalOpen;
+  const handleOpenChange = (nextOpen: boolean) => {
+    onOpenChange?.(nextOpen);
+    if (open === undefined) {
+      setInternalOpen(nextOpen);
+    }
+  };
 
   const form = useForm<ImportStatementFormValues>({
     resolver: zodResolver(importStatementSchema),
@@ -376,7 +387,7 @@ function ImportarExtratoSheet({
   });
 
   useEffect(() => {
-    if (!open) {
+    if (!isOpen) {
       return;
     }
 
@@ -384,7 +395,7 @@ function ImportarExtratoSheet({
       bankAccountId: defaultBankAccountId || '',
       file: undefined as unknown as File,
     });
-  }, [defaultBankAccountId, form, open]);
+  }, [defaultBankAccountId, form, isOpen]);
 
   const handleSubmit = async (values: ImportStatementFormValues) => {
     const formData = new FormData();
@@ -400,15 +411,15 @@ function ImportarExtratoSheet({
 
       await onImported();
       showToastHandler?.('success', 'Extrato importado com sucesso');
-      setOpen(false);
+      handleOpenChange(false);
     } catch {
       showToastHandler?.('error', 'Não foi possível importar o extrato');
     }
   };
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <Button onClick={() => setOpen(true)}>
+    <Sheet open={isOpen} onOpenChange={handleOpenChange}>
+      <Button onClick={() => handleOpenChange(true)}>
         <Upload className="mr-2 h-4 w-4" />
         {t('importDialog.action')}
       </Button>
@@ -510,7 +521,7 @@ function ImportarExtratoSheet({
               <Button
                 type="button"
                 variant="outline"
-                onClick={() => setOpen(false)}
+                onClick={() => handleOpenChange(false)}
               >
                 {t('common.cancel')}
               </Button>
@@ -536,6 +547,7 @@ export default function ExtratosPage() {
   const [contaFilter, setContaFilter] = useState<string>('');
   const [search, setSearch] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
+  const [isImportSheetOpen, setIsImportSheetOpen] = useState(false);
   const [extratoSelecionado, setExtratoSelecionado] =
     useState<Statement | null>(null);
 
@@ -717,6 +729,8 @@ export default function ExtratosPage() {
               contasBancarias={contasBancarias}
               t={t}
               defaultBankAccountId={contaFilter}
+              open={isImportSheetOpen}
+              onOpenChange={setIsImportSheetOpen}
               onImported={refetchExtratos}
               onBankAccountCreated={handleBankAccountCreated}
             />
@@ -797,89 +811,99 @@ export default function ExtratosPage() {
         </Card>
       </div>
 
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('table.title')}</CardTitle>
-          <CardDescription>
-            {t('table.foundTransactions', { count: extratos.length })}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <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>
-                {extratos.map((extrato) => (
-                  <TableRow
-                    key={extrato.id}
-                    className="cursor-pointer"
-                    onClick={() => setExtratoSelecionado(extrato)}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter' || event.key === ' ') {
-                        event.preventDefault();
-                        setExtratoSelecionado(extrato);
-                      }
-                    }}
-                    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'
+      {extratos.length > 0 ? (
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('table.title')}</CardTitle>
+            <CardDescription>
+              {t('table.foundTransactions', { count: extratos.length })}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <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>
+                  {extratos.map((extrato) => (
+                    <TableRow
+                      key={extrato.id}
+                      className="cursor-pointer"
+                      onClick={() => setExtratoSelecionado(extrato)}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          event.preventDefault();
+                          setExtratoSelecionado(extrato);
                         }
-                      >
-                        <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')}
+                      }}
+                      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>
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <StatusBadge
-                        status={extrato.statusConciliacao}
-                        type="conciliacao"
-                      />
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-        </CardContent>
-      </Card>
+                      </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>
+      ) : (
+        <EmptyState
+          icon={<Upload className="h-12 w-12" />}
+          title={t('empty.title')}
+          description={t('empty.description')}
+          actionLabel={t('importDialog.action')}
+          onAction={() => setIsImportSheetOpen(true)}
+        />
+      )}
 
       <Dialog
         open={!!extratoSelecionado}

package/hedhog/frontend/app/reports/_lib/use-finance-reports.ts.ejs

@@ -0,0 +1,238 @@
+'use client';
+
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+
+export type GroupBy = 'day' | 'week' | 'month' | 'year';
+
+type QueryValue = string | number | undefined | null;
+
+export type OverviewResultsRow = {
+  period: string;
+  faturamento: number;
+  despesasEmprestimos: number;
+  diferenca: number;
+  aporteInvestidor: number;
+  emprestimoBanco: number;
+  despesas: number;
+};
+
+export type OverviewResultsReportData = {
+  rows: OverviewResultsRow[];
+  totals: {
+    faturamento: number;
+    despesasEmprestimos: number;
+    diferenca: number;
+    aporteInvestidor: number;
+    emprestimoBanco: number;
+    despesas: number;
+    margem: number;
+  };
+};
+
+export type TopCustomerItem = {
+  customer: string;
+  value: number;
+};
+
+export type TopCustomersReportData = {
+  total: number;
+  top5Percent: number;
+  topCustomers: TopCustomerItem[];
+  pieData: TopCustomerItem[];
+  groupedPeriods: Array<{ period: string; value: number }>;
+  leader: TopCustomerItem | null;
+};
+
+export type TopExpenseItem = {
+  category: string;
+  costCenter: string;
+  label: string;
+  value: number;
+};
+
+export type TopOperationalExpensesReportData = {
+  total: number;
+  average: number;
+  topExpenses: TopExpenseItem[];
+  pieData: Array<{ name: string; value: number }>;
+  groupedPeriods: Array<{ period: string; value: number }>;
+  highest: TopExpenseItem | null;
+};
+
+const EMPTY_OVERVIEW_RESULTS: OverviewResultsReportData = {
+  rows: [],
+  totals: {
+    faturamento: 0,
+    despesasEmprestimos: 0,
+    diferenca: 0,
+    aporteInvestidor: 0,
+    emprestimoBanco: 0,
+    despesas: 0,
+    margem: 0,
+  },
+};
+
+const EMPTY_TOP_CUSTOMERS: TopCustomersReportData = {
+  total: 0,
+  top5Percent: 0,
+  topCustomers: [],
+  pieData: [],
+  groupedPeriods: [],
+  leader: null,
+};
+
+const EMPTY_TOP_EXPENSES: TopOperationalExpensesReportData = {
+  total: 0,
+  average: 0,
+  topExpenses: [],
+  pieData: [],
+  groupedPeriods: [],
+  highest: null,
+};
+
+function buildQuery(params: Record<string, QueryValue>) {
+  const query = new URLSearchParams();
+
+  Object.entries(params).forEach(([key, value]) => {
+    if (value === undefined || value === null || value === '') {
+      return;
+    }
+
+    query.set(key, String(value));
+  });
+
+  return query.toString();
+}
+
+function toDate(value: string) {
+  return new Date(`${value}T00:00:00`);
+}
+
+function startOfWeek(date: Date) {
+  const current = new Date(date);
+  const day = current.getDay();
+  const diff = day === 0 ? -6 : 1 - day;
+
+  current.setDate(current.getDate() + diff);
+  current.setHours(0, 0, 0, 0);
+
+  return current;
+}
+
+export function getDefaultDateRange() {
+  return {
+    from: '2021-01-01',
+    to: '2026-12-31',
+  };
+}
+
+export function formatReportBucketLabel(
+  bucket: string,
+  groupBy: GroupBy,
+  locale: string
+) {
+  const dateFormatter = new Intl.DateTimeFormat(locale);
+
+  if (groupBy === 'day') {
+    return dateFormatter.format(toDate(bucket));
+  }
+
+  if (groupBy === 'week') {
+    const [year, week] = bucket.split('-W');
+
+    return `W${Number(week)}/${year}`;
+  }
+
+  if (groupBy === 'month') {
+    const [year, month] = bucket.split('-');
+    const monthDate = new Date(Number(year), Number(month) - 1, 1);
+
+    return new Intl.DateTimeFormat(locale, {
+      month: 'short',
+      year: 'numeric',
+    }).format(monthDate);
+  }
+
+  return bucket;
+}
+
+function useFinanceReportQuery<T>(
+  queryKey: string,
+  path: string,
+  params: Record<string, QueryValue>,
+  initialData: T
+) {
+  const { request } = useApp();
+  const querySuffix = buildQuery(params);
+  const url = querySuffix ? `${path}?${querySuffix}` : path;
+
+  const query = useQuery<T>({
+    queryKey: [queryKey, querySuffix || 'default'],
+    staleTime: 0,
+    refetchOnMount: 'always',
+    queryFn: async () => {
+      try {
+        const response = await request({
+          url,
+          method: 'GET',
+        });
+
+        return {
+          ...initialData,
+          ...(response?.data || {}),
+        } as T;
+      } catch {
+        return initialData;
+      }
+    },
+    initialData,
+  });
+
+  return {
+    ...query,
+    data: query.data ?? initialData,
+  };
+}
+
+export function useOverviewResultsReport(filters: {
+  from: string;
+  to: string;
+  groupBy: GroupBy;
+}) {
+  return useFinanceReportQuery<OverviewResultsReportData>(
+    'finance-overview-results-report',
+    '/finance/reports/overview-results',
+    filters,
+    EMPTY_OVERVIEW_RESULTS
+  );
+}
+
+export function useTopCustomersReport(filters: {
+  from: string;
+  to: string;
+  groupBy: GroupBy;
+  search?: string;
+  topN?: number;
+}) {
+  return useFinanceReportQuery<TopCustomersReportData>(
+    'finance-top-customers-report',
+    '/finance/reports/top-customers',
+    filters,
+    EMPTY_TOP_CUSTOMERS
+  );
+}
+
+export function useTopOperationalExpensesReport(filters: {
+  from: string;
+  to: string;
+  groupBy: GroupBy;
+  search?: string;
+  topN?: number;
+}) {
+  return useFinanceReportQuery<TopOperationalExpensesReportData>(
+    'finance-top-operational-expenses-report',
+    '/finance/reports/top-operational-expenses',
+    filters,
+    EMPTY_TOP_EXPENSES
+  );
+}