filter fixed
This commit is contained in:
parent
099fbddada
commit
10df4cb741
@ -19,7 +19,7 @@ import { Breadcrumbs } from '@mui/material';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Card from '@/components/common/Card';
|
||||
import triggerIcon from '@/assets/trigger.png';
|
||||
import { getManufacturingIndex, getManufacturingMonthlyOverview, autoSubmitSurvey } from '@/services/manufacturingIndex/ManufacturingIndex';
|
||||
import { getManufacturingIndex, getManufacturingMonthlyOverview, autoSubmitSurvey, getManufacturingIndexFiltered } from '@/services/manufacturingIndex/ManufacturingIndex';
|
||||
|
||||
// Import popup components
|
||||
import ManufacturingTotal from './ManufacturingIndexPopup/ManufacturingTotal';
|
||||
@ -58,7 +58,7 @@ const ManufacturingIndex = () => {
|
||||
const [monthlyOverviewData, setMonthlyOverviewData] = useState(null);
|
||||
const [isPopupOpen, setIsPopupOpen] = useState(false);
|
||||
const [apiLoading, setApiLoading] = useState(false);
|
||||
const [quarter, setQuarter] = useState('Q2');
|
||||
const [quarter, setQuarter] = useState('');
|
||||
const [surveySubmitLoading, setSurveySubmitLoading] = useState(false);
|
||||
const [surveySubmitStatus, setSurveySubmitStatus] = useState('');
|
||||
const [surveySubmitError, setSurveySubmitError] = useState(null);
|
||||
@ -67,7 +67,7 @@ const ManufacturingIndex = () => {
|
||||
|
||||
const [pagination, setPagination] = useState({
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
pageSize: 10,
|
||||
totalItems: 0
|
||||
});
|
||||
|
||||
@ -155,7 +155,15 @@ const ManufacturingIndex = () => {
|
||||
const monthName = dateObj.toLocaleString('en-US', { month: 'short' });
|
||||
year = item.year || dateObj.getFullYear() || 2025;
|
||||
monthNumber = item.month || (dateObj.getMonth() + 1) || 1;
|
||||
|
||||
// Normalize quarter value to form 'Q1'..'Q4'
|
||||
let quarterVal = item.quarter || item.quarter_name || item.quarterName || '-';
|
||||
if (quarterVal !== '-' && quarterVal !== null && quarterVal !== undefined) {
|
||||
quarterVal = String(quarterVal).trim();
|
||||
// If it's numeric like '2' or 2 -> convert to 'Q2'
|
||||
if (/^\d+$/.test(quarterVal)) quarterVal = `Q${quarterVal}`;
|
||||
quarterVal = quarterVal.toUpperCase();
|
||||
}
|
||||
|
||||
return {
|
||||
id: item.id || `${year}-${monthNumber}` || `item-${index}`,
|
||||
month: `${monthName} ${year}`,
|
||||
@ -183,7 +191,7 @@ const ManufacturingIndex = () => {
|
||||
timeZone: 'Asia/Dubai',
|
||||
timeZoneName: 'short'
|
||||
}) : '-',
|
||||
quarter: item.quarter || item.quarter_name || '-',
|
||||
quarter: quarterVal || '-',
|
||||
totalWeight: item.total_weight || '-',
|
||||
status: item.status || 'Completed',
|
||||
rawData: item
|
||||
@ -191,7 +199,7 @@ const ManufacturingIndex = () => {
|
||||
});
|
||||
|
||||
setAllMonths(formattedData);
|
||||
applyFilters(year, searchMonth, formattedData);
|
||||
applyFilters(year, searchMonth, formattedData, quarter);
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
totalItems: formattedData.length
|
||||
@ -293,14 +301,15 @@ const ManufacturingIndex = () => {
|
||||
setMonthlyOverviewData(null);
|
||||
};
|
||||
|
||||
// Apply both year and search filters
|
||||
const applyFilters = (selectedYear, searchTerm, monthsData = allMonths) => {
|
||||
// Apply year, quarter and search filters
|
||||
const applyFilters = (selectedYear, searchTerm, monthsData = allMonths, selectedQuarter = quarter) => {
|
||||
const filtered = monthsData.filter(month => {
|
||||
const matchesYear = selectedYear === 'All' || month.year.toString() === selectedYear;
|
||||
const matchesSearch = searchTerm === '' || month.month.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
return matchesYear && matchesSearch;
|
||||
const matchesQuarter = !selectedQuarter || selectedQuarter === 'All' || selectedQuarter === '-' ? true : (month.quarter || '').toUpperCase() === String(selectedQuarter).toUpperCase();
|
||||
return matchesYear && matchesSearch && matchesQuarter;
|
||||
});
|
||||
|
||||
|
||||
setFilteredMonths(filtered);
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
@ -312,7 +321,6 @@ const ManufacturingIndex = () => {
|
||||
const handleYearChange = (e) => {
|
||||
const selectedYear = e.target.value;
|
||||
setYear(selectedYear);
|
||||
applyFilters(selectedYear, searchMonth);
|
||||
};
|
||||
|
||||
const handleSearchMonth = (e) => {
|
||||
@ -339,12 +347,114 @@ const ManufacturingIndex = () => {
|
||||
setSurveySubmitLoading(true);
|
||||
|
||||
try {
|
||||
// Trigger backend calculate/auto-submit
|
||||
const response = await autoSubmitSurvey(parseInt(year, 10), quarter);
|
||||
|
||||
setSurveySubmitStatus(
|
||||
response?.data?.message || 'Survey auto-submit request sent successfully.'
|
||||
);
|
||||
setRefreshKey(prev => prev + 1);
|
||||
|
||||
// After auto-submit, fetch the filtered manufacturing index for selected year/quarter
|
||||
try {
|
||||
const filteredResp = await getManufacturingIndexFiltered(parseInt(year, 10), quarter);
|
||||
|
||||
// Extract array similar to initial fetch
|
||||
let dataArray = [];
|
||||
if (Array.isArray(filteredResp)) {
|
||||
dataArray = filteredResp;
|
||||
} else if (filteredResp && filteredResp.data && Array.isArray(filteredResp.data)) {
|
||||
dataArray = filteredResp.data;
|
||||
} else if (filteredResp && filteredResp.data && typeof filteredResp.data === 'object') {
|
||||
if (Array.isArray(filteredResp.data.manufacturingIndex) || Array.isArray(filteredResp.data.data)) {
|
||||
dataArray = filteredResp.data.manufacturingIndex || filteredResp.data.data || [];
|
||||
} else {
|
||||
dataArray = Object.values(filteredResp.data);
|
||||
}
|
||||
} else {
|
||||
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 [];
|
||||
};
|
||||
dataArray = findArray(filteredResp);
|
||||
}
|
||||
|
||||
const formattedData = dataArray.map((item, index) => {
|
||||
let dateObj = new Date();
|
||||
let yearVal = 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) {
|
||||
yearVal = item.year;
|
||||
monthNumber = item.month;
|
||||
dateObj = new Date(yearVal, monthNumber - 1, 1);
|
||||
}
|
||||
|
||||
const monthName = dateObj.toLocaleString('en-US', { month: 'short' });
|
||||
yearVal = item.year || dateObj.getFullYear() || 2025;
|
||||
monthNumber = item.month || (dateObj.getMonth() + 1) || 1;
|
||||
// Normalize quarter value to form 'Q1'..'Q4'
|
||||
let quarterVal = item.quarter || item.quarter_name || item.quarterName || '-';
|
||||
if (quarterVal !== '-' && quarterVal !== null && quarterVal !== undefined) {
|
||||
quarterVal = String(quarterVal).trim();
|
||||
if (/^\d+$/.test(quarterVal)) quarterVal = `Q${quarterVal}`;
|
||||
quarterVal = quarterVal.toUpperCase();
|
||||
}
|
||||
|
||||
return {
|
||||
id: item.id || `${yearVal}-${monthNumber}` || `item-${index}`,
|
||||
month: `${monthName} ${yearVal}`,
|
||||
monthName: monthName,
|
||||
year: yearVal,
|
||||
monthNumber: monthNumber,
|
||||
index: item.manufacturing_index?.toString() || item.index?.toString() || item.manufacturingIndex?.toString() || '-',
|
||||
mom: item.mom_change || item.mom || item.momChange ?
|
||||
(parseFloat(item.mom_change || item.mom || item.momChange) > 0 ?
|
||||
`+${item.mom_change || item.mom || item.momChange}` :
|
||||
(item.mom_change || item.mom || item.momChange).toString()) :
|
||||
'-',
|
||||
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()) :
|
||||
'-',
|
||||
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'
|
||||
}) : '-',
|
||||
quarter: quarterVal || '-',
|
||||
totalWeight: item.total_weight || '-',
|
||||
status: item.status || 'Completed',
|
||||
rawData: item
|
||||
};
|
||||
});
|
||||
|
||||
setAllMonths(formattedData);
|
||||
applyFilters(year, searchMonth, formattedData, quarter);
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
totalItems: formattedData.length,
|
||||
currentPage: 1
|
||||
}));
|
||||
} catch (fetchErr) {
|
||||
console.error('Error fetching filtered manufacturing index after trigger:', fetchErr);
|
||||
}
|
||||
} catch (error) {
|
||||
setSurveySubmitError(
|
||||
error?.response?.data?.message || error.message || 'Survey auto-submit failed.'
|
||||
@ -635,7 +745,7 @@ const ManufacturingIndex = () => {
|
||||
onClick={handleTriggerData}
|
||||
>
|
||||
<img src={triggerIcon} alt="Trigger" className="h-5 w-5" />
|
||||
Trigger Data
|
||||
Calculate
|
||||
</button>
|
||||
<button
|
||||
className="h-10 px-3 xl:px-4 rounded-[6px] bg-[#F7F7F7] border border-[#C3C6CB] text-sm inline-flex items-center gap-2 hover:bg-gray-50 whitespace-nowrap"
|
||||
|
||||
@ -12,6 +12,22 @@ export const getManufacturingIndex = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch manufacturing index with optional filters (year, quarter)
|
||||
export const getManufacturingIndexFiltered = async (year, quarter) => {
|
||||
try {
|
||||
const params = {};
|
||||
if (year) params.year = year.toString();
|
||||
if (quarter) params.quarter = quarter.toString();
|
||||
|
||||
const response = await getRequest(`${MANUFACTURING_ENDPOINT}/getManufacturingIndex`, {
|
||||
params,
|
||||
});
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error('Error fetching filtered manufacturing index:', error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
export const getManufacturingMonthlyOverview = async (year, quarter) => {
|
||||
try {
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user