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

refactor: Align form validation UX across management dialogs

Browse Source
This commit is contained in:
santasri.pachhal
2026-06-18 11:05:31 +05:30
parent d7c4027328
commit 9695c80e20
23 changed files with 1458 additions and 1017 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,10 @@
'use client';
import type { ComponentProps } from 'react';
import type { UseFormRegister } from 'react-hook-form';
import type { FieldErrors, UseFormRegister } from 'react-hook-form';
import { Loader2 } from 'lucide-react';
import { FormField } from '@/components/form';
import { Button } from '@/components/ui/button';
import {
Dialog,
@@ -14,7 +15,6 @@ import {
DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import type { ClientFormValues } from '../hooks/useClientForm';
interface ClientSheetProps {
@@ -22,7 +22,10 @@ interface ClientSheetProps {
onOpenChange: (open: boolean) => void;
clientId?: number;
register: UseFormRegister<ClientFormValues>;
errors: FieldErrors<ClientFormValues>;
isSubmitted: boolean;
onSubmit: ComponentProps<'form'>['onSubmit'];
canSubmit: boolean;
isSaving: boolean;
}
@@ -31,115 +34,168 @@ export function ClientSheet({
onOpenChange,
clientId,
register,
errors,
isSubmitted,
onSubmit,
canSubmit,
isSaving,
}: ClientSheetProps) {
const nameErrorMessage = isSubmitted ? errors.name?.message : undefined;
const emailErrorMessage = isSubmitted ? errors.email?.message : undefined;
const landlineErrorMessage = isSubmitted
? errors.landline_number?.message
: undefined;
const addressErrorMessage = isSubmitted ? errors.address?.message : undefined;
const contactNameErrorMessage = isSubmitted
? errors.contact_name?.message
: undefined;
const contactPhoneErrorMessage = isSubmitted
? errors.contact_phone_number?.message
: undefined;
const contactEmailErrorMessage = isSubmitted
? errors.contact_email?.message
: undefined;
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-3xl">
<DialogHeader>
<DialogTitle>
<DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-3xl">
<DialogHeader className="shrink-0 border-b px-6 py-4 pr-12">
<DialogTitle className="text-lg leading-none font-semibold tracking-tight">
{clientId ? 'Edit Client' : 'Create Client'}
</DialogTitle>
<DialogDescription>
<DialogDescription className="text-sm">
Manage company and primary contact details.
</DialogDescription>
</DialogHeader>
<form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="client-name">Name</Label>
<Input
<form 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"
placeholder="Acme Corp"
{...register('name', { required: true })}
label="Client Name"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="client-email">Email</Label>
<Input
error={nameErrorMessage}
>
<Input
id="client-name"
placeholder="Enter client name"
aria-invalid={!!nameErrorMessage}
{...register('name')}
/>
</FormField>
<FormField
id="client-email"
type="email"
placeholder="info@acme.com"
{...register('email', { required: true })}
label="Company Email"
required
/>
error={emailErrorMessage}
>
<Input
id="client-email"
type="email"
placeholder="info@example.com"
aria-invalid={!!emailErrorMessage}
{...register('email')}
/>
</FormField>
</div>
</div>
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="landline-number">Landline Number</Label>
<Input
<div className="grid gap-4 md:grid-cols-2">
<FormField
id="landline-number"
placeholder="+91-22-12345678"
{...register('landline_number', { required: true })}
label="Landline Number"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="address">Address</Label>
<Input
error={landlineErrorMessage}
>
<Input
id="landline-number"
placeholder="+91-22-12345678"
aria-invalid={!!landlineErrorMessage}
{...register('landline_number')}
/>
</FormField>
<FormField
id="address"
placeholder="12 MG Road, Mumbai, MH 400001"
{...register('address', { required: true })}
label="Address"
required
/>
error={addressErrorMessage}
>
<Input
id="address"
placeholder="12 MG Road, Mumbai, MH 400001"
aria-invalid={!!addressErrorMessage}
{...register('address')}
/>
</FormField>
</div>
</div>
<div className="grid gap-4 md:grid-cols-3">
<div className="space-y-2">
<Label htmlFor="gst">GST</Label>
<Input
id="gst"
placeholder="27ABCDE1234F1Z5"
{...register('gst')}
/>
</div>
<div className="space-y-2">
<Label htmlFor="pan">PAN</Label>
<Input id="pan" placeholder="ABCDE1234F" {...register('pan')} />
</div>
<div className="space-y-2">
<Label htmlFor="tan">TAN</Label>
<Input id="tan" placeholder="MUMA12345B" {...register('tan')} />
</div>
</div>
<div className="grid gap-4 md:grid-cols-3">
<FormField id="gst" label="GST">
<Input
id="gst"
placeholder="27ABCDE1234F1Z5"
{...register('gst')}
/>
</FormField>
<div className="grid gap-4 md:grid-cols-3">
<div className="space-y-2">
<Label htmlFor="contact-name">Contact Name</Label>
<Input
<FormField id="pan" label="PAN">
<Input id="pan" placeholder="ABCDE1234F" {...register('pan')} />
</FormField>
<FormField id="tan" label="TAN">
<Input id="tan" placeholder="MUMA12345B" {...register('tan')} />
</FormField>
</div>
<div className="grid gap-4 md:grid-cols-3">
<FormField
id="contact-name"
placeholder="Jane Doe"
{...register('contact_name', { required: true })}
label="Contact Name"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="contact-phone-number">Contact Phone</Label>
<Input
error={contactNameErrorMessage}
>
<Input
id="contact-name"
placeholder="Enter contact name"
aria-invalid={!!contactNameErrorMessage}
{...register('contact_name')}
/>
</FormField>
<FormField
id="contact-phone-number"
placeholder="+91-9876543210"
{...register('contact_phone_number', { required: true })}
label="Contact Phone"
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="contact-email">Contact Email</Label>
<Input
error={contactPhoneErrorMessage}
>
<Input
id="contact-phone-number"
placeholder="+919876543210"
aria-invalid={!!contactPhoneErrorMessage}
{...register('contact_phone_number')}
/>
</FormField>
<FormField
id="contact-email"
type="email"
placeholder="jane.doe@acme.com"
{...register('contact_email', { required: true })}
label="Contact Email"
required
/>
error={contactEmailErrorMessage}
>
<Input
id="contact-email"
type="email"
placeholder="contact@example.com"
aria-invalid={!!contactEmailErrorMessage}
{...register('contact_email')}
/>
</FormField>
</div>
</div>
<DialogFooter className="px-0">
<DialogFooter className="shrink-0 border-t px-6 py-4">
<Button
type="button"
variant="outline"
@@ -148,7 +204,8 @@ export function ClientSheet({
>
Cancel
</Button>
<Button type="submit" disabled={isSaving}>
<Button type="submit" disabled={isSaving || !canSubmit}>
{isSaving ? (
<Loader2 className="mr-2 size-4 animate-spin" />
) : null}

83
src/app/(modules)/clients/hooks/useClientForm.ts
View File

@@ -1,26 +1,42 @@
'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { useCallback } from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';
import type { Client } from '@/types';
import { useSaveClientMutation } from './useClientMutations';
export interface ClientFormValues {
id?: number;
name: string;
email: string;
landline_number: string;
address: string;
gst: string;
pan: string;
tan: string;
contact_name: string;
contact_phone_number: string;
contact_email: string;
is_active: boolean;
}
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 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'),
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'),
is_active: z.boolean(),
});
export type ClientFormValues = z.infer<typeof clientFormSchema>;
const defaultValues: ClientFormValues = {
name: '',
@@ -42,9 +58,12 @@ export function useClientForm({ onSaved }: { onSaved: () => void }) {
handleSubmit: submitForm,
reset,
control,
formState: { isSubmitting, errors },
formState: { isSubmitting, errors, isSubmitted },
} = useForm<ClientFormValues>({
defaultValues,
mode: 'onSubmit',
reValidateMode: 'onChange',
resolver: zodResolver(clientFormSchema),
});
const saveMutation = useSaveClientMutation({
onSaved: () => {
@@ -54,20 +73,32 @@ export function useClientForm({ onSaved }: { onSaved: () => void }) {
});
const clientId = useWatch({ control, name: 'id' });
const name = useWatch({ control, name: 'name' }) || '';
const email = useWatch({ control, name: 'email' }) || '';
const landlineNumber = useWatch({ control, name: 'landline_number' }) || '';
const address = useWatch({ control, name: 'address' }) || '';
const contactName = useWatch({ control, name: 'contact_name' }) || '';
const contactPhoneNumber =
useWatch({ control, name: 'contact_phone_number' }) || '';
const contactEmail = useWatch({ control, name: 'contact_email' }) || '';
const canSubmit =
name.trim().length > 0 &&
email.trim().length > 0 &&
landlineNumber.trim().length > 0 &&
address.trim().length > 0 &&
contactName.trim().length > 0 &&
contactPhoneNumber.trim().length > 0 &&
contactEmail.trim().length > 0;
const handleSubmit = submitForm(
(values) => saveMutation.mutate(values),
(formErrors) => {
if (
formErrors.name ||
formErrors.email ||
formErrors.landline_number ||
formErrors.address ||
formErrors.contact_name ||
formErrors.contact_phone_number ||
formErrors.contact_email
) {
toast.error('Complete all required client fields');
const firstError = Object.values(formErrors).find(
(error) => error?.message,
);
if (firstError?.message) {
toast.error(firstError.message);
}
},
);
@@ -104,6 +135,8 @@ export function useClientForm({ onSaved }: { onSaved: () => void }) {
openEdit,
clientId,
errors,
isSubmitted,
canSubmit,
isSaving: isSubmitting || saveMutation.isPending,
};
}

13
src/app/(modules)/clients/page.tsx
View File

@@ -46,7 +46,15 @@ export default function ClientsPage() {
});
const { openCreate: prepareCreateClient, openEdit: prepareEditClient } =
clientForm;
const { register, handleSubmit, clientId, isSaving } = clientForm;
const {
register,
handleSubmit,
clientId,
errors,
isSubmitted,
canSubmit,
isSaving,
} = clientForm;
const statusMutation = useClientStatusMutation();
const { mutate: updateClientStatus, pendingClientId } = statusMutation;
@@ -126,7 +134,10 @@ export default function ClientsPage() {
onOpenChange={setIsSheetOpen}
clientId={clientId}
register={register}
errors={errors}
isSubmitted={isSubmitted}
onSubmit={handleSubmit}
canSubmit={canSubmit}
isSaving={isSaving}
/>
</>