app/ui/frontend/src/pages/PrecisionDosing.tsx

import { useEffect, useState } from "react";
import DosingPanel from "../components/DosingPanel";
import { fetchDosingEval } from "../lib/api";

export default function PrecisionDosing() {
  const [data, setData] = useState<Record<string, unknown>>({
    target_attainment: 0.72,
    toxicity_proxy: 0.22,
    underdose_proxy: 0.31,
  });

  useEffect(() => {
    fetchDosingEval()
      .then((payload) => setData(payload.metrics ?? payload))
      .catch(() => undefined);
  }, []);

  return (
    <section className="page">
      <h1>Precision Dosing</h1>
      <DosingPanel data={data} />
    </section>
  );
}