refactor: Align form validation UX across management dialogs

src/app/(modules)/plans/hooks/usePlanForm.ts

@@ -1,5 +1,6 @@
 'use client';
 
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   collectDefaultPermissionIds,
   collectPermissionIdsByKeys,
@@ -8,25 +9,39 @@ import type { PermissionTreeItem, Plan } from '@/types';
 import { useCallback } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
+import { z } from 'zod';
 
 import { useSavePlanMutation } from './usePlanMutations';
 
-export interface PlanFormValues {
-  id?: number;
-  name: string;
-  slug: string;
-  description: string;
-  price: string;
-  billing_cycle: string;
-  trial_days: number;
-  max_projects: number;
-  max_organizations: number;
-  max_users: number;
-  max_roles: number;
-  permission_ids: number[];
-  is_active: boolean;
-  is_custom: boolean;
-}
+const nonNegativeNumber = z.number().refine(
+  (value) => Number.isFinite(value) && value >= 0,
+  { message: 'Enter a valid number' },
+);
+
+const planFormSchema = z.object({
+  id: z.number().optional(),
+  name: z.string().trim().min(1, 'Plan name is required'),
+  slug: z.string().trim().min(1, 'Slug is required'),
+  description: z.string().trim().min(1, 'Description is required'),
+  price: z
+    .string()
+    .trim()
+    .min(1, 'Price is required')
+    .refine((value) => Number.isFinite(Number(value)) && Number(value) >= 0, {
+      message: 'Enter a valid price',
+    }),
+  billing_cycle: z.string().trim().min(1, 'Billing cycle is required'),
+  trial_days: nonNegativeNumber,
+  max_projects: nonNegativeNumber,
+  max_organizations: nonNegativeNumber,
+  max_users: nonNegativeNumber,
+  max_roles: nonNegativeNumber,
+  permission_ids: z.array(z.number()).min(1, 'Select at least one permission'),
+  is_active: z.boolean(),
+  is_custom: z.boolean(),
+});
+
+export type PlanFormValues = z.infer<typeof planFormSchema>;
 
 const defaultValues: PlanFormValues = {
   name: '',
@@ -62,9 +77,12 @@ export function usePlanForm({
     handleSubmit,
     reset,
     setValue,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting, isSubmitted },
   } = useForm<PlanFormValues>({
     defaultValues,
+    mode: 'onSubmit',
+    reValidateMode: 'onChange',
+    resolver: zodResolver(planFormSchema),
   });
   const saveMutation = useSavePlanMutation({
     onSaved: () => {
@@ -75,26 +93,42 @@ export function usePlanForm({
 
   const planId = useWatch({ control, name: 'id' });
   const permissionIds = useWatch({ control, name: 'permission_ids' }) || [];
+  const name = useWatch({ control, name: 'name' }) || '';
+  const slug = useWatch({ control, name: 'slug' }) || '';
+  const description = useWatch({ control, name: 'description' }) || '';
+  const price = useWatch({ control, name: 'price' }) || '';
+  const canSubmit =
+    name.trim().length > 0 &&
+    slug.trim().length > 0 &&
+    description.trim().length > 0 &&
+    price.trim().length > 0 &&
+    permissionIds.length > 0;
 
-  const onSubmit = handleSubmit((values) => {
-    if (values.permission_ids.length === 0) {
-      toast.error('Select at least one permission');
-      return;
-    }
+  const onSubmit = handleSubmit(
+    (values) => {
+      saveMutation.mutate({
+        ...values,
+        name: values.name.trim(),
+        slug: values.slug.trim(),
+        description: values.description.trim(),
+        price: values.price.trim(),
+        trial_days: toNumber(values.trial_days),
+        max_projects: toNumber(values.max_projects),
+        max_organizations: toNumber(values.max_organizations),
+        max_users: toNumber(values.max_users),
+        max_roles: toNumber(values.max_roles),
+      });
+    },
+    (formErrors) => {
+      const firstMessage = Object.values(formErrors).find(
+        (error) => error?.message,
+      )?.message;
 
-    saveMutation.mutate({
-      ...values,
-      name: values.name.trim(),
-      slug: values.slug.trim(),
-      description: values.description.trim(),
-      price: values.price.trim(),
-      trial_days: toNumber(values.trial_days),
-      max_projects: toNumber(values.max_projects),
-      max_organizations: toNumber(values.max_organizations),
-      max_users: toNumber(values.max_users),
-      max_roles: toNumber(values.max_roles),
-    });
-  });
+      if (firstMessage) {
+        toast.error(String(firstMessage));
+      }
+    },
+  );
 
   const openCreate = useCallback(() => {
     reset({
@@ -146,6 +180,9 @@ export function usePlanForm({
     planId,
     permissionIds,
     setPermissionIds,
+    errors,
+    isSubmitted,
+    canSubmit,
     isSaving: isSubmitting || saveMutation.isPending,
   };
 }