Embed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TCG DATAE — Notary Dashboard</title>


<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
  :root{ --ink:#0D2C3A; --ink2:#1E4D6B; --muted:#64748b; }
  body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#f6f7fb; color:#0f172a;}
  .card{ background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 4px 14px rgba(2,8,23,.06); }
  .btn{ background:linear-gradient(135deg, var(--ink), var(--ink2)); color:#fff; border-radius:12px; font-weight:700; }
  .badge{ padding:.2rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700;}
  .badge-Pending{ background:#fde68a; color:#7c2d12; }
  .badge-Signed{ background:#e0e7ff; color:#1e3a8a; }
  .badge-Scanned{ background:#cffafe; color:#0e7490; }
  .badge-Mailed{ background:#fee2e2; color:#991b1b; }
  .badge-Released{ background:#dcfce7; color:#166534; }

  /* Table on desktop, Cards on mobile */
  @media (max-width: 900px){
    .desktop-table{ display:none; }
  }
  @media (min-width: 901px){
    .mobile-cards{ display:none; }
  }

  /* Subtle skeleton */
  .skeleton{ background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 37%,#f3f4f6 63%); background-size:400% 100%; animation:skeleton 1.2s ease infinite; border-radius:12px; height:16px; }
  @keyframes skeleton{0%{background-position:100% 50%}100%{background-position:0 50%}}
</style>
</head>
<body>


<header class="sticky top-0 z-50 bg-white/90 backdrop-blur border-b border-slate-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between">
    <div class="flex items-center gap-3">
      <img src="https://tcgdatae.com/favicon.ico" alt="TCG" class="w-8 h-8 rounded-lg"/>
      <div>
        <h1 class="text-xl font-extrabold text-[var(--ink)]">TCG DATAE — Notary Dashboard</h1>
        <p class="text-xs text-slate-500 leading-tight">Secure access for authorized notaries</p>
      </div>
    </div>
    <div class="flex items-center gap-3">
      <span id="userEmail" class="text-sm text-slate-600"></span>
      <button id="btnLogout" class="px-3 py-2 btn text-sm">Logout</button>
    </div>
  </div>
</header>

<main class="max-w-7xl mx-auto px-4 sm:px-6 py-6 space-y-6">
  
  <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="card p-4">
      <p class="text-xs text-slate-500">Assigned Cases</p>
      <p id="m_cases" class="text-2xl font-extrabold text-[var(--ink)]">—</p>
    </div>
    <div class="card p-4">
      <p class="text-xs text-slate-500">Completed (Released)</p>
      <p id="m_completed" class="text-2xl font-extrabold text-[var(--ink)]">—</p>
    </div>
    <div class="card p-4">
      <p class="text-xs text-slate-500">Pending Payment</p>
      <p id="m_pending_pay" class="text-2xl font-extrabold text-[var(--ink)]">$0</p>
    </div>
    <div class="card p-4">
      <p class="text-xs text-slate-500">Paid to Date</p>
      <p id="m_paid" class="text-2xl font-extrabold text-[var(--ink)]">$0</p>
    </div>
  </section>

  
  <section class="card p-5">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-lg font-bold text-[var(--ink)]">Assigned Cases</h2>
      <div class="flex gap-2">
        <input id="qSearch" type="text" placeholder="Search case or client..." class="border rounded-lg px-3 py-2 text-sm w-56">
        <select id="qStatus" class="border rounded-lg px-3 py-2 text-sm">
          <option value="">All statuses</option>
          <option>Pending</option><option>Signed</option><option>Scanned</option><option>Mailed</option><option>Released</option>
        </select>
      </div>
    </div>

    
    <div class="desktop-table overflow-auto">
      <table class="min-w-full text-sm">
        <thead>
          <tr class="text-left text-slate-600 border-b">
            <th class="py-2 pr-3">Case #</th>
            <th class="py-2 pr-3">Client</th>
            <th class="py-2 pr-3">Address</th>
            <th class="py-2 pr-3">Phone</th>
            <th class="py-2 pr-3">Status</th>
            <th class="py-2 pr-3">Docs</th>
            <th class="py-2 pr-3">USPS</th>
            <th class="py-2 pr-3">Notes</th>
          </tr>
        </thead>
        <tbody id="tblCases" class="align-top"></tbody>
      </table>
    </div>

    
    <div id="cardsCases" class="mobile-cards grid gap-3 mt-2"></div>

    
    <div id="casesSkeleton" class="mt-3 grid gap-2">
      <div class="skeleton"></div><div class="skeleton"></div><div class="skeleton"></div>
    </div>
  </section>

  
  <section class="card p-5">
    <div class="flex items-center justify-between mb-3">
      <h2 class="text-lg font-bold text-[var(--ink)]">Payments</h2>
      <select id="pFilter" class="border rounded-lg px-3 py-2 text-sm">
        <option value="">All</option>
        <option>Pending</option>
        <option>Processing</option>
        <option>Paid</option>
      </select>
    </div>

    <div class="overflow-auto">
      <table class="min-w-full text-sm">
        <thead>
          <tr class="text-left text-slate-600 border-b">
            <th class="py-2 pr-3">Date</th>
            <th class="py-2 pr-3">Case #</th>
            <th class="py-2 pr-3">Status</th>
            <th class="py-2 pr-3">ETA</th>
            <th class="py-2 pr-3">Amount</th>
          </tr>
        </thead>
        <tbody id="tblPayments"></tbody>
      </table>
    </div>

    <div id="paySkeleton" class="mt-3 grid gap-2">
      <div class="skeleton"></div><div class="skeleton"></div>
    </div>
  </section>
</main>


<script>
  function trackUSPS(num){
    if(!num) return;
    window.open(`https://tools.usps.com/go/TrackConfirmAction?tLabels=${encodeURIComponent(num)}`,'_blank');
  }
</script>


<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-app.js";
  import { 
    getAuth, onAuthStateChanged, signOut 
  } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-auth.js";
  import { 
    getFirestore, collection, query, where, onSnapshot, orderBy 
  } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-firestore.js";
  import {
    getStorage, ref as sRef, getDownloadURL
  } from "https://www.gstatic.com/firebasejs/10.13.0/firebase-storage.js";

  // Firebase config (del proyecto)
  const firebaseConfig = {
    apiKey: "AIzaSyCIgyIF2iJcS4oGxXVhyEQEId9v4xosOo",
    authDomain: "tcg-datae-notary.firebaseapp.com",
    projectId: "tcg-datae-notary",
    storageBucket: "tcg-datae-notary.firebasestorage.app",
    messagingSenderId: "396094787611",
    appId: "1:396094787611:web:1a9cc3c8372d573980e8be",
    measurementId: "G-CX7499PY1Q"
  };

  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  const db = getFirestore(app);
  const storage = getStorage(app);

  // Whitelist (control de acceso)
  const ALLOWED = new Set([
    "clean.home.inc@gmail.com",
    "c.tomas97@yahoo.com",
    "claims@dennysborgespa.com"
  ]);

  // UI refs
  const elUserEmail = document.getElementById('userEmail');
  const btnLogout = document.getElementById('btnLogout');
  const tblCases = document.getElementById('tblCases');
  const cardsCases = document.getElementById('cardsCases');
  const casesSkeleton = document.getElementById('casesSkeleton');
  const m_cases = document.getElementById('m_cases');
  const m_completed = document.getElementById('m_completed');
  const m_pending_pay = document.getElementById('m_pending_pay');
  const m_paid = document.getElementById('m_paid');
  const qSearch = document.getElementById('qSearch');
  const qStatus = document.getElementById('qStatus');

  const tblPayments = document.getElementById('tblPayments');
  const paySkeleton = document.getElementById('paySkeleton');
  const pFilter = document.getElementById('pFilter');

  let CASES = [];   // cache local para filtros
  let PAYMENTS = [];

  // Auth guard
  onAuthStateChanged(auth, user=>{
    if(!user){
      window.location.replace('/notary-login');
      return;
    }
    const email = (user.email || '').toLowerCase();
    if(!ALLOWED.has(email)){
      alert('Access denied for this account.');
      signOut(auth);
      return;
    }
    elUserEmail.textContent = email;
    boot(email);
  });

  btnLogout.addEventListener('click', ()=> signOut(auth));

  // Boot listeners
  function boot(email){
    listenCases(email);
    listenPayments(email);
  }

  function listenCases(email){
    const q = query(
      collection(db,'cases'),
      where('notary_email','==', email),
      orderBy('case_number')
    );
    onSnapshot(q, async snap=>{
      CASES = snap.docs.map(d=> ({ id:d.id, ...d.data() }));
      await renderCases();
      updateCaseMetrics();
    });
  }

  async function renderCases(){
    casesSkeleton.style.display='none';

    const term = qSearch.value.trim().toLowerCase();
    const st = qStatus.value;

    const filtered = CASES.filter(c=>{
      const hit = (c.case_number||'').toString().toLowerCase().includes(term)
        || (c.client_name||'').toLowerCase().includes(term);
      const okStatus = st ? c.status===st : true;
      return hit && okStatus;
    });

    // Desktop table
    tblCases.innerHTML = '';
    for(const c of filtered){
      const tr = document.createElement('tr');
      tr.className = 'border-b last:border-0';
      tr.innerHTML = `
        <td class="py-2 pr-3 font-semibold">${safe(c.case_number)}</td>
        <td class="py-2 pr-3">${safe(c.client_name)}</td>
        <td class="py-2 pr-3 text-slate-600">${safe(c.address)}</td>
        <td class="py-2 pr-3">${safe(c.phone||'')}</td>
        <td class="py-2 pr-3"><span class="badge badge-${safe(c.status||'Pending')}">${safe(c.status||'Pending')}</span></td>
        <td class="py-2 pr-3 flex gap-2">
          ${await docButtons(c)}
        </td>
        <td class="py-2 pr-3">
          ${c.usps_tracking ? `<button class="px-2 py-1 rounded bg-slate-800 text-white text-xs" onclick="trackUSPS('${c.usps_tracking}')">Track</button>` : '<span class="text-slate-400 text-xs">N/A</span>'}
        </td>
        <td class="py-2 pr-3 text-slate-600">${safe(c.notes||'')}</td>
      `;
      tblCases.appendChild(tr);
    }

    // Mobile cards
    cardsCases.innerHTML = '';
    for(const c of filtered){
      const card = document.createElement('div');
      card.className = 'border rounded-xl p-3';
      const docsBtns = await docButtons(c);
      card.innerHTML = `
        <div class="flex items-start justify-between">
          <div>
            <div class="text-xs text-slate-500">Case #</div>
            <div class="font-bold">${safe(c.case_number)}</div>
          </div>
          <span class="badge badge-${safe(c.status||'Pending')}">${safe(c.status||'Pending')}</span>
        </div>
        <div class="mt-2">
          <div class="font-semibold">${safe(c.client_name)}</div>
          <div class="text-sm text-slate-600">${safe(c.address||'')}</div>
          <div class="text-sm">${safe(c.phone||'')}</div>
        </div>
        <div class="mt-3 flex flex-wrap gap-2">
          ${docsBtns}
          ${c.usps_tracking ? `<button class="px-3 py-1 rounded bg-slate-800 text-white text-xs" onclick="trackUSPS('${c.usps_tracking}')">USPS</button>` : ''}
        </div>
        ${c.notes ? `<div class="mt-2 text-xs text-slate-600"><b>Notes:</b> ${safe(c.notes)}</div>`:''}
      `;
      cardsCases.appendChild(card);
    }
  }

  async function docButtons(c){
    let html = '';
    // Storage URLs if provided
    if(c.label_path){
      try{
        const url = await getDownloadURL(sRef(storage, c.label_path));
        html += `<a href="${url}" target="_blank" class="px-3 py-1 rounded bg-slate-100 border text-xs">Label</a>`;
      }catch{ html += `<span class="px-3 py-1 rounded bg-slate-50 border text-xs text-slate-400">Label N/A</span>`; }
    }
    if(c.docs_path){
      try{
        const url2 = await getDownloadURL(sRef(storage, c.docs_path));
        html += `<a href="${url2}" target="_blank" class="px-3 py-1 rounded bg-slate-100 border text-xs">Docs</a>`;
      }catch{ html += `<span class="px-3 py-1 rounded bg-slate-50 border text-xs text-slate-400">Docs N/A</span>`; }
    }
    if(!html) html = `<span class="px-3 py-1 rounded bg-slate-50 border text-xs text-slate-400">No files</span>`;
    return html;
  }

  function updateCaseMetrics(){
    const total = CASES.length;
    const completed = CASES.filter(c=>c.status==='Released').length;
    m_cases.textContent = total;
    m_completed.textContent = completed;
  }

  qSearch.addEventListener('input', renderCases);
  qStatus.addEventListener('change', renderCases);

  // Payments
  function listenPayments(email){
    const q = query(
      collection(db,'payments'),
      where('notary_email','==', email),
      orderBy('created_at','desc')
    );
    onSnapshot(q, snap=>{
      PAYMENTS = snap.docs.map(d=> ({ id:d.id, ...d.data() }));
      renderPayments();
      updatePaymentMetrics();
    });
  }

  function renderPayments(){
    paySkeleton.style.display='none';
    const f = pFilter.value;
    const list = f ? PAYMENTS.filter(p=>p.status===f) : PAYMENTS;

    tblPayments.innerHTML = '';
    for(const p of list){
      const dt = toDate(p.created_at);
      const amt = Number(p.amount||0);
      tblPayments.innerHTML += `
        <tr class="border-b last:border-0">
          <td class="py-2 pr-3">${dt}</td>
          <td class="py-2 pr-3 font-semibold">${safe(p.case_number||'—')}</td>
          <td class="py-2 pr-3">
            <span class="badge ${p.status==='Paid'?'badge-Released':'badge-Signed'}">${safe(p.status||'Pending')}</span>
          </td>
          <td class="py-2 pr-3">${safe(formatETA(p.eta))}</td>
          <td class="py-2 pr-3 font-bold">$${amt.toLocaleString()}</td>
        </tr>
      `;
    }
  }
  pFilter.addEventListener('change', renderPayments);

  function updatePaymentMetrics(){
    const paid = PAYMENTS.filter(p=>p.status==='Paid').reduce((s,p)=>s+Number(p.amount||0),0);
    const pending = PAYMENTS.filter(p=>p.status!=='Paid').reduce((s,p)=>s+Number(p.amount||0),0);
    m_paid.textContent = '$'+paid.toLocaleString();
    m_pending_pay.textContent = '$'+pending.toLocaleString();
  }

  // Helpers
  function safe(v){ return (v??'').toString().replace(/[<>&]/g, s=>({ '<':'&lt;','>':'&gt;','&':'&amp;' }[s])); }
  function toDate(ts){
    try{
      if(ts && ts.seconds){ return new Date(ts.seconds*1000).toLocaleDateString(); }
      const d = ts? new Date(ts): null;
      return d? d.toLocaleDateString(): '—';
    }catch{ return '—';}
  }
  function formatETA(v){ return v ? toDate(v) : '—'; }
</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.