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

@@ -47,7 +47,7 @@ export default function AppointmentsPage() {
       header: 'بیمار',
       render: (a) => (
         <div>
-          <p className="font-medium text-gray-900">{a.patient_name || '—'}</p>
+          <p className="font-medium text-slate-800 dark:text-slate-100">{a.patient_name || '—'}</p>
           <p className="text-xs text-gray-400 dir-ltr">{maskMobile(a.patient_mobile)}</p>
         </div>
       ),
@@ -87,7 +87,7 @@ export default function AppointmentsPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نوبت‌ها' }]}
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <div className="flex items-center gap-3 mb-4 flex-wrap">
           {STATUS_FILTERS.map((f) => (
             <button
@@ -96,7 +96,7 @@ export default function AppointmentsPage() {
               className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
                 statusFilter === f.value
                   ? 'bg-primary-600 text-white'
-                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                  : 'bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-gray-600'
               }`}
             >
               {f.label}
@@ -115,7 +115,7 @@ export default function AppointmentsPage() {
           actions={(appt) => (
             <button
               onClick={() => navigate(`/admin/appointments/${appt.uuid}`)}
-              className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+              className="cp-action-view"
               title="مشاهده"
             >
               <EyeIcon className="w-4 h-4" />