96 lines
2.9 KiB
Markdown
96 lines
2.9 KiB
Markdown
# 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
|