salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

billing accoutn with all the mess here

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-05 03:59:54 +00:00
parent 6b291671bd
commit 6cf786b03f
41 changed files with 7257 additions and 685 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
frontend/src/pages/admin/AdminActivityLogsPage.tsx Normal file
View File

@@ -0,0 +1,164 @@
/**
* Admin Activity Logs Page
* View system activity and audit trail
*/
import { useState, useEffect } from 'react';
import { Search, Filter, Loader2, AlertCircle, Activity } from 'lucide-react';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
interface ActivityLog {
id: number;
user_email: string;
account_name: string;
action: string;
resource_type: string;
resource_id: string | null;
ip_address: string;
timestamp: string;
details: string;
}
export default function AdminActivityLogsPage() {
const [logs, setLogs] = useState<ActivityLog[]>([]);
const [loading, setLoading] = useState(true);
const [searchTerm, setSearchTerm] = useState('');
const [actionFilter, setActionFilter] = useState('all');
useEffect(() => {
// Mock data - replace with API call
setLogs([
{
id: 1,
user_email: 'john@example.com',
account_name: 'Acme Corp',
action: 'create',
resource_type: 'Site',
resource_id: '123',
ip_address: '192.168.1.1',
timestamp: new Date().toISOString(),
details: 'Created new site "Main Website"',
},
{
id: 2,
user_email: 'jane@example.com',
account_name: 'TechStart',
action: 'update',
resource_type: 'Account',
resource_id: '456',
ip_address: '192.168.1.2',
timestamp: new Date(Date.now() - 3600000).toISOString(),
details: 'Updated account billing address',
},
]);
setLoading(false);
}, []);
const filteredLogs = logs.filter((log) => {
const matchesSearch = log.user_email.toLowerCase().includes(searchTerm.toLowerCase()) ||
log.account_name.toLowerCase().includes(searchTerm.toLowerCase());
const matchesAction = actionFilter === 'all' || log.action === actionFilter;
return matchesSearch && matchesAction;
});
if (loading) {
return (
<div className="flex items-center justify-center min-h-screen">
<Loader2 className="w-8 h-8 animate-spin text-blue-600" />
</div>
);
}
return (
<div className="p-6">
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
<Activity className="w-6 h-6" />
Activity Logs
</h1>
<p className="text-gray-600 dark:text-gray-400 mt-1">
System activity and audit trail
</p>
</div>
<div className="mb-6 flex flex-col md:flex-row gap-4">
<div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
type="text"
placeholder="Search logs..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
/>
</div>
<div className="flex items-center gap-2">
<Filter className="w-5 h-5 text-gray-400" />
<select
value={actionFilter}
onChange={(e) => setActionFilter(e.target.value)}
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-800"
>
<option value="all">All Actions</option>
<option value="create">Create</option>
<option value="update">Update</option>
<option value="delete">Delete</option>
<option value="login">Login</option>
<option value="logout">Logout</option>
</select>
</div>
</div>
<Card className="overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full">
<thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Timestamp</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">User</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Account</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Resource</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Details</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">IP Address</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-gray-700">
{filteredLogs.length === 0 ? (
<tr>
<td colSpan={7} className="px-6 py-8 text-center text-gray-500">No activity logs found</td>
</tr>
) : (
filteredLogs.map((log) => (
<tr key={log.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
{new Date(log.timestamp).toLocaleString()}
</td>
<td className="px-6 py-4 text-sm font-medium">{log.user_email}</td>
<td className="px-6 py-4 text-sm text-gray-600">{log.account_name}</td>
<td className="px-6 py-4">
<Badge
variant="light"
color={
log.action === 'create' ? 'success' :
log.action === 'update' ? 'primary' :
log.action === 'delete' ? 'error' : 'default'
}
>
{log.action}
</Badge>
</td>
<td className="px-6 py-4 text-sm">{log.resource_type}</td>
<td className="px-6 py-4 text-sm text-gray-600">{log.details}</td>
<td className="px-6 py-4 text-sm text-gray-500">{log.ip_address}</td>
</tr>
))
)}
</tbody>
</table>
</div>
</Card>
</div>
);
}