- Tasks Table (#52)

Daylight-LLC · Sep 23, 2024 · d80a38f · d80a38f
2 parents 816c675 + 92480cc
commit d80a38f
Show file tree

Hide file tree

Showing 9 changed files with 1,776 additions and 22 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "start": "react-scripts start --host 0.0.0.0"
   },
   "dependencies": {
     "@emotion/react": "^11.13.3",
@@ -19,6 +20,8 @@
     "@mui/styled-engine-sc": "^6.1.0",
     "@mui/system": "^6.1.0",
     "@mui/x-charts": "^7.17.0",
+    "@mui/x-data-grid": "^7.17.0",
+    "@mui/x-data-grid-generator": "^7.17.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",

diff --git a/frontend/src/components/DashboardProjectsTable/index.tsx b/frontend/src/components/DashboardProjectsTable/index.tsx
@@ -349,12 +349,14 @@ export default function DashboardProjectsTable() {
   return (
     <Sheet
       variant="outlined"
-      sx={{ width: "75%", boxShadow: "sm", borderRadius: "sm" }}
+      sx={{
+        width: { xs: "100%", md: "75%" },
+        boxShadow: "sm",
+        borderRadius: "sm",
+      }}
     >
       <EnhancedTableToolbar numSelected={selected.length} />
       <Table
-        stickyHeader
-        stickyFooter
         aria-labelledby="tableTitle"
         hoverRow
         sx={{

diff --git a/frontend/src/components/ProjectProgress/index.tsx b/frontend/src/components/ProjectProgress/index.tsx
@@ -1,4 +1,4 @@
-import { Sheet } from "@mui/joy";
+import { Sheet, Typography } from "@mui/joy";
 import { Gauge, gaugeClasses } from "@mui/x-charts/Gauge";
 
 const settings = {
@@ -12,7 +12,8 @@ export default function ProjectProgress() {
     <Sheet
       variant="outlined"
       sx={{
-        width: 250,
+        width: "15.6rem",
+        height: { xs: "6.25rem", md: "21rem" },
         borderRadius: "sm",
         display: "flex",
         flexDirection: "column",
@@ -21,6 +22,9 @@ export default function ProjectProgress() {
         boxShadow: "sm",
       }}
     >
+      <Typography level="title-lg" py={2}>
+        Progress
+      </Typography>
       <Gauge
         {...settings}
         cornerRadius="50%"

diff --git a/frontend/src/components/Sidebar/index.tsx b/frontend/src/components/Sidebar/index.tsx
@@ -19,7 +19,7 @@ import Stack from "@mui/joy/Stack";
 import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
 import HomeRoundedIcon from "@mui/icons-material/HomeRounded";
 import DashboardRoundedIcon from "@mui/icons-material/DashboardRounded";
-import ShoppingCartRoundedIcon from "@mui/icons-material/ShoppingCartRounded";
+import FolderIcon from "@mui/icons-material/Folder";
 import AssignmentRoundedIcon from "@mui/icons-material/AssignmentRounded";
 import QuestionAnswerRoundedIcon from "@mui/icons-material/QuestionAnswerRounded";
 import GroupRoundedIcon from "@mui/icons-material/GroupRounded";
@@ -125,7 +125,7 @@ export default function Sidebar() {
         <IconButton variant="soft" color="primary" size="sm">
           <BrightnessAutoRoundedIcon />
         </IconButton>
-        <Typography level="title-lg">Acme Co.</Typography>
+        <Typography level="title-lg">Daylight</Typography>
         <ColorSchemeToggle sx={{ ml: "auto" }} />
       </Box>
       <Input
@@ -164,7 +164,7 @@ export default function Sidebar() {
 
           <Link to="dashboard">
             <ListItem>
-              <ListItemButton>
+              <ListItemButton selected>
                 <DashboardRoundedIcon />
                 <ListItemContent>
                   <Typography level="title-sm">Dashboard</Typography>
@@ -174,10 +174,10 @@ export default function Sidebar() {
           </Link>
 
           <ListItem>
-            <ListItemButton selected>
-              <ShoppingCartRoundedIcon />
+            <ListItemButton>
+              <FolderIcon />
               <ListItemContent>
-                <Typography level="title-sm">Orders</Typography>
+                <Typography level="title-sm">Projects</Typography>
               </ListItemContent>
             </ListItemButton>
           </ListItem>
@@ -241,7 +241,7 @@ export default function Sidebar() {
                 <ListItemButton onClick={() => setOpen(!open)}>
                   <GroupRoundedIcon />
                   <ListItemContent>
-                    <Typography level="title-sm">Users</Typography>
+                    <Typography level="title-sm">Teams</Typography>
                   </ListItemContent>
                   <KeyboardArrowDownIcon
                     sx={[