Added shift clock framework + login on tech console BOD-97 BOD-188

client/src/components/time-ticket-shift-active/time-ticket-shift-active.component.jsx

@@ -0,0 +1,50 @@
+import { Card, List, Typography } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
+import DataLabel from "../data-label/data-label.component";
+import TechClockOffButton from "../tech-job-clock-out-button/tech-job-clock-out-button.component";
+
+export default function TimeTicketShiftActive({ timetickets, refetch }) {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      {timetickets.length > 0 ? (
+        <div>
+          <Typography.Title level={2}>
+            {t("timetickets.labels.shiftalreadyclockedon")}
+          </Typography.Title>
+          <List
+            grid={{
+              gutter: 32,
+              xs: 1,
+              sm: 2,
+              md: 3,
+              lg: 4,
+              xl: 5,
+              xxl: 6,
+            }}
+            dataSource={timetickets || []}
+            renderItem={(ticket) => (
+              <List.Item>
+                <Card
+                  title={t(ticket.memo)}
+                  actions={[
+                    <TechClockOffButton
+                      timeTicketId={ticket.id}
+                      completedCallback={refetch}
+                      isShiftTicket
+                    />,
+                  ]}>
+                  <DataLabel label={t("timetickets.fields.clockon")}>
+                    <DateTimeFormatter>{ticket.clockon}</DateTimeFormatter>
+                  </DataLabel>
+                </Card>
+              </List.Item>
+            )}></List>
+        </div>
+      ) : null}
+    </div>
+  );
+}