================================================================================ OLD PROFITABILITY PAGE - EXPANDED VIEW VISUAL GUIDE ================================================================================ This file contains ASCII diagrams showing the exact visual layout of the expanded row view. ================================================================================ OVERALL LAYOUT ================================================================================ ┌──────────────────────────────────────────────────────────────────────────────┐ │ ORDER DETAILS EXPANDED VIEW │ │ Background: white (#ffffff) or dark (#2d2d2d) │ │ Border-top: 1px solid #e9ecef (light) or #444 (dark) │ │ Padding: 10px │ ├──────────────────────────────────────────────────────────────────────────────┤ │ │ │ ╔═══════════════════════════════════════════════════════════════════════╗ │ │ ║ ROW 1 - TOP ROW ║ │ │ ╠═══════════════╦═══════════════════╦═══════════════════════════════════╣ │ │ ║ COLUMN 1 ║ COLUMN 2 ║ COLUMN 3 ║ │ │ ║ 33.33% width ║ 33.33% width ║ 33.33% width ║ │ │ ║ col-md-4 ║ col-md-4 ║ col-md-4 ║ │ │ ╠═══════════════╬═══════════════════╬═══════════════════════════════════╣ │ │ ║ ║ ║ ║ │ │ ║ PRODUCT ║ PRICING ║ FEES & ║ │ │ ║ DETAILS ║ BREAKDOWN ║ COMMISSIONS ║ │ │ ║ ─────── ║ ───────── ║ ──────────── ║ │ │ ║ ║ ║ ║ │ │ ║ Item: ║ ┌───────────────┐ ║ ┌───────────────────────────────┐ ║ │ │ ║ [description] ║ │ SALE PRICE │ ║ │ CHANNEL COMMISSION: 12.00% │ ║ │ │ ║ ║ │ │ ║ │ (Yellow box - commission-box) │ ║ │ │ ║ Item #: ║ │ $332.95 + ... │ ║ └───────────────────────────────┘ ║ │ │ ║ 971505 ║ │ = $332.95 │ ║ ║ │ │ ║ ║ │ │ ║ ┌───────────────────────────────┐ ║ │ │ ║ Partslink: ║ │ BUY PRICE │ ║ │ ADVERTISEMENT FEE: $13.46 │ ║ │ │ ║ MB1095120 ║ │ │ ║ │ (Red box - fee-box) │ ║ │ │ ║ ║ │ $309.14 + ... │ ║ └───────────────────────────────┘ ║ │ │ ║ Supplier: ║ │ = $309.14 │ ║ ║ │ │ ║ USAuto TX ║ │ │ ║ ┌───────────────────────────────┐ ║ │ │ ║ ║ │ Price Source │ ║ │ AMAZON ADDITIONAL: $0.28 │ ║ │ │ ║ ║ │ Manual Entry │ ║ │ (Red box - fee-box) │ ║ │ │ ║ ║ │ │ ║ └───────────────────────────────┘ ║ │ │ ║ ║ │ Ship Source │ ║ ║ │ │ ║ ║ │ Manual Entry │ ║ ┌───────────────────────────────┐ ║ │ │ ║ ║ └───────────────┘ ║ │ TOTAL LOSS RATE: 10.20% │ ║ │ │ ║ ║ ║ │ (Yellow box - commission-box) │ ║ │ │ ║ ║ ║ └───────────────────────────────┘ ║ │ │ ║ ║ ║ ║ │ │ ║ ║ ║ ┌───────────────────────────────┐ ║ │ │ ║ ║ ║ │ CATEGORY DISCOUNT: 10.00% │ ║ │ │ ║ ║ ║ │ (Discount A) │ ║ │ │ ║ ║ ║ │ (Cyan box - discount-box) │ ║ │ │ ║ ║ ║ └───────────────────────────────┘ ║ │ │ ║ ║ ║ (CONDITIONAL - may not appear) ║ │ │ ╚═══════════════╩═══════════════════╩═══════════════════════════════════╝ │ │ │ │ ▼ 10px margin-top │ │ │ │ ╔═══════════════════════════════════════════════════════════════════════╗ │ │ ║ ROW 2 - BOTTOM ROW ║ │ │ ╠═══════════════╦═══════════════════╦═══════════════════════════════════╣ │ │ ║ COLUMN 1 ║ COLUMN 2 ║ COLUMN 3 ║ │ │ ║ 33.33% width ║ 33.33% width ║ 33.33% width ║ │ │ ║ col-md-4 ║ col-md-4 ║ col-md-4 ║ │ │ ╠═══════════════╬═══════════════════╬═══════════════════════════════════╣ │ │ ║ ║ ║ ║ │ │ ║ CUSTOMER ║ COGS ║ GROSS PROFIT ║ │ │ ║ INFORMATION ║ BREAKDOWN ║ & MARGIN ║ │ │ ║ ─────────── ║ ───────── ║ ──────── ║ │ │ ║ ║ ║ ║ │ │ ║ Name: ║ Our Buy Price: ║ Gross Margin ($): ║ │ │ ║ REBECCA ║ $309.14 ║ -$56.71 (RED if negative) ║ │ │ ║ BARRAGAN ║ ║ ║ │ │ ║ ║ Commission & Fee: ║ Gross Profit (%): ║ │ │ ║ Address: ║ $53.41 ║ -17.03% (RED if negative) ║ │ │ ║ 386 HARVEST ║ ║ ║ │ │ ║ LN, SANTA ║ Payment Fee: ║ ───────────────────────────── ║ │ │ ║ ROSA CA US, ║ $0.00 ║ Formula: (Sales Price - ║ │ │ ║ 95401-9065 ║ ║ Buy Price) / Sales Price × 100 ║ │ │ ║ ║ Supplier Ship: ║ (10px, italic, gray) ║ │ │ ║ Remarks: ║ $0.00 ║ ║ │ │ ║ MANUAL_PRICE ║ ║ ┌───────────────────────────────┐ ║ │ │ ║ (gray italic) ║ Supplier Handle: ║ │ [i] Update Prices │ ║ │ │ ║ (CONDITIONAL) ║ $0.00 ║ │ (Blue button - btn-info) │ ║ │ │ ║ ║ ║ └───────────────────────────────┘ ║ │ │ ║ Fee Data Src: ║ Supplier Credits: ║ ║ │ │ ║ = Actual ║ -$0.00 ║ ║ │ │ ║ (green bold) ║ ║ ║ │ │ ║ ║ Loss (10.20%): ║ ║ │ │ ║ Commission ║ $33.96 ║ ║ │ │ ║ and fees are ║ ║ ║ │ │ ║ based on ║ ───────────── ║ ║ │ │ ║ actual data ║ ║ ║ │ │ ║ (small gray) ║ Total COGS: ║ ║ │ │ ║ ║ $396.51 ║ ║ │ │ ║ ║ ║ ║ │ │ ║ ║ COGS %: ║ ║ │ │ ║ ║ 119.1% ║ ║ │ │ ║ ║ ║ ║ │ │ ╚═══════════════╩═══════════════════╩═══════════════════════════════════╝ │ │ │ └──────────────────────────────────────────────────────────────────────────────┘ ================================================================================ PRICING BREAKDOWN BOX - DETAILED VIEW ================================================================================ ┌────────────────────────────────────────────────────────────┐ │ PRICING BREAKDOWN │ │ (Header: 12px bold, margin-bottom: 6px) │ ├────────────────────────────────────────────────────────────┤ │ ┌────────────────────────────────────────────────────────┐ │ │ │ PRICE BREAKDOWN CONTAINER │ │ │ │ Background: #f8f9fa (light gray) │ │ │ │ Border-radius: 4px │ │ │ │ Padding: 8px │ │ │ │ Font-size: 11px │ │ │ ├────────────────────────────────────────────────────────┤ │ │ │ │ │ │ │ Sale Price: │ │ │ │ $332.95 + $0.00 = $332.95 │ │ │ │ ^^^^^^^^^ (blue, 12px, bold) │ │ │ │ │ │ │ │ ▼ 6px margin-bottom │ │ │ │ │ │ │ │ Buy Price: │ │ │ │ $309.14 + $0.00 + $0.00 - $12.37 = $309.14 │ │ │ │ ^^^^^^^^^ (green) │ │ │ │ │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ │ │ Price Source: Manual Entry │ │ │ │ │ │ (9px, gray #6c757d) │ │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ │ │ Shipping Source: Manual Entry │ │ │ │ │ │ (9px, gray #6c757d) │ │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ │ └────────────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────┘ ================================================================================ FEES & COMMISSIONS - DETAILED VIEW ================================================================================ ┌────────────────────────────────────────────────────────────┐ │ FEES & COMMISSIONS │ │ (Header: 12px bold, margin-bottom: 6px) │ ├────────────────────────────────────────────────────────────┤ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Channel Commission: 12.00% │ │ │ │ ═══════════════════════════ │ │ │ │ Background: #fff3cd (light yellow/gold) │ │ │ │ Border: 1px solid #ffeaa7 │ │ │ │ Border-radius: 4px │ │ │ │ Padding: 6px │ │ │ │ Font: 11px bold │ │ │ │ Class: commission-box │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ ▼ 6px margin-bottom │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Advertisement Fee: $13.46 │ │ │ │ ═════════════════════════ │ │ │ │ Background: #f8d7da (light red/pink) │ │ │ │ Border: 1px solid #f5c6cb │ │ │ │ Border-radius: 4px │ │ │ │ Padding: 6px │ │ │ │ Font: 11px bold │ │ │ │ Class: fee-box │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ ▼ 6px margin-bottom │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Amazon Additional Cost: $0.28 │ │ │ │ ═════════════════════════════ │ │ │ │ Background: #f8d7da (light red/pink) │ │ │ │ Border: 1px solid #f5c6cb │ │ │ │ Border-radius: 4px │ │ │ │ Padding: 6px │ │ │ │ Font: 11px bold │ │ │ │ Class: fee-box │ │ │ │ *** CONDITIONAL - Amazon orders only *** │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ ▼ 6px margin-bottom │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Total Loss Rate: 10.20% │ │ │ │ ═══════════════════════ │ │ │ │ Background: #fff3cd (light yellow/gold) │ │ │ │ Border: 1px solid #ffeaa7 │ │ │ │ Border-radius: 4px │ │ │ │ Padding: 6px │ │ │ │ Font: 11px bold │ │ │ │ Class: commission-box │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ ▼ 6px margin-bottom │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Category Discount: 10.00% │ │ │ │ (Discount A) │ │ │ │ ═════════════════════════════ │ │ │ │ Background: #d1ecf1 (light cyan/blue) │ │ │ │ Border: 1px solid #bee5eb │ │ │ │ Border-radius: 4px │ │ │ │ Padding: 6px │ │ │ │ Font: 11px bold │ │ │ │ Class: discount-box │ │ │ │ *** CONDITIONAL - when discount applies *** │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────┘ ================================================================================ COGS BREAKDOWN - DETAILED VIEW ================================================================================ ┌────────────────────────────────────────────────────────────┐ │ COGS BREAKDOWN │ │ (Header: 12px bold, margin-bottom: 6px) │ ├────────────────────────────────────────────────────────────┤ │ │ │ Our Buy Price: $309.14 │ │ (11px, label bold, value normal, margin-bottom: 3px) │ │ │ │ Commission & Fee: $53.41 │ │ (11px, label bold, value normal, margin-bottom: 3px) │ │ │ │ Payment Processor Fee: $0.00 │ │ (11px, label bold, value normal, margin-bottom: 3px) │ │ │ │ Supplier Shipping: $0.00 │ │ (11px, label bold, value normal, margin-bottom: 3px) │ │ │ │ Supplier Handling: $0.00 │ │ (11px, label bold, value normal, margin-bottom: 3px) │ │ │ │ Supplier Credits: -$0.00 │ │ (11px, label bold, value normal, margin-bottom: 3px) │ │ │ │ Loss Amount (10.20%): $33.96 │ │ (11px, label bold w/ %, value normal, margin-bottom: 3px) │ │ │ │ ────────────────────────────────────────────── │ │ (HR with margin: 8px 0) │ │ │ │ Total COGS: $396.51 │ │ (11px, label bold, value normal, margin-bottom: 3px) │ │ │ │ COGS %: 119.1% │ │ (11px, label bold, value normal, margin-bottom: 3px) │ │ │ └────────────────────────────────────────────────────────────┘ ================================================================================ GROSS PROFIT & MARGIN - DETAILED VIEW ================================================================================ ┌────────────────────────────────────────────────────────────┐ │ GROSS PROFIT & MARGIN │ │ (Header: 12px bold, margin-bottom: 6px) │ ├────────────────────────────────────────────────────────────┤ │ │ │ Gross Margin ($): -$56.71 │ │ ^^^^^^^^^ │ │ RED (#dc3545) if negative │ │ GREEN (#28a745) if positive │ │ Bold, 11px │ │ (margin-bottom: 3px) │ │ │ │ Gross Profit (%): -17.03% │ │ ^^^^^^^^ │ │ RED (#dc3545) if negative │ │ GREEN (#28a745) if positive │ │ Bold, 11px │ │ (margin-bottom: 3px) │ │ │ │ ────────────────────────────────────────────── │ │ (HR with margin: 8px 0) │ │ │ │ Formula: (Sales Price - Buy Price) / Sales Price × 100 │ │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ │ │ 10px, italic, gray (#6c757d) │ │ (margin-bottom: 3px) │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ [i] Update Prices │ │ │ │ ───────────────── │ │ │ │ Class: btn btn-sm btn-info update-prices-btn │ │ │ │ Background: Blue (btn-info) │ │ │ │ Icon: fa-edit │ │ │ │ Margin-top: 10px │ │ │ │ │ │ │ │ Data attributes: │ │ │ │ - data-order-id="230697" │ │ │ │ - data-sales-price="332.95" │ │ │ │ - data-buy-price="309.14" │ │ │ │ - data-supplier-shipping="0.00" │ │ │ │ - data-supplier-handling="0.00" │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────┘ ================================================================================ COLOR PALETTE - LIGHT MODE ================================================================================ BOX BACKGROUNDS: ┌──────────────────┬──────────────────┬─────────────┐ │ Commission Box │ #fff3cd │ ■■■■■ │ Light Yellow/Gold │ Border │ #ffeaa7 │ ■■■■■ │ ├──────────────────┼──────────────────┼─────────────┤ │ Fee Box │ #f8d7da │ ■■■■■ │ Light Red/Pink │ Border │ #f5c6cb │ ■■■■■ │ ├──────────────────┼──────────────────┼─────────────┤ │ Discount Box │ #d1ecf1 │ ■■■■■ │ Light Cyan/Blue │ Border │ #bee5eb │ ■■■■■ │ ├──────────────────┼──────────────────┼─────────────┤ │ Price Breakdown │ #f8f9fa │ ■■■■■ │ Light Gray │ Border │ none │ │ └──────────────────┴──────────────────┴─────────────┘ TEXT COLORS: ┌──────────────────┬──────────────────┬─────────────┐ │ Positive Profit │ #28a745 │ ■■■■■ │ Green │ Negative Profit │ #dc3545 │ ■■■■■ │ Red │ Sale Price │ #007bff │ ■■■■■ │ Blue │ Buy Price │ #28a745 │ ■■■■■ │ Green │ Muted Text │ #6c757d │ ■■■■■ │ Gray │ Normal Text │ #212529 │ ■■■■■ │ Dark Gray │ Strong Text │ #000000 │ ■■■■■ │ Black └──────────────────┴──────────────────┴─────────────┘ ================================================================================ COLOR PALETTE - DARK MODE ================================================================================ BOX BACKGROUNDS: ┌──────────────────┬──────────────────┬─────────────┐ │ Commission Box │ #3a3a1a │ ▓▓▓▓▓ │ Dark Yellow/Gold │ Border │ #555 │ ▓▓▓▓▓ │ ├──────────────────┼──────────────────┼─────────────┤ │ Fee Box │ #3a1a1a │ ▓▓▓▓▓ │ Dark Red │ Border │ #555 │ ▓▓▓▓▓ │ ├──────────────────┼──────────────────┼─────────────┤ │ Discount Box │ #1a3a3a │ ▓▓▓▓▓ │ Dark Cyan │ Border │ #555 │ ▓▓▓▓▓ │ ├──────────────────┼──────────────────┼─────────────┤ │ Price Breakdown │ #252525 │ ▓▓▓▓▓ │ Dark Gray │ Border │ none │ │ ├──────────────────┼──────────────────┼─────────────┤ │ Main Background │ #2d2d2d │ ▓▓▓▓▓ │ Charcoal │ Border │ #444 │ ▓▓▓▓▓ │ └──────────────────┴──────────────────┴─────────────┘ TEXT COLORS: ┌──────────────────┬──────────────────┬─────────────┐ │ Positive Profit │ #5cb85c │ ▓▓▓▓▓ │ Light Green │ Negative Profit │ #ff6b6b │ ▓▓▓▓▓ │ Light Red │ Sale Price │ #66b3ff │ ▓▓▓▓▓ │ Light Blue │ Buy Price │ #5cb85c │ ▓▓▓▓▓ │ Light Green │ Muted Text │ #b0b0b0 │ ▓▓▓▓▓ │ Light Gray │ Normal Text │ #e0e0e0 │ ▓▓▓▓▓ │ Off-White │ Strong Text │ #f0f0f0 │ ▓▓▓▓▓ │ Near White └──────────────────┴──────────────────┴─────────────┘ ================================================================================ SPACING MEASUREMENTS ================================================================================ VERTICAL SPACING: Section header margin-bottom: 6px Paragraph margin-bottom: 3px Box margin-bottom: 6px Row margin-top (Row 2): 10px HR margin: 8px 0 Button margin-top: 10px Remarks margin-top: 8px Fee Data Source margin-top: 8px PADDING: Main container (.order-details): 10px Order body: 12px Price breakdown box: 8px Commission/Fee/Discount boxes: 6px BORDER RADIUS: Price breakdown box: 4px Commission boxes: 4px Fee boxes: 4px Discount boxes: 4px BORDER WIDTH: All boxes: 1px solid Main container top: 1px solid ================================================================================ TYPOGRAPHY SCALE ================================================================================ ┌──────────────────────────┬──────────┬────────────┬──────────┐ │ Element │ Size │ Weight │ Style │ ├──────────────────────────┼──────────┼────────────┼──────────┤ │ Section Headers │ 12px │ bold │ normal │ │ Field Labels │ 11px │ bold │ normal │ │ Field Values │ 11px │ normal │ normal │ │ Highlighted Prices │ 12px │ bold │ normal │ │ Source Info │ 9px │ normal │ normal │ │ Source Label │ 9px │ bold │ normal │ │ Formula Text │ 10px │ normal │ italic │ │ Box Content │ 11px │ bold │ normal │ │ Small Text (sub) │ 9-10px │ normal │ italic │ │ Button Text │ 11px │ normal │ normal │ └──────────────────────────┴──────────┴────────────┴──────────┘ ================================================================================ BOOTSTRAP GRID STRUCTURE ================================================================================
← Main container
← Body wrapper (padding: 12px)
← Row 1
← 33.33% - Product Details
← 33.33% - Pricing Breakdown
← 33.33% - Fees & Commissions
← Row 2 (10px gap)
← 33.33% - Customer Info
← 33.33% - COGS Breakdown
← 33.33% - Profit & Margin
================================================================================ RESPONSIVE BEHAVIOR ================================================================================ DESKTOP (≥768px - md breakpoint): ┌──────────┬──────────┬──────────┐ │ Col 1 │ Col 2 │ Col 3 │ ← 3 columns side-by-side │ 33.33% │ 33.33% │ 33.33% │ └──────────┴──────────┴──────────┘ TABLET/MOBILE (<768px): ┌────────────────────────────────┐ │ Col 1 │ ← Stacked vertically │ 100% │ ├────────────────────────────────┤ │ Col 2 │ │ 100% │ ├────────────────────────────────┤ │ Col 3 │ │ 100% │ └────────────────────────────────┘ ================================================================================ END OF VISUAL GUIDE ================================================================================ Use this guide as a visual reference when implementing the expanded view in the NEW profitability page. All measurements, colors, and layouts are documented above. For detailed field descriptions and data, refer to: - OLD_EXPANDED_VIEW_ANALYSIS.md - OLD_EXPANDED_VIEW_FIELD_MAPPING.md - OLD_EXPANDED_VIEW_CSS_REFERENCE.css