1

2025-11-08 08:53:42 +00:00 · 2025-11-08 08:53:42 +00:00 · bab7166464
commit bab7166464
parent d5d7ce7d31
12 changed files with 662 additions and 149 deletions
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@ -0,0 +1,291 @@
+/* assets/css/custom.css */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+    --color-background-light: #FDFBF5; /* Lighter Beige */
+    --color-surface-light: #FFFFFF;
+    --color-text-light: #1C1C1C; /* Near Black */
+    --color-primary: #B8860B; /* DarkGoldenRod - more subtle than pure gold */
+    --color-secondary: #A9A9A9; /* DarkGray */
+    --color-accent: #D4AF37; /* Golden */
+    --border-color: #EAEAEA;
+    --border-radius: 0.5rem;
+    --font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+body {
+    font-family: var(--font-family-sans-serif);
+    background-color: var(--color-background-light);
+    color: var(--color-text-light);
+    display: flex;
+    min-height: 100vh;
+}
+
+.sidebar {
+    width: 260px;
+    background-color: var(--color-surface-light);
+    border-right: 1px solid var(--border-color);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+}
+
+.sidebar .logo {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--color-primary);
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.sidebar .nav-link {
+    color: #555;
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 0.5rem;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.sidebar .nav-link .feather {
+    margin-right: 1rem;
+    width: 20px;
+    height: 20px;
+}
+
+.sidebar .nav-link:hover,
+.sidebar .nav-link.active {
+    background-color: var(--color-accent);
+    color: var(--color-surface-light);
+}
+
+.main-content {
+    flex-grow: 1;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.header h1 {
+    font-size: 2rem;
+    font-weight: 600;
+}
+
+.theme-toggle {
+    background: none;
+    border: 1px solid var(--border-color);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--color-secondary);
+}
+
+.dashboard-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1.5rem;
+}
+
+.card {
+    background-color: var(--color-surface-light);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+}
+
+.card-title {
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--color-secondary);
+    margin-bottom: 0.5rem;
+}
+
+.card-value {
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--color-text-light);
+}
+
+.card-delta {
+    font-size: 0.85rem;
+    margin-top: 0.5rem;
+}
+
+.text-success {
+    color: #28a745;
+}
+
+.text-danger {
+    color: #dc3545;
+}
+
+/* Dark Mode */
+body.dark-mode {
+    --color-background-light: #121212;
+    --color-surface-light: #1E1E1E;
+    --color-text-light: #E0E0E0;
+    --border-color: #333;
+    --color-secondary: #888;
+}
+
+body.dark-mode .sidebar {
+    background-color: var(--color-surface-light);
+    border-right-color: var(--border-color);
+}
+
+body.dark-mode .sidebar .nav-link {
+    color: #aaa;
+}
+
+body.dark-mode .sidebar .nav-link:hover,
+body.dark-mode .sidebar .nav-link.active {
+    background-color: var(--color-accent);
+    color: #121212;
+}
+
+body.dark-mode .theme-toggle {
+    border-color: var(--border-color);
+    color: var(--color-secondary);
+}
+
+body.dark-mode .card {
+    background-color: var(--color-surface-light);
+    border-color: var(--border-color);
+}
+
+/* Page Content Sections */
+.content-section {
+    margin-bottom: 2rem;
+}
+
+.content-section h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+/* Form Styles */
+.form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 1rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-group-full {
+    grid-column: 1 / -1;
+}
+
+.form-group label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+    color: var(--color-secondary);
+}
+
+.form-group input,
+.form-group select {
+    padding: 0.75rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    background-color: var(--color-background-light);
+    color: var(--color-text-light);
+    font-family: inherit;
+    font-size: 1rem;
+}
+
+body.dark-mode .form-group input,
+body.dark-mode .form-group select {
+    background-color: #2c2c2c;
+    border-color: #444;
+}
+
+.btn {
+    padding: 0.75rem 1.5rem;
+    border-radius: var(--border-radius);
+    border: none;
+    cursor: pointer;
+    font-weight: 600;
+    transition: background-color 0.2s;
+}
+
+.btn-primary {
+    background-color: var(--color-primary);
+    color: white;
+}
+
+.btn-primary:hover {
+    background-color: var(--color-accent);
+}
+
+/* Table Styles */
+.table-responsive {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+}
+
+table th, table td {
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+    vertical-align: middle;
+}
+
+table th {
+    font-weight: 600;
+    font-size: 0.875rem;
+    color: var(--color-secondary);
+    text-transform: uppercase;
+}
+
+/* Status Badges */
+.status-badge {
+    display: inline-block;
+    padding: 0.25em 0.6em;
+    font-size: 0.8rem;
+    font-weight: 600;
+    border-radius: 20px;
+    text-transform: capitalize;
+}
+
+.status-pending {
+    background-color: #f0ad4e;
+    color: white;
+}
+
+.status-in-transit {
+    background-color: #5bc0de;
+    color: white;
+}
+
+.status-delivered {
+    background-color: #5cb85c;
+    color: white;
+}
+
+.status-cancelled {
+    background-color: #d9534f;
+    color: white;
+}
+
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -0,0 +1,48 @@
+// assets/js/main.js
+document.addEventListener('DOMContentLoaded', () => {
+    const themeToggle = document.getElementById('theme-toggle');
+    const featherSun = document.getElementById('feather-sun');
+    const featherMoon = document.getElementById('feather-moon');
+
+    // Function to apply theme based on saved preference or system setting
+    const applyTheme = (theme) => {
+        if (theme === 'dark') {
+            document.body.classList.add('dark-mode');
+            if (featherSun) featherSun.style.display = 'block';
+            if (featherMoon) featherMoon.style.display = 'none';
+        } else {
+            document.body.classList.remove('dark-mode');
+            if (featherSun) featherSun.style.display = 'none';
+            if (featherMoon) featherMoon.style.display = 'block';
+        }
+    };
+
+    // Check for saved theme in localStorage
+    const savedTheme = localStorage.getItem('theme');
+    // Check for user's system preference
+    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    // Apply theme on initial load
+    if (savedTheme) {
+        applyTheme(savedTheme);
+    } else if (prefersDark) {
+        applyTheme('dark');
+    } else {
+        applyTheme('light');
+    }
+
+
+    if (themeToggle) {
+        themeToggle.addEventListener('click', () => {
+            const isDarkMode = document.body.classList.toggle('dark-mode');
+            const newTheme = isDarkMode ? 'dark' : 'light';
+            localStorage.setItem('theme', newTheme);
+            applyTheme(newTheme);
+        });
+    }
+
+    // Feather icons replacement
+    if (typeof feather !== 'undefined') {
+        feather.replace();
+    }
+});
--- a/billing.php
+++ b/billing.php
@ -0,0 +1,16 @@
+<?php include 'includes/header.php'; ?>
+
+<?php include 'includes/sidebar.php'; ?>
+
+<main class="main-content">
+    <header class="header">
+        <h1>Billing</h1>
+    </header>
+
+    <section class="dashboard-cards">
+        <p>Invoicing and payroll content will go here.</p>
+    </section>
+
+</main>
+
+<?php include 'includes/footer.php'; ?>
--- a/customers.php
+++ b/customers.php
@ -0,0 +1,16 @@
+<?php include 'includes/header.php'; ?>
+
+<?php include 'includes/sidebar.php'; ?>
+
+<main class="main-content">
+    <header class="header">
+        <h1>Customers</h1>
+    </header>
+
+    <section class="dashboard-cards">
+        <p>Customer and shipper management will go here.</p>
+    </section>
+
+</main>
+
+<?php include 'includes/footer.php'; ?>
--- a/drivers.php
+++ b/drivers.php
@ -0,0 +1,16 @@
+<?php include 'includes/header.php'; ?>
+
+<?php include 'includes/sidebar.php'; ?>
+
+<main class="main-content">
+    <header class="header">
+        <h1>Drivers</h1>
+    </header>
+
+    <section class="dashboard-cards">
+        <p>Driver management content will go here.</p>
+    </section>
+
+</main>
+
+<?php include 'includes/footer.php'; ?>
--- a/includes/footer.php
+++ b/includes/footer.php
@ -0,0 +1,6 @@
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+
+</body>
+</html>
--- a/includes/header.php
+++ b/includes/header.php
@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- SEO & Meta Tags -->
+    <title>Datatruck TMS</title>
+    <meta name="description" content="Datatruck TMS - Manage your trucking company with AI-powered tools and integrations. Built with Flatlogic Generator.">
+    <meta name="keywords" content="tms, trucking management, fleet management, load planning, dispatch software, logistics, ai logistics, datatruck, Built with Flatlogic Generator">
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="Datatruck TMS">
+    <meta property="og:description" content="Datatruck TMS - Manage your trucking company with AI-powered tools and integrations. Built with Flatlogic Generator.">
+    <meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Datatruck TMS">
+    <meta name="twitter:description" content="Datatruck TMS - Manage your trucking company with AI-powered tools and integrations. Built with Flatlogic Generator.">
+    <meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
+
+    <!-- Stylesheets -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+
+</head>
+<body>
--- a/includes/sidebar.php
+++ b/includes/sidebar.php
@ -0,0 +1,44 @@
+<?php
+$current_page = basename($_SERVER['PHP_SELF']);
+?>
+<aside class="sidebar">
+    <div class="logo">
+        Datatruck TMS
+    </div>
+    <nav class="nav flex-column">
+        <a class="nav-link <?php echo ($current_page == 'index.php') ? 'active' : ''; ?>" href="index.php">
+            <i data-feather="home"></i>
+            <span>Overview</span>
+        </a>
+        <a class="nav-link <?php echo ($current_page == 'loads.php') ? 'active' : ''; ?>" href="loads.php">
+            <i data-feather="truck"></i>
+            <span>Loads</span>
+        </a>
+        <a class="nav-link <?php echo ($current_page == 'drivers.php') ? 'active' : ''; ?>" href="drivers.php">
+            <i data-feather="users"></i>
+            <span>Drivers</span>
+        </a>
+        <a class="nav-link <?php echo ($current_page == 'maintenance.php') ? 'active' : ''; ?>" href="maintenance.php">
+            <i data-feather="tool"></i>
+            <span>Maintenance</span>
+        </a>
+        <a class="nav-link <?php echo ($current_page == 'billing.php') ? 'active' : ''; ?>" href="billing.php">
+            <i data-feather="dollar-sign"></i>
+            <span>Billing</span>
+        </a>
+        <a class="nav-link <?php echo ($current_page == 'customers.php') ? 'active' : ''; ?>" href="customers.php">
+            <i data-feather="package"></i>
+            <span>Customers</span>
+        </a>
+        <a class="nav-link <?php echo ($current_page == 'settings.php') ? 'active' : ''; ?>" href="settings.php">
+            <i data-feather="settings"></i>
+            <span>Settings</span>
+        </a>
+    </nav>
+    <div class="mt-auto">
+         <button id="theme-toggle" class="theme-toggle">
+            <i id="feather-moon" data-feather="moon"></i>
+            <i id="feather-sun" data-feather="sun" style="display: none;"></i>
+        </button>
+    </div>
+</aside>
--- a/index.php
+++ b/index.php
@ -1,150 +1,38 @@
-<?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+<?php include 'includes/header.php'; ?>

