admtracksteel/GPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: synchronize local fixes to gitea

Browse Source
This commit is contained in:
admtracksteel
2026-03-14 00:25:56 +00:00
commit b4ffe72b3e
393 changed files with 71657 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

617
src/client/components/TechnicalManual.tsx Normal file
View File

@@ -0,0 +1,617 @@
import React, { useState, useMemo } from 'react';
import { X, Search, BookOpen, FileText, ChevronRight, ChevronDown, ExternalLink, Wrench, Droplets, Thermometer, CheckSquare, Shield, Layers, Gauge, Ruler, Calculator } from 'lucide-react';
interface TechnicalManualProps {
isOpen: boolean;
onClose: () => void;
}
interface ManualSection {
id: string;
title: string;
icon: React.ElementType;
content: React.ReactNode;
keywords: string[];
}
export const TechnicalManual: React.FC<TechnicalManualProps> = ({ isOpen, onClose }) => {
const [searchTerm, setSearchTerm] = useState('');
const [activeSection, setActiveSection] = useState<string | null>('intro');
const [showIndex, setShowIndex] = useState(false);
// Seções do Manual
const sections: ManualSection[] = useMemo(() => [
{
id: 'intro',
title: 'Introdução ao GPI',
icon: BookOpen,
keywords: ['introdução', 'gpi', 'sistema', 'gestão', 'pintura', 'industrial'],
content: (
<div className="space-y-6">
<img
src="/GPI-processos_geral.png"
alt="Processos GPI"
className="w-full rounded-2xl border border-border/40 shadow-lg"
/>
<h3 className="text-xl font-black text-primary">Bem-vindo ao GPI</h3>
<p className="text-text-secondary leading-relaxed">
O <strong>GPI (Gestão de Pintura Industrial)</strong> é um sistema completo para gerenciamento de obras,
projetos e processos de pintura industrial em estruturas metálicas. O sistema permite controlar desde
a preparação da superfície até a inspeção final de aderência e espessura.
</p>
<div className="p-4 bg-primary/5 rounded-xl border border-primary/20">
<h4 className="font-bold text-primary mb-2">Módulos Disponíveis:</h4>
<ul className="space-y-2 text-sm text-text-secondary">
<li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Obras & Projetos:</strong> Gestão de projetos e cronogramas</li>
<li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Peças:</strong> Cadastro e acompanhamento de peças</li>
<li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Esquemas:</strong> Definição de esquemas de pintura</li>
<li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Inspeções:</strong> Registro e controle de inspeções</li>
<li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Biblioteca Técnica:</strong> Fichas técnicas de tintas</li>
<li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Estudo de Rendimento:</strong> Cálculo de consumo de tintas</li>
<li className="flex items-center gap-2"><ChevronRight size={14} className="text-primary" /> <strong>Calculadora:</strong> Utilitários técnicos e conversões</li>
</ul>
</div>
</div>
)
},
{
id: 'calculator',
title: 'Calculadora',
icon: Calculator,
keywords: ['calculadora', 'conversão', 'espessura', 'consumo', 'custo', 'bicos', 'airless', 'ambiente'],
content: (
<div className="space-y-6">
<h3 className="text-xl font-black text-primary">Ferramentas & Cálculos</h3>
<p className="text-text-secondary leading-relaxed">
O módulo de Calculadora oferece um conjunto de utilitários técnicos essenciais para o dia a dia
do inspetor e gestor de pintura, centralizando conversões e cálculos complexos.
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="p-4 bg-surface-soft rounded-xl border border-border/40">
<h4 className="font-bold text-text-main mb-2">1. Conversões</h4>
<p className="text-sm text-text-secondary">
Conversor preciso entre unidades comuns na indústria:
<br />• Microns (μm) ↔ Mils (milésimos de polegada)
<br />• PSI ↔ Bar (Pressão)
<br />• Celsius (°C) ↔ Fahrenheit (°F)
</p>
</div>
<div className="p-4 bg-surface-soft rounded-xl border border-border/40">
<h4 className="font-bold text-text-main mb-2">2. Espessura de Película</h4>
<p className="text-sm text-text-secondary">
Calculadoras para determinar:
<br />• <strong>EPS Estimada:</strong> Baseado na EPU e % Sólidos.
<br />• <strong>EPU Necessária:</strong> Quanto aplicar úmido para atingir a espessura seca desejada.
</p>
</div>
<div className="p-4 bg-surface-soft rounded-xl border border-border/40">
<h4 className="font-bold text-text-main mb-2">3. Consumo & Custo</h4>
<p className="text-sm text-text-secondary">
Ferramenta rápida para estimar tinta necessária:
<br />• Cálculo por Área (m²) e Espessura.
<br />• Inclusão de fator de perda (Eficiência).
<br />• Estimativa de custo total por demão.
</p>
</div>
<div className="p-4 bg-surface-soft rounded-xl border border-border/40">
<h4 className="font-bold text-text-main mb-2">4. Bicos Airless</h4>
<p className="text-sm text-text-secondary">
Decodificador de códigos de bicos airless (ex: 517):
<br />• <strong>Ângulo do leque:</strong> (1º digito × 10) graus.
<br />• <strong>Vazão/Orifício:</strong> (2 últimos digitos) milésimos.
<br />• Recomendação de uso por tipo de tinta.
</p>
</div>
<div className="p-4 bg-surface-soft rounded-xl border border-border/40 md:col-span-2">
<h4 className="font-bold text-text-main mb-2">5. Condições Ambientais</h4>
<p className="text-sm text-text-secondary">
Verificação rápida de conformidade climática:
<br />• Cálculo automático do <strong>Ponto de Orvalho</strong> (baseado em Temp e UR).
<br />• Verificação da regra "Temperatura da Superfície {'>'} Ponto de Orvalho + 3°C".
</p>
</div>
</div>
</div>
)
},
{
id: 'yield-study',
title: 'Estudo de Rendimento',
icon: Gauge,
keywords: ['rendimento', 'consumo', 'tinta', 'cálculo', 'peso', 'área', 'litros', 'eficiência'],
content: (
<div className="space-y-6">
<h3 className="text-xl font-black text-primary">Cálculo de Consumo de Tintas</h3>
<p className="text-text-secondary leading-relaxed">
O módulo de Estudo de Rendimento permite calcular com precisão a quantidade de tinta necessária
para um projeto, considerando dois métodos de cálculo: por peso (toneladas) e por área (m²).
</p>
<div className="grid grid-cols-2 gap-4">
<div className="p-4 bg-primary/5 rounded-xl border border-primary/20">
<h4 className="font-bold text-primary mb-2">Cálculo por Peso</h4>
<p className="text-xs text-text-muted">Baseado na taxa histórica (L/t) multiplicada pelo peso em toneladas.</p>
<code className="block mt-2 text-xs bg-surface p-2 rounded">
Consumo = Peso × Taxa × (1 / Eficiência)
</code>
</div>
<div className="p-4 bg-blue-500/5 rounded-xl border border-blue-500/20">
<h4 className="font-bold text-blue-500 mb-2">Cálculo por Área</h4>
<p className="text-xs text-text-muted">Baseado na área e espessura de película seca (DFT).</p>
<code className="block mt-2 text-xs bg-surface p-2 rounded">
Consumo = (Área × DFT) / (SV × 10)
</code>
</div>
</div>
<div className="p-4 bg-amber-500/10 rounded-xl border border-amber-500/30">
<h4 className="font-bold text-amber-600 mb-2">⚠️ Importante: Eficiência</h4>
<p className="text-sm text-text-secondary">
A eficiência (ex: 80%) representa as perdas no processo de aplicação. Um fator de perda
é aplicado automaticamente aos cálculos: se eficiência = 80%, o consumo real será 25% maior que o teórico.
</p>
</div>
</div>
)
},
{
id: 'surface-prep',
title: 'Preparação de Superfície',
icon: Wrench,
keywords: ['preparação', 'superfície', 'jateamento', 'limpeza', 'rugosidade', 'abrasivo', 'grau'],
content: (
<div className="space-y-6">
<h3 className="text-xl font-black text-primary">A Etapa Mais Crítica</h3>
<p className="text-text-secondary leading-relaxed">
Estudos científicos demonstram que entre <strong>80% e 90%</strong> do sucesso de um sistema de pintura
depende da qualidade do preparo da superfície metálica.
</p>
<div className="space-y-4">
<div className="p-4 bg-surface-soft rounded-xl border border-border/40">
<h4 className="font-bold text-text-main mb-2">Graus de Limpeza (ISO 8501-1)</h4>
<ul className="space-y-2 text-sm text-text-secondary">
<li><strong>St 2:</strong> Limpeza manual com ferramentas</li>
<li><strong>Sa 2:</strong> Jateamento comercial</li>
<li><strong>Sa 2.5:</strong> Jateamento ao metal quase branco (mais comum)</li>
<li><strong>Sa 3:</strong> Jateamento ao metal branco (máxima limpeza)</li>
</ul>
</div>
<div className="p-4 bg-primary/5 rounded-xl border border-primary/20">
<h4 className="font-bold text-primary mb-2">Perfil de Rugosidade</h4>
<p className="text-sm text-text-secondary">
O perfil mínimo de rugosidade deve ser de <strong>25 μm</strong> para um bom sistema de pintura
(ISO 8503-1, ABNT NBR 10443). Perfil excessivo (acima de 100 μm) pode criar picos frágeis.
</p>
</div>
</div>
</div>
)
},
{
id: 'paint-types',
title: 'Tipos de Tintas',
icon: Droplets,
keywords: ['tinta', 'epóxi', 'poliuretano', 'zinco', 'silicato', 'primer', 'acabamento'],
content: (
<div className="space-y-6">
<h3 className="text-xl font-black text-primary">Características das Tintas</h3>
<div className="space-y-4">
<div className="p-4 bg-blue-500/10 rounded-xl border border-blue-500/30">
<h4 className="font-bold text-blue-600 mb-2">Tintas Epóxi</h4>
<ul className="text-sm text-text-secondary space-y-1">
<li>• Alta resistência química e física</li>
<li>• Excelente aderência e impermeabilidade</li>
<li>• Baixa resistência UV (amarelamento)</li>
<li>• Cura: 6-16h para repintura, 7 dias completa</li>
</ul>
</div>
<div className="p-4 bg-green-500/10 rounded-xl border border-green-500/30">
<h4 className="font-bold text-green-600 mb-2">Tintas Poliuretano (PU)</h4>
<ul className="text-sm text-text-secondary space-y-1">
<li>• Resistência superior aos raios UV</li>
<li>• Mantém cor e brilho por mais tempo</li>
<li>• Excelente resistência à abrasão</li>
<li>• Cura: 4-24h para repintura</li>
</ul>
</div>
<div className="p-4 bg-amber-500/10 rounded-xl border border-amber-500/30">
<h4 className="font-bold text-amber-600 mb-2">Silicato de Zinco</h4>
<ul className="text-sm text-text-secondary space-y-1">
<li>• Proteção catódica ativa</li>
<li>• Oxidação preferencial do zinco</li>
<li>• Requer UR adequada (não acima de 85%)</li>
<li>• Cura muito rápida: 20-30 min</li>
</ul>
</div>
</div>
</div>
)
},
{
id: 'solids-volume',
title: 'Sólidos por Volume (SV)',
icon: Layers,
keywords: ['sólidos', 'volume', 'sv', 'rendimento', 'teórico', 'fórmula', 'cálculo'],
content: (
<div className="space-y-6">
<h3 className="text-xl font-black text-primary">O Parâmetro Mais Importante</h3>
<p className="text-text-secondary leading-relaxed">
O <strong>Sólidos por Volume (SV%)</strong> é a porcentagem do volume de tinta que permanece
como filme sólido após a evaporação completa de todos os solventes.
</p>
<div className="p-6 bg-gradient-to-br from-primary/10 to-primary/5 rounded-2xl border border-primary/30">
<h4 className="font-bold text-primary mb-4">Fórmula do Rendimento Teórico</h4>
<code className="block text-lg bg-surface p-4 rounded-xl text-center font-mono">
Rend. Teórico (m²/L) = (SV% × 10) / EPS (μm)
</code>
<p className="text-xs text-text-muted mt-4">
Exemplo: Tinta com 60% SV aplicada para 50 μm = (60 × 10) / 50 = <strong>12 m²/L</strong>
</p>
</div>
<div className="p-4 bg-amber-500/10 rounded-xl border border-amber-500/30">
<h4 className="font-bold text-amber-600 mb-2">Efeito da Diluição</h4>
<p className="text-sm text-text-secondary">
A diluição reduz o SV efetivo. Uma tinta com 60% SV diluída 15% terá SV efetivo de aproximadamente 51%.
Normas recomendam não diluir acima de 10-20%.
</p>
</div>
</div>
)
},
{
id: 'film-thickness',
title: 'Espessura de Película',
icon: Ruler,
keywords: ['espessura', 'película', 'úmida', 'seca', 'dft', 'wft', 'epu', 'eps', 'microns'],
content: (
<div className="space-y-6">
<h3 className="text-xl font-black text-primary">EPU e EPS</h3>
<div className="grid grid-cols-2 gap-4">
<div className="p-4 bg-blue-500/10 rounded-xl border border-blue-500/30">
<h4 className="font-bold text-blue-600 mb-2">EPU (Película Úmida)</h4>
<p className="text-xs text-text-muted">WFT - Wet Film Thickness</p>
<p className="text-sm text-text-secondary mt-2">
Medida imediatamente após aplicação com "pente de campanha".
</p>
</div>
<div className="p-4 bg-green-500/10 rounded-xl border border-green-500/30">
<h4 className="font-bold text-green-600 mb-2">EPS (Película Seca)</h4>
<p className="text-xs text-text-muted">DFT - Dry Film Thickness</p>
<p className="text-sm text-text-secondary mt-2">
Medida após cura com medidor magnético ou eletrônico.
</p>
</div>
</div>
<div className="p-6 bg-gradient-to-br from-primary/10 to-primary/5 rounded-2xl border border-primary/30">
<h4 className="font-bold text-primary mb-4">Relação EPU → EPS</h4>
<code className="block text-sm bg-surface p-4 rounded-xl text-center font-mono">
EPS (μm) = EPU (μm) × [SV (%) × (100 - Diluição %)] / 10000
</code>
<p className="text-xs text-text-muted mt-4">
Exemplo: EPU=150μm, SV=82%, Diluição=20% → EPS = 150 × (82 × 80) / 10000 = <strong>98 μm</strong>
</p>
</div>
</div>
)
},
{
id: 'environment',
title: 'Condições Ambientais',
icon: Thermometer,
keywords: ['temperatura', 'umidade', 'orvalho', 'ambiente', 'clima', 'condensação'],
content: (
<div className="space-y-6">
<h3 className="text-xl font-black text-primary">Variáveis Críticas</h3>
<div className="space-y-4">
<div className="p-4 bg-red-500/10 rounded-xl border border-red-500/30">
<h4 className="font-bold text-red-600 mb-2">🌡️ Temperatura do Ar</h4>
<p className="text-sm text-text-secondary">
Ideal: <strong>16°C a 30°C</strong>. Abaixo de 16°C a cura é muito lenta.
Acima de 30°C ocorre "spray seco".
</p>
</div>
<div className="p-4 bg-blue-500/10 rounded-xl border border-blue-500/30">
<h4 className="font-bold text-blue-600 mb-2">💧 Umidade Relativa</h4>
<p className="text-sm text-text-secondary">
Ideal: <strong>30% a 60%</strong>. Nunca acima de 80-85%.
Alta umidade pode causar condensação e empolamento.
</p>
</div>
<div className="p-4 bg-amber-500/10 rounded-xl border border-amber-500/30">
<h4 className="font-bold text-amber-600 mb-2">🌫️ Ponto de Orvalho</h4>
<p className="text-sm text-text-secondary">
A temperatura da superfície deve estar <strong>no mínimo 3°C acima</strong> do ponto de orvalho
(ISO 8502-4, SSPC).
</p>
</div>
</div>
</div>
)
},
{
id: 'inspection',
title: 'Inspeção e Controle',
icon: CheckSquare,
keywords: ['inspeção', 'controle', 'qualidade', 'aderência', 'medição', 'teste', 'defeitos'],
content: (
<div className="space-y-6">
<h3 className="text-xl font-black text-primary">Controle de Qualidade</h3>
<div className="space-y-4">
<div className="p-4 bg-surface-soft rounded-xl border border-border/40">
<h4 className="font-bold text-text-main mb-2">Medição de Espessura (ASTM D7091)</h4>
<p className="text-sm text-text-secondary">
Mínimo de <strong>15 medições</strong> por área de ~5m².
Resultado deve estar entre 80% e 120% do especificado.
</p>
</div>
<div className="p-4 bg-surface-soft rounded-xl border border-border/40">
<h4 className="font-bold text-text-main mb-2">Testes de Aderência</h4>
<ul className="text-sm text-text-secondary space-y-1">
<li><strong>Pull-Off (ASTM D4541):</strong> Força de tração em MPa</li>
<li><strong>Corte em X (ASTM D3359):</strong> Avaliação visual 0B-5B</li>
</ul>
</div>
<div className="p-4 bg-red-500/10 rounded-xl border border-red-500/30">
<h4 className="font-bold text-red-600 mb-2">Defeitos Comuns (ISO 4628)</h4>
<ul className="text-sm text-text-secondary space-y-1">
<li>• Bolhas (blistering) - ar ou solventes aprisionados</li>
<li>• Crateras (pinholes) - escape de ar durante cura</li>
<li>• Descamação (peeling) - aderência inadequada</li>
<li>• Empolamento osmótico - sais contaminantes</li>
</ul>
</div>
</div>
</div>
)
},
{
id: 'standards',
title: 'Normas Técnicas',
icon: Shield,
keywords: ['norma', 'abnt', 'iso', 'sspc', 'nace', 'petrobras', 'padrão', 'regulamento'],
content: (
<div className="space-y-6">
<h3 className="text-xl font-black text-primary">Normas Aplicáveis</h3>
<div className="space-y-4">
<div className="p-4 bg-green-500/10 rounded-xl border border-green-500/30">
<h4 className="font-bold text-green-600 mb-2">ABNT (Brasil)</h4>
<ul className="text-xs text-text-secondary space-y-1">
<li>NBR 10443 - Espessura de película seca</li>
<li>NBR 11003 - Aderência por corte</li>
<li>NBR 14847 - Inspeção de pintura</li>
<li>NBR 15158 - Limpeza química</li>
<li>NBR 16267 - Granulometria de abrasivos</li>
</ul>
</div>
<div className="p-4 bg-blue-500/10 rounded-xl border border-blue-500/30">
<h4 className="font-bold text-blue-600 mb-2">ISO (Internacional)</h4>
<ul className="text-xs text-text-secondary space-y-1">
<li>ISO 12944 - Série completa de pintura anticorrosiva</li>
<li>ISO 8501 - Padrões visuais de limpeza</li>
<li>ISO 8502 - Contaminação superficial</li>
<li>ISO 8503 - Rugosidade de superfície</li>
</ul>
</div>
<div className="p-4 bg-amber-500/10 rounded-xl border border-amber-500/30">
<h4 className="font-bold text-amber-600 mb-2">SSPC / NACE / Petrobras</h4>
<ul className="text-xs text-text-secondary space-y-1">
<li>SSPC-SP 6/10/11 - Graus de limpeza</li>
<li>SSPC-PA 2 - Medição de espessura</li>
<li>PETROBRAS N-9 - Jato abrasivo</li>
<li>PETROBRAS N-13 - Requisitos de pintura</li>
</ul>
</div>
</div>
</div>
)
},
{
id: 'navigation',
title: 'Navegação do App',
icon: BookOpen,
keywords: ['navegação', 'menu', 'tela', 'módulo', 'como usar', 'tutorial'],
content: (
<div className="space-y-6">
<h3 className="text-xl font-black text-primary">Como Usar o GPI</h3>
<div className="space-y-4">
<div className="p-4 bg-surface-soft rounded-xl border border-border/40">
<h4 className="font-bold text-text-main mb-2">1. Obras & Projetos</h4>
<p className="text-sm text-text-secondary">
Ponto de partida. Crie projetos com nome, cliente, datas e ambiente de corrosividade (C1-C5).
Todos os outros módulos se relacionam com as obras cadastradas aqui.
</p>
</div>
<div className="p-4 bg-surface-soft rounded-xl border border-border/40">
<h4 className="font-bold text-text-main mb-2">2. Biblioteca Técnica</h4>
<p className="text-sm text-text-secondary">
Cadastre as fichas técnicas das tintas (PDF). O sistema extrai automaticamente dados como
Sólidos por Volume, rendimento e DFT de referência.
</p>
</div>
<div className="p-4 bg-surface-soft rounded-xl border border-border/40">
<h4 className="font-bold text-text-main mb-2">3. Esquemas de Pintura</h4>
<p className="text-sm text-text-secondary">
Defina sistemas de pintura vinculando tintas da biblioteca em camadas (primer, intermediária, acabamento).
</p>
</div>
<div className="p-4 bg-surface-soft rounded-xl border border-border/40">
<h4 className="font-bold text-text-main mb-2">4. Estudo de Rendimento</h4>
<p className="text-sm text-text-secondary">
Calcule o consumo de tinta baseado em peso (toneladas) ou área (m²).
Selecione a tinta da biblioteca para usar automaticamente os dados técnicos.
</p>
</div>
</div>
</div>
)
}
], []);
// Filtrar seções pela pesquisa
const filteredSections = useMemo(() => {
if (!searchTerm.trim()) return sections;
const term = searchTerm.toLowerCase();
return sections.filter(s =>
s.title.toLowerCase().includes(term) ||
s.keywords.some(k => k.includes(term))
);
}, [sections, searchTerm]);
const activeContent = sections.find(s => s.id === activeSection);
if (!isOpen) return null;
return (
<div className="fixed inset-0 bg-black/70 backdrop-blur-md z-[100] flex items-center justify-center p-4 animate-in fade-in duration-300">
<div className="bg-surface rounded-3xl shadow-2xl w-full max-w-5xl h-[85vh] flex flex-col border border-border/50 overflow-hidden">
{/* Header */}
<div className="p-6 border-b border-border/40 bg-gradient-to-r from-primary/10 to-transparent flex items-center justify-between shrink-0">
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-2xl bg-primary flex items-center justify-center text-white shadow-lg shadow-primary/30">
<BookOpen size={24} />
</div>
<div>
<h2 className="text-xl font-black text-text-main">Manual Técnico</h2>
<p className="text-xs text-text-muted">Pintura Industrial & Navegação do App</p>
</div>
</div>
<div className="flex items-center gap-3">
{/* Botão PDF */}
<a
href="/Engenharia_da_Durabilidade_Industrial.pdf"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 px-4 py-2.5 bg-red-500/10 text-red-500 rounded-xl text-sm font-bold hover:bg-red-500/20 transition-all border border-red-500/30"
>
<FileText size={16} />
<span className="hidden sm:inline">PDF Durabilidade</span>
<ExternalLink size={12} />
</a>
{/* Botão Índice */}
<button
onClick={() => setShowIndex(!showIndex)}
className={`flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-bold transition-all border ${showIndex
? 'bg-primary text-white border-primary'
: 'bg-surface-soft text-text-main border-border/40 hover:border-primary'
}`}
>
{showIndex ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
Índice
</button>
<button
onClick={onClose}
className="p-2.5 text-text-muted hover:text-text-main hover:bg-surface-soft rounded-xl transition-all"
aria-label="Fechar"
>
<X size={20} />
</button>
</div>
</div>
{/* Search Bar */}
<div className="p-4 border-b border-border/40 shrink-0">
<div className="relative">
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-text-muted" />
<input
type="text"
placeholder="Buscar no manual... (ex: sólidos, rendimento, espessura)"
className="w-full h-12 bg-surface-soft border border-border/40 rounded-xl pl-12 pr-4 text-sm focus:ring-4 focus:ring-primary/10 focus:border-primary transition-all font-medium outline-none"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>
{/* Content Area */}
<div className="flex-1 flex overflow-hidden">
{/* Sidebar / Index */}
<div className={`${showIndex ? 'w-72' : 'w-0'} shrink-0 border-r border-border/40 overflow-hidden transition-all duration-300`}>
<div className="p-4 overflow-y-auto h-full custom-scrollbar">
<div className="space-y-1">
{filteredSections.map((section) => (
<button
key={section.id}
onClick={() => {
setActiveSection(section.id);
if (window.innerWidth < 768) setShowIndex(false);
}}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold transition-all text-left ${activeSection === section.id
? 'bg-primary text-white shadow-lg shadow-primary/20'
: 'text-text-secondary hover:bg-surface-hover hover:text-text-main'
}`}
>
<section.icon size={18} />
<span className="truncate">{section.title}</span>
</button>
))}
</div>
{filteredSections.length === 0 && (
<div className="text-center py-8 text-text-muted text-sm">
Nenhum resultado para "{searchTerm}"
</div>
)}
</div>
</div>
{/* Main Content */}
<div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
{activeContent ? (
<div className="max-w-3xl mx-auto animate-in fade-in slide-in-from-right-4 duration-300">
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-border/40">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
<activeContent.icon size={20} />
</div>
<h2 className="text-2xl font-black text-text-main">{activeContent.title}</h2>
</div>
{activeContent.content}
</div>
) : (
<div className="flex items-center justify-center h-full text-text-muted">
Selecione um tópico no índice
</div>
)}
</div>
</div>
{/* Footer */}
<div className="p-4 border-t border-border/40 bg-surface-soft/50 text-center shrink-0">
<p className="text-xs text-text-muted">
GPI v2.1.0 • Manual Técnico baseado em normas ABNT, ISO, SSPC e Petrobras
</p>
</div>
</div>
</div>
);
};