add issued logs

assets/js/issued.js

@@ -0,0 +1,120 @@
+// ==========================================
+// ISSUED ITEMS LOGIC (issued.js)
+// ==========================================
+$(document).ready(function () {
+
+  let allIssuedData = [];
+  let filteredIssuedData = [];
+  let issuedCurrentPage = 1;
+  const issuedItemsPerPage = 5; // Show 10 rows per page
+
+  window.loadIssuedItems = function (btn = null) {
+    let originalText = "";
+    if (btn) {
+      originalText = $(btn).html();
+      $(btn).prop("disabled", true).html('<span class="spinner-border spinner-border-sm"></span> Refreshing...');
+    }
+
+    $.ajax({
+      url: "includes/api/api.php?action=get_issued_items",
+      type: "GET",
+      cache: false,
+      dataType: "json",
+      success: function (res) {
+        if (btn) $(btn).prop("disabled", false).html(originalText);
+        if (res.status === "success") {
+          allIssuedData = res.data;
+          applyIssuedFilters();
+        } else {
+          showAlert("Error loading issued items.", "danger");
+        }
+      },
+      error: function() {
+        if (btn) $(btn).prop("disabled", false).html(originalText);
+        showAlert("Network error.", "danger");
+      }
+    });
+  };
+
+  function applyIssuedFilters() {
+    if ($("#searchIssuedInput").length === 0) return; // Failsafe
+
+    let search = $("#searchIssuedInput").val().toLowerCase();
+    let dateFrom = $("#filterIssuedDateFrom").val();
+    let dateTo = $("#filterIssuedDateTo").val();
+
+    filteredIssuedData = allIssuedData.filter(function (txn) {
+      let matchesSearch = txn.name.toLowerCase().includes(search) || 
+                          txn.transaction_id.toString().includes(search) ||
+                          (txn.description && txn.description.toLowerCase().includes(search));
+      
+      // Convert dates to YYYY-MM-DD for accurate comparison
+      let txnDate = txn.transaction_date.split(' ')[0]; 
+      
+      let matchesDateFrom = dateFrom === "" || txnDate >= dateFrom;
+      let matchesDateTo = dateTo === "" || txnDate <= dateTo;
+
+      return matchesSearch && matchesDateFrom && matchesDateTo;
+    });
+
+    issuedCurrentPage = 1;
+    renderIssuedTable();
+  }
+
+  $(document).on("keyup", "#searchIssuedInput", applyIssuedFilters);
+  $(document).on("change", "#filterIssuedDateFrom, #filterIssuedDateTo", applyIssuedFilters);
+
+  function renderIssuedTable() {
+    let rows = "";
+    let totalItems = filteredIssuedData.length;
+    let totalPages = Math.ceil(totalItems / issuedItemsPerPage) || 1;
+    let startIndex = (issuedCurrentPage - 1) * issuedItemsPerPage;
+    let endIndex = Math.min(startIndex + issuedItemsPerPage, totalItems);
+    let pageData = filteredIssuedData.slice(startIndex, endIndex);
+
+    if (pageData.length === 0) {
+      rows = `<tr><td colspan="4" class="text-center py-4 text-muted">No transactions found matching your criteria.</td></tr>`;
+    } else {
+      pageData.forEach(function (txn) {
+        // Format date to look nice (e.g., "April 24, 2026 - 3:21 PM")
+        let dateObj = new Date(txn.transaction_date);
+        let formattedDate = dateObj.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) + 
+                            " <span class='text-muted small ms-1'>" + dateObj.toLocaleTimeString('en-US', { hour: '2-digit', minute:'2-digit' }) + "</span>";
+
+        rows += `<tr>
+            <td class="ps-4 fw-bold text-secondary">#TXN-${txn.transaction_id}</td>
+            <td>${formattedDate}</td>
+            <td>
+                <div class="fw-bold text-dark">${txn.name}</div>
+                <div class="text-muted small">Item ID: #${txn.inventory_id}</div>
+            </td>
+            <td class="pe-4 text-end">
+                <span class="badge bg-warning bg-opacity-10 text-dark border border-warning rounded-pill px-3 py-2 fs-6">
+                  <i class="bi bi-dash me-1"></i>${txn.qty_issued}
+                </span>
+            </td>
+        </tr>`;
+      });
+    }
+
+    $("#issuedTableBody").html(rows);
+    if (totalItems > 0) $("#issuedPaginationInfo").text(`Showing ${startIndex + 1} to ${endIndex} of ${totalItems} entries`);
+    else $("#issuedPaginationInfo").text("Showing 0 entries");
+    
+    renderIssuedPagination(totalPages);
+  }
+
+  function renderIssuedPagination(totalPages) {
+    let html = `<li class="page-item ${issuedCurrentPage === 1 ? "disabled" : ""}"><a class="page-link" href="#" onclick="changeIssuedPage(${issuedCurrentPage - 1}); return false;">Previous</a></li>`;
+    for (let i = 1; i <= totalPages; i++) {
+      html += `<li class="page-item ${issuedCurrentPage === i ? "active" : ""}"><a class="page-link" href="#" onclick="changeIssuedPage(${i}); return false;">${i}</a></li>`;
+    }
+    html += `<li class="page-item ${issuedCurrentPage === totalPages ? "disabled" : ""}"><a class="page-link" href="#" onclick="changeIssuedPage(${issuedCurrentPage + 1}); return false;">Next</a></li>`;
+    $("#issuedPaginationControls").html(html);
+  }
+
+  window.changeIssuedPage = function(newPage) {
+    issuedCurrentPage = newPage;
+    renderIssuedTable();
+  };
+});

