@hed-hog/contact 0.0.293 → 0.0.295

package/hedhog/frontend/app/accounts/_components/account-form-sheet.tsx.ejs

@@ -25,47 +25,42 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
-import { toast } from 'sonner';
 import { z } from 'zod';
 import type { Account, AccountFormValues, UserOption } from './account-types';
 
-const accountFormSchema = z.object({
-  name: z.string().min(2, 'Name must be at least 2 characters'),
-  trade_name: z.string().optional().nullable(),
-  status: z.enum(['active', 'inactive']),
-  industry: z.string().optional().nullable(),
-  website: z.string().optional().nullable(),
-  email: z
-    .string()
-    .email('Invalid email')
-    .optional()
-    .or(z.literal(''))
-    .nullable(),
-  phone: z.string().optional().nullable(),
-  owner_user_id: z.number().optional().nullable(),
-  annual_revenue: z.number().optional().nullable(),
-  employee_count: z.number().optional().nullable(),
-  lifecycle_stage: z
-    .enum(['prospect', 'customer', 'churned', 'inactive'])
-    .optional()
-    .nullable(),
-  city: z.string().optional().nullable(),
-  state: z.string().optional().nullable(),
-});
-
-type AccountFormData = z.infer<typeof accountFormSchema>;
+type AccountFormData = {
+  name: string;
+  trade_name: string | null;
+  status: 'active' | 'inactive';
+  industry: string | null;
+  website: string | null;
+  email: string | null;
+  phone: string | null;
+  owner_user_id: number | null;
+  annual_revenue: number | null;
+  employee_count: number | null;
+  lifecycle_stage: 'prospect' | 'customer' | 'churned' | 'inactive' | null;
+  city: string | null;
+  state: string | null;
+};
 
 interface AccountFormSheetProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   account?: Account | null;
   owners: UserOption[];
-  onSubmit: (data: AccountFormValues) => void;
+  onSubmit: (data: AccountFormValues) => Promise<void>;
   isLoading?: boolean;
 }
 
