From 7c33693eaba93c720bca35e5a28f384f62201286 Mon Sep 17 00:00:00 2001
From: Johnny 5 <johnny5@ten31.ai>
Date: Mon, 8 Jun 2026 02:59:31 +0000
Subject: [PATCH] Issue 18: Add Entity form on the entities list

- Add Entity button visible only for writer roles
- Inline form: name, type (Fund/SPV/GP/Mgmt Co), vintage year, fund size
- Fund size entered as dollars, stored as cents
- API errors surfaced inline
- Refreshes list on success
---
 frontend/src/pages/EntitiesList.tsx | 174 ++++++++++++++++++++++++++--
 1 file changed, 163 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/EntitiesList.tsx b/frontend/src/pages/EntitiesList.tsx
index 9662968..79594d7 100644
--- a/frontend/src/pages/EntitiesList.tsx
+++ b/frontend/src/pages/EntitiesList.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import { api, type Entity, type Holding, type Position, type ValuationRound } from "../api";
+import { api, type Entity, type EntityType } from "../api";
+import { useAuth } from "../context/AuthContext";
 import { formatMoney, formatGainLoss } from "../format";
 
 interface EntityRow extends Entity {
@@ -8,9 +9,22 @@ interface EntityRow extends Entity {
   lastValueCents: number;
 }
 
+const TYPE_LABELS: Record<string, string> = {
+  fund: "Fund",
+  spv: "SPV",
+  gp: "GP",
+  mgmt_co: "Mgmt Co",
+};
+
+const WRITER_ROLES = ["fund_admin", "cfo", "approver"];
+
 export default function EntitiesList() {
+  const { user } = useAuth();
   const [entities, setEntities] = useState<EntityRow[]>([]);
   const [loading, setLoading] = useState(true);
+  const [showForm, setShowForm] = useState(false);
+
+  const isWriter = user && WRITER_ROLES.includes(user.role);
 
   useEffect(() => {
     loadData();
@@ -27,7 +41,6 @@ export default function EntitiesList() {
         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) {
@@ -35,11 +48,10 @@ export default function EntitiesList() {
           }
         }
 
-        // 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
+          const latest = approved[0];
           lastValueCents = latest.valuations.reduce((sum, v) => sum + v.value_cents, 0);
         }
 
@@ -61,24 +73,164 @@ export default function EntitiesList() {
 
   return (
     <div className="space-y-8">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-semibold text-gray-900">Entities</h1>
+        {isWriter && (
+          <button
+            onClick={() => setShowForm(true)}
+            className="px-4 py-2 bg-gray-900 text-white text-sm rounded hover:bg-gray-800"
+          >
+            Add Entity
+          </button>
+        )}
+      </div>
+
+      {showForm && (
+        <AddEntityForm
+          onClose={() => setShowForm(false)}
+          onCreated={() => {
+            setShowForm(false);
+            loadData();
+          }}
+        />
+      )}
+
       <EntityTable title="Funds and SPVs" rows={funds} />
       <EntityTable title="GP Entities and Management Companies" rows={gps} />
     </div>
   );
 }
 
+function AddEntityForm({
+  onClose,
+  onCreated,
+}: {
+  onClose: () => void;
+  onCreated: () => void;
+}) {
+  const [name, setName] = useState("");
+  const [type, setType] = useState<EntityType>("fund");
+  const [vintageYear, setVintageYear] = useState("");
+  const [fundSizeDollars, setFundSizeDollars] = useState("");
+  const [error, setError] = useState("");
+  const [saving, setSaving] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError("Name is required.");
+      return;
+    }
+    setError("");
+    setSaving(true);
+    try {
+      const data: any = { name: name.trim(), type };
+      if (vintageYear) {
+        const vy = parseInt(vintageYear);
+        if (isNaN(vy)) {
+          setError("Vintage year must be a number.");
+          setSaving(false);
+          return;
+        }
+        data.vintage_year = vy;
+      }
+      if (fundSizeDollars) {
+        const dollars = parseFloat(fundSizeDollars.replace(/[,$]/g, ""));
+        if (isNaN(dollars)) {
+          setError("Fund size must be a number.");
+          setSaving(false);
+          return;
+        }
+        data.fund_size_cents = Math.round(dollars * 100);
+      }
+      await api.createEntity(data);
+      onCreated();
+    } catch (err: any) {
+      setError(err.message || "Failed to create entity");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="bg-white border border-gray-200 rounded-lg p-6 max-w-lg">
+      <h3 className="text-sm font-medium text-gray-900 mb-4">New Entity</h3>
+      <form onSubmit={handleSubmit} className="space-y-3">
+        <div>
+          <label className="block text-sm text-gray-700 mb-1">Name</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(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"
+            placeholder="Low Time Preference Fund I, LLC"
+            required
+          />
+        </div>
+        <div>
+          <label className="block text-sm text-gray-700 mb-1">Type</label>
+          <select
+            value={type}
+            onChange={(e) => setType(e.target.value as EntityType)}
+            className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+          >
+            <option value="fund">Fund</option>
+            <option value="spv">SPV</option>
+            <option value="gp">GP</option>
+            <option value="mgmt_co">Mgmt Co</option>
+          </select>
+        </div>
+        <div className="flex gap-3">
+          <div className="flex-1">
+            <label className="block text-sm text-gray-700 mb-1">Vintage Year</label>
+            <input
+              type="text"
+              value={vintageYear}
+              onChange={(e) => setVintageYear(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+              placeholder="2021"
+            />
+          </div>
+          <div className="flex-1">
+            <label className="block text-sm text-gray-700 mb-1">Fund Size ($)</label>
+            <input
+              type="text"
+              value={fundSizeDollars}
+              onChange={(e) => setFundSizeDollars(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded text-sm"
+              placeholder="3,300,000"
+            />
+          </div>
+        </div>
+        {error && (
+          <p className="text-sm text-red-600">{error}</p>
+        )}
+        <div className="flex gap-2 pt-1">
+          <button
+            type="submit"
+            disabled={saving}
+            className="px-4 py-2 bg-gray-900 text-white text-sm rounded hover:bg-gray-800 disabled:opacity-50"
+          >
+            {saving ? "Creating..." : "Create"}
+          </button>
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2 border border-gray-300 text-sm rounded hover:bg-gray-50"
+          >
+            Cancel
+          </button>
+        </div>
+      </form>
+    </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>