style: add revenue monthly by year chart dashboard

src/RookieShop.Application/Reports/Queries/RevenueYear/RevenueYearHandler.cs

@@ -15,22 +15,23 @@ public sealed class RevenueYearHandler(IDatabaseFactory factory)
         const string sql = $"""
                             WITH monthly_revenue AS (
                               SELECT 
-                                to_char(o.created_date, 'Mon') AS month, 
+                                to_char(o.created_date, 'Mon') AS month_name,
                                 SUM(od.price * od.quantity) AS revenue  
                               FROM orders o
                               JOIN order_details od ON o.id = od.order_id
-                              WHERE EXTRACT(YEAR FROM o.created_date) = @year 
-                              GROUP BY to_char(o.created_date, 'Mon')  
+                              WHERE EXTRACT(YEAR FROM o.created_date) = @Year 
+                              GROUP BY to_char(o.created_date, 'Mon')
                             )
                             SELECT 
                               month_names.month AS {nameof(RevenueYearDto.Month)},
                               COALESCE(monthly_revenue.revenue, 0) AS {nameof(RevenueYearDto.Revenue)}
                             FROM (
-                              VALUES ('Jan'), ('Feb'), ('Mar'), ('Apr'), ('May'), ('Jun'), 
-                                     ('Jul'), ('Aug'), ('Sep'), ('Oct'), ('Nov'), ('Dec')
-                            ) AS month_names(month)
-                            LEFT JOIN monthly_revenue ON month_names.month = monthly_revenue.month
-                            ORDER BY month_names.month;
+                              VALUES 
+                              (1,'Jan'), (2,'Feb'), (3,'Mar'), (4,'Apr'), (5,'May'), (6,'Jun'), 
+                              (7,'Jul'), (8,'Aug'), (9,'Sep'), (10,'Oct'), (11,'Nov'), (12,'Dec')
+                            ) AS month_names(month_number, month)
+                            LEFT JOIN monthly_revenue ON month_names.month = monthly_revenue.month_name
+                            ORDER BY month_names.month_number;
                             """;
 
         using var conn = factory.GetOpenConnection();

ui/backoffice/app/(dashboard)/dashboard/page.tsx

@@ -14,9 +14,9 @@ import {
 } from "@/components/ui/card"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { Tabs, TabsContent } from "@/components/ui/tabs"
-import { BestSeller } from "@/components/custom/best-seller"
+import BestSeller from "@/components/custom/best-seller"
 import { Icons } from "@/components/custom/icons"
