[feat] adding fridgeTab frontend

FoodByte/FoodByte/README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

FoodByte/package.json → FoodByte/FoodByte/package.json

@@ -10,8 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
     "firebase": "^10.9.0",
+    "mui": "^0.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3"

FoodByte/FoodByte/src/components/FridgeTab.tsx

@@ -0,0 +1,150 @@
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import { TextField } from '@mui/material';
+import {Box, Button} from '@mui/material'
+import {styled} from '@mui/system'
+import { useState } from 'react';
+
+function createData(
+    no: number,
+    name: string,
+    quantity: number,
+    availableAt: string
+  ) {
+    return { no, name, quantity, availableAt };
+  }
+
+function FridgeTab() {
+
+    const [isAdd, setisAdd] = useState(false)
+    const addState = () => setisAdd(true)
+    const closeState = () => setisAdd(false)
+
+    const [values, setValues] = useState({
+        Name: '',
+        Quantity: 0,
+        AvailableAt: ''
+    })
+
+    const handleValueChangen = (e) => {
+        const {name, value} = e.target;
+        setValues({
+            ...values,
+            [name]: value,
+        })
+    }
+
+    const onSave = () => {
+        const newRow = createData(rows.length + 1, values.Name, values.Quantity, values.AvailableAt);
+        setRows([...rows, newRow]);
+        setValues({ Name: '', Quantity: 0, AvailableAt: '' }); // Clear input fields after saving
+    }
+
+    // limit 14 rows
+    const [rows, setRows] = useState([
+        createData(1, 'Apples', 2, 'Target'),
+        createData(2, 'Cooking Oil', 1, 'Amazon'),
+        createData(3, 'Carrots', 2, 'Whole Food'),
+        createData(4, 'Soy Sauce', 1, 'H-Mart'),
+        createData(5, 'Rice', 5, 'H-Mart')
+    ]);
+
+    const AddField = {
+        width: '100px',
+        textAlign: 'center',
+        fontSize: '0.875rem'
+    }
+
+    const ButtonHolder = {
+        width: '700px',
+        textAlign: 'right',
+        marginTop: '20px',
+    }
+
+    return (
+        <>
+        <TableContainer component={Paper} sx={{height: '500px'}}>
+            <Table sx={{ minWidth: 700 }} size="small" aria-label="a dense table">
+                <TableHead>
+                    <TableRow>
+                        <TableCell align='center'>No. </TableCell>
+                        <TableCell align='center'>Name</TableCell>
+                        <TableCell align='center'>Quantity</TableCell>
+                        <TableCell align='center'>Available at</TableCell>
+                    </TableRow>
+                 </TableHead>
+                <TableBody>
+                    {rows.map((row) => (
+                    <TableRow key={row.name}>
+                        <TableCell align='center'>{row.no}</TableCell>
+                        <TableCell align='center'>{row.name}</TableCell>
+                        <TableCell align='center'>{row.quantity}</TableCell>
+                        <TableCell align='center'>{row.availableAt}</TableCell>
+                    </TableRow>
+                    ))}
+                    { isAdd == true ?
+                    <TableRow>
+                        <TableCell align='center'>{rows.length + 1}</TableCell>
+                        <TableCell align='center'>
+
+                            <TextField 
+                            id="standard-basic" 
+                            variant="standard" 
+                            sx={AddField} 
+                            name='Name'
+                            value={values.Name}
+                            onChange={handleValueChangen}>
+                            </TextField>
+
+                        </TableCell>
+                        <TableCell align='center'>
+
+                        <TextField 
+                            id="standard-basic" 
+                            variant="standard" 
+                            sx={AddField} 
+                            name='Quantity'
+                            value={values.Quantity}
+                            onChange={handleValueChangen}>
+                            </TextField>
+
+                        </TableCell>
+                        <TableCell align='center'>
+
+                        <TextField 
+                            id="standard-basic" 
+                            variant="standard" 
+                            sx={AddField} 
+                            name='AvailableAt'
+                            value={values.AvailableAt}
+                            onChange={handleValueChangen}>
+                            </TextField>
+
+                        </TableCell>
+                    </TableRow>
+                    : <></>
+                    }      
+                </TableBody>
+            </Table>
+        </TableContainer>
+
+        <Box sx={ButtonHolder}>
+        {isAdd == false ? 
+        <Button variant='contained' onClick={addState}> Add Item</Button> : 
+        <>
+            <Button variant='contained' sx={{backgroundColor: 'green', marginRight:'10px'}} onClick={async() => {onSave(); closeState()}}>Save</Button>
+            <Button variant='contained' sx={{backgroundColor: 'red', marginLeft:'10px'}} onClick={closeState}>Cancel</Button>
+        </>
+        }
+    </Box>
+    </>
+    )
+}
+
+
+export default FridgeTab

FoodByte/src/components/navbar.tsx → FoodByte/FoodByte/src/components/navbar.tsx

@@ -9,7 +9,6 @@ import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; // Icon for Sho
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
-import { useState } from 'react';
 
 export const Navbar = () => {
     const navigate = useNavigate();

FoodByte/FoodByte/src/pages/Fridge.tsx

@@ -0,0 +1,11 @@
+import FridgeTab from "../components/FridgeTab";
+
+export const Fridge = () => {
+
+    return (
+        <>
+            <FridgeTab/>
+        </>
+    );
+};
+export default Fridge;

FoodByte/README.md

@@ -1,30 +1,37 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+# FoodByte
+# 1) Project description
+- We aim to develop a platform that allows users to keep track of the food and ingredients they have available. It will store such information in a database, giving recipe suggestions from what is available, alerting the shop when inventory is low, alerting when food is about to expire, meal planning, etc. The platform will help users easily manage their food and grocery shopping and make cooking more enjoyable and efficient.
+
+# 2) Product requirements
+- Goal: Create an easy-to-use web application that allows users to keep track of ingredients they have available and generate a food recipe from available ingredients.
+- Non-goal: Store ingredients and match them with the corresponding recipes
+  - Non-functional requirements 1: Security
+    - Functional requirements:
+      - Allow users to make their accounts to provide them with personalization
+      - Use 3rd party Authentication such as FB, Google Account, etc.
+  - Non-functional requirements 2: Storing
+    - Functional requirements:
+      - Have an interactive virtual fridge with food images indicating its availability. 
+      - Allow users to dynamically fill in their current available ingredients and store them in the database
+  - Non-functional requirements 3: Suggesting
+    - Functional requirements:
+      - Retrieve available ingredients from the database 
+      - Use Food API to suggest a recipe from available ingredients.
+
+
+# 3) Project management
+- Theme: Help users with meal planning by "virtually" storing their ingredients and giving them recipe suggestions.
+- Epic: Website Beta
+- User story 1: As a user, I want to keep track of my ingredient’s availability to avoid food waste/shortage
+  - Task: Store ingredients in the database
+    - Ticket 1: Design and create a DB to store the data
+      - Create an Entity Relationship Diagram with the appropriate attributes corresponding to ingredients
+    - Ticket 2: Implement a DB 
+      - We think we will make use of Firebase
+- User story 2: As a user, I want to know what recipes I can make from my available ingredients
+  - Task: Implement a food API
+    - Ticket 1: Retrieve recipes that match with available ingredients
+      - Retrieve ingredients from the database
+      - Call API to retrieve recipe that matches available ingredients
+    - Ticket 2: Suggest a recipe that the user might like
+      - Store previously chosen recipe data and analyze