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>