feat: dashboard chart labels

Author: agmmtoo

components/dashboard/DateRangeSelector.tsx

@@ -1,7 +1,14 @@
 'use client'
 
 import * as React from 'react'
-import { format, subMonths, startOfMonth, endOfMonth } from 'date-fns'
+import {
+  format,
+  subMonths,
+  startOfMonth,
+  endOfMonth,
+  startOfWeek,
+  endOfWeek,
+} from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
 import { DateRange } from 'react-day-picker'
 
@@ -101,6 +108,20 @@ export function DateRangeSelector({
 }
 
 const rangePresets: { label: string; date: DateRange }[] = [
+  {
+    label: 'This Week',
+    date: {
+      from: startOfWeek(new Date()),
+      to: endOfWeek(new Date()),
+    },
+  },
+  {
+    label: 'This Month',
+    date: {
+      from: startOfMonth(new Date()),
+      to: endOfMonth(new Date()),
+    },
+  },
   {
     label: 'Last Month',
     date: {

components/dashboard/MonthlyRevenueChart.tsx

@@ -19,6 +19,9 @@ import {
 } from '@/components/ui/chart'
 import { Analysis } from '@/lib/types/analysis'
 import { formatDate } from '@/lib/utils'
+import { useSearchParams } from 'next/navigation'
+import { format, parse } from 'date-fns'
+import { useMemo } from 'react'
 
 const chartConfig = {
   subscription: {
@@ -32,12 +35,25 @@ const chartConfig = {
 } satisfies ChartConfig
 
 export function MonthlyRevenueChart({ data }: { data: Analysis['revenue'] }) {
+  const params = useSearchParams()
+  const paramFrom = params.get('from') as string
+  const paramTo = params.get('to') as string
+
+  const [from, to] = useMemo(() => {
+    const from = format(
+      parse(paramFrom, 'dd-MM-yyyy', new Date()),
+      'LLL dd, yyyy'
+    )
+    const to = format(parse(paramTo, 'dd-MM-yyyy', new Date()), 'LLL dd, yyyy')
+    return [from, to]
+  }, [paramFrom, paramTo])
+
   return (
     <Card>
       <CardHeader>
         <CardTitle>Monthly Revenue</CardTitle>
         <CardDescription>
-          Showing total revenue from subscriptions and fines
+          {from} - {to}
         </CardDescription>
       </CardHeader>
       <CardContent>

components/dashboard/MontlyBorrowChart.tsx

@@ -19,6 +19,9 @@ import {
 } from '@/components/ui/chart'
 import { Analysis } from '@/lib/types/analysis'
 import { formatDate } from '@/lib/utils'
+import { useSearchParams } from 'next/navigation'
+import { useMemo } from 'react'
+import { format, parse } from 'date-fns'
 
 const chartConfig = {
   count: {
@@ -28,11 +31,26 @@ const chartConfig = {
 } satisfies ChartConfig
 
 export function MontlyBorrowChart({ data }: { data: Analysis['borrowing'] }) {
+  const params = useSearchParams()
+  const paramFrom = params.get('from') as string
+  const paramTo = params.get('to') as string
+
+  const [from, to] = useMemo(() => {
+    const from = format(
+      parse(paramFrom, 'dd-MM-yyyy', new Date()),
+      'LLL dd, yyyy'
+    )
+    const to = format(parse(paramTo, 'dd-MM-yyyy', new Date()), 'LLL dd, yyyy')
+    return [from, to]
+  }, [paramFrom, paramTo])
+
   return (
     <Card>
       <CardHeader>
         <CardTitle>Monthly Borrows</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
+        <CardDescription>
+          {from} - {to}
+        </CardDescription>
       </CardHeader>
       <CardContent>
         <ChartContainer config={chartConfig}>
@@ -76,7 +94,7 @@ export function MontlyBorrowChart({ data }: { data: Analysis['borrowing'] }) {
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div> */}
         <div className="leading-none text-muted-foreground">
-          Showing total borrows per month
+          Showing total borrows
         </div>
       </CardFooter>
     </Card>

components/dashboard/MostBorrowedBookChart.tsx

@@ -18,6 +18,9 @@ import {
   ChartTooltipContent,
 } from '@/components/ui/chart'
 import { Analysis } from '@/lib/types/analysis'
+import { useSearchParams } from 'next/navigation'
+import { useMemo } from 'react'
+import { format, parse } from 'date-fns'
 
 export function MostBorrowedBookChart({ data }: { data: Analysis['book'] }) {
   const chartConfig = data.reduce((acc, { title }, index) => {
@@ -33,11 +36,26 @@ export function MostBorrowedBookChart({ data }: { data: Analysis['book'] }) {
     fill: chartConfig[title].color,
   }))
 
+  const params = useSearchParams()
+  const paramFrom = params.get('from') as string
+  const paramTo = params.get('to') as string
+
+  const [from, to] = useMemo(() => {
+    const from = format(
+      parse(paramFrom, 'dd-MM-yyyy', new Date()),
+      'LLL dd, yyyy'
+    )
+    const to = format(parse(paramTo, 'dd-MM-yyyy', new Date()), 'LLL dd, yyyy')
+    return [from, to]
+  }, [paramFrom, paramTo])
+
   return (
     <Card>
       <CardHeader>
         <CardTitle>Most Borrowed Books</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
+        <CardDescription>
+          {from} - {to}
+        </CardDescription>
       </CardHeader>
       <CardContent>
         <ChartContainer config={chartConfig}>

components/dashboard/TopMembershipChart.tsx

@@ -18,6 +18,9 @@ import {
   ChartTooltipContent,
 } from '@/components/ui/chart'
 import { Analysis } from '@/lib/types/analysis'
+import { useSearchParams } from 'next/navigation'
+import { useMemo } from 'react'
+import { format, parse } from 'date-fns'
 
 export function TopMembershipChart({ data }: { data: Analysis['membership'] }) {
   const chartConfig = data.reduce((acc, { name }, index) => {
@@ -34,13 +37,28 @@ export function TopMembershipChart({ data }: { data: Analysis['membership'] }) {
     fill: chartConfig[name].color,
   }))
 
+  const params = useSearchParams()
+  const paramFrom = params.get('from') as string
+  const paramTo = params.get('to') as string
+
+  const [from, to] = useMemo(() => {
+    const from = format(
+      parse(paramFrom, 'dd-MM-yyyy', new Date()),
+      'LLL dd, yyyy'
+    )
+    const to = format(parse(paramTo, 'dd-MM-yyyy', new Date()), 'LLL dd, yyyy')
+    return [from, to]
+  }, [paramFrom, paramTo])
+
   return (
     <Card className="flex flex-col">
-      <CardHeader className="items-center pb-0">
+      <CardHeader>
         <CardTitle>Top Purchased Membership</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
+        <CardDescription>
+          {from} - {to}
+        </CardDescription>
       </CardHeader>
-      <CardContent className="flex-1 pb-0">
+      <CardContent className="flex-1">
         <ChartContainer
           config={chartConfig}
           className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
@@ -51,12 +69,12 @@ export function TopMembershipChart({ data }: { data: Analysis['membership'] }) {
           </PieChart>
         </ChartContainer>
       </CardContent>
-      <CardFooter className="flex-col gap-2 text-sm">
+      <CardFooter className="flex-col items-start gap-2 text-sm">
         {/* <div className="flex items-center gap-2 font-medium leading-none">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div> */}
         <div className="leading-none text-muted-foreground">
-          Showing top most purchased membership
+          Showing top purchased membership
         </div>
       </CardFooter>
     </Card>