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

@@ -94,7 +94,7 @@ function PermissionsMatrix({
             const allActions = ['view', 'create', 'update', 'delete', 'cancel', 'update_status'];
             return (
               <tr key={section} className="border-t border-gray-100">
-                <td className="py-3 pr-0 text-gray-700 font-medium">{config.label}</td>
+                <td className="py-3 pr-0 text-slate-700 dark:text-slate-300 font-medium">{config.label}</td>
                 {allActions.map((action) => {
                   const actionConfig = config.actions.find((a) => a.key === action);
                   if (!actionConfig) {
@@ -168,7 +168,7 @@ export default function SecretariesPage() {
     {
       key: 'user_name',
       header: 'نام',
-      render: (s) => <span className="font-medium text-gray-900">{s.user_name}</span>,
+      render: (s) => <span className="font-medium text-slate-800 dark:text-slate-100">{s.user_name}</span>,
     },
     {
       key: 'mobile_number',
@@ -190,7 +190,7 @@ export default function SecretariesPage() {
         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<Secretary>
           columns={columns}
           data={items}
@@ -202,11 +202,11 @@ export default function SecretariesPage() {
           actions={(sec) => (
             <>
               <button onClick={() => openEdit(sec)}
-                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(sec)}
-                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>
             </>
@@ -223,13 +223,13 @@ export default function SecretariesPage() {
         footer={
           <>
             <button onClick={() => setEditTarget(null)}
-              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={() => editTarget && updatePermsMutation.mutate({ uuid: editTarget.uuid, permissions: editPerms })}
               disabled={updatePermsMutation.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">
               {updatePermsMutation.isPending ? 'در حال ذخیره...' : 'ذخیره دسترسی‌ها'}
             </button>
           </>