DEV Community

Jorge Marcos
Jorge Marcos

Posted on

Untitled

#codepen

Check out this Pen I made!


***<!DOCTYPE html>







Cadastro de Produção PCP - Paris Atacado



<br>
:root { --bg: #0d1117; --card: #161b22; --border: #30363d; --text: #c9d1d9; --blue: #58a6ff; --green: #238636; --red: #da3633; }<br>
body { font-family: &#39;Segoe UI&#39;, sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 20px; display: flex; gap: 20px; }</p>
<div class="highlight"><pre class="highlight plaintext"><code> / Formulário Lateral */
.sidebar { width: 350px; background: var(--card); padding: 20px; border-radius: 8px; border: 1px solid var(--border); height: fit-content; position: sticky; top: 20px; }
h3 { color: var(--blue); margin-top: 0; text-align: center; }
.form-group { margin-bottom: 12px; }
label { display: block; font-size: 0.8rem; margin-bottom: 5px; color: #8b949e; }
input, select { width: 100%; padding: 10px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 5px; box-sizing: border-box; } 
.btn-group { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
button { cursor: pointer; border: none; border-radius: 5px; padding: 12px; font-weight: bold; color: white; transition: 0.3s; }
.btn-add { background: var(--green); }
.btn-export { background: #21262d; border: 1px solid var(--border); }
.btn-clear { background: var(--red); font-size: 0.7rem; opacity: 0.7; }
button:hover { filter: brightness(1.2); }

/* Área de Dados e Gráficos */
.main-content { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card { background: var(--card); padding: 20px; border-radius: 8px; border: 1px solid var(--border); }

table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
th { background: #21262d; color: var(--blue); text-align: left; padding: 12px; border-bottom: 2px solid var(--border); }
td { padding: 10px; border-bottom: 1px solid var(--border); }
.status-badge { padding: 4px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: bold; }
Enter fullscreen mode Exit fullscreen mode

&lt;/style&gt;
</code></pre></div>
<p></head><br>
<body></p>
<div class="highlight"><pre class="highlight plaintext"><code>&lt;div class="sidebar"&gt;
&lt;h3&gt;📝 Cadastro PCP&lt;/h3&gt;
&lt;div class="form-group"&gt;&lt;label&gt;Nº Lote:&lt;/label&gt;&lt;input type="text" id="lote" placeholder="Ex: 2654"&gt;&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;Produto / SKU:&lt;/label&gt;
&lt;select id="sku"&gt;
&lt;option value="T-Shirt Basic"&gt;T-Shirt Basic&lt;/option&gt;
&lt;option value="Cropped Ribana"&gt;Cropped Ribana&lt;/option&gt;
&lt;option value="Plus Size Max"&gt;Plus Size Max&lt;/option&gt;
&lt;option value="Short Saia"&gt;Short Saia&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;&lt;label&gt;Quantidade:&lt;/label&gt;&lt;input type="number" id="qtd" placeholder="0"&gt;&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;Oficina / Fornecedor:&lt;/label&gt;
&lt;select id="oficina"&gt;
&lt;option value="Monica Costura"&gt;Monica Costura&lt;/option&gt;
&lt;option value="Jaquelin Costura"&gt;Jaquelin Costura&lt;/option&gt;
&lt;option value="JS Estamparia"&gt;JS Estamparia&lt;/option&gt;
&lt;option value="Tiago Corte"&gt;Tiago Corte&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;Status:&lt;/label&gt;
&lt;select id="status"&gt;
&lt;option value="Corte"&gt;Em Corte&lt;/option&gt;
&lt;option value="Costura"&gt;Em Costura&lt;/option&gt;
&lt;option value="Loja"&gt;Aguardando Loja&lt;/option&gt;
&lt;option value="Delay"&gt;Atraso (Delay)&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;div class="form-group"&gt;&lt;label&gt;Data Prevista:&lt;/label&gt;&lt;input type="date" id="data"&gt;&lt;/div&gt;

&amp;lt;div class="btn-group"&amp;gt;
    &amp;lt;button class="btn-add" onclick="adicionarLote()"&amp;gt;Salvar Lote&amp;lt;/button&amp;gt;
    &amp;lt;button class="btn-export" onclick="exportarCSV()"&amp;gt;📥 Exportar para Excel (.csv)&amp;lt;/button&amp;gt;
    &amp;lt;button class="btn-clear" onclick="limparTudo()"&amp;gt;Limpar Todo o Banco&amp;lt;/button&amp;gt;
&amp;lt;/div&amp;gt;
Enter fullscreen mode Exit fullscreen mode

&lt;/div&gt;

&lt;div class="main-content"&gt;
&lt;div class="dash-row"&gt;
&lt;div class="card"&gt;&lt;h3&gt;Carga por Oficina&lt;/h3&gt;&lt;canvas id="chartOficina"&gt;&lt;/canvas&gt;&lt;/div&gt;
&lt;div class="card"&gt;&lt;h3&gt;Mix de Categoria&lt;/h3&gt;&lt;canvas id="chartMix"&gt;&lt;/canvas&gt;&lt;/div&gt;
&lt;/div&gt;

&amp;lt;div class="card"&amp;gt;
    &amp;lt;h3&amp;gt;📋 Tabela de Produção Real-Time&amp;lt;/h3&amp;gt;
    &amp;lt;table id="tabelaPcp"&amp;gt;
        &amp;lt;thead&amp;gt;
            &amp;lt;tr&amp;gt;
                &amp;lt;th&amp;gt;Lote&amp;lt;/th&amp;gt;
                &amp;lt;th&amp;gt;Produto&amp;lt;/th&amp;gt;
                &amp;lt;th&amp;gt;Qtd&amp;lt;/th&amp;gt;
                &amp;lt;th&amp;gt;Oficina&amp;lt;/th&amp;gt;
                &amp;lt;th&amp;gt;Data&amp;lt;/th&amp;gt;
                &amp;lt;th&amp;gt;Status&amp;lt;/th&amp;gt;
            &amp;lt;/tr&amp;gt;
        &amp;lt;/thead&amp;gt;
        &amp;lt;tbody id="listaLotes"&amp;gt;&amp;lt;/tbody&amp;gt;
    &amp;lt;/table&amp;gt;
&amp;lt;/div&amp;gt;
Enter fullscreen mode Exit fullscreen mode

&lt;/div&gt;

&lt;script&gt;
let registros = JSON.parse(localStorage.getItem('paris_pcp_db')) || [];
let chart1, chart2;

function init() {
    renderCharts();
    atualizarTela();
}

function adicionarLote() {
    const novo = {
        lote: document.getElementById('lote').value,
        sku: document.getElementById('sku').value,
        qtd: parseInt(document.getElementById('qtd').value) || 0,
        oficina: document.getElementById('oficina').value,
        status: document.getElementById('status').value,
        data: document.getElementById('data').value
    };

    if(!novo.lote || !novo.qtd) return alert("Preencha Lote e Quantidade!");

    registros.push(novo);
    localStorage.setItem('paris_pcp_db', JSON.stringify(registros));
    atualizarTela();
    document.getElementById('lote').value = '';
    document.getElementById('qtd').value = '';
}

function atualizarTela() {
    const lista = document.getElementById('listaLotes');
    lista.innerHTML = '';

    let dadosOficina = {};
    let dadosMix = {};

    registros.forEach(r =&amp;gt; {
        lista.innerHTML += `
            &amp;lt;tr&amp;gt;
                &amp;lt;td&amp;gt;#${r.lote}&amp;lt;/td&amp;gt;
                &amp;lt;td&amp;gt;${r.sku}&amp;lt;/td&amp;gt;
                &amp;lt;td&amp;gt;${r.qtd}&amp;lt;/td&amp;gt;
                &amp;lt;td&amp;gt;${r.oficina}&amp;lt;/td&amp;gt;
                &amp;lt;td&amp;gt;${r.data}&amp;lt;/td&amp;gt;
                &amp;lt;td&amp;gt;&amp;lt;span class="status-badge" style="background:${r.status === 'Delay' ? '#da3633' : '#238636'}"&amp;gt;${r.status}&amp;lt;/span&amp;gt;&amp;lt;/td&amp;gt;
            &amp;lt;/tr&amp;gt;`;

        dadosOficina[r.oficina] = (dadosOficina[r.oficina] || 0) + r.qtd;
        dadosMix[r.sku] = (dadosMix[r.sku] || 0) + r.qtd;
    });

    chart1.data.labels = Object.keys(dadosOficina);
    chart1.data.datasets[0].data = Object.values(dadosOficina);
    chart1.update();

    chart2.data.labels = Object.keys(dadosMix);
    chart2.data.datasets[0].data = Object.values(dadosMix);
    chart2.update();
}

function renderCharts() {
    Chart.defaults.color = '#8b949e';
    chart1 = new Chart(document.getElementById('chartOficina'), {
        type: 'bar',
        data: { labels: [], datasets: [{ label: 'Peças', data: [], backgroundColor: '#58a6ff' }] }
    });
    chart2 = new Chart(document.getElementById('chartMix'), {
        type: 'doughnut',
        data: { labels: [], datasets: [{ data: [], backgroundColor: ['#238636', '#8957e5', '#d29922', '#1f6feb'] }] }
    });
}

function exportarCSV() {
    let csv = "\uFEFFLote;Produto;Quantidade;Oficina;Data;Status\n";
    registros.forEach(r =&amp;gt; {
        csv += `${r.lote};${r.sku};${r.qtd};${r.oficina};${r.data};${r.status}\n`;
    });
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = "producao_paris_atacado.csv";
    link.click();
}

function limparTudo() {
    if(confirm("Apagar tudo?")) {
        localStorage.clear();
        registros = [];
        atualizarTela();
    }
}

window.onload = init;
Enter fullscreen mode Exit fullscreen mode

&lt;/script&gt;
</code></pre></div>
<p></body><br>
</html></p>

Top comments (0)