initial commit

src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

src/App.tsx

@@ -0,0 +1,682 @@
+import React, { useMemo, useRef, useState } from "react";
+
+// --- Helpers ---------------------------------------------------------------
+const currency = (n: number) =>
+  (isFinite(n) ? n : 0).toLocaleString(undefined, {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 0,
+  });
+
+const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));
+
+// Map 1..5 to human-friendly week labels
+const weekLabel = (w: number) =>
+  ({ 1: "1st", 2: "2nd", 3: "3rd", 4: "4th", 5: "5th" } as Record<number, string>)[w] ?? `${w}th`;
+
+const months = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+// Approximate how many weeks between (month, week) pairs (inclusive)
+function approxWeeksBetween(
+  startMonthIdx: number,
+  startWeek: number,
+  endMonthIdx: number,
+  endWeek: number
+) {
+  const weeksPerMonth = 4.34524; // avg weeks per month
+  const start = startMonthIdx + (startWeek - 1) / 5;
+  const end = endMonthIdx + (endWeek - 1) / 5;
+  const monthsBetween = Math.max(0, end - start);
+  return Math.max(0, Math.round(monthsBetween * weeksPerMonth + 1));
+}
+
+// File download helper
+function downloadText(filename: string, text: string) {
+  const blob = new Blob([text], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+// Generic labeled number+slider input pair
+function NumberSlider({
+  label,
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  help,
+  id,
+}: {
+  label: string;
+  value: number;
+  onChange: (v: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  help?: string;
+  id?: string;
+}) {
+  const sliderId = id ?? label.replace(/\s+/g, "-").toLowerCase();
+  return (
+    <div className="space-y-2">
+      <div className="flex items-baseline justify-between">
+        <label htmlFor={sliderId} className="text-sm font-medium text-gray-800">
+          {label}
+        </label>
+        <input
+          type="number"
+          inputMode="decimal"
+          className="w-36 rounded-xl border border-gray-300 px-3 py-1 text-right shadow-sm focus:border-blue-500 focus:outline-none"
+          value={Number.isFinite(value) ? value : 0}
+          min={min}
+          max={max}
+          step={step}
+          onChange={(e) => onChange(clamp(parseFloat(e.target.value || "0"), min, max))}
+        />
+      </div>
+      <input
+        id={sliderId}
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        className="w-full accent-blue-600"
+        value={Number.isFinite(value) ? value : 0}
+        onChange={(e) => onChange(clamp(parseFloat(e.target.value || "0"), min, max))}
+      />
+      {help && <p className="text-xs text-gray-500">{help}</p>}
+    </div>
+  );
+}
+
+// --- Main App --------------------------------------------------------------
+export default function BaseballLeagueCostEstimator() {
+  // Fixed costs: name + amount
+  const [fixedCosts, setFixedCosts] = useState<Array<{ id: string; name: string; amount: number }>>([
+    { id: crypto.randomUUID(), name: "Insurance", amount: 1500 },
+    { id: crypto.randomUUID(), name: "Commissioner", amount: 2000 },
+  ]);
+
+  // Variables
+  const [teams, setTeams] = useState(12);
+  const [gamesPerTeam, setGamesPerTeam] = useState(10); // number of games per team
+  const [umpiresPerGame, setUmpiresPerGame] = useState(2);
+  const [costPerUmpPerGame, setCostPerUmpPerGame] = useState(70);
+  const [avgTeamSize, setAvgTeamSize] = useState(12);
+
+  // Per-game consumables
+  const [ballsPerGame, setBallsPerGame] = useState(4);
+  const [costPerDozenBalls, setCostPerDozenBalls] = useState(60);
+
+  // Season window
+  const [startMonth, setStartMonth] = useState(4); // 0-indexed; May
+  const [startWeek, setStartWeek] = useState(1);
+  const [endMonth, setEndMonth] = useState(7); // August
+  const [endWeek, setEndWeek] = useState(4);
+
+  // Fields table rows: name, pct of games, cost per game (optional)
+  const [fields, setFields] = useState<Array<{ id: string; name: string; pct: number; costPerGame: number }>>([
+    { id: crypto.randomUUID(), name: "Main Park #1", pct: 60, costPerGame: 40 },
+    { id: crypto.randomUUID(), name: "Riverside #2", pct: 40, costPerGame: 25 },
+  ]);
+
+  // Derived calculations
+  const fixedCostTotal = useMemo(
+    () => fixedCosts.reduce((sum, fc) => sum + (Number(fc.amount) || 0), 0),
+    [fixedCosts]
+  );
+
+  // Total league games, given each game involves exactly two teams
+  const totalGames = useMemo(() => (teams || 0) * (gamesPerTeam || 0) / 2, [teams, gamesPerTeam]);
+
+  // Scheduling references (games-per-opponent distribution)
+  const opponentsPerTeam = useMemo(() => Math.max(0, (teams || 0) - 1), [teams]);
+  const gamesPerOpponentExact = useMemo(() => {
+    if (!opponentsPerTeam) return 0;
+    return (gamesPerTeam || 0) / opponentsPerTeam;
+  }, [gamesPerTeam, opponentsPerTeam]);
+  const gamesPerOpponentFloor = useMemo(() => Math.floor(gamesPerOpponentExact), [gamesPerOpponentExact]);
+  const remainderOpponents = useMemo(() => {
+    if (!opponentsPerTeam) return 0;
+    return (gamesPerTeam || 0) % opponentsPerTeam;
+  }, [gamesPerTeam, opponentsPerTeam]);
+
+  const gamesVsEachOther = useMemo(() => {
+    if (!teams || teams < 2) return 0;
+    return (gamesPerTeam || 0) / (teams - 1);
+  }, [teams, gamesPerTeam]);
+
+  const umpireCostTotal = useMemo(
+    () => (totalGames || 0) * (umpiresPerGame || 0) * (costPerUmpPerGame || 0),
+    [totalGames, umpiresPerGame, costPerUmpPerGame]
+  );
+
+  const fieldsPctSum = useMemo(() => fields.reduce((s, f) => s + (Number(f.pct) || 0), 0), [fields]);
+
+  const fieldRentalCostTotal = useMemo(() => {
+    const totalPct = fieldsPctSum || 100;
+    const normalized = fields.map((f) => ({ ...f, w: (Number(f.pct) || 0) / totalPct }));
+    return normalized.reduce(
+      (sum, f) => sum + (totalGames || 0) * f.w * (Number(f.costPerGame) || 0),
+      0
+    );
+  }, [fields, fieldsPctSum, totalGames]);
+
+  // Per-game baseballs cost
+  const perBallCost = useMemo(() => (Number(costPerDozenBalls) || 0) / 12, [costPerDozenBalls]);
+  const baseballsCostPerGame = useMemo(() => (Number(ballsPerGame) || 0) * perBallCost, [ballsPerGame, perBallCost]);
+  const baseballsCostTotal = useMemo(() => (totalGames || 0) * baseballsCostPerGame, [totalGames, baseballsCostPerGame]);
+
+  // Split costs: league (fixed + fields + consumables) vs umpires
+  const leagueCostsTotal = useMemo(
+    () => fixedCostTotal + fieldRentalCostTotal + baseballsCostTotal,
+    [fixedCostTotal, fieldRentalCostTotal, baseballsCostTotal]
+  );
+
+  const grandTotal = leagueCostsTotal + umpireCostTotal;
+
+  const costPerTeam = useMemo(() => (teams > 0 ? grandTotal / teams : 0), [grandTotal, teams]);
+  const costPerTeamLeague = useMemo(() => (teams > 0 ? leagueCostsTotal / teams : 0), [leagueCostsTotal, teams]);
+  const costPerTeamUmpires = useMemo(() => (teams > 0 ? umpireCostTotal / teams : 0), [umpireCostTotal, teams]);
+
+  const costPerPlayer = useMemo(
+    () => (teams > 0 && avgTeamSize > 0 ? grandTotal / (teams * avgTeamSize) : 0),
+    [grandTotal, teams, avgTeamSize]
+  );
+
+  const approxWeeks = useMemo(
+    () => approxWeeksBetween(startMonth, startWeek, endMonth, endWeek),
+    [startMonth, startWeek, endMonth, endWeek]
+  );
+
+  const gamesPerWeekPerTeam = useMemo(() => {
+    if (!approxWeeks) return 0;
+    return (gamesPerTeam || 0) / approxWeeks;
+  }, [gamesPerTeam, approxWeeks]);
+
+  const gamesPerWeekLeague = useMemo(() => {
+    if (!approxWeeks) return 0;
+    return (totalGames || 0) / approxWeeks;
+  }, [totalGames, approxWeeks]);
+
+  // Mutators
+  const addFixed = () => setFixedCosts((x) => [...x, { id: crypto.randomUUID(), name: "New Fixed Cost", amount: 0 }]);
+  const removeFixed = (id: string) => setFixedCosts((x) => x.filter((r) => r.id !== id));
+
+  const addField = () =>
+    setFields((x) => [
+      ...x,
+      { id: crypto.randomUUID(), name: `Field ${x.length + 1}`, pct: 0, costPerGame: 0 },
+    ]);
+  const removeField = (id: string) => setFields((x) => x.filter((r) => r.id !== id));
+
+  const pctWarning = fieldsPctSum !== 100;
+
+  // --- Import/Export -------------------------------------------------------
+  type SaveShape = {
+    version: 1;
+    data: {
+      fixedCosts: Array<{ name: string; amount: number }>;
+      teams: number;
+      gamesPerTeam: number;
+      umpiresPerGame: number;
+      costPerUmpPerGame: number;
+      avgTeamSize: number;
+      ballsPerGame: number;
+      costPerDozenBalls: number;
+      startMonth: number; startWeek: number; endMonth: number; endWeek: number;
+      fields: Array<{ name: string; pct: number; costPerGame: number }>;
+    };
+  };
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const exportJSON = () => {
+    const payload: SaveShape = {
+      version: 1,
+      data: {
+        fixedCosts: fixedCosts.map(({ name, amount }) => ({ name, amount })),
+        teams,
+        gamesPerTeam,
+        umpiresPerGame,
+        costPerUmpPerGame,
+        avgTeamSize,
+        ballsPerGame,
+        costPerDozenBalls,
+        startMonth,
+        startWeek,
+        endMonth,
+        endWeek,
+        fields: fields.map(({ name, pct, costPerGame }) => ({ name, pct, costPerGame })),
+      },
+    };
+    const ts = new Date();
+    const pad = (n: number) => String(n).padStart(2, "0");
+    const fname = `league-cost-estimator-${ts.getFullYear()}${pad(ts.getMonth()+1)}${pad(ts.getDate())}-${pad(ts.getHours())}${pad(ts.getMinutes())}.json`;
+    downloadText(fname, JSON.stringify(payload, null, 2));
+  };
+
+  const applyImported = (s: SaveShape["data"]) => {
+    setFixedCosts((s.fixedCosts || []).map(fc => ({ id: crypto.randomUUID(), ...fc })));
+    setTeams(s.teams ?? teams);
+    setGamesPerTeam(s.gamesPerTeam ?? gamesPerTeam);
+    setUmpiresPerGame(s.umpiresPerGame ?? umpiresPerGame);
+    setCostPerUmpPerGame(s.costPerUmpPerGame ?? costPerUmpPerGame);
+    setAvgTeamSize(s.avgTeamSize ?? avgTeamSize);
+    setBallsPerGame(s.ballsPerGame ?? ballsPerGame);
+    setCostPerDozenBalls(s.costPerDozenBalls ?? costPerDozenBalls);
+    setStartMonth(s.startMonth ?? startMonth);
+    setStartWeek(s.startWeek ?? startWeek);
+    setEndMonth(s.endMonth ?? endMonth);
+    setEndWeek(s.endWeek ?? endWeek);
+    setFields((s.fields || []).map(f => ({ id: crypto.randomUUID(), ...f })));
+  };
+
+  const importFromFile = async (file: File) => {
+    try {
+      const text = await file.text();
+      const parsed = JSON.parse(text);
+      if (!parsed || parsed.version !== 1 || !parsed.data) throw new Error("Invalid or unsupported file format.");
+      applyImported(parsed.data);
+      alert("Import successful ✅");
+    } catch (err: any) {
+      console.error(err);
+      alert("Import failed: " + (err?.message || String(err)));
+    } finally {
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
+  };
+
+  const onClickImport = () => fileInputRef.current?.click();
+
+  return (
+    <div className="mx-auto max-w-6xl p-6">
+      <header className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Baseball League Cost Estimator</h1>
+        <div className="flex items-center gap-2">
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="application/json"
+            className="hidden"
+            onChange={(e) => {
+              const f = e.target.files?.[0];
+              if (f) importFromFile(f);
+            }}
+          />
+          <button onClick={onClickImport} className="rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm shadow hover:bg-gray-50">Import</button>
+          <button onClick={exportJSON} className="rounded-xl bg-blue-600 px-3 py-1.5 text-sm font-medium text-white shadow hover:bg-blue-700">Export</button>
+        </div>
+      </header>
+
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        {/* Left column: Variables */}
+        <section className="lg:col-span-2 space-y-6">
+          {/* League Basics */}
+          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+            <h2 className="mb-4 text-lg font-semibold">League Basics</h2>
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+              <NumberSlider
+                label="Number of teams"
+                value={teams}
+                onChange={setTeams}
+                min={0}
+                max={50}
+              />
+
+              <NumberSlider
+                label="Games per team"
+                value={gamesPerTeam}
+                onChange={setGamesPerTeam}
+                min={0}
+                max={100}
+                step={1}
+                help={`League total games: ${totalGames}`}
+              />
+
+              <NumberSlider
+                label="Umpires per game"
+                value={umpiresPerGame}
+                onChange={setUmpiresPerGame}
+                min={0}
+                max={6}
+                step={1}
+              />
+
+              <NumberSlider
+                label="Cost per umpire per game ($)"
+                value={costPerUmpPerGame}
+                onChange={setCostPerUmpPerGame}
+                min={0}
+                max={300}
+                step={1}
+              />
+
+              <NumberSlider
+                label="Average team size (players)"
+                value={avgTeamSize}
+                onChange={setAvgTeamSize}
+                min={1}
+                max={30}
+                step={1}
+                help="Used for per-player cost"
+              />
+
+              <NumberSlider
+                label="Baseballs used per game"
+                value={ballsPerGame}
+                onChange={setBallsPerGame}
+                min={0}
+                max={24}
+                step={1}
+              />
+
+              <NumberSlider
+                label="Cost of baseballs per dozen ($)"
+                value={costPerDozenBalls}
+                onChange={setCostPerDozenBalls}
+                min={0}
+                max={200}
+                step={1}
+                help={`≈ ${currency(perBallCost)} per ball • ${currency(baseballsCostPerGame)} per game`}
+              />
+            </div>
+
+            {/* Scheduling reference */}
+            <div className="mt-4 rounded-xl border border-gray-100 bg-gray-50 p-3 text-sm">
+              <div className="flex flex-wrap gap-x-6 gap-y-1">
+                <div>Opponents per team: <span className="font-medium">{opponentsPerTeam}</span></div>
+                <div>Games per opponent (avg): <span className="font-medium">{gamesPerOpponentExact.toFixed(2)}</span></div>
+              </div>
+              {opponentsPerTeam > 0 && (
+                <div className="mt-1 text-gray-700">
+                  Distribution (as even as possible): each team plays <span className="font-medium">{remainderOpponents}</span> opponents <span className="font-medium">{gamesPerOpponentFloor + 1}×</span> and <span className="font-medium">{opponentsPerTeam - remainderOpponents}</span> opponents <span className="font-medium">{gamesPerOpponentFloor}×</span>.
+                </div>
+              )}
+              <div className="mt-1 text-gray-500">Total league games computed as teams × gamesPerTeam ÷ 2.</div>
+            </div>
+          </div>
+
+          {/* Season Window */}
+          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+            <h2 className="mb-4 text-lg font-semibold">Season Window</h2>
+            <div className="grid grid-cols-1 items-end gap-4 sm:grid-cols-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-gray-800">Start month</label>
+                <select
+                  className="w-full rounded-xl border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+                  value={startMonth}
+                  onChange={(e) => setStartMonth(parseInt(e.target.value))}
+                >
+                  {months.map((m, i) => (
+                    <option key={m} value={i}>
+                      {m}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-gray-800">Start week</label>
+                <select
+                  className="w-full rounded-xl border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+                  value={startWeek}
+                  onChange={(e) => setStartWeek(parseInt(e.target.value))}
+                >
+                  {[1, 2, 3, 4, 5].map((w) => (
+                    <option key={w} value={w}>
+                      {weekLabel(w)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-gray-800">End month</label>
+                <select
+                  className="w-full rounded-xl border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+                  value={endMonth}
+                  onChange={(e) => setEndMonth(parseInt(e.target.value))}
+                >
+                  {months.map((m, i) => (
+                    <option key={m} value={i}>
+                      {m}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className="space-y-2">
+                <label className="text-sm font-medium text-gray-800">End week</label>
+                <select
+                  className="w-full rounded-xl border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+                  value={endWeek}
+                  onChange={(e) => setEndWeek(parseInt(e.target.value))}
+                >
+                  {[1, 2, 3, 4, 5].map((w) => (
+                    <option key={w} value={w}>
+                      {weekLabel(w)}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+            <div className="mt-3 grid grid-cols-1 gap-2 text-sm text-gray-700 sm:grid-cols-2 lg:grid-cols-4">
+              <div><span className="text-gray-600">Approx. season length:</span> <span className="font-medium">{approxWeeks} weeks</span></div>
+              <div><span className="text-gray-600">Games/week per team:</span> <span className="font-medium">{gamesPerWeekPerTeam.toFixed(2)}</span></div>
+              <div><span className="text-gray-600">Games/week league-wide:</span> <span className="font-medium">{gamesPerWeekLeague.toFixed(2)}</span></div>
+              <div><span className="text-gray-600">Games vs each opponent/team:</span> <span className="font-medium">{gamesVsEachOther.toFixed(2)}</span></div>
+            </div>
+          </div>
+
+          {/* Fields Table */}
+          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-lg font-semibold">Fields & Game Allocation</h2>
+              <button
+                onClick={addField}
+                className="rounded-xl bg-blue-600 px-3 py-1.5 text-sm font-medium text-white shadow hover:bg-blue-700"
+              >
+                + Add field
+              </button>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="w-full table-auto">
+                <thead>
+                  <tr className="text-left text-sm text-gray-500">
+                    <th className="p-2">Field name</th>
+                    <th className="p-2">% of games</th>
+                    <th className="p-2">Cost per game ($)</th>
+                    <th className="p-2"></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {fields.map((f) => (
+                    <tr key={f.id} className="border-t border-gray-100">
+                      <td className="p-2">
+                        <input
+                          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
+                          value={f.name}
+                          onChange={(e) =>
+                            setFields((rows) => rows.map((r) => (r.id === f.id ? { ...r, name: e.target.value } : r)))
+                          }
+                        />
+                      </td>
+                      <td className="p-2">
+                        <input
+                          type="number"
+                          className="w-28 rounded-lg border border-gray-300 px-3 py-2 text-right text-sm focus:border-blue-500 focus:outline-none"
+                          min={0}
+                          max={100}
+                          step={1}
+                          value={f.pct}
+                          onChange={(e) =>
+                            setFields((rows) =>
+                              rows.map((r) => (r.id === f.id ? { ...r, pct: clamp(parseFloat(e.target.value || "0"), 0, 100) } : r))
+                            )
+                          }
+                        />
+                      </td>
+                      <td className="p-2">
+                        <input
+                          type="number"
+                          className="w-40 rounded-lg border border-gray-300 px-3 py-2 text-right text-sm focus:border-blue-500 focus:outline-none"
+                          min={0}
+                          step={1}
+                          value={f.costPerGame}
+                          onChange={(e) =>
+                            setFields((rows) =>
+                              rows.map((r) =>
+                                r.id === f.id
+                                  ? { ...r, costPerGame: clamp(parseFloat(e.target.value || "0"), 0, 10000) }
+                                  : r
+                              )
+                            )
+                          }
+                        />
+                      </td>
+                      <td className="p-2 text-right">
+                        <button
+                          onClick={() => removeField(f.id)}
+                          className="text-sm text-red-600 hover:underline"
+                        >
+                          Remove
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+                <tfoot>
+                  <tr className="border-t border-gray-200 text-sm">
+                    <td className="p-2 font-medium text-gray-700">Totals</td>
+                    <td className="p-2 font-medium {pctWarning ? 'text-red-600' : 'text-gray-700'}">{fieldsPctSum}%</td>
+                    <td className="p-2 font-medium text-gray-700">—</td>
+                    <td></td>
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
+            {pctWarning && (
+              <div className="mt-3 rounded-xl border border-yellow-300 bg-yellow-50 px-3 py-2 text-sm text-yellow-900">
+                Heads up: your field allocation adds to {fieldsPctSum}%. Calculations will normalize
+                percentages to 100%.
+              </div>
+            )}
+          </div>
+        </section>
+
+        {/* Right column: Fixed costs + Summary */}
+        <section className="space-y-6">
+          {/* Fixed costs */}
+          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+            <div className="mb-4 flex items-center justify-between">
+              <h2 className="text-lg font-semibold">Fixed Costs</h2>
+              <button
+                onClick={addFixed}
+                className="rounded-xl bg-blue-600 px-3 py-1.5 text-sm font-medium text-white shadow hover:bg-blue-700"
+              >
+                + Add item
+              </button>
+            </div>
+            <div className="space-y-3">
+              {fixedCosts.map((fc) => (
+                <div key={fc.id} className="grid grid-cols-5 items-center gap-2">
+                  <input
+                    className="col-span-3 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"
+                    value={fc.name}
+                    onChange={(e) =>
+                      setFixedCosts((rows) => rows.map((r) => (r.id === fc.id ? { ...r, name: e.target.value } : r)))
+                    }
+                  />
+                  <input
+                    type="number"
+                    className="col-span-2 rounded-lg border border-gray-300 px-3 py-2 text-right text-sm focus:border-blue-500 focus:outline-none"
+                    min={0}
+                    step={1}
+                    value={fc.amount}
+                    onChange={(e) =>
+                      setFixedCosts((rows) =>
+                        rows.map((r) =>
+                          r.id === fc.id
+                            ? { ...r, amount: clamp(parseFloat(e.target.value || "0"), 0, 1_000_000) }
+                            : r
+                        )
+                      )
+                    }
+                  />
+                  <div className="col-span-5 flex justify-end">
+                    <button
+                      onClick={() => removeFixed(fc.id)}
+                      className="text-sm text-red-600 hover:underline"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="mt-4 flex items-center justify-between border-t pt-3 text-sm">
+              <div className="font-medium text-gray-700">Fixed cost total</div>
+              <div className="font-semibold">{currency(fixedCostTotal)}</div>
+            </div>
+          </div>
+
+          {/* Summary */}
+          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+            <h2 className="mb-4 text-lg font-semibold">Summary</h2>
+            <div className="space-y-2 text-sm">
+              <div className="flex justify-between"><span>Umpire costs</span><span className="font-medium">{currency(umpireCostTotal)}</span></div>
+              <div className="flex justify-between"><span>Field rental costs</span><span className="font-medium">{currency(fieldRentalCostTotal)}</span></div>
+              <div className="flex justify-between"><span>Baseballs (per-game consumables)</span><span className="font-medium">{currency(baseballsCostTotal)}</span></div>
+              <div className="flex justify-between"><span>Fixed costs</span><span className="font-medium">{currency(fixedCostTotal)}</span></div>
+              <div className="flex justify-between border-t pt-2">
+                <span>League costs subtotal</span>
+                <span className="font-medium">{currency(leagueCostsTotal)}</span>
+              </div>
+              <div className="flex justify-between border-t pt-2 text-base">
+                <span className="font-semibold">Grand total</span>
+                <span className="font-bold">{currency(grandTotal)}</span>
+              </div>
+            </div>
+            <div className="mt-4 space-y-2 rounded-xl bg-gray-50 p-3 text-sm">
+              <div className="flex justify-between"><span>Per team to league</span><span className="font-semibold">{currency(costPerTeamLeague)}</span></div>
+              <div className="flex justify-between"><span>Per team to umpires</span><span className="font-semibold">{currency(costPerTeamUmpires)}</span></div>
+              <div className="flex justify-between"><span>Per team (total)</span><span className="font-semibold">{currency(costPerTeam)}</span></div>
+              <div className="flex justify-between"><span>Per player (avg team size {avgTeamSize})</span><span className="font-semibold">{currency(costPerPlayer)}</span></div>
+            </div>
+
+            <div className="mt-4 text-xs text-gray-500">
+              Notes:
+              <ul className="list-disc pl-5">
+                <li>League total games = teams × games per team ÷ 2.</li>
+                <li>Field cost = total games × % allocation × per-field cost per game.</li>
+                <li>Percentages are normalized if they don't add up to 100%.</li>
+                <li>Season window drives weekly rates only; it doesn't alter totals.</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <footer className="mt-8 text-center text-xs text-gray-500">
+        Built for quick budgeting. Adjust anything and the math updates instantly.
+      </footer>
+    </div>
+  );
+}

src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

src/index.css

@@ -0,0 +1,69 @@
+@import "tailwindcss";
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />