brackets/frontend/src/components/Dashboard/DashCard.jsx

// frontend/src/components/Dashboard/DashCard.jsx

import { MapPin, SlidersHorizontal, Users } from 'lucide-react';

export default function DashCard({ t, isAdmin, onSelect, onEdit }) {
    return (
        <div
            onClick={() => onSelect(t.id)}
            className="block bg-white dark:bg-zinc-900 p-6 rounded-xl shadow-sm border border-zinc-200 dark:border-zinc-800 relative group hover:shadow-md hover:scale-[1.02] transition-all duration-200 will-change-transform transform-gpu cursor-pointer"
        >
            <div className="flex justify-between items-start mb-4">
                <div className="min-w-0 pr-4">
                    <h2 className="text-xl font-bold truncate text-zinc-900 dark:text-white group-hover:text-orange-500 dark:group-hover:text-orange-400 transition">
                        {t.name}
                    </h2>
                    <div className="text-xs text-zinc-400 dark:text-zinc-500 mt-1 font-mono flex items-center gap-2">
                        <span>{t.timestamp ? new Date(t.timestamp).toLocaleDateString() : 'TBD'}</span>
                        <span>{t.timestamp ? new Date(t.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : ''}</span>
                    </div>
                </div>
                <span className="bg-orange-100 dark:bg-orange-900/50 text-orange-700 dark:text-orange-300 text-[10px] px-2 py-1 rounded font-mono border border-orange-200 dark:border-orange-800 uppercase tracking-tight shrink-0">
                    {t.type}
                </span>
            </div>

            <div className="flex gap-4 text-sm text-zinc-500 dark:text-zinc-400 items-center">
                <div className="flex items-center gap-1.5 font-medium">
                    <Users size={16} className="text-orange-500" />
                    {t.team_count} Teams
                </div>
                <div className="flex items-center gap-1.5 font-medium">
                    <MapPin size={16} className="text-orange-500" />
                    {t.court_count} Courts
                </div>

                {isAdmin && (
                    <button
                        onClick={(e) => { e.stopPropagation(); onEdit(t); }}
                        className="ml-auto hover:text-orange-500 transition z-10 h-8 w-8 flex items-center justify-center rounded-full text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800"
                        title="Tournament Settings"
                    >
                        <SlidersHorizontal size={18} />
                    </button>
                )}
            </div>
        </div>
    );
}