Initial Setup with MSP & Customers

2026-03-01 22:44:18 +00:00 · 2026-03-01 22:44:18 +00:00 · d49002c4b1
commit d49002c4b1
parent 0edde27e3a
12 changed files with 801 additions and 438 deletions
--- a/add_customer.php
+++ b/add_customer.php
@ -0,0 +1,84 @@
+<?php
+require_once __DIR__ . '/header.php';
+
+$message = '';
+$error = '';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $name = $_POST['name'] ?? '';
+    $email = $_POST['email'] ?? '';
+
+    if (empty($name)) {
+        $error = "Customer name is required.";
+    } else {
+        try {
+            $stmt = db()->prepare("INSERT INTO customers (name, contact_email, status) VALUES (?, ?, 'onboarding')");
+            $stmt->execute([$name, $email]);
+            $customer_id = db()->lastInsertId();
+
+            // Seed onboarding tasks
+            $tasks = [
+                'Initial Kick-off Meeting',
+                'Discovery & Asset Inventory',
+                'Agent Deployment (RMM)',
+                'Network Security Audit',
+                'Backup & Disaster Recovery Setup',
+                'Microsoft 365 Tenant Review',
+                'Final Configuration Handover'
+            ];
+
+            $stmt_task = db()->prepare("INSERT INTO onboarding_tasks (customer_id, task_name) VALUES (?, ?)");
+            foreach ($tasks as $task) {
+                $stmt_task->execute([$customer_id, $task]);
+            }
+
+            $message = "Customer added successfully! <a href='onboarding.php?id=$customer_id' style='color: var(--primary); text-decoration: underline;'>View Onboarding Checklist</a>";
+        } catch (PDOException $e) {
+            $error = "Error adding customer: " . $e->getMessage();
+        }
+    }
+}
+?>
+
+<div class="container" style="max-width: 600px;">
+    <div style="margin-bottom: 2rem;">
+        <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">Add New Customer</h2>
+        <p style="color: var(--text-muted); font-size: 0.875rem;">Enter details to start the onboarding process.</p>
+    </div>
+
+    <?php if ($message): ?>
+        <div style="background: #dcfce7; color: #166534; padding: 1rem; border-radius: var(--radius); margin-bottom: 1.5rem; border: 1px solid #bbf7d0;">
+            <i class="bi bi-check-circle-fill" style="margin-right: 0.5rem;"></i> <?php echo $message; ?>
+        </div>
+    <?php endif; ?>
+
+    <?php if ($error): ?>
+        <div style="background: #fee2e2; color: #991b1b; padding: 1rem; border-radius: var(--radius); margin-bottom: 1.5rem; border: 1px solid #fecaca;">
+            <i class="bi bi-exclamation-circle-fill" style="margin-right: 0.5rem;"></i> <?php echo $error; ?>
+        </div>
+    <?php endif; ?>
+
+    <div class="card">
+        <form method="POST">
+            <div class="form-group">
+                <label class="form-label" for="name">Company / Customer Name</label>
+                <input type="text" id="name" name="name" class="form-control" placeholder="Acme Corp" required>
+            </div>
+            <div class="form-group">
+                <label class="form-label" for="email">Primary Contact Email</label>
+                <input type="email" id="email" name="email" class="form-control" placeholder="admin@acmecorp.com">
+            </div>
+            <div style="display: flex; gap: 1rem; margin-top: 2rem;">
+                <button type="submit" class="btn btn-primary" style="flex: 1;">Create Customer Profile</button>
+                <a href="customers.php" class="btn btn-outline" style="flex: 1;">Cancel</a>
+            </div>
+        </form>
+    </div>
+
+    <div style="margin-top: 2rem; padding: 1rem; background: #f1f5f9; border-radius: var(--radius); font-size: 0.875rem; color: var(--text-muted);">
+        <i class="bi bi-info-circle" style="margin-right: 0.5rem; color: var(--primary);"></i>
+        Adding a customer will automatically generate a standard 7-step onboarding checklist to track progress.
+    </div>
+</div>
+
+<?php require_once __DIR__ . '/footer.php'; ?>
--- a/api/update_customer_status.php
+++ b/api/update_customer_status.php
@ -0,0 +1,24 @@
+<?php
+header('Content-Type: application/json');
+require_once __DIR__ . '/../db/config.php';
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    echo json_encode(['success' => false, 'message' => 'Invalid request method']);
+    exit;
+}
+
+$id = $_POST['id'] ?? null;
+$status = $_POST['status'] ?? 'onboarding';
+
+if (!$id) {
+    echo json_encode(['success' => false, 'message' => 'Missing ID']);
+    exit;
+}
+
+try {
+    $stmt = db()->prepare("UPDATE customers SET status = ? WHERE id = ?");
+    $result = $stmt->execute([$status, (int)$id]);
+    echo json_encode(['success' => true]);
+} catch (PDOException $e) {
+    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
+}
--- a/api/update_task.php
+++ b/api/update_task.php
@ -0,0 +1,24 @@
+<?php
+header('Content-Type: application/json');
+require_once __DIR__ . '/../db/config.php';
+
+if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
+    echo json_encode(['success' => false, 'message' => 'Invalid request method']);
+    exit;
+}
+
+$id = $_POST['id'] ?? null;
+$completed = $_POST['completed'] ?? 0;
+
+if (!$id) {
+    echo json_encode(['success' => false, 'message' => 'Missing ID']);
+    exit;
+}
+
+try {
+    $stmt = db()->prepare("UPDATE onboarding_tasks SET is_completed = ?, updated_at = NOW() WHERE id = ?");
+    $result = $stmt->execute([(int)$completed, (int)$id]);
+    echo json_encode(['success' => true]);
+} catch (PDOException $e) {
+    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
+}
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@ -1,302 +1,219 @@
+:root {
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --secondary: #64748b;
+  --bg-color: #f8fafc;
+  --surface: #ffffff;
+  --border: #e2e8f0;
+  --text-main: #0f172a;
+  --text-muted: #64748b;
+  --success: #10b981;
+  --warning: #f59e0b;
+  --danger: #ef4444;
+  --radius: 6px;
+}
+
 body {
-    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
-    background-size: 400% 400%;
-    animation: gradient 15s ease infinite;
-    color: #212529;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    margin: 0;
-    min-height: 100vh;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  background-color: var(--bg-color);
+  color: var(--text-main);
+  line-height: 1.5;
+  margin: 0;
 }

