From 13306da676ad72059abc71d3ae97d2d461e23094 Mon Sep 17 00:00:00 2001
From: Marcos Reifonas <m.reifonas@gmail.com>
Date: Thu, 10 Sep 2026 14:32:17 +0000
Subject: [PATCH] fix: adicionar importacao de Users e renderizacao segura de
 StepIcon no MapaInterativo

---
 src/pages/MapaInterativo.tsx | 44 ++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/pages/MapaInterativo.tsx b/src/pages/MapaInterativo.tsx
index 067c668..b1f4d56 100644
--- a/src/pages/MapaInterativo.tsx
+++ b/src/pages/MapaInterativo.tsx
@@ -32,7 +32,8 @@ import {
   Layers,
   Clock,
   Check,
-  ChevronRight
+  ChevronRight,
+  Users
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
@@ -720,23 +721,25 @@ export default function MapaInterativo() {
       {/* DRAWER / GAVETA LATERAL DIDÁTICA (O Coração da Experiência) */}
       <Sheet open={selectedStep !== null} onOpenChange={(open) => !open && setSelectedStep(null)}>
         <SheetContent side="right" className="w-full sm:max-w-lg overflow-y-auto p-6 space-y-6">
-          {selectedStep && (
-            <>
-              {/* Cabeçalho do Drawer */}
-              <SheetHeader className="space-y-2 border-b border-border/60 pb-4">
-                <div className="flex items-center gap-2">
-                  <Badge variant="outline" className={selectedStep.phaseColor.badge}>
-                    Etapa {selectedStep.orderNumber} • {selectedStep.phaseName}
-                  </Badge>
-                </div>
-                <SheetTitle className="text-xl font-extrabold text-foreground flex items-center gap-2">
-                  <selectedStep.icon className={cn("h-6 w-6", selectedStep.phaseColor.accent)} />
-                  {selectedStep.title}
-                </SheetTitle>
-                <SheetDescription className="text-xs text-muted-foreground">
-                  {selectedStep.subtitle}
-                </SheetDescription>
-              </SheetHeader>
+          {selectedStep && (() => {
+            const StepIcon = selectedStep.icon;
+            return (
+              <>
+                {/* Cabeçalho do Drawer */}
+                <SheetHeader className="space-y-2 border-b border-border/60 pb-4">
+                  <div className="flex items-center gap-2">
+                    <Badge variant="outline" className={selectedStep.phaseColor.badge}>
+                      Etapa {selectedStep.orderNumber} • {selectedStep.phaseName}
+                    </Badge>
+                  </div>
+                  <SheetTitle className="text-xl font-extrabold text-foreground flex items-center gap-2">
+                    {StepIcon && <StepIcon className={cn("h-6 w-6", selectedStep.phaseColor.accent)} />}
+                    {selectedStep.title}
+                  </SheetTitle>
+                  <SheetDescription className="text-xs text-muted-foreground">
+                    {selectedStep.subtitle}
+                  </SheetDescription>
+                </SheetHeader>
 
               {/* Botão de Ação Direta para a Tela Real */}
               <div>
@@ -821,8 +824,9 @@ export default function MapaInterativo() {
                   ))}
                 </div>
               </div>
-            </>
-          )}
+              </>
+            );
+          })()}
         </SheetContent>
       </Sheet>
     </div>