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, ArrowUpDown, ArrowUp, ArrowDown } 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; sort_by?: string; sort_order?: 'asc' | 'desc'; }; } 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'), { ...filters, per_page: value }, { preserveState: false, replace: true, preserveScroll: true } ); }; const handleSort = (field: string) => { let newSortBy: string | undefined = field; let newSortOrder: 'asc' | 'desc' | undefined = 'asc'; if (filters.sort_by === field) { if (filters.sort_order === 'asc') { newSortOrder = 'desc'; } else { newSortBy = undefined; newSortOrder = undefined; } } router.get( route('activity-logs.index'), { ...filters, sort_by: newSortBy, sort_order: newSortOrder }, { preserveState: true, replace: true } ); }; const SortIcon = ({ field }: { field: string }) => { if (filters.sort_by !== field) { return ; } if (filters.sort_order === "asc") { return ; } return ; }; return (

操作紀錄

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

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

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

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

每頁顯示筆

); }