santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
santasri.pachhal
2026-06-23 12:56:23 +05:30
parent a731fca5e0
commit 27cf5c9d3f
16 changed files with 162 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/(modules)/clients/components/ClientColumns.tsx
View File

@@ -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>
),
},
{

95
src/app/(modules)/clients/components/ClientSheet.tsx
View File

@@ -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')}
/>