# Opportunity Cost Summary Boxes - Visual Reference
## Summary Cards Layout (Sold Holdings View)
```
┌───────────────────────────────────────────────────────────────────────────────────────────────┐
│ SUMMARY CARDS │
└───────────────────────────────────────────────────────────────────────────────────────────────┘
┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐
│ Sold Positions │ │ Realized P&L │ │ ⚠️ Missed Gains │ │ ✅ Avoided Losses │
│ 12 │ │ ₹1,25,000 │ │ -₹45,000 │ │ +₹18,000 │
│ [Gray Border] │ │ [Orange Border] │ │ [Orange Border] │ │ [Green Border] │
│ │ │ │ │ 3 stocks sold early │ │ 2 stocks good timing│
└─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘
Existing Existing NEW! NEW!
```
---
## Box 1: Missed Gains (Sold Too Early)
### Full Component
```
┌────────────────────────────────────────┐
│ ⚠️ Missed Gains │ ← Title with warning emoji
│ │
│ -₹45,000 │ ← Large orange amount (negative)
│ │
│ 3 stocks sold too early │ ← Subtitle with count
└────────────────────────────────────────┘
▲ Orange left border (border-l-4 border-orange-500)
```
### CSS Classes
```typescript
className="bg-white rounded-lg shadow p-4 border-l-4 border-orange-500"
```
### Content Structure
```typescript
<div className="text-sm text-gray-600 flex items-center gap-1">
<span>⚠️ Missed Gains</span>
</div>
<div className="text-lg font-bold text-orange-600">
-{formatCurrency(data.summary.potentialLosses)}
</div>
<div className="text-xs text-gray-500 mt-1">
{data.summary.soldEarlyCount} stock{data.summary.soldEarlyCount !== 1 ? 's' : ''} sold too early
</div>
```
### Color Scheme
- **Border**: Orange (`border-orange-500`)
- **Title**: Gray (`text-gray-600`)
- **Amount**: Orange (`text-orange-600`)
- **Subtitle**: Light gray (`text-gray-500`)
### When It Appears
```typescript
{statusFilter !== 'active' && data.summary.potentialLosses > 0 && (
// Box renders here
)}
```
**Conditions**:
1. ✅ Not viewing "Active Holdings" only
2. ✅ potentialLosses > 0 (there are missed gains)
---
## Box 2: Avoided Losses (Good Timing)
### Full Component
```
┌────────────────────────────────────────┐
│ ✅ Avoided Losses │ ← Title with checkmark emoji
│ │
│ +₹18,000 │ ← Large green amount (positive)
│ │
│ 2 stocks sold at good timing │ ← Subtitle with count
└────────────────────────────────────────┘
▲ Green left border (border-l-4 border-green-500)
```
### CSS Classes
```typescript
className="bg-white rounded-lg shadow p-4 border-l-4 border-green-500"
```
### Content Structure
```typescript
<div className="text-sm text-gray-600 flex items-center gap-1">
<span>✅ Avoided Losses</span>
</div>
<div className="text-lg font-bold text-green-600">
+{formatCurrency(data.summary.potentialProfits)}
</div>
<div className="text-xs text-gray-500 mt-1">
{data.summary.soldWellCount} stock{data.summary.soldWellCount !== 1 ? 's' : ''} sold at good timing
</div>
```
### Color Scheme
- **Border**: Green (`border-green-500`)
- **Title**: Gray (`text-gray-600`)
- **Amount**: Green (`text-green-600`)
- **Subtitle**: Light gray (`text-gray-500`)
### When It Appears
```typescript
{statusFilter !== 'active' && data.summary.potentialProfits > 0 && (
// Box renders here
)}
```
**Conditions**:
1. ✅ Not viewing "Active Holdings" only
2. ✅ potentialProfits > 0 (there are avoided losses)
---
## Display States
### State 1: Viewing Active Holdings Only
```
┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐
│ Active Holdings │ │ Total Investment │ │ Current Value │ │ Unrealized P&L │
│ 25 │ │ ₹5,00,000 │ │ ₹6,50,000 │ │ ₹1,50,000 │
└─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘
❌ Opportunity cost boxes NOT shown (not relevant for active holdings)
```
---
### State 2: Viewing Sold Holdings Only
```
┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐
│ Sold Positions │ │ Realized P&L │ │ ⚠️ Missed Gains │ │ ✅ Avoided Losses │
│ 12 │ │ ₹1,25,000 │ │ -₹45,000 │ │ +₹18,000 │
└─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘
✅ Opportunity cost boxes SHOWN
```
---
### State 3: Viewing All Positions
```
┌─────────────┐ ┌─────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Active: 25 │ │ Sold: 12 │ │ Investment │ │ Current Value│ │ Realized P&L │ │ Unrealized │
│ │ │ │ │ ₹5,00,000 │ │ ₹6,50,000 │ │ ₹1,25,000 │ │ ₹1,50,000 │
└─────────────┘ └─────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
┌─────────────────────┐ ┌─────────────────────┐
│ ⚠️ Missed Gains │ │ ✅ Avoided Losses │
│ -₹45,000 │ │ +₹18,000 │
│ 3 stocks sold early │ │ 2 stocks good timing│
└─────────────────────┘ └─────────────────────┘
✅ Opportunity cost boxes SHOWN (if values > 0)
```
---
### State 4: No Missed Gains (All Good Timing)
```
┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐
│ Sold Positions │ │ Realized P&L │ │ ✅ Avoided Losses │
│ 5 │ │ ₹80,000 │ │ +₹25,000 │
└─────────────────────┘ └─────────────────────┘ └─────────────────────┘
❌ Orange box NOT shown (no missed gains)
✅ Green box shown (avoided losses present)
```
---
### State 5: No Avoided Losses (All Sold Too Early)
```
┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐
│ Sold Positions │ │ Realized P&L │ │ ⚠️ Missed Gains │
│ 8 │ │ ₹1,50,000 │ │ -₹60,000 │
└─────────────────────┘ └─────────────────────┘ └─────────────────────┘
✅ Orange box shown (missed gains present)
❌ Green box NOT shown (no avoided losses)
```
---
### State 6: No Current Prices Available
```
┌─────────────────────┐ ┌─────────────────────┐
│ Sold Positions │ │ Realized P&L │
│ 10 │ │ ₹95,000 │
└─────────────────────┘ └─────────────────────┘
❌ Both boxes NOT shown (can't calculate opportunity cost without current prices)
```
---
## Responsive Behavior
### Desktop (>1024px)
```
All boxes in single row with adequate spacing
[Box1] [Box2] [Box3] [Box4] [Box5] [Box6]
```
### Tablet (768-1024px)
```
Multiple rows, 2-3 boxes per row
[Box1] [Box2] [Box3]
[Box4] [Box5] [Box6]
```
### Mobile (<768px)
```
Single column, vertical stacking
[Box1]
[Box2]
[Box3]
[Box4]
[Box5]
[Box6]
```
---
## Real-World Example
### Portfolio Overview
**User has**:
- 5 stocks sold
- 3 sold too early (TCS, RELIANCE, INFY)
- 2 sold at good timing (HDFC, ICICI)
### Individual Opportunity Costs
```
TCS: Sold @ ₹3,000, Now ₹4,000 → -₹20,000 (missed)
RELIANCE: Sold @ ₹2,500, Now ₹3,000 → -₹25,000 (missed)
INFY: Sold @ ₹1,500, Now ₹1,800 → -₹5,000 (missed)
HDFC: Sold @ ₹1,600, Now ₹1,400 → +₹12,000 (avoided)
ICICI: Sold @ ₹900, Now ₹800 → +₹6,000 (avoided)
```
### Summary Calculation
```
Missed Gains:
₹20,000 + ₹25,000 + ₹5,000 = ₹50,000
Count: 3 stocks
Avoided Losses:
₹12,000 + ₹6,000 = ₹18,000
Count: 2 stocks
```
### Display
```
┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐ ┌─────────────────────┐
│ Sold Positions │ │ Realized P&L │ │ ⚠️ Missed Gains │ │ ✅ Avoided Losses │
│ 5 │ │ ₹75,000 │ │ -₹50,000 │ │ +₹18,000 │
│ │ │ │ │ 3 stocks sold early │ │ 2 stocks good timing│
└─────────────────────┘ └─────────────────────┘ └─────────────────────┘ └─────────────────────┘
```
### Interpretation
- Made ₹75K realized profit ✅
- But missed ₹50K by selling 3 stocks early ⚠️
- Avoided ₹18K loss by selling 2 stocks at good timing ✅
- **Net opportunity cost**: -₹32K (could have been ₹32K better)
- **Actual vs Potential**: ₹75K realized vs ₹107K potential (75 + 50 - 18)
---
## Color Psychology
### Orange (Warning/Caution)
- **Use**: Missed opportunities, things that require attention
- **Emotion**: Cautious, learning opportunity
- **Not**: Failure or error (that would be red)
- **Message**: "You could have done better, but it's okay"
### Green (Success/Positive)
- **Use**: Good decisions, positive outcomes
- **Emotion**: Success, confidence
- **Message**: "You timed this well, celebrate it!"
---
## Icon Meanings
### ⚠️ Warning Triangle
- Standard symbol for "attention needed"
- Not as severe as ❌ (error)
- Suggests: "Take note, learn from this"
### ✅ Checkmark
- Universal symbol for "correct" or "successful"
- Positive reinforcement
- Suggests: "Well done, good timing!"
---
## Typography Hierarchy
### Size Scale
```
Title: text-sm (14px) ← Small, subdued
Amount: text-lg (18px) ← Large, prominent
Subtitle: text-xs (12px) ← Extra small, context
```
### Weight
```
Title: font-normal
Amount: font-bold ← Emphasized
Subtitle: font-normal
```
### Alignment
```
All elements: Left-aligned
Numbers: Consistent spacing
```
---
## Accessibility
### Screen Readers
```html
<div role="region" aria-label="Opportunity cost summary">
<div aria-label="Missed gains: 45000 rupees, 3 stocks sold too early">
⚠️ Missed Gains
-₹45,000
3 stocks sold too early
</div>
</div>
```
### Color Blind Friendly
- Icons (⚠️, ✅) complement colors
- Text labels ("Missed" vs "Avoided") are clear
- Border + text + icon = triple encoding
### Keyboard Navigation
- Boxes are static (no interaction required)
- Tab order skips over them naturally
---
## Print Styling (Future)
```css
@media print {
.opportunity-cost-box {
break-inside: avoid; /* Don't split across pages */
border: 1px solid #ddd; /* Visible in B&W */
padding: 10pt;
}
.opportunity-cost-amount {
font-weight: bold;
font-size: 14pt;
}
}
```
---
**Created**: January 1, 2026
**Status**: Ready for implementation
**Component Type**: Summary Cards (Static Display)