-import { Overview } from "@/components/custom/overview"
+import Overview from "@/components/custom/overview"
 
 export default function Dashboard() {
   const { data: DiffRevenueByMonth } = useGetDiffRevenueByMonth({

ui/backoffice/components/custom/best-seller.tsx

@@ -5,7 +5,7 @@ import useGetBestSellerProducts from "@/features/report/useGetBestSellerProducts
 
 import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 
-export function BestSeller() {
+export default function BestSeller() {
   const { data } = useGetBestSellerProducts({ top: 5 })
   return (
     <div className="space-y-8">

ui/backoffice/components/custom/overview.tsx

@@ -1,64 +1,17 @@
 "use client"
 
+import useGetRevenueByYear from "@/features/report/useGetRevenueByYear"
 import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis } from "recharts"
 
-const data = [
-  {
-    name: "Jan",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Feb",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Mar",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Apr",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "May",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Jun",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Jul",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Aug",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Sep",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Oct",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Nov",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-  {
-    name: "Dec",
-    total: Math.floor(Math.random() * 5000) + 1000,
-  },
-]
-
-export function Overview() {
+export default function Overview() {
+  const { data: RevenueByYear } = useGetRevenueByYear({
+    year: new Date().getFullYear(),
+  })
   return (
     <ResponsiveContainer width="100%" height={350}>
-      <BarChart data={data}>
+      <BarChart data={RevenueByYear}>
         <XAxis
-          dataKey="name"
+          dataKey="month"
           stroke="#888888"
           fontSize={12}
           tickLine={false}
@@ -71,7 +24,7 @@ export function Overview() {
           axisLine={false}
           tickFormatter={(value) => `$${value}`}
         />
-        <Bar dataKey="total" fill="#adfa1d" radius={[4, 4, 0, 0]} />
+        <Bar dataKey="revenue" fill="#adfa1d" radius={[4, 4, 0, 0]} />
       </BarChart>
     </ResponsiveContainer>
   )

ui/backoffice/features/report/report.service.ts

@@ -9,6 +9,8 @@ import {
   GrownCustomer,
   GrownCustomerParams,
   OrderGrownByDay,
+  RevenueByYear,
+  RevenueByYearParams,
   TodayRevenue,
 } from "./report.type"
 
@@ -48,6 +50,12 @@ class ReportService extends HttpService {
   getOrderGrownByDay(): Promise<OrderGrownByDay> {
     return this.get("/reports/orders-grown-by-day")
   }
+
+  getRevenueByYear(
+    options: Partial<RevenueByYearParams>
+  ): Promise<RevenueByYear[]> {
+    return this.get(`/reports/revenue-year?${buildQueryString(options)}`)
+  }
 }
 
 export default new ReportService()

ui/backoffice/features/report/report.type.ts

@@ -58,3 +58,14 @@ export type OrderGrownByDay = {
   growthPercentage: number
   currentDate: Date
 }
+
+// -- Revenue By Year Report
+
+export type RevenueByYear = {
+  month: string
+  revenue: number
+}
+
+export type RevenueByYearParams = {
+  year: number
+}

ui/backoffice/features/report/useGetDiffRevenueByMonth.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query"
+import { keepPreviousData, useQuery } from "@tanstack/react-query"
 
 import reportService from "./report.service"
 import { DiffRevenueByMonthParams } from "./report.type"
@@ -9,5 +9,6 @@ export default function useGetDiffRevenueByMonth(
   return useQuery({
     queryKey: ["diff-revenue-by-month"],
     queryFn: () => reportService.getDiffRevenueByMonth(options),
+    placeholderData: keepPreviousData,
   })
 }

ui/backoffice/features/report/useGetGrownCustomer.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query"
+import { keepPreviousData, useQuery } from "@tanstack/react-query"
 
 import reportService from "./report.service"
 import { GrownCustomerParams } from "./report.type"
@@ -9,5 +9,6 @@ export default function useGetGrownCustomer(
   return useQuery({
     queryKey: ["grown-customer"],
     queryFn: () => reportService.getGrownCustomer(options),
+    placeholderData: keepPreviousData,
   })
 }

ui/backoffice/features/report/useGetOrderGrownByDay.ts

@@ -1,10 +1,11 @@
-import { useQuery } from "@tanstack/react-query"
+import { keepPreviousData, useQuery } from "@tanstack/react-query"
 
 import reportService from "./report.service"
 
 export default function useGetOrderGrownByDay() {
   return useQuery({
     queryKey: ["order-grown-by-day"],
     queryFn: () => reportService.getOrderGrownByDay(),
+    placeholderData: keepPreviousData,
   })
 }

ui/backoffice/features/report/useGetRevenueByYear.ts

@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query"
+
+import reportService from "./report.service"
+import { RevenueByYearParams } from "./report.type"
+
+export default function useGetRevenueByYear(
+  options: Partial<RevenueByYearParams>
+) {
+  return useQuery({
+    queryKey: ["revenue-by-year", options],
+    queryFn: () => reportService.getRevenueByYear(options),
+  })
+}

ui/backoffice/features/report/useGetTodayRevenue.ts

@@ -1,10 +1,11 @@
-import { useQuery } from "@tanstack/react-query"
+import { keepPreviousData, useQuery } from "@tanstack/react-query"
 
 import reportService from "./report.service"
 
 export default function useGetTodayRevenue() {
   return useQuery({
     queryKey: ["total-revenue-by-day"],
     queryFn: () => reportService.getTodayRevenue(),
+    placeholderData: keepPreviousData,
   })
 }