feature/KAYA-78-Create-timesheet-queries-and-resolvers

employee-client-web/src/components/PunchHistoryItem.tsx

@@ -0,0 +1,61 @@
+import { Typography } from "@mui/material";
+import ListItem, { ListItemProps } from "@mui/material/ListItem";
+import ListItemButton, { ListItemButtonProps } from "@mui/material/ListItemButton";
+import { ListItemTextProps } from "@mui/material/ListItemText";
+import Grid2 from "@mui/material/Unstable_Grid2/Grid2";
+import { FC } from "react";
+import { FragmentType, gql, useFragment } from '../lib/gql-codegen';
+import PunchTiming, { PunchTimingProps } from "./PunchTiming";
+
+const PunchHistoryFragment = gql(`
+  fragment PunchHistory on ClockTime {
+    id
+    hourlyWage
+    earning
+    ...PunchTiming
+  }
+`);
+
+export interface PunchHistoryListItemProps extends ListItemProps {
+  children?: never;
+  readonly punchHistory: FragmentType<typeof PunchHistoryFragment>;
+  readonly listItemButtonProps?: ListItemButtonProps;
+  readonly listItemTextProps?: ListItemTextProps;
+  readonly punchTimingProps?: Omit<PunchTimingProps, 'schedule'>;
+}
+
+const PunchHistoryListItem: FC<PunchHistoryListItemProps> = ({
+  children,
+  punchHistory,
+  listItemButtonProps,
+  listItemTextProps,
+  punchTimingProps,
+  ...props
+}: PunchHistoryListItemProps) => {
+  const punchHistoryFragment = useFragment(PunchHistoryFragment, punchHistory);
+
+  return (
+    <ListItem disablePadding {...props}>
+      <ListItemButton>
+        <Grid2 container sx={{ width: '100%' }}>
+          <Grid2 xs={6}>
+            <PunchTiming
+              elevation={0}
+              punchTiming={punchHistoryFragment}
+            />
+          </Grid2>
+          <Grid2 container direction="column" alignItems="flex-end" xs={6}>
+            <Typography variant="h5" fontWeight="bold" color="text.secondary">
+              ${punchHistoryFragment.earning}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              ${punchHistoryFragment.hourlyWage}/hr
+            </Typography>
+          </Grid2>
+        </Grid2>
+      </ListItemButton>
+    </ListItem>
+  );
+}
+
+export default PunchHistoryListItem;

employee-client-web/src/components/PunchTiming.tsx

@@ -0,0 +1,49 @@
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import Paper, { PaperProps } from "@mui/material/Paper";
+import Typography, { TypographyProps } from "@mui/material/Typography";
+import Grid2 from "@mui/material/Unstable_Grid2";
+import { FC } from "react";
+import dayjs from "../lib/dayjs";
+import { FragmentType, gql, useFragment } from "../lib/gql-codegen";
+
+export const PunchTimingFragment = gql(`
+  fragment PunchTiming on ClockTime {
+    startTime
+    endTime
+  }
+`);
+
+export interface PunchTimingProps extends PaperProps {
+  readonly punchTiming: FragmentType<typeof PunchTimingFragment>;
+  readonly dateTypographyProps?: TypographyProps;
+  readonly timeTypographyProps?: TypographyProps;
+}
+
+const PunchTiming: FC<PunchTimingProps> = ({ punchTiming, dateTypographyProps, timeTypographyProps, ...props }) => {
+  const punchTimingFragment = useFragment(PunchTimingFragment, punchTiming);
+  const startDayjs = dayjs(punchTimingFragment.startTime);
+  const endDayjs = dayjs(punchTimingFragment.endTime);
+
+  return (
+    <Paper {...props} sx={{ p: 1, ...props.sx }}>
+      <Grid2 container direction='row' alignItems='center' xs={12} sm='auto'>
+        <Grid2 container direction='column' alignItems='flex-start'>
+          <Typography variant='subtitle2' {...dateTypographyProps}>{startDayjs.format("ddd, MMM D")}</Typography>
+          <Typography variant='h6' {...dateTypographyProps}>{startDayjs.format("HH:mm")}</Typography>
+          <Typography variant='caption' {...timeTypographyProps}>{startDayjs.format("A")}</Typography>
+        </Grid2>
+        <Grid2>
+          <ArrowRightIcon />
+        </Grid2>
+        <Grid2 container direction='column' alignItems='flex-start'>
+          <Typography variant='subtitle2' {...dateTypographyProps}>{endDayjs.format("ddd, MMM D")}</Typography>
+          <Typography variant='h6' {...dateTypographyProps}>{endDayjs.format("HH:mm")}</Typography>
+          <Typography variant='caption' {...timeTypographyProps}>{endDayjs.format("A")}</Typography>
+        </Grid2>
+      </Grid2>
+      <Typography variant='caption' {...timeTypographyProps}>{startDayjs.to(endDayjs, true)}</Typography>
+    </Paper>
+  )
+}
+
+export default PunchTiming;

