From 8b29d20940162380cd73aa44e76f89430bd4dc1c Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.local>
Date: Sun, 12 Apr 2026 23:18:36 +0200
Subject: [PATCH] StepBoxGridReview: show box border color from structure
 detection

- Use box_bg_hex for border color (from Step 7 structure detection)
- Numbered color badges per box
- Show color name in box header
- Add box_bg_color/box_bg_hex to GridZone type

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 admin-lehrer/components/grid-editor/types.ts  |  2 ++
 .../ocr-kombi/StepBoxGridReview.tsx           | 24 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/admin-lehrer/components/grid-editor/types.ts b/admin-lehrer/components/grid-editor/types.ts
index f8d2aa1..dd82e36 100644
--- a/admin-lehrer/components/grid-editor/types.ts
+++ b/admin-lehrer/components/grid-editor/types.ts
@@ -75,6 +75,8 @@ export interface GridZone {
   vsplit_group?: number
   box_layout_type?: 'flowing' | 'columnar' | 'bullet_list' | 'header_only'
   box_grid_reviewed?: boolean
+  box_bg_color?: string
+  box_bg_hex?: string
 }
 
 export interface BBox {
diff --git a/admin-lehrer/components/ocr-kombi/StepBoxGridReview.tsx b/admin-lehrer/components/ocr-kombi/StepBoxGridReview.tsx
index 2255147..bca7cec 100644
--- a/admin-lehrer/components/ocr-kombi/StepBoxGridReview.tsx
+++ b/admin-lehrer/components/ocr-kombi/StepBoxGridReview.tsx
@@ -192,15 +192,27 @@ export function StepBoxGridReview({ sessionId, onNext }: StepBoxGridReviewProps)
       )}
 
       {/* Box zones */}
-      {boxZones.map((zone, boxIdx) => (
+      {boxZones.map((zone, boxIdx) => {
+        const boxColor = zone.box_bg_hex || '#d97706' // amber fallback
+        const boxColorName = zone.box_bg_color || 'box'
+        return (
         <div
           key={zone.zone_index}
-          className="bg-white dark:bg-gray-800 rounded-xl border-2 border-amber-300 dark:border-amber-700 overflow-hidden"
+          className="bg-white dark:bg-gray-800 rounded-xl overflow-hidden"
+          style={{ border: `3px solid ${boxColor}` }}
         >
           {/* Box header */}
-          <div className="flex items-center justify-between px-4 py-3 bg-amber-50 dark:bg-amber-900/30 border-b border-amber-200 dark:border-amber-800">
+          <div
+            className="flex items-center justify-between px-4 py-3 border-b"
+            style={{ backgroundColor: `${boxColor}15`, borderColor: `${boxColor}30` }}
+          >
             <div className="flex items-center gap-3">
-              <span className="text-lg">📦</span>
+              <div
+                className="w-8 h-8 rounded-lg flex items-center justify-center text-white text-sm font-bold"
+                style={{ backgroundColor: boxColor }}
+              >
+                {boxIdx + 1}
+              </div>
               <div>
                 <span className="font-medium text-gray-900 dark:text-white">
                   Box {boxIdx + 1}
@@ -209,6 +221,7 @@ export function StepBoxGridReview({ sessionId, onNext }: StepBoxGridReviewProps)
                   {zone.bbox_px?.w}x{zone.bbox_px?.h}px
                   {zone.cells?.length ? ` | ${zone.cells.length} Zellen` : ''}
                   {zone.box_layout_type ? ` | ${LAYOUT_LABELS[zone.box_layout_type as BoxLayoutType] || zone.box_layout_type}` : ''}
+                  {boxColorName !== 'box' ? ` | ${boxColorName}` : ''}
                 </span>
               </div>
             </div>
@@ -262,7 +275,8 @@ export function StepBoxGridReview({ sessionId, onNext }: StepBoxGridReviewProps)
             )}
           </div>
         </div>
-      ))}
+        )
+      })}
     </div>
   )
 }