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

@@ -14,9 +14,9 @@ import Modal from '../components/ui/Modal';
 
 function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
   return (
-    <div className="flex items-start gap-4 py-3 border-b border-gray-100 last:border-0">
+    <div className="cp-info-row items-start gap-4">
       <span className="text-sm text-gray-500 w-40 shrink-0">{label}</span>
-      <span className="text-sm text-gray-800 font-medium">{value ?? '—'}</span>
+      <span className="cp-info-value">{value ?? '—'}</span>
     </div>
   );
 }
@@ -122,7 +122,7 @@ export default function RepresentationDetailPage() {
             { label: 'نمایندگان', to: '/admin/representations' },
           ]}
         />
-        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center text-gray-400">
+        <div className="cp-card p-12 text-center text-slate-400 dark:text-slate-500">
           نماینده‌ای با این شناسه یافت نشد.
         </div>
       </div>
@@ -176,7 +176,7 @@ export default function RepresentationDetailPage() {
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {/* Basic Info */}
-        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+        <div className="cp-card p-6">
           <h2 className="text-sm font-semibold text-gray-700 mb-4">اطلاعات پایه</h2>
           <DetailRow label="نام کامل" value={rep.full_name} />
           <DetailRow label="موبایل" value={
@@ -191,7 +191,7 @@ export default function RepresentationDetailPage() {
         </div>
 
         {/* Bank Account */}
-        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+        <div className="cp-card p-6">
           <h2 className="text-sm font-semibold text-gray-700 mb-4">اطلاعات بانکی</h2>
           {rep.bank_account ? (
             <>
@@ -219,7 +219,7 @@ export default function RepresentationDetailPage() {
         footer={
           <>
             <button onClick={() => setEditOpen(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
@@ -230,7 +230,7 @@ export default function RepresentationDetailPage() {
                 commission_percent: parseFloat(formData.commission_percent) || rep.commission_percent,
               } as any)}
               disabled={updateMutation.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">
               {updateMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
             </button>
           </>
@@ -238,16 +238,16 @@ export default function RepresentationDetailPage() {
       >
         <div className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">نام کامل</label>
+            <label className="cp-label">نام کامل</label>
             <input value={formData.full_name} onChange={(e) => setFormData((p) => ({ ...p, full_name: e.target.value }))}
-              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>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">شهر</label>
+            <label className="cp-label">شهر</label>
             <select
               value={formData.city_id}
               onChange={(e) => setFormData((p) => ({ ...p, city_id: e.target.value }))}
-              className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white"
+              className="cp-input h-11"
             >
               <option value="">انتخاب شهر</option>
               {cities.map((c) => (
@@ -256,15 +256,15 @@ export default function RepresentationDetailPage() {
             </select>
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">موبایل</label>
+            <label className="cp-label">موبایل</label>
             <input value={formData.mobile_number} onChange={(e) => setFormData((p) => ({ ...p, mobile_number: e.target.value }))}
-              dir="ltr" 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" />
+              dir="ltr" className="cp-input h-11" />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">درصد کمیسیون</label>
+            <label className="cp-label">درصد کمیسیون</label>
             <input value={formData.commission_percent} onChange={(e) => setFormData((p) => ({ ...p, commission_percent: e.target.value }))}
               type="number" min="0" max="100" dir="ltr"
-              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>
         </div>
       </Modal>