@hed-hog/contact 0.0.294 → 0.0.296

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

@@ -1,477 +1,573 @@
-'use client';
-
-import { Button } from '@/components/ui/button';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } 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>;
-
-interface AccountFormSheetProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  account?: Account | null;
-  owners: UserOption[];
-  onSubmit: (data: AccountFormValues) => void;
-  isLoading?: boolean;
-}
-
-export function AccountFormSheet({
-  open,
-  onOpenChange,
-  account,
-  owners,
-  onSubmit,
-  isLoading = false,
-}: AccountFormSheetProps) {
-  const form = useForm<AccountFormData>({
-    resolver: zodResolver(accountFormSchema),
-    defaultValues: {
-      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' as const,
-      city: null,
-      state: null,
-    },
-  });
-
-  useEffect(() => {
-    if (account) {
-      form.reset({
-        name: account.name,
-        trade_name: account.trade_name ?? null,
-        status: account.status,
-        industry: account.industry ?? null,
-        website: account.website ?? null,
-        email: account.email ?? null,
-        phone: account.phone ?? null,
-        owner_user_id: account.owner_user_id ?? null,
-        annual_revenue: account.annual_revenue ?? null,
-        employee_count: account.employee_count ?? null,
-        lifecycle_stage: account.lifecycle_stage ?? 'prospect',
-        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,
-      });
-    }
-  }, [account, form, open]);
-
-  const handleSubmit = (data: AccountFormData) => {
-    try {
-      onSubmit(data);
-      form.reset();
-      onOpenChange(false);
-    } catch (error) {
-      toast.error('Failed to save account');
-    }
-  };
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent className="max-h-screen overflow-y-auto">
-        <SheetHeader>
-          <SheetTitle>{account ? 'Edit Account' : 'New Account'}</SheetTitle>
-          <SheetDescription>
-            {account
-              ? 'Update account information and details'
-              : 'Create a new account record in the CRM'}
-          </SheetDescription>
-        </SheetHeader>
-
-        <Form {...form}>
-          <form
-            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>
-                  <FormControl>
-                    <Input
-                      placeholder="Company name"
-                      {...field}
-                      disabled={isLoading}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="trade_name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Trade Name (optional)</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="Trade name or brand"
-                      value={field.value ?? ''}
-                      onChange={(e) => field.onChange(e.target.value || null)}
-                      disabled={isLoading}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {/* Status and Lifecycle Stage */}
-            <div className="grid gap-4 grid-cols-2">
-              <FormField
-                control={form.control}
-                name="status"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Status</FormLabel>
-                    <Select
-                      value={field.value}
-                      onValueChange={field.onChange}
-                      disabled={isLoading}
-                    >
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="active">Active</SelectItem>
-                        <SelectItem value="inactive">Inactive</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="lifecycle_stage"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Stage</FormLabel>
-                    <Select
-                      value={field.value ?? 'prospect'}
-                      onValueChange={(value) => field.onChange(value || null)}
-                      disabled={isLoading}
-                    >
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="prospect">Prospect</SelectItem>
-                        <SelectItem value="customer">Customer</SelectItem>
-                        <SelectItem value="churned">Churned</SelectItem>
-                        <SelectItem value="inactive">Inactive</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            {/* Contact Information */}
-            <FormField
-              control={form.control}
-              name="email"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Email (optional)</FormLabel>
-                  <FormControl>
-                    <Input
-                      type="email"
-                      placeholder="contact@company.com"
-                      value={field.value ?? ''}
-                      onChange={(e) => field.onChange(e.target.value || null)}
-                      disabled={isLoading}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="phone"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Phone (optional)</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="(11) 99999-9999"
-                      value={field.value ?? ''}
-                      onChange={(e) => field.onChange(e.target.value || null)}
-                      disabled={isLoading}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              control={form.control}
-              name="website"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Website (optional)</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="www.company.com"
-                      value={field.value ?? ''}
-                      onChange={(e) => field.onChange(e.target.value || null)}
-                      disabled={isLoading}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {/* Business Information */}
-            <FormField
-              control={form.control}
-              name="industry"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Industry (optional)</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="e.g., Technology, Healthcare"
-                      value={field.value ?? ''}
-                      onChange={(e) => field.onChange(e.target.value || null)}
-                      disabled={isLoading}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <div className="grid gap-4 grid-cols-2">
-              <FormField
-                control={form.control}
-                name="annual_revenue"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Annual Revenue (optional)</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="number"
-                        placeholder="0"
-                        value={field.value ?? ''}
-                        onChange={(e) =>
-                          field.onChange(
-                            e.target.value ? Number(e.target.value) : null
-                          )
-                        }
-                        disabled={isLoading}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="employee_count"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Employees (optional)</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="number"
-                        placeholder="0"
-                        value={field.value ?? ''}
-                        onChange={(e) =>
-                          field.onChange(
-                            e.target.value ? Number(e.target.value) : null
-                          )
-                        }
-                        disabled={isLoading}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            {/* Address Information */}
-            <div className="grid gap-4 grid-cols-2">
-              <FormField
-                control={form.control}
-                name="city"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>City (optional)</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="São Paulo"
-                        value={field.value ?? ''}
-                        onChange={(e) => field.onChange(e.target.value || null)}
-                        disabled={isLoading}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="state"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>State (optional)</FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder="SP"
-                        maxLength={2}
-                        value={field.value ?? ''}
-                        onChange={(e) => field.onChange(e.target.value || null)}
-                        disabled={isLoading}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-            </div>
-
-            {/* Owner */}
-            <FormField
-              control={form.control}
-              name="owner_user_id"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>Owner (optional)</FormLabel>
-                  <Select
-                    value={field.value ? String(field.value) : ''}
-                    onValueChange={(value) =>
-                      field.onChange(value ? Number(value) : null)
-                    }
-                    disabled={isLoading}
-                  >
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue placeholder="Unassigned" />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      <SelectItem value="">Unassigned</SelectItem>
-                      {owners.map((owner) => (
-                        <SelectItem key={owner.id} value={String(owner.id)}>
-                          {owner.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            {/* Submit Button */}
-            <div className="flex justify-end gap-2 pt-4 border-t">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => onOpenChange(false)}
-                disabled={isLoading}
-              >
-                Cancel
-              </Button>
-              <Button type="submit" disabled={isLoading}>
-                {isLoading ? 'Saving...' : 'Save Account'}
-              </Button>
-            </div>
-          </form>
-        </Form>
-      </SheetContent>
-    </Sheet>
-  );
-}
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import type { Account, AccountFormValues, UserOption } from './account-types';
+
+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) => Promise<void>;
+  isLoading?: boolean;
+}
+
+function emptyToNull(value: string | null | undefined) {
+  const normalized = String(value ?? '').trim();
+  return normalized ? normalized : null;
+}
+
+export function AccountFormSheet({
+  open,
+  onOpenChange,
+  account,
+  owners,
+  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: {
+      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,
+    },
+  });
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    if (account) {
+      form.reset({
+        name: account.name,
+        trade_name: account.trade_name ?? null,
+        status: account.status,
+        industry: account.industry ?? null,
+        website: account.website ?? null,
+        email: account.email ?? null,
+        phone: account.phone ?? null,
+        owner_user_id: account.owner_user_id ?? null,
+        annual_revenue: account.annual_revenue ?? null,
+        employee_count: account.employee_count ?? null,
+        lifecycle_stage: account.lifecycle_stage ?? 'prospect',
+        city: account.city ?? null,
+        state: account.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 = 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 ? t('form.editTitle') : t('form.createTitle')}
+          </SheetTitle>
+          <SheetDescription>
+            {account ? t('form.editDescription') : t('form.createDescription')}
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className="space-y-4 py-4"
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('form.companyName')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('form.placeholders.companyName')}
+                      {...field}
+                      disabled={isLoading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="trade_name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('form.tradeName')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('form.placeholders.tradeName')}
+                      value={field.value ?? ''}
+                      onChange={(event) =>
+                        field.onChange(event.target.value || null)
+                      }
+                      disabled={isLoading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="status"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.status')}</FormLabel>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      disabled={isLoading}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="active">
+                          {t('status_active')}
+                        </SelectItem>
+                        <SelectItem value="inactive">
+                          {t('status_inactive')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="lifecycle_stage"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.lifecycleStage')}</FormLabel>
+                    <Select
+                      value={field.value ?? 'prospect'}
+                      onValueChange={(value) => field.onChange(value || null)}
+                      disabled={isLoading}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <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 />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('form.email')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="email"
+                      placeholder={t('form.placeholders.email')}
+                      value={field.value ?? ''}
+                      onChange={(event) =>
+                        field.onChange(event.target.value || null)
+                      }
+                      disabled={isLoading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="phone"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('form.phone')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('form.placeholders.phone')}
+                      value={field.value ?? ''}
+                      onChange={(event) =>
+                        field.onChange(event.target.value || null)
+                      }
+                      disabled={isLoading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="website"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('form.website')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('form.placeholders.website')}
+                      value={field.value ?? ''}
+                      onChange={(event) =>
+                        field.onChange(event.target.value || null)
+                      }
+                      disabled={isLoading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="industry"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('form.industry')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('form.placeholders.industry')}
+                      value={field.value ?? ''}
+                      onChange={(event) =>
+                        field.onChange(event.target.value || null)
+                      }
+                      disabled={isLoading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="annual_revenue"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.annualRevenue')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        inputMode="decimal"
+                        min="0"
+                        step="0.01"
+                        placeholder={t('form.placeholders.annualRevenue')}
+                        value={field.value ?? ''}
+                        onChange={(event) =>
+                          field.onChange(
+                            event.target.value
+                              ? Number(event.target.value)
+                              : null
+                          )
+                        }
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="employee_count"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.employeeCount')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        inputMode="numeric"
+                        min="0"
+                        step="1"
+                        placeholder={t('form.placeholders.employeeCount')}
+                        value={field.value ?? ''}
+                        onChange={(event) =>
+                          field.onChange(
+                            event.target.value
+                              ? Number(event.target.value)
+                              : null
+                          )
+                        }
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <FormField
+                control={form.control}
+                name="city"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.city')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('form.placeholders.city')}
+                        value={field.value ?? ''}
+                        onChange={(event) =>
+                          field.onChange(event.target.value || null)
+                        }
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="state"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('form.state')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('form.placeholders.state')}
+                        maxLength={2}
+                        value={field.value ?? ''}
+                        onChange={(event) =>
+                          field.onChange(event.target.value || null)
+                        }
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="owner_user_id"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('form.owner')}</FormLabel>
+                  <Select
+                    value={
+                      field.value != null ? String(field.value) : 'unassigned'
+                    }
+                    onValueChange={(value) =>
+                      field.onChange(
+                        value === 'unassigned' ? null : Number(value)
+                      )
+                    }
+                    disabled={isLoading}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t('unassigned')} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="unassigned">
+                        {t('unassigned')}
+                      </SelectItem>
+                      {owners.map((owner) => (
+                        <SelectItem key={owner.id} value={String(owner.id)}>
+                          {owner.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2 border-t pt-4">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                disabled={isLoading}
+              >
+                {t('cancel')}
+              </Button>
+              <Button type="submit" disabled={isLoading}>
+                {isLoading
+                  ? t('form.saving')
+                  : account
+                    ? t('form.updateSubmit')
+                    : t('form.createSubmit')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}