Mini Project - UI/UX - Online Store Management System

[akash-coded]

Task: Online Store Management System UI/UX

Description:

You have successfully implemented the logic for an Online Store Management System using TypeScript. Your next task is to create a visually appealing and functional user interface (UI) for the system using HTML, CSS, and Bootstrap. You will be designing a responsive web application that includes various pages and components to manage products, categories, customers, and orders.

Requirements:

1. Design a responsive layout using the Bootstrap Grid system and components.

2. Create a navigation bar with the following items:

   • Dashboard
   • Products
   • Categories
   • Customers
   • Orders

3. Implement the following pages and their functionalities:

   a. Dashboard:

   • Display summary statistics (total products, categories, customers, and orders)
   • Show a list of recently added products
   • Display a list of the latest orders

   b. Products:

   • Add a new product (using a modal form)
     • Product Name
     • Price
     • Stock
     • Category (dropdown)
   • Edit product details (using a modal form)
   • Delete a product (with confirmation)
   • Search products by name (search bar)
   • Display product list with pagination, including:
     • Product Name
     • Price
     • Stock
     • Category

   c. Categories:

   • Add a new category (using a modal form)
     • Category Name
   • Edit category details (using a modal form)
   • Delete a category (with confirmation)
   • Display category list with pagination, including:
     • Category Name
     • Number of Products

   d. Customers:

   • Add a new customer (using a modal form)
     • Name
     • Email
   • Edit customer details (using a modal form)
   • Delete a customer (with confirmation)
   • Display customer list with pagination, including:
     • Name
     • Email

   e. Orders:

   • Display order list with pagination, including:
     • Order ID
     • Customer Name
     • Total Price
     • Order Date
     • Order Status (dropdown)
   • Update order status (using the dropdown menu in the order list)

4. Use Bootstrap components like cards, tables, modals, buttons, and forms to create a consistent and professional-looking UI.

5. Ensure the application is responsive, so it looks good on both desktop and mobile devices.

6. Implement proper error handling and user feedback, such as displaying alerts for successful or failed operations.

7. Implement a consistent color scheme and typography throughout the application to enhance the user experience and improve readability.

8. Use tooltips and popovers to provide additional information or guidance when necessary, such as explaining the purpose of a button or form field.

9. Create a footer section with copyright information and any relevant links, ensuring it is consistently displayed on all pages.

10. Use loading indicators or progress bars when performing actions that may take some time, such as loading data from the server or processing a request. This will help to manage user expectations and provide a more enjoyable experience.

11. Implement form validation to ensure that users enter the required information correctly before submitting. Display appropriate error messages when validation fails.

12. Use modals for confirmation dialogs when performing critical actions, such as deleting a product, category, or customer. This will help prevent accidental deletions and provide a more user-friendly experience.

13. Organize your application's code using a modular approach, separating the HTML, CSS, and JavaScript into separate files and folders to maintain a clean and organized project structure.

14. Test your application thoroughly on multiple devices, screen sizes, and browsers to ensure a consistent and bug-free experience for all users.

15. Document your code using comments and provide a README file with instructions on how to set up and run your application, including any dependencies or build tools required.

By following these requirements and implementing the specified pages, components, and functionalities, you will create a professional, responsive, and user-friendly interface for your Online Store Management System. This will allow users to effectively manage products, categories, customers, and orders, and provide an enjoyable experience.

Summary and Description of Pages:

1. Dashboard:
   The Dashboard is the main landing page of the Online Store Management System. It provides a quick overview of the system's key metrics, such as the total number of products, categories, customers, and orders. It also displays a list of recently added products and the latest orders, allowing users to keep track of recent activity and stay up-to-date with the system's status.

Approach: Use Bootstrap cards to display summary statistics and tables or lists for recently added products and latest orders. Consider using AJAX or Fetch API to update this information in real-time.

2. Products:
   The Products page is dedicated to managing the store's products. Users can add, edit, and delete products, as well as search for specific products by name. The product list should be paginated to handle large numbers of products efficiently.

Approach: Use a combination of Bootstrap tables, modals, and forms to create a user-friendly interface for managing products. Implement client-side form validation and provide appropriate feedback using alerts or notifications.

3. Categories:
   The Categories page allows users to manage the different product categories within the store. Users can add, edit, and delete categories, as well as view a list of categories with pagination.

Approach: Similar to the Products page, use Bootstrap tables, modals, and forms to provide a consistent user experience. Implement client-side form validation and provide appropriate feedback using alerts or notifications.

4. Customers:
   The Customers page is dedicated to managing the store's customers. Users can add, edit, and delete customers, as well as view a list of customers with pagination.

Approach: Use a similar approach as with the Products and Categories pages, employing Bootstrap tables, modals, and forms to create a consistent and user-friendly interface. Implement client-side form validation and provide appropriate feedback using alerts or notifications.

5. Orders:
   The Orders page displays a list of orders placed by customers, with pagination. Users can view order details, such as the customer's name, total price, order date, and order status. The order status can be updated directly from this page using a dropdown menu.

Approach: Use a Bootstrap table to display the list of orders and include dropdown menus for updating order status. Implement real-time updates to the order list using AJAX or Fetch API. Use tooltips or popovers to provide additional information about the order status options.

Detailed Approach for Coding Each Page:

1. Dashboard:

   a. Create an HTML file for the Dashboard page.
   b. Set up the basic HTML structure and include the necessary Bootstrap CSS and JavaScript files.
   c. Create a navigation bar using Bootstrap's navbar component and add the relevant links.
   d. Use Bootstrap cards to display the summary statistics for total products, categories, customers, and orders.
   e. Create tables or lists to show recently added products and latest orders.
   f. Use AJAX or Fetch API to fetch the data for summary statistics, recently added products, and latest orders from the server.
   g. Update the UI with the fetched data and consider implementing real-time updates.

2. Products:

   a. Create an HTML file for the Products page.
   b. Set up the basic HTML structure and include the necessary Bootstrap CSS and JavaScript files.
   c. Reuse the navigation bar from the Dashboard page.
   d. Create a "Add New Product" button that opens a modal form for adding a new product.
   e. Design the modal form with input fields for Product Name, Price, Stock, and Category (dropdown).
   f. Implement a table to display the list of products with pagination, including columns for Product Name, Price, Stock, and Category.
   g. Add Edit and Delete buttons to each row in the product table.
   h. Implement the Edit and Delete functionalities using modal forms and confirmation dialogs, respectively.
   i. Add a search bar to filter the product list by name.
   j. Use AJAX or Fetch API to fetch and update the product data from the server.
   k. Implement client-side form validation and provide appropriate feedback using alerts or notifications.

3. Categories:

   a. Create an HTML file for the Categories page.
   b. Set up the basic HTML structure and include the necessary Bootstrap CSS and JavaScript files.
   c. Reuse the navigation bar from the Dashboard page.
   d. Create a "Add New Category" button that opens a modal form for adding a new category.
   e. Design the modal form with an input field for Category Name.
   f. Implement a table to display the list of categories with pagination, including columns for Category Name and Number of Products.
   g. Add Edit and Delete buttons to each row in the category table.
   h. Implement the Edit and Delete functionalities using modal forms and confirmation dialogs, respectively.
   i. Use AJAX or Fetch API to fetch and update the category data from the server.
   j. Implement client-side form validation and provide appropriate feedback using alerts or notifications.

4. Customers:

   a. Create an HTML file for the Customers page.
   b. Set up the basic HTML structure and include the necessary Bootstrap CSS and JavaScript files.
   c. Reuse the navigation bar from the Dashboard page.
   d. Create a "Add New Customer" button that opens a modal form for adding a new customer.
   e. Design the modal form with input fields for Name and Email.
   f. Implement a table to display the list of customers with pagination, including columns for Name and Email.
   g. Add Edit and Delete buttons to each row in the customer table.
   h. Implement the Edit and Delete functionalities using modal forms and confirmation dialogs, respectively.
   i. Use AJAX or Fetch API to fetch and update the customer data from the server.
   j. Implement client-side form validation and provide appropriate feedback using alerts or notifications.

5. Orders:

   a. Create an HTML file for the Orders page.
   b. Set up the basic HTML structure and include the necessary Bootstrap CSS and JavaScript files.
   c. Reuse the navigation bar from the Dashboard page.
   d. Implement a table to display the list of orders with pagination, including columns for Order ID, Customer Name, Total Price, Order Date, and Order Status.
   e. Add a dropdown menu for updating the order status in each row of the order table.
   f. Use AJAX or Fetch API to fetch and update the order data from the server.
   g. Implement real-time updates to the order list using AJAX or Fetch API.
   h. Use tooltips or popovers to provide additional information about the order status options.

   For all pages:

   1. Make sure to use a responsive design by utilizing the Bootstrap Grid system and its components.
   2. Maintain a consistent color scheme, typography, and layout throughout the application.
   3. Test the application on multiple devices, screen sizes, and browsers to ensure a consistent user experience.
   4. Organize your code using a modular approach, separating HTML, CSS, and JavaScript into separate files and folders. This will help you maintain a clean and organized project structure.
   5. Document your code using comments, and provide a README file with instructions on how to set up and run your application, including any dependencies or build tools required.

   By following the detailed approach for each page and the overall guidelines, you will be able to create a professional, responsive, and user-friendly interface for your Online Store Management System. This will allow users to effectively manage products, categories, customers, and orders, and provide an enjoyable experience.

[VishalShukla85]

Index.html

<title>Online Management Store</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> Online Store

• Dashboard (current)
• Product
• Categories
• Customers
• Orders

  <div class="container">
    <div class="jumbotron">
        <h1>Welcome to My Homepage</h1>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae lorem ac ante faucibus mollis ac vitae eros. Aliquam erat volutpat.</p>
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </div>

    <div class="row">
        <div class="col-md-4">
            <h2>Section 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae lorem ac ante faucibus mollis ac vitae eros. Aliquam erat volutpat.</p>
        </div>
        <div class="col-md-4">
            <h2>Section 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae lorem ac ante faucibus mollis ac vitae eros. Aliquam erat volutpat.</p>
        </div>
        <div class="col-md-4">
            <h2>Section 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae lorem ac ante faucibus mollis ac vitae eros. Aliquam erat volutpat.</p>
        </div>
    </div>
</div>

[Ruchiarth]

#Dashboard.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Online Store Management System </title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="../src/css/styles.css " />
</head>

