UI Updates.

2021-04-01 09:44:29 -07:00
parent 10690ec187
commit ad0347e25b
17 changed files with 1262 additions and 1027 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
+++ b/client/src/components/accounting-payables-table/accounting-payables-table.component.jsx
@@ -1,4 +1,4 @@
-import { Input, Table, Checkbox } from "antd";
+import { Input, Table, Checkbox, Card, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -145,28 +145,26 @@ export default function AccountingPayablesTableComponent({ loading, bills }) {
    : bills;

  return (
-    <div>
+    <Card
+      extra={
+        <Space wrap>
+          <PayableExportAll
+            billids={selectedBills}
+            disabled={transInProgress || selectedBills.length === 0}
+            loadingCallback={setTransInProgress}
+            completedCallback={setSelectedBills}
+          />
+          <Input
+            value={state.search}
+            onChange={handleSearch}
+            placeholder={t("general.labels.search")}
+            allowClear
+          />
+        </Space>
+      }
+    >
      <Table
        loading={loading}
-        title={() => {
-          return (
-            <div className="imex-table-header">
-              <PayableExportAll
-                billids={selectedBills}
-                disabled={transInProgress || selectedBills.length === 0}
-                loadingCallback={setTransInProgress}
-                completedCallback={setSelectedBills}
-              />
-              <Input
-                className="imex-table-header__search"
-                value={state.search}
-                onChange={handleSearch}
-                placeholder={t("general.labels.search")}
-                allowClear
-              />
-            </div>
-          );
-        }}
        dataSource={dataSource}
        pagination={{ position: "top", pageSize: 50 }}
        columns={columns}
@@ -185,6 +183,6 @@ export default function AccountingPayablesTableComponent({ loading, bills }) {
          type: "checkbox",
        }}
      />
-    </div>
+    </Card>
  );
 }
--- a/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
+++ b/client/src/components/accounting-payments-table/accounting-payments-table.component.jsx
@@ -1,4 +1,4 @@
-import { Input, Table } from "antd";
+import { Card, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -123,13 +123,11 @@ export default function AccountingPayablesTableComponent({
      sorter: (a, b) => a.clm_total - b.clm_total,

      render: (text, record) => (
-        <div>
-          <PaymentExportButton
-            paymentId={record.id}
-            disabled={transInProgress || !!record.exportedat}
-            loadingCallback={setTransInProgress}
-          />
-        </div>
+        <PaymentExportButton
+          paymentId={record.id}
+          disabled={transInProgress || !!record.exportedat}
+          loadingCallback={setTransInProgress}
+        />
      ),
    },
  ];
@@ -152,28 +150,26 @@ export default function AccountingPayablesTableComponent({
    : payments;

  return (
-    <div>
+    <Card
+      extra={
+        <Space wrap>
+          <PaymentsExportAllButton
+            paymentIds={selectedPayments}
+            disabled={transInProgress || selectedPayments.length === 0}
+            loadingCallback={setTransInProgress}
+            completedCallback={setSelectedPayments}
+          />
+          <Input
+            value={state.search}
+            onChange={handleSearch}
+            placeholder={t("general.labels.search")}
+            allowClear
+          />
+        </Space>
+      }
+    >
      <Table
        loading={loading}
-        title={() => {
-          return (
-            <div className="imex-table-header">
-              <PaymentsExportAllButton
-                paymentIds={selectedPayments}
-                disabled={transInProgress || selectedPayments.length === 0}
-                loadingCallback={setTransInProgress}
-                completedCallback={setSelectedPayments}
-              />
-              <Input
-                className="imex-table-header__search"
-                value={state.search}
-                onChange={handleSearch}
-                placeholder={t("general.labels.search")}
-                allowClear
-              />
-            </div>
-          );
-        }}
        dataSource={dataSource}
        pagination={{ position: "top", pageSize: 50 }}
        columns={columns}
@@ -192,6 +188,6 @@ export default function AccountingPayablesTableComponent({
          type: "checkbox",
        }}
      />
-    </div>
+    </Card>
  );
 }
--- a/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx
+++ b/client/src/components/accounting-receivables-table/accounting-receivables-table.component.jsx
@@ -1,4 +1,4 @@
-import { Button, Input, Table } from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -121,7 +121,7 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
      sorter: (a, b) => a.clm_total - b.clm_total,

      render: (text, record) => (
-        <div style={{ display: "flex" }}>
+        <Space wrap>
          <JobExportButton
            jobId={record.id}
            disabled={!!record.date_exported}
@@ -129,7 +129,7 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
          <Link to={`/manage/jobs/${record.id}/close`}>
            <Button>{t("jobs.labels.viewallocations")}</Button>
          </Link>
-        </div>
+        </Space>
      ),
    },
  ];
@@ -166,28 +166,26 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
    : jobs;

  return (
-    <div>
+    <Card
+      extra={
+        <Space wrap>
+          <JobsExportAllButton
+            jobIds={selectedJobs}
+            disabled={transInProgress || selectedJobs.length === 0}
+            loadingCallback={setTransInProgress}
+            completedCallback={setSelectedJobs}
+          />
+          <Input.Search
+            value={state.search}
+            onChange={handleSearch}
+            placeholder={t("general.labels.search")}
+            allowClear
+          />
+        </Space>
+      }
+    >
      <Table
        loading={loading}
-        title={() => {
-          return (
-            <div className="imex-table-header">
-              <JobsExportAllButton
-                jobIds={selectedJobs}
-                disabled={transInProgress || selectedJobs.length === 0}
-                loadingCallback={setTransInProgress}
-                completedCallback={setSelectedJobs}
-              />
-              <Input.Search
-                className="imex-table-header__search"
-                value={state.search}
-                onChange={handleSearch}
-                placeholder={t("general.labels.search")}
-                allowClear
-              />
-            </div>
-          );
-        }}
        dataSource={dataSource}
        pagination={{ position: "top" }}
        columns={columns}
@@ -206,6 +204,6 @@ export default function AccountingReceivablesTableComponent({ loading, jobs }) {
          type: "checkbox",
        }}
      />
-    </div>
+    </Card>
  );
 }
--- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
+++ b/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Input, Space, Table } from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -175,7 +175,23 @@ export function PaymentsListPaginated({
  };

  return (
-    <div>
+    <Card
+      extra={
+        <Space wrap>
+          <Button onClick={() => refetch()}>
+            <SyncOutlined />
+          </Button>
+          <Input.Search
+            placeholder={t("general.labels.search")}
+            onSearch={(value) => {
+              search.search = value;
+              history.push({ search: queryString.stringify(search) });
+            }}
+            enterButton
+          />
+        </Space>
+      }
+    >
      <Table
        loading={loading}
        scroll={{ x: true }}
@@ -189,26 +205,8 @@ export function PaymentsListPaginated({
        rowKey="id"
        dataSource={payments}
        onChange={handleTableChange}
-        title={() => {
-          return (
-            <div className="imex-table-header">
-              <Button onClick={() => refetch()}>
-                <SyncOutlined />
-              </Button>
-              <Input.Search
-                className="imex-table-header__search"
-                placeholder={t("general.labels.search")}
-                onSearch={(value) => {
-                  search.search = value;
-                  history.push({ search: queryString.stringify(search) });
-                }}
-                enterButton
-              />
-            </div>
-          );
-        }}
      />
-    </div>
+    </Card>
  );
 }

--- a/client/src/components/schedule-calendar/schedule-calendar.component.jsx
+++ b/client/src/components/schedule-calendar/schedule-calendar.component.jsx
@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button } from "antd";
+import { Button, Col, PageHeader, Row, Space } from "antd";
 import React from "react";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
 import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
@@ -7,23 +7,29 @@ import ScheduleProductionList from "../schedule-production-list/schedule-product

 export default function ScheduleCalendarComponent({ data, refetch }) {
  return (
-    <div>
-      <div className="imex-flex-row">
-        <Button
-          className="imex-flex-row__margin"
-          onClick={() => {
-            refetch();
-          }}
-        >
-          <SyncOutlined />
-        </Button>
-
-        <ScheduleProductionList />
-      </div>
-
+    <Row gutter={[16, 16]}>
      <ScheduleModal />
+      <Col span={24}>
+        <PageHeader
+          extra={
+            <Space wrap>
+              <Button
+                onClick={() => {
+                  refetch();
+                }}
+              >
+                <SyncOutlined />
+              </Button>

-      <ScheduleCalendarWrapperComponent data={data} refetch={refetch} />
-    </div>
+              <ScheduleProductionList />
+            </Space>
+          }
+        />
+      </Col>
+
+      <Col span={24}>
+        <ScheduleCalendarWrapperComponent data={data} refetch={refetch} />
+      </Col>
+    </Row>
  );
 }
--- a/client/src/components/schedule-calendar/schedule-calendar.container.jsx
+++ b/client/src/components/schedule-calendar/schedule-calendar.container.jsx
@@ -50,7 +50,7 @@ export function ScheduleCalendarContainer({ calculateScheduleLoad }) {
  return (
    <ScheduleCalendarComponent
      refetch={refetch}
-      data={data ? normalizedData : null}
+      data={data ? normalizedData : []}
    />
  );
 }
--- a/client/src/components/schedule-production-list/schedule-production-list.component.jsx
+++ b/client/src/components/schedule-production-list/schedule-production-list.component.jsx
@@ -1,5 +1,5 @@
 import { DownOutlined } from "@ant-design/icons";
-import { Card, Popover } from "antd";
+import { Button, Card, Popover } from "antd";
 import React from "react";
 import { useLazyQuery } from "@apollo/client";
 import { useTranslation } from "react-i18next";
@@ -63,10 +63,10 @@ export default function ScheduleProductionList() {

  return (
    <Popover content={content} trigger="click" placement="bottomRight">
-      <a href=" #" onClick={() => callQuery()}>
+      <Button onClick={() => callQuery()}>
        {t("appointments.labels.inproduction")}
        <DownOutlined />
-      </a>
+      </Button>
    </Popover>
  );
 }
--- a/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
+++ b/client/src/components/tech-job-clock-out-button/tech-job-clock-out-button.component.jsx
@@ -30,7 +30,9 @@ export function TechClockOffButton({
  const [form] = Form.useForm();

  const { t } = useTranslation();
-  const emps = bodyshop.employees.filter((e) => e.id === technician.id)[0];
+  const emps = bodyshop.employees.filter(
+    (e) => e.id === technician && technician.id
+  )[0];

  const handleFinish = async (values) => {
    logImEXEvent("tech_clock_out_job");
--- a/client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx
+++ b/client/src/components/ticket-tickets-dates-selector/time-tickets-dates-selector.component.jsx
@@ -38,6 +38,7 @@ export default function TimeTicketsDatesSelector() {
        start ? moment(start) : moment().startOf("week").subtract(7, "days"),
        end ? moment(end) : moment().endOf("week"),
      ]}
+      format="MM/DD/YYYY"
      ranges={DatePickerRanges}
      onCalendarChange={handleChange}
    />
--- a/client/src/components/time-ticket-list/time-ticket-list.component.jsx
+++ b/client/src/components/time-ticket-list/time-ticket-list.component.jsx
@@ -16,6 +16,7 @@ export default function TimeTicketList({
  refetch,
  techConsole,
  jobId,
+  extra,
 }) {
  const [state, setState] = useState({
    sortedInfo: {},
@@ -200,15 +201,18 @@ export default function TimeTicketList({
    <Card
      title={t("timetickets.labels.timetickets")}
      extra={
-        jobId &&
-        (techConsole ? null : (
-          <TimeTicketEnterButton
-            actions={{ refetch }}
-            context={{ jobId: jobId }}
-          >
-            {t("timetickets.actions.enter")}
-          </TimeTicketEnterButton>
-        ))
+        <Space wrap>
+          {jobId &&
+            (techConsole ? null : (
+              <TimeTicketEnterButton
+                actions={{ refetch }}
+                context={{ jobId: jobId }}
+              >
+                {t("timetickets.actions.enter")}
+              </TimeTicketEnterButton>
+            ))}
+          {extra}
+        </Space>
      }
    >
      <Table
--- a/client/src/components/time-tickets-summary-employees/time-tickets-summary-employees.component.jsx
+++ b/client/src/components/time-tickets-summary-employees/time-tickets-summary-employees.component.jsx
@@ -1,14 +1,15 @@
-import { Button, List, Space, Statistic, Typography } from "antd";
+import { Card, Col, Row, Table } from "antd";
+import _ from "lodash";
 import moment from "moment";
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { onlyUnique } from "../../utils/arrayHelper";
-import { GenerateDocument } from "../../utils/RenderTemplate";
+import { alphaSort } from "../../utils/sorters";
 import { TemplateList } from "../../utils/TemplateConstants";
-import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
+import PrintWrapperComponent from "../print-wrapper/print-wrapper.component";

 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
@@ -24,8 +25,6 @@ export function TimeTicketsSummaryEmployees({
  startDate,
  endDate,
 }) {
-  const { t } = useTranslation();
-
  //Group everything by employee
  //Then sum the individual time TimeTicketsSummary.

@@ -42,6 +41,7 @@ export function TimeTicketsSummaryEmployees({
    });
  const jobTickets = Object.keys(jobTicketsByEmployee).map(function (key) {
    return {
+      jobKey: key,
      employee: jobTicketsByEmployee[key][0].employee,
      tickets: jobTicketsByEmployee[key],
    };
@@ -65,150 +65,248 @@ export function TimeTicketsSummaryEmployees({
    };
  });

-  const handlePrintEmployeeTicket = async (empId) => {
-    GenerateDocument(
-      {
-        name: TemplateList().timetickets_employee.key,
-        variables: { id: empId, start: startDate, end: endDate },
-      },
-      {},
-      "p"
-    );
-  };
-
  return (
-    <div>
-      <List
-        header={
-          <Typography.Title level={3}>
-            {t("timetickets.labels.jobhours")}
-          </Typography.Title>
-        }
-        itemLayout="horizontal"
-        //dataSource={jobTickets}
-      >
-        {jobTickets.map((item, idx) => {
-          const employeeCostCenters = item.tickets
-            .map((i) => i.cost_center)
-            .filter(onlyUnique);
-
-          return employeeCostCenters.map((costCenter) => {
-            const actHrs = item.tickets
-              .filter((ticket) => ticket.cost_center === costCenter)
-              .reduce((acc, val) => acc + val.actualhrs, 0);
-
-            const prodHrs = item.tickets
-              .filter((ticket) => ticket.cost_center === costCenter)
-              .reduce((acc, val) => acc + val.productivehrs, 0);
-
-            const clockHrs = item.tickets
-              .filter((ticket) => ticket.cost_center === costCenter)
-              .reduce((acc, val) => {
-                if (!!val.clockoff && !!val.clockon)
-                  return (
-                    acc +
-                    moment(val.clockoff).diff(
-                      moment(val.clockon),
-                      "hours",
-                      true
-                    )
-                  );
-                return acc;
-              }, 0);
-
-            return (
-              <List.Item
-                key={`${idx}${costCenter}`}
-                actions={[
-                  <Button
-                    onClick={() => handlePrintEmployeeTicket(item.employee.id)}
-                  >
-                    {t("timetickets.actions.printemployee")}
-                  </Button>,
-                ]}
-              >
-                <LoadingSkeleton loading={loading}>
-                  <List.Item.Meta
-                    title={`${item.employee.first_name} ${item.employee.last_name}`}
-                    description={costCenter}
-                  />
-                  <Space>
-                    <Statistic
-                      title={t("timetickets.fields.actualhrs")}
-                      precision={1}
-                      value={actHrs}
-                    />
-                    <Statistic
-                      title={t("timetickets.fields.productivehrs")}
-                      precision={1}
-                      value={prodHrs}
-                    />
-                    <Statistic
-                      title={t("timetickets.fields.efficiency")}
-                      precision={1}
-                      value={
-                        actHrs === 0 || !actHrs ? "∞" : (prodHrs / actHrs) * 100
-                      }
-                      suffix={"%"}
-                    />
-                    <Statistic
-                      title={t("timetickets.fields.clockhours")}
-                      precision={1}
-                      value={clockHrs}
-                    />
-                  </Space>
-                </LoadingSkeleton>
-              </List.Item>
-            );
-          });
-        })}
-      </List>
-      <List
-        header={
-          <Typography.Title level={3}>
-            {t("timetickets.labels.clockhours")}
-          </Typography.Title>
-        }
-        itemLayout="horizontal"
-        dataSource={shiftTickets}
-        renderItem={(item) => {
-          const clockHrs = item.tickets.reduce((acc, val) => {
-            if (!!val.clockoff && !!val.clockon)
-              return (
-                acc +
-                moment(val.clockoff).diff(moment(val.clockon), "hours", true)
-              );
-            return acc;
-          }, 0);
-
-          return (
-            <List.Item
-              actions={[
-                <Button
-                  onClick={() => handlePrintEmployeeTicket(item.employee.id)}
-                >
-                  {t("timetickets.actions.printemployee")}
-                </Button>,
-              ]}
-            >
-              <LoadingSkeleton loading={loading}>
-                <List.Item.Meta
-                  title={`${item.employee.first_name} ${item.employee.last_name}`}
-                />
-                <Statistic
-                  title={t("timetickets.fields.clockhours")}
-                  precision={2}
-                  value={clockHrs}
-                />
-              </LoadingSkeleton>
-            </List.Item>
-          );
-        }}
-      />
-    </div>
+    <Row gutter={[16, 16]}>
+      <Col span={24}>
+        <JobRelatedTicketsTable
+          loading={loading}
+          jobTickets={jobTickets}
+          startDate={startDate}
+          endDate={endDate}
+        />
+      </Col>
+      <Col span={24}>
+        <ShiftRelatedTicketsTable
+          loading={loading}
+          shiftTickets={shiftTickets}
+          startDate={startDate}
+          endDate={endDate}
+        />
+      </Col>
+    </Row>
  );
 }
 export default connect(
  mapStateToProps,
  mapDispatchToProps
 )(TimeTicketsSummaryEmployees);
+
+const JobRelatedTicketsTable = ({
+  loading,
+  jobTickets,
+  startDate,
+  endDate,
+}) => {
+  const Templates = TemplateList();
+  const { t } = useTranslation();
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+  const data = useMemo(() => {
+    return _.flatten(
+      jobTickets.map((item, idx) => {
+        const employeeCostCenters = item.tickets
+          .map((i) => i.cost_center)
+          .filter(onlyUnique);
+
+        return employeeCostCenters.map((costCenter) => {
+          const actHrs = item.tickets
+            .filter((ticket) => ticket.cost_center === costCenter)
+            .reduce((acc, val) => acc + val.actualhrs, 0);
+
+          const prodHrs = item.tickets
+            .filter((ticket) => ticket.cost_center === costCenter)
+            .reduce((acc, val) => acc + val.productivehrs, 0);
+
+          const clockHrs = item.tickets
+            .filter((ticket) => ticket.cost_center === costCenter)
+            .reduce((acc, val) => {
+              if (!!val.clockoff && !!val.clockon)
+                return (
+                  acc +
+                  moment(val.clockoff).diff(moment(val.clockon), "hours", true)
+                );
+              return acc;
+            }, 0);
+
+          return {
+            id: `${item.jobKey}${costCenter}`,
+            item,
+            actHrs,
+            prodHrs,
+            clockHrs,
+          };
+        });
+      })
+    );
+  }, [jobTickets]);
+
+  const columns = [
+    {
+      title: t("bills.fields.vendorname"),
+      dataIndex: "empname",
+      key: "empname",
+      sorter: (a, b) => alphaSort(a.empname, b.empname),
+      sortOrder:
+        state.sortedInfo.columnKey === "empname" && state.sortedInfo.order,
+      render: (text, record) =>
+        `${record.item.employee.first_name} ${record.item.employee.last_name}`,
+    },
+    {
+      title: t("timetickets.fields.actualhrs"),
+      dataIndex: "actHrs",
+      key: "actHrs",
+      sorter: (a, b) => a.actHrs - b.actHrs,
+      sortOrder:
+        state.sortedInfo.columnKey === "actHrs" && state.sortedInfo.order,
+    },
+    {
+      title: t("timetickets.fields.productivehrs"),
+      dataIndex: "prodHrs",
+      key: "prodHrs",
+      sorter: (a, b) => a.prodHrs - b.prodHrs,
+      sortOrder:
+        state.sortedInfo.columnKey === "prodHrs" && state.sortedInfo.order,
+    },
+    {
+      title: t("timetickets.fields.efficiency"),
+      dataIndex: "total",
+      key: "total",
+      sorter: (a, b) => a.total - b.total,
+      sortOrder:
+        state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
+      render: (text, record) =>
+        record.actHrs === 0 || !record.actHrs
+          ? "∞"
+          : (record.prodHrs / record.actHrs) * 100,
+    },
+    {
+      title: t("timetickets.fields.clockhours"),
+      dataIndex: "clockHrs",
+      key: "clockHrs",
+      sorter: (a, b) => a.clockHrs - b.clockHrs,
+      sortOrder:
+        state.sortedInfo.columnKey === "clockHrs" && state.sortedInfo.order,
+      render: (text, record) => record.clockHrs.toFixed(2),
+    },
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (text, record) => (
+        <PrintWrapperComponent
+          templateObject={{
+            name: Templates.timetickets_employee.key,
+            variables: {
+              id: record.item.employee.id,
+              start: startDate,
+              end: endDate,
+            },
+          }}
+          messageObject={{ subject: Templates.timetickets_employee.subject }}
+        />
+      ),
+    },
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  return (
+    <Card title={t("timetickets.labels.jobhours")}>
+      <Table
+        loading={loading}
+        scroll={{ x: true, y: "50rem" }}
+        columns={columns}
+        rowKey="id"
+        dataSource={data}
+        onChange={handleTableChange}
+      />
+    </Card>
+  );
+};
+
+const ShiftRelatedTicketsTable = ({
+  loading,
+  shiftTickets,
+  startDate,
+  endDate,
+}) => {
+  const Templates = TemplateList();
+  const { t } = useTranslation();
+  const [state, setState] = useState({
+    sortedInfo: {},
+  });
+  const data = useMemo(() => {
+    return shiftTickets.map((item) => {
+      const clockHrs = item.tickets.reduce((acc, val) => {
+        if (!!val.clockoff && !!val.clockon)
+          return (
+            acc + moment(val.clockoff).diff(moment(val.clockon), "hours", true)
+          );
+        return acc;
+      }, 0);
+
+      return { id: item.employee.id, item, clockHrs };
+    });
+  }, [shiftTickets]);
+
+  const columns = [
+    {
+      title: t("bills.fields.vendorname"),
+      dataIndex: "empname",
+      key: "empname",
+      sorter: (a, b) => alphaSort(a.empname, b.empname),
+      sortOrder:
+        state.sortedInfo.columnKey === "empname" && state.sortedInfo.order,
+      render: (text, record) =>
+        `${record.item.employee.first_name} ${record.item.employee.last_name}`,
+    },
+
+    {
+      title: t("timetickets.fields.clockhours"),
+      dataIndex: "clockHrs",
+      key: "clockHrs",
+      sorter: (a, b) => a.clockHrs - b.clockHrs,
+      sortOrder:
+        state.sortedInfo.columnKey === "clockHrs" && state.sortedInfo.order,
+      render: (text, record) => record.clockHrs.toFixed(2),
+    },
+    {
+      title: t("general.labels.actions"),
+      dataIndex: "actions",
+      key: "actions",
+      render: (text, record) => (
+        <PrintWrapperComponent
+          templateObject={{
+            name: Templates.timetickets_employee.key,
+            variables: {
+              id: record.item.employee.id,
+              start: startDate,
+              end: endDate,
+            },
+          }}
+          messageObject={{ subject: Templates.timetickets_employee.subject }}
+        />
+      ),
+    },
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  return (
+    <Card title={t("timetickets.labels.clockhours")}>
+      <Table
+        loading={loading}
+        scroll={{ x: true, y: "50rem" }}
+        columns={columns}
+        rowKey="id"
+        dataSource={data}
+        onChange={handleTableChange}
+      />
+    </Card>
+  );
+};
--- a/client/src/components/time-tickets-summary/time-tickets-summary.component.jsx
+++ b/client/src/components/time-tickets-summary/time-tickets-summary.component.jsx
@@ -1,20 +0,0 @@
-import React from "react";
-import TimeTicketsSummaryEmployees from "../time-tickets-summary-employees/time-tickets-summary-employees.component";
-
-export default function TimeTicketsSummary({
-  loading,
-  timetickets,
-  startDate,
-  endDate,
-}) {
-  return (
-    <div>
-      <TimeTicketsSummaryEmployees
-        loading={loading}
-        timetickets={timetickets}
-        startDate={startDate}
-        endDate={endDate}
-      />
-    </div>
-  );
-}
--- a/client/src/pages/payments-all/payments-all.container.page.jsx
+++ b/client/src/pages/payments-all/payments-all.container.page.jsx
@@ -60,15 +60,13 @@ export function AllJobs({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
  if (error) return <AlertComponent message={error.message} type="error" />;
  return (
    <RbacWrapper action="payments:list">
-      <div>
-        <PaymentsListPaginated
-          refetch={refetch}
-          loading={loading}
-          searchParams={searchParams}
-          total={data ? data.search_payments_aggregate.aggregate.count : 0}
-          payments={data ? data.search_payments : []}
-        />
-      </div>
+      <PaymentsListPaginated
+        refetch={refetch}
+        loading={loading}
+        searchParams={searchParams}
+        total={data ? data.search_payments_aggregate.aggregate.count : 0}
+        payments={data ? data.search_payments : []}
+      />
    </RbacWrapper>
  );
 }
--- a/client/src/pages/time-tickets/time-tickets.container.jsx
+++ b/client/src/pages/time-tickets/time-tickets.container.jsx
@@ -1,4 +1,5 @@
 import { useQuery } from "@apollo/client";
+import { Col, Row } from "antd";
 import moment from "moment";
 import queryString from "query-string";
 import React, { useEffect } from "react";
@@ -10,7 +11,7 @@ import AlertComponent from "../../components/alert/alert.component";
 import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
 import TimeTicketsDatesSelector from "../../components/ticket-tickets-dates-selector/time-tickets-dates-selector.component";
 import TimeTicketList from "../../components/time-ticket-list/time-ticket-list.component";
-import TimeTicketsSummary from "../../components/time-tickets-summary/time-tickets-summary.component";
+import TimeTicketsSummaryEmployees from "../../components/time-tickets-summary-employees/time-tickets-summary-employees.component";
 import { QUERY_TIME_TICKETS_IN_RANGE } from "../../graphql/timetickets.queries";
 import {
  setBreadcrumbs,
@@ -60,20 +61,23 @@ export function TimeTicketsContainer({

  return (
    <RbacWrapper action="timetickets:list">
-      <div>
-        <TimeTicketsDatesSelector />
-
-        <TimeTicketList
-          loading={loading}
-          timetickets={data ? data.timetickets : []}
-        />
-        <TimeTicketsSummary
-          loading={loading}
-          timetickets={data ? data.timetickets : []}
-          startDate={startDate}
-          endDate={endDate}
-        />
-      </div>
+      <Row gutter={[16, 16]}>
+        <Col span={24}>
+          <TimeTicketList
+            loading={loading}
+            timetickets={data ? data.timetickets : []}
+            extra={<TimeTicketsDatesSelector />}
+          />
+        </Col>
+        <Col span={24}>
+          <TimeTicketsSummaryEmployees
+            loading={loading}
+            timetickets={data ? data.timetickets : []}
+            startDate={startDate}
+            endDate={endDate}
+          />
+        </Col>
+      </Row>
    </RbacWrapper>
  );
 }
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -1175,7 +1175,7 @@
 				},
 				"changeclass": "Changing the job's class can have fundamental impacts to already exported accounting items. Are you sure you want to do this?",
 				"checklistcompletedby": "Checklist completed by {{by}} at {{at}}",
-				"checklistdocuments": "Checklist Documents",
+				"checklistdocuments": "Checklist Documents\\",
 				"checklists": "Checklists",
 				"closeconfirm": "Are you sure you want to close this job? This cannot be easily undone.",
 				"cost": "Cost",
--- a/package-lock.json
+++ b/package-lock.json
@@ -332,9 +332,9 @@
      }
    },
    "node_modules/@google-cloud/storage": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-5.8.2.tgz",
-      "integrity": "sha512-R4MOLHhIbsQUqfQufV9QmYfxPE3TDJD+nwVOoN8mOKOx+XoVRm1ZoXaN5vwUMCBCHsDsgpWu7y9d6YvA+POXrg==",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-5.8.3.tgz",
+      "integrity": "sha512-g++NTmpmwbZZEnBhJi3y1D3YyZ2Y+1xL5blp96eeJhffginMym5tRw/AGNZblDI35U2K1FTJEYqIZ31tbEzs8w==",
      "optional": true,
      "dependencies": {
        "@google-cloud/common": "^3.6.0",
@@ -572,9 +572,9 @@
      "peer": true
    },
    "node_modules/@types/node": {
-      "version": "14.14.35",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.35.tgz",
-      "integrity": "sha512-Lt+wj8NVPx0zUmUwumiVXapmaLUcAk3yPuHCFVXras9k5VT9TdhJqKqGVUQCD60OTMCl0qxJ57OiTL0Mic3Iag=="
+      "version": "14.14.37",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz",
+      "integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw=="
    },
    "node_modules/@types/normalize-package-data": {
      "version": "2.4.0",
@@ -1327,9 +1327,9 @@
      }
    },
    "node_modules/cross-fetch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.2.tgz",
-      "integrity": "sha512-+JhD65rDNqLbGmB3Gzs3HrEKC0aQnD+XA3SY6RjgkF88jV2q5cTc5+CwxlS3sdmLk98gpPt5CF9XRnPdlxZe6w==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.3.tgz",
+      "integrity": "sha512-2i6v88DTqVBNODyjD9U6Ycn/uSZNvyHe25cIbo2fFnAACAsaLTJsd23miRWiR5NuiGXR9wpJ9d40/9WAhjDIrw==",
      "dependencies": {
        "node-fetch": "2.6.1"
      }
@@ -1797,9 +1797,9 @@
      }
    },
    "node_modules/eslint": {
-      "version": "7.22.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.22.0.tgz",
-      "integrity": "sha512-3VawOtjSJUQiiqac8MQc+w457iGLfuNGLFn8JmF051tTKbh5/x/0vlcEj8OgDCaw7Ysa2Jn8paGshV7x2abKXg==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.23.0.tgz",
+      "integrity": "sha512-kqvNVbdkjzpFy0XOszNwjkKzZ+6TcwCQ/h+ozlcIWwaimBBuhlQ4nN6kbiM2L+OjDcznkTJxzYfRFH92sx4a0Q==",
      "dev": true,
      "dependencies": {
        "@babel/code-frame": "7.12.11",
@@ -2201,9 +2201,9 @@
      }
    },
    "node_modules/firebase-admin": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-9.5.0.tgz",
-      "integrity": "sha512-OPXFOTDcAE+NORpfhq7YMEDk+vFClBtjfpkrjm2JHRxb8DpMm+K3AcusonFPU/WOH4FhiVN9JHB0+NPE20S3gQ==",
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-9.6.0.tgz",
+      "integrity": "sha512-GNrxsQsZ6alz9u+uYmX84qcixxYQnfOrByxVgEHWiCI9JSCbMOQ/1Px2A6+Coz5zzFokTgXsHnIg+Qz7hMlNZg==",
      "dependencies": {
        "@firebase/database": "^0.8.1",
        "@firebase/database-types": "^0.6.1",
@@ -2221,9 +2221,9 @@
      }
    },
    "node_modules/firebase-admin/node_modules/@types/node": {
-      "version": "10.17.55",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.55.tgz",
-      "integrity": "sha512-koZJ89uLZufDvToeWO5BrC4CR4OUfHnUz2qoPs/daQH6qq3IN62QFxCTZ+bKaCE0xaoCAJYE4AXre8AbghCrhg=="
+      "version": "10.17.56",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.56.tgz",
+      "integrity": "sha512-LuAa6t1t0Bfw4CuSR0UITsm1hP17YL+u82kfHGrHUWdhlBtH7sa7jGY5z7glGaIj/WDYDkRtgGd+KCjCzxBW1w=="
    },
    "node_modules/flat-cache": {
      "version": "3.0.4",
@@ -2920,6 +2920,21 @@
      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
      "dev": true
    },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.0.tgz",
+      "integrity": "sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/is-core-module": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
@@ -2977,6 +2992,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/is-number-object": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.4.tgz",
+      "integrity": "sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/is-obj": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
@@ -3000,6 +3027,18 @@
      "integrity": "sha512-xj0XPvmr7bQFTvirqnFr50o0hQIh6ZItDqloxt5aJrR4NQsYeSsyFQERYGCAzfindAcnKjINnwEEgLx4IqVzQw==",
      "optional": true
    },
+    "node_modules/is-string": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz",
+      "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/is-typedarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -3291,6 +3330,12 @@
      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
      "optional": true
    },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
    "node_modules/lodash.defaults": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@@ -3376,6 +3421,12 @@
      "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz",
      "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0="
    },
+    "node_modules/lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=",
+      "dev": true
+    },
    "node_modules/logform": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/logform/-/logform-2.2.0.tgz",
@@ -3997,9 +4048,9 @@
      }
    },
    "node_modules/protobufjs/node_modules/@types/node": {
-      "version": "13.13.47",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.47.tgz",
-      "integrity": "sha512-R6851wTjN1YJza8ZIeX6puNBSi/ZULHVh4WVleA7q256l+cP2EtXnKbO455fTs2ytQk3dL9qkU+Wh8l/uROdKg==",
+      "version": "13.13.48",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.48.tgz",
+      "integrity": "sha512-z8wvSsgWQzkr4sVuMEEOvwMdOQjiRY2Y/ZW4fDfjfe3+TfQrZqFKOthBgk2RnVEmtOKrkwdZ7uTvsxTBLjKGDQ==",
      "optional": true
    },
    "node_modules/proxy-addr": {
@@ -4349,6 +4400,14 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
    },