-.main-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-    width: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-    position: relative;
-    z-index: 1;
+.navbar {
+  background-color: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }

-@keyframes gradient {
-    0% {
-        background-position: 0% 50%;
-    }
-    50% {
-        background-position: 100% 50%;
-    }
-    100% {
-        background-position: 0% 50%;
-    }
+.navbar-brand {
+  font-weight: 700;
+  font-size: 1.25rem;
+  color: var(--primary);
+  text-decoration: none;
 }

-.chat-container {
-    width: 100%;
-    max-width: 600px;
-    background: rgba(255, 255, 255, 0.85);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    border-radius: 20px;
-    display: flex;
-    flex-direction: column;
-    height: 85vh;
-    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    overflow: hidden;
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
 }

-.chat-header {
-    padding: 1.5rem;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    background: rgba(255, 255, 255, 0.5);
-    font-weight: 700;
-    font-size: 1.1rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+.nav-link {
+  color: var(--text-muted);
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: color 0.2s;
 }

-.chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
+.nav-link:hover, .nav-link.active {
+  color: var(--primary);
 }

-/* Custom Scrollbar */
-::-webkit-scrollbar {
-    width: 6px;
+.container {
+  max-width: 1200px;
+  margin: 2rem auto;
+  padding: 0 1rem;
 }

-::-webkit-scrollbar-track {
-    background: transparent;
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  margin-bottom: 1.5rem;
 }

-::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 10px;
+.card-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: 1.25rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }

-::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+  text-decoration: none;
 }

-.message {
-    max-width: 85%;
-    padding: 0.85rem 1.1rem;
-    border-radius: 16px;
-    line-height: 1.5;
-    font-size: 0.95rem;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-    animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+.btn-primary {
+  background-color: var(--primary);
+  color: white;
 }

-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px) scale(0.95); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
+.btn-primary:hover {
+  background-color: var(--primary-hover);
 }

-.message.visitor {
-    align-self: flex-end;
-    background: linear-gradient(135deg, #212529 0%, #343a40 100%);
-    color: #fff;
-    border-bottom-right-radius: 4px;
+.btn-outline {
+  border-color: var(--border);
+  background-color: transparent;
+  color: var(--text-muted);
 }

-.message.bot {
-    align-self: flex-start;
-    background: #ffffff;
-    color: #212529;
-    border-bottom-left-radius: 4px;
-}
-
-.chat-input-area {
-    padding: 1.25rem;
-    background: rgba(255, 255, 255, 0.5);
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.chat-input-area form {
-    display: flex;
-    gap: 0.75rem;
-}
-
-.chat-input-area input {
-    flex: 1;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    padding: 0.75rem 1rem;
-    outline: none;
-    background: rgba(255, 255, 255, 0.9);
-    transition: all 0.3s ease;
-}
-
-.chat-input-area input:focus {
-    border-color: #23a6d5;
-    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
-}
-
-.chat-input-area button {
-    background: #212529;
-    color: #fff;
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 12px;
-    cursor: pointer;
-    font-weight: 600;
-    transition: all 0.3s ease;
-}
-
-.chat-input-area button:hover {
-    background: #000;
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-}
-
-/* Background Animations */
-.bg-animations {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    overflow: hidden;
-    pointer-events: none;
-}
-
-.blob {
-    position: absolute;
-    width: 500px;
-    height: 500px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    filter: blur(80px);
-    animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
-}
-
-.blob-1 { 
-    top: -10%; 
-    left: -10%; 
-    background: rgba(238, 119, 82, 0.4); 
-}
-
-.blob-2 { 
-    bottom: -10%; 
-    right: -10%; 
-    background: rgba(35, 166, 213, 0.4); 
-    animation-delay: -7s; 
-    width: 600px;
-    height: 600px;
-}
-
-.blob-3 { 
-    top: 40%; 
-    left: 30%; 
-    background: rgba(231, 60, 126, 0.3); 
-    animation-delay: -14s; 
-    width: 450px;
-    height: 450px;
-}
-
-@keyframes move {
-    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
-    33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
-    66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
-    100% { transform: translate(0, 0) rotate(360deg) scale(1); }
-}
-
-.admin-link {
-    font-size: 14px;
-    color: #fff;
-    text-decoration: none;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-}
-
-.admin-link:hover {
-    background: rgba(0, 0, 0, 0.4);
-    text-decoration: none;
-}
-
-/* Admin Styles */
-.admin-container {
-    max-width: 900px;
-    margin: 3rem auto;
-    padding: 2.5rem;
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-radius: 24px;
-    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
-    border: 1px solid rgba(255, 255, 255, 0.4);
-    position: relative;
-    z-index: 1;
-}
-
-.admin-container h1 {
-    margin-top: 0;
-    color: #212529;
-    font-weight: 800;
+.btn-outline:hover {
+  background-color: #f1f5f9;
+  color: var(--text-main);
 }

 .table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0 8px;
-    margin-top: 1.5rem;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table th, .table td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border);
 }

 .table th {
-    background: transparent;
-    border: none;
-    padding: 1rem;
-    color: #6c757d;
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 1px;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  font-weight: 600;
 }

-.table td {
-    background: #fff;
-    padding: 1rem;
-    border: none;
+.badge {
+  display: inline-flex;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 9999px;
+  text-transform: capitalize;
 }

-.table tr td:first-child { border-radius: 12px 0 0 12px; }
-.table tr td:last-child { border-radius: 0 12px 12px 0; }
+.badge-onboarding { background: #dbeafe; color: #1e40af; }
+.badge-active { background: #dcfce7; color: #166534; }
+.badge-inactive { background: #f1f5f9; color: #475569; }
+
+.checklist-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.checklist-item:last-child {
+  border-bottom: none;
+}
+
+.checklist-item input[type="checkbox"] {
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+}
+
+.checklist-item.completed span {
+  text-decoration: line-through;
+  color: var(--text-muted);
+}

 .form-group {
-    margin-bottom: 1.25rem;
+  margin-bottom: 1.25rem;
 }

-.form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-    font-size: 0.9rem;
+.form-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
 }

 .form-control {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 12px;
-    background: #fff;
-    transition: all 0.3s ease;
-    box-sizing: border-box;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 0.875rem;
 }

 .form-control:focus {
-    outline: none;
-    border-color: #23a6d5;
-    box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
-}
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-top: 0.25rem;
+}
--- a/assets/js/main.js
+++ b/assets/js/main.js
@ -1,39 +1,32 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const chatForm = document.getElementById('chat-form');
-    const chatInput = document.getElementById('chat-input');
-    const chatMessages = document.getElementById('chat-messages');
-
-    const appendMessage = (text, sender) => {
-        const msgDiv = document.createElement('div');
-        msgDiv.classList.add('message', sender);
-        msgDiv.textContent = text;
-        chatMessages.appendChild(msgDiv);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-    };
-
-    chatForm.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const message = chatInput.value.trim();
-        if (!message) return;
-
-        appendMessage(message, 'visitor');
-        chatInput.value = '';
-
-        try {
-            const response = await fetch('api/chat.php', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ message })
-            });
-            const data = await response.json();
-            
-            // Artificial delay for realism
-            setTimeout(() => {
-                appendMessage(data.reply, 'bot');
-            }, 500);
-        } catch (error) {
-            console.error('Error:', error);
-            appendMessage("Sorry, something went wrong. Please try again.", 'bot');
+// MSP Connect - Global Interactivity
+document.addEventListener('DOMContentLoaded', function() {
+    // Navbar scroll effect
+    const navbar = document.querySelector('.navbar');
+    window.addEventListener('scroll', () => {
+        if (window.scrollY > 10) {
+            navbar.style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
+        } else {
+            navbar.style.boxShadow = 'none';
        }
    });
-});
+
+    // Fade-in effect for cards
+    const cards = document.querySelectorAll('.card');
+    cards.forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(10px)';
+        card.style.transition = 'all 0.4s ease-out';
+        setTimeout(() => {
+            card.style.opacity = '1';
+            card.style.transform = 'translateY(0)';
+        }, index * 100);
+    });
+
+    // Tooltip simulation/Simple alerts
+    const buttons = document.querySelectorAll('.btn-outline');
+    buttons.forEach(btn => {
+        if (btn.getAttribute('title')) {
+            // Natural browser title is fine for now
+        }
+    });
+});
--- a/customers.php
+++ b/customers.php
@ -0,0 +1,83 @@
+<?php
+require_once __DIR__ . '/header.php';
+
+$customers = [];
+try {
+    $stmt = db()->query("SELECT * FROM customers ORDER BY name ASC");
+    $customers = $stmt->fetchAll();
+} catch (PDOException $e) {
+    // Handle error
+}
+?>
+
+<div class="container">
+    <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem;">
+        <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">Managed Customers</h2>
+            <p style="color: var(--text-muted); font-size: 0.875rem;">List of all customers and their current status.</p>
+        </div>
+        <a href="add_customer.php" class="btn btn-primary">
+            <i class="bi bi-person-plus" style="margin-right: 0.5rem;"></i> Add Customer
+        </a>
+    </div>
+
+    <div class="card">
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>Customer Name</th>
+                    <th>Email</th>
+                    <th>Status</th>
+                    <th>Onboarding Progress</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php if (empty($customers)): ?>
+                <tr>
+                    <td colspan="5" style="text-align: center; color: var(--text-muted); padding: 4rem;">
+                        No customers found. <a href="add_customer.php" style="color: var(--primary);">Add your first customer.</a>
+                    </td>
+                </tr>
+                <?php else: ?>
+                    <?php foreach ($customers as $customer): ?>
+                    <tr>
+                        <td style="font-weight: 600;"><?php echo htmlspecialchars($customer['name']); ?></td>
+                        <td><?php echo htmlspecialchars($customer['contact_email'] ?? 'N/A'); ?></td>
+                        <td><span class="badge badge-<?php echo $customer['status']; ?>"><?php echo $customer['status']; ?></span></td>
+                        <td>
+                            <?php 
+                            $progress = 0;
+                            try {
+                                $stmt = db()->prepare("SELECT COUNT(*) as total, SUM(CASE WHEN is_completed = 1 THEN 1 ELSE 0 END) as completed FROM onboarding_tasks WHERE customer_id = ?");
+                                $stmt->execute([$customer['id']]);
+                                $row = $stmt->fetch();
+                                if ($row && $row['total'] > 0) {
+                                    $progress = round(($row['completed'] / $row['total']) * 100);
+                                }
+                            } catch (PDOException $e) {}
+                            ?>
+                            <div style="width: 100px; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle;">
+                                <div style="width: <?php echo (int)$progress; ?>%; height: 100%; background: var(--success);"></div>
+                            </div>
+                            <span style="font-size: 0.75rem; margin-left: 0.5rem; font-weight: 600;"><?php echo (int)$progress; ?>%</span>
+                        </td>
+                        <td>
+                            <div style="display: flex; gap: 0.5rem;">
+                                <a href="onboarding.php?id=<?php echo $customer['id']; ?>" class="btn btn-outline" style="padding: 0.25rem 0.5rem;" title="View Onboarding">
+                                    <i class="bi bi-list-check"></i>
+                                </a>
+                                <a href="#" class="btn btn-outline" style="padding: 0.25rem 0.5rem;" title="Edit Details">
+                                    <i class="bi bi-pencil-square"></i>
+                                </a>
+                            </div>
+                        </td>
+                    </tr>
+                    <?php endforeach; ?>
+                <?php endif; ?>
+            </tbody>
+        </table>
+    </div>
+</div>
+
+<?php require_once __DIR__ . '/footer.php'; ?>
--- a/db/migrations_001.sql
+++ b/db/migrations_001.sql
@ -0,0 +1,15 @@
+CREATE TABLE IF NOT EXISTS customers (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    name VARCHAR(255) NOT NULL,
+    contact_email VARCHAR(255),
+    status ENUM('onboarding', 'active', 'inactive') DEFAULT 'onboarding',
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+
+CREATE TABLE IF NOT EXISTS onboarding_tasks (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    customer_id INT NOT NULL,
+    task_name VARCHAR(255) NOT NULL,
+    is_completed BOOLEAN DEFAULT FALSE,
+    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--- a/db/setup.php
+++ b/db/setup.php
@ -0,0 +1,10 @@
+<?php
+require_once __DIR__ . '/config.php';
+
+try {
+    $sql = file_get_contents(__DIR__ . '/migrations_001.sql');
+    db()->exec($sql);
+    echo "Database setup successful.";
+} catch (PDOException $e) {
+    echo "Error setting up database: " . $e->getMessage();
+}
--- a/footer.php
+++ b/footer.php
@ -0,0 +1,8 @@
+    <footer class="container" style="text-align: center; color: var(--text-muted); font-size: 0.75rem; margin-top: 4rem; padding-bottom: 2rem;">
+        &copy; <?php echo date('Y'); ?> MSP Connect Platform. All rights reserved. 
+        <br>
+        <span style="opacity: 0.5;">v1.0.0-beta | Powered by LAMP</span>
+    </footer>
+    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
+</body>
+</html>
--- a/header.php
+++ b/header.php
@ -0,0 +1,54 @@
+<?php
+require_once __DIR__ . '/db/config.php';
+$current_page = basename($_SERVER['PHP_SELF']);
+
+// Read project preview data from environment
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'MSP Customer Success Platform for onboarding and management.';
+$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MSP Connect | Customer Success Platform</title>
+    
+    <?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;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+</head>
+<body>
+    <nav class="navbar">
+        <a href="index.php" class="navbar-brand">
+            <i class="bi bi-shield-check"></i> MSP Connect
+        </a>
+        <div class="nav-links">
+            <a href="index.php" class="nav-link <?php echo $current_page == 'index.php' ? 'active' : ''; ?>">Dashboard</a>
+            <a href="customers.php" class="nav-link <?php echo $current_page == 'customers.php' ? 'active' : ''; ?>">Customers</a>
+            <a href="#" class="nav-link">QBRs</a>
+            <a href="#" class="nav-link">Tickets</a>
+            <a href="#" class="nav-link">Integrations</a>
+        </div>
+        <div>
+            <span style="font-size: 0.875rem; color: var(--text-muted); margin-right: 1rem;">Admin</span>
+            <a href="#" class="btn btn-outline" style="padding: 0.25rem 0.5rem;"><i class="bi bi-person-circle"></i></a>
+        </div>
+    </nav>
--- a/index.php
+++ b/index.php
@ -1,150 +1,138 @@
 <?php
-declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once __DIR__ . '/header.php';

-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+// Fetch some stats
+$stats = [
+    'total_customers' => 0,
+    'active_onboarding' => 0,
+    'qbrs_scheduled' => 4,
+    'open_tickets' => 12
+];
+
+try {
+    $stmt = db()->query("SELECT COUNT(*) FROM customers");
+    $stats['total_customers'] = $stmt->fetchColumn();
+
+    $stmt = db()->query("SELECT COUNT(*) FROM customers WHERE status = 'onboarding'");
+    $stats['active_onboarding'] = $stmt->fetchColumn();
+} catch (PDOException $e) {
+    // Handle error gracefully
+}
+
+// Fetch recent customers
+$recent_customers = [];
+try {
+    $stmt = db()->query("SELECT * FROM customers ORDER BY created_at DESC LIMIT 5");
+    $recent_customers = $stmt->fetchAll();
+} catch (PDOException $e) {
+    // Handle error
+}
 ?>
-<!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 class="container">
+    <div style="margin-bottom: 2rem;">
+        <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">MSP Operations Dashboard</h2>
+        <p style="color: var(--text-muted); font-size: 0.875rem;">Welcome back, Admin. Here's what's happening today.</p>
    </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
-</body>
-</html>
+
+    <div class="stats-grid">
+        <div class="stat-card">
+            <div class="stat-label">Total Customers</div>
+            <div class="stat-value"><?php echo (int)$stats['total_customers']; ?></div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-label">Active Onboarding</div>
+            <div class="stat-value" style="color: var(--primary);"><?php echo (int)$stats['active_onboarding']; ?></div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-label">QBRs This Quarter</div>
+            <div class="stat-value"><?php echo (int)$stats['qbrs_scheduled']; ?></div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-label">Open Support Tickets</div>
+            <div class="stat-value" style="color: var(--danger);"><?php echo (int)$stats['open_tickets']; ?></div>
+        </div>
+    </div>
+
+    <div class="card">
+        <div class="card-title">
+            <span>Recent Customers</span>
+            <a href="customers.php" class="btn btn-outline">View All</a>
+        </div>
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>Customer Name</th>
+                    <th>Email Address</th>
+                    <th>Status</th>
+                    <th>Added On</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php if (empty($recent_customers)): ?>
+                <tr>
+                    <td colspan="5" style="text-align: center; color: var(--text-muted); padding: 2rem;">
+                        <i class="bi bi-inbox" style="font-size: 2rem; display: block; margin-bottom: 1rem;"></i>
+                        No customers added yet. <a href="add_customer.php" style="color: var(--primary);">Add your first customer.</a>
+                    </td>
+                </tr>
+                <?php else: ?>
+                    <?php foreach ($recent_customers as $customer): ?>
+                    <tr>
+                        <td style="font-weight: 600;"><?php echo htmlspecialchars($customer['name']); ?></td>
+                        <td><?php echo htmlspecialchars($customer['contact_email'] ?? 'N/A'); ?></td>
+                        <td><span class="badge badge-<?php echo $customer['status']; ?>"><?php echo $customer['status']; ?></span></td>
+                        <td><?php echo date('M d, Y', strtotime($customer['created_at'])); ?></td>
+                        <td>
+                            <?php if ($customer['status'] == 'onboarding'): ?>
+                                <a href="onboarding.php?id=<?php echo $customer['id']; ?>" class="btn btn-outline" style="padding: 0.25rem 0.5rem;">
+                                    Onboarding
+                                </a>
+                            <?php else: ?>
+                                <a href="#" class="btn btn-outline" style="padding: 0.25rem 0.5rem;">Details</a>
+                            <?php endif; ?>
+                        </td>
+                    </tr>
+                    <?php endforeach; ?>
+                <?php endif; ?>
+            </tbody>
+        </table>
+    </div>
+
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
+        <div class="card">
+            <div class="card-title">Quick Actions</div>
+            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+                <a href="add_customer.php" class="btn btn-primary" style="justify-content: flex-start;">
+                    <i class="bi bi-person-plus" style="margin-right: 0.75rem;"></i> Onboard New Customer
+                </a>
+                <button class="btn btn-outline" style="justify-content: flex-start;">
+                    <i class="bi bi-calendar-event" style="margin-right: 0.75rem;"></i> Schedule QBR Meeting
+                </button>
+                <button class="btn btn-outline" style="justify-content: flex-start;">
+                    <i class="bi bi-ticket-perforated" style="margin-right: 0.75rem;"></i> Create Internal Ticket
+                </button>
+            </div>
+        </div>
+        <div class="card">
+            <div class="card-title">Integration Status</div>
+            <div style="display: flex; flex-direction: column; gap: 0.75rem;">
+                <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem;">
+                    <span>ConnectWise PSA</span>
+                    <span style="color: var(--success);"><i class="bi bi-check-circle-fill"></i> Connected</span>
+                </div>
+                <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem;">
+                    <span>Microsoft 365</span>
+                    <span style="color: var(--success);"><i class="bi bi-check-circle-fill"></i> Connected</span>
+                </div>
+                <div style="display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem;">
+                    <span>Datto RMM</span>
+                    <span style="color: var(--warning);"><i class="bi bi-exclamation-triangle"></i> Configure</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<?php require_once __DIR__ . '/footer.php'; ?>
--- a/onboarding.php
+++ b/onboarding.php
@ -0,0 +1,163 @@
+<?php
+require_once __DIR__ . '/header.php';
+
+$customer_id = $_GET['id'] ?? null;
+
+if (!$customer_id) {
+    echo "<div class='container' style='text-align: center; margin-top: 5rem;'><h3 style='color: var(--danger);'>Customer Not Found</h3><a href='customers.php' class='btn btn-outline'>Back to Customer List</a></div>";
+    require_once __DIR__ . '/footer.php';
+    exit;
+}
+
+// Fetch customer
+$customer = null;
+try {
+    $stmt = db()->prepare("SELECT * FROM customers WHERE id = ?");
+    $stmt->execute([$customer_id]);
+    $customer = $stmt->fetch();
+} catch (PDOException $e) {}
+
+if (!$customer) {
+    echo "<div class='container' style='text-align: center; margin-top: 5rem;'><h3 style='color: var(--danger);'>Customer Not Found</h3><a href='customers.php' class='btn btn-outline'>Back to Customer List</a></div>";
+    require_once __DIR__ . '/footer.php';
+    exit;
+}
+
+// Fetch tasks
+$tasks = [];
+try {
+    $stmt = db()->prepare("SELECT * FROM onboarding_tasks WHERE customer_id = ? ORDER BY id ASC");
+    $stmt->execute([$customer_id]);
+    $tasks = $stmt->fetchAll();
+} catch (PDOException $e) {}
+
+// Calculate progress
+$total_tasks = count($tasks);
+$completed_tasks = count(array_filter($tasks, function($t) { return $t['is_completed']; }));
+$progress = $total_tasks > 0 ? round(($completed_tasks / $total_tasks) * 100) : 0;
+?>
+
+<div class="container" style="max-width: 800px;">
+    <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem;">
+        <div>
+            <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">Onboarding Checklist: <?php echo htmlspecialchars($customer['name']); ?></h2>
+            <p style="color: var(--text-muted); font-size: 0.875rem;">Manage and track setup tasks for this customer.</p>
+        </div>
+        <a href="customers.php" class="btn btn-outline">
+            <i class="bi bi-arrow-left" style="margin-right: 0.5rem;"></i> Back to List
+        </a>
+    </div>
+
+    <div class="stats-grid">
+        <div class="stat-card" style="grid-column: span 1 / -1;">
+            <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 0.5rem;">
+                <div class="stat-label">Overall Onboarding Progress</div>
+                <div class="stat-value" style="font-size: 1.25rem;"><?php echo (int)$progress; ?>%</div>
+            </div>
+            <div style="width: 100%; height: 12px; background: #e2e8f0; border-radius: 6px; overflow: hidden;">
+                <div id="progress-bar" style="width: <?php echo (int)$progress; ?>%; height: 100%; background: var(--success); transition: width 0.3s ease;"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card">
+        <div class="card-title">Tasks & Milestones</div>
+        <div id="tasks-list">
+            <?php foreach ($tasks as $task): ?>
+            <div class="checklist-item <?php echo $task['is_completed'] ? 'completed' : ''; ?>" data-id="<?php echo $task['id']; ?>">
+                <input type="checkbox" class="task-checkbox" <?php echo $task['is_completed'] ? 'checked' : ''; ?> data-task-id="<?php echo $task['id']; ?>">
+                <span style="flex: 1; font-weight: 500;"><?php echo htmlspecialchars($task['task_name']); ?></span>
+                <?php if ($task['is_completed']): ?>
+                    <span style="font-size: 0.75rem; color: var(--text-muted);"><?php echo date('M d, Y', strtotime($task['updated_at'])); ?></span>
+                <?php endif; ?>
+            </div>
+            <?php endforeach; ?>
+        </div>
+    </div>
+
+    <div style="display: flex; gap: 1rem; margin-top: 2rem;">
+        <?php if ($progress === 100 && $customer['status'] === 'onboarding'): ?>
+            <button id="mark-active" class="btn btn-primary" style="flex: 1;" data-id="<?php echo $customer['id']; ?>">
+                <i class="bi bi-person-check" style="margin-right: 0.75rem;"></i> Complete Onboarding & Mark Active
+            </button>
+        <?php endif; ?>
+        <button class="btn btn-outline" style="flex: 1;" onclick="window.print()">
+            <i class="bi bi-printer" style="margin-right: 0.75rem;"></i> Print Summary
+        </button>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const checkboxes = document.querySelectorAll('.task-checkbox');
+    const progressBar = document.getElementById('progress-bar');
+    const progressText = document.querySelector('.stat-value');
+
+    checkboxes.forEach(checkbox => {
+        checkbox.addEventListener('change', function() {
+            const taskId = this.dataset.taskId;
+            const completed = this.checked ? 1 : 0;
+            const item = this.closest('.checklist-item');
+
+            if (completed) {
+                item.classList.add('completed');
+            } else {
+                item.classList.remove('completed');
+            }
+
+            // Update database via AJAX
+            fetch('api/update_task.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: `id=${taskId}&completed=${completed}`
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    // Update progress bar
+                    const total = checkboxes.length;
+                    const completedCount = document.querySelectorAll('.task-checkbox:checked').length;
+                    const newProgress = Math.round((completedCount / total) * 100);
+                    progressBar.style.width = `${newProgress}%`;
+                    progressText.textContent = `${newProgress}%`;
+
+                    // Show toast if 100%
+                    if (newProgress === 100) {
+                        alert('Onboarding checklist complete! You can now mark this customer as Active.');
+                        location.reload(); // To show the "Mark Active" button
+                    }
+                } else {
+                    alert('Error updating task: ' + data.message);
+                }
+            });
+        });
+    });
+
+    const markActiveBtn = document.getElementById('mark-active');
+    if (markActiveBtn) {
+        markActiveBtn.addEventListener('click', function() {
+            const customerId = this.dataset.id;
+            fetch('api/update_customer_status.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: `id=${customerId}&status=active`
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert('Customer is now active!');
+                    window.location.href = 'customers.php';
+                } else {
+                    alert('Error: ' + data.message);
+                }
+            });
+        });
+    }
+});
+</script>
+
+<?php require_once __DIR__ . '/footer.php'; ?>