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

@@ -52,7 +52,7 @@ export default function DoctorsPage() {
               {d.first_name?.[0] ?? '?'}
             </div>
           )}
-          <span className="font-medium text-gray-900">{d.first_name} {d.last_name}</span>
+          <span className="font-medium text-slate-800 dark:text-slate-100">{d.first_name} {d.last_name}</span>
         </div>
       ),
     },
@@ -60,7 +60,7 @@ export default function DoctorsPage() {
     {
       key: 'degree',
       header: 'درجه',
-      render: (d) => <span className="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full">{d.degree}</span>,
+      render: (d) => <span className="text-xs bg-blue-50 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300 px-2 py-0.5 rounded-full">{d.degree}</span>,
     },
     {
       key: 'gender',
@@ -73,7 +73,7 @@ export default function DoctorsPage() {
       render: (d) => (
         <div className="flex flex-wrap gap-1">
           {d.specialties?.slice(0, 2).map((s) => (
-            <span key={s.uuid} className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{s.name}</span>
+            <span key={s.uuid} className="text-xs bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 px-2 py-0.5 rounded-full">{s.name}</span>
           ))}
           {(d.specialties?.length ?? 0) > 2 && (
             <span className="text-xs text-gray-400">+{d.specialties.length - 2}</span>
@@ -103,7 +103,7 @@ export default function DoctorsPage() {
         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<Doctor>
           columns={columns}
           data={items}
@@ -116,21 +116,21 @@ export default function DoctorsPage() {
             <>
               <button
                 onClick={() => navigate(`/admin/doctors/${doctor.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" />
               </button>
               <button
                 onClick={() => navigate(`/admin/doctors/${doctor.uuid}?edit=1`)}
-                className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors"
+                className="cp-action-edit"
                 title="ویرایش"
               >
                 <PencilIcon className="w-4 h-4" />
               </button>
               <button
                 onClick={() => setDeleteTarget(doctor)}
-                className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                className="cp-action-delete"
                 title="حذف"
               >
                 <TrashIcon className="w-4 h-4" />