+    "node_modules/remote-content/node_modules/netmask": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.1.tgz",
+      "integrity": "sha512-gB8eG6ubxz67c7O2gaGiyWdRUIbH61q7anjgueDqCC9kvIs/b4CTtCMaQKeJbv1/Y7FT19I4zKwYmjnjInRQsg==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
    "node_modules/remote-content/node_modules/pac-proxy-agent": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-4.1.0.tgz",
@@ -4369,13 +4428,13 @@
      }
    },
    "node_modules/remote-content/node_modules/pac-resolver": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-4.1.0.tgz",
-      "integrity": "sha512-d6lf2IrZJJ7ooVHr7BfwSjRO1yKSJMaiiWYSHcrxSIUtZrCa4KKGwcztdkZ/E9LFleJfjoi1yl+XLR7AX24nbQ==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-4.2.0.tgz",
+      "integrity": "sha512-rPACZdUyuxT5Io/gFKUeeZFfE5T7ve7cAkE5TUZRRfuKP0u5Hocwe48X7ZEm6mYB+bTB0Qf+xlVlA/RM/i6RCQ==",
      "dependencies": {
        "degenerator": "^2.2.0",
        "ip": "^1.1.5",
-        "netmask": "^1.0.6"
+        "netmask": "^2.0.1"
      },
      "engines": {
        "node": ">= 6"
@@ -4622,9 +4681,9 @@
      "integrity": "sha1-NipCxtMEBW1JOz8SvOq7LGV2ptQ="
    },
    "node_modules/rxjs": {
-      "version": "6.6.6",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.6.tgz",
-      "integrity": "sha512-/oTwee4N4iWzAMAL9xdGKjkEHmIwupR3oXbQjCKywF1BeFohswF3vZdogbmEF6pZkOsXTzWkrZszrWpQTByYVg==",
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
      "dev": true,
      "dependencies": {
        "tslib": "^1.9.0"
@@ -5056,9 +5115,9 @@
      }
    },
    "node_modules/stripe": {
-      "version": "8.139.0",
-      "resolved": "https://registry.npmjs.org/stripe/-/stripe-8.139.0.tgz",
-      "integrity": "sha512-3Lggs0mgy8gPzIDvLGYmx5ghQuTu+nvSUBCv9Di4FekvJ5iP7nenlrOk7A4cidF1nokamKm/bCIRYxIeDv5xYQ==",
+      "version": "8.141.0",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-8.141.0.tgz",
+      "integrity": "sha512-CRGmx1WYENj16L37TujJg+KscGn8LbYbXqRCPdaepr7BzHIdAFJfQhNfdFkShW5Z9rbmo6mA2fiAOf1S3FIoSw==",
      "dependencies": {
        "@types/node": ">=8.1.0",
        "qs": "^6.6.0"
@@ -5203,13 +5262,18 @@
      }
    },
    "node_modules/table": {
-      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
-      "integrity": "sha512-rxZevLGTUzWna/qBLObOe16kB2RTnnbhciwgPbMMlazz1yZGVEgnZK762xyVdVznhqxrfCeBMmMkgOOaPwjH7g==",
+      "version": "6.0.9",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.0.9.tgz",
+      "integrity": "sha512-F3cLs9a3hL1Z7N4+EkSscsel3z55XT950AvB05bwayrNg5T1/gykXtigioTAjbltvbMSJvvhFCbnf6mX+ntnJQ==",
      "dev": true,
      "dependencies": {
-        "ajv": "^7.0.2",
-        "lodash": "^4.17.20",
+        "ajv": "^8.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.truncate": "^4.4.2",
        "slice-ansi": "^4.0.0",
        "string-width": "^4.2.0"
      },
@@ -5218,9 +5282,9 @@
      }
    },
    "node_modules/table/node_modules/ajv": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-7.2.3.tgz",
