<%- include('../partials/header') %>
<div class="row g-3 mb-4"><% const cards=[['Total CAPA',metrics.total,'All registered cases','bi-clipboard2-check'],['Active CAPA',metrics.total-metrics.closed,'Open / active portfolio','bi-arrow-repeat'],['Closure Rate',metrics.rate.toFixed(1)+'%',metrics.closed+' CAPA closed','bi-check2-circle'],['Overdue',overdue,'Open CAPA beyond target date','bi-alarm']]; cards.forEach((c,i)=>{ %><div class="col-sm-6 col-xl-3"><div class="kpi-card kpi-<%= ['blue','amber','green','red'][i] %>"><div class="kpi-icon"><i class="bi <%= c[3] %>"></i></div><div class="kpi-content"><span><%= c[0] %></span><strong><%= c[1] %></strong><small><%= c[2] %></small></div></div></div><% }) %></div>
<div class="row g-4 mb-4"><div class="col-xl-8"><div class="card panel-card chart-card h-100"><div class="card-header"><div><h5>CAPA Trend</h5><small>Cases detected over the last six months</small></div><span class="chart-badge"><i class="bi bi-activity"></i> Live from database</span></div><div class="card-body chart-wrap"><canvas id="trend"></canvas></div></div></div><div class="col-xl-4"><div class="card panel-card chart-card h-100"><div class="card-header"><div><h5>CAPA Status</h5><small>Portfolio distribution</small></div></div><div class="card-body chart-wrap chart-wrap-doughnut"><canvas id="status"></canvas></div></div></div></div>
<div class="row g-4 mb-4"><div class="col-lg-6"><div class="card panel-card chart-card h-100"><div class="card-header"><div><h5>Priority Profile</h5><small>Management attention</small></div></div><div class="card-body chart-wrap"><canvas id="priority"></canvas></div></div></div><div class="col-lg-6"><div class="card panel-card chart-card h-100"><div class="card-header"><div><h5>Severity Profile</h5><small>Risk distribution</small></div></div><div class="card-body chart-wrap"><canvas id="severity"></canvas></div></div></div></div>
<div class="row g-4"><div class="col-xl-8"><div class="card panel-card"><div class="card-header"><div><h5>Recent CAPA</h5><small>Latest registered quality cases</small></div><a href="/capa" class="btn btn-sm btn-outline-primary">Open CAPA Register</a></div><div class="table-responsive"><table class="table align-middle mb-0"><thead><tr><th>CAPA</th><th>Title</th><th>Priority</th><th>Status</th><th>Owner</th></tr></thead><tbody><% recent.forEach(c=>{ %><tr><td><a href="/capa/<%= c.id %>"><strong><%= c.capa_no %></strong></a></td><td><%= c.title %></td><td><span class="badge text-bg-light"><%= c.priority %></span></td><td><span class="badge text-bg-light"><%= c.status %></span></td><td><%= c.owner_name||'Unassigned' %></td></tr><% }) %></tbody></table></div></div></div><div class="col-xl-4"><div class="card panel-card"><div class="card-header"><div><h5>Quality Signals</h5><small>Integrated analytics</small></div></div><div class="card-body"><div class="metric-list"><div><span>Pending approvals</span><strong><%= approval %></strong></div><div><span>Latest Pareto items</span><strong><%= paretoItems.length %></strong></div><div><span>Latest Fishbone</span><strong><%= fishbone?.title||'—' %></strong></div><div><span>Markov lifecycle</span><strong><%= markov?'Available':'—' %></strong></div></div></div></div></div></div>
<script>const trend=<%- JSON.stringify(trend) %>,counts=<%- JSON.stringify(counts) %>,pc=<%- JSON.stringify(pc) %>,sc=<%- JSON.stringify(sc) %>;new Chart(document.getElementById('trend'),{type:'line',data:{labels:trend.map(x=>x.ym),datasets:[{label:'CAPA',data:trend.map(x=>x.total),tension:.35,fill:true}]},options:{responsive:true,maintainAspectRatio:false}});new Chart(document.getElementById('status'),{type:'doughnut',data:{labels:Object.keys(counts),datasets:[{data:Object.values(counts)}]},options:{responsive:true,maintainAspectRatio:false}});new Chart(document.getElementById('priority'),{type:'bar',data:{labels:Object.keys(pc),datasets:[{label:'CAPA',data:Object.values(pc)}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}}}});new Chart(document.getElementById('severity'),{type:'bar',data:{labels:Object.keys(sc),datasets:[{label:'CAPA',data:Object.values(sc)}]},options:{responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}}}});</script><%- include('../partials/footer') %>
