cs-optima-inc/timesheet-app

Purpose and Runtime

This is a Vite-served React + TypeScript single-page workforce/employee self-service UI. Its feature surface covers dashboard reporting, attendance and time punching, timesheets, leave requests, expense claims, and entry forms. The repository README is the stock Vite template, so domain behavior is inferred from the application structure. Browser execution starts from index.html, then src/main.tsx.

Application Composition

src/main.tsx mounts the React tree; src/App.tsx is the likely application shell and top-level page composition point. Global presentation is centralized in src/styles.css. Shared navigation and session controls belong in src/components/Header.tsx and src/components/LogoutButton.tsx, establishing a reusable chrome around feature pages.

Authentication Boundary

Authentication is isolated under src/auth/AuthProvider.tsx, which likely exposes authenticated-user/session state to the component tree. src/auth/amplifyConfig.ts is the AWS Amplify integration/configuration boundary. src/pages/Login.tsx is the unauthenticated entry surface; protected feature rendering should be gated through the provider/application shell rather than individual API calls.

API Boundary

src/api/client.ts is the central frontend-to-backend service boundary. Feature pages should consume remote data and submit mutations through this client rather than embedding transport logic. The backend itself is not present in this repository; AWS Amplify is the only explicit external cloud/auth integration indicated by the tree.

Workforce Feature Pages

The primary application stages are represented by page-level modules:

• Landing/home: src/pages/Home.tsx

• Operational overview: src/pages/Dashboard.tsx

• Attendance and punch capture: src/pages/Attendance.tsx, src/components/TimePunch.tsx

• Timesheet review/listing: src/pages/TimesheetList.tsx

• Employee submissions: src/pages/LeaveRequest.tsx, src/pages/ExpenseClaim.tsx, src/pages/EntryForm.tsx

These pages form the feature boundary: they coordinate user input, authenticated state, API operations, and presentation components.

Reporting and Visualization

Dashboard-oriented visualizations are componentized rather than embedded in pages: src/components/AreaChart.tsx, src/components/PieChart.tsx, and src/components/Sparkline.tsx. src/pages/Dashboard.tsx is expected to assemble these from API-derived metrics, keeping chart rendering separate from data acquisition and page layout.

Build and Delivery

Vite provides development serving, HMR, and production bundling through vite.config.ts; React runs in the browser with TypeScript source compilation. Package/dependency resolution is defined by package.json and package-lock.json. Static public assets, if any, are served from public.