dress/resources/js/pages/admin/system/logs/partials/log-detail-modal.tsx

39 lines
1.3 KiB
TypeScript

import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { SystemLog } from "@/types"
import { getLevelColor } from "@/lib/log-helpers"
interface Props {
log: SystemLog | null;
onClose: () => void;
}
export function LogDetailModal({ log, onClose }: Props) {
if (!log) return null;
return (
<Dialog open={!!log} onOpenChange={onClose}>
<DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col">
<DialogHeader>
<div className="flex items-center gap-3">
<DialogTitle>Detail Log</DialogTitle>
<Badge variant={getLevelColor(log.level)}>{log.level}</Badge>
<span className="text-sm text-muted-foreground">{log.timestamp}</span>
</div>
</DialogHeader>
<div className="flex-1 overflow-y-auto mt-4 rounded-lg bg-muted/50 p-4 border">
<pre className="font-mono text-xs whitespace-pre-wrap break-all">
{log.message}
</pre>
</div>
</DialogContent>
</Dialog>
);
}