SS-FCSC/fcsc_ipi_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugs fixed for phase 2

Browse Source
This commit is contained in:
Malini 2026-01-08 11:50:56 +05:30
parent fc4535943c
commit 093eed99b2
2 changed files with 236 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

413
ipi-survey-platform/src/pages/ManufacturingIndex/ManufacturingIndex.jsx
View File

@ -9,7 +9,8 @@ import { SelectField as BaseSelectField } from '@/components/common/FormControls
import Table from '@/components/common/Table'; import Table from '@/components/common/Table';
import { import {
FiberManualRecord as FiberManualRecordIcon, FiberManualRecord as FiberManualRecordIcon,
KeyboardArrowRight as KeyboardArrowRightIcon KeyboardArrowRight as KeyboardArrowRightIcon,
InfoOutlined as InfoOutlinedIcon
} from '@mui/icons-material'; } from '@mui/icons-material';
import Card from '@/components/common/Card'; import Card from '@/components/common/Card';
import { getManufacturingIndex, getManufacturingMonthlyOverview } from '@/services/manufacturingIndex/ManufacturingIndex'; import { getManufacturingIndex, getManufacturingMonthlyOverview } from '@/services/manufacturingIndex/ManufacturingIndex';
@ -40,10 +41,11 @@ const SelectField = (props) => (
const ManufacturingIndex = () => { const ManufacturingIndex = () => {
// State management // State management
const [year, setYear] = useState('2025'); const [year, setYear] = useState('All');
const [searchMonth, setSearchMonth] = useState(''); const [searchMonth, setSearchMonth] = useState('');
const [selectedMonth, setSelectedMonth] = useState(null); const [selectedMonth, setSelectedMonth] = useState(null);
const [filteredMonths, setFilteredMonths] = useState([]); const [allMonths, setAllMonths] = useState([]); // Store all months data
const [filteredMonths, setFilteredMonths] = useState([]); // Store filtered months
const [activeTab, setActiveTab] = useState('manufacturing'); const [activeTab, setActiveTab] = useState('manufacturing');
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null); const [error, setError] = useState(null);
@ -65,216 +67,214 @@ const ManufacturingIndex = () => {
}; };
// Fetch data from API // Fetch data from API
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
try { try {
setIsLoading(true); setIsLoading(true);
const response = await getManufacturingIndex(); const response = await getManufacturingIndex();
// Handle different response structures // Handle different response structures
let dataArray = []; let dataArray = [];
// Case 1: Response is already an array // Case 1: Response is already an array
if (Array.isArray(response)) { if (Array.isArray(response)) {
dataArray = response; dataArray = response;
}
// Case 2: Response has data property which is array
else if (response && response.data && Array.isArray(response.data)) {
dataArray = response.data;
}
// Case 3: Response.data is object with nested data
else if (response && response.data && typeof response.data === 'object') {
// Try to extract array from common structures
if (Array.isArray(response.data.manufacturingIndex) || Array.isArray(response.data.data)) {
dataArray = response.data.manufacturingIndex || response.data.data || [];
} else {
// Convert object values to array
dataArray = Object.values(response.data);
} }
} // Case 2: Response has data property which is array
// Case 4: Response has nested structure else if (response && response.data && Array.isArray(response.data)) {
else if (response && response.data && response.data.data && Array.isArray(response.data.data)) { dataArray = response.data;
dataArray = response.data.data; }
} // Case 3: Response.data is object with nested data
else { else if (response && response.data && typeof response.data === 'object') {
console.error('Unexpected API response structure:', response); // Try to extract array from common structures
// Try to extract any array from response if (Array.isArray(response.data.manufacturingIndex) || Array.isArray(response.data.data)) {
const findArray = (obj) => { dataArray = response.data.manufacturingIndex || response.data.data || [];
if (Array.isArray(obj)) return obj; } else {
if (typeof obj === 'object' && obj !== null) { // Convert object values to array
for (const key in obj) { dataArray = Object.values(response.data);
if (Array.isArray(obj[key])) { }
return obj[key]; }
// Case 4: Response has nested structure
else if (response && response.data && response.data.data && Array.isArray(response.data.data)) {
dataArray = response.data.data;
}
else {
console.error('Unexpected API response structure:', response);
// Try to extract any array from response
const findArray = (obj) => {
if (Array.isArray(obj)) return obj;
if (typeof obj === 'object' && obj !== null) {
for (const key in obj) {
if (Array.isArray(obj[key])) {
return obj[key];
}
} }
} }
} return [];
return []; };
}; dataArray = findArray(response);
dataArray = findArray(response); }
}
// If no data found // If no data found
if (!dataArray || dataArray.length === 0) { if (!dataArray || dataArray.length === 0) {
console.warn('No data array found, using empty array'); console.warn('No data array found, using empty array');
dataArray = []; dataArray = [];
}
// Format the data
const formattedData = dataArray.map((item, index) => {
// Create a date object from reference_date or other date fields
let dateObj = new Date();
let year = 2025;
let monthNumber = 1;
if (item.reference_date) {
dateObj = new Date(item.reference_date);
} else if (item.date) {
dateObj = new Date(item.date);
} else if (item.referenceDate) {
dateObj = new Date(item.referenceDate);
} else if (item.year && item.month) {
// If year and month are separate fields
year = item.year;
monthNumber = item.month;
dateObj = new Date(year, monthNumber - 1, 1);
} }
const monthName = dateObj.toLocaleString('en-US', { month: 'short' }); // Format the data
year = item.year || dateObj.getFullYear() || 2025; const formattedData = dataArray.map((item, index) => {
monthNumber = item.month || (dateObj.getMonth() + 1) || 1; // Create a date object from reference_date or other date fields
let dateObj = new Date();
return { let year = 2025;
id: item.id || `${year}-${monthNumber}` || `item-${index}`, let monthNumber = 1;
month: `${monthName} ${year}`,
monthName: monthName, if (item.reference_date) {
year: year, dateObj = new Date(item.reference_date);
monthNumber: monthNumber, } else if (item.date) {
index: item.manufacturing_index?.toString() || item.index?.toString() || item.manufacturingIndex?.toString() || 'N/A', dateObj = new Date(item.date);
mom: item.mom_change || item.mom || item.momChange ? } else if (item.referenceDate) {
(parseFloat(item.mom_change || item.mom || item.momChange) > 0 ? dateObj = new Date(item.referenceDate);
`+${item.mom_change || item.mom || item.momChange}` : } else if (item.year && item.month) {
(item.mom_change || item.mom || item.momChange).toString()) : // If year and month are separate fields
'N/A', year = item.year;
yoy: item.yoy_change || item.yoy || item.yoyChange ? monthNumber = item.month;
(parseFloat(item.yoy_change || item.yoy || item.yoyChange) > 0 ? dateObj = new Date(year, monthNumber - 1, 1);
`+${item.yoy_change || item.yoy || item.yoyChange}` : }
(item.yoy_change || item.yoy || item.yoyChange).toString()) :
'N/A', const monthName = dateObj.toLocaleString('en-US', { month: 'short' });
generated: item.generated_on || item.generatedOn || item.generated_at ? year = item.year || dateObj.getFullYear() || 2025;
new Date(item.generated_on || item.generatedOn || item.generated_at).toLocaleString('en-US', { monthNumber = item.month || (dateObj.getMonth() + 1) || 1;
year: 'numeric',
month: 'short', return {
day: 'numeric', id: item.id || `${year}-${monthNumber}` || `item-${index}`,
hour: '2-digit', month: `${monthName} ${year}`,
minute: '2-digit', monthName: monthName,
timeZone: 'Asia/Dubai', year: year,
timeZoneName: 'short' monthNumber: monthNumber,
}) : 'N/A', index: item.manufacturing_index?.toString() || item.index?.toString() || item.manufacturingIndex?.toString() || 'N/A',
status: item.status || 'Completed', mom: item.mom_change || item.mom || item.momChange ?
rawData: item (parseFloat(item.mom_change || item.mom || item.momChange) > 0 ?
}; `+${item.mom_change || item.mom || item.momChange}` :
}); (item.mom_change || item.mom || item.momChange).toString()) :
'N/A',
yoy: item.yoy_change || item.yoy || item.yoyChange ?
(parseFloat(item.yoy_change || item.yoy || item.yoyChange) > 0 ?
`+${item.yoy_change || item.yoy || item.yoyChange}` :
(item.yoy_change || item.yoy || item.yoyChange).toString()) :
'N/A',
generated: item.generated_on || item.generatedOn || item.generated_at ?
new Date(item.generated_on || item.generatedOn || item.generated_at).toLocaleString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
timeZone: 'Asia/Dubai',
timeZoneName: 'short'
}) : 'N/A',
status: item.status || 'Completed',
rawData: item
};
});
setFilteredMonths(formattedData); setAllMonths(formattedData);
setPagination(prev => ({ applyFilters(year, searchMonth, formattedData);
...prev, setPagination(prev => ({
totalItems: formattedData.length ...prev,
})); totalItems: formattedData.length
}));
if (formattedData.length > 0) { } catch (err) {
setSelectedMonth(formattedData[0]); console.error('Error fetching manufacturing index:', err);
console.error('Error details:', {
message: err.message,
stack: err.stack,
response: err.response
});
setError('Failed to load manufacturing data. Please try again later.');
} finally {
setIsLoading(false);
} }
} catch (err) { };
console.error('Error fetching manufacturing index:', err);
console.error('Error details:', { fetchData();
message: err.message, }, []);
stack: err.stack,
response: err.response // ARROW CLICK
const handleMonthSelect = async (row) => {
try {
const yearNumber = row.year;
const monthNumber = row.monthNumber;
setSelectedMonth(row);
setIsPopupOpen(true);
setApiLoading(true);
// API CALL
const apiResponse = await getManufacturingMonthlyOverview(yearNumber, monthNumber);
// Extract data from the response structure
// Note: Your API returns {status, message, manufacturing_total, isic_2digit, isic_3digit, isic_4digit}
const responseData = apiResponse.data || apiResponse;
// Transform data based on YOUR API structure
const transformedData = {
manufacturing: responseData?.manufacturing_total || {},
isic2: Array.isArray(responseData?.isic_2digit) ? responseData.isic_2digit : [],
isic3: Array.isArray(responseData?.isic_3digit) ? responseData.isic_3digit : [],
isic4: Array.isArray(responseData?.isic_4digit) ? responseData.isic_4digit : []
};
// 4 popups-க்கும் data set பண்ணு
setMonthlyOverviewData(transformedData);
} catch (error) {
console.error('Error in handleMonthSelect:', error);
setError(`API Error: ${error.message || 'Failed to load detailed data'}`);
// Fallback: empty data set
setMonthlyOverviewData({
manufacturing: {},
isic2: [],
isic3: [],
isic4: []
}); });
setError('Failed to load manufacturing data. Please try again later.');
} finally { } finally {
setIsLoading(false); setApiLoading(false);
} }
}; };
fetchData();
}, []);
// ARROW CLICK செய்தால் இந்த function வேலை செய்யும்
const handleMonthSelect = async (row) => {
try {
const yearNumber = row.year;
const monthNumber = row.monthNumber;
setSelectedMonth(row);
setActiveTab('manufacturing');
setIsPopupOpen(true);
setApiLoading(true);
// API CALL
const apiResponse = await getManufacturingMonthlyOverview(yearNumber, monthNumber);
// Extract data from the response structure
// Note: Your API returns {status, message, manufacturing_total, isic_2digit, isic_3digit, isic_4digit}
const responseData = apiResponse.data || apiResponse;
// Transform data based on YOUR API structure
const transformedData = {
manufacturing: responseData?.manufacturing_total || {},
isic2: Array.isArray(responseData?.isic_2digit) ? responseData.isic_2digit : [],
isic3: Array.isArray(responseData?.isic_3digit) ? responseData.isic_3digit : [],
isic4: Array.isArray(responseData?.isic_4digit) ? responseData.isic_4digit : []
};
// 4 popups-க்கும் data set பண்ணு
setMonthlyOverviewData(transformedData);
} catch (error) {
console.error('Error in handleMonthSelect:', error);
setError(`API Error: ${error.message || 'Failed to load detailed data'}`);
// Fallback: empty data set
setMonthlyOverviewData({
manufacturing: {},
isic2: [],
isic3: [],
isic4: []
});
} finally {
setApiLoading(false);
}
};
const handleClosePopup = () => { const handleClosePopup = () => {
setIsPopupOpen(false); setIsPopupOpen(false);
setMonthlyOverviewData(null); setMonthlyOverviewData(null);
}; };
const handleYearChange = (e) => { // Apply both year and search filters
const selectedYear = e.target.value; const applyFilters = (selectedYear, searchTerm, monthsData = allMonths) => {
setYear(selectedYear); const filtered = monthsData.filter(month => {
filterMonths(selectedYear, searchMonth); const matchesYear = selectedYear === 'All' || month.year.toString() === selectedYear;
}; const matchesSearch = searchTerm === '' || month.month.toLowerCase().includes(searchTerm.toLowerCase());
return matchesYear && matchesSearch;
const handleSearchMonth = (e) => {
const searchTerm = e.target.value.toLowerCase();
setSearchMonth(searchTerm);
filterMonths(year, searchTerm);
};
const filterMonths = (selectedYear, searchTerm) => {
const filtered = filteredMonths.filter(month => {
const matchesYear = month.month.endsWith(selectedYear);
const matchesSearch = month.month.toLowerCase().includes(searchTerm);
return matchesYear && (searchTerm === '' || matchesSearch);
}); });
setFilteredMonths(filtered);
setPagination(prev => ({ setPagination(prev => ({
...prev, ...prev,
currentPage: 1, currentPage: 1,
totalItems: filtered.length totalItems: filtered.length
})); }));
return filtered; };
const handleYearChange = (e) => {
const selectedYear = e.target.value;
setYear(selectedYear);
applyFilters(selectedYear, searchMonth);
};
const handleSearchMonth = (e) => {
const searchTerm = e.target.value;
setSearchMonth(searchTerm);
applyFilters(year, searchTerm);
}; };
const handleExportCSV = () => { const handleExportCSV = () => {
@ -302,7 +302,14 @@ const handleMonthSelect = async (row) => {
}; };
const downloadIconSrc = '/assets/images/DownloadSimple.svg'; const downloadIconSrc = '/assets/images/DownloadSimple.svg';
const years = ['2025', '2024', '2023']; const currentYear = new Date().getFullYear();
const years = [
'All',
...Array.from(
{ length: currentYear - 2021 },
(_, i) => (currentYear - i).toString()
)
];
const selectedMonthData = selectedMonth || {}; const selectedMonthData = selectedMonth || {};
// Show loading state // Show loading state
@ -351,7 +358,8 @@ const handleMonthSelect = async (row) => {
className="relative" className="relative"
> >
<DialogTitle className="bg-[#F9F5E8] text-[#92722A] flex justify-between items-center pr-2"> <DialogTitle className="bg-[#F9F5E8] text-[#92722A] flex justify-between items-center pr-2">
<span>Manufacturing Details - {selectedMonth?.month}</span> <span>Monthly ISIC breakdown
- {selectedMonth?.month}</span>
<IconButton <IconButton
onClick={handleClosePopup} onClick={handleClosePopup}
size="small" size="small"
@ -376,6 +384,9 @@ const handleMonthSelect = async (row) => {
</div> </div>
) : ( ) : (
<div className="space-y-0 w-[1000px] max-w-[95vw] min-w-[800px]"> <div className="space-y-0 w-[1000px] max-w-[95vw] min-w-[800px]">
<p className="text-sm text-gray-600 mb-4">
Start from the manufacturing total, then drill down into ISIC 2-digit and 3 & 4-digit groups for the selected month.
</p>
{/* Tabs Header */} {/* Tabs Header */}
<div className="sticky top-0 z-10 bg-white pt-2"> <div className="sticky top-0 z-10 bg-white pt-2">
<div className="flex justify-between items-center border-b border-gray-200 pb-2"> <div className="flex justify-between items-center border-b border-gray-200 pb-2">
@ -452,9 +463,15 @@ const handleMonthSelect = async (row) => {
</div> </div>
<div className="text-right"> <div className="text-right">
<div className="mt-5 flex items-center justify-end text-sm text-green-600 mb-1"> <div className="mt-5 flex flex-col items-end gap-2">
<FiberManualRecordIcon className="text-xs mr-1" /> <div className="flex items-center text-sm text-green-600">
Next scheduled run: 11 Nov 2025, 02:00 GST <FiberManualRecordIcon className="text-xs mr-1" />
Next scheduled run: 11 Nov 2025, 02:00 GST
</div>
<div className="flex text-sm text-gray-600">
<InfoOutlinedIcon className="text-gray-400 mr-1 mt-0.5 flex-shrink-0" style={{ fontSize: '1rem' }} />
<span className="whitespace-nowrap">Formula: Manufacturing index<sub>t</sub> = Σ (sector weight<sub>i</sub> × group index<sub>i,t</sub>)</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -476,6 +493,14 @@ const handleMonthSelect = async (row) => {
<p className="text-sm text-gray-600"> <p className="text-sm text-gray-600">
Filter by year and quickly jump to a month to see its ISIC breakdown. Filter by year and quickly jump to a month to see its ISIC breakdown.
</p> </p>
<div className="flex items-center gap-4 mt-2">
<div className="text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
Base year: 2022 = 100
</div>
<div className="text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
Coverage: Manufacturing (ISIC C)
</div>
</div>
</div> </div>
<div className="flex items-center gap-3 w-full sm:w-auto"> <div className="flex items-center gap-3 w-full sm:w-auto">
<div className="flex-1 sm:flex-none w-40"> <div className="flex-1 sm:flex-none w-40">

17
ipi-survey-platform/src/pages/ManufacturingIndex/ManufacturingIndexPopup/ManufacturingTotal.jsx
View File

@ -97,6 +97,23 @@ const ManufacturingTotal = ({ selectedMonthData, setActiveTab, monthlyOverviewDa
the same month last year. the same month last year.
</p> </p>
<div className="mt-4 p-4 bg-gray-50 rounded-md text-sm text-gray-700 max-w-3xl">
<p className="font-medium mb-2">Laspeyres reminder</p>
<p className="font mb-2">Manufacturing index<sub>t</sub> = Σ (weight<sub>j</sub> × group_index<sub>j,t</sub>)</p>
<p className="text-xs text-gray-600 mb-4">
Weights are fixed at base year (2022) and reflect each group's share in total manufacturing value added.
</p>
<div className="border-t border-gray-200 pt-3 mt-3">
<p className="font-medium mb-2">Operational notes</p>
<ul className="text-xs text-gray-600 space-y-1.5 list-disc pl-5">
<li>Manufacturing indices are auto-generated on the 11th using the latest validated item-level data for the previous reference month.</li>
<li>If an automated run fails, the status for that month will show as Error; admins can re-trigger the calculation from the technical tools page.</li>
<li>All drill-down views (ISIC 2-digit and ISIC 3 & 4-digit) use the same Laspeyres weights and base year as the headline manufacturing index.</li>
</ul>
</div>
</div>
<div className="mt-8 pt-4 border-gray-200 flex justify-end"> <div className="mt-8 pt-4 border-gray-200 flex justify-end">
<button <button
onClick={() => setActiveTab('isic2')} onClick={() => setActiveTab('isic2')}