v01.5

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()]);
+}
+?>

assets/css/custom.css

@@ -0,0 +1,109 @@
+/* assets/css/custom.css */
+:root {
+    --primary-color: #4F46E5;
+    --secondary-color: #10B981;
+    --danger-color: #EF4444;
+    --warning-color: #F59E0B;
+    --background-color: #F3F4F6;
+    --surface-color: #FFFFFF;
+    --text-color: #111827;
+    --light-text-color: #6B7280;
+    --border-radius: 0.5rem;
+}
+
+body {
+    background-color: var(--background-color);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    color: var(--text-color);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Georgia', serif;
+    font-weight: 700;
+}
+
+.navbar {
+    background-color: var(--surface-color);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.navbar-brand {
+    font-family: 'Georgia', serif;
+    font-weight: bold;
+    color: var(--primary-color) !important;
+}
+
+.card {
+    border: none;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    border-radius: var(--border-radius);
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    transition: background-color 0.2s ease-in-out;
+}
+
+.btn-primary:hover {
+    background-color: #4338CA;
+    border-color: #4338CA;
+}
+
+.badge-status {
+    padding: 0.4em 0.8em;
+    font-size: 0.8rem;
+    font-weight: 600;
+    border-radius: 20px;
+}
+
+.badge-approved {
+    color: #065F46;
+    background-color: #D1FAE5;
+}
+
+.badge-rejected {
+    color: #991B1B;
+    background-color: #FEE2E2;
+}
+
+.badge-pending {
+    color: #92400E;
+    background-color: #FEF3C7;
+}
+
+.table {
+    background-color: var(--surface-color);
+}
+
+.table thead th {
+    border-bottom: 2px solid #E5E7EB;
+    font-family: 'Inter', sans-serif;
+    font-weight: 600;
+    color: var(--light-text-color);
+}
+
+.table tbody tr:hover {
+    background-color: #F9FAFB;
+}
+
+.hero {
+    background: linear-gradient(45deg, #4F46E5, #818CF8);
+    color: white;
+    padding: 6rem 0;
+    text-align: center;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    font-family: 'Georgia', serif;
+}
+
+.hero p {
+    font-size: 1.25rem;
+    max-width: 600px;
+    margin: 1rem auto;
+}

dashboard.php

@@ -0,0 +1,136 @@
+<?php
+require_once 'db/config.php';
+
+try {
+    $pdo = db();
+    $reports = $pdo->query("SELECT * FROM expense_reports ORDER BY created_at DESC")->fetchAll(PDO::FETCH_ASSOC);
+} catch (PDOException $e) {
+    die("Database error: " . $e->getMessage());
+}
+
+function getStatusBadgeClass($status) {
+    switch ($status) {
+        case 'Approved': return 'badge-approved';
+        case 'Rejected': return 'badge-rejected';
+        case 'Pending':
+        default:
+            return 'badge-pending';
+    }
+}
+
+$page_title = 'Manager Dashboard';
+require_once 'includes/header.php';
+?>
+
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h1>Expense Reports</h1>
+    <a href="submit_expense.php" class="btn btn-primary">Submit New Expense</a>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div class="table-responsive">
+            <table class="table align-middle">
+                <thead>
+                    <tr>
+                        <th>Agent Name</th>
+                        <th>Amount</th>
+                        <th>Date</th>
+                        <th>Status</th>
+                        <th>Description</th>
+                        <th>Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php if (empty($reports)):
+                        <tr>
+                            <td colspan="6" class="text-center text-muted pt-4 pb-4">No expense reports submitted yet.</td>
+                        </tr>
+                    <?php else:
+                        foreach ($reports as $report):
+                    ?>
+                            <tr>
+                                <td>
+                                    <a href="my_reports.php?agent=<?php echo urlencode($report['agent_name']); ?>" class="text-decoration-none">
+                                        <?php echo htmlspecialchars($report['agent_name']); ?>
+                                    </a>
+                                </td>
+                                <td>$<?php echo number_format($report['amount'], 2); ?></td>
+                                <td><?php echo date('M d, Y', strtotime($report['created_at'])); ?></td>
+                                <td>
+                                    <span class="badge-status <?php echo getStatusBadgeClass($report['status']); ?>">
+                                        <?php echo htmlspecialchars($report['status']); ?>
+                                    </span>
+                                </td>
+                                <td><?php echo htmlspecialchars($report['description']); ?></td>
+                                <td>
+                                    <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; ?>
+                    <?php endif; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+<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>
+
+<?php
+require_once 'includes/footer.php';
+?>

db/migrations/001_create_expense_reports_table.sql

@@ -0,0 +1,8 @@
+CREATE TABLE IF NOT EXISTS expense_reports (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    agent_name VARCHAR(255) NOT NULL,
+    amount DECIMAL(10, 2) NOT NULL,
+    description TEXT,
+    status ENUM('Pending', 'Approved', 'Rejected') NOT NULL DEFAULT 'Pending',
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);

includes/footer.php

@@ -0,0 +1,7 @@
+    </main>
+    <footer class="text-center p-4 mt-auto">
+        <p>&copy; <?php echo date("Y"); ?> ExpenseTracker. All rights reserved.</p>
+    </footer>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>

includes/header.php

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?php echo isset($page_title) ? $page_title : 'ExpenseTracker'; ?></title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container">
+            <a class="navbar-brand" href="index.php">ExpenseTracker</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="dashboard.php">Manager Dashboard</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="submit_expense.php">Submit Expense</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="my_reports.php">My Reports</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <main class="container mt-4">

index.php

@@ -1,150 +1,34 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+$page_title = 'Welcome to ExpenseTracker';
+require_once 'includes/header.php';
+?>
+
+<section class="hero text-center">
+    <h1>Effortless Expense Reporting</h1>
+    <p class="lead">Simplify how your team tracks and manages expenses. Get a clear overview, approve reports on the fly, and keep your budget in check.</p>
+    <a href="dashboard.php" class="btn btn-primary btn-lg">View Manager Dashboard</a>
+</section>
+
+<div class="container mt-5 mb-5">
+    <div class="row text-center">
+        <div class="col-md-4">
+            <img src="https://picsum.photos/seed/submit/800/600" class="img-fluid rounded mb-3" alt="An agent submitting an expense report on a mobile device.">
+            <h3>Submit with Ease</h3>
+            <p>Agents can quickly submit expenses from anywhere, on any device.</p>
+        </div>
+        <div class="col-md-4">
+            <img src="https://picsum.photos/seed/dashboard/800/600" class="img-fluid rounded mb-3" alt="A manager reviewing an expense dashboard on a tablet.">
+            <h3>Manage with Clarity</h3>
+            <p>Managers get a real-time dashboard to review and approve reports.</p>
+        </div>
+        <div class="col-md-4">
+            <img src="https://picsum.photos/seed/insights/800/600" class="img-fluid rounded mb-3" alt="Charts and graphs showing expense analytics.">
+            <h3>Gain Instant Insights</h3>
+            <p>Track spending patterns and make informed budget decisions.</p>
+        </div>
+    </div>
+</div>
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
-?>
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>New Style</title>
 <?php
-// Read project preview data from environment
-$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
-$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+require_once 'includes/footer.php';
 ?>
-<?php if ($projectDescription): ?>
-  <!-- Meta description -->
-  <meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
-  <!-- Open Graph meta tags -->
-  <meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-  <!-- Twitter meta tags -->
-  <meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
-<?php endif; ?>
-<?php if ($projectImageUrl): ?>
-  <!-- Open Graph image -->
-  <meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-  <!-- Twitter image -->
-  <meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
-<?php endif; ?>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --bg-color-start: #6a11cb;
-      --bg-color-end: #2575fc;
-      --text-color: #ffffff;
-      --card-bg-color: rgba(255, 255, 255, 0.01);
-      --card-border-color: rgba(255, 255, 255, 0.1);
-    }
-    body {
-      margin: 0;
-      font-family: 'Inter', sans-serif;
-      background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
-      color: var(--text-color);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      text-align: center;
-      overflow: hidden;
-      position: relative;
-    }
-    body::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
-      animation: bg-pan 20s linear infinite;
-      z-index: -1;
-    }
-    @keyframes bg-pan {
-      0% { background-position: 0% 0%; }
-      100% { background-position: 100% 100%; }
-    }
-    main {
-      padding: 2rem;
-    }
-    .card {
-      background: var(--card-bg-color);
-      border: 1px solid var(--card-border-color);
-      border-radius: 16px;
-      padding: 2rem;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
-    }
-    .loader {
-      margin: 1.25rem auto 1.25rem;
-      width: 48px;
-      height: 48px;
-      border: 3px solid rgba(255, 255, 255, 0.25);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-    @keyframes spin {
-      from { transform: rotate(0deg); }
-      to   { transform: rotate(360deg); }
-    }
-    .hint {
-      opacity: 0.9;
-    }
-    .sr-only {
-      position: absolute;
-      width: 1px; height: 1px;
-      padding: 0; margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap; border: 0;
-    }
-    h1 {
-      font-size: 3rem;
-      font-weight: 700;
-      margin: 0 0 1rem;
-      letter-spacing: -1px;
-    }
-    p {
-      margin: 0.5rem 0;
-      font-size: 1.1rem;
-    }
-    code {
-      background: rgba(0,0,0,0.2);
-      padding: 2px 6px;
-      border-radius: 4px;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    }
-    footer {
-      position: absolute;
-      bottom: 1rem;
-      font-size: 0.8rem;
-      opacity: 0.7;
-    }
-  </style>
-</head>
-<body>
-  <main>
-    <div class="card">
-      <h1>Analyzing your requirements and generating your website…</h1>
-      <div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
-        <span class="sr-only">Loading…</span>
-      </div>
-      <p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
-      <p class="hint">This page will update automatically as the plan is implemented.</p>
-      <p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
-    </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
-</body>
-</html>

my_reports.php

@@ -0,0 +1,89 @@
+<?php
+require_once 'db/config.php';
+
+// Simulate getting the logged-in agent's name from a query parameter
+$agent_name = $_GET['agent'] ?? '';
+
+if (empty($agent_name)) {
+    // In a real app, you'd redirect to a login page or show an error.
+    // For now, we'll just show a message.
+    $page_title = 'My Reports';
+    $reports = [];
+} else {
+    $page_title = "Reports for " . htmlspecialchars($agent_name);
+    try {
+        $pdo = db();
+        // Fetch reports only for the specified agent
+        $stmt = $pdo->prepare("SELECT id, agent_name, amount, description, status, created_at FROM expense_reports WHERE agent_name = ? ORDER BY created_at DESC");
+        $stmt->execute([$agent_name]);
+        $reports = $stmt->fetchAll(PDO::FETCH_ASSOC);
+    } catch (PDOException $e) {
+        // For a real app, log this error instead of displaying it
+        die("Database error: " . $e->getMessage());
+    }
+}
+
+function getStatusBadgeClass($status) {
+    switch ($status) {
+        case 'Approved': return 'badge-approved';
+        case 'Rejected': return 'badge-rejected';
+        case 'Pending':
+        default:
+            return 'badge-pending';
+    }
+}
+
+require_once 'includes/header.php';
+?>
+
+<h1 class="mb-4"><?php echo $page_title; ?></h1>
+
+<?php if (empty($agent_name)):
+    <div class="alert alert-warning text-center">
+        <h2 class="h4">No Agent Selected</h2>
+        <p>Please go to the <a href="dashboard.php" class="alert-link">main dashboard</a> and click on an agent's name to see their reports.</p>
+    </div>
+<?php elseif (empty($reports)):
+    <div class="alert alert-info text-center">
+        <h2 class="h4">No Reports Found</h2>
+        <p>This agent has not submitted any expense reports yet.</p>
+        <a href="submit_expense.php" class="btn btn-primary mt-3">Submit First Report</a>
+    </div>
+<?php else:
+    <div class="card">
+        <div class="card-body">
+            <div class="table-responsive">
+                <table class="table align-middle">
+                    <thead>
+                        <tr>
+                            <th>Agent</th>
+                            <th>Date</th>
+                            <th class="text-end">Amount</th>
+                            <th>Description</th>
+                            <th class="text-center">Status</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php foreach ($reports as $report): ?>
+                            <tr>
+                                <td><?php echo htmlspecialchars($report['agent_name']); ?></td>
+                                <td><?php echo date("M d, Y", strtotime($report['created_at'])); ?></td>
+                                <td class="text-end">$<?php echo number_format($report['amount'], 2); ?></td>
+                                <td><?php echo htmlspecialchars($report['description']); ?></td>
+                                <td class="text-center">
+                                    <span class="badge-status <?php echo getStatusBadgeClass($report['status']); ?>">
+                                        <?php echo htmlspecialchars($report['status']); ?>
+                                    </span>
+                                </td>
+                            </tr>
+                        <?php endforeach; ?>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+<?php endif; ?>
+
+<?php
+require_once 'includes/footer.php';
+?>

submit_expense.php

@@ -0,0 +1,73 @@
+<?php
+require_once 'db/config.php';
+
+$success_message = '';
+$error_message = '';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $agent_name = trim($_POST['agent_name'] ?? '');
+    $amount = trim($_POST['amount'] ?? '');
+    $description = trim($_POST['description'] ?? '');
+
+    if (empty($agent_name) || !is_numeric($amount) || $amount <= 0 || empty($description)) {
+        $error_message = 'Please fill in all fields with valid data. Amount must be a positive number.';
+    } else {
+        try {
+            $pdo = db();
+            $stmt = $pdo->prepare(
+                'INSERT INTO expense_reports (agent_name, amount, description, status) VALUES (?, ?, ?, ?)'
+            );
+            $stmt->execute([$agent_name, $amount, $description, 'Pending']);
+            $success_message = 'Expense report submitted successfully!';
+        } catch (PDOException $e) {
+            $error_message = 'Database error: Could not submit the report.';
+        }
+    }
+}
+
+$page_title = 'Submit Expense Report';
+require_once 'includes/header.php';
+?>
+
+<div class="row justify-content-center">
+    <div class="col-md-6">
+        <h1 class="mb-4">Submit New Expense Report</h1>
+
+        <?php if ($success_message): ?>
+            <div class="alert alert-success">
+                <?php echo htmlspecialchars($success_message); ?>
+                <div class="mt-4">
+                    <a href="dashboard.php" class="btn btn-primary">Return to Dashboard</a>
+                </div>
+            </div>
+        <?php endif; ?>
+
+        <?php if ($error_message): ?>
+            <div class="alert alert-danger">
+                <?php echo htmlspecialchars($error_message); ?>
+            </div>
+        <?php endif; ?>
+
+        <?php if (!$success_message): ?>
+        <form action="submit_expense.php" method="POST">
+            <div class="mb-3">
+                <label for="agent_name" class="form-label">Agent Name</label>
+                <input type="text" id="agent_name" name="agent_name" class="form-control" required>
+            </div>
+            <div class="mb-3">
+                <label for="amount" class="form-label">Amount ($)</label>
+                <input type="number" id="amount" name="amount" step="0.01" min="0.01" class="form-control" required>
+            </div>
+            <div class="mb-3">
+                <label for="description" class="form-label">Description</label>
+                <textarea id="description" name="description" rows="4" class="form-control" required></textarea>
+            </div>
+            <button type="submit" class="btn btn-primary">Submit Report</button>
+        </form>
+        <?php endif; ?>
+    </div>
+</div>
+
+<?php
+require_once 'includes/footer.php';
+?>