@bobmatnyc/claude-pm-portfolio-manager/README.md

Claude PM Portfolio Management Dashboard - React-based monitoring and reporting for Claude PM managed projects

# Claude PM Portfolio Manager

[![CI/CD](https://github.com/USER/claude-pm-portfolio-manager/actions/workflows/ci-cd.yml/badge.svg)](https://github.com/USER/claude-pm-portfolio-manager/actions/workflows/ci-cd.yml)

A React-based dashboard for monitoring and managing projects within the Claude PM framework.

## 🚀 Live Dashboard
- **Production**: [GitHub Pages Deployment](https://USER.github.io/claude-pm-portfolio-manager/)
- **Status**: Automatically deployed from `main` branch

## Quick Start

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build
```

## Features

- 📊 **Dashboard Overview**: Real-time project health and metrics
- 📁 **Project Management**: Browse and monitor Claude PM projects
- 🎫 **Ticket Integration**: TrackDown ticket tracking and management
- 📈 **Analytics**: Performance metrics and progress tracking
- 🔗 **Git Integration**: Commit activity and branch monitoring

## Development

### Prerequisites
- Node.js >= 16
- npm >= 8

### Commands
```bash
npm run dev          # Start development server
npm run build        # Build for production
npm run test         # Run tests
npm run check        # Run Biome linting and formatting
npm run type-check   # TypeScript type checking
npm run ci           # Run complete CI pipeline locally
```

## 🔄 Local CI/CD Pipeline

### Local Development with Auto-Deployment
```bash
# Start complete local CI/CD pipeline
npm run local:start

# Or run individual components
npm run local:dev          # Dev server + file watching + tests
npm run local:prod         # Production build + serve + monitoring
npm run health:monitor     # Health monitoring only
```

### Automated Local Workflows
- **File Watching**: Auto-reload on code changes
- **Test Monitoring**: Tests run automatically on changes
- **Data Watching**: Monitors Claude PM TrackDown files for updates
- **Health Monitoring**: Checks dashboard health every 30 seconds
- **Build Validation**: TypeScript and test validation before start

### Features
- **Live Reload**: Dashboard updates instantly when code changes
- **Test Automation**: Tests run in watch mode during development
- **Health Logs**: Monitoring data saved to `logs/health.log`
- **Data Integration**: Watches `~/Projects/Claude-PM/` for TrackDown changes
- **Performance Tracking**: Response time monitoring

### Project Structure
```
src/
├── components/      # React components
├── hooks/          # Custom hooks
├── services/       # API services
├── stores/         # State management
├── types/          # TypeScript types
└── utils/          # Utility functions
```

## Configuration

This project integrates with the Claude PM framework by:
- Reading projects from `~/Projects/managed/`
- Parsing TrackDown tickets from `~/Projects/Claude-PM/trackdown/`
- Monitoring CLAUDE.md compliance
- Tracking milestone progress (M01_, M02_, etc.)

## Technology Stack

- **React 18** with TypeScript
- **Vite** for fast development and building
- **Tailwind CSS** for styling
- **React Query** for data fetching
- **Zustand** for state management
- **Biome** for code quality

## License

MIT