Feature/time in dashboard (#546)

* teams api integration * teams api integration and some ui issues * fix tootltip issue * Update Standup API (#540) * some minor changes in standup update api * updated validations in serializers.py file * fixed logout issue and changes in standup page and refactoring. * attendance module on dashboard --------- Co-authored-by: AizaTariq97 <[email protected]>
prixite · Feb 20, 2023 · 674ec08 · 674ec08
1 parent bd5f471
commit 674ec08
Show file tree

Hide file tree

Showing 5 changed files with 343 additions and 11 deletions.
diff --git a/frontend/src/components/common/presentational/checkingTime/checkingTime.scss b/frontend/src/components/common/presentational/checkingTime/checkingTime.scss
@@ -41,4 +41,133 @@
       }
     }
   }
+  .dataGridTable-main {
+    width: 100%;
+    background-color: white;
+    margin-top: 25px;
+    overflow-x: auto;
+    overflow-y: auto;
+    .view-all-btn {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      .view-all {
+        color: black;
+        background: white;
+        width: 123;
+        height: 48px;
+        padding: 13px 20px;
+        font-size: 16px;
+        font-weight: 400;
+        border: 1px solid #e7e7e7;
+        text-transform: capitalize;
+        border-radius: 12px;
+        &:hover {
+          background: white;
+          color: grey;
+        }
+      }
+    }
+    .dataGrid {
+      .MuiDataGrid-columnHeaders {
+        background-color: rgba(207, 207, 207, 0.2);
+        border-radius: 12px;
+        font-family: "Lato";
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 18px;
+        letter-spacing: -0.011em;
+        border-bottom: none;
+        color: #6c6c6c;
+        &:focus {
+          outline: white;
+        }
+        .css-1pe4mpk-MuiButtonBase-root-MuiIconButton-root {
+          display: none;
+        }
+      }
+      font-family: "Lato";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 20px;
+      letter-spacing: -0.011em;
+      color: #000000;
+      border: white;
+
+      .renderCell-joiningDate {
+        margin-right: auto;
+        .css-78trlr-MuiButtonBase-root-MuiIconButton-root {
+          &:hover {
+            background-color: #cfcfcf;
+          }
+        }
+      }
+    }
+  }
+  .error-img {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 200px;
+
+    color: #000000;
+    .error-msg {
+      font-family: "Lato";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 20px;
+    }
+    img {
+      width: 100px;
+      height: 100px;
+    }
+  }
+  .top-bar-cls {
+    margin-top: 15px;
+    .title-cls {
+      font-size: 20px;
+      font-weight: 700;
+    }
+    .filter-section {
+      .filter-btn-cls {
+        .filter-btn {
+          text-transform: none;
+          height: 44px;
+          background: #ffffff;
+          border: 1px solid #e7e7e7;
+          box-shadow: 10px 10px 24px 1px rgba(221, 221, 221, 0.15);
+          border-radius: 12px;
+          color: black;
+          padding: 12.5px 16px 12.5px 19.33px;
+        }
+      }
+      .create-standup-btn {
+        margin-left: 15px;
+        .create-btn {
+          text-transform: none;
+          border-radius: 12px;
+          width: 169px;
+          height: 44px;
+          background: #ff2f2f;
+          border-radius: 12px;
+          color: white;
+        }
+      }
+      .add-standup-btn {
+        margin-left: 15px;
+        .add-btn {
+          text-transform: none;
+          border-radius: 12px;
+          width: 149px;
+          height: 44px;
+          background: #ff2f2f;
+          border-radius: 12px;
+          color: white;
+        }
+      }
+    }
+  }
 }
diff --git a/frontend/src/components/common/presentational/checkingTime/checkingTime.tsx b/frontend/src/components/common/presentational/checkingTime/checkingTime.tsx
@@ -1,13 +1,103 @@
-import { Box, Typography } from "@mui/material";
+import { useState, useEffect } from "react";
+import { Box, Typography, Button } from "@mui/material";
 import "@src/components/common/presentational/checkingTime/checkingTime.scss";
-import clockIcon from "@src/assets/svgs/clock.svg";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import moment from "moment";
+import { useNavigate } from "react-router-dom";
+import NotfoundIcon from "@src/assets/svgs/requestIcon.svg";
 import ThreeDotter from "@src/assets/svgs/ThreeDotter.svg";
