in this codes (<?php
// public/dashboard.php

// Enable error reporting for debugging (disable in production)
ini_set('display_errors', 0); // Set to 0 in production
ini_set('display_startup_errors', 0); // Set to 0 in production
error_reporting(E_ALL);

// Start output buffering to prevent "headers already sent" errors
ob_start();

// Include authentication and database connection first
require_once '../includes/auth.php';
require_once '../includes/db_connect.php';

// Now include the header
require_once '../includes/header.php';

/**
 * Fetch Quick Stats
 */

// Total Orders
$totalOrdersSql = "SELECT COUNT(*) AS total FROM orders";
$totalOrdersResult = $conn->query($totalOrdersSql);
$totalOrders = ($totalOrdersResult && $row = $totalOrdersResult->fetch_assoc()) ? (int)$row['total'] : 0;

// Pending Orders
$pendingOrdersSql = "SELECT COUNT(*) AS total FROM orders WHERE status = 'Pending'";
$pendingOrdersResult = $conn->query($pendingOrdersSql);
$pendingOrders = ($pendingOrdersResult && $row = $pendingOrdersResult->fetch_assoc()) ? (int)$row['total'] : 0;

// Completed Orders
$completedOrdersSql = "SELECT COUNT(*) AS total FROM orders WHERE status = 'Completed'";
$completedOrdersResult = $conn->query($completedOrdersSql);
$completedOrders = ($completedOrdersResult && $row = $completedOrdersResult->fetch_assoc()) ? (int)$row['total'] : 0;

// Delivered Orders
$deliveredOrdersSql = "SELECT COUNT(*) AS total FROM orders WHERE status = 'Delivered'";
$deliveredOrdersResult = $conn->query($deliveredOrdersSql);
$deliveredOrders = ($deliveredOrdersResult && $row = $deliveredOrdersResult->fetch_assoc()) ? (int)$row['total'] : 0;

// Total Sales from Completed and Delivered Orders considering discounts
$totalSalesSql = "
    SELECT 
        SUM(p.price * oi.quantity * (1 - (oi.discount_percentage / 100))) AS total_sales
    FROM 
        order_items oi
    JOIN 
        products p ON oi.product_id = p.id
    JOIN 
        orders o ON oi.order_id = o.id
    WHERE 
        o.status IN ('Completed', 'Delivered')
";
$totalSalesResult = $conn->query($totalSalesSql);
$totalSales = ($totalSalesResult && $row = $totalSalesResult->fetch_assoc()) ? (float)$row['total_sales'] : 0.00;

/**
 * Fetch Recent Orders
 */

// Fetch the 5 most recent orders
$recentOrdersSql = "
    SELECT 
        o.id AS order_id,
        c.name AS customer_name,
        c.contact,
        c.delivery_address,
        o.status,
        o.order_date,
        o.delivery_datetime,
        GROUP_CONCAT(
            CONCAT(
                p.name, ' - ', p.size, ' (', FORMAT(p.price, 2), ' KD) <br>',
                'Qty: ', oi.quantity, '<br>',
                'Packaging: ', IFNULL(oi.packaging_preferences, 'None'), '<br>',
                'Discount: ', oi.discount_percentage, '%<br>',
                'Reason: ', IFNULL(oi.discount_reason, 'N/A')
            ) SEPARATOR '<hr>'
        ) AS products_details
    FROM 
        orders o
    JOIN 
        customers c ON o.customer_id = c.id
    JOIN 
        order_items oi ON o.id = oi.order_id
    JOIN 
        products p ON oi.product_id = p.id
    GROUP BY 
        o.id
    ORDER BY 
        o.order_date DESC
    LIMIT 5
";

$recentOrdersResult = $conn->query($recentOrdersSql);
$recentOrders = ($recentOrdersResult && $recentOrdersResult->num_rows > 0) ? $recentOrdersResult : false;

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dashboard - Kaak Alia Management System</title>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    
    <!-- Custom Styles -->
    <style>
        
    /* ---------------------------------------------------
       1. CSS Variables for Consistent Design
    ---------------------------------------------------- */
    :root {
        /* Primary Colors */
        --background-color: #FFFFFF; /* Crisp White */
        --light-grey: #F5F5F5;
        --medium-grey: #CCCCCC;
        --dark-grey: #333333;
        --charcoal: #4A4A4A;

        /* Accent Colors */
        --accent-blue: #4A90E2;
        --accent-green: #50C878;
        --accent-red: #FF6B6B;
        --accent-teal: #20B2AA;
        --accent-soft-blue: #A3D2CA;

        /* Text Colors */
        --primary-text: var(--dark-grey);
        --secondary-text: #666666;

        /* UI Elements */
        --input-border: var(--medium-grey);
        --input-focus-border: var(--accent-blue);
        --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        --box-border-radius: 12px;
        --hover-shadow: rgba(0, 0, 0, 0.1);

        /* Button Colors */
        --button-add-order: #6C63FF;
        --button-view-orders: #FFA500;
        --button-manage-products: #20B2AA;
        --button-manage-users: #4B0082;
        --button-generate-reports: #FF6B6B;

        /* Status Badge Colors */
        --badge-pending: #FFD166;
        --badge-in-progress: #6A4C93;
        --badge-completed: #4CAF50;
        --badge-delivered: #20B2AA;
    }

    /* ---------------------------------------------------
       2. Global Styles
    ---------------------------------------------------- */
    body {
        font-family: 'Roboto', sans-serif;
        background-color: var(--light-grey);
        margin: 0;
        padding: 0;
        color: var(--primary-text);
    }

    .container-body {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 20px;
        box-sizing: border-box;
        background-color: var(--background-color);
        box-shadow: var(--box-shadow);
        border-radius: var(--box-border-radius);
        font-family: 'Roboto', sans-serif;
    }

    /* ---------------------------------------------------
       3. Header Styles
    ---------------------------------------------------- */
    .header {
        padding: 20px 30px;
        background-color: var(--background-color);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }

    .header h1 {
        color: var(--charcoal);
        font-size: 28px;
        font-weight: 700;
        font-family: 'Inter', sans-serif;
    }

    /* ---------------------------------------------------
       4. Welcome Section
    ---------------------------------------------------- */
    .welcome-section {
        background-color: var(--background-color);
        box-shadow: var(--box-shadow);
        border-radius: var(--box-border-radius);
        padding: 30px;
        text-align: center;
        margin-bottom: 30px;
        font-family: 'Inter', sans-serif;
    }

    .welcome-section h3 {
        font-size: 22px;
        color: var(--primary-text);
        margin-bottom: 10px;
        font-weight: 600;
    }

    .welcome-section hr {
        width: 60px;
        height: 4px;
        background: linear-gradient(90deg, var(--accent-teal), var(--accent-soft-blue));
        border: none;
        margin: 10px auto;
        border-radius: 2px;
    }

    /* ---------------------------------------------------
       5. Statistics Section
    ---------------------------------------------------- */
    .stats-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 25px;
        margin-bottom: 30px;
    }

    .stat-card {
        background-color: var(--background-color);
        box-shadow: var(--box-shadow);
        border-radius: var(--box-border-radius);
        padding: 20px;
        display: flex;
        align-items: center;
        transition: transform 0.3s, box-shadow 0.3s;
        cursor: default;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .stat-icon {
        font-size: 36px;
        margin-right: 20px;
        color: var(--accent-blue);
    }

    .stat-info h5 {
        font-size: 18px;
        color: var(--primary-text);
        margin-bottom: 8px;
        font-family: 'Inter', sans-serif;
        font-weight: 600;
    }

    .stat-info p {
        font-size: 26px;
        font-weight: 700;
        color: var(--charcoal);
        margin: 0;
    }

    /* ---------------------------------------------------
       6. Main Buttons Section
    ---------------------------------------------------- */
    .buttons-section {
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        margin-bottom: 30px;
    }

    .action-button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 1 200px;
        height: 60px;
        font-size: 16px;
        font-weight: 600;
        color: #FFFFFF;
        border: none;
        border-radius: 30px;
        padding: 0 20px;
        cursor: pointer;
        transition: background-color 0.3s, box-shadow 0.3s;
        text-decoration: none;
        text-align: center;
        font-family: 'Inter', sans-serif;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .action-button.add-order { 
        background: linear-gradient(135deg, #6C63FF, #8A65FF); 
    }
    .action-button.view-orders { 
        background: linear-gradient(135deg, #FFA500, #FFB733); 
    }
    .action-button.manage-products { 
        background: linear-gradient(135deg, #20B2AA, #38C9B0); 
    }
    .action-button.manage-users { 
        background: linear-gradient(135deg, #4B0082, #6A1B9A); 
    }
    .action-button.generate-reports { 
        background: linear-gradient(135deg, #FF6B6B, #FF8787); 
    }

    .action-button:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .action-button i {
        margin-right: 10px;
        font-size: 20px;
    }

    /* ---------------------------------------------------
       7. Recent Orders Section
    ---------------------------------------------------- */
    .recent-orders-section {
        background-color: var(--background-color);
        border-radius: var(--box-border-radius);
        padding: 30px;
        box-shadow: var(--box-shadow);
    }

    .recent-orders-section h4 {
        font-size: 24px;
        font-weight: 700;
        color: var(--charcoal);
        margin-bottom: 20px;
        font-family: 'Inter', sans-serif;
    }

    /* Make table responsive */
    .table-responsive {
        overflow-x: auto;
    }

    .recent-orders-section table {
        width: 100%;
        border-collapse: collapse;
        font-family: 'Roboto', sans-serif;
    }

    .recent-orders-section th, 
    .recent-orders-section td {
        padding: 14px 16px;
        text-align: left;
        font-size: 14px;
        vertical-align: top;
    }

    .recent-orders-section th {
        background-color: var(--light-grey);
        color: var(--charcoal);
        font-weight: 700;
        border-bottom: 2px solid var(--medium-grey);
        font-family: 'Inter', sans-serif;
    }

    .recent-orders-section tr:nth-child(even) {
        background-color: #FAFAFA;
    }

    .recent-orders-section tr:hover {
        background-color: #F1F1F1;
    }

    .recent-orders-section td {
        color: var(--secondary-text);
    }

    .recent-orders-section .view-all {
        display: block;
        text-align: right;
        margin-top: 15px;
        font-size: 16px;
        color: var(--accent-blue);
        font-weight: 600;
        text-decoration: none;
        font-family: 'Inter', sans-serif;
        transition: color 0.3s;
    }

    .recent-orders-section .view-all:hover {
        color: var(--accent-teal);
    }

    /* Badge Styles */
    .badge-status-pending {
        background-color: var(--badge-pending);
        color: #FFFFFF;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .badge-status-in-progress {
        background-color: var(--badge-in-progress);
        color: #FFFFFF;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .badge-status-completed {
        background-color: var(--badge-completed);
        color: #FFFFFF;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .badge-status-delivered {
        background-color: var(--badge-delivered);
        color: #FFFFFF;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    /* ---------------------------------------------------
       8. Footer Styles
    ---------------------------------------------------- */
    .footer {
        background-color: var(--background-color);
        color: var(--secondary-text);
        padding: 20px;
        text-align: center;
        border-radius: var(--box-border-radius);
        font-size: 14px;
        line-height: 22px;
        margin-top: 40px;
        font-family: 'Roboto', sans-serif;
        box-shadow: var(--box-shadow);
    }

    /* ---------------------------------------------------
       9. Responsive Design Enhancements
    ---------------------------------------------------- */
    @media (max-width: 768px) {
        .header h1 {
            font-size: 24px;
        }

        .welcome-section h3 {
            font-size: 20px;
        }

        .stats-section {
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 20px;
        }

        .stat-icon {
            font-size: 30px;
        }

        .stat-info p {
            font-size: 22px;
        }

        .action-button {
            flex: 1 1 100%;
            height: 50px;
            font-size: 14px;
        }

        .recent-orders-section h4 {
            font-size: 20px;
        }

        .recent-orders-section th, 
        .recent-orders-section td {
            padding: 10px 12px;
            font-size: 12px;
        }
    }

    @media (max-width: 480px) {
        .container-body {
            padding: 20px 10px;
        }

        .header h1 {
            font-size: 20px;
        }

        .welcome-section h3 {
            font-size: 18px;
        }

        .stat-info p {
            font-size: 20px;
        }

        .action-button {
            height: 45px;
            font-size: 13px;
        }

        .recent-orders-section h4 {
            font-size: 18px;
        }

        .recent-orders-section th, 
        .recent-orders-section td {
            padding: 8px 10px;
            font-size: 11px;
        }
    }
    </style>
</head>
<body>
<main class='container-body'>
    <!-- Header -->
    <div class="header">
        <h1>Kaak Alia Dashboard</h1>
    </div>

    <!-- Welcome Section -->
    <div class="welcome-section">
        <h3>Welcome to the Kaak Alia Management System!</h3>
        <hr>
    </div>

    <!-- Statistics Section -->
    <div class="stats-section">
        <!-- Total Orders -->
        <div class="stat-card">
            <div class="stat-icon">
                <i class="bi bi-cart-fill"></i>
            </div>
            <div class="stat-info">
                <h5>Total Orders</h5>
                <p><?= number_format($totalOrders) ?></p>
            </div>
        </div>
        <!-- Pending Orders -->
        <div class="stat-card">
            <div class="stat-icon">
                <i class="bi bi-hourglass-split"></i>
            </div>
            <div class="stat-info">
                <h5>Pending Orders</h5>
                <p><?= number_format($pendingOrders) ?></p>
            </div>
        </div>
        <!-- Completed Orders -->
        <div class="stat-card">
            <div class="stat-icon">
                <i class="bi bi-check-circle-fill"></i>
            </div>
            <div class="stat-info">
                <h5>Completed Orders</h5>
                <p><?= number_format($completedOrders) ?></p>
            </div>
        </div>
        <!-- Delivered Orders -->
        <div class="stat-card">
            <div class="stat-icon">
                <i class="bi bi-truck"></i>
            </div>
            <div class="stat-info">
                <h5>Delivered Orders</h5>
                <p><?= number_format($deliveredOrders) ?></p>
            </div>
        </div>
        <!-- Total Sales -->
        <div class="stat-card">
            <div class="stat-icon">
                <i class="bi bi-currency-dollar"></i>
            </div>
            <div class="stat-info">
                <h5>Total Sales (KD)</h5>
                <p><?= number_format($totalSales, 2) ?></p>
            </div>
        </div>
    </div>

    <!-- Main Buttons Section -->
    <div class="buttons-section">
        <a href="orders/add_order.php" class="action-button add-order">
            <i class="bi bi-plus-circle-fill"></i>
            Add New Order
        </a>
        <a href="orders/view_orders.php" class="action-button view-orders">
            <i class="bi bi-eye-fill"></i>
            View Orders
        </a>
        <a href="products/manage_products.php" class="action-button manage-products">
            <i class="bi bi-box-seam-fill"></i>
            Manage Products
        </a>
        <a href="users/manage_users.php" class="action-button manage-users">
            <i class="bi bi-people-fill"></i>
            Manage Users
        </a>
        <a href="reports/generate_reports.php" class="action-button generate-reports">
            <i class="bi bi-bar-chart-fill"></i>
            Generate Reports
        </a>
    </div>

    <!-- Recent Orders Section -->
    <div class="recent-orders-section">
        <h4>Recent Orders</h4>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>#ID</th>
                        <th>Customer Name</th>
                        <th>Contact</th>
                        <th>Delivery Address</th>
                        <th>Products</th>
                        <th>Status</th>
                        <th>Order Date</th>
                        <th>Delivery DateTime</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if ($recentOrders && $recentOrders->num_rows > 0): ?>
                        <?php while($order = $recentOrders->fetch_assoc()): ?>
                            <tr>
                                <td><?= htmlspecialchars($order['order_id']) ?></td>
                                <td><?= htmlspecialchars($order['customer_name']) ?></td>
                                <td><?= htmlspecialchars($order['contact']) ?></td>
                                <td><?= nl2br(htmlspecialchars($order['delivery_address'])) ?></td>
                                <td>
                                    <?php
                                        // Display all products associated with the order
                                        echo $order['products_details'];
                                    ?>
                                </td>
                                <td>
                                    <?php
                                        switch ($order['status']) {
                                            case 'Pending':
                                                echo '<span class="badge-status-pending">Pending</span>';
                                                break;
                                            case 'In Progress':
                                                echo '<span class="badge-status-in-progress">In Progress</span>';
                                                break;
                                            case 'Completed':
                                                echo '<span class="badge-status-completed">Completed</span>';
                                                break;
                                            case 'Delivered':
                                                echo '<span class="badge-status-delivered">Delivered</span>';
                                                break;
                                            default:
                                                echo '<span class="badge bg-light text-dark">Unknown</span>';
                                        }
                                    ?>
                                </td>
                                <td><?= htmlspecialchars(date("d M Y, h:i A", strtotime($order['order_date']))) ?></td>
                                <td><?= $order['delivery_datetime'] ? htmlspecialchars(date("d M Y, h:i A", strtotime($order['delivery_datetime']))) : 'N/A' ?></td>
                            </tr>
                        <?php endwhile; ?>
                    <?php else: ?>
                        <tr>
                            <td colspan="8" class="text-center">No recent orders.</td>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
        <a href="orders/view_orders.php" class="view-all">View All Orders</a>
    </div>

    <!-- Footer -->
    <div class="footer">
        &copy; 2024 Kaak Alia Bakery. All rights reserved.
    </div>
</main>
    <!-- Embedded Bootstrap JS -->
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
<?php
// Flush the output buffer
ob_end_flush();
// No closing PHP tag to prevent unwanted output
?>) refine the design to make it modern, clean, and professional while maintaining a subtle, sophisticated hint of the bakery theme. This approach will result in an interface that feels both contemporary and warm, ideal for an upscale online bakery platform.

1. Background and Layout
Background Color: Use a crisp white background for the entire interface. This creates a professional, high-end look and allows the products to be the main focus.
Card and Table Shadows: Implement minimal shadows on product cards and tables for a sleek "floating" effect. This adds depth without overcrowding the design, keeping it light and professional.
Padding and Spacing: Increase spacing around elements to create an airy layout, making the interface feel open and reducing visual clutter.
2. Filters Section
Filter Buttons: Use pill-shaped filter buttons in a neutral palette, like cool greys or soft charcoal, with a gradient accent. This keeps the design sleek and modern while adding a subtle highlight.
Date Pickers and Dropdowns: Use outlined fields with a thin grey border. When clicked, the border color changes to a soft accent color (e.g., light grey or teal) to enhance interactivity.
3. Search Bar
Search Field Styling: Incorporate a modern search bar with a grey border and a magnifying glass icon inside the field for usability. On focus, the border color should change to a darker grey, creating a professional highlight effect.
Search Button: Use a rounded, solid button in a soft grey or cool-toned accent color. Adding a slight shadow or a darkened border on hover makes it feel interactive while remaining understated.
4. Product Display and Table
Column Headers: Use a sans-serif font like "Inter" or "Roboto" in a slightly larger size and bold weight for headers. Style headers with a very light grey background and a single underline to separate them from the content rows, giving a minimalist appearance.
Row Backgrounds: Use alternating light grey and white backgrounds for rows to improve readability without adding visual noise.
Product Details: Arrange product details in a clean, vertical layout within each cell. This could include the product name, price, and description, each on a new line in a smaller, lighter font.
Status Badges: Design status labels with modern colors and rounded edges. For example:
Available: A muted green label with white text.
Out of Stock: Light grey with dark text to indicate unavailability in a subtle way.
New Arrival: Soft blue with white text to add a touch of vibrancy without overpowering the layout.
5. Action Buttons
Button Colors and Layout: Use clean, solid-colored buttons with slight gradients for emphasis, keeping the colors muted to match the professional tone:
Add to Cart: Soft grey-blue or charcoal to fit the modern look.
View Details: Neutral grey with a slight hover effect, like darkening the button or adding a shadow.
Remove: Soft, muted red for "Remove" to indicate caution without looking aggressive.
Button Shape and Iconography: Use rounded buttons with slight shadowing to give them a subtle, floating effect. Small icons next to the text (e.g., shopping cart icon for "Add to Cart") can add clarity to the buttons without adding too much visual weight.
6. Typography
Font Choice: Choose a modern sans-serif font like "Inter," "Roboto," or "Open Sans" to keep the text clean and professional. Use different weights to establish hierarchy, such as bold for product names and regular or light for details.
Hierarchy and Emphasis: Increase font sizes for key information like product names and headers. Keep secondary details in a smaller, lighter font for contrast and readability.
7. Color Palette
Primary Colors: White and light grey for a clean, modern background. Dark grey or charcoal can be used for text to maintain high contrast.
Accent Colors: Muted blues, greens, and a touch of soft red for status indicators or subtle highlights on buttons.
Text Colors: Dark grey or black for primary text for readability, with lighter shades of grey for secondary information.
8. Image and Visuals
Product Images: Use high-resolution images with a subtle shadow around each to give them a polished look. Keeping the images well-lit and professionally styled adds to the upscale aesthetic.
Minimal Decorative Elements: For a more modern and professional look, limit decorative elements. Instead, rely on clean lines, soft shadows, and whitespace for visual structure.
9. Interactive Elements and Transitions
Hover and Focus Effects: Add subtle transitions when hovering over interactive elements like buttons and filter options. For instance, slightly darken the color or add a shadow to indicate interactivity.
Load Animations: When loading new products or applying filters, consider adding a minimalist fade-in effect to maintain a smooth, modern user experience.
10. Product Highlights and Labels
Featured Products or Discounts: Use a sleek "badge" design in a soft accent color like muted teal or grey-blue for featured products, bestsellers, or discounts. Keep the text small and centered for a refined look.
This design approach will create a clean, modern UI that feels both professional and sophisticated, with a hint of bakery warmth through subtle accent colors. By using minimalistic layouts, rounded buttons, and a balanced color palette, the interface will look polished and user-friendly, ideal for an online bakery platform focused on a professional shopping experience.






and make the icosn differente colors