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.
This commit is contained in:
hamed
@@ -113,20 +113,20 @@ export default function RepresentationsPage() {
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نمایندگان' }]}
|
||||
action={
|
||||
<button onClick={() => setAddOpen(true)}
|
||||
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">
|
||||
{/* City filter */}
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<select
|
||||
value={cityFilter}
|
||||
onChange={(e) => { setCityFilter(e.target.value); setPage(1); }}
|
||||
className="h-10 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 min-w-[160px]"
|
||||
className="cp-input min-w-[160px]"
|
||||
>
|
||||
<option value="">همه شهرها</option>
|
||||
{cities.map((c) => (
|
||||
@@ -154,11 +154,11 @@ export default function RepresentationsPage() {
|
||||
actions={(rep) => (
|
||||
<>
|
||||
<button onClick={() => navigate(`/admin/representations/${rep.uuid}`)}
|
||||
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="مشاهده">
|
||||
className="cp-action-view" title="مشاهده">
|
||||
<EyeIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => setDeleteTarget(rep)}
|
||||
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>
|
||||
</>
|
||||
@@ -171,11 +171,11 @@ export default function RepresentationsPage() {
|
||||
footer={
|
||||
<>
|
||||
<button onClick={() => { setAddOpen(false); reset(); }}
|
||||
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 form="add-rep-form" type="submit" disabled={isSubmitting}
|
||||
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">
|
||||
{isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
|
||||
</button>
|
||||
</>
|
||||
@@ -183,21 +183,21 @@ export default function RepresentationsPage() {
|
||||
>
|
||||
<form id="add-rep-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">نام کامل</label>
|
||||
<label className="cp-label">نام کامل</label>
|
||||
<input {...register('full_name')} 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.full_name && <p className="text-red-500 text-xs mt-1">{errors.full_name.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">شماره موبایل</label>
|
||||
<label className="cp-label">شماره موبایل</label>
|
||||
<input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx"
|
||||
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.mobile_number && <p className="text-red-500 text-xs mt-1">{errors.mobile_number.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">شهر</label>
|
||||
<label className="cp-label">شهر</label>
|
||||
<select {...register('city_id')}
|
||||
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) => (
|
||||
<option key={c.id} value={c.id}>{c.label}</option>
|
||||
@@ -205,9 +205,9 @@ export default function RepresentationsPage() {
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">درصد کمیسیون</label>
|
||||
<label className="cp-label">درصد کمیسیون</label>
|
||||
<input {...register('commission_percent')} type="number" min="0" max="100" placeholder="10" 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" />
|
||||
{errors.commission_percent && <p className="text-red-500 text-xs mt-1">{errors.commission_percent.message}</p>}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user