Daniel Volz
2263 lines
76 KiB
TypeScript
2263 lines
76 KiB
TypeScript
/* biome-ignore-all lint/a11y/noLabelWithoutControl: form uses custom inputs and display fields wrapped in label-like layout */
|
||
/* biome-ignore-all lint/correctness/useExhaustiveDependencies: modal-history callbacks are intentionally managed outside hook deps */
|
||
/* biome-ignore-all lint/suspicious/noArrayIndexKey: local draft intake rows do not have stable ids before persistence */
|
||
import { Bell, Minus, Plus, Trash2 } from "lucide-react";
|
||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { useSearchParams } from "react-router-dom";
|
||
import { DateInput, FormNumberStepper, MedicationEnrichmentSection, MobileEditModal } from "../components";
|
||
import { useAuth } from "../components/Auth";
|
||
import { MedicationDialogs } from "../components/medications/MedicationDialogs";
|
||
import { MedicationEditCoordinator } from "../components/medications/MedicationEditCoordinator";
|
||
import { MedicationListSection } from "../components/medications/MedicationListSection";
|
||
import { useAppContext, useUnsavedChanges } from "../context";
|
||
import {
|
||
MEDICATION_ENRICHMENT_INITIAL_LIMIT,
|
||
MEDICATION_ENRICHMENT_LIMIT_STEP,
|
||
MEDICATION_ENRICHMENT_MAX_LIMIT,
|
||
useMedicationEnrichmentController,
|
||
useMedicationForm,
|
||
useModalHistory,
|
||
useUnsavedChangesWarning,
|
||
} from "../hooks";
|
||
import type {
|
||
DoseUnit,
|
||
FormState,
|
||
Medication,
|
||
MedicationEnrichmentEnrichResponse,
|
||
MedicationEnrichmentPackageOption,
|
||
MedicationEnrichmentSearchResponse,
|
||
MedicationEnrichmentSearchResult,
|
||
MedicationEnrichmentStrengthOption,
|
||
PackageType,
|
||
} from "../types";
|
||
import {
|
||
allowsPillFormSelection,
|
||
DOSE_UNITS,
|
||
FIELD_LIMITS,
|
||
getMedDisplayName,
|
||
getPackageProfile,
|
||
getPackageSize,
|
||
isAmountBasedPackageType,
|
||
isLiquidContainerPackageType,
|
||
isTubePackageType,
|
||
normalizePackageType,
|
||
PACKAGE_PROFILES,
|
||
} from "../types";
|
||
import { combineDateAndTime, formatNumber } from "../utils/formatters";
|
||
import { MAX_IMAGE_UPLOAD_BYTES, resolveImageUploadError } from "../utils/image-upload";
|
||
import {
|
||
getIntakeScheduleMode,
|
||
getWeekdayLabel,
|
||
hasSelectedWeekdays,
|
||
toggleWeekdaySelection,
|
||
WEEKDAY_CODES,
|
||
} from "../utils/intake-schedule";
|
||
import { log } from "../utils/logger";
|
||
import { countMedicationEnrichmentDisplayResults } from "../utils/medication-enrichment";
|
||
|
||
function userStorageKey(userId: number | undefined, key: string): string {
|
||
return userId ? `user_${userId}_${key}` : key;
|
||
}
|
||
|
||
const OBSOLETE_SECTION_STORAGE_KEY = "medicationsShowObsolete";
|
||
const OPEN_FDA_PACKAGE_CODE_PATTERN = /\s*\(([0-9A-Z]{4,}(?:-[0-9A-Z]{1,})+)\)\s*/gi;
|
||
|
||
function normalizeMedicationEnrichmentDoseUnit(unit: MedicationEnrichmentStrengthOption["doseUnit"]): DoseUnit | null {
|
||
if (unit === "IU") return "units";
|
||
if (unit === "mg" || unit === "g" || unit === "mcg" || unit === "ml" || unit === "units") return unit;
|
||
return null;
|
||
}
|
||
|
||
function normalizeMedicationEnrichmentPackageText(value: string): string {
|
||
return value.replace(OPEN_FDA_PACKAGE_CODE_PATTERN, " ").replace(/\s+/g, " ").trim();
|
||
}
|
||
|
||
function hasMatchingMedicationEnrichmentPackageStructure(
|
||
left: MedicationEnrichmentPackageOption,
|
||
right: MedicationEnrichmentPackageOption
|
||
): boolean {
|
||
return (
|
||
left.packageType === right.packageType &&
|
||
left.packCount === right.packCount &&
|
||
left.blistersPerPack === right.blistersPerPack &&
|
||
left.pillsPerBlister === right.pillsPerBlister &&
|
||
left.totalPills === right.totalPills &&
|
||
left.looseTablets === right.looseTablets &&
|
||
left.packageAmountValue === right.packageAmountValue &&
|
||
left.packageAmountUnit === right.packageAmountUnit
|
||
);
|
||
}
|
||
|
||
function matchesMedicationEnrichmentPackageOption(
|
||
left: MedicationEnrichmentPackageOption,
|
||
right: MedicationEnrichmentPackageOption
|
||
): boolean {
|
||
const leftTexts = [left.label, left.description].map(normalizeMedicationEnrichmentPackageText).filter(Boolean);
|
||
const rightTexts = [right.label, right.description].map(normalizeMedicationEnrichmentPackageText).filter(Boolean);
|
||
const hasMatchingText = leftTexts.some((text) => rightTexts.includes(text));
|
||
|
||
return (
|
||
hasMatchingMedicationEnrichmentPackageStructure(left, right) ||
|
||
(hasMatchingText && left.packageType === right.packageType)
|
||
);
|
||
}
|
||
|
||
function applyMedicationEnrichmentSuggestions(
|
||
form: FormState,
|
||
suggestions: MedicationEnrichmentEnrichResponse["suggestions"]
|
||
): FormState {
|
||
const nextForm: FormState = {
|
||
...form,
|
||
name: suggestions.name,
|
||
genericName: suggestions.genericName ?? "",
|
||
};
|
||
|
||
if (suggestions.medicationForm === "tablet" || suggestions.medicationForm === "capsule") {
|
||
return {
|
||
...nextForm,
|
||
medicationForm: suggestions.medicationForm,
|
||
pillForm: suggestions.medicationForm,
|
||
};
|
||
}
|
||
|
||
if (suggestions.medicationForm === "liquid" || suggestions.medicationForm === "topical") {
|
||
return {
|
||
...nextForm,
|
||
medicationForm: suggestions.medicationForm,
|
||
};
|
||
}
|
||
|
||
return nextForm;
|
||
}
|
||
|
||
function applyMedicationEnrichmentStrength(
|
||
form: FormState,
|
||
option: MedicationEnrichmentStrengthOption
|
||
): FormState | null {
|
||
if (option.pillWeightMg === null) return null;
|
||
const doseUnit = normalizeMedicationEnrichmentDoseUnit(option.doseUnit);
|
||
if (!doseUnit) return null;
|
||
|
||
return {
|
||
...form,
|
||
pillWeightMg: `${option.pillWeightMg}`,
|
||
doseUnit,
|
||
};
|
||
}
|
||
|
||
function applyMedicationEnrichmentPackage(form: FormState, option: MedicationEnrichmentPackageOption): FormState {
|
||
const nextForm: FormState = {
|
||
...form,
|
||
packageType: option.packageType,
|
||
packCount: `${option.packCount}`,
|
||
blistersPerPack: option.blistersPerPack !== null ? `${option.blistersPerPack}` : "1",
|
||
pillsPerBlister: option.pillsPerBlister !== null ? `${option.pillsPerBlister}` : "1",
|
||
packageAmountValue: option.packageAmountValue !== null ? `${option.packageAmountValue}` : "",
|
||
packageAmountUnit: option.packageAmountUnit ?? form.packageAmountUnit,
|
||
totalPills: option.totalPills !== null ? `${option.totalPills}` : "",
|
||
looseTablets: option.looseTablets !== null ? `${option.looseTablets}` : "0",
|
||
};
|
||
|
||
if (option.packageType === "blister") {
|
||
return {
|
||
...nextForm,
|
||
totalPills: "",
|
||
looseTablets: "0",
|
||
};
|
||
}
|
||
|
||
if (option.packageType === "liquid_container") {
|
||
return {
|
||
...nextForm,
|
||
medicationForm: "liquid",
|
||
};
|
||
}
|
||
|
||
if (option.packageType === "tube") {
|
||
return {
|
||
...nextForm,
|
||
medicationForm: "topical",
|
||
};
|
||
}
|
||
|
||
return nextForm;
|
||
}
|
||
|
||
async function getMedicationEnrichmentErrorMessage(
|
||
response: Response,
|
||
fallback: string,
|
||
unauthorizedFallback: string
|
||
): Promise<string> {
|
||
if (response.status === 401) {
|
||
return unauthorizedFallback;
|
||
}
|
||
|
||
try {
|
||
const errorBody = (await response.json()) as { error?: string; message?: string };
|
||
if (typeof errorBody?.error === "string" && errorBody.error.trim().length > 0) {
|
||
return errorBody.error;
|
||
}
|
||
if (typeof errorBody?.message === "string" && errorBody.message.trim().length > 0) {
|
||
return errorBody.message;
|
||
}
|
||
} catch {
|
||
// keep translated fallback
|
||
}
|
||
|
||
return fallback;
|
||
}
|
||
|
||
export function MedicationsPage() {
|
||
const [searchParams, setSearchParams] = useSearchParams();
|
||
const { t } = useTranslation();
|
||
const { user } = useAuth();
|
||
const {
|
||
meds,
|
||
saving,
|
||
setSaving,
|
||
loadMeds,
|
||
deleteMed,
|
||
uploadMedImage,
|
||
deleteMedImage,
|
||
uploadingImage,
|
||
existingPeople,
|
||
coverageByMed,
|
||
} = useAppContext();
|
||
|
||
// Use the medication form hook
|
||
const {
|
||
form,
|
||
setForm,
|
||
setOriginalForm,
|
||
editingId,
|
||
setEditingId,
|
||
formSaved,
|
||
setFormSaved,
|
||
formChanged,
|
||
fieldErrors,
|
||
hasValidationErrors,
|
||
takenByInput,
|
||
setTakenByInput,
|
||
addTakenByPerson,
|
||
removeTakenByPerson,
|
||
handleTakenByKeyDown,
|
||
handleValueChange,
|
||
addBlister,
|
||
removeBlister,
|
||
setBlisterValue,
|
||
addIntake,
|
||
removeIntake,
|
||
setIntakeValue,
|
||
resetForm,
|
||
startEdit,
|
||
} = useMedicationForm();
|
||
|
||
// Warn user about unsaved changes when navigating away
|
||
useUnsavedChangesWarning(formChanged);
|
||
|
||
// View mode: grid (default) or form (edit/new)
|
||
// If navigating in with editMedId, suppress rendering until the edit form is ready
|
||
const [pendingEditTransition, setPendingEditTransition] = useState(() => searchParams.has("editMedId"));
|
||
const [viewMode, setViewMode] = useState<"grid" | "form">(pendingEditTransition ? "form" : "grid");
|
||
const [lightboxImage, setLightboxImage] = useState<{ src: string; alt: string } | null>(null);
|
||
const [activeTab, setActiveTab] = useState<"general" | "stock" | "prescription" | "schedule">("general");
|
||
|
||
// Mobile modal state (declared early because it's used in useEffect below)
|
||
const [showEditModal, setShowEditModal] = useState(pendingEditTransition && window.innerWidth <= 768);
|
||
const showEditModalRef = useRef(false);
|
||
useEffect(() => {
|
||
showEditModalRef.current = showEditModal;
|
||
}, [showEditModal]);
|
||
const processedEditMedIdRef = useRef<string | null>(null);
|
||
const hasDesktopFormHistoryState = useRef(false);
|
||
|
||
// Sync formChanged state to the global context for navigation blocking
|
||
const { setHasUnsavedChanges } = useUnsavedChanges();
|
||
useEffect(() => {
|
||
setHasUnsavedChanges(formChanged);
|
||
return () => setHasUnsavedChanges(false); // Clear on unmount
|
||
}, [formChanged, setHasUnsavedChanges]);
|
||
|
||
// Push history state when form changes to capture browser back button
|
||
const hasUnsavedHistoryState = useRef(false);
|
||
useEffect(() => {
|
||
if (formChanged && !hasUnsavedHistoryState.current && !showEditModal) {
|
||
// Push a history state so we can intercept browser back
|
||
window.history.pushState({ unsavedChanges: true }, "");
|
||
hasUnsavedHistoryState.current = true;
|
||
} else if (!formChanged && hasUnsavedHistoryState.current) {
|
||
// Clean up history state when form is saved/reset
|
||
hasUnsavedHistoryState.current = false;
|
||
}
|
||
}, [formChanged, showEditModal]);
|
||
|
||
// Push a history state when desktop form is open so browser back returns to grid view.
|
||
useEffect(() => {
|
||
const isDesktop = window.innerWidth > 768;
|
||
if (isDesktop && viewMode === "form" && !showEditModal && !hasDesktopFormHistoryState.current) {
|
||
window.history.pushState({ desktopForm: true }, "");
|
||
hasDesktopFormHistoryState.current = true;
|
||
}
|
||
if ((viewMode === "grid" || showEditModal) && hasDesktopFormHistoryState.current) {
|
||
hasDesktopFormHistoryState.current = false;
|
||
}
|
||
}, [viewMode, showEditModal]);
|
||
|
||
// Image state for new medications
|
||
const [pendingImage, setPendingImage] = useState<File | null>(null);
|
||
const [pendingImagePreview, setPendingImagePreview] = useState<string | null>(null);
|
||
// Track if close was confirmed programmatically (to avoid double confirmation)
|
||
const closeConfirmedRef = useRef(false);
|
||
// Pending action to execute after user confirms "Leave" in unsaved changes modal
|
||
const pendingActionRef = useRef<(() => void) | null>(null);
|
||
// Confirmation modal for unsaved changes
|
||
const [showUnsavedConfirm, setShowUnsavedConfirm] = useState(false);
|
||
const [unsavedConfirmSource, setUnsavedConfirmSource] = useState<"mobile-edit" | "desktop-form" | null>(null);
|
||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||
const [deleteCandidate, setDeleteCandidate] = useState<Medication | null>(null);
|
||
const [showObsoleteConfirm, setShowObsoleteConfirm] = useState(false);
|
||
const [obsoleteCandidate, setObsoleteCandidate] = useState<Medication | null>(null);
|
||
const [allMeds, setAllMeds] = useState<Medication[]>(meds);
|
||
const [imageUploadError, setImageUploadError] = useState<string | null>(null);
|
||
const {
|
||
medicationEnrichment,
|
||
setMedicationEnrichment,
|
||
medicationEnrichmentQueryRef,
|
||
resetMedicationEnrichment,
|
||
handleMedicationEnrichmentQueryChange,
|
||
} = useMedicationEnrichmentController();
|
||
|
||
const performMedicationEnrichmentSearch = useCallback(
|
||
async (
|
||
requestedLimit: number,
|
||
preserveExistingResults = false,
|
||
previousVisibleResultCount = countMedicationEnrichmentDisplayResults(medicationEnrichment.results),
|
||
queryOverride?: string
|
||
) => {
|
||
const trimmedQuery = (queryOverride ?? medicationEnrichmentQueryRef.current).trim();
|
||
if (!trimmedQuery) return;
|
||
const limit = Math.min(requestedLimit, MEDICATION_ENRICHMENT_MAX_LIMIT);
|
||
medicationEnrichmentQueryRef.current = trimmedQuery;
|
||
|
||
setMedicationEnrichment((previous) => ({
|
||
...previous,
|
||
query: trimmedQuery,
|
||
results: preserveExistingResults ? previous.results : [],
|
||
hasMoreResults: preserveExistingResults ? previous.hasMoreResults : false,
|
||
resultLimit: limit,
|
||
isSearching: true,
|
||
hasSearched: preserveExistingResults ? previous.hasSearched : false,
|
||
searchError: null,
|
||
applyingCode: null,
|
||
applyingPackageLabel: null,
|
||
...(preserveExistingResults
|
||
? {}
|
||
: {
|
||
activeResultCode: null,
|
||
appliedSelection: null,
|
||
enrichError: null,
|
||
meta: null,
|
||
strengthOptions: [],
|
||
packageOptions: [],
|
||
appliedStrengthLabel: null,
|
||
appliedPackageLabel: null,
|
||
}),
|
||
}));
|
||
|
||
try {
|
||
const params = new URLSearchParams({ q: trimmedQuery, limit: String(limit) });
|
||
const response = await fetch(`/api/medication-enrichment/search?${params.toString()}`, {
|
||
credentials: "include",
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(
|
||
await getMedicationEnrichmentErrorMessage(
|
||
response,
|
||
t("form.enrichment.searchError"),
|
||
t("form.enrichment.authRequired")
|
||
)
|
||
);
|
||
}
|
||
|
||
const data = (await response.json()) as MedicationEnrichmentSearchResponse;
|
||
const nextResults = Array.isArray(data.results) ? data.results : [];
|
||
const nextVisibleResultCount = countMedicationEnrichmentDisplayResults(nextResults);
|
||
const reachedResultLimitCap = limit >= MEDICATION_ENRICHMENT_MAX_LIMIT;
|
||
const shouldLoadUntilVisibleResultChanges =
|
||
preserveExistingResults &&
|
||
Boolean(data.hasMore) &&
|
||
!reachedResultLimitCap &&
|
||
nextVisibleResultCount <= previousVisibleResultCount;
|
||
|
||
if (shouldLoadUntilVisibleResultChanges) {
|
||
await performMedicationEnrichmentSearch(
|
||
Math.min(limit + MEDICATION_ENRICHMENT_LIMIT_STEP, MEDICATION_ENRICHMENT_MAX_LIMIT),
|
||
true,
|
||
previousVisibleResultCount,
|
||
trimmedQuery
|
||
);
|
||
return;
|
||
}
|
||
|
||
setMedicationEnrichment((previous) => {
|
||
const loadedAdditionalResults = !preserveExistingResults || nextResults.length > previous.results.length;
|
||
|
||
return {
|
||
...previous,
|
||
query: data.query,
|
||
results: nextResults,
|
||
hasMoreResults: Boolean(data.hasMore) && !reachedResultLimitCap && loadedAdditionalResults,
|
||
resultLimit: limit,
|
||
isSearching: false,
|
||
hasSearched: true,
|
||
searchError: null,
|
||
};
|
||
});
|
||
medicationEnrichmentQueryRef.current = data.query;
|
||
} catch (error) {
|
||
const message =
|
||
error instanceof Error && error.message.trim().length > 0 ? error.message : t("form.enrichment.searchError");
|
||
|
||
setMedicationEnrichment((previous) => ({
|
||
...previous,
|
||
results: preserveExistingResults ? previous.results : [],
|
||
hasMoreResults: false,
|
||
resultLimit: limit,
|
||
isSearching: false,
|
||
hasSearched: true,
|
||
searchError: message,
|
||
}));
|
||
}
|
||
},
|
||
[medicationEnrichment.query, medicationEnrichment.results, t]
|
||
);
|
||
|
||
const handlePendingMedicationImageSelection = useCallback(
|
||
(event: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = event.target.files?.[0];
|
||
event.target.value = "";
|
||
if (!file) return;
|
||
if (file.size > MAX_IMAGE_UPLOAD_BYTES) {
|
||
setImageUploadError(t("form.imageUploadErrors.tooLarge"));
|
||
setPendingImage(null);
|
||
setPendingImagePreview(null);
|
||
return;
|
||
}
|
||
|
||
setImageUploadError(null);
|
||
setPendingImage(file);
|
||
const reader = new FileReader();
|
||
reader.onload = (ev) => setPendingImagePreview(ev.target?.result as string);
|
||
reader.readAsDataURL(file);
|
||
},
|
||
[t]
|
||
);
|
||
|
||
useEffect(() => {
|
||
setImageUploadError(null);
|
||
}, [editingId]);
|
||
const [showObsolete, setShowObsolete] = useState(true);
|
||
const [readOnlyView, setReadOnlyView] = useState(false);
|
||
const [showReportModal, setShowReportModal] = useState(false);
|
||
useModalHistory(showReportModal, "report", () => setShowReportModal(false));
|
||
const [showNameValidation, setShowNameValidation] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const saved = localStorage.getItem(userStorageKey(user?.id, OBSOLETE_SECTION_STORAGE_KEY));
|
||
if (saved !== null) {
|
||
setShowObsolete(saved === "true");
|
||
}
|
||
}, [user?.id]);
|
||
|
||
const toggleObsoleteSection = useCallback(() => {
|
||
setShowObsolete((prev) => {
|
||
const next = !prev;
|
||
localStorage.setItem(userStorageKey(user?.id, OBSOLETE_SECTION_STORAGE_KEY), String(next));
|
||
return next;
|
||
});
|
||
}, [user?.id]);
|
||
|
||
const handleMedicationEnrichmentSearch = useCallback(async () => {
|
||
await performMedicationEnrichmentSearch(
|
||
MEDICATION_ENRICHMENT_INITIAL_LIMIT,
|
||
false,
|
||
countMedicationEnrichmentDisplayResults(medicationEnrichment.results),
|
||
medicationEnrichmentQueryRef.current
|
||
);
|
||
}, [medicationEnrichment.results, performMedicationEnrichmentSearch]);
|
||
|
||
const loadAllMeds = useCallback(async () => {
|
||
try {
|
||
const res = await fetch("/api/medications?includeObsolete=true", { credentials: "include" });
|
||
const data = (await res.json()) as unknown;
|
||
setAllMeds(Array.isArray(data) ? (data as Medication[]) : []);
|
||
} catch {
|
||
setAllMeds([]);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
void loadAllMeds();
|
||
}, [loadAllMeds]);
|
||
|
||
const tryUploadMedImage = useCallback(
|
||
async (medId: number, file: File) => {
|
||
setImageUploadError(null);
|
||
if (file.size > MAX_IMAGE_UPLOAD_BYTES) {
|
||
setImageUploadError(t("form.imageUploadErrors.tooLarge"));
|
||
return false;
|
||
}
|
||
try {
|
||
await uploadMedImage(medId, file);
|
||
void loadAllMeds();
|
||
setImageUploadError(null);
|
||
return true;
|
||
} catch (error) {
|
||
const code = error instanceof Error ? error.message : "UNKNOWN";
|
||
setImageUploadError(resolveImageUploadError(code, t));
|
||
return false;
|
||
}
|
||
},
|
||
[t, uploadMedImage, loadAllMeds]
|
||
);
|
||
|
||
const handleUploadMedImage = useCallback(
|
||
async (medId: number, file: File) => {
|
||
await tryUploadMedImage(medId, file);
|
||
},
|
||
[tryUploadMedImage]
|
||
);
|
||
|
||
const handleDeleteMedImage = useCallback(
|
||
async (medId: number) => {
|
||
await deleteMedImage(medId);
|
||
void loadAllMeds();
|
||
},
|
||
[deleteMedImage, loadAllMeds]
|
||
);
|
||
|
||
const applicableMedicationEnrichmentStrengthOptions = useMemo(() => {
|
||
if (!allowsPillFormSelection(form.packageType)) return [];
|
||
|
||
return [...medicationEnrichment.strengthOptions]
|
||
.filter(
|
||
(option) => option.pillWeightMg !== null && normalizeMedicationEnrichmentDoseUnit(option.doseUnit) !== null
|
||
)
|
||
.sort((left, right) => {
|
||
const leftWeight = left.pillWeightMg ?? Number.POSITIVE_INFINITY;
|
||
const rightWeight = right.pillWeightMg ?? Number.POSITIVE_INFINITY;
|
||
if (leftWeight !== rightWeight) {
|
||
return leftWeight - rightWeight;
|
||
}
|
||
return left.label.localeCompare(right.label, undefined, { numeric: true });
|
||
});
|
||
}, [form.packageType, medicationEnrichment.strengthOptions]);
|
||
|
||
const handleMedicationEnrichmentLoadMore = useCallback(async () => {
|
||
if (
|
||
medicationEnrichment.isSearching ||
|
||
!medicationEnrichment.hasMoreResults ||
|
||
medicationEnrichment.resultLimit >= MEDICATION_ENRICHMENT_MAX_LIMIT
|
||
)
|
||
return;
|
||
await performMedicationEnrichmentSearch(
|
||
Math.min(medicationEnrichment.resultLimit + MEDICATION_ENRICHMENT_LIMIT_STEP, MEDICATION_ENRICHMENT_MAX_LIMIT),
|
||
true
|
||
);
|
||
}, [
|
||
medicationEnrichment.hasMoreResults,
|
||
medicationEnrichment.isSearching,
|
||
medicationEnrichment.resultLimit,
|
||
performMedicationEnrichmentSearch,
|
||
]);
|
||
|
||
const handleMedicationEnrichmentApply = useCallback(
|
||
async (result: MedicationEnrichmentSearchResult, preferredPackageOption?: MedicationEnrichmentPackageOption) => {
|
||
setMedicationEnrichment((previous) => ({
|
||
...previous,
|
||
applyingCode: result.code,
|
||
applyingPackageLabel: preferredPackageOption?.label ?? null,
|
||
activeResultCode: result.code,
|
||
enrichError: null,
|
||
appliedSelection: null,
|
||
meta: null,
|
||
strengthOptions: [],
|
||
packageOptions: [],
|
||
appliedStrengthLabel: null,
|
||
appliedPackageLabel: null,
|
||
}));
|
||
|
||
try {
|
||
const response = await fetch("/api/medication-enrichment/enrich", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
query: medicationEnrichment.query.trim() || result.name,
|
||
name: result.name,
|
||
genericName: result.genericName ?? null,
|
||
code: result.code,
|
||
source: result.source,
|
||
}),
|
||
credentials: "include",
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(
|
||
await getMedicationEnrichmentErrorMessage(
|
||
response,
|
||
t("form.enrichment.applyError"),
|
||
t("form.enrichment.authRequired")
|
||
)
|
||
);
|
||
}
|
||
|
||
const data = (await response.json()) as MedicationEnrichmentEnrichResponse;
|
||
let nextForm = applyMedicationEnrichmentSuggestions(form, data.suggestions);
|
||
let appliedPackageLabel: string | null = null;
|
||
let appliedStrengthLabel: string | null = null;
|
||
const matchedPreferredPackageOption = preferredPackageOption
|
||
? (data.suggestions.packageOptions.find((option) =>
|
||
matchesMedicationEnrichmentPackageOption(option, preferredPackageOption)
|
||
) ?? null)
|
||
: null;
|
||
|
||
if (matchedPreferredPackageOption) {
|
||
nextForm = applyMedicationEnrichmentPackage(nextForm, matchedPreferredPackageOption);
|
||
appliedPackageLabel = matchedPreferredPackageOption.label;
|
||
} else if (data.suggestions.packageOptions.length === 1) {
|
||
nextForm = applyMedicationEnrichmentPackage(nextForm, data.suggestions.packageOptions[0]);
|
||
appliedPackageLabel = data.suggestions.packageOptions[0].label;
|
||
}
|
||
|
||
if (allowsPillFormSelection(nextForm.packageType) && data.suggestions.strengthOptions.length === 1) {
|
||
const autoAppliedForm = applyMedicationEnrichmentStrength(nextForm, data.suggestions.strengthOptions[0]);
|
||
if (autoAppliedForm) {
|
||
nextForm = autoAppliedForm;
|
||
appliedStrengthLabel = data.suggestions.strengthOptions[0].label;
|
||
}
|
||
}
|
||
|
||
setForm(nextForm);
|
||
setMedicationEnrichment((previous) => ({
|
||
...previous,
|
||
applyingCode: null,
|
||
applyingPackageLabel: null,
|
||
activeResultCode: result.code,
|
||
appliedSelection: data.selection,
|
||
enrichError: null,
|
||
meta: data.meta,
|
||
strengthOptions: data.suggestions.strengthOptions,
|
||
packageOptions: data.suggestions.packageOptions,
|
||
appliedStrengthLabel,
|
||
appliedPackageLabel,
|
||
}));
|
||
} catch (error) {
|
||
const message =
|
||
error instanceof Error && error.message.trim().length > 0 ? error.message : t("form.enrichment.applyError");
|
||
|
||
setMedicationEnrichment((previous) => ({
|
||
...previous,
|
||
applyingCode: null,
|
||
applyingPackageLabel: null,
|
||
activeResultCode: null,
|
||
appliedSelection: null,
|
||
enrichError: message,
|
||
meta: null,
|
||
strengthOptions: [],
|
||
packageOptions: [],
|
||
appliedStrengthLabel: null,
|
||
appliedPackageLabel: null,
|
||
}));
|
||
}
|
||
},
|
||
[form, medicationEnrichment.query, setForm, t]
|
||
);
|
||
|
||
const handleMedicationEnrichmentStrengthApply = useCallback(
|
||
(option: MedicationEnrichmentStrengthOption) => {
|
||
setForm((currentForm) => {
|
||
const nextForm = applyMedicationEnrichmentStrength(currentForm, option);
|
||
return nextForm ?? currentForm;
|
||
});
|
||
setMedicationEnrichment((previous) => ({
|
||
...previous,
|
||
appliedStrengthLabel: option.label,
|
||
}));
|
||
},
|
||
[setForm]
|
||
);
|
||
|
||
const handleMedicationEnrichmentPackageApply = useCallback(
|
||
(option: MedicationEnrichmentPackageOption) => {
|
||
setForm((currentForm) => applyMedicationEnrichmentPackage(currentForm, option));
|
||
setMedicationEnrichment((previous) => ({
|
||
...previous,
|
||
appliedPackageLabel: option.label,
|
||
applyingPackageLabel: null,
|
||
appliedStrengthLabel: null,
|
||
}));
|
||
},
|
||
[setForm]
|
||
);
|
||
|
||
const medicationEnrichmentViewModel = useMemo(
|
||
() => ({
|
||
...medicationEnrichment,
|
||
strengthOptions: applicableMedicationEnrichmentStrengthOptions,
|
||
}),
|
||
[applicableMedicationEnrichmentStrengthOptions, medicationEnrichment]
|
||
);
|
||
|
||
// Calculate total tablets
|
||
const totalTablets = useMemo(() => {
|
||
if (isAmountBasedPackageType(form.packageType)) {
|
||
// For bottle type, looseTablets is the current stock
|
||
return Number(form.looseTablets) || 0;
|
||
}
|
||
// For blister type
|
||
const packCount = Number(form.packCount) || 0;
|
||
const blistersPerPack = Number(form.blistersPerPack) || 0;
|
||
const pillsPerBlister = Number(form.pillsPerBlister) || 1;
|
||
return packCount * blistersPerPack * pillsPerBlister;
|
||
}, [form.packageType, form.packCount, form.blistersPerPack, form.pillsPerBlister, form.looseTablets]);
|
||
const decrementValueLabel = t("editStock.decreaseValue");
|
||
const incrementValueLabel = t("editStock.increaseValue");
|
||
|
||
const dateConsistencyError = useMemo(() => {
|
||
const medicationStartDate = form.medicationStartDate;
|
||
const medicationEndDate = form.medicationEndDate;
|
||
if (medicationStartDate && medicationEndDate && medicationEndDate < medicationStartDate) {
|
||
return t("form.validation.endDateBeforeStart", {
|
||
medicationStartDate,
|
||
medicationEndDate,
|
||
});
|
||
}
|
||
|
||
if (!medicationStartDate) return null;
|
||
|
||
const conflictingIntake = form.intakes.find((intake) => intake.startDate && intake.startDate < medicationStartDate);
|
||
if (!conflictingIntake?.startDate) return null;
|
||
|
||
return t("form.validation.startDateAfterIntake", {
|
||
medicationStartDate,
|
||
intakeDate: conflictingIntake.startDate,
|
||
});
|
||
}, [form.medicationStartDate, form.medicationEndDate, form.intakes, t]);
|
||
|
||
const allowFractionalIntake = useMemo(() => {
|
||
if (isLiquidContainerPackageType(form.packageType)) return true;
|
||
if (isTubePackageType(form.packageType)) return form.medicationForm === "liquid";
|
||
return form.pillForm === "tablet";
|
||
}, [form.packageType, form.medicationForm, form.pillForm]);
|
||
|
||
const getUsageLabel = useCallback(
|
||
(intakeUnit: "ml" | "tsp" | "tbsp") => {
|
||
if (isLiquidContainerPackageType(form.packageType)) {
|
||
if (intakeUnit === "tsp") return t("form.blisters.usageTsp");
|
||
if (intakeUnit === "tbsp") return t("form.blisters.usageTbsp");
|
||
return t("form.blisters.usageMl");
|
||
}
|
||
if (isTubePackageType(form.packageType)) {
|
||
return form.medicationForm === "liquid" ? t("form.blisters.usageMl") : t("form.blisters.usageApplication");
|
||
}
|
||
if (form.pillForm === "capsule") return t("form.blisters.usageCapsules");
|
||
return t("form.blisters.usageTablets");
|
||
},
|
||
[form.packageType, form.medicationForm, form.pillForm, t]
|
||
);
|
||
|
||
const usesAmountLabels = isTubePackageType(form.packageType) || isLiquidContainerPackageType(form.packageType);
|
||
const totalCapacityLabel = usesAmountLabels ? t("form.totalAmount") : t("form.totalCapacity");
|
||
const currentStockLabel = usesAmountLabels ? t("form.currentAmount") : t("form.currentPills");
|
||
const totalLabel = usesAmountLabels ? t("form.totalAmountLabel") : t("form.total");
|
||
const weekdayOptions = useMemo(
|
||
() =>
|
||
WEEKDAY_CODES.map((day) => ({
|
||
value: day,
|
||
shortLabel: getWeekdayLabel(day, t, "short"),
|
||
longLabel: getWeekdayLabel(day, t, "long"),
|
||
})),
|
||
[t]
|
||
);
|
||
const hasWeekdaySelectionError = useCallback(
|
||
(intake: (typeof form.intakes)[number]) =>
|
||
getIntakeScheduleMode(intake) === "weekdays" && !hasSelectedWeekdays(intake.weekdays),
|
||
[]
|
||
);
|
||
const hasWeekdayScheduleError = useMemo(
|
||
() => form.intakes.some((intake) => hasWeekdaySelectionError(intake)),
|
||
[form.intakes, hasWeekdaySelectionError]
|
||
);
|
||
|
||
const getMedicationPackageTypeLabel = useCallback(
|
||
(med: Medication) => {
|
||
return t(getPackageProfile(med.packageType).labelKey);
|
||
},
|
||
[t]
|
||
);
|
||
|
||
const getMedicationStockSuffix = useCallback(
|
||
(med: Medication) => {
|
||
if (isTubePackageType(med.packageType)) return "";
|
||
if (isLiquidContainerPackageType(med.packageType)) return " ml";
|
||
return ` ${getPackageSize(med) === 1 ? t("common.pill") : t("common.pills")}`;
|
||
},
|
||
[t]
|
||
);
|
||
|
||
const getMedicationUsageUnitLabel = useCallback(
|
||
(med: Medication, usage: number) => {
|
||
if (isTubePackageType(med.packageType)) {
|
||
return med.medicationForm === "liquid" ? "ml" : t("form.blisters.usageApplication");
|
||
}
|
||
if (isLiquidContainerPackageType(med.packageType)) return "ml";
|
||
if (usage === 1) return t("common.pill");
|
||
return t("common.pills");
|
||
},
|
||
[t]
|
||
);
|
||
|
||
const clearEditMedIdParam = useCallback(() => {
|
||
setSearchParams(
|
||
(prevParams) => {
|
||
if (!prevParams.has("editMedId")) return prevParams;
|
||
const nextParams = new URLSearchParams(prevParams);
|
||
nextParams.delete("editMedId");
|
||
return nextParams;
|
||
},
|
||
{ replace: true }
|
||
);
|
||
}, [setSearchParams]);
|
||
|
||
// Open mobile edit modal
|
||
function openEditModal() {
|
||
if (showEditModalRef.current) return;
|
||
showEditModalRef.current = true;
|
||
setShowEditModal(true);
|
||
window.history.pushState({ modal: "edit" }, "");
|
||
}
|
||
|
||
// Close mobile edit modal
|
||
function closeEditModal() {
|
||
if (showEditModal) {
|
||
// Check for unsaved changes before closing
|
||
if (formChanged) {
|
||
setUnsavedConfirmSource("mobile-edit");
|
||
setShowUnsavedConfirm(true);
|
||
return;
|
||
}
|
||
clearEditMedIdParam();
|
||
// Mark as confirmed to avoid double confirmation in popstate handler
|
||
closeConfirmedRef.current = true;
|
||
window.history.back();
|
||
}
|
||
}
|
||
|
||
// Handle confirmed close (user clicked "Leave" in confirmation modal)
|
||
function handleConfirmClose() {
|
||
const source = unsavedConfirmSource;
|
||
const pendingAction = pendingActionRef.current;
|
||
setShowUnsavedConfirm(false);
|
||
setUnsavedConfirmSource(null);
|
||
pendingActionRef.current = null;
|
||
closeConfirmedRef.current = true;
|
||
hasUnsavedHistoryState.current = false;
|
||
|
||
if (pendingAction) {
|
||
// There's a pending action (e.g. switching to another medication) — reset and run it
|
||
resetForm();
|
||
resetMedicationEnrichment();
|
||
setReadOnlyView(false);
|
||
pendingAction();
|
||
} else if (source === "mobile-edit" && showEditModal) {
|
||
clearEditMedIdParam();
|
||
setShowEditModal(false);
|
||
resetForm();
|
||
resetMedicationEnrichment();
|
||
setReadOnlyView(false);
|
||
window.history.back();
|
||
} else {
|
||
// Desktop form — reset and go back to grid
|
||
handleResetForm();
|
||
}
|
||
}
|
||
|
||
// Handle cancelled close (user clicked "Stay" in confirmation modal)
|
||
function handleCancelClose() {
|
||
setShowUnsavedConfirm(false);
|
||
pendingActionRef.current = null;
|
||
if (unsavedConfirmSource === "mobile-edit") {
|
||
setShowEditModal(true);
|
||
}
|
||
setUnsavedConfirmSource(null);
|
||
}
|
||
|
||
// Helper to reset form and clear history state
|
||
function handleResetForm() {
|
||
hasDesktopFormHistoryState.current = false;
|
||
if (hasUnsavedHistoryState.current) {
|
||
hasUnsavedHistoryState.current = false;
|
||
// Go back to remove the unsaved changes history entry
|
||
window.history.back();
|
||
}
|
||
resetForm();
|
||
resetMedicationEnrichment();
|
||
setShowNameValidation(false);
|
||
setActiveTab("general");
|
||
setReadOnlyView(false);
|
||
setViewMode("grid");
|
||
}
|
||
|
||
// Guard for desktop form Back/Cancel — shows unsaved changes modal if needed
|
||
function handleDesktopFormLeave() {
|
||
if (readOnlyView) {
|
||
handleResetForm();
|
||
return;
|
||
}
|
||
if (formChanged) {
|
||
setUnsavedConfirmSource("desktop-form");
|
||
setShowUnsavedConfirm(true);
|
||
return;
|
||
}
|
||
handleResetForm();
|
||
}
|
||
|
||
function requestDeleteMed(med: Medication) {
|
||
setDeleteCandidate(med);
|
||
setShowDeleteConfirm(true);
|
||
window.history.pushState({ modal: "delete-confirm" }, "");
|
||
}
|
||
|
||
async function handleConfirmDelete() {
|
||
if (!deleteCandidate) return;
|
||
await deleteMed(deleteCandidate.id, editingId, resetForm);
|
||
await loadAllMeds();
|
||
setShowDeleteConfirm(false);
|
||
setDeleteCandidate(null);
|
||
// Pop the delete-confirm history entry
|
||
window.history.back();
|
||
}
|
||
|
||
function handleCancelDelete() {
|
||
setShowDeleteConfirm(false);
|
||
setDeleteCandidate(null);
|
||
// Pop the delete-confirm history entry
|
||
window.history.back();
|
||
}
|
||
|
||
function requestMarkObsolete(med: Medication) {
|
||
setObsoleteCandidate(med);
|
||
setShowObsoleteConfirm(true);
|
||
window.history.pushState({ modal: "obsolete-confirm" }, "");
|
||
}
|
||
|
||
async function handleConfirmMarkObsolete() {
|
||
if (!obsoleteCandidate) return;
|
||
await markMedicationObsolete(obsoleteCandidate.id);
|
||
setShowObsoleteConfirm(false);
|
||
setObsoleteCandidate(null);
|
||
window.history.back();
|
||
}
|
||
|
||
function handleCancelMarkObsolete() {
|
||
setShowObsoleteConfirm(false);
|
||
setObsoleteCandidate(null);
|
||
window.history.back();
|
||
}
|
||
|
||
async function markMedicationObsolete(id: number) {
|
||
try {
|
||
await fetch(`/api/medications/${id}/obsolete`, { method: "POST", credentials: "include" });
|
||
if (editingId === id) {
|
||
handleResetForm();
|
||
}
|
||
loadMeds();
|
||
await loadAllMeds();
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}
|
||
|
||
async function reactivateMedication(id: number) {
|
||
try {
|
||
await fetch(`/api/medications/${id}/reactivate`, { method: "POST", credentials: "include" });
|
||
loadMeds();
|
||
await loadAllMeds();
|
||
} catch {
|
||
// ignore
|
||
}
|
||
}
|
||
|
||
// Save medication
|
||
async function saveMedication(e: React.FormEvent) {
|
||
e.preventDefault();
|
||
if (readOnlyView) return;
|
||
if (hasValidationErrors || dateConsistencyError || hasWeekdayScheduleError) {
|
||
setShowNameValidation(true);
|
||
// Scroll to first visible error so the user sees what's wrong
|
||
const firstError = document.querySelector(".field-error");
|
||
if (firstError) {
|
||
firstError.scrollIntoView({ behavior: "smooth", block: "center" });
|
||
// Brief highlight pulse
|
||
firstError.classList.add("error-pulse");
|
||
setTimeout(() => firstError.classList.remove("error-pulse"), 1500);
|
||
}
|
||
return;
|
||
}
|
||
if (saving) return;
|
||
if (form.pillForm === "capsule" && form.intakes.some((i) => !Number.isInteger(Number(i.usage)))) {
|
||
setShowNameValidation(true);
|
||
return;
|
||
}
|
||
setSaving(true);
|
||
|
||
// Prepare intakes data with per-intake takenBy
|
||
const intakes = form.intakes.map((intake) => ({
|
||
usage: Number(intake.usage) || 1,
|
||
every: getIntakeScheduleMode(intake) === "weekdays" ? 1 : Number(intake.every) || 1,
|
||
start: combineDateAndTime(intake.startDate, intake.startTime),
|
||
scheduleMode: getIntakeScheduleMode(intake),
|
||
weekdays: getIntakeScheduleMode(intake) === "weekdays" ? [...(intake.weekdays ?? [])] : [],
|
||
intakeUnit: isLiquidContainerPackageType(form.packageType) ? intake.intakeUnit : null,
|
||
takenBy: intake.takenBy.trim() || null, // Empty string becomes null
|
||
intakeRemindersEnabled: intake.intakeRemindersEnabled,
|
||
}));
|
||
|
||
// Also prepare legacy blisters for backward compatibility
|
||
const blisters = intakes.map((i) => ({
|
||
usage: i.usage,
|
||
every: i.every,
|
||
start: i.start,
|
||
}));
|
||
|
||
const authorizedRefills = Number(form.prescriptionAuthorizedRefills || 0);
|
||
const remainingRefills = Math.min(Number(form.prescriptionRemainingRefills || 0), authorizedRefills);
|
||
const lowRefillThreshold = Math.min(Number(form.prescriptionLowRefillThreshold || 1), authorizedRefills);
|
||
|
||
let derivedMedicationForm: string;
|
||
if (isTubePackageType(form.packageType)) {
|
||
derivedMedicationForm =
|
||
form.medicationForm === "liquid" || form.medicationForm === "topical" ? form.medicationForm : "topical";
|
||
} else if (isLiquidContainerPackageType(form.packageType)) {
|
||
derivedMedicationForm = "liquid";
|
||
} else {
|
||
derivedMedicationForm = form.pillForm;
|
||
}
|
||
|
||
const tubeTotalAmount = isTubePackageType(form.packageType)
|
||
? (Number(form.packCount) || 0) * (Number(form.packageAmountValue ?? 0) || 0)
|
||
: null;
|
||
|
||
let packageAmountUnit = form.packageAmountUnit ?? "ml";
|
||
if (isTubePackageType(form.packageType)) {
|
||
packageAmountUnit = "g";
|
||
} else if (isLiquidContainerPackageType(form.packageType)) {
|
||
packageAmountUnit = "ml";
|
||
}
|
||
|
||
const body = {
|
||
name: form.name.trim(),
|
||
genericName: form.genericName.trim() || null,
|
||
takenBy: form.takenBy.length > 0 ? form.takenBy : [],
|
||
medicationForm: derivedMedicationForm,
|
||
pillForm:
|
||
isTubePackageType(form.packageType) || isLiquidContainerPackageType(form.packageType) ? null : form.pillForm,
|
||
lifecycleCategory: form.lifecycleCategory,
|
||
packageType: normalizePackageType(form.packageType),
|
||
packCount: isTubePackageType(form.packageType)
|
||
? Math.max(1, Number(form.packCount) || 1)
|
||
: Number(form.packCount) || 0,
|
||
blistersPerPack: isTubePackageType(form.packageType) ? 1 : Number(form.blistersPerPack) || 1,
|
||
pillsPerBlister: isTubePackageType(form.packageType) ? 1 : Number(form.pillsPerBlister) || 1,
|
||
packageAmountValue: Number(form.packageAmountValue ?? 0) || 0,
|
||
packageAmountUnit,
|
||
totalPills: isTubePackageType(form.packageType) ? tubeTotalAmount : Number(form.totalPills) || null,
|
||
looseTablets: isTubePackageType(form.packageType) ? tubeTotalAmount || 0 : Number(form.looseTablets) || 0,
|
||
pillWeightMg: Number(form.pillWeightMg) || null,
|
||
doseUnit: form.doseUnit,
|
||
medicationStartDate: form.medicationStartDate || null,
|
||
medicationEndDate: form.medicationEndDate || null,
|
||
autoMarkObsoleteAfterEndDate: form.autoMarkObsoleteAfterEndDate,
|
||
expiryDate: form.expiryDate || null,
|
||
notes: form.notes.trim() || null,
|
||
intakeRemindersEnabled: form.intakeRemindersEnabled,
|
||
prescriptionEnabled: form.prescriptionEnabled,
|
||
prescriptionAuthorizedRefills: form.prescriptionEnabled ? authorizedRefills : null,
|
||
prescriptionRemainingRefills: form.prescriptionEnabled ? remainingRefills : null,
|
||
prescriptionLowRefillThreshold: form.prescriptionEnabled ? lowRefillThreshold : 1,
|
||
prescriptionExpiryDate: form.prescriptionExpiryDate || null,
|
||
blisters, // Legacy format for backward compatibility
|
||
intakes, // New format with per-intake takenBy
|
||
};
|
||
|
||
try {
|
||
let url = "/api/medications";
|
||
let method = "POST";
|
||
if (editingId) {
|
||
url = `/api/medications/${editingId}`;
|
||
method = "PUT";
|
||
}
|
||
|
||
const res = await fetch(url, {
|
||
method,
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify(body),
|
||
credentials: "include",
|
||
});
|
||
|
||
if (!res.ok) {
|
||
let errorMessage = t("common.saveFailed");
|
||
try {
|
||
const errorBody = (await res.json()) as { error?: string; message?: string };
|
||
if (typeof errorBody?.error === "string" && errorBody.error.trim().length > 0) {
|
||
errorMessage = errorBody.error;
|
||
} else if (typeof errorBody?.message === "string" && errorBody.message.trim().length > 0) {
|
||
errorMessage = errorBody.message;
|
||
}
|
||
} catch {
|
||
// keep translated fallback
|
||
}
|
||
throw new Error(errorMessage);
|
||
}
|
||
|
||
const saved = await res.json();
|
||
|
||
// Upload image if pending (for new medications)
|
||
if (!editingId && pendingImage && saved.id) {
|
||
const uploaded = await tryUploadMedImage(saved.id, pendingImage);
|
||
if (!uploaded) {
|
||
// Keep user in edit mode so upload error stays visible and retry is immediate.
|
||
setEditingId(saved.id);
|
||
setFormSaved(true);
|
||
setOriginalForm(form);
|
||
setPendingImage(null);
|
||
setPendingImagePreview(null);
|
||
loadMeds();
|
||
void loadAllMeds();
|
||
setSaving(false);
|
||
return;
|
||
}
|
||
setPendingImage(null);
|
||
setPendingImagePreview(null);
|
||
}
|
||
|
||
setFormSaved(true);
|
||
loadMeds();
|
||
void loadAllMeds();
|
||
|
||
// Clean up history state if we had unsaved changes
|
||
if (hasUnsavedHistoryState.current) {
|
||
hasUnsavedHistoryState.current = false;
|
||
// Don't go back here, just clear the flag - the state will be cleaned naturally
|
||
}
|
||
|
||
// Reset form after successful save
|
||
if (!editingId) {
|
||
const shouldCloseMobileModal = showEditModal && window.innerWidth <= 768;
|
||
if (shouldCloseMobileModal) {
|
||
// Treat post-save close as confirmed so popstate does not trigger unsaved guards.
|
||
closeConfirmedRef.current = true;
|
||
clearEditMedIdParam();
|
||
setShowEditModal(false);
|
||
setReadOnlyView(false);
|
||
setActiveTab("general");
|
||
setViewMode("grid");
|
||
resetForm();
|
||
resetMedicationEnrichment();
|
||
window.history.back();
|
||
setSaving(false);
|
||
return;
|
||
}
|
||
resetForm();
|
||
resetMedicationEnrichment();
|
||
setViewMode("grid");
|
||
} else {
|
||
// Update originalForm so formChanged becomes false
|
||
setOriginalForm(form);
|
||
}
|
||
} catch (err) {
|
||
log.error("Save error:", err);
|
||
alert(err instanceof Error && err.message ? err.message : t("common.saveFailed"));
|
||
}
|
||
|
||
setSaving(false);
|
||
}
|
||
|
||
// Handle browser back button for modals and unsaved changes
|
||
useEffect(() => {
|
||
const handlePopState = () => {
|
||
const currentEditMedId = new URLSearchParams(window.location.search).get("editMedId");
|
||
|
||
// Obsolete confirmation is open — dismiss it and stay where we are
|
||
if (showObsoleteConfirm) {
|
||
setShowObsoleteConfirm(false);
|
||
setObsoleteCandidate(null);
|
||
return;
|
||
}
|
||
|
||
// Delete confirmation is open — dismiss it and stay where we are
|
||
if (showDeleteConfirm) {
|
||
setShowDeleteConfirm(false);
|
||
setDeleteCandidate(null);
|
||
return;
|
||
}
|
||
|
||
// If close was already confirmed programmatically, allow navigation
|
||
if (closeConfirmedRef.current) {
|
||
closeConfirmedRef.current = false;
|
||
if (currentEditMedId) {
|
||
// Prevent URL popstate from immediately reopening mobile edit for the same id.
|
||
processedEditMedIdRef.current = currentEditMedId;
|
||
clearEditMedIdParam();
|
||
}
|
||
if (showEditModal) {
|
||
setShowEditModal(false);
|
||
resetForm();
|
||
resetMedicationEnrichment();
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Handle mobile edit modal
|
||
if (showEditModal) {
|
||
// Check for unsaved changes (user pressed browser back directly)
|
||
if (formChanged) {
|
||
// Re-push history state to stay in modal
|
||
window.history.pushState({ modal: "edit" }, "");
|
||
// Show confirmation modal
|
||
setUnsavedConfirmSource("mobile-edit");
|
||
setShowUnsavedConfirm(true);
|
||
return;
|
||
}
|
||
if (currentEditMedId) {
|
||
// Mark as handled before URL cleanup to avoid same-tick re-open races.
|
||
processedEditMedIdRef.current = currentEditMedId;
|
||
}
|
||
clearEditMedIdParam();
|
||
setShowEditModal(false);
|
||
resetForm();
|
||
resetMedicationEnrichment();
|
||
return;
|
||
}
|
||
|
||
// Handle desktop form: browser back should return to medication overview grid.
|
||
if (viewMode === "form" && hasDesktopFormHistoryState.current) {
|
||
if (formChanged) {
|
||
window.history.pushState({ desktopForm: true }, "");
|
||
setUnsavedConfirmSource("desktop-form");
|
||
setShowUnsavedConfirm(true);
|
||
return;
|
||
}
|
||
hasDesktopFormHistoryState.current = false;
|
||
resetForm();
|
||
resetMedicationEnrichment();
|
||
setShowNameValidation(false);
|
||
setActiveTab("general");
|
||
setReadOnlyView(false);
|
||
setViewMode("grid");
|
||
return;
|
||
}
|
||
|
||
// Handle desktop form with unsaved changes
|
||
if (formChanged && hasUnsavedHistoryState.current) {
|
||
// Re-push history state to stay on page
|
||
window.history.pushState({ unsavedChanges: true }, "");
|
||
// Show confirmation modal
|
||
setUnsavedConfirmSource("desktop-form");
|
||
setShowUnsavedConfirm(true);
|
||
}
|
||
};
|
||
window.addEventListener("popstate", handlePopState);
|
||
return () => window.removeEventListener("popstate", handlePopState);
|
||
}, [showObsoleteConfirm, showDeleteConfirm, showEditModal, viewMode, formChanged, resetForm, clearEditMedIdParam]);
|
||
|
||
// Close modal on Escape key
|
||
useEffect(() => {
|
||
const handleEscape = (e: KeyboardEvent) => {
|
||
if (e.key === "Escape" && showEditModal) {
|
||
closeEditModal();
|
||
}
|
||
};
|
||
document.addEventListener("keydown", handleEscape);
|
||
return () => document.removeEventListener("keydown", handleEscape);
|
||
}, [showEditModal, closeEditModal]);
|
||
|
||
function scrollToTopForDesktopEdit() {
|
||
if (window.innerWidth <= 768) return;
|
||
window.requestAnimationFrame(() => {
|
||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||
});
|
||
}
|
||
|
||
const getLatestMedication = useCallback(
|
||
(med: Medication) => meds.find((candidate) => candidate.id === med.id) ?? med,
|
||
[meds]
|
||
);
|
||
|
||
function handleEditClick(med: Medication) {
|
||
const latestMedication = getLatestMedication(med);
|
||
if (formChanged) {
|
||
pendingActionRef.current = () => {
|
||
setShowNameValidation(false);
|
||
setReadOnlyView(false);
|
||
resetMedicationEnrichment(latestMedication.name || latestMedication.genericName || "");
|
||
startEdit(latestMedication, openEditModal);
|
||
setViewMode("form");
|
||
scrollToTopForDesktopEdit();
|
||
};
|
||
setUnsavedConfirmSource(showEditModal ? "mobile-edit" : "desktop-form");
|
||
setShowUnsavedConfirm(true);
|
||
return;
|
||
}
|
||
setShowNameValidation(false);
|
||
setReadOnlyView(false);
|
||
setActiveTab("general");
|
||
resetMedicationEnrichment(latestMedication.name || latestMedication.genericName || "");
|
||
startEdit(latestMedication, openEditModal);
|
||
setViewMode("form");
|
||
scrollToTopForDesktopEdit();
|
||
}
|
||
|
||
function handleViewClick(med: Medication) {
|
||
const latestMedication = getLatestMedication(med);
|
||
if (formChanged) {
|
||
pendingActionRef.current = () => {
|
||
setShowNameValidation(false);
|
||
setReadOnlyView(true);
|
||
resetMedicationEnrichment(latestMedication.name || latestMedication.genericName || "");
|
||
startEdit(latestMedication, openEditModal);
|
||
setViewMode("form");
|
||
scrollToTopForDesktopEdit();
|
||
};
|
||
setUnsavedConfirmSource(showEditModal ? "mobile-edit" : "desktop-form");
|
||
setShowUnsavedConfirm(true);
|
||
return;
|
||
}
|
||
setShowNameValidation(false);
|
||
setReadOnlyView(true);
|
||
setActiveTab("general");
|
||
resetMedicationEnrichment(latestMedication.name || latestMedication.genericName || "");
|
||
startEdit(latestMedication, openEditModal);
|
||
setViewMode("form");
|
||
scrollToTopForDesktopEdit();
|
||
}
|
||
|
||
function handleNewEntryClick() {
|
||
if (formChanged) {
|
||
pendingActionRef.current = () => {
|
||
resetForm();
|
||
resetMedicationEnrichment();
|
||
setShowNameValidation(false);
|
||
setReadOnlyView(false);
|
||
if (window.innerWidth <= 768) {
|
||
openEditModal();
|
||
} else {
|
||
setViewMode("form");
|
||
}
|
||
};
|
||
setUnsavedConfirmSource(showEditModal ? "mobile-edit" : "desktop-form");
|
||
setShowUnsavedConfirm(true);
|
||
return;
|
||
}
|
||
resetForm();
|
||
resetMedicationEnrichment();
|
||
setShowNameValidation(false);
|
||
setReadOnlyView(false);
|
||
if (window.innerWidth <= 768) {
|
||
openEditModal();
|
||
} else {
|
||
setViewMode("form");
|
||
}
|
||
}
|
||
|
||
const activeMeds = useMemo(() => allMeds.filter((med) => !med.isObsolete), [allMeds]);
|
||
const obsoleteMeds = useMemo(() => allMeds.filter((med) => med.isObsolete), [allMeds]);
|
||
|
||
const orderedMeds = useMemo(() => {
|
||
if (!editingId) {
|
||
return activeMeds;
|
||
}
|
||
|
||
const selectedMedication = activeMeds.find((med) => med.id === editingId);
|
||
if (!selectedMedication) {
|
||
return activeMeds;
|
||
}
|
||
|
||
return [selectedMedication, ...activeMeds.filter((med) => med.id !== editingId)];
|
||
}, [activeMeds, editingId]);
|
||
|
||
useEffect(() => {
|
||
const editMedId = searchParams.get("editMedId");
|
||
if (!editMedId) {
|
||
processedEditMedIdRef.current = null;
|
||
return;
|
||
}
|
||
if (processedEditMedIdRef.current === editMedId) return;
|
||
const parsedMedId = Number.parseInt(editMedId, 10);
|
||
if (Number.isNaN(parsedMedId)) return;
|
||
const medicationToEdit =
|
||
meds.find((med) => med.id === parsedMedId) ?? allMeds.find((med) => med.id === parsedMedId);
|
||
if (!medicationToEdit) return;
|
||
|
||
processedEditMedIdRef.current = editMedId;
|
||
|
||
setShowNameValidation(false);
|
||
setReadOnlyView(false);
|
||
setActiveTab("general");
|
||
resetMedicationEnrichment(medicationToEdit.name || medicationToEdit.genericName || "");
|
||
startEdit(medicationToEdit, openEditModal);
|
||
setViewMode("form");
|
||
scrollToTopForDesktopEdit();
|
||
setPendingEditTransition(false);
|
||
window.dispatchEvent(new Event("medassist:edit-transition-ready"));
|
||
|
||
const nextParams = new URLSearchParams(searchParams);
|
||
nextParams.delete("editMedId");
|
||
setSearchParams(nextParams, { replace: true });
|
||
}, [allMeds, meds, openEditModal, searchParams, setSearchParams, startEdit]);
|
||
|
||
const selectedMedication = useMemo(() => {
|
||
if (!editingId) return null;
|
||
return allMeds.find((med) => med.id === editingId) ?? null;
|
||
}, [allMeds, editingId]);
|
||
|
||
// While navigating from detail modal to edit, render nothing until form is populated
|
||
if (pendingEditTransition) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<section className={`med-grid-wrapper${viewMode === "form" ? " desktop-edit-open" : ""}`}>
|
||
<MedicationListSection
|
||
orderedMeds={orderedMeds}
|
||
obsoleteMeds={obsoleteMeds}
|
||
editingId={editingId}
|
||
showObsolete={showObsolete}
|
||
coverageByMed={coverageByMed}
|
||
onNewEntry={handleNewEntryClick}
|
||
onOpenReport={() => setShowReportModal(true)}
|
||
onEdit={handleEditClick}
|
||
onView={handleViewClick}
|
||
onMarkObsolete={requestMarkObsolete}
|
||
onDelete={requestDeleteMed}
|
||
onReactivate={reactivateMedication}
|
||
onToggleObsolete={toggleObsoleteSection}
|
||
onImagePreview={(med) => setLightboxImage({ src: `/api/images/${med.imageUrl}`, alt: getMedDisplayName(med) })}
|
||
getMedicationPackageTypeLabel={getMedicationPackageTypeLabel}
|
||
getMedicationStockSuffix={getMedicationStockSuffix}
|
||
getMedicationUsageUnitLabel={getMedicationUsageUnitLabel}
|
||
/>
|
||
|
||
{/* ── Desktop Edit Panel: inline below medication list ── */}
|
||
<MedicationEditCoordinator
|
||
viewMode={viewMode}
|
||
editingId={editingId}
|
||
readOnlyView={readOnlyView}
|
||
selectedMedicationName={selectedMedication?.name}
|
||
onBack={handleDesktopFormLeave}
|
||
onSubmit={saveMedication}
|
||
>
|
||
<div className="full form-tabs" role="tablist" aria-label={t("form.sections.general")}>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={activeTab === "general"}
|
||
className={`form-tab${activeTab === "general" ? " active" : ""}`}
|
||
onClick={() => setActiveTab("general")}
|
||
>
|
||
{t("form.sections.general")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={activeTab === "stock"}
|
||
className={`form-tab${activeTab === "stock" ? " active" : ""}`}
|
||
onClick={() => setActiveTab("stock")}
|
||
>
|
||
{t("form.sections.stock")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={activeTab === "schedule"}
|
||
className={`form-tab${activeTab === "schedule" ? " active" : ""}`}
|
||
onClick={() => setActiveTab("schedule")}
|
||
>
|
||
{t("form.sections.schedule")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
aria-selected={activeTab === "prescription"}
|
||
className={`form-tab${activeTab === "prescription" ? " active" : ""}`}
|
||
onClick={() => setActiveTab("prescription")}
|
||
>
|
||
{t("form.sections.prescription")}
|
||
</button>
|
||
</div>
|
||
<fieldset className="readonly-fieldset" disabled={readOnlyView}>
|
||
<div className={`form-tab-panel${activeTab === "general" ? " active" : ""}`}>
|
||
<div className="full form-category">
|
||
<h4 className="form-category-title">{t("form.sections.general")}</h4>
|
||
<label className={!readOnlyView && showNameValidation && fieldErrors.name ? "has-error" : ""}>
|
||
{t("form.commercialName")}
|
||
<input
|
||
value={form.name}
|
||
onChange={(e) => {
|
||
setShowNameValidation(true);
|
||
setForm({ ...form, name: e.target.value });
|
||
}}
|
||
onBlur={() => setShowNameValidation(true)}
|
||
placeholder={t("form.placeholders.commercial")}
|
||
maxLength={FIELD_LIMITS.name.max}
|
||
/>
|
||
{!readOnlyView && showNameValidation && fieldErrors.name && (
|
||
<span className="field-error">{fieldErrors.name}</span>
|
||
)}
|
||
</label>
|
||
<label className={!readOnlyView && showNameValidation && fieldErrors.genericName ? "has-error" : ""}>
|
||
{t("form.genericName")}
|
||
<input
|
||
value={form.genericName}
|
||
onChange={(e) => {
|
||
setShowNameValidation(true);
|
||
setForm({ ...form, genericName: e.target.value });
|
||
}}
|
||
onBlur={() => setShowNameValidation(true)}
|
||
placeholder={t("form.placeholders.generic")}
|
||
maxLength={FIELD_LIMITS.genericName.max}
|
||
/>
|
||
{!readOnlyView && showNameValidation && fieldErrors.genericName && (
|
||
<span className="field-error">{fieldErrors.genericName}</span>
|
||
)}
|
||
</label>
|
||
<MedicationEnrichmentSection
|
||
state={medicationEnrichmentViewModel}
|
||
onQueryChange={handleMedicationEnrichmentQueryChange}
|
||
onSearch={handleMedicationEnrichmentSearch}
|
||
onLoadMoreResults={handleMedicationEnrichmentLoadMore}
|
||
onApplyResult={handleMedicationEnrichmentApply}
|
||
onApplyStrength={handleMedicationEnrichmentStrengthApply}
|
||
onApplyPackage={handleMedicationEnrichmentPackageApply}
|
||
/>
|
||
<div className="full date-pair-group">
|
||
<label className="date-pair-field">
|
||
{t("form.medicationStartDate")}
|
||
<DateInput
|
||
value={form.medicationStartDate}
|
||
onChange={(e) => handleValueChange("medicationStartDate", e.target.value)}
|
||
placeholder={t("common.optional")}
|
||
/>
|
||
{!readOnlyView && dateConsistencyError && <span className="field-error">{dateConsistencyError}</span>}
|
||
</label>
|
||
<label className="date-pair-field">
|
||
{t("form.medicationEndDate")}
|
||
<DateInput
|
||
value={form.medicationEndDate}
|
||
onChange={(e) => handleValueChange("medicationEndDate", e.target.value)}
|
||
placeholder={t("common.optional")}
|
||
/>
|
||
</label>
|
||
</div>
|
||
<label>
|
||
{t("form.packageType")}
|
||
<select
|
||
className="select-field package-type-select"
|
||
value={form.packageType}
|
||
onChange={(e) => handleValueChange("packageType", e.target.value as PackageType)}
|
||
>
|
||
{PACKAGE_PROFILES.map((profile) => (
|
||
<option key={profile.value} value={profile.value}>
|
||
{t(profile.labelKey)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
{allowsPillFormSelection(form.packageType) && (
|
||
<label>
|
||
{t("form.pillForm")}
|
||
<select
|
||
className="select-field"
|
||
value={form.pillForm}
|
||
onChange={(e) => handleValueChange("pillForm", e.target.value as FormState["pillForm"])}
|
||
>
|
||
<option value="tablet">{t("form.medicationFormTablet")}</option>
|
||
<option value="capsule">{t("form.medicationFormCapsule")}</option>
|
||
</select>
|
||
</label>
|
||
)}
|
||
{isTubePackageType(form.packageType) && (
|
||
<label>
|
||
{t("form.medicationForm")}
|
||
<select
|
||
className="select-field"
|
||
value={"topical"}
|
||
onChange={() => handleValueChange("medicationForm", "topical")}
|
||
>
|
||
<option value="topical">{t("form.medicationFormTopical")}</option>
|
||
</select>
|
||
</label>
|
||
)}
|
||
{isLiquidContainerPackageType(form.packageType) && (
|
||
<label>
|
||
{t("form.medicationForm")}
|
||
<select
|
||
className="select-field"
|
||
value={"liquid"}
|
||
onChange={() => handleValueChange("medicationForm", "liquid")}
|
||
>
|
||
<option value="liquid">{t("form.medicationFormLiquid")}</option>
|
||
</select>
|
||
</label>
|
||
)}
|
||
{form.medicationEndDate && (
|
||
<label className="full">
|
||
{t("form.autoMarkObsoleteAfterEndDate")}
|
||
<label className="toggle-switch small">
|
||
<input
|
||
type="checkbox"
|
||
checked={form.autoMarkObsoleteAfterEndDate}
|
||
onChange={(e) => handleValueChange("autoMarkObsoleteAfterEndDate", e.target.checked)}
|
||
/>
|
||
<span className="toggle-slider"></span>
|
||
</label>
|
||
</label>
|
||
)}
|
||
<label className={`full ${fieldErrors.takenBy ? "has-error" : ""}`}>
|
||
{t("form.takenBy")}
|
||
<div className="tag-input-container">
|
||
{form.takenBy.map((person) => (
|
||
<span key={person} className="tag">
|
||
{person}
|
||
{!readOnlyView && (
|
||
<button type="button" className="tag-remove" onClick={() => removeTakenByPerson(person)}>
|
||
×
|
||
</button>
|
||
)}
|
||
</span>
|
||
))}
|
||
{!readOnlyView && (
|
||
<>
|
||
<input
|
||
value={takenByInput}
|
||
onChange={(e) => setTakenByInput(e.target.value)}
|
||
onKeyDown={handleTakenByKeyDown}
|
||
onBlur={() => {
|
||
if (takenByInput.trim()) addTakenByPerson(takenByInput);
|
||
}}
|
||
placeholder={
|
||
form.takenBy.length === 0 ? t("form.placeholders.takenBy") : t("form.placeholders.addPerson")
|
||
}
|
||
maxLength={FIELD_LIMITS.takenBy.max}
|
||
list="takenby-suggestions"
|
||
/>
|
||
<datalist id="takenby-suggestions">
|
||
{existingPeople
|
||
.filter((p) => !form.takenBy.includes(p))
|
||
.map((person) => (
|
||
<option key={person} value={person} />
|
||
))}
|
||
</datalist>
|
||
</>
|
||
)}
|
||
</div>
|
||
{fieldErrors.takenBy && <span className="field-error">{fieldErrors.takenBy}</span>}
|
||
</label>
|
||
</div>
|
||
|
||
<div className="full form-category image-section">
|
||
<h4 className="form-category-title">{t("form.medicationImage")}</h4>
|
||
{(() => {
|
||
if (editingId) {
|
||
const currentMed = meds.find((m) => m.id === editingId);
|
||
if (currentMed?.imageUrl) {
|
||
return (
|
||
<div className="image-preview">
|
||
<img src={`/api/images/${currentMed.imageUrl}`} alt={currentMed.name} />
|
||
<button
|
||
type="button"
|
||
className="danger icon-only tooltip-trigger"
|
||
onClick={() => handleDeleteMedImage(editingId)}
|
||
aria-label={t("form.removeImage")}
|
||
data-tooltip={t("form.removeImage")}
|
||
>
|
||
<Trash2 size={18} aria-hidden="true" />
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
return (
|
||
<input
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp,image/gif"
|
||
onChange={(e) => {
|
||
const file = e.target.files?.[0];
|
||
e.target.value = "";
|
||
if (file) void tryUploadMedImage(editingId, file);
|
||
}}
|
||
disabled={uploadingImage}
|
||
/>
|
||
);
|
||
}
|
||
if (pendingImagePreview) {
|
||
return (
|
||
<div className="image-preview">
|
||
<img src={pendingImagePreview} alt="Preview" />
|
||
<button
|
||
type="button"
|
||
className="danger icon-only tooltip-trigger"
|
||
onClick={() => {
|
||
setPendingImage(null);
|
||
setPendingImagePreview(null);
|
||
}}
|
||
aria-label={t("form.removeImage")}
|
||
data-tooltip={t("form.removeImage")}
|
||
>
|
||
<Trash2 size={18} aria-hidden="true" />
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
return (
|
||
<input
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/webp,image/gif"
|
||
onChange={handlePendingMedicationImageSelection}
|
||
/>
|
||
);
|
||
})()}
|
||
{imageUploadError && <span className="field-error">{imageUploadError}</span>}
|
||
</div>
|
||
</div>
|
||
{/* end general tab */}
|
||
|
||
<div className={`form-tab-panel${activeTab === "stock" ? " active" : ""}`}>
|
||
<div className="full form-category">
|
||
<h4 className="form-category-title">{t("form.sections.stock")}</h4>
|
||
{(() => {
|
||
if (!isAmountBasedPackageType(form.packageType)) {
|
||
return (
|
||
<>
|
||
<label>
|
||
{t("form.packs")}
|
||
<FormNumberStepper
|
||
value={form.packCount}
|
||
onChange={(nextValue) => handleValueChange("packCount", nextValue)}
|
||
min={0}
|
||
decrementLabel={decrementValueLabel}
|
||
incrementLabel={incrementValueLabel}
|
||
/>
|
||
</label>
|
||
<label>
|
||
{t("form.blistersPerPack")}
|
||
<FormNumberStepper
|
||
value={form.blistersPerPack}
|
||
onChange={(nextValue) => handleValueChange("blistersPerPack", nextValue)}
|
||
min={1}
|
||
decrementLabel={decrementValueLabel}
|
||
incrementLabel={incrementValueLabel}
|
||
/>
|
||
</label>
|
||
<label>
|
||
{t("form.pillsPerBlister")}
|
||
<FormNumberStepper
|
||
value={form.pillsPerBlister}
|
||
onChange={(nextValue) => handleValueChange("pillsPerBlister", nextValue)}
|
||
min={1}
|
||
decrementLabel={decrementValueLabel}
|
||
incrementLabel={incrementValueLabel}
|
||
/>
|
||
</label>
|
||
<label>
|
||
{t("form.total")}
|
||
<div className="static-value">{formatNumber(totalTablets)}</div>
|
||
</label>
|
||
</>
|
||
);
|
||
}
|
||
|
||
if (isTubePackageType(form.packageType)) {
|
||
return (
|
||
<>
|
||
<label>
|
||
{t("form.tubes")}
|
||
<FormNumberStepper
|
||
value={form.packCount}
|
||
onChange={(nextValue) => handleValueChange("packCount", nextValue)}
|
||
min={1}
|
||
decrementLabel={decrementValueLabel}
|
||
incrementLabel={incrementValueLabel}
|
||
/>
|
||
</label>
|
||
<label className="full">
|
||
{t("form.packageAmountPerTube")}
|
||
<div className="dose-input-group">
|
||
<input
|
||
type="text"
|
||
inputMode="decimal"
|
||
pattern="[0-9]*\.?[0-9]*"
|
||
value={form.packageAmountValue ?? "0"}
|
||
onChange={(e) => handleValueChange("packageAmountValue", e.target.value)}
|
||
placeholder="0"
|
||
/>
|
||
<select
|
||
value="g"
|
||
disabled
|
||
className="select-field dose-unit-select"
|
||
aria-label={t("form.packageAmountUnitG")}
|
||
>
|
||
<option value="g">{t("form.packageAmountUnitG")}</option>
|
||
</select>
|
||
</div>
|
||
</label>
|
||
<label>
|
||
{t("form.totalAmount")}
|
||
<div className="static-value">
|
||
{formatNumber((Number(form.packCount) || 0) * (Number(form.packageAmountValue ?? 0) || 0))}
|
||
{t("form.packageAmountUnitG")}
|
||
</div>
|
||
</label>
|
||
</>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<label>
|
||
{totalCapacityLabel}
|
||
<FormNumberStepper
|
||
value={form.totalPills}
|
||
onChange={(nextValue) => handleValueChange("totalPills", nextValue)}
|
||
min={0}
|
||
decrementLabel={decrementValueLabel}
|
||
incrementLabel={incrementValueLabel}
|
||
/>
|
||
</label>
|
||
<label>
|
||
{currentStockLabel}
|
||
<FormNumberStepper
|
||
value={form.looseTablets}
|
||
onChange={(nextValue) => handleValueChange("looseTablets", nextValue)}
|
||
min={0}
|
||
decrementLabel={decrementValueLabel}
|
||
incrementLabel={incrementValueLabel}
|
||
/>
|
||
</label>
|
||
</>
|
||
);
|
||
})()}
|
||
{allowsPillFormSelection(form.packageType) && (
|
||
<label className="full">
|
||
{t("form.pillWeight")} ({form.doseUnit})
|
||
<div className="dose-input-group">
|
||
<input
|
||
type="text"
|
||
inputMode="decimal"
|
||
pattern="[0-9]*\.?[0-9]*"
|
||
value={form.pillWeightMg}
|
||
onChange={(e) => handleValueChange("pillWeightMg", e.target.value)}
|
||
placeholder={t("form.placeholders.weight")}
|
||
/>
|
||
<select
|
||
value={form.doseUnit}
|
||
onChange={(e) => handleValueChange("doseUnit", e.target.value as DoseUnit)}
|
||
className="select-field dose-unit-select"
|
||
>
|
||
{DOSE_UNITS.map((unit) => (
|
||
<option key={unit.value} value={unit.value}>
|
||
{unit.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
</label>
|
||
)}
|
||
{isAmountBasedPackageType(form.packageType) && !isTubePackageType(form.packageType) && (
|
||
<div className="full stock-total-row">
|
||
<label className="stock-total-field">
|
||
{totalLabel}
|
||
<div className="static-value">{formatNumber(totalTablets)}</div>
|
||
</label>
|
||
</div>
|
||
)}
|
||
{isLiquidContainerPackageType(form.packageType) && (
|
||
<label className="full">
|
||
{t("form.packageAmount")}
|
||
<div className="dose-input-group">
|
||
<input
|
||
type="text"
|
||
inputMode="decimal"
|
||
pattern="[0-9]*\.?[0-9]*"
|
||
value={form.packageAmountValue ?? "0"}
|
||
onChange={(e) => handleValueChange("packageAmountValue", e.target.value)}
|
||
placeholder="0"
|
||
/>
|
||
<select
|
||
value="ml"
|
||
disabled
|
||
className="select-field dose-unit-select"
|
||
aria-label={t("form.packageAmountUnitMl")}
|
||
>
|
||
<option value="ml">{t("form.packageAmountUnitMl")}</option>
|
||
</select>
|
||
</div>
|
||
</label>
|
||
)}
|
||
<label>
|
||
{t("form.expiryDate")}
|
||
<DateInput
|
||
value={form.expiryDate}
|
||
onChange={(e) => handleValueChange("expiryDate", e.target.value)}
|
||
placeholder={t("common.optional")}
|
||
/>
|
||
</label>
|
||
<label className={`full ${fieldErrors.notes ? "has-error" : ""}`}>
|
||
{t("form.notes")}
|
||
<textarea
|
||
value={form.notes}
|
||
onChange={(e) => handleValueChange("notes", e.target.value)}
|
||
placeholder={t("form.placeholders.notes")}
|
||
rows={2}
|
||
maxLength={FIELD_LIMITS.notes.max}
|
||
className="auto-resize"
|
||
onInput={(e) => {
|
||
const t = e.target as HTMLTextAreaElement;
|
||
t.style.height = "auto";
|
||
t.style.height = `${t.scrollHeight}px`;
|
||
}}
|
||
/>
|
||
{form.notes.length > 0 && (
|
||
<span className={`char-count ${form.notes.length > FIELD_LIMITS.notes.max * 0.9 ? "warning" : ""}`}>
|
||
{t("common.validation.tooLong", { current: form.notes.length, max: FIELD_LIMITS.notes.max })}
|
||
</span>
|
||
)}
|
||
{fieldErrors.notes && <span className="field-error">{fieldErrors.notes}</span>}
|
||
</label>
|
||
</div>
|
||
</div>
|
||
{/* end stock tab */}
|
||
|
||
<div className={`form-tab-panel${activeTab === "prescription" ? " active" : ""}`}>
|
||
<div className="full form-category">
|
||
<h4 className="form-category-title">{t("form.sections.prescription")}</h4>
|
||
<label className="full">
|
||
{t("prescription.enabled")}
|
||
<label className="toggle-switch small">
|
||
<input
|
||
type="checkbox"
|
||
checked={form.prescriptionEnabled}
|
||
onChange={(e) => handleValueChange("prescriptionEnabled", e.target.checked)}
|
||
/>
|
||
<span className="toggle-slider"></span>
|
||
</label>
|
||
</label>
|
||
{form.prescriptionEnabled && (
|
||
<>
|
||
<label className="prescription-field">
|
||
{t("prescription.authorizedRefills")}
|
||
<FormNumberStepper
|
||
value={form.prescriptionAuthorizedRefills}
|
||
onChange={(nextValue) => handleValueChange("prescriptionAuthorizedRefills", nextValue)}
|
||
min={0}
|
||
decrementLabel={decrementValueLabel}
|
||
incrementLabel={incrementValueLabel}
|
||
/>
|
||
</label>
|
||
<label className="prescription-field">
|
||
{t("prescription.remainingRefills")}
|
||
<FormNumberStepper
|
||
value={form.prescriptionRemainingRefills}
|
||
onChange={(nextValue) => handleValueChange("prescriptionRemainingRefills", nextValue)}
|
||
min={0}
|
||
decrementLabel={decrementValueLabel}
|
||
incrementLabel={incrementValueLabel}
|
||
/>
|
||
</label>
|
||
<label className="prescription-field">
|
||
{t("prescription.lowThreshold")}
|
||
<FormNumberStepper
|
||
value={form.prescriptionLowRefillThreshold}
|
||
onChange={(nextValue) => handleValueChange("prescriptionLowRefillThreshold", nextValue)}
|
||
min={0}
|
||
decrementLabel={decrementValueLabel}
|
||
incrementLabel={incrementValueLabel}
|
||
/>
|
||
</label>
|
||
<label className="prescription-field">
|
||
{t("prescription.expiryDate")}
|
||
<DateInput
|
||
value={form.prescriptionExpiryDate}
|
||
onChange={(e) => handleValueChange("prescriptionExpiryDate", e.target.value)}
|
||
/>
|
||
</label>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{/* end prescription tab */}
|
||
|
||
<div className={`form-tab-panel${activeTab === "schedule" ? " active" : ""}`}>
|
||
<div className="full form-category intake-section">
|
||
<div className="form-category-header">
|
||
<h4 className="form-category-title">{t("form.blisters.title")}</h4>
|
||
{!readOnlyView && (
|
||
<button
|
||
type="button"
|
||
className="primary icon-only tooltip-trigger"
|
||
onClick={() => addIntake(form.takenBy.length === 1 ? form.takenBy[0] : undefined)}
|
||
aria-label={t("form.blisters.addIntake")}
|
||
data-tooltip={t("form.blisters.addIntake")}
|
||
>
|
||
<Plus size={18} aria-hidden="true" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
{form.intakes.map((intake, idx) => {
|
||
const scheduleMode = getIntakeScheduleMode(intake);
|
||
const selectedWeekdays = intake.weekdays ?? [];
|
||
return (
|
||
<div key={idx} className="blister-row">
|
||
<div className="blister-inputs">
|
||
<label>
|
||
{getUsageLabel(intake.intakeUnit ?? "ml")}
|
||
<FormNumberStepper
|
||
value={intake.usage}
|
||
onChange={(nextValue) => setIntakeValue(idx, "usage", nextValue)}
|
||
min={allowFractionalIntake ? 0.5 : 1}
|
||
step={allowFractionalIntake ? 0.5 : 1}
|
||
allowDecimal={allowFractionalIntake}
|
||
decrementLabel={decrementValueLabel}
|
||
incrementLabel={incrementValueLabel}
|
||
/>
|
||
</label>
|
||
<label>
|
||
{t("form.blisters.scheduleMode")}
|
||
<select
|
||
className="select-field"
|
||
value={scheduleMode}
|
||
onChange={(e) =>
|
||
setIntakeValue(idx, "scheduleMode", e.target.value as "interval" | "weekdays")
|
||
}
|
||
>
|
||
<option value="interval">{t("form.blisters.scheduleModeInterval")}</option>
|
||
<option value="weekdays">{t("form.blisters.scheduleModeWeekdays")}</option>
|
||
</select>
|
||
</label>
|
||
{scheduleMode === "interval" ? (
|
||
<label>
|
||
{t("form.blisters.everyDays")}
|
||
<FormNumberStepper
|
||
value={intake.every}
|
||
onChange={(nextValue) => setIntakeValue(idx, "every", nextValue)}
|
||
min={1}
|
||
decrementLabel={decrementValueLabel}
|
||
incrementLabel={incrementValueLabel}
|
||
/>
|
||
</label>
|
||
) : (
|
||
<label className="taken-by-field">
|
||
{t("form.blisters.weekdays")}
|
||
<div className="badges">
|
||
{weekdayOptions.map((weekday) => {
|
||
const isSelected = selectedWeekdays.includes(weekday.value);
|
||
return (
|
||
<button
|
||
key={weekday.value}
|
||
type="button"
|
||
className={isSelected ? "pill clickable" : "pill clickable neutral"}
|
||
aria-pressed={isSelected}
|
||
title={weekday.longLabel}
|
||
onClick={() =>
|
||
setIntakeValue(
|
||
idx,
|
||
"weekdays",
|
||
toggleWeekdaySelection(selectedWeekdays, weekday.value)
|
||
)
|
||
}
|
||
>
|
||
{weekday.shortLabel}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
{!readOnlyView && hasWeekdaySelectionError(intake) && (
|
||
<span className="field-error">{t("form.blisters.weekdaysRequired")}</span>
|
||
)}
|
||
</label>
|
||
)}
|
||
<label>
|
||
{t("form.blisters.startDate")}
|
||
<DateInput
|
||
value={intake.startDate}
|
||
onChange={(e) => setIntakeValue(idx, "startDate", e.target.value)}
|
||
/>
|
||
</label>
|
||
<label>
|
||
{t("form.blisters.startTime")}
|
||
<input
|
||
type="time"
|
||
value={intake.startTime}
|
||
onChange={(e) => setIntakeValue(idx, "startTime", e.target.value)}
|
||
/>
|
||
</label>
|
||
{isLiquidContainerPackageType(form.packageType) && (
|
||
<label>
|
||
{t("form.blisters.intakeUnit")}
|
||
<select
|
||
className="select-field"
|
||
value={intake.intakeUnit}
|
||
onChange={(e) => setIntakeValue(idx, "intakeUnit", e.target.value as "ml" | "tsp" | "tbsp")}
|
||
>
|
||
<option value="ml">{t("form.blisters.intakeUnitMl")}</option>
|
||
<option value="tsp">{t("form.blisters.intakeUnitTsp")}</option>
|
||
<option value="tbsp">{t("form.blisters.intakeUnitTbsp")}</option>
|
||
</select>
|
||
</label>
|
||
)}
|
||
{form.takenBy.length === 0 ? null : (
|
||
<label className="taken-by-field" title={t("form.blisters.takenByTooltip")}>
|
||
{t("form.blisters.takenByIntake")}
|
||
<select
|
||
className="select-field"
|
||
value={intake.takenBy}
|
||
onChange={(e) => setIntakeValue(idx, "takenBy", e.target.value)}
|
||
>
|
||
{form.takenBy.map((person) => (
|
||
<option key={person} value={person}>
|
||
{person}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
)}
|
||
<div className="remind-toggle-row" title={t("form.blisters.remindTooltip")}>
|
||
<span className="blister-reminder-icon">
|
||
<Bell size={14} aria-hidden="true" />
|
||
</span>
|
||
<label className="toggle-switch small">
|
||
<input
|
||
type="checkbox"
|
||
checked={intake.intakeRemindersEnabled}
|
||
onChange={(e) => setIntakeValue(idx, "intakeRemindersEnabled", e.target.checked)}
|
||
/>
|
||
<span className="toggle-slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
{!readOnlyView && form.intakes.length > 1 && (
|
||
<button
|
||
type="button"
|
||
className="danger icon-only tooltip-trigger"
|
||
onClick={() => removeIntake(idx)}
|
||
aria-label={t("common.remove")}
|
||
data-tooltip={t("common.remove")}
|
||
>
|
||
<Minus size={18} aria-hidden="true" />
|
||
</button>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
{/* end schedule tab */}
|
||
</fieldset>
|
||
<div className="full align-end gap">
|
||
<button type="button" className="ghost" onClick={handleDesktopFormLeave}>
|
||
{readOnlyView || (formSaved && !formChanged) ? t("common.close") : t("common.cancel")}
|
||
</button>
|
||
{!readOnlyView && (
|
||
<button
|
||
type="submit"
|
||
disabled={saving || (!formChanged && (formSaved || !!editingId))}
|
||
className={
|
||
hasValidationErrors || dateConsistencyError || hasWeekdayScheduleError ? "has-validation-error" : ""
|
||
}
|
||
>
|
||
{formSaved && !formChanged ? t("common.saved") : t("common.save")}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</MedicationEditCoordinator>
|
||
|
||
<MedicationDialogs
|
||
mobileEditModal={
|
||
<MobileEditModal
|
||
show={showEditModal}
|
||
editingId={editingId}
|
||
form={form}
|
||
onFormChange={setForm}
|
||
medicationEnrichment={medicationEnrichmentViewModel}
|
||
onMedicationEnrichmentQueryChange={handleMedicationEnrichmentQueryChange}
|
||
onMedicationEnrichmentSearch={handleMedicationEnrichmentSearch}
|
||
onMedicationEnrichmentLoadMore={handleMedicationEnrichmentLoadMore}
|
||
onMedicationEnrichmentApply={handleMedicationEnrichmentApply}
|
||
onMedicationEnrichmentStrengthApply={handleMedicationEnrichmentStrengthApply}
|
||
onMedicationEnrichmentPackageApply={handleMedicationEnrichmentPackageApply}
|
||
fieldErrors={fieldErrors}
|
||
saving={saving}
|
||
formSaved={formSaved}
|
||
formChanged={formChanged}
|
||
hasValidationErrors={hasValidationErrors}
|
||
dateConsistencyError={dateConsistencyError}
|
||
readOnlyMode={readOnlyView}
|
||
takenByInput={takenByInput}
|
||
onTakenByInputChange={setTakenByInput}
|
||
existingPeople={existingPeople}
|
||
onAddTakenByPerson={addTakenByPerson}
|
||
onRemoveTakenByPerson={removeTakenByPerson}
|
||
onTakenByKeyDown={handleTakenByKeyDown}
|
||
onSetBlisterValue={setBlisterValue}
|
||
onAddBlister={addBlister}
|
||
onRemoveBlister={removeBlister}
|
||
onSetIntakeValue={setIntakeValue}
|
||
onAddIntake={addIntake}
|
||
onRemoveIntake={removeIntake}
|
||
onHandleValueChange={handleValueChange}
|
||
meds={allMeds}
|
||
onUploadMedImage={handleUploadMedImage}
|
||
onDeleteMedImage={handleDeleteMedImage}
|
||
imageUploadError={imageUploadError}
|
||
onClose={closeEditModal}
|
||
onResetForm={handleResetForm}
|
||
onSaveMedication={saveMedication}
|
||
/>
|
||
}
|
||
showUnsavedConfirm={showUnsavedConfirm}
|
||
unsavedTitle={t("common.unsavedChanges.title", "Unsaved Changes")}
|
||
unsavedMessage={t("common.unsavedChanges.message")}
|
||
unsavedConfirmLabel={t("common.unsavedChanges.leave", "Leave")}
|
||
unsavedCancelLabel={
|
||
unsavedConfirmSource === "mobile-edit" ? t("common.back") : t("common.unsavedChanges.stay", "Stay")
|
||
}
|
||
onConfirmClose={handleConfirmClose}
|
||
onCancelClose={handleCancelClose}
|
||
showObsoleteConfirm={showObsoleteConfirm}
|
||
obsoleteCandidate={obsoleteCandidate}
|
||
obsoleteTitle={t("medications.obsoleteModal.title")}
|
||
obsoleteMessage={t("medications.obsoleteModal.message", { name: obsoleteCandidate?.name ?? "" })}
|
||
obsoleteConfirmLabel={t("medications.list.markObsolete")}
|
||
obsoleteCancelLabel={t("common.cancel")}
|
||
onConfirmMarkObsolete={handleConfirmMarkObsolete}
|
||
onCancelMarkObsolete={handleCancelMarkObsolete}
|
||
showDeleteConfirm={showDeleteConfirm}
|
||
deleteCandidate={deleteCandidate}
|
||
deleteTitle={t("medications.deleteModal.title")}
|
||
deleteMessage={t("medications.deleteModal.message", { name: deleteCandidate?.name ?? "" })}
|
||
deleteConfirmLabel={t("common.delete")}
|
||
deleteCancelLabel={t("common.cancel")}
|
||
onConfirmDelete={handleConfirmDelete}
|
||
onCancelDelete={handleCancelDelete}
|
||
showEditModal={showEditModal}
|
||
lightboxImage={lightboxImage}
|
||
onCloseLightbox={() => setLightboxImage(null)}
|
||
showReportModal={showReportModal}
|
||
onCloseReportModal={() => setShowReportModal(false)}
|
||
medications={allMeds}
|
||
/>
|
||
</section>
|
||
);
|
||
}
|