# OLD Profitability Page - Expanded View Field Mapping

## Quick Reference: Where Each Field Appears

This document maps every data field to its location in the expanded view.

---

## ROW 1 (Top Row)

### COLUMN 1: Product Details

| Field | Label | Example Value | Notes |
|-------|-------|---------------|-------|
| Item Description | "Item:" | "Front Bumper Molding for Mercedes-Benz GLS450..." | Full product name |
| Item Number | "Item #:" | "971505" | Internal SKU |
| Partslink | "Partslink:" | "MB1095120" | Part number |
| Supplier | "Supplier:" | "USAuto TX" or "Meyer (+5% due to...)" | May include notes |

**Styling:**
- Font: 11px
- Labels: Bold
- Values: Normal weight
- Margin: 3px bottom on each paragraph

---

### COLUMN 2: Pricing Breakdown

| Section | Content | Example | Notes |
|---------|---------|---------|-------|
| **Sale Price** | Formula + Result | "$332.95 + $0.00 = **$332.95**" | Result in blue, 12px bold |
| **Buy Price** | Formula + Result | "$309.14 + $0.00 + $0.00 - $12.37 = **$309.14**" | Result in green, 12px bold |
| Price Source | Source info | "Price Source: Manual Entry" | 9px gray text |
| Shipping Source | Source info | "Shipping Source: Dropship: MEYER" | 9px gray text |

**Sale Price Formula:**
```
Base Sale Price + Additional Charges = Total
```

**Buy Price Formula:**
```
Base Buy + Shipping + Handling - Credits = Total
```

**Container Styling:**
- Background: #f8f9fa (light gray)
- Border-radius: 4px
- Padding: 8px

**Possible Price Sources:**
- "Manual Entry"
- "MEYER Included"
- "Supplier API"
- etc.

**Possible Shipping Sources:**
- "Manual Entry"
- "Dropship: MEYER"
- "Dropship: USAUTO"
- etc.

---

### COLUMN 3: Fees & Commissions

| Item | Type | Label | Example | Box Color |
|------|------|-------|---------|-----------|
| Channel Commission | % | "Channel Commission:" | "12.00%" | Yellow (commission-box) |
| Advertisement Fee | $ | "Advertisement Fee:" | "$13.46" | Red (fee-box) |
| Amazon Additional Cost | $ | "Amazon Additional Cost:" | "$0.28" | Red (fee-box) |
| Total Loss Rate | % | "Total Loss Rate:" | "10.20%" | Yellow (commission-box) |
| Category Discount | % | "Category Discount:" | "10.00%<br>(Discount A)" | Cyan (discount-box) |

**Order of Appearance:**
1. Channel Commission (commission-box)
2. Advertisement Fee (fee-box)
3. Amazon Additional Cost (fee-box) - CONDITIONAL
4. Total Loss Rate (commission-box)
5. Category Discount (discount-box) - CONDITIONAL

**Box Styles:**

**Commission Box (Yellow):**
- Background: #fff3cd
- Border: 1px solid #ffeaa7
- Padding: 6px
- Font: 11px

**Fee Box (Red):**
- Background: #f8d7da
- Border: 1px solid #f5c6cb
- Padding: 6px
- Font: 11px

**Discount Box (Cyan):**
- Background: #d1ecf1
- Border: 1px solid #bee5eb
- Padding: 6px
- Font: 11px
- May include sub-text: "(Discount A)" or "(Discount B)"

---

## ROW 2 (Bottom Row)
**Margin-top: 10px from Row 1**

### COLUMN 1: Customer Information

| Field | Label | Example Value | Notes |
|-------|-------|---------------|-------|
| Customer Name | "Name:" | "REBECCA BARRAGAN" | All caps usually |
| Address | "Address:" | "386 HARVEST LN, SANTA ROSA CA US, 95401-9065" | Full shipping address |
| Remarks | "Remarks:" | "MANUAL_PRICE" | Gray, italic - CONDITIONAL |
| Fee Data Source | "Fee Data Source:" | "= Actual" | Green, bold - shows data quality |

**Remarks:**
- Only appears when present
- Color: #6c757d (gray)
- Style: Italic
- Margin-top: 8px
- Common values: "MANUAL_PRICE", order notes, etc.

**Fee Data Source:**
- Margin-top: 8px
- Value color: #28a745 (green) for "Actual"
- Value: Bold
- Sub-text: Small, gray, italic
- Example sub-text: "Commission and fees are based on actual data"
- Symbol: "=" for Actual, "~" for Estimated