<body>
    <div class="wrapper">
        <div class="body-overlay">
            <!-- navbar starts  -->
            <nav class="navbar navbar-expand-lg  navbar-dark  bg-primary ">
                <div class="container-fluid">
                    <!-- <a class="navbar-brand fw-bold text-uppercase text-center " href="#">Online Store Management System</a> -->
                    <!-- <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-start" id="menu"> -->
                    <ul class="navbar-nav">
                        <li class="nav-item text-primary">
                            <a href="#" class="nav-link active">
                                <i class="fs-5 bi-house"></i> Home</span>
                            </a>
                        </li>
                        <li>
                            <a href="#submenu1" data-bs-toggle="collapse" class="nav-link text-truncate">
                                <i class="fs-5 bi-speedometer2"></i> Dashboard</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-grid"></i> Products</span></a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-bookmark-fill"></i> Categories</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-people"></i> Customers</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-table"></i> Orders</span></a>
                        </li>
                        <!-- <li class="dropdown">
                    <a href="#" class="nav-link dropdown-toggle  text-truncate" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fs-5 bi-bootstrap"></i><span class="ms-1 d-none d-sm-inline">Bootstrap</span>
                    </a>
                    <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdown">
                        <li><a class="dropdown-item" href="#">New project...</a></li>
                        <li><a class="dropdown-item" href="#">Settings</a></li>
                        <li><a class="dropdown-item" href="#">Profile</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Sign out</a></li>
                    </ul>
                </li> -->


                    </ul>
                
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <form class="d-flex ms-auto" role="search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Recipient's username"
                                    aria-label="Recipient's username" aria-describedby="button-addon2">
                                <button class="btn btn-primary" type="button" id="button-addon2">
                                    <i class="bi bi-search"></i>
                                </button>
                            </div>
                        </form>

                        <ul class="navbar-nav  mb-2 mb-lg-0">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    <i class="bi bi-people-fill"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-lg-end">
                                    <li><button class="dropdown-item" type="button">Action</button></li>
                                    <li><button class="dropdown-item" type="button">Another action</button></li>
                                    <li><button class="dropdown-item" type="button">Something else here</button></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- navbar ends -->
            <main class="mt-2 pt-2">
                <div class="container-fluid">
                    <!-- Dashboard             -->
                    <div class="row mb-2">
                        <div class="col-md-12">
                            <h1> DashBoard </h1>
                        </div>
                    </div>
                    <!-- Card Row  -->
                    <div class="row">
                        <div class="col-md-3 mb-3 ">
                            <div class="card  bg-danger text-white h-100">
                                <div class="card-header">
                                    <i class="bi bi-bookmark-fill"></i>                               </div>
                                <div class="card-body py-5"><h4>Total Products  </h4>
                                    <h5 class="card-title">100</h5>

                                </div>
                                <div class="card-footer d-flex">
                                    View Details
                                    <span class="ms-auto">
                                        <i class="bi bi-chevron-right"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3 ">
                            <div class="card  bg-warning text-white h-100">
                                <div class="card-header">
                                    <i class="fs-5 bi-grid"></i>
                                </div>
                                <div class="card-body py-5"><h4><strong> Categories</strong> </h4>
                                    <h5 class="card-title">140</h5>
                                </div>
                                <div class="card-footer d-flex">
                                    View Details
                                    <span class="ms-auto">
                                        <i class="bi bi-chevron-right"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3 ">
                            <div class="card  bg-success text-white h-100">
                                <div class="card-header">
                                  
                                    <i class="fs-5 bi-person-badge"></i>
                                </div>
                                <div class="card-body py-5"><h4><strong> Customers</strong> </h4>
                                    <h5 class="card-title">50,000</h5>
                                </div>
                                <div class="card-footer d-flex">
                                    View Details
                                    <span class="ms-auto">
                                        <i class="bi bi-chevron-right"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3 ">
                            <div class="card  bg-secondary text-white h-100">
                                <div class="card-header">
                                    <i class="fs-5 bi-cart"></i>
                                </div>
                                <div class="card-body py-5"><h4><strong> Orders</strong> </h4>
                                    <h5 class="card-title">50,000</h5>
                                
                                </div>
                                <div class="card-footer d-flex">
                                    View Details
                                    <span class="ms-auto">
                                        <i class="bi bi-chevron-right"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Card Row ends -->

                    <!-- Recently added products(7) , latest orders (5) -->
                    <div class="row">
                        <div class="col-md-7">
                            <div class="card "  style="min-height: 485px">
                                <div class="card-header">
                                 Recently Added Products
                                </div>
                                <div class="card-body table-responsive">
                                  <h5 class="card-title">Products</h5>
                                  <table class="table table-hover">
                                    <thead class="text-primary">
                                        <tr><th>Code</th>
                                        <th>Name</th>
                                        <th>Category</th>
                                        <th>Quantity</th>
                                    </tr></thead>
                                    <tbody>
                                        <tr>
                                            <td>1A</td>
                                            <td>My English Friend</td>
                                            <td>E-Book</td>
                                            <td>25000</td>
                                        </tr>
                                        <tr>
                                            <td>2B</td>
                                            <td>Magic English</td>
                                            <td>Paperback</td>
                                            <td>50000</td>
                                        </tr>
                                        <tr>
                                            <td>3C</td>
                                            <td>My Grammar Guru</td>
                                            <td>PaperBack</td>
                                            <td>10000</td>
                                        </tr>
                                        <tr>
                                            <td>4D</td>
                                            <td>My Hindi Friend</td>
                                            <td>E-book</td>
                                            <td>40000</td>
                                        </tr>
                                        <tr>
                                            <td>5E</td>
                                            <td>English Handwriting</td>
                                            <td>PaperBack</td>
                                            <td>60000</td>
                                        </tr>
                                        <tr>
                                            <td>6F</td>
                                            <td>Hindi Handwriting</td>
                                            <td>PaperBack</td>
                                            <td>50000</td>
                                        </tr>
                                        <tr>
                                            <td>7G</td>
                                            <td>Charts</td>
                                            <td>PaperBack</td>
                                            <td>5000</td>
                                        </tr>
                                    </tbody>
                                </table>
                                </div>
                                <div class="card-footer text-muted">
                                  2 days ago
                                </div>
                              </div>
                        </div>
                        <div class="col-md-5">
                            <div class="card">
                                <div class="card-header">
                                    Latest Orders
                                </div>
                                <div class="card-body">
                                  <h5 class="card-title">Product Orders</h5>
                                  <div class="streamline">
                                    <div class="sl-item sl-primary">
                                        <div class="sl-content">
                                            <small class="text-muted">100</small>
                                            <p>My English Friend </p>
                                        </div>
                                    </div>
                                    <div class="sl-item sl-danger">
                                        <div class="sl-content">
                                            <small class="text-muted">5000</small>
                                            <p>My Hindi Friend</p>
                                        </div>
                                    </div>
                                    <div class="sl-item sl-success">
                                        <div class="sl-content">
                                            <small class="text-muted">200</small>
                                            <p>Magic English(Videos)</p>
                                        </div>
                                    </div>
                                    <div class="sl-item">
                                        <div class="sl-content">
                                            <small class="text-muted">10000</small>
                                            <p>English Handwriting </p>
                                        </div>
                                    </div>
                                    <div class="sl-item sl-warning">
                                        <div class="sl-content">
                                            <small class="text-muted">4500</small>
                                            <p>My Grammar Guru</p>
                                        </div>
                                    </div>
                                    <div class="sl-item">
                                        <div class="sl-content">
                                            <small class="text-muted">400</small>
                                            <p>Charts </p>
                                        </div>
                                    </div>
                                </div>
                                </div>
                                <div class="card-footer text-muted">
                                  2 days ago
                                </div>
                              </div>
                        </div>
                    </div>



                </div>
            </main>

        </div>
    </div>
</body>

</html>

#preview

#Product.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="../src/css/dstyle.css " />
</head>

