Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dispatch Admin · TCG DATAE</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#f1f5f9;color:#1e293b;min-height:100vh}
.wrap{max-width:1100px;margin:0 auto;padding:30px 20px}

.hero{background:linear-gradient(135deg,#1a3a6e 0%,#234d8f 100%);color:#fff;border-radius:12px;padding:30px 32px;margin-bottom:24px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;right:-80px;top:-80px;width:260px;height:260px;background:rgba(245,158,11,.15);border-radius:50%}
.hero-badge{display:inline-block;background:rgba(245,158,11,.25);color:#fbbf24;font-size:11px;font-weight:700;letter-spacing:1.5px;padding:5px 12px;border-radius:20px;margin-bottom:10px;position:relative;z-index:1}
.hero h1{font-size:26px;font-weight:700;margin-bottom:6px;position:relative;z-index:1}
.hero p{font-size:14px;color:rgba(255,255,255,.8);position:relative;z-index:1}

.card{background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.04);overflow:hidden;margin-bottom:20px}
.card-header{background:linear-gradient(135deg,#1a3a6e 0%,#234d8f 100%);color:#fff;padding:16px 24px;font-size:15px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.card-header .icon{font-size:18px;margin-right:8px}
.card-body{padding:24px}

label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:6px}
input,select,textarea{width:100%;padding:10px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:inherit;color:#1e293b;background:#fff;transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:#1a3a6e;box-shadow:0 0 0 3px rgba(26,58,110,.1)}
textarea{min-height:80px;resize:vertical}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.form-row{margin-bottom:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.btn-primary{background:linear-gradient(135deg,#1a3a6e 0%,#234d8f 100%);color:#fff}
.btn-primary:hover{background:linear-gradient(135deg,#153258 0%,#1c3f75 100%);transform:translateY(-1px);box-shadow:0 4px 10px rgba(26,58,110,.2)}
.btn-primary:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}
.btn-gold{background:#f59e0b;color:#fff}
.btn-gold:hover{background:#d97706}
.btn-danger{background:#fff;color:#dc2626;border:1.5px solid #fecaca;padding:6px 12px;font-size:12px}
.btn-danger:hover{background:#fef2f2;border-color:#fca5a5}
.btn-logout{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);padding:6px 14px;font-size:12px}
.btn-logout:hover{background:rgba(255,255,255,.25)}

.login-box{max-width:420px;margin:60px auto}
.login-box .card-body{padding:32px}
.login-box h2{font-size:22px;color:#1a3a6e;margin-bottom:8px}
.login-box p{font-size:14px;color:#64748b;margin-bottom:24px}

.msg{padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:16px;display:none}
.msg.show{display:block}
.msg-error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.msg-success{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.msg-info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}

.cases-table{width:100%;border-collapse:collapse;font-size:13px}
.cases-table th{background:#f8fafc;padding:12px;text-align:left;font-weight:600;color:#475569;border-bottom:2px solid #e2e8f0;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.cases-table td{padding:12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.cases-table tr:hover td{background:#fafbfc}

.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.badge-available{background:#dcfce7;color:#166534}
.badge-claimed{background:#fef3c7;color:#92400e}
.badge-cancelled{background:#f1f5f9;color:#64748b}
.badge-expired{background:#fee2e2;color:#991b1b}

.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.stat-card{background:#fff;border-radius:10px;padding:16px 20px;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.stat-label{font-size:11px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.stat-value{font-size:24px;font-weight:700;color:#1a3a6e}
.stat-value.gold{color:#f59e0b}

.empty{text-align:center;padding:40px 20px;color:#94a3b8;font-size:13px}

.loading{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:700px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .hero{padding:22px 20px}
  .hero h1{font-size:20px}
}
</style>
</head>
<body>

<div class="wrap">

  <div id="loginScreen" class="login-box">
    <div class="card">
      <div class="card-header">
        <span><span class="icon">🔒</span>Admin Login</span>
      </div>
      <div class="card-body">
        <h2>Dispatch Admin</h2>
        <p>Enter your admin password to manage dispatch cases.</p>
        <div id="loginMsg" class="msg msg-error"></div>
        <div class="form-row">
          <label for="pwInput">Admin password</label>
          <input type="password" id="pwInput" placeholder="Enter password" autocomplete="current-password">
        </div>
        <button class="btn btn-primary" id="loginBtn" style="width:100%">Sign in</button>
      </div>
    </div>
  </div>

  <div id="mainScreen" style="display:none">

    <div class="hero">
      <div class="hero-badge">TCG DATAE · DISPATCH</div>
      <h1>Notary Dispatch Admin</h1>
      <p>Publish and manage notary signing cases · Denny Borges P.A.</p>
      <button class="btn btn-logout" id="logoutBtn" style="position:absolute;top:20px;right:20px;z-index:2">Log out</button>
    </div>

    <div class="stats-strip">
      <div class="stat-card"><div class="stat-label">Available</div><div class="stat-value" id="statAvailable">—</div></div>
      <div class="stat-card"><div class="stat-label">Claimed</div><div class="stat-value gold" id="statClaimed">—</div></div>
      <div class="stat-card"><div class="stat-label">Total active</div><div class="stat-value" id="statTotal">—</div></div>
      <div class="stat-card"><div class="stat-label">Cancelled</div><div class="stat-value" id="statCancelled">—</div></div>
    </div>

    <div class="card">
      <div class="card-header">
        <span><span class="icon">📋</span>Publish new case</span>
      </div>
      <div class="card-body">
        <div id="createMsg" class="msg"></div>
        <div class="grid-3">
          <div class="form-row">
            <label>Case number *</label>
            <input type="text" id="fCaseNumber" placeholder="e.g. 097185">
          </div>
          <div class="form-row">
            <label>Signer ZIP *</label>
            <input type="text" id="fSignerZip" placeholder="e.g. 33172" maxlength="5">
          </div>
          <div class="form-row">
            <label>Fee (USD) *</label>
            <input type="number" id="fFeeUsd" placeholder="e.g. 85" step="5" min="0">
          </div>
        </div>
        <div class="grid-3">
          <div class="form-row">
            <label>Signer city</label>
            <input type="text" id="fSignerCity" placeholder="e.g. Miami">
          </div>
          <div class="form-row">
            <label>Signer state</label>
            <input type="text" id="fSignerState" placeholder="e.g. FL" maxlength="2">
          </div>
          <div class="form-row">
            <label>Signer type</label>
            <select id="fSignerType">
              <option value="living">Living claimant</option>
              <option value="deceased">Deceased · heir signing</option>
            </select>
          </div>
        </div>
        <div class="grid-2">
          <div class="form-row">
            <label>Preferred date</label>
            <input type="date" id="fPreferredDate">
          </div>
          <div class="form-row">
            <label>Preferred time</label>
            <select id="fPreferredTime">
              <option value="">Flexible</option>
              <option value="morning">Morning (9am-12pm)</option>
              <option value="afternoon">Afternoon (12pm-5pm)</option>
              <option value="evening">Evening (5pm-8pm)</option>
              <option value="weekend">Weekend</option>
            </select>
          </div>
        </div>
        <div class="form-row">
          <label>Case notes (for notary)</label>
          <textarea id="fCaseNotes" placeholder="Optional: special instructions, accessibility needs, document count, etc."></textarea>
        </div>
        <div class="form-row">
          <label>Published by (your name)</label>
          <input type="text" id="fPublishedBy" placeholder="e.g. Luz Herrera">
        </div>
        <button class="btn btn-primary" id="publishBtn">
          <span id="publishBtnText">Publish case</span>
        </button>
      </div>
    </div>

    <div class="card">
      <div class="card-header">
        <span><span class="icon">📊</span>Active cases</span>
        <button class="btn btn-logout" id="refreshBtn" style="padding:4px 10px;font-size:11px">↻ Refresh</button>
      </div>
      <div class="card-body" style="padding:0">
        <div id="casesContainer">
          <div class="empty">Loading cases…</div>
        </div>
      </div>
    </div>

  </div>

</div>

<script>
const API_BASE = 'https://dispatch-api-production-c3c4.up.railway.app';
const PW_KEY = 'dispatch_admin_pw';

const $ = (id) => document.getElementById(id);

function showMsg(el, text, type){
  el.className = 'msg show msg-' + (type || 'info');
  el.textContent = text;
}
function hideMsg(el){ el.classList.remove('show'); el.textContent = ''; }

async function apiFetch(path, opts){
  opts = opts || {};
  opts.headers = Object.assign({
    'Content-Type': 'application/json',
    'x-admin-password': sessionStorage.getItem(PW_KEY) || ''
  }, opts.headers || {});
  const res = await fetch(API_BASE + path, opts);
  let data; try { data = await res.json(); } catch(e){ data = {}; }
  if (!res.ok) throw new Error(data.error || ('HTTP ' + res.status));
  return data;
}

async function attemptLogin(pw){
  sessionStorage.setItem(PW_KEY, pw);
  try {
    await apiFetch('/api/admin/cases');
    return true;
  } catch(e){
    sessionStorage.removeItem(PW_KEY);
    return false;
  }
}

function showMainScreen(){
  $('loginScreen').style.display = 'none';
  $('mainScreen').style.display = 'block';
  loadCases();
}

function showLoginScreen(){
  $('loginScreen').style.display = 'block';
  $('mainScreen').style.display = 'none';
  $('pwInput').value = '';
  setTimeout(() => $('pwInput').focus(), 100);
}

$('loginBtn').addEventListener('click', async () => {
  const pw = $('pwInput').value.trim();
  if (!pw){ showMsg($('loginMsg'), 'Please enter the password', 'error'); return; }
  hideMsg($('loginMsg'));
  $('loginBtn').disabled = true;
  $('loginBtn').innerHTML = '<span class="loading"></span>Signing in...';
  const ok = await attemptLogin(pw);
  $('loginBtn').disabled = false;
  $('loginBtn').textContent = 'Sign in';
  if (ok){ showMainScreen(); }
  else { showMsg($('loginMsg'), 'Invalid password. Please try again.', 'error'); }
});

$('pwInput').addEventListener('keypress', (e) => {
  if (e.key === 'Enter') $('loginBtn').click();
});

$('logoutBtn').addEventListener('click', () => {
  sessionStorage.removeItem(PW_KEY);
  showLoginScreen();
});

$('refreshBtn').addEventListener('click', loadCases);

$('publishBtn').addEventListener('click', async () => {
  const body = {
    case_number: $('fCaseNumber').value.trim(),
    signer_zip: $('fSignerZip').value.trim(),
    signer_city: $('fSignerCity').value.trim(),
    signer_state: $('fSignerState').value.trim().toUpperCase(),
    fee_usd: parseFloat($('fFeeUsd').value),
    signer_type: $('fSignerType').value,
    preferred_date: $('fPreferredDate').value || null,
    preferred_time: $('fPreferredTime').value || null,
    case_notes: $('fCaseNotes').value.trim() || null,
    published_by: $('fPublishedBy').value.trim() || null
  };
  if (!body.case_number){ showMsg($('createMsg'), 'Case number is required', 'error'); return; }
  if (!body.signer_zip){ showMsg($('createMsg'), 'Signer ZIP is required', 'error'); return; }
  if (!body.fee_usd || body.fee_usd <= 0){ showMsg($('createMsg'), 'Fee must be greater than 0', 'error'); return; }
  hideMsg($('createMsg'));
  $('publishBtn').disabled = true;
  $('publishBtnText').innerHTML = '<span class="loading"></span>Publishing...';
  try {
    const data = await apiFetch('/api/publish', {
      method: 'POST',
      body: JSON.stringify(body)
    });
    showMsg($('createMsg'), '✓ Case #' + body.case_number + ' published successfully (ID: ' + data.case_id + ')', 'success');
    ['fCaseNumber','fSignerZip','fSignerCity','fSignerState','fFeeUsd','fPreferredDate','fCaseNotes'].forEach(id => $(id).value = '');
    loadCases();
  } catch(e){
    showMsg($('createMsg'), 'Error: ' + e.message, 'error');
  } finally {
    $('publishBtn').disabled = false;
    $('publishBtnText').textContent = 'Publish case';
  }
});

async function loadCases(){
  try {
    const data = await apiFetch('/api/admin/cases');
    renderCases(data.cases || []);
  } catch(e){
    if (e.message.includes('unauthorized')){
      sessionStorage.removeItem(PW_KEY);
      showLoginScreen();
    } else {
      $('casesContainer').innerHTML = '<div class="empty">Error loading cases: ' + e.message + '</div>';
    }
  }
}

function renderCases(cases){
  const stats = { available: 0, claimed: 0, cancelled: 0, expired: 0 };
  cases.forEach(c => { if (stats[c.status] !== undefined) stats[c.status]++; });
  $('statAvailable').textContent = stats.available;
  $('statClaimed').textContent = stats.claimed;
  $('statCancelled').textContent = stats.cancelled;
  $('statTotal').textContent = stats.available + stats.claimed;

  if (cases.length === 0){
    $('casesContainer').innerHTML = '<div class="empty">No cases published yet. Create one above to get started.</div>';
    return;
  }

  let html = '<table class="cases-table"><thead><tr>';
  html += '<th>Case #</th><th>Location</th><th>Date</th><th>Fee</th><th>Type</th><th>Status</th><th>Claimed by</th><th>Published</th><th></th>';
  html += '</tr></thead><tbody>';
  cases.forEach(c => {
    const createdDate = c.created_at ? new Date(c.created_at).toLocaleDateString('en-US', {month:'short',day:'numeric'}) : '—';
    const prefDate = c.preferred_date ? new Date(c.preferred_date).toLocaleDateString('en-US', {month:'short',day:'numeric'}) : '—';
    const typeLabel = c.signer_type === 'deceased' ? 'Deceased · heir' : 'Living';
    html += '<tr>';
    html += '<td><strong>' + escapeHtml(c.case_number) + '</strong></td>';
    html += '<td>' + escapeHtml((c.signer_city || '—') + ', ' + (c.signer_state || '') + ' ' + (c.signer_zip || '')) + '</td>';
    html += '<td>' + prefDate + '</td>';
    html += '<td><strong>$' + parseFloat(c.fee_usd).toFixed(2) + '</strong></td>';
    html += '<td>' + typeLabel + '</td>';
    html += '<td><span class="badge badge-' + c.status + '">' + c.status + '</span></td>';
    html += '<td>' + escapeHtml(c.claimed_by || '—') + '</td>';
    html += '<td style="color:#64748b;font-size:12px">' + createdDate + '<br><span style="font-size:11px">' + escapeHtml(c.published_by || '—') + '</span></td>';
    html += '<td>';
    if (c.status === 'available' || c.status === 'claimed'){
      html += '<button class="btn btn-danger" data-id="' + c.id + '" data-num="' + escapeHtml(c.case_number) + '">Cancel</button>';
    }
    html += '</td>';
    html += '</tr>';
  });
  html += '</tbody></table>';
  $('casesContainer').innerHTML = html;

  document.querySelectorAll('.btn-danger[data-id]').forEach(btn => {
    btn.addEventListener('click', async () => {
      const id = btn.getAttribute('data-id');
      const num = btn.getAttribute('data-num');
      if (!confirm('Cancel case #' + num + '? This cannot be undone.')) return;
      btn.disabled = true;
      btn.textContent = '...';
      try {
        await apiFetch('/api/admin/cancel', {
          method: 'POST',
          body: JSON.stringify({ case_id: parseInt(id, 10) })
        });
        loadCases();
      } catch(e){
        alert('Error: ' + e.message);
        btn.disabled = false;
        btn.textContent = 'Cancel';
      }
    });
  });
}

function escapeHtml(s){
  if (s === null || s === undefined) return '';
  return String(s).replace(/[&<>"']/g, (m) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));
}

(async function init(){
  const storedPw = sessionStorage.getItem(PW_KEY);
  if (storedPw){
    const ok = await attemptLogin(storedPw);
    if (ok){ showMainScreen(); return; }
  }
  showLoginScreen();
})();

setInterval(() => {
  if ($('mainScreen').style.display !== 'none' && sessionStorage.getItem(PW_KEY)){
    loadCases();
  }
}, 30000);
</script>

</body>
</html>

TCG DATAE

We empower law firms and corporate partners with precision-driven investigative services designed to uncover critical information, validate case data, and streamline legal processes with unmatched accuracy.

Backed by advanced technology and operational excellence, TCG DATAE ensures every assignment is handled with integrity, confidentiality, and measurable performance.