hamedandClaude Opus 5
5e87bbc18b
Three views become two. The resource lanes were a separate tab, which meant reading a doctor's free hour on one screen and the laser's on another and matching them by eye — while in the resource-first model it is the device and the room that decide whether that hour is really free. They now sit under the same "زمانبندی" view, below the doctor's slots. Each lane says how much of its shift is still free, and that number respects capacity: a minute counts as busy only once the overlapping bookings reach the resource's capacity, so a three-bed room with two appointments is still open. Treating it otherwise would silently turn every multi-capacity resource into a single-capacity one. ResourceFreeTimeCalculator does the sweep and carries nine cases of its own. only_bookable=1 keeps resources with no service offering out of the view; they could only ever render an empty lane. On the seeded clinic that is five resources down to two. Two ruler defects the screenshot caught: hours rendered in Latin digits, and the last label was half-clipped by the container so 21 read as 2. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
/**
|
|
* سوییچ کشویی نمای نوبتها — بازسازی `TurnsViewModeToggle.jsx` طرح tauri
|
|
* (پسزمینهٔ لغزنده، متن فعال #5559ce).
|
|
*
|
|
* منابع نمای جدا ندارند: ردیفشان درون همان نمای «زمانبندی» میآید، چون پرشدن یک ساعت
|
|
* را دستگاه و اتاق تعیین میکنند نه فقط برنامهٔ پزشک — و دیدنشان جدا از هم یعنی کاربر
|
|
* باید دو نما را با چشم تطبیق دهد.
|
|
*/
|
|
export type TurnsViewMode = 'table' | 'timeline';
|
|
|
|
const MODES: { id: TurnsViewMode; label: string }[] = [
|
|
{ id: 'table', label: 'نمایش جدولی' },
|
|
{ id: 'timeline', label: 'زمانبندی' },
|
|
];
|
|
|
|
export default function TurnsViewToggle({
|
|
viewMode, onChange,
|
|
}: {
|
|
viewMode: TurnsViewMode;
|
|
onChange: (m: TurnsViewMode) => void;
|
|
}) {
|
|
const index = Math.max(MODES.findIndex((m) => m.id === viewMode), 0);
|
|
const width = 100 / MODES.length;
|
|
|
|
return (
|
|
<div
|
|
role="tablist"
|
|
aria-label="نمای نوبتها"
|
|
style={{
|
|
position: 'relative', width: 193, height: 44, display: 'flex', overflow: 'hidden',
|
|
border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', background: 'var(--surface)',
|
|
}}
|
|
>
|
|
{/* پسزمینهٔ لغزنده — RTL، پس اولین حالت سمت راست است */}
|
|
<div style={{
|
|
position: 'absolute', top: 0, right: 0, height: '100%', width: `${width}%`,
|
|
background: 'var(--primary-soft)', transition: 'transform .3s var(--ease)',
|
|
transform: `translateX(${index * -100}%)`,
|
|
}} />
|
|
|
|
{MODES.map((m, i) => (
|
|
<div key={m.id} style={{ display: 'contents' }}>
|
|
{i > 0 && (
|
|
<div style={{ position: 'relative', zIndex: 1, width: 1, height: '100%', background: 'var(--border)' }} />
|
|
)}
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
aria-selected={viewMode === m.id}
|
|
onClick={() => onChange(m.id)}
|
|
style={{
|
|
position: 'relative', zIndex: 1, flex: 1, height: '100%', border: 'none',
|
|
background: 'transparent', cursor: 'pointer', fontFamily: 'inherit',
|
|
fontSize: 13, fontWeight: 500,
|
|
color: viewMode === m.id ? 'var(--primary)' : 'var(--text-3)',
|
|
}}
|
|
>
|
|
{m.label}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|