feat: add animated number transitions to dashboard stats

Numbers smoothly count up/down when switching date ranges,
applying filters, or as real-time visitor count changes.
Uses framer-motion useSpring for natural spring physics.

components/dashboard/Chart.tsx

@@ -10,6 +10,7 @@ import { Select, DownloadIcon, PlusIcon, XIcon } from '@ciphera-net/ui'
 import { Checkbox } from '@ciphera-net/ui'
 import { ArrowUpRight, ArrowDownRight } from '@phosphor-icons/react'
 import { motion } from 'framer-motion'
+import { AnimatedNumber } from '@/components/ui/animated-number'
 import { cn } from '@/lib/utils'
 import { formatTime, formatDateShort, formatDate } from '@/lib/utils/formatDate'
 
@@ -350,7 +351,7 @@ export default function Chart({
               >
                 <div className={cn('text-[10px] font-semibold uppercase tracking-widest mb-2', metric === m.key ? 'text-brand-orange' : 'text-neutral-400 dark:text-neutral-500')}>{m.label}</div>
                 <div className="flex items-baseline gap-2">
-                  <span className="text-2xl font-bold text-neutral-900 dark:text-white">{m.format(m.value)}</span>
+                  <AnimatedNumber value={m.value} format={m.format} className="text-2xl font-bold text-neutral-900 dark:text-white" />
                   {m.change !== null && (
                     <span className={cn('flex items-center gap-0.5 text-sm font-semibold', m.isPositive ? 'text-[#10B981]' : 'text-[#EF4444]')}>
                       {m.isPositive ? <ArrowUpRight weight="bold" className="size-3.5" /> : <ArrowDownRight weight="bold" className="size-3.5" />}

components/dashboard/RealtimeVisitors.tsx

@@ -1,3 +1,7 @@
+'use client'
+
+import { AnimatedNumber } from '@/components/ui/animated-number'
+
 interface RealtimeVisitorsProps {
   count: number
 }
@@ -14,7 +18,7 @@ export default function RealtimeVisitors({ count }: RealtimeVisitorsProps) {
         <div className="h-2 w-2 bg-green-500 rounded-full animate-pulse"></div>
       </div>
       <div className="text-3xl font-bold text-neutral-900 dark:text-white">
-        {count}
+        <AnimatedNumber value={count} format={(v) => v.toLocaleString()} />
       </div>
     </div>
   )

components/ui/animated-number.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { useMotionValue, useSpring, useTransform, motion } from 'framer-motion'
+
+interface AnimatedNumberProps {
+  value: number
+  format: (v: number) => string
+  className?: string
+}
+
+export function AnimatedNumber({ value, format, className }: AnimatedNumberProps) {
+  const motionValue = useMotionValue(value)
+  const spring = useSpring(motionValue, { stiffness: 120, damping: 20, mass: 0.5 })
+  const display = useTransform(spring, (v) => format(Math.round(v)))
+  const isFirst = useRef(true)
+
+  useEffect(() => {
+    if (isFirst.current) {
+      // Skip animation on initial render — jump straight to value
+      motionValue.jump(value)
+      isFirst.current = false
+    } else {
+      motionValue.set(value)
+    }
+  }, [value, motionValue])
+
+  return <motion.span className={className}>{display}</motion.span>
+}