55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
import { Briefcase, Robot } from "../../ui/icons"
|
|
import type { AgentRecord, ApprovalRecord, TaskRecord } from "@shared/types"
|
|
import { formatTime } from "../../../lib/formatters"
|
|
import { StatusPill } from "../../ui"
|
|
import { useT } from "../../../i18n"
|
|
import { TypeBadge } from "./TypeBadge"
|
|
|
|
export function ApprovalSummary({
|
|
approval,
|
|
requestingAgent,
|
|
relatedTask,
|
|
}: {
|
|
approval: ApprovalRecord
|
|
requestingAgent: AgentRecord | null
|
|
relatedTask: TaskRecord | null
|
|
}) {
|
|
const t = useT()
|
|
return (
|
|
<>
|
|
<div className="flex items-center gap-3">
|
|
<TypeBadge type={approval.type} />
|
|
<StatusPill status={approval.state} />
|
|
</div>
|
|
<div className="text-[13px] font-medium text-foreground">{approval.payloadSummary}</div>
|
|
{approval.impactSummary ? (
|
|
<div className="text-[13px] text-muted-foreground">{approval.impactSummary}</div>
|
|
) : null}
|
|
<div className="grid gap-2 text-[13px] md:grid-cols-2">
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Robot size={14} />
|
|
{t("approval.requestedBy")}{" "}
|
|
<span className="font-medium text-foreground">{requestingAgent?.name ?? t("approval.unknownRequester")}</span>
|
|
{requestingAgent?.role ? (
|
|
<span className="text-[10px] text-muted-foreground">({requestingAgent.role})</span>
|
|
) : null}
|
|
</div>
|
|
{relatedTask ? (
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Briefcase size={14} />
|
|
{t("approval.task")} <span className="font-medium text-foreground">{relatedTask.title}</span>
|
|
</div>
|
|
) : null}
|
|
<div className="text-muted-foreground">
|
|
{t("approval.created")} <span className="font-mono text-foreground">{formatTime(approval.createdAt)}</span>
|
|
</div>
|
|
{approval.updatedAt !== approval.createdAt ? (
|
|
<div className="text-muted-foreground">
|
|
{t("approval.updated")} <span className="font-mono text-foreground">{formatTime(approval.updatedAt)}</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|