+import RowSkeletonCard from "@src/components/shared/loaders/rowSkeletonCard/RowSkeletonCard";
+import { employeeConstants } from "@src/helpers/constants/constants";
+import { AttendanceTypes } from "@src/helpers/interfaces/employees-modal";
 import { LocalizationInterface } from "@src/helpers/interfaces/localizationinterfaces";
 import { localizedData } from "@src/helpers/utils/language";
+import { useGetAttendacneQuery } from "@src/store/reducers/employees-api";
+import "@src/components/common/smart/attendance/attendance.scss";
 
 const CheckingTime = () => {
   const constantData: LocalizationInterface = localizedData();
-  const { CheckingTime, ClockError } = constantData.Leaves;
+  const { CheckingTime, ViewAll } = constantData.Attendance;
+  const { data: rows = [], isLoading } = useGetAttendacneQuery();
+  const navigate = useNavigate();
+  const [dataLoading, setIsDataLoading] = useState(true);
+  const { notFound } = constantData.Employee;
+  const [attendanceData, setAttendanceData] = useState<AttendanceTypes[]>([]);
+
+  const columns: GridColDef[] = [
+    {
+      field: "name",
+      headerName: "Name",
+      sortable: false,
+      width: 200,
+      renderCell: (cellValues) => {
+        return (
+          <div
+            style={{
+              marginLeft: "16px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              textTransform: "capitalize",
+            }}
+          >
+            <img
+              style={{
+                height: "32px",
+                width: "32px",
+                left: "241px",
+                top: "154px",
+                marginRight: "8px",
+                borderRadius: "50%",
+              }}
+              src={`${cellValues.row?.employee?.image}`}
+              alt="profile pic"
+            />
+            <p>{cellValues?.row?.employee?.name}</p>
+          </div>
+        );
+      },
+    },
+    {
+      field: "Check In",
+      headerName: "Check In",
+      sortable: false,
+      width: 160,
+      renderCell: (cellValues) => {
+        return (
+          <p style={{ marginLeft: "20px" }}>
+            {cellValues?.row?.time_in
+              ? moment(cellValues?.row?.time_in).format("LT")
+              : ""}
+          </p>
+        );
+      },
+    },
+    {
+      field: "Check Out",
+      headerName: "Check Out",
+      sortable: false,
+      width: 160,
+      renderCell: (cellValues) => {
+        return (
+          <p style={{ marginLeft: "20px" }}>
+            {cellValues?.row?.time_out
+              ? moment(cellValues?.row?.time_out).format("LT")
+              : ""}
+          </p>
+        );
+      },
+    },
+  ];
+  useEffect(() => {
+    if (!isLoading) {
+      if (rows.length) {
+        setAttendanceData(rows.slice(0, 3));
+      } else {
+        setAttendanceData([]);
+      }
+      setIsDataLoading(false);
+    }
+  }, [rows, isLoading]);
   return (
     <Box className="checking-time-section">
       <Box className="heading-section">
@@ -16,10 +106,120 @@ const CheckingTime = () => {
           <img className="menu-pic" src={ThreeDotter} alt="menu" />
         </Box>
       </Box>
-      <Box className="clock-img">
-        <img src={clockIcon} alt="clock" />
-        <Typography>{ClockError}</Typography>
-      </Box>
+      {!dataLoading ? (
+        <>
+          {attendanceData?.length ? (
+            <div className="dataGridTable-main">
+              <DataGrid
+                className="dataGrid"
+                rowHeight={75}
+                autoHeight
+                rows={[...attendanceData]}
+                columns={columns}
+                disableColumnFilter
+                disableSelectionOnClick
+                hideFooterPagination
+                hideFooterSelectedRowCount
+                disableColumnMenu
+                disableColumnSelector
+                density="standard"
+                loading={isLoading}
+                sx={{
+                  "& renderCell-joiningDate MuiBox-root css-0:focus": {
+                    outline: "none",
+                  },
+                  "& .MuiDataGrid-columnHeaders": {
+                    backgroundColor: "#(207,207,207, 0.2)",
+                    fontFamily: "Lato",
+                    fontStyle: "normal",
+                    fontWeight: "600",
+                    fontSize: "14px",
+                    lineHeight: "18px",
+                    letterSpacing: "-0.011em",
+                    cursor: "default !important",
+                    color: "#6C6C6C",
+                    ":focus": {
+                      outline: "white",
+                    },
+                  },
+                  "& .css-1jbbcbn-MuiDataGrid-columnHeaderTitle": {
+                    width: "130px",
+                    height: "18px",
+                    fontFamily: "Lato",
+                    fontStyle: "normal",
+                    fontWeight: "600",
+                    fontSize: "14px",
+                    lineHeight: "18px",
+                    letterSpacing: "-0.011em",
+                    color: "#6C6C6C",
+                    marginLeft: "20px",
+                    marginTop: "16px",
+                    marginBottom: "16px",
+                    marginRight: "16px",
+                  },
+                  "& .MuiDataGrid-virtualScrollerRenderZone": {
+                    "& .MuiDataGrid-row": {
+                      backgroundColor: "white",
+                    },
+                  },
+                  "& .MuiDataGrid-cell:focus, .MuiDataGrid-cell:focus-within": {
+                    outline: "none",
+                  },
+                  "& .css-1lk0jn-MuiDataGrid-root .MuiDataGrid-columnSeparator--sideRight":
+                    {
+                      opacity: 0,
+                    },
+                  "& .css-iibd7p-MuiDataGrid-root.MuiDataGrid-autoHeight": {
+                    border: "white",
+                  },
+                  "& .MuiDataGrid-columnSeparator": {
+                    visibility: "hidden",
+                    display: "none",
+                  },
+                  "& .MuiDataGrid-cell:hover": {
+                    color: "black",
+                  },
+                  "& .MuiDataGrid-row:hover": {
+                    backgroundColor: "#F5F5F5",
+                  },
+                  "& .MuiDataGrid-row.Mui-selected:hover, .css-vgcejw-MuiDataGrid-root .MuiDataGrid-row.Mui-selected.Mui-hovered":
+                    {
+                      backgroundColor: "white",
+                    },
+                  "&.MuiDataGrid-root .MuiDataGrid-cell:focus, .MuiDataGrid-root .MuiDataGrid-cell:focus-within":
+                    {
+                      outline: "none",
+                    },
+                  "&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus, .MuiDataGrid-root .MuiDataGrid-cell:focus":
+                    {
+                      outline: "none",
+                    },
+                }}
+              />
+              <Box className="view-all-btn">
+                <Button
+                  className="view-all"
+                  onClick={() => navigate("attendance/")}
+                >
+                  {ViewAll}
+                </Button>
+              </Box>
+            </div>
+          ) : (
+            <Box className="error-img">
+              <img src={NotfoundIcon} alt="notfound" />
+              <Typography className="error-msg">
+                {employeeConstants.employees}
+                {notFound}
+              </Typography>
+            </Box>
+          )}
+        </>
+      ) : (
+        <>
+          <RowSkeletonCard pathString="attendance" />
+        </>
+      )}
     </Box>
   );
 };

diff --git a/frontend/src/components/shared/loaders/rowSkeletonCard/RowSkeletonCard.tsx b/frontend/src/components/shared/loaders/rowSkeletonCard/RowSkeletonCard.tsx
@@ -3,13 +3,13 @@ import Skeleton from "@mui/material/Skeleton";
 import "@src/components/shared/loaders/rowSkeletonCard/rowSkeletonCard.scss";
 
 interface Props {
-  pathString: string;
+  pathString?: string;
 }
 
 function RowSkeletonCard({ pathString }: Props) {
   return (
     <>
-      {pathString === "leaves"
+      {pathString === "leaves" || pathString === "attendance"
         ? new Array(3).fill(0).map((_, index) => (
             <div className="row-skeleton" key={index}>
               <Box sx={{ width: "100%" }}>

diff --git a/frontend/src/helpers/interfaces/localizationinterfaces.ts b/frontend/src/helpers/interfaces/localizationinterfaces.ts
@@ -392,6 +392,8 @@ export interface standupData {
 }
 export interface AttendanceData {
   attendance: string;
+  CheckingTime: string;
+  ViewAll: string;
 }
 export interface TeamsData {
   Teams: string;