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

@@ -83,9 +83,9 @@ export default function BlogFormPage() {
 
   if (isEdit && isLoading) {
     return (
-      <div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3">
+      <div className="cp-card p-6 space-y-3">
         {Array.from({ length: 5 }).map((_, i) => (
-          <div key={i} className="h-10 bg-gray-100 rounded-lg animate-pulse" />
+          <div key={i} className="h-10 rounded-lg skeleton" />
         ))}
       </div>
     );
@@ -102,40 +102,40 @@ export default function BlogFormPage() {
         ]}
       />
 
-      <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
+      <div className="cp-card p-6">
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
           <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
             <div className="lg:col-span-2 space-y-5">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">عنوان مقاله *</label>
+                <label className="cp-label">عنوان مقاله *</label>
                 <input {...register('title')} 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.title && <p className="text-red-500 text-xs mt-1">{errors.title.message}</p>}
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">خلاصه</label>
+                <label className="cp-label">خلاصه</label>
                 <textarea {...register('summary')} rows={2} 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" />
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">محتوا *</label>
+                <label className="cp-label">محتوا *</label>
                 <textarea {...register('content')} rows={16} 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 font-mono" />
+                  className="cp-textarea resize-none font-mono" />
                 {errors.content && <p className="text-red-500 text-xs mt-1">{errors.content.message}</p>}
               </div>
             </div>
 
             <div className="space-y-5">
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">وضعیت انتشار</label>
+                <label className="cp-label">وضعیت انتشار</label>
                 <Controller
                   control={control}
                   name="status"
                   render={({ field }) => (
                     <select {...field}
-                      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">
                       <option value="draft">پیش‌نویس</option>
                       <option value="published">منتشر</option>
                     </select>
@@ -144,9 +144,9 @@ export default function BlogFormPage() {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 mb-1">تگ‌ها (با ویرگول جدا کنید)</label>
+                <label className="cp-label">تگ‌ها (با ویرگول جدا کنید)</label>
                 <input {...register('tags')} dir="ltr" placeholder="tag1, tag2, tag3"
-                  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 className="pt-4 space-y-3">