44 lines
2.0 KiB
TypeScript
44 lines
2.0 KiB
TypeScript
import type { ApiSettings } from "../../types";
|
|
import Card from "../../components/Card";
|
|
import Button from "../../components/Button";
|
|
import PageTitle from "../../components/PageTitle";
|
|
import LoadingFrame from "../../components/LoadingFrame";
|
|
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
|
|
import { formatDateTime } from "./utils/campaignView";
|
|
|
|
export default function CampaignReportPage({ settings, campaignId }: { settings: ApiSettings; campaignId: string }) {
|
|
const { data, loading, error, reload } = useCampaignWorkspaceData(settings, campaignId, { includeSummary: true });
|
|
const version = data.currentVersion;
|
|
const cards = data.summary?.cards;
|
|
|
|
return (
|
|
<div className="content-pad workspace-data-page">
|
|
<div className="page-heading split workspace-heading">
|
|
<div>
|
|
<PageTitle loading={loading}>Report</PageTitle>
|
|
<p className="mono-small">Version {version ? `#${version.version_number}` : "—"} · Loaded {formatDateTime(version?.updated_at ?? data.summary?.generated_at)}</p>
|
|
</div>
|
|
<div className="button-row compact-actions">
|
|
<Button onClick={reload} disabled={loading}>Reload</Button>
|
|
</div>
|
|
</div>
|
|
{error && <div className="alert danger">{error}</div>}
|
|
<LoadingFrame loading={loading} label="Loading report data…">
|
|
<div className="dashboard-grid">
|
|
<Card title="Report summary">
|
|
<dl className="detail-list">
|
|
<div><dt>Generated</dt><dd>{formatDateTime(data.summary?.generated_at)}</dd></div>
|
|
<div><dt>Jobs total</dt><dd>{cards?.jobs_total ?? "—"}</dd></div>
|
|
<div><dt>Sent</dt><dd>{cards?.sent ?? "—"}</dd></div>
|
|
<div><dt>Failed</dt><dd>{cards?.failed ?? "—"}</dd></div>
|
|
</dl>
|
|
</Card>
|
|
<Card title="Exports">
|
|
<p className="muted">CSV export and report-emailing buttons will be added once the report section is reviewed.</p>
|
|
</Card>
|
|
</div>
|
|
</LoadingFrame>
|
|
</div>
|
|
);
|
|
}
|