@hed-hog/finance 0.0.303 → 0.0.305

package/hedhog/frontend/app/_components/finance-layout.tsx.ejs

@@ -1,131 +1,135 @@
-'use client';
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { cn } from '@/lib/utils';
-import type { ReactNode } from 'react';
-
-type FinancePageSectionProps = {
-  title?: ReactNode;
-  description?: ReactNode;
-  actions?: ReactNode;
-  children: ReactNode;
-  className?: string;
-  contentClassName?: string;
-  variant?: 'card' | 'flat';
-};
-
-export function FinancePageSection({
-  title,
-  description,
-  actions,
-  children,
-  className,
-  contentClassName,
-  variant = 'card',
-}: FinancePageSectionProps) {
-  const hasHeader = title || description || actions;
-
-  if (variant === 'flat') {
-    return (
-      <section className={cn('space-y-4', className)}>
-        {hasHeader ? (
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-            <div className="space-y-1">
-              {title ? (
-                <h2 className="text-base font-semibold">{title}</h2>
-              ) : null}
-              {description ? (
-                <p className="text-sm text-muted-foreground">{description}</p>
-              ) : null}
-            </div>
-            {actions ? <div className="shrink-0">{actions}</div> : null}
-          </div>
-        ) : null}
-        <div className={cn(contentClassName)}>{children}</div>
-      </section>
-    );
-  }
-
-  return (
-    <Card
-      className={cn(
-        'overflow-hidden border-border/60 py-0 shadow-sm',
-        className
-      )}
-    >
-      {hasHeader ? (
-        <CardHeader className="flex flex-col gap-3 border-b border-border/50 px-5 py-4 sm:flex-row sm:items-start sm:justify-between">
-          <div className="space-y-1">
-            {title ? (
-              <CardTitle className="text-base">{title}</CardTitle>
-            ) : null}
-            {description ? (
-              <CardDescription>{description}</CardDescription>
-            ) : null}
-          </div>
-          {actions ? <div className="shrink-0">{actions}</div> : null}
-        </CardHeader>
-      ) : null}
-      <CardContent className={cn('p-0', contentClassName)}>
-        {children}
-      </CardContent>
-    </Card>
-  );
-}
-
-type FinanceSheetBodyProps = {
-  children: ReactNode;
-  className?: string;
-};
-
-export function FinanceSheetBody({
-  children,
-  className,
-}: FinanceSheetBodyProps) {
-  return (
-    <div
-      className={cn(
-        'flex-1 space-y-5 overflow-y-auto px-4 py-4 sm:px-6 sm:py-5',
-        className
-      )}
-    >
-      {children}
-    </div>
-  );
-}
-
-type FinanceSheetSectionProps = {
-  title: ReactNode;
-  description?: ReactNode;
-  children: ReactNode;
-  className?: string;
-  contentClassName?: string;
-};
-
-export function FinanceSheetSection({
-  title,
-  description,
-  children,
-  className,
-  contentClassName,
-}: FinanceSheetSectionProps) {
-  return (
-    <section className={cn('', className)}>
-      <div className="mb-4 space-y-1">
-        <h3 className="text-sm font-semibold text-foreground">{title}</h3>
-        {description ? (
-          <p className="text-sm leading-relaxed text-muted-foreground">
-            {description}
-          </p>
-        ) : null}
-      </div>
-      <div className={cn('space-y-4', contentClassName)}>{children}</div>
-    </section>
-  );
-}
+'use client';
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import type { ReactNode } from 'react';
+
+type FinancePageSectionProps = {
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+  variant?: 'card' | 'flat';
+};
+
+export function FinancePageSection({
+  title,
+  description,
+  actions,
+  children,
+  className,
+  contentClassName,
+  variant = 'card',
+}: FinancePageSectionProps) {
+  const hasHeader = title || description || actions;
+
+  if (variant === 'flat') {
+    return (
+      <section className={cn('space-y-4', className)}>
+        {hasHeader ? (
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+            <div className="space-y-1">
+              {title ? (
+                <h2 className="text-base font-semibold">{title}</h2>
+              ) : null}
+              {description ? (
+                <p className="text-sm text-muted-foreground">{description}</p>
+              ) : null}
+            </div>
+            {actions ? <div className="shrink-0">{actions}</div> : null}
+          </div>
+        ) : null}
+        <div className={cn(contentClassName)}>{children}</div>
+      </section>
+    );
+  }
+
+  return (
+    <Card
+      className={cn(
+        'overflow-hidden border-border/60 py-0 shadow-sm',
+        className
+      )}
+    >
+      {hasHeader ? (
+        <CardHeader className="flex flex-col gap-3 border-b border-border/50 px-5 py-4 sm:flex-row sm:items-start sm:justify-between">
+          <div className="space-y-1">
+            {title ? (
+              <CardTitle className="text-base">{title}</CardTitle>
+            ) : null}
+            {description ? (
+              <CardDescription>{description}</CardDescription>
+            ) : null}
+          </div>
+          {actions ? <div className="shrink-0">{actions}</div> : null}
+        </CardHeader>
+      ) : null}
+      <CardContent className={cn('p-0', contentClassName)}>
+        {children}
+      </CardContent>
+    </Card>
+  );
+}
+
+type FinanceSheetBodyProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export function FinanceSheetBody({
+  children,
+  className,
+}: FinanceSheetBodyProps) {
+  return (
+    <div
+      className={cn(
+        'flex-1 space-y-5 overflow-y-auto px-4 py-4 sm:px-6 sm:py-5',
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+type FinanceSheetSectionProps = {
+  title?: ReactNode;
+  description?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  contentClassName?: string;
+};
+
+export function FinanceSheetSection({
+  title,
+  description,
+  children,
+  className,
+  contentClassName,
+}: FinanceSheetSectionProps) {
+  return (
+    <section className={cn('', className)}>
+      {title || description ? (
+        <div className="mb-4 space-y-1">
+          {title ? (
+            <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+          ) : null}
+          {description ? (
+            <p className="text-sm leading-relaxed text-muted-foreground">
+              {description}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+      <div className={cn('space-y-4', contentClassName)}>{children}</div>
+    </section>
+  );
+}

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

@@ -64,8 +64,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,
   FileText,
@@ -80,7 +84,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 {
@@ -246,6 +250,21 @@ const getNewTitleFormSchema = (t: ReturnType<typeof useTranslations>) =>
 
 type NewTitleFormValues = z.infer<ReturnType<typeof getNewTitleFormSchema>>;
 
+type PayableInstallmentDraftPayload = {
+  mode: 'create' | 'edit';
+  titleId: string | null;
+  values: NewTitleFormValues;
+  uploadedFileId: number | null;
+  uploadedFileName: string;
+  isInstallmentsEdited: boolean;
+  autoRedistributeInstallments: boolean;
+};
+
+const PAYABLE_NEW_TITLE_DRAFT_STORAGE_KEY =
+  'finance-accounts-payable-installments-new-draft';
+const PAYABLE_EDIT_TITLE_DRAFT_STORAGE_KEY =
+  'finance-accounts-payable-installments-edit-draft';
+
 const getSettleTitleFormSchema = (t: ReturnType<typeof useTranslations>) =>
   z.object({
     installmentId: z.string().min(1, t('validation.installmentRequired')),
@@ -276,7 +295,8 @@ function NovoTituloSheet({
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
 }) {
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
   const [internalOpen, setInternalOpen] = useState(false);
   const [uploadedFileId, setUploadedFileId] = useState<number | null>(null);
   const [uploadedFileName, setUploadedFileName] = useState('');
@@ -345,13 +365,141 @@ function NovoTituloSheet({
       name: 'installments',
     });
 
+  const watchedFormValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<PayableInstallmentDraftPayload>({
+    storageKey: PAYABLE_NEW_TITLE_DRAFT_STORAGE_KEY,
+    value: {
+      mode: 'create',
+      titleId: null,
+      values: {
+        documento: watchedFormValues.documento ?? '',
+        fornecedorId: watchedFormValues.fornecedorId ?? '',
+        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 ?? '',
+        metodo: watchedFormValues.metodo ?? '',
+        descricao: watchedFormValues.descricao ?? '',
+      },
+      uploadedFileId,
+      uploadedFileName,
+      isInstallmentsEdited,
+      autoRedistributeInstallments,
+    },
+    hasData: Boolean(
+      (watchedFormValues.documento ?? '').trim() ||
+      (watchedFormValues.fornecedorId ?? '').trim() ||
+      (watchedFormValues.competencia ?? '').trim() ||
+      (watchedFormValues.vencimento ?? '').trim() ||
+      (watchedFormValues.categoriaId ?? '').trim() ||
+      (watchedFormValues.centroCustoId ?? '').trim() ||
+      (watchedFormValues.metodo ?? '').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: 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]);
+
   const watchedInstallmentsCount = form.watch('installmentsCount');
   const watchedTotalValue = form.watch('valor');
   const watchedDueDate = form.watch('vencimento');
   const watchedInstallments = form.watch('installments');
 
   useEffect(() => {
-    if (isInstallmentsEdited) {
+    if (!isOpen) {
+      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: '',
+      fornecedorId: '',
+      competencia: '',
+      vencimento: '',
+      valor: 0,
+      installmentsCount: 1,
+      installments: [{ dueDate: '', amount: 0 }],
+      categoriaId: '',
+      centroCustoId: '',
+      metodo: '',
+      descricao: '',
+    });
+    setUploadedFileId(null);
+    setUploadedFileName('');
+    setExtractionConfidence(null);
+    setExtractionWarnings([]);
+    setUploadProgress(0);
+    setIsInstallmentsEdited(false);
+    setAutoRedistributeInstallments(true);
+  }, [form, isOpen, loadDraft]);
+
+  useEffect(() => {
+    if (isInstallmentsEdited || !isOpen) {
       return;
     }
 
@@ -364,6 +512,7 @@ function NovoTituloSheet({
     );
   }, [
     isInstallmentsEdited,
+    isOpen,
     replaceInstallments,
     watchedDueDate,
     watchedInstallmentsCount,
@@ -464,6 +613,7 @@ function NovoTituloSheet({
         },
       });
 
+      clearDraft();
       await onCreated();
       form.reset();
       setUploadedFileId(null);
@@ -480,14 +630,6 @@ function NovoTituloSheet({
   };
 
   const handleCancel = () => {
-    form.reset();
-    setUploadedFileId(null);
-    setUploadedFileName('');
-    setExtractionConfidence(null);
-    setExtractionWarnings([]);
-    setUploadProgress(0);
-    setIsInstallmentsEdited(false);
-    setAutoRedistributeInstallments(true);
     handleOpenChange(false);
   };
 
@@ -1158,6 +1300,11 @@ 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={handleCancel}>
                   {t('common.cancel')}
@@ -1209,7 +1356,8 @@ function EditarTituloSheet({
   onCategoriesUpdated?: () => Promise<any> | void;
   onCostCentersUpdated?: () => 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);
@@ -1270,6 +1418,89 @@ function EditarTituloSheet({
       name: 'installments',
     });
 
+  const watchedFormValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<PayableInstallmentDraftPayload>({
+    storageKey: PAYABLE_EDIT_TITLE_DRAFT_STORAGE_KEY,
+    value: {
+      mode: 'edit',
+      titleId: titulo?.id ? String(titulo.id) : null,
+      values: {
+        documento: watchedFormValues.documento ?? '',
+        fornecedorId: watchedFormValues.fornecedorId ?? '',
+        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 ?? '',
+        metodo: watchedFormValues.metodo ?? '',
+        descricao: watchedFormValues.descricao ?? '',
+      },
+      uploadedFileId,
+      uploadedFileName,
+      isInstallmentsEdited,
+      autoRedistributeInstallments,
+    },
+    hasData: Boolean(
+      titulo &&
+      ((watchedFormValues.documento ?? '').trim() ||
+        (watchedFormValues.fornecedorId ?? '').trim() ||
+        (watchedFormValues.competencia ?? '').trim() ||
+        (watchedFormValues.vencimento ?? '').trim() ||
+        (watchedFormValues.categoriaId ?? '').trim() ||
+        (watchedFormValues.centroCustoId ?? '').trim() ||
+        (watchedFormValues.metodo ?? '').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');
@@ -1297,6 +1528,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
@@ -1359,9 +1609,9 @@ function EditarTituloSheet({
     setExtractionConfidence(null);
     setExtractionWarnings([]);
     setUploadProgress(0);
-
+    setAutoRedistributeInstallments(true);
     setIsInstallmentsEdited(true);
-  }, [form, open, titulo]);
+  }, [form, loadDraft, open, titulo]);
 
   useEffect(() => {
     if (isInstallmentsEdited || !open) {
@@ -1483,6 +1733,7 @@ function EditarTituloSheet({
         },
       });
 
+      clearDraft();
       await onUpdated();
       showToastHandler?.('success', t('messages.updateSuccess'));
       onOpenChange(false);
@@ -2160,6 +2411,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')}