WIP Time Ticket Summary BOD-191

client/src/pages/manage/manage.page.component.jsx

@@ -118,7 +118,10 @@ const PaymentsAll = lazy(() =>
 );
 const ShiftClock = lazy(() => import("../shift-clock/shift-clock.page"));
 const Scoreboard = lazy(() =>
-  import("../scoreboard/scoreboard.page.container.jsx")
+  import("../scoreboard/scoreboard.page.container")
+);
+const TimeTicketsAll = lazy(() =>
+  import("../time-tickets/time-tickets.container")
 );
 
 const { Content } = Layout;
@@ -329,6 +332,12 @@ export function Manage({ match, conflict }) {
                 path={`${match.path}/scoreboard`}
                 component={Scoreboard}
               />
+
+              <Route
+                exact
+                path={`${match.path}/timetickets`}
+                component={TimeTicketsAll}
+              />
             </Suspense>
           )}
         </ErrorBoundary>

client/src/pages/time-tickets/time-tickets.container.jsx

@@ -0,0 +1,62 @@
+import { useQuery } from "@apollo/react-hooks";
+import moment from "moment";
+import queryString from "query-string";
+import React, { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+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 { QUERY_TIME_TICKETS_IN_RANGE } from "../../graphql/timetickets.queries";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
+
+const mapStateToProps = createStructuredSelector({});
+
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+
+export function TimeTicketsContainer({ bodyshop, setBreadcrumbs }) {
+  const { t } = useTranslation();
+  useEffect(() => {
+    document.title = t("titles.timetickets");
+    setBreadcrumbs([
+      {
+        link: "/manage/timetickets",
+        label: t("titles.bc.timetickets"),
+      },
+    ]);
+  }, [t, setBreadcrumbs]);
+
+  const searchParams = queryString.parse(useLocation().search);
+  const { start, end } = searchParams;
+
+  const { loading, error, data } = useQuery(QUERY_TIME_TICKETS_IN_RANGE, {
+    variables: {
+      start: start ? moment(start) : moment().startOf("week").subtract(7),
+      end: end ? moment(end) : moment().endOf("week"),
+    },
+  });
+
+  return (
+    <div>
+      <TimeTicketsDatesSelector />
+
+      <TimeTicketList
+        loading={loading}
+        timetickets={data ? data.timetickets : []}
+      />
+      <TimeTicketsSummary
+        loading={loading}
+        timetickets={data ? data.timetickets : []}
+      />
+    </div>
+  );
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(TimeTicketsContainer);