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 { Link } from 'react-router-dom';
|
||||||
import Card from '@/components/common/Card';
|
import Card from '@/components/common/Card';
|
||||||
import triggerIcon from '@/assets/trigger.png';
|
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 popup components
|
||||||
import ManufacturingTotal from './ManufacturingIndexPopup/ManufacturingTotal';
|
import ManufacturingTotal from './ManufacturingIndexPopup/ManufacturingTotal';
|
||||||
@ -58,7 +58,7 @@ const ManufacturingIndex = () => {
|
|||||||
const [monthlyOverviewData, setMonthlyOverviewData] = useState(null);
|
const [monthlyOverviewData, setMonthlyOverviewData] = useState(null);
|
||||||
const [isPopupOpen, setIsPopupOpen] = useState(false);
|
const [isPopupOpen, setIsPopupOpen] = useState(false);
|
||||||
const [apiLoading, setApiLoading] = useState(false);
|
const [apiLoading, setApiLoading] = useState(false);
|
||||||
const [quarter, setQuarter] = useState('Q2');
|
const [quarter, setQuarter] = useState('');
|
||||||
const [surveySubmitLoading, setSurveySubmitLoading] = useState(false);
|
const [surveySubmitLoading, setSurveySubmitLoading] = useState(false);
|
||||||
const [surveySubmitStatus, setSurveySubmitStatus] = useState('');
|
const [surveySubmitStatus, setSurveySubmitStatus] = useState('');
|
||||||
const [surveySubmitError, setSurveySubmitError] = useState(null);
|
const [surveySubmitError, setSurveySubmitError] = useState(null);
|
||||||
@ -67,7 +67,7 @@ const ManufacturingIndex = () => {
|
|||||||
|
|
||||||
const [pagination, setPagination] = useState({
|
const [pagination, setPagination] = useState({
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
pageSize: 20,
|
pageSize: 10,
|
||||||
totalItems: 0
|
totalItems: 0
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -155,7 +155,15 @@ const ManufacturingIndex = () => {
|
|||||||
const monthName = dateObj.toLocaleString('en-US', { month: 'short' });
|
const monthName = dateObj.toLocaleString('en-US', { month: 'short' });
|
||||||
year = item.year || dateObj.getFullYear() || 2025;
|
year = item.year || dateObj.getFullYear() || 2025;
|
||||||
monthNumber = item.month || (dateObj.getMonth() + 1) || 1;
|
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 {
|
return {
|
||||||
id: item.id || `${year}-${monthNumber}` || `item-${index}`,
|
id: item.id || `${year}-${monthNumber}` || `item-${index}`,
|
||||||
month: `${monthName} ${year}`,
|
month: `${monthName} ${year}`,
|
||||||
@ -183,7 +191,7 @@ const ManufacturingIndex = () => {
|
|||||||
timeZone: 'Asia/Dubai',
|
timeZone: 'Asia/Dubai',
|
||||||
timeZoneName: 'short'
|
timeZoneName: 'short'
|
||||||
}) : '-',
|
}) : '-',
|
||||||
quarter: item.quarter || item.quarter_name || '-',
|
quarter: quarterVal || '-',
|
||||||
totalWeight: item.total_weight || '-',
|
totalWeight: item.total_weight || '-',
|
||||||
status: item.status || 'Completed',
|
status: item.status || 'Completed',
|
||||||
rawData: item
|
rawData: item
|
||||||
@ -191,7 +199,7 @@ const ManufacturingIndex = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
setAllMonths(formattedData);
|
setAllMonths(formattedData);
|
||||||
applyFilters(year, searchMonth, formattedData);
|
applyFilters(year, searchMonth, formattedData, quarter);
|
||||||
setPagination(prev => ({
|
setPagination(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
totalItems: formattedData.length
|
totalItems: formattedData.length
|
||||||
@ -293,14 +301,15 @@ const ManufacturingIndex = () => {
|
|||||||
setMonthlyOverviewData(null);
|
setMonthlyOverviewData(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Apply both year and search filters
|
// Apply year, quarter and search filters
|
||||||
const applyFilters = (selectedYear, searchTerm, monthsData = allMonths) => {
|
const applyFilters = (selectedYear, searchTerm, monthsData = allMonths, selectedQuarter = quarter) => {
|
||||||
const filtered = monthsData.filter(month => {
|
const filtered = monthsData.filter(month => {
|
||||||
const matchesYear = selectedYear === 'All' || month.year.toString() === selectedYear;
|
const matchesYear = selectedYear === 'All' || month.year.toString() === selectedYear;
|
||||||
const matchesSearch = searchTerm === '' || month.month.toLowerCase().includes(searchTerm.toLowerCase());
|
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);
|
setFilteredMonths(filtered);
|
||||||
setPagination(prev => ({
|
setPagination(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
@ -312,7 +321,6 @@ const ManufacturingIndex = () => {
|
|||||||
const handleYearChange = (e) => {
|
const handleYearChange = (e) => {
|
||||||
const selectedYear = e.target.value;
|
const selectedYear = e.target.value;
|
||||||
setYear(selectedYear);
|
setYear(selectedYear);
|
||||||
applyFilters(selectedYear, searchMonth);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleSearchMonth = (e) => {
|
const handleSearchMonth = (e) => {
|
||||||
@ -339,12 +347,114 @@ const ManufacturingIndex = () => {
|
|||||||
setSurveySubmitLoading(true);
|
setSurveySubmitLoading(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
// Trigger backend calculate/auto-submit
|
||||||
const response = await autoSubmitSurvey(parseInt(year, 10), quarter);
|
const response = await autoSubmitSurvey(parseInt(year, 10), quarter);
|
||||||
|
|
||||||
setSurveySubmitStatus(
|
setSurveySubmitStatus(
|
||||||
response?.data?.message || 'Survey auto-submit request sent successfully.'
|
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) {
|
} catch (error) {
|
||||||
setSurveySubmitError(
|
setSurveySubmitError(
|
||||||
error?.response?.data?.message || error.message || 'Survey auto-submit failed.'
|
error?.response?.data?.message || error.message || 'Survey auto-submit failed.'
|
||||||
@ -635,7 +745,7 @@ const ManufacturingIndex = () => {
|
|||||||
onClick={handleTriggerData}
|
onClick={handleTriggerData}
|
||||||
>
|
>
|
||||||
<img src={triggerIcon} alt="Trigger" className="h-5 w-5" />
|
<img src={triggerIcon} alt="Trigger" className="h-5 w-5" />
|
||||||
Trigger Data
|
Calculate
|
||||||
</button>
|
</button>
|
||||||
<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"
|
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) => {
|
export const getManufacturingMonthlyOverview = async (year, quarter) => {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user