diff --git a/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx b/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx
index 6163d9a..c8eb7dd 100644
--- a/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx
+++ b/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { getQuarterPeriods, getPreviousForecastData } from '@/services/submissions/submissionService';
import {
fetchVariationReasons,
fetchZeroTargetReasons,
@@ -12,9 +13,17 @@ const calendarIcon = '/assets/images/Duedate.svg';
const nextIcon = '/assets/images/mdi_page-next-outline.svg';
const trashActiveSrc = '/assets/images/Trash - active.svg';
-const Input = ({ placeholder = '', type = 'text', value = '', onChange = () => {}, required = false }) => {
+const Input = ({ placeholder = '', type = 'text', value = '', onChange = () => {}, required = false, error = false }) => {
const [isFocused, setIsFocused] = React.useState(false);
- const borderColor = value || isFocused ? 'border-[#92722A]' : 'border-[#CBA344]';
+ let borderColor = 'border-[#CBA344]';
+ let bgColor = 'bg-white';
+
+ if (error) {
+ borderColor = 'border-red-500';
+ bgColor = 'bg-red-50';
+ } else if (value || isFocused) {
+ borderColor = 'border-[#92722A]';
+ }
return (
@@ -26,7 +35,7 @@ const Input = ({ placeholder = '', type = 'text', value = '', onChange = () => {
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
required={required}
- className={`block w-full h-10 rounded-md border-2 ${borderColor} focus:ring-0 px-4 text-sm bg-white transition-colors [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`}
+ className={`block w-full h-10 rounded-md border-2 ${borderColor} focus:ring-0 px-4 text-sm ${bgColor} transition-colors [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`}
/>
);
@@ -38,24 +47,32 @@ const Select = ({
value = '',
onChange,
loading = false,
- disabled = false
+ disabled = false,
+ error = false,
+ className = ''
}) => {
const [isFocused, setIsFocused] = React.useState(false);
+ let borderColor = 'border-[#CBA344]';
+ let bgColor = 'bg-white';
+
+ if (error) {
+ borderColor = 'border-red-500';
+ bgColor = 'bg-red-50';
+ } else if (value || isFocused) {
+ borderColor = 'border-[#92722A]';
+ }
+
return (
)}
- Step 2: Product Data — Monthly Output & Cost
+
+
Step 2: Product Data — Monthly Output & Cost
+ {(quarter || year) && (
+
+ Current Quarter: Q{quarter}-{year}
+
+ )}
+
{!showInfoCard && (