feat: implement leave request management with CRUD functionality and integrate UI components

This commit is contained in:
Yoga Pangestu 2026-07-29 21:49:02 +07:00
parent d1f1d82099
commit a179382288
8 changed files with 795 additions and 5 deletions

View File

@ -0,0 +1,97 @@
<?php
namespace App\Http\Controllers\Admin\SDM;
use App\Http\Controllers\Controller;
use App\Http\Requests\Admin\SDM\LeaveRequestRequest;
use App\Models\LeaveRequest;
use App\Services\Admin\SDM\LeaveRequestService;
use Illuminate\Http\RedirectResponse;
use Illuminate\Validation\ValidationException;
use Inertia\Inertia;
use Inertia\Response;
class LeaveRequestController extends Controller
{
public function __construct(
private LeaveRequestService $service
) {}
public function index(): Response
{
return Inertia::render('admin/sdm/leave-request/index', [
'leaveRequests' => $this->service->getAll(),
]);
}
public function store(LeaveRequestRequest $request): RedirectResponse
{
try {
$this->service->create($request->validated());
Inertia::flash('toast', ['type' => 'success', 'message' => 'Permohonan cuti berhasil ditambahkan.']);
} catch (ValidationException $e) {
$firstError = collect($e->errors())->flatten()->first();
Inertia::flash('toast', ['type' => 'error', 'message' => $firstError ?? 'Terjadi kesalahan.']);
} catch (\Exception $e) {
Inertia::flash('toast', ['type' => 'error', 'message' => $e->getMessage()]);
}
return to_route('admin.sdm.leave-requests.index');
}
public function update(LeaveRequestRequest $request, LeaveRequest $leaveRequest): RedirectResponse
{
try {
$this->service->update($leaveRequest, $request->validated());
Inertia::flash('toast', ['type' => 'success', 'message' => 'Permohonan cuti berhasil diperbarui.']);
} catch (ValidationException $e) {
$firstError = collect($e->errors())->flatten()->first();
Inertia::flash('toast', ['type' => 'error', 'message' => $firstError ?? 'Terjadi kesalahan.']);
} catch (\Exception $e) {
Inertia::flash('toast', ['type' => 'error', 'message' => $e->getMessage()]);
}
return to_route('admin.sdm.leave-requests.index');
}
public function destroy(LeaveRequest $leaveRequest): RedirectResponse
{
try {
$this->service->delete($leaveRequest);
Inertia::flash('toast', ['type' => 'success', 'message' => 'Permohonan cuti berhasil dihapus.']);
} catch (\Exception $e) {
Inertia::flash('toast', ['type' => 'error', 'message' => $e->getMessage()]);
}
return to_route('admin.sdm.leave-requests.index');
}
public function approve(LeaveRequest $leaveRequest): RedirectResponse
{
try {
$this->service->approve($leaveRequest);
Inertia::flash('toast', ['type' => 'success', 'message' => 'Permohonan cuti berhasil disetujui.']);
} catch (\Exception $e) {
Inertia::flash('toast', ['type' => 'error', 'message' => $e->getMessage()]);
}
return to_route('admin.sdm.leave-requests.index');
}
public function reject(LeaveRequest $leaveRequest): RedirectResponse
{
try {
$this->service->reject($leaveRequest);
Inertia::flash('toast', ['type' => 'success', 'message' => 'Permohonan cuti berhasil ditolak.']);
} catch (\Exception $e) {
Inertia::flash('toast', ['type' => 'error', 'message' => $e->getMessage()]);
}
return to_route('admin.sdm.leave-requests.index');
}
}

View File

@ -0,0 +1,29 @@
<?php
namespace App\Http\Requests\Admin\SDM;
use Illuminate\Foundation\Http\FormRequest;
class LeaveRequestRequest extends FormRequest
{
public function authorize(): bool
{
return true;
}
public function rules(): array
{
return [
'start_date' => ['required', 'date', 'after_or_equal:today'],
'end_date' => ['required', 'date', 'after_or_equal:start_date'],
];
}
public function attributes(): array
{
return [
'start_date' => 'tanggal mulai',
'end_date' => 'tanggal selesai',
];
}
}

View File