<body>



    <div class="wrapper">
        <div class="body-overlay">
            <!-- navbar starts  -->
            <nav class="navbar navbar-expand-lg  navbar-dark  bg-primary ">
                <div class="container-fluid">
                    <!-- <a class="navbar-brand fw-bold text-uppercase text-center " href="#">Online Store Management System</a> -->
                    <!-- <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-start" id="menu"> -->
                    <ul class="navbar-nav">
                        <li class="nav-item text-primary">
                            <a href="#" class="nav-link active">
                                <i class="fs-5 bi-house"></i> Home</span>
                            </a>
                        </li>
                        <li>
                            <a href="#submenu1" data-bs-toggle="collapse" class="nav-link text-truncate">
                                <i class="fs-5 bi-speedometer2"></i> Dashboard</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-grid"></i> Products</span></a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-bookmark-fill"></i> Categories</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-people"></i> Customers</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-table"></i> Orders</span></a>
                        </li>
                        <!-- <li class="dropdown">
                    <a href="#" class="nav-link dropdown-toggle  text-truncate" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fs-5 bi-bootstrap"></i><span class="ms-1 d-none d-sm-inline">Bootstrap</span>
                    </a>
                    <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdown">
                        <li><a class="dropdown-item" href="#">New project...</a></li>
                        <li><a class="dropdown-item" href="#">Settings</a></li>
                        <li><a class="dropdown-item" href="#">Profile</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Sign out</a></li>
                    </ul>
                </li> -->


                    </ul>

                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <form class="d-flex ms-auto" role="search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search Product"
                                    aria-label="Recipient's username" aria-describedby="button-addon2">
                                <button class="btn btn-primary" type="button" id="button-addon2">
                                    <i class="bi bi-search"></i>
                                </button>
                            </div>
                        </form>

                        <ul class="navbar-nav  mb-2 mb-lg-0">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    <i class="bi bi-people-fill"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-lg-end">
                                    <li><button class="dropdown-item" type="button">Action</button></li>
                                    <li><button class="dropdown-item" type="button">Another action</button></li>
                                    <li><button class="dropdown-item" type="button">Something else here</button></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- navbar ends -->

            <main class="mt-2 pt-2 ">
                <div class="container">
                    <!-- Dashboard             -->
                    <div class="row">
                        <div class="col-md-12">
                            <h1> Product </h1>
                        </div>
                    </div>

                    <div class="row">
                        <!-- Add -->
                        <div class="col-md-12">
                            <button type="button" class="btn btn-outline-primary " data-bs-toggle="modal"
                                data-bs-target="#addProductModal">
                                Add
                            </button>
                            <div class="modal fade" id="addProductModal" tabindex="-1"
                                aria-labelledby="addProductModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="addProductModalLabel">Add Product</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form>
                                                <div class="mb-3">
                                                    <label for="productName" class="form-label">Product Name</label>
                                                    <input type="text" class="form-control" id="productName">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="productPrice" class="form-label">Product Price</label>
                                                    <input type="number" class="form-control" id="productPrice">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="stock" class="form-label">Stock</label>
                                                    <input type="number" class="form-control" id="stock">
                                                </div>
                                                <div class="mb-3">
                                                    <!-- <label for="dropdownMenuButton" class="form-label">Category</label> -->
                                                    <div class="dropdown">
                                                        <button class="btn btn-primary dropdown-toggle" type="button"
                                                            id="dropdownMenuButton" data-bs-toggle="dropdown"
                                                            aria-expanded="false">
                                                            Category
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                            <li><a class="dropdown-item" href="#">PaperBack</a></li>
                                                            <li><a class="dropdown-item" href="#">e-book</a></li>
                                                            <li><a class="dropdown-item" href="#">Video</a></li>
                                                            <li><a class="dropdown-item" href="#">Paperback+Video</a>
                                                            </li>
                                                            <li><a class="dropdown-item" href="#">e-book+Video</a></li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"> Close</button>
                                            <button type="button" class="btn btn-primary"> Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- </div> -->
                            <!-- Edit -->
                            <!-- <div class="col-md-3"> -->
                            <button type="button" class="btn btn-outline-primary  ml-5 " data-bs-toggle="modal"
                                data-bs-target="#editProductModal">
                                Edit
                            </button>
                            <div class="modal fade" id="editProductModal" tabindex="-1"
                                aria-labelledby="addProductModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="addProductModalLabel">Edit </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form>
                                                <div class="mb-3">
                                                    <label for="productName" class="form-label">Product Name</label>
                                                    <input type="text" class="form-control" id="productName">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="productPrice" class="form-label">Product Price</label>
                                                    <input type="number" class="form-control" id="productPrice">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="stock" class="form-label">Stock</label>
                                                    <input type="number" class="form-control" id="stock">
                                                </div>
                                                <div class="mb-3">
                                                    <!-- <label for="dropdownMenuButton" class="form-label">Category</label> -->
                                                    <div class="dropdown">
                                                        <button class="btn btn-primary dropdown-toggle" type="button"
                                                            id="dropdownMenuButton" data-bs-toggle="dropdown"
                                                            aria-expanded="false">
                                                            Category
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                            <li><a class="dropdown-item" href="#">PaperBack</a></li>
                                                            <li><a class="dropdown-item" href="#">e-book</a></li>
                                                            <li><a class="dropdown-item" href="#">Video</a></li>
                                                            <li><a class="dropdown-item" href="#">Paperback+Video</a>
                                                            </li>
                                                            <li><a class="dropdown-item" href="#">e-book+Video</a></li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"> Close</button>
                                            <button type="button" class="btn btn-primary"> Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- </div> -->
                            <!-- Delete -->
                            <!-- <div class="col-md-3"> -->
                            <button type="button" class="btn btn-outline-danger  ml-5 " data-bs-toggle="modal"
                                data-bs-target="#delModal">
                                Delete
                            </button>
                            <div class="modal fade" id="delModal" tabindex="-1" role="dialog"
                                aria-labelledby="delModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <div class="container d-flex pl-0">
                                                <h5 class="modal-title ml-2" id="delModalLabel"> <i
                                                        class="bi bi-trash"></i>Delete Product? </h5>
                                            </div>
                                            <button type="button" class="btn-close" data-dismiss="modal"
                                                aria-label="Close"> </button>
                                            <!-- <span aria-hidden="true">&times;</span> -->
                                        </div>
                                        <div class="modal-body">
                                            <p class="text-muted">If you delete the will be gone forever. Are you sure
                                                you want to proceed?</p>
                                            <form>
                                                <div class="mb-3">
                                                    <label for="productName" class="form-label">Product Name</label>
                                                    <input type="text" class="form-control" id="productName">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="productPrice" class="form-label">Product Price</label>
                                                    <input type="number" class="form-control" id="productPrice">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="stock" class="form-label">Stock</label>
                                                    <input type="number" class="form-control" id="stock">
                                                </div>
                                                <div class="mb-3">
                                                    <!-- <label for="dropdownMenuButton" class="form-label">Category</label> -->
                                                    <div class="dropdown">
                                                        <button class="btn btn-primary dropdown-toggle" type="button"
                                                            id="dropdownMenuButton" data-bs-toggle="dropdown"
                                                            aria-expanded="false">
                                                            Category
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                            <li><a class="dropdown-item" href="#">PaperBack</a></li>
                                                            <li><a class="dropdown-item" href="#">e-book</a></li>
                                                            <li><a class="dropdown-item" href="#">Video</a></li>
                                                            <li><a class="dropdown-item" href="#">Paperback+Video</a>
                                                            </li>
                                                            <li><a class="dropdown-item" href="#">e-book+Video</a></li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-light"
                                                data-dismiss="modal">Cancel</button>
                                            <button type="button" class="btn btn-danger">Delete</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- </div> -->
                            <!-- Product List  -->
                            <!-- <div class="col-md-3"> -->
                            <button type="button" class="btn btn-outline-primary  ml-5 " data-bs-toggle="disp"
                                data-bs-target="#productlist">
                                Display
                            </button>
                        </div>
                    </div>
     
                    <div class="row">
                        <div class="col-md-12">
                            <section class="disp" id="productlist" aria-labelledby="productlist" tabindex="-1"
                                role="dialog" aria-hidden="true">

                                <!-- <div class="modal fade" id="productlistModal" tabindex="-1" role="dialog"
                                    aria-labelledby="delModalLabel" aria-hidden="true"> -->
                                <div class="container mt-5 px-2">
                                    <div class="mb-2 d-flex justify-content-between align-items-center">

                                        <div class="position-relative">
                                            <span class="position-absolute search"><i class="fa fa-search"></i></span>
                                            <input class="form-control w-100" placeholder="Search by product name">
                                        </div>

                                        <div class="px-2">

                                            <span>Filters <i class="bi bi-caret-down"></i></span>
                                            <i class="bi bi-three-dots ms-3"></i></i>
                                        </div>

                                    </div>
                                    <!-- <div class="table-responsive"> -->



                                    <table class="table table-hover table-responsive table-bordered">
                                        <thead>
                                            <tr>

                                                <!-- <th scope="col" width="5%">#</th>
                                                            <th scope="col" width="20%">Product Name</th>
                                                            <th scope="col" width="20%">Price (Rs.)</th>
                                                            <th scope="col" width="10%">Stock</th>
                                                            <th scope="col" width="20%">Category</th> -->
                                                <th scope="col">#</th>
                                                <th scope="col">Product Name</th>
                                                <th scope="col">Price (Rs.)</th>
                                                <th scope="col">Stock</th>
                                                <th scope="col">Category</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <td>1</td>
                                            <td>My English Friend</td>
                                            <td>5000</td>
                                            <td>10000</td>
                                            <td>E-book</td>
                                            <tr>
                                                <th scope="row">2</th>
                                                <td>Magic English</td>
                                                <td>500</td>
                                                <td>50000</td>
                                                <td> Paperback</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">3</th>
                                                <td>My Hindi Friend</td>
                                                <td>2500</td>
                                                <td>20000</td>
                                                <td> Paperback</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">4</th>
                                                <td>English Handwriting</td>
                                                <td>2500</td>
                                                <td>40000</td>
                                                <td> Paperback</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <!-- </div> -->




                                    <div class="mb-2 d-flex justify-content-between align-items-center">
                                        <nav aria-label="...">
                                            <ul class="pagination">
                                                <li class="page-item ">
                                                    <a class="page-link" href="#" aria-label="Previous">
                                                        <span aria-hidden="true">&laquo;</span>
                                                    </a>
                                                </li>
                                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                                <li class="page-item active" aria-current="page">
                                                    <a class="page-link" href="#">2</a>
                                                </li>
                                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                                <li class="page-item">
                                                    <a class="page-link" href="#" aria-label="Previous">
                                                        <span aria-hidden="true">&raquo;</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>

                            </section>
                        </div>
                    </div>


                </div>
            </main>

            <!-- Include Bootstrap JS -->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.7.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>



</body>

</html>

#Product .html

#Category.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="../src/css/dstyle.css " />
</head>

<body>



    <div class="wrapper">
        <div class="body-overlay">
            <!-- navbar starts  -->
            <nav class="navbar navbar-expand-lg  navbar-dark  bg-primary ">
                <div class="container-fluid">
                    <!-- <a class="navbar-brand fw-bold text-uppercase text-center " href="#">Online Store Management System</a> -->
                    <!-- <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-start" id="menu"> -->
                    <ul class="navbar-nav">
                        <li class="nav-item text-primary">
                            <a href="#" class="nav-link active">
                                <i class="fs-5 bi-house"></i> Home</span>
                            </a>
                        </li>
                        <li>
                            <a href="#submenu1" data-bs-toggle="collapse" class="nav-link text-truncate">
                                <i class="fs-5 bi-speedometer2"></i> Dashboard</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-grid"></i> Products</span></a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-bookmark-fill"></i> Categories</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-people"></i> Customers</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-table"></i> Orders</span></a>
                        </li>
                        <!-- <li class="dropdown">
                    <a href="#" class="nav-link dropdown-toggle  text-truncate" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fs-5 bi-bootstrap"></i><span class="ms-1 d-none d-sm-inline">Bootstrap</span>
                    </a>
                    <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdown">
                        <li><a class="dropdown-item" href="#">New project...</a></li>
                        <li><a class="dropdown-item" href="#">Settings</a></li>
                        <li><a class="dropdown-item" href="#">Profile</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Sign out</a></li>
                    </ul>
                </li> -->


                    </ul>

                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <form class="d-flex ms-auto" role="search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search Product"
                                    aria-label="Recipient's username" aria-describedby="button-addon2">
                                <button class="btn btn-primary" type="button" id="button-addon2">
                                    <i class="bi bi-search"></i>
                                </button>
                            </div>
                        </form>

                        <ul class="navbar-nav  mb-2 mb-lg-0">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    <i class="bi bi-people-fill"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-lg-end">
                                    <li><button class="dropdown-item" type="button">Action</button></li>
                                    <li><button class="dropdown-item" type="button">Another action</button></li>
                                    <li><button class="dropdown-item" type="button">Something else here</button></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- navbar ends -->

            <main class="mt-2 pt-2 ">
                <div class="container">
                    <!-- Dashboard             -->
                    <div class="row">
                        <div class="col-md-12">
                            <h1 class="cat"> Category </h1>
                        </div>
                    </div>

                    <div class="row">
                        <!-- Add -->
                        <div class="col-md-12">
                            <button type="button" class="btn btn-outline-primary " data-bs-toggle="modal"
                                data-bs-target="#addProductModal">
                                Add
                            </button>
                            <div class="modal fade" id="addProductModal" tabindex="-1"
                                aria-labelledby="addProductModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="addProductModalLabel">Add Category</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                  
                                            <form>
                                                <div class="mb-3">
                                                    <label for="categoryname " class="form-label">Select Category</label>
                                                    <input type="text" class="form-control" id="categoryname">                                                  
                                                </div>
                                            
                                                <div class="mb-3">
                                                    <!-- <label for="dropdownMenuButton" class="form-label">Category</label> -->
                                                    <div class="dropdown">
                                                        <button class="btn  btn-lg btn-success  dropdown-toggle" type="button"
                                                            id="dropdownMenuButton" data-bs-toggle="dropdown"
                                                            aria-expanded="false">
                                                            Category <span class="caret"></span>
                                                        </button>                                                      
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                            <li><a class="dropdown-item" href="#">PaperBack</a></li>
                                                            <li><a class="dropdown-item" href="#">e-book</a></li>
                                                            <li><a class="dropdown-item" href="#">Video</a></li>
                                                            <li><a class="dropdown-item" href="#">Paperback+Video</a>                              </li>
                                                            <li><a class="dropdown-item" href="#">e-book+Video</a></li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"> Close</button>
                                            <button type="button" class="btn btn-primary"> Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          
                            <!-- Edit -->                            
                            <button type="button" class="btn btn-outline-primary  ml-5 " data-bs-toggle="modal"
                                data-bs-target="#editProductModal">
                                Edit
                            </button>
                            <div class="modal fade" id="editProductModal" tabindex="-1"
                                aria-labelledby="addProductModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="addProductModalLabel">Edit </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form>
                                                <div class="mb-3">
                                                    <label for="category" class="form-label">Existing Category</label>
                                                    <input type="text" class="form-control" id="category">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="category" class="form-label">New Category</label>
                                                    <input type="text" class="form-control" id="category">
                                                </div>
                                                
                                                <div class="mb-3">
                                                    <!-- <label for="dropdownMenuButton" class="form-label">Category</label> -->
                                                    <div class="dropdown">
                                                        <button class="btn btn-primary dropdown-toggle" type="button"
                                                            id="dropdownMenuButton" data-bs-toggle="dropdown"
                                                            aria-expanded="false">
                                                            Category
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                            <li><a class="dropdown-item" href="#">PaperBack</a></li>
                                                            <li><a class="dropdown-item" href="#">e-book</a></li>
                                                            <li><a class="dropdown-item" href="#">Video</a></li>
                                                            <li><a class="dropdown-item" href="#">Paperback+Video</a></li>
                                                            <li><a class="dropdown-item" href="#">e-book+Video</a></li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"> Close</button>
                                            <button type="button" class="btn btn-primary"> Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                           
                            <!-- Delete -->                           
                            <button type="button" class="btn btn-outline-danger  ml-5 " data-bs-toggle="modal"
                                data-bs-target="#delModal">
                                Delete
                            </button>
                            <div class="modal fade" id="delModal" tabindex="-1" role="dialog"
                                aria-labelledby="delModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <div class="container d-flex pl-0">
                                                <h5 class="modal-title ml-2" id="delModalLabel"> <i
                                                        class="bi bi-trash"></i>Delete Category? </h5>
                                            </div>
                                            <button type="button" class="btn-close" data-dismiss="modal"
                                                aria-label="Close"> </button>
                                            <!-- <span aria-hidden="true">&times;</span> -->
                                        </div>
                                        <div class="modal-body">
                                            <p class="text-muted">If you delete the category will be deleted. Are you sure
                                                you want to proceed?</p>
                                            <form>
                                                <div class="mb-3">
                                                    <label for="category" class="form-label">Category Name</label>
                                                    <input type="text" class="form-control" id="category">
                                                </div>
                                                
                                                <div class="mb-3">
                                                    <!-- <label for="dropdownMenuButton" class="form-label">Category</label> -->
                                                    <div class="dropdown">
                                                        <button class="btn btn-primary dropdown-toggle" type="button"
                                                            id="dropdownMenuButton" data-bs-toggle="dropdown"
                                                            aria-expanded="false">
                                                            Category
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                            <li><a class="dropdown-item" href="#">PaperBack</a></li>
                                                            <li><a class="dropdown-item" href="#">e-book</a></li>
                                                            <li><a class="dropdown-item" href="#">Video</a></li>
                                                            <li><a class="dropdown-item" href="#">Paperback+Video</a>
                                                            </li>
                                                            <li><a class="dropdown-item" href="#">e-book+Video</a></li>
                                                        </ul>
                                                    </div>

                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-light"
                                                data-dismiss="modal">Cancel</button>
                                            <button type="button" class="btn btn-danger">Delete</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                                       
                            <!-- Display  -->                          
                            <button type="button" class="btn btn-outline-primary  ml-5 " data-bs-toggle="disp"
                                data-bs-target="#productlist">
                                Display
                            </button>
                        </div>
                    </div>
     <!-- Display a Category  -->
                    <div class="row">
                        <div class="col-md-12">
                            <section class="disp" id="productlist" aria-labelledby="productlist" tabindex="-1"
                                role="dialog" aria-hidden="true">

                                <!-- <div class="modal fade" id="productlistModal" tabindex="-1" role="dialog"
                                    aria-labelledby="delModalLabel" aria-hidden="true"> -->
                                <div class="container mt-5 px-2">
                                    <div class="mb-2 d-flex justify-content-between align-items-center">

                                        <div class="position-relative">
                                            <span class="position-absolute search"><i class="fa fa-search"></i></span>
                                            <input class="form-control w-100" placeholder="Search by Category">
                                        </div>

                                        <div class="px-2">

                                            <span>Filters <i class="bi bi-caret-down"></i></span>
                                            <i class="bi bi-three-dots ms-3"></i></i>
                                        </div>

                                    </div>
                                     <table class="table table-hover table-responsive table-bordered">
                                        <thead>
                                            <tr>                                           
                                                <th scope="col">#</th>
                                                <th scope="col">Category</th>
                                                <th scope="col">Number of Products (Rs.)</th>
                                               
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <td>1</td>
                                            <td>PaperBack </td>
                                            <td>5</td>
                                          
                                            <tr>
                                                <th scope="row">2</th>
                                                <td>e-book</td>
                                                <td>5</td>
                                             
                                            </tr>
                                            <tr>
                                                <th scope="row">3</th>
                                                <td>Video</td>
                                                <td>2</td>
                                           
                                            </tr>
                                            <tr>
                                                <th scope="row">4</th>
                                                <td>Paperback+Video</td>
                                                <td>2</td>
                                               
                                            </tr>
                                        </tbody>
                                    </table>
                            

