314 lines
16 KiB
TypeScript
314 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { useUser } from "@/lib/context";
|
|
import { User, Flame, Coins, CheckCircle, Smartphone, ArrowRight, Share2, Compass, ChevronRight, Activity, TrendingUp } from "lucide-react";
|
|
|
|
export default function DashboardPreview() {
|
|
const { profile } = useUser();
|
|
|
|
// Dynamic calculations based on user's steps
|
|
const caloriesBurned = Math.round(profile.stepsToday * 0.04);
|
|
const distanceKm = (profile.stepsToday * 0.00076).toFixed(2);
|
|
const activeMinutes = Math.round(profile.stepsToday * 0.008);
|
|
|
|
const stepPercentage = Math.min(100, Math.round((profile.stepsToday / profile.stepGoal) * 100));
|
|
|
|
// Weekly steps dummy data
|
|
const weeklySteps = [
|
|
{ day: "Mon", steps: 8200 },
|
|
{ day: "Tue", steps: 9400 },
|
|
{ day: "Wed", steps: 6100 },
|
|
{ day: "Thu", steps: 7800 },
|
|
{ day: "Fri", steps: 11200 },
|
|
{ day: "Sat", steps: 9000 },
|
|
{ day: "Sun", steps: profile.stepsToday },
|
|
];
|
|
|
|
const maxWeeklySteps = Math.max(...weeklySteps.map((d) => d.steps));
|
|
|
|
// Transaction history dummy data
|
|
const transactions = [
|
|
{ id: 1, type: "Walk Reward", detail: "6,420 steps synced", amount: "+16 LYT", time: "2 hours ago", isEarn: true },
|
|
{ id: 2, type: "Redeemed Brand", detail: "Starbucks $10 Voucher", amount: "-150 LYT", time: "5 hours ago", isEarn: false },
|
|
{ id: 3, type: "Referral Bonus", detail: "Invited Marcus Lee", amount: "+50 LYT", time: "1 day ago", isEarn: true },
|
|
{ id: 4, type: "Game Catch", detail: "LYT Catcher Score: 45", amount: "+45 LYT", time: "1 day ago", isEarn: true },
|
|
];
|
|
|
|
return (
|
|
<section id="dashboard" className="py-24 bg-dark relative overflow-hidden">
|
|
{/* Background visual glows */}
|
|
<div className="absolute top-1/2 left-1/4 -translate-y-1/2 w-96 h-96 rounded-full bg-accent-purple/10 blur-[130px] pointer-events-none" />
|
|
<div className="absolute bottom-0 right-1/4 w-96 h-96 rounded-full bg-accent-pink/5 blur-[130px] pointer-events-none" />
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
|
|
{/* Section Header */}
|
|
<div className="text-center max-w-3xl mx-auto mb-20 space-y-4">
|
|
<span className="text-accent-lime font-extrabold text-xs tracking-widest uppercase">
|
|
Platform Preview
|
|
</span>
|
|
<h2 className="text-3xl sm:text-5xl font-extrabold font-sora text-white leading-tight">
|
|
Manage Assets on <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-pink text-glow-yellow">Your Dashboard</span>
|
|
</h2>
|
|
<p className="text-white/60 text-base sm:text-lg">
|
|
Track walking logs, check voucher redemption codes, and review points transaction history in your unified portal.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Contents Grid */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
|
|
|
{/* Left Block: Weekly Progress Charts (col-span-3) */}
|
|
<div className="lg:col-span-3 space-y-6 hidden lg:block">
|
|
<div className="glassmorphism rounded-3xl p-6 space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-bold text-white font-sora flex items-center gap-1.5">
|
|
<Activity className="w-4 h-4 text-accent-lime" />
|
|
<span>Activity Logs</span>
|
|
</span>
|
|
<span className="text-[10px] text-white/40 font-bold uppercase">Weekly</span>
|
|
</div>
|
|
|
|
{/* Steps Chart */}
|
|
<div className="h-44 flex items-end justify-between gap-2.5 pt-4">
|
|
{weeklySteps.map((d, idx) => {
|
|
const pct = Math.max(15, Math.round((d.steps / maxWeeklySteps) * 100));
|
|
const isToday = idx === weeklySteps.length - 1;
|
|
return (
|
|
<div key={idx} className="flex-1 flex flex-col items-center gap-2">
|
|
<div className="w-full relative group">
|
|
<div
|
|
style={{ height: `${pct}%` }}
|
|
className={`w-full rounded-t-lg transition-all duration-500 min-h-[15px] ${
|
|
isToday
|
|
? "bg-gradient-to-t from-accent-pink to-accent-purple shadow-[0_0_10px_rgba(255,46,136,0.2)]"
|
|
: "bg-white/10 hover:bg-white/20"
|
|
}`}
|
|
/>
|
|
{/* Tooltip */}
|
|
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 hidden group-hover:block bg-dark border border-white/10 px-2 py-0.5 rounded text-[9px] font-mono text-white z-10 whitespace-nowrap">
|
|
{d.steps.toLocaleString()}
|
|
</div>
|
|
</div>
|
|
<span className={`text-[10px] font-bold ${isToday ? "text-accent-pink" : "text-white/40"}`}>
|
|
{d.day}
|
|
</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="border-t border-white/5 pt-4 text-xs text-white/50 leading-relaxed">
|
|
🎉 Your weekly walk step frequency has increased by <span className="text-accent-lime font-bold">12.4%</span> since last week. Keep it up!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center Block: Mobile iOS Phone Mockup (col-span-5) */}
|
|
<div className="lg:col-span-5 flex justify-center">
|
|
{/* Phone Shell */}
|
|
<div className="relative w-[320px] h-[640px] rounded-[48px] border-[8px] border-white/10 bg-[#090909] p-3.5 shadow-[0_25px_60px_-15px_rgba(0,0,0,0.9)] overflow-hidden flex flex-col justify-between">
|
|
|
|
{/* Dynamic Island Notch */}
|
|
<div className="absolute top-3.5 left-1/2 -translate-x-1/2 w-28 h-6 rounded-full bg-black z-30 flex items-center justify-center">
|
|
<div className="w-2.5 h-2.5 rounded-full bg-zinc-900 ml-auto mr-4" />
|
|
</div>
|
|
|
|
{/* Status Header */}
|
|
<div className="flex justify-between items-center text-[10px] text-white/70 font-semibold px-4 pt-1.5 z-20">
|
|
<span>9:41</span>
|
|
<div className="flex space-x-1.5">
|
|
<span>5G</span>
|
|
<span>100%</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* App Internal Body (Scrollable mock container) */}
|
|
<div className="flex-grow overflow-y-auto px-1.5 py-4 space-y-5 scrollbar-none mt-2">
|
|
|
|
{/* User Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-2.5">
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-tr from-accent-pink to-accent-purple p-0.5 flex items-center justify-center">
|
|
<div className="w-full h-full rounded-full bg-dark flex items-center justify-center text-xs font-bold text-white">
|
|
AS
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span className="text-white font-bold text-xs block">{profile.name}</span>
|
|
<span className="text-[9px] text-white/40 block">Level {profile.level} Premium Member</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Streak tag */}
|
|
<div className="flex items-center space-x-1 px-2.5 py-1 rounded-full bg-white/5 border border-white/10 text-accent-orange font-bold text-[10px]">
|
|
<Flame className="w-3 h-3 fill-current" />
|
|
<span>{profile.streak} Days</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Circular Step Tracker */}
|
|
<div className="bg-white/3 border border-white/5 rounded-3xl p-5 flex flex-col items-center justify-center text-center relative overflow-hidden">
|
|
|
|
{/* Gauge */}
|
|
<div className="relative w-36 h-36 flex items-center justify-center">
|
|
|
|
{/* SVG circular track */}
|
|
<svg className="w-full h-full transform -rotate-90">
|
|
<circle
|
|
cx="72"
|
|
cy="72"
|
|
r="60"
|
|
className="stroke-white/5 fill-transparent"
|
|
strokeWidth="8"
|
|
/>
|
|
<circle
|
|
cx="72"
|
|
cy="72"
|
|
r="60"
|
|
className="stroke-primary fill-transparent"
|
|
strokeWidth="8"
|
|
strokeDasharray={377}
|
|
strokeDashoffset={377 - (377 * stepPercentage) / 100}
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
|
|
{/* Step values */}
|
|
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
|
<span className="text-2xl font-extrabold font-sora text-white">
|
|
{profile.stepsToday.toLocaleString()}
|
|
</span>
|
|
<span className="text-[9px] text-white/40 font-bold uppercase tracking-wider">
|
|
Steps Today
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<span className="text-[10px] text-white/50 font-bold mt-2">
|
|
Goal: {profile.stepGoal.toLocaleString()} steps ({stepPercentage}%)
|
|
</span>
|
|
|
|
{/* Stats split */}
|
|
<div className="grid grid-cols-3 gap-2 w-full pt-4 mt-4 border-t border-white/5">
|
|
<div>
|
|
<span className="text-white font-extrabold text-xs block">{caloriesBurned}</span>
|
|
<span className="text-[8px] text-white/40 block">Kcal</span>
|
|
</div>
|
|
<div className="border-x border-white/5">
|
|
<span className="text-white font-extrabold text-xs block">{distanceKm}</span>
|
|
<span className="text-[8px] text-white/40 block">Km</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-white font-extrabold text-xs block">{activeMinutes}</span>
|
|
<span className="text-[8px] text-white/40 block">Mins</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Balance & Send Row */}
|
|
<div className="bg-gradient-to-tr from-accent-purple/20 to-accent-pink/10 border border-accent-purple/20 rounded-2xl p-4 flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<span className="text-[9px] text-white/40 font-bold uppercase tracking-wider block">Wallet Balance</span>
|
|
<span className="text-lg font-extrabold font-sora text-primary flex items-center gap-1">
|
|
<Coins className="w-4.5 h-4.5" />
|
|
<span>{profile.lytBalance} LYTs</span>
|
|
</span>
|
|
</div>
|
|
|
|
<button className="px-3.5 py-1.5 bg-primary text-dark font-extrabold text-[10px] tracking-wide rounded-xl">
|
|
Redeem
|
|
</button>
|
|
</div>
|
|
|
|
{/* Challenges Panel */}
|
|
<div className="space-y-2">
|
|
<h4 className="text-[10px] font-bold text-white/40 uppercase tracking-widest px-1">Daily Missions</h4>
|
|
<div className="bg-white/3 border border-white/5 rounded-2xl p-3 space-y-2">
|
|
<div className="flex items-center justify-between p-2 hover:bg-white/2 rounded-lg text-xs">
|
|
<div className="flex items-center space-x-2">
|
|
<CheckCircle className="w-4 h-4 text-accent-lime" />
|
|
<span className="text-white/80">Log 5,000 steps today</span>
|
|
</div>
|
|
<span className="text-accent-lime font-bold text-[10px]">+10 LYT</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-2 hover:bg-white/2 rounded-lg text-xs">
|
|
<div className="flex items-center space-x-2">
|
|
<CheckCircle className="w-4 h-4 text-accent-lime" />
|
|
<span className="text-white/80">Check in at Brew & Co</span>
|
|
</div>
|
|
<span className="text-accent-lime font-bold text-[10px]">+5 LYT</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Bottom Nav Bar */}
|
|
<div className="border-t border-white/5 pt-2 pb-1.5 flex justify-around items-center z-20">
|
|
<div className="flex flex-col items-center text-primary">
|
|
<Activity className="w-4.5 h-4.5" />
|
|
<span className="text-[8px] font-bold mt-0.5">Track</span>
|
|
</div>
|
|
<div className="flex flex-col items-center text-white/40 hover:text-white transition-colors">
|
|
<Compass className="w-4.5 h-4.5" />
|
|
<span className="text-[8px] font-bold mt-0.5">Explore</span>
|
|
</div>
|
|
<div className="flex flex-col items-center text-white/40 hover:text-white transition-colors">
|
|
<Coins className="w-4.5 h-4.5" />
|
|
<span className="text-[8px] font-bold mt-0.5">Wallet</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Block: Transaction Log Feed (col-span-4) */}
|
|
<div className="lg:col-span-4 space-y-6">
|
|
<div className="glassmorphism rounded-3xl p-6 space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-bold text-white font-sora flex items-center gap-1.5">
|
|
<TrendingUp className="w-4 h-4 text-accent-pink" />
|
|
<span>Wallet Transaction Ledger</span>
|
|
</span>
|
|
<span className="text-[10px] text-white/40 font-bold uppercase">Real-Time</span>
|
|
</div>
|
|
|
|
{/* Transaction list */}
|
|
<div className="space-y-4">
|
|
{transactions.map((tx) => (
|
|
<div key={tx.id} className="flex justify-between items-center p-3 rounded-xl bg-white/2 border border-white/5">
|
|
<div className="space-y-0.5">
|
|
<span className="text-xs font-bold text-white block">{tx.type}</span>
|
|
<span className="text-[10px] text-white/40 block">{tx.detail}</span>
|
|
</div>
|
|
|
|
<div className="text-right">
|
|
<span className={`text-xs font-bold block ${tx.isEarn ? "text-accent-lime" : "text-red-400"}`}>
|
|
{tx.amount}
|
|
</span>
|
|
<span className="text-[8px] text-white/30">{tx.time}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="pt-2">
|
|
<a
|
|
href="#spend"
|
|
className="w-full py-3 rounded-xl bg-white/5 hover:bg-white/10 text-white font-extrabold text-xs tracking-wider flex items-center justify-center gap-1 border border-white/10 hover:border-white/20 transition-all cursor-pointer"
|
|
>
|
|
<span>Redeem Store Vouchers</span>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|