feat: dashboard with actual data

Author: agmmtoo

app/(protected)/dashboard/page.tsx

@@ -7,10 +7,10 @@ import {
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
 
-import { Component as AC } from '@/components/dashboard/AreaChart'
-import { Component as BC } from '@/components/dashboard/BarChart'
-import { Component as LC } from '@/components/dashboard/LineChart'
-import { Component as PC } from '@/components/dashboard/PineChart'
+import { MonthlyRevenueChart } from '@/components/dashboard/MonthlyRevenueChart'
+import { MostBorrowedBookChart } from '@/components/dashboard/MostBorrowedBookChart'
+import { MontlyBorrowChart } from '@/components/dashboard/MontlyBorrowChart'
+import { TopMembershipChart } from '@/components/dashboard/TopMembershipChart'
 import { getAnalysis } from '@/lib/api/analysis'
 import { SITE_NAME } from '@/lib/consts'
 import type { Metadata } from 'next'
@@ -22,7 +22,7 @@ export const metadata: Metadata = {
 
 export default async function Dashboard() {
   const res = await getAnalysis({
-    limit: 5,
+    limit: 50,
     skip: 0,
     from: '2024-01-05T17:00:47.680Z',
     to: '2025-06-05T17:00:47.680Z',
@@ -54,10 +54,10 @@ export default async function Dashboard() {
       </Breadcrumb>
 
       <div className="grid my-4 grid-cols-1 gap-4 md:grid-cols-2">
-        <LC />
-        <AC />
-        <BC />
-        <PC />
+        <MontlyBorrowChart data={res.data.borrowing} />
+        <MonthlyRevenueChart data={res.data.revenue} />
+        <MostBorrowedBookChart data={res.data.book} />
+        <TopMembershipChart data={res.data.membership} />
       </div>
     </div>
   )

components/dashboard/AreaChart.tsx …onents/dashboard/MonthlyRevenueChart.tsxcomponents/dashboard/AreaChart.tsx renamed to components/dashboard/MonthlyRevenueChart.tsx components/dashboard/AreaChart.tsx renamed to components/dashboard/MonthlyRevenueChart.tsx

@@ -17,94 +17,88 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart'
-const chartData = [
-  { month: 'January', desktop: 186, mobile: 80 },
-  { month: 'February', desktop: 305, mobile: 200 },
-  { month: 'March', desktop: 237, mobile: 120 },
-  { month: 'April', desktop: 73, mobile: 190 },
-  { month: 'May', desktop: 209, mobile: 130 },
-  { month: 'June', desktop: 214, mobile: 140 },
-]
+import { Analysis } from '@/lib/types/analysis'
+import { formatDate } from '@/lib/utils'
 
 const chartConfig = {
-  desktop: {
-    label: 'Desktop',
+  subscription: {
+    label: 'Subscription',
     color: 'hsl(var(--chart-1))',
   },
-  mobile: {
-    label: 'Mobile',
+  fine: {
+    label: 'Fine',
     color: 'hsl(var(--chart-2))',
   },
 } satisfies ChartConfig
 
-export function Component() {
+export function MonthlyRevenueChart({ data }: { data: Analysis['revenue'] }) {
   return (
     <Card>
       <CardHeader>
         <CardTitle>Monthly Revenue</CardTitle>
         <CardDescription>
-          Showing total visitors for the last 6 months
+          Showing total revenue from subscriptions and fines
         </CardDescription>
       </CardHeader>
       <CardContent>
         <ChartContainer config={chartConfig}>
           <AreaChart
             accessibilityLayer
-            data={chartData}
+            data={data}
             margin={{
               left: 12,
               right: 12,
             }}
           >
             <CartesianGrid vertical={false} />
             <XAxis
-              dataKey="month"
+              dataKey="timestamp"
               tickLine={false}
               axisLine={false}
               tickMargin={8}
-              tickFormatter={(value) => value.slice(0, 3)}
+              tickFormatter={formatDate}
             />
             <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
             <defs>
-              <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
+              <linearGradient id="fillSubscription" x1="0" y1="0" x2="0" y2="1">
                 <stop
                   offset="5%"
-                  stopColor="var(--color-desktop)"
+                  stopColor="var(--color-subscription)"
                   stopOpacity={0.8}
                 />
                 <stop
                   offset="95%"
-                  stopColor="var(--color-desktop)"
+                  stopColor="var(--color-subscription)"
                   stopOpacity={0.1}
                 />
               </linearGradient>
-              <linearGradient id="fillMobile" x1="0" y1="0" x2="0" y2="1">
+              <linearGradient id="fillFine" x1="0" y1="0" x2="0" y2="1">
                 <stop
                   offset="5%"
-                  stopColor="var(--color-mobile)"
+                  stopColor="var(--color-fine)"
                   stopOpacity={0.8}
                 />
                 <stop
                   offset="95%"
-                  stopColor="var(--color-mobile)"
+                  stopColor="var(--color-fine)"
                   stopOpacity={0.1}
                 />
               </linearGradient>
             </defs>
             <Area
-              dataKey="mobile"
+              dataKey="fine"
               type="natural"
-              fill="url(#fillMobile)"
+              fill="url(#fillFine)"
               fillOpacity={0.4}
-              stroke="var(--color-mobile)"
+              stroke="var(--color-fine)"
               stackId="a"
             />
             <Area
-              dataKey="desktop"
+              dataKey="subscription"
               type="natural"
-              fill="url(#fillDesktop)"
+              fill="url(#fillSubscription)"
               fillOpacity={0.4}
-              stroke="var(--color-desktop)"
+              stroke="var(--color-subscription)"
               stackId="a"
             />
           </AreaChart>

components/dashboard/LineChart.tsx …mponents/dashboard/MontlyBorrowChart.tsxcomponents/dashboard/LineChart.tsx renamed to components/dashboard/MontlyBorrowChart.tsx components/dashboard/LineChart.tsx renamed to components/dashboard/MontlyBorrowChart.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { TrendingUp } from 'lucide-react'
+// import { TrendingUp } from 'lucide-react'
 import { CartesianGrid, Line, LineChart, XAxis } from 'recharts'
 
 import {
@@ -17,27 +17,17 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart'
-const chartData = [
-  { month: 'January', desktop: 186, mobile: 80 },
-  { month: 'February', desktop: 305, mobile: 200 },
-  { month: 'March', desktop: 237, mobile: 120 },
-  { month: 'April', desktop: 73, mobile: 190 },
-  { month: 'May', desktop: 209, mobile: 130 },
-  { month: 'June', desktop: 214, mobile: 140 },
-]
+import { Analysis } from '@/lib/types/analysis'
+import { formatDate } from '@/lib/utils'
 
 const chartConfig = {
-  desktop: {
-    label: 'Desktop',
+  count: {
+    label: 'Borrowing',
     color: 'hsl(var(--chart-1))',
   },
-  mobile: {
-    label: 'Mobile',
-    color: 'hsl(var(--chart-2))',
-  },
 } satisfies ChartConfig
 
-export function Component() {
+export function MontlyBorrowChart({ data }: { data: Analysis['borrowing'] }) {
   return (
     <Card>
       <CardHeader>
@@ -48,31 +38,31 @@ export function Component() {
         <ChartContainer config={chartConfig}>
           <LineChart
             accessibilityLayer
-            data={chartData}
+            data={data}
             margin={{
               left: 12,
               right: 12,
             }}
           >
             <CartesianGrid vertical={false} />
             <XAxis
-              dataKey="month"
+              dataKey="timestamp"
               tickLine={false}
               axisLine={false}
               tickMargin={8}
-              tickFormatter={(value) => value.slice(0, 3)}
+              tickFormatter={formatDate}
             />
             <ChartTooltip
               cursor={false}
               content={<ChartTooltipContent hideLabel />}
             />
             <Line
-              dataKey="desktop"
+              dataKey="count"
               type="natural"
-              stroke="var(--color-desktop)"
+              stroke="var(--color-count)"
               strokeWidth={2}
               dot={{
-                fill: 'var(--color-desktop)',
+                fill: 'var(--color-count)',
               }}
               activeDot={{
                 r: 6,
@@ -82,11 +72,11 @@ export function Component() {
         </ChartContainer>
       </CardContent>
       <CardFooter className="flex-col items-start gap-2 text-sm">
-        <div className="flex gap-2 font-medium leading-none">
+        {/* <div className="flex gap-2 font-medium leading-none">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
-        </div>
+        </div> */}
         <div className="leading-none text-muted-foreground">
-          Showing total visitors for the last 6 months
+          Showing total borrows per month
         </div>
       </CardFooter>
     </Card>

components/dashboard/BarChart.tsx …ents/dashboard/MostBorrowedBookChart.tsxcomponents/dashboard/BarChart.tsx renamed to components/dashboard/MostBorrowedBookChart.tsx components/dashboard/BarChart.tsx renamed to components/dashboard/MostBorrowedBookChart.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { TrendingUp } from 'lucide-react'
-import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from 'recharts'
+import { Bar, BarChart, XAxis, YAxis } from 'recharts'
 
 import {
   Card,
@@ -17,23 +17,22 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart'
-const chartData = [
-  { month: 'January', desktop: 186 },
-  { month: 'February', desktop: 305 },
-  { month: 'March', desktop: 237 },
-  { month: 'April', desktop: 73 },
-  { month: 'May', desktop: 209 },
-  { month: 'June', desktop: 214 },
-]
+import { Analysis } from '@/lib/types/analysis'
 
-const chartConfig = {
-  desktop: {
-    label: 'Desktop',
-    color: 'hsl(var(--chart-1))',
-  },
-} satisfies ChartConfig
+export function MostBorrowedBookChart({ data }: { data: Analysis['book'] }) {
+  const chartConfig = data.reduce((acc, { title }, index) => {
+    acc[title] = {
+      label: title,
+      color: `hsl(var(--chart-${index + 1}))`,
+    }
+    return acc
+  }, {} as ChartConfig)
+  const chartData = data.map(({ title, count }) => ({
+    browser: title,
+    total: count,
+    fill: chartConfig[title].color,
+  }))
 
-export function Component() {
   return (
     <Card>
       <CardHeader>
@@ -45,30 +44,27 @@ export function Component() {
           <BarChart
             accessibilityLayer
             data={chartData}
+            layout="vertical"
             margin={{
-              top: 20,
+              left: 0,
             }}
           >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
+            <YAxis
+              dataKey="browser"
+              type="category"
               tickLine={false}
               tickMargin={10}
               axisLine={false}
-              tickFormatter={(value) => value.slice(0, 3)}
+              tickFormatter={(value) =>
+                chartConfig[value as keyof typeof chartConfig].label as string
+              }
             />
+            <XAxis dataKey="total" type="number" hide />
             <ChartTooltip
               cursor={false}
               content={<ChartTooltipContent hideLabel />}
             />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8}>
-              <LabelList
-                position="top"
-                offset={12}
-                className="fill-foreground"
-                fontSize={12}
-              />
-            </Bar>
+            <Bar dataKey="total" layout="vertical" radius={5} />
           </BarChart>
         </ChartContainer>
       </CardContent>

components/dashboard/PineChart.tsx …ponents/dashboard/TopMembershipChart.tsxcomponents/dashboard/PineChart.tsx renamed to components/dashboard/TopMembershipChart.tsx components/dashboard/PineChart.tsx renamed to components/dashboard/TopMembershipChart.tsx

@@ -17,41 +17,23 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart'
-const chartData = [
-  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-  { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-  { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-  { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-]
+import { Analysis } from '@/lib/types/analysis'
 
-const chartConfig = {
-  visitors: {
-    label: 'Visitors',
-  },
-  chrome: {
-    label: 'Chrome',
-    color: 'hsl(var(--chart-1))',
-  },
-  safari: {
-    label: 'Safari',
-    color: 'hsl(var(--chart-2))',
-  },
-  firefox: {
-    label: 'Firefox',
-    color: 'hsl(var(--chart-3))',
-  },
-  edge: {
-    label: 'Edge',
-    color: 'hsl(var(--chart-4))',
-  },
-  other: {
-    label: 'Other',
-    color: 'hsl(var(--chart-5))',
-  },
-} satisfies ChartConfig
+export function TopMembershipChart({ data }: { data: Analysis['membership'] }) {
+  const chartConfig = data.reduce((acc, { name }, index) => {
+    acc[name] = {
+      label: name,
+      color: `hsl(var(--chart-${index + 1}))`,
+    }
+    return acc
+  }, {} as ChartConfig)
+
+  const chartData = data.map(({ name, count }) => ({
+    browser: name,
+    visitors: count,
+    fill: chartConfig[name].color,
+  }))
 
-export function Component() {
   return (
     <Card className="flex flex-col">
       <CardHeader className="items-center pb-0">