Daylight-LLC · Asav-2122 · Sep 15, 2024
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git 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
@@ -1,17 +1,15 @@
-import React from 'react'
-
 function MeetingCard() {
   return (
-    <div className='border border-gray-300 w-full h-full py-4 rounded-md flex items-center justify-center'>
-          <div className="flex flex-col">
-              <p className="text-gray-600 text-lg text-center">Scheduled meetings</p>
-              <p className="text-xl font-semibold text-center">11:00 - 12:00</p>
-              <button className="bg-blue-500 text-white px-3 py-1 rounded-md mt-2">
-                  Open Zoom Link
-              </button>
-          </div>
+    <div className="border border-gray-300 w-full h-full py-6 rounded-md flex items-center justify-center">
+      <div className="text-center">
+        <p className="text-gray-600 text-lg">Scheduled meetings</p>
+        <p className="text-xl font-semibold">11:00 - 12:00</p>
+        <button className="bg-blue-500 text-white px-4 py-2 rounded-md mt-3 md:h-10 md:w-24">
+          Open Zoom Link
+        </button>
+      </div>
     </div>
-  )
+  );
 }
 
-export default MeetingCard
+export default MeetingCard;
diff --git 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<ProjectSummaryProps> = ({ 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<ProjectSummaryProps> = ({ 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 (
-    <div className='border border-gray-300 rounded-md'>
-      <div className='w-full flex justify-between items-center p-3'>
-        <h2 className="lg:text-xl md:text-lg font-semibold">Project Summary</h2>
-        <div className='flex gap-4'>
+    <div className="border border-gray-300 rounded-md">
+      <div className="flex justify-between items-center p-4">
+        <h2 className="text-lg md:text-xl font-semibold">Project Summary</h2>
+        <div className="flex gap-4">
           {dropdowns.map((dropdown, index) => (
-            <div key={index} className='border border-gray-300 rounded-md'>
-              <Dropdown label={dropdown.label} options={dropdown.options} />
-            </div>
+            <Dropdown
+              key={index}
+              label={dropdown.label}
+              options={dropdown.options}
+            />
           ))}
         </div>
       </div>
-      <div className='p-4' style={{ height: '17rem', overflow: 'auto' }}>
-        <TableContainer component={Paper} style={{ maxHeight: '100%', overflowX: 'hidden' }}>
-          <Table stickyHeader sx={{ minWidth: 650 }} aria-label="project table">
+      <div className="p-4" style={{ height: "17rem", overflowY: "auto" }}>
+        <TableContainer component={Paper}>
+          <Table stickyHeader aria-label="project table">
             <TableHead>
               <TableRow>
-                <TableCell style={{ fontWeight: 'bold' }}>Project Name</TableCell>
-                <TableCell align="left" style={{ fontWeight: 'bold' }}>Team Lead</TableCell>
-                <TableCell align="left" style={{ fontWeight: 'bold' }}>Created At</TableCell>
-                <TableCell align="left" style={{ fontWeight: 'bold' }}>Status</TableCell>
+                <TableCell style={{ fontWeight: "bold" }}>
+                  Project Name
+                </TableCell>
+                <TableCell style={{ fontWeight: "bold" }}>Team Lead</TableCell>
+                <TableCell style={{ fontWeight: "bold" }}>Created At</TableCell>
+                <TableCell style={{ fontWeight: "bold" }}>Status</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
               {rows.map((row, index) => (
-                <TableRow
-                  key={index}
-                  sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-                >
-                  <TableCell component="th" scope="row" style={{ fontWeight: 'bold' }}>
-                    {row.projectName}
-                  </TableCell>
-                  <TableCell align="left">{row.teamLead}</TableCell>
-                  <TableCell align="left">{row.createdAt}</TableCell>
-                  <TableCell align="left">{row.status}</TableCell>
+                <TableRow key={index}>
+                  <TableCell>{row.projectName}</TableCell>
+                  <TableCell>{row.teamLead}</TableCell>
+                  <TableCell>{row.createdAt}</TableCell>
+                  <TableCell>{row.status}</TableCell>
                 </TableRow>
               ))}
             </TableBody>

diff --git 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: <DashboardIcon />, label: 'Dashboard' },
-  { to: '/app/teams', icon: <PeopleIcon />, label: 'Teams' },
-  { to: '/app/projects', icon: <FolderIcon />, label: 'Projects' },
-  { to: '/app/issues', icon: <ReportProblemIcon />, label: 'Issues' },
+  { to: "/app/dashboard", icon: <DashboardIcon />, label: "Dashboard" },
+  { to: "/app/teams", icon: <PeopleIcon />, label: "Teams" },
+  { to: "/app/projects", icon: <FolderIcon />, label: "Projects" },
+  { to: "/app/issues", icon: <ReportProblemIcon />, label: "Issues" },
 ];
 
 const Sidebar: React.FC<{ isOnlyIcon: boolean }> = ({ isOnlyIcon }) => {
   return (
-    <aside className={` bg-blue-500 text-white h-screen p-1 ${isOnlyIcon ? 'w-16' : 'w-56'}`}>
-      <div className='py-3'>
+    <aside
+      className={` bg-blue-500 text-white h-screen p-1 ${
+        isOnlyIcon ? "w-16" : "w-56"
+      }`}
+    >
+      <div className="py-3">
         <div className="text-xl font-bold pb-3 flex justify-center">
-          { !isOnlyIcon ? 
-              <Link to="/app/dashboard" className="hover:text-blue-400">ProjectPulse</Link> : 
-              <Link to="/app/dashboard" className="hover:text-blue-400" >P</Link>
-          }
+          {!isOnlyIcon ? (
+            <Link to="/app/dashboard" className="hover:text-blue-400">
+              ProjectPulse
+            </Link>
+          ) : (
+            <Link to="/app/dashboard" className="hover:text-blue-400">
+              P
+            </Link>
+          )}
         </div>
         <hr />
       </div>
-      
-      <nav className='pt-8'>
+
+      <nav className="pt-8">
         <ul className="space-y-3">
           {menuItems.map((item, index) => (
             <li key={index}>
-              <Link 
-                to={item.to} 
-                className={`flex items-center p-3 rounded-md hover:bg-blue-400 transition-colors ${isOnlyIcon ? 'justify-center' : ''}`}
+              <Link
+                to={item.to}
+                className={`flex items-center p-3 rounded-md hover:bg-blue-400 transition-colors ${
+                  isOnlyIcon ? "justify-center" : ""
+                }`}
               >
                 {item.icon}
                 {!isOnlyIcon && <span className="ml-4">{item.label}</span>}

diff --git a/frontend/src/components/StatsCard.tsx b/frontend/src/components/StatsCard.tsx
@@ -1,39 +1,41 @@
-import React from 'react'; 
-import WorkOutlineIcon from '@mui/icons-material/WorkOutline';
-import AssignmentTurnedInOutlinedIcon from '@mui/icons-material/AssignmentTurnedInOutlined';
-import DriveFolderUploadOutlinedIcon from '@mui/icons-material/DriveFolderUploadOutlined';
+import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
+import AssignmentTurnedInOutlinedIcon from "@mui/icons-material/AssignmentTurnedInOutlined";
+import DriveFolderUploadOutlinedIcon from "@mui/icons-material/DriveFolderUploadOutlined";
 
 const statsData = [
   {
     id: 1,
-    title: 'Projects',
-    value: '100/110',
-    icon: <WorkOutlineIcon fontSize='large' />,
+    title: "Projects",
+    value: "100/110",
+    icon: <WorkOutlineIcon fontSize="large" />,
   },
   {
     id: 2,
-    title: 'Tasks',
-    value: '130/150',
-    icon: <AssignmentTurnedInOutlinedIcon fontSize='large' />,
+    title: "Tasks",
+    value: "130/150",
+    icon: <AssignmentTurnedInOutlinedIcon fontSize="large" />,
   },
   {
     id: 3,
-    title: 'Resources',
-    value: '34/56',
-    icon: <DriveFolderUploadOutlinedIcon fontSize='large' />,
+    title: "Resources",
+    value: "34/56",
+    icon: <DriveFolderUploadOutlinedIcon fontSize="large" />,
   },
 ];
 
 function StatsCard() {
   return (
-    <div className="grid lg:grid-cols-3 md:grid-cols-1  gap-4 py-4">
+    <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
       {statsData.map((stat) => (
-        <div key={stat.id} className="flex p-5 border border-gray-300 rounded-md gap-3">
-          <div className={`w-16 h-16 bg-gray-300 rounded-full flex items-center justify-center`}>
+        <div
+          key={stat.id}
+          className="flex p-5 border border-gray-300 rounded-md gap-3"
+        >
+          <div className="w-16 h-16 bg-gray-300 rounded-full flex items-center justify-center">
             {stat.icon}
           </div>
-          <div className='flex flex-col'>
-            <h3 className="text-2xl font-semibold">{stat.value}</h3>
+          <div className="flex flex-col">
+            <h3 className="text-xl lg:text-2xl font-semibold">{stat.value}</h3>
             <p className="text-gray-500 font-semibold">{stat.title}</p>
           </div>
         </div>