# OLD PROFITABILITY PAGE - ANALYSIS SUMMARY

**Analysis Completed:** November 2, 2025
**Analyst:** Claude Code
**Source:** Existing HTML snapshot from profit-old-full.html

---

## EXECUTIVE SUMMARY

I have completed a detailed analysis of the OLD profitability page's collapsed order row structure. The analysis was performed by examining the existing HTML snapshot since the live ops.go-parts.com site currently has a login controller error.

---

## KEY FINDINGS

### CRITICAL ANSWER: Does the OLD page show Standard AND Calculated values?

**NO** - The OLD page shows **ONLY ONE set of values** in the collapsed row.

- There is NO "Standard" label
- There is NO "Calculated" label
- Each metric displays a **single value only**
- The collapsed view is **simple and minimal**

---

## EXACT FIELD STRUCTURE

The collapsed row contains **6 financial metrics** displayed horizontally in a grid:

1. **Sale** - Single dollar amount (e.g., `$332.95`)
2. **Cost** - Single dollar amount (e.g., `$309.14`)
3. **COGS** - Single dollar amount (e.g., `$396.51`)
4. **COGS %** - Single percentage (e.g., `119.1%`)
5. **Gross Margin** - Single dollar amount with color coding (e.g., `$56.71` in red)
6. **Gross Profit** - Single percentage with color coding (e.g., `-17.0%` in red)

---

## LABELS USED

| Metric | Exact Label | Value Type | Color Coded? |
|--------|-------------|------------|--------------|
| 1 | `Sale` | Currency | No |
| 2 | `Cost` | Currency | No |
| 3 | `COGS` | Currency | No |
| 4 | `COGS %` | Percentage | No |
| 5 | `Gross Margin` | Currency | Yes (red if negative) |
| 6 | `Gross Profit` | Percentage | Yes (red if negative) |

---

## LAYOUT STRUCTURE

```
┌────────────────────────────────────────────────────────────┐
│ ORDER SUMMARY (Collapsed Row)                              │
├─────────┬──────────┬─────────┬──────────┬────────────────┤
│Order/   │Product/  │Supplier │Channel/  │Financial       │
│Date     │Category  │         │Customer  │Summary (6)     │
└─────────┴──────────┴─────────┴──────────┴────────────────┘
```

Financial Summary expands to show 6 metrics in a grid layout:

```
┌───────┬───────┬───────┬────────┬──────────┬──────────┐
│ Sale  │ Cost  │ COGS  │ COGS % │  Gross   │  Gross   │
│       │       │       │        │  Margin  │  Profit  │
├───────┼───────┼───────┼────────┼──────────┼──────────┤
│$332.95│$309.14│$396.51│ 119.1% │  $56.71  │  -17.0%  │
│       │       │       │        │  (RED)   │  (RED)   │
└───────┴───────┴───────┴────────┴──────────┴──────────┘
```

---

## HTML STRUCTURE

```html
<div class="order-item-card">
  <div class="order-summary">
    <div class="order-summary-grid">
      <!-- Other sections: Order/Date, Product, Supplier, Channel -->

      <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>
    </div>
  </div>
</div>
```

---

## COLOR CODING

- **Negative values:** `#dc3545` (Bootstrap danger red)
- **Positive values:** Default text color
- Applied to:
  - Gross Margin (dollar amount)
  - Gross Profit (percentage)

---

## FILES CREATED

This analysis has generated the following files:

1. **OLD_PAGE_EXACT_LAYOUT.md** (6.3 KB)
   - Detailed breakdown of the collapsed row structure
   - HTML examples
   - Field-by-field analysis

2. **old-page-exact-data.json** (4.7 KB)
   - Structured JSON data of the layout
   - Complete field definitions
   - Example order data

3. **OLD_PAGE_VISUAL_GUIDE.txt** (5.6 KB)
   - ASCII art visual representation
   - Quick reference guide
   - Comparison notes

4. **old-page-exact-collapsed-row.png** (18 KB)
   - Screenshot showing actual collapsed rows
   - Visual reference for styling

5. **ANALYSIS_SUMMARY_OLD_PAGE.md** (This file)
   - Executive summary
   - Key findings
   - Quick reference

---

## RECOMMENDATION FOR NEW PAGE

To match the OLD page's collapsed row exactly, your NEW page should:

✅ **DO:**
- Show 6 financial metrics in a grid
- Use exact same labels: "Sale", "Cost", "COGS", "COGS %", "Gross Margin", "Gross Profit"
- Display single values only (no dual display)
- Apply color coding to Gross Margin and Gross Profit when negative
- Use label-above-value layout for each metric

❌ **DON'T:**
- Show "Standard" and "Calculated" labels side by side
- Display multiple values per metric in collapsed view
- Use different label text
- Apply color coding to all metrics (only Gross Margin/Profit)

---

## TECHNICAL DETAILS

### CSS Classes
- Main container: `.order-item-card`
- Summary row: `.order-summary`
- Grid container: `.order-summary-grid`
- Financial section: `.summary-item.financial`
- Metrics container: `.financial-summary`
- Individual metric: `.financial-metric`
- Metric label: `.label`
- Metric value: `.value`

### Value Formatting
- Currency: `$XXX.XX` (always 2 decimal places)
- Percentage: `XX.X%` (1 decimal place)
- Negative indicator: `-` prefix for both currency and percentage

---

## EXAMPLE ORDER (Real Data)

**Order ID:** 230697
**Order Number:** #112-6957509-5203444
**Date:** Aug 31, 2025
**Product:** MB1095120 (Bumper Trim)
**Supplier:** USAuto TX
**Channel:** Amazon
**Customer:** REBECCA BARRAGAN

**Financial Metrics:**
- Sale: $332.95
- Cost: $309.14
- COGS: $396.51
- COGS %: 119.1%
- Gross Margin: -$56.71 (shown in red)
- Gross Profit: -17.0% (shown in red)

---

## NOTES

1. The analysis was performed on static HTML because the live site has a login controller error
2. The HTML snapshot is from a working version of the old profitability page
3. All measurements and examples are based on actual production data
4. The collapsed view is intentionally simple - detailed breakdown is only shown when expanded

---

## CONCLUSION

The OLD profitability page uses a **simple, single-value display** for collapsed rows. There is **no dual "Standard vs Calculated"** display in the collapsed view. To match the OLD page exactly, the NEW page should display only one set of values per metric in the collapsed row.

If the NEW page currently shows both Standard and Calculated values side by side in the collapsed view, this is **different from the OLD page** and should be adjusted to match the simpler, single-value layout documented here.