-$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'] ?? '';
-?>
-<?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>
+<?php include 'includes/sidebar.php'; ?>
+
+<main class="main-content">
+    <header class="header">
+        <h1>Dashboard Overview</h1>
+        <!-- Can add user profile dropdown here later -->
+    </header>
+
+    <section class="dashboard-cards">
+        <div class="card">
+            <div class="card-title">ACTIVE LOADS</div>
+            <div class="card-value">42</div>
+            <div class="card-delta text-success">+2 since yesterday</div>
+        </div>
+        <div class="card">
+            <div class="card-title">DRIVERS ON-ROUTE</div>
+            <div class="card-value">35</div>
+            <div class="card-delta text-success">+5.2%</div>
+        </div>
+        <div class="card">
+            <div class="card-title">REVENUE TODAY</div>
+            <div class="card-value">$18,450</div>
+            <div class="card-delta text-success">+12% vs avg.</div>
+        </div>
+        <div class="card">
+            <div class="card-title">PENDING ISSUES</div>
+            <div class="card-value">3</div>
+            <div class="card-delta text-danger">1 new alert</div>
+        </div>
+    </section>
+    
+    <!-- More dashboard components can be added here -->
+
+</main>
+
+<?php include 'includes/footer.php'; ?>
--- a/loads.php
+++ b/loads.php
@ -0,0 +1,127 @@
+<?php
+require_once 'db/config.php';
+
+try {
+    $pdo = db();
+    
+    // Create table if it doesn't exist
+    $pdo->exec("CREATE TABLE IF NOT EXISTS loads (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        origin VARCHAR(255) NOT NULL,
+        destination VARCHAR(255) NOT NULL,
+        pickup_date DATE NOT NULL,
+        delivery_date DATE NOT NULL,
+        rate DECIMAL(10, 2) NOT NULL,
+        status VARCHAR(50) NOT NULL DEFAULT 'Pending',
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    )");
+
+    // Handle form submission
+    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+        $origin = $_POST['origin'] ?? '';
+        $destination = $_POST['destination'] ?? '';
+        $pickup_date = $_POST['pickup_date'] ?? '';
+        $delivery_date = $_POST['delivery_date'] ?? '';
+        $rate = $_POST['rate'] ?? 0;
+
+        if ($origin && $destination && $pickup_date && $delivery_date && $rate) {
+            $stmt = $pdo->prepare("INSERT INTO loads (origin, destination, pickup_date, delivery_date, rate) VALUES (?, ?, ?, ?, ?)");
+            $stmt->execute([$origin, $destination, $pickup_date, $delivery_date, $rate]);
+            header("Location: loads.php"); // Redirect to avoid form resubmission
+            exit;
+        }
+    }
+
+    // Fetch all loads
+    $stmt = $pdo->query("SELECT id, origin, destination, pickup_date, delivery_date, rate, status, created_at FROM loads ORDER BY created_at DESC");
+    $loads = $stmt->fetchAll();
+
+} catch (PDOException $e) {
+    // For development, you might want to see the error.
+    // In production, you'd log this and show a generic error message.
+    die("Database error: " . $e->getMessage());
+}
+
+include 'includes/header.php';
+include 'includes/sidebar.php';
+?>
+
+<main class="main-content">
+    <header class="header">
+        <h1>Load Management</h1>
+    </header>
+
+    <section class="content-section">
+        <h2>Add New Load</h2>
+        <div class="card">
+            <form action="loads.php" method="POST" class="form-grid">
+                <div class="form-group">
+                    <label for="origin">Origin</label>
+                    <input type="text" id="origin" name="origin" required>
+                </div>
+                <div class="form-group">
+                    <label for="destination">Destination</label>
+                    <input type="text" id="destination" name="destination" required>
+                </div>
+                <div class="form-group">
+                    <label for="pickup_date">Pickup Date</label>
+                    <input type="date" id="pickup_date" name="pickup_date" required>
+                </div>
+                <div class="form-group">
+                    <label for="delivery_date">Delivery Date</label>
+                    <input type="date" id="delivery_date" name="delivery_date" required>
+                </div>
+                <div class="form-group">
+                    <label for="rate">Rate ($)</label>
+                    <input type="number" id="rate" name="rate" step="0.01" required>
+                </div>
+                <div class="form-group form-group-full">
+                    <button type="submit" class="btn btn-primary">Create Load</button>
+                </div>
+            </form>
+        </div>
+    </section>
+
+    <section class="content-section">
+        <h2>Current Loads</h2>
+        <div class="card">
+            <div class="table-responsive">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>Origin</th>
+                            <th>Destination</th>
+                            <th>Pickup Date</th>
+                            <th>Delivery Date</th>
+                            <th>Rate</th>
+                            <th>Status</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <?php if (empty($loads)): ?>
+                            <tr>
+                                <td colspan="7" style="text-align:center;">No loads found.</td>
+                            </tr>
+                        <?php else: ?>
+                            <?php foreach ($loads as $load): ?>
+                                <tr>
+                                    <td><?php echo htmlspecialchars($load['id']); ?></td>
+                                    <td><?php echo htmlspecialchars($load['origin']); ?></td>
+                                    <td><?php echo htmlspecialchars($load['destination']); ?></td>
+                                    <td><?php echo htmlspecialchars($load['pickup_date']); ?></td>
+                                    <td><?php echo htmlspecialchars($load['delivery_date']); ?></td>
+                                    <td>$<?php echo htmlspecialchars(number_format($load['rate'], 2)); ?></td>
+                                    <td><span class="status-badge status-<?php echo strtolower(htmlspecialchars($load['status'])); ?>"><?php echo htmlspecialchars($load['status']); ?></span></td>
+                                </tr>
+                            <?php endforeach; ?>
+                        <?php endif; ?>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </section>
+
+</main>
+
+<?php include 'includes/footer.php'; ?>
--- a/maintenance.php
+++ b/maintenance.php
@ -0,0 +1,16 @@
+<?php include 'includes/header.php'; ?>
+
+<?php include 'includes/sidebar.php'; ?>
+
+<main class="main-content">
+    <header class="header">
+        <h1>Maintenance</h1>
+    </header>
+
+    <section class="dashboard-cards">
+        <p>Maintenance records and scheduling will go here.</p>
+    </section>
+
+</main>
+
+<?php include 'includes/footer.php'; ?>
--- a/settings.php
+++ b/settings.php
@ -0,0 +1,16 @@
+<?php include 'includes/header.php'; ?>
+
+<?php include 'includes/sidebar.php'; ?>
+
+<main class="main-content">
+    <header class="header">
+        <h1>Settings</h1>
+    </header>
+
+    <section class="dashboard-cards">
+        <p>Application settings will go here.</p>
+    </section>
+
+</main>
+
+<?php include 'includes/footer.php'; ?>