Refactor code structure for improved readability and maintainability

assets/admin/pages/SettlementsPage.tsx

@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { EyeIcon, CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { EyeIcon, CheckIcon, XMarkIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Settlement } from '../types';
 import { formatDate, formatRial } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import StatusBadge from '../components/ui/StatusBadge';
 import Pagination from '../components/ui/Pagination';
@@ -66,9 +65,9 @@ export default function SettlementsPage() {
   });
 
   const columns: Column<Settlement>[] = [
-    { key: 'representation_name', header: 'نماینده', render: (s) => <span className="font-medium">{s.representation_name}</span> },
+    { key: 'representation_name', header: 'نماینده', render: (s) => <b>{s.representation_name}</b> },
     { key: 'amount', header: 'مبلغ', render: (s) => formatRial(s.amount) },
-    { key: 'bank_card', header: 'شماره کارت', render: (s) => s.bank_card ? <span dir="ltr" className="font-mono text-xs">{s.bank_card}</span> : '—' },
+    { key: 'bank_card', header: 'شماره کارت', render: (s) => s.bank_card ? <span dir="ltr" style={{ fontFamily: 'monospace', fontSize: 12 }}>{s.bank_card}</span> : '—' },
     { key: 'bank_name', header: 'بانک' },
     { key: 'status', header: 'وضعیت', render: (s) => <StatusBadge type="settlement" value={s.status} /> },
     { key: 'requested_at', header: 'تاریخ درخواست', render: (s) => formatDate(s.requested_at) },
@@ -78,50 +77,56 @@ export default function SettlementsPage() {
   const total = data?.meta?.totalRecords ?? 0;
 
   return (
-    <div>
-      <PageHeader
-        title="تسویه‌حساب"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'تسویه‌حساب' }]}
-      />
-
-      <div className="cp-card p-6">
-        <div className="flex items-center gap-3 mb-4 flex-wrap">
-          {STATUS_FILTERS.map((f) => (
-            <button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }}
-              className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
-                statusFilter === f.value ? 'bg-primary-600 text-white' : 'bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-gray-600'
-              }`}>
-              {f.label}
-            </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>
+      </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 className="seg">
+              {STATUS_FILTERS.map((f) => (
+                <button
+                  key={f.value}
+                  className={statusFilter === f.value ? 'on' : ''}
+                  onClick={() => { setStatusFilter(f.value); setPage(1); }}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
         <DataTable<Settlement>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس نام نماینده..."
           emptyMessage="هیچ درخواست تسویه‌ای یافت نشد"
           actions={(s) => (
             <>
               <button onClick={() => navigate(`/admin/settlements/${s.uuid}`)}
-                className="cp-action-view" title="مشاهده">
-                <EyeIcon className="w-4 h-4" />
+                className="mini-btn" title="مشاهده">
+                <EyeIcon style={{ width: 15, height: 15 }} />
               </button>
               {s.status === 'pending' && (
                 <>
-                  <button
-                    onClick={() => setApproveTarget(s)}
-                    className="cp-action-approve"
-                    title="تأیید"
-                  >
-                    <CheckIcon className="w-4 h-4" />
+                  <button onClick={() => setApproveTarget(s)} className="mini-btn" title="تأیید">
+                    <CheckIcon style={{ width: 15, height: 15 }} />
                   </button>
-                  <button onClick={() => setRejectTarget(s)}
-                    className="cp-action-delete" title="رد">
-                    <XMarkIcon className="w-4 h-4" />
+                  <button onClick={() => setRejectTarget(s)} className="mini-btn danger" title="رد">
+                    <XMarkIcon style={{ width: 15, height: 15 }} />
                   </button>
                 </>
               )}
@@ -148,26 +153,27 @@ export default function SettlementsPage() {
         footer={
           <>
             <button onClick={() => { setRejectTarget(null); setRejectReason(''); }}
-              className="cp-btn-secondary">
-              لغو
-            </button>
+              className="btn ghost sm">لغو</button>
             <button
               onClick={() => rejectTarget && rejectMutation.mutate({ s: rejectTarget, reason: rejectReason })}
               disabled={!rejectReason || rejectMutation.isPending}
-              className="cp-btn-danger">
+              className="btn danger sm">
               {rejectMutation.isPending ? 'در حال ارسال...' : 'رد کردن'}
             </button>
           </>
         }
       >
-        <label className="cp-label mb-2">دلیل رد:</label>
-        <textarea
-          value={rejectReason}
-          onChange={(e) => setRejectReason(e.target.value)}
-          rows={4}
-          placeholder="دلیل رد درخواست را بنویسید..."
-          className="cp-textarea resize-none"
-        />
+        <div className="form-row">
+          <label>دلیل رد</label>
+          <textarea
+            value={rejectReason}
+            onChange={(e) => setRejectReason(e.target.value)}
+            rows={4}
+            placeholder="دلیل رد درخواست را بنویسید..."
+            className="input"
+            style={{ resize: 'none', height: 'auto' }}
+          />
+        </div>
       </Modal>
     </div>
   );