```index.tsx
import './index.css'
import React from "react";
import { render } from "react-dom";
import { App } from "./App";

render(<App />, document.getElementById("root"));

```
```App.tsx
import React from 'react'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import LandingPage from './pages/LandingPage'
import NGODashboard from './pages/NGODashboard'
import HouseholdManagement from './pages/HouseholdManagement'
import HouseholdProfile from './pages/HouseholdProfile'
import InterventionsPage from './pages/InterventionsPage'
import InterventionDetail from './pages/InterventionDetail'
import BeneficiaryDashboard from './pages/BeneficiaryDashboard'
import SearchDiscovery from './pages/SearchDiscovery'
import ReportsPage from './pages/ReportsPage'
export function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<LandingPage />} />
        <Route path="/ngo-dashboard" element={<NGODashboard />} />
        <Route path="/households" element={<HouseholdManagement />} />
        <Route path="/households/:id" element={<HouseholdProfile />} />
        <Route path="/interventions" element={<InterventionsPage />} />
        <Route path="/interventions/:id" element={<InterventionDetail />} />
        <Route
          path="/beneficiary-dashboard"
          element={<BeneficiaryDashboard />}
        />
        <Route path="/search" element={<SearchDiscovery />} />
        <Route path="/reports" element={<ReportsPage />} />
      </Routes>
    </Router>
  )
}

```
```AppRouter.tsx
import React from "react";
  import { BrowserRouter, Routes, Route } from "react-router-dom";
  import { App } from "./App";

  export function AppRouter() {
    return (
      <BrowserRouter>
          <Routes>
            <Route path="/" element={<App />} />
          </Routes>
      </BrowserRouter>
    );
  }
```
```tailwind.config.js
export default {}
```
```index.css
/* PLEASE NOTE: THESE TAILWIND IMPORTS SHOULD NEVER BE DELETED */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* DO NOT DELETE THESE TAILWIND IMPORTS, OTHERWISE THE STYLING WILL NOT RENDER AT ALL */
```
```data/households.json
[
  {
    "id": "hh_NAI001",
    "code": "NAI001",
    "location": {
      "county": "Nairobi",
      "subCounty": "Kibera",
      "landmark": "Near Olympic Primary"
    },
    "headOfHousehold": "ind_001",
    "incomeSources": ["informal labor"],
    "housingType": "semi-permanent",
    "verificationStatus": "verified",
    "memberIds": ["ind_001", "ind_002", "ind_003", "ind_004"]
  },
  {
    "id": "hh_NAI002",
    "code": "NAI002",
    "location": {
      "county": "Nairobi",
      "subCounty": "Mathare",
      "landmark": "Near Mathare Hospital"
    },
    "headOfHousehold": "ind_005",
    "incomeSources": ["small business"],
    "housingType": "temporary",
    "verificationStatus": "pending",
    "memberIds": ["ind_005", "ind_006", "ind_007"]
  },
  {
    "id": "hh_MOM001",
    "code": "MOM001",
    "location": {
      "county": "Mombasa",
      "subCounty": "Likoni",
      "landmark": "Near Likoni Ferry"
    },
    "headOfHousehold": "ind_008",
    "incomeSources": ["fishing"],
    "housingType": "permanent",
    "verificationStatus": "verified",
    "memberIds": ["ind_008", "ind_009", "ind_010"]
  }
]
```
```data/individuals.json
[
  {
    "id": "ind_001",
    "householdId": "hh_NAI001",
    "name": "Ahmed Abdullahi",
    "age": 45,
    "gender": "M",
    "nationalId": "12345678",
    "education": "Primary",
    "skills": ["masonry"],
    "needs": ["stable income"]
  },
  {
    "id": "ind_002",
    "householdId": "hh_NAI001",
    "name": "Fatima Mohamed",
    "age": 40,
    "gender": "F",
    "nationalId": "87654321",
    "education": "Secondary",
    "skills": ["tailoring"],
    "needs": ["sewing machine"]
  },
  {
    "id": "ind_003",
    "householdId": "hh_NAI001",
    "name": "Juma Ahmed",
    "age": 18,
    "gender": "M",
    "nationalId": "11112222",
    "education": "Secondary graduate",
    "skills": ["plumbing"],
    "needs": ["plumbing training"]
  },
  {
    "id": "ind_004",
    "householdId": "hh_NAI001",
    "name": "Amina Ahmed",
    "age": 12,
    "gender": "F",
    "birthCertificate": "BC-334455",
    "education": "Primary school",
    "skills": [],
    "needs": ["school fees"]
  },
  {
    "id": "ind_005",
    "householdId": "hh_NAI002",
    "name": "Hassan Omar",
    "age": 50,
    "gender": "M",
    "nationalId": "23456789",
    "education": "None",
    "skills": ["carpentry"],
    "needs": ["tools"]
  },
  {
    "id": "ind_006",
    "householdId": "hh_NAI002",
    "name": "Halima Hassan",
    "age": 45,
    "gender": "F",
    "nationalId": "34567890",
    "education": "Primary",
    "skills": ["cooking"],
    "needs": ["business startup"]
  },
  {
    "id": "ind_007",
    "householdId": "hh_NAI002",
    "name": "Aisha Hassan",
    "age": 15,
    "gender": "F",
    "birthCertificate": "BC-445566",
    "education": "Secondary school",
    "skills": [],
    "needs": ["school fees"]
  },
  {
    "id": "ind_008",
    "householdId": "hh_MOM001",
    "name": "Ibrahim Ali",
    "age": 55,
    "gender": "M",
    "nationalId": "45678901",
    "education": "Primary",
    "skills": ["fishing"],
    "needs": ["fishing equipment"]
  },
  {
    "id": "ind_009",
    "householdId": "hh_MOM001",
    "name": "Maryam Ibrahim",
    "age": 50,
    "gender": "F",
    "nationalId": "56789012",
    "education": "None",
    "skills": ["fish processing"],
    "needs": ["business startup"]
  },
  {
    "id": "ind_010",
    "householdId": "hh_MOM001",
    "name": "Yusuf Ibrahim",
    "age": 17,
    "gender": "M",
    "birthCertificate": "BC-556677",
    "education": "Secondary school",
    "skills": ["computer"],
    "needs": ["laptop"]
  }
]
```
```data/interventions.json
[
  {
    "id": "int_001",
    "title": "Ramadan Food Pack – Kibera",
    "type": "initiative",
    "ngo": "Zakat Kenya",
    "location": "Nairobi-Kibera",
    "startDate": "2025-03-01",
    "endDate": "2025-03-30",
    "status": "completed",
    "targetBeneficiaries": 200
  },
  {
    "id": "int_002",
    "title": "Plumbing Skills Training – Nairobi",
    "type": "project",
    "ngo": "Murshidat",
    "location": "Nairobi",
    "startDate": "2025-06-01",
    "endDate": "2025-09-30",
    "status": "active",
    "targetBeneficiaries": 50
  },
  {
    "id": "int_003",
    "title": "School Fees Support – Likoni Secondary",
    "type": "program",
    "ngo": "MMRF",
    "location": "Mombasa-Likoni",
    "startDate": "2025-01-01",
    "status": "ongoing",
    "targetBeneficiaries": 100
  },
  {
    "id": "int_004",
    "title": "Business Startup Grants – Mathare",
    "type": "program",
    "ngo": "Islamic Relief",
    "location": "Nairobi-Mathare",
    "startDate": "2025-04-01",
    "endDate": "2025-12-31",
    "status": "active",
    "targetBeneficiaries": 75
  },
  {
    "id": "int_005",
    "title": "Fishing Equipment Support – Mombasa",
    "type": "initiative",
    "ngo": "Al-Khair Foundation",
    "location": "Mombasa",
    "startDate": "2025-05-15",
    "endDate": "2025-06-15",
    "status": "planned",
    "targetBeneficiaries": 30
  }
]
```
```data/aid_records.json
[
  {
    "id": "svc_001",
    "householdId": "hh_NAI001",
    "individualId": "ind_001",
    "interventionId": "int_001",
    "serviceType": "Food Relief",
    "providerNGO": "Zakat Kenya",
    "date": "2025-03-10",
    "valueKES": 3000
  },
  {
    "id": "svc_002",
    "householdId": "hh_NAI001",
    "individualId": "ind_003",
    "interventionId": "int_002",
    "serviceType": "Mentorship Session",
    "providerNGO": "Murshidat",
    "date": "2025-06-15",
    "valueKES": 0
  },
  {
    "id": "svc_003",
    "householdId": "hh_NAI001",
    "individualId": "ind_004",
    "interventionId": "int_003",
    "serviceType": "Education Grant",
    "providerNGO": "MMRF",
    "date": "2025-02-01",
    "valueKES": 5000
  },
  {
    "id": "svc_004",
    "householdId": "hh_NAI002",
    "individualId": "ind_006",
    "interventionId": "int_004",
    "serviceType": "Business Grant",
    "providerNGO": "Islamic Relief",
    "date": "2025-04-15",
    "valueKES": 10000
  },
  {
    "id": "svc_005",
    "householdId": "hh_NAI002",
    "individualId": "ind_007",
    "interventionId": "int_003",
    "serviceType": "Education Grant",
    "providerNGO": "MMRF",
    "date": "2025-02-10",
    "valueKES": 7000
  },
  {
    "id": "svc_006",
    "householdId": "hh_MOM001",
    "individualId": "ind_010",
    "interventionId": "int_003",
    "serviceType": "Education Grant",
    "providerNGO": "MMRF",
    "date": "2025-02-15",
    "valueKES": 8000
  }
]
```
```components/Sidebar.tsx
import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import {
  HomeIcon,
  UsersIcon,
  BuildingIcon,
  PackageIcon,
  SearchIcon,
  BarChart3Icon,
} from 'lucide-react'
const Sidebar = () => {
  const location = useLocation()
  const isActive = (path: string) => {
    return location.pathname === path
      ? 'bg-green-100 text-green-800'
      : 'hover:bg-gray-100'
  }
  return (
    <div className="w-64 h-full bg-white border-r border-gray-200 flex flex-col">
      <div className="p-4 border-b">
        <Link to="/">
          <img
            src="https://uploadthingy.s3.us-west-1.amazonaws.com/duRfb1iV6RgQ8uAMkJSCnt/Logo_for_Athari_Initiative_-_Wordmark_Style.png"
            alt="Athari Logo"
            className="h-10 mx-auto"
          />
        </Link>
      </div>
      <nav className="flex-1 p-4">
        <ul className="space-y-2">
          <li>
            <Link
              to="/ngo-dashboard"
              className={`flex items-center p-3 rounded-lg ${isActive('/ngo-dashboard')}`}
            >
              <HomeIcon className="mr-3 h-5 w-5" />
              <span>Dashboard</span>
            </Link>
          </li>
          <li>
            <Link
              to="/households"
              className={`flex items-center p-3 rounded-lg ${isActive('/households')}`}
            >
              <UsersIcon className="mr-3 h-5 w-5" />
              <span>My Households</span>
            </Link>
          </li>
          <li>
            <Link
              to="/interventions"
              className={`flex items-center p-3 rounded-lg ${isActive('/interventions')}`}
            >
              <PackageIcon className="mr-3 h-5 w-5" />
              <span>My Interventions</span>
            </Link>
          </li>
          <li>
            <Link
              to="/search"
              className={`flex items-center p-3 rounded-lg ${isActive('/search')}`}
            >
              <SearchIcon className="mr-3 h-5 w-5" />
              <span>Search & Discovery</span>
            </Link>
          </li>
          <li>
            <Link
              to="/reports"
              className={`flex items-center p-3 rounded-lg ${isActive('/reports')}`}
            >
              <BarChart3Icon className="mr-3 h-5 w-5" />
              <span>Reports</span>
            </Link>
          </li>
          <li>
            <Link
              to="/beneficiary-dashboard"
              className={`flex items-center p-3 rounded-lg ${isActive('/beneficiary-dashboard')}`}
            >
              <BuildingIcon className="mr-3 h-5 w-5" />
              <span>Beneficiary View</span>
            </Link>
          </li>
        </ul>
      </nav>
      <div className="p-4 border-t text-sm text-gray-500">
        <p>Logged in as: NGO Admin</p>
      </div>
    </div>
  )
}
export default Sidebar

```
```components/Layout.tsx
import React from 'react'
import Sidebar from './Sidebar'
type LayoutProps = {
  children: ReactNode
  showSidebar?: boolean
}
const Layout = ({ children, showSidebar = true }: LayoutProps) => {
  return (
    <div className="flex h-screen bg-gray-50">
      {showSidebar && <Sidebar />}
      <main className="flex-1 overflow-auto">{children}</main>
    </div>
  )
}
export default Layout

```
```components/StatusBadge.tsx
import React from 'react'
type StatusBadgeProps = {
  status: string
}
const StatusBadge = ({ status }: StatusBadgeProps) => {
  const getStatusColor = () => {
    switch (status.toLowerCase()) {
      case 'verified':
      case 'completed':
      case 'active':
      case 'ongoing':
        return 'bg-green-100 text-green-800'
      case 'pending':
      case 'planned':
        return 'bg-yellow-100 text-yellow-800'
      default:
        return 'bg-gray-100 text-gray-800'
    }
  }
  const getStatusIcon = () => {
    switch (status.toLowerCase()) {
      case 'verified':
      case 'completed':
      case 'active':
      case 'ongoing':
        return '🟢'
      case 'pending':
      case 'planned':
        return '🟡'
      default:
        return '⚪'
    }
  }
  return (
    <span
      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor()}`}
    >
      {getStatusIcon()} <span className="ml-1">{status}</span>
    </span>
  )
}
export default StatusBadge

