Skip to content

Commit 0dc9725

Browse files
agmmtooagmmtoo
committed
feat: dashboard
1 parent a21020d commit 0dc9725

File tree

11 files changed

+1126
-8
lines changed

11 files changed

+1126
-8
lines changed

‎app/(protected)/dashboard/page.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import {
2+
Breadcrumb,
3+
BreadcrumbItem,
4+
BreadcrumbLink,
5+
BreadcrumbList,
6+
BreadcrumbPage,
7+
BreadcrumbSeparator,
8+
} from '@/components/ui/breadcrumb'
9+
10+
import { Component as AC } from '@/components/dashboard/AreaChart'
11+
import { Component as BC } from '@/components/dashboard/BarChart'
12+
import { Component as LC } from '@/components/dashboard/LineChart'
13+
import { Component as PC } from '@/components/dashboard/PineChart'
14+
import { getAnalysis } from '@/lib/api/analysis'
15+
import { SITE_NAME } from '@/lib/consts'
16+
import type { Metadata } from 'next'
17+
import Link from 'next/link'
18+
19+
export const metadata: Metadata = {
20+
title: `Dashboard · ${SITE_NAME}`,
21+
}
22+
23+
export default async function Dashboard() {
24+
const res = await getAnalysis({
25+
limit: 5,
26+
skip: 0,
27+
from: '2024-01-05T17:00:47.680Z',
28+
to: '2025-06-05T17:00:47.680Z',
29+
library_id: 'd7385c3e-05f7-4d0d-88c8-74fdc830ec87',
30+
})
31+
console.log(res)
32+
33+
if ('error' in res) {
34+
console.log(res)
35+
return <div>{JSON.stringify(res.message)}</div>
36+
}
37+
38+
return (
39+
<div>
40+
<h1 className="text-2xl font-semibold">Libraries</h1>
41+
<Breadcrumb>
42+
<BreadcrumbList>
43+
<BreadcrumbItem>
44+
<Link href="/" passHref legacyBehavior>
45+
<BreadcrumbLink>Home</BreadcrumbLink>
46+
</Link>
47+
</BreadcrumbItem>
48+
<BreadcrumbSeparator />
49+
50+
<BreadcrumbItem>
51+
<BreadcrumbPage>Analysis</BreadcrumbPage>
52+
</BreadcrumbItem>
53+
</BreadcrumbList>
54+
</Breadcrumb>
55+
56+
<div className="grid my-4 grid-cols-1 gap-4 md:grid-cols-2">
57+
<LC />
58+
<AC />
59+
<BC />
60+
<PC />
61+
</div>
62+
</div>
63+
)
64+
}

‎app/globals.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,22 @@ body {
7272
@apply bg-background text-foreground;
7373
}
7474
}
75+
76+
/* REF: https://ui.shadcn.com/docs/components/chart */
77+
@layer base {
78+
:root {
79+
--chart-1: 12 76% 61%;
80+
--chart-2: 173 58% 39%;
81+
--chart-3: 197 37% 24%;
82+
--chart-4: 43 74% 66%;
83+
--chart-5: 27 87% 67%;
84+
}
85+
86+
.dark {
87+
--chart-1: 220 70% 50%;
88+
--chart-2: 160 60% 45%;
89+
--chart-3: 30 80% 55%;
90+
--chart-4: 280 65% 60%;
91+
--chart-5: 340 75% 55%;
92+
}
93+
}

