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/pages/UserDetailPage.tsx

@@ -11,9 +11,9 @@ import { ActiveBadge } from '../components/ui/StatusBadge';
 
 function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0">
-      <span className="text-sm text-gray-500">{label}</span>
-      <span className="text-sm font-medium text-gray-900">{value ?? '—'}</span>
+    <div className="cp-info-row">
+      <span className="cp-info-label text-sm">{label}</span>
+      <span className="cp-info-value">{value ?? '—'}</span>
     </div>
   );
 }
@@ -42,7 +42,7 @@ export default function UserDetailPage() {
         action={
           <button
             onClick={() => navigate('/admin/users')}
-            className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-800 transition-colors"
+            className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors"
           >
             <ArrowRightIcon className="w-4 h-4" />
             بازگشت
@@ -51,9 +51,9 @@ export default function UserDetailPage() {
       />
 
       {isLoading ? (
-        <div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3">
+        <div className="cp-card p-6 space-y-3">
           {Array.from({ length: 6 }).map((_, i) => (
-            <div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" />
+            <div key={i} className="h-8 rounded-lg skeleton" />
           ))}
         </div>
       ) : user ? (