feat(ui): add referral_legacy display in usage component

- Add referral_legacy to grantTypeInfo with emerald color and Legacy label
- Update description: referral is now "One-time bonus from referrals"
- Move referral from expiringTypes to nonExpiringTypes
- Add referral_legacy to expiringTypes (renews monthly)

Author: brandonkachen

web/src/app/profile/components/usage-display.tsx

@@ -59,7 +59,15 @@ const grantTypeInfo: Record<
     gradient: 'from-green-500/70 to-green-600/70',
     icon: <Users className="h-4 w-4" />,
     label: 'Referral Bonus',
-    description: 'Earned by referring others',
+    description: 'One-time bonus from referrals',
+  },
+  referral_legacy: {
+    bg: 'bg-emerald-500',
+    text: 'text-emerald-600 dark:text-emerald-400',
+    gradient: 'from-emerald-500/70 to-emerald-600/70',
+    icon: <Users className="h-4 w-4" />,
+    label: 'Referral Bonus (Legacy)',
+    description: 'Monthly recurring referral bonus',
   },
   purchase: {
     bg: 'bg-yellow-500',
@@ -234,6 +242,7 @@ export const UsageDisplay = ({
   const usedCredits: Record<FilteredGrantType, number> = {
     free: 0,
     referral: 0,
+    referral_legacy: 0,
     purchase: 0,
     admin: 0,
     ad: 0,
@@ -252,8 +261,9 @@ export const UsageDisplay = ({
   })
 
   // Group credits by expiration type (excluding organization)
-  const expiringTypes: FilteredGrantType[] = ['free', 'referral']
-  const nonExpiringTypes: FilteredGrantType[] = ['admin', 'purchase', 'ad']
+  // referral_legacy renews monthly, referral (one-time) never expires
+  const expiringTypes: FilteredGrantType[] = ['free', 'referral_legacy']
+  const nonExpiringTypes: FilteredGrantType[] = ['referral', 'admin', 'purchase', 'ad']
 
   const expiringTotal = expiringTypes.reduce(
     (acc, type) => acc + (principals?.[type] || breakdown[type] || 0),