-      "integrity": "sha512-idv5WZvKVXDqKralOImQgPM9v6WOdLNa0IY3B3doOjw/YxRGT8I+allIJ6kd7Uaj+SF1xZUSU+nPM5aDNBVtnw==",
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.0.2.tgz",
+      "integrity": "sha512-V0HGxJd0PiDF0ecHYIesTOqfd1gJguwQUOYfMfAWnRsWQEXfc5ifbUFhD3Wjc+O+y7VAqL+g07prq9gHQ/JOZQ==",
      "dev": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
@@ -6053,9 +6117,9 @@
      "optional": true
    },
    "@google-cloud/storage": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-5.8.2.tgz",
-      "integrity": "sha512-R4MOLHhIbsQUqfQufV9QmYfxPE3TDJD+nwVOoN8mOKOx+XoVRm1ZoXaN5vwUMCBCHsDsgpWu7y9d6YvA+POXrg==",
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-5.8.3.tgz",
+      "integrity": "sha512-g++NTmpmwbZZEnBhJi3y1D3YyZ2Y+1xL5blp96eeJhffginMym5tRw/AGNZblDI35U2K1FTJEYqIZ31tbEzs8w==",
      "optional": true,
      "requires": {
        "@google-cloud/common": "^3.6.0",
@@ -6277,9 +6341,9 @@
      "peer": true
    },
    "@types/node": {
-      "version": "14.14.35",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.35.tgz",
-      "integrity": "sha512-Lt+wj8NVPx0zUmUwumiVXapmaLUcAk3yPuHCFVXras9k5VT9TdhJqKqGVUQCD60OTMCl0qxJ57OiTL0Mic3Iag=="
+      "version": "14.14.37",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz",
+      "integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw=="
    },
    "@types/normalize-package-data": {
      "version": "2.4.0",
@@ -6885,9 +6949,9 @@
      }
    },
    "cross-fetch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.2.tgz",
