134 lines
8.4 KiB
Plaintext
134 lines
8.4 KiB
Plaintext
<!DOCTYPE html><html lang="nl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reports — Mek-Tech Enterprise</title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/neon.css"><link rel="stylesheet" href="/css/dynamic.css"><link rel="icon" href="/img/favicon.svg"><script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
:root{--sb-w:210px;--hdr-h:50px}
|
|
html,body{height:100%;margin:0;padding:0;scroll-behavior:smooth}
|
|
body{background:var(--bg);font-family:'Inter',-apple-system,sans-serif}
|
|
.app-layout{display:flex;min-height:100vh;padding-top:var(--hdr-h)}
|
|
.sidebar{position:fixed;top:var(--hdr-h);left:0;width:var(--sb-w);height:calc(100vh - var(--hdr-h));background:var(--bg-nav);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:50;overflow-y:auto}
|
|
.main-area{flex:1;margin-left:var(--sb-w);padding:1.5rem 2rem 3rem;max-width:1400px}
|
|
.page-hdr{margin-bottom:1.5rem}.page-hdr h1{font-size:1.5rem;color:var(--text);font-weight:800;letter-spacing:-.4px}
|
|
.report-builder{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1.5rem}
|
|
.report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
|
|
.report-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:1.25rem;transition:all .2s;text-decoration:none;color:inherit;display:block}
|
|
.report-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.1)}
|
|
.report-icon{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
|
|
.report-icon svg{width:24px;height:24px;color:#fff}
|
|
.report-title{font-size:1rem;font-weight:600;color:var(--text);margin-bottom:.5rem}
|
|
.report-desc{font-size:.8rem;color:var(--text-muted)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="navbar"><div class="nav-inner"><a href="/" class="nav-brand"><img src="/img/logo.svg" class="nav-logo" alt="Mek-Tech"></a><div class="nav-links"><a href="/" class="nav-link">Dashboard</a><a href="/projects" class="nav-link">Projecten</a><a href="/clients" class="nav-link">Cliënten</a><a href="/engagements" class="nav-link">Engagements</a><a href="/finance" class="nav-link">Financiën</a><a href="/market" class="nav-link">Markt</a><a href="/reports" class="nav-link active">Reports</a><a href="/settings" class="nav-link">Instellingen</a><a href="/auth/logout" class="nav-link logout">Uitloggen</a></div></div></div>
|
|
<div class="app-layout">
|
|
<div class="sidebar">
|
|
<div class="sb-brand"><h2><span class="brand-dot"></span>Mek-Tech Enterprise</h2><p>Reports & Analytics</p></div>
|
|
<div class="sb-nav">
|
|
<div class="sb-sep">Report Types</div>
|
|
<button class="sb-item active" data-tab="builder"><span class="sb-icon"><i data-lucide="file-text"></i></span>Report Builder</button>
|
|
<button class="sb-item" data-tab="saved"><span class="sb-icon"><i data-lucide="folder"></i></span>Opgeslagen</button>
|
|
<button class="sb-item" data-tab="templates"><span class="sb-icon"><i data-lucide="layout-template"></i></span>Templates</button>
|
|
</div>
|
|
</div>
|
|
<div class="main-area">
|
|
<div class="page-hdr fade-in-up"><h1>Reports</h1><p>Genereer en beheer rapportages</p></div>
|
|
<div class="tab-panel active" id="panel-builder">
|
|
<div class="report-builder">
|
|
<h3 style="margin-bottom:1rem;font-size:1rem;color:var(--text)">Report Builder</h3>
|
|
<form id="reportForm" method="POST" action="/reports/generate">
|
|
<div class="form-grid">
|
|
<div><label>Report Type</label><select name="report_type" required><option value="">Selecteer type</option><option value="client_summary">Client Summary</option><option value="project_summary">Project Summary</option><option value="financial">Financial Report</option><option value="tasks">Tasks Report</option><option value="time">Time Tracking</option></select></div>
|
|
<div><label>Cliënt</label><select name="client_id"><option value="">Alle cliënten</option><% clients.forEach(c=>{ %><option value="<%= c.id %>"><%= c.name %></option><% }) %></select></div>
|
|
<div><label>Project</label><select name="project_id"><option value="">Alle projecten</option><% projects.forEach(p=>{ %><option value="<%= p.id %>"><%= p.name %></option><% }) %></select></div>
|
|
<div><label>Van Datum</label><input type="date" name="date_from"></div>
|
|
<div><label>Tot Datum</label><input type="date" name="date_to"></div>
|
|
<div><label>Format</label><select name="format"><option value="json">JSON (Preview)</option><option value="pdf">PDF</option><option value="excel">Excel</option></select></div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary">Genereer Report</button>
|
|
<button type="button" class="btn btn-secondary" onclick="saveReport()">Opslaan</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div style="margin-top:2rem">
|
|
<h3 style="margin-bottom:1rem;font-size:1rem;color:var(--text)">Quick Reports</h3>
|
|
<div class="report-grid">
|
|
<a href="/reports/generate?report_type=client_summary&format=pdf" class="report-card">
|
|
<div class="report-icon"><i data-lucide="users"></i></div>
|
|
<div class="report-title">Client Summary</div>
|
|
<div class="report-desc">Overzicht van alle cliënten en engagements</div>
|
|
</a>
|
|
<a href="/reports/generate?report_type=project_summary&format=pdf" class="report-card">
|
|
<div class="report-icon"><i data-lucide="folder"></i></div>
|
|
<div class="report-title">Project Summary</div>
|
|
<div class="report-desc">Project status en voortgang</div>
|
|
</a>
|
|
<a href="/reports/generate?report_type=financial&format=excel" class="report-card">
|
|
<div class="report-icon"><i data-lucide="dollar-sign"></i></div>
|
|
<div class="report-title">Financial Report</div>
|
|
<div class="report-desc">Facturen en omzet overzicht</div>
|
|
</a>
|
|
<a href="/reports/generate?report_type=time&format=excel" class="report-card">
|
|
<div class="report-icon"><i data-lucide="clock"></i></div>
|
|
<div class="report-title">Time Tracking</div>
|
|
<div class="report-desc">Urenregistratie rapportage</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-panel" id="panel-saved">
|
|
<h3 style="margin-bottom:1rem;font-size:1rem;color:var(--text)">Opgeslagen Reports</h3>
|
|
<% if(savedReports.length===0){ %><div class="empty-state">Nog geen opgeslagen reports</div><% }else{ %>
|
|
<div class="report-grid">
|
|
<% savedReports.forEach(report=>{ %>
|
|
<div class="report-card">
|
|
<div class="report-title"><%= report.name %></div>
|
|
<div class="report-desc"><%= report.report_type %> · <%= new Date(report.created_at).toLocaleDateString('nl-NL') %></div>
|
|
<div style="margin-top:.5rem">
|
|
<a href="/reports/generate?id=<%= report.id %>&format=pdf" class="btn-small">PDF</a>
|
|
<a href="/reports/generate?id=<%= report.id %>&format=excel" class="btn-small">Excel</a>
|
|
</div>
|
|
</div>
|
|
<% }) %>
|
|
</div><% } %>
|
|
</div>
|
|
<div class="tab-panel" id="panel-templates">
|
|
<h3 style="margin-bottom:1rem;font-size:1rem;color:var(--text)">Report Templates</h3>
|
|
<div class="report-grid">
|
|
<div class="report-card">
|
|
<div class="report-icon"><i data-lucide="file-text"></i></div>
|
|
<div class="report-title">Monthly Client Report</div>
|
|
<div class="report-desc">Standaard maandelijkse cliënt rapportage</div>
|
|
</div>
|
|
<div class="report-card">
|
|
<div class="report-icon"><i data-lucide="bar-chart-2"></i></div>
|
|
<div class="report-title">Project Status Report</div>
|
|
<div class="report-desc">Project voortgang en mijlpalen</div>
|
|
</div>
|
|
<div class="report-card">
|
|
<div class="report-icon"><i data-lucide="trending-up"></i></div>
|
|
<div class="report-title">Revenue Report</div>
|
|
<div class="report-desc">Omzet en facturatie overzicht</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></div>
|
|
<script>
|
|
document.querySelectorAll('.sb-item').forEach(function(b){
|
|
b.addEventListener('click',function(){
|
|
var t=this.dataset.tab;
|
|
document.querySelectorAll('.sb-item').forEach(function(x){x.classList.remove('active')});
|
|
document.querySelectorAll('.tab-panel').forEach(function(x){x.classList.remove('active')});
|
|
this.classList.add('active');
|
|
document.getElementById('panel-'+t).classList.add('active');
|
|
});
|
|
});
|
|
function saveReport(){
|
|
const form=document.getElementById('reportForm');
|
|
const formData=new FormData(form);
|
|
const config=Object.fromEntries(formData);
|
|
fetch('/reports/save',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:'Custom Report',config})}).then(()=>alert('Report opgeslagen'));
|
|
}
|
|
lucide.createIcons();
|
|
</script>
|
|
</body></html>
|