From f6891dbe243d4a336829f0793116da3bf57bbe64 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Thu, 11 Jun 2026 15:51:06 +0700
Subject: [PATCH] Add leave request management features including LeaveRequest
 model, LeaveRequestController for CRUD operations, and corresponding
 permissions in the Permission and Role enums. Update routes for leave
 requests functionality and enhance UI components for leave requests
 navigation in the sidebar.

---
 app/Enums/LeaveRequestStatus.php              |  23 +++
 app/Enums/Permission.php                      |  14 ++
 app/Enums/Role.php                            |  16 ++
 .../Admin/Hr/LeaveRequestController.php       |  89 +++++++++
 .../Admin/Hr/RejectLeaveRequestRequest.php    |  24 +++
 .../Requests/Admin/Hr/SubmitLeaveRequest.php  |  46 +++++
 app/Models/Employee.php                       |   5 +
 app/Models/LeaveRequest.php                   | 121 ++++++++++++
 app/Services/Hr/LeaveRequestService.php       | 180 ++++++++++++++++++
 ..._11_120000_create_leave_requests_table.php |  33 ++++
 resources/js/components/AppSidebar.vue        |  13 +-
 .../leave-requests/LeaveRequestFormModal.vue  | 125 ++++++++++++
 .../RejectLeaveRequestModal.vue               |  93 +++++++++
 .../admin/hr/leave-requests/columns.ts        |  79 ++++++++
 .../hr/leave-requests/data-table-actions.vue  | 136 +++++++++++++
 .../pages/admin/hr/leave-requests/Index.vue   | 116 +++++++++++
 resources/js/types/leave-request.ts           |  45 +++++
 routes/web.php                                |  27 +++
 18 files changed, 1183 insertions(+), 2 deletions(-)
 create mode 100644 app/Enums/LeaveRequestStatus.php
 create mode 100644 app/Http/Controllers/Admin/Hr/LeaveRequestController.php
 create mode 100644 app/Http/Requests/Admin/Hr/RejectLeaveRequestRequest.php
 create mode 100644 app/Http/Requests/Admin/Hr/SubmitLeaveRequest.php
 create mode 100644 app/Models/LeaveRequest.php
 create mode 100644 app/Services/Hr/LeaveRequestService.php
 create mode 100644 database/migrations/2026_06_11_120000_create_leave_requests_table.php
 create mode 100644 resources/js/components/admin/hr/leave-requests/LeaveRequestFormModal.vue
 create mode 100644 resources/js/components/admin/hr/leave-requests/RejectLeaveRequestModal.vue
 create mode 100644 resources/js/components/admin/hr/leave-requests/columns.ts
 create mode 100644 resources/js/components/admin/hr/leave-requests/data-table-actions.vue
 create mode 100644 resources/js/pages/admin/hr/leave-requests/Index.vue
 create mode 100644 resources/js/types/leave-request.ts

diff --git a/app/Enums/LeaveRequestStatus.php b/app/Enums/LeaveRequestStatus.php
new file mode 100644
index 0000000..a17f82e
--- /dev/null
+++ b/app/Enums/LeaveRequestStatus.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\ProvidesEnumOptions;
+
+enum LeaveRequestStatus: string
+{
+    use ProvidesEnumOptions;
+
+    case PENDING = 'pending';
+    case APPROVED = 'approved';
+    case REJECTED = 'rejected';
+
+    public function label(): string
+    {
+        return match ($this) {
+            self::PENDING => 'Menunggu',
+            self::APPROVED => 'Disetujui',
+            self::REJECTED => 'Ditolak',
+        };
+    }
+}
diff --git a/app/Enums/Permission.php b/app/Enums/Permission.php
index acbfcb3..0205231 100644
--- a/app/Enums/Permission.php
+++ b/app/Enums/Permission.php
@@ -22,6 +22,12 @@ enum Permission: string
     case ATTENDANCES_DELETE = 'attendances.delete';
     case ATTENDANCES_MANAGE = 'attendances.manage';
 
+    case LEAVE_REQUESTS_VIEW = 'leave-requests.view';
+    case LEAVE_REQUESTS_CREATE = 'leave-requests.create';
+    case LEAVE_REQUESTS_UPDATE = 'leave-requests.update';
+    case LEAVE_REQUESTS_DELETE = 'leave-requests.delete';
+    case LEAVE_REQUESTS_VERIFY = 'leave-requests.verify';
+
     case CATEGORIES_VIEW = 'categories.view';
     case CATEGORIES_CREATE = 'categories.create';
     case CATEGORIES_UPDATE = 'categories.update';
@@ -88,6 +94,12 @@ public function label(): string
             self::ATTENDANCES_DELETE => 'Hapus Presensi',
             self::ATTENDANCES_MANAGE => 'Kelola Semua Presensi',
 
+            self::LEAVE_REQUESTS_VIEW => 'Lihat Cuti',
+            self::LEAVE_REQUESTS_CREATE => 'Ajukan Cuti',
+            self::LEAVE_REQUESTS_UPDATE => 'Ubah Pengajuan Cuti',
+            self::LEAVE_REQUESTS_DELETE => 'Hapus Pengajuan Cuti',
+            self::LEAVE_REQUESTS_VERIFY => 'Setujui/Tolak Cuti',
+
             self::CATEGORIES_VIEW => 'Lihat Kategori',
             self::CATEGORIES_CREATE => 'Tambah Kategori',
             self::CATEGORIES_UPDATE => 'Ubah Kategori',
@@ -147,6 +159,8 @@ public function group(): string
             self::EMPLOYEES_DELETE, self::EMPLOYEES_RESET_PASSWORD, self::EMPLOYEES_TOGGLE_STATUS => 'Pegawai',
             self::ATTENDANCES_VIEW, self::ATTENDANCES_CREATE, self::ATTENDANCES_DELETE,
             self::ATTENDANCES_MANAGE => 'Presensi',
+            self::LEAVE_REQUESTS_VIEW, self::LEAVE_REQUESTS_CREATE, self::LEAVE_REQUESTS_UPDATE,
+            self::LEAVE_REQUESTS_DELETE, self::LEAVE_REQUESTS_VERIFY => 'Cuti',
             self::CATEGORIES_VIEW, self::CATEGORIES_CREATE, self::CATEGORIES_UPDATE,
             self::CATEGORIES_DELETE => 'Kategori',
             self::SUPPLIERS_VIEW, self::SUPPLIERS_CREATE, self::SUPPLIERS_UPDATE,
