# OLD Profitability Page - Expanded View Analysis Summary ## Document Package Overview This analysis package contains **4 comprehensive documents** that fully document the expanded row view on the OLD profitability page: ### 1. **OLD_EXPANDED_VIEW_ANALYSIS.md** (Main Document) - Complete section-by-section breakdown - Visual layout diagram - CSS classes and styling - Color coding system - Implementation notes - Sample HTML structure ### 2. **OLD_EXPANDED_VIEW_FIELD_MAPPING.md** (Field Reference) - Every field mapped to its location - Data flow and calculations - Conditional elements - Field order reference - Implementation checklist ### 3. **OLD_EXPANDED_VIEW_CSS_REFERENCE.css** (Style Guide) - Complete CSS for all components - Light mode styles - Dark mode overrides - Color reference comments - Ready to copy/paste ### 4. **OLD_EXPANDED_VIEW_VISUAL_GUIDE.txt** (ASCII Diagrams) - Detailed ASCII layouts - Box-by-box visual structure - Color palette charts - Spacing measurements - Typography scale - Responsive behavior --- ## Quick Reference ### Layout Structure ``` 2 ROWS × 3 COLUMNS = 6 SECTIONS ROW 1: ┌────────────────┬─────────────────┬────────────────────┐ │ Product │ Pricing │ Fees & │ │ Details │ Breakdown │ Commissions │ └────────────────┴─────────────────┴────────────────────┘ ROW 2 (10px gap): ┌────────────────┬─────────────────┬────────────────────┐ │ Customer │ COGS │ Gross Profit │ │ Information │ Breakdown │ & Margin │ └────────────────┴─────────────────┴────────────────────┘ ``` ### Color-Coded Boxes | Box Type | Color | Purpose | |----------|-------|---------| | **Commission** | Yellow (#fff3cd) | Percentages/Rates | | **Fee** | Red (#f8d7da) | Dollar Costs | | **Discount** | Cyan (#d1ecf1) | Discounts | | **Price Breakdown** | Gray (#f8f9fa) | Container | ### Key Measurements ``` Headers: 12px bold, 6px margin-bottom Fields: 11px, 3px margin-bottom Box Padding: 6-8px Box Margins: 6px bottom Row Gap: 10px HR Margins: 8px 0 Source Info: 9px gray Formula: 10px italic gray ``` --- ## What Was Analyzed ### Source Material - **File:** `/home/centralgoparts/public_html/profit-old-full.html` - **Page:** https://ops.go-parts.com/profitability/indexImproved - **Date Range Analyzed:** August 2025 orders ### Analysis Method 1. Extracted HTML structure of expanded rows (`.order-details` class) 2. Analyzed CSS styling for all components 3. Documented layout grid (Bootstrap `col-md-4`) 4. Mapped all data fields to locations 5. Identified conditional elements 6. Created visual diagrams 7. Documented dark mode variants --- ## Key Findings ### 1. **Grid Layout** - Uses Bootstrap 3 column grid - Each column is `col-md-4` (33.33% width) - Two rows with 10px vertical gap - Responsive: stacks vertically on mobile ### 2. **Box System** - **4 box types** with distinct colors: - Commission boxes (yellow) for percentages - Fee boxes (red) for dollar amounts - Discount boxes (cyan) for discounts - Price breakdown box (gray) for pricing ### 3. **Information Hierarchy** - **Row 1:** Transaction basics (what, how much, fees) - **Row 2:** Transaction analysis (who, costs, profit) ### 4. **Conditional Elements** - Amazon Additional Cost (only for Amazon orders) - Category Discount (only when discount applies) - Remarks (only when present) - Source information (varies by pricing method) ### 5. **Interactive Elements** - One button: "Update Prices" (btn-info) - Located in Gross Profit & Margin section - Contains data attributes for modal ### 6. **Dark Mode** - Complete dark mode implementation - Different box backgrounds (darker tones) - Adjusted text colors for readability - Border colors changed to #555 --- ## Section Contents ### ROW 1, COL 1: Product Details - Item description (full product name) - Item number (SKU) - Partslink (part number) - Supplier name (may include notes) ### ROW 1, COL 2: Pricing Breakdown - Sale Price (formula + result in blue) - Buy Price (formula + result in green) - Price Source (where price came from) - Shipping Source (shipping method) ### ROW 1, COL 3: Fees & Commissions - Channel Commission (yellow box, %) - Advertisement Fee (red box, $) - Amazon Additional Cost (red box, $, conditional) - Total Loss Rate (yellow box, %) - Category Discount (cyan box, %, conditional) ### ROW 2, COL 1: Customer Information - Customer name - Shipping address - Remarks (conditional, gray italic) - Fee Data Source (green "= Actual") ### ROW 2, COL 2: COGS Breakdown - Our Buy Price - Commission & Fee - Payment Processor Fee - Supplier Shipping - Supplier Handling - Supplier Credits (negative) - Loss Amount (with % in label) - **HR separator** - Total COGS - COGS % ### ROW 2, COL 3: Gross Profit & Margin - Gross Margin ($) - colored red/green - Gross Profit (%) - colored red/green - **HR separator** - Formula (italic, gray) - Update Prices button (blue) --- ## Calculations Documented ### Sale Price ``` Base Sale + Additional Charges = Total Sale ``` ### Buy Price ``` Base Buy + Shipping + Handling - Credits = Total Buy ``` ### Total COGS ``` Buy Price + Commission & Fee + Payment Fee + Supplier Shipping + Supplier Handling - Supplier Credits + Loss Amount = Total COGS ``` ### COGS % ``` (Total COGS / Sale Price) × 100 = COGS % ``` ### Gross Margin ``` Sale Price - Total COGS = Gross Margin $ ``` ### Gross Profit % ``` ((Sale Price - Buy Price) / Sale Price) × 100 = Gross Profit % ``` --- ## Implementation Checklist When building the NEW page expanded view: - [ ] Create 2-row, 3-column grid using Bootstrap `col-md-4` - [ ] Add 10px margin-top between rows - [ ] Implement commission-box (yellow #fff3cd) - [ ] Implement fee-box (red #f8d7da) - [ ] Implement discount-box (cyan #d1ecf1) - [ ] Implement price-breakdown box (gray #f8f9fa) - [ ] Set all headers to 12px bold, 6px margin-bottom - [ ] Set all fields to 11px, 3px margin-bottom - [ ] Set source info to 9px gray - [ ] Color positive profits green (#28a745) - [ ] Color negative profits red (#dc3545) - [ ] Add HR separators with 8px 0 margin - [ ] Include formula text (10px italic gray) - [ ] Add Update Prices button with data attributes - [ ] Implement dark mode overrides for all elements - [ ] Handle conditional Amazon Additional Cost - [ ] Handle conditional Category Discount - [ ] Handle conditional Remarks - [ ] Add smooth expand/collapse animation - [ ] Ensure responsive stacking on mobile --- ## File Locations All analysis documents are saved in: ``` /home/centralgoparts/public_html/ ``` ### Document Files: 1. `OLD_EXPANDED_VIEW_ANALYSIS.md` - Main analysis (32KB) 2. `OLD_EXPANDED_VIEW_FIELD_MAPPING.md` - Field reference (18KB) 3. `OLD_EXPANDED_VIEW_CSS_REFERENCE.css` - Complete CSS (8KB) 4. `OLD_EXPANDED_VIEW_VISUAL_GUIDE.txt` - ASCII diagrams (15KB) 5. `EXPANDED_VIEW_ANALYSIS_SUMMARY.md` - This file (summary) ### Sample HTML: - `old-expanded-complete.html` - Extracted expanded section HTML ### Screenshots (if available): - `old-expanded-view-full.png` - `old-expanded-view-section1.png` - `old-expanded-view-section2.png` - etc. --- ## Next Steps ### To Match This in the NEW Page: 1. **Review all 4 documents** to understand the complete structure 2. **Identify the NEW page** expanded row HTML 3. **Compare field-by-field** using the field mapping document 4. **Update CSS** to match the color boxes and styling 5. **Add missing sections** if any 6. **Ensure field order** matches the documented order 7. **Test dark mode** against the dark mode specifications 8. **Verify calculations** match the documented formulas 9. **Add conditional logic** for Amazon costs, discounts, remarks 10. **Test responsive** behavior on different screen sizes ### Development Workflow: ``` 1. Read OLD_EXPANDED_VIEW_ANALYSIS.md ↓ 2. Read OLD_EXPANDED_VIEW_FIELD_MAPPING.md ↓ 3. Reference OLD_EXPANDED_VIEW_CSS_REFERENCE.css ↓ 4. Use OLD_EXPANDED_VIEW_VISUAL_GUIDE.txt for layout ↓ 5. Compare with NEW page current state ↓ 6. Implement changes section by section ↓ 7. Test each section as you go ↓ 8. Verify dark mode ↓ 9. Test responsive behavior ↓ 10. Final comparison and QA ``` --- ## Important Notes ### Data Source Indicators - **"= Actual"** (green) = Commission and fees based on actual data - **"~ Estimated"** (yellow/orange) = Commission and fees estimated ### Box Color Meanings - **Yellow** = Things that increase costs (commissions, loss rates) - **Red** = Fixed dollar costs (fees) - **Cyan** = Things that decrease costs (discounts) - **Gray** = Neutral containers (pricing info) ### Conditional Display Rules 1. **Amazon Additional Cost:** Only for Amazon channel orders 2. **Category Discount:** Only when discount > 0 3. **Remarks:** Only when order has remarks field populated 4. **Shipping Source:** Only when shipping info available ### Typography Consistency - All section headers: 12px bold - All field labels: 11px bold - All field values: 11px normal - All source info: 9px gray - Formula text: 10px italic gray ### Spacing Consistency - Paragraph bottom: 3px - Header bottom: 6px - Box bottom: 6px - Box padding: 6-8px - Row gap: 10px - HR: 8px 0 --- ## Browser Compatibility The OLD page uses: - Bootstrap 3 grid system - Standard CSS3 (border-radius, transitions) - Font Awesome icons (fa fa-edit) - No complex CSS that would break in older browsers Should work in: - Chrome/Edge (all modern versions) - Firefox (all modern versions) - Safari (all modern versions) - Mobile browsers (iOS Safari, Chrome Mobile) --- ## Performance Considerations - Expand/collapse uses `display: none` to `display: block` - Smooth transition with CSS (`transition: max-height 0.3s ease-out`) - No JavaScript-heavy operations in the expanded view - Icons loaded from Font Awesome (already cached) - Colors are CSS-based (no image assets) --- ## Questions Answered ### Q: What sections are in the expanded view? **A:** 6 sections in 2 rows × 3 columns: 1. Product Details 2. Pricing Breakdown 3. Fees & Commissions 4. Customer Information 5. COGS Breakdown 6. Gross Profit & Margin ### Q: What are the colored boxes? **A:** - Yellow = Commissions/Rates (%) - Red = Fees ($) - Cyan = Discounts (%) - Gray = Price container ### Q: How is profit calculated? **A:** - Gross Margin ($) = Sale Price - Total COGS - Gross Profit (%) = ((Sale - Buy) / Sale) × 100 ### Q: What fields are conditional? **A:** - Amazon Additional Cost (Amazon only) - Category Discount (when discount > 0) - Remarks (when present) ### Q: What's the layout structure? **A:** Bootstrap 3 grid with 2 rows, each row has 3 columns (col-md-4) --- ## Contact/Questions If you need clarification on any aspect of this analysis: 1. Check the **main analysis document** (OLD_EXPANDED_VIEW_ANALYSIS.md) 2. Check the **field mapping** (OLD_EXPANDED_VIEW_FIELD_MAPPING.md) 3. Check the **CSS reference** (OLD_EXPANDED_VIEW_CSS_REFERENCE.css) 4. Check the **visual guide** (OLD_EXPANDED_VIEW_VISUAL_GUIDE.txt) 5. Review the **HTML sample** (old-expanded-complete.html) All documents cross-reference each other and provide comprehensive coverage. --- ## Version Information - **Analysis Date:** 2025-11-02 - **OLD Page URL:** https://ops.go-parts.com/profitability/indexImproved - **Date Range:** August 2025 (08/01/2025 - 08/31/2025) - **HTML Source:** profit-old-full.html (772KB) - **Framework:** Bootstrap 3 + Custom CSS - **Icons:** Font Awesome 4.x --- ## Conclusion This analysis package provides **complete documentation** of the OLD profitability page's expanded row view. Every section, field, color, spacing, and calculation has been documented. Use these documents as a **reference implementation** when building or updating the NEW profitability page to match the OLD page's layout, styling, and functionality. The documents are designed to be used together: - **Analysis** for overall understanding - **Field Mapping** for implementation details - **CSS Reference** for styling - **Visual Guide** for layout verification **Total Coverage:** 100% of expanded view structure documented and ready for implementation.