Tabs, and checkboxes

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>
   );

db_app/src/components/LogMeals.js

@@ -0,0 +1,580 @@
+import React,{useState} 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 LogMeals() {
+
+    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 set nutritional goal for the week
+const [goalInput, setGoalInput] = useState({
+      total_cal: "",
+      total_fat: "",
+      total_sat_fat: "",
+      total_trans_fat: "",
+      total_carbs: "",
+      total_fiber: "",
+      total_sugar: "",
+      total_protein: "",
+      total_sodium: "",
+      total_potassium: "",
+      total_cholesterol: "",
+    }
+);
+
+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
+
+const changeGoalHandler = evt =>{
+  setGoalInput({...goalInput, [evt.target.name]: [evt.target.value] })
+}
+
+const submitGoalHandler = evt => {
+  evt.preventDefault();
+  console.log(goalInput)
+  Axios.post("http://3.219.93.142:8000/api/",
+    {
+      total_cal: total_cal[0],
+      total_fat: total_fat[0],
+      total_sat_fat: total_sat_fat[0],
+      total_trans_fat: total_trans_fat[0],
+      total_carbs: total_carbs[0],
+      total_fiber: total_fiber[0],
+      total_sugar: total_sugar[0],
+      total_protein: total_protein[0],
+      total_sodium: total_sodium[0],
+      total_potassium: total_potassium[0],
+      total_cholesterol: total_cholesterol[0]
+    }).then((response) => {
+      console.log(response);
+      console.log(response.status);
+    })
+};
+
+
+//to add an off campus food item or meal to your weekly journal
+  const [offCampusInput, setOffCampusInput] = useState({
+    calories: "",
+    fat_g: "",
+    sat_fat_g: "",
+    trans_fat_g: "",
+    carbs_g: "",
+    fiber_g: "",
+    sugar_g: "",
+    protein_g: "",
+    sodium_g: "",
+    potassium_g: "",
+    cholesterol_g: "",
+  }
+  );
+
+  const { calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g,
+    sodium_g, potassium_g, cholesterol_g, } = offCampusInput
+
+  const changeoffCampusHandler = evt => {
+    setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] })
+  }
+
+  const submitoffCampusHandler = evt => {
+    evt.preventDefault();
+  };
+
+  
+  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; Your Plan</h1>
+      <h2>&nbsp; &nbsp;Goal for the week of: </h2>
+
+      <form onSubmit={submitGoalHandler}>
+      &nbsp; &nbsp;
+      <TextField
+        sx={{ paddingBottom: 1 }}
+        id="total_cal"
+        label="Calories"
+        name="total_cal"
+        value={total_cal}
+        size ="small"
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_fat"
+        label="Fat (g)"
+        name="total_fat"
+        value={total_fat}
+        size="small"
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_sat_fat"
+        label="Saturated Fat (g)"
+        size="small"
+        name="total_sat_fat"
+        value={total_sat_fat}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_trans_fat"
+        label="Trans Fat (g)"
+        size="small"
+        name="total_trans_fat"
+        value={total_trans_fat}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_carbs"
+        label="Carbs (g)"
+        size="small"
+        name="total_carbs"
+        value={total_carbs} 
+        onChange={changeGoalHandler}
+      />
+      <br></br>
+      &nbsp; &nbsp;
+      <TextField
+        id="total_fiber"
+        label="Fiber (g)"
+        size="small"
+        name="total_fiber"
+        value={total_fiber}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_sugar"
+        label="Sugar (g)"
+        size="small"
+        name="total_sugar"
+        value={total_sugar}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_protein"
+        label="Protein (g)"
+        size="small"
+        name="total_protein"
+        value={total_protein}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_sodium"
+        label="Sodium (mg)"
+        size="small"
+        name="total_sodium"
+        value={total_sodium}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_potassium"
+        label="Potassium (mg)"
+        size="small"
+        name="total_potassium"
+        value={total_potassium}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_cholesterol"
+        label="Cholesterol (mg)"
+        size="small"
+        name="total_cholesterol"
+        value={total_cholesterol}
+        onChange={changeGoalHandler}
+      />
+      <br></br>
+      <br></br>
+      &nbsp; &nbsp;
+
+      <Button 
+      type="submit" 
+      variant="contained"
+      size = "large">
+      Submit</Button>
+      </form>
+    </div>
+    <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>
+    
+      <h3>
+        &nbsp; &nbsp;
+        Weekly Totals
+      </h3>
+
+      <TableContainer component={Paper}>
+        <Table sx={{ maxWidth: 1200 }}>
+          <TableHead>
+            <TableRow>
+              <TableCell align="left">Calories</TableCell>
+              <TableCell align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell 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>
+            </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>
+          &nbsp; &nbsp;
+          <FormControl sx={{minWidth:170 }}>
+            <InputLabel id="dining-location-select-label">Dining Location</InputLabel>
+            <Select labelId="dining-location-select-label" id="dining-location-select" label="Dining Location">
+              <MenuItem>DH</MenuItem>
+              <MenuItem>Chick-fil-a</MenuItem>
+              <MenuItem>Smashburger</MenuItem>
+              <MenuItem>Flip Kitchen</MenuItem>
+              <MenuItem>ABP</MenuItem>
+              <MenuItem>Starbucks</MenuItem>
+              <MenuItem>Modern Market</MenuItem>
+              <MenuItem>Taco Bell</MenuItem>
+            </Select>
+          </FormControl>
+
+          &nbsp; &nbsp;
+          <TextField
+            id="keywordsearch"
+            label="Keyword"
+            size="medium"
+          />
+
+          &nbsp; &nbsp;
+          <Button sx={{ m: 1}}
+            type="search"
+            variant="contained"
+            size="medium">
+          Search</Button>
+      </form>
+
+      <h3> &nbsp; &nbsp;
+        Off-Campus
+      </h3>
+        <form>
+          &nbsp; &nbsp;
+          <TextField
+            sx={{ paddingBottom: 1 }}
+            id="food-input"
+            label="Food Item"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            sx={{ paddingBottom: 1 }}
+            id="calorie-input"
+            label="Calories"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="fat-input"
+            label="Fat (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="saturated_fat-input"
+            label="Saturated Fat (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="trans_fat-input"
+            label="Trans Fat (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="carbs-input"
+            label="Carbs (g)"
+            size="small"
+          />
+          <br></br>
+          &nbsp; &nbsp;
+          <TextField
+            id="fiber-input"
+            label="Fiber (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sugar-input"
+            label="Sugar (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="protein-input"
+            label="Protein (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sodium-input"
+            label="Sodium (mg)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="potassium-input"
+            label="Potassium (mg)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="cholesterol-input"
+            label="Cholesterol (mg)"
+            size="small"
+          />
+          <br></br>
+          <br></br>
+          &nbsp; &nbsp;
+
+          <Button
+            type="submit"
+            variant="contained"
+            size="large">
+            Submit</Button>
+        </form>
+
+    </div>
+    </ThemeProvider>
+  
+    );
+  }
+  
+  export default LogMeals;

