diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..0e5af3d
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,140 @@
+:root {
+    --primary: #0f172a;
+    --primary-light: #1e293b;
+    --accent: #3b82f6;
+    --bg: #f8fafc;
+    --surface: #ffffff;
+    --text: #334155;
+    --text-muted: #64748b;
+    --border: #e2e8f0;
+    --radius: 4px;
+    --sidebar-width: 250px;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    background-color: var(--bg);
+    color: var(--text);
+    margin: 0;
+    overflow-x: hidden;
+}
+
+[dir="rtl"] {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Sidebar */
+.sidebar {
+    width: var(--sidebar-width);
+    height: 100vh;
+    background-color: var(--primary);
+    color: white;
+    position: fixed;
+    top: 0;
+    transition: all 0.3s;
+    z-index: 1000;
+}
+
+[dir="ltr"] .sidebar { left: 0; }
+[dir="rtl"] .sidebar { right: 0; }
+
+.sidebar-header {
+    padding: 1.5rem;
+    font-size: 1.25rem;
+    font-weight: 700;
+    border-bottom: 1px solid var(--primary-light);
+}
+
+.nav-link {
+    color: #cbd5e1;
+    padding: 0.75rem 1.5rem;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    transition: background 0.2s;
+}
+
+.nav-link:hover, .nav-link.active {
+    background-color: var(--primary-light);
+    color: white;
+}
+
+.nav-link i {
+    width: 20px;
+    margin-right: 10px;
+}
+
+.nav-section-title {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: #64748b !important;
+    letter-spacing: 0.05em;
+}
+
+[dir="rtl"] .nav-link i {
+    margin-right: 0;
+    margin-left: 10px;
+}
+
+/* Main Content */
+.main-content {
+    margin-left: var(--sidebar-width);
+    padding: 2rem;
+    transition: all 0.3s;
+}
+
+[dir="rtl"] .main-content {
+    margin-left: 0;
+    margin-right: var(--sidebar-width);
+}
+
+.topbar {
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+    padding: 1rem 2rem;
+    margin: -2rem -2rem 2rem -2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* UI Components */
+.card {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.btn-primary {
+    background-color: var(--accent);
+    border: none;
+    border-radius: var(--radius);
+}
+
+.table {
+    color: var(--text);
+}
+
+.table th {
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    letter-spacing: 0.05em;
+    border-bottom: 2px solid var(--border);
+}
+
+/* RTL Adjustments */
+[dir="rtl"] .ms-auto {
+    margin-right: auto !important;
+    margin-left: 0 !important;
+}
+
+[dir="rtl"] .text-end {
+    text-align: left !important;
+}
+
+[dir="rtl"] .text-start {
+    text-align: right !important;
+}
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..d809544
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,30 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const langToggle = document.getElementById('langToggle');
+    
+    // Check for saved language
+    const currentLang = localStorage.getItem('lang') || 'en';
+    setLanguage(currentLang);
+
+    if (langToggle) {
+        langToggle.addEventListener('click', function() {
+            const newLang = document.documentElement.lang === 'en' ? 'ar' : 'en';
+            setLanguage(newLang);
+        });
+    }
+});
+
+function setLanguage(lang) {
+    document.documentElement.lang = lang;
+    document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
+    localStorage.setItem('lang', lang);
+    
+    // Update UI text
+    document.querySelectorAll('[data-en]').forEach(el => {
+        el.textContent = el.getAttribute(`data-${lang}`);
+    });
+
+    // Update buttons/inputs
+    document.querySelectorAll('input[data-en-placeholder]').forEach(el => {
+        el.placeholder = el.getAttribute(`data-${lang}-placeholder`);
+    });
+}
diff --git a/db/migrations/20260216_add_stock_tables.sql b/db/migrations/20260216_add_stock_tables.sql
new file mode 100644
index 0000000..95995ef
--- /dev/null
+++ b/db/migrations/20260216_add_stock_tables.sql
@@ -0,0 +1,30 @@
+CREATE TABLE IF NOT EXISTS stock_categories (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    name_en VARCHAR(255) NOT NULL,
+    name_ar VARCHAR(255) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS stock_units (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    name_en VARCHAR(255) NOT NULL,
+    name_ar VARCHAR(255) NOT NULL,
+    short_name_en VARCHAR(50) NOT NULL,
+    short_name_ar VARCHAR(50) NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE IF NOT EXISTS stock_items (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    category_id INT,
+    unit_id INT,
+    name_en VARCHAR(255) NOT NULL,
+    name_ar VARCHAR(255) NOT NULL,
+    sku VARCHAR(100) UNIQUE,
+    purchase_price DECIMAL(15, 2) DEFAULT 0.00,
+    sale_price DECIMAL(15, 2) DEFAULT 0.00,
+    stock_quantity DECIMAL(15, 2) DEFAULT 0.00,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (category_id) REFERENCES stock_categories(id) ON DELETE SET NULL,
+    FOREIGN KEY (unit_id) REFERENCES stock_units(id) ON DELETE SET NULL
+);
diff --git a/index.php b/index.php
index 7205f3d..49d8844 100644
--- a/index.php
+++ b/index.php
@@ -1,150 +1,681 @@
 <?php
 declare(strict_types=1);
-@ini_set('display_errors', '1');
-@error_reporting(E_ALL);
-@date_default_timezone_set('UTC');
+require_once 'db/config.php';
 
-$phpVersion = PHP_VERSION;
-$now = date('Y-m-d H:i:s');
+// Handle POST Requests
+$message = '';
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    if (isset($_POST['add_customer'])) {
+        $name = $_POST['name'] ?? '';
+        $email = $_POST['email'] ?? '';
+        $phone = $_POST['phone'] ?? '';
+        $balance = (float)($_POST['balance'] ?? 0);
+        if ($name) {
+            $stmt = db()->prepare("INSERT INTO customers (name, email, phone, balance) VALUES (?, ?, ?, ?)");
+            $stmt->execute([$name, $email, $phone, $balance]);
+            $message = "Customer added successfully!";
+        }
+    }
+
+    if (isset($_POST['add_category'])) {
+        $name_en = $_POST['name_en'] ?? '';
+        $name_ar = $_POST['name_ar'] ?? '';
+        if ($name_en && $name_ar) {
+            $stmt = db()->prepare("INSERT INTO stock_categories (name_en, name_ar) VALUES (?, ?)");
+            $stmt->execute([$name_en, $name_ar]);
+            $message = "Category added successfully!";
+        }
+    }
+
+    if (isset($_POST['add_unit'])) {
+        $name_en = $_POST['name_en'] ?? '';
+        $name_ar = $_POST['name_ar'] ?? '';
+        $short_en = $_POST['short_en'] ?? '';
+        $short_ar = $_POST['short_ar'] ?? '';
+        if ($name_en && $name_ar) {
+            $stmt = db()->prepare("INSERT INTO stock_units (name_en, name_ar, short_name_en, short_name_ar) VALUES (?, ?, ?, ?)");
+            $stmt->execute([$name_en, $name_ar, $short_en, $short_ar]);
+            $message = "Unit added successfully!";
+        }
+    }
+
+    if (isset($_POST['add_item'])) {
+        $cat_id = $_POST['category_id'] ?: null;
+        $unit_id = $_POST['unit_id'] ?: null;
+        $supplier_id = $_POST['supplier_id'] ?: null;
+        $name_en = $_POST['name_en'] ?? '';
+        $name_ar = $_POST['name_ar'] ?? '';
+        $sku = $_POST['sku'] ?? '';
+        $p_price = (float)($_POST['purchase_price'] ?? 0);
+        $s_price = (float)($_POST['sale_price'] ?? 0);
+        $qty = (float)($_POST['stock_quantity'] ?? 0);
+        $min_stock = (float)($_POST['min_stock_level'] ?? 0);
+        $expiry = $_POST['expiry_date'] ?: null;
+        
+        $image_path = null;
+        if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
+            $ext = pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION);
+            $filename = uniqid('item_') . '.' . $ext;
+            $target = 'uploads/items/' . $filename;
+            if (move_uploaded_file($_FILES['image']['tmp_name'], $target)) {
+                $image_path = $target;
+            }
+        }
+
+        if ($name_en && $name_ar) {
+            $stmt = db()->prepare("INSERT INTO stock_items (category_id, unit_id, supplier_id, name_en, name_ar, sku, purchase_price, sale_price, stock_quantity, min_stock_level, expiry_date, image_path) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
+            $stmt->execute([$cat_id, $unit_id, $supplier_id, $name_en, $name_ar, $sku, $p_price, $s_price, $qty, $min_stock, $expiry, $image_path]);
+            $message = "Item added successfully!";
+        }
+    }
+
+    if (isset($_POST['delete_item'])) {
+        $id = (int)$_POST['id'];
+        // Optional: delete image file
+        $item = db()->prepare("SELECT image_path FROM stock_items WHERE id = ?");
+        $item->execute([$id]);
+        $path = $item->fetchColumn();
+        if ($path && file_exists($path)) {
+            unlink($path);
+        }
+        
+        $stmt = db()->prepare("DELETE FROM stock_items WHERE id = ?");
+        $stmt->execute([$id]);
+        $message = "Item deleted successfully!";
+    }
+}
+
+// Routing & Data Fetching
+$page = $_GET['page'] ?? 'dashboard';
+$data = [];
+
+switch ($page) {
+    case 'customers':
+        $data['customers'] = db()->query("SELECT * FROM customers ORDER BY id DESC")->fetchAll();
+        break;
+    case 'categories':
+        $data['categories'] = db()->query("SELECT * FROM stock_categories ORDER BY id DESC")->fetchAll();
+        break;
+    case 'units':
+        $data['units'] = db()->query("SELECT * FROM stock_units ORDER BY id DESC")->fetchAll();
+        break;
+    case 'items':
+        $data['items'] = db()->query("SELECT i.*, c.name_en as cat_en, c.name_ar as cat_ar, u.short_name_en as unit_en, u.short_name_ar as unit_ar, s.name as supplier_name 
+                                      FROM stock_items i 
+                                      LEFT JOIN stock_categories c ON i.category_id = c.id 
+                                      LEFT JOIN stock_units u ON i.unit_id = u.id 
+                                      LEFT JOIN customers s ON i.supplier_id = s.id
+                                      ORDER BY i.id DESC")->fetchAll();
+        $data['categories'] = db()->query("SELECT * FROM stock_categories ORDER BY name_en ASC")->fetchAll();
+        $data['units'] = db()->query("SELECT * FROM stock_units ORDER BY name_en ASC")->fetchAll();
+        $data['suppliers'] = db()->query("SELECT * FROM customers ORDER BY name ASC")->fetchAll();
+        break;
+    default:
+        $data['customers'] = db()->query("SELECT * FROM customers ORDER BY id DESC LIMIT 5")->fetchAll();
+        $data['categories'] = db()->query("SELECT * FROM stock_categories ORDER BY name_en ASC")->fetchAll();
+        $data['units'] = db()->query("SELECT * FROM stock_units ORDER BY name_en ASC")->fetchAll();
+        $data['suppliers'] = db()->query("SELECT * FROM customers ORDER BY name ASC")->fetchAll();
+        // Dashboard stats
+        $data['stats'] = [
+            'total_customers' => db()->query("SELECT COUNT(*) FROM customers")->fetchColumn(),
+            'total_items' => db()->query("SELECT COUNT(*) FROM stock_items")->fetchColumn(),
+        ];
+        break;
+}
+
+$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? 'Accounting System';
 ?>
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
 <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>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title data-en="Accounting Admin" data-ar="لوحة التحكم المحاسبية">Accounting Admin</title>
+    <meta name="description" content="<?= htmlspecialchars($projectDescription) ?>" />
+    
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="assets/css/custom.css?v=<?= time() ?>">
 </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="sidebar">
+    <div class="sidebar-header" data-en="Accounting" data-ar="المحاسبة">Accounting</div>
+    <nav class="mt-4">
+        <a href="index.php?page=dashboard" class="nav-link <?= !isset($_GET['page']) || $_GET['page'] === 'dashboard' ? 'active' : '' ?>">
+            <i class="bi bi-speedometer2"></i> <span data-en="Dashboard" data-ar="لوحة القيادة">Dashboard</span>
+        </a>
+        <a href="index.php?page=customers" class="nav-link <?= isset($_GET['page']) && $_GET['page'] === 'customers' ? 'active' : '' ?>">
+            <i class="bi bi-people"></i> <span data-en="Customers" data-ar="العملاء">Customers</span>
+        </a>
+        
+        <div class="nav-section-title px-4 mt-3 mb-1 text-uppercase small text-muted" data-en="Stock Management" data-ar="إدارة المخزون">Stock Management</div>
+        <a href="index.php?page=categories" class="nav-link <?= isset($_GET['page']) && $_GET['page'] === 'categories' ? 'active' : '' ?>">
+            <i class="bi bi-tags"></i> <span data-en="Categories" data-ar="الفئات">Categories</span>
+        </a>
+        <a href="index.php?page=units" class="nav-link <?= isset($_GET['page']) && $_GET['page'] === 'units' ? 'active' : '' ?>">
+            <i class="bi bi-calculator"></i> <span data-en="Units" data-ar="الوحدات">Units</span>
+        </a>
+        <a href="index.php?page=items" class="nav-link <?= isset($_GET['page']) && $_GET['page'] === 'items' ? 'active' : '' ?>">
+            <i class="bi bi-box-seam"></i> <span data-en="Items" data-ar="الأصناف">Items</span>
+        </a>
+
+        <div class="nav-section-title px-4 mt-3 mb-1 text-uppercase small text-muted" data-en="Other" data-ar="أخرى">Other</div>
+        <a href="#" class="nav-link">
+            <i class="bi bi-truck"></i> <span data-en="Suppliers" data-ar="الموردون">Suppliers</span>
+        </a>
+        <a href="#" class="nav-link">
+            <i class="bi bi-cart"></i> <span data-en="Sales" data-ar="المبيعات">Sales</span>
+        </a>
+        <a href="#" class="nav-link">
+            <i class="bi bi-wallet2"></i> <span data-en="Expenses" data-ar="المصروفات">Expenses</span>
+        </a>
+        <a href="#" class="nav-link">
+            <i class="bi bi-person-badge"></i> <span data-en="HR" data-ar="الموارد البشرية">HR</span>
+        </a>
+    </nav>
+</div>
+
+<div class="main-content">
+    <header class="topbar">
+        <h4 class="m-0">
+            <?php 
+            $titles = [
+                'dashboard' => ['en' => 'Dashboard', 'ar' => 'لوحة القيادة'],
+                'customers' => ['en' => 'Customers', 'ar' => 'العملاء'],
+                'categories' => ['en' => 'Stock Categories', 'ar' => 'فئات المخزون'],
+                'units' => ['en' => 'Stock Units', 'ar' => 'وحدات المخزون'],
+                'items' => ['en' => 'Stock Items', 'ar' => 'أصناف المخزون'],
+            ];
+            $currTitle = $titles[$page] ?? $titles['dashboard'];
+            ?>
+            <span data-en="<?= $currTitle['en'] ?>" data-ar="<?= $currTitle['ar'] ?>"><?= $currTitle['en'] ?></span>
+        </h4>
+        <div class="d-flex align-items-center">
+            <button id="langToggle" class="btn btn-outline-secondary btn-sm me-3">
+                <i class="bi bi-translate"></i> <span data-en="العربية" data-ar="English">العربية</span>
+            </button>
+            <div class="dropdown">
+                <button class="btn btn-link dropdown-toggle text-dark text-decoration-none" type="button" data-bs-toggle="dropdown">
+                    <i class="bi bi-person-circle"></i> Admin
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end">
+                    <li><a class="dropdown-item" href="#" data-en="Profile" data-ar="الملف الشخصي">Profile</a></li>
+                    <li><hr class="dropdown-divider"></li>
+                    <li><a class="dropdown-item" href="#" data-en="Logout" data-ar="تسجيل الخروج">Logout</a></li>
+                </ul>
+            </div>
+        </div>
+    </header>
+
+    <?php if ($message): ?>
+        <div class="alert alert-success alert-dismissible fade show" role="alert">
+            <?= $message ?>
+            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+        </div>
+    <?php endif; ?>
+
+    <?php if ($page === 'dashboard'): ?>
+    <div class="row g-4 mb-4">
+        <div class="col-md-3">
+            <div class="card p-3 border-start border-primary border-4">
+                <div class="text-muted small" data-en="Total Sales" data-ar="إجمالي المبيعات">Total Sales</div>
+                <div class="h4 m-0">$24,500</div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card p-3 border-start border-success border-4">
+                <div class="text-muted small" data-en="Total Customers" data-ar="إجمالي العملاء">Total Customers</div>
+                <div class="h4 m-0"><?= $data['stats']['total_customers'] ?></div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card p-3 border-start border-info border-4">
+                <div class="text-muted small" data-en="Total Items" data-ar="إجمالي الأصناف">Total Items</div>
+                <div class="h4 m-0"><?= $data['stats']['total_items'] ?></div>
+            </div>
+        </div>
+        <div class="col-md-3">
+            <div class="card p-3 border-start border-warning border-4">
+                <div class="text-muted small" data-en="Net Profit" data-ar="صافي الربح">Net Profit</div>
+                <div class="h4 m-0">$20,300</div>
+            </div>
+        </div>
     </div>
-  </main>
-  <footer>
-    Page updated: <?= htmlspecialchars($now) ?> (UTC)
-  </footer>
+
+    <div class="row">
+        <div class="col-md-8">
+            <div class="card p-4">
+                <div class="d-flex justify-content-between align-items-center mb-4">
+                    <h5 class="m-0" data-en="Recent Customers" data-ar="العملاء الحاليين">Recent Customers</h5>
+                    <a href="index.php?page=customers" class="btn btn-outline-primary btn-sm">
+                        <span data-en="View All" data-ar="عرض الكل">View All</span>
+                    </a>
+                </div>
+                <div class="table-responsive">
+                    <table class="table table-hover align-middle">
+                        <thead>
+                            <tr>
+                                <th data-en="Name" data-ar="الاسم">Name</th>
+                                <th data-en="Phone" data-ar="الهاتف">Phone</th>
+                                <th data-en="Balance" data-ar="الرصيد" class="text-end">Balance</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <?php foreach ($data['customers'] as $c): ?>
+                            <tr>
+                                <td><?= htmlspecialchars($c['name']) ?></td>
+                                <td><?= htmlspecialchars($c['phone']) ?></td>
+                                <td class="text-end">$<?= number_format((float)$c['balance'], 2) ?></td>
+                            </tr>
+                            <?php endforeach; ?>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-4">
+            <div class="card p-4">
+                <h5 class="mb-4" data-en="Quick Links" data-ar="روابط سريعة">Quick Links</h5>
+                <div class="list-group list-group-flush">
+                    <button class="list-group-item list-group-item-action border-0 px-0" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
+                        <i class="bi bi-person-plus text-primary"></i> <span data-en="Add Customer" data-ar="إضافة عميل">Add Customer</span>
+                    </button>
+                    <button class="list-group-item list-group-item-action border-0 px-0" data-bs-toggle="modal" data-bs-target="#addItemModal">
+                        <i class="bi bi-box-seam text-success"></i> <span data-en="Add Item" data-ar="إضافة صنف">Add Item</span>
+                    </button>
+                    <button class="list-group-item list-group-item-action border-0 px-0">
+                        <i class="bi bi-receipt text-warning"></i> <span data-en="Create Invoice" data-ar="إنشاء فاتورة">Create Invoice</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <?php elseif ($page === 'customers'): ?>
+    <div class="card p-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h5 class="m-0" data-en="Customer Management" data-ar="إدارة العملاء">Customer Management</h5>
+            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
+                <i class="bi bi-plus-lg"></i> <span data-en="Add Customer" data-ar="إضافة عميل">Add Customer</span>
+            </button>
+        </div>
+        <div class="table-responsive">
+            <table class="table table-hover align-middle">
+                <thead>
+                    <tr>
+                        <th data-en="Name" data-ar="الاسم">Name</th>
+                        <th data-en="Email" data-ar="البريد">Email</th>
+                        <th data-en="Phone" data-ar="الهاتف">Phone</th>
+                        <th data-en="Balance" data-ar="الرصيد" class="text-end">Balance</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php foreach ($data['customers'] as $c): ?>
+                    <tr>
+                        <td><?= htmlspecialchars($c['name']) ?></td>
+                        <td><?= htmlspecialchars($c['email']) ?></td>
+                        <td><?= htmlspecialchars($c['phone']) ?></td>
+                        <td class="text-end">$<?= number_format((float)$c['balance'], 2) ?></td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <?php elseif ($page === 'categories'): ?>
+    <div class="card p-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h5 class="m-0" data-en="Stock Categories" data-ar="فئات المخزون">Stock Categories</h5>
+            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
+                <i class="bi bi-plus-lg"></i> <span data-en="Add Category" data-ar="إضافة فئة">Add Category</span>
+            </button>
+        </div>
+        <div class="table-responsive">
+            <table class="table table-hover align-middle">
+                <thead>
+                    <tr>
+                        <th data-en="ID" data-ar="المعرف">ID</th>
+                        <th data-en="Name (EN)" data-ar="الاسم (إنجليزي)">Name (EN)</th>
+                        <th data-en="Name (AR)" data-ar="الاسم (عربي)">Name (AR)</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php foreach ($data['categories'] as $cat): ?>
+                    <tr>
+                        <td><?= $cat['id'] ?></td>
+                        <td><?= htmlspecialchars($cat['name_en']) ?></td>
+                        <td><?= htmlspecialchars($cat['name_ar']) ?></td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <?php elseif ($page === 'units'): ?>
+    <div class="card p-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h5 class="m-0" data-en="Stock Units" data-ar="وحدات المخزون">Stock Units</h5>
+            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUnitModal">
+                <i class="bi bi-plus-lg"></i> <span data-en="Add Unit" data-ar="إضافة وحدة">Add Unit</span>
+            </button>
+        </div>
+        <div class="table-responsive">
+            <table class="table table-hover align-middle">
+                <thead>
+                    <tr>
+                        <th data-en="Name (EN)" data-ar="الاسم (إنجليزي)">Name (EN)</th>
+                        <th data-en="Short (EN)" data-ar="الاختصار (إنجليزي)">Short (EN)</th>
+                        <th data-en="Name (AR)" data-ar="الاسم (عربي)">Name (AR)</th>
+                        <th data-en="Short (AR)" data-ar="الاختصار (عربي)">Short (AR)</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php foreach ($data['units'] as $u): ?>
+                    <tr>
+                        <td><?= htmlspecialchars($u['name_en']) ?></td>
+                        <td><?= htmlspecialchars($u['short_name_en']) ?></td>
+                        <td><?= htmlspecialchars($u['name_ar']) ?></td>
+                        <td><?= htmlspecialchars($u['short_name_ar']) ?></td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <?php elseif ($page === 'items'): ?>
+    <div class="card p-4">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h5 class="m-0" data-en="Stock Items" data-ar="أصناف المخزون">Stock Items</h5>
+            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addItemModal">
+                <i class="bi bi-plus-lg"></i> <span data-en="Add Item" data-ar="إضافة صنف">Add Item</span>
+            </button>
+        </div>
+        <div class="table-responsive">
+            <table class="table table-hover align-middle">
+                <thead>
+                    <tr>
+                        <th data-en="Image" data-ar="الصورة">Image</th>
+                        <th data-en="SKU" data-ar="الباركود">SKU</th>
+                        <th data-en="Name" data-ar="الاسم">Name</th>
+                        <th data-en="Category" data-ar="الفئة">Category</th>
+                        <th data-en="Supplier" data-ar="المورد">Supplier</th>
+                        <th data-en="Stock Level" data-ar="المخزون">Stock Level</th>
+                        <th data-en="Expiry" data-ar="تاريخ الانتهاء">Expiry</th>
+                        <th data-en="Actions" data-ar="الإجراءات">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <?php foreach ($data['items'] as $item): ?>
+                    <tr>
+                        <td>
+                            <?php if ($item['image_path']): ?>
+                                <img src="<?= htmlspecialchars($item['image_path']) ?>" alt="item" style="width: 40px; height: 40px; object-fit: cover;" class="rounded">
+                            <?php else: ?>
+                                <div class="bg-light rounded d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
+                                    <i class="bi bi-image text-muted"></i>
+                                </div>
+                            <?php endif; ?>
+                        </td>
+                        <td><?= htmlspecialchars($item['sku']) ?></td>
+                        <td>
+                            <div class="fw-bold"><?= htmlspecialchars($item['name_en']) ?></div>
+                            <div class="small text-muted"><?= htmlspecialchars($item['name_ar']) ?></div>
+                        </td>
+                        <td><span data-en="<?= htmlspecialchars($item['cat_en']) ?>" data-ar="<?= htmlspecialchars($item['cat_ar']) ?>"><?= htmlspecialchars($item['cat_en']) ?></span></td>
+                        <td><?= htmlspecialchars($item['supplier_name'] ?? '---') ?></td>
+                        <td>
+                            <div class="text-end">
+                                <strong><?= number_format((float)$item['stock_quantity'], 2) ?></strong>
+                                <div class="small text-muted">Min: <?= number_format((float)$item['min_stock_level'], 2) ?></div>
+                                <?php if ($item['stock_quantity'] <= $item['min_stock_level']): ?>
+                                    <span class="badge bg-danger" data-en="Low Stock" data-ar="مخزون منخفض">Low Stock</span>
+                                <?php endif; ?>
+                            </div>
+                        </td>
+                        <td><?= $item['expiry_date'] ?: '---' ?></td>
+                        <td>
+                            <div class="btn-group btn-group-sm">
+                                <button class="btn btn-outline-info" title="View" data-bs-toggle="modal" data-bs-target="#viewItemModal<?= $item['id'] ?>"><i class="bi bi-eye"></i></button>
+                                <button class="btn btn-outline-primary" title="Edit"><i class="bi bi-pencil"></i></button>
+                                <form method="POST" class="d-inline" onsubmit="return confirm('Are you sure?')">
+                                    <input type="hidden" name="id" value="<?= $item['id'] ?>">
+                                    <button type="submit" name="delete_item" class="btn btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
+                                </form>
+                            </div>
+
+                            <!-- View Item Modal -->
+                            <div class="modal fade" id="viewItemModal<?= $item['id'] ?>" tabindex="-1">
+                                <div class="modal-dialog">
+                                    <div class="modal-content border-0 shadow">
+                                        <div class="modal-header">
+                                            <h5 class="modal-title"><?= htmlspecialchars($item['name_en'] ) ?> / <?= htmlspecialchars($item['name_ar']) ?></h5>
+                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                        </div>
+                                        <div class="modal-body text-start">
+                                            <div class="text-center mb-4">
+                                                <?php if ($item['image_path']): ?>
+                                                    <img src="<?= htmlspecialchars($item['image_path']) ?>" class="img-fluid rounded shadow-sm" style="max-height: 200px;">
+                                                <?php else: ?>
+                                                    <div class="bg-light py-5 rounded"><i class="bi bi-image h1 text-muted"></i></div>
+                                                <?php endif; ?>
+                                            </div>
+                                            <div class="row g-3">
+                                                <div class="col-6"><small class="text-muted d-block">SKU</small> <?= htmlspecialchars($item['sku'] ?: '---') ?></div>
+                                                <div class="col-6"><small class="text-muted d-block">Category</small> <?= htmlspecialchars($item['cat_en'] ?: '---') ?></div>
+                                                <div class="col-6"><small class="text-muted d-block">Supplier</small> <?= htmlspecialchars($item['supplier_name'] ?? '---') ?></div>
+                                                <div class="col-6"><small class="text-muted d-block">Unit</small> <?= htmlspecialchars($item['unit_en'] ?: '---') ?></div>
+                                                <div class="col-4"><small class="text-muted d-block">Purchase Price</small> $<?= number_format((float)$item['purchase_price'], 2) ?></div>
+                                                <div class="col-4"><small class="text-muted d-block">Sale Price</small> $<?= number_format((float)$item['sale_price'], 2) ?></div>
+                                                <div class="col-4"><small class="text-muted d-block">Stock</small> <?= number_format((float)$item['stock_quantity'], 2) ?></div>
+                                                <div class="col-6"><small class="text-muted d-block">Min Stock</small> <?= number_format((float)$item['min_stock_level'], 2) ?></div>
+                                                <div class="col-6"><small class="text-muted d-block">Expiry Date</small> <?= $item['expiry_date'] ?: '---' ?></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                    <?php endforeach; ?>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <?php endif; ?>
+</div>
+
+<!-- Add Customer Modal -->
+<div class="modal fade" id="addCustomerModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content border-0 shadow">
+            <div class="modal-header">
+                <h5 class="modal-title" data-en="Add New Customer" data-ar="إضافة عميل جديد">Add New Customer</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <form method="POST">
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label class="form-label" data-en="Customer Name" data-ar="اسم العميل">Customer Name</label>
+                        <input type="text" name="name" class="form-control" required>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" data-en="Email" data-ar="البريد الإلكتروني">Email</label>
+                        <input type="email" name="email" class="form-control">
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" data-en="Phone" data-ar="الهاتف">Phone</label>
+                        <input type="text" name="phone" class="form-control">
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" data-en="Initial Balance" data-ar="الرصيد الافتتاحي">Initial Balance</label>
+                        <input type="number" step="0.01" name="balance" class="form-control" value="0.00">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
+                    <button type="submit" name="add_customer" class="btn btn-primary" data-en="Save Customer" data-ar="حفظ العميل">Save Customer</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- Add Item Modal -->
+<div class="modal fade" id="addItemModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content border-0 shadow">
+            <div class="modal-header">
+                <h5 class="modal-title" data-en="Add New Item" data-ar="إضافة صنف جديد">Add New Item</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <form method="POST" enctype="multipart/form-data">
+                <div class="modal-body">
+                    <div class="row g-3">
+                        <div class="col-md-6">
+                            <label class="form-label" data-en="Name (EN)" data-ar="الاسم (إنجليزي)">Name (EN)</label>
+                            <input type="text" name="name_en" class="form-control" required>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label" data-en="Name (AR)" data-ar="الاسم (عربي)">Name (AR)</label>
+                            <input type="text" name="name_ar" class="form-control" required>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label" data-en="Category" data-ar="الفئة">Category</label>
+                            <select name="category_id" class="form-select">
+                                <option value="">---</option>
+                                <?php foreach ($data['categories'] ?? [] as $c): ?>
+                                <option value="<?= $c['id'] ?>"><?= htmlspecialchars($c['name_en']) ?> / <?= htmlspecialchars($c['name_ar']) ?></option>
+                                <?php endforeach; ?>
+                            </select>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label" data-en="Unit" data-ar="الوحدة">Unit</label>
+                            <select name="unit_id" class="form-select">
+                                <option value="">---</option>
+                                <?php foreach ($data['units'] ?? [] as $u): ?>
+                                <option value="<?= $u['id'] ?>"><?= htmlspecialchars($u['short_name_en']) ?> / <?= htmlspecialchars($u['short_name_ar']) ?></option>
+                                <?php endforeach; ?>
+                            </select>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label" data-en="Supplier" data-ar="المورد">Supplier</label>
+                            <select name="supplier_id" class="form-select">
+                                <option value="">---</option>
+                                <?php foreach ($data['suppliers'] ?? [] as $s): ?>
+                                <option value="<?= $s['id'] ?>"><?= htmlspecialchars($s['name']) ?></option>
+                                <?php endforeach; ?>
+                            </select>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label" data-en="SKU / Barcode" data-ar="الباركود">SKU / Barcode</label>
+                            <input type="text" name="sku" class="form-control">
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label" data-en="Sale Price" data-ar="سعر البيع">Sale Price</label>
+                            <input type="number" step="0.01" name="sale_price" class="form-control" value="0.00">
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label" data-en="Purchase Price" data-ar="سعر الشراء">Purchase Price</label>
+                            <input type="number" step="0.01" name="purchase_price" class="form-control" value="0.00">
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label" data-en="Initial Stock" data-ar="المخزون الحالي">Initial Stock</label>
+                            <input type="number" step="0.01" name="stock_quantity" class="form-control" value="0.00">
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label" data-en="Min Stock Level" data-ar="الحد الأدنى للمخزون">Min Stock Level</label>
+                            <input type="number" step="0.01" name="min_stock_level" class="form-control" value="0.00">
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label" data-en="Expiry Date" data-ar="تاريخ الانتهاء">Expiry Date</label>
+                            <input type="date" name="expiry_date" class="form-control">
+                        </div>
+                        <div class="col-md-4">
+                            <label class="form-label" data-en="Item Picture" data-ar="صورة الصنف">Item Picture</label>
+                            <input type="file" name="image" class="form-control" accept="image/*">
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
+                    <button type="submit" name="add_item" class="btn btn-primary" data-en="Save Item" data-ar="حفظ الصنف">Save Item</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- Add Category Modal -->
+<div class="modal fade" id="addCategoryModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content border-0 shadow">
+            <div class="modal-header">
+                <h5 class="modal-title" data-en="Add Category" data-ar="إضافة فئة">Add Category</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <form method="POST">
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label class="form-label" data-en="Name (EN)" data-ar="الاسم (إنجليزي)">Name (EN)</label>
+                        <input type="text" name="name_en" class="form-control" required>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label" data-en="Name (AR)" data-ar="الاسم (عربي)">Name (AR)</label>
+                        <input type="text" name="name_ar" class="form-control" required>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
+                    <button type="submit" name="add_category" class="btn btn-primary" data-en="Save" data-ar="حفظ">Save</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- Add Unit Modal -->
+<div class="modal fade" id="addUnitModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content border-0 shadow">
+            <div class="modal-header">
+                <h5 class="modal-title" data-en="Add Unit" data-ar="إضافة وحدة">Add Unit</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <form method="POST">
+                <div class="modal-body">
+                    <div class="row g-3">
+                        <div class="col-md-6">
+                            <label class="form-label" data-en="Name (EN)" data-ar="الاسم (إنجليزي)">Name (EN)</label>
+                            <input type="text" name="name_en" class="form-control" required>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label" data-en="Short Name (EN)" data-ar="الاختصار (إنجليزي)">Short (EN)</label>
+                            <input type="text" name="short_en" class="form-control" required placeholder="e.g. Kg">
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label" data-en="Name (AR)" data-ar="الاسم (عربي)">Name (AR)</label>
+                            <input type="text" name="name_ar" class="form-control" required>
+                        </div>
+                        <div class="col-md-6">
+                            <label class="form-label" data-en="Short Name (AR)" data-ar="الاختصار (عربي)">Short (AR)</label>
+                            <input type="text" name="short_ar" class="form-control" required placeholder="مثلاً: كجم">
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Cancel" data-ar="إلغاء">Cancel</button>
+                    <button type="submit" name="add_unit" class="btn btn-primary" data-en="Save" data-ar="حفظ">Save</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<script src="assets/js/main.js?v=<?= time() ?>"></script>
 </body>
 </html>