From 95f9e550d158dc0442c1e2a6fe8d89fe88aef804 Mon Sep 17 00:00:00 2001
From: Brandon Li <brandonli@Brandons-MacBook-Pro.local>
Date: Sun, 26 Apr 2026 03:10:20 -0500
Subject: [PATCH] Stage pill colors scale from light gray to dark blue

Stage 1 = bg-slate-100 (matches Flat status pill), each subsequent stage
gets a deeper blue. Shared helper in lib/stage-colors.ts used by both
the main dashboard and the account detail page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/accounts/[id]/page.tsx |  3 ++-
 app/page.tsx               |  4 +++-
 lib/stage-colors.ts        | 11 +++++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 lib/stage-colors.ts

diff --git a/app/accounts/[id]/page.tsx b/app/accounts/[id]/page.tsx
index 7f0661b..da3c5a3 100644
--- a/app/accounts/[id]/page.tsx
+++ b/app/accounts/[id]/page.tsx
@@ -15,6 +15,7 @@ import {
     Dot,
 } from 'recharts';
 import type { FirmConfig, FirmState, AccountState, AccountConfig } from '@/types';
+import { stagePillClasses } from '@/lib/stage-colors';
 
 function getAccountConfig(name: string, firm: FirmConfig): AccountConfig | undefined {
     return [...firm.accounts]
@@ -381,7 +382,7 @@ export default function AccountPage() {
                             label={
                                 <span className="inline-flex items-center gap-1.5">
                                     Profit Target
-                                    <span className="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-indigo-100 text-indigo-700">
+                                    <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold ${stagePillClasses(account.stage)}`}>
                                         Stage {account.stage}
                                     </span>
                                 </span>
diff --git a/app/page.tsx b/app/page.tsx
index 2a8aef9..6b9fad6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import type { FirmConfig, FirmState, AccountState, AccountConfig } from '@/types';
+import { stagePillClasses } from '@/lib/stage-colors';
 
 type SortKey = 'name' | 'balance' | 'dayPnL' | 'daysTraded' | 'target' | 'status';
 type SortDir = 'asc' | 'desc';
@@ -24,6 +25,7 @@ function getAccountConfig(name: string, firm: FirmConfig): AccountConfig | undef
         .find((a) => name.startsWith(a.prefix));
 }
 
+
 function fmt(value: number) {
     return value.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
 }
@@ -137,7 +139,7 @@ function AccountRow({ account, firm, hideDead, privacy }: { account: AccountStat
                 <div className="flex flex-col">
                     <div className="flex items-center gap-1.5">
                         <span>${(account.effectiveProfitTarget ?? cfg?.profitTarget ?? 0).toLocaleString(undefined, { maximumFractionDigits: 2 })}</span>
-                        <span className="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-indigo-100 text-indigo-700">
+                        <span className={`inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold ${stagePillClasses(account.stage)}`}>
                             Stage {account.stage}
                         </span>
                     </div>
diff --git a/lib/stage-colors.ts b/lib/stage-colors.ts
new file mode 100644
index 0000000..a905863
--- /dev/null
+++ b/lib/stage-colors.ts
@@ -0,0 +1,11 @@
+/**
+ * Stage 1 starts very light (matching Flat status), gets progressively darker blue with each stage.
+ */
+export function stagePillClasses(stage: number): string {
+    if (stage <= 1) return 'bg-slate-100 text-slate-500';
+    if (stage === 2) return 'bg-blue-100 text-blue-700';
+    if (stage === 3) return 'bg-blue-200 text-blue-800';
+    if (stage === 4) return 'bg-blue-400 text-white';
+    if (stage === 5) return 'bg-blue-600 text-white';
+    return 'bg-blue-800 text-white'; // 6+
+}