[M1_TR-199] Markup for M1_TR-7

web/.eslintrc.js

@@ -2,5 +2,6 @@ module.exports = {
   extends: ["eslint:recommended"],
   rules: {
     "no-undef": "off",
+    "no-unused-vars": "off"
   },
 };

web/package.json

@@ -14,14 +14,17 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.6",
     "@mui/material": "^5.14.3",
+    "@mui/x-date-pickers": "^6.12.1",
     "@types/node": "20.4.8",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
     "eslint-config-next": "13.4.12",
     "jest-junit": "^16.0.0",
+    "moment": "^2.29.4",
     "next": "13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.46.1",
     "typescript": "5.1.6"
   },
   "devDependencies": {

web/src/app/job/detail/context.tsx

@@ -0,0 +1,86 @@
+import { FormValues } from "@/utils/constants/FormInitialDummyValues";
+import {
+  CustomerFormType,
+  FormValuesType,
+  InformationFormType,
+  ScheduleFormType,
+} from "@/utils/interfaces";
+import React, { useState, ReactNode, createContext, useContext } from "react";
+
+// Create the context
+const JobDetailContext = createContext({
+  // For Job Customer Section
+  customerDetails: FormValues.customer_registration,
+  setCustomerDetails: (newButtonState: CustomerFormType) => {
+    useState<CustomerFormType>(newButtonState);
+  },
+
+  // For Job Information Section
+  informationDetails: FormValues.job_information,
+  setInformationDetails: (newJobInformation: InformationFormType) => {
+    useState<InformationFormType>(newJobInformation);
+  },
+
+  // For Job Schedule
+  scheduleDetails: FormValues.work_schedule,
+  setScheduleDetails: (newSchedule: ScheduleFormType[]) => {
+    useState<ScheduleFormType[]>(newSchedule);
+  },
+
+  // For Final object
+  formValues: FormValues,
+  setFormValues: (newFormValue: FormValuesType) => {
+    useState<FormValuesType>(newFormValue);
+  },
+
+  // For Update button state
+  buttonState: false,
+  setButtonState: (newButtonState: boolean) => {
+    useState<boolean>(newButtonState);
+  },
+});
+
+// Create a provider component
+const JobDetailContextProvider = ({ children }: { children: ReactNode }) => {
+  const { customer_registration, job_information, work_schedule } = FormValues;
+
+  const [customerDetails, setCustomerDetails] = useState<CustomerFormType>(
+    customer_registration
+  );
+  const [informationDetails, setInformationDetails] =
+    useState<InformationFormType>(job_information);
+  const [scheduleDetails, setScheduleDetails] =
+    useState<ScheduleFormType[]>(work_schedule);
+  const [buttonState, setButtonState] = useState<boolean>(false);
+  const [formValues, setFormValues] = useState<FormValuesType>(FormValues);
+
+  return (
+    <JobDetailContext.Provider
+      value={{
+        formValues,
+        buttonState,
+        setFormValues,
+        setButtonState,
+        scheduleDetails,
+        customerDetails,
+        informationDetails,
+        setScheduleDetails,
+        setCustomerDetails,
+        setInformationDetails,
+      }}
+    >
+      {children}
+    </JobDetailContext.Provider>
+  );
+};
+
+export { JobDetailContext, JobDetailContextProvider };
+
+export function useJobDetailContext() {
+  const context = useContext(JobDetailContext);
+  if (!context) {
+    throw new Error("Custom hook in JobDetailContextProvider");
+  }
+
+  return context;
+}

web/src/app/job/detail/hooks.tsx

@@ -0,0 +1,75 @@
+import {
+  CustomerFormType,
+  FormValuesType,
+  InformationFormType,
+  ScheduleFormType,
+} from "@/utils/interfaces";
+import { usePathname } from "next/navigation";
+import { Link, Typography } from "@mui/material";
+import { Dispatch, SetStateAction } from "react";
+
+export const breadCrumbs = (): JSX.Element[] => {
+  const pathname = usePathname();
+
+  const pathArray = pathname.split("/").map((crumb, index, array) => {
+    if (index === 0) return "Home";
+    if (index === array.length - 1) return "Job Detail";
+    return crumb;
+  });
+
+  return pathArray.map((breadcrumb, index) =>
+    index === pathArray.length - 1 ? (
+      <Typography key={index} color="text.primary">
+        {breadcrumb}
+      </Typography>
+    ) : (
+      <Link
+        key={index}
+        underline="hover"
+        color="inherit"
+        href={`/${breadcrumb.toLowerCase() === "home" ? "#" : breadcrumb}`}
+      >
+        {breadcrumb}
+      </Link>
+    )
+  );
+};
+
+export const handleCustomerData = (
+  data: CustomerFormType,
+  setButtonState: Dispatch<SetStateAction<boolean>>,
+  formValues: FormValuesType,
+  setFormValues: Dispatch<SetStateAction<FormValuesType>>
+): void => {
+  setButtonState(true);
+  setFormValues({
+    ...formValues,
+    ["customer_registration"]: data,
+  });
+};
+
+export const handleJobDetailData = (
+  data: InformationFormType,
+  setButtonState: Dispatch<SetStateAction<boolean>>,
+  formValues: FormValuesType,
+  setFormValues: Dispatch<SetStateAction<FormValuesType>>
+) => {
+  setButtonState(true);
+  setFormValues({
+    ...formValues,
+    ["job_information"]: data,
+  });
+};
+
+export const handleWorkScheduleData = (
+  data: ScheduleFormType,
+  setButtonState: Dispatch<SetStateAction<boolean>>,
+  formValues: FormValuesType,
+  setFormValues: Dispatch<SetStateAction<FormValuesType>>
+) => {
+  setButtonState(true);
+  setFormValues({
+    ...formValues,
+    ["work_schedule"]: [data],
+  });
+};

web/src/app/job/detail/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import React from "react";
+import { Box, Typography } from "@mui/material";
+import { BreadcrumbsSection } from "@/components/organisms/BreadCrumbsSection";
+
+import { breadCrumbs } from "./hooks";
+import { JobDetailContextProvider } from "./context";
+import { SubmitButton } from "@/components/organisms/SubmitButton";
+import JobDetailSection from "@/components/organisms/UpdateJobDetailSection";
+import JobWorkScheduleSection from "@/components/organisms/UpdateJobScheduleSection";
+import JobCustomerSection from "../../../components/organisms/UpdateJobCustomerSection";
+
+export default function Job() {
+  return (
+    <JobDetailContextProvider>
+      <form>
+        <Box
+          sx={{
+            gap: "24px",
+            width: "960px",
+            display: "flex",
+            paddingX: "24px",
+            paddingY: "16px",
+            flexDirection: "column",
+          }}
+        >
+          <BreadcrumbsSection crumbs={breadCrumbs()} />
+
+          <Typography variant="h1">Job Detail</Typography>
+          <JobCustomerSection />
+          <JobDetailSection />
+          <JobWorkScheduleSection />
+
+          <SubmitButton />
+        </Box>
+      </form>
+    </JobDetailContextProvider>
+  );
+}

web/src/app/job/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import React from "react";
+import { Box, Button, Typography } from "@mui/material";
+
+import JobCustomerSection from "../../components/organisms/JobCustomerSection";
+import JobInformationSection from "../../components/organisms/JobInformationSection";
+import JobWorkScheduleSection from "../../components/organisms/JobWorkScheduleSection";
+
+export default function Job() {
+    const handleSubmit = () => {
+        console.log("submitted form");
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <Box
+                sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "24px",
+                    paddingX: "24px",
+                    paddingY: "16px",
+                    width: "960px",
+                }}
+            >
+                <Typography variant="h1">Job Creation</Typography>
+
+                <JobCustomerSection />
+                <JobInformationSection />
+                <JobWorkScheduleSection />
+
+                <Box>
+                    <Button onClick={handleSubmit} variant="contained" color="primary" size="large">
+                        SUBMIT
+                    </Button>
+                </Box>
+            </Box>
+        </form>
+    );
+}

