Building a Real-Time Dashboard

# Create new Next.js project
npx create-next-app@latest dashboard-app --typescript

# Install dependencies
cd dashboard-app
npm install @munashetech/sdk socket.io-client recharts

# Create .env.local file
echo "NEXT_PUBLIC_MT_API_KEY=your_api_key_here" > .env.local

// lib/munashetech.ts
import { MunasheTech } from '@munashetech/sdk';

export const mtClient = new MunasheTech({
  apiKey: process.env.NEXT_PUBLIC_MT_API_KEY!,
  environment: 'production',
  enableRealtime: true
});

// Configure WebSocket for real-time data
export const realtimeConnection = mtClient.realtime.connect({
  autoReconnect: true,
  heartbeatInterval: 30000
});

// app/dashboard/page.tsx
import { DashboardMetrics } from '@/components/dashboard/metrics';
import { RealtimeChart } from '@/components/dashboard/chart';

export default function Dashboard() {
  return (
    <div className="min-h-screen bg-background">
      <nav className="border-b">
        <div className="container mx-auto px-4 py-4">
          <h1 className="text-2xl font-bold">Real-Time Dashboard</h1>
        </div>
      </nav>
      
      <main className="container mx-auto px-4 py-8">
        <div className="grid gap-6 md:grid-cols-3 mb-8">
          <DashboardMetrics />
        </div>
        
        <div className="grid gap-6 md:grid-cols-2">
          <RealtimeChart />
        </div>
      </main>
    </div>
  );
}

// hooks/useRealtimeData.ts
import { useState, useEffect } from 'react';
import { realtimeConnection } from '@/lib/munashetech';

export function useRealtimeData() {
  const [data, setData] = useState([]);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    // Subscribe to data stream
    const subscription = realtimeConnection.subscribe('metrics', {
      onData: (newData) => {
        setData(prev => [...prev, newData].slice(-50));
      },
      onConnect: () => setIsConnected(true),
      onDisconnect: () => setIsConnected(false),
      onError: (error) => console.error('Stream error:', error)
    });

    return () => subscription.unsubscribe();
  }, []);

  return { data, isConnected };
}

// components/dashboard/metrics.tsx
'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useRealtimeData } from '@/hooks/useRealtimeData';
import { TrendingUp, Users, Activity } from 'lucide-react';

export function DashboardMetrics() {
  const { data, isConnected } = useRealtimeData();
  
  const metrics = [
    {
      title: 'Active Users',
      value: data.length > 0 ? data[data.length - 1].users : 0,
      icon: Users,
      trend: '+12.5%'
    },
    {
      title: 'Requests/sec',
      value: data.length > 0 ? data[data.length - 1].rps : 0,
      icon: Activity,
      trend: '+8.2%'
    },
    {
      title: 'Uptime',
      value: '99.9%',
      icon: TrendingUp,
      trend: 'Stable'
    }
  ];

  return (
    <>
      {metrics.map((metric, i) => (
        <Card key={i}>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-sm font-medium">
              {metric.title}
            </CardTitle>
            <metric.icon className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{metric.value}</div>
            <p className="text-xs text-muted-foreground">{metric.trend}</p>
          </CardContent>
        </Card>
      ))}
    </>
  );
}

// components/dashboard/chart.tsx
'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { useRealtimeData } from '@/hooks/useRealtimeData';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';

export function RealtimeChart() {
  const { data, isConnected } = useRealtimeData();

  return (
    <Card className="col-span-2">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          Live Metrics
          {isConnected && (
            <span className="flex h-2 w-2 rounded-full bg-green-500">
              <span className="animate-ping absolute h-2 w-2 rounded-full bg-green-400 opacity-75" />
            </span>
          )}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={350}>
          <LineChart data={data}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="timestamp" />
            <YAxis />
            <Tooltip />
            <Line 
              type="monotone" 
              dataKey="value" 
              stroke="hsl(var(--primary))" 
              strokeWidth={2}
              dot={false}
              isAnimationActive={true}
            />
          </LineChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}