‎components/dashboard/AreaChart.tsx‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
'use client'
2+
3+
import { TrendingUp } from 'lucide-react'
4+
import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
5+
6+
import {
7+
Card,
8+
CardContent,
9+
CardDescription,
10+
CardFooter,
11+
CardHeader,
12+
CardTitle,
13+
} from '@/components/ui/card'
14+
import {
15+
ChartConfig,
16+
ChartContainer,
17+
ChartTooltip,
18+
ChartTooltipContent,
19+
} from '@/components/ui/chart'
20+
const chartData = [
21+
{ month: 'January', desktop: 186, mobile: 80 },
22+
{ month: 'February', desktop: 305, mobile: 200 },
23+
{ month: 'March', desktop: 237, mobile: 120 },
24+
{ month: 'April', desktop: 73, mobile: 190 },
25+
{ month: 'May', desktop: 209, mobile: 130 },
26+
{ month: 'June', desktop: 214, mobile: 140 },
27+
]
28+
29+
const chartConfig = {
30+
desktop: {
31+
label: 'Desktop',
32+
color: 'hsl(var(--chart-1))',
33+
},
34+
mobile: {
35+
label: 'Mobile',
36+
color: 'hsl(var(--chart-2))',
37+
},
38+
} satisfies ChartConfig
39+
40+
export function Component() {
41+
return (
42+
<Card>
43+
<CardHeader>
44+
<CardTitle>Monthly Revenue</CardTitle>
45+
<CardDescription>
46+
Showing total visitors for the last 6 months
47+
</CardDescription>
48+
</CardHeader>
49+
<CardContent>
50+
<ChartContainer config={chartConfig}>
51+
<AreaChart
52+
accessibilityLayer
53+
data={chartData}
54+
margin={{
55+
left: 12,
56+
right: 12,
57+
}}
58+
>
59+
<CartesianGrid vertical={false} />
60+
<XAxis
61+
dataKey="month"
62+
tickLine={false}
63+
axisLine={false}
64+
tickMargin={8}
65+
tickFormatter={(value) => value.slice(0, 3)}
66+
/>
67+
<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
68+
<defs>
69+
<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
70+
<stop
71+
offset="5%"
72+
stopColor="var(--color-desktop)"
73+
stopOpacity={0.8}
74+
/>
75+
<stop
76+
offset="95%"
77+
stopColor="var(--color-desktop)"
78+
stopOpacity={0.1}
79+
/>
80+
</linearGradient>
81+
<linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
82+
<stop
83+
offset="5%"
84+
stopColor="var(--color-mobile)"
85+
stopOpacity={0.8}
86+
/>
87+
<stop
88+
offset="95%"
89+
stopColor="var(--color-mobile)"
90+
stopOpacity={0.1}
91+
/>
92+
</linearGradient>
93+
</defs>
94+
<Area
95+
dataKey="mobile"
96+
type="natural"
97+
fill="url(#fillMobile)"
98+
fillOpacity={0.4}
99+
stroke="var(--color-mobile)"
100+
stackId="a"
101+
/>
102+
<Area
103+
dataKey="desktop"
104+
type="natural"
105+
fill="url(#fillDesktop)"
106+
fillOpacity={0.4}
107+
stroke="var(--color-desktop)"
108+
stackId="a"
109+
/>
110+
</AreaChart>
111+
</ChartContainer>
112+
</CardContent>
113+
<CardFooter>
114+
<div className="flex w-full items-start gap-2 text-sm">
115+
<div className="grid gap-2">
116+
<div className="flex items-center gap-2 font-medium leading-none">
117+
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
118+
</div>
119+
<div className="flex items-center gap-2 leading-none text-muted-foreground">
120+
January - June 2024
121+
</div>
122+
</div>
123+
</div>
124+
</CardFooter>
125+
</Card>
126+
)
127+
}