diff --git a/app/Enums/Role.php b/app/Enums/Role.php
index b32899d..d99c0a2 100644
--- a/app/Enums/Role.php
+++ b/app/Enums/Role.php
@@ -48,6 +48,10 @@ public function permissions(): array
                 Permission::ATTENDANCES_CREATE,
                 Permission::ATTENDANCES_DELETE,
                 Permission::ATTENDANCES_MANAGE,
+                Permission::LEAVE_REQUESTS_VIEW,
+                Permission::LEAVE_REQUESTS_CREATE,
+                Permission::LEAVE_REQUESTS_UPDATE,
+                Permission::LEAVE_REQUESTS_DELETE,
                 Permission::CATEGORIES_VIEW,
                 Permission::CATEGORIES_CREATE,
                 Permission::CATEGORIES_UPDATE,
@@ -99,6 +103,10 @@ public function permissions(): array
                 Permission::ATTENDANCES_CREATE,
                 Permission::ATTENDANCES_DELETE,
                 Permission::ATTENDANCES_MANAGE,
+                Permission::LEAVE_REQUESTS_VIEW,
+                Permission::LEAVE_REQUESTS_CREATE,
+                Permission::LEAVE_REQUESTS_UPDATE,
+                Permission::LEAVE_REQUESTS_DELETE,
                 Permission::CATEGORIES_VIEW,
                 Permission::CATEGORIES_CREATE,
                 Permission::CATEGORIES_UPDATE,
@@ -139,6 +147,10 @@ public function permissions(): array
                 Permission::EMPLOYEES_VIEW,
                 Permission::ATTENDANCES_VIEW,
                 Permission::ATTENDANCES_CREATE,
+                Permission::LEAVE_REQUESTS_VIEW,
+                Permission::LEAVE_REQUESTS_CREATE,
+                Permission::LEAVE_REQUESTS_UPDATE,
+                Permission::LEAVE_REQUESTS_DELETE,
                 Permission::CATEGORIES_VIEW,
                 Permission::CATEGORIES_CREATE,
                 Permission::CATEGORIES_UPDATE,
@@ -158,6 +170,10 @@ public function permissions(): array
                 Permission::EMPLOYEES_VIEW,
                 Permission::ATTENDANCES_VIEW,
                 Permission::ATTENDANCES_CREATE,
+                Permission::LEAVE_REQUESTS_VIEW,
+                Permission::LEAVE_REQUESTS_CREATE,
+                Permission::LEAVE_REQUESTS_UPDATE,
+                Permission::LEAVE_REQUESTS_DELETE,
                 Permission::CATEGORIES_VIEW,
                 Permission::CATEGORIES_CREATE,
                 Permission::CATEGORIES_UPDATE,
diff --git a/app/Http/Controllers/Admin/Hr/LeaveRequestController.php b/app/Http/Controllers/Admin/Hr/LeaveRequestController.php
new file mode 100644
index 0000000..004f2b7
--- /dev/null
+++ b/app/Http/Controllers/Admin/Hr/LeaveRequestController.php
@@ -0,0 +1,89 @@
+<?php
+
+namespace App\Http\Controllers\Admin\Hr;
+
+use App\Enums\Permission;
+use App\Http\Controllers\Concerns\ParsesDataTableQuery;
+use App\Http\Controllers\Controller;
+use App\Http\Requests\Admin\Hr\RejectLeaveRequestRequest;
+use App\Http\Requests\Admin\Hr\SubmitLeaveRequest;
+use App\Models\LeaveRequest;
+use App\Services\Hr\LeaveRequestService;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class LeaveRequestController extends Controller
+{
+    use ParsesDataTableQuery;
+
+    public function __construct(
+        private readonly LeaveRequestService $leaveRequestService,
+    ) {}
+
+    public function index(Request $request): Response
+    {
+        $tableQuery = $this->parseDataTableQuery($request);
+        $user = auth()->user();
+
+        return Inertia::render('admin/hr/leave-requests/Index', [
+            'leaveRequests' => $this->leaveRequestService->paginateForIndex($tableQuery),
+            'authEmployeeId' => $user?->employee?->id,
+            'canSubmit' => $user?->can(Permission::LEAVE_REQUESTS_CREATE->value)
+                && ! $user->can(Permission::LEAVE_REQUESTS_VERIFY->value)
+                && $user->employee !== null,
+            'filters' => $this->dataTableFilters($tableQuery),
+        ]);
+    }
+
+    public function store(SubmitLeaveRequest $request): RedirectResponse
+    {
+        $this->leaveRequestService->create($request->validated());
+
+        Inertia::flash('success', 'Pengajuan cuti berhasil diajukan.');
+
+        return redirect()->route('admin.hr.leave-requests.index');
+    }
+
+    public function update(SubmitLeaveRequest $request, LeaveRequest $leaveRequest): RedirectResponse
+    {
+        $this->leaveRequestService->update($leaveRequest, $request->validated());
+
+        Inertia::flash('success', 'Pengajuan cuti berhasil diperbarui.');
+
+        return redirect()->route('admin.hr.leave-requests.index');
+    }
+
+    public function destroy(LeaveRequest $leaveRequest): RedirectResponse
+    {
+        abort_unless(! auth()->user()?->can(Permission::LEAVE_REQUESTS_VERIFY->value), 403);
+
+        $this->leaveRequestService->delete($leaveRequest);
+
+        Inertia::flash('success', 'Pengajuan cuti berhasil dihapus.');
+
+        return redirect()->route('admin.hr.leave-requests.index');
+    }
+
+    public function approve(LeaveRequest $leaveRequest): RedirectResponse
+    {
+        $this->leaveRequestService->approve($leaveRequest);
+
+        Inertia::flash('success', 'Pengajuan cuti disetujui.');
+
+        return redirect()->route('admin.hr.leave-requests.index');
+    }
+
+    public function reject(RejectLeaveRequestRequest $request, LeaveRequest $leaveRequest): RedirectResponse
+    {
+        $this->leaveRequestService->reject(
+            $leaveRequest,
+            $request->validated('reason'),
+        );
+
+        Inertia::flash('success', 'Pengajuan cuti berhasil ditolak.');
+
+        return redirect()->route('admin.hr.leave-requests.index');
+    }
+}
diff --git a/app/Http/Requests/Admin/Hr/RejectLeaveRequestRequest.php b/app/Http/Requests/Admin/Hr/RejectLeaveRequestRequest.php
new file mode 100644
index 0000000..d5aa78b
--- /dev/null
+++ b/app/Http/Requests/Admin/Hr/RejectLeaveRequestRequest.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Requests\Admin\Hr;
+
+use App\Enums\Permission;
+use Illuminate\Foundation\Http\FormRequest;
+
+class RejectLeaveRequestRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return $this->user()?->can(Permission::LEAVE_REQUESTS_VERIFY->value) ?? false;
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function rules(): array
+    {
+        return [
+            'reason' => ['required', 'string', 'max:500'],
+        ];
+    }
+}
diff --git a/app/Http/Requests/Admin/Hr/SubmitLeaveRequest.php b/app/Http/Requests/Admin/Hr/SubmitLeaveRequest.php
new file mode 100644
index 0000000..ea62828
--- /dev/null
+++ b/app/Http/Requests/Admin/Hr/SubmitLeaveRequest.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Requests\Admin\Hr;
+
+use App\Enums\LeaveRequestStatus;
+use App\Enums\Permission;
+use App\Models\LeaveRequest;
+use Illuminate\Foundation\Http\FormRequest;
+
+class SubmitLeaveRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        $user = $this->user();
+
+        if ($user === null || $user->can(Permission::LEAVE_REQUESTS_VERIFY->value)) {
+            return false;
+        }
+
+        if ($this->isMethod('POST')) {
+            return $user->can(Permission::LEAVE_REQUESTS_CREATE->value)
+                && $user->employee !== null;
+        }
+
+        if (! $user->can(Permission::LEAVE_REQUESTS_UPDATE->value)) {
+            return false;
+        }
+
+        /** @var LeaveRequest|null $leaveRequest */
+        $leaveRequest = $this->route('leaveRequest');
+
+        return $leaveRequest?->status === LeaveRequestStatus::PENDING
+            && $user->employee?->id === $leaveRequest->employee_id;
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function rules(): array
+    {
+        return [
+            'start_date' => ['required', 'date'],
+            'end_date' => ['required', 'date', 'after_or_equal:start_date'],
+        ];
+    }
+}
diff --git a/app/Models/Employee.php b/app/Models/Employee.php
index a5438ec..49b36bf 100644
--- a/app/Models/Employee.php
+++ b/app/Models/Employee.php
@@ -107,4 +107,9 @@ public function attendances(): HasMany
     {
         return $this->hasMany(Attendance::class);
     }
