Deploy CommunityOne React app with organization card

Dockerfile

@@ -0,0 +1,40 @@
+# Simple React App Deployment for HuggingFace Spaces
+FROM node:20-slim AS builder
+
+WORKDIR /app
+
+# Copy frontend source
+COPY frontend/package*.json ./
+RUN npm ci
+
+COPY frontend/ ./
+
+# Build React app for production
+ENV VITE_CANONICAL_DOMAIN=communityone-readme.hf.space
+ENV VITE_API_URL=https://www.communityone.com/api
+RUN npm run build
+
+# Production stage with nginx
+FROM nginx:alpine
+
+# Copy built React app
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Create nginx config for SPA
+RUN echo 'server { \
+    listen 7860; \
+    root /usr/share/nginx/html; \
+    index index.html; \
+    location / { \
+        try_files $uri $uri/ /index.html; \
+    } \
+}' > /etc/nginx/conf.d/default.conf
+
+EXPOSE 7860
+
+CMD ["nginx", "-g", "daemon off;"]
+ENV LOG_LEVEL=INFO
+ENV HF_SPACES=1
+
+# Use supervisor to run all services
+CMD ["/app/start.sh"]

README.md

@@ -1,10 +1,86 @@
 ---
-title: README
-emoji: ⚡
-colorFrom: indigo
-colorTo: blue
-sdk: docker
+title: CommunityOne
+emoji: 🏘️
+colorFrom: blue
+colorTo: green
+sdk: static
 pinned: false
 ---
 
