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=Cairo:wght@400;600;700&family=Nunito: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>
    
    /* styles.css */

/* ---------------------------------------------------
   1. CSS Variables for Consistent Design
---------------------------------------------------- */
:root {
    /* Bakery-Themed Colors */
    --primary-color: #D19A66; /* Warm Accent Color */
    --secondary-color: #3A2F1B; /* Dark Brown */
    --light-brown: #E8D8C3; /* Soft Brown for Borders */
    --soft-cream: #F9F4EC; /* Light Cream Background */
    --hover-shadow: rgba(0, 0, 0, 0.1);

    /* Text Colors */
    --main-text: #333333;
    --secondary-text: #555555;
    --title-color: #3A2F1B;
    --placeholder-text: #AAAAAA;

    /* UI Elements */
    --input-border: var(--light-brown);
    --input-focus-border: var(--primary-color);
    --box-background: var(--soft-cream);
    --box-border-radius: 10px;
    --box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
    --title-font: 'Nunito', sans-serif;
    --body-font: 'Roboto', sans-serif;

    /* Additional Colors */
    --button-add-order: #e2a20c; /* Light Golden-Yellow */
    --button-view-orders: #118AB2; /* Blue */
    --button-manage-products: #06D6A0; /* Green */
    --button-manage-users: #F4A261; /* Orange */
    --button-generate-reports: #EF476F; /* Red-Pink */

    --badge-pending: #FFD166;
    --badge-in-progress: #118AB2;
    --badge-completed: #06D6A0;
    --badge-delivered: #EF476F;
}

/* ---------------------------------------------------
   2. Global Styles
---------------------------------------------------- */
body {
    font-family: var(--body-font), sans-serif;
    background: var(--box-background);
    margin: 0;
    padding: 0;
    color: var(--main-text);
}

.container-body {
    font-family: var(--body-font), sans-serif;
    background-color: #FFFFFF;
    margin: 0;
    padding: 30px;
    box-sizing: border-box;
}

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

.header h1 {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 700;
    font-family: var(--title-font);
}

/* ---------------------------------------------------
   4. Welcome Section
---------------------------------------------------- */
.welcome-section {
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    border-radius: var(--box-border-radius);
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.welcome-section h3 {
    font-size: 24px;
    color: var(--main-text);
    margin-bottom: 10px;
    font-family: var(--title-font);
}

.welcome-section hr {
    width: 50px;
    height: 3px;
    background-color: var(--primary-color);
    border: none;
    margin: 10px auto;
}

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

.stat-card {
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    border-radius: var(--box-border-radius);
    padding: 15px;
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-icon {
    font-size: 32px;
    margin-right: 15px;
}

.stat-icon.total-orders { color: var(--secondary-text); }
.stat-icon.pending-orders { color: var(--primary-color); }
.stat-icon.completed-orders { color: var(--button-view-orders); }
.stat-icon.delivered-orders { color: var(--button-generate-reports); }
.stat-icon.total-sales { color: var(--button-manage-products); }

.stat-info h5 {
    font-size: 18px;
    color: var(--main-text);
    margin-bottom: 5px;
    font-family: var(--title-font);
}

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

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

.action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    height: 60px;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    border: none;
    border-radius: var(--box-border-radius);
    padding: 10px 20px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    text-align: center;
    font-family: var(--title-font);
}

.action-button.add-order { background-color: var(--button-add-order); }
.action-button.view-orders { background-color: var(--button-view-orders); }
.action-button.manage-products { background-color: var(--button-manage-products); }
.action-button.manage-users { background-color: var(--button-manage-users); }
.action-button.generate-reports { background-color: var(--button-generate-reports); }

.action-button:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 10px var(--hover-shadow);
}

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

.recent-orders-section h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--main-text);
    margin-bottom: 15px;
    font-family: var(--title-font);
}

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

.recent-orders-section table {
    width: 100%;
    border-collapse: collapse;
}

.recent-orders-section th, 
.recent-orders-section td {
    padding: 12px;
    text-align: left;
    font-size: 16px;
    vertical-align: top;
    font-family: var(--body-font);
}

.recent-orders-section th {
    background-color: var(--secondary-color);
    color: #FFFFFF;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 1;
}

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

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

.recent-orders-section td {
    font-size: 14px;
    color: var(--main-text);
}

.recent-orders-section .view-all {
    display: block;
    text-align: right;
    margin-top: 10px;
    font-size: 16px;
    color: var(--button-view-orders);
    font-weight: 700;
    text-decoration: none;
    font-family: var(--title-font);
}

.recent-orders-section .view-all:hover {
    color: #075985;
}

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

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

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

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

