@hed-hog/contact 0.0.303 → 0.0.305

package/hedhog/frontend/app/person/_components/person-interaction-dialog.tsx.ejs

@@ -26,12 +26,16 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDateTime } from '@/lib/format-date';
 import { useApp } 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 { Loader2 } 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 { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -50,6 +54,21 @@ const followupSchema = z.object({
 type InteractionFormValues = z.infer<typeof interactionSchema>;
 type FollowupFormValues = z.infer<typeof followupSchema>;
 
+type InteractionDraftPayload = {
+  personId: number | null;
+  values: InteractionFormValues;
+};
+
+type FollowupDraftPayload = {
+  personId: number | null;
+  values: FollowupFormValues;
+};
+
+const PERSON_INTERACTION_DRAFT_STORAGE_KEY =
+  'contact-person-interaction-dialog-draft';
+const PERSON_FOLLOWUP_DRAFT_STORAGE_KEY =
+  'contact-person-followup-dialog-draft';
+
 type PersonInteractionDialogProps = {
   open: boolean;
   person: Person | null;
@@ -74,7 +93,7 @@ export function PersonInteractionDialog({
   onSuccess,
 }: PersonInteractionDialogProps) {
   const t = useTranslations('contact.ContactPage');
-  const { request } = useApp();
+  const { request, getSettingValue, currentLocaleCode } = useApp();
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   const interactionForm = useForm<InteractionFormValues>({
@@ -87,12 +106,148 @@ export function PersonInteractionDialog({
     defaultValues: { next_action_at: '', notes: '' },
   });
 
+  const watchedInteractionValues = useWatch({
+    control: interactionForm.control,
+  });
+  const watchedFollowupValues = useWatch({
+    control: followupForm.control,
+  });
+
+  const {
+    clearDraft: clearInteractionDraft,
+    loadDraft: loadInteractionDraft,
+    hasDraft: hasInteractionDraft,
+    savedAt: interactionDraftSavedAt,
+  } = useFormDraft<InteractionDraftPayload>({
+    storageKey: PERSON_INTERACTION_DRAFT_STORAGE_KEY,
+    value: {
+      personId: person?.id ?? null,
+      values: {
+        type: watchedInteractionValues.type ?? 'call',
+        notes: watchedInteractionValues.notes ?? '',
+      },
+    },
+    hasData:
+      (watchedInteractionValues.notes ?? '').trim().length > 0 ||
+      (watchedInteractionValues.type ?? 'call') !== 'call',
+    enabled: open && mode === 'interaction',
+  });
+
+  const {
+    clearDraft: clearFollowupDraft,
+    loadDraft: loadFollowupDraft,
+    hasDraft: hasFollowupDraft,
+    savedAt: followupDraftSavedAt,
+  } = useFormDraft<FollowupDraftPayload>({
+    storageKey: PERSON_FOLLOWUP_DRAFT_STORAGE_KEY,
+    value: {
+      personId: person?.id ?? null,
+      values: {
+        next_action_at: watchedFollowupValues.next_action_at ?? '',
+        notes: watchedFollowupValues.notes ?? '',
+      },
+    },
+    hasData:
+      (watchedFollowupValues.next_action_at ?? '').trim().length > 0 ||
+      (watchedFollowupValues.notes ?? '').trim().length > 0,
+    enabled: open && mode === 'followup',
+  });
+
+  const interactionDraftStatus = useMemo(() => {
+    if (!hasInteractionDraft || !interactionDraftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(interactionDraftSavedAt);
+    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}`;
+  }, [
+    currentLocaleCode,
+    getSettingValue,
+    hasInteractionDraft,
+    interactionDraftSavedAt,
+  ]);
+
+  const followupDraftStatus = useMemo(() => {
+    if (!hasFollowupDraft || !followupDraftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(followupDraftSavedAt);
+    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}`;
+  }, [
+    currentLocaleCode,
+    followupDraftSavedAt,
+    getSettingValue,
+    hasFollowupDraft,
+  ]);
+
   useEffect(() => {
     if (!open) {
       interactionForm.reset({ type: 'call', notes: '' });
       followupForm.reset({ next_action_at: '', notes: '' });
+      return;
+    }
+
+    if (mode === 'interaction') {
+      const storedDraft = loadInteractionDraft();
+      interactionForm.reset(
+        storedDraft?.payload.personId === (person?.id ?? null)
+          ? storedDraft.payload.values
+          : { type: 'call', notes: '' }
+      );
+    }
+
+    if (mode === 'followup') {
+      const storedDraft = loadFollowupDraft();
+      followupForm.reset(
+        storedDraft?.payload.personId === (person?.id ?? null)
+          ? storedDraft.payload.values
+          : { next_action_at: '', notes: '' }
+      );
     }
-  }, [open, interactionForm, followupForm]);
+  }, [
+    followupForm,
+    interactionForm,
+    loadFollowupDraft,
+    loadInteractionDraft,
+    mode,
+    open,
+    person?.id,
+  ]);
 
   const handleInteractionSubmit = async (values: InteractionFormValues) => {
     if (!person) return;
@@ -104,6 +259,7 @@ export function PersonInteractionDialog({
         data: values,
       });
       toast.success(t('interactionSuccess'));
+      clearInteractionDraft();
       onOpenChange(false);
       onSuccess();
     } catch {
@@ -123,6 +279,7 @@ export function PersonInteractionDialog({
         data: values,
       });
       toast.success(t('followupSuccess'));
+      clearFollowupDraft();
       onOpenChange(false);
       onSuccess();
     } catch {
@@ -195,6 +352,11 @@ export function PersonInteractionDialog({
                   </FormItem>
                 )}
               />
+              {interactionDraftStatus ? (
+                <p className="text-xs text-muted-foreground">
+                  {interactionDraftStatus}
+                </p>
+              ) : null}
               <DialogFooter>
                 <Button
                   type="button"
@@ -249,6 +411,11 @@ export function PersonInteractionDialog({
                   </FormItem>
                 )}
               />
+              {followupDraftStatus ? (
+                <p className="text-xs text-muted-foreground">
+                  {followupDraftStatus}
+                </p>
+              ) : null}
               <DialogFooter>
                 <Button
                   type="button"

package/hedhog/frontend/app/person/page.tsx.ejs

@@ -57,6 +57,7 @@ import {
   Phone,
   Plus,
   Trash2,
+  Upload,
   User,
   UserCheck,
   Users,
@@ -68,6 +69,7 @@ import { toast } from 'sonner';
 
 import { DeletePersonDialog } from './_components/delete-person-dialog';
 import { PersonFormSheet } from './_components/person-form-sheet';
+import { PersonImportSheet } from './_components/person-import-sheet';
 import { PersonInteractionDialog } from './_components/person-interaction-dialog';
 import type {
   ContactTypeOption,
@@ -337,6 +339,7 @@ export default function PeoplePage() {
   const [personToDelete, setPersonToDelete] = useState<Person | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
   const [viewMode, setViewMode] = useState<PersonViewMode>('table');
+  const [importSheetOpen, setImportSheetOpen] = useState(false);
   const [interactionDialogOpen, setInteractionDialogOpen] = useState(false);
   const [interactionMode, setInteractionMode] = useState<
     'interaction' | 'followup'
@@ -803,6 +806,12 @@ export default function PeoplePage() {
             : t('heroDescriptionIndividualOnly')
         }
         actions={[
+          {
+            label: t('importLeads'),
+            onClick: () => setImportSheetOpen(true),
+            icon: <Upload className="h-4 w-4" />,
+            variant: 'outline',
+          },
           {
             label: t('newPerson'),
             onClick: openCreateSheet,
@@ -1231,6 +1240,14 @@ export default function PeoplePage() {
         </>
       )}
 
+      <PersonImportSheet
+        open={importSheetOpen}
+        onOpenChange={setImportSheetOpen}
+        onSuccess={() => {
+          void refetch();
+        }}
+      />
+
       <DeletePersonDialog
         open={deleteDialogOpen}
         personName={personToDelete?.name}