376 lines
16 KiB
TypeScript
376 lines
16 KiB
TypeScript
import { useEffect, useMemo, useState } from "react";
|
|
import { Bell, Check, ExternalLink, RefreshCw, Send, XCircle } from "lucide-react";
|
|
import {
|
|
ActionBlockerHint,
|
|
AdminIconButton,
|
|
Button,
|
|
ConfirmDialog,
|
|
DismissibleAlert,
|
|
DocumentationHelpLink,
|
|
SegmentedControl,
|
|
SelectionList,
|
|
SelectionListItem,
|
|
StatusBadge,
|
|
hasScope,
|
|
i18nMessage,
|
|
type ApiSettings,
|
|
type AuthInfo
|
|
} from "@govoplan/core-webui";
|
|
import { deliverPendingNotifications, listNotifications, updateNotification, type NotificationMessage } from "../../api/notifications";
|
|
import { safeNotificationActionUrl } from "../../security/actionUrl";
|
|
import {
|
|
NOTIFICATIONS_BLOCKER_LABELS,
|
|
NOTIFICATIONS_DELIVERY_DOCUMENTATION,
|
|
NOTIFICATIONS_DOCUMENTATION,
|
|
NOTIFICATIONS_I18N
|
|
} from "./interfacePatterns";
|
|
|
|
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"
|
|
];
|
|
|
|
const cancellableStatuses = new Set(["pending", "queued", "paused", "failed"]);
|
|
|
|
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 [confirmingAction, setConfirmingAction] = useState<"cancel" | "dispatch" | null>(null);
|
|
|
|
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;
|
|
const commonSelectionReason = busy
|
|
? NOTIFICATIONS_I18N.actionActive
|
|
: !selected
|
|
? NOTIFICATIONS_I18N.selectionRequired
|
|
: !canWrite
|
|
? NOTIFICATIONS_I18N.writePermissionRequired
|
|
: undefined;
|
|
const markReadDisabledReason = commonSelectionReason ?? (selected?.read_at ? NOTIFICATIONS_I18N.alreadyRead : undefined);
|
|
const acknowledgeDisabledReason = commonSelectionReason ?? (selected?.acknowledged_at ? NOTIFICATIONS_I18N.alreadyAcknowledged : undefined);
|
|
const cancelDisabledReason = commonSelectionReason ?? (selected && !cancellableStatuses.has(selected.status) ? NOTIFICATIONS_I18N.notCancellable : undefined);
|
|
const dispatchDisabledReason = busy
|
|
? NOTIFICATIONS_I18N.actionActive
|
|
: !canDispatch
|
|
? NOTIFICATIONS_I18N.dispatchPermissionRequired
|
|
: undefined;
|
|
|
|
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"): Promise<boolean> {
|
|
if (!selected || !canWrite) return false;
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
const next = await updateNotification(settings, selected.id, { status });
|
|
setNotifications((items) => items.map((item) => item.id === next.id ? next : item));
|
|
notifyNotificationsChanged();
|
|
return true;
|
|
} catch (err) {
|
|
setError(errorMessage(err));
|
|
return false;
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
async function runDelivery(): Promise<boolean> {
|
|
if (!canDispatch) return false;
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
await deliverPendingNotifications(settings, 50);
|
|
await load();
|
|
notifyNotificationsChanged();
|
|
return true;
|
|
} catch (err) {
|
|
setError(errorMessage(err));
|
|
return false;
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
async function confirmAction() {
|
|
const succeeded = confirmingAction === "cancel"
|
|
? await markSelected("cancelled")
|
|
: confirmingAction === "dispatch"
|
|
? await runDelivery()
|
|
: false;
|
|
if (succeeded) setConfirmingAction(null);
|
|
}
|
|
|
|
if (!canRead) {
|
|
return (
|
|
<main className="notifications-page">
|
|
<div className="notifications-permission-state">
|
|
<ActionBlockerHint
|
|
tone="warning"
|
|
reason={{
|
|
summary: "i18n:govoplan-notifications.read_blocked_summary",
|
|
details: NOTIFICATIONS_I18N.readPermissionRequired,
|
|
requiredAction: "i18n:govoplan-notifications.permission_action",
|
|
actor: "i18n:govoplan-notifications.permission_actor",
|
|
target: "i18n:govoplan-notifications.permission_target"
|
|
}}
|
|
labels={NOTIFICATIONS_BLOCKER_LABELS}
|
|
documentation={NOTIFICATIONS_DOCUMENTATION}
|
|
/>
|
|
</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>i18n:govoplan-notifications.notifications</strong>
|
|
{unreadCount > 0 ? <span className="notifications-count">{unreadCount}</span> : null}
|
|
</div>
|
|
<AdminIconButton
|
|
label="i18n:govoplan-notifications.refresh"
|
|
icon={<RefreshCw size={16} aria-hidden="true" />}
|
|
onClick={() => void load()}
|
|
disabled={loading || busy}
|
|
disabledReason={loading ? NOTIFICATIONS_I18N.loading : busy ? NOTIFICATIONS_I18N.actionActive : undefined}
|
|
/>
|
|
</div>
|
|
<SegmentedControl
|
|
className="notifications-status-filter"
|
|
options={statusFilters.map((status) => ({ id: status, label: statusLabel(status) }))}
|
|
value={statusFilter}
|
|
onChange={setStatusFilter}
|
|
ariaLabel="i18n:govoplan-notifications.notification_status"
|
|
width="fill"
|
|
/>
|
|
<div className="notifications-list">
|
|
{loading ? <div className="notifications-note">i18n:govoplan-notifications.loading_notifications</div> : null}
|
|
{!loading && notifications.length === 0 ? <div className="notifications-note">i18n:govoplan-notifications.no_notifications</div> : null}
|
|
{notifications.length > 0 ? (
|
|
<SelectionList label="i18n:govoplan-notifications.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 || "i18n:govoplan-notifications.surface.center"}</strong>
|
|
</div>
|
|
<div className="notifications-actions">
|
|
<DocumentationHelpLink reference={NOTIFICATIONS_DOCUMENTATION} />
|
|
<Button onClick={() => void markSelected("read")} disabled={Boolean(markReadDisabledReason)} disabledReason={markReadDisabledReason}>
|
|
<Check size={16} /> i18n:govoplan-notifications.mark_read
|
|
</Button>
|
|
<Button onClick={() => void markSelected("acknowledged")} disabled={Boolean(acknowledgeDisabledReason)} disabledReason={acknowledgeDisabledReason}>
|
|
<Check size={16} /> i18n:govoplan-notifications.acknowledge
|
|
</Button>
|
|
<Button variant="danger" onClick={() => setConfirmingAction("cancel")} disabled={Boolean(cancelDisabledReason)} disabledReason={cancelDisabledReason}>
|
|
<XCircle size={16} /> i18n:govoplan-notifications.cancel_delivery
|
|
</Button>
|
|
<Button onClick={() => setConfirmingAction("dispatch")} disabled={Boolean(dispatchDisabledReason)} disabledReason={dispatchDisabledReason}>
|
|
<Send size={16} /> i18n:govoplan-notifications.dispatch_pending
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{error ? <DismissibleAlert tone="danger" compact resetKey={error}>{error}</DismissibleAlert> : null}
|
|
|
|
{selected && !canWrite ? (
|
|
<ActionBlockerHint
|
|
tone="info"
|
|
reason={{
|
|
summary: "i18n:govoplan-notifications.actions_read_only_summary",
|
|
details: NOTIFICATIONS_I18N.writePermissionRequired,
|
|
requiredAction: "i18n:govoplan-notifications.permission_action",
|
|
actor: "i18n:govoplan-notifications.permission_actor",
|
|
target: "i18n:govoplan-notifications.permission_target"
|
|
}}
|
|
labels={NOTIFICATIONS_BLOCKER_LABELS}
|
|
documentation={NOTIFICATIONS_DOCUMENTATION}
|
|
/>
|
|
) : null}
|
|
|
|
{selected ? <NotificationDetails notification={selected} /> : (
|
|
<div className="notifications-empty-state">
|
|
<Bell size={22} />
|
|
<h1>i18n:govoplan-notifications.notifications</h1>
|
|
<p>i18n:govoplan-notifications.select_notification_help</p>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</div>
|
|
<ConfirmDialog
|
|
open={confirmingAction === "cancel"}
|
|
title="i18n:govoplan-notifications.cancel_delivery_title"
|
|
message={i18nMessage("i18n:govoplan-notifications.cancel_delivery_message", { value0: selected?.subject || selected?.event_kind || "i18n:govoplan-notifications.selected_notification" })}
|
|
confirmLabel="i18n:govoplan-notifications.cancel_delivery"
|
|
tone="danger"
|
|
busy={busy}
|
|
onCancel={() => setConfirmingAction(null)}
|
|
onConfirm={() => void confirmAction()}
|
|
/>
|
|
<ConfirmDialog
|
|
open={confirmingAction === "dispatch"}
|
|
title="i18n:govoplan-notifications.dispatch_pending_title"
|
|
message="i18n:govoplan-notifications.dispatch_pending_message"
|
|
confirmLabel="i18n:govoplan-notifications.dispatch_pending"
|
|
busy={busy}
|
|
onCancel={() => setConfirmingAction(null)}
|
|
onConfirm={() => void confirmAction()}
|
|
/>
|
|
</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">i18n:govoplan-notifications.no_message_body</p>}
|
|
{actionUrl ? (
|
|
<a className="notifications-action-link" href={actionUrl}>
|
|
<ExternalLink size={16} /> i18n:govoplan-notifications.open_related_item
|
|
</a>
|
|
) : null}
|
|
</section>
|
|
|
|
<section className="notifications-properties">
|
|
<h2>i18n:govoplan-notifications.source_and_delivery</h2>
|
|
<dl>
|
|
<div><dt>i18n:govoplan-notifications.source</dt><dd>{notification.source_module} / {notification.source_resource_type}</dd></div>
|
|
<div><dt>i18n:govoplan-notifications.resource</dt><dd>{notification.source_resource_id || "i18n:govoplan-notifications.none"}</dd></div>
|
|
<div><dt>i18n:govoplan-notifications.recipient</dt><dd>{notification.recipient_label || notification.recipient || notification.recipient_id || "i18n:govoplan-notifications.none"}</dd></div>
|
|
<div><dt>i18n:govoplan-notifications.priority</dt><dd>{notification.priority}</dd></div>
|
|
<div><dt>i18n:govoplan-notifications.queued</dt><dd>{formatDate(notification.queued_at)}</dd></div>
|
|
<div><dt>i18n:govoplan-notifications.sent</dt><dd>{formatDate(notification.sent_at)}</dd></div>
|
|
<div><dt>i18n:govoplan-notifications.read</dt><dd>{formatDate(notification.read_at)}</dd></div>
|
|
<div><dt>i18n:govoplan-notifications.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">
|
|
<div className="notifications-section-heading">
|
|
<h2>i18n:govoplan-notifications.delivery_attempts</h2>
|
|
<DocumentationHelpLink reference={NOTIFICATIONS_DELIVERY_DOCUMENTATION} />
|
|
</div>
|
|
{notification.attempts.length === 0 ? <p className="muted">i18n:govoplan-notifications.no_delivery_attempt</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 statusLabel(value);
|
|
}
|
|
|
|
function statusLabel(value: string): string {
|
|
return `i18n:govoplan-notifications.status.${value.replace(/[^a-z0-9]+/gi, "_").toLowerCase()}`;
|
|
}
|
|
|
|
function formatDate(value?: string | null): string {
|
|
if (!value) return "i18n:govoplan-notifications.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 : "i18n:govoplan-notifications.request_failed";
|
|
}
|
|
|
|
function notifyNotificationsChanged(): void {
|
|
window.dispatchEvent(new CustomEvent("govoplan:notifications-changed"));
|
|
}
|