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/AdminLayout.tsx

@@ -1,15 +1,22 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import Sidebar from './Sidebar';
 import Topbar from './Topbar';
+import { useUiStore } from '../../stores/uiStore';
 
 export default function AdminLayout() {
+  const darkMode = useUiStore((s) => s.darkMode);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', darkMode);
+  }, [darkMode]);
+
   return (
-    <div className="flex h-screen overflow-hidden bg-[#f1f5f9]">
+    <div className="flex h-screen overflow-hidden bg-slate-100 dark:bg-gray-950 transition-colors duration-200">
       <Sidebar />
-      <div className="flex flex-col flex-1 overflow-hidden">
+      <div className="flex flex-col flex-1 overflow-hidden min-w-0">
         <Topbar />
-        <main className="flex-1 overflow-y-auto p-6">
+        <main className="flex-1 overflow-y-auto p-5 lg:p-6">
           <Outlet />
         </main>
       </div>

assets/admin/components/layout/Sidebar.tsx

@@ -15,9 +15,7 @@ import {
   TagIcon,
   DocumentTextIcon,
   KeyIcon,
-  ChevronRightIcon,
-  ChevronLeftIcon,
-  MagnifyingGlassIcon,
+  Bars3Icon,
   ArrowLeftOnRectangleIcon,
 } from '@heroicons/react/24/outline';
 import { useUiStore } from '../../stores/uiStore';
@@ -66,96 +64,100 @@ export default function Sidebar() {
   const logout = useAuthStore((s) => s.logout);
   const navigate = useNavigate();
 
-  const handleLogout = () => {
-    logout();
-    navigate('/admin/login');
-  };
-
   return (
     <aside
-      style={{ transition: 'width 300ms cubic-bezier(0.4,0,0.2,1)' }}
-      className={`${open ? 'w-[260px]' : 'w-[72px]'} shrink-0 bg-[#0f172a] flex flex-col h-screen overflow-hidden`}
+      className={`
+        ${open ? 'w-64' : 'w-[70px]'}
+        shrink-0 flex flex-col h-screen overflow-hidden
+        transition-[width] duration-300 ease-in-out
+        bg-[#100c22] dark:bg-gray-950
+        border-l border-white/5
+      `}
     >
-      {/* Logo */}
-      <div className="flex items-center justify-between px-4 py-5 border-b border-slate-700/50">
+      {/* ── Header ─────────────────────────────── */}
+      <div className={`flex items-center h-16 px-3 shrink-0 border-b border-white/[0.06] ${open ? 'gap-3' : 'justify-center'}`}>
         {open && (
-          <span className="text-white font-bold text-lg tracking-tight">ClinicPro</span>
+          <div className="flex items-center gap-2.5 flex-1 min-w-0">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center shadow-lg shadow-violet-900/40 shrink-0">
+              <HeartIcon className="w-4 h-4 text-white" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-white font-bold text-sm leading-none truncate">ClinicPro</p>
+              <p className="text-slate-500 text-[10px] leading-none mt-0.5">پنل مدیریت</p>
+            </div>
+          </div>
         )}
         <button
           onClick={toggle}
-          className="text-slate-400 hover:text-white p-1 rounded-md hover:bg-slate-700/50 transition-colors"
+          className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-white/8 transition-colors shrink-0"
+          title={open ? 'بستن منو' : 'باز کردن منو'}
         >
-          {open ? <ChevronRightIcon className="w-5 h-5" /> : <ChevronLeftIcon className="w-5 h-5" />}
+          <Bars3Icon className="w-5 h-5" />
         </button>
       </div>
 
-      {/* Search */}
-      {open && (
-        <div className="px-3 py-3 border-b border-slate-700/50">
-          <div className="flex items-center gap-2 bg-slate-800 rounded-lg px-3 py-2">
-            <MagnifyingGlassIcon className="w-4 h-4 text-slate-400 shrink-0" />
-            <input
-              type="text"
-              placeholder="جستجوی سریع..."
-              className="bg-transparent text-sm text-slate-300 placeholder-slate-500 outline-none w-full"
-            />
-          </div>
-        </div>
-      )}
-
-      {/* Navigation */}
-      <nav className="flex-1 overflow-y-auto py-3 space-y-1 scrollbar-thin">
-        {sections.map((section) => (
-          <div key={section.label} className="mb-2">
-            {open && (
-              <p className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider px-4 py-1">
+      {/* ── Navigation ─────────────────────────── */}
+      <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
+        {sections.map((section, si) => (
+          <div key={section.label} className={si > 0 ? 'mt-4' : ''}>
+            {open ? (
+              <p className="text-[10px] font-semibold text-slate-600 uppercase tracking-widest px-3 py-1.5 mb-0.5">
                 {section.label}
               </p>
+            ) : (
+              <div className="border-t border-white/[0.06] mx-1 my-2" />
             )}
             {section.items.map(({ to, icon: Icon, label }) => (
               <NavLink
                 key={to}
                 to={to}
-                className={({ isActive }) =>
-                  `flex items-center gap-3 mx-2 px-3 py-2.5 rounded-lg text-sm transition-colors group ${
-                    isActive
-                      ? 'bg-primary-500/15 text-primary-400 font-semibold border-r-4 border-primary-500'
-                      : 'text-slate-400 hover:text-slate-200 hover:bg-slate-700/40'
-                  }`
-                }
                 title={!open ? label : undefined}
+                className={({ isActive }) => `
+                  relative flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm
+                  transition-all duration-150 group
+                  ${isActive
+                    ? 'bg-violet-500/15 text-violet-300 font-semibold'
+                    : 'text-slate-500 hover:text-slate-200 hover:bg-white/[0.06]'}
+                `}
               >
-                <Icon className="w-5 h-5 shrink-0" />
-                {open && <span>{label}</span>}
+                {({ isActive }) => (
+                  <>
+                    {isActive && (
+                      <span className="absolute right-0 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-violet-400 rounded-l-full" />
+                    )}
+                    <Icon className={`w-5 h-5 shrink-0 transition-transform duration-150 group-hover:scale-105 ${isActive ? 'text-violet-400' : ''}`} />
+                    {open && <span className="truncate">{label}</span>}
+                  </>
+                )}
               </NavLink>
             ))}
           </div>
         ))}
       </nav>
 
-      {/* User card */}
-      <div className="border-t border-slate-700/50 p-3">
+      {/* ── User footer ────────────────────────── */}
+      <div className="shrink-0 border-t border-white/[0.06] p-2.5">
         {open ? (
-          <div className="flex items-center gap-3 bg-slate-800 rounded-xl p-3">
-            <div className="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-bold shrink-0">
+          <div className="flex items-center gap-3 rounded-xl px-3 py-2.5 hover:bg-white/[0.06] transition-colors group">
+            <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-xs font-bold shrink-0 shadow-md shadow-violet-900/30">
               A
             </div>
             <div className="flex-1 min-w-0">
-              <p className="text-white text-sm font-medium truncate">Admin</p>
-              <p className="text-slate-400 text-xs truncate">مدیر سیستم</p>
+              <p className="text-sm font-medium text-slate-300 truncate leading-none">Admin</p>
+              <p className="text-[11px] text-slate-600 truncate mt-0.5">مدیر سیستم</p>
             </div>
             <button
-              onClick={handleLogout}
-              className="text-slate-400 hover:text-red-400 transition-colors"
+              onClick={() => { logout(); navigate('/admin/login'); }}
+              className="text-slate-600 hover:text-red-400 transition-colors p-1 rounded-lg hover:bg-red-400/10 opacity-0 group-hover:opacity-100"
               title="خروج"
             >
-              <ArrowLeftOnRectangleIcon className="w-5 h-5" />
+              <ArrowLeftOnRectangleIcon className="w-4 h-4" />
             </button>
           </div>
         ) : (
           <button
-            onClick={handleLogout}
-            className="w-full flex justify-center py-2 text-slate-400 hover:text-red-400 transition-colors"
+            onClick={() => { logout(); navigate('/admin/login'); }}
+            className="w-full flex justify-center py-2.5 text-slate-600 hover:text-red-400 transition-colors rounded-xl hover:bg-red-400/10"
             title="خروج"
           >
             <ArrowLeftOnRectangleIcon className="w-5 h-5" />

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>