employee-client-web/src/lib/gql-codegen/gql.ts

@@ -14,12 +14,14 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  */
 const documents = {
     "\n  fragment Profile on User {\n    email\n    firstName\n    middleName\n    lastName\n    ...Avatar\n  }\n": types.ProfileFragmentDoc,
+    "\n  fragment PunchHistory on ClockTime {\n    id\n    hourlyWage\n    earning\n    ...PunchTiming\n  }\n": types.PunchHistoryFragmentDoc,
+    "\n  fragment PunchTiming on ClockTime {\n    startTime\n    endTime\n  }\n": types.PunchTimingFragmentDoc,
     "\n  fragment ScheduleAssignment on ScheduleAssignment {\n    id\n    schedule {\n      id\n      title\n      ...ScheduleTiming\n    }\n    position {\n      id\n      title\n    }\n    user {\n      id\n      firstName\n      lastName\n    }\n  }\n": types.ScheduleAssignmentFragmentDoc,
     "\n  fragment ScheduleTiming on Schedule {\n    dateTimeStart\n    dateTimeEnd\n  }\n": types.ScheduleTimingFragmentDoc,
     "\n  fragment Timer on ClockTime {\n    startTime\n  }\n": types.TimerFragmentDoc,
     "\n  fragment Avatar on User {\n    profileIconUrl\n    firstName\n  }\n": types.AvatarFragmentDoc,
     "\n  query ListMySchedules ($options: ViewUserOptions) {\n    currentUser(options: $options) {\n      schedules {\n        ...ScheduleAssignment\n      }\n    }\n  }\n": types.ListMySchedulesDocument,
-    "\n  query ListPunches($filter: ListPunchesFilter) {\n    listPunches (filter: $filter) {\n      activePunch {\n        ...Timer\n      }\n      history {\n        id\n        startTime\n        endTime\n      }\n    }\n  }\n": types.ListPunchesDocument,
+    "\n  query ListPunches($filter: ListPunchesFilter) {\n    listPunches (filter: $filter) {\n      active {\n        ...Timer\n      }\n      history {\n        ...PunchHistory\n      }\n    }\n  }\n": types.ListPunchesDocument,
     "\n  mutation RegisterPunch {\n    registerPunch {\n      id\n      startTime\n      endTime\n    }\n  }\n": types.RegisterPunchDocument,
     "\n  query WhoAmI {\n    currentUser {\n      id\n      ...Profile\n      ...Avatar\n      organization {\n        id\n        name\n        summary\n        webUrl\n        logoUrl\n        bannerUrl\n      }\n    }\n  }\n": types.WhoAmIDocument,
 };
@@ -42,6 +44,14 @@ export function gql(source: string): unknown;
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(source: "\n  fragment Profile on User {\n    email\n    firstName\n    middleName\n    lastName\n    ...Avatar\n  }\n"): (typeof documents)["\n  fragment Profile on User {\n    email\n    firstName\n    middleName\n    lastName\n    ...Avatar\n  }\n"];
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\n  fragment PunchHistory on ClockTime {\n    id\n    hourlyWage\n    earning\n    ...PunchTiming\n  }\n"): (typeof documents)["\n  fragment PunchHistory on ClockTime {\n    id\n    hourlyWage\n    earning\n    ...PunchTiming\n  }\n"];
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(source: "\n  fragment PunchTiming on ClockTime {\n    startTime\n    endTime\n  }\n"): (typeof documents)["\n  fragment PunchTiming on ClockTime {\n    startTime\n    endTime\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -65,7 +75,7 @@ export function gql(source: "\n  query ListMySchedules ($options: ViewUserOption
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "\n  query ListPunches($filter: ListPunchesFilter) {\n    listPunches (filter: $filter) {\n      activePunch {\n        ...Timer\n      }\n      history {\n        id\n        startTime\n        endTime\n      }\n    }\n  }\n"): (typeof documents)["\n  query ListPunches($filter: ListPunchesFilter) {\n    listPunches (filter: $filter) {\n      activePunch {\n        ...Timer\n      }\n      history {\n        id\n        startTime\n        endTime\n      }\n    }\n  }\n"];
+export function gql(source: "\n  query ListPunches($filter: ListPunchesFilter) {\n    listPunches (filter: $filter) {\n      active {\n        ...Timer\n      }\n      history {\n        ...PunchHistory\n      }\n    }\n  }\n"): (typeof documents)["\n  query ListPunches($filter: ListPunchesFilter) {\n    listPunches (filter: $filter) {\n      active {\n        ...Timer\n      }\n      history {\n        ...PunchHistory\n      }\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */