feat: add timezone support for reminders and enhance UI for settings overview
This commit is contained in:
Daniel Volz
+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>
|
||||
|
||||
Reference in New Issue
Block a user