Refactor code structure for improved readability and maintainability

assets/admin/pages/AppointmentsPage.tsx

@@ -1,27 +1,24 @@
 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,
+  CalendarIcon, ClockIcon, CheckCircleIcon, XCircleIcon,
+} from '@heroicons/react/24/outline';
 import { api } from '../lib/api';
 import type { PaginatedResponse } from '../lib/api';
-import type { Appointment, AppointmentStatus } from '../types';
+import type { Appointment } 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';
 
-const STATUS_FILTERS: { value: string; label: string }[] = [
+const STATUS_FILTERS = [
   { value: '', label: 'همه' },
   { value: 'waiting_for_payment', label: 'در انتظار پرداخت' },
   { value: 'reserved', label: 'رزرو شده' },
-  { value: 'checked_in', label: 'ورود به مطب' },
-  { value: 'waiting', label: 'در صف انتظار' },
-  { value: 'in_progress', label: 'در حال ویزیت' },
   { value: 'visited', label: 'ویزیت شده' },
-  { value: 'completed', label: 'تکمیل شده' },
-  { value: 'cancelled_by_user', label: 'لغو توسط بیمار' },
-  { value: 'no_show', label: 'غیبت' },
+  { value: 'cancelled_by_user', label: 'لغو شده' },
 ];
 
 export default function AppointmentsPage() {
@@ -46,21 +43,28 @@ export default function AppointmentsPage() {
       key: 'patient',
       header: 'بیمار',
       render: (a) => (
-        <div>
-          <p className="font-medium text-slate-800 dark:text-slate-100">{a.patient_name || '—'}</p>
-          <p className="text-xs text-gray-400" dir="ltr">{maskMobile(a.patient_mobile)}</p>
+        <div className="cell-user">
+          <div className="avatar sm" style={{
+            background: `linear-gradient(145deg, oklch(0.62 0.15 222), oklch(0.48 0.16 222))`,
+          }}>
+            {(a.patient_name ?? '؟').slice(0, 2)}
+          </div>
+          <div>
+            <b>{a.patient_name || '—'}</b>
+            <br /><small dir="ltr">{maskMobile(a.patient_mobile)}</small>
+          </div>
         </div>
       ),
     },
     { key: 'doctor_name', header: 'پزشک', render: (a) => `دکتر ${a.doctor_name}` },
-    { key: 'clinic_name', header: 'کلینیک', render: (a) => a.clinic_name ?? '—' },
+    { key: 'clinic_name', header: 'کلینیک', render: (a) => <span className="muted">{a.clinic_name ?? '—'}</span> },
     {
       key: 'appointment_date',
       header: 'تاریخ نوبت',
       render: (a) => (
         <div>
-          <p>{formatDate(a.appointment_date)}</p>
-          <p className="text-xs text-gray-400">{a.appointment_time}</p>
+          <span>{formatDate(a.appointment_date)}</span>
+          <br /><small className="muted">{a.appointment_time}</small>
         </div>
       ),
     },
@@ -72,53 +76,90 @@ export default function AppointmentsPage() {
     {
       key: 'amount',
       header: 'مبلغ',
-      render: (a) => <span className="text-sm">{formatRial(a.amount)}</span>,
+      render: (a) => <><b>{formatRial(a.amount)}</b> <span className="muted" style={{ fontSize: 11 }}>تومان</span></>,
     },
-    { key: 'created_at', header: 'تاریخ ثبت', render: (a) => formatDate(a.created_at) },
+    { key: 'created_at', header: 'تاریخ ثبت', render: (a) => <span className="muted">{formatDate(a.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(--info-bg)',    color: 'var(--info)',    Icon: CalendarIcon },
+    { label: 'در انتظار',    value: null,                              bg: 'var(--warning-bg)', color: 'var(--warning)', Icon: ClockIcon },
+    { label: 'ویزیت شده',    value: null,                              bg: 'var(--success-bg)', color: 'var(--success)', Icon: CheckCircleIcon },
+    { label: 'لغو شده',      value: null,                              bg: 'var(--danger-bg)',  color: 'var(--danger)',  Icon: XCircleIcon },
+  ];
 
-      <div className="cp-card p-6">
-        <div className="flex items-center gap-3 mb-4 overflow-x-auto pb-1 flex-nowrap sm: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 primary sm">
+          <CalendarIcon 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<Appointment>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس موبایل یا نام پزشک..."
           emptyMessage="هیچ نوبتی یافت نشد"
           actions={(appt) => (
             <button
+              className="mini-btn"
               onClick={() => navigate(`/admin/appointments/${appt.uuid}`)}
-              className="cp-action-view"
               title="مشاهده"
             >
-              <EyeIcon className="w-4 h-4" />
+              <EyeIcon style={{ width: 16, height: 16 }} />
             </button>
           )}
         />