<!-- Pagination -->

                                    <div class="mb-2 d-flex justify-content-between align-items-center">
                                        <nav aria-label="...">
                                            <ul class="pagination">
                                                <li class="page-item ">
                                                    <a class="page-link" href="#" aria-label="Previous">
                                                        <span aria-hidden="true">&laquo;</span>
                                                    </a>
                                                </li>
                                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                                <li class="page-item active" aria-current="page">
                                                    <a class="page-link" href="#">2</a>
                                                </li>
                                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                                <li class="page-item">
                                                    <a class="page-link" href="#" aria-label="Previous">
                                                        <span aria-hidden="true">&raquo;</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>

                            </section>
                        </div>
                    </div>
                </div>
            </main>


            <!-- Include Bootstrap JS -->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.7.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>



</body>

</html>

#customers.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="../src/css/dstyle.css " />
</head>

<body>
    <div class="wrapper">
        <div class="body-overlay">
            <!-- navbar starts  -->
            <nav class="navbar navbar-expand-lg  navbar-dark  bg-primary ">
                <div class="container-fluid">
                    <!-- <a class="navbar-brand fw-bold text-uppercase text-center " href="#">Online Store Management System</a> -->
                    <!-- <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-start" id="menu"> -->
                    <ul class="navbar-nav">
                        <li class="nav-item text-primary">
                            <a href="#" class="nav-link active">
                                <i class="fs-5 bi-house"></i> Home</span>
                            </a>
                        </li>
                        <li>
                            <a href="#submenu1" data-bs-toggle="collapse" class="nav-link text-truncate">
                                <i class="fs-5 bi-speedometer2"></i> Dashboard</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-grid"></i> Products</span></a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-bookmark-fill"></i> Categories</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-people"></i> Customers</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-table"></i> Orders</span></a>
                        </li>
                        <!-- <li class="dropdown">
                    <a href="#" class="nav-link dropdown-toggle  text-truncate" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fs-5 bi-bootstrap"></i><span class="ms-1 d-none d-sm-inline">Bootstrap</span>
                    </a>
                    <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdown">
                        <li><a class="dropdown-item" href="#">New project...</a></li>
                        <li><a class="dropdown-item" href="#">Settings</a></li>
                        <li><a class="dropdown-item" href="#">Profile</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Sign out</a></li>
                    </ul>
                </li> -->


                    </ul>

                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <form class="d-flex ms-auto" role="search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search Product"
                                    aria-label="Recipient's username" aria-describedby="button-addon2">
                                <button class="btn btn-primary" type="button" id="button-addon2">
                                    <i class="bi bi-search"></i>
                                </button>
                            </div>
                        </form>

                        <ul class="navbar-nav  mb-2 mb-lg-0">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    <i class="bi bi-people-fill"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-lg-end">
                                    <li><button class="dropdown-item" type="button">Action</button></li>
                                    <li><button class="dropdown-item" type="button">Another action</button></li>
                                    <li><button class="dropdown-item" type="button">Something else here</button></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- navbar ends -->

            <main class="mt-2 pt-2 ">
                <div class="container">
                    <!-- Dashboard             -->
                    <div class="row">
                        <div class="col-md-12">
                            <h1 class="cat"> Customers </h1>
                        </div>
                    </div>

                    <div class="row">
                        <!-- Add -->
                        <div class="col-md-12">
                            <button type="button" class="btn btn-outline-primary " data-bs-toggle="modal"
                                data-bs-target="#addCustomerModal">
                                Add
                            </button>
                            <div class="modal fade" id="addCustomerModal" tabindex="-1"
                                aria-labelledby="addCustomerModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="addCustomerModalLabel">Add Customer </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                  
                                            <form>
                                                
                                                <div class="mb-3">
                                                    <label for="customerName" class="form-label"> Name</label>
                                                    <input type="text" class="form-control" id="customerName">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="cemail" class="form-label">Email</label>
                                                    <input type="email" class="form-control" id="cemail" placeholder="Enter email id">
                                                </div>
                                                
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"> Close</button>
                                            <button type="button" class="btn btn-primary"> Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                          
                            <!-- Edit -->                            
                            <button type="button" class="btn btn-outline-primary  ml-5 " data-bs-toggle="modal"
                                data-bs-target="#editcdetail">
                                Edit
                            </button>
                            <div class="modal fade" id="editcdetail" tabindex="-1"
                                aria-labelledby="editcdetailLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="editcdetailModalLabel">Edit </h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form>
                                                <div class="mb-3">
                                                    <label for="customerName" class="form-label"> Name</label>
                                                    <input type="text" class="form-control" id="customerName">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="cemail" class="form-label">Email</label>
                                                    <input type="email" class="form-control" id="cemail" placeholder="Enter email id">
                                                </div>
                                                
                                                
                                               
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary"> Close</button>
                                            <button type="button" class="btn btn-primary"> Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                           
                            <!-- Delete -->                           
                            <button type="button" class="btn btn-outline-danger  ml-5 " data-bs-toggle="modal"
                                data-bs-target="#delcustModal">
                                Delete
                            </button>
                            <div class="modal fade" id="delcustModal" tabindex="-1" role="dialog"
                                aria-labelledby="delcustModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <div class="container d-flex pl-0">
                                                <h5 class="modal-title ml-2" id="delcustModalLabel"> <i
                                                        class="bi bi-trash"></i>Delete Customer? </h5>
                                            </div>
                                            <button type="button" class="btn-close" data-dismiss="modal"
                                                aria-label="Close"> </button>
                                            <!-- <span aria-hidden="true">&times;</span> -->
                                        </div>
                                        <div class="modal-body">
                                            <p class="text-muted">If you delete customer details will be deleted. Are you sure
                                                you want to proceed?</p>
                                            <form>
                                               
                                                <div class="mb-3">
                                                    <label for="custdetail" class="form-label"> Name</label>
                                                    <input type="text" class="form-control" id="custdetail">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="custdetail" class="form-label">Email</label>
                                                    <input type="email" class="form-control" id="custdetail">
                                                </div>
                                             
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-light"
                                                data-dismiss="modal">Cancel</button>
                                            <button type="button" class="btn btn-danger">Delete</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                                       
                            <!-- Display  -->                          
                            <button type="button" class="btn btn-outline-primary  ml-5 " data-bs-toggle="disp"
                                data-bs-target="#productlist">
                                Display
                            </button>
                        </div>
                    </div>
     <!-- Display a Category  -->
                    <div class="row">
                        <div class="col-md-12">
                            <section class="disp" id="productlist" aria-labelledby="productlist" tabindex="-1"
                                role="dialog" aria-hidden="true">                              
                                <div class="container mt-5 px-2">
                                    <div class="mb-2 d-flex justify-content-between align-items-center">

                                        <div class="position-relative">
                                            <span class="position-absolute search"><i class="fa fa-search"></i></span>
                                            <input class="form-control w-100" placeholder="Search by Customer">
                                        </div>

                                        <div class="px-2">

                                            <span>Filters <i class="bi bi-caret-down"></i></span>
                                            <i class="bi bi-three-dots ms-3"></i></i>
                                        </div>

                                    </div>
                                     <table class="table table-hover table-responsive table-bordered">
                                        <thead>
                                            <tr>                                           
                                                <th scope="col">#</th>
                                                <th scope="col">Customer Name</th>
                                                <th scope="col">Email</th>
                                               
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <td>1</td>
                                            <td>Ashish </td>
                                            <td>ash@gmail.com</td>
                                          
                                            <tr>
                                                <th scope="row">2</th>
                                                <td>Anu</td>
                                                <td>anu@gmail.com</td>
                                             
                                            </tr>
                                            <tr>
                                                <th scope="row">3</th>
                                                <td>Siddarth</td>
                                                <td>sid@gmail.com</td>
                                           
                                            </tr>
                                            <tr>
                                                <th scope="row">4</th>
                                                <td>Radha</td>
                                                <td>ard@gmail.com</td>
                                               
                                            </tr>
                                        </tbody>
                                    </table>
                            

