diff --git a/.github/workflows/chromatic.yaml b/.github/workflows/chromatic.yaml index e94ee2599..bf1a6b540 100644 --- a/.github/workflows/chromatic.yaml +++ b/.github/workflows/chromatic.yaml @@ -31,6 +31,12 @@ jobs: - name: Run Chromatic working-directory: ./app - run: bunx chromatic --only-changed ${{ github.event_name == 'push' && '--auto-accept-changes' || '' }} --build-script-name="storybook:build" --project-token=${{ secrets.CHROMATIC_PROJECT_TOKEN }} + run: >- + bunx chromatic + --only-changed + --build-script-name="storybook:build" + --project-token=${{ secrets.CHROMATIC_PROJECT_TOKEN }} + ${{ github.event_name == 'push' && '--auto-accept-changes' || '' }} + ${{ github.event_name == 'pull_request' && format('--patch-build={0}...main', github.head_ref) || '' }} env: VITE_APP_MODE: website diff --git a/app/.stylelintignore b/app/.stylelintignore index 1521c8b76..b448b494b 100644 --- a/app/.stylelintignore +++ b/app/.stylelintignore @@ -1 +1,2 @@ dist +storybook-static diff --git a/app/src/CalculatorRouter.tsx b/app/src/CalculatorRouter.tsx index c372bd30c..68cbb78ed 100644 --- a/app/src/CalculatorRouter.tsx +++ b/app/src/CalculatorRouter.tsx @@ -2,32 +2,24 @@ * Router for the Calculator app (app.policyengine.org) * Contains only the interactive calculator functionality */ -import { lazy } from 'react'; -import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'; +import { createBrowserRouter, Navigate, Outlet, RouterProvider } from 'react-router-dom'; +import PathwayLayout from './components/PathwayLayout'; import StandardLayout from './components/StandardLayout'; import NotFoundPage from './pages/NotFound.page'; +import PoliciesPage from './pages/Policies.page'; +import PopulationsPage from './pages/Populations.page'; +import ModifyReportPage from './pages/reportBuilder/ModifyReportPage'; +import ReportBuilderPage from './pages/reportBuilder/ReportBuilderPage'; +import ReportOutputPage from './pages/ReportOutput.page'; +import ReportsPage from './pages/Reports.page'; +import SimulationsPage from './pages/Simulations.page'; +import PolicyPathwayWrapper from './pathways/policy/PolicyPathwayWrapper'; +import PopulationPathwayWrapper from './pathways/population/PopulationPathwayWrapper'; +import SimulationPathwayWrapper from './pathways/simulation/SimulationPathwayWrapper'; import { CountryGuard } from './routing/guards/CountryGuard'; import { MetadataGuard } from './routing/guards/MetadataGuard'; import { MetadataLazyLoader } from './routing/guards/MetadataLazyLoader'; import { RedirectToCountry } from './routing/RedirectToCountry'; -import SuspenseOutlet from './routing/SuspenseOutlet'; - -// Lazy-loaded page components — only fetched when the route is visited -const PoliciesPage = lazy(() => import('./pages/Policies.page')); -const PopulationsPage = lazy(() => import('./pages/Populations.page')); -const ReportOutputPage = lazy(() => import('./pages/ReportOutput.page')); -const ReportsPage = lazy(() => import('./pages/Reports.page')); -const SimulationsPage = lazy(() => import('./pages/Simulations.page')); - -// Lazy-loaded pathway wrappers — heavy components with their own sub-routes -const PolicyPathwayWrapper = lazy(() => import('./pathways/policy/PolicyPathwayWrapper')); -const PopulationPathwayWrapper = lazy( - () => import('./pathways/population/PopulationPathwayWrapper') -); -const ReportPathwayWrapper = lazy(() => import('./pathways/report/ReportPathwayWrapper')); -const SimulationPathwayWrapper = lazy( - () => import('./pathways/simulation/SimulationPathwayWrapper') -); /** * Layout wrapper that renders StandardLayout with Outlet for nested routes. @@ -37,7 +29,7 @@ const SimulationPathwayWrapper = lazy( function StandardLayoutOutlet() { return ( - + ); } @@ -68,12 +60,8 @@ const router = createBrowserRouter( }, // Pathway routes - pathways manage their own layouts { - element: , + element: , children: [ - { - path: 'reports/create', - element: , - }, { path: 'simulations/create', element: , @@ -117,6 +105,14 @@ const router = createBrowserRouter( path: 'policies', element: , }, + { + path: 'reports/create', + element: , + }, + { + path: 'reports/create/:userReportId', + element: , + }, { path: 'account', element:
Account settings page
, diff --git a/app/src/adapters/congressional-district/congressionalDistrictDataAdapter.ts b/app/src/adapters/congressional-district/congressionalDistrictDataAdapter.ts index 68dbe7445..8baa52ef1 100644 --- a/app/src/adapters/congressional-district/congressionalDistrictDataAdapter.ts +++ b/app/src/adapters/congressional-district/congressionalDistrictDataAdapter.ts @@ -25,7 +25,9 @@ export function buildDistrictLabelLookup(regions: MetadataRegionEntry[]): Distri for (const region of regions) { if (region.type === US_REGION_TYPES.CONGRESSIONAL_DISTRICT) { - lookup.set(region.name, region.label); + // Strip "congressional_district/" prefix so keys match API district IDs (e.g., "AL-01") + const key = region.name.replace(/^congressional_district\//, ''); + lookup.set(key, region.label); } } diff --git a/app/src/api/societyWideCalculation.ts b/app/src/api/societyWideCalculation.ts index 61656b6b3..2b472e25c 100644 --- a/app/src/api/societyWideCalculation.ts +++ b/app/src/api/societyWideCalculation.ts @@ -43,12 +43,20 @@ export async function fetchSocietyWideCalculation( }); if (!response.ok) { + let body = ''; + try { + body = await response.text(); + } catch { + // ignore + } console.error( - '[fetchSocietyWideCalculation] Failed with status:', - response.status, - response.statusText + `[fetchSocietyWideCalculation] ${response.status} ${response.statusText}`, + url, + body + ); + throw new Error( + `Society-wide calculation failed (${response.status}): ${body || response.statusText}` ); - throw new Error(`Society-wide calculation failed: ${response.statusText}`); } const data = await response.json(); diff --git a/app/src/api/usageTracking.ts b/app/src/api/usageTracking.ts new file mode 100644 index 000000000..0b9ba0253 --- /dev/null +++ b/app/src/api/usageTracking.ts @@ -0,0 +1,103 @@ +/** + * Usage Tracking Store + * + * A lightweight system for tracking "last used" timestamps for any ingredient + * type (policies, households, geographies, etc.). + * + * This is separate from association data - it only tracks when items + * were last accessed, not the items themselves. + * + * Usage: + * import { policyUsageStore } from '@/api/usageTracking'; + * + * // Record that a policy was used + * policyUsageStore.recordUsage(policyId); + * + * // Get 5 most recently used policy IDs + * const recentIds = policyUsageStore.getRecentIds(5); + */ + +/** ISO timestamp string */ +export type UsageData = Record; + +/** + * Generic store for tracking usage of items by ID. + * Each ingredient type gets its own store instance with a unique storage key. + */ +export class UsageTrackingStore { + constructor(private readonly storageKey: string) {} + + /** + * Record that an item was used/accessed. + * Updates the lastUsedAt timestamp. + */ + recordUsage(id: string): string { + const usage = this.getAll(); + const timestamp = new Date().toISOString(); + usage[id] = timestamp; + localStorage.setItem(this.storageKey, JSON.stringify(usage)); + return timestamp; + } + + /** + * Get all usage records (id -> lastUsedAt timestamp). + */ + getAll(): UsageData { + try { + const stored = localStorage.getItem(this.storageKey); + return stored ? JSON.parse(stored) : {}; + } catch { + console.error(`[UsageTrackingStore] Failed to parse ${this.storageKey}`); + return {}; + } + } + + /** + * Get IDs sorted by most recently used. + * @param limit Maximum number of IDs to return (default 10) + */ + getRecentIds(limit = 10): string[] { + const usage = this.getAll(); + return Object.entries(usage) + .sort(([, a], [, b]) => b.localeCompare(a)) + .slice(0, limit) + .map(([id]) => id); + } + + /** + * Get the last used timestamp for a specific ID. + */ + getLastUsed(id: string): string | null { + return this.getAll()[id] || null; + } + + /** + * Check if an item has any usage recorded. + */ + hasUsage(id: string): boolean { + return !!this.getAll()[id]; + } + + /** + * Remove usage record for a specific ID. + */ + removeUsage(id: string): void { + const usage = this.getAll(); + delete usage[id]; + localStorage.setItem(this.storageKey, JSON.stringify(usage)); + } + + /** + * Clear all usage records for this store. + */ + clear(): void { + localStorage.removeItem(this.storageKey); + } +} + +// Pre-configured stores for each ingredient type +export const policyUsageStore = new UsageTrackingStore('policy-usage'); +export const householdUsageStore = new UsageTrackingStore('household-usage'); +export const geographyUsageStore = new UsageTrackingStore('geography-usage'); +export const simulationUsageStore = new UsageTrackingStore('simulation-usage'); +export const reportUsageStore = new UsageTrackingStore('report-usage'); diff --git a/app/src/components/IngredientReadView.story.tsx b/app/src/components/IngredientReadView.story.tsx index ab99246a7..f0fd7ba2c 100644 --- a/app/src/components/IngredientReadView.story.tsx +++ b/app/src/components/IngredientReadView.story.tsx @@ -7,9 +7,6 @@ const meta: Meta = { component: IngredientReadView, args: { onBuild: () => {}, - enableSelection: true, - isSelected: () => false, - onSelectionChange: () => {}, }, }; diff --git a/app/src/components/IngredientReadView.tsx b/app/src/components/IngredientReadView.tsx index 8ac5b221c..740e39c40 100644 --- a/app/src/components/IngredientReadView.tsx +++ b/app/src/components/IngredientReadView.tsx @@ -1,7 +1,6 @@ import { IconPlus } from '@tabler/icons-react'; import { Button, - Checkbox, Spinner, ShadcnTable as Table, TableBody, @@ -31,9 +30,6 @@ interface IngredientReadViewProps { searchValue?: string; onSearchChange?: (value: string) => void; onMoreFilters?: () => void; - enableSelection?: boolean; - isSelected?: (recordId: string) => boolean; - onSelectionChange?: (recordId: string, selected: boolean) => void; } export default function IngredientReadView({ @@ -50,9 +46,6 @@ export default function IngredientReadView({ searchValue: _searchValue = '', onSearchChange: _onSearchChange, onMoreFilters: _onMoreFilters, - enableSelection = true, - isSelected = () => false, - onSelectionChange, }: IngredientReadViewProps) { return (
@@ -135,16 +128,6 @@ export default function IngredientReadView({ - {enableSelection && ( - - {/* Optional: Add "select all" checkbox here in the future */} - - )} {columns.map((column) => ( - {data.map((record) => { - const selected = isSelected(record.id); - return ( - { - if (enableSelection && onSelectionChange) { - onSelectionChange(record.id, !selected); - } - }} - > - {enableSelection && ( - - { - if (onSelectionChange) { - onSelectionChange(record.id, !!checked); - } - }} - onClick={(e) => e.stopPropagation()} - /> - - )} - {columns.map((column) => ( - - - - ))} - - ); - })} + {data.map((record) => ( + + {columns.map((column) => ( + + + + ))} + + ))}
)} diff --git a/app/src/components/columns/ActionsColumn.tsx b/app/src/components/columns/ActionsColumn.tsx new file mode 100644 index 000000000..57f8a5e66 --- /dev/null +++ b/app/src/components/columns/ActionsColumn.tsx @@ -0,0 +1,30 @@ +import { Button } from '@/components/ui/button'; +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; +import { ActionsColumnConfig, IngredientRecord } from './types'; + +interface ActionsColumnProps { + config: ActionsColumnConfig; + record: IngredientRecord; +} + +export function ActionsColumn({ config, record }: ActionsColumnProps) { + return ( +
+ {config.actions.map((action) => ( + + + + + {action.tooltip} + + ))} +
+ ); +} diff --git a/app/src/components/columns/ColumnRenderer.tsx b/app/src/components/columns/ColumnRenderer.tsx index f33387b0e..c27df3a66 100644 --- a/app/src/components/columns/ColumnRenderer.tsx +++ b/app/src/components/columns/ColumnRenderer.tsx @@ -1,11 +1,13 @@ import { Text } from '@/components/ui'; import { colors } from '@/designTokens'; +import { ActionsColumn } from './ActionsColumn'; import { BulletsColumn } from './BulletsColumn'; import { LinkColumn } from './LinkColumn'; import { MenuColumn } from './MenuColumn'; import { SplitMenuColumn } from './SplitMenuColumn'; import { TextColumn } from './TextColumn'; import { + ActionsColumnConfig, BulletsColumnConfig, BulletsValue, ColumnConfig, @@ -28,7 +30,12 @@ interface ColumnRendererProps { export function ColumnRenderer({ config, record }: ColumnRendererProps) { const value = record[config.key] as ColumnValue; - if (!value && config.type !== 'menu' && config.type !== 'split-menu') { + if ( + !value && + config.type !== 'menu' && + config.type !== 'split-menu' && + config.type !== 'actions' + ) { return ( — @@ -57,6 +64,9 @@ export function ColumnRenderer({ config, record }: ColumnRendererProps) { case 'split-menu': return ; + case 'actions': + return ; + default: return {String(value)}; } diff --git a/app/src/components/columns/index.ts b/app/src/components/columns/index.ts index 837f25e5d..a3a034fdd 100644 --- a/app/src/components/columns/index.ts +++ b/app/src/components/columns/index.ts @@ -2,6 +2,7 @@ export * from './types'; // Export column components +export { ActionsColumn } from './ActionsColumn'; export { ColumnRenderer } from './ColumnRenderer'; export { TextColumn } from './TextColumn'; export { LinkColumn } from './LinkColumn'; diff --git a/app/src/components/columns/types.ts b/app/src/components/columns/types.ts index f708b11b9..61079713f 100644 --- a/app/src/components/columns/types.ts +++ b/app/src/components/columns/types.ts @@ -48,12 +48,24 @@ export interface SplitMenuColumnConfig extends BaseColumnConfig { onAction: (action: string, recordId: string) => void; } +export interface ActionsColumnConfig extends BaseColumnConfig { + type: 'actions'; + actions: Array<{ + action: string; + tooltip: string; + icon: React.ReactNode; + color?: string; + }>; + onAction: (action: string, recordId: string) => void; +} + export type ColumnConfig = | TextColumnConfig | LinkColumnConfig | BulletsColumnConfig | MenuColumnConfig - | SplitMenuColumnConfig; + | SplitMenuColumnConfig + | ActionsColumnConfig; // Data value interfaces export interface TextValue { diff --git a/app/src/components/common/ActionButtons.story.tsx b/app/src/components/common/ActionButtons.story.tsx new file mode 100644 index 000000000..f59a8c98d --- /dev/null +++ b/app/src/components/common/ActionButtons.story.tsx @@ -0,0 +1,53 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Group } from '@/components/ui'; +import { + EditAndSaveNewButton, + EditAndUpdateButton, + EditDefaultButton, + ShareButton, + SwapButton, + ViewButton, +} from './ActionButtons'; + +const meta: Meta = { + title: 'Building blocks/ActionButtons', + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +export default meta; +type Story = StoryObj; + +export const IconOnly: Story = { + render: () => ( + + {}} /> + {}} /> + {}} /> + {}} /> + + ), +}; + +export const WithLabels: Story = { + render: () => ( + + {}} /> + {}} /> + + ), +}; + +export const Disabled: Story = { + render: () => ( + + {}} /> + {}} /> + + ), +}; diff --git a/app/src/components/common/ActionButtons.tsx b/app/src/components/common/ActionButtons.tsx new file mode 100644 index 000000000..4eb31bdba --- /dev/null +++ b/app/src/components/common/ActionButtons.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import { + IconInfoCircle, + IconNewSection, + IconPencil, + IconShare, + IconStatusChange, + IconTransfer, +} from '@tabler/icons-react'; +import { Button } from '@/components/ui/button'; +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; + +export interface ActionButtonProps { + label?: string; + tooltip?: string; + onClick?: () => void; + disabled?: boolean; + loading?: boolean; + tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'; +} + +interface ActionButtonBaseProps extends ActionButtonProps { + icon: React.ComponentType<{ size: number }>; + tooltip: string; +} + +function ActionButtonBase({ + icon: Icon, + tooltip, + label, + onClick, + disabled, + tooltipPosition = 'bottom', +}: ActionButtonBaseProps) { + return ( + + + {label ? ( + + ) : ( + + )} + + {tooltip} + + ); +} + +export function ViewButton({ tooltip: tooltipOverride, ...props }: ActionButtonProps) { + return ; +} + +export function EditAndUpdateButton(props: ActionButtonProps) { + return ; +} + +export function EditAndSaveNewButton(props: ActionButtonProps) { + return ; +} + +export function EditDefaultButton(props: ActionButtonProps) { + return ; +} + +export function ShareButton(props: ActionButtonProps) { + return ; +} + +export function SwapButton(props: ActionButtonProps) { + return ; +} diff --git a/app/src/components/icons/CountryOutlineIcons.tsx b/app/src/components/icons/CountryOutlineIcons.tsx new file mode 100644 index 000000000..053b4c9d8 --- /dev/null +++ b/app/src/components/icons/CountryOutlineIcons.tsx @@ -0,0 +1,173 @@ +/** + * Country outline icons for US and UK + * Source: https://github.com/djaiss/mapsicon (MIT License) + * These icons use currentColor for fill, so they inherit text color from parent. + */ + +interface CountryIconProps { + size?: number; + color?: string; + className?: string; + style?: React.CSSProperties; +} + +export function USOutlineIcon({ size = 24, color, className, style }: CountryIconProps) { + return ( + + + + + + + ); +} + +export function UKOutlineIcon({ size = 24, color, className, style }: CountryIconProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/app/src/components/report/DashboardCard.story.tsx b/app/src/components/report/DashboardCard.story.tsx new file mode 100644 index 000000000..1fe081ca0 --- /dev/null +++ b/app/src/components/report/DashboardCard.story.tsx @@ -0,0 +1,106 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { IconCoin, IconScale, IconUsers } from '@tabler/icons-react'; +import { Group, Text } from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import DashboardCard from './DashboardCard'; +import MetricCard from './MetricCard'; + +function CardHeader({ icon, label }: { icon: React.ReactNode; label: string }) { + return ( + +
+ {icon} +
+ + {label} + + + ); +} + +const meta: Meta = { + title: 'Report output/DashboardCard', + component: DashboardCard, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +export default meta; +type Story = StoryObj; + +export const Shrunken: Story = { + args: { + mode: 'shrunken', + zIndex: 1, + expandDirection: 'down-right', + shrunkenHeader: } label="Budgetary impact" />, + shrunkenBody: , + expandedContent:
Expanded budgetary charts
, + onToggleMode: () => {}, + }, +}; + +export const WithColSpan: Story = { + args: { + mode: 'shrunken', + zIndex: 1, + expandDirection: 'down-right', + colSpan: 2, + shrunkenHeader: ( + } label="Congressional district impact" /> + ), + shrunkenBody: Map and rankings displayed here, + expandedContent:
Expanded map view
, + onToggleMode: () => {}, + }, +}; + +export const CustomBackground: Story = { + args: { + mode: 'shrunken', + zIndex: 1, + expandDirection: 'down-left', + shrunkenBackground: colors.primary[50], + shrunkenBorderColor: colors.primary[200], + shrunkenHeader: } label="Inequality" />, + shrunkenBody: ( + + + + + ), + expandedContent:
Expanded inequality charts
, + onToggleMode: () => {}, + }, +}; diff --git a/app/src/components/report/DashboardCard.tsx b/app/src/components/report/DashboardCard.tsx new file mode 100644 index 000000000..511e5b0b8 --- /dev/null +++ b/app/src/components/report/DashboardCard.tsx @@ -0,0 +1,345 @@ +import { useEffect, useLayoutEffect, useRef, useState } from 'react'; +import { IconArrowsMinimize } from '@tabler/icons-react'; +import { motion } from 'framer-motion'; +import { Button } from '@/components/ui/button'; +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; +import { colors, spacing } from '@/designTokens'; + +const FADE_MS = 150; +const RESIZE_S = 0.35; +export const SHRUNKEN_CARD_HEIGHT = 200; + +export type ExpandDirection = 'down-right' | 'down-left' | 'up-right' | 'up-left'; + +interface DashboardCardProps { + mode: 'expanded' | 'shrunken'; + zIndex: number; + expandDirection: ExpandDirection; + expandedContent: React.ReactNode; + onToggleMode?: () => void; + gridGap?: number; + + /** Header pinned to top of shrunken card (e.g. icon + label) */ + shrunkenHeader: React.ReactNode; + /** Body centered in remaining space below header */ + shrunkenBody?: React.ReactNode; + + // Layout + colSpan?: number; + /** Number of grid rows the card occupies when shrunken (default 1) */ + shrunkenRows?: number; + /** Number of grid rows the card occupies when expanded (default 2) */ + expandedRows?: number; + + /** Controls (e.g. SegmentedControl) rendered in a row with the minimize button when expanded */ + expandedControls?: React.ReactNode; + + // Style overrides (apply only when shrunken/idle) + shrunkenBackground?: string; + shrunkenBorderColor?: string; + padding?: string; +} + +const ANCHOR: Record = { + 'down-right': { top: 0, left: 0 }, + 'down-left': { top: 0, right: 0 }, + 'up-right': { bottom: 0, left: 0 }, + 'up-left': { bottom: 0, right: 0 }, +}; + +const RESIZE_TRANSITION = { + duration: RESIZE_S, + ease: [0.4, 0, 0.2, 1] as const, +}; + +type Phase = + | 'idle' // shrunken, relative, content visible + | 'pre-expand' // shrunken content fading out + | 'expanding' // card resizing to expanded dimensions + | 'expanded' // at expanded size, expanded content visible + | 'pre-collapse' // expanded content fading out + | 'collapsing'; // card resizing back to cell dimensions + +export default function DashboardCard({ + mode, + zIndex, + expandDirection, + expandedContent, + onToggleMode, + gridGap = 16, + shrunkenHeader, + shrunkenBody, + colSpan = 1, + shrunkenRows = 1, + expandedRows = 2, + expandedControls, + shrunkenBackground, + shrunkenBorderColor, + padding: paddingProp, +}: DashboardCardProps) { + const cardRef = useRef(null); + const isExpanded = mode === 'expanded'; + const cardPadding = paddingProp ?? spacing.lg; + const shrunkenHeight = SHRUNKEN_CARD_HEIGHT * shrunkenRows + gridGap * (shrunkenRows - 1); + + const [phase, setPhase] = useState('idle'); + const [cell, setCell] = useState<{ w: number; h: number } | null>(null); + // Controls the 1-frame-delayed fade-in of expanded content + const [expandedVisible, setExpandedVisible] = useState(false); + + // --- Detect mode changes and drive phase transitions --- + useLayoutEffect(() => { + if (mode === 'expanded') { + if (phase === 'idle') { + // Measure cell while card is still in flow + if (cardRef.current) { + setCell({ + w: cardRef.current.offsetWidth, + h: cardRef.current.offsetHeight, + }); + } + setPhase('pre-expand'); + } else if (phase === 'collapsing' || phase === 'pre-collapse') { + // Reverse a collapse mid-animation + setPhase('expanding'); + } + } + if (mode === 'shrunken') { + if (phase === 'expanded') { + setPhase('pre-collapse'); + } else if (phase === 'pre-expand' || phase === 'expanding') { + // Reverse an expand mid-animation + setPhase('collapsing'); + } + } + }, [mode, phase]); + + // --- Timed fade phases (pre-expand / pre-collapse) --- + useEffect(() => { + if (phase === 'pre-expand') { + const t = setTimeout(() => setPhase('expanding'), FADE_MS); + return () => clearTimeout(t); + } + if (phase === 'pre-collapse') { + const t = setTimeout(() => setPhase('collapsing'), FADE_MS); + return () => clearTimeout(t); + } + }, [phase]); + + // --- Expanded content: mount with opacity 0, then fade in after 1 frame --- + useEffect(() => { + if (phase === 'expanded') { + const raf = requestAnimationFrame(() => { + setExpandedVisible(true); + }); + return () => cancelAnimationFrame(raf); + } + setExpandedVisible(false); + }, [phase]); + + // --- Trigger Plotly resize after expanded content becomes visible --- + useEffect(() => { + if (expandedVisible) { + const t = setTimeout(() => { + window.dispatchEvent(new Event('resize')); + }, 50); + return () => clearTimeout(t); + } + }, [expandedVisible]); + + // Note: no need to clear framer-motion inline styles on return to idle — + // the collapse animation targets cell.h (= SHRUNKEN_CARD_HEIGHT), so the + // residual inline height is already correct. Clearing here would also fire + // on initial mount, wiping out React's height before the first paint. + + // --- Resize animation complete handler --- + const handleAnimationComplete = () => { + if (phase === 'expanding') { + setPhase('expanded'); + } else if (phase === 'collapsing') { + setPhase('idle'); + setCell(null); + window.dispatchEvent(new Event('resize')); + } + }; + + // --- Derived values --- + const isLifted = phase !== 'idle'; + const expandedW = colSpan >= 2 ? (cell?.w ?? 0) : cell ? cell.w * 2 + gridGap : 0; + // Expanded height is always based on single-row cell height, not the shrunken + // card height (which may span multiple rows via shrunkenRows). + const singleRowH = SHRUNKEN_CARD_HEIGHT; + const expandedH = cell ? singleRowH * expandedRows + gridGap * (expandedRows - 1) : 0; + + // Background/border: use overrides only when idle (shrunken) + const cardBackground = + !isLifted && shrunkenBackground ? shrunkenBackground : colors.background.primary; + const cardBorderColor = + !isLifted && shrunkenBorderColor ? shrunkenBorderColor : colors.border.light; + + const shrunkenContentOpacity = phase === 'idle' ? 1 : 0; + const mountExpanded = phase === 'expanded' || phase === 'pre-collapse'; + const expandedContentOpacity = phase === 'expanded' && expandedVisible ? 1 : 0; + + // Animate target: cell size when shrinking, expanded size when growing + const getAnimateTarget = (): { width: number; height: number } | undefined => { + if (!cell) { + return undefined; + } + if (phase === 'expanding' || phase === 'expanded' || phase === 'pre-collapse') { + return { width: expandedW, height: expandedH }; + } + // pre-expand, collapsing + return { width: cell.w, height: cell.h }; + }; + + const anchor = ANCHOR[expandDirection]; + + const expandButton = onToggleMode ? ( + isExpanded ? ( + + + + + Collapse + + ) : ( + + ) + ) : null; + + return ( + /* Wrapper: stays in grid flow, fixed height always */ +
1 ? { gridColumn: `span ${colSpan}` } : {}), + ...(shrunkenRows > 1 ? { gridRow: `span ${shrunkenRows}` } : {}), + }} + > + + {/* Content area */} +
+ {/* Shrunken layer — always mounted, opacity-controlled */} +
+
+
+ {shrunkenHeader} + {expandButton} +
+
+
{shrunkenBody}
+
+
+
+ + {/* Expanded layer — only mounted after card finishes expanding */} + {mountExpanded && ( +
+ {/* Controls row: expandedControls on left, minimize button on right */} + {onToggleMode && ( +
+
{expandedControls}
+ {expandButton} +
+ )} +
{expandedContent}
+
+ )} +
+ +
+ ); +} diff --git a/app/src/components/report/MetricCard.tsx b/app/src/components/report/MetricCard.tsx index 9f836288a..8da62d833 100644 --- a/app/src/components/report/MetricCard.tsx +++ b/app/src/components/report/MetricCard.tsx @@ -1,11 +1,11 @@ -import { IconArrowDown, IconArrowUp, IconMinus } from '@tabler/icons-react'; +import { IconAlertTriangle, IconArrowDown, IconArrowUp, IconMinus } from '@tabler/icons-react'; import { colors } from '@/designTokens'; -type MetricTrend = 'positive' | 'negative' | 'neutral'; +type MetricTrend = 'positive' | 'negative' | 'neutral' | 'error'; interface MetricCardProps { - /** Label describing the metric */ - label: string; + /** Label describing the metric (omit to hide) */ + label?: string; /** The main value to display */ value: string; /** Optional secondary value or context */ @@ -18,6 +18,8 @@ interface MetricCardProps { description?: string; /** Invert the arrow direction (useful when decrease is good, like poverty) */ invertArrow?: boolean; + /** Center all content (label, value row, subtext) */ + centered?: boolean; } /** @@ -34,6 +36,7 @@ export default function MetricCard({ hero = false, description, invertArrow = false, + centered = false, }: MetricCardProps) { const getTrendColor = () => { switch (trend) { @@ -41,12 +44,18 @@ export default function MetricCard({ return colors.primary[600]; case 'negative': return colors.gray[600]; + case 'error': + return 'rgb(220, 53, 69)'; default: return colors.gray[500]; } }; const getTrendIcon = () => { + if (trend === 'error') { + return ; + } + // When invertArrow is true, flip the arrow direction // (useful for metrics like poverty where decrease is good) const showUpArrow = invertArrow ? trend === 'negative' : trend === 'positive'; @@ -64,23 +73,37 @@ export default function MetricCard({ const trendColor = getTrendColor(); return ( -
+
{/* Label */} -

- {label} -

+ {label && ( +

+ {label} +

+ )} {/* Value with trend indicator */} -
+
{trend !== 'neutral' && (
{getTrendIcon()} diff --git a/app/src/components/report/ReportActionButtons.story.tsx b/app/src/components/report/ReportActionButtons.story.tsx index aaaa6d65a..3d5a18af3 100644 --- a/app/src/components/report/ReportActionButtons.story.tsx +++ b/app/src/components/report/ReportActionButtons.story.tsx @@ -7,7 +7,7 @@ const meta: Meta = { args: { onShare: () => {}, onSave: () => {}, - onEdit: () => {}, + onView: () => {}, }, }; diff --git a/app/src/components/report/ReportActionButtons.tsx b/app/src/components/report/ReportActionButtons.tsx index a19977cdf..a71fb624e 100644 --- a/app/src/components/report/ReportActionButtons.tsx +++ b/app/src/components/report/ReportActionButtons.tsx @@ -1,25 +1,30 @@ -import { IconBookmark, IconPencil, IconShare } from '@tabler/icons-react'; -import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui'; +import { IconBookmark, IconCode, IconSettings } from '@tabler/icons-react'; +import { ShareButton } from '@/components/common/ActionButtons'; +import { Group } from '@/components/ui'; +import { Button } from '@/components/ui/button'; +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; interface ReportActionButtonsProps { isSharedView: boolean; onShare?: () => void; onSave?: () => void; - onEdit?: () => void; + onView?: () => void; + onReproduce?: () => void; } /** * ReportActionButtons - Action buttons for report output header * * Renders different buttons based on view type: - * - Normal view: Share + Edit buttons + * - Normal view: Reproduce + View/edit + Share buttons * - Shared view: Save button with tooltip */ export function ReportActionButtons({ isSharedView, onShare, onSave, - onEdit, + onView, + onReproduce, }: ReportActionButtonsProps) { if (isSharedView) { return ( @@ -40,13 +45,29 @@ export function ReportActionButtons({ } return ( - <> - - - + + + + + + View/edit report + + + + + + Reproduce in Python + + + ); } diff --git a/app/src/components/ui/Group.tsx b/app/src/components/ui/Group.tsx index e2b1c432f..94770f9df 100644 --- a/app/src/components/ui/Group.tsx +++ b/app/src/components/ui/Group.tsx @@ -51,7 +51,7 @@ const Group = React.forwardRef( justifyMap[justify ?? 'start'], alignMap[align], wrap === 'wrap' ? 'tw:flex-wrap' : 'tw:flex-nowrap', - grow && '[&>*]:tw:flex-1', + grow && 'tw:[&>*]:flex-1', className )} {...props} diff --git a/app/src/components/ui/badge.tsx b/app/src/components/ui/badge.tsx index 532a5a3dd..c40a3b7c0 100644 --- a/app/src/components/ui/badge.tsx +++ b/app/src/components/ui/badge.tsx @@ -30,7 +30,8 @@ function Badge({ asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { - const Comp = asChild ? Slot.Root : 'span'; + // Cast needed: dual csstype versions in monorepo cause SlotProps style mismatch + const Comp = (asChild ? Slot.Root : 'span') as React.ElementType; return ( & { asChild?: boolean; }) { - const Comp = asChild ? Slot.Root : 'button'; + // Cast needed: dual csstype versions in monorepo cause SlotProps style mismatch + const Comp = (asChild ? Slot.Root : 'button') as React.ElementType; return ( ) { + return ; +} + +function CollapsibleTrigger({ + ...props +}: React.ComponentProps) { + return ; +} + +function CollapsibleContent({ + ...props +}: React.ComponentProps) { + return ; +} + +export { Collapsible, CollapsibleTrigger, CollapsibleContent }; diff --git a/app/src/components/ui/date-picker.story.tsx b/app/src/components/ui/date-picker.story.tsx new file mode 100644 index 000000000..cc580b922 --- /dev/null +++ b/app/src/components/ui/date-picker.story.tsx @@ -0,0 +1,57 @@ +import { useState } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { DatePicker } from './date-picker'; + +const meta: Meta = { + title: 'UI/DatePicker', + component: DatePicker, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +export default meta; +type Story = StoryObj; + +function ControlledDatePicker({ + initialValue, + minDate, + maxDate, +}: { + initialValue?: Date; + minDate?: Date; + maxDate?: Date; +}) { + const [value, setValue] = useState(initialValue ?? null); + return ( + + ); +} + +export const Empty: Story = { + render: () => , +}; + +export const WithValue: Story = { + render: () => , +}; + +export const WithDateRange: Story = { + render: () => ( + + ), +}; diff --git a/app/src/components/ui/date-picker.tsx b/app/src/components/ui/date-picker.tsx new file mode 100644 index 000000000..14db0b4d3 --- /dev/null +++ b/app/src/components/ui/date-picker.tsx @@ -0,0 +1,153 @@ +import dayjs from 'dayjs'; +import * as React from 'react'; +import { useState } from 'react'; +import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'; +import { cn } from '@/lib/utils'; +import { Button } from './button'; +import { Popover, PopoverContent, PopoverTrigger } from './popover'; + +interface DatePickerProps { + value: Date | null | undefined; + onChange: (date: Date | null) => void; + minDate?: Date | null | undefined; + maxDate?: Date | null | undefined; + placeholder?: string; + displayFormat?: string; + className?: string; +} + +const DAYS_OF_WEEK = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; + +function DatePicker({ + value, + onChange, + minDate, + maxDate, + placeholder = 'Select date', + displayFormat = 'MMM. D, YYYY', + className, +}: DatePickerProps) { + const [open, setOpen] = useState(false); + const initialMonth = value ? dayjs(value) : dayjs(); + const [viewMonth, setViewMonth] = useState(initialMonth.startOf('month')); + + const displayText = value ? dayjs(value).format(displayFormat) : placeholder; + + // Generate calendar days for the current view month + const startOfMonth = viewMonth.startOf('month'); + const endOfMonth = viewMonth.endOf('month'); + const startDay = startOfMonth.day(); // 0 = Sunday + const daysInMonth = viewMonth.daysInMonth(); + + // Build 6 rows x 7 cols grid + const calendarDays: (dayjs.Dayjs | null)[] = []; + for (let i = 0; i < startDay; i++) { + calendarDays.push(startOfMonth.subtract(startDay - i, 'day')); + } + for (let i = 1; i <= daysInMonth; i++) { + calendarDays.push(viewMonth.date(i)); + } + const remaining = 42 - calendarDays.length; + for (let i = 1; i <= remaining; i++) { + calendarDays.push(endOfMonth.add(i, 'day')); + } + + const handleSelect = (day: dayjs.Dayjs) => { + onChange(day.toDate()); + setOpen(false); + }; + + const isDateDisabled = (day: dayjs.Dayjs) => { + if (minDate && day.isBefore(dayjs(minDate), 'day')) { + return true; + } + if (maxDate && day.isAfter(dayjs(maxDate), 'day')) { + return true; + } + return false; + }; + + return ( + + + + + + {/* Month navigation */} +
+ + {viewMonth.format('MMMM YYYY')} + +
+ {/* Day of week headers */} +
+ {DAYS_OF_WEEK.map((d) => ( +
+ {d} +
+ ))} +
+ {/* Calendar grid */} +
+ {calendarDays.map((day, i) => { + if (!day) { + return
; + } + const isCurrentMonth = day.month() === viewMonth.month(); + const isSelected = value && day.isSame(dayjs(value), 'day'); + const isDisabled = isDateDisabled(day); + const isToday = day.isSame(dayjs(), 'day'); + + return ( + + ); + })} +
+ + + ); +} + +export { DatePicker }; +export type { DatePickerProps }; diff --git a/app/src/components/ui/index.ts b/app/src/components/ui/index.ts index 9dc46332d..41507b0d1 100644 --- a/app/src/components/ui/index.ts +++ b/app/src/components/ui/index.ts @@ -98,3 +98,30 @@ export { export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs'; export { Textarea } from './textarea'; export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tooltip'; +export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible'; +export { SegmentedControl } from './segmented-control'; +export type { SegmentedControlOption, SegmentedControlProps } from './segmented-control'; +export { + Popover, + PopoverTrigger, + PopoverContent, + PopoverAnchor, + PopoverHeader, + PopoverTitle, + PopoverDescription, +} from './popover'; +export { + Command, + CommandDialog, + CommandInput, + CommandList, + CommandEmpty, + CommandGroup, + CommandItem, + CommandShortcut, + CommandSeparator, +} from './command'; +export { YearPicker } from './year-picker'; +export type { YearPickerProps } from './year-picker'; +export { DatePicker } from './date-picker'; +export type { DatePickerProps } from './date-picker'; diff --git a/app/src/components/ui/segmented-control.story.tsx b/app/src/components/ui/segmented-control.story.tsx new file mode 100644 index 000000000..8a5f6f2d4 --- /dev/null +++ b/app/src/components/ui/segmented-control.story.tsx @@ -0,0 +1,62 @@ +import { useState } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { SegmentedControl } from './segmented-control'; + +const meta: Meta = { + title: 'UI/SegmentedControl', + component: SegmentedControl, +}; + +export default meta; +type Story = StoryObj; + +function ControlledSegmented({ + size, + options, + defaultValue, +}: { + size?: 'xs' | 'sm'; + options: { label: string; value: string; disabled?: boolean }[]; + defaultValue: string; +}) { + const [value, setValue] = useState(defaultValue); + return ; +} + +export const Default: Story = { + render: () => ( + + ), +}; + +export const ExtraSmall: Story = { + render: () => ( + + ), +}; + +export const ThreeOptions: Story = { + render: () => ( + + ), +}; diff --git a/app/src/components/ui/segmented-control.tsx b/app/src/components/ui/segmented-control.tsx new file mode 100644 index 000000000..b0c365c6a --- /dev/null +++ b/app/src/components/ui/segmented-control.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import { Tabs as TabsPrimitive } from 'radix-ui'; +import { cn } from '@/lib/utils'; + +interface SegmentedControlOption { + label: string; + value: string; + disabled?: boolean; +} + +interface SegmentedControlProps { + value: string; + onValueChange: (value: string) => void; + options: SegmentedControlOption[]; + size?: 'xs' | 'sm'; + className?: string; +} + +function SegmentedControl({ + value, + onValueChange, + options, + size = 'sm', + className, +}: SegmentedControlProps) { + return ( + + + {options.map((option) => ( + + {option.label} + + ))} + + + ); +} + +export { SegmentedControl }; +export type { SegmentedControlOption, SegmentedControlProps }; diff --git a/app/src/components/ui/year-picker.story.tsx b/app/src/components/ui/year-picker.story.tsx new file mode 100644 index 000000000..459b50f27 --- /dev/null +++ b/app/src/components/ui/year-picker.story.tsx @@ -0,0 +1,57 @@ +import { useState } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { YearPicker } from './year-picker'; + +const meta: Meta = { + title: 'UI/YearPicker', + component: YearPicker, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +export default meta; +type Story = StoryObj; + +function ControlledYearPicker({ + initialValue, + minDate, + maxDate, +}: { + initialValue?: Date; + minDate?: Date; + maxDate?: Date; +}) { + const [value, setValue] = useState(initialValue ?? null); + return ( + + ); +} + +export const Empty: Story = { + render: () => , +}; + +export const WithValue: Story = { + render: () => , +}; + +export const WithRange: Story = { + render: () => ( + + ), +}; diff --git a/app/src/components/ui/year-picker.tsx b/app/src/components/ui/year-picker.tsx new file mode 100644 index 000000000..b25b0e0f7 --- /dev/null +++ b/app/src/components/ui/year-picker.tsx @@ -0,0 +1,111 @@ +import * as React from 'react'; +import { useState } from 'react'; +import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'; +import { cn } from '@/lib/utils'; +import { Button } from './button'; +import { Popover, PopoverContent, PopoverTrigger } from './popover'; + +interface YearPickerProps { + value: Date | null | undefined; + onChange: (date: Date | null) => void; + minDate?: Date | null | undefined; + maxDate?: Date | null | undefined; + placeholder?: string; + className?: string; +} + +function YearPicker({ + value, + onChange, + minDate, + maxDate, + placeholder = 'Select year', + className, +}: YearPickerProps) { + const [open, setOpen] = useState(false); + const currentYear = value ? value.getFullYear() : new Date().getFullYear(); + const [decadeStart, setDecadeStart] = useState(Math.floor(currentYear / 10) * 10); + + const minYear = minDate ? minDate.getFullYear() : 1900; + const maxYear = maxDate ? maxDate.getFullYear() : 2100; + + const years = Array.from({ length: 12 }, (_, i) => decadeStart - 1 + i); + + const handleSelect = (year: number) => { + onChange(new Date(year, 0, 1)); + setOpen(false); + }; + + const displayText = value ? value.getFullYear().toString() : placeholder; + + return ( + + + + + + {/* Decade navigation */} +
+ + + {decadeStart} – {decadeStart + 9} + + +
+ {/* Year grid */} +
+ {years.map((year) => { + const isSelected = value && value.getFullYear() === year; + const isDisabled = year < minYear || year > maxYear; + const isOutOfDecade = year < decadeStart || year > decadeStart + 9; + return ( + + ); + })} +
+ + + ); +} + +export { YearPicker }; +export type { YearPickerProps }; diff --git a/app/src/components/visualization/choropleth/MapTypeToggle.tsx b/app/src/components/visualization/choropleth/MapTypeToggle.tsx index 3e39666a9..99aa49761 100644 --- a/app/src/components/visualization/choropleth/MapTypeToggle.tsx +++ b/app/src/components/visualization/choropleth/MapTypeToggle.tsx @@ -2,7 +2,7 @@ * Toggle component for switching between map visualization types */ -import { Tabs, TabsList, TabsTrigger } from '@/components/ui'; +import { SegmentedControl } from '@/components/ui'; import type { MapVisualizationType } from './types'; interface MapTypeToggleProps { @@ -12,6 +12,11 @@ interface MapTypeToggleProps { onChange: (value: MapVisualizationType) => void; } +const MAP_TYPE_OPTIONS = [ + { label: 'Geographic', value: 'geographic' as MapVisualizationType }, + { label: 'Hex grid', value: 'hex' as MapVisualizationType }, +]; + /** * Toggle component for switching between geographic and hex map views. * @@ -25,11 +30,11 @@ interface MapTypeToggleProps { */ export function MapTypeToggle({ value, onChange }: MapTypeToggleProps) { return ( - onChange(val as MapVisualizationType)}> - - Geographic - Hex grid - - + onChange(val as MapVisualizationType)} + size="xs" + options={MAP_TYPE_OPTIONS} + /> ); } diff --git a/app/src/components/visualization/choropleth/USDistrictChoroplethMap.tsx b/app/src/components/visualization/choropleth/USDistrictChoroplethMap.tsx index 76a0dd870..392b94762 100644 --- a/app/src/components/visualization/choropleth/USDistrictChoroplethMap.tsx +++ b/app/src/components/visualization/choropleth/USDistrictChoroplethMap.tsx @@ -321,6 +321,7 @@ export function USDistrictChoroplethMap({ focusState, visualizationType = 'geographic', exportRef, + errorStates, }: USDistrictChoroplethMapProps) { const uniqueId = useId(); const containerRef = useRef(null); @@ -353,6 +354,12 @@ export function USDistrictChoroplethMap({ const hexFit = useGeoJSONFitProjection(geoJSON, isHexMap, SVG_WIDTH, fullConfig.height); + // Build error state set for efficient lookup + const errorStateSet = useMemo( + () => new Set(errorStates?.map((s) => s.toUpperCase()) ?? []), + [errorStates] + ); + const focusView = useFocusStateView(geoJSON, focusState); const filteredGeoJSON = useMemo(() => { @@ -376,13 +383,25 @@ export function USDistrictChoroplethMap({ const handleMouseEnter = useCallback( (event: React.MouseEvent, districtId: string) => { - const dataPoint = dataMap.get(districtId); - if (!dataPoint) { + const rect = containerRef.current?.getBoundingClientRect(); + if (!rect) { return; } - const rect = containerRef.current?.getBoundingClientRect(); - if (!rect) { + // Check if district belongs to an error state + const stateAbbr = districtId.split('-')[0]?.toUpperCase(); + if (stateAbbr && errorStateSet.has(stateAbbr)) { + setTooltip({ + x: event.clientX - rect.left, + y: event.clientY - rect.top, + label: districtId, + value: 'Error loading data', + }); + return; + } + + const dataPoint = dataMap.get(districtId); + if (!dataPoint) { return; } @@ -393,7 +412,7 @@ export function USDistrictChoroplethMap({ value: fullConfig.formatValue(dataPoint.value), }); }, - [dataMap, fullConfig] + [dataMap, fullConfig, errorStateSet] ); const handleMouseMove = useCallback( @@ -471,6 +490,7 @@ export function USDistrictChoroplethMap({ ref={mergedRef} className="tw:flex tw:items-stretch" style={{ + height: '100%', border: `1px solid ${colors.border.light}`, borderRadius: spacing.radius.container, backgroundColor: colors.background.primary, @@ -500,11 +520,19 @@ export function USDistrictChoroplethMap({ {({ geographies }) => geographies.map((geo) => { const districtId = geo.properties?.DISTRICT_ID as string | undefined; + const stateAbbr = districtId?.split('-')[0]?.toUpperCase(); + const isErrorState = stateAbbr ? errorStateSet.has(stateAbbr) : false; const dataPoint = districtId ? dataMap.get(districtId) : undefined; - const fillColor = dataPoint - ? getDistrictColor(dataPoint.value, colorRange, fullConfig.colorScale.colors) - : NO_DATA_FILL; + const fillColor = isErrorState + ? 'rgba(220, 53, 69, 0.5)' + : dataPoint + ? getDistrictColor( + dataPoint.value, + colorRange, + fullConfig.colorScale.colors + ) + : NO_DATA_FILL; return ( ; + /** Uppercase 2-letter state abbreviations whose fetches errored (e.g., ['CO']). Districts in these states are colored red with error hover text. */ + errorStates?: string[]; } /** diff --git a/app/src/contexts/congressional-district/CongressionalDistrictDataContext.tsx b/app/src/contexts/congressional-district/CongressionalDistrictDataContext.tsx index dab06efb4..fc05e7389 100644 --- a/app/src/contexts/congressional-district/CongressionalDistrictDataContext.tsx +++ b/app/src/contexts/congressional-district/CongressionalDistrictDataContext.tsx @@ -226,6 +226,7 @@ export function CongressionalDistrictDataProvider({ isLoading, hasStarted: state.hasStarted, errorCount, + erroredStates: state.erroredStates, labelLookup, isStateLevelReport, stateCode: stateCodeValue, @@ -237,6 +238,7 @@ export function CongressionalDistrictDataProvider({ [ state.stateResponses, state.hasStarted, + state.erroredStates, completedCount, loadingCount, totalDistrictsLoaded, diff --git a/app/src/contexts/congressional-district/types.ts b/app/src/contexts/congressional-district/types.ts index bec1b5c98..e5fcfd79b 100644 --- a/app/src/contexts/congressional-district/types.ts +++ b/app/src/contexts/congressional-district/types.ts @@ -66,6 +66,8 @@ export interface CongressionalDistrictDataContextValue { hasStarted: boolean; /** Number of states that errored */ errorCount: number; + /** Set of state codes that errored (e.g., 'state/co') */ + erroredStates: Set; /** Label lookup for district display names */ labelLookup: DistrictLabelLookup; /** Whether this is a state-level report (single state) vs national */ diff --git a/app/src/hooks/useUserReports.ts b/app/src/hooks/useUserReports.ts index d7beba829..1d6d251e2 100644 --- a/app/src/hooks/useUserReports.ts +++ b/app/src/hooks/useUserReports.ts @@ -21,6 +21,7 @@ import { } from '@/types/ingredients/UserPopulation'; import { UserReport } from '@/types/ingredients/UserReport'; import { UserSimulation } from '@/types/ingredients/UserSimulation'; +import { HouseholdMetadata } from '@/types/metadata/householdMetadata'; import { findPlaceFromRegionString, getPlaceDisplayName } from '@/utils/regionStrategies'; import { householdKeys, policyKeys, reportKeys, simulationKeys } from '../libs/queryKeys'; import { useGeographicAssociationsByUser } from './useUserGeographic'; @@ -437,17 +438,16 @@ export const useUserReportById = (userReportId: string, options?: { enabled?: bo const householdSimulations = simulations.filter((s) => s.populationType === 'household'); const householdIds = extractUniqueIds(householdSimulations, 'populationId'); - const householdResults = useParallelQueries(householdIds, { + const householdResults = useParallelQueries(householdIds, { queryKey: householdKeys.byId, - queryFn: async (id) => { - const metadata = await fetchHouseholdById(country, id); - return HouseholdAdapter.fromMetadata(metadata); - }, + queryFn: async (id) => fetchHouseholdById(country, id), enabled: isEnabled && householdIds.length > 0, staleTime: 5 * 60 * 1000, }); - const households = householdResults.queries.map((q) => q.data).filter((h): h is Household => !!h); + const households = householdResults.queries + .map((q) => (q.data ? HouseholdAdapter.fromMetadata(q.data) : undefined)) + .filter((h): h is Household => !!h); const userHouseholds = householdAssociations?.filter((ha) => households.some((h) => h.id === ha.householdId) diff --git a/app/src/libs/metadataUtils.ts b/app/src/libs/metadataUtils.ts index 881a1ec9a..533514933 100644 --- a/app/src/libs/metadataUtils.ts +++ b/app/src/libs/metadataUtils.ts @@ -1,6 +1,15 @@ import { createSelector } from '@reduxjs/toolkit'; import { RootState } from '@/store'; import { MetadataApiPayload, MetadataState } from '@/types/metadata'; +import { ParameterMetadata } from '@/types/metadata/parameterMetadata'; + +/** Parameter paths containing these substrings are excluded from search */ +const EXCLUDED_PARAMETER_PATTERNS = ['pycache'] as const; + +export interface SearchableParameter { + value: string; // Full parameter path (e.g., "gov.irs.credits.eitc.max") + label: string; // Leaf label (e.g., "Maximum amount") +} // Memoized selectors to prevent unnecessary re-renders export const getTaxYears = createSelector( @@ -163,6 +172,32 @@ export const getFieldLabel = (fieldName: string) => { ); }; +/** + * Memoized selector for searchable parameters used in autocomplete components. + * Computed once when metadata loads, shared across all components. + */ +export const selectSearchableParameters = createSelector( + [(state: RootState) => state.metadata.parameters], + (parameters): SearchableParameter[] => { + if (!parameters) { + return []; + } + + return Object.values(parameters) + .filter( + (param): param is ParameterMetadata => + param.type === 'parameter' && + !!param.label && + !EXCLUDED_PARAMETER_PATTERNS.some((pattern) => param.parameter.includes(pattern)) + ) + .map((param) => ({ + value: param.parameter, + label: param.label, + })) + .sort((a, b) => a.label.localeCompare(b.label)); + } +); + export function transformMetadataPayload( payload: MetadataApiPayload, country: string diff --git a/app/src/pages/Policies.page.tsx b/app/src/pages/Policies.page.tsx index d64b7d899..00a4d6eb5 100644 --- a/app/src/pages/Policies.page.tsx +++ b/app/src/pages/Policies.page.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { IconSettings } from '@tabler/icons-react'; import { useNavigate } from 'react-router-dom'; import { ColumnConfig, IngredientRecord, TextValue } from '@/components/columns'; import { RenameIngredientModal } from '@/components/common/RenameIngredientModal'; @@ -8,6 +9,9 @@ import { MOCK_USER_ID } from '@/constants'; import { useCurrentCountry } from '@/hooks/useCurrentCountry'; import { useDisclosure } from '@/hooks/useDisclosure'; import { useUpdatePolicyAssociation, useUserPolicies } from '@/hooks/useUserPolicy'; +import type { EditorMode } from '@/pages/reportBuilder/modals/policyCreation/types'; +import { PolicyCreationModal } from '@/pages/reportBuilder/modals/PolicyCreationModal'; +import { PolicyStateProps } from '@/types/pathwayState'; import { countPolicyModifications } from '@/utils/countParameterChanges'; import { formatDate } from '@/utils/dateUtils'; @@ -18,13 +22,18 @@ export default function PoliciesPage() { const countryId = useCurrentCountry(); const [searchValue, setSearchValue] = useState(''); - const [selectedIds, setSelectedIds] = useState([]); // Rename modal state const [renamingPolicyId, setRenamingPolicyId] = useState(null); - const [renameOpened, { open: openRename, close: closeRename }] = useDisclosure(false); + const [renameOpened, { close: closeRename }] = useDisclosure(false); const [renameError, setRenameError] = useState(null); + // Policy editor modal state + const [editingPolicy, setEditingPolicy] = useState(null); + const [editingAssociationId, setEditingAssociationId] = useState(null); + const [editorMode, setEditorMode] = useState('edit'); + const [editorOpened, { open: openEditor, close: closeEditor }] = useDisclosure(false); + // Rename mutation hook const updateAssociation = useUpdatePolicyAssociation(); @@ -32,18 +41,18 @@ export default function PoliciesPage() { navigate(`/${countryId}/policies/create`); }; - const handleSelectionChange = (recordId: string, selected: boolean) => { - setSelectedIds((prev) => - selected ? [...prev, recordId] : prev.filter((id) => id !== recordId) - ); - }; - - const isSelected = (recordId: string) => selectedIds.includes(recordId); - - const handleOpenRename = (userPolicyId: string) => { - setRenamingPolicyId(userPolicyId); - setRenameError(null); // Clear any previous error - openRename(); + const handleOpenEditor = (recordId: string, mode: EditorMode = 'edit') => { + const item = data?.find((p) => p.association.id?.toString() === recordId); + if (item) { + setEditingPolicy({ + id: item.association.policyId.toString(), + label: item.association.label || `Policy #${item.association.policyId}`, + parameters: item.policy?.parameters || [], + }); + setEditingAssociationId(recordId); + setEditorMode(mode); + openEditor(); + } }; const handleCloseRename = () => { @@ -94,11 +103,11 @@ export default function PoliciesPage() { { key: 'actions', header: '', - type: 'menu', - actions: [{ label: 'Rename', action: 'rename' }], + type: 'actions', + actions: [{ action: 'edit', tooltip: 'View/edit policy', icon: }], onAction: (action: string, recordId: string) => { - if (action === 'rename') { - handleOpenRename(recordId); + if (action === 'edit') { + handleOpenEditor(recordId, 'display'); } }, }, @@ -145,9 +154,6 @@ export default function PoliciesPage() { columns={policyColumns} searchValue={searchValue} onSearchChange={setSearchValue} - enableSelection - isSelected={isSelected} - onSelectionChange={handleSelectionChange} /> @@ -160,6 +166,24 @@ export default function PoliciesPage() { ingredientType="policy" submissionError={renameError} /> + + { + closeEditor(); + setEditingPolicy(null); + setEditingAssociationId(null); + }} + onPolicyCreated={() => { + closeEditor(); + setEditingPolicy(null); + setEditingAssociationId(null); + }} + simulationIndex={0} + initialPolicy={editingPolicy ?? undefined} + initialEditorMode={editorMode} + initialAssociationId={editingAssociationId ?? undefined} + /> ); } diff --git a/app/src/pages/Populations.page.tsx b/app/src/pages/Populations.page.tsx index 3cb2a1400..ffb2f2def 100644 --- a/app/src/pages/Populations.page.tsx +++ b/app/src/pages/Populations.page.tsx @@ -45,7 +45,6 @@ export default function PopulationsPage() { const navigate = useNavigate(); const [searchValue, setSearchValue] = useState(''); - const [selectedIds, setSelectedIds] = useState([]); // Rename modal state const [renamingId, setRenamingId] = useState(null); @@ -66,14 +65,6 @@ export default function PopulationsPage() { navigate(`/${countryId}/households/create`); }; - const handleSelectionChange = (recordId: string, selected: boolean) => { - setSelectedIds((prev) => - selected ? [...prev, recordId] : prev.filter((id) => id !== recordId) - ); - }; - - const isSelected = (recordId: string) => selectedIds.includes(recordId); - const handleOpenRename = (recordId: string) => { // Determine type by looking up in the original data // Households use their association.id, geographies use geographyId @@ -318,9 +309,6 @@ export default function PopulationsPage() { columns={populationColumns} searchValue={searchValue} onSearchChange={setSearchValue} - enableSelection - isSelected={isSelected} - onSelectionChange={handleSelectionChange} /> diff --git a/app/src/pages/ReportBuilder.page.tsx b/app/src/pages/ReportBuilder.page.tsx new file mode 100644 index 000000000..fc3d95e39 --- /dev/null +++ b/app/src/pages/ReportBuilder.page.tsx @@ -0,0 +1,5625 @@ +/** + * ReportBuilder - A visual, building-block approach to report configuration + * + * Design Direction: Refined utilitarian with distinct color coding. + * - Policy: Secondary (slate) - authoritative, grounded + * - Population: Primary (teal) - brand-focused, people + * - Dynamics: Blue - forward-looking, data-driven + * + * Two view modes: + * - Card view: 50/50 grid with square chips + * - Row view: Stacked horizontal rows + */ +import { Fragment, useCallback, useEffect, useMemo, useState } from 'react'; +import { + IconChartLine, + IconCheck, + IconChevronLeft, + IconChevronRight, + IconCircleCheck, + IconCircleDashed, + IconFileDescription, + IconFolder, + IconHome, + IconInfoCircle, + IconLayoutColumns, + IconPencil, + IconPlayerPlay, + IconPlus, + IconRowInsertBottom, + IconScale, + IconSearch, + IconSparkles, + IconTrash, + IconUsers, + IconX, +} from '@tabler/icons-react'; +import { useQueryClient } from '@tanstack/react-query'; +import { useSelector } from 'react-redux'; +import { PolicyAdapter } from '@/adapters'; +import { HouseholdAdapter } from '@/adapters/HouseholdAdapter'; +import { geographyUsageStore, householdUsageStore } from '@/api/usageTracking'; +import HouseholdBuilderForm from '@/components/household/HouseholdBuilderForm'; +import { UKOutlineIcon, USOutlineIcon } from '@/components/icons/CountryOutlineIcons'; +import { + Button, + Command, + CommandItem, + CommandList, + Dialog, + DialogContent, + Group, + Input, + Popover, + PopoverContent, + PopoverTrigger, + ScrollArea, + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, + Separator, + Skeleton, + Spinner, + Stack, + Tabs, + TabsList, + TabsTrigger, + Text, + Title, + Tooltip, + TooltipContent, + TooltipTrigger, +} from '@/components/ui'; +import { CURRENT_YEAR, MOCK_USER_ID } from '@/constants'; +import { colors, spacing, typography } from '@/designTokens'; +import { useCreateHousehold } from '@/hooks/useCreateHousehold'; +import { useCreatePolicy } from '@/hooks/useCreatePolicy'; +import { useCurrentCountry } from '@/hooks/useCurrentCountry'; +import { useUserHouseholds } from '@/hooks/useUserHousehold'; +import { useUpdatePolicyAssociation, useUserPolicies } from '@/hooks/useUserPolicy'; +import { getBasicInputFields, getDateRange } from '@/libs/metadataUtils'; +import { householdAssociationKeys } from '@/libs/queryKeys'; +import HistoricalValues from '@/pathways/report/components/policyParameterSelector/HistoricalValues'; +import { + ModeSelectorButton, + ValueSetterComponents, + ValueSetterMode, +} from '@/pathways/report/components/valueSetters'; +import { RootState } from '@/store'; +import { Geography } from '@/types/ingredients/Geography'; +import { Household } from '@/types/ingredients/Household'; +import { Policy } from '@/types/ingredients/Policy'; +import { ParameterTreeNode } from '@/types/metadata'; +import { ParameterMetadata } from '@/types/metadata/parameterMetadata'; +import { PolicyStateProps, PopulationStateProps, SimulationStateProps } from '@/types/pathwayState'; +import { PolicyCreationPayload } from '@/types/payloads'; +import { Parameter } from '@/types/subIngredients/parameter'; +import { + ValueInterval, + ValueIntervalCollection, + ValuesList, +} from '@/types/subIngredients/valueInterval'; +import { countPolicyModifications } from '@/utils/countParameterChanges'; +import { formatPeriod } from '@/utils/dateUtils'; +import { generateGeographyLabel } from '@/utils/geographyUtils'; +import { HouseholdBuilder } from '@/utils/HouseholdBuilder'; +import { formatLabelParts, getHierarchicalLabels } from '@/utils/parameterLabels'; +import { initializePolicyState } from '@/utils/pathwayState/initializePolicyState'; +import { initializePopulationState } from '@/utils/pathwayState/initializePopulationState'; +import { initializeSimulationState } from '@/utils/pathwayState/initializeSimulationState'; +import { formatParameterValue } from '@/utils/policyTableHelpers'; +import { + getUKConstituencies, + getUKCountries, + getUKLocalAuthorities, + getUSCongressionalDistricts, + getUSStates, + RegionOption, +} from '@/utils/regionStrategies'; +import { capitalize } from '@/utils/stringUtils'; +import { PolicyCreationModal } from './reportBuilder/modals'; + +// ============================================================================ +// TYPES +// ============================================================================ + +interface ReportBuilderState { + label: string | null; + year: string; + simulations: SimulationStateProps[]; +} + +type IngredientType = 'policy' | 'population' | 'dynamics'; +type ViewMode = 'cards' | 'rows'; + +interface IngredientPickerState { + isOpen: boolean; + simulationIndex: number; + ingredientType: IngredientType; +} + +// ============================================================================ +// DESIGN TOKENS +// ============================================================================ + +const FONT_SIZES = { + title: '28px', + normal: '14px', + small: '12px', + tiny: '10px', +}; + +// Distinct color palette for each ingredient type +const INGREDIENT_COLORS = { + policy: { + icon: colors.secondary[600], + bg: colors.secondary[50], + border: colors.secondary[200], + accent: colors.secondary[500], + }, + population: { + icon: colors.primary[600], + bg: colors.primary[50], + border: colors.primary[200], + accent: colors.primary[500], + }, + dynamics: { + // Muted gray-green for dynamics (distinct from teal and slate) + icon: colors.gray[500], + bg: colors.gray[50], + border: colors.gray[200], + accent: colors.gray[400], + }, +}; + +// Country-specific configuration +const COUNTRY_CONFIG = { + us: { + nationwideTitle: 'United States', + nationwideSubtitle: 'Nationwide', + nationwideLabel: 'United States', // Used for geography name + nationwideId: 'us-nationwide', + geographyId: 'us', + }, + uk: { + nationwideTitle: 'United Kingdom', + nationwideSubtitle: 'UK-wide', + nationwideLabel: 'United Kingdom', // Used for geography name + nationwideId: 'uk-nationwide', + geographyId: 'uk', + }, +} as const; + +// Helper to get sample populations for a country +const getSamplePopulations = (countryId: 'us' | 'uk') => { + const config = COUNTRY_CONFIG[countryId] || COUNTRY_CONFIG.us; + return { + household: { + label: 'Smith family (4 members)', + type: 'household' as const, + household: { + id: 'sample-household', + countryId, + householdData: { people: { person1: { age: { 2025: 40 } } } }, + }, + geography: null, + }, + nationwide: { + label: config.nationwideLabel, + type: 'geography' as const, + household: null, + geography: { + id: config.nationwideId, + countryId, + scope: 'national' as const, + geographyId: config.geographyId, + name: config.nationwideLabel, + }, + }, + }; +}; + +// Country-specific map icon component +function CountryMapIcon({ + countryId, + size, + color, +}: { + countryId: string; + size: number; + color: string; +}) { + if (countryId === 'uk') { + return ; + } + return ; +} + +// ============================================================================ +// STYLES +// ============================================================================ + +const styles = { + pageContainer: { + minHeight: '100vh', + background: `linear-gradient(180deg, ${colors.gray[50]} 0%, ${colors.background.secondary} 100%)`, + padding: `${spacing.lg} ${spacing['3xl']}`, + }, + + headerSection: { + marginBottom: spacing.xl, + }, + + mainTitle: { + fontFamily: typography.fontFamily.primary, + fontSize: FONT_SIZES.title, + fontWeight: typography.fontWeight.bold, + color: colors.gray[900], + letterSpacing: '-0.02em', + margin: 0, + }, + + canvasContainer: { + background: colors.white, + borderRadius: spacing.radius.feature, + border: `1px solid ${colors.border.light}`, + boxShadow: `0 4px 24px ${colors.shadow.light}`, + padding: spacing['2xl'], + position: 'relative' as const, + overflow: 'hidden', + }, + + canvasGrid: { + background: ` + linear-gradient(90deg, ${colors.gray[100]}18 1px, transparent 1px), + linear-gradient(${colors.gray[100]}18 1px, transparent 1px) + `, + backgroundSize: '20px 20px', + position: 'absolute' as const, + inset: 0, + pointerEvents: 'none' as const, + }, + + simulationsGrid: { + display: 'grid', + gridTemplateColumns: '1fr 1fr', + gridTemplateRows: 'auto auto auto auto', // header, policy, population, dynamics + gap: `${spacing.sm} ${spacing['2xl']}`, + position: 'relative' as const, + zIndex: 1, + minHeight: '450px', + alignItems: 'start', + }, + + simulationCard: { + background: colors.white, + borderRadius: spacing.radius.feature, + border: `2px solid ${colors.gray[200]}`, + padding: spacing.xl, + transition: 'all 0.2s ease', + position: 'relative' as const, + display: 'grid', + gridRow: 'span 4', // span all 4 rows (header + 3 panels) + gridTemplateRows: 'subgrid', + gap: spacing.sm, + }, + + simulationCardActive: { + border: `2px solid ${colors.primary[400]}`, + boxShadow: `0 0 0 4px ${colors.primary[50]}, 0 8px 32px ${colors.shadow.medium}`, + }, + + simulationHeader: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + marginBottom: spacing.lg, + }, + + simulationTitle: { + fontFamily: typography.fontFamily.primary, + fontSize: FONT_SIZES.normal, + fontWeight: typography.fontWeight.semibold, + color: colors.gray[800], + }, + + // Ingredient section (bubble/card container, not clickable) + ingredientSection: { + padding: spacing.md, + borderRadius: spacing.radius.feature, + border: `1px solid`, + background: 'white', + }, + + ingredientSectionHeader: { + display: 'flex', + alignItems: 'center', + gap: spacing.sm, + marginBottom: spacing.md, + }, + + ingredientSectionIcon: { + width: 32, + height: 32, + borderRadius: spacing.radius.container, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + + // Chip grid for card view (square chips, 3 per row) + chipGridSquare: { + display: 'grid', + gridTemplateColumns: 'repeat(3, 1fr)', + gap: spacing.sm, + }, + + // Row layout for row view + chipRowContainer: { + display: 'flex', + flexDirection: 'column' as const, + gap: spacing.xs, + }, + + // Square chip (expands to fill grid cell, min 80px height) + chipSquare: { + minHeight: 80, + borderRadius: spacing.radius.container, + borderWidth: 1, + borderStyle: 'solid', + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + gap: 6, + cursor: 'pointer', + transition: 'background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease', + padding: spacing.sm, + }, + + chipSquareSelected: { + borderWidth: 2, + boxShadow: `0 0 0 2px`, + }, + + // Row chip (80 height) + chipRow: { + display: 'flex', + alignItems: 'center', + gap: spacing.md, + padding: `${spacing.md} ${spacing.lg}`, + borderRadius: spacing.radius.container, + borderWidth: 1, + borderStyle: 'solid', + cursor: 'pointer', + transition: 'background 0.15s ease, border-color 0.15s ease', + minHeight: 80, + }, + + chipRowSelected: { + borderWidth: 2, + }, + + chipRowIcon: { + width: 40, + height: 40, + borderRadius: spacing.radius.container, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexShrink: 0, + }, + + // Perforated "Create new policy" chip (expands to fill grid cell) + chipCustomSquare: { + minHeight: 80, + borderRadius: spacing.radius.container, + borderWidth: 2, + borderStyle: 'dashed', + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + gap: 6, + cursor: 'pointer', + transition: 'background 0.15s ease, border-color 0.15s ease', + padding: spacing.sm, + }, + + chipCustomRow: { + display: 'flex', + alignItems: 'center', + gap: spacing.md, + padding: `${spacing.md} ${spacing.lg}`, + borderRadius: spacing.radius.container, + borderWidth: 2, + borderStyle: 'dashed', + cursor: 'pointer', + transition: 'background 0.15s ease, border-color 0.15s ease', + minHeight: 80, + }, + + addSimulationCard: { + background: colors.white, + borderRadius: spacing.radius.feature, + border: `2px dashed ${colors.border.medium}`, + padding: spacing.xl, + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + gap: spacing.md, + cursor: 'pointer', + transition: 'all 0.2s ease', + gridRow: 'span 4', // span all 4 rows to match SimulationBlock + }, + + reportMetaCard: { + background: colors.white, + borderRadius: spacing.radius.feature, + border: `1px solid ${colors.border.light}`, + padding: `${spacing.xl} ${spacing.xl} ${spacing['2xl']} ${spacing.xl}`, + marginBottom: spacing.xl, + position: 'relative' as const, + overflow: 'hidden', + }, + + inheritedBadge: { + fontSize: FONT_SIZES.tiny, + color: colors.gray[500], + fontStyle: 'italic', + marginLeft: spacing.xs, + }, +}; + +// ============================================================================ +// SUB-COMPONENTS +// ============================================================================ + +// Color config type that accepts any ingredient color variant +type IngredientColorConfig = { + icon: string; + bg: string; + border: string; + accent: string; +}; + +interface OptionChipSquareProps { + icon: React.ReactNode; + label: string; + description?: string; + isSelected: boolean; + onClick: () => void; + colorConfig: IngredientColorConfig; +} + +function OptionChipSquare({ + icon, + label, + description, + isSelected, + onClick, + colorConfig, +}: OptionChipSquareProps) { + const [isHovered, setIsHovered] = useState(false); + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onClick={onClick} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + > +
+ {icon} +
+ + {label} + + {description && ( + + {description} + + )} +
+ ); +} + +interface OptionChipRowProps { + icon: React.ReactNode; + label: string; + description?: string; + isSelected: boolean; + onClick: () => void; + colorConfig: IngredientColorConfig; +} + +function OptionChipRow({ + icon, + label, + description, + isSelected, + onClick, + colorConfig, +}: OptionChipRowProps) { + const [isHovered, setIsHovered] = useState(false); + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onClick={onClick} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + > +
+ {icon} +
+ + + {label} + + {description && ( + + {description} + + )} + + {isSelected && } +
+ ); +} + +interface SavedPolicy { + id: string; + label: string; + paramCount: number; + createdAt?: string; + updatedAt?: string; +} + +interface BrowseMoreChipProps { + label: string; + description?: string; + onClick: () => void; + variant: 'square' | 'row'; + colorConfig: IngredientColorConfig; +} + +function BrowseMoreChip({ + label, + description, + onClick, + variant, + colorConfig, +}: BrowseMoreChipProps) { + const [isHovered, setIsHovered] = useState(false); + + if (variant === 'square') { + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onClick={onClick} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + > + + + {label} + + {description && ( + + {description} + + )} +
+ ); + } + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onClick={onClick} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + > +
+ +
+ + + {label} + + {description && ( + + {description} + + )} + +
+ ); +} + +// Recent population for display in IngredientSection +interface RecentPopulation { + id: string; + label: string; + type: 'geography' | 'household'; + population: PopulationStateProps; +} + +interface IngredientSectionProps { + type: IngredientType; + currentId?: string; + countryId?: 'us' | 'uk'; + onQuickSelectPolicy?: (type: 'current-law') => void; + onSelectSavedPolicy?: (id: string, label: string, paramCount: number) => void; + onQuickSelectPopulation?: (type: 'nationwide') => void; + onSelectRecentPopulation?: (population: PopulationStateProps) => void; + onDeselectPopulation?: () => void; + onDeselectPolicy?: () => void; + onCreateCustom: () => void; + onBrowseMore?: () => void; + isInherited?: boolean; + inheritedPopulationType?: 'household' | 'nationwide' | null; + savedPolicies?: SavedPolicy[]; + recentPopulations?: RecentPopulation[]; + viewMode: ViewMode; +} + +function IngredientSection({ + type, + currentId, + countryId = 'us', + onQuickSelectPolicy, + onSelectSavedPolicy, + onQuickSelectPopulation, + onSelectRecentPopulation, + onDeselectPopulation, + onDeselectPolicy, + onCreateCustom: _onCreateCustom, + onBrowseMore, + isInherited, + inheritedPopulationType, + savedPolicies = [], + recentPopulations = [], + viewMode, +}: IngredientSectionProps) { + const countryConfig = COUNTRY_CONFIG[countryId] || COUNTRY_CONFIG.us; + const colorConfig = INGREDIENT_COLORS[type]; + const IconComponent = { + policy: IconScale, + population: IconUsers, + dynamics: IconChartLine, + }[type]; + + const typeLabels = { + policy: 'Policy', + population: 'Household(s)', + dynamics: 'Dynamics', + }; + + const useRowLayout = viewMode === 'rows'; + const chipVariant = useRowLayout ? 'row' : 'square'; + const iconSize = useRowLayout ? 20 : 16; + + const ChipComponent = useRowLayout ? OptionChipRow : OptionChipSquare; + + return ( +
+ {/* Section header */} +
+
+ +
+ + {typeLabels[type]} + + {isInherited && (inherited from baseline)} +
+ + {/* Chips container */} + {isInherited && inheritedPopulationType ? ( +
+
+ {useRowLayout ? ( + <> +
+ {inheritedPopulationType === 'household' ? ( + + ) : ( + + )} +
+ + + {inheritedPopulationType === 'household' + ? 'Household' + : countryConfig.nationwideTitle} + + + {inheritedPopulationType === 'household' + ? 'Inherited from baseline' + : countryConfig.nationwideSubtitle} + + + + ) : ( + <> +
+ {inheritedPopulationType === 'household' ? ( + + ) : ( + + )} +
+ + {inheritedPopulationType === 'household' + ? 'Household' + : countryConfig.nationwideTitle} + + + {inheritedPopulationType === 'household' + ? 'Inherited' + : countryConfig.nationwideSubtitle} + + + )} +
+
+ ) : ( +
+ {type === 'policy' && onQuickSelectPolicy && ( + <> + {/* Current law - always first */} + + } + label="Current law" + description="No changes" + isSelected={currentId === 'current-law'} + onClick={() => { + if (currentId === 'current-law' && onDeselectPolicy) { + onDeselectPolicy(); + } else { + onQuickSelectPolicy('current-law'); + } + }} + colorConfig={colorConfig} + /> + {/* Saved policies - up to 3 shown (total 4 with Current law) */} + {savedPolicies.slice(0, 3).map((policy) => ( + + } + label={policy.label} + description={`${policy.paramCount} param${policy.paramCount !== 1 ? 's' : ''} changed`} + isSelected={currentId === policy.id} + onClick={() => { + if (currentId === policy.id && onDeselectPolicy) { + onDeselectPolicy(); + } else { + onSelectSavedPolicy?.(policy.id, policy.label, policy.paramCount); + } + }} + colorConfig={colorConfig} + /> + ))} + {/* More options - always shown for searching/browsing all policies */} + {onBrowseMore && ( + + )} + + )} + + {type === 'population' && onQuickSelectPopulation && ( + <> + {/* Nationwide - always first */} + + } + label={countryConfig.nationwideTitle} + description={countryConfig.nationwideSubtitle} + isSelected={currentId === countryConfig.nationwideId} + onClick={() => { + if (currentId === countryConfig.nationwideId && onDeselectPopulation) { + onDeselectPopulation(); + } else { + onQuickSelectPopulation('nationwide'); + } + }} + colorConfig={colorConfig} + /> + {/* Recent populations - up to 4 shown */} + {recentPopulations.slice(0, 4).map((pop) => ( + + ) : ( + + ) + } + label={pop.label} + description={pop.type === 'household' ? 'Household' : 'Geography'} + isSelected={currentId === pop.id} + onClick={() => { + if (currentId === pop.id && onDeselectPopulation) { + onDeselectPopulation(); + } else { + onSelectRecentPopulation?.(pop.population); + } + }} + colorConfig={colorConfig} + /> + ))} + {/* More options - always shown for searching/browsing all populations */} + {onBrowseMore && ( + + )} + + )} + + {type === 'dynamics' && ( +
+ + + + Dynamics coming soon + + +
+ )} +
+ )} +
+ ); +} + +interface SimulationBlockProps { + simulation: SimulationStateProps; + index: number; + countryId: 'us' | 'uk'; + onLabelChange: (label: string) => void; + onQuickSelectPolicy: (policyType: 'current-law') => void; + onSelectSavedPolicy: (id: string, label: string, paramCount: number) => void; + onQuickSelectPopulation: (populationType: 'nationwide') => void; + onSelectRecentPopulation: (population: PopulationStateProps) => void; + onDeselectPolicy: () => void; + onDeselectPopulation: () => void; + onCreateCustomPolicy: () => void; + onBrowseMorePolicies: () => void; + onBrowseMorePopulations: () => void; + onRemove?: () => void; + canRemove: boolean; + isRequired?: boolean; + populationInherited?: boolean; + inheritedPopulation?: PopulationStateProps | null; + savedPolicies: SavedPolicy[]; + recentPopulations: RecentPopulation[]; + viewMode: ViewMode; +} + +function SimulationBlock({ + simulation, + index, + countryId, + onLabelChange, + onQuickSelectPolicy, + onSelectSavedPolicy, + onQuickSelectPopulation, + onSelectRecentPopulation, + onDeselectPolicy, + onDeselectPopulation, + onCreateCustomPolicy, + onBrowseMorePolicies, + onBrowseMorePopulations, + onRemove, + canRemove, + isRequired, + populationInherited, + inheritedPopulation, + savedPolicies, + recentPopulations, + viewMode, +}: SimulationBlockProps) { + const [isEditingLabel, setIsEditingLabel] = useState(false); + const [labelInput, setLabelInput] = useState(simulation.label || ''); + + const isPolicyConfigured = !!simulation.policy.id; + const effectivePopulation = + populationInherited && inheritedPopulation ? inheritedPopulation : simulation.population; + const isPopulationConfigured = !!( + effectivePopulation?.household?.id || effectivePopulation?.geography?.id + ); + const isFullyConfigured = isPolicyConfigured && isPopulationConfigured; + + const handleLabelSubmit = () => { + onLabelChange(labelInput || (index === 0 ? 'Baseline simulation' : 'Reform simulation')); + setIsEditingLabel(false); + }; + + const defaultLabel = index === 0 ? 'Baseline simulation' : 'Reform simulation'; + + const currentPolicyId = simulation.policy.id; + const currentPopulationId = + effectivePopulation?.household?.id || effectivePopulation?.geography?.id; + + // Determine inherited population type for display + const inheritedPopulationType = + populationInherited && inheritedPopulation + ? inheritedPopulation.household?.id + ? 'household' + : inheritedPopulation.geography?.id + ? 'nationwide' + : null + : null; + + return ( +
+ {/* Status indicator */} +
+ + {/* Header */} +
+ + {isEditingLabel ? ( + setLabelInput(e.target.value)} + onBlur={handleLabelSubmit} + onKeyDown={(e) => e.key === 'Enter' && handleLabelSubmit()} + autoFocus + style={{ + fontWeight: typography.fontWeight.semibold, + fontSize: FONT_SIZES.normal, + }} + /> + ) : ( + + {simulation.label || defaultLabel} + + + )} + + + + {isRequired && ( + + Required + + )} + {isFullyConfigured && ( + + +
+ +
+ + Fully configured + + )} + {canRemove && ( + + )} + +
+ + {/* Panels - direct children for subgrid alignment */} + + + {}} // Not used for population + onBrowseMore={onBrowseMorePopulations} + isInherited={populationInherited} + inheritedPopulationType={inheritedPopulationType} + recentPopulations={recentPopulations} + viewMode={viewMode} + /> + + {}} + viewMode={viewMode} + /> +
+ ); +} + +interface AddSimulationCardProps { + onClick: () => void; + disabled?: boolean; +} + +function AddSimulationCard({ onClick, disabled }: AddSimulationCardProps) { + const [isHovered, setIsHovered] = useState(false); + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onClick={disabled ? undefined : onClick} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + > +
+ +
+ + Add reform simulation + + + Compare policy changes against your baseline + +
+ ); +} + +// ============================================================================ +// INGREDIENT PICKER MODAL +// ============================================================================ + +interface IngredientPickerModalProps { + isOpen: boolean; + onClose: () => void; + type: IngredientType; + onSelect: (item: PolicyStateProps | PopulationStateProps | null) => void; + onCreateNew: () => void; +} + +function IngredientPickerModal({ + isOpen, + onClose, + type, + onSelect, + onCreateNew, +}: IngredientPickerModalProps) { + const countryId = useCurrentCountry() as 'us' | 'uk'; + const countryConfig = COUNTRY_CONFIG[countryId] || COUNTRY_CONFIG.us; + const userId = MOCK_USER_ID.toString(); + const { data: policies, isLoading: policiesLoading } = useUserPolicies(userId); + const { data: households, isLoading: householdsLoading } = useUserHouseholds(userId); + const colorConfig = INGREDIENT_COLORS[type]; + const [expandedPolicyId, setExpandedPolicyId] = useState(null); + const parameters = useSelector((state: RootState) => state.metadata.parameters); + + const getTitle = () => { + switch (type) { + case 'policy': + return 'Select policy'; + case 'population': + return 'Select population'; + case 'dynamics': + return 'Configure dynamics'; + } + }; + + const getIcon = () => { + const iconProps = { size: 20, color: colorConfig.icon }; + switch (type) { + case 'policy': + return ; + case 'population': + return ; + case 'dynamics': + return ; + } + }; + + const handleSelectPolicy = (policyId: string, label: string, paramCount: number) => { + onSelect({ id: policyId, label, parameters: Array(paramCount).fill({}) }); + onClose(); + }; + + const handleSelectCurrentLaw = () => { + onSelect({ id: 'current-law', label: 'Current law', parameters: [] }); + onClose(); + }; + + const handleSelectHousehold = (householdId: string, label: string) => { + onSelect({ + label, + type: 'household', + household: { id: householdId, countryId, householdData: { people: {} } }, + geography: null, + }); + onClose(); + }; + + const handleSelectGeography = ( + geoId: string, + label: string, + scope: 'national' | 'subnational' + ) => { + onSelect({ + label, + type: 'geography', + household: null, + geography: { id: geoId, countryId, scope, geographyId: geoId, name: label }, + }); + onClose(); + }; + + return ( + !open && onClose()}> + +
+
+ {getIcon()} +
+ + {getTitle()} + +
+
+ + {type === 'policy' && ( + <> +
{ + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + > + +
+ +
+ + + Current law + + + Use existing tax and benefit rules without modifications + + + +
+
+ + + Or select an existing policy + + +
+ + {policiesLoading ? ( +
+ +
+ ) : ( + + {policies?.map((p) => { + // Use association data for display (like Policies page) + const policyId = p.association.policyId.toString(); + const label = p.association.label || `Policy #${policyId}`; + const paramCount = countPolicyModifications(p.policy); // Handles undefined gracefully + const policyParams = p.policy?.parameters || []; + const isExpanded = expandedPolicyId === policyId; + + return ( +
+ {/* Main clickable row */} +
handleSelectPolicy(policyId, label, paramCount)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + onMouseEnter={(e) => { + e.currentTarget.style.background = colors.gray[50]; + }} + onMouseLeave={(e) => { + e.currentTarget.style.background = 'transparent'; + }} + > + {/* Policy info - takes remaining space */} + + + {label} + + + {paramCount} param{paramCount !== 1 ? 's' : ''} changed + + + + {/* Info/expand button - isolated click zone */} + + + {/* Select indicator */} + +
+ + {/* Expandable parameter details - table-like display */} +
+ {/* Unified grid for header and data rows */} +
+ {/* Header row */} + + Parameter + + + Changes + + + {/* Data rows - grouped by parameter */} + {(() => { + // Build grouped list of parameters with their changes + const groupedParams: Array<{ + paramName: string; + label: string; + changes: Array<{ period: string; value: string }>; + }> = []; + + policyParams.forEach((param) => { + const paramName = param.name; + const hierarchicalLabels = getHierarchicalLabels( + paramName, + parameters + ); + const displayLabel = + hierarchicalLabels.length > 0 + ? formatLabelParts(hierarchicalLabels) + : paramName.split('.').pop() || paramName; + const metadata = parameters[paramName]; + + // Use value intervals directly from the Policy type + const changes = (param.values || []).map((interval) => ({ + period: formatPeriod(interval.startDate, interval.endDate), + value: formatParameterValue(interval.value, metadata?.unit), + })); + + groupedParams.push({ paramName, label: displayLabel, changes }); + }); + + if (groupedParams.length === 0) { + return ( + <> + + No parameter details available + + + ); + } + + const displayParams = groupedParams.slice(0, 10); + const remainingCount = groupedParams.length - 10; + + return ( + <> + {displayParams.map((param) => ( + + {/* Parameter name cell */} +
+ + + + {param.label} + + + + {param.paramName} + + +
+ {/* Changes cell - multiple lines */} +
+ {param.changes.map((change, idx) => ( + + + {change.period}: + {' '} + + {change.value} + + + ))} +
+ + ))} + {remainingCount > 0 && ( + + +{remainingCount} more parameter + {remainingCount !== 1 ? 's' : ''} + + )} + + ); + })()} +
+
+
+ ); + })} + {(!policies || policies.length === 0) && ( + + No saved policies + + )} + + )} + + + + + )} + + {type === 'population' && ( + <> +
+ handleSelectGeography( + countryConfig.nationwideId, + countryConfig.nationwideLabel, + 'national' + ) + } + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + > + +
+ +
+ + + {countryConfig.nationwideTitle} + + + {countryConfig.nationwideSubtitle} + + + +
+
handleSelectHousehold('sample-household', 'Sample household')} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + > + +
+ +
+ + + Sample household + + + Single household simulation + + + +
+
+ + + Or select an existing household + + +
+ + {householdsLoading ? ( +
+ +
+ ) : ( + + {households?.map((h) => { + // Use association data for display (like Populations page) + const householdId = h.association.householdId.toString(); + const label = h.association.label || `Household #${householdId}`; + return ( +
handleSelectHousehold(householdId, label)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + > + + + {label} + + + +
+ ); + })} + {(!households || households.length === 0) && ( + + No saved households + + )} + + )} + + + + + )} + + {type === 'dynamics' && ( + +
+ +
+ + + Dynamics coming soon + + + Dynamic behavioral responses will be available in a future update. + + + + )} + +
+ + + ); +} + +// ============================================================================ +// POLICY BROWSE MODAL - Augmented policy selection experience with integrated creation +// ============================================================================ + +interface PolicyBrowseModalProps { + isOpen: boolean; + onClose: () => void; + onSelect: (policy: PolicyStateProps) => void; +} + +function PolicyBrowseModal({ isOpen, onClose, onSelect }: PolicyBrowseModalProps) { + useCurrentCountry(); + const userId = MOCK_USER_ID.toString(); + const { data: policies, isLoading } = useUserPolicies(userId); + const { + parameterTree, + parameters, + loading: metadataLoading, + } = useSelector((state: RootState) => state.metadata); + const { minDate, maxDate } = useSelector(getDateRange); + const updatePolicyAssociation = useUpdatePolicyAssociation(); + + // Browse mode state + const [searchQuery, setSearchQuery] = useState(''); + const [activeSection, setActiveSection] = useState<'my-policies' | 'public'>('my-policies'); + const [selectedPolicyId, setSelectedPolicyId] = useState(null); + const [drawerPolicyId, setDrawerPolicyId] = useState(null); + + // Creation mode state + const [isCreationMode, setIsCreationMode] = useState(false); + const [policyLabel, setPolicyLabel] = useState(''); + const [policyParameters, setPolicyParameters] = useState([]); + const [selectedParam, setSelectedParam] = useState(null); + const [expandedMenuItems, setExpandedMenuItems] = useState>(new Set()); + const [valueSetterMode, setValueSetterMode] = useState(ValueSetterMode.DEFAULT); + const [intervals, setIntervals] = useState([]); + const [startDate, setStartDate] = useState('2025-01-01'); + const [endDate, setEndDate] = useState('2025-12-31'); + const [parameterSearch, setParameterSearch] = useState(''); + const [isEditingLabel, setIsEditingLabel] = useState(false); + + // API hook for creating policy + const { createPolicy, isPending: isCreating } = useCreatePolicy(policyLabel || undefined); + + // Reset state on mount + useEffect(() => { + if (isOpen) { + setSearchQuery(''); + setSelectedPolicyId(null); + setDrawerPolicyId(null); + setIsCreationMode(false); + setPolicyLabel(''); + setPolicyParameters([]); + setSelectedParam(null); + setExpandedMenuItems(new Set()); + setIntervals([]); + setParameterSearch(''); + setIsEditingLabel(false); + } + }, [isOpen]); + + // Transform policies data, sorted by most recent + // Uses association data for display (like Policies page), policy data only for param count + const userPolicies = useMemo(() => { + return (policies || []) + .map((p) => { + const policyId = p.association.policyId.toString(); + const label = p.association.label || `Policy #${policyId}`; + return { + id: policyId, + associationId: p.association.id, // For updating updatedAt on selection + label, + paramCount: countPolicyModifications(p.policy), // Handles undefined gracefully + parameters: p.policy?.parameters || [], + createdAt: p.association.createdAt, + updatedAt: p.association.updatedAt, + }; + }) + .sort((a, b) => { + // Sort by most recent timestamp (prefer updatedAt, fallback to createdAt) + const aTime = a.updatedAt || a.createdAt || ''; + const bTime = b.updatedAt || b.createdAt || ''; + return bTime.localeCompare(aTime); // Descending (most recent first) + }); + }, [policies]); + + // Filter policies based on search + const filteredPolicies = useMemo(() => { + let result = userPolicies; + + // Apply search filter + if (searchQuery.trim()) { + const query = searchQuery.toLowerCase(); + result = result.filter((p) => { + // Search in policy label + if (p.label.toLowerCase().includes(query)) { + return true; + } + // Search in parameter display names (hierarchical labels) + const paramDisplayNames = p.parameters + .map((param) => { + const hierarchicalLabels = getHierarchicalLabels(param.name, parameters); + return hierarchicalLabels.length > 0 + ? formatLabelParts(hierarchicalLabels) + : param.name.split('.').pop() || param.name; + }) + .join(' ') + .toLowerCase(); + if (paramDisplayNames.includes(query)) { + return true; + } + return false; + }); + } + + return result; + }, [userPolicies, searchQuery, parameters]); + + // Get policies for current section + const displayedPolicies = useMemo(() => { + if (activeSection === 'public') { + // TODO: Fetch public policies from API when available + return []; + } + // 'my-policies' - already sorted by most recent + return filteredPolicies; + }, [activeSection, filteredPolicies]); + + // Get section title for display + const getSectionTitle = () => { + switch (activeSection) { + case 'my-policies': + return 'My policies'; + case 'public': + return 'User-created policies'; + default: + return 'Policies'; + } + }; + + // Handle policy selection + const handleSelectPolicy = ( + policyId: string, + label: string, + paramCount: number, + associationId?: string + ) => { + // Update the association's updatedAt to track "recently used" + if (associationId) { + updatePolicyAssociation.mutate({ + userPolicyId: associationId, + updates: {}, // updatedAt is set automatically by the store + }); + } + // Call onSelect with policy state + onSelect({ id: policyId, label, parameters: Array(paramCount).fill({}) }); + onClose(); + }; + + // Handle current law selection + const handleSelectCurrentLaw = () => { + onSelect({ id: 'current-law', label: 'Current law', parameters: [] }); + onClose(); + }; + + // ========== Creation Mode Logic ========== + + // Create local policy state object for components + const localPolicy: PolicyStateProps = useMemo( + () => ({ + label: policyLabel, + parameters: policyParameters, + }), + [policyLabel, policyParameters] + ); + + // Count modifications + const modificationCount = countPolicyModifications(localPolicy); + + // Build flat list of all searchable parameters for autocomplete + const searchableParameters = useMemo(() => { + if (!parameters) { + return []; + } + + return Object.values(parameters) + .filter( + (param): param is ParameterMetadata => + param.type === 'parameter' && !!param.label && !param.parameter.includes('pycache') + ) + .map((param) => { + const hierarchicalLabels = getHierarchicalLabels(param.parameter, parameters); + const fullLabel = + hierarchicalLabels.length > 0 ? formatLabelParts(hierarchicalLabels) : param.label; + return { + value: param.parameter, + label: fullLabel, + }; + }) + .sort((a, b) => a.label.localeCompare(b.label)); + }, [parameters]); + + // Handle search selection - expand tree path and select parameter + const handleSearchSelect = useCallback( + (paramName: string) => { + const param = parameters[paramName]; + if (!param || param.type !== 'parameter') { + return; + } + + // Expand all parent nodes in the tree path + const pathParts = paramName.split('.'); + const newExpanded = new Set(expandedMenuItems); + let currentPath = ''; + for (let i = 0; i < pathParts.length - 1; i++) { + currentPath = currentPath ? `${currentPath}.${pathParts[i]}` : pathParts[i]; + newExpanded.add(currentPath); + } + setExpandedMenuItems(newExpanded); + + // Select the parameter + setSelectedParam(param); + setIntervals([]); + setValueSetterMode(ValueSetterMode.DEFAULT); + + // Clear search + setParameterSearch(''); + }, + [parameters, expandedMenuItems] + ); + + // Handle menu item click + const handleMenuItemClick = useCallback( + (paramName: string) => { + const param = parameters[paramName]; + if (param && param.type === 'parameter') { + setSelectedParam(param); + // Reset value setter state when selecting new parameter + setIntervals([]); + setValueSetterMode(ValueSetterMode.DEFAULT); + } + // Toggle expansion for non-leaf nodes + setExpandedMenuItems((prev) => { + const newSet = new Set(prev); + if (newSet.has(paramName)) { + newSet.delete(paramName); + } else { + newSet.add(paramName); + } + return newSet; + }); + }, + [parameters] + ); + + // Handle value submission + const handleValueSubmit = useCallback(() => { + if (!selectedParam || intervals.length === 0) { + return; + } + + const updatedParameters = [...policyParameters]; + let existingParam = updatedParameters.find((p) => p.name === selectedParam.parameter); + + if (!existingParam) { + existingParam = { name: selectedParam.parameter, values: [] }; + updatedParameters.push(existingParam); + } + + // Use ValueIntervalCollection to properly merge intervals + const paramCollection = new ValueIntervalCollection(existingParam.values); + intervals.forEach((interval) => { + paramCollection.addInterval(interval); + }); + + existingParam.values = paramCollection.getIntervals(); + setPolicyParameters(updatedParameters); + setIntervals([]); + }, [selectedParam, intervals, policyParameters]); + + // Handle entering creation mode + const handleEnterCreationMode = useCallback(() => { + setPolicyLabel(''); + setPolicyParameters([]); + setSelectedParam(null); + setExpandedMenuItems(new Set()); + setIntervals([]); + setParameterSearch(''); + setIsEditingLabel(false); + setIsCreationMode(true); + }, []); + + // Exit creation mode (back to browse) + const handleExitCreationMode = useCallback(() => { + setIsCreationMode(false); + setPolicyLabel(''); + setPolicyParameters([]); + setSelectedParam(null); + setExpandedMenuItems(new Set()); + setIntervals([]); + setParameterSearch(''); + }, []); + + // Handle policy creation + const handleCreatePolicy = useCallback(async () => { + if (!policyLabel.trim()) { + return; + } + + const policyData: Partial = { + parameters: policyParameters, + }; + + const payload: PolicyCreationPayload = PolicyAdapter.toCreationPayload(policyData as Policy); + + try { + const result = await createPolicy(payload); + const createdPolicy: PolicyStateProps = { + id: result.result.policy_id, + label: policyLabel, + parameters: policyParameters, + }; + onSelect(createdPolicy); + onClose(); + } catch (error) { + console.error('Failed to create policy:', error); + } + }, [policyLabel, policyParameters, createPolicy, onSelect, onClose]); + + // Render nested menu recursively + const renderMenuItems = useCallback( + (items: ParameterTreeNode[]): React.ReactNode => { + return items + .filter((item) => !item.name.includes('pycache')) + .map((item) => ( +
+ + {item.children && expandedMenuItems.has(item.name) && ( +
{renderMenuItems(item.children)}
+ )} +
+ )); + }, + [selectedParam?.parameter, expandedMenuItems, handleMenuItemClick] + ); + + // Memoize the rendered tree + const renderedMenuTree = useMemo(() => { + if (metadataLoading || !parameterTree) { + return null; + } + return renderMenuItems(parameterTree.children || []); + }, [metadataLoading, parameterTree, renderMenuItems]); + + // Get base and reform values for chart + const getChartValues = () => { + if (!selectedParam) { + return { baseValues: null, reformValues: null }; + } + + const baseValues = new ValueIntervalCollection(selectedParam.values as ValuesList); + const reformValues = new ValueIntervalCollection(baseValues); + + const paramToChart = policyParameters.find((p) => p.name === selectedParam.parameter); + if (paramToChart && paramToChart.values && paramToChart.values.length > 0) { + const userIntervals = new ValueIntervalCollection(paramToChart.values as ValuesList); + for (const interval of userIntervals.getIntervals()) { + reformValues.addInterval(interval); + } + } + + return { baseValues, reformValues }; + }; + + const { baseValues, reformValues } = getChartValues(); + const ValueSetterToRender = ValueSetterComponents[valueSetterMode]; + + const colorConfig = INGREDIENT_COLORS.policy; + + // Styles for the modal + const modalStyles = { + sidebar: { + width: 220, + borderRight: `1px solid ${colors.border.light}`, + paddingRight: spacing.lg, + display: 'flex', + flexDirection: 'column' as const, + gap: spacing.lg, + }, + sidebarSection: { + display: 'flex', + flexDirection: 'column' as const, + gap: spacing.xs, + }, + sidebarLabel: { + fontSize: FONT_SIZES.small, + fontWeight: typography.fontWeight.semibold, + color: colors.gray[500], + padding: `0 ${spacing.sm}`, + marginBottom: spacing.xs, + }, + sidebarItem: { + display: 'flex', + alignItems: 'center', + gap: spacing.sm, + padding: `${spacing.sm} ${spacing.md}`, + borderRadius: spacing.radius.container, + cursor: 'pointer', + transition: 'all 0.15s ease', + fontSize: FONT_SIZES.small, + fontWeight: typography.fontWeight.medium, + }, + mainContent: { + flex: 1, + display: 'flex', + flexDirection: 'column' as const, + gap: spacing.lg, + minWidth: 0, + }, + searchBar: { + position: 'relative' as const, + }, + policyGrid: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', + gap: spacing.md, + }, + policyCard: { + background: colors.white, + border: `1px solid ${colors.border.light}`, + borderRadius: spacing.radius.feature, + padding: spacing.lg, + cursor: 'pointer', + transition: 'all 0.2s ease', + position: 'relative' as const, + overflow: 'hidden', + }, + policyCardHovered: { + borderColor: colorConfig.border, + boxShadow: `0 4px 12px ${colors.shadow.light}`, + transform: 'translateY(-2px)', + }, + policyCardSelected: { + borderColor: colorConfig.accent, + background: colorConfig.bg, + }, + }; + + // Dock styles for creation mode status header + const dockStyles = { + statusHeader: { + background: 'rgba(255, 255, 255, 0.95)', + backdropFilter: 'blur(20px) saturate(180%)', + WebkitBackdropFilter: 'blur(20px) saturate(180%)', + borderRadius: spacing.radius.feature, + border: `1px solid ${modificationCount > 0 ? colorConfig.border : colors.border.light}`, + boxShadow: + modificationCount > 0 + ? `0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px ${colorConfig.border}` + : `0 2px 12px ${colors.shadow.light}`, + padding: `${spacing.sm} ${spacing.lg}`, + transition: 'all 0.3s ease', + margin: spacing.md, + marginBottom: 0, + }, + divider: { + width: '1px', + height: '24px', + background: colors.gray[200], + flexShrink: 0, + }, + }; + + // Policy for drawer preview + const drawerPolicy = useMemo(() => { + if (!drawerPolicyId) { + return null; + } + return userPolicies.find((p) => p.id === drawerPolicyId) || null; + }, [drawerPolicyId, userPolicies]); + + return ( + !open && onClose()}> + +
+
+ +
+ + + {isCreationMode ? 'Create policy' : 'Select policy'} + + + {isCreationMode + ? 'Configure parameters for your new policy' + : 'Choose an existing policy or create a new one'} + + +
+
+ {isCreationMode ? ( + // ========== CREATION MODE ========== + <> + + {/* Left Sidebar - Parameter Tree */} +
+ {/* Parameter Tree */} +
+
+ + PARAMETERS + + + p.label.toLowerCase().includes(parameterSearch.toLowerCase()) + ).length > 0 + } + > + +
+ + setParameterSearch(e.target.value)} + className="tw:pl-8 tw:h-8 tw:text-xs" + /> +
+ + e.preventDefault()} + > + + + {searchableParameters + .filter((p) => + p.label.toLowerCase().includes(parameterSearch.toLowerCase()) + ) + .slice(0, 20) + .map((item) => ( + { + handleSearchSelect(item.value); + setParameterSearch(''); + }} + > + {item.label} + + ))} + + + + +
+ +
+ {metadataLoading || !parameterTree ? ( + + + + + + ) : ( + renderedMenuTree + )} +
+ +
+
+ + {/* Main Content - Parameter Editor */} +
+ {/* Status Header Bar */} +
+ + {/* Left side: Policy icon and editable name */} + + {/* Policy icon */} +
+ +
+ + {/* Editable policy name */} +
+ {isEditingLabel ? ( + setPolicyLabel(e.currentTarget.value)} + onBlur={() => setIsEditingLabel(false)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + setIsEditingLabel(false); + } + if (e.key === 'Escape') { + setIsEditingLabel(false); + } + }} + autoFocus + placeholder="Enter policy name..." + className="tw:border-none tw:bg-transparent tw:p-0 tw:h-auto tw:shadow-none tw:focus-visible:ring-0" + style={{ + width: 250, + fontFamily: typography.fontFamily.primary, + fontWeight: 600, + fontSize: FONT_SIZES.normal, + }} + /> + ) : ( + <> + setIsEditingLabel(true)} + > + {policyLabel || 'Click to name your policy...'} + + + + )} +
+ + + {/* Right side: Modification count */} + + {/* Modification count with status indicator */} + + {modificationCount > 0 ? ( + <> +
+ + {modificationCount} parameter{modificationCount !== 1 ? 's' : ''}{' '} + modified + + + ) : ( + + No changes yet + + )} + + + +
+ + {/* Parameter Editor Content */} +
+ {!selectedParam ? ( +
+ +
+ +
+ + Select a parameter from the menu to modify its value for your policy + reform. + + +
+ ) : ( +
+ + {/* Parameter Header */} +
+ + {capitalize(selectedParam.label || 'Label unavailable')} + + {selectedParam.description && ( + + {selectedParam.description} + + )} +
+ + {/* Value Setter */} +
+ + + Set new value + + + +
+ +
+ { + setIntervals([]); + setValueSetterMode(mode); + }} + /> + + + +
+ + {/* Historical Values Chart */} + {baseValues && reformValues && ( +
+ +
+ )} + +
+ )} +
+
+ + + {/* Footer for creation mode */} +
+ + + + +
+ + ) : ( + // ========== BROWSE MODE ========== + <> + + {/* Left Sidebar */} +
+ {/* Quick Actions */} +
+ Quick select + +
+ + + + {/* Navigation Sections */} +
+ Library + + {/* My Policies (sorted by most recent) */} + + + {/* User-created policies */} + + + {/* Create New Policy */} + +
+
+ + {/* Main Content Area */} +
+ {/* Search Bar */} +
+
+ + setSearchQuery(e.target.value)} + className="tw:pl-8" + style={{ + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + fontSize: FONT_SIZES.small, + }} + /> +
+
+ + {/* Section Header */} + + + {getSectionTitle()} + + + {displayedPolicies.length}{' '} + {displayedPolicies.length === 1 ? 'policy' : 'policies'} + + + + {/* Policy Grid */} + + {isLoading ? ( + + {[1, 2, 3].map((i) => ( + + ))} + + ) : activeSection === 'public' ? ( + // Placeholder for User-created policies section +
+
+ +
+ + Coming soon + + + Search and browse policies created by other PolicyEngine users. + +
+ ) : displayedPolicies.length === 0 ? ( +
+
+ +
+ + {searchQuery ? 'No policies match your search' : 'No policies yet'} + + + {searchQuery + ? 'Try adjusting your search terms or browse all policies' + : 'Create your first policy to get started'} + + {!searchQuery && ( + + )} +
+ ) : ( +
+ {displayedPolicies.map((policy) => { + const isSelected = selectedPolicyId === policy.id; + + return ( +
{ + setSelectedPolicyId(policy.id); + handleSelectPolicy( + policy.id, + policy.label, + policy.paramCount, + policy.associationId + ); + }} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + > + {/* Policy accent bar */} +
+ + + + + {policy.label} + + + {policy.paramCount} param{policy.paramCount !== 1 ? 's' : ''}{' '} + changed + + + + + {/* Info button */} + + {/* Select indicator */} + + + +
+ ); + })} +
+ )} + +
+ + + {/* Sliding panel overlay - click to close */} + {!!drawerPolicy && ( +
setDrawerPolicyId(null)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + aria-label="Close drawer" + /> + )} + + {/* Sliding panel for policy details */} + {!!drawerPolicy && ( +
e.stopPropagation()} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.stopPropagation(); + } + }} + > + {drawerPolicy && ( + <> + {/* Panel header */} +
+ + + + {drawerPolicy.label} + + + {drawerPolicy.paramCount} parameter + {drawerPolicy.paramCount !== 1 ? 's' : ''} changed from current law + + + + +
+ + {/* Panel body */} +
+ + {/* Unified grid for header and data rows */} +
+ {/* Header row */} + + Parameter + + + Changes + + + {/* Data rows - grouped by parameter */} + {(() => { + const groupedParams: Array<{ + paramName: string; + label: string; + changes: Array<{ period: string; value: string }>; + }> = []; + + drawerPolicy.parameters.forEach((param) => { + const paramName = param.name; + const hierarchicalLabels = getHierarchicalLabels( + paramName, + parameters + ); + const displayLabel = + hierarchicalLabels.length > 0 + ? formatLabelParts(hierarchicalLabels) + : paramName.split('.').pop() || paramName; + const metadata = parameters[paramName]; + + // Use value intervals directly from the Policy type + const changes = (param.values || []).map((interval) => ({ + period: formatPeriod(interval.startDate, interval.endDate), + value: formatParameterValue(interval.value, metadata?.unit), + })); + + groupedParams.push({ paramName, label: displayLabel, changes }); + }); + + return groupedParams.map((param) => ( + + {/* Parameter name cell */} +
+ + + + {param.label} + + + + {param.paramName} + + +
+ {/* Period column */} +
+ {param.changes.map((change, idx) => ( + + {change.period} + + ))} +
+ {/* Value column */} +
+ {param.changes.map((change, idx) => ( + + {change.value} + + ))} +
+ + )); + })()} +
+ +
+ + {/* Panel footer */} +
+ +
+ + )} +
+ )} + + )} +
+ +
+ ); +} + +// ============================================================================ +// POPULATION BROWSE MODAL - Geography and household selection +// ============================================================================ + +type PopulationCategory = + | 'national' + | 'states' + | 'districts' + | 'countries' + | 'constituencies' + | 'local-authorities' + | 'my-households'; + +interface PopulationBrowseModalProps { + isOpen: boolean; + onClose: () => void; + onSelect: (population: PopulationStateProps) => void; + onCreateNew: () => void; +} + +function PopulationBrowseModal({ + isOpen, + onClose, + onSelect, + onCreateNew: _onCreateNew, +}: PopulationBrowseModalProps) { + const countryId = useCurrentCountry() as 'us' | 'uk'; + const userId = MOCK_USER_ID.toString(); + const queryClient = useQueryClient(); + const { data: households, isLoading: householdsLoading } = useUserHouseholds(userId); + const regionOptions = useSelector((state: RootState) => state.metadata.economyOptions.region); + const metadata = useSelector((state: RootState) => state.metadata); + const basicInputFields = useSelector(getBasicInputFields); + + // State + const [searchQuery, setSearchQuery] = useState(''); + const [activeCategory, setActiveCategory] = useState('national'); + + // Creation mode state + const [isCreationMode, setIsCreationMode] = useState(false); + const [householdLabel, setHouseholdLabel] = useState(''); + const [householdDraft, setHouseholdDraft] = useState(null); + const [isEditingLabel, setIsEditingLabel] = useState(false); + + // Get report year (default to current year) + const reportYear = CURRENT_YEAR.toString(); + + // Create household hook + const { createHousehold, isPending: isCreating } = useCreateHousehold( + householdLabel || undefined + ); + + // Get all basic non-person fields dynamically + const basicNonPersonFields = useMemo(() => { + return Object.entries(basicInputFields) + .filter(([key]) => key !== 'person') + .flatMap(([, fields]) => fields); + }, [basicInputFields]); + + // Derive marital status and number of children from household draft + const householdPeople = useMemo(() => { + if (!householdDraft) { + return []; + } + return Object.keys(householdDraft.householdData.people || {}); + }, [householdDraft]); + + const maritalStatus = householdPeople.includes('your partner') ? 'married' : 'single'; + const numChildren = householdPeople.filter((p) => p.includes('dependent')).length; + + // Reset state on mount + useEffect(() => { + if (isOpen) { + setSearchQuery(''); + setActiveCategory('national'); + setIsCreationMode(false); + setHouseholdLabel(''); + setHouseholdDraft(null); + setIsEditingLabel(false); + } + }, [isOpen]); + + // Get geography categories based on country + const geographyCategories = useMemo(() => { + if (countryId === 'uk') { + const ukCountries = getUKCountries(regionOptions); + const ukConstituencies = getUKConstituencies(regionOptions); + const ukLocalAuthorities = getUKLocalAuthorities(regionOptions); + return [ + { + id: 'countries' as const, + label: 'Countries', + count: ukCountries.length, + regions: ukCountries, + }, + { + id: 'constituencies' as const, + label: 'Constituencies', + count: ukConstituencies.length, + regions: ukConstituencies, + }, + { + id: 'local-authorities' as const, + label: 'Local authorities', + count: ukLocalAuthorities.length, + regions: ukLocalAuthorities, + }, + ]; + } + // US + const usStates = getUSStates(regionOptions); + const usDistricts = getUSCongressionalDistricts(regionOptions); + return [ + { id: 'states' as const, label: 'States', count: usStates.length, regions: usStates }, + { + id: 'districts' as const, + label: 'Congressional districts', + count: usDistricts.length, + regions: usDistricts, + }, + ]; + }, [countryId, regionOptions]); + + // Get regions for active category + const activeRegions = useMemo(() => { + const category = geographyCategories.find((c) => c.id === activeCategory); + return category?.regions || []; + }, [activeCategory, geographyCategories]); + + // Transform households with usage tracking sort + const sortedHouseholds = useMemo(() => { + if (!households) { + return []; + } + + return [...households] + .map((h) => { + // Ensure householdId is always a string for consistent comparisons + const householdIdStr = String(h.association.householdId); + // Get usage timestamp, fall back to association's updatedAt + const usageTimestamp = householdUsageStore.getLastUsed(householdIdStr); + const sortTimestamp = + usageTimestamp || h.association.updatedAt || h.association.createdAt || ''; + return { + id: householdIdStr, + label: h.association.label || `Household #${householdIdStr}`, + memberCount: h.household?.household_json?.people + ? Object.keys(h.household.household_json.people).length + : 0, + sortTimestamp, + household: h.household, + }; + }) + .sort((a, b) => b.sortTimestamp.localeCompare(a.sortTimestamp)); + }, [households]); + + // Filter regions/households based on search + const filteredRegions = useMemo(() => { + if (!searchQuery.trim()) { + return activeRegions; + } + const query = searchQuery.toLowerCase(); + return activeRegions.filter((r) => r.label.toLowerCase().includes(query)); + }, [activeRegions, searchQuery]); + + const filteredHouseholds = useMemo(() => { + if (!searchQuery.trim()) { + return sortedHouseholds; + } + const query = searchQuery.toLowerCase(); + return sortedHouseholds.filter((h) => h.label.toLowerCase().includes(query)); + }, [sortedHouseholds, searchQuery]); + + // Handle geography selection + const handleSelectGeography = (region: RegionOption | null) => { + // Create geography object + const geography: Geography = region + ? { + id: `${countryId}-${region.value}`, + countryId, + scope: 'subnational', + geographyId: region.value, + } + : { + id: countryId, + countryId, + scope: 'national', + geographyId: countryId, + }; + + // Record usage + geographyUsageStore.recordUsage(geography.geographyId); + + // Generate label and create population state + const label = generateGeographyLabel(geography); + onSelect({ + geography, + household: null, + label, + type: 'geography', + }); + onClose(); + }; + + // Handle household selection + const handleSelectHousehold = (householdData: (typeof sortedHouseholds)[0]) => { + // Record usage with string ID + const householdIdStr = String(householdData.id); + householdUsageStore.recordUsage(householdIdStr); + + // Convert HouseholdMetadata to Household using the adapter + // If household data isn't available, create a minimal household object with just the ID + let household: Household | null = null; + if (householdData.household) { + household = HouseholdAdapter.fromMetadata(householdData.household); + } else { + // Fallback: create minimal household with ID for selection to work + household = { + id: householdIdStr, + countryId, + householdData: { people: {} }, + }; + } + + const populationState: PopulationStateProps = { + geography: null, + household, + label: householdData.label, + type: 'household', + }; + + onSelect(populationState); + onClose(); + }; + + // Enter creation mode + const handleEnterCreationMode = useCallback(() => { + const builder = new HouseholdBuilder(countryId as 'us' | 'uk', reportYear); + builder.addAdult('you', 30, { employment_income: 0 }); + setHouseholdDraft(builder.build()); + setHouseholdLabel(''); + setIsCreationMode(true); + }, [countryId, reportYear]); + + // Exit creation mode (back to browse) + const handleExitCreationMode = useCallback(() => { + setIsCreationMode(false); + setHouseholdDraft(null); + setHouseholdLabel(''); + }, []); + + // Handle marital status change + const handleMaritalStatusChange = useCallback( + (newStatus: 'single' | 'married') => { + if (!householdDraft) { + return; + } + + const builder = new HouseholdBuilder(countryId as 'us' | 'uk', reportYear); + builder.loadHousehold(householdDraft); + + const hasPartner = householdPeople.includes('your partner'); + + if (newStatus === 'married' && !hasPartner) { + builder.addAdult('your partner', 30, { employment_income: 0 }); + builder.setMaritalStatus('you', 'your partner'); + } else if (newStatus === 'single' && hasPartner) { + builder.removePerson('your partner'); + } + + setHouseholdDraft(builder.build()); + }, + [householdDraft, householdPeople, countryId, reportYear] + ); + + // Handle number of children change + const handleNumChildrenChange = useCallback( + (newCount: number) => { + if (!householdDraft) { + return; + } + + const builder = new HouseholdBuilder(countryId as 'us' | 'uk', reportYear); + builder.loadHousehold(householdDraft); + + const currentChildren = householdPeople.filter((p) => p.includes('dependent')); + const currentChildCount = currentChildren.length; + + if (newCount !== currentChildCount) { + // Remove all existing children + currentChildren.forEach((child) => builder.removePerson(child)); + + // Add new children + if (newCount > 0) { + const hasPartner = householdPeople.includes('your partner'); + const parentIds = hasPartner ? ['you', 'your partner'] : ['you']; + const ordinals = ['first', 'second', 'third', 'fourth', 'fifth']; + + for (let i = 0; i < newCount; i++) { + const childName = `your ${ordinals[i] || `${i + 1}th`} dependent`; + builder.addChild(childName, 10, parentIds, { employment_income: 0 }); + } + } + } + + setHouseholdDraft(builder.build()); + }, + [householdDraft, householdPeople, countryId, reportYear] + ); + + // Handle household creation submission + const handleCreateHousehold = useCallback(async () => { + if (!householdDraft || !householdLabel.trim()) { + return; + } + + const payload = HouseholdAdapter.toCreationPayload(householdDraft.householdData, countryId); + + try { + const result = await createHousehold(payload); + const householdId = result.result.household_id.toString(); + + // Record usage + householdUsageStore.recordUsage(householdId); + + // Create household with ID set for proper selection highlighting + const createdHousehold: Household = { + ...householdDraft, + id: householdId, + }; + + const populationState = { + geography: null, + household: createdHousehold, + label: householdLabel, + type: 'household' as const, + }; + + // Wait for the household associations query to refetch so the new household appears in recentPopulations + await queryClient.refetchQueries({ + queryKey: householdAssociationKeys.byUser(userId, countryId), + }); + + // Select the newly created household + onSelect(populationState); + onClose(); + } catch (err) { + console.error('Failed to create household:', err); + } + }, [ + householdDraft, + householdLabel, + countryId, + createHousehold, + onSelect, + onClose, + queryClient, + userId, + ]); + + const colorConfig = INGREDIENT_COLORS.population; + + // Styles (matching PolicyBrowseModal) + const modalStyles = { + sidebar: { + width: 220, + borderRight: `1px solid ${colors.border.light}`, + display: 'flex', + flexDirection: 'column' as const, + flexShrink: 0, + overflow: 'hidden' as const, + }, + sidebarInner: { + display: 'flex', + flexDirection: 'column' as const, + gap: spacing.lg, + padding: spacing.md, + paddingRight: spacing.lg, + }, + sidebarSection: { + display: 'flex', + flexDirection: 'column' as const, + gap: spacing.xs, + }, + sidebarLabel: { + fontSize: FONT_SIZES.small, + fontWeight: typography.fontWeight.semibold, + color: colors.gray[500], + padding: `0 ${spacing.sm}`, + marginBottom: spacing.xs, + }, + sidebarItem: { + display: 'flex', + alignItems: 'center', + gap: spacing.sm, + padding: `${spacing.sm} ${spacing.md}`, + borderRadius: spacing.radius.container, + cursor: 'pointer', + transition: 'all 0.15s ease', + fontSize: FONT_SIZES.small, + fontWeight: typography.fontWeight.medium, + }, + mainContent: { + flex: 1, + display: 'flex', + flexDirection: 'column' as const, + gap: spacing.lg, + minWidth: 0, + padding: spacing.xl, + overflow: 'hidden' as const, + }, + regionGrid: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', + gap: spacing.sm, + }, + regionChip: { + padding: `${spacing.sm} ${spacing.md}`, + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + background: colors.white, + cursor: 'pointer', + transition: 'all 0.15s ease', + fontSize: FONT_SIZES.small, + textAlign: 'center' as const, + }, + householdCard: { + padding: spacing.md, + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + background: colors.white, + cursor: 'pointer', + transition: 'all 0.15s ease', + }, + }; + + // Dock styles for creation mode status header + const dockStyles = { + statusHeader: { + background: 'rgba(255, 255, 255, 0.95)', + backdropFilter: 'blur(20px) saturate(180%)', + WebkitBackdropFilter: 'blur(20px) saturate(180%)', + borderRadius: spacing.radius.feature, + border: `1px solid ${householdDraft ? colorConfig.border : colors.border.light}`, + boxShadow: householdDraft + ? `0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px ${colorConfig.border}` + : `0 2px 12px ${colors.shadow.light}`, + padding: `${spacing.sm} ${spacing.lg}`, + transition: 'all 0.3s ease', + marginBottom: spacing.md, + }, + }; + + // Get section title + const getSectionTitle = () => { + if (activeCategory === 'national') { + return countryId === 'uk' ? 'UK-wide' : 'Nationwide'; + } + if (activeCategory === 'my-households') { + return 'My households'; + } + const category = geographyCategories.find((c) => c.id === activeCategory); + return category?.label || 'Regions'; + }; + + // Get item count for display + const getItemCount = () => { + if (activeCategory === 'national') { + return 1; + } + if (activeCategory === 'my-households') { + return filteredHouseholds.length; + } + return filteredRegions.length; + }; + + return ( + !open && onClose()}> + +
+
+ +
+ + + {isCreationMode ? 'Create household' : 'Household(s)'} + + + {isCreationMode + ? 'Configure your household composition and details' + : 'Choose a geographic region or create a household'} + + +
+
+ + {/* Left Sidebar - independently scrollable */} +
+ +
+ {/* Quick Select */} +
+ Quick select + +
+ + + + {/* Geography Categories */} +
+ Geographies + {geographyCategories.map((category) => ( + + ))} +
+ + + + {/* My Households */} +
+ Households + + + {/* Create New - styled as sidebar tab */} + +
+
+ +
+ + {/* Main Content Area */} +
+ {isCreationMode ? ( + // Household Creation Form + <> + {/* Status Header Bar */} +
+ + {/* Left side: Household icon and editable name */} + + {/* Household icon */} +
+ +
+ + {/* Editable household name */} +
+ {isEditingLabel ? ( + setHouseholdLabel(e.currentTarget.value)} + onBlur={() => setIsEditingLabel(false)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + setIsEditingLabel(false); + } + if (e.key === 'Escape') { + setIsEditingLabel(false); + } + }} + autoFocus + placeholder="Enter household name..." + className="tw:border-none tw:bg-transparent tw:p-0 tw:h-auto tw:shadow-none tw:focus-visible:ring-0" + style={{ + width: 250, + fontFamily: typography.fontFamily.primary, + fontWeight: 600, + fontSize: FONT_SIZES.normal, + }} + /> + ) : ( + <> + setIsEditingLabel(true)} + > + {householdLabel || 'Click to name your household...'} + + + + )} +
+ + + {/* Right side: Member count */} + + + {householdPeople.length > 0 ? ( + <> +
+ + {householdPeople.length} member + {householdPeople.length !== 1 ? 's' : ''} + + + ) : ( + + No members yet + + )} + + + +
+ + + {/* HouseholdBuilderForm */} + {householdDraft && ( +
+ {isCreating && ( +
+ +
+ )} + +
+ )} + + + ) : ( + <> + {/* Search Bar */} + {activeCategory !== 'national' && ( +
+ + setSearchQuery(e.target.value)} + className="tw:pl-8" + style={{ + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + fontSize: FONT_SIZES.small, + }} + /> +
+ )} + + {/* Section Header */} + + + {getSectionTitle()} + + + {getItemCount()} {getItemCount() === 1 ? 'option' : 'options'} + + + + {/* Content */} + + {activeCategory === 'national' ? ( + // National selection - single prominent option +
+
handleSelectGeography(null)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + > + + {countryId === 'uk' ? ( + + ) : ( + + )} + + + {countryId === 'uk' + ? 'Households UK-wide' + : 'Households nationwide'} + + + Simulate policy effects across the entire{' '} + {countryId === 'uk' ? 'United Kingdom' : 'United States'} + + + + +
+
+ ) : activeCategory === 'my-households' ? ( + // Households list + householdsLoading ? ( + + {[1, 2, 3].map((i) => ( + + ))} + + ) : filteredHouseholds.length === 0 ? ( +
+
+ +
+ + {searchQuery ? 'No households match your search' : 'No households yet'} + + + {searchQuery + ? 'Try adjusting your search terms' + : 'Create a custom household using the button in the sidebar'} + +
+ ) : ( + + {filteredHouseholds.map((household) => ( +
handleSelectHousehold(household)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.currentTarget.click(); + } + }} + > + + +
+ +
+ + + {household.label} + + + {household.memberCount}{' '} + {household.memberCount === 1 ? 'member' : 'members'} + + + + + +
+ ))} + + ) + ) : // Geography grid + filteredRegions.length === 0 ? ( +
+ + No regions match your search + +
+ ) : ( +
+ {filteredRegions.map((region) => ( + + ))} +
+ )} + + + )} +
+ + + {/* Footer for creation mode - fixed at bottom */} + {isCreationMode && ( +
+ + + + +
+ )} +
+ +
+ ); +} + +// PolicyCreationModal is imported from ./reportBuilder/modals + +// ============================================================================ +// SIMULATION CANVAS +// ============================================================================ + +// State for the policy browse modal +interface PolicyBrowseState { + isOpen: boolean; + simulationIndex: number; +} + +interface SimulationCanvasProps { + reportState: ReportBuilderState; + setReportState: React.Dispatch>; + pickerState: IngredientPickerState; + setPickerState: React.Dispatch>; + viewMode: ViewMode; +} + +function SimulationCanvas({ + reportState, + setReportState, + pickerState, + setPickerState, + viewMode, +}: SimulationCanvasProps) { + const countryId = useCurrentCountry() as 'us' | 'uk'; + const userId = MOCK_USER_ID.toString(); + const { data: policies } = useUserPolicies(userId); + const { data: households } = useUserHouseholds(userId); + const regionOptions = useSelector((state: RootState) => state.metadata.economyOptions.region); + // Any geography selection (nationwide or subnational) requires dual-simulation + // Only households allow single-simulation reports + const isGeographySelected = !!reportState.simulations[0]?.population?.geography?.id; + + // State for the augmented policy browse modal + const [policyBrowseState, setPolicyBrowseState] = useState({ + isOpen: false, + simulationIndex: 0, + }); + + // State for the policy creation modal + const [policyCreationState, setPolicyCreationState] = useState({ + isOpen: false, + simulationIndex: 0, + }); + + // State for the population browse modal + const [populationBrowseState, setPopulationBrowseState] = useState({ + isOpen: false, + simulationIndex: 0, + }); + + // Transform policies data into SavedPolicy format, sorted by most recent + // Uses association data for display (like Policies page), policy data only for param count + const savedPolicies: SavedPolicy[] = useMemo(() => { + return (policies || []) + .map((p) => { + const policyId = p.association.policyId.toString(); + const label = p.association.label || `Policy #${policyId}`; + return { + id: policyId, + label, + paramCount: countPolicyModifications(p.policy), // Handles undefined gracefully + createdAt: p.association.createdAt, + updatedAt: p.association.updatedAt, + }; + }) + .sort((a, b) => { + // Sort by most recent timestamp (prefer updatedAt, fallback to createdAt) + const aTime = a.updatedAt || a.createdAt || ''; + const bTime = b.updatedAt || b.createdAt || ''; + return bTime.localeCompare(aTime); // Descending (most recent first) + }); + }, [policies]); + + // Build recent populations from usage tracking + const recentPopulations: RecentPopulation[] = useMemo(() => { + const results: Array = []; + + // Get all region options for lookup + const regions = regionOptions || []; + const allRegions: RegionOption[] = + countryId === 'us' + ? [...getUSStates(regions), ...getUSCongressionalDistricts(regions)] + : [ + ...getUKCountries(regions), + ...getUKConstituencies(regions), + ...getUKLocalAuthorities(regions), + ]; + + // Add recent geographies (excluding national - that's shown separately) + const recentGeoIds = geographyUsageStore.getRecentIds(10); + for (const geoId of recentGeoIds) { + // Skip national scopes as they're shown separately + if (geoId === 'us' || geoId === 'uk') { + continue; + } + + const timestamp = geographyUsageStore.getLastUsed(geoId) || ''; + const region = allRegions.find((r) => r.value === geoId); + + if (region) { + const geographyId = `${countryId}-${geoId}`; + const geography: Geography = { + id: geographyId, + countryId, + scope: 'subnational', + geographyId: geoId, + }; + results.push({ + id: geographyId, // Use full id for matching with currentPopulationId + label: region.label, + type: 'geography', + population: { + geography, + household: null, + label: generateGeographyLabel(geography), + type: 'geography', + }, + timestamp, + }); + } + } + + // Add recent households + const recentHouseholdIds = householdUsageStore.getRecentIds(10); + for (const householdId of recentHouseholdIds) { + const timestamp = householdUsageStore.getLastUsed(householdId) || ''; + + // Find the household in the fetched data (use String() for type-safe comparison) + const householdData = households?.find( + (h) => String(h.association.householdId) === householdId + ); + if (householdData?.household) { + const household = HouseholdAdapter.fromMetadata(householdData.household); + // Use the household.id from the adapter for consistent matching with currentPopulationId + const resolvedId = household.id || householdId; + results.push({ + id: resolvedId, + label: householdData.association.label || `Household #${householdId}`, + type: 'household', + population: { + geography: null, + household, + label: householdData.association.label || `Household #${householdId}`, + type: 'household', + }, + timestamp, + }); + } + } + + // Sort by timestamp (most recent first) and return without timestamp + return results + .sort((a, b) => b.timestamp.localeCompare(a.timestamp)) + .slice(0, 10) + .map(({ timestamp: _t, ...rest }) => rest); + }, [countryId, households, regionOptions]); + + const handleAddSimulation = useCallback(() => { + if (reportState.simulations.length >= 2) { + return; + } + const newSim = initializeSimulationState(); + newSim.label = 'Reform simulation'; + newSim.population = { ...reportState.simulations[0].population }; + setReportState((prev) => ({ ...prev, simulations: [...prev.simulations, newSim] })); + }, [reportState.simulations, setReportState]); + + const handleRemoveSimulation = useCallback( + (index: number) => { + if (index === 0) { + return; + } + setReportState((prev) => ({ + ...prev, + simulations: prev.simulations.filter((_, i) => i !== index), + })); + }, + [setReportState] + ); + + const handleSimulationLabelChange = useCallback( + (index: number, label: string) => { + setReportState((prev) => ({ + ...prev, + simulations: prev.simulations.map((sim, i) => (i === index ? { ...sim, label } : sim)), + })); + }, + [setReportState] + ); + + const handleIngredientSelect = useCallback( + (item: PolicyStateProps | PopulationStateProps | null) => { + const { simulationIndex, ingredientType } = pickerState; + setReportState((prev) => { + const newSimulations = prev.simulations.map((sim, i) => { + if (i !== simulationIndex) { + return sim; + } + if (ingredientType === 'policy') { + return { ...sim, policy: item as PolicyStateProps }; + } + if (ingredientType === 'population') { + return { ...sim, population: item as PopulationStateProps }; + } + return sim; + }); + if (ingredientType === 'population' && simulationIndex === 0 && newSimulations.length > 1) { + newSimulations[1] = { + ...newSimulations[1], + population: { ...(item as PopulationStateProps) }, + }; + } + return { ...prev, simulations: newSimulations }; + }); + }, + [pickerState, setReportState] + ); + + const handleQuickSelectPolicy = useCallback( + (simulationIndex: number) => { + const policyState: PolicyStateProps = { + id: 'current-law', + label: 'Current law', + parameters: [], + }; + setReportState((prev) => ({ + ...prev, + simulations: prev.simulations.map((sim, i) => + i === simulationIndex ? { ...sim, policy: policyState } : sim + ), + })); + }, + [setReportState] + ); + + const handleSelectSavedPolicy = useCallback( + (simulationIndex: number, policyId: string, label: string, paramCount: number) => { + const policyState: PolicyStateProps = { + id: policyId, + label, + parameters: Array(paramCount).fill({}), + }; + setReportState((prev) => ({ + ...prev, + simulations: prev.simulations.map((sim, i) => + i === simulationIndex ? { ...sim, policy: policyState } : sim + ), + })); + }, + [setReportState] + ); + + const handleBrowseMorePolicies = useCallback((simulationIndex: number) => { + // Open the augmented policy browse modal + setPolicyBrowseState({ + isOpen: true, + simulationIndex, + }); + }, []); + + // Handle policy selection from the browse modal + const handlePolicySelectFromBrowse = useCallback( + (policy: PolicyStateProps) => { + const { simulationIndex } = policyBrowseState; + setReportState((prev) => ({ + ...prev, + simulations: prev.simulations.map((sim, i) => + i === simulationIndex ? { ...sim, policy } : sim + ), + })); + }, + [policyBrowseState, setReportState] + ); + + const handleBrowseMorePopulations = useCallback((simulationIndex: number) => { + // Open the augmented population browse modal + setPopulationBrowseState({ + isOpen: true, + simulationIndex, + }); + }, []); + + // Handle population selection from the browse modal + const handlePopulationSelectFromBrowse = useCallback( + (population: PopulationStateProps) => { + const { simulationIndex } = populationBrowseState; + + setReportState((prev) => { + // Create a new population object to ensure React detects the change + const newPopulation = { ...population }; + + const newSimulations = prev.simulations.map((sim, i) => + i === simulationIndex ? { ...sim, population: newPopulation } : sim + ); + + // If updating baseline population, also update reform's inherited population + if (simulationIndex === 0 && newSimulations.length > 1) { + newSimulations[1] = { ...newSimulations[1], population: { ...newPopulation } }; + } + + return { ...prev, simulations: newSimulations }; + }); + }, + [populationBrowseState, setReportState] + ); + + const handleQuickSelectPopulation = useCallback( + (simulationIndex: number, _populationType: 'nationwide') => { + const samplePopulations = getSamplePopulations(countryId); + const populationState = samplePopulations.nationwide; + + // Record usage for the geography + if (populationState.geography?.geographyId) { + geographyUsageStore.recordUsage(populationState.geography.geographyId); + } + + setReportState((prev) => { + const newSimulations = prev.simulations.map((sim, i) => + i === simulationIndex ? { ...sim, population: { ...populationState } } : sim + ); + + // Update reform's inherited population if baseline + if (simulationIndex === 0 && newSimulations.length > 1) { + newSimulations[1] = { ...newSimulations[1], population: { ...populationState } }; + } + + return { ...prev, simulations: newSimulations }; + }); + }, + [countryId, setReportState] + ); + + // Handle selection from recent populations + const handleSelectRecentPopulation = useCallback( + (simulationIndex: number, population: PopulationStateProps) => { + // Record usage + if (population.geography?.geographyId) { + geographyUsageStore.recordUsage(population.geography.geographyId); + } else if (population.household?.id) { + householdUsageStore.recordUsage(population.household.id); + } + + setReportState((prev) => { + // Create a new population object to ensure React detects the change + const newPopulation = { ...population }; + + const newSimulations = prev.simulations.map((sim, i) => + i === simulationIndex ? { ...sim, population: newPopulation } : sim + ); + + // Update reform's inherited population if baseline + if (simulationIndex === 0 && newSimulations.length > 1) { + newSimulations[1] = { ...newSimulations[1], population: { ...newPopulation } }; + } + + return { ...prev, simulations: newSimulations }; + }); + }, + [setReportState] + ); + + const handleDeselectPolicy = useCallback( + (simulationIndex: number) => { + setReportState((prev) => ({ + ...prev, + simulations: prev.simulations.map((sim, i) => + i === simulationIndex ? { ...sim, policy: initializePolicyState() } : sim + ), + })); + }, + [setReportState] + ); + + const handleDeselectPopulation = useCallback( + (simulationIndex: number) => { + setReportState((prev) => { + const newSimulations = prev.simulations.map((sim, i) => + i === simulationIndex ? { ...sim, population: initializePopulationState() } : sim + ); + + // If deselecting baseline population, also clear reform's inherited population + if (simulationIndex === 0 && newSimulations.length > 1) { + newSimulations[1] = { + ...newSimulations[1], + population: initializePopulationState(), + }; + } + + return { ...prev, simulations: newSimulations }; + }); + }, + [setReportState] + ); + + const handleCreateCustom = useCallback( + (simulationIndex: number, ingredientType: IngredientType) => { + if (ingredientType === 'policy') { + // Open the policy creation modal instead of redirecting + setPolicyCreationState({ isOpen: true, simulationIndex }); + } else if (ingredientType === 'population') { + window.location.href = `/${countryId}/households/create`; + } + }, + [countryId] + ); + + // Handle policy created from the creation modal + const handlePolicyCreated = useCallback( + (simulationIndex: number, policy: PolicyStateProps) => { + setReportState((prev) => { + const newSimulations = [...prev.simulations]; + if (newSimulations[simulationIndex]) { + newSimulations[simulationIndex] = { + ...newSimulations[simulationIndex], + policy: { + id: policy.id, + label: policy.label, + parameters: policy.parameters, + }, + }; + } + return { ...prev, simulations: newSimulations }; + }); + }, + [setReportState] + ); + + return ( + <> +
+
+
+ handleSimulationLabelChange(0, label)} + onQuickSelectPolicy={() => handleQuickSelectPolicy(0)} + onSelectSavedPolicy={(id, label, paramCount) => + handleSelectSavedPolicy(0, id, label, paramCount) + } + onQuickSelectPopulation={() => handleQuickSelectPopulation(0, 'nationwide')} + onSelectRecentPopulation={(pop) => handleSelectRecentPopulation(0, pop)} + onDeselectPolicy={() => handleDeselectPolicy(0)} + onDeselectPopulation={() => handleDeselectPopulation(0)} + onCreateCustomPolicy={() => handleCreateCustom(0, 'policy')} + onBrowseMorePolicies={() => handleBrowseMorePolicies(0)} + onBrowseMorePopulations={() => handleBrowseMorePopulations(0)} + canRemove={false} + savedPolicies={savedPolicies} + recentPopulations={recentPopulations} + viewMode={viewMode} + /> + + {reportState.simulations.length > 1 ? ( + handleSimulationLabelChange(1, label)} + onQuickSelectPolicy={() => handleQuickSelectPolicy(1)} + onSelectSavedPolicy={(id, label, paramCount) => + handleSelectSavedPolicy(1, id, label, paramCount) + } + onQuickSelectPopulation={() => handleQuickSelectPopulation(1, 'nationwide')} + onSelectRecentPopulation={(pop) => handleSelectRecentPopulation(1, pop)} + onDeselectPolicy={() => handleDeselectPolicy(1)} + onDeselectPopulation={() => handleDeselectPopulation(1)} + onCreateCustomPolicy={() => handleCreateCustom(1, 'policy')} + onBrowseMorePolicies={() => handleBrowseMorePolicies(1)} + onBrowseMorePopulations={() => handleBrowseMorePopulations(1)} + onRemove={() => handleRemoveSimulation(1)} + canRemove={!isGeographySelected} + isRequired={isGeographySelected} + populationInherited + inheritedPopulation={reportState.simulations[0].population} + savedPolicies={savedPolicies} + recentPopulations={recentPopulations} + viewMode={viewMode} + /> + ) : ( + + )} +
+
+ + setPickerState((prev) => ({ ...prev, isOpen: false }))} + type={pickerState.ingredientType} + onSelect={handleIngredientSelect} + onCreateNew={() => + handleCreateCustom(pickerState.simulationIndex, pickerState.ingredientType) + } + /> + + {/* Augmented Policy Browse Modal */} + setPolicyBrowseState((prev) => ({ ...prev, isOpen: false }))} + onSelect={handlePolicySelectFromBrowse} + /> + + {/* Augmented Population Browse Modal */} + setPopulationBrowseState((prev) => ({ ...prev, isOpen: false }))} + onSelect={handlePopulationSelectFromBrowse} + onCreateNew={() => handleCreateCustom(populationBrowseState.simulationIndex, 'population')} + /> + + {/* Policy Creation Modal */} + setPolicyCreationState((prev) => ({ ...prev, isOpen: false }))} + onPolicyCreated={(policy) => + handlePolicyCreated(policyCreationState.simulationIndex, policy) + } + simulationIndex={policyCreationState.simulationIndex} + /> + + ); +} + +// ============================================================================ +// REPORT META PANEL - Floating Toolbar / Dock Design +// ============================================================================ + +interface ReportMetaPanelProps { + reportState: ReportBuilderState; + setReportState: React.Dispatch>; + isReportConfigured: boolean; +} + +// Progress dot component +function ProgressDot({ filled, pulsing }: { filled: boolean; pulsing?: boolean }) { + return ( +
+ ); +} + +function ReportMetaPanel({ + reportState, + setReportState, + isReportConfigured, +}: ReportMetaPanelProps) { + const [isEditingLabel, setIsEditingLabel] = useState(false); + const [labelInput, setLabelInput] = useState(''); + + const handleLabelSubmit = () => { + setReportState((prev) => ({ ...prev, label: labelInput || 'Untitled report' })); + setIsEditingLabel(false); + }; + + // Calculate configuration progress + const simulations = reportState.simulations; + const baselinePolicyConfigured = !!simulations[0]?.policy?.id; + const baselinePopulationConfigured = !!( + simulations[0]?.population?.household?.id || simulations[0]?.population?.geography?.id + ); + const hasReform = simulations.length > 1; + const reformPolicyConfigured = hasReform && !!simulations[1]?.policy?.id; + + // Get labels for display + const baselinePolicyLabel = simulations[0]?.policy?.label || null; + const baselinePopulationLabel = + simulations[0]?.population?.label || + (simulations[0]?.population?.household?.id + ? 'Household' + : simulations[0]?.population?.geography?.id + ? 'Nationwide' + : null); + const reformPolicyLabel = hasReform ? simulations[1]?.policy?.label || null : null; + + // Progress steps + const steps = [ + baselinePolicyConfigured, + baselinePopulationConfigured, + ...(hasReform ? [reformPolicyConfigured] : []), + ]; + const completedSteps = steps.filter(Boolean).length; + + // Floating dock styles - matches canvas container styling + const dockStyles = { + container: { + marginBottom: spacing.xl, + }, + dock: { + background: 'rgba(255, 255, 255, 0.92)', + backdropFilter: 'blur(20px) saturate(180%)', + WebkitBackdropFilter: 'blur(20px) saturate(180%)', + borderRadius: spacing.radius.feature, // Match canvasContainer + border: `1px solid ${isReportConfigured ? colors.primary[200] : colors.border.light}`, + boxShadow: isReportConfigured + ? `0 8px 32px rgba(44, 122, 123, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08)` + : `0 4px 24px ${colors.shadow.light}`, // Match canvasContainer shadow + padding: `${spacing.md} ${spacing.xl}`, + transition: 'all 0.35s cubic-bezier(0.4, 0, 0.2, 1)', + cursor: 'default', + overflow: 'hidden', + }, + compactRow: { + display: 'flex', + alignItems: 'center', + gap: spacing.md, + width: '100%', + }, + expandedContent: { + marginTop: spacing.md, + paddingTop: spacing.md, + borderTop: `1px solid ${colors.gray[200]}`, + }, + divider: { + width: '1px', + height: '24px', + background: colors.gray[200], + margin: `0 ${spacing.xs}`, + }, + runButton: { + background: isReportConfigured + ? `linear-gradient(135deg, ${colors.primary[500]} 0%, ${colors.primary[600]} 100%)` + : colors.gray[200], + color: isReportConfigured ? 'white' : colors.gray[500], + border: 'none', + borderRadius: spacing.radius.feature, // Match other buttons + padding: `${spacing.sm} ${spacing.lg}`, + fontFamily: typography.fontFamily.primary, + fontWeight: 600, + fontSize: FONT_SIZES.normal, + cursor: isReportConfigured ? 'pointer' : 'not-allowed', + display: 'flex', + alignItems: 'center', + gap: spacing.xs, + transition: 'all 0.3s ease', + boxShadow: isReportConfigured ? `0 4px 12px rgba(44, 122, 123, 0.3)` : 'none', + }, + configRow: { + display: 'flex', + alignItems: 'center', + gap: spacing.sm, + padding: `${spacing.xs} 0`, + }, + configChip: { + display: 'flex', + alignItems: 'center', + gap: spacing.xs, + padding: `${spacing.xs} ${spacing.sm}`, + background: colors.gray[50], + borderRadius: spacing.radius.container, + fontFamily: typography.fontFamily.primary, + fontSize: FONT_SIZES.small, + }, + }; + + return ( +
+
+ {/* Compact row - always visible */} +
+ {/* Document icon */} +
+ +
+ + {/* Title with pencil icon - flexible width */} +
+ {isEditingLabel ? ( + setLabelInput(e.target.value)} + onBlur={handleLabelSubmit} + onKeyDown={(e) => e.key === 'Enter' && handleLabelSubmit()} + placeholder="Report name..." + autoFocus + className="tw:border-none tw:bg-transparent tw:p-0 tw:h-auto tw:shadow-none tw:focus-visible:ring-0" + style={{ + flex: 1, + fontFamily: typography.fontFamily.primary, + fontWeight: 600, + fontSize: FONT_SIZES.normal, + }} + /> + ) : ( + <> + + {reportState.label || 'Untitled report'} + + + + )} +
+ + {/* Divider */} +
+ + {/* Year selector - fixed width, no checkmark */} + + + {/* Divider */} +
+ + {/* Progress dots - fixed width */} + + {steps.map((completed, i) => ( + + ))} + + + {/* Divider */} +
+ + {/* Run button */} + +
+ + {/* Expanded content - visible on hover */} +
+ + {/* Baseline row */} +
+ + Baseline + +
+ {baselinePolicyConfigured ? ( + <> + + + {baselinePolicyLabel} + + + ) : ( + <> + + + Select policy + + + )} +
+ + + + +
+ {baselinePopulationConfigured ? ( + <> + + + {baselinePopulationLabel} + + + ) : ( + <> + + + Select population + + + )} +
+
+ + {/* Reform row (if applicable) */} + {hasReform && ( +
+ + Reform + +
+ {reformPolicyConfigured ? ( + <> + + + {reformPolicyLabel} + + + ) : ( + <> + + + Select policy + + + )} +
+ + (inherits population) + +
+ )} + + {/* Ready message */} + {isReportConfigured && ( + + + + Ready to run your analysis + + + )} + +
+
+ + {/* CSS for pulse animation */} + +
+ ); +} + +// ============================================================================ +// MAIN COMPONENT +// ============================================================================ + +export default function ReportBuilderPage() { + useCurrentCountry(); + const [activeTab, setActiveTab] = useState('cards'); + + const initialSim = initializeSimulationState(); + initialSim.label = 'Baseline simulation'; + + const [reportState, setReportState] = useState({ + label: null, + year: CURRENT_YEAR, + simulations: [initialSim], + }); + + const [pickerState, setPickerState] = useState({ + isOpen: false, + simulationIndex: 0, + ingredientType: 'policy', + }); + + // Any geography selection (nationwide or subnational) requires dual-simulation + // Only households allow single-simulation reports + const isGeographySelected = !!reportState.simulations[0]?.population?.geography?.id; + + useEffect(() => { + if (isGeographySelected && reportState.simulations.length === 1) { + const newSim = initializeSimulationState(); + newSim.label = 'Reform simulation'; + newSim.population = { ...reportState.simulations[0].population }; + setReportState((prev) => ({ ...prev, simulations: [...prev.simulations, newSim] })); + } + }, [isGeographySelected, reportState.simulations]); + + const isReportConfigured = reportState.simulations.every( + (sim) => !!sim.policy.id && !!(sim.population.household?.id || sim.population.geography?.id) + ); + + const viewMode = (activeTab || 'cards') as ViewMode; + + return ( +
+
+

Report builder

+
+ + + + + + + Card view + + + Row view + + + + + +
+ ); +} diff --git a/app/src/pages/ReportOutput.page.tsx b/app/src/pages/ReportOutput.page.tsx index 5a31fd53d..66154da9c 100644 --- a/app/src/pages/ReportOutput.page.tsx +++ b/app/src/pages/ReportOutput.page.tsx @@ -1,23 +1,18 @@ -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; import { SocietyWideReportOutput as SocietyWideOutput } from '@/api/societyWideCalculation'; import { ErrorBoundary } from '@/components/common/ErrorBoundary'; import { FloatingAlert } from '@/components/common/FloatingAlert'; -import { RenameIngredientModal } from '@/components/common/RenameIngredientModal'; import { ReportErrorFallback } from '@/components/report/ReportErrorFallback'; import { Container, Stack, Text } from '@/components/ui'; import { CALCULATOR_URL } from '@/constants'; import { ReportYearProvider } from '@/contexts/ReportYearContext'; import { colors, spacing } from '@/designTokens'; import { useCurrentCountry } from '@/hooks/useCurrentCountry'; -import { useDisclosure } from '@/hooks/useDisclosure'; import { useSaveSharedReport } from '@/hooks/useSaveSharedReport'; import { useSharedReportData } from '@/hooks/useSharedReportData'; -import { useUpdateReportAssociation } from '@/hooks/useUserReportAssociations'; import { useUserReportById } from '@/hooks/useUserReports'; -import type { Geography } from '@/types/ingredients/Geography'; import { formatReportTimestamp } from '@/utils/dateUtils'; -import { isUKLocalLevelGeography } from '@/utils/geographyUtils'; import { buildSharePath, createShareData, @@ -114,74 +109,13 @@ export default function ReportOutputPage() { ? 'societyWide' : undefined; - const DEFAULT_PAGE = 'overview'; - const activeTab = subpage || DEFAULT_PAGE; + // Active subpage and view from URL params + const activeTab = subpage || ''; const activeView = view || ''; - // Redirect to overview if no subpage is specified and data is ready - // For shared views, preserve the share param in the URL - useEffect(() => { - if (!subpage && report && simulations) { - if (isSharedView && shareDataUserReportId) { - navigate( - `/${countryId}/report-output/${shareDataUserReportId}/${DEFAULT_PAGE}?${searchParams.toString()}` - ); - } else if (userReportId) { - navigate(`/${countryId}/report-output/${userReportId}/${DEFAULT_PAGE}`); - } - } - }, [ - subpage, - navigate, - report, - simulations, - countryId, - userReportId, - isSharedView, - searchParams, - shareDataUserReportId, - ]); - - // Determine which tabs to show based on output type, country, and geography scope - const tabs = outputType ? getTabsForOutputType(outputType, report?.countryId, geographies) : []; - - // Handle tab navigation (absolute path, preserve search params for shared views) - const handleTabClick = (tabValue: string) => { - if (isSharedView && shareDataUserReportId) { - navigate( - `/${countryId}/report-output/${shareDataUserReportId}/${tabValue}?${searchParams.toString()}` - ); - } else { - navigate(`/${countryId}/report-output/${userReportId}/${tabValue}`); - } - }; - // Format the report creation timestamp using the current country's locale const timestamp = formatReportTimestamp(userReport?.createdAt, countryId); - // Add modal state for rename - const [renameOpened, { open: openRename, close: closeRename }] = useDisclosure(false); - - // Add mutation hook for rename - const updateAssociation = useUpdateReportAssociation(); - - // Add rename handler - const handleRename = async (newLabel: string) => { - if (!userReportId) { - return; - } - - try { - await updateAssociation.mutateAsync({ - userReportId, - updates: { label: newLabel }, - }); - closeRename(); - } catch (error) { - console.error('[ReportOutputPage] Failed to rename report:', error); - } - }; - // Hook for saving shared reports with all ingredients const { saveSharedReport, saveResult, setSaveResult } = useSaveSharedReport(); @@ -234,6 +168,31 @@ export default function ReportOutputPage() { } }; + // Handle view button click - navigate to report builder in view mode + const handleView = () => { + if (userReportId) { + navigate(`/${countryId}/reports/create/${userReportId}`, { + state: { + from: 'report-output', + reportPath: `/${countryId}/report-output/${userReportId}`, + }, + }); + } + }; + + // Handle reproduce button click - navigate to reproduce in Python content + const handleReproduce = () => { + const id = isSharedView ? shareDataUserReportId : userReportId; + if (id) { + const basePath = `/${countryId}/report-output/${id}/reproduce`; + if (isSharedView) { + navigate(`${basePath}?${searchParams.toString()}`); + } else { + navigate(basePath); + } + } + }; + // Show loading state while fetching data if (import.meta.env.DEV && dataLoading) { (window as any).__journeyProfiler?.markEvent('report-output-data-loading', 'render'); @@ -261,20 +220,6 @@ export default function ReportOutputPage() { ); } - // Determine if sidebar should be shown - const showSidebar = activeTab === 'comparative-analysis'; - - // Handle sidebar navigation (absolute path, preserve search params for shared views) - const handleSidebarNavigate = (viewName: string) => { - if (isSharedView && shareDataUserReportId) { - navigate( - `/${countryId}/report-output/${shareDataUserReportId}/comparative-analysis/${viewName}?${searchParams.toString()}` - ); - } else { - navigate(`/${countryId}/report-output/${userReportId}/comparative-analysis/${viewName}`); - } - }; - // Determine the display label and ID for the report const displayLabel = userReport?.label; const displayReportId = isSharedView ? shareDataUserReportId : userReportId; @@ -312,7 +257,6 @@ export default function ReportOutputPage() { userPolicies={userPolicies} policies={policies} geographies={geographies} - userGeographies={userGeographies} /> ); } @@ -350,17 +294,11 @@ export default function ReportOutputPage() { reportLabel={displayLabel ?? undefined} reportYear={report?.year} timestamp={timestamp} - tabs={tabs} - activeTab={activeTab} - onTabChange={handleTabClick} - onEditName={openRename} - showSidebar={showSidebar} - outputType={outputType} - activeView={activeView} - onSidebarNavigate={handleSidebarNavigate} isSharedView={isSharedView} onShare={handleShare} onSave={handleSave} + onView={!isSharedView ? handleView : undefined} + onReproduce={handleReproduce} > ( @@ -370,60 +308,10 @@ export default function ReportOutputPage() { {renderContent()} - - ); } -/** - * Determine which tabs to display based on output type and content - */ -function getTabsForOutputType( - outputType: ReportOutputType, - countryId?: string, - geographies?: Geography[] -): Array<{ value: string; label: string }> { - if (outputType === 'societyWide') { - const tabs = [ - { value: 'overview', label: 'Overview' }, - { value: 'comparative-analysis', label: 'Comparative analysis' }, - { value: 'policy', label: 'Policy' }, - { value: 'population', label: 'Population' }, - { value: 'dynamics', label: 'Dynamics' }, - { value: 'reproduce', label: 'Reproduce in Python' }, - ]; - - const hasLocalLevelGeography = geographies?.some((g) => isUKLocalLevelGeography(g)); - if (countryId === 'uk' && !hasLocalLevelGeography) { - tabs.push({ value: 'constituency', label: 'Constituencies' }); - tabs.push({ value: 'local-authority', label: 'Local authorities' }); - } - - return tabs; - } - - if (outputType === 'household') { - return [ - { value: 'overview', label: 'Overview' }, - { value: 'comparative-analysis', label: 'Comparative analysis' }, - { value: 'policy', label: 'Policy' }, - { value: 'population', label: 'Population' }, - { value: 'dynamics', label: 'Dynamics' }, - { value: 'reproduce', label: 'Reproduce in Python' }, - ]; - } - - return [{ value: 'overview', label: 'Overview' }]; -} - /** * Type guard to check if society-wide output is US-specific */ diff --git a/app/src/pages/Reports.page.tsx b/app/src/pages/Reports.page.tsx index 3272b3628..f79eb5994 100644 --- a/app/src/pages/Reports.page.tsx +++ b/app/src/pages/Reports.page.tsx @@ -1,4 +1,6 @@ import { useEffect, useMemo, useState } from 'react'; +import { IconSettings } from '@tabler/icons-react'; +import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { BulletsValue, @@ -17,12 +19,15 @@ import { useCurrentCountry } from '@/hooks/useCurrentCountry'; import { useDisclosure } from '@/hooks/useDisclosure'; import { useUpdateReportAssociation } from '@/hooks/useUserReportAssociations'; import { useUserReports } from '@/hooks/useUserReports'; +import { RootState } from '@/store'; import { useCacheMonitor } from '@/utils/cacheMonitor'; import { formatDate } from '@/utils/dateUtils'; +import { CURRENT_LAW_LABEL } from './reportBuilder/currentLaw'; export default function ReportsPage() { const userId = MOCK_USER_ID.toString(); // TODO: Replace with actual user ID retrieval logic const { data, isLoading, isError, error } = useUserReports(userId); + const currentLawId = useSelector((state: RootState) => state.metadata.currentLawId); const cacheMonitor = useCacheMonitor(); const navigate = useNavigate(); const countryId = useCurrentCountry(); @@ -33,11 +38,10 @@ export default function ReportsPage() { }, [data]); const [searchValue, setSearchValue] = useState(''); - const [selectedIds, setSelectedIds] = useState([]); // Rename modal state const [renamingReportId, setRenamingReportId] = useState(null); - const [renameOpened, { open: openRename, close: closeRename }] = useDisclosure(false); + const [renameOpened, { close: closeRename }] = useDisclosure(false); // Rename mutation hook const updateAssociation = useUpdateReportAssociation(); @@ -47,19 +51,6 @@ export default function ReportsPage() { navigate(targetPath); }; - const handleSelectionChange = (recordId: string, selected: boolean) => { - setSelectedIds((prev) => - selected ? [...prev, recordId] : prev.filter((id) => id !== recordId) - ); - }; - - const isSelected = (recordId: string) => selectedIds.includes(recordId); - - const handleOpenRename = (userReportId: string) => { - setRenamingReportId(userReportId); - openRename(); - }; - const handleCloseRename = () => { closeRename(); setRenamingReportId(null); @@ -95,7 +86,7 @@ export default function ReportsPage() { }, { key: 'dateCreated', - header: 'Date Created', + header: 'Date created', type: 'text', }, { @@ -109,8 +100,8 @@ export default function ReportsPage() { type: 'text', }, { - key: 'simulations', - header: 'Simulations', + key: 'policies', + header: 'Policies', type: 'bullets', items: [ { @@ -120,18 +111,18 @@ export default function ReportsPage() { ], }, { - key: 'outputType', - header: 'Output Type', + key: 'population', + header: 'Population', type: 'text', }, { key: 'actions', header: '', - type: 'menu', - actions: [{ label: 'Rename', action: 'rename' }], + type: 'actions', + actions: [{ action: 'edit', tooltip: 'View/edit report', icon: }], onAction: (action: string, recordId: string) => { - if (action === 'rename') { - handleOpenRename(recordId); + if (action === 'edit') { + navigate(`/${countryId}/reports/create/${recordId}`); } }, }, @@ -145,6 +136,34 @@ export default function ReportsPage() { (item.simulations?.map((s) => s.id).filter(Boolean) as string[]) || []; const isHouseholdReport = item.simulations?.[0]?.populationType === 'household'; + // Build policy labels from simulations + const policyItems = item.simulations?.map((sim) => { + if (sim.policyId === currentLawId?.toString()) { + return { text: CURRENT_LAW_LABEL }; + } + const userPolicy = item.userPolicies?.find((up) => up.policyId === sim.policyId); + if (userPolicy?.label) { + return { text: userPolicy.label }; + } + const policy = item.policies?.find((p) => p.id === sim.policyId); + return { text: policy?.label || `Policy #${sim.policyId}` }; + }) || [{ text: 'No policies' }]; + + // Build population label (shared across simulations) + const firstSim = item.simulations?.[0]; + let populationLabel = ''; + if (firstSim?.populationType === 'household') { + const userHousehold = item.userHouseholds?.find( + (uh) => uh.householdId === firstSim.populationId + ); + populationLabel = userHousehold?.label || 'Household'; + } else if (firstSim?.populationId) { + const geo = item.geographies?.find( + (g) => g.id === firstSim.populationId || g.geographyId === firstSim.populationId + ); + populationLabel = geo?.name || firstSim.populationId; + } + return { id: item.userReport.id, report: { @@ -175,21 +194,15 @@ export default function ReportsPage() { ), }, - simulations: { - items: item.simulations?.map((sim, index) => ({ - text: item.userSimulations?.[index]?.label || `Simulation #${sim.id}`, - })) || [ - { - text: 'No simulations', - }, - ], + policies: { + items: policyItems, } as BulletsValue, - outputType: { - text: isHouseholdReport ? 'Household' : 'Society-wide', + population: { + text: populationLabel, } as TextValue, }; }) || [], - [data, countryId] + [data, countryId, currentLawId] ); return ( @@ -207,9 +220,6 @@ export default function ReportsPage() { columns={reportColumns} searchValue={searchValue} onSearchChange={setSearchValue} - enableSelection - isSelected={isSelected} - onSelectionChange={handleSelectionChange} /> diff --git a/app/src/pages/Simulations.page.tsx b/app/src/pages/Simulations.page.tsx index 1ff986850..311954deb 100644 --- a/app/src/pages/Simulations.page.tsx +++ b/app/src/pages/Simulations.page.tsx @@ -18,7 +18,6 @@ export default function SimulationsPage() { const countryId = useCurrentCountry(); const [searchValue, setSearchValue] = useState(''); - const [selectedIds, setSelectedIds] = useState([]); // Rename modal state const [renamingSimulationId, setRenamingSimulationId] = useState(null); @@ -31,14 +30,6 @@ export default function SimulationsPage() { navigate(`/${countryId}/simulations/create`); }; - const handleSelectionChange = (recordId: string, selected: boolean) => { - setSelectedIds((prev) => - selected ? [...prev, recordId] : prev.filter((id) => id !== recordId) - ); - }; - - const isSelected = (recordId: string) => selectedIds.includes(recordId); - const handleOpenRename = (userSimulationId: string) => { setRenamingSimulationId(userSimulationId); openRename(); @@ -149,9 +140,6 @@ export default function SimulationsPage() { columns={simulationColumns} searchValue={searchValue} onSearchChange={setSearchValue} - enableSelection - isSelected={isSelected} - onSelectionChange={handleSelectionChange} /> diff --git a/app/src/pages/report-output/ComparativeAnalysisPage.tsx b/app/src/pages/report-output/ComparativeAnalysisPage.tsx index 15c6bc629..e74ce5ac5 100644 --- a/app/src/pages/report-output/ComparativeAnalysisPage.tsx +++ b/app/src/pages/report-output/ComparativeAnalysisPage.tsx @@ -74,7 +74,7 @@ export function ComparativeAnalysisPage({ year, region, }: Props) { - // If no view specified, use default view + // If no view specified, use a fallback (sidebar auto-navigates to first leaf) const effectiveView = view || 'budgetary-impact-overall'; // Look up component in map diff --git a/app/src/pages/report-output/GeographySubPage.tsx b/app/src/pages/report-output/GeographySubPage.tsx index cfcaabeb6..5d04f27e0 100644 --- a/app/src/pages/report-output/GeographySubPage.tsx +++ b/app/src/pages/report-output/GeographySubPage.tsx @@ -9,14 +9,11 @@ import { } from '@/components/ui'; import { colors, spacing, typography } from '@/designTokens'; import { Geography } from '@/types/ingredients/Geography'; -import { UserGeographyPopulation } from '@/types/ingredients/UserPopulation'; import { capitalize } from '@/utils/stringUtils'; interface GeographySubPageProps { baselineGeography?: Geography; reformGeography?: Geography; - baselineUserGeography?: UserGeographyPopulation; - reformUserGeography?: UserGeographyPopulation; } /** @@ -28,8 +25,6 @@ interface GeographySubPageProps { export default function GeographySubPage({ baselineGeography, reformGeography, - baselineUserGeography, - reformUserGeography, }: GeographySubPageProps) { if (!baselineGeography && !reformGeography) { return
No geography data available
; @@ -38,9 +33,9 @@ export default function GeographySubPage({ // Check if geographies are the same const geographiesAreSame = baselineGeography?.id === reformGeography?.id; - // Get labels from UserGeographyPopulation, fallback to geography names, then to generic labels - const baselineLabel = baselineUserGeography?.label || baselineGeography?.name || 'Baseline'; - const reformLabel = reformUserGeography?.label || reformGeography?.name || 'Reform'; + // Get labels from geography metadata + const baselineLabel = baselineGeography?.name || 'Baseline'; + const reformLabel = reformGeography?.name || 'Reform'; // Define table rows const rows = [ diff --git a/app/src/pages/report-output/LoadingPage.tsx b/app/src/pages/report-output/LoadingPage.tsx index c1fb43d7b..10328562b 100644 --- a/app/src/pages/report-output/LoadingPage.tsx +++ b/app/src/pages/report-output/LoadingPage.tsx @@ -106,22 +106,6 @@ export default function LoadingPage({
- - {/* Info Message */} -
- - {queuePosition - ? `Your report is queued at position ${queuePosition}. The page will automatically update when ready.` - : 'Your report is being calculated. This may take a few moments for complex analyses. The page will automatically update when ready.'} - -
); } diff --git a/app/src/pages/report-output/MigrationSubPage.tsx b/app/src/pages/report-output/MigrationSubPage.tsx new file mode 100644 index 000000000..2591acd03 --- /dev/null +++ b/app/src/pages/report-output/MigrationSubPage.tsx @@ -0,0 +1,184 @@ +import { useState } from 'react'; +import { IconChevronDown, IconChevronRight } from '@tabler/icons-react'; +import type { SocietyWideReportOutput } from '@/api/societyWideCalculation'; +import { + Collapsible, + CollapsibleContent, + Group, + SegmentedControl, + Stack, + Text, +} from '@/components/ui'; +import { CongressionalDistrictDataProvider } from '@/contexts/CongressionalDistrictDataContext'; +import { colors, spacing, typography } from '@/designTokens'; +import { useCurrentCountry } from '@/hooks/useCurrentCountry'; +import type { Geography } from '@/types/ingredients/Geography'; +import type { Report } from '@/types/ingredients/Report'; +import type { Simulation } from '@/types/ingredients/Simulation'; +import { isUKLocalLevelGeography } from '@/utils/geographyUtils'; +import BudgetaryImpactByProgramSubPage from './budgetary-impact/BudgetaryImpactByProgramSubPage'; +import { ConstituencySubPage } from './ConstituencySubPage'; +import DistributionalImpactWealthAverageSubPage from './distributional-impact/DistributionalImpactWealthAverageSubPage'; +import DistributionalImpactWealthRelativeSubPage from './distributional-impact/DistributionalImpactWealthRelativeSubPage'; +import WinnersLosersWealthDecileSubPage from './distributional-impact/WinnersLosersWealthDecileSubPage'; +import { LocalAuthoritySubPage } from './LocalAuthoritySubPage'; +import SocietyWideOverview from './SocietyWideOverview'; + +interface MigrationSubPageProps { + output: SocietyWideReportOutput; + report?: Report; + simulations?: Simulation[]; + geographies?: Geography[]; +} + +function CollapsibleSection({ + label, + right, + defaultOpen = true, + children, +}: { + label: string; + right?: React.ReactNode; + defaultOpen?: boolean; + children: React.ReactNode; +}) { + const [opened, setOpened] = useState(defaultOpen); + const ChevronIcon = opened ? IconChevronDown : IconChevronRight; + + return ( + +
+ + + {opened && right} + +
+ + + {children} + + + + ); +} + +type DistributionalMode = 'absolute' | 'relative' | 'intra-decile'; + +const DISTRIBUTIONAL_MODE_OPTIONS = [ + { label: 'Absolute decile impacts', value: 'absolute' as DistributionalMode }, + { label: 'Relative decile impacts', value: 'relative' as DistributionalMode }, + { label: 'Intra-decile impacts', value: 'intra-decile' as DistributionalMode }, +]; + +export default function MigrationSubPage({ + output, + report, + simulations, + geographies, +}: MigrationSubPageProps) { + const countryId = useCurrentCountry(); + const [wealthMode, setWealthMode] = useState('absolute'); + + // UK constituency/local authority sections: only for national or country-level reports + const hasLocalLevelGeography = geographies?.some((g) => isUKLocalLevelGeography(g)); + const showUKGeographySections = countryId === 'uk' && !hasLocalLevelGeography; + + // Congressional district provider props + const reformPolicyId = simulations?.[1]?.policyId; + const baselinePolicyId = simulations?.[0]?.policyId; + const year = report?.year; + const region = simulations?.[0]?.populationId; + const canShowCongressional = + countryId === 'us' && !!reformPolicyId && !!baselinePolicyId && !!year; + + const stackChildren = ( + <> + + + {countryId === 'uk' && ( + + + + )} + + {countryId === 'uk' && ( + setWealthMode(value as DistributionalMode)} + size="xs" + options={DISTRIBUTIONAL_MODE_OPTIONS} + /> + } + > + {wealthMode === 'absolute' && ( + + )} + {wealthMode === 'relative' && ( + + )} + {wealthMode === 'intra-decile' && } + + )} + + {showUKGeographySections && ( + <> + + + + + + + + + )} + + ); + + return ( + + {canShowCongressional ? ( + + {stackChildren} + + ) : ( + stackChildren + )} + + ); +} diff --git a/app/src/pages/report-output/PopulationSubPage.tsx b/app/src/pages/report-output/PopulationSubPage.tsx index fecb672da..a03c3db09 100644 --- a/app/src/pages/report-output/PopulationSubPage.tsx +++ b/app/src/pages/report-output/PopulationSubPage.tsx @@ -1,10 +1,7 @@ import { Geography } from '@/types/ingredients/Geography'; import { Household } from '@/types/ingredients/Household'; import { Simulation } from '@/types/ingredients/Simulation'; -import { - UserGeographyPopulation, - UserHouseholdPopulation, -} from '@/types/ingredients/UserPopulation'; +import { UserHouseholdPopulation } from '@/types/ingredients/UserPopulation'; import GeographySubPage from './GeographySubPage'; import HouseholdSubPage from './HouseholdSubPage'; @@ -14,7 +11,6 @@ interface PopulationSubPageProps { households?: Household[]; geographies?: Geography[]; userHouseholds?: UserHouseholdPopulation[]; - userGeographies?: UserGeographyPopulation[]; } /** @@ -29,7 +25,6 @@ export default function PopulationSubPage({ households, geographies, userHouseholds, - userGeographies, }: PopulationSubPageProps) { // Determine population type from simulations const populationType = baselineSimulation?.populationType || reformSimulation?.populationType; @@ -67,19 +62,8 @@ export default function PopulationSubPage({ const baselineGeography = geographies?.find((g) => g.id === baselineGeographyId); const reformGeography = geographies?.find((g) => g.id === reformGeographyId); - // Find the user geography associations - const baselineUserGeography = userGeographies?.find( - (ug) => ug.geographyId === baselineGeographyId - ); - const reformUserGeography = userGeographies?.find((ug) => ug.geographyId === reformGeographyId); - return ( - + ); } diff --git a/app/src/pages/report-output/ReportOutputLayout.story.tsx b/app/src/pages/report-output/ReportOutputLayout.story.tsx index 442ae1810..6b8fc1ded 100644 --- a/app/src/pages/report-output/ReportOutputLayout.story.tsx +++ b/app/src/pages/report-output/ReportOutputLayout.story.tsx @@ -5,29 +5,14 @@ const meta: Meta = { title: 'Report output/ReportOutputLayout', component: ReportOutputLayout, args: { - onTabChange: () => {}, - onEditName: () => {}, onShare: () => {}, onSave: () => {}, - onSidebarNavigate: () => {}, }, }; export default meta; type Story = StoryObj; -const societyWideTabs = [ - { value: 'overview', label: 'Overview' }, - { value: 'comparative', label: 'Comparative analysis' }, - { value: 'parameters', label: 'Policy parameters' }, -]; - -const householdTabs = [ - { value: 'overview', label: 'Overview' }, - { value: 'household', label: 'Household details' }, - { value: 'parameters', label: 'Policy parameters' }, -]; - const PlaceholderContent = ({ text }: { text: string }) => (
, }, @@ -64,10 +45,6 @@ export const Household: Story = { reportLabel: 'Household impact analysis', reportYear: '2026', timestamp: 'Ran yesterday at 09:15:22', - tabs: householdTabs, - activeTab: 'overview', - outputType: 'household', - showSidebar: false, isSharedView: false, children: , }, @@ -79,10 +56,6 @@ export const SharedView: Story = { reportLabel: 'UBI $500/month analysis', reportYear: '2026', timestamp: 'Shared 2 hours ago', - tabs: societyWideTabs, - activeTab: 'overview', - outputType: 'societyWide', - showSidebar: false, isSharedView: true, children: , }, diff --git a/app/src/pages/report-output/ReportOutputLayout.tsx b/app/src/pages/report-output/ReportOutputLayout.tsx index 256ed9834..47c792a7c 100644 --- a/app/src/pages/report-output/ReportOutputLayout.tsx +++ b/app/src/pages/report-output/ReportOutputLayout.tsx @@ -1,77 +1,30 @@ -import { useState, type ReactElement } from 'react'; -import { - IconCalendar, - IconChevronDown, - IconChevronRight, - IconChevronUp, - IconClock, -} from '@tabler/icons-react'; +import { IconCalendar, IconChevronLeft, IconClock } from '@tabler/icons-react'; +import { useNavigate } from 'react-router-dom'; import { ReportActionButtons } from '@/components/report/ReportActionButtons'; import { SharedReportTag } from '@/components/report/SharedReportTag'; -import { - Button, - Container, - Group, - ScrollArea, - Sheet, - SheetContent, - SheetHeader, - SheetTitle, - Stack, - Text, - Title, -} from '@/components/ui'; +import { Container, Group, Stack, Text, Title } from '@/components/ui'; import { colors, spacing, typography } from '@/designTokens'; -import { useIsMobile } from '@/hooks/useChartDimensions'; import { useCurrentCountry } from '@/hooks/useCurrentCountry'; -import { getComparativeAnalysisTree, type TreeNode } from './comparativeAnalysisTree'; -import { getHouseholdOutputTree } from './householdOutputTree'; -import { ReportSidebar } from './ReportSidebar'; interface ReportOutputLayoutProps { reportId: string; reportLabel?: string; reportYear?: string; timestamp?: string; - tabs: Array<{ value: string; label: string }>; - activeTab: string; - onTabChange: (tabValue: string) => void; - onEditName?: () => void; - showSidebar?: boolean; - outputType?: 'household' | 'societyWide'; - activeView?: string; - onSidebarNavigate?: (view: string) => void; isSharedView?: boolean; onShare?: () => void; onSave?: () => void; + onView?: () => void; + onReproduce?: () => void; children: React.ReactNode; } -/** - * Find the label for a view name by walking the tree. - * Returns "parent > child" for nested views. - */ -function findViewLabel(tree: TreeNode[], viewName: string, parentLabel?: string): string | null { - for (const node of tree) { - if (node.name === viewName) { - return parentLabel ? `${parentLabel} — ${node.label}` : node.label; - } - if (node.children) { - const found = findViewLabel(node.children, viewName, node.label); - if (found) { - return found; - } - } - } - return null; -} - /** * ReportOutputLayout - Structural chrome for report output pages * * Provides consistent layout with: + * - Breadcrumb navigation * - Header with title and actions - * - Tab navigation bar * - Content area (children) * * This is a pure presentational component with no data fetching or business logic. @@ -81,69 +34,61 @@ export default function ReportOutputLayout({ reportLabel, reportYear, timestamp = 'Ran today at 05:23:41', - tabs, - activeTab, - onTabChange, - onEditName, - showSidebar = false, - outputType = 'societyWide', - activeView = '', - onSidebarNavigate, isSharedView = false, onShare, onSave, + onView, + onReproduce, children, }: ReportOutputLayoutProps) { const countryId = useCurrentCountry(); - const isMobile = useIsMobile(); - const [drawerOpened, setDrawerOpened] = useState(false); - - // Get the appropriate tree based on output type - const sidebarTree = - outputType === 'household' ? getHouseholdOutputTree() : getComparativeAnalysisTree(countryId); - - const showMobileDrawer = showSidebar && onSidebarNavigate && isMobile; - const showDesktopSidebar = showSidebar && onSidebarNavigate && !isMobile; - - const activeViewLabel = activeView ? findViewLabel(sidebarTree, activeView) : null; - - function handleMobileNavigate(view: string) { - if (onSidebarNavigate) { - onSidebarNavigate(view); - setDrawerOpened(false); - } - } + const navigate = useNavigate(); return ( - + + {/* Back breadcrumb */} + navigate(`/${countryId}/reports`)} + > + + + Back to reports + + + {/* Header Section */}
{/* Title row with actions */} - - - {reportLabel || reportId} - - {isSharedView && } + + + + {reportLabel || reportId} + + {isSharedView && } + - {/* Timestamp and View All */} + {/* Timestamp and year */} {reportYear && ( <> @@ -163,237 +108,9 @@ export default function ReportOutputLayout({
- {/* Navigation Tabs */} -
-
- {tabs.map((tab, index) => ( - - ))} -
-
- - {/* Content Area with optional sidebar */} - {showDesktopSidebar ? ( - - -
{children}
- - ) : ( - children - )} + {/* Content */} + {children} - - {/* Mobile bottom bar for comparative analysis navigation */} - {showMobileDrawer && ( -
- - - -
- )} - - {/* Mobile bottom drawer for sidebar navigation */} - {showMobileDrawer && ( - - - - Comparative analysis - - - - - - - )} ); } - -/** - * Full-width tree navigation for the mobile bottom drawer. - * Renders the same tree as ReportSidebar but without - * desktop-specific styles (fixed width, border, sticky positioning). - */ -function MobileTreeNav({ - tree, - activeView, - onNavigate, -}: { - tree: TreeNode[]; - activeView: string; - onNavigate: (view: string) => void; -}) { - const [active, setActive] = useState(activeView); - const [expandedSet, setExpandedSet] = useState>(() => { - const initial = new Set(); - tree.forEach((node) => { - if (hasActiveDescendant(node, activeView)) { - initial.add(node.name); - node.children?.forEach((child) => { - if (hasActiveDescendant(child, activeView)) { - initial.add(child.name); - } - }); - } - }); - return initial; - }); - - function handleClick(name: string, hasChildren: boolean) { - if (!hasChildren) { - onNavigate(name); - } - setActive(name); - if (hasChildren) { - setExpandedSet((prev) => { - const next = new Set(prev); - if (next.has(name)) { - next.delete(name); - } else { - next.add(name); - } - return next; - }); - } - } - - function renderNode(node: TreeNode, depth: number = 0): ReactElement { - const hasChildren = Boolean(node.children?.length); - const isExpanded = expandedSet.has(node.name); - const isActive = active === node.name; - - return ( -
- - {hasChildren && isExpanded && node.children?.map((child) => renderNode(child, depth + 1))} -
- ); - } - - return <>{tree.map((node) => renderNode(node))}; -} - -function hasActiveDescendant(node: TreeNode, activeView: string): boolean { - if (node.name === activeView) { - return true; - } - return node.children?.some((child) => hasActiveDescendant(child, activeView)) ?? false; -} diff --git a/app/src/pages/report-output/SocietyWideOverview.tsx b/app/src/pages/report-output/SocietyWideOverview.tsx index 4cb1e0592..d250ec641 100644 --- a/app/src/pages/report-output/SocietyWideOverview.tsx +++ b/app/src/pages/report-output/SocietyWideOverview.tsx @@ -1,41 +1,634 @@ -import { IconCoin, IconHome, IconUsers } from '@tabler/icons-react'; +import { useEffect, useMemo, useState } from 'react'; +import { + IconChartBar, + IconCoin, + IconHome, + IconMap, + IconScale, + IconUsers, +} from '@tabler/icons-react'; +import Plot from 'react-plotly.js'; import { SocietyWideReportOutput } from '@/api/societyWideCalculation'; +import DashboardCard from '@/components/report/DashboardCard'; import MetricCard from '@/components/report/MetricCard'; -import { Group, Stack, Text } from '@/components/ui'; +import { Group, Progress, SegmentedControl, Stack, Text } from '@/components/ui'; +import { MapTypeToggle } from '@/components/visualization/choropleth/MapTypeToggle'; +import type { MapVisualizationType } from '@/components/visualization/choropleth/types'; +import { USDistrictChoroplethMap } from '@/components/visualization/USDistrictChoroplethMap'; +import { useCongressionalDistrictData } from '@/contexts/CongressionalDistrictDataContext'; import { colors, spacing, typography } from '@/designTokens'; import { useCurrentCountry } from '@/hooks/useCurrentCountry'; +import type { ReportOutputSocietyWideUS } from '@/types/metadata/ReportOutputSocietyWideUS'; +import { formatParameterValue } from '@/utils/chartValueUtils'; import { formatBudgetaryImpact } from '@/utils/formatPowers'; -import { currencySymbol } from '@/utils/formatters'; +import { currencySymbol, formatCurrencyAbbr } from '@/utils/formatters'; +import { DIVERGING_GRAY_TEAL } from '@/utils/visualization/colorScales'; +import BudgetaryImpactSubPage from './budgetary-impact/BudgetaryImpactSubPage'; +import DistributionalImpactIncomeAverageSubPage from './distributional-impact/DistributionalImpactIncomeAverageSubPage'; +import DistributionalImpactIncomeRelativeSubPage from './distributional-impact/DistributionalImpactIncomeRelativeSubPage'; +import WinnersLosersIncomeDecileSubPage from './distributional-impact/WinnersLosersIncomeDecileSubPage'; +import InequalityImpactSubPage from './inequality-impact/InequalityImpactSubPage'; +import DeepPovertyImpactByAgeSubPage from './poverty-impact/DeepPovertyImpactByAgeSubPage'; +import DeepPovertyImpactByGenderSubPage from './poverty-impact/DeepPovertyImpactByGenderSubPage'; +import PovertyImpactByAgeSubPage from './poverty-impact/PovertyImpactByAgeSubPage'; +import PovertyImpactByGenderSubPage from './poverty-impact/PovertyImpactByGenderSubPage'; +import PovertyImpactByRaceSubPage from './poverty-impact/PovertyImpactByRaceSubPage'; interface SocietyWideOverviewProps { output: SocietyWideReportOutput; + showCongressionalCard?: boolean; } // Fixed size for icon containers to ensure square aspect ratio const HERO_ICON_SIZE = 48; const SECONDARY_ICON_SIZE = 36; +const GRID_GAP = 16; + +// Expanded card chart heights — derived from the layout: +// +// Expanded card outer: SHRUNKEN_CARD_HEIGHT × 2 + GRID_GAP = 416px +// Card border: 2px (1px each side) +// Card padding (spacing.lg = 16px): 32px → content area = 382px +// +// Controls row (height: 31px, matching SegmentedControl xs rendered height +// of ~30.6px — see SegmentedControl.css: root padding 4px + label padding +// 2px + font 12px × 1.55 line-height + label padding 2px + root padding 4px) +// + marginBottom 8px = 39px total +// +// → expandedContent area = 382 − 39 = 343px (secondary cards) +// → expandedContent area = 374 − 39 = 335px (budget card, spacing.xl = 20px) +// +// ChartContainer chrome: title row (~28px) + gap (8px) + Box padding (24px) +// + Box border (2px) = 62px. Secondary charts also have a description line +// (~19px) and an inner gap (8px) = 27px extra inside the Box. +// +// Target Box content height ≈ 279 for all chart cards: +// Budget (no description): chartHeight = 279 +// Secondary (with desc+gap): chartHeight = 279 − 27 = 252 +// +// CONTROLS_ROW_H = 39: 31 (SC xs height) + 8 (marginBottom) — referenced in derivation above +const BUDGET_CHART_H = 279; +const SECONDARY_CHART_H = 252; + +// Congressional map height (3 rows): +// outer: 200×3 + 16×2 = 632, minus border(2) + padding(32) + controls(39) = 559 +// minus map Box border (2px) = 557 +const CONGRESSIONAL_MAP_H = 557; + +// Poverty segmented control types and options +type PovertyDepth = 'regular' | 'deep'; +type PovertyBreakdown = 'by-age' | 'by-gender' | 'by-race'; + +const POVERTY_DEPTH_OPTIONS = [ + { label: 'Regular poverty', value: 'regular' as PovertyDepth }, + { label: 'Deep poverty', value: 'deep' as PovertyDepth }, +]; + +function getBreakdownOptions( + depth: PovertyDepth, + countryId: string +): Array<{ label: string; value: PovertyBreakdown; disabled?: boolean }> { + const options: Array<{ label: string; value: PovertyBreakdown; disabled?: boolean }> = [ + { label: 'By age', value: 'by-age' }, + { label: 'By gender', value: 'by-gender' }, + ]; + if (countryId === 'us') { + options.push({ + label: 'By race', + value: 'by-race', + disabled: depth === 'deep', + }); + } + return options; +} + +type DecileMode = 'absolute' | 'relative'; +const DECILE_MODE_OPTIONS = [ + { label: 'Absolute', value: 'absolute' as DecileMode }, + { label: 'Relative', value: 'relative' as DecileMode }, +]; + +// Mini chart config for shrunken decile card +const MINI_CHART_HEIGHT = 90; +const MINI_CHART_CONFIG = { displayModeBar: false, responsive: true, staticPlot: true }; + /** - * Overview page for society-wide reports - * - * Features: - * - Hero metric for budgetary impact (most important number) - * - Secondary metrics for poverty and income distribution - * - Clean visual hierarchy with trend indicators - * - Progressive disclosure for details + * Build tickvals/ticktext arrays for a currency y-axis where negative signs + * appear to the left of the currency symbol: -$500 not $-500. + * Generates ~4–5 nice ticks spanning the data range. */ -export default function SocietyWideOverview({ output }: SocietyWideOverviewProps) { +function currencyTicks( + values: number[], + currSymbol: string, + decimalPlaces = 0 +): { tickvals: number[]; ticktext: string[] } { + const min = Math.min(...values); + const max = Math.max(...values); + const range = max - min || Math.abs(max) || 1; + // Pick a nice step: 1, 2, 5, 10, 20, 50, … + const rawStep = range / 4; + const mag = 10 ** Math.floor(Math.log10(rawStep)); + const candidates = [1, 2, 5, 10]; + const step = candidates.reduce((best, c) => { + const s = c * mag; + return Math.abs(s - rawStep) < Math.abs(best - rawStep) ? s : best; + }); + const lo = Math.floor(min / step) * step; + const hi = Math.ceil(max / step) * step; + const ticks: number[] = []; + for (let v = lo; v <= hi + step * 0.01; v += step) { + ticks.push(Math.round(v * 1e10) / 1e10); // avoid FP noise + } + const fmt = (v: number) => { + const abs = Math.abs(v).toLocaleString('en-US', { + minimumFractionDigits: decimalPlaces, + maximumFractionDigits: decimalPlaces, + }); + if (v < 0) { + return `-${currSymbol}${abs}`; + } + if (v > 0) { + return `${currSymbol}${abs}`; + } + return `${currSymbol}0`; + }; + return { tickvals: ticks, ticktext: ticks.map(fmt) }; +} + +type CongressionalMode = 'absolute' | 'relative'; +const CONGRESSIONAL_MODE_OPTIONS = [ + { label: 'Absolute', value: 'absolute' as CongressionalMode }, + { label: 'Relative', value: 'relative' as CongressionalMode }, +]; + +type CardKey = 'budget' | 'decile' | 'poverty' | 'winners' | 'inequality' | 'congressional'; + +type RankedDistrict = { id: string; label: string; value: number }; + +/** + * Renders a column of 5 ranked districts with conditional section headers. + * For the "top" column (descending order): gains header is "Biggest gains", + * losses header is "Smallest losses". + * For the "bottom" column (ascending order): losses header is "Biggest losses", + * gains header is "Smallest gains". + */ +function DistrictRankColumn({ + items, + side, + formatValue, +}: { + items: RankedDistrict[]; + side: 'top' | 'bottom'; + formatValue: (v: number) => string; +}) { + const gainHeader = side === 'top' ? 'Biggest gains (absolute)' : 'Smallest gains (absolute)'; + const lossHeader = side === 'top' ? 'Smallest losses (absolute)' : 'Biggest losses (absolute)'; + + // Build sections: group consecutive items by sign, assigning headers + const rows: Array< + { type: 'header'; text: string } | { type: 'item'; district: RankedDistrict; rank: number } + > = []; + let lastSign: 'gain' | 'loss' | null = null; + let rank = 1; + for (const d of items) { + const sign = d.value >= 0 ? 'gain' : 'loss'; + if (sign !== lastSign) { + rows.push({ type: 'header', text: sign === 'gain' ? gainHeader : lossHeader }); + lastSign = sign; + } + rows.push({ type: 'item', district: d, rank }); + rank++; + } + + return ( +
+ {rows.map((row, i) => + row.type === 'header' ? ( + 0 ? 6 : 0 }} + > + {row.text} + + ) : ( +
+ + {row.rank}. + + + {row.district.label} + + = 0 ? colors.primary[600] : colors.gray[600]} + style={{ flexShrink: 0 }} + > + {formatValue(row.district.value)} + +
+ ) + )} +
+ ); +} + +/** + * Congressional district card content — must be rendered inside a + * CongressionalDistrictDataProvider. Starts fetching once the report + * output is available and no pre-computed district data exists. + */ +function CongressionalDistrictCard({ + output, + mode, + zIndex, + gridGap, + header, + onToggleMode, +}: { + output: SocietyWideReportOutput; + mode: 'expanded' | 'shrunken'; + zIndex: number; + gridGap: number; + header: React.ReactNode; + onToggleMode: () => void; +}) { + const { + stateResponses, + completedCount, + totalStates, + hasStarted, + isLoading, + labelLookup, + stateCode, + startFetch, + erroredStates, + } = useCongressionalDistrictData(); + const [congressionalMode, setCongressionalMode] = useState('absolute'); + const [mapVisualizationType, setMapVisualizationType] = + useState('geographic'); + + // Check if output already has district data (from nationwide calculation) + const existingDistricts = useMemo(() => { + if (!('congressional_district_impact' in output)) { + return null; + } + const districtData = (output as ReportOutputSocietyWideUS).congressional_district_impact; + if (!districtData?.districts) { + return null; + } + return districtData.districts; + }, [output]); + + // Auto-start fetch only when the report output is ready and no + // pre-computed district data exists (avoids 51 redundant requests) + useEffect(() => { + if (!existingDistricts && !hasStarted) { + startFetch(); + } + }, [existingDistricts, hasStarted, startFetch]); + + // Build map data from context (progressive fill as states complete) + const contextMapData = useMemo(() => { + if (stateResponses.size === 0) { + return []; + } + const points: Array<{ geoId: string; label: string; value: number }> = []; + stateResponses.forEach((stateData) => { + stateData.districts.forEach((district) => { + points.push({ + geoId: district.district, + label: labelLookup.get(district.district) ?? `District ${district.district}`, + value: + congressionalMode === 'absolute' + ? district.average_household_income_change + : district.relative_household_income_change, + }); + }); + }); + return points; + }, [stateResponses, labelLookup, congressionalMode]); + + // Use pre-computed data if available, otherwise progressive context data + const mapData = useMemo(() => { + if (existingDistricts) { + return existingDistricts.map((item) => ({ + geoId: item.district, + label: labelLookup.get(item.district) ?? `District ${item.district}`, + value: + congressionalMode === 'absolute' + ? item.average_household_income_change + : item.relative_household_income_change, + })); + } + return contextMapData; + }, [existingDistricts, contextMapData, labelLookup, congressionalMode]); + + // Map config based on absolute vs relative mode + const mapConfig = useMemo( + () => ({ + colorScale: { + colors: DIVERGING_GRAY_TEAL.colors, + tickFormat: congressionalMode === 'absolute' ? '$,.0f' : '.1%', + symmetric: true, + }, + formatValue: (value: number) => + congressionalMode === 'absolute' + ? formatParameterValue(value, 'currency-USD', { + decimalPlaces: 0, + includeSymbol: true, + }) + : formatParameterValue(value, '/1', { decimalPlaces: 1 }), + }), + [congressionalMode] + ); + + // Build sorted district list for top 5 / bottom 5 display. + // Labels update automatically when labelLookup populates from metadata. + const sortedDistricts = useMemo(() => { + const all: Array<{ id: string; label: string; value: number }> = []; + const toShortLabel = (districtId: string) => { + const fullLabel = labelLookup.get(districtId) ?? districtId; + return fullLabel.replace(/\s+congressional\s+district$/i, ''); + }; + if (existingDistricts) { + for (const d of existingDistricts) { + all.push({ + id: d.district, + label: toShortLabel(d.district), + value: d.average_household_income_change, + }); + } + } else { + stateResponses.forEach((stateData) => { + for (const d of stateData.districts) { + all.push({ + id: d.district, + label: toShortLabel(d.district), + value: d.average_household_income_change, + }); + } + }); + } + all.sort((a, b) => b.value - a.value); + return all; + }, [existingDistricts, stateResponses, labelLookup]); + + const top5 = sortedDistricts.slice(0, 5); + const bottom5 = sortedDistricts.slice(-5).reverse(); + + // Detect errored districts from EITHER source: + // 1. Pre-computed data: districts in labelLookup but missing from existingDistricts + // 2. Progressive fetching: districts belonging to states in erroredStates + const { errorDistrictCount, errorStateAbbrs } = useMemo(() => { + if (existingDistricts) { + const existingSet = new Set(existingDistricts.map((d) => d.district)); + const missingStates = new Set(); + let count = 0; + labelLookup.forEach((_label, districtId) => { + if (!existingSet.has(districtId)) { + count++; + missingStates.add(districtId.split('-')[0]); + } + }); + return { errorDistrictCount: count, errorStateAbbrs: Array.from(missingStates) }; + } + + const abbrs = Array.from(erroredStates).map((code) => + code.replace(/^state\//, '').toUpperCase() + ); + if (abbrs.length === 0) { + return { errorDistrictCount: 0, errorStateAbbrs: abbrs }; + } + const errorSet = new Set(abbrs); + let count = 0; + labelLookup.forEach((_label, districtId) => { + if (errorSet.has(districtId.split('-')[0])) { + count++; + } + }); + return { errorDistrictCount: count, errorStateAbbrs: abbrs }; + }, [existingDistricts, erroredStates, labelLookup]); + + const dataReady = existingDistricts || (!isLoading && hasStarted); + const progressPercent = totalStates > 0 ? Math.round((completedCount / totalStates) * 100) : 0; + + return ( + + + Loading ({completedCount} of {totalStates} states)... + + + {errorDistrictCount > 0 && ( + + )} + + ) : ( +
+ {/* Left half: small hex choropleth map, zoomed in */} +
+
+ +
+
+ {/* Right third: rankings stacked — winners on top */} +
+ + formatParameterValue(v, 'currency-USD', { + decimalPlaces: 0, + includeSymbol: true, + }) + } + /> + + formatParameterValue(v, 'currency-USD', { + decimalPlaces: 0, + includeSymbol: true, + }) + } + /> +
+
+ ) + } + expandedControls={ + <> + + setCongressionalMode(value as CongressionalMode)} + size="xs" + options={CONGRESSIONAL_MODE_OPTIONS} + /> + + } + expandedContent={ + + } + onToggleMode={onToggleMode} + /> + ); +} + +export default function SocietyWideOverview({ + output, + showCongressionalCard, +}: SocietyWideOverviewProps) { const countryId = useCurrentCountry(); const symbol = currencySymbol(countryId); + const [expandedCard, setExpandedCard] = useState(null); + const [decileMode, setDecileMode] = useState('absolute'); + const [povertyDepth, setPovertyDepth] = useState('regular'); + const [povertyBreakdown, setPovertyBreakdown] = useState('by-age'); + const breakdownOptions = getBreakdownOptions(povertyDepth, countryId); + + const handleDepthChange = (value: string) => { + const newDepth = value as PovertyDepth; + setPovertyDepth(newDepth); + const options = getBreakdownOptions(newDepth, countryId); + const currentOption = options.find((o) => o.value === povertyBreakdown); + if (!currentOption || currentOption.disabled) { + setPovertyBreakdown(options[0].value); + } + }; + + const toggle = (key: CardKey) => { + setExpandedCard((prev) => (prev === key ? null : key)); + }; + + const modeOf = (key: CardKey) => (expandedCard === key ? 'expanded' : 'shrunken'); + const zOf = (key: CardKey) => (expandedCard === key ? 10 : 1); // Calculate budgetary impact const budgetaryImpact = output.budget.budgetary_impact; - const budgetFormatted = formatBudgetaryImpact(Math.abs(budgetaryImpact)); + + // Federal and state breakdowns (US only) + const stateTaxImpact = output.budget.state_tax_revenue_impact; + const federalTaxImpact = output.budget.tax_revenue_impact - stateTaxImpact; + const spendingImpact = output.budget.benefit_spending_impact; + + const formatImpact = (value: number) => { + if (value === 0) { + return 'No change'; + } + const abs = Math.abs(value); + if (abs < 1e6) { + return `<${symbol}1 million`; + } + const formatted = formatBudgetaryImpact(abs); + return `${symbol}${formatted.display}${formatted.label ? ` ${formatted.label}` : ''}`; + }; + + // Mini waterfall chart data for the shrunken budgetary card + const budgetMiniLabelsAll = + countryId === 'us' + ? ['Federal taxes', 'State taxes', 'Benefits', 'Net'] + : ['Tax revenues', 'Benefits', 'Net']; + const budgetMiniRawAll = + countryId === 'us' + ? [federalTaxImpact, stateTaxImpact, -spendingImpact, budgetaryImpact] + : [output.budget.tax_revenue_impact, -spendingImpact, budgetaryImpact]; + // Choose magnitude based on the max absolute value + const budgetMaxAbs = Math.max(...budgetMiniRawAll.map(Math.abs)); + const budgetMagnitude = + budgetMaxAbs >= 1e9 + ? { divisor: 1e9, label: `${symbol}bn` } + : budgetMaxAbs >= 1e6 + ? { divisor: 1e6, label: `${symbol}m` } + : { divisor: 1e3, label: `${symbol}k` }; + const budgetMiniValuesAll = budgetMiniRawAll.map((v) => v / budgetMagnitude.divisor); + const budgetMiniValues = budgetMiniValuesAll.filter((v) => v !== 0); + const budgetMiniLabels = budgetMiniLabelsAll.filter((_, i) => budgetMiniValuesAll[i] !== 0); + const budgetIsPositive = budgetaryImpact > 0; - const budgetValue = - budgetaryImpact === 0 - ? 'No change' - : `${symbol}${budgetFormatted.display}${budgetFormatted.label ? ` ${budgetFormatted.label}` : ''}`; + const budgetValue = formatImpact(budgetaryImpact); const budgetSubtext = budgetaryImpact === 0 ? 'This policy has no impact on the budget' @@ -51,8 +644,6 @@ export default function SocietyWideOverview({ output }: SocietyWideOverviewProps : (povertyOverview.reform - povertyOverview.baseline) / povertyOverview.baseline; const povertyAbsChange = Math.abs(povertyRateChange) * 100; const povertyValue = povertyRateChange === 0 ? 'No change' : `${povertyAbsChange.toFixed(1)}%`; - // For poverty: decrease is good (positive), increase is bad (negative) - // Arrow direction should match the actual change direction for clarity const povertyTrend = povertyRateChange === 0 ? 'neutral' : povertyRateChange < 0 ? 'positive' : 'negative'; const povertySubtext = @@ -62,199 +653,488 @@ export default function SocietyWideOverview({ output }: SocietyWideOverviewProps ? 'decrease in poverty rate' : 'increase in poverty rate'; + // Calculate child poverty rate change + const childPovertyOverview = output.poverty.poverty.child; + const childPovertyRateChange = + childPovertyOverview.baseline === 0 + ? 0 + : (childPovertyOverview.reform - childPovertyOverview.baseline) / + childPovertyOverview.baseline; + const childPovertyAbsChange = Math.abs(childPovertyRateChange) * 100; + const childPovertyValue = + childPovertyRateChange === 0 ? 'No change' : `${childPovertyAbsChange.toFixed(1)}%`; + const childPovertyTrend: 'positive' | 'negative' | 'neutral' = + childPovertyRateChange === 0 ? 'neutral' : childPovertyRateChange < 0 ? 'positive' : 'negative'; + const childPovertySubtext = + childPovertyRateChange === 0 + ? 'Child poverty rate unchanged' + : childPovertyRateChange < 0 + ? 'decrease in child poverty rate' + : 'increase in child poverty rate'; + + // Calculate Gini index change + const giniOverview = output.inequality.gini; + const giniRateChange = + giniOverview.baseline === 0 + ? 0 + : (giniOverview.reform - giniOverview.baseline) / giniOverview.baseline; + const giniAbsChange = Math.abs(giniRateChange) * 100; + const giniValue = giniRateChange === 0 ? 'No change' : `${giniAbsChange.toFixed(1)}%`; + const giniTrend: 'positive' | 'negative' | 'neutral' = + giniRateChange === 0 ? 'neutral' : giniRateChange < 0 ? 'positive' : 'negative'; + const giniSubtext = + giniRateChange === 0 + ? 'Gini index unchanged' + : giniRateChange < 0 + ? 'decrease in Gini index' + : 'increase in Gini index'; + + // Calculate Top 1% share change + const top1Overview = output.inequality.top_1_pct_share; + const top1RateChange = + top1Overview.baseline === 0 + ? 0 + : (top1Overview.reform - top1Overview.baseline) / top1Overview.baseline; + const top1AbsChange = Math.abs(top1RateChange) * 100; + const top1Value = top1RateChange === 0 ? 'No change' : `${top1AbsChange.toFixed(1)}%`; + const top1Trend: 'positive' | 'negative' | 'neutral' = + top1RateChange === 0 ? 'neutral' : top1RateChange < 0 ? 'positive' : 'negative'; + const top1Subtext = + top1RateChange === 0 + ? 'Top 1% share unchanged' + : top1RateChange < 0 + ? 'decrease in top 1% share' + : 'increase in top 1% share'; + + // Poverty chart switcher for expanded mode + const povertyChart = (() => { + if (povertyDepth === 'regular') { + if (povertyBreakdown === 'by-age') { + return ; + } + if (povertyBreakdown === 'by-gender') { + return ; + } + if (povertyBreakdown === 'by-race') { + return ; + } + } + if (povertyBreakdown === 'by-age') { + return ; + } + if (povertyBreakdown === 'by-gender') { + return ; + } + return null; + })(); + + // Decile impact mini chart data (absolute) + const decileKeys = Object.keys(output.decile.average).sort((a, b) => Number(a) - Number(b)); + const decileAbsValues = decileKeys.map((d) => output.decile.average[d]); + // Calculate winners and losers const decileOverview = output.intra_decile.all; const winnersPercent = decileOverview['Gain more than 5%'] + decileOverview['Gain less than 5%']; const losersPercent = decileOverview['Lose more than 5%'] + decileOverview['Lose less than 5%']; const unchangedPercent = decileOverview['No change']; - return ( - - {/* Hero Section - Budgetary Impact */} + // Reusable card header: icon + uppercase label + const cardHeader = ( + IconComponent: React.ComponentType<{ size: number; color: string; stroke: number }>, + labelText: string, + hero = false + ) => ( +
- + +
+ + {labelText} + + + ); + + return ( +
+ {/* Budgetary Impact — full width hero */} + - +
+ +
+ {/* Spacer pushes chart toward right half */} +
+
+ 1 + ? Array(budgetMiniValues.length - 1) + .fill('relative') + .concat(['total']) + : undefined, + text: budgetMiniValues.map((v) => + formatCurrencyAbbr(v * budgetMagnitude.divisor, countryId, { + maximumFractionDigits: 1, + }) + ), + textposition: 'inside', + increasing: { marker: { color: colors.primary[500] } }, + decreasing: { marker: { color: colors.gray[600] } }, + totals: { + marker: { + color: budgetaryImpact < 0 ? colors.gray[600] : colors.primary[500], + }, + }, + connector: { + line: { color: colors.gray[400], width: 1, dash: 'dot' }, + }, + }, + ] as any + } + layout={ + { + margin: { t: 5, b: 50, l: 55, r: 15 }, + showlegend: false, + paper_bgcolor: 'transparent', + plot_bgcolor: 'transparent', + xaxis: { + fixedrange: true, + tickfont: { size: 9, color: colors.text.secondary }, + }, + yaxis: { + fixedrange: true, + title: { + text: budgetMagnitude.label, + font: { size: 10, color: colors.text.secondary }, + standoff: 5, + }, + ...currencyTicks(budgetMiniValues, symbol, 1), + tickfont: { color: colors.text.secondary }, + }, + uniformtext: { mode: 'hide', minsize: 8 }, + } as any + } + config={MINI_CHART_CONFIG} + style={{ width: '100%', height: 120 }} + /> +
-
- } + onToggleMode={() => toggle('budget')} + /> + + {/* Decile Impacts */} + + + v >= 0 ? colors.primary[500] : colors.gray[600] + ), + }, + }, + ]} + layout={{ + margin: { t: 5, b: 20, l: 50, r: 5 }, + showlegend: false, + paper_bgcolor: 'transparent', + plot_bgcolor: 'transparent', + xaxis: { + fixedrange: true, + tickvals: decileKeys, + ticktext: decileKeys, + dtick: 1, + tickfont: { color: colors.text.secondary }, + }, + yaxis: { + fixedrange: true, + ...currencyTicks(decileAbsValues, symbol), + tickfont: { color: colors.text.secondary }, + }, + }} + config={MINI_CHART_CONFIG} + style={{ width: '100%', height: MINI_CHART_HEIGHT }} />
- -
+ } + expandedControls={ + setDecileMode(value as DecileMode)} + size="xs" + options={DECILE_MODE_OPTIONS} + /> + } + expandedContent={ + decileMode === 'absolute' ? ( + + ) : ( + + ) + } + onToggleMode={() => toggle('decile')} + /> - {/* Secondary Metrics Grid */} -
- {/* Poverty Impact */} -
- + {/* Winners and Losers */} + + {/* Distribution Bar */}
- -
-
- -
- -
- - {/* Winners and Losers */} -
- -
- -
-
- - Winners and losers - - - {/* Distribution Bar */} + />
+ /> +
+ + {/* Legend */} + +
+ + Gain: {(winnersPercent * 100).toFixed(1)}% + + +
+ + No change: {(unchangedPercent * 100).toFixed(1)}% + + +
-
- - {/* Legend */} - - -
- - Gain: {(winnersPercent * 100).toFixed(1)}% - - - -
- - No change: {(unchangedPercent * 100).toFixed(1)}% - - - -
- - Lose: {(losersPercent * 100).toFixed(1)}% - - + + Lose: {(losersPercent * 100).toFixed(1)}% + -
+ +
+ } + expandedContent={ + + } + onToggleMode={() => toggle('winners')} + /> + + {/* Poverty Impact */} + + + -
-
- + } + expandedControls={ + <> + + setPovertyBreakdown(value as PovertyBreakdown)} + size="xs" + options={breakdownOptions} + /> + + } + expandedContent={povertyChart} + onToggleMode={() => toggle('poverty')} + /> + + {/* Inequality Impact */} + + + + + } + expandedContent={ + + } + onToggleMode={() => toggle('inequality')} + /> + + {/* Congressional District Impact — US only, full width */} + {showCongressionalCard && ( + toggle('congressional')} + /> + )} +
); } diff --git a/app/src/pages/report-output/SocietyWideReportOutput.tsx b/app/src/pages/report-output/SocietyWideReportOutput.tsx index e24f85d56..7b885fbbc 100644 --- a/app/src/pages/report-output/SocietyWideReportOutput.tsx +++ b/app/src/pages/report-output/SocietyWideReportOutput.tsx @@ -21,8 +21,8 @@ import DynamicsSubPage from './DynamicsSubPage'; import ErrorPage from './ErrorPage'; import LoadingPage from './LoadingPage'; import { LocalAuthoritySubPage } from './LocalAuthoritySubPage'; +import MigrationSubPage from './MigrationSubPage'; import NotFoundSubPage from './NotFoundSubPage'; -import OverviewSubPage from './OverviewSubPage'; import PolicySubPage from './PolicySubPage'; import PopulationSubPage from './PopulationSubPage'; import PolicyReproducibility from './reproduce-in-python/PolicyReproducibility'; @@ -67,12 +67,11 @@ const INPUT_ONLY_TABS: Record React.ReactEleme ), - population: ({ simulations, geographies, userGeographies }) => ( + population: ({ simulations, geographies }) => ( ), @@ -101,7 +100,14 @@ const INPUT_ONLY_TABS: Record React.ReactEleme * These tabs need the OUTPUT data (calculated society-wide impacts) */ const OUTPUT_TABS: Record React.ReactElement> = { - overview: ({ output }) => , + migration: ({ output, report, simulations, geographies }) => ( + + ), 'comparative-analysis': ({ output, simulations, report, activeView }) => ( state.metadata.economyOptions?.datasets); @@ -230,7 +234,6 @@ export function SocietyWideReportOutput({ policies, userPolicies, geographies, - userGeographies, datasets, }); } @@ -257,7 +260,7 @@ export function SocietyWideReportOutput({ if (calcStatus.isComplete && calcStatus.result) { const output = calcStatus.result as SocietyWideOutput; - const OutputTabRenderer = OUTPUT_TABS[subpage]; + const OutputTabRenderer = OUTPUT_TABS[subpage || 'migration']; if (OutputTabRenderer) { return OutputTabRenderer({ report, @@ -265,7 +268,6 @@ export function SocietyWideReportOutput({ policies, userPolicies, geographies, - userGeographies, output, activeView, }); diff --git a/app/src/pages/report-output/budgetary-impact/BudgetaryImpactSubPage.tsx b/app/src/pages/report-output/budgetary-impact/BudgetaryImpactSubPage.tsx index df6c66659..18677b172 100644 --- a/app/src/pages/report-output/budgetary-impact/BudgetaryImpactSubPage.tsx +++ b/app/src/pages/report-output/budgetary-impact/BudgetaryImpactSubPage.tsx @@ -25,14 +25,15 @@ import { interface Props { output: SocietyWideReportOutput; + chartHeight?: number; } -export default function BudgetaryImpactSubPage({ output }: Props) { +export default function BudgetaryImpactSubPage({ output, chartHeight: chartHeightProp }: Props) { const mobile = useMediaQuery(MOBILE_BREAKPOINT_QUERY); const { height: viewportHeight } = useViewportSize(); const countryId = useCurrentCountry(); const metadata = useSelector((state: RootState) => state.metadata); - const chartHeight = getClampedChartHeight(viewportHeight, mobile); + const chartHeight = chartHeightProp ?? getClampedChartHeight(viewportHeight, mobile); // Extract data const budgetaryImpact = output.budget.budgetary_impact; diff --git a/app/src/pages/report-output/comparativeAnalysisTree.ts b/app/src/pages/report-output/comparativeAnalysisTree.ts index ce5e55b8d..72eb509bd 100644 --- a/app/src/pages/report-output/comparativeAnalysisTree.ts +++ b/app/src/pages/report-output/comparativeAnalysisTree.ts @@ -7,147 +7,17 @@ export interface TreeNode { /** * Get the tree structure for Comparative Analysis submenu - * Based on V1 tree structure but adapted for V2 + * + * All charts have been migrated to the Migration tab: + * - budgetary-impact-overall, budgetary-impact-by-program + * - distributional-impact-income-relative, distributional-impact-income-average + * - distributional-impact-wealth-relative, distributional-impact-wealth-average + * - winners-losers-income-decile, winners-losers-wealth-decile + * - poverty-impact-age, poverty-impact-gender, poverty-impact-race + * - deep-poverty-impact-age, deep-poverty-impact-gender + * - inequality-impact + * - congressional-district-absolute, congressional-district-relative */ -export function getComparativeAnalysisTree(countryId: string): TreeNode[] { - return [ - { - name: 'budgetaryImpact', - label: 'Budgetary impact', - children: [ - { - name: 'budgetary-impact-overall', - label: 'Overall', - }, - ...(countryId === 'uk' - ? [ - { - name: 'budgetary-impact-by-program', - label: 'By program', - }, - ] - : []), - ], - }, - { - name: 'distributionalImpact', - label: 'Distributional impact', - children: [ - { - name: 'distributionalImpact.incomeDecile', - label: 'By income decile', - children: [ - { - name: 'distributional-impact-income-relative', - label: 'Relative', - }, - { - name: 'distributional-impact-income-average', - label: 'Absolute', - }, - ], - }, - ...(countryId === 'uk' - ? [ - { - name: 'distributionalImpact.wealthDecile', - label: 'By wealth decile', - children: [ - { - name: 'distributional-impact-wealth-relative', - label: 'Relative', - }, - { - name: 'distributional-impact-wealth-average', - label: 'Absolute', - }, - ], - }, - ] - : []), - ], - }, - { - name: 'winnersAndLosers', - label: 'Winners and losers', - children: [ - { - name: 'winners-losers-income-decile', - label: 'By income decile', - }, - ...(countryId === 'uk' - ? [ - { - name: 'winners-losers-wealth-decile', - label: 'By wealth decile', - }, - ] - : []), - ], - }, - { - name: 'povertyImpact', - label: 'Poverty impact', - children: [ - { - name: 'povertyImpact.regular', - label: 'Regular poverty', - children: [ - { - name: 'poverty-impact-age', - label: 'By age', - }, - { - name: 'poverty-impact-gender', - label: 'By gender', - }, - ...(countryId === 'us' - ? [ - { - name: 'poverty-impact-race', - label: 'By race', - }, - ] - : []), - ], - }, - { - name: 'povertyImpact.deep', - label: 'Deep poverty', - children: [ - { - name: 'deep-poverty-impact-age', - label: 'By age', - }, - { - name: 'deep-poverty-impact-gender', - label: 'By gender', - }, - ], - }, - ], - }, - { - name: 'inequality-impact', - label: 'Inequality impact', - }, - ...(countryId === 'us' - ? [ - { - name: 'congressionalDistricts', - label: 'Congressional districts', - children: [ - { - name: 'congressional-district-absolute', - label: 'Absolute', - }, - { - name: 'congressional-district-relative', - label: 'Relative', - }, - ], - }, - ] - : []), - ]; +export function getComparativeAnalysisTree(_countryId: string): TreeNode[] { + return []; } diff --git a/app/src/pages/report-output/distributional-impact/DistributionalImpactIncomeAverageSubPage.tsx b/app/src/pages/report-output/distributional-impact/DistributionalImpactIncomeAverageSubPage.tsx index b9bd2e633..a6ac11a9c 100644 --- a/app/src/pages/report-output/distributional-impact/DistributionalImpactIncomeAverageSubPage.tsx +++ b/app/src/pages/report-output/distributional-impact/DistributionalImpactIncomeAverageSubPage.tsx @@ -32,14 +32,18 @@ import { regionName } from '@/utils/impactChartUtils'; interface Props { output: SocietyWideReportOutput; + chartHeight?: number; } -export default function DistributionalImpactIncomeAverageSubPage({ output }: Props) { +export default function DistributionalImpactIncomeAverageSubPage({ + output, + chartHeight: chartHeightProp, +}: Props) { const mobile = useMediaQuery(MOBILE_BREAKPOINT_QUERY); const countryId = useCurrentCountry(); const metadata = useSelector((state: RootState) => state.metadata); const { height: viewportHeight } = useViewportSize(); - const chartHeight = getClampedChartHeight(viewportHeight, mobile); + const chartHeight = chartHeightProp ?? getClampedChartHeight(viewportHeight, mobile); // Extract data - object with keys "1", "2", ..., "10" const decileAverage = output.decile.average; diff --git a/app/src/pages/report-output/distributional-impact/DistributionalImpactIncomeRelativeSubPage.tsx b/app/src/pages/report-output/distributional-impact/DistributionalImpactIncomeRelativeSubPage.tsx index d985593c3..a3fe3730e 100644 --- a/app/src/pages/report-output/distributional-impact/DistributionalImpactIncomeRelativeSubPage.tsx +++ b/app/src/pages/report-output/distributional-impact/DistributionalImpactIncomeRelativeSubPage.tsx @@ -32,14 +32,18 @@ import { regionName } from '@/utils/impactChartUtils'; interface Props { output: SocietyWideReportOutput; + chartHeight?: number; } -export default function DistributionalImpactIncomeRelativeSubPage({ output }: Props) { +export default function DistributionalImpactIncomeRelativeSubPage({ + output, + chartHeight: chartHeightProp, +}: Props) { const mobile = useMediaQuery(MOBILE_BREAKPOINT_QUERY); const countryId = useCurrentCountry(); const metadata = useSelector((state: RootState) => state.metadata); const { height: viewportHeight } = useViewportSize(); - const chartHeight = getClampedChartHeight(viewportHeight, mobile); + const chartHeight = chartHeightProp ?? getClampedChartHeight(viewportHeight, mobile); // Extract data - object with keys "1", "2", ..., "10" const decileRelative = output.decile.relative; diff --git a/app/src/pages/report-output/distributional-impact/WinnersLosersIncomeDecileSubPage.tsx b/app/src/pages/report-output/distributional-impact/WinnersLosersIncomeDecileSubPage.tsx index 8b9d4a2aa..6812a448c 100644 --- a/app/src/pages/report-output/distributional-impact/WinnersLosersIncomeDecileSubPage.tsx +++ b/app/src/pages/report-output/distributional-impact/WinnersLosersIncomeDecileSubPage.tsx @@ -18,6 +18,7 @@ import { regionName } from '@/utils/impactChartUtils'; interface Props { output: SocietyWideReportOutput; + chartHeight?: number; } // Category definitions and styling @@ -73,12 +74,15 @@ function WinnersLosersTooltip({ active, payload, label }: any) { ); } -export default function WinnersLosersIncomeDecileSubPage({ output }: Props) { +export default function WinnersLosersIncomeDecileSubPage({ + output, + chartHeight: chartHeightProp, +}: Props) { const mobile = useMediaQuery(MOBILE_BREAKPOINT_QUERY); const countryId = useCurrentCountry(); const metadata = useSelector((state: RootState) => state.metadata); const { height: viewportHeight } = useViewportSize(); - const chartHeight = getClampedChartHeight(viewportHeight, mobile); + const chartHeight = chartHeightProp ?? getClampedChartHeight(viewportHeight, mobile); // Extract data const deciles = output.intra_decile.deciles; diff --git a/app/src/pages/report-output/inequality-impact/InequalityImpactSubPage.tsx b/app/src/pages/report-output/inequality-impact/InequalityImpactSubPage.tsx index 9b307e91f..b27efd1be 100644 --- a/app/src/pages/report-output/inequality-impact/InequalityImpactSubPage.tsx +++ b/app/src/pages/report-output/inequality-impact/InequalityImpactSubPage.tsx @@ -32,14 +32,15 @@ import { regionName } from '@/utils/impactChartUtils'; interface Props { output: SocietyWideReportOutput; + chartHeight?: number; } -export default function InequalityImpactSubPage({ output }: Props) { +export default function InequalityImpactSubPage({ output, chartHeight: chartHeightProp }: Props) { const mobile = useMediaQuery(MOBILE_BREAKPOINT_QUERY); const countryId = useCurrentCountry(); const metadata = useSelector((state: RootState) => state.metadata); const { height: viewportHeight } = useViewportSize(); - const chartHeight = getClampedChartHeight(viewportHeight, mobile); + const chartHeight = chartHeightProp ?? getClampedChartHeight(viewportHeight, mobile); // Extract data const giniImpact = output.inequality.gini; diff --git a/app/src/pages/report-output/poverty-impact/DeepPovertyImpactByAgeSubPage.tsx b/app/src/pages/report-output/poverty-impact/DeepPovertyImpactByAgeSubPage.tsx index 82a6f4f53..9a2f8e53e 100644 --- a/app/src/pages/report-output/poverty-impact/DeepPovertyImpactByAgeSubPage.tsx +++ b/app/src/pages/report-output/poverty-impact/DeepPovertyImpactByAgeSubPage.tsx @@ -32,14 +32,18 @@ import { regionName } from '@/utils/impactChartUtils'; interface Props { output: SocietyWideReportOutput; + chartHeight?: number; } -export default function DeepPovertyImpactByAgeSubPage({ output }: Props) { +export default function DeepPovertyImpactByAgeSubPage({ + output, + chartHeight: chartHeightProp, +}: Props) { const mobile = useMediaQuery(MOBILE_BREAKPOINT_QUERY); const countryId = useCurrentCountry(); const metadata = useSelector((state: RootState) => state.metadata); const { height: viewportHeight } = useViewportSize(); - const chartHeight = getClampedChartHeight(viewportHeight, mobile); + const chartHeight = chartHeightProp ?? getClampedChartHeight(viewportHeight, mobile); // Extract data const deepPovertyImpact = output.poverty.deep_poverty; diff --git a/app/src/pages/report-output/poverty-impact/DeepPovertyImpactByGenderSubPage.tsx b/app/src/pages/report-output/poverty-impact/DeepPovertyImpactByGenderSubPage.tsx index 7d6a1be03..f4eb18de3 100644 --- a/app/src/pages/report-output/poverty-impact/DeepPovertyImpactByGenderSubPage.tsx +++ b/app/src/pages/report-output/poverty-impact/DeepPovertyImpactByGenderSubPage.tsx @@ -32,14 +32,18 @@ import { regionName } from '@/utils/impactChartUtils'; interface Props { output: SocietyWideReportOutput; + chartHeight?: number; } -export default function DeepPovertyImpactByGenderSubPage({ output }: Props) { +export default function DeepPovertyImpactByGenderSubPage({ + output, + chartHeight: chartHeightProp, +}: Props) { const mobile = useMediaQuery(MOBILE_BREAKPOINT_QUERY); const countryId = useCurrentCountry(); const metadata = useSelector((state: RootState) => state.metadata); const { height: viewportHeight } = useViewportSize(); - const chartHeight = getClampedChartHeight(viewportHeight, mobile); + const chartHeight = chartHeightProp ?? getClampedChartHeight(viewportHeight, mobile); // Extract data const genderImpact = output.poverty_by_gender?.deep_poverty || { diff --git a/app/src/pages/report-output/poverty-impact/PovertyImpactByAgeSubPage.tsx b/app/src/pages/report-output/poverty-impact/PovertyImpactByAgeSubPage.tsx index b221ba444..4b2828c93 100644 --- a/app/src/pages/report-output/poverty-impact/PovertyImpactByAgeSubPage.tsx +++ b/app/src/pages/report-output/poverty-impact/PovertyImpactByAgeSubPage.tsx @@ -32,14 +32,15 @@ import { regionName } from '@/utils/impactChartUtils'; interface Props { output: SocietyWideReportOutput; + chartHeight?: number; } -export default function PovertyImpactByAgeSubPage({ output }: Props) { +export default function PovertyImpactByAgeSubPage({ output, chartHeight: chartHeightProp }: Props) { const mobile = useMediaQuery(MOBILE_BREAKPOINT_QUERY); const countryId = useCurrentCountry(); const metadata = useSelector((state: RootState) => state.metadata); const { height: viewportHeight } = useViewportSize(); - const chartHeight = getClampedChartHeight(viewportHeight, mobile); + const chartHeight = chartHeightProp ?? getClampedChartHeight(viewportHeight, mobile); // Extract data const povertyImpact = output.poverty.poverty; diff --git a/app/src/pages/report-output/poverty-impact/PovertyImpactByGenderSubPage.tsx b/app/src/pages/report-output/poverty-impact/PovertyImpactByGenderSubPage.tsx index bcf6a1c05..280d5c08c 100644 --- a/app/src/pages/report-output/poverty-impact/PovertyImpactByGenderSubPage.tsx +++ b/app/src/pages/report-output/poverty-impact/PovertyImpactByGenderSubPage.tsx @@ -32,14 +32,18 @@ import { regionName } from '@/utils/impactChartUtils'; interface Props { output: SocietyWideReportOutput; + chartHeight?: number; } -export default function PovertyImpactByGenderSubPage({ output }: Props) { +export default function PovertyImpactByGenderSubPage({ + output, + chartHeight: chartHeightProp, +}: Props) { const mobile = useMediaQuery(MOBILE_BREAKPOINT_QUERY); const countryId = useCurrentCountry(); const metadata = useSelector((state: RootState) => state.metadata); const { height: viewportHeight } = useViewportSize(); - const chartHeight = getClampedChartHeight(viewportHeight, mobile); + const chartHeight = chartHeightProp ?? getClampedChartHeight(viewportHeight, mobile); // Extract data const genderImpact = output.poverty_by_gender?.poverty || { diff --git a/app/src/pages/report-output/poverty-impact/PovertyImpactByRaceSubPage.tsx b/app/src/pages/report-output/poverty-impact/PovertyImpactByRaceSubPage.tsx index fac4deb64..5349094bb 100644 --- a/app/src/pages/report-output/poverty-impact/PovertyImpactByRaceSubPage.tsx +++ b/app/src/pages/report-output/poverty-impact/PovertyImpactByRaceSubPage.tsx @@ -32,14 +32,18 @@ import { regionName } from '@/utils/impactChartUtils'; interface Props { output: SocietyWideReportOutput; + chartHeight?: number; } -export default function PovertyImpactByRaceSubPage({ output }: Props) { +export default function PovertyImpactByRaceSubPage({ + output, + chartHeight: chartHeightProp, +}: Props) { const mobile = useMediaQuery(MOBILE_BREAKPOINT_QUERY); const countryId = useCurrentCountry(); const metadata = useSelector((state: RootState) => state.metadata); const { height: viewportHeight } = useViewportSize(); - const chartHeight = getClampedChartHeight(viewportHeight, mobile); + const chartHeight = chartHeightProp ?? getClampedChartHeight(viewportHeight, mobile); // Extract data type RaceData = Record; diff --git a/app/src/pages/reportBuilder/ModifyReportPage.tsx b/app/src/pages/reportBuilder/ModifyReportPage.tsx new file mode 100644 index 000000000..54bc252f1 --- /dev/null +++ b/app/src/pages/reportBuilder/ModifyReportPage.tsx @@ -0,0 +1,199 @@ +import { useCallback, useMemo, useState } from 'react'; +import { IconNewSection, IconPencil, IconStatusChange, IconX } from '@tabler/icons-react'; +import { useLocation, useNavigate, useParams } from 'react-router-dom'; +import { + Button, + Container, + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + Group, + Stack, + Text, +} from '@/components/ui'; +import { spacing } from '@/designTokens'; +import { useCurrentCountry } from '@/hooks/useCurrentCountry'; +import { getReportOutputPath } from '@/utils/reportRouting'; +import { ReportBuilderShell, SimulationBlockFull } from './components'; +import { useModifyReportSubmission } from './hooks/useModifyReportSubmission'; +import { useReportBuilderState } from './hooks/useReportBuilderState'; +import type { IngredientPickerState, ReportBuilderState, TopBarAction } from './types'; + +export default function ModifyReportPage() { + const { userReportId } = useParams<{ userReportId: string }>(); + const countryId = useCurrentCountry() as 'us' | 'uk'; + const navigate = useNavigate(); + const location = useLocation(); + const locationState = location.state as { + edit?: boolean; + from?: string; + reportPath?: string; + } | null; + const startInEditMode = locationState?.edit === true; + const cameFromReportOutput = locationState?.from === 'report-output'; + const reportOutputPath = locationState?.reportPath; + + const { reportState, setReportState, originalState, isLoading, error } = useReportBuilderState( + userReportId ?? '' + ); + + const [pickerState, setPickerState] = useState({ + isOpen: false, + simulationIndex: 0, + ingredientType: 'policy', + }); + + const { handleSaveAsNew, handleReplace, isSavingNew, isReplacing } = useModifyReportSubmission({ + reportState: reportState ?? { label: null, year: '', simulations: [] }, + countryId, + existingUserReportId: userReportId ?? '', + onSuccess: (resultUserReportId) => { + navigate(getReportOutputPath(countryId, resultUserReportId)); + }, + }); + + // View/edit mode state + const [isEditing, setIsEditing] = useState(startInEditMode); + const [showSameNameWarning, setShowSameNameWarning] = useState(false); + + const isEitherSubmitting = isSavingNew || isReplacing; + + // Same-name guard for "Save as new report" + const handleSaveAsNewClick = useCallback(() => { + const currentName = (reportState?.label || '').trim(); + const origName = (originalState?.label || '').trim(); + if (currentName && currentName === origName) { + setShowSameNameWarning(true); + } else { + handleSaveAsNew(reportState?.label || 'Untitled report'); + } + }, [reportState?.label, originalState?.label, handleSaveAsNew]); + + // Dynamic toolbar actions + const topBarActions: TopBarAction[] = useMemo(() => { + if (!isEditing) { + return [ + { + key: 'edit', + label: 'Edit report', + icon: , + onClick: () => setIsEditing(true), + variant: 'primary' as const, + }, + ]; + } + return [ + { + key: 'cancel', + label: 'Cancel', + icon: , + onClick: () => { + if (originalState) { + setReportState(structuredClone(originalState) as ReportBuilderState); + } + setIsEditing(false); + }, + variant: 'secondary' as const, + disabled: isEitherSubmitting, + }, + { + key: 'replace', + label: 'Update existing report', + icon: , + onClick: handleReplace, + variant: 'secondary' as const, + loading: isReplacing, + loadingLabel: 'Updating report...', + disabled: isSavingNew, + }, + { + key: 'save-new', + label: 'Save as new report', + icon: , + onClick: handleSaveAsNewClick, + variant: 'primary' as const, + loading: isSavingNew, + loadingLabel: 'Creating report...', + disabled: isReplacing, + }, + ]; + }, [ + isEditing, + countryId, + userReportId, + navigate, + handleSaveAsNewClick, + handleReplace, + isSavingNew, + isReplacing, + isEitherSubmitting, + ]); + + if (isLoading || !reportState) { + return ( + + + Loading report... + + + ); + } + + if (error) { + return ( + + + Error loading report: {error.message} + + + ); + } + + return ( + <> + >} + pickerState={pickerState} + setPickerState={setPickerState} + BlockComponent={SimulationBlockFull} + isReadOnly={!isEditing} + /> + + !open && setShowSameNameWarning(false)} + > + + + Same name + + + + Both the original and new report will have the name " + {(reportState?.label || '').trim()}". Are you sure you want to save? + + + + + + + + + + ); +} diff --git a/app/src/pages/reportBuilder/ReportBuilderPage.tsx b/app/src/pages/reportBuilder/ReportBuilderPage.tsx new file mode 100644 index 000000000..c9ed82aea --- /dev/null +++ b/app/src/pages/reportBuilder/ReportBuilderPage.tsx @@ -0,0 +1,100 @@ +/** + * ReportBuilderPage - Setup mode for creating a new report + * + * Composes ReportBuilderShell with: + * - Blank state initialization + * - useReportSubmission for create-only submission + * - Auto-add second simulation when geography is selected + * - Single "Run" top bar action + */ + +import { useEffect, useMemo, useState } from 'react'; +import { IconPlayerPlay } from '@tabler/icons-react'; +import { useNavigate } from 'react-router-dom'; +import { CURRENT_YEAR } from '@/constants'; +import { useCurrentCountry } from '@/hooks/useCurrentCountry'; +import { initializeSimulationState } from '@/utils/pathwayState/initializeSimulationState'; +import { getReportOutputPath } from '@/utils/reportRouting'; +import { ReportBuilderShell, SimulationBlockFull } from './components'; +import { getSamplePopulations } from './constants'; +import { createCurrentLawPolicy } from './currentLaw'; +import { useReportSubmission } from './hooks/useReportSubmission'; +import type { IngredientPickerState, ReportBuilderState, TopBarAction } from './types'; + +export default function ReportBuilderPage() { + const countryId = useCurrentCountry() as 'us' | 'uk'; + const navigate = useNavigate(); + + // State initialization (setup mode: defaults to Current law + nationwide) + const initialSim = initializeSimulationState(); + initialSim.label = 'Baseline simulation'; + initialSim.policy = createCurrentLawPolicy(); + initialSim.population = getSamplePopulations(countryId).nationwide; + + const [reportState, setReportState] = useState({ + label: null, + year: CURRENT_YEAR, + simulations: [initialSim], + }); + + const [pickerState, setPickerState] = useState({ + isOpen: false, + simulationIndex: 0, + ingredientType: 'policy', + }); + + // Submission logic (extracted hook) + const { handleSubmit, isSubmitting, isReportConfigured } = useReportSubmission({ + reportState, + countryId, + onSuccess: (userReportId) => { + navigate(getReportOutputPath(countryId, userReportId)); + }, + }); + + // Auto-add second simulation when geography is selected (setup mode only) + const isGeographySelected = !!reportState.simulations[0]?.population?.geography?.id; + + useEffect(() => { + if (!reportState.id && isGeographySelected) { + setReportState((prev) => { + if (prev.simulations.length !== 1) { + return prev; + } + const newSim = initializeSimulationState(); + newSim.label = 'Reform simulation'; + newSim.population = { ...prev.simulations[0].population }; + return { ...prev, simulations: [...prev.simulations, newSim] }; + }); + } + }, [reportState.id, isGeographySelected, setReportState]); + + // Top bar actions (setup mode: just "Run") + const topBarActions: TopBarAction[] = useMemo( + () => [ + { + key: 'run', + label: 'Run', + icon: , + onClick: handleSubmit, + variant: 'primary', + disabled: !isReportConfigured, + loading: isSubmitting, + loadingLabel: 'Running...', + }, + ], + [handleSubmit, isReportConfigured, isSubmitting] + ); + + return ( + + ); +} diff --git a/app/src/pages/reportBuilder/components/AddSimulationCard.tsx b/app/src/pages/reportBuilder/components/AddSimulationCard.tsx new file mode 100644 index 000000000..c1fea6771 --- /dev/null +++ b/app/src/pages/reportBuilder/components/AddSimulationCard.tsx @@ -0,0 +1,66 @@ +/** + * AddSimulationCard - Card to add a new reform simulation + */ + +import { useState } from 'react'; +import { IconPlus } from '@tabler/icons-react'; +import { Text } from '@/components/ui'; +import { colors } from '@/designTokens'; +import { FONT_SIZES } from '../constants'; +import { styles } from '../styles'; +import type { AddSimulationCardProps } from '../types'; + +export function AddSimulationCard({ onClick, disabled }: AddSimulationCardProps) { + const [isHovered, setIsHovered] = useState(false); + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onClick={disabled ? undefined : onClick} + onKeyDown={(e) => { + if (!disabled && (e.key === 'Enter' || e.key === ' ')) { + e.preventDefault(); + onClick?.(); + } + }} + > +
+ +
+ + Add reform simulation + + + Compare policy changes against your baseline + +
+ ); +} diff --git a/app/src/pages/reportBuilder/components/EditableLabel.story.tsx b/app/src/pages/reportBuilder/components/EditableLabel.story.tsx new file mode 100644 index 000000000..68a6dd932 --- /dev/null +++ b/app/src/pages/reportBuilder/components/EditableLabel.story.tsx @@ -0,0 +1,66 @@ +import { useState } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { EditableLabel } from './EditableLabel'; + +const meta: Meta = { + title: 'Report builder/EditableLabel', + component: EditableLabel, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +export default meta; +type Story = StoryObj; + +function ControlledLabel({ + initialValue, + placeholder, + emptyStateText, +}: { + initialValue: string; + placeholder: string; + emptyStateText?: string; +}) { + const [value, setValue] = useState(initialValue); + return ( + + ); +} + +export const WithValue: Story = { + render: () => ( + + ), +}; + +export const Empty: Story = { + render: () => ( + + ), +}; + +export const LongText: Story = { + render: () => ( + + ), +}; diff --git a/app/src/pages/reportBuilder/components/EditableLabel.tsx b/app/src/pages/reportBuilder/components/EditableLabel.tsx new file mode 100644 index 000000000..2101bd666 --- /dev/null +++ b/app/src/pages/reportBuilder/components/EditableLabel.tsx @@ -0,0 +1,122 @@ +/** + * EditableLabel - Shared component for inline editable labels + * + * Used by PolicyCreationModal and PopulationStatusHeader for consistent + * name editing behavior with auto-sizing input and checkmark confirmation. + */ + +import { useLayoutEffect, useState } from 'react'; +import { IconCheck, IconPencil } from '@tabler/icons-react'; +import { Button, Input, Text } from '@/components/ui'; +import { colors, spacing, typography } from '@/designTokens'; +import { FONT_SIZES } from '../constants'; + +interface EditableLabelProps { + value: string; + onChange: (value: string) => void; + placeholder: string; + emptyStateText?: string; + textColor?: string; + emptyTextColor?: string; +} + +export function EditableLabel({ + value, + onChange, + placeholder, + emptyStateText, + textColor = colors.gray[800], + emptyTextColor = colors.gray[400], +}: EditableLabelProps) { + const [isEditing, setIsEditing] = useState(false); + const [inputValue, setInputValue] = useState(value); + + // Sync inputValue with value prop when not editing + useLayoutEffect(() => { + if (!isEditing) { + setInputValue(value); + } + }, [value, isEditing]); + + const handleSubmit = () => { + onChange(inputValue || placeholder); + setIsEditing(false); + }; + + const handleStartEditing = () => { + setInputValue(value); + setIsEditing(true); + }; + + const displayText = value || emptyStateText || placeholder; + + return ( +
+ {isEditing ? ( + <> + setInputValue(e.currentTarget.value)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + handleSubmit(); + } + if (e.key === 'Escape') { + setInputValue(value); + setIsEditing(false); + } + }} + autoFocus + onBlur={handleSubmit} + placeholder={placeholder} + className="tw:border-none tw:bg-transparent tw:p-0 tw:h-auto tw:shadow-none tw:focus-visible:ring-0" + style={{ + flex: 1, + minWidth: 0, + fontFamily: typography.fontFamily.primary, + fontWeight: 600, + fontSize: FONT_SIZES.normal, + }} + /> + + + ) : ( + <> + + {displayText} + + + + )} +
+ ); +} diff --git a/app/src/pages/reportBuilder/components/IngredientSection.tsx b/app/src/pages/reportBuilder/components/IngredientSection.tsx new file mode 100644 index 000000000..a2f260b36 --- /dev/null +++ b/app/src/pages/reportBuilder/components/IngredientSection.tsx @@ -0,0 +1,238 @@ +/** + * IngredientSection - A section displaying policy, population, or dynamics options + */ + +import { + IconChartLine, + IconFileDescription, + IconFolder, + IconHome, + IconScale, + IconSparkles, + IconUsers, +} from '@tabler/icons-react'; +import { Group, Text } from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { COUNTRY_CONFIG, FONT_SIZES, INGREDIENT_COLORS } from '../constants'; +import { isCurrentLaw } from '../currentLaw'; +import { styles } from '../styles'; +import type { IngredientSectionProps } from '../types'; +import { BrowseMoreChip, OptionChipSquare } from './chips'; +import { CountryMapIcon } from './shared'; + +export function IngredientSection({ + type, + currentId, + countryId = 'us', + onQuickSelectPolicy, + onSelectSavedPolicy, + onEditPolicy: _onEditPolicy, + onQuickSelectPopulation, + onSelectRecentPopulation, + onDeselectPopulation, + onDeselectPolicy, + onBrowseMore, + isInherited, + inheritedPopulationType: _inheritedPopulationType, + inheritedPopulationLabel: _inheritedPopulationLabel, + savedPolicies = [], + recentPopulations = [], +}: IngredientSectionProps) { + const countryConfig = COUNTRY_CONFIG[countryId] || COUNTRY_CONFIG.us; + const colorConfig = INGREDIENT_COLORS[type]; + const IconComponent = { + policy: IconScale, + population: IconUsers, + dynamics: IconChartLine, + }[type]; + + const typeLabels = { + policy: 'Policy', + population: 'Household(s)', + dynamics: 'Dynamics', + }; + + const iconSize = 16; + + return ( +
+ {/* Section header */} +
+
+ +
+ + {typeLabels[type]} + + {isInherited && (inherited from baseline)} +
+ + {/* Chips container */} +
+ {type === 'policy' && onQuickSelectPolicy && ( + <> + {/* Current law - always first */} + + } + label="Current law" + description="No changes" + isSelected={isCurrentLaw(currentId)} + onClick={() => { + if (isCurrentLaw(currentId) && onDeselectPolicy) { + onDeselectPolicy(); + } else { + onQuickSelectPolicy(); + } + }} + colorConfig={colorConfig} + /> + {/* Saved policies - up to 3 shown (total 4 with Current law) */} + {savedPolicies.slice(0, 3).map((policy) => ( + + } + label={policy.label} + description={`${policy.paramCount} param${policy.paramCount !== 1 ? 's' : ''} changed`} + isSelected={currentId === policy.id} + onClick={() => { + if (currentId === policy.id && onDeselectPolicy) { + onDeselectPolicy(); + } else { + onSelectSavedPolicy?.(policy.id, policy.label, policy.paramCount); + } + }} + colorConfig={colorConfig} + /> + ))} + {/* More options - always shown for searching/browsing all policies */} + {onBrowseMore && ( + + )} + + )} + + {type === 'population' && onQuickSelectPopulation && ( + <> + {/* Nationwide - always first */} + + } + label={countryConfig.nationwideTitle} + description={countryConfig.nationwideSubtitle} + isSelected={currentId === countryConfig.geographyId} + onClick={() => { + if (currentId === countryConfig.geographyId && onDeselectPopulation) { + onDeselectPopulation(); + } else { + onQuickSelectPopulation('nationwide'); + } + }} + colorConfig={colorConfig} + /> + {/* Recent populations - up to 4 shown */} + {recentPopulations.slice(0, 4).map((pop) => ( + + ) : ( + + ) + } + label={pop.label} + description={pop.type === 'household' ? 'Household' : 'Geography'} + isSelected={currentId === pop.id} + onClick={() => { + if (currentId === pop.id && onDeselectPopulation) { + onDeselectPopulation(); + } else { + onSelectRecentPopulation?.(pop.population); + } + }} + colorConfig={colorConfig} + /> + ))} + {/* More options - always shown for searching/browsing all populations */} + {onBrowseMore && ( + + )} + + )} + + {type === 'dynamics' && ( +
+ + + + Dynamics coming soon + + +
+ )} +
+
+ ); +} diff --git a/app/src/pages/reportBuilder/components/IngredientSectionFull.tsx b/app/src/pages/reportBuilder/components/IngredientSectionFull.tsx new file mode 100644 index 000000000..e54b04c92 --- /dev/null +++ b/app/src/pages/reportBuilder/components/IngredientSectionFull.tsx @@ -0,0 +1,410 @@ +/** + * IngredientSectionFull - Full-width ingredient section variant + * + * Instead of a 3-column chip grid, each section either shows: + * - Empty state: large clickable area with "Add X ingredient" prompt + * - Selected state: full-width card displaying the chosen item + * + * Same props interface as IngredientSection for drop-in replacement. + */ + +import { + IconChartLine, + IconFileDescription, + IconHome, + IconPlus, + IconScale, + IconSettings, + IconSparkles, + IconTransfer, + IconUsers, + IconX, +} from '@tabler/icons-react'; +import { Group, Text, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { COUNTRY_CONFIG, FONT_SIZES, INGREDIENT_COLORS } from '../constants'; +import { CURRENT_LAW_LABEL, isCurrentLaw } from '../currentLaw'; +import { styles } from '../styles'; +import type { IngredientSectionProps } from '../types'; +import { CountryMapIcon } from './shared'; + +export function IngredientSectionFull({ + type, + currentId, + countryId = 'us', + onQuickSelectPolicy: _onQuickSelectPolicy, + onSelectSavedPolicy: _onSelectSavedPolicy, + onEditPolicy: _onEditPolicy, + onQuickSelectPopulation: _onQuickSelectPopulation, + onSelectRecentPopulation: _onSelectRecentPopulation, + onDeselectPopulation, + onDeselectPolicy, + onBrowseMore, + isInherited, + inheritedPopulationType: _inheritedPopulationType, + inheritedPopulationLabel: _inheritedPopulationLabel, + savedPolicies = [], + recentPopulations = [], + currentLabel, + isReadOnly, + onViewPolicy, +}: IngredientSectionProps) { + const countryConfig = COUNTRY_CONFIG[countryId] || COUNTRY_CONFIG.us; + const colorConfig = INGREDIENT_COLORS[type]; + const IconComponent = { + policy: IconScale, + population: IconUsers, + dynamics: IconChartLine, + }[type]; + + const typeLabels = { + policy: 'Policy', + population: 'Household(s)', + dynamics: 'Dynamics', + }; + + // Determine what's currently selected for policy + const selectedPolicyLabel = (() => { + if (type !== 'policy' || !currentId) { + return null; + } + if (isCurrentLaw(currentId)) { + return { label: CURRENT_LAW_LABEL, description: 'No changes' }; + } + const saved = savedPolicies.find((p) => p.id === currentId); + if (saved) { + return { + label: saved.label, + description: `${saved.paramCount} param${saved.paramCount !== 1 ? 's' : ''} changed`, + }; + } + return { label: currentLabel || `Policy #${currentId}`, description: '' }; + })(); + + // Determine what's currently selected for population + const selectedPopulationLabel = (() => { + if (type !== 'population' || !currentId) { + return null; + } + if (currentId === countryConfig.geographyId) { + return { + label: countryConfig.nationwideTitle, + description: countryConfig.nationwideSubtitle, + populationType: 'geography', + }; + } + const recent = recentPopulations.find((p) => p.id === currentId); + if (recent) { + return { + label: recent.label, + description: recent.type === 'household' ? 'Household' : 'Geography', + populationType: recent.type, + }; + } + return { + label: currentLabel || `Population #${currentId}`, + description: '', + populationType: 'geography', + }; + })(); + + const hasSelection = + type === 'policy' ? !!currentId : type === 'population' ? !!currentId : false; + + const handleEmptyClick = () => { + if (isReadOnly) { + return; + } + if (type === 'policy') { + onBrowseMore?.(); + } else if (type === 'population') { + onBrowseMore?.(); + } + }; + + const handleDeselect = () => { + if (type === 'policy') { + onDeselectPolicy?.(); + } else if (type === 'population') { + onDeselectPopulation?.(); + } + }; + + // Show view/edit gear button for non-current-law policies (in any mode) + const showViewEditPolicyButton = + type === 'policy' && !isCurrentLaw(currentId) && !!currentId && onViewPolicy; + + return ( +
+ {/* Section header */} +
+
+ +
+ + {typeLabels[type]} + + {isInherited && (inherited from baseline)} +
+ + {/* Content area */} + {type === 'dynamics' ? ( +
+ + + + Dynamics coming soon + + +
+ ) : hasSelection ? ( + /* Selected item - full-width card */ +
+
+ {type === 'policy' && + (isCurrentLaw(currentId) ? ( + + ) : ( + + ))} + {type === 'population' && + (selectedPopulationLabel?.populationType === 'household' ? ( + + ) : ( + + ))} +
+
+ + {type === 'policy' ? selectedPolicyLabel?.label : selectedPopulationLabel?.label} + + {(type === 'policy' + ? selectedPolicyLabel?.description + : selectedPopulationLabel?.description) && ( + + {type === 'policy' + ? selectedPolicyLabel?.description + : selectedPopulationLabel?.description} + + )} +
+
+ {/* View/edit policy gear — visible in both view and edit modes */} + {showViewEditPolicyButton && ( + + + + + View/edit policy + + )} + {/* Swap and remove — only in edit mode */} + {!isInherited && !isReadOnly && ( + <> + + + + + + Swap {type === 'population' ? 'household(s)' : type} + + + + + + + Remove + + + )} +
+
+ ) : ( + /* Empty state - clickable area to add ingredient */ +
{ + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleEmptyClick?.(); + } + }} + style={{ + padding: `${spacing.md} ${spacing.lg}`, + borderRadius: spacing.radius.container, + border: `2px dashed ${colorConfig.border}`, + background: colorConfig.bg, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + gap: spacing.md, + cursor: isReadOnly ? 'default' : 'pointer', + transition: 'all 0.15s ease', + opacity: 0.8, + }} + onMouseEnter={(e: React.MouseEvent) => { + e.currentTarget.style.opacity = '1'; + e.currentTarget.style.borderColor = colorConfig.icon; + }} + onMouseLeave={(e: React.MouseEvent) => { + e.currentTarget.style.opacity = '0.8'; + e.currentTarget.style.borderColor = colorConfig.border; + }} + > +
+ +
+
+ + Add {type === 'policy' ? 'policy' : 'population'} + + + Click to browse and select + +
+
+ )} +
+ ); +} diff --git a/app/src/pages/reportBuilder/components/ReportBuilderShell.tsx b/app/src/pages/reportBuilder/components/ReportBuilderShell.tsx new file mode 100644 index 000000000..d10597620 --- /dev/null +++ b/app/src/pages/reportBuilder/components/ReportBuilderShell.tsx @@ -0,0 +1,85 @@ +/** + * ReportBuilderShell - Reusable visual shell for the report builder + * + * Renders the page layout: header + TopBar (with ReportMetaPanel + actions) + SimulationCanvas. + * Accepts all logic via props so different modes (setup, modify) can compose it. + */ +import { IconChevronLeft } from '@tabler/icons-react'; +import { useNavigate } from 'react-router-dom'; +import { Group, Text } from '@/components/ui'; +import { colors } from '@/designTokens'; +import { useCurrentCountry } from '@/hooks/useCurrentCountry'; +import { styles } from '../styles'; +import type { IngredientPickerState, ReportBuilderState, TopBarAction } from '../types'; +import { ReportMetaPanel } from './ReportMetaPanel'; +import type { SimulationBlockProps } from './SimulationBlock'; +import { SimulationBlockFull } from './SimulationBlockFull'; +import { SimulationCanvas } from './SimulationCanvas'; +import { TopBar } from './TopBar'; + +interface ReportBuilderShellProps { + title: string; + actions: TopBarAction[]; + reportState: ReportBuilderState; + setReportState: React.Dispatch>; + pickerState: IngredientPickerState; + setPickerState: React.Dispatch>; + BlockComponent?: React.ComponentType; + isReadOnly?: boolean; + backPath?: string; + backLabel?: string; +} + +export function ReportBuilderShell({ + title, + actions, + reportState, + setReportState, + pickerState, + setPickerState, + BlockComponent = SimulationBlockFull, + isReadOnly, + backPath, + backLabel, +}: ReportBuilderShellProps) { + const navigate = useNavigate(); + const countryId = useCurrentCountry(); + + return ( +
+ {/* Back breadcrumb */} + navigate(backPath || `/${countryId}/reports`)} + > + + + {backLabel ? `Back to ${backLabel}` : 'Back to reports'} + + + +
+

{title}

+
+ + + + + + +
+ ); +} diff --git a/app/src/pages/reportBuilder/components/ReportMetaPanel.tsx b/app/src/pages/reportBuilder/components/ReportMetaPanel.tsx new file mode 100644 index 000000000..09f813765 --- /dev/null +++ b/app/src/pages/reportBuilder/components/ReportMetaPanel.tsx @@ -0,0 +1,251 @@ +/** + * ReportMetaPanel - Segmented breadcrumb for report title and year + * + * Renders as three separate segments (icon, name, year) that flow + * directly into TopBar's flex layout via display: contents. + */ + +import React, { useLayoutEffect, useState } from 'react'; +import { IconCheck, IconFileDescription, IconPencil } from '@tabler/icons-react'; +import { + Button, + Input, + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, + Text, +} from '@/components/ui'; +import { CURRENT_YEAR } from '@/constants'; +import { colors, spacing, typography } from '@/designTokens'; +import { FONT_SIZES } from '../constants'; +import type { ReportBuilderState } from '../types'; + +const SEGMENT_HEIGHT = 38; + +const segmentBase: React.CSSProperties = { + height: SEGMENT_HEIGHT, + borderRadius: spacing.radius.feature, + background: colors.white, + border: `1px solid ${colors.primary[200]}`, + boxShadow: `0 2px 8px ${colors.shadow.light}`, + display: 'flex', + alignItems: 'center', +}; + +const YEAR_OPTIONS = ['2023', '2024', '2025', '2026']; + +interface ReportMetaPanelProps { + reportState: ReportBuilderState; + setReportState: React.Dispatch>; + isReadOnly?: boolean; +} + +export function ReportMetaPanel({ reportState, setReportState, isReadOnly }: ReportMetaPanelProps) { + const [isEditingLabel, setIsEditingLabel] = useState(false); + const [labelInput, setLabelInput] = useState(''); + const [inputWidth, setInputWidth] = useState(null); + const measureRef = React.useRef(null); + + const handleLabelSubmit = () => { + setReportState((prev) => ({ ...prev, label: labelInput || 'Untitled report' })); + setIsEditingLabel(false); + }; + + const defaultReportLabel = 'Untitled report'; + + useLayoutEffect(() => { + if (measureRef.current && isEditingLabel) { + const textToMeasure = labelInput || defaultReportLabel; + measureRef.current.textContent = textToMeasure; + setInputWidth(measureRef.current.offsetWidth); + } + }, [labelInput, isEditingLabel]); + + return ( +
+ {/* Icon segment */} +
+ +
+ + {/* Name segment */} +
{ + if (!isReadOnly && !isEditingLabel) { + setLabelInput(reportState.label || ''); + setIsEditingLabel(true); + } + }} + onKeyDown={(e) => { + if (!isReadOnly && !isEditingLabel && (e.key === 'Enter' || e.key === ' ')) { + e.preventDefault(); + setLabelInput(reportState.label || ''); + setIsEditingLabel(true); + } + }} + > + + Name + + + {isEditingLabel ? ( + <> + + setLabelInput(e.target.value)} + onKeyDown={(e) => e.key === 'Enter' && handleLabelSubmit()} + onBlur={handleLabelSubmit} + placeholder={defaultReportLabel} + autoFocus + className="tw:border-none tw:bg-transparent tw:p-0 tw:h-auto tw:shadow-none tw:focus-visible:ring-0" + style={{ + flex: 1, + minWidth: 0, + width: inputWidth ? inputWidth + 8 : 'auto', + fontFamily: typography.fontFamily.primary, + fontWeight: 600, + fontSize: FONT_SIZES.small, + }} + onClick={(e: React.MouseEvent) => e.stopPropagation()} + /> + + + ) : ( + <> + + {reportState.label || defaultReportLabel} + + {!isReadOnly && ( + + )} + + )} +
+ + {/* Year segment */} +
+ + Year + + +
+
+ ); +} diff --git a/app/src/pages/reportBuilder/components/SimulationBlock.tsx b/app/src/pages/reportBuilder/components/SimulationBlock.tsx new file mode 100644 index 000000000..174c2ffb3 --- /dev/null +++ b/app/src/pages/reportBuilder/components/SimulationBlock.tsx @@ -0,0 +1,190 @@ +/** + * SimulationBlock - A simulation configuration card + */ + +import { IconCheck, IconTrash } from '@tabler/icons-react'; +import { Button, Group, Text, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui'; +import { colors } from '@/designTokens'; +import type { PopulationStateProps, SimulationStateProps } from '@/types/pathwayState'; +import { FONT_SIZES } from '../constants'; +import { styles } from '../styles'; +import type { RecentPopulation, SavedPolicy } from '../types'; +import { EditableLabel } from './EditableLabel'; +import { IngredientSection } from './IngredientSection'; + +export interface SimulationBlockProps { + simulation: SimulationStateProps; + index: number; + countryId: 'us' | 'uk'; + onLabelChange: (label: string) => void; + onQuickSelectPolicy: () => void; + onSelectSavedPolicy: (id: string, label: string, paramCount: number) => void; + onQuickSelectPopulation: (populationType: 'nationwide') => void; + onSelectRecentPopulation: (population: PopulationStateProps) => void; + onDeselectPolicy: () => void; + onDeselectPopulation: () => void; + onEditPolicy: () => void; + onViewPolicy: () => void; + onCreateCustomPolicy: () => void; + onBrowseMorePolicies: () => void; + onBrowseMorePopulations: () => void; + onRemove?: () => void; + canRemove: boolean; + isRequired?: boolean; + populationInherited?: boolean; + inheritedPopulation?: PopulationStateProps | null; + savedPolicies: SavedPolicy[]; + recentPopulations: RecentPopulation[]; + isReadOnly?: boolean; +} + +export function SimulationBlock({ + simulation, + index, + countryId, + onLabelChange, + onQuickSelectPolicy, + onSelectSavedPolicy, + onQuickSelectPopulation, + onSelectRecentPopulation, + onEditPolicy, + onViewPolicy: _onViewPolicy, + onDeselectPolicy, + onDeselectPopulation, + onBrowseMorePolicies, + onBrowseMorePopulations, + onRemove, + canRemove, + isRequired, + populationInherited, + inheritedPopulation, + savedPolicies, + recentPopulations, +}: SimulationBlockProps) { + const isPolicyConfigured = !!simulation.policy.id; + const effectivePopulation = + populationInherited && inheritedPopulation ? inheritedPopulation : simulation.population; + const isPopulationConfigured = !!( + effectivePopulation?.household?.id || effectivePopulation?.geography?.id + ); + const isFullyConfigured = isPolicyConfigured && isPopulationConfigured; + + const defaultLabel = index === 0 ? 'Baseline simulation' : 'Reform simulation'; + + const currentPolicyId = simulation.policy.id; + const currentPopulationId = + effectivePopulation?.household?.id || effectivePopulation?.geography?.id; + + // Determine inherited population type for display + const inheritedPopulationType = + populationInherited && inheritedPopulation + ? inheritedPopulation.household?.id + ? 'household' + : inheritedPopulation.geography?.id + ? inheritedPopulation.geography.scope === 'subnational' + ? 'subnational' + : 'nationwide' + : null + : null; + + const inheritedPopulationLabel = + populationInherited && inheritedPopulation + ? inheritedPopulation.label || inheritedPopulation.geography?.name || undefined + : undefined; + + return ( +
+ {/* Status indicator */} +
+ + {/* Header */} +
+ + + + {isRequired && ( + + Required + + )} + {isFullyConfigured && ( + + +
+ +
+ + Fully configured + + )} + {canRemove && ( + + )} + +
+ + {/* Panels - direct children for subgrid alignment */} + {}} + onBrowseMore={onBrowseMorePolicies} + savedPolicies={savedPolicies} + /> + + {}} + onBrowseMore={onBrowseMorePopulations} + isInherited={populationInherited} + inheritedPopulationType={inheritedPopulationType} + inheritedPopulationLabel={inheritedPopulationLabel} + recentPopulations={recentPopulations} + /> +
+ ); +} diff --git a/app/src/pages/reportBuilder/components/SimulationBlockFull.tsx b/app/src/pages/reportBuilder/components/SimulationBlockFull.tsx new file mode 100644 index 000000000..3e66fbb2b --- /dev/null +++ b/app/src/pages/reportBuilder/components/SimulationBlockFull.tsx @@ -0,0 +1,179 @@ +/** + * SimulationBlockFull - Simulation card with full-width ingredient sections + * + * Same structure as SimulationBlock but uses IngredientSectionFull + * for a layout where each ingredient fills its entire section. + */ + +import { IconCheck, IconTrash } from '@tabler/icons-react'; +import { Button, Group, Text, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui'; +import { colors } from '@/designTokens'; +import { FONT_SIZES } from '../constants'; +import { styles } from '../styles'; +import { EditableLabel } from './EditableLabel'; +import { IngredientSectionFull } from './IngredientSectionFull'; +import type { SimulationBlockProps } from './SimulationBlock'; + +export function SimulationBlockFull({ + simulation, + index, + countryId, + onLabelChange, + onQuickSelectPolicy, + onSelectSavedPolicy, + onQuickSelectPopulation, + onSelectRecentPopulation, + onEditPolicy, + onViewPolicy, + onDeselectPolicy, + onDeselectPopulation, + onBrowseMorePolicies, + onBrowseMorePopulations, + onRemove, + canRemove, + isRequired, + populationInherited, + inheritedPopulation, + savedPolicies, + recentPopulations, + isReadOnly, +}: SimulationBlockProps) { + const isPolicyConfigured = !!simulation.policy.id; + const effectivePopulation = + populationInherited && inheritedPopulation ? inheritedPopulation : simulation.population; + const isPopulationConfigured = !!( + effectivePopulation?.household?.id || effectivePopulation?.geography?.id + ); + const isFullyConfigured = isPolicyConfigured && isPopulationConfigured; + + const defaultLabel = index === 0 ? 'Baseline simulation' : 'Reform simulation'; + + const currentPolicyId = simulation.policy.id; + const currentPopulationId = + effectivePopulation?.household?.id || effectivePopulation?.geography?.id; + const populationLabel = + effectivePopulation?.label || effectivePopulation?.geography?.name || undefined; + + const inheritedPopulationType = + populationInherited && inheritedPopulation + ? inheritedPopulation.household?.id + ? 'household' + : inheritedPopulation.geography?.id + ? inheritedPopulation.geography.scope === 'subnational' + ? 'subnational' + : 'nationwide' + : null + : null; + + const inheritedPopulationLabel = + populationInherited && inheritedPopulation + ? inheritedPopulation.label || inheritedPopulation.geography?.name || undefined + : undefined; + + return ( +
+ {/* Status indicator */} +
+ + {/* Header */} +
+ {isReadOnly ? ( + + {simulation.label || defaultLabel} + + ) : ( + + )} + + + {isRequired && ( + + Required + + )} + {isFullyConfigured && ( + + +
+ +
+ + Fully configured + + )} + {canRemove && !isReadOnly && ( + + )} + +
+ + {/* Full-width ingredient sections */} + {}} + onBrowseMore={onBrowseMorePolicies} + savedPolicies={savedPolicies} + isReadOnly={isReadOnly} + /> + + {}} + onBrowseMore={onBrowseMorePopulations} + isInherited={populationInherited} + inheritedPopulationType={inheritedPopulationType} + inheritedPopulationLabel={inheritedPopulationLabel} + recentPopulations={recentPopulations} + isReadOnly={isReadOnly} + /> +
+ ); +} diff --git a/app/src/pages/reportBuilder/components/SimulationCanvas.tsx b/app/src/pages/reportBuilder/components/SimulationCanvas.tsx new file mode 100644 index 000000000..58a88971c --- /dev/null +++ b/app/src/pages/reportBuilder/components/SimulationCanvas.tsx @@ -0,0 +1,147 @@ +/** + * SimulationCanvas - Renders simulation blocks and modals + * + * This is a thin render layer. All state management, data fetching, + * and callback logic lives in useSimulationCanvas. + */ + +import { useSimulationCanvas } from '../hooks/useSimulationCanvas'; +import { + IngredientPickerModal, + PolicyBrowseModal, + PolicyCreationModal, + PopulationBrowseModal, +} from '../modals'; +import { styles } from '../styles'; +import type { IngredientPickerState, ReportBuilderState } from '../types'; +import { AddSimulationCard } from './AddSimulationCard'; +import { SimulationBlock, type SimulationBlockProps } from './SimulationBlock'; +import { SimulationCanvasSkeleton } from './SimulationCanvasSkeleton'; + +interface SimulationCanvasProps { + reportState: ReportBuilderState; + setReportState: React.Dispatch>; + pickerState: IngredientPickerState; + setPickerState: React.Dispatch>; + BlockComponent?: React.ComponentType; + isReadOnly?: boolean; +} + +export function SimulationCanvas({ + reportState, + setReportState, + pickerState, + setPickerState, + BlockComponent = SimulationBlock, + isReadOnly, +}: SimulationCanvasProps) { + const canvas = useSimulationCanvas({ reportState, setReportState, pickerState, setPickerState }); + + if (canvas.isInitialLoading) { + return ; + } + + return ( + <> +
+
+
+ canvas.handleSimulationLabelChange(0, label)} + onQuickSelectPolicy={() => canvas.handleQuickSelectPolicy(0)} + onSelectSavedPolicy={(id, label, paramCount) => + canvas.handleSelectSavedPolicy(0, id, label, paramCount) + } + onQuickSelectPopulation={() => canvas.handleQuickSelectPopulation(0, 'nationwide')} + onSelectRecentPopulation={(pop) => canvas.handleSelectRecentPopulation(0, pop)} + onDeselectPolicy={() => canvas.handleDeselectPolicy(0)} + onDeselectPopulation={() => canvas.handleDeselectPopulation(0)} + onEditPolicy={() => canvas.handleEditPolicy(0)} + onViewPolicy={() => canvas.handleViewPolicy(0)} + onCreateCustomPolicy={() => canvas.handleCreateCustom(0, 'policy')} + onBrowseMorePolicies={() => canvas.handleBrowseMorePolicies(0)} + onBrowseMorePopulations={() => canvas.handleBrowseMorePopulations(0)} + canRemove={false} + savedPolicies={canvas.savedPolicies} + recentPopulations={canvas.recentPopulations} + isReadOnly={isReadOnly} + /> + + {reportState.simulations.length > 1 ? ( + canvas.handleSimulationLabelChange(1, label)} + onQuickSelectPolicy={() => canvas.handleQuickSelectPolicy(1)} + onSelectSavedPolicy={(id, label, paramCount) => + canvas.handleSelectSavedPolicy(1, id, label, paramCount) + } + onQuickSelectPopulation={() => canvas.handleQuickSelectPopulation(1, 'nationwide')} + onSelectRecentPopulation={(pop) => canvas.handleSelectRecentPopulation(1, pop)} + onDeselectPolicy={() => canvas.handleDeselectPolicy(1)} + onDeselectPopulation={() => canvas.handleDeselectPopulation(1)} + onEditPolicy={() => canvas.handleEditPolicy(1)} + onViewPolicy={() => canvas.handleViewPolicy(1)} + onCreateCustomPolicy={() => canvas.handleCreateCustom(1, 'policy')} + onBrowseMorePolicies={() => canvas.handleBrowseMorePolicies(1)} + onBrowseMorePopulations={() => canvas.handleBrowseMorePopulations(1)} + onRemove={() => canvas.handleRemoveSimulation(1)} + canRemove={!canvas.isGeographySelected} + isRequired={canvas.isGeographySelected} + populationInherited + inheritedPopulation={reportState.simulations[0].population} + savedPolicies={canvas.savedPolicies} + recentPopulations={canvas.recentPopulations} + isReadOnly={isReadOnly} + /> + ) : ( + + )} +
+
+ + + canvas.handleCreateCustom( + canvas.pickerState.simulationIndex, + canvas.pickerState.ingredientType + ) + } + /> + + + + + canvas.handleCreateCustom(canvas.populationBrowseState.simulationIndex, 'population') + } + /> + + + canvas.handlePolicyCreated(canvas.policyCreationState.simulationIndex, policy) + } + simulationIndex={canvas.policyCreationState.simulationIndex} + initialPolicy={canvas.policyCreationState.initialPolicy} + initialEditorMode={canvas.policyCreationState.initialEditorMode} + /> + + ); +} diff --git a/app/src/pages/reportBuilder/components/SimulationCanvasSkeleton.tsx b/app/src/pages/reportBuilder/components/SimulationCanvasSkeleton.tsx new file mode 100644 index 000000000..2fa91f21c --- /dev/null +++ b/app/src/pages/reportBuilder/components/SimulationCanvasSkeleton.tsx @@ -0,0 +1,105 @@ +/** + * SimulationCanvasSkeleton - Loading placeholder for the simulation canvas + */ + +import { Group, Skeleton } from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { styles } from '../styles'; + +export function SimulationCanvasSkeleton() { + return ( +
+
+
+ {/* Simulation block skeleton */} +
+ + + + + +
+ + + + + + + + + +
+ +
+ + + + + + + + + +
+ +
+ + + + + +
+
+ + {/* Add simulation card skeleton */} +
+ + + +
+
+
+ ); +} diff --git a/app/src/pages/reportBuilder/components/TopBar.tsx b/app/src/pages/reportBuilder/components/TopBar.tsx new file mode 100644 index 000000000..8c6f93176 --- /dev/null +++ b/app/src/pages/reportBuilder/components/TopBar.tsx @@ -0,0 +1,127 @@ +/** + * TopBar - Composable top bar with flexible action buttons + * + * Renders children (typically ReportMetaPanel segments) on the left and + * action buttons on the right. All elements share a consistent 44px height. + */ + +import React from 'react'; +import { Spinner } from '@/components/ui'; +import { colors, spacing, typography } from '@/designTokens'; +import { FONT_SIZES } from '../constants'; +import type { TopBarAction } from '../types'; + +interface TopBarProps { + children: React.ReactNode; + actions: TopBarAction[]; +} + +function getButtonStyles(action: TopBarAction): React.CSSProperties { + const enabled = !action.disabled && !action.loading; + + if (action.variant === 'primary') { + return { + background: enabled ? colors.primary[500] : colors.gray[200], + color: enabled ? 'white' : colors.gray[500], + border: 'none', + boxShadow: 'none', + cursor: enabled ? 'pointer' : 'not-allowed', + opacity: action.loading ? 0.7 : 1, + }; + } + + return { + background: colors.secondary[100], + color: colors.secondary[700], + border: `1px solid ${colors.secondary[200]}`, + boxShadow: 'none', + cursor: enabled ? 'pointer' : 'not-allowed', + opacity: action.disabled ? 0.5 : 1, + }; +} + +function handleMouseEnter(e: React.MouseEvent, action: TopBarAction) { + const enabled = !action.disabled && !action.loading; + if (!enabled) { + return; + } + + if (action.variant === 'primary') { + e.currentTarget.style.background = colors.primary[600]; + } else { + e.currentTarget.style.background = colors.secondary[200]; + } +} + +function handleMouseLeave(e: React.MouseEvent, action: TopBarAction) { + if (action.variant === 'primary') { + const enabled = !action.disabled && !action.loading; + e.currentTarget.style.background = enabled ? colors.primary[500] : colors.gray[200]; + } else { + e.currentTarget.style.background = colors.secondary[100]; + } +} + +export function TopBar({ children, actions }: TopBarProps) { + return ( +
+
+ {children} + + {actions.length > 0 && ( +
+ {actions.map((action) => ( + + ))} +
+ )} +
+
+ ); +} diff --git a/app/src/pages/reportBuilder/components/chips/BrowseMoreChip.tsx b/app/src/pages/reportBuilder/components/chips/BrowseMoreChip.tsx new file mode 100644 index 000000000..b282c49ea --- /dev/null +++ b/app/src/pages/reportBuilder/components/chips/BrowseMoreChip.tsx @@ -0,0 +1,104 @@ +import { useState } from 'react'; +import { IconSearch } from '@tabler/icons-react'; +import { Stack, Text } from '@/components/ui'; +import { colors } from '@/designTokens'; +import { FONT_SIZES } from '../../constants'; +import { chipStyles } from '../../styles'; +import { BrowseMoreChipProps } from '../../types'; + +export function BrowseMoreChip({ + label, + description, + onClick, + variant, + colorConfig, +}: BrowseMoreChipProps) { + const [isHovered, setIsHovered] = useState(false); + + if (variant === 'square') { + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onClick={onClick} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onClick(); + } + }} + > + + + {label} + + {description && ( + + {description} + + )} +
+ ); + } + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onClick={onClick} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onClick(); + } + }} + > +
+ +
+ + + {label} + + {description && ( + + {description} + + )} + +
+ ); +} diff --git a/app/src/pages/reportBuilder/components/chips/CreateCustomChip.tsx b/app/src/pages/reportBuilder/components/chips/CreateCustomChip.tsx new file mode 100644 index 000000000..e0e9eff13 --- /dev/null +++ b/app/src/pages/reportBuilder/components/chips/CreateCustomChip.tsx @@ -0,0 +1,80 @@ +import { useState } from 'react'; +import { IconPlus } from '@tabler/icons-react'; +import { Text } from '@/components/ui'; +import { colors } from '@/designTokens'; +import { FONT_SIZES } from '../../constants'; +import { chipStyles } from '../../styles'; +import { CreateCustomChipProps } from '../../types'; + +export function CreateCustomChip({ label, onClick, variant, colorConfig }: CreateCustomChipProps) { + const [isHovered, setIsHovered] = useState(false); + + if (variant === 'square') { + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onClick={onClick} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onClick(); + } + }} + > + + + {label} + +
+ ); + } + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onClick={onClick} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onClick(); + } + }} + > +
+ +
+ + {label} + +
+ ); +} diff --git a/app/src/pages/reportBuilder/components/chips/OptionChipRow.tsx b/app/src/pages/reportBuilder/components/chips/OptionChipRow.tsx new file mode 100644 index 000000000..669dc7feb --- /dev/null +++ b/app/src/pages/reportBuilder/components/chips/OptionChipRow.tsx @@ -0,0 +1,64 @@ +import { useState } from 'react'; +import { IconCheck } from '@tabler/icons-react'; +import { Stack, Text } from '@/components/ui'; +import { colors } from '@/designTokens'; +import { FONT_SIZES } from '../../constants'; +import { chipStyles } from '../../styles'; +import { OptionChipRowProps } from '../../types'; + +export function OptionChipRow({ + icon, + label, + description, + isSelected, + onClick, + colorConfig, +}: OptionChipRowProps) { + const [isHovered, setIsHovered] = useState(false); + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onClick={onClick} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onClick(); + } + }} + > +
+ {icon} +
+ + + {label} + + {description && ( + + {description} + + )} + + {isSelected && } +
+ ); +} diff --git a/app/src/pages/reportBuilder/components/chips/OptionChipSquare.tsx b/app/src/pages/reportBuilder/components/chips/OptionChipSquare.tsx new file mode 100644 index 000000000..b2e1b6ea3 --- /dev/null +++ b/app/src/pages/reportBuilder/components/chips/OptionChipSquare.tsx @@ -0,0 +1,73 @@ +import { useState } from 'react'; +import { Text } from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { FONT_SIZES } from '../../constants'; +import { chipStyles } from '../../styles'; +import { OptionChipSquareProps } from '../../types'; + +export function OptionChipSquare({ + icon, + label, + description, + isSelected, + onClick, + colorConfig, +}: OptionChipSquareProps) { + const [isHovered, setIsHovered] = useState(false); + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onClick={onClick} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onClick(); + } + }} + > +
+ {icon} +
+ + {label} + + {description && ( + + {description} + + )} +
+ ); +} diff --git a/app/src/pages/reportBuilder/components/chips/index.ts b/app/src/pages/reportBuilder/components/chips/index.ts new file mode 100644 index 000000000..ca2064248 --- /dev/null +++ b/app/src/pages/reportBuilder/components/chips/index.ts @@ -0,0 +1,4 @@ +export { OptionChipSquare } from './OptionChipSquare'; +export { OptionChipRow } from './OptionChipRow'; +export { CreateCustomChip } from './CreateCustomChip'; +export { BrowseMoreChip } from './BrowseMoreChip'; diff --git a/app/src/pages/reportBuilder/components/index.ts b/app/src/pages/reportBuilder/components/index.ts new file mode 100644 index 000000000..5804d40b4 --- /dev/null +++ b/app/src/pages/reportBuilder/components/index.ts @@ -0,0 +1,16 @@ +// Chip components +export { OptionChipSquare, OptionChipRow, CreateCustomChip, BrowseMoreChip } from './chips'; + +// Shared components +export { ProgressDot, CountryMapIcon, CreationStatusHeader } from './shared'; + +// Page components +export { IngredientSection } from './IngredientSection'; +export { IngredientSectionFull } from './IngredientSectionFull'; +export { SimulationBlock } from './SimulationBlock'; +export { SimulationBlockFull } from './SimulationBlockFull'; +export { AddSimulationCard } from './AddSimulationCard'; +export { ReportMetaPanel } from './ReportMetaPanel'; +export { SimulationCanvas } from './SimulationCanvas'; +export { TopBar } from './TopBar'; +export { ReportBuilderShell } from './ReportBuilderShell'; diff --git a/app/src/pages/reportBuilder/components/shared/CountryMapIcon.tsx b/app/src/pages/reportBuilder/components/shared/CountryMapIcon.tsx new file mode 100644 index 000000000..7f849c165 --- /dev/null +++ b/app/src/pages/reportBuilder/components/shared/CountryMapIcon.tsx @@ -0,0 +1,14 @@ +import { UKOutlineIcon, USOutlineIcon } from '@/components/icons/CountryOutlineIcons'; + +interface CountryMapIconProps { + countryId: string; + size: number; + color: string; +} + +export function CountryMapIcon({ countryId, size, color }: CountryMapIconProps) { + if (countryId === 'uk') { + return ; + } + return ; +} diff --git a/app/src/pages/reportBuilder/components/shared/CreationStatusHeader.tsx b/app/src/pages/reportBuilder/components/shared/CreationStatusHeader.tsx new file mode 100644 index 000000000..440b8d915 --- /dev/null +++ b/app/src/pages/reportBuilder/components/shared/CreationStatusHeader.tsx @@ -0,0 +1,146 @@ +import { IconPencil } from '@tabler/icons-react'; +import { Button, Group, Input, Text } from '@/components/ui'; +import { colors, spacing, typography } from '@/designTokens'; +import { FONT_SIZES } from '../../constants'; +import { CreationStatusHeaderProps } from '../../types'; + +/** + * A reusable glassmorphic status header for creation modes. + * Used in both PolicyBrowseModal and PopulationBrowseModal when in creation mode. + */ +export function CreationStatusHeader({ + colorConfig, + icon, + label, + placeholder, + isEditingLabel, + onLabelChange, + onStartEditing, + onStopEditing, + statusText, + hasChanges, + children, +}: CreationStatusHeaderProps) { + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' || e.key === 'Escape') { + onStopEditing(); + } + }; + + return ( +
+ + {/* Left side: Icon and editable name */} + + {/* Icon container */} +
+ {icon} +
+ + {/* Editable name */} +
+ {isEditingLabel ? ( + onLabelChange(e.currentTarget.value)} + onBlur={onStopEditing} + onKeyDown={handleKeyDown} + autoFocus + placeholder={placeholder.replace('Click to ', 'Enter ')} + className="tw:border-none tw:bg-transparent tw:p-0 tw:h-auto tw:shadow-none tw:focus-visible:ring-0" + style={{ + width: 250, + fontFamily: typography.fontFamily.primary, + fontWeight: 600, + fontSize: FONT_SIZES.normal, + }} + /> + ) : ( + <> + + {label || placeholder} + + + + )} +
+ + + {/* Right side: Status indicator */} + + {/* Status with indicator dot */} + + {hasChanges ? ( + <> +
+ + {statusText} + + + ) : ( + + {statusText} + + )} + + + {/* Optional children for additional content */} + {children} + + +
+ ); +} diff --git a/app/src/pages/reportBuilder/components/shared/ProgressDot.tsx b/app/src/pages/reportBuilder/components/shared/ProgressDot.tsx new file mode 100644 index 000000000..5912699fa --- /dev/null +++ b/app/src/pages/reportBuilder/components/shared/ProgressDot.tsx @@ -0,0 +1,21 @@ +import { colors } from '@/designTokens'; + +interface ProgressDotProps { + filled: boolean; + pulsing?: boolean; +} + +export function ProgressDot({ filled, pulsing }: ProgressDotProps) { + return ( +
+ ); +} diff --git a/app/src/pages/reportBuilder/components/shared/index.ts b/app/src/pages/reportBuilder/components/shared/index.ts new file mode 100644 index 000000000..5d902db6b --- /dev/null +++ b/app/src/pages/reportBuilder/components/shared/index.ts @@ -0,0 +1,3 @@ +export { ProgressDot } from './ProgressDot'; +export { CountryMapIcon } from './CountryMapIcon'; +export { CreationStatusHeader } from './CreationStatusHeader'; diff --git a/app/src/pages/reportBuilder/constants.ts b/app/src/pages/reportBuilder/constants.ts new file mode 100644 index 000000000..a7d8a824e --- /dev/null +++ b/app/src/pages/reportBuilder/constants.ts @@ -0,0 +1,111 @@ +/** + * Constants for ReportBuilder components + */ +import { colors, typography } from '@/designTokens'; +import { IngredientColorConfig } from './types'; + +// ============================================================================ +// FONT SIZES +// ============================================================================ + +export const FONT_SIZES = { + title: typography.fontSize['3xl'], // 28px + normal: typography.fontSize.base, // 16px + small: typography.fontSize.sm, // 14px + tiny: typography.fontSize.xs, // 12px +}; + +// ============================================================================ +// INGREDIENT COLORS +// ============================================================================ + +export const INGREDIENT_COLORS: Record< + 'policy' | 'population' | 'dynamics', + IngredientColorConfig +> = { + policy: { + icon: colors.primary[600], + bg: colors.primary[50], + border: colors.primary[200], + accent: colors.primary[500], + }, + population: { + icon: colors.secondary[600], + bg: colors.secondary[50], + border: colors.secondary[200], + accent: colors.secondary[500], + }, + dynamics: { + // Muted gray-green for dynamics (distinct from teal and slate) + icon: colors.gray[500], + bg: colors.gray[50], + border: colors.gray[200], + accent: colors.gray[400], + }, +}; + +// ============================================================================ +// COUNTRY CONFIGURATION +// ============================================================================ + +export const COUNTRY_CONFIG = { + us: { + nationwideTitle: 'United States', + nationwideSubtitle: 'Nationwide', + nationwideLabel: 'United States', + geographyId: 'us', + }, + uk: { + nationwideTitle: 'United Kingdom', + nationwideSubtitle: 'UK-wide', + nationwideLabel: 'United Kingdom', + geographyId: 'uk', + }, +} as const; + +// ============================================================================ +// SAMPLE POPULATIONS +// ============================================================================ + +export const getSamplePopulations = (countryId: 'us' | 'uk') => { + const config = COUNTRY_CONFIG[countryId] || COUNTRY_CONFIG.us; + return { + household: { + label: 'Smith family (4 members)', + type: 'household' as const, + household: { + id: 'sample-household', + countryId, + householdData: { people: { person1: { age: { 2025: 40 } } } }, + }, + geography: null, + }, + nationwide: { + label: config.nationwideLabel, + type: 'geography' as const, + household: null, + geography: { + id: config.geographyId, + countryId, + scope: 'national' as const, + geographyId: config.geographyId, + name: config.nationwideLabel, + }, + }, + }; +}; + +// Default sample populations (for backwards compatibility) +export const SAMPLE_POPULATIONS = getSamplePopulations('us'); + +// ============================================================================ +// MODAL CONFIGURATION +// ============================================================================ + +export const BROWSE_MODAL_CONFIG = { + width: '90vw', + maxWidth: '1400px', + height: '92vh', + maxHeight: '1300px', + sidebarWidth: 220, +}; diff --git a/app/src/pages/reportBuilder/currentLaw.ts b/app/src/pages/reportBuilder/currentLaw.ts new file mode 100644 index 000000000..6df356ce2 --- /dev/null +++ b/app/src/pages/reportBuilder/currentLaw.ts @@ -0,0 +1,21 @@ +import type { PolicyStateProps } from '@/types/pathwayState'; + +export const CURRENT_LAW_ID = 'current-law' as const; + +export const CURRENT_LAW_LABEL = 'Current law'; + +export function isCurrentLaw(policyId: string | undefined): boolean { + return policyId === CURRENT_LAW_ID; +} + +export function createCurrentLawPolicy(): PolicyStateProps { + return { id: CURRENT_LAW_ID, label: CURRENT_LAW_LABEL, parameters: [] }; +} + +export function toApiPolicyId(localId: string, currentLawId: number): string { + return localId === CURRENT_LAW_ID ? currentLawId.toString() : localId; +} + +export function fromApiPolicyId(apiId: string, currentLawId: number): string { + return apiId === currentLawId.toString() ? CURRENT_LAW_ID : apiId; +} diff --git a/app/src/pages/reportBuilder/hooks/useModifyReportSubmission.ts b/app/src/pages/reportBuilder/hooks/useModifyReportSubmission.ts new file mode 100644 index 000000000..3b427da67 --- /dev/null +++ b/app/src/pages/reportBuilder/hooks/useModifyReportSubmission.ts @@ -0,0 +1,270 @@ +/** + * useModifyReportSubmission - Submission logic for the modify report page + * + * Supports two modes: + * - "Save as new report": Creates new base ingredients + new UserReport association + * - "Replace existing report": Creates new base ingredients + updates existing UserReport + * to point to the new base report + * + * In both cases, base ingredients (Simulation, Report) are always freshly created + * via the API — only the user association layer differs. + */ +import { useCallback, useState } from 'react'; +import { useQueryClient } from '@tanstack/react-query'; +import { useSelector } from 'react-redux'; +import { ReportAdapter, SimulationAdapter } from '@/adapters'; +import { createReport as createBaseReport, createReportAndAssociateWithUser } from '@/api/report'; +import { createSimulation } from '@/api/simulation'; +import { MOCK_USER_ID } from '@/constants'; +import { useCalcOrchestratorManager } from '@/contexts/CalcOrchestratorContext'; +import { useUpdateReportAssociation } from '@/hooks/useUserReportAssociations'; +import { reportAssociationKeys, reportKeys } from '@/libs/queryKeys'; +import { RootState } from '@/store'; +import { Report } from '@/types/ingredients/Report'; +import { Simulation } from '@/types/ingredients/Simulation'; +import { toApiPolicyId } from '../currentLaw'; +import { ReportBuilderState } from '../types'; + +interface UseModifyReportSubmissionArgs { + reportState: ReportBuilderState; + countryId: 'us' | 'uk'; + existingUserReportId: string; + onSuccess: (userReportId: string) => void; +} + +interface UseModifyReportSubmissionReturn { + handleSaveAsNew: (label: string) => Promise; + handleReplace: () => Promise; + isSavingNew: boolean; + isReplacing: boolean; +} + +export function useModifyReportSubmission({ + reportState, + countryId, + existingUserReportId, + onSuccess, +}: UseModifyReportSubmissionArgs): UseModifyReportSubmissionReturn { + const currentLawId = useSelector((state: RootState) => state.metadata.currentLawId); + const manager = useCalcOrchestratorManager(); + const updateReportAssociation = useUpdateReportAssociation(); + const queryClient = useQueryClient(); + const [isSavingNew, setIsSavingNew] = useState(false); + const [isReplacing, setIsReplacing] = useState(false); + + /** + * Shared logic: create simulations via API and build the report payload. + * Returns the created simulation IDs, domain-model simulations, and report payload. + */ + const createSimulationsAndReport = useCallback(async () => { + const simulationIds: string[] = []; + const simulations: (Simulation | null)[] = []; + + for (const simState of reportState.simulations) { + const policyId = simState.policy?.id + ? toApiPolicyId(simState.policy.id, currentLawId) + : undefined; + + if (!policyId) { + console.error('[useModifyReportSubmission] Simulation missing policy ID'); + continue; + } + + let populationId: string | undefined; + let populationType: 'household' | 'geography' | undefined; + + if (simState.population?.household?.id) { + populationId = simState.population.household.id; + populationType = 'household'; + } else if (simState.population?.geography?.geographyId) { + populationId = simState.population.geography.geographyId; + populationType = 'geography'; + } + + if (!populationId || !populationType) { + console.error('[useModifyReportSubmission] Simulation missing population'); + continue; + } + + const payload = SimulationAdapter.toCreationPayload({ + populationId, + policyId, + populationType, + }); + const result = await createSimulation(countryId, payload); + const simulationId = result.result.simulation_id; + simulationIds.push(simulationId); + + simulations.push({ + id: simulationId, + countryId, + apiVersion: undefined, + policyId, + populationId, + populationType, + label: simState.label, + isCreated: true, + output: null, + status: 'pending', + }); + } + + if (simulationIds.length === 0) { + throw new Error('No simulations created'); + } + + const reportPayload = ReportAdapter.toCreationPayload({ + countryId, + year: reportState.year, + simulationIds, + apiVersion: null, + } as Report); + + return { simulationIds, simulations, reportPayload }; + }, [reportState, countryId, currentLawId]); + + /** + * Shared logic: start calculation after a report is created. + * Mirrors the logic in useCreateReport.onSuccess. + */ + const startCalculation = useCallback( + async (report: Report, simulations: (Simulation | null)[]) => { + const simulation1 = simulations[0]; + if (!simulation1) { + return; + } + + const isHouseholdReport = simulation1.populationType === 'household'; + + if (isHouseholdReport) { + const allSims = simulations.filter((s): s is Simulation => s !== null && s?.id != null); + for (const sim of allSims) { + manager + .startCalculation({ + calcId: sim.id!, + targetType: 'simulation', + countryId: report.countryId, + year: report.year, + simulations: { simulation1: sim, simulation2: null }, + populations: { + household1: reportState.simulations[0]?.population?.household || null, + household2: null, + geography1: null, + geography2: null, + }, + }) + .catch((err) => { + console.error( + `[useModifyReportSubmission] Calculation failed for sim ${sim.id}:`, + err + ); + }); + } + } else { + await manager.startCalculation({ + calcId: String(report.id), + targetType: 'report', + countryId: report.countryId, + year: report.year, + simulations: { + simulation1, + simulation2: simulations[1] || null, + }, + populations: { + household1: null, + household2: null, + geography1: reportState.simulations[0]?.population?.geography || null, + geography2: null, + }, + }); + } + }, + [manager, reportState] + ); + + /** + * Save as new report: create new base report + new UserReport association. + * Accepts a label for the new report. + */ + const handleSaveAsNew = useCallback( + async (label: string) => { + if (isSavingNew || isReplacing) { + return; + } + setIsSavingNew(true); + + try { + const { simulations, reportPayload } = await createSimulationsAndReport(); + + const result = await createReportAndAssociateWithUser({ + countryId, + payload: reportPayload, + userId: MOCK_USER_ID, + label: label || undefined, + }); + + queryClient.invalidateQueries({ queryKey: reportKeys.all }); + queryClient.invalidateQueries({ queryKey: reportAssociationKeys.all }); + + await startCalculation(result.report, simulations); + onSuccess(result.userReport.id); + } catch (error) { + console.error('[useModifyReportSubmission] Save as new failed:', error); + setIsSavingNew(false); + } + }, + [ + isSavingNew, + isReplacing, + createSimulationsAndReport, + countryId, + queryClient, + startCalculation, + onSuccess, + ] + ); + + /** + * Replace existing report: create new base report, then update the + * existing UserReport association to point to the new base report ID. + */ + const handleReplace = useCallback(async () => { + if (isSavingNew || isReplacing) { + return; + } + setIsReplacing(true); + + try { + const { simulations, reportPayload } = await createSimulationsAndReport(); + + const reportMetadata = await createBaseReport(countryId, reportPayload); + const report = ReportAdapter.fromMetadata(reportMetadata); + + await updateReportAssociation.mutateAsync({ + userReportId: existingUserReportId, + updates: { reportId: String(report.id) }, + }); + + queryClient.invalidateQueries({ queryKey: reportKeys.all }); + queryClient.invalidateQueries({ queryKey: reportAssociationKeys.all }); + + await startCalculation(report, simulations); + onSuccess(existingUserReportId); + } catch (error) { + console.error('[useModifyReportSubmission] Replace failed:', error); + setIsReplacing(false); + } + }, [ + isSavingNew, + isReplacing, + createSimulationsAndReport, + countryId, + existingUserReportId, + updateReportAssociation, + queryClient, + startCalculation, + onSuccess, + ]); + + return { handleSaveAsNew, handleReplace, isSavingNew, isReplacing }; +} diff --git a/app/src/pages/reportBuilder/hooks/useReportBuilderState.ts b/app/src/pages/reportBuilder/hooks/useReportBuilderState.ts new file mode 100644 index 000000000..72af9e55d --- /dev/null +++ b/app/src/pages/reportBuilder/hooks/useReportBuilderState.ts @@ -0,0 +1,72 @@ +import { useEffect, useRef, useState } from 'react'; +import { useSelector } from 'react-redux'; +import { useUserReportById } from '@/hooks/useUserReports'; +import { RootState } from '@/store'; +import type { ReportBuilderState } from '../types'; +import { hydrateReportBuilderState } from '../utils/hydrateReportBuilderState'; + +interface UseReportBuilderStateReturn { + reportState: ReportBuilderState | null; + setReportState: React.Dispatch>; + originalState: ReportBuilderState | null; + isLoading: boolean; + error: Error | null; +} + +export function useReportBuilderState(userReportId: string): UseReportBuilderStateReturn { + const currentLawId = useSelector((state: RootState) => state.metadata.currentLawId); + const data = useUserReportById(userReportId); + + const [reportState, setReportState] = useState(null); + const originalStateRef = useRef(null); + + useEffect(() => { + if ( + !data.isLoading && + !data.error && + data.userReport && + data.report && + data.simulations.length > 0 && + reportState === null + ) { + const hydrated = hydrateReportBuilderState({ + userReport: data.userReport, + report: data.report, + simulations: data.simulations, + policies: data.policies, + households: data.households, + geographies: data.geographies, + userSimulations: data.userSimulations, + userPolicies: data.userPolicies, + userHouseholds: data.userHouseholds, + userGeographies: data.userGeographies, + currentLawId, + }); + setReportState(hydrated); + originalStateRef.current = hydrated; + } + }, [ + data.isLoading, + data.error, + data.userReport, + data.report, + data.simulations, + data.policies, + data.households, + data.geographies, + data.userSimulations, + data.userPolicies, + data.userHouseholds, + data.userGeographies, + currentLawId, + reportState, + ]); + + return { + reportState, + setReportState, + originalState: originalStateRef.current, + isLoading: data.isLoading, + error: data.error, + }; +} diff --git a/app/src/pages/reportBuilder/hooks/useReportSubmission.ts b/app/src/pages/reportBuilder/hooks/useReportSubmission.ts new file mode 100644 index 000000000..91136ad00 --- /dev/null +++ b/app/src/pages/reportBuilder/hooks/useReportSubmission.ts @@ -0,0 +1,197 @@ +/** + * useReportSubmission - Extracted submission logic for creating a new report + * + * Handles: + * - Sequential simulation creation via API + * - Report creation with simulation IDs + * - isReportConfigured derivation + * - isSubmitting state + * + * Accepts an onSuccess callback instead of navigating directly, + * so the consuming page controls routing. + */ +import { useCallback, useState } from 'react'; +import { useSelector } from 'react-redux'; +import { ReportAdapter, SimulationAdapter } from '@/adapters'; +import { createSimulation } from '@/api/simulation'; +import { useCreateReport } from '@/hooks/useCreateReport'; +import { RootState } from '@/store'; +import { Report } from '@/types/ingredients/Report'; +import { Simulation } from '@/types/ingredients/Simulation'; +import { SimulationStateProps } from '@/types/pathwayState'; +import { toApiPolicyId } from '../currentLaw'; +import { ReportBuilderState } from '../types'; + +interface UseReportSubmissionArgs { + reportState: ReportBuilderState; + countryId: 'us' | 'uk'; + onSuccess: (userReportId: string) => void; +} + +interface UseReportSubmissionReturn { + handleSubmit: () => Promise; + isSubmitting: boolean; + isReportConfigured: boolean; +} + +function convertToSimulation( + simState: SimulationStateProps, + simulationId: string, + countryId: 'us' | 'uk', + currentLawId: number +): Simulation | null { + const policyId = simState.policy?.id; + if (!policyId) { + return null; + } + + let populationId: string | undefined; + let populationType: 'household' | 'geography' | undefined; + + if (simState.population?.household?.id) { + populationId = simState.population.household.id; + populationType = 'household'; + } else if (simState.population?.geography?.geographyId) { + populationId = simState.population.geography.geographyId; + populationType = 'geography'; + } + + if (!populationId || !populationType) { + return null; + } + + return { + id: simulationId, + countryId, + apiVersion: undefined, + policyId: toApiPolicyId(policyId, currentLawId), + populationId, + populationType, + label: simState.label, + isCreated: true, + output: null, + status: 'pending', + }; +} + +export function useReportSubmission({ + reportState, + countryId, + onSuccess, +}: UseReportSubmissionArgs): UseReportSubmissionReturn { + const currentLawId = useSelector((state: RootState) => state.metadata.currentLawId); + const [isSubmitting, setIsSubmitting] = useState(false); + const { createReport } = useCreateReport(reportState.label || undefined); + + const isReportConfigured = reportState.simulations.every( + (sim) => !!sim.policy.id && !!(sim.population.household?.id || sim.population.geography?.id) + ); + + const handleSubmit = useCallback(async () => { + if (!isReportConfigured || isSubmitting) { + return; + } + + setIsSubmitting(true); + + try { + const simulationIds: string[] = []; + const simulations: (Simulation | null)[] = []; + + for (const simState of reportState.simulations) { + const policyId = simState.policy?.id + ? toApiPolicyId(simState.policy.id, currentLawId) + : undefined; + + if (!policyId) { + console.error('[useReportSubmission] Simulation missing policy ID'); + continue; + } + + let populationId: string | undefined; + let populationType: 'household' | 'geography' | undefined; + + if (simState.population?.household?.id) { + populationId = simState.population.household.id; + populationType = 'household'; + } else if (simState.population?.geography?.geographyId) { + populationId = simState.population.geography.geographyId; + populationType = 'geography'; + } + + if (!populationId || !populationType) { + console.error('[useReportSubmission] Simulation missing population'); + continue; + } + + const simulationData: Partial = { + populationId, + policyId, + populationType, + }; + + const payload = SimulationAdapter.toCreationPayload(simulationData); + const result = await createSimulation(countryId, payload); + const simulationId = result.result.simulation_id; + simulationIds.push(simulationId); + + const simulation = convertToSimulation(simState, simulationId, countryId, currentLawId); + simulations.push(simulation); + } + + if (simulationIds.length === 0) { + console.error('[useReportSubmission] No simulations created'); + setIsSubmitting(false); + return; + } + + const reportData: Partial = { + countryId, + year: reportState.year, + simulationIds, + apiVersion: null, + }; + + const serializedPayload = ReportAdapter.toCreationPayload(reportData as Report); + + await createReport( + { + countryId, + payload: serializedPayload, + simulations: { + simulation1: simulations[0], + simulation2: simulations[1] || null, + }, + populations: { + household1: reportState.simulations[0]?.population?.household || null, + household2: reportState.simulations[1]?.population?.household || null, + geography1: reportState.simulations[0]?.population?.geography || null, + geography2: reportState.simulations[1]?.population?.geography || null, + }, + }, + { + onSuccess: (data) => { + onSuccess(data.userReport.id); + }, + onError: (error) => { + console.error('[useReportSubmission] Report creation failed:', error); + setIsSubmitting(false); + }, + } + ); + } catch (error) { + console.error('[useReportSubmission] Error running report:', error); + setIsSubmitting(false); + } + }, [ + isReportConfigured, + isSubmitting, + reportState, + countryId, + currentLawId, + createReport, + onSuccess, + ]); + + return { handleSubmit, isSubmitting, isReportConfigured }; +} diff --git a/app/src/pages/reportBuilder/hooks/useSimulationCanvas.ts b/app/src/pages/reportBuilder/hooks/useSimulationCanvas.ts new file mode 100644 index 000000000..5e345be52 --- /dev/null +++ b/app/src/pages/reportBuilder/hooks/useSimulationCanvas.ts @@ -0,0 +1,540 @@ +/** + * useSimulationCanvas - State management hook for the simulation canvas + * + * Owns: + * - Data fetching (policies, households, regions) and loading state + * - Computed/derived data (savedPolicies, recentPopulations) + * - Modal visibility state (policy browse, population browse, policy creation) + * - All simulation mutation callbacks (add, remove, select, deselect, etc.) + * + * The component that consumes this hook is responsible only for rendering. + */ + +import { useCallback, useMemo, useState } from 'react'; +import { useSelector } from 'react-redux'; +import { HouseholdAdapter } from '@/adapters/HouseholdAdapter'; +import { geographyUsageStore, householdUsageStore } from '@/api/usageTracking'; +import { MOCK_USER_ID } from '@/constants'; +import { useCurrentCountry } from '@/hooks/useCurrentCountry'; +import { useUserHouseholds } from '@/hooks/useUserHousehold'; +import { useUserPolicies } from '@/hooks/useUserPolicy'; +import { RootState } from '@/store'; +import { Geography } from '@/types/ingredients/Geography'; +import { PolicyStateProps, PopulationStateProps } from '@/types/pathwayState'; +import { countPolicyModifications } from '@/utils/countParameterChanges'; +import { generateGeographyLabel } from '@/utils/geographyUtils'; +import { initializePolicyState } from '@/utils/pathwayState/initializePolicyState'; +import { initializePopulationState } from '@/utils/pathwayState/initializePopulationState'; +import { initializeSimulationState } from '@/utils/pathwayState/initializeSimulationState'; +import { + getUKConstituencies, + getUKCountries, + getUKLocalAuthorities, + getUSCongressionalDistricts, + getUSPlaces, + getUSStates, + RegionOption, +} from '@/utils/regionStrategies'; +import { getSamplePopulations } from '../constants'; +import { createCurrentLawPolicy } from '../currentLaw'; +import type { + IngredientPickerState, + IngredientType, + PolicyBrowseState, + RecentPopulation, + ReportBuilderState, + SavedPolicy, +} from '../types'; + +interface UseSimulationCanvasArgs { + reportState: ReportBuilderState; + setReportState: React.Dispatch>; + pickerState: IngredientPickerState; + setPickerState: React.Dispatch>; +} + +export function useSimulationCanvas({ + reportState, + setReportState, + pickerState, + setPickerState, +}: UseSimulationCanvasArgs) { + const countryId = useCurrentCountry() as 'us' | 'uk'; + const userId = MOCK_USER_ID.toString(); + const { data: policies, isLoading: policiesLoading } = useUserPolicies(userId); + const { data: households, isLoading: householdsLoading } = useUserHouseholds(userId); + const regionOptions = useSelector((state: RootState) => state.metadata.economyOptions.region); + const metadataLoading = useSelector((state: RootState) => state.metadata.loading); + const isGeographySelected = !!reportState.simulations[0]?.population?.geography?.id; + + // Show loading skeleton until all data sources have resolved. + // Region options check guards against a race condition where metadata initial + // state has loading=false but region=[] before the actual data arrives. + const isInitialLoading = + policiesLoading || + householdsLoading || + metadataLoading || + policies === undefined || + households === undefined || + regionOptions.length === 0; + + // --------------------------------------------------------------------------- + // Modal visibility state + // --------------------------------------------------------------------------- + + const [policyBrowseState, setPolicyBrowseState] = useState({ + isOpen: false, + simulationIndex: 0, + }); + + const [policyCreationState, setPolicyCreationState] = useState({ + isOpen: false, + simulationIndex: 0, + }); + + const [populationBrowseState, setPopulationBrowseState] = useState({ + isOpen: false, + simulationIndex: 0, + }); + + // --------------------------------------------------------------------------- + // Computed / derived data + // --------------------------------------------------------------------------- + + const savedPolicies: SavedPolicy[] = useMemo(() => { + return (policies || []) + .map((p) => { + const policyId = p.association.policyId.toString(); + return { + id: policyId, + label: p.association.label || `Policy #${policyId}`, + paramCount: countPolicyModifications(p.policy), + createdAt: p.association.createdAt, + updatedAt: p.association.updatedAt, + }; + }) + .sort((a, b) => { + const aTime = a.updatedAt || a.createdAt || ''; + const bTime = b.updatedAt || b.createdAt || ''; + return bTime.localeCompare(aTime); + }); + }, [policies]); + + const recentPopulations: RecentPopulation[] = useMemo(() => { + const results: Array = []; + + const regions = regionOptions || []; + const allRegions: RegionOption[] = + countryId === 'us' + ? [...getUSStates(regions), ...getUSCongressionalDistricts(regions), ...getUSPlaces()] + : [ + ...getUKCountries(regions), + ...getUKConstituencies(regions), + ...getUKLocalAuthorities(regions), + ]; + + for (const geoId of geographyUsageStore.getRecentIds(10)) { + if (geoId === 'us' || geoId === 'uk') { + continue; + } + + const region = allRegions.find((r) => r.value === geoId); + if (!region) { + continue; + } + + const geographyId = `${countryId}-${geoId}`; + const geography: Geography = { + id: geographyId, + countryId, + scope: 'subnational', + geographyId: geoId, + }; + results.push({ + id: geographyId, + label: region.label, + type: 'geography', + population: { + geography, + household: null, + label: generateGeographyLabel(geography), + type: 'geography', + }, + timestamp: geographyUsageStore.getLastUsed(geoId) || '', + }); + } + + for (const householdId of householdUsageStore.getRecentIds(10)) { + const householdData = households?.find( + (h) => String(h.association.householdId) === householdId + ); + if (!householdData?.household?.household_json) { + continue; + } + + const household = HouseholdAdapter.fromMetadata(householdData.household); + const resolvedId = household.id || householdId; + const label = householdData.association.label || `Household #${householdId}`; + results.push({ + id: resolvedId, + label, + type: 'household', + population: { + geography: null, + household, + label, + type: 'household', + }, + timestamp: householdUsageStore.getLastUsed(householdId) || '', + }); + } + + return results + .sort((a, b) => b.timestamp.localeCompare(a.timestamp)) + .slice(0, 10) + .map(({ timestamp: _t, ...rest }) => rest); + }, [countryId, households, regionOptions]); + + // --------------------------------------------------------------------------- + // Helpers + // --------------------------------------------------------------------------- + + /** + * Update a simulation's population at `index`, and if it's the baseline (0) + * propagate the same population to sim[1] when it exists. + */ + const updatePopulationWithInheritance = useCallback( + (simulationIndex: number, population: PopulationStateProps) => { + setReportState((prev) => { + const newSimulations = prev.simulations.map((sim, i) => + i === simulationIndex ? { ...sim, population: { ...population } } : sim + ); + + if (simulationIndex === 0 && newSimulations.length > 1) { + newSimulations[1] = { ...newSimulations[1], population: { ...population } }; + } + + return { ...prev, simulations: newSimulations }; + }); + }, + [setReportState] + ); + + /** Update a single simulation's policy at `index`. */ + const updatePolicy = useCallback( + (simulationIndex: number, policy: PolicyStateProps) => { + setReportState((prev) => ({ + ...prev, + simulations: prev.simulations.map((sim, i) => + i === simulationIndex ? { ...sim, policy } : sim + ), + })); + }, + [setReportState] + ); + + // --------------------------------------------------------------------------- + // Simulation-level actions + // --------------------------------------------------------------------------- + + const handleAddSimulation = useCallback(() => { + setReportState((prev) => { + if (prev.simulations.length >= 2) { + return prev; + } + const newSim = initializeSimulationState(); + newSim.label = 'Reform simulation'; + newSim.population = { ...prev.simulations[0].population }; + return { ...prev, simulations: [...prev.simulations, newSim] }; + }); + }, [setReportState]); + + const handleRemoveSimulation = useCallback( + (index: number) => { + if (index === 0) { + return; + } + setReportState((prev) => ({ + ...prev, + simulations: prev.simulations.filter((_, i) => i !== index), + })); + }, + [setReportState] + ); + + const handleSimulationLabelChange = useCallback( + (index: number, label: string) => { + setReportState((prev) => ({ + ...prev, + simulations: prev.simulations.map((sim, i) => (i === index ? { ...sim, label } : sim)), + })); + }, + [setReportState] + ); + + // --------------------------------------------------------------------------- + // Policy actions + // --------------------------------------------------------------------------- + + const handleQuickSelectPolicy = useCallback( + (simulationIndex: number) => { + updatePolicy(simulationIndex, createCurrentLawPolicy()); + }, + [updatePolicy] + ); + + const handleSelectSavedPolicy = useCallback( + (simulationIndex: number, policyId: string, label: string, paramCount: number) => { + updatePolicy(simulationIndex, { + id: policyId, + label, + parameters: Array(paramCount).fill({}), + }); + }, + [updatePolicy] + ); + + const handleDeselectPolicy = useCallback( + (simulationIndex: number) => { + updatePolicy(simulationIndex, initializePolicyState()); + }, + [updatePolicy] + ); + + const handleBrowseMorePolicies = useCallback((simulationIndex: number) => { + setPolicyBrowseState({ isOpen: true, simulationIndex }); + }, []); + + const handlePolicySelectFromBrowse = useCallback( + (policy: PolicyStateProps) => { + updatePolicy(policyBrowseState.simulationIndex, policy); + }, + [policyBrowseState.simulationIndex, updatePolicy] + ); + + const handlePolicyCreated = useCallback( + (simulationIndex: number, policy: PolicyStateProps) => { + updatePolicy(simulationIndex, { + id: policy.id, + label: policy.label, + parameters: policy.parameters, + }); + }, + [updatePolicy] + ); + + const handleEditPolicy = useCallback( + (simulationIndex: number) => { + const currentPolicy = reportState.simulations[simulationIndex]?.policy; + if (!currentPolicy?.id) { + return; + } + + // Resolve full parameters: in-session policies have real params, + // saved policies have placeholder Array(n).fill({}) + let resolvedPolicy = currentPolicy; + const hasRealParams = + currentPolicy.parameters.length > 0 && !!currentPolicy.parameters[0]?.name; + if (!hasRealParams && currentPolicy.id) { + const fullPolicy = policies?.find( + (p) => p.association.policyId.toString() === currentPolicy.id + ); + if (fullPolicy?.policy?.parameters) { + resolvedPolicy = { + ...currentPolicy, + parameters: fullPolicy.policy.parameters, + }; + } + } + + setPolicyCreationState({ + isOpen: true, + simulationIndex, + initialPolicy: resolvedPolicy, + }); + }, + [reportState.simulations, policies] + ); + + const handleViewPolicy = useCallback( + (simulationIndex: number) => { + const currentPolicy = reportState.simulations[simulationIndex]?.policy; + if (!currentPolicy?.id) { + return; + } + + // Resolve full parameters (same as handleEditPolicy) + let resolvedPolicy = currentPolicy; + const hasRealParams = + currentPolicy.parameters.length > 0 && !!currentPolicy.parameters[0]?.name; + if (!hasRealParams && currentPolicy.id) { + const fullPolicy = policies?.find( + (p) => p.association.policyId.toString() === currentPolicy.id + ); + if (fullPolicy?.policy?.parameters) { + resolvedPolicy = { + ...currentPolicy, + parameters: fullPolicy.policy.parameters, + }; + } + } + + setPolicyCreationState({ + isOpen: true, + simulationIndex, + initialPolicy: resolvedPolicy, + initialEditorMode: 'display', + }); + }, + [reportState.simulations, policies] + ); + + // --------------------------------------------------------------------------- + // Population actions + // --------------------------------------------------------------------------- + + const handleQuickSelectPopulation = useCallback( + (simulationIndex: number, _populationType: 'nationwide') => { + const populationState = getSamplePopulations(countryId).nationwide; + + if (populationState.geography?.geographyId) { + geographyUsageStore.recordUsage(populationState.geography.geographyId); + } + + updatePopulationWithInheritance(simulationIndex, populationState); + }, + [countryId, updatePopulationWithInheritance] + ); + + const handleSelectRecentPopulation = useCallback( + (simulationIndex: number, population: PopulationStateProps) => { + if (population.geography?.geographyId) { + geographyUsageStore.recordUsage(population.geography.geographyId); + } else if (population.household?.id) { + householdUsageStore.recordUsage(population.household.id); + } + + updatePopulationWithInheritance(simulationIndex, population); + }, + [updatePopulationWithInheritance] + ); + + const handleDeselectPopulation = useCallback( + (simulationIndex: number) => { + updatePopulationWithInheritance(simulationIndex, initializePopulationState()); + }, + [updatePopulationWithInheritance] + ); + + const handleBrowseMorePopulations = useCallback((simulationIndex: number) => { + setPopulationBrowseState({ isOpen: true, simulationIndex }); + }, []); + + const handlePopulationSelectFromBrowse = useCallback( + (population: PopulationStateProps) => { + updatePopulationWithInheritance(populationBrowseState.simulationIndex, population); + }, + [populationBrowseState.simulationIndex, updatePopulationWithInheritance] + ); + + // --------------------------------------------------------------------------- + // Ingredient picker / create-custom actions + // --------------------------------------------------------------------------- + + const handleIngredientSelect = useCallback( + (item: PolicyStateProps | PopulationStateProps | null) => { + const { simulationIndex, ingredientType } = pickerState; + if (ingredientType === 'policy') { + updatePolicy(simulationIndex, item as PolicyStateProps); + } else if (ingredientType === 'population') { + updatePopulationWithInheritance(simulationIndex, item as PopulationStateProps); + } + }, + [pickerState, updatePolicy, updatePopulationWithInheritance] + ); + + const handleCreateCustom = useCallback( + (simulationIndex: number, ingredientType: IngredientType) => { + if (ingredientType === 'policy') { + setPolicyCreationState({ isOpen: true, simulationIndex }); + } else if (ingredientType === 'population') { + window.location.href = `/${countryId}/households/create`; + } + }, + [countryId] + ); + + // --------------------------------------------------------------------------- + // Modal close helpers + // --------------------------------------------------------------------------- + + const closePolicyBrowse = useCallback( + () => setPolicyBrowseState((prev) => ({ ...prev, isOpen: false })), + [] + ); + + const closePolicyCreation = useCallback( + () => setPolicyCreationState((prev) => ({ ...prev, isOpen: false })), + [] + ); + + const closePopulationBrowse = useCallback( + () => setPopulationBrowseState((prev) => ({ ...prev, isOpen: false })), + [] + ); + + const closeIngredientPicker = useCallback( + () => setPickerState((prev) => ({ ...prev, isOpen: false })), + [setPickerState] + ); + + // --------------------------------------------------------------------------- + // Return + // --------------------------------------------------------------------------- + + return { + countryId, + isInitialLoading, + isGeographySelected, + + // Computed data + savedPolicies, + recentPopulations, + + // Simulation actions + handleAddSimulation, + handleRemoveSimulation, + handleSimulationLabelChange, + + // Policy actions + handleQuickSelectPolicy, + handleSelectSavedPolicy, + handleDeselectPolicy, + handleEditPolicy, + handleViewPolicy, + handleBrowseMorePolicies, + handlePolicySelectFromBrowse, + handlePolicyCreated, + + // Population actions + handleQuickSelectPopulation, + handleSelectRecentPopulation, + handleDeselectPopulation, + handleBrowseMorePopulations, + handlePopulationSelectFromBrowse, + + // Ingredient picker / custom + handleIngredientSelect, + handleCreateCustom, + + // Modal state + pickerState, + policyBrowseState, + policyCreationState, + populationBrowseState, + closePolicyBrowse, + closePolicyCreation, + closePopulationBrowse, + closeIngredientPicker, + }; +} diff --git a/app/src/pages/reportBuilder/index.ts b/app/src/pages/reportBuilder/index.ts new file mode 100644 index 000000000..1f2df775b --- /dev/null +++ b/app/src/pages/reportBuilder/index.ts @@ -0,0 +1,37 @@ +/** + * ReportBuilder Module + * + * This folder contains the refactored ReportBuilder page and its components. + * + * Structure: + * - types.ts: All TypeScript interfaces and types + * - constants.ts: Configuration constants (FONT_SIZES, INGREDIENT_COLORS, etc.) + * - styles.ts: Shared style objects + * - components/: Reusable UI components + * - chips/: Chip components (OptionChipSquare, OptionChipRow, etc.) + * - shared/: Shared components (CreationStatusHeader, ProgressDot, etc.) + * - IngredientSection, SimulationBlock, AddSimulationCard, etc. + * - modals/: Modal components + * - BrowseModalTemplate.tsx: Template for browse modals + * - PolicyBrowseModal.tsx: Policy browsing and creation + * - PopulationBrowseModal.tsx: Population browsing and creation + * - PolicyCreationModal.tsx: Policy creation form + */ + +// Main page component +export { default } from './ReportBuilderPage'; + +// Types +export * from './types'; + +// Constants +export * from './constants'; + +// Styles +export * from './styles'; + +// Components +export * from './components'; + +// Modals +export * from './modals'; diff --git a/app/src/pages/reportBuilder/modals/BrowseModalTemplate.tsx b/app/src/pages/reportBuilder/modals/BrowseModalTemplate.tsx new file mode 100644 index 000000000..20f977e3c --- /dev/null +++ b/app/src/pages/reportBuilder/modals/BrowseModalTemplate.tsx @@ -0,0 +1,232 @@ +/** + * BrowseModalTemplate - Shared template for browse modals (Policy, Population) + * + * Handles ONLY visual layout: + * - Dialog shell with header + * - Sidebar (standard sections OR custom render) + * - Main content area + * - Optional status header slot + * - Optional footer slot + */ +import { IconChevronLeft } from '@tabler/icons-react'; +import { + Button, + Dialog, + DialogContent, + DialogTitle, + Group, + ScrollArea, + Separator, + Spinner, + Stack, + Text, +} from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { BROWSE_MODAL_CONFIG, FONT_SIZES } from '../constants'; +import { modalStyles } from '../styles'; +import { BrowseModalSidebarSection, BrowseModalTemplateProps } from '../types'; + +/** + * A reusable template for browse modals (PolicyBrowseModal, PopulationBrowseModal). + * Handles only visual display logic - sidebar layout, modal chrome, content slots. + */ +export function BrowseModalTemplate({ + isOpen, + onClose, + headerIcon, + headerTitle, + headerSubtitle, + headerRightContent, + colorConfig, + sidebarSections, + renderSidebar, + sidebarWidth = BROWSE_MODAL_CONFIG.sidebarWidth, + renderMainContent, + statusHeader, + footer, + contentPadding = spacing.lg, +}: BrowseModalTemplateProps) { + // Render standard sidebar sections + const renderStandardSidebar = (sections: BrowseModalSidebarSection[]) => ( + + + {sections.map((section, sectionIndex) => ( +
+ {sectionIndex > 0 && } +
+ {section.label} + {section.items?.map((item) => ( + + ))} +
+
+ ))} + + + ); + + return ( + !open && onClose()}> + + {/* Header */} +
+ +
+ {headerIcon} +
+ + + {headerTitle} + + {headerSubtitle && ( + + {headerSubtitle} + + )} + + + {headerRightContent} +
+ + {/* Main layout: sidebar + content */} + + {/* Sidebar */} +
+ {renderSidebar + ? renderSidebar() + : sidebarSections && renderStandardSidebar(sidebarSections)} +
+ + {/* Main Content Area */} +
+ {/* Optional Status Header */} + {statusHeader} + + {/* Main Content */} +
+ {renderMainContent()} +
+
+ + + {/* Footer spans full width, outside the sidebar/content layout */} + {footer && ( +
+ {footer} +
+ )} + + + ); +} + +// ============================================================================ +// HELPER COMPONENTS +// ============================================================================ + +interface CreationModeFooterProps { + onBack: () => void; + onSubmit: () => void; + isLoading: boolean; + submitDisabled: boolean; + submitLabel: string; + backLabel?: string; +} + +export function CreationModeFooter({ + onBack, + onSubmit, + isLoading, + submitDisabled, + submitLabel, + backLabel = 'Back', +}: CreationModeFooterProps) { + return ( + + + + + ); +} diff --git a/app/src/pages/reportBuilder/modals/IngredientPickerModal.tsx b/app/src/pages/reportBuilder/modals/IngredientPickerModal.tsx new file mode 100644 index 000000000..1ca336e8d --- /dev/null +++ b/app/src/pages/reportBuilder/modals/IngredientPickerModal.tsx @@ -0,0 +1,704 @@ +import { Fragment, useState } from 'react'; +import { + IconChartLine, + IconChevronRight, + IconHome, + IconInfoCircle, + IconPlus, + IconScale, + IconSparkles, + IconUsers, +} from '@tabler/icons-react'; +import { useSelector } from 'react-redux'; +import { Button } from '@/components/ui/button'; +import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; +import { Group } from '@/components/ui/Group'; +import { ScrollArea } from '@/components/ui/scroll-area'; +import { Separator } from '@/components/ui/separator'; +import { Spinner } from '@/components/ui/Spinner'; +import { Stack } from '@/components/ui/Stack'; +import { Text } from '@/components/ui/Text'; +import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'; +import { MOCK_USER_ID } from '@/constants'; +import { colors, spacing } from '@/designTokens'; +import { useCurrentCountry } from '@/hooks/useCurrentCountry'; +import { useUserHouseholds } from '@/hooks/useUserHousehold'; +import { useUserPolicies } from '@/hooks/useUserPolicy'; +import { RootState } from '@/store'; +import { PolicyStateProps, PopulationStateProps } from '@/types/pathwayState'; +import { countPolicyModifications } from '@/utils/countParameterChanges'; +import { formatPeriod } from '@/utils/dateUtils'; +import { formatLabelParts, getHierarchicalLabels } from '@/utils/parameterLabels'; +import { formatParameterValue } from '@/utils/policyTableHelpers'; +import { CountryMapIcon } from '../components/shared/CountryMapIcon'; +import { COUNTRY_CONFIG, FONT_SIZES, INGREDIENT_COLORS } from '../constants'; +import { createCurrentLawPolicy } from '../currentLaw'; +import { IngredientType } from '../types'; + +interface IngredientPickerModalProps { + isOpen: boolean; + onClose: () => void; + type: IngredientType; + onSelect: (item: PolicyStateProps | PopulationStateProps | null) => void; + onCreateNew: () => void; +} + +export function IngredientPickerModal({ + isOpen, + onClose, + type, + onSelect, + onCreateNew, +}: IngredientPickerModalProps) { + const countryId = useCurrentCountry() as 'us' | 'uk'; + const countryConfig = COUNTRY_CONFIG[countryId] || COUNTRY_CONFIG.us; + const userId = MOCK_USER_ID.toString(); + const { data: policies, isLoading: policiesLoading } = useUserPolicies(userId); + const { data: households, isLoading: householdsLoading } = useUserHouseholds(userId); + const colorConfig = INGREDIENT_COLORS[type]; + const [expandedPolicyId, setExpandedPolicyId] = useState(null); + const parameters = useSelector((state: RootState) => state.metadata.parameters); + + const getTitle = () => { + switch (type) { + case 'policy': + return 'Select policy'; + case 'population': + return 'Select population'; + case 'dynamics': + return 'Configure dynamics'; + } + }; + + const getIcon = () => { + const iconProps = { size: 20, color: colorConfig.icon }; + switch (type) { + case 'policy': + return ; + case 'population': + return ; + case 'dynamics': + return ; + } + }; + + const handleSelectPolicy = (policyId: string, label: string, paramCount: number) => { + onSelect({ id: policyId, label, parameters: Array(paramCount).fill({}) }); + onClose(); + }; + + const handleSelectCurrentLaw = () => { + onSelect(createCurrentLawPolicy()); + onClose(); + }; + + const handleSelectHousehold = (householdId: string, label: string) => { + onSelect({ + label, + type: 'household', + household: { id: householdId, countryId, householdData: { people: {} } }, + geography: null, + }); + onClose(); + }; + + const handleSelectGeography = ( + geoId: string, + label: string, + scope: 'national' | 'subnational' + ) => { + onSelect({ + label, + type: 'geography', + household: null, + geography: { id: geoId, countryId, scope, geographyId: geoId, name: label }, + }); + onClose(); + }; + + return ( + !open && onClose()}> + + + + +
+ {getIcon()} +
+ + {getTitle()} + + + + +
+ + {type === 'policy' && ( + <> +
{ + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleSelectCurrentLaw(); + } + }} + > + +
+ +
+ + + Current law + + + Use existing tax and benefit rules without modifications + + + +
+
+ + + Or select an existing policy + + +
+ + {policiesLoading ? ( +
+ +
+ ) : ( + + {policies?.map((p) => { + // Use association data for display (like Policies page) + const policyId = p.association.policyId.toString(); + const label = p.association.label || `Policy #${policyId}`; + const paramCount = countPolicyModifications(p.policy); // Handles undefined gracefully + const policyParams = p.policy?.parameters || []; + const isExpanded = expandedPolicyId === policyId; + + return ( +
+ {/* Main clickable row */} +
handleSelectPolicy(policyId, label, paramCount)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleSelectPolicy(policyId, label, paramCount); + } + }} + onMouseEnter={(e) => { + e.currentTarget.style.background = colors.gray[50]; + }} + onMouseLeave={(e) => { + e.currentTarget.style.background = 'transparent'; + }} + > + {/* Policy info - takes remaining space */} + + + {label} + + + {paramCount} param{paramCount !== 1 ? 's' : ''} changed + + + + {/* Info/expand button - isolated click zone */} + + + {/* Select indicator */} + +
+ + {/* Expandable parameter details - table-like display */} +
+ {/* Unified grid for header and data rows */} +
+ {/* Header row */} + + Parameter + + + Changes + + + {/* Data rows - grouped by parameter */} + {(() => { + // Build grouped list of parameters with their changes + const groupedParams: Array<{ + paramName: string; + label: string; + changes: Array<{ period: string; value: string }>; + }> = []; + + policyParams.forEach((param) => { + const paramName = param.name; + const hierarchicalLabels = getHierarchicalLabels( + paramName, + parameters + ); + const displayLabel = + hierarchicalLabels.length > 0 + ? formatLabelParts(hierarchicalLabels) + : paramName.split('.').pop() || paramName; + const metadata = parameters[paramName]; + + // Use value intervals directly from the Policy type + const changes = (param.values || []).map((interval) => ({ + period: formatPeriod(interval.startDate, interval.endDate), + value: formatParameterValue(interval.value, metadata?.unit), + })); + + groupedParams.push({ paramName, label: displayLabel, changes }); + }); + + if (groupedParams.length === 0) { + return ( + <> + + No parameter details available + + + ); + } + + const displayParams = groupedParams.slice(0, 10); + const remainingCount = groupedParams.length - 10; + + return ( + <> + {displayParams.map((param) => ( + + {/* Parameter name cell */} +
+ + + + {param.label} + + + {param.paramName} + +
+ {/* Changes cell - multiple lines */} +
+ {param.changes.map((change, idx) => ( + + + {change.period}: + {' '} + + {change.value} + + + ))} +
+ + ))} + {remainingCount > 0 && ( + + +{remainingCount} more parameter + {remainingCount !== 1 ? 's' : ''} + + )} + + ); + })()} +
+
+
+ ); + })} + {(!policies || policies.length === 0) && ( + + No saved policies + + )} + + )} + + + + + )} + + {type === 'population' && ( + <> +
+ handleSelectGeography( + countryConfig.geographyId, + countryConfig.nationwideLabel, + 'national' + ) + } + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleSelectGeography( + countryConfig.geographyId, + countryConfig.nationwideLabel, + 'national' + ); + } + }} + > + +
+ +
+ + + {countryConfig.nationwideTitle} + + + {countryConfig.nationwideSubtitle} + + + +
+
handleSelectHousehold('sample-household', 'Sample household')} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleSelectHousehold('sample-household', 'Sample household'); + } + }} + > + +
+ +
+ + + Sample household + + + Single household simulation + + + +
+
+ + + Or select an existing household + + +
+ + {householdsLoading ? ( +
+ +
+ ) : ( + + {households?.map((h) => { + // Use association data for display (like Populations page) + const householdId = h.association.householdId.toString(); + const label = h.association.label || `Household #${householdId}`; + return ( +
handleSelectHousehold(householdId, label)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleSelectHousehold(householdId, label); + } + }} + > + + + {label} + + + +
+ ); + })} + {(!households || households.length === 0) && ( + + No saved households + + )} + + )} + + + + + )} + + {type === 'dynamics' && ( + +
+ +
+ + + Dynamics coming soon + + + Dynamic behavioral responses will be available in a future update. + + + + )} + +
+ + + ); +} diff --git a/app/src/pages/reportBuilder/modals/PolicyBrowseModal.tsx b/app/src/pages/reportBuilder/modals/PolicyBrowseModal.tsx new file mode 100644 index 000000000..ff96d81ea --- /dev/null +++ b/app/src/pages/reportBuilder/modals/PolicyBrowseModal.tsx @@ -0,0 +1,782 @@ +/** + * PolicyBrowseModal - Full-featured policy browsing and creation modal + * + * Uses BrowseModalTemplate for visual layout and delegates to sub-components: + * - Browse mode: PolicyBrowseContent for main content + * - Creation mode: PolicyCreationContent + PolicyParameterTree + */ +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { IconChevronRight, IconFolder, IconPlus, IconScale, IconStar } from '@tabler/icons-react'; +import { useSelector } from 'react-redux'; +import { PolicyAdapter } from '@/adapters'; +import { createPolicy as createPolicyApi } from '@/api/policy'; +import { + EditAndSaveNewButton, + EditAndUpdateButton, + EditDefaultButton, +} from '@/components/common/ActionButtons'; +import { Button } from '@/components/ui/button'; +import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'; +import { Group } from '@/components/ui/Group'; +import { Spinner } from '@/components/ui/Spinner'; +import { Stack } from '@/components/ui/Stack'; +import { Text } from '@/components/ui/Text'; +import { MOCK_USER_ID } from '@/constants'; +import { colors, spacing } from '@/designTokens'; +import { useCreatePolicy } from '@/hooks/useCreatePolicy'; +import { useCurrentCountry } from '@/hooks/useCurrentCountry'; +import { useUpdatePolicyAssociation, useUserPolicies } from '@/hooks/useUserPolicy'; +import { getDateRange } from '@/libs/metadataUtils'; +import { ValueSetterMode } from '@/pathways/report/components/valueSetters'; +import { RootState } from '@/store'; +import { Policy } from '@/types/ingredients/Policy'; +import { ParameterMetadata } from '@/types/metadata/parameterMetadata'; +import { PolicyStateProps } from '@/types/pathwayState'; +import { PolicyCreationPayload } from '@/types/payloads'; +import { Parameter } from '@/types/subIngredients/parameter'; +import { ValueInterval, ValueIntervalCollection } from '@/types/subIngredients/valueInterval'; +import { countPolicyModifications } from '@/utils/countParameterChanges'; +import { formatPeriod } from '@/utils/dateUtils'; +import { + formatLabelParts, + getHierarchicalLabels, + getHierarchicalLabelsFromTree, +} from '@/utils/parameterLabels'; +import { formatParameterValue } from '@/utils/policyTableHelpers'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../constants'; +import { createCurrentLawPolicy } from '../currentLaw'; +import { BrowseModalTemplate } from './BrowseModalTemplate'; +import { + PolicyBrowseContent, + PolicyCreationContent, + PolicyDetailsDrawer, + PolicyParameterTree, +} from './policy'; +import { PolicyOverviewContent } from './policyCreation'; +import type { EditorMode, ModifiedParam, SidebarTab } from './policyCreation/types'; + +interface PolicyBrowseModalProps { + isOpen: boolean; + onClose: () => void; + onSelect: (policy: PolicyStateProps) => void; +} + +export function PolicyBrowseModal({ isOpen, onClose, onSelect }: PolicyBrowseModalProps) { + const countryId = useCurrentCountry(); + const userId = MOCK_USER_ID.toString(); + const { data: policies, isLoading } = useUserPolicies(userId); + const { + parameterTree, + parameters, + loading: metadataLoading, + } = useSelector((state: RootState) => state.metadata); + const { minDate, maxDate } = useSelector(getDateRange); + const updatePolicyAssociation = useUpdatePolicyAssociation(); + + // Browse mode state + const [searchQuery, setSearchQuery] = useState(''); + const [activeSection, setActiveSection] = useState<'frequently-selected' | 'my-policies'>( + 'frequently-selected' + ); + const [selectedPolicyId, setSelectedPolicyId] = useState(null); + const [drawerPolicyId, setDrawerPolicyId] = useState(null); + + // Creation/editor mode state + const [isCreationMode, setIsCreationMode] = useState(false); + const [editorMode, setEditorMode] = useState('create'); + const [editingAssociationId, setEditingAssociationId] = useState(null); + const [isUpdating, setIsUpdating] = useState(false); + const [activeTab, setActiveTab] = useState('overview'); + const [policyLabel, setPolicyLabel] = useState(''); + const [policyParameters, setPolicyParameters] = useState([]); + const [selectedParam, setSelectedParam] = useState(null); + const [expandedMenuItems, setExpandedMenuItems] = useState>(new Set()); + const [valueSetterMode, setValueSetterMode] = useState(ValueSetterMode.DEFAULT); + const [intervals, setIntervals] = useState([]); + const [startDate, setStartDate] = useState('2025-01-01'); + const [endDate, setEndDate] = useState('2025-12-31'); + const [parameterSearch, setParameterSearch] = useState(''); + const [hoveredParamName, setHoveredParamName] = useState(null); + const [footerHovered, setFooterHovered] = useState(false); + const [originalLabel, setOriginalLabel] = useState(''); + const [showSameNameWarning, setShowSameNameWarning] = useState(false); + + // API hook for creating policy + const { createPolicy, isPending: isCreating } = useCreatePolicy(policyLabel || undefined); + + const isReadOnly = editorMode === 'display'; + + // editingAssociationId tracks the UserPolicy association being edited + // for "Update existing policy" functionality + + // Reset state on mount + useEffect(() => { + if (isOpen) { + setSearchQuery(''); + setActiveSection('frequently-selected'); + setSelectedPolicyId(null); + setDrawerPolicyId(null); + setIsCreationMode(false); + setEditorMode('create'); + + setEditingAssociationId(null); + setIsUpdating(false); + setActiveTab('overview'); + setPolicyLabel(''); + setPolicyParameters([]); + setSelectedParam(null); + setExpandedMenuItems(new Set()); + setIntervals([]); + setParameterSearch(''); + } + }, [isOpen]); + + // Transform policies data, sorted by most recent + const userPolicies = useMemo(() => { + return (policies || []) + .map((p) => { + const policyId = p.association.policyId.toString(); + const label = p.association.label || `Policy #${policyId}`; + return { + id: policyId, + associationId: p.association.id, + label, + paramCount: countPolicyModifications(p.policy), + parameters: p.policy?.parameters || [], + createdAt: p.association.createdAt, + updatedAt: p.association.updatedAt, + }; + }) + .sort((a, b) => { + const aTime = a.updatedAt || a.createdAt || ''; + const bTime = b.updatedAt || b.createdAt || ''; + return bTime.localeCompare(aTime); + }); + }, [policies]); + + // Filter policies based on search + const filteredPolicies = useMemo(() => { + let result = userPolicies; + if (searchQuery.trim()) { + const query = searchQuery.toLowerCase(); + result = result.filter((p) => { + if (p.label.toLowerCase().includes(query)) { + return true; + } + const paramDisplayNames = p.parameters + .map((param) => { + const hierarchicalLabels = getHierarchicalLabelsFromTree(param.name, parameterTree); + return hierarchicalLabels.length > 0 + ? formatLabelParts(hierarchicalLabels) + : param.name.split('.').pop() || param.name; + }) + .join(' ') + .toLowerCase(); + if (paramDisplayNames.includes(query)) { + return true; + } + return false; + }); + } + return result; + }, [userPolicies, searchQuery, parameterTree]); + + // Get policies for current section + const displayedPolicies = useMemo(() => { + return filteredPolicies; + }, [filteredPolicies]); + + // Get section title + const getSectionTitle = () => { + switch (activeSection) { + case 'my-policies': + return 'My policies'; + default: + return 'Policies'; + } + }; + + // Handle policy selection + const handleSelectPolicy = (policy: { + id: string; + label: string; + paramCount: number; + associationId?: string; + }) => { + if (policy.associationId) { + updatePolicyAssociation.mutate({ + userPolicyId: policy.associationId, + updates: {}, + }); + } + onSelect({ id: policy.id, label: policy.label, parameters: Array(policy.paramCount).fill({}) }); + onClose(); + }; + + // Handle current law selection + const handleSelectCurrentLaw = () => { + onSelect(createCurrentLawPolicy()); + onClose(); + }; + + // ========== Creation Mode Logic ========== + + // Create local policy state object + const localPolicy: PolicyStateProps = useMemo( + () => ({ + label: policyLabel, + parameters: policyParameters, + }), + [policyLabel, policyParameters] + ); + + // Count modifications + const modificationCount = countPolicyModifications(localPolicy); + + // Get modified parameter data for the overview tab grid + const modifiedParams: ModifiedParam[] = useMemo(() => { + return policyParameters.map((p) => { + const metadata = parameters[p.name]; + const hierarchicalLabels = getHierarchicalLabels(p.name, parameters); + const displayLabel = + hierarchicalLabels.length > 0 + ? formatLabelParts(hierarchicalLabels) + : p.name.split('.').pop() || p.name; + const changes = p.values.map((interval) => ({ + period: formatPeriod(interval.startDate, interval.endDate), + value: formatParameterValue(interval.value, metadata?.unit), + })); + return { paramName: p.name, label: displayLabel, changes }; + }); + }, [policyParameters, parameters]); + + // Handle search selection + const handleSearchSelect = useCallback( + (paramName: string) => { + const param = parameters[paramName]; + if (!param || param.type !== 'parameter') { + return; + } + const pathParts = paramName.split('.'); + const newExpanded = new Set(expandedMenuItems); + let currentPath = ''; + for (let i = 0; i < pathParts.length - 1; i++) { + currentPath = currentPath ? `${currentPath}.${pathParts[i]}` : pathParts[i]; + newExpanded.add(currentPath); + } + setExpandedMenuItems(newExpanded); + setSelectedParam(param); + setIntervals([]); + setValueSetterMode(ValueSetterMode.DEFAULT); + setParameterSearch(''); + setActiveTab('parameters'); + }, + [parameters, expandedMenuItems] + ); + + // Handle menu item click + const handleMenuItemClick = useCallback( + (paramName: string) => { + const param = parameters[paramName]; + if (param && param.type === 'parameter') { + setSelectedParam(param); + setIntervals([]); + setValueSetterMode(ValueSetterMode.DEFAULT); + setActiveTab('parameters'); + } + setExpandedMenuItems((prev) => { + const newSet = new Set(prev); + if (newSet.has(paramName)) { + newSet.delete(paramName); + } else { + newSet.add(paramName); + } + return newSet; + }); + }, + [parameters] + ); + + // Handle value submission + const handleValueSubmit = useCallback(() => { + if (!selectedParam || intervals.length === 0) { + return; + } + const updatedParameters = [...policyParameters]; + let existingParam = updatedParameters.find((p) => p.name === selectedParam.parameter); + if (!existingParam) { + existingParam = { name: selectedParam.parameter, values: [] }; + updatedParameters.push(existingParam); + } + const paramCollection = new ValueIntervalCollection(existingParam.values); + intervals.forEach((interval) => { + paramCollection.addInterval(interval); + }); + existingParam.values = paramCollection.getIntervals(); + setPolicyParameters(updatedParameters); + setIntervals([]); + }, [selectedParam, intervals, policyParameters]); + + // Handle entering creation mode (new policy) + const handleEnterCreationMode = useCallback(() => { + setPolicyLabel(''); + setPolicyParameters([]); + setSelectedParam(null); + setExpandedMenuItems(new Set()); + setIntervals([]); + setParameterSearch(''); + setActiveTab('overview'); + setEditorMode('create'); + setEditingAssociationId(null); + setIsUpdating(false); + setIsCreationMode(true); + }, []); + + // Handle opening an existing policy in the editor (display mode) + const handleOpenInEditor = useCallback( + (policy: { id: string; associationId?: string; label: string; parameters: Parameter[] }) => { + setDrawerPolicyId(null); + setPolicyLabel(policy.label); + setOriginalLabel(policy.label); + setPolicyParameters(policy.parameters); + setSelectedParam(null); + setExpandedMenuItems(new Set()); + setIntervals([]); + setParameterSearch(''); + setActiveTab('overview'); + setEditorMode('display'); + setEditingAssociationId(policy.associationId || null); + setIsCreationMode(true); + }, + [] + ); + + // Exit editor / creation mode + const handleExitCreationMode = useCallback(() => { + setIsCreationMode(false); + setPolicyLabel(''); + setPolicyParameters([]); + setSelectedParam(null); + setExpandedMenuItems(new Set()); + setIntervals([]); + setParameterSearch(''); + setEditorMode('create'); + + setEditingAssociationId(null); + setIsUpdating(false); + }, []); + + // Handle policy creation + const handleCreatePolicy = useCallback(async () => { + if (!policyLabel.trim()) { + return; + } + const policyData: Partial = { parameters: policyParameters }; + const payload: PolicyCreationPayload = PolicyAdapter.toCreationPayload(policyData as Policy); + try { + const result = await createPolicy(payload); + const createdPolicy: PolicyStateProps = { + id: result.result.policy_id, + label: policyLabel, + parameters: policyParameters, + }; + onSelect(createdPolicy); + onClose(); + } catch (error) { + console.error('Failed to create policy:', error); + } + }, [policyLabel, policyParameters, createPolicy, onSelect, onClose]); + + // Same-name guard for "Save as new policy" + const handleSaveAsNewPolicy = useCallback(() => { + const currentName = (policyLabel || '').trim(); + const origName = (originalLabel || '').trim(); + if (editorMode === 'edit' && currentName && currentName === origName) { + setShowSameNameWarning(true); + } else { + handleCreatePolicy(); + } + }, [policyLabel, originalLabel, editorMode, handleCreatePolicy]); + + // Handle updating an existing policy (create new base policy, update association) + const handleUpdateExistingPolicy = useCallback(async () => { + if (!policyLabel.trim() || !editingAssociationId) { + return; + } + setIsUpdating(true); + + const policyData: Partial = { parameters: policyParameters }; + const payload: PolicyCreationPayload = PolicyAdapter.toCreationPayload(policyData as Policy); + + try { + const result = await createPolicyApi(countryId, payload); + const newPolicyId = result.result.policy_id; + + await updatePolicyAssociation.mutateAsync({ + userPolicyId: editingAssociationId, + updates: { policyId: newPolicyId, label: policyLabel }, + }); + + onSelect({ + id: newPolicyId, + label: policyLabel, + parameters: policyParameters, + }); + onClose(); + } catch (error) { + console.error('Failed to update policy:', error); + setIsUpdating(false); + } + }, [ + policyLabel, + policyParameters, + editingAssociationId, + countryId, + updatePolicyAssociation, + onSelect, + onClose, + ]); + + // Policy for drawer preview + const drawerPolicy = useMemo(() => { + if (!drawerPolicyId) { + return null; + } + return userPolicies.find((p) => p.id === drawerPolicyId) || null; + }, [drawerPolicyId, userPolicies]); + + const colorConfig = INGREDIENT_COLORS.policy; + + // ========== Sidebar Rendering ========== + + // Browse mode sidebar sections + const browseSidebarSections = useMemo( + () => [ + { + id: 'library', + label: 'Library', + items: [ + { + id: 'frequently-selected', + label: 'Frequently selected', + icon: , + isActive: activeSection === 'frequently-selected', + onClick: () => setActiveSection('frequently-selected'), + }, + { + id: 'my-policies', + label: 'My policies', + icon: , + badge: userPolicies.length, + isActive: activeSection === 'my-policies', + onClick: () => setActiveSection('my-policies'), + }, + { + id: 'create-new', + label: 'Create new policy', + icon: , + isActive: isCreationMode, + onClick: handleEnterCreationMode, + }, + ], + }, + ], + [activeSection, userPolicies.length, isCreationMode, handleEnterCreationMode] + ); + + // Creation mode custom sidebar + const renderCreationSidebar = () => ( + + ); + + // ========== Main Content Rendering ========== + + // Overview content for creation mode — naming, param grid, action buttons + const renderOverviewContent = () => ( +
+
+ +
+
+ ); + + const renderMainContent = () => { + if (isCreationMode) { + if (activeTab === 'overview') { + return renderOverviewContent(); + } + return ( + + ); + } + + if (activeSection === 'frequently-selected') { + return ( + + + Frequently selected + +
{ + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleSelectCurrentLaw(); + } + }} + > +
+ + + + Current law + + + No parameter changes + + + + +
+ + ); + } + + return ( + <> + { + setSelectedPolicyId(policy.id); + handleSelectPolicy(policy); + }} + onPolicyInfoClick={(policyId) => setDrawerPolicyId(policyId)} + onEnterCreationMode={handleEnterCreationMode} + getSectionTitle={getSectionTitle} + /> + setDrawerPolicyId(null)} + onSelect={() => { + if (drawerPolicy) { + handleSelectPolicy(drawerPolicy); + setDrawerPolicyId(null); + } + }} + onEdit={() => { + if (drawerPolicy) { + handleOpenInEditor(drawerPolicy); + } + }} + /> + + ); + }; + + // ========== Render ========== + + // Header title based on editor mode + const getEditorHeaderTitle = () => { + if (editorMode === 'display') { + return 'Policy details'; + } + if (editorMode === 'edit') { + return 'Edit policy'; + } + return 'Policy editor'; + }; + + return ( + <> + } + headerTitle={isCreationMode ? getEditorHeaderTitle() : 'Select policy'} + headerSubtitle={ + isCreationMode ? undefined : 'Choose an existing policy or create a new one' + } + colorConfig={colorConfig} + sidebarSections={isCreationMode ? undefined : browseSidebarSections} + renderSidebar={isCreationMode ? renderCreationSidebar : undefined} + sidebarWidth={isCreationMode ? 280 : undefined} + renderMainContent={renderMainContent} + footer={ + isCreationMode ? ( +
+ +
+ {modificationCount > 0 && ( + setActiveTab('overview')} + onMouseEnter={() => setFooterHovered(true)} + onMouseLeave={() => setFooterHovered(false)} + > +
+ + {modificationCount} parameter{modificationCount !== 1 ? 's' : ''} modified + + + )} +
+ + {editorMode === 'create' && ( + + )} + {editorMode === 'display' && ( + setEditorMode('edit')} + /> + )} + {editorMode === 'edit' && ( + <> + + + + )} + +
+ ) : undefined + } + contentPadding={isCreationMode ? 0 : undefined} + /> + + !open && setShowSameNameWarning(false)} + > + + + Same name + + + + Both the original and new policy will have the name "{policyLabel.trim()}". + Are you sure you want to save? + + + + + + + + + + ); +} diff --git a/app/src/pages/reportBuilder/modals/PolicyCreationModal.tsx b/app/src/pages/reportBuilder/modals/PolicyCreationModal.tsx new file mode 100644 index 000000000..761743d44 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/PolicyCreationModal.tsx @@ -0,0 +1,714 @@ +/** + * PolicyCreationModal - Standalone policy creation modal + * + * This modal provides: + * - Parameter tree navigation (sidebar) with "Policy overview" menu item + * - Overview shows naming, param grid, and action buttons in main area + * - Selecting a parameter shows the value setter / chart editor in main area + * - Policy creation with API integration + */ + +import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import { IconScale, IconX } from '@tabler/icons-react'; +import { useSelector } from 'react-redux'; +import { PolicyAdapter } from '@/adapters'; +import { createPolicy as createPolicyApi } from '@/api/policy'; +import { + EditAndSaveNewButton, + EditAndUpdateButton, + EditDefaultButton, +} from '@/components/common/ActionButtons'; +import { Button } from '@/components/ui/button'; +import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog'; +import { Group } from '@/components/ui/Group'; +import { Spinner } from '@/components/ui/Spinner'; +import { Stack } from '@/components/ui/Stack'; +import { Text } from '@/components/ui/Text'; +import { colors, spacing } from '@/designTokens'; +import { useCreatePolicy } from '@/hooks/useCreatePolicy'; +import { useCurrentCountry } from '@/hooks/useCurrentCountry'; +import { useUpdatePolicyAssociation } from '@/hooks/useUserPolicy'; +import { getDateRange, selectSearchableParameters } from '@/libs/metadataUtils'; +import { ValueSetterMode } from '@/pathways/report/components/valueSetters'; +import { RootState } from '@/store'; +import { Policy } from '@/types/ingredients/Policy'; +import { ParameterMetadata } from '@/types/metadata/parameterMetadata'; +import { PolicyStateProps } from '@/types/pathwayState'; +import { PolicyCreationPayload } from '@/types/payloads'; +import { Parameter } from '@/types/subIngredients/parameter'; +import { + ValueInterval, + ValueIntervalCollection, + ValuesList, +} from '@/types/subIngredients/valueInterval'; +import { countPolicyModifications } from '@/utils/countParameterChanges'; +import { formatPeriod } from '@/utils/dateUtils'; +import { formatLabelParts, getHierarchicalLabels } from '@/utils/parameterLabels'; +import { formatParameterValue } from '@/utils/policyTableHelpers'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../constants'; +import { + ChangesCard, + EditorMode, + EmptyParameterState, + HistoricalValuesCard, + ModifiedParam, + ParameterHeaderCard, + ParameterSidebar, + PolicyOverviewContent, + SidebarTab, + ValueSetterCard, +} from './policyCreation'; + +interface PolicyCreationModalProps { + isOpen: boolean; + onClose: () => void; + onPolicyCreated: (policy: PolicyStateProps) => void; + simulationIndex: number; + initialPolicy?: PolicyStateProps; + initialEditorMode?: EditorMode; + initialAssociationId?: string; +} + +export function PolicyCreationModal({ + isOpen, + onClose, + onPolicyCreated, + simulationIndex, + initialPolicy, + initialEditorMode, + initialAssociationId, +}: PolicyCreationModalProps) { + const countryId = useCurrentCountry(); + + // Get metadata from Redux state + const { + parameterTree, + parameters, + loading: metadataLoading, + } = useSelector((state: RootState) => state.metadata); + const { minDate, maxDate } = useSelector(getDateRange); + + // Local policy state + const [policyLabel, setPolicyLabel] = useState(''); + const [policyParameters, setPolicyParameters] = useState([]); + + // Sidebar tab state -- controls main content area + const [activeTab, setActiveTab] = useState('overview'); + + // Parameter selection state + const [selectedParam, setSelectedParam] = useState(null); + const [expandedMenuItems, setExpandedMenuItems] = useState>(new Set()); + + // Value setter state + const [valueSetterMode, setValueSetterMode] = useState(ValueSetterMode.DEFAULT); + const [intervals, setIntervals] = useState([]); + const [startDate, setStartDate] = useState('2025-01-01'); + const [endDate, setEndDate] = useState('2025-12-31'); + + // Parameter search state + const [parameterSearch, setParameterSearch] = useState(''); + const [hoveredParamName, setHoveredParamName] = useState(null); + const [footerHovered, setFooterHovered] = useState(false); + + // API hooks + const { createPolicy, isPending: isCreating } = useCreatePolicy(policyLabel || undefined); + const updatePolicyAssociation = useUpdatePolicyAssociation(); + const [isUpdating, setIsUpdating] = useState(false); + + // Suppress unused variable warning + void simulationIndex; + + // Editor mode: create (new policy), display (read-only existing), edit (modifying existing) + const [editorMode, setEditorMode] = useState( + initialEditorMode || (initialPolicy ? 'edit' : 'create') + ); + const isReadOnly = editorMode === 'display'; + const colorConfig = INGREDIENT_COLORS.policy; + + // Reset state when modal opens; pre-populate from initialPolicy when editing + useEffect(() => { + if (isOpen) { + setPolicyLabel(initialPolicy?.label || ''); + setPolicyParameters(initialPolicy?.parameters || []); + setEditorMode(initialEditorMode || (initialPolicy ? 'edit' : 'create')); + setActiveTab('overview'); + setSelectedParam(null); + setExpandedMenuItems(new Set()); + setIntervals([]); + setParameterSearch(''); + } + }, [isOpen, initialEditorMode]); // initialPolicy intentionally not in deps -- only read on open transition + + // Create local policy state object for components + const localPolicy: PolicyStateProps = useMemo( + () => ({ + label: policyLabel, + parameters: policyParameters, + }), + [policyLabel, policyParameters] + ); + + // Count modifications + const modificationCount = countPolicyModifications(localPolicy); + + // Get modified parameter data for the Changes section + const modifiedParams: ModifiedParam[] = useMemo(() => { + return policyParameters.map((p) => { + const metadata = parameters[p.name]; + const hierarchicalLabels = getHierarchicalLabels(p.name, parameters); + const displayLabel = + hierarchicalLabels.length > 0 + ? formatLabelParts(hierarchicalLabels) + : p.name.split('.').pop() || p.name; + + const changes = p.values.map((interval) => ({ + period: formatPeriod(interval.startDate, interval.endDate), + value: formatParameterValue(interval.value, metadata?.unit), + })); + + return { + paramName: p.name, + label: displayLabel, + changes, + }; + }); + }, [policyParameters, parameters]); + + // Get searchable parameters from memoized selector + const searchableParameters = useSelector(selectSearchableParameters); + + // Handle search selection - expand tree path and select parameter + const handleSearchSelect = useCallback( + (paramName: string) => { + const param = parameters[paramName]; + if (!param || param.type !== 'parameter') { + return; + } + + const pathParts = paramName.split('.'); + const newExpanded = new Set(expandedMenuItems); + let currentPath = ''; + for (let i = 0; i < pathParts.length - 1; i++) { + currentPath = currentPath ? `${currentPath}.${pathParts[i]}` : pathParts[i]; + newExpanded.add(currentPath); + } + setExpandedMenuItems(newExpanded); + setSelectedParam(param); + setIntervals([]); + setValueSetterMode(ValueSetterMode.DEFAULT); + setParameterSearch(''); + // Auto-switch to parameters tab when selecting from search + setActiveTab('parameters'); + }, + [parameters, expandedMenuItems] + ); + + // Handle menu item click + const handleMenuItemClick = useCallback( + (paramName: string) => { + const param = parameters[paramName]; + if (param && param.type === 'parameter') { + setSelectedParam(param); + setIntervals([]); + setValueSetterMode(ValueSetterMode.DEFAULT); + // Auto-switch to parameters tab when selecting a parameter + setActiveTab('parameters'); + } + setExpandedMenuItems((prev) => { + const newSet = new Set(prev); + if (newSet.has(paramName)) { + newSet.delete(paramName); + } else { + newSet.add(paramName); + } + return newSet; + }); + }, + [parameters] + ); + + // Handle parameter selection from changes card + const handleSelectParam = useCallback( + (paramName: string) => { + const metadata = parameters[paramName]; + if (metadata) { + setSelectedParam(metadata); + } + }, + [parameters] + ); + + // Handle value submission + const handleValueSubmit = useCallback(() => { + if (!selectedParam || intervals.length === 0) { + return; + } + + const updatedParameters = [...policyParameters]; + let existingParam = updatedParameters.find((p) => p.name === selectedParam.parameter); + + if (!existingParam) { + existingParam = { name: selectedParam.parameter, values: [] }; + updatedParameters.push(existingParam); + } + + const paramCollection = new ValueIntervalCollection(existingParam.values); + intervals.forEach((interval) => { + paramCollection.addInterval(interval); + }); + + existingParam.values = paramCollection.getIntervals(); + setPolicyParameters(updatedParameters); + setIntervals([]); + }, [selectedParam, intervals, policyParameters]); + + // Handle policy creation + const handleCreatePolicy = useCallback(async () => { + const policyData: Partial = { + parameters: policyParameters, + }; + + const payload: PolicyCreationPayload = PolicyAdapter.toCreationPayload(policyData as Policy); + + try { + const result = await createPolicy(payload); + const createdPolicy: PolicyStateProps = { + id: result.result.policy_id, + label: policyLabel || null, + parameters: policyParameters, + }; + onPolicyCreated(createdPolicy); + onClose(); + } catch (error) { + console.error('Failed to create policy:', error); + } + }, [policyLabel, policyParameters, createPolicy, onPolicyCreated, onClose]); + + // Same-name warning for "Save as new" when name matches original + const [showSameNameWarning, setShowSameNameWarning] = useState(false); + + // Unnamed-policy warning for creating/saving without a name + const [showUnnamedWarning, setShowUnnamedWarning] = useState(false); + + const handleSaveAsNewPolicy = useCallback(() => { + const currentName = (policyLabel || '').trim(); + const originalName = (initialPolicy?.label || '').trim(); + if (editorMode === 'edit' && currentName && currentName === originalName) { + setShowSameNameWarning(true); + } else { + handleCreatePolicy(); + } + }, [policyLabel, initialPolicy?.label, editorMode, handleCreatePolicy]); + + // Handle updating an existing policy (create new base policy, update association) + const handleUpdateExistingPolicy = useCallback(async () => { + if (!policyLabel.trim() || !initialAssociationId) { + return; + } + setIsUpdating(true); + + const policyData: Partial = { parameters: policyParameters }; + const payload: PolicyCreationPayload = PolicyAdapter.toCreationPayload(policyData as Policy); + + try { + const result = await createPolicyApi(countryId, payload); + const newPolicyId = result.result.policy_id; + + await updatePolicyAssociation.mutateAsync({ + userPolicyId: initialAssociationId, + updates: { policyId: newPolicyId, label: policyLabel }, + }); + + onPolicyCreated({ + id: newPolicyId, + label: policyLabel || null, + parameters: policyParameters, + }); + onClose(); + } catch (error) { + console.error('Failed to update policy:', error); + setIsUpdating(false); + } + }, [ + policyLabel, + policyParameters, + initialAssociationId, + countryId, + updatePolicyAssociation, + onPolicyCreated, + onClose, + ]); + + // Get base and reform values for chart + const getChartValues = () => { + if (!selectedParam) { + return { baseValues: null, reformValues: null }; + } + + const baseValues = new ValueIntervalCollection(selectedParam.values as ValuesList); + const reformValues = new ValueIntervalCollection(baseValues); + + const paramToChart = policyParameters.find((p) => p.name === selectedParam.parameter); + if (paramToChart && paramToChart.values && paramToChart.values.length > 0) { + const userIntervals = new ValueIntervalCollection(paramToChart.values as ValuesList); + for (const interval of userIntervals.getIntervals()) { + reformValues.addInterval(interval); + } + } + + return { baseValues, reformValues }; + }; + + const { baseValues, reformValues } = getChartValues(); + + // ========================================================================= + // OVERVIEW CONTENT -- shown when "Policy overview" tab is active + // ========================================================================= + + const renderOverviewContent = () => ( +
+
+ +
+
+ ); + + // ========================================================================= + // PARAMETERS CONTENT -- shown when "Parameters" tab is active + // ========================================================================= + + const renderParametersContent = () => ( +
+ {!selectedParam ? ( + + ) : ( +
+ + + + + {!isReadOnly && ( + + )} + p.paramName === selectedParam?.parameter + )} + modificationCount={modificationCount} + selectedParamName={selectedParam?.parameter} + onSelectParam={handleSelectParam} + /> + + + + +
+ )} +
+ ); + + return ( + { + if (!open) { + onClose(); + } + }} + > + + + {editorMode === 'display' + ? 'Policy details' + : editorMode === 'edit' + ? 'Edit policy' + : 'Policy editor'} + + + Create or edit a policy reform by modifying parameter values. + + {/* Header */} +
+ + +
+ +
+ + {editorMode === 'display' + ? 'Policy details' + : editorMode === 'edit' + ? 'Edit policy' + : 'Policy editor'} + + + + +
+ + {/* Main content area */} +
+ {/* Left Sidebar - Parameter Tree with tabs */} + + + {/* Main Content -- switches based on active tab */} + {activeTab === 'overview' ? renderOverviewContent() : renderParametersContent()} +
+ + {/* Footer -- unified mode bar */} +
+
+ +
+ {modificationCount > 0 && ( + setActiveTab('overview')} + onMouseEnter={() => setFooterHovered(true)} + onMouseLeave={() => setFooterHovered(false)} + > +
+ + {modificationCount} parameter{modificationCount !== 1 ? 's' : ''} modified + + + )} +
+ + {editorMode === 'create' && ( + + )} + {editorMode === 'display' && ( + setEditorMode('edit')} /> + )} + {editorMode === 'edit' && ( + <> + + { + if (!policyLabel.trim()) { + setShowUnnamedWarning(true); + } else { + handleSaveAsNewPolicy(); + } + }} + loading={isCreating} + disabled={isUpdating} + /> + + )} + +
+
+ + {/* Same-name warning modal */} + { + if (!open) { + setShowSameNameWarning(false); + } + }} + > + + + Same name + + + Confirm saving a policy with the same name + + + + Both the original and new policy will have the name “ + {policyLabel}”. Are you sure you want to save? + + + + + + + + + + {/* Unnamed policy warning modal */} + { + if (!open) { + setShowUnnamedWarning(false); + } + }} + > + + + Unnamed policy + + + Confirm saving an unnamed policy + + + + This policy has no name. Are you sure you want to save it without a name? + + + + + + + + + +
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/PopulationBrowseModal.tsx b/app/src/pages/reportBuilder/modals/PopulationBrowseModal.tsx new file mode 100644 index 000000000..2d0b993ab --- /dev/null +++ b/app/src/pages/reportBuilder/modals/PopulationBrowseModal.tsx @@ -0,0 +1,633 @@ +/** + * PopulationBrowseModal - Geography and household selection modal + * + * Uses BrowseModalTemplate for visual layout and delegates to sub-components: + * - Browse mode: PopulationBrowseContent for main content + * - Creation mode: HouseholdCreationContent + PopulationStatusHeader + */ +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { + IconChevronRight, + IconFolder, + IconHome, + IconPlus, + IconStar, + IconUsers, +} from '@tabler/icons-react'; +import { useQueryClient } from '@tanstack/react-query'; +import { useSelector } from 'react-redux'; +import { HouseholdAdapter } from '@/adapters/HouseholdAdapter'; +import { geographyUsageStore, householdUsageStore } from '@/api/usageTracking'; +import { UKOutlineIcon, USOutlineIcon } from '@/components/icons/CountryOutlineIcons'; +import { Group } from '@/components/ui/Group'; +import { Stack } from '@/components/ui/Stack'; +import { Text } from '@/components/ui/Text'; +import { CURRENT_YEAR, MOCK_USER_ID } from '@/constants'; +import { colors, spacing } from '@/designTokens'; +import { useCreateHousehold } from '@/hooks/useCreateHousehold'; +import { useCurrentCountry } from '@/hooks/useCurrentCountry'; +import { useUserHouseholds } from '@/hooks/useUserHousehold'; +import { getBasicInputFields } from '@/libs/metadataUtils'; +import { householdAssociationKeys } from '@/libs/queryKeys'; +import { RootState } from '@/store'; +import { Geography } from '@/types/ingredients/Geography'; +import { Household } from '@/types/ingredients/Household'; +import { PopulationStateProps } from '@/types/pathwayState'; +import { generateGeographyLabel } from '@/utils/geographyUtils'; +import { HouseholdBuilder } from '@/utils/HouseholdBuilder'; +import { + getUKConstituencies, + getUKCountries, + getUKLocalAuthorities, + getUSCongressionalDistricts, + getUSPlaces, + getUSStates, + RegionOption, +} from '@/utils/regionStrategies'; +import { COUNTRY_CONFIG, FONT_SIZES, INGREDIENT_COLORS } from '../constants'; +import { PopulationCategory } from '../types'; +import { BrowseModalTemplate, CreationModeFooter } from './BrowseModalTemplate'; +import { + HouseholdCreationContent, + PopulationBrowseContent, + PopulationStatusHeader, +} from './population'; + +interface PopulationBrowseModalProps { + isOpen: boolean; + onClose: () => void; + onSelect: (population: PopulationStateProps) => void; + onCreateNew: () => void; +} + +export function PopulationBrowseModal({ + isOpen, + onClose, + onSelect, + onCreateNew: _onCreateNew, +}: PopulationBrowseModalProps) { + const countryId = useCurrentCountry() as 'us' | 'uk'; + const userId = MOCK_USER_ID.toString(); + const queryClient = useQueryClient(); + const { data: households, isLoading: householdsLoading } = useUserHouseholds(userId); + const regionOptions = useSelector((state: RootState) => state.metadata.economyOptions.region); + const metadata = useSelector((state: RootState) => state.metadata); + const basicInputFields = useSelector(getBasicInputFields); + + // State + const [searchQuery, setSearchQuery] = useState(''); + const [activeCategory, setActiveCategory] = useState('frequently-selected'); + + // Creation mode state + const [isCreationMode, setIsCreationMode] = useState(false); + const [householdLabel, setHouseholdLabel] = useState(''); + const [householdDraft, setHouseholdDraft] = useState(null); + + // Get report year (default to current year) + const reportYear = CURRENT_YEAR.toString(); + + // Create household hook + const { createHousehold, isPending: isCreating } = useCreateHousehold( + householdLabel || undefined + ); + + // Get all basic non-person fields dynamically + const basicNonPersonFields = useMemo(() => { + return Object.entries(basicInputFields) + .filter(([key]) => key !== 'person') + .flatMap(([, fields]) => fields); + }, [basicInputFields]); + + // Derive marital status and number of children from household draft + const householdPeople = useMemo(() => { + if (!householdDraft) { + return []; + } + return Object.keys(householdDraft.householdData.people || {}); + }, [householdDraft]); + + const maritalStatus = householdPeople.includes('your partner') ? 'married' : 'single'; + const numChildren = householdPeople.filter((p) => p.includes('dependent')).length; + + // Reset state on mount + useEffect(() => { + if (isOpen) { + setSearchQuery(''); + setActiveCategory('frequently-selected'); + setIsCreationMode(false); + setHouseholdLabel(''); + setHouseholdDraft(null); + } + }, [isOpen, countryId]); + + // Get geography categories based on country + const geographyCategories = useMemo(() => { + if (countryId === 'uk') { + const ukCountries = getUKCountries(regionOptions); + const ukConstituencies = getUKConstituencies(regionOptions); + const ukLocalAuthorities = getUKLocalAuthorities(regionOptions); + return [ + { + id: 'countries' as const, + label: 'Countries', + count: ukCountries.length, + regions: ukCountries, + }, + { + id: 'constituencies' as const, + label: 'Constituencies', + count: ukConstituencies.length, + regions: ukConstituencies, + }, + { + id: 'local-authorities' as const, + label: 'Local authorities', + count: ukLocalAuthorities.length, + regions: ukLocalAuthorities, + }, + ]; + } + // US + const usStates = getUSStates(regionOptions); + const usDistricts = getUSCongressionalDistricts(regionOptions); + const usPlaces = getUSPlaces(); + return [ + { + id: 'states' as const, + label: 'States and territories', + count: usStates.length, + regions: usStates, + }, + { + id: 'districts' as const, + label: 'Congressional districts', + count: usDistricts.length, + regions: usDistricts, + }, + { + id: 'places' as const, + label: 'Cities', + count: usPlaces.length, + regions: usPlaces, + }, + ]; + }, [countryId, regionOptions]); + + // Get regions for active category + const activeRegions = useMemo(() => { + const category = geographyCategories.find((c) => c.id === activeCategory); + return category?.regions || []; + }, [activeCategory, geographyCategories]); + + // Transform households with usage tracking sort + const sortedHouseholds = useMemo(() => { + if (!households) { + return []; + } + + return [...households] + .map((h) => { + const householdIdStr = String(h.association.householdId); + const usageTimestamp = householdUsageStore.getLastUsed(householdIdStr); + const sortTimestamp = + usageTimestamp || h.association.updatedAt || h.association.createdAt || ''; + return { + id: householdIdStr, + label: h.association.label || `Household #${householdIdStr}`, + memberCount: h.household?.household_json?.people + ? Object.keys(h.household.household_json.people).length + : 0, + sortTimestamp, + household: h.household, + }; + }) + .sort((a, b) => b.sortTimestamp.localeCompare(a.sortTimestamp)); + }, [households]); + + // Filter regions/households based on search + const filteredRegions = useMemo(() => { + if (!searchQuery.trim()) { + return activeRegions; + } + const query = searchQuery.toLowerCase(); + return activeRegions.filter((r) => r.label.toLowerCase().includes(query)); + }, [activeRegions, searchQuery]); + + const filteredHouseholds = useMemo(() => { + if (!searchQuery.trim()) { + return sortedHouseholds; + } + const query = searchQuery.toLowerCase(); + return sortedHouseholds.filter((h) => h.label.toLowerCase().includes(query)); + }, [sortedHouseholds, searchQuery]); + + // Handle geography selection + const handleSelectGeography = (region: RegionOption | null) => { + const countryConfig = COUNTRY_CONFIG[countryId]; + const geography: Geography = region + ? { + id: `${countryId}-${region.value}`, + countryId, + scope: 'subnational', + geographyId: region.value, + name: region.label, + } + : { + id: countryConfig.geographyId, + countryId, + scope: 'national', + geographyId: countryConfig.geographyId, + }; + + geographyUsageStore.recordUsage(geography.geographyId); + + const label = generateGeographyLabel(geography); + onSelect({ + geography, + household: null, + label, + type: 'geography', + }); + onClose(); + }; + + // Handle household selection + const handleSelectHousehold = (householdData: (typeof sortedHouseholds)[0]) => { + const householdIdStr = String(householdData.id); + householdUsageStore.recordUsage(householdIdStr); + + let household: Household | null = null; + if (householdData.household) { + household = HouseholdAdapter.fromMetadata(householdData.household); + } else { + household = { + id: householdIdStr, + countryId, + householdData: { people: {} }, + }; + } + + const populationState: PopulationStateProps = { + geography: null, + household, + label: householdData.label, + type: 'household', + }; + + onSelect(populationState); + onClose(); + }; + + // Enter creation mode + const handleEnterCreationMode = useCallback(() => { + const builder = new HouseholdBuilder(countryId as 'us' | 'uk', reportYear); + builder.addAdult('you', 30, { employment_income: 0 }); + setHouseholdDraft(builder.build()); + setHouseholdLabel(''); + setIsCreationMode(true); + }, [countryId, reportYear]); + + // Exit creation mode (back to browse) + const handleExitCreationMode = useCallback(() => { + setIsCreationMode(false); + setHouseholdDraft(null); + setHouseholdLabel(''); + }, []); + + // Handle marital status change + const handleMaritalStatusChange = useCallback( + (newStatus: 'single' | 'married') => { + if (!householdDraft) { + return; + } + + const builder = new HouseholdBuilder(countryId as 'us' | 'uk', reportYear); + builder.loadHousehold(householdDraft); + + const hasPartner = householdPeople.includes('your partner'); + + if (newStatus === 'married' && !hasPartner) { + builder.addAdult('your partner', 30, { employment_income: 0 }); + builder.setMaritalStatus('you', 'your partner'); + } else if (newStatus === 'single' && hasPartner) { + builder.removePerson('your partner'); + } + + setHouseholdDraft(builder.build()); + }, + [householdDraft, householdPeople, countryId, reportYear] + ); + + // Handle number of children change + const handleNumChildrenChange = useCallback( + (newCount: number) => { + if (!householdDraft) { + return; + } + + const builder = new HouseholdBuilder(countryId as 'us' | 'uk', reportYear); + builder.loadHousehold(householdDraft); + + const currentChildren = householdPeople.filter((p) => p.includes('dependent')); + const currentChildCount = currentChildren.length; + + if (newCount !== currentChildCount) { + currentChildren.forEach((child) => builder.removePerson(child)); + + if (newCount > 0) { + const hasPartner = householdPeople.includes('your partner'); + const parentIds = hasPartner ? ['you', 'your partner'] : ['you']; + const ordinals = ['first', 'second', 'third', 'fourth', 'fifth']; + + for (let i = 0; i < newCount; i++) { + const childName = `your ${ordinals[i] || `${i + 1}th`} dependent`; + builder.addChild(childName, 10, parentIds, { employment_income: 0 }); + } + } + } + + setHouseholdDraft(builder.build()); + }, + [householdDraft, householdPeople, countryId, reportYear] + ); + + // Handle household creation submission + const handleCreateHousehold = useCallback(async () => { + if (!householdDraft || !householdLabel.trim()) { + return; + } + + const payload = HouseholdAdapter.toCreationPayload(householdDraft.householdData, countryId); + + try { + const result = await createHousehold(payload); + const householdId = result.result.household_id.toString(); + + householdUsageStore.recordUsage(householdId); + + const createdHousehold: Household = { + ...householdDraft, + id: householdId, + }; + + const populationState = { + geography: null, + household: createdHousehold, + label: householdLabel, + type: 'household' as const, + }; + + await queryClient.refetchQueries({ + queryKey: householdAssociationKeys.byUser(userId, countryId), + }); + + onSelect(populationState); + onClose(); + } catch (err) { + console.error('Failed to create household:', err); + } + }, [ + householdDraft, + householdLabel, + countryId, + createHousehold, + onSelect, + onClose, + queryClient, + userId, + ]); + + const colorConfig = INGREDIENT_COLORS.population; + + // Get section title + const getSectionTitle = () => { + if (activeCategory === 'my-households') { + return 'My households'; + } + const category = geographyCategories.find((c) => c.id === activeCategory); + return category?.label || 'Regions'; + }; + + // Get item count for display + const getItemCount = () => { + if (activeCategory === 'my-households') { + return filteredHouseholds.length; + } + return filteredRegions.length; + }; + + // ========== Sidebar Sections ========== + + const countryConfig = COUNTRY_CONFIG[countryId]; + + const browseSidebarSections = useMemo( + () => [ + { + id: 'geographies', + label: 'Geographies', + items: [ + { + id: 'frequently-selected', + label: 'Frequently selected', + icon: , + isActive: activeCategory === 'frequently-selected' && !isCreationMode, + onClick: () => { + setActiveCategory('frequently-selected'); + setIsCreationMode(false); + }, + }, + ...geographyCategories.map((category) => ({ + id: category.id, + label: category.label, + icon: , + badge: category.count, + isActive: activeCategory === category.id && !isCreationMode, + onClick: () => { + setActiveCategory(category.id); + setIsCreationMode(false); + }, + })), + ], + }, + { + id: 'households', + label: 'Households', + items: [ + { + id: 'my-households', + label: 'My households', + icon: , + badge: sortedHouseholds.length, + isActive: activeCategory === 'my-households' && !isCreationMode, + onClick: () => { + setActiveCategory('my-households'); + setIsCreationMode(false); + }, + }, + { + id: 'create-new', + label: 'Create new household', + icon: , + isActive: isCreationMode, + onClick: handleEnterCreationMode, + }, + ], + }, + ], + [ + activeCategory, + isCreationMode, + geographyCategories, + sortedHouseholds.length, + handleEnterCreationMode, + ] + ); + + // ========== Main Content Rendering ========== + + const renderMainContent = () => { + if (isCreationMode) { + return ( + + ); + } + + if (activeCategory === 'frequently-selected') { + return ( + + + Frequently selected + +
handleSelectGeography(null)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleSelectGeography(null); + } + }} + > + + +
+ {countryId === 'uk' ? : } +
+ + + {countryConfig.nationwideTitle} + + + {countryConfig.nationwideSubtitle} + + + + + +
+ + ); + } + + // Get all congressional districts for StateDistrictSelector (US only) + const allDistricts = + countryId === 'us' + ? geographyCategories.find((c) => c.id === 'districts')?.regions + : undefined; + + return ( + ({ + id: h.id, + label: h.label, + memberCount: h.memberCount, + }))} + householdsLoading={householdsLoading} + getSectionTitle={getSectionTitle} + getItemCount={getItemCount} + onSelectGeography={handleSelectGeography} + onSelectHousehold={(household) => { + const fullHousehold = sortedHouseholds.find((h) => h.id === household.id); + if (fullHousehold) { + handleSelectHousehold(fullHousehold); + } + }} + /> + ); + }; + + return ( + } + headerTitle={isCreationMode ? 'Create household' : 'Household(s)'} + headerSubtitle={ + isCreationMode + ? 'Configure your household composition and details' + : 'Choose a geographic region or create a household' + } + colorConfig={colorConfig} + sidebarSections={browseSidebarSections} + renderMainContent={renderMainContent} + statusHeader={ + isCreationMode ? ( + + ) : undefined + } + footer={ + isCreationMode ? ( + + ) : undefined + } + /> + ); +} diff --git a/app/src/pages/reportBuilder/modals/index.ts b/app/src/pages/reportBuilder/modals/index.ts new file mode 100644 index 000000000..225fe9297 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/index.ts @@ -0,0 +1,5 @@ +export { BrowseModalTemplate, CreationModeFooter } from './BrowseModalTemplate'; +export { IngredientPickerModal } from './IngredientPickerModal'; +export { PolicyBrowseModal } from './PolicyBrowseModal'; +export { PopulationBrowseModal } from './PopulationBrowseModal'; +export { PolicyCreationModal } from './PolicyCreationModal'; diff --git a/app/src/pages/reportBuilder/modals/policy/PolicyBrowseContent.tsx b/app/src/pages/reportBuilder/modals/policy/PolicyBrowseContent.tsx new file mode 100644 index 000000000..b400beeb9 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policy/PolicyBrowseContent.tsx @@ -0,0 +1,277 @@ +/** + * PolicyBrowseContent - Browse mode content (search bar + policy grid) + */ +import { + IconChevronRight, + IconFolder, + IconInfoCircle, + IconPlus, + IconSearch, + IconUsers, +} from '@tabler/icons-react'; +import { Button } from '@/components/ui/button'; +import { Group } from '@/components/ui/Group'; +import { Input } from '@/components/ui/input'; +import { ScrollArea } from '@/components/ui/scroll-area'; +import { Skeleton } from '@/components/ui/skeleton'; +import { Stack } from '@/components/ui/Stack'; +import { Text } from '@/components/ui/Text'; +import { colors, spacing } from '@/designTokens'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../../constants'; + +interface PolicyItem { + id: string; + associationId?: string; + label: string; + paramCount: number; + createdAt?: string; + updatedAt?: string; +} + +type ActiveSection = 'my-policies' | 'public'; + +interface PolicyBrowseContentProps { + displayedPolicies: PolicyItem[]; + searchQuery: string; + setSearchQuery: (query: string) => void; + activeSection: ActiveSection; + isLoading: boolean; + selectedPolicyId: string | null; + onSelectPolicy: (policy: PolicyItem) => void; + onPolicyInfoClick: (policyId: string) => void; + onEnterCreationMode: () => void; + getSectionTitle: () => string; +} + +export function PolicyBrowseContent({ + displayedPolicies, + searchQuery, + setSearchQuery, + activeSection, + isLoading, + selectedPolicyId, + onSelectPolicy, + onPolicyInfoClick, + onEnterCreationMode, + getSectionTitle, +}: PolicyBrowseContentProps) { + const colorConfig = INGREDIENT_COLORS.policy; + + const modalStyles = { + searchBar: { + position: 'relative' as const, + }, + policyGrid: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', + gap: spacing.md, + }, + policyCard: { + background: colors.white, + border: `1px solid ${colors.border.light}`, + borderRadius: spacing.radius.feature, + padding: spacing.lg, + cursor: 'pointer', + transition: 'all 0.2s ease', + position: 'relative' as const, + overflow: 'hidden', + }, + }; + + return ( + +
+
+
+ +
+ setSearchQuery(e.target.value)} + style={{ + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + fontSize: FONT_SIZES.small, + paddingLeft: 34, + }} + /> +
+
+ + + + {getSectionTitle()} + + + {displayedPolicies.length} {displayedPolicies.length === 1 ? 'policy' : 'policies'} + + + + + {isLoading ? ( + + {[1, 2, 3].map((i) => ( + + ))} + + ) : activeSection === 'public' ? ( +
+
+ +
+ + Coming soon + + + Search and browse policies created by other PolicyEngine users. + +
+ ) : displayedPolicies.length === 0 ? ( +
+
+ +
+ + {searchQuery ? 'No policies match your search' : 'No policies yet'} + + + {searchQuery + ? 'Try adjusting your search terms or browse all policies' + : 'Create your first policy to get started'} + + {!searchQuery && ( + + )} +
+ ) : ( +
+ {displayedPolicies.map((policy) => { + const isSelected = selectedPolicyId === policy.id; + return ( +
onSelectPolicy(policy)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onSelectPolicy(policy); + } + }} + > +
+ + + + {policy.label} + + + {policy.paramCount} param{policy.paramCount !== 1 ? 's' : ''} changed + + + + + + + +
+ ); + })} +
+ )} + + + ); +} diff --git a/app/src/pages/reportBuilder/modals/policy/PolicyCreationContent.tsx b/app/src/pages/reportBuilder/modals/policy/PolicyCreationContent.tsx new file mode 100644 index 000000000..a7375d7f0 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policy/PolicyCreationContent.tsx @@ -0,0 +1,353 @@ +/** + * PolicyCreationContent - Main content area for policy creation mode (V6 styled) + */ +import { Dispatch, SetStateAction } from 'react'; +import { IconScale, IconTrash } from '@tabler/icons-react'; +import { Badge } from '@/components/ui/badge'; +import { Button } from '@/components/ui/button'; +import { Group } from '@/components/ui/Group'; +import { SegmentedControl } from '@/components/ui/segmented-control'; +import { Stack } from '@/components/ui/Stack'; +import { Text } from '@/components/ui/Text'; +import { Title } from '@/components/ui/Title'; +import { colors, spacing } from '@/designTokens'; +import HistoricalValues from '@/pathways/report/components/policyParameterSelector/HistoricalValues'; +import { ValueSetterMode } from '@/pathways/report/components/valueSetters'; +import { ParameterMetadata } from '@/types/metadata/parameterMetadata'; +import { PolicyStateProps } from '@/types/pathwayState'; +import { Parameter } from '@/types/subIngredients/parameter'; +import { + ValueInterval, + ValueIntervalCollection, + ValuesList, +} from '@/types/subIngredients/valueInterval'; +import { capitalize } from '@/utils/stringUtils'; +import { FONT_SIZES } from '../../constants'; +import { ValueSetterComponentsV6 } from '../policyCreation/valueSelectors'; + +// Mode selector options for SegmentedControl +const MODE_OPTIONS = [ + { label: 'Default', value: ValueSetterMode.DEFAULT }, + { label: 'Yearly', value: ValueSetterMode.YEARLY }, + { label: 'Date range', value: ValueSetterMode.DATE }, + { label: 'Multi-year', value: ValueSetterMode.MULTI_YEAR }, +]; + +interface PolicyCreationContentProps { + selectedParam: ParameterMetadata | null; + localPolicy: PolicyStateProps; + policyLabel: string; + policyParameters: Parameter[]; + setPolicyParameters: Dispatch>; + minDate: string; + maxDate: string; + intervals: ValueInterval[]; + setIntervals: Dispatch>; + startDate: string; + setStartDate: Dispatch>; + endDate: string; + setEndDate: Dispatch>; + valueSetterMode: ValueSetterMode; + setValueSetterMode: (mode: ValueSetterMode) => void; + onValueSubmit: () => void; + isReadOnly?: boolean; +} + +export function PolicyCreationContent({ + selectedParam, + localPolicy, + policyLabel, + policyParameters, + setPolicyParameters, + minDate, + maxDate, + intervals, + setIntervals, + startDate, + setStartDate, + endDate, + setEndDate, + valueSetterMode, + setValueSetterMode, + onValueSubmit, + isReadOnly = false, +}: PolicyCreationContentProps) { + // Get base and reform values for chart + const getChartValues = () => { + if (!selectedParam) { + return { baseValues: null, reformValues: null }; + } + const baseValues = new ValueIntervalCollection(selectedParam.values as ValuesList); + const reformValues = new ValueIntervalCollection(baseValues); + const paramToChart = policyParameters.find((p) => p.name === selectedParam.parameter); + if (paramToChart && paramToChart.values && paramToChart.values.length > 0) { + const userIntervals = new ValueIntervalCollection(paramToChart.values as ValuesList); + for (const interval of userIntervals.getIntervals()) { + reformValues.addInterval(interval); + } + } + return { baseValues, reformValues }; + }; + + const { baseValues, reformValues } = getChartValues(); + const ValueSetterToRender = ValueSetterComponentsV6[valueSetterMode]; + + // Get changes for the current parameter + const currentParamChanges = selectedParam + ? policyParameters.find((p) => p.name === selectedParam.parameter)?.values || [] + : []; + + // Format a date range for display + const formatPeriod = (interval: ValueInterval): string => { + const start = interval.startDate; + const end = interval.endDate; + if (!end || end === '9999-12-31') { + const year = start.split('-')[0]; + return `${year} onward`; + } + const startYear = start.split('-')[0]; + const endYear = end.split('-')[0]; + if (startYear === endYear) { + return startYear; + } + return `${startYear}-${endYear}`; + }; + + // Format a value for display + const formatValue = (value: number | string | boolean): string => { + if (typeof value === 'boolean') { + return value ? 'Yes' : 'No'; + } + if (typeof value === 'number') { + if (selectedParam?.unit === '/1') { + return `${(value * 100).toFixed(1)}%`; + } + return value.toLocaleString('en-US', { + style: 'currency', + currency: 'USD', + maximumFractionDigits: 0, + }); + } + return String(value); + }; + + // Remove a change from the current parameter + const handleRemoveChange = (indexToRemove: number) => { + if (!selectedParam) { + return; + } + const updatedParameters = policyParameters + .map((param) => { + if (param.name === selectedParam.parameter) { + return { + ...param, + values: param.values.filter((_, i) => i !== indexToRemove), + }; + } + return param; + }) + .filter((param) => param.values.length > 0); + setPolicyParameters(updatedParameters); + }; + + if (!selectedParam) { + return ( +
+ +
+ +
+ + {isReadOnly + ? 'Select a parameter from the menu to view its details.' + : 'Select a parameter from the menu to modify its value for your policy reform.'} + + +
+ ); + } + + return ( +
+ + {/* Parameter Header Card */} +
+ + {capitalize(selectedParam.label || 'Label unavailable')} + + {selectedParam.description && ( + + {selectedParam.description} + + )} +
+ + {/* 50/50 Split Content */} + + {/* Left Column: Setter + Changes */} + + {/* Value Setter Card -- hidden in read-only mode */} + {!isReadOnly && ( +
+ + + Set new value + + + {/* Mode selector - SegmentedControl per V6 mockup */} + { + setIntervals([]); + setValueSetterMode(value as ValueSetterMode); + }} + size="xs" + options={MODE_OPTIONS} + /> + + + + + +
+ )} + + {/* Changes for this parameter */} + {currentParamChanges.length > 0 && ( +
+ + + Changes for this parameter + + {currentParamChanges.length} + + + {currentParamChanges.map((change, i) => ( + + + {formatPeriod(change)} + + + + {formatValue(change.value)} + + {!isReadOnly && ( + + )} + + + ))} + +
+ )} + + + {/* Right Column: Historical Values Chart */} +
+ + + Historical values + + {baseValues && reformValues && ( + + )} + +
+ + +
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/policy/PolicyDetailsDrawer.tsx b/app/src/pages/reportBuilder/modals/policy/PolicyDetailsDrawer.tsx new file mode 100644 index 000000000..3a1ac90ac --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policy/PolicyDetailsDrawer.tsx @@ -0,0 +1,161 @@ +/** + * PolicyDetailsDrawer - Sliding panel showing policy parameter details + */ +import { useMemo, useState } from 'react'; +import { IconChevronRight, IconPencil, IconX } from '@tabler/icons-react'; +import { Button } from '@/components/ui/button'; +import { Group } from '@/components/ui/Group'; +import { Stack } from '@/components/ui/Stack'; +import { Text } from '@/components/ui/Text'; +import { colors, spacing } from '@/designTokens'; +import { ParameterTreeNode } from '@/libs/buildParameterTree'; +import { ParameterMetadata } from '@/types/metadata/parameterMetadata'; +import { Parameter } from '@/types/subIngredients/parameter'; +import { formatPeriod } from '@/utils/dateUtils'; +import { formatLabelParts, getHierarchicalLabelsFromTree } from '@/utils/parameterLabels'; +import { formatParameterValue } from '@/utils/policyTableHelpers'; +import { FONT_SIZES } from '../../constants'; +import { PolicyOverviewContent } from '../policyCreation'; + +interface PolicyDetailsDrawerProps { + policy: { + id: string; + associationId?: string; + label: string; + paramCount: number; + parameters: Parameter[]; + } | null; + parameters: Record; + parameterTree: ParameterTreeNode | null | undefined; + onClose: () => void; + onSelect: () => void; + onEdit?: () => void; +} + +export function PolicyDetailsDrawer({ + policy, + parameters, + parameterTree, + onClose, + onSelect, + onEdit, +}: PolicyDetailsDrawerProps) { + const [hoveredParamName, setHoveredParamName] = useState(null); + + const modifiedParams = useMemo(() => { + if (!policy) { + return []; + } + return policy.parameters.map((param) => { + const hierarchicalLabels = getHierarchicalLabelsFromTree(param.name, parameterTree); + const displayLabel = + hierarchicalLabels.length > 0 + ? formatLabelParts(hierarchicalLabels) + : param.name.split('.').pop() || param.name; + const metadata = parameters[param.name]; + const changes = (param.values || []).map((interval) => ({ + period: formatPeriod(interval.startDate, interval.endDate), + value: formatParameterValue(interval.value, metadata?.unit ?? undefined), + })); + return { paramName: param.name, label: displayLabel, changes }; + }); + }, [policy, parameters, parameterTree]); + + return ( + <> + {/* Overlay */} + {!!policy && ( +
{ + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onClose(); + } + }} + aria-label="Close drawer" + /> + )} + + {/* Drawer */} + {!!policy && ( + // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions +
e.stopPropagation()} + onKeyDown={(e) => e.stopPropagation()} + > +
+ + + Policy details + + + +
+
+ {}} + isReadOnly + modificationCount={policy.paramCount} + modifiedParams={modifiedParams} + hoveredParamName={hoveredParamName} + onHoverParam={setHoveredParamName} + onClickParam={() => {}} + /> +
+
+ + + {onEdit && ( + + )} + +
+
+ )} + + ); +} diff --git a/app/src/pages/reportBuilder/modals/policy/PolicyParameterTree.tsx b/app/src/pages/reportBuilder/modals/policy/PolicyParameterTree.tsx new file mode 100644 index 000000000..b9ff4c432 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policy/PolicyParameterTree.tsx @@ -0,0 +1,260 @@ +/** + * PolicyParameterTree - Parameter tree navigation for policy creation mode + * + * When activeTab / onTabChange are provided, renders a "Policy overview" + * menu item above the search box. The item controls the main content + * area — the sidebar itself always shows the parameter search + tree. + */ +import { useCallback, useMemo, useState } from 'react'; +import { + IconChevronDown, + IconChevronRight, + IconListDetails, + IconSearch, +} from '@tabler/icons-react'; +import { useSelector } from 'react-redux'; +import { + Command, + CommandItem, + CommandList, + Input, + Popover, + PopoverContent, + PopoverTrigger, + ScrollArea, + Skeleton, + Stack, + Text, +} from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { selectSearchableParameters } from '@/libs/metadataUtils'; +import { ParameterTreeNode } from '@/types/metadata'; +import { ParameterMetadata } from '@/types/metadata/parameterMetadata'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../../constants'; +import { modalStyles } from '../../styles'; +import type { SidebarTab } from '../policyCreation/types'; + +interface PolicyParameterTreeProps { + parameterTree: ParameterTreeNode | null; + parameters: Record; + metadataLoading: boolean; + selectedParam: ParameterMetadata | null; + expandedMenuItems: Set; + parameterSearch: string; + setParameterSearch: (search: string) => void; + onMenuItemClick: (paramName: string) => void; + onSearchSelect: (paramName: string) => void; + /** Active sidebar tab — when provided, renders tab buttons above search */ + activeTab?: SidebarTab; + /** Called when the user clicks a tab */ + onTabChange?: (tab: SidebarTab) => void; +} + +export function PolicyParameterTree({ + parameterTree, + parameters: _parameters, + metadataLoading, + selectedParam, + expandedMenuItems, + parameterSearch, + setParameterSearch, + onMenuItemClick, + onSearchSelect, + activeTab, + onTabChange, +}: PolicyParameterTreeProps) { + const hasOverview = activeTab !== undefined && onTabChange !== undefined; + const colorConfig = INGREDIENT_COLORS.policy; + const [searchOpen, setSearchOpen] = useState(false); + + // Get searchable parameters from memoized selector (computed once when metadata loads) + const searchableParameters = useSelector(selectSearchableParameters); + + // Filter search results + const filteredSearchResults = useMemo(() => { + if (!parameterSearch.trim()) { + return []; + } + const query = parameterSearch.toLowerCase(); + return searchableParameters.filter((p) => p.label.toLowerCase().includes(query)).slice(0, 20); + }, [parameterSearch, searchableParameters]); + + // Render nested menu recursively + const renderMenuItems = useCallback( + (items: ParameterTreeNode[]): React.ReactNode => { + return items + .filter((item) => !item.name.includes('pycache')) + .map((item) => { + const isActive = activeTab !== 'overview' && selectedParam?.parameter === item.name; + const isExpanded = expandedMenuItems.has(item.name); + const hasChildren = !!item.children?.length; + const ChevronIcon = isExpanded ? IconChevronDown : IconChevronRight; + + return ( +
+ + {hasChildren && isExpanded && ( +
{renderMenuItems(item.children!)}
+ )} +
+ ); + }); + }, + [activeTab, selectedParam?.parameter, expandedMenuItems, onMenuItemClick, colorConfig] + ); + + // Memoize the rendered tree + const renderedMenuTree = useMemo(() => { + if (metadataLoading || !parameterTree) { + return null; + } + return renderMenuItems(parameterTree.children || []); + }, [metadataLoading, parameterTree, renderMenuItems]); + + return ( +
+ {/* Policy overview menu item (optional) */} + {hasOverview && ( +
+ +
+ )} + + {/* Search + tree — always visible */} +
+ {!hasOverview && ( + + PARAMETERS + + )} + 0} onOpenChange={setSearchOpen}> + +
+ + { + setParameterSearch(e.target.value); + setSearchOpen(true); + }} + onFocus={() => setSearchOpen(true)} + className="tw:pl-8 tw:h-8" + style={{ fontSize: FONT_SIZES.small }} + /> +
+ + e.preventDefault()} + > + + + {filteredSearchResults.map((item) => ( + { + onSearchSelect(item.value); + setSearchOpen(false); + }} + style={{ fontSize: FONT_SIZES.small, padding: `${spacing.xs} ${spacing.sm}` }} + > + {item.label} + + ))} + + + + +
+ +
+ {metadataLoading || !parameterTree ? ( + + + + + + ) : ( + renderedMenuTree + )} +
+ +
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/policy/PolicyStatusHeader.tsx b/app/src/pages/reportBuilder/modals/policy/PolicyStatusHeader.tsx new file mode 100644 index 000000000..53546a599 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policy/PolicyStatusHeader.tsx @@ -0,0 +1,93 @@ +/** + * PolicyStatusHeader - Glassmorphic status bar for policy creation mode + */ +import { IconScale } from '@tabler/icons-react'; +import { Group, Text } from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { EditableLabel } from '../../components/EditableLabel'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../../constants'; + +interface PolicyStatusHeaderProps { + policyLabel: string; + setPolicyLabel: (label: string) => void; + modificationCount: number; +} + +export function PolicyStatusHeader({ + policyLabel, + setPolicyLabel, + modificationCount, +}: PolicyStatusHeaderProps) { + const colorConfig = INGREDIENT_COLORS.policy; + + const dockStyles = { + statusHeader: { + background: 'rgba(255, 255, 255, 0.95)', + backdropFilter: 'blur(20px) saturate(180%)', + WebkitBackdropFilter: 'blur(20px) saturate(180%)', + borderRadius: spacing.radius.feature, + border: `1px solid ${modificationCount > 0 ? colorConfig.border : colors.border.light}`, + boxShadow: + modificationCount > 0 + ? `0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px ${colorConfig.border}` + : `0 2px 12px ${colors.shadow.light}`, + padding: `${spacing.sm} ${spacing.lg}`, + transition: 'all 0.3s ease', + margin: spacing.md, + marginBottom: 0, + }, + }; + + return ( +
+ + +
+ +
+ + + + + {modificationCount > 0 ? ( + <> +
+ + {modificationCount} parameter{modificationCount !== 1 ? 's' : ''} modified + + + ) : ( + + No changes yet + + )} + + + +
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/policy/index.ts b/app/src/pages/reportBuilder/modals/policy/index.ts new file mode 100644 index 000000000..ba38a34f4 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policy/index.ts @@ -0,0 +1,8 @@ +/** + * Policy modal sub-components + */ +export { PolicyStatusHeader } from './PolicyStatusHeader'; +export { PolicyParameterTree } from './PolicyParameterTree'; +export { PolicyCreationContent } from './PolicyCreationContent'; +export { PolicyBrowseContent } from './PolicyBrowseContent'; +export { PolicyDetailsDrawer } from './PolicyDetailsDrawer'; diff --git a/app/src/pages/reportBuilder/modals/policyCreation/ChangesCard.tsx b/app/src/pages/reportBuilder/modals/policyCreation/ChangesCard.tsx new file mode 100644 index 000000000..8e626107f --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/ChangesCard.tsx @@ -0,0 +1,82 @@ +/** + * ChangesCard - Displays list of modified parameters with their changes + */ + +import React from 'react'; +import { Group, Stack, Text } from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { FONT_SIZES } from '../../constants'; +import { ChangesCardProps } from './types'; + +export function ChangesCard({ + modifiedParams, + modificationCount, + selectedParamName, + onSelectParam, +}: ChangesCardProps) { + if (modifiedParams.length === 0) { + return null; + } + + return ( +
+ + + Changes for this parameter + +
+ {modificationCount} +
+ + + {modifiedParams.map((param) => ( + + ))} + +
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/EmptyParameterState.tsx b/app/src/pages/reportBuilder/modals/policyCreation/EmptyParameterState.tsx new file mode 100644 index 000000000..34ee93cad --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/EmptyParameterState.tsx @@ -0,0 +1,52 @@ +/** + * EmptyParameterState - Displayed when no parameter is selected + */ + +import React from 'react'; +import { IconScale } from '@tabler/icons-react'; +import { Stack, Text } from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { FONT_SIZES } from '../../constants'; +import { EmptyParameterStateProps } from './types'; + +export function EmptyParameterState({ + message = 'Select a parameter from the menu to modify its value for your policy reform.', +}: EmptyParameterStateProps) { + return ( +
+ +
+ +
+ + {message} + + +
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/HistoricalValuesCard.tsx b/app/src/pages/reportBuilder/modals/policyCreation/HistoricalValuesCard.tsx new file mode 100644 index 000000000..f4274c9c0 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/HistoricalValuesCard.tsx @@ -0,0 +1,45 @@ +/** + * HistoricalValuesCard - Card wrapper for the historical values chart + */ + +import React from 'react'; +import { Stack, Text } from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import HistoricalValues from '@/pathways/report/components/policyParameterSelector/HistoricalValues'; +import { FONT_SIZES } from '../../constants'; +import { HistoricalValuesCardProps } from './types'; + +export function HistoricalValuesCard({ + selectedParam, + baseValues, + reformValues, + policyLabel, +}: HistoricalValuesCardProps) { + return ( +
+ + + Historical values + + {baseValues && reformValues && ( + + )} + +
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/ParameterHeaderCard.tsx b/app/src/pages/reportBuilder/modals/policyCreation/ParameterHeaderCard.tsx new file mode 100644 index 000000000..1edebc086 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/ParameterHeaderCard.tsx @@ -0,0 +1,30 @@ +/** + * ParameterHeaderCard - Displays the selected parameter name and description + */ + +import React from 'react'; +import { Text, Title } from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { capitalize } from '@/utils/stringUtils'; +import { FONT_SIZES } from '../../constants'; +import { ParameterHeaderCardProps } from './types'; + +export function ParameterHeaderCard({ label, description }: ParameterHeaderCardProps) { + return ( +
+ + {capitalize(label || 'Label unavailable')} + + {description && ( + {description} + )} +
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/ParameterSidebar.tsx b/app/src/pages/reportBuilder/modals/policyCreation/ParameterSidebar.tsx new file mode 100644 index 000000000..f190eeb8f --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/ParameterSidebar.tsx @@ -0,0 +1,243 @@ +/** + * ParameterSidebar - Left sidebar with parameter search and tree navigation + * + * When activeTab / onTabChange are provided, renders a "Policy overview" + * menu item above the search box. The item controls the main content + * area — the sidebar itself always shows the parameter search + tree. + */ + +import React, { useCallback, useMemo, useState } from 'react'; +import { + IconChevronDown, + IconChevronRight, + IconListDetails, + IconSearch, +} from '@tabler/icons-react'; +import { + Command, + CommandItem, + CommandList, + Input, + Popover, + PopoverContent, + PopoverTrigger, + ScrollArea, + Skeleton, + Stack, + Text, +} from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { ParameterTreeNode } from '@/types/metadata'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../../constants'; +import { modalStyles } from '../../styles'; +import { ParameterSidebarProps } from './types'; + +export function ParameterSidebar({ + parameterTree, + metadataLoading, + selectedParam, + expandedMenuItems, + parameterSearch, + searchableParameters, + onSearchChange, + onSearchSelect, + onMenuItemClick, + activeTab, + onTabChange, +}: ParameterSidebarProps) { + const hasOverview = activeTab !== undefined && onTabChange !== undefined; + const colorConfig = INGREDIENT_COLORS.policy; + const [searchOpen, setSearchOpen] = useState(false); + + // Filter search results + const filteredSearchResults = useMemo(() => { + if (!parameterSearch.trim()) { + return []; + } + const query = parameterSearch.toLowerCase(); + return searchableParameters.filter((p) => p.label.toLowerCase().includes(query)).slice(0, 20); + }, [parameterSearch, searchableParameters]); + + // Render nested menu recursively + const renderMenuItems = useCallback( + (items: ParameterTreeNode[]): React.ReactNode => { + return items + .filter((item) => !item.name.includes('pycache')) + .map((item) => { + const isActive = activeTab !== 'overview' && selectedParam?.parameter === item.name; + const isExpanded = expandedMenuItems.has(item.name); + const hasChildren = !!item.children?.length; + const ChevronIcon = isExpanded ? IconChevronDown : IconChevronRight; + + return ( +
+ + {hasChildren && isExpanded && ( +
{renderMenuItems(item.children!)}
+ )} +
+ ); + }); + }, + [activeTab, selectedParam?.parameter, expandedMenuItems, onMenuItemClick, colorConfig] + ); + + // Memoize the rendered tree + const renderedMenuTree = useMemo(() => { + if (metadataLoading || !parameterTree) { + return null; + } + return renderMenuItems(parameterTree.children || []); + }, [metadataLoading, parameterTree, renderMenuItems]); + + return ( +
+
+ {/* Policy overview menu item (optional) */} + {hasOverview && ( +
+ +
+ )} + + {/* Search + tree — always visible */} +
+ {!hasOverview && ( + + PARAMETERS + + )} + 0} + onOpenChange={setSearchOpen} + > + +
+ + { + onSearchChange(e.target.value); + setSearchOpen(true); + }} + onFocus={() => setSearchOpen(true)} + className="tw:pl-8 tw:h-8" + style={{ fontSize: FONT_SIZES.small }} + /> +
+ + e.preventDefault()} + > + + + {filteredSearchResults.map((item) => ( + { + onSearchSelect(item.value); + setSearchOpen(false); + }} + style={{ fontSize: FONT_SIZES.small, padding: `${spacing.xs} ${spacing.sm}` }} + > + {item.label} + + ))} + + + + +
+ +
+ {metadataLoading || !parameterTree ? ( + + + + + + ) : ( + renderedMenuTree + )} +
+ +
+
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/PolicyCreationHeader.tsx b/app/src/pages/reportBuilder/modals/policyCreation/PolicyCreationHeader.tsx new file mode 100644 index 000000000..75722a962 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/PolicyCreationHeader.tsx @@ -0,0 +1,138 @@ +/** + * PolicyCreationHeader - Modal header with editable policy name, modification count, and close button + */ + +import React from 'react'; +import { IconPencil, IconScale, IconX } from '@tabler/icons-react'; +import { Button, Group, Input, Text } from '@/components/ui'; +import { colors, spacing, typography } from '@/designTokens'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../../constants'; + +export interface PolicyCreationHeaderProps { + policyLabel: string; + isEditingLabel: boolean; + modificationCount: number; + onLabelChange: (label: string) => void; + onEditingChange: (editing: boolean) => void; + onClose: () => void; +} + +export function PolicyCreationHeader({ + policyLabel, + isEditingLabel, + modificationCount, + onLabelChange, + onEditingChange, + onClose, +}: PolicyCreationHeaderProps) { + const colorConfig = INGREDIENT_COLORS.policy; + + return ( +
+ + {/* Left side: Policy icon and name */} + + {/* Policy icon */} +
+ +
+ + {/* Editable policy name */} +
+ {isEditingLabel ? ( + onLabelChange(e.currentTarget.value)} + onBlur={() => onEditingChange(false)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + onEditingChange(false); + } + if (e.key === 'Escape') { + onEditingChange(false); + } + }} + placeholder="Untitled policy" + autoFocus + className="tw:border-none tw:bg-transparent tw:p-0 tw:h-auto tw:shadow-none tw:focus-visible:ring-0" + style={{ + width: 250, + fontFamily: typography.fontFamily.primary, + fontWeight: 600, + fontSize: FONT_SIZES.normal, + }} + /> + ) : ( + <> + + {policyLabel || 'Untitled policy'} + + + + )} +
+ + + {/* Right side: Modification count + Close */} + + {/* Modification count */} + + {modificationCount > 0 ? ( + <> +
+ + {modificationCount} parameter{modificationCount !== 1 ? 's' : ''} modified + + + ) : ( + + No changes yet + + )} + + + {/* Close button */} + + + +
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/PolicyNameEditor.tsx b/app/src/pages/reportBuilder/modals/policyCreation/PolicyNameEditor.tsx new file mode 100644 index 000000000..309ef538f --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/PolicyNameEditor.tsx @@ -0,0 +1,98 @@ +/** + * PolicyNameEditor - Editable policy name at top of parameter setter pane + */ + +import React from 'react'; +import { IconPencil, IconScale } from '@tabler/icons-react'; +import { Button, Group, Input, Text } from '@/components/ui'; +import { colors, spacing, typography } from '@/designTokens'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../../constants'; + +export interface PolicyNameEditorProps { + policyLabel: string; + isEditingLabel: boolean; + onLabelChange: (label: string) => void; + onEditingChange: (editing: boolean) => void; +} + +export function PolicyNameEditor({ + policyLabel, + isEditingLabel, + onLabelChange, + onEditingChange, +}: PolicyNameEditorProps) { + const colorConfig = INGREDIENT_COLORS.policy; + + return ( +
+ + {/* Policy icon */} +
+ +
+ + {/* Editable policy name */} +
+ {isEditingLabel ? ( + onLabelChange(e.currentTarget.value)} + onBlur={() => onEditingChange(false)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + onEditingChange(false); + } + if (e.key === 'Escape') { + onEditingChange(false); + } + }} + autoFocus + className="tw:shadow-none tw:focus-visible:ring-1" + style={{ + flex: 1, + fontFamily: typography.fontFamily.primary, + fontWeight: 600, + fontSize: FONT_SIZES.normal, + }} + /> + ) : ( + <> + + {policyLabel || 'New policy'} + + + + )} +
+ +
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/PolicyOverviewContent.tsx b/app/src/pages/reportBuilder/modals/policyCreation/PolicyOverviewContent.tsx new file mode 100644 index 000000000..3ecb504b7 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/PolicyOverviewContent.tsx @@ -0,0 +1,252 @@ +/** + * PolicyOverviewContent - Shared overview tab content for policy modals + * + * Renders the policy naming card and parameter modification grid. + * Used by both PolicyCreationModal and PolicyBrowseModal. + */ +import { Fragment } from 'react'; +import { IconScale } from '@tabler/icons-react'; +import { Group, Stack, Text } from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { EditableLabel } from '../../components/EditableLabel'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../../constants'; +import type { ModifiedParam } from './types'; + +interface PolicyOverviewContentProps { + policyLabel: string; + onLabelChange: (label: string) => void; + isReadOnly: boolean; + modificationCount: number; + modifiedParams: ModifiedParam[]; + hoveredParamName: string | null; + onHoverParam: (name: string | null) => void; + onClickParam: (paramName: string) => void; +} + +const colorConfig = INGREDIENT_COLORS.policy; + +export function PolicyOverviewContent({ + policyLabel, + onLabelChange, + isReadOnly, + modificationCount, + modifiedParams, + hoveredParamName, + onHoverParam, + onClickParam, +}: PolicyOverviewContentProps) { + return ( + + {/* Naming card */} +
0 ? colorConfig.border : colors.border.light}`, + boxShadow: + modificationCount > 0 + ? `0 4px 20px ${colorConfig.border}40` + : `0 2px 8px ${colors.shadow.light}`, + padding: `${spacing.sm} ${spacing.lg}`, + transition: 'all 0.3s ease', + }} + > + +
+ +
+ {isReadOnly ? ( + + {policyLabel || 'Untitled policy'} + + ) : ( + + )} + +
+ + {/* Parameter / Period / Value grid */} + {modifiedParams.length === 0 ? ( +
+ + No parameter changes{isReadOnly ? '' : ' yet'} + + {!isReadOnly && ( + + Select a parameter from the sidebar to start modifying values. + + )} +
+ ) : ( +
+
+ {/* Column headers */} + + Parameter + + + Period + + + Value + + + {modifiedParams.map((param) => { + const isHovered = hoveredParamName === param.paramName; + const rowHandlers = { + onClick: () => onClickParam(param.paramName), + onMouseEnter: () => onHoverParam(param.paramName), + onMouseLeave: () => onHoverParam(null), + }; + return ( + +
+ + {param.label} + +
+
+ {param.changes.map((c, i) => ( + + {c.period} + + ))} +
+
+ {param.changes.map((c, i) => ( + + {c.value} + + ))} +
+ + ); + })} +
+
+ )} + + ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/ValueSetterCard.tsx b/app/src/pages/reportBuilder/modals/policyCreation/ValueSetterCard.tsx new file mode 100644 index 000000000..34fe6eda9 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/ValueSetterCard.tsx @@ -0,0 +1,86 @@ +/** + * ValueSetterCard - Card with mode selector, value inputs, and submit button + * Uses SegmentedControl for mode selection and V6-styled value selectors + */ + +import { Button } from '@/components/ui/button'; +import { SegmentedControl } from '@/components/ui/segmented-control'; +import { Stack } from '@/components/ui/Stack'; +import { Text } from '@/components/ui/Text'; +import { colors, spacing } from '@/designTokens'; +import { ValueSetterMode } from '@/pathways/report/components/valueSetters'; +import { FONT_SIZES } from '../../constants'; +import { ValueSetterCardProps } from './types'; +import { ValueSetterComponentsV6 } from './valueSelectors'; + +// Map enum values to display labels +const MODE_OPTIONS = [ + { label: 'Default', value: ValueSetterMode.DEFAULT }, + { label: 'Yearly', value: ValueSetterMode.YEARLY }, + { label: 'Date range', value: ValueSetterMode.DATE }, + { label: 'Multi-year', value: ValueSetterMode.MULTI_YEAR }, +]; + +export function ValueSetterCard({ + selectedParam, + localPolicy, + minDate, + maxDate, + valueSetterMode, + intervals, + startDate, + endDate, + onModeChange, + onIntervalsChange, + onStartDateChange, + onEndDateChange, + onSubmit, +}: ValueSetterCardProps) { + const ValueSetterToRender = ValueSetterComponentsV6[valueSetterMode]; + + return ( +
+ + + Set new value + + + {/* Mode selector - SegmentedControl per V6 mockup */} + { + onIntervalsChange([]); + onModeChange(value as ValueSetterMode); + }} + size="xs" + options={MODE_OPTIONS} + /> + + + + + +
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/index.ts b/app/src/pages/reportBuilder/modals/policyCreation/index.ts new file mode 100644 index 000000000..b1f439caa --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/index.ts @@ -0,0 +1,25 @@ +/** + * PolicyCreation components barrel export + */ + +export { ParameterSidebar } from './ParameterSidebar'; +export { PolicyOverviewContent } from './PolicyOverviewContent'; +export { PolicyCreationHeader } from './PolicyCreationHeader'; +export { ParameterHeaderCard } from './ParameterHeaderCard'; +export { ValueSetterCard } from './ValueSetterCard'; +export { ChangesCard } from './ChangesCard'; +export { HistoricalValuesCard } from './HistoricalValuesCard'; +export { EmptyParameterState } from './EmptyParameterState'; + +export type { + EditorMode, + ModifiedParam, + SidebarTab, + ParameterSidebarProps, + PolicyCreationHeaderProps, + ParameterHeaderCardProps, + ValueSetterCardProps, + ChangesCardProps, + HistoricalValuesCardProps, + EmptyParameterStateProps, +} from './types'; diff --git a/app/src/pages/reportBuilder/modals/policyCreation/types.ts b/app/src/pages/reportBuilder/modals/policyCreation/types.ts new file mode 100644 index 000000000..7f7ed085d --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/types.ts @@ -0,0 +1,113 @@ +/** + * Shared types for PolicyCreationModal components + */ + +import { Dispatch, SetStateAction } from 'react'; +import { ValueSetterMode } from '@/pathways/report/components/valueSetters'; +import { ParameterTreeNode } from '@/types/metadata'; +import { ParameterMetadata } from '@/types/metadata/parameterMetadata'; +import { PolicyStateProps } from '@/types/pathwayState'; +import { ValueInterval, ValueIntervalCollection } from '@/types/subIngredients/valueInterval'; + +/** Which sidebar tab is active — controls the main content area */ +export type SidebarTab = 'overview' | 'parameters'; + +/** Controls the editor's behavior: create (new), display (read-only), edit (modifying existing) */ +export type EditorMode = 'create' | 'display' | 'edit'; + +/** + * Modified parameter with formatted changes for display + */ +export interface ModifiedParam { + paramName: string; + label: string; + changes: Array<{ + period: string; + value: string; + }>; +} + +/** + * Props for ParameterSidebar component + */ +export interface ParameterSidebarProps { + parameterTree: { children?: ParameterTreeNode[] } | null; + metadataLoading: boolean; + selectedParam: ParameterMetadata | null; + expandedMenuItems: Set; + parameterSearch: string; + searchableParameters: Array<{ value: string; label: string }>; + onSearchChange: (value: string) => void; + onSearchSelect: (paramName: string) => void; + onMenuItemClick: (paramName: string) => void; + /** Active sidebar tab — when provided, renders tab buttons above search */ + activeTab?: SidebarTab; + /** Called when the user clicks a tab */ + onTabChange?: (tab: SidebarTab) => void; +} + +/** + * Props for PolicyCreationHeader component + */ +export interface PolicyCreationHeaderProps { + policyLabel: string; + isEditingLabel: boolean; + modificationCount: number; + onLabelChange: (label: string) => void; + onEditingChange: (editing: boolean) => void; + onClose: () => void; +} + +/** + * Props for ParameterHeaderCard component + */ +export interface ParameterHeaderCardProps { + label: string; + description?: string; +} + +/** + * Props for ValueSetterCard component + */ +export interface ValueSetterCardProps { + selectedParam: ParameterMetadata; + localPolicy: PolicyStateProps; + minDate: string; + maxDate: string; + valueSetterMode: ValueSetterMode; + intervals: ValueInterval[]; + startDate: string; + endDate: string; + onModeChange: (mode: ValueSetterMode) => void; + onIntervalsChange: Dispatch>; + onStartDateChange: Dispatch>; + onEndDateChange: Dispatch>; + onSubmit: () => void; +} + +/** + * Props for ChangesCard component + */ +export interface ChangesCardProps { + modifiedParams: ModifiedParam[]; + modificationCount: number; + selectedParamName?: string; + onSelectParam: (paramName: string) => void; +} + +/** + * Props for HistoricalValuesCard component + */ +export interface HistoricalValuesCardProps { + selectedParam: ParameterMetadata; + baseValues: ValueIntervalCollection | null; + reformValues: ValueIntervalCollection | null; + policyLabel: string; +} + +/** + * Props for EmptyParameterState component + */ +export interface EmptyParameterStateProps { + message?: string; +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/DateValueSelectorV6.tsx b/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/DateValueSelectorV6.tsx new file mode 100644 index 000000000..ccbb6c25c --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/DateValueSelectorV6.tsx @@ -0,0 +1,119 @@ +/** + * DateValueSelectorV6 - V6 styled date range value selector + * Logic copied from original, only layout/styling changed to match V6 mockup + */ + +import dayjs from 'dayjs'; +import { useEffect, useState } from 'react'; +import { DatePicker, Group, Stack, Text } from '@/components/ui'; +import { colors } from '@/designTokens'; +import { getDefaultValueForParam } from '@/pathways/report/components/valueSetters/getDefaultValueForParam'; +import { ValueInputBox } from '@/pathways/report/components/valueSetters/ValueInputBox'; +import { ValueSetterProps } from '@/pathways/report/components/valueSetters/ValueSetterProps'; +import { ValueInterval } from '@/types/subIngredients/valueInterval'; +import { fromLocalDateString, toLocalDateString } from '@/utils/dateUtils'; + +export function DateValueSelectorV6(props: ValueSetterProps) { + const { + param, + policy, + setIntervals, + minDate, + maxDate, + startDate, + setStartDate, + endDate, + setEndDate, + } = props; + + // Local state for param value + const [paramValue, setParamValue] = useState( + getDefaultValueForParam(param, policy, startDate) + ); + + // Set endDate to end of year of startDate + useEffect(() => { + if (startDate) { + const endOfYearDate = dayjs(startDate).endOf('year').format('YYYY-MM-DD'); + setEndDate(endOfYearDate); + } + }, [startDate, setEndDate]); + + // Update param value when startDate changes + useEffect(() => { + if (startDate) { + const newValue = getDefaultValueForParam(param, policy, startDate); + setParamValue(newValue); + } + }, [startDate, param, policy]); + + // Update intervals whenever local state changes + useEffect(() => { + if (startDate && endDate) { + const newInterval: ValueInterval = { + startDate, + endDate, + value: paramValue, + }; + setIntervals([newInterval]); + } else { + setIntervals([]); + } + }, [startDate, endDate, paramValue, setIntervals]); + + function handleStartDateChange(value: Date | null) { + setStartDate(toLocalDateString(value)); + } + + function handleEndDateChange(value: Date | null) { + setEndDate(toLocalDateString(value)); + } + + // V6 Layout: Two rows - date row, then value row + return ( + + {/* First row: From date + To date */} + +
+ + From + + +
+
+ + To + + +
+ + + {/* Second row: Value */} +
+ + Value + + +
+ + ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/DefaultValueSelectorV6.tsx b/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/DefaultValueSelectorV6.tsx new file mode 100644 index 000000000..07dddbbee --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/DefaultValueSelectorV6.tsx @@ -0,0 +1,101 @@ +/** + * DefaultValueSelectorV6 - V6 styled default value selector + * Logic copied from original, only layout/styling changed to match V6 mockup + */ + +import { useEffect, useState } from 'react'; +import { Group, Stack, Text, YearPicker } from '@/components/ui'; +import { FOREVER } from '@/constants'; +import { colors } from '@/designTokens'; +import { getDefaultValueForParam } from '@/pathways/report/components/valueSetters/getDefaultValueForParam'; +import { ValueInputBox } from '@/pathways/report/components/valueSetters/ValueInputBox'; +import { ValueSetterProps } from '@/pathways/report/components/valueSetters/ValueSetterProps'; +import { ValueInterval } from '@/types/subIngredients/valueInterval'; +import { fromISODateString, toISODateString } from '@/utils/dateUtils'; + +export function DefaultValueSelectorV6(props: ValueSetterProps) { + const { + param, + policy, + setIntervals, + minDate, + maxDate, + startDate, + setStartDate, + endDate, + setEndDate, + } = props; + + // Local state for param value + const [paramValue, setParamValue] = useState( + getDefaultValueForParam(param, policy, startDate) + ); + + // Set endDate to 2100-12-31 for default mode + useEffect(() => { + setEndDate(FOREVER); + }, [setEndDate]); + + // Update param value when startDate changes + useEffect(() => { + if (startDate) { + const newValue = getDefaultValueForParam(param, policy, startDate); + setParamValue(newValue); + } + }, [startDate, param, policy]); + + // Update intervals whenever local state changes + useEffect(() => { + if (startDate && endDate) { + const newInterval: ValueInterval = { + startDate, + endDate, + value: paramValue, + }; + setIntervals([newInterval]); + } else { + setIntervals([]); + } + }, [startDate, endDate, paramValue, setIntervals]); + + function handleStartDateChange(value: Date | null) { + setStartDate(toISODateString(value)); + } + + // V6 Layout: Two rows - date row, then value row + return ( + + {/* First row: From year + "onward" */} + +
+ + From + + +
+ + onward + + + + {/* Second row: Value */} +
+ + Value + + +
+ + ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/MultiYearValueSelectorV6.tsx b/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/MultiYearValueSelectorV6.tsx new file mode 100644 index 000000000..527055f19 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/MultiYearValueSelectorV6.tsx @@ -0,0 +1,116 @@ +/** + * MultiYearValueSelectorV6 - V6 styled multi-year value selector + * Logic copied from original, only layout/styling changed to match V6 mockup + */ + +import { useEffect, useMemo, useState } from 'react'; +import { useSelector } from 'react-redux'; +import { Group, Stack, Text } from '@/components/ui'; +import { colors } from '@/designTokens'; +import { getTaxYears } from '@/libs/metadataUtils'; +import { getDefaultValueForParam } from '@/pathways/report/components/valueSetters/getDefaultValueForParam'; +import { ValueInputBox } from '@/pathways/report/components/valueSetters/ValueInputBox'; +import { ValueSetterProps } from '@/pathways/report/components/valueSetters/ValueSetterProps'; +import { RootState } from '@/store'; +import { ValueInterval } from '@/types/subIngredients/valueInterval'; + +export function MultiYearValueSelectorV6(props: ValueSetterProps) { + const { param, policy, setIntervals } = props; + + // Get available years from metadata + const availableYears = useSelector(getTaxYears); + const countryId = useSelector((state: RootState) => state.metadata.currentCountry); + + // Country-specific max years configuration + const MAX_YEARS_BY_COUNTRY: Record = { + us: 10, + uk: 5, + }; + + // Generate years from metadata, starting from current year + const generateYears = () => { + const currentYear = new Date().getFullYear(); + const maxYears = MAX_YEARS_BY_COUNTRY[countryId || 'us'] || 10; + + // Filter available years from metadata to only include current year onwards + const futureYears = availableYears + .map((option) => parseInt(option.value, 10)) + .filter((year) => year >= currentYear) + .sort((a, b) => a - b); + + // Take only the configured max years for this country + return futureYears.slice(0, maxYears); + }; + + const years = generateYears(); + + // Get values for each year - check reform first, then baseline + const getInitialYearValues = useMemo(() => { + const initialValues: Record = {}; + years.forEach((year) => { + initialValues[year] = getDefaultValueForParam(param, policy, `${year}-01-01`); + }); + return initialValues; + }, [param, policy]); + + const [yearValues, setYearValues] = useState>(getInitialYearValues); + + // Update intervals whenever yearValues changes + useEffect(() => { + const newIntervals: ValueInterval[] = Object.keys(yearValues).map((year: string) => ({ + startDate: `${year}-01-01`, + endDate: `${year}-12-31`, + value: yearValues[year], + })); + + setIntervals(newIntervals); + }, [yearValues, setIntervals]); + + const handleYearValueChange = (year: number, value: any) => { + setYearValues((prev) => ({ + ...prev, + [year]: value, + })); + }; + + // Split years into two columns + const midpoint = Math.ceil(years.length / 2); + const leftColumn = years.slice(0, midpoint); + const rightColumn = years.slice(midpoint); + + // V6 Layout: Two columns with year labels and inputs + return ( + + + {leftColumn.map((year) => ( + + + {year} + + handleYearValueChange(year, value)} + onSubmit={props.onSubmit} + /> + + ))} + + + {rightColumn.map((year) => ( + + + {year} + + handleYearValueChange(year, value)} + onSubmit={props.onSubmit} + /> + + ))} + + + ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/YearlyValueSelectorV6.tsx b/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/YearlyValueSelectorV6.tsx new file mode 100644 index 000000000..0de21538d --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/YearlyValueSelectorV6.tsx @@ -0,0 +1,123 @@ +/** + * YearlyValueSelectorV6 - V6 styled yearly value selector + * Logic copied from original, only layout/styling changed to match V6 mockup + */ + +import dayjs from 'dayjs'; +import { useEffect, useState } from 'react'; +import { Group, Stack, Text, YearPicker } from '@/components/ui'; +import { colors } from '@/designTokens'; +import { getDefaultValueForParam } from '@/pathways/report/components/valueSetters/getDefaultValueForParam'; +import { ValueInputBox } from '@/pathways/report/components/valueSetters/ValueInputBox'; +import { ValueSetterProps } from '@/pathways/report/components/valueSetters/ValueSetterProps'; +import { ValueInterval } from '@/types/subIngredients/valueInterval'; +import { fromISODateString, toISODateString } from '@/utils/dateUtils'; + +export function YearlyValueSelectorV6(props: ValueSetterProps) { + const { + param, + policy, + setIntervals, + minDate, + maxDate, + startDate, + setStartDate, + endDate, + setEndDate, + } = props; + + // Local state for param value + const [paramValue, setParamValue] = useState( + getDefaultValueForParam(param, policy, startDate) + ); + + // Set endDate to end of year of startDate + useEffect(() => { + if (startDate) { + const endOfYearDate = dayjs(startDate).endOf('year').format('YYYY-MM-DD'); + setEndDate(endOfYearDate); + } + }, [startDate, setEndDate]); + + // Update param value when startDate changes + useEffect(() => { + if (startDate) { + const newValue = getDefaultValueForParam(param, policy, startDate); + setParamValue(newValue); + } + }, [startDate, param, policy]); + + // Update intervals whenever local state changes + useEffect(() => { + if (startDate && endDate) { + const newInterval: ValueInterval = { + startDate, + endDate, + value: paramValue, + }; + setIntervals([newInterval]); + } else { + setIntervals([]); + } + }, [startDate, endDate, paramValue, setIntervals]); + + function handleStartDateChange(value: Date | null) { + setStartDate(toISODateString(value)); + } + + function handleEndDateChange(value: Date | null) { + const isoString = toISODateString(value); + if (isoString) { + const endOfYearDate = dayjs(isoString).endOf('year').format('YYYY-MM-DD'); + setEndDate(endOfYearDate); + } else { + setEndDate(''); + } + } + + // V6 Layout: Two rows - date row, then value row + return ( + + {/* First row: From year + To year */} + +
+ + From + + +
+
+ + To + + +
+ + + {/* Second row: Value */} +
+ + Value + + +
+ + ); +} diff --git a/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/index.ts b/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/index.ts new file mode 100644 index 000000000..80bd9c15a --- /dev/null +++ b/app/src/pages/reportBuilder/modals/policyCreation/valueSelectors/index.ts @@ -0,0 +1,21 @@ +/** + * V6-styled value selector components + */ + +import { ValueSetterMode } from '@/pathways/report/components/valueSetters'; +import { DateValueSelectorV6 } from './DateValueSelectorV6'; +import { DefaultValueSelectorV6 } from './DefaultValueSelectorV6'; +import { MultiYearValueSelectorV6 } from './MultiYearValueSelectorV6'; +import { YearlyValueSelectorV6 } from './YearlyValueSelectorV6'; + +export { DefaultValueSelectorV6 } from './DefaultValueSelectorV6'; +export { YearlyValueSelectorV6 } from './YearlyValueSelectorV6'; +export { DateValueSelectorV6 } from './DateValueSelectorV6'; +export { MultiYearValueSelectorV6 } from './MultiYearValueSelectorV6'; + +export const ValueSetterComponentsV6 = { + [ValueSetterMode.DEFAULT]: DefaultValueSelectorV6, + [ValueSetterMode.YEARLY]: YearlyValueSelectorV6, + [ValueSetterMode.DATE]: DateValueSelectorV6, + [ValueSetterMode.MULTI_YEAR]: MultiYearValueSelectorV6, +} as const; diff --git a/app/src/pages/reportBuilder/modals/population/HouseholdCreationContent.tsx b/app/src/pages/reportBuilder/modals/population/HouseholdCreationContent.tsx new file mode 100644 index 000000000..08baf0cff --- /dev/null +++ b/app/src/pages/reportBuilder/modals/population/HouseholdCreationContent.tsx @@ -0,0 +1,75 @@ +/** + * HouseholdCreationContent - Household creation form wrapper + */ +import HouseholdBuilderForm from '@/components/household/HouseholdBuilderForm'; +import { ScrollArea } from '@/components/ui/scroll-area'; +import { Spinner } from '@/components/ui/Spinner'; +import { Household } from '@/types/ingredients/Household'; +import { MetadataState } from '@/types/metadata'; + +interface HouseholdCreationContentProps { + householdDraft: Household | null; + metadata: MetadataState; + reportYear: string; + maritalStatus: 'single' | 'married'; + numChildren: number; + basicPersonFields: string[]; + basicNonPersonFields: string[]; + isCreating: boolean; + onChange: (household: Household) => void; + onMaritalStatusChange: (status: 'single' | 'married') => void; + onNumChildrenChange: (count: number) => void; +} + +export function HouseholdCreationContent({ + householdDraft, + metadata, + reportYear, + maritalStatus, + numChildren, + basicPersonFields, + basicNonPersonFields, + isCreating, + onChange, + onMaritalStatusChange, + onNumChildrenChange, +}: HouseholdCreationContentProps) { + if (!householdDraft) { + return null; + } + + return ( + +
+ {isCreating && ( +
+ +
+ )} + +
+ + ); +} diff --git a/app/src/pages/reportBuilder/modals/population/PopulationBrowseContent.tsx b/app/src/pages/reportBuilder/modals/population/PopulationBrowseContent.tsx new file mode 100644 index 000000000..eb69b1a98 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/population/PopulationBrowseContent.tsx @@ -0,0 +1,286 @@ +/** + * PopulationBrowseContent - Browse mode content for population modal + * + * Handles: + * - National selection + * - Region grids (states, districts, etc.) + * - Household list + */ +import { IconChevronRight, IconHome, IconSearch } from '@tabler/icons-react'; +import { Group } from '@/components/ui/Group'; +import { Input } from '@/components/ui/input'; +import { ScrollArea } from '@/components/ui/scroll-area'; +import { Skeleton } from '@/components/ui/skeleton'; +import { Stack } from '@/components/ui/Stack'; +import { Text } from '@/components/ui/Text'; +import { colors, spacing } from '@/designTokens'; +import { RegionOption } from '@/utils/regionStrategies'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../../constants'; +import { PopulationCategory } from '../../types'; +import { StateDistrictSelector } from './StateDistrictSelector'; +import { StatePlaceSelector } from './StatePlaceSelector'; + +interface HouseholdItem { + id: string; + label: string; + memberCount: number; +} + +interface PopulationBrowseContentProps { + countryId: 'us' | 'uk'; + activeCategory: PopulationCategory; + searchQuery: string; + setSearchQuery: (query: string) => void; + filteredRegions: RegionOption[]; + allDistricts?: RegionOption[]; // Full list of congressional districts for StateDistrictSelector + filteredHouseholds: HouseholdItem[]; + householdsLoading: boolean; + getSectionTitle: () => string; + getItemCount: () => number; + onSelectGeography: (region: RegionOption | null) => void; + onSelectHousehold: (household: HouseholdItem) => void; +} + +export function PopulationBrowseContent({ + countryId: _countryId, + activeCategory, + searchQuery, + setSearchQuery, + filteredRegions, + allDistricts, + filteredHouseholds, + householdsLoading, + getSectionTitle, + getItemCount, + onSelectGeography, + onSelectHousehold, +}: PopulationBrowseContentProps) { + const colorConfig = INGREDIENT_COLORS.population; + + const styles = { + regionGrid: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))', + gap: spacing.sm, + }, + regionChip: { + padding: `${spacing.sm} ${spacing.md}`, + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + background: colors.white, + cursor: 'pointer', + transition: 'all 0.15s ease', + fontSize: FONT_SIZES.small, + textAlign: 'center' as const, + }, + householdCard: { + padding: spacing.md, + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + background: colors.white, + cursor: 'pointer', + transition: 'all 0.15s ease', + }, + }; + + // StateDistrictSelector and PlaceSelector handle their own search and header + const showExternalSearchAndHeader = activeCategory !== 'districts' && activeCategory !== 'places'; + + return ( + + {/* Search Bar - hidden for national and districts (StateDistrictSelector has its own) */} + {showExternalSearchAndHeader && ( +
+
+ +
+ setSearchQuery(e.target.value)} + style={{ + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + fontSize: FONT_SIZES.small, + paddingLeft: 34, + }} + /> +
+ )} + + {/* Section Header - hidden for national and districts */} + {showExternalSearchAndHeader && ( + + + {getSectionTitle()} + + + {getItemCount()} {getItemCount() === 1 ? 'option' : 'options'} + + + )} + + {/* Content */} + + {activeCategory === 'my-households' ? ( + // Households list + householdsLoading ? ( + + {[1, 2, 3].map((i) => ( + + ))} + + ) : filteredHouseholds.length === 0 ? ( +
+
+ +
+ + {searchQuery ? 'No households match your search' : 'No households yet'} + + + {searchQuery + ? 'Try adjusting your search terms' + : 'Create a custom household using the button in the sidebar'} + +
+ ) : ( + + {filteredHouseholds.map((household) => ( +
onSelectHousehold(household)} + onKeyDown={(e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + onSelectHousehold(household); + } + }} + > + + +
+ +
+ + + {household.label} + + + {household.memberCount}{' '} + {household.memberCount === 1 ? 'member' : 'members'} + + + + + +
+ ))} + + ) + ) : activeCategory === 'districts' && allDistricts ? ( + // Congressional districts - use StateDistrictSelector + + ) : activeCategory === 'places' ? ( + // US Cities - use StatePlaceSelector grouped by state + + ) : // Standard geography grid (states, countries, constituencies, local authorities) + filteredRegions.length === 0 ? ( +
+ + No regions match your search + +
+ ) : ( +
+ {filteredRegions.map((region) => ( + + ))} +
+ )} + + + ); +} diff --git a/app/src/pages/reportBuilder/modals/population/PopulationStatusHeader.tsx b/app/src/pages/reportBuilder/modals/population/PopulationStatusHeader.tsx new file mode 100644 index 000000000..75234a385 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/population/PopulationStatusHeader.tsx @@ -0,0 +1,99 @@ +/** + * PopulationStatusHeader - Glassmorphic status bar for household creation mode + */ +import { IconHome } from '@tabler/icons-react'; +import { Group, Text } from '@/components/ui'; +import { colors, spacing } from '@/designTokens'; +import { EditableLabel } from '../../components/EditableLabel'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../../constants'; + +interface PopulationStatusHeaderProps { + householdLabel: string; + setHouseholdLabel: (label: string) => void; + memberCount: number; +} + +export function PopulationStatusHeader({ + householdLabel, + setHouseholdLabel, + memberCount, +}: PopulationStatusHeaderProps) { + const colorConfig = INGREDIENT_COLORS.population; + + const dockStyles = { + statusHeader: { + background: 'rgba(255, 255, 255, 0.95)', + backdropFilter: 'blur(20px) saturate(180%)', + WebkitBackdropFilter: 'blur(20px) saturate(180%)', + borderRadius: spacing.radius.feature, + border: `1px solid ${memberCount > 0 ? colorConfig.border : colors.border.light}`, + boxShadow: + memberCount > 0 + ? `0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px ${colorConfig.border}` + : `0 2px 12px ${colors.shadow.light}`, + padding: `${spacing.sm} ${spacing.lg}`, + transition: 'all 0.3s ease', + margin: spacing.md, + marginBottom: 0, + }, + }; + + return ( +
+ + {/* Left side: Household icon and editable name */} + + {/* Household icon */} +
+ +
+ + {/* Editable household name */} + + + + {/* Right side: Member count */} + + + {memberCount > 0 ? ( + <> +
+ + {memberCount} member{memberCount !== 1 ? 's' : ''} + + + ) : ( + + No members yet + + )} + + + +
+ ); +} diff --git a/app/src/pages/reportBuilder/modals/population/StateDistrictSelector.tsx b/app/src/pages/reportBuilder/modals/population/StateDistrictSelector.tsx new file mode 100644 index 000000000..2da2b4150 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/population/StateDistrictSelector.tsx @@ -0,0 +1,351 @@ +/** + * StateDistrictSelector - Congressional district selector grouped by state + * + * Displays states as headers with their congressional districts underneath. + * Districts are shown as ordinal numbers (1st, 2nd, etc.) or "At-large" for + * single-district states. + */ +import { useMemo } from 'react'; +import { IconSearch } from '@tabler/icons-react'; +import { Group } from '@/components/ui/Group'; +import { Input } from '@/components/ui/input'; +import { Stack } from '@/components/ui/Stack'; +import { Text } from '@/components/ui/Text'; +import { colors, spacing } from '@/designTokens'; +import { RegionOption } from '@/utils/regionStrategies'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../../constants'; + +// ============================================================================ +// Types +// ============================================================================ + +interface StateDistrictSelectorProps { + districts: RegionOption[]; + searchQuery: string; + setSearchQuery: (query: string) => void; + onSelectDistrict: (district: RegionOption) => void; +} + +interface StateGroup { + stateName: string; + stateAbbreviation: string; + districts: RegionOption[]; +} + +// ============================================================================ +// Pure utility functions +// ============================================================================ + +function formatOrdinal(num: number): string { + const suffixes = ['th', 'st', 'nd', 'rd']; + const v = num % 100; + return num + (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]); +} + +function extractDistrictNumber(label: string): number | null { + const match = label.match(/(\d+)/); + return match ? parseInt(match[1], 10) : null; +} + +function sortDistrictsNumerically(districts: RegionOption[]): RegionOption[] { + return [...districts].sort((a, b) => { + const numA = extractDistrictNumber(a.label) || 0; + const numB = extractDistrictNumber(b.label) || 0; + return numA - numB; + }); +} + +function sortGroupsAlphabetically(groups: StateGroup[]): StateGroup[] { + return [...groups].sort((a, b) => a.stateName.localeCompare(b.stateName)); +} + +function groupDistrictsByState(districts: RegionOption[]): StateGroup[] { + const groups = new Map(); + + for (const district of districts) { + const stateName = district.stateName || 'Unknown'; + const stateAbbr = district.stateAbbreviation || ''; + + if (!groups.has(stateName)) { + groups.set(stateName, { + stateName, + stateAbbreviation: stateAbbr, + districts: [], + }); + } + groups.get(stateName)!.districts.push(district); + } + + const sortedGroups = sortGroupsAlphabetically(Array.from(groups.values())); + + return sortedGroups.map((group) => ({ + ...group, + districts: sortDistrictsNumerically(group.districts), + })); +} + +function buildDistrictCountLookup(groups: StateGroup[]): Map { + const counts = new Map(); + for (const group of groups) { + counts.set(group.stateName, group.districts.length); + } + return counts; +} + +function filterGroupsByQuery(groups: StateGroup[], query: string): StateGroup[] { + if (!query.trim()) { + return groups; + } + + const normalizedQuery = query.toLowerCase(); + + return groups + .map((group) => { + const stateMatches = group.stateName.toLowerCase().includes(normalizedQuery); + if (stateMatches) { + return group; + } + + const matchingDistricts = group.districts.filter((d) => + d.label.toLowerCase().includes(normalizedQuery) + ); + + if (matchingDistricts.length > 0) { + return { ...group, districts: matchingDistricts }; + } + + return null; + }) + .filter((group): group is StateGroup => group !== null); +} + +function getDistrictDisplayLabel( + district: RegionOption, + stateName: string, + originalCounts: Map +): string { + const originalCount = originalCounts.get(stateName) || 0; + if (originalCount === 1) { + return 'At-large'; + } + + const num = extractDistrictNumber(district.label); + return num ? formatOrdinal(num) : district.label; +} + +function countTotalDistricts(groups: StateGroup[]): number { + return groups.reduce((sum, group) => sum + group.districts.length, 0); +} + +// ============================================================================ +// Styles +// ============================================================================ + +const colorConfig = INGREDIENT_COLORS.population; + +const styles = { + stateHeader: { + padding: `${spacing.sm} 0`, + borderBottom: `1px solid ${colors.border.light}`, + marginBottom: spacing.sm, + }, + districtGrid: { + display: 'flex', + flexWrap: 'wrap' as const, + gap: spacing.xs, + marginBottom: spacing.lg, + }, + districtChip: { + padding: `${spacing.xs} ${spacing.md}`, + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + background: colors.white, + cursor: 'pointer', + transition: 'all 0.15s ease', + fontSize: FONT_SIZES.small, + minWidth: 60, + textAlign: 'center' as const, + }, + emptyState: { + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + padding: spacing['4xl'], + gap: spacing.md, + }, +}; + +// ============================================================================ +// Sub-components +// ============================================================================ + +function SearchBar({ value, onChange }: { value: string; onChange: (value: string) => void }) { + return ( +
+
+ +
+ onChange(e.target.value)} + style={{ + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + fontSize: FONT_SIZES.small, + paddingLeft: 34, + }} + /> +
+ ); +} + +function SectionHeader({ count }: { count: number }) { + return ( + + + Congressional districts + + + {count} {count === 1 ? 'district' : 'districts'} + + + ); +} + +function EmptyState() { + return ( +
+ + No districts match your search + +
+ ); +} + +function StateHeader({ + stateName, + stateAbbreviation, +}: { + stateName: string; + stateAbbreviation: string; +}) { + return ( +
+ + {stateName} + {stateAbbreviation && ( + + ({stateAbbreviation}) + + )} + +
+ ); +} + +function DistrictChip({ label, onClick }: { label: string; onClick: () => void }) { + return ( + + ); +} + +function StateGroupSection({ + group, + originalCounts, + onSelectDistrict, +}: { + group: StateGroup; + originalCounts: Map; + onSelectDistrict: (district: RegionOption) => void; +}) { + return ( +
+ +
+ {group.districts.map((district) => ( + onSelectDistrict(district)} + /> + ))} +
+
+ ); +} + +// ============================================================================ +// Main component +// ============================================================================ + +export function StateDistrictSelector({ + districts, + searchQuery, + setSearchQuery, + onSelectDistrict, +}: StateDistrictSelectorProps) { + const stateGroups = useMemo(() => groupDistrictsByState(districts), [districts]); + + const originalDistrictCounts = useMemo( + () => buildDistrictCountLookup(stateGroups), + [stateGroups] + ); + + const filteredGroups = useMemo( + () => filterGroupsByQuery(stateGroups, searchQuery), + [stateGroups, searchQuery] + ); + + const totalDistrictCount = countTotalDistricts(filteredGroups); + + return ( + + + +
+ {filteredGroups.length === 0 ? ( + + ) : ( + filteredGroups.map((group) => ( + + )) + )} +
+ + ); +} diff --git a/app/src/pages/reportBuilder/modals/population/StatePlaceSelector.tsx b/app/src/pages/reportBuilder/modals/population/StatePlaceSelector.tsx new file mode 100644 index 000000000..831ae6ec8 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/population/StatePlaceSelector.tsx @@ -0,0 +1,301 @@ +/** + * StatePlaceSelector - City selector grouped by state + * + * Displays states as headers with their cities underneath. + * Cities are sorted alphabetically within each state. + * Mirrors the StateDistrictSelector pattern for consistency. + */ +import { useMemo } from 'react'; +import { IconSearch } from '@tabler/icons-react'; +import { Group } from '@/components/ui/Group'; +import { Input } from '@/components/ui/input'; +import { Stack } from '@/components/ui/Stack'; +import { Text } from '@/components/ui/Text'; +import { colors, spacing } from '@/designTokens'; +import { getPlaceDisplayName, getUSPlaces, RegionOption } from '@/utils/regionStrategies'; +import { FONT_SIZES, INGREDIENT_COLORS } from '../../constants'; + +// ============================================================================ +// Types +// ============================================================================ + +interface StatePlaceSelectorProps { + searchQuery: string; + setSearchQuery: (query: string) => void; + onSelectPlace: (place: RegionOption) => void; +} + +interface StateGroup { + stateName: string; + stateAbbreviation: string; + places: RegionOption[]; +} + +// ============================================================================ +// Pure utility functions +// ============================================================================ + +function sortPlacesAlphabetically(places: RegionOption[]): RegionOption[] { + return [...places].sort((a, b) => a.label.localeCompare(b.label)); +} + +function sortGroupsAlphabetically(groups: StateGroup[]): StateGroup[] { + return [...groups].sort((a, b) => a.stateName.localeCompare(b.stateName)); +} + +function groupPlacesByState(places: RegionOption[]): StateGroup[] { + const groups = new Map(); + + for (const place of places) { + const stateName = place.stateName || 'Unknown'; + const stateAbbr = place.stateAbbreviation || ''; + + if (!groups.has(stateName)) { + groups.set(stateName, { + stateName, + stateAbbreviation: stateAbbr, + places: [], + }); + } + groups.get(stateName)!.places.push(place); + } + + const sortedGroups = sortGroupsAlphabetically(Array.from(groups.values())); + + return sortedGroups.map((group) => ({ + ...group, + places: sortPlacesAlphabetically(group.places), + })); +} + +function filterGroupsByQuery(groups: StateGroup[], query: string): StateGroup[] { + if (!query.trim()) { + return groups; + } + + const normalizedQuery = query.toLowerCase(); + + return groups + .map((group) => { + const stateMatches = group.stateName.toLowerCase().includes(normalizedQuery); + if (stateMatches) { + return group; + } + + const matchingPlaces = group.places.filter((p) => + p.label.toLowerCase().includes(normalizedQuery) + ); + + if (matchingPlaces.length > 0) { + return { ...group, places: matchingPlaces }; + } + + return null; + }) + .filter((group): group is StateGroup => group !== null); +} + +function countTotalPlaces(groups: StateGroup[]): number { + return groups.reduce((sum, group) => sum + group.places.length, 0); +} + +// ============================================================================ +// Styles +// ============================================================================ + +const colorConfig = INGREDIENT_COLORS.population; + +const styles = { + stateHeader: { + padding: `${spacing.sm} 0`, + borderBottom: `1px solid ${colors.border.light}`, + marginBottom: spacing.sm, + }, + placeGrid: { + display: 'flex', + flexWrap: 'wrap' as const, + gap: spacing.xs, + marginBottom: spacing.lg, + }, + placeChip: { + padding: `${spacing.xs} ${spacing.md}`, + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + background: colors.white, + cursor: 'pointer', + transition: 'all 0.15s ease', + fontSize: FONT_SIZES.small, + }, + emptyState: { + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + padding: spacing['4xl'], + gap: spacing.md, + }, +}; + +// ============================================================================ +// Sub-components +// ============================================================================ + +function SearchBar({ value, onChange }: { value: string; onChange: (value: string) => void }) { + return ( +
+
+ +
+ onChange(e.target.value)} + style={{ + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + fontSize: FONT_SIZES.small, + paddingLeft: 34, + }} + /> +
+ ); +} + +function SectionHeader({ count }: { count: number }) { + return ( + + + Cities + + + {count} {count === 1 ? 'city' : 'cities'} + + + ); +} + +function EmptyState() { + return ( +
+ + No cities match your search + +
+ ); +} + +function StateHeader({ + stateName, + stateAbbreviation, +}: { + stateName: string; + stateAbbreviation: string; +}) { + return ( +
+ + {stateName} + {stateAbbreviation && ( + + ({stateAbbreviation}) + + )} + +
+ ); +} + +function PlaceChip({ label, onClick }: { label: string; onClick: () => void }) { + return ( + + ); +} + +function StateGroupSection({ + group, + onSelectPlace, +}: { + group: StateGroup; + onSelectPlace: (place: RegionOption) => void; +}) { + return ( +
+ +
+ {group.places.map((place) => ( + onSelectPlace(place)} + /> + ))} +
+
+ ); +} + +// ============================================================================ +// Main component +// ============================================================================ + +export function StatePlaceSelector({ + searchQuery, + setSearchQuery, + onSelectPlace, +}: StatePlaceSelectorProps) { + // Get all US places as RegionOption array + const allPlaces = useMemo(() => getUSPlaces(), []); + + const stateGroups = useMemo(() => groupPlacesByState(allPlaces), [allPlaces]); + + const filteredGroups = useMemo( + () => filterGroupsByQuery(stateGroups, searchQuery), + [stateGroups, searchQuery] + ); + + const totalPlaceCount = countTotalPlaces(filteredGroups); + + return ( + + + +
+ {filteredGroups.length === 0 ? ( + + ) : ( + filteredGroups.map((group) => ( + + )) + )} +
+ + ); +} diff --git a/app/src/pages/reportBuilder/modals/population/index.ts b/app/src/pages/reportBuilder/modals/population/index.ts new file mode 100644 index 000000000..e4b4f6260 --- /dev/null +++ b/app/src/pages/reportBuilder/modals/population/index.ts @@ -0,0 +1,7 @@ +/** + * Population modal sub-components + */ +export { PopulationStatusHeader } from './PopulationStatusHeader'; +export { PopulationBrowseContent } from './PopulationBrowseContent'; +export { HouseholdCreationContent } from './HouseholdCreationContent'; +export { StatePlaceSelector } from './StatePlaceSelector'; diff --git a/app/src/pages/reportBuilder/styles.ts b/app/src/pages/reportBuilder/styles.ts new file mode 100644 index 000000000..ce5f41058 --- /dev/null +++ b/app/src/pages/reportBuilder/styles.ts @@ -0,0 +1,421 @@ +/** + * Shared styles for ReportBuilder components + */ +import { colors, spacing, typography } from '@/designTokens'; +import { BROWSE_MODAL_CONFIG, FONT_SIZES } from './constants'; + +// ============================================================================ +// PAGE STYLES +// ============================================================================ + +export const pageStyles = { + pageContainer: { + minHeight: '100vh', + background: `linear-gradient(180deg, ${colors.gray[50]} 0%, ${colors.background.secondary} 100%)`, + padding: `${spacing.lg} ${spacing['3xl']}`, + }, + + headerSection: { + marginBottom: spacing.xl, + }, + + mainTitle: { + fontFamily: typography.fontFamily.primary, + fontSize: FONT_SIZES.title, + fontWeight: typography.fontWeight.bold, + color: colors.gray[900], + letterSpacing: '-0.02em', + margin: 0, + }, +}; + +// ============================================================================ +// CANVAS STYLES +// ============================================================================ + +export const canvasStyles = { + canvasContainer: { + background: colors.white, + borderRadius: spacing.radius.feature, + border: `1px solid ${colors.border.light}`, + boxShadow: `0 4px 24px ${colors.shadow.light}`, + padding: spacing['2xl'], + position: 'relative' as const, + overflow: 'hidden', + }, + + canvasGrid: { + background: ` + linear-gradient(90deg, ${colors.gray[100]}18 1px, transparent 1px), + linear-gradient(${colors.gray[100]}18 1px, transparent 1px) + `, + backgroundSize: '20px 20px', + position: 'absolute' as const, + inset: 0, + pointerEvents: 'none' as const, + }, + + simulationsGrid: { + display: 'grid', + gridTemplateColumns: '1fr 1fr', + gridTemplateRows: 'auto auto auto', // header, policy, population + gap: `${spacing.sm} ${spacing['2xl']}`, + position: 'relative' as const, + zIndex: 1, + minHeight: '450px', + alignItems: 'start', + }, +}; + +// ============================================================================ +// SIMULATION CARD STYLES +// ============================================================================ + +export const simulationStyles = { + simulationCard: { + background: colors.white, + borderRadius: spacing.radius.feature, + border: `2px solid ${colors.gray[200]}`, + padding: spacing.xl, + transition: 'all 0.2s ease', + position: 'relative' as const, + display: 'grid', + gridRow: 'span 4', // span all 4 rows (header + 3 panels) + gridTemplateRows: 'subgrid', + minWidth: 0, + overflow: 'hidden', + gap: spacing.sm, + }, + + simulationCardActive: { + border: `2px solid ${colors.primary[400]}`, + boxShadow: `0 0 0 4px ${colors.primary[50]}, 0 8px 32px ${colors.shadow.medium}`, + }, + + simulationHeader: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + marginBottom: spacing.lg, + minWidth: 0, + overflow: 'hidden', + }, + + simulationTitle: { + fontFamily: typography.fontFamily.primary, + fontSize: FONT_SIZES.normal, + fontWeight: typography.fontWeight.semibold, + color: colors.gray[800], + }, +}; + +// ============================================================================ +// INGREDIENT SECTION STYLES +// ============================================================================ + +export const ingredientStyles = { + ingredientSection: { + padding: spacing.md, + borderRadius: spacing.radius.feature, + border: `1px solid`, + background: 'white', + minWidth: 0, + overflow: 'hidden', + }, + + ingredientSectionHeader: { + display: 'flex', + alignItems: 'center', + gap: spacing.sm, + marginBottom: spacing.md, + }, + + ingredientSectionIcon: { + width: 32, + height: 32, + borderRadius: spacing.radius.container, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, +}; + +// ============================================================================ +// CHIP STYLES +// ============================================================================ + +export const chipStyles = { + // Chip grid for card view (square chips, 3 per row) + chipGridSquare: { + display: 'grid', + gridTemplateColumns: 'repeat(3, 1fr)', + gap: spacing.sm, + }, + + // Row layout for row view + chipRowContainer: { + display: 'flex', + flexDirection: 'column' as const, + gap: spacing.xs, + }, + + // Square chip (expands to fill grid cell, min 80px height) + chipSquare: { + minHeight: 80, + borderRadius: spacing.radius.container, + borderWidth: 1, + borderStyle: 'solid', + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + gap: 6, + cursor: 'pointer', + transition: 'background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease', + padding: spacing.sm, + }, + + chipSquareSelected: { + borderWidth: 2, + boxShadow: `0 0 0 2px`, + }, + + // Row chip (80 height) + chipRow: { + display: 'flex', + alignItems: 'center', + gap: spacing.md, + padding: `${spacing.md} ${spacing.lg}`, + borderRadius: spacing.radius.container, + borderWidth: 1, + borderStyle: 'solid', + cursor: 'pointer', + transition: 'background 0.15s ease, border-color 0.15s ease', + minHeight: 80, + }, + + chipRowSelected: { + borderWidth: 2, + }, + + chipRowIcon: { + width: 40, + height: 40, + borderRadius: spacing.radius.container, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexShrink: 0, + }, + + // Perforated "Create new policy" chip (expands to fill grid cell) + chipCustomSquare: { + minHeight: 80, + borderRadius: spacing.radius.container, + borderWidth: 2, + borderStyle: 'dashed', + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + gap: 6, + cursor: 'pointer', + transition: 'background 0.15s ease, border-color 0.15s ease', + padding: spacing.sm, + }, + + chipCustomRow: { + display: 'flex', + alignItems: 'center', + gap: spacing.md, + padding: `${spacing.md} ${spacing.lg}`, + borderRadius: spacing.radius.container, + borderWidth: 2, + borderStyle: 'dashed', + cursor: 'pointer', + transition: 'background 0.15s ease, border-color 0.15s ease', + minHeight: 80, + }, +}; + +// ============================================================================ +// ADD SIMULATION CARD STYLES +// ============================================================================ + +export const addSimulationStyles = { + addSimulationCard: { + background: colors.white, + borderRadius: spacing.radius.feature, + border: `2px dashed ${colors.border.medium}`, + padding: spacing.xl, + display: 'flex', + flexDirection: 'column' as const, + alignItems: 'center', + justifyContent: 'center', + gap: spacing.md, + cursor: 'pointer', + transition: 'all 0.2s ease', + gridRow: 'span 4', // span all 4 rows to match SimulationBlock + }, +}; + +// ============================================================================ +// REPORT META PANEL STYLES +// ============================================================================ + +export const reportMetaStyles = { + reportMetaCard: { + background: colors.white, + borderRadius: spacing.radius.feature, + border: `1px solid ${colors.border.light}`, + padding: `${spacing.xl} ${spacing.xl} ${spacing['2xl']} ${spacing.xl}`, + marginBottom: spacing.xl, + position: 'relative' as const, + overflow: 'hidden', + }, + + inheritedBadge: { + fontSize: FONT_SIZES.tiny, + color: colors.gray[500], + fontStyle: 'italic', + marginLeft: spacing.xs, + }, +}; + +// ============================================================================ +// MODAL STYLES +// ============================================================================ + +export const modalStyles = { + sidebar: { + width: BROWSE_MODAL_CONFIG.sidebarWidth, + borderRight: `1px solid ${colors.border.light}`, + paddingRight: spacing.lg, + display: 'flex', + flexDirection: 'column' as const, + gap: spacing.lg, + flexShrink: 0, + }, + + sidebarSection: { + display: 'flex', + flexDirection: 'column' as const, + gap: spacing.xs, + }, + + sidebarLabel: { + fontSize: FONT_SIZES.tiny, + fontWeight: 600, + color: colors.gray[500], + textTransform: 'uppercase' as const, + letterSpacing: '0.05em', + padding: `0 ${spacing.sm}`, + marginBottom: spacing.xs, + }, + + sidebarItem: { + display: 'flex', + alignItems: 'center', + gap: spacing.sm, + padding: `${spacing.sm} ${spacing.sm}`, + borderRadius: spacing.radius.container, + cursor: 'pointer', + transition: 'all 0.15s ease', + }, + + mainContent: { + flex: 1, + display: 'flex', + flexDirection: 'column' as const, + gap: spacing.lg, + minWidth: 0, + }, + + searchBar: { + marginBottom: spacing.md, + }, + + policyGrid: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', + gap: spacing.md, + }, + + policyCard: { + padding: spacing.lg, + borderRadius: spacing.radius.feature, + border: `1px solid ${colors.border.light}`, + cursor: 'pointer', + transition: 'all 0.15s ease', + background: colors.white, + }, + + householdCard: { + padding: spacing.lg, + borderRadius: spacing.radius.feature, + border: `1px solid ${colors.border.light}`, + cursor: 'pointer', + transition: 'all 0.15s ease', + background: colors.white, + }, + + regionGrid: { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', + gap: spacing.sm, + }, + + regionChip: { + padding: `${spacing.sm} ${spacing.md}`, + borderRadius: spacing.radius.container, + border: `1px solid ${colors.border.light}`, + cursor: 'pointer', + transition: 'all 0.15s ease', + background: colors.white, + textAlign: 'left' as const, + }, +}; + +// ============================================================================ +// STATUS HEADER STYLES (DOCK) +// ============================================================================ + +export const statusHeaderStyles = { + container: (hasChanges: boolean, colorConfig: { border: string }) => ({ + background: 'rgba(255, 255, 255, 0.95)', + backdropFilter: 'blur(20px) saturate(180%)', + WebkitBackdropFilter: 'blur(20px) saturate(180%)', + borderRadius: spacing.radius.feature, + border: `1px solid ${hasChanges ? colorConfig.border : colors.border.light}`, + boxShadow: hasChanges + ? `0 4px 20px ${colorConfig.border}40` + : `0 2px 8px ${colors.shadow.light}`, + padding: `${spacing.sm} ${spacing.lg}`, + marginBottom: spacing.lg, + display: 'flex', + alignItems: 'center', + gap: spacing.md, + transition: 'all 0.3s ease', + }), + + divider: { + width: 1, + height: 24, + background: colors.border.light, + flexShrink: 0, + }, +}; + +// ============================================================================ +// COMBINED STYLES EXPORT (for backwards compatibility) +// ============================================================================ + +export const styles = { + ...pageStyles, + ...canvasStyles, + ...simulationStyles, + ...ingredientStyles, + ...chipStyles, + ...addSimulationStyles, + ...reportMetaStyles, +}; diff --git a/app/src/pages/reportBuilder/types.ts b/app/src/pages/reportBuilder/types.ts new file mode 100644 index 000000000..12f10f491 --- /dev/null +++ b/app/src/pages/reportBuilder/types.ts @@ -0,0 +1,296 @@ +/** + * Type definitions for ReportBuilder components + */ +import { ReactNode } from 'react'; +import { PopulationStateProps, SimulationStateProps } from '@/types/pathwayState'; + +// ============================================================================ +// CORE STATE TYPES +// ============================================================================ + +export interface ReportBuilderState { + id?: string; + label: string | null; + year: string; + simulations: SimulationStateProps[]; +} + +export type IngredientType = 'policy' | 'population' | 'dynamics'; + +export interface IngredientPickerState { + isOpen: boolean; + simulationIndex: number; + ingredientType: IngredientType; +} + +// ============================================================================ +// COLOR CONFIG +// ============================================================================ + +export interface IngredientColorConfig { + icon: string; + bg: string; + border: string; + accent: string; +} + +// ============================================================================ +// DATA TYPES +// ============================================================================ + +export interface SavedPolicy { + id: string; + label: string; + paramCount: number; + createdAt?: string; + updatedAt?: string; +} + +export interface RecentPopulation { + id: string; + label: string; + type: 'geography' | 'household'; + population: PopulationStateProps; +} + +// ============================================================================ +// MODAL TEMPLATE TYPES +// ============================================================================ + +export interface SidebarItem { + id: string; + label: string; + icon: ReactNode; + badge?: string | number; + isActive?: boolean; + onClick: () => void; +} + +export interface BrowseModalSidebarSection { + id: string; + label: string; + items?: SidebarItem[]; +} + +export interface BrowseModalTemplateProps { + isOpen: boolean; + onClose: () => void; + headerIcon: ReactNode; + headerTitle: ReactNode; + headerSubtitle?: string; + /** Content to display on the right side of the header (e.g., status indicator) */ + headerRightContent?: ReactNode; + colorConfig: IngredientColorConfig; + /** Standard sidebar sections - use for simple browse mode sidebars */ + sidebarSections?: BrowseModalSidebarSection[]; + /** Custom sidebar rendering - use when sidebar needs custom layout (e.g., parameter tree) */ + renderSidebar?: () => ReactNode; + /** Sidebar width override (default: 220px) */ + sidebarWidth?: number; + renderMainContent: () => ReactNode; + /** Status header shown above main content (e.g., creation mode status bar) */ + statusHeader?: ReactNode; + /** Footer shown below main content (e.g., creation mode buttons) */ + footer?: ReactNode; + /** Content area padding override (default: spacing.lg). Set to 0 for full-bleed content. */ + contentPadding?: number | string; +} + +// ============================================================================ +// CREATION STATUS HEADER TYPES +// ============================================================================ + +export interface CreationStatusHeaderProps { + colorConfig: IngredientColorConfig; + icon: ReactNode; + label: string; + placeholder: string; + isEditingLabel: boolean; + onLabelChange: (value: string) => void; + onStartEditing: () => void; + onStopEditing: () => void; + statusText: string; + hasChanges: boolean; + children?: ReactNode; +} + +// ============================================================================ +// CHIP COMPONENT TYPES +// ============================================================================ + +export interface OptionChipSquareProps { + icon: ReactNode; + label: string; + description?: string; + isSelected: boolean; + onClick: () => void; + colorConfig: IngredientColorConfig; +} + +export interface OptionChipRowProps { + icon: ReactNode; + label: string; + description?: string; + isSelected: boolean; + onClick: () => void; + colorConfig: IngredientColorConfig; +} + +export interface CreateCustomChipProps { + label: string; + onClick: () => void; + variant: 'square' | 'row'; + colorConfig: IngredientColorConfig; +} + +export interface BrowseMoreChipProps { + label: string; + description?: string; + onClick: () => void; + variant: 'square' | 'row'; + colorConfig: IngredientColorConfig; +} + +// ============================================================================ +// SECTION COMPONENT TYPES +// ============================================================================ + +export interface IngredientSectionProps { + type: IngredientType; + currentId?: string; + countryId?: 'us' | 'uk'; + onQuickSelectPolicy?: () => void; + onSelectSavedPolicy?: (id: string, label: string, paramCount: number) => void; + onQuickSelectPopulation?: (type: 'nationwide') => void; + onSelectRecentPopulation?: (population: PopulationStateProps) => void; + onDeselectPopulation?: () => void; + onDeselectPolicy?: () => void; + onEditPolicy?: () => void; + onCreateCustom: () => void; + onBrowseMore?: () => void; + isInherited?: boolean; + inheritedPopulationType?: 'household' | 'nationwide' | 'subnational' | null; + inheritedPopulationLabel?: string; + savedPolicies?: SavedPolicy[]; + recentPopulations?: RecentPopulation[]; + currentLabel?: string; + isReadOnly?: boolean; + onViewPolicy?: () => void; +} + +export interface SimulationBlockProps { + simulation: SimulationStateProps; + index: number; + countryId: 'us' | 'uk'; + onLabelChange: (label: string) => void; + onQuickSelectPolicy: () => void; + onSelectSavedPolicy: (id: string, label: string, paramCount: number) => void; + onQuickSelectPopulation: () => void; + onSelectRecentPopulation: (population: PopulationStateProps) => void; + onDeselectPolicy: () => void; + onDeselectPopulation: () => void; + onEditPolicy: () => void; + onViewPolicy: () => void; + onCreateCustomPolicy: () => void; + onBrowseMorePolicies: () => void; + onBrowseMorePopulations: () => void; + onRemove?: () => void; + canRemove: boolean; + isRequired?: boolean; + populationInherited?: boolean; + inheritedPopulation?: PopulationStateProps; + savedPolicies: SavedPolicy[]; + recentPopulations: RecentPopulation[]; + isReadOnly?: boolean; +} + +export interface AddSimulationCardProps { + onClick: () => void; + disabled?: boolean; +} + +// ============================================================================ +// MODAL COMPONENT TYPES +// ============================================================================ + +export interface IngredientPickerModalProps { + isOpen: boolean; + onClose: () => void; + type: IngredientType; + onSelect: (value: string) => void; + onCreateNew: () => void; +} + +export interface PolicyBrowseState { + isOpen: boolean; + simulationIndex: number; + initialPolicy?: import('@/types/pathwayState').PolicyStateProps; + initialEditorMode?: 'create' | 'display' | 'edit'; +} + +export interface PolicyBrowseModalProps { + isOpen: boolean; + onClose: () => void; + onSelect: (policyId: string, label: string, paramCount: number) => void; + savedPolicies: SavedPolicy[]; + policiesLoading?: boolean; +} + +export interface PopulationBrowseModalProps { + isOpen: boolean; + onClose: () => void; + onSelect: (population: PopulationStateProps) => void; + onCreateNew?: () => void; +} + +export interface PolicyCreationModalProps { + isOpen: boolean; + onClose: () => void; + onPolicyCreated: (policyId: string, label: string, paramCount: number) => void; +} + +// ============================================================================ +// TOP BAR TYPES +// ============================================================================ + +export interface TopBarAction { + key: string; + label: string; + icon: ReactNode; + onClick: () => void; + variant: 'primary' | 'secondary'; + disabled?: boolean; + loading?: boolean; + loadingLabel?: string; +} + +// ============================================================================ +// CANVAS AND PAGE TYPES +// ============================================================================ + +export interface SimulationCanvasProps { + reportState: ReportBuilderState; + setReportState: React.Dispatch>; + pickerState: IngredientPickerState; + setPickerState: React.Dispatch>; +} + +export interface ReportMetaPanelProps { + reportState: ReportBuilderState; + setReportState: React.Dispatch>; + isReadOnly?: boolean; +} + +// ============================================================================ +// POPULATION CATEGORIES +// ============================================================================ + +export type PopulationCategory = + | 'frequently-selected' + | 'states' + | 'districts' + | 'places' + | 'countries' + | 'constituencies' + | 'local-authorities' + | 'my-households'; diff --git a/app/src/pages/reportBuilder/utils/hydrateReportBuilderState.ts b/app/src/pages/reportBuilder/utils/hydrateReportBuilderState.ts new file mode 100644 index 000000000..c9eae5eda --- /dev/null +++ b/app/src/pages/reportBuilder/utils/hydrateReportBuilderState.ts @@ -0,0 +1,102 @@ +import type { Geography } from '@/types/ingredients/Geography'; +import type { Household } from '@/types/ingredients/Household'; +import type { Policy } from '@/types/ingredients/Policy'; +import type { Report } from '@/types/ingredients/Report'; +import type { Simulation } from '@/types/ingredients/Simulation'; +import type { UserPolicy } from '@/types/ingredients/UserPolicy'; +import type { + UserGeographyPopulation, + UserHouseholdPopulation, +} from '@/types/ingredients/UserPopulation'; +import type { UserReport } from '@/types/ingredients/UserReport'; +import type { UserSimulation } from '@/types/ingredients/UserSimulation'; +import type { SimulationStateProps } from '@/types/pathwayState'; +import { CURRENT_LAW_LABEL, fromApiPolicyId, isCurrentLaw } from '../currentLaw'; +import type { ReportBuilderState } from '../types'; + +interface HydrateArgs { + userReport: UserReport; + report: Report; + simulations: Simulation[]; + policies: Policy[]; + households: Household[]; + geographies: Geography[]; + userSimulations?: UserSimulation[]; + userPolicies?: UserPolicy[]; + userHouseholds?: UserHouseholdPopulation[]; + userGeographies?: UserGeographyPopulation[]; + currentLawId: number; +} + +export function hydrateReportBuilderState({ + userReport, + report, + simulations, + policies, + households, + geographies, + userSimulations, + userPolicies, + userHouseholds, + currentLawId, +}: HydrateArgs): ReportBuilderState { + const hydratedSimulations: SimulationStateProps[] = simulations.map((sim, index) => { + // Find the user simulation label + const userSim = userSimulations?.find((us) => us.simulationId === sim.id); + const label = userSim?.label || `Simulation #${index + 1}`; + + // Hydrate policy + const resolvedPolicyId = sim.policyId ? fromApiPolicyId(sim.policyId, currentLawId) : undefined; + const policy = policies.find((p) => p.id === sim.policyId); + const userPolicy = userPolicies?.find((up) => up.policyId === sim.policyId); + + const policyState = { + id: resolvedPolicyId, + label: isCurrentLaw(resolvedPolicyId) + ? CURRENT_LAW_LABEL + : userPolicy?.label || policy?.label || null, + parameters: policy?.parameters || [], + }; + + // Hydrate population + let populationState; + if (sim.populationType === 'household') { + const household = households.find((h) => h.id === sim.populationId); + const userHousehold = userHouseholds?.find((uh) => uh.householdId === sim.populationId); + populationState = { + label: userHousehold?.label || null, + type: 'household' as const, + household: household || null, + geography: null, + }; + } else { + const geography = geographies.find( + (g) => g.id === sim.populationId || g.geographyId === sim.populationId + ); + populationState = { + label: geography?.name || null, + type: 'geography' as const, + household: null, + geography: geography || null, + }; + } + + return { + id: sim.id, + label, + countryId: sim.countryId, + apiVersion: sim.apiVersion, + status: sim.status, + output: sim.output, + policy: policyState, + population: populationState, + }; + }); + + return { + id: userReport.id, + label: userReport.label || null, + year: report.year || '', + simulations: hydratedSimulations, + }; +} diff --git a/app/src/pathways/report/ReportPathwayWrapper.tsx b/app/src/pathways/report/ReportPathwayWrapper.tsx deleted file mode 100644 index dbafdcbbb..000000000 --- a/app/src/pathways/report/ReportPathwayWrapper.tsx +++ /dev/null @@ -1,584 +0,0 @@ -/** - * ReportPathwayWrapper - Pathway orchestrator for report creation - * - * Replaces ReportCreationFlow with local state management. - * Manages all state for report, simulations, policies, and populations. - * - * Phase 3 - Complete implementation with nested simulation/policy/population flows - */ - -import { useCallback, useState } from 'react'; -import { useSelector } from 'react-redux'; -import { useNavigate, useParams } from 'react-router-dom'; -import { ReportAdapter } from '@/adapters'; -import StandardLayout from '@/components/StandardLayout'; -import { MOCK_USER_ID } from '@/constants'; -import { ReportYearProvider } from '@/contexts/ReportYearContext'; -import { useCreateReport } from '@/hooks/useCreateReport'; -import { usePathwayNavigation } from '@/hooks/usePathwayNavigation'; -import { useUserGeographics } from '@/hooks/useUserGeographic'; -import { useUserHouseholds } from '@/hooks/useUserHousehold'; -import { useUserSimulations } from '@/hooks/useUserSimulations'; -import { countryIds } from '@/libs/countries'; -import { RootState } from '@/store'; -import { Report } from '@/types/ingredients/Report'; -import { ReportViewMode } from '@/types/pathwayModes/ReportViewMode'; -import { ReportStateProps, SimulationStateProps } from '@/types/pathwayState'; -import { ReportCreationPayload } from '@/types/payloads'; -import { convertSimulationStateToApi } from '@/utils/ingredientReconstruction'; -import { - createPolicyCallbacks, - createPopulationCallbacks, - createReportCallbacks, - createSimulationCallbacks, -} from '@/utils/pathwayCallbacks'; -import { initializeReportState } from '@/utils/pathwayState/initializeReportState'; -import { getReportOutputPath } from '@/utils/reportRouting'; -import PolicyExistingView from './views/policy/PolicyExistingView'; -// Policy views -import PolicyLabelView from './views/policy/PolicyLabelView'; -import PolicyParameterSelectorView from './views/policy/PolicyParameterSelectorView'; -import PolicySubmitView from './views/policy/PolicySubmitView'; -import GeographicConfirmationView from './views/population/GeographicConfirmationView'; -import HouseholdBuilderView from './views/population/HouseholdBuilderView'; -import PopulationExistingView from './views/population/PopulationExistingView'; -import PopulationLabelView from './views/population/PopulationLabelView'; -// Population views -import PopulationScopeView from './views/population/PopulationScopeView'; -// Report-level views -import ReportLabelView from './views/ReportLabelView'; -import ReportSetupView from './views/ReportSetupView'; -import ReportSimulationExistingView from './views/ReportSimulationExistingView'; -import ReportSimulationSelectionView from './views/ReportSimulationSelectionView'; -import ReportSubmitView from './views/ReportSubmitView'; -// Simulation views -import SimulationLabelView from './views/simulation/SimulationLabelView'; -import SimulationPolicySetupView from './views/simulation/SimulationPolicySetupView'; -import SimulationPopulationSetupView from './views/simulation/SimulationPopulationSetupView'; -import SimulationSetupView from './views/simulation/SimulationSetupView'; -import SimulationSubmitView from './views/simulation/SimulationSubmitView'; - -// View modes that manage their own AppShell (don't need StandardLayout wrapper) -const MODES_WITH_OWN_LAYOUT = new Set([ReportViewMode.POLICY_PARAMETER_SELECTOR]); - -interface ReportPathwayWrapperProps { - onComplete?: () => void; -} - -export default function ReportPathwayWrapper({ onComplete }: ReportPathwayWrapperProps) { - const { countryId: countryIdParam } = useParams<{ countryId: string }>(); - const navigate = useNavigate(); - - // Validate countryId from URL params - if (!countryIdParam) { - return
Error: Country ID not found
; - } - - if (!countryIds.includes(countryIdParam as any)) { - return
Error: Invalid country ID
; - } - - const countryId = countryIdParam as (typeof countryIds)[number]; - - // Initialize report state - const [reportState, setReportState] = useState(() => - initializeReportState(countryId) - ); - const [activeSimulationIndex, setActiveSimulationIndex] = useState<0 | 1>(0); - - const { createReport, isPending: isSubmitting } = useCreateReport(reportState.label || undefined); - - // Get metadata for population views - const metadata = useSelector((state: RootState) => state.metadata); - const currentLawId = useSelector((state: RootState) => state.metadata.currentLawId); - - // ========== NAVIGATION ========== - const { currentMode, navigateToMode, goBack, canGoBack } = usePathwayNavigation( - ReportViewMode.REPORT_LABEL - ); - - // ========== FETCH USER DATA FOR CONDITIONAL NAVIGATION ========== - const userId = MOCK_USER_ID.toString(); - const { data: userSimulations } = useUserSimulations(userId); - const { data: userHouseholds } = useUserHouseholds(userId); - const { data: userGeographics } = useUserGeographics(userId); - - const hasExistingSimulations = (userSimulations?.length ?? 0) > 0; - const hasExistingPopulations = (userHouseholds?.length ?? 0) + (userGeographics?.length ?? 0) > 0; - - // ========== HELPER: Get active simulation ========== - const activeSimulation = reportState.simulations[activeSimulationIndex]; - const otherSimulation = reportState.simulations[activeSimulationIndex === 0 ? 1 : 0]; - - // ========== SHARED CALLBACK FACTORIES ========== - // Report-level callbacks - const reportCallbacks = createReportCallbacks( - setReportState, - navigateToMode, - activeSimulationIndex, - ReportViewMode.REPORT_SELECT_SIMULATION, - ReportViewMode.REPORT_SETUP - ); - - // Policy callbacks for active simulation - const policyCallbacks = createPolicyCallbacks( - setReportState, - (state) => state.simulations[activeSimulationIndex].policy, - (state, policy) => { - const newSimulations = [...state.simulations] as [ - (typeof state.simulations)[0], - (typeof state.simulations)[1], - ]; - newSimulations[activeSimulationIndex].policy = policy; - return { ...state, simulations: newSimulations }; - }, - navigateToMode, - ReportViewMode.SIMULATION_SETUP, - undefined // No onPolicyComplete - stays within report pathway - ); - - // Population callbacks for active simulation - const populationCallbacks = createPopulationCallbacks( - setReportState, - (state) => state.simulations[activeSimulationIndex].population, - (state, population) => { - const newSimulations = [...state.simulations] as [ - (typeof state.simulations)[0], - (typeof state.simulations)[1], - ]; - newSimulations[activeSimulationIndex].population = population; - return { ...state, simulations: newSimulations }; - }, - navigateToMode, - ReportViewMode.SIMULATION_SETUP, - ReportViewMode.POPULATION_LABEL, - undefined // No onPopulationComplete - stays within report pathway - ); - - // Simulation callbacks for active simulation - const simulationCallbacks = createSimulationCallbacks( - setReportState, - (state) => state.simulations[activeSimulationIndex], - (state, simulation) => { - const newSimulations = [...state.simulations] as [ - (typeof state.simulations)[0], - (typeof state.simulations)[1], - ]; - newSimulations[activeSimulationIndex] = simulation; - return { ...state, simulations: newSimulations }; - }, - navigateToMode, - ReportViewMode.REPORT_SETUP, - undefined // No onSimulationComplete - stays within report pathway - ); - - // ========== CUSTOM WRAPPERS FOR SPECIFIC REPORT LOGIC ========== - // Wrapper for navigating to simulation selection (needs to update active index) - // Skips selection view if user has no existing simulations (except for baseline, which has DefaultBaselineOption) - const handleNavigateToSimulationSelection = useCallback( - (simulationIndex: 0 | 1) => { - setActiveSimulationIndex(simulationIndex); - // Always show selection view for baseline (index 0) because it has DefaultBaselineOption - // For reform (index 1), skip if no existing simulations - if (simulationIndex === 0 || hasExistingSimulations) { - reportCallbacks.navigateToSimulationSelection(simulationIndex); - } else { - // Skip selection view, go directly to create new (reform simulation only) - navigateToMode(ReportViewMode.SIMULATION_LABEL); - } - }, - [reportCallbacks, hasExistingSimulations, navigateToMode] - ); - - // Always navigate to policy setup view (shows Current Law, Load Existing, Create New) - const handleNavigateToPolicy = useCallback(() => { - navigateToMode(ReportViewMode.SETUP_POLICY); - }, [navigateToMode]); - - // Conditional navigation to population setup - skip if no existing populations - const handleNavigateToPopulation = useCallback(() => { - if (hasExistingPopulations) { - navigateToMode(ReportViewMode.SETUP_POPULATION); - } else { - // Skip selection view, go directly to create new - navigateToMode(ReportViewMode.POPULATION_SCOPE); - } - }, [hasExistingPopulations, navigateToMode]); - - // Wrapper for current law selection - const handleSelectCurrentLaw = useCallback(() => { - policyCallbacks.handleSelectCurrentLaw(currentLawId, 'Current law'); - }, [currentLawId, policyCallbacks]); - - // Handler for selecting default baseline simulation - // This is called after the simulation has been created by DefaultBaselineOption - const handleSelectDefaultBaseline = useCallback( - (simulationState: SimulationStateProps, _simulationId: string) => { - // Update the active simulation with the created simulation - setReportState((prev) => { - const newSimulations = [...prev.simulations] as [ - (typeof prev.simulations)[0], - (typeof prev.simulations)[1], - ]; - newSimulations[activeSimulationIndex] = simulationState; - return { ...prev, simulations: newSimulations }; - }); - - // Navigate back to report setup - navigateToMode(ReportViewMode.REPORT_SETUP); - }, - [activeSimulationIndex, navigateToMode] - ); - - // ========== REPORT SUBMISSION ========== - const handleSubmitReport = useCallback(() => { - const sim1Id = reportState.simulations[0]?.id; - const sim2Id = reportState.simulations[1]?.id; - - // Validation - if (!sim1Id) { - console.error('[ReportPathwayWrapper] Cannot submit: no baseline simulation'); - return; - } - - // Prepare report data - const reportData: Partial = { - countryId: reportState.countryId, - year: reportState.year, - simulationIds: [sim1Id, sim2Id].filter(Boolean) as string[], - apiVersion: reportState.apiVersion, - }; - - const serializedPayload: ReportCreationPayload = ReportAdapter.toCreationPayload( - reportData as Report - ); - - // Convert SimulationStateProps to Simulation format for CalcOrchestrator - const simulation1Api = convertSimulationStateToApi(reportState.simulations[0]); - const simulation2Api = convertSimulationStateToApi(reportState.simulations[1]); - - if (!simulation1Api) { - console.error('[ReportPathwayWrapper] Failed to convert simulation1 to API format'); - return; - } - - // Submit report - if (import.meta.env.DEV) { - (window as any).__journeyProfiler?.markStart('report-submit-to-navigate', 'user-interaction'); - } - createReport( - { - countryId: reportState.countryId, - payload: serializedPayload, - simulations: { - simulation1: simulation1Api, - simulation2: simulation2Api, - }, - populations: { - household1: reportState.simulations[0].population.household, - household2: reportState.simulations[1]?.population.household, - geography1: reportState.simulations[0].population.geography, - geography2: reportState.simulations[1]?.population.geography, - }, - }, - { - onSuccess: (data) => { - if (import.meta.env.DEV) { - (window as any).__journeyProfiler?.markEnd( - 'report-submit-to-navigate', - 'user-interaction' - ); - (window as any).__journeyProfiler?.markEvent( - 'report-navigate-to-output', - 'user-interaction' - ); - } - const outputPath = getReportOutputPath(reportState.countryId, data.userReport.id); - navigate(outputPath); - onComplete?.(); - }, - onError: (error) => { - console.error('[ReportPathwayWrapper] Report creation failed:', error); - }, - } - ); - }, [reportState, createReport, navigate, onComplete]); - - // ========== RENDER CURRENT VIEW ========== - // Determine which view to render based on current mode - let currentView: React.ReactNode; - - switch (currentMode) { - // ========== REPORT-LEVEL VIEWS ========== - case ReportViewMode.REPORT_LABEL: - currentView = ( - navigateToMode(ReportViewMode.REPORT_SETUP)} - onBack={canGoBack ? goBack : undefined} - onCancel={() => navigate(`/${countryId}/reports`)} - /> - ); - break; - - case ReportViewMode.REPORT_SETUP: - currentView = ( - navigateToMode(ReportViewMode.REPORT_SUBMIT)} - onPrefillPopulation2={reportCallbacks.prefillPopulation2FromSimulation1} - onBack={canGoBack ? goBack : undefined} - onCancel={() => navigate(`/${countryId}/reports`)} - /> - ); - break; - - case ReportViewMode.REPORT_SELECT_SIMULATION: - currentView = ( - navigateToMode(ReportViewMode.SIMULATION_LABEL)} - onLoadExisting={() => navigateToMode(ReportViewMode.REPORT_SELECT_EXISTING_SIMULATION)} - onSelectDefaultBaseline={handleSelectDefaultBaseline} - onBack={canGoBack ? goBack : undefined} - onCancel={() => navigate(`/${countryId}/reports`)} - /> - ); - break; - - case ReportViewMode.REPORT_SELECT_EXISTING_SIMULATION: - currentView = ( - navigateToMode(ReportViewMode.REPORT_SETUP)} - onBack={canGoBack ? goBack : undefined} - onCancel={() => navigate(`/${countryId}/reports`)} - /> - ); - break; - - case ReportViewMode.REPORT_SUBMIT: - currentView = ( - navigate(`/${countryId}/reports`)} - /> - ); - break; - - // ========== SIMULATION-LEVEL VIEWS ========== - case ReportViewMode.SIMULATION_LABEL: - currentView = ( - navigateToMode(ReportViewMode.SIMULATION_SETUP)} - onBack={canGoBack ? goBack : undefined} - onCancel={() => navigate(`/${countryId}/reports`)} - /> - ); - break; - - case ReportViewMode.SIMULATION_SETUP: - currentView = ( - navigateToMode(ReportViewMode.SIMULATION_SUBMIT)} - onBack={canGoBack ? goBack : undefined} - onCancel={() => navigate(`/${countryId}/reports`)} - /> - ); - break; - - case ReportViewMode.SIMULATION_SUBMIT: - currentView = ( - navigate(`/${countryId}/reports`)} - /> - ); - break; - - // ========== POLICY SETUP COORDINATION ========== - case ReportViewMode.SETUP_POLICY: - currentView = ( - navigateToMode(ReportViewMode.POLICY_LABEL)} - onLoadExisting={() => navigateToMode(ReportViewMode.SELECT_EXISTING_POLICY)} - onBack={canGoBack ? goBack : undefined} - onCancel={() => navigate(`/${countryId}/reports`)} - /> - ); - break; - - // ========== POPULATION SETUP COORDINATION ========== - case ReportViewMode.SETUP_POPULATION: - currentView = ( - navigateToMode(ReportViewMode.POPULATION_SCOPE)} - onLoadExisting={() => navigateToMode(ReportViewMode.SELECT_EXISTING_POPULATION)} - onCopyExisting={reportCallbacks.copyPopulationFromOtherSimulation} - onBack={canGoBack ? goBack : undefined} - onCancel={() => navigate(`/${countryId}/reports`)} - /> - ); - break; - - // ========== POLICY CREATION VIEWS ========== - case ReportViewMode.POLICY_LABEL: - currentView = ( - navigateToMode(ReportViewMode.POLICY_PARAMETER_SELECTOR)} - onBack={canGoBack ? goBack : undefined} - onCancel={() => navigate(`/${countryId}/reports`)} - /> - ); - break; - - case ReportViewMode.POLICY_PARAMETER_SELECTOR: - currentView = ( - navigateToMode(ReportViewMode.POLICY_SUBMIT)} - onBack={canGoBack ? goBack : undefined} - /> - ); - break; - - case ReportViewMode.POLICY_SUBMIT: - currentView = ( - navigate(`/${countryId}/reports`)} - /> - ); - break; - - case ReportViewMode.SELECT_EXISTING_POLICY: - currentView = ( - navigate(`/${countryId}/reports`)} - /> - ); - break; - - // ========== POPULATION CREATION VIEWS ========== - case ReportViewMode.POPULATION_SCOPE: - currentView = ( - navigate(`/${countryId}/reports`)} - /> - ); - break; - - case ReportViewMode.POPULATION_LABEL: - currentView = ( - { - // Navigate based on population type - if (activeSimulation.population.type === 'household') { - navigateToMode(ReportViewMode.POPULATION_HOUSEHOLD_BUILDER); - } else { - navigateToMode(ReportViewMode.POPULATION_GEOGRAPHIC_CONFIRM); - } - }} - onBack={canGoBack ? goBack : undefined} - /> - ); - break; - - case ReportViewMode.POPULATION_HOUSEHOLD_BUILDER: - currentView = ( - - ); - break; - - case ReportViewMode.POPULATION_GEOGRAPHIC_CONFIRM: - currentView = ( - - ); - break; - - case ReportViewMode.SELECT_EXISTING_POPULATION: - currentView = ( - navigate(`/${countryId}/reports`)} - /> - ); - break; - - default: - currentView =
Unknown view mode: {currentMode}
; - } - - // Conditionally wrap with StandardLayout - // Views in MODES_WITH_OWN_LAYOUT manage their own AppShell - const needsStandardLayout = !MODES_WITH_OWN_LAYOUT.has(currentMode); - - // Wrap with ReportYearProvider so child components can access the year - const wrappedView = ( - {currentView} - ); - - // This is a workaround to allow the param setter to manage its own AppShell - return needsStandardLayout ? {wrappedView} : wrappedView; -} diff --git a/app/src/pathways/report/components/DefaultBaselineOption.tsx b/app/src/pathways/report/components/DefaultBaselineOption.tsx deleted file mode 100644 index 60c6a06e6..000000000 --- a/app/src/pathways/report/components/DefaultBaselineOption.tsx +++ /dev/null @@ -1,60 +0,0 @@ -/** - * DefaultBaselineOption - Option card for selecting default baseline simulation - * - * This is a selectable card that renders an option for "Current law + Nationwide population" - * as a quick-select for the baseline simulation in a report. - * - * Unlike other cards, this one doesn't navigate anywhere - it just marks itself as selected - * and the parent view handles creation when "Next" is clicked. - */ - -import { IconChevronRight } from '@tabler/icons-react'; -import { Group, Stack, Text } from '@/components/ui'; -import { colors, typography } from '@/designTokens'; -import { cn } from '@/lib/utils'; -import { getDefaultBaselineLabel } from '@/utils/isDefaultBaselineSimulation'; - -interface DefaultBaselineOptionProps { - countryId: string; - isSelected: boolean; - onClick: () => void; -} - -export default function DefaultBaselineOption({ - countryId, - isSelected, - onClick, -}: DefaultBaselineOptionProps) { - const simulationLabel = getDefaultBaselineLabel(countryId); - - return ( - - ); -} diff --git a/app/src/pathways/report/components/valueSetters/ValueInputBox.tsx b/app/src/pathways/report/components/valueSetters/ValueInputBox.tsx index 2a747d64a..cf94ed4ac 100644 --- a/app/src/pathways/report/components/valueSetters/ValueInputBox.tsx +++ b/app/src/pathways/report/components/valueSetters/ValueInputBox.tsx @@ -9,10 +9,11 @@ interface ValueInputBoxProps { param: ParameterMetadata; value?: any; onChange?: (value: any) => void; + onSubmit?: () => void; } export function ValueInputBox(props: ValueInputBoxProps) { - const { param, value, onChange, label } = props; + const { param, value, onChange, onSubmit, label } = props; // US and UK packages use these type designations inconsistently const USD_UNITS = ['currency-USD', 'currency_USD', 'USD']; @@ -97,6 +98,11 @@ export function ValueInputBox(props: ValueInputBoxProps) { min={0} value={displayValue} onChange={handleChange} + onKeyDown={(e) => { + if (e.key === 'Enter') { + onSubmit?.(); + } + }} className={cn(prefix ? 'tw:pl-7' : '', isPercentage ? 'tw:pr-7' : '')} style={{ flex: 1 }} /> diff --git a/app/src/pathways/report/components/valueSetters/ValueSetterProps.ts b/app/src/pathways/report/components/valueSetters/ValueSetterProps.ts index 50d96a96e..f5d50db2f 100644 --- a/app/src/pathways/report/components/valueSetters/ValueSetterProps.ts +++ b/app/src/pathways/report/components/valueSetters/ValueSetterProps.ts @@ -14,4 +14,5 @@ export interface ValueSetterProps { setStartDate: Dispatch>; endDate: string; setEndDate: Dispatch>; + onSubmit?: () => void; } diff --git a/app/src/pathways/report/views/ReportLabelView.story.tsx b/app/src/pathways/report/views/ReportLabelView.story.tsx deleted file mode 100644 index 43257ed55..000000000 --- a/app/src/pathways/report/views/ReportLabelView.story.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { withMockedProviders } from '@/tests/fixtures/storybook/storybookProviders'; -import ReportLabelView from './ReportLabelView'; - -const meta: Meta = { - title: 'Report creation/ReportLabelView', - component: ReportLabelView, - decorators: [withMockedProviders()], - args: { - onUpdateLabel: () => {}, - onUpdateYear: () => {}, - onNext: () => {}, - onBack: () => {}, - onCancel: () => {}, - }, -}; - -export default meta; -type Story = StoryObj; - -export const Empty: Story = { - args: { - label: null, - year: null, - }, -}; - -export const Prefilled: Story = { - args: { - label: 'Expand Child Tax Credit to $4,000', - year: '2026', - }, -}; diff --git a/app/src/pathways/report/views/ReportLabelView.tsx b/app/src/pathways/report/views/ReportLabelView.tsx deleted file mode 100644 index 62e77bca6..000000000 --- a/app/src/pathways/report/views/ReportLabelView.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { useState } from 'react'; -import { useSelector } from 'react-redux'; -import PathwayView from '@/components/common/PathwayView'; -import { - Input, - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '@/components/ui'; -import { CURRENT_YEAR } from '@/constants'; -import { useCurrentCountry } from '@/hooks/useCurrentCountry'; -import { getTaxYears } from '@/libs/metadataUtils'; -import { trackReportStarted } from '@/utils/analytics'; - -interface ReportLabelViewProps { - label: string | null; - year: string | null; - onUpdateLabel: (label: string) => void; - onUpdateYear: (year: string) => void; - onNext: () => void; - onBack?: () => void; - onCancel?: () => void; -} - -export default function ReportLabelView({ - label, - year, - onUpdateLabel, - onUpdateYear, - onNext, - onBack, - onCancel, -}: ReportLabelViewProps) { - const countryId = useCurrentCountry(); - const [localLabel, setLocalLabel] = useState(label || ''); - const [localYear, setLocalYear] = useState(year || CURRENT_YEAR); - - // Get available years from metadata - const availableYears = useSelector(getTaxYears); - - // Use British spelling for UK - const initializeText = countryId === 'uk' ? 'Initialise' : 'Initialize'; - - function handleLocalLabelChange(value: string) { - setLocalLabel(value); - } - - function handleYearChange(value: string) { - const newYear = value || CURRENT_YEAR; - setLocalYear(newYear); - } - - function submissionHandler() { - trackReportStarted(); - onUpdateLabel(localLabel); - onUpdateYear(localYear); - onNext(); - } - - const formInputs = ( - <> -
- - handleLocalLabelChange(e.currentTarget.value)} - /> -
-
- - -
- - ); - - const primaryAction = { - label: `${initializeText} report`, - onClick: submissionHandler, - }; - - return ( - - ); -} diff --git a/app/src/pathways/report/views/ReportSetupView.story.tsx b/app/src/pathways/report/views/ReportSetupView.story.tsx deleted file mode 100644 index 6b4117e3e..000000000 --- a/app/src/pathways/report/views/ReportSetupView.story.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { withMockedProviders } from '@/tests/fixtures/storybook/storybookProviders'; -import type { ReportStateProps } from '@/types/pathwayState'; -import ReportSetupView from './ReportSetupView'; - -const meta: Meta = { - title: 'Report creation/ReportSetupView', - component: ReportSetupView, - decorators: [withMockedProviders({ households: true, geographics: true })], - args: { - onNavigateToSimulationSelection: () => {}, - onNext: () => {}, - onPrefillPopulation2: () => {}, - onBack: () => {}, - onCancel: () => {}, - }, -}; - -export default meta; -type Story = StoryObj; - -const emptyReport: ReportStateProps = { - label: 'CTC expansion analysis', - year: '2026', - countryId: 'us', - apiVersion: null, - status: 'pending', - simulations: [ - { - label: null, - policy: { label: null, parameters: [] }, - population: { label: null, type: null, household: null, geography: null }, - }, - { - label: null, - policy: { label: null, parameters: [] }, - population: { label: null, type: null, household: null, geography: null }, - }, - ], -}; - -const oneSimulationReport: ReportStateProps = { - label: 'CTC expansion analysis', - year: '2026', - countryId: 'us', - apiVersion: null, - status: 'pending', - simulations: [ - { - id: 'sim-1', - label: 'Baseline 2026', - policy: { id: 'pol-1', label: 'Current law', parameters: [] }, - population: { - label: 'National households', - type: 'geography', - household: null, - geography: { - id: 'us-national', - countryId: 'us', - scope: 'national', - geographyId: 'us', - }, - }, - }, - { - label: null, - policy: { label: null, parameters: [] }, - population: { label: null, type: null, household: null, geography: null }, - }, - ], -}; - -const bothSimulationsReport: ReportStateProps = { - label: 'CTC expansion analysis', - year: '2026', - countryId: 'us', - apiVersion: null, - status: 'pending', - simulations: [ - { - id: 'sim-1', - label: 'Baseline 2026', - policy: { id: 'pol-1', label: 'Current law', parameters: [] }, - population: { - label: 'National households', - type: 'geography', - household: null, - geography: { - id: 'us-national', - countryId: 'us', - scope: 'national', - geographyId: 'us', - }, - }, - }, - { - id: 'sim-2', - label: 'Reform: CTC $4,000', - policy: { id: 'pol-2', label: 'Expand CTC to $4,000', parameters: [] }, - population: { - label: 'National households', - type: 'geography', - household: null, - geography: { - id: 'us-national', - countryId: 'us', - scope: 'national', - geographyId: 'us', - }, - }, - }, - ], -}; - -export const NoSimulations: Story = { - args: { - reportState: emptyReport, - }, -}; - -export const OneSimulation: Story = { - args: { - reportState: oneSimulationReport, - }, -}; - -export const BothSimulations: Story = { - args: { - reportState: bothSimulationsReport, - }, -}; diff --git a/app/src/pathways/report/views/ReportSetupView.tsx b/app/src/pathways/report/views/ReportSetupView.tsx deleted file mode 100644 index ae5bd057b..000000000 --- a/app/src/pathways/report/views/ReportSetupView.tsx +++ /dev/null @@ -1,242 +0,0 @@ -import { useState } from 'react'; -import PathwayView from '@/components/common/PathwayView'; -import { MOCK_USER_ID } from '@/constants'; -import { useUserGeographics } from '@/hooks/useUserGeographic'; -import { useUserHouseholds } from '@/hooks/useUserHousehold'; -import { ReportStateProps, SimulationStateProps } from '@/types/pathwayState'; -import { isSimulationConfigured } from '@/utils/validation/ingredientValidation'; - -type SimulationCard = 'simulation1' | 'simulation2'; - -interface ReportSetupViewProps { - reportState: ReportStateProps; - onNavigateToSimulationSelection: (simulationIndex: 0 | 1) => void; - onNext: () => void; - onPrefillPopulation2: () => void; - onBack?: () => void; - onCancel?: () => void; -} - -export default function ReportSetupView({ - reportState, - onNavigateToSimulationSelection, - onNext, - onPrefillPopulation2, - onBack, - onCancel, -}: ReportSetupViewProps) { - const [selectedCard, setSelectedCard] = useState(null); - - // Get simulation state from report - const simulation1 = reportState.simulations[0]; - const simulation2 = reportState.simulations[1]; - - // Fetch population data for pre-filling simulation 2 - const userId = MOCK_USER_ID.toString(); - const { data: householdData } = useUserHouseholds(userId); - const { data: geographicData } = useUserGeographics(userId); - - // Check if simulations are fully configured - const simulation1Configured = isSimulationConfigured(simulation1); - const simulation2Configured = isSimulationConfigured(simulation2); - - // Check if population data is loaded (needed for simulation2 prefill) - const isPopulationDataLoaded = householdData !== undefined && geographicData !== undefined; - - // Determine if simulation2 is optional based on population type of simulation1 - const isHouseholdReport = simulation1?.population.type === 'household'; - const isSimulation2Optional = simulation1Configured && isHouseholdReport; - - const handleSimulation1Select = () => { - setSelectedCard('simulation1'); - }; - - const handleSimulation2Select = () => { - setSelectedCard('simulation2'); - }; - - const handleNext = () => { - if (selectedCard === 'simulation1') { - onNavigateToSimulationSelection(0); - } else if (selectedCard === 'simulation2') { - // PRE-FILL POPULATION FROM SIMULATION 1 - onPrefillPopulation2(); - onNavigateToSimulationSelection(1); - } else if (canProceed) { - onNext(); - } - }; - - const setupConditionCards = [ - { - title: getBaselineCardTitle(simulation1, simulation1Configured), - description: getBaselineCardDescription(simulation1, simulation1Configured), - onClick: handleSimulation1Select, - isSelected: selectedCard === 'simulation1', - isFulfilled: simulation1Configured, - isDisabled: false, - }, - { - title: getComparisonCardTitle( - simulation2, - simulation2Configured, - simulation1Configured, - isSimulation2Optional - ), - description: getComparisonCardDescription( - simulation2, - simulation2Configured, - simulation1Configured, - isSimulation2Optional, - !isPopulationDataLoaded - ), - onClick: handleSimulation2Select, - isSelected: selectedCard === 'simulation2', - isFulfilled: simulation2Configured, - isDisabled: !simulation1Configured, // Disable until simulation1 is configured - }, - ]; - - // Determine if we can proceed to submission - const canProceed: boolean = - simulation1Configured && (isSimulation2Optional || simulation2Configured); - - // Determine the primary action label and state - const getPrimaryAction = () => { - // Allow setting up simulation1 if selected and not configured - if (selectedCard === 'simulation1' && !simulation1Configured) { - return { - label: 'Configure baseline simulation', - onClick: handleNext, - isDisabled: false, - }; - } - // Allow setting up simulation2 if selected and not configured - else if (selectedCard === 'simulation2' && !simulation2Configured) { - return { - label: 'Configure comparison simulation', - onClick: handleNext, - isDisabled: !isPopulationDataLoaded, // Disable if data not loaded - }; - } - // Allow proceeding if requirements met - else if (canProceed) { - return { - label: 'Review report', - onClick: handleNext, - isDisabled: false, - }; - } - // Disable if requirements not met - show uppermost option (baseline) - return { - label: 'Configure baseline simulation', - onClick: handleNext, - isDisabled: true, - }; - }; - - const primaryAction = getPrimaryAction(); - - return ( - - ); -} - -/** - * Get title for baseline simulation card - */ -function getBaselineCardTitle( - simulation: SimulationStateProps | null, - isConfigured: boolean -): string { - if (isConfigured) { - const label = simulation?.label || simulation?.id || 'Configured'; - return `Baseline: ${label}`; - } - return 'Baseline simulation'; -} - -/** - * Get description for baseline simulation card - */ -function getBaselineCardDescription( - simulation: SimulationStateProps | null, - isConfigured: boolean -): string { - if (isConfigured) { - const policyId = simulation?.policy.id || 'N/A'; - const populationId = - simulation?.population.household?.id || simulation?.population.geography?.id || 'N/A'; - return `Policy #${policyId} • Household(s) #${populationId}`; - } - return 'Select your baseline simulation'; -} - -/** - * Get title for comparison simulation card - */ -function getComparisonCardTitle( - simulation: SimulationStateProps | null, - isConfigured: boolean, - baselineConfigured: boolean, - isOptional: boolean -): string { - // If configured, show simulation name - if (isConfigured) { - const label = simulation?.label || simulation?.id || 'Configured'; - return `Comparison: ${label}`; - } - - // If baseline not configured yet, show waiting message - if (!baselineConfigured) { - return 'Comparison simulation · Waiting for baseline'; - } - - // Baseline configured: show optional or required - if (isOptional) { - return 'Comparison simulation (optional)'; - } - return 'Comparison simulation'; -} - -/** - * Get description for comparison simulation card - */ -function getComparisonCardDescription( - simulation: SimulationStateProps | null, - isConfigured: boolean, - baselineConfigured: boolean, - isOptional: boolean, - dataLoading: boolean -): string { - // If configured, show simulation details - if (isConfigured) { - const policyId = simulation?.policy.id || 'N/A'; - const populationId = - simulation?.population.household?.id || simulation?.population.geography?.id || 'N/A'; - return `Policy #${policyId} • Household(s) #${populationId}`; - } - - // If baseline not configured yet, show waiting message - if (!baselineConfigured) { - return 'Set up your baseline simulation first'; - } - - // If baseline configured but data still loading, show loading message - if (dataLoading && baselineConfigured && !isConfigured) { - return 'Loading household data...'; - } - - // Baseline configured: show optional or required message - if (isOptional) { - return 'Optional: add a second simulation to compare'; - } - return 'Required: add a second simulation to compare'; -} diff --git a/app/src/pathways/report/views/ReportSimulationExistingView.tsx b/app/src/pathways/report/views/ReportSimulationExistingView.tsx deleted file mode 100644 index d3032b6d3..000000000 --- a/app/src/pathways/report/views/ReportSimulationExistingView.tsx +++ /dev/null @@ -1,178 +0,0 @@ -import { useState } from 'react'; -import PathwayView from '@/components/common/PathwayView'; -import { MOCK_USER_ID } from '@/constants'; -import { EnhancedUserSimulation, useUserSimulations } from '@/hooks/useUserSimulations'; -import { SimulationStateProps } from '@/types/pathwayState'; -import { arePopulationsCompatible } from '@/utils/populationCompatibility'; - -interface ReportSimulationExistingViewProps { - activeSimulationIndex: 0 | 1; - otherSimulation: SimulationStateProps | null; - onSelectSimulation: (enhancedSimulation: EnhancedUserSimulation) => void; - onNext: () => void; - onBack?: () => void; - onCancel?: () => void; -} - -export default function ReportSimulationExistingView({ - activeSimulationIndex: _activeSimulationIndex, - otherSimulation, - onSelectSimulation, - onNext, - onBack, - onCancel, -}: ReportSimulationExistingViewProps) { - const userId = MOCK_USER_ID.toString(); - - const { data, isLoading, isError, error } = useUserSimulations(userId); - const [localSimulation, setLocalSimulation] = useState(null); - - function canProceed() { - if (!localSimulation) { - return false; - } - return localSimulation.simulation?.id !== null && localSimulation.simulation?.id !== undefined; - } - - function handleSimulationSelect(enhancedSimulation: EnhancedUserSimulation) { - if (!enhancedSimulation) { - return; - } - - setLocalSimulation(enhancedSimulation); - } - - function handleSubmit() { - if (!localSimulation || !localSimulation.simulation) { - return; - } - - onSelectSimulation(localSimulation); - onNext(); - } - - const userSimulations = data || []; - - if (isLoading) { - return ( - Loading simulations...

} - buttonPreset="none" - /> - ); - } - - if (isError) { - return ( - - Error: {(error as Error)?.message || 'Something went wrong.'} -

- } - buttonPreset="none" - /> - ); - } - - if (userSimulations.length === 0) { - return ( - No simulations available. Please create a new simulation.

} - primaryAction={{ - label: 'Next', - onClick: () => {}, - isDisabled: true, - }} - backAction={onBack ? { onClick: onBack } : undefined} - cancelAction={onCancel ? { onClick: onCancel } : undefined} - /> - ); - } - - // Filter simulations with loaded data - const filteredSimulations = userSimulations.filter((enhancedSim) => enhancedSim.simulation?.id); - - // Get other simulation's population ID (base ingredient ID) for compatibility check - // For household populations, use household.id - // For geography populations, use geography.geographyId (the base geography identifier) - const otherPopulationId = - otherSimulation?.population.household?.id || - otherSimulation?.population.geography?.geographyId || - otherSimulation?.population.geography?.id; - - // Sort simulations to show compatible first, then incompatible - const sortedSimulations = [...filteredSimulations].sort((a, b) => { - const aCompatible = arePopulationsCompatible(otherPopulationId, a.simulation!.populationId); - const bCompatible = arePopulationsCompatible(otherPopulationId, b.simulation!.populationId); - - return bCompatible === aCompatible ? 0 : aCompatible ? -1 : 1; - }); - - // Build card list items from sorted simulations - const simulationCardItems = sortedSimulations.map((enhancedSim) => { - const simulation = enhancedSim.simulation!; - - // Check compatibility with other simulation - const isCompatible = arePopulationsCompatible(otherPopulationId, simulation.populationId); - - let title = ''; - let subtitle = ''; - - if (enhancedSim.userSimulation?.label) { - title = enhancedSim.userSimulation.label; - subtitle = `Simulation #${simulation.id}`; - } else { - title = `Simulation #${simulation.id}`; - } - - // Add policy and population info to subtitle if available - const policyLabel = - enhancedSim.userPolicy?.label || enhancedSim.policy?.label || enhancedSim.policy?.id; - const populationLabel = - enhancedSim.userHousehold?.label || enhancedSim.geography?.name || simulation.populationId; - - if (policyLabel && populationLabel) { - subtitle = subtitle - ? `${subtitle} • Policy: ${policyLabel} • Population: ${populationLabel}` - : `Policy: ${policyLabel} • Population: ${populationLabel}`; - } - - // If incompatible, add explanation to subtitle - if (!isCompatible) { - subtitle = subtitle - ? `${subtitle} • Incompatible: different population than configured simulation` - : 'Incompatible: different population than configured simulation'; - } - - return { - id: enhancedSim.userSimulation?.id?.toString() || simulation.id, // Use user simulation association ID for unique key - title, - subtitle, - onClick: () => handleSimulationSelect(enhancedSim), - isSelected: localSimulation?.simulation?.id === simulation.id, - isDisabled: !isCompatible, - }; - }); - - const primaryAction = { - label: 'Next', - onClick: handleSubmit, - isDisabled: !canProceed(), - }; - - return ( - - ); -} diff --git a/app/src/pathways/report/views/ReportSimulationSelectionView.tsx b/app/src/pathways/report/views/ReportSimulationSelectionView.tsx deleted file mode 100644 index 3d4919d8a..000000000 --- a/app/src/pathways/report/views/ReportSimulationSelectionView.tsx +++ /dev/null @@ -1,308 +0,0 @@ -import { useState } from 'react'; -import { SimulationAdapter } from '@/adapters'; -import PathwayView from '@/components/common/PathwayView'; -import { ButtonPanelVariant } from '@/components/flowView'; -import { Stack } from '@/components/ui'; -import { MOCK_USER_ID } from '@/constants'; -import { useCreateSimulation } from '@/hooks/useCreateSimulation'; -import { useCreateGeographicAssociation } from '@/hooks/useUserGeographic'; -import { useUserSimulations } from '@/hooks/useUserSimulations'; -import { Simulation } from '@/types/ingredients/Simulation'; -import { PolicyStateProps, PopulationStateProps, SimulationStateProps } from '@/types/pathwayState'; -import { SimulationCreationPayload } from '@/types/payloads'; -import { - countryNames, - getDefaultBaselineLabel, - isDefaultBaselineSimulation, -} from '@/utils/isDefaultBaselineSimulation'; -import DefaultBaselineOption from '../components/DefaultBaselineOption'; - -/** - * Helper functions for creating default baseline simulation - */ - -/** - * Creates a policy state for current law - */ -function createCurrentLawPolicy(currentLawId: number): PolicyStateProps { - return { - id: currentLawId.toString(), - label: 'Current law', - parameters: [], - }; -} - -/** - * Creates a population state for nationwide geography - */ -function createNationwidePopulation( - countryId: string, - geographyId: string, - countryName: string -): PopulationStateProps { - return { - label: `${countryName} nationwide`, - type: 'geography', - household: null, - geography: { - id: geographyId, - countryId: countryId as any, - scope: 'national', - geographyId: countryId, - name: 'National', - }, - }; -} - -/** - * Creates a simulation state from policy and population - */ -function createSimulationState( - simulationId: string, - simulationLabel: string, - countryId: string, - policy: PolicyStateProps, - population: PopulationStateProps -): SimulationStateProps { - return { - id: simulationId, - label: simulationLabel, - countryId, - apiVersion: undefined, - status: undefined, - output: null, - policy, - population, - }; -} - -type SetupAction = 'createNew' | 'loadExisting' | 'defaultBaseline'; - -interface ReportSimulationSelectionViewProps { - simulationIndex: 0 | 1; - countryId: string; - currentLawId: number; - onCreateNew: () => void; - onLoadExisting: () => void; - onSelectDefaultBaseline?: (simulationState: SimulationStateProps, simulationId: string) => void; - onBack?: () => void; - onCancel?: () => void; -} - -export default function ReportSimulationSelectionView({ - simulationIndex, - countryId, - currentLawId, - onCreateNew, - onLoadExisting, - onSelectDefaultBaseline, - onBack, - onCancel, -}: ReportSimulationSelectionViewProps) { - const userId = MOCK_USER_ID.toString(); - const { data: userSimulations } = useUserSimulations(userId); - const hasExistingSimulations = (userSimulations?.length ?? 0) > 0; - - const [selectedAction, setSelectedAction] = useState(null); - const [isCreatingBaseline, setIsCreatingBaseline] = useState(false); - - const { mutateAsync: createGeographicAssociation } = useCreateGeographicAssociation(); - const simulationLabel = getDefaultBaselineLabel(countryId); - const { createSimulation } = useCreateSimulation(simulationLabel); - - // Find existing default baseline simulation for this country - const existingBaseline = userSimulations?.find((sim) => - isDefaultBaselineSimulation(sim, countryId, currentLawId) - ); - const existingSimulationId = existingBaseline?.userSimulation?.simulationId; - - const isBaseline = simulationIndex === 0; - - function handleClickCreateNew() { - setSelectedAction('createNew'); - } - - function handleClickExisting() { - if (hasExistingSimulations) { - setSelectedAction('loadExisting'); - } - } - - function handleClickDefaultBaseline() { - setSelectedAction('defaultBaseline'); - } - - /** - * Reuses an existing default baseline simulation - */ - function reuseExistingBaseline() { - if (!existingBaseline || !existingSimulationId || !onSelectDefaultBaseline) { - return; - } - - const countryName = countryNames[countryId] || countryId.toUpperCase(); - const geographyId = existingBaseline.geography?.geographyId || countryId; - - const policy = createCurrentLawPolicy(currentLawId); - const population = createNationwidePopulation(countryId, geographyId, countryName); - const simulationState = createSimulationState( - existingSimulationId, - simulationLabel, - countryId, - policy, - population - ); - - onSelectDefaultBaseline(simulationState, existingSimulationId); - } - - /** - * Creates a new default baseline simulation - */ - async function createNewBaseline() { - if (!onSelectDefaultBaseline) { - return; - } - - setIsCreatingBaseline(true); - const countryName = countryNames[countryId] || countryId.toUpperCase(); - - try { - // Create geography association - const geographyResult = await createGeographicAssociation({ - id: `${userId}-${Date.now()}`, - userId, - countryId: countryId as any, - geographyId: countryId, - scope: 'national', - label: `${countryName} nationwide`, - }); - - // Create simulation - const simulationData: Partial = { - populationId: geographyResult.geographyId, - policyId: currentLawId.toString(), - populationType: 'geography', - }; - - const serializedPayload: SimulationCreationPayload = - SimulationAdapter.toCreationPayload(simulationData); - - createSimulation(serializedPayload, { - onSuccess: (data) => { - const simulationId = data.result.simulation_id; - - const policy = createCurrentLawPolicy(currentLawId); - const population = createNationwidePopulation( - countryId, - geographyResult.geographyId, - countryName - ); - const simulationState = createSimulationState( - simulationId, - simulationLabel, - countryId, - policy, - population - ); - - if (onSelectDefaultBaseline) { - onSelectDefaultBaseline(simulationState, simulationId); - } - }, - onError: (error) => { - console.error('[ReportSimulationSelectionView] Failed to create simulation:', error); - setIsCreatingBaseline(false); - }, - }); - } catch (error) { - console.error( - '[ReportSimulationSelectionView] Failed to create geographic association:', - error - ); - setIsCreatingBaseline(false); - } - } - - async function handleClickSubmit() { - if (selectedAction === 'createNew') { - onCreateNew(); - } else if (selectedAction === 'loadExisting') { - onLoadExisting(); - } else if (selectedAction === 'defaultBaseline') { - // Reuse existing or create new default baseline simulation - if (existingBaseline && existingSimulationId) { - reuseExistingBaseline(); - } else { - await createNewBaseline(); - } - } - } - - const buttonPanelCards = [ - { - title: 'Create new simulation', - description: 'Build a new simulation', - onClick: handleClickCreateNew, - isSelected: selectedAction === 'createNew', - }, - // Only show "Load existing" if user has existing simulations - ...(hasExistingSimulations - ? [ - { - title: 'Load existing simulation', - description: 'Use a simulation you have already created', - onClick: handleClickExisting, - isSelected: selectedAction === 'loadExisting', - }, - ] - : []), - ]; - - const hasExistingBaselineText = existingBaseline && existingSimulationId; - - const primaryAction = { - label: isCreatingBaseline - ? hasExistingBaselineText - ? 'Applying simulation...' - : 'Creating simulation...' - : 'Next', - onClick: handleClickSubmit, - isLoading: isCreatingBaseline, - isDisabled: !selectedAction || isCreatingBaseline, - }; - - // For baseline simulation, combine default baseline option with other cards - if (isBaseline) { - return ( - - - - - } - primaryAction={primaryAction} - backAction={onBack ? { onClick: onBack } : undefined} - cancelAction={onCancel ? { onClick: onCancel } : undefined} - /> - ); - } - - // For reform simulation, just show the standard button panel - return ( - - ); -} diff --git a/app/src/pathways/report/views/ReportSubmitView.story.tsx b/app/src/pathways/report/views/ReportSubmitView.story.tsx deleted file mode 100644 index 386625f5e..000000000 --- a/app/src/pathways/report/views/ReportSubmitView.story.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import type { ReportStateProps } from '@/types/pathwayState'; -import ReportSubmitView from './ReportSubmitView'; - -const meta: Meta = { - title: 'Report creation/ReportSubmitView', - component: ReportSubmitView, - args: { - onSubmit: () => {}, - onBack: () => {}, - onCancel: () => {}, - }, -}; - -export default meta; -type Story = StoryObj; - -const readyReport: ReportStateProps = { - label: 'CTC expansion analysis', - year: '2026', - countryId: 'us', - apiVersion: null, - status: 'pending', - simulations: [ - { - id: 'sim-1', - label: 'Baseline 2026', - policy: { id: 'pol-1', label: 'Current law', parameters: [] }, - population: { - label: 'National households', - type: 'geography', - household: null, - geography: { - id: 'us-national', - countryId: 'us', - scope: 'national', - geographyId: 'us', - }, - }, - }, - { - id: 'sim-2', - label: 'Reform: CTC $4,000', - policy: { id: 'pol-2', label: 'Expand CTC to $4,000', parameters: [] }, - population: { - label: 'National households', - type: 'geography', - household: null, - geography: { - id: 'us-national', - countryId: 'us', - scope: 'national', - geographyId: 'us', - }, - }, - }, - ], -}; - -export const Ready: Story = { - args: { - reportState: readyReport, - isSubmitting: false, - }, -}; - -export const Submitting: Story = { - args: { - reportState: readyReport, - isSubmitting: true, - }, -}; diff --git a/app/src/pathways/report/views/ReportSubmitView.tsx b/app/src/pathways/report/views/ReportSubmitView.tsx deleted file mode 100644 index 7a188922d..000000000 --- a/app/src/pathways/report/views/ReportSubmitView.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import IngredientSubmissionView, { SummaryBoxItem } from '@/components/IngredientSubmissionView'; -import { ReportStateProps } from '@/types/pathwayState'; - -interface ReportSubmitViewProps { - reportState: ReportStateProps; - onSubmit: () => void; - isSubmitting: boolean; - onBack?: () => void; - onCancel?: () => void; -} - -export default function ReportSubmitView({ - reportState, - onSubmit, - isSubmitting, - onBack, - onCancel, -}: ReportSubmitViewProps) { - const simulation1 = reportState.simulations[0]; - const simulation2 = reportState.simulations[1]; - - // Helper to get badge text for a simulation - const getSimulationBadge = (simulation: typeof simulation1) => { - if (!simulation) { - return undefined; - } - - // Get policy label - use label if available, otherwise fall back to ID - const policyLabel = simulation.policy.label || `Policy #${simulation.policy.id}`; - - // Get population label - use label if available, otherwise fall back to ID - const populationLabel = - simulation.population.label || - `Population #${simulation.population.household?.id || simulation.population.geography?.id}`; - - return `${policyLabel} • ${populationLabel}`; - }; - - // Check if simulation is configured (has either ID or configured ingredients) - const isSimulation1Configured = - !!simulation1?.id || - (!!simulation1?.policy?.id && - !!(simulation1?.population?.household?.id || simulation1?.population?.geography?.id)); - const isSimulation2Configured = - !!simulation2?.id || - (!!simulation2?.policy?.id && - !!(simulation2?.population?.household?.id || simulation2?.population?.geography?.id)); - - // Create summary boxes based on the simulations - const summaryBoxes: SummaryBoxItem[] = [ - { - title: 'Baseline simulation', - description: - simulation1?.label || (simulation1?.id ? `Simulation #${simulation1.id}` : 'No simulation'), - isFulfilled: isSimulation1Configured, - badge: isSimulation1Configured ? getSimulationBadge(simulation1) : undefined, - }, - { - title: 'Comparison simulation', - description: - simulation2?.label || (simulation2?.id ? `Simulation #${simulation2.id}` : 'No simulation'), - isFulfilled: isSimulation2Configured, - isDisabled: !isSimulation2Configured, - badge: isSimulation2Configured ? getSimulationBadge(simulation2) : undefined, - }, - ]; - - return ( - - ); -} diff --git a/app/src/tests/fixtures/api/societyWideMocks.ts b/app/src/tests/fixtures/api/societyWideMocks.ts index 2f2e1a502..cc97abd8e 100644 --- a/app/src/tests/fixtures/api/societyWideMocks.ts +++ b/app/src/tests/fixtures/api/societyWideMocks.ts @@ -29,7 +29,8 @@ export const HTTP_STATUS = { } as const; export const ERROR_MESSAGES = { - CALCULATION_FAILED: (statusText: string) => `Society-wide calculation failed: ${statusText}`, + CALCULATION_FAILED: (status: number, statusText: string) => + `Society-wide calculation failed (${status}): ${statusText}`, TIMEOUT: 'Society-wide calculation timed out after 25 minutes, the max length for a Google Cloud society-wide simulation Workflow', NETWORK_ERROR: 'Network error', diff --git a/app/src/tests/fixtures/contexts/congressional-district/congressionalDistrictMocks.ts b/app/src/tests/fixtures/contexts/congressional-district/congressionalDistrictMocks.ts index f3099c093..8aac7aa50 100644 --- a/app/src/tests/fixtures/contexts/congressional-district/congressionalDistrictMocks.ts +++ b/app/src/tests/fixtures/contexts/congressional-district/congressionalDistrictMocks.ts @@ -260,6 +260,7 @@ export function createMockContextValue( isLoading: false, hasStarted: false, errorCount: 0, + erroredStates: new Set(), labelLookup: new Map(), isStateLevelReport: false, stateCode: null, diff --git a/app/src/tests/fixtures/pages/report-output/ReportOutputLayoutMocks.ts b/app/src/tests/fixtures/pages/report-output/ReportOutputLayoutMocks.ts index e9260b88e..f91da02e2 100644 --- a/app/src/tests/fixtures/pages/report-output/ReportOutputLayoutMocks.ts +++ b/app/src/tests/fixtures/pages/report-output/ReportOutputLayoutMocks.ts @@ -6,16 +6,3 @@ export const MOCK_REPORT_ID = 'test-report-123'; export const MOCK_REPORT_LABEL = 'Test Economic Impact Report'; export const MOCK_REPORT_YEAR = '2024'; export const MOCK_TIMESTAMP = 'Ran today at 05:23:41'; - -export const MOCK_TABS = [ - { value: 'overview', label: 'Overview' }, - { value: 'comparative-analysis', label: 'Comparative analysis' }, - { value: 'policy', label: 'Policy' }, - { value: 'population', label: 'Population' }, - { value: 'dynamics', label: 'Dynamics' }, -]; - -export const MOCK_TABS_WITH_CONSTITUENCY = [ - ...MOCK_TABS, - { value: 'constituency', label: 'Constituencies' }, -]; diff --git a/app/src/tests/fixtures/pages/reportOutputMocks.tsx b/app/src/tests/fixtures/pages/reportOutputMocks.tsx index 9f14a19ee..84e0e4ab0 100644 --- a/app/src/tests/fixtures/pages/reportOutputMocks.tsx +++ b/app/src/tests/fixtures/pages/reportOutputMocks.tsx @@ -60,38 +60,108 @@ export const mockHouseholdData = { }; /** - * Factory function for creating mock SocietyWideReportOutput with overrides - * Used by SocietyWideOverview tests + * Factory function for creating mock SocietyWideReportOutput with overrides. + * Deep-merges poverty and poverty.poverty so tests can override just `all` + * without losing `child`, `adult`, `senior` data. */ -export const createMockSocietyWideOutput = (overrides?: any) => ({ - budget: { - budgetary_impact: 1_000_000, - baseline_net_income: 5_000_000_000, - benefit_spending_impact: 500_000, - households: 10000, - state_tax_revenue_impact: 200_000, - tax_revenue_impact: 300_000, - }, - poverty: { - baseline: {}, - reform: {}, +export const createMockSocietyWideOutput = (overrides?: any) => { + const defaults = { + budget: { + budgetary_impact: 1_000_000, + baseline_net_income: 5_000_000_000, + benefit_spending_impact: 500_000, + households: 10000, + state_tax_revenue_impact: 200_000, + tax_revenue_impact: 300_000, + }, poverty: { - all: { baseline: 0.1, reform: 0.09 }, + baseline: {}, + reform: {}, + poverty: { + all: { baseline: 0.1, reform: 0.09 }, + child: { baseline: 0.15, reform: 0.13 }, + adult: { baseline: 0.08, reform: 0.07 }, + senior: { baseline: 0.09, reform: 0.085 }, + }, + deep_poverty: { + all: { baseline: 0.05, reform: 0.045 }, + child: { baseline: 0.07, reform: 0.06 }, + adult: { baseline: 0.04, reform: 0.035 }, + senior: { baseline: 0.03, reform: 0.028 }, + }, }, - }, - intra_decile: { - all: { - 'Gain more than 5%': 0.2, - 'Gain less than 5%': 0.1, - 'Lose more than 5%': 0.05, - 'Lose less than 5%': 0.05, - 'No change': 0.6, + inequality: { + gini: { baseline: 0.45, reform: 0.44 }, + top_10_pct_share: { baseline: 0.35, reform: 0.34 }, + top_1_pct_share: { baseline: 0.15, reform: 0.14 }, }, - }, - poverty_by_race: null, - data_version: '2024.1.0', - ...overrides, -}); + intra_decile: { + all: { + 'Gain more than 5%': 0.2, + 'Gain less than 5%': 0.1, + 'Lose more than 5%': 0.05, + 'Lose less than 5%': 0.05, + 'No change': 0.6, + }, + }, + decile: { + average: { + '1': -50, + '2': -30, + '3': -10, + '4': 5, + '5': 20, + '6': 35, + '7': 50, + '8': 70, + '9': 100, + '10': 150, + }, + relative: { + '1': -0.02, + '2': -0.01, + '3': -0.005, + '4': 0.002, + '5': 0.005, + '6': 0.008, + '7': 0.01, + '8': 0.012, + '9': 0.015, + '10': 0.02, + }, + }, + poverty_by_race: null, + data_version: '2024.1.0', + }; + + if (!overrides) { + return defaults; + } + + // Deep merge poverty to preserve child/adult/senior when only all is overridden + const mergedPoverty = overrides.poverty + ? { + ...defaults.poverty, + ...overrides.poverty, + poverty: { + ...defaults.poverty.poverty, + ...(overrides.poverty.poverty || {}), + }, + deep_poverty: { + ...defaults.poverty.deep_poverty, + ...(overrides.poverty.deep_poverty || {}), + }, + } + : defaults.poverty; + + const { poverty: _poverty, ...restOverrides } = overrides; + + return { + ...defaults, + ...restOverrides, + poverty: mergedPoverty, + }; +}; /** * Mock Report for SocietyWideReportOutput tests diff --git a/app/src/tests/fixtures/pathways/report/ReportPathwayWrapperMocks.ts b/app/src/tests/fixtures/pathways/report/ReportPathwayWrapperMocks.ts deleted file mode 100644 index 63a6f50e9..000000000 --- a/app/src/tests/fixtures/pathways/report/ReportPathwayWrapperMocks.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { vi } from 'vitest'; -import { ReportViewMode } from '@/types/pathwayModes/ReportViewMode'; - -// Test constants -export const TEST_COUNTRY_ID = 'us'; -export const TEST_INVALID_COUNTRY_ID = 'invalid'; -export const TEST_USER_ID = 'test-user-123'; -export const TEST_CURRENT_LAW_ID = 1; - -// Mock navigation -export const mockNavigate = vi.fn(); -export const mockOnComplete = vi.fn(); - -// Mock hook return values -export const mockUseParams = { - countryId: TEST_COUNTRY_ID, -}; - -export const mockUseParamsInvalid = { - countryId: TEST_INVALID_COUNTRY_ID, -}; - -export const mockUseParamsMissing = {}; - -export const mockMetadata = { - currentLawId: TEST_CURRENT_LAW_ID, - economyOptions: { - region: [], - }, -}; - -export const mockUseCreateReport = { - createReport: vi.fn(), - isPending: false, - isError: false, - error: null, -} as any; - -export const mockUseUserSimulations = { - data: [], - isLoading: false, - isError: false, - error: null, -} as any; - -export const mockUseUserPolicies = { - data: [], - isLoading: false, - isError: false, - error: null, -} as any; - -export const mockUseUserHouseholds = { - data: [], - isLoading: false, - isError: false, - error: null, -} as any; - -export const mockUseUserGeographics = { - data: [], - isLoading: false, - isError: false, - error: null, -} as any; - -// Helper to reset all mocks -export const resetAllMocks = () => { - mockNavigate.mockClear(); - mockOnComplete.mockClear(); - mockUseCreateReport.createReport.mockClear(); -}; - -// Expected view modes -export const REPORT_VIEW_MODES = { - LABEL: ReportViewMode.REPORT_LABEL, - SETUP: ReportViewMode.REPORT_SETUP, - SIMULATION_SELECTION: ReportViewMode.REPORT_SELECT_SIMULATION, - SIMULATION_EXISTING: ReportViewMode.REPORT_SELECT_EXISTING_SIMULATION, - SUBMIT: ReportViewMode.REPORT_SUBMIT, -} as const; - -/** - * Test constants for simulation indices - */ -export const SIMULATION_INDEX = { - BASELINE: 0 as const, - REFORM: 1 as const, -} as const; - -/** - * Mock user simulations data with existing simulations - */ -export const mockUserSimulationsWithData = { - data: [{ id: 'sim-1', label: 'Test Simulation' }], - isLoading: false, - isError: false, - error: null, -} as any; diff --git a/app/src/tests/fixtures/pathways/report/components/DefaultBaselineOptionMocks.ts b/app/src/tests/fixtures/pathways/report/components/DefaultBaselineOptionMocks.ts deleted file mode 100644 index 70774cacf..000000000 --- a/app/src/tests/fixtures/pathways/report/components/DefaultBaselineOptionMocks.ts +++ /dev/null @@ -1,146 +0,0 @@ -import { vi } from 'vitest'; - -// Test constants -export const TEST_COUNTRIES = { - US: 'us', - UK: 'uk', -} as const; - -export const TEST_USER_ID = 'test-user-123'; -export const TEST_CURRENT_LAW_ID = 1; -export const TEST_SIMULATION_ID = 'sim-123'; -export const TEST_EXISTING_SIMULATION_ID = 'existing-sim-456'; -export const TEST_GEOGRAPHY_ID = 'geo-789'; - -export const DEFAULT_BASELINE_LABELS = { - US: 'United States current law for all households nationwide', - UK: 'United Kingdom current law for all households nationwide', -} as const; - -// Mock existing simulation that matches default baseline criteria -export const mockExistingDefaultBaselineSimulation: any = { - userSimulation: { - id: 'user-sim-1', - userId: TEST_USER_ID, - simulationId: TEST_EXISTING_SIMULATION_ID, - label: DEFAULT_BASELINE_LABELS.US, - countryId: TEST_COUNTRIES.US, - createdAt: '2024-01-15T10:00:00Z', - }, - simulation: { - id: TEST_EXISTING_SIMULATION_ID, - policyId: TEST_CURRENT_LAW_ID.toString(), - populationType: 'geography', - populationId: TEST_COUNTRIES.US, - }, - geography: { - id: 'geo-1', - userId: TEST_USER_ID, - countryId: TEST_COUNTRIES.US, - geographyId: TEST_COUNTRIES.US, - scope: 'national', - label: 'US nationwide', - createdAt: '2024-01-15T10:00:00Z', - }, -}; - -// Mock simulation with different policy (not default baseline) -export const mockNonDefaultSimulation: any = { - userSimulation: { - id: 'user-sim-2', - userId: TEST_USER_ID, - simulationId: 'sim-different', - label: 'Custom reform', - countryId: TEST_COUNTRIES.US, - createdAt: '2024-01-15T11:00:00Z', - }, - simulation: { - id: 'sim-different', - policyId: '999', // Different policy - populationType: 'geography', - populationId: TEST_COUNTRIES.US, - }, - geography: { - id: 'geo-2', - userId: TEST_USER_ID, - countryId: TEST_COUNTRIES.US, - geographyId: TEST_COUNTRIES.US, - scope: 'national', - label: 'US nationwide', - createdAt: '2024-01-15T11:00:00Z', - }, -}; - -// Mock callbacks -export const mockOnSelect = vi.fn(); -export const mockOnClick = vi.fn(); - -// Mock API responses -export const mockGeographyCreationResponse = { - id: TEST_GEOGRAPHY_ID, - userId: TEST_USER_ID, - countryId: TEST_COUNTRIES.US, - geographyId: TEST_COUNTRIES.US, - scope: 'national' as const, - label: 'US nationwide', - createdAt: new Date().toISOString(), -}; - -export const mockSimulationCreationResponse = { - status: 'ok' as const, - result: { - simulation_id: TEST_SIMULATION_ID, - }, -}; - -// Helper to reset all mocks -export const resetAllMocks = () => { - mockOnSelect.mockClear(); - mockOnClick.mockClear(); -}; - -// Mock hook return values -export const mockUseUserSimulationsEmpty = { - data: [], - isLoading: false, - isError: false, - error: null, - associations: { simulations: [], policies: [], households: [] }, - getSimulationWithFullContext: vi.fn(), - getSimulationsByPolicy: vi.fn(() => []), - getSimulationsByHousehold: vi.fn(() => []), - getSimulationsByGeography: vi.fn(() => []), - getNormalizedHousehold: vi.fn(), - getPolicyLabel: vi.fn(), -} as any; - -export const mockUseUserSimulationsWithExisting = { - data: [mockExistingDefaultBaselineSimulation, mockNonDefaultSimulation], - isLoading: false, - isError: false, - error: null, - associations: { simulations: [], policies: [], households: [] }, - getSimulationWithFullContext: vi.fn(), - getSimulationsByPolicy: vi.fn(() => []), - getSimulationsByHousehold: vi.fn(() => []), - getSimulationsByGeography: vi.fn(() => []), - getNormalizedHousehold: vi.fn(), - getPolicyLabel: vi.fn(), -} as any; - -export const mockUseCreateGeographicAssociation = { - mutateAsync: vi.fn().mockResolvedValue(mockGeographyCreationResponse), - isPending: false, - isError: false, - error: null, - mutate: vi.fn(), - reset: vi.fn(), - status: 'idle' as const, -} as any; - -export const mockUseCreateSimulation = { - createSimulation: vi.fn(), - isPending: false, - isError: false, - error: null, -} as any; diff --git a/app/src/tests/fixtures/pathways/report/views/ReportViewMocks.ts b/app/src/tests/fixtures/pathways/report/views/ReportViewMocks.ts deleted file mode 100644 index 038f103a4..000000000 --- a/app/src/tests/fixtures/pathways/report/views/ReportViewMocks.ts +++ /dev/null @@ -1,165 +0,0 @@ -import { ReportStateProps, SimulationStateProps } from '@/types/pathwayState'; - -export const TEST_REPORT_LABEL = 'Test Report 2025'; -export const TEST_SIMULATION_LABEL = 'Test Simulation'; -export const TEST_COUNTRY_ID = 'us'; -export const TEST_CURRENT_LAW_ID = 1; - -export const mockOnUpdateLabel = vi.fn(); -export const mockOnUpdateYear = vi.fn(); -export const mockOnNext = vi.fn(); -export const mockOnBack = vi.fn(); -export const mockOnCancel = vi.fn(); -export const mockOnCreateNew = vi.fn(); -export const mockOnLoadExisting = vi.fn(); -export const mockOnSelectDefaultBaseline = vi.fn(); -export const mockOnNavigateToSimulationSelection = vi.fn(); -export const mockOnPrefillPopulation2 = vi.fn(); -export const mockOnSelectSimulation = vi.fn(); -export const mockOnSubmit = vi.fn(); - -export const mockSimulationState: SimulationStateProps = { - id: undefined, - label: null, - countryId: TEST_COUNTRY_ID, - policy: { - id: undefined, - label: null, - parameters: [], - }, - population: { - label: null, - type: null, - household: null, - geography: null, - }, - apiVersion: undefined, - status: 'pending', -}; - -export const mockConfiguredSimulation: SimulationStateProps = { - id: '123', - label: 'Baseline Simulation', - countryId: TEST_COUNTRY_ID, - policy: { - id: '456', - label: 'Current Law', - parameters: [], - }, - population: { - label: 'My Household', - type: 'household', - household: { - id: '789', - countryId: 'us', - householdData: { - people: {}, - }, - }, - geography: null, - }, - apiVersion: '0.1.0', - status: 'complete', -}; - -export const mockReportState: ReportStateProps = { - id: undefined, - label: null, - year: '2025', - countryId: TEST_COUNTRY_ID, - simulations: [mockSimulationState, mockSimulationState], - apiVersion: null, - status: 'pending', - outputType: undefined, - output: null, -}; - -export const mockReportStateWithConfiguredBaseline: ReportStateProps = { - ...mockReportState, - simulations: [mockConfiguredSimulation, mockSimulationState], -}; - -export const mockReportStateWithBothConfigured: ReportStateProps = { - ...mockReportState, - simulations: [ - mockConfiguredSimulation, - { ...mockConfiguredSimulation, id: '124', label: 'Reform Simulation' }, - ], -}; - -export const mockUseCurrentCountry = vi.fn(() => TEST_COUNTRY_ID); - -export const mockUseUserSimulationsEmpty = { - data: [], - isLoading: false, - isError: false, - error: null, -}; - -export const mockEnhancedUserSimulation = { - userSimulation: { id: 1, label: 'My Simulation', simulation_id: '123', user_id: 1 }, - simulation: { - id: '123', - label: 'Test Simulation', - policyId: '456', - populationId: '789', - countryId: TEST_COUNTRY_ID, - }, - userPolicy: { id: 1, label: 'Test Policy', policy_id: '456', user_id: 1 }, - policy: { id: '456', label: 'Current Law', countryId: TEST_COUNTRY_ID }, - userHousehold: { id: 1, label: 'Test Household', household_id: '789', user_id: 1 }, - household: { id: '789', label: 'My Household', people: {} }, - geography: null, -}; - -export const mockUseUserSimulationsWithData = { - data: [mockEnhancedUserSimulation], - isLoading: false, - isError: false, - error: null, -}; - -export const mockUseUserSimulationsLoading = { - data: undefined, - isLoading: true, - isError: false, - error: null, -}; - -export const mockUseUserSimulationsError = { - data: undefined, - isLoading: false, - isError: true, - error: new Error('Failed to load simulations'), -}; - -export const mockUseUserHouseholdsEmpty = { - data: [], - isLoading: false, - isError: false, - error: null, - associations: [], -}; - -export const mockUseUserGeographicsEmpty = { - data: [], - isLoading: false, - isError: false, - error: null, - associations: [], -}; - -export function resetAllMocks() { - mockOnUpdateLabel.mockClear(); - mockOnUpdateYear.mockClear(); - mockOnNext.mockClear(); - mockOnBack.mockClear(); - mockOnCancel.mockClear(); - mockOnCreateNew.mockClear(); - mockOnLoadExisting.mockClear(); - mockOnSelectDefaultBaseline.mockClear(); - mockOnNavigateToSimulationSelection.mockClear(); - mockOnPrefillPopulation2.mockClear(); - mockOnSelectSimulation.mockClear(); - mockOnSubmit.mockClear(); -} diff --git a/app/src/tests/unit/api/societyWideCalculation.test.ts b/app/src/tests/unit/api/societyWideCalculation.test.ts index 3506f292e..d35b5a108 100644 --- a/app/src/tests/unit/api/societyWideCalculation.test.ts +++ b/app/src/tests/unit/api/societyWideCalculation.test.ts @@ -166,7 +166,7 @@ describe('societyWide API', () => { const params = { region: 'us', time_period: CURRENT_YEAR }; await expect( fetchSocietyWideCalculation(countryId, reformPolicyId, baselinePolicyId, params) - ).rejects.toThrow(ERROR_MESSAGES.CALCULATION_FAILED('Not Found')); + ).rejects.toThrow(ERROR_MESSAGES.CALCULATION_FAILED(HTTP_STATUS.NOT_FOUND, 'Not Found')); }); test('given server error then throws generic error message', async () => { @@ -181,7 +181,9 @@ describe('societyWide API', () => { const params = { region: 'us', time_period: CURRENT_YEAR }; await expect( fetchSocietyWideCalculation(countryId, reformPolicyId, baselinePolicyId, params) - ).rejects.toThrow(ERROR_MESSAGES.CALCULATION_FAILED('Error')); + ).rejects.toThrow( + ERROR_MESSAGES.CALCULATION_FAILED(HTTP_STATUS.INTERNAL_SERVER_ERROR, 'Error') + ); }); test('given network error then propagates error', async () => { diff --git a/app/src/tests/unit/components/IngredientReadView.test.tsx b/app/src/tests/unit/components/IngredientReadView.test.tsx index 4e7e33418..b0b260a28 100644 --- a/app/src/tests/unit/components/IngredientReadView.test.tsx +++ b/app/src/tests/unit/components/IngredientReadView.test.tsx @@ -125,48 +125,4 @@ describe('IngredientReadView', () => { // Then expect(onBuild).toHaveBeenCalled(); }); - - test('given selection enabled then displays checkboxes', () => { - // When - render( - - ); - - // Then - const checkboxes = screen.getAllByRole('checkbox'); - expect(checkboxes).toHaveLength(2); // One for each record - }); - - test('given user clicks checkbox then selection callback is invoked', async () => { - // Given - const user = userEvent.setup(); - const onSelectionChange = vi.fn(); - - // When - render( - - ); - const checkboxes = screen.getAllByRole('checkbox'); - await user.click(checkboxes[0]); - - // Then - expect(onSelectionChange).toHaveBeenCalledWith('1', true); - }); }); diff --git a/app/src/tests/unit/components/report/ReportActionButtons.test.tsx b/app/src/tests/unit/components/report/ReportActionButtons.test.tsx index bf24b00e0..93e54f072 100644 --- a/app/src/tests/unit/components/report/ReportActionButtons.test.tsx +++ b/app/src/tests/unit/components/report/ReportActionButtons.test.tsx @@ -9,17 +9,25 @@ describe('ReportActionButtons', () => { // Then expect(screen.getByRole('button', { name: /save report to my reports/i })).toBeInTheDocument(); - expect(screen.queryByRole('button', { name: /share report/i })).not.toBeInTheDocument(); - expect(screen.queryByRole('button', { name: /edit report name/i })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /share/i })).not.toBeInTheDocument(); + expect(screen.queryByRole('button', { name: /view/i })).not.toBeInTheDocument(); }); - test('given isSharedView=false then renders share and edit buttons', () => { + test('given isSharedView=false then renders reproduce, view, and share buttons', () => { // Given - render(); + render( + + ); // Then - expect(screen.getByRole('button', { name: /share report/i })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: /edit report name/i })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /reproduce in python/i })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /share/i })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /view/i })).toBeInTheDocument(); expect(screen.queryByRole('button', { name: /save report/i })).not.toBeInTheDocument(); }); @@ -43,22 +51,35 @@ describe('ReportActionButtons', () => { render(); // When - await user.click(screen.getByRole('button', { name: /share report/i })); + await user.click(screen.getByRole('button', { name: /share/i })); // Then expect(handleShare).toHaveBeenCalledOnce(); }); - test('given onEdit callback then calls it when edit clicked', async () => { + test('given onReproduce callback then calls it when reproduce clicked', async () => { // Given const user = userEvent.setup(); - const handleEdit = vi.fn(); - render(); + const handleReproduce = vi.fn(); + render(); // When - await user.click(screen.getByRole('button', { name: /edit report name/i })); + await user.click(screen.getByRole('button', { name: /reproduce in python/i })); // Then - expect(handleEdit).toHaveBeenCalledOnce(); + expect(handleReproduce).toHaveBeenCalledOnce(); + }); + + test('given onView callback then calls it when view clicked', async () => { + // Given + const user = userEvent.setup(); + const handleView = vi.fn(); + render(); + + // When + await user.click(screen.getByRole('button', { name: /view/i })); + + // Then + expect(handleView).toHaveBeenCalledOnce(); }); }); diff --git a/app/src/tests/unit/components/ui/Group.test.tsx b/app/src/tests/unit/components/ui/Group.test.tsx index c8e5e97da..40c54674a 100644 --- a/app/src/tests/unit/components/ui/Group.test.tsx +++ b/app/src/tests/unit/components/ui/Group.test.tsx @@ -111,7 +111,7 @@ describe('Group', () => { content ); - expect(screen.getByTestId('group').className).toContain('[&>*]:tw:flex-1'); + expect(screen.getByTestId('group').className).toContain('tw:[&>*]:flex-1'); }); it('forwards ref', () => { diff --git a/app/src/tests/unit/pages/Policies.page.test.tsx b/app/src/tests/unit/pages/Policies.page.test.tsx index f0d70507d..67b33f523 100644 --- a/app/src/tests/unit/pages/Policies.page.test.tsx +++ b/app/src/tests/unit/pages/Policies.page.test.tsx @@ -1,12 +1,9 @@ -import { render, screen, userEvent, waitFor } from '@test-utils'; +import { render, screen, userEvent } from '@test-utils'; import { beforeEach, describe, expect, test, vi } from 'vitest'; import { MOCK_USER_ID } from '@/constants'; -import { useUpdatePolicyAssociation, useUserPolicies } from '@/hooks/useUserPolicy'; +import { useUserPolicies } from '@/hooks/useUserPolicy'; import PoliciesPage from '@/pages/Policies.page'; import { - createMockUpdateAssociationFailure, - createMockUpdateAssociationPending, - createMockUpdateAssociationSuccess, ERROR_MESSAGES, mockDefaultHookReturn, mockEmptyHookReturn, @@ -21,6 +18,10 @@ vi.mock('@/hooks/useUserPolicy', () => ({ mutateAsync: vi.fn(), isPending: false, })), + useCreatePolicyAssociation: vi.fn(() => ({ + mutateAsync: vi.fn(), + isPending: false, + })), })); // Mock useCurrentCountry @@ -54,8 +55,8 @@ vi.mock('@/components/IngredientReadView', () => ({ onSearchChange, columns, }: any) => { - const menuColumn = columns?.find((col: any) => col.type === 'menu'); - const handleMenuAction = menuColumn?.onAction; + const actionsColumn = columns?.find((col: any) => col.type === 'actions'); + const handleAction = actionsColumn?.onAction; return (
@@ -70,13 +71,13 @@ vi.mock('@/components/IngredientReadView', () => ({ <>
{(data[0].policyName as any).text}
{(data[0].provisions as any).text}
- {handleMenuAction && ( + {handleAction && ( )} @@ -97,39 +98,20 @@ vi.mock('@/components/IngredientReadView', () => ({ ), })); +// Mock PolicyCreationModal component +vi.mock('@/pages/reportBuilder/modals/PolicyCreationModal', () => ({ + PolicyCreationModal: vi.fn(() => null), +})); + // Mock RenameIngredientModal component vi.mock('@/components/common/RenameIngredientModal', () => ({ - RenameIngredientModal: vi.fn((props: any) => { - if (!props.opened) { - return null; - } - return ( -
- {props.currentLabel} - {props.isLoading ? 'true' : 'false'} - {props.submissionError && ( - {props.submissionError} - )} - - -
- ); - }), + RenameIngredientModal: vi.fn(() => null), })); describe('PoliciesPage', () => { beforeEach(() => { vi.clearAllMocks(); (useUserPolicies as any).mockReturnValue(mockDefaultHookReturn); - (useUpdatePolicyAssociation as any).mockReturnValue(createMockUpdateAssociationSuccess()); }); test('given policies data when rendering then displays policies page', () => { @@ -272,123 +254,18 @@ describe('PoliciesPage', () => { expect(screen.getByTestId('parameter-changes')).toBeInTheDocument(); }); - describe('rename functionality', () => { - test('given user clicks rename then modal opens with current label', async () => { - // Given - const user = userEvent.setup(); - render(); - - // When - await user.click(screen.getByTestId('rename-policy-button')); - - // Then - expect(screen.getByTestId('rename-modal')).toBeInTheDocument(); - expect(screen.getByTestId('modal-current-label')).toHaveTextContent('Test Policy 1'); - }); - - test('given rename succeeds then modal closes', async () => { - // Given - const user = userEvent.setup(); - const mockMutation = createMockUpdateAssociationSuccess(); - (useUpdatePolicyAssociation as any).mockReturnValue(mockMutation); - render(); - - // When - await user.click(screen.getByTestId('rename-policy-button')); - await user.click(screen.getByTestId('modal-rename-button')); - - // Then - await waitFor(() => { - expect(mockMutation.mutateAsync).toHaveBeenCalledWith({ - userPolicyId: 'assoc-1', - updates: { label: 'New Policy Name' }, - }); - }); - }); - - test('given rename fails then error is displayed in modal', async () => { - // Given - const user = userEvent.setup(); - const mockMutation = createMockUpdateAssociationFailure(); - (useUpdatePolicyAssociation as any).mockReturnValue(mockMutation); - render(); - - // When - await user.click(screen.getByTestId('rename-policy-button')); - await user.click(screen.getByTestId('modal-rename-button')); - - // Then - await waitFor(() => { - expect(screen.getByTestId('modal-submission-error')).toHaveTextContent( - ERROR_MESSAGES.RENAME_FAILED - ); - }); - }); - - test('given rename fails then error is logged to console', async () => { - // Given - const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); - const user = userEvent.setup(); - const mockMutation = createMockUpdateAssociationFailure(); - (useUpdatePolicyAssociation as any).mockReturnValue(mockMutation); - render(); - - // When - await user.click(screen.getByTestId('rename-policy-button')); - await user.click(screen.getByTestId('modal-rename-button')); - - // Then - await waitFor(() => { - expect(consoleErrorSpy).toHaveBeenCalledWith( - expect.stringContaining('[PoliciesPage]'), - expect.any(Error) - ); - }); - - consoleErrorSpy.mockRestore(); - }); - - test('given modal is closed then error is cleared', async () => { - // Given - const user = userEvent.setup(); - const mockMutation = createMockUpdateAssociationFailure(); - (useUpdatePolicyAssociation as any).mockReturnValue(mockMutation); - render(); - - // Open modal and trigger error - await user.click(screen.getByTestId('rename-policy-button')); - await user.click(screen.getByTestId('modal-rename-button')); - await waitFor(() => { - expect(screen.getByTestId('modal-submission-error')).toBeInTheDocument(); - }); - - // When - close the modal - await user.click(screen.getByTestId('modal-close-button')); - - // Then - modal should be closed - await waitFor(() => { - expect(screen.queryByTestId('rename-modal')).not.toBeInTheDocument(); - }); - - // When - reopen the modal - await user.click(screen.getByTestId('rename-policy-button')); - - // Then - error should be cleared - expect(screen.queryByTestId('modal-submission-error')).not.toBeInTheDocument(); - }); - - test('given rename is pending then modal shows loading state', async () => { - // Given - const user = userEvent.setup(); - const mockMutation = createMockUpdateAssociationPending(); - (useUpdatePolicyAssociation as any).mockReturnValue(mockMutation); - render(); - - // When - await user.click(screen.getByTestId('rename-policy-button')); - - // Then - expect(screen.getByTestId('modal-loading')).toHaveTextContent('true'); - }); + test('given user clicks edit action then opens policy editor', async () => { + // Given + const user = userEvent.setup(); + render(); + + // When + const editButton = screen.queryByTestId('edit-policy-button'); + if (editButton) { + await user.click(editButton); + } + + // Then - the edit action column should render + expect(screen.getByTestId('edit-policy-button')).toBeInTheDocument(); }); }); diff --git a/app/src/tests/unit/pages/Populations.page.test.tsx b/app/src/tests/unit/pages/Populations.page.test.tsx index febe02140..94f674488 100644 --- a/app/src/tests/unit/pages/Populations.page.test.tsx +++ b/app/src/tests/unit/pages/Populations.page.test.tsx @@ -311,7 +311,7 @@ describe('PopulationsPage', () => { renderPage(); // When - Find and click a checkbox (assuming the IngredientReadView renders checkboxes) - const checkboxes = screen.getAllByRole('checkbox'); + const checkboxes = screen.queryAllByRole('checkbox'); if (checkboxes.length > 0) { await user.click(checkboxes[0]); diff --git a/app/src/tests/unit/pages/ReportOutput.page.test.tsx b/app/src/tests/unit/pages/ReportOutput.page.test.tsx index f54516019..ede7a7696 100644 --- a/app/src/tests/unit/pages/ReportOutput.page.test.tsx +++ b/app/src/tests/unit/pages/ReportOutput.page.test.tsx @@ -132,19 +132,16 @@ describe('ReportOutputPage', () => { expect(screen.getByRole('heading', { name: 'Test Report' })).toBeInTheDocument(); }); - test('given society-wide report then overview tabs are shown', () => { + test('given society-wide report with complete calculation then renders without error', () => { // Given render(); - // Then - expect(screen.getByText('Overview')).toBeInTheDocument(); - expect(screen.getByText('Comparative analysis')).toBeInTheDocument(); - expect(screen.getByText('Policy')).toBeInTheDocument(); - expect(screen.getByText('Population')).toBeInTheDocument(); - expect(screen.getByText('Dynamics')).toBeInTheDocument(); + // Then - page renders layout and delegates to society-wide output + expect(screen.queryByText('Loading report...')).not.toBeInTheDocument(); + expect(screen.queryByText(/Error loading report/)).not.toBeInTheDocument(); }); - test('given UK national report then constituency and local authority tabs are shown', () => { + test('given UK national report then renders without error', () => { // Given vi.mocked(useUserReportById).mockReturnValue({ userReport: MOCK_USER_REPORT_UK, @@ -164,12 +161,12 @@ describe('ReportOutputPage', () => { // When render(); - // Then - expect(screen.getByText('Constituencies')).toBeInTheDocument(); - expect(screen.getByText('Local authorities')).toBeInTheDocument(); + // Then - page renders layout and delegates to society-wide output + expect(screen.queryByText('Loading report...')).not.toBeInTheDocument(); + expect(screen.queryByText(/Error loading report/)).not.toBeInTheDocument(); }); - test('given UK country-level report (e.g., England) then constituency and local authority tabs are shown', () => { + test('given UK country-level report (e.g., England) then renders without error', () => { // Given vi.mocked(useUserReportById).mockReturnValue({ userReport: MOCK_USER_REPORT_UK, @@ -189,12 +186,12 @@ describe('ReportOutputPage', () => { // When render(); - // Then - Country-level reports should still show the maps - expect(screen.getByText('Constituencies')).toBeInTheDocument(); - expect(screen.getByText('Local authorities')).toBeInTheDocument(); + // Then - page renders layout and delegates to society-wide output + expect(screen.queryByText('Loading report...')).not.toBeInTheDocument(); + expect(screen.queryByText(/Error loading report/)).not.toBeInTheDocument(); }); - test('given UK subnational constituency report then constituency and local authority tabs are hidden', () => { + test('given UK subnational constituency report then constituency and local authority content is not shown', () => { // Given vi.mocked(useUserReportById).mockReturnValue({ userReport: MOCK_USER_REPORT_UK, @@ -214,14 +211,7 @@ describe('ReportOutputPage', () => { // When render(); - // Then - Standard tabs should still be visible - expect(screen.getByText('Overview')).toBeInTheDocument(); - expect(screen.getByText('Comparative analysis')).toBeInTheDocument(); - expect(screen.getByText('Policy')).toBeInTheDocument(); - expect(screen.getByText('Population')).toBeInTheDocument(); - expect(screen.getByText('Dynamics')).toBeInTheDocument(); - - // But constituency and local authority tabs should not be shown + // Then - constituency and local authority content should not be shown expect(screen.queryByText('Constituencies')).not.toBeInTheDocument(); expect(screen.queryByText('Local authorities')).not.toBeInTheDocument(); }); diff --git a/app/src/tests/unit/pages/report-output/ReportOutputLayout.test.tsx b/app/src/tests/unit/pages/report-output/ReportOutputLayout.test.tsx index 458c2c2b1..a423b2f66 100644 --- a/app/src/tests/unit/pages/report-output/ReportOutputLayout.test.tsx +++ b/app/src/tests/unit/pages/report-output/ReportOutputLayout.test.tsx @@ -5,7 +5,6 @@ import { MOCK_REPORT_ID, MOCK_REPORT_LABEL, MOCK_REPORT_YEAR, - MOCK_TABS, MOCK_TIMESTAMP, } from '@/tests/fixtures/pages/report-output/ReportOutputLayoutMocks'; @@ -26,9 +25,6 @@ describe('ReportOutputLayout', () => { reportLabel={MOCK_REPORT_LABEL} reportYear={MOCK_REPORT_YEAR} timestamp={MOCK_TIMESTAMP} - tabs={MOCK_TABS} - activeTab="overview" - onTabChange={vi.fn()} >
Test Content
@@ -45,9 +41,6 @@ describe('ReportOutputLayout', () => { reportId={MOCK_REPORT_ID} reportLabel={MOCK_REPORT_LABEL} timestamp={MOCK_TIMESTAMP} - tabs={MOCK_TABS} - activeTab="overview" - onTabChange={vi.fn()} >
Test Content
@@ -65,9 +58,6 @@ describe('ReportOutputLayout', () => { reportLabel={MOCK_REPORT_LABEL} reportYear={MOCK_REPORT_YEAR} timestamp={MOCK_TIMESTAMP} - tabs={MOCK_TABS} - activeTab="overview" - onTabChange={vi.fn()} >
Test Content
@@ -86,9 +76,6 @@ describe('ReportOutputLayout', () => { reportLabel={MOCK_REPORT_LABEL} reportYear={MOCK_REPORT_YEAR} timestamp={MOCK_TIMESTAMP} - tabs={MOCK_TABS} - activeTab="overview" - onTabChange={vi.fn()} >
Test Content
@@ -105,9 +92,6 @@ describe('ReportOutputLayout', () => { reportId={MOCK_REPORT_ID} reportYear={MOCK_REPORT_YEAR} timestamp={MOCK_TIMESTAMP} - tabs={MOCK_TABS} - activeTab="overview" - onTabChange={vi.fn()} >
Test Content
@@ -125,9 +109,6 @@ describe('ReportOutputLayout', () => { reportLabel={MOCK_REPORT_LABEL} reportYear={MOCK_REPORT_YEAR} timestamp={MOCK_TIMESTAMP} - tabs={MOCK_TABS} - activeTab="overview" - onTabChange={vi.fn()} >
Test Content
@@ -137,50 +118,6 @@ describe('ReportOutputLayout', () => { expect(screen.getByText(MOCK_TIMESTAMP)).toBeInTheDocument(); }); - test('given tabs then all tabs are rendered', () => { - // Given - render( - -
Test Content
- - ); - - // Then - MOCK_TABS.forEach((tab) => { - expect(screen.getByText(tab.label)).toBeInTheDocument(); - }); - }); - - test('given active tab then tab is highlighted', () => { - // Given - const activeTab = 'comparative-analysis'; - render( - -
Test Content
- - ); - - // Then - const activeTabElement = screen.getByText('Comparative analysis'); - expect(activeTabElement).toBeInTheDocument(); - }); - test('given children then children are rendered', () => { // Given const testContent = 'Test Child Content'; @@ -190,9 +127,6 @@ describe('ReportOutputLayout', () => { reportLabel={MOCK_REPORT_LABEL} reportYear={MOCK_REPORT_YEAR} timestamp={MOCK_TIMESTAMP} - tabs={MOCK_TABS} - activeTab="overview" - onTabChange={vi.fn()} >
{testContent}
@@ -210,9 +144,6 @@ describe('ReportOutputLayout', () => { reportLabel={MOCK_REPORT_LABEL} reportYear={MOCK_REPORT_YEAR} timestamp={MOCK_TIMESTAMP} - tabs={MOCK_TABS} - activeTab="overview" - onTabChange={vi.fn()} isSharedView onSave={vi.fn()} > @@ -225,7 +156,7 @@ describe('ReportOutputLayout', () => { expect(screen.getByRole('button', { name: /save report to my reports/i })).toBeInTheDocument(); }); - test('given isSharedView=false then shows share and edit buttons', () => { + test('given isSharedView=false then shows view, edit, and share buttons', () => { // Given render( { reportLabel={MOCK_REPORT_LABEL} reportYear={MOCK_REPORT_YEAR} timestamp={MOCK_TIMESTAMP} - tabs={MOCK_TABS} - activeTab="overview" - onTabChange={vi.fn()} isSharedView={false} onShare={vi.fn()} - onEditName={vi.fn()} + onView={vi.fn()} + onReproduce={vi.fn()} >
Content
 @@ -246,7 +175,8 @@ describe('ReportOutputLayout', () => { // Then expect(screen.queryByTestId('shared-report-tag')).not.toBeInTheDocument(); - expect(screen.getByRole('button', { name: /share report/i })).toBeInTheDocument(); - expect(screen.getByRole('button', { name: /edit report name/i })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /reproduce in python/i })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /share/i })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: /view/i })).toBeInTheDocument(); }); }); diff --git a/app/src/tests/unit/pages/report-output/SocietyWideOverview.test.tsx b/app/src/tests/unit/pages/report-output/SocietyWideOverview.test.tsx index 90626b885..f0244451c 100644 --- a/app/src/tests/unit/pages/report-output/SocietyWideOverview.test.tsx +++ b/app/src/tests/unit/pages/report-output/SocietyWideOverview.test.tsx @@ -41,7 +41,7 @@ describe('SocietyWideOverview', () => { const { container } = render(); // Then - expect(screen.getByText('Budgetary Impact')).toBeInTheDocument(); + expect(screen.getByText('Budgetary impact')).toBeInTheDocument(); expect(container.textContent).toContain('$1.0'); expect(container.textContent).toContain('million'); expect(container.textContent).toContain('additional government revenue'); @@ -88,7 +88,7 @@ describe('SocietyWideOverview', () => { const { container } = render(); // Then - expect(screen.getByText('Poverty Impact')).toBeInTheDocument(); + expect(screen.getByText('Poverty impact')).toBeInTheDocument(); expect(container.textContent).toContain('10.0%'); expect(container.textContent).toContain('decrease in poverty rate'); }); @@ -143,7 +143,7 @@ describe('SocietyWideOverview', () => { const { container } = render(); // Then - component should handle division by zero gracefully - expect(container.textContent).toContain('Poverty Impact'); + expect(container.textContent).toContain('Poverty impact'); }); }); @@ -225,8 +225,8 @@ describe('SocietyWideOverview', () => { render(); // Then - expect(screen.getByText('Budgetary Impact')).toBeInTheDocument(); - expect(screen.getByText('Poverty Impact')).toBeInTheDocument(); + expect(screen.getByText('Budgetary impact')).toBeInTheDocument(); + expect(screen.getByText('Poverty impact')).toBeInTheDocument(); expect(screen.getByText('Winners and losers')).toBeInTheDocument(); }); }); diff --git a/app/src/tests/unit/pages/report-output/SocietyWideReportOutput.test.tsx b/app/src/tests/unit/pages/report-output/SocietyWideReportOutput.test.tsx index 614ded309..90c5d3b66 100644 --- a/app/src/tests/unit/pages/report-output/SocietyWideReportOutput.test.tsx +++ b/app/src/tests/unit/pages/report-output/SocietyWideReportOutput.test.tsx @@ -44,6 +44,10 @@ vi.mock('@/pages/report-output/OverviewSubPage', () => ({ default: vi.fn(() =>
Cost
), })); +vi.mock('@/pages/report-output/MigrationSubPage', () => ({ + default: vi.fn(() =>
Migration
), +})); + vi.mock('@/pages/report-output/PolicySubPage', () => ({ default: vi.fn(() =>
Policy
), })); @@ -144,7 +148,7 @@ describe('SocietyWideReportOutput', () => { expect(screen.getByText('Calculation failed')).toBeInTheDocument(); }); - test('given calculation complete then shows overview with output', () => { + test('given calculation complete then shows migration subpage with output', () => { // Given mockUseCalculationStatus.mockReturnValue(MOCK_CALC_STATUS_COMPLETE); @@ -152,7 +156,7 @@ describe('SocietyWideReportOutput', () => { render( { ); // Then - expect(screen.getByTestId('overview-page')).toBeInTheDocument(); - expect(screen.getByText('Cost')).toBeInTheDocument(); + expect(screen.getByTestId('migration-page')).toBeInTheDocument(); }); test('given no output yet then shows not found message', () => { diff --git a/app/src/tests/unit/pathways/report/ReportPathwayWrapper.test.tsx b/app/src/tests/unit/pathways/report/ReportPathwayWrapper.test.tsx deleted file mode 100644 index a4c1f7343..000000000 --- a/app/src/tests/unit/pathways/report/ReportPathwayWrapper.test.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import { render, screen } from '@test-utils'; -import { useParams } from 'react-router-dom'; -import { beforeEach, describe, expect, test, vi } from 'vitest'; -import { useCreateReport } from '@/hooks/useCreateReport'; -import { useUserGeographics } from '@/hooks/useUserGeographic'; -import { useUserHouseholds } from '@/hooks/useUserHousehold'; -import { useUserPolicies } from '@/hooks/useUserPolicy'; -import { useUserSimulations } from '@/hooks/useUserSimulations'; -import ReportPathwayWrapper from '@/pathways/report/ReportPathwayWrapper'; -import { - mockMetadata, - mockNavigate, - mockOnComplete, - mockUseCreateReport, - mockUseParams, - mockUseParamsInvalid, - mockUseParamsMissing, - mockUseUserGeographics, - mockUseUserHouseholds, - mockUseUserPolicies, - mockUseUserSimulations, - resetAllMocks, -} from '@/tests/fixtures/pathways/report/ReportPathwayWrapperMocks'; - -// Mock all dependencies -vi.mock('react-router-dom', async () => { - const actual = await vi.importActual('react-router-dom'); - return { - ...actual, - useNavigate: () => mockNavigate, - useParams: vi.fn(), - }; -}); - -vi.mock('react-redux', async () => { - const actual = await vi.importActual('react-redux'); - return { - ...actual, - useSelector: vi.fn((selector) => { - if (selector.toString().includes('currentLawId')) { - return mockMetadata.currentLawId; - } - return mockMetadata; - }), - }; -}); - -vi.mock('@/hooks/useUserSimulations', () => ({ - useUserSimulations: vi.fn(), -})); - -vi.mock('@/hooks/useUserPolicy', () => ({ - useUserPolicies: vi.fn(), -})); - -vi.mock('@/hooks/useUserHousehold', () => ({ - useUserHouseholds: vi.fn(), -})); - -vi.mock('@/hooks/useUserGeographic', () => ({ - useUserGeographics: vi.fn(), -})); - -vi.mock('@/hooks/useCreateReport', () => ({ - useCreateReport: vi.fn(), -})); - -vi.mock('@/hooks/usePathwayNavigation', () => ({ - usePathwayNavigation: vi.fn(() => ({ - mode: 'LABEL', - navigateToMode: vi.fn(), - goBack: vi.fn(), - getBackMode: vi.fn(), - })), -})); - -describe('ReportPathwayWrapper', () => { - beforeEach(() => { - resetAllMocks(); - vi.clearAllMocks(); - - // Default mock implementations - vi.mocked(useParams).mockReturnValue(mockUseParams); - vi.mocked(useUserSimulations).mockReturnValue(mockUseUserSimulations); - vi.mocked(useUserPolicies).mockReturnValue(mockUseUserPolicies); - vi.mocked(useUserHouseholds).mockReturnValue(mockUseUserHouseholds); - vi.mocked(useUserGeographics).mockReturnValue(mockUseUserGeographics); - vi.mocked(useCreateReport).mockReturnValue(mockUseCreateReport); - }); - - describe('Error handling', () => { - test('given missing countryId param then shows error message', () => { - // Given - vi.mocked(useParams).mockReturnValue(mockUseParamsMissing); - - // When - render(); - - // Then - expect(screen.getByText(/Country ID not found/i)).toBeInTheDocument(); - }); - - test('given invalid countryId then shows error message', () => { - // Given - vi.mocked(useParams).mockReturnValue(mockUseParamsInvalid); - - // When - render(); - - // Then - expect(screen.getByText(/Invalid country ID/i)).toBeInTheDocument(); - }); - }); - - describe('Basic rendering', () => { - test('given valid countryId then renders without error', () => { - // When - const { container } = render(); - - // Then - Should render something (not just error message) - expect(container).toBeInTheDocument(); - expect(screen.queryByText(/Country ID not found/i)).not.toBeInTheDocument(); - expect(screen.queryByText(/Invalid country ID/i)).not.toBeInTheDocument(); - }); - - test('given wrapper renders then initializes with hooks', () => { - // When - render(); - - // Then - Hooks should have been called (useUserPolicies is used in child components, not wrapper) - expect(useUserSimulations).toHaveBeenCalled(); - expect(useUserHouseholds).toHaveBeenCalled(); - expect(useUserGeographics).toHaveBeenCalled(); - expect(useCreateReport).toHaveBeenCalled(); - }); - }); - - describe('Props handling', () => { - test('given onComplete callback then accepts prop', () => { - // When - const { container } = render(); - - // Then - Component renders with callback - expect(container).toBeInTheDocument(); - }); - - test('given no onComplete callback then renders without error', () => { - // When - const { container } = render(); - - // Then - expect(container).toBeInTheDocument(); - }); - }); - - describe('State initialization', () => { - test('given wrapper renders then initializes report state with country', () => { - // When - render(); - - // Then - No errors, component initialized successfully - expect(screen.queryByText(/error/i)).not.toBeInTheDocument(); - }); - }); -}); diff --git a/app/src/tests/unit/pathways/report/ReportSimulationSelectionLogic.test.tsx b/app/src/tests/unit/pathways/report/ReportSimulationSelectionLogic.test.tsx deleted file mode 100644 index 5d29ebfa6..000000000 --- a/app/src/tests/unit/pathways/report/ReportSimulationSelectionLogic.test.tsx +++ /dev/null @@ -1,82 +0,0 @@ -/** - * Tests for Report pathway simulation selection logic - * - * Tests the fix for the issue where automated simulation setup wasn't working. - * The baseline simulation selection view should always be shown, even when there are - * no existing simulations, because it contains the DefaultBaselineOption component - * for quick setup with "Current law + Nationwide population". - * - * KEY BEHAVIOR: - * - Baseline simulation (index 0): ALWAYS show selection view (even with no existing simulations) - * - Reform simulation (index 1): Skip selection when no existing simulations - */ - -import { describe, expect, test } from 'vitest'; -import { SIMULATION_INDEX } from '@/tests/fixtures/pathways/report/ReportPathwayWrapperMocks'; - -/** - * Helper function that implements the logic from ReportPathwayWrapper.tsx - * for determining whether to show the simulation selection view - */ -function shouldShowSimulationSelectionView( - simulationIndex: 0 | 1, - hasExistingSimulations: boolean -): boolean { - // Always show selection view for baseline (index 0) because it has DefaultBaselineOption - // For reform (index 1), skip if no existing simulations - return simulationIndex === 0 || hasExistingSimulations; -} - -describe('Report pathway simulation selection logic', () => { - describe('Baseline simulation (index 0)', () => { - test('given no existing simulations then should show selection view', () => { - // Given - const simulationIndex = SIMULATION_INDEX.BASELINE; - const hasExistingSimulations = false; - - // When - const result = shouldShowSimulationSelectionView(simulationIndex, hasExistingSimulations); - - // Then - expect(result).toBe(true); - }); - - test('given existing simulations then should show selection view', () => { - // Given - const simulationIndex = SIMULATION_INDEX.BASELINE; - const hasExistingSimulations = true; - - // When - const result = shouldShowSimulationSelectionView(simulationIndex, hasExistingSimulations); - - // Then - expect(result).toBe(true); - }); - }); - - describe('Reform simulation (index 1)', () => { - test('given no existing simulations then should skip selection view', () => { - // Given - const simulationIndex = SIMULATION_INDEX.REFORM; - const hasExistingSimulations = false; - - // When - const result = shouldShowSimulationSelectionView(simulationIndex, hasExistingSimulations); - - // Then - expect(result).toBe(false); - }); - - test('given existing simulations then should show selection view', () => { - // Given - const simulationIndex = SIMULATION_INDEX.REFORM; - const hasExistingSimulations = true; - - // When - const result = shouldShowSimulationSelectionView(simulationIndex, hasExistingSimulations); - - // Then - expect(result).toBe(true); - }); - }); -}); diff --git a/app/src/tests/unit/pathways/report/components/DefaultBaselineOption.test.tsx b/app/src/tests/unit/pathways/report/components/DefaultBaselineOption.test.tsx deleted file mode 100644 index 788753930..000000000 --- a/app/src/tests/unit/pathways/report/components/DefaultBaselineOption.test.tsx +++ /dev/null @@ -1,181 +0,0 @@ -import { render, screen, userEvent } from '@test-utils'; -import { beforeEach, describe, expect, test, vi } from 'vitest'; -import DefaultBaselineOption from '@/pathways/report/components/DefaultBaselineOption'; -import { - DEFAULT_BASELINE_LABELS, - mockOnClick, - resetAllMocks, - TEST_COUNTRIES, -} from '@/tests/fixtures/pathways/report/components/DefaultBaselineOptionMocks'; - -describe('DefaultBaselineOption', () => { - beforeEach(() => { - resetAllMocks(); - vi.clearAllMocks(); - }); - - describe('Rendering', () => { - test('given component renders then displays default baseline label', () => { - // When - render( - - ); - - // Then - expect(screen.getByText(DEFAULT_BASELINE_LABELS.US)).toBeInTheDocument(); - expect( - screen.getByText('Use current law with all households nationwide as baseline') - ).toBeInTheDocument(); - }); - - test('given UK country then displays UK label', () => { - // When - render( - - ); - - // Then - expect(screen.getByText(DEFAULT_BASELINE_LABELS.UK)).toBeInTheDocument(); - }); - - test('given component renders then displays clickable button', () => { - // When - render( - - ); - - // Then - Component renders as a button element - const button = screen.getByRole('button'); - expect(button).toBeInTheDocument(); - expect(button).toHaveClass('tw:cursor-pointer'); - }); - - test('given component renders then displays chevron icon', () => { - // When - const { container } = render( - - ); - - // Then - const chevronIcon = container.querySelector('svg'); - expect(chevronIcon).toBeInTheDocument(); - }); - }); - - describe('Selection state', () => { - test('given isSelected is false then shows inactive styling', () => { - // When - render( - - ); - - // Then - Button uses border-border-light when not selected - const button = screen.getByRole('button'); - expect(button).toBeInTheDocument(); - expect(button).toHaveClass('tw:border-border-light'); - }); - - test('given isSelected is true then shows active styling', () => { - // When - render( - - ); - - // Then - Button uses border-primary-500 and bg-secondary-100 when selected - const button = screen.getByRole('button'); - expect(button).toBeInTheDocument(); - expect(button).toHaveClass('tw:border-primary-500'); - expect(button).toHaveClass('tw:bg-secondary-100'); - }); - }); - - describe('User interactions', () => { - test('given button is clicked then onClick callback is invoked', async () => { - // Given - const user = userEvent.setup(); - const mockCallback = vi.fn(); - - render( - - ); - - // When - await user.click(screen.getByRole('button')); - - // Then - expect(mockCallback).toHaveBeenCalledOnce(); - }); - - test('given button is clicked multiple times then onClick is called each time', async () => { - // Given - const user = userEvent.setup(); - const mockCallback = vi.fn(); - - render( - - ); - - const button = screen.getByRole('button'); - - // When - await user.click(button); - await user.click(button); - await user.click(button); - - // Then - expect(mockCallback).toHaveBeenCalledTimes(3); - }); - }); - - describe('Props handling', () => { - test('given different country IDs then generates correct labels', () => { - // Test US - const { rerender } = render( - - ); - expect(screen.getByText(DEFAULT_BASELINE_LABELS.US)).toBeInTheDocument(); - - // Test UK - rerender( - - ); - expect(screen.getByText(DEFAULT_BASELINE_LABELS.UK)).toBeInTheDocument(); - }); - }); -}); diff --git a/app/src/tests/unit/pathways/report/views/ReportLabelView.test.tsx b/app/src/tests/unit/pathways/report/views/ReportLabelView.test.tsx deleted file mode 100644 index f5dee16b7..000000000 --- a/app/src/tests/unit/pathways/report/views/ReportLabelView.test.tsx +++ /dev/null @@ -1,358 +0,0 @@ -import { render, screen, userEvent } from '@test-utils'; -import { beforeEach, describe, expect, test, vi } from 'vitest'; -import { useCurrentCountry } from '@/hooks/useCurrentCountry'; -import ReportLabelView from '@/pathways/report/views/ReportLabelView'; -import { - mockOnBack, - mockOnCancel, - mockOnNext, - mockOnUpdateLabel, - mockOnUpdateYear, - resetAllMocks, - TEST_COUNTRY_ID, - TEST_REPORT_LABEL, -} from '@/tests/fixtures/pathways/report/views/ReportViewMocks'; - -vi.mock('@/hooks/useCurrentCountry', () => ({ - useCurrentCountry: vi.fn(), -})); - -describe('ReportLabelView', () => { - beforeEach(() => { - resetAllMocks(); - vi.clearAllMocks(); - vi.mocked(useCurrentCountry).mockReturnValue(TEST_COUNTRY_ID); - }); - - describe('Basic rendering', () => { - test('given component renders then displays title', () => { - // When - render( - - ); - - // Then - expect(screen.getByRole('heading', { name: /create report/i })).toBeInTheDocument(); - }); - - test('given component renders then displays report name input', () => { - // When - render( - - ); - - // Then - label text is visible, input is a sibling (not connected via htmlFor) - expect(screen.getByText(/report name/i)).toBeInTheDocument(); - expect(screen.getByRole('textbox')).toBeInTheDocument(); - }); - - test('given component renders then displays year select', () => { - // When - render( - - ); - - // Then - Year select is a shadcn Select with combobox role - const combobox = screen.getByRole('combobox'); - expect(combobox).toBeInTheDocument(); - }); - }); - - describe('US country specific', () => { - test('given US country then displays Initialize button', () => { - // Given - vi.mocked(useCurrentCountry).mockReturnValue('us'); - - // When - render( - - ); - - // Then - expect(screen.getByRole('button', { name: /initialize report/i })).toBeInTheDocument(); - }); - }); - - describe('UK country specific', () => { - test('given UK country then displays Initialise button with British spelling', () => { - // Given - vi.mocked(useCurrentCountry).mockReturnValue('uk'); - - // When - render( - - ); - - // Then - expect(screen.getByRole('button', { name: /initialise report/i })).toBeInTheDocument(); - }); - }); - - describe('Pre-populated label', () => { - test('given existing label then input shows label value', () => { - // When - render( - - ); - - // Then - expect(screen.getByRole('textbox')).toHaveValue(TEST_REPORT_LABEL); - }); - - test('given null label then input is empty', () => { - // When - render( - - ); - - // Then - expect(screen.getByRole('textbox')).toHaveValue(''); - }); - }); - - describe('User interactions', () => { - test('given user types in label then input value updates', async () => { - // Given - const user = userEvent.setup(); - render( - - ); - const input = screen.getByRole('textbox'); - - // When - await user.type(input, 'New Report Name'); - - // Then - expect(input).toHaveValue('New Report Name'); - }); - - test('given user clicks submit then calls onUpdateLabel with entered value', async () => { - // Given - const user = userEvent.setup(); - render( - - ); - const input = screen.getByRole('textbox'); - const submitButton = screen.getByRole('button', { name: /initialize report/i }); - - // When - await user.type(input, 'Test Report'); - await user.click(submitButton); - - // Then - expect(mockOnUpdateLabel).toHaveBeenCalledWith('Test Report'); - }); - - test('given user clicks submit then calls onUpdateYear with year value', async () => { - // Given - const user = userEvent.setup(); - render( - - ); - const submitButton = screen.getByRole('button', { name: /initialize report/i }); - - // When - await user.click(submitButton); - - // Then - expect(mockOnUpdateYear).toHaveBeenCalledWith('2025'); - }); - - test('given user clicks submit then calls onNext', async () => { - // Given - const user = userEvent.setup(); - render( - - ); - const submitButton = screen.getByRole('button', { name: /initialize report/i }); - - // When - await user.click(submitButton); - - // Then - expect(mockOnNext).toHaveBeenCalled(); - }); - - test('given user clicks submit with empty label then still submits empty string', async () => { - // Given - const user = userEvent.setup(); - render( - - ); - const submitButton = screen.getByRole('button', { name: /initialize report/i }); - - // When - await user.click(submitButton); - - // Then - expect(mockOnUpdateLabel).toHaveBeenCalledWith(''); - expect(mockOnNext).toHaveBeenCalled(); - }); - }); - - describe('Navigation actions', () => { - test('given onBack provided then renders back button', () => { - // When - render( - - ); - - // Then - expect(screen.getByRole('button', { name: /back/i })).toBeInTheDocument(); - }); - - test('given onBack not provided then no back button', () => { - // When - render( - - ); - - // Then - expect(screen.queryByRole('button', { name: /back/i })).not.toBeInTheDocument(); - }); - - test('given onCancel provided then renders cancel button', () => { - // When - render( - - ); - - // Then - expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument(); - }); - - test('given user clicks back then calls onBack', async () => { - // Given - const user = userEvent.setup(); - render( - - ); - - // When - await user.click(screen.getByRole('button', { name: /back/i })); - - // Then - expect(mockOnBack).toHaveBeenCalled(); - }); - - test('given user clicks cancel then calls onCancel', async () => { - // Given - const user = userEvent.setup(); - render( - - ); - - // When - await user.click(screen.getByRole('button', { name: /cancel/i })); - - // Then - expect(mockOnCancel).toHaveBeenCalled(); - }); - }); -}); diff --git a/app/src/tests/unit/pathways/report/views/ReportSetupView.test.tsx b/app/src/tests/unit/pathways/report/views/ReportSetupView.test.tsx deleted file mode 100644 index 53ebd716a..000000000 --- a/app/src/tests/unit/pathways/report/views/ReportSetupView.test.tsx +++ /dev/null @@ -1,336 +0,0 @@ -import { render, screen, userEvent } from '@test-utils'; -import { beforeEach, describe, expect, test, vi } from 'vitest'; -import { useUserGeographics } from '@/hooks/useUserGeographic'; -import { useUserHouseholds } from '@/hooks/useUserHousehold'; -import ReportSetupView from '@/pathways/report/views/ReportSetupView'; -import { - mockOnBack, - mockOnCancel, - mockOnNavigateToSimulationSelection, - mockOnNext, - mockOnPrefillPopulation2, - mockReportState, - mockReportStateWithBothConfigured, - mockReportStateWithConfiguredBaseline, - mockUseUserGeographicsEmpty, - mockUseUserHouseholdsEmpty, - resetAllMocks, -} from '@/tests/fixtures/pathways/report/views/ReportViewMocks'; - -vi.mock('@/hooks/useUserHousehold', () => ({ - useUserHouseholds: vi.fn(), - isHouseholdMetadataWithAssociation: vi.fn(), -})); - -vi.mock('@/hooks/useUserGeographic', () => ({ - useUserGeographics: vi.fn(), - isGeographicMetadataWithAssociation: vi.fn(), -})); - -describe('ReportSetupView', () => { - beforeEach(() => { - resetAllMocks(); - vi.clearAllMocks(); - vi.mocked(useUserHouseholds).mockReturnValue(mockUseUserHouseholdsEmpty); - vi.mocked(useUserGeographics).mockReturnValue(mockUseUserGeographicsEmpty); - }); - - describe('Basic rendering', () => { - test('given component renders then displays title', () => { - // When - render( - - ); - - // Then - expect(screen.getByRole('heading', { name: /configure report/i })).toBeInTheDocument(); - }); - - test('given component renders then displays baseline simulation card', () => { - // When - render( - - ); - - // Then - Multiple "Baseline simulation" texts exist, just verify at least one - expect(screen.getAllByText(/baseline simulation/i).length).toBeGreaterThan(0); - }); - - test('given component renders then displays comparison simulation card', () => { - // When - render( - - ); - - // Then - expect(screen.getByText(/comparison simulation/i)).toBeInTheDocument(); - }); - }); - - describe('Unconfigured simulations', () => { - test('given no simulations configured then comparison card shows waiting message', () => { - // When - render( - - ); - - // Then - expect(screen.getByText(/waiting for baseline/i)).toBeInTheDocument(); - }); - - test('given no simulations configured then comparison card is disabled', () => { - // When - render( - - ); - - // Then - SetupConditionsVariant renders cards as