# Profitability Page Styling Analysis Report

**Date:** October 31, 2025
**Analysis Tool:** Puppeteer (Automated Browser Testing)
**Pages Analyzed:** New Profitability Page (central.go-parts.com)

---

## Executive Summary

A comprehensive styling analysis was conducted on the new profitability page at `central.go-parts.com/profitability` in both light and dark modes. The analysis identified multiple styling inconsistencies and issues, particularly in dark mode where several components do not properly respond to theme changes.

---

## Screenshots

### New Page - Light Mode
![New Page Light Mode](new-page-light-final.png)
**File:** `/home/centralgoparts/public_html/new-page-light-final.png`

### New Page - Dark Mode
![New Page Dark Mode](new-page-dark-final.png)
**File:** `/home/centralgoparts/public_html/new-page-dark-final.png`

---

## Analysis Findings

### 1. CRITICAL ISSUES (High Priority)

#### 1.1 Period Statistics Section - Dark Mode Background Issue
**Severity:** CRITICAL
**Location:** `.summary-stats` class

**Problem:**
- **Light Mode:** Background is correctly white (`rgb(255, 255, 255)`)
- **Dark Mode:** Background changes to `rgb(31, 41, 55)` which is too light for dark mode
- **Expected:** Should use a darker background like `rgb(24, 24, 27)` or `rgb(9, 9, 11)` to match the page body

**Current Styles:**
```css
/* Light Mode */
.summary-stats {
    background-color: rgb(255, 255, 255);
    color: rgb(9, 9, 11);
    padding: 12px 20px;
    border-radius: 8px;
}

/* Dark Mode (CURRENT - INCORRECT) */
.summary-stats {
    background-color: rgb(31, 41, 55);  /* Too light! */
    color: rgb(229, 231, 235);
}
```

**Recommended Fix:**
```css
.summary-stats {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Add dark mode support */
.dark .summary-stats {
    background: rgb(24, 24, 27);  /* Match nav/dropdown dark background */
    color: rgb(229, 231, 235);
    box-shadow: 0 1px 3px rgba(255,255,255,0.05);
}
```

---

#### 1.2 Order Item Cards - Inconsistent Dark Mode Styling
**Severity:** HIGH
**Location:** `.order-item-card` class

**Problem:**
- **Negative Profit Cards (Light):** `rgb(255, 235, 238)` - Pinkish background
- **Negative Profit Cards (Dark):** `rgb(58, 26, 26)` - Too dark, low contrast
- **Positive Profit Cards (Light):** `rgb(255, 255, 255)` - White
- **Positive Profit Cards (Dark):** `rgb(31, 41, 55)` - Same as Period Statistics (inconsistent)

**Recommended Fix:**
```css
/* Light Mode */
.order-item-card {
    background: rgb(255, 255, 255);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px 0px;
}

.order-item-card.negative-profit {
    background: rgb(255, 235, 238);  /* Light pink */
}

.order-item-card.positive-profit {
    background: rgb(255, 255, 255);  /* White */
}

/* Dark Mode */
.dark .order-item-card {
    background: rgb(39, 39, 42);  /* zinc-800 */
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
}

.dark .order-item-card.negative-profit {
    background: rgb(76, 29, 29);  /* Darker red but with better contrast */
    border: 1px solid rgb(127, 29, 29);  /* Add subtle border for definition */
}

.dark .order-item-card.positive-profit {
    background: rgb(39, 39, 42);  /* zinc-800 */
}
```

---

#### 1.3 Modal Headings - Inconsistent Dark Mode Color
**Severity:** MEDIUM
**Location:** `.modal-title` (H2 elements)

**Problem:**
- The "Add Notes" modal title shows:
  - **Light Mode:** `rgb(31, 41, 55)` (gray-800)
  - **Dark Mode:** `rgb(243, 244, 246)` (gray-100)
- This is correct behavior BUT it's using a different color scheme than other headings

**Current:**
```css
.modal-title {
    color: rgb(31, 41, 55);  /* Light mode */
    font-size: 18px;
    font-weight: 400;  /* Too light for a heading! */
}
```

**Recommended Fix:**
```css
.modal-title {
    color: rgb(31, 41, 55);
    font-size: 18px;
    font-weight: 600;  /* Increase weight for better hierarchy */
}

.dark .modal-title {
    color: rgb(243, 244, 246);
}
```

---

### 2. MODERATE ISSUES (Medium Priority)

#### 2.1 Filter Section Missing Dark Mode Styles
**Severity:** MEDIUM
**Location:** `.filter-section`, `.filter-group`

