commit bf1dbe39a82f9ce44791d0eaaed98d837f44f15d Author: Your Name <36833212+sa3eedDev@users.noreply.github.com> Date: Fri Oct 24 17:58:09 2025 -0700 Initial commit: Agile Project Manager - Complete React + TypeScript application with Vite - Dashboard with charts and metrics visualization - Kanban board with drag-and-drop functionality - Product backlog management with user stories - Sprint planning and tracking features - Comprehensive UI component library (shadcn/ui) - Tailwind CSS styling with dark mode support - Context-based state management - Mock data for immediate testing and demonstration diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d350601 --- /dev/null +++ b/.gitignore @@ -0,0 +1,94 @@ +# Dependencies +node_modules/ +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Build outputs +dist/ +build/ +.next/ +out/ + +# Environment variables +.env +.env.local +.env.development.local +.env.test.local +.env.production.local + +# IDE and editor files +.vscode/ +.idea/ +*.swp +*.swo +*~ + +# OS generated files +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db + +# Logs +logs +*.log + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Coverage directory used by tools like istanbul +coverage/ +*.lcov + +# nyc test coverage +.nyc_output + +# Dependency directories +jspm_packages/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Temporary folders +tmp/ +temp/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/App.tsx b/App.tsx new file mode 100644 index 0000000..f962d3f --- /dev/null +++ b/App.tsx @@ -0,0 +1,61 @@ +import React, { useState } from 'react'; +import { AppProvider } from './contexts/AppContext'; +import { KanbanBoard } from './components/KanbanBoard'; +import { ProductBacklog } from './components/ProductBacklog'; +import { SprintManagement } from './components/SprintManagement'; +import { Dashboard } from './components/Dashboard'; +import { Button } from './components/ui/button'; +import { LayoutDashboard, KanbanSquare, ListTodo, Calendar } from 'lucide-react'; + +type View = 'dashboard' | 'kanban' | 'backlog' | 'sprints'; + +function AppContent() { + const [activeView, setActiveView] = useState('dashboard'); + + const navigation = [ + { id: 'dashboard' as View, label: 'Dashboard', icon: LayoutDashboard }, + { id: 'kanban' as View, label: 'Kanban Board', icon: KanbanSquare }, + { id: 'backlog' as View, label: 'Product Backlog', icon: ListTodo }, + { id: 'sprints' as View, label: 'Sprint Management', icon: Calendar } + ]; + + return ( +
+ {/* Header */} +
+
+

Agile Project Manager

