Issue 1: repo scaffold and project structure

2026-06-07 19:20:02 +00:00
parent e0b31009b7
commit a70bdeaa5e
52 changed files with 6750 additions and 0 deletions
@@ -0,0 +1,148 @@
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { api, type Entity, type Holding, type Position, type ValuationRound } from "../api";
+import { formatMoney, formatGainLoss } from "../format";
+
+interface EntityRow extends Entity {
+  investedCents: number;
+  lastValueCents: number;
+}
+
+export default function EntitiesList() {
+  const [entities, setEntities] = useState<EntityRow[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  async function loadData() {
+    setLoading(true);
+    try {
+      const ents = await api.listEntities();
+      const enriched: EntityRow[] = [];
+
+      for (const ent of ents) {
+        const holdings = await api.listHoldings(ent.id);
+        let investedCents = 0;
+        let lastValueCents = 0;
+
+        // Get all positions for cost
+        for (const h of holdings) {
+          const positions = await api.listPositions(h.id);
+          for (const p of positions) {
+            investedCents += p.cost_cents;
+          }
+        }
+
+        // Get latest approved round for value
+        const rounds = await api.listRounds(ent.id);
+        const approved = rounds.filter((r) => r.status === "approved");
+        if (approved.length > 0) {
+          const latest = approved[0]; // Already sorted desc by quarter_end
+          lastValueCents = latest.valuations.reduce((sum, v) => sum + v.value_cents, 0);
+        }
+
+        enriched.push({ ...ent, investedCents, lastValueCents });
+      }
+
+      setEntities(enriched);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (loading) {
+    return <div className="text-gray-500 text-sm">Loading...</div>;
+  }
+
+  const funds = entities.filter((e) => e.type === "fund" || e.type === "spv");
+  const gps = entities.filter((e) => e.type === "gp" || e.type === "mgmt_co");
+
+  return (
+    <div className="space-y-8">
+      <EntityTable title="Funds and SPVs" rows={funds} />
+      <EntityTable title="GP Entities and Management Companies" rows={gps} />
+    </div>
+  );
+}
+
+function EntityTable({ title, rows }: { title: string; rows: EntityRow[] }) {
+  const totalInvested = rows.reduce((s, r) => s + r.investedCents, 0);
+  const totalValue = rows.reduce((s, r) => s + r.lastValueCents, 0);
+  const totalGain = totalValue - totalInvested;
+
+  const TYPE_LABELS: Record<string, string> = {
+    fund: "Fund",
+    spv: "SPV",
+    gp: "GP",
+    mgmt_co: "Mgmt Co",
+  };
+
+  return (
+    <div>
+      <h2 className="text-lg font-semibold text-gray-900 mb-3">{title}</h2>
+      <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-gray-50 border-b border-gray-200">
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Name</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Type</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Vintage</th>
+              <th className="text-right px-4 py-3 font-medium text-gray-600">Invested</th>
+              <th className="text-right px-4 py-3 font-medium text-gray-600">Last Signed Value</th>
+              <th className="text-right px-4 py-3 font-medium text-gray-600">Gain/Loss</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => {
+              const gl = formatGainLoss(row.lastValueCents, row.investedCents);
+              return (
+                <tr key={row.id} className="border-b border-gray-100 hover:bg-gray-50">
+                  <td className="px-4 py-3">
+                    <Link
+                      to={`/entities/${row.id}`}
+                      className="text-gray-900 font-medium hover:text-orange-600"
+                    >
+                      {row.name}
+                    </Link>
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="inline-block px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded">
+                      {TYPE_LABELS[row.type] || row.type}
+                    </span>
+                  </td>
+                  <td className="px-4 py-3 text-gray-600">{row.vintage_year || "—"}</td>
+                  <td className="px-4 py-3 text-right text-gray-900">{formatMoney(row.investedCents)}</td>
+                  <td className="px-4 py-3 text-right text-gray-900">{formatMoney(row.lastValueCents)}</td>
+                  <td className={`px-4 py-3 text-right font-medium ${gl.positive ? "text-green-600" : "text-red-600"}`}>
+                    {gl.positive ? "+" : "-"}{gl.text}
+                  </td>
+                </tr>
+              );
+            })}
+            {rows.length > 0 && (
+              <tr className="bg-gray-50 font-medium">
+                <td className="px-4 py-3 text-gray-900" colSpan={3}>
+                  Total
+                </td>
+                <td className="px-4 py-3 text-right text-gray-900">{formatMoney(totalInvested)}</td>
+                <td className="px-4 py-3 text-right text-gray-900">{formatMoney(totalValue)}</td>
+                <td className={`px-4 py-3 text-right ${totalGain >= 0 ? "text-green-600" : "text-red-600"}`}>
+                  {totalGain >= 0 ? "+" : "-"}{formatMoney(Math.abs(totalGain))}
+                </td>
+              </tr>
+            )}
+            {rows.length === 0 && (
+              <tr>
+                <td className="px-4 py-6 text-center text-gray-400" colSpan={6}>
+                  No entities yet.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,152 @@
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { api, type Entity, type Holding, type Position, type ValuationRound } from "../api";
+import { formatMoney, formatDate, formatQuarter } from "../format";
+
+const TYPE_LABELS: Record<string, string> = {
+  fund: "Fund",
+  spv: "SPV",
+  gp: "GP",
+  mgmt_co: "Mgmt Co",
+};
+
+const STATUS_COLORS: Record<string, string> = {
+  draft: "bg-gray-100 text-gray-600",
+  submitted: "bg-yellow-100 text-yellow-700",
+  approved: "bg-green-100 text-green-700",
+  returned: "bg-red-100 text-red-600",
+};
+
+export default function EntityOverview() {
+  const { id } = useParams<{ id: string }>();
+  const [entity, setEntity] = useState<Entity | null>(null);
+  const [holdings, setHoldings] = useState<Holding[]>([]);
+  const [totalInvested, setTotalInvested] = useState(0);
+  const [lastValue, setLastValue] = useState(0);
+  const [latestRound, setLatestRound] = useState<ValuationRound | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!id) return;
+    loadData(parseInt(id));
+  }, [id]);
+
+  async function loadData(entityId: number) {
+    setLoading(true);
+    try {
+      const ent = await api.getEntity(entityId);
+      setEntity(ent);
+
+      const holds = await api.listHoldings(entityId);
+      setHoldings(holds);
+
+      let invested = 0;
+      for (const h of holds) {
+        const positions = await api.listPositions(h.id);
+        for (const p of positions) {
+          invested += p.cost_cents;
+        }
+      }
+      setTotalInvested(invested);
+
+      const rounds = await api.listRounds(entityId);
+      const approved = rounds.filter((r) => r.status === "approved");
+      if (approved.length > 0) {
+        setLatestRound(approved[0]);
+        setLastValue(approved[0].valuations.reduce((s, v) => s + v.value_cents, 0));
+      }
+      // Also check for most recent round of any status
+      if (rounds.length > 0) {
+        setLatestRound(rounds[0]);
+        if (rounds[0].status === "approved") {
+          setLastValue(rounds[0].valuations.reduce((s, v) => s + v.value_cents, 0));
+        }
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (loading || !entity) {
+    return <div className="text-gray-500 text-sm">Loading...</div>;
+  }
+
+  const gainLoss = lastValue - totalInvested;
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="mb-6">
+        <div className="flex items-center gap-3 mb-1">
+          <h1 className="text-2xl font-semibold text-gray-900">{entity.name}</h1>
+          <span className="inline-block px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded">
+            {TYPE_LABELS[entity.type] || entity.type}
+          </span>
+        </div>
+        {/* Tabs */}
+        <div className="flex gap-6 mt-4 border-b border-gray-200">
+          <span className="pb-2 border-b-2 border-orange-500 text-sm font-medium text-orange-600">
+            Overview
+          </span>
+          <Link
+            to={`/entities/${entity.id}/investments`}
+            className="pb-2 text-sm text-gray-500 hover:text-gray-800"
+          >
+            Investments
+          </Link>
+          <span className="pb-2 text-sm text-gray-400 cursor-not-allowed">Partners</span>
+          <span className="pb-2 text-sm text-gray-400 cursor-not-allowed">Documents</span>
+        </div>
+      </div>
+
+      {/* Summary cards */}
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-8">
+        <SummaryCard label="Vintage" value={entity.vintage_year?.toString() || "—"} />
+        <SummaryCard label="Fund Size" value={formatMoney(entity.fund_size_cents)} />
+        <SummaryCard label="Total Invested" value={formatMoney(totalInvested)} />
+        <SummaryCard label="Holdings" value={holdings.length.toString()} />
+        <SummaryCard label="Last Signed Value" value={formatMoney(lastValue)} />
+        <SummaryCard
+          label="Gain/Loss"
+          value={`${gainLoss >= 0 ? "+" : "-"}${formatMoney(Math.abs(gainLoss))}`}
+          color={gainLoss >= 0 ? "text-green-600" : "text-red-600"}
+        />
+      </div>
+
+      {/* Current quarter status */}
+      {latestRound && (
+        <div className="bg-white border border-gray-200 rounded-lg p-4">
+          <h3 className="text-sm font-medium text-gray-700 mb-2">Current Quarter Status</h3>
+          <div className="flex items-center gap-3">
+            <span className="text-sm text-gray-900">{formatQuarter(latestRound.quarter_end)}</span>
+            <span className={`inline-block px-2 py-0.5 text-xs rounded ${STATUS_COLORS[latestRound.status]}`}>
+              {latestRound.status}
+            </span>
+            {latestRound.status === "approved" && latestRound.approved_at && (
+              <span className="text-sm text-gray-500">
+                Signed {formatDate(latestRound.approved_at)}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SummaryCard({
+  label,
+  value,
+  color = "text-gray-900",
+}: {
+  label: string;
+  value: string;
+  color?: string;
+}) {
+  return (
+    <div className="bg-white border border-gray-200 rounded-lg p-4">
+      <div className="text-xs text-gray-500 mb-1">{label}</div>
+      <div className={`text-lg font-semibold ${color}`}>{value}</div>
+    </div>
+  );
+}
@@ -0,0 +1,233 @@
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { api, type Entity, type Holding, type Position, type ValuationRound, type Valuation } from "../api";
+import { formatMoney, formatMoneyExact, formatDate, formatQuarter, formatPerShare } from "../format";
+
+const TYPE_LABELS: Record<string, string> = {
+  fund: "Fund",
+  spv: "SPV",
+  gp: "GP",
+  mgmt_co: "Mgmt Co",
+};
+
+interface PositionWithValuation extends Position {
+  lastValueCents: number | null;
+  valuationDate: string | null;
+  valuationQuarter: string | null;
+}
+
+interface HoldingGroup {
+  holding: Holding;
+  positions: PositionWithValuation[];
+  totalCost: number;
+  totalValue: number;
+}
+
+export default function Investments() {
+  const { id } = useParams<{ id: string }>();
+  const [entity, setEntity] = useState<Entity | null>(null);
+  const [groups, setGroups] = useState<HoldingGroup[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!id) return;
+    loadData(parseInt(id));
+  }, [id]);
+
+  async function loadData(entityId: number) {
+    setLoading(true);
+    try {
+      const ent = await api.getEntity(entityId);
+      setEntity(ent);
+
+      const holdings = await api.listHoldings(entityId);
+      const rounds = await api.listRounds(entityId);
+
+      // Find latest approved round
+      const approvedRounds = rounds
+        .filter((r) => r.status === "approved")
+        .sort((a, b) => b.quarter_end.localeCompare(a.quarter_end));
+      const latestApproved = approvedRounds[0] || null;
+
+      // Build valuation lookup: position_id -> {value_cents, quarter_end, approved_at}
+      const valMap = new Map<number, { value_cents: number; quarter_end: string; approved_at: string | null }>();
+      if (latestApproved) {
+        for (const v of latestApproved.valuations) {
+          valMap.set(v.position_id, {
+            value_cents: v.value_cents,
+            quarter_end: latestApproved.quarter_end,
+            approved_at: latestApproved.approved_at,
+          });
+        }
+      }
+
+      const result: HoldingGroup[] = [];
+      for (const h of holdings) {
+        const positions = await api.listPositions(h.id);
+        const enriched: PositionWithValuation[] = positions.map((p) => {
+          const val = valMap.get(p.id);
+          return {
+            ...p,
+            lastValueCents: val?.value_cents ?? null,
+            valuationDate: val?.approved_at ?? null,
+            valuationQuarter: val?.quarter_end ?? null,
+          };
+        });
+        const totalCost = enriched.reduce((s, p) => s + p.cost_cents, 0);
+        const totalValue = enriched.reduce((s, p) => s + (p.lastValueCents ?? 0), 0);
+        result.push({ holding: h, positions: enriched, totalCost, totalValue });
+      }
+
+      setGroups(result);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (loading || !entity) {
+    return <div className="text-gray-500 text-sm">Loading...</div>;
+  }
+
+  const totalCost = groups.reduce((s, g) => s + g.totalCost, 0);
+  const totalValue = groups.reduce((s, g) => s + g.totalValue, 0);
+  const totalGain = totalValue - totalCost;
+  const positionCount = groups.reduce((s, g) => s + g.positions.length, 0);
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="mb-6">
+        <div className="flex items-center gap-3 mb-1">
+          <h1 className="text-2xl font-semibold text-gray-900">{entity.name}</h1>
+          <span className="inline-block px-2 py-0.5 bg-gray-100 text-gray-600 text-xs rounded">
+            {TYPE_LABELS[entity.type] || entity.type}
+          </span>
+        </div>
+        <div className="flex gap-6 mt-4 border-b border-gray-200">
+          <Link
+            to={`/entities/${entity.id}`}
+            className="pb-2 text-sm text-gray-500 hover:text-gray-800"
+          >
+            Overview
+          </Link>
+          <span className="pb-2 border-b-2 border-orange-500 text-sm font-medium text-orange-600">
+            Investments
+          </span>
+          <span className="pb-2 text-sm text-gray-400 cursor-not-allowed">Partners</span>
+          <span className="pb-2 text-sm text-gray-400 cursor-not-allowed">Documents</span>
+        </div>
+      </div>
+
+      {/* Header band */}
+      <div className="flex gap-6 mb-6 text-sm">
+        <div>
+          <span className="text-gray-500">Active investments:</span>{" "}
+          <span className="font-medium text-gray-900">{positionCount}</span>
+        </div>
+        <div>
+          <span className="text-gray-500">Total cost:</span>{" "}
+          <span className="font-medium text-gray-900">{formatMoney(totalCost)}</span>
+        </div>
+        <div>
+          <span className="text-gray-500">Total value:</span>{" "}
+          <span className="font-medium text-gray-900">{formatMoney(totalValue)}</span>
+        </div>
+        <div>
+          <span className="text-gray-500">Unrealized gain/loss:</span>{" "}
+          <span className={`font-medium ${totalGain >= 0 ? "text-green-600" : "text-red-600"}`}>
+            {totalGain >= 0 ? "+" : "-"}{formatMoney(Math.abs(totalGain))}
+          </span>
+        </div>
+      </div>
+
+      {/* Grouped table */}
+      <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-gray-50 border-b border-gray-200">
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Security</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Date</th>
+              <th className="text-right px-4 py-3 font-medium text-gray-600">Shares</th>
+              <th className="text-right px-4 py-3 font-medium text-gray-600">Cost</th>
+              <th className="text-right px-4 py-3 font-medium text-gray-600">Cost/Share</th>
+              <th className="text-right px-4 py-3 font-medium text-gray-600">Signed Value</th>
+              <th className="text-right px-4 py-3 font-medium text-gray-600">Value/Share</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Signed</th>
+              <th className="text-right px-4 py-3 font-medium text-gray-600">Gain/Loss</th>
+            </tr>
+          </thead>
+          <tbody>
+            {groups.map((group) => {
+              const holdingGain = group.totalValue - group.totalCost;
+              return (
+                <HoldingGroupRows key={group.holding.id} group={group} holdingGain={holdingGain} />
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function HoldingGroupRows({ group, holdingGain }: { group: HoldingGroup; holdingGain: number }) {
+  return (
+    <>
+      {/* Holding header row */}
+      <tr className="bg-gray-50 border-t border-gray-200">
+        <td className="px-4 py-2 font-semibold text-gray-900" colSpan={3}>
+          {group.holding.company_name}
+        </td>
+        <td className="px-4 py-2 text-right font-medium text-gray-900">
+          {formatMoney(group.totalCost)}
+        </td>
+        <td className="px-4 py-2" />
+        <td className="px-4 py-2 text-right font-medium text-gray-900">
+          {formatMoney(group.totalValue)}
+        </td>
+        <td className="px-4 py-2" />
+        <td className="px-4 py-2" />
+        <td className={`px-4 py-2 text-right font-medium ${holdingGain >= 0 ? "text-green-600" : "text-red-600"}`}>
+          {holdingGain >= 0 ? "+" : "-"}{formatMoney(Math.abs(holdingGain))}
+        </td>
+      </tr>
+      {/* Position rows */}
+      {group.positions.map((pos) => {
+        const gain = (pos.lastValueCents ?? 0) - pos.cost_cents;
+        return (
+          <tr key={pos.id} className="border-b border-gray-100 hover:bg-gray-50">
+            <td className="px-4 py-2 pl-8 text-gray-700">{pos.security_name}</td>
+            <td className="px-4 py-2 text-gray-600">{formatDate(pos.investment_date)}</td>
+            <td className="px-4 py-2 text-right text-gray-600">
+              {pos.shares ? parseFloat(pos.shares).toLocaleString() : "—"}
+            </td>
+            <td className="px-4 py-2 text-right text-gray-900">{formatMoney(pos.cost_cents)}</td>
+            <td className="px-4 py-2 text-right text-gray-600">
+              {formatPerShare(pos.cost_cents, pos.shares)}
+            </td>
+            <td className="px-4 py-2 text-right text-gray-900">
+              {pos.lastValueCents != null ? formatMoney(pos.lastValueCents) : "—"}
+            </td>
+            <td className="px-4 py-2 text-right text-gray-600">
+              {pos.lastValueCents != null ? formatPerShare(pos.lastValueCents, pos.shares) : "—"}
+            </td>
+            <td className="px-4 py-2 text-gray-600">
+              {pos.valuationQuarter
+                ? `${formatQuarter(pos.valuationQuarter)} ${pos.valuationDate ? formatDate(pos.valuationDate) : ""}`
+                : "—"}
+            </td>
+            <td className={`px-4 py-2 text-right font-medium ${gain >= 0 ? "text-green-600" : "text-red-600"}`}>
+              {pos.lastValueCents != null ? (
+                <>
+                  {gain >= 0 ? "▲" : "▼"} {formatMoney(Math.abs(gain))}
+                </>
+              ) : (
+                "—"
+              )}
+            </td>
+          </tr>
+        );
+      })}
+    </>
+  );
+}
@@ -0,0 +1,61 @@
+import { useState, type FormEvent } from "react";
+import { useAuth } from "../context/AuthContext";
+
+export default function Login() {
+  const { login } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+    try {
+      await login(email, password);
+    } catch (err: any) {
+      setError(err.message || "Login failed");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+      <div className="bg-white p-8 rounded-lg shadow-sm border border-gray-200 w-96">
+        <h1 className="text-xl font-semibold text-gray-900 mb-6">Ten31Portal</h1>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm text-gray-700 mb-1">Email</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
+              required
+            />
+          </div>
+          <div>
+            <label className="block text-sm text-gray-700 mb-1">Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
+              required
+            />
+          </div>
+          {error && <p className="text-sm text-red-600">{error}</p>}
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full py-2 bg-gray-900 text-white text-sm rounded hover:bg-gray-800 disabled:opacity-50"
+          >
+            {loading ? "Signing in..." : "Sign in"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,411 @@
+import { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import {
+  api,
+  type Entity,
+  type Holding,
+  type Position,
+  type ValuationRound,
+  type Valuation,
+} from "../api";
+import { useAuth } from "../context/AuthContext";
+import { formatMoney, formatMoneyExact, formatQuarter, formatDate } from "../format";
+
+const STATUS_COLORS: Record<string, string> = {
+  draft: "bg-gray-100 text-gray-600",
+  submitted: "bg-yellow-100 text-yellow-700",
+  approved: "bg-green-100 text-green-700",
+  returned: "bg-red-100 text-red-600",
+};
+
+interface PosInfo {
+  position: Position;
+  holdingName: string;
+}
+
+export default function ValuationWorkflow() {
+  const { id } = useParams<{ id: string }>();
+  const { user } = useAuth();
+  const [entity, setEntity] = useState<Entity | null>(null);
+  const [rounds, setRounds] = useState<ValuationRound[]>([]);
+  const [selectedRound, setSelectedRound] = useState<ValuationRound | null>(null);
+  const [posMap, setPosMap] = useState<Map<number, PosInfo>>(new Map());
+  const [editValues, setEditValues] = useState<Map<number, string>>(new Map());
+  const [priorValues, setPriorValues] = useState<Map<number, number>>(new Map());
+  const [returnNote, setReturnNote] = useState("");
+  const [newQuarter, setNewQuarter] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  const entityId = id ? parseInt(id) : 0;
+  const isApprover = user?.role === "approver";
+  const canEdit =
+    selectedRound &&
+    (selectedRound.status === "draft" || selectedRound.status === "returned") &&
+    user &&
+    ["fund_admin", "cfo", "approver"].includes(user.role);
+  const canSubmit = canEdit;
+  const canApprove =
+    selectedRound?.status === "submitted" && isApprover;
+  const canReturn =
+    selectedRound?.status === "submitted" && isApprover;
+
+  useEffect(() => {
+    if (!entityId) return;
+    loadData();
+  }, [entityId]);
+
+  async function loadData() {
+    setLoading(true);
+    try {
+      const ent = await api.getEntity(entityId);
+      setEntity(ent);
+
+      const rds = await api.listRounds(entityId);
+      setRounds(rds);
+      if (rds.length > 0) selectRound(rds[0], entityId);
+
+      // Build position map
+      const holdings = await api.listHoldings(entityId);
+      const pm = new Map<number, PosInfo>();
+      for (const h of holdings) {
+        const positions = await api.listPositions(h.id);
+        for (const p of positions) {
+          pm.set(p.id, { position: p, holdingName: h.company_name });
+        }
+      }
+      setPosMap(pm);
+
+      // Build prior approved values map
+      const approvedRounds = rds.filter((r) => r.status === "approved");
+      if (approvedRounds.length > 0) {
+        const latest = approvedRounds[0];
+        const pv = new Map<number, number>();
+        for (const v of latest.valuations) {
+          pv.set(v.position_id, v.value_cents);
+        }
+        setPriorValues(pv);
+      }
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function selectRound(round: ValuationRound, _entityId?: number) {
+    setSelectedRound(round);
+    const ev = new Map<number, string>();
+    for (const v of round.valuations) {
+      ev.set(v.position_id, (v.value_cents / 100).toString());
+    }
+    setEditValues(ev);
+    setError("");
+  }
+
+  async function handleCreateRound() {
+    if (!newQuarter) return;
+    setError("");
+    try {
+      const round = await api.createRound(entityId, newQuarter);
+      setRounds((prev) => [round, ...prev]);
+      selectRound(round);
+      setNewQuarter("");
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  async function handleSave() {
+    if (!selectedRound) return;
+    setSaving(true);
+    setError("");
+    try {
+      const valuations = Array.from(editValues.entries()).map(([posId, dollars]) => ({
+        position_id: posId,
+        value_cents: Math.round(parseFloat(dollars) * 100),
+      }));
+      const updated = await api.updateValuations(selectedRound.id, valuations);
+      setSelectedRound(updated);
+      setRounds((prev) => prev.map((r) => (r.id === updated.id ? updated : r)));
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleSubmit() {
+    if (!selectedRound) return;
+    await handleSave();
+    try {
+      const updated = await api.submitRound(selectedRound.id);
+      setSelectedRound(updated);
+      setRounds((prev) => prev.map((r) => (r.id === updated.id ? updated : r)));
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  async function handleApprove() {
+    if (!selectedRound) return;
+    try {
+      const updated = await api.approveRound(selectedRound.id);
+      setSelectedRound(updated);
+      setRounds((prev) => prev.map((r) => (r.id === updated.id ? updated : r)));
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  async function handleReturn() {
+    if (!selectedRound || !returnNote.trim()) return;
+    try {
+      const updated = await api.returnRound(selectedRound.id, returnNote);
+      setSelectedRound(updated);
+      setRounds((prev) => prev.map((r) => (r.id === updated.id ? updated : r)));
+      setReturnNote("");
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }
+
+  if (loading || !entity) {
+    return <div className="text-gray-500 text-sm">Loading...</div>;
+  }
+
+  return (
+    <div>
+      <div className="mb-6">
+        <div className="flex items-center gap-3 mb-1">
+          <h1 className="text-2xl font-semibold text-gray-900">{entity.name}</h1>
+        </div>
+        <div className="flex gap-6 mt-4 border-b border-gray-200">
+          <Link to={`/entities/${entity.id}`} className="pb-2 text-sm text-gray-500 hover:text-gray-800">
+            Overview
+          </Link>
+          <Link to={`/entities/${entity.id}/investments`} className="pb-2 text-sm text-gray-500 hover:text-gray-800">
+            Investments
+          </Link>
+          <span className="pb-2 border-b-2 border-orange-500 text-sm font-medium text-orange-600">
+            Valuation
+          </span>
+        </div>
+      </div>
+
+      {error && (
+        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded text-sm text-red-700">
+          {error}
+        </div>
+      )}
+
+      <div className="flex gap-6">
+        {/* Round list sidebar */}
+        <div className="w-64 shrink-0">
+          <div className="mb-4">
+            <h3 className="text-sm font-medium text-gray-700 mb-2">New Round</h3>
+            <div className="flex gap-2">
+              <input
+                type="date"
+                value={newQuarter}
+                onChange={(e) => setNewQuarter(e.target.value)}
+                className="flex-1 px-2 py-1.5 border border-gray-300 rounded text-sm"
+                placeholder="Quarter end"
+              />
+              <button
+                onClick={handleCreateRound}
+                className="px-3 py-1.5 bg-gray-900 text-white text-sm rounded hover:bg-gray-800"
+              >
+                Create
+              </button>
+            </div>
+          </div>
+
+          <h3 className="text-sm font-medium text-gray-700 mb-2">Rounds</h3>
+          <ul className="space-y-1">
+            {rounds.map((r) => (
+              <li key={r.id}>
+                <button
+                  onClick={() => selectRound(r)}
+                  className={`w-full text-left px-3 py-2 rounded text-sm ${
+                    selectedRound?.id === r.id ? "bg-orange-50 text-orange-700" : "hover:bg-gray-50 text-gray-700"
+                  }`}
+                >
+                  <div className="font-medium">{formatQuarter(r.quarter_end)}</div>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span className={`inline-block px-1.5 py-0.5 text-xs rounded ${STATUS_COLORS[r.status]}`}>
+                      {r.status}
+                    </span>
+                    {r.is_seed && <span className="text-xs text-gray-400">seed</span>}
+                  </div>
+                </button>
+              </li>
+            ))}
+            {rounds.length === 0 && (
+              <li className="text-sm text-gray-400 px-3">No rounds yet.</li>
+            )}
+          </ul>
+        </div>
+
+        {/* Round detail */}
+        {selectedRound ? (
+          <div className="flex-1">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-3">
+                <h2 className="text-lg font-semibold text-gray-900">
+                  {formatQuarter(selectedRound.quarter_end)}
+                </h2>
+                <span className={`inline-block px-2 py-0.5 text-xs rounded ${STATUS_COLORS[selectedRound.status]}`}>
+                  {selectedRound.status}
+                </span>
+              </div>
+              <div className="flex gap-2">
+                {canEdit && (
+                  <>
+                    <button
+                      onClick={handleSave}
+                      disabled={saving}
+                      className="px-3 py-1.5 border border-gray-300 text-sm rounded hover:bg-gray-50"
+                    >
+                      {saving ? "Saving..." : "Save"}
+                    </button>
+                    <button
+                      onClick={handleSubmit}
+                      className="px-3 py-1.5 bg-gray-900 text-white text-sm rounded hover:bg-gray-800"
+                    >
+                      Submit for Review
+                    </button>
+                  </>
+                )}
+                {canApprove && (
+                  <button
+                    onClick={handleApprove}
+                    className="px-3 py-1.5 bg-green-600 text-white text-sm rounded hover:bg-green-700"
+                  >
+                    Approve
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {selectedRound.return_note && selectedRound.status === "returned" && (
+              <div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded text-sm text-yellow-800">
+                Return note: {selectedRound.return_note}
+              </div>
+            )}
+
+            {selectedRound.status === "approved" && selectedRound.approved_at && (
+              <div className="mb-4 text-sm text-gray-500">
+                Approved by user #{selectedRound.approved_by} on {formatDate(selectedRound.approved_at)}
+              </div>
+            )}
+
+            {/* Valuations table */}
+            <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="bg-gray-50 border-b border-gray-200">
+                    <th className="text-left px-4 py-3 font-medium text-gray-600">Company</th>
+                    <th className="text-left px-4 py-3 font-medium text-gray-600">Security</th>
+                    <th className="text-right px-4 py-3 font-medium text-gray-600">Cost</th>
+                    {canApprove && (
+                      <th className="text-right px-4 py-3 font-medium text-gray-600">Prior Value</th>
+                    )}
+                    <th className="text-right px-4 py-3 font-medium text-gray-600">
+                      {canEdit ? "Value (edit)" : "Value"}
+                    </th>
+                    {canApprove && (
+                      <th className="text-right px-4 py-3 font-medium text-gray-600">Delta</th>
+                    )}
+                  </tr>
+                </thead>
+                <tbody>
+                  {selectedRound.valuations.map((v) => {
+                    const info = posMap.get(v.position_id);
+                    const prior = priorValues.get(v.position_id) ?? 0;
+                    const currentCents = canEdit
+                      ? Math.round(parseFloat(editValues.get(v.position_id) || "0") * 100)
+                      : v.value_cents;
+                    const delta = currentCents - prior;
+
+                    return (
+                      <tr key={v.id} className="border-b border-gray-100">
+                        <td className="px-4 py-2 text-gray-700">{info?.holdingName || "—"}</td>
+                        <td className="px-4 py-2 text-gray-700">{info?.position.security_name || "—"}</td>
+                        <td className="px-4 py-2 text-right text-gray-600">
+                          {info ? formatMoney(info.position.cost_cents) : "—"}
+                        </td>
+                        {canApprove && (
+                          <td className="px-4 py-2 text-right text-gray-600">
+                            {formatMoney(prior)}
+                          </td>
+                        )}
+                        <td className="px-4 py-2 text-right">
+                          {canEdit ? (
+                            <input
+                              type="number"
+                              step="0.01"
+                              value={editValues.get(v.position_id) || "0"}
+                              onChange={(e) => {
+                                const next = new Map(editValues);
+                                next.set(v.position_id, e.target.value);
+                                setEditValues(next);
+                              }}
+                              className="w-32 px-2 py-1 border border-gray-300 rounded text-right text-sm"
+                            />
+                          ) : (
+                            <span className="text-gray-900">{formatMoney(v.value_cents)}</span>
+                          )}
+                        </td>
+                        {canApprove && (
+                          <td className={`px-4 py-2 text-right font-medium ${delta >= 0 ? "text-green-600" : "text-red-600"}`}>
+                            {delta >= 0 ? "+" : "-"}{formatMoney(Math.abs(delta))}
+                          </td>
+                        )}
+                      </tr>
+                    );
+                  })}
+                  {selectedRound.valuations.length === 0 && (
+                    <tr>
+                      <td className="px-4 py-6 text-center text-gray-400" colSpan={6}>
+                        No positions in this round.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Return form for approvers */}
+            {canReturn && (
+              <div className="mt-4 p-4 bg-gray-50 border border-gray-200 rounded">
+                <h3 className="text-sm font-medium text-gray-700 mb-2">Return with note</h3>
+                <div className="flex gap-2">
+                  <input
+                    type="text"
+                    value={returnNote}
+                    onChange={(e) => setReturnNote(e.target.value)}
+                    className="flex-1 px-3 py-2 border border-gray-300 rounded text-sm"
+                    placeholder="Reason for returning..."
+                  />
+                  <button
+                    onClick={handleReturn}
+                    disabled={!returnNote.trim()}
+                    className="px-4 py-2 bg-red-600 text-white text-sm rounded hover:bg-red-700 disabled:opacity-50"
+                  >
+                    Return
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex-1 flex items-center justify-center text-gray-400 text-sm">
+            Select or create a round.
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}