Refactor code structure for improved readability and maintainability

assets/admin/components/ui/DataTable.tsx

@@ -26,8 +26,8 @@ function SkeletonRow({ cols }: { cols: number }) {
   return (
     <tr>
       {Array.from({ length: cols }).map((_, i) => (
-        <td key={i} className="px-4 py-3.5">
-          <div className="h-4 rounded-lg skeleton" style={{ width: `${60 + (i * 17) % 40}%` }} />
+        <td key={i}>
+          <div className="skeleton" style={{ height: 14, borderRadius: 6, width: `${55 + (i * 17) % 40}%` }} />
         </td>
       ))}
     </tr>
@@ -47,83 +47,78 @@ export default function DataTable<T extends object>({
   headerExtra,
 }: Props<T>) {
   const allColumns = actions
-    ? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-28' }]
+    ? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-[120px]' }]
     : columns;
 
   return (
     <div>
-      {/* Search + extras header bar */}
+      {/* Toolbar row */}
       {(onSearchChange !== undefined || headerExtra) && (
-        <div className="flex items-center justify-between gap-3 mb-4 flex-wrap">
+        <div className="toolbar">
           {onSearchChange !== undefined && (
-            <div className="relative w-full sm:w-72">
-              <MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-slate-500 pointer-events-none" />
+            <div className="field" style={{ flex: '0 0 auto', minWidth: 240 }}>
+              <MagnifyingGlassIcon style={{ width: 16, height: 16, flexShrink: 0 }} />
               <input
                 type="text"
                 value={searchValue}
                 onChange={(e) => onSearchChange(e.target.value)}
                 placeholder={searchPlaceholder}
-                className="cp-input pr-9"
               />
             </div>
           )}
-          {headerExtra && <div className="flex items-center gap-2">{headerExtra}</div>}
+          {headerExtra && <>{headerExtra}</>}
         </div>
       )}
 
-      <div className="overflow-x-auto rounded-xl border border-slate-200 dark:border-gray-700/50">
-        <table className="w-full text-sm">
+      <div className="table-wrap">
+        <table className="t">
           <thead>
-            <tr className="bg-slate-50 dark:bg-gray-800/60 border-b border-slate-200 dark:border-gray-700/50">
+            <tr>
               {allColumns.map((col) => (
-                <th
-                  key={col.key}
-                  className={`px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap ${col.className ?? ''}`}
-                >
+                <th key={col.key} className={col.className ?? ''}>
                   {col.header}
                 </th>
               ))}
             </tr>
           </thead>
-          <tbody className="divide-y divide-slate-100 dark:divide-gray-700/40">
+          <tbody>
             {loading ? (
               Array.from({ length: 6 }).map((_, i) => (
                 <SkeletonRow key={i} cols={allColumns.length} />
               ))
             ) : data.length === 0 ? (
               <tr>
-                <td colSpan={allColumns.length} className="py-16 text-center">
-                  <div className="flex flex-col items-center gap-3">
-                    <div className="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-gray-800 flex items-center justify-center">
-                      <svg className="w-7 h-7 text-slate-400 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <td colSpan={allColumns.length}>
+                  <div style={{ textAlign: 'center', padding: '48px 20px' }}>
+                    <div style={{
+                      width: 56, height: 56, borderRadius: 16, background: 'var(--surface-2)',
+                      display: 'grid', placeItems: 'center', margin: '0 auto 12px',
+                    }}>
+                      <svg style={{ width: 28, height: 28, color: 'var(--text-3)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
                           d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                       </svg>
                     </div>
-                    <p className="text-sm text-slate-500 dark:text-slate-400">{emptyMessage}</p>
+                    <p style={{ fontSize: 13.5, color: 'var(--text-3)', margin: '0 0 12px' }}>{emptyMessage}</p>
                     {emptyAction}
                   </div>
                 </td>
               </tr>
             ) : (
               data.map((row, rowIdx) => (
-                <tr
-                  key={rowIdx}
-                  className="hover:bg-slate-50/80 dark:hover:bg-gray-800/40 transition-colors"
-                >
+                <tr key={rowIdx}>
                   {columns.map((col) => (
-                    <td
-                      key={col.key}
-                      className="px-4 py-3.5 text-slate-700 dark:text-slate-300 whitespace-nowrap"
-                    >
+                    <td key={col.key} className={col.className ?? ''}>
                       {col.render
                         ? col.render(row)
                         : ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'}
                     </td>
                   ))}
                   {actions && (
-                    <td className="px-4 py-3.5 whitespace-nowrap">
-                      <div className="flex items-center gap-1">{actions(row)}</div>
+                    <td>
+                      <div className="row-actions">
+                        {actions(row)}
+                      </div>
                     </td>
                   )}
                 </tr>