diff --git a/package-lock.json b/package-lock.json index f859dc9b..9a6077d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,8 +10,8 @@ "license": "ISC", "dependencies": { "@babel/preset-react": "^7.22.5", - "@emotion/react": "^11.11.1", - "@emotion/styled": "^11.11.0", + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", "@fullcalendar/core": "^6.1.15", "@fullcalendar/daygrid": "^6.1.15", "@fullcalendar/interaction": "^6.1.15", @@ -22,8 +22,10 @@ "@heroicons/react": "^1.0.6", "@iconify/react": "^3.2.2", "@mui/icons-material": "^5.14.0", - "@mui/material": "^5.14.0", + "@mui/material": "^5.16.7", "@mui/styled-engine": "^5.13.2", + "@mui/styled-engine-sc": "^6.1.3", + "@mui/x-charts": "^7.19.0", "@mui/x-data-grid": "^5.17.26", "@react-pdf-viewer/core": "^3.12.0", "@tanstack/react-table": "^8.20.5", @@ -88,6 +90,7 @@ "recharts": "^2.13.3", "sheetjs-style": "^0.15.8", "sinon": "^14.0.2", + "styled-components": "^6.1.13", "subscriptions-transport-ws": "^0.11.0", "tailwindcss": "^3.3.3", "url-polyfill": "^1.1.12", @@ -4286,6 +4289,27 @@ } } }, + "node_modules/@mui/styled-engine-sc": { + "version": "6.1.3", + "resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-6.1.3.tgz", + "integrity": "sha512-Y+BZHQxygyKklawo9eMilthFALQpndcfDdEz0LpoZmkvVtWBD3kAPCyYeSAlqFRFQ++MdiQWlWY8O1R9ORuxJg==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "csstype": "^3.1.3", + "hoist-non-react-statics": "^3.3.2", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "styled-components": "^6.0.0" + } + }, "node_modules/@mui/system": { "version": "5.16.7", "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.7.tgz", @@ -4367,6 +4391,62 @@ } } }, + "node_modules/@mui/x-charts": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@mui/x-charts/-/x-charts-7.19.0.tgz", + "integrity": "sha512-gOiSmb+bLIoGOGs+5uzEb7sau7KmjAKJI4+hORCjHUAOefmtHdiw39gZVne1Gcah+h6BIrWMkNJHk5djcCaGsg==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/utils": "^5.16.6", + "@mui/x-charts-vendor": "7.19.0", + "@mui/x-internals": "7.18.0", + "@react-spring/rafz": "^9.7.4", + "@react-spring/web": "^9.7.4", + "clsx": "^2.1.1", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.15.14 || ^6.0.0", + "@mui/system": "^5.15.14 || ^6.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/x-charts-vendor": { + "version": "7.19.0", + "resolved": "https://registry.npmjs.org/@mui/x-charts-vendor/-/x-charts-vendor-7.19.0.tgz", + "integrity": "sha512-idHOi6U8mmX1ezKclv2p4QBrWxQIUSS+bd7rp2PGnf7XAPtUY/X9VTZvU1mDRawtyKjyzQD+vmSbYx9piytqAg==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@types/d3-color": "^3.1.3", + "@types/d3-delaunay": "^6.0.4", + "@types/d3-interpolate": "^3.0.4", + "@types/d3-scale": "^4.0.8", + "@types/d3-shape": "^3.1.6", + "@types/d3-time": "^3.0.3", + "d3-color": "^3.1.0", + "d3-delaunay": "^6.0.4", + "d3-interpolate": "^3.0.1", + "d3-scale": "^4.0.2", + "d3-shape": "^3.2.0", + "d3-time": "^3.1.0", + "delaunator": "^5.0.1", + "robust-predicates": "^3.0.2" + } + }, "node_modules/@mui/x-data-grid": { "version": "5.17.26", "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-5.17.26.tgz", @@ -4400,6 +4480,25 @@ "node": ">=6" } }, + "node_modules/@mui/x-internals": { + "version": "7.18.0", + "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.18.0.tgz", + "integrity": "sha512-lzCHOWIR0cAIY1bGrWSprYerahbnH5C31ql/2OWCEjcngL2NAV1M6oKI2Vp4HheqzJ822c60UyWyapvyjSzY/A==", + "dependencies": { + "@babel/runtime": "^7.25.6", + "@mui/utils": "^5.16.6" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "react": "^17.0.0 || ^18.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4460,6 +4559,72 @@ "react-dom": ">=16.8.0" } }, + "node_modules/@react-spring/animated": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz", + "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==", + "dependencies": { + "@react-spring/shared": "~9.7.5", + "@react-spring/types": "~9.7.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/core": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz", + "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==", + "dependencies": { + "@react-spring/animated": "~9.7.5", + "@react-spring/shared": "~9.7.5", + "@react-spring/types": "~9.7.5" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-spring/donate" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/rafz": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz", + "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==" + }, + "node_modules/@react-spring/shared": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz", + "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==", + "dependencies": { + "@react-spring/rafz": "~9.7.5", + "@react-spring/types": "~9.7.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/types": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz", + "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==" + }, + "node_modules/@react-spring/web": { + "version": "9.7.5", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz", + "integrity": "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==", + "dependencies": { + "@react-spring/animated": "~9.7.5", + "@react-spring/core": "~9.7.5", + "@react-spring/shared": "~9.7.5", + "@react-spring/types": "~9.7.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@remix-run/router": { "version": "1.19.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", @@ -5078,6 +5243,11 @@ "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==" }, + "node_modules/@types/d3-delaunay": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz", + "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==" + }, "node_modules/@types/d3-ease": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz", @@ -7960,6 +8130,17 @@ "node": ">=12" } }, + "node_modules/d3-delaunay": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz", + "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==", + "dependencies": { + "delaunator": "5" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/d3-ease": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", @@ -8291,6 +8472,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delaunator": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz", + "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==", + "dependencies": { + "robust-predicates": "^3.0.2" + } + }, "node_modules/delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", @@ -20617,6 +20806,11 @@ "inherits": "^2.0.1" } }, + "node_modules/robust-predicates": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz", + "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==" + }, "node_modules/rollup": { "version": "4.24.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.0.tgz", diff --git a/package.json b/package.json index ca823aa2..8b2c1c97 100644 --- a/package.json +++ b/package.json @@ -32,8 +32,8 @@ "homepage": "https://github.com/atlp-rwanda/atlp-pulse-fn#readme", "dependencies": { "@babel/preset-react": "^7.22.5", - "@emotion/react": "^11.11.1", - "@emotion/styled": "^11.11.0", + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", "@fullcalendar/core": "^6.1.15", "@fullcalendar/daygrid": "^6.1.15", "@fullcalendar/interaction": "^6.1.15", @@ -44,8 +44,10 @@ "@heroicons/react": "^1.0.6", "@iconify/react": "^3.2.2", "@mui/icons-material": "^5.14.0", - "@mui/material": "^5.14.0", + "@mui/material": "^5.16.7", "@mui/styled-engine": "^5.13.2", + "@mui/styled-engine-sc": "^6.1.3", + "@mui/x-charts": "^7.19.0", "@mui/x-data-grid": "^5.17.26", "@react-pdf-viewer/core": "^3.12.0", "@tanstack/react-table": "^8.20.5", @@ -110,6 +112,7 @@ "recharts": "^2.13.3", "sheetjs-style": "^0.15.8", "sinon": "^14.0.2", + "styled-components": "^6.1.13", "subscriptions-transport-ws": "^0.11.0", "tailwindcss": "^3.3.3", "url-polyfill": "^1.1.12", diff --git a/src/components/DashHeader.tsx b/src/components/DashHeader.tsx index e08ed729..ff8fdebb 100644 --- a/src/components/DashHeader.tsx +++ b/src/components/DashHeader.tsx @@ -172,7 +172,7 @@ function DashHeader() {
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx index 1b222d9b..e19c900c 100644 --- a/src/components/DataTable.tsx +++ b/src/components/DataTable.tsx @@ -68,23 +68,24 @@ function DataTable({ data, columns, title, loading, className }: TableData) { return (

{t(title)}

- + /> */}
-
+
{headerGroup.headers.map((column) => ( {row.cells.map((cell) => (
@@ -113,15 +116,15 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
diff --git a/src/components/TraineeDashboardChart.tsx b/src/components/TraineeDashboardChart.tsx index bc79b43f..b23b80f3 100644 --- a/src/components/TraineeDashboardChart.tsx +++ b/src/components/TraineeDashboardChart.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/function-component-definition */ /* eslint-disable import/no-extraneous-dependencies */ -import React from 'react'; +import React, { useContext } from 'react'; import { LineChart, Line, @@ -10,7 +10,9 @@ import { YAxis, Tooltip, Legend, + ResponsiveContainer, } from 'recharts'; +import { ThemeContext } from '../hook/ThemeProvider'; interface TableRow { sprint: number; @@ -26,6 +28,7 @@ interface TraineeChartProps { } const TraineeChart: React.FC = ({ barChartData }) => { + const { colorTheme } = useContext(ThemeContext); const chartData = barChartData .map((entry) => ({ name: entry.sprint, @@ -36,40 +39,73 @@ const TraineeChart: React.FC = ({ barChartData }) => { .sort((a, b) => a.name - b.name); return ( -
- - + + + `${value}`} + /> + + +
+ - - - -
+ ); }; diff --git a/src/components/TraineeHeader.tsx b/src/components/TraineeHeader.tsx index a91d48bc..f1a2f513 100644 --- a/src/components/TraineeHeader.tsx +++ b/src/components/TraineeHeader.tsx @@ -140,7 +140,7 @@ function DashHeader() {
- + {colorTheme === 'dark' ? (
- + {colorTheme === 'dark' ? ( close(e)} > -
+
{remark ? (

From Coordinator:

-
{remark}
+
{remark}
) : (

@@ -59,7 +59,7 @@ function Comment({ remark }: CommentProps) {