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

@@ -82,12 +82,12 @@ export default function SettlementsPage() {
         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">
           {STATUS_FILTERS.map((f) => (
             <button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }}
               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'
+                statusFilter === f.value ? 'bg-primary-600 text-white' : '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}
             </button>
@@ -102,7 +102,7 @@ export default function SettlementsPage() {
           actions={(s) => (
             <>
               <button onClick={() => navigate(`/admin/settlements/${s.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>
               {s.status === 'pending' && (
@@ -112,7 +112,7 @@ export default function SettlementsPage() {
                     <CheckIcon className="w-4 h-4" />
                   </button>
                   <button onClick={() => setRejectTarget(s)}
-                    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>
                 </>
@@ -140,25 +140,25 @@ export default function SettlementsPage() {
         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({ s: 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">
               {rejectMutation.isPending ? 'در حال ارسال...' : 'رد کردن'}
             </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>
     </div>