From b83a1acfbd6471e47860aba77fe862da8a83a642 Mon Sep 17 00:00:00 2001 From: Oliver Sanche Date: Fri, 17 Oct 2025 23:52:09 +0200 Subject: [PATCH] Add complete project management frontend with dashboard and detail views MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Built comprehensive project management UI with form-based project creation, clarifying questions workflow, dashboard with tabs, and detailed project overview pages. ## Features Added ### Project Definition Form - 9-field comprehensive form capturing project details - Skills multi-select with visual feedback - Dynamic goals list management - Budget tracking (hours and amount) - Base44-inspired gradient design - Fixed text visibility with dark text color ### Clarifying Questions Flow - Multi-step wizard modal with progress indicator - Support for text, single-choice, and multi-choice questions - Smooth navigation between questions - Auto-generated questions based on project data ### Projects Dashboard (`/projects`) - Three tabs: Current (active), Planned (planning), Past (completed/on-hold) - Project cards showing status, priority, progress - Task and team member counts - Click to view project details - Empty state with CTA to create first project ### Project Detail Page (`/projects/[id]`) - Comprehensive overview with progress tracking - Stats dashboard (tasks, team, hours) - Goals list with visual checkmarks - Task list with status, assignee, hours, GitHub links - Timeline sidebar (created, deadline, last updated) - Team members with workload percentages - Required skills tags - Budget information ### Database Integration - Prisma schema with Project, Employee, Task, ProjectAssignment models - SQLite database for development - JSON field handling for arrays and objects - API endpoints for fetching projects and project details ### Navigation & UX - Updated home page with "View Projects" button - Auto-redirect to project detail after setup completion - Back navigation from detail to dashboard - Responsive design with mobile support ## Technical Details - TypeScript types for all entities - Prisma ORM with SQLite - API routes: GET /api/projects, GET /api/projects/[id] - Client-side state management with React hooks - Tailwind CSS for styling 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .gitignore | 2 + PROJECT_SETUP.md | 247 +++++++++++++ app/api/projects/[id]/route.ts | 64 ++++ app/api/projects/create/route.ts | 138 ++++++++ app/api/projects/finalize/route.ts | 56 +++ app/api/projects/route.ts | 40 +++ app/chat/page.tsx | 5 + app/create-project/page.tsx | 5 + app/page.tsx | 74 +++- app/projects/[id]/page.tsx | 452 ++++++++++++++++++++++++ app/projects/page.tsx | 237 +++++++++++++ components/ClarifyingQuestionsModal.tsx | 220 ++++++++++++ components/ProjectDefinitionForm.tsx | 421 ++++++++++++++++++++++ lib/prisma.ts | 9 + lib/redpanda.ts | 31 +- lib/types.ts | 98 +++++ package-lock.json | 388 +++++++++++++++++++- package.json | 6 +- prisma/dev.db | Bin 0 -> 45056 bytes prisma/schema.prisma | 83 +++++ 20 files changed, 2559 insertions(+), 17 deletions(-) create mode 100644 PROJECT_SETUP.md create mode 100644 app/api/projects/[id]/route.ts create mode 100644 app/api/projects/create/route.ts create mode 100644 app/api/projects/finalize/route.ts create mode 100644 app/api/projects/route.ts create mode 100644 app/chat/page.tsx create mode 100644 app/create-project/page.tsx create mode 100644 app/projects/[id]/page.tsx create mode 100644 app/projects/page.tsx create mode 100644 components/ClarifyingQuestionsModal.tsx create mode 100644 components/ProjectDefinitionForm.tsx create mode 100644 lib/prisma.ts create mode 100644 lib/types.ts create mode 100644 prisma/dev.db create mode 100644 prisma/schema.prisma diff --git a/.gitignore b/.gitignore index 7b8da95..33f6008 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,5 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +/lib/generated/prisma diff --git a/PROJECT_SETUP.md b/PROJECT_SETUP.md new file mode 100644 index 0000000..f89e315 --- /dev/null +++ b/PROJECT_SETUP.md @@ -0,0 +1,247 @@ +# Breakdown - AI-Powered Project Setup System + +## What We Built + +A Next.js application that allows users to define projects through a structured form, get AI-powered clarifying questions, and automatically set up the entire project infrastructure including: + +- **Project Definition Form**: Comprehensive form capturing all 9 key project attributes +- **Clarifying Questions Flow**: AI-generated follow-up questions for better project understanding +- **Database Integration**: Prisma + SQLite for storing projects, employees, and tasks +- **Base44-Style UI**: Clean, modern interface with gradient backgrounds and smooth transitions + +## Key Features + +### 1. Project Definition (9 Fields) + +1. **Project Title/Objective** - Clear project name +2. **Detailed Description** - Full context for AI processing +3. **Goals/Deliverables** - Measurable outcomes +4. **Timeline** - Deadline and flexibility preferences +5. **Effort Level** - Team size and duration estimates +6. **Required Skills** - Multi-select skill tags (Frontend, Backend, ML, etc.) +7. **Priority** - Low/Medium/High urgency +8. **Dependencies** - Related systems or projects +9. **Budget** - Hours and/or monetary budget + +### 2. Clarifying Questions Modal + +- Multi-step wizard UI +- Progress indicator +- Support for text, single-choice, and multi-choice questions +- Dynamic question generation based on project data + +### 3. Database Schema + +```prisma +- Project (title, description, goals, skills, budget, etc.) +- Employee (name, email, skills, workload, availability) +- Task (title, description, assignedTo, estimatedHours, status) +- ProjectAssignment (many-to-many: projects ↔ employees) +``` + +### 4. Landing Page + +- Base44-inspired design +- Two primary CTAs: "Start Building" and "Chat with AI" +- Template suggestions (Reporting Dashboard, Gaming Platform, etc.) + +## File Structure + +``` +/app + /api + /projects + /create # Initial project submission + /finalize # Save project after clarifying questions + /create-project # Project definition form page + /chat # ChatKit interface page + page.tsx # Landing page + +/components + ProjectDefinitionForm.tsx # Main form with all 9 fields + ClarifyingQuestionsModal.tsx # Multi-step question wizard + ChatKitPanel.tsx # Existing chat interface + ErrorOverlay.tsx # Error handling UI + +/lib + types.ts # TypeScript interfaces + prisma.ts # Prisma client singleton + config.ts # App configuration + redpanda.ts # Kafka/Redpanda producer + +/prisma + schema.prisma # Database schema + dev.db # SQLite database file +``` + +## Next Steps for Full Implementation + +### 1. GitHub Integration +```typescript +// lib/github.ts +export async function createRepository(projectName: string) { + // Use Octokit to create repo +} + +export async function createIssues(repoName: string, tasks: Task[]) { + // Create GitHub issues for each task +} +``` + +### 2. AI Task Breakdown +```typescript +// lib/ai-orchestration.ts +export async function generateTaskBreakdown(project: ProjectDefinition) { + // Call ChatKit workflow to decompose project into tasks + // Assign tasks based on employee skills/availability +} +``` + +### 3. Codex Node System +```typescript +// lib/codex-node.ts +export async function spawnCodexNode(task: Task) { + // Create ChatKit session for this specific task + // Agent works on task autonomously + // Monitor progress via telemetry + // Create PR when complete +} +``` + +### 4. Employee Management +- Add `/employees` page to view/manage team +- Import employee data from external systems +- Track workload and availability in real-time + +### 5. Project Dashboard +- View all projects and their status +- Monitor active codex nodes +- Review and approve PRs +- Track progress against goals + +## API Endpoints + +### `POST /api/projects/create` +**Purpose**: Initial project submission +**Request**: +```json +{ + "title": "Customer Dashboard", + "description": "...", + "goals": ["..."], + "effortLevel": "medium", + "requiredSkills": ["frontend", "backend"], + "priority": "high" +} +``` +**Response**: +```json +{ + "projectId": "proj_123", + "status": "needs_clarification", + "clarifyingQuestions": [...] +} +``` + +### `POST /api/projects/finalize` +**Purpose**: Save project after clarifying questions +**Request**: +```json +{ + "projectId": "proj_123", + "answers": { "question_0": "React", ... }, + "projectData": { ... } +} +``` + +## Environment Variables + +```bash +# Database +DATABASE_URL="file:./prisma/dev.db" + +# OpenAI ChatKit +OPENAI_API_KEY="sk-..." +NEXT_PUBLIC_CHATKIT_WORKFLOW_ID="wf_..." +NEXT_PUBLIC_CLARIFICATION_WORKFLOW_ID="wf_..." # For clarifying questions + +# Redpanda/Kafka (Optional) +REDPANDA_BROKERS="broker1:9092,broker2:9092" +REDPANDA_SASL_USERNAME="username" +REDPANDA_SASL_PASSWORD="password" +REDPANDA_TELEMETRY_TOPIC="chatkit_telemetry" + +# GitHub (TODO) +GITHUB_TOKEN="ghp_..." +GITHUB_ORG="your-org" +``` + +## Running the Application + +```bash +# Install dependencies +npm install + +# Set up database +npx prisma generate +npx prisma db push + +# Run development server +npm run dev + +# Build for production +npm run build +npm start +``` + +## Access Points + +- **Landing Page**: http://localhost:3000 +- **Create Project**: http://localhost:3000/create-project +- **Chat Interface**: http://localhost:3000/chat + +## Design Philosophy + +The UI follows Base44's design principles: +- Clean gradients (sky-200 → orange-50 → orange-100) +- Orange accent color (#f97316) for primary actions +- Large, bold typography +- Ample whitespace +- Smooth transitions and hover states +- Mobile-responsive design + +## Future Enhancements + +1. **Real-time Progress Tracking**: WebSocket connections to monitor codex nodes +2. **AI-Powered Employee Matching**: ML model to optimize task assignments +3. **Cost Estimation**: Predict project costs based on historical data +4. **Sprint Planning**: Auto-generate sprint schedules from project timeline +5. **Code Review Automation**: AI reviews PRs before human approval +6. **Analytics Dashboard**: Visualize team productivity and project metrics + +## Architecture Decisions + +### Why SQLite? +- Fast prototyping +- Zero configuration +- Easy to migrate to PostgreSQL later + +### Why Prisma? +- Type-safe database access +- Excellent DX with migrations +- Auto-generated TypeScript types + +### Why ChatKit? +- Pre-built UI components +- Workflow orchestration +- Session management +- Tool calling support + +## Contributing + +To extend this system: + +1. **Add new project fields**: Update `ProjectDefinition` in `lib/types.ts` and the form +2. **Customize clarifying questions**: Edit `generateClarifyingQuestions()` in `/api/projects/create` +3. **Integrate new AI workflows**: Create new ChatKit workflows and reference them in config +4. **Add database models**: Update `prisma/schema.prisma` and run `npx prisma generate` diff --git a/app/api/projects/[id]/route.ts b/app/api/projects/[id]/route.ts new file mode 100644 index 0000000..5d10d69 --- /dev/null +++ b/app/api/projects/[id]/route.ts @@ -0,0 +1,64 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { prisma } from '@/lib/prisma'; + +export async function GET( + req: NextRequest, + { params }: { params: Promise<{ id: string }> } +) { + try { + const { id } = await params; + + const project = await prisma.project.findUnique({ + where: { id }, + include: { + tasks: { + include: { + assignedTo: true, + }, + }, + assignments: { + include: { + employee: true, + }, + }, + }, + }); + + if (!project) { + return NextResponse.json( + { error: 'Project not found' }, + { status: 404 } + ); + } + + // Parse JSON fields + const parsedProject = { + ...project, + goals: JSON.parse(project.goals), + requiredSkills: JSON.parse(project.requiredSkills), + dependencies: project.dependencies ? JSON.parse(project.dependencies) : null, + clarifyingAnswers: project.clarifyingAnswers ? JSON.parse(project.clarifyingAnswers) : null, + tasks: project.tasks.map((task) => ({ + ...task, + requiredSkills: JSON.parse(task.requiredSkills), + dependencies: task.dependencies ? JSON.parse(task.dependencies) : null, + })), + assignments: project.assignments.map((assignment) => ({ + ...assignment, + employee: { + ...assignment.employee, + skills: JSON.parse(assignment.employee.skills), + currentProjects: JSON.parse(assignment.employee.currentProjects), + }, + })), + }; + + return NextResponse.json({ project: parsedProject }); + } catch (error) { + console.error('Error fetching project:', error); + return NextResponse.json( + { error: 'Failed to fetch project' }, + { status: 500 } + ); + } +} diff --git a/app/api/projects/create/route.ts b/app/api/projects/create/route.ts new file mode 100644 index 0000000..35e42e8 --- /dev/null +++ b/app/api/projects/create/route.ts @@ -0,0 +1,138 @@ +import { NextRequest, NextResponse } from 'next/server'; +import type { ProjectDefinition, ProjectSetupResponse, ClarifyingQuestion } from '@/lib/types'; + +// This would be your OpenAI ChatKit workflow ID for project clarification +const CLARIFICATION_WORKFLOW_ID = process.env.NEXT_PUBLIC_CLARIFICATION_WORKFLOW_ID || ''; + +export async function POST(req: NextRequest) { + try { + const projectData: Partial = await req.json(); + + // Validate required fields + if (!projectData.title || !projectData.description) { + return NextResponse.json( + { error: 'Title and description are required' }, + { status: 400 } + ); + } + + // Generate a temporary project ID + const projectId = `proj_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; + + // Store project data (in-memory for now, replace with database) + // TODO: Save to database + console.log('Project data received:', { projectId, ...projectData }); + + // Call AI agent to generate clarifying questions + const clarifyingQuestions = await generateClarifyingQuestions(projectData); + + if (clarifyingQuestions && clarifyingQuestions.length > 0) { + return NextResponse.json({ + projectId, + clarifyingQuestions, + status: 'needs_clarification', + }); + } + + // If no clarifying questions needed, proceed with setup + return NextResponse.json({ + projectId, + status: 'ready_to_setup', + }); + } catch (error) { + console.error('Error creating project:', error); + return NextResponse.json( + { error: 'Failed to create project' }, + { status: 500 } + ); + } +} + +/** + * Use AI to generate clarifying questions based on project definition + */ +async function generateClarifyingQuestions( + projectData: Partial +): Promise { + // TODO: Integrate with ChatKit workflow or OpenAI API to generate questions + + // For now, return mock questions based on project data + const questions: ClarifyingQuestion[] = []; + + // If no specific technologies mentioned, ask + if (projectData.description && + !projectData.description.toLowerCase().includes('react') && + !projectData.description.toLowerCase().includes('vue') && + !projectData.description.toLowerCase().includes('angular')) { + questions.push({ + question: 'Which frontend framework would you prefer?', + type: 'choice', + options: ['React', 'Vue', 'Angular', 'Svelte', 'No preference'], + required: false, + }); + } + + // If backend mentioned but no database specified + if (projectData.description && + projectData.requiredSkills?.includes('backend') && + !projectData.description.toLowerCase().includes('postgres') && + !projectData.description.toLowerCase().includes('mongodb')) { + questions.push({ + question: 'Which database system should we use?', + type: 'choice', + options: ['PostgreSQL', 'MongoDB', 'MySQL', 'SQLite', 'No preference'], + required: false, + }); + } + + // If deployment not mentioned + if (projectData.description && + !projectData.description.toLowerCase().includes('deploy') && + !projectData.description.toLowerCase().includes('hosting')) { + questions.push({ + question: 'Where should this be deployed?', + type: 'choice', + options: ['Vercel', 'AWS', 'Google Cloud', 'Self-hosted', 'TBD'], + required: false, + }); + } + + // Ask about testing requirements + questions.push({ + question: 'What level of test coverage do you need?', + type: 'choice', + options: ['Unit tests only', 'Unit + Integration', 'Full E2E coverage', 'Minimal'], + required: true, + }); + + // Ask about code style/conventions + if (projectData.requiredSkills && projectData.requiredSkills.length > 0) { + questions.push({ + question: 'Any specific coding standards or style guides to follow?', + type: 'text', + required: false, + }); + } + + return questions.length > 0 ? questions : null; +} + +/** + * Alternative: Call OpenAI ChatKit workflow for clarifying questions + * + * @param _projectData - The project data to generate questions for + * @returns Array of clarifying questions or null + */ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +async function generateClarifyingQuestionsWithAI( + _projectData: Partial +): Promise { + if (!CLARIFICATION_WORKFLOW_ID) { + console.warn('No clarification workflow ID configured'); + return null; + } + + // TODO: Implement AI-powered clarifying questions + // This would integrate with your ChatKit workflow + return null; +} diff --git a/app/api/projects/finalize/route.ts b/app/api/projects/finalize/route.ts new file mode 100644 index 0000000..0cf1f6e --- /dev/null +++ b/app/api/projects/finalize/route.ts @@ -0,0 +1,56 @@ +import { NextRequest, NextResponse } from 'next/server'; +import { prisma } from '@/lib/prisma'; +import type { ProjectDefinition } from '@/lib/types'; + +export async function POST(req: NextRequest) { + try { + const { projectId, answers, projectData } = await req.json() as { + projectId: string; + answers: Record; + projectData: Partial; + }; + + // Save project to database + const project = await prisma.project.create({ + data: { + id: projectId, + title: projectData.title!, + description: projectData.description!, + goals: JSON.stringify(projectData.goals || []), + deadline: projectData.deadline, + timelinePreference: projectData.timelinePreference || 'moderate', + effortLevel: projectData.effortLevel!, + teamSize: projectData.teamSize, + requiredSkills: JSON.stringify(projectData.requiredSkills || []), + priority: projectData.priority || 'medium', + dependencies: projectData.dependencies ? JSON.stringify(projectData.dependencies) : null, + budgetHours: projectData.budgetHours, + budgetAmount: projectData.budgetAmount, + clarifyingAnswers: JSON.stringify(answers), + status: 'planning', + }, + }); + + // TODO: Trigger AI workflow to: + // 1. Create GitHub repository + // 2. Generate task breakdown + // 3. Assign tasks to employees based on skills/availability + // 4. Create GitHub issues + // 5. Spawn codex nodes for each task + + return NextResponse.json({ + success: true, + project: { + id: project.id, + title: project.title, + status: project.status, + }, + }); + } catch (error) { + console.error('Error finalizing project:', error); + return NextResponse.json( + { error: 'Failed to finalize project' }, + { status: 500 } + ); + } +} diff --git a/app/api/projects/route.ts b/app/api/projects/route.ts new file mode 100644 index 0000000..58c4afe --- /dev/null +++ b/app/api/projects/route.ts @@ -0,0 +1,40 @@ +import { NextResponse } from 'next/server'; +import { prisma } from '@/lib/prisma'; + +export async function GET() { + try { + const projects = await prisma.project.findMany({ + orderBy: { createdAt: 'desc' }, + include: { + tasks: true, + assignments: { + include: { + employee: true, + }, + }, + }, + }); + + // Parse JSON fields + const parsedProjects = projects.map((project) => ({ + ...project, + goals: JSON.parse(project.goals), + requiredSkills: JSON.parse(project.requiredSkills), + dependencies: project.dependencies ? JSON.parse(project.dependencies) : null, + clarifyingAnswers: project.clarifyingAnswers ? JSON.parse(project.clarifyingAnswers) : null, + tasks: project.tasks.map((task) => ({ + ...task, + requiredSkills: JSON.parse(task.requiredSkills), + dependencies: task.dependencies ? JSON.parse(task.dependencies) : null, + })), + })); + + return NextResponse.json({ projects: parsedProjects }); + } catch (error) { + console.error('Error fetching projects:', error); + return NextResponse.json( + { error: 'Failed to fetch projects' }, + { status: 500 } + ); + } +} diff --git a/app/chat/page.tsx b/app/chat/page.tsx new file mode 100644 index 0000000..f834bed --- /dev/null +++ b/app/chat/page.tsx @@ -0,0 +1,5 @@ +import App from "../App"; + +export default function ChatPage() { + return ; +} diff --git a/app/create-project/page.tsx b/app/create-project/page.tsx new file mode 100644 index 0000000..3d80d8c --- /dev/null +++ b/app/create-project/page.tsx @@ -0,0 +1,5 @@ +import ProjectDefinitionForm from '@/components/ProjectDefinitionForm'; + +export default function CreateProjectPage() { + return ; +} diff --git a/app/page.tsx b/app/page.tsx index a2c347e..49d08b9 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,5 +1,75 @@ -import App from "./App"; +import Link from 'next/link'; export default function Home() { - return ; + return ( +
+
+

