06661525f8
- Complete Node.js + PostgreSQL application - 10 REST API endpoints (CRUD for projects/tasks) - Responsive HTML/CSS/JavaScript UI - Production-ready code (95%+ test coverage) - Deployed to /publish/web1/public/command-center/ - Server running on port 3000 Pipeline: Daedalus (arch) → Talos (code) → Icarus (UI) → Hephaestus (deploy) Total time: 30 minutes Token efficiency: ~783k tokens (~$6.65) Documentation: DEPLOYMENT-POSTMORTEM-2026-04-13.md
263 lines
12 KiB
HTML
263 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TekDek Command Center</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" class="app">
|
|
<!-- Sidebar Navigation -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="logo">
|
|
<svg viewBox="0 0 24 24" width="28" height="28">
|
|
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
|
|
<path d="M12 7v5h5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
<span class="logo-text">Command Center</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<button class="nav-item active" data-view="projects-list">
|
|
<svg viewBox="0 0 24 24" width="20" height="20">
|
|
<rect x="3" y="3" width="8" height="8" stroke="currentColor" fill="none" stroke-width="2"/>
|
|
<rect x="13" y="3" width="8" height="8" stroke="currentColor" fill="none" stroke-width="2"/>
|
|
<rect x="3" y="13" width="8" height="8" stroke="currentColor" fill="none" stroke-width="2"/>
|
|
<rect x="13" y="13" width="8" height="8" stroke="currentColor" fill="none" stroke-width="2"/>
|
|
</svg>
|
|
<span>Projects</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<div class="sidebar-footer">
|
|
<div class="status-indicator" id="connection-status">
|
|
<div class="status-dot"></div>
|
|
<span class="status-text">Connected</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Projects List View -->
|
|
<section id="projects-list-view" class="view active">
|
|
<div class="view-header">
|
|
<h1>Projects</h1>
|
|
<button id="btn-new-project" class="btn btn-primary">
|
|
<svg viewBox="0 0 24 24" width="18" height="18">
|
|
<line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
New Project
|
|
</button>
|
|
</div>
|
|
|
|
<div class="filters-bar">
|
|
<select id="filter-status" class="filter-select">
|
|
<option value="">All Statuses</option>
|
|
<option value="active">Active</option>
|
|
<option value="paused">Paused</option>
|
|
<option value="archived">Archived</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="projects-list" class="projects-list">
|
|
<div class="loading">
|
|
<div class="spinner"></div>
|
|
<p>Loading projects...</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Project Detail View -->
|
|
<section id="project-detail-view" class="view">
|
|
<div class="view-header">
|
|
<button class="btn-back" id="btn-back-to-projects">
|
|
<svg viewBox="0 0 24 24" width="20" height="20">
|
|
<path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
<div class="project-header-info">
|
|
<h1 id="project-title">Project Title</h1>
|
|
<p id="project-description" class="project-description"></p>
|
|
</div>
|
|
<div class="project-header-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Tasks</span>
|
|
<span class="stat-value" id="project-task-count">0</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Done</span>
|
|
<span class="stat-value" id="project-done-count">0</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Overdue</span>
|
|
<span class="stat-value" id="project-overdue-count">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="task-filters">
|
|
<select id="task-filter-status" class="filter-select">
|
|
<option value="">All Tasks</option>
|
|
<option value="backlog">Backlog</option>
|
|
<option value="in_progress">In Progress</option>
|
|
<option value="blocked">Blocked</option>
|
|
<option value="done">Done</option>
|
|
</select>
|
|
<button id="btn-add-task" class="btn btn-secondary">
|
|
<svg viewBox="0 0 24 24" width="16" height="16">
|
|
<line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2"/>
|
|
<line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
Add Task
|
|
</button>
|
|
</div>
|
|
|
|
<div class="kanban-board" id="kanban-board">
|
|
<!-- Kanban columns generated by JavaScript -->
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modal: New Project Form -->
|
|
<div id="modal-new-project" class="modal">
|
|
<div class="modal-backdrop"></div>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>New Project</h2>
|
|
<button class="btn-close">✕</button>
|
|
</div>
|
|
<form id="form-new-project" class="form">
|
|
<div class="form-group">
|
|
<label for="project-name">Project Name</label>
|
|
<input type="text" id="project-name" name="name" placeholder="Enter project name" required/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="project-desc">Description (optional)</label>
|
|
<textarea id="project-desc" name="description" placeholder="What is this project about?" rows="3"></textarea>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="project-color">Color</label>
|
|
<div class="color-picker">
|
|
<input type="color" id="project-color" name="color_hex" value="#3498db"/>
|
|
<span id="color-display" class="color-display" style="background-color: #3498db"></span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="project-icon">Icon</label>
|
|
<select id="project-icon" name="icon_name">
|
|
<option value="rocket">🚀 Rocket</option>
|
|
<option value="bug">🐛 Bug</option>
|
|
<option value="feature">⭐ Feature</option>
|
|
<option value="docs">📚 Docs</option>
|
|
<option value="deploy">🚢 Deploy</option>
|
|
<option value="design">🎨 Design</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary modal-close">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Create Project</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: New Task Form -->
|
|
<div id="modal-new-task" class="modal">
|
|
<div class="modal-backdrop"></div>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>New Task</h2>
|
|
<button class="btn-close">✕</button>
|
|
</div>
|
|
<form id="form-new-task" class="form">
|
|
<div class="form-group">
|
|
<label for="task-title">Task Title</label>
|
|
<input type="text" id="task-title" name="title" placeholder="Enter task title" required/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="task-desc">Description (optional)</label>
|
|
<textarea id="task-desc" name="description" placeholder="Task details..." rows="3"></textarea>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="task-status">Status</label>
|
|
<select id="task-status" name="status">
|
|
<option value="backlog">Backlog</option>
|
|
<option value="in_progress">In Progress</option>
|
|
<option value="blocked">Blocked</option>
|
|
<option value="done">Done</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="task-due">Due Date (optional)</label>
|
|
<input type="date" id="task-due" name="due_date"/>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary modal-close">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Create Task</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Edit Task -->
|
|
<div id="modal-edit-task" class="modal">
|
|
<div class="modal-backdrop"></div>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Edit Task</h2>
|
|
<button class="btn-close">✕</button>
|
|
</div>
|
|
<form id="form-edit-task" class="form">
|
|
<div class="form-group">
|
|
<label for="edit-task-title">Task Title</label>
|
|
<input type="text" id="edit-task-title" name="title" required/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-task-desc">Description</label>
|
|
<textarea id="edit-task-desc" name="description" rows="3"></textarea>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="edit-task-status">Status</label>
|
|
<select id="edit-task-status" name="status">
|
|
<option value="backlog">Backlog</option>
|
|
<option value="in_progress">In Progress</option>
|
|
<option value="blocked">Blocked</option>
|
|
<option value="done">Done</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="edit-task-due">Due Date</label>
|
|
<input type="date" id="edit-task-due" name="due_date"/>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-danger" id="btn-delete-task">Delete Task</button>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary modal-close">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notifications -->
|
|
<div id="toast-container" class="toast-container"></div>
|
|
|
|
<script src="api.js"></script>
|
|
<script src="ui.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|