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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { ChevronLeftIcon } from '@heroicons/react/24/outline';
 
 interface Crumb {
   label: string;
@@ -10,31 +11,35 @@ interface Props {
   title: string;
   breadcrumbs?: Crumb[];
   action?: React.ReactNode;
+  description?: string;
 }
 
-export default function PageHeader({ title, breadcrumbs, action }: Props) {
+export default function PageHeader({ title, breadcrumbs, action, description }: Props) {
   return (
-    <div className="flex items-start justify-between mb-6">
-      <div>
-        <h1 className="text-xl font-bold text-gray-900">{title}</h1>
+    <div className="flex items-start justify-between mb-6 gap-4">
+      <div className="min-w-0">
         {breadcrumbs && breadcrumbs.length > 0 && (
-          <nav className="flex items-center gap-1 mt-1 text-sm text-gray-500">
+          <nav className="flex items-center gap-0.5 mb-1.5 text-xs text-slate-500 dark:text-slate-400">
             {breadcrumbs.map((crumb, i) => (
               <React.Fragment key={i}>
-                {i > 0 && <span className="text-gray-300">/</span>}
+                {i > 0 && <ChevronLeftIcon className="w-3 h-3 text-slate-300 dark:text-slate-600 mx-0.5 shrink-0" />}
                 {crumb.to ? (
-                  <Link to={crumb.to} className="hover:text-primary-600 transition-colors">
+                  <Link to={crumb.to} className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors truncate">
                     {crumb.label}
                   </Link>
                 ) : (
-                  <span className="text-gray-700">{crumb.label}</span>
+                  <span className="text-slate-700 dark:text-slate-300 font-medium truncate">{crumb.label}</span>
                 )}
               </React.Fragment>
             ))}
           </nav>
         )}
+        <h1 className="text-xl font-bold text-slate-900 dark:text-slate-50 leading-tight">{title}</h1>
+        {description && (
+          <p className="text-sm text-slate-500 dark:text-slate-400 mt-1">{description}</p>
+        )}
       </div>
-      {action && <div>{action}</div>}
+      {action && <div className="shrink-0">{action}</div>}
     </div>
   );
 }