📁 CEO Pulse Dashboard: Inside `src/app/dashboard/` – Code, Components & Real-Time Updates 🧬

🔐 Restricted Access

This content is private. Enter the password to continue.

❌ Incorrect password. Try again.

📁 What is the src/ Folder in the Health Trend Seller Project?

In software development, src/ stands for "source" – it is the folder that contains all the source code for your application...

📁 src/app/dashboard/ – CEO Pulse Dashboard

This folder holds the frontend UI components and logic for the main CEO Pulse dashboard — the central interface where users see real-time trends, strikes, workflows, and IPFS storage stats.

🧩 What Goes Inside dashboard/

File/Folder	Purpose
page.js	The main dashboard page component. Renders the CEO Pulse UI with live metrics, trend detection, and recent strikes.
layout.js	(Optional) Dashboard-specific layout wrapper (header, sidebar, navigation).
components/	Reusable UI components used only within the dashboard (e.g., metric cards, trend list, strike feed).
api/	(Optional) Server-side API routes for dashboard‑specific data (e.g., fetching real‑time stats).
loading.js	(Optional) Loading state component shown while dashboard data is being fetched.
error.js	(Optional) Error boundary component for dashboard‑specific errors.

🧠 Typical Structure

src/app/dashboard/
├── page.js # Main dashboard page (CEO Pulse)
├── layout.js # Dashboard layout wrapper
├── components/
│ ├── MetricCard.js # Individual metric card (trends, strikes, workflows, IPFS)
│ ├── TrendList.js # List of active trends with percentages
│ ├── StrikeFeed.js # Recent strikes with timestamps and amounts
│ ├── ChimeAlert.js # Real‑time chime notification component
│ └── RefreshButton.js # Manual refresh trigger
├── api/
│ └── stats/
│ └── route.js # API endpoint for dashboard stats (GET)
├── loading.js # Loading skeleton
└── error.js # Error fallback UI

🖥️ page.js – CEO Pulse Dashboard (Conceptual)

This is the main entry point that renders the dashboard UI. It fetches data from the backend and displays it in a clean, real‑time interface.

// src/app/dashboard/page.js
import { Suspense } from 'react';
import MetricCard from './components/MetricCard';
import TrendList from './components/TrendList';
import StrikeFeed from './components/StrikeFeed';
import ChimeAlert from './components/ChimeAlert';
import Loading from './loading';

async function getDashboardData() {
  // Fetch from API (server-side)
  const res = await fetch('http://localhost:3000/api/v1/dashboard', {
    cache: 'no-store', // Real-time data
  });
  if (!res.ok) throw new Error('Failed to fetch dashboard data');
  return res.json();
}

export default async function DashboardPage() {
  const data = await getDashboardData();

  return (
    <div className="dashboard-container">
      {/* Header */}
      <header className="dashboard-header">
        <h1>🧬 CEO Pulse</h1>
        <span className="live-badge">🔴 LIVE</span>
        <span className="ghost-badge">🕵️ Ghost Unit Online</span>
        <span className="date">{new Date().toLocaleDateString()}</span>
      </header>

      {/* Metric Cards */}
      <section className="metrics-grid">
        <MetricCard
          icon="🔥"
          title="Active Trends"
          value={data.trends.active}
          change="+12%"
        />
        <MetricCard
          icon="⚡"
          title="Strikes Today"
          value={`$${data.strikes.today.toLocaleString()}`}
          subtitle={`${data.strikes.count} strikes`}
        />
        <MetricCard
          icon="🧬"
          title="Workflows Active"
          value={data.workflows.active}
          subtitle="Running"
        />
        <MetricCard
          icon="📀"
          title="IPFS Storage"
          value={data.ipfs.objects.toLocaleString()}
          subtitle="Objects"
        />
      </section>

      {/* Trend Detection */}
      <section className="trend-section">
        <h2>📈 Trend Detection</h2>
        <TrendList trends={data.trends.list} />
      </section>

      {/* Recent Strikes */}
      <section className="strike-section">
        <h2>⚡ Recent Strikes</h2>
        <StrikeFeed strikes={data.strikes.recent} />
      </section>

      {/* Chime Alert */}
      <ChimeAlert />

      {/* Footer Refresh */}
      <div className="refresh-footer">
        <button>🔄 Refresh</button>
      </div>
    </div>
  );
}

