fitness calendar and table

package.json

@@ -12,12 +12,14 @@
     "@fontsource/roboto": "^5.0.13",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
+    "@mui/x-date-pickers": "^7.7.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "ag-grid-react": "^31.3.1",
     "apexcharts": "^3.44.0",
+    "dayjs": "^1.11.11",
     "firebase": "^10.3.0",
     "fractional": "^1.0.0",
     "image-type": "^5.2.0",
@@ -38,6 +40,7 @@
     "redux-saga": "^1.3.0",
     "redux-thunk": "^3.1.0",
     "reselect": "^5.1.0",
+    "rsuite": "^5.64.1",
     "sass": "^1.66.1",
     "styled-components": "^6.1.11",
     "web-vitals": "^2.1.4"

src/App.js

@@ -7,6 +7,7 @@ import AuthenticationRoute from "./routes/signed-out/authentication/authenticati
 import DashboardRoute from "./routes/signed-out/dashboard/dashboard.component";
 import NutrientPredictorRoute from "./routes/shared/nutrient-predictor/nutrient-predictor.component";
 import NutritionTrackerRoute from "./routes/signed-out/nutrition-tracker/nutrition-tracker.component";
+import FitnessRoute from "./routes/signed-out/fitness/fitness.component";
 import CaloriesBurnedRoute from "./routes/signed-out/calories-burned/calories-burned.component"
 import RecipesRoute from "./routes/shared/recipes/recipes.component";
 