/* ---------------------------------------------------
   8. Input Fields
---------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font-size: 16px;
    color: var(--main-text);
    background-color: #FFFFFF;
    box-shadow: 0px 2px 4px var(--hover-shadow);
    transition: border 0.3s, box-shadow 0.3s;
    font-family: var(--body-font);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder,
select::placeholder {
    color: var(--placeholder-text);
    font-style: italic;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border: 1px solid var(--input-focus-border);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    outline: none;
}

/* ---------------------------------------------------
   9. Content Boxes and Containers
---------------------------------------------------- */
.box {
    background-color: var(--box-background);
    border-radius: var(--box-border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.box:hover {
    box-shadow: 0px 4px 8px var(--hover-shadow);
}

/* ---------------------------------------------------
   10. Titles and Headings
---------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font), serif;
    color: var(--title-color);
    margin: 20px 0;
}

h1 {
    font-size: 32px;
    font-weight: 700;
}

h2 {
    font-size: 24px;
    font-weight: 600;
}

h3 {
    font-size: 20px;
    font-weight: 600;
}

h4 {
    font-size: 18px;
    font-weight: 700;
}

h5 {
    font-size: 16px;
    font-weight: 600;
}

h6 {
    font-size: 14px;
    font-weight: 500;
}

.title-highlight {
    border-bottom: 2px solid var(--primary-color);
}

/* ---------------------------------------------------
   11. Footer Styles
---------------------------------------------------- */
.footer {
    background-color: var(--secondary-color);
    color: #FFFFFF;
    padding: 15px;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    margin-top: 40px;
    font-family: var(--body-font);
}

/* ---------------------------------------------------
   12. Responsive Design Enhancements
---------------------------------------------------- */
@media (min-width: 768px) {
    .buttons-section .action-button {
        width: 48%;
    }
}

@media (max-width: 767px) {
    .buttons-section .action-button {
        width: 100%;
    }

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

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

@media (max-width: 480px) {
    .header {
        padding: 15px 20px;
    }

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

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

    .action-button {
        font-size: 16px;
        height: 50px;
    }

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

    .recent-orders-section h4 {
        font-size: 14px;
    }
}
</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 total-orders">
                <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 pending-orders">
                <i class="bi bi-hourglass-top"></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 completed-orders">
                <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 delivered-orders">
                <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 total-sales">
                <i class="bi bi-cash-stack"></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 me-2"></i>
            Add New Order
        </a>
        <a href="orders/view_orders.php" class="action-button view-orders">
            <i class="bi bi-eye-fill me-2"></i>
            View Orders
        </a>
        <a href="products/manage_products.php" class="action-button manage-products">
            <i class="bi bi-box-seam-fill me-2"></i>
            Manage Products
        </a>
        <a href="users/manage_users.php" class="action-button manage-users">
            <i class="bi bi-people-fill me-2"></i>
            Manage Users
        </a>
        <a href="reports/generate_reports.php" class="action-button generate-reports">
            <i class="bi bi-bar-chart-fill me-2"></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
?>) and i want to chaneg this (create a modern, clean, and visually appealing UI, here are detailed suggestions for each section to enhance the visual appeal and user experience. This redesign will focus on using cool, neutral colors like blue-grey tones for a refreshing and contemporary look.

1. Background and Layout
Background Color: Use a very light grey or soft, cool-toned blue-grey for the main panel background. This keeps the design clean, spacious, and modern.
Card and Table Borders: Replace traditional solid borders with subtle shadows to create a card-like effect. This approach gives a softer, more polished look.
Padding and Spacing: Increase spacing around elements and between rows to create an airy, open feel, improving readability and user comfort.
2. Filters Section
Filter Buttons: Replace rounded rectangles with modern pill-shaped buttons, and use gradient colors (e.g., light blue to dark blue-grey) to make them stand out. This gradient effect adds vibrancy and makes the interface feel more dynamic.
Date Pickers and Dropdowns: Use outlined fields with rounded corners, and have the border color change on focus (e.g., light blue or teal). This is a sleek, interactive design choice.
3. Search Bar
Search Field Styling: Add a subtle icon inside the search bar for better usability, such as a magnifying glass icon at the left. Set the border color to light grey, and highlight it with a brighter shade on focus to indicate interactivity.
Search Button: Use a modern, rounded shape with a bold color like cool blue-grey or teal for visibility. Adding a slight shadow or subtle glow effect on hover enhances the interactive feel.
4. Data Table
Column Headers: Use a clean, sans-serif font in bold and larger font size for column headers. A light grey background differentiates the header row without adding visual weight. Avoid heavy borders and opt for a single bottom border line.
Row Backgrounds: Alternate row backgrounds with very light shades (e.g., soft blue-grey and white) to enhance readability. This technique also reinforces visual hierarchy.
Details Presentation: Present detailed information within each cell in a card-style layout. Use a slightly smaller font and display details in a column layout, with each item on a separate line to organize information clearly.
Status Badges: Use rounded labels with soft pastel backgrounds for each status. For example:
Pending: Soft yellow with dark grey text.
Completed: Soft green with white text.
Priority Labels: Align badge colors with priority level:
Normal: Light grey.
Important: Soft red or orange.
5. Action Buttons
Button Colors and Layout: Replace basic color blocks with gradient or outlined buttons. Suggestions include:
Edit: Soft blue gradient from light to medium blue.
Change Status: Green gradient from light green to dark green.
Delete: Soft red gradient from light pink to deeper red.
View: Bright teal with a subtle hover animation for a slight scale-up effect.
Button Shape and Iconography: Use pill-shaped buttons with slight shadowing for a floating effect. Adding small icons (e.g., pencil for Edit, trash for Delete) next to text labels improves functionality clarity.
6. Typography
Font Choice: Select a modern, sans-serif font like "Roboto" or "Open Sans" for a clean and polished appearance. Increase font size slightly for better readability.
Hierarchy and Emphasis: Emphasize key information (e.g., dates or highlighted text) with bold weight, while using lighter weights for secondary details to maintain a clear visual hierarchy.
7. Color Palette
Primary Colors: Use cool tones such as blue-greys, light blues, and teals.
Accent Colors: Soft greens, purples, and a touch of orange for tags or priority indicators.
Text Colors: Use dark grey or black for main text, with white text on buttons and color-coded labels for contrast.
These updates will result in a visually pleasing, cool-toned, and modern interface. Clean lines, gradient buttons, and soft backgrounds will create a fresh, organized, and engaging user experience.





 
) and type full codes and make into file page plz