intermittent commit
This commit is contained in:
31
webui/package.json
Normal file
31
webui/package.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "@govoplan/notifications-webui",
|
||||
"version": "0.1.8",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"module": "src/index.ts",
|
||||
"types": "src/index.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./src/index.ts",
|
||||
"import": "./src/index.ts"
|
||||
},
|
||||
"./styles/notifications.css": "./src/styles/notifications.css"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@govoplan/core-webui": "^0.1.8",
|
||||
"lucide-react": "^1.23.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.1.1",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"typescript": "^5.7.2",
|
||||
"vite": "^6.0.6"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@govoplan/core-webui": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
123
webui/src/api/notifications.ts
Normal file
123
webui/src/api/notifications.ts
Normal file
@@ -0,0 +1,123 @@
|
||||
import { apiFetch, type ApiSettings } from "@govoplan/core-webui";
|
||||
|
||||
export type NotificationDeliveryAttempt = {
|
||||
id: string;
|
||||
notification_id: string;
|
||||
attempt_no: number;
|
||||
channel: string;
|
||||
provider?: string | null;
|
||||
status: string;
|
||||
started_at?: string | null;
|
||||
finished_at?: string | null;
|
||||
external_message_id?: string | null;
|
||||
error?: string | null;
|
||||
details: Record<string, unknown>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
export type NotificationMessage = {
|
||||
id: string;
|
||||
tenant_id: string;
|
||||
source_module: string;
|
||||
source_resource_type: string;
|
||||
source_resource_id?: string | null;
|
||||
event_kind: string;
|
||||
channel: string;
|
||||
recipient?: string | null;
|
||||
recipient_type?: string | null;
|
||||
recipient_id?: string | null;
|
||||
recipient_label?: string | null;
|
||||
subject?: string | null;
|
||||
body_text?: string | null;
|
||||
body_html?: string | null;
|
||||
action_url?: string | null;
|
||||
priority: number;
|
||||
status: string;
|
||||
not_before_at?: string | null;
|
||||
queued_at?: string | null;
|
||||
sent_at?: string | null;
|
||||
failed_at?: string | null;
|
||||
read_at?: string | null;
|
||||
acknowledged_at?: string | null;
|
||||
cancelled_at?: string | null;
|
||||
attempt_count: number;
|
||||
last_error?: string | null;
|
||||
external_message_id?: string | null;
|
||||
payload: Record<string, unknown>;
|
||||
metadata: Record<string, unknown>;
|
||||
attempts: NotificationDeliveryAttempt[];
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
export type NotificationListResponse = {
|
||||
notifications: NotificationMessage[];
|
||||
};
|
||||
|
||||
export type NotificationSummary = {
|
||||
total: number;
|
||||
unread: number;
|
||||
pending: number;
|
||||
failed: number;
|
||||
show_unread_badge?: boolean;
|
||||
};
|
||||
|
||||
export type NotificationPreferences = {
|
||||
tenant_id: string;
|
||||
user_id: string;
|
||||
show_unread_badge: boolean;
|
||||
email_enabled: boolean;
|
||||
email_digest_enabled: boolean;
|
||||
muted_source_modules: string[];
|
||||
metadata: Record<string, unknown>;
|
||||
};
|
||||
|
||||
export type NotificationDeliveryResult = {
|
||||
notification?: NotificationMessage | null;
|
||||
processed: number;
|
||||
sent: number;
|
||||
failed: number;
|
||||
skipped: number;
|
||||
errors: string[];
|
||||
};
|
||||
|
||||
export function listNotifications(settings: ApiSettings, filters: { status?: string; channel?: string; source_module?: string; recipient_id?: string; limit?: number } = {}): Promise<NotificationListResponse> {
|
||||
const params = new URLSearchParams();
|
||||
if (filters.status) params.set("status", filters.status);
|
||||
if (filters.channel) params.set("channel", filters.channel);
|
||||
if (filters.source_module) params.set("source_module", filters.source_module);
|
||||
if (filters.recipient_id) params.set("recipient_id", filters.recipient_id);
|
||||
if (filters.limit) params.set("limit", String(filters.limit));
|
||||
const query = params.toString();
|
||||
return apiFetch<NotificationListResponse>(settings, `/api/v1/notifications${query ? `?${query}` : ""}`);
|
||||
}
|
||||
|
||||
export function notificationSummary(settings: ApiSettings): Promise<NotificationSummary> {
|
||||
return apiFetch<NotificationSummary>(settings, "/api/v1/notifications/summary");
|
||||
}
|
||||
|
||||
export function getNotificationPreferences(settings: ApiSettings): Promise<NotificationPreferences> {
|
||||
return apiFetch<NotificationPreferences>(settings, "/api/v1/notifications/preferences/me");
|
||||
}
|
||||
|
||||
export function updateNotificationPreferences(settings: ApiSettings, payload: Partial<Pick<NotificationPreferences, "show_unread_badge" | "email_enabled" | "email_digest_enabled" | "muted_source_modules" | "metadata">>): Promise<NotificationPreferences> {
|
||||
return apiFetch<NotificationPreferences>(settings, "/api/v1/notifications/preferences/me", {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
}
|
||||
|
||||
export function updateNotification(settings: ApiSettings, notificationId: string, payload: { status?: "read" | "acknowledged" | "cancelled"; metadata?: Record<string, unknown> | null }): Promise<NotificationMessage> {
|
||||
return apiFetch<NotificationMessage>(settings, `/api/v1/notifications/${notificationId}`, {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
}
|
||||
|
||||
export function deliverPendingNotifications(settings: ApiSettings, limit = 50): Promise<NotificationDeliveryResult> {
|
||||
return apiFetch<NotificationDeliveryResult>(settings, "/api/v1/notifications/deliver-pending", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ limit })
|
||||
});
|
||||
}
|
||||
242
webui/src/features/notifications/NotificationCenterPage.tsx
Normal file
242
webui/src/features/notifications/NotificationCenterPage.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Bell, Check, ExternalLink, RefreshCw, Send, XCircle } from "lucide-react";
|
||||
import { Button, DismissibleAlert, hasScope, type ApiSettings, type AuthInfo } from "@govoplan/core-webui";
|
||||
import { deliverPendingNotifications, listNotifications, updateNotification, type NotificationMessage } from "../../api/notifications";
|
||||
|
||||
type StatusFilter = "all" | "pending" | "queued" | "sent" | "failed" | "skipped" | "cancelled";
|
||||
|
||||
const statusFilters: StatusFilter[] = ["all", "pending", "queued", "sent", "failed", "skipped", "cancelled"];
|
||||
|
||||
export default function NotificationCenterPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
|
||||
const [notifications, setNotifications] = useState<NotificationMessage[]>([]);
|
||||
const [selectedId, setSelectedId] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const canRead = hasScope(auth, "notifications:notification:read");
|
||||
const canWrite = hasScope(auth, "notifications:notification:write");
|
||||
const canDispatch = hasScope(auth, "notifications:delivery:dispatch");
|
||||
const selected = useMemo(() => notifications.find((item) => item.id === selectedId) || notifications[0] || null, [notifications, selectedId]);
|
||||
const unreadCount = notifications.filter((item) => !item.read_at && !["cancelled", "skipped"].includes(item.status)).length;
|
||||
|
||||
useEffect(() => {
|
||||
if (!canRead) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
void load();
|
||||
}, [canRead, settings.apiBaseUrl, settings.apiKey, settings.accessToken, statusFilter]);
|
||||
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const response = await listNotifications(settings, {
|
||||
status: statusFilter === "all" ? undefined : statusFilter,
|
||||
limit: 200
|
||||
});
|
||||
setNotifications(response.notifications);
|
||||
setSelectedId((current) => current && response.notifications.some((item) => item.id === current) ? current : response.notifications[0]?.id ?? "");
|
||||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function markSelected(status: "read" | "acknowledged" | "cancelled") {
|
||||
if (!selected || !canWrite) return;
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
const next = await updateNotification(settings, selected.id, { status });
|
||||
setNotifications((items) => items.map((item) => item.id === next.id ? next : item));
|
||||
notifyNotificationsChanged();
|
||||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function runDelivery() {
|
||||
if (!canDispatch) return;
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
await deliverPendingNotifications(settings, 50);
|
||||
await load();
|
||||
notifyNotificationsChanged();
|
||||
} catch (err) {
|
||||
setError(errorMessage(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!canRead) {
|
||||
return (
|
||||
<main className="notifications-page">
|
||||
<div className="notifications-empty-state">
|
||||
<Bell size={22} />
|
||||
<h1>Notifications</h1>
|
||||
<p>You do not have permission to read notifications in this tenant.</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="notifications-page">
|
||||
<div className="notifications-shell">
|
||||
<aside className="notifications-sidebar">
|
||||
<div className="notifications-sidebar-bar">
|
||||
<div className="notifications-title">
|
||||
<Bell size={17} />
|
||||
<strong>Notifications</strong>
|
||||
{unreadCount > 0 ? <span className="notifications-count">{unreadCount}</span> : null}
|
||||
</div>
|
||||
<Button className="notifications-icon-button" onClick={() => void load()} title="Refresh" disabled={loading || busy}>
|
||||
<RefreshCw size={16} />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="notifications-filter-row" role="tablist" aria-label="Notification status">
|
||||
{statusFilters.map((status) => (
|
||||
<button key={status} className={status === statusFilter ? "is-active" : ""} type="button" onClick={() => setStatusFilter(status)} role="tab" aria-selected={status === statusFilter}>
|
||||
{status}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="notifications-list">
|
||||
{loading ? <div className="notifications-note">Loading notifications</div> : null}
|
||||
{!loading && notifications.length === 0 ? <div className="notifications-note">No notifications in this view.</div> : null}
|
||||
{notifications.map((notification) => (
|
||||
<button
|
||||
key={notification.id}
|
||||
type="button"
|
||||
className={`notifications-list-item ${selected?.id === notification.id ? "is-selected" : ""} ${notification.read_at ? "is-read" : ""}`}
|
||||
onClick={() => setSelectedId(notification.id)}
|
||||
>
|
||||
<span className="notifications-list-heading">
|
||||
<strong>{notification.subject || notification.event_kind}</strong>
|
||||
<small>{formatStatus(notification.status)}</small>
|
||||
</span>
|
||||
<span className="notifications-list-meta">
|
||||
<span>{notification.source_module}</span>
|
||||
<span>{formatDate(notification.created_at)}</span>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</aside>
|
||||
<section className="notifications-workspace">
|
||||
<div className="notifications-topbar">
|
||||
<div className="notifications-title-line">
|
||||
<Bell size={18} />
|
||||
<strong>{selected?.subject || selected?.event_kind || "Notification center"}</strong>
|
||||
</div>
|
||||
<div className="notifications-actions">
|
||||
<Button onClick={() => void markSelected("read")} disabled={!selected || busy || !canWrite}>
|
||||
<Check size={16} /> Mark read
|
||||
</Button>
|
||||
<Button onClick={() => void markSelected("acknowledged")} disabled={!selected || busy || !canWrite}>
|
||||
<Check size={16} /> Acknowledge
|
||||
</Button>
|
||||
<Button onClick={() => void markSelected("cancelled")} disabled={!selected || busy || !canWrite}>
|
||||
<XCircle size={16} /> Cancel
|
||||
</Button>
|
||||
{canDispatch ? (
|
||||
<Button onClick={() => void runDelivery()} disabled={busy}>
|
||||
<Send size={16} /> Dispatch pending
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? <DismissibleAlert tone="danger" compact resetKey={error}>{error}</DismissibleAlert> : null}
|
||||
|
||||
{selected ? <NotificationDetails notification={selected} /> : (
|
||||
<div className="notifications-empty-state">
|
||||
<Bell size={22} />
|
||||
<h1>Notifications</h1>
|
||||
<p>Select a notification to inspect delivery state, source context, and content.</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function NotificationDetails({ notification }: { notification: NotificationMessage }) {
|
||||
return (
|
||||
<div className="notifications-detail">
|
||||
<section className="notifications-message">
|
||||
<div className="notifications-message-meta">
|
||||
<span className={`notifications-status status-${notification.status}`}>{formatStatus(notification.status)}</span>
|
||||
<span>{notification.channel}</span>
|
||||
<span>{formatDate(notification.created_at)}</span>
|
||||
</div>
|
||||
<h1>{notification.subject || notification.event_kind}</h1>
|
||||
{notification.body_text ? <p>{notification.body_text}</p> : <p className="muted">No message body was provided.</p>}
|
||||
{notification.action_url ? (
|
||||
<a className="notifications-action-link" href={notification.action_url}>
|
||||
<ExternalLink size={16} /> Open related item
|
||||
</a>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
<section className="notifications-properties">
|
||||
<h2>Source and delivery</h2>
|
||||
<dl>
|
||||
<div><dt>Source</dt><dd>{notification.source_module} / {notification.source_resource_type}</dd></div>
|
||||
<div><dt>Resource</dt><dd>{notification.source_resource_id || "None"}</dd></div>
|
||||
<div><dt>Recipient</dt><dd>{notification.recipient_label || notification.recipient || notification.recipient_id || "None"}</dd></div>
|
||||
<div><dt>Priority</dt><dd>{notification.priority}</dd></div>
|
||||
<div><dt>Queued</dt><dd>{formatDate(notification.queued_at)}</dd></div>
|
||||
<div><dt>Sent</dt><dd>{formatDate(notification.sent_at)}</dd></div>
|
||||
<div><dt>Read</dt><dd>{formatDate(notification.read_at)}</dd></div>
|
||||
<div><dt>Attempts</dt><dd>{notification.attempt_count}</dd></div>
|
||||
</dl>
|
||||
{notification.last_error ? <p className="notifications-error">{notification.last_error}</p> : null}
|
||||
</section>
|
||||
|
||||
<section className="notifications-attempts">
|
||||
<h2>Delivery attempts</h2>
|
||||
{notification.attempts.length === 0 ? <p className="muted">No delivery attempt has been recorded yet.</p> : null}
|
||||
{notification.attempts.map((attempt) => (
|
||||
<div className="notifications-attempt" key={attempt.id}>
|
||||
<strong>{attempt.provider || attempt.channel}</strong>
|
||||
<span>{formatStatus(attempt.status)}</span>
|
||||
<small>{formatDate(attempt.started_at)} - {formatDate(attempt.finished_at)}</small>
|
||||
{attempt.error ? <p>{attempt.error}</p> : null}
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatStatus(value: string): string {
|
||||
return value.replace(/_/g, " ");
|
||||
}
|
||||
|
||||
function formatDate(value?: string | null): string {
|
||||
if (!value) return "Not set";
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
dateStyle: "medium",
|
||||
timeStyle: "short"
|
||||
}).format(date);
|
||||
}
|
||||
|
||||
function errorMessage(error: unknown): string {
|
||||
return error instanceof Error ? error.message : "Request failed";
|
||||
}
|
||||
|
||||
function notifyNotificationsChanged(): void {
|
||||
window.dispatchEvent(new CustomEvent("govoplan:notifications-changed"));
|
||||
}
|
||||
150
webui/src/features/notifications/NotificationSettingsPanel.tsx
Normal file
150
webui/src/features/notifications/NotificationSettingsPanel.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Mail, Save } from "lucide-react";
|
||||
import { Button, Card, DismissibleAlert, FormField, ToggleSwitch, type ApiSettings, type AuthInfo } from "@govoplan/core-webui";
|
||||
import { getNotificationPreferences, updateNotificationPreferences, type NotificationPreferences } from "../../api/notifications";
|
||||
|
||||
type Draft = Pick<NotificationPreferences, "show_unread_badge" | "email_enabled" | "email_digest_enabled"> & {
|
||||
muted_source_modules_text: string;
|
||||
};
|
||||
|
||||
const DEFAULT_DRAFT: Draft = {
|
||||
show_unread_badge: true,
|
||||
email_enabled: false,
|
||||
email_digest_enabled: false,
|
||||
muted_source_modules_text: ""
|
||||
};
|
||||
|
||||
export default function NotificationSettingsPanel({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
|
||||
const [loaded, setLoaded] = useState<NotificationPreferences | null>(null);
|
||||
const [draft, setDraft] = useState<Draft>(DEFAULT_DRAFT);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [message, setMessage] = useState("");
|
||||
const [messageTone, setMessageTone] = useState<"success" | "warning">("success");
|
||||
|
||||
const dirty = useMemo(() => {
|
||||
if (!loaded) return false;
|
||||
return (
|
||||
draft.show_unread_badge !== loaded.show_unread_badge ||
|
||||
draft.email_enabled !== loaded.email_enabled ||
|
||||
draft.email_digest_enabled !== loaded.email_digest_enabled ||
|
||||
normalizeMutedModules(draft.muted_source_modules_text).join(",") !== loaded.muted_source_modules.join(",")
|
||||
);
|
||||
}, [draft, loaded]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadPreferences();
|
||||
}, [auth.user.id, settings.accessToken, settings.apiBaseUrl, settings.apiKey]);
|
||||
|
||||
async function loadPreferences() {
|
||||
setLoading(true);
|
||||
setMessage("");
|
||||
try {
|
||||
const preferences = await getNotificationPreferences(settings);
|
||||
setLoaded(preferences);
|
||||
setDraft({
|
||||
show_unread_badge: preferences.show_unread_badge,
|
||||
email_enabled: preferences.email_enabled,
|
||||
email_digest_enabled: preferences.email_digest_enabled,
|
||||
muted_source_modules_text: preferences.muted_source_modules.join(", ")
|
||||
});
|
||||
} catch (error) {
|
||||
setMessageTone("warning");
|
||||
setMessage(error instanceof Error ? error.message : "Loading notification preferences failed");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function savePreferences() {
|
||||
setSaving(true);
|
||||
setMessage("");
|
||||
try {
|
||||
const next = await updateNotificationPreferences(settings, {
|
||||
show_unread_badge: draft.show_unread_badge,
|
||||
email_enabled: draft.email_enabled,
|
||||
email_digest_enabled: draft.email_digest_enabled,
|
||||
muted_source_modules: normalizeMutedModules(draft.muted_source_modules_text)
|
||||
});
|
||||
setLoaded(next);
|
||||
setDraft({
|
||||
show_unread_badge: next.show_unread_badge,
|
||||
email_enabled: next.email_enabled,
|
||||
email_digest_enabled: next.email_digest_enabled,
|
||||
muted_source_modules_text: next.muted_source_modules.join(", ")
|
||||
});
|
||||
window.dispatchEvent(new CustomEvent("govoplan:notifications-changed"));
|
||||
setMessageTone("success");
|
||||
setMessage("Notification preferences saved.");
|
||||
} catch (error) {
|
||||
setMessageTone("warning");
|
||||
setMessage(error instanceof Error ? error.message : "Saving notification preferences failed");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="dashboard-grid settings-dashboard-grid notifications-settings-panel">
|
||||
<Card title="Notifications">
|
||||
<div className="form-grid">
|
||||
<ToggleSwitch
|
||||
label="Unread badge"
|
||||
help="Show unread notification counts in the top bar."
|
||||
checked={draft.show_unread_badge}
|
||||
disabled={loading}
|
||||
onChange={(value) => setDraft((current) => ({ ...current, show_unread_badge: value }))}
|
||||
/>
|
||||
<FormField label="Muted source modules" help="Comma-separated module IDs. Filtering will be applied by later delivery rules.">
|
||||
<input
|
||||
value={draft.muted_source_modules_text}
|
||||
onChange={(event) => setDraft((current) => ({ ...current, muted_source_modules_text: event.target.value }))}
|
||||
placeholder="calendar, campaign"
|
||||
disabled={loading}
|
||||
/>
|
||||
</FormField>
|
||||
<div className="button-row compact-actions">
|
||||
<Button variant="primary" onClick={() => void savePreferences()} disabled={loading || saving || !dirty}>
|
||||
<Save size={16} /> {saving ? "Saving" : "Save preferences"}
|
||||
</Button>
|
||||
</div>
|
||||
{message ? <DismissibleAlert tone={messageTone} resetKey={message} floating>{message}</DismissibleAlert> : null}
|
||||
</div>
|
||||
</Card>
|
||||
<Card title="Delivery">
|
||||
<div className="form-grid">
|
||||
<div className="notifications-settings-inline-title">
|
||||
<Mail size={16} />
|
||||
<strong>Email notifications</strong>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
label="Email notifications"
|
||||
help="Prepared for mail-backed notification delivery."
|
||||
checked={draft.email_enabled}
|
||||
disabled={loading}
|
||||
onChange={(value) => setDraft((current) => ({ ...current, email_enabled: value, email_digest_enabled: value ? current.email_digest_enabled : false }))}
|
||||
/>
|
||||
<ToggleSwitch
|
||||
label="Email digest"
|
||||
help="Batch eligible notifications into summary messages when delivery rules support it."
|
||||
checked={draft.email_digest_enabled}
|
||||
disabled={loading || !draft.email_enabled}
|
||||
onChange={(value) => setDraft((current) => ({ ...current, email_digest_enabled: value }))}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function normalizeMutedModules(value: string): string[] {
|
||||
const seen = new Set<string>();
|
||||
return value
|
||||
.split(",")
|
||||
.map((item) => item.trim().toLowerCase())
|
||||
.filter((item) => {
|
||||
if (!item || seen.has(item)) return false;
|
||||
seen.add(item);
|
||||
return true;
|
||||
});
|
||||
}
|
||||
4
webui/src/i18n/generatedTranslations.ts
Normal file
4
webui/src/i18n/generatedTranslations.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export const generatedTranslations = {
|
||||
en: {},
|
||||
de: {}
|
||||
};
|
||||
2
webui/src/index.ts
Normal file
2
webui/src/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { notificationsModule as default } from "./module";
|
||||
export { notificationsModule } from "./module";
|
||||
39
webui/src/module.ts
Normal file
39
webui/src/module.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { createElement, lazy } from "react";
|
||||
import type { PlatformWebModule, SettingsSectionsUiCapability } from "@govoplan/core-webui";
|
||||
import { generatedTranslations } from "./i18n/generatedTranslations";
|
||||
import "./styles/notifications.css";
|
||||
|
||||
const NotificationCenterPage = lazy(() => import("./features/notifications/NotificationCenterPage"));
|
||||
const NotificationSettingsPanel = lazy(() => import("./features/notifications/NotificationSettingsPanel"));
|
||||
|
||||
const notificationRead = ["notifications:notification:read"];
|
||||
|
||||
const notificationSettingsSections: SettingsSectionsUiCapability = {
|
||||
sections: [
|
||||
{
|
||||
id: "notifications",
|
||||
label: "Notifications",
|
||||
group: "ui",
|
||||
order: 40,
|
||||
anyOf: notificationRead,
|
||||
render: ({ settings, auth }) => createElement(NotificationSettingsPanel, { settings, auth })
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export const notificationsModule: PlatformWebModule = {
|
||||
id: "notifications",
|
||||
label: "Notifications",
|
||||
version: "1.0.0",
|
||||
dependencies: [],
|
||||
optionalDependencies: ["mail", "tasks", "portal", "workflow", "calendar", "scheduling"],
|
||||
translations: generatedTranslations,
|
||||
routes: [
|
||||
{ path: "/notifications", anyOf: notificationRead, order: 59, render: ({ settings, auth }) => createElement(NotificationCenterPage, { settings, auth }) }
|
||||
],
|
||||
uiCapabilities: {
|
||||
"settings.sections": notificationSettingsSections
|
||||
}
|
||||
};
|
||||
|
||||
export default notificationsModule;
|
||||
379
webui/src/styles/notifications.css
Normal file
379
webui/src/styles/notifications.css
Normal file
@@ -0,0 +1,379 @@
|
||||
.notifications-page {
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 115px);
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.notifications-page *,
|
||||
.notifications-page *::before,
|
||||
.notifications-page *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.notifications-shell {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
|
||||
border: var(--border-line);
|
||||
background: var(--panel);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notifications-sidebar {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: var(--border-line);
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.notifications-sidebar-bar,
|
||||
.notifications-title,
|
||||
.notifications-topbar,
|
||||
.notifications-title-line,
|
||||
.notifications-actions,
|
||||
.notifications-message-meta,
|
||||
.notifications-action-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.notifications-sidebar-bar,
|
||||
.notifications-topbar {
|
||||
min-height: 54px;
|
||||
justify-content: space-between;
|
||||
border-bottom: var(--border-line);
|
||||
background: var(--panel-header);
|
||||
padding: 9px 12px;
|
||||
}
|
||||
|
||||
.notifications-count {
|
||||
min-width: 21px;
|
||||
height: 21px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.notifications-icon-button.btn {
|
||||
width: 34px;
|
||||
min-width: 34px;
|
||||
height: 34px;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.notifications-filter-row {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 8px;
|
||||
border-bottom: var(--border-line);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.notifications-filter-row button {
|
||||
min-height: 28px;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 0 8px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.notifications-filter-row button:hover,
|
||||
.notifications-filter-row button.is-active {
|
||||
background: var(--sidebar-hover-bg);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
.notifications-list {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 4px;
|
||||
overflow: auto;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.notifications-list-item {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-height: 58px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
padding: 9px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.notifications-list-item:hover,
|
||||
.notifications-list-item.is-selected {
|
||||
background: var(--sidebar-hover-bg);
|
||||
}
|
||||
|
||||
.notifications-list-item.is-selected {
|
||||
box-shadow: inset 3px 0 var(--accent);
|
||||
}
|
||||
|
||||
.notifications-list-item.is-read {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.notifications-list-heading,
|
||||
.notifications-list-meta {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.notifications-list-heading strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--text-strong);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notifications-list-heading small,
|
||||
.notifications-list-meta,
|
||||
.notifications-note {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.notifications-workspace {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notifications-title-line {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.notifications-title-line strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notifications-actions {
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.notifications-actions .btn {
|
||||
min-height: 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.notifications-workspace > .alert {
|
||||
margin: 8px 12px 0;
|
||||
}
|
||||
|
||||
.notifications-detail {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.notifications-message,
|
||||
.notifications-properties,
|
||||
.notifications-attempts {
|
||||
border-bottom: var(--border-line);
|
||||
margin-bottom: 18px;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.notifications-message h1 {
|
||||
margin: 10px 0 8px;
|
||||
color: var(--text-strong);
|
||||
font-size: 24px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.notifications-message p {
|
||||
max-width: 840px;
|
||||
margin: 0 0 14px;
|
||||
line-height: 1.6;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.notifications-message-meta {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.notifications-status {
|
||||
border-radius: 999px;
|
||||
background: var(--panel-soft);
|
||||
color: var(--text);
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.notifications-status.status-failed {
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger-text);
|
||||
}
|
||||
|
||||
.notifications-status.status-sent {
|
||||
background: var(--success-soft);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.notifications-status.status-queued,
|
||||
.notifications-status.status-pending {
|
||||
background: var(--warning-bg);
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
.notifications-action-link {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.notifications-action-link:hover {
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
.notifications-settings-panel {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.notifications-settings-inline-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-strong);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.notifications-properties h2,
|
||||
.notifications-attempts h2 {
|
||||
margin: 0 0 12px;
|
||||
color: var(--text-strong);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.notifications-properties dl {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(180px, 1fr));
|
||||
gap: 10px 18px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notifications-properties div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.notifications-properties dt {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.notifications-properties dd {
|
||||
min-width: 0;
|
||||
margin: 3px 0 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.notifications-error {
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
margin: 14px 0 0;
|
||||
border-radius: 6px;
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger-text);
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.notifications-attempt {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 3px 12px;
|
||||
border: var(--border-line);
|
||||
border-radius: 6px;
|
||||
background: var(--surface);
|
||||
margin-bottom: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.notifications-attempt small,
|
||||
.notifications-attempt p {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.notifications-empty-state {
|
||||
min-height: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
gap: 8px;
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notifications-empty-state h1 {
|
||||
margin: 0;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
.notifications-empty-state p {
|
||||
max-width: 520px;
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.notifications-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.notifications-sidebar {
|
||||
min-height: 220px;
|
||||
border-right: 0;
|
||||
border-bottom: var(--border-line);
|
||||
}
|
||||
|
||||
.notifications-topbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.notifications-properties dl {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user