🚀 Auto-deploy: BrainWind atualizado em 27/07/2026 16:55:52

app/src/pages/ShelterModule.tsx

@@ -0,0 +1,408 @@
+import React, { useMemo, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Slider } from '@/components/ui/slider';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useWindStore } from '@/store/appStore';
+import {
+  calculateShelterWind,
+  type ShelterCondition,
+  type OpeningPosition,
+} from '@/lib/nbr-tables/table-shelters';
+import Shelter3D from '@/components/three/Shelter3D';
+import SceneCanvas from '@/components/SceneCanvas';
+import SceneCapturePanel from '../components/SceneCapturePanel';
+import ExportMenu from '../components/ExportMenu';
+import { EducationalManual } from '@/components/EducationalManual';
+import { WindParametersSummary } from '@/components/WindParametersSummary';
+import { SaveModuleDialog } from '@/components/SaveModuleDialog';
+import { exportGenericToPDF, type GenericPDFSection } from '../lib/export-generic-pdf';
+import { Eye, Box, Layers, ShieldCheck, ArrowUpRight, CheckCircle2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const conditionLabels: Record<ShelterCondition, string> = {
+  cond1: '1. Estanque 3 lados (Fundo + Lados)',
+  cond2: '2. Fundo Fechado + Lados Abertos',
+  cond3: '3. Fundo Aberto + Lados Fechados (Túnel)',
+  cond4: '4. Totalmente Livre (4 lados abertos)',
+};
+
+const ShelterModule: React.FC = () => {
+  const { q } = useWindStore();
+  const [condition, setCondition] = useState<ShelterCondition>('cond1');
+  const [depth, setDepth] = useState(6);
+  const [width, setWidth] = useState(10);
+  const [height, setHeight] = useState(4.8);
+  const [theta, setTheta] = useState(5);
+  const [backClosure, setBackClosure] = useState(85);
+  const [leftClosure, setLeftClosure] = useState(100);
+  const [rightClosure, setRightClosure] = useState(100);
+  const [openingPos, setOpeningPos] = useState<OpeningPosition>('top');
+  const [viewMode, setViewMode] = useState<'3d' | 'elevation'>('3d');
+
+  // Ajusta percentuais ao trocar as 4 condições rápidas
+  const handleConditionChange = (cond: ShelterCondition) => {
+    setCondition(cond);
+    if (cond === 'cond1') {
+      setBackClosure(100);
+      setLeftClosure(100);
+      setRightClosure(100);
+    } else if (cond === 'cond2') {
+      setBackClosure(100);
+      setLeftClosure(0);
+      setRightClosure(0);
+    } else if (cond === 'cond3') {
+      setBackClosure(0);
+      setLeftClosure(100);
+      setRightClosure(100);
+    } else if (cond === 'cond4') {
+      setBackClosure(0);
+      setLeftClosure(0);
+      setRightClosure(0);
+    }
+  };
+
+  const result = useMemo(() => {
+    return calculateShelterWind(
+      {
+        condition,
+        depth,
+        width,
+        height,
+        theta,
+        backClosure,
+        leftClosure,
+        rightClosure,
+        openingPos,
+      },
+      q
+    );
+  }, [condition, depth, width, height, theta, backClosure, leftClosure, rightClosure, openingPos, q]);
+
+  const handleExportPDF = () => {
+    const sections: GenericPDFSection[] = [
+      {
+        title: 'Geometria do Abrigo e Fechamentos',
+        type: 'grid',
+        gridItems: [
+          { label: 'Condição Topológica', value: conditionLabels[condition] },
+          { label: 'Comprimento (d / balanço)', value: `${depth} m` },
+          { label: 'Largura (b)', value: `${width} m` },
+          { label: 'Altura (h)', value: `${height} m` },
+          { label: 'Inclinação (θ)', value: `${theta}°` },
+          { label: 'Fechamento Fundo', value: `${backClosure}%` },
+          { label: 'Fechamento Lateral Esq / Dir', value: `${leftClosure}% / ${rightClosure}%` },
+          { label: 'Posição da Abertura', value: openingPos === 'top' ? 'Fresta Topo (Alívio)' : openingPos === 'bottom' ? 'Vão Inferior' : 'Distribuída' },
+        ],
+      },
+      {
+        title: 'Coeficientes Aerodinâmicos (NBR 6123)',
+        type: 'grid',
+        gridItems: [
+          { label: 'Ce Superior (Cobertura)', value: result.cpeTop.toString() },
+          { label: 'Cpi Inferior (Efetivo)', value: result.cpiBottom.toString() },
+          { label: 'Cnf Líquido (Arrancamento)', value: result.cnfVertical.toString() },
+          { label: 'Cf Parede Fundo (Tab. 23)', value: result.cfBack.toString() },
+          { label: 'Alívio por Fresta Superior', value: `${result.reliefPercentage}%` },
+        ],
+      },
+      {
+        title: 'Forças Resultantes (kN)',
+        type: 'grid',
+        gridItems: [
+          { label: 'Força Vertical (Fz - Arrancamento)', value: `${result.forces.fzUp} kN` },
+          { label: 'Empuxo Frontal Fundo (Fx)', value: `${result.forces.fxBack} kN` },
+          { label: 'Empuxo nas Laterais (Fy)', value: `${result.forces.fySide} kN` },
+          { label: 'Atrito na Cobertura', value: `${result.forces.fFriction} kN` },
+        ],
+      },
+      {
+        title: 'Carga Linear nos Pórticos (kN/m)',
+        type: 'grid',
+        gridItems: [
+          { label: 'Carga no Pilar (ex: Tubo 150x150)', value: `${result.lineLoads.columnLoad} kN/m` },
+          { label: 'Carga na Viga em Balanço', value: `${result.lineLoads.beamLoad} kN/m` },
+        ],
+      },
+    ];
+    exportGenericToPDF('Abrigo / Pórtico Fechado', sections);
+  };
+
+  return (
+    <div className="flex flex-col lg:flex-row h-full w-full gap-4 p-4 lg:p-6 bg-muted/30">
+      {/* Coluna Esquerda: Controles do Abrigo */}
+      <div className="w-full lg:w-96 shrink-0 flex flex-col gap-4 overflow-y-auto pb-8 lg:pb-0">
+        <Card className="shadow-sm border-border">
+          <CardHeader className="pb-3 flex flex-row items-start justify-between space-y-0 pr-6">
+            <div>
+              <CardTitle className="text-lg flex items-center gap-2">
+                <Layers className="size-5 text-primary" />
+                Abrigos e Pórticos
+              </CardTitle>
+              <CardDescription>
+                Pórticos em balanço, marquises e garagens com fechamentos (Tab. 23-25 e sec. 6.3).
+              </CardDescription>
+            </div>
+            <SaveModuleDialog
+              moduleType="shelter"
+              inputs={{ condition, depth, width, height, theta, backClosure, leftClosure, rightClosure, openingPos }}
+            />
+          </CardHeader>
+          <CardContent className="space-y-5">
+            <WindParametersSummary />
+
+            {/* Seletor Rápido de 4 Condições Topológicas */}
+            <div className="space-y-2">
+              <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                Condições Topológicas
+              </label>
+              <div className="grid grid-cols-2 gap-1.5">
+                {(['cond1', 'cond2', 'cond3', 'cond4'] as ShelterCondition[]).map((c) => (
+                  <Button
+                    key={c}
+                    type="button"
+                    variant={condition === c ? 'default' : 'outline'}
+                    size="sm"
+                    className="h-auto py-2 px-2 text-xs text-left justify-start font-normal leading-tight"
+                    onClick={() => handleConditionChange(c)}
+                  >
+                    <CheckCircle2 className={cn("size-3.5 mr-1.5 shrink-0", condition === c ? "text-primary-foreground" : "text-muted-foreground")} />
+                    <span>{conditionLabels[c].split(' (')[0]}</span>
+                  </Button>
+                ))}
+              </div>
+            </div>
+
+            {/* Controle de Posição da Abertura (Topo / Base / Distribuída) */}
+            <div className="space-y-2 pt-1 border-t">
+              <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                Posição da Abertura no Fundo
+              </label>
+              <Select value={openingPos} onValueChange={(v) => setOpeningPos(v as OpeningPosition)}>
+                <SelectTrigger className="text-xs h-9">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="top">Fresta no Topo (Alívio de Arrancamento)</SelectItem>
+                  <SelectItem value="bottom">Vão na Base (Comportamento Placa Suspensa)</SelectItem>
+                  <SelectItem value="distributed">Abertura Uniformemente Distribuída</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Sliders de Fechamento Parcial (%) */}
+            <div className="space-y-3 pt-1 border-t">
+              <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                Permeabilidade / Fechamento (%)
+              </label>
+              <div className="space-y-2">
+                <div className="flex justify-between text-xs">
+                  <span>Parede de Fundo:</span>
+                  <span className="font-mono font-medium">{backClosure}%</span>
+                </div>
+                <Slider min={0} max={100} step={5} value={[backClosure]} onValueChange={(v) => setBackClosure(v[0])} />
+              </div>
+              <div className="grid grid-cols-2 gap-3">
+                <div className="space-y-2">
+                  <div className="flex justify-between text-xs">
+                    <span>Lateral Esq:</span>
+                    <span className="font-mono">{leftClosure}%</span>
+                  </div>
+                  <Slider min={0} max={100} step={5} value={[leftClosure]} onValueChange={(v) => setLeftClosure(v[0])} />
+                </div>
+                <div className="space-y-2">
+                  <div className="flex justify-between text-xs">
+                    <span>Lateral Dir:</span>
+                    <span className="font-mono">{rightClosure}%</span>
+                  </div>
+                  <Slider min={0} max={100} step={5} value={[rightClosure]} onValueChange={(v) => setRightClosure(v[0])} />
+                </div>
+              </div>
+            </div>
+
+            {/* Sliders Geométricos */}
+            <div className="space-y-3 pt-1 border-t">
+              <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                Dimensões e Inclinação
+              </label>
+              <div className="space-y-2">
+                <div className="flex justify-between text-xs">
+                  <span>Vão do Balanço (d):</span>
+                  <span className="font-mono font-medium">{depth} m</span>
+                </div>
+                <Slider min={3} max={20} step={0.5} value={[depth]} onValueChange={(v) => setDepth(v[0])} />
+              </div>
+              <div className="space-y-2">
+                <div className="flex justify-between text-xs">
+                  <span>Altura do Pilar (h):</span>
+                  <span className="font-mono font-medium">{height} m</span>
+                </div>
+                <Slider min={2.5} max={12} step={0.1} value={[height]} onValueChange={(v) => setHeight(v[0])} />
+              </div>
+              <div className="space-y-2">
+                <div className="flex justify-between text-xs">
+                  <span>Largura do Abrigo (b):</span>
+                  <span className="font-mono font-medium">{width} m</span>
+                </div>
+                <Slider min={4} max={30} step={1} value={[width]} onValueChange={(v) => setWidth(v[0])} />
+              </div>
+              <div className="space-y-2">
+                <div className="flex justify-between text-xs">
+                  <span>Inclinação Cobertura (θ):</span>
+                  <span className="font-mono font-medium">{theta}°</span>
+                </div>
+                <Slider min={0} max={30} step={1} value={[theta]} onValueChange={(v) => setTheta(v[0])} />
+              </div>
+            </div>
+
+            {/* Status Normativo */}
+            <div className="rounded-lg border bg-secondary/30 p-3 text-xs space-y-1.5">
+              <div className="flex items-center gap-1.5 font-semibold text-foreground">
+                <ShieldCheck className="size-4 text-emerald-500 shrink-0" />
+                <span>Norma NBR 6123:2023 — Sec. 6.3 & Tab. 23-25</span>
+              </div>
+              <p className="text-muted-foreground leading-relaxed">{result.statusText}</p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Coluna Direita: 3D, Corte A-A e Quadro de Ações */}
+      <div className="flex-1 flex flex-col gap-4">
+        {/* Visualizador 3D com trava, manual (i) e corte em elevação */}
+        <div className="flex-1 flex flex-col min-h-[460px] bg-background rounded-xl border border-border shadow-sm overflow-hidden relative">
+          <div className="absolute top-4 left-4 z-10 flex flex-wrap gap-2">
+            <Badge variant="secondary" className="bg-background/85 text-foreground border border-border backdrop-blur-sm">
+              θ = {theta}°
+            </Badge>
+            <Badge variant="secondary" className="bg-background/85 text-foreground border border-border backdrop-blur-sm">
+              Fundo: {backClosure}% ({openingPos === 'top' ? 'Fresta Topo' : openingPos === 'bottom' ? 'Vão Base' : 'Distrib.'})
+            </Badge>
+            {result.reliefPercentage > 0 && (
+              <Badge className="bg-emerald-600/90 hover:bg-emerald-600 text-white border-none shadow-sm flex items-center gap-1">
+                <ArrowUpRight className="size-3.5" />
+                Alívio Arrancamento: -{result.reliefPercentage}%
+              </Badge>
+            )}
+          </div>
+
+          <div className="absolute top-4 right-4 z-10 flex items-center gap-2">
+            {/* Botão de Corte em Elevação (Corte A-A) vs 3D */}
+            <div className="bg-background/90 border border-border rounded-full p-1 shadow-sm flex items-center">
+              <Button
+                size="sm"
+                variant={viewMode === '3d' ? 'default' : 'ghost'}
+                className="h-7 px-3 text-xs rounded-full"
+                onClick={() => setViewMode('3d')}
+              >
+                <Box className="size-3.5 mr-1" />
+                Vista 3D
+              </Button>
+              <Button
+                size="sm"
+                variant={viewMode === 'elevation' ? 'default' : 'ghost'}
+                className="h-7 px-3 text-xs rounded-full"
+                onClick={() => setViewMode('elevation')}
+              >
+                <Eye className="size-3.5 mr-1" />
+                Corte A-A (Frestas)
+              </Button>
+            </div>
+
+            {/* Ícone (i) Manual Didático NBR 6123 */}
+            <EducationalManual type="shelter" params={{ condition, backClosure, openingPos, theta }} />
+          </div>
+
+          <SceneCanvas
+            moduleId="shelter"
+            camera={{ position: [12, 6, 14], fov: 45 }}
+            fallback={<div className="flex items-center justify-center h-full text-muted-foreground">3D indisponível</div>}
+          >
+            <ambientLight intensity={0.7} />
+            <directionalLight position={[10, 20, 15]} intensity={1.2} />
+            <Shelter3D
+              condition={condition}
+              depth={depth}
+              width={width}
+              height={height}
+              theta={theta}
+              backClosure={backClosure}
+              leftClosure={leftClosure}
+              rightClosure={rightClosure}
+              openingPos={openingPos}
+              viewMode={viewMode}
+            />
+          </SceneCanvas>
+        </div>
+
+        {/* Quadro Superior de Resultados na Base do 3D */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <Card className="bg-card border-border">
+            <CardContent className="p-4 flex flex-col justify-between h-full">
+              <span className="text-xs text-muted-foreground font-medium">F. Vertical (Fz - Arrancamento)</span>
+              <div className="flex items-baseline justify-between mt-2">
+                <span className="text-xl font-bold font-mono text-primary">{result.forces.fzUp} kN</span>
+                <span className="text-xs text-muted-foreground font-mono">Cnf = {result.cnfVertical}</span>
+              </div>
+              <span className="text-[10px] text-muted-foreground mt-1">
+                {result.reliefPercentage > 0 ? `Com ${result.reliefPercentage}% de alívio por fresta` : 'Sem alívio por fresta superior'}
+              </span>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-card border-border">
+            <CardContent className="p-4 flex flex-col justify-between h-full">
+              <span className="text-xs text-muted-foreground font-medium">Empuxo no Fundo (Fx Traseira)</span>
+              <div className="flex items-baseline justify-between mt-2">
+                <span className="text-xl font-bold font-mono text-foreground">{result.forces.fxBack} kN</span>
+                <span className="text-xs text-muted-foreground font-mono">Cf = {result.cfBack}</span>
+              </div>
+              <span className="text-[10px] text-muted-foreground mt-1">
+                Parede com {backClosure}% de estanqueidade
+              </span>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-card border-border">
+            <CardContent className="p-4 flex flex-col justify-between h-full">
+              <span className="text-xs text-muted-foreground font-medium">Carga no Pilar (ex: Tubo 150x150)</span>
+              <div className="flex items-baseline justify-between mt-2">
+                <span className="text-xl font-bold font-mono text-emerald-600 dark:text-emerald-400">
+                  {result.lineLoads.columnLoad} kN/m
+                </span>
+                <span className="text-xs text-muted-foreground font-mono">h = {height} m</span>
+              </div>
+              <span className="text-[10px] text-muted-foreground mt-1">
+                Ação direta + reação horizontal por pilar
+              </span>
+            </CardContent>
+          </Card>
+
+          <Card className="bg-card border-border">
+            <CardContent className="p-4 flex flex-col justify-between h-full">
+              <span className="text-xs text-muted-foreground font-medium">Carga na Viga em Balanço</span>
+              <div className="flex items-baseline justify-between mt-2">
+                <span className="text-xl font-bold font-mono text-sky-600 dark:text-sky-400">
+                  {result.lineLoads.beamLoad} kN/m
+                </span>
+                <span className="text-xs text-muted-foreground font-mono">d = {depth} m</span>
+              </div>
+              <span className="text-[10px] text-muted-foreground mt-1">
+                Sucção distribuída por braço principal
+              </span>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Rodapé com Exportação e Captura */}
+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4 border-t pt-4">
+          <SceneCapturePanel sceneId="shelter-module" />
+          <ExportMenu onExportPDF={handleExportPDF} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ShelterModule;