@hed-hog/contact 0.0.301 → 0.0.303

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

@@ -1,6 +1,11 @@
 'use client';
 
-import { Button } from '@/components/ui/button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { FormActions } from '@/components/ui/form-actions';
 import {
   Form,
   FormControl,
@@ -17,6 +22,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
 import {
   Sheet,
   SheetContent,
@@ -25,9 +31,10 @@ import {
   SheetTitle,
 } from '@/components/ui/sheet';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Building2, ChevronDown, Globe, MapPin, Users } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useEffect, useMemo } from 'react';
-import { useForm } from 'react-hook-form';
+import { type ReactNode, useEffect, useMemo } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import { z } from 'zod';
 import type { Account, AccountFormValues, UserOption } from './account-types';
 
@@ -61,6 +68,28 @@ function emptyToNull(value: string | null | undefined) {
   return normalized ? normalized : null;
 }
 
+function SectionHeader({
+  title,
+  description,
+  icon,
+}: {
+  title: string;
+  description: string;
+  icon: ReactNode;
+}) {
+  return (
+    <div className="flex items-start gap-2.5">
+      <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border bg-background text-muted-foreground">
+        {icon}
+      </div>
+      <div className="space-y-0.5">
+        <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+        <p className="text-xs text-muted-foreground">{description}</p>
+      </div>
+    </div>
+  );
+}
+
 export function AccountFormSheet({
   open,
   onOpenChange,
@@ -196,375 +225,517 @@ export function AccountFormSheet({
     });
   };
 
+  const watchedName = useWatch({
+    control: form.control,
+    name: 'name',
+  });
+  const additionalDetailsDefaultOpen = Boolean(
+    account?.industry ||
+    account?.annual_revenue != null ||
+    account?.employee_count != null
+  );
+
+  const companyPreviewName =
+    watchedName?.trim() || account?.name || t('form.summary.newCompany');
+
+  const handleSheetOpenChange = (nextOpen: boolean) => {
+    if (isLoading && !nextOpen) {
+      return;
+    }
+
+    onOpenChange(nextOpen);
+  };
+
   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>
+    <Sheet open={open} onOpenChange={handleSheetOpenChange}>
+      <SheetContent className="flex h-full w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-lg">
+        <SheetHeader className="shrink-0 border-b px-4 py-4 text-left">
+          <div className="flex items-start gap-3">
+            <div
+              className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${
+                account
+                  ? 'bg-amber-500/10 text-amber-600'
+                  : 'bg-blue-500/10 text-blue-600'
+              }`}
+            >
+              <Building2 className="h-5 w-5" />
+            </div>
+            <div className="min-w-0 space-y-1">
+              <SheetTitle>
+                {account ? t('form.editTitle') : t('form.createTitle')}
+              </SheetTitle>
+              <SheetDescription>
+                {account
+                  ? t('form.editDescription')
+                  : t('form.createDescription')}
+              </SheetDescription>
+            </div>
+          </div>
         </SheetHeader>
 
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(handleSubmit)}
-            className="space-y-4 py-4"
+            className="flex h-full flex-col [&_button[role='combobox']]:h-9 [&_input]:h-9 [&_label]:text-xs [&_label]:font-medium"
           >
-            <FormField
-              control={form.control}
-              name="name"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{t('form.companyName')}</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder={t('form.placeholders.companyName')}
-                      {...field}
-                      disabled={isLoading}
+            <div className="flex-1 overflow-y-auto">
+              <div className="space-y-5 px-4 py-4">
+                <div className="rounded-xl border bg-muted/20 p-3">
+                  <p className="truncate text-sm font-semibold text-foreground">
+                    {companyPreviewName}
+                  </p>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {account
+                      ? t('form.summary.editHint')
+                      : t('form.summary.createHint')}
+                  </p>
+                </div>
+
+                <section className="space-y-3">
+                  <SectionHeader
+                    title={t('form.sections.identityTitle')}
+                    description={t('form.sections.identityDescription')}
+                    icon={<Building2 className="h-4 w-4" />}
+                  />
+
+                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                    <FormField
+                      control={form.control}
+                      name="name"
+                      render={({ field }) => (
+                        <FormItem className="space-y-1.5 sm:col-span-2">
+                          <FormLabel>{t('form.companyName')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder={t('form.placeholders.companyName')}
+                              autoFocus={open}
+                              autoComplete="organization"
+                              {...field}
+                              disabled={isLoading}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
                     />
-                  </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}
+                    <FormField
+                      control={form.control}
+                      name="trade_name"
+                      render={({ field }) => (
+                        <FormItem className="space-y-1.5 sm:col-span-2">
+                          <FormLabel>{t('form.tradeName')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder={t('form.placeholders.tradeName')}
+                              autoComplete="organization-title"
+                              value={field.value ?? ''}
+                              onChange={(event) =>
+                                field.onChange(event.target.value || null)
+                              }
+                              disabled={isLoading}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
                     />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+                  </div>
+                </section>
 
-            <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>
+                <section className="space-y-3">
+                  <SectionHeader
+                    title={t('form.sections.relationshipTitle')}
+                    description={t('form.sections.relationshipDescription')}
+                    icon={<Users className="h-4 w-4" />}
+                  />
 
-            <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}
+                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                    <FormField
+                      control={form.control}
+                      name="status"
+                      render={({ field }) => (
+                        <FormItem className="space-y-1.5">
+                          <FormLabel>{t('form.status')}</FormLabel>
+                          <Select
+                            value={field.value}
+                            onValueChange={field.onChange}
+                            disabled={isLoading}
+                          >
+                            <FormControl>
+                              <SelectTrigger className="w-full">
+                                <SelectValue />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+                              <SelectItem value="active">
+                                {t('status_active')}
+                              </SelectItem>
+                              <SelectItem value="inactive">
+                                {t('status_inactive')}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
                     />
-                  </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}
+                    <FormField
+                      control={form.control}
+                      name="lifecycle_stage"
+                      render={({ field }) => (
+                        <FormItem className="space-y-1.5">
+                          <FormLabel>{t('form.lifecycleStage')}</FormLabel>
+                          <Select
+                            value={field.value ?? 'prospect'}
+                            onValueChange={(value) =>
+                              field.onChange(value || null)
+                            }
+                            disabled={isLoading}
+                          >
+                            <FormControl>
+                              <SelectTrigger className="w-full">
+                                <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>
+                      )}
                     />
-                  </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}
+                    <FormField
+                      control={form.control}
+                      name="owner_user_id"
+                      render={({ field }) => (
+                        <FormItem className="space-y-1.5 sm:col-span-2">
+                          <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 className="w-full">
+                                <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>
+                      )}
                     />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+                  </div>
+                </section>
+
+                <section className="space-y-3">
+                  <SectionHeader
+                    title={t('form.sections.contactTitle')}
+                    description={t('form.sections.contactDescription')}
+                    icon={<Globe className="h-4 w-4" />}
+                  />
 
-            <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}
+                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                    <FormField
+                      control={form.control}
+                      name="email"
+                      render={({ field }) => (
+                        <FormItem className="space-y-1.5">
+                          <FormLabel>{t('form.email')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="email"
+                              placeholder={t('form.placeholders.email')}
+                              autoComplete="email"
+                              value={field.value ?? ''}
+                              onChange={(event) =>
+                                field.onChange(event.target.value || null)
+                              }
+                              disabled={isLoading}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
                     />
-                  </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>
+                    <FormField
+                      control={form.control}
+                      name="phone"
+                      render={({ field }) => (
+                        <FormItem className="space-y-1.5">
+                          <FormLabel>{t('form.phone')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              type="tel"
+                              placeholder={t('form.placeholders.phone')}
+                              autoComplete="tel"
+                              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="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="website"
+                      render={({ field }) => (
+                        <FormItem className="space-y-1.5 sm:col-span-2">
+                          <FormLabel>{t('form.website')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder={t('form.placeholders.website')}
+                              autoCapitalize="none"
+                              autoCorrect="off"
+                              value={field.value ?? ''}
+                              onChange={(event) =>
+                                field.onChange(event.target.value || null)
+                              }
+                              disabled={isLoading}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </section>
 
-            <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>
-              )}
-            />
+                <section className="space-y-3">
+                  <SectionHeader
+                    title={t('form.sections.locationTitle')}
+                    description={t('form.sections.locationDescription')}
+                    icon={<MapPin className="h-4 w-4" />}
+                  />
+
+                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                    <FormField
+                      control={form.control}
+                      name="city"
+                      render={({ field }) => (
+                        <FormItem className="space-y-1.5">
+                          <FormLabel>{t('form.city')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder={t('form.placeholders.city')}
+                              autoComplete="address-level2"
+                              value={field.value ?? ''}
+                              onChange={(event) =>
+                                field.onChange(event.target.value || null)
+                              }
+                              disabled={isLoading}
+                            />
+                          </FormControl>
+                          <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
+                    <FormField
+                      control={form.control}
+                      name="state"
+                      render={({ field }) => (
+                        <FormItem className="space-y-1.5">
+                          <FormLabel>{t('form.state')}</FormLabel>
+                          <FormControl>
+                            <Input
+                              placeholder={t('form.placeholders.state')}
+                              autoComplete="address-level1"
+                              className="uppercase"
+                              maxLength={2}
+                              value={field.value ?? ''}
+                              onChange={(event) =>
+                                field.onChange(
+                                  event.target.value.toUpperCase() || null
+                                )
+                              }
+                              disabled={isLoading}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </section>
+
+                <Separator />
+
+                <Collapsible defaultOpen={additionalDetailsDefaultOpen}>
+                  <div className="rounded-xl border border-dashed bg-muted/10">
+                    <CollapsibleTrigger asChild>
+                      <button
+                        type="button"
+                        className="group flex w-full items-center justify-between gap-3 px-3 py-3 text-left transition-colors hover:bg-muted/20"
+                      >
+                        <div>
+                          <p className="text-sm font-semibold text-foreground">
+                            {t('form.sections.additionalTitle')}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {t('form.sections.additionalDescription')}
+                          </p>
+                        </div>
+
+                        <div className="flex items-center text-muted-foreground">
+                          <ChevronDown className="h-4 w-4 transition-transform group-data-[state=open]:rotate-180" />
+                        </div>
+                      </button>
+                    </CollapsibleTrigger>
+
+                    <CollapsibleContent className="border-t px-3 pb-3 pt-3">
+                      <div className="space-y-3">
+                        <FormField
+                          control={form.control}
+                          name="industry"
+                          render={({ field }) => (
+                            <FormItem className="space-y-1.5">
+                              <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-3 sm:grid-cols-2">
+                          <FormField
+                            control={form.control}
+                            name="annual_revenue"
+                            render={({ field }) => (
+                              <FormItem className="space-y-1.5">
+                                <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 className="space-y-1.5">
+                                <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>
+                    </CollapsibleContent>
+                  </div>
+                </Collapsible>
+              </div>
+            </div>
+
+            <FormActions
+              sheet
+              cancelLabel={t('cancel')}
+              onCancel={() => {
+                if (!isLoading) {
+                  onOpenChange(false);
+                }
+              }}
+              submitDisabled={isLoading}
+              submitLabel={
+                isLoading
                   ? t('form.saving')
                   : account
                     ? t('form.updateSubmit')
-                    : t('form.createSubmit')}
-              </Button>
-            </div>
+                    : t('form.createSubmit')
+              }
+              submitType="submit"
+            />
           </form>
         </Form>
       </SheetContent>