+function emptyToNull(value: string | null | undefined) {
+  const normalized = String(value ?? '').trim();
+  return normalized ? normalized : null;
+}
+
 export function AccountFormSheet({
   open,
   onOpenChange,
@@ -74,6 +69,55 @@ export function AccountFormSheet({
   onSubmit,
   isLoading = false,
 }: AccountFormSheetProps) {
+  const t = useTranslations('contact.AccountsPage');
+
+  const accountFormSchema = useMemo(
+    () =>
+      z.object({
+        name: z.string().trim().min(2, t('form.validation.nameMinLength')),
+        trade_name: z.string().nullable(),
+        status: z.enum(['active', 'inactive']),
+        industry: z.string().nullable(),
+        website: z.string().nullable(),
+        email: z
+          .string()
+          .nullable()
+          .refine(
+            (value) => !value || z.string().email().safeParse(value).success,
+            t('form.validation.invalidEmail')
+          ),
+        phone: z.string().nullable(),
+        owner_user_id: z.number().nullable(),
+        annual_revenue: z
+          .number()
+          .nullable()
+          .refine(
+            (value) => value == null || value >= 0,
+            t('form.validation.nonNegativeNumber')
+          ),
+        employee_count: z
+          .number()
+          .int(t('form.validation.integerRequired'))
+          .nullable()
+          .refine(
+            (value) => value == null || value >= 0,
+            t('form.validation.nonNegativeNumber')
+          ),
+        lifecycle_stage: z
+          .enum(['prospect', 'customer', 'churned', 'inactive'])
+          .nullable(),
+        city: z.string().nullable(),
+        state: z
+          .string()
+          .nullable()
+          .refine(
+            (value) => !value || value.trim().length <= 2,
+            t('form.validation.stateMaxLength')
+          ),
+      }),
+    [t]
+  );
+
   const form = useForm<AccountFormData>({
     resolver: zodResolver(accountFormSchema),
     defaultValues: {
@@ -87,13 +131,17 @@ export function AccountFormSheet({
       owner_user_id: null,
       annual_revenue: null,
       employee_count: null,
-      lifecycle_stage: 'prospect' as const,
+      lifecycle_stage: 'prospect',
       city: null,
       state: null,
     },
   });
 
   useEffect(() => {
+    if (!open) {
+      return;
+    }
+
     if (account) {
       form.reset({
         name: account.name,
@@ -110,44 +158,53 @@ export function AccountFormSheet({
         city: account.city ?? null,
         state: account.state ?? null,
       });
-    } else {
-      form.reset({
-        name: '',
-        trade_name: null,
-        status: 'active',
-        industry: null,
-        website: null,
-        email: null,
-        phone: null,
-        owner_user_id: null,
-        annual_revenue: null,
-        employee_count: null,
-        lifecycle_stage: 'prospect',
-        city: null,
-        state: null,
-      });
+      return;
     }
+
+    form.reset({
+      name: '',
+      trade_name: null,
+      status: 'active',
+      industry: null,
+      website: null,
+      email: null,
+      phone: null,
+      owner_user_id: null,
+      annual_revenue: null,
+      employee_count: null,
+      lifecycle_stage: 'prospect',
+      city: null,
+      state: null,
+    });
   }, [account, form, open]);
 
-  const handleSubmit = (data: AccountFormData) => {
-    try {
-      onSubmit(data);
-      form.reset();
-      onOpenChange(false);
-    } catch (error) {
-      toast.error('Failed to save account');
-    }
+  const handleSubmit = async (data: AccountFormData) => {
+    await onSubmit({
+      name: data.name.trim(),
+      trade_name: emptyToNull(data.trade_name),
+      status: data.status,
+      industry: emptyToNull(data.industry),
+      website: emptyToNull(data.website),
+      email: emptyToNull(data.email),
+      phone: emptyToNull(data.phone),
+      owner_user_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: emptyToNull(data.city),
+      state: emptyToNull(data.state)?.toUpperCase() ?? null,
+    });
   };
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent className="max-h-screen overflow-y-auto">
         <SheetHeader>
-          <SheetTitle>{account ? 'Edit Account' : 'New Account'}</SheetTitle>
+          <SheetTitle>
+            {account ? t('form.editTitle') : t('form.createTitle')}
+          </SheetTitle>
           <SheetDescription>
-            {account
-              ? 'Update account information and details'
-              : 'Create a new account record in the CRM'}
+            {account ? t('form.editDescription') : t('form.createDescription')}
           </SheetDescription>
         </SheetHeader>
 
@@ -156,16 +213,15 @@ export function AccountFormSheet({
             onSubmit={form.handleSubmit(handleSubmit)}
             className="space-y-4 py-4"
           >
-            {/* Name and Trade Name */}
             <FormField
               control={form.control}
               name="name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Company Name</FormLabel>
+                  <FormLabel>{t('form.companyName')}</FormLabel>
                   <FormControl>
                     <Input
-                      placeholder="Company name"
+                      placeholder={t('form.placeholders.companyName')}
                       {...field}
                       disabled={isLoading}
                     />
@@ -180,12 +236,14 @@ export function AccountFormSheet({
               name="trade_name"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Trade Name (optional)</FormLabel>
+                  <FormLabel>{t('form.tradeName')}</FormLabel>
                   <FormControl>
                     <Input
-                      placeholder="Trade name or brand"
+                      placeholder={t('form.placeholders.tradeName')}
                       value={field.value ?? ''}
-                      onChange={(e) => field.onChange(e.target.value || null)}
+                      onChange={(event) =>
+                        field.onChange(event.target.value || null)
+                      }
                       disabled={isLoading}
                     />
                   </FormControl>
@@ -194,14 +252,13 @@ export function AccountFormSheet({
               )}
             />
 
-            {/* Status and Lifecycle Stage */}
-            <div className="grid gap-4 grid-cols-2">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
               <FormField
                 control={form.control}
                 name="status"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Status</FormLabel>
+                    <FormLabel>{t('form.status')}</FormLabel>
                     <Select
                       value={field.value}
                       onValueChange={field.onChange}
@@ -213,8 +270,12 @@ export function AccountFormSheet({
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        <SelectItem value="active">Active</SelectItem>
-                        <SelectItem value="inactive">Inactive</SelectItem>
+                        <SelectItem value="active">
+                          {t('status_active')}
+                        </SelectItem>
+                        <SelectItem value="inactive">
+                          {t('status_inactive')}
+                        </SelectItem>
                       </SelectContent>
                     </Select>
                     <FormMessage />
@@ -227,7 +288,7 @@ export function AccountFormSheet({
                 name="lifecycle_stage"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Stage</FormLabel>
+                    <FormLabel>{t('form.lifecycleStage')}</FormLabel>
                     <Select
                       value={field.value ?? 'prospect'}
                       onValueChange={(value) => field.onChange(value || null)}
@@ -239,10 +300,18 @@ export function AccountFormSheet({
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        <SelectItem value="prospect">Prospect</SelectItem>
-                        <SelectItem value="customer">Customer</SelectItem>
-                        <SelectItem value="churned">Churned</SelectItem>
-                        <SelectItem value="inactive">Inactive</SelectItem>
+                        <SelectItem value="prospect">
+                          {t('stage_prospect')}
+                        </SelectItem>
+                        <SelectItem value="customer">
+                          {t('stage_customer')}
+                        </SelectItem>
+                        <SelectItem value="churned">
+                          {t('stage_churned')}
+                        </SelectItem>
+                        <SelectItem value="inactive">
+                          {t('stage_inactive')}
+                        </SelectItem>
                       </SelectContent>
                     </Select>
                     <FormMessage />
@@ -251,19 +320,20 @@ export function AccountFormSheet({
               />
             </div>
 
-            {/* Contact Information */}
             <FormField
               control={form.control}
               name="email"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Email (optional)</FormLabel>
+                  <FormLabel>{t('form.email')}</FormLabel>
                   <FormControl>
                     <Input
                       type="email"
-                      placeholder="contact@company.com"
+                      placeholder={t('form.placeholders.email')}
                       value={field.value ?? ''}
-                      onChange={(e) => field.onChange(e.target.value || null)}
+                      onChange={(event) =>
+                        field.onChange(event.target.value || null)
+                      }
                       disabled={isLoading}
                     />
                   </FormControl>
@@ -277,12 +347,14 @@ export function AccountFormSheet({
               name="phone"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Phone (optional)</FormLabel>
+                  <FormLabel>{t('form.phone')}</FormLabel>
                   <FormControl>
                     <Input
-                      placeholder="(11) 99999-9999"
+                      placeholder={t('form.placeholders.phone')}
                       value={field.value ?? ''}
-                      onChange={(e) => field.onChange(e.target.value || null)}
+                      onChange={(event) =>
+                        field.onChange(event.target.value || null)
+                      }
                       disabled={isLoading}
                     />
                   </FormControl>
@@ -296,12 +368,14 @@ export function AccountFormSheet({
               name="website"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Website (optional)</FormLabel>
+                  <FormLabel>{t('form.website')}</FormLabel>
                   <FormControl>
                     <Input
-                      placeholder="www.company.com"
+                      placeholder={t('form.placeholders.website')}
                       value={field.value ?? ''}
-                      onChange={(e) => field.onChange(e.target.value || null)}
+                      onChange={(event) =>
+                        field.onChange(event.target.value || null)
+                      }
                       disabled={isLoading}
                     />
                   </FormControl>
@@ -310,18 +384,19 @@ export function AccountFormSheet({
               )}
             />
 
-            {/* Business Information */}
             <FormField
               control={form.control}
               name="industry"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Industry (optional)</FormLabel>
+                  <FormLabel>{t('form.industry')}</FormLabel>
                   <FormControl>
                     <Input
-                      placeholder="e.g., Technology, Healthcare"
+                      placeholder={t('form.placeholders.industry')}
                       value={field.value ?? ''}
-                      onChange={(e) => field.onChange(e.target.value || null)}
+                      onChange={(event) =>
+                        field.onChange(event.target.value || null)
+                      }
                       disabled={isLoading}
                     />
                   </FormControl>
@@ -330,21 +405,26 @@ export function AccountFormSheet({
               )}
             />
 
-            <div className="grid gap-4 grid-cols-2">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
               <FormField
                 control={form.control}
                 name="annual_revenue"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Annual Revenue (optional)</FormLabel>
+                    <FormLabel>{t('form.annualRevenue')}</FormLabel>
                     <FormControl>
                       <Input
                         type="number"
-                        placeholder="0"
+                        inputMode="decimal"
+                        min="0"
+                        step="0.01"
+                        placeholder={t('form.placeholders.annualRevenue')}
                         value={field.value ?? ''}
-                        onChange={(e) =>
+                        onChange={(event) =>
                           field.onChange(
-                            e.target.value ? Number(e.target.value) : null
+                            event.target.value
+                              ? Number(event.target.value)
+                              : null
                           )
                         }
                         disabled={isLoading}
@@ -360,15 +440,20 @@ export function AccountFormSheet({
                 name="employee_count"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Employees (optional)</FormLabel>
+                    <FormLabel>{t('form.employeeCount')}</FormLabel>
                     <FormControl>
                       <Input
                         type="number"
-                        placeholder="0"
+                        inputMode="numeric"
+                        min="0"
+                        step="1"
+                        placeholder={t('form.placeholders.employeeCount')}
                         value={field.value ?? ''}
-                        onChange={(e) =>
+                        onChange={(event) =>
                           field.onChange(
-                            e.target.value ? Number(e.target.value) : null
+                            event.target.value
+                              ? Number(event.target.value)
+                              : null
                           )
                         }
                         disabled={isLoading}
@@ -380,19 +465,20 @@ export function AccountFormSheet({
               />
             </div>
 
-            {/* Address Information */}
-            <div className="grid gap-4 grid-cols-2">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
               <FormField
                 control={form.control}
                 name="city"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>City (optional)</FormLabel>
+                    <FormLabel>{t('form.city')}</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="São Paulo"
+                        placeholder={t('form.placeholders.city')}
                         value={field.value ?? ''}
-                        onChange={(e) => field.onChange(e.target.value || null)}
+                        onChange={(event) =>
+                          field.onChange(event.target.value || null)
+                        }
                         disabled={isLoading}
                       />
                     </FormControl>
@@ -406,13 +492,15 @@ export function AccountFormSheet({
                 name="state"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>State (optional)</FormLabel>
+                    <FormLabel>{t('form.state')}</FormLabel>
                     <FormControl>
                       <Input
-                        placeholder="SP"
+                        placeholder={t('form.placeholders.state')}
                         maxLength={2}
                         value={field.value ?? ''}
-                        onChange={(e) => field.onChange(e.target.value || null)}
+                        onChange={(event) =>
+                          field.onChange(event.target.value || null)
+                        }
                         disabled={isLoading}
                       />
                     </FormControl>
@@ -422,27 +510,32 @@ export function AccountFormSheet({
               />
             </div>
 
-            {/* Owner */}
             <FormField
               control={form.control}
               name="owner_user_id"
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel>Owner (optional)</FormLabel>
+                  <FormLabel>{t('form.owner')}</FormLabel>
                   <Select
-                    value={field.value ? String(field.value) : ''}
+                    value={
+                      field.value != null ? String(field.value) : 'unassigned'
+                    }
                     onValueChange={(value) =>
-                      field.onChange(value ? Number(value) : null)
+                      field.onChange(
+                        value === 'unassigned' ? null : Number(value)
+                      )
                     }
                     disabled={isLoading}
                   >
                     <FormControl>
                       <SelectTrigger>
-                        <SelectValue placeholder="Unassigned" />
+                        <SelectValue placeholder={t('unassigned')} />
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      <SelectItem value="">Unassigned</SelectItem>
+                      <SelectItem value="unassigned">
+                        {t('unassigned')}
+                      </SelectItem>
                       {owners.map((owner) => (
                         <SelectItem key={owner.id} value={String(owner.id)}>
                           {owner.name}
@@ -455,18 +548,21 @@ export function AccountFormSheet({
               )}
             />
 
-            {/* Submit Button */}
-            <div className="flex justify-end gap-2 pt-4 border-t">
+            <div className="flex justify-end gap-2 border-t pt-4">
               <Button
                 type="button"
                 variant="outline"
                 onClick={() => onOpenChange(false)}
                 disabled={isLoading}
               >
-                Cancel
+                {t('cancel')}
               </Button>
               <Button type="submit" disabled={isLoading}>
-                {isLoading ? 'Saving...' : 'Save Account'}
+                {isLoading
+                  ? t('form.saving')
+                  : account
+                    ? t('form.updateSubmit')
+                    : t('form.createSubmit')}
               </Button>
             </div>
           </form>

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

@@ -43,6 +43,9 @@ export type PaginatedResult<T> = {
   total: number;
   page: number;
   pageSize: number;
+  lastPage?: number;
+  prev?: number | null;
+  next?: number | null;
 };
 
 export type AccountFormValues = {