Leave & Attendance

The leave and attendance modules handle time-off requests, approval workflows, attendance tracking, and reporting. The sidebar groups these under the Time & Leave section.

Leave Overview

Route: /leave

The leave overview combines balance cards, a team calendar, and recent requests.

Leave Balance Cards

Cards showing remaining vs total leave for each type (Annual, Sick, Personal, Unpaid) with progress bars indicating usage.

import { LeaveBalanceCard } from "@/components/leave/leave-balance-card"

<LeaveBalanceCard
  type="Annual Leave"
  used={8}
  total={20}
  color="#16a34a"
/>

Team Calendar

A monthly calendar showing approved leave periods with employee avatars. Helps managers see team availability at a glance before approving new requests.

import { LeaveCalendar } from "@/components/leave/leave-calendar"

Leave Request Admin

Route: /leave/requests

Admin view for managing leave requests with bulk approve/reject actions.

• Request table -- sortable columns: Employee, Type, Start Date, End Date, Duration, Status, Submitted Date
• Status filter -- Pending, Approved, Rejected, All
• Bulk actions -- select multiple pending requests and approve or reject in batch
• Individual actions -- approve, reject, or request more info on each row
• Request detail -- expandable row showing employee's leave balance, overlapping team leave, and manager notes

import { LeaveRequestTable } from "@/components/leave/leave-request-table"

Apply for Leave

Route: /leave/apply

Employee-facing form for submitting a leave request.

• Leave type -- radio card selection (Annual, Sick, Personal, Unpaid) with remaining balance shown
• Date range -- start and end date pickers with duration auto-calculated
• Reason -- textarea for leave reason
• Attachments -- optional file upload (medical certificate, etc.)
• Balance check -- real-time validation against remaining balance

import { LeaveForm } from "@/components/leave/leave-form"

Leave Policies

Route: /leave/policies

Configuration page for leave policies and holiday calendar.

• Policy cards -- one per leave type showing allowance, carry-over rules, and accrual rate
• Holiday calendar -- list of company holidays with dates and optional/mandatory flags
• Policy rules -- minimum notice period, maximum consecutive days, blackout periods

Attendance Dashboard

Route: /attendance

The attendance dashboard provides check-in/out functionality and a visual heatmap calendar.

Check-in/Out Button

A prominent button that toggles between "Check In" and "Check Out" states with a live status indicator showing the current check-in time.

import { CheckInButton } from "@/components/attendance/check-in-button"

Attendance Heatmap

A monthly calendar where each day is color-coded based on attendance status:

Color	Meaning
Green	Present (full day)
Light green	Present (half day)
Yellow	Late arrival
Red	Absent
Gray	Weekend / Holiday

import { AttendanceHeatmap } from "@/components/attendance/attendance-heatmap"

Weekly Chart

A Recharts BarChart showing daily hours worked for the current week with the expected hours baseline.

import { WeeklyChart } from "@/components/attendance/weekly-chart"

Attendance Reports

Route: /attendance/reports

Detailed attendance analytics with department comparisons.

• Summary stats -- average attendance rate, total late arrivals, early departures, overtime hours
• Department comparison -- bar chart comparing attendance rates across departments
• Employee report table -- individual attendance records with present/absent/late counts and total hours

import { AttendanceReportTable } from "@/components/attendance/attendance-report-table"

Attendance Settings

Route: /attendance/settings

Admin settings for attendance tracking.

• Work schedules -- configure standard working hours per day and week
• Overtime rules -- overtime threshold, multiplier rates, and approval requirements
• Late/early thresholds -- grace period for late arrival and early departure
• Geo-fencing -- optional location-based check-in validation

Data Sources

Data	Source	Location
Leave requests	leaveRequests	data/seed.ts
Leave balances	leaveBalances	data/seed.ts
Leave policies	leavePolicies	data/seed.ts
Attendance records	attendanceRecords	data/seed.ts
Work schedules	workSchedules	data/seed.ts
Holidays	holidays	data/seed.ts

Next Steps

• Performance & Onboarding -- reviews, goals, and onboarding
• Recruitment Pipeline -- job postings and applicant management