-      "integrity": "sha512-+JhD65rDNqLbGmB3Gzs3HrEKC0aQnD+XA3SY6RjgkF88jV2q5cTc5+CwxlS3sdmLk98gpPt5CF9XRnPdlxZe6w==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.3.tgz",
+      "integrity": "sha512-2i6v88DTqVBNODyjD9U6Ycn/uSZNvyHe25cIbo2fFnAACAsaLTJsd23miRWiR5NuiGXR9wpJ9d40/9WAhjDIrw==",
      "requires": {
        "node-fetch": "2.6.1"
      }
@@ -7267,9 +7331,9 @@
      }
    },
    "eslint": {
-      "version": "7.22.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.22.0.tgz",
-      "integrity": "sha512-3VawOtjSJUQiiqac8MQc+w457iGLfuNGLFn8JmF051tTKbh5/x/0vlcEj8OgDCaw7Ysa2Jn8paGshV7x2abKXg==",
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.23.0.tgz",
+      "integrity": "sha512-kqvNVbdkjzpFy0XOszNwjkKzZ+6TcwCQ/h+ozlcIWwaimBBuhlQ4nN6kbiM2L+OjDcznkTJxzYfRFH92sx4a0Q==",
      "dev": true,
      "requires": {
        "@babel/code-frame": "7.12.11",
@@ -7588,9 +7652,9 @@
      }
    },
    "firebase-admin": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-9.5.0.tgz",
