-
+
{
{...props}
onChange={handleChange}
required={required}
- className={`form-control ${meta.touched && meta.error && 'is-invalid'}`}
+ className={`form-control ${meta.touched && meta.error && "is-invalid"}`}
+ autoComplete="off"
/>
{meta.touched && meta.error && (
{meta.error}
diff --git a/roadside-forms-frontend/frontend_web_app/src/components/common/Input/TimeInputField.js b/roadside-forms-frontend/frontend_web_app/src/components/common/Input/TimeInputField.js
index bce061d62..fe854951e 100644
--- a/roadside-forms-frontend/frontend_web_app/src/components/common/Input/TimeInputField.js
+++ b/roadside-forms-frontend/frontend_web_app/src/components/common/Input/TimeInputField.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { useField } from 'formik';
+import React from "react";
+import { useField } from "formik";
export const TimeInputField = ({ required, label, ...props }) => {
const [field, meta, helpers] = useField(props.name);
@@ -13,20 +13,21 @@ export const TimeInputField = ({ required, label, ...props }) => {
const formatTime = (value) => {
// Remove any non-digit characters
- const digitsOnly = value.replace(/\D/g, '');
+ const digitsOnly = value.replace(/\D/g, "");
- // Ensure the value has at most 4 digits
+ // Ensure the value has at most 4 digits
const formattedValue = digitsOnly.slice(0, 4);
-
return formattedValue;
};
return (
-
+
{
value={field.value}
onChange={handleInputChange}
required={required}
- className={`form-control ${meta.touched && meta.error && 'is-invalid'}`}
+ className={`form-control ${meta.touched && meta.error && "is-invalid"}`}
+ autoComplete="off"
/>
- {meta.touched && meta.error ?
{meta.error}
: null}
+ {meta.touched && meta.error ? (
+
{meta.error}
+ ) : null}
);
};
diff --git a/roadside-forms-frontend/frontend_web_app/src/components/common/Input/phoneField.js b/roadside-forms-frontend/frontend_web_app/src/components/common/Input/phoneField.js
index 7ee407b11..9a4620abc 100644
--- a/roadside-forms-frontend/frontend_web_app/src/components/common/Input/phoneField.js
+++ b/roadside-forms-frontend/frontend_web_app/src/components/common/Input/phoneField.js
@@ -1,58 +1,64 @@
-import React from 'react';
-import { useField } from 'formik';
-import PropTypes from 'prop-types';
+import React from "react";
+import { useField } from "formik";
+import PropTypes from "prop-types";
export const PhoneField = ({ label, required, ...props }) => {
- const [field, meta] = useField(props);
+ const [field, meta] = useField(props);
- const handlePhoneChange = (event) => {
- const phone = event.target.value;
- const formattedPhone = formatPhoneNumber(phone);
-
- field.onChange({
- target: {
- name: event.target.name,
- value: formattedPhone,
- },
- });
- };
-
- const formatPhoneNumber = (phone) => {
- // Example: Format as ###-###-####
- const cleaned = phone.replace(/[^0-9]/g, '');
- const match = cleaned.match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
- if (!match) {
- return '';
- }
-
- const formatted = [match[1], match[2], match[3]].filter((group) => !!group).join('-');
- return formatted;
- };
-
- return (
-
-
-
- {meta.touched && meta.error ? (
-
{meta.error}
- ) : null}
-
- );
+ const handlePhoneChange = (event) => {
+ const phone = event.target.value;
+ const formattedPhone = formatPhoneNumber(phone);
+
+ field.onChange({
+ target: {
+ name: event.target.name,
+ value: formattedPhone,
+ },
+ });
};
-
- PhoneField.propTypes = {
- label: PropTypes.string.isRequired,
+
+ const formatPhoneNumber = (phone) => {
+ // Example: Format as ###-###-####
+ const cleaned = phone.replace(/[^0-9]/g, "");
+ const match = cleaned.match(/^(\d{0,3})(\d{0,3})(\d{0,4})$/);
+ if (!match) {
+ return "";
+ }
+
+ const formatted = [match[1], match[2], match[3]]
+ .filter((group) => !!group)
+ .join("-");
+ return formatted;
};
-
\ No newline at end of file
+
+ return (
+
+
+
+ {meta.touched && meta.error ? (
+
{meta.error}
+ ) : null}
+
+ );
+};
+
+PhoneField.propTypes = {
+ label: PropTypes.string.isRequired,
+};
diff --git a/roadside-forms-frontend/frontend_web_app/src/utils/commonStyles.scss b/roadside-forms-frontend/frontend_web_app/src/utils/commonStyles.scss
index 69c77e33b..3068ec6aa 100644
--- a/roadside-forms-frontend/frontend_web_app/src/utils/commonStyles.scss
+++ b/roadside-forms-frontend/frontend_web_app/src/utils/commonStyles.scss
@@ -1,95 +1,95 @@
$primary: #003366; // Change this to your desired primary color
// Import Bootstrap and its dependencies
-@import '~bootstrap/scss/bootstrap';
+@import "~bootstrap/scss/bootstrap";
-.base-class{
- border: 1px solid black;
- color: black;
- border-radius: 0.2rem;
- text-align: center;
+.base-class {
+ border: 1px solid black;
+ color: black;
+ border-radius: 0.2rem;
+ text-align: center;
}
.slim-button {
- padding: 0.15rem 1.0rem;
- font-size: 0.875rem;
- }
+ padding: 0.15rem 1rem;
+ font-size: 0.875rem;
+}
-.text-font{
- font-family: Avenir, Helvetica, Arial, sans-serif;
- font-size: large;
+.text-font {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ font-size: large;
}
-.border-design{
- @extend .base-class;
- background-color: #F2F2F2;
- margin: 2rem;
- padding: 2rem;
+.border-design {
+ @extend .base-class;
+ background-color: #f2f2f2;
+ margin: 2rem;
+ padding: 2rem;
}
-.outline{
- @extend .base-class;
- margin: 2rem;
- padding: 2rem;
+.outline {
+ @extend .base-class;
+ margin: 2rem;
+ padding: 2rem;
}
-.border-design-form{
- @extend .base-class;
- background-color: #F2F2F2;
- margin: 1rem;
- padding: 1rem;
+.border-design-form {
+ @extend .base-class;
+ background-color: #f2f2f2;
+ margin: 1rem;
+ padding: 1rem;
}
-.error-message{
- color: #D8292F;
+.error-message {
+ color: #d8292f;
}
-.required-asterisk{
- color: #D8292F;
+.required-asterisk {
+ color: #d8292f;
}
-.field-width{
- width: 100%;
+.field-width {
+ width: 100%;
}
.field-height {
- height: 40px;
- }
+ height: 40px;
+}
.text-area-height {
- height: 150px;
- }
+ height: 150px;
+}
-.right{
- text-align: right;
+.right {
+ text-align: right;
}
-.left{
- text-align: left;
+.left {
+ text-align: left;
}
-.center{
- text-align: center;
+.center {
+ text-align: center;
}
-.flex{
- display: flex;
+.flex {
+ display: flex;
}
-.textArea{
- width: 120px;
- height:25px;
- text-align: left;
+.textArea {
+ width: 120px;
+ height: 100%;
+ text-align: left;
}
::-webkit-scrollbar {
- width: 2em;
- height: 2em;
+ width: 2em;
+ height: 2em;
}
::-webkit-scrollbar-button {
- background: #ccc;
+ background: #ccc;
}
::-webkit-scrollbar-thumb {
- background: #eee;
+ background: #eee;
}
::-webkit-scrollbar-track-piece {
- background: #888;
-}
\ No newline at end of file
+ background: #888;
+}
diff --git a/roadside-forms-frontend/frontend_web_app/src/utils/helpers.js b/roadside-forms-frontend/frontend_web_app/src/utils/helpers.js
index 7555f655b..3ae2e06f2 100644
--- a/roadside-forms-frontend/frontend_web_app/src/utils/helpers.js
+++ b/roadside-forms-frontend/frontend_web_app/src/utils/helpers.js
@@ -7,6 +7,7 @@ import twentyFourHourDriverform from "../assets/MV2634E_101223_driver.png";
import twentyFourHourILOform from "../assets/MV2634E_101223_ilo.png";
import twentyFourHourPoliceform from "../assets/MV2634E_101223_police.png";
import viDriverForm from "../assets/MV2721_201502.png";
+import viIncidentDetails from "../assets/MV2722_201502_Incident_Details.png";
import appealsForm from "../assets/MV2721_201502_appeal.png";
import viReportForm from "../assets/MV2722_201502.png";
import twelveHourDriverForm from "../assets/TwelveHourDriverCopy.png";
@@ -148,6 +149,7 @@ export const formsPNG = {
VI: {
POLICE: { png: viDriverForm, aspectClass: "--portrait" },
REPORT: { png: viReportForm, aspectClass: "--portrait" },
+ DETAILS: { png: viIncidentDetails, aspectClass: "--portrait" },
},
},
};
@@ -317,6 +319,19 @@ export const printFormatHelper = (values, data, key) => {
}
}
+ if (
+ key === "REPORT_INCIDENT_DETAILS" &&
+ values["incident_details_extra_page"]
+ ) {
+ val = "";
+ }
+ if (
+ key === "DETAILS_INCIDENT_DETAILS" &&
+ !values["incident_details_extra_page"]
+ ) {
+ val = "";
+ }
+
return val;
};