feat: add intake-desk route with triage cards (#242)

src/app/intake-desk/_components/assignment-panel.tsx

@@ -0,0 +1,68 @@
+import type { AssignmentEntry } from "../_data/intake-desk-data";
+import styles from "../intake-desk.module.css";
+
+const statusLabels: Record<AssignmentEntry["status"], string> = {
+  unassigned: "Unassigned",
+  "in-progress": "In Progress",
+  completed: "Completed",
+};
+
+const statusBadgeStyles: Record<AssignmentEntry["status"], string> = {
+  unassigned: "border-slate-300/20 bg-slate-300/10 text-slate-50",
+  "in-progress": "border-amber-300/20 bg-amber-300/10 text-amber-50",
+  completed: "border-emerald-300/20 bg-emerald-300/10 text-emerald-50",
+};
+
+type AssignmentPanelProps = {
+  entries: AssignmentEntry[];
+};
+
+export function AssignmentPanel({ entries }: AssignmentPanelProps) {
+  return (
+    <section aria-label="Assignment summary" className="space-y-5">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-400">
+          Assignments
+        </p>
+        <h2 className="text-3xl font-semibold tracking-tight text-white sm:text-4xl">
+          Assignment summary
+        </h2>
+        <p className="max-w-2xl text-sm leading-6 text-slate-300">
+          Current assignment status for triaged requests. Track who owns each
+          item and its progress toward completion.
+        </p>
+      </div>
+
+      <div
+        className={`${styles.assignmentPanel} rounded-[1.5rem] border border-white/10 p-5`}
+      >
+        <div className="space-y-3" role="list" aria-label="Assignment entries">
+          {entries.map((entry) => (
+            <article
+              key={entry.id}
+              className={`${styles.assignmentRow} rounded-2xl border border-white/8 px-5 py-4`}
+              role="listitem"
+            >
+              <div className="flex flex-wrap items-start justify-between gap-3">
+                <div className="space-y-1">
+                  <p className="text-sm font-semibold text-white">
+                    {entry.requestTitle}
+                  </p>
+                  <p className="text-xs text-slate-400">{entry.assignee}</p>
+                </div>
+                <span
+                  className={`${styles.statusBadge} inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] ${statusBadgeStyles[entry.status]}`}
+                >
+                  {statusLabels[entry.status]}
+                </span>
+              </div>
+              <p className="mt-2 text-xs text-slate-400">
+                Due: {entry.dueDate}
+              </p>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/app/intake-desk/_components/request-card.tsx

@@ -0,0 +1,71 @@
+import type { IncomingRequest } from "../_data/intake-desk-data";
+import styles from "../intake-desk.module.css";
+
+const urgencyLabels: Record<IncomingRequest["urgency"], string> = {
+  low: "Low",
+  normal: "Normal",
+  high: "High",
+  critical: "Critical",
+};
+
+const urgencyBadgeStyles: Record<IncomingRequest["urgency"], string> = {
+  low: "border-emerald-300/20 bg-emerald-300/10 text-emerald-50",
+  normal: "border-cyan-300/20 bg-cyan-300/10 text-cyan-50",
+  high: "border-amber-300/20 bg-amber-300/10 text-amber-50",
+  critical: "border-rose-300/20 bg-rose-300/10 text-rose-50",
+};
+
+const urgencySurfaceStyles: Record<IncomingRequest["urgency"], string> = {
+  low: styles.urgencyLow,
+  normal: styles.urgencyNormal,
+  high: styles.urgencyHigh,
+  critical: styles.urgencyCritical,
+};
+
+type RequestCardProps = {
+  request: IncomingRequest;
+};
+
+export function RequestCard({ request }: RequestCardProps) {
+  return (
+    <article
+      className={`${styles.requestCard} ${urgencySurfaceStyles[request.urgency]} rounded-[1.7rem] border p-6`}
+      role="listitem"
+    >
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="space-y-1">
+          <h3 className="text-lg font-semibold tracking-tight text-white">
+            {request.title}
+          </h3>
+          <p className="text-sm text-slate-300">{request.requester}</p>
+        </div>
+        <span
+          className={`${styles.statusBadge} inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] ${urgencyBadgeStyles[request.urgency]}`}
+        >
+          {urgencyLabels[request.urgency]}
+        </span>
+      </div>
+
+      <div className="mt-4 grid gap-3 sm:grid-cols-2">
+        <div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">
+            Category
+          </p>
+          <p className="mt-1 text-sm font-medium text-slate-100">
+            {request.category}
+          </p>
+        </div>
+        <div className="rounded-2xl border border-white/8 bg-white/5 px-4 py-3">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">
+            Received
+          </p>
+          <p className="mt-1 text-sm font-medium text-slate-100">
+            {request.receivedAt}
+          </p>
+        </div>
+      </div>
+
+      <p className="mt-4 text-sm leading-6 text-slate-300">{request.summary}</p>
+    </article>
+  );
+}

src/app/intake-desk/_components/triage-card.tsx

@@ -0,0 +1,52 @@
+import type { TriageCard } from "../_data/intake-desk-data";
+import styles from "../intake-desk.module.css";
+
+const outcomeLabels: Record<TriageCard["outcome"], string> = {
+  accepted: "Accepted",
+  deferred: "Deferred",
+  escalated: "Escalated",
+  rejected: "Rejected",
+};
+
+const outcomeBadgeStyles: Record<TriageCard["outcome"], string> = {
+  accepted: "border-emerald-300/20 bg-emerald-300/10 text-emerald-50",
+  deferred: "border-cyan-300/20 bg-cyan-300/10 text-cyan-50",
+  escalated: "border-amber-300/20 bg-amber-300/10 text-amber-50",
+  rejected: "border-rose-300/20 bg-rose-300/10 text-rose-50",
+};
+
+const outcomeSurfaceStyles: Record<TriageCard["outcome"], string> = {
+  accepted: styles.outcomeAccepted,
+  deferred: styles.outcomeDeferred,
+  escalated: styles.outcomeEscalated,
+  rejected: styles.outcomeRejected,
+};
+
+type TriageCardItemProps = {
+  card: TriageCard;
+};
+
+export function TriageCardItem({ card }: TriageCardItemProps) {
+  return (
+    <article
+      className={`${styles.triageCard} ${outcomeSurfaceStyles[card.outcome]} rounded-[1.7rem] border p-6`}
+      role="listitem"
+    >
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="space-y-1">
+          <h3 className="text-lg font-semibold tracking-tight text-white">
+            {card.reviewer}
+          </h3>
+          <p className="text-sm text-slate-300">{card.reviewedAt}</p>
+        </div>
+        <span
+          className={`${styles.statusBadge} inline-flex rounded-full border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] ${outcomeBadgeStyles[card.outcome]}`}
+        >
+          {outcomeLabels[card.outcome]}
+        </span>
+      </div>
+
+      <p className="mt-4 text-sm leading-6 text-slate-300">{card.notes}</p>
+    </article>
+  );
+}