+
+    public function leaveRequests(): HasMany
+    {
+        return $this->hasMany(LeaveRequest::class);
+    }
 }
diff --git a/app/Models/LeaveRequest.php b/app/Models/LeaveRequest.php
new file mode 100644
index 0000000..9475e43
--- /dev/null
+++ b/app/Models/LeaveRequest.php
@@ -0,0 +1,121 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\LeaveRequestStatus;
+use App\Models\Concerns\HasRejection;
+use Illuminate\Database\Eloquent\Attributes\Appends;
+use Illuminate\Database\Eloquent\Attributes\Guarded;
+use Illuminate\Database\Eloquent\Casts\Attribute;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+#[Guarded(['id'])]
+#[Appends([
+    'start_date_formatted',
+    'end_date_formatted',
+    'start_date_input',
+    'end_date_input',
+    'status_label',
+    'employee_name',
+    'rejection_reason',
+    'created_at_formatted',
+    'is_editable',
+    'can_verify',
+])]
+class LeaveRequest extends Model
+{
+    use HasRejection;
+
+    protected function casts(): array
+    {
+        return [
+            'start_date' => 'date',
+            'end_date' => 'date',
+            'total_days' => 'integer',
+            'status' => LeaveRequestStatus::class,
+            'verified_at' => 'datetime',
+        ];
+    }
+
+    public function startDateFormatted(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->start_date?->translatedFormat('l, d F Y'),
+        );
+    }
+
+    public function endDateFormatted(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->end_date?->translatedFormat('l, d F Y'),
+        );
+    }
+
+    public function startDateInput(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->start_date?->format('Y-m-d'),
+        );
+    }
+
+    public function endDateInput(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->end_date?->format('Y-m-d'),
+        );
+    }
+
+    public function statusLabel(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->status?->label(),
+        );
+    }
+
+    public function employeeName(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->employee?->user?->profile?->full_name
+                ?? $this->employee?->user?->username,
+        );
+    }
+
+    public function rejectionReason(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->rejection?->reason,
+        );
+    }
+
+    public function createdAtFormatted(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->created_at?->translatedFormat('l, d F Y H:i'),
+        );
+    }
+
+    public function isEditable(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->status === LeaveRequestStatus::PENDING,
+        );
+    }
+
+    public function canVerify(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->status === LeaveRequestStatus::PENDING,
+        );
+    }
+
+    public function employee(): BelongsTo
+    {
+        return $this->belongsTo(Employee::class);
+    }
+
+    public function verifiedBy(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'verified_by_id');
+    }
+}
diff --git a/app/Services/Hr/LeaveRequestService.php b/app/Services/Hr/LeaveRequestService.php
new file mode 100644
index 0000000..8213e1d
--- /dev/null
+++ b/app/Services/Hr/LeaveRequestService.php
@@ -0,0 +1,180 @@
+<?php
+
+namespace App\Services\Hr;
+
+use App\Enums\LeaveRequestStatus;
+use App\Models\LeaveRequest;
+use Carbon\Carbon;
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\ValidationException;
+
+class LeaveRequestService
+{
+    /**
+     * @param  array{search: string, sort: string, direction: 'asc'|'desc'}  $tableQuery
+     */
+    public function paginateForIndex(array $tableQuery): LengthAwarePaginator
+    {
+        $query = LeaveRequest::query()
+            ->with(['employee.user.profile', 'rejection'])
+            ->when($tableQuery['search'] !== '', function (Builder $query) use ($tableQuery): void {
+                $search = $tableQuery['search'];
+                $query->where(function (Builder $query) use ($search): void {
+                    $query->whereHas('employee.user.profile', fn (Builder $query) => $query->where('full_name', 'like', "%{$search}%"))
+                        ->orWhereHas('employee.user', fn (Builder $query) => $query->where('username', 'like', "%{$search}%"))
+                        ->orWhereHas('rejection', fn (Builder $query) => $query->where('reason', 'like', "%{$search}%"));
+                });
+            });
+
+        $this->applySorting($query, $tableQuery['sort'], $tableQuery['direction']);
+
+        return $query
+            ->paginate(10)
+            ->withQueryString();
+    }
+
+    /**
+     * @param  array{start_date: string, end_date: string}  $validated
+     */
+    public function create(array $validated): void
+    {
+        $employee = auth()->user()?->employee;
+
+        if ($employee === null) {
+            throw ValidationException::withMessages([
+                'employee' => 'Akun Anda tidak terhubung ke data pegawai.',
+            ]);
+        }
+
+        $startDate = Carbon::parse($validated['start_date'])->startOfDay();
+        $endDate = Carbon::parse($validated['end_date'])->startOfDay();
+
+        $this->ensureMinimumLeadTime($startDate);
+        $this->ensureValidDateRange($startDate, $endDate);
+
+        LeaveRequest::create([
+            'employee_id' => $employee->id,
+            'start_date' => $startDate,
+            'end_date' => $endDate,
+            'total_days' => $this->calculateTotalDays($startDate, $endDate),
+            'status' => LeaveRequestStatus::PENDING,
+        ]);
+    }
+
+    /**
+     * @param  array{start_date: string, end_date: string}  $validated
+     */
+    public function update(LeaveRequest $leaveRequest, array $validated): void
+    {
+        $this->ensureOwnedBySubmitter($leaveRequest);
+        $this->ensurePending($leaveRequest, 'Pengajuan cuti hanya dapat diubah saat status menunggu.');
+
+        $startDate = Carbon::parse($validated['start_date'])->startOfDay();
+        $endDate = Carbon::parse($validated['end_date'])->startOfDay();
+
+        $this->ensureMinimumLeadTime($startDate);
+        $this->ensureValidDateRange($startDate, $endDate);
+
+        $leaveRequest->start_date = $startDate;
+        $leaveRequest->end_date = $endDate;
+        $leaveRequest->total_days = $this->calculateTotalDays($startDate, $endDate);
+        $leaveRequest->save();
+    }
+
+    public function delete(LeaveRequest $leaveRequest): void
+    {
+        $this->ensureOwnedBySubmitter($leaveRequest);
+        $this->ensurePending($leaveRequest, 'Pengajuan cuti hanya dapat dihapus saat status menunggu.');
+
+        $leaveRequest->delete();
+    }
+
+    public function approve(LeaveRequest $leaveRequest): void
+    {
+        $this->ensurePending($leaveRequest, 'Pengajuan cuti ini sudah diverifikasi.');
+
+        $user = auth()->user();
+
+        DB::transaction(function () use ($leaveRequest, $user): void {
+            $leaveRequest->status = LeaveRequestStatus::APPROVED;
+            $leaveRequest->verified_at = now();
+            $leaveRequest->verified_by_id = $user->id;
+            $leaveRequest->save();
+        });
+    }
+
+    public function reject(LeaveRequest $leaveRequest, string $reason): void
+    {
+        $this->ensurePending($leaveRequest, 'Pengajuan cuti ini sudah diverifikasi.');
+
+        $user = auth()->user();
+
+        DB::transaction(function () use ($leaveRequest, $user, $reason): void {
+            $leaveRequest->status = LeaveRequestStatus::REJECTED;
+            $leaveRequest->verified_at = now();
+            $leaveRequest->verified_by_id = $user->id;
+            $leaveRequest->save();
+
+            $leaveRequest->rejection()->create([
+                'reason' => $reason,
+                'rejected_by_id' => $user->id,
+            ]);
+        });
+    }
+
+    private function calculateTotalDays(Carbon $startDate, Carbon $endDate): int
+    {
+        return (int) $startDate->diffInDays($endDate) + 1;
+    }
+
+    private function ensureMinimumLeadTime(Carbon $startDate): void
+    {
+        $minimumStartDate = now()->startOfDay()->addDay();
+
+        if ($startDate->lt($minimumStartDate)) {
+            throw ValidationException::withMessages([
+                'start_date' => 'Pengajuan cuti harus diajukan minimal H-1 (tanggal mulai paling cepat besok).',
+            ]);
+        }
+    }
+
+    private function ensureValidDateRange(Carbon $startDate, Carbon $endDate): void
+    {
+        if ($endDate->lt($startDate)) {
+            throw ValidationException::withMessages([
+                'end_date' => 'Tanggal selesai tidak boleh sebelum tanggal mulai.',
+            ]);
+        }
+    }
+
+    private function ensureOwnedBySubmitter(LeaveRequest $leaveRequest): void
+    {
+        if (auth()->user()?->employee?->id !== $leaveRequest->employee_id) {
+            throw ValidationException::withMessages([
+                'leave_request' => 'Anda tidak memiliki akses untuk mengubah pengajuan cuti ini.',
+            ]);
+        }
+    }
+
+    private function ensurePending(LeaveRequest $leaveRequest, string $message): void
+    {
+        if ($leaveRequest->status !== LeaveRequestStatus::PENDING) {
+            throw ValidationException::withMessages([
+                'leave_request' => $message,
+            ]);
+        }
+    }
+
+    private function applySorting(Builder $query, string $sort, string $direction): void
+    {
+        if (in_array($sort, ['created_at', 'start_date', 'end_date', 'total_days', 'status'], true)) {
+            $query->orderBy($sort, $direction);
+
+            return;
+        }
+
+        $query->latest();
+    }
+}
diff --git a/database/migrations/2026_06_11_120000_create_leave_requests_table.php b/database/migrations/2026_06_11_120000_create_leave_requests_table.php
new file mode 100644
index 0000000..6029638
--- /dev/null
+++ b/database/migrations/2026_06_11_120000_create_leave_requests_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use App\Enums\LeaveRequestStatus;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('leave_requests', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('employee_id')->constrained()->cascadeOnDelete();
+            $table->date('start_date');
+            $table->date('end_date');
+            $table->unsignedInteger('total_days');
+            $table->enum('status', array_column(LeaveRequestStatus::cases(), 'value'))
+                ->default(LeaveRequestStatus::PENDING->value);
+            $table->timestamp('verified_at')->nullable();
+            $table->foreignId('verified_by_id')->nullable()->constrained('users')->restrictOnDelete();
+            $table->timestamps();
+
+            $table->index(['employee_id', 'status']);
+            $table->index(['start_date', 'status']);
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('leave_requests');
+    }
+};
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 99da56e..fe6b569 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
-import { Banknote, Clock, FolderTree, Layers, LayoutDashboard, Package, Receipt, User, UserCheck, Users, Wallet, WalletCards } from '@lucide/vue';
+import { Banknote, CalendarDays, Clock, FolderTree, Layers, LayoutDashboard, Package, Receipt, User, UserCheck, Users, Wallet, WalletCards } from '@lucide/vue';
 import { computed } from 'vue';
 import {
     Sidebar,
@@ -22,7 +22,8 @@ const { can } = useCan();
 const isDashboardActive = computed(() => page.url.startsWith('/admin/dashboard'));
 const isEmployeesActive = computed(() => page.url.startsWith('/admin/hr/employees'));
 const isAttendancesActive = computed(() => page.url.startsWith('/admin/hr/attendances'));
-const showHrMenu = computed(() => can('employees.view') || can('attendances.view'));
+const isLeaveRequestsActive = computed(() => page.url.startsWith('/admin/hr/leave-requests'));
+const showHrMenu = computed(() => can('employees.view') || can('attendances.view') || can('leave-requests.view'));
 const isCategoriesActive = computed(() => page.url.startsWith('/admin/master/categories'));
 const isProductsActive = computed(() => page.url.startsWith('/admin/master/products'));
 const isRawMaterialsActive = computed(() => page.url.startsWith('/admin/master/raw-materials'));
@@ -178,6 +179,14 @@ const showMasterMenu = computed(() => (
                                 </Link>
                             </SidebarMenuButton>
                         </SidebarMenuItem>
+                        <SidebarMenuItem v-if="can('leave-requests.view')">
+                            <SidebarMenuButton as-child tooltip="Cuti" :is-active="isLeaveRequestsActive">
+                                <Link href="/admin/hr/leave-requests">
+                                    <CalendarDays />
+                                    <span>Cuti</span>
+                                </Link>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
                     </SidebarMenu>
                 </SidebarGroupContent>
             </SidebarGroup>
diff --git a/resources/js/components/admin/hr/leave-requests/LeaveRequestFormModal.vue b/resources/js/components/admin/hr/leave-requests/LeaveRequestFormModal.vue
new file mode 100644
index 0000000..853f23a
--- /dev/null
+++ b/resources/js/components/admin/hr/leave-requests/LeaveRequestFormModal.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { Save } from '@lucide/vue';
+import { computed, watch } from 'vue';
+import { toast } from 'vue-sonner';
+import { Button } from '@/components/ui/button';
+import { DatePicker } from '@/components/ui/date-picker';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import {
+    Field,
+    FieldError,
+    FieldGroup,
+    FieldLabel,
+    FieldSet,
+} from '@/components/ui/field';
+import type { LeaveRequestFormData, LeaveRequestListItem } from '@/types/leave-request';
+
+const open = defineModel<boolean>('open', { default: false });
+
+const props = defineProps<{
+    leaveRequest?: LeaveRequestListItem | null;
+}>();
+
+const isEditing = computed(() => props.leaveRequest != null);
+
+const form = useForm<LeaveRequestFormData>({
+    start_date: '',
+    end_date: '',
+});
+
+function resetForm() {
+    form.reset();
+    form.clearErrors();
+}
+
+function populateForm(leaveRequest: LeaveRequestListItem | null | undefined) {
+    resetForm();
+
+    if (!leaveRequest) {
+        return;
+    }
+
+    form.start_date = leaveRequest.start_date_input;
+    form.end_date = leaveRequest.end_date_input;
+}
+
+watch(
+    () => props.leaveRequest,
+    (leaveRequest) => {
+        populateForm(leaveRequest);
+    },
+);
+
+watch(open, (isOpen) => {
+    if (isOpen) {
+        populateForm(props.leaveRequest);
+    } else {
+        resetForm();
+    }
+});
+
+function submit() {
+    const options = {
+        preserveScroll: true,
+        onSuccess: () => {
+            open.value = false;
+        },
+        onError: () => {
+            toast.error('Gagal menyimpan data. Periksa kembali formulir.');
+        },
+    };
+
+    if (isEditing.value && props.leaveRequest) {
+        form.put(`/admin/hr/leave-requests/${props.leaveRequest.id}`, options);
+    } else {
+        form.post('/admin/hr/leave-requests', options);
+    }
+}
+</script>
+
+<template>
+    <Dialog v-model:open="open">
+        <DialogContent class="sm:max-w-md">
+            <DialogHeader>
+                <DialogTitle>{{ isEditing ? 'Ubah Pengajuan Cuti' : 'Ajukan Cuti' }}</DialogTitle>
+            </DialogHeader>
+
+            <form @submit.prevent="submit">
+                <FieldGroup>
+                    <FieldSet class="grid gap-4">
+                        <p class="text-sm text-muted-foreground">
+                            Pengajuan cuti harus diajukan minimal H-1 (tanggal mulai paling cepat besok).
+                        </p>
+                        <Field>
+                            <FieldLabel for="leave-start-date" required>Tanggal Mulai</FieldLabel>
+                            <DatePicker id="leave-start-date" v-model="form.start_date" autofocus />
+                            <FieldError :errors="form.errors.start_date ? [form.errors.start_date] : []" />
+                        </Field>
+                        <Field>
+                            <FieldLabel for="leave-end-date" required>Tanggal Selesai</FieldLabel>
+                            <DatePicker id="leave-end-date" v-model="form.end_date" />
+                            <FieldError :errors="form.errors.end_date ? [form.errors.end_date] : []" />
+                        </Field>
+                    </FieldSet>
+                </FieldGroup>
+
+                <DialogFooter class="mt-6">
+                    <Button type="button" variant="outline" :disabled="form.processing" @click="open = false">
+                        Batal
+                    </Button>
+                    <Button type="submit" :disabled="form.processing">
+                        <Save class="size-4" />
+                        {{ form.processing ? 'Menyimpan...' : 'Ajukan' }}
+                    </Button>
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>
diff --git a/resources/js/components/admin/hr/leave-requests/RejectLeaveRequestModal.vue b/resources/js/components/admin/hr/leave-requests/RejectLeaveRequestModal.vue
new file mode 100644
index 0000000..99d690d
--- /dev/null
+++ b/resources/js/components/admin/hr/leave-requests/RejectLeaveRequestModal.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { Save } from '@lucide/vue';
+import { watch } from 'vue';
+import { toast } from 'vue-sonner';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import {
+    Field,
+    FieldError,
+    FieldGroup,
+    FieldLabel,
+    FieldSet,
+} from '@/components/ui/field';
+import { Textarea } from '@/components/ui/textarea';
+import type { LeaveRequestListItem } from '@/types/leave-request';
+
+const open = defineModel<boolean>('open', { default: false });
+
+const props = defineProps<{
+    leaveRequest?: LeaveRequestListItem | null;
+}>();
+
+const form = useForm({
+    reason: '',
+});
+
+function resetForm() {
+    form.reset();
+    form.clearErrors();
+}
+
+watch(open, (isOpen) => {
+    if (!isOpen) {
+        resetForm();
+    }
+});
+
+function submit() {
+    if (!props.leaveRequest) {
+        return;
+    }
+
+    form.post(`/admin/hr/leave-requests/${props.leaveRequest.id}/reject`, {
+        preserveScroll: true,
+        onSuccess: () => {
+            open.value = false;
+        },
+        onError: () => {
+            toast.error('Gagal menolak pengajuan cuti. Periksa kembali formulir.');
+        },
+    });
+}
+</script>
+
+<template>
+    <Dialog v-model:open="open">
+        <DialogContent class="sm:max-w-md">
+            <DialogHeader>
+                <DialogTitle>Tolak Pengajuan Cuti</DialogTitle>
+            </DialogHeader>
+
+            <form @submit.prevent="submit">
+                <FieldGroup>
+                    <FieldSet class="grid gap-4">
+                        <Field>
+                            <FieldLabel for="reject-reason" required>Alasan Penolakan</FieldLabel>
+                            <Textarea id="reject-reason" v-model="form.reason" placeholder="Tuliskan alasan penolakan"
+                                rows="3" autofocus />
+                            <FieldError :errors="form.errors.reason ? [form.errors.reason] : []" />
+                        </Field>
+                    </FieldSet>
+                </FieldGroup>
+
+                <DialogFooter class="mt-6">
+                    <Button type="button" variant="outline" :disabled="form.processing" @click="open = false">
+                        Batal
+                    </Button>
+                    <Button type="submit" variant="destructive" :disabled="form.processing">
+                        <Save class="size-4" />
+                        {{ form.processing ? 'Menyimpan...' : 'Tolak' }}
+                    </Button>
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>
diff --git a/resources/js/components/admin/hr/leave-requests/columns.ts b/resources/js/components/admin/hr/leave-requests/columns.ts
new file mode 100644
index 0000000..9c3707f
--- /dev/null
+++ b/resources/js/components/admin/hr/leave-requests/columns.ts
@@ -0,0 +1,79 @@
+import type { ColumnDef } from '@tanstack/vue-table';
+import { h } from 'vue';
+import DataTableActions from '@/components/admin/hr/leave-requests/data-table-actions.vue';
+import { DataTableColumnHeader } from '@/components/data-table';
+import { Badge } from '@/components/ui/badge';
+import type { LeaveRequestListItem } from '@/types/leave-request';
+
+function statusVariant(status: string): 'default' | 'secondary' | 'destructive' | 'outline' {
+    switch (status) {
+        case 'approved':
+            return 'default';
+        case 'rejected':
+            return 'destructive';
+        default:
+            return 'outline';
+    }
+}
+
+export function createColumns(
+    authEmployeeId: number | null,
+    onEdit: (leaveRequest: LeaveRequestListItem) => void,
+    onReject: (leaveRequest: LeaveRequestListItem) => void,
+): ColumnDef<LeaveRequestListItem>[] {
+    return [
+        {
+            accessorKey: 'created_at_formatted',
+            enableSorting: true,
+            header: () => h(DataTableColumnHeader, { title: 'Tanggal Pengajuan', column: 'created_at' }),
+        },
+        {
+            accessorKey: 'employee_name',
+            enableSorting: false,
+            header: () => 'Pegawai',
+        },
+        {
+            accessorKey: 'start_date_formatted',
+            enableSorting: true,
+            header: () => h(DataTableColumnHeader, { title: 'Mulai', column: 'start_date' }),
+        },
+        {
+            accessorKey: 'end_date_formatted',
+            enableSorting: true,
+            header: () => h(DataTableColumnHeader, { title: 'Selesai', column: 'end_date' }),
+        },
+        {
+            accessorKey: 'total_days',
+            enableSorting: true,
+            header: () => h(DataTableColumnHeader, { title: 'Hari', column: 'total_days' }),
+            cell: ({ row }) => `${row.original.total_days} hari`,
+        },
+        {
+            accessorKey: 'status_label',
+            enableSorting: true,
+            header: () => h(DataTableColumnHeader, { title: 'Status', column: 'status' }),
+            cell: ({ row }) => h(
+                Badge,
+                { variant: statusVariant(row.original.status) },
+                () => row.original.status_label,
+            ),
+        },
+        {
+            accessorKey: 'rejection_reason',
+            enableSorting: false,
+            header: () => 'Alasan Penolakan',
+            cell: ({ row }) => row.original.rejection_reason ?? '-',
+        },
+        {
+            id: 'actions',
+            enableSorting: false,
+            enableHiding: false,
+            cell: ({ row }) => h(DataTableActions, {
+                leaveRequest: row.original,
+                authEmployeeId,
+                onEdit: () => onEdit(row.original),
+                onReject: () => onReject(row.original),
+            }),
+        },
+    ];
+}
diff --git a/resources/js/components/admin/hr/leave-requests/data-table-actions.vue b/resources/js/components/admin/hr/leave-requests/data-table-actions.vue
new file mode 100644
index 0000000..fbeefb7
--- /dev/null
+++ b/resources/js/components/admin/hr/leave-requests/data-table-actions.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3';
+import { Check, Pencil, Trash2, X } from '@lucide/vue';
+import { computed, ref } from 'vue';
+import { toast } from 'vue-sonner';
+import ConfirmDialog from '@/components/ConfirmDialog.vue';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useCan } from '@/composables/useCan';
+import type { LeaveRequestListItem } from '@/types/leave-request';
+
+const props = defineProps<{
+    leaveRequest: LeaveRequestListItem;
+    authEmployeeId: number | null;
+}>();
+
+const emit = defineEmits<{
+    edit: [leaveRequest: LeaveRequestListItem];
+    reject: [leaveRequest: LeaveRequestListItem];
+}>();
+
+const { can } = useCan();
+
+const isOwner = computed(() => (
+    props.authEmployeeId !== null
+    && props.leaveRequest.employee_id === props.authEmployeeId
+));
+
+const canEdit = computed(() => (
+    props.leaveRequest.is_editable
+    && !can('leave-requests.verify')
+    && isOwner.value
+    && can('leave-requests.update')
+));
+
+const canDelete = computed(() => (
+    props.leaveRequest.is_editable
+    && !can('leave-requests.verify')
+    && isOwner.value
+    && can('leave-requests.delete')
+));
+
+const deleteConfirmOpen = ref(false);
+const approveConfirmOpen = ref(false);
+const deleteProcessing = ref(false);
+const approveProcessing = ref(false);
+
+function destroyLeaveRequest() {
+    deleteProcessing.value = true;
+
+    router.delete(`/admin/hr/leave-requests/${props.leaveRequest.id}`, {
+        preserveScroll: true,
+        onSuccess: () => {
+            deleteConfirmOpen.value = false;
+        },
+        onError: () => {
+            toast.error('Gagal menghapus pengajuan cuti.');
+        },
+        onFinish: () => {
+            deleteProcessing.value = false;
+        },
+    });
+}
+
+function approveLeaveRequest() {
+    approveProcessing.value = true;
+
+    router.post(`/admin/hr/leave-requests/${props.leaveRequest.id}/approve`, {}, {
+        preserveScroll: true,
+        onSuccess: () => {
+            approveConfirmOpen.value = false;
+        },
+        onError: () => {
+            toast.error('Gagal menyetujui pengajuan cuti.');
+        },
+        onFinish: () => {
+            approveProcessing.value = false;
+        },
+    });
+}
+</script>
+
+<template>
+    <div class="flex items-center justify-end gap-1">
+        <Tooltip v-if="canEdit">
+            <TooltipTrigger as-child>
+                <Button variant="ghost" size="icon" class="size-8" @click="emit('edit', leaveRequest)">
+                    <Pencil class="size-4" />
+                    <span class="sr-only">Ubah</span>
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>Ubah</TooltipContent>
+        </Tooltip>
+
+        <Tooltip v-if="leaveRequest.can_verify && can('leave-requests.verify')">
+            <TooltipTrigger as-child>
+                <Button variant="ghost" size="icon" class="size-8 text-green-600 hover:text-green-600"
+                    @click="approveConfirmOpen = true">
+                    <Check class="size-4" />
+                    <span class="sr-only">Setujui</span>
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>Setujui</TooltipContent>
+        </Tooltip>
+
+        <Tooltip v-if="leaveRequest.can_verify && can('leave-requests.verify')">
+            <TooltipTrigger as-child>
+                <Button variant="ghost" size="icon" class="text-destructive hover:text-destructive size-8"
+                    @click="emit('reject', leaveRequest)">
+                    <X class="size-4" />
+                    <span class="sr-only">Tolak</span>
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>Tolak</TooltipContent>
+        </Tooltip>
+
+        <Tooltip v-if="canDelete">
+            <TooltipTrigger as-child>
+                <Button variant="ghost" size="icon" class="text-destructive hover:text-destructive size-8"
+                    @click="deleteConfirmOpen = true">
+                    <Trash2 class="size-4" />
+                    <span class="sr-only">Hapus</span>
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>Hapus</TooltipContent>
+        </Tooltip>
+    </div>
+
+    <ConfirmDialog v-if="can('leave-requests.verify')" v-model:open="approveConfirmOpen" title="Setujui cuti?"
+        :description="`Cuti ${leaveRequest.employee_name} (${leaveRequest.start_date_formatted} - ${leaveRequest.end_date_formatted}, ${leaveRequest.total_days} hari) akan disetujui.`"
+        confirm-label="Setujui" cancel-label="Batal" :loading="approveProcessing" @confirm="approveLeaveRequest" />
+
+    <ConfirmDialog v-if="canDelete" v-model:open="deleteConfirmOpen" title="Hapus pengajuan cuti?"
+        :description="`Pengajuan cuti ${leaveRequest.employee_name} akan dihapus.`" confirm-label="Hapus"
+        cancel-label="Batal" destructive :loading="deleteProcessing" @confirm="destroyLeaveRequest" />
+</template>
diff --git a/resources/js/pages/admin/hr/leave-requests/Index.vue b/resources/js/pages/admin/hr/leave-requests/Index.vue
new file mode 100644
index 0000000..43c92b4
--- /dev/null
+++ b/resources/js/pages/admin/hr/leave-requests/Index.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { Head } from '@inertiajs/vue3';
+import { Plus } from '@lucide/vue';
+import { computed, ref, watch } from 'vue';
+import { createColumns } from '@/components/admin/hr/leave-requests/columns';
+import LeaveRequestFormModal from '@/components/admin/hr/leave-requests/LeaveRequestFormModal.vue';
+import RejectLeaveRequestModal from '@/components/admin/hr/leave-requests/RejectLeaveRequestModal.vue';
+import { DataTable } from '@/components/data-table';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { useCan } from '@/composables/useCan';
+import { useDataTableQuery, useDataTableQuerySync } from '@/composables/useDataTableQuery';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import type { DataTableSort } from '@/types/data-table';
+import type { LeaveRequestListItem, LeaveRequestPageProps } from '@/types/leave-request';
+
+const props = defineProps<LeaveRequestPageProps>();
+
+const { can } = useCan();
+const search = ref(props.filters.search ?? '');
+const formModalOpen = ref(false);
+const rejectModalOpen = ref(false);
+const editingLeaveRequest = ref<LeaveRequestListItem | null>(null);
+const rejectingLeaveRequest = ref<LeaveRequestListItem | null>(null);
+
+const { query, setSearch, setSort, resetFilters, syncFromServer } = useDataTableQuery({
+    url: '/admin/hr/leave-requests',
+    initial: { ...props.filters },
+});
+
+useDataTableQuerySync(() => props.filters, syncFromServer);
+
+const columns = computed(() => createColumns(
+    props.authEmployeeId,
+    openEditModal,
+    openRejectModal,
+));
+
+const currentSort = computed<DataTableSort | null>(() => {
+    if (!query.value.sort || !query.value.direction) {
+        return null;
+    }
+
+    return {
+        column: query.value.sort,
+        direction: query.value.direction,
+    };
+});
+
+const pagination = computed(() => ({
+    currentPage: props.leaveRequests.current_page,
+    perPage: props.leaveRequests.per_page,
+    lastPage: props.leaveRequests.last_page,
+    total: props.leaveRequests.total,
+}));
+
+function openCreateModal() {
+    editingLeaveRequest.value = null;
+    formModalOpen.value = true;
+}
+
+function openEditModal(leaveRequest: LeaveRequestListItem) {
+    editingLeaveRequest.value = leaveRequest;
+    formModalOpen.value = true;
+}
+
+function openRejectModal(leaveRequest: LeaveRequestListItem) {
+    rejectingLeaveRequest.value = leaveRequest;
+    rejectModalOpen.value = true;
+}
+
+watch(search, (value) => {
+    setSearch(value);
+});
+
+watch(
+    () => props.filters.search,
+    (value) => {
+        search.value = value ?? '';
+    },
+);
+</script>
+
+<template>
+
+    <Head title="Cuti" />
+
+    <AdminLayout>
+        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div class="space-y-1">
+                <h2 class="text-2xl font-bold tracking-tight">
+                    Cuti
+                </h2>
+            </div>
+
+            <Button v-if="canSubmit" class="shrink-0 self-start sm:self-center" @click="openCreateModal">
+                <Plus class="size-4" />
+                Ajukan
+            </Button>
+        </div>
+
+        <Card class="min-w-0">
+            <CardContent class="min-w-0 pt-6">
+                <DataTable v-model:search="search" :columns="columns" :data="leaveRequests.data"
+                    :pagination="pagination" :pagination-links="leaveRequests.links" :sort="currentSort"
+                    @sort-change="setSort" @filters-reset="resetFilters" />
+            </CardContent>
+        </Card>
+
+        <LeaveRequestFormModal v-if="canSubmit" v-model:open="formModalOpen"
+            :leave-request="editingLeaveRequest" />
+
+        <RejectLeaveRequestModal v-if="can('leave-requests.verify')" v-model:open="rejectModalOpen"
+            :leave-request="rejectingLeaveRequest" />
+    </AdminLayout>
+</template>
diff --git a/resources/js/types/leave-request.ts b/resources/js/types/leave-request.ts
new file mode 100644
index 0000000..17591d6
--- /dev/null
+++ b/resources/js/types/leave-request.ts
@@ -0,0 +1,45 @@
+export type LeaveRequestListItem = {
+    id: number;
+    employee_id: number;
+    start_date_input: string;
+    end_date_input: string;
+    start_date_formatted: string;
+    end_date_formatted: string;
+    total_days: number;
+    status: string;
+    status_label: string;
+    rejection_reason: string | null;
+    employee_name: string;
+    created_at_formatted: string;
+    is_editable: boolean;
+    can_verify: boolean;
+};
+
+export type LeaveRequestFormData = {
+    start_date: string;
+    end_date: string;
+};
+
+export type PaginatedLeaveRequests = {
+    data: LeaveRequestListItem[];
+    current_page: number;
+    last_page: number;
+    per_page: number;
+    total: number;
+    links: Array<{
+        url: string | null;
+        label: string;
+        active: boolean;
+    }>;
+};
+
+export type LeaveRequestPageProps = {
+    leaveRequests: PaginatedLeaveRequests;
+    authEmployeeId: number | null;
+    canSubmit: boolean;
+    filters: {
+        search: string;
+        sort?: string;
+        direction?: 'asc' | 'desc';
+    };
+};
diff --git a/routes/web.php b/routes/web.php
index 20396f5..9133237 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -9,6 +9,7 @@
 use App\Http\Controllers\Admin\Finance\PayrollPeriodController;
 use App\Http\Controllers\Admin\Hr\AttendanceController;
 use App\Http\Controllers\Admin\Hr\EmployeeController;
+use App\Http\Controllers\Admin\Hr\LeaveRequestController;
 use App\Http\Controllers\Admin\Master\CategoryController;
 use App\Http\Controllers\Admin\Master\CustomerController;
 use App\Http\Controllers\Admin\Master\ProductController;
@@ -301,6 +302,32 @@
 
                     Route::get('/', [EmployeeController::class, 'index'])->name('index');
                 });
