ellecio2/karibeo_backend_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor sidebar and add new modules

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-10 23:49:26 +00:00
parent d711219171
commit 2f1f19b6f5
17 changed files with 1628 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/components/security/AuditLogs.tsx Normal file
View File

@@ -0,0 +1,175 @@
import React from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { FileText, Download, Search, Filter } from 'lucide-react';
const mockLogs = [
{
id: 1,
action: 'User Login',
user: 'admin@karibeo.com',
ip: '192.168.1.100',
timestamp: '2025-10-10 15:23:45',
status: 'success',
details: 'Successful authentication via password'
},
{
id: 2,
action: 'Permission Changed',
user: 'manager@karibeo.com',
ip: '192.168.1.105',
timestamp: '2025-10-10 14:45:12',
status: 'success',
details: 'Updated role permissions for Staff group'
},
{
id: 3,
action: 'Failed Login',
user: 'unknown@example.com',
ip: '45.123.67.89',
timestamp: '2025-10-10 14:15:03',
status: 'failed',
details: 'Invalid credentials - 3rd attempt'
},
{
id: 4,
action: 'Data Export',
user: 'analyst@karibeo.com',
ip: '192.168.1.110',
timestamp: '2025-10-10 13:30:22',
status: 'success',
details: 'Exported user analytics report'
},
{
id: 5,
action: 'System Settings',
user: 'admin@karibeo.com',
ip: '192.168.1.100',
timestamp: '2025-10-10 12:18:55',
status: 'success',
details: 'Modified security policies'
},
{
id: 6,
action: 'User Deletion',
user: 'admin@karibeo.com',
ip: '192.168.1.100',
timestamp: '2025-10-10 11:45:30',
status: 'success',
details: 'Deleted inactive user account'
}
];
const AuditLogs = () => {
const getStatusColor = (status: string) => {
return status === 'success'
? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800';
};
return (
<div className="space-y-6">
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle>System Audit Logs</CardTitle>
<CardDescription>Complete history of system activities and changes</CardDescription>
</div>
<div className="flex gap-2">
<Button variant="outline" size="sm">
<Filter className="h-4 w-4 mr-2" />
Filter
</Button>
<Button variant="outline" size="sm">
<Download className="h-4 w-4 mr-2" />
Export
</Button>
</div>
</div>
</CardHeader>
<CardContent>
<div className="mb-4">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
<Input
placeholder="Search logs by user, action, or IP..."
className="pl-10"
/>
</div>
</div>
<div className="space-y-3">
{mockLogs.map((log) => (
<div key={log.id} className="border rounded-lg p-4 hover:bg-gray-50 transition-colors">
<div className="flex items-start justify-between">
<div className="flex items-start gap-3 flex-1">
<div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-1">
<FileText className="h-5 w-5 text-blue-600" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-gray-900">{log.action}</h3>
<Badge className={getStatusColor(log.status)}>
{log.status}
</Badge>
</div>
<p className="text-sm text-gray-600 mb-2">{log.details}</p>
<div className="flex items-center gap-4 text-xs text-gray-500">
<span className="font-medium">{log.user}</span>
<span>IP: {log.ip}</span>
<span>{log.timestamp}</span>
</div>
</div>
</div>
<Button variant="ghost" size="sm" className="ml-2">
Details
</Button>
</div>
</div>
))}
</div>
</CardContent>
</Card>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Events</CardTitle>
<FileText className="h-4 w-4 text-blue-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">12,489</div>
<p className="text-xs text-gray-600 mt-1">Last 30 days</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Failed Actions</CardTitle>
<FileText className="h-4 w-4 text-red-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">87</div>
<p className="text-xs text-gray-600 mt-1">Requiring attention</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Storage Used</CardTitle>
<FileText className="h-4 w-4 text-purple-600" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">2.4 GB</div>
<p className="text-xs text-gray-600 mt-1">Of 10 GB limit</p>
</CardContent>
</Card>
</div>
</div>
);
};
export default AuditLogs;