Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Commission Tracker</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f6f9fc;
      padding: 2rem;
      margin: 0;
    }
    .container {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
    }
    .form-box {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      width: 100%;
      max-width: 400px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      flex: 1;
    }
    .table-box {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      flex: 2;
      min-width: 500px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
    }
    h2, h3 {
      margin-top: 0;
    }
    label {
      font-weight: 600;
      display: block;
      margin-top: 1rem;
    }
    input, select, textarea {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-size: 1rem;
    }
    .btn {
      padding: 12px;
      font-weight: bold;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      width: 100%;
      margin-top: 1rem;
      font-size: 1rem;
    }
    .btn-add-agent {
      background-color: #003366;
      color: white;
    }
    .btn-add-agent:hover {
      background-color: #00509e;
    }
    .btn-green {
      background-color: #28a745;
      color: white;
    }
    .btn-yellow {
      background-color: #ffc107;
      color: black;
    }
    .note {
      background-color: #fff3cd;
      border-left: 5px solid #ffa500;
      padding: 1rem;
      border-radius: 6px;
      margin-top: 1.5rem;
      font-size: 0.9rem;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 1rem;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
    }
    th {
      background-color: #003366;
      color: white;
    }
    .actions button {
      border: none;
      background: none;
      color: #003366;
      font-weight: bold;
      cursor: pointer;
      margin-right: 10px;
    }
    .modal {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }
    .modal-content {
      background: white;
      padding: 2rem;
      border-radius: 12px;
      width: 300px;
    }
    .pagination {
      margin-top: 1rem;
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .pagination button {
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: white;
      cursor: pointer;
    }
    .pagination button.active {
      background: #003366;
      color: white;
      font-weight: bold;
    }
    #pageTotal {
      margin-top: 1rem;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="form-box">
    <h2>Commission Form</h2>

    <label>Select Agent</label>
    <select id="agentSelect" onchange="filterByAgent()">
      <option value="">-- Select --</option>
    </select>
    <button class="btn btn-add-agent" onclick="openAgentModal()">+ Add New Agent</button>

    <label>Commission Payment Date</label>
    <input type="date" id="paymentDate" />

    <label>Invoice Number</label>
    <input type="text" id="invoiceNumber" />

    <label>Case Total Amount</label>
    <input type="number" id="caseAmount" />

    <label>Extra Payment (Optional)</label>
    <input type="number" id="extraPayment" value="0" />

    <label>Extra Payment Note</label>
    <textarea id="extraNote" rows="3" placeholder="Explain the reason for extra payment..."></textarea>

    <label>Payment Status</label>
    <select id="paymentStatus">
      <option value="Pending">Pending</option>
      <option value="Paid">Paid</option>
    </select>

    <button class="btn btn-green" onclick="addCommission()">Add Case</button>
    <button class="btn btn-yellow" onclick="printReport()">🖨️ Print Report</button>

    <div class="note">
      <strong>Important Note:</strong><br>
      Commissions under $200 are paid on the second payroll of the month.<br>
      Commissions above $200 are paid once the State of Florida approves and releases the funds.<br>
      Advance payments are not a guarantee of approval. If a case is denied, the advance will be deducted from the next payment.
    </div>
  </div>

  <div class="table-box">
    <h2>Monthly Commission Report</h2>
    <table>
      <thead>
        <tr>
          <th>Agent Name</th>
          <th>Invoice Number</th>
          <th>Status</th>
          <th>Payment Date</th>
          <th>Amount</th>
          <th>Commission</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody id="commissionTableBody"></tbody>
    </table>
    <div id="pageTotal"></div>
    <div class="pagination" id="pagination"></div>
  </div>
</div>


<div class="modal" id="agentModal">
  <div class="modal-content">
    <h3>Add New Agent</h3>
    <label>First Name</label>
    <input type="text" id="firstName" />
    <label>Last Name</label>
    <input type="text" id="lastName" />
    <label>Start Date</label>
    <input type="date" id="startDate" />
    <button class="btn btn-green" onclick="saveAgent()">Save Agent</button>
    <button class="btn" onclick="closeAgentModal()">Cancel</button>
  </div>
</div>

<script>
  let agents = JSON.parse(localStorage.getItem('agents') || '[]');
  let commissions = JSON.parse(localStorage.getItem('commissions') || '[]');
  let currentPage = 1;
  const itemsPerPage = 15;

  const agentSelect = document.getElementById('agentSelect');
  const tableBody = document.getElementById('commissionTableBody');
  const pagination = document.getElementById('pagination');
  const pageTotal = document.getElementById('pageTotal');

  function renderAgents() {
    agents.forEach(agent => {
      const option = new Option(agent.fullName, agent.fullName);
      agentSelect.add(option);
    });
  }

  function saveAgent() {
    const first = document.getElementById('firstName').value.trim();
    const last = document.getElementById('lastName').value.trim();
    const startDate = document.getElementById('startDate').value;
    if (!first || !last || !startDate) return alert('All fields are required.');
    const fullName = `${first} ${last}`;
    if (agents.some(a => a.fullName === fullName)) return alert('Agent already exists.');
    agents.push({ fullName, startDate });
    localStorage.setItem('agents', JSON.stringify(agents));
    renderAgents();
    closeAgentModal();
  }

  function getAgentStartDate(agentName) {
    const a = agents.find(a => a.fullName === agentName);
    return a ? new Date(a.startDate) : null;
  }

  function getCommissionPercent(agentName) {
    const d = getAgentStartDate(agentName);
    return !d ? 0 : ((new Date() - d) / 86400000 >= 90 ? 0.10 : 0.05);
  }

  function addCommission() {
    const agent = agentSelect.value;
    const date = document.getElementById('paymentDate').value;
    const invoice = document.getElementById('invoiceNumber').value;
    const amount = parseFloat(document.getElementById('caseAmount').value);
    const extra = parseFloat(document.getElementById('extraPayment').value || 0);
    const note = document.getElementById('extraNote').value;
    const status = document.getElementById('paymentStatus').value;
    if (!agent || !date || !invoice || isNaN(amount)) return alert('Complete all fields.');
    commissions.push({ agent, date, invoice, amount, extra, note, status });
    localStorage.setItem('commissions', JSON.stringify(commissions));
    renderTable();
  }

  function deleteCommission(index) {
    if (confirm('Delete this commission?')) {
      commissions.splice(index, 1);
      localStorage.setItem('commissions', JSON.stringify(commissions));
      renderTable();
    }
  }

  function renderTable() {
    const selectedAgent = agentSelect.value;
    const filtered = selectedAgent ? commissions.filter(c => c.agent === selectedAgent) : commissions;

    const totalPages = Math.ceil(filtered.length / itemsPerPage);
    currentPage = Math.min(currentPage, totalPages || 1);

    const start = (currentPage - 1) * itemsPerPage;
    const pageData = filtered.slice(start, start + itemsPerPage);

    tableBody.innerHTML = '';
    let total = 0;
    pageData.forEach(c => {
      const percent = getCommissionPercent(c.agent);
      const commission = c.amount * percent;
      total += commission;
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${c.agent}</td><td>${c.invoice}</td><td>${c.status}</td><td>${c.date}</td>
        <td>$${(c.amount + c.extra).toFixed(2)}</td>
        <td>$${commission.toFixed(2)} (${percent * 100}%)</td>
        <td><button onclick="deleteCommission(${commissions.indexOf(c)})">🗑️</button></td>`;
      tableBody.appendChild(tr);
    });
    pageTotal.textContent = `Total commission this page: $${total.toFixed(2)}`;
    renderPagination(totalPages);
  }

  function renderPagination(pages) {
    pagination.innerHTML = '';
    for (let i = 1; i <= pages; i++) {
      const btn = document.createElement('button');
      btn.textContent = i;
      btn.className = (i === currentPage ? 'active' : '');
      btn.onclick = () => { currentPage = i; renderTable(); };
      pagination.appendChild(btn);
    }
  }

  function filterByAgent() {
    currentPage = 1;
    renderTable();
  }

  function printReport() {
    const selected = agentSelect.value;
    if (!selected) return alert('Select an agent to print.');
    const filtered = commissions.filter(c => c.agent === selected);
    const html = `
      <html><head><title>Report</title></head><body>
      <h2>Commission Report for ${selected}</h2>
      <table border='1'><tr><th>Invoice</th><th>Status</th><th>Date</th><th>Total</th><th>Commission</th></tr>
      ${filtered.map(c => {
        const percent = getCommissionPercent(c.agent);
        const commission = c.amount * percent;
        return `<tr><td>${c.invoice}</td><td>${c.status}</td><td>${c.date}</td><td>$${(c.amount + c.extra).toFixed(2)}</td><td>$${commission.toFixed(2)}</td></tr>`;
      }).join('')}</table></body></html>`;
    const win = window.open('', '', 'width=800,height=600');
    win.document.write(html);
    win.document.close();
    win.print();
  }

  function openAgentModal() {
    document.getElementById('agentModal').style.display = 'flex';
  }

  function closeAgentModal() {
    document.getElementById('firstName').value = '';
    document.getElementById('lastName').value = '';
    document.getElementById('startDate').value = '';
    document.getElementById('agentModal').style.display = 'none';
  }

  window.onclick = e => {
    if (e.target === document.getElementById('agentModal')) closeAgentModal();
  };

  renderAgents();
  renderTable();
</script>
</body>
</html>

Denny Borges PA