@hed-hog/contact 0.0.304 → 0.0.306

package/hedhog/frontend/app/document-type/page.tsx.ejs

@@ -18,14 +18,6 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -50,6 +42,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { Switch } from '@/components/ui/switch';
 import {
   Table,
@@ -60,13 +60,16 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { COUNTRIES } from '@/constants/countries';
-import { formatDate } from '@/lib/format-date';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDate, 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 { MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useMemo, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -87,6 +90,41 @@ type DocumentType = {
   created_at: string;
 };
 
+type DocumentTypeDraftPayload = {
+  mode: 'create' | 'edit';
+  documentTypeId: number | null;
+  values: {
+    code: string;
+    name: string;
+    country_code: string;
+    is_unique: boolean;
+  };
+};
+
+type DocumentTypeResponse = {
+  code?: string;
+  name?: string;
+  country_code?: string;
+  is_unique?: boolean;
+};
+
+function getErrorMessage(error: unknown, fallbackMessage: string) {
+  if (
+    error &&
+    typeof error === 'object' &&
+    'message' in error &&
+    typeof error.message === 'string'
+  ) {
+    return error.message;
+  }
+
+  return fallbackMessage;
+}
+
+const DOCUMENT_TYPE_CREATE_DRAFT_STORAGE_KEY =
+  'contact-document-type-create-draft';
+const DOCUMENT_TYPE_EDIT_DRAFT_STORAGE_KEY = 'contact-document-type-edit-draft';
+
 export default function DocumentTypePage() {
   const t = useTranslations('contact.DocumentType');
 
@@ -150,6 +188,136 @@ export default function DocumentTypePage() {
     resolver: zodResolver(documentTypeSchema),
   });
 
+  const watchedCreateValues = useWatch({
+    control: form.control,
+  });
+  const watchedEditValues = useWatch({
+    control: editForm.control,
+  });
+
+  const {
+    clearDraft: clearCreateDraft,
+    loadDraft: loadCreateDraft,
+    hasDraft: hasCreateDraft,
+    savedAt: createDraftSavedAt,
+  } = useFormDraft<DocumentTypeDraftPayload>({
+    storageKey: DOCUMENT_TYPE_CREATE_DRAFT_STORAGE_KEY,
+    value: {
+      mode: 'create',
+      documentTypeId: null,
+      values: {
+        code: watchedCreateValues.code ?? '',
+        name: watchedCreateValues.name ?? '',
+        country_code: watchedCreateValues.country_code ?? '',
+        is_unique: watchedCreateValues.is_unique ?? false,
+      },
+    },
+    hasData: Boolean(
+      (watchedCreateValues.code ?? '').trim() ||
+      (watchedCreateValues.name ?? '').trim() ||
+      (watchedCreateValues.country_code ?? '').trim() ||
+      watchedCreateValues.is_unique
+    ),
+    enabled: isDialogOpen,
+  });
+
+  const {
+    clearDraft: clearEditDraft,
+    loadDraft: loadEditDraft,
+    hasDraft: hasEditDraft,
+    savedAt: editDraftSavedAt,
+  } = useFormDraft<DocumentTypeDraftPayload>({
+    storageKey: DOCUMENT_TYPE_EDIT_DRAFT_STORAGE_KEY,
+    value: {
+      mode: 'edit',
+      documentTypeId:
+        editingDocumentType?.document_type_id ||
+        editingDocumentType?.id ||
+        null,
+      values: {
+        code: watchedEditValues.code ?? '',
+        name: watchedEditValues.name ?? '',
+        country_code: watchedEditValues.country_code ?? '',
+        is_unique: watchedEditValues.is_unique ?? false,
+      },
+    },
+    hasData: Boolean(
+      (watchedEditValues.code ?? '').trim() ||
+      (watchedEditValues.name ?? '').trim() ||
+      (watchedEditValues.country_code ?? '').trim() ||
+      watchedEditValues.is_unique
+    ),
+    enabled: isEditDialogOpen,
+  });
+
+  const createDraftStatusContent = useMemo(() => {
+    if (!hasCreateDraft || !createDraftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(createDraftSavedAt);
+    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}`;
+  }, [createDraftSavedAt, currentLocaleCode, getSettingValue, hasCreateDraft]);
+
+  const editDraftStatusContent = useMemo(() => {
+    if (!hasEditDraft || !editDraftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(editDraftSavedAt);
+    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}`;
+  }, [editDraftSavedAt, currentLocaleCode, getSettingValue, hasEditDraft]);
+
+  const openCreateDialog = () => {
+    const storedDraft = loadCreateDraft();
+
+    form.reset(
+      storedDraft?.payload.mode === 'create'
+        ? storedDraft.payload.values
+        : {
+            code: '',
+            name: '',
+            country_code: '',
+            is_unique: false,
+          }
+    );
+    setIsDialogOpen(true);
+  };
+
   const onSubmit = async (values: z.infer<typeof documentTypeSchema>) => {
     try {
       const payload = {
@@ -169,12 +337,13 @@ export default function DocumentTypePage() {
         data: payload,
       });
 
+      clearCreateDraft();
       toast.success(t('successCreate'));
       setIsDialogOpen(false);
       form.reset();
       refetch();
-    } catch (error: any) {
-      toast.error(error?.message || t('errorCreate'));
+    } catch (error: unknown) {
+      toast.error(getErrorMessage(error, t('errorCreate')));
     }
   };
 
@@ -199,13 +368,14 @@ export default function DocumentTypePage() {
         data: payload,
       });
 
+      clearEditDraft();
       toast.success(t('successUpdate'));
       setIsEditDialogOpen(false);
       setEditingDocumentType(null);
       editForm.reset();
       refetch();
-    } catch (error: any) {
-      toast.error(error?.message || t('errorUpdate'));
+    } catch (error: unknown) {
+      toast.error(getErrorMessage(error, t('errorUpdate')));
     }
   };
 
