# OLD Profitability Page - Expanded Row Analysis ## Document Overview This document provides a comprehensive analysis of the expanded row view on the OLD profitability page (`/profitability/indexImproved`). This analysis is based on the HTML structure found in `profit-old-full.html`. --- ## Overall Structure The expanded view uses a **2-row, 3-column grid layout** using Bootstrap's grid system: - **Row 1**: Product Details | Pricing Breakdown | Fees & Commissions - **Row 2**: Customer Information | COGS Breakdown | Gross Profit & Margin Each column uses the `col-md-4` class (33.33% width on medium+ screens). --- ## Visual Layout Diagram ``` ┌─────────────────────────────────────────────────────────────────────────┐ │ EXPANDED ORDER DETAILS (order-details class) │ │ Background: white (light mode) / #2d2d2d (dark mode) │ │ Border-top: 1px solid #e9ecef / #444 (dark) │ │ Padding: 10px │ ├─────────────────────────────────────────────────────────────────────────┤ │ │ │ ROW 1 (Top Row) │ │ ┌────────────────────┬────────────────────┬───────────────────────┐ │ │ │ PRODUCT DETAILS │ PRICING BREAKDOWN │ FEES & COMMISSIONS │ │ │ │ (col-md-4) │ (col-md-4) │ (col-md-4) │ │ │ │ │ │ │ │ │ │ • Item name │ Sale Price box: │ Commission box: │ │ │ │ • Item # │ $332.95 + $0.00 │ 12.00% │ │ │ │ • Partslink │ = $332.95 │ (yellow bg) │ │ │ │ • Supplier │ │ │ │ │ │ │ Buy Price box: │ Fee boxes: │ │ │ │ │ $309.14 + $0.00 │ Advertisement Fee │ │ │ │ │ = $309.14 │ Amazon Cost │ │ │ │ │ │ (red bg) │ │ │ │ │ Price Source info │ │ │ │ │ │ Shipping Source │ Loss Rate box: │ │ │ │ │ (gray text) │ 10.20% │ │ │ │ │ │ (yellow bg) │ │ │ │ │ │ │ │ │ │ │ │ Discount box (opt): │ │ │ │ │ │ 10.00% │ │ │ │ │ │ (cyan bg) │ │ │ └────────────────────┴────────────────────┴───────────────────────┘ │ │ │ │ ROW 2 (Bottom Row) - margin-top: 10px │ │ ┌────────────────────┬────────────────────┬───────────────────────┐ │ │ │ CUSTOMER INFO │ COGS BREAKDOWN │ GROSS PROFIT & MARGIN │ │ │ │ (col-md-4) │ (col-md-4) │ (col-md-4) │ │ │ │ │ │ │ │ │ │ • Name │ • Our Buy Price │ • Gross Margin ($) │ │ │ │ • Address │ • Commission & Fee │ (red/green) │ │ │ │ • Remarks │ • Payment Fee │ │ │ │ │ (gray italic) │ • Supp. Shipping │ • Gross Profit (%) │ │ │ │ │ • Supp. Handling │ (red/green) │ │ │ │ • Fee Data Source │ • Supp. Credits │ │ │ │ │ (green "=") │ • Loss Amount │ ───────────── │ │ │ │ "Actual" │ ───────────── │ Formula (italic) │ │ │ │ │ • Total COGS │ │ │ │ │ │ • COGS % │ [Update Prices] │ │ │ │ │ │ (btn-info) │ │ │ └────────────────────┴────────────────────┴───────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────┘ ``` --- ## Section-by-Section Breakdown ### ROW 1, COLUMN 1: Product Details **Header:** "Product Details" (12px, bold) **Fields:** - **Item:** Full product description (11px) - Example: "Front Bumper Molding for Mercedes-Benz GLS450 2020-2022, Chrome, Without AMG Package, Replacement" - **Item #:** Numeric ID (11px) - Example: "971505" - **Partslink:** Part number (11px) - Example: "MB1095120" - **Supplier:** Supplier name with possible notes (11px) - Example: "USAuto TX" or "Meyer (+5% due to Meyer not giving us Terms)" **Styling:** - All text: 11px, margin-bottom: 3px - Labels in `` tags - No special background or border --- ### ROW 1, COLUMN 2: Pricing Breakdown **Header:** "Pricing Breakdown" (12px, bold) **Container:** `.price-breakdown` class - Background: #f8f9fa (light gray) / #252525 (dark mode) - Border-radius: 4px - Padding: 8px - Margin-bottom: 8px **Sale Price Section:** ``` Sale Price: $332.95 + $0.00 = $332.95 (blue text, 12px bold) ``` **Buy Price Section:** ``` Buy Price: $309.14 + $0.00 + $0.00 - $12.37 = $309.14 (green text, 12px bold) ``` **Source Information:** `.source-info` class (9px, gray #6c757d) - **Price Source:** Manual Entry / MEYER Included / etc. - **Shipping Source:** Manual Entry / Dropship: MEYER / etc. **Visual Pattern:** - Main calculation shown with formula format - Final totals highlighted in color (blue for sale, green for buy) - Source info appears below in smaller, muted text --- ### ROW 1, COLUMN 3: Fees & Commissions **Header:** "Fees & Commissions" (12px, bold) **Components:** (in order from top to bottom) 1. **Commission Box** (`.commission-box`) - Background: #fff3cd (light yellow) / #3a3a1a (dark) - Border: 1px solid #ffeaa7 / #555 (dark) - Border-radius: 4px - Padding: 6px - Margin-bottom: 6px - Font-size: 11px - Content: "Channel Commission: 12.00%" 2. **Fee Box** (`.fee-box`) - Advertisement Fee - Background: #f8d7da (light red) / #3a1a1a (dark) - Border: 1px solid #f5c6cb / #555 (dark) - Border-radius: 4px - Padding: 6px - Margin-bottom: 6px - Font-size: 11px - Content: "Advertisement Fee: $13.46" 3. **Fee Box** (`.fee-box`) - Amazon Additional Cost (optional) - Same styling as above - Content: "Amazon Additional Cost: $0.28" 4. **Commission Box** (`.commission-box`) - Same styling as first commission box - Content: "Total Loss Rate: 10.20%" 5. **Discount Box** (`.discount-box`) - OPTIONAL - Background: #d1ecf1 (light cyan) / #1a3a3a (dark) - Border: 1px solid #bee5eb / #555 (dark) - Border-radius: 4px - Padding: 6px - Margin-bottom: 6px - Font-size: 11px - Content: "Category Discount: 10.00%" - Sub-text: `(Discount A)` **Pattern:** - Yellow boxes = Commissions/Rates (percentages) - Red boxes = Fees (dollar amounts) - Cyan boxes = Discounts (percentages) --- ### ROW 2, COLUMN 1: Customer Information **Header:** "Customer Information" (12px, bold) **Fields:** - **Name:** Customer full name (11px, bold label) - Example: "REBECCA BARRAGAN" - **Address:** Full shipping address (11px, bold label) - Example: "386 HARVEST LN, SANTA ROSA CA US, 95401-9065" - **Remarks:** (margin-top: 8px) - Label: bold - Value: gray (#6c757d), italic - Example: "MANUAL_PRICE" - **Fee Data Source:** (margin-top: 8px) - Label: bold - Value: Green (#28a745), bold - Example: "= Actual" - Sub-text: Small, gray, italic - Example: "Commission and fees are based on actual data" **Styling:** - All paragraphs: font-size: 11px, margin-bottom: 3px - Remarks and Fee Data Source have extra top margin (8px) - Fee Data Source value uses color coding (green for Actual) --- ### ROW 2, COLUMN 2: COGS Breakdown **Header:** "COGS Breakdown" (12px, bold) **Fields:** (all 11px, margin-bottom: 3px) 1. **Our Buy Price:** $309.14 2. **Commission & Fee:** $53.41 3. **Payment Processor Fee:** $0.00 4. **Supplier Shipping:** $0.00 5. **Supplier Handling:** $0.00 6. **Supplier Credits:** -$0.00 7. **Loss Amount (10.20%):** $33.96 **Separator:** Horizontal rule (margin: 8px 0) **Totals:** 8. **Total COGS:** $396.51 9. **COGS %:** 119.1% **Pattern:** - Simple list format with label and value - All monetary values right-aligned with dollar signs - Credits shown as negative values - Loss Amount includes percentage in label - HR separator before totals - Bold labels, normal values --- ### ROW 2, COLUMN 3: Gross Profit & Margin **Header:** "Gross Profit & Margin" (12px, bold) **Fields:** 1. **Gross Margin ($):** - Value in colored `` (red #dc3545 for negative, green for positive) - Font-weight: bold - Example: "-$56.71" (red) 2. **Gross Profit (%):** - Value in colored `` (red #dc3545 for negative, green for positive) - Font-weight: bold - Example: "-17.03%" (red) **Separator:** Horizontal rule (margin: 8px 0) **Formula Display:** - Font-size: 10px - Color: #6c757d (gray) - Style: `` (italic) - Text: "Formula: (Sales Price - Buy Price) / Sales Price × 100" **Button:** (margin-top: 10px) - Class: `btn btn-sm btn-info update-prices-btn` - Icon: `` - Text: "Update Prices" - Data attributes: - data-order-id - data-sales-price - data-buy-price - data-supplier-shipping - data-supplier-handling **Color Coding:** - **Positive profit:** Green (#28a745 in light mode, #5cb85c in dark mode) - **Negative profit:** Red (#dc3545 in light mode, #ff6b6b in dark mode) **Button Styling:** - Info button: Blue background - Dark mode: #2d5a6a background, #1d4a5a border - Hover (dark): #3d6a7a background, #2d5a6a border --- ## CSS Classes and Styling ### Main Container **`.order-details`** ```css display: none; /* Hidden by default */ border-top: 1px solid #e9ecef; /* Light gray top border */ background: white; padding: 10px; ``` **`.order-item-card.expanded .order-details`** ```css display: block; /* Show when expanded */ ``` **Dark mode:** ```css body.dark-mode .order-details { background: #2d2d2d; border-top-color: #444; } ``` --- ### Box Components **`.price-breakdown`** ```css background: #f8f9fa; /* Light gray */ border-radius: 4px; padding: 8px; margin-bottom: 8px; font-size: 11px; ``` **`.commission-box`** ```css background: #fff3cd; /* Light yellow */ border: 1px solid #ffeaa7; border-radius: 4px; padding: 6px; margin-bottom: 6px; font-size: 11px; ``` **`.fee-box`** ```css background: #f8d7da; /* Light red */ border: 1px solid #f5c6cb; border-radius: 4px; padding: 6px; margin-bottom: 6px; font-size: 11px; ``` **`.discount-box`** ```css background: #d1ecf1; /* Light cyan/blue */ border: 1px solid #bee5eb; border-radius: 4px; padding: 6px; margin-bottom: 6px; font-size: 11px; ``` --- ### Text Styling **`.source-info`** ```css font-size: 9px; color: #6c757d; /* Muted gray */ margin-top: 2px; ``` **`.source-info .source-label`** ```css font-weight: bold; ``` --- ### Dark Mode Overrides ```css body.dark-mode .price-breakdown { background: #252525; color: #e0e0e0; } body.dark-mode .commission-box { background: #3a3a1a; /* Dark yellow */ border-color: #555; } body.dark-mode .fee-box { background: #3a1a1a; /* Dark red */ border-color: #555; } body.dark-mode .discount-box { background: #1a3a3a; /* Dark cyan */ border-color: #555; } ``` --- ## Interactive Elements ### Update Prices Button **HTML Structure:** ```html ``` **Location:** Bottom of "Gross Profit & Margin" column (Row 2, Column 3) **Purpose:** Opens modal to edit pricing information for the order --- ## Color Coding System ### Profit/Loss Indicators | Condition | Light Mode Color | Dark Mode Color | Usage | |-----------|-----------------|-----------------|-------| | Positive Value | #28a745 (green) | #5cb85c (lighter green) | Gross Margin $, Gross Profit % | | Negative Value | #dc3545 (red) | #ff6b6b (lighter red) | Gross Margin $, Gross Profit % | | Neutral/Info | #212529 (dark) | #e0e0e0 (light) | Regular text | | Muted | #6c757d (gray) | #b0b0b0 (light gray) | Source info, formulas | ### Box Background Colors | Box Type | Light Mode | Dark Mode | Usage | |----------|-----------|-----------|-------| | Commission | #fff3cd (yellow) | #3a3a1a | Percentages, rates | | Fee | #f8d7da (red) | #3a1a1a | Dollar amounts, costs | | Discount | #d1ecf1 (cyan) | #1a3a3a | Discount percentages | | Price Breakdown | #f8f9fa (light gray) | #252525 | Sale/Buy price container | --- ## Typography ### Font Sizes - **Section Headers:** 12px, bold - **Field Labels:** 11px, bold (``) - **Field Values:** 11px, normal weight - **Source Info:** 9px, gray - **Formula Text:** 10px, italic, gray - **Highlighted Prices:** 12px, bold, colored ### Spacing - **Paragraph margin-bottom:** 3px - **Section header margin-bottom:** 6px - **Box padding:** 6-8px - **Box margin-bottom:** 6-8px - **Row margin-top:** 10px (between Row 1 and Row 2) - **HR margin:** 8px 0 --- ## Layout Mechanics ### Grid Structure ```html
Product Details
Pricing Breakdown
Fees & Commissions
Customer Information
COGS Breakdown
Gross Profit & Margin
``` ### Responsive Behavior - Uses Bootstrap's `col-md-4` (3 columns on medium+ screens) - On smaller screens, columns stack vertically - Each column is 33.33% width on desktop --- ## Conditional Elements ### Elements that may or may not appear: 1. **Amazon Additional Cost** (Row 1, Column 3) - Only appears for Amazon orders with additional costs - Red fee box 2. **Category Discount** (Row 1, Column 3) - Only appears when category discount is applied - Cyan discount box - Includes discount type label: "(Discount A)" or "(Discount B)" 3. **Remarks** (Row 2, Column 1) - Only appears when order has remarks - Gray, italic text - Common values: "MANUAL_PRICE" 4. **Price Source / Shipping Source** (Row 1, Column 2) - Conditional based on pricing method - Examples: - "Manual Entry" - "MEYER Included" - "Dropship: MEYER" - "Dropship: USAUTO" --- ## Data Flow and Calculations ### Pricing Breakdown (Row 1, Column 2) **Sale Price Calculation:** ``` Base Sale Price + Additional Charges = Total Sale Price Example: $332.95 + $0.00 = $332.95 ``` **Buy Price Calculation:** ``` Base Buy Price + Shipping + Handling - Credits = Total Buy Price Example: $309.14 + $0.00 + $0.00 - $12.37 = $309.14 ``` ### COGS Breakdown (Row 2, Column 2) **Total COGS Calculation:** ``` Our Buy Price + Commission & Fee + Payment Processor Fee + Supplier Shipping + Supplier Handling - Supplier Credits + Loss Amount = Total COGS ``` **COGS Percentage:** ``` (Total COGS / Sale Price) × 100 = COGS % Example: ($396.51 / $332.95) × 100 = 119.1% ``` ### Gross Profit & Margin (Row 2, Column 3) **Gross Margin (Dollar Amount):** ``` Sale Price - Total COGS = Gross Margin Example: $332.95 - $396.51 = -$56.71 ``` **Gross Profit (Percentage):** ``` ((Sale Price - Buy Price) / Sale Price) × 100 = Gross Profit % Example: (($332.95 - $309.14) / $332.95) × 100 = 7.14% Note: The formula shown in the UI is simplified and doesn't account for all COGS components, so there may be discrepancies between the displayed formula and actual profit calculations. ``` --- ## Animation and Transitions ### Expand/Collapse ```css .order-details { transition: max-height 0.3s ease-out; } ``` - Smooth expansion when row is clicked - Chevron icon rotates from down to up - Content slides into view --- ## Comparison: Left vs Right Columns | Left Column | Center Column | Right Column | |-------------|---------------|--------------| | **Row 1** | | | | Product metadata | Financial calculations | Fee breakdown | | Static information | Formulas with results | Color-coded boxes | | No special styling | Gray box background | Multiple colored boxes | | **Row 2** | | | | Customer data | COGS itemization | Profit summary | | Mixed formatting | List with totals | Color-coded values | | Includes source info | Includes separator | Includes button | --- ## Key Observations 1. **Information Hierarchy:** - Row 1: Transaction basics (what was sold, for how much, with what fees) - Row 2: Transaction analysis (to whom, cost breakdown, profitability) 2. **Visual Encoding:** - Yellow boxes = Percentages that increase costs (commissions, loss rates) - Red boxes = Fixed dollar costs (fees) - Cyan boxes = Discounts (decrease costs) - Green text = Positive profit - Red text = Negative profit/loss 3. **Data Source Transparency:** - Source info shows where prices came from (Manual Entry, Supplier API, etc.) - Fee Data Source indicates if fees are "Actual" or "Estimated" - Green "=" symbol indicates actual/verified data - Different symbols for estimated data 4. **Interactivity:** - Only one interactive element: "Update Prices" button - Button appears in profit summary section for easy access - Clicking opens modal with pricing edit form 5. **Responsive Design:** - Uses Bootstrap grid for automatic responsiveness - 3 columns on desktop, stacks on mobile - Maintains readability across screen sizes --- ## Implementation Notes for NEW Page To match this layout in the NEW profitability page, you need to: 1. **Create 2-row, 3-column grid** using Bootstrap `col-md-4` 2. **Implement colored box system:** - `.commission-box` - Yellow/Gold background - `.fee-box` - Red/Pink background - `.discount-box` - Cyan/Blue background - `.price-breakdown` - Light gray background 3. **Match typography:** - Headers: 12px bold - Fields: 11px with 3px bottom margin - Source info: 9px gray 4. **Color-code profit values:** - Positive: Green (#28a745) - Negative: Red (#dc3545) 5. **Add Update Prices button** with data attributes 6. **Implement dark mode** with all color overrides 7. **Maintain spacing:** - 10px margin between rows - 8px padding in boxes - 6px margin-bottom on boxes 8. **Add horizontal rules** before totals sections 9. **Include formulas** in small, italic, gray text 10. **Handle conditional elements** (Amazon costs, discounts, remarks) --- ## Sample HTML Structure ```html
Product Details

Item: [Description]

Pricing Breakdown
Fees & Commissions
Channel Commission: 12.00%
``` --- ## End of Analysis This document provides a complete reference for implementing the expanded row view in the NEW profitability page. All styling, layout, colors, spacing, and interactive elements are documented above.