Refactor code structure for improved readability and maintainability

assets/admin/pages/RepresentationsPage.tsx

@@ -1,7 +1,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 { EyeIcon, TrashIcon, PlusIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
@@ -10,7 +10,6 @@ import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Representation, City } from '../types';
 import { formatDate, formatRial, formatNumber } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import { ActiveBadge } from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
@@ -36,7 +35,6 @@ export default function RepresentationsPage() {
   const [deleteTarget, setDeleteTarget] = useState<Representation | null>(null);
   const limit = 15;
 
-  // Load city list for filter and form
   const citiesQuery = useQuery({
     queryKey: ['cities-select'],
     queryFn: () => api.get<PaginatedResponse<City>>('/api/v1/admin/cities?limit=200'),
@@ -88,19 +86,11 @@ export default function RepresentationsPage() {
   });
 
   const columns: Column<Representation>[] = [
-    { key: 'full_name', header: 'نام', render: (r) => <span className="font-medium">{r.full_name}</span> },
+    { key: 'full_name', header: 'نام', render: (r) => <b>{r.full_name}</b> },
     { key: 'mobile_number', header: 'موبایل', render: (r) => <span dir="ltr">{r.mobile_number ?? '—'}</span> },
     { key: 'city', header: 'شهر', render: (r) => r.city ?? '—' },
-    {
-      key: 'commission_percent',
-      header: 'کمیسیون',
-      render: (r) => `${formatNumber(r.commission_percent)}٪`,
-    },
-    {
-      key: 'wallet_balance',
-      header: 'موجودی کیف‌پول',
-      render: (r) => formatRial(r.wallet_balance ?? 0),
-    },
+    { key: 'commission_percent', header: 'کمیسیون', render: (r) => `${formatNumber(r.commission_percent)}٪` },
+    { key: 'wallet_balance', header: 'موجودی کیف‌پول', render: (r) => formatRial(r.wallet_balance ?? 0) },
     { key: 'is_active', header: 'وضعیت', render: (r) => <ActiveBadge active={r.is_active ?? r.active ?? false} /> },
     { key: 'created_at', header: 'تاریخ ثبت', render: (r) => formatDate(r.created_at) },
   ];
@@ -109,59 +99,56 @@ export default function RepresentationsPage() {
   const total = data?.meta?.totalRecords ?? 0;
 
   return (
-    <div>
-      <PageHeader
-        title="نمایندگان"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نمایندگان' }]}
-        action={
-          <button onClick={() => setAddOpen(true)} className="cp-btn-primary">
-            <PlusIcon className="w-4 h-4" />
-            افزودن نماینده
-          </button>
-        }
-      />
-
-      <div className="cp-card p-6">
-        {/* City filter */}
-        <div className="mb-4 flex items-center gap-3">
-          <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(null); setPage(1); }}
-              className="text-xs text-gray-400 hover:text-gray-600 transition-colors"
-            >
-              پاک کردن فیلتر
-            </button>
-          )}
+    <div className="fade-in">
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">نمایندگان</h1>
+          <div className="muted">{total} نماینده ثبت‌شده</div>
         </div>
+        <button onClick={() => setAddOpen(true)} className="btn primary sm">
+          <PlusIcon style={{ width: 16, height: 16 }} />
+          افزودن نماینده
+        </button>
+      </div>
 
+      <div className="card">
+        <div className="card-pad" style={{ paddingBottom: 0 }}>
+          <div className="toolbar">
+            <div className="field" style={{ minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
+              <input
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+                placeholder="جستجو بر اساس نام یا موبایل..."
+              />
+            </div>
+            <div style={{ minWidth: 200 }}>
+              <SearchableSelect
+                options={cityOptions}
+                value={cityFilter}
+                onChange={(val) => { setCityFilter(val as number | null); setPage(1); }}
+                placeholder="فیلتر شهر..."
+                isClearable
+                isLoading={citiesQuery.isLoading}
+                noOptionsMessage="هیچ شهری یافت نشد"
+              />
+            </div>
+          </div>
+        </div>
         <DataTable<Representation>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس نام یا موبایل..."
           emptyMessage="هیچ نماینده‌ای یافت نشد"
           actions={(rep) => (
             <>
               <button onClick={() => navigate(`/admin/representations/${rep.uuid}`)}
-                className="cp-action-view" title="مشاهده">
-                <EyeIcon className="w-4 h-4" />
+                className="mini-btn" title="مشاهده">
+                <EyeIcon style={{ width: 15, height: 15 }} />
               </button>
               <button onClick={() => setDeleteTarget(rep)}
-                className="cp-action-delete" title="حذف">
-                <TrashIcon className="w-4 h-4" />
+                className="mini-btn danger" title="حذف">
+                <TrashIcon style={{ width: 15, height: 15 }} />
               </button>
             </>
           )}
@@ -172,28 +159,26 @@ export default function RepresentationsPage() {
       <Modal open={addOpen} title="افزودن نماینده" onClose={() => { setAddOpen(false); reset(); }}
         footer={
           <>
-            <button onClick={() => { setAddOpen(false); reset(); }} className="cp-btn-secondary">
-              لغو
-            </button>
-            <button form="add-rep-form" type="submit" disabled={isSubmitting} className="cp-btn-primary">
+            <button onClick={() => { setAddOpen(false); reset(); }} className="btn ghost sm">لغو</button>
+            <button form="add-rep-form" type="submit" disabled={isSubmitting} className="btn primary sm">
               {isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
             </button>
           </>
         }
       >
-        <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" />
-            {errors.full_name && <p className="text-red-500 text-xs mt-1">{errors.full_name.message}</p>}
+        <form id="add-rep-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))}>
+          <div className="form-row">
+            <label>نام کامل</label>
+            <input {...register('full_name')} placeholder="علی محمدی" className="input" />
+            {errors.full_name && <p className="err-text">{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" />
-            {errors.mobile_number && <p className="text-red-500 text-xs mt-1">{errors.mobile_number.message}</p>}
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>شماره موبایل</label>
+            <input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx" className="input" />
+            {errors.mobile_number && <p className="err-text">{errors.mobile_number.message}</p>}
           </div>
-          <div>
-            <label className="cp-label">شهر</label>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>شهر</label>
             <Controller
               name="city_id"
               control={control}
@@ -210,11 +195,11 @@ export default function RepresentationsPage() {
               )}
             />
           </div>
-          <div>
-            <label className="cp-label">درصد کمیسیون</label>
+          <div className="form-row" style={{ marginTop: 12 }}>
+            <label>درصد کمیسیون</label>
             <input {...register('commission_percent')} type="number" min="0" max="100" placeholder="10" dir="ltr"
-              className="cp-input h-11" />
-            {errors.commission_percent && <p className="text-red-500 text-xs mt-1">{errors.commission_percent.message}</p>}
+              className="input" />
+            {errors.commission_percent && <p className="err-text">{errors.commission_percent.message}</p>}
           </div>
         </form>
       </Modal>