feat: 實作操作紀錄與商品分類單位異動紀錄 (Operation Logs for System, Products, Categories, Units)
This commit is contained in:
142
resources/js/Pages/Admin/ActivityLog/ActivityDetailDialog.tsx
Normal file
142
resources/js/Pages/Admin/ActivityLog/ActivityDetailDialog.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/Components/ui/dialog";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { ScrollArea } from "@/Components/ui/scroll-area";
|
||||
|
||||
interface Activity {
|
||||
id: number;
|
||||
description: string;
|
||||
subject_type: string;
|
||||
event: string;
|
||||
causer: string;
|
||||
created_at: string;
|
||||
properties: {
|
||||
attributes?: Record<string, any>;
|
||||
old?: Record<string, any>;
|
||||
};
|
||||
}
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
activity: Activity | null;
|
||||
}
|
||||
|
||||
export default function ActivityDetailDialog({ open, onOpenChange, activity }: Props) {
|
||||
if (!activity) return null;
|
||||
|
||||
const attributes = activity.properties?.attributes || {};
|
||||
const old = activity.properties?.old || {};
|
||||
|
||||
// Get all keys from both attributes and old to ensure we show all changes
|
||||
const allKeys = Array.from(new Set([...Object.keys(attributes), ...Object.keys(old)]));
|
||||
|
||||
// Filter out internal keys often logged but not useful for users
|
||||
const filteredKeys = allKeys.filter(key =>
|
||||
!['created_at', 'updated_at', 'deleted_at', 'id'].includes(key)
|
||||
);
|
||||
|
||||
const getEventBadgeColor = (event: string) => {
|
||||
switch (event) {
|
||||
case 'created': return 'bg-green-500';
|
||||
case 'updated': return 'bg-blue-500';
|
||||
case 'deleted': return 'bg-red-500';
|
||||
default: return 'bg-gray-500';
|
||||
}
|
||||
};
|
||||
|
||||
const getEventLabel = (event: string) => {
|
||||
switch (event) {
|
||||
case 'created': return '新增';
|
||||
case 'updated': return '更新';
|
||||
case 'deleted': return '刪除';
|
||||
default: return event;
|
||||
}
|
||||
};
|
||||
|
||||
const formatValue = (value: any) => {
|
||||
if (value === null || value === undefined) return <span className="text-gray-400">-</span>;
|
||||
if (typeof value === 'boolean') return value ? '是' : '否';
|
||||
if (typeof value === 'object') return JSON.stringify(value);
|
||||
return String(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
操作詳情
|
||||
<Badge className={getEventBadgeColor(activity.event)}>
|
||||
{getEventLabel(activity.event)}
|
||||
</Badge>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{activity.created_at} 由 {activity.causer} 執行的操作
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-500">操作對象：</span>
|
||||
<span className="font-medium ml-2">{activity.subject_type}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">描述：</span>
|
||||
<span className="font-medium ml-2">{activity.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activity.event === 'created' ? (
|
||||
<div className="bg-gray-50 p-4 rounded-md text-center text-gray-500 text-sm">
|
||||
已新增資料 (初始建立)
|
||||
</div>
|
||||
) : (
|
||||
<div className="border rounded-md">
|
||||
<div className="grid grid-cols-3 bg-gray-50 p-2 text-sm font-medium text-gray-500">
|
||||
<div>欄位</div>
|
||||
<div>異動前</div>
|
||||
<div>異動後</div>
|
||||
</div>
|
||||
<ScrollArea className="h-[300px]">
|
||||
{filteredKeys.length > 0 ? (
|
||||
<div className="divide-y">
|
||||
{filteredKeys.map((key) => {
|
||||
const oldValue = old[key];
|
||||
const newValue = attributes[key];
|
||||
// Ensure we catch changes even if one value is missing/null
|
||||
// For deleted events, newValue might be empty, so we just show oldValue
|
||||
const isChanged = JSON.stringify(oldValue) !== JSON.stringify(newValue);
|
||||
|
||||
return (
|
||||
<div key={key} className={`grid grid-cols-3 p-2 text-sm ${isChanged ? 'bg-yellow-50/30' : ''}`}>
|
||||
<div className="font-medium text-gray-700">{key}</div>
|
||||
<div className="text-gray-600 break-words pr-2">
|
||||
{formatValue(oldValue)}
|
||||
</div>
|
||||
<div className="text-gray-900 break-words font-medium">
|
||||
{activity.event === 'deleted' ? '-' : formatValue(newValue)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-8 text-center text-gray-500 text-sm">
|
||||
無詳細異動內容
|
||||
</div>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
203
resources/js/Pages/Admin/ActivityLog/Index.tsx
Normal file
203
resources/js/Pages/Admin/ActivityLog/Index.tsx
Normal file
@@ -0,0 +1,203 @@
|
||||
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<string>(filters.per_page || "10");
|
||||
const [selectedActivity, setSelectedActivity] = useState<Activity | null>(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 (
|
||||
<AuthenticatedLayout
|
||||
breadcrumbs={[
|
||||
{ label: '系統管理', href: '#' },
|
||||
{ label: '操作紀錄', href: route('activity-logs.index'), isPage: true },
|
||||
]}
|
||||
>
|
||||
<Head title="操作紀錄" />
|
||||
|
||||
<div className="container mx-auto p-6 max-w-7xl">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
|
||||
<FileText className="h-6 w-6 text-primary-main" />
|
||||
操作紀錄
|
||||
</h1>
|
||||
<p className="text-gray-500 mt-1">
|
||||
檢視系統內的所有操作活動，包含新增、修改與刪除紀錄
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader className="bg-gray-50">
|
||||
<TableRow>
|
||||
<TableHead className="w-[180px]">時間</TableHead>
|
||||
<TableHead className="w-[150px]">操作人員</TableHead>
|
||||
<TableHead className="w-[100px] text-center">動作</TableHead>
|
||||
<TableHead className="w-[150px]">對象</TableHead>
|
||||
<TableHead>描述</TableHead>
|
||||
<TableHead className="w-[100px] text-center">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{activities.data.length > 0 ? (
|
||||
activities.data.map((activity) => (
|
||||
<TableRow key={activity.id}>
|
||||
<TableCell className="text-gray-500 font-medium whitespace-nowrap">
|
||||
{activity.created_at}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-medium text-gray-900">{activity.causer}</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Badge className={getEventBadgeColor(activity.event)}>
|
||||
{getEventLabel(activity.event)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="bg-slate-50">
|
||||
{activity.subject_type}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-gray-600" title={activity.description}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{activity.causer}</span>
|
||||
<span className="text-gray-400">執行了</span>
|
||||
<span className="font-medium text-gray-700">{activity.description}</span>
|
||||
<span className="text-gray-400">動作</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleViewDetail(activity)}
|
||||
className="button-outlined-info"
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-center py-8 text-gray-500">
|
||||
尚無操作紀錄
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-500">
|
||||
<span>每頁顯示</span>
|
||||
<SearchableSelect
|
||||
value={perPage}
|
||||
onValueChange={handlePerPageChange}
|
||||
options={[
|
||||
{ label: "10", value: "10" },
|
||||
{ label: "20", value: "20" },
|
||||
{ label: "50", value: "50" },
|
||||
{ label: "100", value: "100" }
|
||||
]}
|
||||
className="w-[80px] h-8"
|
||||
showSearch={false}
|
||||
/>
|
||||
<span>筆</span>
|
||||
</div>
|
||||
<Pagination links={activities.links} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ActivityDetailDialog
|
||||
open={detailOpen}
|
||||
onOpenChange={setDetailOpen}
|
||||
activity={selectedActivity}
|
||||
/>
|
||||
</AuthenticatedLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user