boracik/SkrzynkaImpostora
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
boratsc
2025-07-21 00:45:28 +02:00
parent ab10b0f9a1
commit 93232a1663
39 changed files with 4860 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
bot/frontend/src/pages/Dashboard.js Normal file
View File

@@ -0,0 +1,213 @@
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { api } from '../services/api';
import { Server, MessageSquare, Users, Activity } from 'lucide-react';
function Dashboard() {
const [stats, setStats] = useState({
totalServers: 0,
totalMessages: 0,
totalUsers: 0,
botStatus: 'online'
});
const [recentActivity, setRecentActivity] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
loadDashboardData();
}, []);
const loadDashboardData = async () => {
try {
// Mock data - w prawdziwej aplikacji pobierz z API
setStats({
totalServers: 5,
totalMessages: 23,
totalUsers: 1,
botStatus: 'online'
});
setRecentActivity([
{
id: 1,
type: 'message_updated',
server: 'Test Server',
timestamp: new Date(),
description: 'Zaktualizowano wiadomość powitalną'
},
{
id: 2,
type: 'channel_configured',
server: 'Test Server',
timestamp: new Date(Date.now() - 3600000),
description: 'Skonfigurowano kanał #witamy'
}
]);
} catch (error) {
console.error('Error loading dashboard data:', error);
} finally {
setLoading(false);
}
};
if (loading) {
return <div className="loading">Ładowanie dashboard...</div>;
}
return (
<div>
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900 mb-2">Dashboard</h1>
<p className="text-gray-600">
Przegląd stanu bota i ostatnich aktywności
</p>
</div>
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div className="discord-card">
<div className="flex items-center">
<div className="p-3 bg-blue-100 rounded-lg mr-4">
<Server className="text-blue-600" size={24} />
</div>
<div>
<p className="text-sm text-gray-600">Serwery</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalServers}</p>
</div>
</div>
</div>
<div className="discord-card">
<div className="flex items-center">
<div className="p-3 bg-green-100 rounded-lg mr-4">
<MessageSquare className="text-green-600" size={24} />
</div>
<div>
<p className="text-sm text-gray-600">Wiadomości</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalMessages}</p>
</div>
</div>
</div>
<div className="discord-card">
<div className="flex items-center">
<div className="p-3 bg-purple-100 rounded-lg mr-4">
<Users className="text-purple-600" size={24} />
</div>
<div>
<p className="text-sm text-gray-600">Użytkownicy</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalUsers}</p>
</div>
</div>
</div>
<div className="discord-card">
<div className="flex items-center">
<div className="p-3 bg-yellow-100 rounded-lg mr-4">
<Activity className="text-yellow-600" size={24} />
</div>
<div>
<p className="text-sm text-gray-600">Status Bota</p>
<div className="flex items-center">
<div className={`w-3 h-3 rounded-full mr-2 ${
stats.botStatus === 'online' ? 'bg-green-500' : 'bg-red-500'
}`}></div>
<p className="text-lg font-semibold text-gray-900 capitalize">
{stats.botStatus === 'online' ? 'Online' : 'Offline'}
</p>
</div>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Quick Actions */}
<div className="discord-card">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Szybkie akcje</h3>
<div className="space-y-3">
<Link
to="/servers"
className="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition-colors"
>
<div className="flex items-center">
<Server className="text-blue-600 mr-3" size={20} />
<div>
<p className="font-medium text-gray-900">Zarządzaj serwerami</p>
<p className="text-sm text-gray-600">Konfiguruj kanały i wiadomości</p>
</div>
</div>
</Link>
<div className="block p-3 border border-gray-200 rounded-lg bg-gray-50">
<div className="flex items-center">
<MessageSquare className="text-gray-400 mr-3" size={20} />
<div>
<p className="font-medium text-gray-500">Szablony wiadomości</p>
<p className="text-sm text-gray-400">Wkrótce dostępne</p>
</div>
</div>
</div>
<div className="block p-3 border border-gray-200 rounded-lg bg-gray-50">
<div className="flex items-center">
<Activity className="text-gray-400 mr-3" size={20} />
<div>
<p className="font-medium text-gray-500">Statystyki</p>
<p className="text-sm text-gray-400">Wkrótce dostępne</p>
</div>
</div>
</div>
</div>
</div>
{/* Recent Activity */}
<div className="discord-card">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Ostatnia aktywność</h3>
<div className="space-y-3">
{recentActivity.length > 0 ? (
recentActivity.map((activity) => (
<div key={activity.id} className="flex items-start p-3 bg-gray-50 rounded-lg">
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2 mr-3"></div>
<div className="flex-1">
<p className="text-sm font-medium text-gray-900">
{activity.description}
</p>
<p className="text-xs text-gray-600">
{activity.server} • {activity.timestamp.toLocaleString('pl-PL')}
</p>
</div>
</div>
))
) : (
<p className="text-gray-500 text-center py-4">
Brak ostatnich aktywności
</p>
)}
</div>
</div>
</div>
{/* Bot Info */}
<div className="discord-card mt-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Informacje o bocie</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<p className="text-sm text-gray-600">Wersja</p>
<p className="font-medium">1.0.0</p>
</div>
<div>
<p className="text-sm text-gray-600">Czas działania</p>
<p className="font-medium">99.5%</p>
</div>
<div>
<p className="text-sm text-gray-600">Ostatnia aktualizacja</p>
<p className="font-medium">Dzisiaj</p>
</div>
</div>
</div>
</div>
);
}
export default Dashboard;