feat: add YAxis to all chart components for improved data visualization

resources/js/components/charts/revenue-vs-profit-chart.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
 
 import {
   Card,
@@ -15,7 +15,7 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from "@/components/ui/chart"
-import { formatCurrency } from "@/lib/formatters"
+import { formatCurrency, formatShortCurrency } from "@/lib/formatters"
 
 export const description = "Perbandingan Pendapatan vs Laba Bersih per bulan."
 
@@ -55,6 +55,13 @@ export function RevenueVsProfitChart({ data }: { data: any[] }) {
               tickMargin={8}
               tickFormatter={(value) => value.slice(0, 3)}
             />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={formatShortCurrency}
+              width={60}
+            />
             <ChartTooltip
               cursor={false}
               content={

resources/js/components/charts/revenue-vs-purchases-chart.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
 
 import {
   Card,
@@ -17,7 +17,7 @@ import {
   ChartTooltipContent,
   type ChartConfig,
 } from "@/components/ui/chart"
-import { formatCurrency } from "@/lib/formatters"
+import { formatCurrency, formatShortCurrency } from "@/lib/formatters"
 
 export const description = "Perbandingan total penjualan dan belanja per bulan."
 
@@ -50,6 +50,13 @@ export function RevenueVsPurchasesChart({ data }: { data: any[] }) {
               axisLine={false}
               tickFormatter={(value) => value.slice(0, 3)}
             />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tickFormatter={formatShortCurrency}
+              width={60}
+            />
             <ChartTooltip
               cursor={false}
               content={

resources/js/components/charts/sales-by-hour-chart.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"
 
 import {
     Card,
@@ -82,6 +82,12 @@ export function SalesByHourChart({
                             axisLine={false}
                             tickMargin={8}
                         />
+                        <YAxis
+                            tickLine={false}
+                            axisLine={false}
+                            tickMargin={8}
+                            width={30}
+                        />
                         <ChartTooltip
                             cursor={false}
                             content={<ChartTooltipContent indicator="dot" />}

resources/js/components/charts/transaction-volume-chart.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { GitCommitVertical, TrendingUp } from "lucide-react"
-import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
 
 import {
   Card,
@@ -57,6 +57,12 @@ export function TransactionVolumeChart({ data }: { data: any[] }) {
               tickMargin={8}
               tickFormatter={(value) => value.slice(0, 3)}
             />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              width={30}
+            />
             <ChartTooltip
               cursor={false}
               content={