Refactor code structure for improved readability and maintainability

assets/admin/pages/RatingsPage.tsx

@@ -1,26 +1,25 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { TrashIcon, StarIcon } from '@heroicons/react/24/outline';
+import { TrashIcon, StarIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { StarIcon as StarSolid } from '@heroicons/react/24/solid';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Rating } from '../types';
 import { formatDate } from '../lib/utils';
-import PageHeader from '../components/ui/PageHeader';
 import DataTable, { Column } from '../components/ui/DataTable';
 import Pagination from '../components/ui/Pagination';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 
 function Stars({ value }: { value: number }) {
   return (
-    <div className="flex items-center gap-0.5">
-      {[1, 2, 3, 4, 5].map((i) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+      {[1, 2, 3, 4, 5].map((i) =>
         i <= value
-          ? <StarSolid key={i} className="w-3.5 h-3.5 text-yellow-400" />
-          : <StarIcon key={i} className="w-3.5 h-3.5 text-gray-300" />
-      ))}
-      <span className="text-xs text-gray-500 mr-1">{value}</span>
+          ? <StarSolid key={i} style={{ width: 14, height: 14, color: 'oklch(0.78 0.18 85)' }} />
+          : <StarIcon key={i} style={{ width: 14, height: 14, color: 'var(--border)' }} />
+      )}
+      <span className="muted" style={{ fontSize: 12, marginRight: 4 }}>{value}</span>
     </div>
   );
 }
@@ -52,21 +51,17 @@ export default function RatingsPage() {
   });
 
   const columns: Column<Rating>[] = [
-    { key: 'patient_name', header: 'بیمار', render: (r) => <span className="font-medium">{r.patient_name}</span> },
+    { key: 'patient_name', header: 'بیمار', render: (r) => <b>{r.patient_name}</b> },
     { key: 'doctor_name', header: 'پزشک', render: (r) => `دکتر ${r.doctor_name}` },
-    {
-      key: 'overall',
-      header: 'کلی',
-      render: (r) => <Stars value={r.overall} />,
-    },
+    { key: 'overall', header: 'کلی', render: (r) => <Stars value={r.overall} /> },
     {
       key: 'ratings_detail',
-      header: 'جزئیات امتیاز',
+      header: 'جزئیات',
       render: (r) => (
-        <div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-slate-500 dark:text-slate-400 min-w-[160px]">
-          <span>تشخیص:</span><Stars value={r.diagnosis_accuracy} />
-          <span>مهارت:</span><Stars value={r.skill} />
-          <span>رفتار:</span><Stars value={r.behavior} />
+        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '2px 12px', fontSize: 12 }}>
+          <span className="muted">تشخیص:</span><Stars value={r.diagnosis_accuracy} />
+          <span className="muted">مهارت:</span><Stars value={r.skill} />
+          <span className="muted">رفتار:</span><Stars value={r.behavior} />
         </div>
       ),
     },
@@ -77,25 +72,36 @@ export default function RatingsPage() {
   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<Rating>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس نام پزشک..."
           emptyMessage="هیچ امتیازی یافت نشد"
           actions={(rating) => (
             <button onClick={() => setDeleteTarget(rating)}
-              className="cp-action-delete" title="حذف">
-              <TrashIcon className="w-4 h-4" />
+              className="mini-btn danger" title="حذف">
+              <TrashIcon style={{ width: 15, height: 15 }} />
             </button>
           )}
         />