Refactor code structure for improved readability and maintainability

assets/admin/pages/ClinicsPage.tsx

@@ -1,18 +1,19 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { EyeIcon, TrashIcon, PencilIcon } from '@heroicons/react/24/outline';
+import { EyeIcon, TrashIcon, PencilIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Clinic } from '../types';
 import { formatDate, 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';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 
+const HUES_LIST = [256, 205, 162, 295, 272];
+
 export default function ClinicsPage() {
   const navigate = useNavigate();
   const qc = useQueryClient();
@@ -43,25 +44,33 @@ export default function ClinicsPage() {
     {
       key: 'name',
       header: 'نام کلینیک',
-      render: (c) => (
-        <div className="flex items-center gap-3">
-          {c.logo ? (
-            <img src={c.logo} alt="" className="w-8 h-8 rounded-lg object-cover" />
-          ) : (
-            <div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center text-blue-700 text-xs font-bold">
-              {c.name?.[0]}
+      render: (c) => {
+        const hue = HUES_LIST[(c.uuid?.charCodeAt(0) ?? 0) % HUES_LIST.length];
+        return (
+          <div className="cell-user">
+            {c.logo ? (
+              <img src={c.logo} alt="" className="avatar sm" style={{ objectFit: 'cover' }} />
+            ) : (
+              <div className="avatar sm" style={{
+                background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))`,
+              }}>
+                {c.name?.[0] ?? '?'}
+              </div>
+            )}
+            <div>
+              <b>{c.name}</b>
             </div>
-          )}
-          <span className="font-medium text-slate-800 dark:text-slate-100">{c.name}</span>
-        </div>
-      ),
+          </div>
+        );
+      },
     },
     { key: 'phone', header: 'تلفن', render: (c) => c.phone ? <span dir="ltr">{c.phone}</span> : '—' },
     {
       key: 'doctors_count',
       header: 'پزشکان',
       render: (c) => (
-        <span className="text-xs bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded-full">
+        <span className="badge blue">
+          <span className="bdot" />
           {formatNumber(c.doctors_count ?? 0)} پزشک
         </span>
       ),
@@ -74,34 +83,45 @@ export default function ClinicsPage() {
   const total = data?.meta?.totalRecords ?? 0;
 
   return (
-    <div>
-      <PageHeader
-        title="کلینیک‌ها"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'کلینیک‌ها' }]}
-      />
+    <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="cp-card p-6">
+      <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>
+        </div>
         <DataTable<Clinic>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس نام کلینیک..."
           emptyMessage="هیچ کلینیکی یافت نشد"
           actions={(clinic) => (
             <>
               <button onClick={() => navigate(`/admin/clinics/${clinic.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={() => navigate(`/admin/clinics/${clinic.uuid}?edit=1`)}
-                className="cp-action-edit" title="ویرایش">
-                <PencilIcon className="w-4 h-4" />
+                className="mini-btn" title="ویرایش">
+                <PencilIcon style={{ width: 15, height: 15 }} />
               </button>
               <button onClick={() => setDeleteTarget(clinic)}
-                className="cp-action-delete" title="حذف">
-                <TrashIcon className="w-4 h-4" />
+                className="mini-btn danger" title="حذف">
+                <TrashIcon style={{ width: 15, height: 15 }} />
               </button>
             </>
           )}