Build a dashboard that tracks article publication rates

Here’s a simple, clean React-based dashboard that tracks article publication rates. It includes features like a summary card, a publication trend chart, and a table of recent articles. Tailwind CSS is used for styling, and recharts is used for visualizations.

Let’s set up the full code in a single file for a React environment:

jsx
CopyEdit
// Dashboard.jsx
import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
import { Table, TableHead, TableBody, TableRow, TableCell, TableHeader } from "@/components/ui/table";

const publicationData = [
  { date: "2025-05-01", count: 2 },
  { date: "2025-05-02", count: 3 },
  { date: "2025-05-03", count: 1 },
  { date: "2025-05-04", count: 4 },
  { date: "2025-05-05", count: 2 },
  { date: "2025-05-06", count: 5 },
  { date: "2025-05-07", count: 3 },
];

const recentArticles = [
  { title: "SEO for Beginners", date: "2025-05-07", status: "Published" },
  { title: "AI in Digital Marketing", date: "2025-05-06", status: "Published" },
  { title: "Content Writing Tips", date: "2025-05-05", status: "Scheduled" },
  { title: "Keyword Research Tools", date: "2025-05-04", status: "Draft" },
];

export default function Dashboard() {
  const totalArticles = publicationData.reduce((sum, d) => sum + d.count, 0);

  return (
    <div className="p-6 space-y-6">
      <h1 className="text-2xl font-bold">Article Publication Dashboard</h1>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-4">
            <h2 className="text-xl font-semibold">Total Published</h2>
            <p className="text-3xl mt-2">{totalArticles}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <h2 className="text-xl font-semibold">Last 7 Days</h2>
            <p className="text-3xl mt-2">{publicationData.length}</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <h2 className="text-xl font-semibold">Latest Status</h2>
            <p className="text-lg mt-2">{recentArticles[0]?.status || "N/A"}</p>
          </CardContent>
        </Card>
      </div>

      <div className="bg-white rounded-2xl shadow p-4">
        <h2 className="text-xl font-semibold mb-4">Publication Trends</h2>
        <ResponsiveContainer width="100%" height={250}>
          <LineChart data={publicationData}>
            <XAxis dataKey="date" />
            <YAxis allowDecimals={false} />
            <Tooltip />
            <Line type="monotone" dataKey="count" stroke="#3b82f6" strokeWidth={2} />
          </LineChart>
        </ResponsiveContainer>
      </div>

      <div className="bg-white rounded-2xl shadow p-4">
        <h2 className="text-xl font-semibold mb-4">Recent Articles</h2>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Title</TableHead>
              <TableHead>Date</TableHead>
              <TableHead>Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {recentArticles.map((article, index) => (
              <TableRow key={index}>
                <TableCell>{article.title}</TableCell>
                <TableCell>{article.date}</TableCell>
                <TableCell>{article.status}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

Libraries Required:

• Tailwind CSS

• Recharts

• Shadcn UI or similar UI library for components like Card, Table

Functionality Included:

• Summary stats for total and recent publications

• Line chart to track publication trends over time

• Table listing recent articles with status

Let me know if you’d like filters, export features, or backend integration.