-Edit this `README.md` markdown file to author your organization card.
+# 🏘️ CommunityOne
+
+**The open path to everything local**
+
+Building tools to help communities understand and engage with local government, nonprofits, and civic processes.
+
+## 🚀 What We Build
+
+### [Open Navigator for Engagement](https://www.communityone.com)
+An open-source platform for exploring and tracking:
+
+- **90,000+ jurisdictions** (cities, counties, states)
+- **3M+ nonprofit organizations** (complete IRS registry)
+- **7,300+ state legislators** (all 50 states + DC + PR)
+- **100,000+ state bills** (legislative tracking with full text)
+- **Government meetings** with AI-extracted insights
+- **Budget analysis** (municipal, county, state spending)
+- **Public opinion data** (survey questions from Roper Center)
+
+## 📊 Open Datasets
+
+All our data is freely available on HuggingFace:
+
+- **[one-nonprofits-organizations](https://huggingface.co/datasets/CommunityOne/one-nonprofits-organizations)** - 3.9M nonprofits (IRS EO-BMF + ProPublica)
+- **[one-nonprofits-financials](https://huggingface.co/datasets/CommunityOne/one-nonprofits-financials)** - Form 990 financial data
+- **[one-meetings-calendar](https://huggingface.co/datasets/CommunityOne/one-meetings-calendar)** - Government meeting schedules
+- **[reference-jurisdictions-cities](https://huggingface.co/datasets/CommunityOne/reference-jurisdictions-cities)** - 19K+ U.S. cities
+- **[reference-jurisdictions-counties](https://huggingface.co/datasets/CommunityOne/reference-jurisdictions-counties)** - 3,144 U.S. counties
+
+[View all 60+ datasets →](https://huggingface.co/CommunityOne/datasets)
+
+## 🛠️ Technology Stack
+
+- **Frontend:** React + Vite + Tailwind CSS
+- **Backend:** FastAPI + PostgreSQL + Delta Lake
+- **AI/ML:** LangChain, OpenAI GPT-4, Anthropic Claude
+- **Data:** Apache Spark, DuckDB, Polars, Pandas
+- **Deployment:** HuggingFace Spaces, Docker
+
+## 🎯 Use Cases
+
+### For Advocates & Organizers
+- Track legislation on your issue (healthcare, education, housing)
+- Find nonprofits working in your community
+- Monitor government meetings and budgets
+- Identify engagement opportunities
+
+### For Researchers & Journalists
+- Analyze policy trends across states
+- Study nonprofit sector patterns
+- Track government spending priorities
+- Map community infrastructure
+
+### For Developers
+- Access clean, standardized civic data
+- Build on open APIs and datasets
+- Fork and extend the platform
+- Contribute to open source tools
+
+## 🔗 Links
+
+- **🌐 Live Application:** [www.communityone.com](https://www.communityone.com)
+- **📖 Documentation:** [www.communityone.com/docs](https://www.communityone.com/docs)
+- **💻 GitHub:** [getcommunityone/open-navigator-for-engagement](https://github.com/getcommunityone/open-navigator-for-engagement)
+- **📊 Datasets:** [All CommunityOne datasets](https://huggingface.co/CommunityOne/datasets)
+
+## 📝 License
+
+MIT License - Free to use, modify, and distribute
+
+## 🤝 Contributing
+
+We welcome contributions! Check out our [GitHub repository](https://github.com/getcommunityone/open-navigator-for-engagement) to get started.
+
+---
+
+**Focus Areas:** Civic Tech • Open Data • Government Transparency • Nonprofit Sector • Legislative Tracking • Community Engagement

frontend/.env.example

@@ -0,0 +1,15 @@
+# Example environment variables for frontend development
+# Copy to .env.development.local to customize
+
+# Documentation URL (Docusaurus runs on port 3000 in development)
+# Default: http://localhost:3000
+# VITE_DOCS_URL=http://localhost:3000
+
+# API URL (FastAPI runs on port 8000)  
+# Default: http://localhost:8000
+# VITE_API_URL=http://localhost:8000
+
+# Google Analytics Measurement ID (same as docs site)
+# Get from: https://analytics.google.com (GA4 property)
+# Format: G-XXXXXXXXXX
+VITE_GOOGLE_ANALYTICS_ID=G-5EQV815915

frontend/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

frontend/.gitignore

@@ -0,0 +1,21 @@
+# Frontend dependencies
+node_modules/
+dist/
+*.log
+.DS_Store
+
+# Build output
+api/static/
+
+# Environment
+.env
+.env.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Testing
+coverage/

frontend/README.md

@@ -0,0 +1,166 @@
+# Open Navigator for Engagement - Frontend
+
+React + TypeScript web interface for the Open Navigator for Engagement application.
+
+## Projects
+
+### Main Application
+React + TypeScript web interface with maps, charts, and data visualization.
+
+**Location:** `frontend/` (this directory)
+
+### Policy Accountability Dashboards
+Evidence-based accountability dashboards for policy advocacy.
+
+**Location:** `frontend/policy-dashboards/`  
+**Documentation:** [Policy Dashboards README](policy-dashboards/README.md)
+
+## Tech Stack
+
+- **React 18.2** - UI framework
+- **TypeScript** - Type safety
+- **Vite** - Build tool
+- **Tailwind CSS** - Styling
+- **React Router** - Navigation
+- **TanStack Query** - Data fetching
+- **Recharts** - Charts
+- **Leaflet** - Interactive maps
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run dev server (hot reload)
+npm run dev
+# Opens http://localhost:3000
+
+# Build for production
+npm run build
+# Outputs to ../api/static/
+
+# Type check
+npm run type-check
+
+# Lint
+npm run lint
+```
+
+## Project Structure
+
+```
+src/
+├── components/
+│   └── Layout.tsx          # Main layout with sidebar
+├── pages/
+│   ├── Dashboard.tsx       # Statistics and charts
+│   ├── Heatmap.tsx         # Interactive map
+│   ├── Documents.tsx       # Document browser
+│   ├── Opportunities.tsx   # Opportunity manager
+│   └── Settings.tsx        # Configuration
+├── App.tsx                 # Root component with routing
+├── main.tsx                # Entry point
+└── index.css               # Global styles
+```
+
+## Pages
+
+### Dashboard (`/`)
+- Total documents, opportunities, states monitored
+- Topic distribution charts (bar and pie)
+- Recent opportunities table
+
+### Heatmap (`/heatmap`)
+- Interactive Leaflet map
+- Color-coded urgency markers
+- State and topic filters
+- Popup details
+
+### Documents (`/documents`)
+- Searchable document list
+- Pagination
+- Topic tags
+- Source links
+
+### Opportunities (`/opportunities`)
+- Filterable by urgency
+- Generate advocacy emails
+- Talking points display
+- Confidence scores
+
+### Settings (`/settings`)
+- Target state selection
+- Policy topic configuration
+- Notification preferences
+- Agent status monitoring
+
+## Environment
+
+The frontend proxies API requests to the backend:
+
+```typescript
+// vite.config.ts
+server: {
+  proxy: {
+    '/api': {
+      target: 'http://localhost:8000',
+      changeOrigin: true,
+    },
+  },
+}
+```
+
+## Building
+
+Production builds are output to `../api/static/` so the FastAPI backend can serve them:
+
+```typescript
+// vite.config.ts
+build: {
+  outDir: '../api/static',
+  emptyOutDir: true,
+}
+```
+
+## Styling
+
+Uses Tailwind CSS with custom utility classes:
+
+```css
+/* index.css */
+.card { @apply bg-white rounded-lg shadow-md p-6; }
+.btn-primary { @apply bg-primary-600 hover:bg-primary-700 text-white ... }
+.btn-secondary { @apply bg-gray-200 hover:bg-gray-300 text-gray-800 ... }
+```
+
+## Data Fetching
+
+Uses TanStack Query for server state management:
+
+```typescript
+const { data, isLoading } = useQuery({
+  queryKey: ['opportunities', state, topic],
+  queryFn: async () => {
+    const response = await axios.get('/api/opportunities', { params: { state, topic } })
+    return response.data
+  },
+})
+```
+
+## Deployment
+
+The built frontend is automatically included when deploying to Databricks Apps:
+
+```bash
+# Build frontend
+npm run build
+
+# Deploy entire app
+cd ..
+./scripts/deploy-databricks-app.sh
+```
+
+## License
+
+MIT License - See LICENSE file for details

frontend/index.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="64x64" href="/communityone_logo_64.png" />
+    <link rel="icon" type="image/svg+xml" href="/communityone_logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="CommunityOne: The open path to everything local" />
+    <title>Open Navigator for Engagement</title>
+    
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-5EQV815915"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-5EQV815915');
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "oral-health-policy-pulse-ui",
+  "version": "1.0.0",
+  "description": "CommunityOne: The open path to everything local",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "axios": "^1.6.2",
+    "react-query": "^3.39.3",
+    "@tanstack/react-query": "^5.14.2",
+    "recharts": "^2.10.3",
+    "leaflet": "^1.9.4",
+    "react-leaflet": "^4.2.1",
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
+    "clsx": "^2.0.0",
+    "date-fns": "^2.30.0",
+    "zustand": "^4.4.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@types/leaflet": "^1.9.8",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  }
+}

frontend/policy-dashboards/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

frontend/policy-dashboards/README.md

@@ -0,0 +1,251 @@
+# Policy Accountability Dashboards
+
+**Evidence-based accountability dashboards for local government policy advocacy**
+
+Interactive web dashboards that expose gaps between rhetoric and reality, deferral tactics, and power imbalances in local government decision-making.
+
+## Quick Start
+
+```bash
+# Install dependencies
+cd frontend/policy-dashboards
+npm install
+
+# Start development server
+npm start
+```
+
+The app will open at `http://localhost:3000`
+
+## Overview
+
+This React application visualizes accountability data from local government meetings and budgets. It presents four key dashboards:
+
+1. **They cut health spending while praising wellness** - Rhetoric vs. reality gap
+2. **Delayed 6 months and counting** - Sequential deferral patterns  
+3. **What got funded instead** - Budget displacement analysis
+4. **One memo beat 240 residents** - Influence power mapping
+
+Plus a **Summary** page that provides an overview and strategic guidance.
+
+## Data Integration
+
+### Automatic Data Export from Python
+
+The Python accountability analysis automatically exports data for the frontend:
+
+```bash
+# Run the full analysis (includes frontend export)
+python examples/tuscaloosa_accountability_report.py
+```
+
+This generates: `frontend/policy-dashboards/src/data/dashboardData.js`
+
+### Manual Data Updates
+
+To update dashboard data manually, edit `src/data/dashboardData.js`:
+
+```javascript
+export const rhetoricGapData = {
+  sentimentScore: 92,     // Update this
+  budgetDelta: -120000,   // And this
+  // ... more fields
+};
+```
+
+## Project Structure
+
+```
+frontend/policy-dashboards/
+├── public/
+│   └── index.html
+├── src/
+│   ├── components/
+│   │   ├── shared/           # Reusable components
+│   │   │   ├── BarMeter.jsx
+│   │   │   ├── MetricCard.jsx
+│   │   │   ├── Compare.jsx
+│   │   │   └── InsightBox.jsx
+│   │   ├── Summary.jsx       # Summary dashboard
+│   │   ├── WordsVsDollars.jsx    # Dashboard 1
+│   │   ├── EndlessStudyLoop.jsx  # Dashboard 2
+│   │   ├── WhereMoneyWent.jsx    # Dashboard 3
+│   │   └── WhoIsInCharge.jsx     # Dashboard 4
+│   ├── data/
+│   │   └── dashboardData.js  # All dashboard data (UPDATE THIS)
+│   ├── App.jsx
+│   └── index.js
+├── package.json
+└── README.md
+```
+
+## Features
+
+### Per-Capita Benchmarks
+
+Each dashboard includes comparisons to:
+- This District
+- Republican Districts Average
+- Democratic Districts Average  
+- National Average
+
+This framing shows the issue transcends partisan politics.
+
+### Interactive Navigation
+
+- Click dashboard titles in tabs to switch views
+- Click summary findings to jump to detailed dashboards
+- Clean, print-friendly design
+
+### Export to PDF
+
+Add PDF export capability:
+
+```bash
+npm install html2canvas jspdf
+```
+
+Then add a download button (see component code for implementation).
+
+## Customization
+
+### Change Colors
+
+Edit the color variables in each component:
+
+```javascript
+const colors = { 
+  positive: "#1D9E75",   // Green
+  negative: "#D85A30",   // Red/orange
+  neutral: "#222"        // Dark gray
+};
+```
+
+### Add New Benchmarks
+
+Update the `benchmarks` object in `dashboardData.js`:
+
+```javascript
+benchmarks: {
+  thisDistrict: { perStudent: 41, label: "This District" },
+  // Add more comparison groups here
+}
+```
+
+### Customize Dashboard Names
+
+Edit the `tabs` array in `src/App.jsx`:
+
+```javascript
+const tabs = [
+  { id: 1, label: 'Your Custom Title Here', component: WordsVsDollars },
+  // ...
+];
+```
+
+## Deployment
+
+### Build for Production
+
+```bash
+npm run build
+```
+
+This creates an optimized build in `build/` folder.
+
+### Deploy to GitHub Pages
+
+```bash
+# Install GitHub Pages package
+npm install --save-dev gh-pages
+
+# Add to package.json scripts:
+"predeploy": "npm run build",
+"deploy": "gh-pages -d build"
+
+# Deploy
+npm run deploy
+```
+
+### Deploy to Netlify/Vercel
+
+1. Connect your repository to Netlify or Vercel
+2. Set build command: `npm run build`
+3. Set publish directory: `build`
+4. Deploy!
+
+## Presentation Mode
+
+Add URL parameter support for presentation mode (stacks all dashboards vertically):
+
+```javascript
+// In App.jsx
+const urlParams = new URLSearchParams(window.location.search);
+const presentMode = urlParams.get('mode') === 'present';
+```
+
+Then visit: `http://localhost:3000?mode=present`
+
+## Data Sources
+
+The accountability dashboards use data from:
+
+- **NCES Common Core of Data (CCD)** - School district financials
+- **ASTDD State Oral Health Programs** - Program tracking
+- **NCES F-33 Survey** - Capital outlay by function
+- **National Association of School Nurses** - Liability data
+- **ADA Health Policy Institute** - Dental health metrics
+
+All sources are cited in dashboard components.
+
+## Strategic Usage
+
+### For Board Meetings
+
+1. Start with **Summary** to set context
+2. Move to **specific dashboard** based on board response
+3. Use the "Ask them" boxes for direct questions
+
+### For Media
+
+Lead with **Dashboard 4** (Influence Radar) - it's the headline:
+> "Risk Manager's One Memo Outweighed 240 Citizen Testimonies"
+
+### For Advocacy Training
+
+Show all four to demonstrate:
+- Data-driven approach
+- Understanding of political dynamics  
+- Ability to counter deflection tactics
+
+## Development
+
+### Available Scripts
+
+- `npm start` - Development server
+- `npm run build` - Production build
+- `npm test` - Run tests
+- `npm run eject` - Eject from Create React App
+
+### Adding New Dashboards
+
+1. Create component in `src/components/`
+2. Add data to `src/data/dashboardData.js`
+3. Import and add to tabs in `src/App.jsx`
+4. Update Python export function
+
+## Support
+
+For questions or issues:
+
+- **Documentation**: See `docs/ACCOUNTABILITY_DASHBOARD_STRATEGY.md`
+- **Python Backend**: See `extraction/accountability_dashboards.py`
+- **Examples**: See `examples/tuscaloosa_accountability_report.py`
+
+## License
+
+Part of the Open Navigator for Engagement project.
+
+---
+
+**Built with React** | **Designed for Policy Advocacy** | **Evidence-Based Accountability**

frontend/policy-dashboards/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "policy-accountability-dashboards",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Evidence-based accountability dashboards for local government policy advocacy",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "recharts": "^2.5.0",
+    "lucide-react": "^0.263.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

frontend/policy-dashboards/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Policy Accountability Dashboards - Evidence-based advocacy for local government transparency"
+    />
+    <title>Policy Accountability Dashboards</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

frontend/policy-dashboards/src/App.jsx

@@ -0,0 +1,1355 @@
+import React, { useState } from 'react';
+import HomePage from './components/HomePage';
+import ImpactDashboard from './components/ImpactDashboard';
+import TopicNavigation from './components/TopicNavigation';
+import DecisionCard from './components/shared/DecisionCard';
+import SplitScreenView from './components/SplitScreenView';
+import NonprofitCard from './components/NonprofitCard';
+import { metadata } from './data/dashboardData';
+import { Home, Grid, Building2, Heart, Church, Search, X, Calendar, Filter, MapPin, Edit2, Lightbulb } from 'lucide-react';
+
+export default function App() {
+  const [viewMode, setViewMode] = useState('home'); // 'home', 'impact', 'browse', 'split-screen'
+  const [exploreMode, setExploreMode] = useState('decisions'); // 'decisions', 'organizations', or 'causes'
+  const [sectorView, setSectorView] = useState('all'); // 'all', 'public', 'nonprofits', 'churches'
+  const [selectedPersona, setSelectedPersona] = useState(null);
+  const [selectedTopic, setSelectedTopic] = useState(null);
+  const [selectedDecision, setSelectedDecision] = useState(null);
+  const [selectedTopics, setSelectedTopics] = useState([]);
+  const [selectedPatterns, setSelectedPatterns] = useState([]);
+  const [selectedResources, setSelectedResources] = useState([]);
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [quickDateFilter, setQuickDateFilter] = useState('all'); // 'all', '7days', '30days', '90days'
+  const [quickTopicFilter, setQuickTopicFilter] = useState('all'); // 'all', 'health', 'education', 'infrastructure'
+  const [jurisdictionType, setJurisdictionType] = useState('city'); // 'nation', 'state', 'county', 'city', 'school-district'
+  const [jurisdictionName, setJurisdictionName] = useState('Tuscaloosa');
+  const [jurisdictionState, setJurisdictionState] = useState('AL');
+  const [showLocationModal, setShowLocationModal] = useState(false);
+  const [tempJurisdictionType, setTempJurisdictionType] = useState('city');
+  const [tempJurisdictionName, setTempJurisdictionName] = useState('');
+  const [tempJurisdictionState, setTempJurisdictionState] = useState('');
+  
+  const handlePersonaSelect = (persona, topic) => {
+    setSelectedPersona(persona);
+    setSelectedTopic(topic);
+    setViewMode('impact');
+  };
+  
+  const handleTopicSelect = (topicId) => {
+    setSelectedTopics([topicId]);
+    setViewMode('browse');
+  };
+  
+  const handleTopicToggle = (topicId) => {
+    setSelectedTopics(prev =>
+      prev.includes(topicId)
+        ? prev.filter(t => t !== topicId)
+        : [...prev, topicId]
+    );
+  };
+  
+  const handlePatternToggle = (patternId) => {
+    setSelectedPatterns(prev =>
+      prev.includes(patternId)
+        ? prev.filter(p => p !== patternId)
+        : [...prev, patternId]
+    );
+  };
+  
+  const handleResourceToggle = (resourceId) => {
+    setSelectedResources(prev =>
+      prev.includes(resourceId)
+        ? prev.filter(r => r !== resourceId)
+        : [...prev, resourceId]
+    );
+  };
+  
+  const handleClearFilters = () => {
+    setSelectedTopics([]);
+    setSelectedPatterns([]);
+    setSelectedResources([]);
+    setStartDate(null);
+    setEndDate(null);
+    setSearchQuery('');
+    setQuickDateFilter('all');
+    setQuickTopicFilter('all');
+  };
+  
+  const handleQuickDateFilter = (filter) => {
+    setQuickDateFilter(filter);
+    const today = new Date();
+    
+    switch(filter) {
+      case '7days':
+        const sevenDaysAgo = new Date(today);
+        sevenDaysAgo.setDate(today.getDate() - 7);
+        setStartDate(sevenDaysAgo.toISOString().split('T')[0]);
+        setEndDate(today.toISOString().split('T')[0]);
+        break;
+      case '30days':
+        const thirtyDaysAgo = new Date(today);
+        thirtyDaysAgo.setDate(today.getDate() - 30);
+        setStartDate(thirtyDaysAgo.toISOString().split('T')[0]);
+        setEndDate(today.toISOString().split('T')[0]);
+        break;
+      case '90days':
+        const ninetyDaysAgo = new Date(today);
+        ninetyDaysAgo.setDate(today.getDate() - 90);
+        setStartDate(ninetyDaysAgo.toISOString().split('T')[0]);
+        setEndDate(today.toISOString().split('T')[0]);
+        break;
+      case 'all':
+      default:
+        setStartDate(null);
+        setEndDate(null);
+        break;
+    }
+  };
+  
+  const handleQuickTopicFilter = (filter) => {
+    setQuickTopicFilter(filter);
+    
+    if (filter === 'all') {
+      setSelectedTopics([]);
+    } else {
+      setSelectedTopics([filter]);
+    }
+  };
+  
+  const handleBackToHome = () => {
+    setViewMode('home');
+    setSelectedPersona(null);
+    setSelectedTopic(null);
+    setSelectedDecision(null);
+  };
+  
+  const handleDecisionClick = (decision) => {
+    setSelectedDecision(decision);
+    setViewMode('split-screen');
+  };
+  
+  const handleSectorSelect = (sector) => {
+    setViewMode('browse');
+    
+    // Set explore mode and sector based on selection
+    if (sector === 'public') {
+      setExploreMode('decisions');
+      setSectorView('public');
+    } else if (sector === 'nonprofits' || sector === 'churches') {
+      setExploreMode('organizations');
+      setSectorView(sector);
+    } else if (sector === 'all') {
+      setExploreMode('organizations');
+      setSectorView('all');
+    }
+  };
+  
+  // Example decision data - would come from Python export
+  const exampleDecisions = [
+    {
+      decision_summary: "Approval of $850,000 athletic turf replacement project",
+      outcome: "Approved",
+      primary_rationale: "Athletic facilities are essential for student engagement and community pride. The current turf is beyond its useful life and poses safety concerns.",
+      supporters: [
+        { name: "Board Member Johnson", role: "Board Member" },
+        { name: "Athletic Director Smith", role: "Staff" }
+      ],
+      opponents: [
+        { name: "Parent Coalition for Health", role: "Public" }
+      ],
+      vote_result: "6-1",
+      meeting_date: "2026-03-15",
+      tradeoffs_discussed: ["Athletic facilities vs. health screening programs"],
+      evidence_cited: [{ source: "Athletic Department Report" }],
+      policy_domain: "facilities",
+      ntee_code: "N20" // Recreation, Sports, and Athletics
+    },
+    {
+      decision_summary: "Tabled decision on dental screening partnership with West Alabama Dental Clinic",
+      outcome: "Tabled for further study",
+      primary_rationale: "Risk management concerns require additional legal review and liability analysis before proceeding with external health partnerships.",
+      supporters: [
+        { name: "Patricia Johnson, Risk Manager", role: "Staff" }
+      ],
+      opponents: [
+        { name: "Dr. Sarah Martinez", role: "Public" },
+        { name: "Parent Teacher Association", role: "Public" },
+        { name: "Board Member Williams", role: "Board Member" }
+      ],
+      vote_result: "5-2 to table",
+      meeting_date: "2026-01-18",
+      tradeoffs_discussed: ["Preventive care vs. perceived liability risk"],
+      evidence_cited: [{ source: "Risk Management Memo" }],
+      policy_domain: "health",
+      ntee_code: "E32", // School-Based Health Care
+      community_gap: {
+        description: "100% of surveyed parents want dental screenings for students",
+        nonprofit_filling_gap: true
+      }
+    },
+    {
+      decision_summary: "Reduction of nursing staff from 5 FTE to 3 FTE",
+      outcome: "Approved",
+      primary_rationale: "Budget constraints necessitate cost reductions. Nursing positions will be restructured to focus on emergency response rather than preventive services.",
+      supporters: [
+        { name: "Superintendent Brown", role: "Staff" },
+        { name: "Board Chair Thompson", role: "Board Member" }
+      ],
+      opponents: [
+        { name: "School Nurses Association", role: "Public" },
+        { name: "Board Member Lee", role: "Board Member" }
+      ],
+      vote_result: "4-3",
+      meeting_date: "2026-02-20",
+      tradeoffs_discussed: ["Cost savings vs. preventive health services"],
+      evidence_cited: [{ source: "FY2026 Budget Proposal" }],
+      policy_domain: "budget",
+      ntee_code: "E40", // Health - General and Rehabilitative
+      community_gap: {
+        description: "Students lost access to preventive health services",
+        nonprofit_filling_gap: true
+      }
+    }
+  ];
+  
+  // Example nonprofit data - would come from IRS/GuideStar API
+  const exampleNonprofits = [
+    {
+      name: "West Alabama Dental Initiative",
+      ein: "63-1234567",
+      ntee_code: "E32",
+      ntee_description: "School-Based Health Care",
+      mission: "Providing free dental screenings and preventive care to underserved students in West Alabama",
+      services: [
+        "Mobile dental unit visits to schools",
+        "Free toothbrush and fluoride kits",
+        "Dental education workshops for parents"
+      ],
+      annual_budget: 125000,
+      students_served: 2400,
+      contact: {
+        website: "https://wadaldentalinitiative.org",
+        email: "info@wadaldentalinitiative.org",
+        phone: "(205) 555-0123"
+      },
+      volunteer_opportunities: true,
+      accepting_board_members: true
+    },
+    {
+      name: "Tuscaloosa Family Health Network",
+      ein: "63-7654321",
+      ntee_code: "E40",
+      ntee_description: "Health - General and Rehabilitative",
+      mission: "Connecting low-income families with preventive health services and wellness programs",
+      services: [
+        "Health screenings at community centers",
+        "Nutrition education programs",
+        "Mental health counseling referrals"
+      ],
+      annual_budget: 280000,
+      families_served: 850,
+      contact: {
+        website: "https://tuscfamilyhealth.org",
+        email: "contact@tuscfamilyhealth.org",
+        phone: "(205) 555-0456"
+      },
+      volunteer_opportunities: true,
+      accepting_board_members: false
+    },
+    {
+      name: "After School Champions",
+      ein: "63-9876543",
+      ntee_code: "O50",
+      ntee_description: "Youth Development Programs",
+      mission: "Providing safe, enriching after-school programs that support academic success and healthy development",
+      services: [
+        "Homework help and tutoring",
+        "Healthy snacks and meals",
+        "Physical activity and sports",
+        "Health and wellness workshops"
+      ],
+      annual_budget: 340000,
+      youth_served: 450,
+      contact: {
+        website: "https://afterschoolchamps.org",
+        email: "info@afterschoolchamps.org",
+        phone: "(205) 555-0789"
+      },
+      volunteer_opportunities: true,
+      accepting_board_members: true
+    },
+    {
+      name: "First Baptist Church Tuscaloosa - Health Ministry",
+      ein: "63-2345678",
+      ntee_code: "X20",
+      ntee_description: "Christian",
+      mission: "Faith-based health outreach serving Tuscaloosa families through free dental kits, health screenings, and nutrition education",
+      services: [
+        "Free dental hygiene kits distribution",
+        "Health screenings after Sunday service",
+        "Nutrition education classes",
+        "Mobile health unit partnership"
+      ],
+      annual_budget: 45000,
+      families_served: 450,
+      contact: {
+        website: "https://fbctuscaloosa.org/health",
+        email: "health@fbctuscaloosa.org",
+        phone: "(205) 555-0200"
+      },
+      volunteer_opportunities: true,
+      accepting_board_members: false
+    },
+    {
+      name: "Tuscaloosa County Interfaith Dental Initiative",
+      ein: "63-3456789",
+      ntee_code: "X20",
+      ntee_description: "Christian",
+      mission: "Multi-faith collaboration providing free dental care to low-income students across Tuscaloosa County schools",
+      services: [
+        "Mobile dental unit serving Title I schools",
+        "Free toothbrush and fluoride programs",
+        "Parent education workshops",
+        "Dental emergency fund for families"
+      ],
+      annual_budget: 180000,
+      students_served: 1600,
+      contact: {
+        website: "https://tuscaloosainterfaithdental.org",
+        email: "contact@tuscaloosainterfaithdental.org",
+        phone: "(205) 555-0300"
+      },
+      volunteer_opportunities: true,
+      accepting_board_members: true
+    },
+    {
+      name: "Catholic Social Services - Dental Outreach",
+      ein: "63-4567890",
+      ntee_code: "X20",
+      ntee_description: "Christian",
+      mission: "Diocese of Birmingham outreach providing dental care and health services to underserved communities",
+      services: [
+        "Quarterly dental clinics at parish hall",
+        "School dental screening partnerships",
+        "Dental supply distribution",
+        "Financial assistance for dental emergencies"
+      ],
+      annual_budget: 95000,
+      families_served: 320,
+      contact: {
+        website: "https://cssalabama.org/dental",
+        email: "dental@cssalabama.org",
+        phone: "(205) 555-0400"
+      },
+      volunteer_opportunities: true,
+      accepting_board_members: false
+    }
+  ];
+  
+  // Filter decisions based on search, topics, patterns, resources, and date range
+  const filteredDecisions = exampleDecisions.filter(decision => {
+    const matchesSearch = searchQuery === '' || 
+      decision.decision_summary.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      decision.primary_rationale.toLowerCase().includes(searchQuery.toLowerCase());
+    
+    // Map policy_domain to topic IDs
+    const topicMap = {
+      'health': 'public-health',
+      'facilities': 'infrastructure',
+      'budget': 'education' // Example mapping
+    };
+    const decisionTopic = topicMap[decision.policy_domain] || decision.policy_domain;
+    const matchesTopic = selectedTopics.length === 0 || selectedTopics.includes(decisionTopic);
+    
+    // Date filtering
+    const decisionDate = new Date(decision.meeting_date);
+    const matchesStartDate = !startDate || decisionDate >= new Date(startDate);
+    const matchesEndDate = !endDate || decisionDate <= new Date(endDate);
+    
+    // TODO: Add pattern matching based on decision.patterns field
+    // TODO: Add resource matching based on decision.available_resources field
+    
+    return matchesSearch && matchesTopic && matchesStartDate && matchesEndDate;
+  });
+  
+  // Filter nonprofits and churches based on search and topic
+  const filteredNonprofits = exampleNonprofits.filter(org => {
+    const matchesSearch = searchQuery === '' ||
+      org.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      org.mission.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      org.services.some(service => service.toLowerCase().includes(searchQuery.toLowerCase())) ||
+      org.ntee_description.toLowerCase().includes(searchQuery.toLowerCase());
+    
+    // Map NTEE codes to topic IDs
+    const nteeTopicMap = {
+      'E': 'public-health',    // Health
+      'F': 'public-health',    // Mental Health
+      'K': 'public-health',    // Food/Nutrition
+      'O': 'education',        // Youth Development
+      'P': 'education',        // Human Services
+      'X': 'public-health'     // Religious (often health ministries)
+    };
+    const orgTopic = nteeTopicMap[org.ntee_code?.[0]] || 'public-health';
+    const matchesTopic = selectedTopics.length === 0 || selectedTopics.includes(orgTopic);
+    
+    return matchesSearch && matchesTopic;
+  });
+
+  return (
+    <div>
+      {/* Sticky Header */}
+      <div style={{
+        position: 'sticky',
+        top: 0,
+        zIndex: 1000,
+        background: 'white',
+        borderBottom: '1px solid #eee',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
+      }}>
+        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '16px 24px' }}>
+          {/* Logo and Title Row */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 12 }}>
+            {/* CommunityOne Logo */}
+            <img 
+              src="/communityone_logo.svg" 
+              alt="CommunityOne"
+              onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+              style={{
+                height: 100,
+                cursor: 'pointer',
+                objectFit: 'contain'
+              }}
+            />
+            
+            {/* User Location Display */}
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              padding: '8px 16px',
+              background: '#f5f5f5',
+              borderRadius: 8,
+              border: '1px solid #e0e0e0'
+            }}>
+              <MapPin size={18} style={{ color: '#059669' }} />
+              <div>
+                <div style={{ fontSize: 14, fontWeight: 600, color: '#111' }}>
+                  {jurisdictionType === 'nation' ? 'United States' : 
+                   jurisdictionType === 'state' ? jurisdictionState :
+                   jurisdictionType === 'county' ? `${jurisdictionName} County, ${jurisdictionState}` :
+                   jurisdictionType === 'school-district' ? `${jurisdictionName} (${jurisdictionState})` :
+                   `${jurisdictionName}, ${jurisdictionState}`}
+                </div>
+                <div style={{ fontSize: 12, color: '#666', textTransform: 'capitalize' }}>
+                  {jurisdictionType === 'school-district' ? 'School District' : jurisdictionType}
+                </div>
+              </div>
+              <button
+                onClick={() => {
+                  setTempJurisdictionType(jurisdictionType);
+                  setTempJurisdictionName(jurisdictionName);
+                  setTempJurisdictionState(jurisdictionState);
+                  setShowLocationModal(true);
+                }}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: 4,
+                  display: 'flex',
+                  alignItems: 'center',
+                  color: '#059669'
+                }}
+                title="Change location"
+              >
+                <Edit2 size={16} />
+              </button>
+            </div>
+            
+            <div style={{ flex: 1 }}>
+              <h1 style={{ fontSize: 20, fontWeight: 600, marginBottom: 4, color: '#111' }}>
+                {metadata.title}
+              </h1>
+              <p style={{ color: '#666', fontSize: 14, lineHeight: 1.4, margin: 0 }}>
+                {metadata.description}
+              </p>
+            </div>
+          </div>
+          
+          {/* Global Search Bar */}
+          <div style={{
+            background: 'white',
+            border: '1px solid #eee',
+            borderRadius: 8,
+            padding: 12,
+            marginBottom: 12
+          }}>
+            <div style={{
+              position: 'relative',
+              display: 'flex',
+              alignItems: 'center'
+            }}>
+              <Search
+                size={16}
+                style={{
+                  position: 'absolute',
+                  left: 12,
+                  color: '#999'
+                }}
+              />
+              <input
+                type="text"
+                placeholder="Search decisions, nonprofits, churches, or topics..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                style={{
+                  width: '100%',
+                  padding: '10px 40px 10px 40px',
+                  fontSize: 14,
+                  border: '1px solid #ddd',
+                  borderRadius: 6,
+                  outline: 'none',
+                  transition: 'border-color 0.2s'
+                }}
+                onFocus={(e) => e.target.style.borderColor = '#059669'}
+                onBlur={(e) => e.target.style.borderColor = '#ddd'}
+              />
+              {searchQuery && (
+                <button
+                  onClick={() => setSearchQuery('')}
+                  style={{
+                    position: 'absolute',
+                    right: 12,
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    color: '#999',
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: 4
+                  }}
+                >
+                  <X size={16} />
+                </button>
+              )}
+            </div>
+          </div>
+
+          {/* View Mode Toggle */}
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'space-between',
+            alignItems: 'center'
+          }}>
+            <div style={{ display: 'flex', gap: 6 }}>
+              <button
+                onClick={() => setViewMode('home')}
+            style={{
+              padding: '10px 20px',
+              borderRadius: 8,
+              fontSize: 15,
+              cursor: 'pointer',
+              border: '1px solid',
+              borderColor: viewMode === 'home' ? '#888' : '#ddd',
+              background: viewMode === 'home' ? '#f5f5f2' : 'white',
+              fontWeight: viewMode === 'home' ? 500 : 400,
+              color: viewMode === 'home' ? '#111' : '#666',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}
+          >
+            <Home size={14} />
+            Home
+          </button>
+          <button
+            onClick={() => {
+              setViewMode('browse');
+              setExploreMode('causes');
+              setSectorView('all');
+            }}
+            style={{
+              padding: '10px 20px',
+              borderRadius: 8,
+              fontSize: 15,
+              cursor: 'pointer',
+              border: '1px solid',
+              borderColor: (viewMode === 'browse' && exploreMode === 'causes') ? '#888' : '#ddd',
+              background: (viewMode === 'browse' && exploreMode === 'causes') ? '#f5f5f2' : 'white',
+              fontWeight: (viewMode === 'browse' && exploreMode === 'causes') ? 500 : 400,
+              color: (viewMode === 'browse' && exploreMode === 'causes') ? '#111' : '#666',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}
+          >
+            <Lightbulb size={14} />
+            Explore Causes
+          </button>
+          <button
+            onClick={() => {
+              setViewMode('browse');
+              setExploreMode('decisions');
+              setSectorView('public');
+            }}
+            style={{
+              padding: '10px 20px',
+              borderRadius: 8,
+              fontSize: 15,
+              cursor: 'pointer',
+              border: '1px solid',
+              borderColor: (viewMode === 'browse' && exploreMode === 'decisions') ? '#888' : '#ddd',
+              background: (viewMode === 'browse' && exploreMode === 'decisions') ? '#f5f5f2' : 'white',
+              fontWeight: (viewMode === 'browse' && exploreMode === 'decisions') ? 500 : 400,
+              color: (viewMode === 'browse' && exploreMode === 'decisions') ? '#111' : '#666',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}
+          >
+            <Building2 size={14} />
+            Explore Decisions
+          </button>
+          <button
+            onClick={() => {
+              setViewMode('browse');
+              setExploreMode('organizations');
+              setSectorView('all');
+            }}
+            style={{
+              padding: '10px 20px',
+              borderRadius: 8,
+              fontSize: 15,
+              cursor: 'pointer',
+              border: '1px solid',
+              borderColor: (viewMode === 'browse' && exploreMode === 'organizations') ? '#888' : '#ddd',
+              background: (viewMode === 'browse' && exploreMode === 'organizations') ? '#f5f5f2' : 'white',
+              fontWeight: (viewMode === 'browse' && exploreMode === 'organizations') ? 500 : 400,
+              color: (viewMode === 'browse' && exploreMode === 'organizations') ? '#111' : '#666',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}
+          >
+            <Heart size={14} />
+            Explore Organizations
+          </button>
+        </div>
+        </div>
+      </div>
+
+      {/* Main Content Area */}
+      <div style={{ maxWidth: 1200, margin: '0 auto', padding: 24 }}>
+
+      {/* Search Bar & Quick Filters (show in browse view) */}
+      {viewMode === 'browse' && (
+        <div style={{
+          background: 'white',
+          border: '1px solid #eee',
+          borderRadius: 12,
+          padding: 16,
+          marginBottom: 16,
+          boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
+        }}>
+          {/* Quick Filters */}
+          <div style={{
+            display: 'flex',
+            gap: 16,
+            flexWrap: 'wrap',
+            alignItems: 'center'
+          }}>
+            {/* Date Range Quick Filter */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <Calendar size={14} style={{ color: '#666' }} />
+              <span style={{ fontSize: 13, color: '#666', fontWeight: 500 }}>Date:</span>
+              <div style={{ display: 'flex', gap: 4 }}>
+                {['all', '7days', '30days', '90days'].map(filter => (
+                  <button
+                    key={filter}
+                    onClick={() => handleQuickDateFilter(filter)}
+                    style={{
+                      padding: '6px 12px',
+                      fontSize: 12,
+                      fontWeight: 500,
+                      border: '1px solid',
+                      borderColor: quickDateFilter === filter ? '#059669' : '#ddd',
+                      background: quickDateFilter === filter ? '#dcfce7' : 'white',
+                      color: quickDateFilter === filter ? '#059669' : '#666',
+                      borderRadius: 6,
+                      cursor: 'pointer',
+                      transition: 'all 0.2s'
+                    }}
+                  >
+                    {filter === 'all' ? 'All Time' :
+                     filter === '7days' ? 'Last 7 Days' :
+                     filter === '30days' ? 'Last 30 Days' : 'Last 90 Days'}
+                  </button>
+                ))}
+              </div>
+            </div>
+            
+            {/* Topic Quick Filter */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <Filter size={14} style={{ color: '#666' }} />
+              <span style={{ fontSize: 13, color: '#666', fontWeight: 500 }}>Topic:</span>
+              <div style={{ display: 'flex', gap: 4 }}>
+                {[
+                  { id: 'all', label: 'All' },
+                  { id: 'public-health', label: 'Health' },
+                  { id: 'education', label: 'Education' },
+                  { id: 'infrastructure', label: 'Infrastructure' },
+                  { id: 'safety', label: 'Safety' }
+                ].map(topic => (
+                  <button
+                    key={topic.id}
+                    onClick={() => handleQuickTopicFilter(topic.id)}
+                    style={{
+                      padding: '6px 12px',
+                      fontSize: 12,
+                      fontWeight: 500,
+                      border: '1px solid',
+                      borderColor: quickTopicFilter === topic.id ? '#059669' : '#ddd',
+                      background: quickTopicFilter === topic.id ? '#dcfce7' : 'white',
+                      color: quickTopicFilter === topic.id ? '#059669' : '#666',
+                      borderRadius: 6,
+                      cursor: 'pointer',
+                      transition: 'all 0.2s'
+                    }}
+                  >
+                    {topic.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            
+            {/* Clear All Filters */}
+            {(searchQuery || quickDateFilter !== 'all' || quickTopicFilter !== 'all' || 
+              selectedPatterns.length > 0 || selectedResources.length > 0) && (
+              <button
+                onClick={handleClearFilters}
+                style={{
+                  padding: '6px 12px',
+                  fontSize: 12,
+                  fontWeight: 500,
+                  border: '1px solid #D85A30',
+                  background: 'white',
+                  color: '#D85A30',
+                  borderRadius: 6,
+                  cursor: 'pointer',
+                  marginLeft: 'auto'
+                }}
+              >
+                Clear All
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Filters (show in browse view for decisions only) */}
+      {viewMode === 'browse' && exploreMode === 'decisions' && (
+        <TopicNavigation
+          selectedTopics={selectedTopics}
+          selectedPatterns={selectedPatterns}
+          selectedResources={selectedResources}
+          startDate={startDate}
+          endDate={endDate}
+          onTopicToggle={handleTopicToggle}
+          onPatternToggle={handlePatternToggle}
+          onResourceToggle={handleResourceToggle}
+          onStartDateChange={setStartDate}
+          onEndDateChange={setEndDate}
+          onClearAll={handleClearFilters}
+        />
+      )}
+
+      {/* Content */}
+      {viewMode === 'home' ? (
+        <HomePage 
+          onPersonaSelect={handlePersonaSelect}
+          onTopicSelect={handleTopicSelect}
+          onSectorSelect={handleSectorSelect}
+          decisionsCount={exampleDecisions.length}
+          nonprofitsCount={exampleNonprofits.filter(org => !org.ntee_code.startsWith('X')).length}
+          churchesCount={exampleNonprofits.filter(org => org.ntee_code.startsWith('X')).length}
+        />
+      ) : viewMode === 'impact' ? (
+        <div style={{ 
+          background: 'white', 
+          border: '1px solid #eee', 
+          borderRadius: 12, 
+          padding: '1.5rem',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
+        }}>
+          <button
+            onClick={handleBackToHome}
+            style={{
+              fontSize: 13,
+              color: '#666',
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              marginBottom: 16,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4
+            }}
+          >
+            ← Back to Home
+          </button>
+          <ImpactDashboard persona={selectedPersona} topic={selectedTopic} />
+        </div>
+      ) : viewMode === 'split-screen' ? (
+        <div style={{ 
+          background: 'white', 
+          border: '1px solid #eee', 
+          borderRadius: 12, 
+          padding: '1.5rem',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
+        }}>
+          <button
+            onClick={() => setViewMode('browse')}
+            style={{
+              fontSize: 13,
+              color: '#666',
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              marginBottom: 16,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4
+            }}
+          >
+            ← Back to Decisions
+          </button>
+          <div style={{
+            fontSize: 12,
+            fontWeight: 600,
+            color: '#059669',
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+            marginBottom: 8
+          }}>
+            Split-Screen Analysis
+          </div>
+          <h2 style={{
+            fontSize: 22,
+            fontWeight: 600,
+            color: '#111',
+            marginBottom: 16
+          }}>
+            Government Decision ↔ Community Response
+          </h2>
+          <SplitScreenView 
+            decision={selectedDecision} 
+            nonprofits={exampleNonprofits}
+          />
+        </div>
+      ) : (
+        <div style={{
+          background: 'white',
+          border: '1px solid #eee',
+          borderRadius: 12,
+          padding: '1.5rem',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
+        }}>
+          <h2 style={{
+            fontSize: 20,
+            fontWeight: 500,
+            marginBottom: 16
+          }}>
+            {exploreMode === 'decisions' ? 'Explore Decisions' : exploreMode === 'organizations' ? 'Explore Organizations' : 'Explore Causes'}
+            {sectorView !== 'all' && sectorView !== 'public' && exploreMode !== 'causes' && (
+              <span style={{ color: '#999', fontWeight: 400 }}>
+                {' '}› {sectorView === 'nonprofits' ? 'Nonprofits' : 'Churches'}
+              </span>
+            )}
+          </h2>
+          
+          {/* Sector Filter Buttons */}
+          {exploreMode === 'decisions' && (
+            <div style={{
+              display: 'flex',
+              gap: 8,
+              marginBottom: 20,
+              padding: 16,
+              background: '#f9fafb',
+              borderRadius: 8,
+              flexWrap: 'wrap'
+            }}>
+              <button
+                onClick={() => setSectorView('public')}
+                style={{
+                  padding: '10px 16px',
+                  borderRadius: 6,
+                  fontSize: 14,
+                  fontWeight: 500,
+                  cursor: 'pointer',
+                  border: '1px solid',
+                  borderColor: sectorView === 'public' ? '#185FA5' : '#ddd',
+                  background: sectorView === 'public' ? '#EFF6FF' : 'white',
+                  color: sectorView === 'public' ? '#185FA5' : '#666',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 6
+                }}
+              >
+                <Building2 size={14} />
+                Public Sector ({filteredDecisions.length})
+              </button>
+            </div>
+          )}
+          
+          {exploreMode === 'organizations' && (
+          <div style={{
+            display: 'flex',
+            gap: 8,
+            marginBottom: 20,
+            padding: 16,
+            background: '#f9fafb',
+            borderRadius: 8,
+            flexWrap: 'wrap'
+          }}>
+            <button
+              onClick={() => setSectorView('all')}
+              style={{
+                padding: '10px 16px',
+                borderRadius: 6,
+                fontSize: 14,
+                fontWeight: 500,
+                cursor: 'pointer',
+                border: '1px solid',
+                borderColor: sectorView === 'all' ? '#059669' : '#ddd',
+                background: sectorView === 'all' ? '#dcfce7' : 'white',
+                color: sectorView === 'all' ? '#059669' : '#666',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6
+              }}
+            >
+              <Grid size={14} />
+              All Organizations
+            </button>
+            <button
+              onClick={() => setSectorView('nonprofits')}
+              style={{
+                padding: '10px 16px',
+                borderRadius: 6,
+                fontSize: 14,
+                fontWeight: 500,
+                cursor: 'pointer',
+                border: '1px solid',
+                borderColor: sectorView === 'nonprofits' ? '#059669' : '#ddd',
+                background: sectorView === 'nonprofits' ? '#dcfce7' : 'white',
+                color: sectorView === 'nonprofits' ? '#059669' : '#666',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6
+              }}
+            >
+              <Heart size={14} />
+              Nonprofits ({filteredNonprofits.filter(org => !org.ntee_code.startsWith('X')).length})
+            </button>
+            <button
+              onClick={() => setSectorView('churches')}
+              style={{
+                padding: '10px 16px',
+                borderRadius: 6,
+                fontSize: 14,
+                fontWeight: 500,
+                cursor: 'pointer',
+                border: '1px solid',
+                borderColor: sectorView === 'churches' ? '#A855F7' : '#ddd',
+                background: sectorView === 'churches' ? '#FAF5FF' : 'white',
+                color: sectorView === 'churches' ? '#A855F7' : '#666',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6
+              }}
+            >
+              <Church size={14} />
+              Churches ({filteredNonprofits.filter(org => org.ntee_code.startsWith('X')).length})
+            </button>
+          </div>
+          )}
+          
+          {/* Public Sector Decisions */}
+          {exploreMode === 'decisions' && (
+            <div>
+              {filteredDecisions.length === 0 ? (
+                <div style={{
+                  textAlign: 'center',
+                  padding: '2rem',
+                  color: '#999',
+                  background: '#f9fafb',
+                  borderRadius: 8
+                }}>
+                  <p style={{ fontSize: 15, marginBottom: 8 }}>
+                    No government decisions match your filters
+                  </p>
+                  <button
+                    onClick={handleClearFilters}
+                    style={{
+                      fontSize: 14,
+                      color: '#D85A30',
+                      background: 'none',
+                      border: 'none',
+                      cursor: 'pointer',
+                      textDecoration: 'underline'
+                    }}
+                  >
+                    Clear all filters
+                  </button>
+                </div>
+              ) : (
+                <>
+                  <div style={{ fontSize: 14, color: '#888', marginBottom: 12 }}>
+                    Showing {filteredDecisions.length} decision{filteredDecisions.length !== 1 ? 's' : ''}
+                  </div>
+                  {filteredDecisions.map((decision, i) => (
+                    <DecisionCard
+                      key={i}
+                      decision={decision}
+                      onClick={() => handleDecisionClick(decision)}
+                    />
+                  ))}
+                </>
+              )}
+            </div>
+          )}
+          
+          {/* Nonprofits Section */}
+          {exploreMode === 'organizations' && (sectorView === 'all' || sectorView === 'nonprofits') && (
+            <div style={{ marginBottom: sectorView === 'all' ? 32 : 0 }}>
+              {sectorView === 'all' && (
+                <h3 style={{
+                  fontSize: 18,
+                  fontWeight: 600,
+                  color: '#059669',
+                  marginBottom: 16,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8
+                }}>
+                  <Heart size={20} />
+                  Nonprofit Organizations
+                </h3>
+              )}
+              {filteredNonprofits.filter(org => !org.ntee_code.startsWith('X')).length === 0 ? (
+                <div style={{
+                  textAlign: 'center',
+                  padding: '2rem',
+                  color: '#999',
+                  background: '#f9fafb',
+                  borderRadius: 8
+                }}>
+                  <p style={{ fontSize: 15 }}>
+                    No nonprofits match your search
+                  </p>
+                </div>
+              ) : (
+                filteredNonprofits
+                  .filter(org => !org.ntee_code.startsWith('X'))
+                  .map((nonprofit, i) => (
+                    <NonprofitCard key={i} nonprofit={nonprofit} isChurch={false} />
+                  ))
+              )}
+            </div>
+          )}
+          
+          {/* Churches Section */}
+          {exploreMode === 'organizations' && (sectorView === 'all' || sectorView === 'churches') && (
+            <div>
+              {sectorView === 'all' && (
+                <h3 style={{
+                  fontSize: 18,
+                  fontWeight: 600,
+                  color: '#A855F7',
+                  marginBottom: 16,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8
+                }}>
+                  <Church size={20} />
+                  Faith-Based Organizations
+                </h3>
+              )}
+              {filteredNonprofits.filter(org => org.ntee_code.startsWith('X')).length === 0 ? (
+                <div style={{
+                  textAlign: 'center',
+                  padding: '2rem',
+                  color: '#999',
+                  background: '#f9fafb',
+                  borderRadius: 8
+                }}>
+                  <p style={{ fontSize: 15 }}>
+                    No churches match your search
+                  </p>
+                </div>
+              ) : (
+                filteredNonprofits
+                  .filter(org => org.ntee_code.startsWith('X'))
+                  .map((church, i) => (
+                    <NonprofitCard key={i} nonprofit={church} isChurch={true} />
+                  ))
+              )}
+            </div>
+          )}
+          
+          {/* Causes Section */}
+          {exploreMode === 'causes' && (
+            <div>
+              <div style={{
+                textAlign: 'center',
+                padding: '3rem 2rem',
+                color: '#666',
+                background: '#f9fafb',
+                borderRadius: 12,
+                border: '2px dashed #ddd'
+              }}>
+                <Lightbulb size={48} style={{ color: '#D85A30', marginBottom: 16 }} />
+                <h3 style={{
+                  fontSize: 20,
+                  fontWeight: 600,
+                  color: '#111',
+                  marginBottom: 12
+                }}>
+                  Explore Root Causes
+                </h3>
+                <p style={{ fontSize: 15, lineHeight: 1.6, maxWidth: 600, margin: '0 auto', marginBottom: 16 }}>
+                  Discover the underlying factors driving policy decisions in your community. 
+                  Understand the connections between social determinants, community needs, and government actions.
+                </p>
+                <p style={{ fontSize: 14, color: '#999', fontStyle: 'italic' }}>
+                  Coming soon: Interactive cause analysis and trend mapping
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      </div>
+      </div>
+
+      {/* Location Selection Modal */}
+      {showLocationModal && (
+        <div style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: 'rgba(0,0,0,0.5)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: 2000
+        }}>
+          <div style={{
+            background: 'white',
+            borderRadius: 12,
+            padding: 32,
+            maxWidth: 500,
+            width: '90%',
+            boxShadow: '0 10px 40px rgba(0,0,0,0.2)'
+          }}>
+            <h2 style={{
+              fontSize: 22,
+              fontWeight: 600,
+              marginBottom: 8,
+              color: '#111'
+            }}>
+              Select Your Jurisdiction
+            </h2>
+            <p style={{
+              color: '#666',
+              fontSize: 14,
+              marginBottom: 24
+            }}>
+              Choose the level and location to see relevant decisions and organizations.
+            </p>
+
+            <div style={{ marginBottom: 16 }}>
+              <label style={{
+                display: 'block',
+                fontSize: 14,
+                fontWeight: 500,
+                marginBottom: 8,
+                color: '#111'
+              }}>
+                Jurisdiction Level
+              </label>
+              <select
+                value={tempJurisdictionType}
+                onChange={(e) => setTempJurisdictionType(e.target.value)}
+                style={{
+                  width: '100%',
+                  padding: '10px 12px',
+                  fontSize: 15,
+                  border: '1px solid #ddd',
+                  borderRadius: 6,
+                  outline: 'none',
+                  cursor: 'pointer'
+                }}
+                onFocus={(e) => e.target.style.borderColor = '#059669'}
+                onBlur={(e) => e.target.style.borderColor = '#ddd'}
+              >
+                <option value="nation">Nation</option>
+                <option value="state">State</option>
+                <option value="county">County</option>
+                <option value="city">City</option>
+                <option value="school-district">School District</option>
+              </select>
+            </div>
+
+            {tempJurisdictionType !== 'nation' && (
+              <div style={{ marginBottom: 16 }}>
+                <label style={{
+                  display: 'block',
+                  fontSize: 14,
+                  fontWeight: 500,
+                  marginBottom: 8,
+                  color: '#111'
+                }}>
+                  {tempJurisdictionType === 'state' ? 'State' :
+                   tempJurisdictionType === 'county' ? 'County Name' :
+                   tempJurisdictionType === 'school-district' ? 'School District Name' :
+                   'City Name'}
+                </label>
+                <input
+                  type="text"
+                  value={tempJurisdictionName}
+                  onChange={(e) => setTempJurisdictionName(e.target.value)}
+                  placeholder={
+                    tempJurisdictionType === 'state' ? 'e.g., Alabama' :
+                    tempJurisdictionType === 'county' ? 'e.g., Tuscaloosa' :
+                    tempJurisdictionType === 'school-district' ? 'e.g., Tuscaloosa City Schools' :
+                    'e.g., Tuscaloosa'
+                  }
+                  style={{
+                    width: '100%',
+                    padding: '10px 12px',
+                    fontSize: 15,
+                    border: '1px solid #ddd',
+                    borderRadius: 6,
+                    outline: 'none'
+                  }}
+                  onFocus={(e) => e.target.style.borderColor = '#059669'}
+                  onBlur={(e) => e.target.style.borderColor = '#ddd'}
+                />
+              </div>
+            )}
+
+            {tempJurisdictionType !== 'nation' && tempJurisdictionType !== 'state' && (
+              <div style={{ marginBottom: 24 }}>
+                <label style={{
+                  display: 'block',
+                  fontSize: 14,
+                  fontWeight: 500,
+                  marginBottom: 8,
+                  color: '#111'
+                }}>
+                  State
+                </label>
+                <input
+                  type="text"
+                  value={tempJurisdictionState}
+                  onChange={(e) => setTempJurisdictionState(e.target.value)}
+                  placeholder="e.g., AL"
+                  maxLength="2"
+                  style={{
+                    width: '100%',
+                    padding: '10px 12px',
+                    fontSize: 15,
+                    border: '1px solid #ddd',
+                    borderRadius: 6,
+                    outline: 'none',
+                    textTransform: 'uppercase'
+                  }}
+                  onFocus={(e) => e.target.style.borderColor = '#059669'}
+                  onBlur={(e) => e.target.style.borderColor = '#ddd'}
+                />
+              </div>
+            )}
+
+            {tempJurisdictionType === 'state' && (
+              <div style={{ marginBottom: 24 }}>
+                <label style={{
+                  display: 'block',
+                  fontSize: 14,
+                  fontWeight: 500,
+                  marginBottom: 8,
+                  color: '#111'
+                }}>
+                  State Code
+                </label>
+                <input
+                  type="text"
+                  value={tempJurisdictionState}
+                  onChange={(e) => setTempJurisdictionState(e.target.value)}
+                  placeholder="e.g., AL"
+                  maxLength="2"
+                  style={{
+                    width: '100%',
+                    padding: '10px 12px',
+                    fontSize: 15,
+                    border: '1px solid #ddd',
+                    borderRadius: 6,
+                    outline: 'none',
+                    textTransform: 'uppercase'
+                  }}
+                  onFocus={(e) => e.target.style.borderColor = '#059669'}
+                  onBlur={(e) => e.target.style.borderColor = '#ddd'}
+                />
+              </div>
+            )}
+
+            <div style={{
+              display: 'flex',
+              gap: 12,
+              justifyContent: 'flex-end'
+            }}>
+              <button
+                onClick={() => setShowLocationModal(false)}
+                style={{
+                  padding: '10px 20px',
+                  fontSize: 15,
+                  border: '1px solid #ddd',
+                  background: 'white',
+                  borderRadius: 6,
+                  cursor: 'pointer',
+                  color: '#666'
+                }}
+              >
+                Cancel
+              </button>
+              <button
+                onClick={() => {
+                  setJurisdictionType(tempJurisdictionType);
+                  setJurisdictionName(tempJurisdictionName);
+                  setJurisdictionState(tempJurisdictionState);
+                  setShowLocationModal(false);
+                }}
+                style={{
+                  padding: '10px 20px',
+                  fontSize: 15,
+                  border: 'none',
+                  background: '#059669',
+                  color: 'white',
+                  borderRadius: 6,
+                  cursor: 'pointer',
+                  fontWeight: 500
+                }}
+              >
+                Save Location
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/policy-dashboards/src/App.jsx.backup

@@ -0,0 +1 @@
+// Backup of corrupted file - see App.jsx for clean version

frontend/policy-dashboards/src/App.jsx.corrupted

@@ -0,0 +1,553 @@
+import React, { useState } from 'react';
+import HomePage from './components/HomePage';
+import ImpactDashboard from './components/ImpactDashboard';
+import TopicNavigation from './components/TopicNavigation';
+import Summary from './components/Summary';
+import WordsVsDollars from './components/WordsVsDollars';
+import EndlessStudyLoop from './components/EndlessStudyLoop';
+import WhereMoneyWent from './components/WhereMoneyWent';
+import WhoIsInCharge from './components/WhoIsInCharge';
+import FilterPanel from './components/shared/FilterPanel';
+import DecisionCard from './components/shared/DecisionCard';
+import { metadata } from './data/dashboardData';
+import { Home, Layout, Grid, List, BarChart3 } from 'lucide-react';
+
+const tabs = [
+  { id: 0, label: 'Summary', component: Summary },
+  { id: 1, label: 'They cut health spending while praising wellness', component: WordsVsDollars },
+  { id: 2, label: 'Delayed 6 months and counting', component: EndlessStudyLoop },
+  { id: 3, label: 'What got funded instead', component: WhereMoneyWent },
+  { id: 4, label: 'One memo beat 240 residents', component: WhoIsInCharge },
+];
+
+export default function App() {
+  const [active, setActive] = useState(0);
+  const [viewMode, setViewMode] = useState('home'); // 'home', 'impact', 'dashboards', 'decisions', 'browse'
+  const [selectedPersona, setSelectedPersona] = useState(null);
+  const [selectedTopic, setSelectedTopic] = useState(null);
+  const [selectedDomains, setSelectedDomains] = useState([]);
+  const [selectedTopics, setSelectedTopics] = useState([]);
+  const [selectedPatterns, setSelectedPatterns] = useState([]);
+  const [selectedResources, setSelectedResources] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  const handlePersonaSelect = (persona, topic) => {
+    setSelectedPersona(persona);
+    setSelectedTopic(topic);
+    setViewMode('impact');
+  };
+  
+  const handleTopicSelect = (topicId) => {
+    setSelectedTopics([topicId]);
+    setViewMode('browse');
+  };
+  
+  const handleDomainToggle = (domainId) => {
+    setSelectedDomains(prev => 
+      prev.includes(domainId) 
+        ? prev.filter(d => d !== domainId)
+        : [...prev, domainId]
+    );
+  };
+  
+  const handleTopicToggle = (topicId) => {
+    setSelectedTopics(prev =>
+      prev.includes(topicId)
+        ? prev.filter(t => t !== topicId)
+        : [...prev, topicId]
+    );
+  };
+  
+  const handlePatternToggle = (patternId) => {
+    setSelectedPatterns(prev =>
+      prev.includes(patternId)
+        ? prev.filter(p => p !== patternId)
+        : [...prev, patternId]
+    );
+  };
+  
+  const handleResourceToggle = (resourceId) => {
+    setSelectedResources(prev =>
+      prev.includes(resourceId)
+        ? prev.filter(r => r !== resourceId)
+        : [...prev, resourceId]
+    );
+  };
+  
+  const handleClearFilters = () => {
+    setSelectedDomains([]);
+    setSelectedTopics([]);
+    setSelectedPatterns([]);
+    setSelectedResources([]);
+    setSearchQuery('');
+  };
+  
+  const handleBackToHome = () => {
+    setViewMode('home');
+    setSelectedPersona(null);
+    setSelectedTopic(null);
+  };
+  
+  // Example decision data - would come from Python export
+  const exampleDecisions = [
+    {
+      decision_summary: "Approval of $850,000 athletic turf replacement project",
+      outcome: "Approved",
+      primary_rationale: "Athletic facilities are essential for student engagement and community pride. The current turf is beyond its useful life and poses safety concerns.",
+      supporters: [
+        { name: "Board Member Johnson", role: "Board Member" },
+        { name: "Athletic Director Smith", role: "Staff" }
+      ],
+      opponents: [
+        { name: "Parent Coalition Representative", role: "Public Comment" }
+      ],
+      vote_result: "5-2",
+      meeting_date: "2026-03-15",
+      tradeoffs_discussed: ["Capital funding vs. operational needs", "Visibility vs. academic priorities"],
+      evidence_cited: [{ source: "Facility Assessment Report 2025" }],
+      policy_domain: "facilities"
+    },
+    {
+      decision_summary: "Tabled: West Alabama Community Dental Clinic partnership proposal",
+      outcome: "Deferred",
+      primary_rationale: "Need additional time to review liability implications and insurance coverage requirements before making a final decision.",
+      supporters: [
+        { name: "Health Department Representative", role: "External Partner" },
+        { name: "240+ citizen comments", role: "Public Comment" }
+      ],
+      opponents: [],
+      vote_result: "Motion to table: 6-1",
+      meeting_date: "2026-04-10",
+      tradeoffs_discussed: ["Liability concerns vs. student health needs"],
+      evidence_cited: [
+        { source: "Risk Manager Patricia Johnson memo" },
+        { source: "Insurance policy documentation" }
+      ],
+      policy_domain: "health"
+    },
+    {
+      decision_summary: "Contracted health services budget reduction of $120,000",
+      outcome: "Approved as part of budget",
+      primary_rationale: "Administrative cost increases require reallocation from non-critical service contracts. Health screenings can be covered through existing nurse staff.",
+      supporters: [
+        { name: "CFO Thompson", role: "Staff" },
+        { name: "Budget Committee", role: "Committee" }
+      ],
+      opponents: [
+        { name: "School Nurses Association", role: "Public Comment" }
+      ],
+      vote_result: "7-0",
+      meeting_date: "2026-02-20",
+      tradeoffs_discussed: ["Cost savings vs. preventive health services"],
+      evidence_cited: [{ source: "FY2026 Budget Proposal" }],
+      policy_domain: "budget"
+    }
+  ];
+  
+  // Filter decisions based on search and domains
+  const filteredDecisions = exampleDecisions.filter(decision => {
+    const matchesSearch = searchQuery === '' || 
+      decision.decision_summary.toLowerCase().includes(searchQuery.toLowerCase());
+    
+    const matchesDomain = selectedDomains.length === 0 || 
+      selectedDomains.includes(decision.policy_domain);
+    
+    return matchesSearch && matchesDomain;
+  });
+
+  const ActiveComponent = tabs[active].component;
+
+  return (
+    <div style={{ maxWidth: 1200, margin: '0 auto', padding: 24 }}>
+      {/* Header */}
+      <div style={{ marginBottom: 24 }}>
+        <h1 style={{ fontSize: 20, fontWeight: 600, marginBottom: 4, color: '#111' }}>
+          {metadata.title}
+        </h1>
+        <p style={{ color: '#666', fontSize: 14, lineHeight: 1.5 }}>
+          {metadata.description}
+        </p>
+      </div>
+
+      {/* View Mode Toggle */}
+      <div style={{ 
+        display: 'flex', 
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 16 
+      }}>
+        <div style={{ display: 'flex', gap: 6 }}>
+          <button
+            onClick={() => setViewMode('home')}
+            style={{
+              padding: '8px 16px',
+              borderRadius: 8,
+              fontSize: 13,
+              cursor: 'pointer',
+              border: '1px solid',
+              borderColor: viewMode === 'home' ? '#888' : '#ddd',
+              background: viewMode === 'home' ? '#f5f5f2' : 'white',
+              fontWeight: viewMode === 'home' ? 500 : 400,
+              color: viewMode === 'home' ? '#111' : '#666',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}
+          >
+            <Home size={14} />
+            Home
+          </button>
+          <button
+            onClick={() => setViewMode('browse')}
+            style={{
+              padding: '8px 16px',
+              borderRadius: 8,
+              fontSize: 13,
+              cursor: 'pointer',
+              border: '1px solid',
+              borderColor: viewMode === 'browse' ? '#888' : '#ddd',
+              background: viewMode === 'browse' ? '#f5f5f2' : 'white',
+              fontWeight: viewMode === 'browse' ? 500 : 400,
+              color: viewMode === 'browse' ? '#111' : '#666',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}
+          >
+            <Grid size={14} />
+            Browse by Topic
+          </button>
+          <button
+            onClick={() => setViewMode('dashboards')}
+            style={{
+              padding: '8px 16px',
+              borderRadius: 8,
+              fontSize: 13,
+              cursor: 'pointer',
+              border: '1px solid',
+              borderColor: viewMode === 'dashboards' ? '#888' : '#ddd',
+              background: viewMode === 'dashboards' ? '#f5f5f2' : 'white',
+              fontWeight: viewMode === 'dashboards' ? 500 : 400,
+              color: viewMode === 'dashboards' ? '#111' : '#666',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}
+          >
+            <BarChart3 size={14} />
+            Analysis Dashboards
+          </button>
+          <button
+            onClick={() => setViewMode('decisions')}
+            style={{
+              padding: '8px 16px',
+              borderRadius: 8,
+              fontSize: 13,
+              cursor: 'pointer',
+              border: '1px solid',
+              borderColor: viewMode === 'decisions' ? '#888' : '#ddd',
+              background: viewMode === 'decisions' ? '#f5f5f2' : 'white',
+              fontWeight: viewMode === 'decisions' ? 500 : 400,
+              color: viewMode === 'decisions' ? '#111' : '#666',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}
+          >
+            <List size={14} />
+            Alx', 
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 16 
+      }}>
+        <div style={{ display: 'flex', gap: 6 }}>
+          <button
+            onClick={() => setViewMode('dashboards')}
+            style={{
+          Topic Navigation (show in browse view) */}
+      {viewMode === 'browse' && (
+        <TopicNavigation
+          selectedTopics={selectedTopics}
+          selectedPatterns={selectedPatterns}
+          selectedResources={selectedResources}
+          onTopicToggle={handleTopicToggle}
+          onPatternToggle={handlePatternToggle}
+          onResourceToggle={handleResourceToggle}
+          onClearAll={handleClearFilters}
+        />
+      )}
+
+      {/*     padding: '8px 16px',
+              borderRadius: 8,
+              fontSize: 13,
+              cursor: 'pointer',
+              border: '1px solid',
+              borderColor: viewMode === 'dashboards' ? '#888' : '#ddd',
+              background: viewMode === 'dashboards' ? '#f5f5f2' : 'white',
+              fontWeight: viewMode === 'dashboards' ? 500 : 400,
+              color: viewMode === 'dashboards' ? '#111' : '#666',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}
+          >
+            <Layout size={14} />
+            Dashboards
+          </button>
+          <button
+            onClick={() => setViewMode('decisions')}
+            style={{
+              padding: '8px 16px',
+              borderRadius: 8,
+              fontSize: 13,
+              cursor: 'pointer',
+              border: '1px solid',
+              borderColor: viewMode === 'decisions' ? '#888' : '#ddd',
+              background: viewMode === 'decisions' ? '#f5f5f2' : 'white',
+              fontWeight: viewMode === 'decisions' ? 500 : 400,
+              color: viewMode === 'decisions' ? '#111' : '#666',
+              display: 'flex',
+              alignIthome' ? (
+        <HomePage 
+          onPersonaSelect={handlePersonaSelect}
+          onTopicSelect={handleTopicSelect}
+        />
+      ) : viewMode === 'impact' ? (
+        <div style={{ 
+          background: 'white', 
+          border: '1px solid #eee', 
+          borderRadius: 12, 
+          padding: '1.5rem',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
+        }}>
+          <button
+            onClick={handleBackToHome}
+            style={{
+              fontSize: 13,
+              color: '#666',
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              marginBottom: 16,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4
+            }}
+          >
+            ← Back to Home
+          </button>
+          <ImpactDashboard persona={selectedPersona} topic={selectedTopic} />
+        </div>
+      ) : viewMode === 'browse' ? (
+        <div style={{
+          background: 'white',
+          border: '1px solid #eee',
+          borderRadius: 12,
+          padding: '1.5rem',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
+        }}>
+          <h2 style={{
+            fontSize: 16,
+            fontWeight: 500,
+            marginBottom: 16
+          }}>
+            Browse Decisions by Topic
+          </h2>
+          
+          {filteredDecisions.length === 0 ? (
+            <div style={{
+              textAlign: 'center',
+              padding: '3rem',
+              color: '#999'
+            }}>
+              <p style={{ fontSize: 14, marginBottom: 8 }}>
+                No decisions match your filters
+              </p>
+              <button
+                onClick={handleClearFilters}
+                style={{
+                  fontSize: 13,
+                  color: '#D85A30',
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  textDecoration: 'underline'
+                }}
+              >
+                Clear filters
+              </button>
+            </div>
+          ) : (
+            <>
+              <div style={{ fontSize: 13, color: '#888', marginBottom: 16 }}>
+                {filteredDecisions.length} decision{filteredDecisions.length !== 1 ? 's' : ''} found
+              </div>
+              {filteredDecisions.map((decision, i) => (
+                <DecisionCard
+                  key={i}
+                  decision={decision}
+                  onClick={() => console.log('View decision:', decision)}
+                />
+              ))}
+            </>
+          )}
+        </div>
+      ) : viewMode === 'ems: 'center',
+              gap: 6
+            }}
+          >
+            <List size={14} />
+            Individual Decisions
+          </button>
+        </div>
+      </div>
+
+      {/* Filters (show in decisions view) */}
+      {viewMode === 'decisions' && (
+        <FilterPanel
+          selectedDomains={selectedDomains}
+          onDomainToggle={handleDomainToggle}
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          onClear={handleClearFilters}
+        />
+      )}
+
+      {/* Tab Navigation (show in dashboard view) */}
+      {viewMode === 'dashboards' && (
+        <div style={{ 
+          display: 'flex', 
+          gap: 6, 
+          flexWrap: 'wrap', 
+          marginBottom: 24 
+        }}>
+          {tabs.map((t) => (
+            <button 
+              key={t.id} 
+              onClick={() => setActive(t.id)} 
+              style={{
+                padding: '6px 14px', 
+                borderRadius: 8, 
+                fontSize: 13, 
+                cursor: 'pointer',
+                border: '1px solid', 
+                borderColor: active === t.id ? '#888' : '#ddd',
+                background: active === t.id ? '#f5f5f2' : 'white',
+                fontWeight: active === t.id ? 500 : 400, 
+                color: active === t.id ? '#111' : '#666',
+                transition: 'all 0.2s ease'
+              }}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Content */}
+      {viewMode === 'dashboards' ? (
+        <div style={{ 
+          background: 'white', 
+          border: '1px solid #eee', 
+          borderRadius: 12, 
+          padding: '1.5rem',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
+        }}>
+          <h2 style={{ 
+            fontSize: 14, 
+            textTransform: 'uppercase', 
+            letterSpacing: '0.07em', 
+            color: '#aaa', 
+            marginBottom: 16 
+          }}>
+            {tabs[active].label}
+          </h2>
+          
+          {active === 0 ? (
+            <ActiveComponent onNavigate={handleNavigate} />
+          ) : (
+            <ActiveComponent />
+          )}
+        </div>
+      ) : (
+        <div style={{
+          background: 'white',
+          border: '1px solid #eee',
+          borderRadius: 12,
+          padding: '1.5rem',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
+        }}>
+          <div style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: 16
+          }}>
+            <h2 style={{
+              fontSize: 14,
+              textTransform: 'uppercase',
+              letterSpacing: '0.07em',
+              color: '#aaa'
+            }}>
+              Individual Decisions
+            </h2>
+            <div style={{ fontSize: 13, color: '#888' }}>
+              {filteredDecisions.length} decision{filteredDecisions.length !== 1 ? 's' : ''}
+            </div>
+          </div>
+          
+          {filteredDecisions.length === 0 ? (
+            <div style={{
+              textAlign: 'center',
+              padding: '3rem',
+              color: '#999'
+            }}>
+              <p style={{ fontSize: 14, marginBottom: 8 }}>
+                No decisions match your filters
+              </p>
+              <button
+                onClick={handleClearFilters}
+                style={{
+                  fontSize: 13,
+                  color: '#D85A30',
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  textDecoration: 'underline'
+                }}
+              >
+                Clear filters
+              </button>
+            </div>
+          ) : (
+            filteredDecisions.map((decision, i) => (
+              <DecisionCard
+                key={i}
+                decision={decision}
+                onClick={() => {
+                  // Could open modal or navigate to detail view
+                  console.log('View decision details:', decision);
+                }}
+              />
+            ))
+          )}
+        </div>
+      )}
+
+      {/* Footer */}
+      <div style={{ 
+        marginTop: 24, 
+        textAlign: 'center',
+        fontSize: 11,
+        color: '#999'
+      }}>
+        <p>
+          Generated by <strong>Oral Health Policy Pulse</strong> — Evidence-based advocacy toolkit
+        </p>
+        <p style={{ marginTop: 4 }}>
+          Methodology: Accountability dashboards using public meeting records and budget data
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/EndlessStudyLoop.jsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import MetricCard from './shared/MetricCard';
+import Compare from './shared/Compare';
+import InsightBox from './shared/InsightBox';
+import { logicChainData as d } from '../data/dashboardData';
+
+/**
+ * Dashboard 2: Delayed 6 months and counting
+ * (Logic Chain / Sequential Deferral)
+ */
+export default function EndlessStudyLoop() {
+  return (
+    <div>
+      <p style={{ 
+        fontSize: 14, 
+        color: '#555', 
+        borderLeft: '2px solid #D85A30', 
+        paddingLeft: 12, 
+        marginBottom: 20 
+      }}>
+        {d.conclusion}
+      </p>
+
+      {/* Topic */}
+      <div style={{
+        background: '#f5f5f2',
+        padding: 12,
+        borderRadius: 8,
+        marginBottom: 16
+      }}>
+        <div style={{ fontSize: 11, color: '#999', textTransform: 'uppercase', marginBottom: 4 }}>
+          Policy Decision
+        </div>
+        <div style={{ fontSize: 14, fontWeight: 500, color: '#222' }}>
+          {d.topic}
+        </div>
+      </div>
+
+      {/* Key Metrics */}
+      <div style={{ 
+        display: 'grid', 
+        gridTemplateColumns: '1fr 1fr', 
+        gap: 12, 
+        marginBottom: 20 
+      }}>
+        <MetricCard 
+          value={`${d.totalDeferrals}×`} 
+          label={`Times deferred in ${d.monthsInLimbo} months`}
+          tone="negative" 
+        />
+        <MetricCard 
+          value={new Set(d.justifications.map(j => j.reason)).size} 
+          label="Distinct justifications used" 
+        />
+      </div>
+
+      {/* The "Study" Loop Timeline */}
+      <div style={{ marginBottom: 20 }}>
+        <h4 style={{ 
+          fontSize: 12, 
+          textTransform: 'uppercase', 
+          letterSpacing: '0.05em', 
+          color: '#999',
+          marginBottom: 12
+        }}>
+          Shifting Justifications
+        </h4>
+        
+        <div style={{ position: 'relative', paddingLeft: 24 }}>
+          {/* Vertical timeline line */}
+          <div style={{ 
+            position: 'absolute', 
+            left: 7, 
+            top: 8, 
+            bottom: 8, 
+            width: 1, 
+            background: '#ddd' 
+          }} />
+          
+          {d.justifications.map((item, i) => (
+            <div key={i} style={{ position: 'relative', marginBottom: 18 }}>
+              {/* Timeline dot */}
+              <div style={{ 
+                position: 'absolute', 
+                left: -20, 
+                top: 4, 
+                width: 8, 
+                height: 8, 
+                borderRadius: '50%', 
+                background: item.status === 'deferred' ? '#D85A30' : '#BA7517',
+                border: '1.5px solid',
+                borderColor: item.status === 'deferred' ? '#D85A30' : '#BA7517'
+              }} />
+              
+              {/* Timeline content */}
+              <div style={{ fontSize: 11, color: '#999', marginBottom: 2 }}>
+                {item.month} — <strong>{item.status}</strong>
+              </div>
+              <div style={{ fontSize: 13, color: '#555' }}>
+                "{item.reason}"
+              </div>
+              {item.speaker && item.speaker !== 'N/A' && (
+                <div style={{ fontSize: 11, color: '#888', fontStyle: 'italic', marginTop: 2 }}>
+                  — {item.speaker}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Benchmark Comparison */}
+      <div style={{ marginTop: 20 }}>
+        <h4 style={{ 
+          fontSize: 12, 
+          textTransform: 'uppercase', 
+          letterSpacing: '0.05em', 
+          color: '#999',
+          marginBottom: 10
+        }}>
+          School-Linked Dental Programs by State Type
+        </h4>
+        <Compare 
+          benchmarks={d.benchmarks} 
+          metric="activePrograms"
+          prefix=""
+          suffix=" states"
+        />
+        <p style={{ 
+          fontSize: 11, 
+          color: '#888',
+          marginTop: 8,
+          textAlign: 'center'
+        }}>
+          Source: ASTDD State Oral Health Program Database, 2025
+        </p>
+      </div>
+
+      {/* The Logic */}
+      <InsightBox type="critical">
+        <strong>{d.patternType}:</strong> {d.inference}
+      </InsightBox>
+
+      {/* Question for the Room */}
+      <div style={{
+        marginTop: 16,
+        padding: 14,
+        background: '#fff',
+        border: '2px solid #D85A30',
+        borderRadius: 8
+      }}>
+        <strong style={{ fontSize: 13, color: '#D85A30' }}>Ask them:</strong>
+        <p style={{ fontSize: 13, color: '#222', marginTop: 6 }}>
+          "This proposal has been 'under review' for {d.monthsInLimbo} months with {d.totalDeferrals} deferrals. 
+          Each time, you give a different reason. {d.benchmarks.republicanAvg.activePrograms} Republican-led states 
+          and {d.benchmarks.democraticAvg.activePrograms} Democratic-led states already have active programs. 
+          What analysis are you waiting for that 35 states haven't already completed?"
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/HomePage.jsx

@@ -0,0 +1,291 @@
+import React from 'react';
+import { TrendingUp, AlertCircle, Users, Scale, Droplet, Building2, Heart, Church, Grid } from 'lucide-react';
+
+/**
+ * HomePage Component - Policy Accountability Platform
+ * Sector-based landing page for citizens
+ */
+export default function HomePage({ onPersonaSelect, onTopicSelect, onSectorSelect }) {
+  return (
+    <div>
+      {/* Top Section: Explore by Sector */}
+      <div style={{
+        background: 'linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)',
+        color: 'white',
+        borderRadius: 12,
+        padding: '2rem',
+        marginBottom: 24
+      }}>
+        <div style={{ marginBottom: 16 }}>
+          <div style={{ fontSize: 13, color: '#aaa', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>
+            Policy Accountability Platform
+          </div>
+          <h1 style={{ fontSize: 28, fontWeight: 500, marginBottom: 12, lineHeight: 1.3 }}>
+            Track Government Decisions & Community Solutions
+          </h1>
+          <p style={{ fontSize: 16, color: '#ccc', lineHeight: 1.6 }}>
+            Explore policy decisions, track accountability, and discover community resources
+          </p>
+        </div>
+
+        {/* Sector Navigation Cards */}
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+          gap: 12,
+          marginTop: 24
+        }}>
+          <SectorCard
+            icon={<Grid size={24} />}
+            title="All Sectors"
+            description="View everything together"
+            color="#059669"
+            onClick={() => onSectorSelect('all')}
+          />
+          <SectorCard
+            icon={<Building2 size={24} />}
+            title="Public Sector"
+            description="Government decisions"
+            color="#185FA5"
+            onClick={() => onSectorSelect('public')}
+          />
+          <SectorCard
+            icon={<Heart size={24} />}
+            title="Nonprofits"
+            description="Community organizations"
+            color="#059669"
+            onClick={() => onSectorSelect('nonprofits')}
+          />
+          <SectorCard
+            icon={<Church size={24} />}
+            title="Churches"
+            description="Faith-based ministries"
+            color="#A855F7"
+            onClick={() => onSectorSelect('churches')}
+          />
+        </div>
+      </div>
+
+      {/* Middle Section: Find Your Impact (Persona Filters) */}
+      <div style={{ marginBottom: 24 }}>
+        <h2 style={{ fontSize: 22, fontWeight: 500, marginBottom: 8 }}>
+          Find Your Impact
+        </h2>
+        <p style={{ fontSize: 16, color: '#666', marginBottom: 16 }}>
+          How are these decisions affecting you?
+        </p>
+
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+          gap: 16
+        }}>
+          <PersonaCard
+            icon="🏠"
+            persona="Parent"
+            concern="Student Dental Health"
+            action="The Learning Barrier Map"
+            onClick={() => onPersonaSelect('parent', 'dental-health')}
+          />
+          <PersonaCard
+            icon="📢"
+            persona="Advocate"
+            concern="Transparency & Vetoes"
+            action="The Influence Radar"
+            onClick={() => onPersonaSelect('advocate', 'transparency')}
+          />
+          <PersonaCard
+            icon="🚰"
+            persona="Resident"
+            concern="Water & Infrastructure"
+            action="The Lifetime Health Tax"
+            onClick={() => onPersonaSelect('resident', 'water-infrastructure')}
+          />
+        </div>
+      </div>
+
+      {/* Bottom Section: Topic Navigation */}
+      <div>
+        <h2 style={{ fontSize: 18, fontWeight: 500, marginBottom: 16 }}>
+          Browse by Topic
+        </h2>
+        
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
+          gap: 12
+        }}>
+          <TopicCard
+            icon={<Scale size={24} />}
+            title="Public Health"
+            subtitle="Dental, Water, Mental Health"
+            count={24}
+            color="#1D9E75"
+            onClick={() => onTopicSelect('public-health')}
+          />
+          <TopicCard
+            icon={<Users size={24} />}
+            title="Education & Youth"
+            subtitle="School Board, Pre-K"
+            count={18}
+            color="#185FA5"
+            onClick={() => onTopicSelect('education')}
+          />
+          <TopicCard
+            icon={<TrendingUp size={24} />}
+            title="Infrastructure"
+            subtitle="Roads, Utilities, Construction"
+            count={32}
+            color="#BA7517"
+            onClick={() => onTopicSelect('infrastructure')}
+          />
+          <TopicCard
+            icon={<Droplet size={24} />}
+            title="Public Safety"
+            subtitle="Police, Fire, EMS"
+            count={15}
+            color="#E24B4A"
+            onClick={() => onTopicSelect('public-safety')}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SectorCard({ icon, title, description, color, onClick }) {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        background: 'rgba(255, 255, 255, 0.1)',
+        border: '1px solid rgba(255, 255, 255, 0.2)',
+        borderRadius: 8,
+        padding: 20,
+        cursor: 'pointer',
+        transition: 'all 0.2s ease',
+        textAlign: 'center'
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)';
+        e.currentTarget.style.borderColor = color;
+        e.currentTarget.style.transform = 'translateY(-4px)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
+        e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.2)';
+        e.currentTarget.style.transform = 'translateY(0)';
+      }}
+    >
+      <div style={{ color: color, marginBottom: 12 }}>
+        {icon}
+      </div>
+      <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4, color: 'white' }}>
+        {title}
+      </div>
+      <div style={{ fontSize: 13, color: '#aaa' }}>
+        {description}
+      </div>
+    </div>
+  );
+}
+
+function PersonaCard({ icon, persona, concern, action, onClick }) {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        background: 'white',
+        border: '2px solid #eee',
+        borderRadius: 12,
+        padding: 20,
+        cursor: 'pointer',
+        transition: 'all 0.2s ease'
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = '#D85A30';
+        e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = '#eee';
+        e.currentTarget.style.boxShadow = 'none';
+      }}
+    >
+      <div style={{ fontSize: 32, marginBottom: 12 }}>{icon}</div>
+      <div style={{ marginBottom: 8 }}>
+        <div style={{ fontSize: 12, color: '#999', marginBottom: 4 }}>
+          I am a...
+        </div>
+        <div style={{ fontSize: 16, fontWeight: 500, color: '#222' }}>
+          {persona}
+        </div>
+      </div>
+      <div style={{ marginBottom: 12 }}>
+        <div style={{ fontSize: 12, color: '#999', marginBottom: 4 }}>
+          I care about...
+        </div>
+        <div style={{ fontSize: 14, color: '#555' }}>
+          {concern}
+        </div>
+      </div>
+      <div style={{
+        fontSize: 13,
+        color: '#D85A30',
+        fontWeight: 500,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6
+      }}>
+        Show me → {action}
+      </div>
+    </div>
+  );
+}
+
+function TopicCard({ icon, title, subtitle, count, color, onClick }) {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        background: 'white',
+        border: '1px solid #eee',
+        borderRadius: 8,
+        padding: 16,
+        cursor: 'pointer',
+        transition: 'all 0.2s ease',
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.borderColor = color;
+        e.currentTarget.style.transform = 'translateY(-2px)';
+        e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.borderColor = '#eee';
+        e.currentTarget.style.transform = 'translateY(0)';
+        e.currentTarget.style.boxShadow = 'none';
+      }}
+    >
+      <div style={{ color }}>{icon}</div>
+      <div style={{ flex: 1 }}>
+        <div style={{ fontSize: 14, fontWeight: 500, color: '#222', marginBottom: 2 }}>
+          {title}
+        </div>
+        <div style={{ fontSize: 11, color: '#888' }}>
+          {subtitle}
+        </div>
+      </div>
+      <div style={{
+        fontSize: 18,
+        fontWeight: 500,
+        color,
+        minWidth: 32,
+        textAlign: 'right'
+      }}>
+        {count}
+      </div>
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/ImpactDashboard.jsx

@@ -0,0 +1,280 @@
+import React from 'react';
+import { XCircle, AlertTriangle, MapPin } from 'lucide-react';
+
+/**
+ * ImpactDashboard Component
+ * Visual impact story for specific persona + topic combination
+ */
+export default function ImpactDashboard({ persona, topic }) {
+  // Example: Parent + Dental Health
+  if (persona === 'parent' && topic === 'dental-health') {
+    return <DentalHealthImpact />;
+  }
+  
+  // Example: Advocate + Transparency
+  if (persona === 'advocate' && topic === 'transparency') {
+    return <TransparencyImpact />;
+  }
+  
+  // Default fallback
+  return <GenericImpact persona={persona} topic={topic} />;
+}
+
+function DentalHealthImpact() {
+  return (
+    <div>
+      {/* Header */}
+      <div style={{ marginBottom: 24 }}>
+        <div style={{ fontSize: 11, color: '#999', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>
+          Impact Story: Parent → Student Dental Health
+        </div>
+        <h2 style={{ fontSize: 20, fontWeight: 500, color: '#222', marginBottom: 8 }}>
+          The School Dental Screening Veto
+        </h2>
+        <p style={{ fontSize: 14, color: '#D85A30', fontWeight: 500 }}>
+          A legal "Risk Rationale" is blocking healthcare for 5,000 students
+        </p>
+      </div>
+
+      {/* The Visual Split */}
+      <div style={{ 
+        display: 'grid', 
+        gridTemplateColumns: '1fr 1fr', 
+        gap: 20,
+        marginBottom: 24
+      }}>
+        {/* Left: The Human Cost */}
+        <div style={{
+          background: 'white',
+          border: '2px solid #eee',
+          borderRadius: 12,
+          padding: 20
+        }}>
+          <div style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: 8,
+            marginBottom: 16
+          }}>
+            <MapPin size={20} color="#D85A30" />
+            <h3 style={{ fontSize: 16, fontWeight: 500, margin: 0 }}>
+              The Human Cost
+            </h3>
+          </div>
+          
+          {/* School Map Placeholder */}
+          <div style={{
+            background: '#f5f5f2',
+            borderRadius: 8,
+            padding: 16,
+            marginBottom: 16,
+            minHeight: 200,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: '#888'
+          }}>
+            <MapPin size={32} color="#D85A30" style={{ marginBottom: 8 }} />
+            <div style={{ fontSize: 13, textAlign: 'center' }}>
+              Map of Tuscaloosa Schools
+            </div>
+            <div style={{ fontSize: 11, textAlign: 'center', marginTop: 4 }}>
+              Red = High dental pain absence rates
+            </div>
+            <div style={{ fontSize: 11, textAlign: 'center', color: '#185FA5' }}>
+              Blue dots = Mobile clinics (currently: 0)
+            </div>
+          </div>
+          
+          {/* Stats */}
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
+            <div style={{ background: '#ffe6e6', borderRadius: 6, padding: 12 }}>
+              <div style={{ fontSize: 20, fontWeight: 500, color: '#D85A30' }}>
+                48%
+              </div>
+              <div style={{ fontSize: 11, color: '#666' }}>
+                Students with no dental visit last year
+              </div>
+            </div>
+            <div style={{ background: '#fff4e6', borderRadius: 6, padding: 12 }}>
+              <div style={{ fontSize: 20, fontWeight: 500, color: '#BA7517' }}>
+                127
+              </div>
+              <div style={{ fontSize: 11, color: '#666' }}>
+                Days missed due to dental pain (2025)
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Right: The Veto */}
+        <div style={{
+          background: 'white',
+          border: '2px solid #eee',
+          borderRadius: 12,
+          padding: 20
+        }}>
+          <div style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: 8,
+            marginBottom: 16
+          }}>
+            <XCircle size={20} color="#E24B4A" />
+            <h3 style={{ fontSize: 16, fontWeight: 500, margin: 0 }}>
+              The Veto Chain
+            </h3>
+          </div>
+          
+          {/* Flowchart */}
+          <div style={{ position: 'relative' }}>
+            {/* Step 1: Public Demand */}
+            <div style={{
+              background: '#e6f4f1',
+              border: '2px solid #1D9E75',
+              borderRadius: 8,
+              padding: 12,
+              marginBottom: 16
+            }}>
+              <div style={{ fontSize: 12, fontWeight: 500, color: '#1D9E75', marginBottom: 4 }}>
+                ✓ Public Demand
+              </div>
+              <div style={{ fontSize: 13, color: '#222' }}>
+                1,200 Signed Petitions
+              </div>
+              <div style={{ fontSize: 11, color: '#666', marginTop: 4 }}>
+                240+ Testimonies at board meetings
+              </div>
+            </div>
+            
+            {/* Arrow */}
+            <div style={{ 
+              textAlign: 'center', 
+              margin: '-8px 0',
+              fontSize: 20,
+              color: '#D85A30',
+              fontWeight: 'bold'
+            }}>
+              ↓ BLOCKED
+            </div>
+            
+            {/* Step 2: The Blocker */}
+            <div style={{
+              background: '#ffe6e6',
+              border: '2px solid #E24B4A',
+              borderRadius: 8,
+              padding: 12,
+              marginBottom: 16,
+              marginTop: 8
+            }}>
+              <div style={{ fontSize: 12, fontWeight: 500, color: '#E24B4A', marginBottom: 4 }}>
+                ✗ The Blocker
+              </div>
+              <div style={{ fontSize: 13, color: '#222', fontWeight: 500 }}>
+                Risk Management Memo
+              </div>
+              <div style={{ fontSize: 11, color: '#666', marginTop: 4 }}>
+                From: Patricia Johnson, District Legal Office
+              </div>
+              <div style={{ fontSize: 11, color: '#666' }}>
+                Concern: "Insurance Liability"
+              </div>
+            </div>
+            
+            {/* Arrow */}
+            <div style={{ 
+              textAlign: 'center', 
+              margin: '-8px 0',
+              fontSize: 20,
+              color: '#888'
+            }}>
+              ↓
+            </div>
+            
+            {/* Step 3: The Result */}
+            <div style={{
+              background: '#f5f5f2',
+              border: '2px solid #888',
+              borderRadius: 8,
+              padding: 12,
+              marginTop: 8
+            }}>
+              <div style={{ fontSize: 12, fontWeight: 500, color: '#888', marginBottom: 4 }}>
+                The Result
+              </div>
+              <div style={{ fontSize: 13, color: '#222' }}>
+                Board votes to "Table" initiative
+              </div>
+              <div style={{ fontSize: 11, color: '#D85A30', marginTop: 4 }}>
+                Status: Deferred for 152 days
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom: Key Fact */}
+      <div style={{
+        background: '#fff4e6',
+        border: '2px solid #BA7517',
+        borderRadius: 12,
+        padding: 16,
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 12
+      }}>
+        <AlertTriangle size={24} color="#BA7517" />
+        <div>
+          <div style={{ fontSize: 14, fontWeight: 500, color: '#222', marginBottom: 4 }}>
+            Key Finding
+          </div>
+          <div style={{ fontSize: 13, color: '#555' }}>
+            Zero successful liability lawsuits in any of the 35 states with active school dental screening programs. 
+            The "risk" cited in the memo has no empirical basis.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TransparencyImpact() {
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <div style={{ fontSize: 11, color: '#999', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>
+          Impact Story: Advocate → Transparency & Vetoes
+        </div>
+        <h2 style={{ fontSize: 20, fontWeight: 500, color: '#222', marginBottom: 8 }}>
+          Who Really Decides?
+        </h2>
+        <p style={{ fontSize: 14, color: '#D85A30', fontWeight: 500 }}>
+          Unelected staff have veto power that outweighs public input
+        </p>
+      </div>
+      
+      <div style={{ fontSize: 13, color: '#666', marginBottom: 16 }}>
+        See the Influence Radar dashboard for detailed analysis →
+      </div>
+    </div>
+  );
+}
+
+function GenericImpact({ persona, topic }) {
+  return (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <div style={{ fontSize: 11, color: '#999', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>
+          Impact Story: {persona} → {topic}
+        </div>
+        <h2 style={{ fontSize: 20, fontWeight: 500, color: '#222', marginBottom: 8 }}>
+          Coming Soon
+        </h2>
+        <p style={{ fontSize: 14, color: '#666' }}>
+          This impact story is being developed. Check back soon or browse other topics.
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/NonprofitCard.jsx

@@ -0,0 +1,290 @@
+import React from 'react';
+import { Heart, Mail, Phone, Globe, Users, DollarSign } from 'lucide-react';
+
+/**
+ * NonprofitCard Component
+ * Displays individual nonprofit or church organization
+ */
+export default function NonprofitCard({ nonprofit, isChurch = false }) {
+  const {
+    name,
+    ein,
+    ntee_code,
+    ntee_description,
+    mission,
+    services = [],
+    annual_budget,
+    students_served,
+    families_served,
+    youth_served,
+    contact,
+    volunteer_opportunities,
+    accepting_board_members
+  } = nonprofit;
+  
+  return (
+    <div style={{
+      background: 'white',
+      border: '1px solid',
+      borderColor: isChurch ? '#A855F7' : '#10b981',
+      borderLeft: `4px solid ${isChurch ? '#A855F7' : '#10b981'}`,
+      borderRadius: 12,
+      padding: 20,
+      marginBottom: 16,
+      boxShadow: '0 1px 3px rgba(0,0,0,0.05)'
+    }}>
+      {/* Header */}
+      <div style={{ marginBottom: 16 }}>
+        <div style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'flex-start',
+          marginBottom: 8
+        }}>
+          <h3 style={{
+            fontSize: 18,
+            fontWeight: 600,
+            color: '#111',
+            lineHeight: 1.4
+          }}>
+            {name}
+          </h3>
+          {isChurch && (
+            <span style={{
+              padding: '4px 10px',
+              borderRadius: 12,
+              background: '#F3E8FF',
+              color: '#A855F7',
+              fontSize: 11,
+              fontWeight: 500
+            }}>
+              ⛪ Faith-Based
+            </span>
+          )}
+        </div>
+        
+        <div style={{
+          fontSize: 12,
+          color: '#666',
+          marginBottom: 8
+        }}>
+          NTEE {ntee_code}: {ntee_description}
+          {ein && <span style={{ marginLeft: 8, color: '#999' }}>• EIN: {ein}</span>}
+        </div>
+        
+        <div style={{
+          fontSize: 15,
+          color: '#444',
+          lineHeight: 1.6,
+          marginBottom: 16
+        }}>
+          {mission}
+        </div>
+      </div>
+      
+      {/* Services */}
+      {services.length > 0 && (
+        <div style={{ marginBottom: 16 }}>
+          <div style={{
+            fontSize: 13,
+            fontWeight: 500,
+            color: isChurch ? '#A855F7' : '#059669',
+            marginBottom: 8
+          }}>
+            Services Provided:
+          </div>
+          <ul style={{
+            margin: 0,
+            paddingLeft: 20,
+            fontSize: 14,
+            color: '#555',
+            lineHeight: 1.8
+          }}>
+            {services.map((service, i) => (
+              <li key={i}>{service}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+      
+      {/* Impact Metrics */}
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
+        gap: 12,
+        marginBottom: 16,
+        padding: 16,
+        background: isChurch ? '#FAF5FF' : '#f0fdf4',
+        borderRadius: 8
+      }}>
+        {students_served > 0 && (
+          <div>
+            <div style={{ fontSize: 11, color: '#666', marginBottom: 4 }}>Students Served</div>
+            <div style={{
+              fontSize: 18,
+              fontWeight: 600,
+              color: isChurch ? '#A855F7' : '#059669',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}>
+              <Users size={16} />
+              {students_served.toLocaleString()}
+            </div>
+          </div>
+        )}
+        {families_served > 0 && (
+          <div>
+            <div style={{ fontSize: 11, color: '#666', marginBottom: 4 }}>Families Served</div>
+            <div style={{
+              fontSize: 18,
+              fontWeight: 600,
+              color: isChurch ? '#A855F7' : '#059669',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}>
+              <Heart size={16} />
+              {families_served.toLocaleString()}
+            </div>
+          </div>
+        )}
+        {youth_served > 0 && (
+          <div>
+            <div style={{ fontSize: 11, color: '#666', marginBottom: 4 }}>Youth Served</div>
+            <div style={{
+              fontSize: 18,
+              fontWeight: 600,
+              color: isChurch ? '#A855F7' : '#059669',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}>
+              <Users size={16} />
+              {youth_served.toLocaleString()}
+            </div>
+          </div>
+        )}
+        <div>
+          <div style={{ fontSize: 11, color: '#666', marginBottom: 4 }}>Annual Budget</div>
+          <div style={{
+            fontSize: 18,
+            fontWeight: 600,
+            color: isChurch ? '#A855F7' : '#059669',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6
+          }}>
+            <DollarSign size={16} />
+            {(annual_budget / 1000).toFixed(0)}K
+          </div>
+        </div>
+      </div>
+      
+      {/* Contact & Actions */}
+      <div style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 8,
+        marginBottom: 12
+      }}>
+        {contact?.website && (
+          <a
+            href={contact.website}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              fontSize: 13,
+              padding: '8px 16px',
+              background: isChurch ? '#A855F7' : '#059669',
+              color: 'white',
+              borderRadius: 6,
+              textDecoration: 'none',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              fontWeight: 500
+            }}
+          >
+            <Globe size={14} />
+            Website
+          </a>
+        )}
+        {contact?.email && (
+          <a
+            href={`mailto:${contact.email}`}
+            style={{
+              fontSize: 13,
+              padding: '8px 16px',
+              background: 'white',
+              color: isChurch ? '#A855F7' : '#059669',
+              border: `1px solid ${isChurch ? '#A855F7' : '#059669'}`,
+              borderRadius: 6,
+              textDecoration: 'none',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              fontWeight: 500
+            }}
+          >
+            <Mail size={14} />
+            Email
+          </a>
+        )}
+        {contact?.phone && (
+          <a
+            href={`tel:${contact.phone}`}
+            style={{
+              fontSize: 13,
+              padding: '8px 16px',
+              background: 'white',
+              color: isChurch ? '#A855F7' : '#059669',
+              border: `1px solid ${isChurch ? '#A855F7' : '#059669'}`,
+              borderRadius: 6,
+              textDecoration: 'none',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              fontWeight: 500
+            }}
+          >
+            <Phone size={14} />
+            Call
+          </a>
+        )}
+      </div>
+      
+      {/* Opportunities */}
+      <div style={{
+        display: 'flex',
+        gap: 8,
+        flexWrap: 'wrap'
+      }}>
+        {volunteer_opportunities && (
+          <span style={{
+            fontSize: 12,
+            padding: '6px 12px',
+            background: isChurch ? '#FAF5FF' : '#dcfce7',
+            color: isChurch ? '#A855F7' : '#059669',
+            borderRadius: 6,
+            fontWeight: 500
+          }}>
+            ✓ Accepting Volunteers
+          </span>
+        )}
+        {accepting_board_members && (
+          <span style={{
+            fontSize: 12,
+            padding: '6px 12px',
+            background: '#fef3c7',
+            color: '#d97706',
+            borderRadius: 6,
+            fontWeight: 500
+          }}>
+            ⭐ Board Seats Available
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/SplitScreenView.jsx

@@ -0,0 +1,375 @@
+import React from 'react';
+import { ExternalLink, Users, DollarSign, Heart, Mail, Phone, Globe } from 'lucide-react';
+
+/**
+ * SplitScreenView Component
+ * Shows government decisions on the left, community nonprofits on the right
+ * Demonstrates the accountability gap and community response
+ */
+export default function SplitScreenView({ decision, nonprofits = [] }) {
+  // Find nonprofits matching this decision's NTEE code
+  const matchingNonprofits = nonprofits.filter(np => 
+    np.ntee_code === decision.ntee_code ||
+    (decision.ntee_code && np.ntee_code?.startsWith(decision.ntee_code[0])) // Match category
+  );
+  
+  const hasGap = decision.community_gap?.nonprofit_filling_gap;
+  
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr',
+      gap: 24,
+      marginTop: 20
+    }}>
+      {/* LEFT RAIL: The Public Sector (Government Decision) */}
+      <div style={{
+        background: 'white',
+        border: '1px solid #eee',
+        borderRadius: 12,
+        padding: 24
+      }}>
+        <div style={{
+          fontSize: 12,
+          fontWeight: 600,
+          color: '#666',
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+          marginBottom: 16
+        }}>
+          🏛️ Public Sector Decision
+        </div>
+        
+        <h3 style={{
+          fontSize: 18,
+          fontWeight: 600,
+          color: '#111',
+          marginBottom: 12,
+          lineHeight: 1.4
+        }}>
+          {decision.decision_summary}
+        </h3>
+        
+        <div style={{
+          background: '#f9f9f7',
+          borderRadius: 8,
+          padding: 16,
+          marginBottom: 16
+        }}>
+          <div style={{
+            fontSize: 13,
+            fontWeight: 500,
+            color: '#BA7517',
+            marginBottom: 8
+          }}>
+            Official Rationale:
+          </div>
+          <div style={{
+            fontSize: 15,
+            color: '#444',
+            lineHeight: 1.5
+          }}>
+            "{decision.primary_rationale}"
+          </div>
+        </div>
+        
+        {hasGap && (
+          <div style={{
+            background: '#FFF5F0',
+            border: '1px solid #D85A30',
+            borderRadius: 8,
+            padding: 16,
+            marginBottom: 16
+          }}>
+            <div style={{
+              fontSize: 14,
+              fontWeight: 500,
+              color: '#D85A30',
+              marginBottom: 6,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6
+            }}>
+              ⚠️ The Accountability Gap
+            </div>
+            <div style={{
+              fontSize: 14,
+              color: '#666',
+              lineHeight: 1.5
+            }}>
+              {decision.community_gap.description}
+            </div>
+          </div>
+        )}
+        
+        <div style={{
+          fontSize: 13,
+          color: '#888',
+          paddingTop: 12,
+          borderTop: '1px solid #eee'
+        }}>
+          <div>Outcome: <strong>{decision.outcome}</strong></div>
+          <div>Vote: {decision.vote_result}</div>
+          <div>Date: {new Date(decision.meeting_date).toLocaleDateString()}</div>
+        </div>
+      </div>
+      
+      {/* RIGHT RAIL: The Community Sector (Nonprofits) */}
+      <div style={{
+        background: 'linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%)',
+        border: '1px solid #10b981',
+        borderRadius: 12,
+        padding: 24
+      }}>
+        <div style={{
+          fontSize: 12,
+          fontWeight: 600,
+          color: '#059669',
+          textTransform: 'uppercase',
+          letterSpacing: '0.05em',
+          marginBottom: 16
+        }}>
+          🤝 Community Sector Response
+        </div>
+        
+        {matchingNonprofits.length === 0 ? (
+          <div style={{
+            textAlign: 'center',
+            padding: '2rem',
+            color: '#666'
+          }}>
+            <p style={{ fontSize: 15, marginBottom: 12 }}>
+              No nonprofits found filling this gap yet.
+            </p>
+            <p style={{ fontSize: 13, color: '#888' }}>
+              NTEE Code: {decision.ntee_code || 'Not classified'}
+            </p>
+          </div>
+        ) : (
+          <>
+            <div style={{
+              fontSize: 15,
+              fontWeight: 500,
+              color: '#059669',
+              marginBottom: 16
+            }}>
+              {matchingNonprofits.length} organization{matchingNonprofits.length !== 1 ? 's' : ''} filling this gap:
+            </div>
+            
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+              {matchingNonprofits.map((nonprofit, i) => (
+                <NonprofitCard key={i} nonprofit={nonprofit} />
+              ))}
+            </div>
+            
+            <div style={{
+              marginTop: 20,
+              padding: 16,
+              background: 'white',
+              borderRadius: 8,
+              fontSize: 13,
+              color: '#666'
+            }}>
+              <div style={{ fontWeight: 500, color: '#059669', marginBottom: 8 }}>
+                💡 Bridge the Gap
+              </div>
+              <ul style={{ margin: 0, paddingLeft: 20, lineHeight: 1.6 }}>
+                <li>Support these organizations with donations or volunteering</li>
+                <li>Join their boards to influence systemic change</li>
+                <li>Cite their work in public meetings to show solutions exist</li>
+              </ul>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function NonprofitCard({ nonprofit }) {
+  return (
+    <div style={{
+      background: 'white',
+      borderRadius: 8,
+      padding: 16,
+      border: '1px solid #10b981'
+    }}>
+      <div style={{ marginBottom: 12 }}>
+        <h4 style={{
+          fontSize: 16,
+          fontWeight: 600,
+          color: '#111',
+          marginBottom: 4
+        }}>
+          {nonprofit.name}
+        </h4>
+        <div style={{
+          fontSize: 12,
+          color: '#666',
+          marginBottom: 8
+        }}>
+          NTEE {nonprofit.ntee_code}: {nonprofit.ntee_description}
+        </div>
+        <div style={{
+          fontSize: 14,
+          color: '#444',
+          lineHeight: 1.5,
+          marginBottom: 12
+        }}>
+          {nonprofit.mission}
+        </div>
+      </div>
+      
+      {/* Services */}
+      <div style={{ marginBottom: 12 }}>
+        <div style={{
+          fontSize: 12,
+          fontWeight: 500,
+          color: '#059669',
+          marginBottom: 6
+        }}>
+          Services Provided:
+        </div>
+        <ul style={{
+          margin: 0,
+          paddingLeft: 20,
+          fontSize: 13,
+          color: '#666',
+          lineHeight: 1.6
+        }}>
+          {nonprofit.services.slice(0, 3).map((service, i) => (
+            <li key={i}>{service}</li>
+          ))}
+        </ul>
+      </div>
+      
+      {/* Impact */}
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: 12,
+        marginBottom: 12,
+        padding: 12,
+        background: '#f0fdf4',
+        borderRadius: 6
+      }}>
+        {nonprofit.students_served && (
+          <div>
+            <div style={{ fontSize: 11, color: '#666' }}>Impact</div>
+            <div style={{ fontSize: 15, fontWeight: 600, color: '#059669' }}>
+              <Users size={14} style={{ display: 'inline', marginRight: 4 }} />
+              {nonprofit.students_served.toLocaleString()} students
+            </div>
+          </div>
+        )}
+        {nonprofit.families_served && (
+          <div>
+            <div style={{ fontSize: 11, color: '#666' }}>Impact</div>
+            <div style={{ fontSize: 15, fontWeight: 600, color: '#059669' }}>
+              <Heart size={14} style={{ display: 'inline', marginRight: 4 }} />
+              {nonprofit.families_served.toLocaleString()} families
+            </div>
+          </div>
+        )}
+        {nonprofit.youth_served && (
+          <div>
+            <div style={{ fontSize: 11, color: '#666' }}>Impact</div>
+            <div style={{ fontSize: 15, fontWeight: 600, color: '#059669' }}>
+              <Users size={14} style={{ display: 'inline', marginRight: 4 }} />
+              {nonprofit.youth_served.toLocaleString()} youth
+            </div>
+          </div>
+        )}
+        <div>
+          <div style={{ fontSize: 11, color: '#666' }}>Annual Budget</div>
+          <div style={{ fontSize: 15, fontWeight: 600, color: '#059669' }}>
+            <DollarSign size={14} style={{ display: 'inline', marginRight: 2 }} />
+            {(nonprofit.annual_budget / 1000).toFixed(0)}K
+          </div>
+        </div>
+      </div>
+      
+      {/* Contact & Actions */}
+      <div style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 8,
+        marginBottom: 12
+      }}>
+        {nonprofit.contact.website && (
+          <a
+            href={nonprofit.contact.website}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              fontSize: 12,
+              padding: '6px 12px',
+              background: '#059669',
+              color: 'white',
+              borderRadius: 6,
+              textDecoration: 'none',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4
+            }}
+          >
+            <Globe size={12} />
+            Website
+          </a>
+        )}
+        {nonprofit.contact.email && (
+          <a
+            href={`mailto:${nonprofit.contact.email}`}
+            style={{
+              fontSize: 12,
+              padding: '6px 12px',
+              background: 'white',
+              color: '#059669',
+              border: '1px solid #059669',
+              borderRadius: 6,
+              textDecoration: 'none',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4
+            }}
+          >
+            <Mail size={12} />
+            Email
+          </a>
+        )}
+      </div>
+      
+      {/* Opportunities */}
+      <div style={{
+        display: 'flex',
+        gap: 8,
+        flexWrap: 'wrap'
+      }}>
+        {nonprofit.volunteer_opportunities && (
+          <span style={{
+            fontSize: 11,
+            padding: '4px 8px',
+            background: '#dcfce7',
+            color: '#059669',
+            borderRadius: 4,
+            fontWeight: 500
+          }}>
+            ✓ Accepting Volunteers
+          </span>
+        )}
+        {nonprofit.accepting_board_members && (
+          <span style={{
+            fontSize: 11,
+            padding: '4px 8px',
+            background: '#fef3c7',
+            color: '#d97706',
+            borderRadius: 4,
+            fontWeight: 500
+          }}>
+            ⭐ Board Seats Available
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/Summary.jsx

@@ -0,0 +1,183 @@
+import React from 'react';
+import { summaryData as d } from '../data/dashboardData';
+import { DashboardGrid } from './shared/DashboardTile';
+
+/**
+ * Summary Dashboard
+ * Overview of all four findings with tile-based navigation
+ */
+export default function Summary({ onNavigate }) {
+  return (
+    <div>
+      {/* Headline */}
+      <div style={{ marginBottom: 24 }}>
+        <h2 style={{ fontSize: 18, fontWeight: 500, color: '#222', marginBottom: 8 }}>
+          {d.headline}
+        </h2>
+        <p style={{ fontSize: 14, color: '#666' }}>
+          {d.subheadline}
+        </p>
+      </div>
+
+      {/* Dashboard Tiles */}
+      <DashboardGrid 
+        dashboards={d.findings} 
+        onNavigate={onNavigate}
+      />
+
+      {/* Legacy Finding Cards - Keep for compact view */}
+      <details style={{ marginBottom: 24 }}>
+        <summary style={{ 
+          cursor: 'pointer', 
+          fontSize: 13, 
+          color: '#888',
+          marginBottom: 12
+        }}>
+          Show compact list view
+        </summary>
+        <div style={{ 
+          display: 'grid', 
+          gap: 12
+        }}>
+          {d.findings.map((finding, i) => (
+            <div 
+              key={finding.id}
+              onClick={() => onNavigate && onNavigate(finding.id)}
+              style={{ 
+                background: '#fff',
+                border: '1px solid #eee',
+                borderLeft: `4px solid ${finding.discomfort >= 9 ? '#D85A30' : '#BA7517'}`,
+                borderRadius: 8,
+                padding: 16,
+                cursor: onNavigate ? 'pointer' : 'default',
+                transition: 'all 0.2s ease'
+              }}
+              onMouseEnter={(e) => {
+                if (onNavigate) {
+                  e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+                  e.currentTarget.style.borderLeftWidth = '6px';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (onNavigate) {
+                  e.currentTarget.style.boxShadow = 'none';
+                  e.currentTarget.style.borderLeftWidth = '4px';
+                }
+              }}
+            >
+            <div style={{ 
+              display: 'flex', 
+              justifyContent: 'space-between', 
+              alignItems: 'flex-start',
+              marginBottom: 8
+            }}>
+              <div>
+                <div style={{ 
+                  fontSize: 11, 
+                  color: '#999', 
+                  textTransform: 'uppercase',
+                  letterSpacing: '0.05em',
+                  marginBottom: 4
+                }}>
+                  Dashboard {finding.id}
+                </div>
+                <div style={{ fontSize: 15, fontWeight: 500, color: '#222' }}>
+                  {finding.title}
+                </div>
+              </div>
+              <div style={{ textAlign: 'right' }}>
+                <div style={{ 
+                  fontSize: 18, 
+                  fontWeight: 500, 
+                  color: finding.discomfort >= 9 ? '#D85A30' : '#BA7517' 
+                }}>
+                  {finding.metric}
+                </div>
+                <div style={{ fontSize: 11, color: '#888' }}>
+                  {finding.context}
+                </div>
+              </div>
+            </div>
+            <p style={{ fontSize: 13, color: '#666', lineHeight: 1.5 }}>
+              {finding.summary}
+            </p>
+            {finding.discomfort >= 9 && (
+              <div style={{ 
+                marginTop: 8,
+                fontSize: 11,
+                color: '#D85A30',
+                fontWeight: 500
+              }}>
+                ⚠️ High accountability impact
+              </div>
+            )}
+          </div>
+        ))}
+        </div>
+      </details>
+
+      {/* How to Use Section */}
+      <div style={{
+        background: '#f5f5f2',
+        borderRadius: 8,
+        padding: 18,
+        marginBottom: 20
+      }}>
+        <h3 style={{ 
+          fontSize: 14, 
+          fontWeight: 500, 
+          color: '#222',
+          marginBottom: 12
+        }}>
+          {d.howToUse.title}
+        </h3>
+        
+        <div style={{ display: 'grid', gap: 12 }}>
+          {d.howToUse.strategies.map((strategy, i) => (
+            <div key={i} style={{ 
+              display: 'grid', 
+              gridTemplateColumns: '1fr 1fr',
+              gap: 12
+            }}>
+              <div>
+                <div style={{ 
+                  fontSize: 11, 
+                  color: '#E24B4A',
+                  fontWeight: 500,
+                  marginBottom: 4
+                }}>
+                  ❌ DON'T: {strategy.dont}
+                </div>
+              </div>
+              <div>
+                <div style={{ 
+                  fontSize: 11, 
+                  color: '#1D9E75',
+                  fontWeight: 500,
+                  marginBottom: 4
+                }}>
+                  ✅ DO: {strategy.do}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Bottom Navigation Hint */}
+      {onNavigate && (
+        <div style={{ 
+          textAlign: 'center',
+          fontSize: 12,
+          color: '#888',
+          padding: 12,
+          background: '#fff',
+          border: '1px dashed #ddd',
+          borderRadius: 8
+        }}>
+          💡 Click any finding above to see the detailed dashboard
+        </div>
+      )}
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/TopicNavigation.jsx

@@ -0,0 +1,511 @@
+import React, { useState } from 'react';
+import { Filter, Video, FileText, DollarSign, BarChart3 } from 'lucide-react';
+
+/**
+ * TopicNavigation Component
+ * Primary and secondary filters for browsing decisions
+ */
+export default function TopicNavigation({ 
+  selectedTopics = [],
+  selectedPatterns = [],
+  selectedResources = [],
+  startDate,
+  endDate,
+  onTopicToggle,
+  onPatternToggle,
+  onResourceToggle,
+  onStartDateChange,
+  onEndDateChange,
+  onClearAll
+}) {
+  const [showFilters, setShowFilters] = useState(true);
+  
+  const topics = [
+    { id: 'public-health', label: 'Public Health', sublabel: 'Dental, Water, Mental Health', color: '#1D9E75' },
+    { id: 'education', label: 'Education & Youth', sublabel: 'School Board, Pre-K', color: '#185FA5' },
+    { id: 'infrastructure', label: 'Infrastructure', sublabel: 'Roads, Utilities, Construction', color: '#BA7517' },
+    { id: 'public-safety', label: 'Public Safety', sublabel: 'Police, Fire, EMS', color: '#E24B4A' }
+  ];
+  
+  const patterns = [
+    { id: 'technocratic-veto', label: 'Technocratic Veto', description: 'Legal/risk managers blocking decisions' },
+    { id: 'sequential-deferral', label: 'Sequential Deferral', description: 'Repeated "tabling for study"' },
+    { id: 'performance-rationale', label: 'Performance Rationale', description: 'Rhetoric not matching funding' }
+  ];
+  
+  const resources = [
+    { id: 'video', label: 'Video Recap', icon: Video },
+    { id: 'budget', label: 'Budget PDF', icon: DollarSign },
+    { id: 'dashboard', label: 'Impact Dashboard', icon: BarChart3 },
+    { id: 'summary', label: 'Summary Notes', icon: FileText }
+  ];
+  
+  const hasActiveFilters = selectedTopics.length > 0 || 
+    selectedPatterns.length > 0 || 
+    selectedResources.length > 0 ||
+    startDate !== null ||
+    endDate !== null;
+  
+  return (
+    <div style={{ marginBottom: 20 }}>
+      {/* Header */}
+      <div style={{ 
+        display: 'flex', 
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 12
+      }}>
+        <button
+          onClick={() => setShowFilters(!showFilters)}
+          style={{
+            padding: '10px 18px',
+            border: '1px solid',
+            borderColor: showFilters ? '#888' : '#ddd',
+            borderRadius: 8,
+            background: showFilters ? '#f5f5f2' : 'white',
+            cursor: 'pointer',
+            fontSize: 15,
+            fontWeight: 500,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            color: showFilters ? '#222' : '#666'
+          }}
+        >
+          <Filter size={14} />
+          Filter & Browse
+          {hasActiveFilters && (
+            <span style={{
+              background: '#D85A30',
+              color: 'white',
+              borderRadius: '50%',
+              width: 18,
+              height: 18,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 10,
+              fontWeight: 600
+            }}>
+              {selectedTopics.length + selectedPatterns.length + selectedResources.length}
+            </span>
+          )}
+        </button>
+        
+        {hasActiveFilters && (
+          <button
+            onClick={onClearAll}
+            style={{
+              padding: '10px 18px',
+              border: '1px solid #ddd',
+              borderRadius: 8,
+              background: 'white',
+              cursor: 'pointer',
+              fontSize: 15,
+              color: '#D85A30'
+            }}
+          >
+            Clear All Filters
+          </button>
+        )}
+      </div>
+      
+      {/* Filter Panel */}
+      {showFilters && (
+        <div style={{
+          background: '#f5f5f2',
+          borderRadius: 12,
+          padding: 18,
+          display: 'grid',
+          gridTemplateColumns: '2fr 1fr 1fr 1fr',
+          gap: 20
+        }}>
+          {/* Primary Navigation: Topics */}
+          <div>
+            <div style={{
+              fontSize: 12,
+              fontWeight: 500,
+              color: '#666',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+              marginBottom: 12
+            }}>
+              Primary Topic / Domain
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+              {topics.map(topic => {
+                const isSelected = selectedTopics.includes(topic.id);
+                return (
+                  <button
+                    key={topic.id}
+                    onClick={() => onTopicToggle(topic.id)}
+                    style={{
+                      padding: '12px 16px',
+                      borderRadius: 8,
+                      border: '2px solid',
+                      borderColor: isSelected ? topic.color : '#ddd',
+                      background: isSelected ? `${topic.color}15` : 'white',
+                      color: '#222',
+                      fontSize: 15,
+                      cursor: 'pointer',
+                      textAlign: 'left',
+                      fontWeight: isSelected ? 500 : 400,
+                      transition: 'all 0.2s ease'
+                    }}
+                  >
+                    <div style={{ fontWeight: 500 }}>{topic.label}</div>
+                    <div style={{ fontSize: 13, color: '#888', marginTop: 2 }}>
+                      {topic.sublabel}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          
+          {/* Secondary Filter: Patterns */}
+          <div>
+            <div style={{
+              fontSize: 12,
+              fontWeight: 500,
+              color: '#666',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+              marginBottom: 12
+            }}>
+              Filter by Pattern
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {patterns.map(pattern => {
+                const isSelected = selectedPatterns.includes(pattern.id);
+                return (
+                  <label
+                    key={pattern.id}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'flex-start',
+                      gap: 8,
+                      padding: 8,
+                      borderRadius: 6,
+                      background: isSelected ? 'white' : 'transparent',
+                      cursor: 'pointer',
+                      transition: 'background 0.2s ease'
+                    }}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={isSelected}
+                      onChange={() => onPatternToggle(pattern.id)}
+                      style={{ marginTop: 2 }}
+                    />
+                    <div style={{ flex: 1 }}>
+                      <div style={{ fontSize: 12, fontWeight: 500, color: '#222' }}>
+                        {pattern.label}
+                      </div>
+                      <div style={{ fontSize: 10, color: '#888', marginTop: 2 }}>
+                        {pattern.description}
+                      </div>
+                    </div>
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+          
+          {/* Tertiary Filter: Resources */}
+          <div>
+            <div style={{
+              fontSize: 12,
+              fontWeight: 500,
+              color: '#666',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+              marginBottom: 12
+            }}>
+              Filter by Resource
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {resources.map(resource => {
+                const isSelected = selectedResources.includes(resource.id);
+                const Icon = resource.icon;
+                return (
+                  <label
+                    key={resource.id}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 8,
+                      padding: 8,
+                      borderRadius: 6,
+                      background: isSelected ? 'white' : 'transparent',
+                      cursor: 'pointer',
+                      transition: 'background 0.2s ease'
+                    }}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={isSelected}
+                      onChange={() => onResourceToggle(resource.id)}
+                    />
+                    <Icon size={16} color={isSelected ? '#D85A30' : '#888'} />
+                    <div style={{ 
+                      fontSize: 14, 
+                      color: isSelected ? '#222' : '#666',
+                      fontWeight: isSelected ? 500 : 400
+                    }}>
+                      {resource.label}
+                    </div>
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+          
+          {/* Time Window Filter */}
+          <div>
+            <div style={{
+              fontSize: 12,
+              fontWeight: 500,
+              color: '#666',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+              marginBottom: 12
+            }}>
+              Time Window
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+              <div>
+                <label style={{ 
+                  fontSize: 10, 
+                  color: '#888', 
+                  display: 'block', 
+                  marginBottom: 4 
+                }}>
+                  From
+                </label>
+                <input
+                  type="date"
+                  value={startDate || ''}
+                  onChange={(e) => onStartDateChange(e.target.value || null)}
+                  style={{
+                    width: '100%',
+                    padding: '6px 8px',
+                    borderRadius: 6,
+                    border: '1px solid',
+                    borderColor: startDate ? '#D85A30' : '#ddd',
+                    fontSize: 12,
+                    background: 'white'
+                  }}
+                />
+              </div>
+              <div>
+                <label style={{ 
+                  fontSize: 10, 
+                  color: '#888', 
+                  display: 'block', 
+                  marginBottom: 4 
+                }}>
+                  To
+                </label>
+                <input
+                  type="date"
+                  value={endDate || ''}
+                  onChange={(e) => onEndDateChange(e.target.value || null)}
+                  style={{
+                    width: '100%',
+                    padding: '6px 8px',
+                    borderRadius: 6,
+                    border: '1px solid',
+                    borderColor: endDate ? '#D85A30' : '#ddd',
+                    fontSize: 12,
+                    background: 'white'
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      
+      {/* Active Filters Display */}
+      {hasActiveFilters && (
+        <div style={{
+          marginTop: 12,
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 6,
+          alignItems: 'center'
+        }}>
+          <span style={{ fontSize: 11, color: '#888' }}>Active filters:</span>
+          {selectedTopics.map(topicId => {
+            const topic = topics.find(t => t.id === topicId);
+            return (
+              <span
+                key={topicId}
+                style={{
+                  fontSize: 11,
+                  padding: '4px 10px',
+                  borderRadius: 12,
+                  background: topic.color,
+                  color: 'white',
+                  fontWeight: 500,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 4
+                }}
+              >
+                {topic.label}
+                <button
+                  onClick={() => onTopicToggle(topicId)}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    color: 'white',
+                    cursor: 'pointer',
+                    padding: 0,
+                    fontSize: 14,
+                    lineHeight: 1
+                  }}
+                >
+                  ×
+                </button>
+              </span>
+            );
+          })}
+          {selectedPatterns.map(patternId => {
+            const pattern = patterns.find(p => p.id === patternId);
+            return (
+              <span
+                key={patternId}
+                style={{
+                  fontSize: 11,
+                  padding: '4px 10px',
+                  borderRadius: 12,
+                  background: '#BA7517',
+                  color: 'white',
+                  fontWeight: 500,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 4
+                }}
+              >
+                {pattern.label}
+                <button
+                  onClick={() => onPatternToggle(patternId)}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    color: 'white',
+                    cursor: 'pointer',
+                    padding: 0,
+                    fontSize: 14,
+                    lineHeight: 1
+                  }}
+                >
+                  ×
+                </button>
+              </span>
+            );
+          })}
+          {selectedResources.map(resourceId => {
+            const resource = resources.find(r => r.id === resourceId);
+            return (
+              <span
+                key={resourceId}
+                style={{
+                  fontSize: 11,
+                  padding: '4px 10px',
+                  borderRadius: 12,
+                  background: '#185FA5',
+                  color: 'white',
+                  fontWeight: 500,
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 4
+                }}
+              >
+                {resource.label}
+                <button
+                  onClick={() => onResourceToggle(resourceId)}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    color: 'white',
+                    cursor: 'pointer',
+                    padding: 0,
+                    fontSize: 14,
+                    lineHeight: 1
+                  }}
+                >
+                  ×
+                </button>
+              </span>
+            );
+          })}
+          {startDate && (
+            <span
+              style={{
+                fontSize: 11,
+                padding: '4px 10px',
+                borderRadius: 12,
+                background: '#666',
+                color: 'white',
+                fontWeight: 500,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4
+              }}
+            >
+              From: {new Date(startDate).toLocaleDateString()}
+              <button
+                onClick={() => onStartDateChange(null)}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: 'white',
+                  cursor: 'pointer',
+                  padding: 0,
+                  fontSize: 14,
+                  lineHeight: 1
+                }}
+              >
+                ×
+              </button>
+            </span>
+          )}
+          {endDate && (
+            <span
+              style={{
+                fontSize: 11,
+                padding: '4px 10px',
+                borderRadius: 12,
+                background: '#666',
+                color: 'white',
+                fontWeight: 500,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4
+              }}
+            >
+              To: {new Date(endDate).toLocaleDateString()}
+              <button
+                onClick={() => onEndDateChange(null)}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: 'white',
+                  cursor: 'pointer',
+                  padding: 0,
+                  fontSize: 14,
+                  lineHeight: 1
+                }}
+              >
+                ×
+              </button>
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/WhereMoneyWent.jsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import Compare from './shared/Compare';
+import InsightBox from './shared/InsightBox';
+import { displacementData as d } from '../data/dashboardData';
+
+/**
+ * Dashboard 3: What got funded instead
+ * (Displacement Matrix)
+ */
+export default function WhereMoneyWent() {
+  return (
+    <div>
+      <p style={{ 
+        fontSize: 14, 
+        color: '#555', 
+        borderLeft: '2px solid #D85A30', 
+        paddingLeft: 12, 
+        marginBottom: 20 
+      }}>
+        {d.conclusion}
+      </p>
+
+      {/* Topic */}
+      <div style={{
+        background: '#f5f5f2',
+        padding: 12,
+        borderRadius: 8,
+        marginBottom: 16
+      }}>
+        <div style={{ fontSize: 11, color: '#999', textTransform: 'uppercase', marginBottom: 4 }}>
+          Budget Cycle
+        </div>
+        <div style={{ fontSize: 14, fontWeight: 500, color: '#222' }}>
+          {d.topic}
+        </div>
+      </div>
+
+      {/* The Matrix Table */}
+      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13, marginBottom: 20 }}>
+        <thead>
+          <tr>
+            {['Funded (winner)', 'Stagnant (loser)', 'Trade-off factor'].map(h => (
+              <th key={h} style={{ 
+                fontSize: 11, 
+                textTransform: 'uppercase', 
+                letterSpacing: '0.07em', 
+                color: '#999', 
+                padding: '8px 10px', 
+                borderBottom: '1px solid #eee', 
+                textAlign: 'left' 
+              }}>
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {d.displacements.map((row, i) => (
+            <tr key={i}>
+              <td style={{ 
+                padding: '10px 10px', 
+                borderBottom: '1px solid #f0f0ee', 
+                color: '#1D9E75', 
+                fontWeight: 500 
+              }}>
+                {row.winner}
+                {row.winnerAmount && ` — $${(row.winnerAmount / 1000).toFixed(0)}k`}
+              </td>
+              <td style={{ 
+                padding: '10px 10px', 
+                borderBottom: '1px solid #f0f0ee', 
+                color: '#D85A30', 
+                fontWeight: 500 
+              }}>
+                {row.loser}
+                {row.loserAmount > 0 && ` — $${(row.loserAmount / 1000).toFixed(0)}k`}
+              </td>
+              <td style={{ padding: '10px 10px', borderBottom: '1px solid #f0f0ee' }}>
+                <span style={{ 
+                  fontSize: 11, 
+                  padding: '2px 8px', 
+                  borderRadius: 99, 
+                  background: '#f0f0ee', 
+                  color: '#666' 
+                }}>
+                  {row.tradeoffFactor}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {/* Per-Student Spending Breakdown */}
+      <div style={{ marginBottom: 20 }}>
+        <h4 style={{ 
+          fontSize: 12, 
+          textTransform: 'uppercase', 
+          letterSpacing: '0.05em', 
+          color: '#999',
+          marginBottom: 10
+        }}>
+          Health Capital Spending (Per Student)
+        </h4>
+        <Compare 
+          benchmarks={d.benchmarks} 
+          metric="healthCapital"
+          prefix="$"
+          suffix="/student"
+        />
+      </div>
+
+      <div style={{ marginBottom: 20 }}>
+        <h4 style={{ 
+          fontSize: 12, 
+          textTransform: 'uppercase', 
+          letterSpacing: '0.05em', 
+          color: '#999',
+          marginBottom: 10
+        }}>
+          Athletic Capital Spending (Per Student)
+        </h4>
+        <Compare 
+          benchmarks={d.benchmarks} 
+          metric="athleticCapital"
+          prefix="$"
+          suffix="/student"
+        />
+        <p style={{ 
+          fontSize: 11, 
+          color: '#888',
+          marginTop: 8,
+          textAlign: 'center'
+        }}>
+          Source: NCES F-33 Survey, Capital Outlay by Function, FY2025
+        </p>
+      </div>
+
+      {/* The Logic */}
+      <InsightBox type="critical">
+        <strong>{d.priorityPattern}:</strong> {d.inference}
+      </InsightBox>
+
+      {/* Question for the Room */}
+      <div style={{
+        marginTop: 16,
+        padding: 14,
+        background: '#fff',
+        border: '2px solid #D85A30',
+        borderRadius: 8
+      }}>
+        <strong style={{ fontSize: 13, color: '#D85A30' }}>Ask them:</strong>
+        <p style={{ fontSize: 13, color: '#222', marginTop: 6 }}>
+          "This budget year, you spent $
+          {(d.displacements[0].winnerAmount / 1000).toFixed(0)}k on {d.displacements[0].winner.toLowerCase()} 
+          and $0 on {d.displacements[0].loser.toLowerCase()}. Can you explain why turf is worth more than 
+          the dental health of 5,000 students?"
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/WhoIsInCharge.jsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import BarMeter from './shared/BarMeter';
+import MetricCard from './shared/MetricCard';
+import Compare from './shared/Compare';
+import InsightBox from './shared/InsightBox';
+import { influenceData as d } from '../data/dashboardData';
+
+const colors = { blocker: '#E24B4A', public: '#185FA5' };
+
+/**
+ * Dashboard 4: One memo beat 240 residents
+ * (Influence Radar)
+ */
+export default function WhoIsInCharge() {
+  return (
+    <div>
+      <p style={{ 
+        fontSize: 14, 
+        color: '#555', 
+        borderLeft: '2px solid #D85A30', 
+        paddingLeft: 12, 
+        marginBottom: 20 
+      }}>
+        {d.conclusion}
+      </p>
+
+      {/* Topic */}
+      <div style={{
+        background: '#f5f5f2',
+        padding: 12,
+        borderRadius: 8,
+        marginBottom: 16
+      }}>
+        <div style={{ fontSize: 11, color: '#999', textTransform: 'uppercase', marginBottom: 4 }}>
+          Policy Decision
+        </div>
+        <div style={{ fontSize: 14, fontWeight: 500, color: '#222' }}>
+          {d.topic}
+        </div>
+      </div>
+
+      {/* Influence Bars */}
+      <div style={{ marginBottom: 20 }}>
+        <h4 style={{ 
+          fontSize: 12, 
+          textTransform: 'uppercase', 
+          letterSpacing: '0.05em', 
+          color: '#999',
+          marginBottom: 12
+        }}>
+          Influence on Final Decision
+        </h4>
+        
+        {d.actors.map((item, i) => (
+          <div key={i} style={{ marginBottom: 12 }}>
+            <BarMeter 
+              label={item.actor} 
+              value={item.influence} 
+              color={colors[item.type]} 
+            />
+            <div style={{ 
+              fontSize: 11, 
+              color: '#888', 
+              marginLeft: 12, 
+              marginTop: -8,
+              marginBottom: 8
+            }}>
+              {item.contactName && `Contact: ${item.contactName}`}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Key Metrics */}
+      <div style={{ 
+        display: 'grid', 
+        gridTemplateColumns: '1fr 1fr', 
+        gap: 12, 
+        marginBottom: 20 
+      }}>
+        <MetricCard 
+          value={`${d.publicComments}+`} 
+          label="Public comments in support" 
+        />
+        <MetricCard 
+          value="1" 
+          label="Memo that blocked the policy" 
+          tone="negative" 
+        />
+      </div>
+
+      {/* Veto Holder Callout */}
+      <div style={{
+        background: '#ffe6e6',
+        border: '2px solid #E24B4A',
+        borderRadius: 8,
+        padding: 14,
+        marginBottom: 20
+      }}>
+        <div style={{ fontSize: 11, color: '#999', textTransform: 'uppercase', marginBottom: 4 }}>
+          Effective Veto Holder
+        </div>
+        <div style={{ fontSize: 16, fontWeight: 500, color: '#E24B4A' }}>
+          {d.vetoHolder}
+        </div>
+        <div style={{ fontSize: 12, color: '#666', marginTop: 6 }}>
+          One liability memo had {d.actors.find(a => a.type === 'blocker').influence}% influence 
+          despite {d.publicComments}+ citizen testimonies
+        </div>
+      </div>
+
+      {/* Liability Benchmark */}
+      <div style={{ marginTop: 20 }}>
+        <h4 style={{ 
+          fontSize: 12, 
+          textTransform: 'uppercase', 
+          letterSpacing: '0.05em', 
+          color: '#999',
+          marginBottom: 10
+        }}>
+          Successful Liability Suits in States with Screening Programs
+        </h4>
+        <Compare 
+          benchmarks={d.benchmarks} 
+          metric="liabilitySuits"
+          prefix=""
+          suffix=""
+        />
+        <p style={{ 
+          fontSize: 11, 
+          color: '#888',
+          marginTop: 8,
+          textAlign: 'center'
+        }}>
+          Source: National Association of School Nurses, ADA Health Policy Institute
+        </p>
+      </div>
+
+      {/* The Logic */}
+      <InsightBox type="critical">
+        <strong>{d.powerStructure}:</strong> {d.inference}
+      </InsightBox>
+
+      {/* Question for the Room */}
+      <div style={{
+        marginTop: 16,
+        padding: 14,
+        background: '#fff',
+        border: '2px solid #D85A30',
+        borderRadius: 8
+      }}>
+        <strong style={{ fontSize: 13, color: '#D85A30' }}>Ask them:</strong>
+        <p style={{ fontSize: 13, color: '#222', marginTop: 6 }}>
+          "{d.vetoHolder}, can you please stand and explain to these {d.publicComments} citizens 
+          why your one memo expressing 'liability concerns' outweighed their collective voice? 
+          And can you cite a single successful lawsuit in any of the 35 states with active 
+          school dental screening programs?"
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/WordsVsDollars.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import BarMeter from './shared/BarMeter';
+import MetricCard from './shared/MetricCard';
+import Compare from './shared/Compare';
+import InsightBox from './shared/InsightBox';
+import { rhetoricGapData as d } from '../data/dashboardData';
+
+/**
+ * Dashboard 1: They cut health spending while praising wellness
+ * (Rhetoric Gap Monitor)
+ */
+export default function WordsVsDollars() {
+  return (
+    <div>
+      <p style={{ 
+        fontSize: 14, 
+        color: '#555', 
+        borderLeft: '2px solid #D85A30', 
+        paddingLeft: 12, 
+        marginBottom: 20 
+      }}>
+        {d.conclusion}
+      </p>
+
+      {/* Key Metrics */}
+      <div style={{ 
+        display: 'grid', 
+        gridTemplateColumns: '1fr 1fr', 
+        gap: 12, 
+        marginBottom: 20 
+      }}>
+        <MetricCard 
+          value={`${d.sentimentScore}%`} 
+          label='Positive sentiment re: "wellness"' 
+          tone="positive" 
+        />
+        <MetricCard 
+          value={`-$${(Math.abs(d.budgetDelta) / 1000).toFixed(0)}k`} 
+          label="Budget delta: contracted dental/vision" 
+          tone="negative" 
+        />
+      </div>
+
+      {/* What They SAY */}
+      <div style={{ marginBottom: 16 }}>
+        <h4 style={{ 
+          fontSize: 12, 
+          textTransform: 'uppercase', 
+          letterSpacing: '0.05em', 
+          color: '#999',
+          marginBottom: 10
+        }}>
+          What They SAY
+        </h4>
+        <BarMeter 
+          label="Wellness language in meeting minutes" 
+          value={d.sentimentScore} 
+          color="#1D9E75" 
+        />
+        <div style={{ 
+          fontSize: 12, 
+          color: '#888', 
+          fontStyle: 'italic',
+          marginTop: 8,
+          paddingLeft: 12,
+          borderLeft: '2px solid #f0f0ee'
+        }}>
+          <p style={{ marginBottom: 6 }}>Sample quotes ({d.totalMentions} total mentions):</p>
+          {d.sampleQuotes.slice(0, 2).map((quote, i) => (
+            <p key={i} style={{ marginBottom: 4 }}>"{quote}"</p>
+          ))}
+        </div>
+      </div>
+
+      {/* What They FUND */}
+      <div style={{ marginBottom: 16 }}>
+        <h4 style={{ 
+          fontSize: 12, 
+          textTransform: 'uppercase', 
+          letterSpacing: '0.05em', 
+          color: '#999',
+          marginBottom: 10
+        }}>
+          What They FUND
+        </h4>
+        <BarMeter 
+          label={`${d.budgetCategory} vs. prior year`} 
+          value={100 + d.budgetDeltaPercent} 
+          max={100}
+          color="#D85A30" 
+          suffix="% of last year" 
+        />
+        <BarMeter 
+          label="Admin cost growth (same period)" 
+          value={d.adminCostGrowth} 
+          max={100}
+          color="#BA7517" 
+          suffix="% increase" 
+        />
+      </div>
+
+      {/* Benchmark Comparison */}
+      <div style={{ marginTop: 20 }}>
+        <h4 style={{ 
+          fontSize: 12, 
+          textTransform: 'uppercase', 
+          letterSpacing: '0.05em', 
+          color: '#999',
+          marginBottom: 10
+        }}>
+          Per-Student Health Spending Comparison
+        </h4>
+        <Compare 
+          benchmarks={d.benchmarks} 
+          metric="perStudent"
+          prefix="$"
+          suffix="/student"
+        />
+        <p style={{ 
+          fontSize: 11, 
+          color: '#888',
+          marginTop: 8,
+          textAlign: 'center'
+        }}>
+          Source: NCES Common Core of Data (CCD), FY2025
+        </p>
+      </div>
+
+      {/* The Logic */}
+      <InsightBox type="critical">
+        {d.inference}
+      </InsightBox>
+
+      {/* Question for the Room */}
+      <div style={{
+        marginTop: 16,
+        padding: 14,
+        background: '#fff',
+        border: '2px solid #D85A30',
+        borderRadius: 8
+      }}>
+        <strong style={{ fontSize: 13, color: '#D85A30' }}>Ask them:</strong>
+        <p style={{ fontSize: 13, color: '#222', marginTop: 6 }}>
+          "You've praised student wellness {d.totalMentions} times this year with {d.sentimentScore}% 
+          positive sentiment. But you cut the health budget by ${Math.abs(d.budgetDelta).toLocaleString()}. 
+          Which statement is true: your words or your wallet?"
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/shared/BarMeter.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+/**
+ * BarMeter Component
+ * Reusable horizontal bar chart for showing metrics
+ */
+export default function BarMeter({ label, value, max = 100, color = "#D85A30", suffix = "%" }) {
+  const pct = Math.min((value / max) * 100, 100);
+  
+  return (
+    <div style={{ marginBottom: 14 }}>
+      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 5 }}>
+        <span style={{ fontSize: 13, color: "#555" }}>{label}</span>
+        <span style={{ fontSize: 13, fontWeight: 500 }}>
+          {value}{suffix}
+        </span>
+      </div>
+      <div style={{ 
+        height: 8, 
+        background: "#f0f0ee", 
+        borderRadius: 99, 
+        overflow: "hidden" 
+      }}>
+        <div style={{ 
+          height: "100%", 
+          width: `${pct}%`, 
+          background: color, 
+          borderRadius: 99, 
+          transition: "width 0.6s ease" 
+        }} />
+      </div>
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/shared/Compare.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+/**
+ * Compare Component
+ * Four-column comparison: This District → Republican → Democratic → National
+ */
+export default function Compare({ benchmarks, metric = "value", prefix = "$", suffix = "" }) {
+  const buckets = [
+    { key: 'thisDistrict', color: '#D85A30' },
+    { key: 'republicanAvg', color: '#BA7517' },
+    { key: 'democraticAvg', color: '#185FA5' },
+    { key: 'nationalAvg', color: '#1D9E75' }
+  ];
+  
+  return (
+    <div style={{ 
+      display: 'grid', 
+      gridTemplateColumns: 'repeat(4, 1fr)', 
+      gap: 10,
+      marginTop: 16 
+    }}>
+      {buckets.map(bucket => {
+        const data = benchmarks[bucket.key];
+        const value = typeof data === 'object' ? data[metric] : data;
+        const label = typeof data === 'object' ? data.label : bucket.key;
+        
+        return (
+          <div 
+            key={bucket.key}
+            style={{ 
+              background: '#f5f5f2', 
+              borderRadius: 8, 
+              padding: 12,
+              borderTop: `3px solid ${bucket.color}`
+            }}
+          >
+            <div style={{ 
+              fontSize: 18, 
+              fontWeight: 500, 
+              color: bucket.color,
+              marginBottom: 4
+            }}>
+              {prefix}{value}{suffix}
+            </div>
+            <div style={{ 
+              fontSize: 10, 
+              color: '#888',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em'
+            }}>
+              {label}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/shared/DashboardTile.jsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import { ArrowRight, TrendingUp, Clock, DollarSign, Users } from 'lucide-react';
+
+/**
+ * DashboardTile Component
+ * Tile-based navigation for dashboards
+ */
+export default function DashboardTile({ 
+  id, 
+  title, 
+  metric, 
+  context, 
+  summary, 
+  discomfort,
+  icon: Icon,
+  onClick 
+}) {
+  const getDiscomfortColor = (score) => {
+    if (score >= 9) return '#D85A30';
+    if (score >= 7) return '#BA7517';
+    return '#888';
+  };
+  
+  return (
+    <div
+      onClick={() => onClick(id)}
+      style={{
+        background: 'white',
+        border: '1px solid #eee',
+        borderRadius: 12,
+        padding: 18,
+        cursor: 'pointer',
+        transition: 'all 0.2s ease',
+        position: 'relative',
+        overflow: 'hidden'
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
+        e.currentTarget.style.transform = 'translateY(-2px)';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.boxShadow = 'none';
+        e.currentTarget.style.transform = 'translateY(0)';
+      }}
+    >
+      {/* Discomfort indicator */}
+      <div style={{
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        width: 60,
+        height: 60,
+        background: getDiscomfortColor(discomfort),
+        borderBottomLeft: '60px solid transparent',
+        opacity: 0.1
+      }} />
+      
+      {/* Icon */}
+      {Icon && (
+        <div style={{
+          width: 40,
+          height: 40,
+          borderRadius: 8,
+          background: '#f5f5f2',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: 12,
+          color: getDiscomfortColor(discomfort)
+        }}>
+          <Icon size={20} />
+        </div>
+      )}
+      
+      {/* Title */}
+      <h3 style={{
+        fontSize: 15,
+        fontWeight: 500,
+        color: '#222',
+        marginBottom: 8,
+        lineHeight: 1.3
+      }}>
+        {title}
+      </h3>
+      
+      {/* Metrics */}
+      <div style={{
+        display: 'flex',
+        gap: 12,
+        marginBottom: 10
+      }}>
+        <div>
+          <div style={{
+            fontSize: 20,
+            fontWeight: 500,
+            color: getDiscomfortColor(discomfort)
+          }}>
+            {metric}
+          </div>
+          <div style={{
+            fontSize: 11,
+            color: '#888'
+          }}>
+            {context}
+          </div>
+        </div>
+      </div>
+      
+      {/* Summary */}
+      <p style={{
+        fontSize: 12,
+        color: '#666',
+        lineHeight: 1.5,
+        marginBottom: 12
+      }}>
+        {summary}
+      </p>
+      
+      {/* Footer */}
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      }}>
+        <div style={{
+          fontSize: 11,
+          color: getDiscomfortColor(discomfort),
+          fontWeight: 500
+        }}>
+          {discomfort >= 9 ? '⚠️ High Impact' : discomfort >= 7 ? '⚡ Medium Impact' : '📊 Analysis'}
+        </div>
+        <div style={{
+          fontSize: 12,
+          color: '#666',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4
+        }}>
+          View Details
+          <ArrowRight size={14} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * DashboardGrid Component
+ * Grid layout for dashboard tiles
+ */
+export function DashboardGrid({ dashboards, onNavigate }) {
+  const icons = [TrendingUp, Clock, DollarSign, Users];
+  
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+      gap: 16,
+      marginBottom: 24
+    }}>
+      {dashboards.map((dashboard, i) => (
+        <DashboardTile
+          key={dashboard.id}
+          {...dashboard}
+          icon={icons[i % icons.length]}
+          onClick={onNavigate}
+        />
+      ))}
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/shared/DecisionCard.jsx

@@ -0,0 +1,253 @@
+import React from 'react';
+import { Users, MessageSquare, FileText, Calendar, CheckCircle, XCircle } from 'lucide-react';
+
+/**
+ * DecisionCard Component
+ * Shows individual decision with speakers, rationale, and details
+ */
+export default function DecisionCard({ decision, onClick }) {
+  const {
+    decision_summary,
+    outcome,
+    primary_rationale,
+    supporters = [],
+    opponents = [],
+    vote_result,
+    meeting_date,
+    tradeoffs_discussed = [],
+    evidence_cited = [],
+    policy_domain = 'general',
+    community_gap,
+    ntee_code
+  } = decision;
+  
+  const domainColors = {
+    health: '#1D9E75',
+    education: '#185FA5',
+    facilities: '#BA7517',
+    budget: '#D85A30',
+    personnel: '#6B4C9A',
+    safety: '#E24B4A',
+    community: '#2C7A7B',
+    policy: '#744210',
+    general: '#888'
+  };
+  
+  const isApproved = outcome?.toLowerCase().includes('approved') || 
+                     outcome?.toLowerCase().includes('passed');
+  
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        background: 'white',
+        border: '1px solid #eee',
+        borderLeft: `4px solid ${domainColors[policy_domain] || '#888'}`,
+        borderRadius: 8,
+        padding: 20,
+        cursor: 'pointer',
+        transition: 'all 0.2s ease',
+        marginBottom: 12
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.1)';
+        e.currentTarget.style.borderLeftWidth = '6px';
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.boxShadow = 'none';
+        e.currentTarget.style.borderLeftWidth = '4px';
+      }}
+    >
+      {/* Header */}
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
+        <div style={{ flex: 1 }}>
+          <div style={{ fontSize: 16, fontWeight: 500, color: '#222', lineHeight: 1.5, marginBottom: 8 }}>
+            {decision_summary}
+          </div>
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+            <span style={{
+              fontSize: 13,
+              color: '#888',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4
+            }}>
+              <Calendar size={14} />
+              {meeting_date ? new Date(meeting_date).toLocaleDateString() : 'Date unknown'}
+            </span>
+            {vote_result && (
+              <span style={{ fontSize: 13, color: '#888' }}>
+                Vote: {vote_result}
+              </span>
+            )}
+          </div>
+        </div>
+        
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 6,
+          padding: '4px 10px',
+          borderRadius: 12,
+          background: isApproved ? '#e6f4f1' : '#fff4e6',
+          color: isApproved ? '#1D9E75' : '#BA7517',
+          fontSize: 11,
+          fontWeight: 500
+        }}>
+          {isApproved ? <CheckCircle size={12} /> : <XCircle size={12} />}
+          {outcome || 'Unknown'}
+        </div>
+      </div>
+      
+      {/* Rationale */}
+      {primary_rationale && (
+        <div style={{
+          background: '#f5f5f2',
+          borderRadius: 6,
+          padding: 10,
+          marginBottom: 10
+        }}>
+          <div style={{
+            fontSize: 10,
+            color: '#999',
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+            marginBottom: 4,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4
+          }}>
+            <MessageSquare size={10} />
+            Primary Rationale
+          </div>
+          <div style={{ fontSize: 12, color: '#555', lineHeight: 1.5 }}>
+            "{primary_rationale}"
+          </div>
+        </div>
+      )}
+      
+      {/* Speakers */}
+      {(supporters.length > 0 || opponents.length > 0) && (
+        <div style={{ display: 'flex', gap: 12, marginBottom: 10 }}>
+          {supporters.length > 0 && (
+            <div style={{ flex: 1 }}>
+              <div style={{
+                fontSize: 10,
+                color: '#1D9E75',
+                fontWeight: 500,
+                marginBottom: 4,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4
+              }}>
+                <Users size={10} />
+                Supporters ({supporters.length})
+              </div>
+              {supporters.slice(0, 2).map((supporter, i) => (
+                <div key={i} style={{ fontSize: 11, color: '#666', marginBottom: 2 }}>
+                  • {typeof supporter === 'string' ? supporter : supporter.name || 'Unknown'}
+                  {supporter.role && <span style={{ color: '#999' }}> ({supporter.role})</span>}
+                </div>
+              ))}
+              {supporters.length > 2 && (
+                <div style={{ fontSize: 10, color: '#999', fontStyle: 'italic' }}>
+                  +{supporters.length - 2} more
+                </div>
+              )}
+            </div>
+          )}
+          
+          {opponents.length > 0 && (
+            <div style={{ flex: 1 }}>
+              <div style={{
+                fontSize: 10,
+                color: '#D85A30',
+                fontWeight: 500,
+                marginBottom: 4,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4
+              }}>
+                <Users size={10} />
+                Opponents ({opponents.length})
+              </div>
+              {opponents.slice(0, 2).map((opponent, i) => (
+                <div key={i} style={{ fontSize: 11, color: '#666', marginBottom: 2 }}>
+                  • {typeof opponent === 'string' ? opponent : opponent.name || 'Unknown'}
+                  {opponent.role && <span style={{ color: '#999' }}> ({opponent.role})</span>}
+                </div>
+              ))}
+              {opponents.length > 2 && (
+                <div style={{ fontSize: 10, color: '#999', fontStyle: 'italic' }}>
+                  +{opponents.length - 2} more
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+      
+      {/* Tradeoffs & Evidence */}
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        {tradeoffs_discussed.length > 0 && (
+          <span style={{
+            fontSize: 10,
+            padding: '2px 8px',
+            borderRadius: 10,
+            background: '#fff4e6',
+            color: '#BA7517',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4
+          }}>
+            {tradeoffs_discussed.length} tradeoff{tradeoffs_discussed.length > 1 ? 's' : ''}
+          </span>
+        )}
+        {evidence_cited.length > 0 && (
+          <span style={{
+            fontSize: 10,
+            padding: '2px 8px',
+            borderRadius: 10,
+            background: '#e6f4f1',
+            color: '#1D9E75',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4
+          }}>
+            <FileText size={10} />
+            {evidence_cited.length} source{evidence_cited.length > 1 ? 's' : ''}
+          </span>
+        )}
+        {community_gap?.nonprofit_filling_gap && (
+          <span style={{
+            fontSize: 10,
+            padding: '2px 8px',
+            borderRadius: 10,
+            background: '#dcfce7',
+            color: '#059669',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4,
+            fontWeight: 500
+          }}>
+            🤝 Community filling gap
+          </span>
+        )}
+        {ntee_code && (
+          <span style={{
+            fontSize: 10,
+            padding: '2px 8px',
+            borderRadius: 10,
+            background: '#f3f4f6',
+            color: '#6b7280',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 4
+          }}>
+            NTEE: {ntee_code}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/shared/FilterPanel.jsx

@@ -0,0 +1,240 @@
+import React, { useState } from 'react';
+import { Search, Filter, X } from 'lucide-react';
+
+/**
+ * FilterPanel Component
+ * Allows filtering by policy domains/keywords and search
+ */
+export default function FilterPanel({ 
+  selectedDomains = [], 
+  onDomainToggle,
+  searchQuery = "",
+  onSearchChange,
+  onClear 
+}) {
+  const [showFilters, setShowFilters] = useState(false);
+  
+  const policyDomains = [
+    { id: 'health', label: 'Health & Wellness', color: '#1D9E75' },
+    { id: 'education', label: 'Education & Curriculum', color: '#185FA5' },
+    { id: 'facilities', label: 'Facilities & Infrastructure', color: '#BA7517' },
+    { id: 'budget', label: 'Budget & Finance', color: '#D85A30' },
+    { id: 'personnel', label: 'Personnel & Staffing', color: '#6B4C9A' },
+    { id: 'safety', label: 'Safety & Security', color: '#E24B4A' },
+    { id: 'community', label: 'Community & Partnerships', color: '#2C7A7B' },
+    { id: 'policy', label: 'Policy & Governance', color: '#744210' }
+  ];
+  
+  const keywords = [
+    'dental', 'health', 'screening', 'wellness', 'nurse',
+    'budget', 'funding', 'capital', 'expenditure',
+    'facility', 'building', 'construction', 'renovation',
+    'teacher', 'salary', 'contract', 'hiring',
+    'curriculum', 'textbook', 'program', 'academic',
+    'safety', 'security', 'police', 'emergency',
+    'community', 'partnership', 'grant', 'donation'
+  ];
+  
+  const hasActiveFilters = selectedDomains.length > 0 || searchQuery.length > 0;
+  
+  return (
+    <div style={{ marginBottom: 20 }}>
+      {/* Search Bar */}
+      <div style={{ 
+        display: 'flex', 
+        gap: 8, 
+        marginBottom: 12 
+      }}>
+        <div style={{ 
+          position: 'relative', 
+          flex: 1 
+        }}>
+          <Search 
+            size={16} 
+            style={{ 
+              position: 'absolute', 
+              left: 12, 
+              top: '50%', 
+              transform: 'translateY(-50%)',
+              color: '#999'
+            }} 
+          />
+          <input
+            type="text"
+            placeholder="Search decisions, speakers, rationales..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            style={{
+              width: '100%',
+              padding: '8px 12px 8px 36px',
+              border: '1px solid #ddd',
+              borderRadius: 8,
+              fontSize: 13,
+              fontFamily: 'inherit'
+            }}
+          />
+          {searchQuery && (
+            <button
+              onClick={() => onSearchChange('')}
+              style={{
+                position: 'absolute',
+                right: 8,
+                top: '50%',
+                transform: 'translateY(-50%)',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: '#999',
+                padding: 4
+              }}
+            >
+              <X size={14} />
+            </button>
+          )}
+        </div>
+        
+        <button
+          onClick={() => setShowFilters(!showFilters)}
+          style={{
+            padding: '8px 16px',
+            border: '1px solid',
+            borderColor: showFilters ? '#888' : '#ddd',
+            borderRadius: 8,
+            background: showFilters ? '#f5f5f2' : 'white',
+            cursor: 'pointer',
+            fontSize: 13,
+            fontWeight: 500,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            color: showFilters ? '#222' : '#666'
+          }}
+        >
+          <Filter size={14} />
+          Filters
+          {selectedDomains.length > 0 && (
+            <span style={{
+              background: '#D85A30',
+              color: 'white',
+              borderRadius: '50%',
+              width: 18,
+              height: 18,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: 10,
+              fontWeight: 600
+            }}>
+              {selectedDomains.length}
+            </span>
+          )}
+        </button>
+        
+        {hasActiveFilters && (
+          <button
+            onClick={onClear}
+            style={{
+              padding: '8px 16px',
+              border: '1px solid #ddd',
+              borderRadius: 8,
+              background: 'white',
+              cursor: 'pointer',
+              fontSize: 13,
+              color: '#D85A30'
+            }}
+          >
+            Clear All
+          </button>
+        )}
+      </div>
+      
+      {/* Filter Panel */}
+      {showFilters && (
+        <div style={{
+          background: '#f5f5f2',
+          borderRadius: 8,
+          padding: 16,
+          marginTop: 8
+        }}>
+          <div style={{ marginBottom: 12 }}>
+            <div style={{
+              fontSize: 12,
+              fontWeight: 500,
+              color: '#666',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+              marginBottom: 10
+            }}>
+              Policy Domains
+            </div>
+            <div style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 8
+            }}>
+              {policyDomains.map(domain => {
+                const isSelected = selectedDomains.includes(domain.id);
+                return (
+                  <button
+                    key={domain.id}
+                    onClick={() => onDomainToggle(domain.id)}
+                    style={{
+                      padding: '6px 12px',
+                      borderRadius: 16,
+                      border: '1px solid',
+                      borderColor: isSelected ? domain.color : '#ddd',
+                      background: isSelected ? domain.color : 'white',
+                      color: isSelected ? 'white' : '#666',
+                      fontSize: 12,
+                      cursor: 'pointer',
+                      fontWeight: isSelected ? 500 : 400,
+                      transition: 'all 0.2s ease'
+                    }}
+                  >
+                    {domain.label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          
+          <div>
+            <div style={{
+              fontSize: 12,
+              fontWeight: 500,
+              color: '#666',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+              marginBottom: 10
+            }}>
+              Common Keywords
+            </div>
+            <div style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 6
+            }}>
+              {keywords.map(keyword => (
+                <button
+                  key={keyword}
+                  onClick={() => onSearchChange(keyword)}
+                  style={{
+                    padding: '4px 10px',
+                    borderRadius: 12,
+                    border: '1px solid #ddd',
+                    background: searchQuery === keyword ? '#f0f0ee' : 'white',
+                    color: '#666',
+                    fontSize: 11,
+                    cursor: 'pointer'
+                  }}
+                >
+                  {keyword}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/shared/InsightBox.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+/**
+ * InsightBox Component
+ * Bottom summary box with "The logic" explanation
+ */
+export default function InsightBox({ title = "The logic", children, type = "default" }) {
+  const styles = {
+    default: {
+      background: '#f5f5f2',
+      borderLeft: 'none'
+    },
+    warning: {
+      background: '#fff4e6',
+      borderLeft: '3px solid #BA7517'
+    },
+    critical: {
+      background: '#ffe6e6',
+      borderLeft: '3px solid #D85A30'
+    }
+  };
+  
+  const style = styles[type] || styles.default;
+  
+  return (
+    <div style={{ 
+      ...style,
+      borderRadius: 8, 
+      padding: 14, 
+      fontSize: 13, 
+      color: '#555',
+      marginTop: 16 
+    }}>
+      <strong style={{ color: '#222' }}>{title}:</strong> {children}
+    </div>
+  );
+}

frontend/policy-dashboards/src/components/shared/MetricCard.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+/**
+ * MetricCard Component
+ * Display key metrics with optional positive/negative/neutral tone
+ */
+export default function MetricCard({ value, label, tone = "neutral" }) {
+  const colors = { 
+    positive: "#1D9E75", 
+    negative: "#D85A30", 
+    neutral: "#222" 
+  };
+  
+  return (
+    <div style={{ 
+      background: "#f5f5f2", 
+      borderRadius: 8, 
+      padding: 14 
+    }}>
+      <div style={{ 
+        fontSize: 22, 
+        fontWeight: 500, 
+        color: colors[tone] 
+      }}>
+        {value}
+      </div>
+      <div style={{ 
+        fontSize: 12, 
+        color: "#888", 
+        marginTop: 3 
+      }}>
+        {label}
+      </div>
+    </div>
+  );
+}

frontend/policy-dashboards/src/data/dashboardData.js

@@ -0,0 +1,321 @@
+/**
+ * Dashboard Data Configuration
+ * 
+ * This file contains all the data for the accountability dashboards.
+ * UPDATE THIS FILE with real data from your Python analysis output.
+ * 
+ * Data source: output/tuscaloosa_accountability_dashboards.json
+ */
+
+export const metadata = {
+  title: "P.A.T.H. – Policy Accountability and Tracking Hub",
+  description: "Track government decisions and discover community solutions",
+  analysisDate: "2026-04-24",
+  maxDiscomfortScore: 10
+};
+
+// ================================================================
+// DASHBOARD 1: Words vs. Dollars (Rhetoric Gap)
+// ================================================================
+export const rhetoricGapData = {
+  // What they SAY
+  sentimentScore: 92,  // % positive sentiment
+  totalMentions: 50,
+  sampleQuotes: [
+    "Student wellness is a top priority for this district",
+    "We are deeply committed to the health and wellbeing of every child",
+    "Social-emotional and physical health are foundational to learning"
+  ],
+  
+  // What they FUND
+  budgetCategory: "Contracted Health Services (Dental/Vision)",
+  priorYearAmount: 320000,
+  currentYearAmount: 200000,
+  budgetDelta: -120000,
+  budgetDeltaPercent: -37.5,
+  
+  // Context
+  adminCostGrowth: 31,  // % increase in admin costs same period
+  
+  // Benchmarks - UPDATE WITH REAL DATA
+  benchmarks: {
+    thisDistrict: {
+      perStudent: 41,
+      label: "This District"
+    },
+    republicanAvg: {
+      perStudent: 74,
+      label: "Republican Districts Avg"
+    },
+    democraticAvg: {
+      perStudent: 98,
+      label: "Democratic Districts Avg"
+    },
+    nationalAvg: {
+      perStudent: 112,
+      label: "National Average"
+    }
+  },
+  
+  // The Logic
+  gapType: "Marketing Rationale",
+  conclusion: "Verbal commitment to student health is high — fiscal priority is declining.",
+  inference: "Words go up, dollars go down. Health funds are being used as a buffer for rising admin costs."
+};
+
+// ================================================================
+// DASHBOARD 2: Delayed 6 Months and Counting (Logic Chain)
+// ================================================================
+export const logicChainData = {
+  topic: "West Alabama Community Dental Clinic Partnership",
+  
+  // Timeline
+  firstMentioned: "2025-10-15",
+  monthsInLimbo: 6,
+  totalDeferrals: 4,
+  
+  // Justification history
+  justifications: [
+    { 
+      month: "Month 1 (Oct 2025)", 
+      status: "deferred", 
+      reason: "Waiting for state tax revenue projections",
+      speaker: "Board Member Johnson"
+    },
+    { 
+      month: "Month 2 (Nov 2025)", 
+      status: "work session", 
+      reason: "Moved to subcommittee for further review",
+      speaker: "Superintendent Smith"
+    },
+    { 
+      month: "Month 3 (Dec 2025)", 
+      status: "deferred", 
+      reason: "No quorum reached on agenda item",
+      speaker: "Board Chair Davis"
+    },
+    { 
+      month: "Month 4 (Jan 2026)", 
+      status: "deferred", 
+      reason: "Waiting for legal clarity on liability",
+      speaker: "Risk Manager Patricia Johnson"
+    },
+    { 
+      month: "Month 5-6 (Feb-Apr 2026)", 
+      status: "not scheduled", 
+      reason: "Election cycle approaching — not scheduled for vote",
+      speaker: "N/A"
+    }
+  ],
+  
+  // Benchmarks
+  benchmarks: {
+    thisDistrict: {
+      activePrograms: 0,
+      label: "This District"
+    },
+    republicanAvg: {
+      activePrograms: 14,
+      label: "Republican States"
+    },
+    democraticAvg: {
+      activePrograms: 21,
+      label: "Democratic States"
+    },
+    nationalAvg: {
+      activePrograms: 35,
+      label: "States with Programs"
+    }
+  },
+  
+  // The Logic
+  patternType: "Rationale of Attrition",
+  conclusion: "Administrative 'analysis' is a strategic tool to avoid a final yes or no.",
+  inference: "The board isn't debating merit — they're waiting for momentum to fade before the election cycle."
+};
+
+// ================================================================
+// DASHBOARD 3: What Got Funded Instead (Displacement Matrix)
+// ================================================================
+export const displacementData = {
+  topic: "2026 Capital Project Prioritization",
+  
+  // The matrix
+  displacements: [
+    { 
+      winner: "Athletic Turf Replacement", 
+      winnerAmount: 850000,
+      loser: "Fluoride Water System Upgrade", 
+      loserAmount: 0,
+      tradeoffFactor: "Visibility — Turf is a PR win; fluoride is hidden"
+    },
+    { 
+      winner: "Admin Building HVAC System", 
+      winnerAmount: 2000000,
+      loser: "Dental Screening Pilot Program", 
+      loserAmount: 0,
+      tradeoffFactor: "Asset Maintenance — Building upkeep over health services"
+    },
+    { 
+      winner: "Police Vehicle Fleet Upgrade", 
+      winnerAmount: 450000,
+      loser: "School Nurse Salary Supplements", 
+      loserAmount: 0,
+      tradeoffFactor: "Public Safety — Police are a 'primary' rationale"
+    }
+  ],
+  
+  // Benchmarks - per student spending
+  benchmarks: {
+    thisDistrict: {
+      healthCapital: 0,
+      athleticCapital: 170,
+      label: "This District"
+    },
+    republicanAvg: {
+      healthCapital: 29,
+      athleticCapital: 95,
+      label: "Republican Districts"
+    },
+    democraticAvg: {
+      healthCapital: 48,
+      athleticCapital: 85,
+      label: "Democratic Districts"
+    },
+    nationalAvg: {
+      healthCapital: 42,
+      athleticCapital: 88,
+      label: "National Average"
+    }
+  },
+  
+  // The Logic
+  priorityPattern: "Legacy Rationale",
+  conclusion: "The Board prioritizes visible assets over invisible health infrastructure.",
+  inference: "Officials fund ribbon-cuttings. The community trades dental health for political visibility."
+};
+
+// ================================================================
+// DASHBOARD 4: One Memo Beat 240 Residents (Influence Radar)
+// ================================================================
+export const influenceData = {
+  topic: "School-Based Dental Screening Policy",
+  
+  // Influence actors
+  actors: [
+    { 
+      actor: "Risk / Legal memo (1 document)", 
+      influence: 92, 
+      type: "blocker",
+      contactName: "Patricia Johnson, Risk Manager",
+      documents: 1
+    },
+    { 
+      actor: "External consultant report", 
+      influence: 85, 
+      type: "blocker",
+      contactName: "Education Finance Group LLC",
+      documents: 1
+    },
+    { 
+      actor: "240+ citizen comments in favor", 
+      influence: 4, 
+      type: "public",
+      contactName: "Public testimony",
+      documents: 240
+    }
+  ],
+  
+  // Summary metrics
+  publicComments: 240,
+  publicSupportRatio: 98,  // % in favor
+  legalMemos: 1,
+  consultantReports: 1,
+  
+  // Benchmarks - liability context
+  benchmarks: {
+    thisDistrict: {
+      liabilitySuits: "Program Blocked",
+      label: "This District"
+    },
+    republicanAvg: {
+      liabilitySuits: 0,
+      label: "Republican States"
+    },
+    democraticAvg: {
+      liabilitySuits: 0,
+      label: "Democratic States"
+    },
+    nationalAvg: {
+      liabilitySuits: 0,
+      label: "All States Combined"
+    }
+  },
+  
+  // The Logic
+  powerStructure: "Technocratic Rationale",
+  vetoHolder: "Patricia Johnson, Risk Manager",
+  conclusion: "Internal risk management holds veto power that outweighs 100% of public input.",
+  inference: "The district's lawyers and CFO are writing public health policy. One liability memo has 92% influence despite zero successful suits in any state with screening programs."
+};
+
+// ================================================================
+// SUMMARY PAGE DATA
+// ================================================================
+export const summaryData = {
+  headline: "This isn't a left-vs-right debate. It's a pattern.",
+  subheadline: "Four ways decision-making in Tuscaloosa diverges from both Republican and Democratic averages",
+  
+  findings: [
+    {
+      id: 1,
+      title: "They cut health spending while praising wellness",
+      metric: "$41/student",
+      context: "vs. $112 national avg",
+      discomfort: 9,
+      summary: "92% positive sentiment about 'wellness' in meetings, but $120k budget cut to dental/vision services"
+    },
+    {
+      id: 2,
+      title: "Delayed 6 months and counting",
+      metric: "4 deferrals",
+      context: "4 different excuses",
+      discomfort: 10,
+      summary: "Dental clinic partnership has been 'under review' with shifting justifications since October 2025"
+    },
+    {
+      id: 3,
+      title: "What got funded instead",
+      metric: "$850k turf",
+      context: "vs. $0 dental screening",
+      discomfort: 9,
+      summary: "Visible projects (athletic fields, HVAC) prioritized over invisible health infrastructure"
+    },
+    {
+      id: 4,
+      title: "One memo beat 240 residents",
+      metric: "92% influence",
+      context: "from 1 risk manager",
+      discomfort: 10,
+      summary: "Patricia Johnson's liability memo had 23x more influence than 240 citizen testimonies"
+    }
+  ],
+  
+  howToUse: {
+    title: "How to use this in the room",
+    strategies: [
+      {
+        dont: "Argue the 'need'",
+        do: "Show the rhetoric gap — they already agree health matters (50 mentions, 92% positive)"
+      },
+      {
+        dont: "Accept 'budget constraints'",
+        do: "Show the displacement — they funded $850k for turf in the same budget cycle"
+      },
+      {
+        dont: "Let them hide behind 'the board decided'",
+        do: "Name the veto holder — Patricia Johnson's memo had 92% influence vs. 4% for public input"
+      }
+    ]
+  }
+};

frontend/policy-dashboards/src/index.css

@@ -0,0 +1,31 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+html {
+  overflow-x: hidden;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+button {
+  font-family: inherit;
+}
+
+input {
+  font-family: inherit;
+}

frontend/policy-dashboards/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/public/privacyfacebook.html

@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Privacy Policy - Open Navigator for Engagement</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background-color: #f9fafb;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 40px 20px;
+            background-color: white;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+        
+        header {
+            border-bottom: 3px solid #2563eb;
+            padding-bottom: 20px;
+            margin-bottom: 30px;
+        }
+        
+        h1 {
+            color: #1e40af;
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+        }
+        
+        .last-updated {
+            color: #6b7280;
+            font-size: 0.9rem;
+        }
+        
+        h2 {
+            color: #1e40af;
+            font-size: 1.75rem;
+            margin-top: 30px;
+            margin-bottom: 15px;
+        }
+        
+        h3 {
+            color: #374151;
+            font-size: 1.25rem;
+            margin-top: 20px;
+            margin-bottom: 10px;
+        }
+        
+        p {
+            margin-bottom: 15px;
+            color: #4b5563;
+        }
+        
+        ul {
+            margin-left: 20px;
+            margin-bottom: 15px;
+        }
+        
+        li {
+            margin-bottom: 8px;
+            color: #4b5563;
+        }
+        
+        .highlight {
+            background-color: #dbeafe;
+            padding: 15px;
+            border-left: 4px solid #2563eb;
+            margin: 20px 0;
+        }
+        
+        footer {
+            margin-top: 50px;
+            padding-top: 20px;
+            border-top: 1px solid #e5e7eb;
+            text-align: center;
+            color: #6b7280;
+            font-size: 0.9rem;
+        }
+        
+        a {
+            color: #2563eb;
+            text-decoration: none;
+        }
+        
+        a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🏛️ Privacy Policy</h1>
+            <p class="last-updated">Last Updated: April 26, 2026</p>
+        </header>
+
+        <section>
+            <p><strong>Open Navigator for Engagement</strong> ("we," "our," or "us") is committed to protecting your privacy. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our platform.</p>
+        </section>
+
+        <section>
+            <h2>1. Information We Collect</h2>
+            
+            <h3>1.1 Information You Provide</h3>
+            <p>When you create an account or use our services, we may collect:</p>
+            <ul>
+                <li><strong>Account Information:</strong> Email address, name, and profile information</li>
+                <li><strong>OAuth Provider Data:</strong> When you log in via Google, Facebook, GitHub, or HuggingFace, we receive your public profile information and email address</li>
+                <li><strong>User Preferences:</strong> Settings and preferences you configure within the application</li>
+            </ul>
+
+            <h3>1.2 Automatically Collected Information</h3>
+            <ul>
+                <li><strong>Usage Data:</strong> Pages visited, features used, and interactions with the platform</li>
+                <li><strong>Device Information:</strong> Browser type, operating system, IP address</li>
+                <li><strong>Cookies:</strong> We use essential cookies for authentication and session management</li>
+            </ul>
+        </section>
+
+        <section>
+            <h2>2. How We Use Your Information</h2>
+            <p>We use the collected information to:</p>
+            <ul>
+                <li>Provide, maintain, and improve our services</li>
+                <li>Authenticate your account and maintain security</li>
+                <li>Personalize your experience on the platform</li>
+                <li>Send important updates about the service</li>
+                <li>Analyze usage patterns to improve functionality</li>
+                <li>Comply with legal obligations</li>
+            </ul>
+        </section>
+
+        <section>
+            <h2>3. Third-Party Authentication</h2>
+            <div class="highlight">
+                <p><strong>OAuth Providers:</strong> We support login via Google, Facebook, GitHub, and HuggingFace. When you use these services:</p>
+                <ul>
+                    <li>We only request access to your email address and basic profile information</li>
+                    <li>We do not store your social media passwords</li>
+                    <li>We do not post to your social media accounts</li>
+                    <li>You can revoke our access at any time through your provider's settings</li>
+                </ul>
+            </div>
+        </section>
+
+        <section>
+            <h2>4. Data Storage and Security</h2>
+            <p>We implement appropriate technical and organizational measures to protect your information:</p>
+            <ul>
+                <li><strong>Encryption:</strong> Data is encrypted in transit using HTTPS/TLS</li>
+                <li><strong>Access Controls:</strong> Strict access controls limit who can access your data</li>
+                <li><strong>Secure Authentication:</strong> JWT tokens with secure secret keys</li>
+                <li><strong>Regular Updates:</strong> We keep our systems updated with security patches</li>
+            </ul>
+            <p>However, no method of transmission over the internet is 100% secure, and we cannot guarantee absolute security.</p>
+        </section>
+
+        <section>
+            <h2>5. Data Sharing and Disclosure</h2>
+            <p>We do not sell your personal information. We may share your information only in the following circumstances:</p>
+            <ul>
+                <li><strong>With Your Consent:</strong> When you explicitly authorize us to share information</li>
+                <li><strong>Service Providers:</strong> With trusted third-party services that help us operate (e.g., hosting providers)</li>
+                <li><strong>Legal Requirements:</strong> When required by law, court order, or governmental authority</li>
+                <li><strong>Business Transfers:</strong> In connection with a merger, acquisition, or sale of assets</li>
+            </ul>
+        </section>
+
+        <section>
+            <h2>6. Public Data Sources</h2>
+            <p>Our platform aggregates publicly available information from:</p>
+            <ul>
+                <li>City council meeting minutes and transcripts</li>
+                <li>Government public records and budgets</li>
+                <li>Nonprofit organization databases (IRS Form 990 data)</li>
+                <li>Legislative information from state and local governments</li>
+            </ul>
+            <p>This public information is not considered personal data and is used to provide civic engagement insights.</p>
+        </section>
+
+        <section>
+            <h2>7. Your Rights and Choices</h2>
+            <p>You have the following rights regarding your personal information:</p>
+            <ul>
+                <li><strong>Access:</strong> Request a copy of the personal information we hold about you</li>
+                <li><strong>Correction:</strong> Request correction of inaccurate information</li>
+                <li><strong>Deletion:</strong> Request deletion of your account and personal data</li>
+                <li><strong>Data Portability:</strong> Request your data in a portable format</li>
+                <li><strong>Opt-Out:</strong> Unsubscribe from non-essential communications</li>
+            </ul>
+            <p>To exercise these rights, contact us at the email address provided below.</p>
+        </section>
+
+        <section>
+            <h2>8. Children's Privacy</h2>
+            <p>Our service is not intended for children under 13 years of age. We do not knowingly collect personal information from children under 13. If you become aware that a child has provided us with personal information, please contact us, and we will delete such information.</p>
+        </section>
+
+        <section>
+            <h2>9. Data Retention</h2>
+            <p>We retain your personal information for as long as necessary to:</p>
+            <ul>
+                <li>Provide our services to you</li>
+                <li>Comply with legal obligations</li>
+                <li>Resolve disputes and enforce our agreements</li>
+            </ul>
+            <p>When you delete your account, we will delete or anonymize your personal information within 30 days, except where required to retain it by law.</p>
+        </section>
+
+        <section>
+            <h2>10. International Data Transfers</h2>
+            <p>Your information may be transferred to and processed in countries other than your country of residence. We ensure appropriate safeguards are in place to protect your information in accordance with this Privacy Policy.</p>
+        </section>
+
+        <section>
+            <h2>11. Changes to This Privacy Policy</h2>
+            <p>We may update this Privacy Policy from time to time. We will notify you of any changes by:</p>
+            <ul>
+                <li>Posting the new Privacy Policy on this page</li>
+                <li>Updating the "Last Updated" date</li>
+                <li>Sending you an email notification (for material changes)</li>
+            </ul>
+            <p>Your continued use of our services after changes constitutes acceptance of the updated policy.</p>
+        </section>
+
+        <section>
+            <h2>12. Contact Us</h2>
+            <p>If you have questions about this Privacy Policy or our privacy practices, please contact us:</p>
+            <ul>
+                <li><strong>Email:</strong> privacy@communityone.com</li>
+                <li><strong>Website:</strong> <a href="https://www.communityone.com">www.communityone.com</a></li>
+                <li><strong>GitHub:</strong> <a href="https://github.com/getcommunityone/open-navigator-for-engagement">github.com/getcommunityone/open-navigator-for-engagement</a></li>
+            </ul>
+        </section>
+
+        <section>
+            <h2>13. Additional Information for EU/UK Users (GDPR)</h2>
+            <p>If you are located in the European Union or United Kingdom, you have additional rights under GDPR:</p>
+            <ul>
+                <li><strong>Legal Basis:</strong> We process your data based on consent, contract performance, and legitimate interests</li>
+                <li><strong>Data Protection Officer:</strong> You may contact our DPO at privacy@communityone.com</li>
+                <li><strong>Supervisory Authority:</strong> You have the right to lodge a complaint with your local data protection authority</li>
+                <li><strong>Automated Decision-Making:</strong> We do not use automated decision-making or profiling that produces legal effects</li>
+            </ul>
+        </section>
+
+        <section>
+            <h2>14. California Privacy Rights (CCPA)</h2>
+            <p>If you are a California resident, you have specific rights under the California Consumer Privacy Act (CCPA):</p>
+            <ul>
+                <li><strong>Right to Know:</strong> What personal information we collect, use, and share</li>
+                <li><strong>Right to Delete:</strong> Request deletion of your personal information</li>
+                <li><strong>Right to Opt-Out:</strong> Opt-out of the sale of personal information (we do not sell your data)</li>
+                <li><strong>Non-Discrimination:</strong> We will not discriminate against you for exercising your rights</li>
+            </ul>
+        </section>
+
+        <footer>
+            <p>&copy; 2026 Community One. All rights reserved.</p>
+            <p>Open Navigator for Engagement is an open-source project licensed under the MIT License.</p>
+            <p><a href="https://www.communityone.com">Return to Home</a> | <a href="https://github.com/getcommunityone/open-navigator-for-engagement">View on GitHub</a></p>
+        </footer>
+    </div>
+</body>
+</html>

frontend/src/App.tsx

@@ -0,0 +1,66 @@
+import { Routes, Route } from 'react-router-dom'
+import Layout from './components/Layout'
+import Home from './pages/Home'
+import HomeModern from './pages/HomeModern'
+import Dashboard from './pages/Dashboard'
+import Analytics from './pages/Analytics'
+import Heatmap from './pages/Heatmap'
+import Documents from './pages/Documents'
+import Opportunities from './pages/Opportunities'
+import Nonprofits from './pages/Nonprofits'
+import NonprofitsHF from './pages/NonprofitsHF'
+import Settings from './pages/Settings'
+import PeopleFinder from './pages/PeopleFinder'
+import DebateFinder from './pages/DebateGrader'
+import Profile from './pages/Profile'
+import Explore from './pages/Explore'
+import Events from './pages/Events'
+import Services from './pages/Services'
+import Developers from './pages/Developers'
+import Hackathons from './pages/Hackathons'
+import OpenSource from './pages/OpenSource'
+import AdvocacyTopics from './pages/AdvocacyTopics'
+import FactChecking from './pages/FactChecking'
+import UnifiedSearch from './pages/UnifiedSearch'
+import JurisdictionsSearch from './pages/JurisdictionsSearch'
+
+function App() {
+  return (
+    <Routes>
+      {/* Modern home page without Layout (has its own header) */}
+      <Route path="/" element={<HomeModern />} />
+      
+      {/* Classic home page (if needed) */}
+      <Route path="/classic" element={<Layout />}>
+        <Route index element={<Home />} />
+      </Route>
+      
+      {/* All other pages with sidebar layout */}
+      <Route path="/" element={<Layout />}>
+        <Route path="explore" element={<Explore />} />
+        <Route path="search" element={<UnifiedSearch />} />
+        <Route path="jurisdictions" element={<JurisdictionsSearch />} />
+        <Route path="dashboard" element={<Dashboard />} />
+        <Route path="analytics" element={<Analytics />} />
+        <Route path="people" element={<PeopleFinder />} />
+        <Route path="heatmap" element={<Heatmap />} />
+        <Route path="documents" element={<Documents />} />
+        <Route path="opportunities" element={<Opportunities />} />
+        <Route path="nonprofits" element={<Nonprofits />} />
+        <Route path="nonprofits-hf" element={<NonprofitsHF />} />
+        <Route path="debate-grader" element={<DebateFinder />} />
+        <Route path="profile" element={<Profile />} />
+        <Route path="settings" element={<Settings />} />
+        <Route path="events" element={<Events />} />
+        <Route path="services" element={<Services />} />
+        <Route path="developers" element={<Developers />} />
+        <Route path="hackathons" element={<Hackathons />} />
+        <Route path="opensource" element={<OpenSource />} />
+        <Route path="advocacy-topics" element={<AdvocacyTopics />} />
+        <Route path="fact-checking" element={<FactChecking />} />
+      </Route>
+    </Routes>
+  )
+}
+
+export default App

frontend/src/components/AddressLookup.tsx

@@ -0,0 +1,671 @@
+import { useState, useEffect, useRef } from 'react'
+import { MapPinIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline'
+import { stateNameToCode } from '../utils/stateMapping'
+import { useLocation as useLocationContext } from '../contexts/LocationContext'
+
+interface LocationData {
+  address: string
+  state: string
+  county: string
+  city: string
+  latitude?: number
+  longitude?: number
+}
+
+interface AddressLookupProps {
+  onLocationFound: (location: LocationData) => void
+  initialAddress?: string
+  compact?: boolean
+}
+
+export default function AddressLookup({ onLocationFound, initialAddress = '', compact = false }: AddressLookupProps) {
+  const { clearLocation } = useLocationContext()
+  const [address, setAddress] = useState(initialAddress)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [suggestions, setSuggestions] = useState<any[]>([])
+  const [foundLocation, setFoundLocation] = useState<LocationData | null>(null)
+  const [showSuggestions, setShowSuggestions] = useState(false)
+  const [selectedIndex, setSelectedIndex] = useState(-1)
+  const debounceTimer = useRef<number | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Fetch suggestions as user types
+  const fetchSuggestions = async (query: string) => {
+    if (query.trim().length < 3) {
+      setSuggestions([])
+      setShowSuggestions(false)
+      return
+    }
+
+    try {
+      const response = await fetch(
+        `https://nominatim.openstreetmap.org/search?` +
+        `q=${encodeURIComponent(query)}&` +
+        `format=json&` +
+        `addressdetails=1&` +
+        `countrycodes=us&` +
+        `limit=5`,
+        {
+          headers: {
+            'User-Agent': 'CommunityOne-Navigator/1.0'
+          }
+        }
+      )
+
+      if (!response.ok) {
+        return
+      }
+
+      const data = await response.json()
+
+      // Deduplicate results using OSM unique IDs
+      const uniqueResults = data.reduce((acc: any[], current: any) => {
+        const osmKey = `${current.osm_type}_${current.osm_id}`
+        const exists = acc.some((item) => {
+          const itemKey = `${item.osm_type}_${item.osm_id}`
+          return itemKey === osmKey
+        })
+        if (!exists) {
+          acc.push(current)
+        }
+        return acc
+      }, [])
+
+      setSuggestions(uniqueResults)
+      setShowSuggestions(uniqueResults.length > 0)
+      setSelectedIndex(-1)
+    } catch (err) {
+      console.error('Autocomplete error:', err)
+    }
+  }
+
+  // Handle address input change with debouncing
+  const handleAddressChange = (value: string) => {
+    setAddress(value)
+    setError(null)
+
+    // Clear previous timer
+    if (debounceTimer.current) {
+      clearTimeout(debounceTimer.current)
+    }
+
+    // Set new timer
+    debounceTimer.current = setTimeout(() => {
+      fetchSuggestions(value)
+    }, 300)
+  }
+
+  // Cleanup timer on unmount
+  useEffect(() => {
+    return () => {
+      if (debounceTimer.current) {
+        clearTimeout(debounceTimer.current)
+      }
+    }
+  }, [])
+
+  const lookupAddress = async (addressToLookup: string) => {
+    if (!addressToLookup.trim()) {
+      setError('Please enter an address')
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+    setSuggestions([])
+    setShowSuggestions(false)
+
+    try {
+      // Use Nominatim (OpenStreetMap) geocoding service
+      const response = await fetch(
+        `https://nominatim.openstreetmap.org/search?` +
+        `q=${encodeURIComponent(addressToLookup)}&` +
+        `format=json&` +
+        `addressdetails=1&` +
+        `countrycodes=us&` +
+        `limit=5`,
+        {
+          headers: {
+            'User-Agent': 'CommunityOne-Navigator/1.0'
+          }
+        }
+      )
+
+      if (!response.ok) {
+        throw new Error('Failed to lookup address')
+      }
+
+      const data = await response.json()
+
+      if (data.length === 0) {
+        setError('Address not found. Please try a different address or be more specific.')
+        return
+      }
+
+      // Deduplicate results using OSM unique IDs
+      const uniqueResults = data.reduce((acc: any[], current: any) => {
+        // Use OSM type + ID as unique key (most reliable)
+        const osmKey = `${current.osm_type}_${current.osm_id}`
+        
+        const exists = acc.some((item) => {
+          const itemKey = `${item.osm_type}_${item.osm_id}`
+          return itemKey === osmKey
+        })
+        
+        if (!exists) {
+          acc.push(current)
+        }
+        return acc
+      }, [])
+
+      // If we have multiple unique results, show suggestions
+      if (uniqueResults.length > 1) {
+        setSuggestions(uniqueResults)
+        setShowSuggestions(true)
+        return
+      }
+
+      // Single result - process it
+      processResult(uniqueResults[0])
+    } catch (err) {
+      console.error('Address lookup error:', err)
+      setError('Failed to lookup address. Please try again.')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const processResult = (result: any) => {
+    const addr = result.address
+
+    // Convert state name to 2-letter code
+    const stateName = addr.state || ''
+    const stateCode = stateNameToCode(stateName)
+    console.log(`🗺️ [AddressLookup] State conversion: "${stateName}" → "${stateCode}"`)
+
+    const locationData: LocationData = {
+      address: result.display_name,
+      state: stateCode,
+      county: addr.county || '',
+      city: addr.city || addr.town || addr.village || addr.municipality || '',
+      latitude: parseFloat(result.lat),
+      longitude: parseFloat(result.lon),
+    }
+
+    // Validate we got the essential data
+    if (!locationData.state || !locationData.city) {
+      setError('Could not determine city and state from this address. Please be more specific.')
+      setSuggestions([])
+      setShowSuggestions(false)
+      return
+    }
+
+    console.log('📍 [AddressLookup] Location found:', locationData)
+    setSuggestions([])
+    setShowSuggestions(false)
+    setFoundLocation(locationData)
+    onLocationFound(locationData)
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    // If a suggestion is selected, use that
+    if (selectedIndex >= 0 && suggestions[selectedIndex]) {
+      processResult(suggestions[selectedIndex])
+    } else {
+      lookupAddress(address)
+    }
+  }
+
+  const handleSuggestionClick = (suggestion: any) => {
+    setAddress(suggestion.display_name)
+    processResult(suggestion)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!showSuggestions || suggestions.length === 0) return
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault()
+        setSelectedIndex(prev => 
+          prev < suggestions.length - 1 ? prev + 1 : prev
+        )
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        setSelectedIndex(prev => prev > 0 ? prev - 1 : -1)
+        break
+      case 'Enter':
+        if (selectedIndex >= 0) {
+          e.preventDefault()
+          processResult(suggestions[selectedIndex])
+        }
+        break
+      case 'Escape':
+        setShowSuggestions(false)
+        setSelectedIndex(-1)
+        break
+    }
+  }
+
+  const useMyLocation = () => {
+    if (!navigator.geolocation) {
+      setError('Geolocation is not supported by your browser')
+      return
+    }
+
+    setIsLoading(true)
+    setError(null)
+    setSuggestions([])
+
+    navigator.geolocation.getCurrentPosition(
+      async (position) => {
+        const { latitude, longitude } = position.coords
+
+        try {
+          // Reverse geocode using Nominatim
+          const response = await fetch(
+            `https://nominatim.openstreetmap.org/reverse?` +
+            `lat=${latitude}&` +
+            `lon=${longitude}&` +
+            `format=json&` +
+            `addressdetails=1`,
+            {
+              headers: {
+                'User-Agent': 'CommunityOne-Navigator/1.0'
+              }
+            }
+          )
+
+          if (!response.ok) {
+            throw new Error('Failed to reverse geocode location')
+          }
+
+          const data = await response.json()
+          
+          // Update the address input field
+          setAddress(data.display_name)
+          
+          // Process the result
+          processResult(data)
+        } catch (err) {
+          console.error('Reverse geocoding error:', err)
+          setError('Failed to determine your location. Please enter your address manually.')
+        } finally {
+          setIsLoading(false)
+        }
+      },
+      (error) => {
+        console.error('Geolocation error:', error)
+        setIsLoading(false)
+        
+        switch (error.code) {
+          case error.PERMISSION_DENIED:
+            setError('Location access denied. Please enter your address manually or enable location permissions.')
+            break
+          case error.POSITION_UNAVAILABLE:
+            setError('Location information unavailable. Please enter your address manually.')
+            break
+          case error.TIMEOUT:
+            setError('Location request timed out. Please try again or enter your address manually.')
+            break
+          default:
+            setError('An error occurred while getting your location. Please enter your address manually.')
+        }
+      },
+      {
+        enableHighAccuracy: false,  // Use fast network-based location instead of GPS
+        timeout: 5000,              // Reduced timeout since network location is faster
+        maximumAge: 30000           // Allow 30s cached location for faster response
+      }
+    )
+  }
+
+  if (compact) {
+    return (
+      <form onSubmit={handleSubmit} className="w-full">
+        <div className="relative">
+          <input
+            key="address-input-compact"
+            ref={inputRef}
+            type="text"
+            value={address}
+            onChange={(e) => handleAddressChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Enter your address..."
+            className="w-full px-4 py-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-gray-900"
+            disabled={isLoading}
+            autoComplete="off"
+          />
+          <MapPinIcon className="absolute left-3 top-2.5 h-5 w-5 text-gray-400" />
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="absolute right-2 top-1.5 px-3 py-1 text-white rounded-md transition-colors text-sm disabled:opacity-50"
+            style={{ backgroundColor: '#354F52' }}
+            onMouseEnter={(e) => !isLoading && (e.currentTarget.style.backgroundColor = '#2e4346')}
+            onMouseLeave={(e) => !isLoading && (e.currentTarget.style.backgroundColor = '#354F52')}
+          >
+            {isLoading ? 'Finding...' : 'Find'}
+          </button>
+          
+          {/* Autocomplete suggestions dropdown */}
+          {showSuggestions && suggestions.length > 0 && (
+            <div className="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+              {suggestions.map((suggestion, index) => {
+                const addr = suggestion.address
+                const locationName = addr.city || addr.town || addr.village || addr.county || 'Unknown'
+                return (
+                  <button
+                    key={`${suggestion.osm_type}_${suggestion.osm_id}`}
+                    type="button"
+                    onClick={() => handleSuggestionClick(suggestion)}
+                    className={`w-full px-4 py-2 text-left hover:bg-gray-100 transition-colors ${
+                      index === selectedIndex ? 'bg-gray-100' : ''
+                    }`}
+                  >
+                    <p className="text-sm font-medium text-gray-900">
+                      {suggestion.display_name}
+                    </p>
+                    <p className="text-xs text-gray-500">
+                      {locationName}, {addr.state}
+                    </p>
+                  </button>
+                )
+              })}
+            </div>
+          )}
+        </div>
+        {error && (
+          <p className="mt-2 text-sm text-red-600">{error}</p>
+        )}
+      </form>
+    )
+  }
+
+  return (
+    <div className="w-full">
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-2">
+            <span className="flex items-center gap-2">
+              <MapPinIcon className="h-5 w-5" />
+              Enter Your Address
+            </span>
+          </label>
+          <div className="relative">
+            <input
+              key="address-input"
+              ref={inputRef}
+              type="text"
+              id="address"
+              name="addresslookup"
+              value={address}
+              onChange={(e) => handleAddressChange(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="123 Main St, Los Angeles, CA 90001"
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 text-base text-gray-900"
+              disabled={isLoading}
+              autoComplete="off"
+            />
+            
+            {/* Autocomplete suggestions dropdown */}
+            {showSuggestions && suggestions.length > 0 && (
+              <div className="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+                {suggestions.map((suggestion, index) => {
+                  const addr = suggestion.address
+                  const locationName = addr.city || addr.town || addr.village || addr.county || 'Unknown'
+                  return (
+                    <button
+                      key={`${suggestion.osm_type}_${suggestion.osm_id}`}
+                      type="button"
+                      onClick={() => handleSuggestionClick(suggestion)}
+                      className={`w-full px-4 py-3 text-left hover:bg-gray-100 transition-colors border-b border-gray-100 last:border-b-0 ${
+                        index === selectedIndex ? 'bg-gray-100' : ''
+                      }`}
+                    >
+                      <p className="text-sm font-medium text-gray-900">
+                        {suggestion.display_name}
+                      </p>
+                      <p className="text-xs text-gray-500 mt-1">
+                        {locationName}, {addr.state}
+                      </p>
+                    </button>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+          <p className="mt-1 text-xs text-gray-500">
+            We'll find your local organizations based on your address
+          </p>
+          
+          {/* Use My Location Button */}
+          <div className="mt-3">
+            <button
+              type="button"
+              onClick={useMyLocation}
+              disabled={isLoading}
+              className="w-full px-4 py-2 bg-white border-2 border-primary-300 text-primary-700 rounded-lg hover:bg-primary-50 hover:border-primary-500 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+            >
+              <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+              <span>Use My Current Location</span>
+            </button>
+          </div>
+
+          {/* Divider */}
+          <div className="relative my-4">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-300"></div>
+            </div>
+            <div className="relative flex justify-center text-xs">
+              <span className="px-2 bg-white text-gray-500">or enter manually</span>
+            </div>
+          </div>
+        </div>
+
+        <button
+          type="submit"
+          disabled={isLoading}
+          className="w-full px-6 py-3 text-white rounded-lg transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+          style={{ backgroundColor: '#354F52' }}
+          onMouseEnter={(e) => !isLoading && (e.currentTarget.style.backgroundColor = '#2e4346')}
+          onMouseLeave={(e) => !isLoading && (e.currentTarget.style.backgroundColor = '#354F52')}
+        >
+          {isLoading ? (
+            <>
+              <div className="animate-spin h-5 w-5 border-2 border-white border-t-transparent rounded-full"></div>
+              <span>Looking up address...</span>
+            </>
+          ) : (
+            <>
+              <MagnifyingGlassIcon className="h-5 w-5" />
+              <span>Find My Community</span>
+            </>
+          )}
+        </button>
+      </form>
+
+      {/* Error Message */}
+      {error && (
+        <div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
+          <p className="text-sm text-red-800">{error}</p>
+        </div>
+      )}
+
+      {/* Note: Suggestions now appear as autocomplete dropdown above */}
+
+      {/* Location Results */}
+      {foundLocation && !compact && (
+        <div className="mt-6 border-2 border-primary-200 rounded-lg overflow-hidden bg-primary-50">
+          <div className="bg-primary-600 px-4 py-3 flex items-center justify-between">
+            <h3 className="text-lg font-semibold text-white flex items-center gap-2">
+              <MapPinIcon className="h-5 w-5" />
+              Your Local Community
+            </h3>
+            <button
+              onClick={() => window.location.href = '/'}
+              className="text-sm text-white hover:text-primary-100 underline font-medium"
+            >
+              ← Back to Home
+            </button>
+          </div>
+          <div className="p-6 space-y-4">
+            <p className="text-sm text-gray-700 mb-4">
+              Select a jurisdiction level below to explore organizations, meeting minutes, and contacts:
+            </p>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {/* City */}
+              {foundLocation.city && (
+                <button
+                  onClick={() => {
+                    window.location.href = `/?scope=city`
+                  }}
+                  className="bg-white rounded-lg p-4 shadow-sm hover:shadow-md hover:border-2 hover:border-blue-500 transition-all text-left w-full group"
+                >
+                  <div className="flex items-start gap-3">
+                    <div className="p-2 bg-blue-100 rounded-lg group-hover:bg-blue-200 transition-colors">
+                      <svg className="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                      </svg>
+                    </div>
+                    <div className="flex-1">
+                      <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">City</p>
+                      <p className="text-lg font-semibold text-gray-900 mt-1 group-hover:text-blue-600">{foundLocation.city}</p>
+                      <p className="text-sm text-gray-600 mt-1">City Council</p>
+                      <p className="text-xs text-blue-600 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                        Click to explore →
+                      </p>
+                    </div>
+                  </div>
+                </button>
+              )}
+
+              {/* County */}
+              {foundLocation.county && (
+                <button
+                  onClick={() => {
+                    window.location.href = `/?scope=county`
+                  }}
+                  className="bg-white rounded-lg p-4 shadow-sm hover:shadow-md hover:border-2 hover:border-green-500 transition-all text-left w-full group"
+                >
+                  <div className="flex items-start gap-3">
+                    <div className="p-2 bg-green-100 rounded-lg group-hover:bg-green-200 transition-colors">
+                      <svg className="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
+                      </svg>
+                    </div>
+                    <div className="flex-1">
+                      <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">County</p>
+                      <p className="text-lg font-semibold text-gray-900 mt-1 group-hover:text-green-600">{foundLocation.county}</p>
+                      <p className="text-sm text-gray-600 mt-1">County Board</p>
+                      <p className="text-xs text-green-600 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                        Click to explore →
+                      </p>
+                    </div>
+                  </div>
+                </button>
+              )}
+
+              {/* State */}
+              {foundLocation.state && (
+                <button
+                  onClick={() => {
+                    window.location.href = `/?scope=state`
+                  }}
+                  className="bg-white rounded-lg p-4 shadow-sm hover:shadow-md hover:border-2 hover:border-purple-500 transition-all text-left w-full group"
+                >
+                  <div className="flex items-start gap-3">
+                    <div className="p-2 bg-purple-100 rounded-lg group-hover:bg-purple-200 transition-colors">
+                      <svg className="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
+                      </svg>
+                    </div>
+                    <div className="flex-1">
+                      <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">State</p>
+                      <p className="text-lg font-semibold text-gray-900 mt-1 group-hover:text-purple-600">{foundLocation.state}</p>
+                      <p className="text-sm text-gray-600 mt-1">State Legislature</p>
+                      <p className="text-xs text-purple-600 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                        Click to explore →
+                      </p>
+                    </div>
+                  </div>
+                </button>
+              )}
+
+              {/* School District */}
+              {foundLocation.city && (
+                <button
+                  onClick={() => {
+                    window.location.href = `/?scope=community`
+                  }}
+                  className="bg-white rounded-lg p-4 shadow-sm hover:shadow-md hover:border-2 hover:border-amber-500 transition-all text-left w-full group"
+                >
+                  <div className="flex items-start gap-3">
+                    <div className="p-2 bg-amber-100 rounded-lg group-hover:bg-amber-200 transition-colors">
+                      <svg className="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                      </svg>
+                    </div>
+                    <div className="flex-1">
+                      <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">School District</p>
+                      <p className="text-lg font-semibold text-gray-900 mt-1 group-hover:text-amber-600">{foundLocation.city} Unified</p>
+                      <p className="text-sm text-gray-600 mt-1">School Board</p>
+                      <p className="text-xs text-amber-600 mt-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                        Click to explore →
+                      </p>
+                    </div>
+                  </div>
+                </button>
+              )}
+            </div>
+
+            {/* Action Buttons */}
+            <div className="pt-4 border-t border-primary-200">
+              <p className="text-sm text-gray-600 mb-3">Quick access to all local resources:</p>
+              <div className="flex flex-wrap gap-3">
+                <button
+                  onClick={() => {
+                    window.location.href = `/documents?state=${foundLocation.state}&city=${foundLocation.city}`
+                  }}
+                  className="flex-1 min-w-[200px] px-4 py-2 bg-white border-2 border-primary-600 text-primary-700 rounded-lg hover:bg-primary-50 transition-colors font-medium"
+                >
+                  📄 All Meeting Minutes
+                </button>
+                <button
+                  onClick={() => {
+                    window.location.href = `/nonprofits?state=${foundLocation.state}&city=${foundLocation.city}`
+                  }}
+                  className="flex-1 min-w-[200px] px-4 py-2 bg-white border-2 border-primary-600 text-primary-700 rounded-lg hover:bg-primary-50 transition-colors font-medium"
+                >
+                  🏢 All Local Organizations
+                </button>
+              </div>
+            </div>
+
+            {/* Start Over */}
+            <div className="text-center pt-2">
+              <button
+                onClick={() => {
+                  setFoundLocation(null)
+                  setAddress('')
+                  setError(null)
+                  clearLocation() // Clear the global location context
+                }}
+                className="text-sm text-primary-600 hover:text-primary-700 font-medium underline"
+              >
+                Search Different Address
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

frontend/src/components/FollowButton.tsx

@@ -0,0 +1,160 @@
+import { useState } from 'react'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import axios from 'axios'
+import { UserPlusIcon, UserMinusIcon } from '@heroicons/react/24/outline'
+import { CheckIcon } from '@heroicons/react/24/solid'
+
+interface FollowButtonProps {
+  type: 'user' | 'leader' | 'organization' | 'cause'
+  id: number
+  initialFollowing?: boolean
+  initialCount?: number
+  showCount?: boolean
+  compact?: boolean
+  onFollowChange?: (following: boolean, count: number) => void
+}
+
+export default function FollowButton({
+  type,
+  id,
+  initialFollowing = false,
+  initialCount = 0,
+  showCount = true,
+  compact = false,
+  onFollowChange
+}: FollowButtonProps) {
+  const [isFollowing, setIsFollowing] = useState(initialFollowing)
+  const [followerCount, setFollowerCount] = useState(initialCount)
+  const [isHovered, setIsHovered] = useState(false)
+  const queryClient = useQueryClient()
+
+  const followMutation = useMutation({
+    mutationFn: async () => {
+      const endpoint = `/api/social/follow/${type}/${id}`
+      const response = await axios.post(endpoint)
+      return response.data
+    },
+    onSuccess: (data) => {
+      setIsFollowing(true)
+      setFollowerCount(data.follower_count)
+      onFollowChange?.(true, data.follower_count)
+      // Invalidate relevant queries
+      queryClient.invalidateQueries({ queryKey: ['social', 'stats'] })
+      queryClient.invalidateQueries({ queryKey: ['following', type] })
+    }
+  })
+
+  const unfollowMutation = useMutation({
+    mutationFn: async () => {
+      const endpoint = `/api/social/follow/${type}/${id}`
+      const response = await axios.delete(endpoint)
+      return response.data
+    },
+    onSuccess: (data) => {
+      setIsFollowing(false)
+      setFollowerCount(data.follower_count)
+      onFollowChange?.(false, data.follower_count)
+      // Invalidate relevant queries
+      queryClient.invalidateQueries({ queryKey: ['social', 'stats'] })
+      queryClient.invalidateQueries({ queryKey: ['following', type] })
+    }
+  })
+
+  const handleClick = () => {
+    if (isFollowing) {
+      unfollowMutation.mutate()
+    } else {
+      followMutation.mutate()
+    }
+  }
+
+  const isLoading = followMutation.isPending || unfollowMutation.isPending
+
+  // LinkedIn/Facebook style button
+  if (compact) {
+    return (
+      <button
+        onClick={handleClick}
+        disabled={isLoading}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        className={`
+          inline-flex items-center gap-1.5 px-4 py-1.5 rounded-full text-sm font-medium
+          transition-all duration-200 border
+          ${isFollowing 
+            ? isHovered
+              ? 'bg-red-50 border-red-300 text-red-700 hover:bg-red-100'
+              : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
+            : 'bg-blue-600 border-blue-600 text-white hover:bg-blue-700'
+          }
+          disabled:opacity-50 disabled:cursor-not-allowed
+        `}
+      >
+        {isLoading ? (
+          <span className="h-4 w-4 border-2 border-t-transparent border-current rounded-full animate-spin" />
+        ) : isFollowing ? (
+          <>
+            {isHovered ? (
+              <UserMinusIcon className="h-4 w-4" />
+            ) : (
+              <CheckIcon className="h-4 w-4" />
+            )}
+            <span>{isHovered ? 'Unfollow' : 'Following'}</span>
+          </>
+        ) : (
+          <>
+            <UserPlusIcon className="h-4 w-4" />
+            <span>Follow</span>
+          </>
+        )}
+      </button>
+    )
+  }
+
+  // Full button with count
+  return (
+    <div className="inline-flex items-center gap-3">
+      <button
+        onClick={handleClick}
+        disabled={isLoading}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        className={`
+          inline-flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-semibold
+          transition-all duration-200 border-2
+          ${isFollowing 
+            ? isHovered
+              ? 'bg-red-50 border-red-400 text-red-700 hover:bg-red-100'
+              : 'bg-white border-gray-300 text-gray-700 hover:border-gray-400'
+            : 'bg-blue-600 border-blue-600 text-white hover:bg-blue-700'
+          }
+          disabled:opacity-50 disabled:cursor-not-allowed shadow-sm hover:shadow-md
+        `}
+      >
+        {isLoading ? (
+          <span className="h-5 w-5 border-2 border-t-transparent border-current rounded-full animate-spin" />
+        ) : isFollowing ? (
+          <>
+            {isHovered ? (
+              <UserMinusIcon className="h-5 w-5" />
+            ) : (
+              <CheckIcon className="h-5 w-5" />
+            )}
+            <span>{isHovered ? 'Unfollow' : 'Following'}</span>
+          </>
+        ) : (
+          <>
+            <UserPlusIcon className="h-5 w-5" />
+            <span>Follow</span>
+          </>
+        )}
+      </button>
+      
+      {showCount && (
+        <span className="text-sm text-gray-600">
+          {followerCount.toLocaleString()} {followerCount === 1 ? 'follower' : 'followers'}
+        </span>
+      )}
+    </div>
+  )
+}

frontend/src/components/JurisdictionDiscovery.tsx

@@ -0,0 +1,268 @@
+import { useState } from 'react'
+import { 
+  ChevronDownIcon, 
+  ChevronUpIcon,
+  CheckCircleIcon,
+  GlobeAltIcon,
+  VideoCameraIcon,
+  DocumentTextIcon,
+  ShareIcon
+} from '@heroicons/react/24/outline'
+
+interface JurisdictionDiscoveryProps {
+  jurisdiction: {
+    name: string
+    state: string
+    website?: string
+    youtube_channels?: string[]
+    facebook?: string
+    twitter?: string
+    agenda_portal?: string
+    meeting_platform?: string
+    completeness: number
+  }
+}
+
+export default function JurisdictionDiscovery({ jurisdiction }: JurisdictionDiscoveryProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const hasData = jurisdiction.website || jurisdiction.youtube_channels?.length || jurisdiction.facebook
+
+  return (
+    <div className="border border-gray-200 rounded-lg bg-white hover:shadow-md transition-shadow">
+      {/* Header - Always Visible */}
+      <div className="p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex-1">
+            <div className="flex items-center gap-2">
+              <CheckCircleIcon className="h-5 w-5 text-green-600" />
+              <h3 className="font-bold text-gray-900 uppercase">
+                {jurisdiction.name}, {jurisdiction.state} - DISCOVERY COMPLETE!
+              </h3>
+            </div>
+            
+            {/* Summary Stats */}
+            <div className="mt-2 flex flex-wrap gap-3 text-sm text-gray-600">
+              {jurisdiction.website && (
+                <span className="flex items-center gap-1">
+                  <GlobeAltIcon className="h-4 w-4" />
+                  Website
+                </span>
+              )}
+              {jurisdiction.youtube_channels && jurisdiction.youtube_channels.length > 0 && (
+                <span className="flex items-center gap-1">
+                  <VideoCameraIcon className="h-4 w-4" />
+                  {jurisdiction.youtube_channels.length} YouTube Channel{jurisdiction.youtube_channels.length > 1 ? 's' : ''}
+                </span>
+              )}
+              {jurisdiction.agenda_portal && (
+                <span className="flex items-center gap-1">
+                  <DocumentTextIcon className="h-4 w-4" />
+                  Agenda Portal
+                </span>
+              )}
+              {(jurisdiction.facebook || jurisdiction.twitter) && (
+                <span className="flex items-center gap-1">
+                  <ShareIcon className="h-4 w-4" />
+                  Social Media
+                </span>
+              )}
+            </div>
+
+            {/* Completeness Bar */}
+            {hasData && (
+              <div className="mt-3">
+                <div className="flex items-center gap-2">
+                  <div className="flex-1 bg-gray-200 rounded-full h-2">
+                    <div 
+                      className="bg-green-600 h-2 rounded-full transition-all"
+                      style={{ width: `${jurisdiction.completeness}%` }}
+                    />
+                  </div>
+                  <span className="text-sm font-medium text-gray-700">
+                    {jurisdiction.completeness}%
+                  </span>
+                </div>
+                <p className="text-xs text-gray-500 mt-1">
+                  Completeness: ~{Math.round(jurisdiction.completeness)}% - {
+                    jurisdiction.completeness >= 75 ? 'Good' : 
+                    jurisdiction.completeness >= 50 ? 'Fair' : 
+                    'Limited'
+                  } digital infrastructure!
+                </p>
+              </div>
+            )}
+          </div>
+
+          {/* Expand/Collapse Button */}
+          {hasData && (
+            <button
+              onClick={() => setIsExpanded(!isExpanded)}
+              className="ml-4 p-2 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              {isExpanded ? (
+                <ChevronUpIcon className="h-5 w-5 text-gray-600" />
+              ) : (
+                <ChevronDownIcon className="h-5 w-5 text-gray-600" />
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Expandable Details */}
+      {isExpanded && hasData && (
+        <div className="border-t border-gray-200 p-4 bg-gray-50">
+          <h4 className="text-lg font-bold text-gray-900 mb-4">
+            🎯 {jurisdiction.name.toUpperCase()}, {jurisdiction.state} FINDINGS
+          </h4>
+
+          <div className="space-y-4">
+            {/* Website */}
+            {jurisdiction.website && (
+              <div>
+                <h5 className="font-semibold text-gray-700 mb-2">🌐 Official Website:</h5>
+                <a 
+                  href={jurisdiction.website}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-600 hover:underline flex items-center gap-2"
+                >
+                  ✅ {jurisdiction.website}
+                </a>
+              </div>
+            )}
+
+            {/* Agenda Portal */}
+            {jurisdiction.agenda_portal && (
+              <div>
+                <h5 className="font-semibold text-gray-700 mb-2">📄 Meeting/Agenda Portal:</h5>
+                <a 
+                  href={jurisdiction.agenda_portal}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-blue-600 hover:underline flex items-center gap-2"
+                >
+                  ✅ {jurisdiction.agenda_portal}
+                </a>
+              </div>
+            )}
+
+            {/* YouTube Channels */}
+            {jurisdiction.youtube_channels && jurisdiction.youtube_channels.length > 0 && (
+              <div>
+                <h5 className="font-semibold text-gray-700 mb-2">📺 YouTube Channels:</h5>
+                {jurisdiction.youtube_channels.map((channel, idx) => (
+                  <div key={idx} className="ml-4 text-blue-600 hover:underline">
+                    ✅ @{channel}
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Social Media */}
+            {(jurisdiction.facebook || jurisdiction.twitter) && (
+              <div>
+                <h5 className="font-semibold text-gray-700 mb-2">📱 Social Media:</h5>
+                <div className="ml-4 space-y-1">
+                  {jurisdiction.facebook && (
+                    <div className="text-blue-600">
+                      ✅ Facebook: {jurisdiction.facebook}
+                    </div>
+                  )}
+                  {jurisdiction.twitter && (
+                    <div className="text-blue-600">
+                      ✅ Twitter: {jurisdiction.twitter}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Meeting Platform */}
+            {jurisdiction.meeting_platform && (
+              <div>
+                <h5 className="font-semibold text-gray-700 mb-2">🏛️ Meeting Platform:</h5>
+                <div className="ml-4">
+                  {jurisdiction.meeting_platform}
+                </div>
+              </div>
+            )}
+
+            {/* Summary Table */}
+            <div className="mt-6 border-t border-gray-300 pt-4">
+              <h5 className="font-semibold text-gray-700 mb-3">📊 {jurisdiction.name.toUpperCase()} SUMMARY</h5>
+              <table className="min-w-full divide-y divide-gray-200 text-sm">
+                <thead>
+                  <tr className="bg-gray-100">
+                    <th className="px-3 py-2 text-left font-semibold">Category</th>
+                    <th className="px-3 py-2 text-left font-semibold">Found</th>
+                    <th className="px-3 py-2 text-left font-semibold">Details</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  <tr>
+                    <td className="px-3 py-2">Website</td>
+                    <td className="px-3 py-2">{jurisdiction.website ? '✅' : '❌'}</td>
+                    <td className="px-3 py-2 text-gray-600">
+                      {jurisdiction.website ? new URL(jurisdiction.website).hostname : 'Not found'}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="px-3 py-2">YouTube</td>
+                    <td className="px-3 py-2">{jurisdiction.youtube_channels?.length ? '✅' : '❌'}</td>
+                    <td className="px-3 py-2 text-gray-600">
+                      {jurisdiction.youtube_channels?.length || 0} channel{jurisdiction.youtube_channels?.length !== 1 ? 's' : ''}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="px-3 py-2">Agendas</td>
+                    <td className="px-3 py-2">{jurisdiction.agenda_portal ? '✅' : '❌'}</td>
+                    <td className="px-3 py-2 text-gray-600">
+                      {jurisdiction.agenda_portal ? 'Portal found' : 'Not available'}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="px-3 py-2">Social</td>
+                    <td className="px-3 py-2">{jurisdiction.facebook || jurisdiction.twitter ? '✅' : '❌'}</td>
+                    <td className="px-3 py-2 text-gray-600">
+                      {[jurisdiction.facebook && 'Facebook', jurisdiction.twitter && 'Twitter'].filter(Boolean).join(', ') || 'None'}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="px-3 py-2">Platform</td>
+                    <td className="px-3 py-2">{jurisdiction.meeting_platform ? '✅' : '❌'}</td>
+                    <td className="px-3 py-2 text-gray-600">
+                      {jurisdiction.meeting_platform || 'Unknown'}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            {/* Key Takeaway */}
+            <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+              <h5 className="font-semibold text-blue-900 mb-2">💡 KEY TAKEAWAY</h5>
+              <p className="text-sm text-blue-800">
+                The automation successfully discovered:
+              </p>
+              <ul className="mt-2 space-y-1 text-sm text-blue-800">
+                {jurisdiction.website && <li>✅ Official website (automatic)</li>}
+                {(jurisdiction.youtube_channels?.length ?? 0) > 0 && <li>✅ YouTube channels (automatic)</li>}
+                {jurisdiction.agenda_portal && <li>✅ Agenda portal (found via link scanning)</li>}
+                {(jurisdiction.facebook || jurisdiction.twitter) && <li>✅ Social media (automatic)</li>}
+              </ul>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* No Data Message */}
+      {!hasData && (
+        <div className="border-t border-gray-200 p-4 bg-gray-50 text-center text-gray-500">
+          <p>No discovery data available yet. Run discovery pipeline to populate.</p>
+        </div>
+      )}
+    </div>
+  )
+}