feat: add timezone support for reminders and enhance UI for settings overview
This commit is contained in:
Daniel Volz
@@ -4,6 +4,9 @@ DATABASE_URL=file:./data/medassist.db
|
||||
CORS_ORIGINS=http://localhost:4173,http://localhost:5173
|
||||
LOG_LEVEL=info
|
||||
|
||||
# Timezone for scheduled reminders (e.g., Europe/Berlin, America/New_York)
|
||||
TZ=Europe/Berlin
|
||||
|
||||
# Auth (use strong secrets; min 10 chars required)
|
||||
JWT_SECRET=change-me-now-with-stronger-secret
|
||||
REFRESH_SECRET=change-me-refresh-strong-secret
|
||||
|
||||
@@ -26,19 +26,112 @@ type ReminderState = {
|
||||
nextScheduledCheck: string | null; // ISO date string for when the next check is scheduled
|
||||
};
|
||||
|
||||
const REMINDER_HOUR = 6; // 6:00 AM
|
||||
const REMINDER_HOUR = 6; // 6:00 AM local time
|
||||
|
||||
// Get current timezone from TZ env variable or default to UTC
|
||||
function getTimezone(): string {
|
||||
return process.env.TZ || "UTC";
|
||||
}
|
||||
|
||||
// Format a date in the configured timezone
|
||||
function formatInTimezone(date: Date): string {
|
||||
return date.toLocaleString("de-DE", {
|
||||
timeZone: getTimezone(),
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit"
|
||||
});
|
||||
}
|
||||
|
||||
// Get current hour in the configured timezone
|
||||
function getCurrentHourInTimezone(): number {
|
||||
const now = new Date();
|
||||
const timeStr = now.toLocaleString("en-US", {
|
||||
timeZone: getTimezone(),
|
||||
hour: "numeric",
|
||||
hour12: false
|
||||
});
|
||||
return parseInt(timeStr, 10);
|
||||
}
|
||||
|
||||
// Get today's date string in the configured timezone (YYYY-MM-DD)
|
||||
function getTodayInTimezone(): string {
|
||||
const now = new Date();
|
||||
const parts = now.toLocaleDateString("en-CA", { timeZone: getTimezone() }).split("-");
|
||||
return parts.join("-"); // YYYY-MM-DD format
|
||||
}
|
||||
|
||||
function getNextScheduledTime(): Date {
|
||||
const now = new Date();
|
||||
const next = new Date(now);
|
||||
next.setHours(REMINDER_HOUR, 0, 0, 0);
|
||||
const tz = getTimezone();
|
||||
|
||||
// If we're past today's scheduled time, schedule for tomorrow
|
||||
if (now >= next) {
|
||||
next.setDate(next.getDate() + 1);
|
||||
// Get current time components in the target timezone
|
||||
const formatter = new Intl.DateTimeFormat("en-US", {
|
||||
timeZone: tz,
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hour12: false
|
||||
});
|
||||
|
||||
const parts = formatter.formatToParts(now);
|
||||
const getPart = (type: string) => parts.find(p => p.type === type)?.value || "0";
|
||||
|
||||
const currentHour = parseInt(getPart("hour"), 10);
|
||||
const currentMinute = parseInt(getPart("minute"), 10);
|
||||
|
||||
// Calculate if we need tomorrow
|
||||
const needTomorrow = currentHour > REMINDER_HOUR || (currentHour === REMINDER_HOUR && currentMinute > 0);
|
||||
|
||||
// Get the date we want to schedule for
|
||||
const year = parseInt(getPart("year"), 10);
|
||||
const month = parseInt(getPart("month"), 10);
|
||||
let day = parseInt(getPart("day"), 10);
|
||||
|
||||
if (needTomorrow) {
|
||||
day += 1;
|
||||
}
|
||||
|
||||
return next;
|
||||
// Handle month overflow simply by adding a day to now if needed
|
||||
let targetDate: Date;
|
||||
if (needTomorrow) {
|
||||
targetDate = new Date(now.getTime() + 24 * 60 * 60 * 1000);
|
||||
} else {
|
||||
targetDate = new Date(now);
|
||||
}
|
||||
|
||||
// Get the target date's date string in the timezone
|
||||
const targetFormatter = new Intl.DateTimeFormat("en-CA", {
|
||||
timeZone: tz,
|
||||
year: "numeric",
|
||||
month: "2-digit",
|
||||
day: "2-digit"
|
||||
});
|
||||
const [targetYear, targetMonth, targetDay] = targetFormatter.format(targetDate).split("-").map(Number);
|
||||
|
||||
// Now we need to find the UTC time that corresponds to REMINDER_HOUR:00 on targetDate in the target timezone
|
||||
// Use a search approach: start with a guess and adjust
|
||||
const guessUtc = new Date(Date.UTC(targetYear, targetMonth - 1, targetDay, REMINDER_HOUR, 0, 0, 0));
|
||||
|
||||
// Check what hour this UTC time corresponds to in the target timezone
|
||||
const checkFormatter = new Intl.DateTimeFormat("en-US", {
|
||||
timeZone: tz,
|
||||
hour: "2-digit",
|
||||
hour12: false
|
||||
});
|
||||
|
||||
// Adjust based on the difference
|
||||
const guessHour = parseInt(checkFormatter.format(guessUtc), 10);
|
||||
const hourDiff = guessHour - REMINDER_HOUR;
|
||||
|
||||
// Apply correction (if guessHour is higher, we need to subtract time)
|
||||
const correctedUtc = new Date(guessUtc.getTime() - hourDiff * 60 * 60 * 1000);
|
||||
|
||||
return correctedUtc;
|
||||
}
|
||||
|
||||
function getMsUntilNextCheck(): number {
|
||||
@@ -75,7 +168,7 @@ export function getReminderState(): ReminderState {
|
||||
|
||||
export function updateReminderSentTime(): void {
|
||||
const state = loadReminderState();
|
||||
const today = new Date().toISOString().split("T")[0];
|
||||
const today = getTodayInTimezone();
|
||||
saveReminderState({
|
||||
...state,
|
||||
lastAutoEmailSent: new Date().toISOString(),
|
||||
@@ -257,7 +350,7 @@ async function checkAndSendReminder(logger: { info: (msg: string) => void; error
|
||||
}
|
||||
|
||||
const state = loadReminderState();
|
||||
const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
|
||||
const today = getTodayInTimezone(); // YYYY-MM-DD in configured timezone
|
||||
|
||||
// Get all medications that need a reminder
|
||||
const allLowStock = await getMedicationsNeedingReminder(settings.reminderDaysBefore);
|
||||
@@ -360,7 +453,7 @@ function scheduleNextCheck(logger: { info: (msg: string) => void; error: (msg: s
|
||||
nextScheduledCheck: nextTime.toISOString(),
|
||||
});
|
||||
|
||||
logger.info(`[Reminder] Next check scheduled for ${nextTime.toLocaleString()} (in ${Math.round(msUntilNext / 1000 / 60)} minutes)`);
|
||||
logger.info(`[Reminder] Next check scheduled for ${formatInTimezone(nextTime)} (${getTimezone()}) (in ${Math.round(msUntilNext / 1000 / 60)} minutes)`);
|
||||
|
||||
schedulerTimeout = setTimeout(() => {
|
||||
checkAndSendReminder(logger).catch((err) => logger.error(`[Reminder] Error: ${err}`));
|
||||
@@ -370,25 +463,23 @@ function scheduleNextCheck(logger: { info: (msg: string) => void; error: (msg: s
|
||||
}
|
||||
|
||||
export function startReminderScheduler(logger: { info: (msg: string) => void; error: (msg: string) => void }): void {
|
||||
logger.info("[Reminder] Starting reminder scheduler...");
|
||||
logger.info(`[Reminder] Starting reminder scheduler (timezone: ${getTimezone()})...`);
|
||||
|
||||
// Check if we need to run immediately (missed today's check)
|
||||
const state = loadReminderState();
|
||||
const today = new Date().toISOString().split("T")[0];
|
||||
const now = new Date();
|
||||
const todayAt6AM = new Date(now);
|
||||
todayAt6AM.setHours(REMINDER_HOUR, 0, 0, 0);
|
||||
const today = getTodayInTimezone();
|
||||
const currentHour = getCurrentHourInTimezone();
|
||||
|
||||
// If it's past 6 AM today and we haven't checked today, run immediately
|
||||
if (now >= todayAt6AM && state.lastAutoEmailDate !== today) {
|
||||
// If it's past REMINDER_HOUR today in the configured timezone and we haven't checked today, run immediately
|
||||
if (currentHour >= REMINDER_HOUR && state.lastAutoEmailDate !== today) {
|
||||
logger.info("[Reminder] Missed today's check, running now...");
|
||||
checkAndSendReminder(logger).catch((err) => logger.error(`[Reminder] Error: ${err}`));
|
||||
}
|
||||
|
||||
// Schedule next check at 6 AM
|
||||
// Schedule next check at REMINDER_HOUR
|
||||
scheduleNextCheck(logger);
|
||||
|
||||
logger.info(`[Reminder] Scheduler started - daily check at ${REMINDER_HOUR}:00`);
|
||||
logger.info(`[Reminder] Scheduler started - daily check at ${REMINDER_HOUR}:00 ${getTimezone()}`);
|
||||
}
|
||||
|
||||
export function stopReminderScheduler(): void {
|
||||
|
||||
+144
-164
@@ -905,18 +905,17 @@ export default function App() {
|
||||
<article className="card">
|
||||
<div className="card-head">
|
||||
<h2>Automatic Reminders</h2>
|
||||
<span className="pill neutral">Daily check at 6:00 AM</span>
|
||||
<span className="pill neutral">Daily at 6:00 AM</span>
|
||||
</div>
|
||||
{settingsLoading ? (
|
||||
<p>Loading settings...</p>
|
||||
) : (
|
||||
<form className="settings-form" onSubmit={saveSettings}>
|
||||
<div className="setting-info-box">
|
||||
<p>🤖 <strong>How it works:</strong> The server checks daily at 6:00 AM. When a medication drops below the threshold, you get notified via <strong>all enabled channels</strong> below.</p>
|
||||
<div className="enabled-channels" style={{ marginTop: "0.5rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
|
||||
<div className="channels-overview">
|
||||
<div className="channels-status">
|
||||
<button
|
||||
type="button"
|
||||
className={`pill clickable ${settings.emailEnabled ? "success" : "neutral"}`}
|
||||
className={`channel-btn ${settings.emailEnabled ? "active" : ""}`}
|
||||
onClick={async () => {
|
||||
const newSettings = { ...settings, emailEnabled: !settings.emailEnabled };
|
||||
setSettings(newSettings);
|
||||
@@ -928,13 +927,16 @@ export default function App() {
|
||||
});
|
||||
} catch (e) { console.error(e); }
|
||||
}}
|
||||
style={{ cursor: "pointer", border: "none" }}
|
||||
>
|
||||
📧 Email: {settings.emailEnabled ? "ON" : "OFF"}
|
||||
<span className="channel-icon">📧</span>
|
||||
<span className="channel-name">Email</span>
|
||||
<span className={`channel-status ${settings.emailEnabled ? "on" : "off"}`}>
|
||||
{settings.emailEnabled ? "ON" : "OFF"}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`pill clickable ${settings.shoutrrrEnabled ? "success" : "neutral"}`}
|
||||
className={`channel-btn ${settings.shoutrrrEnabled ? "active" : ""}`}
|
||||
onClick={async () => {
|
||||
const newSettings = { ...settings, shoutrrrEnabled: !settings.shoutrrrEnabled };
|
||||
setSettings(newSettings);
|
||||
@@ -946,34 +948,53 @@ export default function App() {
|
||||
});
|
||||
} catch (e) { console.error(e); }
|
||||
}}
|
||||
style={{ cursor: "pointer", border: "none" }}
|
||||
>
|
||||
🔔 Push: {settings.shoutrrrEnabled ? "ON" : "OFF"}
|
||||
<span className="channel-icon">🔔</span>
|
||||
<span className="channel-name">Push</span>
|
||||
<span className={`channel-status ${settings.shoutrrrEnabled ? "on" : "off"}`}>
|
||||
{settings.shoutrrrEnabled ? "ON" : "OFF"}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="schedule-info">
|
||||
<div className="schedule-row">
|
||||
<span className="schedule-label">Next check</span>
|
||||
<span className="schedule-value">{settings.nextScheduledCheck ? new Date(settings.nextScheduledCheck).toLocaleString([], { 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">Last sent</span>
|
||||
<span className="schedule-value">{new Date(settings.lastAutoEmailSent).toLocaleString([], { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" })}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="setting-section">
|
||||
<h3>⚙️ Reminder Settings</h3>
|
||||
<p className="setting-hint">These settings apply to both Email and Push notifications.</p>
|
||||
<div className="setting-group">
|
||||
<div className="section-header">
|
||||
<h3>⚙️ Reminder Threshold</h3>
|
||||
<span className="info-tooltip" title="Applies to both Email and Push notifications. When a medication's remaining supply falls below this threshold, you'll receive a notification.">ⓘ</span>
|
||||
</div>
|
||||
<div className="threshold-input">
|
||||
<label>
|
||||
Reminder threshold (days)
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="90"
|
||||
value={settings.reminderDaysBefore}
|
||||
onChange={(e) => setSettings({ ...settings, reminderDaysBefore: Number(e.target.value) || 7 })}
|
||||
/>
|
||||
<span className="input-hint">Send reminder when stock lasts less than this</span>
|
||||
<span className="threshold-label">Send reminder when supply drops below</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">days</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div className="setting-row">
|
||||
<div className="setting-info">
|
||||
<label className="setting-label">Repeat daily reminders</label>
|
||||
<p className="setting-desc">Send daily notifications while stock is low (otherwise only once per medication)</p>
|
||||
</div>
|
||||
<div className="setting-row compact">
|
||||
<label className="setting-label">
|
||||
Repeat daily
|
||||
<span className="info-tooltip small" title="When enabled, sends reminders every day while stock is low. Otherwise, only notifies once per medication until restocked.">ⓘ</span>
|
||||
</label>
|
||||
<label className="toggle-switch small">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -983,152 +1004,111 @@ export default function App() {
|
||||
<span className="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="setting-info-box">
|
||||
<p>⏰ <strong>Next automatic check:</strong> {settings.nextScheduledCheck ? new Date(settings.nextScheduledCheck).toLocaleString() : "—"}</p>
|
||||
{settings.lastAutoEmailSent && (
|
||||
<p style={{ marginTop: "0.5rem" }}>✓ Last notification sent: <strong>{new Date(settings.lastAutoEmailSent).toLocaleString()}</strong></p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="setting-section">
|
||||
<h3>📧 Email Notifications</h3>
|
||||
<div className="setting-row">
|
||||
<div className="setting-info">
|
||||
<label className="setting-label">Enable Email Notifications</label>
|
||||
<p className="setting-desc">Receive reminders via email</p>
|
||||
{settings.emailEnabled && (
|
||||
<div className="setting-section">
|
||||
<div className="section-header">
|
||||
<h3>📧 Email Settings</h3>
|
||||
</div>
|
||||
<label className="toggle-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.emailEnabled}
|
||||
onChange={(e) => setSettings({ ...settings, emailEnabled: e.target.checked })}
|
||||
/>
|
||||
<span className="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{settings.emailEnabled && (
|
||||
<>
|
||||
<div className="setting-group">
|
||||
<label className="full">
|
||||
Email address
|
||||
<input
|
||||
type="email"
|
||||
value={settings.notificationEmail}
|
||||
onChange={(e) => setSettings({ ...settings, notificationEmail: e.target.value })}
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="smtp-readonly">
|
||||
<div className="smtp-field">
|
||||
<span className="smtp-label">SMTP Host</span>
|
||||
<span className="smtp-value">{settings.smtpHost || "—"}</span>
|
||||
</div>
|
||||
<div className="smtp-field">
|
||||
<span className="smtp-label">Port</span>
|
||||
<span className="smtp-value">{settings.smtpPort}</span>
|
||||
</div>
|
||||
<div className="smtp-field">
|
||||
<span className="smtp-label">From</span>
|
||||
<span className="smtp-value">{settings.smtpFrom || "—"}</span>
|
||||
</div>
|
||||
<div className="smtp-field">
|
||||
<span className="smtp-label">Status</span>
|
||||
<span className="smtp-value">{settings.hasSmtpPassword ? "✓ Configured" : "Not configured"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="setting-hint" style={{ marginTop: "0.5rem" }}>SMTP is configured via <code>.env</code> file</p>
|
||||
<div className="setting-actions">
|
||||
<button type="button" className="ghost" onClick={testEmail} disabled={testingEmail || !settings.notificationEmail}>
|
||||
{testingEmail ? "Sending..." : "Send Test Email"}
|
||||
</button>
|
||||
{testEmailResult && (
|
||||
<span className={testEmailResult.success ? "success-text" : "danger-text"}>
|
||||
{testEmailResult.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="setting-section">
|
||||
<h3>🔔 Shoutrrr Push Notifications</h3>
|
||||
<p className="setting-hint">Send push notifications via Shoutrrr-compatible services (ntfy, Discord, Telegram, Slack, etc.). Uses the same reminder threshold.</p>
|
||||
|
||||
<div className="setting-row">
|
||||
<div className="setting-info">
|
||||
<label className="setting-label">Enable Shoutrrr Notifications</label>
|
||||
<p className="setting-desc">Receive reminders via push notification services</p>
|
||||
<div className="setting-group">
|
||||
<label className="full">
|
||||
<span className="field-label">Recipient</span>
|
||||
<input
|
||||
type="email"
|
||||
value={settings.notificationEmail}
|
||||
onChange={(e) => setSettings({ ...settings, notificationEmail: e.target.value })}
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="smtp-info">
|
||||
<span className="smtp-summary">
|
||||
SMTP: {settings.smtpHost || "Not configured"}:{settings.smtpPort}
|
||||
{settings.hasSmtpPassword && " ✓"}
|
||||
</span>
|
||||
<span className="info-tooltip small" title={`Host: ${settings.smtpHost || "—"}\nPort: ${settings.smtpPort}\nFrom: ${settings.smtpFrom || "—"}\n\nConfigured via .env file`}>ⓘ</span>
|
||||
</div>
|
||||
<div className="setting-actions">
|
||||
<button type="button" className="ghost" onClick={testEmail} disabled={testingEmail || !settings.notificationEmail}>
|
||||
{testingEmail ? "Sending..." : "Test Email"}
|
||||
</button>
|
||||
{testEmailResult && (
|
||||
<span className={testEmailResult.success ? "success-text" : "danger-text"}>
|
||||
{testEmailResult.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<label className="toggle-switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={settings.shoutrrrEnabled}
|
||||
onChange={(e) => setSettings({ ...settings, shoutrrrEnabled: e.target.checked })}
|
||||
/>
|
||||
<span className="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{settings.shoutrrrEnabled && (
|
||||
<>
|
||||
<div className="setting-group">
|
||||
<label className="full">
|
||||
Notification URL
|
||||
<input
|
||||
type="url"
|
||||
value={settings.shoutrrrUrl}
|
||||
onChange={(e) => setSettings({ ...settings, shoutrrrUrl: e.target.value })}
|
||||
placeholder="https://ntfy.sh/your-topic"
|
||||
pattern="(https?|ntfy|discord|telegram|slack):\/\/.+"
|
||||
/>
|
||||
<span className="input-hint">
|
||||
Examples: <code>https://ntfy.sh/mytopic</code> · <code>ntfy://ntfy.sh/mytopic</code> · <code>discord://token@id</code>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="setting-actions">
|
||||
<button type="button" className="ghost" onClick={testShoutrrr} disabled={testingShoutrrr || !settings.shoutrrrUrl}>
|
||||
{testingShoutrrr ? "Sending..." : "Send Test Notification"}
|
||||
</button>
|
||||
{testShoutrrrResult && (
|
||||
<span className={testShoutrrrResult.success ? "success-text" : "danger-text"}>
|
||||
{testShoutrrrResult.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{settings.shoutrrrEnabled && (
|
||||
<div className="setting-section">
|
||||
<div className="section-header">
|
||||
<h3>🔔 Push Settings</h3>
|
||||
<span className="info-tooltip" title="Supports ntfy, Discord, Telegram, Slack and other Shoutrrr-compatible services.">ⓘ</span>
|
||||
</div>
|
||||
<div className="setting-group">
|
||||
<label className="full">
|
||||
<span className="field-label">Notification URL</span>
|
||||
<input
|
||||
type="url"
|
||||
value={settings.shoutrrrUrl}
|
||||
onChange={(e) => setSettings({ ...settings, shoutrrrUrl: e.target.value })}
|
||||
placeholder="https://ntfy.sh/your-topic"
|
||||
pattern="(https?|ntfy|discord|telegram|slack):\/\/.+"
|
||||
/>
|
||||
<span className="field-examples">e.g. https://ntfy.sh/mytopic, discord://token@id</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="setting-actions">
|
||||
<button type="button" className="ghost" onClick={testShoutrrr} disabled={testingShoutrrr || !settings.shoutrrrUrl}>
|
||||
{testingShoutrrr ? "Sending..." : "Test Push"}
|
||||
</button>
|
||||
{testShoutrrrResult && (
|
||||
<span className={testShoutrrrResult.success ? "success-text" : "danger-text"}>
|
||||
{testShoutrrrResult.message}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="setting-section">
|
||||
<h3>📊 Stock Thresholds</h3>
|
||||
<p className="setting-hint">Define stock level colors based on how many days of medication you have left.</p>
|
||||
<div className="setting-group">
|
||||
<label>
|
||||
Low Stock (days)
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="365"
|
||||
value={settings.lowStockDays}
|
||||
onChange={(e) => setSettings({ ...settings, lowStockDays: Number(e.target.value) || 30 })}
|
||||
/>
|
||||
<span className="input-hint">⚠ Yellow below this</span>
|
||||
<div className="section-header">
|
||||
<h3>📊 Stock Display</h3>
|
||||
<span className="info-tooltip" title="These thresholds control the color-coding in the medication overview. They don't affect when reminders are sent.">ⓘ</span>
|
||||
</div>
|
||||
<div className="threshold-grid">
|
||||
<label className="threshold-card warning">
|
||||
<span className="threshold-icon">⚠️</span>
|
||||
<span className="threshold-title">Low Stock</span>
|
||||
<div className="threshold-input-wrap">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="365"
|
||||
value={settings.lowStockDays}
|
||||
onChange={(e) => setSettings({ ...settings, lowStockDays: Number(e.target.value) || 30 })}
|
||||
/>
|
||||
<span>days</span>
|
||||
</div>
|
||||
<span className="threshold-desc">Yellow warning</span>
|
||||
</label>
|
||||
<label>
|
||||
High Stock (days)
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="730"
|
||||
value={settings.highStockDays}
|
||||
onChange={(e) => setSettings({ ...settings, highStockDays: Number(e.target.value) || 180 })}
|
||||
/>
|
||||
<span className="input-hint">★ Green with star above this</span>
|
||||
<label className="threshold-card success">
|
||||
<span className="threshold-icon">✓</span>
|
||||
<span className="threshold-title">High Stock</span>
|
||||
<div className="threshold-input-wrap">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="730"
|
||||
value={settings.highStockDays}
|
||||
onChange={(e) => setSettings({ ...settings, highStockDays: Number(e.target.value) || 180 })}
|
||||
/>
|
||||
<span>days</span>
|
||||
</div>
|
||||
<span className="threshold-desc">Green with star</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+335
-11
@@ -862,37 +862,361 @@ textarea {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.smtp-readonly {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
/* Info Tooltips */
|
||||
.info-tooltip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
cursor: help;
|
||||
transition: color 0.15s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-tooltip:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.info-tooltip.small {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.info-tooltip[title] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-tooltip::after {
|
||||
content: attr(title);
|
||||
position: absolute;
|
||||
bottom: calc(100% + 8px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
white-space: pre-line;
|
||||
min-width: 200px;
|
||||
max-width: 280px;
|
||||
text-align: left;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid var(--border-primary);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.15s, visibility 0.15s;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.info-tooltip::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: calc(100% + 4px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 5px solid transparent;
|
||||
border-top-color: var(--border-primary);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.15s, visibility 0.15s;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.info-tooltip:hover::after,
|
||||
.info-tooltip:hover::before {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Channels Overview */
|
||||
.channels-overview {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.channels-status {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.smtp-field {
|
||||
.channel-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.smtp-label {
|
||||
font-size: 0.7rem;
|
||||
.channel-btn:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
}
|
||||
|
||||
.channel-btn.active {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-bg);
|
||||
}
|
||||
|
||||
.channel-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.channel-name {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.smtp-value {
|
||||
.channel-status {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.channel-status.on {
|
||||
background: var(--success-bg);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.channel-status.off {
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.schedule-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.schedule-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.schedule-label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.schedule-value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Section Header with Tooltip */
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-header h3 {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--accent-light);
|
||||
}
|
||||
|
||||
/* Threshold Input */
|
||||
.threshold-input {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.threshold-label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.threshold-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.threshold-field input {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.threshold-unit {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Compact Setting Row */
|
||||
.setting-row.compact {
|
||||
padding: 0.75rem 1rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.setting-row.compact .setting-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Field Label */
|
||||
.field-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.field-examples {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 0.35rem;
|
||||
font-family: "SF Mono", "Fira Code", monospace;
|
||||
}
|
||||
|
||||
/* SMTP Info */
|
||||
.smtp-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--bg-input);
|
||||
border-radius: 8px;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.smtp-summary {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
font-family: "SF Mono", "Fira Code", monospace;
|
||||
}
|
||||
|
||||
/* Threshold Cards */
|
||||
.threshold-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.threshold-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-input);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.threshold-card:hover,
|
||||
.threshold-card:focus-within {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.threshold-card.warning {
|
||||
border-color: rgba(252, 211, 77, 0.3);
|
||||
}
|
||||
|
||||
.threshold-card.warning:hover,
|
||||
.threshold-card.warning:focus-within {
|
||||
border-color: #fcd34d;
|
||||
}
|
||||
|
||||
.threshold-card.success {
|
||||
border-color: rgba(57, 217, 138, 0.3);
|
||||
}
|
||||
|
||||
.threshold-card.success:hover,
|
||||
.threshold-card.success:focus-within {
|
||||
border-color: #39d98a;
|
||||
}
|
||||
|
||||
.threshold-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.threshold-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.threshold-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.threshold-input-wrap input {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
padding: 0.35rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.threshold-input-wrap span {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.threshold-desc {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.smtp-readonly {
|
||||
.channels-overview {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.channels-status {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.schedule-info {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.threshold-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user