<!-- Pagination -->

                                    <div class="mb-2 d-flex justify-content-between align-items-center">
                                        <nav aria-label="...">
                                            <ul class="pagination">
                                                <li class="page-item ">
                                                    <a class="page-link" href="#" aria-label="Previous">
                                                        <span aria-hidden="true">&laquo;</span>
                                                    </a>
                                                </li>
                                                <li class="page-item"><a class="page-link" href="#">1</a></li>
                                                <li class="page-item active" aria-current="page">
                                                    <a class="page-link" href="#">2</a>
                                                </li>
                                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                                <li class="page-item">
                                                    <a class="page-link" href="#" aria-label="Previous">
                                                        <span aria-hidden="true">&raquo;</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>

                            </section>
                        </div>
                    </div>
                </div>
            </main>
           <!-- Include Bootstrap JS -->
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.7.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
</body>
</html>

#Customers Preview

[basu-cse]

Hi Akash,
I am sharing my repo : https://github.com/basu-cse/storemanagement
4 Ajax pagination list pages along with the dashboard page I have done. Add and Edit functionalities are still pending.

[starvikas1988]

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Online Store Management System </title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
        crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" href="../src/css/styles.css " />
</head>

<body>
    <div class="wrapper">
        <div class="body-overlay">
            <!-- navbar starts  -->
            <nav class="navbar navbar-expand-lg  navbar-dark  bg-primary ">
                <div class="container-fluid">
                    <!-- <a class="navbar-brand fw-bold text-uppercase text-center " href="#">Online Store Management System</a> -->
                    <!-- <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-start" id="menu"> -->
                    <ul class="navbar-nav">
                        <li class="nav-item text-primary">
                            <a href="#" class="nav-link active">
                                <i class="fs-5 bi-house"></i> Home</span>
                            </a>
                        </li>
                        <li>
                            <a href="#submenu1" data-bs-toggle="collapse" class="nav-link text-truncate">
                                <i class="fs-5 bi-speedometer2"></i> Dashboard</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-grid"></i> Products</span></a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-bookmark-fill"></i> Categories</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-people"></i> Customers</span> </a>
                        </li>
                        <li>
                            <a href="#" class="nav-link text-truncate">
                                <i class="fs-5 bi-table"></i> Orders</span></a>
                        </li>
                        <!-- <li class="dropdown">
                    <a href="#" class="nav-link dropdown-toggle  text-truncate" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fs-5 bi-bootstrap"></i><span class="ms-1 d-none d-sm-inline">Bootstrap</span>
                    </a>
                    <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdown">
                        <li><a class="dropdown-item" href="#">New project...</a></li>
                        <li><a class="dropdown-item" href="#">Settings</a></li>
                        <li><a class="dropdown-item" href="#">Profile</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Sign out</a></li>
                    </ul>
                </li> -->


                    </ul>
                
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <form class="d-flex ms-auto" role="search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Recipient's username"
                                    aria-label="Recipient's username" aria-describedby="button-addon2">
                                <button class="btn btn-primary" type="button" id="button-addon2">
                                    <i class="bi bi-search"></i>
                                </button>
                            </div>
                        </form>

                        <ul class="navbar-nav  mb-2 mb-lg-0">
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    <i class="bi bi-people-fill"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-lg-end">
                                    <li><button class="dropdown-item" type="button">Action</button></li>
                                    <li><button class="dropdown-item" type="button">Another action</button></li>
                                    <li><button class="dropdown-item" type="button">Something else here</button></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- navbar ends -->
            <main class="mt-2 pt-2">
                <div class="container-fluid">
                    <!-- Dashboard             -->
                    <div class="row mb-2">
                        <div class="col-md-12">
                            <h1> DashBoard </h1>
                        </div>
                    </div>
                    <!-- Card Row  -->
                    <div class="row">
                        <div class="col-md-3 mb-3 ">
                            <div class="card  bg-danger text-white h-100">
                                <div class="card-header">
                                    <i class="bi bi-bookmark-fill"></i>                               </div>
                                <div class="card-body py-5"><h4>Total Products  </h4>
                                    <h5 class="card-title">100</h5>

                                </div>
                                <div class="card-footer d-flex">
                                    View Details
                                    <span class="ms-auto">
                                        <i class="bi bi-chevron-right"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3 ">
                            <div class="card  bg-warning text-white h-100">
                                <div class="card-header">
                                    <i class="fs-5 bi-grid"></i>
                                </div>
                                <div class="card-body py-5"><h4><strong> Categories</strong> </h4>
                                    <h5 class="card-title">140</h5>
                                </div>
                                <div class="card-footer d-flex">
                                    View Details
                                    <span class="ms-auto">
                                        <i class="bi bi-chevron-right"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3 ">
                            <div class="card  bg-success text-white h-100">
                                <div class="card-header">
                                  
                                    <i class="fs-5 bi-person-badge"></i>
                                </div>
                                <div class="card-body py-5"><h4><strong> Customers</strong> </h4>
                                    <h5 class="card-title">50,000</h5>
                                </div>
                                <div class="card-footer d-flex">
                                    View Details
                                    <span class="ms-auto">
                                        <i class="bi bi-chevron-right"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3 ">
                            <div class="card  bg-secondary text-white h-100">
                                <div class="card-header">
                                    <i class="fs-5 bi-cart"></i>
                                </div>
                                <div class="card-body py-5"><h4><strong> Orders</strong> </h4>
                                    <h5 class="card-title">50,000</h5>
                                
                                </div>
                                <div class="card-footer d-flex">
                                    View Details
                                    <span class="ms-auto">
                                        <i class="bi bi-chevron-right"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Card Row ends -->

                    <!-- Recently added products(7) , latest orders (5) -->
                    <div class="row">
                        <div class="col-md-7">
                            <div class="card "  style="min-height: 485px">
                                <div class="card-header">
                                 Recently Added Products
                                </div>
                                <div class="card-body table-responsive">
                                  <h5 class="card-title">Products</h5>
                                  <table class="table table-hover">
                                    <thead class="text-primary">
                                        <tr><th>Code</th>
                                        <th>Name</th>
                                        <th>Category</th>
                                        <th>Quantity</th>
                                    </tr></thead>
                                    <tbody>
                                        <tr>
                                            <td>1A</td>
                                            <td>My English Friend</td>
                                            <td>E-Book</td>
                                            <td>25000</td>
                                        </tr>
                                        <tr>
                                            <td>2B</td>
                                            <td>Magic English</td>
                                            <td>Paperback</td>
                                            <td>50000</td>
                                        </tr>
                                        <tr>
                                            <td>3C</td>
                                            <td>My Grammar Guru</td>
                                            <td>PaperBack</td>
                                            <td>10000</td>
                                        </tr>
                                        <tr>
                                            <td>4D</td>
                                            <td>My Hindi Friend</td>
                                            <td>E-book</td>
                                            <td>40000</td>
                                        </tr>
                                        <tr>
                                            <td>5E</td>
                                            <td>English Handwriting</td>
                                            <td>PaperBack</td>
                                            <td>60000</td>
                                        </tr>
                                        <tr>
                                            <td>6F</td>
                                            <td>Hindi Handwriting</td>
                                            <td>PaperBack</td>
                                            <td>50000</td>
                                        </tr>
                                        <tr>
                                            <td>7G</td>
                                            <td>Charts</td>
                                            <td>PaperBack</td>
                                            <td>5000</td>
                                        </tr>
                                    </tbody>
                                </table>
                                </div>
                                <div class="card-footer text-muted">
                                  2 days ago
                                </div>
                              </div>
                        </div>
                        <div class="col-md-5">
                            <div class="card">
                                <div class="card-header">
                                    Latest Orders
                                </div>
                                <div class="card-body">
                                  <h5 class="card-title">Product Orders</h5>
                                  <div class="streamline">
                                    <div class="sl-item sl-primary">
                                        <div class="sl-content">
                                            <small class="text-muted">100</small>
                                            <p>My English Friend </p>
                                        </div>
                                    </div>
                                    <div class="sl-item sl-danger">
                                        <div class="sl-content">
                                            <small class="text-muted">5000</small>
                                            <p>My Hindi Friend</p>
                                        </div>
                                    </div>
                                    <div class="sl-item sl-success">
                                        <div class="sl-content">
                                            <small class="text-muted">200</small>
                                            <p>Magic English(Videos)</p>
                                        </div>
                                    </div>
                                    <div class="sl-item">
                                        <div class="sl-content">
                                            <small class="text-muted">10000</small>
                                            <p>English Handwriting </p>
                                        </div>
                                    </div>
                                    <div class="sl-item sl-warning">
                                        <div class="sl-content">
                                            <small class="text-muted">4500</small>
                                            <p>My Grammar Guru</p>
                                        </div>
                                    </div>
                                    <div class="sl-item">
                                        <div class="sl-content">
                                            <small class="text-muted">400</small>
                                            <p>Charts </p>
                                        </div>
                                    </div>
                                </div>
                                </div>
                                <div class="card-footer text-muted">
                                  2 days ago
                                </div>
                              </div>
                        </div>
                    </div>



                </div>
            </main>

        </div>
    </div>
</body>

</html>

[bipin-coded]

dashbord.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard | Online Management System</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <!-- Box icon CSS   -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>

    <!-- CSS -->
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">OSM</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="dashboard.html">Dashboard</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="products.html">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="categories.html">Categories</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="customers.html">Customers</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="orders.html">Orders</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Cards -->
    <section class="container-fluid">
        <div class="row">
            <div class="cardBox">
                <a href="products.html" class="card">
                    <div>
                        <div class="numbers">230</div>
                        <div class="cardName">Products</div>
                    </div>
                    <div class="iconBox">
                        <i class='bx bx-cart-alt'></i>
                    </div>
                </a>
                <a href="categories.html" class="card">
                    <div>
                        <div class="numbers">1,000</div>
                        <div class="cardName">Categories</div>
                    </div>
                    <div class="iconBox">
                        <i class='bx bx-category'></i>
                    </div>
                </a>
                <a href="customers.html" class="card">
                    <div>
                        <div class="numbers">150</div>
                        <div class="cardName">Customers</div>
                    </div>
                    <div class="iconBox">
                        <i class='bx bx-user'></i>
                    </div>
                </a>
                <a href="orders.html" class="card">
                    <div>
                        <div class="numbers">45</div>
                        <div class="cardName">Orders</div>
                    </div>
                    <div class="iconBox">
                        <i class='bx bx-dollar'></i>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <!-- Recent Products -->

    <section class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <div class="card " style="min-height: 485px">
                    <div class="card-header">
                        Recent Products
                    </div>
                    <div class="card-body table-responsive"> 
                        <table class="table table-hover">
                            <thead class="text-primary">
                                <tr>
                                    <th>Code</th>
                                    <th>Product Name</th>
                                    <th>Category</th>
                                    <th>Price</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Product 1</td>
                                    <td>Category 1</td>
                                    <td>$44.99</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Product 2</td>
                                    <td>Category 2</td>
                                    <td>$44.99</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Product 3</td>
                                    <td>Category 3</td>
                                    <td>$44.99</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>Product 4</td>
                                    <td>Category 4</td>
                                    <td>$44.99</td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>Product 5</td>
                                    <td>Category 5</td>
                                    <td>$44.99</td>
                                </tr>
                            </tbody>
                        </table>
                    </div> 
                </div>
            </div> 
        </div>
    </section>


    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>

    <!-- JS -->
    <script src="js/scripts.js"></script>
</body>

</html>

Output

