<%- include('../partials/header') %>
<div class="mb24"><h2 style="font-size:20px;font-weight:700;margin-bottom:4px">Reports & Compliance</h2></div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px">
<% [
  {title:'GSTR-1',sub:'Outward supplies (Sales)',icon:'fa-file-shield',url:'/reports/gstr1',color:'var(--green)'},
  {title:'GSTR-2',sub:'Inward supplies (Purchase)',icon:'fa-file-import',url:'/reports/gstr2',color:'var(--accent)'},
  {title:'Sales Register',sub:'All sales with GST',icon:'fa-chart-line',url:'/reports/sales-register',color:'var(--purple)'},
  {title:'Purchase Register',sub:'All purchases with GST',icon:'fa-chart-bar',url:'/reports/purchase-register',color:'var(--amber)'},
  {title:'Outstanding',sub:'Dues receivable & payable',icon:'fa-clock-rotate-left',url:'/reports/outstanding',color:'var(--red)'},
].forEach(c=>{%>
<a href="<%=c.url%>" style="text-decoration:none">
  <div class="card" style="padding:20px;transition:border-color .2s;cursor:pointer" onmouseover="this.style.borderColor='<%=c.color%>'" onmouseout="this.style.borderColor='var(--border)'">
    <div style="width:44px;height:44px;background:<%=c.color%>20;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;color:<%=c.color%>;margin-bottom:12px"><i class="fa <%=c.icon%>"></i></div>
    <div style="font-size:15px;font-weight:700;margin-bottom:4px"><%=c.title%></div>
    <div class="muted sm"><%=c.sub%></div>
  </div>
</a>
<%})%>
</div>
<%- include('../partials/footer') %>
