hamed/clinicpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update UI components for consistency and dark mode support

Browse Source 
- 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.
This commit is contained in:
hamed
2026-06-10 12:30:14 +03:30
parent 16ae439675
commit 942634c98e
35 changed files with 967 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/components/ui/Pagination.tsx
+13 -12
View File
@@ -22,47 +22,48 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
} else {
pages.push(1);
if (page > 3) pages.push('...');
for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
pages.push(i);
}
for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) pages.push(i);
if (page < totalPages - 2) pages.push('...');
pages.push(totalPages);
}
return (
<div className="flex items-center justify-between mt-4 text-sm">
<span className="text-gray-500">
نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)}
<div className="flex items-center justify-between mt-5 pt-4 border-t border-slate-100 dark:border-gray-700/40 text-sm flex-wrap gap-3">
<span className="text-slate-500 dark:text-slate-400 text-xs">
نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)} مورد
</span>
<div className="flex items-center gap-1">
<button
onClick={() => onPageChange(page - 1)}
disabled={page === 1}
className="p-1.5 rounded-lg hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
>
<ChevronRightIcon className="w-4 h-4" />
</button>
{pages.map((p, i) =>
p === '...' ? (
<span key={`dots-${i}`} className="px-2 text-gray-400">...</span>
<span key={`dots-${i}`} className="w-8 text-center text-slate-400 dark:text-slate-500 text-xs">…</span>
) : (
<button
key={p}
onClick={() => onPageChange(p as number)}
className={`w-8 h-8 rounded-lg text-sm transition-colors ${
className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
p === page
? 'bg-primary-600 text-white font-semibold'
: 'text-gray-600 hover:bg-gray-100'
? 'bg-primary-600 text-white shadow-sm shadow-primary-500/30'
: 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700'
}`}
>
{formatNumber(p as number)}
</button>
)
)}
<button
onClick={() => onPageChange(page + 1)}
disabled={page === totalPages}
className="p-1.5 rounded-lg hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
>
<ChevronLeftIcon className="w-4 h-4" />
</button>