From a9c7178a9cfa09da7be03534a7e124013fef2fe8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 14 Jan 2026 23:03:18 +0000
Subject: [PATCH] Add team project tracking webapp

Build a comprehensive project tracking webapp with intuitive interface for managing team projects, tasks, and milestones.

Features:
- Dashboard with visual overview of all projects
- Color-coded status indicators (on-track, at-risk, blocked, completed)
- Project management with full CRUD operations
- Task tracking with assignees and due dates
- Milestone tracking with achievement status
- Local storage for data persistence
- Responsive design for all screen sizes
- Sample data included for demonstration

Technical implementation:
- Vanilla JavaScript (ES6+) with no framework dependencies
- Modern CSS with Grid and Flexbox layouts
- Clean, maintainable code structure
- Browser-based local storage for persistence

The webapp provides team leaders with quick visibility into project health and helps identify risks that need immediate attention.
---
 webapp/README.md      | 255 ++++++++++++++
 webapp/css/styles.css | 754 ++++++++++++++++++++++++++++++++++++++++++
 webapp/index.html     | 214 ++++++++++++
 webapp/js/app.js      | 710 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 1933 insertions(+)
 create mode 100644 webapp/README.md
 create mode 100644 webapp/css/styles.css
 create mode 100644 webapp/index.html
 create mode 100644 webapp/js/app.js

