Merge pull request #6 from ColinMcKechney/AVA

Ava
2023-05-02 17:23:51 -04:00
parent 0b874a712d c2fc10e561
commit 8209f6e505
11 changed files with 1611 additions and 408 deletions
--- a/db_app/src/App.js
+++ b/db_app/src/App.js
@@ -4,6 +4,9 @@ import CreateAccount from "./components/CreateAccount";
 import Menus from "./components/Menus";
 import Plan from "./components/Plan";
 import MenuExpansion from "./components/MenuExpansion";
+import LogMeals from "./components/LogMeals";
+import ThisWeek from "./components/ThisWeek";
+import Past from "./components/Past"
 import { ReactSession } from 'react-client-session';

 import {
@@ -24,6 +27,9 @@ function App() {
        <Route path='/Menus' element={<Menus/>}></Route>
        <Route path='/Plan' element={<Plan/>}></Route>
        <Route path='/MenuExpansion' element={<MenuExpansion/>}></Route>
+        <Route path='/ThisWeek' element={<ThisWeek/>}></Route>
+        <Route path='/LogMeals' element={<LogMeals/>}></Route>
+        <Route path='/Past' element={<Past/>}></Route>
      </Routes>
    </Router>
  );
--- a/db_app/src/components/CreateAccount.js
+++ b/db_app/src/components/CreateAccount.js
@@ -27,12 +27,14 @@ const theme = createTheme({

 function CreateAccount() {

-    const navigate = useNavigate();
+  //Navigate to login
+  const navigate = useNavigate();

 	const navigateLogin = () => {
 		 navigate('/');
 	}

+  //State variable for account data
  const [data,setData] = useState({
    net_id:"",
    password:"",
@@ -40,22 +42,22 @@ function CreateAccount() {
    last_name:"",
  })
  
+  //Variable for account data
  const {net_id, password, first_name, last_name} = data;
  
+  //Change handler for form
  const changeHandler = e => {
    setData({...data,[e.target.name]:[e.target.value]});
  }
  
+  //Submit handler for form
  const submitHandler = e => {
    e.preventDefault();
-    console.log(data);
-    console.log(net_id[0])
-    console.log(password[0])
-    console.log(first_name[0])
-    console.log(last_name[0])
    createAccount();
+    navigateLogin();
  }
 
+  //Sends post request with account credentials to server
  const createAccount = () => {
    Axios.post("http://3.219.93.142:8000/api/signup", {net_id: net_id[0], password: password[0], first_name: first_name[0], last_name: last_name[0]}).then((response) => {
       console.log(response);
--- a/db_app/src/components/LogMeals.js
+++ b/db_app/src/components/LogMeals.js
@@ -0,0 +1,482 @@
+import React,{useState} from 'react';
+import {Routes, Route, useNavigate} from 'react-router-dom';
+import './Login.css';
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ReactSession } from 'react-client-session';
+import Axios from 'axios';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper,Checkbox} from '@mui/material';
+
+
+const theme = createTheme({
+    palette: {
+      primary: {
+        main: lightGreen[700],
+        apple: red[500],
+      },
+
+    },
+  });
+
+function MyPlan() {
+
+    const navigate = useNavigate();
+
+	const Home = () => {
+        navigate('/Plan');
+   }
+   const Menus = () => {
+       navigate('/Menus');
+  }
+  const Past = () => {
+   navigate('/Past');
+}
+const navigateLogin = () => {
+    navigate('/');
+}
+
+const logout = () => {
+    ReactSession.set("net_id", "");
+    navigateLogin();
+
+}
+
+const Log = () => {
+  navigate('/LogMeals')
+}
+
+const Progress = () => {
+  navigate('/ThisWeek')
+}
+
+
+
+//get the start of each week and reformat to Oracle date type
+function weekStart(){
+  var date_str = new Date();
+  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+  var weekday = days[date_str.getDay()]
+
+  if (weekday != 'Sunday'){
+    return;
+  }
+
+  var date_str = new Date();
+  var curr_day = String(date_str.getDate()).padStart(2, '0');
+  const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+
+  var curr_month = months[date_str.getMonth()];
+  var curr_year = String(date_str.getFullYear());
+  var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2);
+
+  return db_date;
+}
+
+const net_id = ReactSession.get("net_id");
+
+
+
+//to find a food item from an on campus location to your weekly journal
+const [keyword, setKeyword] = useState({
+  search_term:""
+})
+
+const [searchItems, setSearchItems] = useState([]);
+const [sendItems, setSendItems] = useState([])
+
+const sendToPlan = () => {
+  console.log(sendItems);
+  Axios.post('http://3.219.93.142:8000/api/week_meals', {net_id: ReactSession.get("net_id"), item_list: sendItems,}).then((response) => {
+   console.log(response);
+ });
+ Progress();
+}
+
+
+const{search_term} = keyword
+
+const removeItem = (index) => {
+  setSendItems([
+             ...sendItems.slice(0, index),
+             ...sendItems.slice(index + 1)
+  ]);
+
+}
+
+function handleCheck (i) {
+  console.log(i);
+  if (sendItems.indexOf(i) > -1){
+    //get index and delete
+    var index = sendItems.indexOf(i)
+    removeItem(index);
+    console.log(`removed ${i}`);
+    
+  }
+
+  else{
+    setSendItems(sendItems => [...sendItems, i]);
+    console.log(`added ${i}`);
+  }
+  
+}
+
+
+const changeSearchHandler = evt => {
+  setKeyword({ ...keyword, [evt.target.name]: [evt.target.value] })
+}
+
+const submitSearchHandler = evt => {
+  evt.preventDefault();
+  console.log(search_term)
+  console.log(net_id)
+  Axios.post("http://3.219.93.142:8000/api/menu_search",
+    {
+      search_term:search_term[0]
+    }).then((response) => {
+      console.log(response);
+      console.log(response.status);
+      console.log('Data:')
+      console.log(response.data.results);
+      setSearchItems(response.data.results);
+    })
+};
+
+
+//to add an off campus food item or meal to your weekly journal
+  const [offCampusInput, setOffCampusInput] = useState({
+    item_name:"",
+    amount: 0,
+    calories: 0,
+    fat_g: 0,
+    sat_fat_g: 0,
+    trans_fat_g: 0,
+    carbs_g: 0,
+    fiber_g: 0,
+    sugar_g: 0,
+    protein_g: 0,
+    sodium_mg: 0,
+    potassium_mg: 0,
+    cholesterol_mg: 0,
+  }
+  );
+
+  const {item_name, amount, calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g,
+    sodium_mg, potassium_mg, cholesterol_mg} = offCampusInput
+
+  const changeOffCampusHandler = evt => {
+    setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] })
+  }
+
+  const submitOffCampusHandler = evt => {
+    evt.preventDefault();
+    console.log(offCampusInput)
+    console.log(net_id)
+    Axios.post("http://3.219.93.142:8000/api/week_plan",
+      {
+        net_id: net_id,
+        item_name: item_name[0],
+        amount: Number(amount[0]),
+        calories: Number(calories[0]),
+        fat_g: Number(fat_g[0]),
+        sat_fat_g: Number(sat_fat_g[0]),
+        trans_fat_g: Number(trans_fat_g[0]),
+        carbs_g: Number(carbs_g[0]),
+        fiber_g: Number(fiber_g[0]),
+        sugar_g: Number(sugar_g[0]),
+        protein_g: Number(protein_g[0]),
+        sodium_mg: Number(sodium_mg[0]),
+        potassium_mg: Number(potassium_mg[0]),
+        cholesterol_mg: Number(cholesterol_mg[0])
+      }).then((response) => {
+        console.log(response);
+        console.log(response.status);
+      })
+  };
+  
+  return (
+  <ThemeProvider theme={theme}>  
+  
+      <AppBar position="static">
+        <Toolbar variant="dense">
+          <Button  variant="h6" color="main" position="right" onClick={Home}>
+            Home
+          </Button> 
+          <Button variant="h6" color="main" component="div" onClick={Menus}>
+            Menus
+          </Button>
+          <Button  variant="h6"onClick={Past} >
+            Past Plans</Button> 
+          <Button variant="h6" color="main" component="div" onClick={logout} sx={{
+            ':hover': {
+            bgcolor: '#ffc6c4', // theme.palette.primary.main
+            color: 'red',
+          },
+          }}>
+            Log out
+          </Button>
+        </Toolbar>
+      </AppBar>
+
+
+    <AppBar className='bar' position="static">
+<Toolbar >
+<Button variant="h2" color="main" onClick={Home}>
+        Plan for {net_id}
+      </Button>
+      <Button variant="h2" color="main" sx={{
+
+bgcolor: '#053B06', // theme.palette.primary.main
+color: 'main',
+
+}} onClick={Log}>Log Meals</Button>
+      <Button variant="h2" color="main" onClick={Progress}>Plan Progress</Button>
+     
+</Toolbar>
+  </AppBar>
+
+   
+    <div>
+      <h1>
+        &nbsp; 
+        Add to Food Journal
+      </h1>
+      <h3> &nbsp; &nbsp;
+        On-Campus
+      </h3>
+      <form onSubmit={submitSearchHandler}>
+          &nbsp; &nbsp;
+          <TextField
+            id="search_term"
+            label="Keyword"
+            size="medium"
+            name="search_term"
+            value={search_term}
+            onChange={changeSearchHandler}
+          />
+
+          &nbsp; &nbsp;
+          <Button sx={{ m: 1}}
+            type="search"
+            variant="contained"
+            size="medium">
+          Search</Button>
+          <Button 
+          variant="contained"
+          type="button"
+          size="medium"
+          sx={{
+        color: 'white',
+    ':hover': {
+      bgcolor: '#ffc6c4',
+      color: 'white',
+    },
+    marginLeft: 5
+  }} onClick={sendToPlan}>Add checked to Plan</Button>
+      </form>
+
+      <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 440, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
+          <TableHead>
+            <TableRow sx={{maxWidth:1400}}>
+            
+              <TableCell style={{ maxWidth: 110}}  align="left">Add?</TableCell>
+              <TableCell style={{ maxWidth: 110}}  align="left">Eatery</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Item Name</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Serving Size</TableCell>
+          
+            </TableRow>
+          </TableHead>
+
+          <TableBody sx={{maxWidth:1350}}>
+            {searchItems.map((searchitem, i) => {
+              console.log(i);
+              return(
+                <TableRow
+                    key={searchitem.item_name}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  >
+                    <TableCell padding="checkbox">
+
+                     
+                    <Checkbox
+                      
+                      color="primary"
+                      onChange={() => handleCheck(searchitem.item_id)}
+                    />
+                    </TableCell>
+        
+              <TableCell> {searchitem.eatery_id}</TableCell>
+              <TableCell> {searchitem.item_name}</TableCell>
+              <TableCell> {searchitem.serving_size}</TableCell>
+            </TableRow>
+            )
+          })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      </Paper>
+    
+
+      <h3> &nbsp; &nbsp;
+        Off-Campus
+      </h3>
+        <form onSubmit={submitOffCampusHandler}>
+          &nbsp; &nbsp;
+          <TextField
+            sx={{ paddingBottom: 1 }}
+            id="item_name"
+            label="Food Item"
+            size="small"
+            name="item_name"
+            value={item_name}
+            onChange={changeOffCampusHandler}
+          />
+          <br></br>
+          &nbsp; &nbsp;
+          <TextField
+            id="amount"
+            label="Number of Servings"
+            size="small"
+            name="amount"
+            type="number"
+            value={amount}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            sx={{ paddingBottom: 1 }}
+            id="calories"
+            label="Calories"
+            size="small"
+            name="calories"
+            type="number"
+            value={calories}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="fat"
+            label="Fat (g)"
+            size="small"
+            name="fat_g"
+            type="number"
+            value={fat_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sat_fat"
+            label="Saturated Fat (g)"
+            size="small"
+            name="sat_fat_g"
+            type="number"
+            value={sat_fat_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="trans_fat"
+            label="Trans Fat (g)"
+            size="small"
+            name="trans_fat_g"
+            type="number"
+            value={trans_fat_g}
+            onChange={changeOffCampusHandler}
+          />
+          
+          &nbsp; &nbsp;
+          <TextField
+            id="carbs"
+            label="Carbs (g)"
+            size="small"
+            name="carbs_g"
+            type="number"
+            value={carbs_g}
+            onChange={changeOffCampusHandler}
+          />
+          <br></br>
+          &nbsp; &nbsp;
+          <TextField
+            id="fiber"
+            label="Fiber (g)"
+            size="small"
+            name="fiber_g"
+            type="number"
+            value={fiber_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sugar"
+            label="Sugar (g)"
+            size="small"
+            name="sugar_g"
+            type="number"
+            value={sugar_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="protein"
+            label="Protein (g)"
+            size="small"
+            name="protein_g"
+            type="number"
+            value={protein_g}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sodium"
+            label="Sodium (mg)"
+            size="small"
+            name="sodium_mg"
+            type="number"
+            value={sodium_mg}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="potassium"
+            label="Potassium (mg)"
+            size="small"
+            name="potassium_mg"
+            type="number"
+            value={potassium_mg}
+            onChange={changeOffCampusHandler}
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="cholesterol"
+            label="Cholesterol (mg)"
+            size="small"
+            name="cholesterol_mg"
+            type="number"
+            value={cholesterol_mg}
+            onChange={changeOffCampusHandler}
+          />
+          <br></br>
+          <br></br>
+          &nbsp; &nbsp;
+
+          <Button
+            type="submit"
+            variant="contained"
+            size="large">
+            Submit</Button>
+      </form>
+    </div>
+
+    </ThemeProvider>
+  
+    );
+  }
+  
+  export default MyPlan;
--- a/db_app/src/components/Login.css
+++ b/db_app/src/components/Login.css
@@ -30,4 +30,12 @@ position:fixed;

 .bar{
  margin-bottom: 15px;
+}
+
+.background_green{
+  background-color: green;
+}
+
+.background_red{
+  background-color: red;
 }
--- a/db_app/src/components/Login.js
+++ b/db_app/src/components/Login.js
@@ -29,6 +29,8 @@ const theme = createTheme({


 export function Login() {
+
+  //Navigate functions
  const navigate = useNavigate();

 	const navigateCreateAccount = () => {
@@ -37,54 +39,53 @@ export function Login() {

  const navigateHome = () => {
    navigate('/Plan');
- }
+  }

-const [data,setData] = useState({
+  //State variable for login data
+  const [data,setData] = useState({
    net_id:"",
    password:""
  })

+  //Variable for login data
  const {net_id,password} = data;
  
+  //Change handler for login form
  const changeHandler = e => {
    setData({...data,[e.target.name]:[e.target.value]});
  }
  
+  //Submit handler for login form
  const submitHandler = e => {
    e.preventDefault();
    login();
    
  }

-const setSession = () => {
+  //Set session variable for netid
+  const setSession = () => {
  ReactSession.set("net_id", net_id[0]);
-}
+  }

+//Send http request to log user in 
+  const login = () => {
+    Axios.post("http://3.219.93.142:8000/api/auth", {net_id: net_id[0], password: password[0],}).then((response) => {
+      console.log(response);
+      console.log(response.status);
+      if (response.status === 200){
+        setSession();
+        navigateHome();
+      }

-const getHello = () => {
-  Axios.get("http://3.219.93.142:8000/").then((response) => {
-     console.log(response.data);
-  });
-};
-
-const login = () => {
-  Axios.post("http://3.219.93.142:8000/api/auth", {net_id: net_id[0], password: password[0],}).then((response) => {
-     console.log(response);
-     console.log(response.status);
-     if (response.status === 200){
-      setSession();
-      navigateHome();
-     }
-
-  });
-};
+    });
+  };


   return (
    
    
        <ThemeProvider theme={theme}>
-      <div className='bg' style={{backgroundImage: 'url(' + require('./images/main_background.jpg') + ')'}}>
+      <div className='bg' style={{backgroundImage: 'url(' + require('./images/back.jpg') + ')'}}>
      <div className='logbox'>
       <Box
        sx={{  
--- a/db_app/src/components/MenuExpansion.js
+++ b/db_app/src/components/MenuExpansion.js
@@ -24,6 +24,15 @@ import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { ReactSession } from 'react-client-session';
 import Axios from 'axios';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+} from '@mui/material';


 const theme = createTheme({
@@ -36,40 +45,87 @@ const theme = createTheme({
    },
  });

-  
+function Menus() {

-  const getEatery = () => {
-    return ReactSession.get("eatery");
- }
-
-  function MenuExpansion() {
-    const navigate = useNavigate();
+  //Navigate function
+  const navigate = useNavigate();

 	const Home = () => {
 		 navigate('/Plan');
 	}
-    const Menus = () => {
+  const Menus = () => {
        navigate('/Menus');
   }
   const Past = () => {
    navigate('/Past');
-}
-const navigateLogin = () => {
+  }
+  const navigateLogin = () => {
    navigate('/');
+  }
+
+//Format api all url based on eatery clicked
+const makeEateryUrl = (eatery) => `http://3.219.93.142:8000/api/eatery/${eatery}`;
+const getEatery = () => {
+  return ReactSession.get("eatery");
 }

-const makeEateryUrl = (eatery) => `http://3.219.93.142:8000/eatery/${eatery}`;
-
+//Http request to get menu items
 const getMenu = () => {
-  const eatery_to_query = getEatery();
-  Axios.get(makeEateryUrl(eatery_to_query)).then((response) => {
-     console.log(response.data);
-  });
-};
+const eatery_to_query = getEatery();
+ Axios.get(makeEateryUrl(eatery_to_query)).then((response) => {
+  console.log(response.data);
+  setmenuItems(response.data);
+});
+ 
+}
+//State variables for menu items and for items to add to plan
+const [menuItems, setmenuItems] = useState([{}]);
+const [toAdd, setToAdd] = useState([]);


-return(
+//Remove an item from the to be added
+const removeItem = (index) => {
+  setToAdd([
+             ...toAdd.slice(0, index),
+             ...toAdd.slice(index + 1)
+  ]);

+}
+
+//Checkbox handler
+function handleCheck (i) {
+  console.log(i);
+  if (toAdd.indexOf(i) > -1){
+    //get index and delete
+    var index = toAdd.indexOf(i)
+    removeItem(index);
+    console.log(`removed ${i}`);
+    
+  }
+
+  else{
+    setToAdd(toAdd => [...toAdd, i]);
+    console.log(`added ${i}`);
+  }
+  
+}
+
+//Http request to send checked items to plan
+const sendToPlan = () => {
+  Axios.post('http://3.219.93.142:8000/api/week_meals', {net_id: ReactSession.get("net_id"), item_list: toAdd,}).then((response) => {
+   console.log(response);
+ });
+  
+ }
+ 
+//Run get menu on page load
+useEffect(() => {
+  getMenu()
+  console.log('Menu in')
+}, [])
+ 
+
+  return (

    <ThemeProvider theme={theme}>
    <AppBar className='bar' position="static">
@@ -92,10 +148,68 @@ return(
  </Toolbar>
 </AppBar>

-<Button onClick={getMenu}>Test get menu</Button>
+<AppBar className='bar' position="static">
+<Toolbar>
+<h2 sx={{padding:5, margin: 5}}> &nbsp; &nbsp; Menu Items </h2>
+      <Button sx={{ color: 'white', ':hover': { bgcolor: '#ffc6c4', color: 'white', }, marginLeft: 5 }} onClick={sendToPlan}>Add to Plan</Button>
+     
+</Toolbar>
+  </AppBar>
+
+    <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 440, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
+          <TableHead>
+            <TableRow sx={{maxWidth:1400}}>
+            
+              <TableCell style={{ maxWidth: 110}}  align="left">Add?</TableCell>
+              <TableCell style={{ maxWidth: 110}}  align="left">Food</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 80 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody sx={{maxWidth:1350}}>
+            {menuItems.map((menuItem, i) => {
+              console.log(i);
+              return(
+                <TableRow
+                    key={menuItem.item_name}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                    <TableCell padding="checkbox">
+                      <Checkbox color="primary" onChange={() => handleCheck(menuItem.item_id)}/>
+                    </TableCell>
+                    <TableCell>{menuItem.item_name}</TableCell>     
+              <TableCell> {menuItem.calories}</TableCell>
+              <TableCell> {menuItem.fat}</TableCell>
+              <TableCell> {menuItem.sat_fat}</TableCell>
+              <TableCell> {menuItem.trans_fat}</TableCell>
+              <TableCell> {menuItem.carbs}</TableCell>
+              <TableCell> {menuItem.fiber}</TableCell>
+              <TableCell>{menuItem.sugar} </TableCell>
+              <TableCell> {menuItem.protein}</TableCell>
+              <TableCell>{menuItem.sodium} </TableCell>
+              <TableCell> {menuItem.potassium}</TableCell>
+              <TableCell> {menuItem.cholesterol}</TableCell>
+            </TableRow>
+            )
+          })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      </Paper>

 </ThemeProvider>
-)
-
+  
+  );
 }
-export default MenuExpansion;
+export default Menus;
--- a/db_app/src/components/Menus.js
+++ b/db_app/src/components/Menus.js
@@ -37,7 +37,8 @@ const theme = createTheme({
  });

 function Menus() {
-    const navigate = useNavigate();
+
+  const navigate = useNavigate();

 	const Home = () => {
 		 navigate('/Plan');
@@ -108,7 +109,7 @@ const menuExpansion = () => {
    <Button variant="h6" color="main" component="div" onClick={Menus}>
      Menus
    </Button>
-    <Button  variant="h6" onClick="Past">
+    <Button  variant="h6" onClick={Past}>
    Past Plans</Button> 
    <Button variant="h6" color="main" component="div" onClick={navigateLogin} sx={{
    ':hover': {
@@ -121,8 +122,18 @@ const menuExpansion = () => {
  </Toolbar>
 </AppBar>

+<AppBar className='bar' position="static">
+<Toolbar>
+<h2 sx={{padding:5, margin: 5}}>
+        &nbsp; &nbsp;
+        Campus Eateries
+      </h2>
+     
+</Toolbar>
+  </AppBar>
+
 <Box sx={{  
-          margin: 8,
+          margin: 5,
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
--- a/db_app/src/components/Past.js
+++ b/db_app/src/components/Past.js
@@ -0,0 +1,292 @@
+import React,{useState, useEffect} from 'react';
+import {Routes, Route, useNavigate} from 'react-router-dom';
+import './Login.css';
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import TextField from "@mui/material/TextField";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Avatar from '@mui/material/Avatar';
+import Tooltip from '@mui/material/Tooltip';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem';
+import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ReactSession } from 'react-client-session';
+import Axios from 'axios';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper} from '@mui/material';
+
+
+const theme = createTheme({
+    palette: {
+      primary: {
+        main: lightGreen[700],
+        apple: red[500],
+      },
+
+    },
+  });
+
+function Past() {
+
+    const navigate = useNavigate();
+
+	const Home = () => {
+        navigate('/Plan');
+   }
+   const Menus = () => {
+       navigate('/Menus');
+  }
+  const Past = () => {
+   navigate('/Past');
+}
+const navigateLogin = () => {
+    navigate('/');
+}
+
+const logout = () => {
+    ReactSession.set("net_id", "");
+    navigateLogin();
+
+}
+
+const Log = () => {
+    navigate('/LogMeals')
+  }
+  
+  const Progress = () => {
+    navigate('/ThisWeek')
+  }
+//get the start of each week and reformat to Oracle date type
+function weekStart(){
+  var date_str = new Date();
+  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+  var weekday = days[date_str.getDay()]
+
+  if (weekday != 'Sunday'){
+    return;
+  }
+
+  var date_str = new Date();
+  var curr_day = String(date_str.getDate()).padStart(2, '0');
+  const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+
+  var curr_month = months[date_str.getMonth()];
+  var curr_year = String(date_str.getFullYear());
+  var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2);
+
+  return db_date;
+}
+
+const net_id = ReactSession.get("net_id");
+
+  //Get history of plans 
+  const [pastPlans, setPastPlans] = useState([{}]);
+  const makePastURL = (net_id) => `http://3.219.93.142:8000/api/all_goal/${net_id}`;
+
+  const getPastPlans = () => {
+    const net_id = ReactSession.get("net_id");
+    const url_to_query = makePastURL(net_id);
+     Axios.get(url_to_query).then((response) => {
+      console.log(response.data);
+      setPastPlans(response.data);
+    });
+     
+    }
+      //Get history of actual totals for weekly plan (progress)
+      const [past, setPast] = useState([{}]);
+      const makeURL = (net_id) => `http://3.219.93.142:8000/api/result/${net_id}`;
+    
+      const getPast = () => {
+        const net_id = ReactSession.get("net_id");
+        const url_to_query = makeURL(net_id);
+         Axios.get(url_to_query).then((response) => {
+          console.log(response.data);
+          setPast(response.data);
+        });
+         
+        }
+
+    //run getPast and pastPlans on page load
+        useEffect(() => {
+            getPast()
+            console.log('Past actual in')
+            getPastPlans()
+            console.log('Past plans in')
+          }, [])
+  
+  return (
+  <ThemeProvider theme={theme}>  
+ 
+      <AppBar position="static">
+        <Toolbar variant="dense">
+          <Button  variant="h6" color="main" position="right" onClick={Home}>
+            Home
+          </Button> 
+          <Button variant="h6" color="main" component="div" onClick={Menus}>
+            Menus
+          </Button>
+          <Button  variant="h6"onClick={Past} >
+            Past Plans</Button> 
+          <Button variant="h6" color="main" component="div" onClick={logout} sx={{
+            ':hover': {
+            bgcolor: '#ffc6c4', // theme.palette.primary.main
+            color: 'red',
+          },
+          }}>
+            Log out
+          </Button>
+        </Toolbar>
+      </AppBar>
+    
+
+    
+    <div>
+      <h1>
+      &nbsp;
+        Your History
+      </h1>
+
+      
+
+      <h3>
+        &nbsp; &nbsp;
+        Past plans by week:
+      </h3>
+
+      <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 200, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
+          <TableHead>
+            <TableRow sx={{maxWidth:1400}}>
+            
+        
+              <TableCell style={{ maxWidth: 110}}  align="left">Week</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 80 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody sx={{maxWidth:1350}}>
+            {pastPlans.map((pastplan, i) => {
+              console.log(i);
+              return(
+                <TableRow
+                    key={pastplan.week}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  >
+                  
+                    <TableCell>
+                      {pastplan.week}
+                    </TableCell>
+        
+              <TableCell> {pastplan.calories}</TableCell>
+              <TableCell> {pastplan.fat_g}</TableCell>
+              <TableCell> {pastplan.sat_fat_g}</TableCell>
+              <TableCell> {pastplan.trans_fat_g}</TableCell>
+              <TableCell> {pastplan.carbs_g}</TableCell>
+              <TableCell> {pastplan.fiber_g}</TableCell>
+              <TableCell>{pastplan.sugar_g} </TableCell>
+              <TableCell> {pastplan.protein_g}</TableCell>
+              <TableCell>{pastplan.sodium_mg} </TableCell>
+              <TableCell> {pastplan.potassium_mg}</TableCell>
+              <TableCell> {pastplan.cholesterol_mg}</TableCell>
+            </TableRow>
+            )
+          })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      </Paper>
+
+    
+      <h3>
+        &nbsp; &nbsp;
+        Past actual by week:
+      </h3>
+
+      <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 200, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
+          <TableHead>
+            <TableRow sx={{maxWidth:1400}}>
+            
+        
+              <TableCell style={{ maxWidth: 110}}  align="left">Week</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 80 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody sx={{maxWidth:1350}}>
+            {past.map((progress, i) => {
+              console.log(i);
+              return(
+                <TableRow
+                    key={progress.week}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  >
+                  
+                    <TableCell>
+                      {progress.week}
+                    </TableCell>
+        
+              <TableCell> {progress.calories}</TableCell>
+              <TableCell> {progress.fat_g}</TableCell>
+              <TableCell> {progress.sat_fat_g}</TableCell>
+              <TableCell> {progress.trans_fat_g}</TableCell>
+              <TableCell> {progress.carbs_g}</TableCell>
+              <TableCell> {progress.fiber_g}</TableCell>
+              <TableCell>{progress.sugar_g} </TableCell>
+              <TableCell> {progress.protein_g}</TableCell>
+              <TableCell>{progress.sodium_mg} </TableCell>
+              <TableCell> {progress.potassium_mg}</TableCell>
+              <TableCell> {progress.cholesterol_mg}</TableCell>
+            </TableRow>
+            )
+          })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      </Paper>
+      </div>
+
+    
+    </ThemeProvider>
+  
+    );
+  }
+  
+  export default Past;
--- a/db_app/src/components/Plan.js
+++ b/db_app/src/components/Plan.js
@@ -1,4 +1,4 @@
-import React,{useState} from 'react';
+import React,{useState, useEffect} from 'react';
 import {Routes, Route, useNavigate} from 'react-router-dom';
 import './Login.css';
 import Button from "@mui/material/Button";
@@ -11,7 +11,7 @@ import { ReactSession } from 'react-client-session';
 import Axios from 'axios';
 import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
-import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper} from '@mui/material';
+import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper,Checkbox} from '@mui/material';


 const theme = createTheme({
@@ -22,11 +22,12 @@ const theme = createTheme({
      },

    },
-  });
+});

 function MyPlan() {

-    const navigate = useNavigate();
+  //Navigation functions
+  const navigate = useNavigate();

 	const Home = () => {
        navigate('/Plan');
@@ -36,40 +37,57 @@ function MyPlan() {
  }
  const Past = () => {
   navigate('/Past');
-}
-const navigateLogin = () => {
+  }
+  const navigateLogin = () => {
    navigate('/');
-}
-
-const logout = () => {
-    ReactSession.set("net_id", "");
-    navigateLogin();
-
-}
-//get the start of each week and reformat to Oracle date type
-function weekStart(){
-  var date_str = new Date();
-  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-  var weekday = days[date_str.getDay()]
-
-  if (weekday != 'Sunday'){
-    return;
  }

-  var date_str = new Date();
-  var curr_day = String(date_str.getDate()).padStart(2, '0');
-  const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+  const logout = () => {
+    ReactSession.set("net_id", "");
+    navigateLogin();
+  }

+const Log = () => {
+  navigate('/LogMeals')
+}
+
+const Progress = () => {
+  navigate('/ThisWeek')
+}
+
+const [week, setWeek] = useState();
+const displayWeek = () => {
+  setWeek(() => weekStart());
+}
+
+
+//get start of week (sunday)
+function getLastSunday() {
+  const date = new Date();
+  const today = date.getDate();
+  const currentDay = date.getDay();
+  const newDate = date.setDate(today - (currentDay || 7));
+  return new Date(newDate);
+}
+
+//get the Sunday of each week and reformat to Oracle date type
+function weekStart(){
+  
+  var date_str = getLastSunday();
+  var curr_day = String(date_str.getDate()).padStart(2, '0');
+  console.log(curr_day);
+  const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
  var curr_month = months[date_str.getMonth()];
  var curr_year = String(date_str.getFullYear());
  var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2);
-
+   console.log(db_date)
  return db_date;
 }

+//Get netid session variable
 const net_id = ReactSession.get("net_id");

-//to set nutritional goal for the week
+//To set nutritional goal for the week
 const [goalInput, setGoalInput] = useState({
      total_cal: 0,
      total_fat: 0,
@@ -85,13 +103,19 @@ const [goalInput, setGoalInput] = useState({
    }
 );

+//Variable to hold the goal input from the form
 const{total_cal, total_fat, total_sat_fat, total_trans_fat, total_carbs, total_fiber, 
  total_sugar, total_protein, total_sodium, total_potassium, total_cholesterol} = goalInput

+//Change handler for form submit to send the goal info to the server
 const changeGoalHandler = evt =>{
  setGoalInput({...goalInput, [evt.target.name]: [evt.target.value] })
 }

+//Variable to hold the success state of submit
+const [success, setSuccess] = useState("");
+
+//Sends http request to submit goal
 const submitGoalHandler = evt => {
  evt.preventDefault();
  console.log(goalInput)
@@ -116,88 +140,19 @@ const submitGoalHandler = evt => {
      console.log(response);
      console.log(response.status);
    })
-};
-
-//to find a food item from an on campus location to your weekly journal
-const [keyword, setKeyword] = useState({
-  search_term:""
-})
-
-const{search_term} = keyword
-
-const changeSearchHandler = evt => {
-  setKeyword({ ...keyword, [evt.target.name]: [evt.target.value] })
-}
-
-const submitSearchHandler = evt => {
-  evt.preventDefault();
-  console.log(search_term)
-  console.log(net_id)
-  Axios.post("http://3.219.93.142:8000/api/menu_search",
-    {
-      search_term:search_term[0]
-    }).then((response) => {
-      console.log(response);
-      console.log(response.status);
-      console.log(response.data);
-    })
+    setSuccess('Plan saved!');
 };


-//to add an off campus food item or meal to your weekly journal
-  const [offCampusInput, setOffCampusInput] = useState({
-    item_name:"",
-    amount: 0,
-    calories: 0,
-    fat_g: 0,
-    sat_fat_g: 0,
-    trans_fat_g: 0,
-    carbs_g: 0,
-    fiber_g: 0,
-    sugar_g: 0,
-    protein_g: 0,
-    sodium_mg: 0,
-    potassium_mg: 0,
-    cholesterol_mg: 0,
-  }
-  );
-
-  const {item_name, amount, calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g,
-    sodium_mg, potassium_mg, cholesterol_mg} = offCampusInput
-
-  const changeOffCampusHandler = evt => {
-    setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] })
-  }
-
-  const submitOffCampusHandler = evt => {
-    evt.preventDefault();
-    console.log(offCampusInput)
-    console.log(net_id)
-    Axios.post("http://3.219.93.142:8000/api/week_plan",
-      {
-        net_id: net_id,
-        item_name: item_name[0],
-        amount: Number(amount[0]),
-        calories: Number(calories[0]),
-        fat_g: Number(fat_g[0]),
-        sat_fat_g: Number(sat_fat_g[0]),
-        trans_fat_g: Number(trans_fat_g[0]),
-        carbs_g: Number(carbs_g[0]),
-        fiber_g: Number(fiber_g[0]),
-        sugar_g: Number(sugar_g[0]),
-        protein_g: Number(protein_g[0]),
-        sodium_mg: Number(sodium_mg[0]),
-        potassium_mg: Number(potassium_mg[0]),
-        cholesterol_mg: Number(cholesterol_mg[0])
-      }).then((response) => {
-        console.log(response);
-        console.log(response.status);
-      })
-  };
+  useEffect(() => {
+    displayWeek()
+    console.log('week calculated')
+  }, []);
+   
+  
+  return (
+  <ThemeProvider theme={theme}>  
  
-    return (
-    <ThemeProvider theme={theme}>  
-    <div>
      <AppBar position="static">
        <Toolbar variant="dense">
          <Button  variant="h6" color="main" position="right" onClick={Home}>
@@ -218,11 +173,27 @@ const submitSearchHandler = evt => {
          </Button>
        </Toolbar>
      </AppBar>
-    </div>
+
+
+    <AppBar className='bar' position="static">
+<Toolbar >
+<Button variant="h2" color="main" onClick={Home}sx={{
+
+            bgcolor: '#053B06', // theme.palette.primary.main
+            color: 'main',
+     
+          }}>
+        Plan for {net_id}
+      </Button>
+      <Button variant="h2" color="main" onClick={Log}>Log Meals</Button>
+      <Button variant="h2" color="main" onClick={Progress}>Plan Progress</Button>
+     
+</Toolbar>
+  </AppBar>

    <div>
      <h1>&nbsp; Your Plan</h1>
-      <h2>&nbsp; &nbsp;Goal for the week of: </h2>
+      <h2>&nbsp; &nbsp;Goal for the week of: {week}</h2>

      <form onSubmit={submitGoalHandler}>
      &nbsp; &nbsp;
@@ -348,259 +319,12 @@ const submitSearchHandler = evt => {
      Submit</Button>
      </form>
    </div>
+    <h2> &nbsp; &nbsp; {success}</h2>
    <br></br>
    
-    <div>
-      <h2>
-        &nbsp; &nbsp;
-        So Far This Week:
-      </h2>
+   

-      <h3>
-        &nbsp; &nbsp;
-        Foods Eaten
-      </h3>
-
-      <TableContainer component={Paper}>
-          <Table stickyHeader>
-          <TableHead>
-            <TableRow>
-              <TableCell style={{ width: 90 }}  align="left">Food</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Calories</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Fat&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Carbs&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Fiber&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Protein&nbsp;(g)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
-              <TableCell style={{ width: 90 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
-            </TableRow>
-          </TableHead>
-
-          <TableBody>
-            <TableRow>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-              <TableCell> </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TableContainer>
    
-      <br></br>
-      <Stack direction="row" spacing={2}>
-        &nbsp; &nbsp;
-        <Chip label="Calories" variant="outlined"/>
-        <Chip label="Fat" variant="outlined"/>
-        &nbsp; &nbsp;
-        <Chip label="Saturated Fat" variant="outlined"/>
-        &nbsp; &nbsp; &nbsp;
-        <Chip label="Trans Fat" variant="outlined"/>
-        &nbsp; &nbsp;
-        <Chip label="Carbs" variant="outlined"/>
-        &nbsp; &nbsp;
-        <Chip label="Fiber" variant="outlined"/>
-        &nbsp; &nbsp; &nbsp;
-        <Chip label="Sugar" variant="outlined"/>
-        &nbsp; &nbsp; &nbsp;
-        <Chip label="Protein" variant="outlined"/>
-        &nbsp; &nbsp; &nbsp;
-        <Chip label="Sodium" variant="outlined"/>
-        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
-        <Chip label="Potassium" variant="outlined"/>
-        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
-        <Chip label="Cholesterol" variant="outlined"/>
-      </Stack>
-    </div>
-
-    <div>
-      <h2>
-        &nbsp; &nbsp;
-        Add to Food Journal
-      </h2>
-      <h3> &nbsp; &nbsp;
-        On-Campus
-      </h3>
-      <form onSubmit={submitSearchHandler}>
-          &nbsp; &nbsp;
-          <TextField
-            id="search_term"
-            label="Keyword"
-            size="medium"
-            name="search_term"
-            value={search_term}
-            onChange={changeSearchHandler}
-          />
-
-          &nbsp; &nbsp;
-          <Button sx={{ m: 1}}
-            type="search"
-            variant="contained"
-            size="medium">
-          Search</Button>
-      </form>
-
-      <h3> &nbsp; &nbsp;
-        Off-Campus
-      </h3>
-        <form onSubmit={submitOffCampusHandler}>
-          &nbsp; &nbsp;
-          <TextField
-            sx={{ paddingBottom: 1 }}
-            id="item_name"
-            label="Food Item"
-            size="small"
-            name="item_name"
-            value={item_name}
-            onChange={changeOffCampusHandler}
-          />
-          <br></br>
-          &nbsp; &nbsp;
-          <TextField
-            id="amount"
-            label="Number of Servings"
-            size="small"
-            name="amount"
-            type="number"
-            value={amount}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            sx={{ paddingBottom: 1 }}
-            id="calories"
-            label="Calories"
-            size="small"
-            name="calories"
-            type="number"
-            value={calories}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="fat"
-            label="Fat (g)"
-            size="small"
-            name="fat_g"
-            type="number"
-            value={fat_g}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="sat_fat"
-            label="Saturated Fat (g)"
-            size="small"
-            name="sat_fat_g"
-            type="number"
-            value={sat_fat_g}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="trans_fat"
-            label="Trans Fat (g)"
-            size="small"
-            name="trans_fat_g"
-            type="number"
-            value={trans_fat_g}
-            onChange={changeOffCampusHandler}
-          />
-          
-          &nbsp; &nbsp;
-          <TextField
-            id="carbs"
-            label="Carbs (g)"
-            size="small"
-            name="carbs_g"
-            type="number"
-            value={carbs_g}
-            onChange={changeOffCampusHandler}
-          />
-          <br></br>
-          &nbsp; &nbsp;
-          <TextField
-            id="fiber"
-            label="Fiber (g)"
-            size="small"
-            name="fiber_g"
-            type="number"
-            value={fiber_g}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="sugar"
-            label="Sugar (g)"
-            size="small"
-            name="sugar_g"
-            type="number"
-            value={sugar_g}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="protein"
-            label="Protein (g)"
-            size="small"
-            name="protein_g"
-            type="number"
-            value={protein_g}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="sodium"
-            label="Sodium (mg)"
-            size="small"
-            name="sodium_mg"
-            type="number"
-            value={sodium_mg}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="potassium"
-            label="Potassium (mg)"
-            size="small"
-            name="potassium_mg"
-            type="number"
-            value={potassium_mg}
-            onChange={changeOffCampusHandler}
-          />
-          &nbsp; &nbsp;
-          <TextField
-            id="cholesterol"
-            label="Cholesterol (mg)"
-            size="small"
-            name="cholesterol_mg"
-            type="number"
-            value={cholesterol_mg}
-            onChange={changeOffCampusHandler}
-          />
-          <br></br>
-          <br></br>
-          &nbsp; &nbsp;
-
-          <Button
-            type="submit"
-            variant="contained"
-            size="large">
-            Submit</Button>
-      </form>
-    </div>
-
    </ThemeProvider>
  
    );
--- a/db_app/src/components/ThisWeek.js
+++ b/db_app/src/components/ThisWeek.js
@@ -0,0 +1,563 @@
+import React,{useState, useEffect} from 'react';
+import {Routes, Route, useNavigate} from 'react-router-dom';
+import './Login.css';
+import Button from "@mui/material/Button";
+import Card from "@mui/material/Card";
+import TextField from "@mui/material/TextField";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Avatar from '@mui/material/Avatar';
+import Tooltip from '@mui/material/Tooltip';
+import Menu from '@mui/material/Menu';
+import MenuIcon from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem';
+import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ReactSession } from 'react-client-session';
+import Axios from 'axios';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper} from '@mui/material';
+
+
+const theme = createTheme({
+    palette: {
+      primary: {
+        main: lightGreen[700],
+        apple: red[500],
+      },
+
+    },
+  });
+
+function ThisWeek() {
+
+    const navigate = useNavigate();
+
+	const Home = () => {
+        navigate('/Plan');
+   }
+   const Menus = () => {
+       navigate('/Menus');
+  }
+  const Past = () => {
+   navigate('/Past');
+}
+const navigateLogin = () => {
+    navigate('/');
+}
+
+const logout = () => {
+    ReactSession.set("net_id", "");
+    navigateLogin();
+
+}
+
+const Log = () => {
+    navigate('/LogMeals')
+  }
+  
+  const Progress = () => {
+    navigate('/ThisWeek')
+  }
+//get the start of each week and reformat to Oracle date type
+function weekStart(){
+  var date_st = new Date();
+  const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+  var weekday = days[date_st.getDay()]
+
+  if (weekday !== 'Sunday'){
+    return;
+  }
+
+  var date_str = new Date();
+  var curr_day = String(date_str.getDate()).padStart(2, '0');
+  const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+
+  var curr_month = months[date_str.getMonth()];
+  var curr_year = String(date_str.getFullYear());
+  var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2);
+
+  return db_date;
+}
+
+function planDay(){
+    var date_s = new Date();
+    var index = date_s.getDay();
+    return(index + 1)
+}
+
+const net_id = ReactSession.get("net_id");
+
+
+  //Get history of items for this week
+  const [pastItems, setPastItems] = useState([{}]);
+  const makeURL = (net_id) => `http://3.219.93.142:8000/api/week_progress/${net_id}`;
+
+  const getHistory = () => {
+    const net_id = ReactSession.get("net_id");
+    const url_to_query = makeURL(net_id);
+     Axios.get(url_to_query).then((response) => {
+      console.log(response.data);
+      setPastItems(response.data);
+    });
+     
+    }
+      //Get sum of totals for weekly plan (progress)
+    const [goals, setGoals] = useState([{}]);
+    const goalURL = (net_id) => `http://3.219.93.142:8000/api/goal/${net_id}`;
+    
+      const getGoal = () => {
+        const net_id = ReactSession.get("net_id");
+        const url_to_query = goalURL(net_id);
+         Axios.get(url_to_query).then((response) => {
+          console.log(response.data);
+          setGoals(response.data);
+        });
+         
+        }
+
+        //Get weekly plan goals
+        const [sum, setSum] = useState([{}]);
+        const sumURL = (net_id) => `http://3.219.93.142:8000/api/week_sum/${net_id}`;
+      
+        const getSum = () => {
+          const net_id = ReactSession.get("net_id");
+          const url_to_query = sumURL(net_id);
+           Axios.get(url_to_query).then((response) => {
+            console.log(response.data);
+            setSum(response.data);
+          });
+           
+          }
+
+          const [toDelete, setToDelete] = useState([]);
+
+          const removeItem = (index) => {
+            setToDelete([
+                       ...toDelete.slice(0, index),
+                       ...toDelete.slice(index + 1)
+            ]);
+          
+          }
+          
+          function handleCheck (i) {
+            console.log(i);
+            if (toDelete.indexOf(i) > -1){
+              //get index and delete
+              var index = toDelete.indexOf(i)
+              removeItem(index);
+              console.log(`removed ${i}`);
+              
+            }
+          
+            else{
+              setToDelete(toDelete => [...toDelete, i]);
+              console.log(`added ${i}`);
+            }
+            
+          }
+    //Delete checked from plan
+    const sendToPlan = () => {
+        Axios.delete('http://3.219.93.142:8000/api/week_meals', {net_id: ReactSession.get("net_id"), item_list: toDelete,}).then((response) => {
+         console.log(response);
+       });
+    }
+
+
+    //Set color variables for chips      
+    const [cals, setCals] = useState(false);
+    const [fat, setFat] = useState(false);
+    const [trans, setTrans] = useState(false);
+    const [carbs, setCarbs] = useState(false);
+    const [sugar, setSugar] = useState(false);
+    const [fiber, setFiber] = useState(false);
+    const [cholesterol, setChol] = useState(false);
+    const [sodium, setSodium] = useState(false);
+    const [sat, setSat] = useState(false);
+    const [protein, setProtein] = useState(false);
+    const [potassium, setPotassium] = useState(false);
+    
+    const setColors = () => {
+
+     
+
+       var dayFactor = planDay() / 7;
+       console.log(dayFactor)
+       console.log('Sum calories:')
+       console.log(sum.calories);
+       console.log('Goals calories:')
+       console.log(goals.calories);
+       console.log(goals.calories*dayFactor);
+
+        //set green
+        if(sum.calories < (1.1*goals.total_cal*dayFactor) && sum.calories >= (0.9*goals.total_cal*dayFactor)){
+            setCals(true)
+        }
+        else {
+            setCals(false)
+        }
+        if(sum.fat_g < (1.1*goals.total_fat*dayFactor) && sum.fat_g >= (0.9*goals.total_fat*dayFactor)){
+            setFat(true)
+        }
+        else {
+            setFat(false)
+        }
+        
+        if(sum.trans_fat_g < (1.1*goals.total_trans_fat*dayFactor) && sum.trans_fat_g >= (0.9*goals.total_trans_fat*dayFactor)){
+            setTrans(true)
+        }
+        else {
+            setTrans(false)
+        }
+        if(sum.carbs_g < (1.1*goals.total_carbs*dayFactor) && sum.carbs_g >= (0.9*goals.total_carbs*dayFactor)){
+            setCarbs(true)
+        }
+        else {
+            setCarbs(false)
+        }
+        if(sum.sugar_g < (1.1*goals.total_sugar*dayFactor) && sum.sugar_g >= (0.9*goals.total_sugar*dayFactor)){
+            setSugar(true)
+        }
+        else {
+            setSugar(false)
+        }
+        if(sum.protein_g < (1.1*goals.total_protein*dayFactor) && sum.protein_g >= (0.9*goals.total_protein*dayFactor)){
+            setProtein(true)
+        }
+        else {
+            setProtein(false)
+        }
+        if(sum.fiber_g < (1.1*goals.total_fiber*dayFactor) && sum.fiber_g >= (0.9*goals.total_fiber*dayFactor)){
+            setFiber(true)
+        }
+        else {
+            setFiber(false)
+        }
+        if(sum.cholesterol_mg < (1.1*goals.total_cholesterol*dayFactor) && sum.cholesterol_mg >= (0.9*goals.total_cholesterol*dayFactor)){
+            setChol(true)
+        }
+        else {
+            setChol(false)
+        }
+        if(sum.sodium_mg < (1.1*goals.total_sodium*dayFactor) && sum.sodium_mg >= (0.9*goals.total_sodium*dayFactor)){
+            setSodium(true)
+        }
+        else {
+            setSodium(false)
+        }
+        if(sum.sat_fat_g < (1.1*goals.total_sat_fat*dayFactor) && sum.sat_fat_g >= (0.9*goals.total_sat_fat*dayFactor)){
+            setSat(true)
+        }
+        else {
+            setSat(false)
+        }
+        if(sum.potassium_mg < (1.1*goals.total_potassium*dayFactor) && sum.potassium_mg >= (0.9*goals.total_potassium*dayFactor)){
+            setPotassium(true)
+        } else {
+            setPotassium(false)
+        }
+
+    
+    }
+
+
+
+
+    //Run getSum, getHistory, and getPlan on page load
+        useEffect(() => {
+            getHistory()
+            console.log('History in')
+            getSum()
+            console.log('Sum in')
+            getGoal()
+            console.log('Goal in')
+            setColors()
+            console.log('Colors set')
+            console.log(planDay())
+          }, []);
+       
+  
+  return (
+  <ThemeProvider theme={theme}>  
+ 
+      <AppBar position="static">
+        <Toolbar variant="dense">
+          <Button  variant="h6" color="main" position="right" onClick={Home}>
+            Home
+          </Button> 
+          <Button variant="h6" color="main" component="div" onClick={Menus}>
+            Menus
+          </Button>
+          <Button  variant="h6"onClick={Past} >
+            Past Plans</Button> 
+          <Button variant="h6" color="main" component="div" onClick={logout} sx={{
+            ':hover': {
+            bgcolor: '#ffc6c4', // theme.palette.primary.main
+            color: 'red',
+          },
+          }}>
+            Log out
+          </Button>
+        </Toolbar>
+      </AppBar>
+      <AppBar className='bar' position="static">
+<Toolbar>
+<Button variant="h2" color="main" onClick={Home}>
+        Plan for {net_id}
+      </Button>
+      <Button variant="h2" color="main" onClick={Log}>Log Meals</Button>
+      <Button variant="h2" color="main" onClick={Progress} sx={{
+          
+          bgcolor: '#053B06', // theme.palette.primary.main
+          color: 'main',
+   
+        }}>Plan Progress</Button>
+     
+  
+     
+</Toolbar>
+  </AppBar>
+
+    
+    <div>
+      <h1>
+      &nbsp;
+        So Far This Week:
+      </h1>
+
+      <h3>
+        &nbsp; &nbsp;
+        Foods Eaten
+      </h3>
+      <Button sx={{
+        color: 'main',
+    ':hover': {
+      bgcolor: 'green',
+      color: 'white',
+    },
+    marginLeft: 5
+  }} onClick={sendToPlan}> Remove checked from log</Button>
+
+      <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 200, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
+          <TableHead>
+            <TableRow sx={{maxWidth:1400}}>
+            
+            <TableCell style={{ maxWidth: 110}}  align="left">Remove?</TableCell>
+              <TableCell style={{ maxWidth: 110}}  align="left">Food</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 80 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody sx={{maxWidth:1350}}>
+            {pastItems.map((pastitem, i) => {
+              console.log(i);
+              return(
+                <TableRow
+                    key={pastitem.item_name}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  >
+
+<TableCell padding="checkbox">
+
+                     
+<Checkbox
+
+color="primary"
+onChange={() => handleCheck(pastitem.item_id)}
+/>
+</TableCell>
+                    <TableCell>
+                      {pastitem.item_name}
+                    </TableCell>
+                    
+        
+              <TableCell> {pastitem.calories}</TableCell>
+              <TableCell> {pastitem.fat_g}</TableCell>
+              <TableCell> {pastitem.sat_fat_g}</TableCell>
+              <TableCell> {pastitem.trans_fat_g}</TableCell>
+              <TableCell> {pastitem.carbs_g}</TableCell>
+              <TableCell> {pastitem.fiber_g}</TableCell>
+              <TableCell>{pastitem.sugar_g} </TableCell>
+              <TableCell> {pastitem.protein_g}</TableCell>
+              <TableCell>{pastitem.sodium_mg} </TableCell>
+              <TableCell> {pastitem.potassium_mg}</TableCell>
+              <TableCell> {pastitem.cholesterol_mg}</TableCell>
+            </TableRow>
+            )
+          })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      </Paper>
+
+    
+      <h3>
+        &nbsp; &nbsp;
+        Weekly Totals
+      </h3>
+
+      <Paper sx={{ width: '100%', overflow: 'hidden' }}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 200, maxWidth:1400}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
+          <TableHead>
+            <TableRow sx={{maxWidth:1400}}>
+            
+    
+              <TableCell style={{ maxWidth: 90 }} align="left">Calories</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 70 }} align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 90 }} align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 80 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody sx={{maxWidth:1350}}>
+                <TableRow
+                    key={sum.item_name}
+                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+                  >
+                  
+            
+        
+              <TableCell> {sum.calories}</TableCell>
+              <TableCell> {sum.fat_g}</TableCell>
+              <TableCell> {sum.sat_fat_g}</TableCell>
+              <TableCell> {sum.trans_fat_g}</TableCell>
+              <TableCell> {sum.carbs_g}</TableCell>
+              <TableCell> {sum.fiber_g}</TableCell>
+              <TableCell>{sum.sugar_g} </TableCell>
+              <TableCell> {sum.protein_g}</TableCell>
+              <TableCell>{sum.sodium_mg} </TableCell>
+              <TableCell> {sum.potassium_mg}</TableCell>
+              <TableCell> {sum.cholesterol_mg}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+      </Paper>
+
+      <br></br>
+      <h4>
+        &nbsp; &nbsp;
+        At a glance
+      </h4>
+      <p> &nbsp; &nbsp; Each category will be red if you are more than 30% off track from your weekly goal for this point in the week.</p>
+      <p> &nbsp; &nbsp; If it's green, you're pretty much on track!</p>
+
+      <Stack direction="row" spacing={2}>
+        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+        <Chip label="Calories" variant="outlined" sx={{
+          
+          bgcolor: cals ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        <Chip label="Fat" variant="outlined" sx={{
+          
+          bgcolor: fat ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp;
+        <Chip label="Saturated Fat" variant="outlined" sx={{
+          
+          bgcolor: sat ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp; &nbsp;
+        <Chip label="Trans Fat" variant="outlined" sx={{
+          
+          bgcolor: trans ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp;
+        <Chip label="Carbs" variant="outlined" sx={{
+          
+          bgcolor: carbs ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp;
+        <Chip label="Fiber" variant="outlined" sx={{
+          
+          bgcolor: fiber ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp; &nbsp;
+        <Chip label="Sugar" variant="outlined" sx={{
+          
+          bgcolor: sugar ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp; &nbsp;
+        <Chip label="Protein" variant="outlined" sx={{
+          
+          bgcolor: protein ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp; &nbsp;
+        <Chip label="Sodium" variant="outlined" sx={{
+          
+          bgcolor: sodium ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+        <Chip label="Potassium" variant="outlined" sx={{
+          
+          bgcolor: potassium ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+        <Chip label="Cholesterol" variant="outlined" sx={{
+          
+          bgcolor: cholesterol ? '#117E0F':'#D93030',
+          color: 'white',
+   
+        }}/>
+      </Stack>
+    </div>
+
+    
+    </ThemeProvider>
+  
+    );
+  }
+  
+  export default ThisWeek;
--- a/db_app/src/components/images/back.jpg
+++ b/db_app/src/components/images/back.jpg