Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #eef2f7;
      font-family: Arial, sans-serif;
    }
    h1 {
      text-align: center;
      color: #2c3e50;
      margin: 20px 0;
    }
    .container {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      gap: 2%;
      box-sizing: border-box;
    }
    .left-panel {
      width: 25%;
      background-color: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      overflow-y: auto;
    }
    .right-panel {
      width: 73%;
      background-color: white;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      overflow-y: auto;
    }
    input, select, button {
      padding: 10px;
      margin: 10px 0;
      width: 100%;
      font-size: 14px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    button {
      background-color: #3498db;
      color: white;
      border: none;
      cursor: pointer;
    }
    button:hover {
      background-color: #2980b9;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      font-size: 12px;
    }
    th, td {
      padding: 8px;
      border-bottom: 1px solid #ddd;
      text-align: center;
    }
    th {
      background-color: #34495e;
      color: white;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    .delete-btn {
      background-color: #e74c3c;
      border: none;
      color: white;
      padding: 6px 10px;
      margin: 0 4px;
      cursor: pointer;
      border-radius: 4px;
      font-size: 12px;
    }
    .status-closing {
      background-color: #d4edda;
    }
    .status-followup {
      background-color: #fff3cd;
    }
    .status-needsnotary {
      background-color: #f8d7da;
    }
    .filter-buttons, .status-counts {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 20px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      border-radius: 10px;
      z-index: 9999;
    }
    .popup input {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left-panel">
      <label for="agentSelect">Agent Name:</label>
      <select id="agentSelect"></select>
      <button onclick="openAgentPopup()">Add New Agent</button>
      <label for="invoiceInput">Invoice Number:</label>
      <input type="text" id="invoiceInput">
      <label for="statusSelect">Status:</label>
      <select id="statusSelect">
        <option value="Closing">Closing</option>
        <option value="Follow Up">Follow Up</option>
        <option value="Needs Notary">Needs Notary</option>
      </select>
      <label for="dateInput">Scheduled Date:</label>
      <input type="date" id="dateInput">
      <label for="timeInput">Scheduled Time:</label>
      <input type="time" id="timeInput">
      <button onclick="addCase()">Add Case</button>
      <hr>
      <h5>Report</h5>
      <label for="reportAgent">Filter by Agent:</label>
      <select id="reportAgent">
        <option value="">All</option>
      </select>
      <label for="reportStatus">Filter by Status:</label>
      <select id="reportStatus">
        <option value="">All</option>
        <option value="Closing">Closing</option>
        <option value="Follow Up">Follow Up</option>
        <option value="Needs Notary">Needs Notary</option>
      </select>
      <button onclick="generateReport()">Generate Report</button>
      <button onclick="downloadPDF()">Download PDF</button>
    </div>
    <div class="right-panel">
      <div class="filter-buttons">
        <button onclick="filterCases('Closing')">Show Closing</button>
        <button onclick="filterCases('Follow Up')">Show Follow Ups</button>
        <button onclick="filterCases('Needs Notary')">Show Needs Notary</button>
      </div>
      <div class="status-counts">
        <span id="closingCount">Closing: 0</span>
        <span id="followUpCount">Follow Up: 0</span>
        <span id="notaryCount">Needs Notary: 0</span>
      </div>
      <table id="caseTable">
        <thead>
          <tr>
            <th>Agent Name</th>
            <th>Invoice Number</th>
            <th>Status</th>
            <th>Scheduled Date</th>
            <th>Scheduled Time</th>
            <th>Time Left</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody id="caseTableBody"></tbody>
      </table>
    </div>
  </div>
  <div class="popup" id="agentPopup">
    <h3>Add New Agent</h3>
    <input type="text" id="newAgentName" placeholder="Enter Agent Name">
    <button onclick="saveAgent()">Save Agent</button>
  </div>
  <script>
    let agents = JSON.parse(localStorage.getItem('agents')) || [];
    let cases = JSON.parse(localStorage.getItem('cases')) || [];

    function openAgentPopup() {
      document.getElementById('agentPopup').style.display = 'block';
    }

    function saveAgent() {
      const name = document.getElementById('newAgentName').value.trim();
      if (!name) return;
      agents.push(name);
      localStorage.setItem('agents', JSON.stringify(agents));
      populateAgentSelect();
      document.getElementById('agentPopup').style.display = 'none';
      document.getElementById('newAgentName').value = '';
    }

    function populateAgentSelect() {
      const selects = [document.getElementById('agentSelect'), document.getElementById('reportAgent')];
      selects.forEach(select => {
        select.innerHTML = '<option value="">All</option>';
        agents.forEach(name => {
          const option = document.createElement('option');
          option.value = name;
          option.text = name;
          select.appendChild(option);
        });
      });
    }

    function addCase() {
      const agent = document.getElementById('agentSelect').value;
      const invoice = document.getElementById('invoiceInput').value.trim();
      const status = document.getElementById('statusSelect').value;
      const date = document.getElementById('dateInput').value;
      const time = document.getElementById('timeInput').value;
      if (!agent || !invoice || !status || !date || !time) return;
      cases.push({ agent, invoice, status, date, time });
      localStorage.setItem('cases', JSON.stringify(cases));
      renderCases();
    }

    function renderCases(filterAgent = '', filterStatus = '') {
      const tbody = document.getElementById('caseTableBody');
      tbody.innerHTML = '';
      let closingCount = 0, followUpCount = 0, notaryCount = 0;
      cases.forEach((item, index) => {
        if ((filterAgent && item.agent !== filterAgent) || (filterStatus && item.status !== filterStatus)) return;
        const row = document.createElement('tr');
        row.classList.add('status-' + item.status.toLowerCase().replace(/ /g, ''));
        if (item.status === 'Closing') closingCount++;
        if (item.status === 'Follow Up') followUpCount++;
        if (item.status === 'Needs Notary') notaryCount++;
        const timeLeft = (item.status === 'Needs Notary' || item.status === 'Closing') ? getTimeLeft(item.date, item.time) : '';
        row.innerHTML = `
          <td>${item.agent}</td>
          <td>${item.invoice}</td>
          <td>${item.status}</td>
          <td>${item.date}</td>
          <td>${item.time}</td>
          <td>${timeLeft}</td>
          <td><button class="delete-btn" onclick="deleteCase(${index})">Delete</button></td>
        `;
        tbody.appendChild(row);
      });
      document.getElementById('closingCount').innerText = 'Closing: ' + closingCount;
      document.getElementById('followUpCount').innerText = 'Follow Up: ' + followUpCount;
      document.getElementById('notaryCount').innerText = 'Needs Notary: ' + notaryCount;
    }

    function getTimeLeft(date, time) {
      const target = new Date(`${date}T${time}`);
      const now = new Date();
      const diff = target - now;
      if (diff <= 0) return '00:00';
      const hours = String(Math.floor(diff / 1000 / 60 / 60)).padStart(2, '0');
      const minutes = String(Math.floor((diff / 1000 / 60) % 60)).padStart(2, '0');
      return `${hours}:${minutes}`;
    }

    function deleteCase(index) {
      cases.splice(index, 1);
      localStorage.setItem('cases', JSON.stringify(cases));
      renderCases();
    }

    function filterCases(status) {
      renderCases('', status);
    }

    function generateReport() {
      const agent = document.getElementById('reportAgent').value;
      const status = document.getElementById('reportStatus').value;
      renderCases(agent, status);
    }

    function downloadPDF() {
      html2canvas(document.querySelector(".right-panel")).then(canvas => {
        const imgData = canvas.toDataURL("image/png");
        const pdf = new jspdf.jsPDF();
        const imgProps = pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save("report.pdf");
      });
    }

    window.onload = function() {
      populateAgentSelect();
      renderCases();
      setInterval(renderCases, 60000);
    }
  </script>
</body>
</html>


Denny Borges PA