@@ -57,6 +58,7 @@ function App() {
             <Fragment>
               <Route path="dashboard" element={ <DashboardRoute/> }/>
               <Route path="nutrition-tracker" element={ <NutritionTrackerRoute/> }/>
+              <Route path="fitness" element={ <FitnessRoute/> }/>
               <Route path="calories-burned" index element={ <CaloriesBurnedRoute/> }/>
               <Route path="auth" index element={ <AuthenticationRoute/> }/>
             </Fragment>

src/components/shared/mui/drawer/drawer.component.jsx

@@ -26,6 +26,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard'
 import CameraAltIcon from '@mui/icons-material/CameraAlt';
 import RestaurantIcon from '@mui/icons-material/Restaurant';
 import FitnessCenterIcon from '@mui/icons-material/FitnessCenter';
+import DirectionsRunIcon from '@mui/icons-material/DirectionsRun';
 import FoodBankIcon from '@mui/icons-material/FoodBank';
 import LoginIcon from '@mui/icons-material/Login';
 import LogoutIcon from '@mui/icons-material/Logout';
@@ -210,7 +211,8 @@ export default function MiniDrawer({ navLinksHeaders, children }) {
                     { header === NAV_LINKS.headers.dashboard ? <DashboardIcon/> : null }
                     { header === NAV_LINKS.headers.nutrientPredictor ? <CameraAltIcon/> : null }
                     { header === NAV_LINKS.headers.nutritionTracker ? <RestaurantIcon/> : null }
-                    { header === NAV_LINKS.headers.caloriesBurned ? <FitnessCenterIcon/> : null }
+                    { header === NAV_LINKS.headers.fitness ? <FitnessCenterIcon/> : null }
+                    { header === NAV_LINKS.headers.caloriesBurned ? <DirectionsRunIcon/> : null }
                     { header === NAV_LINKS.headers.recipes ? <FoodBankIcon/> : null }
                   </ListItemIcon>
 

src/components/signed-out/fitness/add-exercise-form/add-exercise-form.component.jsx

@@ -0,0 +1,7 @@
+import "./add-exercise-form.styles.scss"
+
+const AddExerciseForm = () => {
+
+}
+
+export default AddExerciseForm

src/components/signed-out/fitness/schedule/schedule-calendar/schedule-calendar.component.jsx

@@ -0,0 +1,88 @@
+import "./schedule-calendar.styles.scss"
+import 'rsuite/Calendar/styles/index.css';
+import { Fragment, useState } from "react";
+import { Calendar, Whisper, Popover, Badge } from 'rsuite';
+import { Typography } from "@mui/material";
+
+function getTodoList(date) {
+  const day = date.getDate();
+
+  switch (day) {
+    case 10:
+      return [
+        { time: '10:30 am', title: 'Meeting' },
+        { time: '12:00 pm', title: 'Lunch' }
+      ];
+    case 15:
+      return [
+        { time: '09:30 pm', title: 'Products Introduction Meeting' },
+        { time: '12:30 pm', title: 'Client entertaining' },
+        { time: '02:00 pm', title: 'Product design discussion' },
+        { time: '05:00 pm', title: 'Product test and acceptance' },
+        { time: '06:30 pm', title: 'Reporting' },
+        { time: '10:00 pm', title: 'Going home to walk the dog' }
+      ];
+    default:
+      return [];
+  }
+}
+
+const ScheduleCalendar = () => {
+  function renderCell(date) {
+    const list = getTodoList(date);
+    const displayList = list.filter((item, index) => index < 1);
+
+    if (list.length) {
+      const moreCount = list.length - displayList.length;
+      // const moreItem = (
+      //   <li>
+      //     <Whisper
+      //       placement="top"
+      //       trigger="click"
+      //       speaker={
+      //         <Popover>
+      //           {list.map((item, index) => (
+      //             <p key={index}>
+      //               <b>{item.time}</b> - {item.title}
+      //             </p>
+      //           ))}
+      //         </Popover>
+      //       }
+      //     >
+      //       <h10>{moreCount} more</h10>
+      //     </Whisper>
+      //   </li>
+      // );
+
+      return (
+        <Fragment>
+          <ul className="calendar-todo-list">
+            {displayList.map((item, index) => (
+              <li key={index}>
+                <Badge /> <b>{item.time}</b> - {item.title}
+              </li>
+            ))}
+            {/* {moreCount ? moreItem : null} */}
+          </ul>
+          {moreCount} more
+        </Fragment>
+      );
+    }
+
+    return null;
+  }
+
+  const onSelectDate = (date) => {
+    alert("Date selected: " + date)
+  }
+
+  return (
+    <div className="fitness-schedule-calendar-container">
+      <Typography sx={{ display: "flex", marginLeft: "1%" }} 
+        variant="h6">{`Exercises calendar`}</Typography>
+      <Calendar bordered renderCell={ renderCell } onSelect={ onSelectDate }/>
+    </div>
+  )
+}
+
+export default ScheduleCalendar

src/components/signed-out/fitness/schedule/schedule-calendar/schedule-calendar.styles.scss

@@ -0,0 +1,27 @@
+.calendar-todo-list {
+  text-align: left;
+  padding: 0;
+  list-style: none;
+}
+
+.calendar-todo-list li {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.calendar-todo-item-badge {
+  vertical-align: top;
+  margin-top: 8px;
+  width: 6px;
+  height: 6px;
+}  
+
+.fitness-schedule-calendar-container {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  background-color: lightblue;
+  margin: 2%;
+  padding: 1%;
+}

src/components/signed-out/fitness/schedule/schedule-day-info/schedule-day-info.component.jsx

@@ -0,0 +1,70 @@
+import "./schedule-day-info.styles.scss"
+import { useState, useContext, useRef, Fragment } from "react"
+import { Typography } from "@mui/material";
+
+import { AgGridReact } from 'ag-grid-react'; // React Data Grid Component
+import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
+import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
+
+import Button from "../../../../shared/button/button.component";
+import { ButtonsContainer } from "../../../../shared/button/button.styles";
+import SimplePaper from "../../../../shared/mui/paper/paper.component";
+import { COLOR_CODES } from "../../../../../utils/constants/shared.constants";
+
+const paperStyles = {
+  backgroundColor: COLOR_CODES.paper.formPaper,
+  height: 600
+}
+
+const ScheduleDayInfo = () => {
+  const gridRef = useRef()
+
+  // column definitions
+  const [columnDefs, setColumnDefs] = useState([
+    { field: "Date" },
+    { field: "Exercise" },
+    { field: "Sets" },
+    { field: "Reps" },
+    { field: "Type" },
+    { field: "Muscle" },
+    { field: "Equipment" },
+    { field: "Difficulty" },
+    { field: "Instructions" },
+  ])
+
+  const onRemoveSelected = (event) => {
+    event.preventDefault()
+    const selectedData = gridRef.current.api.getSelectedRows();
+    // TODO: better manage selectedData[0] without the 0 in index
+    if (!selectedData[0] || selectedData[0] === null || !selectedData[0].Tag || selectedData[0] === undefined) {
+      return
+    }
+
+    console.log(selectedData[0])
+    // removeInsurance(selectedData[0].For)
+  }
+
+  return (
+    <Fragment>
+      <Typography sx={{ display: "flex", marginLeft: "2%" }} 
+        variant="h6">{`Exercises planned`}</Typography>
+
+      <SimplePaper styles={ paperStyles }>
+        <div className="ag-theme-quartz-dark fitness-schedule-day-info" // applying the grid theme
+          style={{ height: 500, width: '100%' }} // the grid will fill the size of the parent container
+          >
+          <AgGridReact 
+            // rowData={ rowData } 
+            columnDefs={ columnDefs } ref={ gridRef } rowSelection={ "multiple" }/>
+            <ButtonsContainer>
+              <div className="remove-exercise-selected-button">
+                <Button onClick={ (e) => onRemoveSelected(e) }>Remove Selected</Button>
+              </div>
+            </ButtonsContainer>
+        </div>
+      </SimplePaper>
+    </Fragment>
+  )
+}
+
+export default ScheduleDayInfo

src/components/signed-out/fitness/schedule/schedule-day-info/schedule-day-info.styles.scss

@@ -0,0 +1,10 @@
+.fitness-schedule-day-info {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  padding: 1% 1% 0% 1%;
+}
+
+.remove-exercise-selected-button {
+  margin: 1%;
+}

src/components/signed-out/fitness/search-exercise-form/search-exercise-form.component.jsx

@@ -0,0 +1,7 @@
+import "./search-exercise-form.styles.scss"
+
+const SearchExerciseForm = () => {
+
+}
+
+export default SearchExerciseForm

src/components/signed-out/fitness/search-exercise-result/search-exercise-result.component.jsx

@@ -0,0 +1,7 @@
+import "./search-exercise-result.styles.scss"
+
+const SearchExerciseResult = () => {
+
+}
+
+export default SearchExerciseResult

src/components/signed-out/fitness/search-exercise-results/search-exercise-results.component.jsx

@@ -0,0 +1,7 @@
+import "./search-exercise-results.styles.scss"
+
+const SearchExerciseResults = () => {
+
+}
+
+export default SearchExerciseResults

src/pages/shared/home/home.component.jsx

@@ -44,6 +44,12 @@ const Home = () => {
       imageUrl: "https://static.vecteezy.com/system/resources/thumbnails/013/416/799/small_2x/woman-choose-between-healthy-and-unhealthy-food-free-vector.jpg",
       path: currentUser ? NAV_LINKS.paths.signedIn.nutritionTracker : NAV_LINKS.paths.signedOut.nutritionTracker
     },
+    fitness: {
+      header: "Fitness",
+      description: "Search thousands of exercises and their instructions, then add them to a schedule",
+      imageUrl: "https://media.istockphoto.com/id/1222178625/vector/stay-home-concept-people-doing-exercise-in-cozy-modern-interior-vector-illustration-in-flat.jpg?s=612x612&w=0&k=20&c=urkPKOi8j2wcHxaoDBummTwezO38qA3BSvqHqc6Mzb8=",
+      path: currentUser ? NAV_LINKS.paths.signedIn.fitness : NAV_LINKS.paths.signedOut.fitness
+    },
     caloriesBurned: {
       header: "Calories Burned",
       description: "Determine the calories burned through your exercises and activities, and add them to the tracker",
@@ -56,6 +62,18 @@ const Home = () => {
       imageUrl: "https://png.pngtree.com/png-vector/20220712/ourmid/pngtree-flat-style-vector-illustration-of-a-creative-cooking-cookbook-featuring-healthy-recipes-vector-png-image_47565766.jpg",
       path: currentUser ? NAV_LINKS.paths.signedIn.recipes : NAV_LINKS.paths.signedOut.recipes
     },
+    notifications: {
+      header: "Notifications",
+      description: "Upon signing up and tracking nutrition and fitness, receive notifications of any planned activities on your calendar",
+      imageUrl: "https://media.istockphoto.com/id/1336859622/vector/calendar-with-to-do-checklist-business-task-planning.jpg?s=612x612&w=0&k=20&c=rgIc9ejSfwmsEauhssGSaW5ZM6XjyB6-sBQQLU5qUA4=",
+      path: currentUser ? NAV_LINKS.paths.signedIn.dashboard : NAV_LINKS.paths.signedOut.auth
+    },
+    summary: {
+      header: "All in one place",
+      description: "Manage day to day activities on nutrition, wellness and fitness all in one place",
+      imageUrl: "https://webstockreview.net/images/nutrition-clipart-physical-wellness-1.png",
+      path: currentUser ? NAV_LINKS.paths.signedIn.dashboard : NAV_LINKS.paths.signedOut.dashboard
+    },
   }
 
   return (
@@ -75,11 +93,22 @@ const Home = () => {
         <MediaCard styles={ styles } header={ homeCardContent.nutritionTracker.header } imageUrl={ homeCardContent.nutritionTracker.imageUrl } 
           imageTitle={ homeCardContent.nutritionTracker.header } path={ homeCardContent.nutritionTracker.path } content={ homeCardContent.nutritionTracker.description }></MediaCard>
 
+        <MediaCard styles={ styles } header={ homeCardContent.fitness.header } imageUrl={ homeCardContent.fitness.imageUrl } 
+          imageTitle={ homeCardContent.fitness.header } path={ homeCardContent.fitness.path } content={ homeCardContent.fitness.description }></MediaCard>
+
         <MediaCard styles={ styles } header={ homeCardContent.caloriesBurned.header } imageUrl={ homeCardContent.caloriesBurned.imageUrl } 
           imageTitle={ homeCardContent.caloriesBurned.header } path={ homeCardContent.caloriesBurned.path } content={ homeCardContent.caloriesBurned.description }></MediaCard>
-
+      </HomeContainer>
+
+      <HomeContainer>
         <MediaCard styles={ styles } header={ homeCardContent.recipes.header } imageUrl={ homeCardContent.recipes.imageUrl } 
           imageTitle={ homeCardContent.recipes.header } path={ homeCardContent.recipes.path } content={ homeCardContent.recipes.description }></MediaCard>
+
+        <MediaCard styles={ styles } header={ homeCardContent.notifications.header } imageUrl={ homeCardContent.notifications.imageUrl } 
+          imageTitle={ homeCardContent.notifications.header } path={ homeCardContent.notifications.path } content={ homeCardContent.notifications.description }></MediaCard>
+
+        <MediaCard styles={ styles } header={ homeCardContent.summary.header } imageUrl={ homeCardContent.summary.imageUrl } 
+          imageTitle={ homeCardContent.summary.header } path={ homeCardContent.summary.path } content={ homeCardContent.summary.description }></MediaCard>
       </HomeContainer>
     </Fragment>
   );

src/pages/signed-out/fitness/fitness.component.jsx

@@ -0,0 +1,32 @@
+import { Divider } from "@mui/material"
+import AddExerciseForm from "../../../components/signed-out/fitness/add-exercise-form/add-exercise-form.component"
+import ScheduleCalendar from "../../../components/signed-out/fitness/schedule/schedule-calendar/schedule-calendar.component"
+import ScheduleDayInfo from "../../../components/signed-out/fitness/schedule/schedule-day-info/schedule-day-info.component"
+import SearchExerciseForm from "../../../components/signed-out/fitness/search-exercise-form/search-exercise-form.component"
+import SearchExerciseResults from "../../../components/signed-out/fitness/search-exercise-results/search-exercise-results.component"
+import "./fitness.styles.scss"
+
+const Fitness = () => {
+  return (
+    <div className="fitness-container">
+      <div className="fitness-schedule-container">
+        <ScheduleCalendar></ScheduleCalendar>
+
+        <br/>
+        <Divider/>
+        <br/>
+
+        <ScheduleDayInfo></ScheduleDayInfo>
+      </div>
+
+      <SearchExerciseForm></SearchExerciseForm>
+
+      <div className="fitness-search-add-container">
+        <SearchExerciseResults></SearchExerciseResults>
+        <AddExerciseForm></AddExerciseForm>
+      </div>
+    </div>
+  )
+}
+
+export default Fitness

src/pages/signed-out/fitness/fitness.styles.scss

@@ -0,0 +1,12 @@
+.fitness-container {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  margin: 2% 10% 2% 10%;
+}
+
+.fitness-schedule-container {
+  display: block;
+  justify-content: center;
+  align-items: center;
+}