many fixes

frontend/src/components/billing/BillingBalancePanel.tsx

@@ -1,35 +1,20 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import PageMeta from '../../components/common/PageMeta';
-import { useToast } from '../../components/ui/toast/ToastContainer';
-import { getCreditBalance } from '../../services/billing.api';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 import Button from '../../components/ui/button/Button';
 import { DollarLineIcon } from '../../icons';
+import { useBillingStore } from '../../store/billingStore';
 
 export default function BillingBalancePanel() {
-  const toast = useToast();
-  const [balance, setBalance] = useState<any | null>(null);
-  const [loading, setLoading] = useState(true);
+  const { balance, loading, error, loadBalance } = useBillingStore();
 
   useEffect(() => {
     loadBalance();
-  }, []);
+  }, [loadBalance]);
 
-  const loadBalance = async () => {
-    try {
-      setLoading(true);
-      const data = await getCreditBalance();
-      setBalance(data as any);
-    } catch (error: any) {
-      toast.error(`Failed to load credit balance: ${error?.message || error}`);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (loading) {
+  if (loading && !balance) {
     return (
       <div className="p-4">
         <div className="text-gray-500">Loading credit balance...</div>
@@ -51,6 +36,17 @@ export default function BillingBalancePanel() {
         </Link>
       </div>
 
+      {error && !balance && (
+        <div className="p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
+          Balance unavailable. {error}
+          <div className="mt-3">
+            <Button variant="outline" size="sm" onClick={loadBalance}>
+              Retry
+            </Button>
+          </div>
+        </div>
+      )}
+
       {balance && (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           <Card className="p-6">
@@ -89,6 +85,11 @@ export default function BillingBalancePanel() {
         </div>
       )}
 
+      {error && balance && (
+        <div className="text-sm text-amber-600 dark:text-amber-400">
+          Latest balance may be stale: {error}
+        </div>
+      )}
     </div>
   );
 }