Apax 3 - feature/PoR: Live Security Stream & Dynamic Charts

client/app/globals.css

@@ -116,7 +116,6 @@
 @layer base {
   * {
     @apply border-border outline-ring/50;
-
     /* Global scrollbar for Firefox */
     scrollbar-width: thin;
     scrollbar-color: rgba(212, 175, 55, 0.6) #0A0A0A;
@@ -132,6 +131,8 @@
 
     /* 2% Noise texture - De-digitalizing */
     position: relative;
+
+
   }
 
   body::before {

client/components/charts/metal-price-history.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import React, { useMemo } from 'react'
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
+import { useAPAXStore } from '@/lib/store'
+
+// mock data generate
+const generateHistoricalData = (currentPrice: number) => {
+  return [
+    { time: '08:00', price: currentPrice * 0.982 },
+    { time: '10:00', price: currentPrice * 0.988 },
+    { time: '12:00', price: currentPrice * 0.995 },
+    { time: '14:00', price: currentPrice * 0.991 },
+    { time: '16:00', price: currentPrice * 1.008 },
+    { time: '18:00', price: currentPrice * 1.003 },
+    { time: '20:00', price: currentPrice }, 
+  ]
+}
+
+export function MetalPriceHistoryChart() {
+
+  //global state access
+  const { metalPrices } = useAPAXStore()
+
+  const chartData = useMemo(() => 
+    generateHistoricalData(metalPrices.gold), 
+  [metalPrices.gold])
+
+  //chart
+  return (
+    <div className="w-full h-80 bg-card/50 border border-border rounded-xl p-4 institutional-shadow overflow-hidden relative">
+      <div className="absolute inset-0 mesh-gradient-gold opacity-30 pointer-events-none" />
+
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+          <defs>
+            <linearGradient id="goldGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#D4AF37" stopOpacity={0.25} />
+              <stop offset="95%" stopColor="#D4AF37" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+
+          <CartesianGrid 
+            strokeDasharray="3 3" 
+            stroke="var(--border)" 
+            vertical={false} 
+            opacity={0.4} 
+          />
+
+          <XAxis 
+            dataKey="time" 
+            stroke="var(--muted-foreground)" 
+            fontSize={10} 
+            tickLine={false} 
+            axisLine={false} 
+            dy={10}
+            className="font-vault opacity-60"
+          />
+
+          <YAxis hide domain={['dataMin * 0.95', 'dataMax * 1.05']} />
+
+          <Tooltip
+            cursor={{ 
+              stroke: '#D4AF37', 
+              strokeWidth: 1, 
+              strokeDasharray: '4 4',
+              opacity: 0.5
+            }}
+            content={({ active, payload }) => {
+              if (active && payload && payload.length) {
+                return (
+                  <div className="bg-[#0A0A0A]/90 backdrop-blur-md border border-[#D4AF37]/20 p-3 rounded-lg shadow-2xl">
+                    <p className="text-[10px] font-vault text-[#666666] uppercase tracking-widest mb-1">
+                      {payload[0].payload.time} UTC
+                    </p>
+                    <p className="text-sm font-vault font-medium text-[#D4AF37]">
+                      ${payload[0].value?.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+                    </p>
+                  </div>
+                );
+              }
+              return null;
+            }}
+          />
+
+          <Area 
+            type="monotone" 
+            dataKey="price" 
+            stroke="#D4AF37" 
+            strokeWidth={2} 
+            fill="url(#goldGradient)" 
+            isAnimationActive={true}
+            animationDuration={1500}
+            animationEasing="ease-out"
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

client/components/dashboard-layout.tsx

@@ -82,7 +82,7 @@ export function DashboardLayout({ children}: DashboardLayoutProps) {
         {/* Main Content Area */}
         <main className="flex-1 p-4 md:p-6 min-w-0">
           <AnimatePresence mode="wait" initial={true}>
-            <MotionWrapper  key={animationKey} stagger={true} className="w-full max-w-7xl mx-auto">
+            <MotionWrapper  key={animationKey} stagger={true} className="w-full max-w-7xl mx-auto min-h-full pb-10">
               {children}
             </MotionWrapper>
           </AnimatePresence>

client/components/shared/MotionWrapper.tsx

@@ -6,37 +6,41 @@ import { motion, HTMLMotionProps, Variants } from 'framer-motion';
 interface MotionWrapperProps extends HTMLMotionProps<'div'> {
   children: React.ReactNode;
   delay?: number;
-  stagger?: boolean; // prop for orchestration
+  stagger?: boolean;
 }
 
 const variants: Variants = {
-  initial: { opacity: 0, y: 20 },
+  initial: { 
+    opacity: 0, 
+    y: 20 
+  },
   animate: (delay: number) => ({
     opacity: 1,
     y: 0,
     transition: {
       delay,
-      duration: 0.4,
-      ease: [0.25, 0.1, 0.25, 1],
-      // if this is a container, stagger the children
+      duration: 0.5,
+      ease: [0.16, 1, 0.3, 1],
       staggerChildren: 0.05, 
       delayChildren: delay,
     }
   }),
   exit: { 
     opacity: 0, 
     y: -20, 
-    transition: { duration: 0.2 } 
+    transition: { duration: 0.3, ease: [0.16, 1, 0.3, 1] } 
   }
 };
 
-// item variant for children so they can inherit the stagger
 export const childVariants: Variants = {
   initial: { opacity: 0, y: 20 },
   animate: { 
     opacity: 1, 
     y: 0,
-    transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1] }
+    transition: { 
+      duration: 0.4, 
+      ease: [0.16, 1, 0.3, 1] 
+    }
   }
 };
 
@@ -55,12 +59,24 @@ export const MotionWrapper = ({
       exit="exit"
       custom={delay}
       className={className}
+      style={{ 
+        contain: 'paint', 
+        willChange: 'transform, opacity' 
+      }}
       {...props}
     >
       {stagger 
-        ? React.Children.map(children, (child) => (
-            <motion.div variants={childVariants}>{child}</motion.div>
-          ))
+        ? React.Children.map(children, (child) => {
+            if (!React.isValidElement(child)) return child;
+            return (
+              <motion.div 
+                variants={childVariants}
+                style={{ willChange: 'transform, opacity' }}
+              >
+                {child}
+              </motion.div>
+            );
+          })
         : children}
     </motion.div>
   );

client/components/shared/live-security-terminal.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+import React, { useEffect, useState, useRef, memo } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { AuditLog } from '@/lib/store'
+
+// scanning effect
+const ScanningBeam = () => (
+  <div className="w-full h-37.5 relative">
+    <div className="absolute inset-x-0 bottom-0 h-full bg-linear-to-t from-[#D4AF37]/20 via-[#D4AF37]/5 to-transparent" />
+    <div className="absolute bottom-0 w-full h-0.5 bg-[#D4AF37] shadow-[0_0_20px_2px_#D4AF37]">
+      <div className="absolute inset-0 bg-white/40 blur-[0.5px]" />
+      <div className="absolute left-1/2 -translate-x-1/2 w-[120%] h-px bg-[#D4AF37] opacity-20 blur-[3px]" />
+    </div>
+    <div className="absolute top-full inset-x-0 h-10 bg-linear-to-b from-[#D4AF37]/15 to-transparent blur-md" />
+  </div>
+)
+
+const AuditLogCard = memo(({ 
+  log, 
+  index, 
+  isLast, 
+  totalLogs,
+  beamDuration 
+}: { 
+  log: AuditLog; 
+  index: number; 
+  isLast: boolean;
+  totalLogs: number;
+  beamDuration: number;
+}) => {
+  //reveal sync
+  const revealDelay = (index / totalLogs) * beamDuration;
+
+  return (
+    <motion.div
+      layout 
+      initial={{ opacity: 0, x: -10 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ 
+        duration: 0.4, 
+        delay: revealDelay, 
+        ease: "easeOut" 
+      }}
+      className="flex items-start gap-4 p-4 rounded-lg border border-[#2A2A2A] bg-[#0A0A0A]/80 backdrop-blur-sm hover:border-[#D4AF37]/40 transition-colors"
+    >
+      <div className="relative">
+        <div className="h-3 w-3 rounded-full bg-[#D4AF37] shadow-[0_0_8px_rgba(212,175,55,0.4)]" />
+        {!isLast && (
+          <div className="absolute top-4 left-1/2 w-px h-10 -translate-x-1/2 bg-[#2A2A2A]" />
+        )}
+      </div>
+
+      <div className="flex-1 min-w-0 font-vault">
+        <div className="flex items-center justify-between mb-1">
+          <h4 className="text-sm text-[#E8E8E8] tracking-wide font-bold uppercase truncate">
+            [{log.event}]
+          </h4>
+          <span className="text-[10px] text-[#666666] font-mono tabular-nums whitespace-nowrap">
+            {new Date().toLocaleTimeString([], { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+          </span>
+        </div>
+        <p className="text-xs text-[#888888] mb-2 tracking-tight leading-relaxed line-clamp-2">
+          {log.details}
+        </p>
+        <div className="flex items-center gap-2 overflow-hidden">
+          <span className="text-[10px] text-[#444444] font-bold shrink-0">TX_SIG</span>
+          <code className="text-[10px] text-[#D4AF37] bg-[#1A1A1A] px-1.5 py-0.5 rounded-sm border border-[#2A2A2A] font-mono truncate">
+            {log.txHash}
+          </code>
+        </div>
+      </div>
+    </motion.div>
+  )
+})
+
+AuditLogCard.displayName = 'AuditLogCard'
+
+export function LiveSecurityTerminal({ logs }: { logs: AuditLog[] }) {
+  const [isBeamVisible, setIsBeamVisible] = useState(false)
+  const [beamKey, setBeamKey] = useState(0)
+  const displayLogs = logs.slice(-20);
+  const BEAM_DURATION = 4 // beam speed
+
+  useEffect(() => {
+    if (logs.length > 0) {
+      setIsBeamVisible(false);
+
+      const timer = setTimeout(() => {
+        setIsBeamVisible(true);
+        setBeamKey(prev => prev + 1);
+      }, 50); // small buffer to stabilize the engine
+
+      return () => clearTimeout(timer);
+    }
+  }, [logs.length]); // watch the count for new log renders
+
+  return (
+    <div className="relative w-full h-auto overflow-hidden bg-transparent min-h-100">
+      <AnimatePresence mode="wait"> 
+        {isBeamVisible && (
+          <motion.div
+            key={`beam-wrapper-${beamKey}`}
+            initial={{ y: "-10%" }}
+            animate={{ y: "110%" }}
+            exit={{ opacity: 0 }} 
+            transition={{ duration: BEAM_DURATION, ease: "linear" }}
+            onAnimationComplete={() => setIsBeamVisible(false)}
+            className="absolute inset-x-0 z-30 pointer-events-none"
+            style={{ height: '100%', willChange: 'transform' }}
+          >
+             <div className="sticky top-0 w-full">
+               <ScanningBeam />
+             </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <div className="space-y-3 relative z-10 pb-10">
+        {/* reverse column layout */}
+        <div className="flex flex-col gap-3">
+          {displayLogs.map((log, i) => (
+            <AuditLogCard 
+              key={log.id} 
+              log={log} 
+              index={i} 
+              isLast={i === displayLogs.length - 1}
+              totalLogs={displayLogs.length}
+              beamDuration={BEAM_DURATION}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

client/components/views/dashboard-view.tsx

@@ -1,5 +1,10 @@
-'use client'
+"use client";
 
+import Image from "next/image";
+import { PortfolioOverview } from "@/components/portfolio-overview";
+import { AssetAllocationChart } from "@/components/asset-allocation-chart";
+import { ShariaCertificationHub } from "@/components/sharia-certification-hub";
+import { MetalPriceHistoryChart } from "@/components/charts/metal-price-history";
 import Image from 'next/image'
 import { PortfolioOverview } from '@/components/portfolio-overview'
 import { AssetAllocationChart } from '@/components/asset-allocation-chart'
@@ -23,10 +28,14 @@ export function DashboardView() {
             <div key={i} className="flex gap-12 items-center">
               <div className="flex items-center gap-2">
                 <div className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
-                <span className="text-terminal-sm">Network Connectivity: 100%</span>
+                <span className="text-terminal-sm">
+                  Network Connectivity: 100%
+                </span>
               </div>
               <span className="text-terminal-sm">Latest Block: #8,421,093</span>
-              <span className="text-terminal-sm text-[#D4AF37]">Vault A1-X: Re-verified by Lead Auditor</span>
+              <span className="text-terminal-sm text-[#D4AF37]">
+                Vault A1-X: Re-verified by Lead Auditor
+              </span>
               <span className="text-terminal-sm">Last Synced: 2s ago</span>
             </div>
           ))}
@@ -52,6 +61,9 @@ export function DashboardView() {
         </div>
       </div>
 
+      {/* Metal price history chart */}
+      <MetalPriceHistoryChart />
+
       {/* Portfolio Overview Stats */}
       <PortfolioOverview />
 
@@ -88,5 +100,5 @@ export function DashboardView() {
 
 
     </div>
-  )
+  );
 }