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

feat: update UI components to use CSS variables for dark mode compatibility

Browse Source
This commit is contained in:
hamed
2026-06-15 14:50:45 +03:30
parent df7a784701
commit e95c5c12d1
8 changed files with 260 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/pages/AppointmentsPage.tsx
+23 -23
View File
@@ -21,17 +21,17 @@ const EMPTY_ARR: Appointment[] = [];
// ─────────────────────────────────────────────────────────────────────────────
const STATUS_META: Record<string, { label: string; color: string; bg: string }> = {
pending: { label: 'رزرو شده', color: '#3b82f6', bg: '#eff6ff' },
confirmed: { label: 'تأیید شده', color: '#22c55e', bg: '#f0fdf4' },
completed: { label: 'تکمیل شده', color: '#16a34a', bg: '#dcfce7' },
cancelled_by_doctor: { label: 'لغو پزشک', color: '#ef4444', bg: '#fef2f2' },
cancelled_by_user: { label: 'لغو بیمار', color: '#ef4444', bg: '#fef2f2' },
no_show: { label: 'غیبت', color: '#9ca3af', bg: '#f9fafb' },
expired: { label: 'منقضی', color: '#9ca3af', bg: '#f9fafb' },
pending: { label: 'رزرو شده', color: 'var(--info)', bg: 'var(--info-bg)' },
confirmed: { label: 'تأیید شده', color: 'var(--success)', bg: 'var(--success-bg)' },
completed: { label: 'تکمیل شده', color: 'var(--success)', bg: 'var(--success-bg)' },
cancelled_by_doctor: { label: 'لغو پزشک', color: 'var(--danger)', bg: 'var(--danger-bg)' },
cancelled_by_user: { label: 'لغو بیمار', color: 'var(--danger)', bg: 'var(--danger-bg)' },
no_show: { label: 'غیبت', color: 'var(--text-3)', bg: 'var(--surface-2)' },
expired: { label: 'منقضی', color: 'var(--text-3)', bg: 'var(--surface-2)' },
};
function statusMeta(s: string) {
return STATUS_META[s] ?? { label: s, color: '#9ca3af', bg: '#f9fafb' };
return STATUS_META[s] ?? { label: s, color: 'var(--text-3)', bg: 'var(--surface-2)' };
}
// ─────────────────────────────────────────────────────────────────────────────
@@ -275,7 +275,7 @@ function CancelledBadge({ appt }: { appt: Appointment }) {
<div style={{
display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px',
borderRadius: 'var(--r-sm)', background: '#f9fafb',
border: '1px dashed #d1d5db', fontSize: 12, color: '#6b7280',
border: '1px dashed var(--border-2)', fontSize: 12, color: 'var(--text-3)',
marginBottom: 4,
}}>
<span style={{ fontSize: 14, lineHeight: 1 }}>⊘</span>
@@ -283,11 +283,11 @@ function CancelledBadge({ appt }: { appt: Appointment }) {
padding: '1px 6px', borderRadius: 99, fontSize: 11, fontWeight: 700,
background: `${sm.color}15`, color: sm.color, whiteSpace: 'nowrap',
}}>{sm.label}</span>
<span style={{ direction: 'ltr', color: '#374151', fontWeight: 600, whiteSpace: 'nowrap' }}>
<span style={{ direction: 'ltr', color: 'var(--text)', fontWeight: 600, whiteSpace: 'nowrap' }}>
{appt.appointment_time} — {appt.end_time}
</span>
<span style={{ fontWeight: 600, color: '#374151' }}>{appt.patient_name || '—'}</span>
<span style={{ direction: 'ltr', color: '#9ca3af' }}>{appt.patient_mobile}</span>
<span style={{ fontWeight: 600, color: 'var(--text)' }}>{appt.patient_name || '—'}</span>
<span style={{ direction: 'ltr', color: 'var(--text-3)' }}>{appt.patient_mobile}</span>
</div>
);
}
@@ -333,10 +333,10 @@ function SlotCard({ slot, queryKey, onBook }: { slot: SlotItem; queryKey: unknow
<div style={{ display: 'flex', flexDirection: 'column' }}>
{slot.cancelled_appointment && <CancelledBadge appt={slot.cancelled_appointment} />}
<div style={{
border: '1.5px dashed #d1d5db', borderRadius: 'var(--r)', padding: '10px 16px',
border: '1.5px dashed var(--border-2)', borderRadius: 'var(--r)', padding: '10px 16px',
display: 'flex', alignItems: 'center', justifyContent: 'center',
cursor: 'not-allowed', color: '#9ca3af', fontSize: 13, fontWeight: 600,
background: '#f9fafb', gap: 6,
cursor: 'not-allowed', color: 'var(--text-3)', fontSize: 13, fontWeight: 600,
background: 'var(--surface-2)', gap: 6,
}}>
<span style={{ fontSize: 15 }}>⊘</span> گذشته
</div>
@@ -350,13 +350,13 @@ function SlotCard({ slot, queryKey, onBook }: { slot: SlotItem; queryKey: unknow
<div
onClick={() => onBook(slot)}
style={{
border: '1.5px dashed #93c5fd', borderRadius: 'var(--r)', padding: '10px 16px',
border: '1.5px dashed color-mix(in oklch, var(--info) 50%, transparent)', borderRadius: 'var(--r)', padding: '10px 16px',
display: 'flex', alignItems: 'center', justifyContent: 'center',
cursor: 'pointer', color: '#3b82f6', fontSize: 13, fontWeight: 600,
background: '#eff6ff', transition: 'all 0.15s', gap: 6,
cursor: 'pointer', color: 'var(--info)', fontSize: 13, fontWeight: 600,
background: 'var(--info-bg)', transition: 'all 0.15s', gap: 6,
}}
onMouseEnter={e => (e.currentTarget.style.background = '#dbeafe')}
onMouseLeave={e => (e.currentTarget.style.background = '#eff6ff')}
onMouseEnter={e => (e.currentTarget.style.background = 'color-mix(in oklch, var(--info) 20%, transparent)')}
onMouseLeave={e => (e.currentTarget.style.background = 'var(--info-bg)')}
>
<span style={{ fontSize: 18 }}>⊕</span> نوبت جدید
</div>
@@ -751,14 +751,14 @@ export default function AppointmentsPage() {
<div style={{
display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12,
padding: '10px 16px', borderRadius: 'var(--r-sm)',
background: '#eff6ff', border: '1px solid #bfdbfe',
fontSize: 13, color: '#1d4ed8',
background: 'var(--info-bg)', border: '1px solid color-mix(in oklch, var(--info) 40%, transparent)',
fontSize: 13, color: 'var(--info)',
}}>
<span style={{ fontSize: 18 }}>👆</span>
<span>روی یک زمان خالی <strong>کلیک کنید</strong> تا نوبت جدید ثبت شود</span>
<button
onClick={() => setBookingHint(false)}
style={{ marginRight: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: '#93c5fd', fontSize: 16 }}
style={{ marginRight: 'auto', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--info)', fontSize: 16 }}
>
✕
</button>