Merge pull request #14 from MFRamon/feature/TL-13

Adding Style Classes #13

prettierrc.json

@@ -2,7 +2,7 @@
   "trailingComma": "all",
   "tabWidth": 2,
   "singleQuote": false,
-  "printWidth": 80,
+  "printWidth": 132,
   "jsxSingleQuote": true,
   "bracketSpacing": true,
   "arrowParens": true

src/components/CompletedTasksTable/CompletedTasksTable.module.css → src/components/CompletedTasksList/CompletedTasksList.module.css

@@ -12,6 +12,6 @@
   overflow: hidden;
   background-color: rgb(237, 231, 246);
   padding: 20px;
-  width: 400px;
-  height: 200px;
+  width: 100%;
+  height: 100%;
 }

src/components/CompletedTasksList/CompletedTasksList.tsx

@@ -0,0 +1,165 @@
+import React, { Fragment, useEffect, useState } from "react";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import { GridRowsProp, GridColDef } from "@mui/x-data-grid";
+import Grid from "@mui/material/Grid";
+import { LineChart } from "@mui/x-charts/LineChart";
+import styles from "@/components/CompletedTasksList/CompletedTasksList.module.css";
+
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import Divider from "@mui/material/Divider";
+import ListItemText from "@mui/material/ListItemText";
+import Chip from "@mui/material/Chip";
+
+import {
+  randomCreatedDate,
+  randomTraderName,
+  randomId,
+  randomArrayItem,
+  randomDate,
+} from "@mui/x-data-grid-generator";
+
+const roles = ["PENDING", "IN-PROGRESS", "STOPPED", "FINISHED"];
+
+const randomRole = () => {
+  return randomArrayItem(roles);
+};
+
+interface ICompletedTasksTableProps {
+  completedTasks: GridRowsProp;
+}
+
+const mockData: GridRowsProp = [
+  {
+    id: 1,
+    description: randomTraderName(),
+    timeToFinish: 20,
+    // finishedAt: 30,
+    duration: 25,
+    status: randomRole(),
+    creationDate: new Date(),
+  },
+  {
+    id: 2,
+    description: randomTraderName(),
+    // timeToFinish: 20,
+    // finishedAt: 30,
+    duration: 36,
+    status: randomRole(),
+    creationDate: new Date(),
+  },
+];
+
+const CompletedTasksList = (props: ICompletedTasksTableProps) => {
+  const [domLoaded, setDomLoaded] = useState(false);
+
+  const { completedTasks = mockData } = props;
+
+  useEffect(() => {
+    setDomLoaded(true);
+  }, []);
+
+  return (
+    <Fragment>
+      <Paper
+        sx={{ minWidth: 275, minHeight: 500 }}
+        className={styles.cardContainer}
+        elevation={0}
+      >
+        <Grid
+          container
+          direction="column"
+          justifyContent="space-evenly"
+          alignItems="center"
+          gap={3}
+        >
+          {/* Header for container */}
+          <Grid item id={"finished-tasks-title"} alignSelf={"flex-start"}>
+            <Typography variant="h5" gutterBottom>
+              Finished Tasks
+            </Typography>
+          </Grid>
+
+          {/* Chart for Data */}
+          <Grid item>
+            <Paper
+              id={"paper-containe-chart"}
+              className={styles.chart}
+              elevation={0}
+            >
+              {/* Line Chart for Finished Tasks */}
+              <Grid item>
+                <LineChart
+                  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
+                  series={[
+                    {
+                      data: [2, 5.5, 2, 8.5, 1.5, 5],
+                      area: true,
+                    },
+                  ]}
+                  width={300}
+                  height={200}
+                />
+              </Grid>
+            </Paper>
+          </Grid>
+
+          {/* TODO: Check Hydration */}
+          {domLoaded && (
+            <Grid
+              item
+              sx={{
+                width: "100%",
+                minHeight: "150px",
+                maxHeight: "150px",
+                height: "150px",
+              }}
+            >
+              <List
+                sx={{
+                  overflow: "auto",
+                  maxHeight: 200,
+                }}
+              >
+                {completedTasks.map((task, id) => (
+                  <>
+                    <ListItem id={"1"} alignItems="flex-start">
+                      <Grid
+                        container
+                        flexDirection={"column"}
+                        justifyContent={"space-between"}
+                        sx={{ width: "80%" }}
+                      >
+                        <Grid item>
+                          <ListItemText primary={task.description} />
+                          <Chip
+                            sx={{ borderRadius: "8px" }}
+                            label={task.status}
+                          />
+                        </Grid>
+                      </Grid>
+
+                      {/* Le tomo x minutos */}
+                      <Grid item>
+                        <Grid container flexDirection={"row"}>
+                          <ListItemText
+                            primary={`${task.completedTime} minutes`}
+                            secondary={task.finishedDate.toString()}
+                          />
+                        </Grid>
+                      </Grid>
+                    </ListItem>
+                    <Divider />
+                  </>
+                ))}
+              </List>
+            </Grid>
+          )}
+        </Grid>
+      </Paper>
+    </Fragment>
+  );
+};
+
+export default CompletedTasksList;