```
```pages/LandingPage.tsx
import React from 'react'
import { Link } from 'react-router-dom'
const LandingPage = () => {
  return (
    <div className="min-h-screen bg-white">
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
          <div>
            <img
              src="https://uploadthingy.s3.us-west-1.amazonaws.com/duRfb1iV6RgQ8uAMkJSCnt/Logo_for_Athari_Initiative_-_Wordmark_Style.png"
              alt="Athari Logo"
              className="h-10"
            />
          </div>
          <div>
            <Link
              to="/ngo-dashboard"
              className="text-sm font-medium text-gray-500 hover:text-gray-900 mr-4"
            >
              Login
            </Link>
          </div>
        </div>
      </header>
      <main>
        <div className="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
          <div className="text-center">
            <h1 className="text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
              Athari Platform
            </h1>
            <p className="mt-5 max-w-xl mx-auto text-xl text-gray-500">
              Coordinating Muslim NGOs to empower households while preventing
              aid duplication.
            </p>
            <div className="mt-10 flex justify-center gap-4">
              <Link
                to="/ngo-dashboard"
                className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700"
              >
                Register as Organization
              </Link>
              <Link
                to="/beneficiary-dashboard"
                className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-orange-600 hover:bg-orange-700"
              >
                Register as Beneficiary
              </Link>
              <Link
                to="/ngo-dashboard"
                className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-gray-700 bg-gray-100 hover:bg-gray-200"
              >
                Login as Supporter
              </Link>
            </div>
          </div>
        </div>
        <div className="bg-gray-50 py-16">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="lg:text-center">
              <h2 className="text-base text-green-600 font-semibold tracking-wide uppercase">
                About Athari
              </h2>
              <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                Coordination for Greater Impact
              </p>
              <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
                Athari Platform helps Muslim NGOs coordinate their efforts,
                track interventions, and maximize the impact of aid distribution
                while ensuring no household is overlooked.
              </p>
            </div>
            <div className="mt-10">
              <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
                <div className="relative">
                  <dt>
                    <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                      <svg
                        className="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
                        />
                      </svg>
                    </div>
                    <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
                      Household Management
                    </p>
                  </dt>
                  <dd className="mt-2 ml-16 text-base text-gray-500">
                    Track household needs, demographics, and support history in
                    one central location.
                  </dd>
                </div>
                <div className="relative">
                  <dt>
                    <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                      <svg
                        className="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
                        />
                      </svg>
                    </div>
                    <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
                      Intervention Tracking
                    </p>
                  </dt>
                  <dd className="mt-2 ml-16 text-base text-gray-500">
                    Plan, execute, and monitor interventions with real-time
                    updates and beneficiary linking.
                  </dd>
                </div>
                <div className="relative">
                  <dt>
                    <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                      <svg
                        className="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M13 10V3L4 14h7v7l9-11h-7z"
                        />
                      </svg>
                    </div>
                    <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
                      Coordination & Impact
                    </p>
                  </dt>
                  <dd className="mt-2 ml-16 text-base text-gray-500">
                    Prevent duplication, identify gaps, and collaborate with
                    other NGOs for maximum impact.
                  </dd>
                </div>
              </dl>
            </div>
          </div>
        </div>
      </main>
      <footer className="bg-white">
        <div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
          <p className="mt-8 text-center text-base text-gray-400">
            &copy; 2025 Athari Initiative. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  )
}
export default LandingPage

