Mini Project – Dashboard

# Create the dashboard structure
mkdir -p app/dashboard
mkdir -p components/dashboard
mkdir -p app/api/dashboard

// app/api/dashboard/stats/route.js
// Returns article statistics for NewsWave dashboard

export async function GET() {
  // Mock data - in real app, query your database
  const stats = {
    totalArticles: 1247,      // Total published articles
    totalViews: 89543,        // Total page views this month
    activeUsers: 2834,        // Users who read articles this week
    avgReadTime: 4.2          // Average minutes per article
  };

  return Response.json(stats); // Send stats as JSON response
}

// app/api/dashboard/articles/route.js
// Returns recent articles with performance metrics

export async function GET() {
  // Mock recent articles data
  const articles = [
    {
      id: 1,
      title: "AI Breakthrough in Language Models",
      author: "Sarah Chen",
      publishedAt: "2024-01-15T09:30:00Z",    // ISO date string
      views: 2847,                            // Individual article views
      category: "Tech",                       // Article category
      status: "published"                     // Publishing status
    },
    {
      id: 2,
      title: "Global Climate Summit Results",
      author: "Mike Rodriguez", 
      publishedAt: "2024-01-14T14:20:00Z",
      views: 1923,
      category: "World",
      status: "published"
    }
  ];

  return Response.json({ articles, total: articles.length });
}

// components/dashboard/StatsCard.js
// Displays a single metric with formatting and context

export default function StatsCard({ title, value, change, icon }) {
  // Format large numbers with commas (1234 becomes 1,234)
  const formatNumber = (num) => {
    return new Intl.NumberFormat().format(num);
  };

  return (
    <div className="stats-card">
      <div className="stat-header">
        <span className="stat-icon">{icon}</span>    {/* Visual icon */}
        <h3 className="stat-title">{title}</h3>       {/* Metric name */}
      </div>
      <div className="stat-value">{formatNumber(value)}</div>  {/* Main number */}
      {change && (
        <div className="stat-change">
          {change > 0 ? '↗' : '↘'} {Math.abs(change)}%  {/* Trend indicator */}
        </div>
      )}
    </div>
  );
}

// components/dashboard/DataTable.js
// Table component for displaying article data with sorting

'use client';    // This component needs client-side interactivity
import { useState } from 'react';

export default function DataTable({ articles }) {
  const [sortField, setSortField] = useState('views');  // Current sort column
  const [sortOrder, setSortOrder] = useState('desc');   // Sort direction

  // Sort articles based on current field and order
  const sortedArticles = [...articles].sort((a, b) => {
    if (sortOrder === 'asc') {
      return a[sortField] > b[sortField] ? 1 : -1;
    }
    return a[sortField] < b[sortField] ? 1 : -1;
  });

  return (
    <table className="data-table">
      <thead>
        <tr>
          <th onClick={() => setSortField('title')}>Title</th>
          <th onClick={() => setSortField('author')}>Author</th>
          <th onClick={() => setSortField('views')}>Views</th>
        </tr>
      </thead>
    </table>
  );
}

// app/dashboard/page.js
// Main dashboard page that combines stats and article data

import StatsCard from '@/components/dashboard/StatsCard';
import DataTable from '@/components/dashboard/DataTable';

// Fetch dashboard data from internal API routes
async function getDashboardData() {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
  
  // Fetch stats and articles in parallel for better performance
  const [statsRes, articlesRes] = await Promise.all([
    fetch(`${baseUrl}/api/dashboard/stats`),     // Get overall statistics
    fetch(`${baseUrl}/api/dashboard/articles`)   // Get recent articles
  ]);

  const stats = await statsRes.json();        // Parse stats JSON
  const articles = await articlesRes.json();  // Parse articles JSON
  
  return { stats, articles: articles.articles };
}

// app/dashboard/page.js (continued)
// Dashboard page component that renders the complete interface

export default async function DashboardPage() {
  const { stats, articles } = await getDashboardData();  // Load data on server

  return (
    <div className="dashboard-container">
      <header className="dashboard-header">
        <h1>NewsWave Dashboard</h1>                        {/* Page title */}
        <p>Monitor your content performance and user engagement</p>
      </header>

      <section className="stats-grid">
        <StatsCard 
          title="Total Articles" 
          value={stats.totalArticles} 
          change={12} 
          icon="📰"
        />
        <StatsCard 
          title="Page Views" 
          value={stats.totalViews} 
          change={-3} 
          icon="👁️"
        />
        <StatsCard 
          title="Active Users" 
          value={stats.activeUsers} 
          change={8} 
          icon="👥"
        />
      </section>

      <section className="articles-section">
        <h2>Recent Articles</h2>                          {/* Table section title */}
        <DataTable articles={articles} />               {/* Interactive table */}
      </section>
    </div>
  );
}

// components/dashboard/LiveStats.js
// Stats component that updates automatically every 30 seconds

'use client';
import { useState, useEffect } from 'react';
import StatsCard from './StatsCard';

export default function LiveStats({ initialStats }) {
  const [stats, setStats] = useState(initialStats);    // Current stats data
  const [lastUpdated, setLastUpdated] = useState(new Date()); // Last refresh time

  useEffect(() => {
    // Function to fetch fresh stats from API
    const updateStats = async () => {
      try {
        const response = await fetch('/api/dashboard/stats');
        const newStats = await response.json();
        setStats(newStats);                             // Update state with fresh data
        setLastUpdated(new Date());                     // Record update time
      } catch (error) {
        console.error('Failed to update stats:', error);
      }
    };

    // Set up interval to update every 30 seconds
    const interval = setInterval(updateStats, 30000);  // 30000ms = 30 seconds

    return () => clearInterval(interval);              // Cleanup on unmount
  }, []);

  return (
    <div>
      <div style={{ marginBottom: '16px', fontSize: '14px', color: '#6b7280' }}>
        Last updated: {lastUpdated.toLocaleTimeString()}  {/* Show update time */}
      </div>
      <div className="stats-grid">
        <StatsCard title="Total Articles" value={stats.totalArticles} icon="📰" />
        <StatsCard title="Page Views" value={stats.totalViews} icon="👁️" />
        <StatsCard title="Active Users" value={stats.activeUsers} icon="👥" />
      </div>
    </div>
  );
}