‎components/dashboard/BarChart.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
'use client'
2+
3+
import { TrendingUp } from 'lucide-react'
4+
import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from 'recharts'
5+
6+
import {
7+
Card,
8+
CardContent,
9+
CardDescription,
10+
CardFooter,
11+
CardHeader,
12+
CardTitle,
13+
} from '@/components/ui/card'
14+
import {
15+
ChartConfig,
16+
ChartContainer,
17+
ChartTooltip,
18+
ChartTooltipContent,
19+
} from '@/components/ui/chart'
20+
const chartData = [
21+
{ month: 'January', desktop: 186 },
22+
{ month: 'February', desktop: 305 },
23+
{ month: 'March', desktop: 237 },
24+
{ month: 'April', desktop: 73 },
25+
{ month: 'May', desktop: 209 },
26+
{ month: 'June', desktop: 214 },
27+
]
28+
29+
const chartConfig = {
30+
desktop: {
31+
label: 'Desktop',
32+
color: 'hsl(var(--chart-1))',
33+
},
34+
} satisfies ChartConfig
35+
36+
export function Component() {
37+
return (
38+
<Card>
39+
<CardHeader>
40+
<CardTitle>Most Borrowed Books</CardTitle>
41+
<CardDescription>January - June 2024</CardDescription>
42+
</CardHeader>
43+
<CardContent>
44+
<ChartContainer config={chartConfig}>
45+
<BarChart
46+
accessibilityLayer
47+
data={chartData}
48+
margin={{
49+
top: 20,
50+
}}
51+
>
52+
<CartesianGrid vertical={false} />
53+
<XAxis
54+
dataKey="month"
55+
tickLine={false}
56+
tickMargin={10}
57+
axisLine={false}
58+
tickFormatter={(value) => value.slice(0, 3)}
59+
/>
60+
<ChartTooltip
61+
cursor={false}
62+
content={<ChartTooltipContent hideLabel />}
63+
/>
64+
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
65+
<LabelList
66+
position="top"
67+
offset={12}
68+
className="fill-foreground"
69+
fontSize={12}
70+
/>
71+
</Bar>
72+
</BarChart>
73+
</ChartContainer>
74+
</CardContent>
75+
<CardFooter className="flex-col items-start gap-2 text-sm">
76+
<div className="flex gap-2 font-medium leading-none">
77+
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
78+
</div>
79+
<div className="leading-none text-muted-foreground">
80+
Showing total visitors for the last 6 months
81+
</div>
82+
</CardFooter>
83+
</Card>
84+
)
85+
}

‎components/dashboard/LineChart.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
'use client'
2+
3+
import { TrendingUp } from 'lucide-react'
4+
import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
5+
6+
import {
7+
Card,
8+
CardContent,
9+
CardDescription,
10+
CardFooter,
11+
CardHeader,
12+
CardTitle,
13+
} from '@/components/ui/card'
14+
import {
15+
ChartConfig,
16+
ChartContainer,
17+
ChartTooltip,
18+
ChartTooltipContent,
19+
} from '@/components/ui/chart'
20+
const chartData = [
21+
{ month: 'January', desktop: 186, mobile: 80 },
22+
{ month: 'February', desktop: 305, mobile: 200 },
23+
{ month: 'March', desktop: 237, mobile: 120 },
24+
{ month: 'April', desktop: 73, mobile: 190 },
25+
{ month: 'May', desktop: 209, mobile: 130 },
26+
{ month: 'June', desktop: 214, mobile: 140 },
27+
]
28+
29+
const chartConfig = {
30+
desktop: {
31+
label: 'Desktop',
32+
color: 'hsl(var(--chart-1))',
33+
},
34+
mobile: {
35+
label: 'Mobile',
36+
color: 'hsl(var(--chart-2))',
37+
},
38+
} satisfies ChartConfig
39+
40+
export function Component() {
41+
return (
42+
<Card>
43+
<CardHeader>
44+
<CardTitle>Monthly Borrows</CardTitle>
45+
<CardDescription>January - June 2024</CardDescription>
46+
</CardHeader>
47+
<CardContent>
48+
<ChartContainer config={chartConfig}>
49+
<LineChart
50+
accessibilityLayer
51+
data={chartData}
52+
margin={{
53+
left: 12,
54+
right: 12,
55+
}}
56+
>
57+
<CartesianGrid vertical={false} />
58+
<XAxis
59+
dataKey="month"
60+
tickLine={false}
61+
axisLine={false}
62+
tickMargin={8}
63+
tickFormatter={(value) => value.slice(0, 3)}
64+
/>
65+
<ChartTooltip
66+
cursor={false}
67+
content={<ChartTooltipContent hideLabel />}
68+
/>
69+
<Line
70+
dataKey="desktop"
71+
type="natural"
72+
stroke="var(--color-desktop)"
73+
strokeWidth={2}
74+
dot={{
75+
fill: 'var(--color-desktop)',
76+
}}
77+
activeDot={{
78+
r: 6,
79+
}}
80+
/>
81+
</LineChart>
82+
</ChartContainer>
83+
</CardContent>
84+
<CardFooter className="flex-col items-start gap-2 text-sm">
85+
<div className="flex gap-2 font-medium leading-none">
86+
Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
87+
</div>
88+
<div className="leading-none text-muted-foreground">
89+
Showing total visitors for the last 6 months
90+
</div>
91+
</CardFooter>
92+
</Card>
93+
)
94+
}

0 commit comments

Comments
 (0)