feat: frontend improvements - shared schedule, bottle type, settings UI, planner notifications (#146)
- Rewrite SharedSchedule to match DashboardPage rendering with time-based consumption - Add bottle package type support across all views (MedDetail, Refill, Planner, Dashboard) - Redesign settings page with colored threshold chips, validation, and stock reminder display - Add shareStockStatus toggle and send manual reminder button - Pill/pills singular/plural consistency across all views - Planner send notification via push (Shoutrrr) in addition to email - Stock overflow warning and past-missed day styling - Update README: bottles in Smart Inventory, push in Trip Planner, new ENV section - 708 passing frontend tests including new coverage for all changes
This commit is contained in:
Daniel Volz
GitHub
@@ -1,3 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ConfirmModal, MedicationAvatar } from "../components";
|
||||
import { useAuth } from "../components/Auth";
|
||||
@@ -80,12 +81,16 @@ function getReminderStatusData(
|
||||
_lastNotificationChannel: string | null,
|
||||
lastReminderMedName: string | null,
|
||||
lastReminderTakenBy: string | null,
|
||||
lastStockReminderSent: string | null,
|
||||
_lastStockReminderChannel: string | null,
|
||||
lastStockReminderMedNames: string | null,
|
||||
t: (key: string, options?: Record<string, unknown>) => string,
|
||||
locale: string
|
||||
): {
|
||||
status: { text: string; className: string };
|
||||
lowStockMeds: { name: string; daysLeft: number; isCritical: boolean }[];
|
||||
lastSent: { date: string; medName: string | null; takenBy: string | null } | null;
|
||||
lastStockSent: { date: string; medNames: string | null } | null;
|
||||
lastIntakeSent: { date: string; medName: string | null; takenBy: string | null } | null;
|
||||
} {
|
||||
const criticalCount = lowCoverage.length;
|
||||
const lowCount = allCoverage.filter((c) => {
|
||||
@@ -141,25 +146,40 @@ function getReminderStatusData(
|
||||
// Convert to array and sort by days left (most urgent first)
|
||||
const lowStockMeds = Array.from(lowStockMap.values()).sort((a, b) => a.daysLeft - b.daysLeft);
|
||||
|
||||
// Parse last sent info
|
||||
let lastSent: { date: string; medName: string | null; takenBy: string | null } | null = null;
|
||||
if (lastAutoEmailSent) {
|
||||
const lastSentDate = new Date(lastAutoEmailSent);
|
||||
const formattedDate = lastSentDate.toLocaleDateString(locale, {
|
||||
// Parse last stock reminder sent info (from dedicated stock tracking columns)
|
||||
let lastStockSent: { date: string; medNames: string | null } | null = null;
|
||||
if (lastStockReminderSent) {
|
||||
const sentDate = new Date(lastStockReminderSent);
|
||||
const formattedDate = sentDate.toLocaleDateString(locale, {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
lastStockSent = {
|
||||
date: formattedDate,
|
||||
medNames: lastStockReminderMedNames,
|
||||
};
|
||||
}
|
||||
|
||||
lastSent = {
|
||||
// Parse last intake reminder sent info (from intake tracking columns)
|
||||
let lastIntakeSent: { date: string; medName: string | null; takenBy: string | null } | null = null;
|
||||
if (lastAutoEmailSent) {
|
||||
const sentDate = new Date(lastAutoEmailSent);
|
||||
const formattedDate = sentDate.toLocaleDateString(locale, {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
});
|
||||
lastIntakeSent = {
|
||||
date: formattedDate,
|
||||
medName: lastReminderMedName,
|
||||
takenBy: lastReminderTakenBy,
|
||||
};
|
||||
}
|
||||
|
||||
return { status, lowStockMeds, lastSent };
|
||||
return { status, lowStockMeds, lastStockSent, lastIntakeSent };
|
||||
}
|
||||
|
||||
export function DashboardPage() {
|
||||
@@ -199,6 +219,7 @@ export function DashboardPage() {
|
||||
openShareDialog,
|
||||
openScheduleLightbox,
|
||||
stockThresholds,
|
||||
loadSettings,
|
||||
} = useAppContext();
|
||||
|
||||
// Get structured reminder data
|
||||
@@ -212,6 +233,9 @@ export function DashboardPage() {
|
||||
settings.lastNotificationChannel,
|
||||
settings.lastReminderMedName,
|
||||
settings.lastReminderTakenBy,
|
||||
settings.lastStockReminderSent,
|
||||
settings.lastStockReminderChannel,
|
||||
settings.lastStockReminderMedNames,
|
||||
t,
|
||||
getSystemLocale(i18n.language)
|
||||
);
|
||||
@@ -225,6 +249,50 @@ export function DashboardPage() {
|
||||
(settings.shoutrrrEnabled && settings.shoutrrrIntakeReminders);
|
||||
const anyRemindersEnabled = stockRemindersEnabled || intakeRemindersEnabled;
|
||||
|
||||
// Manual reminder send state
|
||||
const [sendingReminder, setSendingReminder] = useState(false);
|
||||
const [reminderResult, setReminderResult] = useState<{ success: boolean; message: string } | null>(null);
|
||||
|
||||
async function sendManualReminder() {
|
||||
if (!stockRemindersEnabled || reminderData.lowStockMeds.length === 0) return;
|
||||
setSendingReminder(true);
|
||||
setReminderResult(null);
|
||||
|
||||
try {
|
||||
const lowStock = reminderData.lowStockMeds.map((m) => {
|
||||
const cov = coverage.all.find((c) => c.name === m.name);
|
||||
return {
|
||||
name: m.name,
|
||||
medsLeft: cov?.medsLeft ?? 0,
|
||||
daysLeft: m.daysLeft,
|
||||
depletionDate: cov?.depletionDate ?? null,
|
||||
isCritical: m.isCritical,
|
||||
};
|
||||
});
|
||||
|
||||
const res = await fetch("/api/reminder/send-email", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
credentials: "include",
|
||||
body: JSON.stringify({
|
||||
email: settings.notificationEmail,
|
||||
lowStock,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
setReminderResult({ success: true, message: data.message || t("common.sent") });
|
||||
// Refresh settings so "Last stock reminder" row appears immediately
|
||||
loadSettings();
|
||||
} else {
|
||||
setReminderResult({ success: false, message: data.error || t("common.sendFailed") });
|
||||
}
|
||||
} catch {
|
||||
setReminderResult({ success: false, message: t("common.networkError") });
|
||||
}
|
||||
setSendingReminder(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{anyRemindersEnabled && (
|
||||
@@ -234,14 +302,11 @@ export function DashboardPage() {
|
||||
<NotificationBellIcon />
|
||||
</span>
|
||||
<span className="reminder-status-title">{t("dashboard.reminders.active")}</span>
|
||||
{reminderData.lowStockMeds.length === 0 && (
|
||||
<span className={`reminder-status-badge ${reminderData.status.className}`}>
|
||||
{reminderData.status.className === "success" && "✓ "}
|
||||
{reminderData.status.text}
|
||||
</span>
|
||||
)}
|
||||
<span className={`status-chip small ${reminderData.status.className}`}>{reminderData.status.text}</span>
|
||||
</div>
|
||||
{(reminderData.lowStockMeds.length > 0 || (intakeRemindersEnabled && reminderData.lastSent)) && (
|
||||
{(reminderData.lowStockMeds.length > 0 ||
|
||||
(stockRemindersEnabled && reminderData.lastStockSent) ||
|
||||
(intakeRemindersEnabled && reminderData.lastIntakeSent)) && (
|
||||
<div className="reminder-status-details">
|
||||
{stockRemindersEnabled && reminderData.lowStockMeds.length > 0 && (
|
||||
<div className="reminder-status-row">
|
||||
@@ -276,30 +341,68 @@ export function DashboardPage() {
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{intakeRemindersEnabled && reminderData.lastSent && (
|
||||
{stockRemindersEnabled && reminderData.lastStockSent && (
|
||||
<div className="reminder-status-row">
|
||||
<span className="reminder-status-label">{t("dashboard.reminders.lastStockSent")}:</span>
|
||||
<span className="reminder-status-value">
|
||||
{reminderData.lastStockSent.medNames &&
|
||||
(() => {
|
||||
// Extract first med name (medNames may be "Name (+N)")
|
||||
const rawName = reminderData.lastStockSent!.medNames!;
|
||||
const firstName = rawName.replace(/\s*\(\+\d+\)$/, "");
|
||||
const suffix = rawName.includes("(+") ? rawName.slice(firstName.length) : "";
|
||||
const medication = meds.find((m) => m.name === firstName);
|
||||
return medication ? (
|
||||
<>
|
||||
<span className="med-link clickable" onClick={() => openMedDetail(medication)}>
|
||||
{firstName}
|
||||
</span>
|
||||
{suffix && <span className="reminder-med-name">{suffix}</span>}
|
||||
</>
|
||||
) : (
|
||||
<span className="reminder-med-name">{rawName}</span>
|
||||
);
|
||||
})()}
|
||||
<span className="reminder-date"> {reminderData.lastStockSent.date}</span>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{intakeRemindersEnabled && reminderData.lastIntakeSent && (
|
||||
<div className="reminder-status-row">
|
||||
<span className="reminder-status-label">{t("dashboard.reminders.lastSent")}:</span>
|
||||
<span className="reminder-status-value">
|
||||
{reminderData.lastSent.medName &&
|
||||
{reminderData.lastIntakeSent.medName &&
|
||||
(() => {
|
||||
const medication = meds.find((m) => m.name === reminderData.lastSent!.medName);
|
||||
const medication = meds.find((m) => m.name === reminderData.lastIntakeSent!.medName);
|
||||
return medication ? (
|
||||
<span className="med-link clickable" onClick={() => openMedDetail(medication)}>
|
||||
{reminderData.lastSent!.medName}
|
||||
{reminderData.lastIntakeSent!.medName}
|
||||
</span>
|
||||
) : (
|
||||
<span className="reminder-med-name">{reminderData.lastSent!.medName}</span>
|
||||
<span className="reminder-med-name">{reminderData.lastIntakeSent!.medName}</span>
|
||||
);
|
||||
})()}
|
||||
{reminderData.lastSent.takenBy && (
|
||||
<span className="reminder-taken-by"> ({reminderData.lastSent.takenBy})</span>
|
||||
{reminderData.lastIntakeSent.takenBy && (
|
||||
<span className="reminder-taken-by"> ({reminderData.lastIntakeSent.takenBy})</span>
|
||||
)}
|
||||
<span className="reminder-date"> {reminderData.lastSent.date}</span>
|
||||
<span className="reminder-date"> {reminderData.lastIntakeSent.date}</span>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{stockRemindersEnabled && reminderData.lowStockMeds.length > 0 && (
|
||||
<div className="reminder-send-row">
|
||||
<button type="button" className="ghost" onClick={sendManualReminder} disabled={sendingReminder}>
|
||||
{sendingReminder ? t("common.sending") : t("dashboard.reorder.sendReminder")}
|
||||
</button>
|
||||
{reminderResult && (
|
||||
<span className={`reminder-send-result ${reminderResult.success ? "success" : "error"}`}>
|
||||
{reminderResult.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
{/* Reorder Reminder card: Only show when reminders are NOT enabled (otherwise Reminder Bar shows the same info) */}
|
||||
@@ -568,7 +671,7 @@ export function DashboardPage() {
|
||||
return (
|
||||
<div
|
||||
key={day.dateStr}
|
||||
className={`day-block past ${isCollapsed ? "collapsed" : ""} ${allDayTaken ? "all-taken" : ""} stock-${worstStatus}`}
|
||||
className={`day-block past ${isCollapsed ? "collapsed" : ""} ${allDayTaken ? "all-taken" : allDoseIds.length > 0 ? "past-missed" : ""}`}
|
||||
>
|
||||
<div
|
||||
className="day-divider clickable"
|
||||
@@ -626,9 +729,7 @@ export function DashboardPage() {
|
||||
)}
|
||||
</div>
|
||||
<div className="tag-row">
|
||||
<span className="tag subtle">
|
||||
{item.total} {t("common.pills")} {t("common.total")}
|
||||
</span>
|
||||
<span className="tag subtle">{t("common.pillsTotal", { count: item.total })}</span>
|
||||
{status && (
|
||||
<span className={`status-chip small ${status.className}`}>{t(status.label)}</span>
|
||||
)}
|
||||
@@ -778,9 +879,7 @@ export function DashboardPage() {
|
||||
)}
|
||||
</div>
|
||||
<div className="tag-row">
|
||||
<span className="tag subtle">
|
||||
{item.total} {t("common.pills")} {t("common.total")}
|
||||
</span>
|
||||
<span className="tag subtle">{t("common.pillsTotal", { count: item.total })}</span>
|
||||
{status && (
|
||||
<span className={`status-chip small ${status.className}`}>{t(status.label)}</span>
|
||||
)}
|
||||
@@ -967,9 +1066,7 @@ export function DashboardPage() {
|
||||
)}
|
||||
</div>
|
||||
<div className="tag-row">
|
||||
<span className="tag subtle">
|
||||
{item.total} {t("common.pills")} {t("common.total")}
|
||||
</span>
|
||||
<span className="tag subtle">{t("common.pillsTotal", { count: item.total })}</span>
|
||||
{status && (
|
||||
<span className={`status-chip small ${status.className}`}>{t(status.label)}</span>
|
||||
)}
|
||||
|
||||
@@ -340,22 +340,46 @@ export function MedicationsPage() {
|
||||
</div>
|
||||
<div className="med-details">
|
||||
<span>
|
||||
{t("medications.details.packs")}: <strong>{med.packCount}</strong>
|
||||
</span>
|
||||
<span>
|
||||
{t("medications.details.blisters")}: <strong>{med.blistersPerPack}</strong>
|
||||
</span>
|
||||
<span>
|
||||
{t("medications.details.pillsPerBlister")}: <strong>{med.pillsPerBlister}</strong>
|
||||
</span>
|
||||
<span>
|
||||
{t("medications.details.loose")}: <strong>{med.looseTablets}</strong>
|
||||
{t("medications.details.type")}:{" "}
|
||||
<strong>
|
||||
{med.packageType === "bottle" ? t("form.packageTypeBottle") : t("form.packageTypeBlister")}
|
||||
</strong>
|
||||
</span>
|
||||
{med.packageType === "blister" ? (
|
||||
<>
|
||||
<span>
|
||||
{t("medications.details.packs")}: <strong>{med.packCount}</strong>
|
||||
</span>
|
||||
<span>
|
||||
{t("medications.details.blisters")}: <strong>{med.blistersPerPack}</strong>
|
||||
</span>
|
||||
<span>
|
||||
{t("medications.details.pillsPerBlister")}: <strong>{med.pillsPerBlister}</strong>
|
||||
</span>
|
||||
<span>
|
||||
{t("medications.details.loose")}: <strong>{med.looseTablets}</strong>
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span>
|
||||
{t("medications.details.totalCapacity")}: <strong>{med.totalPills ?? med.looseTablets}</strong>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="med-total">
|
||||
{t("medications.details.stock")}:{" "}
|
||||
{coverageByMed[med.name] ? Math.round(coverageByMed[med.name].medsLeft) : getPackageSize(med)} /{" "}
|
||||
{getPackageSize(med)} {t("common.pills")}
|
||||
{getPackageSize(med)} {getPackageSize(med) === 1 ? t("common.pill") : t("common.pills")}
|
||||
{(coverageByMed[med.name] ? Math.round(coverageByMed[med.name].medsLeft) : getPackageSize(med)) >
|
||||
getPackageSize(med) && (
|
||||
<span
|
||||
className="info-tooltip tooltip-align-left warning-text"
|
||||
data-tooltip={t("tooltips.stockExceedsCapacity")}
|
||||
>
|
||||
{" "}
|
||||
⚠️
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="med-actions">
|
||||
@@ -569,24 +593,38 @@ export function MedicationsPage() {
|
||||
<div className="full refill-section">
|
||||
<h4 className="refill-title">{t("refill.title")}</h4>
|
||||
<div className="refill-form-inline">
|
||||
<label>
|
||||
{t("refill.packs")}
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={refillPacks}
|
||||
onChange={(e) => setRefillPacks(parseInt(e.target.value, 10) || 0)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
{t("refill.loosePills")}
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={refillLoose}
|
||||
onChange={(e) => setRefillLoose(parseInt(e.target.value, 10) || 0)}
|
||||
/>
|
||||
</label>
|
||||
{form.packageType === "blister" ? (
|
||||
<>
|
||||
<label>
|
||||
{t("refill.packs")}
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={refillPacks}
|
||||
onChange={(e) => setRefillPacks(parseInt(e.target.value, 10) || 0)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
{t("refill.loosePills")}
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={refillLoose}
|
||||
onChange={(e) => setRefillLoose(parseInt(e.target.value, 10) || 0)}
|
||||
/>
|
||||
</label>
|
||||
</>
|
||||
) : (
|
||||
<label>
|
||||
{t("refill.pillsToAdd")}
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
value={refillLoose}
|
||||
onChange={(e) => setRefillLoose(parseInt(e.target.value, 10) || 0)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="success"
|
||||
@@ -595,12 +633,18 @@ export function MedicationsPage() {
|
||||
>
|
||||
{refillSaving ? t("refill.adding") : t("refill.button")}
|
||||
</button>
|
||||
{(refillPacks > 0 || refillLoose > 0) && (
|
||||
<span className="refill-preview">
|
||||
+{refillPacks * Number(form.blistersPerPack || 0) * Number(form.pillsPerBlister || 1) + refillLoose}{" "}
|
||||
{t("common.pills")}
|
||||
</span>
|
||||
)}
|
||||
{(() => {
|
||||
const totalRefill =
|
||||
form.packageType === "blister"
|
||||
? refillPacks * Number(form.blistersPerPack || 0) * Number(form.pillsPerBlister || 1) +
|
||||
refillLoose
|
||||
: refillLoose;
|
||||
return totalRefill > 0 ? (
|
||||
<span className="refill-preview">
|
||||
+{totalRefill} {totalRefill === 1 ? t("common.pill") : t("common.pills")}
|
||||
</span>
|
||||
) : null;
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -117,8 +117,11 @@ export function PlannerPage() {
|
||||
}
|
||||
}
|
||||
|
||||
async function sendPlannerEmail() {
|
||||
if (!settings.notificationEmail || plannerRows.length === 0) return;
|
||||
const canSendNotification =
|
||||
(settings.emailEnabled && settings.notificationEmail) || (settings.shoutrrrEnabled && settings.shoutrrrUrl);
|
||||
|
||||
async function sendPlannerNotification() {
|
||||
if (!canSendNotification || plannerRows.length === 0) return;
|
||||
setSendingPlannerEmail(true);
|
||||
setPlannerEmailResult(null);
|
||||
|
||||
@@ -136,12 +139,12 @@ export function PlannerPage() {
|
||||
});
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
setPlannerEmailResult({ success: true, message: data.message || "Email sent!" });
|
||||
setPlannerEmailResult({ success: true, message: data.message || t("common.sent") });
|
||||
} else {
|
||||
setPlannerEmailResult({ success: false, message: data.error || "Failed to send" });
|
||||
setPlannerEmailResult({ success: false, message: data.error || t("common.sendFailed") });
|
||||
}
|
||||
} catch {
|
||||
setPlannerEmailResult({ success: false, message: "Network error" });
|
||||
setPlannerEmailResult({ success: false, message: t("common.networkError") });
|
||||
}
|
||||
setSendingPlannerEmail(false);
|
||||
}
|
||||
@@ -210,18 +213,20 @@ export function PlannerPage() {
|
||||
{row.medicationName}
|
||||
</span>
|
||||
<span data-label={t("planner.table.usage")}>
|
||||
<strong>{row.plannerUsage}</strong> {t("common.pills")}
|
||||
<strong>{row.plannerUsage}</strong>
|
||||
{row.plannerUsage === 1 ? t("common.pill") : t("common.pills")}
|
||||
</span>
|
||||
<span data-label={t("planner.table.blisters")}>
|
||||
{row.packageType === "bottle" ? "–" : `${row.blistersNeeded} × ${row.blisterSize}`}
|
||||
</span>
|
||||
<span data-label={t("planner.table.available")}>
|
||||
{row.packageType === "bottle" ? (
|
||||
`${Math.round(row.loosePills * 10) / 10} ${t("common.pills")}`
|
||||
`${Math.round(row.loosePills * 10) / 10} ${Math.round(row.loosePills * 10) / 10 === 1 ? t("common.pill") : t("common.pills")}`
|
||||
) : (
|
||||
<>
|
||||
{row.fullBlisters} {t("common.blisters")}
|
||||
{row.loosePills > 0 && ` + ${Math.round(row.loosePills * 10) / 10} ${t("common.pills")}`}
|
||||
{row.loosePills > 0 &&
|
||||
` + ${Math.round(row.loosePills * 10) / 10} ${Math.round(row.loosePills * 10) / 10 === 1 ? t("common.pill") : t("common.pills")}`}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
@@ -235,10 +240,15 @@ export function PlannerPage() {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
{settings.emailEnabled && settings.notificationEmail && (
|
||||
{canSendNotification && (
|
||||
<div className="planner-email-action">
|
||||
<button type="button" className="ghost" onClick={sendPlannerEmail} disabled={sendingPlannerEmail}>
|
||||
{sendingPlannerEmail ? t("common.sending") : t("planner.sendEmail")}
|
||||
<button
|
||||
type="button"
|
||||
className="ghost"
|
||||
onClick={sendPlannerNotification}
|
||||
disabled={sendingPlannerEmail}
|
||||
>
|
||||
{sendingPlannerEmail ? t("common.sending") : t("planner.sendNotification")}
|
||||
</button>
|
||||
{plannerEmailResult && (
|
||||
<span className={plannerEmailResult.success ? "success-text" : "danger-text"}>
|
||||
|
||||
@@ -136,7 +136,7 @@ export function SchedulePage() {
|
||||
return (
|
||||
<div
|
||||
key={day.dateStr}
|
||||
className={`day-block past ${isCollapsed ? "collapsed" : ""} ${allDayTaken ? "all-taken" : ""} stock-${worstStatus}`}
|
||||
className={`day-block past ${isCollapsed ? "collapsed" : ""} ${allDayTaken ? "all-taken" : allDoseIds.length > 0 ? "past-missed" : ""}`}
|
||||
>
|
||||
<div
|
||||
className="day-divider clickable"
|
||||
@@ -186,9 +186,7 @@ export function SchedulePage() {
|
||||
)}
|
||||
</div>
|
||||
<div className="tag-row">
|
||||
<span className="tag subtle">
|
||||
{item.total} {t("common.pills")} {t("common.total")}
|
||||
</span>
|
||||
<span className="tag subtle">{t("common.pillsTotal", { count: item.total })}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="doses-col">
|
||||
@@ -285,9 +283,7 @@ export function SchedulePage() {
|
||||
)}
|
||||
</div>
|
||||
<div className="tag-row">
|
||||
<span className="tag subtle">
|
||||
{item.total} {t("common.pills")} {t("common.total")}
|
||||
</span>
|
||||
<span className="tag subtle">{t("common.pillsTotal", { count: item.total })}</span>
|
||||
{status && <span className={`tag ${status.className}`}>{t(status.label)}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -236,6 +236,75 @@ export function SettingsPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="setting-section">
|
||||
<div className="section-header">
|
||||
<h3>{t("settings.stockReminder.title")}</h3>
|
||||
</div>
|
||||
<div className="setting-row compact">
|
||||
<label className="setting-label">
|
||||
{t("settings.stockReminder.description")}{" "}
|
||||
<span className="status-chip small danger">{t("status.criticalStock")}</span>
|
||||
</label>
|
||||
<label
|
||||
className={`toggle-switch small${!settings.emailEnabled && !settings.shoutrrrEnabled ? " disabled" : ""}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={
|
||||
(settings.emailEnabled && settings.emailStockReminders) ||
|
||||
(settings.shoutrrrEnabled && settings.shoutrrrStockReminders)
|
||||
}
|
||||
onChange={(e) => {
|
||||
const newVal = e.target.checked;
|
||||
if (newVal) {
|
||||
setSettings({
|
||||
...settings,
|
||||
emailStockReminders: settings.emailEnabled ? true : settings.emailStockReminders,
|
||||
shoutrrrStockReminders: settings.shoutrrrEnabled ? true : settings.shoutrrrStockReminders,
|
||||
});
|
||||
} else {
|
||||
setSettings({
|
||||
...settings,
|
||||
emailStockReminders: false,
|
||||
shoutrrrStockReminders: false,
|
||||
repeatDailyReminders: false,
|
||||
});
|
||||
}
|
||||
}}
|
||||
disabled={!settings.emailEnabled && !settings.shoutrrrEnabled}
|
||||
/>
|
||||
<span className="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="setting-row compact" style={{ marginTop: "4px" }}>
|
||||
<label className="setting-label">
|
||||
{t("settings.stockReminder.repeatDaily")}
|
||||
<span
|
||||
className="info-tooltip small tooltip-align-left"
|
||||
data-tooltip={t("settings.stockReminder.repeatTooltip")}
|
||||
>
|
||||
ⓘ
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
className={`toggle-switch small${!((settings.emailEnabled && settings.emailStockReminders) || (settings.shoutrrrEnabled && settings.shoutrrrStockReminders)) ? " disabled" : ""}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.repeatDailyReminders}
|
||||
onChange={(e) => setSettings({ ...settings, repeatDailyReminders: e.target.checked })}
|
||||
disabled={
|
||||
!(
|
||||
(settings.emailEnabled && settings.emailStockReminders) ||
|
||||
(settings.shoutrrrEnabled && settings.shoutrrrStockReminders)
|
||||
)
|
||||
}
|
||||
/>
|
||||
<span className="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="setting-section">
|
||||
<div className="section-header">
|
||||
<h3>{t("settings.notifications.email")}</h3>
|
||||
@@ -400,9 +469,23 @@ export function SettingsPage() {
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{settings.lastStockReminderSent && (
|
||||
<div className="schedule-row">
|
||||
<span className="schedule-label">{t("settings.schedule.lastStockSent")}</span>
|
||||
<span className="schedule-value">
|
||||
{new Date(settings.lastStockReminderSent).toLocaleString(getSystemLocale(i18n.language), {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{settings.lastAutoEmailSent && (
|
||||
<div className="schedule-row">
|
||||
<span className="schedule-label">{t("settings.schedule.lastSent")}</span>
|
||||
<span className="schedule-label">{t("settings.schedule.lastIntakeSent")}</span>
|
||||
<span className="schedule-value">
|
||||
{new Date(settings.lastAutoEmailSent).toLocaleString(getSystemLocale(i18n.language), {
|
||||
day: "2-digit",
|
||||
@@ -423,51 +506,6 @@ export function SettingsPage() {
|
||||
<h2>{t("settings.stock.title")}</h2>
|
||||
</div>
|
||||
|
||||
<div className="setting-section">
|
||||
<div className="section-header">
|
||||
<h3>{t("settings.stock.threshold")}</h3>
|
||||
</div>
|
||||
<div className="threshold-input">
|
||||
<label>
|
||||
<span className="threshold-label">{t("settings.stock.remindWhen")}</span>
|
||||
<div className="threshold-field">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="90"
|
||||
value={settings.reminderDaysBefore}
|
||||
onChange={(e) => setSettings({ ...settings, reminderDaysBefore: Number(e.target.value) || 7 })}
|
||||
/>
|
||||
<span className="threshold-unit">{t("common.days")}</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div className="setting-row compact">
|
||||
<label className="setting-label">
|
||||
{t("settings.stock.repeatDaily")}
|
||||
<span className="info-tooltip small" data-tooltip={t("settings.stock.repeatTooltip")}>
|
||||
ⓘ
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
className={`toggle-switch small${!((settings.emailEnabled && settings.emailStockReminders && settings.notificationEmail) || (settings.shoutrrrEnabled && settings.shoutrrrStockReminders && settings.shoutrrrUrl)) ? " disabled" : ""}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.repeatDailyReminders}
|
||||
onChange={(e) => setSettings({ ...settings, repeatDailyReminders: e.target.checked })}
|
||||
disabled={
|
||||
!(
|
||||
(settings.emailEnabled && settings.emailStockReminders && settings.notificationEmail) ||
|
||||
(settings.shoutrrrEnabled && settings.shoutrrrStockReminders && settings.shoutrrrUrl)
|
||||
)
|
||||
}
|
||||
/>
|
||||
<span className="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="setting-section">
|
||||
<div className="section-header">
|
||||
<h3>{t("settings.stock.calculationMode")}</h3>
|
||||
@@ -512,40 +550,100 @@ export function SettingsPage() {
|
||||
|
||||
<div className="setting-section">
|
||||
<div className="section-header">
|
||||
<h3>{t("settings.stock.display")}</h3>
|
||||
<h3>{t("settings.stock.thresholds")}</h3>
|
||||
</div>
|
||||
<div className="setting-group">
|
||||
<label>
|
||||
<span className="field-label">{t("settings.stock.lowStockDays")}</span>
|
||||
<div className="setting-group threshold-chips-group">
|
||||
<label className={settings.reminderDaysBefore >= settings.lowStockDays ? "threshold-invalid" : ""}>
|
||||
<span className="field-label threshold-chip-label">
|
||||
<span className="status-chip small danger">{t("status.criticalStock")}</span>
|
||||
<span
|
||||
className="info-tooltip small tooltip-align-left"
|
||||
data-tooltip={t("settings.stock.criticalStockTooltip")}
|
||||
>
|
||||
ⓘ
|
||||
</span>
|
||||
</span>
|
||||
<div className="input-with-tooltip">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="364"
|
||||
value={settings.reminderDaysBefore}
|
||||
onChange={(e) => setSettings({ ...settings, reminderDaysBefore: Number(e.target.value) || 7 })}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
className={
|
||||
settings.lowStockDays <= settings.reminderDaysBefore ||
|
||||
settings.lowStockDays >= settings.highStockDays
|
||||
? "threshold-invalid"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<span className="field-label threshold-chip-label">
|
||||
<span className="status-chip small warning">{t("status.lowStock")}</span>
|
||||
<span
|
||||
className="info-tooltip small tooltip-align-left"
|
||||
data-tooltip={t("settings.stock.lowStockTooltip")}
|
||||
>
|
||||
ⓘ
|
||||
</span>
|
||||
</span>
|
||||
<div className="input-with-tooltip">
|
||||
<input
|
||||
type="number"
|
||||
min="2"
|
||||
max="365"
|
||||
value={settings.lowStockDays}
|
||||
onChange={(e) => setSettings({ ...settings, lowStockDays: Number(e.target.value) || 30 })}
|
||||
/>
|
||||
<span className="info-tooltip" data-tooltip={t("settings.stock.lowStockTooltip")}>
|
||||
ⓘ
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
<label>
|
||||
<span className="field-label">{t("settings.stock.highStockDays")}</span>
|
||||
<label className={settings.highStockDays <= settings.lowStockDays ? "threshold-invalid" : ""}>
|
||||
<span className="field-label threshold-chip-label">
|
||||
<span className="status-chip small high">{t("status.highStock")}</span>
|
||||
<span
|
||||
className="info-tooltip small tooltip-align-left"
|
||||
data-tooltip={t("settings.stock.highStockTooltip")}
|
||||
>
|
||||
ⓘ
|
||||
</span>
|
||||
</span>
|
||||
<div className="input-with-tooltip">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
min="3"
|
||||
max="730"
|
||||
value={settings.highStockDays}
|
||||
onChange={(e) => setSettings({ ...settings, highStockDays: Number(e.target.value) || 180 })}
|
||||
/>
|
||||
<span className="info-tooltip" data-tooltip={t("settings.stock.highStockTooltip")}>
|
||||
ⓘ
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
{(settings.reminderDaysBefore >= settings.lowStockDays ||
|
||||
settings.lowStockDays >= settings.highStockDays) && (
|
||||
<p className="threshold-validation-error">{t("settings.stock.thresholdValidation")}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="setting-section">
|
||||
<div className="setting-row compact">
|
||||
<div className="setting-label">
|
||||
<span>{t("settings.stock.shareStockStatus")}</span>
|
||||
<span className="info-tooltip small" data-tooltip={t("settings.stock.shareStockStatusDesc")}>
|
||||
ⓘ
|
||||
</span>
|
||||
</div>
|
||||
<label className="toggle-switch small">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.shareStockStatus}
|
||||
onChange={(e) => setSettings({ ...settings, shareStockStatus: e.target.checked })}
|
||||
/>
|
||||
<span className="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -651,7 +749,15 @@ export function SettingsPage() {
|
||||
</article>
|
||||
|
||||
<div className="form-footer">
|
||||
<button type="submit" disabled={settingsSaving || (!settingsChanged && settingsSaved)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={
|
||||
settingsSaving ||
|
||||
(!settingsChanged && settingsSaved) ||
|
||||
settings.reminderDaysBefore >= settings.lowStockDays ||
|
||||
settings.lowStockDays >= settings.highStockDays
|
||||
}
|
||||
>
|
||||
{settingsSaving
|
||||
? t("common.saving")
|
||||
: settingsSaved && !settingsChanged
|
||||
|
||||
Reference in New Issue
Block a user