From 8a357022c433534fd8bcb6faba5a8772e7eef1b1 Mon Sep 17 00:00:00 2001
From: Marcos <m.reifonas@gmail.com>
Date: Fri, 10 Jul 2026 14:38:42 +0000
Subject: [PATCH] fix: change AuditPanel LLM fields grid layout to responsive
 stacked on mobile

---
 app/src/components/AuditPanel.tsx      |  2 +-
 app/src/components/CpiSettingsCard.tsx | 69 ++++++++++++++++++++++++++
 app/src/pages/GalpaoModule.tsx         |  3 ++
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 app/src/components/CpiSettingsCard.tsx

diff --git a/app/src/components/AuditPanel.tsx b/app/src/components/AuditPanel.tsx
index a5162d9..12511b8 100644
--- a/app/src/components/AuditPanel.tsx
+++ b/app/src/components/AuditPanel.tsx
@@ -125,7 +125,7 @@ export default function AuditPanel() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
             <div className="space-y-1.5">
               <label className="text-sm font-medium">Provedor</label>
               <Select value={config.provider} onValueChange={handleProviderChange}>
diff --git a/app/src/components/CpiSettingsCard.tsx b/app/src/components/CpiSettingsCard.tsx
new file mode 100644
index 0000000..c59e9c7
--- /dev/null
+++ b/app/src/components/CpiSettingsCard.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { useWindStore } from '@/store/appStore';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Slider } from '@/components/ui/slider';
+import { Badge } from '@/components/ui/badge';
+import type { PermeabilityCase } from '@/lib/internal-pressure';
+
+export const CpiSettingsCard: React.FC = () => {
+  const {
+    permeabilityCase,
+    cpiRatio,
+    cpi,
+    setPermeabilityCase,
+    setCpiRatio,
+  } = useWindStore();
+
+  return (
+    <Card className="shadow-sm border-border">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base">Pressão Interna (Cpi)</CardTitle>
+        <CardDescription className="text-xs">
+          Coeficiente de pressão interna (sec. 6.3)
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-1">
+          <label className="text-xs font-medium text-foreground">Caso de Permeabilidade</label>
+          <Select value={permeabilityCase} onValueChange={(val) => setPermeabilityCase(val as PermeabilityCase)}>
+            <SelectTrigger className="w-full text-xs h-8">
+              <SelectValue placeholder="Selecione" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="two-opposite-permeable">Duas faces opostas permeáveis</SelectItem>
+              <SelectItem value="four-equally-permeable">Quatro faces igualmente permeáveis</SelectItem>
+              <SelectItem value="dominant-windward">Abertura dominante — barlavento</SelectItem>
+              <SelectItem value="dominant-leeward">Abertura dominante — sotavento</SelectItem>
+              <SelectItem value="dominant-lateral">Abertura dominante — lateral</SelectItem>
+              <SelectItem value="airtight">Edificação estanque</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {(permeabilityCase === 'dominant-windward' || permeabilityCase === 'dominant-lateral') && (
+          <div className="space-y-2">
+            <div className="flex justify-between items-center">
+              <label className="text-xs font-medium text-foreground">Razão de áreas</label>
+              <span className="text-xs text-muted-foreground font-mono">{cpiRatio.toFixed(2)}</span>
+            </div>
+            <Slider min={0.1} max={5} step={0.05} value={[cpiRatio]} onValueChange={(vals) => setCpiRatio(vals[0])} className="py-1 cursor-pointer" />
+            <p className="text-[10px] leading-tight text-muted-foreground">
+              Razão entre a área da abertura dominante e a área total das demais aberturas.
+            </p>
+          </div>
+        )}
+
+        <div className="rounded-md border bg-muted/40 p-2">
+          <div className="flex justify-between items-center">
+            <span className="text-xs font-medium">Cpi calculado:</span>
+            <Badge variant="default" className="font-mono text-sm">{cpi.toFixed(2)}</Badge>
+          </div>
+          <p className="text-[10px] leading-tight text-muted-foreground mt-1">
+            Limitado a ±0,9 conforme norma. A pressão final é p = q · (Cpe − Cpi).
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/app/src/pages/GalpaoModule.tsx b/app/src/pages/GalpaoModule.tsx
index 9e8a012..f8d079f 100644
--- a/app/src/pages/GalpaoModule.tsx
+++ b/app/src/pages/GalpaoModule.tsx
@@ -3,6 +3,7 @@ import Warehouse3DViewer from '../components/Warehouse3D';
 import LinearLoadsTable from '../components/LinearLoadsTable';
 import SceneCapturePanel from '../components/SceneCapturePanel';
 import FtoolExportCard from '../components/FtoolExportCard';
+import { CpiSettingsCard } from '../components/CpiSettingsCard';
 import { useGalpaoStore } from '../store/galpaoStore';
 import { useWindStore } from '../store/appStore';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
@@ -88,6 +89,8 @@ const GalpaoModule: React.FC = () => {
                 </div>
               </CardContent>
             </Card>
+        
+        <CpiSettingsCard />
       </div>
 
       {/* Coluna Direita: Viewer 3D */}