feat: enhance RepresentationsPage with searchable city filter and form improvements

- Updated RepresentationsPage to use SearchableSelect for city filtering.
- Modified form handling to use Controller from react-hook-form for city selection.
- Improved city filter handling to support null values.
- Added city_id to Representation interface in types.
- Implemented uploadLogo endpoint in CategoryController for logo uploads.
- Added logo_url field to Category entity and updated related services.
- Created SearchableSelect component for better user experience in selecting options.
- Added migration to include logo_url in categories table.

assets/admin/pages/RepresentationsPage.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { EyeIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { toast } from 'sonner';
@@ -16,11 +16,12 @@ import { ActiveBadge } from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 import Modal from '../components/ui/Modal';
+import SearchableSelect from '../components/ui/SearchableSelect';
 
 const schema = z.object({
-  full_name: z.string().min(2, 'نام الزامی است'),
-  mobile_number: z.string().min(10, 'شماره موبایل معتبر نیست'),
-  city_id: z.coerce.number().nullable().optional(),
+  full_name:          z.string().min(2, 'نام الزامی است'),
+  mobile_number:      z.string().min(10, 'شماره موبایل معتبر نیست'),
+  city_id:            z.number().nullable().optional(),
   commission_percent: z.coerce.number().min(0).max(100),
 });
 type FormData = z.infer<typeof schema>;
@@ -30,7 +31,7 @@ export default function RepresentationsPage() {
   const qc = useQueryClient();
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState('');
-  const [cityFilter, setCityFilter] = useState('');
+  const [cityFilter, setCityFilter] = useState<number | null>(null);
   const [addOpen, setAddOpen] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<Representation | null>(null);
   const limit = 15;
@@ -42,18 +43,19 @@ export default function RepresentationsPage() {
     staleTime: 5 * 60_000,
   });
   const cities: Category[] = (citiesQuery.data?.data as any)?.data ?? [];
+  const cityOptions = cities.map((c) => ({ value: c.id, label: c.label }));
 
   const { data, isLoading } = useQuery({
     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);
+      if (cityFilter !== null) params.set('city_id', String(cityFilter));
       return api.get<PaginatedResponse<Representation>>(`/api/v1/admin/representations?${params}`);
     },
   });
 
-  const { register, handleSubmit, reset, formState: { errors, isSubmitting } } = useForm<FormData>({
+  const { register, handleSubmit, reset, control, formState: { errors, isSubmitting } } = useForm<FormData>({
     resolver: zodResolver(schema),
     defaultValues: { commission_percent: 10 },
   });
@@ -63,7 +65,7 @@ export default function RepresentationsPage() {
       api.post<ApiResponse<Representation>>('/api/v1/representation', {
         full_name: d.full_name,
         mobile_number: d.mobile_number,
-        city_id: d.city_id || null,
+        city_id: d.city_id ?? null,
         commission_percent: d.commission_percent,
       }),
     onSuccess: () => {
@@ -112,8 +114,7 @@ export default function RepresentationsPage() {
         title="نمایندگان"
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نمایندگان' }]}
         action={
-          <button onClick={() => setAddOpen(true)}
-            className="cp-btn-primary">
+          <button onClick={() => setAddOpen(true)} className="cp-btn-primary">
             <PlusIcon className="w-4 h-4" />
             افزودن نماینده
           </button>
@@ -123,19 +124,20 @@ export default function RepresentationsPage() {
       <div className="cp-card 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="cp-input min-w-[160px]"
-          >
-            <option value="">همه شهرها</option>
-            {cities.map((c) => (
-              <option key={c.id} value={String(c.id)}>{c.label}</option>
-            ))}
-          </select>
-          {cityFilter && (
+          <div className="min-w-[220px]">
+            <SearchableSelect
+              options={cityOptions}
+              value={cityFilter}
+              onChange={(val) => { setCityFilter(val as number | null); setPage(1); }}
+              placeholder="فیلتر بر اساس شهر..."
+              isClearable
+              isLoading={citiesQuery.isLoading}
+              noOptionsMessage="هیچ شهری یافت نشد"
+            />
+          </div>
+          {cityFilter !== null && (
             <button
-              onClick={() => { setCityFilter(''); setPage(1); }}
+              onClick={() => { setCityFilter(null); setPage(1); }}
               className="text-xs text-gray-400 hover:text-gray-600 transition-colors"
             >
               پاک کردن فیلتر
@@ -170,12 +172,10 @@ export default function RepresentationsPage() {
       <Modal open={addOpen} title="افزودن نماینده" onClose={() => { setAddOpen(false); reset(); }}
         footer={
           <>
-            <button onClick={() => { setAddOpen(false); reset(); }}
-              className="cp-btn-secondary">
+            <button onClick={() => { setAddOpen(false); reset(); }} className="cp-btn-secondary">
               لغو
             </button>
-            <button form="add-rep-form" type="submit" disabled={isSubmitting}
-              className="cp-btn-primary">
+            <button form="add-rep-form" type="submit" disabled={isSubmitting} className="cp-btn-primary">
               {isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
             </button>
           </>
@@ -184,25 +184,31 @@ export default function RepresentationsPage() {
         <form id="add-rep-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
           <div>
             <label className="cp-label">نام کامل</label>
-            <input {...register('full_name')} placeholder="علی محمدی"
-              className="cp-input h-11" />
+            <input {...register('full_name')} placeholder="علی محمدی" className="cp-input h-11" />
             {errors.full_name && <p className="text-red-500 text-xs mt-1">{errors.full_name.message}</p>}
           </div>
           <div>
             <label className="cp-label">شماره موبایل</label>
-            <input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx"
-              className="cp-input h-11" />
+            <input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx" className="cp-input h-11" />
             {errors.mobile_number && <p className="text-red-500 text-xs mt-1">{errors.mobile_number.message}</p>}
           </div>
           <div>
             <label className="cp-label">شهر</label>
-            <select {...register('city_id')}
-              className="cp-input h-11">
-              <option value="">انتخاب شهر</option>
-              {cities.map((c) => (
-                <option key={c.id} value={c.id}>{c.label}</option>
-              ))}
-            </select>
+            <Controller
+              name="city_id"
+              control={control}
+              render={({ field }) => (
+                <SearchableSelect
+                  options={cityOptions}
+                  value={field.value ?? null}
+                  onChange={(val) => field.onChange(val as number | null)}
+                  placeholder="انتخاب شهر..."
+                  isClearable
+                  isLoading={citiesQuery.isLoading}
+                  noOptionsMessage="هیچ شهری یافت نشد"
+                />
+              )}
+            />
           </div>
           <div>
             <label className="cp-label">درصد کمیسیون</label>