refactor: update UI components for consistency and dark mode support

- Refactored PaymentsPage, RatingsPage, RepresentationDetailPage, RepresentationsPage, SecretariesPage, SettlementsPage, SmsPage, UserDetailPage, and UsersPage to use consistent class names for styling.
- Updated button styles to use new utility classes for primary, secondary, and danger buttons.
- Enhanced dark mode support across various components by adjusting text and background colors.
- Introduced new utility classes for form inputs, labels, and info rows to standardize styling.
- Implemented Zustand for persistent UI state management, including dark mode toggle functionality.
- Updated CSS to include new styles for skeleton loading and animations.
- Added optional dependencies for improved compatibility with different platforms.

assets/admin/components/ui/DataTable.tsx

@@ -6,6 +6,7 @@ export interface Column<T> {
   header: string;
   render?: (row: T) => React.ReactNode;
   sortable?: boolean;
+  className?: string;
 }
 
 interface Props<T> {
@@ -18,14 +19,15 @@ interface Props<T> {
   actions?: (row: T) => React.ReactNode;
   emptyMessage?: string;
   emptyAction?: React.ReactNode;
+  headerExtra?: React.ReactNode;
 }
 
 function SkeletonRow({ cols }: { cols: number }) {
   return (
     <tr>
       {Array.from({ length: cols }).map((_, i) => (
-        <td key={i} className="px-4 py-3">
-          <div className="h-4 bg-gray-200 rounded animate-pulse w-full" />
+        <td key={i} className="px-4 py-3.5">
+          <div className="h-4 rounded-lg skeleton" style={{ width: `${60 + (i * 17) % 40}%` }} />
         </td>
       ))}
     </tr>
@@ -42,73 +44,86 @@ export default function DataTable<T extends object>({
   actions,
   emptyMessage = 'هیچ موردی یافت نشد',
   emptyAction,
+  headerExtra,
 }: Props<T>) {
   const allColumns = actions
-    ? [...columns, { key: '__actions', header: 'اقدامات' }]
+    ? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-28' }]
     : columns;
 
   return (
     <div>
-      {onSearchChange !== undefined && (
-        <div className="mb-4">
-          <div className="relative max-w-xs">
-            <MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-            <input
-              type="text"
-              value={searchValue}
-              onChange={(e) => onSearchChange(e.target.value)}
-              placeholder={searchPlaceholder}
-              className="w-full h-10 pr-9 pl-3 border border-gray-300 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
-            />
-          </div>
+      {/* Search + extras header bar */}
+      {(onSearchChange !== undefined || headerExtra) && (
+        <div className="flex items-center justify-between gap-3 mb-4 flex-wrap">
+          {onSearchChange !== undefined && (
+            <div className="relative w-72 max-w-full">
+              <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" />
+              <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>}
         </div>
       )}
 
-      <div className="overflow-x-auto rounded-xl border border-gray-200">
+      <div className="overflow-x-auto rounded-xl border border-slate-200 dark:border-gray-700/50">
         <table className="w-full text-sm">
           <thead>
-            <tr className="bg-gray-50 border-b border-gray-200">
+            <tr className="bg-slate-50 dark:bg-gray-800/60 border-b border-slate-200 dark:border-gray-700/50">
               {allColumns.map((col) => (
                 <th
                   key={col.key}
-                  className="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wide whitespace-nowrap"
+                  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 ?? ''}`}
                 >
                   {col.header}
                 </th>
               ))}
             </tr>
           </thead>
-          <tbody className="divide-y divide-gray-100">
+          <tbody className="divide-y divide-slate-100 dark:divide-gray-700/40">
             {loading ? (
-              Array.from({ length: 5 }).map((_, i) => (
+              Array.from({ length: 6 }).map((_, i) => (
                 <SkeletonRow key={i} cols={allColumns.length} />
               ))
             ) : data.length === 0 ? (
               <tr>
-                <td colSpan={allColumns.length} className="text-center py-16">
-                  <div className="flex flex-col items-center gap-3 text-gray-400">
-                    <svg className="w-12 h-12" 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>
-                    <p className="text-sm">{emptyMessage}</p>
+                <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">
+                        <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>
                     {emptyAction}
                   </div>
                 </td>
               </tr>
             ) : (
               data.map((row, rowIdx) => (
-                <tr key={rowIdx} className="hover:bg-gray-50 transition-colors">
+                <tr
+                  key={rowIdx}
+                  className="hover:bg-slate-50/80 dark:hover:bg-gray-800/40 transition-colors"
+                >
                   {columns.map((col) => (
-                    <td key={col.key} className="px-4 py-3 text-gray-700 whitespace-nowrap">
+                    <td
+                      key={col.key}
+                      className="px-4 py-3.5 text-slate-700 dark:text-slate-300 whitespace-nowrap"
+                    >
                       {col.render
                         ? col.render(row)
                         : ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'}
                     </td>
                   ))}
                   {actions && (
-                    <td className="px-4 py-3 whitespace-nowrap">
-                      <div className="flex items-center gap-2">{actions(row)}</div>
+                    <td className="px-4 py-3.5 whitespace-nowrap">
+                      <div className="flex items-center gap-1">{actions(row)}</div>
                     </td>
                   )}
                 </tr>