36a4d6fb4f
- API Client (src/clients/rippling.ts): OAuth2/API key auth, pagination, error handling - 50+ tools across 10 categories: * employees-tools.ts: 7 tools (list, get, create, update, terminate, custom fields, org chart) * companies-tools.ts: 5 tools (company, departments, locations, teams) * payroll-tools.ts: 4 tools (pay runs, pay statements) * time-tools.ts: 11 tools (time entries, timesheets, PTO requests) * benefits-tools.ts: 4 tools (plans, enrollments) * ats-tools.ts: 6 tools (candidates, jobs, applications, pipeline) * learning-tools.ts: 4 tools (courses, assignments) * devices-tools.ts: 4 tools (devices, apps/licenses) * groups-tools.ts: 6 tools (CRUD + members) * custom-objects-tools.ts: 5 tools (CRUD + query) - 16 React UI apps: * employee-dashboard, employee-detail, employee-directory, org-chart * payroll-dashboard, payroll-detail * time-tracker, timesheet-approvals, time-off-calendar * benefits-overview, ats-pipeline, job-board * learning-dashboard, device-inventory, team-overview, department-grid - Full TypeScript types for all API entities - Comprehensive README with usage examples - Production-ready with proper error handling and pagination
81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { Users, TrendingUp, Calendar, DollarSign } from 'lucide-react';
|
|
|
|
interface EmployeeDashboardProps {
|
|
totalEmployees?: number;
|
|
activeEmployees?: number;
|
|
newHires?: number;
|
|
avgTenure?: string;
|
|
departments?: Array<{ name: string; count: number }>;
|
|
}
|
|
|
|
export const EmployeeDashboard: React.FC<EmployeeDashboardProps> = ({
|
|
totalEmployees = 0,
|
|
activeEmployees = 0,
|
|
newHires = 0,
|
|
avgTenure = 'N/A',
|
|
departments = [],
|
|
}) => {
|
|
return (
|
|
<div className="p-6 bg-white rounded-lg shadow">
|
|
<h2 className="text-2xl font-bold mb-6">Employee Dashboard</h2>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
|
|
<div className="bg-blue-50 p-4 rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600">Total Employees</p>
|
|
<p className="text-3xl font-bold text-blue-600">{totalEmployees}</p>
|
|
</div>
|
|
<Users className="w-12 h-12 text-blue-400" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-green-50 p-4 rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600">Active</p>
|
|
<p className="text-3xl font-bold text-green-600">{activeEmployees}</p>
|
|
</div>
|
|
<TrendingUp className="w-12 h-12 text-green-400" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-purple-50 p-4 rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600">New Hires (30d)</p>
|
|
<p className="text-3xl font-bold text-purple-600">{newHires}</p>
|
|
</div>
|
|
<Calendar className="w-12 h-12 text-purple-400" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-orange-50 p-4 rounded-lg">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600">Avg Tenure</p>
|
|
<p className="text-3xl font-bold text-orange-600">{avgTenure}</p>
|
|
</div>
|
|
<DollarSign className="w-12 h-12 text-orange-400" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<h3 className="text-lg font-semibold mb-3">Employees by Department</h3>
|
|
<div className="space-y-2">
|
|
{departments.map((dept, idx) => (
|
|
<div key={idx} className="flex items-center justify-between bg-gray-50 p-3 rounded">
|
|
<span className="font-medium">{dept.name}</span>
|
|
<span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
|
|
{dept.count}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|