# Order Rows Analysis Report
Generated: 2025-10-31T15:25:34.362Z

## Executive Summary

This report provides a comprehensive comparison of order row displays between the old and new profitability pages.

### Screenshots Captured
- New Page: 4 screenshots
- Old Page: 3 screenshots

### Data Extracted
- New Page: 3 collapsed rows, 2 expanded rows
- Old Page: 3 collapsed rows, 2 expanded rows

### Issues Found
Total issues: 4
- Critical: 1
- High: 2
- Medium: 1
- Low: 0

## Field-by-Field Comparison

### Collapsed Row Fields

#### New Page Fields
- orderNumber
- date
- customer

#### Old Page Fields
- orderNumber
- date
- customer

### Expanded Row Fields

#### New Page Expanded Data

- Total fields: 0
- Cost items: 0
- Revenue items: 0
- Credit items: 0
- Calculations: 0


#### Old Page Expanded Data

- Total fields: 0
- Cost items: 0
- Revenue items: 0
- Credit items: 0
- Calculations: 0


## Styling Analysis

### New Page Colors (Light Mode)
```
Backgrounds: [
  "rgb(243, 244, 246)",
  "rgba(0, 0, 0, 0)"
]
Text Colors: [
  "rgb(9, 9, 11)"
]
Badge Colors: 764 unique badges
```

### New Page Colors (Dark Mode)
```
Backgrounds: [
  "rgba(0, 0, 0, 0)"
]
Text Colors: [
  "rgb(255, 255, 255)"
]
```

### Old Page Colors (Light Mode)
```
Backgrounds: [
  "rgb(245, 245, 245)",
  "rgba(0, 0, 0, 0)"
]
Text Colors: [
  "rgb(85, 85, 85)",
  "rgb(118, 118, 118)"
]
Badge Colors: 61 unique badges
```

### Layout Measurements

#### New Page Layout
```json
{}
```

#### Old Page Layout
```json
{
  "rowHeight": "75.5px",
  "padding": "0px",
  "margin": "0px",
  "fontSize": "13px",
  "lineHeight": "18.5714px",
  "borderWidth": "0px",
  "columnCount": 12
}
```

## Issues List


### Issue 1 [HIGH]
- **Page**: new
- **Issue**: Low contrast in dark mode
- **Details**: {
  "element": "SPAN",
  "className": "fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium ring-1 ring-inset px-1.5 min-w-[theme(spacing.5)] py-0.5 fi-color-gray bg-gray-50 text-gray-600 ring-gray-600/10 dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20",
  "text": "Website",
  "backgroundColor": "rgba(161, 161, 170, 0.1)",
  "color": "rgb(161, 161, 170)",
  "contrast": 0
}


### Issue 2 [HIGH]
- **Page**: new
- **Issue**: Low contrast in dark mode
- **Details**: {
  "element": "SPAN",
  "className": "fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium ring-1 ring-inset px-2 min-w-[theme(spacing.6)] py-1 fi-color-custom bg-custom-50 text-custom-600 ring-custom-600/10 dark:bg-custom-400/10 dark:text-custom-400 dark:ring-custom-400/30 fi-color-info",
  "text": "Ordered",
  "backgroundColor": "rgba(56, 189, 248, 0.1)",
  "color": "rgb(56, 189, 248)",
  "contrast": 0
}


### Issue 3 [CRITICAL]
- **Page**: new
- **Issue**: Page analysis failed
- **Details**: expandInfo is not defined


### Issue 4 [MEDIUM]
- **Page**: old
- **Issue**: Dark mode not available
- **Details**: No dark mode toggle found


## Data Accuracy Findings

No matching orders found for comparison

## Top 5 Critical Fixes Needed

1. **[HIGH]** Low contrast in dark mode (new page)
2. **[HIGH]** Low contrast in dark mode (new page)
3. **[CRITICAL]** Page analysis failed (new page)

## CSS Fixes

### Dark Mode Contrast Issues

```css
/* Fix low contrast text in dark mode */
.dark tbody tr,
.dark [role="row"] {
  /* Ensure sufficient contrast */
  color: rgb(229, 231, 235); /* light gray text */
}

.dark tbody tr td,
.dark [role="row"] td {
  border-color: rgb(55, 65, 81); /* visible borders */
}

/* Fix badge visibility */
.dark .badge,
.dark [class*="badge"] {
  background-color: rgb(55, 65, 81);
  color: rgb(229, 231, 235);
  border: 1px solid rgb(75, 85, 99);
}
```


## Recommendations (Prioritized)

1. **High Priority**: Fix dark mode contrast issues
   - Ensure all text has sufficient contrast against backgrounds
   - Add border colors that work in both light and dark modes

2. **High Priority**: Standardize field names between old and new
   - Ensure data accuracy and consistency
   - Make migration easier for users

3. **Medium Priority**: Add missing expand functionality
   - If old page has expandable rows but new doesn't, implement it

4. **Medium Priority**: Match color coding system
   - Ensure profit/loss indicators use same colors
   - Maintain visual consistency with old system

5. **Low Priority**: Layout refinements
   - Match spacing and sizing to old system if preferred
   - Ensure responsive behavior

## Files Created

- /home/centralgoparts/public_html/new-orders-light-collapsed.png
- /home/centralgoparts/public_html/new-orders-light-expanded-1.png
- /home/centralgoparts/public_html/new-orders-light-expanded-2.png
- /home/centralgoparts/public_html/new-orders-dark-collapsed.png
- /home/centralgoparts/public_html/old-orders-light-collapsed.png
- /home/centralgoparts/public_html/old-orders-light-expanded-1.png
- /home/centralgoparts/public_html/old-orders-light-expanded-2.png
- /home/centralgoparts/public_html/new-order-row-collapsed.html
- /home/centralgoparts/public_html/new-order-row-expanded.html
- /home/centralgoparts/public_html/old-order-row-collapsed.html
- /home/centralgoparts/public_html/old-order-row-expanded.html
- /home/centralgoparts/public_html/order-rows-comparison-data.json
- /home/centralgoparts/public_html/ORDER_ROWS_ANALYSIS_REPORT.md
- /home/centralgoparts/public_html/analyze-order-rows.cjs

## Limitations Encountered

- Page analysis failed