import { useState } from 'react'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, router } from '@inertiajs/react'; import { PageProps } from '@/types/global'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/Components/ui/table"; import { Badge } from "@/Components/ui/badge"; import Pagination from '@/Components/shared/Pagination'; import { SearchableSelect } from "@/Components/ui/searchable-select"; import { FileText, Eye } from 'lucide-react'; import { format } from 'date-fns'; import { Button } from '@/Components/ui/button'; import ActivityDetailDialog from './ActivityDetailDialog'; interface Activity { id: number; description: string; subject_type: string; event: string; causer: string; created_at: string; properties: any; } interface PaginationLinks { url: string | null; label: string; active: boolean; } interface Props extends PageProps { activities: { data: Activity[]; links: PaginationLinks[]; current_page: number; last_page: number; total: number; from: number; }; filters: { per_page?: string; }; } export default function ActivityLogIndex({ activities, filters }: Props) { const [perPage, setPerPage] = useState(filters.per_page || "10"); const [selectedActivity, setSelectedActivity] = useState(null); const [detailOpen, setDetailOpen] = useState(false); const getEventBadgeColor = (event: string) => { switch (event) { case 'created': return 'bg-green-500 hover:bg-green-600'; case 'updated': return 'bg-blue-500 hover:bg-blue-600'; case 'deleted': return 'bg-red-500 hover:bg-red-600'; default: return 'bg-gray-500 hover:bg-gray-600'; } }; const getEventLabel = (event: string) => { switch (event) { case 'created': return '新增'; case 'updated': return '更新'; case 'deleted': return '刪除'; default: return event; } }; const handleViewDetail = (activity: Activity) => { setSelectedActivity(activity); setDetailOpen(true); }; const handlePerPageChange = (value: string) => { setPerPage(value); router.get( route('activity-logs.index'), { per_page: value }, { preserveState: false, replace: true, preserveScroll: true } ); }; return (

操作紀錄

檢視系統內的所有操作活動，包含新增、修改與刪除紀錄

時間操作人員動作對象描述操作 {activities.data.length > 0 ? ( activities.data.map((activity) => ( {activity.created_at} {activity.causer} {getEventLabel(activity.event)} {activity.subject_type}

{activity.causer} 執行了 {activity.description} 動作

)) ) : ( 尚無操作紀錄 )}

每頁顯示筆

); }