52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import { AppSidebar } from "@/components/layout/app-sidebar"
|
|
import { Header } from "@/components/layout/header"
|
|
import { SidebarInset } from "@/components/ui/sidebar"
|
|
import { DashboardTabs } from "@/components/dashboard/dashboard-tabs"
|
|
import { MetricCard } from "@/components/dashboard/metric-card"
|
|
import { RevenueChart } from "@/components/dashboard/revenue-chart"
|
|
import { SalesChart } from "@/components/dashboard/sales-chart"
|
|
import { PaymentsTable } from "@/components/dashboard/payments-table"
|
|
import { TeamTable } from "@/components/dashboard/team-table"
|
|
import { getDashboardData } from "@/lib/mock-data"
|
|
|
|
export default function Home() {
|
|
const data = getDashboardData()
|
|
|
|
return (
|
|
<>
|
|
<AppSidebar />
|
|
<SidebarInset>
|
|
<Header />
|
|
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
|
|
<div className="flex items-center justify-between space-y-2 pt-4">
|
|
<h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
|
|
</div>
|
|
<DashboardTabs>
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
{data.metrics.map((metric) => (
|
|
<MetricCard key={metric.id} {...metric} />
|
|
))}
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
|
<div className="col-span-4">
|
|
<RevenueChart data={data.revenueData} />
|
|
</div>
|
|
<div className="col-span-3">
|
|
<SalesChart data={data.salesData} />
|
|
</div>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
|
<div className="col-span-4">
|
|
<PaymentsTable payments={data.payments} />
|
|
</div>
|
|
<div className="col-span-3">
|
|
<TeamTable team={data.team} />
|
|
</div>
|
|
</div>
|
|
</DashboardTabs>
|
|
</div>
|
|
</SidebarInset>
|
|
</>
|
|
)
|
|
}
|