100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
import { Card, Title, Text, Metric, Flex, BadgeDelta, AreaChart, BarList } from '@tremor/react';
|
|
|
|
/**
|
|
* Tremor Dashboard Example
|
|
*
|
|
* Uses Tremor library for pre-built dashboard components.
|
|
* Tremor provides beautiful, accessible components out-of-the-box.
|
|
*
|
|
* Install: npm install @tremor/react
|
|
*/
|
|
|
|
const salesData = [
|
|
{ month: 'Jan', Sales: 4500, Target: 4000 },
|
|
{ month: 'Feb', Sales: 3800, Target: 4000 },
|
|
{ month: 'Mar', Sales: 5100, Target: 4500 },
|
|
{ month: 'Apr', Sales: 4600, Target: 4500 },
|
|
{ month: 'May', Sales: 5400, Target: 5000 },
|
|
{ month: 'Jun', Sales: 6200, Target: 5500 },
|
|
];
|
|
|
|
const topProducts = [
|
|
{ name: 'Pro Plan', value: 45000 },
|
|
{ name: 'Enterprise', value: 38000 },
|
|
{ name: 'Starter', value: 29000 },
|
|
{ name: 'Add-ons', value: 12000 },
|
|
];
|
|
|
|
export function TremorDashboard() {
|
|
return (
|
|
<div style={{ padding: '24px', backgroundColor: '#f9fafb', minHeight: '100vh' }}>
|
|
<Title>Sales Dashboard</Title>
|
|
<Text>Overview of sales performance and key metrics</Text>
|
|
|
|
{/* KPI Cards */}
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '16px', marginTop: '24px' }}>
|
|
<Card>
|
|
<Flex alignItems="start">
|
|
<div>
|
|
<Text>Revenue</Text>
|
|
<Metric>$63,000</Metric>
|
|
</div>
|
|
<BadgeDelta deltaType="increase">8.6%</BadgeDelta>
|
|
</Flex>
|
|
</Card>
|
|
|
|
<Card>
|
|
<Flex alignItems="start">
|
|
<div>
|
|
<Text>Active Users</Text>
|
|
<Metric>12,543</Metric>
|
|
</div>
|
|
<BadgeDelta deltaType="increase">12.4%</BadgeDelta>
|
|
</Flex>
|
|
</Card>
|
|
|
|
<Card>
|
|
<Flex alignItems="start">
|
|
<div>
|
|
<Text>Conversion Rate</Text>
|
|
<Metric>3.8%</Metric>
|
|
</div>
|
|
<BadgeDelta deltaType="decrease">-2.1%</BadgeDelta>
|
|
</Flex>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Charts */}
|
|
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '16px', marginTop: '24px' }}>
|
|
<Card>
|
|
<Title>Sales vs Target</Title>
|
|
<AreaChart
|
|
className="mt-4 h-72"
|
|
data={salesData}
|
|
index="month"
|
|
categories={['Sales', 'Target']}
|
|
colors={['blue', 'gray']}
|
|
valueFormatter={(number) => `$${(number / 1000).toFixed(1)}K`}
|
|
yAxisWidth={48}
|
|
/>
|
|
</Card>
|
|
|
|
<Card>
|
|
<Title>Top Products</Title>
|
|
<Flex className="mt-4">
|
|
<Text>Product</Text>
|
|
<Text>Revenue</Text>
|
|
</Flex>
|
|
<BarList
|
|
data={topProducts}
|
|
className="mt-2"
|
|
valueFormatter={(number) => `$${(number / 1000).toFixed(0)}K`}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TremorDashboard;
|