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/layout/Topbar.tsx

@@ -1,53 +1,55 @@
 import React from 'react';
-import { Bars3Icon, BellIcon } from '@heroicons/react/24/outline';
+import { BellIcon, SunIcon, MoonIcon, Bars3Icon } from '@heroicons/react/24/outline';
 import { useUiStore } from '../../stores/uiStore';
 
-interface TopbarProps {
-  pageTitle?: string;
-  breadcrumbs?: { label: string; to?: string }[];
-}
-
-export default function Topbar({ pageTitle, breadcrumbs }: TopbarProps) {
-  const toggle = useUiStore((s) => s.toggleSidebar);
+export default function Topbar() {
+  const toggleSidebar = useUiStore((s) => s.toggleSidebar);
+  const darkMode = useUiStore((s) => s.darkMode);
+  const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
 
   return (
-    <header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0">
-      <div className="flex items-center gap-4">
+    <header className="h-14 bg-white dark:bg-gray-900 border-b border-slate-200 dark:border-gray-700/50 flex items-center justify-between px-4 lg:px-6 shrink-0 transition-colors duration-200">
+      {/* Left side (RTL: right side visually) */}
+      <button
+        onClick={toggleSidebar}
+        className="lg:hidden w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
+      >
+        <Bars3Icon className="w-5 h-5" />
+      </button>
+
+      <div className="flex-1" />
+
+      {/* Right side actions */}
+      <div className="flex items-center gap-1">
+        {/* Dark mode toggle */}
         <button
-          onClick={toggle}
-          className="text-gray-500 hover:text-gray-700 p-1 rounded-md hover:bg-gray-100 transition-colors md:hidden"
+          onClick={toggleDarkMode}
+          className="w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
+          title={darkMode ? 'حالت روشن' : 'حالت تاریک'}
         >
-          <Bars3Icon className="w-5 h-5" />
+          {darkMode
+            ? <SunIcon className="w-5 h-5 text-amber-400" />
+            : <MoonIcon className="w-5 h-5" />}
         </button>
 
-        <div>
-          {pageTitle && <h2 className="text-base font-semibold text-gray-800">{pageTitle}</h2>}
-          {breadcrumbs && breadcrumbs.length > 0 && (
-            <nav className="flex items-center gap-1 text-xs text-gray-500">
-              {breadcrumbs.map((crumb, i) => (
-                <React.Fragment key={i}>
-                  {i > 0 && <span>/</span>}
-                  <span className={i === breadcrumbs.length - 1 ? 'text-gray-700 font-medium' : ''}>
-                    {crumb.label}
-                  </span>
-                </React.Fragment>
-              ))}
-            </nav>
-          )}
-        </div>
-      </div>
-
-      <div className="flex items-center gap-3">
-        <button className="relative text-gray-500 hover:text-gray-700 p-2 rounded-lg hover:bg-gray-100 transition-colors">
+        {/* Notifications */}
+        <button className="relative w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors">
           <BellIcon className="w-5 h-5" />
-          <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
+          <span className="absolute top-2 right-2 w-1.5 h-1.5 bg-red-500 rounded-full ring-2 ring-white dark:ring-gray-900" />
         </button>
 
-        <div className="flex items-center gap-2 cursor-pointer">
-          <div className="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-bold">
+        {/* Divider */}
+        <div className="w-px h-6 bg-slate-200 dark:bg-gray-700 mx-1" />
+
+        {/* Avatar */}
+        <div className="flex items-center gap-2.5 cursor-pointer pl-1">
+          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center text-white text-sm font-bold shadow-sm">
             A
           </div>
-          <span className="text-sm font-medium text-gray-700 hidden sm:block">Admin</span>
+          <div className="hidden sm:block">
+            <p className="text-sm font-semibold text-slate-700 dark:text-slate-200 leading-none">Admin</p>
+            <p className="text-[11px] text-slate-400 dark:text-slate-500 leading-none mt-0.5">مدیر سیستم</p>
+          </div>
         </div>
       </div>
     </header>