@hed-hog/finance 0.0.303 → 0.0.305

package/hedhog/frontend/app/accounts-receivable/collections-default/page.tsx.ejs

@@ -37,12 +37,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 { AlertTriangle, FileText, Send } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useEffect, useMemo, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import {
   Bar,
   BarChart,
@@ -94,6 +98,21 @@ const registerAgreementSchema = z.object({
   notes: z.string().optional(),
 });
 
+type SendCollectionDraftPayload = {
+  clienteId: string;
+  values: z.infer<typeof sendCollectionSchema>;
+};
+
+type RegisterAgreementDraftPayload = {
+  clienteId: string;
+  values: z.infer<typeof registerAgreementSchema>;
+};
+
+const SEND_COLLECTION_DRAFT_STORAGE_KEY =
+  'finance-collections-default-send-draft';
+const REGISTER_AGREEMENT_DRAFT_STORAGE_KEY =
+  'finance-collections-default-agreement-draft';
+
 function HistoricoContatosSheet({
   cliente,
   historicoContatos,
@@ -159,7 +178,8 @@ function EnviarCobrancaDialog({
   onSuccess: () => Promise<unknown>;
   t: ReturnType<typeof useTranslations>;
 }) {
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
   const [open, setOpen] = useState(false);
 
   const form = useForm<z.infer<typeof sendCollectionSchema>>({
@@ -169,6 +189,70 @@ function EnviarCobrancaDialog({
     },
   });
 
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<SendCollectionDraftPayload>({
+    storageKey: SEND_COLLECTION_DRAFT_STORAGE_KEY,
+    value: {
+      clienteId,
+      values: {
+        message: watchedValues.message ?? t('send.defaultMessage'),
+      },
+    },
+    hasData:
+      (watchedValues.message ?? '').trim() !== t('send.defaultMessage').trim(),
+    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;
+    }
+
+    const storedDraft = loadDraft();
+
+    form.reset(
+      storedDraft?.payload.clienteId === clienteId
+        ? storedDraft.payload.values
+        : {
+            message: t('send.defaultMessage'),
+          }
+    );
+  }, [clienteId, form, loadDraft, open, t]);
+
   const onSubmit = async (values: z.infer<typeof sendCollectionSchema>) => {
     try {
       await request({
@@ -179,6 +263,7 @@ function EnviarCobrancaDialog({
         },
       });
 
+      clearDraft();
       await onSuccess();
       showToastHandler?.('success', t('send.submit'));
       setOpen(false);
@@ -240,6 +325,11 @@ function EnviarCobrancaDialog({
             </FinanceSheetBody>
 
             <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+              {draftStatusContent ? (
+                <p className="mb-2 text-xs text-muted-foreground">
+                  {draftStatusContent}
+                </p>
+              ) : null}
               <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                 <Button
                   type="button"
@@ -271,7 +361,8 @@ function RegistrarAcordoDialog({
   onSuccess: () => Promise<unknown>;
   t: ReturnType<typeof useTranslations>;
 }) {
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
   const [open, setOpen] = useState(false);
 
   const form = useForm<z.infer<typeof registerAgreementSchema>>({
@@ -284,6 +375,80 @@ function RegistrarAcordoDialog({
     },
   });
 
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<RegisterAgreementDraftPayload>({
+    storageKey: REGISTER_AGREEMENT_DRAFT_STORAGE_KEY,
+    value: {
+      clienteId,
+      values: {
+        amount: watchedValues.amount ?? 0,
+        installments: watchedValues.installments ?? 1,
+        first_due_date: watchedValues.first_due_date ?? '',
+        notes: watchedValues.notes ?? '',
+      },
+    },
+    hasData: Boolean(
+      (watchedValues.amount ?? 0) > 0 ||
+      (watchedValues.installments ?? 1) !== 1 ||
+      (watchedValues.first_due_date ?? '').trim() ||
+      (watchedValues.notes ?? '').trim()
+    ),
+    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;
+    }
+
+    const storedDraft = loadDraft();
+
+    form.reset(
+      storedDraft?.payload.clienteId === clienteId
+        ? storedDraft.payload.values
+        : {
+            amount: 0,
+            installments: 1,
+            first_due_date: '',
+            notes: '',
+          }
+    );
+  }, [clienteId, form, loadDraft, open]);
+
   const onSubmit = async (values: z.infer<typeof registerAgreementSchema>) => {
     try {
       await request({
@@ -292,6 +457,7 @@ function RegistrarAcordoDialog({
         data: values,
       });
 
+      clearDraft();
       await onSuccess();
       showToastHandler?.('success', t('agreement.submit'));
       setOpen(false);
@@ -410,6 +576,11 @@ function RegistrarAcordoDialog({
             </FinanceSheetBody>
 
             <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+              {draftStatusContent ? (
+                <p className="mb-2 text-xs text-muted-foreground">
+                  {draftStatusContent}
+                </p>
+              ) : null}
               <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                 <Button
                   type="button"

package/hedhog/frontend/app/accounts-receivable/installments/page.tsx.ejs

@@ -71,8 +71,12 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
+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 {
   AlertTriangle,
   Download,
@@ -92,7 +96,7 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useFieldArray, useForm } from 'react-hook-form';
+import { useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import { formatarData } from '../../_lib/formatters';
 import { useFinanceData } from '../../_lib/use-finance-data';
@@ -250,6 +254,21 @@ const getNewTitleFormSchema = (t: ReturnType<typeof useTranslations>) =>
 
 type NewTitleFormValues = z.infer<ReturnType<typeof getNewTitleFormSchema>>;
 
+type ReceivableInstallmentDraftPayload = {
+  mode: 'create' | 'edit';
+  titleId: string | null;
+  values: NewTitleFormValues;
+  uploadedFileId: number | null;
+  uploadedFileName: string;
+  isInstallmentsEdited: boolean;
+  autoRedistributeInstallments: boolean;
+};
+
+const RECEIVABLE_NEW_TITLE_DRAFT_STORAGE_KEY =
+  'finance-accounts-receivable-installments-new-draft';
+const RECEIVABLE_EDIT_TITLE_DRAFT_STORAGE_KEY =
+  'finance-accounts-receivable-installments-edit-draft';
+
 function NovoTituloSheet({
   categorias,
   centrosCusto,
@@ -263,7 +282,8 @@ function NovoTituloSheet({
   onCreated: () => Promise<any> | void;
   onOptionsUpdated?: () => Promise<any> | void;
 }) {
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
   const [open, setOpen] = useState(false);
   const [uploadedFileId, setUploadedFileId] = useState<number | null>(null);
   const [uploadedFileName, setUploadedFileName] = useState('');
@@ -325,13 +345,141 @@ function NovoTituloSheet({
       name: 'installments',
     });
 
+  const watchedFormValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<ReceivableInstallmentDraftPayload>({
+    storageKey: RECEIVABLE_NEW_TITLE_DRAFT_STORAGE_KEY,
+    value: {
+      mode: 'create',
+      titleId: null,
+      values: {
+        documento: watchedFormValues.documento ?? '',
+        clienteId: watchedFormValues.clienteId ?? '',
+        competencia: watchedFormValues.competencia ?? '',
+        vencimento: watchedFormValues.vencimento ?? '',
+        valor: watchedFormValues.valor ?? 0,
+        installmentsCount: watchedFormValues.installmentsCount ?? 1,
+        installments: watchedFormValues.installments?.map((installment) => ({
+          dueDate: installment?.dueDate ?? '',
+          amount: Number(installment?.amount ?? 0),
+        })) ?? [{ dueDate: '', amount: 0 }],
+        categoriaId: watchedFormValues.categoriaId ?? '',
+        centroCustoId: watchedFormValues.centroCustoId ?? '',
+        canal: watchedFormValues.canal ?? '',
+        descricao: watchedFormValues.descricao ?? '',
+      },
+      uploadedFileId,
+      uploadedFileName,
+      isInstallmentsEdited,
+      autoRedistributeInstallments,
+    },
+    hasData: Boolean(
+      (watchedFormValues.documento ?? '').trim() ||
+      (watchedFormValues.clienteId ?? '').trim() ||
+      (watchedFormValues.competencia ?? '').trim() ||
+      (watchedFormValues.vencimento ?? '').trim() ||
+      (watchedFormValues.categoriaId ?? '').trim() ||
+      (watchedFormValues.centroCustoId ?? '').trim() ||
+      (watchedFormValues.canal ?? '').trim() ||
+      (watchedFormValues.descricao ?? '').trim() ||
+      (watchedFormValues.valor ?? 0) > 0 ||
+      (watchedFormValues.installmentsCount ?? 1) !== 1 ||
+      (watchedFormValues.installments ?? []).some(
+        (installment) =>
+          (installment?.dueDate ?? '').trim() ||
+          Number(installment?.amount ?? 0) > 0
+      ) ||
+      uploadedFileId != null ||
+      uploadedFileName.trim()
+    ),
+    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 watchedInstallmentsCount = form.watch('installmentsCount');
   const watchedTotalValue = form.watch('valor');
   const watchedDueDate = form.watch('vencimento');
   const watchedInstallments = form.watch('installments');
 
   useEffect(() => {
-    if (isInstallmentsEdited) {
+    if (!open) {
+      return;
+    }
+
+    const storedDraft = loadDraft();
+
+    if (storedDraft?.payload.mode === 'create') {
+      form.reset(storedDraft.payload.values);
+      setUploadedFileId(storedDraft.payload.uploadedFileId ?? null);
+      setUploadedFileName(storedDraft.payload.uploadedFileName ?? '');
+      setExtractionConfidence(null);
+      setExtractionWarnings([]);
+      setUploadProgress(storedDraft.payload.uploadedFileId ? 100 : 0);
+      setIsInstallmentsEdited(
+        storedDraft.payload.isInstallmentsEdited ?? false
+      );
+      setAutoRedistributeInstallments(
+        storedDraft.payload.autoRedistributeInstallments ?? true
+      );
+      return;
+    }
+
+    form.reset({
+      documento: '',
+      clienteId: '',
+      competencia: '',
+      vencimento: '',
+      valor: 0,
+      installmentsCount: 1,
+      installments: [{ dueDate: '', amount: 0 }],
+      categoriaId: '',
+      centroCustoId: '',
+      canal: '',
+      descricao: '',
+    });
+    setUploadedFileId(null);
+    setUploadedFileName('');
+    setExtractionConfidence(null);
+    setExtractionWarnings([]);
+    setUploadProgress(0);
+    setIsInstallmentsEdited(false);
+    setAutoRedistributeInstallments(true);
+  }, [form, loadDraft, open]);
+
+  useEffect(() => {
+    if (isInstallmentsEdited || !open) {
       return;
     }
 
@@ -344,6 +492,7 @@ function NovoTituloSheet({
     );
   }, [
     isInstallmentsEdited,
+    open,
     replaceInstallments,
     watchedDueDate,
     watchedInstallmentsCount,
@@ -444,6 +593,7 @@ function NovoTituloSheet({
         },
       });
 
+      clearDraft();
       await onCreated();
       form.reset();
       setUploadedFileId(null);
@@ -460,14 +610,6 @@ function NovoTituloSheet({
   };
 
   const handleCancel = () => {
-    form.reset();
-    setUploadedFileId(null);
-    setUploadedFileName('');
-    setExtractionConfidence(null);
-    setExtractionWarnings([]);
-    setUploadProgress(0);
-    setIsInstallmentsEdited(false);
-    setAutoRedistributeInstallments(true);
     setOpen(false);
   };
 
@@ -1130,12 +1272,13 @@ function NovoTituloSheet({
             </FinanceSheetBody>
 
             <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+              {draftStatusContent ? (
+                <p className="mb-2 text-xs text-muted-foreground">
+                  {draftStatusContent}
+                </p>
+              ) : null}
               <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-                <Button
-                  type="button"
-                  variant="outline"
-                  onClick={() => setOpen(false)}
-                >
+                <Button type="button" variant="outline" onClick={handleCancel}>
                   {t('common.cancel')}
                 </Button>
                 <Button
@@ -1183,7 +1326,8 @@ function EditarTituloSheet({
   onUpdated: () => Promise<any> | void;
   onOptionsUpdated?: () => Promise<any> | void;
 }) {
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
   const [uploadedFileId, setUploadedFileId] = useState<number | null>(null);
   const [uploadedFileName, setUploadedFileName] = useState('');
   const [isUploadingFile, setIsUploadingFile] = useState(false);
@@ -1244,6 +1388,89 @@ function EditarTituloSheet({
       name: 'installments',
     });
 
+  const watchedFormValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<ReceivableInstallmentDraftPayload>({
+    storageKey: RECEIVABLE_EDIT_TITLE_DRAFT_STORAGE_KEY,
+    value: {
+      mode: 'edit',
+      titleId: titulo?.id ? String(titulo.id) : null,
+      values: {
+        documento: watchedFormValues.documento ?? '',
+        clienteId: watchedFormValues.clienteId ?? '',
+        competencia: watchedFormValues.competencia ?? '',
+        vencimento: watchedFormValues.vencimento ?? '',
+        valor: watchedFormValues.valor ?? 0,
+        installmentsCount: watchedFormValues.installmentsCount ?? 1,
+        installments: watchedFormValues.installments?.map((installment) => ({
+          dueDate: installment?.dueDate ?? '',
+          amount: Number(installment?.amount ?? 0),
+        })) ?? [{ dueDate: '', amount: 0 }],
+        categoriaId: watchedFormValues.categoriaId ?? '',
+        centroCustoId: watchedFormValues.centroCustoId ?? '',
+        canal: watchedFormValues.canal ?? '',
+        descricao: watchedFormValues.descricao ?? '',
+      },
+      uploadedFileId,
+      uploadedFileName,
+      isInstallmentsEdited,
+      autoRedistributeInstallments,
+    },
+    hasData: Boolean(
+      titulo &&
+      ((watchedFormValues.documento ?? '').trim() ||
+        (watchedFormValues.clienteId ?? '').trim() ||
+        (watchedFormValues.competencia ?? '').trim() ||
+        (watchedFormValues.vencimento ?? '').trim() ||
+        (watchedFormValues.categoriaId ?? '').trim() ||
+        (watchedFormValues.centroCustoId ?? '').trim() ||
+        (watchedFormValues.canal ?? '').trim() ||
+        (watchedFormValues.descricao ?? '').trim() ||
+        (watchedFormValues.valor ?? 0) > 0 ||
+        (watchedFormValues.installments ?? []).some(
+          (installment) =>
+            (installment?.dueDate ?? '').trim() ||
+            Number(installment?.amount ?? 0) > 0
+        ) ||
+        uploadedFileId != null ||
+        uploadedFileName.trim())
+    ),
+    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 watchedInstallmentsCount = form.watch('installmentsCount');
   const watchedTotalValue = form.watch('valor');
   const watchedDueDate = form.watch('vencimento');
@@ -1271,6 +1498,25 @@ function EditarTituloSheet({
       return;
     }
 
+    const storedDraft = loadDraft();
+    const shouldRestoreDraft =
+      storedDraft?.payload.mode === 'edit' &&
+      String(storedDraft.payload.titleId ?? '') === String(titulo.id ?? '');
+
+    if (shouldRestoreDraft) {
+      form.reset(storedDraft.payload.values);
+      setUploadedFileId(storedDraft.payload.uploadedFileId ?? null);
+      setUploadedFileName(storedDraft.payload.uploadedFileName ?? '');
+      setExtractionConfidence(null);
+      setExtractionWarnings([]);
+      setUploadProgress(storedDraft.payload.uploadedFileId ? 100 : 0);
+      setIsInstallmentsEdited(storedDraft.payload.isInstallmentsEdited ?? true);
+      setAutoRedistributeInstallments(
+        storedDraft.payload.autoRedistributeInstallments ?? true
+      );
+      return;
+    }
+
     const installments = Array.isArray(titulo.parcelas) ? titulo.parcelas : [];
     const normalizedInstallments =
       installments.length > 0
@@ -1333,9 +1579,9 @@ function EditarTituloSheet({
     setExtractionConfidence(null);
     setExtractionWarnings([]);
     setUploadProgress(0);
-
+    setAutoRedistributeInstallments(true);
     setIsInstallmentsEdited(true);
-  }, [form, open, titulo]);
+  }, [form, loadDraft, open, titulo]);
 
   useEffect(() => {
     if (isInstallmentsEdited || !open) {
@@ -1620,6 +1866,7 @@ function EditarTituloSheet({
         },
       });
 
+      clearDraft();
       await onUpdated();
       showToastHandler?.('success', t('messages.updateSuccess'));
       onOpenChange(false);
@@ -2127,6 +2374,11 @@ function EditarTituloSheet({
             </FinanceSheetBody>
 
             <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+              {draftStatusContent ? (
+                <p className="mb-2 text-xs text-muted-foreground">
+                  {draftStatusContent}
+                </p>
+              ) : null}
               <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                 <Button type="button" variant="outline" onClick={handleCancel}>
                   {t('common.cancel')}