From 8eee109297640e8083bf7e74fe8c3875edbb8e8b Mon Sep 17 00:00:00 2001 From: Malini Date: Thu, 13 Nov 2025 13:53:14 +0530 Subject: [PATCH] chnages in product details --- .../components/overview/DetailedOverview.jsx | 38 +- .../components/overview/ProductDetails.jsx | 156 ++++++-- .../EstablishmentInfo/EstablishmentInfo.jsx | 21 ++ .../survey/ProductData/ProductData.jsx | 181 +++++++--- .../survey/ReviewSubmit/ReviewSubmit.jsx | 116 +++++- .../src/pages/Survey/Survey.jsx | 341 ++++++++++++------ 6 files changed, 646 insertions(+), 207 deletions(-) diff --git a/ipi-survey-platform/src/components/overview/DetailedOverview.jsx b/ipi-survey-platform/src/components/overview/DetailedOverview.jsx index 6b37f84..811a48c 100644 --- a/ipi-survey-platform/src/components/overview/DetailedOverview.jsx +++ b/ipi-survey-platform/src/components/overview/DetailedOverview.jsx @@ -1,6 +1,6 @@ import React, { useState, useCallback, useMemo, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; -import { fetchSubmissionDetail } from '@/services/submissions/submissionService'; +import { fetchSubmissionDetail, getQuarterPeriods } from '@/services/submissions/submissionService'; import Table from '@/components/common/Table'; import ProductDetails from './ProductDetails'; @@ -196,9 +196,31 @@ export const DetailedOverview = ({ submission, onBack }) => { URL.revokeObjectURL(url); }, [filteredProducts]); - const handleViewDetails = (product) => { - setSelectedProduct(product); - setShowToast(true); + const handleViewDetails = async (product) => { + try { + setLoadingProduct(true); + // Extract quarter and year from the submission data + const quarter = submissionData.quarter; // e.g., 'Q1' + const year = submissionData.year; // e.g., 2025 + + // Fetch quarter periods + const response = await getQuarterPeriods(year, quarter); + + // Update the selected product with quarter periods data + setSelectedProduct({ + ...product, + quarterPeriods: response.data + }); + + setShowToast(true); + } catch (error) { + console.error('Error fetching quarter periods:', error); + // Still show the product details even if quarter periods fetch fails + setSelectedProduct(product); + setShowToast(true); + } finally { + setLoadingProduct(false); + } }; const handleToastShown = () => { @@ -418,13 +440,15 @@ export const DetailedOverview = ({ submission, onBack }) => { // If a product is selected, show the product details view if (selectedProduct) { return ( - setSelectedProduct(null)} + setShowToast(false)} + onBack={() => setSelectedProduct(null)} // Add this line to handle back navigation showToast={showToast} onToastShown={handleToastShown} submissionDate={selectedProduct?.created_at || submissionData?.created_at || submissionData?.updated_at || new Date().toISOString()} submissionStatus={selectedProduct?.status || submissionData?.status || 'submitted'} + quarterPeriods={selectedProduct?.quarterPeriods || quarterPeriods} /> ); } diff --git a/ipi-survey-platform/src/components/overview/ProductDetails.jsx b/ipi-survey-platform/src/components/overview/ProductDetails.jsx index 0e28126..c957adb 100644 --- a/ipi-survey-platform/src/components/overview/ProductDetails.jsx +++ b/ipi-survey-platform/src/components/overview/ProductDetails.jsx @@ -2,7 +2,21 @@ import React, { useState, useEffect, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; -const ProductDetails = ({ product, onBack, showToast: shouldShowToast, onToastShown, submissionDate, submissionStatus = 'approved' }) => { +// Default onBack function if not provided +const defaultOnBack = () => { + console.log('No onBack handler provided'); +}; + +const ProductDetails = ({ + product = {}, + onClose = () => {}, + showToast = false, + onToastShown = () => {}, + submissionDate = new Date().toISOString(), + submissionStatus = 'submitted', + quarterPeriods = null, + onBack = defaultOnBack +}) => { const [toast, setToast] = useState(null); const toastShownRef = useRef(false); @@ -21,11 +35,12 @@ const ProductDetails = ({ product, onBack, showToast: shouldShowToast, onToastSh }; useEffect(() => { - if (shouldShowToast && !toastShownRef.current) { + if (showToast && !toastShownRef.current) { const formattedDate = formatDate(submissionDate); if (submissionStatus) { const status = String(submissionStatus).toLowerCase(); + console.log("Status",status) const toastConfig = { approved: { type: 'approved', @@ -76,7 +91,7 @@ const ProductDetails = ({ product, onBack, showToast: shouldShowToast, onToastSh toastShownRef.current = true; onToastShown?.(); } - }, [shouldShowToast, product?.is_active, onToastShown, submissionDate, submissionStatus]); + }, [showToast, product?.is_active, onToastShown, submissionDate, submissionStatus]); const closeToast = () => { setToast(null); @@ -86,6 +101,34 @@ const ProductDetails = ({ product, onBack, showToast: shouldShowToast, onToastSh useEffect(() => { }, [product?.status, product?.is_active]); + // Default quarter periods if not provided + const defaultQuarterPeriods = { + previous_quarter: 'Q4', + previous_year: new Date().getFullYear() - 1, + current_quarter: 'Q1', + current_year: new Date().getFullYear(), + forecast_quarter: 'Q2', + forecast_year: new Date().getFullYear(), + previous_month: { + previous_period_one: 'Oct', + previous_period_two: 'Nov', + previous_period_three: 'Dec' + }, + current_month: { + current_period_one: 'Jan', + current_period_two: 'Feb', + current_period_three: 'Mar' + }, + forecast_month: { + forecast_period_one: 'Apr', + forecast_period_two: 'May', + forecast_period_three: 'Jun' + } + }; + + // Use provided quarterPeriods or fall back to defaults + const periods = quarterPeriods || product?.quarterPeriods || defaultQuarterPeriods; + const navigate = useNavigate(); // Function to save resubmission data to localStorage @@ -369,13 +412,31 @@ const ProductDetails = ({ product, onBack, showToast: shouldShowToast, onToastSh
- - {formattedProduct.status} - + {(() => { + const status = String(submissionStatus).toLowerCase(); + let statusClass = 'px-2 py-0.5 text-xs font-medium'; + let displayText = status.charAt(0).toUpperCase() + status.slice(1); + + if (status === 'approved') { + statusClass += ' bg-[#F3FAF4] text-[#2F663C]'; + } else if (status === 'rejected') { + statusClass += ' bg-red-50 text-red-600'; + } else if (status === 'submitted' || status === 'active') { + statusClass += ' bg-[#E7F5FF] text-[#043DFF]'; + displayText = status === 'active' ? 'Submitted' : displayText; + } else if (status === 'resubmitted') { + statusClass += ' bg-[#E7F5FF] text-[#043DFF]'; + } else { + // Default/pending state + statusClass += ' bg-amber-50 text-amber-700'; + } + + return ( + + {displayText} + + ); + })()}
@@ -389,28 +450,46 @@ const ProductDetails = ({ product, onBack, showToast: shouldShowToast, onToastSh Metric - - Q4-2024 (Previous Quarter) + + {periods.previous_quarter}-{periods.previous_year} (Previous Quarter) - - Q1-2025 (Current Quarter) + + {periods.current_quarter}-{periods.current_year} (Current Quarter) - - Q2-2025 (Next Quarter) + + {periods.forecast_quarter}-{periods.forecast_year} (Next Quarter) {/* Second header row */} - Oct - Nov - Dec - Jan - Feb - Mar - Apr - May - Jun + + {periods.previous_month.previous_period_one} + + + {periods.previous_month.previous_period_two} + + + {periods.previous_month.previous_period_three} + + + {periods.current_month.current_period_one} + + + {periods.current_month.current_period_two} + + + {periods.current_month.current_period_three} + + + {periods.forecast_month.forecast_period_one} + + + {periods.forecast_month.forecast_period_two} + + + {periods.forecast_month.forecast_period_three} + @@ -513,17 +592,32 @@ const ProductDetails = ({ product, onBack, showToast: shouldShowToast, onToastSh */} - + Back to List + */} + {/* */} + ); }; +ProductDetails.defaultProps = { + onBack: () => {} +}; + export default ProductDetails; diff --git a/ipi-survey-platform/src/components/survey/EstablishmentInfo/EstablishmentInfo.jsx b/ipi-survey-platform/src/components/survey/EstablishmentInfo/EstablishmentInfo.jsx index a68d299..f1c9fbc 100644 --- a/ipi-survey-platform/src/components/survey/EstablishmentInfo/EstablishmentInfo.jsx +++ b/ipi-survey-platform/src/components/survey/EstablishmentInfo/EstablishmentInfo.jsx @@ -104,6 +104,12 @@ const EstablishmentInfo = ({ // Initialize from location state if available, otherwise use defaults if (location.state?.survey) { const { quarter, year, endDate } = location.state.survey; + console.log('Initializing survey data from location.state:', { quarter, year, endDate }); + + // Save to localStorage + const surveyPeriod = { quarter, year, endDate }; + localStorage.setItem('currentSurveyPeriod', JSON.stringify(surveyPeriod)); + return { quarter: quarter || '', year: year || '', @@ -112,12 +118,27 @@ const EstablishmentInfo = ({ } // Or use current quarter/year as fallback const current = getCurrentQuarterAndYear(); + console.log('Using current quarter/year as fallback:', current); + + // Save to localStorage + const surveyPeriod = { + quarter: current.quarter, + year: current.year, + endDate: current.endDate + }; + localStorage.setItem('currentSurveyPeriod', JSON.stringify(surveyPeriod)); + return { quarter: current.quarter, year: current.year, endDate: current.endDate }; }); + + // Log when surveyData changes + React.useEffect(() => { + console.log('surveyData updated:', surveyData); + }, [surveyData]); // Update the ref whenever surveyData changes React.useEffect(() => { diff --git a/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx b/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx index 5747db7..6adeb44 100644 --- a/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx +++ b/ipi-survey-platform/src/components/survey/ProductData/ProductData.jsx @@ -56,7 +56,8 @@ const SearchableSelect = ({ loading = false, disabled = false, error = false, - className = '' + className = '', + displayValue = undefined }) => { const [isOpen, setIsOpen] = React.useState(false); const [searchTerm, setSearchTerm] = React.useState(''); @@ -97,7 +98,9 @@ const SearchableSelect = ({ // Get selected option label const selectedOption = options.find(opt => opt.value === value); - const displayValue = selectedOption ? selectedOption.label : ''; + const displayValueToShow = displayValue !== undefined + ? displayValue + : (selectedOption ? selectedOption.label : ''); // Handle option selection const handleSelect = (option) => { @@ -125,7 +128,7 @@ const SearchableSelect = ({ className={`flex items-center justify-between h-10 px-4 py-2 text-sm rounded-md border-2 ${borderColor} ${bgColor} ${disabled ? 'bg-gray-50 cursor-not-allowed' : 'cursor-pointer'}`} onClick={() => !disabled && !loading && setIsOpen(!isOpen)} > - {displayValue || placeholder} + {displayValueToShow || placeholder} {loading ? (
) : ( @@ -311,7 +314,13 @@ const ProductData = ({ const [productsError, setProductsError] = React.useState(''); const [unitOptions, setUnitOptions] = React.useState([]); const [isLoadingUnits, setIsLoadingUnits] = React.useState(false); - const [unitsError, setUnitsError] = React.useState(''); + const [unitsError, setUnitsError] = React.useState(null); + + // Debug: Log products data when it changes + useEffect(() => { + console.log('Products data updated:', products); + }, [products]); + const [activeTab, setActiveTab] = React.useState('current'); const [isInitialLoad, setIsInitialLoad] = React.useState(true); const [quarterPeriods, setQuarterPeriods] = React.useState(null); @@ -336,12 +345,28 @@ const ProductData = ({ useEffect(() => { const fetchQuarterPeriods = async () => { - if (!quarter || !year) return; - try { + // Try to get survey period from localStorage + const savedSurveyPeriod = localStorage.getItem('currentSurveyPeriod'); + let periodYear = year; + let periodQuarter = quarter; + + if (savedSurveyPeriod) { + const { quarter: savedQuarter, year: savedYear } = JSON.parse(savedSurveyPeriod); + console.log('Using survey period from localStorage:', { savedQuarter, savedYear }); + periodYear = savedYear || year; + periodQuarter = savedQuarter || quarter; + } + + if (!periodQuarter || !periodYear) { + console.warn('No quarter or year available for fetching periods'); + return; + } + setIsLoadingPeriods(true); - const quarterNumber = quarter.replace('Q', ''); // Convert 'Q3' to '3' - const response = await getQuarterPeriods(parseInt(year), `Q${quarterNumber}`); + const quarterNumber = periodQuarter.replace('Q', ''); // Convert 'Q3' to '3' + console.log('Fetching quarter periods with:', { year: periodYear, quarter: `Q${quarterNumber}` }); + const response = await getQuarterPeriods(parseInt(periodYear), `Q${quarterNumber}`); setQuarterPeriods(response.data); } catch (error) { console.error('Failed to fetch quarter periods:', error); @@ -526,6 +551,7 @@ const location = useLocation(); year: year || '' })); }, [quarter, year]); + console.log("surveyDatatest", surveyData); const requiredMessage = 'Required'; const validateForm = () => { @@ -916,11 +942,24 @@ const handleProductSelect = async (productId, establishmentId, id) => { )}

Step 2: Product Data — Monthly Output & Cost

- {(surveyData.quarter || surveyData.year) && ( -
- Quarter: {surveyData.quarter}-{surveyData.year} -
- )} + {(() => { + // Try to get survey period from localStorage first + const savedSurveyPeriod = localStorage.getItem('currentSurveyPeriod'); + let displayQuarter = quarter; + let displayYear = year; + + if (savedSurveyPeriod) { + const { quarter: savedQuarter, year: savedYear } = JSON.parse(savedSurveyPeriod); + displayQuarter = savedQuarter || quarter; + displayYear = savedYear || year; + } + + return (displayQuarter || displayYear) ? ( +
+ Quarter: {displayQuarter}-{displayYear} +
+ ) : null; + })()}
{!showInfoCard && (