med?.imageUrl && openLightbox(med.imageUrl, med.name)}
+ onClick={() => med?.imageUrl && openLightbox(med.imageUrl, getMedDisplayName(med))}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
- if (med?.imageUrl) openLightbox(med.imageUrl, med.name);
+ if (med?.imageUrl) openLightbox(med.imageUrl, getMedDisplayName(med));
}
}}
>
diff --git a/frontend/src/components/UserFilterModal.tsx b/frontend/src/components/UserFilterModal.tsx
index 62f1645..c2d7b0e 100644
--- a/frontend/src/components/UserFilterModal.tsx
+++ b/frontend/src/components/UserFilterModal.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
import { MedicationAvatar } from "../components";
import { useEscapeKey } from "../hooks/useEscapeKey";
import type { Coverage, Medication, StockThresholds } from "../types";
-import { getMedTotal, getPackageSize } from "../types";
+import { getMedDisplayName, getMedTotal, getPackageSize } from "../types";
import { formatNumber } from "../utils";
import { getSystemLocale } from "../utils/formatters";
import { getStockStatus } from "../utils/schedule";
@@ -64,7 +64,7 @@ export function UserFilterModal({
{userMeds.map((med) => {
- const medCoverage = coverage.all.find((c) => c.name === med.name);
+ const medCoverage = coverage.all.find((c) => c.name === getMedDisplayName(med));
// Fallback: if no coverage data (e.g. obsolete med), compute basic status from total pills
const status = medCoverage
? getStockStatus(medCoverage.daysLeft, medCoverage.medsLeft, settings)
@@ -97,10 +97,10 @@ export function UserFilterModal({
}
}}
>
-
+
-
{med.name}
- {med.genericName &&
{med.genericName}}
+
{getMedDisplayName(med)}
+ {med.name && med.genericName &&
{med.genericName}}
{personIntakes.length > 0 && (
{personIntakes.map((intake) => {
diff --git a/frontend/src/hooks/useMedicationForm.ts b/frontend/src/hooks/useMedicationForm.ts
index 6b3df69..13f3f89 100644
--- a/frontend/src/hooks/useMedicationForm.ts
+++ b/frontend/src/hooks/useMedicationForm.ts
@@ -115,9 +115,6 @@ export function useMedicationForm(): UseMedicationFormReturn {
// Skip validation for takenBy array (individual items validated on add)
if (field === "takenBy") return undefined;
const strValue = typeof value === "string" ? value : "";
- if (field === "name" && (!strValue || strValue.trim().length === 0)) {
- return t("common.validation.required");
- }
if ("max" in limits && strValue.length > limits.max) {
return t("common.validation.maxLength", { max: limits.max, current: strValue.length });
}
@@ -150,8 +147,16 @@ export function useMedicationForm(): UseMedicationFormReturn {
const error = validateField(f, form[f]);
if (error) errors[f] = error;
});
+ // Cross-field validation: at least one of name or genericName is required
+ const hasName = form.name && form.name.trim().length > 0;
+ const hasGenericName = form.genericName && form.genericName.trim().length > 0;
+ if (!hasName && !hasGenericName) {
+ const msg = t("common.validation.nameOrGenericRequired");
+ errors.name = errors.name || msg;
+ errors.genericName = errors.genericName || msg;
+ }
setFieldErrors(errors);
- }, [form.name, form.genericName, form.notes, validateField, form]);
+ }, [form.name, form.genericName, form.notes, validateField, form, t]);
const setBlisterValue = useCallback((idx: number, field: keyof FormBlister, value: string) => {
setForm((prev) => {
diff --git a/frontend/src/i18n/de.json b/frontend/src/i18n/de.json
index db5ca3a..acfcb7a 100644
--- a/frontend/src/i18n/de.json
+++ b/frontend/src/i18n/de.json
@@ -192,7 +192,7 @@
},
"placeholders": {
"commercial": "z.B. Ozempic",
- "generic": "z.B. Semaglutid (optional)",
+ "generic": "z.B. Semaglutid",
"takenBy": "Name eingeben und Enter drücken",
"addPerson": "Weitere Person hinzufügen...",
"weight": "z.B. 240",
@@ -436,6 +436,7 @@
},
"validation": {
"required": "Dieses Feld ist erforderlich",
+ "nameOrGenericRequired": "Handelsname oder Wirkstoff ist erforderlich",
"maxLength": "Maximal {{max}} Zeichen ({{current}}/{{max}})",
"tooLong": "{{current}}/{{max}} Zeichen"
},
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 3373d51..b574b7e 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -192,7 +192,7 @@
},
"placeholders": {
"commercial": "e.g. Ozempic",
- "generic": "e.g. Semaglutide (optional)",
+ "generic": "e.g. Semaglutide",
"takenBy": "Type name and press Enter",
"addPerson": "Add another person...",
"weight": "e.g. 240",
@@ -436,6 +436,7 @@
},
"validation": {
"required": "This field is required",
+ "nameOrGenericRequired": "Either commercial name or generic name is required",
"maxLength": "Maximum {{max}} characters ({{current}}/{{max}})",
"tooLong": "{{current}}/{{max}} characters"
},
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index aeb1bdd..ba9b526 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -8,6 +8,7 @@ import { useAppContext } from "../context";
import { useModalHistory } from "../hooks";
import { formatNumber, getExpiryClass, getSystemLocale } from "../utils/formatters";
import { expandDoseIds, getStockStatus, isDoseDismissed } from "../utils/schedule";
+import { getMedDisplayName } from "../types";
import {
formatFullBlisters,
formatOpenBlisterAndLoose,
@@ -118,7 +119,7 @@ export function DashboardPage() {
})
.map((med) => ({
id: med.id,
- name: med.name,
+ name: getMedDisplayName(med),
remainingRefills: med.prescriptionRemainingRefills ?? 0,
threshold: med.prescriptionLowRefillThreshold ?? 1,
}))
@@ -250,7 +251,7 @@ export function DashboardPage() {
{t("dashboard.reminders.needsRefill")}:
{reminderData.lowStockMeds.map((med, idx) => {
- const medication = meds.find((m) => m.name === med.name);
+ const medication = meds.find((m) => getMedDisplayName(m) === med.name);
const cov = coverage.all.find((c) => c.name === med.name);
const status = cov ? getStockStatus(cov.daysLeft, cov.medsLeft, stockThresholds) : null;
const textClass =
@@ -322,7 +323,7 @@ export function DashboardPage() {
(() => {
const names = reminderData.lastStockSent!.medNames!.split(", ");
return names.map((name, idx) => {
- const medication = meds.find((m) => m.name === name);
+ const medication = meds.find((m) => getMedDisplayName(m) === name);
return (
{idx > 0 && ", "}
@@ -353,7 +354,7 @@ export function DashboardPage() {
{reminderData.lastIntakeSent.medName &&
(() => {
- const medication = meds.find((m) => m.name === reminderData.lastIntakeSent!.medName);
+ const medication = meds.find((m) => getMedDisplayName(m) === reminderData.lastIntakeSent!.medName);
return medication ? (
{t("dashboard.reorder.lowWarningPrefix")}{" "}
{lowStockMeds.map((c, idx) => {
- const med = meds.find((m) => m.name === c.name);
+ const med = meds.find((m) => getMedDisplayName(m) === c.name);
const status = getStockStatus(c.daysLeft, c.medsLeft, stockThresholds);
const textClass =
status.className === "danger"
@@ -485,7 +486,7 @@ export function DashboardPage() {
{coverage.all.map((row) => {
const status = getStockStatus(row.daysLeft, row.medsLeft, stockThresholds);
- const med = meds.find((m) => m.name === row.name);
+ const med = meds.find((m) => getMedDisplayName(m) === row.name);
const expiryClass = getExpiryClass(med?.expiryDate, settings.expiryWarningDays);
const textClass =
status.className === "danger"
@@ -673,7 +674,7 @@ export function DashboardPage() {
// Count missed doses that are NOT dismissed (for warning icon)
const missedNotDismissedCount = day.meds.reduce((count, item) => {
- const med = meds.find((m) => m.name === item.medName);
+ const med = meds.find((m) => getMedDisplayName(m) === item.medName);
const dismissedUntilDate = med?.dismissedUntil ?? undefined;
return (
count +
@@ -729,7 +730,7 @@ export function DashboardPage() {
{!isCollapsed &&
day.meds.map((item) => {
- const med = meds.find((m) => m.name === item.medName);
+ const med = meds.find((m) => getMedDisplayName(m) === item.medName);
const medCov = coverageByMed[item.medName];
const isEmpty = medCov ? medCov.medsLeft <= 0 : false;
const status = medCov
@@ -986,7 +987,7 @@ export function DashboardPage() {
{!isCollapsed &&
day.meds.map((item) => {
const medCoverage = coverageByMed[item.medName];
- const med = meds.find((m) => m.name === item.medName);
+ const med = meds.find((m) => getMedDisplayName(m) === item.medName);
const depletionTime = depletionByMed[item.medName];
const isEmpty = medCoverage ? medCoverage.medsLeft <= 0 : false;
const willBeOutOfStock = typeof depletionTime === "number" && item.lastWhen > depletionTime;
@@ -1217,7 +1218,7 @@ export function DashboardPage() {
{!isCollapsed &&
day.meds.map((item) => {
const medCoverage = coverageByMed[item.medName];
- const med = meds.find((m) => m.name === item.medName);
+ const med = meds.find((m) => getMedDisplayName(m) === item.medName);
const depletionTime = depletionByMed[item.medName];
const _isEmpty = medCoverage ? medCoverage.medsLeft <= 0 : false;
const willBeOutOfStock = typeof depletionTime === "number" && item.lastWhen > depletionTime;
diff --git a/frontend/src/pages/MedicationsPage.tsx b/frontend/src/pages/MedicationsPage.tsx
index 8900757..aa01e42 100644
--- a/frontend/src/pages/MedicationsPage.tsx
+++ b/frontend/src/pages/MedicationsPage.tsx
@@ -18,7 +18,7 @@ import { useAuth } from "../components/Auth";
import { useAppContext, useUnsavedChanges } from "../context";
import { useMedicationForm, useModalHistory, useUnsavedChangesWarning } from "../hooks";
import type { DoseUnit, Medication } from "../types";
-import { DOSE_UNITS, FIELD_LIMITS, getPackageSize } from "../types";
+import { DOSE_UNITS, FIELD_LIMITS, getPackageSize, getMedDisplayName } from "../types";
import { combineDateAndTime, formatDate, formatDateTime, formatNumber } from "../utils/formatters";
import { MAX_IMAGE_UPLOAD_BYTES, resolveImageUploadError } from "../utils/image-upload";
import { log } from "../utils/logger";
@@ -836,19 +836,19 @@ export function MedicationsPage() {
- med.imageUrl && setLightboxImage({ src: `/api/images/${med.imageUrl}`, alt: med.name })
+ med.imageUrl && setLightboxImage({ src: `/api/images/${med.imageUrl}`, alt: getMedDisplayName(med) })
}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
- if (med.imageUrl) setLightboxImage({ src: `/api/images/${med.imageUrl}`, alt: med.name });
+ if (med.imageUrl) setLightboxImage({ src: `/api/images/${med.imageUrl}`, alt: getMedDisplayName(med) });
}
}}
>
-
+
-
{med.name}
- {med.genericName &&
{med.genericName}
}
+
{getMedDisplayName(med)}
+ {med.name && med.genericName &&
{med.genericName}
}
@@ -910,10 +910,10 @@ export function MedicationsPage() {
)}
{t("medications.details.stock")}:{" "}
- {coverageByMed[med.name] ? Math.round(coverageByMed[med.name].medsLeft) : getPackageSize(med)} /{" "}
+ {coverageByMed[getMedDisplayName(med)] ? Math.round(coverageByMed[getMedDisplayName(med)].medsLeft) : getPackageSize(med)} /{" "}
{getPackageSize(med)} {getPackageSize(med) === 1 ? t("common.pill") : t("common.pills")}
- {(coverageByMed[med.name]
- ? Math.round(coverageByMed[med.name].medsLeft)
+ {(coverageByMed[getMedDisplayName(med)]
+ ? Math.round(coverageByMed[getMedDisplayName(med)].medsLeft)
: getPackageSize(med)) > getPackageSize(med) && (
- med.imageUrl && setLightboxImage({ src: `/api/images/${med.imageUrl}`, alt: med.name })
+ med.imageUrl && setLightboxImage({ src: `/api/images/${med.imageUrl}`, alt: getMedDisplayName(med) })
}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
if (med.imageUrl)
- setLightboxImage({ src: `/api/images/${med.imageUrl}`, alt: med.name });
+ setLightboxImage({ src: `/api/images/${med.imageUrl}`, alt: getMedDisplayName(med) });
}
}}
>
-
+
-
{med.name}
- {med.genericName &&
{med.genericName}
}
+
{getMedDisplayName(med)}
+ {med.name && med.genericName &&
{med.genericName}
}
@@ -1106,21 +1106,26 @@ export function MedicationsPage() {
onBlur={() => setShowNameValidation(true)}
placeholder={t("form.placeholders.commercial")}
maxLength={FIELD_LIMITS.name.max}
- required={!readOnlyView}
/>
{!readOnlyView && showNameValidation && fieldErrors.name && (
{fieldErrors.name}
)}
-
{plannerRows.map((row) => {
const med =
- meds.find((m) => m.id === row.medicationId) || meds.find((m) => m.name === row.medicationName);
+ meds.find((m) => m.id === row.medicationId) || meds.find((m) => getMedDisplayName(m) === row.medicationName);
const remainingRefills = med?.prescriptionEnabled ? (med.prescriptionRemainingRefills ?? 0) : null;
return (
{
- const med = meds.find((m) => m.name === item.medName);
+ const med = meds.find((m) => getMedDisplayName(m) === item.medName);
const dismissedUntilDate = med?.dismissedUntil ?? undefined;
return (
count +
@@ -171,7 +172,7 @@ export function SchedulePage() {
{!isCollapsed &&
day.meds.map((item) => {
- const med = meds.find((m) => m.name === item.medName);
+ const med = meds.find((m) => getMedDisplayName(m) === item.medName);
const medCov = coverageByMed[item.medName];
const isEmpty = medCov ? medCov.medsLeft <= 0 : false;
const itemDoseIds = expandDoseIds(item.doses);
@@ -333,7 +334,7 @@ export function SchedulePage() {
{day.meds.map((item) => {
const medCoverage = coverageByMed[item.medName];
const isEmpty = medCoverage ? medCoverage.medsLeft <= 0 : false;
- const med = meds.find((m) => m.name === item.medName);
+ 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;
diff --git a/frontend/src/test/hooks/useMedicationForm.test.ts b/frontend/src/test/hooks/useMedicationForm.test.ts
index d59b459..851ccaf 100644
--- a/frontend/src/test/hooks/useMedicationForm.test.ts
+++ b/frontend/src/test/hooks/useMedicationForm.test.ts
@@ -123,7 +123,7 @@ describe("useMedicationForm", () => {
expect(result.current.formChanged).toBe(false);
await waitFor(() => {
- expect(result.current.fieldErrors.name).toBe("common.validation.required");
+ expect(result.current.fieldErrors.name).toBe("common.validation.nameOrGenericRequired");
expect(result.current.hasValidationErrors).toBe(true);
});
});
@@ -131,7 +131,8 @@ describe("useMedicationForm", () => {
it("validates name required and max length fields", () => {
const { result } = renderHook(() => useMedicationForm());
- expect(result.current.validateField("name", "")).toBe("common.validation.required");
+ // Cross-field validation: empty name alone returns no per-field error
+ expect(result.current.validateField("name", "")).toBeUndefined();
expect(result.current.validateField("takenBy", ["Alice"])).toBeUndefined();
const tooLongGeneric = "a".repeat(101);
diff --git a/frontend/src/test/types.test.ts b/frontend/src/test/types.test.ts
index 768cb0e..4e051ba 100644
--- a/frontend/src/test/types.test.ts
+++ b/frontend/src/test/types.test.ts
@@ -152,7 +152,7 @@ describe("getPackageSize", () => {
describe("FIELD_LIMITS", () => {
it("has correct limits for name field", () => {
- expect(FIELD_LIMITS.name.min).toBe(1);
+ expect(FIELD_LIMITS.name.min).toBe(0);
expect(FIELD_LIMITS.name.max).toBe(100);
});
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 645ae46..871d210 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -230,12 +230,17 @@ export type ExpiredLinkData = {
// Field Validation Limits (must match backend)
// =============================================================================
export const FIELD_LIMITS = {
- name: { min: 1, max: 100 },
+ name: { min: 0, max: 100 },
genericName: { max: 100 },
takenBy: { max: 100 },
notes: { max: 2000 },
} as const;
+/** Returns the best display name for a medication: commercial name, or generic name as fallback */
+export function getMedDisplayName(med: { name: string; genericName?: string | null }): string {
+ return med.name || med.genericName || "";
+}
+
// =============================================================================
// Helper Functions for Medication Calculations
// =============================================================================
diff --git a/frontend/src/utils/ics.ts b/frontend/src/utils/ics.ts
index 2ab8fec..8018623 100644
--- a/frontend/src/utils/ics.ts
+++ b/frontend/src/utils/ics.ts
@@ -3,6 +3,7 @@
// =============================================================================
import type { Medication } from "../types";
+import { getMedDisplayName } from "../types";
/**
* Format a Date for ICS format (YYYYMMDDTHHMMSSZ)
@@ -18,6 +19,7 @@ function formatICSDate(date: Date): string {
* Generate and download an ICS calendar file for a medication's schedule
*/
export function generateICS(med: Medication): void {
+ const displayName = getMedDisplayName(med);
const events = med.blisters
.map((blister, idx) => {
const start = new Date(blister.start);
@@ -25,9 +27,9 @@ export function generateICS(med: Medication): void {
const interval = blister.every;
const pillInfo = `${blister.usage} pill${blister.usage !== 1 ? "s" : ""}${med.pillWeightMg ? ` (${blister.usage * med.pillWeightMg} mg)` : ""}`;
- const summary = `💊 ${med.name} - ${pillInfo}`;
+ const summary = `💊 ${displayName} - ${pillInfo}`;
const description = [
- `Medication: ${med.name}`,
+ `Medication: ${displayName}`,
med.genericName ? `Generic: ${med.genericName}` : "",
med.takenBy && med.takenBy.length > 0 ? `For: ${med.takenBy.join(", ")}` : "",
`Dosage: ${pillInfo}`,
@@ -48,7 +50,7 @@ DESCRIPTION:${description}
BEGIN:VALARM
TRIGGER:-PT5M
ACTION:DISPLAY
-DESCRIPTION:Time to take ${med.name}
+DESCRIPTION:Time to take ${displayName}
END:VALARM
END:VEVENT`;
})
@@ -59,7 +61,7 @@ VERSION:2.0
PRODID:-//MedAssist-ng//Medication Schedule//EN
CALSCALE:GREGORIAN
METHOD:PUBLISH
-X-WR-CALNAME:${med.name} Schedule
+X-WR-CALNAME:${displayName} Schedule
${events}
END:VCALENDAR`;
@@ -67,7 +69,7 @@ END:VCALENDAR`;
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
- link.download = `${med.name.replace(/[^a-zA-Z0-9]/g, "_")}_schedule.ics`;
+ link.download = `${displayName.replace(/[^a-zA-Z0-9]/g, "_")}_schedule.ics`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
diff --git a/frontend/src/utils/schedule.ts b/frontend/src/utils/schedule.ts
index f3ab444..0ae6592 100644
--- a/frontend/src/utils/schedule.ts
+++ b/frontend/src/utils/schedule.ts
@@ -3,7 +3,7 @@
// =============================================================================
import type { Blister, Coverage, Intake, Medication, ScheduleEvent, StockStatus, StockThresholds } from "../types";
-import { getMedTotal } from "../types";
+import { getMedDisplayName, getMedTotal } from "../types";
/**
* Get intakes for a medication, preferring new intakes format over legacy blisters
@@ -63,7 +63,7 @@ export function buildSchedulePreview(
const dateOnlyMs = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
events.push({
id: `${med.id}-${idx}-${dateOnlyMs}`,
- medName: med.name,
+ medName: getMedDisplayName(med),
takenBy: intake.takenBy, // Per-intake takenBy (string | null)
usage: intake.usage,
when: whenMs,
@@ -267,10 +267,11 @@ export function calculateCoverage(
depletionMs !== null
? new Date(depletionMs).toLocaleDateString(locale, { weekday: "short", day: "2-digit", month: "short" })
: null;
- const nextEvent = events.find((e) => e.medName === m.name);
+ const displayName = getMedDisplayName(m);
+ const nextEvent = events.find((e) => e.medName === displayName);
return {
- name: m.name,
+ name: displayName,
medsLeft: Number(medsLeft.toFixed(1)),
daysLeft,
depletionDate,