152 lines
8.4 KiB
TypeScript
152 lines
8.4 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import { Head, Link, usePage } from '@inertiajs/react';
|
|
import React from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip"; // Import Tooltip
|
|
import AppLayout from '@/layouts/app-layout';
|
|
|
|
interface Department {
|
|
id: number;
|
|
name: string;
|
|
description: string;
|
|
employees_count: number;
|
|
}
|
|
|
|
interface PageProps {
|
|
departments: Department[];
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
interface SharedData {
|
|
flash: {
|
|
success?: string;
|
|
error?: string;
|
|
};
|
|
}
|
|
|
|
export default function Index({ departments }: PageProps) {
|
|
const { flash } = usePage<any>().props as SharedData;
|
|
|
|
return (
|
|
<AppLayout>
|
|
<Head title="Manajemen Departemen" />
|
|
|
|
<div className="p-4 md:p-8 w-full space-y-4">
|
|
|
|
{/* Page Header */}
|
|
<div className="space-y-1">
|
|
<h2 className="text-2xl font-bold tracking-tight">Data Departemen</h2>
|
|
<p className="text-muted-foreground">Kelola struktur organisasi dan unit kerja.</p>
|
|
</div>
|
|
|
|
{/* Flash Messages */}
|
|
{flash?.success && (
|
|
<div className="p-4 bg-green-50 text-green-700 border border-green-200 rounded-md text-sm">
|
|
{flash.success}
|
|
</div>
|
|
)}
|
|
{flash?.error && (
|
|
<div className="p-4 bg-red-50 text-red-700 border border-red-200 rounded-md text-sm">
|
|
{flash.error}
|
|
</div>
|
|
)}
|
|
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between pb-4">
|
|
<CardTitle>Daftar Departemen</CardTitle>
|
|
<Button asChild>
|
|
<Link href="/admin/departments/create">+ Tambah Departemen</Link>
|
|
</Button>
|
|
</CardHeader>
|
|
<Separator />
|
|
<CardContent className="pt-0">
|
|
<div className="relative w-full overflow-auto">
|
|
<table className="w-full text-sm text-left">
|
|
<thead className="text-muted-foreground bg-zinc-50/50">
|
|
<tr className="border-b">
|
|
<th className="h-12 px-4 font-medium">Nama Departemen</th>
|
|
<th className="h-12 px-4 font-medium">Deskripsi</th>
|
|
<th className="h-12 px-4 font-medium text-center">Total Karyawan</th>
|
|
<th className="h-12 px-4 font-medium text-right">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{departments.length > 0 ? (
|
|
departments.map((dept) => (
|
|
<tr key={dept.id} className="border-b hover:bg-zinc-50">
|
|
<td className="p-4 font-bold text-gray-900">
|
|
{dept.name}
|
|
</td>
|
|
<td className="p-4 text-muted-foreground">
|
|
{dept.description || '-'}
|
|
</td>
|
|
<td className="p-4 text-center">
|
|
<span className={`inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-xs font-medium ${dept.employees_count > 0 ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-600'}`}>
|
|
{dept.employees_count}
|
|
</span>
|
|
</td>
|
|
<td className="p-4 text-right space-x-2">
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href={`/admin/departments/${dept.id}/edit`}>Edit</Link>
|
|
</Button>
|
|
|
|
{dept.employees_count > 0 ? (
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<span tabIndex={0} className="cursor-not-allowed inline-block">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
disabled
|
|
className="text-red-300 hover:text-red-300 hover:bg-transparent opacity-50"
|
|
>
|
|
Hapus
|
|
</Button>
|
|
</span>
|
|
</TooltipTrigger>
|
|
<TooltipContent className="bg-red-50 text-red-700 border-red-200">
|
|
<p className="font-semibold">Akses Ditolak</p>
|
|
<p className="text-xs">Masih ada {dept.employees_count} karyawan aktif di sini.</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
) : (
|
|
<Link
|
|
href={`/admin/departments/${dept.id}`}
|
|
method="delete"
|
|
as="button"
|
|
onClick={(e) => {
|
|
if (!confirm('Hapus departemen ini?')) e.preventDefault();
|
|
}}
|
|
className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-3 text-red-600 hover:bg-red-50 transition-colors"
|
|
>
|
|
Hapus
|
|
</Link>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={4} className="p-8 text-center text-muted-foreground">
|
|
Belum ada data departemen.
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
} |