🧩 Component: MetricCard.js

// src/app/dashboard/components/MetricCard.js
export default function MetricCard({ icon, title, value, change, subtitle }) {
  return (
    <div className="metric-card">
      <div className="metric-icon">{icon}</div>
      <div className="metric-content">
        <div className="metric-title">{title}</div>
        <div className="metric-value">{value}</div>
        {change && <div className="metric-change">{change}</div>}
        {subtitle && <div className="metric-subtitle">{subtitle}</div>}
      </div>
    </div>
  );
}

🧩 Component: TrendList.js

// src/app/dashboard/components/TrendList.js
export default function TrendList({ trends }) {
  return (
    <div className="trend-list">
      {trends.map((trend) => (
        <div key={trend.name} className="trend-item">
          <span className="trend-name">{trend.name}</span>
          <span className={`trend-change ${trend.change.startsWith('+') ? 'positive' : 'negative'}`}>
            {trend.change}
          </span>
        </div>
      ))}
    </div>
  );
}

🔌 API Route: api/stats/route.js

// src/app/dashboard/api/stats/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  // Simulate database or service call
  const stats = {
    trends: { active: 24, list: [
      { name: 'Wellness Products', change: '+23%' },
      { name: 'Mental Health', change: '+18%' },
      { name: 'Fitness Tech', change: '-5%' },
      { name: 'Supplements', change: '+31%' },
    ]},
    strikes: { today: 47200, count: 8, recent: [
      { time: '10:23:45', product: 'Wellness Package', amount: 299, status: '✅ Success' },
      { time: '10:15:22', product: 'Supplements', amount: 127, status: '✅ Success' },
      { time: '09:58:03', product: 'Mental Health', amount: 89, status: '✅ Success' },
    ]},
    workflows: { active: 12 },
    ipfs: { objects: 8431 },
  };

  return NextResponse.json(stats);
}

🧠 Real‑Time Features (Chime Alert)

The Chime Alert component uses a WebSocket connection to listen for new sales/events and display a notification.

// src/app/dashboard/components/ChimeAlert.js
'use client';

import { useEffect, useState } from 'react';

export default function ChimeAlert() {
  const [alert, setAlert] = useState(null);

  useEffect(() => {
    const ws = new WebSocket('ws://localhost:3000/ws');

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type === 'chime') {
        setAlert(data.message);
        setTimeout(() => setAlert(null), 5000);
      }
    };

    return () => ws.close();
  }, []);

  if (!alert) return null;

  return (
    <div className="chime-alert">
      🔔 [CHIME] {alert}
    </div>
  );
}

✅ Summary Table

File/Folder	Purpose	Key Feature
page.js	Main dashboard page	Fetches and renders CEO Pulse UI
components/MetricCard.js	Metric card component	Displays trends, strikes, workflows, IPFS
components/TrendList.js	Trend list	Shows active trends with % change
components/StrikeFeed.js	Strike feed	Lists recent sales with status
components/ChimeAlert.js	WebSocket notification	Real-time chime alerts for new sales
api/stats/route.js	API endpoint	Serves dashboard stats to frontend
loading.js	Loading state	Shows skeleton during data fetch
error.js	Error boundary	Fallback UI for errors

🚀

Next Steps

1. Create the dashboard folder inside src/app/.
2. Add the files above.
3. Ensure your backend API (/api/v1/dashboard) returns the correct data structure.
4. Connect the WebSocket for real-time chimes.
5. Style using your preferred CSS framework (Tailwind, CSS Modules, etc.).

💡

Pro Tip

Use useEffect with fetch on the client side if you need periodic refresh. For server-side rendering, use the fetch inside page.js as shown above.