269 lines
11 KiB
TypeScript
269 lines
11 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import { Bell, Check, ExternalLink, RefreshCw, Send, XCircle } from "lucide-react";
|
|
import { AdminIconButton, Button, DismissibleAlert, SegmentedControl, SelectionList, SelectionListItem, StatusBadge, hasScope, type ApiSettings, type AuthInfo } from "@govoplan/core-webui";
|
|
import { deliverPendingNotifications, listNotifications, updateNotification, type NotificationMessage } from "../../api/notifications";
|
|
import { safeNotificationActionUrl } from "../../security/actionUrl";
|
|
|
|
type StatusFilter =
|
|
| "all"
|
|
| "pending"
|
|
| "queued"
|
|
| "sending"
|
|
| "accepted"
|
|
| "paused"
|
|
| "sent"
|
|
| "failed"
|
|
| "skipped"
|
|
| "cancelled";
|
|
|
|
const statusFilters: StatusFilter[] = [
|
|
"all",
|
|
"pending",
|
|
"queued",
|
|
"sending",
|
|
"accepted",
|
|
"paused",
|
|
"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>
|
|
<AdminIconButton label="Refresh" icon={<RefreshCw size={16} aria-hidden="true" />} onClick={() => void load()} disabled={loading || busy} />
|
|
</div>
|
|
<SegmentedControl
|
|
className="notifications-status-filter"
|
|
options={statusFilters.map((status) => ({ id: status, label: status }))}
|
|
value={statusFilter}
|
|
onChange={setStatusFilter}
|
|
ariaLabel="Notification status"
|
|
width="fill"
|
|
/>
|
|
<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.length > 0 ? (
|
|
<SelectionList label="Notifications" className="notifications-selection-list">
|
|
{notifications.map((notification) => (
|
|
<SelectionListItem
|
|
key={notification.id}
|
|
selected={selected?.id === notification.id}
|
|
className={`notifications-list-item ${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>
|
|
</SelectionListItem>
|
|
))}
|
|
</SelectionList>
|
|
) : null}
|
|
</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 }) {
|
|
const actionUrl = safeNotificationActionUrl(notification.action_url);
|
|
return (
|
|
<div className="notifications-detail">
|
|
<section className="notifications-message">
|
|
<div className="notifications-message-meta">
|
|
<StatusBadge status={notification.status} label={formatStatus(notification.status)} />
|
|
<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>}
|
|
{actionUrl ? (
|
|
<a className="notifications-action-link" href={actionUrl}>
|
|
<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"));
|
|
}
|