COMP-551:Violation Ticket (#515)

* COMP-551:Violation Ticket

UI Fixes

* COMP-551:Violation Ticket

Linting issue fixes

* Restorative Justice UI Fix

* COMP-551:Violation Ticket

Code review changes

Author: don-aot

compliance-web/src/components/App/Inspections/Profile/Enforcements/RestorativeJustice/RestorativeJusticeUpdateModal.tsx

@@ -119,7 +119,7 @@ const RestorativeJusticeUpdateModal: FC<RestorativeJusticeUpdateModalProps> = ({
                 type="text"
                 fullWidth
                 multiline
-                rows={1}
+                minRows={1}
                 disabled={isReadonlyMode}
               />
             </Box>

compliance-web/src/components/App/Inspections/Profile/Enforcements/ViolationTicket/ViolationTicketCreateModal.tsx

@@ -3,34 +3,42 @@ import { FormProvider, useForm } from "react-hook-form";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useQueryClient } from "@tanstack/react-query";
-import { Box, DialogContent, Typography } from "@mui/material";
-import ModalTitleBar from "@/components/Shared/Modals/ModalTitleBar";
-import ModalActions from "@/components/Shared/Modals/ModalActions";
-import ControlledAutoComplete from "@/components/Shared/Controlled/ControlledAutoComplete";
-import ControlledTextField from "@/components/Shared/Controlled/ControlledTextField";
-import { InspectionRequirement } from "@/models/InspectionRequirement";
-import { BCDesignTokens } from "epic.theme";
-import { useModal } from "@/store/modalStore";
+import EnforcementModal from "@/components/App/Inspections/Profile/Enforcements/EnforcementModal";
 import {
   baseEnforcementSchema,
   getDefaultFormValues,
   ENFORCEMENT_MESSAGES,
+  BaseEnforcementFormType,
 } from "@/components/App/Inspections/Profile/Enforcements/EnforcementUtils";
+import ControlledTextField from "@/components/Shared/Controlled/ControlledTextField";
 import { useCreateViolationTicket } from "@/hooks/useViolationTickets";
 import {
   ViolationTicket,
   ViolationTicketAPIData,
 } from "@/models/ViolationTicket";
 import { Inspection } from "@/models/Inspection";
+import { InspectionRequirement } from "@/models/InspectionRequirement";
 import { notify } from "@/store/snackbarStore";
-import ViolationTicketUpdateModal from "./ViolationTicketUpdateModal";
-import { MODAL_WIDTHS } from "@/utils/constants";
+
 const violationTicketSchema = baseEnforcementSchema.shape({
   ticket_number: yup.string().required("Ticket Number is required").trim(),
 });
 
 type ViolationTicketFormType = yup.InferType<typeof violationTicketSchema>;
 
+const ViolationTicketFormFields = () => {
+  return (
+    <ControlledTextField
+      name="ticket_number"
+      label="Ticket #"
+      placeholder="Enter ticket number"
+      type="text"
+      fullWidth
+      sx={{ mt: 2 }}
+    />
+  );
+};
+
 type ViolationTicketCreateModalProps = {
   inspectionData: Inspection;
   requirementsList: InspectionRequirement[];
@@ -45,13 +53,12 @@ const ViolationTicketCreateModal: FC<ViolationTicketCreateModalProps> = ({
   onSubmit,
 }) => {
   const queryClient = useQueryClient();
-  const { setOpen: setModalOpen, setClose: setModalClose } = useModal();
 
   const defaultValues = useMemo(() => {
-    const baseValues = getDefaultFormValues(requirement, false);
+    const baseValues = getDefaultFormValues(requirement, false, undefined);
     return {
       ...baseValues,
-      ticket_number: undefined,
+      ticket_number: "",
     };
   }, [requirement]);
 
@@ -61,8 +68,7 @@ const ViolationTicketCreateModal: FC<ViolationTicketCreateModalProps> = ({
     defaultValues,
   });
 
-  const { reset, handleSubmit, watch } = methods;
-  const selectedRequirements = watch("requirements") as InspectionRequirement[];
+  const { reset } = methods;
 
   useEffect(() => {
     reset(defaultValues);
@@ -72,123 +78,45 @@ const ViolationTicketCreateModal: FC<ViolationTicketCreateModalProps> = ({
     queryClient.invalidateQueries({
       queryKey: ["inspection-violation-tickets", inspectionData.id],
     });
-    notify.success(ENFORCEMENT_MESSAGES.VIOLATION_TICKET_CREATED(data.vt_number || ""));
+    notifyAndSubmit(data);
+  };
 
-    setModalClose();
-
-    setTimeout(() => {
-      setModalOpen({
-        content: (
-          <ViolationTicketUpdateModal
-            violationTicket={data}
-            inspectionData={inspectionData}
-            onSuccess={(updatedData) => {
-              onSubmit(updatedData);
-            }}
-          />
-        ),
-        width: MODAL_WIDTHS.VIOLATION_TICKET
-      });
-    }, 100);
+  const notifyAndSubmit = (data: ViolationTicket) => {
+    notify.success(ENFORCEMENT_MESSAGES.VIOLATION_TICKET_CREATED(data.vt_number || ""));
+    onSubmit(data);
   };
 
   const { mutate: createViolationTicket, isPending: isPendingViolationTicket } =
     useCreateViolationTicket(onSuccess);
 
-  const handleSubmitForm = useCallback(
-    (data: ViolationTicketFormType) => {
-
+  const handleBaseSubmit = useCallback(
+    (data: BaseEnforcementFormType) => {
+      // Get the ticket number from the form context since EnforcementModal only handles base schema
+      const ticketNumber = methods.getValues("ticket_number") || "";
+      
       const violationTicketData: ViolationTicketAPIData = {
         inspection_id: inspectionData?.id ?? 0,
-        inspection_requirement_ids: (
-          data.requirements as InspectionRequirement[]
-        ).map((requirement) => requirement.id),
-        ticket_number: data.ticket_number || "", 
+        inspection_requirement_ids: (data.requirements as InspectionRequirement[]).map((requirement) => requirement.id),
+        ticket_number: ticketNumber,
       };
 
       createViolationTicket({
         violationTicket: violationTicketData,
       });
     },
-    [createViolationTicket, inspectionData]
+    [createViolationTicket, inspectionData, methods]
   );
 
-  const handleCancel = () => {
-    setModalClose();
-  };
-
   return (
     <FormProvider {...methods}>
-      <form onSubmit={handleSubmit(handleSubmitForm)}>
-        <ModalTitleBar title="Create Violation Ticket" />
-        <DialogContent dividers sx={{ p: 0 }}>
-          <Box sx={{ p: "1rem 1.5rem" }}>
-            <ControlledAutoComplete
-              name="requirements"
-              label="Select Requirements"
-              options={requirementsList ?? []}
-              getOptionLabel={(option) => {
-                return `Requirement ${option.sort_order}`;
-              }}
-              getOptionKey={(option) => option.id}
-              isOptionEqualToValue={(option, value) => option.id === value.id}
-              fullWidth
-              multiple
-              disabled={!requirementsList?.length}
-              sx={{ mb: 2 }}
-            />
-            {selectedRequirements?.map((requirement) => (
-              <Box
-                key={requirement.id}
-                sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 1,
-                  p: 1.5,
-                  mb: 1.5,
-                  borderRadius: BCDesignTokens.layoutBorderRadiusMedium,
-                  background: BCDesignTokens.surfaceColorBackgroundLightBlue,
-                }}
-              >
-                <Typography variant="caption" fontWeight={700}>
-                  Requirement {requirement.sort_order}
-                </Typography>
-                <Typography variant="subtitle2">
-                  {requirement.summary}
-                </Typography>
-              </Box>
-            ))}
-            <ControlledTextField
-              name="ticket_number"
-              label="Ticket #"
-              placeholder="Enter ticket number"
-              type="text"
-              fullWidth
-              sx={{ mb: 2 }}
-            />
-          </Box>
-          {selectedRequirements?.length > 1 && (
-            <Box
-              sx={{
-                p: "1rem 1.5rem",
-                backgroundColor: BCDesignTokens.supportSurfaceColorWarning,
-                borderTop: `1px solid ${BCDesignTokens.supportBorderColorWarning}`,
-              }}
-            >
-              <Typography variant="body2" color="warning.main">
-                <strong>Note:</strong> You have selected multiple requirements. A single Violation Ticket will be created for all selected requirements.
-              </Typography>
-            </Box>
-          )}
-        </DialogContent>
-        <ModalActions
-          onSecondaryAction={handleCancel}
-          onPrimaryAction={handleSubmit(handleSubmitForm)}
-          isLoading={isPendingViolationTicket}
-          primaryActionButtonText="Create"
-          secondaryActionButtonText="Cancel"
-        />
-      </form>
+      <EnforcementModal
+        requirementsList={requirementsList}
+        requirement={requirement}
+        title="Create Violation Ticket"
+        onSubmit={handleBaseSubmit}
+        isLoading={isPendingViolationTicket}
+        additionalFormFields={<ViolationTicketFormFields />}
+      />
     </FormProvider>
   );
 };

compliance-web/src/components/App/Inspections/Profile/Enforcements/ViolationTicket/ViolationTicketUpdateModal.tsx

@@ -1,4 +1,5 @@
-import { Box } from "@mui/material";
+import { Box, DialogContent } from "@mui/material";
+import { AttachMoneyRounded } from "@mui/icons-material";
 import { FC, useCallback, useEffect, useMemo } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import * as yup from "yup";
@@ -146,65 +147,66 @@ const ViolationTicketUpdateModal: FC<ViolationTicketUpdateModalProps> = ({
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(handleSubmitForm)}>
         <ModalTitleBar title="Violation Ticket" />
-        <Box sx={{ p: "1rem 1.5rem" }}>
-
-
-          <Box sx={{ display: "flex", gap: 1 }}>
-            <ControlledDateField
-              name="date_issued"
-              label="Date Issued"
-              sx={{ width: "50%" }}
-              disabled={isReadonlyMode}
-            />
-            <ControlledTextField
-              name="ticket_number"
-              label="Ticket #"
-              placeholder="Enter ticket number"
-              sx={{ width: "100%" }}
-              disabled
-            />
-
-          </Box>
-
-          <Box sx={{ display: "flex", gap: 1 }}>
-
-            <ControlledTextField
-              name="fine_amount"
-              label="Fine Amount"
-              type="number"
-              sx={{ width: "100%" }}
-              inputProps={{
-                min: 0,
-                step: 0.01,
-              }}
-              InputProps={{
-                startAdornment: <span style={{ color: 'rgba(0, 0, 0, 0.38)', marginRight: '2px' }}>$</span>,
-              }}
-              disabled={isReadonlyMode}
-            />
-            <ControlledAutoComplete
-              name="status"
-              label="Status"
-              options={statusOptions}
-              getOptionLabel={(option) => option.name}
-              isOptionEqualToValue={(option, value) => option.id === value.id}
-              placeholder="Select status"
-              sx={{ width: "100%" }}
-              disabled={isReadonlyMode}
-            />
-
+        <DialogContent dividers sx={{ p: 0 }}>
+          <Box sx={{ p: "1rem 1.5rem" }}>
+            <Box sx={{ display: "flex", gap: 1 }}>
+              <ControlledDateField
+                name="date_issued"
+                label="Date Issued"
+                sx={{ width: "50%" }}
+                isRequired={true}
+                disabled={isReadonlyMode}
+              />
+              <ControlledTextField
+                name="ticket_number"
+                label="Ticket #"
+                placeholder="Enter ticket number"
+                sx={{ width: "100%" }}
+                disabled
+              />
+            </Box>
+
+            <Box sx={{ display: "flex", gap: 1 }}>
+              <ControlledTextField
+                name="fine_amount"
+                label="Fine Amount"
+                type="number"
+                sx={{ width: "100%" }}
+                inputProps={{
+                  min: 0,
+                  step: 0.01,
+                }}
+                InputProps={{
+                  startAdornment: <AttachMoneyRounded sx={{
+                    mr: 0.2,
+                    color: "#9F9D9C",
+                  }} />,
+                }}
+                isRequired={true}
+                disabled={isReadonlyMode}
+              />
+              <ControlledAutoComplete
+                name="status"
+                label="Status"
+                options={statusOptions}
+                getOptionLabel={(option) => option.name}
+                isOptionEqualToValue={(option, value) => option.id === value.id}
+                placeholder="Select status"
+                sx={{ width: "100%" }}
+                disabled={isReadonlyMode}
+              />
+            </Box>
+            <Box sx={{ display: "flex", gap: 1 }}>
+              <ControlledDateField
+                name="status_date"
+                label="Status Date"
+                sx={{ width: "100%" }}
+                isRequired={true}
+                disabled={isReadonlyMode}
+              />
+            </Box>
           </Box>
-          <Box sx={{ display: "flex", gap: 1 }}>
-            <ControlledDateField
-              name="status_date"
-              label="Status Date"
-              sx={{ width: "100%" }}
-              disabled={isReadonlyMode}
-            />
-
-          </Box>
-
-        </Box>
+        </DialogContent>
         {!isReadonlyMode && (
           <ModalActions
             onSecondaryAction={handleCancel}