# OLD PROFITABILITY PAGE - EXACT COLLAPSED ROW LAYOUT

## Analysis Date: 2025-11-02
## Source: /home/centralgoparts/public_html/profit-old-full.html
## Order Example: Order ID 230697 (#112-6957509-5203444)

---

## SUMMARY

The OLD profitability page uses a **card-based layout** with collapsed rows showing summary information. Each order is displayed in an `order-item-card` div with a collapsible `order-summary` section.

---

## EXACT FIELD STRUCTURE FROM LEFT TO RIGHT (COLLAPSED VIEW)

The collapsed row shows **6 main sections** arranged horizontally:

### 1. **Order / Date**
   - Label: "Order / Date"
   - Value: Order number (e.g., "#112-6957509-5203444")
   - Subvalue: Date (e.g., "Aug 31, 2025")
   - May include icons for flags/indicators

### 2. **Product / Category**
   - Label: "Product / Category"
   - Value: Part number (e.g., "MB1095120")
   - Subvalue: Category name (e.g., "Bumper Trim")

### 3. **Supplier**
   - Label: "Supplier"
   - Value: Supplier name (e.g., "USAuto TX")

### 4. **Channel / Customer**
   - Label: "Channel / Customer"
   - Value: Sales channel (e.g., "Amazon")
   - Subvalue: Customer name (e.g., "REBECCA BARRAGAN")

### 5. **Financial Summary** (THE CRITICAL SECTION)
   - This section contains **6 financial metrics** displayed in a grid:

   **EXACT METRICS SHOWN:**

   1. **Sale**
      - Label: "Sale"
      - Value: Dollar amount (e.g., "$332.95")

   2. **Cost**
      - Label: "Cost"
      - Value: Dollar amount (e.g., "$309.14")

   3. **COGS**
      - Label: "COGS"
      - Value: Dollar amount (e.g., "$396.51")

   4. **COGS %**
      - Label: "COGS %"
      - Value: Percentage (e.g., "119.1%")

   5. **Gross Margin**
      - Label: "Gross Margin"
      - Value: Dollar amount with color coding (e.g., "$56.71" in red for negative)

   6. **Gross Profit**
      - Label: "Gross Profit"
      - Value: Percentage with color coding (e.g., "-17.0%" in red for negative)

### 6. **Badges**
   - Right-aligned badges for order status/type
   - Examples: "Own Stock", "High Confidence", etc.

---

## FIELD BREAKDOWN BY SECTION

### Financial Metrics Section (Lines 37-67 in HTML)

```html
<div class="summary-item financial">
    <div class="financial-summary">
        <div class="financial-metric">
            <div class="label">Sale</div>
            <div class="value">$332.95</div>
        </div>
        <div class="financial-metric">
            <div class="label">Cost</div>
            <div class="value">$309.14</div>
        </div>
        <div class="financial-metric">
            <div class="label">COGS</div>
            <div class="value">$396.51</div>
        </div>
        <div class="financial-metric">
            <div class="label">COGS %</div>
            <div class="value">119.1%</div>
        </div>
        <div class="financial-metric">
            <div class="label">Gross Margin</div>
            <div class="value" style="color: #dc3545">
                $56.71
            </div>
        </div>
        <div class="financial-metric">
            <div class="label">Gross Profit</div>
            <div class="value" style="color: #dc3545">
                -17.0%
            </div>
        </div>
    </div>
</div>
```

---

## KEY OBSERVATIONS

### 1. **Shows Standard Values ONLY (Not Dual Values)**
   - **ANSWER: The OLD page shows ONLY ONE set of profit values**
   - There is NO "Standard" vs "Calculated" distinction in the collapsed view
   - Each metric shows a single value only

### 2. **Exact Labels Used:**
   - "Sale" (not "Sale Price" or "Sales")
   - "Cost" (not "Buy Price")
   - "COGS" (Cost of Goods Sold - dollar amount)
   - "COGS %" (COGS as percentage)
   - "Gross Margin" (dollar amount)
   - "Gross Profit" (percentage)

### 3. **What Each Field Shows:**
   - **Sale**: Single dollar value
   - **Cost**: Single dollar value
   - **COGS**: Single dollar value
   - **COGS %**: Single percentage value
   - **Gross Margin**: Single dollar value (with color coding: red for negative, green for positive)
   - **Gross Profit**: Single percentage value (with color coding: red for negative, green for positive)

### 4. **Layout Pattern:**
   - All 6 financial metrics are displayed in a grid layout
   - Each metric has a label on top and value below
   - Values are color-coded based on profitability (positive/negative)
   - The entire financial section is contained in one `financial-summary` div

### 5. **NO Dual Display in Collapsed View:**
   - The collapsed view does NOT show "Standard" and "Calculated" side by side
   - It shows SINGLE values only
   - The expanded/detailed view may show more breakdown, but collapsed is simple

---

## CRITICAL TAKEAWAY FOR NEW PAGE

**The OLD page's collapsed row shows 6 simple financial metrics with SINGLE values each:**

1. Sale: $XXX.XX
2. Cost: $XXX.XX
3. COGS: $XXX.XX
4. COGS %: XX.X%
5. Gross Margin: $XXX.XX (colored)
6. Gross Profit: XX.X% (colored)

**NO "Standard" vs "Calculated" labels or dual values in the collapsed view.**

The financial section uses a grid layout (`.financial-summary`) containing 6 `.financial-metric` divs, each with a `.label` and `.value`.

---

## HTML STRUCTURE PATTERN

```
order-item-card
└── order-summary
    └── order-summary-grid
        ├── summary-item (Order/Date)
        ├── summary-item (Product/Category)
        ├── summary-item (Supplier)
        ├── summary-item (Channel/Customer)
        ├── summary-item financial
        │   └── financial-summary
        │       ├── financial-metric (Sale)
        │       ├── financial-metric (Cost)
        │       ├── financial-metric (COGS)
        │       ├── financial-metric (COGS %)
        │       ├── financial-metric (Gross Margin)
        │       └── financial-metric (Gross Profit)
        └── summary-item (Badges)
```

---

## COLOR CODING

- **Negative values**: `color: #dc3545` (red)
- **Positive values**: Standard text color or green
- Applied to:
  - Gross Margin dollar amounts
  - Gross Profit percentages

---

## EXPANDED VIEW (FOR REFERENCE)

When the row is expanded, it shows:
- Product Details
- Pricing Breakdown
- Fees & Commissions
- Customer Information
- COGS Breakdown
- Gross Profit & Margin details

But in the COLLAPSED view, only the 6 financial summary metrics are shown.