```
```pages/NGODashboard.tsx
import React from 'react'
import Layout from '../components/Layout'
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from 'recharts'
import { Link } from 'react-router-dom'
import interventions from '../data/interventions.json'
import households from '../data/households.json'
import aidRecords from '../data/aid_records.json'
const NGODashboard = () => {
  // Count interventions by type
  const interventionsByType = interventions.reduce(
    (acc, intervention) => {
      const type = intervention.type
      if (!acc[type]) {
        acc[type] = 0
      }
      acc[type]++
      return acc
    },
    {} as Record<string, number>,
  )
  const chartData = Object.keys(interventionsByType).map((type) => ({
    name: type.charAt(0).toUpperCase() + type.slice(1),
    count: interventionsByType[type],
  }))
  // Count active interventions
  const activeInterventions = interventions.filter(
    (i) => i.status === 'active' || i.status === 'ongoing',
  ).length
  // Calculate total support value
  const totalSupportValue = aidRecords.reduce(
    (sum, record) => sum + record.valueKES,
    0,
  )
  return (
    <Layout>
      <div className="p-8">
        <div className="mb-8">
          <h1 className="text-2xl font-bold text-gray-900">NGO Dashboard</h1>
          <p className="text-gray-600">
            Welcome to your Athari Platform dashboard.
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <div className="bg-white p-6 rounded-lg shadow">
            <h2 className="text-lg font-medium text-gray-900">
              Active Interventions
            </h2>
            <p className="mt-2 text-3xl font-bold text-green-600">
              {activeInterventions}
            </p>
            <Link
              to="/interventions"
              className="mt-4 inline-block text-sm text-green-600 hover:text-green-800"
            >
              View all →
            </Link>
          </div>
          <div className="bg-white p-6 rounded-lg shadow">
            <h2 className="text-lg font-medium text-gray-900">
              Registered Households
            </h2>
            <p className="mt-2 text-3xl font-bold text-green-600">
              {households.length}
            </p>
            <Link
              to="/households"
              className="mt-4 inline-block text-sm text-green-600 hover:text-green-800"
            >
              View all →
            </Link>
          </div>
          <div className="bg-white p-6 rounded-lg shadow">
            <h2 className="text-lg font-medium text-gray-900">
              Pending Collaborations
            </h2>
            <p className="mt-2 text-3xl font-bold text-orange-600">3</p>
            <Link
              to="/search"
              className="mt-4 inline-block text-sm text-green-600 hover:text-green-800"
            >
              View all →
            </Link>
          </div>
          <div className="bg-white p-6 rounded-lg shadow">
            <h2 className="text-lg font-medium text-gray-900">
              Total Support Value
            </h2>
            <p className="mt-2 text-3xl font-bold text-green-600">
              KES {totalSupportValue.toLocaleString()}
            </p>
            <Link
              to="/reports"
              className="mt-4 inline-block text-sm text-green-600 hover:text-green-800"
            >
              View reports →
            </Link>
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="bg-white p-6 rounded-lg shadow">
            <h2 className="text-lg font-medium text-gray-900 mb-4">
              Interventions by Type
            </h2>
            <div className="h-80">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart
                  data={chartData}
                  margin={{
                    top: 20,
                    right: 30,
                    left: 20,
                    bottom: 5,
                  }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip />
                  <Bar dataKey="count" fill="#4ade80" />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>
          <div className="bg-white p-6 rounded-lg shadow">
            <h2 className="text-lg font-medium text-gray-900 mb-4">
              Recent Activity
            </h2>
            <div className="flow-root">
              <ul className="-mb-8">
                {aidRecords.slice(0, 5).map((record, idx) => (
                  <li key={record.id}>
                    <div className="relative pb-8">
                      {idx !== 4 ? (
                        <span
                          className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
                          aria-hidden="true"
                        ></span>
                      ) : null}
                      <div className="relative flex space-x-3">
                        <div>
                          <span className="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white">
                            <svg
                              className="h-5 w-5 text-white"
                              xmlns="http://www.w3.org/2000/svg"
                              fill="none"
                              viewBox="0 0 24 24"
                              stroke="currentColor"
                            >
                              <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2}
                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                              />
                            </svg>
                          </span>
                        </div>
                        <div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                          <div>
                            <p className="text-sm text-gray-500">
                              <span className="font-medium text-gray-900">
                                {record.serviceType}
                              </span>{' '}
                              provided to a beneficiary by{' '}
                              <span className="font-medium text-gray-900">
                                {record.providerNGO}
                              </span>
                            </p>
                          </div>
                          <div className="text-right text-sm whitespace-nowrap text-gray-500">
                            <time>{record.date}</time>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  )
}
export default NGODashboard

```
```pages/HouseholdManagement.tsx
import React, { useState } from 'react'
import Layout from '../components/Layout'
import { Link } from 'react-router-dom'
import households from '../data/households.json'
import individuals from '../data/individuals.json'
import StatusBadge from '../components/StatusBadge'
import { SearchIcon, FilterIcon } from 'lucide-react'
const HouseholdManagement = () => {
  const [searchTerm, setSearchTerm] = useState('')
  const [filterStatus, setFilterStatus] = useState('all')
  // Find head of household name
  const getHeadOfHouseholdName = (headId: string) => {
    const head = individuals.find((ind) => ind.id === headId)
    return head ? head.name : 'Unknown'
  }
  // Count members
  const getMemberCount = (memberIds: string[]) => memberIds.length
  // Filter households
  const filteredHouseholds = households.filter((household) => {
    const matchesSearch =
      household.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
      getHeadOfHouseholdName(household.headOfHousehold)
        .toLowerCase()
        .includes(searchTerm.toLowerCase()) ||
      household.location.county
        .toLowerCase()
        .includes(searchTerm.toLowerCase()) ||
      household.location.subCounty
        .toLowerCase()
        .includes(searchTerm.toLowerCase())
    const matchesFilter =
      filterStatus === 'all' || household.verificationStatus === filterStatus
    return matchesSearch && matchesFilter
  })
  return (
    <Layout>
      <div className="p-8">
        <div className="mb-6 flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">
              Household Management
            </h1>
            <p className="text-gray-600">
              Manage and view all registered households.
            </p>
          </div>
          <button className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
            Add New Household
          </button>
        </div>
        <div className="mb-6 flex flex-col md:flex-row gap-4">
          <div className="relative flex-grow">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <SearchIcon className="h-5 w-5 text-gray-400" />
            </div>
            <input
              type="text"
              className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
              placeholder="Search by code, head, or location..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <div className="flex items-center">
            <FilterIcon className="mr-2 h-5 w-5 text-gray-400" />
            <select
              className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm rounded-md"
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value)}
            >
              <option value="all">All Statuses</option>
              <option value="verified">Verified</option>
              <option value="pending">Pending</option>
            </select>
          </div>
        </div>
        <div className="bg-white shadow overflow-hidden sm:rounded-md">
          <ul className="divide-y divide-gray-200">
            {filteredHouseholds.length > 0 ? (
              filteredHouseholds.map((household) => (
                <li key={household.id}>
                  <Link
                    to={`/households/${household.id}`}
                    className="block hover:bg-gray-50"
                  >
                    <div className="px-4 py-4 sm:px-6">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center">
                          <p className="text-sm font-medium text-green-600 truncate">
                            Household {household.code}
                          </p>
                          <StatusBadge status={household.verificationStatus} />
                        </div>
                        <div className="ml-2 flex-shrink-0 flex">
                          <p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            {getMemberCount(household.memberIds)} members
                          </p>
                        </div>
                      </div>
                      <div className="mt-2 sm:flex sm:justify-between">
                        <div className="sm:flex">
                          <p className="flex items-center text-sm text-gray-500">
                            <svg
                              className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 20 20"
                              fill="currentColor"
                            >
                              <path
                                fillRule="evenodd"
                                d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                clipRule="evenodd"
                              />
                            </svg>
                            {getHeadOfHouseholdName(household.headOfHousehold)}
                          </p>
                          <p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:ml-6">
                            <svg
                              className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 20 20"
                              fill="currentColor"
                            >
                              <path
                                fillRule="evenodd"
                                d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
                                clipRule="evenodd"
                              />
                            </svg>
                            {household.location.county},{' '}
                            {household.location.subCounty}
                          </p>
                        </div>
                        <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                          <svg
                            className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                          >
                            <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
                          </svg>
                          {household.housingType}
                        </div>
                      </div>
                    </div>
                  </Link>
                </li>
              ))
            ) : (
              <li className="px-4 py-6 text-center text-gray-500">
                No households found matching your search criteria.
              </li>
            )}
          </ul>
        </div>
      </div>
    </Layout>
  )
}
export default HouseholdManagement

```
```pages/HouseholdProfile.tsx
import React from 'react'
import { useParams, Link } from 'react-router-dom'
import Layout from '../components/Layout'
import StatusBadge from '../components/StatusBadge'
import households from '../data/households.json'
import individuals from '../data/individuals.json'
import aidRecords from '../data/aid_records.json'
import interventions from '../data/interventions.json'
import { ArrowLeftIcon } from 'lucide-react'
const HouseholdProfile = () => {
  const { id } = useParams<{
    id: string
  }>()
  const household = households.find((h) => h.id === id)
  if (!household) {
    return (
      <Layout>
        <div className="p-8">
          <div className="text-center py-12">
            <h2 className="text-2xl font-bold text-gray-900">
              Household not found
            </h2>
            <p className="mt-2 text-gray-600">
              The household you're looking for doesn't exist or has been
              removed.
            </p>
            <Link
              to="/households"
              className="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700"
            >
              Return to Households
            </Link>
          </div>
        </div>
      </Layout>
    )
  }
  const members = individuals.filter((ind) =>
    household.memberIds.includes(ind.id),
  )
  const headOfHousehold = individuals.find(
    (ind) => ind.id === household.headOfHousehold,
  )
  // Get services for each household member
  const getMemberServices = (memberId: string) => {
    return aidRecords.filter((record) => record.individualId === memberId)
  }
  // Get intervention details for a service
  const getInterventionDetails = (interventionId: string) => {
    return interventions.find((int) => int.id === interventionId)
  }
  return (
    <Layout>
      <div className="p-8">
        <div className="mb-6">
          <Link
            to="/households"
            className="inline-flex items-center text-sm font-medium text-green-600 hover:text-green-800"
          >
            <ArrowLeftIcon className="mr-1 h-4 w-4" />
            Back to Households
          </Link>
        </div>
        <div className="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
          <div className="px-4 py-5 sm:px-6 flex justify-between items-center">
            <div>
              <h3 className="text-lg leading-6 font-medium text-gray-900">
                Household Profile - {household.code}
              </h3>
              <p className="mt-1 max-w-2xl text-sm text-gray-500">
                Details and information about this household.
              </p>
            </div>
            <StatusBadge status={household.verificationStatus} />
          </div>
          <div className="border-t border-gray-200 px-4 py-5 sm:px-6">
            <dl className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
              <div className="sm:col-span-1">
                <dt className="text-sm font-medium text-gray-500">
                  Head of Household
                </dt>
                <dd className="mt-1 text-sm text-gray-900">
                  {headOfHousehold?.name || 'Unknown'}
                </dd>
              </div>
              <div className="sm:col-span-1">
                <dt className="text-sm font-medium text-gray-500">Location</dt>
                <dd className="mt-1 text-sm text-gray-900">
                  {household.location.county}, {household.location.subCounty}
                  {household.location.landmark &&
                    ` (${household.location.landmark})`}
                </dd>
              </div>
              <div className="sm:col-span-1">
                <dt className="text-sm font-medium text-gray-500">
                  Housing Type
                </dt>
                <dd className="mt-1 text-sm text-gray-900">
                  {household.housingType}
                </dd>
              </div>
              <div className="sm:col-span-1">
                <dt className="text-sm font-medium text-gray-500">
                  Income Sources
                </dt>
                <dd className="mt-1 text-sm text-gray-900">
                  {household.incomeSources.map((source) => (
                    <span
                      key={source}
                      className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 mr-2 mb-2"
                    >
                      {source}
                    </span>
                  ))}
                </dd>
              </div>
            </dl>
          </div>
        </div>
        <div className="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
          <div className="px-4 py-5 sm:px-6">
            <h3 className="text-lg leading-6 font-medium text-gray-900">
              Household Members
            </h3>
            <p className="mt-1 max-w-2xl text-sm text-gray-500">
              {members.length} members in this household.
            </p>
          </div>
          <div className="border-t border-gray-200">
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th
                      scope="col"
                      className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                      Name
                    </th>
                    <th
                      scope="col"
                      className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                      Age/Gender
                    </th>
                    <th
                      scope="col"
                      className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                      ID/Birth Certificate
                    </th>
                    <th
                      scope="col"
                      className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                      Education
                    </th>
                    <th
                      scope="col"
                      className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                      Skills
                    </th>
                    <th
                      scope="col"
                      className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                      Needs
                    </th>
                    <th
                      scope="col"
                      className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                    >
                      Services Received
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {members.map((member) => {
                    const services = getMemberServices(member.id)
                    return (
                      <tr key={member.id}>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm font-medium text-gray-900">
                            {member.name}
                            {member.id === household.headOfHousehold && (
                              <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                Head
                              </span>
                            )}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-900">
                            {member.age} / {member.gender}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-900">
                            {member.nationalId
                              ? `ID: ${member.nationalId}`
                              : member.birthCertificate
                                ? `BC: ${member.birthCertificate}`
                                : 'None'}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-900">
                            {member.education}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-900">
                            {member.skills.length > 0 ? (
                              member.skills.join(', ')
                            ) : (
                              <span className="text-gray-400">None</span>
                            )}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-900">
                            {member.needs.map((need) => (
                              <span
                                key={need}
                                className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 mr-1 mb-1"
                              >
                                {need}
                              </span>
                            ))}
                          </div>
                        </td>
                        <td className="px-6 py-4 whitespace-nowrap">
                          <div className="text-sm text-gray-900">
                            {services.length > 0 ? (
                              <div className="space-y-1">
                                {services.map((service) => {
                                  const intervention = getInterventionDetails(
                                    service.interventionId,
                                  )
                                  return (
                                    <div key={service.id} className="text-xs">
                                      <Link
                                        to={`/interventions/${service.interventionId}`}
                                        className="font-medium text-green-600 hover:text-green-800"
                                      >
                                        {service.serviceType}
                                      </Link>
                                      <div>
                                        by {service.providerNGO} ({service.date}
                                        )
                                      </div>
                                      <div>
                                        Value: KES{' '}
                                        {service.valueKES.toLocaleString()}
                                      </div>
                                    </div>
                                  )
                                })}
                              </div>
                            ) : (
                              <span className="text-gray-400">No services</span>
                            )}
                          </div>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div className="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
          <div className="px-4 py-5 sm:px-6">
            <h3 className="text-lg leading-6 font-medium text-gray-900">
              Aid History Timeline
            </h3>
          </div>
          <div className="border-t border-gray-200 px-4 py-5 sm:p-6">
            <div className="flow-root">
              <ul className="-mb-8">
                {aidRecords
                  .filter((record) => record.householdId === household.id)
                  .sort(
                    (a, b) =>
                      new Date(b.date).getTime() - new Date(a.date).getTime(),
                  )
                  .map((record, idx, records) => {
                    const member = individuals.find(
                      (ind) => ind.id === record.individualId,
                    )
                    const intervention = interventions.find(
                      (int) => int.id === record.interventionId,
                    )
                    return (
                      <li key={record.id}>
                        <div className="relative pb-8">
                          {idx !== records.length - 1 ? (
                            <span
                              className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
                              aria-hidden="true"
                            ></span>
                          ) : null}
                          <div className="relative flex space-x-3">
                            <div>
                              <span className="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white">
                                <svg
                                  className="h-5 w-5 text-white"
                                  xmlns="http://www.w3.org/2000/svg"
                                  fill="none"
                                  viewBox="0 0 24 24"
                                  stroke="currentColor"
                                >
                                  <path
                                    strokeLinecap="round"
                                    strokeLinejoin="round"
                                    strokeWidth={2}
                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                                  />
                                </svg>
                              </span>
                            </div>
                            <div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                              <div>
                                <p className="text-sm text-gray-500">
                                  <span className="font-medium text-gray-900">
                                    {record.serviceType}
                                  </span>{' '}
                                  provided to{' '}
                                  <span className="font-medium text-gray-900">
                                    {member?.name}
                                  </span>{' '}
                                  through{' '}
                                  <Link
                                    to={`/interventions/${intervention?.id}`}
                                    className="font-medium text-green-600"
                                  >
                                    {intervention?.title}
                                  </Link>
                                </p>
                                <p className="text-xs text-gray-500 mt-0.5">
                                  Provider: {record.providerNGO} | Value: KES{' '}
                                  {record.valueKES.toLocaleString()}
                                </p>
                              </div>
                              <div className="text-right text-sm whitespace-nowrap text-gray-500">
                                <time>{record.date}</time>
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    )
                  })}
                {aidRecords.filter(
                  (record) => record.householdId === household.id,
                ).length === 0 && (
                  <li className="py-4 text-center text-gray-500">
                    No aid history recorded for this household.
                  </li>
                )}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  )
}
export default HouseholdProfile

```
```pages/InterventionsPage.tsx
import React, { useState } from 'react'
import Layout from '../components/Layout'
import { Link } from 'react-router-dom'
import interventions from '../data/interventions.json'
import StatusBadge from '../components/StatusBadge'
import { SearchIcon, FilterIcon } from 'lucide-react'
const InterventionsPage = () => {
  const [searchTerm, setSearchTerm] = useState('')
  const [filterStatus, setFilterStatus] = useState('all')
  const [filterType, setFilterType] = useState('all')
  // Get unique intervention types
  const interventionTypes = Array.from(
    new Set(interventions.map((int) => int.type)),
  )
  // Filter interventions
  const filteredInterventions = interventions.filter((intervention) => {
    const matchesSearch =
      intervention.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      intervention.ngo.toLowerCase().includes(searchTerm.toLowerCase()) ||
      intervention.location.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesStatus =
      filterStatus === 'all' || intervention.status === filterStatus
    const matchesType = filterType === 'all' || intervention.type === filterType
    return matchesSearch && matchesStatus && matchesType
  })
  return (
    <Layout>
      <div className="p-8">
        <div className="mb-6 flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Interventions</h1>
            <p className="text-gray-600">Manage and view all interventions.</p>
          </div>
          <button className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
            Create New Intervention
          </button>
        </div>
        <div className="mb-6 flex flex-col md:flex-row gap-4">
          <div className="relative flex-grow">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <SearchIcon className="h-5 w-5 text-gray-400" />
            </div>
            <input
              type="text"
              className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
              placeholder="Search by title, NGO, or location..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <div className="flex items-center">
            <FilterIcon className="mr-2 h-5 w-5 text-gray-400" />
            <select
              className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm rounded-md"
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value)}
            >
              <option value="all">All Statuses</option>
              <option value="active">Active</option>
              <option value="completed">Completed</option>
              <option value="ongoing">Ongoing</option>
              <option value="planned">Planned</option>
            </select>
          </div>
          <div className="flex items-center">
            <select
              className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm rounded-md"
              value={filterType}
              onChange={(e) => setFilterType(e.target.value)}
            >
              <option value="all">All Types</option>
              {interventionTypes.map((type) => (
                <option key={type} value={type}>
                  {type.charAt(0).toUpperCase() + type.slice(1)}
                </option>
              ))}
            </select>
          </div>
        </div>
        <div className="bg-white shadow overflow-hidden sm:rounded-md">
          <ul className="divide-y divide-gray-200">
            {filteredInterventions.length > 0 ? (
              filteredInterventions.map((intervention) => (
                <li key={intervention.id}>
                  <Link
                    to={`/interventions/${intervention.id}`}
                    className="block hover:bg-gray-50"
                  >
                    <div className="px-4 py-4 sm:px-6">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center">
                          <p className="text-sm font-medium text-green-600 truncate">
                            {intervention.title}
                          </p>
                          <span className="ml-2 flex-shrink-0 inline-block px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">
                            {intervention.type}
                          </span>
                        </div>
                        <div className="ml-2 flex-shrink-0 flex">
                          <StatusBadge status={intervention.status} />
                        </div>
                      </div>
                      <div className="mt-2 sm:flex sm:justify-between">
                        <div className="sm:flex">
                          <p className="flex items-center text-sm text-gray-500">
                            <svg
                              className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 20 20"
                              fill="currentColor"
                            >
                              <path
                                fillRule="evenodd"
                                d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 01-1.581.814l-4.419-4.419L6.581 16.814A1 1 0 015 16V4zm2-1a1 1 0 00-1 1v10.586l3.293-3.293a1 1 0 011.414 0L13 14.586V4a1 1 0 00-1-1H6z"
                                clipRule="evenodd"
                              />
                            </svg>
                            {intervention.ngo}
                          </p>
                          <p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:ml-6">
                            <svg
                              className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 20 20"
                              fill="currentColor"
                            >
                              <path
                                fillRule="evenodd"
                                d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
                                clipRule="evenodd"
                              />
                            </svg>
                            {intervention.location}
                          </p>
                        </div>
                        <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                          <svg
                            className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20"
                            fill="currentColor"
                          >
                            <path
                              fillRule="evenodd"
                              d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
                              clipRule="evenodd"
                            />
                          </svg>
                          <p>
                            {intervention.startDate}
                            {intervention.endDate &&
                              ` to ${intervention.endDate}`}
                          </p>
                        </div>
                      </div>
                    </div>
                  </Link>
                </li>
              ))
            ) : (
              <li className="px-4 py-6 text-center text-gray-500">
                No interventions found matching your search criteria.
              </li>
            )}
          </ul>
        </div>
      </div>
    </Layout>
  )
}
export default InterventionsPage

```
```pages/InterventionDetail.tsx
import React, { useState } from 'react'
import { useParams, Link } from 'react-router-dom'
import Layout from '../components/Layout'
import StatusBadge from '../components/StatusBadge'
import interventions from '../data/interventions.json'
import aidRecords from '../data/aid_records.json'
import households from '../data/households.json'
import individuals from '../data/individuals.json'
import { ArrowLeftIcon, PlusIcon } from 'lucide-react'
const InterventionDetail = () => {
  const { id } = useParams<{
    id: string
  }>()
  const [showAddHouseholdModal, setShowAddHouseholdModal] = useState(false)
  const intervention = interventions.find((int) => int.id === id)
  if (!intervention) {
    return (
      <Layout>
        <div className="p-8">
          <div className="text-center py-12">
            <h2 className="text-2xl font-bold text-gray-900">
              Intervention not found
            </h2>
            <p className="mt-2 text-gray-600">
              The intervention you're looking for doesn't exist or has been
              removed.
            </p>
            <Link
              to="/interventions"
              className="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700"
            >
              Return to Interventions
            </Link>
          </div>
        </div>
      </Layout>
    )
  }
  // Get all records for this intervention
  const records = aidRecords.filter(
    (record) => record.interventionId === intervention.id,
  )
  // Get unique household IDs from the records
  const uniqueHouseholdIds = Array.from(
    new Set(records.map((record) => record.householdId)),
  )
  // Get household data for each unique household ID
  const linkedHouseholds = uniqueHouseholdIds.map((householdId) => {
    const household = households.find((h) => h.id === householdId)
    const householdRecords = records.filter(
      (record) => record.householdId === householdId,
    )
    const memberIds = Array.from(
      new Set(householdRecords.map((record) => record.individualId)),
    )
    const members = individuals
      .filter((ind) => memberIds.includes(ind.id))
      .map((member) => {
        const memberServices = householdRecords.filter(
          (record) => record.individualId === member.id,
        )
        return {
          ...member,
          services: memberServices,
        }
      })
    return {
      household,
      members,
    }
  })
  return (
    <Layout>
      <div className="p-8">
        <div className="mb-6">
          <Link
            to="/interventions"
            className="inline-flex items-center text-sm font-medium text-green-600 hover:text-green-800"
          >
            <ArrowLeftIcon className="mr-1 h-4 w-4" />
            Back to Interventions
          </Link>
        </div>
        <div className="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
          <div className="px-4 py-5 sm:px-6 flex justify-between items-center">
            <div>
              <h3 className="text-lg leading-6 font-medium text-gray-900">
                {intervention.title}
              </h3>
              <p className="mt-1 max-w-2xl text-sm text-gray-500">
                {intervention.type.charAt(0).toUpperCase() +
                  intervention.type.slice(1)}{' '}
                by {intervention.ngo}
              </p>
            </div>
            <StatusBadge status={intervention.status} />
          </div>
          <div className="border-t border-gray-200 px-4 py-5 sm:px-6">
            <dl className="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
              <div className="sm:col-span-1">
                <dt className="text-sm font-medium text-gray-500">Location</dt>
                <dd className="mt-1 text-sm text-gray-900">
                  {intervention.location}
                </dd>
              </div>
              <div className="sm:col-span-1">
                <dt className="text-sm font-medium text-gray-500">Timeline</dt>
                <dd className="mt-1 text-sm text-gray-900">
                  {intervention.startDate}
                  {intervention.endDate && ` to ${intervention.endDate}`}
                </dd>
              </div>
              <div className="sm:col-span-1">
                <dt className="text-sm font-medium text-gray-500">
                  Target Beneficiaries
                </dt>
                <dd className="mt-1 text-sm text-gray-900">
                  {intervention.targetBeneficiaries}
                </dd>
              </div>
              <div className="sm:col-span-1">
                <dt className="text-sm font-medium text-gray-500">
                  Current Reach
                </dt>
                <dd className="mt-1 text-sm text-gray-900">
                  {records.length} services provided to{' '}
                  {uniqueHouseholdIds.length} households
                </dd>
              </div>
              <div className="sm:col-span-2">
                <dt className="text-sm font-medium text-gray-500">
                  Budget Utilization
                </dt>
                <dd className="mt-1 text-sm text-gray-900">
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      className="bg-green-600 h-2.5 rounded-full"
                      style={{
                        width: '45%',
                      }}
                    ></div>
                  </div>
                  <div className="flex justify-between mt-1 text-xs text-gray-500">
                    <span>
                      KES{' '}
                      {records
                        .reduce((sum, record) => sum + record.valueKES, 0)
                        .toLocaleString()}{' '}
                      used
                    </span>
                    <span>45% of budget</span>
                  </div>
                </dd>
              </div>
            </dl>
          </div>
        </div>
        <div className="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
          <div className="px-4 py-5 sm:px-6 flex justify-between items-center">
            <div>
              <h3 className="text-lg leading-6 font-medium text-gray-900">
                Beneficiaries Linked
              </h3>
              <p className="mt-1 max-w-2xl text-sm text-gray-500">
                Households and individuals receiving services through this
                intervention.
              </p>
            </div>
            <button
              onClick={() => setShowAddHouseholdModal(true)}
              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
            >
              <PlusIcon className="mr-2 h-4 w-4" />
              Add Household
            </button>
          </div>
          <div className="border-t border-gray-200">
            {linkedHouseholds.length > 0 ? (
              <div className="divide-y divide-gray-200">
                {linkedHouseholds.map(({ household, members }) => (
                  <div key={household?.id} className="p-4">
                    <div className="flex items-center justify-between mb-4">
                      <Link
                        to={`/households/${household?.id}`}
                        className="text-lg font-medium text-green-600 hover:text-green-800"
                      >
                        Household {household?.code}
                      </Link>
                      <span className="text-sm text-gray-500">
                        {household?.location.county},{' '}
                        {household?.location.subCounty}
                      </span>
                    </div>
                    <div className="overflow-x-auto">
                      <table className="min-w-full divide-y divide-gray-200">
                        <thead className="bg-gray-50">
                          <tr>
                            <th
                              scope="col"
                              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                            >
                              Name
                            </th>
                            <th
                              scope="col"
                              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                            >
                              Age/Gender
                            </th>
                            <th
                              scope="col"
                              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                            >
                              ID/BC
                            </th>
                            <th
                              scope="col"
                              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                            >
                              Need
                            </th>
                            <th
                              scope="col"
                              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                            >
                              Service Provided
                            </th>
                            <th
                              scope="col"
                              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                            >
                              Date
                            </th>
                            <th
                              scope="col"
                              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                            >
                              Value (KES)
                            </th>
                          </tr>
                        </thead>
                        <tbody className="bg-white divide-y divide-gray-200">
                          {members.map((member) =>
                            member.services.map((service, idx) => (
                              <tr key={`${member.id}-${idx}`}>
                                {idx === 0 && (
                                  <>
                                    <td
                                      rowSpan={member.services.length}
                                      className="px-6 py-4 whitespace-nowrap"
                                    >
                                      <div className="text-sm font-medium text-gray-900">
                                        {member.name}
                                      </div>
                                    </td>
                                    <td
                                      rowSpan={member.services.length}
                                      className="px-6 py-4 whitespace-nowrap"
                                    >
                                      <div className="text-sm text-gray-900">
                                        {member.age} / {member.gender}
                                      </div>
                                    </td>
                                    <td
                                      rowSpan={member.services.length}
                                      className="px-6 py-4 whitespace-nowrap"
                                    >
                                      <div className="text-sm text-gray-900">
                                        {member.nationalId
                                          ? `ID: ${member.nationalId}`
                                          : member.birthCertificate
                                            ? `BC: ${member.birthCertificate}`
                                            : 'None'}
                                      </div>
                                    </td>
                                    <td
                                      rowSpan={member.services.length}
                                      className="px-6 py-4 whitespace-nowrap"
                                    >
                                      <div className="text-sm text-gray-900">
                                        {member.needs.map((need) => (
                                          <span
                                            key={need}
                                            className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 mr-1 mb-1"
                                          >
                                            {need}
                                          </span>
                                        ))}
                                      </div>
                                    </td>
                                  </>
                                )}
                                <td className="px-6 py-4 whitespace-nowrap">
                                  <div className="text-sm text-gray-900">
                                    {service.serviceType}
                                  </div>
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap">
                                  <div className="text-sm text-gray-900">
                                    {service.date}
                                  </div>
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap">
                                  <div className="text-sm text-gray-900">
                                    {service.valueKES.toLocaleString()}
                                  </div>
                                </td>
                              </tr>
                            )),
                          )}
                        </tbody>
                      </table>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="py-6 text-center text-gray-500">
                No households linked to this intervention yet.
              </div>
            )}
          </div>
        </div>
        {/* Add Household Modal */}
        {showAddHouseholdModal && (
          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-10">
            <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full">
              <div className="px-6 py-4 border-b">
                <h3 className="text-lg font-medium text-gray-900">
                  Add Household to Intervention
                </h3>
              </div>
              <div className="px-6 py-4">
                <div className="mb-4">
                  <label
                    htmlFor="householdCode"
                    className="block text-sm font-medium text-gray-700"
                  >
                    Household Code
                  </label>
                  <div className="mt-1 flex rounded-md shadow-sm">
                    <input
                      type="text"
                      id="householdCode"
                      className="focus:ring-green-500 focus:border-green-500 flex-1 block w-full rounded-md sm:text-sm border-gray-300"
                      placeholder="Enter household code"
                    />
                    <button
                      type="button"
                      className="ml-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                    >
                      Search
                    </button>
                  </div>
                </div>
                <p className="text-sm text-gray-500 mb-4">
                  This is a prototype. In a real implementation, this would
                  search for the household and allow you to select members to
                  add to the intervention.
                </p>
              </div>
              <div className="px-6 py-4 border-t flex justify-end">
                <button
                  type="button"
                  onClick={() => setShowAddHouseholdModal(false)}
                  className="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                >
                  Cancel
                </button>
                <button
                  type="button"
                  onClick={() => setShowAddHouseholdModal(false)}
                  className="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                >
                  Add Household
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </Layout>
  )
}
export default InterventionDetail

```
```pages/BeneficiaryDashboard.tsx
import React, { useState } from 'react'
import Layout from '../components/Layout'
import { Link } from 'react-router-dom'
import { Tab } from '@headlessui/react'
import individuals from '../data/individuals.json'
import households from '../data/households.json'
import aidRecords from '../data/aid_records.json'
import interventions from '../data/interventions.json'
import StatusBadge from '../components/StatusBadge'
// Mock current household ID for beneficiary view
const CURRENT_HOUSEHOLD_ID = 'hh_NAI001'
const BeneficiaryDashboard = () => {
  const household = households.find((h) => h.id === CURRENT_HOUSEHOLD_ID)
  const members = individuals.filter((ind) =>
    household?.memberIds.includes(ind.id),
  )
  const householdRecords = aidRecords.filter(
    (record) => record.householdId === CURRENT_HOUSEHOLD_ID,
  )
  const [newNeed, setNewNeed] = useState('')
  const [selectedMember, setSelectedMember] = useState('')
  // Get member services
  const getMemberServices = (memberId: string) => {
    return aidRecords.filter((record) => record.individualId === memberId)
  }
  // Get intervention details for a service
  const getInterventionDetails = (interventionId: string) => {
    return interventions.find((int) => int.id === interventionId)
  }
  // Mock needs with statuses
  const mockNeeds = [
    {
      id: 1,
      need: 'School fees for secondary school',
      member: 'Amina Ahmed',
      status: 'Matched',
      date: '2025-01-15',
    },
    {
      id: 2,
      need: 'Sewing machine for home business',
      member: 'Fatima Mohamed',
      status: 'Fulfilled',
      date: '2025-02-10',
    },
    {
      id: 3,
      need: 'Plumbing training and certification',
      member: 'Juma Ahmed',
      status: 'Matched',
      date: '2025-05-20',
    },
    {
      id: 4,
      need: 'Stable employment opportunity',
      member: 'Ahmed Abdullahi',
      status: 'Submitted',
      date: '2025-06-01',
    },
  ]
  // Mock matched interventions
  const matchedInterventions = interventions.filter(
    (int) =>
      int.location.includes(household?.location.county || '') ||
      householdRecords.some((record) => record.interventionId === int.id),
  )
  // Mock contributions
  const mockContributions = [
    {
      id: 1,
      type: 'Community cleanup',
      date: '2025-04-15',
      hours: 4,
      valueKES: 500,
    },
    {
      id: 2,
      type: 'Volunteer teaching',
      date: '2025-05-10',
      hours: 6,
      valueKES: 1200,
    },
    {
      id: 3,
      type: 'Mosque renovation help',
      date: '2025-05-25',
      hours: 8,
      valueKES: 1600,
    },
  ]
  function classNames(...classes: string[]) {
    return classes.filter(Boolean).join(' ')
  }
  return (
    <Layout>
      <div className="p-8">
        <div className="mb-6">
          <h1 className="text-2xl font-bold text-gray-900">
            Beneficiary Dashboard
          </h1>
          <p className="text-gray-600">
            Welcome, {household?.code}. Manage your household information and
            needs.
          </p>
        </div>
        <div className="bg-white shadow rounded-lg">
          <Tab.Group>
            <Tab.List className="flex p-1 space-x-1 bg-green-50 rounded-t-lg">
              {[
                'My Household',
                'My Needs',
                'Matched Interventions',
                'Aid History',
                'My Contributions',
              ].map((category) => (
                <Tab
                  key={category}
                  className={({ selected }) =>
                    classNames(
                      'w-full py-2.5 text-sm font-medium leading-5 text-green-700 rounded-md',
                      'focus:outline-none focus:ring-2 ring-offset-2 ring-offset-green-50 ring-green-600',
                      selected
                        ? 'bg-white shadow'
                        : 'text-green-800 hover:bg-green-100',
                    )
                  }
                >
                  {category}
                </Tab>
              ))}
            </Tab.List>
            <Tab.Panels>
              {/* My Household Panel */}
              <Tab.Panel className="p-6">
                <div className="mb-6">
                  <h2 className="text-lg font-medium text-gray-900">
                    Household Information
                  </h2>
                  <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div className="bg-gray-50 p-4 rounded-md">
                      <p className="text-sm font-medium text-gray-500">
                        Household Code
                      </p>
                      <p className="mt-1 text-lg font-semibold text-gray-900">
                        {household?.code}
                      </p>
                    </div>
                    <div className="bg-gray-50 p-4 rounded-md">
                      <p className="text-sm font-medium text-gray-500">
                        Location
                      </p>
                      <p className="mt-1 text-lg font-semibold text-gray-900">
                        {household?.location.county},{' '}
                        {household?.location.subCounty}
                      </p>
                    </div>
                    <div className="bg-gray-50 p-4 rounded-md">
                      <p className="text-sm font-medium text-gray-500">
                        Housing Type
                      </p>
                      <p className="mt-1 text-lg font-semibold text-gray-900">
                        {household?.housingType}
                      </p>
                    </div>
                    <div className="bg-gray-50 p-4 rounded-md">
                      <p className="text-sm font-medium text-gray-500">
                        Verification Status
                      </p>
                      <p className="mt-1">
                        <StatusBadge
                          status={household?.verificationStatus || 'unknown'}
                        />
                      </p>
                    </div>
                  </div>
                </div>
                <div>
                  <h2 className="text-lg font-medium text-gray-900 mb-4">
                    Household Members
                  </h2>
                  <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Name
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Age/Gender
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            ID/Birth Certificate
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Education
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Skills
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Needs
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Services
                          </th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {members.map((member) => {
                          const services = getMemberServices(member.id)
                          return (
                            <tr key={member.id}>
                              <td className="px-6 py-4 whitespace-nowrap">
                                <div className="text-sm font-medium text-gray-900">
                                  {member.name}
                                  {member.id === household?.headOfHousehold && (
                                    <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                      Head
                                    </span>
                                  )}
                                </div>
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap">
                                <div className="text-sm text-gray-900">
                                  {member.age} / {member.gender}
                                </div>
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap">
                                <div className="text-sm text-gray-900">
                                  {member.nationalId
                                    ? `ID: ${member.nationalId}`
                                    : member.birthCertificate
                                      ? `BC: ${member.birthCertificate}`
                                      : 'None'}
                                </div>
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap">
                                <div className="text-sm text-gray-900">
                                  {member.education}
                                </div>
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap">
                                <div className="text-sm text-gray-900">
                                  {member.skills.length > 0 ? (
                                    member.skills.join(', ')
                                  ) : (
                                    <span className="text-gray-400">None</span>
                                  )}
                                </div>
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap">
                                <div className="text-sm text-gray-900">
                                  {member.needs.map((need) => (
                                    <span
                                      key={need}
                                      className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 mr-1 mb-1"
                                    >
                                      {need}
                                    </span>
                                  ))}
                                </div>
                              </td>
                              <td className="px-6 py-4 whitespace-nowrap">
                                <div className="text-sm text-gray-900">
                                  {services.length > 0 ? (
                                    <div className="space-y-1">
                                      {services.map((service) => {
                                        const intervention =
                                          getInterventionDetails(
                                            service.interventionId,
                                          )
                                        return (
                                          <div
                                            key={service.id}
                                            className="text-xs"
                                          >
                                            <div className="font-medium">
                                              {service.serviceType}
                                            </div>
                                            <div>{intervention?.title}</div>
                                          </div>
                                        )
                                      })}
                                    </div>
                                  ) : (
                                    <span className="text-gray-400">
                                      No services
                                    </span>
                                  )}
                                </div>
                              </td>
                            </tr>
                          )
                        })}
                      </tbody>
                    </table>
                  </div>
                </div>
              </Tab.Panel>
              {/* My Needs Panel */}
              <Tab.Panel className="p-6">
                <div className="mb-6">
                  <h2 className="text-lg font-medium text-gray-900">
                    Submit a New Need
                  </h2>
                  <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                      <label
                        htmlFor="memberSelect"
                        className="block text-sm font-medium text-gray-700"
                      >
                        Household Member
                      </label>
                      <select
                        id="memberSelect"
                        className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm rounded-md"
                        value={selectedMember}
                        onChange={(e) => setSelectedMember(e.target.value)}
                      >
                        <option value="">Select a member</option>
                        {members.map((member) => (
                          <option key={member.id} value={member.id}>
                            {member.name}
                          </option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label
                        htmlFor="needInput"
                        className="block text-sm font-medium text-gray-700"
                      >
                        Need Description
                      </label>
                      <input
                        type="text"
                        id="needInput"
                        className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                        placeholder="Describe the need"
                        value={newNeed}
                        onChange={(e) => setNewNeed(e.target.value)}
                      />
                    </div>
                  </div>
                  <div className="mt-4">
                    <button
                      type="button"
                      className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                    >
                      Submit Need
                    </button>
                  </div>
                </div>
                <div>
                  <h2 className="text-lg font-medium text-gray-900 mb-4">
                    My Needs Status
                  </h2>
                  <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Need
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            For Member
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Submission Date
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Status
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Actions
                          </th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {mockNeeds.map((need) => (
                          <tr key={need.id}>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-900">
                                {need.need}
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-900">
                                {need.member}
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-500">
                                {need.date}
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <StatusBadge status={need.status} />
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                              <a
                                href="#"
                                className="text-green-600 hover:text-green-900"
                              >
                                {need.status === 'Matched'
                                  ? 'View Match'
                                  : need.status === 'Fulfilled'
                                    ? 'View Details'
                                    : 'Edit'}
                              </a>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </Tab.Panel>
              {/* Matched Interventions Panel */}
              <Tab.Panel className="p-6">
                <div className="mb-6">
                  <h2 className="text-lg font-medium text-gray-900">
                    Interventions Matching Your Household Needs
                  </h2>
                  <p className="text-gray-600 mt-1">
                    These interventions may be relevant based on your location
                    and needs.
                  </p>
                </div>
                <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                  {matchedInterventions.map((intervention) => (
                    <div
                      key={intervention.id}
                      className="bg-white overflow-hidden shadow rounded-lg border border-gray-200"
                    >
                      <div className="p-5">
                        <div className="flex items-center">
                          <div className="flex-shrink-0 bg-green-500 rounded-md p-3">
                            <svg
                              className="h-6 w-6 text-white"
                              xmlns="http://www.w3.org/2000/svg"
                              fill="none"
                              viewBox="0 0 24 24"
                              stroke="currentColor"
                            >
                              <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2}
                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                              />
                            </svg>
                          </div>
                          <div className="ml-5 w-0 flex-1">
                            <dl>
                              <dt className="text-sm font-medium text-gray-500 truncate">
                                {intervention.type.charAt(0).toUpperCase() +
                                  intervention.type.slice(1)}
                              </dt>
                              <dd>
                                <div className="text-lg font-medium text-gray-900">
                                  {intervention.title}
                                </div>
                              </dd>
                            </dl>
                          </div>
                        </div>
                      </div>
                      <div className="bg-gray-50 px-5 py-3">
                        <div className="text-sm">
                          <div className="font-medium text-gray-900">
                            {intervention.ngo}
                          </div>
                          <div className="mt-1">
                            <span className="text-gray-500">Location:</span>{' '}
                            {intervention.location}
                          </div>
                          <div className="mt-1">
                            <span className="text-gray-500">Timeline:</span>{' '}
                            {intervention.startDate}
                            {intervention.endDate &&
                              ` to ${intervention.endDate}`}
                          </div>
                          <div className="mt-1">
                            <StatusBadge status={intervention.status} />
                          </div>
                        </div>
                      </div>
                      <div className="border-t border-gray-200 px-5 py-3">
                        <a
                          href="#"
                          className="text-sm font-medium text-green-600 hover:text-green-800"
                        >
                          View Details <span aria-hidden="true">&rarr;</span>
                        </a>
                        {intervention.status === 'active' ||
                        intervention.status === 'ongoing' ? (
                          <button
                            type="button"
                            className="mt-2 w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                          >
                            Apply for Support
                          </button>
                        ) : null}
                      </div>
                    </div>
                  ))}
                </div>
              </Tab.Panel>
              {/* Aid History Panel */}
              <Tab.Panel className="p-6">
                <div className="mb-6">
                  <h2 className="text-lg font-medium text-gray-900">
                    Aid History Timeline
                  </h2>
                  <p className="text-gray-600 mt-1">
                    All services and support received by your household.
                  </p>
                </div>
                <div className="flow-root">
                  <ul className="-mb-8">
                    {householdRecords
                      .sort(
                        (a, b) =>
                          new Date(b.date).getTime() -
                          new Date(a.date).getTime(),
                      )
                      .map((record, idx, records) => {
                        const member = individuals.find(
                          (ind) => ind.id === record.individualId,
                        )
                        const intervention = interventions.find(
                          (int) => int.id === record.interventionId,
                        )
                        return (
                          <li key={record.id}>
                            <div className="relative pb-8">
                              {idx !== records.length - 1 ? (
                                <span
                                  className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
                                  aria-hidden="true"
                                ></span>
                              ) : null}
                              <div className="relative flex space-x-3">
                                <div>
                                  <span className="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white">
                                    <svg
                                      className="h-5 w-5 text-white"
                                      xmlns="http://www.w3.org/2000/svg"
                                      fill="none"
                                      viewBox="0 0 24 24"
                                      stroke="currentColor"
                                    >
                                      <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                                      />
                                    </svg>
                                  </span>
                                </div>
                                <div className="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                  <div>
                                    <p className="text-sm text-gray-500">
                                      <span className="font-medium text-gray-900">
                                        {record.serviceType}
                                      </span>{' '}
                                      received by{' '}
                                      <span className="font-medium text-gray-900">
                                        {member?.name}
                                      </span>{' '}
                                      through{' '}
                                      <span className="font-medium text-green-600">
                                        {intervention?.title}
                                      </span>
                                    </p>
                                    <p className="text-xs text-gray-500 mt-0.5">
                                      Provider: {record.providerNGO} | Value:
                                      KES {record.valueKES.toLocaleString()}
                                    </p>
                                  </div>
                                  <div className="text-right text-sm whitespace-nowrap text-gray-500">
                                    <time>{record.date}</time>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </li>
                        )
                      })}
                    {householdRecords.length === 0 && (
                      <li className="py-4 text-center text-gray-500">
                        No aid history recorded for your household.
                      </li>
                    )}
                  </ul>
                </div>
              </Tab.Panel>
              {/* My Contributions Panel */}
              <Tab.Panel className="p-6">
                <div className="mb-6">
                  <h2 className="text-lg font-medium text-gray-900">
                    Log a New Contribution
                  </h2>
                  <p className="text-gray-600 mt-1">
                    Record your volunteering or community service activities.
                  </p>
                  <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div>
                      <label
                        htmlFor="contributionType"
                        className="block text-sm font-medium text-gray-700"
                      >
                        Contribution Type
                      </label>
                      <select
                        id="contributionType"
                        className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm rounded-md"
                      >
                        <option>Community cleanup</option>
                        <option>Volunteer teaching</option>
                        <option>Mosque renovation</option>
                        <option>Food distribution</option>
                        <option>Other</option>
                      </select>
                    </div>
                    <div>
                      <label
                        htmlFor="contributionDate"
                        className="block text-sm font-medium text-gray-700"
                      >
                        Date
                      </label>
                      <input
                        type="date"
                        id="contributionDate"
                        className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                      />
                    </div>
                    <div>
                      <label
                        htmlFor="contributionHours"
                        className="block text-sm font-medium text-gray-700"
                      >
                        Hours
                      </label>
                      <input
                        type="number"
                        id="contributionHours"
                        className="mt-1 focus:ring-green-500 focus:border-green-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                        min="1"
                      />
                    </div>
                  </div>
                  <div className="mt-4">
                    <button
                      type="button"
                      className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                    >
                      Log Contribution
                    </button>
                  </div>
                </div>
                <div>
                  <h2 className="text-lg font-medium text-gray-900 mb-4">
                    My Contribution History
                  </h2>
                  <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                      <thead className="bg-gray-50">
                        <tr>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Contribution Type
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Date
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Hours
                          </th>
                          <th
                            scope="col"
                            className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                          >
                            Estimated Value (KES)
                          </th>
                        </tr>
                      </thead>
                      <tbody className="bg-white divide-y divide-gray-200">
                        {mockContributions.map((contribution) => (
                          <tr key={contribution.id}>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-900">
                                {contribution.type}
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-900">
                                {contribution.date}
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-900">
                                {contribution.hours}
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-900">
                                {contribution.valueKES.toLocaleString()}
                              </div>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                      <tfoot className="bg-gray-50">
                        <tr>
                          <td
                            colSpan={3}
                            className="px-6 py-3 text-right text-sm font-medium text-gray-500"
                          >
                            Total Value:
                          </td>
                          <td className="px-6 py-3 text-sm font-medium text-gray-900">
                            KES{' '}
                            {mockContributions
                              .reduce(
                                (sum, contribution) =>
                                  sum + contribution.valueKES,
                                0,
                              )
                              .toLocaleString()}
                          </td>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
              </Tab.Panel>
            </Tab.Panels>
          </Tab.Group>
        </div>
      </div>
    </Layout>
  )
}
export default BeneficiaryDashboard

```
```pages/SearchDiscovery.tsx
import React, { useState } from 'react'
import Layout from '../components/Layout'
import { Tab } from '@headlessui/react'
import households from '../data/households.json'
import interventions from '../data/interventions.json'
import individuals from '../data/individuals.json'
import StatusBadge from '../components/StatusBadge'
import { SearchIcon, FilterIcon } from 'lucide-react'
const SearchDiscovery = () => {
  const [searchTerm, setSearchTerm] = useState('')
  const [filterLocation, setFilterLocation] = useState('all')
  // Mock organizations data
  const organizations = [
    {
      id: 1,
      name: 'Zakat Kenya',
      type: 'NGO',
      location: 'Nairobi',
      focus: 'Poverty Alleviation',
    },
    {
      id: 2,
      name: 'Murshidat',
      type: 'CBO',
      location: 'Nairobi',
      focus: 'Women Empowerment',
    },
    {
      id: 3,
      name: 'MMRF',
      type: 'Foundation',
      location: 'Mombasa',
      focus: 'Education',
    },
    {
      id: 4,
      name: 'Islamic Relief',
      type: 'International NGO',
      location: 'Multiple',
      focus: 'Humanitarian Aid',
    },
    {
      id: 5,
      name: 'Al-Khair Foundation',
      type: 'Foundation',
      location: 'Mombasa',
      focus: 'Sustainable Development',
    },
  ]
  // Mock grants data
  const grants = [
    {
      id: 1,
      title: 'Community Development Fund',
      provider: 'Kenya Muslim Foundation',
      amount: 5000000,
      deadline: '2025-08-15',
      eligibility: 'Registered NGOs',
    },
    {
      id: 2,
      title: 'Women Empowerment Grant',
      provider: 'International Islamic Charity',
      amount: 3000000,
      deadline: '2025-07-01',
      eligibility: 'Women-focused organizations',
    },
    {
      id: 3,
      title: 'Education Support Fund',
      provider: 'Gulf African Bank',
      amount: 2000000,
      deadline: '2025-09-30',
      eligibility: 'Education institutions',
    },
    {
      id: 4,
      title: 'Micro-Business Startup Grant',
      provider: 'Takaful Africa',
      amount: 1000000,
      deadline: '2025-10-15',
      eligibility: 'Community groups',
    },
  ]
  // Get unique locations
  const locations = Array.from(
    new Set([
      ...households.map((h) => h.location.county),
      ...interventions.map((i) => i.location.split('-')[0]),
    ]),
  )
  function classNames(...classes: string[]) {
    return classes.filter(Boolean).join(' ')
  }
  // Filter data based on search term and location filter
  const filteredHouseholds = households.filter((household) => {
    const matchesSearch =
      household.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
      household.location.county
        .toLowerCase()
        .includes(searchTerm.toLowerCase()) ||
      household.location.subCounty
        .toLowerCase()
        .includes(searchTerm.toLowerCase())
    const matchesLocation =
      filterLocation === 'all' || household.location.county === filterLocation
    return matchesSearch && matchesLocation
  })
  const filteredOrganizations = organizations.filter((org) => {
    const matchesSearch =
      org.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      org.focus.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesLocation =
      filterLocation === 'all' ||
      org.location === filterLocation ||
      org.location === 'Multiple'
    return matchesSearch && matchesLocation
  })
  const filteredInterventions = interventions.filter((intervention) => {
    const matchesSearch =
      intervention.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      intervention.ngo.toLowerCase().includes(searchTerm.toLowerCase()) ||
      intervention.type.toLowerCase().includes(searchTerm.toLowerCase())
    const matchesLocation =
      filterLocation === 'all' || intervention.location.includes(filterLocation)
    return matchesSearch && matchesLocation
  })
  const filteredGrants = grants.filter((grant) => {
    const matchesSearch =
      grant.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      grant.provider.toLowerCase().includes(searchTerm.toLowerCase()) ||
      grant.eligibility.toLowerCase().includes(searchTerm.toLowerCase())
    return matchesSearch
  })
  return (
    <Layout>
      <div className="p-8">
        <div className="mb-6">
          <h1 className="text-2xl font-bold text-gray-900">
            Search & Discovery
          </h1>
          <p className="text-gray-600">
            Find households, organizations, interventions, and grants.
          </p>
        </div>
        <div className="mb-6 flex flex-col md:flex-row gap-4">
          <div className="relative flex-grow">
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <SearchIcon className="h-5 w-5 text-gray-400" />
            </div>
            <input
              type="text"
              className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
              placeholder="Search..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <div className="flex items-center">
            <FilterIcon className="mr-2 h-5 w-5 text-gray-400" />
            <select
              className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm rounded-md"
              value={filterLocation}
              onChange={(e) => setFilterLocation(e.target.value)}
            >
              <option value="all">All Locations</option>
              {locations.map((location) => (
                <option key={location} value={location}>
                  {location}
                </option>
              ))}
            </select>
          </div>
        </div>
        <div className="bg-white shadow rounded-lg">
          <Tab.Group>
            <Tab.List className="flex p-1 space-x-1 bg-green-50 rounded-t-lg">
              {['Households', 'Organizations', 'Interventions', 'Grants'].map(
                (category) => (
                  <Tab
                    key={category}
                    className={({ selected }) =>
                      classNames(
                        'w-full py-2.5 text-sm font-medium leading-5 text-green-700 rounded-md',
                        'focus:outline-none focus:ring-2 ring-offset-2 ring-offset-green-50 ring-green-600',
                        selected
                          ? 'bg-white shadow'
                          : 'text-green-800 hover:bg-green-100',
                      )
                    }
                  >
                    {category}
                  </Tab>
                ),
              )}
            </Tab.List>
            <Tab.Panels>
              {/* Households Panel */}
              <Tab.Panel className="p-6">
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Code
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Location
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Head of Household
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Members
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Status
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Actions
                        </th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {filteredHouseholds.map((household) => {
                        const head = individuals.find(
                          (ind) => ind.id === household.headOfHousehold,
                        )
                        return (
                          <tr key={household.id}>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm font-medium text-gray-900">
                                {household.code}
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-900">
                                {household.location.county},{' '}
                                {household.location.subCounty}
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-900">
                                {head?.name || 'Unknown'}
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <div className="text-sm text-gray-900">
                                {household.memberIds.length}
                              </div>
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap">
                              <StatusBadge
                                status={household.verificationStatus}
                              />
                            </td>
                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                              <a
                                href="#"
                                className="text-green-600 hover:text-green-900 mr-3"
                              >
                                View
                              </a>
                              <a
                                href="#"
                                className="text-green-600 hover:text-green-900"
                              >
                                Request Info
                              </a>
                            </td>
                          </tr>
                        )
                      })}
                      {filteredHouseholds.length === 0 && (
                        <tr>
                          <td
                            colSpan={6}
                            className="px-6 py-4 text-center text-sm text-gray-500"
                          >
                            No households found matching your search criteria.
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </Tab.Panel>
              {/* Organizations Panel */}
              <Tab.Panel className="p-6">
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Organization
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Type
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Location
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Focus Area
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Actions
                        </th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {filteredOrganizations.map((org) => (
                        <tr key={org.id}>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm font-medium text-gray-900">
                              {org.name}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-900">
                              {org.type}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-900">
                              {org.location}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-900">
                              {org.focus}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a
                              href="#"
                              className="text-green-600 hover:text-green-900 mr-3"
                            >
                              View Profile
                            </a>
                            <a
                              href="#"
                              className="text-green-600 hover:text-green-900"
                            >
                              Request Collaboration
                            </a>
                          </td>
                        </tr>
                      ))}
                      {filteredOrganizations.length === 0 && (
                        <tr>
                          <td
                            colSpan={5}
                            className="px-6 py-4 text-center text-sm text-gray-500"
                          >
                            No organizations found matching your search
                            criteria.
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </Tab.Panel>
              {/* Interventions Panel */}
              <Tab.Panel className="p-6">
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Title
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Type
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          NGO
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Location
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Timeline
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Status
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Actions
                        </th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {filteredInterventions.map((intervention) => (
                        <tr key={intervention.id}>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm font-medium text-gray-900">
                              {intervention.title}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-900">
                              {intervention.type}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-900">
                              {intervention.ngo}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-900">
                              {intervention.location}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-900">
                              {intervention.startDate}
                              {intervention.endDate &&
                                ` to ${intervention.endDate}`}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <StatusBadge status={intervention.status} />
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a
                              href="#"
                              className="text-green-600 hover:text-green-900 mr-3"
                            >
                              View
                            </a>
                            <a
                              href="#"
                              className="text-green-600 hover:text-green-900"
                            >
                              Request Partnership
                            </a>
                          </td>
                        </tr>
                      ))}
                      {filteredInterventions.length === 0 && (
                        <tr>
                          <td
                            colSpan={7}
                            className="px-6 py-4 text-center text-sm text-gray-500"
                          >
                            No interventions found matching your search
                            criteria.
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </Tab.Panel>
              {/* Grants Panel */}
              <Tab.Panel className="p-6">
                <div className="overflow-x-auto">
                  <table className="min-w-full divide-y divide-gray-200">
                    <thead className="bg-gray-50">
                      <tr>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Title
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Provider
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Amount (KES)
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Deadline
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Eligibility
                        </th>
                        <th
                          scope="col"
                          className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                        >
                          Actions
                        </th>
                      </tr>
                    </thead>
                    <tbody className="bg-white divide-y divide-gray-200">
                      {filteredGrants.map((grant) => (
                        <tr key={grant.id}>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm font-medium text-gray-900">
                              {grant.title}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-900">
                              {grant.provider}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-900">
                              {grant.amount.toLocaleString()}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-900">
                              {grant.deadline}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="text-sm text-gray-900">
                              {grant.eligibility}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a
                              href="#"
                              className="text-green-600 hover:text-green-900 mr-3"
                            >
                              View Details
                            </a>
                            <a
                              href="#"
                              className="text-green-600 hover:text-green-900"
                            >
                              Apply
                            </a>
                          </td>
                        </tr>
                      ))}
                      {filteredGrants.length === 0 && (
                        <tr>
                          <td
                            colSpan={6}
                            className="px-6 py-4 text-center text-sm text-gray-500"
                          >
                            No grants found matching your search criteria.
                          </td>
                        </tr>
                      )}
                    </tbody>
                  </table>
                </div>
              </Tab.Panel>
            </Tab.Panels>
          </Tab.Group>
        </div>
      </div>
    </Layout>
  )
}
export default SearchDiscovery

```
```pages/ReportsPage.tsx
import React, { useState } from 'react'
import Layout from '../components/Layout'
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
} from 'recharts'
import interventions from '../data/interventions.json'
import aidRecords from '../data/aid_records.json'
import households from '../data/households.json'
import { DownloadIcon } from 'lucide-react'
const ReportsPage = () => {
  const [reportType, setReportType] = useState('interventionType')
  // Count interventions by type
  const interventionsByType = interventions.reduce(
    (acc, intervention) => {
      const type = intervention.type
      if (!acc[type]) {
        acc[type] = 0
      }
      acc[type]++
      return acc
    },
    {} as Record<string, number>,
  )
  const interventionTypeData = Object.keys(interventionsByType).map((type) => ({
    name: type.charAt(0).toUpperCase() + type.slice(1),
    count: interventionsByType[type],
  }))
  // Count households by county
  const householdsByCounty = households.reduce(
    (acc, household) => {
      const county = household.location.county
      if (!acc[county]) {
        acc[county] = 0
      }
      acc[county]++
      return acc
    },
    {} as Record<string, number>,
  )
  const householdCountyData = Object.keys(householdsByCounty).map((county) => ({
    name: county,
    count: householdsByCounty[county],
  }))
  // Sum aid values by service type
  const aidByServiceType = aidRecords.reduce(
    (acc, record) => {
      const serviceType = record.serviceType
      if (!acc[serviceType]) {
        acc[serviceType] = 0
      }
      acc[serviceType] += record.valueKES
      return acc
    },
    {} as Record<string, number>,
  )
  const aidServiceTypeData = Object.keys(aidByServiceType).map((type) => ({
    name: type,
    value: aidByServiceType[type],
  }))
  // COLORS for pie chart
  const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8']
  const renderChart = () => {
    switch (reportType) {
      case 'interventionType':
        return (
          <div className="h-96">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={interventionTypeData}
                margin={{
                  top: 20,
                  right: 30,
                  left: 20,
                  bottom: 5,
                }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar
                  dataKey="count"
                  name="Number of Interventions"
                  fill="#4ade80"
                />
              </BarChart>
            </ResponsiveContainer>
          </div>
        )
      case 'householdCounty':
        return (
          <div className="h-96">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={householdCountyData}
                margin={{
                  top: 20,
                  right: 30,
                  left: 20,
                  bottom: 5,
                }}
              >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar
                  dataKey="count"
                  name="Number of Households"
                  fill="#f59e0b"
                />
              </BarChart>
            </ResponsiveContainer>
          </div>
        )
      case 'aidServiceType':
        return (
          <div className="h-96">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={aidServiceTypeData}
                  cx="50%"
                  cy="50%"
                  labelLine={true}
                  label={({ name, value }) =>
                    `${name}: KES ${value.toLocaleString()}`
                  }
                  outerRadius={120}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {aidServiceTypeData.map((entry, index) => (
                    <Cell
                      key={`cell-${index}`}
                      fill={COLORS[index % COLORS.length]}
                    />
                  ))}
                </Pie>
                <Tooltip
                  formatter={(value) => `KES ${Number(value).toLocaleString()}`}
                />
                <Legend />
              </PieChart>
            </ResponsiveContainer>
          </div>
        )
      default:
        return null
    }
  }
  return (
    <Layout>
      <div className="p-8">
        <div className="mb-6 flex justify-between items-center">
          <div>
            <h1 className="text-2xl font-bold text-gray-900">Reports</h1>
            <p className="text-gray-600">
              Analyze and visualize platform data.
            </p>
          </div>
          <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
            <DownloadIcon className="mr-2 h-4 w-4" />
            Export Report
          </button>
        </div>
        <div className="bg-white shadow rounded-lg p-6 mb-6">
          <div className="mb-6">
            <label
              htmlFor="reportType"
              className="block text-sm font-medium text-gray-700"
            >
              Select Report Type
            </label>
            <select
              id="reportType"
              className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm rounded-md"
              value={reportType}
              onChange={(e) => setReportType(e.target.value)}
            >
              <option value="interventionType">Interventions by Type</option>
              <option value="householdCounty">Households by County</option>
              <option value="aidServiceType">
                Support Value by Service Type
              </option>
            </select>
          </div>
          {renderChart()}
        </div>
        <div className="bg-white shadow rounded-lg p-6">
          <h2 className="text-lg font-medium text-gray-900 mb-4">
            Summary Statistics
          </h2>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
            <div className="bg-gray-50 p-4 rounded-md">
              <p className="text-sm font-medium text-gray-500">
                Total Households
              </p>
              <p className="mt-1 text-3xl font-semibold text-gray-900">
                {households.length}
              </p>
            </div>
            <div className="bg-gray-50 p-4 rounded-md">
              <p className="text-sm font-medium text-gray-500">
                Total Interventions
              </p>
              <p className="mt-1 text-3xl font-semibold text-gray-900">
                {interventions.length}
              </p>
            </div>
            <div className="bg-gray-50 p-4 rounded-md">
              <p className="text-sm font-medium text-gray-500">
                Total Services Provided
              </p>
              <p className="mt-1 text-3xl font-semibold text-gray-900">
                {aidRecords.length}
              </p>
            </div>
            <div className="bg-gray-50 p-4 rounded-md">
              <p className="text-sm font-medium text-gray-500">
                Total Support Value
              </p>
              <p className="mt-1 text-3xl font-semibold text-gray-900">
                KES{' '}
                {aidRecords
                  .reduce((sum, record) => sum + record.valueKES, 0)
                  .toLocaleString()}
              </p>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  )
}
export default ReportsPage

```