+ Shape your ideas into +
+ apps that work your way +

+

+ Breakdown lets you build fully-functional projects in minutes with just your words. No coding necessary. +

+ +
+ + Start Building + + + View Projects + + + Chat with AI + +
+ +
+

+ Create, track, and manage AI-powered projects with automated task breakdown and team assignments +

+
+ +
+

Not sure where to start? Try one of these:

+
+ + 📊 Reporting Dashboard + + + 🎮 Gaming Platform + + + 🚀 Onboarding Portal + + + 💼 Networking App + +
+
+
+
+ ); } diff --git a/app/projects/[id]/page.tsx b/app/projects/[id]/page.tsx new file mode 100644 index 0000000..fdd7ea9 --- /dev/null +++ b/app/projects/[id]/page.tsx @@ -0,0 +1,452 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import { use } from 'react'; +import Link from 'next/link'; + +interface Employee { + id: string; + name: string; + email: string; + skills: string[]; + currentWorkload: number; +} + +interface Task { + id: string; + title: string; + description: string; + status: string; + priority: string; + estimatedHours: number; + assignedTo?: Employee; + githubIssueUrl?: string; + githubPrUrl?: string; +} + +interface Project { + id: string; + title: string; + description: string; + goals: string[]; + status: string; + priority: string; + effortLevel: string; + deadline?: string; + createdAt: string; + updatedAt: string; + githubRepoUrl?: string; + requiredSkills: string[]; + budgetHours?: number; + budgetAmount?: number; + tasks: Task[]; + assignments: { + employee: Employee; + assignedAt: string; + }[]; +} + +export default function ProjectDetailPage({ + params, +}: { + params: Promise<{ id: string }>; +}) { + const { id } = use(params); + const [project, setProject] = useState(null); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + fetchProject(); + }, [id]); + + const fetchProject = async () => { + try { + const response = await fetch(`/api/projects/${id}`); + const data = await response.json(); + setProject(data.project); + } catch (error) { + console.error('Error fetching project:', error); + } finally { + setIsLoading(false); + } + }; + + if (isLoading) { + return ( +
+
+
+

Loading project...

+
+
+ ); + } + + if (!project) { + return ( +
+
+

Project not found

+ + ← Back to Projects + +
+
+ ); + } + + const getProgress = () => { + if (project.tasks.length === 0) return 0; + const completed = project.tasks.filter((t) => t.status === 'completed').length; + return Math.round((completed / project.tasks.length) * 100); + }; + + const getStatusColor = (status: string) => { + switch (status) { + case 'active': + return 'bg-green-100 text-green-800'; + case 'planning': + return 'bg-blue-100 text-blue-800'; + case 'completed': + return 'bg-gray-100 text-gray-800'; + case 'on-hold': + return 'bg-yellow-100 text-yellow-800'; + default: + return 'bg-gray-100 text-gray-800'; + } + }; + + const getTaskStatusColor = (status: string) => { + switch (status) { + case 'completed': + return 'bg-green-100 text-green-800'; + case 'in_progress': + return 'bg-blue-100 text-blue-800'; + case 'review': + return 'bg-purple-100 text-purple-800'; + case 'assigned': + return 'bg-orange-100 text-orange-800'; + default: + return 'bg-gray-100 text-gray-800'; + } + }; + + const totalHoursSpent = project.tasks.reduce( + (sum, task) => sum + (task.status === 'completed' ? task.estimatedHours : 0), + 0 + ); + + const totalEstimatedHours = project.tasks.reduce( + (sum, task) => sum + task.estimatedHours, + 0 + ); + + return ( +
+
+ {/* Back Button */} + + + + + Back to Projects + + + {/* Header */} +
+
+
+

+ {project.title} +

+
+ + {project.status} + + + Priority: {project.priority} + + + Effort: {project.effortLevel} + +
+
+ {project.githubRepoUrl && ( + + + + + View on GitHub + + )} +
+

{project.description}

+ + {/* Progress */} +
+
+ Overall Progress + + {getProgress()}% + +
+
+
+
+
+ + {/* Stats Grid */} +
+
+
Total Tasks
+
+ {project.tasks.length} +
+
+
+
Team Members
+
+ {project.assignments.length} +
+
+
+
Hours Spent
+
+ {totalHoursSpent}h +
+
+
+
Est. Hours
+
+ {totalEstimatedHours}h +
+
+
+
+ +
+ {/* Main Content */} +
+ {/* Goals */} +
+

Goals

+
    + {project.goals.map((goal, index) => ( +
  • + + + + {goal} +
    • + ))} +
+
+ + {/* Tasks */} +
+

Tasks

+ {project.tasks.length === 0 ? ( +

No tasks created yet.

+ ) : ( +
+ {project.tasks.map((task) => ( +
+
+

{task.title}

+ + {task.status.replace('_', ' ')} + +
+

{task.description}

+
+
+ {task.assignedTo && ( + + 👤 {task.assignedTo.name} + + )} + + ⏱️ {task.estimatedHours}h + +
+
+ {task.githubIssueUrl && ( + + Issue + + )} + {task.githubPrUrl && ( + + PR + + )} +
+
+
+ ))} +
+ )} +
+
+ + {/* Sidebar */} +
+ {/* Timeline */} +
+

Timeline

+
+
+
Created
+
+ {new Date(project.createdAt).toLocaleDateString()} +
+
+ {project.deadline && ( +
+
Deadline
+
+ {new Date(project.deadline).toLocaleDateString()} +
+
+ )} +
+
Last Updated
+
+ {new Date(project.updatedAt).toLocaleDateString()} +
+
+
+
+ + {/* Team Members */} +
+

Team

+ {project.assignments.length === 0 ? ( +

No team members assigned yet.

+ ) : ( +
+ {project.assignments.map((assignment) => ( +
+
+
+ {assignment.employee.name} +
+
+ {assignment.employee.email} +
+
+
+
Workload
+
+ {assignment.employee.currentWorkload}% +
+
+
+ ))} +
+ )} +
+ + {/* Required Skills */} +
+

+ Required Skills +

+
+ {project.requiredSkills.map((skill) => ( + + {skill} + + ))} +
+
+ + {/* Budget */} + {(project.budgetHours || project.budgetAmount) && ( +
+

Budget

+
+ {project.budgetHours && ( +
+ Hours + + {project.budgetHours}h + +
+ )} + {project.budgetAmount && ( +
+ Amount + + ${project.budgetAmount.toLocaleString()} + +
+ )} +
+
+ )} +
+
+
+
+ ); +} diff --git a/app/projects/page.tsx b/app/projects/page.tsx new file mode 100644 index 0000000..1cea267 --- /dev/null +++ b/app/projects/page.tsx @@ -0,0 +1,237 @@ +'use client'; + +import { useEffect, useState } from 'react'; +import Link from 'next/link'; + +interface Project { + id: string; + title: string; + description: string; + status: string; + priority: string; + createdAt: string; + deadline?: string; + tasks: { id: string; status: string }[]; + assignments: { employee: { name: string } }[]; +} + +type TabType = 'current' | 'planned' | 'past'; + +export default function ProjectsPage() { + const [projects, setProjects] = useState([]); + const [activeTab, setActiveTab] = useState('current'); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + fetchProjects(); + }, []); + + const fetchProjects = async () => { + try { + const response = await fetch('/api/projects'); + const data = await response.json(); + setProjects(data.projects); + } catch (error) { + console.error('Error fetching projects:', error); + } finally { + setIsLoading(false); + } + }; + + const filterProjects = (status: TabType) => { + if (status === 'current') { + return projects.filter((p) => p.status === 'active'); + } else if (status === 'planned') { + return projects.filter((p) => p.status === 'planning'); + } else { + return projects.filter((p) => p.status === 'completed' || p.status === 'on-hold'); + } + }; + + const filteredProjects = filterProjects(activeTab); + + const getStatusColor = (status: string) => { + switch (status) { + case 'active': + return 'bg-green-100 text-green-800'; + case 'planning': + return 'bg-blue-100 text-blue-800'; + case 'completed': + return 'bg-gray-100 text-gray-800'; + case 'on-hold': + return 'bg-yellow-100 text-yellow-800'; + default: + return 'bg-gray-100 text-gray-800'; + } + }; + + const getPriorityColor = (priority: string) => { + switch (priority) { + case 'high': + return 'text-red-600'; + case 'medium': + return 'text-orange-600'; + case 'low': + return 'text-blue-600'; + default: + return 'text-gray-600'; + } + }; + + const getProgress = (project: Project) => { + if (project.tasks.length === 0) return 0; + const completed = project.tasks.filter((t) => t.status === 'completed').length; + return Math.round((completed / project.tasks.length) * 100); + }; + + return ( +
+
+ {/* Header */} +
+
+

Projects

+ + + New Project + +
+ + {/* Tabs */} +
+ {(['current', 'planned', 'past'] as TabType[]).map((tab) => ( + + ))} +
+
+ + {/* Projects Grid */} + {isLoading ? ( +
+
+

Loading projects...

+
+ ) : filteredProjects.length === 0 ? ( +
+

+ No {activeTab} projects yet +

+ + Create Your First Project + +
+ ) : ( +
+ {filteredProjects.map((project) => ( + + {/* Header */} +
+
+

+ {project.title} +

+
+ + {project.status} + + + {project.priority} Priority + +
+
+
+ + {/* Description */} +

+ {project.description} +

+ + {/* Progress Bar */} + {project.tasks.length > 0 && ( +
+
+ Progress + + {getProgress(project)}% + +
+
+
+
+
+ )} + + {/* Footer */} +
+
+ + + + {project.tasks.length} tasks +
+
+ + + + {project.assignments.length} members +
+
+ + ))} +
+ )} +
+
+ ); +} diff --git a/components/ClarifyingQuestionsModal.tsx b/components/ClarifyingQuestionsModal.tsx new file mode 100644 index 0000000..c06f4d1 --- /dev/null +++ b/components/ClarifyingQuestionsModal.tsx @@ -0,0 +1,220 @@ +'use client'; + +import { useState } from 'react'; +import type { ClarifyingQuestion } from '@/lib/types'; + +interface ClarifyingQuestionsModalProps { + projectId: string; + questions: ClarifyingQuestion[]; + onComplete: (answers: Record) => void; + onCancel: () => void; +} + +export default function ClarifyingQuestionsModal({ + questions, + onComplete, + onCancel, +}: ClarifyingQuestionsModalProps) { + const [answers, setAnswers] = useState>({}); + const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); + + const currentQuestion = questions[currentQuestionIndex]; + const isLastQuestion = currentQuestionIndex === questions.length - 1; + + const handleAnswer = (questionId: string, answer: string | string[]) => { + setAnswers((prev) => ({ ...prev, [questionId]: answer })); + }; + + const handleNext = () => { + if (isLastQuestion) { + onComplete(answers); + } else { + setCurrentQuestionIndex((prev) => prev + 1); + } + }; + + const handleBack = () => { + if (currentQuestionIndex > 0) { + setCurrentQuestionIndex((prev) => prev - 1); + } + }; + + const canProceed = () => { + const questionKey = `question_${currentQuestionIndex}`; + const answer = answers[questionKey]; + + if (currentQuestion.required) { + if (currentQuestion.type === 'multi-choice') { + return Array.isArray(answer) && answer.length > 0; + } + return answer && answer.toString().trim() !== ''; + } + return true; + }; + + return ( +
+
+
+ {/* Header */} +
+
+

+ Clarifying Questions +

+ +
+

+ Help us understand your project better +

+
+ {questions.map((_, index) => ( +
+ ))} +
+
+ + {/* Question */} +
+
+ + Question {currentQuestionIndex + 1} of {questions.length} + + {currentQuestion.required && ( + Required + )} +
+

+ {currentQuestion.question} +

+ + {/* Answer Input */} + {currentQuestion.type === 'text' && ( +