Leave & Absence Management

Submit leave requests, track balances, approve absences, and analyze monthly leave trends.

Overview

Leave & Absence Management is a single-page browser app for HR teams and people managers who need to track time-off requests without a separate HRIS. Employees submit leave with automatic day calculation and balance checks, managers simulate approve/reject actions, monthly summaries highlight absence patterns, and all data persists in the browser.

Key features

Summary dashboard

• Total requests — count of all leave records.
• Pending approval — requests awaiting manager action.
• Days approved (YTD) — sum of approved leave days across all types.
• This month — total leave days starting in the current calendar month.

Leave request form

• Alpine.js form with employee selector, leave type (Annual, Sick, Personal, Unpaid), start and end dates.
• Days requested auto-calculates from the date range.
• Balance remaining shows entitlement minus approved usage; warns when balance is insufficient.
• Submit request adds a Pending row (blocked when balance is exceeded).

Leave balance tracking

• Per-employee balance panel shows remaining days for each leave type.
• Approved requests deduct from entitlement; Unpaid Leave has unlimited entitlement.

Approval simulation

• Approve and Reject buttons on Pending rows in the grid.
• Approve checks remaining balance before changing status.
• Color-coded status text (green Approved, amber Pending, red Rejected) and matching row backgrounds.

Monthly summary table

• Breakdown by month: request count, total days, approved days, and pending days.
• Updates live when requests are added, approved, or rejected.

Leave trend chart

• Chart.js line chart of approved leave days by month.
• Refreshes when request statuses change.

Leave requests grid

• AG Grid with Employee, Leave Type, Start Date, End Date, Days, and Status.
• Status filter radios (All, Pending, Approved, Rejected).
• Delete removes a request with confirmation.

Excel export

• Export Excel downloads `leave-management.xlsx` with Leave Requests and Monthly Summary sheets.

Theme and persistence

• Dark mode toggle with Tailwind class switching and theme-aware AG Grid and Chart.js colors.
• Leave requests and next ID auto-save to browser localStorage; dark mode preference is remembered.

Data & persistence

Sample data includes seven leave requests across six employees and four leave types. Edits auto-save to localStorage; sample records load when no saved state exists. Excel export uses SheetJS.

Charts & reporting

Chart.js powers the approved-leave-days trend line chart. Four KPI cards and the monthly summary table support absence planning and reporting.

Built with

Tailwind CSS, Alpine.js, AG Grid Community, Chart.js, and SheetJS (xlsx).

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.