Food organization landing and inventory page

src/App.jsx

@@ -4,6 +4,9 @@ import DetectLocation from "./pages/DetectLocationPage";
 import RestaurantPage from "./pages/RestaurantPage";
 import AddRestaurant from "./pages/AddRestaurantForm";
 import NearByRestaurants from "./pages/NearByRestaurants";
+import RestaurantDashBoard from "./pages/RestaurantDashboard";
+import RestaurantInventory from "./pages/RestaurantInventory";
+import Layout from "./Layout";
 
 function App() {
   return (
@@ -17,6 +20,10 @@ function App() {
       <Route path="/your-location" element={<NearByRestaurants />}></Route>
       <Route path="/restaurant" element={<RestaurantPage />}></Route>
       <Route path="/add-restaurants" element={<AddRestaurant />}></Route>
+      <Route path="/restaurant-dashboard/*" element={<Layout />}>
+        <Route index element={<RestaurantDashBoard />}></Route>
+        <Route path="inventory" element={<RestaurantInventory />}></Route>
+      </Route>
     </Routes>
   );
 }

src/Layout.jsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router-dom";
+import Sidebar from "./components/DashboardSidebar";
+
+function Layout(){
+    return (
+      <div className="w-screen h-screen">
+        <div className="h-5/6 w-11/12 p-4 flex gap-6">
+            <Sidebar />
+            <Outlet />
+        </div>
+      </div>
+    );
+}
+
+export default Layout;

src/components/AutoCompleteSearch.jsx

@@ -46,7 +46,7 @@ function AutocompleteSearch() {
   });
 
   if (loadError) return "Error loading maps";
