Final Commit Team GENESIS

GENESIS/AdminPannel-main/Admin_Pannel/package.json

@@ -12,9 +12,11 @@
   "dependencies": {
     "axios": "^1.6.7",
     "bootstrap": "^5.3.3",
+    "chart.js": "^4.4.1",
     "dotenv": "^16.4.5",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-dotenv": "^0.1.3",
     "react-router-dom": "^6.22.1"

GENESIS/AdminPannel-main/Admin_Pannel/src/App.jsx

@@ -6,7 +6,9 @@ import Profile from './Components/Profile/Profile_Setup'
 import { useAuth } from './Components/Context/Authcontext'
 import Navbs from './Components/Navbar/Navbs'
 import Active from './Components/Order/Active'
-
+import Details from './Components/Order/Details'
+import Graph from './Components/Graph/Location'
+import Predict from './Components/Predict/Predict'
 export default function App() {
   const { token,login } = useAuth();
 
@@ -27,6 +29,10 @@ export default function App() {
         <Route path="/login" element={<Login />} />
         <Route path="/profile" element={<Profile />} />
         <Route path ="/home" element={<Active/>} />
+        <Route path="/details/:oid" element={<Details />} />
+<Route path='/graph' element={<Graph></Graph>} />
+<Route path="/predict" element={<Predict />} />
+        <Route path="*" element={<h1>Nots Found</h1>} />
       </Routes>
       </>
       :<Login></Login>}

GENESIS/AdminPannel-main/Admin_Pannel/src/Components/Graph/Location.jsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+
+const CurrentLocation = () => {
+  const [latitude, setLatitude] = useState(null);
+  const [longitude, setLongitude] = useState(null);
+  const [address, setAddress] = useState('');
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const getLocation = () => {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(
+          async (position) => {
+            setLatitude(position.coords.latitude);
+            setLongitude(position.coords.longitude);
+
+            try {
+              const response = await fetch(`https://api.opencagedata.com/geocode/v1/json?q=${position.coords.latitude}+${position.coords.longitude}&key=17c31206576f461787e4ed1f88a10b68`);
+              const data = await response.json();
+              if (data.results.length > 0) {
+                setAddress(data.results[0].formatted);
+              } else {
+                setAddress('Location not found');
+              }
+            } catch (error) {
+              setAddress('Error fetching location');
+            }
+          },
+          (error) => {
+            setError(error.message);
+          }
+        );
+      } else {
+        setError("Geolocation is not supported by this browser.");
+      }
+    };
+
+    getLocation();
+  }, []); // Empty dependency array ensures useEffect runs only once
+
+  return (
+    <div style={{display:"flex",alignItems:"center",justifyContent:"center"}}>
+      {error ? (
+        <p>Error: {error}</p>
+      ) : (
+        address
+      )}
+    </div>
+  );
+};
+
+export default CurrentLocation;

GENESIS/AdminPannel-main/Admin_Pannel/src/Components/Login/Login.jsx

@@ -4,7 +4,9 @@ import { Container, Card, Form, Button, Spinner } from "react-bootstrap";
 import axios from "axios";
 // import bglog2 from "../../assets/bglog2.jpg";
 import "./login.css";
