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

@@ -52,7 +52,7 @@ export default function ClinicsPage() {
               {c.name?.[0]}
             </div>
           )}
-          <span className="font-medium text-gray-900">{c.name}</span>
+          <span className="font-medium text-slate-800 dark:text-slate-100">{c.name}</span>
         </div>
       ),
     },
@@ -80,7 +80,7 @@ export default function ClinicsPage() {
         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">
         <DataTable<Clinic>
           columns={columns}
           data={items}
@@ -92,15 +92,15 @@ export default function ClinicsPage() {
           actions={(clinic) => (
             <>
               <button onClick={() => navigate(`/admin/clinics/${clinic.uuid}`)}
-                className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="مشاهده">
+                className="cp-action-view" title="مشاهده">
                 <EyeIcon className="w-4 h-4" />
               </button>
               <button onClick={() => navigate(`/admin/clinics/${clinic.uuid}?edit=1`)}
-                className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" title="ویرایش">
+                className="cp-action-edit" title="ویرایش">
                 <PencilIcon className="w-4 h-4" />
               </button>
               <button onClick={() => setDeleteTarget(clinic)}
-                className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف">
+                className="cp-action-delete" title="حذف">
                 <TrashIcon className="w-4 h-4" />
               </button>
             </>