assets/js/main.js

@@ -25,12 +25,22 @@ let spendChartInstance = null;
 // 2. GLOBAL HELPER FUNCTIONS
 // ==========================================
 function showAlert(msg, type) {
+  // Create a unique ID for this alert so the timer doesn't accidentally hide a newer alert
+  let alertId = 'alert-' + Date.now();
+
   $("#alertBox").html(`
-    <div class="alert alert-${type} alert-dismissible fade show border-0 shadow-sm">
+    <div id="${alertId}" class="alert alert-${type} alert-dismissible fade show border-0 shadow-sm" style="z-index: 1050;">
       ${msg}
       <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
     </div>
   `);
+
+  // Auto-hide the alert after 4 seconds (4000 milliseconds)
+  setTimeout(function() {
+    $("#" + alertId).fadeOut(400, function() {
+      $(this).remove(); // Completely removes it from the screen
+    });
+  }, 4000);
 }
 
 // ==========================================
@@ -48,6 +58,8 @@ function initPageScripts(page) {
     if (typeof loadAnalytics === "function") loadAnalytics();
   } else if (page === "vendors") {
     if (typeof loadVendors === "function") loadVendors();
+  } else if (page === "issued") {
+    if (typeof loadIssuedItems === "function") loadIssuedItems();
   }
 }
 

includes/api/api.php

