hamed
55ab2f5dfc
- Refactor color palette in `ui-design-spec.md` to utilize CSS variables exclusively, eliminating fixed hex values and Tailwind utility classes. - Complete dark mode implementation in `uiStore.ts`, ensuring proper theme application via `applyTheme()` and `applyBrand()`. - Create `admin-theme-dark-light-audit.md` to document the transition process, outlining issues with inline styles and fixed colors. - Introduce `theme-tokens.test.ts` to enforce rules against fixed hex colors and ensure compliance with the design system. - Update various components and styles to replace inline styles and fixed colors with CSS variables, ensuring consistent theming across light and dark modes. - Ensure all changes maintain visual integrity in both light and dark modes, with a focus on accessibility and contrast standards.
94 lines
3.8 KiB
TypeScript
94 lines
3.8 KiB
TypeScript
import type { CSSProperties, ReactNode } from 'react';
|
|
import { formatDate, formatTime } from '../lib/utils';
|
|
import {
|
|
FilesServiceSuccess, FilesServiceMore, CalendarD, ClockP, UserD, StatusGlobe,
|
|
} from './icons/FilesServiceIcons';
|
|
import AppointmentStatusDropdown from './ui/AppointmentStatusDropdown';
|
|
|
|
export interface AppointmentCardData {
|
|
uuid: string;
|
|
starts_at: number;
|
|
status: string;
|
|
version: number;
|
|
doctor_name?: string | null;
|
|
service_name?: string | null;
|
|
}
|
|
|
|
/**
|
|
* label/value row inside the turn card — mirrors tauri ServiceInfoRow
|
|
* (separatedValues variant): icon+label on one side, value (optionally chip) on
|
|
* the other.
|
|
*/
|
|
function InfoRow({ icon, label, value, chip = false, valueStyle }: {
|
|
icon: ReactNode; label: string; value: ReactNode; chip?: boolean; valueStyle?: CSSProperties;
|
|
}) {
|
|
return (
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
{icon}
|
|
<span style={{ fontSize: 12, color: 'var(--text-2)' }}>{label}:</span>
|
|
</div>
|
|
<span
|
|
className={chip ? 'dark:bg-[var(--surface-2)]' : ''}
|
|
style={{
|
|
fontSize: 12, color: 'var(--text)', textAlign: 'left',
|
|
...(chip ? { background: 'var(--surface-2)', borderRadius: 8, padding: '2px 8px', color: 'var(--text)' } : {}),
|
|
...valueStyle,
|
|
}}
|
|
>
|
|
{value}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* A patient «نوبت» card — ported pixel-for-pixel from tauri
|
|
* files/services/TurnsCard. The status uses the admin's live
|
|
* AppointmentStatusDropdown (backed by PATCH /appointment/{uuid}/status)
|
|
* instead of the tauri mock.
|
|
*/
|
|
export default function AppointmentTurnCard({ appointment, queryKey }: {
|
|
appointment: AppointmentCardData;
|
|
queryKey: unknown[];
|
|
}) {
|
|
const title = appointment.service_name || 'نوبت';
|
|
return (
|
|
<div
|
|
className="bg-[var(--surface)] border border-[var(--border)]"
|
|
style={{ width: 277, maxWidth: '100%', minHeight: 249, borderRadius: 12, padding: 14, display: 'flex', flexDirection: 'column', gap: 10, boxShadow: '0 1px 6px rgba(15,23,42,0.06)' }}
|
|
>
|
|
{/* Header */}
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 2 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
|
|
<FilesServiceSuccess />
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 3, minWidth: 0 }}>
|
|
<span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 180 }}>{title}</span>
|
|
</div>
|
|
</div>
|
|
<FilesServiceMore style={{ color: 'var(--text-3)', flexShrink: 0 }} />
|
|
</div>
|
|
|
|
<div style={{ borderTop: '1px solid var(--border)' }} />
|
|
|
|
{/* Middle: date & time chips */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
<InfoRow icon={<CalendarD />} label="تاریخ" chip value={formatDate(appointment.starts_at)} />
|
|
<InfoRow icon={<ClockP />} label="ساعت" chip value={formatTime(appointment.starts_at)} />
|
|
</div>
|
|
|
|
<div style={{ borderTop: '1px solid var(--border)' }} />
|
|
|
|
{/* Bottom: personnel & status */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
|
<InfoRow icon={<UserD size={19} />} label="پرسنل" value={appointment.doctor_name || '—'} valueStyle={{ fontWeight: 500 }} />
|
|
<InfoRow
|
|
icon={<StatusGlobe size={19} />}
|
|
label="وضعیت"
|
|
value={<AppointmentStatusDropdown uuid={appointment.uuid} currentStatus={appointment.status} version={appointment.version} queryKey={queryKey} />}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|