Merge pull request #7 from cepdnaclk/amanda

3rd page added

dashboard/package.json

@@ -16,10 +16,14 @@
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "boxicons": "^2.1.4",
+    "chart.js": "^4.4.3",
     "echarts": "^5.5.0",
     "mui": "^0.0.1",
+    "nth-check": "^2.1.1",
     "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
+    "react-chartjs-2": "^5.2.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
@@ -28,6 +32,10 @@
     "sass": "^1.77.6",
     "web-vitals": "^2.1.4"
   },
+  "overrides": {
+    "nth-check": "^2.1.1",
+    "postcss": "^8.4.38"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
@@ -51,5 +59,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
+  "main": "index.js",
+  "devDependencies": {
+    "@babel/plugin-transform-private-property-in-object": "^7.24.7",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.3"
   }
 }

dashboard/src/App.js

@@ -2,9 +2,9 @@ import './App.css';
 
 import Status from './pages/Status';
 import Rate from './pages/Rate';
-import History from './pages/History';
 import Page404 from './pages/page404';
 import Loader from './components/Loader/Loader';
+import SummaryPage from './pages/Summary/SummaryPage';
 
 
 import { BrowserRouter , Routes ,Route } from 'react-router-dom';
@@ -34,7 +34,7 @@ function App() {
           <Route index element ={<Status/>}/>
           <Route path="/status" element={<Status/>} />
           <Route path="/rate" element={<Rate/>} />
-          <Route path="/history" element={<History/>} />
+          <Route path="/history" element={<SummaryPage/>} />
           <Route path="*" element={<Page404 />} />
 
         </Routes>

dashboard/src/chartdata.json

@@ -0,0 +1,45 @@
+[
+  {
+    "label": "MON",
+    "Succesive Shots": 475,
+    "Failed Shots": 77,
+    "Total Shots": 552
+  },
+  {
+    "label": "TUE",
+    "Succesive Shots": 460,
+    "Failed Shots": 92,
+    "Total Shots": 552
+  },
+  {
+    "label": "WED",
+    "Succesive Shots": 465,
+    "Failed Shots": 84,
+    "Total Shots": 549
+  },
+  {
+    "label": "THU",
+    "Succesive Shots": 415,
+    "Failed Shots": 100,
+    "Total Shots": 515
+  },
+  {
+    "label": "FRI",
+    "Succesive Shots": 480,
+    "Failed Shots": 72,
+    "Total Shots": 552
+  },
+  {
+    "label": "SAT",
+    "Succesive Shots": 510,
+    "Failed Shots": 62,
+    "Total Shots": 572
+  },
+  {
+    "label": "SUN",
+    "Succesive Shots": 460,
+    "Failed Shots": 78,
+    "Total Shots": 538
+  }
+
+]

dashboard/src/components/SummaryComponents/Boxes/Dropdownbox.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import './Dropdownbox.scss'
+const Dropdownbox = () => {
+  return (
+    <div className='dropdownbox'></div>
+  )
+}
+
+export default Dropdownbox

dashboard/src/components/SummaryComponents/Boxes/Dropdownbox.scss

@@ -0,0 +1,13 @@
+.dropdownbox{
+
+  position:absolute;
+  width: 99%;
+  height: 50px;
+  top:100px;
+  left: 0.5%;
+
+
+  background: #4F378B;
+  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
+
+}

dashboard/src/components/SummaryComponents/Charts/SummaryChart.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import './SummaryChart.scss'
+import { Line } from "react-chartjs-2";
+import {  defaults } from 'chart.js/auto';
+import chartdata from '../../../chartdata.json';
+
+defaults.responsive =true;
+defaults.maintainAspectRatio=false;
+
+const SummaryChart = () => {
+  return (
+    <div className='chart'>
+      <Line
+        data ={{
+          labels:chartdata.map((data)=>data.label),
+          datasets: [
+            {
+              label:"Succesive Shots",
+              data:chartdata.map((data)=>data['Succesive Shots']),
+              backgroundColor:'#36a2eb',
+              borderColor:'#36a2eb',
+            },
+            {
+              label:"Failed Shots",
+              data:chartdata.map((data)=>data['Failed Shots']),
+              backgroundColor:'#ff6384',
+              borderColor:'#ff6384',
+
+            },
+            {
+              label:"Total Shots",
+              data:chartdata.map((data)=>data['Total Shots']),
+              backgroundColor:'#cc65fe',
+              borderColor:'#cc65fe',
+            },
+          ],
+        }}
+      />
+
+    </div>
+  )
+}
+
+export default SummaryChart

dashboard/src/components/SummaryComponents/Charts/SummaryChart.scss

@@ -0,0 +1,3 @@
+.chart{
+  height:430px;
+}

dashboard/src/components/SummaryComponents/DropDown/DurationDropdown.css

@@ -0,0 +1,50 @@
+
+
+
+
+.dropdown{
+  top:-40px;
+  width:250px;
+  height: 40px;
+  user-select: none;
+  left: 84.5%;
+  position:relative;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+  font-size: 13px;
+}
+
+.dropdown .dropdown-btn{
+  padding: 7px 10px;
+  background-color: #fdfdfd;
+  box-shadow: 3px 3px 10px 6px rgba(0, 0, 0, 0.06);
+  font-weight:400;
+  color: #534e4e;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  border-radius: 6px;
+
+}
+.dropdown .dropdown-content{
+  position: absolute;
+  top: 110%;
+  padding: 10px;
+  background: #FFFFFF;
+  box-shadow: 3px 3px 10px 6px rgba(0, 0, 0, 0.06);
+  font-weight: 500;
+  color: #333;
+  width: 93%;
+  font-size: 13px;
+}
+
+.dropdown .dropdown-content .dropdown-item{
+  padding: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+
+}
+
+.dropdown .dropdown-content .dropdown-item:hover{
+  background-color: #f3e4f7;
+}