-      "integrity": "sha512-OPXFOTDcAE+NORpfhq7YMEDk+vFClBtjfpkrjm2JHRxb8DpMm+K3AcusonFPU/WOH4FhiVN9JHB0+NPE20S3gQ==",
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-9.6.0.tgz",
+      "integrity": "sha512-GNrxsQsZ6alz9u+uYmX84qcixxYQnfOrByxVgEHWiCI9JSCbMOQ/1Px2A6+Coz5zzFokTgXsHnIg+Qz7hMlNZg==",
      "requires": {
        "@firebase/database": "^0.8.1",
        "@firebase/database-types": "^0.6.1",
@@ -7603,9 +7667,9 @@
      },
      "dependencies": {
        "@types/node": {
-          "version": "10.17.55",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.55.tgz",
-          "integrity": "sha512-koZJ89uLZufDvToeWO5BrC4CR4OUfHnUz2qoPs/daQH6qq3IN62QFxCTZ+bKaCE0xaoCAJYE4AXre8AbghCrhg=="
+          "version": "10.17.56",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-10.17.56.tgz",
+          "integrity": "sha512-LuAa6t1t0Bfw4CuSR0UITsm1hP17YL+u82kfHGrHUWdhlBtH7sa7jGY5z7glGaIj/WDYDkRtgGd+KCjCzxBW1w=="
        }
      }
    },
