102 lines
5.1 KiB
TypeScript
102 lines
5.1 KiB
TypeScript
import { Head, usePage } from '@inertiajs/react';
|
|
import React from 'react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
|
import AppLayout from '@/layouts/app-layout';
|
|
|
|
interface Attendance {
|
|
id: number;
|
|
employee_name: string;
|
|
employee_nik: string;
|
|
date: string;
|
|
check_in: string | null;
|
|
check_out: string | null;
|
|
status: 'present' | 'leave' | 'dispensation';
|
|
notes: string | null;
|
|
total_hours: string | null;
|
|
}
|
|
|
|
interface PageProps {
|
|
attendances: Attendance[];
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
export default function Index({ attendances }: PageProps) {
|
|
const formatStatus = (status: string) => {
|
|
switch (status) {
|
|
case 'present': return <span className="text-green-600 font-medium">Hadir</span>;
|
|
case 'leave': return <span className="text-yellow-600 font-medium">Izin/Cuti</span>;
|
|
case 'dispensation': return <span className="text-blue-600 font-medium">Dispensasi</span>;
|
|
default: return <span>{status}</span>;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Head title="Rekap Absensi" />
|
|
|
|
<div className="p-4 md:p-8 w-full space-y-4">
|
|
<div className="space-y-1">
|
|
<h2 className="text-2xl font-bold tracking-tight">Rekap Absensi Karyawan</h2>
|
|
<p className="text-muted-foreground">Monitoring kehadiran, izin, dan dispensasi karyawan.</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader className="pb-4">
|
|
<CardTitle>Daftar Absensi</CardTitle>
|
|
</CardHeader>
|
|
<Separator />
|
|
<CardContent className="pt-0">
|
|
<div className="relative w-full overflow-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Nama</TableHead>
|
|
<TableHead>NIK</TableHead>
|
|
<TableHead>Tanggal</TableHead>
|
|
<TableHead>Jam Masuk</TableHead>
|
|
<TableHead>Jam Keluar</TableHead>
|
|
<TableHead>Keterangan</TableHead>
|
|
<TableHead className="text-right">Total Jam Kerja</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{attendances.length > 0 ? (
|
|
attendances.map((attendance) => (
|
|
<TableRow key={attendance.id}>
|
|
<TableCell className="font-medium text-gray-900">{attendance.employee_name}</TableCell>
|
|
<TableCell className="text-gray-600">{attendance.employee_nik}</TableCell>
|
|
<TableCell className="text-gray-600">{attendance.date}</TableCell>
|
|
<TableCell>{attendance.check_in || '-'}</TableCell>
|
|
<TableCell>{attendance.check_out || '-'}</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-col">
|
|
{formatStatus(attendance.status)}
|
|
{attendance.notes && (
|
|
<span className="text-xs text-gray-500 mt-1">{attendance.notes}</span>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-right font-medium">
|
|
{attendance.total_hours ? `${attendance.total_hours} Jam` : '-'}
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={7} className="h-24 text-center text-muted-foreground">
|
|
Belum ada data absensi.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|