╔═══════════════════════════════════════════════════════════════════════════════╗ ║ COLLAPSED ROW LAYOUT VISUAL COMPARISON ║ ║ OLD Profitability Page vs NEW Profitability Page ║ ╚═══════════════════════════════════════════════════════════════════════════════╝ ════════════════════════════════════════════════════════════════════════════════ OLD PAGE LAYOUT (ops.go-parts.com/profitability/indexImproved) DATATABLE STRUCTURE ════════════════════════════════════════════════════════════════════════════════ ┌──┬────────┬──────────┬───────────┬──────────┬──────────┬────────┬──────────┬────────┬────────┬──────────┬────────┬────────┐ │ +│ Order │ Date │ Product │ Category │ Supplier │Channel │ Customer │ Sale │ Cost │ Margin $ │Profit %│ Status │ ├──┼────────┼──────────┼───────────┼──────────┼──────────┼────────┼──────────┼────────┼────────┼──────────┼────────┼────────┤ │ +│ 12345 │ 08/15/25 │ AB1234XX │Body Parts│ Keystone │ Amazon │J. Smith │ $150.00│ $90.00 │ $60.00 │ 40.0% │ [High] │ ├──┼────────┼──────────┼───────────┼──────────┼──────────┼────────┼──────────┼────────┼────────┼──────────┼────────┼────────┤ │ +│ 12346 │ 08/15/25 │ CD5678YY │ Lighting │ USAuto │ eBay │M. Johnson│ $85.00 │ $65.00 │ $20.00 │ 23.5% │ [Med] │ └──┴────────┴──────────┴───────────┴──────────┴──────────┴────────┴──────────┴────────┴────────┴──────────┴────────┴────────┘ ▲ ▲ │ │ └─ Click to expand STANDARD METRICS ONLY ─────────────────────┘ (Must expand for Calculated) CHARACTERISTICS: • Linear table with 13+ columns • Requires horizontal scrolling • All columns equal visual weight • COGS % NOT SHOWN in collapsed view • Only STANDARD profit metrics shown • Must expand row to see CALCULATED metrics • Traditional [+]/[-] expand icon ════════════════════════════════════════════════════════════════════════════════ NEW PAGE LAYOUT (central.go-parts.com/profitability) CARD-BASED STRUCTURE ════════════════════════════════════════════════════════════════════════════════ ┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────┐ │ ┃ ORDER CARD #1 │ │ ┃═══════════════════════════════════════════════════════════════════════════════════════════════════════════│ │ ┃ ┌──────────────┬──────────────────┬────────────┬──────────────────┬─────────────────────────┬────────────┐│ │ ┃ │ ORDER / DATE │ PRODUCT/CATEGORY │ SUPPLIER │ CHANNEL/CUSTOMER │ FINANCIAL SUMMARY │ PROFIT ││ │ ┃ ├──────────────┼──────────────────┼────────────┼──────────────────┼─────────────────────────┼────────────┤│ │ ┃ │ │ │ │ │ ┌──────────────────┐ │ ││ │ ┃ │ #12345 │ AB1234XX │ Keystone │ Amazon │ │ Sale │ │ Standard/ ││ │ ┃ │ Aug 15, 2025 │ Body Parts │ │ John Smith │ │ $150.00 │ │ Calculated ││ │ ┃ │ │ │ │ │ ├──────────────────┤ │ ││ │ ┃ │ │ │ │ │ │ Cost │ │ 40.0% ││ │ ┃ │ │ │ │ │ │ $90.00 │ │ / ││ │ ┃ │ │ │ │ │ ├──────────────────┤ │ 35.5% ││ │ ┃ │ │ │ │ │ │ COGS % │ │ ││ │ ┃ │ │ │ │ │ │ 60.0% 🟢 │ │ $60.00 ││ │ ┃ │ │ │ │ │ └──────────────────┘ │ / ││ │ ┃ │ │ │ │ │ 🔽 │ $53.25 ││ │ ┃ │ │ │ │ │ │ [High] ││ │ ┃ └──────────────┴──────────────────┴────────────┴──────────────────┴─────────────────────────┴────────────┘│ │ ┃ │ └─┃─────────────────────────────────────────────────────────────────────────────────────────────────────────────┘ ▲ │ └─ Green/Red border indicates profit/loss ┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────┐ │ ┃ ORDER CARD #2 (Own Stock - Profitable) [Own Stock Badge] │ │ ┃═══════════════════════════════════════════════════════════════════════════════════════════════════════════│ │ ┃ ┌──────────────┬──────────────────┬────────────┬──────────────────┬─────────────────────────┬────────────┐│ │ ┃ │ #12346 │ CD5678YY │ USAuto │ eBay │ ┌──────────────────┐ │ ││ │ ┃ │ Aug 15, 2025 │ Lighting │ │ Mary Johnson │ │ Sale │ │ Standard/ ││ │ ┃ │ │ │ │ │ │ $85.00 │ │ Calculated ││ │ ┃ │ │ │ │ │ ├──────────────────┤ │ ││ │ ┃ │ │ │ │ │ │ Cost │ │ 23.5% ││ │ ┃ │ │ │ │ │ │ $65.00 │ │ / ││ │ ┃ │ │ │ │ │ ├──────────────────┤ │ 18.2% ││ │ ┃ │ │ │ │ │ │ COGS % │ │ ││ │ ┃ │ │ │ │ │ │ 76.5% 🟡 │ │ $20.00 ││ │ ┃ │ │ │ │ │ └──────────────────┘ │ / ││ │ ┃ │ │ │ │ │ 🔽 │ $15.47 ││ │ ┃ └──────────────┴──────────────────┴────────────┴──────────────────┴─────────────────────────┴────────────┘│ │ ┃ │ └─┃─────────────────────────────────────────────────────────────────────────────────────────────────────────────┘ ▲ │ └─ Light green background indicates Own Stock + Profitable CHARACTERISTICS: • Card-based layout with 6 main sections • NO horizontal scrolling needed • Visual hierarchy: Financial Summary is LARGEST section • COGS % PROMINENTLY DISPLAYED with color coding: 🟢 Green: < 70% (healthy margin) 🟡 Yellow: 70-99% (warning) 🔴 Red: >= 100% (losing money) • BOTH Standard AND Calculated shown SIDE-BY-SIDE • "Slash" comparison format: "40.0% / 35.5%" • No expansion needed to compare metrics • Chevron icon (far right) to expand details • Color-coded left border (green=profit, red=loss) • Background color for special cases (own stock) ════════════════════════════════════════════════════════════════════════════════ FINANCIAL METRICS SECTION - DETAILED VIEW ════════════════════════════════════════════════════════════════════════════════ OLD PAGE - Separate Columns: ┌────────┬────────┬──────────┬────────┐ │ Sale │ Cost │ Margin $ │Profit %│ ├────────┼────────┼──────────┼────────┤ │$150.00 │ $90.00 │ $60.00 │ 40.0% │ ← STANDARD ONLY └────────┴────────┴──────────┴────────┘ ↓ Must expand to see CALCULATED metrics NEW PAGE - Grouped with Comparison: ┌─────────────────────────────────────┬──────────────────────────┐ │ FINANCIAL SUMMARY │ PROFIT SUMMARY │ ├─────────┬─────────┬──────────────────┼──────────────────────────┤ │ Sale │ Cost │ COGS % │ Standard / Calculated │ ├─────────┼─────────┼──────────────────┼──────────────────────────┤ │ $150.00 │ $90.00 │ 60.0% 🟢 │ 40.0% / 35.5% │ │ │ │ (Green text) │ $60.00 / $53.25 │ └─────────┴─────────┴──────────────────┴──────────────────────────┘ ▲ ▲ │ │ │ │ NEW METRIC BOTH METRICS VISIBLE Color-coded warning No expansion required! ════════════════════════════════════════════════════════════════════════════════ PROFIT COMPARISON FORMATS ════════════════════════════════════════════════════════════════════════════════ OLD PAGE FORMAT (Must expand row): ┌────────────────────────────────────────┐ │ Collapsed View: │ │ Profit %: 40.0% (Standard only) │ │ │ │ Expanded View: │ │ Standard Profit: 40.0% │ │ Calculated Profit: 35.5% │ │ Difference: -4.5% │ └────────────────────────────────────────┘ NEW PAGE FORMAT (Always visible): ┌────────────────────────────────────────┐ │ Standard / Calculated │ │ 40.0% / 35.5% │ │ $60.00 / $53.25 │ ├────────────────────────────────────────┤ │ 🟢 Green / 🔴 Red ← Individual │ │ Positive Negative coloring │ └────────────────────────────────────────┘ ▲ ▲ │ │ └──────┬───────┘ │ Immediate visual comparison No expansion needed! ════════════════════════════════════════════════════════════════════════════════ COGS % COLOR CODING LEGEND ════════════════════════════════════════════════════════════════════════════════ NEW PAGE ONLY - COGS % Display: 🟢 GREEN (text-success) 🟡 YELLOW (text-warning) COGS < 70% COGS 70% - 99% ┌──────────────────┐ ┌──────────────────┐ │ COGS % │ │ COGS % │ │ 45.2% │ ← HEALTHY │ 76.5% │ ← WARNING │ (green text) │ Good margin │ (yellow text) │ Low margin └──────────────────┘ └──────────────────┘ 🔴 RED (text-danger) COGS >= 100% ┌──────────────────┐ │ COGS % │ │ 102.3% │ ← DANGER │ (red text) │ LOSING MONEY! └──────────────────┘ ════════════════════════════════════════════════════════════════════════════════ INFORMATION FLOW COMPARISON ════════════════════════════════════════════════════════════════════════════════ OLD PAGE - Left to Right Scan: ┌───┐ ┌─────┐ ┌────┐ ┌─────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌──────┐ │ + │→│Order│→│Date│→│ Product │→│Category│→│Supplier│→│ Channel│→│ Sale │ └───┘ └─────┘ └────┘ └─────────┘ └────────┘ └────────┘ └────────┘ └──────┘ ↓ ┌────────┐ ┌──────────┐ ┌────────┐ ┌────────┐ │Customer│→│ Cost │→│Margin $│→│Profit %│ ← All equal weight └────────┘ └──────────┘ └────────┘ └────────┘ Many columns NEW PAGE - Grouped Sections: ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌═══════════════┐ ┌═══════════════┐ │ Order │ → │ Product │ → │ Supplier │ → │ Channel │ → ║ FINANCIAL ║ → ║ PROFIT ║ │ Context │ │ Info │ │ │ │ Customer │ ║ SUMMARY ║ ║ COMPARISON ║ └──────────┘ └──────────┘ └──────────┘ └──────────┘ ║ ║ ║ ║ ║ • Sale ║ ║ Standard/Calc ║ ║ • Cost ║ ║ 40% / 35% ║ ║ • COGS% 🟢 ║ ║ $60 / $53 ║ ╚═══════════════╝ ╚═══════════════╝ ▲ ▲ │ │ EMPHASIZED KEY METRICS (Larger section) (Side-by-side) ════════════════════════════════════════════════════════════════════════════════ CARD BORDER COLOR CODING ════════════════════════════════════════════════════════════════════════════════ NEW PAGE ONLY: ┃ ← Green left border (4px) ┃ ← Red left border (4px) ┃ Positive profit ┃ Negative profit (LOSS) ┃ border-left: 4px solid #28a745 ┃ border-left: 4px solid #dc3545 ┃ ┃ ┃ [Order content...] ┃ [Order content...] ┃ ┃ Background: #fff5f5 (light red) ┃ ┃ ════════════════════════════════════════════════════════════════════════════════ KEY INNOVATIONS SUMMARY ════════════════════════════════════════════════════════════════════════════════ ┌─────────────────────────────────────────────────────────────────────────────┐ │ INNOVATION #1: COGS % Visibility │ ├─────────────────────────────────────────────────────────────────────────────┤ │ OLD: Not shown in collapsed view - must calculate manually │ │ NEW: ✓ Prominently displayed with color coding │ │ ✓ Instant margin health assessment │ │ ✓ Red flag for COGS >= 100% (losing money) │ └─────────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────────────────┐ │ INNOVATION #2: Standard vs Calculated Comparison │ ├─────────────────────────────────────────────────────────────────────────────┤ │ OLD: Must expand row to see calculated metrics │ │ NEW: ✓ Both shown side-by-side: "40.0% / 35.5%" │ │ ✓ Immediate discrepancy visibility │ │ ✓ No expansion required │ │ ✓ Space-efficient slash format │ └─────────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────────────────┐ │ INNOVATION #3: Visual Hierarchy │ ├─────────────────────────────────────────────────────────────────────────────┤ │ OLD: Flat table - all columns equal weight │ │ NEW: ✓ Grouped sections with visual emphasis │ │ ✓ Financial metrics get larger section │ │ ✓ Related data grouped together │ │ ✓ Better scannability │ └─────────────────────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────────────────────┐ │ INNOVATION #4: Multi-Layer Color Coding │ ├─────────────────────────────────────────────────────────────────────────────┤ │ OLD: Likely just profit text color (green/red) │ │ NEW: ✓ Border color (profit/loss status) │ │ ✓ Background color (own stock indicator) │ │ ✓ COGS % color (margin health) │ │ ✓ Profit value colors (individual coloring) │ │ ✓ Confidence badges (accuracy indicator) │ └─────────────────────────────────────────────────────────────────────────────┘ ════════════════════════════════════════════════════════════════════════════════ FIELD WIDTH ALLOCATION ════════════════════════════════════════════════════════════════════════════════ NEW PAGE - Proportional Width Distribution: 0% 15% 35% 45% 60% 85% 100% ├─────────┼─────────┼────────┼────────┼─────────────────┼────────────────┤ │ Order/ │ Product/│Supplier│Channel/│ FINANCIAL │ PROFIT │ │ Date │Category │ │Customer│ SUMMARY │ SUMMARY │ └─────────┴─────────┴────────┴────────┴─────────────────┴────────────────┘ 15% 20% 10% 15% 25% 15% (LARGEST) (EMPHASIS) (EMPHASIS) Visual Weight Distribution: Contextual Info: 60% (Order, Product, Supplier, Channel) Financial Focus: 40% (Financial Summary + Profit Summary) ▲ └─ Key metrics get 40% of horizontal space! ════════════════════════════════════════════════════════════════════════════════ RESPONSIVE CONSIDERATIONS ════════════════════════════════════════════════════════════════════════════════ OLD PAGE: • Fixed column widths • Requires horizontal scroll on smaller screens • All columns always visible • Difficult to use on tablets/mobile NEW PAGE: • Flexible card-based layout • Sections can stack vertically on smaller screens • Maintains readability across device sizes • Touch-friendly expand/collapse • Better mobile experience ════════════════════════════════════════════════════════════════════════════════ USAGE RECOMMENDATIONS ════════════════════════════════════════════════════════════════════════════════ Use OLD PAGE when: ✓ Users need maximum data density ✓ Desktop-only access ✓ Users are familiar with table structure ✓ Sorting by columns is primary workflow Use NEW PAGE when: ✓ Quick assessment of margin health is critical (COGS %) ✓ Comparing Standard vs Calculated is frequent task ✓ Visual hierarchy aids comprehension ✓ Multiple device sizes need to be supported ✓ Problem order identification is priority (color coding) ════════════════════════════════════════════════════════════════════════════════