productes.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard | Online Management System</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <!-- Box icon CSS   -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>

    <!-- CSS -->
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">OSM</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="dashboard.html">Dashboard</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="products.html">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="categories.html">Categories</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="customers.html">Customers</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="orders.html">Orders</a>
                </li>
            </ul>

        </div>
    </nav>

    <!-- Products List -->
    <section class="container-fluid py-3">
        <div class="row">
            <div class="col-md-12">
                <div class="card " style="min-height: 485px">
                    <div class="card-header">
                        Product List
                    </div>
                    <div class="card-body table-responsive"> 
                        <table class="table table-hover">
                            <thead class="text-primary">
                                <tr>
                                    <th>Code</th>
                                    <th>Product Name</th>
                                    <th>Category</th>
                                    <th>Price</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Product 1</td>
                                    <td>Category 1</td>
                                    <td>$44.99</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Product 2</td>
                                    <td>Category 2</td>
                                    <td>$44.99</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Product 3</td>
                                    <td>Category 3</td>
                                    <td>$44.99</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>Product 4</td>
                                    <td>Category 4</td>
                                    <td>$44.99</td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>Product 5</td>
                                    <td>Category 5</td>
                                    <td>$44.99</td>
                                </tr>
                            </tbody>
                        </table>
                    </div> 
                </div>
            </div> 
        </div>
    </section>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>

    <!-- JS -->
    <script src="js/scripts.js"></script>
</body>

</html>

Output

[RevathiSundaramoorthy]

Dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>The Store Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container-fluid mt-2">
        <nav class="navbar navbar-expand-lg bg-success bg-gradient">
            <div class="container-fluid">
                <button class="navbar-toggler"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navitems">
                <span class="navbar-toggler-icon"></span>
                </button>
                <a href="#" class="navbar-brand text-white fst-italic fw-bold">The Store</a>
                <div class="collapse navbar-collapse" id="navitems">
                    <div class="navbar-nav">
                        <a href="#" class="nav-link text-white">Dashboard</a>
                        <a href="myStoreProducts.html" class="nav-link text-white">Products</a>
                        <a href="myStoreCategories.html" class="nav-link text-white">Categories</a>
                        <a href="myStoreCustomers.html" class="nav-link text-white">Customers</a>
                        <a href="myStoreOrders.html" class="nav-link text-white">Orders</a>
                    </div>
                </div>
            </div>
        </nav>
        <div class="container-fluid mt-4">
            <div class="card-group">
                <div class="card bg-success bg-gradient">
                    <div class="card-body">
                        <div class="card-title text-white">Total Products</div>
                        <div class="card-subtitle text-white">1000</div>
                    </div>
                </div>
                <div class="card bg-success bg-gradient">
                    <div class="card-body">
                        <div class="card-title text-white">Total Categories</div>
                        <div class="card-subtitle text-white">15</div>
                    </div>
                </div>
                <div class="card bg-success bg-gradient">
                    <div class="card-body">
                        <div class="card-title text-white">Total Customers</div>
                        <div class="card-subtitle text-white">20</div>
                    </div>
                </div>
                <div class="card bg-success bg-gradient">
                    <div class="card-body">
                        <div class="card-title text-white">Total Orders</div>
                        <div class="card-subtitle text-white">70</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid mt-4">      
                <h5>Recently added Products</h5>
                <div class="table-responsive">
                <table class="table table-sm table-success table-striped table-bordered border-success">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Products</th>
                    <th scope="col">Category</th>
                </tr>
                </thead>
                <tbody class="table-group-divider">
                <tr>
                    <td>1</td>
                    <td>MAcbook Charger</td>
                    <td>Computer & Accessories</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>WiFi Router</td>
                    <td>Computer & Accessories</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Dell Laptop 16 Inch</td>
                    <td>Computer & Accessories</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Outdoor Wall Lantern</td>
                    <td>Home Improvement</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Vaccum insulated Stainless steel bottle</td>
                    <td>Kitchen & Dining</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>40pcs food storage containers</td>
                    <td>Kitchen & Dining</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>USB C Chromebook Charger Replacement</td>
                    <td>Computer & Accessories</td>
                </tr>
                <tr>
                    <td>8</td>
                    <td>HP Laptop 15 Inch 2023</td>
                    <td>Computer & Accessories</td>
                </tr>
                <tr>
                    <td>9</td>
                    <td>Women T-shirts for Summer</td>
                    <td>Clothing</td>
                </tr>
                <tr>
                    <td>10</td>
                    <td>Men T-shirts for Summer</td>
                    <td>Clothing</td>
                </tr>
                </tbody>
                </table>
                </div>
                <div class="table-responsive">
                <h5>Latest Orders</h5>
                <table class="table table-sm table-success table-striped table-bordered border-success">
                <thead class="thead-dark">
                <tr>
                    <th scope="col">Order #</th>
                    <th scope="col">Products</th>
                    <th scope="col">Status</th>
                </tr>
                </thead>
                <tbody class="table-group-divider">
                <tr>
                    <td>10010</td>
                    <td>MAcbook Charger</td>
                    <td>Shipped</td>
                </tr>
                <tr>
                    <td>10009</td>
                    <td>WiFi Router</td>
                    <td>Shipped</td>
                </tr>
                <tr>
                    <td>10008</td>
                    <td>Dell Laptop 16 Inch</td>
                    <td>Placed</td>
                </tr>
                <tr>
                    <td>10007</td>
                    <td>Outdoor Wall Lantern</td>
                    <td>Delivered</td>
                </tr>
                <tr>
                    <td>10006</td>
                    <td>Vaccum insulated Stainless steel bottle</td>
                    <td>Shipped</td>
                </tr>
                <tr>
                    <td>10005</td>
                    <td>40pcs food storage containers</td>
                    <td>Placed</td>
                </tr>
                <tr>
                    <td>10004</td>
                    <td>USB C Chromebook Charger Replacement</td>
                    <td>Delivered</td>
                </tr>
                <tr>
                    <td>10003</td>
                    <td>HP Laptop 15 Inch 2023</td>
                    <td>Delivered</td>
                </tr>
                <tr>
                    <td>10002</td>
                    <td>Women T-shirts for Summer</td>
                    <td>Shipped</td>
                </tr>
                <tr>
                    <td>#10001</td>
                    <td>Men T-shirts for Summer</td>
                    <td>Placed</td>
                </tr>
                </tbody>
                </table>  
                </div>          
        </div>    
    </div>    
</body>
</html>