---

### COLUMN 2: COGS Breakdown

| Field | Label | Example | Type |
|-------|-------|---------|------|
| Buy Price | "Our Buy Price:" | "$309.14" | Base cost |
| Commission & Fee | "Commission & Fee:" | "$53.41" | Combined fees |
| Payment Fee | "Payment Processor Fee:" | "$0.00" | Credit card fees |
| Supplier Shipping | "Supplier Shipping:" | "$0.00" | Shipping cost from supplier |
| Supplier Handling | "Supplier Handling:" | "$0.00" | Handling fees |
| Supplier Credits | "Supplier Credits:" | "-$0.00" | Credits applied (negative) |
| Loss Amount | "Loss Amount (X.XX%):" | "$33.96" | Loss rate applied |
| **---** | **---** | **---** | **Horizontal Rule** |
| Total COGS | "Total COGS:" | "$396.51" | Sum of above |
| COGS Percentage | "COGS %:" | "119.1%" | (COGS / Sale Price) × 100 |

**Layout:**
- All fields: 11px
- Labels: Bold
- Values: Normal
- Margin-bottom: 3px per paragraph
- HR: margin 8px 0
- Totals appear below HR

**Loss Amount Label:**
- Includes percentage in the label itself
- Example: "Loss Amount (10.20%):"

---

### COLUMN 3: Gross Profit & Margin

| Field | Label | Example | Color |
|-------|-------|---------|-------|
| Gross Margin | "Gross Margin ($):" | "-$56.71" | Red (negative) or Green (positive) |
| Gross Profit | "Gross Profit (%):" | "-17.03%" | Red (negative) or Green (positive) |
| **---** | **---** | **---** | **Horizontal Rule** |
| Formula | (italic, gray) | "Formula: (Sales Price - Buy Price) / Sales Price × 100" | Explanatory text |
| Update Button | Button | "[Edit Icon] Update Prices" | Blue info button |

**Profit Value Colors:**
- **Positive:** #28a745 (green) in light mode, #5cb85c in dark mode
- **Negative:** #dc3545 (red) in light mode, #ff6b6b in dark mode
- Font-weight: Bold

**Formula Text:**
- Font-size: 10px
- Color: #6c757d (gray)
- Style: Italic (`<em>` tag)
- Margin-bottom: 3px

**Update Prices Button:**
- Class: `btn btn-sm btn-info update-prices-btn`
- Icon: `<i class="fa fa-edit"></i>`
- Text: "Update Prices"
- 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"`

---

## Conditional Fields Summary

These fields only appear under certain conditions:

| Field | Location | Condition | Notes |
|-------|----------|-----------|-------|
| Amazon Additional Cost | Row 1, Col 3 | Amazon orders with additional costs | Red fee-box |
| Category Discount | Row 1, Col 3 | Discount is applied | Cyan discount-box |
| Remarks | Row 2, Col 1 | Order has remarks/notes | Gray italic text |
| Price Source | Row 1, Col 2 | Always present | Shows pricing method |
| Shipping Source | Row 1, Col 2 | When applicable | Shows shipping method |

---

## Data Flow: How Fields Are Calculated

### Sale Price Calculation
```
Base Sale Price + Additional Charges = Total Sale Price
Example: $332.95 + $0.00 = $332.95
```

### Buy Price Calculation
```
Base Buy Price + Supplier Shipping + Supplier Handling - Supplier Credits = Total Buy Price
Example: $309.14 + $0.00 + $0.00 - $12.37 = $309.14
```

### Commission & Fee Calculation
```
(Sale Price × Channel Commission %) + Advertisement Fee + Amazon Additional Cost = Commission & Fee
Example: ($332.95 × 0.12) + $13.46 + $0.28 = $53.41
```

### Loss Amount Calculation
```
Buy Price × Loss Rate % = Loss Amount
Example: $309.14 × 0.1020 = $33.96
```

### Total COGS Calculation
```
Our Buy Price
+ Commission & Fee
+ Payment Processor Fee
+ Supplier Shipping
+ Supplier Handling
- Supplier Credits
+ Loss Amount
= Total COGS

Example:
$309.14 + $53.41 + $0.00 + $0.00 + $0.00 - $0.00 + $33.96 = $396.51
```

### COGS Percentage Calculation
```
(Total COGS / Sale Price) × 100 = COGS %
Example: ($396.51 / $332.95) × 100 = 119.1%
```

