{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "project-roadmap", "title": "Project Roadmap", "type": "registry:block", "description": "Full interactive project roadmap and deliverables surface: Gantt timeline with multi-scale zooming, work breakdown task tree, overall progress metrics, search and status/assignee filters, task detail slide-over Sheet, and Add Task modal dialog.", "categories": [ "productivity", "dashboard", "data" ], "files": [ { "path": "packages/elements-lit/src/blocks/project-roadmap/project-roadmap.ts", "content": "import { LitElement, css, html } from 'lit'\nimport { AlertCircle, Calendar, CheckCircle2, Clock, Download, Milestone, Plus, Search } from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/card/card'\nimport '../../components/checkbox/checkbox'\nimport '../../components/dialog/dialog'\nimport '../../components/gantt/gantt'\nimport '../../components/input/input'\nimport '../../components/label/label'\nimport '../../components/select/select'\nimport '../../components/sheet/sheet'\nimport type { GanttScale, GanttTask, GanttTaskStatus } from '../../components/gantt/types'\nimport type { UipInput } from '../../components/input/input'\nimport type { UipSelect } from '../../components/select/select'\n\nfunction seedTasks(): GanttTask[] {\n return [\n { id: 'task-1', name: 'System Architecture & Database Schema', startDate: '2026-08-01', endDate: '2026-08-08', progress: 100, status: 'done', priority: 'high', assignee: { name: 'Sarah Connor', initials: 'SC' } },\n { id: 'task-2', name: 'Auth, RBAC & Multi-Tenant Session Engine', startDate: '2026-08-06', endDate: '2026-08-16', progress: 85, status: 'in-progress', priority: 'urgent', assignee: { name: 'Marcus Rivera', initials: 'MR' } },\n { id: 'task-3', name: 'Real-time WebSocket Notification Bus', startDate: '2026-08-12', endDate: '2026-08-22', progress: 50, status: 'in-progress', priority: 'high', assignee: { name: 'Priya Nair', initials: 'PN' } },\n { id: 'task-4', name: 'Alpha Core API Release Milestone', startDate: '2026-08-23', endDate: '2026-08-23', isMilestone: true, status: 'todo', priority: 'urgent' },\n { id: 'task-5', name: 'Stripe Billing & Invoicing Integration', startDate: '2026-08-24', endDate: '2026-09-04', progress: 15, status: 'todo', priority: 'medium', assignee: { name: 'Sundar Krishnan', initials: 'SK' } },\n { id: 'task-6', name: 'End-to-End Playwright Automated Testing', startDate: '2026-08-28', endDate: '2026-09-08', progress: 0, status: 'todo', priority: 'low', assignee: { name: 'Diane Cho', initials: 'DC' } },\n { id: 'task-7', name: 'Production Cloudflare Pages Deployment', startDate: '2026-09-10', endDate: '2026-09-10', isMilestone: true, status: 'todo' },\n ]\n}\n\n/**\n * — the registry ProjectRoadmap block as a web component.\n *\n * Ports the full surface: header with Export/Add Task, metrics row,\n * search + status + assignee filters with a live count, the Gantt timeline,\n * a task detail sheet, and the Add Task dialog. The RoadmapMetrics /\n * RoadmapTaskDetail / RoadmapAddTaskDialog decomposition is folded into this\n * single file (multi-file blocks ship together, but one file suffices here);\n * class strings follow React's files. `tasks` is a settable property\n * (defaults to the demo seed). The timeline itself renders through the\n * existing primitive (`task-click` / `scale-change` events).\n */\nexport class UipProjectRoadmap extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n tasks: { attribute: false },\n heading: {},\n description: {},\n searchQuery: { state: true },\n statusFilter: { state: true },\n assigneeFilter: { state: true },\n scale: { state: true },\n sheetOpen: { state: true },\n selectedTaskId: { state: true },\n addOpen: { state: true },\n addName: { state: true },\n addStart: { state: true },\n addEnd: { state: true },\n addStatus: { state: true },\n addMilestone: { state: true },\n addAssignee: { state: true },\n }\n\n tasks: GanttTask[] = []\n /** React's `title` (`title` is taken by HTMLElement). */\n heading = 'Engineering Q3 Deliverables'\n description = 'Track roadmap work breakdown, sprint milestones, and cross-team dependencies.'\n\n private searchQuery = ''\n private statusFilter = 'all'\n private assigneeFilter = 'all'\n private scale: GanttScale = 'day'\n private sheetOpen = false\n private selectedTaskId: string | null = null\n private addOpen = false\n private addName = ''\n private addStart = '2026-08-20'\n private addEnd = '2026-08-28'\n private addStatus: 'todo' | 'in-progress' | 'done' = 'todo'\n private addMilestone = false\n private addAssignee = 'Marcus Rivera'\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'project-roadmap')\n if (this.tasks.length === 0) this.tasks = seedTasks()\n }\n\n private get filteredTasks(): GanttTask[] {\n return this.tasks.filter((t) => {\n const matchesSearch = !this.searchQuery || t.name.toLowerCase().includes(this.searchQuery.toLowerCase())\n const matchesStatus = this.statusFilter === 'all' || t.status === this.statusFilter\n const matchesAssignee = this.assigneeFilter === 'all' || t.assignee?.name === this.assigneeFilter\n return matchesSearch && matchesStatus && matchesAssignee\n })\n }\n\n private get metrics(): { total: number; completed: number; inProgress: number; milestones: number; progress: number } {\n const total = this.tasks.length\n const completed = this.tasks.filter((t) => t.status === 'done').length\n const inProgress = this.tasks.filter((t) => t.status === 'in-progress').length\n const milestones = this.tasks.filter((t) => t.isMilestone).length\n const progress = total === 0 ? 0 : Math.round(this.tasks.reduce((acc, t) => acc + (t.progress ?? 0), 0) / total)\n return { total, completed, inProgress, milestones, progress }\n }\n\n private get selectedTask(): GanttTask | null {\n return this.tasks.find((t) => t.id === this.selectedTaskId) ?? null\n }\n\n private statusBadge(task: GanttTask): { label: string; variant: string; cls: string } {\n switch (task.status) {\n case 'done':\n return { label: 'Completed', variant: 'outline', cls: 'text-success border-success/30' }\n case 'in-progress':\n return { label: 'In Progress', variant: 'default', cls: '' }\n case 'blocked':\n return { label: 'Blocked', variant: 'destructive', cls: '' }\n default:\n return { label: 'To Do', variant: 'secondary', cls: '' }\n }\n }\n\n private submitAdd(e: Event) {\n e.preventDefault()\n if (!this.addName.trim()) return\n const task: GanttTask = {\n id: `task-${Date.now()}`,\n name: this.addName.trim(),\n startDate: this.addStart,\n endDate: this.addMilestone ? this.addStart : this.addEnd,\n status: this.addStatus as GanttTaskStatus,\n progress: this.addMilestone ? 100 : 0,\n isMilestone: this.addMilestone,\n assignee: {\n name: this.addAssignee,\n initials: this.addAssignee\n .split(' ')\n .map((p) => p[0])\n .join(''),\n },\n }\n this.tasks = [...this.tasks, task]\n this.dispatchEvent(new CustomEvent('task-add', { detail: task, bubbles: true, composed: true }))\n this.addOpen = false\n this.addName = ''\n this.addMilestone = false\n }\n\n render() {\n const m = this.metrics\n const filtered = this.filteredTasks\n const selected = this.selectedTask\n const badge = selected ? this.statusBadge(selected) : null\n return html`\n
\n
\n
\n

${this.heading}

\n

${this.description}

\n
\n
\n \n ${icon(Download, 'download', 'mr-1 size-3.5')} Export\n \n {\n this.addOpen = true\n }}\n >\n ${icon(Plus, 'plus', 'mr-1 size-3.5')} Add Task\n \n
\n
\n\n
\n \n \n
\n

Overall Progress

\n

${m.progress}%

\n
\n
\n ${icon(Clock, 'clock', 'size-4')}\n
\n \n \n \n \n
\n

In Progress

\n

${m.inProgress}

\n
\n
\n ${icon(AlertCircle, 'circle-alert', 'size-4')}\n
\n \n \n \n \n
\n

Completed

\n

${m.completed}

\n
\n
\n ${icon(CheckCircle2, 'circle-check-big', 'size-4')}\n
\n \n \n \n \n
\n

Milestones

\n

${m.milestones}

\n
\n
\n ${icon(Milestone, 'milestone', 'size-4')}\n
\n \n \n
\n\n
\n
\n {\n this.searchQuery = (e.target as UipInput).value\n }}\n >\n ${icon(Search, 'search', 'size-3.5')}\n \n {\n this.statusFilter = (e.target as UipSelect).value\n }}\n >\n \n \n \n \n \n {\n this.assigneeFilter = (e.target as UipSelect).value\n }}\n >\n \n \n \n \n \n \n \n
\n

