You can also watch the YouTube video: [Next JS Tutorial #5 | Admin Dashboard Page](https://www.youtube.com/watch?v=WmSQmic4P48) ### Installing Required Dependencies ```bash yarn add recharts ``` ### Installing Required ShadCN UI Components ```bash npx shadcn@latest add card chart ``` Create `page.js` in `app/auth/admin` folder: ```js "use client"; import AreaChartComponent from "@/components/Admin/AreaChartComponent"; import BarChartComponent from "@/components/Admin/BarChartComponent"; import PieChartComponent from "@/components/Admin/PieChartComponent"; import { useCurrentUser } from "@/contexts/CurrentUserContext"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; const AdminPage = () => { const { currentUser } = useCurrentUser(); const router = useRouter(); useEffect(() => { if (!currentUser || currentUser.role !== "ADMIN") { router.push("/"); } }, [currentUser]); return (

Dashboard

); }; export default AdminPage; ``` Create `AreaChartComponent.jsx` in `components/Admin` folder: ```js "use client"; import { TrendingUp } from "lucide-react"; import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; const chartData = [ { month: "January", desktop: 186, mobile: 80 }, { month: "February", desktop: 305, mobile: 200 }, { month: "March", desktop: 237, mobile: 120 }, { month: "April", desktop: 73, mobile: 190 }, { month: "May", desktop: 209, mobile: 130 }, { month: "June", desktop: 214, mobile: 140 }, ]; const chartConfig = { desktop: { label: "Desktop", color: "hsl(var(--chart-1))", }, mobile: { label: "Mobile", color: "hsl(var(--chart-2))", }, }; const AreaChartComponent = () => { return ( Area Chart - Stacked Showing total visitors for the last 6 months value.slice(0, 3)} /> } />

Trending up by 5.2% this month

January - June 2024

); }; export default AreaChartComponent; ``` Create `BarChartComponent.jsx` in `components/Admin` folder: ```js "use client"; import { TrendingUp } from "lucide-react"; import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; const chartData = [ { month: "January", desktop: 186, mobile: 80 }, { month: "February", desktop: 305, mobile: 200 }, { month: "March", desktop: 237, mobile: 120 }, { month: "April", desktop: 73, mobile: 190 }, { month: "May", desktop: 209, mobile: 130 }, { month: "June", desktop: 214, mobile: 140 }, ]; const chartConfig = { desktop: { label: "Desktop", color: "hsl(var(--chart-1))", }, mobile: { label: "Mobile", color: "hsl(var(--chart-2))", }, }; const BarChartComponent = () => { return ( Bar Chart - Multiple January - June 2024 value.slice(0, 3)} /> } />

Trending up by 5.2% this month

Showing total visitors for the last 6 months

); }; export default BarChartComponent; ``` Create `PieChartComponent.jsx` in `components/Admin` folder: ```js "use client"; import { TrendingUp } from "lucide-react"; import * as React from "react"; import { Label, Pie, PieChart } from "recharts"; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart"; const chartData = [ { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" }, { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, { browser: "other", visitors: 190, fill: "var(--color-other)" }, ]; const chartConfig = { visitors: { label: "Visitors", }, chrome: { label: "Chrome", color: "hsl(var(--chart-1))", }, safari: { label: "Safari", color: "hsl(var(--chart-2))", }, firefox: { label: "Firefox", color: "hsl(var(--chart-3))", }, edge: { label: "Edge", color: "hsl(var(--chart-4))", }, other: { label: "Other", color: "hsl(var(--chart-5))", }, }; const PieChartComponent = () => { const totalVisitors = React.useMemo(() => { return chartData.reduce((acc, curr) => acc + curr.visitors, 0); }, []); return ( Pie Chart - Donut with Text January - June 2024 } /> { if (viewBox && "cx" in viewBox && "cy" in viewBox) { return ( {totalVisitors.toLocaleString()} Visitors ); } }} />

Trending up by 5.2% this month

Showing total visitors for the last 6 months

); }; export default PieChartComponent; ``` That's it for this tutorial, we created our admin dashboard page. Next tutorial we'll create admin create product page and api route for it.