# Tradebook Column Layout - Before & After
## Visual Comparison
### BEFORE (Old Layout)
```
┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ [▼] SYMBOL [ACTIVE] Account Name │ Net Qty │ Buy/Sell │ Price │ R P&L │ U P&L │ XIRR │
│ │ 100 │ 10K / 5K │ ₹125 │ +₹1.5K │ +₹500 │ 15.5% │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
← All text same size, hard to scan quickly →
```
**Issues**:
- ❌ All metrics equal visual weight
- ❌ Important info (current value) not prominent
- ❌ Buy/Sell combined (hard to parse)
- ❌ P&L split (R and U separate)
- ❌ No emphasis on most valuable data
---
### AFTER (New Layout)
```
┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ │
│ [▼] SYMBOL [ACTIVE] Account │ Live Price │ Net Qty │ CURRENT VALUE │ TOTAL P&L │ XIRR │
│ │ │ │ │ │ │
│ │ ₹125 │ 100 │ ₹12,500 │ +₹2,000 │ 15.5% │
│ │ 🔴 Live │ │ Inv: ₹10,500 │ R:₹1.5K│U:₹500 │ │
│ │
└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
↑ Medium ↑ Medium ↑↑ LARGEST ↑↑ ↑↑ LARGEST ↑↑ ↑ Medium
(text-lg) (text-lg) (text-xl) (text-xl) (text-lg)
```
**Improvements**:
- ✅ Visual hierarchy (bigger = more important)
- ✅ Current Value most prominent (purple, xl)
- ✅ Total P&L combined + breakdown shown
- ✅ Live price indicator
- ✅ Context-aware labels
---
## Detailed Column Breakdown
### Column 1: Symbol & Status
**Size**: `text-lg` (18px)
**Colors**:
- Active: `text-gray-900` + `bg-green-100` badge
- Sold: `text-gray-600` + `bg-gray-200` badge
**Example**:
```
[▼] RELIANCE [ACTIVE]
```
---
### Column 2: Account Name
**Size**: `text-sm` (14px)
**Color**: `text-gray-700`
**Example**:
```
Primary Account
```
---
### Column 3: Live Price ⭐
**Size**: `text-lg` (18px) - ENLARGED
**Color**: `text-gray-900`
**Indicator**: 🔴 Live (green text)
**Example**:
```
₹2,450.75
🔴 Live
```
**Reasoning**: Price is critical for decision-making, made larger and more visible.
---
### Column 4: Net Quantity / Sold Quantity
**Size**: `text-lg` (18px) - ENLARGED
**Colors**:
- Active: `text-blue-600`
- Sold: `text-gray-600`
**Label Changes**:
- Active: "Net Qty"
- Sold: "Sold Qty"
**Example (Active)**:
```
Net Qty
150
```
**Example (Sold)**:
```
Sold Qty
200
```
**Reasoning**: Context-aware labeling improves clarity.
---
### Column 5: Current Value / Value If Held ⭐⭐ (Most Important)
**Size**: `text-xl` (20px) - LARGEST
**Color**: `text-purple-600` (primary brand color)
**Secondary Info**: `text-xs` investment or sold amount
**Example (Active)**:
```
Current Value
₹37,500
Invested: ₹30,000
```
**Example (Sold)**:
```
Value If Held
₹45,000
Sold At: ₹35,000
```
**Reasoning**: This is THE most important metric - what your position is worth (or would be worth). Made largest and most prominent.
---
### Column 6: Total P&L ⭐⭐
**Size**: `text-xl` (20px) - LARGEST
**Colors**:
- Profit: `text-green-600` with ⬆ icon
- Loss: `text-red-600` with ⬇ icon
**Breakdown**: `text-xs` showing R (Realized) and U (Unrealized)
**Example (Profit)**:
```
Total P&L
↑ ₹7,500
R: ₹3,000 | U: ₹4,500
```
**Example (Loss)**:
```
Total P&L
↓ ₹2,300
R: -₹1,500 | U: -₹800
```
**Reasoning**: Users want to see total profit/loss at a glance, with ability to drill into components.
---
### Column 7: XIRR
**Size**: `text-lg` (18px) - ENLARGED
**Colors**:
- Positive: `text-green-600`
- Negative: `text-red-600`
- N/A: `text-gray-900`
**Example**:
```
XIRR
18.5%
```
**Reasoning**: XIRR is the time-adjusted return metric, important for performance comparison.
---
### Column 8: Opportunity Cost (Sold Only)
**Size**: `text-lg` (18px) - ENLARGED
**Colors**:
- Positive (good timing): `text-green-600`
- Negative (sold early): `text-orange-600`
**Example (Sold Too Early)**:
```
Opportunity
-₹10,000
(-22.2%)
```
Translation: "You missed out on ₹10K by selling early"
**Example (Good Timing)**:
```
Opportunity
+₹5,000
(+14.3%)
```
Translation: "Good timing! Stock fell after you sold"
**Reasoning**: Helps users learn from past decisions.
---
## Size Hierarchy Visual
```
TEXT SIZE HIERARCHY (Largest to Smallest)
█████████ text-xl (20px) ← Current Value, Total P&L
███████ text-lg (18px) ← Live Price, Qty, XIRR, Opportunity
████ text-sm (14px) ← Account name
██ text-xs (12px) ← Labels, breakdowns, metadata
```
---
## Color Usage Map
```
COLOR CODING SYSTEM
PURPLE (purple-600) → Current Value / Value If Held [Most Important Metric]
GREEN (green-600) → Profits, positive returns [Good News]
RED (red-600) → Losses, negative returns [Bad News]
ORANGE (orange-600) → Missed opportunities [Caution/Learning]
BLUE (blue-600) → Active holdings quantity [Neutral Info]
GRAY (gray-600) → Sold positions, secondary info [Historical]
```
---
## Layout Flow (Left to Right)
```
1. IDENTITY 2. BASIC INFO 3. CORE METRICS (LARGEST) 4. PERFORMANCE
↓ ↓ ↓ ↓
[Symbol/Status] → [Account] → [Price│Qty│VALUE│P&L] → [XIRR│Opportunity]
↑↑↑
Focus Area
(Users scan here first)
```
---
## Responsive Behavior
### Desktop (>1024px)
```
All columns visible in single row
Adequate spacing (gap-6)
No truncation
```
### Tablet (768-1024px)
```
Slight compression
Min-widths respected
May show horizontal scroll
```
### Mobile (<768px)
```
Horizontal scroll active
All info accessible
Future: Card layout planned
```
---
## Comparison: Active vs Sold
### ACTIVE POSITION
```
┌────────────────────────────────────────────────────────────────────────────┐
│ [▼] RELIANCE [ACTIVE] Primary │ ₹2,450 │ 100 │ ₹2,45,000 │ │
│ │ 🔴 Live │ │ Inv: ₹2,00,000│ │
│ │ │ │ │ │
│ ↑ Total P&L ↑ XIRR │
│ +₹45,000 22.5% │
│ R:₹0│U:₹45K │
└────────────────────────────────────────────────────────────────────────────┘
```
**Focus**: Current value and unrealized potential
---
### SOLD POSITION
```
┌────────────────────────────────────────────────────────────────────────────┐
│ [▼] TCS [SOLD] Secondary │ ₹3,800 │ 50 │ ₹1,90,000 │ 18.5% │
│ │ 🔴 Live │ │ Sold: ₹1,50,000│ │
│ │ │ │ │ │
│ ↑ Total P&L ↑ Opportunity │
│ +₹50,000 -₹40,000 │
│ R:₹50K│U:₹0 (-21.1%) │
└────────────────────────────────────────────────────────────────────────────┘
```
**Focus**: What you got vs what you would have, learning opportunity
---
## User Eye Path Analysis
```
START
↓
1. Symbol (recognize stock)
↓
2. Status badge (active/sold)
↓
3. LARGE PURPLE number (current value) ← Main focus
↓
4. LARGE P&L number (profit/loss) ← Secondary focus
↓
5. XIRR (performance %) ← Tertiary focus
↓
6. Other details as needed
↓
DECISION MADE
```
**Design Goal**: Answer "How's this stock doing?" in < 2 seconds
---
## Accessibility Considerations
### Color Blind Friendly
- Icons accompany colors (⬆⬇)
- Text labels present
- Not relying solely on color
### Screen Reader
- Semantic HTML structure
- ARIA labels on interactive elements
- Logical tab order
### Keyboard Navigation
- Arrow keys for collapse/expand
- Tab navigation through controls
- Enter to toggle sections
---
## Print Layout (Bonus)
When printing tradebook:
```css
@media print {
- Font sizes adjusted for paper
- Colors optimized for B&W
- Page breaks at group boundaries
- Summary stats on first page
}
```
(Not yet implemented, but layout supports it)
---
## Mobile Strategy (Future)
### Planned Card Layout for <768px
```
┌─────────────────────────────┐
│ RELIANCE [ACTIVE] │
│ Primary Account │
├─────────────────────────────┤
│ │
│ Current Value │
│ ₹2,45,000 │
│ │
│ Total P&L XIRR │
│ +₹45,000 22.5% │
│ │
│ 🔴 Live: ₹2,450 │ Qty: 100│
├─────────────────────────────┤
│ [Expand for trades ▼] │
└─────────────────────────────┘
```
**Benefits**:
- No horizontal scroll
- Touch-friendly
- Maintains hierarchy
- Progressive disclosure
---
**Documentation Version**: 1.0
**Last Updated**: January 1, 2026
**Status**: Implemented and ready for testing