@@ -8154,6 +8218,15 @@
      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
      "dev": true
    },
+    "is-boolean-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.0.tgz",
+      "integrity": "sha512-a7Uprx8UtD+HWdyYwnD1+ExtTgqQtD2k/1yJgtXP6wnMm8byhkoTZRl+95LLThpzNZJ5aEvi46cdH+ayMFRwmA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0"
+      }
+    },
    "is-core-module": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
@@ -8190,6 +8263,12 @@
        "is-extglob": "^2.1.1"
      }
    },
+    "is-number-object": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.4.tgz",
+      "integrity": "sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==",
+      "dev": true
+    },
    "is-obj": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
@@ -8207,6 +8286,12 @@
      "integrity": "sha512-xj0XPvmr7bQFTvirqnFr50o0hQIh6ZItDqloxt5aJrR4NQsYeSsyFQERYGCAzfindAcnKjINnwEEgLx4IqVzQw==",
      "optional": true
    },
+    "is-string": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz",
+      "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==",
+      "dev": true
+    },
    "is-typedarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -8468,6 +8553,12 @@
      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
      "optional": true
    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
    "lodash.defaults": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
@@ -8553,6 +8644,12 @@
      "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz",
      "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0="
    },
+    "lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=",
+      "dev": true
+    },
    "logform": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/logform/-/logform-2.2.0.tgz",
