@hed-hog/finance 0.0.304 → 0.0.306

package/hedhog/frontend/app/administration/categories/page.tsx.ejs

@@ -36,6 +36,8 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
 import {
   DndContext,
   DragEndEvent,
@@ -52,6 +54,8 @@ import {
 } from '@dnd-kit/sortable';
 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 {
   ChevronDown,
   ChevronRight,
@@ -63,7 +67,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 
 type CategoryFormValues = {
@@ -84,6 +88,14 @@ type FinanceCategory = {
 
 const EMPTY_CATEGORIES: FinanceCategory[] = [];
 
+type CategoryDraftPayload = {
+  mode: 'create' | 'edit';
+  categoryId: string | null;
+  values: CategoryFormValues;
+};
+
+const CATEGORY_FORM_DRAFT_STORAGE_KEY = 'finance-categories-form-draft';
+
 type CategoryNode = FinanceCategory & { children: CategoryNode[] };
 
 function buildTree(categories: FinanceCategory[]): CategoryNode[] {
@@ -135,7 +147,8 @@ function CategoriaSheet({
   categories: FinanceCategory[];
   t: ReturnType<typeof useTranslations>;
 }) {
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
 
   const categorySchema = z.object({
     nome: z.string().trim().min(1, t('sheet.validation.nameRequired')),
@@ -152,30 +165,96 @@ function CategoriaSheet({
     },
   });
 
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<CategoryDraftPayload>({
+    storageKey: CATEGORY_FORM_DRAFT_STORAGE_KEY,
+    value: {
+      mode: editing ? 'edit' : 'create',
+      categoryId: editing?.id ?? null,
+      values: {
+        nome: watchedValues.nome ?? '',
+        natureza: watchedValues.natureza ?? 'despesa',
+        parentId: watchedValues.parentId ?? 'root',
+      },
+    },
+    hasData: Boolean(
+      (watchedValues.nome ?? '').trim() ||
+      (watchedValues.natureza ?? 'despesa') !== 'despesa' ||
+      (watchedValues.parentId ?? 'root') !== 'root'
+    ),
+    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) {
-      form.reset({ nome: '', natureza: 'despesa', parentId: 'root' });
       return;
     }
 
+    const storedDraft = loadDraft();
+    const shouldRestoreEditDraft =
+      Boolean(editing) &&
+      storedDraft?.payload.mode === 'edit' &&
+      storedDraft.payload.categoryId === editing?.id;
+
     if (editing) {
-      form.reset({
-        nome: editing.nome,
-        natureza: editing.natureza,
-        parentId: editing.parentId || 'root',
-      });
+      form.reset(
+        shouldRestoreEditDraft
+          ? storedDraft.payload.values
+          : {
+              nome: editing.nome,
+              natureza: editing.natureza,
+              parentId: editing.parentId || 'root',
+            }
+      );
       return;
     }
 
-    form.reset({ nome: '', natureza: 'despesa', parentId: 'root' });
-  }, [open, editing, form]);
+    form.reset(
+      storedDraft?.payload.mode === 'create'
+        ? storedDraft.payload.values
+        : { nome: '', natureza: 'despesa', parentId: 'root' }
+    );
+  }, [open, editing, form, loadDraft]);
 
   const handleOpenChange = (nextOpen: boolean) => {
     onOpenChange(nextOpen);
 
     if (!nextOpen) {
       setEditing(null);
-      form.reset({ nome: '', natureza: 'despesa', parentId: 'root' });
     }
   };
 
@@ -205,6 +284,7 @@ function CategoriaSheet({
         });
       }
 
+      clearDraft();
       await onSaved();
       onOpenChange(false);
       setEditing(null);
@@ -318,6 +398,12 @@ function CategoriaSheet({
               )}
             />
 
+            {draftStatusContent ? (
+              <p className="text-xs text-muted-foreground">
+                {draftStatusContent}
+              </p>
+            ) : null}
+
             <div className="flex justify-end gap-2">
               <Button
                 type="button"

package/hedhog/frontend/app/administration/cost-centers/page.tsx.ejs

@@ -29,12 +29,16 @@ 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, Pencil, Plus, Trash2 } 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';
 
 type CostCenterFormValues = {
@@ -49,6 +53,14 @@ type CostCenter = {
   ativo: boolean;
 };
 
+type CostCenterDraftPayload = {
+  mode: 'create' | 'edit';
+  costCenterId: string | null;
+  values: CostCenterFormValues;
+};
+
+const COST_CENTER_FORM_DRAFT_STORAGE_KEY = 'finance-cost-centers-form-draft';
+
 function CentroCustoSheet({
   open,
   onOpenChange,
@@ -64,7 +76,8 @@ function CentroCustoSheet({
   onEditingChange: (costCenter: CostCenter | null) => void;
   t: ReturnType<typeof useTranslations>;
 }) {
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
 
   const costCenterFormSchema = z.object({
     nome: z.string().trim().min(1, t('sheet.validation.nameRequired')),
@@ -77,19 +90,80 @@ function CentroCustoSheet({
     },
   });
 
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<CostCenterDraftPayload>({
+    storageKey: COST_CENTER_FORM_DRAFT_STORAGE_KEY,
+    value: {
+      mode: editingCostCenter ? 'edit' : 'create',
+      costCenterId: editingCostCenter?.id ?? null,
+      values: {
+        nome: watchedValues.nome ?? '',
+      },
+    },
+    hasData: Boolean((watchedValues.nome ?? '').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) {
-      form.reset({ nome: '' });
       return;
     }
 
+    const storedDraft = loadDraft();
+    const shouldRestoreEditDraft =
+      Boolean(editingCostCenter) &&
+      storedDraft?.payload.mode === 'edit' &&
+      storedDraft.payload.costCenterId === editingCostCenter?.id;
+
     if (editingCostCenter) {
-      form.reset({ nome: editingCostCenter.nome });
+      form.reset(
+        shouldRestoreEditDraft
+          ? storedDraft.payload.values
+          : { nome: editingCostCenter.nome }
+      );
       return;
     }
 
-    form.reset({ nome: '' });
-  }, [open, editingCostCenter, form]);
+    form.reset(
+      storedDraft?.payload.mode === 'create'
+        ? storedDraft.payload.values
+        : { nome: '' }
+    );
+  }, [open, editingCostCenter, form, loadDraft]);
 
   const handleSubmit = async (values: CostCenterFormValues) => {
     try {
@@ -111,6 +185,7 @@ function CentroCustoSheet({
         });
       }
 
+      clearDraft();
       await onSaved();
       form.reset({ nome: '' });
       onEditingChange(null);
@@ -135,7 +210,6 @@ function CentroCustoSheet({
     onOpenChange(nextOpen);
 
     if (!nextOpen) {
-      form.reset({ nome: '' });
       onEditingChange(null);
     }
   };
@@ -176,6 +250,12 @@ function CentroCustoSheet({
               )}
             />
 
+            {draftStatusContent ? (
+              <p className="text-xs text-muted-foreground">
+                {draftStatusContent}
+              </p>
+            ) : null}
+
             <div className="flex justify-end gap-2">
               <Button
                 type="button"

package/hedhog/frontend/app/administration/period-close/page.tsx.ejs

@@ -34,12 +34,16 @@ 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 { Plus, Search, X } 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 { z } from 'zod';
 
 type PeriodClose = {
@@ -70,6 +74,12 @@ type ClosePeriodFormValues = {
   status: 'closed' | 'open';
 };
 
+type ClosePeriodDraftPayload = {
+  values: ClosePeriodFormValues;
+};
+
+const PERIOD_CLOSE_FORM_DRAFT_STORAGE_KEY = 'finance-period-close-form-draft';
+
 function ClosePeriodSheet({
   open,
   onOpenChange,
@@ -81,7 +91,8 @@ function ClosePeriodSheet({
   onCreated: () => Promise<unknown> | void;
   t: ReturnType<typeof useTranslations>;
 }) {
-  const { request, showToastHandler } = useApp();
+  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
+    useApp();
 
   const closePeriodSchema = z.object({
     periodStart: z.string().min(1, t('sheet.validation.startRequired')),
@@ -100,6 +111,77 @@ function ClosePeriodSheet({
     },
   });
 
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<ClosePeriodDraftPayload>({
+    storageKey: PERIOD_CLOSE_FORM_DRAFT_STORAGE_KEY,
+    value: {
+      values: {
+        periodStart: watchedValues.periodStart ?? '',
+        periodEnd: watchedValues.periodEnd ?? '',
+        notes: watchedValues.notes ?? '',
+        status: watchedValues.status ?? 'closed',
+      },
+    },
+    hasData: Boolean(
+      (watchedValues.periodStart ?? '').trim() ||
+      (watchedValues.periodEnd ?? '').trim() ||
+      (watchedValues.notes ?? '').trim() ||
+      (watchedValues.status ?? 'closed') !== 'closed'
+    ),
+    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.values ?? {
+        periodStart: '',
+        periodEnd: '',
+        notes: '',
+        status: 'closed',
+      }
+    );
+  }, [form, loadDraft, open]);
+
   const onSubmit = async (values: ClosePeriodFormValues) => {
     try {
       await request({
@@ -113,6 +195,7 @@ function ClosePeriodSheet({
         },
       });
 
+      clearDraft();
       await onCreated();
       form.reset();
       onOpenChange(false);
@@ -127,9 +210,6 @@ function ClosePeriodSheet({
       open={open}
       onOpenChange={(nextOpen) => {
         onOpenChange(nextOpen);
-        if (!nextOpen) {
-          form.reset();
-        }
       }}
     >
       <SheetContent className="w-full sm:max-w-lg">
@@ -215,6 +295,12 @@ function ClosePeriodSheet({
               )}
             />
 
+            {draftStatusContent ? (
+              <p className="text-xs text-muted-foreground">
+                {draftStatusContent}
+              </p>
+            ) : null}
+
             <div className="flex justify-end gap-2">
               <Button
                 type="button"
@@ -311,7 +397,7 @@ export default function PeriodClosePage() {
       />
 
       <div className="flex flex-col gap-4 xl:flex-row xl:flex-wrap xl:items-center">
-        <div className="relative min-w-[260px] flex-1">
+        <div className="relative min-w-65 flex-1">
           <Search className="pointer-events-none absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
           <Input
             placeholder={t('filters.searchPlaceholder')}
@@ -331,7 +417,7 @@ export default function PeriodClosePage() {
             setPage(1);
           }}
         >
-          <SelectTrigger className="w-full sm:w-[180px]">
+          <SelectTrigger className="w-full sm:w-45">
             <SelectValue placeholder={t('filters.status')} />
           </SelectTrigger>
           <SelectContent>