+
+            Route::prefix('leave-requests')->name('leave-requests.')
+                ->middleware('permission:'.Permission::LEAVE_REQUESTS_VIEW->value)
+                ->group(function () {
+                    Route::get('/', [LeaveRequestController::class, 'index'])->name('index');
+
+                    Route::post('/', [LeaveRequestController::class, 'store'])
+                        ->middleware('permission:'.Permission::LEAVE_REQUESTS_CREATE->value)
+                        ->name('store');
+
+                    Route::put('{leaveRequest}', [LeaveRequestController::class, 'update'])
+                        ->middleware('permission:'.Permission::LEAVE_REQUESTS_UPDATE->value)
+                        ->name('update');
+
+                    Route::delete('{leaveRequest}', [LeaveRequestController::class, 'destroy'])
+                        ->middleware('permission:'.Permission::LEAVE_REQUESTS_DELETE->value)
+                        ->name('destroy');
+
+                    Route::post('{leaveRequest}/approve', [LeaveRequestController::class, 'approve'])
+                        ->middleware('permission:'.Permission::LEAVE_REQUESTS_VERIFY->value)
+                        ->name('approve');
+
+                    Route::post('{leaveRequest}/reject', [LeaveRequestController::class, 'reject'])
+                        ->middleware('permission:'.Permission::LEAVE_REQUESTS_VERIFY->value)
+                        ->name('reject');
+                });
         });
     });
 });