Molly

Pipfile

@@ -6,7 +6,7 @@ name = "pypi"
 [packages]
 ipdb = "0.13.9"
 flask = "*"
-flask-sqlalchemy = "3.0.3"
+flask-sqlalchemy = "*"
 Werkzeug = "2.2.2"
 flask-migrate = "*"
 sqlalchemy-serializer = "*"

client/package.json

@@ -7,13 +7,17 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "formik": "^2.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.4.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   },
-  "devDependencies": {"@babel/plugin-proposal-private-property-in-object":"^7.21.11"},
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

client/src/components/App.js

@@ -1,8 +1,63 @@
-import React, { useEffect, useState } from "react";
-import { Switch, Route } from "react-router-dom";
+// src/components/App.js
+import React from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import Navbar from './NavBar'; // Ensure the correct import path
 
-function App() {
-  return <h1>Project Client</h1>;
-}
+import MenuTable from '../pages/MenuTable';
+import OrderList from '../pages/OrderList';
+import LoginPage from '../pages/LoginPage';
+import MainPage from '../pages/MainPage';
+import OrdersPage from '../pages/OrdersPage';
+import MenuList from '../pages/MenuList'; // Import the MenuList component
+
+const App = () => {
+  return (
+    <Router>
+      <div>
+        <Switch>
+          <Route exact path="/" component={LoginPage} />
+          <Route path="/main">
+            <MainPageWithNavbar />
+          </Route>
+          <Route path="/orders">
+            <OrdersPageWithoutNavbar />
+          </Route>
+          <Route path="/menu">
+            <div>
+              <Navbar />
+              <MenuTable />
+            </div>
+          </Route>
+          <Route path="/order-list">
+            <div>
+              <Navbar />
+              <OrderList />
+            </div>
+          </Route>
+          <Route path="/menu-list">
+            <div>
+              <Navbar />
+              <MenuList />
+            </div>
+          </Route>
+        </Switch>
+      </div>
+    </Router>
+  );
+};
+
+// Define MainPageWithNavbar component with Navbar
+const MainPageWithNavbar = () => (
+  <div>
+    <MainPage />
+  </div>
+);
+
+// Define OrdersPageWithoutNavbar component without Navbar
+const OrdersPageWithoutNavbar = () => (
+  <OrdersPage />
+);
 
 export default App;
+
+

client/src/components/NavBar.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Link, useHistory } from 'react-router-dom'; // Import useHistory to navigate programmatically
+
+const Navbar = () => {
+  const history = useHistory(); // Get history object for programmatic navigation
+
+  const handleLogout = () => {
+    // Perform logout actions if needed (e.g., clear session, tokens, etc.)
+    // Then navigate to the login page
+    history.push('/'); // Redirect to login page
+  };
+
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link to="/menu" className={window.location.pathname === '/menu' ? 'active' : ''}>
+            Menu
+          </Link>
+        </li>
+        <li>
+          <Link to="/menu-list" className={window.location.pathname === '/menu-list' ? 'active' : ''}>
+            Menu List
+          </Link>
+        </li>
+        <li>
+          <Link to="/order-list" className={window.location.pathname === '/order-list' ? 'active' : ''}>
+            Order List
+          </Link>
+        </li>
+        <li>
+          <button onClick={handleLogout} className="logout-button">
+            Logout
+          </button>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Navbar;
+
+
+
+
+
+
+
+

client/src/components/Navbar.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const Navbar = () => {
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link to="/main">Home</Link>
+        </li>
+        <li>
+          <Link to="/orders">Orders</Link>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Navbar;

client/src/index.css

@@ -4,4 +4,221 @@
   --link: #61dafb;
   --text: hsla(0, 0%, 100%, 0.88);
 }
+:root {
+  --bg: #282c34;
+  --header: #fff;
+  --link: #61dafb;
+  --text: hsla(0, 0%, 100%, 0.88);
+}
+
+/* MenuTable.css */
+
+.menu-table {
+  margin: 20px;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.menu-header {
+  font-size: 24px;
+  text-align: center;
+  margin-bottom: 20px;
+  color: black;
+}
+
+form {
+  margin-bottom: 20px;
+  display: grid; /* Use grid layout for more control */
+  gap: 10px;
+}
+
+form label {
+  /* Grid settings for labels */
+  grid-column: 1 / 2;
+  grid-row: auto; /* Auto place */
+  margin-bottom: 10px;
+}
+
+form input,
+form button {
+  /* Grid settings for inputs and buttons */
+  grid-column: 2 / 3;
+  grid-row: auto; /* Auto place */
+  width: 100%; /* Full width input fields */
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.add-button {
+  background-color: blue;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+
+.table th,
+.table td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.table th {
+  background-color: lightskyblue;
+}
+
+.table td {
+  vertical-align: top;
+}
+
+.table td:last-child {
+  text-align: center;
+}
+
+.delete-button {
+  background-color: #f30d0d;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+/* Navbar.css */
+
+nav {
+  background-color: #0dbbbb;
+  color: #fff;
+  padding: 10px 20px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+
+li {
+  margin-right: 20px;
+}
+
+a {
+  text-decoration: none;
+  color: #fff;
+  font-weight: bold;
+  padding: 8px 12px;
+  border-radius: 4px;
+}
+
+a.active {
+  background-color: #000000;
+}
+
+.logout-button {
+  background-color: #dc3545;
+  color: #fff;
+  border: none;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+/* Responsive Design */
+
+@media (max-width: 768px) {
+  /* Adjust form layout for smaller screens */
+  form {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  form label,
+  form input,
+  form button {
+    width: calc(50% - 5px); /* Two columns with gap */
+  }
+
+  form label {
+    margin-bottom: 5px;
+  }
+}
+
+
+/* Navbar.css */
+
+nav {
+  background-color: #0dbbbb;
+  color: #fff;
+  padding: 10px 20px;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+
+li {
+  margin-right: 20px;
+}
+
+a {
+  text-decoration: none;
+  color: #fff;
+  font-weight: bold;
+  padding: 8px 12px;
+  border-radius: 4px;
+}
+
+a.active {
+  background-color: #000000;
+}
+
+.logout-button {
+  background-color: #dc3545;
+  color: #fff;
+  border: none;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.order-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+
+.order-table th, .order-table td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.order-table th {
+  background-color: lightskyblue;
+}
+
+.order-table tbody tr:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.order-table tbody tr:hover {
+  background-color: #f2f2f2;
+}
+
+