-  if (!isLoaded) return "Loading Maps";
+  if (!isLoaded) return "Loading...";
 
   return (
     <div className="bg-white w-full rounded-xl h-12 flex flex-col items-stretch px-4 shadow-xl">

src/components/DashboardSidebar.jsx

@@ -0,0 +1,110 @@
+import request from "../assets/icons/request.png";
+import logout from "../assets/icons/logout.png";
+import support from "../assets/icons/headphones.png";
+import setting from "../assets/icons/settings.png";
+import inventory from "../assets/icons/inventory.png";
+import dashboard from "../assets/icons/dashboard.png";
+import { useEffect, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+
+
+const options = [
+  {
+    id: "dashboard",
+    label: "Dashboard",
+    icon: dashboard,
+    route: "/restaurant-dashboard",
+  },
+  {
+    id: "inventory",
+    label: "Inventory",
+    icon: inventory,
+    route: "/restaurant-dashboard/inventory",
+  },
+  {
+    id: "requests",
+    label: "Requests",
+    icon: request,
+    route: "/restaurant-dashboard/requests",
+  },
+  {
+    id: "support",
+    label: "Support",
+    icon: support,
+    route: "/restaurant-dashboard/support",
+  },
+  {
+    id: "logout",
+    label: "Logout",
+    icon: logout,
+    route: "/restaurant-dashboard/logout",
+  },
+];
+
+function Sidebar() {
+
+    const location = useLocation();
+
+    const [activeTab, setActiveTab] = useState("");
+
+    const handleTabClick = (tab) => {
+      setActiveTab(tab);
+    };
+
+
+    useEffect(() => {
+        const currentPath = location.pathname;
+        console.log(currentPath);
+
+      // Find the option whose route matches the current path
+      const matchedOption = options.find(
+        (option) => option.route === currentPath
+      );
+
+      if (matchedOption) {
+        setActiveTab(matchedOption.id);
+      }
+      else if (currentPath === "/restaurant-dashboard/settings") {
+          setActiveTab("settings");
+      }
+      else {
+        setActiveTab(""); // Reset active tab if there is no match
+      }
+    }, [location]);
+
+  return (
+    <div className="h-full w-80 bg-primary rounded-xl text-dashboardOption">
+      <div className=" w-2/3 h-5/6 m-auto mt-20 flex flex-col justify-between">
+        <div className="flex flex-col gap-10 ">
+          {options.map((option) => (
+            <Link
+              key={option.id}
+              to={option.route}
+              onClick={() => handleTabClick(option.id)}
+              className={`flex gap-3 items-center ${
+                activeTab === option.id ? "text-white text-xl" : ""
+              }`}
+            >
+              <img className="h-8 w-8" src={option.icon} alt={option.label} />
+              <h2>{option.label}</h2>
+            </Link>
+          ))}
+        </div>
+        <div>
+          <Link
+            to="/restaurant-dashboard/settings"
+            onClick={() => handleTabClick("settings")}
+            className={`flex gap-3 items-center ${
+              activeTab === "settings" ? "text-white text-xl" : ""
+            }`}
+          >
+            <img className="h-8 w-8" src={setting} alt="Settings" />
+            <h2>Settings</h2>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Sidebar;

src/pages/RestaurantDashboard.jsx

@@ -0,0 +1,86 @@
+import juice from "../assets/images/juice.avif"
+import dish from "../assets/images/food.avif"
+import user from "../assets/images/user.jpeg"
+import bell from "../assets/icons/bell.png"
+import { FaSearch } from "react-icons/fa";
+
+function Dashboard() {
+    return (
+          <div className="flex w-full h-full flex-col gap-16">
+            <div className="h-16 w-full border flex gap-6 items-center justify-between">
+              <div className="flex ml-6 items-center gap-3">
+                <FaSearch />
+                <input
+                  className="focus:outline-none"
+                  type="text"
+                  placeholder="Search"
+                />
+              </div>
+              <div className="flex items-center mr-6 gap-10">
+                <img className="rounded-lg h-6 w-6" src={bell} alt="dashboard-icon" />
+                <div className="flex items-center gap-2">
+                  <img className="w-10 h-10" src={user} alt="user-img" />
+                  <h2>Tom Hook</h2>
+                </div>
+              </div>
+            </div>
+            <div className="h-5/6 w-full border rounded-sm py-2">
+              <div className="flex flex-col h-full ml-6 overflow-y-auto gap-6">
+                <div className="flex gap-4">
+                  <img className="rounded-lg h-32 w-36" src={juice} alt="juice-img" />
+                  <div className="w-2/3">
+                    <h4 className="inline">Maecenas</h4>
+                    <h4 className="inline float-right">03</h4>
+                    <p className="mt-10">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                  </div>
+                </div>
+                <div className="flex gap-4">
+                  <img className="rounded-lg h-32 w-36" src={dish} alt="juice-img" />
+                  <div className="w-2/3">
+                    <h4 className="inline">Maecenas</h4>
+                    <h4 className="inline float-right">03</h4>
+                    <p className="mt-10">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                  </div>
+                </div>
+                <div className="flex gap-4">
+                  <img className="rounded-lg h-32 w-36" src={juice} alt="juice-img" />
+                  <div className="w-2/3">
+                    <h4 className="inline">Maecenas</h4>
+                    <h4 className="inline float-right">03</h4>
+                    <p className="mt-10">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                  </div>
+                </div>
+                <div className="flex gap-4">
+                  <img className="rounded-lg h-32 w-36" src={dish} alt="juice-img" />
+                  <div className="w-2/3">
+                    <h4 className="inline">Maecenas</h4>
+                    <h4 className="inline float-right">03</h4>
+                    <p className="mt-10">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                  </div>
+                </div>
+                <div className="flex gap-4">
+                  <img className="rounded-lg h-32 w-36" src={juice} alt="juice-img" />
+                  <div className="w-2/3">
+                    <h4 className="inline">Maecenas</h4>
+                    <h4 className="inline float-right">03</h4>
+                    <p className="mt-10">
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+    );
+}
+
+
+export default Dashboard;

src/pages/RestaurantInventory.jsx

@@ -0,0 +1,130 @@
+import juice from "../assets/images/juice.avif";
+import dish from "../assets/images/food.avif";
+import user from "../assets/images/user.jpeg";
+import bell from "../assets/icons/bell.png";
+import { FaSearch } from "react-icons/fa";
+
+function Inventory() {
+  return (
+    <div className="flex w-full h-full flex-col gap-10">
+      <div className="h-16 w-full border flex gap-6 items-center justify-between">
+        <div className="flex ml-6 items-center gap-3">
+          <FaSearch />
+          <input
+            className="focus:outline-none"
+            type="text"
+            placeholder="Search"
+          />
+        </div>
+        <div className="flex items-center mr-6 gap-10">
+          <img className="h-6 w-6" src={bell} alt="dashboard-icon" />
+          <div className="flex items-center gap-2">
+            <img className="w-10 h-10" src={user} alt="user-img" />
+            <h2>Tom Hook</h2>
+          </div>
+        </div>
+      </div>
+      <div className="h-5/6 w-full flex flex-col gap-16 border rounded-sm py-2">
+        <div className="flex items-center justify-center mt-4 ">
+          <button className="bg-primary p-2 rounded-full h-12 w-44">
+            Add Item
+          </button>
+        </div>
+        <div className="flex flex-col h-5/6 ml-6 overflow-y-auto gap-6">
+          <div className="flex gap-14">
+            <img className="rounded-lg h-32 w-36" src={juice} alt="juice-img" />
+            <div className="w-2/3">
+              <h4 className="inline">Maecenas</h4>
+              <h4 className="inline float-right">03</h4>
+              <p className="mt-6">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              </p>
+              <div className="flex gap-6 items-center mt-6">
+                <button className="bg-editButton rounded-full py-2 px-4 h-8 flex items-center">
+                  Edit
+                </button>
+                <button className="bg-deleteButton rounded-full h-8 py-2 px-4 flex items-center ">
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="flex gap-14">
+            <img className="rounded-lg h-32 w-36" src={juice} alt="juice-img" />
+            <div className="w-2/3">
+              <h4 className="inline">Maecenas</h4>
+              <h4 className="inline float-right">03</h4>
+              <p className="mt-6">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              </p>
+              <div className="flex gap-6 items-center mt-6">
+                <button className="bg-editButton rounded-full py-2 px-4 h-8 flex items-center">
+                  Edit
+                </button>
+                <button className="bg-deleteButton rounded-full h-8 py-2 px-4 flex items-center ">
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="flex gap-14">
+            <img className="rounded-lg h-32 w-36" src={juice} alt="juice-img" />
+            <div className="w-2/3">
+              <h4 className="inline">Maecenas</h4>
+              <h4 className="inline float-right">03</h4>
+              <p className="mt-6">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              </p>
+              <div className="flex gap-6 items-center mt-6">
+                <button className="bg-editButton rounded-full py-2 px-4 h-8 flex items-center">
+                  Edit
+                </button>
+                <button className="bg-deleteButton rounded-full h-8 py-2 px-4 flex items-center ">
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="flex gap-14">
+            <img className="rounded-lg h-32 w-36" src={juice} alt="juice-img" />
+            <div className="w-2/3">
+              <h4 className="inline">Maecenas</h4>
+              <h4 className="inline float-right">03</h4>
+              <p className="mt-6">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              </p>
+              <div className="flex gap-6 items-center mt-6">
+                <button className="bg-editButton rounded-full py-2 px-4 h-8 flex items-center">
+                  Edit
+                </button>
+                <button className="bg-deleteButton rounded-full h-8 py-2 px-4 flex items-center ">
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="flex gap-14">
+            <img className="rounded-lg h-32 w-36" src={juice} alt="juice-img" />
+            <div className="w-2/3">
+              <h4 className="inline">Maecenas</h4>
+              <h4 className="inline float-right">03</h4>
+              <p className="mt-6">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              </p>
+              <div className="flex gap-6 items-center mt-6">
+                <button className="bg-editButton rounded-full py-2 px-4 h-8 flex items-center">
+                  Edit
+                </button>
+                <button className="bg-deleteButton rounded-full h-8 py-2 px-4 flex items-center ">
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Inventory;

tailwind.config.js

@@ -11,6 +11,9 @@ export default {
         accent: "#979196",
         hoverColor: "#d6cc57",
         green: "#A0C537",
+        dashboardOption: "#9BA2AF",
+        editButton: "#3FA0F1",
+        deleteButton: "#EF5E4C",
       },
     },
   },