Refactor code structure for improved readability and maintainability

assets/admin/pages/BlogsPage.tsx

@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { EyeIcon, PencilIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { EyeIcon, PencilIcon, TrashIcon, PlusIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse, PaginatedResponse } from '../lib/api';
 import type { Blog } from '../types';
 import { formatDate, formatNumber } 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';
@@ -52,13 +51,15 @@ export default function BlogsPage() {
       key: 'title',
       header: 'عنوان',
       render: (b) => (
-        <div className="flex items-center gap-3">
+        <div className="cell-user">
           {b.cover_image ? (
-            <img src={b.cover_image} alt="" className="w-10 h-7 rounded object-cover shrink-0" />
+            <img src={b.cover_image} alt="" style={{ width: 40, height: 28, borderRadius: 6, objectFit: 'cover', flexShrink: 0 }} />
           ) : (
-            <div className="w-10 h-7 rounded bg-slate-100 dark:bg-slate-700 shrink-0" />
+            <div style={{ width: 40, height: 28, borderRadius: 6, background: 'var(--surface-3)', flexShrink: 0 }} />
           )}
-          <span className="font-medium text-gray-900 line-clamp-1">{b.title}</span>
+          <div>
+            <b style={{ display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 220 }}>{b.title}</b>
+          </div>
         </div>
       ),
     },
@@ -67,11 +68,8 @@ export default function BlogsPage() {
       key: 'status',
       header: 'وضعیت',
       render: (b) => (
-        <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
-          b.status === 'published'
-            ? 'bg-green-100 text-green-700'
-            : 'bg-gray-100 text-gray-600'
-        }`}>
+        <span className={`badge ${b.status === 'published' ? 'green' : 'gray'}`}>
+          <span className="bdot" />
           {b.status === 'published' ? 'منتشرشده' : 'پیش‌نویس'}
         </span>
       ),
@@ -80,70 +78,76 @@ export default function BlogsPage() {
       key: 'tags',
       header: 'تگ‌ها',
       render: (b) => (
-        <div className="flex flex-wrap gap-1">
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
           {b.tags?.slice(0, 3).map((tag, i) => (
-            <span key={i} className="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full">{tag}</span>
+            <span key={i} className="chip">{tag}</span>
           ))}
         </div>
       ),
     },
     { key: 'views_count', header: 'بازدید', render: (b) => formatNumber(b.views_count) },
     { key: 'published_at', header: 'انتشار', render: (b) => formatDate(b.published_at) },
-    { key: 'created_at', header: 'تاریخ ثبت', render: (b) => formatDate(b.created_at) },
   ];
 
   const items = data?.data ?? [];
   const total = data?.meta?.totalRecords ?? 0;
 
   return (
-    <div>
-      <PageHeader
-        title="بلاگ"
-        breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'بلاگ' }]}
-        action={
-          <button onClick={() => navigate('/admin/blogs/new')}
-            className="cp-btn-primary">
-            <PlusIcon className="w-4 h-4" />
-            نوشتن مقاله
-          </button>
-        }
-      />
-
-      <div className="cp-card p-6">
-        <div className="flex items-center gap-3 mb-4">
-          {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>
-          ))}
+    <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>
+        <button onClick={() => navigate('/admin/blogs/new')} className="btn primary sm">
+          <PlusIcon style={{ width: 16, height: 16 }} />
+          نوشتن مقاله
+        </button>
+      </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">
+              {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<Blog>
           columns={columns}
           data={items}
           loading={isLoading}
-          searchValue={search}
-          onSearchChange={(v) => { setSearch(v); setPage(1); }}
-          searchPlaceholder="جستجو بر اساس عنوان..."
           emptyMessage="هیچ مقاله‌ای یافت نشد"
           emptyAction={
-            <button onClick={() => navigate('/admin/blogs/new')}
-              className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors">
+            <button onClick={() => navigate('/admin/blogs/new')} className="btn primary sm">
               نوشتن اولین مقاله
             </button>
           }
           actions={(blog) => (
             <>
               <button onClick={() => navigate(`/admin/blogs/${blog.uuid}/edit`)}
-                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(blog)}
-                className="cp-action-delete" title="حذف">
-                <TrashIcon className="w-4 h-4" />
+                className="mini-btn danger" title="حذف">
+                <TrashIcon style={{ width: 15, height: 15 }} />
               </button>
             </>
           )}