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

feat: add zod validation for role and user forms

Browse Source
This commit is contained in:
santasri.pachhal
2026-06-17 12:05:43 +05:30
parent bd0782a55f
commit 9bb740e446
10 changed files with 270 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/app/(modules)/roles/components/RoleSheet.tsx
View File

@@ -1,13 +1,14 @@
'use client';
import type { ComponentProps } from 'react';
import type { UseFormRegister } from 'react-hook-form';
import type { FieldErrors, UseFormRegister, UseFormReturn } from 'react-hook-form';
import { Loader2 } from 'lucide-react';
import { FormField } from '@/components/form';
import { PermissionTree } from '@/components/permission-tree';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import {
Sheet,
SheetClose,
@@ -26,11 +27,14 @@ interface RoleSheetProps {
onOpenChange: (open: boolean) => void;
roleId?: number;
register: UseFormRegister<RoleFormValues>;
errors: FieldErrors<RoleFormValues>;
touchedFields: UseFormReturn<RoleFormValues>['formState']['touchedFields'];
onSubmit: ComponentProps<'form'>['onSubmit'];
permissionTree: PermissionTreeItem[];
permissionIds: number[];
onPermissionIdsChange: (ids: number[]) => void;
isPermissionsLoading: boolean;
canSubmit: boolean;
isSaving: boolean;
}
@@ -39,13 +43,21 @@ export function RoleSheet({
onOpenChange,
roleId,
register,
errors,
touchedFields,
onSubmit,
permissionTree,
permissionIds,
onPermissionIdsChange,
isPermissionsLoading,
canSubmit,
isSaving,
}: RoleSheetProps) {
const nameErrorMessage = touchedFields.name ? errors.name?.message : undefined;
const displayNameErrorMessage = touchedFields.display_name
? errors.display_name?.message
: undefined;
return (
<Sheet open={open} onOpenChange={onOpenChange}>
<SheetContent
@@ -62,41 +74,52 @@ export function RoleSheet({
<form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
<div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
<div className="grid gap-4 md:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="role-name">Role Name</Label>
<FormField
id="role-name"
label="Role Name"
required
error={nameErrorMessage}
>
<Input
id="role-name"
placeholder="Enter role name"
{...register('name', { required: true })}
required
aria-invalid={!!nameErrorMessage}
{...register('name')}
/>
</div>
<div className="space-y-2">
<Label htmlFor="role-display-name">Display Name</Label>
</FormField>
<FormField
id="role-display-name"
label="Display Name"
required
error={displayNameErrorMessage}
>
<Input
id="role-display-name"
placeholder="Enter display name"
{...register('display_name', { required: true })}
required
aria-invalid={!!displayNameErrorMessage}
{...register('display_name')}
/>
</div>
</FormField>
</div>
<div className="space-y-2">
<Label htmlFor="role-description">Description</Label>
<textarea
<FormField id="role-description" label="Description">
<Textarea
id="role-description"
placeholder="Describe this role"
{...register('description')}
className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
className="min-h-24"
/>
</div>
</FormField>
<div className="space-y-3">
<div className="flex items-center justify-between gap-3">
<Label>Permissions</Label>
<FormField
label="Permissions"
required
error={errors.permission_ids?.message}
className="space-y-3"
labelEnd={
<span className="text-xs text-muted-foreground">{permissionIds.length} selected</span>
</div>
}
>
{isPermissionsLoading ? (
<div className="rounded-md border p-6 text-sm text-muted-foreground">
Loading permissions...
@@ -108,11 +131,11 @@ export function RoleSheet({
onChange={onPermissionIdsChange}
/>
)}
</div>
</FormField>
</div>
<SheetFooter className="shrink-0 border-t px-6 py-4 sm:flex-row sm:justify-end">
<Button type="submit" disabled={isSaving}>
<Button type="submit" disabled={isSaving || !canSubmit}>
{isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
{roleId ? 'Update Role' : 'Create Role'}
</Button>

55
src/app/(modules)/roles/hooks/useRoleForm.ts
View File

@@ -6,20 +6,24 @@ import {
} from '@/components/permission-tree';
import { roleService } from '@/services/api';
import type { PermissionTreeItem, Role } from '@/types';
import { zodResolver } from '@hookform/resolvers/zod';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useCallback } from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';
import { roleKeys } from '../queries/roleKeys';
export interface RoleFormValues {
id?: number;
name: string;
display_name: string;
description: string;
permission_ids: number[];
}
const roleFormSchema = z.object({
id: z.number().optional(),
name: z.string().trim().min(1, 'Role name is required'),
display_name: z.string().trim().min(1, 'Display name is required'),
description: z.string().optional(),
permission_ids: z.array(z.number()).min(1, 'Select at least one permission'),
});
export type RoleFormValues = z.infer<typeof roleFormSchema>;
const defaultValues: RoleFormValues = {
name: '',
@@ -44,13 +48,20 @@ export function useRoleForm({
handleSubmit,
reset,
setValue,
formState: { isSubmitting },
formState: { errors, isSubmitting, touchedFields },
} = useForm<RoleFormValues>({
defaultValues,
mode: 'onTouched',
reValidateMode: 'onChange',
resolver: zodResolver(roleFormSchema),
});
const permissionIds = useWatch({ control, name: 'permission_ids' }) || [];
const roleId = useWatch({ control, name: 'id' });
const roleName = useWatch({ control, name: 'name' }) || '';
const displayName = useWatch({ control, name: 'display_name' }) || '';
const canSubmit =
roleName.trim().length > 0 && displayName.trim().length > 0 && permissionIds.length > 0;
const saveMutation = useMutation({
mutationFn: (values: RoleFormValues) =>
@@ -58,7 +69,7 @@ export function useRoleForm({
id: values.id,
name: values.name.trim(),
display_name: values.display_name.trim(),
description: values.description.trim(),
description: values.description?.trim() ?? '',
organization_id: organizationId,
permission_ids: values.permission_ids,
is_default: false,
@@ -74,13 +85,22 @@ export function useRoleForm({
},
});
const onSubmit = handleSubmit((values) => {
if (values.permission_ids.length === 0) {
toast.error('Select at least one permission');
return;
}
saveMutation.mutate(values);
});
const onSubmit = handleSubmit(
(values) => saveMutation.mutate(values),
(formErrors) => {
if (formErrors.name?.message) {
toast.error(formErrors.name.message);
return;
}
if (formErrors.display_name?.message) {
toast.error(formErrors.display_name.message);
return;
}
if (formErrors.permission_ids?.message) {
toast.error(formErrors.permission_ids.message);
}
},
);
const openCreate = useCallback(() => {
reset({
@@ -115,6 +135,9 @@ export function useRoleForm({
setPermissionIds,
permissionIds,
roleId,
errors,
touchedFields,
canSubmit,
isSaving: isSubmitting || saveMutation.isPending,
};
}

6
src/app/(modules)/roles/page.tsx
View File

@@ -61,6 +61,9 @@ export default function RolesPage() {
roleId,
permissionIds,
setPermissionIds,
errors,
touchedFields,
canSubmit,
isSaving,
} = roleForm;
const statusMutation = useRoleStatusMutation();
@@ -142,11 +145,14 @@ export default function RolesPage() {
onOpenChange={setIsSheetOpen}
roleId={roleId}
register={register}
errors={errors}
touchedFields={touchedFields}
onSubmit={onSubmit}
permissionTree={permissionsQuery.permissionTree}
permissionIds={permissionIds}
onPermissionIdsChange={setPermissionIds}
isPermissionsLoading={permissionsQuery.isLoading}
canSubmit={canSubmit}
isSaving={isSaving}
/>
</>

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

@@ -1,14 +1,12 @@
'use client';
import { useRef, type ComponentProps } from 'react';
import type { UseFormRegister } from 'react-hook-form';
import type { FieldErrors, UseFormRegister, UseFormReturn } from 'react-hook-form';
import { Loader2 } from 'lucide-react';
import { FormField } from '@/components/form';
import { RoleCombobox } from '@/components/lookups/RoleCombobox';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
@@ -17,49 +15,42 @@ import {
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import type { UserFormValues } from '../hooks/useUserForm';
interface UserSheetProps {
open: boolean;
onOpenChange: (open: boolean) => void;
userId?: number;
register: UseFormRegister<UserFormValues>;
errors: FieldErrors<UserFormValues>;
touchedFields: UseFormReturn<UserFormValues>['formState']['touchedFields'];
onSubmit: ComponentProps<'form'>['onSubmit'];
roleId: string;
onRoleChange: (roleId: string) => void;
canSubmit: boolean;
isSaving: boolean;
}
export function UserSheet({
open,
onOpenChange,
userId,
register,
errors,
touchedFields,
onSubmit,
roleId,
onRoleChange,
canSubmit,
isSaving,
}: UserSheetProps) {
const roleComboboxPortalRef = useRef<HTMLDivElement | null>(null);
const firstNameErrorMessage = touchedFields.first_name ? errors.first_name?.message : undefined;
const lastNameErrorMessage = touchedFields.last_name ? errors.last_name?.message : undefined;
const emailErrorMessage = touchedFields.email ? errors.email?.message : undefined;
const phoneErrorMessage = touchedFields.phone_number ? errors.phone_number?.message : undefined;
const roleErrorMessage = touchedFields.role_id ? errors.role_id?.message : undefined;
return (
<Dialog open={open} onOpenChange={onOpenChange}>
@@ -72,54 +63,63 @@ export function UserSheet({
<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="first-name">First Name</Label>
<FormField
id="first-name"
label="First Name"
required
error={firstNameErrorMessage}
>
<Input
id="first-name"
placeholder="Enter first name"
{...register('first_name', { required: true })}
required
aria-invalid={!!firstNameErrorMessage}
{...register('first_name')}
/>
</div>
<div className="space-y-2">
<Label htmlFor="last-name">Last Name</Label>
</FormField>
<FormField
id="last-name"
label="Last Name"
required
error={lastNameErrorMessage}
>
<Input
id="last-name"
placeholder="Enter last name"
{...register('last_name', { required: true })}
required
aria-invalid={!!lastNameErrorMessage}
{...register('last_name')}
/>
</div>
</FormField>
</div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<FormField
id="email"
label="Email"
required
error={emailErrorMessage}
>
<Input
id="email"
type="email"
placeholder="name@example.com"
{...register('email', { required: true })}
required
aria-invalid={!!emailErrorMessage}
{...register('email')}
/>
</div>
<div className="space-y-2">
<Label htmlFor="phone-number">Phone Number</Label>
</FormField>
<FormField
id="phone-number"
label="Phone Number"
error={phoneErrorMessage}
>
<Input
id="phone-number"
placeholder="Enter phone number"
placeholder="+919876543210"
aria-invalid={!!phoneErrorMessage}
{...register('phone_number')}
/>
</div>
<div className="space-y-2">
<Label>Role</Label>
</FormField>
<FormField label="Role" required error={roleErrorMessage}>
<RoleCombobox
value={roleId}
onValueChange={onRoleChange}
@@ -132,11 +132,11 @@ export function UserSheet({
<input
type="hidden"
{...register('role_id', { required: true })}
{...register('role_id')}
value={roleId}
readOnly
/>
</div>
</FormField>
<DialogFooter className="px-0">
<Button
@@ -148,7 +148,7 @@ export function UserSheet({
Cancel
</Button>
<Button type="submit" disabled={isSaving}>
<Button type="submit" disabled={isSaving || !canSubmit}>
{isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
{userId ? 'Update User' : 'Create User'}

65
src/app/(modules)/users/hooks/useUserForm.ts
View File

@@ -1,20 +1,31 @@
'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 { AdministrationUser } from '@/types';
import { useSaveUserMutation } from './useUserMutations';
export interface UserFormValues {
id?: number;
first_name: string;
last_name: string;
email: string;
phone_number: string;
role_id: string;
}
const optionalPhoneSchema = z
.string()
.trim()
.refine((value) => value === '' || /^\+(?:[0-9] ?){6,14}[0-9]$/.test(value), {
message: 'Please enter a valid phone number',
});
const userFormSchema = z.object({
id: z.number().optional(),
first_name: z.string().trim().min(1, 'First name is required'),
last_name: z.string().trim().min(1, 'Last name is required'),
email: z.string().trim().min(1, 'Email is required').email('Invalid email'),
phone_number: optionalPhoneSchema,
role_id: z.string().trim().min(1, 'Role is required'),
});
export type UserFormValues = z.infer<typeof userFormSchema>;
const defaultValues: UserFormValues = {
first_name: '',
@@ -31,9 +42,12 @@ export function useUserForm({ onSaved }: { onSaved: () => void }) {
handleSubmit: submitForm,
reset,
setValue,
formState: { isSubmitting, errors },
formState: { errors, isSubmitting, touchedFields },
} = useForm<UserFormValues>({
defaultValues,
mode: 'onTouched',
reValidateMode: 'onChange',
resolver: zodResolver(userFormSchema),
});
const saveMutation = useSaveUserMutation({
onSaved: () => {
@@ -44,16 +58,39 @@ export function useUserForm({ onSaved }: { onSaved: () => void }) {
const userId = useWatch({ control, name: 'id' });
const roleId = useWatch({ control, name: 'role_id' }) || '';
const firstName = useWatch({ control, name: 'first_name' }) || '';
const lastName = useWatch({ control, name: 'last_name' }) || '';
const email = useWatch({ control, name: 'email' }) || '';
const phoneNumber = useWatch({ control, name: 'phone_number' }) || '';
const isPhoneValid = phoneNumber.trim() === '' || /^\+(?:[0-9] ?){6,14}[0-9]$/.test(phoneNumber.trim());
const canSubmit =
firstName.trim().length > 0 &&
lastName.trim().length > 0 &&
email.trim().length > 0 &&
roleId.trim().length > 0 &&
isPhoneValid;
const handleSubmit = submitForm(
(values) => saveMutation.mutate(values),
(formErrors) => {
if (formErrors.first_name || formErrors.last_name || formErrors.email) {
toast.error('First name, last name and email are required');
if (formErrors.first_name?.message) {
toast.error(formErrors.first_name.message);
return;
}
if (formErrors.role_id) {
toast.error('Select a role');
if (formErrors.last_name?.message) {
toast.error(formErrors.last_name.message);
return;
}
if (formErrors.email?.message) {
toast.error(formErrors.email.message);
return;
}
if (formErrors.phone_number?.message) {
toast.error(formErrors.phone_number.message);
return;
}
if (formErrors.role_id?.message) {
toast.error(formErrors.role_id.message);
}
},
);
@@ -94,6 +131,8 @@ export function useUserForm({ onSaved }: { onSaved: () => void }) {
roleId,
userId,
errors,
touchedFields,
canSubmit,
isSaving: isSubmitting || saveMutation.isPending,
};
}

6
src/app/(modules)/users/page.tsx
View File

@@ -54,6 +54,9 @@ export default function UsersPage() {
userId,
roleId,
setRoleId,
errors,
touchedFields,
canSubmit,
isSaving,
} = userForm;
const statusMutation = useUserStatusMutation();
@@ -145,9 +148,12 @@ export default function UsersPage() {
onOpenChange={setIsSheetOpen}
userId={userId}
register={register}
errors={errors}
touchedFields={touchedFields}
onSubmit={handleSubmit}
roleId={roleId}
onRoleChange={setRoleId}
canSubmit={canSubmit}
isSaving={isSaving}
/>
</>

43
src/components/form/FormField.tsx Normal file
View File

@@ -0,0 +1,43 @@
import type { ReactNode } from 'react';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';
interface FormFieldProps {
id?: string;
label: ReactNode;
labelEnd?: ReactNode;
required?: boolean;
error?: ReactNode;
children: ReactNode;
className?: string;
labelClassName?: string;
errorClassName?: string;
}
export function FormField({
id,
label,
labelEnd,
required = false,
error,
children,
className,
labelClassName,
errorClassName,
}: FormFieldProps) {
return (
<div className={cn('space-y-2', className)}>
<div className="flex items-center justify-between gap-3">
<Label htmlFor={id} className={labelClassName}>
{label} {required ? <span className="text-destructive">*</span> : null}
</Label>
{labelEnd}
</div>
{children}
{error ? (
<p className={cn('-mt-1 text-sm text-destructive', errorClassName)}>{error}</p>
) : null}
</div>
);
}

1
src/components/form/index.ts Normal file
View File

@@ -0,0 +1 @@
export { FormField } from './FormField';