intermittent commit
This commit is contained in:
@@ -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"));
|
||||
}
|
||||
Reference in New Issue
Block a user