65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { TeamSwitcher } from './components/TeamSwitcher';
|
|
import { MainNav } from './components/MainNav';
|
|
import { Search } from './components/Search';
|
|
import { UserNav } from './components/UserNav';
|
|
import { CalendarDateRangePicker } from './components/DateRangePicker';
|
|
import { Overview } from './components/Overview';
|
|
import { RecentSales } from './components/RecentSales';
|
|
|
|
export default function DashboardScreen() {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
<header className="bg-white border-b">
|
|
<div className="container flex items-center justify-between h-16 px-4">
|
|
<TeamSwitcher />
|
|
<MainNav />
|
|
<div className="flex items-center space-x-4">
|
|
<Search />
|
|
<UserNav />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="container p-4 space-y-4">
|
|
s
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold">Dashboard</h1>
|
|
<div className="flex items-center space-x-2">
|
|
<CalendarDateRangePicker />
|
|
<button className="px-4 py-2 bg-blue-500 text-white rounded">
|
|
Download
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
{[
|
|
{ title: "Total Revenue", value: "$45,231.89", subtext: "+20.1% from last month" },
|
|
{ title: "Subscriptions", value: "+2350", subtext: "+180.1% from last month" },
|
|
{ title: "Sales", value: "+12,234", subtext: "+19% from last month" },
|
|
{ title: "Active Now", value: "+573", subtext: "+201 since last hour" },
|
|
].map((card, index) => (
|
|
<div key={index} className="p-6 bg-white border rounded-lg">
|
|
<h3 className="text-sm font-medium text-gray-500">{card.title}</h3>
|
|
<p className="text-2xl font-bold mt-1">{card.value}</p>
|
|
<p className="text-xs text-gray-500 mt-1">{card.subtext}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="p-6 bg-white border rounded-lg">
|
|
<h3 className="text-lg font-medium mb-4">Overview</h3>
|
|
<Overview />
|
|
</div>
|
|
<div className="p-6 bg-white border rounded-lg space-y-4">
|
|
<h3 className="text-lg font-medium">Recent Sales</h3>
|
|
<p>You made 265 sales this month.</p>
|
|
<RecentSales />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|