AverageHours

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.tabSize": 2
+}

src/components/molecules/NavigationMenu/index.js

@@ -86,6 +86,12 @@ const Menuu = ({ collapsed, ...props }) => {
           route="/ponto/atualizarnoticias"
           label="Atualizar Notícias"
         />
+        <MenuItem
+          disabled={!access || access === 0}
+          key="/ponto/mediahoras"
+          route="/ponto/mediahoras"
+          label="Média de horas"
+        />
         {/* <MenuItem
 					disabled={!access || access === 0}
 					key="/ponto/horarioobrigatorio"

src/pages/Administration/AverageHours/AverageHoursRow.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { GetColorName } from "hex-color-to-color-name";
+
+const AverageHoursRow = ({ averageHours, ...props }) => {
+  return (
+    <tr {...props}>
+      <td className="avgHoursColumn">{averageHours.name}</td>
+      <td className="avgHoursColumn">{GetColorName(averageHours.color)}</td>
+    </tr>
+  );
+};
+
+export default AverageHoursRow;

src/pages/Administration/AverageHours/index.js

@@ -0,0 +1,140 @@
+import React, { useContext, useState } from "react";
+import { useQuery } from "@apollo/client";
+import moment from "moment";
+
+import { message, Skeleton } from "antd";
+import { DatePicker } from "antd";
+import { AverageHoursComponent } from "./styles";
+import { RocketOutlined } from "@ant-design/icons";
+import { ThemeContext } from "../../../context/ThemeProvider";
+
+import AverageHoursRow from "./AverageHoursRow";
+import { GET_DEPARTAMENTS } from "../../../graphql/Departaments";
+
+const { RangePicker } = DatePicker;
+
+const AverageHours = () => {
+  const { themeColors } = useContext(ThemeContext);
+
+  const today = moment();
+  const fourWeeksAgo = moment().subtract(4, "weeks");
+  const [rangeDate, setRangeDate] = useState([
+    fourWeeksAgo.startOf("day"),
+    today.endOf("day"),
+  ]);
+
+  function disabledDate(current) {
+    return current && current > moment().endOf("day");
+  }
+
+  const { loading, error, data } = useQuery(GET_DEPARTAMENTS);
+
+  if (loading)
+    return (
+      <Skeleton
+        paragraph={{ rows: 4 }}
+        size={"large"}
+        active={loading}
+        loading={loading}
+      />
+    );
+
+  if (error) {
+    console.log(error);
+    message.error("Houve um problema, tente recarregar a pagina", 2.5);
+    return <h1>Erro, recarregue a pagina</h1>;
+  }
+
+  if (data) {
+    const { departament: departaments } = data;
+    const levels = [
+      {
+        color: "#000",
+        name: "Oparacional",
+        segment: "Desenvolvimento web",
+        __typename: "Departament",
+        _id: "6522da261ba6ef1bd40bdb51",
+      },
+      {
+        color: "#EDF723",
+        name: "Projetos",
+        segment: "Some Segment",
+        __typename: "Departament",
+        _id: "64f5f12df7b55f049c7817b7",
+      },
+      {
+        color: "#AAAAAA",
+        name: "teste dpto",
+        segment: "none",
+        __typename: "Departament",
+        _id: "6522da261ba6ef1bd40bdb51",
+      },
+    ];
+
+    console.log(departaments);
+    return (
+      <AverageHoursComponent theme={themeColors}>
+        <div className="iconWithTitle">
+          <RocketOutlined className="svgIcon" />
+          <h1>Média de horas</h1>
+        </div>
+
+        <RangePicker
+          className="rangePicker"
+          format="DD-MM-yyyy"
+          disabledDate={disabledDate}
+          onChange={setRangeDate}
+          value={rangeDate}
+          placeholder={["Inicio", "Fim"]}
+        />
+
+        <div className="tables">
+          <table className="frame">
+            <thead>
+              <tr>
+                <th className="avgHoursColumn">Departamento</th>
+                <th className="avgHoursColumn">Média de horas</th>
+              </tr>
+            </thead>
+            <tbody>
+              {departaments ? (
+                departaments.map((departament) => (
+                  <AverageHoursRow
+                    key={departament._id}
+                    averageHours={departament}
+                  />
+                ))
+              ) : (
+                <tr>
+                  <th>Nenhum Departamento cadastrado</th>
+                </tr>
+              )}
+            </tbody>
+          </table>
+
+          <table className="frame">
+            <thead>
+              <tr>
+                <th className="avgHoursColumn">Nível organizacional</th>
+                <th className="avgHoursColumn">Média de horas</th>
+              </tr>
+            </thead>
+            <tbody>
+              {levels ? (
+                levels.map((level) => (
+                  <AverageHoursRow key={level._id} averageHours={level} />
+                ))
+              ) : (
+                <tr>
+                  <th>Nenhum Departamento cadastrado</th>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </AverageHoursComponent>
+    );
+  }
+};
+
+export default AverageHours;

src/pages/Administration/AverageHours/styles.js

@@ -0,0 +1,106 @@
+import styled from "styled-components";
+
+const AverageHoursComponent = styled.div`
+  width: 100%;
+  min-height: 10vh;
+
+  background-color: ${(props) => props.theme.appBackground};
+
+  display: flex;
+  flex-direction: column;
+  padding: 30px 20px;
+
+  .iconWithTitle {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 32px;
+
+    .svgIcon {
+      font-size: 40px;
+      margin-right: 8px;
+    }
+    h1 {
+      font-size: 30px;
+      font-weight: 400;
+      line-height: 29px;
+      color: #ffffff;
+    }
+  }
+
+  .rangePicker {
+    max-width: 250px;
+    margin-left: 20px;
+  }
+
+  .tables {
+    display: flex;
+    margin-top: 70px;
+    justify-content: space-around;
+    align-items: center;
+    overflow-x: scroll;
+
+    @media (max-width: 1100px) {
+      margin-left: 15%;
+      flex-direction: column;
+      justify-content: start;
+    }
+    @media (max-width: 829px) {
+      margin-inline: auto;
+      flex-direction: column;
+      justify-content: start;
+    }
+  }
+
+  table,
+  th,
+  tr,
+  td {
+    margin: 0;
+    padding: 0;
+  }
+
+  .frame {
+    max-width: 400px;
+    overflow-x: scroll;
+
+    tr {
+      height: 80px;
+      padding: 0px 20px;
+
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      border-bottom: 2px solid #1c1c1d;
+    }
+
+    thead tr:first-child {
+      height: 65px;
+      background-color: #1d1d1d;
+
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      border-radius: 5px;
+    }
+
+    @media (max-width: 1100px) {
+      margin-bottom: 70px;
+      width: 100%;
+    }
+  }
+
+  .avgHoursColumn {
+    width: 45%;
+    max-width: 50vw;
+    min-width: 150px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+  }
+`;
+
+export { AverageHoursComponent };

src/pages/Administration/Departaments/DepartamentRow.js

@@ -20,6 +20,7 @@ const DepartamentRow = ({ departament, onEdit, onDelete, ...props }) => {
 				</Tooltip>
 			</td>
 		</tr>
+
 	);
 };
 

src/pages/Administration/Departaments/index.js

@@ -160,6 +160,7 @@ const Departaments = () => {
   const [updateDepartamentMutation] = useMutation(UPDATE_DEPARTAMENT);
   const [createDepartamentMutation] = useMutation(CREATE_DEPARTAMENT);
   const { loading, error, data, refetch } = useQuery(GET_DEPARTAMENTS);
+
   if (loading)
     return (
       <Skeleton

src/pages/Administration/Departaments/styles.js

@@ -46,8 +46,7 @@ const DepartamentsComponent = styled.div`
 	}
 
 	.departamentTable {
-		width: 100%;
-		display: block;
+		max-width: 420px;
 		overflow-x: scroll;
 	}
 

src/pages/Ponto/index.js

@@ -16,5 +16,4 @@ const Ponto = () => {
   );
 };
 
-export default Ponto;
-
+export default Ponto;

src/pages/index.js

@@ -11,4 +11,4 @@ export { default as Tasks } from "./Administration/Tasks";
 export { default as Badges } from "./Administration/Badges";
 export { default as Projects } from "./Administration/Projects";
 export { default as Departaments } from "./Administration/Departaments";
-
+export { default as AverageHours } from "./Administration/AverageHours";

src/routes/RestrictedRoute.js

@@ -62,4 +62,4 @@ const RestrictedRoute = ({ minAccessLevel, ...props }) => {
   );
 };
 
-export default RestrictedRoute;
+export default RestrictedRoute;

src/routes/index.js

@@ -10,6 +10,7 @@ import {
   StandBy,
   UpdateNews,
   MandatoryHours,
+  AverageHours,
   Members,
   Roles,
   Login,
@@ -19,6 +20,7 @@ import {
   Projects,
   Departaments,
 } from "../pages";
+
 import HourConsultation from "../pages/Administration/HourConsultation";
 
 function Menu() {
@@ -33,6 +35,11 @@ function Menu() {
           path="/ponto/membros"
           component={Members}
         />
+        <RestrictedRoute
+          minAccessLevel={1}
+          path="/ponto/mediahoras"
+          component={AverageHours}
+        />
         <RestrictedRoute
           minAccessLevel={1}
           path="/ponto/cargos"
@@ -95,5 +102,4 @@ const Routes = () => {
   );
 };
 
-export default Routes;
-
+export default Routes;