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

@@ -25,9 +25,9 @@ const ALL_STATUSES: { value: AppointmentStatus; label: string }[] = [
 
 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>
   );
 }
@@ -78,7 +78,7 @@ export default function AppointmentDetailPage() {
         ]}
         action={
           <button onClick={() => navigate('/admin/appointments')}
-            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" />
             بازگشت
           </button>
@@ -86,9 +86,9 @@ export default function AppointmentDetailPage() {
       />
 
       {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>
       ) : appt ? (
@@ -113,12 +113,12 @@ export default function AppointmentDetailPage() {
             </div>
 
             <div className="mt-6">
-              <label className="block text-sm font-medium text-gray-700 mb-2">تغییر وضعیت:</label>
+              <label className="cp-label mb-2">تغییر وضعیت:</label>
               <div className="flex gap-2">
                 <select
                   value={newStatus}
                   onChange={(e) => setNewStatus(e.target.value)}
-                  className="flex-1 h-10 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
+                  className="cp-input flex-1"
                 >
                   <option value="">انتخاب وضعیت...</option>
                   {ALL_STATUSES.map((s) => (
@@ -128,7 +128,7 @@ export default function AppointmentDetailPage() {
                 <button
                   onClick={() => newStatus && statusMutation.mutate(newStatus)}
                   disabled={!newStatus || statusMutation.isPending}
-                  className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors"
+                  className="cp-btn-primary"
                 >
                   اعمال
                 </button>