feat(forms): add PhoneInput and unify module form validation UX

src/app/(modules)/tenants/components/TenantSheet.tsx

@@ -1,10 +1,15 @@
 'use client';
 
-import type { ComponentProps } from 'react';
-import type { FieldErrors, UseFormRegister } from 'react-hook-form';
+import { useMemo, useRef, type ComponentProps } from 'react';
+import {
+  Controller,
+  type Control,
+  type FieldErrors,
+  type UseFormRegister,
+} from 'react-hook-form';
 import { Loader2 } from 'lucide-react';
 
-import { FormField } from '@/components/form';
+import { FormField, PhoneInput, SelectPopover } from '@/components/form';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -15,16 +20,12 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import type { Client, Plan } from '@/types';
 
-import type { TenantFormValues } from '../hooks/useTenantForm';
+import type {
+  TenantAdminFieldLocks,
+  TenantFormValues,
+} from '../hooks/useTenantForm';
 
 interface TenantSheetProps {
   open: boolean;
@@ -32,6 +33,7 @@ interface TenantSheetProps {
   tenantId?: number;
   isEditMode: boolean;
   register: UseFormRegister<TenantFormValues>;
+  control: Control<TenantFormValues>;
   errors: FieldErrors<TenantFormValues>;
   isSubmitted: boolean;
   onSubmit: ComponentProps<'form'>['onSubmit'];
@@ -46,6 +48,7 @@ interface TenantSheetProps {
   isLookupsLoading: boolean;
   isSaving: boolean;
   adminEmail?: string;
+  adminFieldLocks: TenantAdminFieldLocks;
 }
 
 export function TenantSheet({
@@ -54,6 +57,7 @@ export function TenantSheet({
   tenantId,
   isEditMode,
   register,
+  control,
   errors,
   isSubmitted,
   onSubmit,
@@ -68,10 +72,30 @@ export function TenantSheet({
   isLookupsLoading,
   isSaving,
   adminEmail,
+  adminFieldLocks,
 }: TenantSheetProps) {
+  const dropdownPortalRef = useRef<HTMLDivElement | null>(null);
   const fieldError = (field: keyof TenantFormValues) =>
     isSubmitted ? errors[field]?.message : undefined;
 
+  const clientOptions = useMemo(
+    () =>
+      clients.map((client) => ({
+        value: String(client.id),
+        label: [client.first_name, client.last_name].filter(Boolean).join(' '),
+      })),
+    [clients],
+  );
+
+  const planOptions = useMemo(
+    () =>
+      plans.map((plan) => ({
+        value: String(plan.id),
+        label: plan.name,
+      })),
+    [plans],
+  );
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col gap-0 p-0 sm:max-w-3xl">
@@ -85,7 +109,11 @@ export function TenantSheet({
           </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-[50vh] space-y-5 overflow-y-auto px-6 py-4">
             <div className="space-y-1">
               <p>Basic Information</p>
@@ -129,34 +157,23 @@ export function TenantSheet({
 
             <div className="grid gap-4 md:grid-cols-2">
               <FormField
+                id="tenant-client"
                 label="Client"
                 required
                 error={fieldError('client_id')}
               >
-                <Select
+                <SelectPopover
+                  options={clientOptions}
                   value={clientId}
                   onValueChange={onClientChange}
                   disabled={isLookupsLoading}
-                >
-                  <SelectTrigger>
-                    <SelectValue
-                      placeholder={
-                        isLookupsLoading
-                          ? 'Loading clients...'
-                          : 'Select client'
-                      }
-                    />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {clients.map((client) => (
-                      <SelectItem key={client.id} value={String(client.id)}>
-                        {[client.first_name, client.last_name]
-                          .filter(Boolean)
-                          .join(' ')}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  portalContainer={dropdownPortalRef}
+                  placeholder={
+                    isLookupsLoading ? 'Loading clients...' : 'Select client'
+                  }
+                  searchPlaceholder="Search clients"
+                  emptyMessage="No clients found."
+                />
                 <input
                   type="hidden"
                   {...register('client_id')}
@@ -166,30 +183,23 @@ export function TenantSheet({
               </FormField>
 
               <FormField
+                id="tenant-plan"
                 label="Subscription Plan"
                 required
                 error={fieldError('plan_id')}
               >
-                <Select
+                <SelectPopover
+                  options={planOptions}
                   value={planId}
                   onValueChange={onPlanChange}
                   disabled={isLookupsLoading}
-                >
-                  <SelectTrigger>
-                    <SelectValue
-                      placeholder={
-                        isLookupsLoading ? 'Loading plans...' : 'Select plan'
-                      }
-                    />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {plans.map((plan) => (
-                      <SelectItem key={plan.id} value={String(plan.id)}>
-                        {plan.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  portalContainer={dropdownPortalRef}
+                  placeholder={
+                    isLookupsLoading ? 'Loading plans...' : 'Select plan'
+                  }
+                  searchPlaceholder="Search plans"
+                  emptyMessage="No plans found."
+                />
                 <input
                   type="hidden"
                   {...register('plan_id')}
@@ -242,6 +252,7 @@ export function TenantSheet({
                       id="admin-first-name"
                       placeholder="Enter first name"
                       aria-invalid={!!fieldError('admin_first_name')}
+                      readOnly={adminFieldLocks.admin_first_name}
                       {...register('admin_first_name')}
                     />
                   </FormField>
@@ -256,6 +267,7 @@ export function TenantSheet({
                       id="admin-last-name"
                       placeholder="Enter last name"
                       aria-invalid={!!fieldError('admin_last_name')}
+                      readOnly={adminFieldLocks.admin_last_name}
                       {...register('admin_last_name')}
                     />
                   </FormField>
@@ -273,6 +285,7 @@ export function TenantSheet({
                       type="email"
                       placeholder="admin@example.com"
                       aria-invalid={!!fieldError('admin_email')}
+                      readOnly={adminFieldLocks.admin_email}
                       {...register('admin_email')}
                     />
                   </FormField>
@@ -282,11 +295,20 @@ export function TenantSheet({
                     label="Phone Number"
                     error={fieldError('admin_phone_number')}
                   >
-                    <Input
-                      id="admin-phone"
-                      placeholder="+91-9000011111"
-                      aria-invalid={!!fieldError('admin_phone_number')}
-                      {...register('admin_phone_number')}
+                    <Controller
+                      control={control}
+                      name="admin_phone_number"
+                      render={({ field }) => (
+                        <PhoneInput
+                          value={field.value}
+                          onChange={field.onChange}
+                          onBlur={field.onBlur}
+                          placeholder="Enter phone number"
+                          aria-invalid={!!fieldError('admin_phone_number')}
+                          disabled={adminFieldLocks.admin_phone_number}
+                          portalContainer={dropdownPortalRef}
+                        />
+                      )}
                     />
                   </FormField>
                 </div>
@@ -322,6 +344,8 @@ export function TenantSheet({
             </Button>
           </DialogFooter>
         </form>
+
+        <div ref={dropdownPortalRef} />
       </DialogContent>
     </Dialog>
   );