import { Head, Link, useForm } from "@inertiajs/react"; import { ArrowLeft, Download, Edit, Eye, Plus, Printer, Search, Trash2, } from "lucide-react"; import { useState } from "react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { useToast } from "@/hooks/use-toast"; import AppLayout from "@/layouts/app-layout"; import type { PageProps } from "@/types"; interface CompensationEvaluation { id: number; user_id: number; evaluation_type: string; evaluatable_id: number; evaluatable_type: string; status: string; notes: string | null; total_value: number | null; created_at: string; updated_at: string; deleted_at: string | null; evaluatable: any; // This will be the specific evaluation object (CropEvaluation, etc.) } interface CompensationEvaluationsIndexProps extends PageProps { evaluations: CompensationEvaluation[]; } export default function CompensationEvaluationsIndex({ auth, evaluations: initialEvaluations, }: CompensationEvaluationsIndexProps) { const { toast } = useToast(); const [searchTerm, setSearchTerm] = useState(""); const [statusFilter, setStatusFilter] = useState("all"); const [typeFilter, setTypeFilter] = useState("all"); const { delete: inertiaDelete } = useForm(); const filteredEvaluations = initialEvaluations.filter((evaluation) => { const matchesSearch = evaluation.evaluation_type .toLowerCase() .includes(searchTerm.toLowerCase()) || (evaluation.notes && evaluation.notes.toLowerCase().includes(searchTerm.toLowerCase())); const matchesStatus = statusFilter === "all" || evaluation.status.toLowerCase() === statusFilter.toLowerCase(); const matchesType = typeFilter === "all" || evaluation.evaluation_type.toLowerCase() === typeFilter.toLowerCase(); return matchesSearch && matchesStatus && matchesType; }); const handleDelete = (id: number) => { if ( confirm("Are you sure you want to delete this compensation evaluation?") ) { inertiaDelete(route("compensation-evaluations.destroy", id), { onSuccess: () => { toast({ title: "Evaluation Deleted", description: "The compensation evaluation has been removed.", }); }, onError: () => { toast({ title: "Error", description: "Failed to delete evaluation.", variant: "destructive", }); }, }); } }; const getStatusVariant = (status: string) => { switch (status) { case "approved": return "default"; case "pending": return "secondary"; case "rejected": return "destructive"; case "draft": return "outline"; default: return "secondary"; } }; return (
{/* Header */}

Compensation Evaluations

Manage all compensation evaluation records

{/* Filters */}
setSearchTerm(e.target.value)} className="pl-10" />
{/* Evaluations Table */}

Evaluations ({filteredEvaluations.length})

ID Type Status Total Value Created At Actions {filteredEvaluations.map((evaluation) => ( {evaluation.id} {evaluation.evaluation_type} {evaluation.status} ${evaluation.total_value?.toLocaleString() || "N/A"} {new Date(evaluation.created_at).toLocaleDateString()}
))}
); }