WIP Time Ticket Summary BOD-191

client/src/components/time-tickets-summary-employees/time-tickets-summary-employees.component.jsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { Statistic, Space, List, Button, Typography } from "antd";
+import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import { useTranslation } from "react-i18next";
+import moment from "moment";
+
+export default function TimeTicketsSummaryEmployees({ loading, timetickets }) {
+  const { t } = useTranslation();
+
+  //Group everything by employee
+  //Then sum the individual time TimeTicketsSummary.
+
+  //Calculate job based tickets.
+  const jobTicketsByEmployee = {};
+  timetickets
+    .filter((i) => i.cost_center !== "timetickets.labels.shift")
+    .map((tt) => {
+      if (!!!jobTicketsByEmployee[tt.employeeid]) {
+        jobTicketsByEmployee[tt.employeeid] = [];
+      }
+      jobTicketsByEmployee[tt.employeeid].push(tt);
+    });
+  const jobTickets = Object.keys(jobTicketsByEmployee).map(function (key) {
+    return {
+      employee: jobTicketsByEmployee[key][0].employee,
+      tickets: jobTicketsByEmployee[key],
+    };
+  });
+
+  //Calculate shift based tickets.
+  const shiftTicketsByEmployee = {};
+  timetickets
+    .filter((i) => i.cost_center === "timetickets.labels.shift")
+    .map((tt) => {
+      if (!!!shiftTicketsByEmployee[tt.employeeid]) {
+        shiftTicketsByEmployee[tt.employeeid] = [];
+      }
+      shiftTicketsByEmployee[tt.employeeid].push(tt);
+    });
+  const shiftTickets = Object.keys(shiftTicketsByEmployee).map(function (key) {
+    return {
+      employee: shiftTicketsByEmployee[key][0].employee,
+      tickets: shiftTicketsByEmployee[key],
+    };
+  });
+
+  return (
+    <div>
+      <List
+        header={
+          <Typography.Title level={3}>
+            {t("timetickets.labels.jobhours")}
+          </Typography.Title>
+        }
+        itemLayout='horizontal'
+        dataSource={jobTickets}
+        renderItem={(item) => (
+          <List.Item
+            actions={[
+              <Button>{t("timetickets.actions.printemployee")}</Button>,
+            ]}>
+            <LoadingSkeleton loading={loading}>
+              <List.Item.Meta
+                title={
+                  <a href='https://ant.design'>{`${item.employee.first_name} ${item.employee.last_name}`}</a>
+                }
+                // description='Ant Design, a design language for background applications, is refined by Ant UED Team'
+              />
+              <Space>
+                <Statistic
+                  title={t("timetickets.fields.actualhrs")}
+                  precision={1}
+                  value={item.tickets.reduce(
+                    (acc, val) => acc + val.actualhrs,
+                    0
+                  )}
+                />
+                <Statistic
+                  title={t("timetickets.fields.productivehrs")}
+                  precision={1}
+                  value={item.tickets.reduce(
+                    (acc, val) => acc + val.productivehrs,
+                    0
+                  )}
+                />
+              </Space>
+            </LoadingSkeleton>
+          </List.Item>
+        )}
+      />
+      <List
+        header={
+          <Typography.Title level={3}>
+            {t("timetickets.labels.clockhours")}
+          </Typography.Title>
+        }
+        itemLayout='horizontal'
+        dataSource={shiftTickets}
+        renderItem={(item) => (
+          <List.Item
+            actions={[
+              <Button>{t("timetickets.actions.printemployee")}</Button>,
+            ]}>
+            <LoadingSkeleton loading={loading}>
+              <List.Item.Meta
+                title={
+                  <a href='https://ant.design'>{`${item.employee.first_name} ${item.employee.last_name}`}</a>
+                }
+                // description='Ant Design, a design language for background applications, is refined by Ant UED Team'
+              />
+              <Statistic
+                title={t("timetickets.fields.clockhours")}
+                precision={2}
+                value={item.tickets.reduce(
+                  (acc, val) =>
+                    acc +
+                    moment(item.clockoff).diff(
+                      moment(item.clockon),
+                      "hours",
+                      true
+                    ),
+                  0
+                )}
+              />
+            </LoadingSkeleton>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+}