497 lines
31 KiB
TypeScript
497 lines
31 KiB
TypeScript
import React, { useState, useMemo } from 'react';
|
|
import { Card } from '../components/Card';
|
|
import { Button } from '../components/Button';
|
|
import { Ruler, Droplets, CloudRain, PiggyBank, Paintbrush, ArrowRightLeft, Info, Calculator, Layers, HelpCircle } from 'lucide-react';
|
|
import { clsx } from 'clsx';
|
|
|
|
interface InputGroupProps {
|
|
label: React.ReactNode;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
placeholder?: string;
|
|
unit?: string;
|
|
}
|
|
|
|
const InputGroup: React.FC<InputGroupProps> = ({ label, value, onChange, placeholder, unit }) => (
|
|
<div className="space-y-1">
|
|
<label className="text-[10px] font-bold text-primary uppercase tracking-[0.15em]">{label}</label>
|
|
<div className="relative">
|
|
<input
|
|
type="number"
|
|
className="w-full bg-surface-soft border border-border/40 rounded-xl px-4 py-2.5 text-text-main font-bold focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all placeholder:text-text-muted/30 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
|
placeholder={placeholder}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
/>
|
|
{unit && <span className="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-bold text-text-muted">{unit}</span>}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export const CalculatorDashboard: React.FC = () => {
|
|
const [activeTab, setActiveTab] = useState('conversion');
|
|
|
|
// 1. Conversion
|
|
const [microns, setMicrons] = useState<string>('');
|
|
const [mils, setMils] = useState<string>('');
|
|
|
|
const handleMicronChange = (val: string) => {
|
|
setMicrons(val);
|
|
if (val) setMils((parseFloat(val) / 25.4).toFixed(2));
|
|
else setMils('');
|
|
};
|
|
const handleMilsChange = (val: string) => {
|
|
setMils(val);
|
|
if (val) setMicrons((parseFloat(val) * 25.4).toFixed(1));
|
|
else setMicrons('');
|
|
};
|
|
|
|
// 2. Thickness
|
|
const [epsParams, setEpsParams] = useState({ sv: '', dilution: '', wft: '' });
|
|
const epsResult = useMemo(() => {
|
|
const { sv, dilution, wft } = epsParams;
|
|
if (sv && wft) {
|
|
const svVal = parseFloat(sv);
|
|
const dilVal = parseFloat(dilution) || 0;
|
|
const wftVal = parseFloat(wft);
|
|
return (wftVal * svVal) / (100 + dilVal);
|
|
}
|
|
return null;
|
|
}, [epsParams]);
|
|
|
|
const [epuParams, setEpuParams] = useState({ sv: '', dilution: '', dft: '' });
|
|
const epuResult = useMemo(() => {
|
|
const { sv, dilution, dft } = epuParams;
|
|
if (sv && dft) {
|
|
const svVal = parseFloat(sv);
|
|
const dilVal = parseFloat(dilution) || 0;
|
|
const dftVal = parseFloat(dft);
|
|
return (dftVal * (100 + dilVal)) / svVal;
|
|
}
|
|
return null;
|
|
}, [epuParams]);
|
|
|
|
const [deadVolParams, setDeadVolParams] = useState({ roughness: '', sv: '', area: '' });
|
|
const deadVolResult = useMemo(() => {
|
|
const { roughness, sv, area } = deadVolParams;
|
|
if (roughness && sv && area) {
|
|
const rVal = parseFloat(roughness);
|
|
const svVal = parseFloat(sv);
|
|
const aVal = parseFloat(area);
|
|
const volDry = (aVal * rVal * 0.5) / 1000;
|
|
const volWet = volDry / (svVal / 100);
|
|
return { dry: volDry, wet: volWet };
|
|
}
|
|
return null;
|
|
}, [deadVolParams]);
|
|
|
|
// 3. Dew Point
|
|
const [envParams, setEnvParams] = useState({ temp: '', rh: '' });
|
|
const { dewPoint, dpStatus } = useMemo(() => {
|
|
const { temp, rh } = envParams;
|
|
if (temp && rh) {
|
|
const T = parseFloat(temp);
|
|
const RH = parseFloat(rh);
|
|
const a = 17.27;
|
|
const b = 237.7;
|
|
const alpha = ((a * T) / (b + T)) + Math.log(RH / 100);
|
|
const Td = (b * alpha) / (a - alpha);
|
|
|
|
const delta = T - Td;
|
|
let status = '';
|
|
if (delta < 3) status = 'Risco: Condensação iminente (Delta < 3°C)';
|
|
else status = 'Condição Segura (Delta > 3°C)';
|
|
|
|
return { dewPoint: Td, dpStatus: status };
|
|
}
|
|
return { dewPoint: null, dpStatus: '' };
|
|
}, [envParams]);
|
|
|
|
// 4. Consumption & Cost
|
|
const [consAreaParams, setConsAreaParams] = useState({ area: '', eps: '', sv: '', loss: '' });
|
|
const consAreaResult = useMemo(() => {
|
|
const { area, eps, sv, loss } = consAreaParams;
|
|
if (area && eps && sv) {
|
|
const a = parseFloat(area);
|
|
const e = parseFloat(eps);
|
|
const s = parseFloat(sv);
|
|
const l = parseFloat(loss) || 0;
|
|
const theo = (a * e) / (10 * s);
|
|
return theo / (1 - (l / 100));
|
|
}
|
|
return null;
|
|
}, [consAreaParams]);
|
|
|
|
const [consWeightParams, setConsWeightParams] = useState({ weight: '', relation: '' });
|
|
const consWeightResult = useMemo(() => {
|
|
const { weight, relation } = consWeightParams;
|
|
if (weight && relation) {
|
|
const w = parseFloat(weight);
|
|
const r = parseFloat(relation);
|
|
const tons = w / 1000;
|
|
return tons * r;
|
|
}
|
|
return null;
|
|
}, [consWeightParams]);
|
|
|
|
const [costParams, setCostParams] = useState({ coats: '1', area: '', eps: '', sv: '', dilution: '0', loss: '', price: '' });
|
|
const costResult = useMemo(() => {
|
|
const { coats, area, eps, sv, dilution, loss, price } = costParams;
|
|
if (area && eps && sv && price) {
|
|
const c = parseFloat(coats) || 1;
|
|
const a = parseFloat(area);
|
|
const e = parseFloat(eps);
|
|
const s = parseFloat(sv);
|
|
const d = parseFloat(dilution) || 0;
|
|
const l = parseFloat(loss) || 0;
|
|
const p = parseFloat(price);
|
|
|
|
const theoPaint = (a * e) / (10 * s);
|
|
const realPaintPerCoat = theoPaint / (1 - (l / 100));
|
|
const totalPaint = realPaintPerCoat * c;
|
|
|
|
const totalThinner = totalPaint * (d / 100);
|
|
const totalCost = totalPaint * p;
|
|
|
|
return { totalCost, totalPaint, totalThinner };
|
|
}
|
|
return null;
|
|
}, [costParams]);
|
|
|
|
// 5. Nozzles
|
|
const [nozzleCode, setNozzleCode] = useState('');
|
|
const [showNozzleHelp, setShowNozzleHelp] = useState(false);
|
|
const [nozzleResult, setNozzleResult] = useState<{ fan: number, flow: number, desc: string } | null>(null);
|
|
|
|
const calculateNozzle = () => {
|
|
if (nozzleCode.length < 3) return;
|
|
const widthDigit = parseInt(nozzleCode[0]);
|
|
const holeDigits = parseInt(nozzleCode.slice(1));
|
|
|
|
const fan = widthDigit * 5;
|
|
const flow = (holeDigits * holeDigits) * 0.0039;
|
|
|
|
let desc = '';
|
|
if (holeDigits < 15) desc = "Acabamento fino, líquidos leves (Verniz, Stain)";
|
|
else if (holeDigits < 19) desc = "Uso geral, média viscosidade (Látex, Esmalte)";
|
|
else if (holeDigits < 25) desc = "Alta produtividade, viscosidade alta (Epóxi, PU)";
|
|
else desc = "Extrema cobertura, materiais pesados (Massa, Ignífugo)";
|
|
|
|
setNozzleResult({ fan, flow, desc });
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-8 animate-in fade-in duration-700">
|
|
{/* Header */}
|
|
<div className="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-2">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h1 className="text-3xl md:text-4xl font-black text-text-main tracking-tight mb-0">Ferramentas & Cálculos</h1>
|
|
<p className="text-sm text-text-muted font-medium tracking-wide">Utilitários técnicos para pintura industrial</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div className="flex items-center justify-between border-b border-border/40 scrollbar-hide overflow-x-auto">
|
|
<nav className="flex space-x-10 min-w-max px-2" aria-label="Tabs">
|
|
{[
|
|
{ id: 'conversion', label: 'Conversões', icon: ArrowRightLeft },
|
|
{ id: 'thickness', label: 'Espessura', icon: Ruler },
|
|
{ id: 'dewpoint', label: 'Ambiente', icon: CloudRain },
|
|
{ id: 'consumption', label: 'Consumo & Custo', icon: PiggyBank },
|
|
{ id: 'nozzles', label: 'Bicos Airless', icon: Paintbrush },
|
|
].map((tab) => {
|
|
const Icon = tab.icon;
|
|
const active = activeTab === tab.id;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
className={clsx(
|
|
'whitespace-nowrap py-5 px-1 border-b-2 font-bold text-xs uppercase tracking-[0.15em] flex items-center gap-3 transition-all relative',
|
|
active
|
|
? 'border-primary text-primary'
|
|
: 'border-transparent text-text-muted hover:text-text-main hover:border-border'
|
|
)}
|
|
>
|
|
<Icon className={clsx("w-4 h-4", active ? "text-primary" : "text-text-muted")} />
|
|
{tab.label}
|
|
{active && <span className="absolute bottom-[-1px] left-0 right-0 h-[2px] bg-primary shadow-[0_0_12px_rgba(13,127,242,0.6)]"></span>}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Content for Tabs */}
|
|
<div className="min-h-[400px]">
|
|
|
|
{/* 1. CONVERSION */}
|
|
{activeTab === 'conversion' && (
|
|
<div className="max-w-2xl mx-auto space-y-6 animate-in slide-in-from-bottom-4 duration-500">
|
|
<Card className="p-8 space-y-8 bg-surface border-border/40 shadow-soft">
|
|
<div className="flex flex-col gap-2 border-b border-border/40 pb-6">
|
|
<h3 className="text-xl font-bold text-text-main">Conversor de Unidades</h3>
|
|
<p className="text-sm text-text-muted">Microns (μm) ↔ Milesimos de Polegada (mils)</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
|
<InputGroup
|
|
label={<>Microns (<span className="normal-case">μm</span>)</>}
|
|
unit="μm"
|
|
value={microns}
|
|
onChange={handleMicronChange}
|
|
placeholder="0"
|
|
/>
|
|
<div className="hidden md:flex justify-center text-text-muted"><ArrowRightLeft /></div>
|
|
<InputGroup label="Mils" unit="mils" value={mils} onChange={handleMilsChange} placeholder="0" />
|
|
</div>
|
|
|
|
<div className="bg-primary/5 rounded-xl p-4 flex gap-3 text-sm text-text-secondary">
|
|
<Info className="w-5 h-5 text-primary shrink-0" />
|
|
<p>Fator de conversão: <span className="font-bold text-text-main">1 mil = 25.4 μm</span>.</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* 2. THICKNESS */}
|
|
{activeTab === 'thickness' && (
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-in slide-in-from-bottom-4 duration-500">
|
|
{/* EPS Calc */}
|
|
<Card className="p-6 space-y-6 border-border/40 hover:shadow-md transition-all">
|
|
<div className="flex items-center gap-3 pb-4 border-b border-border/40">
|
|
<div className="p-2 bg-blue-500/10 rounded-lg text-blue-500"><Ruler size={18} /></div>
|
|
<h3 className="font-bold text-text-main">Cálculo de EPS (Seca)</h3>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<InputGroup label="Espessura Úmida (EPU)" unit="μm" value={epsParams.wft} onChange={(v) => setEpsParams({ ...epsParams, wft: v })} />
|
|
<InputGroup label="Sólidos por Volume" unit="%" value={epsParams.sv} onChange={(v) => setEpsParams({ ...epsParams, sv: v })} />
|
|
<InputGroup label="Diluição Adicionada" unit="%" value={epsParams.dilution} onChange={(v) => setEpsParams({ ...epsParams, dilution: v })} />
|
|
</div>
|
|
<div className="pt-4 mt-4 bg-surface-soft rounded-xl p-4 text-center">
|
|
<span className="text-[10px] uppercase font-bold text-text-muted">Resultado Esperado</span>
|
|
<div className="text-3xl font-black text-primary mt-1">{epsResult ? epsResult.toFixed(1) : '--'} <span className="text-sm text-text-muted">μm</span></div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* EPU Calc */}
|
|
<Card className="p-6 space-y-6 border-border/40 hover:shadow-md transition-all">
|
|
<div className="flex items-center gap-3 pb-4 border-b border-border/40">
|
|
<div className="p-2 bg-indigo-500/10 rounded-lg text-indigo-500"><Droplets size={18} /></div>
|
|
<h3 className="font-bold text-text-main">Cálculo de EPU (Úmida)</h3>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<InputGroup label="EPS Desejada" unit="μm" value={epuParams.dft} onChange={(v) => setEpuParams({ ...epuParams, dft: v })} />
|
|
<InputGroup label="Sólidos por Volume" unit="%" value={epuParams.sv} onChange={(v) => setEpuParams({ ...epuParams, sv: v })} />
|
|
<InputGroup label="Diluição Prevista" unit="%" value={epuParams.dilution} onChange={(v) => setEpuParams({ ...epuParams, dilution: v })} />
|
|
</div>
|
|
<div className="pt-4 mt-4 bg-surface-soft rounded-xl p-4 text-center">
|
|
<span className="text-[10px] uppercase font-bold text-text-muted">Aplicar Camada de</span>
|
|
<div className="text-3xl font-black text-indigo-500 mt-1">{epuResult ? epuResult.toFixed(0) : '--'} <span className="text-sm text-text-muted">μm</span></div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Dead Volume */}
|
|
<Card className="p-6 space-y-6 border-border/40 hover:shadow-md transition-all">
|
|
<div className="flex items-center gap-3 pb-4 border-b border-border/40">
|
|
<div className="p-2 bg-amber-500/10 rounded-lg text-amber-500"><Layers size={18} /></div>
|
|
<h3 className="font-bold text-text-main">Volume Morto</h3>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<InputGroup label="Área Total" unit="m²" value={deadVolParams.area} onChange={(v) => setDeadVolParams({ ...deadVolParams, area: v })} />
|
|
<InputGroup label="Rugosidade Média" unit="μm" value={deadVolParams.roughness} onChange={(v) => setDeadVolParams({ ...deadVolParams, roughness: v })} />
|
|
<InputGroup label="Sólidos por Volume" unit="%" value={deadVolParams.sv} onChange={(v) => setDeadVolParams({ ...deadVolParams, sv: v })} />
|
|
</div>
|
|
<div className="pt-4 mt-4 bg-surface-soft rounded-xl p-4 text-center space-y-2">
|
|
<div>
|
|
<span className="text-[9px] uppercase font-bold text-text-muted">Volume Tinta (L)</span>
|
|
<div className="text-2xl font-black text-text-main mt-0.5">{deadVolResult ? deadVolResult.wet.toFixed(2) : '--'} <span className="text-xs text-text-muted">L</span></div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* 3. DEW POINT */}
|
|
{activeTab === 'dewpoint' && (
|
|
<div className="max-w-xl mx-auto space-y-6 animate-in slide-in-from-bottom-4 duration-500">
|
|
<Card className="p-8 space-y-8 bg-surface border-border/40 shadow-soft">
|
|
<div className="flex flex-col gap-2 border-b border-border/40 pb-6">
|
|
<h3 className="text-xl font-bold text-text-main">Ponto de Orvalho</h3>
|
|
<p className="text-sm text-text-muted">Cálculo da temperatura de condensação</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<InputGroup label="Temp. Ambiente" unit="°C" value={envParams.temp} onChange={(v) => setEnvParams({ ...envParams, temp: v })} />
|
|
<InputGroup label="Umidade Relativa" unit="%" value={envParams.rh} onChange={(v) => setEnvParams({ ...envParams, rh: v })} />
|
|
</div>
|
|
|
|
<div className={clsx(
|
|
"rounded-xl p-6 text-center transition-all border",
|
|
dewPoint === null ? "bg-surface-soft border-transparent" :
|
|
(dpStatus.includes('Risco') ? "bg-error/10 border-error/30" : "bg-success/10 border-success/30")
|
|
)}>
|
|
<span className="text-[10px] uppercase font-bold text-text-muted block mb-2">Ponto de Orvalho Calculado</span>
|
|
<div className={clsx("text-4xl font-black mb-2", dpStatus.includes('Risco') ? "text-error" : "text-success")}>
|
|
{dewPoint ? dewPoint.toFixed(1) : '--'}°C
|
|
</div>
|
|
<span className={clsx("text-xs font-bold uppercase tracking-widest", dpStatus.includes('Risco') ? "text-error" : "text-success")}>
|
|
{dpStatus || 'Aguardando dados...'}
|
|
</span>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* 4. CONSUMPTION & COST */}
|
|
{activeTab === 'consumption' && (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-in slide-in-from-bottom-4 duration-500">
|
|
{/* Area Consumption */}
|
|
<Card className="p-6 space-y-6 border-border/40">
|
|
<div className="flex items-center gap-3 pb-4 border-b border-border/40">
|
|
<div className="p-2 bg-emerald-500/10 rounded-lg text-emerald-500"><Paintbrush size={18} /></div>
|
|
<h3 className="font-bold text-text-main">Consumo por Área</h3>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<InputGroup label="Área" unit="m²" value={consAreaParams.area} onChange={(v) => setConsAreaParams({ ...consAreaParams, area: v })} />
|
|
<InputGroup label="EPS" unit="μm" value={consAreaParams.eps} onChange={(v) => setConsAreaParams({ ...consAreaParams, eps: v })} />
|
|
<InputGroup label="Sólidos Vol." unit="%" value={consAreaParams.sv} onChange={(v) => setConsAreaParams({ ...consAreaParams, sv: v })} />
|
|
<InputGroup label="Perdas" unit="%" value={consAreaParams.loss} onChange={(v) => setConsAreaParams({ ...consAreaParams, loss: v })} />
|
|
</div>
|
|
<div className="pt-4 mt-4 bg-surface-soft rounded-xl p-4 text-center">
|
|
<span className="text-[10px] uppercase font-bold text-text-muted">Consumo Estimado</span>
|
|
<div className="text-3xl font-black text-emerald-500 mt-1">{consAreaResult ? consAreaResult.toFixed(1) : '--'} <span className="text-sm text-text-muted">Litros</span></div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Weight Consumption */}
|
|
<Card className="p-6 space-y-6 border-border/40">
|
|
<div className="flex items-center gap-3 pb-4 border-b border-border/40">
|
|
<div className="p-2 bg-orange-500/10 rounded-lg text-orange-500"><PiggyBank size={18} /></div>
|
|
<h3 className="font-bold text-text-main">Consumo por Peso</h3>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<InputGroup label="Peso Total" unit="Kg" value={consWeightParams.weight} onChange={(v) => setConsWeightParams({ ...consWeightParams, weight: v })} />
|
|
<InputGroup label="Relação" unit="L/Ton" value={consWeightParams.relation} onChange={(v) => setConsWeightParams({ ...consWeightParams, relation: v })} />
|
|
</div>
|
|
<div className="pt-4 mt-8 bg-surface-soft rounded-xl p-4 text-center">
|
|
<span className="text-[10px] uppercase font-bold text-text-muted">Volume Necessário</span>
|
|
<div className="text-3xl font-black text-orange-500 mt-1">{consWeightResult ? consWeightResult.toFixed(1) : '--'} <span className="text-sm text-text-muted">Litros</span></div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Cost Estimator */}
|
|
<Card className="p-6 space-y-6 border-border/40 lg:col-span-2">
|
|
<div className="flex items-center gap-3 pb-4 border-b border-border/40">
|
|
<div className="p-2 bg-primary/10 rounded-lg text-primary"><Calculator size={18} /></div>
|
|
<h3 className="font-bold text-text-main">Estimativa de Custos</h3>
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<InputGroup label="Demãos" unit="un" value={costParams.coats} onChange={(v) => setCostParams({ ...costParams, coats: v })} />
|
|
<InputGroup label="Área" unit="m²" value={costParams.area} onChange={(v) => setCostParams({ ...costParams, area: v })} />
|
|
<InputGroup label="EPS" unit="μm" value={costParams.eps} onChange={(v) => setCostParams({ ...costParams, eps: v })} />
|
|
<InputGroup label="Preço" unit="R$/L" value={costParams.price} onChange={(v) => setCostParams({ ...costParams, price: v })} />
|
|
<InputGroup label="Sólidos Vol." unit="%" value={costParams.sv} onChange={(v) => setCostParams({ ...costParams, sv: v })} />
|
|
<InputGroup label="Perdas" unit="%" value={costParams.loss} onChange={(v) => setCostParams({ ...costParams, loss: v })} />
|
|
<InputGroup label="Diluição" unit="%" value={costParams.dilution} onChange={(v) => setCostParams({ ...costParams, dilution: v })} />
|
|
</div>
|
|
<div className="pt-4 mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div className="bg-surface-soft rounded-xl p-4 text-center">
|
|
<span className="text-[9px] uppercase font-bold text-text-muted">Volume Tinta</span>
|
|
<div className="text-xl font-black text-text-main">{costResult ? costResult.totalPaint.toFixed(1) : '--'} L</div>
|
|
</div>
|
|
<div className="bg-surface-soft rounded-xl p-4 text-center">
|
|
<span className="text-[9px] uppercase font-bold text-text-muted">Volume Diluente</span>
|
|
<div className="text-xl font-black text-text-main">{costResult ? costResult.totalThinner.toFixed(1) : '--'} L</div>
|
|
</div>
|
|
<div className="bg-primary/10 rounded-xl p-4 text-center border border-primary/20">
|
|
<span className="text-[9px] uppercase font-bold text-text-muted">Custo Estimado</span>
|
|
<div className="text-2xl font-black text-primary">R$ {costResult ? costResult.totalCost.toFixed(2) : '--'}</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* 5. Nozzles */}
|
|
{activeTab === 'nozzles' && (
|
|
<div className="max-w-xl mx-auto space-y-6 animate-in slide-in-from-bottom-4 duration-500">
|
|
<Card className="p-8 space-y-8 bg-surface border-border/40 shadow-soft">
|
|
<div className="flex flex-col gap-2 border-b border-border/40 pb-6">
|
|
<h3 className="text-xl font-bold text-text-main">Seletor de Bicos Airless</h3>
|
|
<p className="text-sm text-text-muted">Insira o código do bico (ex: 517) para ver detalhes</p>
|
|
</div>
|
|
|
|
<div className="flex gap-4 items-end">
|
|
<div className="flex-1">
|
|
<InputGroup label="Código do Bico" placeholder="ex: 517" value={nozzleCode} onChange={setNozzleCode} />
|
|
</div>
|
|
<button
|
|
onClick={() => setShowNozzleHelp(!showNozzleHelp)}
|
|
className="mb-[2px] p-3 rounded-xl bg-surface-soft text-text-muted hover:text-primary hover:bg-primary/10 transition-colors"
|
|
title="Como ler o código?"
|
|
>
|
|
<HelpCircle size={20} />
|
|
</button>
|
|
<Button onClick={calculateNozzle} className="mb-[2px]">Calcular</Button>
|
|
</div>
|
|
|
|
{showNozzleHelp && (
|
|
<div className="bg-surface-soft border border-border/40 rounded-xl p-4 text-sm space-y-3 animate-in fade-in zoom-in-95 duration-200">
|
|
<h4 className="font-bold text-text-main flex items-center gap-2">
|
|
<Info size={16} className="text-primary" />
|
|
Entendendo o Código (ex: 517)
|
|
</h4>
|
|
<ul className="space-y-2 text-text-secondary">
|
|
<li className="flex gap-2">
|
|
<span className="font-black text-primary shrink-0">1º Dígito</span>
|
|
<div>
|
|
<strong className="text-text-main">Ângulo do Leque:</strong> Multiplique por 5 para saber a largura em cm (aprox a 30cm da superfície).
|
|
<br /><span className="text-xs text-text-muted">Ex: 5xx = 50° (aprox. 25cm).</span>
|
|
</div>
|
|
</li>
|
|
<li className="flex gap-2">
|
|
<span className="font-black text-primary shrink-0">Últimos</span>
|
|
<div>
|
|
<strong className="text-text-main">Orifício (Vazão):</strong> Diâmetro em milésimos de polegada. Quanto maior, mais tinta sai.
|
|
<br /><span className="text-xs text-text-muted">Ex: x17 = 0.017". Indicado para látex/esmalte.</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{nozzleResult && (
|
|
<div className="bg-surface-soft border border-border/20 rounded-2xl p-6 space-y-6">
|
|
<div className="grid grid-cols-2 gap-8 text-center">
|
|
<div>
|
|
<span className="text-[10px] font-bold text-text-muted uppercase tracking-widest block mb-1">Abertura Leque</span>
|
|
<span className="text-3xl font-black text-text-main">{nozzleResult.fan} <span className="text-sm text-text-muted font-bold">cm</span></span>
|
|
<p className="text-[10px] text-text-muted mt-1">(Aprox. a 30cm)</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-[10px] font-bold text-text-muted uppercase tracking-widest block mb-1">Vazão Aprox.</span>
|
|
<span className="text-3xl font-black text-primary">{nozzleResult.flow.toFixed(2)} <span className="text-sm text-text-muted font-bold">L/min</span></span>
|
|
<p className="text-[10px] text-text-muted mt-1">(@ 2000 psi)</p>
|
|
</div>
|
|
</div>
|
|
<div className="pt-4 border-t border-border/20">
|
|
<p className="text-center text-sm font-medium text-text-secondary">{nozzleResult.desc}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-primary/5 rounded-xl p-4 flex gap-3 text-sm text-text-secondary">
|
|
<Info className="w-5 h-5 text-primary shrink-0" />
|
|
<p className="text-xs">Valores teóricos de referência. Consulte sempre a ficha técnica do fabricante do equipamento.</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|