Products.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <title>The Store Products</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container-fluid mt-2">
        <nav class="navbar navbar-expand-lg bg-success bg-gradient">
            <div class="container-fluid">
                <button type="button"
                    class="navbar-toggler"
                    data-bs-toggle="collapse"
                    data-bs-target="#navitems">
                <span class="navbar-toggler-icon"></span>
                </button>
                <a href="myStoreDashboard.html" class="navbar-brand text-white fst-italic fw-bold">The Store</a>                
                <div class="collapse navbar-collapse" id="navitems">
                    <div class="navbar-nav">
                        <a href="myStoreDashboard.html" class="nav-link text-white">Dashboard</a>
                        <a href="#" class="nav-link text-white">Products</a>
                        <a href="myStoreCategories.html" class="nav-link text-white">Categories</a>
                        <a href="myStoreCustomers.html" class="nav-link text-white">Customers</a>
                        <a href="myStoreOrders.html" class="nav-link text-white">Orders</a>
                    </div>
                </div>
            </div>
        </nav>
        <nav class="navbar navbar-expand-lg bg-success bg-gradient">
            <div class="container-fluid">
                <button type="button"
                class="btn btn-outline-light btn-lg"
                data-bs-toggle="modal"
                data-bs-target="#addProductModal">
                Add Products
                </button>
                <form class="d-flex" role="search" action="#">
                    <input type="search" 
                    class="form-control me-2 "
                    placeholder=
                    "Search Products">      
                    <button type="submit" value="submit"
                    class="btn btn-outline-light">
                    Search
                    </button>  
                </form>
            </div>
        </nav>
        <div class="container-fluid mt-4"> 
            <div class="d-flex justify-content-between align-items-center">         
            <h5>List of Products</h5>
            <nav>
                <ul class="pagination"> 
                    <li class="page-item">
                        <a href="#" class="page-link"><span>&laquo;</span></a>    
                    </li>
                    <li class="page-item"><a href="#" class="page-link">1</a></li>
                    <li class="page-item"><a href="#" class="page-link">2</a></li>
                    <li class="page-item"><a href="#" class="page-link">3</a></li>
                    <li class="page-item">
                        <a href="#" class="page-link"><span>&raquo;</span></a>
                    </li>
                </ul>
            </nav>
            </div>
            <div class="table-responsive">
            <table class="table table-sm table-success table-striped table-bordered border-success">
            <thead class="thead-dark">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Product Name</th>
                <th scope="col">Price</th>
                <th scope="col">Stock</th>
                <th scope="col">Category</th>
                <th scope="col">Actions</th>
            </tr>
            </thead>
            <tbody class="table-group-divider">
            <tr>
                <td>1</td>
                <td>MAcbook Charger</td>
                <td>$30</td>
                <td>15</td>
                <td>Computer & Accessories</td>
                <td>
                    <button class="btn btn-warning btn-sm text-white" data-bs-toggle="modal" title="edit" data-bs-target="#editProductModal">
                        <i class="bi bi-pencil-fill"></i>
                    </button>
                    <button class="btn btn-danger btn-sm text-white" data-bs-toggle="modal" title="delete" data-bs-target="#deleteProductModal">
                        <i class="bi bi-trash-fill"></i>
                    </button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>WiFi Router</td>
                <td>$60</td>
                <td>15</td>
                <td>Computer & Accessories</td>
                <td>
                    <button class="btn btn-warning btn-sm text-white" data-bs-toggle="modal" title="edit" data-bs-target="#editProductModal">
                        <i class="bi bi-pencil-fill"></i>
                    </button>
                    <button class="btn btn-danger btn-sm text-white" data-bs-toggle="modal" title="delete" data-bs-target="#deleteProductModal">
                        <i class="bi bi-trash-fill"></i>
                    </button>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>Dell Laptop 16 Inch</td>
                <td>$1050</td>
                <td>10</td>
                <td>Computer & Accessories</td>
                <td>
                    <button class="btn btn-warning btn-sm text-white" data-bs-toggle="modal" title="edit" data-bs-target="#editProductModal">
                        <i class="bi bi-pencil-fill"></i>
                    </button>
                    <button class="btn btn-danger btn-sm text-white" data-bs-toggle="modal" title="delete" data-bs-target="#deleteProductModal">
                        <i class="bi bi-trash-fill"></i>
                    </button>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>Outdoor Wall Lantern</td>
                <td>$25</td>
                <td>25</td>
                <td>Home Improvement</td>
                <td>
                    <button class="btn btn-warning btn-sm text-white" data-bs-toggle="modal" title="edit" data-bs-target="#editProductModal">
                        <i class="bi bi-pencil-fill"></i>
                    </button>
                    <button class="btn btn-danger btn-sm text-white" data-bs-toggle="modal" title="delete" data-bs-target="#deleteProductModal">
                        <i class="bi bi-trash-fill"></i>
                    </button>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>Vaccum insulated Stainless steel bottle</td>
                <td>$20</td>
                <td>25</td>
                <td>Kitchen & Dining</td>
                <td>
                    <button class="btn btn-warning btn-sm text-white" data-bs-toggle="modal" title="edit" data-bs-target="#editProductModal">
                        <i class="bi bi-pencil-fill"></i>
                    </button>
                    <button class="btn btn-danger btn-sm text-white" data-bs-toggle="modal" title="delete" data-bs-target="#deleteProductModal">
                        <i class="bi bi-trash-fill"></i>
                    </button>
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td>40pcs food storage containers</td>
                <td>$25</td>
                <td>30</td>
                <td>Kitchen & Dining</td>
                <td>
                    <button class="btn btn-warning btn-sm text-white" data-bs-toggle="modal" title="edit" data-bs-target="#editProductModal">
                        <i class="bi bi-pencil-fill"></i>
                    </button>
                    <button class="btn btn-danger btn-sm text-white" data-bs-toggle="modal" title="delete" data-bs-target="#deleteProductModal">
                        <i class="bi bi-trash-fill"></i>
                    </button>
                </td>
            </tr>
            <tr>
                <td>7</td>
                <td>USB C Chromebook Charger Replacement</td>
                <td>$12</td>
                <td>50</td>
                <td>Computer & Accessories</td>
                <td>
                    <button class="btn btn-warning btn-sm text-white" data-bs-toggle="modal" title="edit" data-bs-target="#editProductModal">
                        <i class="bi bi-pencil-fill"></i>
                    </button>
                    <button class="btn btn-danger btn-sm text-white" data-bs-toggle="modal" title="delete" data-bs-target="#deleteProductModal">
                        <i class="bi bi-trash-fill"></i>
                    </button>
                </td>
            </tr>
            <tr>
                <td>8</td>
                <td>HP Laptop 15 Inch 2023</td>
                <td>$300</td>
                <td>15</td>
                <td>Computer & Accessories</td>
                <td>
                    <button class="btn btn-warning btn-sm text-white" data-bs-toggle="modal" title="edit" data-bs-target="#editProductModal">
                        <i class="bi bi-pencil-fill"></i>
                    </button>
                    <button class="btn btn-danger btn-sm text-white" data-bs-toggle="modal" title="delete" data-bs-target="#deleteProductModal">
                        <i class="bi bi-trash-fill"></i>
                    </button>
                </td>
            </tr>
            <tr>
                <td>9</td>
                <td>Women T-shirts for Summer</td>
                <td>$15</td>
                <td>100</td>
                <td>Clothing</td>
                <td>
                    <button class="btn btn-warning btn-sm text-white" data-bs-toggle="modal" title="edit" data-bs-target="#editProductModal">
                        <i class="bi bi-pencil-fill"></i>
                    </button>
                    <button class="btn btn-danger btn-sm text-white" data-bs-toggle="modal" title="delete" data-bs-target="#deleteProductModal">
                        <i class="bi bi-trash-fill"></i>
                    </button>
                </td>
            </tr>
            <tr>
                <td>10</td>
                <td>Men T-shirts for Summer</td>
                <td>20</td>
                <td>100</td>
                <td>Clothing</td>
                <td>
                    <button class="btn btn-warning btn-sm text-white" data-bs-toggle="modal" title="edit" data-bs-target="#editProductModal">
                        <i class="bi bi-pencil-fill"></i>
                    </button>
                    <button class="btn btn-danger btn-sm text-white" data-bs-toggle="modal" title="delete" data-bs-target="#deleteProductModal">
                        <i class="bi bi-trash-fill"></i>
                    </button>
                </td>
            </tr>
            </tbody>
            </table>
            </div>
        </div>   
        <div class="modal" id="addProductModal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add a Product</h5>
                        <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal">
                        </button>
                    </div>
                    <form action="#">
                        <div class="modal-body">    
                            <div>
                                <label for="productName" class="col-form-label">Product Name:</label>
                                <input type="text" class="form-control" id="productName" 
                                name="productName" data-bs-toggle="tooltip" title="Enter the product name"
                                required>
                                <label for="productPrice" class="col-form-label">Price:</label>
                                <input type="number" class="form-control" id="productPrice" name="productPrice"
                                data-bs-toggle="tooltip" title="Enter the price of the product" required>
                                <label for="productStock" class="col-form-label">Stock:</label>
                                <input type="number" class="form-control" id="productStock" name="productStock"
                                data-bs-toggle="tooltip" title="Enter the quantity of the product available" required>
                                <label for="productCategory" class="col-form-label">Category:</label>
                                <select name="productCategory" id="productCategory" class="form-select" required>
                                    <option selected disabled value="">Choose a product category</option>
                                    <option value="computer">Computer & Accessories</option>
                                    <option value="home">Home Improvement</option>
                                    <option value="kitchen">Kitchen & Dining</option>
                                    <option value="clothing">Clothing</option>
                                    <option value="book">Books</option>
                                    <option value="grocery">Food & Groceries</option>
                                    <option value="pet">Pet Supplies</option>
                                    <option value="beauty">Beauty & Health</option>
                                    <option value="toys">Toys & Kids</option>
                                    <option value="sports">Sports</option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" value="submit"
                            class="btn btn-success">
                                Add
                            </button>
                        </div>
                    </form>
                </div>
            </div> 
        </div> 
        <div class="modal" id="editProductModal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Product</h5>
                        <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal">
                        </button>
                    </div>
                    <form action="#">
                        <div class="modal-body">    
                            <div>
                                <label for="productName" class="col-form-label">Product Name:</label>
                                <input type="text" class="form-control" id="productName" 
                                name="productName">
                                <label for="productPrice" class="col-form-label">Price:</label>
                                <input type="number" class="form-control" id="productPrice" name="productPrice">
                                <label for="productStock" class="col-form-label">Stock:</label>
                                <input type="number" class="form-control" id="productStock" name="productStock">
                                <label for="productCategory" class="col-form-label">Category:</label>
                                <select name="productCategory" id="productCategory" class="form-select">
                                    <option selected disabled value="">Choose a product category</option>
                                    <option value="computer">Computer & Accessories</option>
                                    <option value="home">Home Improvement</option>
                                    <option value="kitchen">Kitchen & Dining</option>
                                    <option value="clothing">Clothing</option>
                                    <option value="book">Books</option>
                                    <option value="grocery">Food & Groceries</option>
                                    <option value="pet">Pet Supplies</option>
                                    <option value="beauty">Beauty & Health</option>
                                    <option value="toys">Toys & Kids</option>
                                    <option value="sports">Sports</option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" value="submit"
                            class="btn btn-success" data-bs-toggle="modal" data-bs-target="#editProductConfirmDialog">
                                Edit Product
                            </button>
                        </div>
                    </form>
                </div>
            </div> 
        </div>
        <div class="modal" id="deleteProductModal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Delete Product</h5>
                        <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal">
                        </button>
                    </div>
                    <form action="#">
                        <div class="modal-body">    
                            <div>
                                <label for="productName" class="col-form-label">Product Name:</label>
                                <input type="text" class="form-control" id="productName" 
                                name="productName">               
                                <label for="productPrice" class="col-form-label">Price:</label>
                                <input type="number" class="form-control" id="productPrice" name="productPrice">
                                <label for="productStock" class="col-form-label">Stock:</label>
                                <input type="number" class="form-control" id="productStock" name="productStock">
                                <label for="productCategory" class="col-form-label">Category:</label>
                                <select name="productCategory" id="productCategory" class="form-select">
                                    <option selected disabled value="">Choose a product category</option>
                                    <option value="computer">Computer & Accessories</option>
                                    <option value="home">Home Improvement</option>
                                    <option value="kitchen">Kitchen & Dining</option>
                                    <option value="clothing">Clothing</option>
                                    <option value="book">Books</option>
                                    <option value="grocery">Food & Groceries</option>
                                    <option value="pet">Pet Supplies</option>
                                    <option value="beauty">Beauty & Health</option>
                                    <option value="toys">Toys & Kids</option>
                                    <option value="sports">Sports</option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" value="submit"
                            class="btn btn-success" data-bs-toggle="modal" data-bs-target="#deleteProductConfirmDialog">
                                Delete Product
                            </button>
                        </div>
                    </form>
                </div>
            </div> 
        </div>
        <div class="modal" id="editProductConfirmDialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title">Confirm Changes</h6>
                        <button type="button" class="btn-close"
                         data-bs-toggle="modal"
                         data-bs-target="#editProductModal">   
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure to make the changes?</p>      
                    </div>
                    <div class="modal-footer">
                        <form action="#" method="post">
                            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#editProductModal">Close</button>
                            <button type="submit" value="submit" class="btn btn-success">Change</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" id="deleteProductConfirmDialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title">Dalete Product</h6>
                        <button type="button" class="btn-close"
                         data-bs-toggle="modal"
                         data-bs-target="#deleteProductModal">   
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure to delete the product?</p>      
                    </div>
                    <div class="modal-footer">
                        <form action="#" method="post">
                            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#deleteProductModal">Close</button>
                            <button type="submit" value="submit" class="btn btn-success">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</body>
</html> 

