@hed-hog/finance 0.0.304 → 0.0.305

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

@@ -47,8 +47,12 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
+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 {
   ArrowDownRight,
   ArrowUpRight,
@@ -58,8 +62,8 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import { formatarData } from '../../_lib/formatters';
 
@@ -108,6 +112,21 @@ const importStatementSchema = z.object({
 type ImportStatementFormValues = z.infer<typeof importStatementSchema>;
 type BankAccountFormValues = z.infer<typeof bankAccountFormSchema>;
 
+type StatementBankAccountDraftPayload = {
+  values: BankAccountFormValues;
+};
+
+type StatementImportDraftPayload = {
+  defaultBankAccountId?: string;
+  values: {
+    bankAccountId: string;
+  };
+};
+
+const STATEMENT_BANK_ACCOUNT_DRAFT_STORAGE_KEY =
+  'finance-statements-bank-account-draft';
+const STATEMENT_IMPORT_DRAFT_STORAGE_KEY = 'finance-statements-import-draft';
+
 function NovaContaBancariaSheet({
   open,
   onOpenChange,
@@ -118,7 +137,8 @@ function NovaContaBancariaSheet({
   onCreated: (createdBankAccountId?: string) => Promise<void> | void;
 }) {
   const tBank = useTranslations('finance.BankAccountsPage');
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
 
   const form = useForm<BankAccountFormValues>({
     resolver: zodResolver(bankAccountFormSchema),
@@ -132,20 +152,82 @@ function NovaContaBancariaSheet({
     },
   });
 
+  const watchedBankValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<StatementBankAccountDraftPayload>({
+    storageKey: STATEMENT_BANK_ACCOUNT_DRAFT_STORAGE_KEY,
+    value: {
+      values: {
+        banco: watchedBankValues.banco ?? '',
+        agencia: watchedBankValues.agencia ?? '',
+        conta: watchedBankValues.conta ?? '',
+        tipo: watchedBankValues.tipo ?? '',
+        descricao: watchedBankValues.descricao ?? '',
+        saldoInicial: watchedBankValues.saldoInicial ?? 0,
+      },
+    },
+    hasData: Boolean(
+      (watchedBankValues.banco ?? '').trim() ||
+      (watchedBankValues.agencia ?? '').trim() ||
+      (watchedBankValues.conta ?? '').trim() ||
+      (watchedBankValues.tipo ?? '').trim() ||
+      (watchedBankValues.descricao ?? '').trim() ||
+      (watchedBankValues.saldoInicial ?? 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({
-      banco: '',
-      agencia: '',
-      conta: '',
-      tipo: '',
-      descricao: '',
-      saldoInicial: 0,
-    });
-  }, [form, open]);
+    const storedDraft = loadDraft();
+
+    form.reset(
+      storedDraft?.payload.values ?? {
+        banco: '',
+        agencia: '',
+        conta: '',
+        tipo: '',
+        descricao: '',
+        saldoInicial: 0,
+      }
+    );
+  }, [form, loadDraft, open]);
 
   const handleSubmit = async (values: BankAccountFormValues) => {
     try {
@@ -164,6 +246,7 @@ function NovaContaBancariaSheet({
 
       const createdBankAccountId = response?.data?.id;
 
+      clearDraft();
       await onCreated(
         createdBankAccountId !== undefined
           ? String(createdBankAccountId)
@@ -327,6 +410,12 @@ function NovaContaBancariaSheet({
               )}
             />
 
+            {draftStatusContent ? (
+              <p className="text-xs text-muted-foreground">
+                {draftStatusContent}
+              </p>
+            ) : null}
+
             <div className="flex justify-end gap-2 pt-2">
               <Button
                 type="button"
@@ -358,12 +447,13 @@ function ImportarExtratoSheet({
   contasBancarias: BankAccount[];
   t: ReturnType<typeof useTranslations>;
   defaultBankAccountId?: string;
-  onImported: () => Promise<any> | void;
+  onImported: () => Promise<unknown> | void;
   onBankAccountCreated: (createdBankAccountId?: string) => Promise<void> | void;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
 }) {
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
   const [internalOpen, setInternalOpen] = useState(false);
   const [openNovaContaSheet, setOpenNovaContaSheet] = useState(false);
   const isOpen = open ?? internalOpen;
@@ -381,16 +471,69 @@ function ImportarExtratoSheet({
     },
   });
 
+  const watchedImportValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<StatementImportDraftPayload>({
+    storageKey: STATEMENT_IMPORT_DRAFT_STORAGE_KEY,
+    value: {
+      defaultBankAccountId,
+      values: {
+        bankAccountId: watchedImportValues.bankAccountId ?? '',
+      },
+    },
+    hasData: Boolean(
+      (watchedImportValues.bankAccountId ?? '').trim() &&
+      (watchedImportValues.bankAccountId ?? '') !== (defaultBankAccountId ?? '')
+    ),
+    enabled: isOpen,
+  });
+
+  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 (!isOpen) {
       return;
     }
 
+    const storedDraft = loadDraft();
+
     form.reset({
-      bankAccountId: defaultBankAccountId || '',
+      bankAccountId:
+        storedDraft?.payload.values.bankAccountId || defaultBankAccountId || '',
       file: undefined as unknown as File,
     });
-  }, [defaultBankAccountId, form, isOpen]);
+  }, [defaultBankAccountId, form, isOpen, loadDraft]);
 
   const handleSubmit = async (values: ImportStatementFormValues) => {
     const formData = new FormData();
@@ -404,6 +547,7 @@ function ImportarExtratoSheet({
         data: formData,
       });
 
+      clearDraft();
       await onImported();
       showToastHandler?.('success', 'Extrato importado com sucesso');
       handleOpenChange(false);
@@ -512,6 +656,12 @@ function ImportarExtratoSheet({
               )}
             />
 
+            {draftStatusContent ? (
+              <p className="text-xs text-muted-foreground">
+                {draftStatusContent}
+              </p>
+            ) : null}
+
             <div className="flex justify-end gap-2 pt-2">
               <Button
                 type="button"
@@ -539,7 +689,9 @@ export default function ExtratosPage() {
   const searchParams = useSearchParams();
   const bankAccountIdFromUrl = searchParams.get('bank_account_id');
 
-  const [contaFilter, setContaFilter] = useState<string>('');
+  const [contaFilter, setContaFilter] = useState<string>(
+    () => bankAccountIdFromUrl || ''
+  );
   const [search, setSearch] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const [isImportSheetOpen, setIsImportSheetOpen] = useState(false);
@@ -583,50 +735,51 @@ export default function ExtratosPage() {
     router.replace(`${pathname}?${params.toString()}`);
   };
 
-  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, debouncedSearch],
+    queryKey: ['finance-statements', activeContaFilter, debouncedSearch],
     queryFn: async () => {
-      if (!contaFilter) {
+      if (!activeContaFilter) {
         return [];
       }
 
       const params = new URLSearchParams();
-      params.set('bank_account_id', contaFilter);
+      params.set('bank_account_id', activeContaFilter);
 
       const trimmedSearch = debouncedSearch.trim();
       if (trimmedSearch) {
@@ -642,7 +795,7 @@ export default function ExtratosPage() {
     },
   });
 
-  const conta = contasBancarias.find((item) => item.id === contaFilter);
+  const conta = contasBancarias.find((item) => item.id === activeContaFilter);
   const contaExtratoSelecionado = extratoSelecionado
     ? contasBancarias.find(
         (item) => item.id === extratoSelecionado.contaBancariaId
@@ -685,14 +838,14 @@ export default function ExtratosPage() {
   ];
 
   const handleExport = async () => {
-    if (!contaFilter) {
+    if (!activeContaFilter) {
       showToastHandler?.('error', 'Selecione uma conta bancária para exportar');
       return;
     }
 
     try {
       const params = new URLSearchParams();
-      params.set('bank_account_id', contaFilter);
+      params.set('bank_account_id', activeContaFilter);
 
       const trimmedSearch = search.trim();
       if (trimmedSearch) {
@@ -714,7 +867,7 @@ export default function ExtratosPage() {
           : null;
       const fileName = fileNameMatch?.[1]
         ? decodeURIComponent(fileNameMatch[1])
-        : `extrato-bancario-${contaFilter}.csv`;
+        : `extrato-bancario-${activeContaFilter}.csv`;
 
       const blob = new Blob([response.data], {
         type: 'text/csv;charset=utf-8;',
@@ -752,7 +905,7 @@ export default function ExtratosPage() {
             <ImportarExtratoSheet
               contasBancarias={contasBancarias}
               t={t}
-              defaultBankAccountId={contaFilter}
+              defaultBankAccountId={activeContaFilter}
               open={isImportSheetOpen}
               onOpenChange={setIsImportSheetOpen}
               onImported={refetchExtratos}
@@ -764,7 +917,7 @@ export default function ExtratosPage() {
 
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
         <Select
-          value={contaFilter}
+          value={activeContaFilter}
           onValueChange={(value) => {
             setContaFilter(value);
 

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

@@ -39,12 +39,16 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
+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 { ArrowRight, Plus } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import { formatarData } from '../../_lib/formatters';
 
@@ -64,6 +68,12 @@ type Transfer = {
   descricao: string;
 };
 
+type TransferDraftPayload = {
+  values: TransferFormValues;
+};
+
+const TRANSFER_FORM_DRAFT_STORAGE_KEY = 'finance-transfer-form-draft';
+
 const transferFormSchema = z
   .object({
     sourceAccountId: z.string().trim().min(1, 'Conta de origem é obrigatória'),
@@ -91,7 +101,8 @@ function NovaTransferenciaSheet({
   t: ReturnType<typeof useTranslations>;
   onCreated: () => Promise<void> | void;
 }) {
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
   const [open, setOpen] = useState(false);
 
   const form = useForm<TransferFormValues>({
@@ -105,19 +116,85 @@ function NovaTransferenciaSheet({
     },
   });
 
+  const watchedFormValues = useWatch({
+    control: form.control,
+  });
+
+  const hasDraftContent = useMemo(
+    () =>
+      Boolean(
+        (watchedFormValues.sourceAccountId ?? '').trim() ||
+        (watchedFormValues.destinationAccountId ?? '').trim() ||
+        (watchedFormValues.description ?? '').trim() ||
+        (watchedFormValues.amount ?? 0) > 0 ||
+        (watchedFormValues.date ?? '') !== new Date().toISOString().slice(0, 10)
+      ),
+    [watchedFormValues]
+  );
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<TransferDraftPayload>({
+    storageKey: TRANSFER_FORM_DRAFT_STORAGE_KEY,
+    value: {
+      values: {
+        sourceAccountId: watchedFormValues.sourceAccountId ?? '',
+        destinationAccountId: watchedFormValues.destinationAccountId ?? '',
+        date: watchedFormValues.date ?? new Date().toISOString().slice(0, 10),
+        amount: watchedFormValues.amount ?? 0,
+        description: watchedFormValues.description ?? '',
+      },
+    },
+    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]);
+
   useEffect(() => {
     if (!open) {
       return;
     }
 
-    form.reset({
-      sourceAccountId: '',
-      destinationAccountId: '',
-      date: new Date().toISOString().slice(0, 10),
-      amount: 0,
-      description: '',
-    });
-  }, [form, open]);
+    const storedDraft = loadDraft();
+
+    form.reset(
+      storedDraft?.payload.values ?? {
+        sourceAccountId: '',
+        destinationAccountId: '',
+        date: new Date().toISOString().slice(0, 10),
+        amount: 0,
+        description: '',
+      }
+    );
+  }, [form, loadDraft, open]);
 
   const handleSubmit = async (values: TransferFormValues) => {
     try {
@@ -133,6 +210,7 @@ function NovaTransferenciaSheet({
         },
       });
 
+      clearDraft();
       await onCreated();
       setOpen(false);
       showToastHandler?.('success', 'Transferência cadastrada com sucesso');
@@ -263,17 +341,24 @@ function NovaTransferenciaSheet({
               )}
             />
 
-            <div className="flex justify-end gap-2 pt-4">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setOpen(false)}
-              >
-                {t('common.cancel')}
-              </Button>
-              <Button type="submit" disabled={form.formState.isSubmitting}>
-                {t('newTransfer.submit')}
-              </Button>
+            <div className="pt-4">
+              {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={() => setOpen(false)}
+                >
+                  {t('common.cancel')}
+                </Button>
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                  {t('newTransfer.submit')}
+                </Button>
+              </div>
             </div>
           </form>
         </Form>