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
This commit is contained in:
Johnny 5
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user