julian
17c08e6392
- Nx 22.7 monorepo (pnpm 11.1, TypeScript 5.9, Node 24) - apps/api: NestJS 11 (CJS conforme CODING-RULES.md PGD-DB-004) - apps/web: React 19 + Vite 8 (ESM) - libs/shared/api-interface: Zod contract base - Docker Compose dev: Postgres 18, Valkey 8, MinIO, Mailpit - WDS artifacts: - design-artifacts/A-Product-Brief/ (5 docs canônicos + 16 dialogs) - design-artifacts/B-Trigger-Map/ (hub + 4 personas + feature impact) - Stack canon: STACK.md v2.2 + CODING-RULES.md v2.0 + brand.md - AGENTS.md + README.md como entrada para devs/agentes Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2252 lines
150 KiB
HTML
2252 lines
150 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pt-br">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>JCS - Força de Vendas Pro</title>
|
|
<!-- Fontes e Ícones -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<style>
|
|
:root {
|
|
--jcs-blue: #004a99;
|
|
--jcs-blue-hover: #003a7a;
|
|
--jcs-blue-light: #e6eff8;
|
|
--bg-body: #f4f7fa;
|
|
--white: #ffffff;
|
|
--text-main: #2d3748;
|
|
--text-muted: #718096;
|
|
--radius-lg: 20px;
|
|
--radius-md: 12px;
|
|
--shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
|
|
--green: #38a169;
|
|
--whatsapp-green: #25D366;
|
|
--red: #e53e3e;
|
|
--orange: #ed8936;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }
|
|
body { background-color: var(--bg-body); color: var(--text-main); overflow: hidden; }
|
|
|
|
/* --- TELA DE LOGIN --- */
|
|
#login-page {
|
|
height: 100vh; display: flex; align-items: center; justify-content: center;
|
|
background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
|
|
}
|
|
.login-card {
|
|
background: var(--white); padding: 50px; border-radius: 30px; box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
width: 100%; max-width: 420px; text-align: center;
|
|
}
|
|
.login-card img.logo-login { width: 240px; height: auto; margin-bottom: 30px; }
|
|
|
|
/* --- ESTRUTURA DASHBOARD --- */
|
|
#main-layout { display: none; height: 100vh; }
|
|
|
|
.sidebar { width: 260px; background: var(--white); display: flex; flex-direction: column; padding: 25px 15px; border-right: 1px solid #e2e8f0; }
|
|
.sidebar-logo { text-align: center; margin-bottom: 40px; }
|
|
.sidebar-logo img.logo-sidebar { width: 180px; height: auto; }
|
|
|
|
.nav-link {
|
|
display: flex; align-items: center; padding: 14px 20px; text-decoration: none; color: var(--text-muted);
|
|
font-weight: 600; border-radius: var(--radius-md); margin-bottom: 8px; transition: 0.3s; font-size: 14px;
|
|
}
|
|
.nav-link i { margin-right: 15px; font-size: 18px; width: 25px; text-align: center; }
|
|
.nav-link:hover, .nav-link.active { background: var(--jcs-blue-light); color: var(--jcs-blue); }
|
|
|
|
.content-area { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; }
|
|
.topbar {
|
|
height: 80px; background: var(--white); display: flex; align-items: center;
|
|
justify-content: space-between; padding: 0 40px; border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
.topbar .client-title { font-weight: 700; color: #1a202c; display: flex; align-items: center; gap: 10px; }
|
|
|
|
.page { padding: 30px 40px; overflow-y: auto; display: none; height: calc(100vh - 80px); }
|
|
.page.active { display: block; }
|
|
.page-title { margin-bottom: 25px; font-size: 22px; font-weight: 800; }
|
|
|
|
.card { background: var(--white); border-radius: var(--radius-lg); padding: 25px; box-shadow: var(--shadow); margin-bottom: 20px; border: 1px solid rgba(0,0,0,0.02); }
|
|
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
|
|
|
|
.btn-primary { padding: 12px 24px; background: var(--jcs-blue); color: white; border: none; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
|
|
.btn-primary:hover:not([disabled]) { background: var(--jcs-blue-hover); transform: translateY(-1px); }
|
|
.btn-outline { padding: 10px 20px; background: white; border: 1px solid #e2e8f0; border-radius: 10px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-main); }
|
|
.btn-outline:hover { background: var(--bg-body); }
|
|
.btn-success { background: var(--green); color: white; border: none; padding: 15px 30px; border-radius: 12px; font-weight: 700; cursor: pointer; }
|
|
|
|
.input-group { margin-bottom: 15px; position: relative; }
|
|
.input-group label { display: block; font-size: 11px; font-weight: 800; color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.input-group input, .input-group select, .input-group textarea { width: 100%; padding: 12px 15px; border: 1px solid #e2e8f0; border-radius: 10px; outline: none; font-size: 14px; font-family: 'Plus Jakarta Sans', sans-serif;}
|
|
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { border-color: var(--jcs-blue); }
|
|
|
|
.search-results {
|
|
position: absolute; top: 100%; left: 0; width: 100%; background: white; border-radius: 10px;
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1); z-index: 100; max-height: 200px; overflow-y: auto; display: none; margin-top: 5px;
|
|
}
|
|
.result-item { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #f7fafc; font-size: 13px; }
|
|
.result-item:hover { background: var(--jcs-blue-light); }
|
|
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th { text-align: left; padding: 15px; color: var(--text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid #f1f5f9; }
|
|
td { padding: 18px 15px; border-bottom: 1px solid #f8fafc; font-size: 14px; }
|
|
|
|
.badge { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; }
|
|
.badge-orange { background: #feebc8; color: #9c4221; }
|
|
.badge-green { background: #c6f6d5; color: #22543d; }
|
|
.badge-gray { background: #edf2f7; color: #4a5568; }
|
|
.badge-blue { background: #ebf8ff; color: #2b6cb0; }
|
|
.badge-red { background: #fff5f5; color: #c53030; }
|
|
|
|
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1000; }
|
|
.modal-content { background: white; padding: 30px; border-radius: 20px; width: 100%; max-width: 750px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
|
|
.stock-badge { padding: 5px 10px; background: #fff9eb; color: #b7791f; border-radius: 6px; font-size: 12px; font-weight: 700; margin-bottom: 15px; display: inline-block; }
|
|
|
|
.order-actions-bar {
|
|
display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px;
|
|
}
|
|
.btn-action-sm {
|
|
padding: 8px 15px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid #e2e8f0; background: white; color: var(--text-main); display: flex; align-items: center; gap: 6px; transition: 0.2s;
|
|
}
|
|
.btn-action-sm:hover { background: var(--bg-body); }
|
|
.btn-action-sm.blue { background: var(--jcs-blue-light); border-color: transparent; color: var(--jcs-blue); }
|
|
.btn-action-sm.green { background: #e6fffa; border-color: transparent; color: var(--green); }
|
|
.btn-action-sm.whatsapp { background: #e7faf0; border-color: transparent; color: var(--whatsapp-green); }
|
|
|
|
|
|
/* --- PÁGINA CLIENTES --- */
|
|
.clientes-layout { display: flex; gap: 20px; align-items: flex-start; }
|
|
.clientes-list-card { flex: 2.2; background: white; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); border: 1px solid #e2e8f0; overflow: hidden; }
|
|
.clientes-dash-card { flex: 1; background: white; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); border: 1px solid #e2e8f0; display: flex; flex-direction: column; }
|
|
|
|
.cli-tabs { display: flex; border-bottom: 1px solid #e2e8f0; padding: 0 20px; }
|
|
.cli-tab { padding: 15px 20px; font-size: 12px; font-weight: 800; color: #a0aec0; cursor: pointer; border-bottom: 3px solid transparent; display: flex; align-items: center; gap: 8px; text-transform: uppercase; transition: 0.2s; }
|
|
.cli-tab.active { color: #2d3748; border-bottom: 3px solid var(--jcs-blue); }
|
|
|
|
.cli-actions-bar { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px dashed #e2e8f0; }
|
|
.btn-cli-blue { background: var(--jcs-blue); color: white; border: none; padding: 10px 20px; border-radius: 4px; font-weight: 700; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
|
|
.btn-cli-blue:hover { background: var(--jcs-blue-hover); }
|
|
.btn-outline-cli { background: white; border: 1px solid #cbd5e0; color: #4a5568; padding: 9px 15px; border-radius: 4px; font-weight: 600; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
|
|
.btn-outline-cli:hover { background: var(--bg-body); }
|
|
.cli-search-box { display: flex; border: 1px solid #cbd5e0; border-radius: 4px; overflow: hidden; width: 280px; transition: 0.2s; }
|
|
.cli-search-box:focus-within { border-color: var(--jcs-blue); }
|
|
.cli-search-box input { border: none; padding: 10px 15px; outline: none; font-size: 12px; flex: 1; }
|
|
.cli-search-box button { background: #f7fafc; border: none; border-left: 1px solid #cbd5e0; padding: 0 15px; cursor: pointer; color: #4a5568; }
|
|
|
|
.cli-item { padding: 20px; border-bottom: 1px dashed #e2e8f0; }
|
|
.cli-item:last-child { border-bottom: none; }
|
|
.cli-item-header { font-size: 13px; color: #718096; margin-bottom: 15px; display: flex; align-items: center; gap: 5px; }
|
|
.cli-item-header .plus { color: var(--jcs-blue); font-weight: 800; cursor: pointer; font-size: 16px; margin-right: 5px; }
|
|
.cli-item-header strong { color: var(--jcs-blue); font-weight: 800; }
|
|
|
|
.cli-item-body { display: flex; justify-content: space-between; align-items: flex-start; padding-left: 25px; }
|
|
.cli-item-info { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #718096; }
|
|
.cli-item-info i { width: 16px; color: #a0aec0; }
|
|
.cli-item-actions { display: flex; gap: 10px; }
|
|
.btn-outline-cli.red { color: var(--red); }
|
|
.btn-outline-cli.red i { color: var(--red); }
|
|
|
|
.dash-header { padding: 15px 20px; border-bottom: 1px solid #f0f4f8; display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; color: #4a5568; text-transform: uppercase; }
|
|
.dash-header .date { color: #a0aec0; font-weight: 700; }
|
|
|
|
.dash-chart-area { position: relative; height: 260px; padding: 20px; display: flex; justify-content: center; align-items: center; }
|
|
.chart-center-val { position: absolute; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); }
|
|
.chart-center-val h3 { font-size: 34px; color: #2d3748; margin: 0; font-weight: 400; }
|
|
.chart-center-val p { font-size: 12px; color: #a0aec0; margin: 0; }
|
|
|
|
.dash-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 0 20px 25px 20px; font-size: 11px; color: #718096; font-weight: 600; }
|
|
.leg-row { display: flex; align-items: center; gap: 8px; }
|
|
.dot { width: 8px; height: 8px; border-radius: 50%; }
|
|
|
|
.btn-detalhar-dash { background: #f8f9fa; border: none; border-top: 1px solid #f0f4f8; padding: 18px; width: 100%; font-weight: 800; color: var(--jcs-blue); font-size: 12px; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 10px; }
|
|
.btn-detalhar-dash:hover { background: #f1f3f5; color: var(--jcs-blue-hover); }
|
|
|
|
.radio-group { display: flex; gap: 20px; align-items: center; margin-bottom: 25px; }
|
|
.radio-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--text-main); }
|
|
.radio-label input[type="radio"] { accent-color: var(--jcs-blue); width: 18px; height: 18px; cursor: pointer; }
|
|
|
|
/* ============================================================== */
|
|
/* --- ESTILOS NOVA TELA: ANÁLISE DO CLIENTE --- */
|
|
/* ============================================================== */
|
|
|
|
.analise-layout { display: flex; gap: 20px; align-items: flex-start; }
|
|
.analise-col-left { flex: 2; display: flex; flex-direction: column; gap: 20px; }
|
|
.analise-col-right { flex: 1; display: flex; flex-direction: column; gap: 20px; }
|
|
|
|
.info-base-cliente { margin-bottom: 25px; font-size: 13px; color: #4a5568; }
|
|
.info-base-cliente p { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
|
|
.info-base-cliente p i { color: #a0aec0; width: 16px; }
|
|
.link-toggle { color: var(--jcs-blue); font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; text-decoration: none; }
|
|
|
|
.widget-card { background: var(--white); border-radius: 8px; border: 1px solid #e2e8f0; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
|
|
.widget-header { padding: 15px 20px; background: #fafbfc; border-bottom: 1px solid #e2e8f0; font-size: 12px; font-weight: 800; color: #4a5568; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
|
|
.widget-body { padding: 20px; }
|
|
.empty-state { font-size: 12px; color: #a0aec0; text-align: center; padding: 20px 0; }
|
|
|
|
.resumo-list { display: flex; flex-direction: column; gap: 15px; }
|
|
.resumo-item { display: flex; align-items: center; gap: 15px; }
|
|
.resumo-icon { width: 35px; height: 35px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 14px; }
|
|
.resumo-icon.blue { background: var(--jcs-blue-light); color: var(--jcs-blue); }
|
|
.resumo-icon.green { background: #f0fff4; color: var(--green); }
|
|
.resumo-icon.yellow { background: #fffff0; color: #d69e2e; }
|
|
.resumo-data { display: flex; flex-direction: column; }
|
|
.resumo-data strong { font-size: 15px; color: #2d3748; }
|
|
.resumo-data span { font-size: 11px; color: #718096; }
|
|
|
|
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
|
|
.switch input { opacity: 0; width: 0; height: 0; }
|
|
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e0; transition: .4s; border-radius: 34px; }
|
|
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
|
|
input:checked + .slider { background-color: var(--jcs-blue); }
|
|
input:checked + .slider:before { transform: translateX(20px); }
|
|
|
|
.hist-pedido-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #edf2f7; }
|
|
.hist-pedido-item:last-child { border-bottom: none; padding-bottom: 0; }
|
|
.hist-pedido-left { display: flex; gap: 15px; align-items: flex-start; }
|
|
.hist-doc-icon { background: #f4f7fa; padding: 10px; border-radius: 8px; color: #4a5568; }
|
|
.hist-pedido-info { font-size: 12px; color: #718096; display: flex; flex-direction: column; gap: 4px; }
|
|
.hist-pedido-info a { color: var(--jcs-blue); font-weight: 700; text-decoration: none; font-size: 14px; }
|
|
.hist-status { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #4a5568; font-weight: 600; }
|
|
|
|
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 15px; }
|
|
.prod-item { text-align: center; font-size: 11px; position: relative; }
|
|
.prod-rank { position: absolute; top: -10px; left: -10px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #e2e8f0; background: white; color: var(--jcs-blue); font-weight: 800; display: flex; align-items: center; justify-content: center; }
|
|
.prod-img-placeholder { background: #edf2f7; border-radius: 8px; height: 100px; display: flex; align-items: center; justify-content: center; color: #cbd5e0; font-size: 30px; margin: 10px 0; }
|
|
.prod-title { font-weight: 700; color: #2d3748; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 30px; margin-bottom: 5px; }
|
|
.prod-code { color: #a0aec0; margin-bottom: 5px; }
|
|
.prod-qty { color: #718096; }
|
|
|
|
.section-title { margin: 25px 0 15px 0; color: var(--jcs-blue); font-size: 13px; font-weight: 800; text-transform: uppercase; border-bottom: 2px solid #edf2f7; padding-bottom: 8px; }
|
|
|
|
/* ============================================================== */
|
|
/* --- NOVOS ESTILOS: DASHBOARD DE INDICADORES (Ação Rápida) --- */
|
|
/* ============================================================== */
|
|
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
|
|
|
|
.dash-list-item {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 12px 0; border-bottom: 1px dashed #e2e8f0;
|
|
}
|
|
.dash-list-item:last-child { border-bottom: none; padding-bottom: 0; }
|
|
|
|
.alert-icon-box {
|
|
width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-right: 15px; flex-shrink: 0;
|
|
}
|
|
.alert-icon-box.red { background: #fff5f5; color: var(--red); }
|
|
.alert-icon-box.orange { background: #fffaf0; color: var(--orange); }
|
|
.alert-icon-box.blue { background: var(--jcs-blue-light); color: var(--jcs-blue); }
|
|
|
|
.chart-header-title { font-size: 14px; margin-bottom: 15px; color: #4a5568; display: flex; align-items: center; gap: 8px; font-weight: 800; text-transform: uppercase; }
|
|
|
|
/* ============================================================== */
|
|
/* --- CORREÇÕES DA PÁGINA DE PEDIDOS --- */
|
|
/* ============================================================== */
|
|
.pedidos-summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
margin-bottom: 25px;
|
|
}
|
|
.pedidos-summary-card {
|
|
background: var(--white);
|
|
padding: 20px;
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow);
|
|
border: 1px solid #e2e8f0;
|
|
border-left: 4px solid var(--jcs-blue);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
.pedidos-summary-card p {
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
}
|
|
.pedidos-summary-card h3 {
|
|
font-size: 24px;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.filter-bar {
|
|
background: var(--white);
|
|
padding: 20px;
|
|
border: 1px solid #e2e8f0;
|
|
border-top: none;
|
|
border-bottom-left-radius: var(--radius-lg);
|
|
border-bottom-right-radius: var(--radius-lg);
|
|
display: flex;
|
|
gap: 15px;
|
|
align-items: center;
|
|
margin-bottom: 25px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.search-box {
|
|
flex: 2.5; /* Aumenta bastante a barra de pesquisa */
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 0 15px;
|
|
background: #f8fafc;
|
|
transition: 0.2s;
|
|
}
|
|
.search-box:focus-within {
|
|
border-color: var(--jcs-blue);
|
|
background: var(--white);
|
|
}
|
|
.search-box input {
|
|
width: 100%;
|
|
border: none;
|
|
background: transparent;
|
|
padding: 12px 10px;
|
|
outline: none;
|
|
font-size: 13px;
|
|
}
|
|
.date-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border: 1px solid #e2e8f0;
|
|
padding: 0 15px;
|
|
border-radius: 8px;
|
|
background: var(--white);
|
|
}
|
|
.date-box input {
|
|
border: none;
|
|
padding: 11px 0;
|
|
outline: none;
|
|
font-size: 12px;
|
|
color: var(--text-main);
|
|
background: transparent;
|
|
}
|
|
|
|
/* ============================================================== */
|
|
/* --- ESTILOS ADICIONADOS: TELA DE NOVO PEDIDO (MELHORIAS) --- */
|
|
/* ============================================================== */
|
|
.cli-quick-info {
|
|
background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 15px;
|
|
display: none; align-items: center; justify-content: space-between; margin-top: 10px;
|
|
}
|
|
.cli-quick-info div { display: flex; flex-direction: column; gap: 4px; }
|
|
.cli-quick-info span.lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; font-weight: 800; }
|
|
.cli-quick-info span.val { font-size: 14px; color: var(--text-main); font-weight: 700; }
|
|
|
|
.checkout-bar {
|
|
background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 30px;
|
|
display: flex; justify-content: space-between; align-items: center; margin-top: 25px; box-shadow: var(--shadow);
|
|
}
|
|
|
|
.empty-table-msg {
|
|
text-align: center; padding: 40px 20px; color: #a0aec0; font-size: 14px; background: #fafbfc; border-bottom: 1px solid #f8fafc;
|
|
}
|
|
.empty-table-msg i { font-size: 30px; margin-bottom: 10px; color: #cbd5e0; }
|
|
|
|
/* ============================================================== */
|
|
/* --- NOVOS ESTILOS INCLUÍDOS: CRM (FUNIL, AGENDA E TIMELINE) --- */
|
|
/* ============================================================== */
|
|
.menu-divider { font-size: 11px; font-weight: 800; color: #cbd5e0; text-transform: uppercase; margin: 20px 0 10px 20px; letter-spacing: 1px; }
|
|
|
|
/* Funil de Vendas (Kanban) */
|
|
.kanban-board { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 10px; height: calc(100vh - 180px); }
|
|
.kanban-column { background: #f4f7fa; border-radius: 12px; width: 320px; min-width: 320px; display: flex; flex-direction: column; border: 1px solid #e2e8f0; }
|
|
.kanban-header { padding: 15px 20px; font-size: 13px; font-weight: 800; color: #4a5568; border-bottom: 2px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; }
|
|
.kanban-header .badge { background: #e2e8f0; color: #4a5568; }
|
|
.kanban-cards { padding: 15px; flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
|
|
|
|
.kanban-card { background: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); border: 1px solid #e2e8f0; cursor: grab; transition: 0.2s; border-left: 3px solid transparent;}
|
|
.kanban-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.05); transform: translateY(-2px); border-color: #cbd5e0; }
|
|
.kanban-card.quente { border-left-color: var(--orange); }
|
|
.kanban-card.morno { border-left-color: var(--jcs-blue); }
|
|
|
|
.k-card-title { font-size: 14px; font-weight: 800; color: var(--text-main); margin-bottom: 5px; }
|
|
.k-card-value { font-size: 15px; font-weight: 700; color: var(--green); margin-bottom: 10px; }
|
|
.k-card-info { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 5px; margin-bottom: 12px; }
|
|
.k-card-actions { display: flex; gap: 8px; border-top: 1px dashed #edf2f7; padding-top: 12px; }
|
|
|
|
/* Agenda / Planner */
|
|
.agenda-layout { display: flex; gap: 20px; height: calc(100vh - 180px); }
|
|
.agenda-lista { flex: 1.2; background: white; border-radius: var(--radius-lg); border: 1px solid #e2e8f0; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); }
|
|
.agenda-mapa { flex: 1; background: #e2e8f0; border-radius: var(--radius-lg); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid #cbd5e0; }
|
|
|
|
.agenda-lista-header { padding: 20px; border-bottom: 1px solid #e2e8f0; background: #fafbfc; }
|
|
.agenda-scroll { padding: 0 20px; overflow-y: auto; flex-grow: 1; }
|
|
.agenda-group-title { font-size: 12px; font-weight: 800; color: #a0aec0; text-transform: uppercase; margin: 20px 0 10px 0; }
|
|
|
|
/* Modificação Timeline CRM (Usando na Análise do Cliente) */
|
|
.crm-quick-actions { display: flex; gap: 10px; }
|
|
.hist-pedido-item.crm-log { background: #fafbfc; padding: 15px; border-radius: 8px; border: 1px solid #edf2f7; margin-bottom: 10px; }
|
|
.hist-pedido-item.crm-log:last-child { border-bottom: 1px solid #edf2f7; padding-bottom: 15px; }
|
|
.hist-doc-icon.icon-whatsapp { color: var(--whatsapp-green); background: #e7faf0; }
|
|
.hist-doc-icon.icon-call { color: var(--jcs-blue); background: var(--jcs-blue-light); }
|
|
.hist-doc-icon.icon-visit { color: var(--orange); background: #fffaf0; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="login-page">
|
|
<div class="login-card">
|
|
<img src="logo.png" alt="JCS Força de Vendas" class="logo-login">
|
|
<div class="input-group" style="text-align: left;">
|
|
<label>Usuário</label>
|
|
<input type="text" placeholder="Digite seu usuário">
|
|
</div>
|
|
<div class="input-group" style="text-align: left;">
|
|
<label>Senha</label>
|
|
<input type="password" placeholder="••••••••">
|
|
</div>
|
|
<button class="btn-primary" style="width: 100%; justify-content: center; padding: 16px;" onclick="login()">ACESSAR SISTEMA</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="main-layout">
|
|
<aside class="sidebar">
|
|
<div class="sidebar-logo">
|
|
<img src="logo.png" alt="Logo JCS" class="logo-sidebar">
|
|
</div>
|
|
<nav>
|
|
<div class="menu-divider" style="margin-top: 5px;">Módulo Transacional</div>
|
|
<a href="#" id="link-indicadores" class="nav-link" onclick="showPage('indicadores', this)"><i class="fa-solid fa-chart-pie"></i> INDICADORES</a>
|
|
<a href="#" id="link-pedidos" class="nav-link" onclick="showPage('pedidos', this)"><i class="fa-solid fa-file-invoice-dollar"></i> PEDIDOS</a>
|
|
<a href="#" id="link-clientes" class="nav-link" onclick="showPage('clientes', this)"><i class="fa-solid fa-users"></i> CLIENTES</a>
|
|
<a href="#" id="link-produtos" class="nav-link" onclick="showPage('produtos', this)"><i class="fa-solid fa-box-open"></i> PRODUTOS</a>
|
|
|
|
<div class="menu-divider" style="margin-top: 25px;">Módulo CRM</div>
|
|
<a href="#" id="link-funil" class="nav-link" onclick="showPage('funil', this)"><i class="fa-solid fa-filter-circle-dollar"></i> MEU FUNIL</a>
|
|
<a href="#" id="link-agenda" class="nav-link" onclick="showPage('agenda', this)"><i class="fa-regular fa-calendar-check"></i> AGENDA E ROTAS</a>
|
|
|
|
<a href="#" class="nav-link" style="margin-top: auto; opacity: 0.5;"><i class="fa-solid fa-gear"></i> CONFIGURAÇÕES</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="content-area">
|
|
<header class="topbar">
|
|
<div class="client-title"><i class="fa-solid fa-store" style="color: var(--jcs-blue)"></i> Grupo Totalplast Brasil - SC | 161 - PAVEI COMERCIO E REPRESENTACOES LTDA </div>
|
|
<div style="display: flex; align-items: center; gap: 15px;">
|
|
<button class="btn-primary" onclick="showPage('novo-pedido')"><i class="fa-solid fa-plus"></i> NOVO PEDIDO</button>
|
|
<div style="width: 42px; height: 42px; background: var(--jcs-blue-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--jcs-blue);">JS</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- PÁGINA INDICADORES -->
|
|
<!-- ============================================================== -->
|
|
<section id="indicadores" class="page">
|
|
<h1 class="page-title">Painel de Desempenho</h1>
|
|
|
|
<!-- LINHA SUPERIOR: Os "Vitals" -->
|
|
<div class="grid-3">
|
|
<div class="card">
|
|
<p style="color: var(--text-muted); font-size: 12px; font-weight: 800; text-transform: uppercase;">Vendido vs Meta</p>
|
|
<h2 style="font-size: 26px; margin: 8px 0; color: var(--jcs-blue);">R$ 7.562.062,59</h2>
|
|
<div style="height: 6px; background: #edf2f7; border-radius: 10px; margin: 10px 0;">
|
|
<div style="width: 96%; height: 100%; background: var(--jcs-blue); border-radius: 10px;"></div>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-weight: 600;">
|
|
<span>Meta: R$ 7.863.000,00</span>
|
|
<span style="color: var(--green);"><i class="fa-solid fa-bolt"></i> Projeção: R$ 8.1M</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<p style="color: var(--text-muted); font-size: 12px; font-weight: 800; text-transform: uppercase;">Positivação (Cobertura)</p>
|
|
<h2 style="font-size: 26px; margin: 8px 0; color: var(--text-main);">340 <span style="font-size: 16px; color: var(--text-muted); font-weight: 600;">/ 1.016 clis</span></h2>
|
|
<div style="height: 6px; background: #edf2f7; border-radius: 10px; margin: 10px 0;">
|
|
<div style="width: 33%; height: 100%; background: var(--orange); border-radius: 10px;"></div>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-weight: 600;">
|
|
<span>Apenas 33% da carteira comprou</span>
|
|
<span style="color: var(--orange);"><i class="fa-solid fa-target"></i> Faltam 60 para Meta</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<p style="color: var(--text-muted); font-size: 12px; font-weight: 800; text-transform: uppercase;">Ticket Médio Mensal</p>
|
|
<h2 style="font-size: 26px; margin: 8px 0; color: var(--text-main);">R$ 2.540,00</h2>
|
|
<span style="display: inline-block; margin-top: 10px; padding: 4px 8px; background: #e6fffa; color: var(--green); border-radius: 6px; font-size: 11px; font-weight: 800;"><i class="fa-solid fa-caret-up"></i> +5.2% vs mês anterior</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LINHA DO MEIO: Gráficos Estratégicos -->
|
|
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px;">
|
|
<div class="card" style="margin-bottom: 0; height: 340px;">
|
|
<h3 class="chart-header-title"><i class="fa-solid fa-chart-line" style="color:#cbd5e0;"></i> Ritmo de Vendas (Evolução Diária)</h3>
|
|
<div style="height: 250px;"><canvas id="vendasChart"></canvas></div>
|
|
</div>
|
|
<div class="card" style="margin-bottom: 0; height: 340px; display: flex; flex-direction: column;">
|
|
<h3 class="chart-header-title"><i class="fa-solid fa-chart-pie" style="color:#cbd5e0;"></i> Mix de Produtos Vendidos</h3>
|
|
<div style="flex-grow: 1; position: relative; display: flex; justify-content: center; align-items: center;">
|
|
<canvas id="mixChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LINHA INFERIOR: Painéis de Ação Rápida -->
|
|
<div class="grid-2">
|
|
<!-- PAINEL A: Gargalos e Alertas -->
|
|
<div class="card" style="margin-bottom:0;">
|
|
<h3 class="chart-header-title"><i class="fa-solid fa-triangle-exclamation" style="color:var(--orange);"></i> Status da Carteira de Pedidos</h3>
|
|
|
|
<div class="dash-list-item">
|
|
<div style="display: flex; align-items: center;">
|
|
<div class="alert-icon-box red"><i class="fa-solid fa-lock"></i></div>
|
|
<div>
|
|
<strong style="font-size: 13px; color: var(--text-main);">Pedidos Bloqueados (Crédito)</strong><br>
|
|
<span style="font-size: 11px; color: var(--text-muted);">3 pedidos travados no financeiro</span>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<strong style="font-size: 13px; color: var(--red);">R$ 15.400,00</strong><br>
|
|
<a href="#" style="font-size: 11px; color: var(--jcs-blue); font-weight: 700; text-decoration: none;">Tratar agora</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dash-list-item">
|
|
<div style="display: flex; align-items: center;">
|
|
<div class="alert-icon-box orange"><i class="fa-solid fa-box-open"></i></div>
|
|
<div>
|
|
<strong style="font-size: 13px; color: var(--text-main);">Aguardando Estoque</strong><br>
|
|
<span style="font-size: 11px; color: var(--text-muted);">2 pedidos com falta de itens</span>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<strong style="font-size: 13px; color: var(--orange);">R$ 4.250,00</strong><br>
|
|
<a href="#" style="font-size: 11px; color: var(--jcs-blue); font-weight: 700; text-decoration: none;">Visualizar</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dash-list-item">
|
|
<div style="display: flex; align-items: center;">
|
|
<div class="alert-icon-box blue"><i class="fa-solid fa-truck-fast"></i></div>
|
|
<div>
|
|
<strong style="font-size: 13px; color: var(--text-main);">Em Separação / Faturamento</strong><br>
|
|
<span style="font-size: 11px; color: var(--text-muted);">18 pedidos fluindo normalmente</span>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right;">
|
|
<strong style="font-size: 13px; color: var(--jcs-blue);">R$ 82.900,00</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PAINEL B: Radar de Churn / Oportunidades -->
|
|
<div class="card" style="margin-bottom:0;">
|
|
<h3 class="chart-header-title"><i class="fa-solid fa-radar" style="color:var(--jcs-blue);"></i> Radar de Oportunidades (Risco de Inatividade)</h3>
|
|
|
|
<div class="dash-list-item">
|
|
<div>
|
|
<strong style="font-size: 13px; color: var(--text-main);">PADARIA DO JOÃO LTDA</strong><br>
|
|
<span style="font-size: 11px; color: var(--red); font-weight: 600;"><i class="fa-regular fa-clock"></i> Última compra há 28 dias</span>
|
|
<span style="font-size: 11px; color: var(--text-muted);"> (Ciclo médio: 15 dias)</span>
|
|
</div>
|
|
<button class="btn-action-sm whatsapp" style="padding: 6px 12px; margin: 0;"><i class="fa-brands fa-whatsapp"></i> Chamar</button>
|
|
</div>
|
|
|
|
<div class="dash-list-item">
|
|
<div>
|
|
<strong style="font-size: 13px; color: var(--text-main);">SUPERMERCADO ESTRELA</strong><br>
|
|
<span style="font-size: 11px; color: var(--orange); font-weight: 600;"><i class="fa-regular fa-clock"></i> Última compra há 45 dias</span>
|
|
<span style="font-size: 11px; color: var(--text-muted);"> (Ciclo médio: 30 dias)</span>
|
|
</div>
|
|
<button class="btn-action-sm whatsapp" style="padding: 6px 12px; margin: 0;"><i class="fa-brands fa-whatsapp"></i> Chamar</button>
|
|
</div>
|
|
|
|
<div class="dash-list-item">
|
|
<div>
|
|
<strong style="font-size: 13px; color: var(--text-main);">DISTRIBUIDORA BEBIDA MAIS</strong><br>
|
|
<span style="font-size: 11px; color: var(--orange); font-weight: 600;"><i class="fa-regular fa-clock"></i> Última compra há 22 dias</span>
|
|
<span style="font-size: 11px; color: var(--text-muted);"> (Ciclo médio: 15 dias)</span>
|
|
</div>
|
|
<button class="btn-action-sm whatsapp" style="padding: 6px 12px; margin: 0;"><i class="fa-brands fa-whatsapp"></i> Chamar</button>
|
|
</div>
|
|
|
|
<button class="btn-detalhar-dash" style="margin-top: 10px; padding: 12px; background: white; border: 1px dashed #cbd5e0; border-radius: 8px;"><i class="fa-solid fa-list-ul"></i> Ver todos os 45 clientes no radar</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- ============================================================== -->
|
|
|
|
<!-- PÁGINA PEDIDOS -->
|
|
<!-- ============================================================== -->
|
|
<section id="pedidos" class="page">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<h1 class="page-title" style="margin: 0;">Meus Pedidos</h1>
|
|
<div style="display: flex; gap: 12px;">
|
|
<button class="btn-outline"><i class="fa-solid fa-print"></i> Relatório em PDF</button>
|
|
<button class="btn-primary" onclick="showPage('novo-pedido')"><i class="fa-solid fa-plus"></i> CRIAR PEDIDO</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MINI-DASHBOARD TÁTICO (Visão Rápida) -->
|
|
<div class="pedidos-summary-grid">
|
|
<div class="pedidos-summary-card" style="border-left-color: var(--jcs-blue);">
|
|
<p>Faturado no Mês</p>
|
|
<h3>R$ 142.500,00</h3>
|
|
<span style="font-size: 11px; color: var(--green); font-weight: 700;"><i class="fa-solid fa-arrow-up"></i> 12% vs. mês ant.</span>
|
|
</div>
|
|
<div class="pedidos-summary-card" style="border-left-color: var(--orange);">
|
|
<p>Em Orçamento (Aberto)</p>
|
|
<h3>R$ 38.400,00</h3>
|
|
<span style="font-size: 11px; color: var(--text-muted);">15 pedidos parados</span>
|
|
</div>
|
|
<div class="pedidos-summary-card" style="border-left-color: var(--red);">
|
|
<p>Bloqueados (Retaguarda)</p>
|
|
<h3>R$ 12.150,00</h3>
|
|
<span style="font-size: 11px; color: var(--red); font-weight: 700;"><i class="fa-solid fa-circle-exclamation"></i> 3 pedidos travados</span>
|
|
</div>
|
|
<div class="pedidos-summary-card" style="border-left-color: var(--green);">
|
|
<p>Meta Atingida</p>
|
|
<h3>85%</h3>
|
|
<span style="font-size: 11px; color: var(--text-muted);">Faltam R$ 25.000,00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ABAS DE FILTRO RÁPIDO (Ajuste no HTML para integrar com a barra abaixo) -->
|
|
<div class="card" style="padding: 0; margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; border-bottom: 1px solid #e2e8f0;">
|
|
<div class="cli-tabs" style="border-bottom: none;">
|
|
<div class="cli-tab active"><i class="fa-solid fa-list"></i> Todos</div>
|
|
<div class="cli-tab"><i class="fa-regular fa-clock"></i> Em Orçamento (15)</div>
|
|
<div class="cli-tab"><i class="fa-solid fa-check-double"></i> Faturados</div>
|
|
<div class="cli-tab" style="color: #e53e3e;"><i class="fa-solid fa-lock"></i> Bloqueados (3)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BARRA DE FILTROS AVANÇADOS -->
|
|
<div class="filter-bar">
|
|
<div class="search-box">
|
|
<i class="fa-solid fa-magnifying-glass" style="color: #a0aec0;"></i>
|
|
<input type="text" placeholder="Buscar por cliente, nº do pedido, OC ou CNPJ...">
|
|
</div>
|
|
<div class="date-box">
|
|
<input type="date" title="Data Inicial" value="2026-03-01">
|
|
<span style="color: #cbd5e0;">até</span>
|
|
<input type="date" title="Data Final" value="2026-03-31">
|
|
</div>
|
|
<div style="flex: 1;">
|
|
<select style="width: 100%; border: 1px solid #e2e8f0; padding: 11px; border-radius: 8px; font-size: 12px; outline: none;">
|
|
<option value="">Tipo de Venda (Todos)</option>
|
|
<option value="venda">Venda Padrão</option>
|
|
<option value="bonificacao">Bonificação</option>
|
|
<option value="troca">Troca/Devolução</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn-primary" style="padding: 12px 25px;">Filtrar</button>
|
|
</div>
|
|
|
|
<!-- TABELA DE PEDIDOS RICA -->
|
|
<div class="card" style="padding: 0; overflow: hidden;">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Nº Pedido</th>
|
|
<th>Cliente / Emissão</th>
|
|
<th>Valor Total</th>
|
|
<th>Status Comercial</th>
|
|
<th>Status ERP / Transmissão</th>
|
|
<th style="text-align: center;">Ações Rápidas</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Exemplo 1: Orçamento -->
|
|
<tr>
|
|
<td>
|
|
<strong style="font-size: 14px; color: var(--text-main);">#27777</strong><br>
|
|
<span style="font-size: 11px; color: var(--text-muted);">Venda Padrão</span>
|
|
</td>
|
|
<td>
|
|
<strong style="color: var(--jcs-blue);">PAVEI COMERCIO E REPRESENTAÇÕES</strong><br>
|
|
<span style="font-size: 11px; color: var(--text-muted);"><i class="fa-regular fa-calendar"></i> 18/03/2026</span>
|
|
</td>
|
|
<td><strong style="font-size: 15px;">R$ 1.540,00</strong></td>
|
|
<td><span class="badge badge-orange"><i class="fa-solid fa-pen-ruler"></i> Em orçamento</span></td>
|
|
<td><span class="badge badge-gray"><i class="fa-solid fa-cloud"></i> Não transmitido</span></td>
|
|
<td style="text-align: center; font-size: 15px;">
|
|
<i class="fa-solid fa-pen-to-square" title="Continuar Editando" style="cursor: pointer; color: var(--jcs-blue); margin-right: 12px;" onclick="carregarPedido('PAVEI', false)"></i>
|
|
<i class="fa-solid fa-copy" title="Duplicar Pedido" style="cursor: pointer; color: var(--text-muted); margin-right: 12px;"></i>
|
|
<i class="fa-solid fa-trash" title="Excluir Rascunho" style="cursor: pointer; color: var(--red);"></i>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Exemplo 2: Concluído e Faturado -->
|
|
<tr>
|
|
<td>
|
|
<strong style="font-size: 14px; color: var(--text-main);">#27776</strong><br>
|
|
<span style="font-size: 11px; color: var(--text-muted);">Venda Padrão</span>
|
|
</td>
|
|
<td>
|
|
<strong style="color: var(--jcs-blue);">RLJM REPRESENTAÇÕES LTDA</strong><br>
|
|
<span style="font-size: 11px; color: var(--text-muted);"><i class="fa-regular fa-calendar"></i> 17/03/2026</span>
|
|
</td>
|
|
<td><strong style="font-size: 15px;">R$ 4.890,50</strong></td>
|
|
<td><span class="badge badge-green"><i class="fa-solid fa-check"></i> Fechado</span></td>
|
|
<td><span class="badge badge-blue"><i class="fa-solid fa-file-invoice-dollar"></i> Faturado</span></td>
|
|
<td style="text-align: center; font-size: 15px;">
|
|
<i class="fa-solid fa-eye" title="Consultar" style="cursor: pointer; color: var(--text-muted); margin-right: 12px;" onclick="carregarPedido('RLJM', true)"></i>
|
|
<i class="fa-brands fa-whatsapp" title="Enviar p/ Cliente" style="cursor: pointer; color: var(--whatsapp-green); margin-right: 12px;"></i>
|
|
<i class="fa-solid fa-file-pdf" title="Gerar PDF" style="cursor: pointer; color: var(--text-muted);"></i>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Exemplo 3: Bloqueado no ERP -->
|
|
<tr>
|
|
<td>
|
|
<strong style="font-size: 14px; color: var(--text-main);">#27770</strong><br>
|
|
<span style="font-size: 11px; color: var(--text-muted);">Venda Padrão</span>
|
|
</td>
|
|
<td>
|
|
<strong style="color: var(--jcs-blue);">M. R. DOS REIS DISTRIBUIDORA</strong><br>
|
|
<span style="font-size: 11px; color: var(--text-muted);"><i class="fa-regular fa-calendar"></i> 15/03/2026</span>
|
|
</td>
|
|
<td><strong style="font-size: 15px;">R$ 12.150,00</strong></td>
|
|
<td><span class="badge badge-green"><i class="fa-solid fa-check"></i> Fechado</span></td>
|
|
<td><span class="badge badge-red" title="Limite excedido"><i class="fa-solid fa-lock"></i> Bloq. Financeiro</span></td>
|
|
<td style="text-align: center; font-size: 15px;">
|
|
<i class="fa-solid fa-eye" title="Consultar" style="cursor: pointer; color: var(--text-muted); margin-right: 12px;"></i>
|
|
<i class="fa-solid fa-comment-dots" title="Falar com Financeiro" style="cursor: pointer; color: var(--jcs-blue);"></i>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- PAGINAÇÃO -->
|
|
<div style="padding: 15px 25px; border-top: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-muted);">
|
|
<span>Mostrando 1 a 20 de 184 pedidos</span>
|
|
<div style="display: flex; gap: 5px;">
|
|
<button class="btn-outline" style="padding: 5px 10px;"><i class="fa-solid fa-chevron-left"></i></button>
|
|
<button class="btn-outline" style="padding: 5px 10px; background: var(--jcs-blue); color: white; border-color: var(--jcs-blue);">1</button>
|
|
<button class="btn-outline" style="padding: 5px 10px;">2</button>
|
|
<button class="btn-outline" style="padding: 5px 10px;">3</button>
|
|
<button class="btn-outline" style="padding: 5px 10px;"><i class="fa-solid fa-chevron-right"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NOVO: TELA MEU FUNIL (CRM KANBAN) -->
|
|
<section id="funil" class="page">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<div>
|
|
<h1 class="page-title" style="margin: 0;">Meu Funil de Vendas</h1>
|
|
<p style="font-size: 12px; color: var(--text-muted); font-weight: 600; margin-top: 5px;">Acompanhe negociações e capture novos clientes.</p>
|
|
</div>
|
|
<div style="display: flex; gap: 12px;">
|
|
<button class="btn-outline"><i class="fa-solid fa-filter"></i> Filtrar</button>
|
|
<button class="btn-primary" style="background: var(--jcs-blue);"><i class="fa-solid fa-plus"></i> NOVA OPORTUNIDADE</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kanban-board">
|
|
<!-- Coluna 1 -->
|
|
<div class="kanban-column">
|
|
<div class="kanban-header">
|
|
Prospecção <span class="badge">3</span>
|
|
</div>
|
|
<div class="kanban-cards">
|
|
<div class="kanban-card morno">
|
|
<div class="k-card-title">MERCADINHO SÃO JOSÉ</div>
|
|
<div class="k-card-value">R$ --</div>
|
|
<div class="k-card-info"><i class="fa-regular fa-clock"></i> Criado há 2 dias</div>
|
|
<div class="k-card-actions">
|
|
<button class="btn-action-sm whatsapp"><i class="fa-brands fa-whatsapp"></i></button>
|
|
<button class="btn-action-sm blue"><i class="fa-solid fa-phone"></i> Ligar</button>
|
|
</div>
|
|
</div>
|
|
<div class="kanban-card quente">
|
|
<div class="k-card-title">REDE COMPRE BEM (Expansão)</div>
|
|
<div class="k-card-value">R$ 15.000,00 (Est.)</div>
|
|
<div class="k-card-info"><i class="fa-solid fa-triangle-exclamation" style="color:var(--orange)"></i> Sem contato há 5 dias</div>
|
|
<div class="k-card-actions">
|
|
<button class="btn-action-sm whatsapp"><i class="fa-brands fa-whatsapp"></i></button>
|
|
<button class="btn-action-sm"><i class="fa-solid fa-calendar-plus"></i> Agendar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Coluna 2 -->
|
|
<div class="kanban-column">
|
|
<div class="kanban-header">
|
|
Qualificação / Tabela <span class="badge">1</span>
|
|
</div>
|
|
<div class="kanban-cards">
|
|
<div class="kanban-card morno">
|
|
<div class="k-card-title">DISTRIBUIDORA BEBIDA MAIS</div>
|
|
<div class="k-card-value">R$ 8.500,00</div>
|
|
<div class="k-card-info"><i class="fa-solid fa-envelope"></i> Tabela enviada ontem</div>
|
|
<div class="k-card-actions">
|
|
<button class="btn-action-sm"><i class="fa-solid fa-eye"></i> Abrir CRM</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Coluna 3 -->
|
|
<div class="kanban-column">
|
|
<div class="kanban-header" style="border-bottom-color: var(--orange);">
|
|
Em Negociação <span class="badge">2</span>
|
|
</div>
|
|
<div class="kanban-cards">
|
|
<div class="kanban-card quente">
|
|
<div class="k-card-title">SUPERMERCADO ESTRELA</div>
|
|
<div class="k-card-value">R$ 12.350,00</div>
|
|
<div class="k-card-info"><i class="fa-solid fa-comments"></i> Pediu desconto na bobina</div>
|
|
<div class="k-card-actions">
|
|
<button class="btn-action-sm whatsapp"><i class="fa-brands fa-whatsapp"></i></button>
|
|
<button class="btn-action-sm blue" onclick="carregarPedido('ESTRELA', false)"><i class="fa-solid fa-pen-ruler"></i> Ver Orçamento</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Coluna 4 -->
|
|
<div class="kanban-column">
|
|
<div class="kanban-header" style="border-bottom-color: var(--green);">
|
|
Fechado / Ganho <span class="badge">1</span>
|
|
</div>
|
|
<div class="kanban-cards">
|
|
<div class="kanban-card" style="border-left-color: var(--green); opacity: 0.8;">
|
|
<div class="k-card-title" style="text-decoration: line-through;">BAZAR DISTRIBUIDORA LTDA</div>
|
|
<div class="k-card-value" style="color: var(--text-muted);">R$ 4.890,50</div>
|
|
<div class="k-card-info" style="color: var(--green);"><i class="fa-solid fa-check-circle"></i> Convertido em Pedido #27776</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NOVO: TELA AGENDA E ROTAS (CRM) -->
|
|
<section id="agenda" class="page">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
|
<h1 class="page-title" style="margin: 0;">Agenda e Rotas</h1>
|
|
<div style="display: flex; gap: 12px; align-items: center;">
|
|
<button class="btn-outline"><i class="fa-solid fa-chevron-left"></i></button>
|
|
<span style="font-weight: 800; font-size: 14px; color: var(--text-main);">Hoje, 19 de Março</span>
|
|
<button class="btn-outline"><i class="fa-solid fa-chevron-right"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agenda-layout">
|
|
<!-- Lista de Tarefas -->
|
|
<div class="agenda-lista">
|
|
<div class="agenda-lista-header">
|
|
<div class="cli-search-box" style="width: 100%;">
|
|
<input type="text" placeholder="Buscar compromisso ou cliente...">
|
|
<button><i class="fa-solid fa-magnifying-glass"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="agenda-scroll">
|
|
|
|
<h4 class="agenda-group-title" style="color: var(--red);">ATRASADOS</h4>
|
|
|
|
<div class="dash-list-item" style="background: #fff5f5; padding: 15px; border-radius: 8px; border: 1px solid #fed7d7;">
|
|
<div style="display: flex; gap: 15px; align-items: flex-start;">
|
|
<div class="alert-icon-box gray" style="background: white; border: 1px solid #e2e8f0; margin:0;"><i class="fa-solid fa-phone"></i></div>
|
|
<div>
|
|
<strong style="font-size: 13px; color: var(--text-main);">Ligar para Cobrar Orçamento</strong><br>
|
|
<a href="#" style="font-size: 12px; color: var(--jcs-blue); font-weight: 700; text-decoration: none;" onclick="abrirAnaliseCliente('M. R. DOS REIS')">M. R. DOS REIS DISTRIBUIDORA</a>
|
|
<div style="font-size: 11px; color: var(--red); margin-top: 4px;"><i class="fa-regular fa-clock"></i> Era pra ontem, 14:00</div>
|
|
</div>
|
|
</div>
|
|
<div><button class="btn-action-sm"><i class="fa-solid fa-check"></i> Feito</button></div>
|
|
</div>
|
|
|
|
<h4 class="agenda-group-title">PARA HOJE</h4>
|
|
|
|
<div class="dash-list-item">
|
|
<div style="display: flex; gap: 15px; align-items: flex-start;">
|
|
<div class="alert-icon-box gray icon-visit" style="margin:0;"><i class="fa-solid fa-location-dot"></i></div>
|
|
<div>
|
|
<strong style="font-size: 13px; color: var(--text-main);">Visita Presencial (Apresentar Linha Bio)</strong><br>
|
|
<a href="#" style="font-size: 12px; color: var(--jcs-blue); font-weight: 700; text-decoration: none;" onclick="abrirAnaliseCliente('SUPERMERCADO ESTRELA')">SUPERMERCADO ESTRELA</a>
|
|
<div style="font-size: 11px; color: var(--text-muted); margin-top: 4px;"><i class="fa-regular fa-clock"></i> 10:30 (Confirmado)</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: column; gap: 5px;">
|
|
<button class="btn-action-sm blue" style="justify-content: center;"><i class="fa-solid fa-map-pin"></i> Fazer Check-in</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dash-list-item">
|
|
<div style="display: flex; gap: 15px; align-items: flex-start;">
|
|
<div class="alert-icon-box gray" style="background: var(--jcs-blue-light); color: var(--jcs-blue); margin:0;"><i class="fa-solid fa-robot"></i></div>
|
|
<div>
|
|
<span class="badge badge-orange" style="margin-bottom: 5px; display: inline-block;">Tarefa Automática</span><br>
|
|
<strong style="font-size: 13px; color: var(--text-main);">Aviso de Bloqueio Financeiro</strong><br>
|
|
<a href="#" style="font-size: 12px; color: var(--jcs-blue); font-weight: 700; text-decoration: none;">PAVEI COMERCIO E REPRESENTAÇÕES</a>
|
|
<div style="font-size: 11px; color: var(--text-muted); margin-top: 4px;">Sistema identificou pedido barrado. Entrar em contato.</div>
|
|
</div>
|
|
</div>
|
|
<div><button class="btn-action-sm whatsapp"><i class="fa-brands fa-whatsapp"></i> Chamar</button></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mapa / Roteiro -->
|
|
<div class="agenda-mapa">
|
|
<!-- Placeholder visual para o Google Maps -->
|
|
<div style="text-align: center; color: #718096;">
|
|
<i class="fa-solid fa-map-location-dot" style="font-size: 40px; color: #cbd5e0; margin-bottom: 15px;"></i>
|
|
<h3 style="font-size: 16px; color: #4a5568;">Roteiro Otimizado</h3>
|
|
<p style="font-size: 12px; margin-top: 5px; padding: 0 40px;">O sistema calculará a melhor rota no Google Maps/Waze para as suas 3 visitas presenciais de hoje.</p>
|
|
<button class="btn-primary" style="margin: 20px auto 0 auto;"><i class="fa-solid fa-diamond-turn-right"></i> Iniciar Navegação</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PÁGINA NOVO PEDIDO (REESTRUTURADA CONFORME ALINHAMENTO) -->
|
|
<section id="novo-pedido" class="page">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
|
|
<h1 id="titulo-lancamento" class="page-title" style="margin:0;">Lançamento de Pedido</h1>
|
|
<button class="btn-outline" onclick="showPage('pedidos')">Voltar</button>
|
|
</div>
|
|
|
|
<!-- Barra de Ações Oculta por padrão no NOVO PEDIDO -->
|
|
<div id="barra-acoes-pedido" class="order-actions-bar" style="display: none;">
|
|
<button class="btn-action-sm blue"><i class="fa-solid fa-file-pdf"></i> Faturar Pedido</button>
|
|
<button class="btn-action-sm blue"><i class="fa-solid fa-eye"></i> Visualizar PDF</button>
|
|
<button class="btn-action-sm blue"><i class="fa-solid fa-envelope"></i> Enviar por E-mail</button>
|
|
<button class="btn-action-sm whatsapp"><i class="fa-brands fa-whatsapp"></i> Enviar WhatsApp</button>
|
|
<button class="btn-action-sm"><i class="fa-solid fa-copy"></i> Duplicar</button>
|
|
</div>
|
|
|
|
<div class="card" style="padding-bottom: 10px;">
|
|
<h3 class="section-title" style="margin-top: 0; margin-bottom: 15px;">DADOS DO CLIENTE E COMERCIAL</h3>
|
|
|
|
<div class="input-group">
|
|
<label>BUSCAR E SELECIONAR CLIENTE <span style="color:var(--red)">*</span></label>
|
|
<div style="display: flex; gap: 10px; align-items: center;">
|
|
<i class="fa-solid fa-magnifying-glass" style="position: absolute; left: 15px; color: #a0aec0; top: 40px;"></i>
|
|
<input type="text" id="buscaCliente" placeholder="Digite o nome fantasia, razão social ou CNPJ..." onkeyup="filtrarClientes()" style="padding-left: 40px; font-weight: 600;">
|
|
</div>
|
|
<div id="res-clientes" class="search-results" style="top: 70px;">
|
|
<div class="result-item" onclick="selectCli('PAVEI COMERCIO E REPRESENTAÇÕES')">PAVEI COMERCIO E REPRESENTAÇÕES - 01.234.567/0001-90</div>
|
|
<div class="result-item" onclick="selectCli('BAZAR DISTRIBUIDORA LTDA')">BAZAR DISTRIBUIDORA LTDA - 22.333.444/0001-55</div>
|
|
</div>
|
|
|
|
<!-- Novo Box Quick Info (Aparece ao selecionar cliente) -->
|
|
<div id="cli-info-box" class="cli-quick-info">
|
|
<div>
|
|
<span class="lbl">CNPJ</span>
|
|
<span class="val" id="cli-info-cnpj">00.000.000/0001-00</span>
|
|
</div>
|
|
<div>
|
|
<span class="lbl">Limite Disponível</span>
|
|
<span class="val" id="cli-info-limite" style="color: var(--green);">R$ 15.000,00</span>
|
|
</div>
|
|
<div>
|
|
<span class="lbl">Status</span>
|
|
<span class="val" id="cli-info-status"><span class="badge badge-green">Liberado</span></span>
|
|
</div>
|
|
<button class="btn-outline-cli" style="font-size: 11px; padding: 4px 10px;" onclick="abrirAnaliseCliente(document.getElementById('buscaCliente').value)">Ver Ficha Completa</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;">
|
|
<div class="input-group">
|
|
<label>PAUTA DE PREÇO</label>
|
|
<select id="pauta-preco">
|
|
<option>PAUTA PADRÃO (DISTRIBUIÇÃO)</option>
|
|
<option>PAUTA PROMOÇÃO MARÇO</option>
|
|
<option>TABELA INDÚSTRIA (ATACADO)</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>CONDIÇÃO DE PAGAMENTO</label>
|
|
<select id="cond-pagto"><option>BOLETO 30 DIAS</option><option>PIX / DINHEIRO</option></select>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>CONTATO RESPONSÁVEL</label>
|
|
<input type="text" id="pedido-contato" placeholder="Nome de quem está comprando">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="padding-bottom: 10px;">
|
|
<h3 class="section-title" style="margin-top: 0; margin-bottom: 15px;">INFORMAÇÕES ADICIONAIS</h3>
|
|
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 20px;">
|
|
<div class="input-group">
|
|
<label>Nº ORDEM DE COMPRA (CLIENTE)</label>
|
|
<input type="text" id="pedido-oc" placeholder="Ex: OC-98765">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>OBSERVAÇÕES DO PEDIDO</label>
|
|
<input type="text" id="pedido-obs" placeholder="Instruções de entrega, detalhes logísticos, etc...">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="area-produtos" class="card">
|
|
<div class="input-group" style="margin-bottom: 20px;">
|
|
<label>PESQUISAR E ADICIONAR PRODUTOS</label>
|
|
<div style="position: relative;">
|
|
<i class="fa-solid fa-box-open" style="position: absolute; left: 15px; top: 15px; color: #a0aec0;"></i>
|
|
<input type="text" id="buscaProd" placeholder="Pesquise por nome, código ou código de barras..." onkeyup="filtrarProds()" style="padding-left: 40px; border-color: var(--jcs-blue);">
|
|
</div>
|
|
<div id="res-prods" class="search-results">
|
|
<div class="result-item" onclick="abrirModal('COPO 200ML CX/1000', '002579', 145.00, 450)">002579 - COPO 200ML TRANSPARENTE (Estoque: 450)</div>
|
|
<div class="result-item" onclick="abrirModal('BOBINA PEAD COLOR', '002635', 16.90, 1200)">002635 - BOBINA PEAD COLORIDA (Estoque: 1.200)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<table id="tabela-itens">
|
|
<thead><tr><th>Cód.</th><th>Descrição</th><th>Qtd</th><th>Un.</th><th>Detalhes</th><th>Total</th><th></th></tr></thead>
|
|
<tbody>
|
|
<!-- Novo: Empty State da Tabela -->
|
|
<tr id="empty-table-row">
|
|
<td colspan="7" style="padding: 0; border: none;">
|
|
<div class="empty-table-msg">
|
|
<i class="fa-solid fa-cart-arrow-down"></i>
|
|
<p>Nenhum produto adicionado ao pedido ainda.<br>Pesquise acima para incluir itens.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Novo Rodapé Fixo/Destacado -->
|
|
<div class="checkout-bar" id="barra-checkout">
|
|
<div>
|
|
<p style="color: var(--text-muted); font-size: 13px; font-weight: 800; text-transform: uppercase;">Total do Pedido</p>
|
|
<h2 id="total-pedido" style="color: var(--jcs-blue); font-size: 32px; margin: 0;">R$ 0,00</h2>
|
|
</div>
|
|
<div style="display: flex; gap: 15px;">
|
|
<button class="btn-outline" onclick="showPage('pedidos')">Cancelar</button>
|
|
<button id="btn-finalizar-pedido" class="btn-success" onclick="finalizar()" style="font-size: 16px; padding: 15px 40px;"><i class="fa-solid fa-check"></i> FINALIZAR PEDIDO</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PÁGINA CLIENTES -->
|
|
<section id="clientes" class="page">
|
|
<div class="clientes-layout">
|
|
|
|
<div class="clientes-list-card">
|
|
<div class="cli-tabs">
|
|
<div class="cli-tab active"><i class="fa-solid fa-store"></i> Clientes</div>
|
|
<div class="cli-tab"><i class="fa-solid fa-gear"></i> Configurações</div>
|
|
</div>
|
|
|
|
<div class="cli-actions-bar">
|
|
<div style="display: flex; gap: 10px;">
|
|
<button class="btn-cli-blue" onclick="abrirCadastroCliente()"><i class="fa-solid fa-plus"></i> Cadastrar cliente</button>
|
|
<button class="btn-outline-cli"><i class="fa-solid fa-arrow-down"></i> Importar</button>
|
|
<button class="btn-outline-cli"><i class="fa-solid fa-list-check"></i> Vínculos e permissões</button>
|
|
</div>
|
|
<div class="cli-search-box">
|
|
<input type="text" placeholder="Pesquise por nome ou CNPJ">
|
|
<button><i class="fa-solid fa-magnifying-glass"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cli-item">
|
|
<div class="cli-item-header">
|
|
<span class="plus">+</span> <strong>BAZAR</strong> - BAZAR DISTRIBUIDORA LTDA - 29.345.656/0001-28
|
|
</div>
|
|
<div class="cli-item-body">
|
|
<div class="cli-item-info">
|
|
<div><i class="fa-solid fa-phone"></i> (51) 3034-7889</div>
|
|
<div><i class="fa-solid fa-envelope"></i> ajkbazab@yahoo.com</div>
|
|
<div><i class="fa-solid fa-location-dot"></i> ESTEIO</div>
|
|
</div>
|
|
<div class="cli-item-actions">
|
|
<button class="btn-outline-cli" onclick="abrirAnaliseCliente('BAZAR DISTRIBUIDORA LTDA')"><i class="fa-solid fa-chart-line"></i> Analisar</button>
|
|
<button class="btn-outline-cli"><i class="fa-solid fa-pen"></i> Alterar</button>
|
|
<button class="btn-outline-cli red"><i class="fa-solid fa-trash"></i> Excluir</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cli-item">
|
|
<div class="cli-item-header">
|
|
<span class="plus">+</span> M. R. DOS REIS - 11.402.465/0001-95
|
|
</div>
|
|
<div class="cli-item-body">
|
|
<div class="cli-item-info">
|
|
<div><i class="fa-solid fa-phone"></i> (32) 99944-3968</div>
|
|
<div><i class="fa-solid fa-envelope"></i> galovendedor@yahoo.com.br</div>
|
|
<div><i class="fa-solid fa-location-dot"></i> MIRADOURO</div>
|
|
</div>
|
|
<div class="cli-item-actions">
|
|
<button class="btn-outline-cli" onclick="abrirAnaliseCliente('M. R. DOS REIS')"><i class="fa-solid fa-chart-line"></i> Analisar</button>
|
|
<button class="btn-outline-cli"><i class="fa-solid fa-pen"></i> Alterar</button>
|
|
<button class="btn-outline-cli red"><i class="fa-solid fa-trash"></i> Excluir</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cli-item">
|
|
<div class="cli-item-header">
|
|
<span class="plus">+</span> FABIANO DA SILVA SA - 52.907.531/0001-66
|
|
</div>
|
|
<div class="cli-item-body">
|
|
<div class="cli-item-info">
|
|
<div><i class="fa-solid fa-phone"></i> (88) 99956-3411</div>
|
|
<div><i class="fa-solid fa-envelope"></i> flavioramosquixada@gmail.com</div>
|
|
<div><i class="fa-solid fa-location-dot"></i> QUIXADA</div>
|
|
</div>
|
|
<div class="cli-item-actions">
|
|
<button class="btn-outline-cli" onclick="abrirAnaliseCliente('FABIANO DA SILVA SA')"><i class="fa-solid fa-chart-line"></i> Analisar</button>
|
|
<button class="btn-outline-cli"><i class="fa-solid fa-pen"></i> Alterar</button>
|
|
<button class="btn-outline-cli red"><i class="fa-solid fa-trash"></i> Excluir</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clientes-dash-card">
|
|
<div class="dash-header">
|
|
<span style="display:flex; align-items:center; gap:5px;"><i class="fa-solid fa-circle-info" style="color:#cbd5e0;"></i> CARTEIRA DE CLIENTES</span>
|
|
<span class="date">MARÇO DE 2026</span>
|
|
</div>
|
|
|
|
<div class="dash-chart-area">
|
|
<canvas id="carteiraChart"></canvas>
|
|
<div class="chart-center-val">
|
|
<h3>2606</h3>
|
|
<p>Clientes</p>
|
|
</div>
|
|
<div style="position:absolute; top: 35%; right: 10%; font-size:10px; font-weight:800; color:#2d3748;">39,60%</div>
|
|
<div style="position:absolute; top: 40%; left: 10%; font-size:10px; font-weight:800; color:#2d3748;">60,36%</div>
|
|
<div style="position:absolute; bottom: 35%; right: 25%; font-size:10px; font-weight:800; color:#2d3748;">0,04%</div>
|
|
</div>
|
|
|
|
<div class="dash-legend">
|
|
<div class="leg-row"><span class="dot" style="background:#38a169;"></span> 1032 ativos</div>
|
|
<div class="leg-row"><span class="dot" style="background:#ecc94b;"></span> 1 inativos recentes</div>
|
|
<div class="leg-row"><span class="dot" style="background:#e53e3e;"></span> 1573 inativos antigos</div>
|
|
<div class="leg-row"><span class="dot" style="background:#e2e8f0;"></span> 1306 prospects</div>
|
|
</div>
|
|
|
|
<button class="btn-detalhar-dash"><i class="fa-solid fa-chart-simple"></i> Detalhar carteira</button>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PÁGINA ANÁLISE DO CLIENTE -->
|
|
<section id="analise-cliente" class="page">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
|
|
<div>
|
|
<h1 id="lbl-analise-nome" class="page-title" style="margin:0; font-size: 26px;">OPENFRIOS</h1>
|
|
</div>
|
|
<div style="display: flex; gap: 10px;">
|
|
<button class="btn-outline" style="background: var(--jcs-blue); color: white; border:none;"><i class="fa-solid fa-pen"></i> Alterar</button>
|
|
<button class="btn-outline"><i class="fa-solid fa-list-check"></i> Vínculos e Permissões</button>
|
|
<button class="btn-outline">Mais opções <i class="fa-solid fa-chevron-down" style="font-size: 10px; margin-left:5px;"></i></button>
|
|
<button class="btn-outline" onclick="showPage('clientes')" style="margin-left: 15px; background: #e2e8f0; border-color:#cbd5e0;"><i class="fa-solid fa-arrow-left"></i> Voltar</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="widget-card" style="padding: 25px; margin-bottom: 25px;">
|
|
<div class="info-base-cliente">
|
|
<p><i class="fa-solid fa-phone"></i> (61) 98192-9900 <i class="fa-brands fa-whatsapp" style="color:var(--whatsapp-green); font-size:16px;"></i></p>
|
|
<p><i class="fa-solid fa-envelope"></i> brrepgoias@gmail.com</p>
|
|
<p><i class="fa-solid fa-envelope"></i> openfrios.festas@gmail.com</p>
|
|
<p style="align-items: flex-start;"><i class="fa-solid fa-location-dot" style="margin-top:3px;"></i>
|
|
<span>AV SAO SEBASTIAO LOTES 70, 80, 90 FUNDOS SN - CENTRO (SAO SEBASTIAO)<br>
|
|
CEP 71691-086<br>
|
|
BRASILIA - Distrito Federal<br>
|
|
<a href="#" class="link-toggle" style="margin-top:2px;">Visualizar mapa</a></span>
|
|
</p>
|
|
</div>
|
|
<div style="text-align: center; border-top: 1px solid #edf2f7; padding-top: 15px;">
|
|
<a href="#" class="link-toggle"><i class="fa-solid fa-caret-down"></i> Ver cadastro completo</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analise-layout">
|
|
<div class="analise-col-left">
|
|
<!-- NOVO: AÇÕES RÁPIDAS CRM (Substitui TAREFAS vazio) -->
|
|
<div class="widget-card" style="border-left: 4px solid var(--jcs-blue);">
|
|
<div class="widget-header">
|
|
<span><i class="fa-solid fa-bolt" style="color: var(--jcs-blue); margin-right:5px;"></i> AÇÕES RÁPIDAS CRM</span>
|
|
<button class="btn-outline" style="padding: 6px 12px; font-size: 11px;"><i class="fa-solid fa-calendar-plus"></i> Agendar Tarefa</button>
|
|
</div>
|
|
<div class="widget-body">
|
|
<p style="font-size: 12px; color: var(--text-muted); margin-bottom: 15px;">Registre rapidamente uma interação com este cliente (Log automático).</p>
|
|
<div class="crm-quick-actions">
|
|
<button class="btn-action-sm whatsapp" style="flex:1; justify-content:center;"><i class="fa-brands fa-whatsapp"></i> WhatsApp</button>
|
|
<button class="btn-action-sm blue" style="flex:1; justify-content:center;"><i class="fa-solid fa-phone"></i> Ligação</button>
|
|
<button class="btn-action-sm" style="flex:1; justify-content:center; background:#fffaf0; color:var(--orange); border-color:transparent;"><i class="fa-solid fa-location-dot"></i> Check-in Visita</button>
|
|
<button class="btn-action-sm" style="flex:1; justify-content:center;"><i class="fa-solid fa-pen"></i> Anotação</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NOVO: TIMELINE 360º (Substitui a lista simples de pedidos) -->
|
|
<div class="widget-card">
|
|
<div class="widget-header">
|
|
<span><i class="fa-solid fa-clock-rotate-left" style="color: var(--text-muted); margin-right:5px;"></i> TIMELINE 360º (HISTÓRICO B2B)</span>
|
|
<button class="btn-primary" style="padding: 8px 15px; font-size: 12px; border-radius: 6px;" onclick="showPage('novo-pedido')"><i class="fa-solid fa-plus"></i> Criar pedido</button>
|
|
</div>
|
|
<div class="widget-body" style="padding: 15px 20px;">
|
|
|
|
<!-- Log CRM: Anotação -->
|
|
<div class="hist-pedido-item crm-log">
|
|
<div class="hist-pedido-left">
|
|
<div class="hist-doc-icon icon-call"><i class="fa-solid fa-phone"></i></div>
|
|
<div class="hist-pedido-info">
|
|
<strong style="color: var(--text-main); font-size: 13px;">Ligação de Follow-up</strong>
|
|
<span>Hoje, 10:15 Responsável: CARLOS (Vendedor)</span>
|
|
<span style="color:#4a5568; margin-top: 5px; font-style: italic;">"Cliente achou o preço da bobina alto. Fiquei de analisar com a gerência."</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log Transacional: Pedido -->
|
|
<div class="hist-pedido-item">
|
|
<div class="hist-pedido-left">
|
|
<div class="hist-doc-icon"><i class="fa-solid fa-file-invoice-dollar"></i></div>
|
|
<div class="hist-pedido-info">
|
|
<a href="#">Pedido #27800 faturado</a>
|
|
<span>18 Mar 2026 Condição: 28/35/42 DIAS</span>
|
|
<span style="color:var(--green); font-weight: 700;"><i class="fa-solid fa-dollar-sign"></i> R$ 53.380,21</span>
|
|
</div>
|
|
</div>
|
|
<div class="hist-status">Faturado <i class="fa-solid fa-check-circle" style="color:var(--jcs-blue);"></i></div>
|
|
</div>
|
|
|
|
<!-- Log CRM: WhatsApp -->
|
|
<div class="hist-pedido-item crm-log">
|
|
<div class="hist-pedido-left">
|
|
<div class="hist-doc-icon icon-whatsapp"><i class="fa-brands fa-whatsapp"></i></div>
|
|
<div class="hist-pedido-info">
|
|
<strong style="color: var(--text-main); font-size: 13px;">Contato via WhatsApp (Automação)</strong>
|
|
<span>15 Fev 2026 Sistema</span>
|
|
<span style="color:#4a5568; margin-top: 5px; font-style: italic;">"Enviado aviso de limite de crédito excedido."</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log Transacional: Pedido Antigo -->
|
|
<div class="hist-pedido-item">
|
|
<div class="hist-pedido-left">
|
|
<div class="hist-doc-icon"><i class="fa-solid fa-file-invoice-dollar"></i></div>
|
|
<div class="hist-pedido-info">
|
|
<a href="#">Pedido #26668 entregue</a>
|
|
<span>11 Fev 2026</span>
|
|
<span style="color:#4a5568; font-weight: 700;"><i class="fa-solid fa-dollar-sign"></i> R$ 54.918,35</span>
|
|
</div>
|
|
</div>
|
|
<div class="hist-status">Entregue <i class="fa-solid fa-truck" style="color:var(--green);"></i></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="widget-card">
|
|
<div class="widget-header"><span>NOTAS FISCAIS</span></div>
|
|
<div class="widget-body">
|
|
<p class="empty-state">Não há notas fiscais disponíveis no sistema para este cliente.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="widget-card">
|
|
<div class="widget-header">
|
|
<span style="display:flex; align-items:center; gap:8px;"><i class="fa-solid fa-trophy" style="color:var(--jcs-blue);"></i> PRODUTOS MAIS COMPRADOS</span>
|
|
</div>
|
|
<div class="widget-body">
|
|
<div class="prod-grid">
|
|
<div class="prod-item">
|
|
<div class="prod-rank">1</div>
|
|
<div class="prod-title">SACOLA BIO VOLTE SEMPRE 38X50X2,5 C-1000</div>
|
|
<div class="prod-code">000887</div>
|
|
<div class="prod-img-placeholder"><i class="fa-solid fa-camera"></i></div>
|
|
<div class="prod-qty">Qtd. comprada: <strong>1.250</strong></div>
|
|
</div>
|
|
<div class="prod-item">
|
|
<div class="prod-rank">2</div>
|
|
<div class="prod-title">SAC IMP BIOSUPER VERDE 30X40X2,0 C-1000</div>
|
|
<div class="prod-code">001957</div>
|
|
<div class="prod-img-placeholder"><i class="fa-solid fa-camera"></i></div>
|
|
<div class="prod-qty">Qtd. comprada: <strong>1.056</strong></div>
|
|
</div>
|
|
<div class="prod-item">
|
|
<div class="prod-rank">3</div>
|
|
<div class="prod-title">SAC IMP BIOSUPER VERDE 38X48X2,0 C-1000</div>
|
|
<div class="prod-code">001921</div>
|
|
<div class="prod-img-placeholder"><i class="fa-solid fa-camera"></i></div>
|
|
<div class="prod-qty">Qtd. comprada: <strong>700</strong></div>
|
|
</div>
|
|
<div class="prod-item">
|
|
<div class="prod-rank">4</div>
|
|
<div class="prod-title">SACOLA LIBREPLAST 60X75X4,0-P PCT C-100</div>
|
|
<div class="prod-code">000021</div>
|
|
<div class="prod-img-placeholder"><i class="fa-solid fa-camera"></i></div>
|
|
<div class="prod-qty">Qtd. comprada: <strong>700</strong></div>
|
|
</div>
|
|
</div>
|
|
<div style="text-align: right; margin-top: 15px; font-size: 11px; color: #a0aec0;">
|
|
<i class="fa-regular fa-clock"></i> Últimos 6 meses
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analise-col-right">
|
|
<div class="widget-card">
|
|
<div class="widget-header"><span>RESUMO</span></div>
|
|
<div class="widget-body">
|
|
<div style="margin-bottom: 20px; font-size: 12px; color: #718096; display: flex; align-items: center; gap: 8px;">
|
|
<i class="fa-regular fa-calendar"></i> Últimos 6 meses
|
|
</div>
|
|
<div class="resumo-list">
|
|
<div class="resumo-item">
|
|
<div class="resumo-icon blue"><i class="fa-solid fa-trophy"></i></div>
|
|
<div class="resumo-data"><strong>25º</strong><span>Cliente que mais compra</span></div>
|
|
</div>
|
|
<div class="resumo-item">
|
|
<div class="resumo-icon green"><i class="fa-solid fa-dollar-sign"></i></div>
|
|
<div class="resumo-data"><strong>R$ 205.059,93</strong><span>Em compras</span></div>
|
|
</div>
|
|
<div class="resumo-item">
|
|
<div class="resumo-icon green"><i class="fa-solid fa-file-lines"></i></div>
|
|
<div class="resumo-data"><strong>7</strong><span>Pedidos realizados</span></div>
|
|
</div>
|
|
<div class="resumo-item">
|
|
<div class="resumo-icon green"><i class="fa-solid fa-chart-line"></i></div>
|
|
<div class="resumo-data"><strong>R$ 29.294,28</strong><span>De ticket médio</span></div>
|
|
</div>
|
|
<div class="resumo-item">
|
|
<div class="resumo-icon yellow"><i class="fa-solid fa-clock-rotate-left"></i></div>
|
|
<div class="resumo-data"><strong>1</strong><span>Dia sem comprar</span></div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 20px; font-size: 11px; color: #a0aec0; display: flex; align-items: center; gap: 5px;">
|
|
<i class="fa-solid fa-circle-info"></i> Apenas pedidos do tipo venda
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="widget-card">
|
|
<div class="widget-header">
|
|
<span>PORTAL DO CLIENTE</span>
|
|
<button class="btn-outline" style="padding: 6px 12px; font-size: 11px; border-radius: 6px; background: #e2e8f0; border:none; color: #4a5568;"><i class="fa-solid fa-cart-shopping"></i> Criar acesso</button>
|
|
</div>
|
|
<div class="widget-body" style="display: flex; justify-content: space-between; align-items: center;">
|
|
<span style="font-size: 13px; font-weight: 700; color: var(--red);">Portal bloqueado <i class="fa-solid fa-circle-info" style="color: #cbd5e0;"></i></span>
|
|
<label class="switch">
|
|
<input type="checkbox">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="widget-card">
|
|
<div class="widget-header"><span>LIMITE DE CRÉDITO</span></div>
|
|
<div class="widget-body" style="display: flex; justify-content: space-between; align-items: center;">
|
|
<div style="display:flex; gap: 40px;">
|
|
<div>
|
|
<span style="font-size: 11px; color: #718096; display: block; margin-bottom: 5px;">Limite disponível</span>
|
|
<span style="font-size: 14px; font-weight: 600; color: #4a5568; display: flex; align-items: center; gap:8px;"><i class="fa-solid fa-dollar-sign" style="background:#edf2f7; padding:5px; border-radius:50%; font-size:10px;"></i> Não definido</span>
|
|
</div>
|
|
<div>
|
|
<span style="font-size: 11px; color: #718096; display: block; margin-bottom: 5px;">Limite total</span>
|
|
<span style="font-size: 14px; font-weight: 600; color: #4a5568; display: flex; align-items: center; gap:8px;"><i class="fa-solid fa-dollar-sign" style="background:#edf2f7; padding:5px; border-radius:50%; font-size:10px;"></i> Não definido</span>
|
|
</div>
|
|
</div>
|
|
<button class="btn-outline" style="padding: 8px 12px; border-radius: 6px;"><i class="fa-solid fa-pen"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="widget-card">
|
|
<div class="widget-header">
|
|
<span>TÍTULOS</span>
|
|
<div style="display:flex; gap:10px;">
|
|
<button class="btn-outline" style="padding: 6px; border-radius: 6px; border:none; color:#a0aec0;"><i class="fa-brands fa-whatsapp"></i></button>
|
|
<button class="btn-outline" style="padding: 6px 12px; font-size: 11px; border-radius: 6px; color:var(--jcs-blue); border-color:var(--jcs-blue);"><i class="fa-solid fa-plus"></i> Adicionar título</button>
|
|
</div>
|
|
</div>
|
|
<div class="widget-body">
|
|
<div style="display: flex; gap: 10px; margin-bottom: 20px;">
|
|
<button style="padding: 6px 15px; border-radius: 20px; font-size: 11px; font-weight: 700; border:none; background:var(--jcs-blue); color:white;">A receber</button>
|
|
<button style="padding: 6px 15px; border-radius: 20px; font-size: 11px; font-weight: 700; border:1px solid #e2e8f0; background:white; color:#718096;">Recebidos</button>
|
|
</div>
|
|
<p class="empty-state">Este cliente não possui títulos a receber cadastrados no sistema.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CADASTRO DE CLIENTE -->
|
|
<section id="cadastro-cliente" class="page">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
|
|
<h1 class="page-title" style="margin:0;">Cadastro de Cliente</h1>
|
|
<button class="btn-outline" onclick="showPage('clientes')">Voltar</button>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="radio-group">
|
|
<label class="radio-label">
|
|
<input type="radio" name="tipoPessoa" value="PJ" checked onchange="toggleTipoPessoa()"> Pessoa Jurídica
|
|
</label>
|
|
<label class="radio-label">
|
|
<input type="radio" name="tipoPessoa" value="PF" onchange="toggleTipoPessoa()"> Pessoa Física
|
|
</label>
|
|
</div>
|
|
|
|
<h3 class="section-title" style="margin-top: 0;">DADOS PRINCIPAIS</h3>
|
|
<div class="grid-3">
|
|
<div class="input-group">
|
|
<label id="lbl-cli-doc">CNPJ <span style="color:var(--red)">*</span></label>
|
|
<input type="text" id="cad-cli-doc" placeholder="00.000.000/0001-00">
|
|
</div>
|
|
|
|
<div class="input-group" style="grid-column: span 2;">
|
|
<label id="lbl-cli-razao">RAZÃO SOCIAL <span style="color:var(--red)">*</span></label>
|
|
<input type="text" id="cad-cli-razao" placeholder="Razão Social completa">
|
|
</div>
|
|
|
|
<div class="input-group" style="grid-column: span 3;" id="div-cli-fantasia">
|
|
<label>NOME FANTASIA</label>
|
|
<input type="text" id="cad-cli-fantasia" placeholder="Nome Fantasia (Opcional)">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label>INSCRIÇÃO ESTADUAL</label>
|
|
<input type="text" id="cad-cli-ie" placeholder="000.000.000.000">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>SUFRAMA</label>
|
|
<input type="text" id="cad-cli-suframa" placeholder="Inscrição Suframa">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>ISENÇÃO FISCAL</label>
|
|
<select id="cad-cli-isencao">
|
|
<option value="Nao">Não</option>
|
|
<option value="Sim">Sim</option>
|
|
</select>
|
|
</div>
|
|
<div class="input-group">
|
|
<label>SEGMENTO</label>
|
|
<input type="text" id="cad-cli-segmento" placeholder="Ex: Varejo, Atacado...">
|
|
</div>
|
|
<div class="input-group" style="grid-column: span 2;">
|
|
<label>REDE</label>
|
|
<input type="text" id="cad-cli-rede" placeholder="Ex: Rede ABC">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group" style="margin-top: 15px;">
|
|
<label>INFORMAÇÕES ADICIONAIS</label>
|
|
<textarea id="cad-cli-obs" rows="3" placeholder="Observações e informações extras sobre o cliente..."></textarea>
|
|
</div>
|
|
|
|
<h3 class="section-title">ENDEREÇO PRINCIPAL</h3>
|
|
<div class="grid-3">
|
|
<div class="input-group">
|
|
<label>CEP</label>
|
|
<input type="text" id="cad-end-cep" placeholder="00000-000">
|
|
</div>
|
|
<div class="input-group" style="grid-column: span 2;">
|
|
<label>ENDEREÇO <span style="color:var(--red)">*</span></label>
|
|
<input type="text" id="cad-end-logradouro" placeholder="Rua, Avenida, etc.">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>NÚMERO <span style="color:var(--red)">*</span></label>
|
|
<input type="text" id="cad-end-numero" placeholder="123">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>COMPLEMENTO</label>
|
|
<input type="text" id="cad-end-complemento" placeholder="Sala, Apto, Galpão...">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>BAIRRO <span style="color:var(--red)">*</span></label>
|
|
<input type="text" id="cad-end-bairro" placeholder="Bairro">
|
|
</div>
|
|
<div class="input-group" style="grid-column: span 2;">
|
|
<label>CIDADE <span style="color:var(--red)">*</span></label>
|
|
<input type="text" id="cad-end-cidade" placeholder="Sua Cidade">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>ESTADO <span style="color:var(--red)">*</span></label>
|
|
<input type="text" id="cad-end-estado" placeholder="UF">
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="section-title">CONTATOS</h3>
|
|
<div id="area-contatos">
|
|
<div class="contato-block" style="border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; margin-bottom: 15px; position: relative; background: #fafbfc;">
|
|
<div class="grid-3" style="margin-bottom: 0;">
|
|
<div class="input-group" style="grid-column: span 2;">
|
|
<label>NOME</label>
|
|
<input type="text" placeholder="Nome do Contato">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>CARGO</label>
|
|
<input type="text" placeholder="Ex. Gerente de Compras">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>TELEFONE / WHATSAPP</label>
|
|
<input type="text" placeholder="(00) 00000-0000">
|
|
</div>
|
|
<div class="input-group" style="grid-column: span 2; margin-bottom: 0;">
|
|
<label>E-MAIL</label>
|
|
<div class="email-list">
|
|
<div style="display:flex; gap:10px; margin-bottom:5px;">
|
|
<input type="email" placeholder="email@exemplo.com">
|
|
<button type="button" class="btn-outline-cli" onclick="addEmailToContact(this)"><i class="fa-solid fa-plus"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn-outline-cli" style="color: var(--jcs-blue); border-color: var(--jcs-blue); background: transparent;" onclick="addContatoField()">
|
|
<i class="fa-solid fa-plus"></i> Adicionar Contato
|
|
</button>
|
|
|
|
<div style="display: flex; gap: 15px; justify-content: flex-end; border-top: 1px solid #e2e8f0; padding-top: 25px; margin-top: 25px;">
|
|
<button class="btn-outline" onclick="showPage('clientes')">Cancelar</button>
|
|
<button class="btn-primary" style="background: var(--jcs-blue-light); color: var(--jcs-blue);" onclick="salvarCliente(true)">Salvar e Cadastrar Outro</button>
|
|
<button class="btn-success" onclick="salvarCliente(false)">Salvar Cliente</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PÁGINA PRODUTOS -->
|
|
<section id="produtos" class="page">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
|
|
<h1 class="page-title" style="margin:0;">Catálogo de Produtos</h1>
|
|
<div style="display: flex; gap: 10px;">
|
|
<button class="btn-outline"><i class="fa-solid fa-print"></i> Imprimir Catálogo</button>
|
|
<button class="btn-primary" disabled style="opacity: 0.5; cursor: not-allowed;"><i class="fa-solid fa-plus"></i> Criar Novo Produto</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="padding: 10px; display: flex; align-items: center;">
|
|
<i class="fa-solid fa-magnifying-glass" style="margin: 0 15px; color: #ccc;"></i>
|
|
<input type="text" placeholder="Buscar por código, nome, marca ou grupo..." style="flex:1; border:none; outline:none; font-size: 14px;">
|
|
<button class="btn-primary" style="padding: 10px 30px;">Filtrar</button>
|
|
</div>
|
|
|
|
<div class="card" style="padding: 0; overflow: hidden;">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Código</th>
|
|
<th>Nome</th>
|
|
<th>Marca</th>
|
|
<th>Grupo</th>
|
|
<th>Subgrupo</th>
|
|
<th>Preço Venda</th>
|
|
<th>IPI</th>
|
|
<th>Estoque</th>
|
|
<th style="text-align: center;">Ações</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>002579</td>
|
|
<td style="font-weight: 700;">COPO 200ML TRANSPARENTE CX/1000</td>
|
|
<td>PLASTICOPO</td>
|
|
<td>DESCARTÁVEIS</td>
|
|
<td>COPOS</td>
|
|
<td><strong style="color:var(--jcs-blue);">R$ 145,00</strong></td>
|
|
<td>2%</td>
|
|
<td><span class="stock-badge" style="margin:0;">450 UN</span></td>
|
|
<td style="text-align: center;">
|
|
<i class="fa-solid fa-eye" title="Consultar" style="cursor: pointer; color: var(--jcs-blue);" onclick="abrirConsultaProduto('002579', 'COPO 200ML TRANSPARENTE CX/1000', '450 UN', '145,00')"></i>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>002635</td>
|
|
<td style="font-weight: 700;">BOBINA PEAD COLORIDA 35X45</td>
|
|
<td>BOBIPLAST</td>
|
|
<td>EMBALAGENS</td>
|
|
<td>BOBINAS</td>
|
|
<td><strong style="color:var(--jcs-blue);">R$ 16,90</strong></td>
|
|
<td>0%</td>
|
|
<td><span class="stock-badge" style="margin:0; background: #e6fffa; color: var(--green);">1.200 RL</span></td>
|
|
<td style="text-align: center;">
|
|
<i class="fa-solid fa-eye" title="Consultar" style="cursor: pointer; color: var(--jcs-blue);" onclick="abrirConsultaProduto('002635', 'BOBINA PEAD COLORIDA 35X45', '1.200 RL', '16,90')"></i>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>000887</td>
|
|
<td style="font-weight: 700;">SACOLA BIO VOLTE SEMPRE 38X50X2,5 C-1000</td>
|
|
<td>LIBREPLAST</td>
|
|
<td>SACOLAS</td>
|
|
<td>BIODEGRADÁVEIS</td>
|
|
<td><strong style="color:var(--jcs-blue);">R$ 112,50</strong></td>
|
|
<td>0%</td>
|
|
<td><span class="stock-badge" style="margin:0; background: #fff5f5; color: var(--red);">15 CX</span></td>
|
|
<td style="text-align: center;">
|
|
<i class="fa-solid fa-eye" title="Consultar" style="cursor: pointer; color: var(--jcs-blue);" onclick="abrirConsultaProduto('000887', 'SACOLA BIO VOLTE SEMPRE 38X50X2,5 C-1000', '15 CX', '112,50')"></i>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>001957</td>
|
|
<td style="font-weight: 700;">SAC IMP BIOSUPER VERDE 30X40X2,0 C-1000</td>
|
|
<td>SUPERBIO</td>
|
|
<td>SACOLAS</td>
|
|
<td>IMPRESSAS</td>
|
|
<td><strong style="color:var(--jcs-blue);">R$ 89,00</strong></td>
|
|
<td>0%</td>
|
|
<td><span class="stock-badge" style="margin:0;">230 CX</span></td>
|
|
<td style="text-align: center;">
|
|
<i class="fa-solid fa-eye" title="Consultar" style="cursor: pointer; color: var(--jcs-blue);" onclick="abrirConsultaProduto('001957', 'SAC IMP BIOSUPER VERDE 30X40X2,0 C-1000', '230 CX', '89,00')"></i>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>003412</td>
|
|
<td style="font-weight: 700;">PRATO RASO DESCARTÁVEL 15CM BRANCO</td>
|
|
<td>PLASTICOPO</td>
|
|
<td>DESCARTÁVEIS</td>
|
|
<td>PRATOS</td>
|
|
<td><strong style="color:var(--jcs-blue);">R$ 45,90</strong></td>
|
|
<td>2%</td>
|
|
<td><span class="stock-badge" style="margin:0; background: #e6fffa; color: var(--green);">850 PT</span></td>
|
|
<td style="text-align: center;">
|
|
<i class="fa-solid fa-eye" title="Consultar" style="cursor: pointer; color: var(--jcs-blue);" onclick="abrirConsultaProduto('003412', 'PRATO RASO DESCARTÁVEL 15CM BRANCO', '850 PT', '45,90')"></i>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div style="padding: 15px 25px; border-top: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-muted);">
|
|
<span>Mostrando 1 a 20 de 1.450 produtos</span>
|
|
<div style="display: flex; gap: 5px;">
|
|
<button class="btn-outline" style="padding: 5px 10px;"><i class="fa-solid fa-chevron-left"></i></button>
|
|
<button class="btn-outline" style="padding: 5px 10px; background: var(--jcs-blue); color: white; border-color: var(--jcs-blue);">1</button>
|
|
<button class="btn-outline" style="padding: 5px 10px;">2</button>
|
|
<button class="btn-outline" style="padding: 5px 10px;">3</button>
|
|
<button class="btn-outline" style="padding: 5px 10px; pointer-events: none;">...</button>
|
|
<button class="btn-outline" style="padding: 5px 10px;">73</button>
|
|
<button class="btn-outline" style="padding: 5px 10px;"><i class="fa-solid fa-chevron-right"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<!-- MODAL DE INSERÇÃO DE ITEM NO PEDIDO -->
|
|
<div id="modal-item" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<h3 id="m-nome" style="color: var(--jcs-blue); margin-bottom: 5px;">Produto</h3>
|
|
<p id="m-cod" style="font-size: 12px; color: var(--text-muted); margin-bottom: 15px;">Cód: 000</p>
|
|
<div class="stock-badge"><i class="fa-solid fa-box"></i> Estoque: <span id="m-estoque">0</span> UN</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;">
|
|
<div class="input-group"><label>Quantidade</label><input type="number" id="m-qtd" value="1" oninput="calcItem()"></div>
|
|
<div class="input-group"><label>Preço Unit.</label><input type="text" id="m-preco" readonly style="background: #f8fafc;"></div>
|
|
<div class="input-group"><label>Desconto 1 (%)</label><input type="number" id="m-desc" value="0" oninput="calcItem()"></div>
|
|
<div class="input-group" id="div-desc2" style="visibility: hidden;"><label>Desconto 2 (%)</label><input type="number" id="m-desc2" value="0" oninput="calcItem()"></div>
|
|
<div class="input-group"><label>Acréscimo 1 (%)</label><input type="number" id="m-acresc" value="0" oninput="calcItem()"></div>
|
|
<div class="input-group" id="div-acresc2" style="visibility: hidden;"><label>Acréscimo 2 (%)</label><input type="number" id="m-acresc2" value="0" oninput="calcItem()"></div>
|
|
<div class="input-group" style="grid-column: span 2;"><label>Subtotal</label><input type="text" id="m-sub" readonly style="background: var(--jcs-blue-light); font-weight: 800; color: var(--jcs-blue);"></div>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 5px; padding-top: 15px; border-top: 1px dashed #e2e8f0;">
|
|
<div class="input-group" style="margin-bottom: 0;"><label>Nº Ordem Compra</label><input type="text" id="m-prod-oc" placeholder="Ex: 5544"></div>
|
|
<div class="input-group" style="margin-bottom: 0;"><label>Item da OC</label><input type="text" id="m-prod-item-oc" placeholder="Ex: 01"></div>
|
|
<div class="input-group" style="margin-bottom: 0;"><label>Valor IPI (%)</label><input type="number" id="m-ipi" value="0" oninput="calcItem()"></div>
|
|
<div class="input-group" style="margin-bottom: 0;"><label>Observação</label><input type="text" id="m-prod-obs" placeholder="Obs. do item..."></div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 10px; margin-top: 25px;">
|
|
<button class="btn-outline" style="flex:1; justify-content: center;" onclick="fecharModal()">Cancelar</button>
|
|
<button class="btn-primary" style="flex:2; justify-content: center;" onclick="addItem()">INCLUIR NO PEDIDO</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TELA DE CONSULTA DE PRODUTO -->
|
|
<div id="modal-consulta-produto" class="modal-overlay">
|
|
<div class="modal-content" style="max-width: 850px; padding: 0; overflow: hidden;">
|
|
<div style="padding: 25px 30px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: flex-start; background: #fafbfc;">
|
|
<div>
|
|
<h2 id="c-prod-nome" style="color: var(--jcs-blue); margin-bottom: 8px;">Nome do Produto</h2>
|
|
<p style="font-size: 13px; color: var(--text-muted); font-weight: 600;">
|
|
<span id="c-prod-cod">Cód: 0000</span>
|
|
| Marca: <span id="c-prod-marca" style="color:var(--text-main);">PLASTICOPO</span>
|
|
| Estoque Atual: <strong style="color:var(--green)" id="c-prod-estoque">0 UN</strong>
|
|
</p>
|
|
</div>
|
|
<button class="btn-outline" style="border:none; background:transparent;" onclick="fecharConsultaProduto()"><i class="fa-solid fa-xmark" style="font-size: 20px;"></i></button>
|
|
</div>
|
|
|
|
<div class="cli-tabs" style="padding: 0 30px; background: white;">
|
|
<div class="cli-tab active prod-tab" id="tab-btn-precos" onclick="trocarAbaProduto('precos')"><i class="fa-solid fa-money-bill-wave"></i> TABELAS DE PREÇOS</div>
|
|
<div class="cli-tab prod-tab" id="tab-btn-gerais" onclick="trocarAbaProduto('gerais')"><i class="fa-solid fa-circle-info"></i> INFORMAÇÕES GERAIS</div>
|
|
<div class="cli-tab prod-tab" id="tab-btn-pesos" onclick="trocarAbaProduto('pesos')"><i class="fa-solid fa-scale-balanced"></i> PESOS E DIMENSÕES</div>
|
|
</div>
|
|
|
|
<div style="padding: 30px;">
|
|
<!-- ABA PREÇOS -->
|
|
<div id="aba-prod-precos" class="aba-prod-content">
|
|
<table style="width: 100%; border-collapse: collapse;">
|
|
<thead>
|
|
<tr style="background: #f8fafc;">
|
|
<th style="padding: 12px 15px; font-size: 11px;">Tabela / Pauta</th>
|
|
<th style="padding: 12px 15px; font-size: 11px;">Condição</th>
|
|
<th style="padding: 12px 15px; font-size: 11px;">Preço Base</th>
|
|
<th style="padding: 12px 15px; font-size: 11px; text-align: right;">Preço Final</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td style="padding: 15px; border-bottom: 1px dashed #edf2f7; font-size: 13px;">PAUTA PADRÃO (DISTRIBUIÇÃO)</td>
|
|
<td style="padding: 15px; border-bottom: 1px dashed #edf2f7; font-size: 13px;">À VISTA</td>
|
|
<td style="padding: 15px; border-bottom: 1px dashed #edf2f7; font-size: 13px;"><span id="c-prod-preco-base1">R$ 145,00</span></td>
|
|
<td style="padding: 15px; border-bottom: 1px dashed #edf2f7; font-size: 15px; font-weight: 800; color: var(--jcs-blue); text-align: right;"><span id="c-prod-preco-final1">R$ 145,00</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 15px; border-bottom: 1px dashed #edf2f7; font-size: 13px;">PAUTA PROMOÇÃO MARÇO</td>
|
|
<td style="padding: 15px; border-bottom: 1px dashed #edf2f7; font-size: 13px;">QUALQUER</td>
|
|
<td style="padding: 15px; border-bottom: 1px dashed #edf2f7; font-size: 13px;"><span id="c-prod-preco-base2">R$ 145,00</span></td>
|
|
<td style="padding: 15px; border-bottom: 1px dashed #edf2f7; font-size: 15px; font-weight: 800; color: var(--green); text-align: right;"><span id="c-prod-preco-final2">R$ 130,50</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 15px; border-bottom: 1px dashed #edf2f7; font-size: 13px;">TABELA INDÚSTRIA (ATACADO)</td>
|
|
<td style="padding: 15px; border-bottom: 1px dashed #edf2f7; font-size: 13px;">BOLETO 30/60</td>
|
|
<td style="padding: 15px; border-bottom: 1px dashed #edf2f7; font-size: 13px;"><span id="c-prod-preco-base3">R$ 145,00</span></td>
|
|
<td style="padding: 15px; border-bottom: 1px dashed #edf2f7; font-size: 15px; font-weight: 800; color: var(--jcs-blue); text-align: right;"><span id="c-prod-preco-final3">R$ 138,00</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- ABA INFORMAÇÕES GERAIS -->
|
|
<div id="aba-prod-gerais" class="aba-prod-content" style="display: none;">
|
|
<div class="grid-3">
|
|
<div class="input-group"><label>Marca</label><input type="text" readonly value="PLASTICOPO" style="background:#f8fafc"></div>
|
|
<div class="input-group"><label>Grupo</label><input type="text" readonly value="DESCARTÁVEIS" style="background:#f8fafc"></div>
|
|
<div class="input-group"><label>Subgrupo</label><input type="text" readonly value="COPOS" style="background:#f8fafc"></div>
|
|
<div class="input-group"><label>NCM</label><input type="text" readonly value="3924.10.00" style="background:#f8fafc"></div>
|
|
<div class="input-group"><label>Cód. Barras (EAN)</label><input type="text" readonly value="7890000012345" style="background:#f8fafc"></div>
|
|
<div class="input-group"><label>IPI (%)</label><input type="text" readonly value="2%" style="background:#f8fafc"></div>
|
|
</div>
|
|
<div class="input-group" style="margin-top: 5px;">
|
|
<label>Descrição Detalhada / Aplicação</label>
|
|
<textarea readonly style="background:#f8fafc; resize: none;" rows="3">Copo descartável de 200ml transparente, ideal para água, sucos e refrigerantes. Caixa contendo 10 pacotes de 100 unidades.</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ABA PESOS E DIMENSÕES -->
|
|
<div id="aba-prod-pesos" class="aba-prod-content" style="display: none;">
|
|
<div class="grid-3">
|
|
<div class="input-group"><label>Peso Bruto (KG)</label><input type="text" readonly value="2.100" style="background:#f8fafc"></div>
|
|
<div class="input-group"><label>Peso Líquido (KG)</label><input type="text" readonly value="2.000" style="background:#f8fafc"></div>
|
|
<div class="input-group"><label>Cubagem (m³)</label><input type="text" readonly value="0.015" style="background:#f8fafc"></div>
|
|
<div class="input-group"><label>Altura (m)</label><input type="text" readonly value="0.40" style="background:#f8fafc"></div>
|
|
<div class="input-group"><label>Largura (m)</label><input type="text" readonly value="0.30" style="background:#f8fafc"></div>
|
|
<div class="input-group"><label>Comprimento (m)</label><input type="text" readonly value="0.25" style="background:#f8fafc"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="background: #f8fafc; padding: 20px 30px; text-align: right; border-top: 1px solid #e2e8f0;">
|
|
<button class="btn-outline" style="display: inline-block;" onclick="fecharConsultaProduto()">Fechar Consulta</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let pAtual = {};
|
|
|
|
function login() {
|
|
document.getElementById('login-page').style.display = 'none';
|
|
document.getElementById('main-layout').style.display = 'flex';
|
|
renderCharts();
|
|
renderChartClientes();
|
|
showPage('indicadores', document.getElementById('link-indicadores'));
|
|
}
|
|
|
|
function showPage(id, el) {
|
|
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
|
document.getElementById(id).classList.add('active');
|
|
|
|
if(id === 'novo-pedido' && !el) {
|
|
document.getElementById('titulo-lancamento').innerText = "Lançamento de Pedido";
|
|
document.getElementById('area-produtos').style.display = 'block';
|
|
document.getElementById('btn-finalizar-pedido').style.display = 'block';
|
|
document.getElementById('barra-checkout').style.display = 'flex';
|
|
|
|
// Ocultar barra de ações para um NOVO pedido e o info-box do cliente
|
|
document.getElementById('barra-acoes-pedido').style.display = 'none';
|
|
document.getElementById('cli-info-box').style.display = 'none';
|
|
|
|
// Restaurar Empty State da Tabela
|
|
document.querySelector('#tabela-itens tbody').innerHTML = `
|
|
<tr id="empty-table-row">
|
|
<td colspan="7" style="padding: 0; border: none;">
|
|
<div class="empty-table-msg">
|
|
<i class="fa-solid fa-cart-arrow-down"></i>
|
|
<p>Nenhum produto adicionado ao pedido ainda.<br>Pesquise acima para incluir itens.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
|
|
document.getElementById('total-pedido').innerText = "R$ 0,00";
|
|
|
|
document.getElementById('buscaCliente').value = "";
|
|
document.getElementById('buscaCliente').readOnly = false;
|
|
document.getElementById('pedido-contato').value = "";
|
|
document.getElementById('pedido-oc').value = "";
|
|
document.getElementById('pedido-obs').value = "";
|
|
}
|
|
|
|
if(el) {
|
|
document.querySelectorAll('.nav-link').forEach(n => n.classList.remove('active'));
|
|
el.classList.add('active');
|
|
}
|
|
}
|
|
|
|
function abrirAnaliseCliente(nomeCliente) {
|
|
document.getElementById('lbl-analise-nome').innerText = nomeCliente;
|
|
showPage('analise-cliente');
|
|
}
|
|
|
|
function abrirConsultaProduto(codigo, nome, estoque, precoBaseStr) {
|
|
document.getElementById('c-prod-cod').innerText = "Cód: " + codigo;
|
|
document.getElementById('c-prod-nome').innerText = nome;
|
|
document.getElementById('c-prod-estoque').innerText = estoque;
|
|
|
|
let marca = "PLASTICOPO";
|
|
if(nome.includes("BOBINA")) marca = "BOBIPLAST";
|
|
if(nome.includes("BIO VOLTE SEMPRE")) marca = "LIBREPLAST";
|
|
if(nome.includes("BIOSUPER")) marca = "SUPERBIO";
|
|
document.getElementById('c-prod-marca').innerText = marca;
|
|
|
|
let pb = parseFloat(precoBaseStr.replace(',', '.'));
|
|
let pFinal2 = pb * 0.90;
|
|
let pFinal3 = pb * 0.95;
|
|
|
|
document.getElementById('c-prod-preco-base1').innerText = "R$ " + pb.toFixed(2).replace('.', ',');
|
|
document.getElementById('c-prod-preco-final1').innerText = "R$ " + pb.toFixed(2).replace('.', ',');
|
|
|
|
document.getElementById('c-prod-preco-base2').innerText = "R$ " + pb.toFixed(2).replace('.', ',');
|
|
document.getElementById('c-prod-preco-final2').innerText = "R$ " + pFinal2.toFixed(2).replace('.', ',');
|
|
|
|
document.getElementById('c-prod-preco-base3').innerText = "R$ " + pb.toFixed(2).replace('.', ',');
|
|
document.getElementById('c-prod-preco-final3').innerText = "R$ " + pFinal3.toFixed(2).replace('.', ',');
|
|
|
|
trocarAbaProduto('precos');
|
|
document.getElementById('modal-consulta-produto').style.display = 'flex';
|
|
}
|
|
|
|
function fecharConsultaProduto() { document.getElementById('modal-consulta-produto').style.display = 'none'; }
|
|
|
|
function trocarAbaProduto(aba) {
|
|
document.querySelectorAll('.aba-prod-content').forEach(el => el.style.display = 'none');
|
|
document.querySelectorAll('.prod-tab').forEach(el => el.classList.remove('active'));
|
|
|
|
document.getElementById('aba-prod-' + aba).style.display = 'block';
|
|
document.getElementById('tab-btn-' + aba).classList.add('active');
|
|
}
|
|
|
|
function carregarPedido(cliente, somenteConsulta) {
|
|
showPage('novo-pedido');
|
|
|
|
// Mostrar a barra de ações e o box do cliente pois já é um pedido em andamento/salvo
|
|
document.getElementById('barra-acoes-pedido').style.display = 'flex';
|
|
document.getElementById('cli-info-box').style.display = 'flex';
|
|
|
|
if (somenteConsulta) {
|
|
document.getElementById('titulo-lancamento').innerText = "Consulta de Pedido (Somente Leitura)";
|
|
document.getElementById('area-produtos').style.display = 'none';
|
|
document.getElementById('barra-checkout').style.display = 'none';
|
|
document.getElementById('buscaCliente').readOnly = true;
|
|
} else {
|
|
document.getElementById('titulo-lancamento').innerText = "Editando Orçamento";
|
|
document.getElementById('area-produtos').style.display = 'block';
|
|
document.getElementById('barra-checkout').style.display = 'flex';
|
|
document.getElementById('btn-finalizar-pedido').style.display = 'block';
|
|
document.getElementById('buscaCliente').readOnly = false;
|
|
}
|
|
|
|
document.getElementById('buscaCliente').value = cliente === 'PAVEI' ? "PAVEI COMERCIO E REPRESENTAÇÕES" : "RLJM REPRESENTAÇÕES LTDA";
|
|
|
|
// Simular preenchimento do Info Box do cliente
|
|
if (cliente === 'PAVEI') {
|
|
document.getElementById('cli-info-cnpj').innerText = "01.234.567/0001-90";
|
|
document.getElementById('cli-info-limite').innerText = "R$ 45.000,00";
|
|
document.getElementById('cli-info-status').innerHTML = '<span class="badge badge-green">Liberado</span>';
|
|
} else {
|
|
document.getElementById('cli-info-cnpj').innerText = "88.777.666/0001-55";
|
|
document.getElementById('cli-info-limite').innerText = "R$ 0,00";
|
|
document.getElementById('cli-info-limite').style.color = "var(--red)";
|
|
document.getElementById('cli-info-status').innerHTML = '<span class="badge badge-red">Bloqueado</span>';
|
|
}
|
|
|
|
document.getElementById('pedido-contato').value = cliente === 'PAVEI' ? "Carlos Almeida" : "Juliana Costa";
|
|
document.getElementById('pedido-oc').value = cliente === 'PAVEI' ? "OC-77889" : "OC-10203";
|
|
document.getElementById('pedido-obs').value = "Entregar na doca 3";
|
|
|
|
let itensSimulados = cliente === 'PAVEI' ?
|
|
`<tr><td>002579</td><td style="font-weight:700">COPO 200ML CX/1000</td><td>10</td><td>UN</td><td style="font-size: 11px;">D1:5% IPI:2%</td><td style="font-weight:700; color:var(--jcs-blue)">R$ 1.540,00</td><td>${somenteConsulta ? '' : '<i class="fa-solid fa-trash" style="color:var(--red); cursor:pointer" onclick="this.closest(\'tr\').remove(); atualizarTotalGeral();"></i>'}</td></tr>` :
|
|
`<tr><td>002635</td><td style="font-weight:700">BOBINA PEAD COLOR</td><td>100</td><td>UN</td><td style="font-size: 11px;">0%</td><td style="font-weight:700; color:var(--jcs-blue)">R$ 4.890,50</td><td></td></tr>`;
|
|
|
|
document.querySelector('#tabela-itens tbody').innerHTML = itensSimulados;
|
|
document.getElementById('total-pedido').innerText = cliente === 'PAVEI' ? "R$ 1.540,00" : "R$ 4.890,50";
|
|
}
|
|
|
|
function filtrarClientes() { document.getElementById('res-clientes').style.display = 'block'; }
|
|
|
|
function selectCli(n) {
|
|
document.getElementById('buscaCliente').value = n;
|
|
document.getElementById('res-clientes').style.display = 'none';
|
|
|
|
// Popula e mostra o card de Quick Info do cliente
|
|
const infoBox = document.getElementById('cli-info-box');
|
|
if(n.includes('PAVEI')) {
|
|
document.getElementById('cli-info-cnpj').innerText = "01.234.567/0001-90";
|
|
document.getElementById('cli-info-limite').innerText = "R$ 45.000,00";
|
|
document.getElementById('cli-info-limite').style.color = "var(--green)";
|
|
document.getElementById('cli-info-status').innerHTML = '<span class="badge badge-green">Liberado</span>';
|
|
} else {
|
|
document.getElementById('cli-info-cnpj').innerText = "22.333.444/0001-55";
|
|
document.getElementById('cli-info-limite').innerText = "R$ 1.500,00";
|
|
document.getElementById('cli-info-limite').style.color = "var(--orange)";
|
|
document.getElementById('cli-info-status').innerHTML = '<span class="badge badge-orange">Atenção</span>';
|
|
}
|
|
infoBox.style.display = 'flex';
|
|
}
|
|
|
|
function filtrarProds() { document.getElementById('res-prods').style.display = 'block'; }
|
|
|
|
function abrirModal(n, c, p, e) {
|
|
pAtual = {n, c, p, e};
|
|
document.getElementById('m-nome').innerText = n;
|
|
document.getElementById('m-cod').innerText = "Código: " + c;
|
|
document.getElementById('m-estoque').innerText = e;
|
|
document.getElementById('m-preco').value = "R$ " + p.toFixed(2);
|
|
|
|
document.getElementById('m-qtd').value = 1;
|
|
document.getElementById('m-desc').value = 0;
|
|
document.getElementById('m-desc2').value = 0;
|
|
document.getElementById('m-acresc').value = 0;
|
|
document.getElementById('m-acresc2').value = 0;
|
|
|
|
document.getElementById('m-prod-oc').value = "";
|
|
document.getElementById('m-prod-item-oc').value = "";
|
|
document.getElementById('m-ipi').value = 0;
|
|
document.getElementById('m-prod-obs').value = "";
|
|
|
|
document.getElementById('div-desc2').style.visibility = 'hidden';
|
|
document.getElementById('div-acresc2').style.visibility = 'hidden';
|
|
|
|
document.getElementById('modal-item').style.display = 'flex';
|
|
document.getElementById('res-prods').style.display = 'none';
|
|
calcItem();
|
|
}
|
|
|
|
function fecharModal() { document.getElementById('modal-item').style.display = 'none'; }
|
|
|
|
function calcItem() {
|
|
let q = parseFloat(document.getElementById('m-qtd').value) || 0;
|
|
let d1 = parseFloat(document.getElementById('m-desc').value) || 0;
|
|
let d2 = parseFloat(document.getElementById('m-desc2').value) || 0;
|
|
let a1 = parseFloat(document.getElementById('m-acresc').value) || 0;
|
|
let a2 = parseFloat(document.getElementById('m-acresc2').value) || 0;
|
|
let ipi = parseFloat(document.getElementById('m-ipi').value) || 0;
|
|
|
|
if(d1 > 0) {
|
|
document.getElementById('div-desc2').style.visibility = 'visible';
|
|
} else {
|
|
document.getElementById('div-desc2').style.visibility = 'hidden';
|
|
d2 = 0; document.getElementById('m-desc2').value = 0;
|
|
}
|
|
|
|
if(a1 > 0) {
|
|
document.getElementById('div-acresc2').style.visibility = 'visible';
|
|
} else {
|
|
document.getElementById('div-acresc2').style.visibility = 'hidden';
|
|
a2 = 0; document.getElementById('m-acresc2').value = 0;
|
|
}
|
|
|
|
let total = (q * pAtual.p);
|
|
total = total * (1 - (d1/100)) * (1 - (d2/100));
|
|
total = total * (1 + (a1/100)) * (1 + (a2/100));
|
|
total = total * (1 + (ipi/100));
|
|
|
|
document.getElementById('m-sub').value = "R$ " + total.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2});
|
|
}
|
|
|
|
function addItem() {
|
|
let q = document.getElementById('m-qtd').value;
|
|
let d1 = parseFloat(document.getElementById('m-desc').value) || 0;
|
|
let d2 = parseFloat(document.getElementById('m-desc2').value) || 0;
|
|
let a1 = parseFloat(document.getElementById('m-acresc').value) || 0;
|
|
let a2 = parseFloat(document.getElementById('m-acresc2').value) || 0;
|
|
let ipi = parseFloat(document.getElementById('m-ipi').value) || 0;
|
|
let t = document.getElementById('m-sub').value;
|
|
|
|
let detalhesColuna = [];
|
|
if(d1 > 0) detalhesColuna.push(`D1:${d1}%`);
|
|
if(d2 > 0) detalhesColuna.push(`D2:${d2}%`);
|
|
if(a1 > 0) detalhesColuna.push(`A1:${a1}%`);
|
|
if(a2 > 0) detalhesColuna.push(`A2:${a2}%`);
|
|
if(ipi > 0) detalhesColuna.push(`IPI:${ipi}%`);
|
|
|
|
let labelTabela = detalhesColuna.length > 0 ? detalhesColuna.join(' ') : '0%';
|
|
|
|
let row = `<tr>
|
|
<td>${pAtual.c}</td>
|
|
<td style="font-weight:700">${pAtual.n}</td>
|
|
<td>${q}</td>
|
|
<td>UN</td>
|
|
<td style="font-size: 11px;">${labelTabela}</td>
|
|
<td style="font-weight:700; color:var(--jcs-blue)">${t}</td>
|
|
<td><i class="fa-solid fa-trash" style="color:var(--red); cursor:pointer" onclick="this.closest('tr').remove(); atualizarTotalGeral();"></i></td>
|
|
</tr>`;
|
|
|
|
// Remove Empty State if it exists
|
|
const emptyRow = document.getElementById('empty-table-row');
|
|
if(emptyRow) emptyRow.remove();
|
|
|
|
document.querySelector('#tabela-itens tbody').innerHTML += row;
|
|
|
|
atualizarTotalGeral();
|
|
fecharModal();
|
|
}
|
|
|
|
function atualizarTotalGeral() {
|
|
let totalPedido = 0;
|
|
const tbody = document.querySelector('#tabela-itens tbody');
|
|
const linhas = tbody.querySelectorAll('tr:not(#empty-table-row)');
|
|
|
|
linhas.forEach(tr => {
|
|
let valorTexto = tr.cells[5].innerText.replace('R$ ', '').trim();
|
|
if(valorTexto.includes(',') && valorTexto.includes('.')) {
|
|
valorTexto = valorTexto.replace(/\./g, '').replace(',', '.');
|
|
} else if (valorTexto.includes(',')) {
|
|
valorTexto = valorTexto.replace(',', '.');
|
|
}
|
|
totalPedido += parseFloat(valorTexto) || 0;
|
|
});
|
|
|
|
document.getElementById('total-pedido').innerText = "R$ " + totalPedido.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2});
|
|
|
|
// Se não houver itens, mostra o empty state novamente
|
|
if(linhas.length === 0) {
|
|
tbody.innerHTML = `
|
|
<tr id="empty-table-row">
|
|
<td colspan="7" style="padding: 0; border: none;">
|
|
<div class="empty-table-msg">
|
|
<i class="fa-solid fa-cart-arrow-down"></i>
|
|
<p>Nenhum produto adicionado ao pedido ainda.<br>Pesquise acima para incluir itens.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
}
|
|
|
|
function finalizar() { alert("Pedido finalizado com sucesso!"); showPage('pedidos', document.getElementById('link-pedidos')); }
|
|
|
|
/* --- ATUALIZADO: Gráficos de Vendas e o Novo Mix --- */
|
|
function renderCharts() {
|
|
// Evolução Diária (Linha)
|
|
const ctxVendas = document.getElementById('vendasChart').getContext('2d');
|
|
new Chart(ctxVendas, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['1','5','10','15','20','25','30'],
|
|
datasets: [{
|
|
label: 'Vendas Diárias (R$)',
|
|
data: [1200000, 2500000, 3800000, 5200000, 7562062, 8100000, 9200000],
|
|
borderColor: '#004a99',
|
|
backgroundColor: 'rgba(0, 74, 153, 0.05)',
|
|
fill: true, tension: 0.4
|
|
}]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false }
|
|
});
|
|
|
|
// Mix de Vendas (Rosca) - Novo!
|
|
const ctxMix = document.getElementById('mixChart').getContext('2d');
|
|
new Chart(ctxMix, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Descartáveis', 'Sacolas', 'Bobinas', 'Linha Premium'],
|
|
datasets: [{
|
|
data: [40, 30, 20, 10],
|
|
backgroundColor: ['#004a99', '#38a169', '#ed8936', '#805ad5'],
|
|
borderWidth: 0,
|
|
cutout: '70%'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 11 } } }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderChartClientes() {
|
|
const ctx = document.getElementById('carteiraChart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Ativos', 'Inativos Antigos', 'Inativos Recentes'],
|
|
datasets: [{
|
|
data: [39.60, 60.36, 0.04],
|
|
backgroundColor: ['#38a169', '#e53e3e', '#ecc94b'],
|
|
borderWidth: 0,
|
|
cutout: '85%'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: { enabled: true }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function abrirCadastroCliente() {
|
|
showPage('cadastro-cliente');
|
|
limparFormularioCliente();
|
|
}
|
|
|
|
function toggleTipoPessoa() {
|
|
const tipo = document.querySelector('input[name="tipoPessoa"]:checked').value;
|
|
const lblDoc = document.getElementById('lbl-cli-doc');
|
|
const inDoc = document.getElementById('cad-cli-doc');
|
|
const lblRazao = document.getElementById('lbl-cli-razao');
|
|
const divFantasia = document.getElementById('div-cli-fantasia');
|
|
|
|
if(tipo === 'PJ') {
|
|
lblDoc.innerHTML = 'CNPJ <span style="color:var(--red)">*</span>';
|
|
inDoc.placeholder = '00.000.000/0001-00';
|
|
lblRazao.innerHTML = 'RAZÃO SOCIAL <span style="color:var(--red)">*</span>';
|
|
divFantasia.style.display = 'block';
|
|
} else {
|
|
lblDoc.innerHTML = 'CPF <span style="color:var(--red)">*</span>';
|
|
inDoc.placeholder = '000.000.000-00';
|
|
lblRazao.innerHTML = 'NOME COMPLETO <span style="color:var(--red)">*</span>';
|
|
divFantasia.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function addEmailToContact(btn) {
|
|
const list = btn.closest('.email-list');
|
|
const div = document.createElement('div');
|
|
div.style = 'display:flex; gap:10px; margin-bottom:5px;';
|
|
div.innerHTML = `
|
|
<input type="email" placeholder="email@exemplo.com">
|
|
<button type="button" class="btn-outline-cli" style="color:var(--red); border-color:var(--red);" onclick="this.parentElement.remove()">
|
|
<i class="fa-solid fa-trash"></i>
|
|
</button>
|
|
`;
|
|
list.appendChild(div);
|
|
}
|
|
|
|
function addContatoField() {
|
|
const area = document.getElementById('area-contatos');
|
|
const div = document.createElement('div');
|
|
div.className = 'contato-block';
|
|
div.style = 'border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; margin-bottom: 15px; position: relative; background: #fafbfc;';
|
|
div.innerHTML = `
|
|
<i class="fa-solid fa-trash" style="position: absolute; right: 15px; top: 15px; color: var(--red); cursor: pointer;" onclick="this.parentElement.remove()"></i>
|
|
<div class="grid-3" style="margin-bottom: 0;">
|
|
<div class="input-group" style="grid-column: span 2;">
|
|
<label>NOME</label>
|
|
<input type="text" placeholder="Nome do Contato">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>CARGO</label>
|
|
<input type="text" placeholder="Ex. Gerente de Compras">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>TELEFONE / WHATSAPP</label>
|
|
<input type="text" placeholder="(00) 00000-0000">
|
|
</div>
|
|
<div class="input-group" style="grid-column: span 2; margin-bottom: 0;">
|
|
<label>E-MAIL</label>
|
|
<div class="email-list">
|
|
<div style="display:flex; gap:10px; margin-bottom:5px;">
|
|
<input type="email" placeholder="email@exemplo.com">
|
|
<button type="button" class="btn-outline-cli" onclick="addEmailToContact(this)"><i class="fa-solid fa-plus"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
area.appendChild(div);
|
|
}
|
|
|
|
function limparFormularioCliente() {
|
|
document.querySelector('input[name="tipoPessoa"][value="PJ"]').checked = true;
|
|
toggleTipoPessoa();
|
|
|
|
const camposInputs = [
|
|
'cad-cli-doc', 'cad-cli-razao', 'cad-cli-fantasia',
|
|
'cad-cli-ie', 'cad-cli-suframa', 'cad-cli-segmento', 'cad-cli-rede', 'cad-cli-obs',
|
|
'cad-end-cep', 'cad-end-logradouro', 'cad-end-numero', 'cad-end-complemento',
|
|
'cad-end-bairro', 'cad-end-cidade', 'cad-end-estado'
|
|
];
|
|
|
|
camposInputs.forEach(id => {
|
|
if(document.getElementById(id)) document.getElementById(id).value = '';
|
|
});
|
|
document.getElementById('cad-cli-isencao').value = 'Nao';
|
|
|
|
const areaContatos = document.getElementById('area-contatos');
|
|
areaContatos.innerHTML = `
|
|
<div class="contato-block" style="border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; margin-bottom: 15px; position: relative; background: #fafbfc;">
|
|
<div class="grid-3" style="margin-bottom: 0;">
|
|
<div class="input-group" style="grid-column: span 2;">
|
|
<label>NOME</label>
|
|
<input type="text" placeholder="Nome do Contato">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>CARGO</label>
|
|
<input type="text" placeholder="Ex. Gerente de Compras">
|
|
</div>
|
|
<div class="input-group">
|
|
<label>TELEFONE / WHATSAPP</label>
|
|
<input type="text" placeholder="(00) 00000-0000">
|
|
</div>
|
|
<div class="input-group" style="grid-column: span 2; margin-bottom: 0;">
|
|
<label>E-MAIL</label>
|
|
<div class="email-list">
|
|
<div style="display:flex; gap:10px; margin-bottom:5px;">
|
|
<input type="email" placeholder="email@exemplo.com">
|
|
<button type="button" class="btn-outline-cli" onclick="addEmailToContact(this)"><i class="fa-solid fa-plus"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function salvarCliente(cadastrarOutro) {
|
|
const doc = document.getElementById('cad-cli-doc').value.trim();
|
|
const razao = document.getElementById('cad-cli-razao').value.trim();
|
|
|
|
if(!doc || !razao) {
|
|
alert("Por favor, preencha os campos obrigatórios (*).");
|
|
return;
|
|
}
|
|
|
|
alert("Cliente cadastrado com sucesso!");
|
|
|
|
if(cadastrarOutro) {
|
|
limparFormularioCliente();
|
|
} else {
|
|
showPage('clientes');
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |