feat: Show import as active when waiting for review

Include waiting_for_review in is_importing() so the navbar highlights
when user action is needed. Add needs_review field to distinguish
"system working" from "user must act." Navbar pulses amber, jobs table
badge changes from blue/Clock to amber/AlertCircle, sidebar shows
"Review needed" with attention indicator.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jhf

app/src/app/getting-started/@progress/nav-item.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Link from "next/link";
-import { Check, Loader2 } from "lucide-react";
+import { AlertCircle, Check, Loader2 } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { ReactNode } from "react";
@@ -11,13 +11,15 @@ export const NavItem = ({
   done,
   subtitle,
   processing,
+  needsAttention,
   icon,
 }: {
   readonly title: string;
   readonly subtitle?: string;
   readonly href: string;
   readonly done?: boolean;
   readonly processing?: boolean;
+  readonly needsAttention?: boolean;
   readonly icon?: ReactNode;
 }) => {
   const pathname = usePathname();
@@ -33,13 +35,15 @@ export const NavItem = ({
           {icon && <span className="text-gray-500">{icon}</span>}
           {title}
         </Link>
-        {processing ? (
+        {needsAttention ? (
+          <AlertCircle className="w-5 h-5 text-amber-500 animate-pulse" />
+        ) : processing ? (
           <Loader2 className="w-5 h-5 text-yellow-500 animate-spin" />
         ) : (
           done && <Check className="w-5 h-5" />
         )}
       </div>
-      {(done || processing) && subtitle && (
+      {(done || processing || needsAttention) && subtitle && (
         <span className="text-xs text-gray-700">{subtitle}</span>
       )}
     </>

app/src/app/import/@progress/default.tsx

@@ -31,6 +31,7 @@ export default function ImportStatus() {
 
   // Determine if any import process is active using workerStatus only
   const isImporting = mounted ? (safeWorkerStatus.isImporting ?? false) : false;
+  const needsReview = mounted ? (safeWorkerStatus.importing?.needs_review ?? false) : false;
   const isDeriving = mounted ?
     ((safeWorkerStatus.isDerivingUnits || safeWorkerStatus.isDerivingReports) ?? false) : false;
 
@@ -95,9 +96,10 @@ export default function ImportStatus() {
               done={false}
               title="View Jobs"
               href="/import/jobs"
-              subtitle="Monitor ongoing imports"
+              subtitle={needsReview ? "Review needed" : "Monitor ongoing imports"}
               icon={<FileText className="w-4 h-4" />}
-              processing={isImporting}
+              processing={isImporting && !needsReview}
+              needsAttention={needsReview}
             />
           </li>
           <li className="mb-6">

app/src/app/import/jobs/page.tsx

@@ -58,7 +58,7 @@ const jobStatuses = [
   { value: "preparing_data", label: "Preparing", icon: Loader },
   { value: "analysing_data", label: "Analyzing", icon: Hourglass },
   { value: "processing_data", label: "Processing", icon: Hourglass },
-  { value: "waiting_for_review", label: "Review", icon: Clock },
+  { value: "waiting_for_review", label: "Review", icon: AlertCircle },
   { value: "approved", label: "Approved", icon: ThumbsUp },
   { value: "finished", label: "Finished", icon: CheckCircle },
   { value: "rejected", label: "Rejected", icon: ThumbsDown },
@@ -353,7 +353,7 @@ export default function ImportJobsPage() {
         const statusBadge = (
           <Badge
             variant="secondary"
-            className={job.state === 'waiting_for_review' ? 'bg-blue-100 text-blue-800 hover:bg-blue-200' : ''}
+            className={job.state === 'waiting_for_review' ? 'bg-amber-100 text-amber-800 hover:bg-amber-200' : ''}
           >
             {status?.icon && <status.icon className="mr-2 h-4 w-4" />}
             {status?.label ?? job.state}

app/src/atoms/worker_status.ts

@@ -47,6 +47,7 @@ export interface ImportJobProgress {
 
 export interface ImportStatus {
   active: boolean;
+  needs_review: boolean;
   jobs: ImportJobProgress[];
 }
 
@@ -152,15 +153,16 @@ export const setWorkerStatusAtom = atom(
         newJobs.push(updatedJob);
       }
 
-      // Only keep actively importing jobs
-      const activeJobs = newJobs.filter(j => j.state === 'analysing_data' || j.state === 'processing_data');
+      // Only keep actively importing or review-waiting jobs
+      const activeJobs = newJobs.filter(j => j.state === 'analysing_data' || j.state === 'processing_data' || j.state === 'waiting_for_review');
+      const needsReview = activeJobs.some(j => j.state === 'waiting_for_review');
 
       set(workerStatusAtom, {
         ...prevStatus,
         loading: false,
         error: null,
         isImporting: activeJobs.length > 0 ? true : prevStatus.isImporting,
-        importing: { active: activeJobs.length > 0, jobs: activeJobs },
+        importing: { active: activeJobs.length > 0, needs_review: needsReview, jobs: activeJobs },
       });
       return;
     }
@@ -207,10 +209,10 @@ export const setWorkerStatusAtom = atom(
       updatedStatus.isImporting = status;
       if (!status) {
         // Import completed — clear jobs
-        updatedStatus.importing = { active: false, jobs: [] };
+        updatedStatus.importing = { active: false, needs_review: false, jobs: [] };
       } else if (!prevStatus.importing?.active) {
         // New import starting — mark active, keep any jobs from initial RPC
-        updatedStatus.importing = { active: true, jobs: prevStatus.importing?.jobs ?? [] };
+        updatedStatus.importing = { active: true, needs_review: prevStatus.importing?.needs_review ?? false, jobs: prevStatus.importing?.jobs ?? [] };
       }
     } else if (type === 'is_deriving_statistical_units') {
       updatedStatus.isDerivingUnits = status;

app/src/components/navbar.tsx

@@ -202,6 +202,7 @@ function NavLink({
   icon: Icon,
   label,
   isActive,
+  needsAttention,
   isCurrent,
   progressPct,
   popoverContent,
@@ -210,10 +211,25 @@ function NavLink({
   icon: React.ComponentType<{ size: number }>;
   label: string;
   isActive: boolean | null;
+  needsAttention?: boolean;
   isCurrent: boolean;
   progressPct: number | null;
   popoverContent: React.ReactNode | null;
 }) {
+  const borderColor = needsAttention
+    ? "border-amber-400"
+    : isActive
+      ? "border-yellow-400"
+      : isCurrent
+        ? "border-white"
+        : "border-transparent";
+
+  const infoColor = needsAttention
+    ? "text-amber-400 hover:bg-white/20"
+    : isActive
+      ? "text-yellow-400 hover:bg-white/20"
+      : "invisible";
+
   return (
     <div className="relative hidden lg:flex items-center">
       <Link
@@ -222,18 +238,17 @@ function NavLink({
           buttonVariants({ variant: "ghost", size: "sm" }),
           "space-x-2 relative overflow-hidden",
           "border-1",
-          isActive
-            ? "border-yellow-400"
-            : isCurrent
-              ? "border-white"
-              : "border-transparent"
+          borderColor,
+          needsAttention && "animate-pulse"
         )}
         style={
-          isActive && progressPct !== null
-            ? {
-                backgroundImage: `linear-gradient(to right, rgba(250, 204, 21, 0.25) ${progressPct}%, transparent ${progressPct}%)`,
-              }
-            : undefined
+          needsAttention
+            ? { backgroundColor: "rgba(245, 158, 11, 0.2)" }
+            : isActive && progressPct !== null
+              ? {
+                  backgroundImage: `linear-gradient(to right, rgba(250, 204, 21, 0.25) ${progressPct}%, transparent ${progressPct}%)`,
+                }
+              : undefined
         }
       >
         <Icon size={16} />
@@ -245,17 +260,15 @@ function NavLink({
             <button
               className={cn(
                 "ml-0.5 p-0.5 rounded",
-                isActive
-                  ? "text-yellow-400 hover:bg-white/20"
-                  : "invisible"
+                infoColor
               )}
               aria-label={`${label} progress details`}
             >
               <Info size={14} />
             </button>
           </PopoverTrigger>
           <PopoverContent className="w-80">
-            <h4 className="font-medium mb-2 text-sm">{label} Progress</h4>
+            <h4 className="font-medium mb-2 text-sm">{needsAttention ? `${label} — Action Needed` : `${label} Progress`}</h4>
             {popoverContent}
           </PopoverContent>
         </Popover>
@@ -334,12 +347,15 @@ export default function Navbar() {
                 icon={Upload}
                 label="Import"
                 isActive={isImporting}
+                needsAttention={importing?.needs_review ?? false}
                 isCurrent={pathname.startsWith("/import")}
                 progressPct={importPct}
                 popoverContent={isImporting
-                  ? (importing?.active && importing.jobs.length > 0
-                    ? <ImportProgressPopover importing={importing} />
-                    : <p className="text-sm text-gray-500">Import is active...</p>)
+                  ? (importing?.needs_review
+                    ? <p className="text-sm text-amber-700">Import needs review — {importing.jobs.filter(j => j.state === 'waiting_for_review').length} job(s) waiting for your approval</p>
+                    : importing?.active && importing.jobs.length > 0
+                      ? <ImportProgressPopover importing={importing} />
+                      : <p className="text-sm text-gray-500">Import is active...</p>)
                   : null}
               />
 

migrations/20260310145700_include_waiting_for_review_in_is_importing.down.sql

@@ -0,0 +1,28 @@
+BEGIN;
+
+CREATE OR REPLACE FUNCTION public.is_importing()
+ RETURNS jsonb
+ LANGUAGE sql
+ STABLE
+AS $function$
+  SELECT jsonb_build_object(
+    'active', EXISTS (
+      SELECT 1 FROM public.import_job
+      WHERE state IN ('preparing_data', 'analysing_data', 'processing_data')
+    ),
+    'jobs', COALESCE(
+      (SELECT jsonb_agg(jsonb_build_object(
+        'id', ij.id,
+        'state', ij.state,
+        'total_rows', ij.total_rows,
+        'imported_rows', ij.imported_rows,
+        'analysis_completed_pct', ij.analysis_completed_pct,
+        'import_completed_pct', ij.import_completed_pct
+      )) FROM public.import_job AS ij
+      WHERE ij.state IN ('preparing_data', 'analysing_data', 'processing_data')),
+      '[]'::jsonb
+    )
+  );
+$function$;
+
+END;

migrations/20260310145700_include_waiting_for_review_in_is_importing.up.sql

@@ -0,0 +1,32 @@
+BEGIN;
+
+CREATE OR REPLACE FUNCTION public.is_importing()
+ RETURNS jsonb
+ LANGUAGE sql
+ STABLE
+AS $function$
+  SELECT jsonb_build_object(
+    'active', EXISTS (
+      SELECT 1 FROM public.import_job
+      WHERE state IN ('preparing_data', 'analysing_data', 'processing_data', 'waiting_for_review')
+    ),
+    'needs_review', EXISTS (
+      SELECT 1 FROM public.import_job
+      WHERE state = 'waiting_for_review'
+    ),
+    'jobs', COALESCE(
+      (SELECT jsonb_agg(jsonb_build_object(
+        'id', ij.id,
+        'state', ij.state,
+        'total_rows', ij.total_rows,
+        'imported_rows', ij.imported_rows,
+        'analysis_completed_pct', ij.analysis_completed_pct,
+        'import_completed_pct', ij.import_completed_pct
+      )) FROM public.import_job AS ij
+      WHERE ij.state IN ('preparing_data', 'analysing_data', 'processing_data', 'waiting_for_review')),
+      '[]'::jsonb
+    )
+  );
+$function$;
+
+END;