@hed-hog/finance 0.0.304 → 0.0.306

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

@@ -46,8 +46,12 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
 import {
   Building2,
   Eye,
@@ -64,8 +68,8 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useEffect, useRef, useState, type ChangeEvent } from 'react';
-import { useForm } from 'react-hook-form';
+import { useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import {
   FinancePageSection,
@@ -103,6 +107,16 @@ type UploadedFilePayload = {
   id?: number | string | null;
 };
 
+type BankAccountDraftPayload = {
+  mode: 'create' | 'edit';
+  accountId: string | null;
+  values: BankAccountFormValues;
+  logoFileId: number | null;
+  logoPreviewUrl: string | null;
+};
+
+const BANK_ACCOUNT_FORM_DRAFT_STORAGE_KEY = 'finance-bank-account-form-draft';
+
 function BankAccountLogo({
   account,
   icon: Icon,
@@ -144,13 +158,14 @@ function NovaContaSheet({
   onEditingAccountChange,
 }: {
   t: ReturnType<typeof useTranslations>;
-  onCreated: () => Promise<any> | void;
+  onCreated: () => Promise<unknown> | void;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   editingAccount: BankAccount | null;
   onEditingAccountChange: (account: BankAccount | null) => void;
 }) {
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
 
   const createSuccessMessage = t.has('messages.createSuccess')
     ? t('messages.createSuccess')
@@ -201,6 +216,80 @@ function NovaContaSheet({
   const [isUploadingLogo, setIsUploadingLogo] = useState(false);
   const [logoUploadProgress, setLogoUploadProgress] = useState(0);
   const logoInputRef = useRef<HTMLInputElement | null>(null);
+  const watchedFormValues = useWatch({
+    control: form.control,
+  });
+
+  const hasDraftContent = useMemo(
+    () =>
+      Boolean(
+        (watchedFormValues.banco ?? '').trim() ||
+        (watchedFormValues.agencia ?? '').trim() ||
+        (watchedFormValues.conta ?? '').trim() ||
+        (watchedFormValues.tipo ?? '').trim() ||
+        (watchedFormValues.descricao ?? '').trim() ||
+        (watchedFormValues.saldoInicial ?? 0) > 0 ||
+        logoFileId != null
+      ),
+    [watchedFormValues, logoFileId]
+  );
+
+  const draftValue = useMemo<BankAccountDraftPayload>(
+    () => ({
+      mode: editingAccount ? 'edit' : 'create',
+      accountId: editingAccount?.id ?? null,
+      values: {
+        banco: watchedFormValues.banco ?? '',
+        agencia: watchedFormValues.agencia ?? '',
+        conta: watchedFormValues.conta ?? '',
+        tipo: watchedFormValues.tipo ?? '',
+        descricao: watchedFormValues.descricao ?? '',
+        logoFileId: logoFileId ?? null,
+        saldoInicial: watchedFormValues.saldoInicial ?? 0,
+      },
+      logoFileId: logoFileId ?? null,
+      logoPreviewUrl,
+    }),
+    [editingAccount, logoFileId, logoPreviewUrl, watchedFormValues]
+  );
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<BankAccountDraftPayload>({
+    storageKey: BANK_ACCOUNT_FORM_DRAFT_STORAGE_KEY,
+    value: draftValue,
+    hasData: hasDraftContent,
+    enabled: open,
+  });
+
+  const draftStatusContent = useMemo(() => {
+    if (!hasDraft || !draftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(draftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+
+    return currentLocaleCode.startsWith('pt')
+      ? `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`
+      : `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`;
+  }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft]);
 
   const getLogoUrl = (fileId?: number | null) => {
     if (typeof fileId !== 'number' || fileId <= 0) {
@@ -342,45 +431,67 @@ function NovaContaSheet({
       return;
     }
 
+    const storedDraft = loadDraft();
+
     if (editingAccount) {
-      const currentLogoFileId = editingAccount.logoFileId ?? null;
+      const shouldRestoreDraft =
+        storedDraft?.payload.mode === 'edit' &&
+        storedDraft.payload.accountId === editingAccount.id;
+      const currentLogoFileId = shouldRestoreDraft
+        ? storedDraft.payload.logoFileId
+        : (editingAccount.logoFileId ?? null);
 
       setLogoFileId(currentLogoFileId);
-      setPersistedLogoFileId(currentLogoFileId);
+      setPersistedLogoFileId(editingAccount.logoFileId ?? null);
       setLogoPreviewUrl(
-        currentLogoFileId
-          ? `${getLogoUrl(currentLogoFileId)}?ts=${Date.now()}`
-          : null
+        shouldRestoreDraft
+          ? storedDraft.payload.logoPreviewUrl
+          : currentLogoFileId
+            ? `${getLogoUrl(currentLogoFileId)}?ts=${Date.now()}`
+            : null
       );
       setLogoUploadProgress(0);
 
-      form.reset({
-        banco: editingAccount.banco,
-        agencia: editingAccount.agencia === '-' ? '' : editingAccount.agencia,
-        conta: editingAccount.conta === '-' ? '' : editingAccount.conta,
-        tipo: editingAccount.tipo,
-        descricao: editingAccount.descricao,
-        logoFileId: currentLogoFileId,
-        saldoInicial: editingAccount.saldoAtual,
-      });
+      form.reset(
+        shouldRestoreDraft
+          ? storedDraft.payload.values
+          : {
+              banco: editingAccount.banco,
+              agencia:
+                editingAccount.agencia === '-' ? '' : editingAccount.agencia,
+              conta: editingAccount.conta === '-' ? '' : editingAccount.conta,
+              tipo: editingAccount.tipo,
+              descricao: editingAccount.descricao,
+              logoFileId: currentLogoFileId,
+              saldoInicial: editingAccount.saldoAtual,
+            }
+      );
       return;
     }
 
-    setLogoFileId(null);
+    const shouldRestoreDraft = storedDraft?.payload.mode === 'create';
+
+    setLogoFileId(shouldRestoreDraft ? storedDraft.payload.logoFileId : null);
     setPersistedLogoFileId(null);
-    setLogoPreviewUrl(null);
+    setLogoPreviewUrl(
+      shouldRestoreDraft ? storedDraft.payload.logoPreviewUrl : null
+    );
     setLogoUploadProgress(0);
 
-    form.reset({
-      banco: '',
-      agencia: '',
-      conta: '',
-      tipo: '',
-      descricao: '',
-      logoFileId: null,
-      saldoInicial: 0,
-    });
-  }, [editingAccount, form, open]);
+    form.reset(
+      shouldRestoreDraft
+        ? storedDraft.payload.values
+        : {
+            banco: '',
+            agencia: '',
+            conta: '',
+            tipo: '',
+            descricao: '',
+            logoFileId: null,
+            saldoInicial: 0,
+          }
+    );
+  }, [editingAccount, form, loadDraft, open]);
 
   const handleSubmit = async (values: BankAccountFormValues) => {
     const nextLogoFileId = values.logoFileId ?? null;
@@ -425,6 +536,7 @@ function NovaContaSheet({
         await deleteFileById(previousPersistedLogoId);
       }
 
+      clearDraft();
       setPersistedLogoFileId(nextLogoFileId);
       setLogoFileId(nextLogoFileId);
       setLogoPreviewUrl(
@@ -455,7 +567,9 @@ function NovaContaSheet({
   };
 
   const handleCancel = () => {
-    void cleanupUnsavedLogo();
+    if (!hasDraftContent) {
+      void cleanupUnsavedLogo();
+    }
     form.reset();
     onEditingAccountChange(null);
     onOpenChange(false);
@@ -465,7 +579,7 @@ function NovaContaSheet({
     <Sheet
       open={open}
       onOpenChange={(nextOpen) => {
-        if (!nextOpen) {
+        if (!nextOpen && !hasDraftContent) {
           void cleanupUnsavedLogo();
         }
 
@@ -696,16 +810,23 @@ function NovaContaSheet({
               </FinanceSheetSection>
             </FinanceSheetBody>
 
-            <div className="flex justify-end gap-2 border-t px-4 py-4 sm:px-6">
-              <Button type="button" variant="outline" onClick={handleCancel}>
-                {t('common.cancel')}
-              </Button>
-              <Button
-                type="submit"
-                disabled={form.formState.isSubmitting || isUploadingLogo}
-              >
-                {t('common.save')}
-              </Button>
+            <div className="border-t px-4 py-4 sm:px-6">
+              {draftStatusContent ? (
+                <p className="mb-3 text-xs text-muted-foreground">
+                  {draftStatusContent}
+                </p>
+              ) : null}
+              <div className="flex justify-end gap-2">
+                <Button type="button" variant="outline" onClick={handleCancel}>
+                  {t('common.cancel')}
+                </Button>
+                <Button
+                  type="submit"
+                  disabled={form.formState.isSubmitting || isUploadingLogo}
+                >
+                  {t('common.save')}
+                </Button>
+              </div>
             </div>
           </form>
         </Form>

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

@@ -15,7 +15,6 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
   Form,
@@ -27,6 +26,7 @@ import {
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
 import { InputMoney } from '@/components/ui/input-money';
+import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Money } from '@/components/ui/money';
 import {
   Select,
@@ -43,13 +43,17 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { StatusBadge } from '@/components/ui/status-badge';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
 import { Check, DollarSign, Link2, RefreshCw, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import { formatarData, formatarMoeda } from '../../_lib/formatters';
 
@@ -119,6 +123,14 @@ const ajusteSchema = z.object({
 
 type AjusteFormValues = z.infer<typeof ajusteSchema>;
 
+type ReconciliationAdjustmentDraftPayload = {
+  bankAccountId: string;
+  values: AjusteFormValues;
+};
+
+const RECONCILIATION_ADJUSTMENT_DRAFT_STORAGE_KEY =
+  'finance-bank-reconciliation-adjustment-draft';
+
 function CriarAjusteSheet({
   t,
   contaFilter,
@@ -128,7 +140,8 @@ function CriarAjusteSheet({
   contaFilter: string;
   onCreated: () => Promise<void> | void;
 }) {
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
   const [open, setOpen] = useState(false);
 
   const form = useForm<AjusteFormValues>({
@@ -140,17 +153,76 @@ function CriarAjusteSheet({
     },
   });
 
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<ReconciliationAdjustmentDraftPayload>({
+    storageKey: RECONCILIATION_ADJUSTMENT_DRAFT_STORAGE_KEY,
+    value: {
+      bankAccountId: contaFilter,
+      values: {
+        type: watchedValues.type ?? '',
+        value: watchedValues.value ?? 0,
+        description: watchedValues.description ?? '',
+      },
+    },
+    hasData: Boolean(
+      (watchedValues.type ?? '').trim() ||
+      (watchedValues.description ?? '').trim() ||
+      (watchedValues.value ?? 0) > 0
+    ),
+    enabled: open,
+  });
+
+  const draftStatusContent = useMemo(() => {
+    if (!hasDraft || !draftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(draftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+
+    return currentLocaleCode.startsWith('pt')
+      ? `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`
+      : `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`;
+  }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft]);
+
   useEffect(() => {
     if (!open) {
       return;
     }
 
-    form.reset({
-      type: '',
-      value: 0,
-      description: '',
-    });
-  }, [form, open]);
+    const storedDraft = loadDraft();
+
+    form.reset(
+      storedDraft?.payload.bankAccountId === contaFilter
+        ? storedDraft.payload.values
+        : {
+            type: '',
+            value: 0,
+            description: '',
+          }
+    );
+  }, [contaFilter, form, loadDraft, open]);
 
   const handleSubmit = async (values: AjusteFormValues) => {
     if (!contaFilter) {
@@ -170,6 +242,7 @@ function CriarAjusteSheet({
         },
       });
 
+      clearDraft();
       await onCreated();
       showToastHandler?.('success', 'Ajuste criado com sucesso');
       setOpen(false);
@@ -267,6 +340,12 @@ function CriarAjusteSheet({
               )}
             />
 
+            {draftStatusContent ? (
+              <p className="text-xs text-muted-foreground">
+                {draftStatusContent}
+              </p>
+            ) : null}
+
             <div className="flex justify-end gap-2 pt-4">
               <Button
                 type="button"
@@ -294,7 +373,9 @@ export default function ConciliacaoPage() {
   const searchParams = useSearchParams();
   const bankAccountIdFromUrl = searchParams.get('bank_account_id');
 
-  const [contaFilter, setContaFilter] = useState<string>('');
+  const [contaFilter, setContaFilter] = useState<string>(
+    () => bankAccountIdFromUrl || ''
+  );
   const [selectedExtrato, setSelectedExtrato] = useState<string | null>(null);
   const [selectedTitulo, setSelectedTitulo] = useState<string | null>(null);
   const [reconciliationToUndo, setReconciliationToUndo] = useState<
@@ -313,50 +394,50 @@ export default function ConciliacaoPage() {
     },
   });
 
-  useEffect(() => {
+  const activeContaFilter = useMemo(() => {
     const firstAccount = contasBancarias[0];
 
     if (!firstAccount) {
-      return;
+      return '';
     }
 
-    const hasAccountFromUrl =
-      !!bankAccountIdFromUrl &&
-      contasBancarias.some((account) => account.id === bankAccountIdFromUrl);
-
-    const nextAccountId = hasAccountFromUrl
-      ? (bankAccountIdFromUrl as string)
-      : firstAccount.id;
+    if (
+      contaFilter &&
+      contasBancarias.some((account) => account.id === contaFilter)
+    ) {
+      return contaFilter;
+    }
 
-    if (contaFilter !== nextAccountId) {
-      setContaFilter(nextAccountId);
+    if (
+      bankAccountIdFromUrl &&
+      contasBancarias.some((account) => account.id === bankAccountIdFromUrl)
+    ) {
+      return bankAccountIdFromUrl;
     }
 
-    if (bankAccountIdFromUrl !== nextAccountId) {
-      const params = new URLSearchParams(searchParams.toString());
-      params.set('bank_account_id', nextAccountId);
-      router.replace(`${pathname}?${params.toString()}`);
+    return firstAccount.id;
+  }, [bankAccountIdFromUrl, contaFilter, contasBancarias]);
+
+  useEffect(() => {
+    if (!activeContaFilter || bankAccountIdFromUrl === activeContaFilter) {
+      return;
     }
-  }, [
-    bankAccountIdFromUrl,
-    contaFilter,
-    contasBancarias,
-    pathname,
-    router,
-    searchParams,
-  ]);
 
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('bank_account_id', activeContaFilter);
+    router.replace(`${pathname}?${params.toString()}`);
+  }, [activeContaFilter, bankAccountIdFromUrl, pathname, router, searchParams]);
   const { data: extratos = [], refetch: refetchExtratos } = useQuery<
     Statement[]
   >({
-    queryKey: ['finance-statements', contaFilter],
+    queryKey: ['finance-statements', activeContaFilter],
     queryFn: async () => {
-      if (!contaFilter) {
+      if (!activeContaFilter) {
         return [];
       }
 
       const response = await request({
-        url: `/finance/statements?bank_account_id=${contaFilter}`,
+        url: `/finance/statements?bank_account_id=${activeContaFilter}`,
         method: 'GET',
       });
 
@@ -366,9 +447,9 @@ export default function ConciliacaoPage() {
 
   const { data: reconciliationSummary, refetch: refetchReconciliationSummary } =
     useQuery<BankReconciliationSummary>({
-      queryKey: ['finance-bank-reconciliation-summary', contaFilter],
+      queryKey: ['finance-bank-reconciliation-summary', activeContaFilter],
       queryFn: async () => {
-        if (!contaFilter) {
+        if (!activeContaFilter) {
           return {
             discrepancies: 0,
             difference: 0,
@@ -376,7 +457,7 @@ export default function ConciliacaoPage() {
         }
 
         const response = await request<BankReconciliationSummary>({
-          url: `/finance/bank-reconciliation/summary?bank_account_id=${contaFilter}`,
+          url: `/finance/bank-reconciliation/summary?bank_account_id=${activeContaFilter}`,
           method: 'GET',
         });
 
@@ -427,10 +508,10 @@ export default function ConciliacaoPage() {
   );
 
   const extratosFiltered = extratosPendentes.filter(
-    (e) => e.contaBancariaId === contaFilter
+    (e) => e.contaBancariaId === activeContaFilter
   );
   const extratosConciliadosFiltered = extratosConciliados.filter(
-    (e) => e.contaBancariaId === contaFilter
+    (e) => e.contaBancariaId === activeContaFilter
   );
 
   const titulosAbertos = useMemo<OpenTitleItem[]>(() => {
@@ -480,24 +561,21 @@ export default function ConciliacaoPage() {
     (titulo) => titulo.id === selectedTitulo
   );
 
-  const titulosCompativeis = useMemo(() => {
-    if (!selectedExtratoItem) {
-      return titulosAbertos;
-    }
-
-    return titulosAbertos.filter((titulo) =>
-      selectedExtratoItem.tipo === 'saida'
-        ? titulo.tipo === 'pagar'
-        : titulo.tipo === 'receber'
-    );
-  }, [selectedExtratoItem, titulosAbertos]);
+  const titulosCompativeis = !selectedExtratoItem
+    ? titulosAbertos
+    : titulosAbertos.filter((titulo) =>
+        selectedExtratoItem.tipo === 'saida'
+          ? titulo.tipo === 'pagar'
+          : titulo.tipo === 'receber'
+      );
 
   const totalConciliado = extratos.filter(
     (e) =>
-      e.contaBancariaId === contaFilter && e.statusConciliacao === 'conciliado'
+      e.contaBancariaId === activeContaFilter &&
+      e.statusConciliacao === 'conciliado'
   ).length;
   const totalExtratoConta = extratos.filter(
-    (e) => e.contaBancariaId === contaFilter
+    (e) => e.contaBancariaId === activeContaFilter
   ).length;
   const percentualConciliado =
     totalExtratoConta > 0
@@ -557,7 +635,7 @@ export default function ConciliacaoPage() {
   };
 
   const handleReconcile = async () => {
-    if (!selectedExtratoItem || !selectedTituloItem || !contaFilter) {
+    if (!selectedExtratoItem || !selectedTituloItem || !activeContaFilter) {
       return;
     }
 
@@ -618,7 +696,7 @@ export default function ConciliacaoPage() {
 
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <Select
-          value={contaFilter}
+          value={activeContaFilter}
           onValueChange={(value) => {
             setContaFilter(value);
             setSelectedExtrato(null);
@@ -644,7 +722,7 @@ export default function ConciliacaoPage() {
         <div className="flex gap-2">
           <CriarAjusteSheet
             t={t}
-            contaFilter={contaFilter}
+            contaFilter={activeContaFilter}
             onCreated={handleRefreshData}
           />
           <Button