@@ -144,6 +144,28 @@ switch ($action) {
         echo json_encode(['status' => 'success', 'data' => $items]);
         break;
 
+    case 'get_issued_items':
+        try {
+            // Join transactions with inventory to get the item names
+            $stmt = $pdo->query("
+                SELECT 
+                    t.transaction_id, 
+                    t.transaction_date, 
+                    t.qty_issued, 
+                    i.inventory_id, 
+                    i.name, 
+                    i.description 
+                FROM inventory_transactions t
+                JOIN inventory_items i ON t.inventory_id = i.inventory_id
+                ORDER BY t.transaction_date DESC
+            ");
+            $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
+            echo json_encode(['status' => 'success', 'data' => $data]);
+        } catch (Exception $e) {
+            echo json_encode(['status' => 'error', 'message' => 'Database error: ' . $e->getMessage()]);
+        }
+        break;
+
     // ---------------------------------------------------------
     // NEW VENDOR MANAGEMENT ENDPOINTS
     // ---------------------------------------------------------

includes/db/db.php

@@ -5,9 +5,6 @@
 // $username = 'root'; // Change if your DB user is different
 // $password = ''; // Change if your DB has a password
 // $port = 3306;
-// require_once __DIR__ . "/../env_loader.php";
-// loadEnv(__DIR__ . "/../../.env");
-
 // var_dump([
 //     "DB_HOST" => getenv("DB_HOST"),
 //     "DB_PORT" => getenv("DB_PORT"),
@@ -17,6 +14,9 @@
 // ]);
 // exit;
 
+// require_once __DIR__ . "/../env_loader.php";
+// loadEnv(__DIR__ . "/../../.env");
+    
 $host = getenv("DB_HOST");
 $port = getenv("DB_PORT");
 $db_name = getenv("DB_NAME");

includes/footer.php

@@ -5,3 +5,4 @@
 <script src="assets/js/vendors.js"></script>
 <script src="assets/js/po.js"></script>
 <script src="assets/js/analytics.js"></script>
+<script src="assets/js/issued.js"></script>

pages/issued.php

@@ -0,0 +1,47 @@
+<div class="d-flex justify-content-between align-items-center mb-4 header-actions">
+  <h4 class="mb-0 fw-bold">Issued Items Log</h4>
+  <div class="d-flex gap-2">
+    <button class="btn btn-outline-secondary bg-white text-dark shadow-sm" onclick="loadIssuedItems(this)">
+      <i class="bi bi-arrow-clockwise me-1"></i> Refresh
+    </button>
+  </div>
+</div>
+
+<div class="card border-0 shadow-sm mb-4">
+  <div class="card-body p-4">
+    <div class="row g-3 mb-4">
+      <div class="col-md-6">
+        <div class="input-group input-group-sm">
+          <span class="input-group-text bg-white border-end-0 text-muted"><i class="bi bi-search"></i></span>
+          <input type="text" id="searchIssuedInput" class="form-control border-start-0" placeholder="Search by Item Name or Transaction ID...">
+        </div>
+      </div>
+      <div class="col-md-3">
+        <input type="date" id="filterIssuedDateFrom" class="form-control form-control-sm" placeholder="From Date">
+      </div>
+      <div class="col-md-3">
+        <input type="date" id="filterIssuedDateTo" class="form-control form-control-sm" placeholder="To Date">
+      </div>
+    </div>
+
+    <div class="table-responsive">
+      <table class="table table-hover align-middle mb-0">
+        <thead class="table-light text-muted small text-uppercase">
+          <tr>
+            <th class="ps-4 fw-medium">Txn ID</th>
+            <th class="fw-medium">Date Issued</th>
+            <th class="fw-medium">Item Details</th>
+            <th class="text-end fw-medium pe-4">Qty Issued</th>
+          </tr>
+        </thead>
+        <tbody id="issuedTableBody">
+          </tbody>
+      </table>
+    </div>
+
+    <div class="d-flex justify-content-between align-items-center mt-4">
+      <div class="text-muted small" id="issuedPaginationInfo">Showing 0 entries</div>
+      <ul class="pagination pagination-sm mb-0" id="issuedPaginationControls"></ul>
+    </div>
+  </div>
+</div>

partials/navbar.php

@@ -5,6 +5,11 @@
             <i class="bi bi-boxes me-1"></i> Inventory View
         </a>
         </li>
+        <li class="nav-item">
+            <a class="nav-link" href="#" id="tab-issued" onclick="switchTab('issued')">
+                <i class="bi bi-clock-history me-1"></i> Issued Logs
+            </a>
+        </li>
         <li class="nav-item">
         <a class="nav-link" href="#" id="tab-vendors" onclick="switchTab('vendors')">
             <i class="bi bi-boxes me-1"></i>Vendors