Daniel Volz
637 lines
25 KiB
TypeScript
637 lines
25 KiB
TypeScript
/* biome-ignore-all lint/style/noNestedTernary: schedule timeline branches are intentionally explicit */
|
||
import { Archive, Bell } from "lucide-react";
|
||
import { useState } from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { ConfirmModal, MedicationAvatar } from "../components";
|
||
import { useAuth } from "../components/Auth";
|
||
import { ScheduleUsageTag } from "../features/schedule/components";
|
||
import { formatScheduleDoseUsageLabel, formatScheduleTotalUsageLabel } from "../features/schedule/formatters";
|
||
import { useScheduleController } from "../hooks";
|
||
import type { Coverage, IntakeUnit } from "../types";
|
||
import { getMedDisplayName, isLiquidContainerPackageType, isTubePackageType } from "../types";
|
||
import { buildClearMissedPayload, isDoseDismissed } from "../utils/schedule";
|
||
|
||
// Helper for user-specific localStorage keys
|
||
function userStorageKey(userId: number | undefined, key: string): string {
|
||
return userId ? `user_${userId}_${key}` : key;
|
||
}
|
||
|
||
// Helper function to get stock status based on thresholds
|
||
function getStockStatus(
|
||
daysLeft: number | null,
|
||
medsLeft: number,
|
||
settings: { lowStockDays: number; normalStockDays: number; highStockDays: number; reminderDaysBefore: number },
|
||
packageType?: string
|
||
) {
|
||
if (isTubePackageType(packageType)) return { className: "success", label: "status.noSchedule" };
|
||
// Only a real zero-or-below stock count is out of stock.
|
||
if (medsLeft <= 0) return { className: "danger", label: "status.outOfStock" };
|
||
// No schedule, but has stock = normal
|
||
if (daysLeft === null) return { className: "success", label: "status.noSchedule" };
|
||
if (isLiquidContainerPackageType(packageType)) {
|
||
const lowDays = Math.max(1, Math.floor(settings.reminderDaysBefore));
|
||
const criticalDays = Math.max(1, Math.ceil(lowDays / 2));
|
||
if (daysLeft <= criticalDays) return { className: "danger", label: "status.criticalStock" };
|
||
if (daysLeft <= lowDays) return { className: "warning", label: "status.lowStock" };
|
||
return { className: "success", label: "status.normal" };
|
||
}
|
||
// Critical: at or below reminder threshold = danger (red)
|
||
if (daysLeft <= settings.reminderDaysBefore) return { className: "danger", label: "status.criticalStock" };
|
||
// Low: below low stock threshold = warning (yellow)
|
||
if (daysLeft < settings.lowStockDays) return { className: "warning", label: "status.lowStock" };
|
||
// High stock
|
||
if (daysLeft >= settings.highStockDays) return { className: "high", label: "status.highStock" };
|
||
// Normal stock
|
||
return { className: "success", label: "status.normal" };
|
||
}
|
||
|
||
// Helper function to get worst stock status for a day
|
||
function getDayStockStatus(
|
||
dayMeds: Array<{ medName: string }>,
|
||
coverageByMed: Record<string, Coverage>,
|
||
settings: { lowStockDays: number; normalStockDays: number; highStockDays: number; reminderDaysBefore: number },
|
||
meds: Array<{ name: string; genericName?: string | null; packageType?: string }>
|
||
): string {
|
||
let worstLevel = 3; // 3=success, 2=warning, 1=danger
|
||
for (const item of dayMeds) {
|
||
const cov = coverageByMed[item.medName];
|
||
if (!cov) continue;
|
||
const med = meds.find((m) => getMedDisplayName(m) === item.medName);
|
||
const status = getStockStatus(cov.daysLeft, cov.medsLeft, settings, med?.packageType);
|
||
if (status.className === "danger") worstLevel = Math.min(worstLevel, 1);
|
||
else if (status.className === "warning") worstLevel = Math.min(worstLevel, 2);
|
||
}
|
||
return worstLevel === 1 ? "danger" : worstLevel === 2 ? "warning" : "success";
|
||
}
|
||
|
||
// Helper to get dose ID (with or without person)
|
||
function getDoseId(baseId: string, person: string | null): string {
|
||
return person ? `${baseId}-${person}` : baseId;
|
||
}
|
||
|
||
export function SchedulePage() {
|
||
const { t } = useTranslation();
|
||
const { user } = useAuth();
|
||
const {
|
||
meds,
|
||
settings,
|
||
scheduleDays,
|
||
setScheduleDays,
|
||
showPastDays,
|
||
setShowPastDays,
|
||
pastDays,
|
||
futureDays,
|
||
takenDoses,
|
||
isDoseTakenAutomatically,
|
||
dismissedDoses,
|
||
markDoseTaken,
|
||
skippedDoses,
|
||
markDoseSkipped,
|
||
undoDoseTaken,
|
||
undoDoseSkipped,
|
||
coverageByMed,
|
||
depletionByMed,
|
||
manuallyExpandedDays,
|
||
toggleDayCollapse,
|
||
openUserFilter,
|
||
missedPastDoseIds,
|
||
loadMeds,
|
||
} = useScheduleController();
|
||
const [showClearMissedConfirm, setShowClearMissedConfirm] = useState(false);
|
||
const [clearingMissed, setClearingMissed] = useState(false);
|
||
const [showObsoleteConfirm, setShowObsoleteConfirm] = useState(false);
|
||
const [obsoleteCandidate, setObsoleteCandidate] = useState<{ id: number; name: string } | null>(null);
|
||
|
||
const isDoseTakenForDisplay = (doseId: string) => takenDoses.has(doseId);
|
||
|
||
const shouldHideNoScheduleStatusForTube = (
|
||
med: (typeof meds)[number] | undefined,
|
||
status: { className: string; label: string } | null
|
||
) => isTubePackageType(med?.packageType) && status?.label === "status.noSchedule";
|
||
|
||
const clearMissedDoses = async (missedCount: number) => {
|
||
const payload = buildClearMissedPayload(pastDays, meds, takenDoses, dismissedDoses);
|
||
if (payload.medicationIds.length === 0 || !payload.until) {
|
||
setShowClearMissedConfirm(false);
|
||
return;
|
||
}
|
||
|
||
setClearingMissed(true);
|
||
try {
|
||
const res = await fetch("/api/medications/dismiss-until", {
|
||
method: "POST",
|
||
credentials: "include",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(payload),
|
||
});
|
||
if (!res.ok) {
|
||
throw new Error(`HTTP ${res.status}`);
|
||
}
|
||
await loadMeds();
|
||
setShowClearMissedConfirm(false);
|
||
alert(t("dashboard.schedules.clearMissedSuccess", { count: missedCount }));
|
||
} catch {
|
||
alert(t("common.saveFailed"));
|
||
} finally {
|
||
setClearingMissed(false);
|
||
}
|
||
};
|
||
|
||
const requestMarkObsolete = (med: { id: number; name: string }) => {
|
||
setObsoleteCandidate(med);
|
||
setShowObsoleteConfirm(true);
|
||
};
|
||
|
||
const handleConfirmMarkObsolete = async () => {
|
||
if (!obsoleteCandidate) return;
|
||
try {
|
||
const res = await fetch(`/api/medications/${obsoleteCandidate.id}/obsolete`, {
|
||
method: "POST",
|
||
credentials: "include",
|
||
});
|
||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||
await loadMeds();
|
||
setShowObsoleteConfirm(false);
|
||
setObsoleteCandidate(null);
|
||
} catch {
|
||
alert(t("common.saveFailed"));
|
||
}
|
||
};
|
||
|
||
const handleCancelMarkObsolete = () => {
|
||
setShowObsoleteConfirm(false);
|
||
setObsoleteCandidate(null);
|
||
};
|
||
|
||
const formatDoseUsageLabel = (
|
||
med: (typeof meds)[number] | undefined,
|
||
usage: number,
|
||
intakeUnit?: IntakeUnit | null
|
||
) => formatScheduleDoseUsageLabel(med, usage, t, intakeUnit);
|
||
|
||
const formatTotalUsageLabel = (
|
||
med: (typeof meds)[number] | undefined,
|
||
total: number,
|
||
doses?: Array<{ usage: number; intakeUnit?: IntakeUnit | null }>
|
||
) => formatScheduleTotalUsageLabel(med, total, t, doses);
|
||
|
||
const renderDoseActionButtons = (options: {
|
||
doseId: string;
|
||
isTaken: boolean;
|
||
isSkipped: boolean;
|
||
isAutomaticallyTaken: boolean;
|
||
isEmpty: boolean;
|
||
}) => {
|
||
const takeButton = options.isTaken ? (
|
||
<button className="dose-btn undo take" onClick={() => undoDoseTaken(options.doseId)} title={t("common.undo")}>
|
||
{options.isAutomaticallyTaken && (
|
||
<span className="info-tooltip" data-tooltip={t("tooltips.automaticTaken")}>
|
||
🤖
|
||
</span>
|
||
)}
|
||
<span className="dose-btn-label">{t("common.undo")}</span>
|
||
<span aria-hidden="true">↩</span>
|
||
</button>
|
||
) : (
|
||
<button
|
||
className={`dose-btn take${options.isEmpty ? " out-of-stock" : ""}`}
|
||
onClick={() => markDoseTaken(options.doseId)}
|
||
disabled={options.isEmpty || options.isSkipped}
|
||
title={options.isEmpty ? t("common.outOfStockTakeBlocked") : t("dose.markAsTaken")}
|
||
>
|
||
<span className="dose-btn-label">{t("dose.take")}</span>
|
||
<span aria-hidden="true">{options.isEmpty ? "⊘" : "✓"}</span>
|
||
</button>
|
||
);
|
||
|
||
const skipButton = options.isSkipped ? (
|
||
<button className="dose-btn undo skip" onClick={() => undoDoseSkipped(options.doseId)} title={t("common.undo")}>
|
||
<span className="dose-btn-label">{t("common.undo")}</span>
|
||
<span aria-hidden="true">↩</span>
|
||
</button>
|
||
) : (
|
||
<button
|
||
className="dose-btn skip"
|
||
onClick={() => markDoseSkipped(options.doseId)}
|
||
title={t("dose.markAsSkipped")}
|
||
disabled={options.isTaken}
|
||
>
|
||
<span className="dose-btn-label">{t("dose.skip")}</span>
|
||
</button>
|
||
);
|
||
|
||
return (
|
||
<>
|
||
{takeButton}
|
||
{skipButton}
|
||
</>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<section className="grid">
|
||
<article className="card schedule-full">
|
||
<div className="card-head">
|
||
<h2>{t("dashboard.schedules.title")}</h2>
|
||
<select
|
||
className="select-field schedule-days-select"
|
||
value={scheduleDays}
|
||
onChange={(e) => {
|
||
const val = Number(e.target.value);
|
||
setScheduleDays(val);
|
||
if (user?.id) localStorage.setItem(userStorageKey(user.id, "scheduleDays"), String(val));
|
||
}}
|
||
>
|
||
<option value={30}>{t("dashboard.schedules.1month")}</option>
|
||
<option value={90}>{t("dashboard.schedules.3months")}</option>
|
||
<option value={180}>{t("dashboard.schedules.6months")}</option>
|
||
</select>
|
||
</div>
|
||
<div className="timeline">
|
||
{/* Past days (when expanded) — rendered above toggle */}
|
||
{showPastDays &&
|
||
pastDays.map((day) => {
|
||
// Get ALL dose IDs for this day (for total count and yellow styling)
|
||
const allDoseIds = day.meds.flatMap((item) =>
|
||
item.doses.flatMap((d) => {
|
||
const takenByArray = Array.isArray(d.takenBy) ? d.takenBy : [];
|
||
return takenByArray.length > 0 ? takenByArray.map((p) => `${d.id}-${p}`) : [d.id];
|
||
})
|
||
);
|
||
|
||
// Really taken = all doses marked as taken by human (for green "All taken")
|
||
const allReallyTaken = allDoseIds.length > 0 && allDoseIds.every((id) => isDoseTakenForDisplay(id));
|
||
const takenCount = allDoseIds.filter((id) => isDoseTakenForDisplay(id)).length;
|
||
|
||
// Count missed doses that are NOT dismissed (for warning icon)
|
||
const missedNotDismissedCount = day.meds.reduce((count, item) => {
|
||
const med = meds.find((m) => getMedDisplayName(m) === item.medName);
|
||
const dismissedUntilDate = med?.dismissedUntil ?? undefined;
|
||
return (
|
||
count +
|
||
item.doses.reduce((doseCount, d) => {
|
||
if (isDoseDismissed(d.id, dismissedUntilDate)) return doseCount;
|
||
const takenByArray = Array.isArray(d.takenBy) ? d.takenBy : [];
|
||
const ids = takenByArray.length > 0 ? takenByArray.map((p) => `${d.id}-${p}`) : [d.id];
|
||
return doseCount + ids.filter((id) => !isDoseTakenForDisplay(id) && !dismissedDoses.has(id)).length;
|
||
}, 0)
|
||
);
|
||
}, 0);
|
||
const hasRealMissed = missedNotDismissedCount > 0;
|
||
|
||
const isManuallyExpanded = manuallyExpandedDays.has(day.dateStr);
|
||
const isCollapsed = !isManuallyExpanded;
|
||
const _worstStatus = getDayStockStatus(day.meds, coverageByMed, settings, meds);
|
||
|
||
return (
|
||
<div
|
||
key={day.dateStr}
|
||
className={`day-block past ${isCollapsed ? "collapsed" : ""} ${allReallyTaken ? "all-taken" : allDoseIds.length > 0 ? "past-missed" : ""}`}
|
||
>
|
||
<div
|
||
className="day-divider clickable"
|
||
onClick={() => toggleDayCollapse(day.dateStr, true)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter" || e.key === " ") toggleDayCollapse(day.dateStr, true);
|
||
}}
|
||
title={isCollapsed ? t("common.expand") : t("common.collapse")}
|
||
>
|
||
<span className="day-collapse-icon">{isCollapsed ? "▶" : "▼"}</span>
|
||
<span className="day-date">{day.dateStr}</span>
|
||
<span className="day-summary">
|
||
{allReallyTaken ? (
|
||
<span className="day-complete">✓ {t("dashboard.schedules.allTaken")}</span>
|
||
) : (
|
||
<>
|
||
{hasRealMissed && (
|
||
<span
|
||
className="day-warning"
|
||
title={t("dashboard.schedules.missedDoses", { count: missedNotDismissedCount })}
|
||
>
|
||
⚠️
|
||
</span>
|
||
)}
|
||
<span className="day-progress">
|
||
{takenCount}/{allDoseIds.length}
|
||
</span>
|
||
</>
|
||
)}
|
||
</span>
|
||
</div>
|
||
{!isCollapsed &&
|
||
day.meds.map((item) => {
|
||
const med = meds.find((m) => getMedDisplayName(m) === item.medName);
|
||
const medCov = coverageByMed[item.medName];
|
||
const isEmpty = medCov ? medCov.medsLeft <= 0 : false;
|
||
const rawStatus = medCov
|
||
? getStockStatus(medCov.daysLeft, medCov.medsLeft, settings, med?.packageType)
|
||
: null;
|
||
const visibleStatus = shouldHideNoScheduleStatusForTube(med, rawStatus) ? null : rawStatus;
|
||
const isLowStock = !isEmpty && visibleStatus?.className === "warning";
|
||
const rowClasses = ["time-row"];
|
||
if (isEmpty) rowClasses.push("med-empty");
|
||
else if (isLowStock) rowClasses.push("med-low");
|
||
return (
|
||
<div key={`${day.dateStr}-${item.medName}`} className={rowClasses.join(" ")}>
|
||
<div className="time-main">
|
||
<div className="med-name">
|
||
<MedicationAvatar name={item.medName} imageUrl={med?.imageUrl} size="sm" />
|
||
<span className="med-name-text">{item.medName}</span>
|
||
</div>
|
||
<div className="tag-row">
|
||
<ScheduleUsageTag>{formatTotalUsageLabel(med, item.total, item.doses)}</ScheduleUsageTag>
|
||
</div>
|
||
</div>
|
||
<div className="doses-col">
|
||
{item.doses.map((dose) => {
|
||
// If no takenBy, show single checkbox; otherwise show one per person
|
||
const people = (dose.takenBy || []).length > 0 ? dose.takenBy : [null];
|
||
const allTaken = people.every((person) =>
|
||
isDoseTakenForDisplay(getDoseId(dose.id, person))
|
||
);
|
||
const doseClasses = ["dose-item", "past"];
|
||
if (allTaken) doseClasses.push("all-taken");
|
||
if (isEmpty) doseClasses.push("med-empty");
|
||
else if (isLowStock) doseClasses.push("med-low");
|
||
return (
|
||
<div key={dose.id} className={doseClasses.join(" ")}>
|
||
<span className="dose-time">{dose.timeStr}</span>
|
||
<span className="dose-usage">
|
||
<span className="dose-usage-main">
|
||
{formatDoseUsageLabel(med, dose.usage, dose.intakeUnit)}
|
||
</span>
|
||
{med?.pillWeightMg && (
|
||
<span className="dose-usage-weight">{`${dose.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"}`}</span>
|
||
)}
|
||
</span>{" "}
|
||
{dose.intakeRemindersEnabled && (
|
||
<span
|
||
className="reminder-icon info-tooltip"
|
||
data-tooltip={t("tooltips.intakeReminders")}
|
||
>
|
||
<Bell size={14} aria-hidden="true" />
|
||
</span>
|
||
)}{" "}
|
||
<div className="dose-checks">
|
||
{people.map((person) => {
|
||
const doseId = getDoseId(dose.id, person);
|
||
const isTaken = isDoseTakenForDisplay(doseId);
|
||
const isSkipped = skippedDoses.has(doseId);
|
||
const isAutomaticallyTaken =
|
||
isTaken && isDoseTakenAutomatically(doseId) && dose.when <= Date.now();
|
||
const personClasses = ["dose-person"];
|
||
if (isTaken) personClasses.push("taken");
|
||
if (isSkipped) personClasses.push("skipped");
|
||
return (
|
||
<div key={doseId} className={personClasses.join(" ")}>
|
||
{person && (
|
||
<span
|
||
className="person-name clickable"
|
||
onClick={() => openUserFilter(person)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter" || e.key === " ") openUserFilter(person);
|
||
}}
|
||
>
|
||
{person}
|
||
</span>
|
||
)}
|
||
{renderDoseActionButtons({
|
||
doseId,
|
||
isTaken,
|
||
isSkipped,
|
||
isAutomaticallyTaken,
|
||
isEmpty,
|
||
})}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
})}
|
||
{/* Past days toggle */}
|
||
{pastDays.length > 0 &&
|
||
(() => {
|
||
const missedCount = missedPastDoseIds.length;
|
||
return (
|
||
<div className="past-days-header">
|
||
<div
|
||
className={`past-days-toggle ${showPastDays ? "expanded" : ""} ${missedCount > 0 ? "has-missed" : ""}`}
|
||
onClick={() => {
|
||
const wasCollapsed = !showPastDays;
|
||
setShowPastDays(!showPastDays);
|
||
if (wasCollapsed) {
|
||
setTimeout(() => {
|
||
document
|
||
.querySelector(".day-block.today")
|
||
?.scrollIntoView({ behavior: "smooth", block: "center" });
|
||
}, 50);
|
||
}
|
||
}}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter" || e.key === " ") {
|
||
const wasCollapsed = !showPastDays;
|
||
setShowPastDays(!showPastDays);
|
||
if (wasCollapsed) {
|
||
setTimeout(() => {
|
||
document
|
||
.querySelector(".day-block.today")
|
||
?.scrollIntoView({ behavior: "smooth", block: "center" });
|
||
}, 50);
|
||
}
|
||
}
|
||
}}
|
||
>
|
||
<span className="past-days-icon">{showPastDays ? "▼" : "▶"}</span>
|
||
<span className="past-days-label">
|
||
{showPastDays ? t("dashboard.schedules.hidePastDays") : t("dashboard.schedules.showPastDays")}
|
||
</span>
|
||
<span className="past-days-count">
|
||
({t("dashboard.schedules.pastDaysCount", { count: pastDays.length })})
|
||
</span>
|
||
{missedCount > 0 && (
|
||
<span
|
||
className="past-days-warning"
|
||
title={t("dashboard.schedules.missedDoses", { count: missedCount })}
|
||
>
|
||
⚠️ {missedCount}
|
||
</span>
|
||
)}
|
||
</div>
|
||
{missedCount > 0 && (
|
||
<button type="button" className="clear-missed-btn" onClick={() => setShowClearMissedConfirm(true)}>
|
||
{t("dashboard.schedules.clearMissed")}
|
||
</button>
|
||
)}
|
||
</div>
|
||
);
|
||
})()}
|
||
{showClearMissedConfirm && (
|
||
<ConfirmModal
|
||
title={t("dashboard.schedules.clearMissedConfirmTitle")}
|
||
message={t("dashboard.schedules.clearMissedConfirmMessage", {
|
||
count: missedPastDoseIds.length,
|
||
})}
|
||
confirmLabel={t("dashboard.schedules.clearMissedConfirm")}
|
||
cancelLabel={t("dashboard.schedules.clearMissedCancel")}
|
||
onConfirm={() => void clearMissedDoses(missedPastDoseIds.length)}
|
||
onCancel={() => {
|
||
if (!clearingMissed) setShowClearMissedConfirm(false);
|
||
}}
|
||
isLoading={clearingMissed}
|
||
confirmVariant="warning"
|
||
/>
|
||
)}
|
||
{showObsoleteConfirm && obsoleteCandidate && (
|
||
<ConfirmModal
|
||
title={t("medications.obsoleteModal.title")}
|
||
message={t("medications.obsoleteModal.message", { name: obsoleteCandidate.name })}
|
||
confirmLabel={t("medications.list.markObsolete")}
|
||
cancelLabel={t("common.cancel")}
|
||
onConfirm={() => void handleConfirmMarkObsolete()}
|
||
onCancel={handleCancelMarkObsolete}
|
||
confirmVariant="warning"
|
||
/>
|
||
)}
|
||
{/* Current and future days */}
|
||
{futureDays.map((day) => {
|
||
const today = new Date();
|
||
today.setHours(0, 0, 0, 0);
|
||
const dayDate = new Date(day.date);
|
||
dayDate.setHours(0, 0, 0, 0);
|
||
const isToday = dayDate.getTime() === today.getTime();
|
||
return (
|
||
<div key={day.dateStr} className={`day-block ${isToday ? "today" : ""}`}>
|
||
<div className="day-divider">{day.dateStr}</div>
|
||
{day.meds.map((item) => {
|
||
const medCoverage = coverageByMed[item.medName];
|
||
const isEmpty = medCoverage ? medCoverage.medsLeft <= 0 : false;
|
||
const med = meds.find((m) => getMedDisplayName(m) === item.medName);
|
||
const depletionTime = depletionByMed[item.medName];
|
||
// Check if this dose is scheduled after medication runs out
|
||
const willBeOutOfStock = typeof depletionTime === "number" && item.lastWhen > depletionTime;
|
||
const status = willBeOutOfStock
|
||
? { className: "danger", label: "status.outOfStock" }
|
||
: medCoverage
|
||
? getStockStatus(medCoverage.daysLeft, medCoverage.medsLeft, settings, med?.packageType)
|
||
: null;
|
||
const visibleStatus = shouldHideNoScheduleStatusForTube(med, status) ? null : status;
|
||
const isLowStock = !isEmpty && visibleStatus?.className === "warning";
|
||
const rowClasses = ["time-row"];
|
||
if (isEmpty) rowClasses.push("med-empty");
|
||
else if (isLowStock) rowClasses.push("med-low");
|
||
return (
|
||
<div key={`${day.dateStr}-${item.medName}`} className={rowClasses.join(" ")}>
|
||
<div className="time-main">
|
||
<div className="med-name">
|
||
<MedicationAvatar name={item.medName} imageUrl={med?.imageUrl} size="sm" />
|
||
<span className="med-name-text">{item.medName}</span>
|
||
</div>
|
||
<div className="tag-row">
|
||
<ScheduleUsageTag>{formatTotalUsageLabel(med, item.total, item.doses)}</ScheduleUsageTag>
|
||
{visibleStatus && (
|
||
<span className={`tag ${visibleStatus.className}`}>{t(visibleStatus.label)}</span>
|
||
)}
|
||
</div>
|
||
{isEmpty && med && !med.isObsolete && (
|
||
<div className="timeline-obsolete-row">
|
||
<button
|
||
type="button"
|
||
className="timeline-obsolete-btn btn-obsolete"
|
||
onClick={() => requestMarkObsolete({ id: med.id, name: getMedDisplayName(med) })}
|
||
>
|
||
<Archive size={16} aria-hidden="true" />
|
||
<span>{t("medications.list.markObsolete")}</span>
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="doses-col">
|
||
{item.doses.map((dose) => {
|
||
const people = (dose.takenBy || []).length > 0 ? dose.takenBy : [null];
|
||
const now = Date.now();
|
||
const dayStart = new Date(day.date).setHours(0, 0, 0, 0);
|
||
const isPastDay = dayStart < new Date().setHours(0, 0, 0, 0);
|
||
const allTaken = people.every((person) => isDoseTakenForDisplay(getDoseId(dose.id, person)));
|
||
const doseClasses = ["dose-item"];
|
||
if (allTaken) doseClasses.push("all-taken");
|
||
if (isEmpty) doseClasses.push("med-empty");
|
||
else if (isLowStock) doseClasses.push("med-low");
|
||
return (
|
||
<div key={dose.id} className={doseClasses.join(" ")}>
|
||
<span className="dose-time">{dose.timeStr}</span>
|
||
<span className="dose-usage">
|
||
<span className="dose-usage-main">
|
||
{formatDoseUsageLabel(med, dose.usage, dose.intakeUnit)}
|
||
</span>
|
||
{med?.pillWeightMg && (
|
||
<span className="dose-usage-weight">{`${dose.usage * med.pillWeightMg} ${med.doseUnit ?? "mg"}`}</span>
|
||
)}
|
||
</span>
|
||
{dose.intakeRemindersEnabled && (
|
||
<span
|
||
className="reminder-icon info-tooltip"
|
||
data-tooltip={t("tooltips.intakeReminders")}
|
||
>
|
||
<Bell size={14} aria-hidden="true" />
|
||
</span>
|
||
)}
|
||
<div className="dose-checks">
|
||
{people.map((person) => {
|
||
const doseId = getDoseId(dose.id, person);
|
||
const isTaken = isDoseTakenForDisplay(doseId);
|
||
const isSkipped = skippedDoses.has(doseId);
|
||
const isAutomaticallyTaken =
|
||
isTaken && isDoseTakenAutomatically(doseId) && dose.when <= now;
|
||
const isOverdue = !isTaken && !isSkipped && !isEmpty && dose.when < now && !isPastDay;
|
||
const personClasses = ["dose-person"];
|
||
if (isTaken) personClasses.push("taken");
|
||
if (isSkipped) personClasses.push("skipped");
|
||
if (isOverdue) personClasses.push("overdue");
|
||
return (
|
||
<div key={doseId} className={personClasses.join(" ")}>
|
||
{person && (
|
||
<span
|
||
className="person-name clickable"
|
||
onClick={() => openUserFilter(person)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter" || e.key === " ") openUserFilter(person);
|
||
}}
|
||
>
|
||
{person}
|
||
</span>
|
||
)}
|
||
{renderDoseActionButtons({
|
||
doseId,
|
||
isTaken,
|
||
isSkipped,
|
||
isAutomaticallyTaken,
|
||
isEmpty,
|
||
})}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</article>
|
||
</section>
|
||
);
|
||
}
|