72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
|
|
import type { DetailSummary } from "./model";
|
|
|
|
type DetailShellProps = {
|
|
summary: DetailSummary;
|
|
};
|
|
|
|
export function ArticleDetailShell({ summary }: DetailShellProps) {
|
|
const timeline = summary.timeline;
|
|
|
|
return (
|
|
<section>
|
|
<h2>Article detail</h2>
|
|
<dl className="detailGrid">
|
|
<div>
|
|
<dt>Article ID</dt>
|
|
<dd>{summary.articleId}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Status</dt>
|
|
<dd>{summary.status}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Publishing status</dt>
|
|
<dd>{summary.publishingStatus}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Target site</dt>
|
|
<dd>{summary.targetSite}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Last updated</dt>
|
|
<dd>{new Date(summary.updatedAt).toLocaleString()}</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<h3>Brief</h3>
|
|
<p>{summary.briefDescription}</p>
|
|
|
|
<ul className="inlineLinks">
|
|
<li>
|
|
<Link href={`/articles/${summary.articleId}/boundary-questions`}>
|
|
Boundary questions
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link href={`/articles/${summary.articleId}/plans`}>Plan review</Link>
|
|
</li>
|
|
<li>
|
|
<Link href={`/articles/${summary.articleId}/research`}>Research</Link>
|
|
</li>
|
|
<li>
|
|
<Link href={`/articles/${summary.articleId}/evidence`}>Evidence matrix</Link>
|
|
</li>
|
|
</ul>
|
|
|
|
<h3>Workflow timeline</h3>
|
|
<ul className="timeline">
|
|
{timeline.map((event) => (
|
|
<li key={event.id}>
|
|
<strong>{event.event_type}</strong> from {event.from_status ?? "—"} to{" "}
|
|
{event.to_status ?? "—"} at {new Date(event.created_at).toLocaleString()}
|
|
{event.actor_user_id ? <span> • actor {event.actor_user_id}</span> : null}
|
|
</li>
|
|
))}
|
|
{timeline.length === 0 ? <li>No workflow events yet.</li> : null}
|
|
</ul>
|
|
</section>
|
|
);
|
|
}
|