@hed-hog/contact 0.0.304 → 0.0.306

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}

package/hedhog/frontend/app/pipeline/_components/lead-proposals-tab.tsx.ejs

@@ -51,9 +51,13 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { Textarea } from '@/components/ui/textarea';
+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 {
   CheckCircle2,
   Download,
@@ -68,7 +72,7 @@ import {
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo, useState } from 'react';
-import { useFieldArray, useForm } from 'react-hook-form';
+import { useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -265,6 +269,16 @@ const proposalFormSchema = z.object({
 type ProposalFormValues = z.infer<typeof proposalFormSchema>;
 type ProposalFormItemValues = z.infer<typeof proposalItemFormSchema>;
 
+type ProposalDraftPayload = {
+  leadId: number;
+  proposalId: number | null;
+  mode: 'create' | 'edit';
+  values: ProposalFormValues;
+};
+
+const LEAD_PROPOSAL_DRAFT_STORAGE_KEY =
+  'contact-pipeline-lead-proposal-form-draft';
+
 const CONTRACT_CATEGORY_OPTIONS: ProposalContractCategory[] = [
   'client',
   'supplier',
@@ -328,6 +342,20 @@ function createEmptyProposalItem(
   };
 }
 
+function createDefaultProposalFormValues(): ProposalFormValues {
+  return {
+    code: '',
+    title: '',
+    validUntil: '',
+    contractCategory: 'client',
+    contractType: 'service_agreement',
+    billingModel: 'fixed_price',
+    summary: '',
+    notes: '',
+    items: [createEmptyProposalItem()],
+  };
+}
+
 function toDateInputValue(value?: string | null) {
   if (!value) return '';
   const parsed = new Date(value);
@@ -402,7 +430,7 @@ export function LeadProposalsTab({
   onLeadUpdated,
 }: LeadProposalsTabProps) {
   const t = useTranslations('contact.CrmPipeline');
-  const { request, currentLocaleCode } = useApp();
+  const { request, currentLocaleCode, getSettingValue } = useApp();
   const locale = currentLocaleCode?.startsWith('pt') ? 'pt-BR' : 'en-US';
 
   const [selectedProposalId, setSelectedProposalId] = useState<number | null>(
@@ -418,17 +446,7 @@ export function LeadProposalsTab({
 
   const form = useForm<ProposalFormValues>({
     resolver: zodResolver(proposalFormSchema),
-    defaultValues: {
-      code: '',
-      title: '',
-      validUntil: '',
-      contractCategory: 'client',
-      contractType: 'service_agreement',
-      billingModel: 'fixed_price',
-      summary: '',
-      notes: '',
-      items: [createEmptyProposalItem()],
-    },
+    defaultValues: createDefaultProposalFormValues(),
   });
 
   const {
@@ -440,7 +458,89 @@ export function LeadProposalsTab({
     name: 'items',
   });
 
-  const watchedItems = form.watch('items');
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+  const watchedItems = useMemo(
+    () => watchedValues.items ?? [],
+    [watchedValues.items]
+  );
+
+  const {
+    clearDraft,
+    loadDraft,
+    hasDraft,
+    savedAt: draftSavedAt,
+  } = useFormDraft<ProposalDraftPayload>({
+    storageKey: LEAD_PROPOSAL_DRAFT_STORAGE_KEY,
+    value: {
+      leadId: lead.id,
+      proposalId: editingProposal?.id ?? null,
+      mode: editingProposal ? 'edit' : 'create',
+      values: {
+        code: watchedValues.code ?? '',
+        title: watchedValues.title ?? '',
+        validUntil: watchedValues.validUntil ?? '',
+        contractCategory: watchedValues.contractCategory ?? 'client',
+        contractType: watchedValues.contractType ?? 'service_agreement',
+        billingModel: watchedValues.billingModel ?? 'fixed_price',
+        summary: watchedValues.summary ?? '',
+        notes: watchedValues.notes ?? '',
+        items: watchedValues.items?.map((item) =>
+          createEmptyProposalItem(item)
+        ) ?? [createEmptyProposalItem()],
+      },
+    },
+    hasData:
+      (watchedValues.code ?? '').trim().length > 0 ||
+      (watchedValues.title ?? '').trim().length > 0 ||
+      (watchedValues.validUntil ?? '').trim().length > 0 ||
+      (watchedValues.summary ?? '').trim().length > 0 ||
+      (watchedValues.notes ?? '').trim().length > 0 ||
+      (watchedValues.contractCategory ?? 'client') !== 'client' ||
+      (watchedValues.contractType ?? 'service_agreement') !==
+        'service_agreement' ||
+      (watchedValues.billingModel ?? 'fixed_price') !== 'fixed_price' ||
+      (watchedValues.items ?? []).some(
+        (item) =>
+          (item.name ?? '').trim().length > 0 ||
+          (item.description ?? '').trim().length > 0 ||
+          Number(item.quantity ?? 1) !== 1 ||
+          Number(item.unitAmount ?? 0) !== 0 ||
+          (item.recurrence ?? 'one_time') !== 'one_time' ||
+          (item.startDate ?? '').trim().length > 0 ||
+          (item.endDate ?? '').trim().length > 0 ||
+          (item.itemType ?? 'service') !== 'service'
+      ),
+    enabled: formOpen,
+  });
+
+  const draftStatusContent = useMemo(() => {
+    if (!hasDraft || !draftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(draftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const localeValue = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale: localeValue,
+    });
+    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 pricingSummary = useMemo(() => {
     const subtotalCents = (watchedItems ?? []).reduce((sum, item) => {
       if (item?.itemType === 'discount') return sum;
@@ -534,36 +634,55 @@ export function LeadProposalsTab({
 
   useEffect(() => {
     if (!formOpen) {
+      form.reset(createDefaultProposalFormValues());
+      setEditingProposal(null);
+      return;
+    }
+
+    const storedDraft = loadDraft();
+
+    if (
+      !editingProposal &&
+      storedDraft?.payload.mode === 'create' &&
+      storedDraft.payload.leadId === lead.id
+    ) {
       form.reset({
-        code: '',
-        title: '',
-        validUntil: '',
-        contractCategory: 'client',
-        contractType: 'service_agreement',
-        billingModel: 'fixed_price',
-        summary: '',
-        notes: '',
-        items: [createEmptyProposalItem()],
+        ...createDefaultProposalFormValues(),
+        ...storedDraft.payload.values,
+        items:
+          storedDraft.payload.values.items?.length > 0
+            ? storedDraft.payload.values.items.map((item) =>
+                createEmptyProposalItem(item)
+              )
+            : [createEmptyProposalItem()],
       });
-      setEditingProposal(null);
       return;
     }
 
-    if (!editingProposal) {
+    if (
+      editingProposal &&
+      storedDraft?.payload.mode === 'edit' &&
+      storedDraft.payload.leadId === lead.id &&
+      storedDraft.payload.proposalId === editingProposal.id
+    ) {
       form.reset({
-        code: '',
-        title: '',
-        validUntil: '',
-        contractCategory: 'client',
-        contractType: 'service_agreement',
-        billingModel: 'fixed_price',
-        summary: '',
-        notes: '',
-        items: [createEmptyProposalItem()],
+        ...createDefaultProposalFormValues(),
+        ...storedDraft.payload.values,
+        items:
+          storedDraft.payload.values.items?.length > 0
+            ? storedDraft.payload.values.items.map((item) =>
+                createEmptyProposalItem(item)
+              )
+            : [createEmptyProposalItem()],
       });
       return;
     }
 
+    if (!editingProposal) {
+      form.reset(createDefaultProposalFormValues());
+      return;
+    }
+
     const currentRevision = getCurrentRevision(editingProposal);
     const revisionItems = currentRevision?.proposal_item?.length
       ? currentRevision.proposal_item.map((item) =>
@@ -589,7 +708,7 @@ export function LeadProposalsTab({
       notes: editingProposal.notes ?? '',
       items: revisionItems,
     });
-  }, [editingProposal, form, formOpen]);
+  }, [editingProposal, form, formOpen, lead.id, loadDraft]);
 
   const selectedProposal = useMemo(() => {
     const matchingDetail =
@@ -818,6 +937,7 @@ export function LeadProposalsTab({
         await refreshAll(createdProposal.id);
       }
 
+      clearDraft();
       setFormOpen(false);
     } catch (error) {
       const message =
@@ -2077,6 +2197,11 @@ export function LeadProposalsTab({
               </div>
 
               <div className="shrink-0 border-t px-5 py-3">
+                {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"