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

@@ -56,7 +56,7 @@ export default function BlogsPage() {
           {b.cover_image ? (
             <img src={b.cover_image} alt="" className="w-10 h-7 rounded object-cover shrink-0" />
           ) : (
-            <div className="w-10 h-7 rounded bg-gray-100 shrink-0" />
+            <div className="w-10 h-7 rounded bg-slate-100 dark:bg-slate-700 shrink-0" />
           )}
           <span className="font-medium text-gray-900 line-clamp-1">{b.title}</span>
         </div>
@@ -102,19 +102,19 @@ export default function BlogsPage() {
         breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'بلاگ' }]}
         action={
           <button onClick={() => navigate('/admin/blogs/new')}
-            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 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>
@@ -138,11 +138,11 @@ export default function BlogsPage() {
           actions={(blog) => (
             <>
               <button onClick={() => navigate(`/admin/blogs/${blog.uuid}/edit`)}
-                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(blog)}
-                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>
             </>