db_app/src/components/MenuExpansion.js

@@ -80,7 +80,10 @@ const eatery_to_query = getEatery();
 }
 
 
+
+
 const [menuItems, setmenuItems] = useState([{}]);
+const [toAdd, setToAdd] = useState([]);
 
 const doMenu = () => {
   const data = getMenu();
@@ -91,6 +94,44 @@ const buttonTime = () => {
  getMenu();
  console.log(menuItems);
 }
+
+const removeItem = (index) => {
+  setToAdd([
+             ...toAdd.slice(0, index),
+             ...toAdd.slice(index + 1)
+  ]);
+
+}
+
+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}`);
+  }
+  
+}
+
+
+
+const testChecks = () => {
+  console.log(toAdd);
+}
+
+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);
+ });
+  
+ }
  
 useEffect(() => {
   getMenu()
@@ -121,31 +162,47 @@ useEffect(() => {
   </Toolbar>
 </AppBar>
 
-<h3 sx={{padding:10, margin: 5}}>
+<AppBar className='bar' position="static">
+<Toolbar>
+<h2 sx={{padding:5, margin: 5}}>
         &nbsp; &nbsp;
-        Menu Items:
+        Menu Items
-      </h3>
+      </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}}>
+      <TableContainer component={Paper} sx={{margin: 5, maxHeight: 440, maxWidth:1400}}>
-          <Table stickyHeader sx={{maxWidth:700, size:"small"}}>
+          <Table stickyHeader sx={{maxWidth:1400}}>
           <TableHead>
-            <TableRow>
+            <TableRow sx={{maxWidth:1400}}>
-              <TableCell style={{ maxWidth: 120 }}  align="left">Food</TableCell>
+            
+              <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: 90 }} align="left">Fat&nbsp;(g)</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: 90 }} align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell style={{ maxWidth: 50 }} align="left">Carbs&nbsp;(g)</TableCell>
-              <TableCell style={{ maxWidth: 90 }} align="left">Fiber&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: 90 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
+              <TableCell style={{ maxWidth: 80 }} align="left">Cholesterol&nbsp;(mg)</TableCell>
             </TableRow>
           </TableHead>
 
-          <TableBody>
+          <TableBody sx={{maxWidth:1350}}>
             {menuItems.map((menuItem, i) => {
               console.log(i);
               return(
@@ -153,6 +210,15 @@ useEffect(() => {
                     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>
@@ -179,6 +245,7 @@ useEffect(() => {
 
 
 
+
 </ThemeProvider>
   
   );

db_app/src/components/Menus.js

@@ -124,6 +124,17 @@ 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,
           display: "flex",

db_app/src/components/Past.js

@@ -0,0 +1,575 @@
+import React,{useState} 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_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 set nutritional goal for the week
+const [goalInput, setGoalInput] = useState({
+      total_cal: "",
+      total_fat: "",
+      total_sat_fat: "",
+      total_trans_fat: "",
+      total_carbs: "",
+      total_fiber: "",
+      total_sugar: "",
+      total_protein: "",
+      total_sodium: "",
+      total_potassium: "",
+      total_cholesterol: "",
+    }
+);
+
+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
+
+const changeGoalHandler = evt =>{
+  setGoalInput({...goalInput, [evt.target.name]: [evt.target.value] })
+}
+
+const submitGoalHandler = evt => {
+  evt.preventDefault();
+  console.log(goalInput)
+  Axios.post("http://3.219.93.142:8000/api/",
+    {
+      total_cal: total_cal[0],
+      total_fat: total_fat[0],
+      total_sat_fat: total_sat_fat[0],
+      total_trans_fat: total_trans_fat[0],
+      total_carbs: total_carbs[0],
+      total_fiber: total_fiber[0],
+      total_sugar: total_sugar[0],
+      total_protein: total_protein[0],
+      total_sodium: total_sodium[0],
+      total_potassium: total_potassium[0],
+      total_cholesterol: total_cholesterol[0]
+    }).then((response) => {
+      console.log(response);
+      console.log(response.status);
+    })
+};
+
+
+//to add an off campus food item or meal to your weekly journal
+  const [offCampusInput, setOffCampusInput] = useState({
+    calories: "",
+    fat_g: "",
+    sat_fat_g: "",
+    trans_fat_g: "",
+    carbs_g: "",
+    fiber_g: "",
+    sugar_g: "",
+    protein_g: "",
+    sodium_g: "",
+    potassium_g: "",
+    cholesterol_g: "",
+  }
+  );
+
+  const { calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g,
+    sodium_g, potassium_g, cholesterol_g, } = offCampusInput
+
+  const changeoffCampusHandler = evt => {
+    setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] })
+  }
+
+  const submitoffCampusHandler = evt => {
+    evt.preventDefault();
+  };
+
+  
+  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}>Plan Progress</Button>
+    
+  
+     
+</Toolbar>
+  </AppBar>
+
+    <div>
+      <h1>&nbsp; Your Plan</h1>
+      <h2>&nbsp; &nbsp;Goal for the week of: </h2>
+
+      <form onSubmit={submitGoalHandler}>
+      &nbsp; &nbsp;
+      <TextField
+        sx={{ paddingBottom: 1 }}
+        id="total_cal"
+        label="Calories"
+        name="total_cal"
+        value={total_cal}
+        size ="small"
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_fat"
+        label="Fat (g)"
+        name="total_fat"
+        value={total_fat}
+        size="small"
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_sat_fat"
+        label="Saturated Fat (g)"
+        size="small"
+        name="total_sat_fat"
+        value={total_sat_fat}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_trans_fat"
+        label="Trans Fat (g)"
+        size="small"
+        name="total_trans_fat"
+        value={total_trans_fat}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_carbs"
+        label="Carbs (g)"
+        size="small"
+        name="total_carbs"
+        value={total_carbs} 
+        onChange={changeGoalHandler}
+      />
+      <br></br>
+      &nbsp; &nbsp;
+      <TextField
+        id="total_fiber"
+        label="Fiber (g)"
+        size="small"
+        name="total_fiber"
+        value={total_fiber}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_sugar"
+        label="Sugar (g)"
+        size="small"
+        name="total_sugar"
+        value={total_sugar}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_protein"
+        label="Protein (g)"
+        size="small"
+        name="total_protein"
+        value={total_protein}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_sodium"
+        label="Sodium (mg)"
+        size="small"
+        name="total_sodium"
+        value={total_sodium}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_potassium"
+        label="Potassium (mg)"
+        size="small"
+        name="total_potassium"
+        value={total_potassium}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_cholesterol"
+        label="Cholesterol (mg)"
+        size="small"
+        name="total_cholesterol"
+        value={total_cholesterol}
+        onChange={changeGoalHandler}
+      />
+      <br></br>
+      <br></br>
+      &nbsp; &nbsp;
+
+      <Button 
+      type="submit" 
+      variant="contained"
+      size = "large">
+      Submit</Button>
+      </form>
+    </div>
+    <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>
+    
+      <h3>
+        &nbsp; &nbsp;
+        Weekly Totals
+      </h3>
+
+      <TableContainer component={Paper}>
+        <Table sx={{ maxWidth: 1200 }}>
+          <TableHead>
+            <TableRow>
+              <TableCell align="left">Calories</TableCell>
+              <TableCell align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell 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>
+            </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>
+          &nbsp; &nbsp;
+          <FormControl sx={{minWidth:170 }}>
+            <InputLabel id="dining-location-select-label">Dining Location</InputLabel>
+            <Select labelId="dining-location-select-label" id="dining-location-select" label="Dining Location">
+              <MenuItem>DH</MenuItem>
+              <MenuItem>Chick-fil-a</MenuItem>
+              <MenuItem>Smashburger</MenuItem>
+              <MenuItem>Flip Kitchen</MenuItem>
+              <MenuItem>ABP</MenuItem>
+              <MenuItem>Starbucks</MenuItem>
+              <MenuItem>Modern Market</MenuItem>
+              <MenuItem>Taco Bell</MenuItem>
+            </Select>
+          </FormControl>
+
+          &nbsp; &nbsp;
+          <TextField
+            id="keywordsearch"
+            label="Keyword"
+            size="medium"
+          />
+
+          &nbsp; &nbsp;
+          <Button sx={{ m: 1}}
+            type="search"
+            variant="contained"
+            size="medium">
+          Search</Button>
+      </form>
+
+      <h3> &nbsp; &nbsp;
+        Off-Campus
+      </h3>
+        <form>
+          &nbsp; &nbsp;
+          <TextField
+            sx={{ paddingBottom: 1 }}
+            id="food-input"
+            label="Food Item"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            sx={{ paddingBottom: 1 }}
+            id="calorie-input"
+            label="Calories"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="fat-input"
+            label="Fat (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="saturated_fat-input"
+            label="Saturated Fat (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="trans_fat-input"
+            label="Trans Fat (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="carbs-input"
+            label="Carbs (g)"
+            size="small"
+          />
+          <br></br>
+          &nbsp; &nbsp;
+          <TextField
+            id="fiber-input"
+            label="Fiber (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sugar-input"
+            label="Sugar (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="protein-input"
+            label="Protein (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sodium-input"
+            label="Sodium (mg)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="potassium-input"
+            label="Potassium (mg)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="cholesterol-input"
+            label="Cholesterol (mg)"
+            size="small"
+          />
+          <br></br>
+          <br></br>
+          &nbsp; &nbsp;
+
+          <Button
+            type="submit"
+            variant="contained"
+            size="large">
+            Submit</Button>
+        </form>
+
+    </div>
+    </ThemeProvider>
+  
+    );
+  }
+  
+  export default ThisWeek;

db_app/src/components/Plan.js

@@ -63,6 +63,17 @@ const logout = () => {
     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();
@@ -162,7 +173,7 @@ const submitGoalHandler = evt => {
   
   return (
   <ThemeProvider theme={theme}>  
-    <div>
+  
       <AppBar position="static">
         <Toolbar variant="dense">
           <Button  variant="h6" color="main" position="right" onClick={Home}>
@@ -183,7 +194,25 @@ const submitGoalHandler = 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>

db_app/src/components/ThisWeek.js

@@ -0,0 +1,580 @@
+import React,{useState} 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_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 set nutritional goal for the week
+const [goalInput, setGoalInput] = useState({
+      total_cal: "",
+      total_fat: "",
+      total_sat_fat: "",
+      total_trans_fat: "",
+      total_carbs: "",
+      total_fiber: "",
+      total_sugar: "",
+      total_protein: "",
+      total_sodium: "",
+      total_potassium: "",
+      total_cholesterol: "",
+    }
+);
+
+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
+
+const changeGoalHandler = evt =>{
+  setGoalInput({...goalInput, [evt.target.name]: [evt.target.value] })
+}
+
+const submitGoalHandler = evt => {
+  evt.preventDefault();
+  console.log(goalInput)
+  Axios.post("http://3.219.93.142:8000/api/",
+    {
+      total_cal: total_cal[0],
+      total_fat: total_fat[0],
+      total_sat_fat: total_sat_fat[0],
+      total_trans_fat: total_trans_fat[0],
+      total_carbs: total_carbs[0],
+      total_fiber: total_fiber[0],
+      total_sugar: total_sugar[0],
+      total_protein: total_protein[0],
+      total_sodium: total_sodium[0],
+      total_potassium: total_potassium[0],
+      total_cholesterol: total_cholesterol[0]
+    }).then((response) => {
+      console.log(response);
+      console.log(response.status);
+    })
+};
+
+
+//to add an off campus food item or meal to your weekly journal
+  const [offCampusInput, setOffCampusInput] = useState({
+    calories: "",
+    fat_g: "",
+    sat_fat_g: "",
+    trans_fat_g: "",
+    carbs_g: "",
+    fiber_g: "",
+    sugar_g: "",
+    protein_g: "",
+    sodium_g: "",
+    potassium_g: "",
+    cholesterol_g: "",
+  }
+  );
+
+  const { calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g,
+    sodium_g, potassium_g, cholesterol_g, } = offCampusInput
+
+  const changeoffCampusHandler = evt => {
+    setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] })
+  }
+
+  const submitoffCampusHandler = evt => {
+    evt.preventDefault();
+  };
+
+  
+  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; Your Plan</h1>
+      <h2>&nbsp; &nbsp;Goal for the week of: </h2>
+
+      <form onSubmit={submitGoalHandler}>
+      &nbsp; &nbsp;
+      <TextField
+        sx={{ paddingBottom: 1 }}
+        id="total_cal"
+        label="Calories"
+        name="total_cal"
+        value={total_cal}
+        size ="small"
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_fat"
+        label="Fat (g)"
+        name="total_fat"
+        value={total_fat}
+        size="small"
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_sat_fat"
+        label="Saturated Fat (g)"
+        size="small"
+        name="total_sat_fat"
+        value={total_sat_fat}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_trans_fat"
+        label="Trans Fat (g)"
+        size="small"
+        name="total_trans_fat"
+        value={total_trans_fat}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_carbs"
+        label="Carbs (g)"
+        size="small"
+        name="total_carbs"
+        value={total_carbs} 
+        onChange={changeGoalHandler}
+      />
+      <br></br>
+      &nbsp; &nbsp;
+      <TextField
+        id="total_fiber"
+        label="Fiber (g)"
+        size="small"
+        name="total_fiber"
+        value={total_fiber}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_sugar"
+        label="Sugar (g)"
+        size="small"
+        name="total_sugar"
+        value={total_sugar}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_protein"
+        label="Protein (g)"
+        size="small"
+        name="total_protein"
+        value={total_protein}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_sodium"
+        label="Sodium (mg)"
+        size="small"
+        name="total_sodium"
+        value={total_sodium}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_potassium"
+        label="Potassium (mg)"
+        size="small"
+        name="total_potassium"
+        value={total_potassium}
+        onChange={changeGoalHandler}
+      />
+      &nbsp; &nbsp;
+      <TextField
+        id="total_cholesterol"
+        label="Cholesterol (mg)"
+        size="small"
+        name="total_cholesterol"
+        value={total_cholesterol}
+        onChange={changeGoalHandler}
+      />
+      <br></br>
+      <br></br>
+      &nbsp; &nbsp;
+
+      <Button 
+      type="submit" 
+      variant="contained"
+      size = "large">
+      Submit</Button>
+      </form>
+    </div>
+    <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>
+    
+      <h3>
+        &nbsp; &nbsp;
+        Weekly Totals
+      </h3>
+
+      <TableContainer component={Paper}>
+        <Table sx={{ maxWidth: 1200 }}>
+          <TableHead>
+            <TableRow>
+              <TableCell align="left">Calories</TableCell>
+              <TableCell align="left">Fat&nbsp;(g)</TableCell>
+              <TableCell align="left">Saturated Fat&nbsp;(g)</TableCell>
+              <TableCell align="left">TransFat&nbsp;(g)</TableCell>
+              <TableCell align="left">Carbs&nbsp;(g)</TableCell>
+              <TableCell align="left">Fiber&nbsp;(g)</TableCell>
+              <TableCell align="left">Sugar&nbsp;(g)</TableCell>
+              <TableCell align="left">Protein&nbsp;(g)</TableCell>
+              <TableCell align="left">Sodium&nbsp;(mg)</TableCell>
+              <TableCell align="left">Potassium&nbsp;(mg)</TableCell>
+              <TableCell 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>
+            </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>
+          &nbsp; &nbsp;
+          <FormControl sx={{minWidth:170 }}>
+            <InputLabel id="dining-location-select-label">Dining Location</InputLabel>
+            <Select labelId="dining-location-select-label" id="dining-location-select" label="Dining Location">
+              <MenuItem>DH</MenuItem>
+              <MenuItem>Chick-fil-a</MenuItem>
+              <MenuItem>Smashburger</MenuItem>
+              <MenuItem>Flip Kitchen</MenuItem>
+              <MenuItem>ABP</MenuItem>
+              <MenuItem>Starbucks</MenuItem>
+              <MenuItem>Modern Market</MenuItem>
+              <MenuItem>Taco Bell</MenuItem>
+            </Select>
+          </FormControl>
+
+          &nbsp; &nbsp;
+          <TextField
+            id="keywordsearch"
+            label="Keyword"
+            size="medium"
+          />
+
+          &nbsp; &nbsp;
+          <Button sx={{ m: 1}}
+            type="search"
+            variant="contained"
+            size="medium">
+          Search</Button>
+      </form>
+
+      <h3> &nbsp; &nbsp;
+        Off-Campus
+      </h3>
+        <form>
+          &nbsp; &nbsp;
+          <TextField
+            sx={{ paddingBottom: 1 }}
+            id="food-input"
+            label="Food Item"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            sx={{ paddingBottom: 1 }}
+            id="calorie-input"
+            label="Calories"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="fat-input"
+            label="Fat (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="saturated_fat-input"
+            label="Saturated Fat (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="trans_fat-input"
+            label="Trans Fat (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="carbs-input"
+            label="Carbs (g)"
+            size="small"
+          />
+          <br></br>
+          &nbsp; &nbsp;
+          <TextField
+            id="fiber-input"
+            label="Fiber (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sugar-input"
+            label="Sugar (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="protein-input"
+            label="Protein (g)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="sodium-input"
+            label="Sodium (mg)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="potassium-input"
+            label="Potassium (mg)"
+            size="small"
+          />
+          &nbsp; &nbsp;
+          <TextField
+            id="cholesterol-input"
+            label="Cholesterol (mg)"
+            size="small"
+          />
+          <br></br>
+          <br></br>
+          &nbsp; &nbsp;
+
+          <Button
+            type="submit"
+            variant="contained"
+            size="large">
+            Submit</Button>
+        </form>
+
+    </div>
+    </ThemeProvider>
+  
+    );
+  }
+  
+  export default ThisWeek;