@@ -9052,9 +9149,9 @@
      },
      "dependencies": {
        "@types/node": {
-          "version": "13.13.47",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.47.tgz",
-          "integrity": "sha512-R6851wTjN1YJza8ZIeX6puNBSi/ZULHVh4WVleA7q256l+cP2EtXnKbO455fTs2ytQk3dL9qkU+Wh8l/uROdKg==",
+          "version": "13.13.48",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.48.tgz",
+          "integrity": "sha512-z8wvSsgWQzkr4sVuMEEOvwMdOQjiRY2Y/ZW4fDfjfe3+TfQrZqFKOthBgk2RnVEmtOKrkwdZ7uTvsxTBLjKGDQ==",
          "optional": true
        }
      }
@@ -9335,6 +9432,11 @@
          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
        },
+        "netmask": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.0.1.tgz",
+          "integrity": "sha512-gB8eG6ubxz67c7O2gaGiyWdRUIbH61q7anjgueDqCC9kvIs/b4CTtCMaQKeJbv1/Y7FT19I4zKwYmjnjInRQsg=="
+        },
        "pac-proxy-agent": {
          "version": "4.1.0",
          "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-4.1.0.tgz",
@@ -9352,13 +9454,13 @@
          }
        },
        "pac-resolver": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-4.1.0.tgz",
-          "integrity": "sha512-d6lf2IrZJJ7ooVHr7BfwSjRO1yKSJMaiiWYSHcrxSIUtZrCa4KKGwcztdkZ/E9LFleJfjoi1yl+XLR7AX24nbQ==",
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-4.2.0.tgz",
+          "integrity": "sha512-rPACZdUyuxT5Io/gFKUeeZFfE5T7ve7cAkE5TUZRRfuKP0u5Hocwe48X7ZEm6mYB+bTB0Qf+xlVlA/RM/i6RCQ==",
          "requires": {
            "degenerator": "^2.2.0",
            "ip": "^1.1.5",
-            "netmask": "^1.0.6"
+            "netmask": "^2.0.1"
          }
        },
        "proxy-agent": {
@@ -9547,9 +9649,9 @@
      "integrity": "sha1-NipCxtMEBW1JOz8SvOq7LGV2ptQ="
    },
    "rxjs": {
-      "version": "6.6.6",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.6.tgz",
-      "integrity": "sha512-/oTwee4N4iWzAMAL9xdGKjkEHmIwupR3oXbQjCKywF1BeFohswF3vZdogbmEF6pZkOsXTzWkrZszrWpQTByYVg==",
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
      "dev": true,
      "requires": {
        "tslib": "^1.9.0"
@@ -9884,9 +9986,9 @@
      "dev": true
    },
    "stripe": {
-      "version": "8.139.0",
-      "resolved": "https://registry.npmjs.org/stripe/-/stripe-8.139.0.tgz",
-      "integrity": "sha512-3Lggs0mgy8gPzIDvLGYmx5ghQuTu+nvSUBCv9Di4FekvJ5iP7nenlrOk7A4cidF1nokamKm/bCIRYxIeDv5xYQ==",
+      "version": "8.141.0",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-8.141.0.tgz",
+      "integrity": "sha512-CRGmx1WYENj16L37TujJg+KscGn8LbYbXqRCPdaepr7BzHIdAFJfQhNfdFkShW5Z9rbmo6mA2fiAOf1S3FIoSw==",
      "requires": {
        "@types/node": ">=8.1.0",
        "qs": "^6.6.0"
@@ -10011,21 +10113,26 @@
      }
    },
    "table": {
-      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
-      "integrity": "sha512-rxZevLGTUzWna/qBLObOe16kB2RTnnbhciwgPbMMlazz1yZGVEgnZK762xyVdVznhqxrfCeBMmMkgOOaPwjH7g==",
+      "version": "6.0.9",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.0.9.tgz",
+      "integrity": "sha512-F3cLs9a3hL1Z7N4+EkSscsel3z55XT950AvB05bwayrNg5T1/gykXtigioTAjbltvbMSJvvhFCbnf6mX+ntnJQ==",
      "dev": true,
      "requires": {
-        "ajv": "^7.0.2",
-        "lodash": "^4.17.20",
+        "ajv": "^8.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.truncate": "^4.4.2",
        "slice-ansi": "^4.0.0",
        "string-width": "^4.2.0"
      },
      "dependencies": {
        "ajv": {
-          "version": "7.2.3",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-7.2.3.tgz",
-          "integrity": "sha512-idv5WZvKVXDqKralOImQgPM9v6WOdLNa0IY3B3doOjw/YxRGT8I+allIJ6kd7Uaj+SF1xZUSU+nPM5aDNBVtnw==",
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.0.2.tgz",
+          "integrity": "sha512-V0HGxJd0PiDF0ecHYIesTOqfd1gJguwQUOYfMfAWnRsWQEXfc5ifbUFhD3Wjc+O+y7VAqL+g07prq9gHQ/JOZQ==",
          "dev": true,
          "requires": {
            "fast-deep-equal": "^3.1.1",