Standard / Calculated
{{ number_format($order->gross_profit, 1) }}%
/
{{ number_format($calculatedGrossProfit, 1) }}%
${{ number_format(abs($order->gross_margin), 2) }}
/
${{ number_format(abs($calculatedGrossMargin), 2) }}
```
**Display Format:**
- **Label:** Explicitly says "Standard / Calculated"
- **Row 1 (Primary):** Percentage comparison
- Format: `40.0% / 35.5%`
- Individual color coding for each value
- Grey "/" separator
- **Row 2 (Secondary):** Dollar amount comparison
- Format: `$60.00 / $53.25`
- Individual color coding for each value
- Grey "/" separator
**Key Innovation:**
- **Immediate visibility** of discrepancies
- **No expansion needed** to see both metrics
- **Clear labeling** prevents confusion
- **Space efficient** - uses "/" separator instead of separate columns
---
## Visual Hierarchy & Information Architecture
### OLD Page
```
Flat horizontal layout - all data equal visual weight
[+] | Order | Date | Product | Category | Supplier | ... [many columns]
```
- **Pros:**
- Familiar table structure
- Easy to scan vertically
- Sortable columns
- **Cons:**
- Requires horizontal scrolling
- Equal visual weight = harder to identify key metrics
- Limited space for each field
### NEW Page
```
Hierarchical card layout - grouped by information type
┌─────────────────────────────────────────────────────────────┐
│ [Color Border = Status Indicator] │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌──────────────────┐ │
│ │ Order │ │ Product │ │ Channel │ │ Financial │ │
│ │ Context │ │ Info │ │ Info │ │ Metrics (KEY) │ │
│ └─────────┘ └─────────┘ └─────────┘ └──────────────────┘ │
└─────────────────────────────────────────────────────────────┘
```
- **Pros:**
- **Visual grouping** aids comprehension
- **Emphasis on financial metrics** (larger section)
- No horizontal scrolling needed
- **Color coding** for quick status identification
- Better mobile responsiveness
- **Cons:**
- Takes more vertical space per order
- Less data density
- May be unfamiliar to users expecting tables
---
## Label Comparison: Exact Terminology
| Metric | OLD Page Label | NEW Page Label |
|--------|---------------|----------------|
| Order ID | "Order #" | "Order / Date" (section) |
| Sale Price | "Sale" or "Sale Price" | "Sale" (in Financial Summary) |
| Cost | "Cost" or "Buy Price" | "Cost" (in Financial Summary) |
| COGS % | (Not shown) | **"COGS %"** (NEW) |
| Gross Margin $ | "Gross Margin" or "Margin $" | Part of "Standard / Calculated" |
| Gross Profit % | "Gross Profit" or "Profit %" | Part of "Standard / Calculated" |
| Calculated Profit | (In expanded view) | **"Standard / Calculated"** (NEW) |
**Key Terminology Changes:**
1. **"COGS %"** is a NEW metric label not present in OLD page collapsed view
2. **"Standard / Calculated"** replaces separate columns/sections for comparison
3. **"Financial Summary"** section groups Sale, Cost, and COGS%
4. **"Profit Summary"** section combines both standard and calculated metrics
---
## Layout from Left to Right: Field Order
### OLD Page (Typical DataTables)
```
[1] [+] Expand Icon
[2] Order #
[3] Date
[4] Product/Part #
[5] Category
[6] Supplier
[7] Channel
[8] Customer
[9] Sale Price
[10] Cost
[11] Gross Margin $
[12] Gross Profit %
[13] Status/Badge
```
### NEW Page (Card Layout)
```
┌─────────────────────────────────────────────────────────────────────┐
│ LEFT CENTER RIGHT │
├─────────┬──────────┬─────────┬──────────┬────────────────┬──────────┤
│ [1] │ [2] │ [3] │ [4] │ [5] │ [6] │
│ Order/ │ Product/ │ Supplier│ Channel/ │ Financial │ Profit │
│ Date │ Category │ │ Customer │ Summary │ Summary │
│ │ │ │ │ • Sale │ Std/Calc │
│ #12345 │ AB123XX │ Key- │ Amazon │ • Cost │ 40% / 35%│
│ Aug 15 │ Body │ stone │ J.Smith │ • COGS% │ $60 / $53│
│ │ Parts │ │ │ │ [Badge] │
│ │ │ │ │ [Chevron →│ │
└─────────┴──────────┴─────────┴──────────┴────────────────┴──────────┘
```
**Field Order (Left to Right):**
1. **Order / Date** (15% width)
2. **Product / Category** (20% width)
3. **Supplier** (10% width)
4. **Channel / Customer** (15% width)
5. **Financial Summary** (25% width) - CENTRAL FOCUS
- Sub-fields: Sale, Cost, COGS %
6. **Profit Summary** (15% width) - RIGHT ALIGNED
- Standard / Calculated comparison
7. **Badges** (10% width) - FAR RIGHT
- Confidence or Own Stock indicator
8. **Expand Chevron** - ABSOLUTE RIGHT
---
## Color Coding Comparison
### OLD Page
- **Positive Profit:** Likely green text
- **Negative Profit:** Likely red text
- **Row background:** Probably white/alternating grey
### NEW Page (Much More Sophisticated)
**Border Color (Left side):**
- **Red (4px):** Negative profit (loss)
- **Green (4px):** Positive profit
**Background Color:**
- **White:** Default
- **Light green (#e8f5e9):** Own stock + profitable
- **Light red (#fff5f5):** Negative profit
- **Very light red (#ffebee):** Own stock + negative profit
**Text Color:**
- **COGS %:**
- Green: < 70% (healthy)
- Yellow/Orange: 70-99% (warning)
- Red: >= 100% (danger)
- **Profit Values:**
- Green (#0d6e0d): Positive
- Red (#dc3545): Negative
**Badges:**
- **High Confidence:** Green background (#d4edda)
- **Medium Confidence:** Yellow background (#fff3cd)
- **Low Confidence:** Red background (#f8d7da)
- **Own Stock:** Grey background (#6c757d)
---
## Expansion Indicator
### OLD Page
- **Icon:** `[+]` or `[►]` icon
- **Location:** First column (leftmost)
- **Behavior:** Changes to `[-]` or `[▼]` when expanded
### NEW Page
- **Icon:** Chevron down (`fa-chevron-down`)
- **Location:** Far right of Financial Summary section (line 1849-1850)
- **Behavior:** Rotates 180° when expanded (CSS transform)
- **Positioning:** Absolute positioning to keep it separate from data
---
## What Users See: Quick Scan Comparison
### OLD Page - User scanning left to right sees:
```
Order → Date → Product → Category → Supplier → Channel → Customer →
→ Sale → Cost → Margin → Profit → Status
```
- Must read across many columns
- Standard metrics only
- Need to expand for calculated
### NEW Page - User scanning left to right sees:
```
Order/Date → Product → Supplier → Channel →
→ [FINANCIAL FOCUS: Sale + Cost + COGS%] →
→ [PROFIT COMPARISON: Standard/Calculated] → Status
```
- Grouped information sections
- **Financial metrics visually emphasized**
- **Immediate comparison** of Standard vs Calculated
- **COGS% immediately visible** for margin assessment
---
## Critical Innovation in NEW Page
### The "Slash" Comparison Format
**OLD Approach:**
```
Standard Profit: 40.0%
(Must expand to see calculated: 35.5%)
```
**NEW Approach (Lines 1855-1869):**
```
Standard / Calculated
40.0% / 35.5%
$60.00 / $53.25
```
**Why This Matters:**
1. **Immediate discrepancy visibility** - no need to expand
2. **Side-by-side comparison** - easy to compare values
3. **Compact format** - doesn't take extra columns
4. **Clear labeling** - "Standard / Calculated" header
5. **Dual representation** - shows both % and $ for complete picture
### The COGS % Addition
**OLD Approach:**
- Users must mentally calculate: Cost ÷ Sale
- Or expand row to find it
- No visual indicator of margin health
**NEW Approach (Lines 1843-1846):**
```php
COGS %: 60.0% (color: green/yellow/red)
```
**Why This Matters:**
1. **Instant margin assessment** - see if COGS is too high
2. **Color coding** - red flag for problem orders (COGS >= 100%)
3. **Industry standard metric** - COGS% is key retail metric
4. **Complements profit %** - shows cost structure at a glance
5. **No calculation needed** - value is pre-computed and displayed
---
## Summary: Major Layout Differences
### What's the SAME:
- Both show order details in collapsed state
- Both use color to indicate profit/loss
- Both have expandable details
- Both show financial metrics prominently
### What's DIFFERENT in NEW Page:
1. **Layout Architecture:**
- Card-based vs table-based
- Grouped sections vs linear columns
- Hierarchical vs flat structure
2. **Financial Metrics Display:**
- **COGS % added** (not in OLD)
- **Standard AND Calculated shown together** (OLD shows only Standard)
- Side-by-side "/" comparison format (NEW innovation)
3. **Information Density:**
- More vertical space per row
- Less horizontal scrolling
- Better mobile responsiveness
4. **Visual Indicators:**
- Color-coded left border (profit/loss)
- Background color coding (own stock)
- COGS % color coding (margin health)
5. **Field Grouping:**
- Financial Summary section (Sale, Cost, COGS%)
- Profit Summary section (Standard / Calculated)
- Channel + Customer combined
6. **User Experience:**
- **Key innovation:** No need to expand to compare Standard vs Calculated
- **Key addition:** COGS % immediately visible for margin analysis
- More intuitive visual hierarchy
- Better at-a-glance comprehension
---
## Conclusion
The NEW page represents a significant UX improvement over traditional table layouts:
**Biggest Changes:**
1. **COGS % is now a first-class metric** - displayed prominently in collapsed view with color coding
2. **Standard vs Calculated comparison is immediately visible** - no expansion needed
3. **Grouped information architecture** - related data shown together
4. **Enhanced visual indicators** - multiple color coding systems for quick assessment
**Trade-offs:**
- OLD: More data density, familiar table format
- NEW: Better visual hierarchy, more space per row, improved scannability
**Recommendation:**
The NEW layout is superior for users who need to quickly identify:
- Orders with high COGS (margin problems)
- Discrepancies between Standard and Calculated metrics
- Problem orders (via color coding)
However, users accustomed to the OLD table format may need brief training to understand the new grouped layout and the "Standard / Calculated" slash format.