**Problem:**
Based on the blade file analysis, the filter section uses hardcoded light colors:
- `.filter-section`: `background: #f8f9fa` (no dark mode variant)
- `.filter-group`: `background: white` (no dark mode variant)
- `.filter-group`: `border: 1px solid #e9ecef` (no dark mode variant)

**Recommended Fix:**
```css
.filter-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.dark .filter-section {
    background: rgb(24, 24, 27);  /* zinc-900 */
}

.filter-group {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}

.dark .filter-group {
    background: rgb(39, 39, 42);  /* zinc-800 */
    border: 1px solid rgb(63, 63, 70);  /* zinc-700 */
}

.filter-group h6 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #495057;
    font-weight: 600;
    font-size: 14px;
}

.dark .filter-group h6 {
    color: rgb(229, 231, 235);  /* gray-200 */
}

.filter-label {
    font-weight: 500;
    color: #6c757d;
    font-size: 13px;
    display: block;
    margin-bottom: 5px;
}

.dark .filter-label {
    color: rgb(161, 161, 170);  /* zinc-400 */
}
```

---

#### 2.2 Stat Group Background Issues
**Severity:** MEDIUM
**Location:** `.stat-group` class

**Problem:**
The stat group uses `background: #f8f9fa` and `border: 1px solid #e9ecef` with no dark mode variants.

**Recommended Fix:**
```css
.stat-group {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
    text-align: center;
}

.dark .stat-group {
    background: rgb(39, 39, 42);  /* zinc-800 */
    border: 1px solid rgb(63, 63, 70);  /* zinc-700 */
}

.stat-group-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

.dark .stat-group-title {
    color: rgb(161, 161, 170);  /* zinc-400 */
}
```

---

#### 2.3 Date Preset Buttons - No Dark Mode Support
**Severity:** MEDIUM
**Location:** `.date-preset` class

**Problem:**
Date preset buttons are hardcoded with light colors:
- Background: `#fff`
- Border: `#ced4da`
- Hover: `#e9ecef`
- Active: `#007bff` with white text

**Recommended Fix:**
```css
.date-preset {
    flex: 1;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.dark .date-preset {
    background: rgb(39, 39, 42);  /* zinc-800 */
    border: 1px solid rgb(63, 63, 70);  /* zinc-700 */
    color: rgb(229, 231, 235);
}

.date-preset:hover {
    background-color: #e9ecef;
}

.dark .date-preset:hover {
    background-color: rgb(63, 63, 70);  /* zinc-700 */
}

.date-preset.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.dark .date-preset.active {
    background-color: rgb(59, 130, 246);  /* blue-500 */
    color: white;
    border-color: rgb(59, 130, 246);
}
```

---

#### 2.4 Filter Input Fields - Missing Dark Mode Styles
**Severity:** MEDIUM
**Location:** `.filter-input` class

**Problem:**
Input fields have no dark mode styling:
- Border: `1px solid #d1d5db`
- Focus border: `#3b82f6`
- Focus shadow: `rgba(59, 130, 246, 0.1)`

**Recommended Fix:**
```css
.filter-input, .filter-input select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
    width: 100%;
}

.dark .filter-input,
.dark .filter-input select {
    background: rgb(39, 39, 42);  /* zinc-800 */
    border: 1px solid rgb(63, 63, 70);  /* zinc-700 */
    color: rgb(229, 231, 235);
}

.filter-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dark .filter-input:focus {
    border-color: rgb(59, 130, 246);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
```

---

### 3. MINOR ISSUES (Low Priority)

#### 3.1 Inconsistent Box Shadow Opacity
**Severity:** LOW
**Location:** Various elements

**Problem:**
Different elements use inconsistent shadow opacity values:
- Summary stats: `rgba(0,0,0,0.1)`
- Order cards: `rgba(0, 0, 0, 0.08)`
- Nav: `rgba(0, 0, 0, 0.05)`

**Recommendation:**
Standardize shadow values using a design system:
```css
/* Light mode shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

/* Dark mode shadows */
.dark {
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}
```

---

#### 3.2 Toggle Advanced Filters Link
**Severity:** LOW
**Location:** `.toggle-advanced` class

**Problem:**
Uses hardcoded `color: #007bff` with no dark mode variant.

**Recommended Fix:**
```css
.toggle-advanced {
    cursor: pointer;
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    float: right;
}

.dark .toggle-advanced {
    color: rgb(96, 165, 250);  /* blue-400 */
}

.toggle-advanced:hover {
    text-decoration: underline;
}
```

