

<!-- Main Content without Sidebar -->
<div class="main-content">

 
<!-- Filters Section -->
<div class="filters">
  <label for="date-range-start">Date Range:</label>
  <input type="date" id="date-range-start"> to <input type="date" id="date-range-end">

  <label for="company-select">Company:</label>
  <select id="company-select">
    <option value="">All Companies</option>
    <!-- Company options populated dynamically -->
  </select>

  <label for="branch-select">Branch:</label>
  <select id="branch-select">
    <option value="">All Branches</option>
    <!-- Branch options populated dynamically -->
  </select>

  <label for="transaction-type-select">Transaction Type:</label>
  <select id="transaction-type-select">
    <option value="">All</option>
    <option value="selling">Selling</option>
    <option value="purchasing">Purchasing</option>
  </select>

  <button id="filter-btn">Filter</button>
</div>

<!-- Summary Section -->
<div class="summary">
  <div class="metric">Total Sales: $<span id="total-sales"></span></div>
  <div class="metric">Total Purchases: $<span id="total-purchases"></span></div>
  <div class="metric">Total Profit: $<span id="total-profit"></span></div>
</div>

<!-- Transaction Table -->
<table id="transaction-table">
  <thead>
    <tr>
      <th>Transaction ID</th>
      <th>Date</th>
      <th>Company/Branch</th>
      <th>Transaction Type</th>
      <th>Total Value</th>
      <th>Profit</th>
    </tr>
  </thead>
  <tbody>
    <!-- Transactions will be rendered here -->
  </tbody>
</table>

<!-- Visualization Charts -->
<div id="charts">
  <canvas id="sales-vs-purchases-chart"></canvas>
  <canvas id="profit-margins-chart"></canvas>
</div>

<!-- Export buttons -->
<div id="download-section">
  <button id="download-pdf-btn">Download as PDF</button>
  <button id="download-csv-btn">Download as CSV</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
<script src="./js/report.js"></script>

</body>
</html>
