feat: add CreditsBalance component and integrate into dashboard and navbar

- Introduced a new CreditsBalance component to display user credits.
- Integrated CreditsBalance into DashboardHeader, Navbar, and NavbarMobile for improved visibility of user credits.
- Enhanced user interaction by allowing navigation to the credits settings page.

src/components/dashboard/dashboard-header.tsx

@@ -11,6 +11,7 @@ import React, { type ReactNode } from 'react';
 import LocaleSwitcher from '../layout/locale-switcher';
 import { ModeSwitcher } from '../layout/mode-switcher';
 import { ThemeSelector } from '../layout/theme-selector';
+import { CreditsBalance } from '../layout/credits-balance';
 
 interface DashboardBreadcrumbItem {
   label: string;
@@ -72,6 +73,7 @@ export function DashboardHeader({
         <div className="ml-auto flex items-center gap-3 px-4">
           {actions}
 
+          <CreditsBalance />
           {isDemo && <ThemeSelector />}
           <ModeSwitcher />
           <LocaleSwitcher />

src/components/layout/credits-balance.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { getCreditsAction } from '@/actions/credits.action';
+import { Button } from '@/components/ui/button';
+import { useLocaleRouter } from '@/i18n/navigation';
+import { Routes } from '@/routes';
+import { useTransactionStore } from '@/stores/transaction-store';
+import { CoinsIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export function CreditsBalance() {
+  const router = useLocaleRouter();
+  const { refreshTrigger } = useTransactionStore();
+  const [credits, setCredits] = useState<number>(0);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchCredits = async () => {
+      try {
+        const result = await getCreditsAction();
+        if (result?.data?.success && result.data.credits !== undefined) {
+          setCredits(result.data.credits);
+        }
+      } catch (error) {
+        console.error('CreditsBalance, fetch credits error:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCredits();
+  }, [refreshTrigger]);
+
+  const handleClick = () => {
+    router.push(Routes.SettingsCredits);
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="h-8 gap-2 px-2 text-sm font-medium cursor-pointer"
+      onClick={handleClick}
+    >
+      <CoinsIcon className="h-4 w-4 text-primary" />
+      <span className="text-foreground">
+        {loading ? '...' : credits.toLocaleString()}
+      </span>
+    </Button>
+  );
+}

src/components/layout/navbar-mobile.tsx

@@ -28,6 +28,7 @@ import { useEffect, useState } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 import { Skeleton } from '../ui/skeleton';
 import { UserButtonMobile } from './user-button-mobile';
+import { CreditsBalance } from './credits-balance';
 
 export function NavbarMobile({
   className,
@@ -94,7 +95,10 @@ export function NavbarMobile({
           {isPending ? (
             <Skeleton className="size-8 border rounded-full" />
           ) : currentUser ? (
-            <UserButtonMobile user={currentUser} />
+            <>
+              <CreditsBalance />
+              <UserButtonMobile user={currentUser} />
+            </>
           ) : null}
 
           <Button

src/components/layout/navbar.tsx

@@ -29,6 +29,7 @@ import { useState } from 'react';
 import { useEffect } from 'react';
 import { Skeleton } from '../ui/skeleton';
 import LocaleSwitcher from './locale-switcher';
+import { CreditsBalance } from './credits-balance';
 
 interface NavBarProps {
   scroll?: boolean;
@@ -222,7 +223,10 @@ export function Navbar({ scroll }: NavBarProps) {
             {!mounted || isPending ? (
               <Skeleton className="size-8 border rounded-full" />
             ) : currentUser ? (
-              <UserButton user={currentUser} />
+              <>
+                <CreditsBalance />
+                <UserButton user={currentUser} />
+              </>
             ) : (
               <div className="flex items-center gap-x-4">
                 <LoginWrapper mode="modal" asChild>

src/components/settings/credits/stripe-payment-form.tsx

@@ -2,7 +2,7 @@
 
 import { confirmCreditPayment } from '@/actions/credits.action';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardHeader, CardTitle } from '@/components/ui/card';
 import { formatPrice } from '@/lib/formatter';
 import { useTransactionStore } from '@/stores/transaction-store';
 import {
@@ -143,7 +143,7 @@ function PaymentForm({
     <div className="space-y-6">
       <Card>
         <CardHeader>
-          <CardTitle>
+          <CardTitle className="space-y-2">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-2">
                 <CoinsIcon className="h-4 w-4" />
@@ -155,16 +155,12 @@ function PaymentForm({
                 {formatPrice(packageInfo.price, 'USD')}
               </div>
             </div>
+            {/* <div className="text-sm text-muted-foreground flex items-center gap-2">
+              <CircleCheckBigIcon className="h-4 w-4 text-green-500" />
+              {packageInfo.description}
+            </div> */}
           </CardTitle>
         </CardHeader>
-        <CardContent>
-          <div className="text-xs text-muted-foreground space-y-2">
-            <p>
-              We use Stripe, a trusted global payment provider, to process your payment.
-              For your security, your payment details are handled directly by Stripe and never touch our servers.
-            </p>
-          </div>
-        </CardContent>
       </Card>
 
       <form onSubmit={handleSubmit} className="space-y-8">
@@ -187,6 +183,7 @@ function PaymentForm({
             {processing ? (
               <>
                 <Loader2Icon className="h-4 w-4 animate-spin" />
+                Processing...
               </>
             ) : (
               <>