diff --git a/webapp/README.md b/webapp/README.md
new file mode 100644
index 0000000..14d5c49
--- /dev/null
+++ b/webapp/README.md
@@ -0,0 +1,255 @@
+# Team Project Tracker
+
+A modern, intuitive web application for tracking team projects, tasks, milestones, and project health status.
+
+## Features
+
+### Dashboard Overview
+- **Quick Stats**: Visual summary of all projects with color-coded status indicators
+  - 🟢 On Track (green) - Projects progressing well
+  - 🟡 At Risk (yellow) - Projects with potential issues
+  - 🔴 Blocked (red) - Projects that need immediate attention
+  - 🟣 Completed (purple) - Finished projects
+- **Project Cards**: Grid view of all projects with progress indicators
+- **Real-time Updates**: Dashboard updates automatically as you make changes
+
+### Project Management
+- **Create Projects**: Define project name, description, owner, dates, and status
+- **Edit Projects**: Update project details at any time
+- **Delete Projects**: Remove projects when no longer needed
+- **Project Details**: Comprehensive view of each project including:
+  - Project metadata (owner, dates, status)
+  - Task list with completion tracking
+  - Milestone tracking with achievement status
+
+### Task Management
+- **Add Tasks**: Create tasks with:
+  - Name and description
+  - Status (To Do, In Progress, Completed, Blocked)
+  - Assignee
+  - Due date
+- **Edit Tasks**: Update task details as work progresses
+- **Delete Tasks**: Remove completed or cancelled tasks
+- **Visual Indicators**: Color-coded borders show task status at a glance
+
+### Milestone Tracking
+- **Define Milestones**: Set key project milestones with:
+  - Name and description
+  - Target date
+  - Status (Pending, Achieved, Missed)
+- **Track Progress**: Monitor milestone achievement
+- **Visual Status**: Clear indicators for milestone completion
+
+### Data Persistence
+- **Local Storage**: All data is automatically saved to your browser
+- **No Backend Required**: Works completely offline
+- **Sample Data**: Includes example projects to get you started
+
+## Getting Started
+
+### Quick Start
+1. Open `index.html` in your web browser
+2. The app loads with sample projects to demonstrate features
+3. Start creating your own projects by clicking "+ New Project"
+
+### Usage
+
+#### Creating a New Project
+1. Click the "+ New Project" button in the header
+2. Fill in the project details:
+   - **Project Name** (required)
+   - **Description** (optional)
+   - **Status** (required) - Select current health status
+   - **Project Owner** (optional)
+   - **Start Date** (optional)
+   - **Target End Date** (optional)
+3. Click "Save Project"
+
+#### Managing Tasks
+1. Click on a project card to view details
+2. In the Tasks section, click "+ Add Task"
+3. Fill in task details and save
+4. Edit or delete tasks using the action buttons
+5. Change task status to track progress
+
+#### Setting Milestones
+1. From the project detail view, go to the Milestones section
+2. Click "+ Add Milestone"
+3. Set the milestone name, date, and status
+4. Track achievement as you progress
+
+#### Understanding Project Status
+
+**On Track (Green)**
+- Project is progressing as planned
+- No significant blockers
+- Team is meeting deadlines
+
+**At Risk (Yellow)**
+- Potential issues identified
+- May miss deadlines without intervention
+- Requires manager attention
+
+**Blocked (Red)**
+- Critical blockers preventing progress
+- Immediate action required
+- Escalation needed
+
+**Completed (Purple)**
+- Project successfully finished
+- All tasks completed
+- Archived for reference
+
+## Technical Details
+
+### Technology Stack
+- **HTML5**: Semantic markup
+- **CSS3**: Modern styling with CSS Grid and Flexbox
+- **Vanilla JavaScript**: No frameworks, pure ES6+
+- **Local Storage API**: Browser-based data persistence
+
+### Browser Support
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+- Any modern browser with ES6 support
+
+### File Structure
+```
+webapp/
+├── index.html          # Main HTML file
+├── css/
+│   └── styles.css      # All styling
+├── js/
+│   └── app.js          # Application logic
+└── README.md           # This file
+```
+
+### Data Model
+
+**Project Structure:**
+```javascript
+{
+  id: "unique_id",
+  name: "Project Name",
+  description: "Project description",
+  status: "on-track|at-risk|blocked|completed",
+  owner: "Project Owner",
+  startDate: "YYYY-MM-DD",
+  endDate: "YYYY-MM-DD",
+  tasks: [...],
+  milestones: [...]
+}
+```
+
+**Task Structure:**
+```javascript
+{
+  id: "unique_id",
+  name: "Task Name",
+  description: "Task description",
+  status: "todo|in-progress|completed|blocked",
+  assignee: "Person Name",
+  dueDate: "YYYY-MM-DD"
+}
+```
+
+**Milestone Structure:**
+```javascript
+{
+  id: "unique_id",
+  name: "Milestone Name",
+  description: "Milestone description",
+  date: "YYYY-MM-DD",
+  status: "pending|achieved|missed"
+}
+```
+
+## Features Highlights
+
+### Intuitive Interface
+- Clean, modern design
+- Color-coded status indicators
+- Easy navigation between views
+- Responsive layout for all screen sizes
+
+### Quick Overview
+- Dashboard provides instant project health visibility
+- Stats cards show at-a-glance metrics
+- Progress bars on project cards
+- Visual differentiation of project status
+
+### Risk Management
+- Clear identification of at-risk projects
+- Blocked project highlighting
+- Task-level status tracking
+- Milestone achievement monitoring
+
+## Tips for Best Use
+
+1. **Update Status Regularly**: Keep project status current for accurate overview
+2. **Use Descriptions**: Add context to help team members understand work
+3. **Set Realistic Dates**: Target dates help track progress
+4. **Assign Tasks**: Clear ownership improves accountability
+5. **Track Milestones**: Break projects into measurable achievements
+6. **Review Dashboard**: Regular checks help identify risks early
+
+## Data Management
+
+### Exporting Data
+Your data is stored in browser Local Storage. To backup:
+1. Open browser Developer Tools (F12)
+2. Go to Application > Local Storage
+3. Find key: `projectTrackerData`
+4. Copy the JSON value
+
+### Importing Data
+To restore or import data:
+1. Open browser Developer Tools (F12)
+2. Go to Application > Local Storage
+3. Set key `projectTrackerData` with your JSON data
+4. Refresh the page
+
+### Clearing Data
+To start fresh:
+1. Open browser Developer Tools (F12)
+2. Go to Application > Local Storage
+3. Delete key: `projectTrackerData`
+4. Refresh the page
+
+## Customization
+
+The app uses CSS variables for easy theming. Edit `css/styles.css`:
+
+```css
+:root {
+    --primary-color: #4f46e5;     /* Main accent color */
+    --on-track: #10b981;          /* Success/on-track color */
+    --at-risk: #f59e0b;           /* Warning/at-risk color */
+    --blocked: #ef4444;           /* Error/blocked color */
+    /* ... more variables */
+}
+```
+
+## Future Enhancements
+
+Possible additions:
+- Export to PDF/Excel
+- Team member management
+- Email notifications
+- Calendar integration
+- File attachments
+- Comments and activity log
+- Backend API integration
+- User authentication
+- Gantt chart view
+- Time tracking
+
+## Support
+
+For issues or questions about the Turn.js library, visit:
+- [Turn.js GitHub Repository](https://github.com/blasten/turn.js)
+
+## License
+
+This webapp is part of the Turn.js project. See the main repository for license information.
diff --git a/webapp/css/styles.css b/webapp/css/styles.css
new file mode 100644
index 0000000..fa28d95
--- /dev/null
+++ b/webapp/css/styles.css
@@ -0,0 +1,754 @@
+/* ==================== */
+/* CSS Variables */
+/* ==================== */
+:root {
+    --primary-color: #4f46e5;
+    --primary-hover: #4338ca;
+    --secondary-color: #64748b;
+    --danger-color: #ef4444;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --blocked-color: #dc2626;
+
+    --on-track: #10b981;
+    --at-risk: #f59e0b;
+    --blocked: #ef4444;
+    --completed: #8b5cf6;
+
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8fafc;
+    --bg-tertiary: #f1f5f9;
+    --border-color: #e2e8f0;
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+}
+
+/* ==================== */
+/* Reset & Base Styles */
+/* ==================== */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+/* ==================== */
+/* Layout */
+/* ==================== */
+.app-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.app-header {
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border-color);
+    box-shadow: var(--shadow-sm);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.header-content {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1.5rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.header-content h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.main-content {
+    flex: 1;
+    max-width: 1400px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+/* ==================== */
+/* Views */
+/* ==================== */
+.view {
+    display: none;
+}
+
+.view.active {
+    display: block;
+}
+
+/* ==================== */
+/* Buttons */
+/* ==================== */
+.btn {
+    padding: 0.625rem 1.25rem;
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.btn-primary {
+    background: var(--primary-color);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: var(--primary-hover);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-md);
+}
+
+.btn-secondary {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+.btn-secondary:hover {
+    background: var(--border-color);
+}
+
+.btn-danger {
+    background: var(--danger-color);
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+}
+
+.btn-small {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+}
+
+/* ==================== */
+/* Dashboard */
+/* ==================== */
+.dashboard-header {
+    margin-bottom: 2rem;
+}
+
+.dashboard-header h2 {
+    font-size: 1.875rem;
+    margin-bottom: 1.5rem;
+    color: var(--text-primary);
+}
+
+.stats-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.stat-card {
+    background: var(--bg-primary);
+    padding: 1.5rem;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+    border-left: 4px solid;
+    transition: transform 0.2s;
+}
+
+.stat-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+
+.stat-card.on-track {
+    border-color: var(--on-track);
+}
+
+.stat-card.at-risk {
+    border-color: var(--at-risk);
+}
+
+.stat-card.blocked {
+    border-color: var(--blocked);
+}
+
+.stat-card.total {
+    border-color: var(--primary-color);
+}
+
+.stat-value {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 0.25rem;
+}
+
+.stat-card.on-track .stat-value {
+    color: var(--on-track);
+}
+
+.stat-card.at-risk .stat-value {
+    color: var(--at-risk);
+}
+
+.stat-card.blocked .stat-value {
+    color: var(--blocked);
+}
+
+.stat-card.total .stat-value {
+    color: var(--primary-color);
+}
+
+.stat-label {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+/* ==================== */
+/* Projects Grid */
+/* ==================== */
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 1.5rem;
+}
+
+.project-card {
+    background: var(--bg-primary);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+    box-shadow: var(--shadow-md);
+    cursor: pointer;
+    transition: all 0.2s;
+    border-top: 4px solid;
+}
+
+.project-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+}
+
+.project-card.on-track {
+    border-color: var(--on-track);
+}
+
+.project-card.at-risk {
+    border-color: var(--at-risk);
+}
+
+.project-card.blocked {
+    border-color: var(--blocked);
+}
+
+.project-card.completed {
+    border-color: var(--completed);
+    opacity: 0.85;
+}
+
+.project-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    margin-bottom: 1rem;
+}
+
+.project-card-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.25rem;
+}
+
+.project-status-badge {
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.status-on-track {
+    background: rgba(16, 185, 129, 0.1);
+    color: var(--on-track);
+}
+
+.status-at-risk {
+    background: rgba(245, 158, 11, 0.1);
+    color: var(--at-risk);
+}
+
+.status-blocked {
+    background: rgba(239, 68, 68, 0.1);
+    color: var(--blocked);
+}
+
+.status-completed {
+    background: rgba(139, 92, 246, 0.1);
+    color: var(--completed);
+}
+
+.project-card-description {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    margin-bottom: 1rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.project-card-meta {
+    display: flex;
+    gap: 1.5rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.project-card-meta-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.project-card-footer {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.project-progress {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.75rem;
+    margin-bottom: 0.5rem;
+    color: var(--text-secondary);
+}
+
+.progress-bar {
+    height: 6px;
+    background: var(--bg-tertiary);
+    border-radius: 999px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: var(--primary-color);
+    transition: width 0.3s;
+}
+
+.project-card.on-track .progress-fill {
+    background: var(--on-track);
+}
+
+.project-card.at-risk .progress-fill {
+    background: var(--at-risk);
+}
+
+.project-card.blocked .progress-fill {
+    background: var(--blocked);
+}
+
+/* ==================== */
+/* Project Detail View */
+/* ==================== */
+.detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.detail-actions {
+    display: flex;
+    gap: 1rem;
+}
+
+.project-detail-header {
+    background: var(--bg-primary);
+    padding: 2rem;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+    margin-bottom: 2rem;
+}
+
+.project-detail-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+}
+
+.project-detail-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    margin-top: 1.5rem;
+    font-size: 0.875rem;
+}
+
+.meta-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.meta-label {
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.meta-value {
+    color: var(--text-primary);
+    font-weight: 600;
+}
+
+.project-sections {
+    display: grid;
+    gap: 2rem;
+}
+
+.section {
+    background: var(--bg-primary);
+    padding: 2rem;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+}
+
+.section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+}
+
+.section-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--text-secondary);
+}
+
+/* ==================== */
+/* Tasks */
+/* ==================== */
+.tasks-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.task-item {
+    padding: 1rem;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-md);
+    border-left: 3px solid;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: all 0.2s;
+}
+
+.task-item:hover {
+    background: var(--bg-tertiary);
+}
+
+.task-item.todo {
+    border-color: var(--secondary-color);
+}
+
+.task-item.in-progress {
+    border-color: var(--primary-color);
+}
+
+.task-item.completed {
+    border-color: var(--success-color);
+    opacity: 0.7;
+}
+
+.task-item.blocked {
+    border-color: var(--danger-color);
+}
+
+.task-content {
+    flex: 1;
+}
+
+.task-name {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.task-item.completed .task-name {
+    text-decoration: line-through;
+}
+
+.task-meta {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+
+.task-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+/* ==================== */
+/* Milestones */
+/* ==================== */
+.milestones-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.milestone-item {
+    padding: 1rem;
+    background: var(--bg-secondary);
+    border-radius: var(--radius-md);
+    border-left: 3px solid;
+    transition: all 0.2s;
+}
+
+.milestone-item:hover {
+    background: var(--bg-tertiary);
+}
+
+.milestone-item.pending {
+    border-color: var(--warning-color);
+}
+
+.milestone-item.achieved {
+    border-color: var(--success-color);
+}
+
+.milestone-item.missed {
+    border-color: var(--danger-color);
+}
+
+.milestone-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.milestone-name {
+    font-weight: 600;
+}
+
+.milestone-date {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.milestone-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+/* ==================== */
+/* Modal */
+/* ==================== */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal.active {
+    display: flex;
+}
+
+.modal-content {
+    background: var(--bg-primary);
+    border-radius: var(--radius-lg);
+    width: 90%;
+    max-width: 600px;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-shadow: var(--shadow-lg);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.modal-header h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: var(--text-secondary);
+    padding: 0;
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-sm);
+    transition: all 0.2s;
+}
+
+.modal-close:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+}
+
+form {
+    padding: 1.5rem;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    font-size: 0.875rem;
+    color: var(--text-primary);
+}
+
+input[type="text"],
+input[type="date"],
+textarea,
+select {
+    width: 100%;
+    padding: 0.625rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
+    font-family: inherit;
+    transition: all 0.2s;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+textarea {
+    resize: vertical;
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+}
+
+/* ==================== */
+/* Responsive */
+/* ==================== */
+@media (max-width: 768px) {
+    .header-content {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .main-content {
+        padding: 1rem;
+    }
+
+    .projects-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .stats-cards {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+
+    .detail-header {
+        flex-direction: column;
+        gap: 1rem;
+        align-items: stretch;
+    }
+
+    .detail-actions {
+        flex-direction: column;
+    }
+}
+
+/* ==================== */
+/* Utilities */
+/* ==================== */
+.empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--text-secondary);
+}
+
+.empty-state-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    opacity: 0.5;
+}
+
+.empty-state-text {
+    font-size: 1rem;
+    margin-bottom: 1.5rem;
+}
diff --git a/webapp/index.html b/webapp/index.html
new file mode 100644
index 0000000..774688c
--- /dev/null
+++ b/webapp/index.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Team Project Tracker</title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Header -->
+        <header class="app-header">
+            <div class="header-content">
+                <h1>🎯 Team Project Tracker</h1>
+                <button id="newProjectBtn" class="btn btn-primary">+ New Project</button>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Dashboard View -->
+            <section id="dashboardView" class="view active">
+                <div class="dashboard-header">
+                    <h2>Dashboard Overview</h2>
+                    <div class="stats-cards">
+                        <div class="stat-card on-track">
+                            <div class="stat-value" id="onTrackCount">0</div>
+                            <div class="stat-label">On Track</div>
+                        </div>
+                        <div class="stat-card at-risk">
+                            <div class="stat-value" id="atRiskCount">0</div>
+                            <div class="stat-label">At Risk</div>
+                        </div>
+                        <div class="stat-card blocked">
+                            <div class="stat-value" id="blockedCount">0</div>
+                            <div class="stat-label">Blocked</div>
+                        </div>
+                        <div class="stat-card total">
+                            <div class="stat-value" id="totalCount">0</div>
+                            <div class="stat-label">Total Projects</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="projects-grid" id="projectsGrid">
+                    <!-- Projects will be dynamically inserted here -->
+                </div>
+            </section>
+
+            <!-- Project Detail View -->
+            <section id="projectDetailView" class="view">
+                <div class="detail-header">
+                    <button id="backToDashboard" class="btn btn-secondary">← Back to Dashboard</button>
+                    <div class="detail-actions">
+                        <button id="editProjectBtn" class="btn btn-secondary">Edit Project</button>
+                        <button id="deleteProjectBtn" class="btn btn-danger">Delete</button>
+                    </div>
+                </div>
+
+                <div class="project-detail" id="projectDetail">
+                    <!-- Project details will be dynamically inserted here -->
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <!-- Modal for New/Edit Project -->
+    <div id="projectModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="modalTitle">New Project</h3>
+                <button class="modal-close">&times;</button>
+            </div>
+            <form id="projectForm">
+                <div class="form-group">
+                    <label for="projectName">Project Name *</label>
+                    <input type="text" id="projectName" required>
+                </div>
+
+                <div class="form-group">
+                    <label for="projectDescription">Description</label>
+                    <textarea id="projectDescription" rows="3"></textarea>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="projectStatus">Status *</label>
+                        <select id="projectStatus" required>
+                            <option value="on-track">On Track</option>
+                            <option value="at-risk">At Risk</option>
+                            <option value="blocked">Blocked</option>
+                            <option value="completed">Completed</option>
+                        </select>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="projectOwner">Project Owner</label>
+                        <input type="text" id="projectOwner">
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="projectStartDate">Start Date</label>
+                        <input type="date" id="projectStartDate">
+                    </div>
+
+                    <div class="form-group">
+                        <label for="projectEndDate">Target End Date</label>
+                        <input type="date" id="projectEndDate">
+                    </div>
+                </div>
+
+                <div class="modal-actions">
+                    <button type="button" class="btn btn-secondary cancel-btn">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Save Project</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Modal for Tasks -->
+    <div id="taskModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="taskModalTitle">New Task</h3>
+                <button class="modal-close">&times;</button>
+            </div>
+            <form id="taskForm">
+                <div class="form-group">
+                    <label for="taskName">Task Name *</label>
+                    <input type="text" id="taskName" required>
+                </div>
+
+                <div class="form-group">
+                    <label for="taskDescription">Description</label>
+                    <textarea id="taskDescription" rows="2"></textarea>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="taskStatus">Status *</label>
+                        <select id="taskStatus" required>
+                            <option value="todo">To Do</option>
+                            <option value="in-progress">In Progress</option>
+                            <option value="completed">Completed</option>
+                            <option value="blocked">Blocked</option>
+                        </select>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="taskAssignee">Assignee</label>
+                        <input type="text" id="taskAssignee">
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="taskDueDate">Due Date</label>
+                    <input type="date" id="taskDueDate">
+                </div>
+
+                <div class="modal-actions">
+                    <button type="button" class="btn btn-secondary cancel-btn">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Save Task</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Modal for Milestones -->
+    <div id="milestoneModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3 id="milestoneModalTitle">New Milestone</h3>
+                <button class="modal-close">&times;</button>
+            </div>
+            <form id="milestoneForm">
+                <div class="form-group">
+                    <label for="milestoneName">Milestone Name *</label>
+                    <input type="text" id="milestoneName" required>
+                </div>
+
+                <div class="form-group">
+                    <label for="milestoneDescription">Description</label>
+                    <textarea id="milestoneDescription" rows="2"></textarea>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="milestoneDate">Target Date *</label>
+                        <input type="date" id="milestoneDate" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="milestoneStatus">Status *</label>
+                        <select id="milestoneStatus" required>
+                            <option value="pending">Pending</option>
+                            <option value="achieved">Achieved</option>
+                            <option value="missed">Missed</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="modal-actions">
+                    <button type="button" class="btn btn-secondary cancel-btn">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Save Milestone</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script src="js/app.js"></script>
+</body>
+</html>
diff --git a/webapp/js/app.js b/webapp/js/app.js
new file mode 100644
index 0000000..ce067db
--- /dev/null
+++ b/webapp/js/app.js
@@ -0,0 +1,710 @@
+// ==========================================
+// Team Project Tracker - Application Logic
+// ==========================================
+
+class ProjectTracker {
+    constructor() {
+        this.projects = [];
+        this.currentProjectId = null;
+        this.editingTaskId = null;
+        this.editingMilestoneId = null;
+        this.editMode = false;
+
+        this.init();
+    }
+
+    // ==========================================
+    // Initialization
+    // ==========================================
+    init() {
+        this.loadFromStorage();
+        this.setupEventListeners();
+        this.renderDashboard();
+    }
+
+    // ==========================================
+    // Local Storage
+    // ==========================================
+    loadFromStorage() {
+        const stored = localStorage.getItem('projectTrackerData');
+        if (stored) {
+            this.projects = JSON.parse(stored);
+        } else {
+            // Add sample data for first time users
+            this.projects = this.generateSampleData();
+            this.saveToStorage();
+        }
+    }
+
+    saveToStorage() {
+        localStorage.setItem('projectTrackerData', JSON.stringify(this.projects));
+    }
+
+    generateSampleData() {
+        return [
+            {
+                id: this.generateId(),
+                name: 'Website Redesign',
+                description: 'Complete overhaul of company website with modern design and improved UX',
+                status: 'on-track',
+                owner: 'Sarah Johnson',
+                startDate: '2026-01-01',
+                endDate: '2026-03-31',
+                tasks: [
+                    {
+                        id: this.generateId(),
+                        name: 'Design mockups',
+                        description: 'Create wireframes and high-fidelity mockups',
+                        status: 'completed',
+                        assignee: 'Design Team',
+                        dueDate: '2026-01-15'
+                    },
+                    {
+                        id: this.generateId(),
+                        name: 'Frontend development',
+                        description: 'Implement responsive design',
+                        status: 'in-progress',
+                        assignee: 'Dev Team',
+                        dueDate: '2026-02-28'
+                    }
+                ],
+                milestones: [
+                    {
+                        id: this.generateId(),
+                        name: 'Design Approval',
+                        description: 'Final design approved by stakeholders',
+                        date: '2026-01-20',
+                        status: 'achieved'
+                    },
+                    {
+                        id: this.generateId(),
+                        name: 'Beta Launch',
+                        description: 'Launch beta version for testing',
+                        date: '2026-03-15',
+                        status: 'pending'
+                    }
+                ]
+            },
+            {
+                id: this.generateId(),
+                name: 'Mobile App Development',
+                description: 'Build native iOS and Android applications',
+                status: 'at-risk',
+                owner: 'Mike Chen',
+                startDate: '2025-12-01',
+                endDate: '2026-04-30',
+                tasks: [
+                    {
+                        id: this.generateId(),
+                        name: 'API Integration',
+                        description: 'Connect mobile apps to backend API',
+                        status: 'blocked',
+                        assignee: 'Backend Team',
+                        dueDate: '2026-02-01'
+                    }
+                ],
+                milestones: [
+                    {
+                        id: this.generateId(),
+                        name: 'MVP Complete',
+                        description: 'Minimum viable product ready',
+                        date: '2026-02-15',
+                        status: 'missed'
+                    }
+                ]
+            },
+            {
+                id: this.generateId(),
+                name: 'Database Migration',
+                description: 'Migrate legacy database to new cloud infrastructure',
+                status: 'blocked',
+                owner: 'David Park',
+                startDate: '2026-01-10',
+                endDate: '2026-02-28',
+                tasks: [],
+                milestones: []
+            }
+        ];
+    }
+
+    // ==========================================
+    // Event Listeners
+    // ==========================================
+    setupEventListeners() {
+        // New Project Button
+        document.getElementById('newProjectBtn').addEventListener('click', () => {
+            this.openProjectModal();
+        });
+
+        // Project Form
+        document.getElementById('projectForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.saveProject();
+        });
+
+        // Task Form
+        document.getElementById('taskForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.saveTask();
+        });
+
+        // Milestone Form
+        document.getElementById('milestoneForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.saveMilestone();
+        });
+
+        // Modal Close Buttons
+        document.querySelectorAll('.modal-close, .cancel-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                this.closeAllModals();
+            });
+        });
+
+        // Close modals on outside click
+        document.querySelectorAll('.modal').forEach(modal => {
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    this.closeAllModals();
+                }
+            });
+        });
+
+        // Back to Dashboard
+        document.getElementById('backToDashboard').addEventListener('click', () => {
+            this.showDashboard();
+        });
+
+        // Edit Project Button
+        document.getElementById('editProjectBtn').addEventListener('click', () => {
+            this.openProjectModal(this.currentProjectId);
+        });
+
+        // Delete Project Button
+        document.getElementById('deleteProjectBtn').addEventListener('click', () => {
+            if (confirm('Are you sure you want to delete this project? This action cannot be undone.')) {
+                this.deleteProject(this.currentProjectId);
+                this.showDashboard();
+            }
+        });
+    }
+
+    // ==========================================
+    // View Management
+    // ==========================================
+    showView(viewId) {
+        document.querySelectorAll('.view').forEach(view => {
+            view.classList.remove('active');
+        });
+        document.getElementById(viewId).classList.add('active');
+    }
+
+    showDashboard() {
+        this.showView('dashboardView');
+        this.renderDashboard();
+    }
+
+    showProjectDetail(projectId) {
+        this.currentProjectId = projectId;
+        this.showView('projectDetailView');
+        this.renderProjectDetail(projectId);
+    }
+
+    // ==========================================
+    // Dashboard Rendering
+    // ==========================================
+    renderDashboard() {
+        this.updateStats();
+        this.renderProjectsGrid();
+    }
+
+    updateStats() {
+        const stats = {
+            onTrack: this.projects.filter(p => p.status === 'on-track').length,
+            atRisk: this.projects.filter(p => p.status === 'at-risk').length,
+            blocked: this.projects.filter(p => p.status === 'blocked').length,
+            total: this.projects.length
+        };
+
+        document.getElementById('onTrackCount').textContent = stats.onTrack;
+        document.getElementById('atRiskCount').textContent = stats.atRisk;
+        document.getElementById('blockedCount').textContent = stats.blocked;
+        document.getElementById('totalCount').textContent = stats.total;
+    }
+
+    renderProjectsGrid() {
+        const grid = document.getElementById('projectsGrid');
+
+        if (this.projects.length === 0) {
+            grid.innerHTML = `
+                <div class="empty-state">
+                    <div class="empty-state-icon">📋</div>
+                    <div class="empty-state-text">No projects yet. Create your first project to get started!</div>
+                    <button class="btn btn-primary" onclick="app.openProjectModal()">+ Create Project</button>
+                </div>
+            `;
+            return;
+        }
+
+        grid.innerHTML = this.projects.map(project => {
+            const taskStats = this.getTaskStats(project);
+            const progress = taskStats.total > 0
+                ? Math.round((taskStats.completed / taskStats.total) * 100)
+                : 0;
+
+            return `
+                <div class="project-card ${project.status}" onclick="app.showProjectDetail('${project.id}')">
+                    <div class="project-card-header">
+                        <div>
+                            <div class="project-card-title">${this.escapeHtml(project.name)}</div>
+                        </div>
+                        <span class="project-status-badge status-${project.status}">
+                            ${this.formatStatus(project.status)}
+                        </span>
+                    </div>
+
+                    ${project.description ? `
+                        <div class="project-card-description">${this.escapeHtml(project.description)}</div>
+                    ` : ''}
+
+                    <div class="project-card-meta">
+                        ${project.owner ? `
+                            <div class="project-card-meta-item">
+                                <span>👤</span>
+                                <span>${this.escapeHtml(project.owner)}</span>
+                            </div>
+                        ` : ''}
+                        ${project.endDate ? `
+                            <div class="project-card-meta-item">
+                                <span>📅</span>
+                                <span>${this.formatDate(project.endDate)}</span>
+                            </div>
+                        ` : ''}
+                    </div>
+
+                    <div class="project-card-footer">
+                        <div class="project-progress">
+                            <span>Tasks Progress</span>
+                            <span>${taskStats.completed}/${taskStats.total} completed</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill" style="width: ${progress}%"></div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+    }
+
+    // ==========================================
+    // Project Detail Rendering
+    // ==========================================
+    renderProjectDetail(projectId) {
+        const project = this.projects.find(p => p.id === projectId);
+        if (!project) return;
+
+        const container = document.getElementById('projectDetail');
+        const taskStats = this.getTaskStats(project);
+
+        container.innerHTML = `
+            <div class="project-detail-header">
+                <div style="display: flex; justify-content: space-between; align-items: start;">
+                    <div>
+                        <h2 class="project-detail-title">${this.escapeHtml(project.name)}</h2>
+                        <span class="project-status-badge status-${project.status}">
+                            ${this.formatStatus(project.status)}
+                        </span>
+                    </div>
+                </div>
+
+                ${project.description ? `
+                    <p style="margin-top: 1rem; color: var(--text-secondary);">${this.escapeHtml(project.description)}</p>
+                ` : ''}
+
+                <div class="project-detail-meta">
+                    ${project.owner ? `
+                        <div class="meta-item">
+                            <span class="meta-label">Project Owner</span>
+                            <span class="meta-value">${this.escapeHtml(project.owner)}</span>
+                        </div>
+                    ` : ''}
+                    ${project.startDate ? `
+                        <div class="meta-item">
+                            <span class="meta-label">Start Date</span>
+                            <span class="meta-value">${this.formatDate(project.startDate)}</span>
+                        </div>
+                    ` : ''}
+                    ${project.endDate ? `
+                        <div class="meta-item">
+                            <span class="meta-label">Target End Date</span>
+                            <span class="meta-value">${this.formatDate(project.endDate)}</span>
+                        </div>
+                    ` : ''}
+                    <div class="meta-item">
+                        <span class="meta-label">Tasks Completed</span>
+                        <span class="meta-value">${taskStats.completed} / ${taskStats.total}</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="project-sections">
+                <!-- Tasks Section -->
+                <div class="section">
+                    <div class="section-header">
+                        <h3 class="section-title">Tasks</h3>
+                        <button class="btn btn-primary btn-small" onclick="app.openTaskModal()">+ Add Task</button>
+                    </div>
+                    ${this.renderTasks(project.tasks)}
+                </div>
+
+                <!-- Milestones Section -->
+                <div class="section">
+                    <div class="section-header">
+                        <h3 class="section-title">Milestones</h3>
+                        <button class="btn btn-primary btn-small" onclick="app.openMilestoneModal()">+ Add Milestone</button>
+                    </div>
+                    ${this.renderMilestones(project.milestones)}
+                </div>
+            </div>
+        `;
+    }
+
+    renderTasks(tasks) {
+        if (!tasks || tasks.length === 0) {
+            return `
+                <div class="empty-state">
+                    <div class="empty-state-text">No tasks yet. Add your first task to get started!</div>
+                </div>
+            `;
+        }
+
+        return `
+            <div class="tasks-list">
+                ${tasks.map(task => `
+                    <div class="task-item ${task.status}">
+                        <div class="task-content">
+                            <div class="task-name">${this.escapeHtml(task.name)}</div>
+                            ${task.description ? `<div style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem;">${this.escapeHtml(task.description)}</div>` : ''}
+                            <div class="task-meta">
+                                ${task.assignee ? `<span>👤 ${this.escapeHtml(task.assignee)}</span>` : ''}
+                                ${task.dueDate ? `<span>📅 ${this.formatDate(task.dueDate)}</span>` : ''}
+                                <span class="project-status-badge status-${task.status}">${this.formatStatus(task.status)}</span>
+                            </div>
+                        </div>
+                        <div class="task-actions">
+                            <button class="btn btn-secondary btn-small" onclick="app.openTaskModal('${task.id}')">Edit</button>
+                            <button class="btn btn-danger btn-small" onclick="app.deleteTask('${task.id}')">Delete</button>
+                        </div>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    }
+
+    renderMilestones(milestones) {
+        if (!milestones || milestones.length === 0) {
+            return `
+                <div class="empty-state">
+                    <div class="empty-state-text">No milestones yet. Add your first milestone to track progress!</div>
+                </div>
+            `;
+        }
+
+        return `
+            <div class="milestones-list">
+                ${milestones.map(milestone => `
+                    <div class="milestone-item ${milestone.status}">
+                        <div class="milestone-header">
+                            <div class="milestone-name">${this.escapeHtml(milestone.name)}</div>
+                            <div style="display: flex; gap: 1rem; align-items: center;">
+                                <span class="project-status-badge status-${milestone.status}">${this.formatStatus(milestone.status)}</span>
+                                <div class="milestone-actions">
+                                    <button class="btn btn-secondary btn-small" onclick="app.openMilestoneModal('${milestone.id}')">Edit</button>
+                                    <button class="btn btn-danger btn-small" onclick="app.deleteMilestone('${milestone.id}')">Delete</button>
+                                </div>
+                            </div>
+                        </div>
+                        ${milestone.description ? `<div style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.5rem;">${this.escapeHtml(milestone.description)}</div>` : ''}
+                        <div class="milestone-date" style="margin-top: 0.5rem;">📅 ${this.formatDate(milestone.date)}</div>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+    }
+
+    // ==========================================
+    // Modal Management
+    // ==========================================
+    openProjectModal(projectId = null) {
+        const modal = document.getElementById('projectModal');
+        const form = document.getElementById('projectForm');
+        const title = document.getElementById('modalTitle');
+
+        form.reset();
+        this.editMode = !!projectId;
+
+        if (projectId) {
+            const project = this.projects.find(p => p.id === projectId);
+            if (project) {
+                title.textContent = 'Edit Project';
+                document.getElementById('projectName').value = project.name;
+                document.getElementById('projectDescription').value = project.description || '';
+                document.getElementById('projectStatus').value = project.status;
+                document.getElementById('projectOwner').value = project.owner || '';
+                document.getElementById('projectStartDate').value = project.startDate || '';
+                document.getElementById('projectEndDate').value = project.endDate || '';
+            }
+        } else {
+            title.textContent = 'New Project';
+            this.currentProjectId = null;
+        }
+
+        modal.classList.add('active');
+    }
+
+    openTaskModal(taskId = null) {
+        const modal = document.getElementById('taskModal');
+        const form = document.getElementById('taskForm');
+        const title = document.getElementById('taskModalTitle');
+
+        form.reset();
+        this.editingTaskId = taskId;
+
+        if (taskId) {
+            const project = this.projects.find(p => p.id === this.currentProjectId);
+            const task = project.tasks.find(t => t.id === taskId);
+            if (task) {
+                title.textContent = 'Edit Task';
+                document.getElementById('taskName').value = task.name;
+                document.getElementById('taskDescription').value = task.description || '';
+                document.getElementById('taskStatus').value = task.status;
+                document.getElementById('taskAssignee').value = task.assignee || '';
+                document.getElementById('taskDueDate').value = task.dueDate || '';
+            }
+        } else {
+            title.textContent = 'New Task';
+        }
+
+        modal.classList.add('active');
+    }
+
+    openMilestoneModal(milestoneId = null) {
+        const modal = document.getElementById('milestoneModal');
+        const form = document.getElementById('milestoneForm');
+        const title = document.getElementById('milestoneModalTitle');
+
+        form.reset();
+        this.editingMilestoneId = milestoneId;
+
+        if (milestoneId) {
+            const project = this.projects.find(p => p.id === this.currentProjectId);
+            const milestone = project.milestones.find(m => m.id === milestoneId);
+            if (milestone) {
+                title.textContent = 'Edit Milestone';
+                document.getElementById('milestoneName').value = milestone.name;
+                document.getElementById('milestoneDescription').value = milestone.description || '';
+                document.getElementById('milestoneDate').value = milestone.date;
+                document.getElementById('milestoneStatus').value = milestone.status;
+            }
+        } else {
+            title.textContent = 'New Milestone';
+        }
+
+        modal.classList.add('active');
+    }
+
+    closeAllModals() {
+        document.querySelectorAll('.modal').forEach(modal => {
+            modal.classList.remove('active');
+        });
+        this.editMode = false;
+        this.editingTaskId = null;
+        this.editingMilestoneId = null;
+    }
+
+    // ==========================================
+    // CRUD Operations - Projects
+    // ==========================================
+    saveProject() {
+        const projectData = {
+            name: document.getElementById('projectName').value,
+            description: document.getElementById('projectDescription').value,
+            status: document.getElementById('projectStatus').value,
+            owner: document.getElementById('projectOwner').value,
+            startDate: document.getElementById('projectStartDate').value,
+            endDate: document.getElementById('projectEndDate').value
+        };
+
+        if (this.editMode && this.currentProjectId) {
+            // Update existing project
+            const project = this.projects.find(p => p.id === this.currentProjectId);
+            if (project) {
+                Object.assign(project, projectData);
+            }
+        } else {
+            // Create new project
+            const newProject = {
+                id: this.generateId(),
+                ...projectData,
+                tasks: [],
+                milestones: []
+            };
+            this.projects.push(newProject);
+        }
+
+        this.saveToStorage();
+        this.closeAllModals();
+
+        if (this.editMode) {
+            this.renderProjectDetail(this.currentProjectId);
+        } else {
+            this.renderDashboard();
+        }
+    }
+
+    deleteProject(projectId) {
+        this.projects = this.projects.filter(p => p.id !== projectId);
+        this.saveToStorage();
+        this.renderDashboard();
+    }
+
+    // ==========================================
+    // CRUD Operations - Tasks
+    // ==========================================
+    saveTask() {
+        const taskData = {
+            name: document.getElementById('taskName').value,
+            description: document.getElementById('taskDescription').value,
+            status: document.getElementById('taskStatus').value,
+            assignee: document.getElementById('taskAssignee').value,
+            dueDate: document.getElementById('taskDueDate').value
+        };
+
+        const project = this.projects.find(p => p.id === this.currentProjectId);
+        if (!project) return;
+
+        if (this.editingTaskId) {
+            // Update existing task
+            const task = project.tasks.find(t => t.id === this.editingTaskId);
+            if (task) {
+                Object.assign(task, taskData);
+            }
+        } else {
+            // Create new task
+            const newTask = {
+                id: this.generateId(),
+                ...taskData
+            };
+            project.tasks.push(newTask);
+        }
+
+        this.saveToStorage();
+        this.closeAllModals();
+        this.renderProjectDetail(this.currentProjectId);
+    }
+
+    deleteTask(taskId) {
+        if (!confirm('Are you sure you want to delete this task?')) return;
+
+        const project = this.projects.find(p => p.id === this.currentProjectId);
+        if (project) {
+            project.tasks = project.tasks.filter(t => t.id !== taskId);
+            this.saveToStorage();
+            this.renderProjectDetail(this.currentProjectId);
+        }
+    }
+
+    // ==========================================
+    // CRUD Operations - Milestones
+    // ==========================================
+    saveMilestone() {
+        const milestoneData = {
+            name: document.getElementById('milestoneName').value,
+            description: document.getElementById('milestoneDescription').value,
+            date: document.getElementById('milestoneDate').value,
+            status: document.getElementById('milestoneStatus').value
+        };
+
+        const project = this.projects.find(p => p.id === this.currentProjectId);
+        if (!project) return;
+
+        if (this.editingMilestoneId) {
+            // Update existing milestone
+            const milestone = project.milestones.find(m => m.id === this.editingMilestoneId);
+            if (milestone) {
+                Object.assign(milestone, milestoneData);
+            }
+        } else {
+            // Create new milestone
+            const newMilestone = {
+                id: this.generateId(),
+                ...milestoneData
+            };
+            project.milestones.push(newMilestone);
+        }
+
+        this.saveToStorage();
+        this.closeAllModals();
+        this.renderProjectDetail(this.currentProjectId);
+    }
+
+    deleteMilestone(milestoneId) {
+        if (!confirm('Are you sure you want to delete this milestone?')) return;
+
+        const project = this.projects.find(p => p.id === this.currentProjectId);
+        if (project) {
+            project.milestones = project.milestones.filter(m => m.id !== milestoneId);
+            this.saveToStorage();
+            this.renderProjectDetail(this.currentProjectId);
+        }
+    }
+
+    // ==========================================
+    // Utility Functions
+    // ==========================================
+    generateId() {
+        return 'id_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+    }
+
+    getTaskStats(project) {
+        const total = project.tasks.length;
+        const completed = project.tasks.filter(t => t.status === 'completed').length;
+        return { total, completed };
+    }
+
+    formatStatus(status) {
+        const statusMap = {
+            'on-track': 'On Track',
+            'at-risk': 'At Risk',
+            'blocked': 'Blocked',
+            'completed': 'Completed',
+            'todo': 'To Do',
+            'in-progress': 'In Progress',
+            'pending': 'Pending',
+            'achieved': 'Achieved',
+            'missed': 'Missed'
+        };
+        return statusMap[status] || status;
+    }
+
+    formatDate(dateString) {
+        if (!dateString) return '';
+        const date = new Date(dateString);
+        return date.toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+// ==========================================
+// Initialize Application
+// ==========================================
+const app = new ProjectTracker();