Route economy drilldown pages

web-app-v2/src/App.tsx

@@ -46,6 +46,12 @@ function AppRoutes() {
               <Market initialTab="economy" />
             </ProtectedRoute>
           } />
+
+          <Route path="/economy/:economyPage" element={
+            <ProtectedRoute>
+              <Market initialTab="economy" />
+            </ProtectedRoute>
+          } />
           
           <Route path="/portfolio" element={
             <ProtectedRoute>

web-app-v2/src/pages/Market.tsx

@@ -10,7 +10,7 @@ import {
   useGetSecondaryBondDailyDetailQuery,
   useGetSecondaryBondsQuery,
 } from '../store/api/economyApi';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { 
   Search, 
   TrendingUp, 
@@ -39,6 +39,7 @@ type AssetTab = 'stocks' | 'funds' | 'bonds' | 'economy';
 
 export default function Market({ initialTab = 'stocks' }: { initialTab?: AssetTab }) {
   const [searchParams, setSearchParams] = useSearchParams();
+  const { economyPage } = useParams();
   const initialSearch = searchParams.get('search') || '';
   const [activeTab, setActiveTab] = useState<AssetTab>(initialTab);
   const [searchQuery, setSearchQuery] = useState(initialSearch);
@@ -206,6 +207,7 @@ export default function Market({ initialTab = 'stocks' }: { initialTab?: AssetTa
 
       {activeTab === 'economy' ? (
         <EconomyPanel
+          routePage={economyPage}
           intelligence={intelligence}
           alerts={filteredAlerts}
           secondaryBonds={filteredSecondaryBonds}
@@ -308,6 +310,7 @@ type AssetRowProps = {
 };
 
 type EconomyPanelProps = {
+  routePage?: string;
   intelligence: any | null;
   alerts: any[];
   secondaryBonds: any[];
@@ -353,6 +356,7 @@ const buildInflationChartRows = (series: any[], selectedBaskets: string[]) => {
 const formatDuration = (value: any) => String(value || 'UNKNOWN');
 
 const EconomyPanel: React.FC<EconomyPanelProps> = ({
+  routePage,
   intelligence,
   alerts,
   secondaryBonds,
@@ -362,7 +366,7 @@ const EconomyPanel: React.FC<EconomyPanelProps> = ({
   isLoading,
   onRefresh,
 }) => {
-  const [subPage, setSubPage] = React.useState<EconomySubPage>('overview');
+  const navigate = useNavigate();
   const [selectedBondDay, setSelectedBondDay] = React.useState<string | null>(null);
   const topOpportunities = alerts.filter((alert) => alert.severity === 'opportunity').slice(0, 4);
   const cautions = alerts.filter((alert) => alert.severity !== 'opportunity').slice(0, 4);
@@ -388,6 +392,17 @@ const EconomyPanel: React.FC<EconomyPanelProps> = ({
     { key: 'bonds', label: 'BONDS', icon: <Landmark className="h-3.5 w-3.5" /> },
     { key: 'nbs', label: 'NBS_DATA', icon: <FileText className="h-3.5 w-3.5" /> },
   ];
+  const validRoutePages = new Set<EconomySubPage>(['overview', 'inflation', 'bonds', 'nbs']);
+  const subPage = validRoutePages.has(routePage as EconomySubPage) ? routePage as EconomySubPage : 'overview';
+  const openSubPage = (page: EconomySubPage) => {
+    void navigate(page === 'overview' ? '/economy' : `/economy/${page}`);
+  };
+  const pageIndex = subPages.findIndex((item) => item.key === subPage);
+  const pageVariants = {
+    enter: { opacity: 0, x: 36 },
+    center: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: -28 },
+  };
 
   return (
     <div className="space-y-4">
@@ -414,7 +429,7 @@ const EconomyPanel: React.FC<EconomyPanelProps> = ({
             <button
               key={item.key}
               type="button"
-              onClick={() => setSubPage(item.key)}
+              onClick={() => openSubPage(item.key)}
               className={`flex items-center justify-center gap-2 px-4 py-3 text-[10px] mono font-bold transition-all ${subPage === item.key ? 'bg-accent text-bg' : 'bg-bg-card text-text-dim hover:text-white'}`}
             >
               {item.icon}
@@ -458,136 +473,149 @@ const EconomyPanel: React.FC<EconomyPanelProps> = ({
         </div>
       </section>
 
-      {subPage === 'overview' && (
-        <>
-          <div className="grid gap-4 xl:grid-cols-[1.15fr_0.85fr]">
-            <SecondaryBondSnapshotTable secondaryBonds={secondaryBonds} isLoading={isLoading} />
-            <section className="space-y-4">
-              <AlertList title="GOOD_DEALS" alerts={topOpportunities} emptyLabel="NO_GOOD_DEAL_ALERTS" />
-              <AlertList title="STRANGE_OR_EXPENSIVE" alerts={cautions} emptyLabel="NO_CAUTION_ALERTS" />
-            </section>
-          </div>
-          <SourceDocuments documents={documents} />
-        </>
-      )}
-
-      {subPage === 'inflation' && (
-        <div className="space-y-4">
-          <section className="border border-line bg-bg-card">
-            <PanelHeader icon={<TrendingUp className="h-4 w-4" />} title="INFLATION_BY_BASKET" />
-            <div className="grid gap-px bg-line md:grid-cols-3">
-              <MetricCell label="LATEST_MONTH" value={inflationDetail?.latest_date || '--'} />
-              <MetricCell label="BASKETS_TRACKED" value={(inflationDetail?.baskets?.length || 0).toString()} />
-              <MetricCell label="SERIES_POINTS" value={(inflationSeries.length || 0).toString()} />
-            </div>
-            <div className="h-[360px] px-5 py-4">
-              <ResponsiveContainer width="100%" height="100%">
-                <LineChart data={inflationChartRows}>
-                  <CartesianGrid stroke="#24303a" strokeDasharray="3 3" />
-                  <XAxis dataKey="date" stroke="#8b95a1" tick={{ fontSize: 10 }} />
-                  <YAxis stroke="#8b95a1" tick={{ fontSize: 10 }} tickFormatter={(value) => `${value}%`} />
-                  <Tooltip contentStyle={{ background: '#090b0f', border: '1px solid #26313a', color: '#fff' }} />
-                  {selectedBaskets.map((basket, index) => (
-                    <Line
-                      key={basket}
-                      type="monotone"
-                      dataKey={basket}
-                      dot={false}
-                      strokeWidth={2}
-                      stroke={chartColors[index % chartColors.length]}
-                    />
-                  ))}
-                </LineChart>
-              </ResponsiveContainer>
-            </div>
-            <div className="grid gap-px bg-line md:grid-cols-2">
-              <InflationRank title="FASTEST_RISERS" rows={inflationDetail?.top_risers || []} />
-              <InflationRank title="LOWEST_INFLATION" rows={inflationDetail?.top_disinflation || []} />
-            </div>
-          </section>
-        </div>
-      )}
+      <div className="relative overflow-hidden">
+        <AnimatePresence mode="wait" custom={pageIndex}>
+          <motion.div
+            key={subPage}
+            custom={pageIndex}
+            variants={pageVariants}
+            initial="enter"
+            animate="center"
+            exit="exit"
+            transition={{ duration: 0.22, ease: 'easeOut' }}
+            className="space-y-4"
+          >
+            {subPage === 'overview' && (
+              <>
+                <div className="grid gap-4 xl:grid-cols-[1.15fr_0.85fr]">
+                  <SecondaryBondSnapshotTable secondaryBonds={secondaryBonds} isLoading={isLoading} />
+                  <section className="space-y-4">
+                    <AlertList title="GOOD_DEALS" alerts={topOpportunities} emptyLabel="NO_GOOD_DEAL_ALERTS" />
+                    <AlertList title="STRANGE_OR_EXPENSIVE" alerts={cautions} emptyLabel="NO_CAUTION_ALERTS" />
+                  </section>
+                </div>
+                <SourceDocuments documents={documents} />
+              </>
+            )}
 
-      {subPage === 'bonds' && (
-        <div className="space-y-4">
-          <section className="border border-line bg-bg-card">
-            <PanelHeader icon={<Landmark className="h-4 w-4" />} title="ECONOMIC_BONDS_DAILY" />
-            <div className="flex gap-px overflow-x-auto bg-line border-b border-line">
-              {bondDays.map((day: any) => (
-                <button
-                  key={day.trade_date}
-                  type="button"
-                  onClick={() => setSelectedBondDay(day.trade_date)}
-                  className={`min-w-[150px] px-4 py-3 text-left ${activeBondDay === day.trade_date ? 'bg-accent text-bg' : 'bg-bg-card text-text-dim hover:text-white'}`}
-                >
-                  <p className="text-[10px] mono font-bold">{day.trade_date}</p>
-                  <p className="mt-1 text-[9px] mono">{day.trade_count} trades</p>
-                </button>
-              ))}
-            </div>
-            <div className="grid gap-px bg-line md:grid-cols-4">
-              <MetricCell label="ACTIVE_DAY" value={activeBondDay || '--'} />
-              <MetricCell label="DAY_TRADES" value={activeTrades.length.toString()} />
-              <MetricCell label="AVG_PRICE" value={formatPercent(bondDays.find((d: any) => d.trade_date === activeBondDay)?.average_price_percent)} />
-              <MetricCell label="AVG_YIELD" value={formatPercent(bondDays.find((d: any) => d.trade_date === activeBondDay)?.average_yield_percent)} />
-            </div>
-          </section>
-
-          <div className="grid gap-4 xl:grid-cols-2">
-            <section className="border border-line bg-bg-card">
-              <PanelHeader icon={<Activity className="h-4 w-4" />} title="YIELD_CURVE_BY_DURATION" />
-              <div className="h-[320px] px-5 py-4">
-                <ResponsiveContainer width="100%" height="100%">
-                  <LineChart data={yieldCurveRows}>
-                    <CartesianGrid stroke="#24303a" strokeDasharray="3 3" />
-                    <XAxis dataKey="duration_bucket" stroke="#8b95a1" tick={{ fontSize: 10 }} />
-                    <YAxis stroke="#8b95a1" tick={{ fontSize: 10 }} tickFormatter={(value) => `${value}%`} />
-                    <Tooltip contentStyle={{ background: '#090b0f', border: '1px solid #26313a', color: '#fff' }} />
-                    <Line type="monotone" dataKey="average_yield_percent" stroke="#00f09a" strokeWidth={2} dot />
-                  </LineChart>
-                </ResponsiveContainer>
-              </div>
-            </section>
-            <DurationTable rows={activeDayDurationRows} />
-          </div>
+            {subPage === 'inflation' && (
+              <section className="border border-line bg-bg-card">
+                <PanelHeader icon={<TrendingUp className="h-4 w-4" />} title="INFLATION_BY_BASKET" />
+                <div className="grid gap-px bg-line md:grid-cols-3">
+                  <MetricCell label="LATEST_MONTH" value={inflationDetail?.latest_date || '--'} />
+                  <MetricCell label="BASKETS_TRACKED" value={(inflationDetail?.baskets?.length || 0).toString()} />
+                  <MetricCell label="SERIES_POINTS" value={(inflationSeries.length || 0).toString()} />
+                </div>
+                <div className="h-[360px] px-5 py-4">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <LineChart data={inflationChartRows}>
+                      <CartesianGrid stroke="#24303a" strokeDasharray="3 3" />
+                      <XAxis dataKey="date" stroke="#8b95a1" tick={{ fontSize: 10 }} />
+                      <YAxis stroke="#8b95a1" tick={{ fontSize: 10 }} tickFormatter={(value) => `${value}%`} />
+                      <Tooltip contentStyle={{ background: '#090b0f', border: '1px solid #26313a', color: '#fff' }} />
+                      {selectedBaskets.map((basket, index) => (
+                        <Line
+                          key={basket}
+                          type="monotone"
+                          dataKey={basket}
+                          dot={false}
+                          strokeWidth={2}
+                          stroke={chartColors[index % chartColors.length]}
+                        />
+                      ))}
+                    </LineChart>
+                  </ResponsiveContainer>
+                </div>
+                <div className="grid gap-px bg-line md:grid-cols-2">
+                  <InflationRank title="FASTEST_RISERS" rows={inflationDetail?.top_risers || []} />
+                  <InflationRank title="LOWEST_INFLATION" rows={inflationDetail?.top_disinflation || []} />
+                </div>
+              </section>
+            )}
 
-          <div className="grid gap-4 xl:grid-cols-[1fr_0.9fr]">
-            <BondTradesTable rows={activeTrades} />
-            <AnomalyList rows={activeAnomalies} />
-          </div>
-        </div>
-      )}
+            {subPage === 'bonds' && (
+              <>
+                <section className="border border-line bg-bg-card">
+                  <PanelHeader icon={<Landmark className="h-4 w-4" />} title="ECONOMIC_BONDS_DAILY" />
+                  <div className="flex gap-px overflow-x-auto bg-line border-b border-line">
+                    {bondDays.map((day: any) => (
+                      <button
+                        key={day.trade_date}
+                        type="button"
+                        onClick={() => setSelectedBondDay(day.trade_date)}
+                        className={`min-w-[150px] px-4 py-3 text-left ${activeBondDay === day.trade_date ? 'bg-accent text-bg' : 'bg-bg-card text-text-dim hover:text-white'}`}
+                      >
+                        <p className="text-[10px] mono font-bold">{day.trade_date}</p>
+                        <p className="mt-1 text-[9px] mono">{day.trade_count} trades</p>
+                      </button>
+                    ))}
+                  </div>
+                  <div className="grid gap-px bg-line md:grid-cols-4">
+                    <MetricCell label="ACTIVE_DAY" value={activeBondDay || '--'} />
+                    <MetricCell label="DAY_TRADES" value={activeTrades.length.toString()} />
+                    <MetricCell label="AVG_PRICE" value={formatPercent(bondDays.find((d: any) => d.trade_date === activeBondDay)?.average_price_percent)} />
+                    <MetricCell label="AVG_YIELD" value={formatPercent(bondDays.find((d: any) => d.trade_date === activeBondDay)?.average_yield_percent)} />
+                  </div>
+                </section>
+
+                <div className="grid gap-4 xl:grid-cols-2">
+                  <section className="border border-line bg-bg-card">
+                    <PanelHeader icon={<Activity className="h-4 w-4" />} title="YIELD_CURVE_BY_DURATION" />
+                    <div className="h-[320px] px-5 py-4">
+                      <ResponsiveContainer width="100%" height="100%">
+                        <LineChart data={yieldCurveRows}>
+                          <CartesianGrid stroke="#24303a" strokeDasharray="3 3" />
+                          <XAxis dataKey="duration_bucket" stroke="#8b95a1" tick={{ fontSize: 10 }} />
+                          <YAxis stroke="#8b95a1" tick={{ fontSize: 10 }} tickFormatter={(value) => `${value}%`} />
+                          <Tooltip contentStyle={{ background: '#090b0f', border: '1px solid #26313a', color: '#fff' }} />
+                          <Line type="monotone" dataKey="average_yield_percent" stroke="#00f09a" strokeWidth={2} dot />
+                        </LineChart>
+                      </ResponsiveContainer>
+                    </div>
+                  </section>
+                  <DurationTable rows={activeDayDurationRows} />
+                </div>
+
+                <div className="grid gap-4 xl:grid-cols-[1fr_0.9fr]">
+                  <BondTradesTable rows={activeTrades} />
+                  <AnomalyList rows={activeAnomalies} />
+                </div>
+              </>
+            )}
 
-      {subPage === 'nbs' && (
-        <div className="space-y-4">
-          <SourceDocuments documents={documents.filter((doc) => String(doc.source || '').toLowerCase() === 'nbs')} />
-          <section className="border border-line bg-bg-card">
-            <PanelHeader icon={<FileText className="h-4 w-4" />} title="NBS_BASKET_LATEST_VALUES" />
-            <div className="overflow-x-auto">
-              <table className="w-full min-w-[760px] text-left">
-                <thead className="border-b border-line bg-black/30">
-                  <tr>
-                    <HeaderCell>BASKET</HeaderCell>
-                    <HeaderCell align="right">INFLATION</HeaderCell>
-                    <HeaderCell align="right">INDEX</HeaderCell>
-                    <HeaderCell align="right">WEIGHT</HeaderCell>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-line">
-                  {(inflationDetail?.latest || []).slice(0, 24).map((row: any) => (
-                    <tr key={`${row.basket}-${row.date}`}>
-                      <BodyCell strong>{row.basket}</BodyCell>
-                      <BodyCell align="right">{formatPercent(row.inflation_rate)}</BodyCell>
-                      <BodyCell align="right">{row.index_value != null ? Number(row.index_value).toFixed(2) : '--'}</BodyCell>
-                      <BodyCell align="right">{row.weight != null ? Number(row.weight).toFixed(2) : '--'}</BodyCell>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </section>
-        </div>
-      )}
+            {subPage === 'nbs' && (
+              <>
+                <SourceDocuments documents={documents.filter((doc) => String(doc.source || '').toLowerCase() === 'nbs')} />
+                <section className="border border-line bg-bg-card">
+                  <PanelHeader icon={<FileText className="h-4 w-4" />} title="NBS_BASKET_LATEST_VALUES" />
+                  <div className="overflow-x-auto">
+                    <table className="w-full min-w-[760px] text-left">
+                      <thead className="border-b border-line bg-black/30">
+                        <tr>
+                          <HeaderCell>BASKET</HeaderCell>
+                          <HeaderCell align="right">INFLATION</HeaderCell>
+                          <HeaderCell align="right">INDEX</HeaderCell>
+                          <HeaderCell align="right">WEIGHT</HeaderCell>
+                        </tr>
+                      </thead>
+                      <tbody className="divide-y divide-line">
+                        {(inflationDetail?.latest || []).slice(0, 24).map((row: any) => (
+                          <tr key={`${row.basket}-${row.date}`}>
+                            <BodyCell strong>{row.basket}</BodyCell>
+                            <BodyCell align="right">{formatPercent(row.inflation_rate)}</BodyCell>
+                            <BodyCell align="right">{row.index_value != null ? Number(row.index_value).toFixed(2) : '--'}</BodyCell>
+                            <BodyCell align="right">{row.weight != null ? Number(row.weight).toFixed(2) : '--'}</BodyCell>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </section>
+              </>
+            )}
+          </motion.div>
+        </AnimatePresence>
+      </div>
     </div>
   );
 };