feat: add interactive project atlas

frontend/src/components/overview/OverviewWorkspace.tsx

@@ -8,6 +8,7 @@ import type {
 import type { useSourceFreshness } from '../../hooks/useSourceFreshness'
 import { SourceFreshnessPanel } from '../status/SourceFreshnessPanel'
 import { WorkbenchStatusStrip } from '../WorkbenchStatusStrip'
+import { ProjectAtlasIllustration } from './ProjectAtlasIllustration'
 
 export type WorkspaceKey = 'overview' | 'data' | 'map' | 'assistant' | 'analysis' | 'ai' | 'exports' | 'system'
 
@@ -118,6 +119,15 @@ export function OverviewWorkspace({
 
   return (
     <div className="workspace-stack">
+      <ProjectAtlasIllustration
+        projectName={selectedProject?.name ?? 'de GeoIntel-werkruimte'}
+        areaCount={areas.length}
+        datasetCount={datasets.length}
+        featureCount={activeLayerFeatureCount}
+        hasAnalysisOutput={hasAnalysisOutput}
+        exportCount={exports.length}
+        onOpenWorkspace={onOpenWorkspace}
+      />
       <WorkbenchStatusStrip
         selectedProject={selectedProject}
         areas={areas}

frontend/src/components/overview/ProjectAtlasIllustration.test.tsx

@@ -0,0 +1,46 @@
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ProjectAtlasIllustration } from './ProjectAtlasIllustration'
+
+afterEach(cleanup)
+
+describe('ProjectAtlasIllustration', () => {
+  it('derives the active project phase from real readiness and opens its workspace', () => {
+    const onOpenWorkspace = vi.fn()
+
+    render(
+      <ProjectAtlasIllustration
+        projectName="Belgium and North Sea Workbench"
+        areaCount={2}
+        datasetCount={7}
+        featureCount={0}
+        hasAnalysisOutput={false}
+        exportCount={0}
+        onOpenWorkspace={onOpenWorkspace}
+      />,
+    )
+
+    expect(screen.getByText('2', { selector: '.project-atlas-metrics strong' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Open kaart' }).className).toContain('project-atlas-stage-active')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Open kaart' }))
+    expect(onOpenWorkspace).toHaveBeenCalledWith('map')
+  })
+
+  it('marks the complete chain ready without inventing additional data', () => {
+    render(
+      <ProjectAtlasIllustration
+        projectName="Mol Municipality Workbench"
+        areaCount={1}
+        datasetCount={3}
+        featureCount={14}
+        hasAnalysisOutput
+        exportCount={1}
+        onOpenWorkspace={() => undefined}
+      />,
+    )
+
+    expect(document.querySelectorAll('.project-atlas-stage-ready')).toHaveLength(5)
+    expect(screen.getByText('14', { selector: '.project-atlas-metrics strong' })).toBeTruthy()
+  })
+})

frontend/src/components/overview/ProjectAtlasIllustration.tsx

@@ -0,0 +1,121 @@
+import { BadgeCheck, Download, Layers3, Map, ScanSearch } from 'lucide-react'
+import type { WorkspaceKey } from './OverviewWorkspace'
+
+interface ProjectAtlasIllustrationProps {
+  projectName: string
+  areaCount: number
+  datasetCount: number
+  featureCount: number
+  hasAnalysisOutput: boolean
+  exportCount: number
+  onOpenWorkspace: (target: WorkspaceKey) => void
+}
+
+const stages = [
+  { key: 'data', label: 'Gebied', icon: Map },
+  { key: 'data', label: 'Bronnen', icon: Layers3 },
+  { key: 'map', label: 'Kaart', icon: ScanSearch },
+  { key: 'analysis', label: 'Analyse', icon: BadgeCheck },
+  { key: 'exports', label: 'Export', icon: Download },
+] as const
+
+const signalPoints = [
+  { x: 116, y: 222 },
+  { x: 275, y: 130 },
+  { x: 432, y: 179 },
+  { x: 561, y: 87 },
+] as const
+
+export function ProjectAtlasIllustration({
+  projectName,
+  areaCount,
+  datasetCount,
+  featureCount,
+  hasAnalysisOutput,
+  exportCount,
+  onOpenWorkspace,
+}: ProjectAtlasIllustrationProps): JSX.Element {
+  const readiness = [areaCount > 0, datasetCount > 0, featureCount > 0, hasAnalysisOutput, exportCount > 0]
+  const activeIndex = readiness.findIndex((ready) => !ready)
+  const currentIndex = activeIndex === -1 ? readiness.length - 1 : activeIndex
+
+  return (
+    <section className="project-atlas" aria-labelledby="project-atlas-title">
+      <div className="project-atlas-copy">
+        <p className="eyebrow">Levende projectatlas</p>
+        <h2 id="project-atlas-title">Van grondgebied naar aantoonbaar resultaat</h2>
+        <p>
+          Volg de operationele keten van <strong>{projectName}</strong>. Elke halte opent de bijbehorende werkruimte.
+        </p>
+        <div className="project-atlas-metrics" aria-label="Projectkerncijfers">
+          <span><strong>{areaCount}</strong> gebieden</span>
+          <span><strong>{datasetCount}</strong> bronnen</span>
+          <span><strong>{featureCount.toLocaleString('nl-BE')}</strong> objecten</span>
+        </div>
+      </div>
+
+      <div className="project-atlas-visual" aria-hidden="true">
+        <svg viewBox="0 0 680 300" role="presentation">
+          <defs>
+            <linearGradient id="atlas-sea" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0" stopColor="#0b4b45" />
+              <stop offset="1" stopColor="#082a32" />
+            </linearGradient>
+            <linearGradient id="atlas-land" x1="0" y1="0" x2="1" y2="1">
+              <stop offset="0" stopColor="#80d2ba" />
+              <stop offset="1" stopColor="#2f8f7d" />
+            </linearGradient>
+            <filter id="atlas-glow" x="-60%" y="-60%" width="220%" height="220%">
+              <feGaussianBlur stdDeviation="7" />
+            </filter>
+          </defs>
+          <rect width="680" height="300" rx="28" fill="url(#atlas-sea)" />
+          <g className="atlas-grid-lines">
+            <path d="M0 60H680M0 120H680M0 180H680M0 240H680" />
+            <path d="M85 0V300M170 0V300M255 0V300M340 0V300M425 0V300M510 0V300M595 0V300" />
+          </g>
+          <path className="atlas-coast-halo" d="M260 5C303 32 298 60 334 72c31 10 62-7 87 16 30 27 3 53 28 77 21 20 70 9 78 45 8 38-42 52-47 85H181c5-34 42-53 36-86-7-39-54-52-46-88 6-31 50-29 64-56 12-23 5-42 25-60Z" />
+          <path className="atlas-land-shape" d="M260 5C303 32 298 60 334 72c31 10 62-7 87 16 30 27 3 53 28 77 21 20 70 9 78 45 8 38-42 52-47 85H181c5-34 42-53 36-86-7-39-54-52-46-88 6-31 50-29 64-56 12-23 5-42 25-60Z" />
+          <g className="atlas-contours">
+            <path d="M225 61c46 18 63 2 102 25 38 22 54 15 91 33" />
+            <path d="M197 126c58-19 95 5 129 28 39 27 83 18 130 39" />
+            <path d="M210 220c44-23 87-17 126 3 38 19 79 5 132 24" />
+          </g>
+          <path className="atlas-route" pathLength="1" d="M116 222C180 188 193 114 275 130c65 13 91 78 157 49 55-24 69-78 129-92" />
+          {signalPoints.map((point, index) => (
+            <g className={`atlas-signal atlas-signal-${index + 1}`} key={`${point.x}-${point.y}`}>
+              <circle className="atlas-signal-glow" cx={point.x} cy={point.y} r="15" filter="url(#atlas-glow)" />
+              <circle className="atlas-signal-ring" cx={point.x} cy={point.y} r="10" />
+              <circle className="atlas-signal-core" cx={point.x} cy={point.y} r="3.5" />
+            </g>
+          ))}
+          <g className="atlas-scan">
+            <path d="M60 48H620" />
+            <rect x="58" y="41" width="564" height="14" rx="7" />
+          </g>
+        </svg>
+        <span className="project-atlas-live"><i /> live projectbeeld</span>
+      </div>
+
+      <div className="project-atlas-stages" aria-label="Open een projectfase">
+        {stages.map((stage, index) => {
+          const Icon = stage.icon
+          const state = readiness[index] ? 'ready' : index === currentIndex ? 'active' : 'waiting'
+          return (
+            <button
+              key={`${stage.label}-${index}`}
+              type="button"
+              className={`project-atlas-stage project-atlas-stage-${state}`}
+              onClick={() => onOpenWorkspace(stage.key)}
+              aria-label={`Open ${stage.label.toLowerCase()}`}
+            >
+              <span><Icon aria-hidden="true" /></span>
+              <strong>{stage.label}</strong>
+              <small>{state === 'ready' ? 'gereed' : state === 'active' ? 'volgende' : 'wacht'}</small>
+            </button>
+          )
+        })}
+      </div>
+    </section>
+  )
+}