diff --git a/ipi-survey-platform/src/components/admin/AdminHeader.jsx b/ipi-survey-platform/src/components/admin/AdminHeader.jsx index bac1a82..2f3c5d4 100644 --- a/ipi-survey-platform/src/components/admin/AdminHeader.jsx +++ b/ipi-survey-platform/src/components/admin/AdminHeader.jsx @@ -146,6 +146,12 @@ const AdminHeader = () => { iconActive={configActiveSrc} iconInactive={configInactiveSrc} /> +
@@ -240,6 +246,12 @@ const AdminHeader = () => { iconActive={configActiveSrc} iconInactive={configInactiveSrc} /> + { totalItems: 0 }); - // Month name to number mapping - const monthMap = { - 'Jan': 1, 'Feb': 2, 'Mar': 3, 'Apr': 4, - 'May': 5, 'Jun': 6, 'Jul': 7, 'Aug': 8, - 'Sep': 9, 'Oct': 10, 'Nov': 11, 'Dec': 12 - }; // Fetch data from API useEffect(() => { @@ -348,277 +345,292 @@ const ManufacturingIndex = () => { } return ( -
- {/* Popup Dialog */} - - - Monthly ISIC breakdown +
+ +
+ {/* Popup Dialog */} + + + Monthly ISIC breakdown - {selectedMonth?.month} - - - - - - - -
- {apiLoading ? ( -
-
- Loading detailed data... -
- ) : ( -
-

- Start from the manufacturing total, then drill down into ISIC 2-digit and 3 & 4-digit groups for the selected month. -

- {/* Tabs Header */} -
-
-
- {['manufacturing', 'isic2', 'isic3', 'isic4'].map((tab) => ( - - ))} + + + + + + + +
+ {apiLoading ? ( +
+
+ Loading detailed data... +
+ ) : ( +
+

+ Start from the manufacturing total, then drill down into ISIC 2-digit and 3 & 4-digit groups for the selected month. +

+ {/* Tabs Header */} +
+
+
+ {['manufacturing', 'isic2', 'isic3', 'isic4'].map((tab) => ( + + ))} +
+
-
+
+ + {/* Tab Content */} +
+ {activeTab === 'manufacturing' && ( + + )} + + {activeTab === 'isic2' && ( + + )} + + {activeTab === 'isic3' && ( + + )} + + {activeTab === 'isic4' && ( + + )}
- - {/* Tab Content */} -
- {activeTab === 'manufacturing' && ( - - )} - - {activeTab === 'isic2' && ( - - )} - - {activeTab === 'isic3' && ( - - )} - - {activeTab === 'isic4' && ( - - )} -
-
- )} -
- -
- - {/* Main UI */} -
-
- -
-
-

- Manufacturing Index - Monthly overview -

-

- Monthly manufacturing indices are automatically generated on the 11th of each month using the finalized Laspeyres item indices. This view enables users to monitor trends and drill down into ISIC group–level details. -

-
- -
-
-
- - Next scheduled run: 11 Nov 2025, 02:00 GST -
-
- - Formula: Manufacturing indext = Σ (sector weighti × group indexi,t) -
-
-
+ )}
-
-
+ +
- {/* Main Table */} -
- -
-
- {/* Filters */} -
-
-
-

- Manufacturing index — by reference month ({filteredMonths.length}) -

-

- Filter by year and quickly jump to a month to see its ISIC breakdown. -

-
-
- Base year: 2022 = 100 -
-
- Coverage: Manufacturing (ISIC C) + {/* Main UI */} +
+ {/* Breadcrumbs */} + + +
+ +
+
+

+ Manufacturing Index - Monthly overview +

+

+ Monthly manufacturing indices are automatically generated on the 11th of each month using the finalized Laspeyres item indices. This view enables users to monitor trends and drill down into ISIC group–level details. +

+
+ +
+
+
+ + Next scheduled run: 11 Nov 2025, 02:00 GST +
+
+ + Formula: Manufacturing indext = Σ (sector weighti × group indexi,t) +
+
+
+
+
+
+ + {/* Main Table */} +
+ +
+
+ {/* Filters */} +
+
+
+

+ Manufacturing index — by reference month ({filteredMonths.length}) +

+

+ Filter by year and quickly jump to a month to see its ISIC breakdown. +

+
+
+ Base year: 2022 = 100 +
+
+ Coverage: Manufacturing (ISIC C) +
-
-
-
-
-
- Search +
+
+
+
+ Search +
+
- +
+ ({ value: y, label: y }))} />
+
-
- ({ value: y, label: y }))} - /> -
- +
+
+ + {/* Table */} +
+
+ { + const isSelected = selectedMonth?.month === row.month; + return [ +
+ {row.month} +
, + + {row.index} (2022=100) + , + = 0 ? 'text-green-600' : 'text-red-600'} ${isSelected ? 'font-medium' : ''}`} key="mom"> + {row.mom}% + , + = 0 ? 'text-green-600' : 'text-red-600'} ${isSelected ? 'font-medium' : ''}`} key="yoy"> + {row.yoy}% + , + + {row.generated} + , + + + {row.status} + + , +
handleMonthSelect(row)} + > + +
+ ]; + })} + columnWidths={['180px', '190px', '130px', '130px', '200px', '120px', '80px']} + getRowClass={(index) => { + const isSelected = selectedMonth?.month === filteredMonths[index]?.month; + return isSelected ? 'bg-[#F5F0E1]' : 'hover:bg-gray-50'; + }} + pagination={{ + currentPage: pagination.currentPage, + onPageChange: (page) => setPagination(prev => ({ ...prev, currentPage: page })), + pageSize: pagination.pageSize, + totalItems: filteredMonths.length, + pageSizeOptions: [10, 20, 50, 100], + onPageSizeChange: (size) => { + setPagination(prev => ({ + ...prev, + pageSize: size, + currentPage: 1 + })); + } + }} + className="w-full" + /> - {/* Table */} -
-
-
{ - const isSelected = selectedMonth?.month === row.month; - return [ -
- {row.month} -
, - - {row.index} (2022=100) - , - = 0 ? 'text-green-600' : 'text-red-600'} ${isSelected ? 'font-medium' : ''}`} key="mom"> - {row.mom}% - , - = 0 ? 'text-green-600' : 'text-red-600'} ${isSelected ? 'font-medium' : ''}`} key="yoy"> - {row.yoy}% - , - - {row.generated} - , - - - {row.status} - - , -
handleMonthSelect(row)} - > - -
- ]; - })} - columnWidths={['180px', '190px', '130px', '130px', '200px', '120px', '80px']} - getRowClass={(index) => { - const isSelected = selectedMonth?.month === filteredMonths[index]?.month; - return isSelected ? 'bg-[#F5F0E1]' : 'hover:bg-gray-50'; - }} - pagination={{ - currentPage: pagination.currentPage, - onPageChange: (page) => setPagination(prev => ({ ...prev, currentPage: page })), - pageSize: pagination.pageSize, - totalItems: filteredMonths.length, - pageSizeOptions: [10, 20, 50, 100], - onPageSizeChange: (size) => { - setPagination(prev => ({ - ...prev, - pageSize: size, - currentPage: 1 - })); - } - }} - className="w-full" - /> - - +

+ Note: Indices shown here are headline manufacturing totals. Use the drill-down actions to move from manufacturing total to ISIC 2-digit, then to ISIC 3 & 4-digit groups. +

- -

- Note: Indices shown here are headline manufacturing totals. Use the drill-down actions to move from manufacturing total to ISIC 2-digit, then to ISIC 3 & 4-digit groups. -

- - + +