src/features/inbox/operations-preview.tsx

Linked repository file from this build.

import { Flag, Mail, ChartNoAxesCombined, Settings2 } from "lucide-react";

const previews = [
  {
    title: "Flagged for help",
    icon: Flag,
    audience: "Review support",
    items: [
      ["Policy clarification", "Questions that need a second opinion"],
      ["Calculation assistance", "Income and deduction checks"],
      ["Supervisor follow-up", "Review blockers awaiting guidance"],
    ],
  },
  {
    title: "Outgoing mail",
    icon: Mail,
    audience: "Correspondence",
    items: [
      ["Appointment notices", "Ready for printing and mailing"],
      ["Verification requests", "Documents to request from households"],
      ["CAO correspondence", "Memos to send and responses to track"],
    ],
  },
  {
    title: "Reporting readiness",
    icon: ChartNoAxesCombined,
    audience: "Statistics",
    items: [
      ["Monthly sample checks", "Missing assignments and incomplete records"],
      ["Release exceptions", "Reviews needing a final data check"],
      ["Export preparation", "Month-end totals and submission readiness"],
    ],
  },
  {
    title: "Administration",
    icon: Settings2,
    audience: "Operations",
    items: [
      ["Staff access", "Account setup and role changes"],
      ["Assignment coverage", "Unassigned work and team coverage"],
      ["Policy updates", "Upcoming tables and effective months"],
    ],
  },
];

export function OperationsPreview({ operationsFirst }: { operationsFirst: boolean }) {
  const ordered = operationsFirst ? [...previews.slice(2), ...previews.slice(0, 2)] : previews;
  return (
    <section className="space-y-3" aria-labelledby="operations-heading">
      <div>
        <h2 id="operations-heading" className="text-base font-semibold">
          Around the office
        </h2>
        <p className="mt-1 text-xs text-muted-foreground">
          Preview of shared work queues. Sample categories, with live counts to come.
        </p>
      </div>
      <div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,17rem),20rem))] items-start gap-3">
        {ordered.map(({ title, icon: Icon, audience, items }) => (
          <section
            key={title}
            aria-label={title}
            className="min-w-0 overflow-hidden rounded-lg border bg-card shadow-xs"
          >
            <div className="flex h-10 items-center justify-between gap-2 border-b bg-muted/40 px-3">
              <h3 className="flex items-center gap-2 text-sm font-semibold">
                <Icon className="size-3.5 text-muted-foreground" aria-hidden />
                {title}
              </h3>
              <span className="rounded border px-1.5 py-0.5 text-[0.625rem] text-muted-foreground">
                Preview
              </span>
            </div>
            <ul className="divide-y">
              {items.map(([label, detail]) => (
                <li key={label} className="px-3 py-2.5">
                  <p className="text-xs font-medium">{label}</p>
                  <p className="mt-0.5 text-xs text-muted-foreground">{detail}</p>
                </li>
              ))}
            </ul>
            <p className="border-t bg-muted/20 px-3 py-2 text-[0.7rem] text-muted-foreground">
              {audience}
            </p>
          </section>
        ))}
      </div>
    </section>
  );
}