feat(frontend): implement dashboard page

- Create DashboardPage with active events, matches, and requests
- Add dashboardAPI.getData() to services/api.js
- Add /dashboard route as default landing after login
- Update Navbar with Dashboard and Events links
- Show video exchange and rating status for matches
- Handle match accept/reject/cancel actions
This commit is contained in:
Radosław Gierwiało
2025-11-21 21:12:25 +01:00
parent 901b046a34
commit f3bd169dbf
4 changed files with 590 additions and 4 deletions

View File

@@ -1,6 +1,6 @@
import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext';
import { Video, LogOut, User, History, Users, Menu, X } from 'lucide-react';
import { Video, LogOut, User, History, Users, Menu, X, LayoutDashboard, Calendar } from 'lucide-react';
import Avatar from '../common/Avatar';
import { useState, useEffect } from 'react';
import { matchesAPI } from '../../services/api';
@@ -64,13 +64,29 @@ const Navbar = () => {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex items-center">
<Link to="/events" className="flex items-center space-x-2">
<Link to="/dashboard" className="flex items-center space-x-2">
<Video className="w-8 h-8 text-primary-600" />
<span className="text-xl font-bold text-gray-900">spotlight.cam</span>
</Link>
</div>
{/* Desktop menu */}
<div className="hidden md:flex items-center space-x-4">
<Link
to="/dashboard"
className="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-100"
>
<LayoutDashboard className="w-4 h-4" />
<span>Dashboard</span>
</Link>
<Link
to="/events"
className="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-100"
>
<Calendar className="w-4 h-4" />
<span>Events</span>
</Link>
<Link
to="/matches"
className="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-100 relative"
@@ -137,6 +153,20 @@ const Navbar = () => {
</div>
</div>
<div className="px-2 pb-2 space-y-1">
<Link
to="/dashboard"
onClick={() => setMenuOpen(false)}
className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100"
>
<LayoutDashboard className="w-4 h-4" /> Dashboard
</Link>
<Link
to="/events"
onClick={() => setMenuOpen(false)}
className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100"
>
<Calendar className="w-4 h-4" /> Events
</Link>
<Link
to="/matches"
onClick={() => setMenuOpen(false)}