# Tradebook Improvements - Testing Guide
## Quick Testing Checklist
### 1. Visual Layout Test ✅
**Navigate to**: `/tradebook`
**Check**:
- [ ] Filter section shows 2 rows (3 columns each)
- [ ] "Sort By" dropdown visible and populated
- [ ] "Sort Order" dropdown shows "Highest to Lowest" by default
- [ ] Trade group headers show larger fonts for important metrics
- [ ] Color coding is clear (Purple for values, Green/Red for P&L)
---
### 2. Default Sorting Test ✅
**Steps**:
1. Open tradebook page fresh (clear cache if needed)
2. Observe the order of stock listings
**Expected**:
- Stocks should be sorted by "Current Value" (highest first)
- For active holdings: sorted by `netQuantity × currentPrice`
- For sold holdings: sorted by "Current Value If Held"
- First stock shown should have the highest current value
**Visual Indicators**:
- Largest value displayed prominently in purple
- Descending order as you scroll down
---
### 3. Sort By Current Value ✅
**Test Active Holdings**:
1. Set Status filter to "Active Holdings"
2. Set Sort By to "Current Value"
3. Set Sort Order to "Highest to Lowest"
**Expected**:
- Stock with largest current value appears first
- Numbers in purple should decrease as you go down
- All stocks shown should have netQuantity > 0
**Test Sold Holdings**:
1. Set Status filter to "Sold Holdings"
2. Set Sort By to "Current Value"
3. Set Sort Order to "Highest to Lowest"
**Expected**:
- "Value If Held" column visible for all stocks
- Sorted by what the position would be worth now
- Opportunity cost visible (negative = missed gains)
---
### 4. Sort By Total P&L ✅
**Steps**:
1. Set Sort By to "Total P&L"
2. Set Sort Order to "Highest to Lowest"
**Expected**:
- Stock with highest profit appears first
- Green upward arrows for profits
- Red downward arrows for losses
- Bottom shows biggest losers
**Verify**:
- Total P&L = Realized P&L + Unrealized P&L
- Breakdown visible: "R: ₹X | U: ₹Y"
---
### 5. Sort By XIRR ✅
**Steps**:
1. Set Sort By to "XIRR %"
2. Set Sort Order to "Highest to Lowest"
**Expected**:
- Best performing stock (highest %) appears first
- XIRR values in green for positive returns
- XIRR values in red for negative returns
- "N/A" for stocks with insufficient data
**Note**:
- XIRR accounts for time value of money
- A stock bought recently may have lower XIRR than older holdings even with similar absolute returns
---
### 6. Sort By Opportunity Cost ✅
**Steps**:
1. Set Status filter to "Sold Holdings"
2. Set Sort By to "Opportunity Cost"
3. Set Sort Order to "Highest to Lowest"
**Expected**:
- Shows which sales were mistimed
- Negative opportunity cost (orange) = sold too early, missed gains
- Positive opportunity cost (green) = sold well, avoided losses
- Most regrettable sale appears first (most negative)
**Example Reading**:
```
Sold At: ₹10,000
Value If Held: ₹15,000
Opportunity: -₹5,000 (-33.33%) [Sold too early, missed ₹5K gain]
```
---
### 7. Sort By Symbol ✅
**Steps**:
1. Set Sort By to "Symbol (A-Z)"
2. Set Sort Order to "Lowest to Highest"
**Expected**:
- Alphabetical order: A, B, C, D...
- Useful for finding specific stock quickly
- Original behavior (before improvements)
---
### 8. Sort Order Toggle ✅
**Steps**:
1. Set Sort By to "Total P&L"
2. Set Sort Order to "Highest to Lowest"
3. Note first stock (should be biggest winner)
4. Change Sort Order to "Lowest to Highest"
5. Note first stock (should be biggest loser)
**Expected**:
- Complete reversal of list order
- Same stocks, opposite sequence
- Instant response (no loading delay)
---
### 9. Combined Filters + Sort ✅
**Test Scenario 1**: Best Active Performers
```
Status: Active Holdings
Sort By: XIRR %
Sort Order: Highest to Lowest
```
**Result**: Shows your best performing current holdings by annualized return
**Test Scenario 2**: Biggest Missed Opportunities
```
Status: Sold Holdings
Sort By: Opportunity Cost
Sort Order: Lowest to Highest
```
**Result**: Shows sales where you missed the most gain (sold too early)
**Test Scenario 3**: Highest Value Holdings This Year
```
Status: Active Holdings
From Date: 2024-01-01
Sort By: Current Value
Sort Order: Highest to Lowest
```
**Result**: Shows biggest holdings from trades made this year
---
### 10. Visual Hierarchy Test ✅
**Check Font Sizes** (from largest to smallest):
1. ✅ Current Value / Value If Held (text-xl)
2. ✅ Total P&L (text-xl)
3. ✅ Live Price (text-lg)
4. ✅ Net Quantity (text-lg)
5. ✅ XIRR (text-lg)
6. ✅ Labels and breakdowns (text-xs)
**Check Colors**:
- ✅ Purple: Current values (most important)
- ✅ Green: Positive P&L, gains
- ✅ Red: Negative P&L, losses
- ✅ Orange: Opportunity cost (missed gains)
- ✅ Blue: Active quantities
- ✅ Gray: Sold positions, neutral
**Check Spacing**:
- ✅ Adequate gap between metrics (gap-6)
- ✅ No overlapping text
- ✅ Right-aligned numbers
- ✅ Left-aligned labels
---
### 11. Edge Cases ✅
**Zero Quantity Holdings**:
- Should appear as "SOLD" status
- Net Qty = 0.00
- Only realized P&L shown
- Opportunity cost visible if current price available
**Missing Current Price**:
- Shows "N/A" for Live Price
- Current Value not calculable
- XIRR might be unavailable
- Still shows historical P&L
**Null XIRR**:
- Shows "N/A" in XIRR column
- Happens for very short holding periods
- Doesn't break sorting (treated as -Infinity)
**Single Trade Holdings**:
- XIRR might be N/A (needs multiple cash flows)
- P&L still calculated correctly
- All other metrics work normally
---
### 12. Performance Test ✅
**Small Dataset** (10-50 stocks):
- [ ] Page loads < 2 seconds
- [ ] Sort changes are instant
- [ ] No visible lag
**Medium Dataset** (100-200 stocks):
- [ ] Initial load < 5 seconds
- [ ] Virtual scrolling active
- [ ] Smooth scrolling
- [ ] Sort changes < 1 second
**Large Dataset** (500+ stocks):
- [ ] Virtual scrolling definitely active
- [ ] Only ~20 items rendered at once
- [ ] Scroll performance smooth
- [ ] Sort still fast (server-side)
---
### 13. Mobile/Responsive Test ✅
**Narrow Screen** (<1024px):
- [ ] Horizontal scroll available
- [ ] All metrics still visible
- [ ] Text not truncated improperly
- [ ] Touch interactions work
**Note**: Full mobile responsive layout is a future enhancement. Current version maintains functionality with horizontal scroll.
---
### 14. Browser Compatibility ✅
Test on:
- [ ] Chrome (latest)
- [ ] Firefox (latest)
- [ ] Safari (latest)
- [ ] Edge (latest)
**Check**:
- Sort controls work
- Colors render correctly
- Fonts display properly
- No console errors
---
### 15. Data Integrity Test ✅
**Before & After Sort**:
1. Note total count of stocks
2. Change sort option
3. Verify count remains same
4. Expand a group and note trade count
5. Change sort again
6. Expand same group, verify trades unchanged
**Expected**:
- Sorting only reorders display
- No data loss or duplication
- All trades within group preserved
- Summary stats remain consistent
---
## Testing Results Template
```markdown
## Test Results - [Date]
**Tester**: [Name]
**Browser**: [Browser + Version]
**Dataset Size**: [Number of stocks/trades]
### Functionality ✅/❌
- [ ] Default sort (Current Value DESC) works
- [ ] All 5 sort options work
- [ ] Sort order toggle works
- [ ] Combined filters + sort works
- [ ] Visual hierarchy clear
- [ ] Colors appropriate
- [ ] No layout breaks
### Performance ✅/❌
- [ ] Initial load < [X] seconds
- [ ] Sort change < 1 second
- [ ] Virtual scrolling smooth
- [ ] No memory leaks
### Issues Found
1. [Description]
- Severity: High/Medium/Low
- Steps to reproduce
- Expected vs Actual
### User Experience Rating
- Usability: [1-10]
- Clarity: [1-10]
- Performance: [1-10]
### Suggestions
[Any improvement ideas]
```
---
## Quick Verification Commands
### Check API Response
```bash
curl 'http://localhost:3000/api/tradebook?sortBy=currentValue&sortOrder=desc' \
-H 'Cookie: [your-session-cookie]'
```
### Check Sort Parameters
Open browser DevTools → Network tab → Filter by "tradebook" → Check Query String Parameters
**Should see**:
```
sortBy: currentValue
sortOrder: desc
status: active
```
---
## Rollback Plan
If critical issues found:
### Option 1: Quick Fix
Modify `/equity/app/tradebook/page.tsx`:
```typescript
const [sortBy, setSortBy] = useState<string>('symbol'); // Revert to alphabetical
const [sortOrder, setSortOrder] = useState<string>('asc');
```
### Option 2: Full Rollback
```bash
git revert [commit-hash]
npm run build
pm2 restart oneapp
```
---
## Success Criteria
Implementation is successful if:
- ✅ All 5 sort options work correctly
- ✅ Default sort is Current Value (DESC)
- ✅ Visual hierarchy improves readability
- ✅ No performance degradation
- ✅ No data integrity issues
- ✅ Mobile usability maintained (with scroll)
- ✅ User feedback is positive
---
## Next Steps After Testing
1. Collect user feedback (1 week)
2. Analyze most-used sort options
3. Plan mobile-responsive layout
4. Consider localStorage for sort preferences
5. Implement requested enhancements
---
**Last Updated**: January 1, 2026
**Status**: Ready for Testing
