docs: sync README with current feature state (heatmap redesign, landing page, ResizeObserver)
This commit is contained in:
jasonMPM
75
README.md
75
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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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 + ▶
|
||||
│
|
||||
├── <main> 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
|
||||
|
||||
Reference in New Issue
Block a user