Dashboard

Admin dashboard template with KPI stats, revenue chart placeholder, activity feed, and orders table. Built with StatsCard, Card atoms, Avatar, Badge, and Button.

Import

import { Button, Typography, Badge, Avatar, Card, CardHeader, CardTitle, CardContent } from "poyraz-ui/atoms";
import { StatsCard } from "poyraz-ui/molecules";

Dashboard Layout

Stats grid, chart + activity sidebar, and a data table — a complete admin overview.

Dashboard

Revenue

$12,345

+12.5%

Orders

+4.3%

Customers

1,234

-2.1%

Conversion

3.2%

—0%

Revenue Overview

Last 7 days

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Recent Activity

Ahmet K. placed an order

2m ago

Elif Y. left a review

15m ago

System backup completed

1h ago

Burak S. signed up

3h ago

Recent Orders

Order	Customer	Amount	Status	Date
#1234	Ahmet K.	$120	Completed	Mar 6
#1233	Elif Y.	$89	Processing	Mar 5
#1232	Burak S.	$245	Completed	Mar 5
#1231	Zeynep A.	$67	Cancelled	Mar 4
#1230	Mehmet D.	$310	Completed	Mar 4

import {
  Button, Typography, Badge, Avatar, AvatarFallback, AvatarImage,
  Card, CardHeader, CardTitle, CardContent, CardFooter,
} from "poyraz-ui/atoms";
import { StatsCard } from "poyraz-ui/molecules";

export function DashboardPage() {
  return (
    <div className="bg-muted min-h-screen">
      {/* Top Bar */}
      <div className="bg-background border-b border-border px-5 py-3 flex items-center justify-between">
        <Typography variant="small" className="font-bold">Dashboard</Typography>
        <Avatar className="h-7 w-7">
          <AvatarImage src="/avatar.jpg" />
          <AvatarFallback>PA</AvatarFallback>
        </Avatar>
      </div>

      <div className="p-5 space-y-5">
        {/* Stats */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
          <StatsCard label="Revenue" value="$12,345" trend="up" trendValue="+12.5%" />
          <StatsCard label="Orders" value="89" trend="up" trendValue="+4.3%" />
          <StatsCard label="Customers" value="1,234" trend="down" trendValue="-2.1%" />
          <StatsCard label="Conversion" value="3.2%" trend="neutral" trendValue="0%" />
        </div>

        {/* Chart + Activity */}
        <div className="grid lg:grid-cols-3 gap-4">
          <Card className="lg:col-span-2">
            <CardHeader>
              <CardTitle>Revenue Overview</CardTitle>
            </CardHeader>
            <CardContent>
              {/* Your chart component here */}
            </CardContent>
          </Card>
          <Card>
            <CardHeader><CardTitle>Recent Activity</CardTitle></CardHeader>
            <CardContent>{/* Activity feed */}</CardContent>
          </Card>
        </div>

        {/* Orders Table */}
        <Card>
          <CardHeader>
            <CardTitle>Recent Orders</CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            {/* Table content */}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}