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

@@ -71,7 +71,7 @@ export default function RatingsPage() {
         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<Rating>
           columns={columns}
           data={items}
@@ -82,7 +82,7 @@ export default function RatingsPage() {
           emptyMessage="هیچ امتیازی یافت نشد"
           actions={(rating) => (
             <button onClick={() => setDeleteTarget(rating)}
-              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>
           )}