v01.4

api/update_status.php

@@ -0,0 +1,36 @@
+<?php
+require_once '../db/config.php';
+
+header('Content-Type: application/json');
+
+// Basic validation
+if (!isset($_POST['id']) || !isset($_POST['status'])) {
+    echo json_encode(['success' => false, 'message' => 'Invalid request.']);
+    exit;
+}
+
+$id = $_POST['id'];
+$status = $_POST['status'];
+$allowed_statuses = ['Approved', 'Rejected'];
+
+if (!in_array($status, $allowed_statuses)) {
+    echo json_encode(['success' => false, 'message' => 'Invalid status.']);
+    exit;
+}
+
+try {
+    $pdo = db();
+    $stmt = $pdo->prepare("UPDATE expense_reports SET status = ? WHERE id = ?");
+    $success = $stmt->execute([$status, $id]);
+
+    if ($success) {
+        echo json_encode(['success' => true, 'message' => 'Status updated successfully.']);
+    } else {
+        echo json_encode(['success' => false, 'message' => 'Failed to update status.']);
+    }
+
+} catch (PDOException $e) {
+    // In a real app, log this error.
+    echo json_encode(['success' => false, 'message' => 'Database error: ' . $e->getMessage()]);
+}
+?>

dashboard.php

@@ -124,7 +124,10 @@ function getStatusBadgeClass($status) {
                                         </td>
                                         <td><?php echo htmlspecialchars($report['description']); ?></td>
                                         <td>
-                                            <a href="#" class="btn btn-sm btn-outline-secondary disabled" aria-disabled="true">View</a>
+                                            <div class="btn-group" role="group">
+                                                <button class="btn btn-sm btn-success btn-action" data-id="<?php echo $report['id']; ?>" data-status="Approved">Approve</button>
+                                                <button class="btn btn-sm btn-danger btn-action" data-id="<?php echo $report['id']; ?>" data-status="Rejected">Reject</button>
+                                            </div>
                                         </td>
                                     </tr>
                                 <?php endforeach; ?>
@@ -141,5 +144,57 @@ function getStatusBadgeClass($status) {
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const actionButtons = document.querySelectorAll('.btn-action');
+        actionButtons.forEach(button => {
+            button.addEventListener('click', function() {
+                const reportId = this.dataset.id;
+                const newStatus = this.dataset.status;
+                const row = this.closest('tr');
+
+                if (!confirm(`Are you sure you want to ${newStatus.toLowerCase()} this report?`)) {
+                    return;
+                }
+
+                const formData = new FormData();
+                formData.append('id', reportId);
+                formData.append('status', newStatus);
+
+                fetch('api/update_status.php', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        const statusCell = row.querySelector('.badge-status');
+                        if (statusCell) {
+                            statusCell.textContent = newStatus;
+                            statusCell.className = 'badge-status'; // Reset classes
+                            if (newStatus === 'Approved') {
+                                statusCell.classList.add('badge-approved');
+                            } else if (newStatus === 'Rejected') {
+                                statusCell.classList.add('badge-rejected');
+                            } else {
+                                statusCell.classList.add('badge-pending');
+                            }
+                        }
+                        // Disable buttons after action
+                        row.querySelectorAll('.btn-action').forEach(btn => {
+                            btn.disabled = true;
+                        });
+                    } else {
+                        alert('Error: ' + data.message);
+                    }
+                })
+                .catch(error => {
+                    console.error('Fetch error:', error);
+                    alert('An unexpected error occurred. Please try again.');
+                });
+            });
+        });
+    });
+    </script>
 </body>
 </html>