@hed-hog/contact 0.0.304 → 0.0.306

package/hedhog/frontend/app/accounts/_components/account-types.ts.ejs

@@ -6,6 +6,15 @@ export type AccountLifecycleStage =
   | 'churned'
   | 'inactive';
 
+export type AddressTypeValue =
+  | 'residential'
+  | 'commercial'
+  | 'correspondence'
+  | 'alternative'
+  | 'work'
+  | 'billing'
+  | 'shipping';
+
 export type UserOption = {
   id: number;
   name: string;
@@ -18,6 +27,41 @@ export type AccountStats = {
   prospects: number;
 };
 
+export type AccountContact = {
+  id?: number;
+  value: string;
+  is_primary: boolean;
+  contact_type_id: number;
+  contact_type?: {
+    id: number;
+    code: string;
+    name?: string;
+  };
+};
+
+export type AccountAddress = {
+  id?: number;
+  line1: string;
+  line2?: string;
+  city: string;
+  state: string;
+  is_primary: boolean;
+  address_type: AddressTypeValue;
+  postal_code?: string;
+  country_code?: string;
+};
+
+export type AccountDocument = {
+  id?: number;
+  value: string;
+  document_type_id: number;
+  document_type?: {
+    id: number;
+    code: string;
+    name?: string;
+  };
+};
+
 export type Account = {
   id: number;
   name: string;
@@ -36,6 +80,9 @@ export type Account = {
   state?: string | null;
   created_at: string;
   last_interaction_at?: string | null;
+  contact?: AccountContact[];
+  address?: AccountAddress[];
+  document?: AccountDocument[];
 };
 
 export type PaginatedResult<T> = {
@@ -62,4 +109,8 @@ export type AccountFormValues = {
   lifecycle_stage?: AccountLifecycleStage | null;
   city?: string | null;
   state?: string | null;
+  collaborator_person_ids?: number[];
+  contacts?: AccountContact[];
+  addresses?: AccountAddress[];
+  documents?: AccountDocument[];
 };

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

@@ -39,6 +39,7 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { getFormDraftOwnerKey } from '@/hooks/use-form-draft';
 import { formatDate } from '@/lib/format-date';
 import { cn } from '@/lib/utils';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
@@ -61,10 +62,16 @@ import {
   Phone,
   Plus,
   Trash2,
+  Upload,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { type ReactNode, useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
+import { PersonImportSheet } from '../person/_components/person-import-sheet';
+import type {
+  ContactTypeOption,
+  DocumentTypeOption,
+} from '../person/_components/person-types';
 import { AccountFormSheet } from './_components/account-form-sheet';
 import type {
   Account,
@@ -75,6 +82,7 @@ import type {
 } from './_components/account-types';
 
 const ACCOUNT_VIEW_STORAGE_KEY = 'contact-account-view-mode';
+const ACCOUNT_FORM_DRAFT_STORAGE_KEY = 'contact-account-form-draft';
 
 type AccountViewMode = 'table' | 'cards';
 
@@ -150,7 +158,8 @@ function AccountInfoTile({
 export default function AccountsPage() {
   const t = useTranslations('contact.AccountsPage');
   const crmT = useTranslations('contact.CrmMenu');
-  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const { request, currentLocaleCode, getSettingValue, accessToken, user } =
+    useApp();
 
   const [sorting, setSorting] = useState<SortingState>([]);
   const [page, setPage] = useState(1);
@@ -166,6 +175,13 @@ export default function AccountsPage() {
   const [isDeleting, setIsDeleting] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [viewMode, setViewMode] = useState<AccountViewMode>('table');
+  const [importSheetOpen, setImportSheetOpen] = useState(false);
+  const [importAccountId, setImportAccountId] = useState<number | null>(null);
+
+  const openImportSheet = (account: Account) => {
+    setImportAccountId(account.id);
+    setImportSheetOpen(true);
+  };
 
   useEffect(() => {
     const timeout = setTimeout(() => {
@@ -188,6 +204,47 @@ export default function AccountsPage() {
     }
   }, []);
 
+  useEffect(() => {
+    const ownerKey = getFormDraftOwnerKey(
+      accessToken,
+      user?.id ?? (user === null ? null : undefined)
+    );
+
+    if (accessToken && !ownerKey) {
+      return;
+    }
+
+    try {
+      const rawDraft = window.localStorage.getItem(
+        ACCOUNT_FORM_DRAFT_STORAGE_KEY
+      );
+
+      if (!rawDraft) {
+        return;
+      }
+
+      const parsedDraft = JSON.parse(rawDraft) as {
+        mode?: string;
+        ownerKey?: string | null;
+      } | null;
+
+      if (accessToken) {
+        if (!parsedDraft?.ownerKey || parsedDraft.ownerKey !== ownerKey) {
+          window.localStorage.removeItem(ACCOUNT_FORM_DRAFT_STORAGE_KEY);
+          return;
+        }
+      } else if (parsedDraft?.ownerKey && parsedDraft.ownerKey !== ownerKey) {
+        window.localStorage.removeItem(ACCOUNT_FORM_DRAFT_STORAGE_KEY);
+        return;
+      }
+
+      setAccountToEdit(null);
+      setFormSheetOpen(true);
+    } catch {
+      // Ignore draft restore failures.
+    }
+  }, [accessToken, user]);
+
   const currentSort = sorting[0];
   const sortField = currentSort?.id === 'created_at' ? 'created_at' : 'name';
   const sortOrder = currentSort?.desc ? 'desc' : 'asc';
@@ -234,6 +291,32 @@ export default function AccountsPage() {
     placeholderData: (previous) => previous ?? [],
   });
 
+  const { data: contactTypes = [] } = useQuery<ContactTypeOption[]>({
+    queryKey: ['contact-account-contact-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: ContactTypeOption[] }>({
+        url: '/person-contact-type?pageSize=100',
+        method: 'GET',
+      });
+
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: documentTypes = [] } = useQuery<DocumentTypeOption[]>({
+    queryKey: ['contact-account-document-types', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<{ data: DocumentTypeOption[] }>({
+        url: '/person-document-type?pageSize=100',
+        method: 'GET',
+      });
+
+      return response.data.data || [];
+    },
+    placeholderData: (previous) => previous ?? [],
+  });
+
   const {
     data: paginate = {
       data: [],
@@ -314,29 +397,89 @@ export default function AccountsPage() {
     setFormSheetOpen(true);
   };
 
-  const handleFormSubmit = async (data: AccountFormValues) => {
+  const handleFormSubmit = async (
+    data: AccountFormValues,
+    accountId?: number | null
+  ): Promise<{ id: number | null }> => {
     try {
       setIsSubmitting(true);
 
-      if (accountToEdit) {
-        await request({
-          url: `/person/accounts/${accountToEdit.id}`,
-          method: 'PATCH',
-          data,
-        });
+      const targetAccountId = accountToEdit?.id ?? accountId ?? null;
+
+      if (targetAccountId) {
+        const response = await request<{ id?: number; data?: { id?: number } }>(
+          {
+            url: `/person/accounts/${targetAccountId}`,
+            method: 'PATCH',
+            data,
+          }
+        );
+
+        const savedId = Number(
+          response?.data?.id ?? response?.data?.data?.id ?? targetAccountId
+        );
+
         toast.success(t('editSuccess'));
-      } else {
-        await request({
-          url: '/person/accounts',
-          method: 'POST',
-          data,
+
+        setAccountToEdit((previous) =>
+          previous
+            ? {
+                ...previous,
+                ...data,
+                id: savedId,
+                owner_user:
+                  owners.find((owner) => owner.id === data.owner_user_id) ??
+                  previous.owner_user ??
+                  null,
+                contact: data.contacts ?? previous.contact ?? [],
+                address: data.addresses ?? previous.address ?? [],
+                document: data.documents ?? previous.document ?? [],
+              }
+            : previous
+        );
+
+        await Promise.all([refetchAccounts(), refetchStats()]);
+        return { id: savedId || null };
+      }
+
+      const response = await request<{ id?: number; data?: { id?: number } }>({
+        url: '/person/accounts',
+        method: 'POST',
+        data,
+      });
+
+      const savedId = Number(response?.data?.id ?? response?.data?.data?.id);
+
+      toast.success(t('createSuccess'));
+
+      if (savedId) {
+        setAccountToEdit({
+          id: savedId,
+          name: data.name,
+          trade_name: data.trade_name ?? null,
+          status: data.status,
+          industry: data.industry ?? null,
+          website: data.website ?? null,
+          email: data.email ?? null,
+          phone: data.phone ?? null,
+          owner_user_id: data.owner_user_id ?? null,
+          owner_user:
+            owners.find((owner) => owner.id === data.owner_user_id) ?? null,
+          annual_revenue: data.annual_revenue ?? null,
+          employee_count: data.employee_count ?? null,
+          lifecycle_stage: data.lifecycle_stage ?? null,
+          city: data.city ?? null,
+          state: data.state ?? null,
+          created_at: new Date().toISOString(),
+          last_interaction_at: null,
+          contact: data.contacts ?? [],
+          address: data.addresses ?? [],
+          document: data.documents ?? [],
         });
-        toast.success(t('createSuccess'));
       }
 
-      setFormSheetOpen(false);
-      setAccountToEdit(null);
       await Promise.all([refetchAccounts(), refetchStats()]);
+      return { id: savedId || null };
     } catch (error: unknown) {
       const message =
         typeof error === 'object' && error && 'message' in error
@@ -537,6 +680,10 @@ export default function AccountsPage() {
                   <Pencil className="mr-2 h-4 w-4" />
                   {t('edit')}
                 </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => openImportSheet(account)}>
+                  <Upload className="mr-2 h-4 w-4" />
+                  {t('importContacts')}
+                </DropdownMenuItem>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
                   className="text-red-600"
@@ -867,6 +1014,12 @@ export default function AccountsPage() {
                             <Pencil className="mr-2 h-4 w-4" />
                             {t('edit')}
                           </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={() => openImportSheet(account)}
+                          >
+                            <Upload className="mr-2 h-4 w-4" />
+                            {t('importContacts')}
+                          </DropdownMenuItem>
                           <DropdownMenuSeparator />
                           <DropdownMenuItem
                             className="text-red-600"
@@ -937,10 +1090,22 @@ export default function AccountsPage() {
         onOpenChange={setFormSheetOpen}
         account={accountToEdit}
         owners={owners}
+        contactTypes={contactTypes}
+        documentTypes={documentTypes}
         onSubmit={handleFormSubmit}
         isLoading={isSubmitting}
       />
 
+      <PersonImportSheet
+        open={importSheetOpen}
+        onOpenChange={(nextOpen) => {
+          setImportSheetOpen(nextOpen);
+          if (!nextOpen) setImportAccountId(null);
+        }}
+        initialCompanyId={importAccountId}
+        onSuccess={() => setImportSheetOpen(false)}
+      />
+
       <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>