Change UI month to quarter

This commit is contained in:
KarthiKKVardhan 2026-05-13 13:24:24 +05:30
parent 82bce2bb2d
commit c079995fdc
5 changed files with 22 additions and 22 deletions

View File

@ -400,7 +400,7 @@ const ManufacturingIndex = () => {
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>Monthly ISIC breakdown {selectedMonth?.quarter} - {selectedMonth?.month}</span> <span>Quarterly ISIC breakdown {selectedMonth?.quarter} - {selectedMonth?.month}</span>
<IconButton <IconButton
onClick={handleClosePopup} onClick={handleClosePopup}
size="small" size="small"
@ -426,7 +426,7 @@ const ManufacturingIndex = () => {
) : ( ) : (
<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"> <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. Start from the manufacturing total, then drill down into ISIC 2-digit and 3 & 4-digit groups for the selected quarter.
</p> </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">
@ -508,10 +508,10 @@ const ManufacturingIndex = () => {
<div className="flex flex-col md:flex-row justify-between items-start md:items-start gap-4"> <div className="flex flex-col md:flex-row justify-between items-start md:items-start gap-4">
<div> <div>
<h2 className="text-xl font-semibold text-gray-900 mb-2"> <h2 className="text-xl font-semibold text-gray-900 mb-2">
Manufacturing Index - Monthly overview Manufacturing Index - Quarterly overview
</h2> </h2>
<p className="text-sm text-gray-600 max-w-3xl"> <p className="text-sm text-gray-600 max-w-3xl">
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 grouplevel details. Quarterly manufacturing indices are automatically generated on the 11th of each quarter using the finalized Laspeyres item indices. This view enables users to monitor trends and drill down into ISIC grouplevel details.
</p> </p>
</div> </div>
@ -543,10 +543,10 @@ const ManufacturingIndex = () => {
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4"> <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4">
<div className="mb-4 sm:mb-0"> <div className="mb-4 sm:mb-0">
<h3 className="text-lg font-semibold text-gray-900 mb-1"> <h3 className="text-lg font-semibold text-gray-900 mb-1">
Manufacturing index by reference month ({filteredMonths.length}) Manufacturing Index
</h3> </h3>
<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 quarter to see its ISIC breakdown.
</p> </p>
<div className="flex items-center gap-4 mt-2"> <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"> <div className="text-sm text-gray-600 bg-gray-100 px-3 py-1 rounded-full">
@ -565,7 +565,7 @@ const ManufacturingIndex = () => {
</div> </div>
<input <input
type="text" type="text"
placeholder="Search month" placeholder="Search Quarter"
className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md h-[40px]" className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md h-[40px]"
value={searchMonth} value={searchMonth}
onChange={handleSearchMonth} onChange={handleSearchMonth}
@ -598,11 +598,11 @@ const ManufacturingIndex = () => {
<div className="w-full"> <div className="w-full">
<Table <Table
headers={[ headers={[
'Reference Month', 'Reference Year',
'Quarter', 'Quarter',
'Manufacturing Index', 'Manufacturing Index',
'Total Weight', 'Total Weight',
'MOM Change', 'QOQ Change',
'YOY Change', 'YOY Change',
'Generated On', 'Generated On',
'Status', 'Status',
@ -612,7 +612,7 @@ const ManufacturingIndex = () => {
const isSelected = selectedMonth?.month === row.month; const isSelected = selectedMonth?.month === row.month;
return [ return [
<div key="month" className={`${isSelected ? 'font-medium' : ''}`}> <div key="month" className={`${isSelected ? 'font-medium' : ''}`}>
{row.month} {row.year}
</div>, </div>,
<span className={isSelected ? 'font-medium' : ''} key="quarter"> <span className={isSelected ? 'font-medium' : ''} key="quarter">
{row.quarter} {row.quarter}

View File

@ -208,8 +208,8 @@ const ISIC2Digit = ({ setActiveTab, apiData }) => {
<div className="mt-6 ml-2 p-4 bg-yellow-50 rounded-md text-sm text-gray-700 w-full -mx-6 px-6"> <div className="mt-6 ml-2 p-4 bg-yellow-50 rounded-md text-sm text-gray-700 w-full -mx-6 px-6">
<p className="font-medium mb-2">Operational notes</p> <p className="font-medium mb-2">Operational notes</p>
<ul className="text-xs text-gray-600 space-y-1.5 list-disc pl-5"> <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>Manufacturing indices are auto-generated on the 11th using the latest validated item-level data for the previous reference quarter.</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>If an automated run fails, the status for that quarter 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> <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> </ul>
</div> </div>

View File

@ -183,8 +183,8 @@ const ISIC3Digit = ({ setActiveTab, apiData }) => {
<div className="mt-6 ml-2 p-4 bg-yellow-50 rounded-md text-sm text-gray-700 w-full -mx-6 px-6"> <div className="mt-6 ml-2 p-4 bg-yellow-50 rounded-md text-sm text-gray-700 w-full -mx-6 px-6">
<p className="font-medium mb-2">Operational notes</p> <p className="font-medium mb-2">Operational notes</p>
<ul className="text-xs text-gray-600 space-y-1.5 list-disc pl-5"> <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>Manufacturing indices are auto-generated on the 11th using the latest validated item-level data for the previous reference quarter.</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>If an automated run fails, the status for that quarter 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> <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> </ul>
</div> </div>

View File

@ -183,8 +183,8 @@ const ISIC4Digit = ({ setActiveTab, apiData }) => {
<div className="mt-6 ml-2 p-4 bg-yellow-50 rounded-md text-sm text-gray-700 w-full -mx-6 px-6"> <div className="mt-6 ml-2 p-4 bg-yellow-50 rounded-md text-sm text-gray-700 w-full -mx-6 px-6">
<p className="font-medium mb-2">Operational notes</p> <p className="font-medium mb-2">Operational notes</p>
<ul className="text-xs text-gray-600 space-y-1.5 list-disc pl-5"> <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>Manufacturing indices are auto-generated on the 11th using the latest validated item-level data for the previous reference quarter.</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>If an automated run fails, the status for that quarter 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> <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> </ul>
</div> </div>

View File

@ -13,7 +13,7 @@ const ManufacturingTotal = ({ selectedMonthData, setActiveTab, monthlyOverviewDa
<p className="text-xs font-semibold uppercase tracking-wider text-medium-500"> <p className="text-xs font-semibold uppercase tracking-wider text-medium-500">
Manufacturing Index (Headline) Manufacturing Index (Headline)
</p> </p>
<p className="text-gray-500">No data available for this month.</p> <p className="text-gray-500">No data available for this quarter.</p>
</div> </div>
); );
} }
@ -68,7 +68,7 @@ const ManufacturingTotal = ({ selectedMonthData, setActiveTab, monthlyOverviewDa
<div className="flex gap-6"> <div className="flex gap-6">
<div className="text-sm text-gray-700"> <div className="text-sm text-gray-700">
<span className="text-medium-500">MoM:</span>{' '} <span className="text-medium-500">QOQ:</span>{' '}
<span <span
className={`font-medium ${ className={`font-medium ${
momNumeric >= 0 momNumeric >= 0
@ -98,10 +98,10 @@ const ManufacturingTotal = ({ selectedMonthData, setActiveTab, monthlyOverviewDa
The manufacturing index{' '} The manufacturing index{' '}
{momNumeric >= 0 ? 'increased' : 'decreased'} by{' '} {momNumeric >= 0 ? 'increased' : 'decreased'} by{' '}
<strong>{Math.abs(momNumeric)}%</strong> compared to <strong>{Math.abs(momNumeric)}%</strong> compared to
the previous month and{' '} the previous quarter and{' '}
{yoyNumeric >= 0 ? 'increased' : 'decreased'} by{' '} {yoyNumeric >= 0 ? 'increased' : 'decreased'} by{' '}
<strong>{Math.abs(yoyNumeric)}%</strong> compared to <strong>{Math.abs(yoyNumeric)}%</strong> compared to
the same month last year. the same quarter last year.
</p> </p>
<div className="mt-4 p-4 bg-yellow-50 rounded-md text-sm text-gray-700 max-w-3xl"> <div className="mt-4 p-4 bg-yellow-50 rounded-md text-sm text-gray-700 max-w-3xl">
@ -114,8 +114,8 @@ const ManufacturingTotal = ({ selectedMonthData, setActiveTab, monthlyOverviewDa
<div className="border-t border-gray-200 pt-3 mt-3"> <div className="border-t border-gray-200 pt-3 mt-3">
<p className="font-medium mb-2">Operational notes</p> <p className="font-medium mb-2">Operational notes</p>
<ul className="text-xs text-gray-600 space-y-1.5 list-disc pl-5"> <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>Manufacturing indices are auto-generated on the 11th using the latest validated item-level data for the previous reference quarter.</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>If an automated run fails, the status for that quarter 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> <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> </ul>
</div> </div>