web/src/assets/theme.ts

@@ -93,6 +93,9 @@ const customDefaultFontFamily = {
 export const theme = createTheme({
   palette: { ...customColors },
   typography: {
+    button: {
+      textTransform: 'none',
+    },
     allVariants: {
       ...customDefaultFontFamily,
       color: customColors.dark,
@@ -213,3 +216,13 @@ export const theme = createTheme({
     },
   },
 });
+
+declare module '@mui/material/TextField' {
+  interface TextFieldPropsColorOverrides {
+    light: true;
+    dark: true;
+    neutral: true;
+    disabled: true;
+    white: true;
+  }
+}

web/src/components/molecules/ModeOfPaymentsRadioGroup.tsx

@@ -0,0 +1,46 @@
+import {
+  Radio,
+  FormLabel,
+  RadioGroup,
+  FormControl,
+  FormControlLabel,
+  SelectChangeEvent,
+} from "@mui/material";
+
+import { ModeOfPaymentEnum } from "../../utils/constants/ModeOfPaymentEnum";
+import { FC } from "react";
+
+type Props = {
+  defaultMOP?: string;
+  onChange?: (e: SelectChangeEvent) => void;
+};
+
+const ModeOfPaymentsRadioGroup: FC<Props> = ({ defaultMOP, onChange }) => {
+  const modeOfPayments = Object.values(ModeOfPaymentEnum);
+
+  return (
+    <FormControl>
+      <FormLabel id="demo-row-radio-buttons-group-label">
+        Method of Payment *
+      </FormLabel>
+      <RadioGroup
+        row
+        aria-labelledby="demo-controlled-radio-buttons-group"
+        name="row-radio-buttons-group"
+        value={defaultMOP}
+        onChange={onChange}
+      >
+        {modeOfPayments.map((mop: string, index) => (
+          <FormControlLabel
+            key={index}
+            value={mop}
+            label={mop}
+            control={<Radio />}
+          />
+        ))}
+      </RadioGroup>
+    </FormControl>
+  );
+};
+
+export default ModeOfPaymentsRadioGroup;

web/src/components/molecules/PersonInChargeSelectDropdown.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from "react";
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  SelectChangeEvent,
+} from "@mui/material";
+import { users } from "../organisms/UpdateJobDetailSection/hooks";
+
+type Props = {
+  personInChargeId?: number;
+  onChange?: (e: SelectChangeEvent) => void;
+};
+
+const PersonInChargeSelectDropdown: FC<Props> = ({
+  personInChargeId,
+  onChange,
+}) => {
+  return (
+    <FormControl fullWidth>
+      <InputLabel id="person-in-charge">Person in Charge *</InputLabel>
+      <Select
+        labelId="person-in-charge"
+        id="person-in-charge"
+        value={`${personInChargeId}`}
+        label="Person in Charge *"
+        onChange={onChange}
+      >
+        {users.map((user) => (
+          <MenuItem key={user.id} value={user.id}>
+            {user.firstName}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+export default PersonInChargeSelectDropdown;