---

#### 3.3 Filter Actions Border
**Severity:** LOW
**Location:** `.filter-actions` class

**Problem:**
Border uses `1px solid #e9ecef` with no dark mode support.

**Recommended Fix:**
```css
.filter-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.dark .filter-actions {
    border-top: 1px solid rgb(63, 63, 70);  /* zinc-700 */
}
```

---

## Color Palette Reference

### Light Mode Colors (Current)
- **Body Background:** `rgb(255, 255, 255)` - White
- **Text:** `rgb(9, 9, 11)` - Near black
- **Summary Stats Background:** `rgb(255, 255, 255)` - White
- **Negative Profit Cards:** `rgb(255, 235, 238)` - Light pink
- **Positive Profit Cards:** `rgb(255, 255, 255)` - White

### Dark Mode Colors (Current)
- **Body Background:** `rgb(9, 9, 11)` - Near black (zinc-950)
- **Text:** `rgb(255, 255, 255)` - White
- **Summary Stats Background:** `rgb(31, 41, 55)` - Gray-800 (PROBLEMATIC)
- **Negative Profit Cards:** `rgb(58, 26, 26)` - Dark red (TOO DARK)
- **Positive Profit Cards:** `rgb(31, 41, 55)` - Gray-800

### Recommended Dark Mode Colors
- **Body Background:** `rgb(9, 9, 11)` - zinc-950 (keep)
- **Primary Card Background:** `rgb(24, 24, 27)` - zinc-900
- **Secondary Card Background:** `rgb(39, 39, 42)` - zinc-800
- **Border Color:** `rgb(63, 63, 70)` - zinc-700
- **Text Primary:** `rgb(255, 255, 255)` - white
- **Text Secondary:** `rgb(229, 231, 235)` - gray-200
- **Text Muted:** `rgb(161, 161, 170)` - zinc-400
- **Negative Profit Background:** `rgb(76, 29, 29)` - dark-red-900 with better contrast
- **Negative Profit Border:** `rgb(127, 29, 29)` - dark-red-800

---

## Implementation Priority

### Phase 1 (Immediate - Critical Issues)
1. Fix Period Statistics dark mode background (`.summary-stats`)
2. Fix Order Item Cards dark mode styling (`.order-item-card`)
3. Add dark mode styles to modal headings (`.modal-title`)

### Phase 2 (Short Term - Moderate Issues)
4. Add dark mode styles to filter section (`.filter-section`, `.filter-group`)
5. Add dark mode styles to stat groups (`.stat-group`)
6. Add dark mode styles to date preset buttons (`.date-preset`)
7. Add dark mode styles to filter inputs (`.filter-input`)

### Phase 3 (Long Term - Minor Issues)
8. Standardize box shadow values
9. Fix toggle advanced filters link color
10. Fix filter actions border color

---

## Code Changes Required

### File: `/home/centralgoparts/public_html/resources/views/filament/pages/profitability.blade.php`

Add the following dark mode CSS rules to the `<style>` section:

```css
/* ========================================
   DARK MODE STYLES
   ======================================== */

/* Period Statistics - CRITICAL FIX */
.dark .summary-stats {
    background: rgb(24, 24, 27);
    color: rgb(229, 231, 235);
    box-shadow: 0 1px 3px rgba(255,255,255,0.05);
}

/* Stat Groups */
.dark .stat-group {
    background: rgb(39, 39, 42);
    border: 1px solid rgb(63, 63, 70);
}

.dark .stat-group-title {
    color: rgb(161, 161, 170);
}

/* Order Item Cards - CRITICAL FIX */
.dark .order-item-card {
    background: rgb(39, 39, 42);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
}

.dark .order-item-card.negative-profit {
    background: rgb(76, 29, 29);
    border: 1px solid rgb(127, 29, 29);
}

.dark .order-item-card.positive-profit {
    background: rgb(39, 39, 42);
}

/* Modal Headings */
.modal-title {
    font-weight: 600;  /* Increase from 400 */
}

.dark .modal-title {
    color: rgb(243, 244, 246);
}

/* Filter Section */
.dark .filter-section {
    background: rgb(24, 24, 27);
}

.dark .filter-group {
    background: rgb(39, 39, 42);
    border: 1px solid rgb(63, 63, 70);
}

.dark .filter-group h6 {
    color: rgb(229, 231, 235);
}

.dark .filter-label {
    color: rgb(161, 161, 170);
}

/* Filter Inputs */
.dark .filter-input,
.dark .filter-input select {
    background: rgb(39, 39, 42);
    border: 1px solid rgb(63, 63, 70);
    color: rgb(229, 231, 235);
}

.dark .filter-input:focus {
    border-color: rgb(59, 130, 246);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Date Presets */
.dark .date-preset {
    background: rgb(39, 39, 42);
    border: 1px solid rgb(63, 63, 70);
    color: rgb(229, 231, 235);
}

.dark .date-preset:hover {
    background-color: rgb(63, 63, 70);
}

.dark .date-preset.active {
    background-color: rgb(59, 130, 246);
    color: white;
    border-color: rgb(59, 130, 246);
}

/* Toggle Advanced */
.dark .toggle-advanced {
    color: rgb(96, 165, 250);
}

/* Filter Actions */
.dark .filter-actions {
    border-top: 1px solid rgb(63, 63, 70);
}
```

