Frontend v.0.1
This commit is contained in:
@@ -0,0 +1,143 @@
|
||||
// frontend/src/pages/Dashboard.jsx
|
||||
|
||||
import { Calendar, ChevronDown, ChevronUp, History, Loader2, Plus, SlidersHorizontal, Users } from 'lucide-react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate, useOutletContext } from 'react-router-dom';
|
||||
import TournamentForm from '../components/Forms/TournamentForm';
|
||||
import Modal from '../components/UI/Modal';
|
||||
import api from '../services/api';
|
||||
|
||||
// --- EXACT COPY OF YOUR DASHCARD ---
|
||||
const DashCard = ({ t, isAdmin, onClick, onEdit }) => (
|
||||
<div onClick={onClick} className="bg-white dark:bg-zinc-900 rounded-3xl p-5 shadow-sm border border-zinc-200 dark:border-zinc-800 cursor-pointer hover:shadow-2xl hover:-translate-y-1.5 transition-all relative overflow-hidden group">
|
||||
<div className="absolute top-0 left-0 w-2 h-full bg-orange-600 group-hover:w-3 transition-all"></div>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="font-black text-xl text-zinc-900 dark:text-white truncate pr-4 leading-tight">{t.name}</h3>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); onEdit(t); }}
|
||||
className="text-zinc-300 hover:text-orange-500 transition p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-2xl shrink-0"
|
||||
>
|
||||
<SlidersHorizontal size={18} strokeWidth={2.5} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2.5">
|
||||
<div className="flex items-center gap-2.5 text-zinc-700 dark:text-zinc-300 font-bold text-sm tracking-tight">
|
||||
<Calendar size={16} className="text-orange-600 shrink-0" />
|
||||
{/* Use safe date parsing */}
|
||||
<span>{t.timestamp ? new Date(t.timestamp).toLocaleDateString() : 'TBD'} <span className="text-zinc-300 dark:text-zinc-700 mx-1">/</span> {t.timestamp ? new Date(t.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : ''}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2.5 text-zinc-700 dark:text-zinc-300 font-bold text-sm tracking-tight">
|
||||
<Users size={16} className="text-orange-600 shrink-0" />
|
||||
<span>{t.team_count} Teams</span>
|
||||
</div>
|
||||
<span className="bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5 rounded-lg text-[10px] font-black uppercase tracking-widest border border-zinc-200 dark:border-zinc-700 text-zinc-500">
|
||||
{t.type}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default function Dashboard() {
|
||||
const { setNavTitle, isAdmin } = useOutletContext();
|
||||
const [tournaments, setTournaments] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [editTarget, setEditTarget] = useState(null);
|
||||
const [showPast, setShowPast] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
setNavTitle('Dashboard');
|
||||
loadTournaments();
|
||||
}, []);
|
||||
|
||||
const loadTournaments = async () => {
|
||||
try {
|
||||
const data = await api.get('/tournaments');
|
||||
setTournaments(data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// --- REPLICATED GROUPING LOGIC ---
|
||||
const now = new Date();
|
||||
const groups = { live: [], future: [], past: [] };
|
||||
|
||||
tournaments.forEach(t => {
|
||||
const tDate = new Date(t.timestamp);
|
||||
const isToday = tDate.toDateString() === now.toDateString();
|
||||
if (tDate > now && !isToday) groups.future.push(t);
|
||||
else if (isToday) groups.live.push(t);
|
||||
else groups.past.push(t);
|
||||
});
|
||||
|
||||
// Sort
|
||||
groups.future.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
|
||||
groups.live.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
|
||||
groups.past.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
|
||||
|
||||
if (loading) return <div className="flex h-full items-center justify-center"><Loader2 className="animate-spin text-orange-600" size={48} /></div>;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-5xl p-6 pb-24 space-y-16 animate-in slide-in-from-bottom-4 duration-500">
|
||||
|
||||
{/* Create Button only if Admin */}
|
||||
<div className="flex justify-end">
|
||||
{isAdmin && (
|
||||
<button onClick={() => { setEditTarget(null); setShowCreate(true); }} className="bg-orange-600 hover:bg-orange-500 text-white px-5 py-2.5 rounded-xl flex items-center gap-2 text-[10px] font-black uppercase tracking-wider shadow-xl shadow-orange-600/20 active:scale-95 transition">
|
||||
<Plus size={16} strokeWidth={4} /> Create
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{groups.live.length > 0 && (
|
||||
<section>
|
||||
<h2 className="text-[10px] font-black text-green-500 uppercase tracking-[0.4em] mb-6 flex items-center gap-3">
|
||||
<div className="w-2.5 h-2.5 bg-green-500 rounded-full animate-ping shadow-lg shadow-green-500/50" /> Live Events
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{groups.live.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onClick={() => navigate(`/tournaments/${t.id}`)} onEdit={(item) => { setEditTarget(item); setShowCreate(true); }} />)}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section>
|
||||
<h2 className="text-[10px] font-black text-zinc-400 dark:text-zinc-600 uppercase tracking-[0.4em] mb-6 flex items-center gap-3">
|
||||
<Calendar size={18} /> Upcoming
|
||||
</h2>
|
||||
{groups.future.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{groups.future.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onClick={() => navigate(`/tournaments/${t.id}`)} onEdit={(item) => { setEditTarget(item); setShowCreate(true); }} />)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-16 text-center rounded-3xl border-2 border-dashed border-zinc-300 dark:border-zinc-800 text-zinc-400 text-xs font-black uppercase tracking-[0.3em]">No Upcoming Events</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{groups.past.length > 0 && (
|
||||
<section>
|
||||
<button onClick={() => setShowPast(!showPast)} className="w-full flex items-center justify-between group py-6 border-t border-zinc-300 dark:border-zinc-800 transition-colors hover:border-zinc-400">
|
||||
<h2 className="text-[10px] font-black text-zinc-400 dark:text-zinc-600 uppercase tracking-[0.4em] mb-6 flex items-center gap-3"><History size={18} />Archive</h2>
|
||||
{showPast ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
|
||||
</button>
|
||||
{showPast && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4 opacity-75 hover:opacity-100 transition-opacity">
|
||||
{groups.past.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onClick={() => navigate(`/tournaments/${t.id}`)} onEdit={(item) => { setEditTarget(item); setShowCreate(true); }} />)}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<Modal isOpen={showCreate} onClose={() => setShowCreate(false)} title={editTarget ? "Modify Event" : "New Tournament"}>
|
||||
<TournamentForm initialData={editTarget} isEdit={!!editTarget} onSuccess={(newT) => { setShowCreate(false); loadTournaments(); }} />
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user