shacn-dashboard/app/page.tsx
Pierre Wessman 08a3132bec polish
2025-12-14 17:47:17 +01:00

54 lines
2.1 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 { UnclassifiedPaymentsTable } from "@/components/dashboard/unclassified-payments-table"
import { TeamTable } from "@/components/dashboard/team-table"
import { getDashboardData } from "@/lib/mock-data"
export default function Home() {
const data = getDashboardData()
// <TeamTable team={data.team} />
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">
<UnclassifiedPaymentsTable transactions={data.transactions} />
</div>
</div>
</DashboardTabs>
</div>
</SidebarInset>
</>
)
}