bloby-bot 0.37.1 → 0.39.1

package/workspace/client/src/components/Dashboard/DashboardPage.tsx

@@ -1,134 +1,138 @@
-import { Search, Mail, DollarSign, TrendingUp } from 'lucide-react';
-import { AreaChart, Area, BarChart, Bar, ResponsiveContainer } from 'recharts';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+import { Heart, Zap, Eye, ArrowUpRight } from 'lucide-react';
 
-const GRADIENT = 'linear-gradient(to right, #4FF2FE 10%, #BC20DE 55%, #FF6B8A 100%)';
-const CARD = 'relative rounded-xl overflow-hidden';
-const BORDER = 'absolute inset-0 rounded-xl bg-gradient-to-b from-white/[0.08] via-white/[0.02] to-transparent pointer-events-none';
-const INNER = 'relative rounded-xl bg-[#141414] m-px p-3.5 h-full';
-
-const rev = [{ v: 82 }, { v: 89 }, { v: 94 }, { v: 101 }, { v: 108 }, { v: 112 }, { v: 125 }];
-const fol = [{ v: 12 }, { v: 18 }, { v: 9 }, { v: 24 }, { v: 31 }, { v: 19 }, { v: 27 }];
-
-function StripeSvg() {
-  return <svg className="h-3.5 w-3.5 text-[#635BFF]" viewBox="0 0 24 24" fill="currentColor"><path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.591-7.305z" /></svg>;
-}
-function GmailSvg() {
-  return <svg className="h-3.5 w-3.5 text-[#EA4335]" viewBox="0 0 24 24" fill="currentColor"><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z" /></svg>;
+interface WishlistStats {
+  total: number;
+  watching: number;
+  urgent: number;
+  purchased: number;
 }
-function XSvg() {
-  return <svg className="h-3.5 w-3.5 text-white" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>;
+
+interface WishlistItem {
+  id: number;
+  name: string;
+  last_deal_found: string | null;
+  created_at: string;
 }
 
 export default function DashboardPage() {
-  return (
-    <div className="flex flex-col h-full px-4 sm:px-6 pt-8 sm:pt-12 pb-6 max-w-4xl mx-auto w-full overflow-y-auto">
-      <h1
-        className="text-xl sm:text-2xl font-bold mb-1 tracking-tight w-fit"
-        style={{ backgroundImage: GRADIENT, WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}
-      >
-        Let's get started
-      </h1>
-      <p className="text-muted-foreground text-xs mb-6">Your workspace at a glance.</p>
+  const navigate = useNavigate();
+  const [wlStats, setWlStats] = useState<WishlistStats | null>(null);
+  const [wlLatestDeal, setWlLatestDeal] = useState<{ name: string; deal: string } | null>(null);
 
-      <div className="grid grid-cols-3 gap-2.5">
+  useEffect(() => {
+    fetch('/app/api/wishlist/stats')
+      .then((r) => (r.ok ? r.json() : null))
+      .then((s) => { if (s) setWlStats(s); })
+      .catch(() => {});
+    fetch('/app/api/wishlist')
+      .then((r) => (r.ok ? r.json() : null))
+      .then((items: WishlistItem[] | null) => {
+        if (!items) return;
+        const withDeal = items.find((i) => i.last_deal_found);
+        if (withDeal) setWlLatestDeal({ name: withDeal.name, deal: withDeal.last_deal_found! });
+      })
+      .catch(() => {});
+  }, []);
 
-        {/* Stripe — 2 cols */}
-        <div className={`${CARD} col-span-2`}>
-          <div className={BORDER} />
-          <div className={INNER}>
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <div className="h-7 w-7 rounded-lg bg-[#635BFF]/10 flex items-center justify-center"><StripeSvg /></div>
-                <span className="text-xs font-bold">Stripe</span>
+  return (
+    <div className="flex flex-col h-full px-4 sm:px-6 md:px-20 pt-10 sm:pt-16 pb-32 max-w-5xl mx-auto w-full">
+      <div className="grid grid-cols-1 gap-5">
+
+        {/* Wishlist — glass card */}
+        <button
+          type="button"
+          onClick={() => navigate('/wishlist')}
+          className="glass-card text-left cursor-pointer hover:brightness-110 transition group p-6 sm:p-7"
+        >
+          <div className="relative">
+            <div className="flex items-start gap-4 mb-6">
+              <div className="h-12 w-12 rounded-2xl flex items-center justify-center bg-gradient-to-br from-pink-300/40 to-rose-500/20 border border-white/10 backdrop-blur-xl shrink-0">
+                <Heart className="h-5 w-5 text-pink-200" fill="currentColor" />
               </div>
-              <div className="flex items-center gap-1 text-emerald-500">
-                <TrendingUp className="h-3 w-3" />
-                <span className="text-[10px] font-bold">+12.5%</span>
+              <div className="flex-1 min-w-0">
+                <h3 className="text-base font-semibold text-white tracking-tight">Wishlist</h3>
+                <p className="text-xs text-white/60 mt-0.5">Items you're tracking, urgent picks, and the latest deal.</p>
+              </div>
+              <div className="h-9 w-9 rounded-full bg-white/10 border border-white/10 flex items-center justify-center text-white/80 group-hover:bg-white/15 transition">
+                <ArrowUpRight className="h-4 w-4" />
               </div>
             </div>
-            <p className="text-2xl font-bold tracking-tight mt-2">$12,480</p>
-            <p className="text-[10px] text-muted-foreground/50 mb-1">MRR</p>
-            <div className="h-12 overflow-hidden">
-              <ResponsiveContainer width="100%" height={48}>
-                <AreaChart data={rev}>
-                  <defs>
-                    <linearGradient id="sg" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#4FF2FE" /><stop offset="50%" stopColor="#BC20DE" /><stop offset="100%" stopColor="#FE546B" /></linearGradient>
-                    <linearGradient id="sf" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#BC20DE" stopOpacity={0.12} /><stop offset="100%" stopColor="#BC20DE" stopOpacity={0} /></linearGradient>
-                  </defs>
-                  <Area type="monotone" dataKey="v" stroke="url(#sg)" strokeWidth={1.5} fill="url(#sf)" />
-                </AreaChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-        </div>
 
-        {/* X — 1 col */}
-        <div className={`${CARD} col-span-1`}>
-          <div className={BORDER} />
-          <div className={INNER}>
-            <div className="flex items-center gap-2 mb-2">
-              <div className="h-7 w-7 rounded-lg bg-white/[0.06] flex items-center justify-center"><XSvg /></div>
-              <span className="text-xs font-bold">X</span>
-            </div>
-            <p className="text-2xl font-bold tracking-tight">24.8K</p>
-            <div className="flex items-center gap-1 text-emerald-500 mb-1">
-              <TrendingUp className="h-2.5 w-2.5" />
-              <span className="text-[10px] font-bold">+1.4K</span>
+            <div className="grid grid-cols-3 gap-3 sm:gap-5">
+              <Stat
+                icon={Eye}
+                label="Watching"
+                value={wlStats?.watching ?? 0}
+                gradientFrom="#5DE0E6"
+                gradientTo="#85C7FF"
+              />
+              <Stat
+                icon={Zap}
+                label="Urgent"
+                value={wlStats?.urgent ?? 0}
+                gradientFrom="#FFB37A"
+                gradientTo="#FF7AAA"
+              />
+              <Stat
+                icon={Heart}
+                label="Total"
+                value={wlStats?.total ?? 0}
+                gradientFrom="#C9A7E8"
+                gradientTo="#F2B5C7"
+              />
             </div>
-            <div className="h-10 overflow-hidden">
-              <ResponsiveContainer width="100%" height={40}>
-                <BarChart data={fol} barCategoryGap="25%">
-                  <defs>
-                    <linearGradient id="xg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#BC20DE" stopOpacity={0.3} /><stop offset="100%" stopColor="#4FF2FE" stopOpacity={0.05} /></linearGradient>
-                  </defs>
-                  <Bar dataKey="v" fill="url(#xg)" radius={[2, 2, 0, 0]} />
-                </BarChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-        </div>
 
-        {/* Gmail — 1 col */}
-        <div className={`${CARD} col-span-1`}>
-          <div className={BORDER} />
-          <div className={INNER}>
-            <div className="flex items-center gap-2 mb-2.5">
-              <div className="h-7 w-7 rounded-lg bg-[#EA4335]/10 flex items-center justify-center"><GmailSvg /></div>
-              <span className="text-xs font-bold">Gmail</span>
-              <span className="ml-auto text-[10px] text-muted-foreground/50">3 new</span>
-            </div>
-            {['Sarah Chen', 'Stripe', 'Alex R.'].map((n) => (
-              <div key={n} className="flex items-center gap-2 py-1.5">
-                <div className="h-5 w-5 rounded-full bg-white/[0.06] text-[9px] font-bold flex items-center justify-center shrink-0">{n[0]}</div>
-                <span className="text-[11px] truncate">{n}</span>
+            {wlLatestDeal && (
+              <div className="mt-6 pt-5 border-t border-white/10 flex items-start gap-3">
+                <div className="h-7 px-2 rounded-full bg-amber-300/15 border border-amber-200/20 text-amber-200 text-[10px] font-semibold uppercase tracking-wider flex items-center">
+                  Latest deal
+                </div>
+                <p className="text-sm text-white/85 truncate flex-1">
+                  <span className="text-white/55">{wlLatestDeal.name}:</span> {wlLatestDeal.deal}
+                </p>
               </div>
-            ))}
+            )}
           </div>
-        </div>
+        </button>
 
-        {/* Research — 2 cols */}
-        <div className={`${CARD} col-span-2`}>
-          <div className={BORDER} />
-          <div className={INNER}>
-            <div className="flex items-center gap-2 mb-2.5">
-              <div className="h-7 w-7 rounded-lg bg-[#9235F9]/10 flex items-center justify-center"><Search className="h-3.5 w-3.5 text-[#9235F9]" /></div>
-              <span className="text-xs font-bold">Research</span>
-              <span className="ml-auto text-[10px] font-bold text-muted-foreground bg-white/[0.06] px-2 py-0.5 rounded-full">3</span>
-            </div>
-            {[
-              { t: 'Competitor pricing', s: 'Done', c: 'text-emerald-500 bg-emerald-500/10' },
-              { t: 'Market trends Q1', s: 'Done', c: 'text-emerald-500 bg-emerald-500/10' },
-              { t: 'User feedback', s: 'Review', c: 'text-orange-400 bg-orange-400/10' },
-            ].map((r) => (
-              <div key={r.t} className="flex items-center justify-between py-1.5">
-                <span className="text-[11px]">{r.t}</span>
-                <span className={`text-[9px] font-bold px-1.5 py-0.5 rounded-full ${r.c}`}>{r.s}</span>
-              </div>
-            ))}
-          </div>
-        </div>
+      </div>
+    </div>
+  );
+}
 
+function Stat({
+  icon: Icon,
+  label,
+  value,
+  gradientFrom,
+  gradientTo,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  value: number;
+  gradientFrom: string;
+  gradientTo: string;
+}) {
+  const gradient = `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
+  return (
+    <div className="relative">
+      <div className="flex items-center gap-1.5 mb-2">
+        <Icon className="h-3 w-3 text-white/70" />
+        <span
+          className="text-[10px] font-semibold uppercase tracking-wider"
+          style={{
+            backgroundImage: gradient,
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+            backgroundClip: 'text',
+          }}
+        >
+          {label}
+        </span>
       </div>
+      <p className="text-3xl sm:text-4xl font-semibold tracking-tight text-white tabular-nums">{value}</p>
     </div>
   );
 }