---

## Testing Checklist

After implementing the fixes, test the following:

- [ ] Period Statistics section has proper dark background in dark mode
- [ ] Period Statistics text is readable in dark mode
- [ ] Order item cards have consistent styling in dark mode
- [ ] Negative profit cards have enough contrast in dark mode
- [ ] Positive profit cards have proper background in dark mode
- [ ] Filter section has dark mode styling
- [ ] Filter groups have dark mode styling
- [ ] Filter labels are readable in dark mode
- [ ] Input fields have proper dark mode styling
- [ ] Input fields focus state works in dark mode
- [ ] Date preset buttons have dark mode styling
- [ ] Date preset hover state works in dark mode
- [ ] Date preset active state works in dark mode
- [ ] Modal headings have proper weight and color
- [ ] Toggle advanced link has proper color in dark mode
- [ ] Filter actions border is visible in dark mode
- [ ] All text is readable in both modes
- [ ] No hardcoded light colors remain visible in dark mode

---

## Comparison with Filament Default Theme

The new page uses Filament's default theme which provides:
- **Nav Background (Light):** `rgb(255, 255, 255)`
- **Nav Background (Dark):** `rgb(24, 24, 27)` - This should be the standard for all primary cards
- **Dropdown Background (Light):** `rgb(255, 255, 255)`
- **Dropdown Background (Dark):** `rgb(24, 24, 27)`

**Recommendation:** Align all primary card backgrounds (Period Statistics, modals) with Filament's nav/dropdown standard of `rgb(24, 24, 27)` in dark mode.

---

## Additional Recommendations

### 1. Use CSS Variables
Consider defining dark mode colors as CSS variables for easier maintenance:

```css
:root {
    --bg-primary-light: rgb(255, 255, 255);
    --bg-secondary-light: rgb(248, 249, 250);
    --text-primary-light: rgb(9, 9, 11);
    --border-light: rgb(228, 228, 231);
}

.dark {
    --bg-primary: rgb(24, 24, 27);
    --bg-secondary: rgb(39, 39, 42);
    --text-primary: rgb(255, 255, 255);
    --text-secondary: rgb(229, 231, 235);
    --border: rgb(63, 63, 70);
}
```

### 2. Accessibility Considerations
- Ensure all text has sufficient contrast (WCAG AA minimum 4.5:1)
- Test with screen readers
- Ensure focus states are visible in both modes
- Test keyboard navigation

### 3. Browser Testing
Test the fixes in:
- Chrome/Edge
- Firefox
- Safari
- Mobile browsers

---

## Summary Statistics

**Total Issues Found:** 13
**Critical Issues:** 3
**Moderate Issues:** 5
**Minor Issues:** 5

**Files Requiring Changes:** 1
- `/home/centralgoparts/public_html/resources/views/filament/pages/profitability.blade.php`

**Estimated Time to Fix:**
- Critical Issues: 1-2 hours
- All Issues: 3-4 hours

---

## Conclusion

The new profitability page has good structure and follows Filament's design patterns in light mode, but requires comprehensive dark mode styling additions. The most critical issues are:

1. Period Statistics section using incorrect dark mode background
2. Order item cards having poor contrast in dark mode
3. Complete lack of dark mode styling for filter components

All issues can be resolved by adding CSS rules to the existing blade template file without requiring any PHP or structural changes.

---

**Report Generated:** October 31, 2025
**Analysis Method:** Automated Puppeteer browser testing with CSS inspection
**Pages Analyzed:** 2 (New page in light and dark modes)
**Screenshots Captured:** 4
**Data Files:** `/home/centralgoparts/public_html/profitability-final-analysis.json`