From 118c186881b9cf9978a3f0928c5d2b46c001b701 Mon Sep 17 00:00:00 2001 From: jasonMPM Date: Thu, 5 Mar 2026 23:20:30 -0600 Subject: [PATCH] docs: sync README with current feature state (heatmap redesign, landing page, ResizeObserver) --- README.md | 77 +++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 61 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 8ad933c..ddb86d5 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ **Fabrication Dashboard** — A sleek, modern project management & scheduling application built for fabrication workflows. Repo: https://github.com/jasonMPM/fabdash -![Version](https://img.shields.io/badge/version-1.0.0-gold) +![Version](https://img.shields.io/badge/version-1.1.0-gold) ![Stack](https://img.shields.io/badge/stack-React%20%2B%20Flask%20%2B%20SQLite-informational) ![Theme](https://img.shields.io/badge/theme-Dark%20%2F%20Gold-yellow) ![Docker](https://img.shields.io/badge/deployment-Single%20Docker%20Container-blue) @@ -32,7 +32,7 @@ Repo: https://github.com/jasonMPM/fabdash ## Overview -FabDash is a self-hosted, full-stack project management dashboard built for fabrication teams. It features a large interactive calendar, multi-deliverable project tracking, drag-and-drop scheduling, a per-project Focus View timeline, workload heatmap, agenda panel, right-click context menus, keyboard shortcuts, and a collapsible branded sidebar — all wrapped in a dark/gold UI and deployed as a single Docker container with no external dependencies. +FabDash is a self-hosted, full-stack project management dashboard built for fabrication teams. It features a large interactive calendar, multi-deliverable project tracking, drag-and-drop scheduling, a per-project Focus View timeline, a redesigned workload heatmap with per-status color-coded grids, an agenda panel, right-click context menus, keyboard shortcuts, and a collapsible branded sidebar — all wrapped in a dark/gold UI and deployed as a single Docker container with no external dependencies. --- @@ -108,7 +108,8 @@ fabdash/ ├── postcss.config.js ├── index.html └── public/ - └── logo.png # ← Drop your square logo here + ├── logo.png # ← Drop your square logo here + └── landing.html # Self-contained marketing landing page └── src/ ├── main.jsx ├── App.jsx # Sidebar layout, keyboard shortcuts, toast container @@ -117,10 +118,10 @@ fabdash/ │ └── deliverables.js ├── components/ │ ├── Calendar/ - │ │ ├── MainCalendar.jsx # Events, drag-drop, tooltip, select, heatmap toggle + │ │ ├── MainCalendar.jsx # Events, drag-drop, tooltip, select, ResizeObserver reflow │ │ ├── EventTooltip.jsx # Hover preview card │ │ ├── AgendaPanel.jsx # Upcoming deliverables (next 60 days) - │ │ └── WorkloadHeatmap.jsx # 20-week density heatmap + stat cards + │ │ └── WorkloadHeatmap.jsx # Per-status 4-column mini grids + combined All Tasks grid │ ├── Projects/ │ │ ├── ProjectList.jsx # Logo header, tab toggle, empty state │ │ ├── ProjectCard.jsx # Drive link, dblclick, right-click @@ -165,17 +166,39 @@ fabdash/ - **Single-click event** — Opens Deliverable Focus View - **Double-click event** — Opens Edit Deliverable modal directly - **Right-click event** — Context menu (Edit, Focus View, Open Drive, Delete) +- **Smooth sidebar reflow** — `ResizeObserver` calls `updateSize()` on every frame during the sidebar CSS transition so the calendar grid never clips or overflows ### Workload Heatmap -Toggle between the calendar and heatmap with the **⬡ Heatmap** button in the top-right of the main area. +Toggle between the calendar and heatmap with the **⬡ Heatmap** button in the top-right. When the heatmap is active, the button reads **← Calendar** to return. -- **20-week grid** — Mon–Sun rows, week columns, centered 10 weeks before and after today -- **Color intensity** — Cells shade from dark (no deliverables) to full gold (3+ deliverables) -- **Today ring** — Current day highlighted with a white ring -- **Hover tooltip** — Shows date + all deliverable titles and project names for that day (up to 5, with overflow count) +The heatmap has two visual sections: + +#### Per-Status Mini Grids (top row) + +A 4-column grid — one column per status — each with a stat card above its heatmap: + +| Status | Color | Stat card shows | +|---|---|---| +| Upcoming | Blue | Total upcoming deliverables | +| In Progress | Amber | Total in-progress deliverables | +| Completed | Green | Total completed deliverables | +| Overdue | Red | Total overdue deliverables | + +- **20-week grid per status** — Mon–Sun rows, week columns, centered 10 weeks before and after today +- **3-tier intensity** — Empty → 20% tint (1 item) → 55% tint (2 items) → full color + glow (3+ items) +- **Today ring** — Current day highlighted with a white ring across all grids +- **Hover tooltip** — Shows date, status label, and all matching deliverable titles/projects (up to 5, overflow count) +- **Click cell** — Opens Focus View for the first deliverable of that status on that day + +#### Combined "All Tasks" Grid (bottom) + +A single large heatmap (40px cells) showing every deliverable across all statuses: + +- **Dominant-status coloring** — Each day cell is colored by its most urgent status using priority order: `overdue > in_progress > upcoming > completed`. Ties resolved by count, then priority +- **Color legend** — Inline legend shows all 4 status colors with labels +- **Hover tooltip** — Shows per-status breakdown counts for that day, plus all deliverable titles/project names - **Click cell** — Opens Focus View for the first deliverable on that day -- **Stat cards** — Total / Upcoming / In Progress / Completed / Overdue counts across all projects ### Sidebar @@ -230,10 +253,24 @@ After a drag-and-drop rescheduling, a toast appears at the bottom of the screen - A circular SVG countdown ring showing seconds remaining (30s default) - Auto-dismisses when the timer expires +### Landing Page + +A self-contained marketing page served at `/landing.html`. Built as a standalone HTML file in `frontend/public/` — Vite copies it to `dist/` and Flask serves it without touching app routing. + +- **Parallax hero** — Animated dark/gold header with tagline +- **Mock app preview** — Static UI mockup of the calendar view +- **Workload heatmap demo** — Illustrated heatmap section showing the density grid concept +- **Benefit cards** — Feature highlights with icons +- **Focus View mockup** — Illustrated timeline drawer preview +- **How-it-works steps** — 3-step numbered walkthrough +- **Docker quick-start block** — Copy-paste install commands +- **Footer** — GitHub repository link + ### Animations & Polish - **Modal enter** — Backdrop fades in, dialog scales up from 95% with a translateY, using `requestAnimationFrame` for reliable transitions - **Sidebar slide** — `transition-[width] duration-300` for smooth collapse/expand +- **Calendar reflow** — `ResizeObserver` drives `updateSize()` on every pixel change during the sidebar transition - **Toast slide-up** — `@keyframes slide-up` animation in `globals.css` - **Heatmap cells** — `hover:scale-125` on each cell for tactile feedback @@ -329,10 +366,14 @@ App │ └── Collapsed: [logo] square tile + ▶ │ ├──
MainCalendar -│ ├── [⬡ Heatmap] toggle button +│ ├── [⬡ Heatmap / ← Calendar] toggle button │ ├── FullCalendar ← eventDidMount: tooltip, dblclick, right-click │ │ └── Events (drag, click, select) +│ │ └── ResizeObserver → updateSize() during sidebar transition │ ├── WorkloadHeatmap (toggled) +│ │ ├── 4× per-status mini grids (blue/amber/green/red) +│ │ │ └── stat card + 20-week heatmap per status +│ │ └── Combined "All Tasks" grid (dominant-status coloring, 40px cells) │ ├── EventTooltip (hover) │ ├── DeliverableModal │ └── ContextMenu @@ -380,7 +421,7 @@ Place your square logo file at: frontend/public/logo.png ``` -Supported formats: `.png`, `.jpg`, `.svg`, `.webp` — rename to `logo.png`. If omitted, the sidebar header shows text only and the collapsed toggle shows "FD". +Supported formats: `.png`, `.jpg`, `.svg`, `.webp` — rename to `logo.png`. If omitted, the sidebar header shows text only and the collapsed toggle shows "FABDASH". --- @@ -501,7 +542,7 @@ A healthy startup: FabDash supports a custom square logo that appears in two places: 1. **Sidebar header** — Next to the "FabDash" wordmark (32×32px, `object-contain`) -2. **Collapsed sidebar toggle** — Replaces the `▶` arrow with a branded square tile (32×32px) +2. **Collapsed sidebar toggle** — Replaces the fallback "FABDASH" text with a branded square tile (32×32px) **To add your logo:** @@ -667,7 +708,7 @@ To add a new column in a future version, append its `ALTER TABLE` statement to t ## Roadmap -### v1.0 — Core Release *(current)* +### v1.0 — Core Release *(shipped)* - [x] Dark/gold Tailwind design system - [x] FullCalendar — Month, Week, and Day views @@ -704,6 +745,10 @@ To add a new column in a future version, append its `ALTER TABLE` statement to t ### v1.1 — Polish & UX *(in progress)* +- [x] Heatmap redesign — 4 per-status color-coded mini grids (blue/amber/green/red) with individual stat cards +- [x] Combined "All Tasks" heatmap — large 40px cells, dominant-status coloring, per-day status breakdown tooltip +- [x] Smooth calendar reflow during sidebar transitions (ResizeObserver → `updateSize()`) +- [x] Public landing page at `/landing.html` — parallax hero, feature cards, Docker quick-start, GitHub link - [ ] Animated modal and drawer exit transitions - [ ] Drag-and-drop between projects (reassign deliverable) - [ ] Mini calendar in sidebar for quick date navigation @@ -748,4 +793,4 @@ To add a new column in a future version, append its `ALTER TABLE` statement to t --- -*Built with intention. No subscriptions. No bloat. Just your fabrication workflow.* \ No newline at end of file +*Built with intention. No subscriptions. No bloat. Just your fabrication workflow.*