### Gross Margin (Dollar) Calculation
```
Sale Price - Total COGS = Gross Margin
Example: $332.95 - $396.51 = -$63.56
```

### Gross Profit (Percentage) Calculation
```
((Sale Price - Buy Price) / Sale Price) × 100 = Gross Profit %
Example: (($332.95 - $309.14) / $332.95) × 100 = 7.14%

Note: This is a simplified formula shown in the UI.
The actual profit calculation should account for total COGS.
```

---

## Color Coding Quick Reference

### Box Colors (Light Mode)

| Box Type | Background | Border | Used For |
|----------|-----------|--------|----------|
| Commission | #fff3cd (yellow) | #ffeaa7 | Percentages, rates |
| Fee | #f8d7da (red) | #f5c6cb | Dollar fees |
| Discount | #d1ecf1 (cyan) | #bee5eb | Discounts |
| Price Breakdown | #f8f9fa (gray) | none | Price containers |

### Box Colors (Dark Mode)

| Box Type | Background | Border | Notes |
|----------|-----------|--------|-------|
| Commission | #3a3a1a | #555 | Dark yellow |
| Fee | #3a1a1a | #555 | Dark red |
| Discount | #1a3a3a | #555 | Dark cyan |
| Price Breakdown | #252525 | none | Dark gray |

### Text Colors

| Value Type | Light Mode | Dark Mode | Used For |
|------------|-----------|-----------|----------|
| Positive Profit | #28a745 | #5cb85c | Positive margins/profits |
| Negative Profit | #dc3545 | #ff6b6b | Negative margins/losses |
| Price Highlight | #0d6e0d / #007bff | #5cb85c / #66b3ff | Sale/Buy prices |
| Muted Text | #6c757d | #b0b0b0 | Source info, formulas |
| Normal Text | #212529 | #e0e0e0 | Regular content |
| Strong Text | #000000 | #f0f0f0 | Bold labels |

---

## Implementation Checklist

When implementing the expanded view in the NEW page, ensure:

- [ ] 2-row, 3-column Bootstrap grid (`col-md-4`)
- [ ] Row 1: Product | Pricing | Fees
- [ ] Row 2: Customer | COGS | Profit (margin-top: 10px)
- [ ] All section headers: 12px bold, margin-bottom: 6px
- [ ] All field labels: 11px bold
- [ ] All field values: 11px normal
- [ ] Commission boxes: Yellow background (#fff3cd)
- [ ] Fee boxes: Red background (#f8d7da)
- [ ] Discount boxes: Cyan background (#d1ecf1)
- [ ] Price breakdown: Gray background (#f8f9fa)
- [ ] Source info: 9px gray text
- [ ] Positive profits: Green color (#28a745)
- [ ] Negative profits: Red color (#dc3545)
- [ ] Formula text: 10px italic gray
- [ ] Update button: btn-info with data attributes
- [ ] HR before totals: margin 8px 0
- [ ] Dark mode: All color overrides
- [ ] Conditional fields: Amazon cost, discount, remarks
- [ ] Animations: Smooth expand/collapse

---

## Field Order Reference

**Top Row Order (Left to Right):**
1. Product Details → 2. Pricing Breakdown → 3. Fees & Commissions

**Bottom Row Order (Left to Right):**
1. Customer Information → 2. COGS Breakdown → 3. Gross Profit & Margin

**Within Each Section (Top to Bottom):**

**Product Details:**
1. Item description
2. Item number
3. Partslink
4. Supplier

**Pricing Breakdown:**
1. Sale Price (with formula)
2. Buy Price (with formula)
3. Price Source
4. Shipping Source

**Fees & Commissions:**
1. Channel Commission (yellow)
2. Advertisement Fee (red)
3. Amazon Additional Cost (red, conditional)
4. Total Loss Rate (yellow)
5. Category Discount (cyan, conditional)

**Customer Information:**
1. Name
2. Address
3. Remarks (conditional)
4. Fee Data Source

**COGS Breakdown:**
1. Our Buy Price
2. Commission & Fee
3. Payment Processor Fee
4. Supplier Shipping
5. Supplier Handling
6. Supplier Credits
7. Loss Amount
8. --- (HR) ---
9. Total COGS
10. COGS %

**Gross Profit & Margin:**
1. Gross Margin ($)
2. Gross Profit (%)
3. --- (HR) ---
4. Formula (italic gray)
5. Update Prices button

---

## End of Field Mapping

This document provides complete field-by-field mapping for the expanded view.
Use this as a reference when building or troubleshooting the NEW page implementation.