spouliot/PowderCoatingLogix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Scott Pouliot
2026-04-23 21:38:24 -04:00
commit 63e12a9636
1762 changed files with 1672620 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/PowderCoating.Web/design_handoff_pcl_redesign/README.md
+224
View File
@@ -0,0 +1,224 @@
# Handoff: Powder Coating Logix — Visual Redesign
## Overview
This package redirects Powder Coating Logix from a generic Bootstrap-admin aesthetic to a calmer, more industrial voice — **warm neutrals, a single ember accent, monospace numerics, borders-over-shadows, domain signals on screen**.
Three representative screens are mocked end-to-end (Dashboard, Jobs list, Daily board). The same tokens, type stack, and component vocabulary extend to every other page in the app.
## About the Design Files
The files in this bundle (`Design Review.html`, `mock_components.jsx`, `screens_before.jsx`, `screens_after.jsx`, `review_app.jsx`) are **HTML/React design references**, not production code to copy.
Your task is to **recreate the "after" designs inside `PowderCoating.Web`** — an ASP.NET Core MVC app with Razor `.cshtml` views, Bootstrap 5, and jQuery. Use the codebase's existing patterns (Razor partials, tag helpers, the `_Layout.cshtml` shell, Bootstrap utility classes) — *do not* introduce React.
Where the HTML mocks use inline React-style components, translate them to:
- **CSS custom properties + Bootstrap 5 overrides** in `wwwroot/css/site.css`
- **Razor partial views** in `Views/Shared/` for repeated primitives (status chip, metric tile, section header)
- **Tag helpers** in `TagHelpers/` for things already modeled that way (e.g. the sortable column pattern)
## Fidelity
**High-fidelity.** Colors, typography, spacing, radii, and interaction affordances in the "after" mocks are final. Pixel-match the layout and tokens; use the codebase's existing icons (Bootstrap Icons) and form controls. No emoji.
## Screens
### 1. Dashboard (`Views/Dashboard/Index.cshtml`)
**Replace:**
- The gradient "Welcome Back!" banner (currently `background: var(--sidebar-gradient)`).
- The 6-tile rainbow KPI grid with icon bubbles.
**With, in order:**
1. **Hero brief** — a single card, split 1.6 / 1 columns.
- Left half: small mono kicker with date (`SATURDAY · APRIL 18`), followed by a one-sentence prose summary in Fraunces 500 / 26px, letter-spacing -0.015em, with `--bad` red on the "running hot" substring. Two buttons below: primary "Open daily board" (ink fill), secondary "Oven schedule" (outlined).
- Right half: 2×2 grid of `Metric` tiles with mono numerals, a mono kicker label, and an optional delta in `--ok` / `--bad` with `bi-arrow-up-right` / `bi-arrow-down-right`.
2. **Needs attention row** — a single card with a header ("Needs attention · chip showing count") and 3 equal cells separated by vertical 1px rules. Each cell: status chip, large mono number, one-line label, mono detail.
3. **Two-up** — left 2/3: "Floor activity" feed (time · mono job id · customer · event-chip). Right 1/3: A/R aging with 4px bars, mono dollar amounts aligned right.
No icon bubbles anywhere. No gradient backgrounds.
### 2. Jobs list (`Views/Jobs/Index.cshtml`)
**Replace:**
- Both stat strips (`.stats-cards-desktop` AND `.mobile-stats-compact`).
- The `bg-white shadow-sm` table card chrome.
- The purple-link job number styling.
**With:**
1. **Single metric strip** — one card, 5 columns, each cell a `Metric` primitive. Delete the mobile-stats duplicate; the strip is already compact enough.
2. **Toolbar** — left: search input (with `/` shortcut hint) + pill-row of quick views (`All`, `Due ≤ 48h`, `On floor`, `Ready`, `Mine`). Right: Filters + New job (ink fill).
3. **Table** — borderless rows, 1px soft rules, mono uppercase headers at 10px / 0.12em tracking. Columns: Job (mono), Description (with a tiny dot + customer subline), Customer, Due (mono, red if hot), Status (chip), Priority (small text), Total (right-aligned mono), … menu.
4. **Hot-job indicator** — a 2px red bar on the left edge of the job ID cell, *not* a colored row.
5. **Keyboard hint footer** — mono text: `↑↓ to move · ↵ to open · ⌘F to filter`.
### 3. Daily board (`Views/Jobs/Board.cshtml`)
**Replace:**
- Column tints (every column currently has its own bg color).
- Priority-as-colored-left-border (`border-left: 4px solid {{priorityColor}}`).
**With:**
1. **Column header** — mono uppercase label + small count pill. No fill. A thin 1px `--rule` underline separates header from cards.
2. **Curing column** — gets a small live "oven meter" strip: `<i class="bi-fire"></i> 180°C · 14 min` with a pulsing `--ember` dot. The strip is the *only* saturated color on the board.
3. **Hot jobs** — a single 2px red edge on the card's left, drawn as a pseudo-element so it doesn't change card padding.
4. **Card footer** — 1px `--rule-soft` top border, mono row: **powder swatch** (9px color chip generated from a lookup on `PowderInventory.ColorHex` or a name→hex map) + powder name + parts count + priority dot.
5. **Toolbar** — segmented view switch (Board / List / Oven) + mono stats line (`11 jobs on floor · 2 hot · avg cycle 3.2 d`) + Group/Hide controls.
## Design Tokens
Add these to the top of `wwwroot/css/site.css` (or a new `wwwroot/css/tokens.css` linked from `_Layout.cshtml` before Bootstrap):
```css
:root {
/* Neutrals — warm paper */
--pcl-ink: #0F0F10;
--pcl-graphite: #1A1A1C;
--pcl-slate: #3A3A3E;
--pcl-steel: #6B6B70;
--pcl-mute: #9A9A9F;
--pcl-rule: #E4E2DC;
--pcl-rule-soft: #EFEDE7;
--pcl-paper: #FAFAF7;
--pcl-paper-2: #F3F1EB;
--pcl-card: #FFFFFF;
/* Signal — shared chroma, varied hue */
--pcl-ember: oklch(0.68 0.17 50);
--pcl-ember-tint: oklch(0.95 0.04 55);
--pcl-ember-ink: oklch(0.42 0.15 40);
--pcl-ok: oklch(0.62 0.11 155);
--pcl-ok-tint: oklch(0.95 0.04 155);
--pcl-warn: oklch(0.76 0.13 80);
--pcl-warn-tint: oklch(0.96 0.05 85);
--pcl-bad: oklch(0.60 0.19 25);
--pcl-bad-tint: oklch(0.95 0.04 25);
--pcl-cool: oklch(0.58 0.09 240);
--pcl-cool-tint: oklch(0.95 0.03 240);
/* Bootstrap overrides */
--bs-body-bg: var(--pcl-paper);
--bs-body-color: var(--pcl-ink);
--bs-border-color: var(--pcl-rule);
--bs-primary: var(--pcl-ink); /* primary actions are ink-filled */
}
/* Dark surface variant — applied on data-surface="ink" */
[data-surface="ink"] {
--pcl-paper: #0E0E10;
--pcl-paper-2: #17171A;
--pcl-card: #1C1C20;
--pcl-ink: #F4F2EC;
--pcl-slate: #C2C0BA;
--pcl-steel: #8A8883;
--pcl-rule: #2B2B2F;
--pcl-rule-soft:#232327;
}
```
### Spacing / radius / type scale
| Token | Value | Use |
|---|---|---|
| radius-sm | 4px | swatches, small chips |
| radius | 6px | buttons, inputs, cards within a card |
| radius-lg | 8px | top-level cards, toolbars |
| space-1…6 | 4 / 8 / 12 / 16 / 20 / 24 px | grid gaps |
| font-display | Fraunces 500, -0.015em | hero brief only |
| font-ui | Inter 400/500/600, -0.005em | everything else |
| font-mono | IBM Plex Mono 400/500, feature-settings "zero" | all numerics, IDs, timestamps, keyboard hints, column kickers |
### Type sizes
| Name | Size / line | Weight | Use |
|---|---|---|---|
| display | 26 / 1.2 | Fraunces 500 | dashboard hero sentence |
| h1 | 22 / 1.25 | Inter 600 | page title |
| h2 | 16 / 1.35 | Inter 600 | section header inside card |
| body | 13 / 1.5 | Inter 400 | table rows, card body |
| meta | 12 / 1.5 | Inter 400 `--pcl-slate` | secondary text |
| kicker | 10 / 1.2, 0.14em tracking, uppercase | IBM Plex Mono 500 `--pcl-steel` | column headers, card section labels |
| metric | 26 / 1 | IBM Plex Mono 500 | KPI value |
## Razor Partials to Build
### `_StatusChip.cshtml`
```
@model (string Kind, string Text)
<span class="pcl-chip pcl-chip-@Model.Kind">
<span class="pcl-chip-dot"></span>@Model.Text
</span>
```
CSS: background `--pcl-{kind}-tint`, color `--pcl-{kind}`, dot `--pcl-{kind}`, `IBM Plex Mono` 10.5px, 2px 8px padding, 99px radius. Kinds: `neutral`, `ok`, `warn`, `bad`, `cool`, `ember`.
Use this **everywhere** status badges exist today: Jobs, Invoices, Equipment, Maintenance, Customers. Replace every occurrence of `bg-success bg-warning bg-danger` badges.
### `_Metric.cshtml`
```
@model (string Label, string Value, string? Delta, string? DeltaDir)
```
Renders: mono kicker label, mono 26px value, optional mono delta with arrow. No icon bubble.
### `_SectionHeader.cshtml`
Kicker label + title + optional right-aligned mono meta. Replaces today's `<div class="card-header fw-bold">`.
### `_PowderSwatch.cshtml`
```
@model (string ColorHex, string Name, int? Size)
<span class="pcl-swatch" style="background:@Model.ColorHex" title="@Model.Name"></span>
```
9px color chip + 1px `rgba(0,0,0,0.12)` border. Use it anywhere a powder name appears.
## Interactions & Behavior
- **Hover on table row:** `background: var(--pcl-paper-2)` only. No elevation change.
- **Row keyboard nav:** arrow keys move a focus ring, `enter` opens. The hint footer on Jobs list documents this.
- **Buttons:** primary = `--pcl-ink` bg, `--pcl-paper` fg; ghost = `--pcl-card` bg, `--pcl-rule` border, `--pcl-ink` text. No box shadows. 6px radius.
- **Focus ring:** 2px outline in `--pcl-ember`, 2px offset.
- **Oven meter pulse:** `@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }` on the ember dot — 1.5s. This is the **only** loop animation allowed. Kill `.badge-glow-critical`.
- **Toast / alert:** keep existing Toastr wiring; restyle to use the tokens.
## Sidebar
Keep the existing sidebar structure but:
- Ship **only** Paper (default) and Ink sidebar themes. Delete the 12 `[data-sidebar=…]` gradient variants.
- Active item: 2px `--pcl-ember` left bar + icon tinted ember + `--pcl-paper` text. No gradient.
- Add a ⌘K search affordance at the top of the nav (scaffold — wire later).
- Group headers: mono uppercase, 0.12em tracking, `rgba(255,255,255,0.35)` on ink surface.
## Files to Touch
| Layer | File | Change |
|---|---|---|
| Tokens | `wwwroot/css/site.css` | Prepend `:root` token block; delete rainbow KPI colors, glow keyframes, 11 of 12 sidebar palettes |
| Layout | `Views/Shared/_Layout.cshtml` | Swap sidebar theming; load Fraunces + IBM Plex Mono + Inter from Google Fonts; add `_StatusChip` + `_Metric` partials |
| Dashboard | `Views/Dashboard/Index.cshtml` | Rewrite top 60% of the file (welcome banner + KPI grid) |
| Jobs | `Views/Jobs/Index.cshtml` | Collapse both stat strips into one metric row; restyle table; add quick-view chips |
| Board | `Views/Jobs/Board.cshtml` | Kill column tints + priority left-border; add oven meter; card footer redesign |
| Shared | `Views/Shared/_Metric.cshtml`, `_StatusChip.cshtml`, `_SectionHeader.cshtml`, `_PowderSwatch.cshtml` | New partials |
The remaining CRUD pages (Customers, Invoices, Inventory, etc.) inherit the new look automatically once the tokens, `_StatusChip`, and `_Metric` partials land — they all use the same stat-strip + card-table layout today.
## Shipping Order
1. Tokens + font imports — ½ day
2. `_StatusChip` + `_Metric` partials and a codebase-wide find-and-replace of `badge bg-{color}` / stat-card markup — 1 day
3. Dashboard rewrite — ½ day
4. Jobs list rewrite — ½ day
5. Daily board rewrite — 1 day
6. Sidebar simplification + ⌘K scaffold — ½ day
7. Sweep remaining list pages (Customers, Invoices, Equipment, Maintenance, Vendors, PO) using the established partials — 1–2 days
~5–6 dev days to ship the visual overhaul.
## Files in This Bundle
- `Design Review.html` — interactive document with before/after comparisons. Open locally.
- `mock_components.jsx`, `screens_before.jsx`, `screens_after.jsx`, `review_app.jsx` — React source for the mocks. Reference only.
- `CLAUDE.md` — brief for Claude Code when run inside `PowderCoating.Web/`.
- `DARK_MODE.md` — supplemental brief that supersedes the dark-surface tokens below and adds Bootstrap theme binding, a persisted toggle, and per-screen verification. **Read this if you're implementing or fixing dark mode.**
## Assets
No new image assets required. Keep `wwwroot/images/pcl-logo.png`. Powder color hex values come from existing `PowderInventory.ColorHex` column (or a name→hex fallback map in a new `Helpers/PowderSwatchHelper.cs` if that column isn't populated).