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

@@ -101,7 +101,7 @@ export default function CategoriesPage() {
       key: 'bundle',
       header: 'نوع',
       render: (c) => (
-        <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{c.bundle}</span>
+        <span className="text-xs bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 px-2 py-0.5 rounded-full">{c.bundle}</span>
       ),
     },
     {
@@ -129,21 +129,21 @@ export default function CategoriesPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'دسته‌بندی‌ها' }]}
         action={
           <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>
         }
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100">
-        <div className="flex flex-wrap border-b border-gray-200 px-6 pt-4 gap-1">
+      <div className="cp-card">
+        <div className="flex flex-wrap border-b border-slate-200 dark:border-gray-700 px-6 pt-4 gap-1">
           {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>
@@ -162,11 +162,11 @@ export default function CategoriesPage() {
             actions={(cat) => (
               <>
                 <button onClick={() => openEdit(cat)}
-                  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(cat)}
-                  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>
               </>
@@ -181,11 +181,11 @@ export default function CategoriesPage() {
         footer={
           <>
             <button onClick={() => { setAddOpen(false); reset(); }}
-              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="cat-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">
               ذخیره
             </button>
           </>
@@ -193,16 +193,16 @@ export default function CategoriesPage() {
       >
         <form id="cat-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('label')}
-              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.label && <p className="text-red-500 text-xs mt-1">{errors.label.message}</p>}
           </div>
           {activeTab === 'city' && (
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-1">شناسه استان</label>
+              <label className="cp-label">شناسه استان</label>
               <input {...register('parent_id')} dir="ltr" placeholder="ID عددی استان"
-                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" />
             </div>
           )}
         </form>
@@ -214,11 +214,11 @@ export default function CategoriesPage() {
         footer={
           <>
             <button onClick={() => { setEditTarget(null); reset(); }}
-              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="edit-cat-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">
               ذخیره
             </button>
           </>
@@ -228,9 +228,9 @@ export default function CategoriesPage() {
           onSubmit={handleSubmit((d) => editTarget && updateMutation.mutate({ id: editTarget.id, 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('label')}
-              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.label && <p className="text-red-500 text-xs mt-1">{errors.label.message}</p>}
           </div>
         </form>