Refactor code structure for improved readability and maintainability

assets/admin/pages/PaymentsPage.tsx

@@ -1,12 +1,14 @@
 import React, { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { EyeIcon } from '@heroicons/react/24/outline';
+import {
+  MagnifyingGlassIcon, EyeIcon,
+  BanknotesIcon, ClockIcon, CreditCardIcon, ArrowDownTrayIcon,
+} from '@heroicons/react/24/outline';
 import { api } from '../lib/api';
 import type { PaginatedResponse } from '../lib/api';
 import type { Payment } from '../types';
 import { formatDate, formatRial, maskMobile } 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';
@@ -39,13 +41,22 @@ export default function PaymentsPage() {
   const columns: Column<Payment>[] = [
     {
       key: 'patient_mobile',
-      header: 'موبایل',
-      render: (p) => <span dir="ltr">{maskMobile(p.patient_mobile)}</span>,
+      header: 'بیمار',
+      render: (p) => (
+        <div className="cell-user">
+          <div className="avatar sm" style={{
+            background: `linear-gradient(145deg, oklch(0.62 0.15 162), oklch(0.48 0.16 162))`,
+          }}>
+            {maskMobile(p.patient_mobile).slice(0, 2)}
+          </div>
+          <span dir="ltr">{maskMobile(p.patient_mobile)}</span>
+        </div>
+      ),
     },
     {
       key: 'amount',
       header: 'مبلغ',
-      render: (p) => <span className="font-medium">{formatRial(p.amount)}</span>,
+      render: (p) => <><b>{formatRial(p.amount)}</b> <span className="muted" style={{ fontSize: 11 }}>تومان</span></>,
     },
     {
       key: 'status',
@@ -55,65 +66,106 @@ export default function PaymentsPage() {
     {
       key: 'gateway',
       header: 'درگاه',
-      render: (p) => (
-        <span className="text-xs bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-200 px-2 py-0.5 rounded-full uppercase">
-          {p.gateway}
-        </span>
-      ),
+      render: (p) => <span className="chip" style={{ fontSize: 12 }}>{p.gateway}</span>,
     },
     {
       key: 'ref_id',
       header: 'شماره مرجع',
-      render: (p) => p.ref_id ? <span dir="ltr" className="font-mono text-xs">{p.ref_id}</span> : '—',
+      render: (p) => p.ref_id
+        ? <span dir="ltr" style={{ fontFamily: 'monospace', fontSize: 12.5, color: 'var(--text-2)' }}>{p.ref_id}</span>
+        : <span className="muted">—</span>,
     },
     {
       key: 'paid_at',
       header: 'تاریخ پرداخت',
-      render: (p) => formatDate(p.paid_at),
+      render: (p) => <span className="muted">{formatDate(p.paid_at)}</span>,
     },
     {
       key: 'created_at',
       header: 'تاریخ ثبت',
-      render: (p) => formatDate(p.created_at),
+      render: (p) => <span className="muted">{formatDate(p.created_at)}</span>,
     },
   ];
 
   const items = data?.data ?? [];
   const total = data?.meta?.totalRecords ?? 0;
 
-  return (
-    <div>
-      <PageHeader
-        title="پرداخت‌ها"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'پرداخت‌ها' }]}
-      />
+  const statCards = [
+    { label: 'کل تراکنش‌ها',  value: total > 0 ? String(total) : null, bg: 'var(--primary-soft)',  color: 'var(--primary)',   Icon: CreditCardIcon },
+    { label: 'تأییدشده',       value: null,                              bg: 'var(--success-bg)',    color: 'var(--success)',   Icon: BanknotesIcon },
+    { label: 'در انتظار',      value: null,                              bg: 'var(--warning-bg)',    color: 'var(--warning)',   Icon: ClockIcon },
+    { label: 'استرداد شده',    value: null,                              bg: 'var(--info-bg)',       color: 'var(--info)',      Icon: ArrowDownTrayIcon },
+  ];
 
-      <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>
-          ))}
+  return (
+    <div className="fade-in">
+      {/* Header */}
+      <div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
+        <div>
+          <h1 className="section-title">پرداخت‌ها</h1>
+          <div className="muted" style={{ fontSize: 13, marginTop: 3 }}>مدیریت تراکنش‌های مالی</div>
+        </div>
+        <button className="btn ghost sm">
+          <ArrowDownTrayIcon style={{ width: 15, height: 15 }} />
+          خروجی اکسل
+        </button>
+      </div>
+
+      {/* Stat cards */}
+      <div className="stat-grid" style={{ gridTemplateColumns: 'repeat(4,1fr)' }}>
+        {statCards.map((c) => (
+          <div key={c.label} className="stat">
+            <div className="ico" style={{ background: c.bg, color: c.color }}>
+              <c.Icon style={{ width: 20, height: 20 }} />
+            </div>
+            <div className="lbl">{c.label}</div>
+            <div className="val">
+              {isLoading
+                ? <span className="skeleton" style={{ display: 'inline-block', width: 48, height: 26, borderRadius: 4 }} />
+                : c.value ?? '—'}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Main card */}
+      <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
+                placeholder="جستجو بر اساس موبایل یا شماره مرجع..."
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+              />
+            </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<Payment>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس موبایل یا شماره مرجع..."
           emptyMessage="هیچ پرداختی یافت نشد"
           actions={(payment) => (
-            <button onClick={() => navigate(`/admin/payments/${payment.uuid}`)}
-              className="cp-action-view" title="مشاهده">
-              <EyeIcon className="w-4 h-4" />
+            <button
+              className="mini-btn"
+              onClick={() => navigate(`/admin/payments/${payment.uuid}`)}
+              title="مشاهده"
+            >
+              <EyeIcon style={{ width: 16, height: 16 }} />
             </button>
           )}
         />