feat: update representation management to use city_id instead of city and add city filtering

assets/admin/pages/RepresentationDetailPage.tsx

@@ -5,7 +5,7 @@ import { PencilIcon, TrashIcon, CheckCircleIcon, XCircleIcon } from '@heroicons/
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
-import type { Representation } from '../types';
+import type { Representation, Category } from '../types';
 import { formatDate, formatNumber } from '../lib/utils';
 import PageHeader from '../components/ui/PageHeader';
 import { ActiveBadge } from '../components/ui/StatusBadge';
@@ -27,7 +27,14 @@ export default function RepresentationDetailPage() {
   const qc = useQueryClient();
   const [deleteOpen, setDeleteOpen] = useState(false);
   const [editOpen, setEditOpen] = useState(false);
-  const [formData, setFormData] = useState({ full_name: '', city: '', mobile_number: '', commission_percent: '' });
+  const [formData, setFormData] = useState({ full_name: '', city_id: '', mobile_number: '', commission_percent: '' });
+
+  const citiesQuery = useQuery({
+    queryKey: ['categories', 'city'],
+    queryFn: () => api.get<ApiResponse<{ data: Category[] }>>('/api/v1/categorys/city'),
+    staleTime: 5 * 60_000,
+  });
+  const cities: Category[] = (citiesQuery.data?.data as any)?.data ?? [];
 
   const { data, isLoading } = useQuery({
     queryKey: ['representation', uuid],
@@ -74,7 +81,7 @@ export default function RepresentationDetailPage() {
     if (!rep) return;
     setFormData({
       full_name: rep.full_name ?? rep.domain ?? '',
-      city: rep.city ?? '',
+      city_id: rep.city_id ? String(rep.city_id) : '',
       mobile_number: rep.mobile_number ?? '',
       commission_percent: String(rep.commission_percent),
     });
@@ -177,7 +184,7 @@ export default function RepresentationDetailPage() {
               ? <span dir="ltr">{rep.mobile_number}</span>
               : null
           } />
-          <DetailRow label="شهر" value={rep.city} />
+          <DetailRow label="شهر" value={rep.city ?? (rep.city_id ? `شناسه ${rep.city_id}` : null)} />
           <DetailRow label="درصد کمیسیون" value={`${formatNumber(rep.commission_percent)}٪`} />
           <DetailRow label="وضعیت" value={<ActiveBadge active={isActive} />} />
           <DetailRow label="تاریخ ثبت" value={formatDate(rep.created_at)} />
@@ -218,10 +225,10 @@ export default function RepresentationDetailPage() {
             <button
               onClick={() => updateMutation.mutate({
                 full_name: formData.full_name,
-                city: formData.city,
+                city_id: formData.city_id ? parseInt(formData.city_id) : null,
                 mobile_number: formData.mobile_number || null,
                 commission_percent: parseFloat(formData.commission_percent) || rep.commission_percent,
-              })}
+              } as any)}
               disabled={updateMutation.isPending}
               className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors">
               {updateMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
@@ -237,8 +244,16 @@ export default function RepresentationDetailPage() {
           </div>
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">شهر</label>
-            <input value={formData.city} onChange={(e) => setFormData((p) => ({ ...p, city: e.target.value }))}
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+            <select
+              value={formData.city_id}
+              onChange={(e) => setFormData((p) => ({ ...p, city_id: e.target.value }))}
+              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white"
+            >
+              <option value="">انتخاب شهر</option>
+              {cities.map((c) => (
+                <option key={c.id} value={String(c.id)}>{c.label}</option>
+              ))}
+            </select>
           </div>
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">موبایل</label>

assets/admin/pages/RepresentationsPage.tsx

@@ -8,7 +8,7 @@ import { z } from 'zod';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
-import type { Representation } from '../types';
+import type { Representation, Category } from '../types';
 import { formatDate, formatRial, formatNumber } from '../lib/utils';
 import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
@@ -18,8 +18,9 @@ import ConfirmDialog from '../components/ui/ConfirmDialog';
 import Modal from '../components/ui/Modal';
 
 const schema = z.object({
-  domain: z.string().min(3, 'دامنه معتبر نیست'),
-  city: z.string().min(2, 'شهر را وارد کنید'),
+  full_name: z.string().min(2, 'نام الزامی است'),
+  mobile_number: z.string().min(10, 'شماره موبایل معتبر نیست'),
+  city_id: z.coerce.number().nullable().optional(),
   commission_percent: z.coerce.number().min(0).max(100),
 });
 type FormData = z.infer<typeof schema>;
@@ -29,15 +30,25 @@ export default function RepresentationsPage() {
   const qc = useQueryClient();
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState('');
+  const [cityFilter, setCityFilter] = useState('');
   const [addOpen, setAddOpen] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<Representation | null>(null);
   const limit = 15;
 
+  // Load city list for filter and form
+  const citiesQuery = useQuery({
+    queryKey: ['categories', 'city'],
+    queryFn: () => api.get<ApiResponse<{ data: Category[] }>>('/api/v1/categorys/city'),
+    staleTime: 5 * 60_000,
+  });
+  const cities: Category[] = (citiesQuery.data?.data as any)?.data ?? [];
+
   const { data, isLoading } = useQuery({
-    queryKey: ['representations', page, search],
+    queryKey: ['representations', page, search, cityFilter],
     queryFn: () => {
       const params = new URLSearchParams({ page: String(page), limit: String(limit) });
       if (search) params.set('search', search);
+      if (cityFilter) params.set('city_id', cityFilter);
       return api.get<PaginatedResponse<Representation>>(`/api/v1/admin/representations?${params}`);
     },
   });
@@ -48,7 +59,13 @@ export default function RepresentationsPage() {
   });
 
   const createMutation = useMutation({
-    mutationFn: (d: FormData) => api.post<ApiResponse<Representation>>('/api/v1/representation', d),
+    mutationFn: (d: FormData) =>
+      api.post<ApiResponse<Representation>>('/api/v1/representation', {
+        full_name: d.full_name,
+        mobile_number: d.mobile_number,
+        city_id: d.city_id || null,
+        commission_percent: d.commission_percent,
+      }),
     onSuccess: () => {
       toast.success('نماینده اضافه شد');
       setAddOpen(false);
@@ -69,8 +86,9 @@ export default function RepresentationsPage() {
   });
 
   const columns: Column<Representation>[] = [
-    { key: 'domain', header: 'دامنه', render: (r) => <span dir="ltr" className="font-medium text-primary-700">{r.domain}</span> },
-    { key: 'city', header: 'شهر' },
+    { key: 'full_name', header: 'نام', render: (r) => <span className="font-medium">{r.full_name}</span> },
+    { key: 'mobile_number', header: 'موبایل', render: (r) => <span dir="ltr">{r.mobile_number ?? '—'}</span> },
+    { key: 'city', header: 'شهر', render: (r) => r.city ?? '—' },
     {
       key: 'commission_percent',
       header: 'کمیسیون',
@@ -103,13 +121,35 @@ export default function RepresentationsPage() {
       />
 
       <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+        {/* City filter */}
+        <div className="mb-4 flex items-center gap-3">
+          <select
+            value={cityFilter}
+            onChange={(e) => { setCityFilter(e.target.value); setPage(1); }}
+            className="h-10 border border-gray-300 rounded-[10px] px-3 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white min-w-[160px]"
+          >
+            <option value="">همه شهرها</option>
+            {cities.map((c) => (
+              <option key={c.id} value={String(c.id)}>{c.label}</option>
+            ))}
+          </select>
+          {cityFilter && (
+            <button
+              onClick={() => { setCityFilter(''); setPage(1); }}
+              className="text-xs text-gray-400 hover:text-gray-600 transition-colors"
+            >
+              پاک کردن فیلتر
+            </button>
+          )}
+        </div>
+
         <DataTable<Representation>
           columns={columns}
           data={items}
           loading={isLoading}
           searchValue={search}
           onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس دامنه یا شهر..."
+          searchPlaceholder="جستجو بر اساس نام یا موبایل..."
           emptyMessage="هیچ نماینده‌ای یافت نشد"
           actions={(rep) => (
             <>
@@ -127,10 +167,10 @@ export default function RepresentationsPage() {
         <Pagination page={page} total={total} limit={limit} onPageChange={setPage} />
       </div>
 
-      <Modal open={addOpen} title="افزودن نماینده" onClose={() => setAddOpen(false)}
+      <Modal open={addOpen} title="افزودن نماینده" onClose={() => { setAddOpen(false); reset(); }}
         footer={
           <>
-            <button onClick={() => setAddOpen(false)}
+            <button onClick={() => { setAddOpen(false); reset(); }}
               className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
               لغو
             </button>
@@ -143,20 +183,30 @@ export default function RepresentationsPage() {
       >
         <form id="add-rep-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">نام دامنه</label>
-            <input {...register('domain')} dir="ltr" placeholder="example.com"
+            <label className="block text-sm font-medium text-gray-700 mb-1">نام کامل</label>
+            <input {...register('full_name')} placeholder="علی محمدی"
               className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
-            {errors.domain && <p className="text-red-500 text-xs mt-1">{errors.domain.message}</p>}
+            {errors.full_name && <p className="text-red-500 text-xs mt-1">{errors.full_name.message}</p>}
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">شماره موبایل</label>
+            <input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx"
+              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+            {errors.mobile_number && <p className="text-red-500 text-xs mt-1">{errors.mobile_number.message}</p>}
           </div>
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">شهر</label>
-            <input {...register('city')} placeholder="تهران"
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
-            {errors.city && <p className="text-red-500 text-xs mt-1">{errors.city.message}</p>}
+            <select {...register('city_id')}
+              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white">
+              <option value="">انتخاب شهر</option>
+              {cities.map((c) => (
+                <option key={c.id} value={c.id}>{c.label}</option>
+              ))}
+            </select>
           </div>
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">درصد کمیسیون</label>
-            <input {...register('commission_percent')} type="number" min="0" max="100" placeholder="10"
+            <input {...register('commission_percent')} type="number" min="0" max="100" placeholder="10" dir="ltr"
               className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
             {errors.commission_percent && <p className="text-red-500 text-xs mt-1">{errors.commission_percent.message}</p>}
           </div>
@@ -166,7 +216,7 @@ export default function RepresentationsPage() {
       <ConfirmDialog
         open={!!deleteTarget}
         title="حذف نماینده"
-        message={`آیا از حذف نماینده "${deleteTarget?.domain}" اطمینان دارید؟`}
+        message={`آیا از حذف نماینده "${deleteTarget?.full_name}" اطمینان دارید؟`}
         confirmLabel="حذف"
         danger
         loading={deleteMutation.isPending}