based on this info database (-- phpMyAdmin SQL Dump
-- version 5.2.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1:3306
-- Generation Time: Nov 07, 2024 at 04:17 PM
-- Server version: 10.11.9-MariaDB
-- PHP Version: 7.2.34

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `u406552082_kaakalia`
--

-- --------------------------------------------------------

--
-- Table structure for table `customers`
--

CREATE TABLE `customers` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `contact` varchar(50) DEFAULT NULL,
  `delivery_address` text DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `customers`
--

INSERT INTO `customers` (`id`, `name`, `contact`, `delivery_address`) VALUES
(1, 'order_94513', '5162154 84561', 'Qena, 332 host'),
(2, 'order_94513', '8888 5461', 'Qina, Egpyt'),
(3, 'order_94513', '5162154 84561', 'Qena, Egypt'),
(4, 'order_8496', '15546843', 'Qena,Egpyt');

-- --------------------------------------------------------

--
-- Table structure for table `orders`
--

CREATE TABLE `orders` (
  `id` int(11) NOT NULL,
  `customer_id` int(11) NOT NULL,
  `product_id` int(11) NOT NULL,
  `status` enum('Pending','In Progress','Completed','Delivered') DEFAULT 'Pending',
  `order_date` datetime DEFAULT current_timestamp(),
  `delivery_datetime` datetime DEFAULT NULL,
  `delivery_date` date DEFAULT NULL,
  `quantity` int(11) NOT NULL DEFAULT 1,
  `packaging_preferences` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `orders`
--

INSERT INTO `orders` (`id`, `customer_id`, `product_id`, `status`, `order_date`, `delivery_datetime`, `delivery_date`, `quantity`, `packaging_preferences`) VALUES
(3, 3, 8, 'Completed', '2024-11-06 16:29:21', '2024-11-08 06:31:00', NULL, 1, 'This Order is so Important and type card, (Mahmoud Tawfik)'),
(4, 4, 10, 'Completed', '2024-11-06 18:00:08', '2024-11-07 10:01:00', NULL, 2, 'This Order is so Important and type card, (Mahmoud Tawfik)');

-- --------------------------------------------------------

--
-- Table structure for table `order_items`
--

CREATE TABLE `order_items` (
  `id` int(11) NOT NULL,
  `order_id` int(11) NOT NULL,
  `product_id` int(11) NOT NULL,
  `quantity` int(11) NOT NULL,
  `packaging_preferences` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `order_items`
--

INSERT INTO `order_items` (`id`, `order_id`, `product_id`, `quantity`, `packaging_preferences`) VALUES
(1, 3, 6, 1, '');

-- --------------------------------------------------------

--
-- Table structure for table `products`
--

CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `size` varchar(50) DEFAULT NULL,
  `price` decimal(10,2) NOT NULL,
  `category` varchar(50) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `products`
--

INSERT INTO `products` (`id`, `name`, `size`, `price`, `category`) VALUES
(1, 'Savory Cake', 'Large', 12.00, 'Savory Cake'),
(2, 'Mini Savory Cake', 'Mini', 6.00, 'Savory Cake'),
(3, 'Mini Savory Cake', 'Mini x24', 9.00, 'Savory Cake'),
(4, 'Mini Savory Cake', 'Mini x36', 12.00, 'Savory Cake'),
(5, 'Special Occasion Box', '35 pieces', 14.50, 'Savory Cake'),
(6, 'Crunchy Pudding', '12 pieces', 12.00, 'Crunchy Pudding'),
(7, 'Kaak - Regular Box Half-kilo', 'Half-kilo', 6.00, 'Kaak'),
(8, 'Kaak - Regular Box One-kilo', 'One-kilo', 8.00, 'Kaak'),
(9, 'Visitor’s Basket - Small', 'Small Basket', 8.00, 'Kaak'),
(10, 'Visitor’s Basket - Large', 'Large Basket', 10.00, 'Kaak'),
(11, 'Special Occasion Box - Kaak', '33 pieces', 11.00, 'Kaak');

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `role` enum('admin','staff') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `username`, `password`, `role`) VALUES
(1, 'admin', '$2y$10$e0NR4EJkO3jUuL1KqJx3E.E0Iojb95czjJGb2a7v0GfN0V8pQBv8W', 'admin'),
(2, 'kaakalia', '$2y$10$xHUvBhNLyy4eN8WVtCrdzuX0j8wYOVCH6m.czPtqfiWImUCC9w9aO', 'admin');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `customers`
--
ALTER TABLE `customers`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `orders`
--
ALTER TABLE `orders`
  ADD PRIMARY KEY (`id`),
  ADD KEY `customer_id` (`customer_id`);

--
-- Indexes for table `order_items`
--
ALTER TABLE `order_items`
  ADD PRIMARY KEY (`id`),
  ADD KEY `order_id` (`order_id`),
  ADD KEY `product_id` (`product_id`);

--
-- Indexes for table `products`
--
ALTER TABLE `products`
  ADD PRIMARY KEY (`id`);

--
-- Indexes for table `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`),
  ADD UNIQUE KEY `username` (`username`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `customers`
--
ALTER TABLE `customers`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

--
-- AUTO_INCREMENT for table `orders`
--
ALTER TABLE `orders`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

--
-- AUTO_INCREMENT for table `order_items`
--
ALTER TABLE `order_items`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

--
-- AUTO_INCREMENT for table `products`
--
ALTER TABLE `products`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

--
-- Constraints for dumped tables
--

--
-- Constraints for table `orders`
--
ALTER TABLE `orders`
  ADD CONSTRAINT `orders_ibfk_1` FOREIGN KEY (`customer_id`) REFERENCES `customers` (`id`),
  ADD CONSTRAINT `orders_ibfk_2` FOREIGN KEY (`product_id`) REFERENCES `products` (`id`);

--
-- Constraints for table `order_items`
--
ALTER TABLE `order_items`
  ADD CONSTRAINT `order_items_ibfk_1` FOREIGN KEY (`order_id`) REFERENCES `orders` (`id`) ON DELETE CASCADE,
  ADD CONSTRAINT `order_items_ibfk_2` FOREIGN KEY (`product_id`) REFERENCES `products` (`id`) ON DELETE CASCADE;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;) i want to change the header (<?php
// includes/header.php
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kaak Alia Management System</title>
    
    <!-- Responsive Meta Tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    
    <!-- Bootstrap CSS (Optional if you want to use Bootstrap components) -->
    <link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
    
    <!-- Bootstrap Icons (Optional) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    
    <!-- Embedded Custom Styles for Header -->
    <style>
        /* Reset Margins and Paddings */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Base Styles */
        body {
            font-family: 'Cairo', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding-top: 60px; /* Height of the header */
            color: #ffffff;
        }

        /* Header Styles */
        .header {
            background-color: #2b2b2b;
            color: #ffffff;
            position: fixed;
            top: 0;
            width: 100%;
            height: 60px;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }

        /* Logo */
        .logo img {
            height: 40px;
            transition: transform 0.3s;
        }

        .logo img:hover {
            transform: scale(1.05);
        }

        /* Navigation */
        .nav-links {
            list-style: none;
            display: flex;
            align-items: center;
        }

        .nav-links li {
            margin-left: 20px;
        }

        .nav-links a {
            text-decoration: none;
            color: #ffffff;
            font-weight: 600;
            transition: color 0.3s;
            display: flex;
            align-items: center;
        }

        .nav-links a:hover {
            color: #d3d3d3;
        }

        .nav-links a .icon {
            margin-right: 5px;
            font-size: 1.1em;
        }

        /* User Profile */
        .user-profile {
            position: relative;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid #ffffff;
            transition: transform 0.3s, border 0.3s;
        }

        .user-avatar:hover {
            transform: scale(1.05);
            border-color: #d3d3d3;
        }

        /* Dropdown Menu */
        .dropdown-menu {
            display: none;
            position: absolute;
            top: 60px;
            right: 0;
            background-color: #3a3a3a;
            border: 1px solid #444444;
            border-radius: 5px;
            min-width: 150px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            z-index: 1001;
        }

        .dropdown-menu a {
            display: block;
            padding: 10px 15px;
            text-decoration: none;
            color: #ffffff;
            transition: background-color 0.3s, color 0.3s;
        }

        .dropdown-menu a:hover {
            background-color: #555555;
            color: #ffffff;
        }

        /* Show Dropdown on Hover */
        .user-profile:hover .dropdown-menu {
            display: block;
        }

        /* Mobile Menu Button */
        .menu-toggle {
            display: none;
            font-size: 1.5em;
            cursor: pointer;
            color: #ffffff;
        }

        /* Responsive Styles */
        @media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 60px;
                left: -100%;
                flex-direction: column;
                background-color: #2b2b2b;
                width: 100%;
                transition: left 0.3s;
            }

            .nav-links.active {
                left: 0;
            }

            .nav-links li {
                margin: 15px 0;
                text-align: center;
            }

            .menu-toggle {
                display: block;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="header-container">
            <!-- Logo -->
            <div class="logo">
                <a href="/public/dashboard.php">
                    <img src="/assets/images/logo.png" alt="Kaak Alia Logo">
                </a>
            </div>

            <!-- Navigation Links -->
            <nav>
                <span class="menu-toggle" id="mobile-menu">
                    <i class="bi bi-list"></i>
                </span>
                <ul class="nav-links" id="nav-links">
                    <li><a href="/public/orders/add_order.php"><i class="bi bi-plus-circle-fill icon"></i>Add New Order</a></li>
                    <li><a href="/public/orders/view_orders.php"><i class="bi bi-eye-fill icon"></i>View Orders</a></li>
                    <li><a href="/public/products/manage_products.php"><i class="bi bi-box-seam-fill icon"></i>Manage Products</a></li>
                    <li><a href="/public/users/manage_users.php"><i class="bi bi-people-fill icon"></i>Manage Users</a></li>
                    <li><a href="/public/reports/generate_reports.php"><i class="bi bi-bar-chart-fill icon"></i>Generate Reports</a></li>
                </ul>
            </nav>

            <!-- User Profile -->
            <div class="user-profile">
                <img src="/assets/images/user-placeholder.png" alt="User Avatar" class="user-avatar">
                <div class="dropdown-menu">
                    <a href="/public/users/settings.php">Account Settings</a>
                    <a href="/public/logout.php">Logout</a>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content Wrapper -->
    <main>
        <!-- Your main content will go here -->) and change the header totally and these path (├── index.php
├── assets/
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   └── scripts.js
│   └── bootstrap/
│       ├── css/
│       └── js/
├── config/
│   └── config.php
├── includes/
│   ├── header.php
│   ├── footer.php
│   ├── auth.php
│   └── db_connect.php
├── public/
│   ├── login.php
│   ├── logout.php
│   ├── dashboard.php
│   ├── orders/
│   │   ├── add_order.php
│   │   ├── view_orders.php
│   │   └── edit_order.php
│   ├── products/
│   │   └── manage_products.php
│   ├── users/
│   │   └── manage_users.php
│   └── reports/
│       └── generate_reports.php
) and make the header simple and add more codes to make it repsoivnes design and bigger fonts and best ux and ui