133 lines
6.0 KiB
TypeScript
133 lines
6.0 KiB
TypeScript
import { Head, Link } from '@inertiajs/react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import AppLayout from '@/layouts/app-layout';
|
|
import { PlusCircle, FileText } from 'lucide-react';
|
|
|
|
interface Payroll {
|
|
id: number;
|
|
employee_name: string;
|
|
employee_nip: string;
|
|
period: string;
|
|
net_salary: number;
|
|
status: 'pending' | 'paid';
|
|
}
|
|
|
|
interface PageProps {
|
|
payrolls: Payroll[];
|
|
}
|
|
|
|
function formatRupiah(value: number): string {
|
|
return new Intl.NumberFormat('id-ID', {
|
|
style: 'currency',
|
|
currency: 'IDR',
|
|
minimumFractionDigits: 0,
|
|
}).format(value);
|
|
}
|
|
|
|
function formatPeriod(period: string): string {
|
|
const [year, month] = period.split('-');
|
|
return new Date(Number(year), Number(month) - 1, 1)
|
|
.toLocaleDateString('id-ID', { month: 'long', year: 'numeric' });
|
|
}
|
|
|
|
function StatusBadge({ status }: { status: 'pending' | 'paid' }) {
|
|
return status === 'paid' ? (
|
|
<Badge className="bg-emerald-100 text-emerald-700 hover:bg-emerald-100">Paid</Badge>
|
|
) : (
|
|
<Badge className="bg-amber-100 text-amber-700 hover:bg-amber-100">Pending</Badge>
|
|
);
|
|
}
|
|
|
|
export default function Index({ payrolls }: PageProps) {
|
|
return (
|
|
<AppLayout>
|
|
<Head title="Daftar Payroll" />
|
|
|
|
<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">Manajemen Payroll</h2>
|
|
<p className="text-muted-foreground">Daftar seluruh payroll yang telah di-generate.</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between pb-4">
|
|
<CardTitle>Daftar Slip Gaji</CardTitle>
|
|
<Button asChild>
|
|
<Link href="/admin/payrolls/create" className="gap-2">
|
|
<PlusCircle className="h-4 w-4" />
|
|
Generate Payroll
|
|
</Link>
|
|
</Button>
|
|
</CardHeader>
|
|
|
|
<CardContent className="p-0">
|
|
{payrolls.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-16 text-center">
|
|
<FileText className="mb-3 h-10 w-10 text-muted-foreground/50" />
|
|
<p className="text-sm font-medium text-muted-foreground">
|
|
Belum ada data payroll.
|
|
</p>
|
|
<Button asChild variant="outline" className="mt-4">
|
|
<Link href="/admin/payrolls/create">Generate Pertama</Link>
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-12">#</TableHead>
|
|
<TableHead>Karyawan</TableHead>
|
|
<TableHead>Periode</TableHead>
|
|
<TableHead className="text-right">Gaji Bersih</TableHead>
|
|
<TableHead className="text-center">Status</TableHead>
|
|
<TableHead className="text-right">Aksi</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{payrolls.map((payroll, index) => (
|
|
<TableRow key={payroll.id}>
|
|
<TableCell className="text-muted-foreground">
|
|
{index + 1}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="font-medium">{payroll.employee_name}</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
NIP: {payroll.employee_nip}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>{formatPeriod(payroll.period)}</TableCell>
|
|
<TableCell className="text-right font-medium">
|
|
{formatRupiah(payroll.net_salary)}
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<StatusBadge status={payroll.status} />
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button asChild variant="ghost" size="sm">
|
|
<Link href={`/admin/payrolls/${payroll.id}`}>
|
|
Lihat Slip
|
|
</Link>
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|