Instruction file imported from candoxtang/ProductDashboard_20250619 (.cursor/rules/ui-layout-patterns.mdc). Copyright stays with the author.

UI Layout Patterns & CSS Conventions

This document outlines the standardized UI patterns, CSS conventions, and layout structures used across the Product Costing Dashboard.

Layout Architecture

Main Application Structure

<body>
    <header>                       <!-- Global header with logo -->
    <nav>                          <!-- Tab navigation -->
    <div id="global-filter-bar">   <!-- Global filters -->
    <main>                         <!-- Tab content container -->
        <div class="tab-content">  <!-- Individual tab pages -->
</body>

Tab Content Patterns

1. Grid-Based Dashboards (Manufacturing, Quality)

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 100%;
    gap: 0;
}

2. Column-Based Layouts (Material Analysis)

.dashboard-column-container {
    display: flex;
    height: 100%;
}
.dashboard-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

3. Split-Screen Layout (Cost Category Analysis)

.analysis-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.charts-section {
    height: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.grid-section {
    height: 50%;
    display: flex;
    flex-direction: column;
}

Component Patterns

KPI Cards

Standard Structure:

<div class="kpi-card">
    <h2>Chart Title</h2>
    <div class="chart-container">
        <canvas id="chartId"></canvas>
    </div>
    <div class="pagination-controls"></div>
</div>

CSS Standards:

.kpi-card {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    flex: 1 1 0;
    min-height: 0;
}

Chart Containers

Size Variants:

.chart-container: Standard chart size with flex-grow
.chart-container-large: Fixed 350px height
.chart-container-half: Half-height for stacked charts

Responsive Behavior:

.chart-container {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Critical for flex resizing */
}

Filter Panel Architecture

Global Filter Bar

Structure: index.html

<div id="global-filter-bar" class="filter-bar">
    <div id="global-filter-container">
        <!-- Dynamic multi-select filters -->
    </div>
    <div class="filter-group-right">
        <div id="analyze-by-group" class="filter-group">
            <!-- Cost Category Analysis only -->
        </div>
        <label for="aggregation-select">View by:</label>
        <select id="aggregation-select">
    </div>
</div>

Styling Conventions:

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 1rem;
}
.filter-group label {
    font-size: 0.8rem;
    font-weight: bold;
    color: #334e68;
}

Multi-Select Dropdowns

Generated Structure: global-filters.js

<div class="filter-control">
    <label class="filter-label">Fab:</label>
    <div class="multi-select-dropdown">
        <button class="dropdown-button">
            <span class="button-text">All Fabs</span>
        </button>
        <div class="dropdown-panel">
            <!-- Checkbox options -->
        </div>
    </div>
</div>

Data Grid Patterns

Standard Grid Structure

HTML Template:

<div class="grid-section">
    <div class="grid-header">
        <h2>Grid Title</h2>
        <div class="grid-controls">
            <input type="text" placeholder="Search...">
            <select><!-- Status filter --></select>
        </div>
    </div>
    <div class="grid-container">
        <table id="grid-id">
            <thead><!-- Sortable headers --></thead>
            <tbody><!-- Data rows --></tbody>
        </table>
    </div>
    <div class="grid-pagination">
        <!-- Pagination controls -->
    </div>
</div>

Grid CSS Standards

Table Styling:

#lot-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
#lot-grid th {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    cursor: pointer;
    user-select: none;
}

Status Indicators:

.status-completed { color: #28a745; font-weight: 600; }
.status-processing { color: #ffc107; font-weight: 600; }
.variance-positive { color: #dc3545; font-weight: 600; }
.variance-negative { color: #28a745; font-weight: 600; }

Pagination Patterns

Standard Pagination Structure

Generated by: Chart utilities and grid functions

<div class="pagination-controls">
    <button disabled>&laquo; Previous</button>
    <button class="active">1</button>
    <button>2</button>
    <span>...</span>
    <button>10</button>
    <button>&raquo; Next</button>
</div>

CSS Standards:

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem;
    border-top: 1px solid #eee;
    flex-shrink: 0;
    font-size: 0.8rem;
}

Responsive Design Patterns

Breakpoint Strategy

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
    }
}
@media (max-width: 992px) {
    .dashboard-column-container {
        flex-direction: column;
    }
}

Flex Layout Principles

Container: display: flex; flex-direction: column; height: 100%;
Content: flex: 1; min-height: 0;
Fixed Elements: flex-shrink: 0;

Color & Typography Standards

Color Palette

:root {
    --primary-color: #334e68;      /* Headers, labels */
    --secondary-color: #6c757d;    /* Secondary text */
    --border-color: #dee2e6;       /* Borders, dividers */
    --background-color: #f8f9fa;   /* Backgrounds */
    --success-color: #28a745;      /* Positive values */
    --warning-color: #ffc107;      /* Warning states */
    --danger-color: #dc3545;       /* Negative values */
}

Typography Hierarchy

h1 { font-size: 1.5rem; color: #334e68; }    /* Page titles */
h2 { font-size: 1.2rem; color: #334e68; }    /* Section titles */
.filter-label { font-size: 0.8rem; font-weight: bold; } /* Filter labels */
.grid-text { font-size: 0.85rem; }           /* Grid content */

Chart Integration Patterns

Chart.js Configuration Standards

Responsive Configuration:

options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: { position: 'top' }
    },
    scales: {
        x: { ticks: { callback: (v) => window.chartUtils.formatNumber(v, true) } }
    }
}

Chart Container Integration

CSS Requirements:

.chart-container canvas {
    max-width: 100%;
    height: auto;
}

Tab-Specific Layout Rules

Cost Category Analysis

Header: Removed for space optimization
Charts: 50% height, side-by-side grid
Grid: 50% height, full-width
Filter: Analyze by dropdown in global filter bar

Organizational Costing

Layout: Vertical stacking with drill-down hierarchy
Charts: Variable heights based on content
Interaction: Click-through navigation

Manufacturing Dashboard

Layout: 3x2 grid for equal chart sizing
Charts: Uniform sizing for comparison
Focus: Process-oriented metrics

Material Analysis

Layout: Column-based with large primary chart
Charts: Mixed sizes for hierarchy
Focus: Material family analysis

Animation & Interaction Standards

Hover Effects

.tab-button:hover { background-color: #e3f2fd; }
.kpi-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
#lot-grid tbody tr:hover { background-color: #e3f2fd; }

Transition Standards

.tab-button { transition: all 0.2s ease; }
.multi-select-dropdown .dropdown-panel { transition: opacity 0.2s ease; }

Loading States

Charts: Display loading message during data generation
Grids: Show "No data" message when empty
Filters: Maintain state during updates

About