<%- include('../partials/app-start') %>
<% const totalToday = Math.max(1, Number(summary.clocked_in || 0)); const workPct = Math.round(Number(summary.working||0)/totalToday*100); const breakPct=Math.round(Number(summary.on_break||0)/totalToday*100); const lunchPct=Math.round(Number(summary.at_lunch||0)/totalToday*100); %>
<header class="topbar modern-topbar"><div><div class="welcome-line"><span class="online-dot"></span> Live organization view</div><h1>Good <span data-greeting>day</span>, Admin 👋</h1><p class="muted" id="todayDate">Live company attendance for today.</p></div><div class="live-clock"><div class="clock-icon">◷</div><div><span>Local time</span><strong id="liveClock">--:--:--</strong></div></div></header>

<section class="admin-overview">
  <div class="overview-copy">
    <div class="hero-status"><span class="hero-status-dot"></span> Attendance overview</div>
    <h2><%= summary.working || 0 %> people are currently working.</h2>
    <p>See your team's live state, today's attendance footprint, and the records that need attention.</p>
    <div class="overview-actions"><a class="btn overview-primary" href="/admin/reports">View full reports →</a><a class="btn overview-secondary" href="/admin/employees">Employees</a></div>
  </div>
  <div class="attendance-graphic">
    <div class="donut" style="--working:<%= workPct %>;--break:<%= breakPct %>;--lunch:<%= lunchPct %>"><div><strong><%= summary.clocked_in || 0 %></strong><span>clocked in</span></div></div>
    <div class="donut-legend"><span><i class="legend-dot working"></i>Working <b><%= summary.working || 0 %></b></span><span><i class="legend-dot break"></i>Break <b><%= summary.on_break || 0 %></b></span><span><i class="legend-dot lunch"></i>Lunch <b><%= summary.at_lunch || 0 %></b></span></div>
  </div>
</section>

<section class="metric-grid six visual-metrics admin-metrics">
  <article class="metric accent-blue"><div class="metric-icon">◎</div><div><span>Employees</span><strong><%= summary.employees || 0 %></strong><small>Active accounts</small></div></article>
  <article class="metric accent-violet"><div class="metric-icon">↗</div><div><span>Clocked in</span><strong><%= summary.clocked_in || 0 %></strong><small>Today</small></div></article>
  <article class="metric accent-green"><div class="metric-icon">●</div><div><span>Working</span><strong><%= summary.working || 0 %></strong><small>Live now</small></div></article>
  <article class="metric accent-amber"><div class="metric-icon">☕</div><div><span>On break</span><strong><%= summary.on_break || 0 %></strong><small>Normal breaks</small></div></article>
  <article class="metric accent-coral"><div class="metric-icon">◴</div><div><span>At lunch</span><strong><%= summary.at_lunch || 0 %></strong><small>Lunch sessions</small></div></article>
  <article class="metric accent-slate"><div class="metric-icon">✓</div><div><span>Clocked out</span><strong><%= summary.clocked_out || 0 %></strong><small>Completed</small></div></article>
</section>

<section class="panel table-panel live-table-panel"><div class="panel-head"><div><p class="kicker">Live attendance</p><h3>Team status</h3><p class="panel-subtitle">Real-time employee activity from server-tracked sessions.</p></div><a class="mini-link" href="/admin/reports">All reports →</a></div><div class="table-wrap"><table><thead><tr><th>Employee</th><th>Live status</th><th>Clock in</th><th>Current activity since</th></tr></thead><tbody>
<% live.forEach(r => { const status=!r.clock_in?'Not clocked in':r.clock_out?'Clocked out':r.active_type==='BREAK'?'On break':r.active_type==='LUNCH'?'At lunch':'Working'; %><tr><td><div class="person"><div class="avatar sm"><%= r.name.slice(0,1) %></div><div><strong><%= r.name %></strong><small><%= r.email %></small></div></div></td><td><span class="badge <%= status==='Working'?'good':status==='On break'||status==='At lunch'?'warn':status==='Not clocked in'?'muted-badge':'' %>"><span class="badge-dot"></span><%= status %></span></td><td><strong><%= fmtTime(r.clock_in) %></strong></td><td><%= r.active_since ? fmtTime(r.active_since) : '—' %></td></tr><% }) %>
</tbody></table></div></section>
<%- include('../partials/app-end') %>
