feat(clients): align client form with first and last name API fields

2026-06-23 12:56:23 +05:30
parent a731fca5e0
commit 27cf5c9d3f
16 changed files with 162 additions and 85 deletions
--- a/src/app/(modules)/clients/components/ClientColumns.tsx
+++ b/src/app/(modules)/clients/components/ClientColumns.tsx
@@ -19,10 +19,12 @@ export function useClientColumns(): ColumnDef<Client>[] {
  return useMemo(() => {
    return [
      {
-        accessorKey: 'name',
+        accessorKey: 'first_name',
        header: 'Client',
        cell: ({ row }) => (
-          <span className="font-medium">{row.original.name}</span>
+          <span className="font-medium">
+            {`${row.original.first_name} ${row.original.last_name}`.trim()}
+          </span>
        ),
      },
      {
--- a/src/app/(modules)/clients/components/ClientSheet.tsx
+++ b/src/app/(modules)/clients/components/ClientSheet.tsx
@@ -40,7 +40,12 @@ export function ClientSheet({
  canSubmit,
  isSaving,
 }: ClientSheetProps) {
-  const nameErrorMessage = isSubmitted ? errors.name?.message : undefined;
+  const firstNameErrorMessage = isSubmitted
+    ? errors.first_name?.message
+    : undefined;
+  const lastNameErrorMessage = isSubmitted
+    ? errors.last_name?.message
+    : undefined;
  const emailErrorMessage = isSubmitted ? errors.email?.message : undefined;
  const landlineErrorMessage = isSubmitted
    ? errors.landline_number?.message
@@ -68,23 +73,43 @@ export function ClientSheet({
          </DialogDescription>
        </DialogHeader>

-        <form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
+        <form
+          noValidate
+          onSubmit={onSubmit}
+          className="flex min-h-0 flex-1 flex-col"
+        >
          <div className="max-h-[58vh] space-y-5 overflow-y-auto px-6 py-4">
            <div className="grid gap-4 md:grid-cols-2">
              <FormField
-                id="client-name"
-                label="Client Name"
+                id="client-first-name"
+                label="First Name"
                required
-                error={nameErrorMessage}
+                error={firstNameErrorMessage}
              >
                <Input
-                  id="client-name"
-                  placeholder="Enter client name"
-                  aria-invalid={!!nameErrorMessage}
-                  {...register('name')}
+                  id="client-first-name"
+                  placeholder="Enter first name"
+                  aria-invalid={!!firstNameErrorMessage}
+                  {...register('first_name')}
                />
              </FormField>

+              <FormField
+                id="client-last-name"
+                label="Last Name"
+                required
+                error={lastNameErrorMessage}
+              >
+                <Input
+                  id="client-last-name"
+                  placeholder="Enter last name"
+                  aria-invalid={!!lastNameErrorMessage}
+                  {...register('last_name')}
+                />
+              </FormField>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
              <FormField
                id="client-email"
                label="Company Email"
@@ -94,14 +119,12 @@ export function ClientSheet({
                <Input
                  id="client-email"
                  type="email"
-                  placeholder="info@example.com"
+                  placeholder="Enter company email"
                  aria-invalid={!!emailErrorMessage}
                  {...register('email')}
                />
              </FormField>
-            </div>

-            <div className="grid gap-4 md:grid-cols-2">
              <FormField
                id="landline-number"
                label="Landline Number"
@@ -110,42 +133,50 @@ export function ClientSheet({
              >
                <Input
                  id="landline-number"
-                  placeholder="+91-22-12345678"
+                  placeholder="Enter landline number"
                  aria-invalid={!!landlineErrorMessage}
                  {...register('landline_number')}
                />
              </FormField>
-
-              <FormField
-                id="address"
-                label="Address"
-                required
-                error={addressErrorMessage}
-              >
-                <Input
-                  id="address"
-                  placeholder="12 MG Road, Mumbai, MH 400001"
-                  aria-invalid={!!addressErrorMessage}
-                  {...register('address')}
-                />
-              </FormField>
            </div>

+            <FormField
+              id="address"
+              label="Address"
+              required
+              error={addressErrorMessage}
+            >
+              <Input
+                id="address"
+                placeholder="Enter address"
+                aria-invalid={!!addressErrorMessage}
+                {...register('address')}
+              />
+            </FormField>
+
            <div className="grid gap-4 md:grid-cols-3">
              <FormField id="gst" label="GST">
                <Input
                  id="gst"
-                  placeholder="27ABCDE1234F1Z5"
+                  placeholder="Enter GST number"
                  {...register('gst')}
                />
              </FormField>

              <FormField id="pan" label="PAN">
-                <Input id="pan" placeholder="ABCDE1234F" {...register('pan')} />
+                <Input
+                  id="pan"
+                  placeholder="Enter PAN number"
+                  {...register('pan')}
+                />
              </FormField>

              <FormField id="tan" label="TAN">
-                <Input id="tan" placeholder="MUMA12345B" {...register('tan')} />
+                <Input
+                  id="tan"
+                  placeholder="Enter TAN number"
+                  {...register('tan')}
+                />
              </FormField>
            </div>

@@ -172,7 +203,7 @@ export function ClientSheet({
              >
                <Input
                  id="contact-phone-number"
-                  placeholder="+919876543210"
+                  placeholder="Enter contact phone"
                  aria-invalid={!!contactPhoneErrorMessage}
                  {...register('contact_phone_number')}
                />
@@ -187,7 +218,7 @@ export function ClientSheet({
                <Input
                  id="contact-email"
                  type="email"
-                  placeholder="contact@example.com"
+                  placeholder="Enter contact email"
                  aria-invalid={!!contactEmailErrorMessage}
                  {...register('contact_email')}
                />
--- a/src/app/(modules)/clients/hooks/useClientForm.ts
+++ b/src/app/(modules)/clients/hooks/useClientForm.ts
@@ -9,37 +9,32 @@ import { z } from 'zod';
 import type { Client } from '@/types';
 import { useSaveClientMutation } from './useClientMutations';

-const phoneSchema = z
-  .string()
-  .trim()
-  .min(1, 'Phone number is required')
-  .regex(/^\+(?:[0-9] ?|-){6,18}[0-9]$/, 'Please enter a valid phone number');
-
+const requiredText = (message: string) => z.string().trim().min(1, message);
 const optionalTaxIdSchema = z.string().trim();

 const clientFormSchema = z.object({
  id: z.number().optional(),
-  name: z.string().trim().min(1, 'Client name is required'),
-  email: z.string().trim().min(1, 'Email is required').email('Invalid email'),
-  landline_number: phoneSchema,
-  address: z.string().trim().min(1, 'Address is required'),
+  first_name: requiredText('First name is required'),
+  last_name: requiredText('Last name is required'),
+  email: requiredText('Email is required').email('Invalid email'),
+  landline_number: requiredText('Landline number is required'),
+  address: requiredText('Address is required'),
  gst: optionalTaxIdSchema,
  pan: optionalTaxIdSchema,
  tan: optionalTaxIdSchema,
-  contact_name: z.string().trim().min(1, 'Contact name is required'),
-  contact_phone_number: phoneSchema,
-  contact_email: z
-    .string()
-    .trim()
-    .min(1, 'Contact email is required')
-    .email('Invalid contact email'),
+  contact_name: requiredText('Contact name is required'),
+  contact_phone_number: requiredText('Contact phone number is required'),
+  contact_email: requiredText('Contact email is required').email(
+    'Invalid contact email',
+  ),
  is_active: z.boolean(),
 });

 export type ClientFormValues = z.infer<typeof clientFormSchema>;

 const defaultValues: ClientFormValues = {
-  name: '',
+  first_name: '',
+  last_name: '',
  email: '',
  landline_number: '',
  address: '',
@@ -73,7 +68,8 @@ export function useClientForm({ onSaved }: { onSaved: () => void }) {
  });

  const clientId = useWatch({ control, name: 'id' });
-  const name = useWatch({ control, name: 'name' }) || '';
+  const firstName = useWatch({ control, name: 'first_name' }) || '';
+  const lastName = useWatch({ control, name: 'last_name' }) || '';
  const email = useWatch({ control, name: 'email' }) || '';
  const landlineNumber = useWatch({ control, name: 'landline_number' }) || '';
  const address = useWatch({ control, name: 'address' }) || '';
@@ -82,7 +78,8 @@ export function useClientForm({ onSaved }: { onSaved: () => void }) {
    useWatch({ control, name: 'contact_phone_number' }) || '';
  const contactEmail = useWatch({ control, name: 'contact_email' }) || '';
  const canSubmit =
-    name.trim().length > 0 &&
+    firstName.trim().length > 0 &&
+    lastName.trim().length > 0 &&
    email.trim().length > 0 &&
    landlineNumber.trim().length > 0 &&
    address.trim().length > 0 &&
@@ -111,7 +108,8 @@ export function useClientForm({ onSaved }: { onSaved: () => void }) {
    (client: Client) => {
      reset({
        id: client.id,
-        name: client.name || '',
+        first_name: client.first_name || '',
+        last_name: client.last_name || '',
        email: client.email || '',
        landline_number: client.landline_number || '',
        address: client.address || '',
--- a/src/app/(modules)/clients/hooks/useClientMutations.ts
+++ b/src/app/(modules)/clients/hooks/useClientMutations.ts
@@ -20,7 +20,8 @@ export function useSaveClientMutation({ onSaved }: { onSaved: () => void }) {
    mutationFn: (values: ClientFormValues) =>
      clientService.saveClient({
        id: values.id,
-        name: values.name.trim(),
+        first_name: values.first_name.trim(),
+        last_name: values.last_name.trim(),
        email: values.email.trim(),
        landline_number: values.landline_number.trim(),
        address: values.address.trim(),