Categories.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <title>The Store Categories</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container-fluid mt-2">
        <nav class="navbar navbar-expand-lg bg-success bg-gradient">
            <div class="container-fluid">
                <button type="button" class="navbar-toggler"
                data-bs-toggle="collapse" data-bs-target="#navitems">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a href="myStoreDashboard.html" class="navbar-brand fst-italic fw-bold text-white">The Store</a>
                <div class="collapse navbar-collapse" id="navitems">
                    <div class="navbar-nav">
                         <a href="myStoreDashboard.html" class="nav-link text-white">Dashboard</a>
                         <a href="myStoreProducts.html" class="nav-link text-white">Products</a>
                         <a href="#" class="nav-link text-white">Categories</a>
                         <a href="myStoreCustomers.html" class="nav-link text-white">Customers</a>
                         <a href="myStoreOrders.html" class="nav-link text-white">Orders</a>
                    </div>
                </div>
            </div>
        </nav>
        <nav class="navbar navbar-expand-lg bg-success bg-gradient">
            <div class="container-fluid">
                <button type="button" class="nav-item btn btn-lg btn-outline-light"
                data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                    Add Categories
                </button>
                <form action="#" role="search" class="d-flex">
                    <input type="search" class="form-control me-2" placeholder="Search Categories">
                    <button type="submit" value="submit" class="btn btn-outline-light">
                        Search
                    </button>
                </form>
            </div>
        </nav>
        <div class="container-fluid mt-4 row">
            <div class="d-flex justify-content-between align-items-center">
                <h5>List of Categories</h5>
                <nav>
                    <ul class="pagination">
                        <li class="page-item">
                            <a href="#" class="page-link"><span>&laquo;</span></a>
                        </li>
                        <li class="page-item"><a href="#" class="page-link">1</a></li>
                        <li class="page-item"><a href="#" class="page-link">2</a></li>
                        <li class="page-item"><a href="#" class="page-link">3</a></li>
                        <li class="page-item">
                            <a href="#" class="page-link"><span>&raquo;</span></a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="table-responsive">
                <table class="table table-sm table-striped table-bordered table-success border-success">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Category Name</th>
                            <th scope="col">Number of Products</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="table-group-divider">
                        <tr>
                            <td>1</td>
                            <td>Computer & Accessories</td>
                            <td>100</td>
                            <td>
                                <button class="btn btn-small btn-warning text-white" title="edit" data-bs-toggle="modal" data-bs-target="#editCategoryModal">
                                    <i class="bi bi-pencil-fill"></i>
                                </button>
                                <button class="btn btn-small btn-danger text-white" data-bs-toggle="modal" data-bs-target="#deleteCategoryModal" title="delete">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Home & Improvement</td>
                            <td>100</td>
                            <td>
                                <button class="btn btn-small btn-warning text-white" title="edit" data-bs-toggle="modal" data-bs-target="#editCategoryModal">
                                    <i class="bi bi-pencil-fill"></i>
                                </button>
                                <button class="btn btn-small btn-danger text-white" data-bs-toggle="modal" data-bs-target="#deleteCategoryModal" title="delete">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Kitchen & Dining</td>
                            <td>100</td>
                            <td>
                                <button class="btn btn-small btn-warning text-white" title="edit" data-bs-toggle="modal" data-bs-target="#editCategoryModal">
                                    <i class="bi bi-pencil-fill"></i>
                                </button>
                                <button class="btn btn-small btn-danger text-white" data-bs-toggle="modal" data-bs-target="#deleteCategoryModal" title="delete">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>Clothing</td>
                            <td>100</td>
                            <td>
                                <button class="btn btn-small btn-warning text-white" title="edit" data-bs-toggle="modal" data-bs-target="#editCategoryModal">
                                    <i class="bi bi-pencil-fill"></i>
                                </button>
                                <button class="btn btn-small btn-danger text-white" data-bs-toggle="modal" data-bs-target="#deleteCategoryModal" title="delete">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>Baby Essentials</td>
                            <td>100</td>
                            <td>
                                <button class="btn btn-small btn-warning text-white" title="edit" data-bs-toggle="modal" data-bs-target="#editCategoryModal">
                                    <i class="bi bi-pencil-fill"></i>
                                </button>
                                <button class="btn btn-small btn-danger text-white" data-bs-toggle="modal" data-bs-target="#deleteCategoryModal" title="delete">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>Toys & Games</td>
                            <td>100</td>
                            <td>
                                <button class="btn btn-small btn-warning text-white" title="edit" data-bs-toggle="modal" data-bs-target="#editCategoryModal">
                                    <i class="bi bi-pencil-fill"></i>
                                </button>
                                <button class="btn btn-small btn-danger text-white" data-bs-toggle="modal" data-bs-target="#deleteCategoryModal" title="delete">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>   
        <div class="modal" id="addCategoryModal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="'modal-title">Add a Category</h5>
                        <button class="btn-close" type="button" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="#">
                        <div class="modal-body">
                            <div>
                                <label for="categoryName" class="col-form-label">Category Name:</label>
                                <input type="text" class="form-control" id="categoryName"
                                name="categoryName" data-bs-toggle="tooltip" title="Enter the Category name"
                                required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" value="submit"
                            class="btn btn-success">
                                Add
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div> 
        <div class="modal" id="editCategoryModal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="'modal-title">Edit a Category</h5>
                        <button class="btn-close" type="button" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="#">
                        <div class="modal-body">
                            <div>
                                <label for="categoryName" class="col-form-label">Category Name:</label>
                                <input type="text" class="form-control" id="categoryName"
                                name="categoryName">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" value="submit"
                            class="btn btn-success" data-bs-toggle="modal" data-bs-target="#editCategoryConfirmDialog">
                                Edit Category
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div> 
        <div class="modal" id="deleteCategoryModal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="'modal-title">Delete a Category</h5>
                        <button class="btn-close" type="button" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="#">
                        <div class="modal-body">
                            <div>
                                <label for="categoryName" class="col-form-label">Category Name:</label>
                                <input type="text" class="form-control" id="categoryName"
                                name="categoryName">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" value="submit"
                            class="btn btn-success" data-bs-toggle="modal" data-bs-target="#deleteCategoryConfirmDialog">
                                Delete Category
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div> 
        <div class="modal" id="editCategoryConfirmDialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Confirm Changes</h5>
                        <button type="button" class="btn-close" 
                        data-bs-toggle="modal" data-bs-target="#editCategoryModal"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure to make the changes?</p>
                    </div>    
                    <div class="modal-footer">
                        <form action="#" method="post">
                            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#editCategoryModal">Close</button>
                            <button type="submit" value="submit" class="btn btn-success">Change</button>
                        </form>    
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" id="deleteCategoryConfirmDialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Confirm delete</h5>
                        <button type="button" class="btn-close" 
                        data-bs-toggle="modal" data-bs-target="#deleteCategoryModal"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure to delete the category?</p>
                    </div>    
                    <div class="modal-footer">
                        <form action="#" method="post">
                            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#deleteCategoryModal">Close</button>
                            <button type="submit" value="submit" class="btn btn-success">Delete</button>
                        </form>    
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Customers.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <title>The Store Customers</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container-fluid mt-2">
        <nav class="navbar navbar-expand-lg bg-success bg-gradient">
            <div class="container-fluid">
                <button type="button" class="navbar-toggler"
                data-bs-toggle="collapse" data-bs-target="#navitems">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <a href="myStoreDashboard.html" class="navbar-brand text-white fst-italic fw-bold">The Store</a>
                <div class="collapse navbar-collapse" id="navitems">
                    <div class="navbar-nav">
                        <a href="myStoreDashboard.html" class="nav-link text-white">Dashboard</a>
                        <a href="myStoreProducts.html" class="nav-link text-white">Products</a>
                        <a href="myStoreCategories.html" class="nav-link text-white">Categories</a>
                        <a href="#" class="nav-link text-white">Customers</a>
                        <a href="myStoreOrders.html" class="nav-link text-white">Orders</a>
                    </div>
                </div>
            </div>    
        </nav>
        <nav class="navbar navbar-expand-lg bg-gradient bg-success">
            <div class="container-fluid">
                <button type="button" class="nav-item btn btn-lg btn-outline-light"
                data-bs-toggle="modal" data-bs-target="#addCustomerModal">
                    Add Customers
                </button>
                <form action="#" role="search" class="d-flex">
                    <input type="search" class="form-control me-2" placeholder="Search Customers">
                    <button type="submit" class="btn btn-outline-light">
                        Search
                    </button>
                </form>
            </div>
        </nav>
        <div class="container-fluid mt-4">
            <div class="d-flex justify-content-between align-items-center">
                <h5>List of Customers</h5>
                <nav>
                    <ul class="pagination">
                        <li class="page-item">  
                            <a href="#" class="page-link"><span>&laquo;</span></a>
                        </li>
                        <li class="page-item"><a href="#" class="page-link">1</a></li>
                        <li class="page-item"><a href="#" class="page-link">2</a></li>
                        <li class="page-item"><a href="#" class="page-link">3</a></li>
                        <li class="page-item">
                            <a href="#" class="page-link">&raquo;</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="table-responsive">
                <table class="table table-sm table-bordered border-success table-striped table-success">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Customer Name</th>
                            <th scope="col">Customer E-mail</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="table-group-divider">
                        <tr>
                            <td>1</td>
                            <td>Aiden Djovic</td>
                            <td>aiden.djovic@abc.com</td>
                            <td>
                                <button type="button" title="edit"
                                class="btn btn-sm btn-warning text-white"
                                data-bs-toggle="modal" data-bs-target="#editCustomerModal">
                                    <i class="bi bi-pencil-fill"></i>
                                </button>
                                <button type="button" title="delete"
                                class="btn btn-sm btn-danger text-white"
                                data-bs-toggle="modal" data-bs-target="#deleteCustomerModal">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Benyl Djovic</td>
                            <td>benyl.djovic@abc.com</td>
                            <td>
                                <button type="button" title="edit"
                                class="btn btn-sm btn-warning text-white"
                                data-bs-toggle="modal" data-bs-target="#editCustomerModal">
                                    <i class="bi bi-pencil-fill"></i>
                                </button>
                                <button type="button" title="delete"
                                class="btn btn-sm btn-danger text-white"
                                data-bs-toggle="modal" data-bs-target="#deleteCustomerModal">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Max Djovic</td>
                            <td>max.djovic@abc.com</td>
                            <td>
                                <button type="button" title="edit"
                                class="btn btn-sm btn-warning text-white"
                                data-bs-toggle="modal" data-bs-target="#editCustomerModal">
                                    <i class="bi bi-pencil-fill"></i>
                                </button>
                                <button type="button" title="delete"
                                class="btn btn-sm btn-danger text-white"
                                data-bs-toggle="modal" data-bs-target="#deleteCustomerModal">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>John Doe</td>
                            <td>john.doe@abc.com</td>
                            <td>
                                <button type="button" title="edit"
                                class="btn btn-sm btn-warning text-white"
                                data-bs-toggle="modal" data-bs-target="#editCustomerModal">
                                    <i class="bi bi-pencil-fill"></i>
                                </button>
                                <button type="button" title="delete"
                                class="btn btn-sm btn-danger text-white"
                                data-bs-toggle="modal" data-bs-target="#deleteCustomerModal">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>xyz</td>
                            <td>xyz.example@abc.com</td>
                            <td>
                                <button type="button" title="edit"
                                class="btn btn-sm btn-warning text-white"
                                data-bs-toggle="modal" data-bs-target="#editCustomerModal">
                                    <i class="bi bi-pencil-fill"></i>
                                </button>
                                <button type="button" title="delete"
                                class="btn btn-sm btn-danger text-white"
                                data-bs-toggle="modal" data-bs-target="#deleteCustomerModal">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal" id="addCustomerModal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="'modal-title">Add a Customer</h5>
                        <button class="btn-close" type="button" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="#">
                        <div class="modal-body">
                            <div>
                                <label for="customerName" class="col-form-label">Customer Name:</label>
                                <input type="text" class="form-control" id="customerName"
                                name="customerName" data-bs-toggle="tooltip" title="Enter the Customer name"
                                required>
                                <label for="customeremail" class="col-form-label">Customer Email:</label>
                                <input type="email" class="form-control" id="customerEmail"
                                name="customerEmail" data-bs-toggle="tooltip" title="Enter the Customer Email"
                                required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" value="submit"
                            class="btn btn-success">
                                Add Customer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div> 
        <div class="modal" id="editCustomerModal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="'modal-title">Edit a Customer</h5>
                        <button class="btn-close" type="button" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="#">
                        <div class="modal-body">
                            <div>
                                <label for="customerName" class="col-form-label">Customer Name:</label>
                                <input type="text" class="form-control" id="customerName"
                                name="customerName">
                                <label for="customeremail" class="col-form-label">Customer Email:</label>
                                <input type="email" class="form-control" id="customerEmail"
                                name="customerEmail">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" value="submit"
                            class="btn btn-success" data-bs-toggle="modal" data-bs-target="#editCustomerConfirmDialog">
                                Edit Customer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div> 
        <div class="modal" id="deleteCustomerModal">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="'modal-title">Delete a Customer</h5>
                        <button class="btn-close" type="button" data-bs-dismiss="modal"></button>
                    </div>
                    <form action="#">
                        <div class="modal-body">
                            <div>
                                <label for="customerName" class="col-form-label">Customer Name:</label>
                                <input type="text" class="form-control" id="customerName"
                                name="customerName">
                                <label for="customeremail" class="col-form-label">Customer Email:</label>
                                <input type="email" class="form-control" id="customerEmail"
                                name="customerEmail">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                                Close
                            </button>
                            <button type="submit" value="submit"
                            class="btn btn-success" data-bs-toggle="modal" data-bs-target="#deleteCustomerConfirmDialog">
                                Delete Customer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div> 
        <div class="modal" id="editCustomerConfirmDialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Confirm Changes</h5>
                        <button type="button" class="btn-close" 
                        data-bs-toggle="modal" data-bs-target="#editCustomerModal"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure to make the changes?</p>
                    </div>    
                    <div class="modal-footer">
                        <form action="#" method="post">
                            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#editCustomerModal">Close</button>
                            <button type="submit" value="submit" class="btn btn-success">Change</button>
                        </form>    
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" id="deleteCustomerConfirmDialog">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Confirm delete</h5>
                        <button type="button" class="btn-close" 
                        data-bs-toggle="modal" data-bs-target="#deleteCustomerModal"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure to delete the customer?</p>
                    </div>    
                    <div class="modal-footer">
                        <form action="#" method="post">
                            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#deleteCustomerModal">Close</button>
                            <button type="submit" value="submit" class="btn btn-success">Delete</button>
                        </form>    
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>