From 7f87e0ee44c8aaadf2944eac6247ea5821fbc2cd Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Mon, 21 Apr 2025 15:01:15 +0700
Subject: [PATCH] fix grid balance card component

---
 src/pages/dashboards/home/blocks/BalanceCard.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pages/dashboards/home/blocks/BalanceCard.tsx b/src/pages/dashboards/home/blocks/BalanceCard.tsx
index 97b43d1..6391139 100644
--- a/src/pages/dashboards/home/blocks/BalanceCard.tsx
+++ b/src/pages/dashboards/home/blocks/BalanceCard.tsx
@@ -29,6 +29,10 @@ const BalanceCard = ({ id }: BalanceCardProps) => {
     }).format(value);
   };
 
+  const formatNumberWithDots = (value: number) => {
+    return value.toLocaleString('id-ID');
+  };
+
   const getColorClass = (amount: number) => {
     if (amount > 0) return 'bg-amber-300';
     if (amount > 500) return 'bg-blue-500';
@@ -79,9 +83,11 @@ const BalanceCard = ({ id }: BalanceCardProps) => {
 
               <div className="mt-3 pt-3 border-t border-gray-200 flex items-center justify-between">
                 <div className="text-xs text-gray-500">Credit Limit:</div>
-                <div className="text-sm">{wallet.credit_limit}</div>
+                <div className="text-sm">{formatNumberWithDots(wallet.credit_limit)}</div>
+              </div>
+              <div className="mt-3 flex items-center justify-between">
                 <div className="text-xs text-gray-500">Monthly Limit:</div>
-                <div className="text-sm">{wallet.monthly_limit}</div>
+                <div className="text-sm">{formatNumberWithDots(wallet.monthly_limit)}</div>
               </div>
             </div>
           </div>