bugs fixed for phase 2
This commit is contained in:
Malini
parent
fc4535943c
commit
093eed99b2
@ -9,7 +9,8 @@ import { SelectField as BaseSelectField } from '@/components/common/FormControls
|
||||
import Table from '@/components/common/Table';
|
||||
import {
|
||||
FiberManualRecord as FiberManualRecordIcon,
|
||||
KeyboardArrowRight as KeyboardArrowRightIcon
|
||||
KeyboardArrowRight as KeyboardArrowRightIcon,
|
||||
InfoOutlined as InfoOutlinedIcon
|
||||
} from '@mui/icons-material';
|
||||
import Card from '@/components/common/Card';
|
||||
import { getManufacturingIndex, getManufacturingMonthlyOverview } from '@/services/manufacturingIndex/ManufacturingIndex';
|
||||
@ -40,10 +41,11 @@ const SelectField = (props) => (
|
||||
|
||||
const ManufacturingIndex = () => {
|
||||
// State management
|
||||
const [year, setYear] = useState('2025');
|
||||
const [year, setYear] = useState('All');
|
||||
const [searchMonth, setSearchMonth] = useState('');
|
||||
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 [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
@ -65,7 +67,7 @@ const ManufacturingIndex = () => {
|
||||
};
|
||||
|
||||
// Fetch data from API
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
@ -175,15 +177,12 @@ useEffect(() => {
|
||||
};
|
||||
});
|
||||
|
||||
setFilteredMonths(formattedData);
|
||||
setAllMonths(formattedData);
|
||||
applyFilters(year, searchMonth, formattedData);
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
totalItems: formattedData.length
|
||||
}));
|
||||
|
||||
if (formattedData.length > 0) {
|
||||
setSelectedMonth(formattedData[0]);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching manufacturing index:', err);
|
||||
console.error('Error details:', {
|
||||
@ -198,17 +197,16 @@ useEffect(() => {
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
}, []);
|
||||
|
||||
// ARROW CLICK செய்தால் இந்த function வேலை செய்யும்
|
||||
const handleMonthSelect = async (row) => {
|
||||
// ARROW CLICK
|
||||
const handleMonthSelect = async (row) => {
|
||||
try {
|
||||
|
||||
const yearNumber = row.year;
|
||||
const monthNumber = row.monthNumber;
|
||||
|
||||
setSelectedMonth(row);
|
||||
setActiveTab('manufacturing');
|
||||
setIsPopupOpen(true);
|
||||
setApiLoading(true);
|
||||
|
||||
@ -244,37 +242,39 @@ const handleMonthSelect = async (row) => {
|
||||
} finally {
|
||||
setApiLoading(false);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const handleClosePopup = () => {
|
||||
setIsPopupOpen(false);
|
||||
setMonthlyOverviewData(null);
|
||||
};
|
||||
|
||||
const handleYearChange = (e) => {
|
||||
const selectedYear = e.target.value;
|
||||
setYear(selectedYear);
|
||||
filterMonths(selectedYear, searchMonth);
|
||||
};
|
||||
|
||||
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);
|
||||
// Apply both year and search filters
|
||||
const applyFilters = (selectedYear, searchTerm, monthsData = allMonths) => {
|
||||
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;
|
||||
});
|
||||
|
||||
setFilteredMonths(filtered);
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
currentPage: 1,
|
||||
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 = () => {
|
||||
@ -302,7 +302,14 @@ const handleMonthSelect = async (row) => {
|
||||
};
|
||||
|
||||
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 || {};
|
||||
|
||||
// Show loading state
|
||||
@ -351,7 +358,8 @@ const handleMonthSelect = async (row) => {
|
||||
className="relative"
|
||||
>
|
||||
<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
|
||||
onClick={handleClosePopup}
|
||||
size="small"
|
||||
@ -376,6 +384,9 @@ const handleMonthSelect = async (row) => {
|
||||
</div>
|
||||
) : (
|
||||
<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 */}
|
||||
<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">
|
||||
@ -452,10 +463,16 @@ const handleMonthSelect = async (row) => {
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<div className="flex items-center text-sm text-green-600">
|
||||
<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>
|
||||
</Card>
|
||||
@ -476,6 +493,14 @@ const handleMonthSelect = async (row) => {
|
||||
<p className="text-sm text-gray-600">
|
||||
Filter by year and quickly jump to a month to see its ISIC breakdown.
|
||||
</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 className="flex items-center gap-3 w-full sm:w-auto">
|
||||
<div className="flex-1 sm:flex-none w-40">
|
||||
|
||||
@ -97,6 +97,23 @@ const ManufacturingTotal = ({ selectedMonthData, setActiveTab, monthlyOverviewDa
|
||||
the same month last year.
|
||||
</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">
|
||||
<button
|
||||
onClick={() => setActiveTab('isic2')}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user