+import { useNavigate } from "react-router-dom";
 export default function Login() {
+  const navigate = useNavigate();
   const [phone, setPhone] = useState(null);
   const [otp, setOtp] = useState(null);
   const [showotp, setShowotp] = useState(false);
@@ -18,7 +20,7 @@ export default function Login() {
     if (phone) {
         setSpinner(true);
         axios
-          .post(`${import.meta.env.VITE_APP_API}otp/sendotp`, { phone: phone })
+          .post("http://localhost:3000/api/otp/sendotp", { phone: phone })
           .then((res) => {
             console.log(res.data);
             setShowotp(true);
@@ -37,12 +39,12 @@ export default function Login() {
   const handleotp =()=>{
     setSpinner(true);
     axios
-      .post(`${import.meta.env.VITE_APP_API}otp/verifyotp`, { phone: phone , otp:otp })
+      .post("http://localhost:3000/api/otp/verifyotp", { phone: phone , otp:otp })
       .then((res) => {
-        console.log(res.data.uid);
+        console.log(res.data);
         login(res.data.uid);
-
         setSpinner(false);
+        navigate("/profile");
       })
       .catch((err) => {
         console.log(err);
@@ -73,7 +75,7 @@ export default function Login() {
             }}
           >
             <Card.Body>
-              <Card.Title style={{ fontSize: "3rem" }}>
+              <Card.Title className="py-3" style={{ fontSize: "3rem" }}>
                 Welcome to <span style={{ color: "#05FA16" }}>MealsBridge</span>
               </Card.Title>
             </Card.Body>

GENESIS/AdminPannel-main/Admin_Pannel/src/Components/Navbar/Navbs.jsx

@@ -1,37 +1,39 @@
-
 import React from 'react';
 import Container from 'react-bootstrap/Container';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import NavDropdown from 'react-bootstrap/NavDropdown';
 import { Link } from 'react-router-dom';
-function Navbs() {
+import Graph from '../Graph/Location';
+function CollapsibleExample() {
   return (
-    <Navbar expand="lg" className="bg-success">
+    <Navbar collapseOnSelect expand="lg" className="bg-success">
       <Container>
-        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
-        <Navbar.Toggle aria-controls="basic-navbar-nav" />
-        <Navbar.Collapse id="basic-navbar-nav">
+        <Navbar.Brand as={Link} to="/home">MealsBridge</Navbar.Brand>
+        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
+        <Navbar.Collapse id="responsive-navbar-nav">
           <Nav className="me-auto">
-            <Nav.Link >
-            <Link to={"/home"} style={{textDecoration:"none",color:"inherit"}}>Home</Link></Nav.Link>
-            <Nav.Link href="#link" >Link</Nav.Link>
-            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
+            <Nav.Link as={Link} to="/home">Home</Nav.Link>
+            <Nav.Link as={Link} to="/predict">Predict</Nav.Link>
+            <NavDropdown title="Dropdown" id="collapsible-nav-dropdown">
               <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
-              <NavDropdown.Item href="#action/3.2">
-                Another action
-              </NavDropdown.Item>
+              <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
               <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
               <NavDropdown.Divider />
-              <NavDropdown.Item href="#action/3.4">
-                Separated link
-              </NavDropdown.Item>
+              <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
             </NavDropdown>
           </Nav>
+          <Nav>
+            <Nav.Link href="#deets">
+
+              <Graph></Graph>
+            </Nav.Link>
+
+          </Nav>
         </Navbar.Collapse>
       </Container>
     </Navbar>
   );
 }
 
-export default Navbs;
+export default CollapsibleExample;

GENESIS/AdminPannel-main/Admin_Pannel/src/Components/Order/Active.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import Card from 'react-bootstrap/Card';
-import { Col, Container, Row,Spinner } from 'react-bootstrap';
-
+import { Button, Col, Container, Row,Spinner } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
 const OrderCards = () => {
   const [orders, setOrders] = useState([]);
 const [spinner, setSpinner] = useState(false);
@@ -24,7 +24,7 @@ const [spinner, setSpinner] = useState(false);
         {spinner ? <Spinner animation="border" role="status" style={{position:"absolute",top:"50%",left:"50%"}} /> :<>
 
         <Row>
-      {orders.map((order) => (
+      { orders.length>0 ? orders.map((order) => (
         <Col md={3} xs={12} key={order._id}>
         <Card  style={{ width: '18rem',border:"2px solid black" }}>
           <Card.Body>
@@ -44,12 +44,19 @@ const [spinner, setSpinner] = useState(false);
               <p> <span style={{fontWeight:"700"}}>Status:</span> {order.status ? "Completed" : "Pending"}</p>
               <p> <span style={{fontWeight:"700"}} >Date:</span> {new Date(order.date).toLocaleDateString()}</p>
             </Card.Text>
-            <div style={{display:"flex",justifyContent:"center"}}><Card.Link href="#" style={{textAlign:"center"}}>View Details</Card.Link></div>
+            <div style={{display:"flex",justifyContent:"center"}}>
+
+
+            <Link to={`/details/${order.oid}`} style={{textAlign:"center"}}>
+                <Button variant="primary">View Details</Button>
+                </Link>
+
+</div>
 
           </Card.Body>
         </Card>
         </Col>
-      ))}
+      )): <h1>No Active Orders</h1>}
       </Row>
         </>
 

GENESIS/AdminPannel-main/Admin_Pannel/src/Components/Order/Details.css

@@ -0,0 +1,66 @@
+.details-container {
+    padding: 20px;
+  }
+
+  .spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+  }
+
+  .order-card {
+    border: none;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    border-radius: 10px;
+    background-color: #ffffff;
+  }
+
+  .order-id {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .order-date {
+    color: #666666;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .food-items {
+    margin-top: 20px;
+  }
+
+  .food-card {
+    border: none;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    overflow: hidden;
+    margin-bottom: 20px;
+  }
+
+  .food-image-container {
+    height: 200px;
+    overflow: hidden;
+  }
+
+  .food-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .food-title {
+    font-size: 25px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    color:#05FA16;
+
+  }
+
+  .food-quantity {
+    color: #666666;
+    font-size: 20px;
+  }
+