@ -26,7 +26,7 @@ public function create(array $data): EmployeeAdvance
$cashAccount = CashAccount::firstOrFail();
$employee = auth()->user()->employee;
if (!$employee) {
if (! $employee) {
throw new \Exception('Anda tidak terdaftar sebagai karyawan.');
}
@ -45,7 +45,7 @@ public function create(array $data): EmployeeAdvance
'amount' => $data['amount'],
'balance_after' => $newBalance,
'type' => CashTransactionType::EXPENSE,
'description' => 'Kasbon: ' . $data['description'],
'description' => 'Kasbon: '.$data['description'],
]);
return EmployeeAdvance::create([
@ -81,7 +81,7 @@ public function update(EmployeeAdvance $employeeAdvance, array $data): EmployeeA
$cashTransaction->update([
'amount' => $newAmount,
'balance_after' => $newBalance,
'description' => 'Kasbon: ' . $data['description'],
'description' => 'Kasbon: '.$data['description'],
]);
$employeeAdvance->update([
@ -133,7 +133,7 @@ public function pay(EmployeeAdvance $employeeAdvance): EmployeeAdvance
'amount' => $employeeAdvance->amount,
'balance_after' => $newBalance,
'type' => CashTransactionType::DEPOSIT,
'description' => 'Pembayaran kasbon: ' . $employeeAdvance->description,
'description' => 'Pembayaran kasbon: '.$employeeAdvance->description,
]);
$employeeAdvance->update([

View File

@ -0,0 +1,86 @@
<?php
namespace App\Services\Admin\SDM;
use App\Enums\LeaveRequestStatus;
use App\Models\LeaveRequest;
use Carbon\Carbon;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\DB;
class LeaveRequestService
{
public function getAll(): Collection
{
return LeaveRequest::with(['employee.user.userProfile', 'verifiedBy'])
->latest()
->get();
}
public function create(array $data): LeaveRequest
{
return DB::transaction(function () use ($data) {
$employee = auth()->user()->employee;
if (! $employee) {
throw new \Exception('Anda tidak terdaftar sebagai karyawan.');
}
$startDate = new Carbon($data['start_date']);
$endDate = new Carbon($data['end_date']);
$totalDays = $startDate->diffInDays($endDate) + 1;
return LeaveRequest::create([
'employee_id' => $employee->id,
'start_date' => $data['start_date'],
'end_date' => $data['end_date'],
'total_days' => $totalDays,
'status' => LeaveRequestStatus::PENDING,
]);
});
}
public function update(LeaveRequest $leaveRequest, array $data): LeaveRequest
{
return DB::transaction(function () use ($leaveRequest, $data) {
$startDate = new Carbon($data['start_date']);
$endDate = new Carbon($data['end_date']);
$totalDays = $startDate->diffInDays($endDate) + 1;
$leaveRequest->update([
'start_date' => $data['start_date'],
'end_date' => $data['end_date'],
'total_days' => $totalDays,
]);
return $leaveRequest;
});
}
public function delete(LeaveRequest $leaveRequest): bool
{
return $leaveRequest->delete();
}
public function approve(LeaveRequest $leaveRequest): LeaveRequest
{
$leaveRequest->update([
'status' => LeaveRequestStatus::APPROVED,
'verified_by_id' => auth()->id(),
'verified_at' => now(),
]);
return $leaveRequest;
}
public function reject(LeaveRequest $leaveRequest): LeaveRequest
{
$leaveRequest->update([
'status' => LeaveRequestStatus::REJECTED,
'verified_by_id' => auth()->id(),
'verified_at' => now(),
]);
return $leaveRequest;
}
}

View File

@ -41,6 +41,7 @@ import { index as suppliersIndex } from '@/routes/admin/master/suppliers';
import { index as cashAccountsIndex } from '@/routes/admin/finance/cash-accounts';
import { index as expensesIndex } from '@/routes/admin/finance/expenses';
import { index as employeeAdvancesIndex } from '@/routes/admin/finance/employee-advances';
import { index as leaveRequestsIndex } from '@/routes/admin/sdm/leave-requests';
type NavMenuItem = { title: string; href: string; icon: LucideIcon };
@ -81,7 +82,7 @@ const keuanganItems: NavMenuItem[] = [
const sdmItems: NavMenuItem[] = [
{ title: 'Pegawai', href: '#', icon: UserCircle },
{ title: 'Presensi', href: '#', icon: CalendarCheck },
{ title: 'Cuti', href: '#', icon: CalendarDays },
{ title: 'Cuti', href: leaveRequestsIndex.url(), icon: CalendarDays },
];
const sistemItems: NavMenuItem[] = [

View File

@ -0,0 +1,261 @@
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import type { ColumnDef } from '@tanstack/react-table';
import { ArrowUpDown, CheckCircle, Pencil, Trash2, XCircle } from 'lucide-react';
export type LeaveRequest = {
id: number;
start_date: string;
end_date: string;
total_days: number;
status: 'pending' | 'approved' | 'rejected' | 'cancelled';
created_at: string;
employee: {
user: {
user_profile: {
full_name: string;
};
};
};
};
function formatShortDate(dateString: string): string {
const date = new Date(dateString);
return date.toLocaleDateString('id-ID', {
day: '2-digit',
month: 'short',
year: 'numeric',
});
}
function getStatusBadge(status: string) {
const statusConfig: Record<string, { label: string; className: string }> = {
pending: {
label: 'Menunggu',
className: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-100',
},
approved: {
label: 'Disetujui',
className: 'bg-green-100 text-green-800 hover:bg-green-100',
},
rejected: {
label: 'Ditolak',
className: 'bg-red-100 text-red-800 hover:bg-red-100',
},
cancelled: {
label: 'Dibatalkan',
className: 'bg-gray-100 text-gray-800 hover:bg-gray-100',
},
};
const config = statusConfig[status] ?? statusConfig.pending;
return (
<Badge variant="secondary" className={config.className}>
{config.label}
</Badge>
);
}
type CreateColumnsParams = {
handleEdit: (leaveRequest: LeaveRequest) => void;
handleDeleteClick: (leaveRequest: LeaveRequest) => void;
handleApprove: (leaveRequest: LeaveRequest) => void;
handleReject: (leaveRequest: LeaveRequest) => void;
};
export function createLeaveRequestColumns(
params: CreateColumnsParams,
): ColumnDef<LeaveRequest>[] {
const { handleEdit, handleDeleteClick, handleApprove, handleReject } = params;
return [
{
id: 'no',
header: () => <span className="block text-center">No</span>,
cell: ({ row }) => (
<span className="block text-center">
{row.index + 1}
</span>
),
meta: {
className: 'w-[50px] text-center',
headerClassName: 'w-[50px] text-center',
},
},
{
id: 'employee_name',
header: () => <span>Oleh</span>,
cell: ({ row }) => {
const employee = row.original.employee;
return <span>{employee?.user?.user_profile?.full_name ?? '-'}</span>;
},
},
{
accessorKey: 'start_date',
header: ({ column }) => (
<Button
variant="ghost"
className="-ml-3 h-8"
onClick={() =>
column.toggleSorting(
column.getIsSorted() === 'asc',
)
}
>
<span>Tanggal Mulai</span>
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
),
cell: ({ row }) => (
<span>{formatShortDate(row.getValue('start_date') as string)}</span>
),
},
{
accessorKey: 'end_date',
header: ({ column }) => (
<Button
variant="ghost"
className="-ml-3 h-8"
onClick={() =>
column.toggleSorting(
column.getIsSorted() === 'asc',
)
}
>
<span>Tanggal Selesai</span>
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
),
cell: ({ row }) => (
<span>{formatShortDate(row.getValue('end_date') as string)}</span>
),
},
{
accessorKey: 'total_days',
header: ({ column }) => (
<Button
variant="ghost"
className="-ml-3 h-8"
onClick={() =>
column.toggleSorting(
column.getIsSorted() === 'asc',
)
}
>
<span>Hari</span>
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
),
cell: ({ row }) => (
<span className="font-medium">
{row.getValue('total_days') as number} hari
</span>
),
},
{
accessorKey: 'status',
header: () => <span>Status</span>,
cell: ({ row }) => (
<span>{getStatusBadge(row.getValue('status') as string)}</span>
),
},
{
id: 'actions',
header: () => <span className="block text-center">Aksi</span>,
meta: {
className: 'w-[150px] text-center',
headerClassName: 'w-[150px] text-center',
},
cell: ({ row }) => {
const leaveRequest = row.original;
return (
<TooltipProvider>
<div className="flex items-center justify-center gap-1">
{leaveRequest.status === 'pending' && (
<>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={() =>
handleApprove(leaveRequest)
}
>
<CheckCircle className="h-4 w-4 text-green-600" />
</Button>
</TooltipTrigger>
<TooltipContent side="top">
Setujui
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={() =>
handleReject(leaveRequest)
}
>
<XCircle className="h-4 w-4 text-red-600" />
</Button>
</TooltipTrigger>
<TooltipContent side="top">
Tolak
</TooltipContent>
</Tooltip>
</>
)}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={() =>
handleEdit(leaveRequest)
}
>
<Pencil className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent side="top">
Edit
</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
onClick={() =>
handleDeleteClick(leaveRequest)
}
>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</TooltipTrigger>
<TooltipContent side="top">
Hapus
</TooltipContent>
</Tooltip>
</div>
</TooltipProvider>
);
},
},
];
}

View File

@ -0,0 +1,309 @@
import { ConfirmDialog } from '@/components/confirm-dialog';
import { DataTable } from '@/components/data-table';
import { DatePicker } from '@/components/date-picker';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { approve, destroy, index as leaveRequestIndex, reject, store, update } from '@/routes/admin/sdm/leave-requests';
import { Form, Head, router } from '@inertiajs/react';
import { Plus } from 'lucide-react';
import { useEffect, useState } from 'react';
import type { LeaveRequest } from './columns';
import { createLeaveRequestColumns } from './columns';
type Props = {
leaveRequests: LeaveRequest[];
};
export default function LeaveRequestIndex({ leaveRequests }: Props) {
const [createOpen, setCreateOpen] = useState(false);
const [editing, setEditing] = useState<LeaveRequest | null>(null);
const [deleting, setDeleting] = useState<LeaveRequest | null>(null);
const [approving, setApproving] = useState<LeaveRequest | null>(null);
const [rejecting, setRejecting] = useState<LeaveRequest | null>(null);
const [startDate, setStartDate] = useState<Date | undefined>(undefined);
const [endDate, setEndDate] = useState<Date | undefined>(undefined);
const [editingStartDate, setEditingStartDate] = useState<Date | undefined>(undefined);
const [editingEndDate, setEditingEndDate] = useState<Date | undefined>(undefined);
useEffect(() => {
if (editing) {
setEditingStartDate(new Date(editing.start_date));
setEditingEndDate(new Date(editing.end_date));
} else {
setEditingStartDate(undefined);
setEditingEndDate(undefined);
}
}, [editing]);
function handleDelete() {
if (!deleting) {
return;
}
router.delete(destroy(deleting.id), {
onSuccess: () => setDeleting(null),
});
}
function handleApprove() {
if (!approving) {
return;
}
router.post(approve(approving.id), {}, {
onSuccess: () => setApproving(null),
});
}
function handleReject() {
if (!rejecting) {
return;
}
router.post(reject(rejecting.id), {}, {
onSuccess: () => setRejecting(null),
});
}
const columns = createLeaveRequestColumns({
handleEdit: (leaveRequest) => setEditing(leaveRequest),
handleDeleteClick: (leaveRequest) => setDeleting(leaveRequest),
handleApprove: (leaveRequest) => setApproving(leaveRequest),
handleReject: (leaveRequest) => setRejecting(leaveRequest),
});
return (
<>
<Head title="Cuti" />
<div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
<div className="flex items-center justify-between">
<div>
<h2 className="text-2xl font-semibold tracking-tight">
Cuti
</h2>
</div>
<Dialog open={createOpen} onOpenChange={(open) => {
setCreateOpen(open);
if (!open) {
setStartDate(undefined);
setEndDate(undefined);
}
}}>
<Button asChild>
<button
type="button"
onClick={() => setCreateOpen(true)}
>
<Plus className="h-4 w-4" />
Tambah
</button>
</Button>
<DialogContent>
<Form action={store()} resetOnSuccess onSuccess={() => setCreateOpen(false)}>
{({ errors, processing }) => {
return (
<>
<DialogHeader>
<DialogTitle>Tambah Permohonan Cuti</DialogTitle>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label>
Tanggal Mulai{' '} <span className="text-destructive">*</span>
</Label>
<input type="hidden" name="start_date" value={startDate ? startDate.toISOString().split('T')[0] : ''} />
<DatePicker
value={startDate}
onChange={setStartDate}
placeholder="Pilih tanggal mulai"
min={new Date()}
/>
<InputError message={errors.start_date} />
</div>
<div className="grid gap-2">
<Label>
Tanggal Selesai{' '} <span className="text-destructive">*</span>
</Label>
<input type="hidden" name="end_date" value={endDate ? endDate.toISOString().split('T')[0] : ''} />
<DatePicker
value={endDate}
onChange={setEndDate}
placeholder="Pilih tanggal selesai"
min={startDate}
/>
<InputError message={errors.end_date} />
</div>
</div>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => setCreateOpen(false)}
>
Batal
</Button>
<Button
type='submit'
disabled={processing}
>
{processing
? 'Menyimpan...'
: 'Simpan'}
</Button>
</DialogFooter>
</>
);
}}
</Form>
</DialogContent>
</Dialog>
</div>
<DataTable
columns={columns}
data={leaveRequests}
searchKey="employee.user.user_profile.full_name"
searchPlaceholder="Cari nama karyawan..."
emptyText="Belum ada data permohonan cuti."
/>
<Dialog
open={editing !== null}
onOpenChange={(open) => {
if (!open) {
setEditing(null);
setEditingStartDate(undefined);
setEditingEndDate(undefined);
}
}}
>
<DialogContent>
{editing && (
<Form action={update(editing.id)} resetOnSuccess onSuccess={() => {
setEditing(null);
setEditingStartDate(undefined);
setEditingEndDate(undefined);
}}>
{({ errors, processing }) => {
return (
<>
<DialogHeader>
<DialogTitle>Edit Permohonan Cuti</DialogTitle>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label>Tanggal Mulai{' '} <span className="text-destructive">*</span></Label>
<input type="hidden" name="start_date" value={editingStartDate ? editingStartDate.toISOString().split('T')[0] : ''} />
<DatePicker
value={editingStartDate}
onChange={setEditingStartDate}
placeholder="Pilih tanggal mulai"
min={new Date()}
/>
<InputError message={errors.start_date} />
</div>
<div className="grid gap-2">
<Label>Tanggal Selesai{' '} <span className="text-destructive">*</span></Label>
<input type="hidden" name="end_date" value={editingEndDate ? editingEndDate.toISOString().split('T')[0] : ''} />
<DatePicker
value={editingEndDate}
onChange={setEditingEndDate}
placeholder="Pilih tanggal selesai"
min={editingStartDate}
/>
<InputError message={errors.end_date} />
</div>
</div>
<DialogFooter>
<Button
type="button"
variant="outline"
onClick={() => {
setEditing(null);
}}
>
Batal
</Button>
<Button
type="submit"
disabled={processing}
>
{processing
? 'Menyimpan...'
: 'Simpan'}
</Button>
</DialogFooter>
</>
);
}}
</Form>
)}
</DialogContent>
</Dialog>
<ConfirmDialog
open={deleting !== null}
onOpenChange={(open) => {
if (!open) {
setDeleting(null);
}
}}
title="Hapus Permohonan Cuti"
description={`Apakah Anda yakin ingin menghapus permohonan cuti ini? Tindakan ini tidak dapat dibatalkan.`}
confirmLabel="Hapus"
onConfirm={handleDelete}
/>
<ConfirmDialog
open={approving !== null}
onOpenChange={(open) => {
if (!open) {
setApproving(null);
}
}}
title="Setujui Permohonan Cuti"
description={`Apakah Anda yakin ingin menyetujui permohonan cuti ini?`}
confirmLabel="Setujui"
onConfirm={handleApprove}
/>
<ConfirmDialog
open={rejecting !== null}
onOpenChange={(open) => {
if (!open) {
setRejecting(null);
}
}}
title="Tolak Permohonan Cuti"
description={`Apakah Anda yakin ingin menolak permohonan cuti ini?`}
confirmLabel="Tolak"
onConfirm={handleReject}
/>
</div>
</>
);
}
LeaveRequestIndex.layout = {
breadcrumbs: [
{
title: 'SDM',
href: leaveRequestIndex(),
},
{
title: 'Cuti',
href: leaveRequestIndex(),
},
],
};

View File

@ -6,6 +6,7 @@
use App\Http\Controllers\Admin\Master\CategoryController;
use App\Http\Controllers\Admin\Master\CustomerController;
use App\Http\Controllers\Admin\Master\SupplierController;
use App\Http\Controllers\Admin\SDM\LeaveRequestController;
use Illuminate\Support\Facades\Route;
Route::inertia('/', 'welcome')->name('home');
@ -32,6 +33,12 @@
Route::post('employee-advances/{employeeAdvance}/approve', [EmployeeAdvanceController::class, 'approve'])->name('employee-advances.approve');
Route::post('employee-advances/{employeeAdvance}/pay', [EmployeeAdvanceController::class, 'pay'])->name('employee-advances.pay');
});
Route::prefix('admin/sdm')->name('admin.sdm.')->group(function () {
Route::resource('leave-requests', LeaveRequestController::class)->except(['show', 'create', 'edit']);
Route::post('leave-requests/{leaveRequest}/approve', [LeaveRequestController::class, 'approve'])->name('leave-requests.approve');
Route::post('leave-requests/{leaveRequest}/reject', [LeaveRequestController::class, 'reject'])->name('leave-requests.reject');
});
});
require __DIR__.'/settings.php';