Initial commit: igny8 project

frontend/src/components/dashboard/CreditBalanceWidget.tsx

@@ -0,0 +1,61 @@
+import { useEffect } from 'react';
+import { useBillingStore } from '../../store/billingStore';
+import ComponentCard from '../common/ComponentCard';
+
+export default function CreditBalanceWidget() {
+  const { balance, loading, loadBalance } = useBillingStore();
+  
+  useEffect(() => {
+    loadBalance();
+  }, [loadBalance]);
+  
+  if (loading && !balance) {
+    return (
+      <ComponentCard title="Credit Balance" desc="Loading...">
+        <div className="animate-pulse">Loading credit balance...</div>
+      </ComponentCard>
+    );
+  }
+  
+  if (!balance) return null;
+  
+  const usagePercentage = balance.plan_credits_per_month > 0
+    ? (balance.credits_used_this_month / balance.plan_credits_per_month) * 100
+    : 0;
+  
+  return (
+    <ComponentCard title="Credit Balance" desc="Current credit status and usage">
+      <div className="space-y-4">
+        <div>
+          <div className="flex justify-between items-center mb-2">
+            <span className="text-sm text-gray-600 dark:text-gray-400">Current Credits</span>
+            <span className="text-2xl font-bold text-primary">{balance.credits}</span>
+          </div>
+        </div>
+        
+        <div>
+          <div className="flex justify-between items-center mb-2">
+            <span className="text-sm text-gray-600 dark:text-gray-400">Used This Month</span>
+            <span className="text-sm font-medium">
+              {balance.credits_used_this_month} / {balance.plan_credits_per_month}
+            </span>
+          </div>
+          <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
+            <div
+              className="bg-primary h-2.5 rounded-full transition-all"
+              style={{ width: `${Math.min(usagePercentage, 100)}%` }}
+            />
+          </div>
+        </div>
+        
+        <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
+          <div className="flex justify-between items-center">
+            <span className="text-sm text-gray-600 dark:text-gray-400">Remaining</span>
+            <span className="text-sm font-medium text-success">{balance.credits_remaining}</span>
+          </div>
+        </div>
+      </div>
+    </ComponentCard>
+  );
+}
+