src_app.js

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [judges, setJudges] = useState([]);
  const [cases, setCases] = useState([]);
  const [assignments, setAssignments] = useState([]);
  const [selectedCase, setSelectedCase] = useState(null);
  const [wealthData, setWealthData] = useState({ judgeId: '', year: '', assets: '' });

  // Fetch data from backend
  useEffect(() => {
    fetch('http://localhost:5000/data')
      .then(res => res.json())
      .then(data => {
        setJudges(data.judges);
        setCases(data.cases);
        setAssignments(data.assignments);
      });
  }, []);

  // Assign a judge to a case
  const handleAssign = () => {
    if (!selectedCase) return;
    fetch('http://localhost:5000/assign', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ case_id: selectedCase })
    })
      .then(res => res.json())
      .then(data => {
        alert(`Assigned: Case ${data.case_id} → Judge ${data.judge_id}`);
        window.location.reload();
      });
  };

  // Submit a wealth report
  const handleWealthSubmit = () => {
    fetch('http://localhost:5000/wealth', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(wealthData)
    })
      .then(res => res.json())
      .then(data => {
        alert(`Wealth report hashed: ${data.hash}`);
        window.location.reload();
      });
  };

  return (
    <div className="App">
      <h1>BiasGuard+ Judicial Transparency System</h1>
      
      {/* Case Assignment */}
      <div className="section">
        <h2>Case Assignment</h2>
        <select onChange={(e) => setSelectedCase(parseInt(e.target.value))}>
          <option>Select a case</option>
          {cases.map(c => (
            <option key={c.id} value={c.id}>
              Case {c.id}: {c.defendant} ({c.category})
            </option>
          ))}
        </select>
        <button onClick={handleAssign}>Assign Judge</button>
      </div>

      {/* Wealth Disclosure */}
      <div className="section">
        <h2>Wealth Disclosure</h2>
        <input 
          type="number" 
          placeholder="Judge ID" 
          onChange={(e) => setWealthData({...wealthData, judgeId: e.target.value})}
        />
        <input 
          type="number" 
          placeholder="Year" 
          onChange={(e) => setWealthData({...wealthData, year: e.target.value})}
        />
        <input 
          type="number" 
          placeholder="Assets ($)" 
          onChange={(e) => setWealthData({...wealthData, assets: e.target.value})}
        />
        <button onClick={handleWealthSubmit}>Submit Report</button>
      </div>

      {/* Public Dashboard */}
      <div className="section">
        <h2>Public Dashboard</h2>
        <h3>Recent Assignments</h3>
        <ul>
          {assignments.map(a => (
            <li key={a.timestamp}>
              Case {a.case_id} → Judge {a.judge_id} (at {a.timestamp})
            </li>
          ))}
        </ul>
        
        <h3>Judge Wealth Trends</h3>
        {judges.map(j => (
          <div key={j.id}>
            <h4>{j.name}</h4>
            <ul>
              {j.wealth_reports.map((r, i) => (
                <li key={i}>
                  Year {r.year}: ${r.assets} (Hash: {r.hash.slice(0, 10)}...)
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;