Spaces:

SRVCP
/

assignment

Running

File size: 25,804 Bytes

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TrafficAI Review System Prototype</title>
<style>
  :root{
    --bg:#06111f;
    --panel:#0d1a2b;
    --panel2:#111d31;
    --line:#22314a;
    --text:#f6f7fb;
    --sub:#9fb0c8;
    --orange:#ff7a14;
    --green:#22c55e;
    --blue:#4688ff;
    --purple:#8b5cf6;
    --yellow:#f7c948;
    --red:#ef4444;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:Inter, Segoe UI, system-ui, -apple-system, sans-serif;
    background: radial-gradient(circle at top right, #112342 0%, var(--bg) 42%);
    color:var(--text);
  }
  .hidden{display:none !important}
  .app{min-height:100vh;padding:20px}
  .card, .panel{
    background:linear-gradient(180deg, rgba(17,29,49,.95), rgba(10,18,31,.98));
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 12px 32px rgba(0,0,0,.28);
  }
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 22px;margin-bottom:18px
  }
  .brand{display:flex;align-items:center;gap:14px}
  .logo{width:42px;height:42px;border-radius:12px;background:var(--orange);display:grid;place-items:center;font-size:18px;font-weight:700}
  .brand h1{font-size:18px;margin:0}
  .brand p{margin:2px 0 0;color:var(--sub);font-size:13px}
  .user-badge{display:flex;align-items:center;gap:14px}
  .avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3654ff,#8b5cf6);font-weight:700}
  .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
  .metric{padding:20px 22px;position:relative;overflow:hidden}
  .metric .accent{position:absolute;inset:0 auto 0 0;width:4px;background:var(--orange);opacity:.95}
  .metric.green .accent{background:var(--green)} .metric.blue .accent{background:var(--blue)} .metric.purple .accent{background:var(--purple)}
  .metric h3{margin:0 0 10px;color:#b7c4d9;font-size:14px;font-weight:600}
  .metric .value{font-size:36px;font-weight:800;line-height:1}
  .metric .note{font-size:13px;color:var(--sub);margin-top:8px}
  .searchbar, .triage{padding:16px 18px;margin-bottom:18px}
  .searchbar input{
    width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);
    background:#07131f;color:var(--text);font-size:15px;outline:none
  }
  .section-title{font-size:18px;font-weight:700;margin:4px 0 14px}
  .triage-grid, .violations{display:grid;gap:16px}
  .triage-grid{grid-template-columns:repeat(3,1fr)}
  .lane{padding:18px;border-radius:16px;border:1px solid var(--line);background:rgba(8,17,31,.7)}
  .lane h4{margin:0 0 8px;font-size:16px}
  .lane p{margin:0;color:var(--sub);font-size:13px;line-height:1.4}
  .lane.fast{border-color:rgba(34,197,94,.5)} .lane.standard{border-color:rgba(70,136,255,.5)} .lane.exception{border-color:rgba(255,122,20,.5)}
  .violations{grid-template-columns:repeat(4,1fr)}
  .violation-card{padding:20px;cursor:pointer;transition:.2s transform,.2s border-color}
  .violation-card:hover{transform:translateY(-2px);border-color:rgba(255,122,20,.45)}
  .violation-card h4{margin:0 0 8px;font-size:18px}
  .violation-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--sub);margin:10px 0}
  .badge{padding:6px 10px;border-radius:10px;border:1px solid var(--line);font-size:12px;background:rgba(255,255,255,.03);display:inline-flex;gap:6px;align-items:center}
  .bar{height:8px;border-radius:999px;background:#1b2d46;overflow:hidden}
  .bar > span{display:block;height:100%;background:var(--orange);border-radius:inherit}
  .login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
  .login{width:min(420px,92vw);padding:24px}
  .login .brand{margin-bottom:18px}
  label{display:block;color:#b7c4d9;font-size:13px;margin:12px 0 6px}
  input, textarea{
    width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);
    background:#08131f;color:var(--text);outline:none;font-size:14px
  }
  .btn{padding:14px 18px;border:none;border-radius:14px;background:var(--orange);color:white;font-weight:700;cursor:pointer;font-size:14px}
  .btn.secondary{background:transparent;border:1px solid var(--line);color:var(--text)}
  .dashboard-shell,.review-shell{max-width:1440px;margin:0 auto}
  .review-toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;margin-bottom:18px}
  .review-toolbar .left{display:flex;align-items:center;gap:18px}
  .back{cursor:pointer;color:var(--sub)}
  .review-toolbar h2{font-size:22px;margin:0}
  .review-toolbar p{margin:2px 0 0;color:var(--sub);font-size:13px}
  .stats{display:flex;gap:24px;align-items:center;font-size:13px;color:var(--sub)}
  .stats strong{display:block;color:var(--text);font-size:16px}
  .progress{width:140px;height:10px;background:#1a2a42;border-radius:999px;overflow:hidden}
  .progress span{display:block;height:100%;width:2%;background:linear-gradient(90deg,var(--orange),#ffc56e)}
  .review-grid{display:grid;grid-template-columns:1.55fr .72fr .72fr;gap:18px}
  .review-col{padding:18px}
  .chips{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .chip{padding:6px 10px;border-radius:10px;font-size:12px;font-weight:600}
  .chip.blue{background:rgba(70,136,255,.18);color:#87b0ff;border:1px solid rgba(70,136,255,.35)}
  .chip.purple{background:rgba(139,92,246,.18);color:#c1a9ff;border:1px solid rgba(139,92,246,.35)}
  .video-box{height:360px;border-radius:18px;background:linear-gradient(180deg,#3567e8 0%,#2d58c4 60%,#1e3f95 100%);display:grid;place-items:center;font-size:110px;font-weight:800;letter-spacing:-2px;position:relative;overflow:hidden}
  .video-box:before{content:"";position:absolute;inset:auto 0 0 0;height:92px;background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45));}
  .playbar{display:flex;align-items:center;gap:14px;padding:14px 10px 2px;color:white;font-size:13px}
  .playline{flex:1;height:5px;background:rgba(255,255,255,.28);border-radius:999px;overflow:hidden}
  .playline span{display:block;width:33%;height:100%;background:var(--orange)}
  .meta-list{display:grid;gap:10px;margin-top:14px;color:#d8e0ee}
  .meta-item{display:flex;gap:10px;align-items:center;font-size:15px}
  .evidence-card{padding:14px;border-radius:16px;background:#0a1323;border:1px solid var(--line);margin-bottom:12px}
  .event-thumb{height:160px;border-radius:14px;background:linear-gradient(180deg,#20293b,#181f2e);display:grid;place-items:center;font-size:42px;font-weight:700}
  .event-thumb.red{background:#e31f25}
  .event-thumb.blue{background:linear-gradient(180deg,#4d73d6,#4065c6)}
  .evidence-title{font-size:15px;font-weight:700;margin:12px 0 6px}
  .muted{color:var(--sub);font-size:13px}
  textarea{height:236px;resize:none}
  .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
  .tag{padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:#0a1323;color:var(--text);cursor:pointer;font-size:13px}
  .tag.active{border-color:rgba(255,122,20,.55);background:rgba(255,122,20,.14)}
  .actions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
  .action{padding:18px;border-radius:16px;font-size:18px;font-weight:700;border:1px solid transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
  .action small{font-size:13px;opacity:.85}
  .dismiss{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.35);color:#ff9d9d}
  .escalate{background:rgba(247,201,72,.09);border-color:rgba(247,201,72,.35);color:#ffe08d}
  .approve{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.35);color:#86f2ae}
  .tip{font-size:13px;color:var(--sub);margin-top:12px}
  .notes-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
  .voice-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,122,20,.35);background:rgba(255,122,20,.12);color:#ffd0ad;font-size:13px;font-weight:700;cursor:pointer}
  .voice-btn.recording{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.42);color:#ffb7b7}
  .helper-copy{font-size:12px;line-height:1.45;color:var(--sub);margin-bottom:10px}
  .voice-status{margin-top:10px;padding:10px 12px;border-radius:12px;border:1px dashed rgba(255,122,20,.35);background:rgba(255,122,20,.06);font-size:12px;color:#ffd0ad}
  .transcript-preview{margin-top:10px;padding:12px;border-radius:14px;border:1px solid var(--line);background:#0a1323;font-size:13px;line-height:1.45;color:#d8e0ee}
  .transcript-preview strong{display:block;font-size:11px;color:var(--sub);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
  .footer-meta{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--sub);display:grid;grid-template-columns:1fr auto;gap:10px}
  .toast{position:fixed;right:22px;bottom:22px;padding:14px 16px;border-radius:14px;background:#101d31;border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.3);display:none}
  .toast.show{display:block}
  @media (max-width: 1180px){
    .metrics,.violations,.review-grid,.triage-grid,.actions{grid-template-columns:1fr 1fr}
    .review-grid .review-col:first-child{grid-column:1/-1}
  }
  @media (max-width: 820px){
    .metrics,.violations,.triage-grid,.review-grid,.actions{grid-template-columns:1fr}
    .video-box{font-size:72px;height:260px}
    .topbar,.review-toolbar{flex-direction:column;align-items:flex-start;gap:14px}
  }
</style>
</head>
<body>
<div id="loginScreen" class="login-wrap">
  <div class="login card">
    <div class="brand">
      <div class="logo">🎥</div>
      <div>
        <h1>TrafficAI Review System</h1>
        <p>Traffic Enforcement Portal</p>
      </div>
    </div>
    <label>Officer ID</label>
    <input id="officerId" value="TPO-2847" />
    <label>Password</label>
    <input type="password" value="password" />
    <div style="display:flex;gap:10px;margin-top:18px">
      <button class="btn" onclick="enterDashboard()">Sign In</button>
      <button class="btn secondary" onclick="enterDashboard()">Use Demo</button>
    </div>
    <p style="margin:14px 0 0;color:var(--sub);font-size:12px">Demo shortcut: press Enter to sign in.</p>
  </div>
</div>

<div id="app" class="app hidden">
  <div id="dashboardScreen" class="dashboard-shell">
    <div class="topbar card">
      <div class="brand">
        <div class="logo">🎥</div>
        <div>
          <h1>TrafficAI Review System</h1>
          <p>Traffic Enforcement Dashboard</p>
        </div>
      </div>
      <div class="user-badge">
        <div style="text-align:right">
          <div style="font-size:12px;color:var(--sub)">Officer</div>
          <div id="officerLabel" style="font-size:22px;font-weight:800">TPO-2847</div>
        </div>
        <div class="avatar">TP</div>
      </div>
    </div>

    <div class="metrics">
      <div class="metric card">
        <div class="accent"></div>
        <h3>Pending Reviews</h3>
        <div class="value" id="pendingValue">1626</div>
        <div class="note">Across all violation types</div>
      </div>
      <div class="metric green card">
        <div class="accent"></div>
        <h3>Today Reviewed</h3>
        <div class="value" id="reviewedValue">127</div>
        <div class="note">+23% from yesterday</div>
      </div>
      <div class="metric blue card">
        <div class="accent"></div>
        <h3>Avg Review Time</h3>
        <div class="value" id="avgValue">7.8s</div>
        <div class="note">Target: &lt; 10s</div>
      </div>
      <div class="metric purple card">
        <div class="accent"></div>
        <h3>System Accuracy</h3>
        <div class="value">93.2%</div>
        <div class="note">AI-human agreement</div>
      </div>
    </div>

    <div class="searchbar card">
      <input placeholder="Search violation types, case IDs, or locations..." />
    </div>

    <div class="triage card">
      <div class="section-title">Suggested triage lanes</div>
      <div class="triage-grid">
        <div class="lane fast">
          <h4>Fast lane</h4>
          <p>High-confidence cases with complete evidence. Best path for sub-10 second review.</p>
        </div>
        <div class="lane standard">
          <h4>Standard lane</h4>
          <p>Normal review flow for cases that need officer validation but have no major risk flags.</p>
        </div>
        <div class="lane exception">
          <h4>Exception lane</h4>
          <p>Poor visibility, emergency vehicle, unclear signage, or low OCR confidence.</p>
        </div>
      </div>
    </div>

    <div>
      <div class="section-title">Violation Types - Quick Access</div>
      <div class="violations" id="violationGrid"></div>
    </div>
  </div>

  <div id="reviewScreen" class="review-shell hidden">
    <div class="review-toolbar card">
      <div class="left">
        <div class="back" onclick="goDashboard()">← Dashboard</div>
        <div>
          <h2 id="reviewTitle">Red Light Running</h2>
          <p id="caseCounter">Case 1 of 50</p>
        </div>
      </div>
      <div class="stats">
        <div><span>Avg Review Time</span><strong id="sessionAvg">0.0s</strong></div>
        <div><span>Reviewed</span><strong id="sessionReviewed">0</strong></div>
        <div>
          <span>Progress</span>
          <div class="progress"><span id="reviewProgress"></span></div>
        </div>
      </div>
    </div>

    <div class="review-grid">
      <div class="review-col panel">
        <div class="chips">
          <div class="chip blue" id="aiConfidence">AI: 83.5%</div>
          <div class="chip purple" id="plateConfidence">Plate: 93%</div>
        </div>
        <div class="video-box" id="videoStage">Vehicle</div>
        <div class="playbar">
          <div>▶</div>
          <div class="playline"><span></span></div>
          <div id="clipTime">0:03 / 0:08</div>
        </div>
        <div class="meta-list">
          <div class="meta-item">📍 <span id="caseLocation">Banjara Hills Signal</span></div>
          <div class="meta-item">📷 <span id="casePlate">TS 69 BP 4715</span></div>
          <div class="meta-item">🕒 <span id="caseTimestamp">4/20/2026, 8:54:54 PM</span></div>
          <div class="meta-item">🚦 Signal state: <strong>Red</strong> · Stop line crossed: <strong>Yes</strong></div>
        </div>
        <div class="actions">
          <button class="action dismiss" onclick="takeAction('dismiss')">Dismiss <small>← A</small></button>
          <button class="action escalate" onclick="takeAction('escalate')">Escalate <small>↑ S</small></button>
          <button class="action approve" onclick="takeAction('approve')">Issue Citation <small>D →</small></button>
        </div>
        <div class="tip">💡 Keyboard shortcuts: A = Dismiss · S = Escalate · D = Issue Citation</div>
      </div>

      <div class="review-col panel">
        <div class="section-title" style="margin-top:0">Evidence Trail</div>
        <div class="evidence-card">
          <div class="event-thumb">Approach</div>
          <div class="evidence-title">Vehicle approaching intersection</div>
          <div class="muted">Context frame · 0.0s</div>
        </div>
        <div class="evidence-card">
          <div class="event-thumb red">Violation</div>
          <div class="evidence-title">Stop line crossed on red</div>
          <div class="muted">Violation frame · 2.5s</div>
        </div>
        <div class="evidence-card">
          <div class="event-thumb blue" style="font-size:32px">TS 69 BP</div>
          <div class="evidence-title">Plate crop</div>
          <div class="muted">OCR: TS69BP4715 · Confidence 93%</div>
        </div>
      </div>

      <div class="review-col panel">
        <div class="notes-header">
          <div class="section-title" style="margin:0">Review Notes</div>
          <button id="voiceBtn" class="voice-btn" onclick="toggleVoiceNote()">🎙 Start voice note</button>
        </div>
        <div class="helper-copy">Use quick tags for common reasons and a 3–5 second voice note for dismiss or escalate cases so rationale capture stays within the &lt;10 second target.</div>
        <textarea id="notes" placeholder="Add notes about this case... or tap Start voice note"></textarea>
        <div id="voiceStatus" class="voice-status">Ready for short dictation. Best used for exception cases that need audit-ready reasoning.</div>
        <div id="transcriptPreview" class="transcript-preview"><strong>Latest transcript</strong><span id="transcriptText">No voice note captured yet.</span></div>
        <div class="section-title" style="margin:16px 0 10px">Quick Tags</div>
        <div class="tags">
          <button class="tag" onclick="toggleTag(this)">Clear violation</button>
          <button class="tag" onclick="toggleTag(this)">Unclear</button>
          <button class="tag" onclick="toggleTag(this)">Emergency vehicle</button>
          <button class="tag" onclick="toggleTag(this)">Poor visibility</button>
          <button class="tag" onclick="toggleTag(this)">Plate mismatch</button>
        </div>
        <div class="footer-meta">
          <div>Case ID: <span id="caseId">CASE-1776709784805-0</span></div>
          <div>Current Time: <span id="timerValue">46.5s</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="toast" class="toast"></div>

<script>
const violations = [
  { name:'Red Light Running', count:234, time:'7.2s', accuracy:'94.5%', progress:94 },
  { name:'Speeding', count:456, time:'6.8s', accuracy:'96.2%', progress:96 },
  { name:'Illegal Parking', count:189, time:'8.1s', accuracy:'91.3%', progress:91 },
  { name:'Wrong Way', count:98, time:'9.2s', accuracy:'89.7%', progress:89 },
  { name:'No Helmet', count:167, time:'5.9s', accuracy:'97.1%', progress:97 },
  { name:'Triple Riding', count:145, time:'7.5s', accuracy:'92.8%', progress:92 },
  { name:'Mobile While Driving', count:203, time:'8.7s', accuracy:'88.4%', progress:88 },
  { name:'No Seatbelt', count:134, time:'6.3s', accuracy:'95.6%', progress:95 }
];

const cases = [
  {
    title:'Red Light Running', ai:'83.5%', plate:'93%', location:'Banjara Hills Signal', plateText:'TS 69 BP 4715',
    timestamp:'4/20/2026, 8:54:54 PM', caseId:'CASE-1776709784805-0', stage:'Vehicle', clip:'0:03 / 0:08',
    voiceNote:'Driver entered the intersection after the light turned red. Plate readable and stop line clearly crossed.'
  },
  {
    title:'Speeding', ai:'91.2%', plate:'96%', location:'Outer Ring Road - Exit 4', plateText:'TS 08 CR 2201',
    timestamp:'4/20/2026, 9:02:11 PM', caseId:'CASE-1776709784805-1', stage:'Speed', clip:'0:02 / 0:06',
    voiceNote:'Radar overlay matches vehicle lane. Speed above posted limit and plate OCR is high confidence.'
  },
  {
    title:'No Helmet', ai:'88.9%', plate:'90%', location:'Madhapur Main Road', plateText:'TS 11 DU 8877',
    timestamp:'4/20/2026, 9:07:40 PM', caseId:'CASE-1776709784805-2', stage:'Rider', clip:'0:01 / 0:05',
    voiceNote:'Rider head is fully visible without helmet. No obstruction and number plate remains readable.'
  }
];

let state = {
  officer:'TPO-2847',
  pending:1626,
  reviewed:127,
  avg:7.8,
  currentCase:0,
  sessionReviewed:0,
  sessionSeconds:0,
  timer:46.5,
  recording:false
};

function renderViolations(){
  const grid = document.getElementById('violationGrid');
  grid.innerHTML = violations.map((v, i) => `
    <div class="violation-card card" data-index="${i}">
      <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start">
        <div>
          <h4>${v.name}</h4>
          <div style="color:var(--sub);font-size:13px">Click to review cases</div>
        </div>
        <div class="badge">${v.count}</div>
      </div>
      <div class="violation-meta"><span>Avg Time</span><strong style="color:var(--text)">${v.time}</strong></div>
      <div class="violation-meta"><span>Accuracy</span><strong style="color:var(--text)">${v.accuracy}</strong></div>
      <div class="bar"><span style="width:${v.progress}%"></span></div>
    </div>
  `).join('');
  grid.querySelectorAll('.violation-card').forEach(card => {
    card.addEventListener('click', () => openReviewByIndex(Number(card.dataset.index)));
  });
}

function showToast(message){
  const toast = document.getElementById('toast');
  toast.textContent = message;
  toast.classList.add('show');
  clearTimeout(showToast._t);
  showToast._t = setTimeout(() => toast.classList.remove('show'), 1800);
}

function enterDashboard(){
  state.officer = document.getElementById('officerId').value || 'TPO-2847';
  document.getElementById('officerLabel').textContent = state.officer;
  document.getElementById('loginScreen').classList.add('hidden');
  document.getElementById('app').classList.remove('hidden');
  renderViolations();
}

function goDashboard(){
  document.getElementById('reviewScreen').classList.add('hidden');
  document.getElementById('dashboardScreen').classList.remove('hidden');
}

function openReviewByIndex(index){
  state.currentCase = index % cases.length;
  hydrateCase();
  document.getElementById('dashboardScreen').classList.add('hidden');
  document.getElementById('reviewScreen').classList.remove('hidden');
}

function hydrateCase(){
  const c = cases[state.currentCase];
  document.getElementById('reviewTitle').textContent = c.title;
  document.getElementById('caseCounter').textContent = `Case ${state.currentCase + 1} of 50`;
  document.getElementById('aiConfidence').textContent = `AI: ${c.ai}`;
  document.getElementById('plateConfidence').textContent = `Plate: ${c.plate}`;
  document.getElementById('videoStage').textContent = c.stage;
  document.getElementById('caseLocation').textContent = c.location;
  document.getElementById('casePlate').textContent = c.plateText;
  document.getElementById('caseTimestamp').textContent = c.timestamp;
  document.getElementById('caseId').textContent = c.caseId;
  document.getElementById('clipTime').textContent = c.clip;
  document.getElementById('sessionReviewed').textContent = state.sessionReviewed;
  document.getElementById('sessionAvg').textContent = state.sessionReviewed ? `${(state.sessionSeconds/state.sessionReviewed).toFixed(1)}s` : '0.0s';
  document.getElementById('reviewProgress').style.width = `${Math.max(2, (state.sessionReviewed / 50) * 100)}%`;
  document.getElementById('timerValue').textContent = `${state.timer.toFixed(1)}s`;
  document.getElementById('notes').value = '';
  document.getElementById('transcriptText').textContent = 'No voice note captured yet.';
  document.getElementById('voiceStatus').textContent = 'Ready for short dictation. Best used for exception cases that need audit-ready reasoning.';
  state.recording = false;
  const voiceBtn = document.getElementById('voiceBtn');
  voiceBtn.textContent = '🎙 Start voice note';
  voiceBtn.classList.remove('recording');
  document.querySelectorAll('.tag').forEach(t => t.classList.remove('active'));
}


function toggleVoiceNote(){
  const btn = document.getElementById('voiceBtn');
  const status = document.getElementById('voiceStatus');
  const transcriptText = document.getElementById('transcriptText');
  const notes = document.getElementById('notes');
  const c = cases[state.currentCase];
  if (!state.recording) {
    state.recording = true;
    btn.textContent = '⏺ Recording...';
    btn.classList.add('recording');
    status.textContent = 'Listening... speak a short reason such as “clear violation, plate readable, issue citation.”';
    clearTimeout(toggleVoiceNote._timer);
    toggleVoiceNote._timer = setTimeout(() => {
      state.recording = false;
      btn.textContent = '🎙 Add another voice note';
      btn.classList.remove('recording');
      status.textContent = 'Voice note captured and transcribed. This note will be saved with the audit trail.';
      transcriptText.textContent = c.voiceNote;
      notes.value = c.voiceNote;
      showToast('Voice note transcribed');
    }, 1200);
  } else {
    clearTimeout(toggleVoiceNote._timer);
    state.recording = false;
    btn.textContent = '🎙 Add voice note';
    btn.classList.remove('recording');
    status.textContent = 'Voice note stopped. Tap again to capture a new 3–5 second note.';
  }
}

function takeAction(type){
  const labels = {
    approve:'Citation issued',
    dismiss:'Case dismissed',
    escalate:'Case escalated for manual review'
  };
  state.pending -= 1;
  state.reviewed += 1;
  state.sessionReviewed += 1;
  state.sessionSeconds += type === 'escalate' ? 11.2 : (type === 'dismiss' ? 6.4 : 7.1);
  state.avg = Math.max(6.8, ((state.avg * (state.reviewed - 1)) + (state.sessionSeconds / state.sessionReviewed)) / state.reviewed).toFixed(1);
  document.getElementById('pendingValue').textContent = state.pending;
  document.getElementById('reviewedValue').textContent = state.reviewed;
  document.getElementById('avgValue').textContent = `${state.avg}s`;
  showToast(labels[type]);
  state.currentCase = (state.currentCase + 1) % cases.length;
  state.timer = 42 + Math.random() * 8;
  hydrateCase();
}

function toggleTag(el){ el.classList.toggle('active'); }

document.addEventListener('keydown', (e) => {
  if (!document.getElementById('app').classList.contains('hidden') && document.getElementById('dashboardScreen').classList.contains('hidden')) {
    if (e.key.toLowerCase() === 'a') takeAction('dismiss');
    if (e.key.toLowerCase() === 's') takeAction('escalate');
    if (e.key.toLowerCase() === 'd') takeAction('approve');
  }
  if (document.getElementById('loginScreen').classList.contains('hidden') === false && e.key === 'Enter') enterDashboard();
});

renderViolations();
</script>
</body>
</html>