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

148
src/app/(modules)/users/components/UserSheet.tsx
View File

@@ -60,94 +60,100 @@ export function UserSheet({
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-4 overflow-visible sm:max-w-xl">
<DialogHeader>
<DialogTitle>{userId ? 'Edit User' : 'Create User'}</DialogTitle>
<DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-xl">
<DialogHeader className="shrink-0 border-b px-6 py-4 pr-12">
<DialogTitle className="text-lg leading-none font-semibold tracking-tight">
{userId ? 'Edit User' : 'Create User'}
</DialogTitle>
<DialogDescription>Assign user details and a role.</DialogDescription>
<DialogDescription className="text-sm">
Assign user details and a role.
</DialogDescription>
</DialogHeader>
<form
onSubmit={onSubmit}
className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-4"
className="flex min-h-0 flex-1 flex-col"
>
<div className="grid gap-4 md:grid-cols-2">
<FormField
id="first-name"
label="First Name"
required
error={firstNameErrorMessage}
>
<Input
<div className="max-h-[50vh] space-y-5 overflow-y-auto px-6 py-4">
<div className="grid gap-4 md:grid-cols-2">
<FormField
id="first-name"
placeholder="Enter first name"
aria-invalid={!!firstNameErrorMessage}
{...register('first_name')}
/>
</FormField>
label="First Name"
required
error={firstNameErrorMessage}
>
<Input
id="first-name"
placeholder="Enter first name"
aria-invalid={!!firstNameErrorMessage}
{...register('first_name')}
/>
</FormField>
<FormField
id="last-name"
label="Last Name"
required
error={lastNameErrorMessage}
>
<Input
<FormField
id="last-name"
placeholder="Enter last name"
aria-invalid={!!lastNameErrorMessage}
{...register('last_name')}
/>
</FormField>
</div>
label="Last Name"
required
error={lastNameErrorMessage}
>
<Input
id="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="email"
label="Email"
required
error={emailErrorMessage}
>
<Input
<div className="grid gap-4 md:grid-cols-2">
<FormField
id="email"
placeholder="name@example.com"
aria-invalid={!!emailErrorMessage}
{...register('email')}
/>
</FormField>
label="Email"
required
error={emailErrorMessage}
>
<Input
id="email"
placeholder="name@example.com"
aria-invalid={!!emailErrorMessage}
{...register('email')}
/>
</FormField>
<FormField
id="phone-number"
label="Phone Number"
error={phoneErrorMessage}
>
<Input
<FormField
id="phone-number"
placeholder="+919876543210"
aria-invalid={!!phoneErrorMessage}
{...register('phone_number')}
label="Phone Number"
error={phoneErrorMessage}
>
<Input
id="phone-number"
placeholder="+919876543210"
aria-invalid={!!phoneErrorMessage}
{...register('phone_number')}
/>
</FormField>
</div>
<FormField label="Role" required error={roleErrorMessage}>
<RoleSelect
value={roleId}
onValueChange={onRoleChange}
enabled={open}
disabled={isSaving}
portalContainer={roleComboboxPortalRef}
/>
<input
type="hidden"
{...register('role_id')}
value={roleId}
readOnly
/>
</FormField>
</div>
<FormField label="Role" required error={roleErrorMessage}>
<RoleSelect
value={roleId}
onValueChange={onRoleChange}
enabled={open}
disabled={isSaving}
portalContainer={roleComboboxPortalRef}
/>
<input
type="hidden"
{...register('role_id')}
value={roleId}
readOnly
/>
</FormField>
<DialogFooter className="px-0">
<DialogFooter className="shrink-0 border-t px-6 py-4">
<Button
type="button"
variant="outline"