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

@@ -164,7 +164,7 @@ export default function SmsPage() {
         action={
           activeTab === 'samples' ? (
             <button onClick={() => setAddOpen(true)}
-              className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors">
+              className="cp-btn-primary">
               <PlusIcon className="w-4 h-4" />
               افزودن قالب
             </button>
@@ -172,14 +172,14 @@ export default function SmsPage() {
         }
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100">
-        <div className="flex border-b border-gray-200 px-6 pt-4">
+      <div className="cp-card">
+        <div className="flex border-b border-slate-200 dark:border-gray-700 px-6 pt-4">
           {tabs.map((t) => (
             <button key={t.key} onClick={() => handleTabChange(t.key)}
               className={`pb-3 px-4 text-sm font-medium border-b-2 transition-colors -mb-px ${
                 activeTab === t.key
                   ? 'border-primary-600 text-primary-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700'
+                  : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
               }`}>
               {t.label}
             </button>
@@ -196,7 +196,7 @@ export default function SmsPage() {
                 emptyMessage="هیچ قالبی یافت نشد"
                 actions={(t) => (
                   <button onClick={() => setDeleteTarget(t)}
-                    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>
                 )}
@@ -224,7 +224,7 @@ export default function SmsPage() {
                       <CheckIcon className="w-4 h-4" />
                     </button>
                     <button onClick={() => setRejectTarget(t)}
-                      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="رد">
                       <XMarkIcon className="w-4 h-4" />
                     </button>
                   </>
@@ -262,11 +262,11 @@ export default function SmsPage() {
         footer={
           <>
             <button onClick={() => setAddOpen(false)}
-              className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
+              className="cp-btn-secondary">
               لغو
             </button>
             <button form="add-sms-form" type="submit" disabled={isSubmitting}
-              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">
               {isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
             </button>
           </>
@@ -274,15 +274,15 @@ export default function SmsPage() {
       >
         <form id="add-sms-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">نام قالب</label>
+            <label className="cp-label">نام قالب</label>
             <input {...register('name')} placeholder="مثال: تأیید نوبت"
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" />
+              className="cp-input h-11" />
             {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">متن قالب</label>
+            <label className="cp-label">متن قالب</label>
             <textarea {...register('body')} rows={4} placeholder="متن پیامک..."
-              className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" />
+              className="cp-textarea resize-none" />
             {errors.body && <p className="text-red-500 text-xs mt-1">{errors.body.message}</p>}
           </div>
         </form>
@@ -293,22 +293,22 @@ export default function SmsPage() {
         footer={
           <>
             <button onClick={() => { setRejectTarget(null); setRejectReason(''); }}
-              className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors">
+              className="cp-btn-secondary">
               لغو
             </button>
             <button
               onClick={() => rejectTarget && rejectMutation.mutate({ t: rejectTarget, reason: rejectReason })}
               disabled={!rejectReason || rejectMutation.isPending}
-              className="px-4 py-2 bg-red-600 text-white text-sm rounded-[10px] hover:bg-red-700 disabled:opacity-50 transition-colors">
+              className="cp-btn-danger">
               رد کردن
             </button>
           </>
         }
       >
-        <label className="block text-sm font-medium text-gray-700 mb-2">دلیل رد:</label>
+        <label className="cp-label mb-2">دلیل رد:</label>
         <textarea value={rejectReason} onChange={(e) => setRejectReason(e.target.value)}
           rows={4} placeholder="دلیل رد را بنویسید..."
-          className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" />
+          className="cp-textarea resize-none" />
       </Modal>
 
       <ConfirmDialog