# Rippling MCP Apps

20 React applications built for the Rippling MCP server.

## Apps Overview

### Employee Management (4 apps)
1. **employee-dashboard** - Company headcount overview with department stats
2. **employee-detail** - Full employee profile viewer with search
3. **employee-directory** - Searchable employee grid with department filters
4. **org-chart** - Hierarchical organization structure visualization

### Payroll (2 apps)
5. **payroll-dashboard** - Pay runs overview with status tracking
6. **payroll-detail** - Detailed pay run breakdown with payment tables

### Time Management (4 apps)
7. **time-tracker** - Time entry tracking and reporting
8. **timesheet-approvals** - Pending timesheet approval workflow
9. **time-off-calendar** - PTO calendar visualization
10. **benefits-overview** - Benefits plans summary

### Benefits (2 apps)
11. **benefits-enrollment** - Enrollment details and management

### Recruiting (ATS) (3 apps)
12. **ats-pipeline** - Candidate pipeline kanban board
13. **job-board** - Open positions grid view
14. **candidate-detail** - Individual candidate profile viewer

### Learning & Development (2 apps)
15. **learning-dashboard** - Course assignments overview
16. **course-catalog** - Available courses grid

### IT Management (2 apps)
17. **device-inventory** - Company devices tracker with type filters
18. **app-management** - Installed apps overview

### Organization (2 apps)
19. **team-overview** - Team structure and members
20. **department-grid** - Department breakdown and analytics

## Technical Details

### Structure
Each app is a standalone React application with:
- `App.tsx` - Main React component
- `index.html` - HTML entry point
- `main.tsx` - React initialization
- `vite.config.ts` - Vite build configuration
- `styles.css` - Component styles

### Theme
- Dark theme using #0f172a (bg) and #1e293b (cards)
- Accent colors: #60a5fa (blue), #34d399 (green), #a78bfa (purple), #fbbf24 (yellow)
- Consistent UI patterns across all apps

### Data Flow
- Apps call Rippling MCP tools via `window.mcp.callTool()`
- Fallback to sample data when tools unavailable
- Client-side state management with React hooks
- Loading states and error handling included

### MCP Tools Used
- `rippling_list_employees`
- `rippling_get_employee`
- `rippling_list_pay_runs`
- `rippling_get_pay_run`
- `rippling_list_time_entries`
- `rippling_list_timesheets`
- `rippling_list_time_off_requests`
- `rippling_list_benefit_plans`
- `rippling_list_enrollments`
- `rippling_list_candidates`
- `rippling_get_candidate`
- `rippling_list_job_postings`
- `rippling_list_courses`
- `rippling_list_devices`
- `rippling_list_apps`
- `rippling_list_groups`

## Build & Run

Each app can be built independently:
```bash
cd src/ui/react-app/{app-name}
npm install
npm run dev
```

## Stats
- **Total Apps:** 20
- **Total Files:** 100 (5 per app)
- **Total Lines:** ~3,600+
- **Coverage:** Employees, Payroll, Time, Benefits, ATS, Learning, IT, Org