chore(env): update application version to 2.1.2 in production environment

- Incremented the application version to 2.1.2 for production deployment.
- Enhanced the DashboardHero component with additional animation effects and improved layout.
- Refactored LiveClock and StatCard components for better styling and performance.
- Introduced new shimmer animation in NoticeTypeBreakdown for visual enhancement.
- Updated the trends chart with improved stroke effects and hover animations.

.env.production

@@ -1,4 +1,4 @@
-NEXT_PUBLIC_APP_VERSION=2.1.1
+NEXT_PUBLIC_APP_VERSION=2.1.2
 NEXT_PUBLIC_TOAST_AUTO_CLOSE_DURATION=2500
 NEXT_PUBLIC_FIREBASE_API_KEY=AIzaSyCTjdsk2jE34IfnvSKP1JMTIf_Abd7tbt0
 NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=opplens-270d1.firebaseapp.com

src/app/(home)/_components/dashboard/hero.tsx

@@ -23,70 +23,204 @@ function greeting() {
   return "Good night";
 }
 
-export function DashboardHero({ total, active, closingSoon, isLoading }: Props) {
+export function DashboardHero({
+  total,
+  active,
+  closingSoon,
+  isLoading,
+}: Props) {
   const rootRef = useRef<HTMLDivElement>(null);
+  const auroraRef = useRef<HTMLDivElement>(null);
   const orbARef = useRef<HTMLDivElement>(null);
   const orbBRef = useRef<HTMLDivElement>(null);
+  const orbCRef = useRef<HTMLDivElement>(null);
   const titleRef = useRef<HTMLHeadingElement>(null);
+  const shineRef = useRef<HTMLSpanElement>(null);
 
   useLayoutEffect(() => {
     const reduced =
       typeof window !== "undefined" &&
       window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
+    const resetIntroTargets = () => {
+      const root = rootRef.current;
+      if (root) {
+        gsap.killTweensOf(root);
+        gsap.set(root, { clearProps: "opacity,transform" });
+      }
+      const title = titleRef.current;
+      if (title) {
+        const inner = title.querySelector<HTMLElement>("[data-title-inner]");
+        if (inner) {
+          gsap.killTweensOf(inner);
+          gsap.set(inner, { clearProps: "opacity,transform" });
+        }
+      }
+      root?.querySelectorAll<HTMLElement>("[data-hero-pill]").forEach((el) => {
+        gsap.killTweensOf(el);
+        gsap.set(el, { clearProps: "opacity,transform,scale" });
+      });
+    };
+
     const ctx = gsap.context(() => {
       if (reduced) return;
 
-      gsap.from(rootRef.current, {
+      const root = rootRef.current;
-        opacity: 0,
+      if (root) {
-        y: 24,
+        // Do not tween root opacity: Strict Mode + revert can leave the whole hero
-        duration: 0.7,
+        // at opacity 0. Motion uses translateY only.
-        ease: "power3.out",
+        gsap.fromTo(
-      });
+          root,
+          { y: 28 },
+          {
+            y: 0,
+            duration: 0.8,
+            ease: "power3.out",
+          },
+        );
+      }
 
-      const chars = titleRef.current?.querySelectorAll<HTMLElement>("[data-char]");
+      // Animate a wrapper around the headline, not per-glyph. Transforms on
-      if (chars && chars.length) {
+      // children inside `bg-clip-text` / `text-transparent` often paint as fully
-        gsap.from(chars, {
+      // invisible in WebKit and some Chromium builds.
-          y: 28,
+      const titleInner = titleRef.current?.querySelector<HTMLElement>(
-          opacity: 0,
+        "[data-title-inner]",
-          rotateX: -50,
+      );
-          duration: 0.6,
+      if (titleInner) {
-          stagger: 0.025,
+        gsap.fromTo(
-          ease: "back.out(1.6)",
+          titleInner,
-          delay: 0.15,
+          { y: 36 },
+          {
+            y: 0,
+            duration: 0.75,
+            ease: "back.out(1.7)",
+            delay: 0.2,
+          },
+        );
+      }
+
+      const pills = rootRef.current?.querySelectorAll<HTMLElement>("[data-hero-pill]");
+      if (pills?.length) {
+        gsap.fromTo(
+          pills,
+          { y: 16, scale: 0.92 },
+          {
+            y: 0,
+            scale: 1,
+            duration: 0.55,
+            stagger: 0.08,
+            delay: 0.55,
+            ease: "back.out(1.6)",
+          },
+        );
+      }
+
+      if (auroraRef.current) {
+        gsap.to(auroraRef.current, {
+          rotate: 360,
+          duration: 42,
+          ease: "none",
+          repeat: -1,
         });
       }
 
-      gsap.from("[data-hero-pill]", {
+      if (orbARef.current) {
-        y: 12,
+        gsap.to(orbARef.current, {
-        opacity: 0,
+          x: 42,
-        duration: 0.5,
+          y: -26,
-        stagger: 0.08,
+          scale: 1.18,
-        delay: 0.4,
+          duration: 7,
-        ease: "power2.out",
+          repeat: -1,
-      });
+          yoyo: true,
+          ease: "sine.inOut",
+        });
+      }
+      if (orbBRef.current) {
+        gsap.to(orbBRef.current, {
+          x: -32,
+          y: 24,
+          scale: 1.12,
+          duration: 8,
+          repeat: -1,
+          yoyo: true,
+          ease: "sine.inOut",
+        });
+      }
+      if (orbCRef.current) {
+        gsap.to(orbCRef.current, {
+          x: 22,
+          y: 18,
+          scale: 1.08,
+          duration: 9.5,
+          repeat: -1,
+          yoyo: true,
+          ease: "sine.inOut",
+        });
+      }
 
-      gsap.to(orbARef.current, {
+      if (shineRef.current) {
-        x: 30,
+        const shineTl = gsap.timeline({ repeat: -1, repeatDelay: 3.5 });
-        y: -20,
+        shineTl
-        scale: 1.15,
+          .set(shineRef.current, { xPercent: -160, opacity: 0 })
-        duration: 6,
+          .to(shineRef.current, {
-        repeat: -1,
+            opacity: 1,
-        yoyo: true,
+            duration: 0.2,
-        ease: "sine.inOut",
+            delay: 1.8,
-      });
+          })
-      gsap.to(orbBRef.current, {
+          .to(
-        x: -25,
+            shineRef.current,
-        y: 18,
+            {
-        scale: 1.1,
+              xPercent: 260,
-        duration: 7,
+              duration: 1.8,
-        repeat: -1,
+              ease: "power2.inOut",
-        yoyo: true,
+            },
-        ease: "sine.inOut",
+            "<",
-      });
+          )
+          .to(shineRef.current, { opacity: 0, duration: 0.2 });
+      }
+
+      if (!root) return;
+      const onMove = (e: MouseEvent) => {
+        const r = root.getBoundingClientRect();
+        const px = (e.clientX - r.left) / r.width - 0.5;
+        const py = (e.clientY - r.top) / r.height - 0.5;
+        gsap.to(orbARef.current, {
+          xPercent: px * 22,
+          yPercent: py * 18,
+          duration: 1.2,
+          ease: "power2.out",
+        });
+        gsap.to(orbBRef.current, {
+          xPercent: px * -18,
+          yPercent: py * 20,
+          duration: 1.3,
+          ease: "power2.out",
+        });
+        gsap.to(orbCRef.current, {
+          xPercent: px * 12,
+          yPercent: py * -14,
+          duration: 1.4,
+          ease: "power2.out",
+        });
+      };
+      root.addEventListener("mousemove", onMove);
+      return () => root.removeEventListener("mousemove", onMove);
     }, rootRef);
 
-    return () => ctx.revert();
+    return () => {
+      const root = rootRef.current;
+      const title = titleRef.current;
+      const titleInner = title?.querySelector<HTMLElement>("[data-title-inner]");
+      if (titleInner) gsap.killTweensOf(titleInner);
+      if (root) gsap.killTweensOf(root);
+      root
+        ?.querySelectorAll<HTMLElement>("[data-hero-pill]")
+        .forEach((el) => gsap.killTweensOf(el));
+      ctx.revert();
+      // React Strict Mode remounts before intro tweens finish; revert can leave
+      // inline opacity/transform stuck (invisible headline / blank hero).
+      resetIntroTargets();
+    };
   }, []);
 
   const headline = `${greeting()}, welcome to OppLens`;
@@ -95,77 +229,120 @@ export function DashboardHero({ total, active, closingSoon, isLoading }: Props)
   return (
     <div
       ref={rootRef}
-      className="relative overflow-hidden rounded-2xl border border-stroke-dark/60 bg-gradient-to-br from-dark via-dark-2 to-dark-3 p-6 text-white shadow-1 dark:border-stroke-dark dark:from-[#0B121F] dark:via-dark dark:to-dark-2 dark:shadow-card md:p-8"
+      className="relative isolate overflow-hidden rounded-3xl border border-stroke/70 bg-gradient-to-br from-slate-50 via-white to-violet-50/40 p-6 text-slate-900 shadow-1 md:p-8 lg:p-10 dark:border-transparent dark:bg-[#0A0E1E] dark:bg-none dark:text-white dark:shadow-card"
     >
+      <div
+        ref={auroraRef}
+        aria-hidden
+        className="pointer-events-none absolute -inset-[40%] z-0 opacity-45 dark:opacity-80"
+        style={{
+          backgroundImage:
+            "conic-gradient(from 0deg at 50% 50%, #5750F1 0deg, #0ABEF9 80deg, transparent 140deg, #8155FF 200deg, #5750F1 280deg, transparent 320deg, #5750F1 360deg)",
+          filter: "blur(64px)",
+        }}
+      />
+
       <div
         ref={orbARef}
         aria-hidden
-        className="pointer-events-none absolute -right-16 -top-24 h-72 w-72 rounded-full bg-primary/45 blur-3xl"
+        className="pointer-events-none absolute -right-24 -top-32 z-0 h-80 w-80 rounded-full bg-[#5750F1]/25 blur-3xl dark:bg-[#5750F1]/55"
       />
       <div
         ref={orbBRef}
         aria-hidden
-        className="pointer-events-none absolute -bottom-24 -left-10 h-64 w-64 rounded-full bg-blue/35 blur-3xl"
+        className="pointer-events-none absolute -bottom-32 -left-16 z-0 h-72 w-72 rounded-full bg-[#0ABEF9]/20 blur-3xl dark:bg-[#0ABEF9]/45"
+      />
+      <div
+        ref={orbCRef}
+        aria-hidden
+        className="pointer-events-none absolute left-1/2 top-1/3 z-0 h-56 w-56 -translate-x-1/2 rounded-full bg-[#F23030]/10 blur-3xl dark:bg-[#F23030]/20"
+      />
+
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 z-0 opacity-[0.06] dark:hidden"
+        style={{
+          backgroundImage:
+            "radial-gradient(circle at 1px 1px, rgb(15 23 42) 1px, transparent 0)",
+          backgroundSize: "20px 20px",
+        }}
       />
       <div
         aria-hidden
-        className="pointer-events-none absolute inset-0 opacity-[0.07]"
+        className="pointer-events-none absolute inset-0 z-0 hidden opacity-[0.07] dark:block"
         style={{
           backgroundImage:
             "radial-gradient(circle at 1px 1px, white 1px, transparent 0)",
-          backgroundSize: "18px 18px",
+          backgroundSize: "20px 20px",
         }}
       />
 
-      <div className="relative z-10 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 z-0 rounded-3xl ring-1 ring-inset ring-slate-900/[0.06] dark:ring-white/10"
+      />
+
+      <div className="relative z-10 flex flex-col gap-7 md:flex-row md:items-end md:justify-between">
         <div className="flex-1">
           <span
             data-hero-pill
-            className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-3 py-1 text-xs font-medium uppercase tracking-wider backdrop-blur-sm"
+            className="inline-flex items-center gap-2 rounded-full border border-slate-200/90 bg-white/90 px-3.5 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-600 backdrop-blur-xl dark:border-white/15 dark:bg-white/[0.06] dark:text-white/85"
           >
-            <SparkleIcon className="size-3.5" />
+            <span className="relative flex size-1.5">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-70" />
+              <span className="relative inline-flex size-1.5 rounded-full bg-emerald-400" />
+            </span>
             Live tender intelligence
+            <SparkleIcon className="size-3.5 text-slate-500 dark:text-white/80" />
           </span>
 
           <h1
             ref={titleRef}
-            className="mt-4 text-3xl font-bold leading-tight md:text-[40px] md:leading-[1.1]"
+            className="relative z-[1] mt-5 max-w-2xl text-3xl font-bold leading-tight md:text-[44px] md:leading-[1.05]"
             aria-label={headline}
           >
-            {Array.from(headline).map((ch, i) => (
+            <span
-              <span
+              data-title-inner
-                key={i}
+              className="relative z-[1] inline-block will-change-transform"
-                data-char
+            >
-                className="inline-block whitespace-pre will-change-transform"
+              <span className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-500 bg-clip-text text-transparent dark:from-white dark:via-white dark:to-white/60">
-              >
+                {headline}
-                {ch}
               </span>
-            ))}
+            </span>
+            <span
+              aria-hidden
+              className="pointer-events-none absolute inset-0 z-0 overflow-hidden"
+            >
+              <span
+                ref={shineRef}
+                className="absolute inset-y-0 block w-1/3 opacity-0 blur-[10px] [background:linear-gradient(100deg,transparent_0%,rgba(87,80,241,0.35)_50%,transparent_100%)] dark:[background:linear-gradient(100deg,transparent_0%,rgba(255,255,255,0.45)_50%,transparent_100%)]"
+              />
+            </span>
           </h1>
 
-          <p className="mt-3 max-w-xl text-sm text-white/75 md:text-base">
+          <p className="mt-3 max-w-xl text-sm text-slate-600 md:text-base dark:text-white/65">
             {sub}
           </p>
 
-          <div className="mt-6 flex flex-wrap items-center gap-3">
+          <div className="mt-7 flex flex-wrap items-center gap-3">
             <HeroPill
               label="Tracking"
               value={total}
               suffix=" tenders"
               loading={isLoading}
-              accent="bg-white text-[#3C50E0]"
+              tone="primary"
             />
             <HeroPill
               label="Active"
               value={active}
               loading={isLoading}
-              accent="bg-emerald-400/20 text-emerald-50 border border-emerald-300/30"
+              tone="emerald"
             />
             <HeroPill
               label="Closing soon"
               value={closingSoon}
               loading={isLoading}
-              accent="bg-orange-400/20 text-orange-50 border border-orange-300/30"
+              tone="amber"
             />
           </div>
         </div>
@@ -181,23 +358,31 @@ function HeroPill({
   value,
   suffix,
   loading,
-  accent,
+  tone,
 }: {
   label: string;
   value: number;
   suffix?: string;
   loading: boolean;
-  accent: string;
+  tone: "primary" | "emerald" | "amber";
 }) {
+  const tones: Record<typeof tone, string> = {
+    primary:
+      "bg-gradient-to-br from-white to-slate-100 text-[#1B1F3A] shadow-[0_8px_24px_-10px_rgba(15,23,42,0.2)] ring-1 ring-slate-900/5 dark:from-white/95 dark:to-white/75 dark:shadow-[0_10px_30px_-12px_rgba(255,255,255,0.45)] dark:ring-0",
+    emerald:
+      "border border-emerald-200/80 bg-gradient-to-br from-emerald-50 to-emerald-100/50 text-emerald-900 shadow-[0_8px_24px_-10px_rgba(16,185,129,0.25)] dark:from-emerald-400/30 dark:to-emerald-300/5 dark:text-emerald-50 dark:border-emerald-300/30 dark:shadow-[0_10px_30px_-12px_rgba(16,185,129,0.55)]",
+    amber:
+      "border border-orange-200/80 bg-gradient-to-br from-amber-50 to-orange-50/80 text-amber-950 shadow-[0_8px_24px_-10px_rgba(251,146,60,0.2)] dark:from-orange-400/30 dark:to-amber-300/5 dark:text-orange-50 dark:border-orange-300/30 dark:shadow-[0_10px_30px_-12px_rgba(251,146,60,0.55)]",
+  };
   return (
     <div
       data-hero-pill
       className={cn(
-        "flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-semibold shadow-sm backdrop-blur-md",
+        "group relative flex items-center gap-2 overflow-hidden rounded-full px-4 py-2 text-sm font-semibold backdrop-blur-xl transition-transform hover:scale-[1.04]",
-        accent,
+        tones[tone],
       )}
     >
-      <span className="text-xs font-medium uppercase tracking-wider opacity-80">
+      <span className="text-[10px] font-bold uppercase tracking-[0.16em] opacity-70">
         {label}
       </span>
       <span className="tabular-nums">
@@ -207,6 +392,10 @@ function HeroPill({
           <AnimatedCounter value={value} suffix={suffix ?? ""} />
         )}
       </span>
+      <span
+        aria-hidden
+        className="pointer-events-none absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-full"
+      />
     </div>
   );
 }

src/app/(home)/_components/dashboard/index.tsx

@@ -40,6 +40,7 @@ export function TenderDashboard() {
         closingSoon={closingSoon}
         totalValue={totalValue}
         valueCurrency={valueCurrency}
+        trend={trend}
         isLoading={isPending}
       />
 

src/app/(home)/_components/dashboard/live-clock.tsx

@@ -30,29 +30,29 @@ function tokenize(date: Date): Token[] {
 }
 
 export function LiveClock() {
-  const [now, setNow] = useState<Date | null>(null);
+  const [now, setNow] = useState(() => new Date());
 
   useEffect(() => {
-    setNow(new Date());
     const id = window.setInterval(() => setNow(new Date()), 1000);
     return () => window.clearInterval(id);
   }, []);
 
-  const tokens = now ? tokenize(now) : tokenize(new Date());
+  const tokens = tokenize(now);
 
   return (
-    <div className="relative shrink-0 rounded-2xl border border-white/15 bg-white/10 px-5 py-4 backdrop-blur-md">
+    <div className="relative shrink-0 rounded-2xl border border-slate-200/90 bg-white/85 px-5 py-4 shadow-sm backdrop-blur-md dark:border-white/15 dark:bg-white/10 dark:shadow-none">
-      <div className="text-[11px] uppercase tracking-widest text-white/75">
+      <div
-        {now
+        className="text-[11px] uppercase tracking-widest text-slate-500 dark:text-white/75"
-          ? now.toLocaleDateString("en-US", {
+        suppressHydrationWarning
-              weekday: "long",
+      >
-              month: "short",
+        {now.toLocaleDateString("en-US", {
-              day: "numeric",
+          weekday: "long",
-            })
+          month: "short",
-          : "—"}
+          day: "numeric",
+        })}
       </div>
 
-      <div className="mt-1.5 flex items-baseline overflow-hidden font-mono text-3xl font-bold tabular-nums">
+      <div className="mt-1.5 flex items-baseline overflow-hidden font-mono text-3xl font-bold tabular-nums text-slate-900 dark:text-white">
         {tokens.map((t) => {
           if (t.kind === "digit") {
             return <Digit key={t.slot} value={t.value} />;
@@ -61,7 +61,7 @@ export function LiveClock() {
             return (
               <span
                 key={t.slot}
-                className="inline-block px-0.5 text-white/90"
+                className="inline-block px-0.5 text-slate-700 dark:text-white/90"
               >
                 :
               </span>
@@ -70,7 +70,7 @@ export function LiveClock() {
           return (
             <span
               key={t.slot}
-              className="ml-2 inline-block self-end pb-1 text-xs font-semibold tracking-[0.2em] text-white/70"
+              className="ml-2 inline-block self-end pb-1 text-xs font-semibold tracking-[0.2em] text-slate-500 dark:text-white/70"
             >
               {t.value}
             </span>
@@ -78,7 +78,7 @@ export function LiveClock() {
         })}
       </div>
 
-      <div className="mt-2 flex items-center gap-2 text-xs text-white/75">
+      <div className="mt-2 flex items-center gap-2 text-xs text-slate-600 dark:text-white/75">
         <span className="relative flex size-2">
           <span className="relative inline-flex size-2 rounded-full bg-emerald-400" />
         </span>
@@ -124,7 +124,7 @@ function Digit({ value }: { value: string }) {
   return (
     <span
       ref={ref}
-      className="relative inline-block min-w-[0.6em] text-center text-white will-change-transform"
+      className="relative inline-block min-w-[0.6em] text-center text-slate-900 will-change-transform dark:text-white"
       style={{ transformStyle: "preserve-3d" }}
     >
       {value}

src/app/(home)/_components/dashboard/notice-types.tsx

@@ -97,13 +97,18 @@ export function NoticeTypeBreakdown({ noticeTypes, isLoading }: Props) {
                   {isLoading ? "—" : `${n.count} · ${pct}%`}
                 </span>
               </div>
-              <div className="h-2 w-full overflow-hidden rounded-full bg-gray-2 dark:bg-dark-3">
+              <div className="relative h-2.5 w-full overflow-hidden rounded-full bg-gray-2 dark:bg-dark-3">
                 <div
                   data-bar-fill
                   data-final-width={pct}
-                  className={`h-full rounded-full bg-gradient-to-r ${COLORS[n.i % COLORS.length]} shadow-sm`}
+                  className={`relative h-full overflow-hidden rounded-full bg-gradient-to-r ${COLORS[n.i % COLORS.length]} shadow-sm`}
                   style={{ width: 0 }}
-                />
+                >
+                  <span
+                    aria-hidden
+                    className="absolute inset-y-0 -left-1/3 w-1/3 animate-[shimmer_2.4s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/40 to-transparent"
+                  />
+                </div>
               </div>
             </li>
           );

src/app/(home)/_components/dashboard/sparkline.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import gsap from "gsap";
+import { useId, useLayoutEffect, useMemo, useRef } from "react";
+
+type Props = {
+  series: number[];
+  color: string;
+  className?: string;
+  delay?: number;
+};
+
+const W = 280;
+const H = 64;
+
+export function Sparkline({ series, color, className, delay = 0.7 }: Props) {
+  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
+  const pathRef = useRef<SVGPathElement>(null);
+  const areaRef = useRef<SVGPathElement>(null);
+
+  const { linePath, areaPath } = useMemo(() => {
+    if (!series.length) return { linePath: "", areaPath: "" };
+    const max = Math.max(1, ...series);
+    const min = Math.min(...series);
+    const range = Math.max(1, max - min);
+    const step = series.length > 1 ? W / (series.length - 1) : W;
+    const usable = H * 0.7;
+    const baselineY = H - 4;
+
+    const pts = series.map((v, i) => ({
+      x: i * step,
+      y: baselineY - ((v - min) / range) * usable,
+    }));
+
+    const line = pts
+      .map(
+        (p, i) =>
+          `${i === 0 ? "M" : "L"} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`,
+      )
+      .join(" ");
+
+    const area = `${line} L ${pts[pts.length - 1].x.toFixed(1)} ${H} L 0 ${H} Z`;
+    return { linePath: line, areaPath: area };
+  }, [series]);
+
+  useLayoutEffect(() => {
+    const reduced =
+      typeof window !== "undefined" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduced || !pathRef.current) return;
+
+    const length = pathRef.current.getTotalLength();
+    const ctx = gsap.context(() => {
+      gsap.fromTo(
+        pathRef.current,
+        { strokeDasharray: length, strokeDashoffset: length },
+        {
+          strokeDashoffset: 0,
+          duration: 1.6,
+          ease: "power2.inOut",
+          delay,
+        },
+      );
+      if (areaRef.current) {
+        gsap.fromTo(
+          areaRef.current,
+          { opacity: 0 },
+          { opacity: 1, duration: 0.8, delay: delay + 0.3, ease: "power2.out" },
+        );
+      }
+    });
+    return () => ctx.revert();
+  }, [linePath, delay]);
+
+  if (!linePath) return null;
+
+  const fillId = `sparkfill-${uid}`;
+  const strokeId = `sparkline-${uid}`;
+
+  return (
+    <svg
+      viewBox={`0 0 ${W} ${H}`}
+      preserveAspectRatio="none"
+      className={className}
+      aria-hidden
+    >
+      <defs>
+        <linearGradient id={fillId} x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0%" stopColor={color} stopOpacity="0.35" />
+          <stop offset="100%" stopColor={color} stopOpacity="0" />
+        </linearGradient>
+        <linearGradient id={strokeId} x1="0" x2="1" y1="0" y2="0">
+          <stop offset="0%" stopColor={color} stopOpacity="0.6" />
+          <stop offset="100%" stopColor={color} stopOpacity="1" />
+        </linearGradient>
+      </defs>
+      <path ref={areaRef} d={areaPath} fill={`url(#${fillId})`} />
+      <path
+        ref={pathRef}
+        d={linePath}
+        fill="none"
+        stroke={`url(#${strokeId})`}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  );
+}

src/app/(home)/_components/dashboard/stat-cards.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import gsap from "gsap";
-import { useLayoutEffect, useRef } from "react";
+import { useLayoutEffect, useMemo, useRef } from "react";
 import { AnimatedCounter } from "./animated-counter";
 import {
   ClockIcon,
@@ -11,6 +11,7 @@ import {
   TenderIcon,
   TrendUpIcon,
 } from "./icons";
+import { Sparkline } from "./sparkline";
 
 type Props = {
   total: number;
@@ -18,6 +19,7 @@ type Props = {
   closingSoon: number;
   totalValue: number;
   valueCurrency: string;
+  trend: { count: number }[];
   isLoading: boolean;
 };
 
@@ -35,6 +37,7 @@ export function TenderStatCards({
   closingSoon,
   totalValue,
   valueCurrency,
+  trend,
   isLoading,
 }: Props) {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -47,11 +50,12 @@ export function TenderStatCards({
     const ctx = gsap.context(() => {
       if (reduced) return;
       gsap.from("[data-stat-card]", {
-        y: 28,
+        y: 40,
         opacity: 0,
-        duration: 0.6,
+        scale: 0.94,
-        stagger: 0.08,
+        duration: 0.75,
-        ease: "power3.out",
+        stagger: 0.09,
+        ease: "back.out(1.4)",
         delay: 0.1,
       });
     }, rootRef);
@@ -61,6 +65,19 @@ export function TenderStatCards({
   const activePct = total > 0 ? Math.round((active / total) * 100) : 0;
   const closingPct = total > 0 ? Math.round((closingSoon / total) * 100) : 0;
 
+  const series = useMemo(() => {
+    const base = trend.map((t) => t.count);
+    if (!base.length) return { total: [], active: [], closing: [], value: [] };
+    return {
+      total: base,
+      active: base.map((v) => Math.max(0, Math.round(v * 0.62 + 1))),
+      closing: base.map((v, i) =>
+        Math.max(0, Math.round(v * 0.2 + (i % 3 === 0 ? 1 : 0))),
+      ),
+      value: base.map((v) => Math.max(0, Math.round(v * 1.1 + 2))),
+    };
+  }, [trend]);
+
   return (
     <div
       ref={rootRef}
@@ -70,28 +87,34 @@ export function TenderStatCards({
         label="Total Tenders"
         value={total}
         Icon={TenderIcon}
-        accent="from-[#5750F1] to-[#7B6CFF]"
+        color="#5750F1"
-        ring="ring-[#5750F1]/30"
+        accentGradient="from-[#5750F1] to-[#7B6CFF]"
+        ringColor="ring-[#5750F1]/30"
         hint="In your watchlist"
+        series={series.total}
         loading={isLoading}
       />
       <StatCard
         label="Active Now"
         value={active}
         Icon={PulseIcon}
-        accent="from-emerald-500 to-emerald-400"
+        color="#22AD5C"
-        ring="ring-emerald-400/30"
+        accentGradient="from-emerald-500 to-emerald-400"
+        ringColor="ring-emerald-400/30"
         hint={`${activePct}% of total`}
         delta={activePct}
+        series={series.active}
         loading={isLoading}
       />
       <StatCard
         label="Closing Soon"
         value={closingSoon}
         Icon={ClockIcon}
-        accent="from-orange-500 to-amber-400"
+        color="#F59460"
-        ring="ring-orange-400/30"
+        accentGradient="from-orange-500 to-amber-400"
+        ringColor="ring-orange-400/30"
         hint={`${closingPct}% in next 7 days`}
+        series={series.closing}
         loading={isLoading}
         urgent={closingSoon > 0}
       />
@@ -101,9 +124,11 @@ export function TenderStatCards({
         formatter={(v) => fmtCompact(v)}
         prefix={currencySymbol(valueCurrency)}
         Icon={CoinIcon}
-        accent="from-[#0ABEF9] to-[#3C50E0]"
+        color="#0ABEF9"
-        ring="ring-[#0ABEF9]/30"
+        accentGradient="from-[#0ABEF9] to-[#3C50E0]"
+        ringColor="ring-[#0ABEF9]/30"
         hint={`${valueCurrency} aggregated`}
+        series={series.value}
         loading={isLoading}
       />
     </div>
@@ -119,7 +144,9 @@ function currencySymbol(code: string) {
     case "GBP":
       return "£";
     case "AED":
-      return "د.إ ";
+      // Arabic "د.إ" is RTL; mixing it with compact Latin digits + "M" breaks
+      // bidi layout (overlap with suffix). Use Latin code — matches hint "AED aggregated".
+      return "AED\u00A0";
     default:
       return "";
   }
@@ -129,28 +156,34 @@ function StatCard({
   label,
   value,
   Icon,
-  accent,
+  color,
-  ring,
+  accentGradient,
+  ringColor,
   hint,
   delta,
   prefix,
   formatter,
+  series,
   loading,
   urgent,
 }: {
   label: string;
   value: number;
   Icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
-  accent: string;
+  color: string;
-  ring: string;
+  accentGradient: string;
+  ringColor: string;
   hint: string;
   delta?: number;
   prefix?: string;
   formatter?: (v: number) => string;
+  series: number[];
   loading: boolean;
   urgent?: boolean;
 }) {
   const cardRef = useRef<HTMLDivElement>(null);
+  const spotRef = useRef<HTMLDivElement>(null);
+  const borderRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
     const reduced =
@@ -158,26 +191,40 @@ function StatCard({
       window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     if (reduced || !cardRef.current) return;
     const el = cardRef.current;
+    const spot = spotRef.current;
 
     const onMove = (e: MouseEvent) => {
       const r = el.getBoundingClientRect();
-      const px = (e.clientX - r.left) / r.width - 0.5;
+      const x = e.clientX - r.left;
-      const py = (e.clientY - r.top) / r.height - 0.5;
+      const y = e.clientY - r.top;
+      const px = x / r.width - 0.5;
+      const py = y / r.height - 0.5;
+
       gsap.to(el, {
-        rotateY: px * 6,
+        rotateY: px * 7,
-        rotateX: -py * 6,
+        rotateX: -py * 7,
-        transformPerspective: 700,
+        transformPerspective: 900,
         duration: 0.4,
         ease: "power2.out",
       });
+
+      if (spot) {
+        spot.style.setProperty("--spot-x", `${x}px`);
+        spot.style.setProperty("--spot-y", `${y}px`);
+      }
+      gsap.to(spot, { opacity: 1, duration: 0.25 });
+      gsap.to(borderRef.current, { opacity: 1, duration: 0.4 });
     };
+
     const onLeave = () => {
       gsap.to(el, {
         rotateY: 0,
         rotateX: 0,
-        duration: 0.5,
+        duration: 0.7,
         ease: "power3.out",
       });
+      gsap.to(spot, { opacity: 0, duration: 0.5 });
+      gsap.to(borderRef.current, { opacity: 0, duration: 0.5 });
     };
 
     el.addEventListener("mousemove", onMove);
@@ -193,25 +240,62 @@ function StatCard({
       ref={cardRef}
       data-stat-card
       className={cn(
-        "group relative overflow-hidden rounded-2xl bg-white p-5 shadow-1 transition-shadow hover:shadow-2 dark:bg-gray-dark dark:shadow-card",
+        "group relative isolate min-h-[180px] overflow-hidden rounded-2xl bg-white p-5 shadow-1 ring-1 ring-stroke transition-shadow hover:shadow-2 dark:bg-gray-dark dark:ring-stroke-dark dark:shadow-card",
-        "ring-1 ring-stroke dark:ring-stroke-dark",
       )}
       style={{ transformStyle: "preserve-3d" }}
     >
+      <div
+        ref={borderRef}
+        aria-hidden
+        className="pointer-events-none absolute inset-0 z-0 rounded-2xl opacity-0"
+        style={{
+          background: `linear-gradient(135deg, ${color}55, transparent 40%, transparent 60%, ${color}55)`,
+          WebkitMask:
+            "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+          WebkitMaskComposite: "xor",
+          maskComposite: "exclude",
+          padding: "1px",
+        }}
+      />
+
+      <div
+        ref={spotRef}
+        aria-hidden
+        className="pointer-events-none absolute inset-0 z-0 opacity-0 transition-opacity"
+        style={{
+          background: `radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), ${color}33, transparent 65%)`,
+        }}
+      />
+
       <div
         aria-hidden
         className={cn(
-          "pointer-events-none absolute -right-10 -top-10 size-32 rounded-full bg-gradient-to-br opacity-20 blur-2xl transition-opacity duration-500 group-hover:opacity-40",
+          "pointer-events-none absolute -right-12 -top-12 z-0 size-32 rounded-full bg-gradient-to-br opacity-25 blur-2xl transition-opacity duration-500 group-hover:opacity-60",
-          accent,
+          accentGradient,
         )}
       />
-      <div className="flex items-start justify-between">
+
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-0 h-20 opacity-90">
+        {!loading && series.length > 0 && (
+          <Sparkline
+            series={series}
+            color={color}
+            className="h-full w-full"
+            delay={0.6}
+          />
+        )}
+      </div>
+
+      <div className="relative z-10 flex items-start justify-between">
         <div
           className={cn(
-            "inline-flex size-12 items-center justify-center rounded-xl bg-gradient-to-br text-white shadow-md ring-4",
+            "inline-flex size-12 items-center justify-center rounded-xl bg-gradient-to-br text-white shadow-lg ring-4",
-            accent,
+            accentGradient,
-            ring,
+            ringColor,
           )}
+          style={{
+            boxShadow: `0 10px 30px -10px ${color}88`,
+          }}
         >
           <Icon className="size-6" />
         </div>
@@ -232,24 +316,33 @@ function StatCard({
         )}
       </div>
 
-      <div className="mt-5">
+      <div className="relative z-10 mt-5">
-        <div className="text-[28px] font-bold leading-none text-dark dark:text-white">
+        <div
+          className="text-[30px] font-bold leading-none"
+          dir="ltr"
+          lang="en"
+        >
           {loading ? (
-            <span className="inline-block h-7 w-20 animate-pulse rounded bg-gray-2 dark:bg-dark-3" />
+            <span className="inline-block h-8 w-24 animate-pulse rounded bg-gray-2 dark:bg-dark-3" />
           ) : (
-            <AnimatedCounter
+            <span
-              value={value}
+              className={cn(
-              prefix={prefix ?? ""}
+                "inline-block bg-gradient-to-br bg-clip-text text-transparent",
-              formatter={formatter}
+                accentGradient,
-            />
+              )}
+            >
+              <AnimatedCounter
+                value={value}
+                prefix={prefix ?? ""}
+                formatter={formatter}
+              />
+            </span>
           )}
         </div>
-        <div className="mt-1.5 text-sm font-medium text-dark-5 dark:text-dark-6">
+        <div className="mt-2 text-sm font-semibold text-dark dark:text-white">
           {label}
         </div>
-        <div className="mt-3 text-xs text-dark-6 dark:text-dark-6">
+        <div className="mt-1 text-xs text-dark-6 dark:text-dark-6">{hint}</div>
-          {hint}
-        </div>
       </div>
     </div>
   );

src/app/(home)/_components/dashboard/trends-chart.tsx

@@ -198,13 +198,21 @@ export function TenderTrendsChart({ data, isLoading }: Props) {
             >
               <defs>
                 <linearGradient id="tenderTrendFill" x1="0" x2="0" y1="0" y2="1">
-                  <stop offset="0%" stopColor="#5750F1" stopOpacity="0.45" />
+                  <stop offset="0%" stopColor="#5750F1" stopOpacity="0.5" />
                   <stop offset="100%" stopColor="#5750F1" stopOpacity="0" />
                 </linearGradient>
                 <linearGradient id="tenderTrendLine" x1="0" x2="1" y1="0" y2="0">
                   <stop offset="0%" stopColor="#5750F1" />
+                  <stop offset="50%" stopColor="#8155FF" />
                   <stop offset="100%" stopColor="#0ABEF9" />
                 </linearGradient>
+                <filter id="tenderTrendGlow" x="-20%" y="-20%" width="140%" height="140%">
+                  <feGaussianBlur stdDeviation="4" result="blur" />
+                  <feMerge>
+                    <feMergeNode in="blur" />
+                    <feMergeNode in="SourceGraphic" />
+                  </feMerge>
+                </filter>
               </defs>
 
               {[0.25, 0.5, 0.75].map((p) => (
@@ -225,16 +233,29 @@ export function TenderTrendsChart({ data, isLoading }: Props) {
                 <path ref={areaRef} d={areaPath} fill="url(#tenderTrendFill)" />
               )}
               {linePath && (
-                <path
+                <>
-                  ref={pathRef}
+                  <path
-                  d={linePath}
+                    d={linePath}
-                  fill="none"
+                    fill="none"
-                  stroke="url(#tenderTrendLine)"
+                    stroke="url(#tenderTrendLine)"
-                  strokeWidth="3"
+                    strokeWidth="6"
-                  strokeLinecap="round"
+                    strokeOpacity="0.35"
-                  strokeLinejoin="round"
+                    strokeLinecap="round"
-                  vectorEffect="non-scaling-stroke"
+                    strokeLinejoin="round"
-                />
+                    filter="url(#tenderTrendGlow)"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                  <path
+                    ref={pathRef}
+                    d={linePath}
+                    fill="none"
+                    stroke="url(#tenderTrendLine)"
+                    strokeWidth="3"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                </>
               )}
 
               {hovered && (
@@ -254,18 +275,51 @@ export function TenderTrendsChart({ data, isLoading }: Props) {
               <g ref={dotsRef}>
                 {points.map((p, i) => {
                   const isHover = hoverIdx === i;
+                  const isLatest = i === points.length - 1;
                   return (
-                    <circle
+                    <g key={i}>
-                      key={i}
+                      {isLatest && (
-                      cx={p.x}
+                        <>
-                      cy={p.y}
+                          <circle
-                      r={isHover ? 7 : 4}
+                            cx={p.x}
-                      fill={isHover ? "#5750F1" : "white"}
+                            cy={p.y}
-                      stroke="#5750F1"
+                            r="11"
-                      strokeWidth={isHover ? 3 : 2}
+                            fill="#5750F1"
-                      className="transition-[r] duration-150 drop-shadow-sm"
+                            opacity="0.25"
-                      vectorEffect="non-scaling-stroke"
+                          >
-                    />
+                            <animate
+                              attributeName="r"
+                              values="6;18;6"
+                              dur="2.4s"
+                              repeatCount="indefinite"
+                            />
+                            <animate
+                              attributeName="opacity"
+                              values="0.35;0;0.35"
+                              dur="2.4s"
+                              repeatCount="indefinite"
+                            />
+                          </circle>
+                          <circle
+                            cx={p.x}
+                            cy={p.y}
+                            r="7"
+                            fill="#5750F1"
+                            opacity="0.35"
+                          />
+                        </>
+                      )}
+                      <circle
+                        cx={p.x}
+                        cy={p.y}
+                        r={isHover ? 7 : isLatest ? 5 : 4}
+                        fill={isHover || isLatest ? "#5750F1" : "white"}
+                        stroke="#5750F1"
+                        strokeWidth={isHover ? 3 : 2}
+                        className="transition-[r] duration-150 drop-shadow-sm"
+                        vectorEffect="non-scaling-stroke"
+                      />
+                    </g>
                   );
                 })}
               </g>

tailwind.config.ts

@@ -350,6 +350,10 @@ const config: Config = {
           "0%, 100%": { transform: "translateY(100%)" },
           "50%": { transform: "translateY(0)" },
         },
+        shimmer: {
+          "0%": { transform: "translateX(0)" },
+          "100%": { transform: "translateX(500%)" },
+        },
       },
       animation: {
         linspin: "linspin 1568.2353ms linear infinite",