feat: implement MobileInput component for standardized mobile number input and update related forms to use it

assets/admin/pages/RepresentationsPage.tsx

@@ -8,6 +8,8 @@ import { z } from 'zod';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
+import MobileInput from '../components/ui/MobileInput';
+import { iranMobileSchema } from '../lib/utils';
 import type { Representation, City } from '../types';
 import { formatDate, formatRial, formatNumber } from '../lib/utils';
 import DataTable, { Column } from '../components/ui/DataTable';
@@ -19,7 +21,7 @@ import SearchableSelect from '../components/ui/SearchableSelect';
 
 const schema = z.object({
   full_name:          z.string().min(2, 'نام الزامی است'),
-  mobile_number:      z.string().min(10, 'شماره موبایل معتبر نیست'),
+  mobile_number:      iranMobileSchema,
   city_id:            z.number().nullable().optional(),
   commission_percent: z.coerce.number().min(0).max(100),
 });
@@ -177,7 +179,7 @@ export default function RepresentationsPage() {
           </div>
           <div className="form-row" style={{ marginTop: 12 }}>
             <label>شماره موبایل</label>
-            <input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx" className="input" />
+            <MobileInput className="input" hasError={!!errors.mobile_number} {...register('mobile_number')} />
             {errors.mobile_number && <p className="err-text">{errors.mobile_number.message}</p>}
           </div>
           <div className="form-row" style={{ marginTop: 12 }}>