fix: align frontend types and tests for react 19 (#339)

frontend/src/components/MedicationAvatar.tsx

@@ -2,7 +2,7 @@
 // MedicationAvatar Component
 // =============================================================================
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export type MedicationAvatarProps = {
 	name: string;
@@ -12,8 +12,11 @@ export type MedicationAvatarProps = {
 
 export function MedicationAvatar({ name, imageUrl, size = "sm" }: MedicationAvatarProps) {
 	const [thumbFailed, setThumbFailed] = useState(false);
+	const previousImageUrlRef = useRef(imageUrl);
 
 	useEffect(() => {
+		if (previousImageUrlRef.current === imageUrl) return;
+		previousImageUrlRef.current = imageUrl;
 		setThumbFailed(false);
 	}, [imageUrl]);
 

frontend/src/components/MobileEditModal.tsx

@@ -96,9 +96,9 @@ export function MobileEditModal({
 	onAddTakenByPerson,
 	onRemoveTakenByPerson,
 	onTakenByKeyDown,
-	_onSetBlisterValue,
-	_onAddBlister,
-	_onRemoveBlister,
+	onSetBlisterValue: _onSetBlisterValue,
+	onAddBlister: _onAddBlister,
+	onRemoveBlister: _onRemoveBlister,
 	onSetIntakeValue,
 	onAddIntake,
 	onRemoveIntake,
@@ -108,7 +108,7 @@ export function MobileEditModal({
 	onDeleteMedImage,
 	imageUploadError,
 	onClose,
-	_onResetForm,
+	onResetForm: _onResetForm,
 	onSaveMedication,
 }: MobileEditModalProps) {
 	const { t } = useTranslation();
@@ -402,7 +402,7 @@ export function MobileEditModal({
 											<select
 												className="package-type-select"
 												value={form.packageType}
-												onChange={(e) => onHandleValueChange("packageType", e.target.value)}
+												onChange={(e) => onHandleValueChange("packageType", e.target.value as FormState["packageType"])}
 											>
 												<option value="blister">{t("form.packageTypeBlister")}</option>
 												<option value="bottle">{t("form.packageTypeBottle")}</option>

frontend/src/components/SharedSchedule.tsx

@@ -21,11 +21,11 @@ import { MedicationAvatar } from "./MedicationAvatar";
 function getStockStatus(
 	daysLeft: number | null,
 	medsLeft: number,
-	thresholds: { lowStockDays: number; normalStockDays: number; highStockDays: number; reminderDaysBefore: number }
+	thresholds: { lowStockDays: number; normalStockDays: number; highStockDays: number; criticalStockDays: number }
 ) {
 	if (medsLeft <= 0 || daysLeft === 0) return { className: "danger", label: "status.outOfStock" };
 	if (daysLeft === null) return { className: "success", label: "status.noSchedule" };
-	if (daysLeft <= thresholds.reminderDaysBefore) return { className: "danger", label: "status.criticalStock" };
+	if (daysLeft <= thresholds.criticalStockDays) return { className: "danger", label: "status.criticalStock" };
 	if (daysLeft < thresholds.lowStockDays) return { className: "warning", label: "status.lowStock" };
 	if (daysLeft >= thresholds.highStockDays) return { className: "high", label: "status.highStock" };
 	return { className: "success", label: "status.normal" };