\n Showing ${filtered.length} of ${this.tasks.length}\n deliverables\n (Right-click task for quick actions)\n

\n
\n\n ) => {\n this.selectedTaskId = e.detail.task.id\n this.sheetOpen = true\n }}\n @scale-change=${(e: CustomEvent<{ scale: GanttScale }>) => {\n this.scale = e.detail.scale\n }}\n >\n\n ) => {\n this.sheetOpen = e.detail.open\n }}\n >\n ${selected && badge\n ? html`\n
\n
\n ${badge.label}\n ${selected.isMilestone\n ? html`Milestone`\n : ''}\n
\n
\n
\n
\n Schedule\n
\n ${icon(Calendar, 'calendar', 'text-muted-foreground size-4')}\n ${selected.startDate}\n →\n ${selected.endDate}\n
\n
\n ${selected.progress != null\n ? html`\n
\n
\n Completion\n ${selected.progress}%\n
\n
\n
\n
\n
\n `\n : ''}\n ${selected.assignee\n ? html`\n
\n Owner\n
\n \n ${selected.assignee.initials || selected.assignee.name.charAt(0)}\n
\n ${selected.assignee.name}\n
\n
\n `\n : ''}\n \n `\n : ''}\n \n\n ) => {\n this.addOpen = e.detail.open\n }}\n >\n
\n
\n Task Name\n {\n this.addName = (e.target as UipInput).value\n }}\n >\n
\n
\n
\n Start Date\n {\n this.addStart = (e.target as UipInput).value\n }}\n >\n
\n
\n End Date\n {\n this.addEnd = (e.target as UipInput).value\n }}\n >\n
\n
\n
\n ) => {\n this.addMilestone = e.detail.checked\n }}\n >\n
\n \n

\n Marks a zero-duration target deliverable (e.g. Beta Release, Audit sign-off)\n

\n
\n
\n
\n
\n Initial Status\n {\n this.addStatus = (e.target as UipSelect).value as 'todo' | 'in-progress' | 'done'\n }}\n >\n \n \n \n \n
\n
\n Assignee\n {\n this.addAssignee = (e.target as UipSelect).value\n }}\n >\n \n \n \n \n \n \n
\n
\n
\n
\n {\n this.addOpen = false\n }}\n >Cancel\n \n ${icon(Plus, 'plus', 'mr-1.5 size-3.5')} Create Task\n \n
\n \n \n `\n }\n}\n\ncustomElements.get('uip-project-roadmap') || customElements.define('uip-project-roadmap', UipProjectRoadmap)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-project-roadmap': UipProjectRoadmap\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/project-roadmap/project-roadmap.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/card.json", "https://uipkge.dev/r/lit/checkbox.json", "https://uipkge.dev/r/lit/dialog.json", "https://uipkge.dev/r/lit/gantt.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/label.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/select.json", "https://uipkge.dev/r/lit/sheet.json" ] }