From 6bc87298213ab67a3c30d675cf8e6b656f9edbed Mon Sep 17 00:00:00 2001
From: Sourabh782 <sourabhsinghrawat782@gmail.com>
Date: Tue, 15 Oct 2024 19:08:04 +0530
Subject: [PATCH] enhanced vendor ui

---
 Alimento                       |   1 -
 styles.css                     |   3 +
 vendor/add_menu.php            | 134 +++++++++++++++++---
 vendor/edit_menu.php           | 218 ++++++++++++++++++++++++++++-----
 vendor/home.php                | 147 ++++++++++++++++------
 vendor/partials/_dbconnect.php |   2 +-
 6 files changed, 421 insertions(+), 84 deletions(-)
 delete mode 160000 Alimento
diff --git a/Alimento b/Alimento
deleted file mode 160000
index e51cf80..0000000
--- a/Alimento
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit e51cf80f93a17499e28c88dc9a55d7f14ef1eca0
diff --git a/styles.css b/styles.css
index c9f4ecd..5715b5e 100644
--- a/styles.css
+++ b/styles.css
@@ -2,7 +2,10 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
+    max-width: 1140px;
+    margin: auto;
   }
+
   
   header {
     background-color: #d5761d;
diff --git a/vendor/add_menu.php b/vendor/add_menu.php
index b400b99..ed34e55 100644
--- a/vendor/add_menu.php
+++ b/vendor/add_menu.php
@@ -28,36 +28,128 @@
 
 <head>
     <title>Menu Information</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
     <style>
-        table {
-            border-collapse: collapse;
+        body{
+            max-width: 1140px;
+            margin: auto;
+            font-family: Arial, Helvetica, sans-serif;
+        }
+        .header{
+            display: flex;
+            justify-content: space-between;
+            height: 10vh;
+            margin: 10px 0;
+            border-bottom: 2px solid maroon;
+        }
+        .header img{
+            height: 100%;
+        }
+        .order-table {
             width: 100%;
+            border-collapse: collapse;
         }
 
-        th,
-        td {
-            border: 1px solid black;
-            padding: 8px;
-            text-align: left;
+        .order-table th,
+        .order-table td {
+            padding: 12px;
+            border-bottom: 1px solid #ddd;
+            text-align: center;
+        }
+        .logout{
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
+
+        .order-table th {
+            background-color: #f5f5f5;
+            font-weight: bold;
+        }
+        .veg{
+            padding: 4px 12px;
+            background: green;
+            color: white;
+            border-radius: 6px;
+        }
+        .nonveg{
+            padding: 4px 12px;
+            background: red;
+            color: white;
+            border-radius: 6px;
         }
+        .menu-container{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .btn{
+            padding: 10px 20px;
+            border: none;
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
 
-        th {
-            background-color: #f2f2f2;
+        }
+        .btn:hover{
+            color: black;
+        }
+        .dataInput{
+            padding: 6px;
+            border-radius: 8px;
+            border: none;
+            outline: none;
+            
+        }
+        .dataInput:active, .dataInput:focus{
+            border: none;
+        }
+        .add-item{
+            background-color: blue;
+            color: white;
+            border-radius: 6px;
+            outline: none;
+            border: none;
+            padding: 2px 5px;
+        }
+        .btn{
+            padding: 10px 20px;
+            border: none;
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
         }
     </style>
 </head>
 
 <body>
-<h1>Menu Information | <a href='edit_menu.php'><input type='submit' value='EDIT'><a style="margin: 10px; " href='home.php'><input  type='submit' value='BACK' ></a></h1>
-
-    <table>
-        <tr>
+    <div class="header">
+        <img src="../images/logo/logo.png" alt="">
+        
+        <form action="vendor_logout.php" class="logout"><input  type='submit' class="btn btn-danger" value='LOGOUT'></form>
+    </div>
+    <br>
+
+    <div class="menu-container">
+        <h1>
+            Menu Information
+        </h1>
+        <div class="btn-container">
+            <a href='edit_menu.php'><button class="btn" style="background-color: #008080;">EDIT</button></a>  
+            <a href='home.php'><button class="btn" style="background-color: #FF8C00;">BACK</button></a> 
+        </div>
+    </div>
+
+    <table class="order-table">
+        <thead>
             <th>Item ID</th>
             <th>Item Name</th>
             <!-- <th>Item Description</th> -->
             <th>Item Price</th>
             <th>Item Category</th>
-        </tr>
+        </thead>
 
         <?php
         // Retrieve data from the menu table
@@ -71,7 +163,11 @@
                 echo "<td>" . $row['m_name'] . "</td>";
                 //echo "<td>" . $row['item_description'] . "</td>";
                 echo "<td>" . $row['m_price'] . "</td>";
-                echo "<td>" . $row['m_type'] . "</td>";
+                if($row['m_type'] == "Veg"){
+                    echo "<td> <span class='veg'>" . $row['m_type'] . "</span></td>";
+                } else {
+                    echo "<td> <span class='nonveg'>" . $row['m_type'] . "</span></td>";
+                }
             }
         } else {
             echo "<tr><td colspan='6'>ADD items in the menu to display here</td></tr>";
@@ -82,7 +178,7 @@
     </table>
     
     <h1>Add to Menu </h1>
-    <table>
+    <table class="order-table">
         <tr>
             <th>Item ID</th>
             <th>Item Name</th>
@@ -98,9 +194,9 @@
                 echo "<tr>";
                 echo "<form action='add_menu.php' method='post'>";
                 echo "<td><input required type='hidden' name='m_id' value=''> </td>";
-                echo "<td>Name: <input required type='text' name='m_name' value=''><br></td>";
+                echo "<td><input class='dataInput' required type='text' placeholder='Name of item' name='m_name' value=''><br></td>";
                 //echo "<td>" . $row['it</td>";
-                echo "<td>Price: <input required type='number' name='m_price' value=''><br></td>";
+                echo "<td><input class='dataInput' required type='number' placeholder='Price' name='m_price' value=''><br></td>";
                 
 
                 echo "<td>Category: <select name='m_type'>";
@@ -108,7 +204,7 @@
                 echo "<option value='Non-Veg' " . ($row['order_status'] === 'Non-Veg' ? 'selected' : '') . ">Non-Veg</option>";
                 echo "</select>";
 
-                echo "<td><input required type='submit' value='Update'></td>";
+                echo "<td><input class='add-item' required type='submit' value='Add'></td>";
                 echo "</form>";
                 echo "</tr>";
         $conn->close();
diff --git a/vendor/edit_menu.php b/vendor/edit_menu.php
index c64bd15..539968f 100644
--- a/vendor/edit_menu.php
+++ b/vendor/edit_menu.php
@@ -29,34 +29,183 @@
 <html>
 <head>
     <title>Menu Information</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
     <style>
-        table {
-            border-collapse: collapse;
+        body{
+            max-width: 1140px;
+            margin: auto;
+            font-family: Arial, Helvetica, sans-serif;
+        }
+        .header{
+            display: flex;
+            justify-content: space-between;
+            height: 10vh;
+            margin: 10px 0;
+            border-bottom: 2px solid maroon;
+        }
+        .header img{
+            height: 100%;
+        }
+        .logout{
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
+        .order-table {
             width: 100%;
+            border-collapse: collapse;
+        }
+
+        .order-table th,
+        .order-table td {
+            padding: 12px;
+            border-bottom: 1px solid #ddd;
+            text-align: center;
+        }
+
+        .order-table th {
+            background-color: #f5f5f5;
+            font-weight: bold;
+        }
+        .veg{
+            padding: 4px 12px;
+            background: green;
+            color: white;
+            border-radius: 6px;
         }
-        th, td {
-            border: 1px solid black;
+        .nonveg{
+            padding: 4px 12px;
+            background: red;
+            color: white;
+            border-radius: 6px;
+        }
+        .menu-container{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .btn{
+            padding: 10px 20px;
+            border: none;
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
+
+        }
+        .btn:hover{
+            color: black;
+        }
+        .update-form {
+            position: absolute;
+            margin-top: 10px;
+            padding: 10px;
+            background-color: #f9f9f9;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        .update-form input[type="text"],
+        .update-form input[type="number"],
+        .update-form select {
+            width: 100%;
             padding: 8px;
-            text-align: left;
+            margin: 5px 0;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        .update-form input[type="submit"] {
+            padding: 8px 16px;
+            background-color: #28a745;
+            color: #fff;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .delete{
+            background-color: transparent;
+            border: none;
+            height: 2rem;
+            width: 2rem;
         }
-        th {
-            background-color: #f2f2f2;
+        .update{
+            background-color: transparent;
+            border: none;
+            height: 2rem;
+            width: 2rem;
+        }
+        .delete img, .update img{
+            height: 90%;
+            /* width: 100%; */
+        }
+        button:hover{
+            cursor: pointer;
+        }
+        .deleteForm{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .update-form{
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .update-form input[type="submit"]:hover {
+            background-color: #218838;  
+        }
+        .button-container{
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+        }
+        .close{
+            position: absolute;
+            background: transparent;
+            top:10px;
+            right: 10px;
+            color: red;
+            border: none;
+        }
+        .btn{
+            padding: 10px 20px;
+            border: none;
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
         }
     </style>
 </head>
 <body>
+    <div class="header">
+        <img src="../images/logo/logo.png" alt="">
+        
+        <form action="vendor_logout.php" class="logout"><input  type='submit' class="btn btn-danger" value='LOGOUT'></form>
+    </div>
+    <br>
 
-<h1>Menu Information | <a href='add_menu.php'><input  type='submit' value='ADD'></a> <a class="m-4" href='home.php'><input type='submit' value='BACK'></a> </h1>
+    <div class="menu-container">
+        <h1>
+            Menu Information
+        </h1>
+        <div class="btn-container">
+            <a href='add_menu.php'><button class="btn" style="background-color: #008080;">ADD</button></a>  
+            <a href='home.php'><button class="btn" style="background-color: #FF8C00;">BACK</button></a> 
+        </div>
+    </div>
 
 
-    <table>
-        <tr>
+    <table class="order-table">
+        <thead>
             <th>Item ID</th>
             <th>Item Name</th>
             <!-- <th>Item Description</th> -->
             <th>Item Price</th>
             <th>Item Category</th>
-        </tr>
+        </thead>
 
         <?php
         // Retrieve data from the menu table
@@ -70,7 +219,11 @@
                 echo "<td>" . $row['m_name'] . "</td>";
                 //echo "<td>" . $row['item_description'] . "</td>";
                 echo "<td>" . $row['m_price'] . "</td>";
-                echo "<td>" . $row['m_type'] . "</td>";
+                if($row['m_type'] == "Veg"){
+                    echo "<td> <span class='veg'>" . $row['m_type'] . "</span></td>";
+                } else {
+                    echo "<td> <span class='nonveg'>" . $row['m_type'] . "</span></td>";
+                }
             }
         } else {
             echo "<tr><td colspan='6'>ADD items in the menu to display here</td></tr>";
@@ -79,14 +232,9 @@
     
         ?>
     </table>
-    
-
-
 
-
-
-    <h1>EDIT Menu </h1>
-    <table>
+    <h1>Edit Menu </h1>
+    <table class="order-table">
         <tr>
             <th>Item ID</th>
             <th>Item Name</th>
@@ -112,24 +260,28 @@
 
                 // Adding a form to update the item
                 echo "<td>";
+                echo "<div class='button-container'>";
+                echo "<button class='update' onclick=\"toggleUpdateForm('" . $row['m_id'] . "')\"><img src='https://img.icons8.com/?size=100&id=6697&format=png&color=000000'></button>";
+
+                echo "<div id='updateForm" . $row['m_id'] . "' class='update-form' style='display: none;'>";
+                echo "<button class='close' onclick=\"toggleUpdateForm('" . $row['m_id'] . "')\">X</button>";
                 echo "<form action='edit_menu.php' method='post'>";
                 echo "<input type='hidden' name='m_id' value='" . $row['m_id'] . "'>";
                 echo "Name: <input type='text' name='m_name' value='" . $row['m_name'] . "'><br>";
-                //echo "Description: <input type='text' name='item_description' value='" . $row['item_description'] . "'><br>";
                 echo "Price: <input type='number' name='m_price' value='" . $row['m_price'] . "'><br>";
-                echo "Category: <input type='text' name='m_type' value='" . $row['m_type'] . "'><br>";
-
                 echo "Category: <select name='m_type'>";
-                echo "<option value='Veg' " . ($row['order_status'] === 'Veg' ? 'selected' : '') . ">Veg</option>";
-                echo "<option value='Non-Veg' " . ($row['order_status'] === 'Non-Veg' ? 'selected' : '') . ">Non-Veg</option>";
-                echo "</select>";
-
+                echo "<option value='Veg' " . ($row['m_type'] === 'Veg' ? 'selected' : '') . ">Veg</option>";
+                echo "<option value='Non-Veg' " . ($row['m_type'] === 'Non-Veg' ? 'selected' : '') . ">Non-Veg</option>";
+                echo "</select><br>";
                 echo "<input type='submit' value='Update'>";
                 echo "</form>";
-                echo "<form action='delete_menu.php' method= 'post'>";
+                echo "</div>";
+
+                echo "<form action='delete_menu.php' class='deleteForm' method= 'post'>";
                 echo "<input type='hidden' name='delete_item' value='" . $row['m_id'] . "'><br>";
-                echo "<input type='submit' value='Delete'>";
+                echo "<button type='submit' class='delete'> <img src='https://img.icons8.com/?size=100&id=1oFCDPb4GGqp&format=png&color=000000'> </button>";
                 echo "</form>";
+                echo "</div>";
                 echo "</td>";
 
                 echo "</tr>";
@@ -141,5 +293,15 @@
         $conn->close();
         ?>
     </table>
+    <script>
+        function toggleUpdateForm(id) {
+            var form = document.getElementById('updateForm' + id);
+            if (form.style.display === 'none') {
+                form.style.display = 'block';
+            } else {
+                form.style.display = 'none';
+            }
+        }
+    </script>
 </body>
 </html>
diff --git a/vendor/home.php b/vendor/home.php
index f3f1884..eb1ed31 100644
--- a/vendor/home.php
+++ b/vendor/home.php
@@ -31,51 +31,119 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
     <title>Order Information</title>
     <style>
+        body{
+            max-width: 1140px;
+            margin: auto;
+        }
+        .header{
+            display: flex;
+            justify-content: space-between;
+            height: 10vh;
+            margin: 10px 0;
+            border-bottom: 2px solid maroon;
+        }
+        .header img{
+            height: 100%;
+        }
+        .logout{
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
         .holder{
             padding: 20px;
         }
-        table {
-            border-collapse: collapse;
+        .order-table {
             width: 100%;
+            border-collapse: collapse;
+        }
+
+        .order-table th,
+        .order-table td {
+            padding: 12px;
+            border-bottom: 1px solid #ddd;
+            text-align: center;
         }
 
-        th,
-        td {
-            border: 1px solid black;
+        .order-table th {
+        background-color: #f5f5f5;
+        font-weight: bold;
+        }
+
+        .menu-container{
+            display: flex;
+            justify-content: space-between;
+        }
+        .btn{
+            padding: 10px 20px;
+            border: none;
+            color: white;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        .btn:hover{
+            color: black;
+        }
+        .filters {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+
+        .filters input[type="text"] {
             padding: 8px;
-            text-align: left;
+            width: 200px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
         }
 
-        th {
-            background-color: #f2f2f2;
+        .filters select,
+        .filters button {
+            padding: 8px 12px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            background-color: #777;
+            color: white;
+            cursor: pointer;
         }
-        .logout{
-            margin-left: calc(100% - 20%);
-            margin-top: -4%;
+        .veg{
+            padding: 4px 12px;
+            background: green;
+            color: white;
+            border-radius: 6px;
+        }
+        .nonveg{
+            padding: 4px 12px;
+            background: red;
+            color: white;
+            border-radius: 6px;
         }
     </style>
 </head>
 
 <body>
-<header class="text-white text-center py-4" style="background: rgb(142,240,226);
-background: linear-gradient(90deg, rgba(142,240,226,0.7511379551820728) 0%, rgba(234,241,50,1) 34%, rgba(210,10,227,0.8407738095238095) 100%);">
-        <h1>Alimento  <div class="logout"><input  type='submit' class="btn btn-danger" value='LOGOUT'></div></a></h1>
-        
-    </header>
+<div class="header">
+    <img src="../images/logo/logo.png" alt="">
+    
+    <form action="vendor_logout.php" class="logout"><input  type='submit' class="btn btn-danger" value='LOGOUT'></form>
+</div>
 <br>
+
 <div class="holder">
     <h1>Pending Order</h1>
-    <table>
-        <tr>
-            <th>Order ID</th>
-            <th>Order</th>
-            <th>Name</th>
-            <th>Amount</th>
-            <th>Phone</th>
-            <th>Address</th>
-            <th>Update Order</th>
-            <th>Order Status</th>
-        </tr>
+    <table class="order-table">
+    <thead>
+      <tr>
+        <th>Order ID</th>
+        <th>Order</th>
+        <th>Name</th>
+        <th>Amount</th>
+        <th>Phone</th>
+        <th>Address</th>
+        <th>Update Order</th>
+        <th>Order Status</th>
+      </tr>
+    </thead>
 
         <!-- Replace this section with PHP code to fetch data and loop through rows -->
         <?php
@@ -123,23 +191,28 @@
 
 <br>
 <br>
-    <h1>Menu Information | 
-        <a href='add_menu.php'><input type='submit' class="btn  " style="background:#068572;  color:white" value='ADD TO MENU'></a>  
-        <a href='edit_menu.php'><input type='submit' class="btn  " style="background:#e77c30; color:white" value='EDIT MENU'></a> 
-    </h1>
+    <div class="menu-container">
+        <h1>
+            Menu Information
+        </h1>
+        <div class="">
+            <a href='add_menu.php'><button class="btn" style="background-color: #008080;">Add to Menu</button></a>  
+            <a href='edit_menu.php'><button class="btn" style="background-color: #FF8C00;">Edit Menu</button></a> 
+        </div>
+    </div>
 
     <!-- Search and Filter Form -->
-    <form method="GET" action="home.php" class="mb-3">
+    <form method="GET" action="home.php" class="mb-3 filters">
         <input type="text" name="search" placeholder="Search by item name" value="<?php echo htmlspecialchars($search); ?>">
         <select name="category">
             <option value="">All Categories</option>
             <option value="Veg" <?php echo ($category_filter === 'Veg') ? 'selected' : ''; ?>>Veg</option>
             <option value="Non-Veg" <?php echo ($category_filter === 'Non-Veg') ? 'selected' : ''; ?>>Non-Veg</option>
         </select>
-        <button type="submit" class="btn btn-secondary">Search/Filter</button>
+        <button type="submit" class="btn btn-secondary">Search / Filter</button>
     </form>
 
-    <table>
+    <table class="order-table">
         <tr>
             <th>Item ID</th>
             <th>Item Name</th>
@@ -167,7 +240,11 @@
                 echo "<td>" . $row['m_id'] . "</td>";
                 echo "<td>" . $row['m_name'] . "</td>";
                 echo "<td>" . $row['m_price'] . "</td>";
-                echo "<td>" . $row['m_type'] . "</td>";
+                if($row['m_type'] == "Veg"){
+                    echo "<td> <span class='veg'>" . $row['m_type'] . "</span></td>";
+                } else {
+                    echo "<td> <span class='nonveg'>" . $row['m_type'] . "</span></td>";
+                }
                 echo "</tr>";
             }
         } else {
diff --git a/vendor/partials/_dbconnect.php b/vendor/partials/_dbconnect.php
index 0de0415..f44ba48 100644
--- a/vendor/partials/_dbconnect.php
+++ b/vendor/partials/_dbconnect.php
@@ -5,7 +5,7 @@
 $password = "";
 $database = "homemadedb";
 
-$conn = mysqli_connect($server,$email, $password,$database);
+$conn = mysqli_connect($server,$email, $password,$database, 3306);
 if(!$conn){
     die("Error" . mysqli_connect_errno());
 }

Item ID	Item Name	Item Price	Item Category
" . $row['item_description'] . "	" . $row['m_price'] . "	" . $row['m_type'] . "	" . $row['m_type'] . "	" . $row['m_type'] . "
ADD items in the menu to display here