+ +
+
+ + {/* Main Content */} +
+ {activeView === 'dashboard' && } + {activeView === 'kanban' && } + {activeView === 'backlog' && } + {activeView === 'sprints' && } +
+
+ ); +} + +export default function App() { + return ( + + + + ); +} diff --git a/Attributions.md b/Attributions.md new file mode 100644 index 0000000..9b7cd4e --- /dev/null +++ b/Attributions.md @@ -0,0 +1,3 @@ +This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md). + +This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license). \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..3d0e40a --- /dev/null +++ b/README.md @@ -0,0 +1,127 @@ +# Agile Project Manager + +A modern, full-featured Agile project management application built with React, TypeScript, and Tailwind CSS. + +## 🚀 Features + +- **Dashboard** - Overview of project metrics and key performance indicators +- **Kanban Board** - Drag-and-drop task management with customizable columns +- **Product Backlog** - User story management with prioritization and estimation +- **Sprint Management** - Sprint planning, tracking, and retrospective tools +- **Task Management** - Create, edit, and track tasks with comments and time complexity +- **User Story Management** - Define acceptance criteria, story points, and business value +- **Real-time Updates** - Live updates across all components + +## 🛠️ Tech Stack + +- **Frontend**: React 18 with TypeScript +- **Styling**: Tailwind CSS with shadcn/ui components +- **Build Tool**: Vite +- **State Management**: React Context API +- **Charts**: Recharts +- **Drag & Drop**: React DnD +- **Icons**: Lucide React +- **Date Handling**: date-fns + +## 📦 Installation + +1. Clone the repository: +```bash +git clone +cd agile-project-manager +``` + +2. Install dependencies: +```bash +npm install +``` + +3. Start the development server: +```bash +npm run dev +``` + +4. Open [http://localhost:5173](http://localhost:5173) in your browser. + +## 🏗️ Project Structure + +``` +├── components/ # React components +│ ├── ui/ # Reusable UI components (shadcn/ui) +│ ├── Dashboard.tsx # Dashboard with metrics and charts +│ ├── KanbanBoard.tsx # Drag-and-drop task board +│ ├── ProductBacklog.tsx # User story management +│ └── SprintManagement.tsx # Sprint planning and tracking +├── contexts/ # React Context providers +│ └── AppContext.tsx # Main application state +├── types/ # TypeScript type definitions +│ └── index.ts # Application types +├── styles/ # Global styles +│ └── globals.css # Tailwind CSS configuration +└── main.tsx # Application entry point +``` + +## 🎯 Usage + +### Dashboard +- View project overview with key metrics +- Monitor sprint progress and team velocity +- Track completed vs. remaining work + +### Kanban Board +- Drag tasks between columns (To Do, In Progress, Blocked, Done) +- Add comments and track time complexity +- Filter tasks by user story or assignee + +### Product Backlog +- Create and prioritize user stories +- Define acceptance criteria and story points +- Estimate business value and effort + +### Sprint Management +- Plan sprints with capacity and goals +- Move user stories from backlog to sprint +- Track sprint progress and close completed sprints + +## 🔧 Available Scripts + +- `npm run dev` - Start development server +- `npm run build` - Build for production +- `npm run preview` - Preview production build +- `npm run lint` - Run ESLint + +## 📝 Data Model + +The application uses the following main entities: + +- **Tasks**: Individual work items with status, comments, and time estimates +- **User Stories**: Feature descriptions with acceptance criteria and story points +- **Sprints**: Time-boxed development periods with goals and capacity +- **Comments**: Collaborative notes on tasks + +## 🎨 UI Components + +Built with shadcn/ui components including: +- Buttons, Cards, Dialogs +- Progress bars, Badges, Labels +- Form inputs and validation +- Responsive design with Tailwind CSS + +## 🤝 Contributing + +1. Fork the repository +2. Create a feature branch +3. Make your changes +4. Add tests if applicable +5. Submit a pull request + +## 📄 License + +This project is licensed under the MIT License. + +## 🙏 Acknowledgments + +- [shadcn/ui](https://ui.shadcn.com/) for the beautiful component library +- [Tailwind CSS](https://tailwindcss.com/) for utility-first styling +- [Lucide](https://lucide.dev/) for the icon set +- [Recharts](https://recharts.org/) for data visualization diff --git a/components/CommentDialog.tsx b/components/CommentDialog.tsx new file mode 100644 index 0000000..ad000a3 --- /dev/null +++ b/components/CommentDialog.tsx @@ -0,0 +1,83 @@ +import React, { useState } from 'react'; +import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog'; +import { Button } from './ui/button'; +import { Textarea } from './ui/textarea'; +import { useApp } from '../contexts/AppContext'; +import { Task } from '../types'; +import { formatDistanceToNow } from 'date-fns'; +import { Send } from 'lucide-react'; + +interface CommentDialogProps { + open: boolean; + onOpenChange: (open: boolean) => void; + task: Task | null; +} + +export const CommentDialog: React.FC = ({ + open, + onOpenChange, + task +}) => { + const { addComment } = useApp(); + const [commentText, setCommentText] = useState(''); + + const handlePost = () => { + if (task && commentText.trim()) { + addComment(task.id, commentText, 'Current User'); + setCommentText(''); + } + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + handlePost(); + } + }; + + return ( + + + + Comments - {task?.title} + +
+
+ {task?.comments.length === 0 ? ( +

+ No comments yet. Be the first to comment! +

+ ) : ( + task?.comments.map(comment => ( +
+
+ {comment.author} + + {formatDistanceToNow(new Date(comment.timestamp), { addSuffix: true })} + +
+

{comment.text}

+
+ )) + )} +
+
+