{"id":11802,"date":"2026-02-04T16:10:06","date_gmt":"2026-02-04T19:10:06","guid":{"rendered":"https:\/\/rmts.com.br\/wp-01\/codigo-calculadora-impressao-3d-feita-no-gemini\/"},"modified":"2026-02-04T16:10:06","modified_gmt":"2026-02-04T19:10:06","slug":"codigo-calculadora-impressao-3d-feita-no-gemini","status":"publish","type":"post","link":"https:\/\/rmts.com.br\/wp-01\/codigo-calculadora-impressao-3d-feita-no-gemini\/","title":{"rendered":"C\u00f3digo Calculadora Impress\u00e3o 3D feita no Gemini"},"content":{"rendered":"

<\/p>\n

C\u00f3digo da calculadora mostrada no v\u00eddeo:<\/p>\n<\/p>\n

 <\/p>\n

\n
\n
import React, { useState, useEffect, useMemo } from ‘react’;<\/div>\n
import {<\/div>\n
Calculator,<\/div>\n
Settings,<\/div>\n
Save,<\/div>\n
Trash2,<\/div>\n
AlertCircle,<\/div>\n
TrendingUp,<\/div>\n
Package,<\/div>\n
Zap,<\/div>\n
Clock,<\/div>\n
Info,<\/div>\n
Download,<\/div>\n
History,<\/div>\n
MessageCircle,<\/div>\n
Sliders,<\/div>\n
CheckCircle2,<\/div>\n
Share2,<\/div>\n
FileSpreadsheet,<\/div>\n
HelpCircle,<\/div>\n
X,<\/div>\n
ChevronRight,<\/div>\n
Copy,<\/div>\n
Coins,<\/div>\n
Box<\/div>\n
} from ‘lucide-react’;<\/div>\n
\/\/ — Utilit\u00e1rios —<\/div>\n
const parseLocalFloat = (str) => {<\/div>\n
if (typeof str === ‘number’) return str;<\/div>\n
if (!str || typeof str !== ‘string’ || str.trim() === ”) return0;<\/div>\n
return parseFloat(str.replace(‘,’, ‘.’));<\/div>\n
};<\/div>\n
const parseSmartTime = (input) => {<\/div>\n
if (!input) return0;<\/div>\n
const str = input.toString().toLowerCase().replace(‘,’, ‘.’);<\/div>\n
if (str.includes(‘:’)) {<\/div>\n
const [h, m] = str.split(‘:’);<\/div>\n
return parseFloat(h) + (parseFloat(m) \/ 60);<\/div>\n
}<\/div>\n
let totalHours = 0;<\/div>\n
const matchH = str.match(\/([\\d.]+)h\/);<\/div>\n
const matchM = str.match(\/([\\d.]+)m\/);<\/div>\n
if (matchH) totalHours += parseFloat(matchH[1]);<\/div>\n
if (matchM) totalHours += parseFloat(matchM[1]) \/ 60;<\/div>\n
if (!matchH && !matchM) return parseFloat(str) || 0;<\/div>\n
return totalHours;<\/div>\n
};<\/div>\n
const parseSmartWeight = (input) => {<\/div>\n
if (!input) return0;<\/div>\n
const str = input.toString().toLowerCase().replace(‘,’, ‘.’);<\/div>\n
if (str.includes(‘kg’)) return parseFloat(str.replace(‘kg’, ”)) * 1000;<\/div>\n
if (str.includes(‘g’)) return parseFloat(str.replace(‘g’, ”));<\/div>\n
return parseFloat(str) || 0;<\/div>\n
};<\/div>\n
const formatCurrency = (value) => {<\/div>\n
if (isNaN(value) || value === null) return’R$ 0,00′;<\/div>\n
returnnewIntl.NumberFormat(‘pt-BR’, { style: ‘currency’, currency: ‘BRL’ }).format(value);<\/div>\n
};<\/div>\n
const formatPercentage = (value) => {<\/div>\n
if (isNaN(value) || value === null) return’0,00%’;<\/div>\n
return`${value.toFixed(1).replace(‘.’, ‘,’)}%`;<\/div>\n
};<\/div>\n
\/\/ — Presets —<\/div>\n
const MATERIAL_PRESETS = [<\/div>\n
{ label: ‘PLA’, cost: ‘100.00’ },<\/div>\n
{ label: ‘PETG’, cost: ‘110.00’ },<\/div>\n
{ label: ‘ABS’, cost: ‘90.00’ },<\/div>\n
{ label: ‘Resina’, cost: ‘250.00’ }<\/div>\n
];<\/div>\n
const PRINTER_PRESETS = [<\/div>\n
{ label: ‘Ender 3\/V2’, watts: ‘150’, price: ‘1800.00’ },<\/div>\n
{ label: ‘Bambu A1’, watts: ‘130’, price: ‘3600.00’ },<\/div>\n
{ label: ‘Bambu X1C’, watts: ‘350’, price: ‘12000.00’ },<\/div>\n
{ label: ‘Resina’, watts: ’80’, price: ‘2500.00’ }<\/div>\n
];<\/div>\n
\/\/ — Componentes UI —<\/div>\n
const Toast = ({ message, type, onClose }) => (<\/div>\n
<div className={`fixed top-4 right-4 z-50 px-6 py-4 rounded-2xl shadow-xl flex items-center gap-3 animate-fade-in-down border border-opacity-20 backdrop-blur-md ${<\/div>\n
type === ‘error’ ? ‘bg-red-50 border-red-200 text-red-800’ : ‘bg-emerald-50 border-emerald-200 text-emerald-800’<\/div>\n
}`}><\/div>\n
{type === ‘error’ ? <AlertCircle size={20}\/> : <CheckCircle2 size={20}\/>}<\/div>\n
<span className=”font-medium text-sm”>{message}<\/span><\/div>\n
<button onClick={onClose} className=”ml-2 hover:opacity-70 transition-opacity”><X size={16}\/><\/button><\/div>\n
<\/div><\/div>\n
);<\/div>\n
const ConfirmModal = ({ isOpen, title, message, onConfirm, onCancel }) => {<\/div>\n
if (!isOpen) returnnull;<\/div>\n
return (<\/div>\n
<div className=”fixed inset-0 z-50 flex items-center justify-center bg-gray-900\/40 backdrop-blur-sm p-4 transition-all”><\/div>\n
<div className=”bg-white rounded-2xl shadow-2xl max-w-sm w-full p-6 animate-scale-in border border-gray-100″><\/div>\n
<h3 className=”text-xl font-bold text-gray-800 mb-2″>{title}<\/h3><\/div>\n
<p className=”text-gray-500 text-sm mb-8 leading-relaxed”>{message}<\/p><\/div>\n
<div className=”flex justify-end gap-3″><\/div>\n
<button onClick={onCancel} className=”px-5 py-2.5 text-gray-600 hover:bg-gray-100 rounded-xl text-sm font-semibold transition-colors”>Cancelar<\/button><\/div>\n
<button onClick={onConfirm} className=”px-5 py-2.5 bg-red-500 hover:bg-red-600 text-white rounded-xl text-sm font-semibold shadow-lg shadow-red-500\/30 transition-all active:scale-95″>Confirmar<\/button><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
);<\/div>\n
};<\/div>\n
const Card = ({ children, className = “”, noPadding = false }) => (<\/div>\n
<div className={`bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden transition-all hover:shadow-md ${className}`}><\/div>\n
{children}<\/div>\n
<\/div><\/div>\n
);<\/div>\n
const Tooltip = ({ text, children }) => (<\/div>\n
<div className=”relative flex items-center group”><\/div>\n
{children}<\/div>\n
<div className=”absolute bottom-full left-1\/2 transform -translate-x-1\/2 mb-2 w-48 p-3 text-xs font-medium text-white bg-gray-800 rounded-xl shadow-xl opacity-0 group-hover:opacity-100 transition-all duration-200 z-50 pointer-events-none text-center translate-y-2 group-hover:translate-y-0″><\/div>\n
{text}<\/div>\n
<div className=”absolute top-full left-1\/2 transform -translate-x-1\/2 border-4 border-transparent border-t-gray-800″><\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
);<\/div>\n
const InputField = ({ id, label, value, onChange, error, placeholder, icon: Icon, helpText, suffix, onBlur }) => (<\/div>\n
<div className=”flex flex-col mb-5 relative group”><\/div>\n
<label htmlFor={id} className=”mb-2 text-xs font-bold text-gray-500 uppercase tracking-wide flex items-center justify-between”><\/div>\n
<span className=”flex items-center gap-1.5″><\/div>\n
{Icon && <Icon className=”w-3.5 h-3.5 text-indigo-500″ \/>}<\/div>\n
{label}<\/div>\n
{helpText && (<\/div>\n
<Tooltip text={helpText}><\/div>\n
<Info className=”w-3.5 h-3.5 text-gray-400 cursor-help hover:text-indigo-500 transition-colors” \/><\/div>\n
<\/Tooltip><\/div>\n
)}<\/div>\n
<\/span><\/div>\n
<\/label><\/div>\n
<div className=”relative”><\/div>\n
<input<\/div>\n
id={id}<\/div>\n
type=”text”<\/div>\n
inputMode=”decimal”<\/div>\n
value={value}<\/div>\n
onChange={(e) => onChange(id, e.target.value)}<\/div>\n
onBlur={onBlur}<\/div>\n
placeholder={placeholder}<\/div>\n
className={`w-full pl-4 pr-10 py-3 bg-gray-50\/50 border rounded-xl transition-all duration-300 font-semibold text-gray-700 placeholder-gray-400<\/div>\n
${error<\/div>\n
? ‘border-red-300 bg-red-50\/50 focus:ring-4 focus:ring-red-100 focus:border-red-400’<\/div>\n
: ‘border-gray-200 focus:bg-white focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500\/10 hover:border-gray-300’<\/div>\n
}<\/div>\n
focus:outline-none`}<\/div>\n
\/><\/div>\n
{suffix && (<\/div>\n
<span className=”absolute right-4 top-3.5 text-gray-400 text-xs font-bold pointer-events-none”>{suffix}<\/span><\/div>\n
)}<\/div>\n
<\/div><\/div>\n
{error && <p className=”mt-1.5 text-xs text-red-500 flex items-center font-medium animate-pulse”><AlertCircle className=”w-3 h-3 mr-1″\/>{error}<\/p>}<\/div>\n
<\/div><\/div>\n
);<\/div>\n
const SliderInput = ({ id, label, value, onChange, min = 0, max = 100, step = 1, suffix = “%”, presets = [] }) => {<\/div>\n
const numericValue = parseLocalFloat(value);<\/div>\n
return (<\/div>\n
<div className=”mb-6 p-4 bg-gray-50\/80 rounded-2xl border border-gray-100″><\/div>\n
<div className=”flex justify-between items-center mb-3″><\/div>\n
<label htmlFor={id} className=”text-sm font-bold text-gray-700″>{label}<\/label><\/div>\n
<div className=”flex items-center bg-white px-3 py-1 rounded-lg border border-gray-200 shadow-sm”><\/div>\n
<input<\/div>\n
type=”number” value={numericValue}<\/div>\n
onChange={(e) => onChange(id, e.target.value)}<\/div>\n
className=”w-12 text-sm font-bold text-indigo-600 text-right focus:outline-none”<\/div>\n
\/><\/div>\n
<span className=”text-xs text-gray-400 font-bold ml-1″>{suffix}<\/span><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<div className=”flex flex-col gap-3″><\/div>\n
<input<\/div>\n
type=”range” min={min} max={max} step={step} value={numericValue}<\/div>\n
onChange={(e) => onChange(id, e.target.value)}<\/div>\n
className=”w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600 hover:accent-indigo-500 transition-all”<\/div>\n
\/><\/div>\n
<\/div><\/div>\n
{presets.length > 0 && (<\/div>\n
<div className=”flex gap-2 mt-3 overflow-x-auto pb-1 scrollbar-hide”><\/div>\n
{presets.map(p => (<\/div>\n
<button key={p} onClick={() => onChange(id, p.toString())} className=”px-3 py-1.5 text-xs font-semibold bg-white border border-gray-200 text-gray-600 rounded-lg hover:border-indigo-300 hover:text-indigo-600 transition-all shadow-sm active:scale-95 whitespace-nowrap”><\/div>\n
{p}{suffix}<\/div>\n
<\/button><\/div>\n
))}<\/div>\n
<\/div><\/div>\n
)}<\/div>\n
<\/div><\/div>\n
);<\/div>\n
};<\/div>\n
const ProgressBar = ({ label, value, total, colorClass }) => {<\/div>\n
const percent = total > 0 ? (value \/ total) * 100 : 0;<\/div>\n
return (<\/div>\n
<div className=”mb-3 last:mb-0″><\/div>\n
<div className=”flex justify-between text-xs mb-1.5″><\/div>\n
<span className=”text-gray-500 font-medium flex items-center gap-1″>{label}<\/span><\/div>\n
<span className=”font-bold text-gray-700″>{formatCurrency(value)} <span className=”text-gray-400 font-normal ml-1″>({percent.toFixed(1)}%)<\/span><\/span><\/div>\n
<\/div><\/div>\n
<div className=”w-full bg-gray-100 rounded-full h-2 overflow-hidden”><\/div>\n
<div className={`h-full rounded-full ${colorClass} transition-all duration-700 ease-out`} style={{ width: `${Math.min(percent, 100)}%` }}><\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
);<\/div>\n
};<\/div>\n
\/\/ — Configura\u00e7\u00f5es Iniciais —<\/div>\n
const DEFAULT_SETTINGS = {<\/div>\n
consumo_watts: ‘150’,<\/div>\n
custo_kwh: ‘1.25’,<\/div>\n
valor_impressora: ‘6000.00’,<\/div>\n
vida_util_horas: ‘4000’,<\/div>\n
custo_filamento_padrao: ‘110.00’,<\/div>\n
lucro_minimo_projeto: ‘15.00’<\/div>\n
};<\/div>\n
const DEFAULT_PROJECT = {<\/div>\n
id: null,<\/div>\n
nome: ”,<\/div>\n
quantidade_pecas: ‘1’,<\/div>\n
gramas_filamento: ”,<\/div>\n
horas_impressao: ”,<\/div>\n
custo_filamento_kg: ”,<\/div>\n
custo_outros: ‘0’,<\/div>\n
custo_embalagem: ‘0’,<\/div>\n
margem_lucro_percentual: ‘100’,<\/div>\n
falha_risco_percentual: ‘0’<\/div>\n
};<\/div>\n
\/\/ — Componente Principal —<\/div>\n
export default function App() {<\/div>\n
const [activeTab, setActiveTab] = useState(‘calc’);<\/div>\n
const [settings, setSettings] = useState(DEFAULT_SETTINGS);<\/div>\n
const [project, setProject] = useState(DEFAULT_PROJECT);<\/div>\n
const [history, setHistory] = useState([]);<\/div>\n
<\/div>\n
\/\/ UI States<\/div>\n
const [showAdvanced, setShowAdvanced] = useState(true);<\/div>\n
const [viewUnitMode, setViewUnitMode] = useState(false);<\/div>\n
<\/div>\n
\/\/ New Feedback States<\/div>\n
const [notification, setNotification] = useState(null);<\/div>\n
const [confirmDialog, setConfirmDialog] = useState(null);<\/div>\n
\/\/ Inicializa\u00e7\u00e3o<\/div>\n
useEffect(() => {<\/div>\n
const savedSettings = localStorage.getItem(‘calc3d-settings-v6’);<\/div>\n
const savedProject = localStorage.getItem(‘calc3d-project-v6’);<\/div>\n
const savedHistory = localStorage.getItem(‘calc3d-history-v1’);<\/div>\n
<\/div>\n
if (savedSettings) setSettings(JSON.parse(savedSettings));<\/div>\n
if (savedProject) setProject(JSON.parse(savedProject));<\/div>\n
if (savedHistory) setHistory(JSON.parse(savedHistory));<\/div>\n
else {<\/div>\n
setProject(prev => ({…prev, custo_filamento_kg: DEFAULT_SETTINGS.custo_filamento_padrao}));<\/div>\n
}<\/div>\n
}, []);<\/div>\n
\/\/ Persist\u00eancia<\/div>\n
useEffect(() => { localStorage.setItem(‘calc3d-settings-v6’, JSON.stringify(settings)); }, [settings]);<\/div>\n
useEffect(() => { localStorage.setItem(‘calc3d-project-v6’, JSON.stringify(project)); }, [project]);<\/div>\n
useEffect(() => { localStorage.setItem(‘calc3d-history-v1’, JSON.stringify(history)); }, [history]);<\/div>\n
const showToast = (message, type = ‘success’) => {<\/div>\n
setNotification({ message, type });<\/div>\n
setTimeout(() => setNotification(null), 4000);<\/div>\n
};<\/div>\n
const handleSettingChange = (id, val) => setSettings(prev => ({ …prev, [id]: val }));<\/div>\n
const handleProjectChange = (id, val) => setProject(prev => ({ …prev, [id]: val }));<\/div>\n
<\/div>\n
const handleTimeBlur = () => {<\/div>\n
const hours = parseSmartTime(project.horas_impressao);<\/div>\n
if (hours > 0) handleProjectChange(‘horas_impressao’, hours.toFixed(2));<\/div>\n
};<\/div>\n
const handleWeightBlur = () => {<\/div>\n
const grams = parseSmartWeight(project.gramas_filamento);<\/div>\n
if (grams > 0) handleProjectChange(‘gramas_filamento’, grams.toFixed(1));<\/div>\n
};<\/div>\n
\/\/ — C\u00c1LCULOS —<\/div>\n
const results = useMemo(() => {<\/div>\n
constS = {<\/div>\n
watts: parseLocalFloat(settings.consumo_watts),<\/div>\n
kwh: parseLocalFloat(settings.custo_kwh),<\/div>\n
printerPrice: parseLocalFloat(settings.valor_impressora),<\/div>\n
lifeHours: parseLocalFloat(settings.vida_util_horas),<\/div>\n
minProfit: parseLocalFloat(settings.lucro_minimo_projeto)<\/div>\n
};<\/div>\n
constP = {<\/div>\n
qty: Math.max(1, parseInt(project.quantidade_pecas) || 1),<\/div>\n
grams: parseSmartWeight(project.gramas_filamento),<\/div>\n
hours: parseSmartTime(project.horas_impressao),<\/div>\n
filPrice: parseLocalFloat(project.custo_filamento_kg) || parseLocalFloat(settings.custo_filamento_padrao),<\/div>\n
others: parseLocalFloat(project.custo_outros),<\/div>\n
pack: parseLocalFloat(project.custo_embalagem),<\/div>\n
margin: parseLocalFloat(project.margem_lucro_percentual),<\/div>\n
risk: parseLocalFloat(project.falha_risco_percentual)<\/div>\n
};<\/div>\n
const kwhPrice = (S.watts \/ 1000) * S.kwh;<\/div>\n
const depreciationPrice = S.lifeHours > 0 ? S.printerPrice \/ S.lifeHours : 0;<\/div>\n
<\/div>\n
const costFilament = (P.grams \/ 1000) * P.filPrice;<\/div>\n
const costEnergy = kwhPrice * P.hours;<\/div>\n
const costDepreciation = depreciationPrice * P.hours;<\/div>\n
const costExtras = P.others + P.pack;<\/div>\n
<\/div>\n
const productionSum = costFilament + costEnergy + costDepreciation;<\/div>\n
const costFailMargin = productionSum * (P.risk \/ 100);<\/div>\n
const baseProductionCost = productionSum + costFailMargin;<\/div>\n
<\/div>\n
\/\/ CUSTO TOTAL (Custo de manufatura + Extras)<\/div>\n
const totalCost = baseProductionCost + costExtras;<\/div>\n
const unitTotalCost = totalCost \/ P.qty;<\/div>\n
<\/div>\n
const profitValue = baseProductionCost * (P.margin \/ 100);<\/div>\n
const finalPrice = baseProductionCost + profitValue + costExtras;<\/div>\n
const actualProfit = finalPrice – totalCost;<\/div>\n
const unitPrice = finalPrice \/ P.qty;<\/div>\n
const unitProfit = actualProfit \/ P.qty;<\/div>\n
<\/div>\n
\/\/ Sugest\u00e3o de Pre\u00e7o para Lucro M\u00ednimo<\/div>\n
const suggestedPriceMinProfit = totalCost + S.minProfit;<\/div>\n
return {<\/div>\n
S, P,<\/div>\n
costs: { filament: costFilament, energy: costEnergy, depreciation: costDepreciation, risk: costFailMargin, packaging: P.pack, others: P.others, totalExtras: costExtras },<\/div>\n
baseProductionCost,<\/div>\n
totalCost,<\/div>\n
unitTotalCost,<\/div>\n
actualProfit, finalPrice, unitPrice, unitProfit,<\/div>\n
isLowProfit: actualProfit < S.minProfit,<\/div>\n
isHighRisk: P.risk > 30,<\/div>\n
suggestedPriceMinProfit,<\/div>\n
isValid: P.grams > 0 && P.hours > 0,<\/div>\n
missingFields: { grams: P.grams <= 0, hours: P.hours <= 0 }<\/div>\n
};<\/div>\n
}, [settings, project]);<\/div>\n
\/\/ — A\u00e7\u00f5es —<\/div>\n
const saveToHistory = () => {<\/div>\n
if (!project.nome) {<\/div>\n
showToast(“D\u00ea um nome ao projeto para salvar.”, “error”);<\/div>\n
return;<\/div>\n
}<\/div>\n
const newEntry = { …project, id: Date.now(), date: newDate().toISOString(), finalPrice: results.finalPrice };<\/div>\n
setHistory(prev => [newEntry, …prev]);<\/div>\n
showToast(“Projeto salvo no hist\u00f3rico!”);<\/div>\n
};<\/div>\n
const confirmReset = () => {<\/div>\n
setConfirmDialog({<\/div>\n
title: “Limpar Projeto”,<\/div>\n
message: “Tem certeza que deseja apagar todos os dados atuais do formul\u00e1rio?”,<\/div>\n
action: () => {<\/div>\n
setProject({ …DEFAULT_PROJECT, custo_filamento_kg: settings.custo_filamento_padrao });<\/div>\n
setConfirmDialog(null);<\/div>\n
showToast(“Dados limpos com sucesso.”);<\/div>\n
}<\/div>\n
});<\/div>\n
};<\/div>\n
const confirmDeleteHistory = (id) => {<\/div>\n
setConfirmDialog({<\/div>\n
title: “Excluir Registro”,<\/div>\n
message: “Essa a\u00e7\u00e3o n\u00e3o pode ser desfeita. Deseja continuar?”,<\/div>\n
action: () => {<\/div>\n
setHistory(prev => prev.filter(i => i.id !== id));<\/div>\n
setConfirmDialog(null);<\/div>\n
showToast(“Item exclu\u00eddo.”);<\/div>\n
}<\/div>\n
});<\/div>\n
};<\/div>\n
const loadFromHistory = (item) => {<\/div>\n
setProject(item);<\/div>\n
setActiveTab(‘calc’);<\/div>\n
showToast(“Projeto carregado!”);<\/div>\n
};<\/div>\n
const applyPsychologicalPrice = () => {<\/div>\n
const current = results.finalPrice;<\/div>\n
const integerPart = Math.floor(current);<\/div>\n
let suggestion = integerPart + 0.90;<\/div>\n
if (suggestion < current) suggestion += 1;<\/div>\n
<\/div>\n
const extras = results.costs.totalExtras;<\/div>\n
const cost = results.baseProductionCost;<\/div>\n
if (cost > 0) {<\/div>\n
const newMargin = (((suggestion – extras) \/ cost) – 1) * 100;<\/div>\n
handleProjectChange(‘margem_lucro_percentual’, newMargin.toFixed(2));<\/div>\n
showToast(“Pre\u00e7o arredondado!”);<\/div>\n
}<\/div>\n
};<\/div>\n
const openWhatsApp = () => {<\/div>\n
const text = `*Or\u00e7amento 3D*\\n\"\ud83d\udce6\" Projeto: ${project.nome || ‘Pe\u00e7a’}\\n\"\ud83d\udcb0\" Valor: ${formatCurrency(results.finalPrice)}\\n(Gerado por ZoomCalc3D)`;<\/div>\n
const url = `https:\/\/wa.me\/?text=${encodeURIComponent(text)}`;<\/div>\n
window.open(url, ‘_blank’);<\/div>\n
};<\/div>\n
\/\/ — COPY TO CLIPBOARD (Universal) —<\/div>\n
const copyToClipboard = (text) => {<\/div>\n
const textArea = document.createElement(“textarea”);<\/div>\n
textArea.value = text;<\/div>\n
<\/div>\n
\/\/ Evita scroll quando o elemento \u00e9 inserido<\/div>\n
textArea.style.top = “0”;<\/div>\n
textArea.style.left = “0”;<\/div>\n
textArea.style.position = “fixed”;<\/div>\n
textArea.style.opacity = “0”; \/\/ Invis\u00edvel<\/div>\n
document.body.appendChild(textArea);<\/div>\n
textArea.focus();<\/div>\n
textArea.select();<\/div>\n
try {<\/div>\n
const successful = document.execCommand(‘copy’);<\/div>\n
if(successful) showToast(“Copiado! Cole no Google Sheets (Ctrl+V).”, “success”);<\/div>\n
else showToast(“Erro ao copiar.”, “error”);<\/div>\n
} catch (err) {<\/div>\n
console.error(‘Fallback: Oops, unable to copy’, err);<\/div>\n
showToast(“Erro no navegador.”, “error”);<\/div>\n
}<\/div>\n
document.body.removeChild(textArea);<\/div>\n
};<\/div>\n
const copyToSheets = () => {<\/div>\n
if (!results.isValid) return;<\/div>\n
const fmt = (num) => typeof num === ‘number’ ? num.toFixed(2).replace(‘.’, ‘,’) : num;<\/div>\n
<\/div>\n
const tsvContent = `<\/div>\n
PROJETO\\t${project.nome || “Sem nome”}<\/div>\n
DATA\\t${new Date().toLocaleDateString()}<\/div>\n
—<\/div>\n
Item\\tTotal\\tUnit\u00e1rio<\/div>\n
Filamento\\t${fmt(results.costs.filament)}\\t${fmt(results.costs.filament\/results.P.qty)}<\/div>\n
Energia\\t${fmt(results.costs.energy)}\\t${fmt(results.costs.energy\/results.P.qty)}<\/div>\n
Desgaste\\t${fmt(results.costs.depreciation)}\\t${fmt(results.costs.depreciation\/results.P.qty)}<\/div>\n
Risco\\t${fmt(results.costs.risk)}\\t${fmt(results.costs.risk\/results.P.qty)}<\/div>\n
Extras\\t${fmt(results.costs.totalExtras)}\\t${fmt(results.costs.totalExtras\/results.P.qty)}<\/div>\n
CUSTO TOTAL\\t${fmt(results.totalCost)}\\t${fmt(results.totalCost\/results.P.qty)}<\/div>\n
LUCRO\\t${fmt(results.actualProfit)}\\t${fmt(results.actualProfit\/results.P.qty)}<\/div>\n
PRE\u00c7O FINAL\\t${fmt(results.finalPrice)}\\t${fmt(results.unitPrice)}<\/div>\n
`.trim();<\/div>\n
copyToClipboard(tsvContent);<\/div>\n
};<\/div>\n
\/\/ — EXPORT ALL HISTORY CSV —<\/div>\n
const exportHistoryCSV = () => {<\/div>\n
if (history.length === 0) {<\/div>\n
showToast(“Hist\u00f3rico vazio.”, “error”);<\/div>\n
return;<\/div>\n
}<\/div>\n
constBOM = “\\uFEFF”;<\/div>\n
const header = [“Data”, “Projeto”, “Qtd”, “Preco Final”];<\/div>\n
const rows = history.map(item => [<\/div>\n
newDate(item.date).toLocaleDateString(),<\/div>\n
item.nome || “Sem nome”,<\/div>\n
item.quantidade_pecas,<\/div>\n
formatCurrency(item.finalPrice).replace(‘R$’, ”).trim()<\/div>\n
]);<\/div>\n
<\/div>\n
const csvContent = BOM + [header, …rows].map(e => e.join(“;”)).join(“\\n”);<\/div>\n
const blob = newBlob([csvContent], { type: ‘text\/csv;charset=utf-8;’ });<\/div>\n
const link = document.createElement(“a”);<\/div>\n
link.href = URL.createObjectURL(blob);<\/div>\n
link.download = `historico_completo_${new Date().toISOString().slice(0,10)}.csv`;<\/div>\n
link.click();<\/div>\n
};<\/div>\n
const exportToCSV = () => {<\/div>\n
if (!results.isValid) return;<\/div>\n
const safeName = project.nome ? project.nome.replace(\/[^a-z0-9]\/gi, ‘_’) : ‘orcamento’;<\/div>\n
constBOM = “\\uFEFF”;<\/div>\n
const fmt = (num) => typeof num === ‘number’ ? num.toFixed(2).replace(‘.’, ‘,’) : num;<\/div>\n
const rows = [<\/div>\n
[“ITEM”, “VALOR TOTAL”, “VALOR UNITARIO”],<\/div>\n
[“Nome do Projeto”, project.nome || “-“],<\/div>\n
[“CUSTO: Filamento”, fmt(results.costs.filament), fmt(results.costs.filament\/results.P.qty)],<\/div>\n
[“CUSTO: Energia”, fmt(results.costs.energy), fmt(results.costs.energy\/results.P.qty)],<\/div>\n
[“CUSTO: Desgaste”, fmt(results.costs.depreciation), fmt(results.costs.depreciation\/results.P.qty)],<\/div>\n
[“CUSTO: Risco”, fmt(results.costs.risk), fmt(results.costs.risk\/results.P.qty)],<\/div>\n
[“CUSTO: Extras”, fmt(results.costs.totalExtras), fmt(results.costs.totalExtras\/results.P.qty)],<\/div>\n
[“—“, “—“, “—“],<\/div>\n
[“CUSTO TOTAL (PRODU\u00c7\u00c3O)”, fmt(results.totalCost), fmt(results.totalCost\/results.P.qty)],<\/div>\n
[“Lucro”, fmt(results.actualProfit), fmt(results.actualProfit\/results.P.qty)],<\/div>\n
[“PRE\u00c7O FINAL”, fmt(results.finalPrice), fmt(results.unitPrice)]<\/div>\n
];<\/div>\n
const csvContent = BOM + rows.map(e => e.join(“;”)).join(“\\n”);<\/div>\n
const blob = newBlob([csvContent], { type: ‘text\/csv;charset=utf-8;’ });<\/div>\n
const link = document.createElement(“a”);<\/div>\n
link.href = URL.createObjectURL(blob);<\/div>\n
link.download = `${safeName}.csv`;<\/div>\n
link.click();<\/div>\n
};<\/div>\n
return (<\/div>\n
<div className=”min-h-screen bg-slate-50 text-gray-800 font-sans pb-24 selection:bg-indigo-100 selection:text-indigo-800″><\/div>\n
{notification && <Toast message={notification.message} type={notification.type} onClose={() => setNotification(null)} \/>}<\/div>\n
<ConfirmModal<\/div>\n
isOpen={!!confirmDialog}<\/div>\n
title={confirmDialog?.title}<\/div>\n
message={confirmDialog?.message}<\/div>\n
onConfirm={confirmDialog?.action}<\/div>\n
onCancel={() => setConfirmDialog(null)}<\/div>\n
\/><\/div>\n
{\/* Modern Gradient Header *\/}<\/div>\n
<div className=”sticky top-0 z-30 bg-white\/80 backdrop-blur-md border-b border-gray-200\/60 shadow-sm transition-all”><\/div>\n
<div className=”max-w-5xl mx-auto px-4 sm:px-6 h-18 flex items-center justify-between py-3″><\/div>\n
<div className=”flex items-center gap-3″><\/div>\n
<div className=”bg-gradient-to-br from-indigo-500 to-violet-600 text-white p-2 rounded-xl shadow-lg shadow-indigo-200″><\/div>\n
<Calculator size={22} className=”stroke-[2.5]” \/><\/div>\n
<\/div><\/div>\n
<div><\/div>\n
<span className=”font-bold text-xl tracking-tight text-gray-900 leading-tight block”>ZoomCalc3D<\/span><\/div>\n
<span className=”text-[10px] font-semibold text-gray-400 uppercase tracking-widest hidden sm:block”>Precifica\u00e7\u00e3o Inteligente<\/span><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<nav className=”flex bg-gray-100\/80 p-1.5 rounded-xl overflow-x-auto gap-1″><\/div>\n
{[{ id: ‘calc’, icon: Calculator, label: ‘Calc’ }, { id: ‘history’, icon: History, label: ‘Hist\u00f3rico’ }, { id: ‘settings’, icon: Settings, label: ‘Ajustes’ }].map(tab => (<\/div>\n
<button key={tab.id} onClick={() => setActiveTab(tab.id)} className={`px-4 py-2 rounded-lg text-sm font-bold transition-all flex items-center gap-2 whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 ${activeTab === tab.id ? ‘bg-white text-indigo-600 shadow-sm’ : ‘text-gray-500 hover:text-gray-700 hover:bg-gray-200\/50’}`}><\/div>\n
<tab.icon size={16} className={activeTab === tab.id ? “stroke-[2.5]” : “stroke-2”} \/> {tab.label}<\/div>\n
<\/button><\/div>\n
))}<\/div>\n
<\/nav><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<main className=”max-w-5xl mx-auto px-4 sm:px-6 py-8″><\/div>\n
<\/div>\n
{\/* — SETTINGS TAB — *\/}<\/div>\n
{activeTab === ‘settings’ && (<\/div>\n
<div className=”max-w-2xl mx-auto animate-fade-in”><\/div>\n
<div className=”mb-6″><\/div>\n
<h2 className=”text-2xl font-bold text-gray-900″>Configura\u00e7\u00f5es<\/h2><\/div>\n
<p className=”text-gray-500 text-sm”>Personalize os par\u00e2metros da sua oficina.<\/p><\/div>\n
<\/div><\/div>\n
<\/div>\n
<Card className=”p-8 space-y-8″><\/div>\n
<div><\/div>\n
<div className=”flex justify-between items-center mb-6″><\/div>\n
<h3 className=”text-sm font-bold text-gray-400 uppercase tracking-wider flex items-center gap-2″><Zap size={14}\/> Perfil da Impressora<\/h3><\/div>\n
<div className=”flex gap-2″><\/div>\n
{PRINTER_PRESETS.map((p, i) => (<\/div>\n
<button key={i} onClick={() => setSettings(prev => ({…prev, consumo_watts: p.watts, valor_impressora: p.price}))} className=”text-[10px] font-bold bg-indigo-50 text-indigo-600 px-3 py-1.5 rounded-lg border border-indigo-100 hover:bg-indigo-100 hover:border-indigo-200 transition-colors uppercase tracking-wide”><\/div>\n
{p.label}<\/div>\n
<\/button><\/div>\n
))}<\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<div className=”grid grid-cols-1 sm:grid-cols-2 gap-6″><\/div>\n
<InputField id=”consumo_watts” label=”Consumo (Watts)” value={settings.consumo_watts} onChange={handleSettingChange} suffix=”W” icon={Zap} \/><\/div>\n
<InputField id=”custo_kwh” label=”Custo Energia (kWh)” value={settings.custo_kwh} onChange={handleSettingChange} icon={Zap} \/><\/div>\n
<InputField id=”valor_impressora” label=”Pre\u00e7o da M\u00e1quina” value={settings.valor_impressora} onChange={handleSettingChange} icon={Calculator} \/><\/div>\n
<InputField id=”vida_util_horas” label=”Vida \u00datil” value={settings.vida_util_horas} onChange={handleSettingChange} suffix=”h” icon={Clock} \/><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<div className=”border-t border-gray-100 pt-8″><\/div>\n
<h3 className=”text-sm font-bold text-gray-400 uppercase tracking-wider mb-6 flex items-center gap-2″><TrendingUp size={14}\/> Par\u00e2metros de Neg\u00f3cio<\/h3><\/div>\n
<div className=”grid grid-cols-1 sm:grid-cols-2 gap-6″><\/div>\n
<InputField id=”custo_filamento_padrao” label=”Custo Kg Padr\u00e3o” value={settings.custo_filamento_padrao} onChange={handleSettingChange} icon={Package} \/><\/div>\n
<InputField id=”lucro_minimo_projeto” label=”Lucro M\u00ednimo (R$)” value={settings.lucro_minimo_projeto} onChange={handleSettingChange} icon={TrendingUp} \/><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/Card><\/div>\n
<\/div><\/div>\n
)}<\/div>\n
{\/* — HISTORY TAB — *\/}<\/div>\n
{activeTab === ‘history’ && (<\/div>\n
<div className=”max-w-3xl mx-auto animate-fade-in”><\/div>\n
<div className=”flex justify-between items-end mb-6″><\/div>\n
<div><\/div>\n
<h2 className=”text-2xl font-bold text-gray-900 flex items-center gap-2″>Hist\u00f3rico<\/h2><\/div>\n
<p className=”text-gray-500 text-sm”>Seus or\u00e7amentos salvos.<\/p><\/div>\n
<\/div><\/div>\n
<div className=”flex gap-2″><\/div>\n
<button onClick={exportHistoryCSV} className=”bg-white border border-gray-200 text-gray-600 px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-gray-50 flex items-center gap-2 transition-colors”><\/div>\n
<FileSpreadsheet size={14}\/> Exportar Tudo (CSV)<\/div>\n
<\/button><\/div>\n
<div className=”bg-indigo-50 text-indigo-600 px-3 py-1.5 rounded-lg text-xs font-bold border border-indigo-100″><\/div>\n
{history.length} Projetos<\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div>\n
{history.length === 0 ? (<\/div>\n
<div className=”text-center py-20 bg-white rounded-3xl border-2 border-dashed border-gray-200″><\/div>\n
<div className=”bg-gray-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4″><\/div>\n
<History className=”text-gray-300″ size={32}\/><\/div>\n
<\/div><\/div>\n
<p className=”text-gray-500 font-medium”>Nenhum projeto salvo ainda.<\/p><\/div>\n
<button onClick={() => setActiveTab(‘calc’)} className=”mt-4 text-indigo-600 font-bold text-sm hover:underline”>Criar novo or\u00e7amento<\/button><\/div>\n
<\/div><\/div>\n
) : (<\/div>\n
<div className=”space-y-4″><\/div>\n
{history.map(item => (<\/div>\n
<div key={item.id} className=”bg-white p-5 rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg hover:border-indigo-100 transition-all group”><\/div>\n
<div className=”flex justify-between items-center”><\/div>\n
<div><\/div>\n
<h3 className=”font-bold text-gray-800 text-lg group-hover:text-indigo-600 transition-colors”>{item.nome}<\/h3><\/div>\n
<div className=”flex gap-3 text-xs text-gray-400 mt-1 font-medium uppercase tracking-wide”><\/div>\n
<span>{new Date(item.date).toLocaleDateString()}<\/span><\/div>\n
<span>\u2022<\/span><\/div>\n
<span>{item.quantidade_pecas} {item.quantidade_pecas > 1 ? ‘Pe\u00e7as’ : ‘Pe\u00e7a’}<\/span><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<div className=”flex items-center gap-6″><\/div>\n
<span className=”font-bold text-gray-900 text-xl”>{formatCurrency(item.finalPrice)}<\/span><\/div>\n
<div className=”flex gap-2″><\/div>\n
<button onClick={() => loadFromHistory(item)} className=”p-2.5 text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-xl transition-colors” title=”Carregar”><Download size={20}\/><\/button><\/div>\n
<button onClick={() => confirmDeleteHistory(item.id)} className=”p-2.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-colors” title=”Excluir”><Trash2 size={20}\/><\/button><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
))}<\/div>\n
<\/div><\/div>\n
)}<\/div>\n
<\/div><\/div>\n
)}<\/div>\n
{\/* — CALCULATOR TAB — *\/}<\/div>\n
{activeTab === ‘calc’ && (<\/div>\n
<div className=”grid grid-cols-1 lg:grid-cols-12 gap-8″><\/div>\n
<div className=”lg:col-span-5 space-y-6″><\/div>\n
<\/div>\n
{\/* Form Card *\/}<\/div>\n
<Card><\/div>\n
<div className=”bg-gray-50\/80 backdrop-blur px-6 py-4 border-b border-gray-100 flex justify-between items-center”><\/div>\n
<h3 className=”font-bold text-gray-600 flex items-center gap-2 text-xs uppercase tracking-widest”><\/div>\n
<Sliders size={14}\/> Par\u00e2metros<\/div>\n
<\/h3><\/div>\n
<div className=”flex gap-2″><\/div>\n
<button onClick={() => setShowAdvanced(!showAdvanced)} className={`text-[10px] font-bold px-3 py-1.5 rounded-lg border transition-all uppercase tracking-wide ${showAdvanced ? ‘bg-indigo-50 text-indigo-600 border-indigo-100’ : ‘bg-white text-gray-400 border-gray-200 hover:border-gray-300’}`}><\/div>\n
{showAdvanced ? ‘Completo’ : ‘B\u00e1sico’}<\/div>\n
<\/button><\/div>\n
<button onClick={confirmReset} className=”text-gray-400 hover:text-red-500 hover:bg-red-50 p-1.5 rounded-lg transition-colors”><Trash2 size={16} \/><\/button><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div>\n
<div className=”p-6″><\/div>\n
<div className=”grid grid-cols-3 gap-4 mb-2″><\/div>\n
<div className=”col-span-2″><InputField id=”nome” label=”Nome do Projeto” value={project.nome} onChange={handleProjectChange} placeholder=”Ex: Vaso Geom\u00e9trico” \/><\/div><\/div>\n
<div className=”col-span-1″><InputField id=”quantidade_pecas” label=”Qtd. Pe\u00e7as (Finalizadas)” value={project.quantidade_pecas} onChange={handleProjectChange} placeholder=”1″ helpText=”Quantidade total de pe\u00e7as finalizadas no lote.”\/><\/div><\/div>\n
<\/div><\/div>\n
<\/div>\n
<div className=”bg-gradient-to-br from-indigo-50 to-blue-50 p-5 rounded-2xl border border-indigo-100 mb-6 relative overflow-hidden”><\/div>\n
<div className=”absolute top-0 right-0 w-20 h-20 bg-white opacity-20 rounded-full blur-2xl -mr-10 -mt-10 pointer-events-none”><\/div><\/div>\n
<div className=”grid grid-cols-2 gap-4 relative z-10″><\/div>\n
<InputField id=”gramas_filamento” label=”Peso Total” value={project.gramas_filamento} onChange={handleProjectChange} onBlur={handleWeightBlur} suffix=”g” placeholder=”0″ error={results.missingFields.grams && “Obrigat\u00f3rio”} \/><\/div>\n
<InputField id=”horas_impressao” label=”Tempo Total” value={project.horas_impressao} onChange={handleProjectChange} onBlur={handleTimeBlur} suffix=”h” placeholder=”0:00″ error={results.missingFields.hours && “Obrigat\u00f3rio”} \/><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div>\n
<div className=”mb-6″><\/div>\n
<div className=”flex justify-between items-center mb-3″><\/div>\n
<label className=”text-xs font-bold text-gray-500 uppercase tracking-wide”>Material (Kg)<\/label><\/div>\n
<div className=”flex gap-2″><\/div>\n
{MATERIAL_PRESETS.map(m => (<\/div>\n
<button key={m.label} onClick={() => handleProjectChange(‘custo_filamento_kg’, m.cost)} className=”text-[10px] font-bold bg-white text-gray-500 px-2 py-1 rounded border border-gray-200 hover:border-indigo-300 hover:text-indigo-600 transition-all uppercase”><\/div>\n
{m.label}<\/div>\n
<\/button><\/div>\n
))}<\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<InputField id=”custo_filamento_kg” label=”” value={project.custo_filamento_kg} onChange={handleProjectChange} placeholder={settings.custo_filamento_padrao} icon={Package} \/><\/div>\n
<\/div><\/div>\n
<\/div>\n
<div className={`transition-all duration-500 overflow-hidden ${showAdvanced ? ‘max-h-[500px] opacity-100’ : ‘max-h-0 opacity-0’}`}><\/div>\n
<div className=”border-t border-gray-100 pt-6 mt-2″><\/div>\n
<h4 className=”text-xs font-bold text-gray-400 uppercase mb-4 flex items-center gap-1.5″><TrendingUp size={12}\/> Custos Extras<\/h4><\/div>\n
<div className=”grid grid-cols-2 gap-4 mb-4″><\/div>\n
<InputField id=”custo_outros” label=”Outros (Im\u00e3s, etc)” value={project.custo_outros} onChange={handleProjectChange} placeholder=”0.00″ \/><\/div>\n
<InputField id=”custo_embalagem” label=”Embalagem” value={project.custo_embalagem} onChange={handleProjectChange} placeholder=”0.00″ \/><\/div>\n
<\/div><\/div>\n
<SliderInput id=”falha_risco_percentual” label=”Margem de Risco” value={project.falha_risco_percentual} onChange={handleProjectChange} max={50} step={5} presets={[0, 5, 10, 20]} \/><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div>\n
<div className=”border-t border-gray-100 pt-6 mt-2″><\/div>\n
<div className=”flex items-center gap-2 mb-2″><\/div>\n
<TrendingUp size={16} className=”text-indigo-600″\/><\/div>\n
<span className=”text-sm font-bold text-gray-800″>Lucro Desejado<\/span><\/div>\n
<\/div><\/div>\n
<SliderInput id=”margem_lucro_percentual” label=”Markup” value={project.margem_lucro_percentual} onChange={handleProjectChange} max={300} step={10} presets={[50, 100, 150, 200]} \/><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/Card><\/div>\n
<\/div><\/div>\n
<div className=”lg:col-span-7 space-y-6″><\/div>\n
{results.isValid ? (<\/div>\n
<><\/div>\n
<div className=”relative group perspective-1000″><\/div>\n
<div className=”absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-1000 group-hover:duration-200″><\/div><\/div>\n
<Card className=”relative bg-white border-none ring-1 ring-gray-200 overflow-hidden”><\/div>\n
<\/div>\n
{\/* === DUAL HERO SECTION (Total vs Unit) === *\/}<\/div>\n
<div className=”grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-100″><\/div>\n
<\/div>\n
{\/* 1. LADO ESQUERDO: TOTAL DO PROJETO *\/}<\/div>\n
<div className=”p-6 text-center bg-gradient-to-br from-white to-blue-50\/30 flex flex-col justify-between h-full relative overflow-hidden”><\/div>\n
<div className=”absolute top-0 right-0 p-2 opacity-10″><Box size={40} className=”text-blue-500″\/><\/div><\/div>\n
<div><\/div>\n
<p className=”text-xs font-bold text-blue-400 uppercase tracking-widest mb-1″>Projeto Completo<\/p><\/div>\n
<div className=”text-4xl font-black text-gray-800 tracking-tighter drop-shadow-sm mb-1″><\/div>\n
<span className=”text-xl text-gray-400 font-bold mr-1″>R$<\/span><\/div>\n
{formatCurrency(results.finalPrice).replace(‘R$’, ”)}<\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<div className=”mt-4 space-y-2″><\/div>\n
<div className=”flex justify-between items-center px-3 py-1.5 bg-emerald-50 rounded-lg border border-emerald-100\/50″><\/div>\n
<span className=”text-[10px] font-bold text-emerald-600 uppercase”>Lucro<\/span><\/div>\n
<span className=”text-sm font-bold text-emerald-700″>{formatCurrency(results.actualProfit)}<\/span><\/div>\n
<\/div><\/div>\n
<div className=”flex justify-between items-center px-3 py-1.5 bg-gray-50 rounded-lg border border-gray-100″><\/div>\n
<span className=”text-[10px] font-bold text-gray-400 uppercase”>Custo<\/span><\/div>\n
<span className=”text-sm font-bold text-gray-600″>{formatCurrency(results.totalCost)}<\/span><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
{\/* 2. LADO DIREITO: UNIT\u00c1RIO (Se houver > 1 pe\u00e7a) *\/}<\/div>\n
{results.P.qty > 1 ? (<\/div>\n
<div className=”p-6 text-center bg-gradient-to-br from-white to-indigo-50\/30 flex flex-col justify-between h-full relative overflow-hidden”><\/div>\n
<div className=”absolute top-0 right-0 p-2 opacity-10″><Coins size={40} className=”text-indigo-500″\/><\/div><\/div>\n
<div><\/div>\n
<p className=”text-xs font-bold text-indigo-400 uppercase tracking-widest mb-1″>Por Unidade<\/p><\/div>\n
<div className=”text-4xl font-black text-indigo-700 tracking-tighter drop-shadow-sm mb-1″><\/div>\n
<span className=”text-xl text-indigo-300 font-bold mr-1″>R$<\/span><\/div>\n
{formatCurrency(results.unitPrice).replace(‘R$’, ”)}<\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<div className=”mt-4 space-y-2″><\/div>\n
<div className=”flex justify-between items-center px-3 py-1.5 bg-emerald-50 rounded-lg border border-emerald-100\/50″><\/div>\n
<span className=”text-[10px] font-bold text-emerald-600 uppercase”>Lucro<\/span><\/div>\n
<span className=”text-sm font-bold text-emerald-700″>{formatCurrency(results.unitProfit)}<\/span><\/div>\n
<\/div><\/div>\n
<div className=”flex justify-between items-center px-3 py-1.5 bg-gray-50 rounded-lg border border-gray-100″><\/div>\n
<span className=”text-[10px] font-bold text-gray-400 uppercase”>Custo<\/span><\/div>\n
<span className=”text-sm font-bold text-gray-600″>{formatCurrency(results.unitTotalCost)}<\/span><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
) : (<\/div>\n
\/* Se for s\u00f3 1 pe\u00e7a, ocupa o espa\u00e7o com info extra ou vazio *\/<\/div>\n
<div className=”hidden md:flex p-6 items-center justify-center bg-gray-50\/30″><\/div>\n
<div className=”text-center text-gray-400″><\/div>\n
<p className=”text-xs font-medium mb-2″>Pe\u00e7a \u00fanica no lote.<\/p><\/div>\n
<button onClick={applyPsychologicalPrice} className=”text-[10px] font-bold text-indigo-600 bg-white border border-indigo-100 px-3 py-1.5 rounded-full hover:bg-indigo-50 hover:border-indigo-200 transition-all shadow-sm inline-flex items-center gap-1″><\/div>\n
<Zap size={10} className=”fill-indigo-600″\/> Arredondar<\/div>\n
<\/button><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
)}<\/div>\n
<\/div><\/div>\n
{\/* Round Price Button (Mobile Only or when needed) *\/}<\/div>\n
<div className=”bg-white border-t border-gray-100 p-2 flex justify-center md:hidden”><\/div>\n
<button onClick={applyPsychologicalPrice} className=”text-xs font-bold text-indigo-600 bg-indigo-50 px-4 py-1.5 rounded-full hover:bg-indigo-100 transition-colors flex items-center gap-1″><\/div>\n
<Zap size={12} className=”fill-indigo-600″\/> Arredondar Pre\u00e7o<\/div>\n
<\/button><\/div>\n
<\/div><\/div>\n
{\/* Tabela de Detalhes Estilizada *\/}<\/div>\n
<div className=”border-t border-gray-100 bg-white”><\/div>\n
<div className=”bg-gray-50\/50 px-8 py-3 text-[10px] font-bold text-gray-400 uppercase flex justify-between tracking-wider”><\/div>\n
<span className=”w-1\/3″>Composi\u00e7\u00e3o<\/span><\/div>\n
<span className=”w-1\/3 text-right”>Total<\/span><\/div>\n
<span className=”w-1\/3 text-right”>Unit\u00e1rio<\/span><\/div>\n
<\/div><\/div>\n
<div className=”divide-y divide-gray-50 text-sm”><\/div>\n
{[<\/div>\n
{ label: ‘Filamento’, val: results.costs.filament, color: ‘text-blue-600′, bg:’bg-blue-500’ },<\/div>\n
{ label: ‘Energia’, val: results.costs.energy, color: ‘text-amber-600′, bg:’bg-amber-500’ },<\/div>\n
{ label: ‘Desgaste’, val: results.costs.depreciation, color: ‘text-purple-600′, bg:’bg-purple-500’ },<\/div>\n
{ label: ‘Risco’, val: results.costs.risk, color: ‘text-rose-500′, bg:’bg-rose-500’ },<\/div>\n
{ label: ‘Extras’, val: results.costs.totalExtras, color: ‘text-gray-600′, bg:’bg-gray-400’ },<\/div>\n
].map((row, idx) => (<\/div>\n
<div key={idx} className=”px-8 py-3 flex justify-between hover:bg-gray-50 transition-colors group”><\/div>\n
<span className=”w-1\/3 font-semibold text-gray-700 flex items-center gap-2″><\/div>\n
<span className={`w-2 h-2 rounded-full ${row.bg}`}><\/span> {row.label}<\/div>\n
<\/span><\/div>\n
<span className=”w-1\/3 text-right font-medium text-gray-900″>{formatCurrency(row.val)}<\/span><\/div>\n
<span className=”w-1\/3 text-right text-gray-400 font-mono text-xs pt-0.5″>{formatCurrency(row.val \/ results.P.qty)}<\/span><\/div>\n
<\/div><\/div>\n
))}<\/div>\n
<div className=”px-8 py-3 flex justify-between bg-gray-50\/80 font-bold border-t border-gray-100″><\/div>\n
<span className=”w-1\/3 text-gray-800 text-xs uppercase pt-0.5″>Custo Total<\/span><\/div>\n
<span className=”w-1\/3 text-right text-gray-800″>{formatCurrency(results.totalCost)}<\/span><\/div>\n
<span className=”w-1\/3 text-right text-gray-500 font-mono text-xs pt-0.5″>{formatCurrency(results.unitTotalCost)}<\/span><\/div>\n
<\/div><\/div>\n
<div className=”px-8 py-4 bg-emerald-50\/30 flex justify-between items-center border-t border-emerald-100\/50″><\/div>\n
<div className=”w-1\/3″><span className=”block font-bold text-emerald-700 text-xs uppercase”>Lucro L\u00edquido<\/span><\/div><\/div>\n
<span className=”w-1\/3 text-right font-bold text-emerald-700 text-lg”>{formatCurrency(results.actualProfit)}<\/span><\/div>\n
<span className=”w-1\/3 text-right font-bold text-emerald-600\/70 font-mono text-sm”>{formatCurrency(results.actualProfit \/ results.P.qty)}<\/span><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
{\/* Actions Footer *\/}<\/div>\n
<div className=”grid grid-cols-1 sm:grid-cols-4 border-t border-gray-100 divide-y sm:divide-y-0 sm:divide-x divide-gray-100 bg-gray-50\/30″><\/div>\n
<button onClick={() => saveToHistory()} className=”py-4 text-xs font-bold text-gray-500 hover:bg-white hover:text-indigo-600 flex justify-center items-center gap-2 transition-all uppercase tracking-wide group”><\/div>\n
<Save size={18} className=”text-gray-400 group-hover:text-indigo-500 transition-colors” \/> Salvar<\/div>\n
<\/button><\/div>\n
<button onClick={exportToCSV} className=”py-4 text-xs font-bold text-gray-500 hover:bg-white hover:text-emerald-600 flex justify-center items-center gap-2 transition-all uppercase tracking-wide group”><\/div>\n
<FileSpreadsheet size={18} className=”text-gray-400 group-hover:text-emerald-500 transition-colors” \/> CSV<\/div>\n
<\/button><\/div>\n
{\/* Bot\u00e3o Copy to Sheets *\/}<\/div>\n
<button onClick={copyToSheets} className=”py-4 text-xs font-bold text-gray-500 hover:bg-white hover:text-blue-600 flex justify-center items-center gap-2 transition-all uppercase tracking-wide group”><\/div>\n
<Copy size={18} className=”text-gray-400 group-hover:text-blue-500 transition-colors” \/> Sheets<\/div>\n
<\/button><\/div>\n
<button onClick={openWhatsApp} className=”py-4 text-xs font-bold text-gray-500 hover:bg-white hover:text-green-600 flex justify-center items-center gap-2 transition-all uppercase tracking-wide group”><\/div>\n
<MessageCircle size={18} className=”text-gray-400 group-hover:text-green-500 transition-colors” \/> Enviar<\/div>\n
<\/button><\/div>\n
<\/div><\/div>\n
<\/Card><\/div>\n
<\/div><\/div>\n
{results.isLowProfit && (<\/div>\n
<div className=”bg-red-50 border border-red-200 p-5 rounded-xl flex items-start gap-4 animate-fade-in shadow-sm”><\/div>\n
<div className=”bg-red-100 p-2 rounded-full”><\/div>\n
<TrendingUp className=”text-red-600 w-5 h-5″ \/><\/div>\n
<\/div><\/div>\n
<div className=”flex-1″><\/div>\n
<span className=”font-bold text-red-900 block text-sm mb-1 uppercase tracking-wide”>Lucro Insuficiente<\/span><\/div>\n
<p className=”text-xs text-red-700 mb-2″><\/div>\n
O lucro atual ({formatCurrency(results.actualProfit)}) est\u00e1 abaixo do m\u00ednimo configurado de {formatCurrency(results.S.minProfit)}.<\/div>\n
<\/p><\/div>\n
<div className=”bg-white\/60 p-2 rounded-lg inline-block border border-red-100″><\/div>\n
<p className=”text-xs font-bold text-red-800″><\/div>\n
Pre\u00e7o Sugerido: <span className=”text-sm”>{formatCurrency(results.suggestedPriceMinProfit)}<\/span><\/div>\n
<\/p><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
)}<\/div>\n
<Card className=”p-8″><\/div>\n
<div className=”flex justify-between items-center mb-6″><\/div>\n
<h3 className=”font-bold text-gray-700 text-xs uppercase tracking-widest flex items-center gap-2″><\/div>\n
<Info size={14}\/> Raio-X Visual<\/div>\n
<\/h3><\/div>\n
<\/div><\/div>\n
<div className=”space-y-4″><\/div>\n
<ProgressBar label=”Material” value={results.costs.filament} total={results.finalPrice} colorClass=”bg-blue-500″ \/><\/div>\n
<div className=”grid grid-cols-2 gap-8″><\/div>\n
<ProgressBar label=”Energia” value={results.costs.energy} total={results.finalPrice} colorClass=”bg-amber-400″ \/><\/div>\n
<ProgressBar label=”Desgaste” value={results.costs.depreciation} total={results.finalPrice} colorClass=”bg-purple-500″ \/><\/div>\n
<\/div><\/div>\n
{(results.costs.risk > 0) && <ProgressBar label=”Risco” value={results.costs.risk} total={results.finalPrice} colorClass=”bg-rose-400″ \/>}<\/div>\n
{(results.costs.totalExtras > 0) && <ProgressBar label=”Extras” value={results.costs.totalExtras} total={results.finalPrice} colorClass=”bg-gray-400″ \/>}<\/div>\n
<div className=”pt-2 border-t border-gray-100 mt-2″><\/div>\n
<ProgressBar label=”Lucro L\u00edquido” value={results.actualProfit} total={results.finalPrice} colorClass=”bg-emerald-500″ \/><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/Card><\/div>\n
<\/><\/div>\n
) : (<\/div>\n
<div className=”h-full flex flex-col items-center justify-center text-center p-12 border-2 border-dashed border-gray-200 rounded-3xl bg-gray-50\/50 hover:bg-gray-50 transition-colors”><\/div>\n
<div className=”bg-white p-6 rounded-3xl shadow-sm mb-6 animate-float”><\/div>\n
<Calculator size={48} className=”text-indigo-200 stroke-1″ \/><\/div>\n
<\/div><\/div>\n
<h3 className=”text-xl font-bold text-gray-800 mb-2″>Vamos come\u00e7ar?<\/h3><\/div>\n
<p className=”text-gray-400 font-medium max-w-xs mx-auto mb-8″><\/div>\n
Preencha o <strong>peso<\/strong> e o <strong>tempo<\/strong> para gerar seu or\u00e7amento detalhado.<\/div>\n
<\/p><\/div>\n
<div className=”flex gap-2 justify-center”><\/div>\n
<div className=”w-2 h-2 rounded-full bg-gray-300″><\/div><\/div>\n
<div className=”w-2 h-2 rounded-full bg-gray-300″><\/div><\/div>\n
<div className=”w-2 h-2 rounded-full bg-gray-300″><\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
)}<\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
)}<\/div>\n
<\/main><\/div>\n
<\/div><\/div>\n
);<\/div>\n
}<\/div>\n<\/div>\n<\/blockquote>\n

O post C\u00f3digo Calculadora Impress\u00e3o 3D feita no Gemini apareceu primeiro em Zoom Digital.<\/p>\n

Fonte <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

C\u00f3digo da calculadora mostrada no v\u00eddeo:   import React, { useState, useEffect, useMemo } from ‘react’; import { Calculator, Settings, Save, Trash2, AlertCircle, TrendingUp, Package, Zap, Clock, Info, Download, History, MessageCircle, Sliders, CheckCircle2, Share2, FileSpreadsheet, HelpCircle, X, ChevronRight, Copy, Coins, Box } from ‘lucide-react’; \/\/ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-11802","post","type-post","status-publish","format-standard","hentry","category-noticias"],"_links":{"self":[{"href":"https:\/\/rmts.com.br\/wp-01\/wp-json\/wp\/v2\/posts\/11802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmts.com.br\/wp-01\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmts.com.br\/wp-01\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmts.com.br\/wp-01\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmts.com.br\/wp-01\/wp-json\/wp\/v2\/comments?post=11802"}],"version-history":[{"count":0,"href":"https:\/\/rmts.com.br\/wp-01\/wp-json\/wp\/v2\/posts\/11802\/revisions"}],"wp:attachment":[{"href":"https:\/\/rmts.com.br\/wp-01\/wp-json\/wp\/v2\/media?parent=11802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmts.com.br\/wp-01\/wp-json\/wp\/v2\/categories?post=11802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmts.com.br\/wp-01\/wp-json\/wp\/v2\/tags?post=11802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}