feat: add review bucket filtering and status indication in task board

frontend/src/components/molecules/TaskCard.tsx

@@ -2,8 +2,11 @@ import { CalendarClock, UserCircle } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+type TaskStatus = "inbox" | "in_progress" | "review" | "done";
+
 interface TaskCardProps {
   title: string;
+  status?: TaskStatus;
   priority?: string;
   assignee?: string;
   due?: string;
@@ -19,6 +22,7 @@ interface TaskCardProps {
 
 export function TaskCard({
   title,
+  status,
   priority,
   assignee,
   due,
@@ -32,10 +36,13 @@ export function TaskCard({
   onDragEnd,
 }: TaskCardProps) {
   const hasPendingApproval = approvalsPendingCount > 0;
+  const needsLeadReview = status === "review" && !isBlocked && !hasPendingApproval;
   const leftBarClassName = isBlocked
     ? "bg-rose-400"
     : hasPendingApproval
       ? "bg-amber-400"
+      : needsLeadReview
+        ? "bg-indigo-400"
       : null;
   const priorityBadge = (value?: string) => {
     if (!value) return null;
@@ -61,6 +68,7 @@ export function TaskCard({
         isDragging && "opacity-60 shadow-none",
         hasPendingApproval && "border-amber-200 bg-amber-50/40",
         isBlocked && "border-rose-200 bg-rose-50/50",
+        needsLeadReview && "border-indigo-200 bg-indigo-50/30",
       )}
       draggable={draggable}
       onDragStart={onDragStart}
@@ -98,6 +106,12 @@ export function TaskCard({
               Approval needed · {approvalsPendingCount}
             </div>
           ) : null}
+          {needsLeadReview ? (
+            <div className="flex items-center gap-2 text-[10px] font-semibold uppercase tracking-wide text-indigo-700">
+              <span className="h-1.5 w-1.5 rounded-full bg-indigo-500" />
+              Waiting for lead review
+            </div>
+          ) : null}
         </div>
         <div className="flex flex-col items-end gap-2">
           <span

frontend/src/components/organisms/TaskBoard.tsx

@@ -28,6 +28,8 @@ type TaskBoardProps = {
   onTaskMove?: (taskId: string, status: TaskStatus) => void | Promise<void>;
 };
 
+type ReviewBucket = "all" | "approval_needed" | "waiting_lead" | "blocked";
+
 const columns: Array<{
   title: string;
   status: TaskStatus;
@@ -99,6 +101,7 @@ export const TaskBoard = memo(function TaskBoard({
 
   const [draggingId, setDraggingId] = useState<string | null>(null);
   const [activeColumn, setActiveColumn] = useState<TaskStatus | null>(null);
+  const [reviewBucket, setReviewBucket] = useState<ReviewBucket>("all");
 
   const setCardRef = useCallback(
     (taskId: string) => (node: HTMLDivElement | null) => {
@@ -310,6 +313,42 @@ export const TaskBoard = memo(function TaskBoard({
     >
       {columns.map((column) => {
         const columnTasks = grouped[column.status] ?? [];
+        const reviewCounts =
+          column.status === "review"
+            ? columnTasks.reduce(
+                (acc, task) => {
+                  if (task.is_blocked) {
+                    acc.blocked += 1;
+                    return acc;
+                  }
+                  if ((task.approvals_pending_count ?? 0) > 0) {
+                    acc.approval_needed += 1;
+                    return acc;
+                  }
+                  acc.waiting_lead += 1;
+                  return acc;
+                },
+                {
+                  all: columnTasks.length,
+                  approval_needed: 0,
+                  waiting_lead: 0,
+                  blocked: 0,
+                },
+              )
+            : null;
+
+        const filteredTasks =
+          column.status === "review" && reviewBucket !== "all"
+            ? columnTasks.filter((task) => {
+                if (reviewBucket === "blocked") return Boolean(task.is_blocked);
+                if (reviewBucket === "approval_needed")
+                  return (task.approvals_pending_count ?? 0) > 0 && !task.is_blocked;
+                if (reviewBucket === "waiting_lead")
+                  return !task.is_blocked && (task.approvals_pending_count ?? 0) === 0;
+                return true;
+              })
+            : columnTasks;
+
         return (
           <div
             key={column.title}
@@ -335,16 +374,52 @@ export const TaskBoard = memo(function TaskBoard({
                     column.badge,
                   )}
                 >
-                  {columnTasks.length}
+                  {filteredTasks.length}
                 </span>
               </div>
+              {column.status === "review" && reviewCounts ? (
+                <div className="mt-2 flex flex-wrap items-center gap-2 text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+                  {(
+                    [
+                      { key: "all", label: "All", count: reviewCounts.all },
+                      {
+                        key: "approval_needed",
+                        label: "Approval needed",
+                        count: reviewCounts.approval_needed,
+                      },
+                      {
+                        key: "waiting_lead",
+                        label: "Lead review",
+                        count: reviewCounts.waiting_lead,
+                      },
+                      { key: "blocked", label: "Blocked", count: reviewCounts.blocked },
+                    ] as const
+                  ).map((option) => (
+                    <button
+                      key={option.key}
+                      type="button"
+                      onClick={() => setReviewBucket(option.key)}
+                      className={cn(
+                        "rounded-full border px-2.5 py-1 transition",
+                        reviewBucket === option.key
+                          ? "border-slate-900 bg-slate-900 text-white"
+                          : "border-slate-200 bg-white text-slate-600 hover:border-slate-300 hover:bg-slate-50",
+                      )}
+                      aria-pressed={reviewBucket === option.key}
+                    >
+                      {option.label} · {option.count}
+                    </button>
+                  ))}
+                </div>
+              ) : null}
             </div>
             <div className="rounded-b-xl border border-t-0 border-slate-200 bg-white p-3">
               <div className="space-y-3">
-                {columnTasks.map((task) => (
+                {filteredTasks.map((task) => (
                   <div key={task.id} ref={setCardRef(task.id)}>
                     <TaskCard
                       title={task.title}
+                      status={task.status}
                       priority={task.priority}
                       assignee={task.assignee ?? undefined}
                       due={formatDueDate(task.due_at)}