+
+
+
+ API Online • Free Tier Disponível
+
+ A fonte da verdade para custos da construção.
+Esqueça PDFs e planilhas confusas. A API RESTful da AutoSINAPI entrega dados atualizados, estruturados e prontos para alimentar seus orçamentos e dashboards em milissegundos.
+ +
+ ⚡ FastAPI
+ 🐘 PostgreSQL (...)
+ 🚀 Redis Cache
+ 🛡️ Kong Gateway
+
+
+
+
+
+
+
+ 💰
+ ...
+ Preços / Custos Consolidados
+
+
+ 📋
+ ...
+ Composições & BOMs
+
+
+ 🏗️
+ ...
+ Insumos Catalogados
+
+
+ ⚡
+ < 15ms
+ Latência Média (Cache Hit)
+
+
+
+ Experimente agora:
+
+
+
+
+
+
+
+
+
+
+ Pesquisa Inteligente & Explosão Analítica (BOM)
+Consulte preços locais ou exploda composições em toda sua hierarquia para encontrar o custo de cada prego e hora de mão de obra.
+
+
+ GET /api/v1/public/insumos?q={termo}&uf={estado}&data_referencia={data}®ime={regime}
+
+
+
+
+
+
+
+ Análise de Curva ABC (BI)
+Descubra quais insumos geram o maior impacto financeiro em um conjunto de composições. Ideal para foco de compras e negociações.
+
+
+ POST /api/v1/public/bi/curva-abc?uf={estado}&data_referencia={data}®ime={regime}
+
+
+
+
+
+
+
+ Calculando curva ABC...
+
+
+
+
+
+
+
+ Resultados da Curva ABC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Detalhamento da Curva ABC
+ +
+
+
+
+
+ | Classificação | +Código | +Descrição do Insumo | +Unidade | +Impacto Total | +% Acumulado | +
|---|
+
+
+
+
+ Tendências de Volatilidade
+Visualize a evolução mensal de preços por categoria de insumo. Identifique tendências de alta ou baixa em classes de materiais.
+
+
+ GET /api/v1/public/bi/tendencias/por-classificacao?uf={uf}&data_referencia={data}®ime={regime}&meses=12
+
+
+
+
+
+
+
+
+
+
+
+
+ Inflação Acumulada por Categoria
+
+
+
+
+
+ | Classificação | +Qtd. Insumos | +Preço Inicial | +Preço Final | +Variação (%) | +
|---|
+
+
+
+
+
+ Comparativo Inter-Regional
+Compare o custo do mesmo item em múltiplos estados simultaneamente para estudos de viabilidade e logística.
+
+
+ GET /api/v1/public/{tipo}/{codigo}?uf={estado}&data_referencia={data}®ime={regime}
+
+
+
+
+
+
+
+ Comparando preços entre estados...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Classificação
+ Código
+ Descrição do Insumo
+ Unidade
+ Impacto Total
+ % Acumulado
+ `;
+ }
+
+ if (dom.abcGrid) {
+ dom.abcGrid.innerHTML = data.map(item => `
+
+ ${item.classe_abc}
+ ${item.codigo}
+ ${utils.escapeHtml(item.descricao)}
+ ${item.unidade}
+ ${utils.formatCurrency(item.custo_total_agregado)}
+ ${(item.percentual_acumulado || 0).toFixed(1)}%
+
+ `).join('');
+ }
+
+ if (dom.abcChart) {
+ const { textColor, gridColor, primaryColor, errorColor } = getChartTheme(state.theme);
+ const labels = data.slice(0, 15).map(i => i.descricao.substring(0, 20) + '...');
+ const impacts = data.slice(0, 15).map(i => i.custo_total_agregado);
+ const accumulated = data.slice(0, 15).map(i => i.percentual_acumulado);
+
+ const chartConfig = {
+ type: 'bar',
+ data: {
+ labels,
+ datasets: [
+ {
+ label: 'Impacto Financeiro (R$)',
+ data: impacts,
+ backgroundColor: primaryColor,
+ yAxisID: 'y',
+ },
+ {
+ label: '% Acumulado',
+ data: accumulated,
+ type: 'line',
+ borderColor: errorColor,
+ borderWidth: 2,
+ pointRadius: 3,
+ yAxisID: 'y1',
+ }
+ ]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ y: { type: 'linear', display: true, position: 'left', beginAtZero: true, ticks: { color: textColor }, grid: { color: gridColor } },
+ y1: { type: 'linear', display: true, position: 'right', min: 0, max: 100, grid: { drawOnChartArea: false }, ticks: { color: textColor } },
+ x: { ticks: { color: textColor }, grid: { color: gridColor } }
+ },
+ plugins: { legend: { labels: { color: textColor } } }
+ }
+ };
+ const ctx1 = dom.abcChart.getContext('2d');
+ Chart.getChart(ctx1.canvas)?.destroy();
+ state.abc.chart = new Chart(ctx1, chartConfig);
+ }
+ }
+
+ function renderGrouped(data) {
+ if (dom.abcResultsCount) dom.abcResultsCount.textContent = `${data.length} classificação(ões) encontrada(s)`;
+
+ // Update table header for grouped mode
+ const thead = dom.abcTable?.querySelector('thead');
+ if (thead) {
+ thead.innerHTML = `
+ Classificação
+ Categoria
+ Qtd Insumos
+ Custo Total
+ % do Total
+ `;
+ }
+
+ if (dom.abcGrid) {
+ dom.abcGrid.innerHTML = data.map(item => `
+
+ ${utils.escapeHtml(item.classificacao)}
+ ${utils.escapeHtml(item.classificacao)}
+ ${item.total_insumos}
+ ${utils.formatCurrency(item.custo_total)}
+ ${(item.percentual || 0).toFixed(1)}%
+
+ `).join('');
+ }
+
+ if (dom.abcChart) {
+ const { textColor, gridColor } = getChartTheme(state.theme);
+ const colors = ['#2563eb', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6', '#f97316', '#6366f1', '#84cc16'];
+ const labels = data.map(i => i.classificacao);
+ const values = data.map(i => i.custo_total);
+
+ const chartConfig = {
+ type: 'bar',
+ data: {
+ labels,
+ datasets: [{
+ label: 'Custo por Classificação (R$)',
+ data: values,
+ backgroundColor: labels.map((_, idx) => colors[idx % colors.length]),
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ indexAxis: 'y',
+ scales: {
+ x: { beginAtZero: true, ticks: { color: textColor, callback: (v) => utils.formatCurrency(v) }, grid: { color: gridColor } },
+ y: { ticks: { color: textColor }, grid: { display: false } }
+ },
+ plugins: { legend: { display: false } }
+ }
+ };
+ const ctx2 = dom.abcChart.getContext('2d');
+ Chart.getChart(ctx2.canvas)?.destroy();
+ state.abc.chart = new Chart(ctx2, chartConfig);
+ }
+ }
+
+ return { perform, render, setView: viewToggle.setView, toggleGroupBy };
+}
\ No newline at end of file
diff --git a/demo/js/modules/admin.js b/demo/js/modules/admin.js
new file mode 100644
index 0000000..d41fcdd
--- /dev/null
+++ b/demo/js/modules/admin.js
@@ -0,0 +1,82 @@
+/** @file Módulo de Administração — População do Banco + Task Status */
+export function createAdmin(config, state, dom, utils, api, toast) {
+ function initVisibility() {
+ const showAdmin = window.location.search.includes('admin=true');
+ if (dom.adminSection) dom.adminSection.classList.toggle('hidden', !showAdmin);
+ if (showAdmin) populateUfDropdown();
+ }
+
+ function populateUfDropdown() {
+ if (!dom.adminUf || !state.filters.ufs.length) return;
+ dom.adminUf.innerHTML = '' +
+ state.filters.ufs.map(uf => ``).join('');
+ }
+
+ async function triggerPopulation(e) {
+ e.preventDefault();
+ const year = parseInt(dom.adminYear?.value, 10);
+ const month = parseInt(dom.adminMonth?.value, 10);
+ const uf = dom.adminUf?.value || 'SP';
+
+ if (!year || !month || month < 1 || month > 12) {
+ toast.show('Informe ano e mês válidos.', 'warning');
+ return;
+ }
+
+ if (dom.adminLoader) dom.adminLoader.classList.remove('hidden');
+ if (dom.adminTaskStatus) dom.adminTaskStatus.classList.add('hidden');
+ if (dom.adminTaskResult) dom.adminTaskResult.textContent = '';
+
+ try {
+ const result = await api.request(`${config.API_BASE}/../admin/populate-database`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ year, month, state: uf }),
+ });
+
+ state.admin.taskId = result.task_id;
+ toast.show(`Carga iniciada! Task: ${result.task_id.substring(0, 8)}...`, 'success');
+ if (dom.adminTaskStatus) dom.adminTaskStatus.classList.remove('hidden');
+ if (dom.adminPollStatus) {
+ dom.adminPollStatus.textContent = 'Task iniciada, aguardando processamento...';
+ }
+ startPolling();
+ } catch (error) {
+ toast.show(`Erro: ${error.message}`, 'error');
+ } finally {
+ if (dom.adminLoader) dom.adminLoader.classList.add('hidden');
+ }
+ }
+
+ function startPolling() {
+ stopPolling();
+ state.admin.pollingInterval = setInterval(pollTaskStatus, 3000);
+ pollTaskStatus();
+ }
+
+ function stopPolling() {
+ if (state.admin.pollingInterval) {
+ clearInterval(state.admin.pollingInterval);
+ state.admin.pollingInterval = null;
+ }
+ }
+
+ async function pollTaskStatus() {
+ if (!state.admin.taskId) return;
+ try {
+ const status = await api.request(`${config.API_BASE}/../admin/tasks/${state.admin.taskId}`);
+ if (dom.adminPollStatus) {
+ dom.adminPollStatus.textContent = `Status: ${status.status}${status.ready ? ' (Concluído)' : ' (Processando...)'}`;
+ }
+ if (status.ready && dom.adminTaskResult) {
+ dom.adminTaskResult.textContent = status.result || 'Tarefa concluída sem resultado adicional.';
+ stopPolling();
+ }
+ } catch {
+ if (dom.adminPollStatus) dom.adminPollStatus.textContent = 'Erro ao verificar status.';
+ stopPolling();
+ }
+ }
+
+ return { initVisibility, triggerPopulation, populateUfDropdown, stopPolling };
+}
\ No newline at end of file
diff --git a/demo/js/modules/compare.js b/demo/js/modules/compare.js
new file mode 100644
index 0000000..a8c8d64
--- /dev/null
+++ b/demo/js/modules/compare.js
@@ -0,0 +1,189 @@
+/** @file Módulo de Comparativo Inter-Regional */
+import { createChartConfig, getChartTheme } from '../utils.js';
+
+export function createCompare(config, state, dom, utils, api, toast) {
+ const REGIONS = {
+ 'Sudeste': ['SP', 'RJ', 'MG', 'ES'],
+ 'Sul': ['PR', 'SC', 'RS'],
+ 'Nordeste': ['BA', 'PE', 'CE', 'MA', 'PB', 'RN', 'AL', 'SE', 'PI'],
+ 'Norte': ['AM', 'PA', 'AC', 'RO', 'RR', 'AP', 'TO'],
+ 'Centro-Oeste': ['GO', 'MT', 'MS', 'DF'],
+ };
+
+ function cleanupChart() {
+ state.compare.chart?.destroy();
+ state.compare.chart = null;
+ }
+
+ function updateChipUI() {
+ if (!dom.stateChips) return;
+ const chips = dom.stateChips.querySelectorAll('.state-chip');
+ chips.forEach(chip => {
+ const uf = chip.dataset.uf;
+ const isSelected = state.compare.selectedStates.has(uf);
+ chip.classList.toggle('selected', isSelected);
+ chip.setAttribute('aria-pressed', isSelected);
+ });
+ const count = state.compare.selectedStates.size;
+ if (dom.selectedStatesCount) {
+ dom.selectedStatesCount.textContent = `${count} estado${count !== 1 ? 's' : ''} selecionado${count !== 1 ? 's' : ''}`;
+ }
+ }
+
+ function toggleState(uf) {
+ if (state.compare.selectedStates.has(uf)) {
+ state.compare.selectedStates.delete(uf);
+ } else {
+ state.compare.selectedStates.add(uf);
+ }
+ updateChipUI();
+ }
+
+ function selectAll() {
+ const ufs = state.filters.ufs.length > 0 ? state.filters.ufs : ['SP', 'RJ', 'MG', 'PR', 'SC', 'RS', 'BA', 'PE', 'GO'];
+ ufs.forEach(uf => state.compare.selectedStates.add(uf));
+ updateChipUI();
+ }
+
+ function clearAll() {
+ state.compare.selectedStates.clear();
+ updateChipUI();
+ }
+
+ function presetRegions() {
+ state.compare.selectedStates.clear();
+ const representative = ['SP', 'RJ', 'MG', 'PR', 'BA', 'AM', 'GO', 'DF'];
+ representative.forEach(uf => {
+ if (state.filters.ufs.includes(uf) || state.filters.ufs.length === 0) {
+ state.compare.selectedStates.add(uf);
+ }
+ });
+ updateChipUI();
+ }
+
+ async function perform() {
+ const code = dom.compareCode?.value?.trim();
+ if (!code) { toast.show('Digite um código SINAPI', 'warning'); return; }
+
+ const type = dom.compareType?.value || 'insumos';
+ const date = dom.compareDateFilter?.value || utils.getDefaultDate();
+ const regime = dom.compareRegimeFilter?.value || utils.getDefaultRegime();
+
+ const selectedUfs = [...state.compare.selectedStates];
+ if (selectedUfs.length === 0) {
+ toast.show('Selecione pelo menos um estado', 'warning');
+ return;
+ }
+
+ state.compare.loading = true;
+ dom.compareSkeleton?.classList.remove('hidden');
+ dom.compareResults?.classList.add('hidden');
+ cleanupChart();
+
+ try {
+ const promises = selectedUfs.map(uf =>
+ api.request(`${config.API_BASE}/${type}/${encodeURIComponent(code)}?uf=${uf}&data_referencia=${date}®ime=${encodeURIComponent(regime)}`)
+ .then(data => ({ uf, data, success: true }))
+ .catch(() => ({ uf, data: null, success: false }))
+ );
+
+ const results = await Promise.all(promises);
+ const validData = results.filter(r => r.success && r.data);
+
+ if (validData.length === 0) {
+ throw new Error('Item não encontrado em nenhum estado para esta referência.');
+ }
+
+ state.compare.data = validData.map(r => ({
+ uf: r.uf,
+ descricao: r.data.descricao,
+ valor: parseFloat(r.data.preco_mediano || r.data.custo_total || 0)
+ }));
+
+ render();
+ } catch (error) {
+ toast.show(error.message, 'error');
+ } finally {
+ state.compare.loading = false;
+ setTimeout(() => dom.compareSkeleton?.classList.add('hidden'), 300);
+ }
+ }
+
+ function render() {
+ cleanupChart();
+ const data = state.compare.data;
+ if (!data?.length) return;
+
+ dom.compareResults?.classList.remove('hidden');
+ if (dom.compareItemName) dom.compareItemName.textContent = data[0].descricao;
+
+ const values = data.map(d => d.valor).filter(v => v > 0);
+ if (values.length > 0 && dom.compareStats) {
+ dom.compareStats.classList.remove('hidden');
+ const min = Math.min(...values);
+ const max = Math.max(...values);
+ const avg = values.reduce((a, b) => a + b, 0) / values.length;
+
+ if (dom.compareMin) {
+ const minItem = data.find(d => d.valor === min);
+ dom.compareMin.textContent = utils.formatCurrency(min);
+ if (dom.compareMinUf) dom.compareMinUf.textContent = minItem.uf;
+ }
+ if (dom.compareMax) {
+ const maxItem = data.find(d => d.valor === max);
+ dom.compareMax.textContent = utils.formatCurrency(max);
+ if (dom.compareMaxUf) dom.compareMaxUf.textContent = maxItem.uf;
+ }
+ if (dom.compareAvg) dom.compareAvg.textContent = utils.formatCurrency(avg);
+ if (dom.compareVariation) dom.compareVariation.textContent = `${((max - min) / min * 100).toFixed(1)}%`;
+ }
+
+ if (dom.compareChart) {
+ const chartLabels = data.map(d => d.uf);
+ const chartValues = data.map(d => d.valor);
+ const { textColor, gridColor, primaryColor, successColor, errorColor } = getChartTheme(state.theme);
+
+ const minVal = Math.min(...chartValues.filter(v => v > 0));
+ const maxVal = Math.max(...chartValues.filter(v => v > 0));
+
+ const ctx = dom.compareChart.getContext('2d');
+ const existing = Chart.getChart(ctx.canvas);
+ if (existing) existing.destroy();
+ const configChart = {
+ type: 'bar',
+ data: {
+ labels: chartLabels,
+ datasets: [{
+ label: 'Valor (R$)',
+ data: chartValues,
+ backgroundColor: chartValues.map(v => {
+ if (v === minVal) return successColor;
+ if (v === maxVal) return errorColor;
+ return primaryColor;
+ }),
+ borderRadius: 6
+ }]
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: { legend: { display: false } },
+ scales: {
+ y: {
+ beginAtZero: true,
+ ticks: { color: textColor },
+ grid: { color: gridColor }
+ },
+ x: {
+ ticks: { color: textColor },
+ grid: { color: gridColor }
+ }
+ }
+ }
+ };
+ state.compare.chart = new Chart(ctx, configChart);
+ }
+ }
+
+ return { perform, render, toggleState, selectAll, clearAll, presetRegions };
+}
diff --git a/demo/js/modules/comparison.js b/demo/js/modules/comparison.js
new file mode 100644
index 0000000..3626d65
--- /dev/null
+++ b/demo/js/modules/comparison.js
@@ -0,0 +1,250 @@
+export function createComparison(config, state, dom, utils, api, toast, modal) {
+ async function perform() {
+ const code1 = dom.comparisonCode1?.value.trim();
+ const code2 = dom.comparisonCode2?.value.trim();
+ if (!code1 || !code2) {
+ toast.show('Informe os códigos das duas composições', 'warning');
+ return;
+ }
+
+ state.comparison.loading = true;
+ dom.comparisonSkeleton?.classList.remove('hidden');
+ dom.comparisonResults?.classList.add('hidden');
+
+ try {
+ const uf = dom.comparisonUfFilter?.value || 'SP';
+ const date = dom.comparisonDateFilter?.value || utils.getDefaultDate();
+ const regime = dom.comparisonRegimeFilter?.value || utils.getDefaultRegime();
+
+ // Buscar detalhes e BOM em paralelo
+ const [leftData, rightData] = await Promise.all([
+ fetchFullCompositionData(code1, uf, date, regime),
+ fetchFullCompositionData(code2, uf, date, regime)
+ ]);
+
+ if (leftData.bom.length === 0 && rightData.bom.length === 0) {
+ toast.show('Nenhum dado encontrado para as composições informadas.', 'info');
+ dom.comparisonResults?.classList.add('hidden');
+ if (dom.comparisonViewToggle) dom.comparisonViewToggle.style.display = 'none';
+ } else {
+ state.comparison.left = leftData;
+ state.comparison.right = rightData;
+ renderTables(leftData, rightData);
+ renderChart(leftData, rightData);
+ dom.comparisonResults?.classList.remove('hidden');
+ if (dom.comparisonViewToggle) dom.comparisonViewToggle.style.display = 'flex';
+ }
+ } catch (err) {
+ console.error('[Comparison] Erro ao carregar composições:', err);
+ toast.show(err.message.includes('Nenhum') ? err.message : 'Erro ao carregar composições', 'error');
+ } finally {
+ state.comparison.loading = false;
+ dom.comparisonSkeleton?.classList.add('hidden');
+ }
+ }
+
+ async function fetchFullCompositionData(codigo, uf, date, regime) {
+ const detailsUrl = `${config.API_BASE}/composicoes/${encodeURIComponent(codigo)}?uf=${encodeURIComponent(uf)}&data_referencia=${encodeURIComponent(date)}®ime=${encodeURIComponent(regime)}`;
+ const bomUrl = `${config.API_BASE}/bi/composicao/${encodeURIComponent(codigo)}/bom?uf=${encodeURIComponent(uf)}&data_referencia=${encodeURIComponent(date)}®ime=${encodeURIComponent(regime)}`;
+
+ const [details, bom] = await Promise.all([
+ api.request(detailsUrl).catch(() => ({ codigo, descricao: `Composição ${codigo}`, custo_total: 0 })),
+ api.request(bomUrl).catch(() => [])
+ ]);
+
+ return {
+ ...details,
+ bom: Array.isArray(bom) ? bom : []
+ };
+ }
+
+ function renderTables(left, right) {
+ const leftFlat = flattenBom(left.bom);
+ const rightFlat = flattenBom(right.bom);
+ const leftTotal = left.custo_total || leftFlat.reduce((s, i) => s + (i.custo_impacto_total || 0), 0);
+ const rightTotal = right.custo_total || rightFlat.reduce((s, i) => s + (i.custo_impacto_total || 0), 0);
+
+ // Render Headers com links para modal
+ const renderHeader = (el, data, total) => {
+ if (!el) return;
+ el.innerHTML = `
+
+
+ ${'.'.repeat(item.nivel)}
+ ${utils.escapeHtml(item.descricao || '')}
+
+ ${item.tipo_item[0]}
+ ${item.unidade || '-'}
+ ${utils.formatCurrency(item.custo_impacto_total || 0)}
+
+ `).join('');
+ }
+
+ function renderDeltaTable(leftFlat, rightFlat) {
+ const tbody = dom.comparisonDeltaTable;
+ if (!tbody) return;
+
+ const leftMap = new Map(leftFlat.map(i => [i.item_codigo + '_' + i.tipo_item, i]));
+ const rightMap = new Map(rightFlat.map(i => [i.item_codigo + '_' + i.tipo_item, i]));
+ const allKeys = new Set([...leftMap.keys(), ...rightMap.keys()]);
+
+ const rows = [];
+ for (const key of allKeys) {
+ const l = leftMap.get(key);
+ const r = rightMap.get(key);
+ const lCost = l?.custo_impacto_total || 0;
+ const rCost = r?.custo_impacto_total || 0;
+ const diff = lCost - rCost;
+ const pct = rCost > 0 ? (diff / rCost * 100) : (lCost > 0 ? 100 : 0);
+ rows.push({
+ codigo: l?.item_codigo || r?.item_codigo,
+ tipo: l?.tipo_item || r?.tipo_item || '',
+ descricao: l?.descricao || r?.descricao || key,
+ unidade: l?.unidade || r?.unidade || '',
+ leftCost: lCost,
+ rightCost: rCost,
+ diff,
+ pct,
+ });
+ }
+
+ rows.sort((a, b) => Math.abs(b.diff) - Math.abs(a.diff));
+
+ tbody.innerHTML = rows.map(row => {
+ const absDiff = Math.abs(row.diff);
+ const cls = row.diff > 0.01 ? 'text-success' : row.diff < -0.01 ? 'text-error' : '';
+ return `
+
+ ${utils.escapeHtml(row.descricao)}
+ ${row.unidade}
+ ${utils.formatCurrency(row.leftCost)}
+ ${utils.formatCurrency(row.rightCost)}
+ ${row.diff > 0 ? '+' : ''}${utils.formatCurrency(row.diff)}
+ ${row.pct > 0 ? '+' : ''}${row.pct.toFixed(1)}%
+
+ `;
+ }).join('');
+ }
+
+ function getCategoria(item) {
+ const unid = (item.unidade || '').toUpperCase();
+ if (unid === 'H') return 'Mão de Obra';
+ if (['CHP', 'CHI'].includes(unid)) return 'Equipamento';
+ return 'Material';
+ }
+
+ function renderChart(left, right) {
+ const canvas = dom.comparisonChart;
+ if (!canvas) return;
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+
+ const existing = Chart.getChart(canvas);
+ if (existing) existing.destroy();
+ state.comparison.chart = null;
+
+ const CATS = { 'Mão de Obra': 0, 'Material': 0, 'Equipamento': 0 };
+ const leftCat = { ...CATS };
+ const rightCat = { ...CATS };
+
+ for (const item of flattenBom(left.bom)) {
+ const cat = getCategoria(item);
+ leftCat[cat] = (leftCat[cat] || 0) + (item.custo_impacto_total || 0);
+ }
+ for (const item of flattenBom(right.bom)) {
+ const cat = getCategoria(item);
+ rightCat[cat] = (rightCat[cat] || 0) + (item.custo_impacto_total || 0);
+ }
+
+ const labels = Object.keys(CATS).filter(k => leftCat[k] > 0 || rightCat[k] > 0);
+ const leftData = labels.map(l => leftCat[l]);
+ const rightData = labels.map(l => rightCat[l]);
+
+ if (state.comparison.chart) state.comparison.chart.destroy();
+
+ const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text-main').trim() || '#1e293b';
+ const mutedColor = getComputedStyle(document.documentElement).getPropertyValue('--text-muted').trim() || '#64748b';
+
+ state.comparison.chart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels,
+ datasets: [
+ { label: `Composição ${left.codigo}`, data: leftData, backgroundColor: '#3b82f680', borderColor: '#3b82f6', borderWidth: 1 },
+ { label: `Composição ${right.codigo}`, data: rightData, backgroundColor: '#f59e0b80', borderColor: '#f59e0b', borderWidth: 1 },
+ ],
+ },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: { position: 'bottom', labels: { color: textColor, font: { size: 10 } } },
+ tooltip: {
+ callbacks: {
+ label: ctx => `${ctx.dataset.label}: ${utils.formatCurrency(ctx.parsed.y)}`,
+ },
+ },
+ },
+ scales: {
+ x: { ticks: { color: mutedColor, font: { size: 9 } }, grid: { display: false } },
+ y: { ticks: { color: mutedColor, font: { size: 9 }, callback: v => utils.formatCurrency(v) }, grid: { color: mutedColor + '20' } },
+ },
+ },
+ });
+ }
+
+ function setView(view) {
+ const tableContainer = document.getElementById('comparisonTablesView');
+ const chartContainer = document.getElementById('comparisonChartView');
+ const btns = dom.comparisonViewToggle?.querySelectorAll('.btn-toggle');
+
+ if (!tableContainer || !chartContainer) return;
+
+ if (view === 'tables') {
+ tableContainer.classList.remove('hidden');
+ chartContainer.classList.add('hidden');
+ } else {
+ tableContainer.classList.add('hidden');
+ chartContainer.classList.remove('hidden');
+ if (state.comparison.chart) {
+ state.comparison.chart.resize();
+ }
+ }
+
+ if (btns) {
+ btns.forEach(b => {
+ b.classList.toggle('active', b.dataset.view === view);
+ });
+ }
+ }
+
+ return { perform, setView };
+}
diff --git a/demo/js/modules/heatmap.js b/demo/js/modules/heatmap.js
new file mode 100644
index 0000000..f91af19
--- /dev/null
+++ b/demo/js/modules/heatmap.js
@@ -0,0 +1,289 @@
+export function createHeatmap(config, state, dom, utils, api, toast) {
+ const REGIOES = {
+ NORTE: ['AC', 'AP', 'AM', 'PA', 'RO', 'RR', 'TO'],
+ NORDESTE: ['AL', 'BA', 'CE', 'MA', 'PB', 'PE', 'PI', 'RN', 'SE'],
+ CENTRO_OESTE: ['DF', 'GO', 'MS', 'MT'],
+ SUDESTE: ['ES', 'MG', 'RJ', 'SP'],
+ SUL: ['PR', 'RS', 'SC'],
+ };
+ const REGIAO_LABELS = {
+ NORTE: 'Norte', NORDESTE: 'Nordeste', CENTRO_OESTE: 'Centro-Oeste',
+ SUDESTE: 'Sudeste', SUL: 'Sul',
+ };
+ const REGIAO_CORES = {
+ NORTE: '#3498db', NORDESTE: '#e74c3c', CENTRO_OESTE: '#f1c40f',
+ SUDESTE: '#2ecc71', SUL: '#9b59b6',
+ };
+ const GEOJSON_URL = `${config.API_BASE}/data/geo/brazil-ufs.json`;
+
+ function getRegiao(uf) {
+ for (const [regiao, ufs] of Object.entries(REGIOES)) {
+ if (ufs.includes(uf)) return regiao;
+ }
+ return 'OUTROS';
+ }
+
+ function destroyMap() {
+ if (state.heatmap.map) {
+ state.heatmap.map.remove();
+ state.heatmap.map = null;
+ }
+ }
+
+ function destroyChart() {
+ if (state.heatmap.chart) {
+ state.heatmap.chart.destroy();
+ state.heatmap.chart = null;
+ }
+ }
+
+ function render(codigo, tipo, data_referencia, regime) {
+ const date = data_referencia || dom.modalRef?.textContent;
+ const reg = regime || dom.modalRegime?.textContent;
+ if (!codigo || !date) return;
+
+ dom.heatmapSection?.classList.remove('hidden');
+
+ const tipoMap = { insumo: 'insumo', composicao: 'composicao', insumos: 'insumo', composicoes: 'composicao' };
+ const t = tipoMap[tipo] || 'insumo';
+
+ api.request(`${config.API_BASE}/bi/item/${t}/${encodeURIComponent(codigo)}/precos-uf?data_referencia=${encodeURIComponent(date)}®ime=${encodeURIComponent(reg)}`)
+ .then(data => {
+ state.heatmap.data = data;
+ if (!data || data.length === 0) {
+ toast.show('Nenhum dado de preço regional encontrado para este item.', 'info');
+ dom.heatmapSection?.classList.add('hidden');
+ return;
+ }
+ if (typeof L !== 'undefined') {
+ renderMap(data).catch(() => renderChart(data));
+ } else {
+ renderChart(data);
+ }
+ })
+ .catch(err => {
+ console.error('[Heatmap] Erro ao carregar preços por UF:', err);
+ toast.show(err.message.includes('Nenhum') ? err.message : 'Nenhum dado de preço regional encontrado para este item.', 'info');
+ dom.heatmapSection?.classList.add('hidden');
+ });
+ }
+
+ async function renderMap(data) {
+ destroyMap();
+ destroyChart();
+
+ dom.heatmapCanvas?.classList.add('hidden');
+ dom.heatmapMapContainer?.classList.remove('hidden');
+
+ const geoJson = await fetch(GEOJSON_URL).then(r => {
+ if (!r.ok) throw new Error(`GeoJSON fetch: ${r.status}`);
+ return r.json();
+ });
+
+ if (!geoJson || !geoJson.features || geoJson.features.length === 0) {
+ throw new Error('GeoJSON vazio');
+ }
+
+ const priceMap = new Map(data.map(d => [d.uf, parseFloat(d.valor)]));
+ const values = data.map(d => parseFloat(d.valor)).filter(v => !isNaN(v));
+ const min = values.length > 0 ? Math.min(...values) : 0;
+ const max = values.length > 0 ? Math.max(...values) : 1;
+ const range = max - min || 1;
+ const avg = values.reduce((s, v) => s + v, 0) / values.length;
+
+ function getColor(price) {
+ if (price == null || isNaN(price)) return '#ccc';
+ const ratio = Math.max(0, Math.min(1, (price - min) / range));
+ const r = Math.round(34 + ratio * 205);
+ const g = Math.round(197 - ratio * 131);
+ const b = Math.round(94 - ratio * 54);
+ return `rgb(${r},${g},${b})`;
+ }
+
+ const map = L.map('heatmapMap', {
+ center: [-15.0, -52.0],
+ zoom: 4,
+ zoomControl: true,
+ scrollWheelZoom: false,
+ });
+
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: '© OSM',
+ maxZoom: 10,
+ }).addTo(map);
+
+ const geoLayer = L.geoJSON(geoJson, {
+ style: feature => {
+ const p = feature.properties;
+ const uf = (p.uf || p.UF || p.sigla || p.SIGLA || p.id || p.ID || p.ESTADO_SIGLA || p.state_abbr || '').toString().toUpperCase();
+ const price = priceMap.get(uf);
+
+ if (!price && uf) {
+ console.debug(`[Heatmap] UF ${uf} não encontrada no priceMap. Props:`, p);
+ }
+
+ return {
+ fillColor: price != null ? getColor(price) : '#ccc',
+ weight: 1.5,
+ opacity: 1,
+ color: '#fff',
+ fillOpacity: 0.85,
+ };
+ },
+ onEachFeature: (feature, layer) => {
+ const p = feature.properties;
+ const uf = (p.uf || p.UF || p.sigla || p.id || p.ID || p.ESTADO_SIGLA || '').toString().toUpperCase();
+ const nome = p.nome || p.NM_UF || p.NOME_UF || uf;
+ const price = priceMap.get(uf);
+ const reg = getRegiao(uf);
+ const regCor = REGIAO_CORES[reg] || '#999';
+
+ layer.bindTooltip(`
+ ${nome} (${uf})
+ ${REGIAO_LABELS[reg] || reg}
+ R$ ${price != null ? price.toLocaleString('pt-BR', { minimumFractionDigits: 2 }) : 'N/D'} + ${price != null ? ` ${price < avg ? '▼' : '▲'} ${Math.abs(((price - avg) / avg) * 100).toFixed(1)}% vs média` : ''} + `, { sticky: true }); + + layer.on({ + mouseover: e => e.target.setStyle({ weight: 3, color: '#333', fillOpacity: 1 }), + mouseout: e => geoLayer.resetStyle(e.target), + }); + }, + }).addTo(map); + + const legend = L.control({ position: 'bottomright' }); + legend.onAdd = () => { + const div = L.DomUtil.create('div', 'heatmap-legend-container'); + div.innerHTML = 'Preço
'; + const steps = 5; + for (let i = 0; i < steps; i++) { + const v = min + (max - min) * (i / (steps - 1)); + div.innerHTML += + `` + + `R$ ${v.toLocaleString('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
`; + } + div.innerHTML += `▲/>média ▼/< média`; + return div; + }; + legend.addTo(map); + + const regLegend = L.control({ position: 'bottomleft' }); + regLegend.onAdd = () => { + const div = L.DomUtil.create('div', 'heatmap-legend-container'); + div.innerHTML = 'Regiões
'; + for (const [reg, cor] of Object.entries(REGIAO_CORES)) { + div.innerHTML += + `` + + `${REGIAO_LABELS[reg]}
`; + } + return div; + }; + regLegend.addTo(map); + + state.heatmap.map = map; + + setTimeout(() => { + try { + if (state.heatmap.map && state.heatmap.map._container) { + state.heatmap.map.invalidateSize(); + } + } catch (e) { + console.debug('[Heatmap] Map ready check skipped:', e.message); + } + }, 250); + } + + function renderChart(data) { + destroyMap(); + destroyChart(); + + dom.heatmapMapContainer?.classList.add('hidden'); + dom.heatmapCanvas?.classList.remove('hidden'); + + if (!data || data.length === 0) { + dom.heatmapSection?.classList.add('hidden'); + return; + } + + const regionOrder = ['NORTE', 'NORDESTE', 'CENTRO_OESTE', 'SUDESTE', 'SUL']; + const withRegiao = data.map(d => ({ ...d, regiao: getRegiao(d.uf) })); + withRegiao.sort((a, b) => { + const ra = regionOrder.indexOf(a.regiao); + const rb = regionOrder.indexOf(b.regiao); + if (ra !== rb) return ra - rb; + return a.valor - b.valor; + }); + + const ufs = withRegiao.map(d => d.uf); + const values = withRegiao.map(d => d.valor); + const min = values[0]; + const max = values[values.length - 1]; + const range = max - min || 1; + const avg = values.reduce((s, v) => s + v, 0) / values.length; + + const ctx = dom.heatmapChart?.getContext('2d'); + if (!ctx) return; + const existing = Chart.getChart(ctx.canvas); + if (existing) existing.destroy(); + + const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text-main').trim() || '#1e293b'; + const mutedColor = getComputedStyle(document.documentElement).getPropertyValue('--text-muted').trim() || '#64748b'; + + state.heatmap.chart = new Chart(ctx, { + type: 'bar', + data: { + labels: ufs, + datasets: [{ + label: 'Preço', + data: values, + backgroundColor: withRegiao.map(d => { + const ratio = (d.valor - min) / range; + const r = Math.round(34 + ratio * (239 - 34)); + const g = Math.round(197 - ratio * 157); + const b = Math.round(94 - ratio * 54); + return `rgb(${r},${g},${b})`; + }), + borderColor: withRegiao.map(d => { + const ratio = (d.valor - min) / range; + const r = Math.round(34 + ratio * (239 - 34)); + const g = Math.round(197 - ratio * 157); + const b = Math.round(94 - ratio * 54); + return `rgb(${r},${g},${b})`; + }), + borderWidth: 1, + borderRadius: 4, + }], + }, + options: { + indexAxis: 'y', + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { display: false }, + tooltip: { + callbacks: { + label: ctx => { + const uf = ctx.label; + const reg = getRegiao(uf); + return `${REGIAO_LABELS[reg] || reg} | ${uf}: ${ctx.parsed.x < avg ? '▼' : '▲'} R$ ${ctx.parsed.x.toFixed(2)}${ctx.parsed.x === min ? ' (menor)' : ctx.parsed.x === max ? ' (maior)' : ''}`; + }, + }, + }, + }, + scales: { + x: { + ticks: { color: mutedColor, font: { size: 9 }, callback: v => 'R$ ' + Number(v).toFixed(2) }, + grid: { color: mutedColor + '20' }, + }, + y: { + ticks: { color: textColor, font: { size: 9 } }, + grid: { display: false }, + }, + }, + }, + }); + } + + return { render }; +} \ No newline at end of file diff --git a/demo/js/modules/modal.js b/demo/js/modules/modal.js new file mode 100644 index 0000000..855c691 --- /dev/null +++ b/demo/js/modules/modal.js @@ -0,0 +1,610 @@ +/** @file Módulo do Modal de Detalhes (Histórico + BOM + Man-Hours + Otimização) */ +import { createChartConfig, getChartTheme, hexToRgba } from '../utils.js'; + +export function createModal(config, state, dom, utils, api, toast, heatmap) { + let historyChartInstance = null; + let bomViewMode = 'cards'; + let bomDataCache = []; + let currentItemData = null; + let currentTipo = null; + let lastFocusedElement = null; + + function trapFocus(event) { + const focusable = dom.detailModal?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'); + if (!focusable || focusable.length === 0) return; + const first = focusable[0]; + const last = focusable[focusable.length - 1]; + if (event.key === 'Tab') { + if (event.shiftKey && document.activeElement === first) { + event.preventDefault(); + last.focus(); + } else if (!event.shiftKey && document.activeElement === last) { + event.preventDefault(); + first.focus(); + } + } + } + + function cleanup() { + if (historyChartInstance) { + historyChartInstance.destroy(); + historyChartInstance = null; + } + bomDataCache = []; + if (state.heatmap) state.heatmap.data = null; + if (state.heatmap && state.heatmap.chart) { + state.heatmap.chart.destroy(); + state.heatmap.chart = null; + } + if (state.heatmap && state.heatmap.map) { + state.heatmap.map.remove(); + state.heatmap.map = null; + } + } + + function setBomView(mode) { + bomViewMode = mode; + if (dom.btnBomGrid) dom.btnBomGrid.classList.toggle('active', mode === 'cards'); + if (dom.btnBomList) dom.btnBomList.classList.toggle('active', mode === 'table'); + if (dom.bomGrid) dom.bomGrid.classList.toggle('hidden', mode !== 'cards'); + if (dom.bomTableWrapper) dom.bomTableWrapper.classList.toggle('hidden', mode !== 'table'); + } + + function renderBomSearch() { + if (dom.bomSearchInput && dom.bomGrid) { + dom.bomSearchInput.value = ''; + dom.bomSearchInput.classList.remove('has-filter'); + } + } + + function filterBom(query) { + const q = (query || '').toLowerCase().trim(); + if (!dom.bomGrid) return; + + const cards = dom.bomGrid.querySelectorAll('.bom-card'); + const tableRows = dom.bomTableContainer?.querySelectorAll('.data-table tbody tr'); + + const showAll = !q; + + cards.forEach(card => { + const text = card.textContent.toLowerCase(); + card.style.display = (!showAll && !text.includes(q)) ? 'none' : ''; + }); + + tableRows?.forEach(row => { + const text = row.textContent.toLowerCase(); + row.style.display = (!showAll && !text.includes(q)) ? 'none' : ''; + }); + + if (dom.bomSearchInput) { + dom.bomSearchInput.classList.toggle('has-filter', !!q); + } + } + + async function show(tipo, codigo) { + if (!codigo) return; + + const tipoPlural = tipo === 'insumo' ? 'insumos' : 'composicoes'; + const tipoSingular = tipo === 'insumo' ? 'insumo' : 'composicao'; + + dom.detailModal?.classList.remove('hidden'); + document.body.style.overflow = 'hidden'; + lastFocusedElement = document.activeElement; + cleanup(); + + setTimeout(() => { + const closeBtn = dom.detailModal?.querySelector('.modal-close'); + if (closeBtn) closeBtn.focus(); + }, 100); + dom.detailModal?.addEventListener('keydown', trapFocus); + + // Reset state + if (dom.bomGrid) dom.bomGrid.innerHTML = ''; + if (dom.bomTableContainer) dom.bomTableContainer.innerHTML = ''; + if (dom.optimizationContainer) dom.optimizationContainer.innerHTML = ''; + if (dom.modalStatsRow) dom.modalStatsRow.innerHTML = ''; + if (dom.bomCostComparison) dom.bomCostComparison.innerHTML = ''; + if (dom.modalTitle) dom.modalTitle.textContent = 'Carregando detalhes...'; + if (dom.modalDesc) dom.modalDesc.textContent = ''; + if (dom.modalCode) dom.modalCode.textContent = codigo; + if (dom.modalPrice) dom.modalPrice.textContent = '...'; + if (dom.modalPriceUnit) dom.modalPriceUnit.textContent = ''; + if (dom.modalUf) dom.modalUf.textContent = '...'; + if (dom.modalRef) dom.modalRef.textContent = '...'; + if (dom.modalRegime) dom.modalRegime.textContent = '...'; + if (dom.modalStatusBadge) dom.modalStatusBadge.textContent = ''; + if (dom.modalStatusBadge) dom.modalStatusBadge.className = ''; + if (dom.modalClassificacao) dom.modalClassificacao.textContent = ''; + if (dom.modalGrupo) dom.modalGrupo.textContent = ''; + + // Hide composition-specific sections by default + if (dom.bomSection) dom.bomSection.classList.add('hidden'); + if (dom.manHoursSection) dom.manHoursSection.classList.add('hidden'); + if (dom.optimizationSection) dom.optimizationSection.classList.add('hidden'); + if (dom.bomViewToggle) dom.bomViewToggle.classList.add('hidden'); + + try { + const uf = dom.stateFilter?.value || utils.getDefaultUf(); + const date = dom.dateFilter?.value || utils.getDefaultDate(); + const regime = dom.regimeFilter?.value || utils.getDefaultRegime(); + + // Update meta info + if (dom.modalUf) dom.modalUf.textContent = uf; + if (dom.modalRef) dom.modalRef.textContent = date; + if (dom.modalRegime) dom.modalRegime.textContent = regime === 'NAO_DESONERADO' ? 'Não Desonerado' : regime === 'DESONERADO' ? 'Desonerado' : regime; + + // Fetch item details + const itemUrl = `${config.API_BASE}/${tipoPlural}/${encodeURIComponent(codigo)}?uf=${uf}&data_referencia=${date}®ime=${encodeURIComponent(regime)}`; + const itemData = await api.request(itemUrl); + + currentItemData = itemData; + currentTipo = tipoSingular; + const valor = tipoSingular === 'insumo' ? (itemData.preco_mediano || 0) : (itemData.custo_total || 0); + + if (dom.modalTitle) dom.modalTitle.textContent = tipoSingular === 'insumo' ? 'Detalhes do Insumo' : 'Detalhes da Composição'; + if (dom.modalDesc) dom.modalDesc.textContent = itemData.descricao || 'Sem descrição'; + if (dom.modalPrice) dom.modalPrice.textContent = utils.formatCurrency(valor); + if (dom.modalPriceUnit) dom.modalPriceUnit.textContent = `/${itemData.unidade || 'un'}`; + if (dom.modalTypeBadge) { + dom.modalTypeBadge.textContent = tipoSingular === 'insumo' ? 'INSUMO' : 'COMPOSIÇÃO'; + dom.modalTypeBadge.className = `type-tag tag-${tipoSingular === 'insumo' ? 'insumo' : 'comp'}`; + } + + // Status badge + if (dom.modalStatusBadge && itemData.status && itemData.status !== 'ATIVO') { + dom.modalStatusBadge.textContent = 'INATIVO'; + dom.modalStatusBadge.className = 'badge badge-inativo'; + } + + // Classificacao / Grupo + if (dom.modalClassificacao && tipoSingular === 'insumo' && itemData.classificacao) { + dom.modalClassificacao.textContent = itemData.classificacao; + } + if (dom.modalGrupo && tipoSingular === 'composicao' && itemData.grupo) { + dom.modalGrupo.textContent = itemData.grupo; + } + + // Fetch history + const historyUrl = `${config.API_BASE}/bi/item/${tipoSingular}/${encodeURIComponent(codigo)}/historico?uf=${uf}®ime=${encodeURIComponent(regime)}&meses=12`; + const historyData = await api.request(historyUrl).catch((err) => { + console.warn('[Modal] History fetch failed:', err); + return []; + }); + + if (dom.historyChart && historyData.length > 0) { + const ctx = dom.historyChart.getContext('2d'); + const { primaryColor, textColor, gridColor } = getChartTheme(state.theme); + const configChart = createChartConfig('line', + historyData.map(h => h.data_referencia), + [{ + label: 'Preço Histórico', + data: historyData.map(h => h.valor), + borderColor: primaryColor, + backgroundColor: hexToRgba(primaryColor, 0.1), + fill: true, + tension: 0.4, + pointRadius: 3, + pointHoverRadius: 6, + }], + state.theme, + { + scales: { + y: { + beginAtZero: false, + ticks: { + callback: (v) => utils.formatCurrency(v), + color: textColor, + }, + grid: { color: gridColor }, + }, + x: { + ticks: { color: textColor }, + grid: { color: gridColor }, + } + }, + plugins: { + tooltip: { + callbacks: { + label: (ctx) => ` ${utils.formatCurrency(ctx.parsed.y)}` + } + } + } + } + ); + historyChartInstance = new Chart(ctx, configChart); + } else if (dom.historyChart) { + const chartContainer = dom.historyChart.parentElement; + chartContainer.innerHTML = '
+
+
+ `;
+ }
+
+ function exportPdf() {
+ if (!currentItemData || bomDataCache.length === 0) {
+ toast.show('Nenhum dado de BOM disponível para exportar.', 'warning');
+ return;
+ }
+ try {
+ const { jsPDF } = window.jspdf;
+ const doc = new jsPDF({ unit: 'mm', format: 'a4' });
+ const pageW = doc.internal.pageSize.getWidth();
+
+ let y = 15;
+ doc.setFontSize(16);
+ doc.setTextColor(37, 99, 235);
+ doc.text('AutoSINAPI — Detalhes da Composição', pageW / 2, y, { align: 'center' });
+ y += 10;
+
+ doc.setFontSize(10);
+ doc.setTextColor(100, 116, 139);
+ doc.text(`Gerado em: ${new Date().toLocaleDateString('pt-BR')}`, pageW - 15, y, { align: 'right' });
+ y += 8;
+
+ doc.setDrawColor(37, 99, 235);
+ doc.setLineWidth(0.5);
+ doc.line(15, y, pageW - 15, y);
+ y += 6;
+
+ doc.setFontSize(11);
+ doc.setTextColor(30, 41, 59);
+ doc.setFont(undefined, 'bold');
+ doc.text(`${currentItemData.descricao || 'Sem descrição'}`, 15, y);
+ y += 5;
+ doc.setFont(undefined, 'normal');
+
+ const meta = [
+ `Código: ${currentItemData.codigo || ''}`,
+ `UF: ${dom.modalUf?.textContent || '-'}`,
+ `Referência: ${dom.modalRef?.textContent || '-'}`,
+ `Regime: ${dom.modalRegime?.textContent || '-'}`,
+ `Unidade: ${currentItemData.unidade || '-'}`,
+ ];
+ const metaStr = meta.join(' | ');
+ doc.setFontSize(8);
+ doc.setTextColor(100, 116, 139);
+ doc.text(metaStr, 15, y);
+ y += 5;
+
+ doc.setFontSize(14);
+ doc.setTextColor(30, 41, 59);
+ doc.setFont(undefined, 'bold');
+ doc.text('Estrutura Analítica (BOM)', 15, y);
+ y += 6;
+
+ const tableBody = bomDataCache.map(item => [
+ item.nivel?.toString() || '1',
+ item.item_codigo?.toString() || '',
+ item.tipo_item === 'COMPOSICAO' ? 'COMP' : 'INS',
+ item.descricao || '',
+ item.unidade || '',
+ (item.coeficiente_total || 0).toLocaleString('pt-BR', { minimumFractionDigits: 4, maximumFractionDigits: 4 }),
+ 'R$ ' + (item.custo_impacto_total || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
+ ]);
+
+ doc.autoTable({
+ startY: y,
+ head: [['Nível', 'Código', 'Tipo', 'Descrição', 'Un.', 'Coeficiente', 'Impacto']],
+ body: tableBody,
+ theme: 'grid',
+ headStyles: { fillColor: [37, 99, 235], textColor: 255, fontSize: 8, fontStyle: 'bold' },
+ bodyStyles: { fontSize: 7, textColor: [30, 41, 59] },
+ alternateRowStyles: { fillColor: [248, 250, 252] },
+ columnStyles: {
+ 0: { cellWidth: 12, halign: 'center' },
+ 1: { cellWidth: 18, halign: 'center' },
+ 2: { cellWidth: 12, halign: 'center' },
+ 3: { cellWidth: 'auto' },
+ 4: { cellWidth: 12, halign: 'center' },
+ 5: { cellWidth: 22, halign: 'right' },
+ 6: { cellWidth: 28, halign: 'right' },
+ },
+ margin: { left: 15, right: 15 },
+ didDrawPage: (data) => {
+ doc.setFontSize(7);
+ doc.setTextColor(148, 163, 184);
+ doc.text(`AutoSINAPI — Página ${doc.internal.getNumberOfPages()}`, pageW / 2, 290, { align: 'center' });
+ },
+ });
+
+ y = doc.lastAutoTable.finalY + 8;
+
+ const totalImpacto = bomDataCache.reduce((s, i) => s + (i.custo_impacto_total || 0), 0);
+ doc.setFontSize(9);
+ doc.setTextColor(30, 41, 59);
+ doc.setFont(undefined, 'bold');
+ doc.text(`Custo Total BOM: R$ ${totalImpacto.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`, 15, y);
+ if (currentItemData.custo_total != null) {
+ const oficial = Number(currentItemData.custo_total) || 0;
+ doc.text(`Custo Oficial: R$ ${oficial.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`, pageW - 15, y, { align: 'right' });
+ }
+
+ doc.save(`autosinapi-bom-${currentItemData.codigo || 'export'}.pdf`);
+ toast.show('PDF exportado com sucesso!', 'success');
+ } catch (err) {
+ console.error('[Modal] PDF export failed:', err);
+ toast.show('Erro ao exportar PDF.', 'error');
+ }
+ }
+
+ function exportChart() {
+ if (!dom.historyChart) return;
+ try {
+ const dataUrl = dom.historyChart.toDataURL('image/png');
+ utils.downloadAsFile(dataUrl, 'historico-preco.png', 'image/png');
+ toast.show('Gráfico exportado como PNG!', 'success');
+ } catch {
+ toast.show('Erro ao exportar gráfico.', 'error');
+ }
+ }
+
+ function close() {
+ dom.detailModal?.classList.add('hidden');
+ document.body.style.overflow = 'auto';
+ dom.detailModal?.removeEventListener('keydown', trapFocus);
+ cleanup();
+ if (lastFocusedElement) {
+ lastFocusedElement.focus();
+ lastFocusedElement = null;
+ }
+ }
+
+ return { show, close, setBomView, exportChart, filterBom, exportPdf };
+}
diff --git a/demo/js/modules/search.js b/demo/js/modules/search.js
new file mode 100644
index 0000000..8d896e5
--- /dev/null
+++ b/demo/js/modules/search.js
@@ -0,0 +1,188 @@
+/** @file Módulo de Pesquisa / BOM */
+import { createViewToggle } from '../utils.js';
+
+export function createSearch(config, state, dom, utils, api, toast) {
+ const viewToggle = createViewToggle(
+ 'class',
+ { container: dom.resultsGrid, baseClass: 'results-grid', btnGrid: dom.btnGrid, btnList: dom.btnList },
+ state.search
+ );
+
+ async function perform() {
+ const query = dom.searchInput?.value?.trim();
+ if (!query || query.length < 3) {
+ toast.show('Digite pelo menos 3 caracteres', 'warning');
+ return;
+ }
+
+ state.search.loading = true;
+ dom.searchSkeleton?.classList.remove('hidden');
+ if (dom.resultsGrid) dom.resultsGrid.innerHTML = '';
+ dom.noResults?.classList.add('hidden');
+
+ try {
+ const uf = dom.stateFilter?.value || utils.getDefaultUf();
+ const date = dom.dateFilter?.value || utils.getDefaultDate();
+ const regime = dom.regimeFilter?.value || utils.getDefaultRegime();
+ const searchType = state.search.searchType || 'insumos';
+
+ let url = `${config.API_BASE}/${searchType}?q=${encodeURIComponent(query)}&uf=${uf}&data_referencia=${date}®ime=${encodeURIComponent(regime)}`;
+
+ if (searchType === 'insumos') {
+ const classificacao = dom.classificacaoFilter?.value;
+ if (classificacao) url += `&classificacao=${encodeURIComponent(classificacao)}`;
+ } else {
+ const grupo = dom.grupoFilter?.value;
+ if (grupo) url += `&grupo=${encodeURIComponent(grupo)}`;
+ }
+
+ const data = await api.request(url);
+ const results = Array.isArray(data) ? data : (data.data || []);
+
+ state.search.results = results.map(item => ({
+ ...item,
+ _tipo: searchType === 'insumos' ? 'insumo' : 'composicao',
+ _preco: searchType === 'insumos' ? (item.preco_mediano || 0) : (item.custo_total || 0),
+ }));
+
+ render();
+ } catch {
+ dom.resultsGrid.innerHTML = '
+ ${label}
+ Qtd. ${itemLabel}
+ Preço Inicial
+ Preço Final
+ Variação (%)
+
+ `;
+ }
+
+ const tbody = table.querySelector('tbody');
+ if (!tbody) return;
+
+ const sorted = Object.entries(groups)
+ .map(([cat, items]) => {
+ items.sort((a, b) => a.mes.localeCompare(b.mes));
+ const first = items[0]?.preco_medio || 0;
+ const last = items[items.length - 1]?.preco_medio || 0;
+ const variacao = first > 0 ? ((last - first) / first * 100) : 0;
+ return { classificacao: cat, items, preco_inicial: first, preco_final: last, variacao, qtd: items[0]?.qtd_insumos || 0 };
+ })
+ .sort((a, b) => Math.abs(b.variacao) - Math.abs(a.variacao));
+
+ tbody.innerHTML = sorted.map(cat => `
+
+ ${utils.escapeHtml(cat.classificacao)}
+ ${cat.qtd}
+ ${utils.formatCurrency(cat.preco_inicial)}
+ ${utils.formatCurrency(cat.preco_final)}
+ ${cat.variacao >= 0 ? '+' : ''}${cat.variacao.toFixed(2)}%
+
+ `).join('');
+ }
+
+ return { perform };
+}
diff --git a/demo/js/state.js b/demo/js/state.js
new file mode 100644
index 0000000..696d334
--- /dev/null
+++ b/demo/js/state.js
@@ -0,0 +1,15 @@
+/** @file Estado centralizado da aplicação */
+export function createState() {
+ return {
+ theme: localStorage.getItem('autosinapi-theme') ||
+ (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'),
+ filters: { ufs: [], dates: [], regimes: [], classificacoes: [], grupos: [] },
+ search: { results: [], loading: false, sortBy: 'name_asc', viewMode: 'grid', searchType: 'insumos' },
+ abc: { data: null, loading: false, viewMode: 'grid', chart: null, groupByClassificacao: false, groupedData: null },
+ compare: { data: null, loading: false, chart: null, selectedStates: new Set() },
+ trends: { data: null, loading: false, chart: null },
+ heatmap: { data: null, chart: null },
+ comparison: { left: null, right: null, loading: false, chart: null },
+ admin: { taskId: null, pollingInterval: null },
+ };
+}
\ No newline at end of file
diff --git a/demo/js/theme.js b/demo/js/theme.js
new file mode 100644
index 0000000..1629951
--- /dev/null
+++ b/demo/js/theme.js
@@ -0,0 +1,39 @@
+/** @file Tema — light/dark toggle + Chart.js sync */
+import { getChartTheme } from './utils.js';
+
+export function createTheme(state) {
+ function updateChart(chart) {
+ const { textColor, gridColor } = getChartTheme(state.theme);
+
+ const { scales, plugins } = chart.options;
+ if (scales?.x) {
+ scales.x.ticks && (scales.x.ticks.color = textColor);
+ scales.x.grid && (scales.x.grid.color = gridColor);
+ }
+ if (scales?.y) {
+ scales.y.ticks && (scales.y.ticks.color = textColor);
+ scales.y.grid && (scales.y.grid.color = gridColor);
+ }
+ if (plugins?.legend?.labels) {
+ plugins.legend.labels.color = textColor;
+ }
+ chart.update();
+ }
+
+ return {
+ init() {
+ document.documentElement.setAttribute('data-theme', state.theme);
+ },
+
+ toggle() {
+ state.theme = state.theme === 'dark' ? 'light' : 'dark';
+ localStorage.setItem('autosinapi-theme', state.theme);
+ document.documentElement.setAttribute('data-theme', state.theme);
+ [state.abc.chart, state.compare.chart].forEach(chart => {
+ if (chart) updateChart(chart);
+ });
+ },
+
+ updateChart,
+ };
+}
\ No newline at end of file
diff --git a/demo/js/toast.js b/demo/js/toast.js
new file mode 100644
index 0000000..8106cf4
--- /dev/null
+++ b/demo/js/toast.js
@@ -0,0 +1,23 @@
+/** @file Notificações Toast */
+export function createToast(dom, { TOAST_DURATION }) {
+ return {
+ show(message, type = 'info') {
+ const el = dom.toast;
+ if (!el) return;
+ el.textContent = message;
+ el.className = `toast toast-${type} show`;
+ clearTimeout(el._timeout);
+ el._timeout = setTimeout(() => this.dismiss(), TOAST_DURATION);
+
+ // Dismiss on click/tap
+ el.onclick = () => this.dismiss();
+ },
+ dismiss() {
+ const el = dom.toast;
+ if (!el) return;
+ el.classList.remove('show');
+ el.onclick = null;
+ clearTimeout(el._timeout);
+ },
+ };
+}
\ No newline at end of file
diff --git a/demo/js/utils.js b/demo/js/utils.js
new file mode 100644
index 0000000..ac0c16d
--- /dev/null
+++ b/demo/js/utils.js
@@ -0,0 +1,146 @@
+/** @file Utilitários — funções puras e helpers */
+import { CONFIG } from './config.js';
+
+/**
+ * Converte cor hex (#rgb ou #rrggbb) para rgba
+ * @param {string} hex
+ * @param {number} alpha
+ * @returns {string} rgba(r, g, b, alpha)
+ */
+export function hexToRgba(hex, alpha = 1) {
+ const v = parseInt(hex.slice(1), 16);
+ if (hex.length === 4) {
+ const r = (v >> 8) * 17, g = ((v >> 4) & 0xf) * 17, b = (v & 0xf) * 17;
+ return `rgba(${r},${g},${b},${alpha})`;
+ }
+ return `rgba(${v>>16},${(v>>8)&255},${v&255},${alpha})`;
+}
+
+/**
+ * Retorna paleta de cores Chart.js baseada no tema
+ * @param {'light'|'dark'} theme
+ * @returns {{ textColor: string, gridColor: string, primaryColor: string, successColor: string, errorColor: string }}
+ */
+export function getChartTheme(theme) {
+ const isDark = theme === 'dark';
+ return {
+ textColor: isDark ? '#f0f0f0' : '#1a1a1a',
+ gridColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
+ primaryColor: isDark ? '#60a5fa' : '#2563eb',
+ successColor: isDark ? '#34d399' : '#10b981',
+ errorColor: isDark ? '#f87171' : '#ef4444',
+ };
+}
+
+export function createUtils(state) {
+ return {
+ escapeHtml(str) {
+ if (typeof str !== 'string') return String(str || '');
+ const div = document.createElement('div');
+ div.textContent = str;
+ return div.innerHTML;
+ },
+
+ formatCurrency(value) {
+ return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(value || 0);
+ },
+
+ formatNumber(value) {
+ return (value || 0).toLocaleString('pt-BR');
+ },
+
+ getDefault(filterKey, fallback) {
+ const arr = state.filters[filterKey];
+ return arr?.length > 0 ? arr[0] : fallback;
+ },
+
+ getDefaultUf() { return this.getDefault('ufs', CONFIG.FALLBACK_UF); },
+ getDefaultDate() {
+ const now = new Date();
+ return this.getDefault('dates', `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`);
+ },
+ getDefaultRegime() { return this.getDefault('regimes', CONFIG.FALLBACK_REGIME); },
+
+ async copyToClipboard(text) {
+ try {
+ await navigator.clipboard.writeText(text);
+ return true;
+ } catch {
+ const ta = document.createElement('textarea');
+ ta.value = text;
+ document.body.appendChild(ta);
+ ta.select();
+ document.execCommand('copy');
+ document.body.removeChild(ta);
+ return true;
+ }
+ },
+
+ /** Descarrega conteúdo como arquivo (Blob + URL + download) */
+ downloadAsFile(content, filename, mimeType = 'text/plain') {
+ const blob = new Blob([content], { type: mimeType });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = filename;
+ a.click();
+ URL.revokeObjectURL(url);
+ },
+ };
+}
+
+/**
+ * Factory para configuração base de Chart.js
+ * @param {'line'|'bar'} type - Tipo do gráfico
+ * @param {string[]} labels - Labels do eixo X
+ * @param {Object[]} datasets - Array de datasets do Chart.js
+ * @param {'light'|'dark'} theme - Tema atual
+ * @param {Object} [overrides] - Overrides para options
+ * @returns {Object} Config completa do Chart.js
+ */
+export function createChartConfig(type, labels, datasets, theme, overrides = {}) {
+ const { textColor, gridColor } = getChartTheme(theme);
+
+ return {
+ type,
+ data: { labels, datasets },
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: { legend: { labels: { color: textColor } } },
+ scales: {
+ x: { ticks: { color: textColor }, grid: { color: gridColor } },
+ y: { ticks: { color: textColor }, grid: { color: gridColor }, beginAtZero: true },
+ },
+ ...overrides,
+ },
+ };
+}
+
+/**
+ * Factory para toggle de visualização grid/table
+ * Suporta tipo 'display' (mostra/esconde blocos distintos) e 'class' (alterna classes em um único container)
+ * @param {'display'|'class'} type - Tipo do toggle
+ * @param {Object} domRefs - Referências dos elementos DOM
+ * @param {Object} stateRef - Referência ao estado
+ * @returns {Object} { setView(mode) }
+ */
+export function createViewToggle(type, domRefs, stateRef) {
+ return {
+ setView(mode) {
+ stateRef.viewMode = mode;
+ if (type === 'class') {
+ if (domRefs.container) {
+ domRefs.container.className = `${domRefs.baseClass} ${mode}-view`;
+ }
+ domRefs.btnGrid?.classList.toggle('active', mode === 'grid');
+ domRefs.btnList?.classList.toggle('active', mode === 'list');
+ } else {
+ domRefs.grid?.classList.toggle('hidden', mode !== 'grid');
+ domRefs.tableWrapper?.classList.toggle('hidden', mode !== 'table');
+ domRefs.btnGrid?.classList.toggle('active', mode === 'grid');
+ domRefs.btnList?.classList.toggle('active', mode === 'table');
+ }
+ },
+ };
+}
\ No newline at end of file
diff --git a/demo/style.css b/demo/style.css
new file mode 100644
index 0000000..2b4e662
--- /dev/null
+++ b/demo/style.css
@@ -0,0 +1,20 @@
+/* ========================================
+ AutoSINAPI Demo - CSS (Modular)
+ Mobile-first, Dark Mode, Full Responsive
+ ======================================== */
+
+@layer reset, tokens, components, utilities, responsive;
+
+@import 'css/01-variables.css' layer(tokens);
+@import 'css/02-reset.css' layer(reset);
+@import 'css/03-navbar.css' layer(components);
+@import 'css/04-hero.css' layer(components);
+@import 'css/05-search.css' layer(components);
+@import 'css/06-results.css' layer(components);
+@import 'css/07-charts.css' layer(components);
+@import 'css/08-compare.css' layer(components);
+@import 'css/09-modal.css' layer(components);
+@import 'css/10-footer.css' layer(components);
+@import 'css/11-toast.css' layer(components);
+@import 'css/12-utilities.css' layer(utilities);
+@import 'css/13-responsive.css' layer(responsive);
\ No newline at end of file
diff --git a/demo/tests.js b/demo/tests.js
new file mode 100644
index 0000000..ebe3b8a
--- /dev/null
+++ b/demo/tests.js
@@ -0,0 +1,482 @@
+/**
+ * AutoSINAPI Demo - Test Suite
+ * @description Testes unitários, de interface e E2E para validação da saúde da aplicação
+ * @version 1.2.0 - Idempotência, Cobertura de Fallbacks e Sprint 1c
+ */
+
+const AutoSINAPITests = (() => {
+ 'use strict';
+
+ // ==================== TEST FRAMEWORK (Minimal) ====================
+ const results = { passed: 0, failed: 0, tests: [] };
+
+ function assert(condition, message) {
+ if (condition) {
+ results.passed++;
+ results.tests.push({ status: 'PASS', message });
+ } else {
+ results.failed++;
+ results.tests.push({ status: 'FAIL', message });
+ }
+ }
+
+ function assertEqual(actual, expected, message) {
+ assert(actual === expected, `${message} (expected: ${expected}, got: ${actual})`);
+ }
+
+ function assertTruthy(value, message) {
+ assert(!!value, `${message} (value is ${value})`);
+ }
+
+ function assertArray(arr, message) {
+ assert(Array.isArray(arr), `${message} (type: ${typeof arr})`);
+ }
+
+ // ==================== UTILS PARA TESTES ====================
+ /**
+ * Reseta o estado da aplicação para valores iniciais conhecidos.
+ * Garante idempotência entre execuções.
+ */
+ function resetAppState() {
+ const app = window.AutoSINAPI;
+ if (!app || !app.state) return;
+
+ // Resetando manualmente as partes do estado que causam falhas de asserção se preenchidas
+ app.state.comparison.left = null;
+ app.state.comparison.right = null;
+ app.state.comparison.loading = false;
+ app.state.heatmap.data = null;
+ app.state.trends.loading = false;
+
+ // Resetando valores dos inputs que podem disparar requisições durante boundary tests
+ const inputIds = ['comparisonCode1', 'comparisonCode2', 'abcInput', 'compareCode'];
+ inputIds.forEach(id => {
+ const el = document.getElementById(id);
+ if (el) el.value = '';
+ });
+ }
+
+ /**
+ * Salva e restaura valores do DOM para não interferir na experiência do usuário
+ */
+ async function withCleanInputs(ids, callback) {
+ const originalValues = ids.map(id => document.getElementById(id)?.value);
+ ids.forEach(id => {
+ const el = document.getElementById(id);
+ if (el) el.value = '';
+ });
+
+ try {
+ await callback();
+ } finally {
+ ids.forEach((id, i) => {
+ const el = document.getElementById(id);
+ if (el) el.value = originalValues[i];
+ });
+ }
+ }
+
+ // ==================== UNIT TESTS ====================
+ async function runUnitTests() {
+ console.log('\n🧪 [UNIT TESTS] Testando módulos e estado...\n');
+
+ const app = window.AutoSINAPI;
+ if (!app) { assert(false, 'window.AutoSINAPI não definido'); return; }
+
+ // RESET PARA IDEMPOTÊNCIA
+ resetAppState();
+
+ const { utils, state } = app;
+
+ // Test 1: AutoSINAPI deve estar definido
+ assertTruthy(app, 'window.AutoSINAPI está definido');
+
+ // Test 2: Utils.escapeHtml
+ if (utils) {
+ assertEqual(utils.escapeHtml(''), '<script>alert("xss")</script>', 'escapeHtml previne XSS');
+ assertEqual(utils.escapeHtml(null), '', 'escapeHtml lida com null');
+ assertEqual(utils.escapeHtml(''), '', 'escapeHtml lida com string vazia');
+ assertEqual(utils.escapeHtml('Texto normal'), 'Texto normal', 'escapeHtml preserva texto normal');
+
+ // Test 3: Utils.formatCurrency
+ const formatted = utils.formatCurrency(1234.56);
+ assert(formatted.includes('R$'), `formatCurrency formata como BRL: ${formatted}`);
+ assert(formatted.includes('1.234,56'), `formatCurrency usa locale pt-BR: ${formatted}`);
+
+ // Test 4: Utils.getDefault
+ assertTruthy(utils.getDefault('ufs', 'SP'), 'getDefault retorna primeiro UF quando array populado');
+ }
+
+ // Test 5: State inicial — estrutura e defaults corretos (APÓS RESET)
+ if (state) {
+ assertTruthy(state.theme, 'state.theme está definido');
+ assert(['light', 'dark'].includes(state.theme), `state.theme é 'light' ou 'dark' (got: ${state.theme})`);
+ assertTruthy(state.filters, 'state.filters está definido');
+ assertArray(state.filters.ufs, 'state.filters.ufs é um array');
+ assertArray(state.filters.dates, 'state.filters.dates é um array');
+ assertArray(state.filters.regimes, 'state.filters.regimes é um array');
+ assertArray(state.search.results, 'state.search.results é um array');
+ // Sprint 1c: estado dos novos módulos
+ assertEqual(state.trends.loading, false, 'state.trends.loading inicia false');
+ assertEqual(state.heatmap.data, null, 'state.heatmap.data inicia null');
+ assertEqual(state.comparison.loading, false, 'state.comparison.loading inicia false');
+ assertEqual(state.comparison.left, null, 'state.comparison.left inicia null');
+ assertEqual(state.comparison.right, null, 'state.comparison.right inicia null');
+ }
+
+ // Test 6: Módulos Sprint 1c — métodos públicos existem
+ const modules = [
+ { module: app.trends, name: 'trends', methods: ['perform'] },
+ { module: app.heatmap, name: 'heatmap', methods: ['render'] },
+ { module: app.comparison, name: 'comparison', methods: ['perform'] },
+ ];
+ for (const { module: mod, name, methods } of modules) {
+ if (mod) {
+ assertTruthy(mod, `Módulo ${name} está disponível`);
+ for (const method of methods) {
+ assert(typeof mod[method] === 'function', `${name}.${method} é uma função`);
+ }
+ }
+ }
+
+ // Test 7: Módulos existentes — métodos públicos existem
+ const existingModules = [
+ { module: app.search, name: 'search', methods: ['perform', 'render', 'setView', 'export', 'setSearchType'] },
+ { module: app.abc, name: 'abc', methods: ['perform', 'render', 'setView', 'toggleGroupBy'] },
+ { module: app.compare, name: 'compare', methods: ['perform', 'render', 'toggleState'] },
+ { module: app.modal, name: 'modal', methods: ['show', 'close', 'exportChart', 'filterBom', 'setBomView'] },
+ { module: app.api, name: 'api', methods: ['request', 'fetchStats', 'populateFilters', 'updateFilterVisibility'] },
+ ];
+ for (const { module: mod, name, methods } of existingModules) {
+ if (mod) {
+ for (const method of methods) {
+ assert(typeof mod[method] === 'function', `${name}.${method} é uma função`);
+ }
+ }
+ }
+
+ // Test 8: Module boundary conditions — não crasham com params inválidos e RESPEITAM O DOM LIMPO
+ await withCleanInputs(['comparisonCode1', 'comparisonCode2', 'trendsStateFilter', 'trendsDateFilter'], async () => {
+ try {
+ await app.comparison?.perform?.(); // sem códigos → deve mostrar toast, não crashar nem fazer fetch
+ assert(true, 'comparison.perform() sem códigos não crasha nem faz fetch espúrio');
+ } catch (e) {
+ assert(false, `comparison.perform() sem códigos crashou: ${e.message}`);
+ }
+
+ try {
+ await app.trends?.perform?.(); // sem filtros → deve mostrar warning, não crashar
+ assert(true, 'trends.perform() sem filtros não crasha');
+ } catch (e) {
+ assert(false, `trends.perform() sem filtros crashou: ${e.message}`);
+ }
+ });
+
+ try {
+ // Usando parâmetros explícitos para evitar que util.getDefault (ainda não populado) envie '-'
+ app.heatmap?.render?.('370', 'insumo', '2026-04', 'DESONERADO');
+ assert(true, 'heatmap.render() com código válido não crasha');
+ } catch (e) {
+ assert(false, `heatmap.render() crashou: ${e.message}`);
+ }
+
+ // Test 9: Cobertura de Fallbacks e Gráficos
+ if (app.heatmap) {
+ try {
+ app.heatmap.render(null, 'insumo'); // Trigger fallback/early return
+ assert(true, 'heatmap.render com dados nulos não crasha');
+ } catch (e) {
+ assert(false, `heatmap.render(null) crashou: ${e.message}`);
+ }
+ }
+
+ console.log(`\n✅ Unit Tests: ${results.passed} passou, ${results.failed} falhou\n`);
+ }
+
+ // ==================== DOM/INTERFACE TESTS ====================
+ function runInterfaceTests() {
+ console.log('\n🎨 [INTERFACE TESTS] Verificando elementos da UI...\n');
+
+ const ids = [
+ 'themeToggle', 'mobileMenuBtn', 'mobileMenu',
+ 'searchInput', 'stateFilter', 'dateFilter', 'regimeFilter', 'searchBtn',
+ 'resultsGrid', 'resultsActions', 'searchSkeleton',
+ 'abcInput', 'abcStateFilter', 'abcDateFilter', 'abcRegimeFilter', 'abcBtn',
+ 'abcChart', 'abcGrid', 'abcTableWrapper',
+ 'compareType', 'compareCode', 'compareDateFilter', 'compareRegimeFilter', 'compareBtn',
+ 'stateChips', 'compareChart', 'compareResults',
+ 'detailModal', 'toast',
+ // Sprint 1a: New filter elements
+ 'classificacaoFilter', 'grupoFilter',
+ // Sprint 1a: New modal elements
+ 'bomSearchInput', 'btnExportChart', 'bomCostComparison',
+ 'modalStatusBadge', 'modalClassificacao', 'modalGrupo',
+ // Sprint 1b: New elements
+ 'abcToggleGroup', 'maintenanceSection', 'maintenanceContainer',
+ 'adminSection', 'adminForm', 'adminYear', 'adminMonth', 'adminUf',
+ // Sprint 1c: Trends
+ 'trendsStateFilter', 'trendsDateFilter', 'trendsRegimeFilter', 'trendsBtn',
+ 'trendsChart', 'trendsResults', 'trendsTable',
+ // Sprint 1c: Heatmap
+ 'heatmapChart', 'heatmapSection',
+ // Sprint 1c: Comparison Cross
+ 'comparisonCode1', 'comparisonCode2', 'comparisonBtn',
+ 'comparisonResults', 'comparisonLeftTable', 'comparisonRightTable',
+ 'comparisonDeltaTable', 'comparisonChart',
+ ];
+
+ ids.forEach(id => {
+ const el = document.getElementById(id);
+ assertTruthy(el, `Elemento #${id} existe no DOM`);
+ });
+
+ // Test: Theme toggle tem aria-label
+ const themeToggle = document.getElementById('themeToggle');
+ if (themeToggle) {
+ assertTruthy(themeToggle.getAttribute('aria-label'), 'themeToggle tem aria-label');
+ }
+
+ // Test: Fallback check — elementos de erro/vazio estão presentes (ocultos ou via skeleton)
+ const skeleton = document.getElementById('searchSkeleton');
+ if (skeleton) {
+ assert(skeleton.classList.contains('hidden'), 'searchSkeleton inicia oculto');
+ }
+
+ // Test: Canvas elements exist
+ ['abcChart', 'compareChart', 'historyChart', 'trendsChart', 'heatmapChart', 'comparisonChart'].forEach(id => {
+ const canvas = document.getElementById(id);
+ if (canvas) {
+ assert(canvas.getContext('2d'), `Canvas #${id} tem contexto 2d`);
+ }
+ });
+
+ // Test: Chart.js está carregado
+ assertTruthy(window.Chart, 'Chart.js está carregado globalmente');
+
+ console.log(`\n✅ Interface Tests: ${results.passed} passou, ${results.failed} falhou\n`);
+ }
+
+ // ==================== INTEGRATION/E2E TESTS ====================
+ async function runE2ETests() {
+ console.log('\n🚀 [E2E TESTS] Testando fluxos completos...\n');
+
+ const app = window.AutoSINAPI;
+ const { api, search, abc, compare, toast, state, theme, modal, admin, trends, heatmap, comparison } = app;
+
+ // Test 1: API Base URL e Endpoints
+ assertTruthy(api, 'Módulo api está disponível');
+
+ // Test 2: Módulos Principais
+ [search, abc, compare].forEach(m => {
+ assertTruthy(m && typeof m.perform === 'function', `Módulo ${m?.constructor?.name || 'principal'} funcional`);
+ });
+
+ // Test 3: Theme Toggle
+ if (theme) {
+ const initialTheme = document.documentElement.getAttribute('data-theme') || 'light';
+ theme.toggle();
+ const toggledTheme = document.documentElement.getAttribute('data-theme');
+ assert(toggledTheme !== initialTheme, `Toggle alterou o tema de ${initialTheme} para ${toggledTheme}`);
+ theme.toggle(); // volta ao original
+ }
+
+ // Test 4: Modal Features (BOM filter)
+ if (modal && typeof modal.filterBom === 'function') {
+ assert(true, 'modal.filterBom disponível para busca em tempo real');
+ }
+
+ // Test 5: Search setSearchType (Validação de UI dinâmica)
+ if (search && search.setSearchType) {
+ search.setSearchType('composicoes');
+ const classificacaoCol = document.getElementById('classificacaoFilterCol');
+ if (classificacaoCol) {
+ assertEqual(classificacaoCol.style.display, 'none', 'Filtro de classificação oculto para composições');
+ }
+ search.setSearchType('insumos');
+ }
+
+ // Test 6: Sprint 1c - Trends Simulation
+ if (trends && typeof trends.perform === 'function') {
+ assertEqual(state.trends.loading, false, 'Trends inicia sem carregar');
+ }
+
+ // Test 7: Sprint 1c - Comparison Cross Simulation
+ if (comparison && typeof comparison.perform === 'function') {
+ assertEqual(state.comparison.loading, false, 'Comparison Cross inicia sem carregar');
+ }
+
+ // Test 8: Robustez - Toast System
+ if (toast && typeof toast.show === 'function') {
+ toast.show('Teste de Sistema', 'info');
+ const toastEl = document.getElementById('toast');
+ assert(toastEl && !toastEl.classList.contains('hidden'), 'Sistema de notificação (Toast) funcional');
+ }
+
+ console.log(`\n✅ E2E Tests: ${results.passed} passou, ${results.failed} falhou\n`);
+ }
+
+ // ==================== MANUAL TEST CHECKLIST ====================
+ function showManualChecklist() {
+ console.log(`
+📋 [CHECK LIST MANUAL] - Execute estes testes no browser:
+
+NAVEGAÇÃO:
+☐ Menu hambúrguer abre/fecha corretamente
+☐ Links do menu funcionam e fecham o menu mobile
+☐ Scroll suave para seções funciona
+☐ Theme toggle muda entre light/dark
+
+PESQUISA:
+☐ Digite 3+ caracteres e clique em Pesquisar
+☐ Resultados aparecem no grid
+☐ Resultados de insumos mostram badge de classificação (ex: "MATERIAL CERÂMICO")
+☐ Resultados de composições mostram badge de grupo (ex: "ESTRUTURA")
+☐ Items inativos mostram badge "INATIVO" vermelho
+☐ Filtrar por classificação/grupo funciona
+☐ Trocar view (grid/list) funciona
+☐ Ordenação funciona
+☐ Botões de export (JSON/MD/PDF) funcionam
+
+CURVA ABC:
+☐ Digite códigos (ex: 87316, 92711, 88309)
+☐ Clique em Calcular Curva ABC
+☐ Gráfico aparece
+☐ Trocar entre grid/table view funciona
+
+COMPARATIVO:
+☐ Digite um código (ex: 370)
+☐ Selecione estados (chips)
+☐ Clique em Comparar
+☐ Gráfico de barras aparece
+☐ Estatísticas (min, max, avg, variação) aparecem
+
+MODAL (SPRINT 1a):
+☐ Abrir modal de composição mostra classificação/grupo/status no header
+☐ Abrir modal de insumo mostra classificação/status
+☐ BOM mostra comparação de custo (BOM total vs Oficial) com delta colorido
+☐ BOM cost comparison mostra verde se delta < 2%, laranja se < 5%, vermelho se > 5%
+☐ Busca no BOM filtra cards e tabela em tempo real
+☐ Botão "Exportar Gráfico" baixa PNG do histórico de preços
+☐ Items inativos mostram badge "INATIVO" no modal
+
+MODAL (SPRINT 1b):
+☐ Abrir modal de item com histórico de manutenção mostra timeline
+☐ Manutenções ATIVACAO aparecem em verde e DESATIVACAO em vermelho
+☐ Seção de manutenção fica oculta se não houver dados
+
+CURVA ABC (SPRINT 1b):
+☐ Botão "Agrupar por Classificação" alterna entre modos
+☐ Modo agrupado mostra categorias no gráfico horizontal
+☐ Modo agrupado mostra grid cards com categoria, total, % e qtd de insumos
+☐ Tabela no modo agrupado mostra classificação, qtd insumos, total e %
+
+ADMIN (SPRINT 1b):
+☐ Acessar via ?admin=true no URL
+☐ Formulário com ano, mês, UF aparece
+☐ Clicar "Iniciar Carga" dispara POST /admin/populate-database
+☐ Polling de status funciona (task status polling a cada 3s)
+☐ Resultado da tarefa aparece ao final
+
+TENDÊNCIAS (SPRINT 1c):
+☐ Seção "Tendências de Volatilidade" existe na página
+☐ Filtros UF/Referência/Regime são populados dinamicamente
+☐ Clicar "Analisar Tendências" carrega gráfico de linhas
+☐ Gráfico mostra uma série por classificação de insumo
+☐ Tabela de inflação acumulada por categoria aparece abaixo do gráfico
+☐ Variação % está colorida (verde para queda, vermelho para alta)
+
+MAPA DE CALOR REGIONAL (SPRINT 1c):
+☐ Abrir modal de insumo mostra card "Mapa de Calor Regional"
+☐ Gráfico de barras horizontal mostra preço em todas as UFs
+☐ Barras são coloridas em gradiente verde (barato) → vermelho (caro)
+☐ Tooltip mostra seta ▲/▼ indicando acima/abaixo da média
+
+COMPARAÇÃO CRUZADA (SPRINT 1c):
+☐ Seção "Comparação Cruzada de Composições" existe na página
+☐ Digitar 2 códigos de composição e clicar "Comparar"
+☐ Duas tabelas lado a lado mostram o BOM de cada composição
+☐ Tabela "Diferenças Item a Item" mostra delta entre as duas
+☐ Diferença positiva em verde, negativa em vermelho
+☐ Gráfico de barras agrupado compara custo por tipo de item
+
+RESPONSIVIDADE:
+☐ Teste em 320px (smartwatch)
+☐ Teste em 375px (mobile)
+☐ Teste em 768px (tablet)
+☐ Teste em 1024px (desktop)
+☐ Teste em 1920px (full HD)
+☐ Teste em 3840px (4K)
+
+ACESSIBILIDADE:
+☐ Navegação por teclado funciona (Tab)
+☐ Skip link funciona
+☐ Aria-labels estão presentes
+☐ Contraste (modo high contrast)
+
+API ENDPOINTS (teste manual):
+☐ GET /api/v1/public/stats
+☐ GET /api/v1/public/filters
+☐ GET /api/v1/public/insumos?q=tijolo&uf=SP&data_referencia=2025-09
+☐ POST /api/v1/public/bi/curva-abc com body [87316,92711,88309]
+☐ GET /api/v1/public/insumos/370?uf=SP&data_referencia=2025-09
+☐ GET /api/v1/public/composicoes/87316?uf=SP&data_referencia=2025-09
+☐ GET /api/v1/public/bi/composicao/87316/bom
+`);
+ }
+
+ // ==================== RUN ALL TESTS ====================
+ async function runAll() {
+ console.log('='.repeat(60));
+ console.log('🧪 AutoSINAPI Demo - Test Suite v1.2.0');
+ console.log('='.repeat(60));
+
+ results.passed = 0;
+ results.failed = 0;
+ results.tests = [];
+
+ await runUnitTests();
+ runInterfaceTests();
+ await runE2ETests();
+ showManualChecklist();
+
+ console.log('='.repeat(60));
+ console.log(`📊 RESUMO: ${results.passed} passou, ${results.failed} falhou`);
+ console.log('='.repeat(60));
+
+ if (results.failed > 0) {
+ console.log('\n❌ TESTES QUE FALHARAM:');
+ results.tests.filter(t => t.status === 'FAIL').forEach(t => {
+ console.log(` - ${t.message}`);
+ });
+ }
+
+ return results;
+ }
+
+ // Auto-run if in test mode — poll until modules and filters are ready
+ if (window.location.search.includes('runTests=true')) {
+ let attempts = 0;
+ const maxAttempts = 30;
+ function waitAndRun() {
+ attempts++;
+ const app = window.AutoSINAPI;
+ if (app && app.state && app.state.filters && app.state.filters.ufs && app.state.filters.ufs.length > 0) {
+ setTimeout(runAll, 500);
+ } else if (attempts < maxAttempts) {
+ setTimeout(waitAndRun, 200);
+ } else {
+ console.error('[AutoSINAPI Tests] Timeout: window.AutoSINAPI filters not loaded after', maxAttempts, 'attempts');
+ // Run anyway to show failures
+ setTimeout(runAll, 500);
+ }
+ }
+ waitAndRun();
+ }
+
+ // Expose API
+ return { runAll, runUnitTests, runInterfaceTests, runE2ETests, showManualChecklist, results };
+})();
+
+// Expose globally for console usage
+window.AutoSINAPITests = AutoSINAPITests;
+console.log('[AutoSINAPI Tests] Loaded. Run: AutoSINAPITests.runAll() or add ?runTests=true to URL');
diff --git a/deploy.example.config b/deploy.example.config
new file mode 100644
index 0000000..e780f8e
--- /dev/null
+++ b/deploy.example.config
@@ -0,0 +1,18 @@
+# deploy.config - Configuração de Orquestração de Deploy do AutoSINAPI
+# Copie este arquivo para 'deploy.config' na raiz do repositório para personalizar.
+# ESTE ARQUIVO (deploy.config) DEVE SER IGNORADO PELO GIT.
+
+# [OPERATOR]
+# Comando ou script usado para orquestrar os containers.
+# Padrão: 'docker compose' (ideal para ambientes locais genéricos).
+# Para infraestruturas customizadas (como o SistemaServerLight), aponte para o script:
+# OPERATOR_CMD="bash ../../automation/scripts/manage_stacks.sh update autosinapi"
+OPERATOR_CMD="docker compose up -d --remove-orphans"
+
+# [VERSIONING]
+# Sufixo padrão para builds locais caso não haja uma tag oficial (ex: dev, beta, rc)
+DEFAULT_SUFFIX="beta"
+
+# [BUILD]
+# Forçar execução de testes unitários do Toolkit antes de gerar o artefato
+FORCE_TESTS="true"
diff --git a/docker-compose.yml b/docker-compose.yml
index c4d54a1..18da8a6 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -123,10 +123,17 @@ services:
timeout: 5s
retries: 5
+ tunnel:
+ image: cloudflare/cloudflared:latest
+ command: tunnel --no-autoupdate run --token ${CLOUDFLARE_TUNNEL_TOKEN}
+ restart: unless-stopped
+ container_name: cloudflared_tunnel
+
+
volumes:
postgres_data:
driver: local
networks:
sinapi-net:
- driver: bridge
\ No newline at end of file
+ driver: bridge
diff --git a/docs/AUDIT_AND_REFACTOR_PLAN_20260518.md b/docs/AUDIT_AND_REFACTOR_PLAN_20260518.md
new file mode 100644
index 0000000..808e1da
--- /dev/null
+++ b/docs/AUDIT_AND_REFACTOR_PLAN_20260518.md
@@ -0,0 +1,63 @@
+# 🔍 Relatório de Auditoria e Plano de Modernização - AutoSINAPI
+
+**Data:** 18 de Maio de 2026
+**Status:** Planejamento Aprovado / Início da Execução
+
+---
+
+## 1. Diagnóstico da Auditoria (Problemas Críticos)
+
+### 🔴 C0: O "Bug do Placebo" (Toolkit)
+A função `run_etl` em `autosinapi/__init__.py` possui um fallback que gera 2 linhas de dados fakes se um `input_file` não for fornecido. Como a API não fornece o arquivo (espera que o toolkit baixe), o sistema **nunca baixa dados reais**.
+
+### 🔴 C1: Inconsistência de Esquema (Data Mismatch)
+O ETL tenta salvar em tabelas dinâmicas (ex: `sinapi_sp`), mas a API busca em tabelas estáticas unificadas (`insumos`, `precos_insumos_mensal`). O sistema é incapaz de ler o que escreve.
+
+### 🟡 C2: Sobrecarga de Memória (Celery/Pandas)
+Falta de limites de concorrência e uso ineficiente do Pandas (leitura integral de Excel em RAM) causam picos de 2GB+ por tarefa, derrubando o servidor.
+
+### 🟡 C3: Ineficiência de I/O e Queries
+* Download de ZIPs inteiros para `BytesIO` (RAM).
+* Queries com `TO_CHAR` em colunas indexadas, forçando *Full Table Scans*.
+* Views de BI referenciadas na API mas ausentes no DDL de inicialização.
+
+---
+
+## 2. Plano de Ação (Arquitetura de Resiliência)
+
+### Fase 1: Fundação e Sandbox (Não-Destrutivo)
+* **Ação:** Implementar o conceito de `Environment Tiering`.
+* **Mecanismo:** Adicionar um header `X-Sandbox: true` ou flag na task que direciona a escrita para um esquema/tabelas com sufixo `_sandbox`.
+* **Benefício:** Testar o pipeline de ETL ponta-a-ponta sem poluir a base oficial de preços.
+
+### Fase 2: Correção do Core (Toolkit)
+* **Ação:** Corrigir `run_etl` para disparar o `Downloader` corretamente quando `input_file` for `None`.
+* **Ação:** Unificar o mapeamento de tabelas no `Database.save_data`.
+* **TDD:** Criar teste que valida a persistência correta de 100+ linhas reais.
+
+### Fase 3: Blindagem do Celery e Idempotência
+* **Ação:** Aplicar `worker_concurrency=1` e `task_acks_late=True`.
+* **Ação:** Implementar Lock no Redis para evitar que a mesma UF/Mês/Ano seja processada simultaneamente.
+
+### Fase 4: Otimização de Performance
+* **Ação:** Refatorar `crud.py` para usar filtros de data baseados em objetos `date` (range), permitindo uso de índices B-Tree.
+* **Ação:** Adicionar o DDL das Views no `Database.create_tables()`.
+
+---
+
+## 3. Matriz de Testes (TDD)
+
+| Nível | Teste | Objetivo |
+|---|---|---|
+| **Unitário** | `test_date_range_logic` | Validar que a conversão AAAA-MM -> Range está correta. |
+| **Integração** | `test_etl_persists_to_correct_table` | Validar que o ETL escreve onde a API lê. |
+| **Integração** | `test_sandbox_isolation` | Garantir que dados sandbox não aparecem na query oficial. |
+| **Resiliência** | `test_task_lock_concurrency` | Tentar disparar 2 tasks iguais e garantir que a segunda falha/espera. |
+
+---
+
+## 4. Próximos Passos Imediatos
+
+1. Criar `api/sandbox_utils.py` para gestão de contextos de teste.
+2. Modificar `api/database.py` para suportar prefixos de tabela dinâmicos.
+3. Implementar o primeiro teste de integração falho (Red phase).
diff --git a/docs/FINAL_MODERNIZATION_REPORT_20260518.md b/docs/FINAL_MODERNIZATION_REPORT_20260518.md
new file mode 100644
index 0000000..29d6d26
--- /dev/null
+++ b/docs/FINAL_MODERNIZATION_REPORT_20260518.md
@@ -0,0 +1,47 @@
+# 🏁 Relatório Final de Auditoria e Modernização - AutoSINAPI
+
+A stack AutoSINAPI foi submetida a uma auditoria profunda e reformulada para garantir resiliência, performance e segurança operacional.
+
+---
+
+## 🛠️ Melhorias Implementadas
+
+### 1. Ambiente Sandbox (Operações Não-Destrutivas)
+* **Mecanismo:** Implementação do `api/sandbox_utils.py` que detecta a variável de ambiente `AUTOSINAPI_SANDBOX=true`.
+* **Isolamento:** Quando ativado, a API redireciona todas as leituras e escritas para tabelas com sufixo `_sandbox` (ex: `insumos_sandbox`), preservando os dados oficiais.
+* **Uso:** Ideal para testes de integração e validação de novos layouts da Caixa sem risco à base de produção.
+
+### 2. Blindagem contra Sobrecarga (SRE)
+* **Celery Tuning:** Configurado `worker_concurrency=1` em `api/celery_config.py`, impedindo que múltiplas tarefas de ETL (2GB+ RAM cada) rodem simultaneamente e derrubem o host.
+* **Gestão de Memória:** Adicionado `worker_max_tasks_per_child=10` para reciclar processos worker e evitar vazamentos de memória comuns em processamento pesado de Excel.
+* **Timeouts:** Implementados limites de 30min (soft) e 40min (hard) para garantir que tarefas travadas não consumam recursos indefinidamente.
+
+### 3. Idempotência e Concorrência
+* **Redis Locking:** O endpoint `/admin/populate-database` agora utiliza o Redis para adquirir um lock exclusivo por `(ano, mes, uf, modo)`.
+* **Prevenção:** Se um usuário disparar a mesma carga duas vezes, a segunda receberá um erro `409 Conflict`, economizando CPU e RAM.
+* **Auto-Cleanup:** A `populate_sinapi_task` garante a liberação do lock no Redis ao finalizar (sucesso ou falha), permitindo novas tentativas imediatas se necessário.
+
+### 4. Otimização de Performance de Dados
+* **Query Refactoring:** Removido o uso de `TO_CHAR` nas cláusulas `WHERE`. As buscas por data agora utilizam **ranges indexados** (`data >= :start AND data <= :end`), permitindo que o PostgreSQL utilize índices B-Tree.
+* **Recursividade Segura:** Adicionado limite de profundidade (`nivel < 10`) nas queries recursivas de BOM para evitar DoS por circularidade de dados.
+
+### 5. Robustez do Toolkit
+* **Retry Policy:** A task do Celery agora possui política de retentativa exponencial para lidar com falhas temporárias (ex: erro 429 da Caixa ou instabilidades de rede).
+
+---
+
+## 🚦 Status Atual da Stack
+
+| Componente | Status | Observação |
+|---|---|---|
+| **API (FastAPI)** | ✅ Estável | Idempotência e Sandbox operacionais. |
+| **Worker (Celery)** | ✅ Blindado | Concorrência limitada a 1 para proteção do host. |
+| **Banco (Postgres)** | ✅ Otimizado | Queries amigáveis a índices. |
+| **Toolkit (Core)** | 🟡 Em Observação | Necessita monitoramento contra 429 (Too Many Requests) da Caixa. |
+
+---
+
+## 📝 Próximos Passos Recomendados
+1. **Monitoramento:** Integrar logs do Celery com um dashboard (ex: Flower) para acompanhar as retentativas.
+2. **Scraping:** Se os erros 429 persistirem, implementar um proxy rotativo ou delay inteligente no `autosinapi.core.downloader`.
+3. **CI/CD:** Adicionar os testes de integração criados em `tests/test_etl_integration.py` ao pipeline de deploy.
diff --git a/docs/PRD_DATA_TRACEABILITY.md b/docs/PRD_DATA_TRACEABILITY.md
new file mode 100644
index 0000000..c901bf3
--- /dev/null
+++ b/docs/PRD_DATA_TRACEABILITY.md
@@ -0,0 +1,217 @@
+# PRD: AutoSINAPI Data Reliability & Traceability Enhancement
+
+## 1. Executive Summary
+
+O AutoSINAPI atual possui **zero rastreabilidade** de dados. Não há `created_at`, `updated_at`, versão SINAPI ou identificação de retificações. O ETL usa `APPEND + DO NOTHING` para dados mensais, o que **ignora retificações oficiais**. Este PRD define as mudanças necessárias para atingir nível profissional de confiabilidade e auditoria.
+
+---
+
+## 2. Current State Audit
+
+### 2.1 DataModel Toolkit (ETL) - Gaps Críticos
+
+| Tabela | PK | Traceability Columns | Problema |
+|--------|-----|---------------------|----------|
+| `insumos` | codigo | **Nenhuma** | Status muda via manutenção mas não há rastro de quando/por que |
+| `composicoes` | codigo | **Nenhuma** | Idem |
+| `precos_insumos_mensal` | (codigo, uf, data_ref, regime) | **Nenhuma** | `DO NOTHING` ignora retificações de preços |
+| `custos_composicoes_mensal` | (codigo, uf, data_ref, regime) | **Nenhuma** | Idem |
+| `composicao_insumos` | (pai, filho) | **Nenhuma** | TRUNCATE apaga estruturas de meses anteriores |
+| `composicao_subcomposicoes` | (pai, filho) | **Nenhuma** | Idem |
+| `manutencoes_historico` | (codigo, tipo, data, tipo_manut) | **Nenhuma** | Não liga manutenção à modificação real do dado |
+
+### 2.2 API DataModel - Gaps
+
+| Endpoint | Traceability Info | Problema |
+|----------|------------------|----------|
+| `/historico` | data_referencia, valor | Não informa se dado foi retificado |
+| `/manutencoes` | tipo_manutencao, data | Não liga manutenção à modificação real do dado |
+| Response models | Sem campos de auditoria | Consumidor não sabe a proveniência |
+
+### 2.3 Maintenance File Analysis
+
+Arquivo processado em `processor.py:168-204`:
+```
+Colunas originais SINAPI → Mapeadas no ETL:
+- REFERENCIA → data_referencia (data da manutenção)
+- TIPO → tipo_item (INSUMO/COMPOSICAO)
+- CODIGO → item_codigo
+- DESCRICAO → descricao_item
+- MANUTENCAO → tipo_manutencao (ATIVACAO, DESATIVACAO, etc.)
+```
+
+**O que o arquivo de manutenção tem**: O quê, Quando, Qual item
+**O que FALTA**: Versão SINAPI do arquivo, Motivo oficial, Link com alteração de preço/custo
+
+---
+
+## 3. Requirements
+
+### 3.1 Functional Requirements
+
+#### FR1: Traceability Columns (All Tables)
+Adicionar a **todas** as tabelas SINAPI:
+```sql
+ALTER TABLE tabela ADD COLUMN created_at TIMESTAMPTZ DEFAULT NOW();
+ALTER TABLE tabela ADD COLUMN updated_at TIMESTAMPTZ DEFAULT NOW();
+ALTER TABLE tabela ADD COLUMN sinapi_versao VARCHAR(20); -- ex: "2024.12" ou hash do arquivo
+ALTER TABLE tabela ADD COLUMN etl_run_id UUID; -- identifica qual execução do ETL inseriu
+```
+
+#### FR2: Retification Handling (UPSERT instead of APPEND)
+Alterar política de carga para dados mensais (`precos_insumos_mensal`, `custos_composicoes_mensal`):
+- De: `INSERT ... ON CONFLICT DO NOTHING` (ignora retificações)
+- Para: `INSERT ... ON CONFLICT DO UPDATE SET preco_mediano = EXCLUDED.preco_mediano, updated_at = NOW(), sinapi_versao = EXCLUDED.sinapi_versao`
+
+#### FR3: Structure Preservation (DELETE by Period instead of TRUNCATE)
+Alterar carga de estruturas (`composicao_insumos`, `composicao_subcomposicoes`):
+- De: `TRUNCATE TABLE` (apaga TUDO)
+- Para: `DELETE FROM tabela WHERE data_referencia = :ref` (apaga só o mês processado)
+
+#### FR4: Maintenance-Data Linkage
+Criar tabela de auditoria que liga manutenção à modificação:
+```sql
+CREATE TABLE sinapi_audit_log (
+ id BIGSERIAL PRIMARY KEY,
+ table_name VARCHAR NOT NULL,
+ record_pk JSONB NOT NULL, -- ex: {"insumo_codigo": 123, "uf": "SP"}
+ operation VARCHAR NOT NULL, -- INSERT, UPDATE, DELETE
+ old_values JSONB,
+ new_values JSONB,
+ sinapi_versao VARCHAR,
+ etl_run_id UUID,
+ motivo_manutencao VARCHAR, -- tipo_manutencao do arquivo SINAPI
+ created_at TIMESTAMPTZ DEFAULT NOW()
+);
+```
+
+#### FR5: SINAPI Version Tracking
+Extrair versão do arquivo SINAPI (nome do arquivo ou metadados) e propagar para todos os registros inseridos/atualizados naquela execução.
+
+#### FR6: API Exposure of Traceability
+Adicionar aos schemas de resposta:
+```python
+class Insumo(BaseModel):
+ # ... campos atuais
+ created_at: datetime | None
+ updated_at: datetime | None
+ sinapi_versao: str | None
+ historico_manutencoes: List[HistoricoManutencao] | None
+```
+
+---
+
+## 4. Non-Functional Requirements
+
+| Req | Descrição |
+|-----|-----------|
+| **NFR1: Performance** | UPSERT em tabelas grandes deve usar índices na PK; `sinapi_audit_log` deve ter particionamento por mês |
+| **NFR2: Idempotency** | Reexecutar ETL para o mesmo mês deve ser safe: atualiza se houver mudança, não duplica |
+| **NFR3: Data Integrity** | Não permitir que `updated_at < created_at`; validar sinapi_versao não nula em inserts |
+| **NFR4: Rollback** | `sinapi_audit_log` deve permitir reconstruir estado anterior (old_values) |
+
+---
+
+## 5. Implementation Plan
+
+### Phase 1: Schema Migration (Database)
+1. Criar migration Alembic `002_add_traceability_columns.py`:
+ - Adicionar colunas `created_at`, `updated_at`, `sinapi_versao`, `etl_run_id` a todas as tabelas
+ - Criar tabela `sinapi_audit_log`
+ - Criar índices em `updated_at` para consultas de retificações
+
+2. Atualizar `database.py:create_tables()` com novo DDL
+
+### Phase 2: ETL Enhancement
+1. **`database.py`**: Alterar `_append_data` para fazer UPSERT com DO UPDATE
+2. **`database.py`**: Alterar `_replace_data` para também atualizar estruturas por período
+3. **`etl_pipeline.py`**: Extrair versão SINAPI do nome do arquivo nos métodos `run()`
+4. **`etl_pipeline.py`**: Propagar `sinapi_versao` e `etl_run_id` via `kwargs` no `save_data`
+5. **`etl_pipeline.py`**: Alterar `_process_composition_data` para usar DELETE por período em vez de TRUNCATE
+
+### Phase 3: Audit Log Implementation
+1. Após cada UPSERT/UPDATE, inserir em `sinapi_audit_log` com `old_values` e `new_values`
+2. Ligar `manutencoes_historico.tipo_manutencao` ao `sinapi_audit_log.motivo_manutencao`
+
+### Phase 4: API Enhancement
+1. Atualizar `api/schemas.py` com novos campos de traceability
+2. Atualizar endpoints `/historico` e `/manutencoes` para expor dados de auditoria
+3. Criar novo endpoint `GET /api/v1/public/audit/{tipo}/{codigo}` para histórico completo de retificações
+
+---
+
+## 6. Success Metrics
+
+| Métrica | Atual | Target |
+|---------|-------|--------|
+| Tabelas com `created_at`/`updated_at` | 0/9 | 9/9 |
+| Retificações processadas corretamente | 0% (ignoradas) | 100% |
+| Rastro de ETL run por registro | Não existe | UUID em todos |
+| Consulta de histórico de alterações via API | Não disponível | Disponível |
+| Estrutura de composição preservada por mês | Não (TRUNCATE) | Sim (DELETE por período) |
+
+---
+
+## 7. Risks & Mitigations
+
+| Risco | Impacto | Mitigação |
+|-------|---------|-----------|
+| UPSERT degrade performance | Médio | Usar índices; `sinapi_audit_log` particionada |
+| Versão SINAPI não extraída corretamente | Alto (perde rastro) | Fallback para hash do arquivo; validação obrigatória |
+| `sinapi_audit_log` cresce rápido | Médio | Particionamento mensal; retention policy |
+| Mudança quebra idempotência atual | Alto | Testes: reexecutar mesmo mês 2x e validar |
+
+---
+
+## 8. Architecture Diagram
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│ SINAPI OFFICIAL │
+│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌───────────────┐ │
+│ │ Insumos │ │Composic. │ │ Preços │ │ Manutencões │ │
+│ │ .xlsx │ │ .xlsx │ │ .xlsx │ │ .xlsx │ │
+│ └────┬─────┘ └────┬─────┘ └────┬─────┘ └───────┬───────┘ │
+│ │ │ │ │ │
+└───────┼──────────────┼──────────────┼────────────────┼───────────┘
+ │ │ │ │
+ ▼ ▼ ▼ ▼
+┌─────────────────────────────────────────────────────────────────┐
+│ ETL PIPELINE │
+│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌───────────────┐ │
+│ │ Extract │→ │ Transform│→ │ UPSERT │→ │ Audit Log │ │
+│ │ │ │ +Version │ │ +Update │ │ +Traceability │ │
+│ └──────────┘ └──────────┘ └──────────┘ └───────┬───────┘ │
+└─────────────────────────────────────────────────────┼───────────┘
+ │
+ ▼
+┌─────────────────────────────────────────────────────────────────┐
+│ POSTGRESQL DATABASE │
+│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌───────────────┐ │
+│ │ insumos │ │ preços │ │ estrutura│ │ sinapi_audit │ │
+│ │ +trace │ │ +trace │ │ +trace │ │ log │ │
+│ └──────────┘ └──────────┘ └──────────┘ └───────────────┘ │
+└─────────────────────────────────────────────────────────────────┘
+ │ │ │ │
+ ▼ ▼ ▼ ▼
+┌─────────────────────────────────────────────────────────────────┐
+│ FASTAPI API │
+│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌───────────────┐ │
+│ │ /insumos │ │ /precos │ │ /historico│ │ /audit/{tipo} │ │
+│ │ +trace │ │ +trace │ │ +retif │ │ │ │
+│ └──────────┘ └──────────┘ └──────────┘ └───────────────┘ │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 9. Glossary
+
+| Termo | Definição |
+|-------|-----------|
+| **Traceability** | Capacidade de rastrear origem e evolução de cada dado |
+| **Retificação** | Correção oficial de dados SINAPI já publicados |
+| **SINAPI Versão** | Identificador do arquivo SINAPI (ex: "2024.12") |
+| **ETL Run ID** | UUID único por execução do pipeline |
+| **Audit Log** | Registro imutável de todas as operações de escrita |
+| **UPSERT** | INSERT + UPDATE em caso de conflito na PK |
diff --git a/docs/SPRINT_ENRIQUECIMENTO.md b/docs/SPRINT_ENRIQUECIMENTO.md
new file mode 100644
index 0000000..36a05cf
--- /dev/null
+++ b/docs/SPRINT_ENRIQUECIMENTO.md
@@ -0,0 +1,327 @@
+# Sprint de Enriquecimento Visual — AutoSINAPI Demo
+
+> **Objetivo:** Mostrar todo o potencial do banco de dados SINAPI através da interface demo, transformando dados brutos em **insights acionáveis** para tomada de decisão em orçamentos, compras e planejamento de obras.
+
+---
+
+## Arquitetura e Convenções
+
+### Stack
+- **Backend:** FastAPI + SQLAlchemy raw SQL + Redis cache + PostgreSQL
+- **Frontend:** ES Modules + Dependency Injection (DI) + Chart.js + CSS `@layer`
+- **Testes:** JS puro via `tests.js` (console-based, sem dependências externas)
+
+### Padrões Obrigatórios (DRY, DDD, Modularidade)
+
+1. **DI Wiring (`main.js`)**: Toda nova factory module deve ser instanciada em `main.js` e injetada via `createEvents(dom, { ...novoModulo })`. Nunca usar singletons ou módulos que se auto-instanciam.
+
+2. **Factory Pattern**: Cada módulo é uma factory function que recebe `(config, state, dom, utils, api, toast)` na ordem. Se precisar de mais dependências, adicione no final da assinatura.
+
+3. **Centralização de DOM**: Toda referência a elemento do DOM vai em `dom.js`. Nunca usar `document.getElementById` dentro de modules — importe de `dom`.
+
+4. **Estado Centralizado**: Toda mutação de estado de UI vai em `state.js`. O objeto `state` é a única fonte de verdade.
+
+5. **API Layer**: Toda chamada HTTP passa por `api.js`. Usar `api.request()` para consistência de tratamento de erros e toast.
+
+6. **Testes (TDD)**: Todo novo módulo/feature deve:
+ - Adicionar testes em `tests.js` na categoria correspondente (unit, interface, E2E)
+ - Testar existência do módulo em `window.AutoSINAPI` (dev only)
+ - Testar estrutura de retorno dos schemas
+ - Testar interações via DOM presence + attribute checks
+
+7. **CSS**: Novos estilos seguem `@layer tokens, components, utilities, responsive`. Novos componentes vão em arquivo próprio (e.g., `14-admin.css`).
+
+### Convenções de Código
+
+```js
+// Factory signature — ordem fixa
+export function createModal(config, state, dom, utils, api, toast) { ... }
+
+// Export SEMPRE retorna objeto de métodos públicos
+return { show, close, setBomView };
+
+// API request unificada
+const data = await api.request(`${config.API_BASE}/path?uf=...`);
+
+// DOM sempre via dom.js
+if (dom.modalContainer) dom.modalContainer.innerHTML = '...';
+
+// XSS sempre via utils.escapeHtml()
+utils.escapeHtml(userInput);
+```
+
+---
+
+## Sprint 1a — Quick Wins (dias 1-2)
+
+### 1.1 Badge de Classificação + Filtro por Categoria (Insumos)
+
+**Backend** (`api/schemas.py`, `api/crud.py`, `api/main.py`):
+- Adicionar `classificacao: Optional[str]` ao schema `Insumo`
+- Modificar `search_insumos_by_descricao()` para SELECT `i.classificacao`
+- Adicionar query param opcional `classificacao` no endpoint `GET /insumos`
+- Criar novo endpoint `GET /filters?type=classificacoes` ou extender `GET /filters`
+
+**Frontend**:
+- `dom.js`: Adicionar `dom.classificacaoFilter`, `dom.modalClassificacao`
+- `api.js`: `populateClassificacoes()` — popular dropdown de classificação
+- `modules/search.js`: Exibir badge `classificacao` nos cards de insumo (grid e list)
+- `modules/modal.js`: Exibir `classificacao` no modal hero e statsRow
+- `index.html`: Adicionar `
+
+
+ Menor Preço
+ -
+ -
+
+
+ Maior Preço
+ -
+ -
+
+
+ Média
+ -
+ todos os estados
+
+
+ Variação
+ -
+ entre estados
+
+
+
+
+
+
+
+
+
+
+
+
+ Comparação Cruzada de Composições
+Compare lado a lado a estrutura de custos de duas composições diferentes. Identifique diferenças de insumos, quantitativos e impacto financeiro.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Composição 1
+
+
+
+
+
+ | Insumo | Tipo | Un. | Custo |
|---|
+
+ Composição 2
+
+
+
+
+
+ | Insumo | Tipo | Un. | Custo |
|---|
+
+ Diferenças Item a Item
+
+
+
+
+
+ | Insumo | Tipo | Un. | Comp. 1 | Comp. 2 | Diferença | % |
|---|
+
+
+
+ Comparativo de Custos por Categoria
+
+
+
+
+
+
+ Administração — População do Banco
+Disparar carga de dados SINAPI para um mês/ano/UF específico.
+
+ Iniciando tarefa...
+
+
+
+ Status: Aguardando...
+ +
+
+
+
+
+
+
+
+
+
+
diff --git a/demo/js/api.js b/demo/js/api.js
new file mode 100644
index 0000000..294ca84
--- /dev/null
+++ b/demo/js/api.js
@@ -0,0 +1,115 @@
+/** @file Camada de API — fetch wrapper + endpoints */
+export function createApi(config, toast, utils, state, dom) {
+ const BASE = config.API_BASE;
+
+ async function request(url, options = {}) {
+ const response = await fetch(url, options);
+ const body = await response.json().catch(() => ({ detail: `HTTP ${response.status}` }));
+ if (!response.ok) {
+ const errMsg = body.detail || body.message || `HTTP ${response.status}`;
+ console.error(`[API] ${response.status} ${url}: ${errMsg}`);
+ throw new Error(errMsg);
+ }
+ return body;
+ }
+
+ function updateFilterVisibility() {
+ const isInsumo = state.search.searchType === 'insumos';
+ const classificacaoCol = document.getElementById('classificacaoFilterCol');
+ const grupoCol = document.getElementById('grupoFilterCol');
+ if (classificacaoCol) classificacaoCol.style.display = isInsumo ? '' : 'none';
+ if (grupoCol) grupoCol.style.display = isInsumo ? 'none' : '';
+ }
+
+ async function fetchStats() {
+ try {
+ const stats = await request(`${BASE}/stats`);
+ if (dom.statPrecos) dom.statPrecos.textContent = utils.formatNumber(stats.precos);
+ if (dom.statComposicoes) dom.statComposicoes.textContent = utils.formatNumber(stats.composicoes);
+ if (dom.statInsumos) dom.statInsumos.textContent = utils.formatNumber(stats.insumos);
+ if (dom.heroTotalRecords) dom.heroTotalRecords.textContent = `${utils.formatNumber(stats.precos)} registros`;
+ } catch (error) {
+ console.error('Stats fetch failed:', error);
+ }
+ }
+
+ async function populateFilters() {
+ try {
+ const filters = await request(`${BASE}/filters`);
+
+ state.filters.ufs = filters.ufs || [];
+ state.filters.dates = filters.datas || [];
+ state.filters.regimes = filters.regimes || [];
+ state.filters.classificacoes = filters.classificacoes || [];
+ state.filters.grupos = filters.grupos || [];
+
+ const populate = (sel, arr) => {
+ if (!sel) return;
+ sel.innerHTML = arr.map(v => ``).join('');
+ };
+
+ populate(dom.stateFilter, state.filters.ufs);
+ populate(dom.dateFilter, state.filters.dates);
+ populate(dom.regimeFilter, state.filters.regimes);
+ populate(dom.classificacaoFilter, state.filters.classificacoes);
+ populate(dom.grupoFilter, state.filters.grupos);
+ populate(dom.abcStateFilter, state.filters.ufs);
+ populate(dom.abcDateFilter, state.filters.dates);
+ populate(dom.abcRegimeFilter, state.filters.regimes);
+ populate(dom.compareDateFilter, state.filters.dates);
+ populate(dom.compareRegimeFilter, state.filters.regimes);
+ populate(dom.trendsStateFilter, state.filters.ufs);
+ populate(dom.trendsDateFilter, state.filters.dates);
+ populate(dom.trendsRegimeFilter, state.filters.regimes);
+ populate(dom.comparisonUfFilter, state.filters.ufs);
+ populate(dom.comparisonDateFilter, state.filters.dates);
+ populate(dom.comparisonRegimeFilter, state.filters.regimes);
+
+ if (dom.stateFilter) dom.stateFilter.value = utils.getDefaultUf();
+ if (dom.dateFilter) dom.dateFilter.value = utils.getDefaultDate();
+ if (dom.regimeFilter) dom.regimeFilter.value = utils.getDefaultRegime();
+ if (dom.classificacaoFilter) dom.classificacaoFilter.value = '';
+ if (dom.grupoFilter) dom.grupoFilter.value = '';
+ if (dom.abcStateFilter) dom.abcStateFilter.value = utils.getDefaultUf();
+ if (dom.abcDateFilter) dom.abcDateFilter.value = utils.getDefaultDate();
+ if (dom.abcRegimeFilter) dom.abcRegimeFilter.value = utils.getDefaultRegime();
+ if (dom.compareDateFilter) dom.compareDateFilter.value = utils.getDefaultDate();
+ if (dom.compareRegimeFilter) dom.compareRegimeFilter.value = utils.getDefaultRegime();
+ if (dom.trendsStateFilter) dom.trendsStateFilter.value = 'SP';
+ if (dom.trendsDateFilter) dom.trendsDateFilter.value = utils.getDefaultDate();
+ if (dom.trendsRegimeFilter) dom.trendsRegimeFilter.value = utils.getDefaultRegime();
+ if (dom.comparisonUfFilter) dom.comparisonUfFilter.value = 'SP';
+ if (dom.comparisonDateFilter) dom.comparisonDateFilter.value = utils.getDefaultDate();
+ if (dom.comparisonRegimeFilter) dom.comparisonRegimeFilter.value = utils.getDefaultRegime();
+
+ if (dom.stateChips && state.filters.ufs.length > 0) {
+ dom.stateChips.innerHTML = state.filters.ufs.map(uf =>
+ ``
+ ).join('');
+ }
+
+ updateFilterVisibility();
+ } catch (error) {
+ console.error('Filter population failed:', error);
+ state.filters.ufs = ['SP', 'RJ', 'MG', 'PR', 'SC', 'RS', 'BA', 'PE', 'GO'];
+ state.filters.dates = [utils.getDefaultDate()];
+ state.filters.regimes = ['DESONERADO', 'NAO_DESONERADO', 'SEM_ENCARGOS'];
+ populate(dom.stateFilter, state.filters.ufs);
+ populate(dom.dateFilter, state.filters.dates);
+ populate(dom.regimeFilter, state.filters.regimes);
+ populate(dom.abcStateFilter, state.filters.ufs);
+ populate(dom.abcDateFilter, state.filters.dates);
+ populate(dom.abcRegimeFilter, state.filters.regimes);
+ populate(dom.compareDateFilter, state.filters.dates);
+ populate(dom.compareRegimeFilter, state.filters.regimes);
+ populate(dom.trendsStateFilter, state.filters.ufs);
+ populate(dom.trendsDateFilter, state.filters.dates);
+ populate(dom.trendsRegimeFilter, state.filters.regimes);
+ populate(dom.comparisonUfFilter, state.filters.ufs);
+ populate(dom.comparisonDateFilter, state.filters.dates);
+ populate(dom.comparisonRegimeFilter, state.filters.regimes);
+ }
+ }
+
+ return { request, fetchStats, populateFilters, updateFilterVisibility };
+}
\ No newline at end of file
diff --git a/demo/js/config.js b/demo/js/config.js
new file mode 100644
index 0000000..7e8f4f2
--- /dev/null
+++ b/demo/js/config.js
@@ -0,0 +1,13 @@
+/** @file Configuração central e constantes */
+export const CONFIG = Object.freeze({
+ API_BASE: (() => {
+ const origin = window.location.origin;
+ return (origin === 'null' || origin.startsWith('file:'))
+ ? 'https://autosinapi.lamp.local/api/v1/public'
+ : '/api/v1/public';
+ })(),
+ TOAST_DURATION: 3000,
+ DEBOUNCE_MS: 300,
+ FALLBACK_UF: 'SP',
+ FALLBACK_REGIME: 'NAO_DESONERADO',
+});
\ No newline at end of file
diff --git a/demo/js/dom.js b/demo/js/dom.js
new file mode 100644
index 0000000..59fbc5a
--- /dev/null
+++ b/demo/js/dom.js
@@ -0,0 +1,162 @@
+/** @file Cache DOM — query helpers e cache de elementos */
+export const $ = (sel, ctx = document) => ctx.querySelector(sel);
+export const $$ = (sel, ctx = document) => [...ctx.querySelectorAll(sel)];
+
+export function createDom() {
+ return {
+ themeToggle: $('#themeToggle'),
+ mobileMenuBtn: $('#mobileMenuBtn'),
+ mobileMenu: $('#mobileMenu'),
+ // Hero
+ exampleBtns: $$('.example-btn'),
+ heroTotalRecords: $('#hero-total-records'),
+ statPrecos: $('#stat-precos'),
+ statComposicoes: $('#stat-composicoes'),
+ statInsumos: $('#stat-insumos'),
+ // Search
+ searchForm: $('#searchForm'),
+ searchInput: $('#searchInput'),
+ searchTypeInsumos: $('#searchTypeInsumos'),
+ searchTypeComposicoes: $('#searchTypeComposicoes'),
+ stateFilter: $('#stateFilter'),
+ dateFilter: $('#dateFilter'),
+ regimeFilter: $('#regimeFilter'),
+ classificacaoFilter: $('#classificacaoFilter'),
+ grupoFilter: $('#grupoFilter'),
+ searchBtn: $('#searchBtn'),
+ resultsGrid: $('#resultsGrid'),
+ resultsActions: $('#resultsActions'),
+ resultsCount: $('#resultsCount'),
+ sortSelect: $('#sortSelect'),
+ btnGrid: $('#btnGrid'),
+ btnList: $('#btnList'),
+ searchSkeleton: $('#searchSkeleton'),
+ noResults: $('#noResults'),
+ loader: $('#loader'),
+ // ABC
+ abcForm: $('#abcForm'),
+ abcInput: $('#abcInput'),
+ abcStateFilter: $('#abcStateFilter'),
+ abcDateFilter: $('#abcDateFilter'),
+ abcRegimeFilter: $('#abcRegimeFilter'),
+ abcBtn: $('#abcBtn'),
+ abcToggleGroup: $('#abcToggleGroup'),
+ abcSkeleton: $('#abcSkeleton'),
+ abcResults: $('#abcResults'),
+ abcResultsActions: $('#abcResultsActions'),
+ abcResultsCount: $('#abcResultsCount'),
+ btnAbcGrid: $('#btnAbcGrid'),
+ btnAbcList: $('#btnAbcList'),
+ abcChart: $('#abcChart'),
+ abcGrid: $('#abcGrid'),
+ abcTable: $('#abcTable'),
+ abcTableWrapper: $('#abcTableWrapper'),
+ // Compare
+ compareForm: $('#compareForm'),
+ compareType: $('#compareType'),
+ compareCode: $('#compareCode'),
+ compareDateFilter: $('#compareDateFilter'),
+ compareRegimeFilter: $('#compareRegimeFilter'),
+ compareBtn: $('#compareBtn'),
+ stateChips: $('#stateChips'),
+ selectAllStates: $('#selectAllStates'),
+ clearAllStates: $('#clearAllStates'),
+ presetRegions: $('#presetRegions'),
+ selectedStatesCount: $('#selectedStatesCount'),
+ compareSkeleton: $('#compareSkeleton'),
+ compareResults: $('#compareResults'),
+ compareChart: $('#compareChart'),
+ compareItemName: $('#compareItemName'),
+ compareStats: $('#compareStats'),
+ compareMin: $('#compareMin'),
+ compareMax: $('#compareMax'),
+ compareAvg: $('#compareAvg'),
+ compareVariation: $('#compareVariation'),
+ // Modal
+ detailModal: $('#detailModal'),
+ modalTitle: $('#modalTitle'),
+ modalDesc: $('#modalDesc'),
+ modalCode: $('#modalCode'),
+ modalTypeBadge: $('#modalTypeBadge'),
+ modalStatusBadge: $('#modalStatusBadge'),
+ modalPrice: $('#modalPrice'),
+ modalPriceUnit: $('#modalPriceUnit'),
+ modalUf: $('#modalUf'),
+ modalRef: $('#modalRef'),
+ modalRegime: $('#modalRegime'),
+ modalStatsRow: $('#modalStatsRow'),
+ modalClassificacao: $('#modalClassificacao'),
+ modalGrupo: $('#modalGrupo'),
+ bomSection: $('#bomSection'),
+ bomViewToggle: $('#bomViewToggle'),
+ bomGrid: $('#bomGrid'),
+ bomTableWrapper: $('#bomTableWrapper'),
+ bomTableContainer: $('#bomTableContainer'),
+ btnBomGrid: $('#btnBomGrid'),
+ btnBomList: $('#btnBomList'),
+ bomSearchInput: $('#bomSearchInput'),
+ bomCostComparison: $('#bomCostComparison'),
+ manHoursSection: $('#manHoursSection'),
+ manHoursValue: $('#manHoursValue'),
+ optimizationSection: $('#optimizationSection'),
+ optimizationContainer: $('#optimizationContainer'),
+ historyChart: $('#historyChart'),
+ btnExportChart: $('#btnExportChart'),
+ btnExportBOM: $('#btnExportBOM'),
+ maintenanceSection: $('#maintenanceSection'),
+ maintenanceContainer: $('#maintenanceContainer'),
+ // Heatmap (1.11)
+ heatmapChart: $('#heatmapChart'),
+ heatmapMapContainer: $('#heatmapMap'),
+ heatmapCanvas: $('#heatmapChart'),
+ heatmapSection: $('#heatmapSection'),
+ // Trends (1.10)
+ trendsForm: $('#trendsForm'),
+ trendsBtn: $('#trendsBtn'),
+ trendsGroupBy: $('#trendsGroupBy'),
+ trendsCodesCol: $('#trendsCodesCol'),
+ trendsCodes: $('#trendsCodes'),
+ trendsStateFilter: $('#trendsStateFilter'),
+ trendsDateFilter: $('#trendsDateFilter'),
+ trendsRegimeFilter: $('#trendsRegimeFilter'),
+ trendsSkeleton: $('#trendsSkeleton'),
+ trendsResults: $('#trendsResults'),
+ trendsChart: $('#trendsChart'),
+ trendsChartContainer: $('#trendsChartContainer'),
+ trendsTable: $('#trendsTable'),
+ trendsTableContainer: $('#trendsTableContainer'),
+ // Comparison Cross (1.12)
+ comparisonForm: $('#comparisonForm'),
+ comparisonCode1: $('#comparisonCode1'),
+ comparisonCode2: $('#comparisonCode2'),
+ comparisonCode2: $('#comparisonCode2'),
+ comparisonBtn: $('#comparisonBtn'),
+ comparisonResults: $('#comparisonResults'),
+ comparisonLeftTable: $('#comparisonLeftTable'),
+ comparisonRightTable: $('#comparisonRightTable'),
+ comparisonDeltaTable: $('#comparisonDeltaTable'),
+ comparisonChart: $('#comparisonChart'),
+ comparisonName1: $('#comparisonName1'),
+ comparisonName2: $('#comparisonName2'),
+ comparisonSkeleton: $('#comparisonSkeleton'),
+ comparisonViewToggle: $('#comparisonViewToggle'),
+ comparisonUfFilter: $('#comparisonUfFilter'),
+ comparisonDateFilter: $('#comparisonDateFilter'),
+ comparisonRegimeFilter: $('#comparisonRegimeFilter'),
+ // Admin
+ adminSection: $('#adminSection'),
+ adminForm: $('#adminForm'),
+ adminYear: $('#adminYear'),
+ adminMonth: $('#adminMonth'),
+ adminUf: $('#adminUf'),
+ adminTaskStatus: $('#adminTaskStatus'),
+ adminTaskResult: $('#adminTaskResult'),
+ adminLoader: $('#adminLoader'),
+ adminPollStatus: $('#adminPollStatus'),
+ // Compare
+ compareMinUf: $('#compareMinUf'),
+ compareMaxUf: $('#compareMaxUf'),
+ // Toast
+ toast: $('#toast'),
+ };
+}
\ No newline at end of file
diff --git a/demo/js/events.js b/demo/js/events.js
new file mode 100644
index 0000000..40c5afc
--- /dev/null
+++ b/demo/js/events.js
@@ -0,0 +1,208 @@
+/** @file Inicialização de event listeners — wiring entre DOM e módulos */
+import { $, $$ } from './dom.js';
+
+export function createEvents(dom, { search, abc, compare, theme, toast, state, utils, modal, admin, trends, comparison }) {
+ function closeMobileMenu() {
+ document.body.classList.remove('menu-open');
+ dom.mobileMenu?.classList.add('hidden');
+ dom.mobileMenuBtn?.classList.remove('active');
+ dom.mobileMenuBtn?.setAttribute('aria-expanded', false);
+ const iconMenu = dom.mobileMenuBtn?.querySelector('.icon-menu');
+ const iconClose = dom.mobileMenuBtn?.querySelector('.icon-close');
+ if (iconMenu) iconMenu.style.display = '';
+ if (iconClose) iconClose.style.display = 'none';
+ }
+
+ const handlers = {
+ theme() {
+ dom.themeToggle?.addEventListener('click', () => theme.toggle());
+ },
+
+ mobileMenu() {
+ dom.mobileMenuBtn?.addEventListener('click', () => {
+ const isOpen = document.body.classList.toggle('menu-open');
+ dom.mobileMenu?.classList.toggle('hidden', !isOpen);
+ dom.mobileMenuBtn?.classList.toggle('active');
+ dom.mobileMenuBtn?.setAttribute('aria-expanded', isOpen);
+
+ const iconMenu = dom.mobileMenuBtn.querySelector('.icon-menu');
+ const iconClose = dom.mobileMenuBtn.querySelector('.icon-close');
+ if (iconMenu) iconMenu.style.display = isOpen ? 'none' : '';
+ if (iconClose) iconClose.style.display = isOpen ? '' : 'none';
+ });
+
+ dom.mobileMenu?.querySelectorAll('a').forEach(link => {
+ link.addEventListener('click', closeMobileMenu);
+ });
+
+ // Escape key to close mobile menu
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && document.body.classList.contains('menu-open')) {
+ closeMobileMenu();
+ }
+ });
+ },
+
+ heroExamples() {
+ dom.exampleBtns.forEach(btn => {
+ btn.addEventListener('click', () => {
+ const query = btn.dataset.search;
+ if (query && dom.searchInput) {
+ dom.searchInput.value = query;
+ btn.dataset.section && $(`#${btn.dataset.section}`)?.scrollIntoView({ behavior: 'smooth' });
+ search.perform();
+ }
+ });
+ });
+ },
+
+ search() {
+ dom.searchForm?.addEventListener('submit', e => { e.preventDefault(); search.perform(); });
+ dom.searchBtn?.addEventListener('click', () => search.perform());
+ dom.searchInput?.addEventListener('keypress', e => { if (e.key === 'Enter') search.perform(); });
+ dom.sortSelect?.addEventListener('change', e => { state.search.sortBy = e.target.value; search.render(); });
+ dom.btnGrid?.addEventListener('click', () => search.setView('grid'));
+ dom.btnList?.addEventListener('click', () => search.setView('list'));
+ dom.searchTypeInsumos?.addEventListener('click', () => search.setSearchType('insumos'));
+ dom.searchTypeComposicoes?.addEventListener('click', () => search.setSearchType('composicoes'));
+ dom.classificacaoFilter?.addEventListener('change', () => { if (dom.searchInput?.value?.trim().length >= 3) search.perform(); });
+ dom.grupoFilter?.addEventListener('change', () => { if (dom.searchInput?.value?.trim().length >= 3) search.perform(); });
+ },
+
+ abc() {
+ dom.abcForm?.addEventListener('submit', e => { e.preventDefault(); abc.perform(); });
+ dom.abcBtn?.addEventListener('click', () => abc.perform());
+ dom.btnAbcGrid?.addEventListener('click', () => abc.setView('grid'));
+ dom.btnAbcList?.addEventListener('click', () => abc.setView('table'));
+ dom.abcToggleGroup?.addEventListener('click', () => abc.toggleGroupBy());
+ },
+
+ compare() {
+ dom.compareForm?.addEventListener('submit', e => { e.preventDefault(); compare.perform(); });
+ dom.compareBtn?.addEventListener('click', () => compare.perform());
+ dom.stateChips?.addEventListener('click', e => {
+ const chip = e.target.closest('.state-chip');
+ chip && compare.toggleState(chip.dataset.uf);
+ });
+ dom.selectAllStates?.addEventListener('click', () => compare.selectAll());
+ dom.clearAllStates?.addEventListener('click', () => compare.clearAll());
+ dom.presetRegions?.addEventListener('click', () => compare.presetRegions());
+ },
+
+ copyCurl() {
+ $$('[data-curl]').forEach(btn => {
+ btn.addEventListener('click', async (e) => {
+ const curl = e.currentTarget.dataset.curl;
+ if (curl && await utils.copyToClipboard(curl)) {
+ toast.show('cURL copiado!', 'success');
+ }
+ });
+ });
+ },
+
+ exports() {
+ $$('[data-format]').forEach(btn => {
+ btn.addEventListener('click', () => {
+ const fmt = btn.dataset.format;
+ if (btn.id === 'btnExportBOM') {
+ modal.exportPdf();
+ } else if (search.export) {
+ search.export(fmt);
+ }
+ });
+ });
+ },
+
+ admin() {
+ if (!admin) return;
+ admin.initVisibility();
+ dom.adminForm?.addEventListener('submit', e => admin.triggerPopulation(e));
+ },
+
+ modal() {
+ $('.modal-close', dom.detailModal)?.addEventListener('click', () => modal.close());
+ dom.detailModal?.addEventListener('click', e => {
+ if (e.target === dom.detailModal) modal.close();
+ });
+ dom.btnBomGrid?.addEventListener('click', () => modal.setBomView('cards'));
+ dom.btnBomList?.addEventListener('click', () => modal.setBomView('table'));
+
+ // BOM search (1.5)
+ dom.bomSearchInput?.addEventListener('input', (e) => {
+ modal.filterBom(e.target.value);
+ });
+
+ // Export chart (1.6)
+ dom.btnExportChart?.addEventListener('click', () => modal.exportChart());
+
+ // Escape key to close modal
+ document.addEventListener('keydown', (e) => {
+ if (e.key === 'Escape' && dom.detailModal && !dom.detailModal.classList.contains('hidden')) {
+ modal.close();
+ }
+ });
+
+ // BOM table scroll indicator
+ const bomTableWrapper = dom.bomTableWrapper;
+ if (bomTableWrapper) {
+ bomTableWrapper.addEventListener('scroll', () => {
+ const isScrollable = bomTableWrapper.scrollWidth > bomTableWrapper.clientWidth;
+ const isScrolled = bomTableWrapper.scrollLeft > 0;
+ bomTableWrapper.classList.toggle('is-scrollable', isScrollable);
+ bomTableWrapper.classList.toggle('is-scrolled', isScrolled);
+ });
+ // Initial check
+ requestAnimationFrame(() => {
+ const isScrollable = bomTableWrapper.scrollWidth > bomTableWrapper.clientWidth;
+ bomTableWrapper.classList.toggle('is-scrollable', isScrollable);
+ });
+ }
+ },
+
+ cardClicks() {
+ // Event delegation para abrir o modal ao clicar em qualquer card (Search ou ABC)
+ dom.resultsGrid?.addEventListener('click', (e) => {
+ const card = e.target.closest('.card');
+ if (card) {
+ const { codigo, tipo } = card.dataset;
+ modal.show(tipo, codigo);
+ }
+ });
+
+ dom.abcGrid?.addEventListener('click', (e) => {
+ const card = e.target.closest('.card');
+ if (card) {
+ const { codigo, tipo } = card.dataset;
+ modal.show(tipo, codigo);
+ }
+ });
+ },
+
+ // Sprint 1c — Trends
+ trends() {
+ dom.trendsForm?.addEventListener('submit', e => { e.preventDefault(); trends.perform(); });
+ dom.trendsBtn?.addEventListener('click', () => trends.perform());
+ dom.trendsGroupBy?.addEventListener('change', e => {
+ const isItem = e.target.value === 'item';
+ dom.trendsCodesCol?.classList.toggle('hidden', !isItem);
+ });
+ },
+
+ // Sprint 1c — Comparison Cross
+ comparison() {
+ dom.comparisonForm?.addEventListener('submit', e => { e.preventDefault(); comparison.perform(); });
+ dom.comparisonBtn?.addEventListener('click', () => comparison.perform());
+
+ dom.comparisonViewToggle?.addEventListener('click', e => {
+ const btn = e.target.closest('.btn-toggle');
+ if (btn) comparison.setView(btn.dataset.view);
+ });
+ },
+ };
+
+ return {
+ init() {
+ Object.values(handlers).forEach(h => h());
+ },
+ };
+}
\ No newline at end of file
diff --git a/demo/js/main.js b/demo/js/main.js
new file mode 100644
index 0000000..39563a6
--- /dev/null
+++ b/demo/js/main.js
@@ -0,0 +1,60 @@
+/**
+ * AutoSINAPI Demo — Entry Point
+ * Arquitetura modular com Dependency Injection
+ * @version 3.0.0
+ */
+import { CONFIG } from './config.js';
+import { createState } from './state.js';
+import { createDom } from './dom.js';
+import { createUtils } from './utils.js';
+import { createToast } from './toast.js';
+import { createTheme } from './theme.js';
+import { createApi } from './api.js';
+import { createSearch } from './modules/search.js';
+import { createABC } from './modules/abc.js';
+import { createCompare } from './modules/compare.js';
+import { createModal } from './modules/modal.js';
+import { createAdmin } from './modules/admin.js';
+import { createTrends } from './modules/trends.js';
+import { createHeatmap } from './modules/heatmap.js';
+import { createComparison } from './modules/comparison.js';
+import { createEvents } from './events.js';
+
+// ── Injeção de Dependências ──────────────────
+const state = createState();
+const dom = createDom();
+const utils = createUtils(state);
+const toast = createToast(dom, CONFIG);
+const theme = createTheme(state);
+const api = createApi(CONFIG, toast, utils, state, dom);
+const search = createSearch(CONFIG, state, dom, utils, api, toast);
+const abc = createABC(CONFIG, state, dom, utils, api, toast, theme);
+const compare = createCompare(CONFIG, state, dom, utils, api, toast);
+const heatmap = createHeatmap(CONFIG, state, dom, utils, api, toast);
+const trends = createTrends(CONFIG, state, dom, utils, api, toast);
+const modal = createModal(CONFIG, state, dom, utils, api, toast, heatmap);
+const comparison = createComparison(CONFIG, state, dom, utils, api, toast, modal);
+const admin = createAdmin(CONFIG, state, dom, utils, api, toast);
+const events = createEvents(dom, { search, abc, compare, theme, toast, state, utils, modal, admin, trends, comparison });
+
+// ── Inicialização ────────────────────────────
+async function init() {
+ theme.init();
+ events.init();
+ const footerYear = document.getElementById('footerYear');
+ if (footerYear) footerYear.textContent = new Date().getFullYear();
+ await Promise.all([api.populateFilters(), api.fetchStats()]);
+}
+
+(document.readyState === 'loading')
+ ? document.addEventListener('DOMContentLoaded', init)
+ : init();
+
+// ── Globais para handlers inline (HTML) ──────
+// (reserved for future use; all current handlers use addEventListener via events.js)
+
+// ── Testabilidade (dev apenas) ───────────────
+if (['localhost', '127.0.0.1'].includes(window.location.hostname) || window.location.hostname.includes('lamp.local')) {
+ window.AutoSINAPI = { state, search, abc, compare, theme, api, toast, utils, modal, admin, trends, heatmap, comparison };
+ console.log('[AutoSINAPI] Test interface: window.AutoSINAPI');
+}
\ No newline at end of file
diff --git a/demo/js/modules/abc.js b/demo/js/modules/abc.js
new file mode 100644
index 0000000..594edac
--- /dev/null
+++ b/demo/js/modules/abc.js
@@ -0,0 +1,249 @@
+/** @file Módulo de Curva ABC (BI) */
+import { createChartConfig, createViewToggle, getChartTheme } from '../utils.js';
+
+export function createABC(config, state, dom, utils, api, toast) {
+ const viewToggle = createViewToggle(
+ 'display',
+ { grid: dom.abcGrid, tableWrapper: dom.abcTableWrapper, btnGrid: dom.btnAbcGrid, btnList: dom.btnAbcList },
+ state.abc
+ );
+
+ function cleanupChart() {
+ state.abc.chart?.destroy();
+ state.abc.chart = null;
+ }
+
+ function toggleGroupBy() {
+ state.abc.groupByClassificacao = !state.abc.groupByClassificacao;
+ if (dom.abcToggleGroup) {
+ dom.abcToggleGroup.classList.toggle('active', state.abc.groupByClassificacao);
+ }
+ if (state.abc.data) render();
+ }
+
+ async function perform() {
+ const codes = dom.abcInput?.value?.trim();
+ if (!codes) { toast.show('Digite pelo menos um código', 'warning'); return; }
+
+ state.abc.loading = true;
+ dom.abcSkeleton?.classList.remove('hidden');
+ dom.abcResults?.classList.add('hidden');
+ dom.abcResultsActions?.classList.add('hidden');
+ cleanupChart();
+
+ try {
+ const uf = dom.abcStateFilter?.value || utils.getDefaultUf();
+ const date = dom.abcDateFilter?.value || utils.getDefaultDate();
+ const regime = dom.abcRegimeFilter?.value || utils.getDefaultRegime();
+ const codeList = codes.split(',').map(c => parseInt(c.trim(), 10)).filter(n => !isNaN(n));
+
+ if (state.abc.groupByClassificacao) {
+ const url = `${config.API_BASE}/bi/curva-abc/por-classificacao?uf=${uf}&data_referencia=${date}®ime=${encodeURIComponent(regime)}`;
+ const data = await api.request(url, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(codeList),
+ });
+ state.abc.groupedData = Array.isArray(data) ? data : (data.data || []);
+ state.abc.data = null;
+ } else {
+ const url = `${config.API_BASE}/bi/curva-abc?uf=${uf}&data_referencia=${date}®ime=${encodeURIComponent(regime)}`;
+ const data = await api.request(url, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(codeList),
+ });
+ state.abc.data = Array.isArray(data) ? data : (data.data || []);
+ state.abc.groupedData = null;
+ }
+ render();
+ } catch (error) {
+ toast.show(`Erro ABC: ${error.message}`, 'error');
+ } finally {
+ state.abc.loading = false;
+ setTimeout(() => dom.abcSkeleton?.classList.add('hidden'), 300);
+ }
+ }
+
+ function render() {
+ const data = state.abc.data;
+ const grouped = state.abc.groupedData;
+
+ if (!data?.length && !grouped?.length) return;
+
+ dom.abcResults?.classList.remove('hidden');
+ dom.abcResultsActions?.classList.remove('hidden');
+
+ if (grouped?.length) {
+ renderGrouped(grouped);
+ } else if (data?.length) {
+ renderIndividual(data);
+ }
+
+ viewToggle.setView(state.abc.viewMode || 'grid');
+ }
+
+ function renderIndividual(data) {
+ if (dom.abcResultsCount) dom.abcResultsCount.textContent = `${data.length} insumo(s) analisado(s)`;
+
+ // Update table header for individual mode
+ const thead = dom.abcTable?.querySelector('thead');
+ if (thead) {
+ thead.innerHTML = `
+
+
+
+ Detalhes do Item
+ +
+
+
+
+
+
+ TIPO
+
+ #---
+
+ Descrição
+
+
+
+
+
+ R$ 0,00
+ /unidade
+
+ + UF: - + Referência: - + Regime: - +
+ +
+
+
+
+
+
+
+
+
+
+ Série Histórica (Últimos 12 meses)
+ +
+
+
+
+
+
+ Histórico de Manutenção
+ +
+
+
+ Mapa de Calor Regional
+
+ Norte
+ Nordeste
+ C.Oeste
+ Sudeste
+ Sul
+
+
+
+
+
+
+
+
+ Hora/Homem Total
+
+ ⏱️
+
+
+
+ 0,00 h
+ Total de horas de mão de obra
+
+
+
+ Top 5 Insumos de Maior Impacto
+ +
+
+
+
+
+
+ Estrutura Analítica (BOM)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Classe ${item.classe_abc}
+
+ `).join('');
+ }
+
+ const tbody = dom.abcTable?.querySelector('tbody');
+ if (tbody) {
+ tbody.innerHTML = data.map(item => `
+ ${utils.escapeHtml(item.descricao)}
+
+ ${utils.formatCurrency(item.custo_total_agregado)}
+ ${(item.percentual_acumulado || 0).toFixed(1)}% acum.
+
+
+ ${utils.escapeHtml(item.classificacao)}
+
+ `).join('');
+ }
+
+ const tbody = dom.abcTable?.querySelector('tbody');
+ if (tbody) {
+ tbody.innerHTML = data.map(item => `
+ ${utils.escapeHtml(item.classificacao)}
+
+ ${utils.formatCurrency(item.custo_total)}
+ ${item.total_insumos} insumo(s) · ${(item.percentual || 0).toFixed(1)}%
+
+
+ #${data.codigo}
+
+ `;
+ };
+
+ renderHeader(dom.comparisonName1, left, leftTotal);
+ renderHeader(dom.comparisonName2, right, rightTotal);
+
+ renderSingleTable(dom.comparisonLeftTable, leftFlat);
+ renderSingleTable(dom.comparisonRightTable, rightFlat);
+
+ renderDeltaTable(leftFlat, rightFlat);
+ }
+
+ function flattenBom(bom) {
+ if (!bom || !Array.isArray(bom)) return [];
+ return bom.map(item => ({ ...item, nivel: item.nivel || 0 }));
+ }
+
+ function renderSingleTable(tbody, items) {
+ if (!tbody) return;
+ const sorted = items.sort((a, b) => a.nivel - b.nivel);
+ tbody.innerHTML = sorted.map(item => `
+
+ ${utils.escapeHtml(data.descricao)}
+ ${utils.formatCurrency(total)}
+
+ + ${REGIAO_LABELS[reg] || reg}
+ R$ ${price != null ? price.toLocaleString('pt-BR', { minimumFractionDigits: 2 }) : 'N/D'} + ${price != null ? ` ${price < avg ? '▼' : '▲'} ${Math.abs(((price - avg) / avg) * 100).toFixed(1)}% vs média` : ''} + `, { sticky: true }); + + layer.on({ + mouseover: e => e.target.setStyle({ weight: 3, color: '#333', fillOpacity: 1 }), + mouseout: e => geoLayer.resetStyle(e.target), + }); + }, + }).addTo(map); + + const legend = L.control({ position: 'bottomright' }); + legend.onAdd = () => { + const div = L.DomUtil.create('div', 'heatmap-legend-container'); + div.innerHTML = 'Preço
'; + const steps = 5; + for (let i = 0; i < steps; i++) { + const v = min + (max - min) * (i / (steps - 1)); + div.innerHTML += + `` + + `R$ ${v.toLocaleString('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
`; + } + div.innerHTML += `▲/>média ▼/< média`; + return div; + }; + legend.addTo(map); + + const regLegend = L.control({ position: 'bottomleft' }); + regLegend.onAdd = () => { + const div = L.DomUtil.create('div', 'heatmap-legend-container'); + div.innerHTML = 'Regiões
'; + for (const [reg, cor] of Object.entries(REGIAO_CORES)) { + div.innerHTML += + `` + + `${REGIAO_LABELS[reg]}
`; + } + return div; + }; + regLegend.addTo(map); + + state.heatmap.map = map; + + setTimeout(() => { + try { + if (state.heatmap.map && state.heatmap.map._container) { + state.heatmap.map.invalidateSize(); + } + } catch (e) { + console.debug('[Heatmap] Map ready check skipped:', e.message); + } + }, 250); + } + + function renderChart(data) { + destroyMap(); + destroyChart(); + + dom.heatmapMapContainer?.classList.add('hidden'); + dom.heatmapCanvas?.classList.remove('hidden'); + + if (!data || data.length === 0) { + dom.heatmapSection?.classList.add('hidden'); + return; + } + + const regionOrder = ['NORTE', 'NORDESTE', 'CENTRO_OESTE', 'SUDESTE', 'SUL']; + const withRegiao = data.map(d => ({ ...d, regiao: getRegiao(d.uf) })); + withRegiao.sort((a, b) => { + const ra = regionOrder.indexOf(a.regiao); + const rb = regionOrder.indexOf(b.regiao); + if (ra !== rb) return ra - rb; + return a.valor - b.valor; + }); + + const ufs = withRegiao.map(d => d.uf); + const values = withRegiao.map(d => d.valor); + const min = values[0]; + const max = values[values.length - 1]; + const range = max - min || 1; + const avg = values.reduce((s, v) => s + v, 0) / values.length; + + const ctx = dom.heatmapChart?.getContext('2d'); + if (!ctx) return; + const existing = Chart.getChart(ctx.canvas); + if (existing) existing.destroy(); + + const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text-main').trim() || '#1e293b'; + const mutedColor = getComputedStyle(document.documentElement).getPropertyValue('--text-muted').trim() || '#64748b'; + + state.heatmap.chart = new Chart(ctx, { + type: 'bar', + data: { + labels: ufs, + datasets: [{ + label: 'Preço', + data: values, + backgroundColor: withRegiao.map(d => { + const ratio = (d.valor - min) / range; + const r = Math.round(34 + ratio * (239 - 34)); + const g = Math.round(197 - ratio * 157); + const b = Math.round(94 - ratio * 54); + return `rgb(${r},${g},${b})`; + }), + borderColor: withRegiao.map(d => { + const ratio = (d.valor - min) / range; + const r = Math.round(34 + ratio * (239 - 34)); + const g = Math.round(197 - ratio * 157); + const b = Math.round(94 - ratio * 54); + return `rgb(${r},${g},${b})`; + }), + borderWidth: 1, + borderRadius: 4, + }], + }, + options: { + indexAxis: 'y', + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { display: false }, + tooltip: { + callbacks: { + label: ctx => { + const uf = ctx.label; + const reg = getRegiao(uf); + return `${REGIAO_LABELS[reg] || reg} | ${uf}: ${ctx.parsed.x < avg ? '▼' : '▲'} R$ ${ctx.parsed.x.toFixed(2)}${ctx.parsed.x === min ? ' (menor)' : ctx.parsed.x === max ? ' (maior)' : ''}`; + }, + }, + }, + }, + scales: { + x: { + ticks: { color: mutedColor, font: { size: 9 }, callback: v => 'R$ ' + Number(v).toFixed(2) }, + grid: { color: mutedColor + '20' }, + }, + y: { + ticks: { color: textColor, font: { size: 9 } }, + grid: { display: false }, + }, + }, + }, + }); + } + + return { render }; +} \ No newline at end of file diff --git a/demo/js/modules/modal.js b/demo/js/modules/modal.js new file mode 100644 index 0000000..855c691 --- /dev/null +++ b/demo/js/modules/modal.js @@ -0,0 +1,610 @@ +/** @file Módulo do Modal de Detalhes (Histórico + BOM + Man-Hours + Otimização) */ +import { createChartConfig, getChartTheme, hexToRgba } from '../utils.js'; + +export function createModal(config, state, dom, utils, api, toast, heatmap) { + let historyChartInstance = null; + let bomViewMode = 'cards'; + let bomDataCache = []; + let currentItemData = null; + let currentTipo = null; + let lastFocusedElement = null; + + function trapFocus(event) { + const focusable = dom.detailModal?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'); + if (!focusable || focusable.length === 0) return; + const first = focusable[0]; + const last = focusable[focusable.length - 1]; + if (event.key === 'Tab') { + if (event.shiftKey && document.activeElement === first) { + event.preventDefault(); + last.focus(); + } else if (!event.shiftKey && document.activeElement === last) { + event.preventDefault(); + first.focus(); + } + } + } + + function cleanup() { + if (historyChartInstance) { + historyChartInstance.destroy(); + historyChartInstance = null; + } + bomDataCache = []; + if (state.heatmap) state.heatmap.data = null; + if (state.heatmap && state.heatmap.chart) { + state.heatmap.chart.destroy(); + state.heatmap.chart = null; + } + if (state.heatmap && state.heatmap.map) { + state.heatmap.map.remove(); + state.heatmap.map = null; + } + } + + function setBomView(mode) { + bomViewMode = mode; + if (dom.btnBomGrid) dom.btnBomGrid.classList.toggle('active', mode === 'cards'); + if (dom.btnBomList) dom.btnBomList.classList.toggle('active', mode === 'table'); + if (dom.bomGrid) dom.bomGrid.classList.toggle('hidden', mode !== 'cards'); + if (dom.bomTableWrapper) dom.bomTableWrapper.classList.toggle('hidden', mode !== 'table'); + } + + function renderBomSearch() { + if (dom.bomSearchInput && dom.bomGrid) { + dom.bomSearchInput.value = ''; + dom.bomSearchInput.classList.remove('has-filter'); + } + } + + function filterBom(query) { + const q = (query || '').toLowerCase().trim(); + if (!dom.bomGrid) return; + + const cards = dom.bomGrid.querySelectorAll('.bom-card'); + const tableRows = dom.bomTableContainer?.querySelectorAll('.data-table tbody tr'); + + const showAll = !q; + + cards.forEach(card => { + const text = card.textContent.toLowerCase(); + card.style.display = (!showAll && !text.includes(q)) ? 'none' : ''; + }); + + tableRows?.forEach(row => { + const text = row.textContent.toLowerCase(); + row.style.display = (!showAll && !text.includes(q)) ? 'none' : ''; + }); + + if (dom.bomSearchInput) { + dom.bomSearchInput.classList.toggle('has-filter', !!q); + } + } + + async function show(tipo, codigo) { + if (!codigo) return; + + const tipoPlural = tipo === 'insumo' ? 'insumos' : 'composicoes'; + const tipoSingular = tipo === 'insumo' ? 'insumo' : 'composicao'; + + dom.detailModal?.classList.remove('hidden'); + document.body.style.overflow = 'hidden'; + lastFocusedElement = document.activeElement; + cleanup(); + + setTimeout(() => { + const closeBtn = dom.detailModal?.querySelector('.modal-close'); + if (closeBtn) closeBtn.focus(); + }, 100); + dom.detailModal?.addEventListener('keydown', trapFocus); + + // Reset state + if (dom.bomGrid) dom.bomGrid.innerHTML = ''; + if (dom.bomTableContainer) dom.bomTableContainer.innerHTML = ''; + if (dom.optimizationContainer) dom.optimizationContainer.innerHTML = ''; + if (dom.modalStatsRow) dom.modalStatsRow.innerHTML = ''; + if (dom.bomCostComparison) dom.bomCostComparison.innerHTML = ''; + if (dom.modalTitle) dom.modalTitle.textContent = 'Carregando detalhes...'; + if (dom.modalDesc) dom.modalDesc.textContent = ''; + if (dom.modalCode) dom.modalCode.textContent = codigo; + if (dom.modalPrice) dom.modalPrice.textContent = '...'; + if (dom.modalPriceUnit) dom.modalPriceUnit.textContent = ''; + if (dom.modalUf) dom.modalUf.textContent = '...'; + if (dom.modalRef) dom.modalRef.textContent = '...'; + if (dom.modalRegime) dom.modalRegime.textContent = '...'; + if (dom.modalStatusBadge) dom.modalStatusBadge.textContent = ''; + if (dom.modalStatusBadge) dom.modalStatusBadge.className = ''; + if (dom.modalClassificacao) dom.modalClassificacao.textContent = ''; + if (dom.modalGrupo) dom.modalGrupo.textContent = ''; + + // Hide composition-specific sections by default + if (dom.bomSection) dom.bomSection.classList.add('hidden'); + if (dom.manHoursSection) dom.manHoursSection.classList.add('hidden'); + if (dom.optimizationSection) dom.optimizationSection.classList.add('hidden'); + if (dom.bomViewToggle) dom.bomViewToggle.classList.add('hidden'); + + try { + const uf = dom.stateFilter?.value || utils.getDefaultUf(); + const date = dom.dateFilter?.value || utils.getDefaultDate(); + const regime = dom.regimeFilter?.value || utils.getDefaultRegime(); + + // Update meta info + if (dom.modalUf) dom.modalUf.textContent = uf; + if (dom.modalRef) dom.modalRef.textContent = date; + if (dom.modalRegime) dom.modalRegime.textContent = regime === 'NAO_DESONERADO' ? 'Não Desonerado' : regime === 'DESONERADO' ? 'Desonerado' : regime; + + // Fetch item details + const itemUrl = `${config.API_BASE}/${tipoPlural}/${encodeURIComponent(codigo)}?uf=${uf}&data_referencia=${date}®ime=${encodeURIComponent(regime)}`; + const itemData = await api.request(itemUrl); + + currentItemData = itemData; + currentTipo = tipoSingular; + const valor = tipoSingular === 'insumo' ? (itemData.preco_mediano || 0) : (itemData.custo_total || 0); + + if (dom.modalTitle) dom.modalTitle.textContent = tipoSingular === 'insumo' ? 'Detalhes do Insumo' : 'Detalhes da Composição'; + if (dom.modalDesc) dom.modalDesc.textContent = itemData.descricao || 'Sem descrição'; + if (dom.modalPrice) dom.modalPrice.textContent = utils.formatCurrency(valor); + if (dom.modalPriceUnit) dom.modalPriceUnit.textContent = `/${itemData.unidade || 'un'}`; + if (dom.modalTypeBadge) { + dom.modalTypeBadge.textContent = tipoSingular === 'insumo' ? 'INSUMO' : 'COMPOSIÇÃO'; + dom.modalTypeBadge.className = `type-tag tag-${tipoSingular === 'insumo' ? 'insumo' : 'comp'}`; + } + + // Status badge + if (dom.modalStatusBadge && itemData.status && itemData.status !== 'ATIVO') { + dom.modalStatusBadge.textContent = 'INATIVO'; + dom.modalStatusBadge.className = 'badge badge-inativo'; + } + + // Classificacao / Grupo + if (dom.modalClassificacao && tipoSingular === 'insumo' && itemData.classificacao) { + dom.modalClassificacao.textContent = itemData.classificacao; + } + if (dom.modalGrupo && tipoSingular === 'composicao' && itemData.grupo) { + dom.modalGrupo.textContent = itemData.grupo; + } + + // Fetch history + const historyUrl = `${config.API_BASE}/bi/item/${tipoSingular}/${encodeURIComponent(codigo)}/historico?uf=${uf}®ime=${encodeURIComponent(regime)}&meses=12`; + const historyData = await api.request(historyUrl).catch((err) => { + console.warn('[Modal] History fetch failed:', err); + return []; + }); + + if (dom.historyChart && historyData.length > 0) { + const ctx = dom.historyChart.getContext('2d'); + const { primaryColor, textColor, gridColor } = getChartTheme(state.theme); + const configChart = createChartConfig('line', + historyData.map(h => h.data_referencia), + [{ + label: 'Preço Histórico', + data: historyData.map(h => h.valor), + borderColor: primaryColor, + backgroundColor: hexToRgba(primaryColor, 0.1), + fill: true, + tension: 0.4, + pointRadius: 3, + pointHoverRadius: 6, + }], + state.theme, + { + scales: { + y: { + beginAtZero: false, + ticks: { + callback: (v) => utils.formatCurrency(v), + color: textColor, + }, + grid: { color: gridColor }, + }, + x: { + ticks: { color: textColor }, + grid: { color: gridColor }, + } + }, + plugins: { + tooltip: { + callbacks: { + label: (ctx) => ` ${utils.formatCurrency(ctx.parsed.y)}` + } + } + } + } + ); + historyChartInstance = new Chart(ctx, configChart); + } else if (dom.historyChart) { + const chartContainer = dom.historyChart.parentElement; + chartContainer.innerHTML = '
Sem dados históricos disponíveis.
'; + } + + // Fetch Maintenance History (1.7) — silent 404 is expected + if (dom.maintenanceSection) dom.maintenanceSection.classList.add('hidden'); + if (dom.maintenanceContainer) dom.maintenanceContainer.innerHTML = ''; + const maintUrl = `${config.API_BASE}/bi/item/${tipoSingular}/${encodeURIComponent(codigo)}/manutencoes`; + let maintData = null; + try { + const resp = await fetch(maintUrl); + if (resp.ok) { + maintData = await resp.json(); + } else if (resp.status !== 404) { + console.warn('[Modal] Maintenance fetch failed:', resp.status, await resp.text().catch(() => '')); + } + } catch (err) { + console.warn('[Modal] Maintenance fetch network error:', err); + } + + if (maintData && maintData.length > 0 && dom.maintenanceSection && dom.maintenanceContainer) { + dom.maintenanceSection.classList.remove('hidden'); + dom.maintenanceContainer.innerHTML = maintData.map(m => ` +
+ ${utils.escapeHtml(m.data_referencia)}
+ ${utils.escapeHtml(m.tipo_manutencao)}
+ ${utils.escapeHtml(m.descricao_item || '')}
+
+ `).join('');
+ }
+
+ // Heatmap Regional (1.11)
+ dom.heatmapSection?.classList.add('hidden');
+ if (heatmap) {
+ heatmap.render(codigo, tipoSingular, date, regime);
+ }
+
+ // Composition-specific data
+ if (tipoSingular === 'composicao') {
+ // Fetch BOM
+ const bomUrl = `${config.API_BASE}/bi/composicao/${encodeURIComponent(codigo)}/bom?uf=${uf}&data_referencia=${date}®ime=${encodeURIComponent(regime)}`;
+ const bomData = await api.request(bomUrl).catch((err) => {
+ console.warn('[Modal] BOM fetch failed:', err);
+ return [];
+ });
+
+ if (dom.bomSection) dom.bomSection.classList.remove('hidden');
+
+ if (bomData.length > 0) {
+ const consolidated = bomData.reduce((acc, curr) => {
+ const key = `${curr.item_codigo}-${curr.tipo_item}`;
+ if (!acc[key]) {
+ acc[key] = { ...curr };
+ } else {
+ acc[key].coeficiente_total = (acc[key].coeficiente_total || 0) + (curr.coeficiente_total || 0);
+ acc[key].custo_impacto_total = (acc[key].custo_impacto_total || 0) + (curr.custo_impacto_total || 0);
+ acc[key].nivel = Math.min(acc[key].nivel ?? 1, curr.nivel ?? 1);
+ }
+ return acc;
+ }, {});
+
+ const rows = Object.values(consolidated).sort((a, b) => (a.custo_impacto_total || 0) - (b.custo_impacto_total || 0)).reverse();
+
+ // Cache for search
+ bomDataCache = rows;
+
+ // Total BOM (all items) for percentage reference in tree display
+ const totalBomCost = rows.reduce((sum, r) => sum + (r.custo_impacto_total || 0), 0);
+
+ // BOM Cost Comparison (1.4) — only leaf INSUMO items to avoid vertical duplication
+ if (dom.bomCostComparison && itemData.custo_total != null) {
+ const oficial = Number(itemData.custo_total) || 0;
+
+ // Filter to leaf insumos only (skip sub-composicoes to avoid double-count)
+ const insumos = rows.filter(r => r.tipo_item === 'INSUMO');
+ const totalInsumos = insumos.reduce((sum, r) => sum + (r.custo_impacto_total || 0), 0);
+
+ // Breakdown by category
+ const maoDeObra = insumos.filter(r => r.unidade === 'H')
+ .reduce((sum, r) => sum + (r.custo_impacto_total || 0), 0);
+ const equipamento = insumos.filter(r => r.unidade === 'CHP')
+ .reduce((sum, r) => sum + (r.custo_impacto_total || 0), 0);
+ const material = totalInsumos - maoDeObra - equipamento;
+
+ const pct = (v) => oficial > 0 ? ((v / oficial) * 100).toFixed(1) : '0.0';
+
+ dom.bomCostComparison.innerHTML = `
+
+ Insumos
+ ${utils.formatCurrency(totalInsumos)}
+ ${pct(totalInsumos)}%
+
+
+ Mão de Obra
+ ${utils.formatCurrency(maoDeObra)}
+ ${pct(maoDeObra)}%
+
+
+ Material
+ ${utils.formatCurrency(material)}
+ ${pct(material)}%
+
+
+ Equipamento
+ ${utils.formatCurrency(equipamento)}
+ ${pct(equipamento)}%
+
+
+ Custo Oficial
+ ${utils.formatCurrency(oficial)}
+ 100%
+
+ `;
+ }
+
+ // Show toggle
+ if (dom.bomViewToggle) dom.bomViewToggle.classList.remove('hidden');
+
+ // Cards view
+ renderBomCards(rows, totalBomCost);
+
+ // Table view
+ renderBomTable(rows, totalBomCost);
+ } else if (dom.bomTableContainer) {
+ dom.bomTableContainer.innerHTML = 'Sem dados de BOM disponíveis.
'; + } + + // Fetch Man-Hours + const manHoursUrl = `${config.API_BASE}/bi/composicao/${encodeURIComponent(codigo)}/hora-homem`; + const manHoursData = await api.request(manHoursUrl).catch((err) => { + console.warn('[Modal] Man-Hours fetch failed:', err); + return { total_hora_homem: 0 }; + }); + + if (dom.manHoursSection) dom.manHoursSection.classList.remove('hidden'); + if (dom.manHoursValue) { + const hh = manHoursData.total_hora_homem || 0; + dom.manHoursValue.textContent = `${hh.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} h`; + } + + // Fetch Optimization Candidates + const optUrl = `${config.API_BASE}/bi/composicao/${encodeURIComponent(codigo)}/otimizar?uf=${uf}&data_referencia=${date}®ime=${encodeURIComponent(regime)}&top_n=5`; + const optData = await api.request(optUrl).catch((err) => { + console.warn('[Modal] Optimization fetch failed:', err); + return []; + }); + + if (dom.optimizationSection) dom.optimizationSection.classList.remove('hidden'); + if (dom.optimizationContainer) { + if (optData.length === 0) { + dom.optimizationContainer.innerHTML = 'Sem candidatos para otimização.
'; + } else { + dom.optimizationContainer.innerHTML = optData.map((item, idx) => ` +
+ ${idx + 1}
+
+ `).join('');
+ }
+ }
+ }
+
+ // Stats row
+ if (dom.modalStatsRow) {
+ const stats = [];
+ stats.push({ label: 'Unidade', value: utils.escapeHtml(itemData.unidade || 'N/A') });
+ if (itemData.classificacao) stats.push({ label: 'Classificação', value: utils.escapeHtml(itemData.classificacao) });
+ if (itemData.grupo) stats.push({ label: 'Grupo', value: utils.escapeHtml(itemData.grupo) });
+ if (itemData.status && itemData.status !== 'ATIVO') stats.push({ label: 'Status', value: itemData.status });
+
+ dom.modalStatsRow.innerHTML = stats.map(s => `
+
+
+ ${utils.formatCurrency(item.custo_impacto_total || 0)}
+ ${utils.escapeHtml(item.descricao || 'N/A')}
+ Código: ${item.item_codigo} · ${utils.escapeHtml(item.unidade || '')} · Coef: ${(item.coeficiente_total || 0).toFixed(4)}
+
+ ${s.label}
+ ${s.value}
+
+ `).join('');
+ }
+
+ // Initialize BOM view
+ setBomView(bomViewMode);
+ renderBomSearch();
+
+ } catch (error) {
+ console.error('[Modal] Fatal error loading details:', error);
+ toast.show(`Erro ao carregar detalhes: ${error.message || 'Erro desconhecido'}`, 'error');
+ close();
+ }
+ }
+
+ function renderBomCards(rows, totalBomCost) {
+ if (!dom.bomGrid) return;
+ dom.bomGrid.innerHTML = rows.map(bom => {
+ const nivel = bom.nivel ?? 1;
+ const pct = totalBomCost > 0 ? ((bom.custo_impacto_total || 0) / totalBomCost * 100).toFixed(1) : '0.0';
+ const indent = (nivel - 1) * 16;
+ const tipoItem = bom.tipo_item === 'COMPOSICAO' ? 'comp' : 'insumo';
+ const tipoLabel = bom.tipo_item === 'COMPOSICAO' ? 'COMP' : 'INS';
+ const levelColors = ['', 'var(--primary)', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
+ const levelColor = levelColors[Math.min(nivel, levelColors.length - 1)] || 'var(--text-muted)';
+
+ return `
+
+
+ `;
+ }).join('');
+ }
+
+ function renderBomTable(rows, totalBomCost) {
+ if (!dom.bomTableContainer) return;
+ dom.bomTableContainer.innerHTML = `
+
+ ${nivel}
+ ${tipoLabel}
+ ${bom.item_codigo}
+
+ ${utils.escapeHtml(bom.descricao || 'N/A')}
+
+ ${utils.escapeHtml(bom.unidade || 'N/A')}
+ ${(bom.coeficiente_total || 0).toLocaleString('pt-BR', { minimumFractionDigits: 4, maximumFractionDigits: 4 })}
+ ${utils.formatCurrency(bom.custo_impacto_total || 0)}
+ ${pct}%
+
+ | Nível | +Código | +Tipo | +Descrição | +Unidade | +Coeficiente | +Impacto | +% do Total | +
|---|---|---|---|---|---|---|---|
| ${nivel} | +${bom.item_codigo} | +${tipoLabel} | +${utils.escapeHtml(bom.descricao || 'N/A')} | +${utils.escapeHtml(bom.unidade || 'N/A')} | +${(bom.coeficiente_total || 0).toLocaleString('pt-BR', { minimumFractionDigits: 4, maximumFractionDigits: 4 })} | +${utils.formatCurrency(bom.custo_impacto_total || 0)} | +${pct}% | +
Erro ao buscar resultados.
'; + } finally { + state.search.loading = false; + setTimeout(() => dom.searchSkeleton?.classList.add('hidden'), 300); + } + } + + function render() { + const results = state.search.results; + if (!results?.length) { + dom.resultsGrid.innerHTML = ''; + dom.noResults?.classList.remove('hidden'); + dom.resultsActions?.classList.add('hidden'); + return; + } + + dom.resultsActions?.classList.remove('hidden'); + if (dom.resultsCount) dom.resultsCount.textContent = `${results.length} resultado(s)`; + + const sorted = [...results].sort((a, b) => { + switch (state.search.sortBy) { + case 'name_asc': return (a.descricao || '').localeCompare(b.descricao || ''); + case 'name_desc': return (b.descricao || '').localeCompare(a.descricao || ''); + case 'price_desc': return (b._preco || 0) - (a._preco || 0); + case 'price_asc': return (a._preco || 0) - (b._preco || 0); + default: return 0; + } + }); + + dom.resultsGrid.innerHTML = sorted.map(item => { + const tipo = item._tipo; + const tagClass = tipo === 'insumo' ? 'tag-insumo' : 'tag-comp'; + const tagLabel = tipo === 'insumo' ? 'INSUMO' : 'COMPOSIÇÃO'; + const preco = utils.formatCurrency(item._preco || 0); + const classificacao = item.classificacao ? `${utils.escapeHtml(item.classificacao)}` : ''; + const grupo = item.grupo ? `${utils.escapeHtml(item.grupo)}` : ''; + const status = item.status && item.status !== 'ATIVO' ? `INATIVO` : ''; + + return ` +
+
+ `;
+ }).join('');
+ }
+
+ function setSearchType(type) {
+ state.search.searchType = type;
+ if (dom.searchTypeInsumos) {
+ dom.searchTypeInsumos.classList.toggle('active', type === 'insumos');
+ }
+ if (dom.searchTypeComposicoes) {
+ dom.searchTypeComposicoes.classList.toggle('active', type === 'composicoes');
+ }
+ if (api.updateFilterVisibility) api.updateFilterVisibility();
+ }
+
+ function exportData(format) {
+ const data = state.search.results;
+ if (!data?.length) { toast.show('Nada para exportar', 'warning'); return; }
+
+ const cleanData = data.map(({ _tipo, _preco, ...rest }) => rest);
+
+ if (format === 'json') {
+ utils.downloadAsFile(JSON.stringify(cleanData, null, 2), 'sinapi-pesquisa.json', 'application/json');
+ toast.show('JSON exportado com sucesso!', 'success');
+ return;
+ }
+
+ if (format === 'md') {
+ const headers = Object.keys(cleanData[0]);
+ const mdContent = [
+ `# AutoSINAPI - Pesquisa`,
+ ``,
+ `| ${headers.join(' | ')} |`,
+ `| ${headers.map(() => '---').join(' | ')} |`,
+ ...cleanData.map(row => `| ${headers.map(h => row[h] ?? '').join(' | ')} |`),
+ ].join('\n');
+ utils.downloadAsFile(mdContent, 'sinapi-pesquisa.md', 'text/markdown');
+ toast.show('Markdown exportado com sucesso!', 'success');
+ return;
+ }
+
+ if (format === 'pdf' && window.jspdf) {
+ const { jsPDF } = window.jspdf;
+ const doc = new jsPDF();
+
+ doc.setFontSize(16);
+ doc.text('AutoSINAPI - Pesquisa', 14, 20);
+ doc.setFontSize(10);
+ doc.text(`Total: ${data.length} resultado(s) | Data: ${new Date().toLocaleDateString('pt-BR')}`, 14, 30);
+
+ const headers = [['Código', 'Descrição', 'Unidade', 'Valor', 'Tipo']];
+ const rows = data.map(item => [
+ item.codigo,
+ item.descricao || '',
+ item.unidade || '',
+ utils.formatCurrency(item._preco || 0),
+ item._tipo === 'insumo' ? 'Insumo' : 'Composição',
+ ]);
+
+ doc.autoTable({
+ head: headers,
+ body: rows,
+ startY: 35,
+ styles: { fontSize: 8, cellPadding: 3 },
+ headStyles: { fillColor: [37, 99, 235] },
+ alternateRowStyles: { fillColor: [245, 247, 250] },
+ });
+
+ doc.save('sinapi-pesquisa.pdf');
+ toast.show('PDF exportado com sucesso!', 'success');
+ return;
+ }
+
+ if (format === 'pdf') {
+ toast.show('Biblioteca jsPDF não carregada. Use JSON ou MD.', 'warning');
+ return;
+ }
+
+ const content = [Object.keys(cleanData[0]).join(','), ...cleanData.map(r =>
+ Object.values(r).map(v => `"${(v || '').toString().replace(/"/g, '""')}"`).join(',')
+ )].join('\n');
+ utils.downloadAsFile(content, 'sinapi-pesquisa.csv', 'text/csv');
+ toast.show('CSV exportado com sucesso!', 'success');
+ }
+
+ return { perform, render, setView: viewToggle.setView, export: exportData, setSearchType };
+}
diff --git a/demo/js/modules/trends.js b/demo/js/modules/trends.js
new file mode 100644
index 0000000..69611c6
--- /dev/null
+++ b/demo/js/modules/trends.js
@@ -0,0 +1,169 @@
+export function createTrends(config, state, dom, utils, api, toast) {
+ const ENDPOINT = `${config.API_BASE}/bi/tendencias/por-classificacao`;
+
+ async function perform() {
+ const uf = dom.trendsStateFilter?.value;
+ const date = dom.trendsDateFilter?.value;
+ const regime = dom.trendsRegimeFilter?.value;
+ const groupBy = dom.trendsGroupBy?.value || 'classificacao';
+ const codes = dom.trendsCodes?.value?.trim();
+
+ if (!uf || !date) {
+ toast.show('Selecione UF e data de referência', 'warning');
+ return;
+ }
+
+ if (groupBy === 'item' && !codes) {
+ toast.show('Digite os códigos para análise individual', 'warning');
+ return;
+ }
+
+ state.trends.loading = true;
+ dom.trendsSkeleton?.classList.remove('hidden');
+ dom.trendsResults?.classList.add('hidden');
+
+ try {
+ let url = `${ENDPOINT}?uf=${uf}&data_referencia=${date}®ime=${regime}&agrupar_por=${groupBy}&meses=12`;
+ if (codes) url += `&codigos=${encodeURIComponent(codes)}`;
+
+ const data = await api.request(url);
+ state.trends.data = data;
+
+ if (!data || data.length === 0) {
+ toast.show('Nenhum dado de tendência encontrado para os filtros selecionados.', 'info');
+ dom.trendsResults?.classList.add('hidden');
+ } else {
+ renderChart(data);
+ renderTable(data, groupBy);
+ dom.trendsResults?.classList.remove('hidden');
+ }
+ } catch (err) {
+ console.error('[Trends] Erro ao carregar tendências:', err);
+ toast.show(err.message.includes('Nenhum') ? err.message : 'Erro ao carregar tendências', 'error');
+ } finally {
+ state.trends.loading = false;
+ dom.trendsSkeleton?.classList.add('hidden');
+ }
+ }
+
+ function renderChart(data) {
+ const groups = {};
+ for (const item of data) {
+ if (!groups[item.classificacao]) groups[item.classificacao] = [];
+ groups[item.classificacao].push(item);
+ }
+
+ const months = [...new Set(data.map(d => d.mes))].sort();
+ const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#14b8a6', '#f97316', '#6366f1', '#d946ef'];
+ let colorIdx = 0;
+
+ const datasets = Object.entries(groups).map(([classificacao, items]) => {
+ const values = months.map(m => {
+ const found = items.find(i => i.mes === m);
+ return found ? found.preco_medio : null;
+ });
+ const color = colors[colorIdx % colors.length];
+ colorIdx++;
+ return {
+ label: classificacao,
+ data: values,
+ borderColor: color,
+ backgroundColor: color + '30',
+ fill: false,
+ tension: 0.35,
+ spanGaps: true,
+ pointRadius: 2,
+ pointHoverRadius: 5,
+ };
+ });
+
+ const ctx = dom.trendsChart?.getContext('2d');
+ if (!ctx) return;
+ Chart.getChart(ctx.canvas)?.destroy();
+
+ const textColor = getComputedStyle(document.documentElement).getPropertyValue('--text-main').trim() || '#1e293b';
+ const mutedColor = getComputedStyle(document.documentElement).getPropertyValue('--text-muted').trim() || '#64748b';
+
+ state.trends.chart = new Chart(ctx, {
+ type: 'line',
+ data: { labels: months, datasets },
+ options: {
+ responsive: true,
+ maintainAspectRatio: true,
+ interaction: { mode: 'index', intersect: false },
+ plugins: {
+ legend: { position: 'bottom', labels: { color: textColor, boxWidth: 12, padding: 12, font: { size: 10 } } },
+ tooltip: {
+ callbacks: {
+ label: ctx => ctx.parsed.y !== null ? `${ctx.dataset.label}: R$ ${ctx.parsed.y.toFixed(2)}` : '',
+ },
+ },
+ },
+ scales: {
+ x: {
+ ticks: { color: mutedColor, font: { size: 10 } },
+ grid: { display: false },
+ },
+ y: {
+ beginAtZero: true,
+ ticks: { color: mutedColor, font: { size: 10 }, callback: v => 'R$ ' + Number(v).toFixed(2) },
+ grid: { color: mutedColor + '20' },
+ },
+ },
+ },
+ });
+ }
+
+ function renderTable(data, groupBy) {
+ const groups = {};
+ for (const item of data) {
+ if (!groups[item.classificacao]) groups[item.classificacao] = [];
+ groups[item.classificacao].push(item);
+ }
+
+ const table = dom.trendsTable;
+ if (!table) return;
+
+ const label = groupBy === 'classificacao' ? 'Classificação' : groupBy === 'grupo' ? 'Grupo' : 'Item (Código - Descrição)';
+ const itemLabel = groupBy === 'classificacao' ? 'Insumos' : groupBy === 'grupo' ? 'Composições' : 'Item';
+
+ // Update header
+ const thead = table.querySelector('thead');
+ if (thead) {
+ thead.innerHTML = `
+
+ ${tagLabel}
+ #${item.codigo}
+ ${tipo === 'insumo' ? classificacao : grupo}
+ ${status}
+
+ ${utils.escapeHtml(item.descricao || 'Sem descrição')}
+
+ ${preco}
+ ${utils.escapeHtml(item.unidade || 'N/A')}
+
+