97 lines
4.1 KiB
TypeScript
97 lines
4.1 KiB
TypeScript
import { Head, Link, usePage } from '@inertiajs/react';
|
|
import React from 'react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import AppLayout from '@/layouts/app-layout';
|
|
|
|
interface Employee {
|
|
id: number;
|
|
nip: string;
|
|
position: string;
|
|
status: string;
|
|
user: {
|
|
name: string;
|
|
email: string;
|
|
} | null;
|
|
}
|
|
|
|
interface PageProps {
|
|
employees: {
|
|
data: Employee[];
|
|
};
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
interface SharedData {
|
|
flash: {
|
|
success?: string;
|
|
};
|
|
}
|
|
|
|
export default function Index({ employees }: PageProps) {
|
|
const { flash } = usePage().props as unknown as SharedData;
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Head title="Manajemen Karyawan" />
|
|
<div className="p-8">
|
|
{flash?.success && (
|
|
<div className="mb-4 p-4 bg-green-50 text-green-700 border rounded-md">
|
|
{flash.success}
|
|
</div>
|
|
)}
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle>Daftar Karyawan</CardTitle>
|
|
<Button asChild>
|
|
<Link href="/admin/employees/create">Tambah Karyawan</Link>
|
|
</Button>
|
|
</CardHeader>
|
|
<Separator />
|
|
<CardContent className="pt-6">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left border-b">
|
|
<th className="pb-4 font-medium">Karyawan</th>
|
|
<th className="pb-4 font-medium">NIP & Jabatan</th>
|
|
<th className="pb-4 font-medium">Status</th>
|
|
<th className="pb-4 text-right font-medium">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{employees.data.map((employee) => (
|
|
<tr key={employee.id} className="border-b">
|
|
<td className="py-4">
|
|
<div className="font-bold">{employee.user?.name}</div>
|
|
<div className="text-xs text-muted-foreground">{employee.user?.email}</div>
|
|
</td>
|
|
<td className="py-4">
|
|
<div>{employee.nip}</div>
|
|
<Badge variant="outline">{employee.position}</Badge>
|
|
</td>
|
|
<td className="py-4">
|
|
<Badge variant={employee.status === 'PKWTT' ? 'default' : 'secondary'}>
|
|
{employee.status}
|
|
</Badge>
|
|
</td>
|
|
<td className="py-4 text-right">
|
|
<Button variant="ghost" asChild>
|
|
<Link href={`/admin/employees/${employee.id}/edit`}>Edit</Link>
|
|
</Button>
|
|
<Button variant="ghost" className="text-red-600" asChild>
|
|
<Link href={`/admin/employees/${employee.id}`} method="delete" as="button">Hapus</Link>
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
} |