Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Denny Borges PA - Case Tracker</title>
  <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore-compat.js"></script>
  <style>
    body {
      font-family: 'Poppins', sans-serif;
      background: #f5f7fa;
      margin: 0;
      padding: 20px;
    }
    header {
      background: #FF9800;
      color: white;
      padding: 20px;
      font-size: 24px;
      text-align: center;
      border-radius: 8px;
    }
    .main {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 20px;
    }
    .left {
      flex: 1;
      min-width: 300px;
      max-width: 400px;
    }
    .right {
      flex: 2;
      display: flex;
      flex-direction: column;
      gap: 20px;
      min-width: 300px;
    }
    .panel {
      background: #f5f6f8;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      padding: 20px;
    }
    h3, h4 {
      color: #FF9800;
      margin-top: 0;
    }
    label {
      font-weight: bold;
    }
    input, select, button {
      width: 100%;
      padding: 8px;
      margin-top: 6px;
      margin-bottom: 12px;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-size: 14px;
    }
    button {
      background-color: #FF9800;
      color: white;
      border: none;
      cursor: pointer;
      font-weight: bold;
    }
    button:hover {
      background-color: #e68a00;
    }
    .case {
      background: #eef2f3;
      padding: 10px;
      margin: 8px 0;
      border-radius: 6px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
    .no-cases {
      font-style: italic;
      color: #777;
    }
  </style>
</head>
<body>

<header>Denny Borges PA - Case Tracker</header>
<div class="main">
  <div class="left panel">
    <h4>➕ Add New Case</h4>
    <form id="caseForm">
      <label>Agent Name</label>
      <input type="text" id="agent" required>
      <label>Case Number</label>
      <input type="text" id="caseNumber" required>
      <label>Client Name</label>
      <input type="text" id="clientName" required>
      <label>Status</label>
      <select id="status" required>
        <option value="IN PROCESS">IN PROCESS</option>
        <option value="SIGNED">SIGNED</option>
        <option value="NOTARY REQUESTED">NOTARY REQUESTED</option>
        <option value="CLOSED">CLOSED</option>
      </select>
      <label>
        <input type="checkbox" id="notaryRequestedToday"> Notary requested today?
      </label>
      <label>Estimated Signing Date</label>
      <input type="date" id="signatureDate">
      <button type="submit">Save Case</button>
    </form>
    <p id="successMsg" style="color:green;"></p>
  </div>

  <div class="right">
    <div class="panel">
      <h4>📈 Daily Summary</h4>
      <ul style="list-style:none; padding-left: 0; font-size: 16px;">
        <li>📥 Cases added today: <strong id="totalAdded">0</strong></li>
        <li>✍️ Signings today: <strong id="totalSigned">0</strong></li>
        <li>👥 Total active cases: <strong id="totalCases">0</strong></li>
      </ul>
    </div>
    <div class="panel">
      <h4>📥 Cases Added Today</h4>
      <div id="addedToday"><p class="no-cases">Loading...</p></div>
    </div>
    <div class="panel">
      <h4>✍️ Signings Today</h4>
      <div id="signingToday"><p class="no-cases">Loading...</p></div>
    </div>
    <div class="panel">
      <h4>📑 Generate Report</h4>
      <form id="reportForm">
        <label for="reportType">Filter by:</label>
        <select id="reportType">
          <option value="all">All Cases</option>
          <option value="agent">By Agent</option>
          <option value="status">By Status</option>
          <option value="date">By Date</option>
        </select>
        <input type="text" id="reportValue" placeholder="Enter filter value..." />
        <button type="button" onclick="generateReport()">Generate</button>
      </form>
      <div id="reportOutput" style="margin-top: 12px; font-size: 14px;"></div>
    </div>
  </div>
</div>

<script>
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_DOMAIN.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_BUCKET.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };

  firebase.initializeApp(firebaseConfig);
  const db = firebase.firestore();

  const today = new Date();
  const yyyy = today.getFullYear();
  const mm = String(today.getMonth() + 1).padStart(2, '0');
  const dd = String(today.getDate()).padStart(2, '0');
  const todayStr = `${yyyy}-${mm}-${dd}`;

  const addedTodayEl = document.getElementById("addedToday");
  const signingTodayEl = document.getElementById("signingToday");

  function renderCases(cases, container, emptyMsg) {
    container.innerHTML = "";
    if (cases.length === 0) {
      container.innerHTML = `<p class="no-cases">${emptyMsg}</p>`;
      return;
    }
    cases.forEach(c => {
      const div = document.createElement("div");
      div.className = "case";
      div.innerHTML = `<span>#${c.caseNumber} - ${c.clientName}</span><span>${c.status}</span>`;
      container.appendChild(div);
    });
  }

  db.collection("cases").orderBy("timestamp", "desc").onSnapshot(snapshot => {
    const addedToday = [];
    const signingToday = [];
    const allCases = [];

    snapshot.forEach(doc => {
      const data = doc.data();
      allCases.push(data);
      const timestamp = data.timestamp?.toDate();
      const createdDateStr = timestamp ? timestamp.toISOString().split('T')[0] : "";
      if (createdDateStr === todayStr) addedToday.push(data);
      if (data.signatureDate === todayStr) signingToday.push(data);
    });

    renderCases(addedToday, addedTodayEl, "No cases added today.");
    renderCases(signingToday, signingTodayEl, "No signings scheduled for today.");
    document.getElementById("totalAdded").innerText = addedToday.length;
    document.getElementById("totalSigned").innerText = signingToday.length;
    document.getElementById("totalCases").innerText = allCases.length;
  });

  document.getElementById("caseForm").addEventListener("submit", function(e) {
    e.preventDefault();
    const data = {
      agent: document.getElementById("agent").value,
      caseNumber: document.getElementById("caseNumber").value,
      clientName: document.getElementById("clientName").value,
      status: document.getElementById("status").value,
      notaryRequestedToday: document.getElementById("notaryRequestedToday").checked,
      signatureDate: document.getElementById("signatureDate").value || null,
      timestamp: firebase.firestore.FieldValue.serverTimestamp()
    };
    db.collection("cases").add(data).then(() => {
      document.getElementById("caseForm").reset();
      document.getElementById("successMsg").innerText = "✅ Case saved successfully.";
      setTimeout(() => document.getElementById("successMsg").innerText = "", 3000);
    });
  });

  function generateReport() {
    const type = document.getElementById('reportType').value;
    const value = document.getElementById('reportValue').value.trim().toLowerCase();
    const output = document.getElementById('reportOutput');
    let html = '';
    db.collection("cases").get().then(snapshot => {
      const filtered = [];
      snapshot.forEach(doc => {
        const d = doc.data();
        if (type === "all") filtered.push(d);
        else if (type === "agent" && d.agent?.toLowerCase() === value) filtered.push(d);
        else if (type === "status" && d.status?.toLowerCase() === value) filtered.push(d);
        else if (type === "date" && d.signatureDate === value) filtered.push(d);
      });
      if (filtered.length === 0) {
        html = "<p>No results found for that filter.</p>";
      } else {
        html = "<ul>";
        filtered.forEach(f => {
          html += `<li>#${f.caseNumber} - ${f.clientName} (${f.status})</li>`;
        });
        html += "</ul>";
      }
      output.innerHTML = html;
    });
  }
</script>

</body>
</html>


Denny Borges PA