618 lines
36 KiB
TypeScript
618 lines
36 KiB
TypeScript
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>
|
||
);
|
||
};
|