d0f59a4634
- employee-dashboard: Headcount overview with stats - employee-detail: Full profile viewer - employee-directory: Searchable grid - org-chart: Hierarchy visualization - payroll-dashboard: Pay runs overview - payroll-detail: Single pay run breakdown - time-tracker: Time entries tracking - timesheet-approvals: Approval workflow - time-off-calendar: PTO calendar view - benefits-overview: Plans summary - benefits-enrollment: Enrollment details - ats-pipeline: Candidate kanban board - job-board: Open positions grid - candidate-detail: Individual candidate view - learning-dashboard: Course assignments - course-catalog: Available courses - device-inventory: Device tracker with filters - app-management: Installed apps overview - team-overview: Team structure - department-grid: Department breakdown All apps use dark theme (#0f172a/#1e293b), client-side state, and call Rippling MCP tools. Each app has App.tsx, index.html, main.tsx, vite.config.ts, and styles.css.
27 lines
720 B
TypeScript
27 lines
720 B
TypeScript
import { useState, useEffect } from 'react';
|
|
import './styles.css';
|
|
|
|
export default function UteamUoverview() {
|
|
const [data, setData] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
setData([{ id: '1', name: 'Sample Item' }]);
|
|
setLoading(false);
|
|
}, []);
|
|
|
|
if (loading) return <div className="container"><div className="loading">Loading...</div></div>;
|
|
|
|
return (
|
|
<div className="container">
|
|
<div className="header">
|
|
<h1>team overview</h1>
|
|
<p className="subtitle">{data.length} items</p>
|
|
</div>
|
|
<div className="card">
|
|
<pre className="data-preview">{JSON.stringify(data, null, 2)}</pre>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|