From 3bd8db96bb100a44c817371d4941d61ad2cd8b1d Mon Sep 17 00:00:00 2001 From: Asav Pandya Date: Sun, 15 Sep 2024 13:42:55 +0530 Subject: [PATCH] fix: make dashboard responsive across all devices --- frontend/package-lock.json | 41 +++++++- frontend/package.json | 3 +- frontend/src/components/MeetingCard.tsx | 22 ++--- frontend/src/components/ProjectSummary.tsx | 107 +++++++++++---------- frontend/src/components/Sidebar.tsx | 53 ++++++---- frontend/src/components/StatsCard.tsx | 38 ++++---- frontend/src/pages/Dashboard.tsx | 51 +++++----- 7 files changed, 185 insertions(+), 130 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f5f90df..7ba51c0 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,7 +14,8 @@ "@mui/material": "^6.0.2", "axios": "^1.7.7", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^6.26.2" }, "devDependencies": { "@eslint/js": "^9.9.0", @@ -1462,6 +1463,14 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@remix-run/router": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", + "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.21.2", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.2.tgz", @@ -4176,6 +4185,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", + "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "dependencies": { + "@remix-run/router": "1.19.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", + "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "dependencies": { + "@remix-run/router": "1.19.2", + "react-router": "6.26.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/frontend/package.json b/frontend/package.json index 6fcfeaf..2c1e135 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,7 +16,8 @@ "@mui/material": "^6.0.2", "axios": "^1.7.7", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^6.26.2" }, "devDependencies": { "@eslint/js": "^9.9.0", diff --git a/frontend/src/components/MeetingCard.tsx b/frontend/src/components/MeetingCard.tsx index bfa9cc1..b34ca1e 100644 --- a/frontend/src/components/MeetingCard.tsx +++ b/frontend/src/components/MeetingCard.tsx @@ -1,17 +1,15 @@ -import React from 'react' - function MeetingCard() { return ( -
-
-

Scheduled meetings

-

11:00 - 12:00

- -
+
+
+

Scheduled meetings

+

11:00 - 12:00

+ +
- ) + ); } -export default MeetingCard \ No newline at end of file +export default MeetingCard; diff --git a/frontend/src/components/ProjectSummary.tsx b/frontend/src/components/ProjectSummary.tsx index 879094d..af02d68 100644 --- a/frontend/src/components/ProjectSummary.tsx +++ b/frontend/src/components/ProjectSummary.tsx @@ -1,76 +1,79 @@ -import React, { useState, useEffect } from 'react'; -import Dropdown from './common/Dropdown'; -import { TableContainer, Table, TableBody, TableCell, TableHead, TableRow, Paper } from '@mui/material'; -import { Project } from '../interfaces/interfaces'; - -function createData( - projectName: string, - teamLead: string, - createdAt: string, - status: string -) { - return { projectName, teamLead, createdAt, status }; -} +import React from "react"; +import Dropdown from "./common/Dropdown"; +import { + TableContainer, + Table, + TableBody, + TableCell, + TableHead, + TableRow, + Paper, +} from "@mui/material"; +import { Project } from "../interfaces/interfaces"; interface ProjectSummaryProps { - projects: Project[]; - } - - const ProjectSummary: React.FC = ({ projects }) => { - - + projects: Project[]; +} - const rows = projects.map(project => { - const teamLead = project.teams[0]?.teamLeadName || 'Unknown'; - return createData(project.name, teamLead, project.createdAt, 'Open'); - }); +const ProjectSummary: React.FC = ({ projects }) => { + const rows = projects.map((project) => ({ + projectName: project.name, + teamLead: project.teams[0]?.teamLeadName || "Unknown", + createdAt: project.createdAt, + status: "Open", + })); const dropdowns = [ { - label: 'Project', - options: ['Internal', 'Client', 'Research', 'Maintenance', 'New Development'] + label: "Project", + options: [ + "Internal", + "Client", + "Research", + "Maintenance", + "New Development", + ], }, { - label: 'Status', - options: ['Open', 'Progress', 'Review', 'Closed'] - } + label: "Status", + options: ["Open", "Progress", "Review", "Closed"], + }, ]; return ( -
-
-

Project Summary

-
+
+
+

Project Summary

+
{dropdowns.map((dropdown, index) => ( -
- -
+ ))}
-
- - +
+ +
- Project Name - Team Lead - Created At - Status + + Project Name + + Team Lead + Created At + Status {rows.map((row, index) => ( - - - {row.projectName} - - {row.teamLead} - {row.createdAt} - {row.status} + + {row.projectName} + {row.teamLead} + {row.createdAt} + {row.status} ))} diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 6cebc5e..c59f89c 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -1,37 +1,48 @@ -import React from 'react'; -import { Link } from 'react-router-dom'; -import DashboardIcon from '@mui/icons-material/Dashboard'; -import PeopleIcon from '@mui/icons-material/People'; -import FolderIcon from '@mui/icons-material/Folder'; -import ReportProblemIcon from '@mui/icons-material/ReportProblem'; +import React from "react"; +import { Link } from "react-router-dom"; +import DashboardIcon from "@mui/icons-material/Dashboard"; +import PeopleIcon from "@mui/icons-material/People"; +import FolderIcon from "@mui/icons-material/Folder"; +import ReportProblemIcon from "@mui/icons-material/ReportProblem"; const menuItems = [ - { to: '/app/dashboard', icon: , label: 'Dashboard' }, - { to: '/app/teams', icon: , label: 'Teams' }, - { to: '/app/projects', icon: , label: 'Projects' }, - { to: '/app/issues', icon: , label: 'Issues' }, + { to: "/app/dashboard", icon: , label: "Dashboard" }, + { to: "/app/teams", icon: , label: "Teams" }, + { to: "/app/projects", icon: , label: "Projects" }, + { to: "/app/issues", icon: , label: "Issues" }, ]; const Sidebar: React.FC<{ isOnlyIcon: boolean }> = ({ isOnlyIcon }) => { return ( -