@@ -221,8 +391,8 @@ export default function DocumentTypePage() {
       setDeleteDialogOpen(false);
       setDeletingId(null);
       refetch();
-    } catch (error: any) {
-      toast.error(error?.message || t('errorDelete'));
+    } catch (error: unknown) {
+      toast.error(getErrorMessage(error, t('errorDelete')));
     }
   };
 
@@ -230,26 +400,47 @@ export default function DocumentTypePage() {
     (async () => {
       setEditingDocumentType(documentType);
       try {
-        const { data } = await request<any>({
+        const { data } = await request<DocumentTypeResponse>({
           url: `/person-document-type/${documentType.document_type_id || documentType.id}?locale=${currentLocaleCode}`,
           method: 'GET',
         });
-        editForm.reset({
-          code: data.code || documentType.code,
-          name: data.name || documentType.name || '',
-          country_code: data.country_code || documentType.country_code || '',
-          is_unique:
-            typeof data.is_unique === 'boolean'
-              ? data.is_unique
-              : (documentType.is_unique ?? false),
-        });
+        const storedDraft = loadEditDraft();
+        const shouldRestoreDraft =
+          storedDraft?.payload.mode === 'edit' &&
+          storedDraft.payload.documentTypeId ===
+            (documentType.document_type_id || documentType.id);
+
+        editForm.reset(
+          shouldRestoreDraft
+            ? storedDraft.payload.values
+            : {
+                code: data.code || documentType.code,
+                name: data.name || documentType.name || '',
+                country_code:
+                  data.country_code || documentType.country_code || '',
+                is_unique:
+                  typeof data.is_unique === 'boolean'
+                    ? data.is_unique
+                    : (documentType.is_unique ?? false),
+              }
+        );
       } catch {
-        editForm.reset({
-          code: documentType.code,
-          name: documentType.name || '',
-          country_code: documentType.country_code || '',
-          is_unique: documentType.is_unique ?? false,
-        });
+        const storedDraft = loadEditDraft();
+        const shouldRestoreDraft =
+          storedDraft?.payload.mode === 'edit' &&
+          storedDraft.payload.documentTypeId ===
+            (documentType.document_type_id || documentType.id);
+
+        editForm.reset(
+          shouldRestoreDraft
+            ? storedDraft.payload.values
+            : {
+                code: documentType.code,
+                name: documentType.name || '',
+                country_code: documentType.country_code || '',
+                is_unique: documentType.is_unique ?? false,
+              }
+        );
       }
       setIsEditDialogOpen(true);
     })();
@@ -267,7 +458,7 @@ export default function DocumentTypePage() {
         actions={[
           {
             label: t('buttonNewType'),
-            onClick: () => setIsDialogOpen(true),
+            onClick: openCreateDialog,
             variant: 'default',
             icon: <Plus />,
           },
@@ -295,7 +486,7 @@ export default function DocumentTypePage() {
                 <TableHead>{t('tableSlug')}</TableHead>
                 <TableHead>{t('tableName')}</TableHead>
                 <TableHead>{t('tableCreatedAt')}</TableHead>
-                <TableHead className="w-[70px]"></TableHead>
+                <TableHead className="w-17.5"></TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -364,7 +555,7 @@ export default function DocumentTypePage() {
             title={t('noResults')}
             description={t('emptyStateDescription')}
             actionLabel={t('emptyStateAction')}
-            onAction={() => setIsDialogOpen(true)}
+            onAction={openCreateDialog}
           />
         </div>
       )}
@@ -378,7 +569,15 @@ export default function DocumentTypePage() {
         pageSizeOptions={[10, 20, 30, 40, 50]}
       />
 
-      <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <Sheet
+        open={isDialogOpen}
+        onOpenChange={(open) => {
+          setIsDialogOpen(open);
+          if (!open) {
+            form.reset();
+          }
+        }}
+      >
         <SheetContent className="w-full sm:max-w-md">
           <SheetHeader>
             <SheetTitle>{t('dialogNewTitle')}</SheetTitle>
@@ -476,6 +675,12 @@ export default function DocumentTypePage() {
                 />
               </div>
 
+              {createDraftStatusContent ? (
+                <p className="text-xs text-muted-foreground">
+                  {createDraftStatusContent}
+                </p>
+              ) : null}
+
               <SheetFooter className="px-0">
                 <Button type="submit">{t('buttonCreate')}</Button>
               </SheetFooter>
@@ -591,6 +796,12 @@ export default function DocumentTypePage() {
                 />
               </div>
 
+              {editDraftStatusContent ? (
+                <p className="text-xs text-muted-foreground">
+                  {editDraftStatusContent}
+                </p>
+              ) : null}
+
               <SheetFooter className="px-0">
                 <Button type="submit">{t('buttonUpdate')}</Button>
               </SheetFooter>

package/hedhog/frontend/app/follow-ups/page.tsx.ejs

@@ -53,10 +53,13 @@ import {
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useFormDraft } from '@/hooks/use-form-draft';
 import { formatDateTime } from '@/lib/format-date';
 import { cn } from '@/lib/utils';
 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 {
   CalendarClock,
   CalendarDays,
@@ -74,7 +77,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 { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -123,7 +126,18 @@ type FollowupStats = {
 
 type FollowupViewMode = 'table' | 'cards';
 
+type ScheduleDraftPayload = {
+  mode: 'create' | 'reschedule';
+  personLabel: string;
+  values: {
+    personId: string;
+    next_action_at: string;
+    notes: string;
+  };
+};
+
 const FOLLOWUPS_VIEW_STORAGE_KEY = 'contact-followups-view-mode';
+const FOLLOWUPS_FORM_DRAFT_STORAGE_KEY = 'contact-followups-form-draft';
 
 function toInputDateTimeValue(value?: string | null) {
   if (!value) {
@@ -197,6 +211,67 @@ export default function CrmFollowupsPage() {
   const [sheetOpen, setSheetOpen] = useState(false);
   const [personPickerOpen, setPersonPickerOpen] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [sheetMode, setSheetMode] = useState<'create' | 'reschedule'>('create');
+
+  const watchedScheduleValues = useWatch({
+    control: form.control,
+  });
+
+  const hasDraftContent = useMemo(
+    () =>
+      Boolean(
+        (watchedScheduleValues.personId ?? '').trim() ||
+        (watchedScheduleValues.next_action_at ?? '').trim() ||
+        (watchedScheduleValues.notes ?? '').trim()
+      ),
+    [watchedScheduleValues]
+  );
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<ScheduleDraftPayload>({
+    storageKey: FOLLOWUPS_FORM_DRAFT_STORAGE_KEY,
+    value: {
+      mode: sheetMode,
+      personLabel: selectedPersonLabel,
+      values: {
+        personId: watchedScheduleValues.personId ?? '',
+        next_action_at: watchedScheduleValues.next_action_at ?? '',
+        notes: watchedScheduleValues.notes ?? '',
+      },
+    },
+    hasData: hasDraftContent,
+    enabled: sheetOpen,
+  });
+
+  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(() => {
     const timeout = setTimeout(() => {
@@ -394,28 +469,56 @@ export default function CrmFollowupsPage() {
   ];
 
   const openCreateSheet = () => {
-    setSelectedPersonLabel('');
-    setPersonSearch('');
-    setDebouncedPersonSearch('');
+    setSheetMode('create');
+    const storedDraft = loadDraft();
+    const shouldRestoreDraft = storedDraft?.payload.mode === 'create';
+
+    setSelectedPersonLabel(
+      shouldRestoreDraft ? storedDraft.payload.personLabel : ''
+    );
+    setPersonSearch(shouldRestoreDraft ? storedDraft.payload.personLabel : '');
+    setDebouncedPersonSearch(
+      shouldRestoreDraft ? storedDraft.payload.personLabel : ''
+    );
     setPersonPickerOpen(false);
-    form.reset({
-      personId: '',
-      next_action_at: '',
-      notes: '',
-    });
+    form.reset(
+      shouldRestoreDraft
+        ? storedDraft.payload.values
+        : {
+            personId: '',
+            next_action_at: '',
+            notes: '',
+          }
+    );
     setSheetOpen(true);
   };
 
   const openRescheduleSheet = (row: FollowupListItem) => {
-    setSelectedPersonLabel(row.person.name);
-    setPersonSearch(row.person.name);
-    setDebouncedPersonSearch(row.person.name);
+    setSheetMode('reschedule');
+    const storedDraft = loadDraft();
+    const shouldRestoreDraft =
+      storedDraft?.payload.mode === 'reschedule' &&
+      storedDraft.payload.values.personId === String(row.person.id);
+
+    setSelectedPersonLabel(
+      shouldRestoreDraft ? storedDraft.payload.personLabel : row.person.name
+    );
+    setPersonSearch(
+      shouldRestoreDraft ? storedDraft.payload.personLabel : row.person.name
+    );
+    setDebouncedPersonSearch(
+      shouldRestoreDraft ? storedDraft.payload.personLabel : row.person.name
+    );
     setPersonPickerOpen(false);
-    form.reset({
-      personId: String(row.person.id),
-      next_action_at: toInputDateTimeValue(row.next_action_at),
-      notes: '',
-    });
+    form.reset(
+      shouldRestoreDraft
+        ? storedDraft.payload.values
+        : {
+            personId: String(row.person.id),
+            next_action_at: toInputDateTimeValue(row.next_action_at),
+            notes: '',
+          }
+    );
     setSheetOpen(true);
   };
 
@@ -444,6 +547,7 @@ export default function CrmFollowupsPage() {
         },
       });
 
+      clearDraft();
       toast.success(t('toasts.scheduleSuccess'));
       setSheetOpen(false);
       setPersonPickerOpen(false);
@@ -457,7 +561,8 @@ export default function CrmFollowupsPage() {
 
   const selectedPersonName =
     personOptions.find(
-      (option) => String(option.id) === String(form.watch('personId') || '')
+      (option) =>
+        String(option.id) === String(watchedScheduleValues.personId || '')
     )?.name ||
     selectedPersonLabel ||
     '';
@@ -912,7 +1017,12 @@ export default function CrmFollowupsPage() {
                 )}
               />
 
-              <SheetFooter className="mt-auto border-t pt-4">
+              <SheetFooter className="mt-auto flex-col items-stretch border-t pt-4">
+                {draftStatusContent ? (
+                  <p className="text-xs text-muted-foreground">
+                    {draftStatusContent}
+                  </p>
+                ) : null}
                 <Button
                   type="submit"
                   className="w-full"