udpates

frontend/src/components/billing/BillingUsagePanel.tsx

@@ -19,7 +19,11 @@ const CREDIT_COSTS: Record<string, { cost: number | string; description: string
   site_page_generation: { cost: 20, description: 'Per page generated' },
 };
 
-export default function BillingUsagePanel() {
+interface BillingUsagePanelProps {
+  showOnlyActivity?: boolean;
+}
+
+export default function BillingUsagePanel({ showOnlyActivity = false }: BillingUsagePanelProps) {
   const toast = useToast();
   const [transactions, setTransactions] = useState<BillingTransaction[]>([]);
   const [loading, setLoading] = useState(true);
@@ -56,6 +60,72 @@ export default function BillingUsagePanel() {
     );
   }
 
+  // If only showing activity table, render just that
+  if (showOnlyActivity) {
+    return (
+      <div>
+        <Card className="p-6">
+          <div className="mb-6">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Activity</h2>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+              Complete history of credit transactions
+            </p>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-gray-200 dark:border-gray-700">
+                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Date</th>
+                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Type</th>
+                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Amount</th>
+                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Description</th>
+                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Reference</th>
+                </tr>
+              </thead>
+              <tbody>
+                {paginated.map((txn) => (
+                  <tr key={txn.id} className="border-b border-gray-100 dark:border-gray-800">
+                    <td className="py-3 px-4 text-sm text-gray-900 dark:text-white">{new Date(txn.created_at).toLocaleString()}</td>
+                    <td className="py-3 px-4">
+                      <Badge variant="soft" tone={txn.amount >= 0 ? 'success' : 'danger'}>{txn.transaction_type}</Badge>
+                    </td>
+                    <td className={`py-3 px-4 text-sm font-medium ${txn.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
+                      {txn.amount >= 0 ? '+' : ''}{txn.amount}
+                    </td>
+                    <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">{txn.description}</td>
+                    <td className="py-3 px-4 text-sm text-gray-500 dark:text-gray-500">{txn.reference_id || '-'}</td>
+                  </tr>
+                ))}
+                {transactions.length === 0 && (
+                  <tr>
+                    <td colSpan={5} className="py-8 text-center text-gray-500 dark:text-gray-400">No transactions yet</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+          {transactions.length > 0 && (
+            <div className="mt-4 flex justify-between items-center">
+              <div className="text-sm text-gray-500 dark:text-gray-400">
+                Showing {(page - 1) * pageSize + 1}-{Math.min(page * pageSize, transactions.length)} of {transactions.length}
+              </div>
+              <CompactPagination
+                currentPage={page}
+                totalPages={totalPages}
+                pageSize={pageSize}
+                onPageChange={(p) => setPage(p)}
+                onPageSizeChange={(size) => {
+                  setPageSize(size);
+                  setPage(1);
+                }}
+              />
+            </div>
+          )}
+        </Card>
+      </div>
+    );
+  }
+
   return (
     <div className="space-y-6">
       {balance && (

frontend/src/components/billing/CreditCostBreakdownPanel.tsx

@@ -0,0 +1,195 @@
+/**
+ * Credit Cost Breakdown Panel
+ * Displays cost per operation and total costs
+ */
+
+import { useState, useEffect } from 'react';
+import { Card } from '../ui/card';
+import { DollarSign, TrendingUp, AlertCircle } from 'lucide-react';
+import Badge from '../ui/badge/Badge';
+import { getUsageAnalytics, type UsageAnalytics } from '../../services/billing.api';
+import { useToast } from '../ui/toast/ToastContainer';
+
+export default function CreditCostBreakdownPanel() {
+  const toast = useToast();
+  const [analytics, setAnalytics] = useState<UsageAnalytics | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string>('');
+  const [period] = useState(30); // Last 30 days
+
+  useEffect(() => {
+    loadAnalytics();
+  }, []);
+
+  const loadAnalytics = async () => {
+    try {
+      setLoading(true);
+      setError('');
+      const data = await getUsageAnalytics(period);
+      setAnalytics(data);
+    } catch (err: any) {
+      const message = err?.message || 'Failed to load cost analytics';
+      setError(message);
+      toast.error(message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="animate-pulse">
+          <div className="h-32 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4"></div>
+          <div className="h-64 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !analytics) {
+    return (
+      <Card className="p-6 text-center">
+        <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+        <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+          Failed to Load Cost Data
+        </h3>
+        <p className="text-gray-600 dark:text-gray-400 mb-4">{error || 'Unknown error'}</p>
+        <button
+          onClick={loadAnalytics}
+          className="px-4 py-2 bg-[var(--color-brand-500)] text-white rounded-lg hover:bg-[var(--color-brand-600)]"
+        >
+          Retry
+        </button>
+      </Card>
+    );
+  }
+
+  // Color palette for different operation types
+  const operationColors = [
+    { bg: 'bg-[var(--color-brand-50)]', text: 'text-[var(--color-brand-500)]', border: 'border-[var(--color-brand-200)]' },
+    { bg: 'bg-[var(--color-success-50)]', text: 'text-[var(--color-success-500)]', border: 'border-[var(--color-success-200)]' },
+    { bg: 'bg-[var(--color-info-50)]', text: 'text-[var(--color-info-500)]', border: 'border-[var(--color-info-200)]' },
+    { bg: 'bg-[var(--color-purple-50)]', text: 'text-[var(--color-purple-500)]', border: 'border-[var(--color-purple-200)]' },
+    { bg: 'bg-[var(--color-warning-50)]', text: 'text-[var(--color-warning-500)]', border: 'border-[var(--color-warning-200)]' },
+    { bg: 'bg-[var(--color-teal-50)]', text: 'text-[var(--color-teal-500)]', border: 'border-[var(--color-teal-200)]' },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Summary Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card className="p-6 border-l-4 border-[var(--color-brand-500)]">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="p-2 bg-[var(--color-brand-50)] dark:bg-[var(--color-brand-900)]/20 rounded-lg">
+              <DollarSign className="w-5 h-5 text-[var(--color-brand-500)]" />
+            </div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">Total Cost</div>
+          </div>
+          <div className="text-3xl font-bold text-gray-900 dark:text-white">
+            ${((analytics.total_usage || 0) * 0.01).toFixed(2)}
+          </div>
+          <div className="text-xs text-gray-500 mt-1">Last {period} days</div>
+        </Card>
+
+        <Card className="p-6 border-l-4 border-[var(--color-success-500)]">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="p-2 bg-[var(--color-success-50)] dark:bg-[var(--color-success-900)]/20 rounded-lg">
+              <TrendingUp className="w-5 h-5 text-[var(--color-success-500)]" />
+            </div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">Avg Cost/Day</div>
+          </div>
+          <div className="text-3xl font-bold text-gray-900 dark:text-white">
+            ${(((analytics.total_usage || 0) * 0.01) / period).toFixed(2)}
+          </div>
+          <div className="text-xs text-gray-500 mt-1">Daily average</div>
+        </Card>
+
+        <Card className="p-6 border-l-4 border-[var(--color-info-500)]">
+          <div className="flex items-center gap-3 mb-2">
+            <div className="p-2 bg-[var(--color-info-50)] dark:bg-[var(--color-info-900)]/20 rounded-lg">
+              <DollarSign className="w-5 h-5 text-[var(--color-info-500)]" />
+            </div>
+            <div className="text-sm text-gray-600 dark:text-gray-400">Cost per Credit</div>
+          </div>
+          <div className="text-3xl font-bold text-gray-900 dark:text-white">
+            $0.01
+          </div>
+          <div className="text-xs text-gray-500 mt-1">Standard rate</div>
+        </Card>
+      </div>
+
+      {/* Cost by Operation */}
+      <Card className="p-6">
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+              Cost by Operation Type
+            </h3>
+            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+              Breakdown of credit costs per operation
+            </p>
+          </div>
+          <Badge variant="soft" tone="brand">
+            Last {period} days
+          </Badge>
+        </div>
+
+        <div className="space-y-3">
+          {analytics.usage_by_type.map((item: { transaction_type: string; total: number; count: number }, idx: number) => {
+            const colorScheme = operationColors[idx % operationColors.length];
+            const costUSD = (item.total * 0.01).toFixed(2);
+            const avgPerOperation = item.count > 0 ? (item.total / item.count).toFixed(0) : '0';
+
+            return (
+              <div 
+                key={idx} 
+                className={`flex items-center justify-between p-4 rounded-lg border-l-4 ${colorScheme.border} ${colorScheme.bg} dark:bg-opacity-10 transition-all hover:shadow-md`}
+              >
+                <div className="flex-1">
+                  <div className="flex items-center gap-3 mb-2">
+                    <h4 className={`font-semibold ${colorScheme.text}`}>
+                      {item.transaction_type}
+                    </h4>
+                    <Badge variant="soft" tone="neutral" size="xs">
+                      {item.count} ops
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-4 text-sm">
+                    <div>
+                      <span className="text-gray-500 dark:text-gray-400">Credits: </span>
+                      <span className="font-medium text-gray-900 dark:text-white">
+                        {item.total.toLocaleString()}
+                      </span>
+                    </div>
+                    <div>
+                      <span className="text-gray-500 dark:text-gray-400">Avg/op: </span>
+                      <span className="font-medium text-gray-900 dark:text-white">
+                        {avgPerOperation} credits
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div className="text-right ml-4">
+                  <div className={`text-2xl font-bold ${colorScheme.text}`}>
+                    ${costUSD}
+                  </div>
+                  <div className="text-xs text-gray-500 mt-1">USD</div>
+                </div>
+              </div>
+            );
+          })}
+          
+          {(!analytics.usage_by_type || analytics.usage_by_type.length === 0) && (
+            <div className="text-center py-12">
+              <DollarSign className="w-12 h-12 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
+              <p className="text-gray-500 dark:text-gray-400">
+                No cost data available for this period
+              </p>
+            </div>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+}

frontend/src/components/billing/CreditCostsPanel.tsx

@@ -0,0 +1,92 @@
+/**
+ * Credit Costs Reference Panel
+ * Shows credit cost for each operation type
+ */
+
+import { Card } from '../ui/card';
+import Badge from '../ui/badge/Badge';
+
+// Credit costs per operation
+const CREDIT_COSTS: Record<string, { cost: number | string; description: string; color: string }> = {
+  clustering: { 
+    cost: 10, 
+    description: 'Per clustering request',
+    color: 'brand'
+  },
+  idea_generation: { 
+    cost: 15, 
+    description: 'Per cluster → ideas request',
+    color: 'brand'
+  },
+  content_generation: { 
+    cost: '1 per 100 words', 
+    description: 'Per 100 words generated',
+    color: 'brand'
+  },
+  image_prompt_extraction: { 
+    cost: 2, 
+    description: 'Per content piece',
+    color: 'brand'
+  },
+  image_generation: { 
+    cost: 5, 
+    description: 'Per image generated',
+    color: 'brand'
+  },
+  linking: { 
+    cost: 8, 
+    description: 'Per content piece',
+    color: 'brand'
+  },
+  optimization: { 
+    cost: '1 per 200 words', 
+    description: 'Per 200 words optimized',
+    color: 'brand'
+  },
+  site_structure_generation: { 
+    cost: 50, 
+    description: 'Per site blueprint',
+    color: 'brand'
+  },
+  site_page_generation: { 
+    cost: 20, 
+    description: 'Per page generated',
+    color: 'brand'
+  },
+};
+
+export default function CreditCostsPanel() {
+  return (
+    <Card className="p-6">
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Costs per Operation</h2>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+          Understanding how credits are consumed for each operation type
+        </p>
+      </div>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {Object.entries(CREDIT_COSTS).map(([operation, info]) => (
+          <div 
+            key={operation} 
+            className="flex items-start justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-[var(--color-brand-300)] dark:hover:border-[var(--color-brand-600)] transition-colors"
+          >
+            <div className="flex-1">
+              <div className="font-medium text-gray-900 dark:text-white capitalize mb-1">
+                {operation.replace(/_/g, ' ')}
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">
+                {info.description}
+              </div>
+            </div>
+            <div className="ml-4 text-right flex-shrink-0">
+              <Badge variant="soft" tone="brand" className="font-semibold">
+                {typeof info.cost === 'number' ? `${info.cost} credits` : info.cost}
+              </Badge>
+            </div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+}

frontend/src/components/billing/UsageLimitsPanel.tsx

@@ -16,29 +16,32 @@ interface LimitCardProps {
   usage: LimitUsage;
   type: 'hard' | 'monthly';
   daysUntilReset?: number;
+  accentColor?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan';
 }
 
-function LimitCard({ title, icon, usage, type, daysUntilReset }: LimitCardProps) {
+function LimitCard({ title, icon, usage, type, daysUntilReset, accentColor = 'brand' }: LimitCardProps) {
   const percentage = usage.percentage_used;
   const isWarning = percentage >= 80;
   const isDanger = percentage >= 95;
   
-  let barColor = 'bg-blue-500';
-  let badgeVariant: 'default' | 'warning' | 'danger' = 'default';
+  // Determine progress bar color
+  let barColor = `bg-[var(--color-${accentColor}-500)]`;
+  let badgeVariant: 'soft' = 'soft';
+  let badgeTone: 'brand' | 'warning' | 'danger' | 'success' | 'info' | 'purple' | 'indigo' | 'pink' | 'teal' | 'cyan' = accentColor;
   
   if (isDanger) {
-    barColor = 'bg-red-500';
-    badgeVariant = 'danger';
+    barColor = 'bg-[var(--color-danger)]';
+    badgeTone = 'danger';
   } else if (isWarning) {
-    barColor = 'bg-yellow-500';
-    badgeVariant = 'warning';
+    barColor = 'bg-[var(--color-warning)]';
+    badgeTone = 'warning';
   }
 
   return (
     <Card className="p-4 hover:shadow-md transition-shadow">
       <div className="flex items-start justify-between mb-3">
         <div className="flex items-center gap-3">
-          <div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-blue-600 dark:text-blue-400">
+          <div className={`p-2 bg-[var(--color-${accentColor}-50)] dark:bg-[var(--color-${accentColor}-900)]/20 rounded-lg text-[var(--color-${accentColor}-500)]`}>
             {icon}
           </div>
           <div>
@@ -50,7 +53,7 @@ function LimitCard({ title, icon, usage, type, daysUntilReset }: LimitCardProps)
             </p>
           </div>
         </div>
-        <Badge variant={badgeVariant}>{percentage}%</Badge>
+        <Badge variant={badgeVariant} tone={badgeTone}>{percentage}%</Badge>
       </div>
 
       {/* Progress Bar */}
@@ -137,7 +140,7 @@ export default function UsageLimitsPanel() {
         <p className="text-gray-600 dark:text-gray-400 mb-4">{error || 'Unknown error'}</p>
         <button
           onClick={loadUsageSummary}
-          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+          className="px-4 py-2 bg-[var(--color-brand-500)] text-white rounded-lg hover:bg-[var(--color-brand-600)]"
         >
           Retry
         </button>
@@ -145,19 +148,19 @@ export default function UsageLimitsPanel() {
     );
   }
 
-  const hardLimitIcons = {
-    sites: <Globe className="w-5 h-5" />,
-    users: <Users className="w-5 h-5" />,
-    keywords: <Tag className="w-5 h-5" />,
-    clusters: <TrendingUp className="w-5 h-5" />,
+  const hardLimitConfig = {
+    sites: { icon: <Globe className="w-5 h-5" />, color: 'success' as const },
+    users: { icon: <Users className="w-5 h-5" />, color: 'info' as const },
+    keywords: { icon: <Tag className="w-5 h-5" />, color: 'purple' as const },
+    clusters: { icon: <TrendingUp className="w-5 h-5" />, color: 'warning' as const },
   };
 
-  const monthlyLimitIcons = {
-    content_ideas: <FileText className="w-5 h-5" />,
-    content_words: <FileText className="w-5 h-5" />,
-    images_basic: <Image className="w-5 h-5" />,
-    images_premium: <Zap className="w-5 h-5" />,
-    image_prompts: <Image className="w-5 h-5" />,
+  const monthlyLimitConfig = {
+    content_ideas: { icon: <FileText className="w-5 h-5" />, color: 'brand' as const },
+    content_words: { icon: <FileText className="w-5 h-5" />, color: 'indigo' as const },
+    images_basic: { icon: <Image className="w-5 h-5" />, color: 'teal' as const },
+    images_premium: { icon: <Zap className="w-5 h-5" />, color: 'cyan' as const },
+    image_prompts: { icon: <Image className="w-5 h-5" />, color: 'pink' as const },
   };
 
   return (
@@ -171,7 +174,7 @@ export default function UsageLimitsPanel() {
           </p>
         </div>
         {summary.days_until_reset !== undefined && (
-          <Badge variant="default">
+          <Badge variant="soft" tone="brand">
             Resets in {summary.days_until_reset} days
           </Badge>
         )}
@@ -183,15 +186,19 @@ export default function UsageLimitsPanel() {
           Account Limits
         </h3>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          {Object.entries(summary.hard_limits).map(([key, usage]) => (
-            <LimitCard
-              key={key}
-              title={usage.display_name}
-              icon={hardLimitIcons[key as keyof typeof hardLimitIcons]}
-              usage={usage}
-              type="hard"
-            />
-          ))}
+          {Object.entries(summary.hard_limits).map(([key, usage]) => {
+            const config = hardLimitConfig[key as keyof typeof hardLimitConfig];
+            return (
+              <LimitCard
+                key={key}
+                title={usage.display_name}
+                icon={config.icon}
+                usage={usage}
+                type="hard"
+                accentColor={config.color}
+              />
+            );
+          })}
         </div>
       </div>
 
@@ -201,25 +208,29 @@ export default function UsageLimitsPanel() {
           Monthly Usage Limits
         </h3>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {Object.entries(summary.monthly_limits).map(([key, usage]) => (
-            <LimitCard
-              key={key}
-              title={usage.display_name}
-              icon={monthlyLimitIcons[key as keyof typeof monthlyLimitIcons]}
-              usage={usage}
-              type="monthly"
-              daysUntilReset={summary.days_until_reset}
-            />
-          ))}
+          {Object.entries(summary.monthly_limits).map(([key, usage]) => {
+            const config = monthlyLimitConfig[key as keyof typeof monthlyLimitConfig];
+            return (
+              <LimitCard
+                key={key}
+                title={usage.display_name}
+                icon={config.icon}
+                usage={usage}
+                type="monthly"
+                daysUntilReset={summary.days_until_reset}
+                accentColor={config.color}
+              />
+            );
+          })}
         </div>
       </div>
 
       {/* Upgrade CTA if approaching limits */}
       {(Object.values(summary.hard_limits).some(u => u.percentage_used >= 80) ||
         Object.values(summary.monthly_limits).some(u => u.percentage_used >= 80)) && (
-        <Card className="p-6 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-blue-200 dark:border-blue-700">
+        <Card className="p-6 bg-gradient-to-r from-[var(--color-brand-50)] to-[var(--color-brand-100)] dark:from-[var(--color-brand-900)]/20 dark:to-[var(--color-brand-900)]/10 border-[var(--color-brand-200)] dark:border-[var(--color-brand-700)]">
           <div className="flex items-start gap-4">
-            <div className="p-3 bg-blue-600 rounded-lg text-white">
+            <div className="p-3 bg-[var(--color-brand-500)] rounded-lg text-white">
               <TrendingUp className="w-6 h-6" />
             </div>
             <div className="flex-1">
@@ -231,10 +242,10 @@ export default function UsageLimitsPanel() {
                 and avoid interruptions.
               </p>
               <a
-                href="/account/plans-and-billing"
-                className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                href="/account/plans-and-billing?tab=purchase"
+                className="inline-flex items-center px-4 py-2 bg-[var(--color-brand-500)] text-white rounded-lg hover:bg-[var(--color-brand-600)] transition-colors"
               >
-                View Plans & Upgrade
+                Purchase Credits
               </a>
             </div>
           </div>