Refactor code structure for improved readability and maintainability

assets/admin/pages/CommentsPage.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { CheckIcon, TrashIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Comment } from '../types';
 import { formatDate } 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';
@@ -14,7 +13,7 @@ import ConfirmDialog from '../components/ui/ConfirmDialog';
 
 const FILTERS = [
   { value: '', label: 'همه' },
-  { value: 'pending', label: 'در انتظار تأیید' },
+  { value: 'pending', label: 'در انتظار' },
   { value: 'approved', label: 'تأییدشده' },
 ];
 
@@ -61,7 +60,7 @@ export default function CommentsPage() {
     {
       key: 'patient_name',
       header: 'کاربر',
-      render: (c) => <span className="font-medium text-slate-800 dark:text-slate-100">{c.patient_name}</span>,
+      render: (c) => <b>{c.patient_name}</b>,
     },
     { key: 'doctor_name', header: 'پزشک', render: (c) => `دکتر ${c.doctor_name}` },
     { key: 'title', header: 'عنوان' },
@@ -69,7 +68,9 @@ export default function CommentsPage() {
       key: 'body',
       header: 'متن',
       render: (c) => (
-        <span className="text-slate-500 dark:text-slate-400 text-xs line-clamp-2 max-w-xs block">{c.body}</span>
+        <span className="muted" style={{ fontSize: 12, display: 'block', maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {c.body}
+        </span>
       ),
     },
     {
@@ -84,46 +85,57 @@ export default function CommentsPage() {
   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">
-          {FILTERS.map((f) => (
-            <button key={f.value} onClick={() => { setApprovedFilter(f.value); setPage(1); }}
-              className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
-                approvedFilter === 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">
+              {FILTERS.map((f) => (
+                <button
+                  key={f.value}
+                  className={approvedFilter === f.value ? 'on' : ''}
+                  onClick={() => { setApprovedFilter(f.value); setPage(1); }}
+                >
+                  {f.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
         <DataTable<Comment>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس نام پزشک یا متن..."
           emptyMessage="هیچ نظری یافت نشد"
           actions={(comment) => (
             <>
               {!comment.is_approved && (
                 <button
                   onClick={() => setApproveTarget(comment)}
-                  className="cp-action-approve"
+                  className="mini-btn"
                   title="تأیید"
                 >
-                  <CheckIcon className="w-4 h-4" />
+                  <CheckIcon style={{ width: 15, height: 15 }} />
                 </button>
               )}
               <button onClick={() => setDeleteTarget(comment)}
-                className="cp-action-delete" title="حذف">
-                <TrashIcon className="w-4 h-4" />
+                className="mini-btn danger" title="حذف">
+                <TrashIcon style={{ width: 15, height: 15 }} />
               </button>
             </>
           )}