Merge pull request #2 from PolicyEngine/add-microsimulation-impacts

Add statewide microsimulation impacts tab

Author: DTrim99

frontend/app/(shell)/page.tsx

@@ -3,13 +3,15 @@
 import { useState } from 'react';
 import HouseholdCalculator from '@/components/HouseholdCalculator';
 import PolicyOverview from '@/components/PolicyOverview';
+import AggregateImpact from '@/components/AggregateImpact';
 
 export default function Home() {
-  const [activeTab, setActiveTab] = useState<'policy' | 'calculator'>('policy');
+  const [activeTab, setActiveTab] = useState<'policy' | 'calculator' | 'statewide'>('policy');
 
   const TAB_CONFIG = [
     { id: 'policy' as const, label: 'How it works' },
     { id: 'calculator' as const, label: 'Household calculator' },
+    { id: 'statewide' as const, label: 'Statewide impact' },
   ];
 
   return (
@@ -28,15 +30,15 @@ export default function Home() {
 
       <div className="max-w-5xl mx-auto px-4 py-8">
         {/* Tabs */}
-        <div className="flex space-x-1 mb-4" role="tablist">
+        <div className="flex space-x-1 mb-4 overflow-x-auto" role="tablist">
           {TAB_CONFIG.map((tab) => (
             <button
               key={tab.id}
               role="tab"
               aria-selected={activeTab === tab.id}
               aria-controls={`tabpanel-${tab.id}`}
               onClick={() => setActiveTab(tab.id)}
-              className={`px-6 py-3 rounded-t-lg font-semibold transition-colors ${
+              className={`px-6 py-3 rounded-t-lg font-semibold transition-colors whitespace-nowrap ${
                 activeTab === tab.id
                   ? 'bg-white text-primary-600 border-t-4 border-primary-500'
                   : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
@@ -53,11 +55,9 @@ export default function Home() {
           id={`tabpanel-${activeTab}`}
           className="bg-white rounded-lg shadow-md p-6"
         >
-          {activeTab === 'policy' ? (
-            <PolicyOverview />
-          ) : (
-            <HouseholdCalculator />
-          )}
+          {activeTab === 'policy' && <PolicyOverview />}
+          {activeTab === 'calculator' && <HouseholdCalculator />}
+          {activeTab === 'statewide' && <AggregateImpact />}
         </div>
       </div>
     </main>