Function Overview

src/pages/dashboard/Overview.jsx:6–235

()

import { Link } from "react-router-dom";

export default function Overview() {
    const { subdomains, loading } = useDashboard();
    const { user } = useAuth();

    const totalCount = subdomains.length;
    const activeCount = subdomains.filter(d => d.status === "Active").length;
    const expiringCount = subdomains.filter(d => {
        if (!d.expiresAt) return false;
        const days = Math.ceil((new Date(d.expiresAt) - new Date()) / 864e5);
        return days > 0 && days <= 30;
    }).length;
    const expiredCount = subdomains.filter(d => d.status === "Expired").length;

    // Most recently created domains (up to 3)
    const recentDomains = [...subdomains]
        .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
        .slice(0, 3);

    const greeting = () => {
        const h = new Date().getHours();
        if (h < 12) return "Good morning";
        if (h < 17) return "Good afternoon";
        return "Good evening";
    };

    if (loading && subdomains.length === 0) {
        return (
            <div className="max-w-5xl animate-pulse space-y-6">
                <div className="h-8 bg-[#E5E3DF] rounded-lg w-48" />
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    {[...Array(4)].map((_, i) => <div key={i} className="h-28 bg-[#E5E3DF] rounded-2xl" />)}
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {[...Array(4)].map((_, i) => <div key={i} className="h-20 bg-[#E5E3DF] rounded-2xl" />)}
                </div>
            </div>
        );
    }

    return (
        <div className="max-w-5xl space-y-6">

            {/* ── Greeting header ── */}
            <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-2">
                <div>
                    <p className="text-xs font-bold uppercase tracking-widest text-[#FF6B35] mb-1">Dashboard</p>
                    <h1 className="text-2xl md:text-3xl font-extrabold text-[#1A1A1A] dark:text-white leading-tight">
                        {greeting()}, {user?.name?.split(" ")[0] || "there"} 👋
                    </h1>
                    <p className="text-sm text-slate-900 dark:text-white mt-1">
                        {totalCount === 0 ? "Register your first free domain to get started." : `You have ${totalCount} domain${totalCount > 1 ? "s" : ""} on Stackryze.`}
                    </p>
                </div>
                <Link
                    to="/register"
                    className="inline-flex items-center gap-2 self-start sm:self-auto px-4 py-2.5 bg-slate-900 text-white dark:bg-white dark:text-slate-900 text-sm font-bold rounded-xl hover:bg-slate-800 dark:hover:bg-slate-200 transition-colors shadow-sm"
                >
                    <Plus className="w-4 h-4" />