**FabDash** is a self-hosted, full-stack project management and scheduling application built for professionals who need a clean, fast, and visually intuitive way to manage multi-deliverable projects across time. It combines a large, interactive calendar view with a powerful per-project timeline focus system — all wrapped in a dark, modern UI with gold accents.
Unlike bloated SaaS tools, FABDASH runs locally with zero subscription fees, full data ownership, and a UI designed with intention — not feature creep.
│ │ │ └── globals.css # Tailwind base + custom vars
│ │ ├── App.jsx
│ │ └── main.jsx
│ ├── tailwind.config.js
│ ├── vite.config.js
│ └── package.json
│
├── .env.example
├── .gitignore
└── README.md
\`\`\`
---
## Data Architecture
### Relationships
\`\`\`
Project (1) ──────────── (many) Deliverable
│ │
├── id (PK) ├── id (PK)
├── name ├── project_id (FK)
├── color (hex) ├── title
├── description ├── due_date
└── created_at ├── status (enum)
└── created_at
\`\`\`
Each **Project** owns one or more **Deliverables**. Every deliverable inherits the parent project's color when rendered on the calendar. Deleting a project cascades to remove all its deliverables.
---
## Features
### Main Calendar View
The primary interface is a large, full-width **FullCalendar** grid. It supports three view modes switchable from the toolbar:
- **Month View** — Full month overview, all deliverables visible as colored event chips
- **Week View** — Focused 7-day view with time slots
- **Day View** — Single-day granularity for heavy scheduling days
**Interaction behaviors:**
- **Drag-and-drop** any deliverable event to a new date — the backend is updated immediately via `PATCH /deliverables/:id`
- **Click** any event to open the **Deliverable Focus View** for that project
- **Right-click** (context menu) on an event to access quick actions: Edit, Delete, Open Project
- **Click empty date cell** to open the Add Deliverable modal pre-filled with that date
---
### Project & Deliverable Management
**Adding a Project:**
1. Click the **"+ New Project"** button in the sidebar
2. Enter project name, optional description, and select a color swatch
3. Immediately add one or more deliverables inline before saving
4. Submit — project and all deliverables are persisted in a single transaction
**Adding a Deliverable to an Existing Project:**
- Open a project via the sidebar and click **"+ Add Deliverable"**
- Or click an empty calendar cell and select an existing project from the dropdown
**Editing:**
- Click any deliverable chip in the sidebar or calendar event to open its edit modal
- All fields (title, date, status) are editable inline
**Deleting:**
- Projects can be deleted from the sidebar (with a confirmation dialog warning of cascade delete)
- Individual deliverables can be deleted from their edit modal or via calendar right-click context menu
---
### Deliverable Focus View
Clicking any deliverable on the calendar opens a **slide-up drawer** from the bottom of the screen containing the full project timeline for that deliverable's parent project.
**Behavior:**
- All deliverables for the project are rendered as a **horizontal timeline** using `react-chrono` in `HORIZONTAL_ALL` mode
- The **clicked deliverable is highlighted** with a gold glowing border (`ring-2 ring-gold`) and elevated scale
- All other deliverables appear as dimmed context nodes
- Each card displays: deliverable title, due date, and status badge
- The drawer can be dismissed by clicking outside it, pressing `Escape`, or clicking the close button
- An **"Edit Deliverable"** and **"Edit Project"** button are available within the drawer without navigating away
Each project is assigned a hex color at creation. This color is used:
- As the **background of event chips** on the FullCalendar grid
- As the **left border accent** on sidebar project cards
- As the **timeline node color** in the Focus View for non-active deliverables
Colors are fully user-selectable from a curated palette of 12 swatches (chosen to remain readable against the dark background) plus a custom hex input.
---
### Theme & Design System
The entire application uses a **dark, modern aesthetic** with gold as the primary accent color.
**Tailwind Custom Tokens:**
\`\`\`js
// tailwind.config.js
theme: {
extend: {
colors: {
gold: '#C9A84C',
'gold-light': '#E8C96A',
'gold-muted': '#8A6E2F',
surface: '#111111',
'surface-raised': '#1A1A1A',
'surface-elevated':'#242424',
'surface-border': '#2E2E2E',
'text-primary': '#F5F5F5',
'text-muted': '#888888',
},
boxShadow: {
gold: '0 0 12px rgba(201, 168, 76, 0.4)',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
}
}
}
\`\`\`
---
## API Reference
### Projects
| Method | Endpoint | Description |
|---|---|---|
| `GET` | `/api/projects` | Fetch all projects with nested deliverables |
| `POST` | `/api/projects` | Create a new project |
| `GET` | `/api/projects/:id` | Fetch a single project |
