initial version of the app

2025-09-21 17:11:02 +01:00
commit c8062cf96b
101 changed files with 23061 additions and 0 deletions
@@ -0,0 +1,175 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { RefreshCw, User, Clock, Globe } from 'lucide-react';
+import { format } from 'date-fns';
+
+interface ActivityLog {
+	id: string;
+	action: string;
+	entityType: string;
+	entityId?: string;
+	details?: string;
+	ipAddress?: string;
+	userAgent?: string;
+	createdAt: Date;
+	user?: {
+		id: string;
+		name: string;
+		surname: string;
+		email: string;
+	} | null;
+}
+
+export function AdminLogs() {
+	const [logs, setLogs] = useState<ActivityLog[]>([]);
+	const [loading, setLoading] = useState(true);
+
+	useEffect(() => {
+		fetchLogs();
+	}, []);
+
+	const fetchLogs = async () => {
+		try {
+			setLoading(true);
+			const response = await fetch('/api/admin/logs?limit=50');
+			if (response.ok) {
+				const data = await response.json();
+				setLogs(data.logs || []);
+			} else {
+				console.error('Failed to fetch logs');
+			}
+		} catch (error) {
+			console.error('Error fetching logs:', error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const getActionBadgeColor = (action: string) => {
+		switch (action.toLowerCase()) {
+			case 'create':
+			case 'created':
+				return 'bg-green-100 text-green-800';
+			case 'update':
+			case 'updated':
+				return 'bg-blue-100 text-blue-800';
+			case 'delete':
+			case 'deleted':
+				return 'bg-red-100 text-red-800';
+			case 'login':
+				return 'bg-purple-100 text-purple-800';
+			case 'logout':
+				return 'bg-gray-100 text-gray-800';
+			default:
+				return 'bg-gray-100 text-gray-800';
+		}
+	};
+
+	const formatUserAgent = (userAgent?: string) => {
+		if (!userAgent) return 'Unknown';
+		if (userAgent.includes('Chrome')) return 'Chrome';
+		if (userAgent.includes('Firefox')) return 'Firefox';
+		if (userAgent.includes('Safari')) return 'Safari';
+		if (userAgent.includes('Edge')) return 'Edge';
+		return 'Unknown Browser';
+	};
+
+	if (loading) {
+		return (
+			<Card>
+				<CardHeader className='flex flex-row items-center justify-between'>
+					<CardTitle>Activity Logs</CardTitle>
+					<Button size='sm' disabled>
+						<RefreshCw className='h-4 w-4 animate-spin mr-2' />
+						Loading...
+					</Button>
+				</CardHeader>
+				<CardContent>
+					<div className='space-y-4'>
+						{[1, 2, 3, 4, 5].map((i) => (
+							<div key={i} className='animate-pulse border rounded-lg p-4'>
+								<div className='h-4 bg-gray-200 rounded w-3/4 mb-2'></div>
+								<div className='h-3 bg-gray-200 rounded w-1/2'></div>
+							</div>
+						))}
+					</div>
+				</CardContent>
+			</Card>
+		);
+	}
+
+	return (
+		<Card>
+			<CardHeader className='flex flex-row items-center justify-between'>
+				<CardTitle>Activity Logs</CardTitle>
+				<Button size='sm' onClick={fetchLogs}>
+					<RefreshCw className='h-4 w-4 mr-2' />
+					Refresh
+				</Button>
+			</CardHeader>
+			<CardContent>
+				{logs.length === 0 ? (
+					<div className='text-center py-8 text-gray-500'>No activity logs found.</div>
+				) : (
+					<div className='space-y-4 max-h-96 overflow-y-auto'>
+						{logs.map((log) => (
+							<div key={log.id} className='border rounded-lg p-4 space-y-3'>
+								<div className='flex items-center justify-between'>
+									<div className='flex items-center gap-3'>
+										<Badge className={getActionBadgeColor(log.action)}>{log.action}</Badge>
+										<span className='text-sm font-medium'>
+											{log.entityType}
+											{log.entityId && (
+												<span className='text-gray-500 ml-1'>
+													({log.entityId.substring(0, 8)}...)
+												</span>
+											)}
+										</span>
+									</div>
+									<div className='flex items-center gap-1 text-xs text-gray-500'>
+										<Clock className='h-3 w-3' />
+										{format(new Date(log.createdAt), 'MMM dd, HH:mm')}
+									</div>
+								</div>
+
+								<div className='flex items-center justify-between text-sm'>
+									<div className='flex items-center gap-2'>
+										<User className='h-4 w-4 text-gray-400' />
+										{log.user ? (
+											<span>
+												{log.user.name} {log.user.surname} ({log.user.email})
+											</span>
+										) : (
+											<span className='text-gray-500'>System/Anonymous</span>
+										)}
+									</div>
+
+									{log.ipAddress && (
+										<div className='flex items-center gap-2 text-xs text-gray-500'>
+											<Globe className='h-3 w-3' />
+											<span>{log.ipAddress}</span>
+											<span>•</span>
+											<span>{formatUserAgent(log.userAgent)}</span>
+										</div>
+									)}
+								</div>
+
+								{log.details && (
+									<div className='text-xs text-gray-600 bg-gray-50 rounded p-2'>
+										<pre className='whitespace-pre-wrap break-words'>
+											{JSON.stringify(JSON.parse(log.details), null, 2)}
+										</pre>
+									</div>
+								)}
+							</div>
+						))}
+					</div>
+				)}
+			</CardContent>
+		</Card>
+	);
+}