many fixes

backend/igny8_core/business/billing/admin.py

@@ -3,7 +3,7 @@ Billing Business Logic Admin
 """
 from django.contrib import admin
 from django.utils.html import format_html
-from .models import CreditCostConfig
+from .models import CreditCostConfig, AccountPaymentMethod
 
 
 @admin.register(CreditCostConfig)
@@ -79,3 +79,32 @@ class CreditCostConfigAdmin(admin.ModelAdmin):
         """Track who made the change"""
         obj.updated_by = request.user
         super().save_model(request, obj, form, change)
+
+
+@admin.register(AccountPaymentMethod)
+class AccountPaymentMethodAdmin(admin.ModelAdmin):
+    list_display = [
+        'display_name',
+        'type',
+        'account',
+        'is_default',
+        'is_enabled',
+        'country_code',
+        'is_verified',
+        'updated_at',
+    ]
+    list_filter = ['type', 'is_default', 'is_enabled', 'is_verified', 'country_code']
+    search_fields = ['display_name', 'account__name', 'account__id']
+    readonly_fields = ['created_at', 'updated_at']
+    fieldsets = (
+        ('Payment Method', {
+            'fields': ('account', 'type', 'display_name', 'is_default', 'is_enabled', 'is_verified', 'country_code')
+        }),
+        ('Instructions / Metadata', {
+            'fields': ('instructions', 'metadata')
+        }),
+        ('Timestamps', {
+            'fields': ('created_at', 'updated_at'),
+            'classes': ('collapse',)
+        }),
+    )

backend/igny8_core/business/billing/models.py

@@ -457,3 +457,43 @@ class PaymentMethodConfig(models.Model):
     
     def __str__(self):
         return f"{self.country_code} - {self.get_payment_method_display()}"
+
+
+class AccountPaymentMethod(AccountBaseModel):
+    """
+    Account-scoped payment methods (Stripe/PayPal/manual bank/wallet).
+    Only metadata/refs are stored here; no secrets.
+    """
+    PAYMENT_METHOD_CHOICES = [
+        ('stripe', 'Stripe'),
+        ('paypal', 'PayPal'),
+        ('bank_transfer', 'Bank Transfer'),
+        ('local_wallet', 'Local Wallet'),
+    ]
+
+    type = models.CharField(max_length=50, choices=PAYMENT_METHOD_CHOICES, db_index=True)
+    display_name = models.CharField(max_length=100, help_text="User-visible label", default='')
+    is_default = models.BooleanField(default=False, db_index=True)
+    is_enabled = models.BooleanField(default=True, db_index=True)
+    is_verified = models.BooleanField(default=False, db_index=True)
+    country_code = models.CharField(max_length=2, blank=True, default='', help_text="ISO-2 country code (optional)")
+
+    # Manual/bank/local wallet details (non-sensitive metadata)
+    instructions = models.TextField(blank=True, default='')
+    metadata = models.JSONField(default=dict, blank=True, help_text="Provider references or display metadata")
+
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
+
+    class Meta:
+        app_label = 'billing'
+        db_table = 'igny8_account_payment_methods'
+        ordering = ['-is_default', 'display_name', 'id']
+        indexes = [
+            models.Index(fields=['account', 'is_default']),
+            models.Index(fields=['account', 'type']),
+        ]
+        unique_together = [['account', 'display_name']]
+
+    def __str__(self):
+        return f"{self.account_id} - {self.display_name} ({self.type})"

backend/igny8_core/business/billing/urls.py

@@ -8,7 +8,8 @@ from .views import (
     PaymentViewSet,
     CreditPackageViewSet,
     CreditTransactionViewSet,
-    AdminBillingViewSet
+    AdminBillingViewSet,
+    AccountPaymentMethodViewSet,
 )
 
 router = DefaultRouter()
@@ -17,9 +18,10 @@ router.register(r'payments', PaymentViewSet, basename='payment')
 router.register(r'credit-packages', CreditPackageViewSet, basename='credit-package')
 router.register(r'transactions', CreditTransactionViewSet, basename='transaction')
 router.register(r'admin', AdminBillingViewSet, basename='admin-billing')
+router.register(r'payment-methods', AccountPaymentMethodViewSet, basename='payment-method')
 
 urlpatterns = [
-    # Payment methods alias for easier frontend access
-    path('payment-methods/', PaymentViewSet.as_view({'get': 'available_methods'}), name='payment-methods'),
+    # Country/config-driven available methods (legacy alias)
+    path('payment-methods/available/', PaymentViewSet.as_view({'get': 'available_methods'}), name='payment-methods-available'),
     path('', include(router.urls)),
 ]

backend/igny8_core/business/billing/views.py

@@ -2,7 +2,7 @@
 Billing API Views
 Comprehensive billing endpoints for invoices, payments, credit packages
 """
-from rest_framework import viewsets, status
+from rest_framework import viewsets, status, serializers
 from rest_framework.decorators import action
 from rest_framework.response import Response
 from rest_framework.permissions import IsAuthenticated
@@ -10,7 +10,14 @@ from django.http import HttpResponse
 from django.shortcuts import get_object_or_404
 from django.db import models
 
-from .models import Invoice, Payment, CreditPackage, PaymentMethodConfig, CreditTransaction
+from .models import (
+    Invoice,
+    Payment,
+    CreditPackage,
+    PaymentMethodConfig,
+    CreditTransaction,
+    AccountPaymentMethod,
+)
 from .services.invoice_service import InvoiceService
 from .services.payment_service import PaymentService
 
@@ -172,6 +179,69 @@ class PaymentViewSet(viewsets.ViewSet):
         }, status=status.HTTP_201_CREATED)
 
 
+class AccountPaymentMethodSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = AccountPaymentMethod
+        fields = [
+            'id',
+            'type',
+            'display_name',
+            'is_default',
+            'is_enabled',
+            'is_verified',
+            'country_code',
+            'instructions',
+            'metadata',
+            'created_at',
+            'updated_at',
+        ]
+        read_only_fields = ['id', 'is_verified', 'created_at', 'updated_at']
+
+
+class AccountPaymentMethodViewSet(viewsets.ModelViewSet):
+    """
+    CRUD for account-scoped payment methods (Stripe/PayPal/manual bank/local_wallet).
+    """
+    serializer_class = AccountPaymentMethodSerializer
+    permission_classes = [IsAuthenticated]
+
+    def get_queryset(self):
+        account = getattr(self.request.user, 'account', None)
+        qs = AccountPaymentMethod.objects.all()
+        if account:
+            qs = qs.filter(account=account)
+        else:
+            qs = qs.none()
+        return qs.order_by('-is_default', 'display_name', 'id')
+
+    def perform_create(self, serializer):
+        account = self.request.user.account
+        with models.transaction.atomic():
+            obj = serializer.save(account=account)
+            make_default = serializer.validated_data.get('is_default') or not AccountPaymentMethod.objects.filter(account=account, is_default=True).exists()
+            if make_default:
+                AccountPaymentMethod.objects.filter(account=account).exclude(id=obj.id).update(is_default=False)
+                obj.is_default = True
+                obj.save(update_fields=['is_default'])
+
+    def perform_update(self, serializer):
+        account = self.request.user.account
+        with models.transaction.atomic():
+            obj = serializer.save()
+            if serializer.validated_data.get('is_default'):
+                AccountPaymentMethod.objects.filter(account=account).exclude(id=obj.id).update(is_default=False)
+
+    @action(detail=True, methods=['post'])
+    def set_default(self, request, pk=None):
+        account = request.user.account
+        method = get_object_or_404(AccountPaymentMethod, id=pk, account=account)
+        with models.transaction.atomic():
+            AccountPaymentMethod.objects.filter(account=account).update(is_default=False)
+            method.is_default = True
+            method.save(update_fields=['is_default'])
+        return Response({'message': 'Default payment method updated', 'id': method.id})
+
+
 class CreditPackageViewSet(viewsets.ViewSet):
     """Credit package endpoints"""
     permission_classes = [IsAuthenticated]
@@ -485,14 +555,15 @@ class AdminBillingViewSet(viewsets.ViewSet):
         
         # Account stats
         total_accounts = Account.objects.count()
-        active_accounts = Account.objects.filter(is_active=True).count()
+        active_accounts = Account.objects.filter(status='active').count()
         new_accounts_this_month = Account.objects.filter(
             created_at__gte=this_month_start
         ).count()
         
         # Subscription stats
+        # Subscriptions are linked via OneToOne "subscription"
         active_subscriptions = Account.objects.filter(
-            subscriptions__status='active'
+            subscription__status='active'
         ).distinct().count()
         
         # Revenue stats
@@ -513,8 +584,8 @@ class AdminBillingViewSet(viewsets.ViewSet):
             created_at__gte=last_30_days
         ).aggregate(total=Sum('amount'))['total'] or 0
         
+        # Usage transactions are stored as deductions (negative amounts)
         credits_used = abs(CreditTransaction.objects.filter(
-            transaction_type__in=['generate_content', 'keyword_research', 'ai_task'],
             created_at__gte=last_30_days,
             amount__lt=0
         ).aggregate(total=Sum('amount'))['total'] or 0)
@@ -533,18 +604,20 @@ class AdminBillingViewSet(viewsets.ViewSet):
             status__in=['completed', 'succeeded']
         ).order_by('-processed_at')[:5]
         
-        recent_activity = [
-            {
+        recent_activity = []
+        for pay in recent_payments:
+            account_name = getattr(pay.account, 'name', 'Unknown')
+            currency = pay.currency or 'USD'
+            ts = pay.processed_at.isoformat() if pay.processed_at else now.isoformat()
+            recent_activity.append({
                 'id': pay.id,
                 'type': 'payment',
-                'account_name': pay.account.name,
+                'account_name': account_name,
                 'amount': str(pay.amount),
-                'currency': pay.currency,
-                'timestamp': pay.processed_at.isoformat(),
-                'description': f'Payment received via {pay.payment_method}'
-            }
-            for pay in recent_payments
-        ]
+                'currency': currency,
+                'timestamp': ts,
+                'description': f'Payment received via {pay.payment_method or "unknown"}'
+            })
         
         return Response({
             'total_accounts': total_accounts,

backend/igny8_core/modules/billing/admin.py

@@ -3,7 +3,7 @@ Billing Module Admin
 """
 from django.contrib import admin
 from igny8_core.admin.base import AccountAdminMixin
-from .models import CreditTransaction, CreditUsageLog
+from .models import CreditTransaction, CreditUsageLog, AccountPaymentMethod
 
 
 @admin.register(CreditTransaction)
@@ -41,3 +41,32 @@ class CreditUsageLogAdmin(AccountAdminMixin, admin.ModelAdmin):
             return '-'
     get_account_display.short_description = 'Account'
 
+
+@admin.register(AccountPaymentMethod)
+class AccountPaymentMethodAdmin(AccountAdminMixin, admin.ModelAdmin):
+    list_display = [
+        'display_name',
+        'type',
+        'account',
+        'is_default',
+        'is_enabled',
+        'is_verified',
+        'country_code',
+        'updated_at',
+    ]
+    list_filter = ['type', 'is_default', 'is_enabled', 'is_verified', 'country_code']
+    search_fields = ['display_name', 'account__name', 'account__id']
+    readonly_fields = ['created_at', 'updated_at']
+    fieldsets = (
+        ('Payment Method', {
+            'fields': ('account', 'type', 'display_name', 'is_default', 'is_enabled', 'is_verified', 'country_code')
+        }),
+        ('Instructions / Metadata', {
+            'fields': ('instructions', 'metadata')
+        }),
+        ('Timestamps', {
+            'fields': ('created_at', 'updated_at'),
+            'classes': ('collapse',)
+        }),
+    )
+

backend/igny8_core/modules/billing/migrations/0006_accountpaymentmethod.py

@@ -0,0 +1,38 @@
+# Generated by Django 5.2.8 on 2025-12-05 17:19
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('billing', '0005_credittransaction_reference_id_invoice_billing_email_and_more'),
+        ('igny8_core_auth', '0004_add_invoice_payment_models'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='AccountPaymentMethod',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('type', models.CharField(choices=[('stripe', 'Stripe'), ('paypal', 'PayPal'), ('bank_transfer', 'Bank Transfer'), ('local_wallet', 'Local Wallet')], db_index=True, max_length=50)),
+                ('display_name', models.CharField(default='', help_text='User-visible label', max_length=100)),
+                ('is_default', models.BooleanField(db_index=True, default=False)),
+                ('is_enabled', models.BooleanField(db_index=True, default=True)),
+                ('is_verified', models.BooleanField(db_index=True, default=False)),
+                ('country_code', models.CharField(blank=True, default='', help_text='ISO-2 country code (optional)', max_length=2)),
+                ('instructions', models.TextField(blank=True, default='')),
+                ('metadata', models.JSONField(blank=True, default=dict, help_text='Provider references or display metadata')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('updated_at', models.DateTimeField(auto_now=True)),
+                ('account', models.ForeignKey(db_column='tenant_id', on_delete=django.db.models.deletion.CASCADE, related_name='%(class)s_set', to='igny8_core_auth.account')),
+            ],
+            options={
+                'db_table': 'igny8_account_payment_methods',
+                'ordering': ['-is_default', 'display_name', 'id'],
+                'indexes': [models.Index(fields=['account', 'is_default'], name='igny8_accou_tenant__30d459_idx'), models.Index(fields=['account', 'type'], name='igny8_accou_tenant__4cc9c7_idx')],
+                'unique_together': {('account', 'display_name')},
+            },
+        ),
+    ]

backend/igny8_core/modules/billing/models.py

@@ -1,4 +1,4 @@
 # Backward compatibility aliases - models moved to business/billing/
-from igny8_core.business.billing.models import CreditTransaction, CreditUsageLog, CreditCostConfig
+from igny8_core.business.billing.models import CreditTransaction, CreditUsageLog, CreditCostConfig, AccountPaymentMethod
 
-__all__ = ['CreditTransaction', 'CreditUsageLog', 'CreditCostConfig']
+__all__ = ['CreditTransaction', 'CreditUsageLog', 'CreditCostConfig', 'AccountPaymentMethod']

backend/igny8_core/modules/writer/views.py

@@ -1610,7 +1610,8 @@ class ContentTaxonomyViewSet(SiteSectorModelViewSet):
     ordering = ['taxonomy_type', 'name']
     
     # Filter configuration
-    filterset_fields = ['taxonomy_type', 'sync_status', 'parent', 'external_id', 'external_taxonomy']
+    # Removed "parent" to avoid non-model field in filterset (breaks drf-spectacular)
+    filterset_fields = ['taxonomy_type', 'sync_status', 'external_id', 'external_taxonomy']
     
     def perform_create(self, serializer):
         """Create taxonomy with site/sector context"""

backend/igny8_core/modules/writer/views.py.bak

@@ -1498,7 +1498,7 @@ class ContentTaxonomyViewSet(SiteSectorModelViewSet):
     ordering = ['taxonomy_type', 'name']
     
     # Filter configuration
-    filterset_fields = ['taxonomy_type', 'sync_status', 'parent', 'external_id', 'external_taxonomy']
+    filterset_fields = ['taxonomy_type', 'sync_status', 'external_id', 'external_taxonomy']
     
     def perform_create(self, serializer):
         """Create taxonomy with site/sector context"""

docs/user-flow/user-flow-initial

@@ -0,0 +1,200 @@
+## IGNY8 User & Billing Flow — Current State and Remediation Plan
+
+### 0) Scope / Sources
+- Frontend routing: `frontend/src/App.tsx`
+- Auth store and token handling: `frontend/src/store/authStore.ts`
+- Balance/usage/billing client: `frontend/src/services/api.ts`, `frontend/src/services/billing.api.ts`
+- Admin billing UI: `frontend/src/pages/Admin/AdminBilling.tsx`
+- Backend auth/billing routers: `backend/igny8_core/auth/urls.py`, `backend/igny8_core/business/billing/urls.py`, `backend/igny8_core/modules/billing/urls.py`
+
+---
+
+### 1) Signup / Login
+**Backend endpoints (auth/urls.py)**
+- POST `/api/v1/auth/register/` → creates user; no email verification enforced.
+- POST `/api/v1/auth/login/` → issues JWT access/refresh; requires valid account + plan for “happy path”.
+- POST `/api/v1/auth/refresh/` → refresh token.
+
+**Frontend behavior (authStore)**
+- `register()` hits `/v1/auth/register/`; on success stores tokens and marks authenticated.
+- `login()` hits `/v1/auth/login/`; if user.account missing → throws `ACCOUNT_REQUIRED`; if plan missing → `PLAN_REQUIRED`. So the UI blocks login success if the account/plan is absent.
+- After login, routes are guarded by `ProtectedRoute` → land on main dashboard (`/`).
+
+**Gaps**
+- No email verification or onboarding; user is dropped to dashboard.
+- If account/plan is missing, errors surface but no guided remediation (no redirect to plan selection).
+
+---
+
+### 2) Tenant Billing Data & Balance
+**Current endpoints used**
+- Balance: `/v1/billing/transactions/balance/` (business billing CreditTransactionViewSet.balance).
+- Credit transactions: `/api/v1/billing/transactions/`.
+- Usage logs/summary/limits: `/api/v1/billing/credits/usage/…`, `/v1/billing/credits/usage/summary/`, `/v1/billing/credits/usage/limits/`.
+- Invoices: `/api/v1/billing/invoices/` (+ detail, pdf).
+- Payments: `/api/v1/billing/payments/`.
+- Credit packages: `/v1/billing/credit-packages/`.
+
+**UI touchpoints**
+- Header metric uses `fetchCreditBalance()` → `/v1/billing/transactions/balance/`.
+- Usage & Analytics, Credits pages, Billing panels use `getCreditBalance()` → same endpoint.
+
+**Gaps**
+- Subscription lifecycle (select plan, subscribe/upgrade/cancel) not wired in UI.
+- Payment methods add/remove not exposed in UI.
+- Balance fetch falls back to zero on any non-200; no inline “balance unavailable” messaging.
+
+---
+
+### 3) Admin Billing (pages/Admin/AdminBilling.tsx)
+**Current tabs & data**
+- Overview: stats from `/v1/admin/billing/stats/` (totals, usage).
+- User Management: `/v1/admin/users/` (credit balances), adjust credits via `/v1/admin/users/{id}/adjust-credits/`.
+- Credit Pricing: `/v1/admin/credit-costs/` with editable cost per operation; Save posts updates.
+- Credit Packages: read-only cards from `/v1/billing/credit-packages/`.
+
+**Gaps**
+- No admin CRUD for packages (only read).
+- No exports/filters for payments/invoices in this page (handled elsewhere).
+
+---
+
+### 4) Plan Limits / Access
+**Backend**
+- Auth login blocks if account plan missing (frontend enforced). Backend exposes plans/subscriptions via `auth/urls.py` (routers: `plans`, `subscriptions`).
+- Automation service checks `account.credits` directly before heavy AI work (no HTTP).
+
+**Frontend**
+- No explicit plan-limit enforcement in UI (sites, seats, module gating) beyond route/module guards already present per module.
+- No upgrade prompts when hitting limits.
+
+---
+
+### 5) AI / Automation Credit Checks
+- Backend: `automation_service.py` estimates credits, adds 20% buffer, aborts if `account.credits` < required. Not dependent on billing APIs.
+- Frontend: no preflight credit warning; errors are backend-driven.
+
+---
+
+### 6) What’s Missing for a Complete E2E Paid Flow
+1) **Subscription UX**: Add tenant plan selection + subscribe/upgrade/cancel wired to `/api/v1/auth/subscriptions/...` (or billing subscription endpoints if exposed separately). Show current plan and renewal status.
+2) **Payment Methods**: Expose add/list/remove default; required for Stripe/PayPal/manual flows.
+3) **Invoices/Payments (tenant)**: List history with PDF download; surface payment status.
+4) **Manual payments (if supported)**: Provide upload/reference input; show approval status.
+5) **Plan limits**: Enforce and message limits on sites, seats, modules; show “Upgrade to increase limit.”
+6) **Balance UX**: If `/v1/billing/transactions/balance/` fails, show inline warning and retry instead of silently showing 0.
+7) **Admin packages**: If needed, add CRUD for credit packages (activate/feature/sort/price IDs).
+8) **Onboarding**: Post-signup redirect to “Choose plan” if no active plan; optional email verification.
+
+---
+
+### 7) Recommended Happy Path (Target)
+1) Signup → email verify (optional) → redirect to Plan selection.
+2) Choose plan → subscribe (create payment method + subscription intent) → confirm → landing on dashboard with non-zero credits and plan limits loaded.
+3) User can:
+   - Add sites up to plan limit.
+   - Use Planner/Writer modules; preflight check shows remaining credits.
+   - View Credits/Usage/Invoices/Payments; purchase extra credit packages if needed.
+4) Header shows live balance from `/v1/billing/transactions/balance/`; errors visible if fetch fails.
+5) Admin can:
+   - Adjust credit costs, see stats/payments/invoices/approvals.
+   - Manage credit packages (CRUD) if enabled.
+
+---
+
+### 8) Quick Endpoint Reference (current wiring)
+- Balance: `/v1/billing/transactions/balance/`
+- Tenant: invoices `/api/v1/billing/invoices/`, payments `/api/v1/billing/payments/`, credit-packages `/v1/billing/credit-packages/`, usage `/api/v1/billing/credits/usage/`
+- Admin: stats `/v1/admin/billing/stats/`, users `/v1/admin/users/`, credit-costs `/v1/admin/credit-costs/`, admin payments `/v1/billing/admin/payments/`, pending approvals `/v1/billing/admin/pending_payments/`
+
+---
+
+## Remediation Plan (Do Now)
+
+### A) Access control / onboarding
+- After register → force redirect to Plans page.
+- Lock all app routes except Account Profile, Plans, Billing until subscription is active (route guard).
+- Optional: email verification gate before plan selection.
+
+### B) Plans & subscription UX (tenant)
+- Plans page: list plans from `/api/v1/auth/plans/` (or billing subscriptions endpoint), show limits.
+- Actions: subscribe/upgrade/cancel wired to subscription endpoints; show status/renewal date.
+- CTA in header/sidebar if no active plan.
+
+### C) Payment methods
+- Add/list/remove default payment methods (Stripe/PayPal/manual) via billing endpoints.
+- Show “add payment method” inline on Plans/Billing if none exists.
+
+### D) Checkout / payments
+- Credit packages purchase flow wired to `/v1/billing/credit-packages/…/purchase/`.
+- If manual payments allowed: upload/reference form and surface status; tie to admin approvals.
+- Invoice list/history with PDF download; payment history with status badges.
+
+### E) Balance and usage UX
+- Use single endpoint `/v1/billing/transactions/balance/`; on non-200 show inline warning + retry (no silent zero).
+- Surface plan limits and usage (sites, seats, module access) with upgrade prompts when near/at limit.
+
+### F) Module access & limits
+- Enforce plan limits on: add site, team invites, module guards (planner/writer/automation/etc.).
+- On 403/422 from backend: show upgrade prompt with link to Plans.
+
+### G) Admin
+- Optional: add CRUD for credit packages (create/edit/sort/feature) if backend endpoints available.
+- Keep credit costs editable (already wired); add filters/exports later if needed.
+
+### H) AI task preflight
+- Before costly AI actions, fetch balance and show “insufficient credits—purchase/upgrade” prompt.
+- Handle backend credit errors with actionable UI (purchase/upgrade CTA).
+
+### I) Error handling / UX polish
+- Balance widget: display “Balance unavailable” on error; retry button.
+- Centralize billing error toasts with clear messages (404 vs 402/403 vs 500).
+
+### J) Implementation order
+1) Route guard + post-signup redirect to Plans; hide other routes until active plan.
+2) Plans page with subscribe/upgrade/cancel wiring; add payment method UI.
+3) Billing page: invoices/payments/history + credit package purchase CTA.
+4) Balance/usage error handling; plan limit prompts; AI preflight checks.
+5) Admin package CRUD (if needed) and exports/filters.
+
+
+
+[User lands] 
+    |
+    v
+[/signup] -- create account --> [Tokens stored]
+    |
+    v
+[/account/plans] (onboarding gate)
+    |
+    |-- list plans (/v1/auth/plans/)
+    |-- choose plan + payment method (default/selected)
+    |-- subscribe (/v1/auth/subscriptions/)
+    v
+[Plan active] -----> [Billing tabs available]
+    |                    |                  \
+    |                    |                   \
+    |                    v                    v
+    |            [Purchase Credits]      [Invoices/Payments]
+    |             /api/v1/...             (list + PDF download)
+    |                    |
+    |                    v
+    |            [Balance/Usage/Limits] (shared store, retry)
+    |
+    v
+[Protected routes unlocked: /, modules, account]
+    |
+    v
+[Sites -> Add/Manage site]
+    |
+    |-- check plan limits (sites/seats/modules)
+    |-- on limit: show upgrade/purchase prompt
+    v
+[Site created]
+    |
+    v
+[Start workflow]
+    |-- Planner/Writer/Automation, etc.
+    |-- preflight: balance/limits; on 402/403 -> prompt upgrade/purchase
+    v
+[User executes tasks with credits]

frontend/src/App.tsx

@@ -375,6 +375,11 @@ export default function App() {
             } />
 
             {/* Account Section - Billing & Management Pages */}
+            <Route path="/account/plans" element={
+              <Suspense fallback={null}>
+                  <PlansAndBillingPage />
+              </Suspense>
+            } />
             <Route path="/account/billing" element={
               <Suspense fallback={null}>
                   <AccountBillingPage />

frontend/src/components/auth/ProtectedRoute.tsx

@@ -4,8 +4,6 @@ import { useAuthStore } from "../../store/authStore";
 import { useErrorHandler } from "../../hooks/useErrorHandler";
 import { trackLoading } from "../common/LoadingStateMonitor";
 
-const PRICING_URL = "https://igny8.com/pricing";
-
 interface ProtectedRouteProps {
   children: ReactNode;
 }
@@ -21,6 +19,20 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
   const [showError, setShowError] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string>('');
 
+  const PLAN_ALLOWED_PATHS = [
+    '/account/plans',
+    '/account/billing',
+    '/account/purchase-credits',
+    '/account/settings',
+    '/account/team',
+    '/account/usage',
+    '/billing',
+  ];
+
+  const isPlanAllowedPath = PLAN_ALLOWED_PATHS.some((prefix) =>
+    location.pathname.startsWith(prefix)
+  );
+
   // Track loading state
   useEffect(() => {
     trackLoading('auth-loading', loading);
@@ -37,11 +49,6 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
       logout();
       return;
     }
-
-    if (!user.account.plan) {
-      logout();
-      window.location.href = PRICING_URL;
-    }
   }, [isAuthenticated, user, logout]);
 
   // Immediate check on mount: if loading is true, reset it immediately
@@ -111,6 +118,11 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
     return <Navigate to="/signin" state={{ from: location }} replace />;
   }
 
+  // If authenticated but missing an active plan, keep user inside billing/onboarding
+  if (user?.account && !user.account.plan && !isPlanAllowedPath) {
+    return <Navigate to="/account/plans" state={{ from: location }} replace />;
+  }
+
   return <>{children}</>;
 }
 

frontend/src/components/auth/SignUpForm.tsx

@@ -51,8 +51,8 @@ export default function SignUpForm() {
         last_name: formData.lastName,
       });
       
-      // Redirect to home after successful registration
-      navigate("/", { replace: true });
+      // Redirect to plan selection after successful registration
+      navigate("/account/plans", { replace: true });
     } catch (err: any) {
       setError(err.message || "Registration failed. Please try again.");
     }

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>
   );
 }

frontend/src/components/billing/BillingUsagePanel.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useToast } from '../../components/ui/toast/ToastContainer';
-import { getCreditTransactions, getCreditBalance, CreditTransaction as BillingTransaction, CreditBalance } from '../../services/billing.api';
+import { getCreditTransactions, CreditTransaction as BillingTransaction } from '../../services/billing.api';
+import { useBillingStore } from '../../store/billingStore';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 import { CompactPagination } from '../ui/pagination';
@@ -21,24 +22,22 @@ const CREDIT_COSTS: Record<string, { cost: number | string; description: string
 export default function BillingUsagePanel() {
   const toast = useToast();
   const [transactions, setTransactions] = useState<BillingTransaction[]>([]);
-  const [balance, setBalance] = useState<CreditBalance | null>(null);
   const [loading, setLoading] = useState(true);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
+  const { balance, usageLimits, loadBalance, loadUsageLimits } = useBillingStore();
 
   useEffect(() => {
     loadUsage();
-  }, []);
+    loadBalance();
+    loadUsageLimits();
+  }, [loadBalance, loadUsageLimits]);
 
   const loadUsage = async () => {
     try {
       setLoading(true);
-      const [txnData, balanceData] = await Promise.all([
-        getCreditTransactions(),
-        getCreditBalance()
-      ]);
+      const txnData = await getCreditTransactions();
       setTransactions(txnData.results || []);
-      setBalance(balanceData as any);
     } catch (error: any) {
       toast.error(`Failed to load credit usage: ${error.message}`);
     } finally {
@@ -90,6 +89,38 @@ export default function BillingUsagePanel() {
         </div>
       )}
 
+      {usageLimits && (
+        <Card className="p-6">
+          <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Plan Limits</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+              <div className="text-sm text-gray-600 dark:text-gray-400">Monthly Credits</div>
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                {usageLimits.plan_credits_per_month?.toLocaleString?.() || 0}
+              </div>
+              <div className="text-sm text-gray-500 dark:text-gray-400">
+                {usageLimits.credits_used_this_month?.toLocaleString?.() || 0} used
+              </div>
+            </div>
+            <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+              <div className="text-sm text-gray-600 dark:text-gray-400">Remaining</div>
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                {usageLimits.credits_remaining?.toLocaleString?.() || 0}
+              </div>
+              {usageLimits.approaching_limit && (
+                <div className="text-sm text-amber-600 dark:text-amber-400 mt-1">Approaching limit</div>
+              )}
+            </div>
+            <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+              <div className="text-sm text-gray-600 dark:text-gray-400">Usage %</div>
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                {usageLimits.percentage_used?.toFixed?.(0) || 0}%
+              </div>
+            </div>
+          </div>
+        </Card>
+      )}
+
       <Card className="p-6">
         <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Costs per Operation</h2>
         <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Understanding how credits are consumed for each operation type</p>

frontend/src/components/dashboard/CreditBalanceWidget.tsx

@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
 import { useBillingStore } from '../../store/billingStore';
 import ComponentCard from '../common/ComponentCard';
+import Button from '../ui/button/Button';
 
 export default function CreditBalanceWidget() {
-  const { balance, loading, loadBalance } = useBillingStore();
+  const { balance, loading, error, loadBalance } = useBillingStore();
   
   useEffect(() => {
     loadBalance();
@@ -17,6 +18,17 @@ export default function CreditBalanceWidget() {
     );
   }
 
+  if (error && !balance) {
+    return (
+      <ComponentCard title="Credit Balance" desc="Balance unavailable">
+        <div className="text-sm text-red-600 dark:text-red-400 mb-3">{error}</div>
+        <Button variant="outline" size="sm" onClick={loadBalance}>
+          Retry
+        </Button>
+      </ComponentCard>
+    );
+  }
+  
   if (!balance) return null;
   
   const usagePercentage = balance.plan_credits_per_month > 0
@@ -53,6 +65,11 @@ export default function CreditBalanceWidget() {
             <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>
+          {error && (
+            <div className="mt-2 text-xs text-amber-600 dark:text-amber-400">
+              Balance may be outdated. {error}
+            </div>
+          )}
         </div>
       </div>
     </ComponentCard>

frontend/src/pages/account/PlansAndBillingPage.tsx

@@ -11,30 +11,69 @@ import {
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
 import Button from '../../components/ui/button/Button';
+import { useToast } from '../../components/ui/toast/ToastContainer';
 import {
   getCreditBalance,
   getCreditPackages,
   getInvoices,
   getAvailablePaymentMethods,
   purchaseCreditPackage,
+  downloadInvoicePDF,
+  getPayments,
+  submitManualPayment,
+  createPaymentMethod,
+  deletePaymentMethod,
+  setDefaultPaymentMethod,
   type CreditBalance,
   type CreditPackage,
   type Invoice,
   type PaymentMethod,
+  type Payment,
+  getPlans,
+  getSubscriptions,
+  createSubscription,
+  cancelSubscription,
+  type Plan,
+  type Subscription,
 } from '../../services/billing.api';
 
-type TabType = 'plan' | 'upgrade' | 'credits' | 'purchase' | 'invoices' | 'payment-methods';
+type TabType = 'plan' | 'upgrade' | 'credits' | 'purchase' | 'invoices' | 'payments' | 'payment-methods';
 
 export default function PlansAndBillingPage() {
   const [activeTab, setActiveTab] = useState<TabType>('plan');
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string>('');
+  const [planLoadingId, setPlanLoadingId] = useState<number | null>(null);
+  const [purchaseLoadingId, setPurchaseLoadingId] = useState<number | null>(null);
 
   // Data states
   const [creditBalance, setCreditBalance] = useState<CreditBalance | null>(null);
   const [packages, setPackages] = useState<CreditPackage[]>([]);
   const [invoices, setInvoices] = useState<Invoice[]>([]);
+  const [payments, setPayments] = useState<Payment[]>([]);
   const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
+  const [plans, setPlans] = useState<Plan[]>([]);
+  const [subscriptions, setSubscriptions] = useState<Subscription[]>([]);
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string | undefined>(undefined);
+  const [manualPayment, setManualPayment] = useState({
+    invoice_id: '',
+    amount: '',
+    payment_method: '',
+    reference: '',
+    notes: '',
+  });
+  const [newPaymentMethod, setNewPaymentMethod] = useState({
+    type: 'bank_transfer',
+    display_name: '',
+    instructions: '',
+  });
+  const handleBillingError = (err: any, fallback: string) => {
+    const message = err?.message || fallback;
+    setError(message);
+    toast?.error?.(message);
+  };
+
+  const toast = useToast();
 
   useEffect(() => {
     loadData();
@@ -43,17 +82,29 @@ export default function PlansAndBillingPage() {
   const loadData = async () => {
     try {
       setLoading(true);
-      const [balanceData, packagesData, invoicesData, methodsData] = await Promise.all([
+      const [balanceData, packagesData, invoicesData, paymentsData, methodsData, plansData, subsData] = await Promise.all([
         getCreditBalance(),
         getCreditPackages(),
         getInvoices({}),
+        getPayments({}),
         getAvailablePaymentMethods(),
+        getPlans(),
+        getSubscriptions(),
       ]);
 
       setCreditBalance(balanceData);
       setPackages(packagesData.results || []);
       setInvoices(invoicesData.results || []);
-      setPaymentMethods(methodsData.results || []);
+      setPayments(paymentsData.results || []);
+      const methods = methodsData.results || [];
+      setPaymentMethods(methods);
+      if (methods.length > 0) {
+        const defaultMethod = methods.find((m) => m.is_default);
+        const firstMethod = defaultMethod || methods[0];
+        setSelectedPaymentMethod((prev) => prev || firstMethod.type || firstMethod.id);
+      }
+      setPlans((plansData.results || []).filter((p) => p.is_active !== false));
+      setSubscriptions(subsData.results || []);
     } catch (err: any) {
       setError(err.message || 'Failed to load billing data');
       console.error('Billing load error:', err);
@@ -62,15 +113,126 @@ export default function PlansAndBillingPage() {
     }
   };
 
+  const handleSelectPlan = async (planId: number) => {
+    try {
+      if (!selectedPaymentMethod && paymentMethods.length > 0) {
+        setError('Select a payment method to continue');
+        return;
+      }
+      setPlanLoadingId(planId);
+      await createSubscription({ plan_id: planId, payment_method: selectedPaymentMethod });
+      toast?.success?.('Subscription updated');
+      await loadData();
+    } catch (err: any) {
+      handleBillingError(err, 'Failed to update subscription');
+    } finally {
+      setPlanLoadingId(null);
+    }
+  };
+
+  const handleCancelSubscription = async () => {
+    if (!currentSubscription?.id) {
+      setError('No active subscription to cancel');
+      return;
+    }
+    try {
+      setPlanLoadingId(currentSubscription.id);
+      await cancelSubscription(currentSubscription.id);
+      toast?.success?.('Subscription cancellation requested');
+      await loadData();
+    } catch (err: any) {
+      handleBillingError(err, 'Failed to cancel subscription');
+    } finally {
+      setPlanLoadingId(null);
+    }
+  };
+
   const handlePurchase = async (packageId: number) => {
     try {
+      if (!selectedPaymentMethod && paymentMethods.length > 0) {
+        setError('Select a payment method to continue');
+        return;
+      }
+      setPurchaseLoadingId(packageId);
       await purchaseCreditPackage({
         package_id: packageId,
-        payment_method: 'stripe',
+        payment_method: (selectedPaymentMethod as any) || 'stripe',
       });
       await loadData();
     } catch (err: any) {
-      setError(err.message || 'Failed to purchase credits');
+      handleBillingError(err, 'Failed to purchase credits');
+    } finally {
+      setPurchaseLoadingId(null);
+      setLoading(false);
+    }
+  };
+
+  const handleDownloadInvoice = async (invoiceId: number) => {
+    try {
+      const blob = await downloadInvoicePDF(invoiceId);
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `invoice-${invoiceId}.pdf`;
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      window.URL.revokeObjectURL(url);
+    } catch (err: any) {
+      handleBillingError(err, 'Failed to download invoice');
+    }
+  };
+
+  const handleSubmitManualPayment = async () => {
+    try {
+      const payload = {
+        invoice_id: manualPayment.invoice_id ? Number(manualPayment.invoice_id) : undefined,
+        amount: manualPayment.amount,
+        payment_method: manualPayment.payment_method || (selectedPaymentMethod as any) || 'manual',
+        reference: manualPayment.reference,
+        notes: manualPayment.notes,
+      };
+      await submitManualPayment(payload as any);
+      toast?.success?.('Manual payment submitted');
+      setManualPayment({ invoice_id: '', amount: '', payment_method: '', reference: '', notes: '' });
+      await loadData();
+    } catch (err: any) {
+      handleBillingError(err, 'Failed to submit payment');
+    }
+  };
+
+  const handleAddPaymentMethod = async () => {
+    if (!newPaymentMethod.display_name.trim()) {
+      setError('Payment method name is required');
+      return;
+    }
+    try {
+      await createPaymentMethod(newPaymentMethod as any);
+      toast?.success?.('Payment method added');
+      setNewPaymentMethod({ type: 'bank_transfer', display_name: '', instructions: '' });
+      await loadData();
+    } catch (err: any) {
+      handleBillingError(err, 'Failed to add payment method');
+    }
+  };
+
+  const handleRemovePaymentMethod = async (id: string) => {
+    try {
+      await deletePaymentMethod(id);
+      toast?.success?.('Payment method removed');
+      await loadData();
+    } catch (err: any) {
+      handleBillingError(err, 'Failed to remove payment method');
+    }
+  };
+
+  const handleSetDefaultPaymentMethod = async (id: string) => {
+    try {
+      await setDefaultPaymentMethod(id);
+      toast?.success?.('Default payment method updated');
+      await loadData();
+    } catch (err: any) {
+      handleBillingError(err, 'Failed to set default');
     }
   };
 
@@ -82,12 +244,20 @@ export default function PlansAndBillingPage() {
     );
   }
 
+  const currentSubscription = subscriptions.find((sub) => sub.status === 'active') || subscriptions[0];
+  const currentPlanId = typeof currentSubscription?.plan === 'object' ? currentSubscription.plan.id : currentSubscription?.plan;
+  const currentPlan = plans.find((p) => p.id === currentPlanId);
+  const hasActivePlan = Boolean(currentPlanId);
+  const hasPaymentMethods = paymentMethods.length > 0;
+  const subscriptionStatus = currentSubscription?.status || (hasActivePlan ? 'active' : 'none');
+
   const tabs = [
     { id: 'plan' as TabType, label: 'Current Plan', icon: <Package className="w-4 h-4" /> },
     { id: 'upgrade' as TabType, label: 'Upgrade/Downgrade', icon: <ArrowUpCircle className="w-4 h-4" /> },
     { id: 'credits' as TabType, label: 'Credits Overview', icon: <TrendingUp className="w-4 h-4" /> },
     { id: 'purchase' as TabType, label: 'Purchase Credits', icon: <CreditCard className="w-4 h-4" /> },
     { id: 'invoices' as TabType, label: 'Billing History', icon: <FileText className="w-4 h-4" /> },
+    { id: 'payments' as TabType, label: 'Payments', icon: <Wallet className="w-4 h-4" /> },
     { id: 'payment-methods' as TabType, label: 'Payment Methods', icon: <Wallet className="w-4 h-4" /> },
   ];
 
@@ -137,37 +307,64 @@ export default function PlansAndBillingPage() {
           <div className="space-y-6">
             <Card className="p-6">
               <h2 className="text-lg font-semibold mb-4">Your Current Plan</h2>
+              {!hasActivePlan && (
+                <div className="p-4 mb-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">
+                  No active plan found. Please choose a plan to activate your account.
+                </div>
+              )}
               <div className="space-y-4">
                 <div className="flex items-center justify-between">
                   <div>
-                    <div className="text-2xl font-bold text-gray-900 dark:text-white">Free Plan</div>
-                    <div className="text-gray-600 dark:text-gray-400">Perfect for getting started</div>
+                    <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                      {currentPlan?.name || 'No Plan Selected'}
+                    </div>
+                    <div className="text-gray-600 dark:text-gray-400">
+                      {currentPlan?.description || 'Select a plan to unlock full access.'}
+                    </div>
                   </div>
-                  <Badge variant="light" color="success">Active</Badge>
+                  <Badge variant="light" color={hasActivePlan ? 'success' : 'warning'}>
+                    {hasActivePlan ? subscriptionStatus : 'plan required'}
+                  </Badge>
                 </div>
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                   <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
                     <div className="text-sm text-gray-600 dark:text-gray-400">Monthly Credits</div>
                     <div className="text-2xl font-bold text-gray-900 dark:text-white">
-                      {creditBalance?.plan_credits_per_month.toLocaleString() || 0}
+                      {creditBalance?.plan_credits_per_month?.toLocaleString?.() || 0}
                     </div>
                   </div>
                   <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-                    <div className="text-sm text-gray-600 dark:text-gray-400">Sites Allowed</div>
-                    <div className="text-2xl font-bold text-gray-900 dark:text-white">1</div>
+                    <div className="text-sm text-gray-600 dark:text-gray-400">Current Balance</div>
+                    <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                      {creditBalance?.credits?.toLocaleString?.() || 0}
+                    </div>
                   </div>
                   <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
-                    <div className="text-sm text-gray-600 dark:text-gray-400">Team Members</div>
-                    <div className="text-2xl font-bold text-gray-900 dark:text-white">1</div>
+                    <div className="text-sm text-gray-600 dark:text-gray-400">Period Ends</div>
+                    <div className="text-2xl font-bold text-gray-900 dark:text-white text-base">
+                      {currentSubscription?.current_period_end
+                        ? new Date(currentSubscription.current_period_end).toLocaleDateString()
+                        : '—'}
+                    </div>
                   </div>
                 </div>
                 <div className="mt-6 flex gap-3">
-                  <Button variant="primary" tone="brand">
-                    Upgrade Plan
+                  <Button variant="primary" tone="brand" onClick={() => setActiveTab('upgrade')}>
+                    {hasActivePlan ? 'Change Plan' : 'Choose a Plan'}
                   </Button>
-                  <Button variant="outline" tone="neutral">
-                    Compare Plans
+                  <Button variant="outline" tone="neutral" onClick={() => setActiveTab('purchase')}>
+                    Purchase Credits
                   </Button>
+                  {hasActivePlan && (
+                    <Button
+                      variant="outline"
+                      tone="neutral"
+                      disabled={planLoadingId === currentSubscription?.id}
+                      onClick={handleCancelSubscription}
+                    >
+                      {planLoadingId === currentSubscription?.id ? 'Cancelling...' : 'Cancel Subscription'}
+                    </Button>
+                  )}
                 </div>
               </div>
             </Card>
@@ -175,12 +372,15 @@ export default function PlansAndBillingPage() {
             <Card className="p-6">
               <h2 className="text-lg font-semibold mb-4">Plan Features</h2>
               <ul className="space-y-3">
-                {['Basic AI Tools', 'Content Generation', 'Keyword Research', 'Email Support'].map((feature) => (
-                  <li key={feature} className="flex items-center gap-2 text-gray-700 dark:text-gray-300">
-                    <CheckCircle className="w-5 h-5 text-green-600" />
-                    {feature}
-                  </li>
-                ))}
+                {(currentPlan?.features && currentPlan.features.length > 0
+                  ? currentPlan.features
+                  : ['Credits included each month', 'Module access per plan limits', 'Email support'])
+                  .map((feature) => (
+                    <li key={feature} className="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+                      <CheckCircle className="w-5 h-5 text-green-600" />
+                      {feature}
+                    </li>
+                  ))}
               </ul>
             </Card>
           </div>
@@ -194,125 +394,77 @@ export default function PlansAndBillingPage() {
               <p className="text-gray-600 dark:text-gray-400">Choose the plan that best fits your needs</p>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-              {/* Free Plan */}
-              <Card className="p-6 relative">
-                <div className="mb-4">
-                  <h3 className="text-lg font-semibold">Free</h3>
-                  <div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">$0</div>
-                  <div className="text-sm text-gray-500">/month</div>
+            {hasPaymentMethods ? (
+              <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
+                <div className="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Select payment method</div>
+                <div className="flex flex-wrap gap-3">
+                  {paymentMethods.map((method) => (
+                    <label
+                      key={method.id}
+                      className={`px-3 py-2 rounded-lg border cursor-pointer text-sm ${
+                        selectedPaymentMethod === (method.type || method.id)
+                          ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
+                          : 'border-gray-200 dark:border-gray-700'
+                      }`}
+                    >
+                      <input
+                        type="radio"
+                        className="sr-only"
+                        checked={selectedPaymentMethod === (method.type || method.id)}
+                        onChange={() => setSelectedPaymentMethod(method.type || method.id)}
+                      />
+                      <div className="font-semibold text-gray-900 dark:text-white">{method.display_name}</div>
+                      <div className="text-xs text-gray-500 dark:text-gray-400">{method.type}</div>
+                    </label>
+                  ))}
                 </div>
-                <div className="space-y-3 mb-6">
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>100 credits/month</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>1 site</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>1 user</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>Basic features</span>
-                  </div>
-                </div>
-                <Badge variant="light" color="success" className="absolute top-4 right-4">Current</Badge>
-              </Card>
+              </div>
+            ) : (
+              <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">
+                No payment methods available. Please contact support or add one from the Payment Methods tab.
+              </div>
+            )}
             
-              {/* Starter Plan */}
-              <Card className="p-6 border-2 border-blue-500">
-                <Badge variant="light" color="primary" className="absolute top-4 right-4">Popular</Badge>
-                <div className="mb-4">
-                  <h3 className="text-lg font-semibold">Starter</h3>
-                  <div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">$29</div>
-                  <div className="text-sm text-gray-500">/month</div>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {plans.map((plan) => {
+                const isCurrent = plan.id === currentPlanId;
+                const price = plan.price ? `$${plan.price}/${plan.interval || 'month'}` : 'Custom';
+                return (
+                  <Card key={plan.id} className="p-6 relative border border-gray-200 dark:border-gray-700">
+                    <div className="mb-4">
+                      <h3 className="text-lg font-semibold">{plan.name}</h3>
+                      <div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">{price}</div>
+                      <div className="text-sm text-gray-500">{plan.description || 'Standard plan'}</div>
+                    </div>
+                    <div className="space-y-3 mb-6">
+                      {(plan.features && plan.features.length > 0 ? plan.features : ['Monthly credits included', 'Module access per plan', 'Email support']).map((feature) => (
+                        <div key={feature} className="flex items-center gap-2 text-sm">
+                          <CheckCircle className="w-4 h-4 text-green-600" />
+                          <span>{feature}</span>
+                        </div>
+                      ))}
+                    </div>
+                    <Button
+                      variant={isCurrent ? 'outline' : 'primary'}
+                      tone="brand"
+                      fullWidth
+                      disabled={isCurrent || planLoadingId === plan.id}
+                      onClick={() => handleSelectPlan(plan.id)}
+                    >
+                      {planLoadingId === plan.id
+                        ? 'Updating...'
+                        : isCurrent
+                          ? 'Current Plan'
+                          : 'Select Plan'}
+                    </Button>
+                  </Card>
+                );
+              })}
+              {plans.length === 0 && (
+                <div className="col-span-3 text-center py-12 text-gray-500">
+                  No plans available. Please contact support.
                 </div>
-                <div className="space-y-3 mb-6">
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>1,000 credits/month</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>3 sites</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>2 users</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>Full AI suite</span>
-                  </div>
-                </div>
-                <Button variant="primary" tone="brand" fullWidth>
-                  Upgrade to Starter
-                </Button>
-              </Card>
-
-              {/* Professional Plan */}
-              <Card className="p-6">
-                <div className="mb-4">
-                  <h3 className="text-lg font-semibold">Professional</h3>
-                  <div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">$99</div>
-                  <div className="text-sm text-gray-500">/month</div>
-                </div>
-                <div className="space-y-3 mb-6">
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>5,000 credits/month</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>10 sites</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>5 users</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>Priority support</span>
-                  </div>
-                </div>
-                <Button variant="outline" tone="neutral" fullWidth>
-                  Upgrade to Pro
-                </Button>
-              </Card>
-
-              {/* Enterprise Plan */}
-              <Card className="p-6">
-                <div className="mb-4">
-                  <h3 className="text-lg font-semibold">Enterprise</h3>
-                  <div className="text-3xl font-bold text-gray-900 dark:text-white mt-2">$299</div>
-                  <div className="text-sm text-gray-500">/month</div>
-                </div>
-                <div className="space-y-3 mb-6">
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>20,000 credits/month</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>Unlimited sites</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>20 users</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm">
-                    <CheckCircle className="w-4 h-4 text-green-600" />
-                    <span>Dedicated support</span>
-                  </div>
-                </div>
-                <Button variant="outline" tone="neutral" fullWidth>
-                  Upgrade to Enterprise
-                </Button>
-              </Card>
+              )}
             </div>
 
             <Card className="p-6 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
@@ -379,6 +531,37 @@ export default function PlansAndBillingPage() {
         {/* Purchase Credits Tab */}
         {activeTab === 'purchase' && (
           <div className="space-y-6">
+            {hasPaymentMethods ? (
+              <div className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
+                <div className="text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Select payment method</div>
+                <div className="flex flex-wrap gap-3">
+                  {paymentMethods.map((method) => (
+                    <label
+                      key={method.id}
+                      className={`px-3 py-2 rounded-lg border cursor-pointer text-sm ${
+                        selectedPaymentMethod === (method.type || method.id)
+                          ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/30'
+                          : 'border-gray-200 dark:border-gray-700'
+                      }`}
+                    >
+                      <input
+                        type="radio"
+                        className="sr-only"
+                        checked={selectedPaymentMethod === (method.type || method.id)}
+                        onChange={() => setSelectedPaymentMethod(method.type || method.id)}
+                      />
+                      <div className="font-semibold text-gray-900 dark:text-white">{method.display_name}</div>
+                      <div className="text-xs text-gray-500 dark:text-gray-400">{method.type}</div>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            ) : (
+              <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">
+                No payment methods available. Please contact support or add one from the Payment Methods tab.
+              </div>
+            )}
+
             <Card className="p-6">
               <h2 className="text-lg font-semibold mb-4">Credit Packages</h2>
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -400,8 +583,9 @@ export default function PlansAndBillingPage() {
                       onClick={() => handlePurchase(pkg.id)}
                       fullWidth
                       className="mt-6"
+                      disabled={purchaseLoadingId === pkg.id || (!hasPaymentMethods && paymentMethods.length > 0)}
                     >
-                      Purchase
+                      {purchaseLoadingId === pkg.id ? 'Processing...' : 'Purchase'}
                     </Button>
                   </div>
                 ))}
@@ -470,6 +654,7 @@ export default function PlansAndBillingPage() {
                             size="sm"
                             startIcon={<Download className="w-4 h-4" />}
                             className="ml-auto"
+                            onClick={() => handleDownloadInvoice(invoice.id)}
                           >
                             Download
                           </Button>
@@ -483,13 +668,176 @@ export default function PlansAndBillingPage() {
           </Card>
         )}
 
+        {/* Payments Tab */}
+        {activeTab === 'payments' && (
+          <div className="space-y-6">
+            <Card className="p-6">
+              <div className="flex items-center justify-between mb-4">
+                <div>
+                  <h2 className="text-lg font-semibold">Payments</h2>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">Recent payments and manual submissions</p>
+                </div>
+              </div>
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead className="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Invoice</th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Method</th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+                    {payments.length === 0 ? (
+                      <tr>
+                        <td colSpan={5} className="px-6 py-8 text-center text-gray-500">
+                          No payments yet
+                        </td>
+                      </tr>
+                    ) : (
+                      payments.map((payment) => (
+                        <tr key={payment.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
+                          <td className="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">
+                            {payment.invoice_number || payment.invoice_id || '-'}
+                          </td>
+                          <td className="px-6 py-4 text-sm text-gray-900 dark:text-white">
+                            ${payment.amount}
+                          </td>
+                          <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
+                            {payment.payment_method}
+                          </td>
+                          <td className="px-6 py-4">
+                            <Badge 
+                              variant="light" 
+                              color={
+                                payment.status === 'succeeded' || payment.status === 'completed'
+                                  ? 'success'
+                                  : payment.status === 'pending' || payment.status === 'processing'
+                                  ? 'warning'
+                                  : 'error'
+                              }
+                            >
+                              {payment.status}
+                            </Badge>
+                          </td>
+                          <td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
+                            {new Date(payment.created_at).toLocaleDateString()}
+                          </td>
+                        </tr>
+                      ))
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </Card>
+
+            <Card className="p-6">
+              <h3 className="text-lg font-semibold mb-4">Submit Manual Payment</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Invoice ID (optional)</label>
+                  <input
+                    type="number"
+                    value={manualPayment.invoice_id}
+                    onChange={(e) => setManualPayment((p) => ({ ...p, invoice_id: e.target.value }))}
+                    className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                    placeholder="Invoice ID"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Amount</label>
+                  <input
+                    type="text"
+                    value={manualPayment.amount}
+                    onChange={(e) => setManualPayment((p) => ({ ...p, amount: e.target.value }))}
+                    className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                    placeholder="e.g., 99.00"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Payment Method</label>
+                  <input
+                    type="text"
+                    value={manualPayment.payment_method}
+                    onChange={(e) => setManualPayment((p) => ({ ...p, payment_method: e.target.value }))}
+                    className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                    placeholder="bank_transfer / local_wallet / manual"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Reference</label>
+                  <input
+                    type="text"
+                    value={manualPayment.reference}
+                    onChange={(e) => setManualPayment((p) => ({ ...p, reference: e.target.value }))}
+                    className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                    placeholder="Reference or transaction id"
+                  />
+                </div>
+                <div className="md:col-span-2">
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notes</label>
+                  <textarea
+                    value={manualPayment.notes}
+                    onChange={(e) => setManualPayment((p) => ({ ...p, notes: e.target.value }))}
+                    className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                    placeholder="Optional notes"
+                  />
+                </div>
+              </div>
+              <div className="mt-4 flex justify-end">
+                <Button variant="primary" tone="brand" onClick={handleSubmitManualPayment}>
+                  Submit Manual Payment
+                </Button>
+              </div>
+            </Card>
+          </div>
+        )}
+
         {/* Payment Methods Tab */}
         {activeTab === 'payment-methods' && (
           <div className="space-y-6">
             <Card className="p-6">
               <div className="flex items-center justify-between mb-4">
                 <h2 className="text-lg font-semibold">Payment Methods</h2>
-                <Button variant="primary" tone="brand">
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Type</label>
+                  <select
+                    value={newPaymentMethod.type}
+                    onChange={(e) => setNewPaymentMethod((p) => ({ ...p, type: e.target.value }))}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                  >
+                    <option value="bank_transfer">Bank Transfer</option>
+                    <option value="local_wallet">Local Wallet</option>
+                    <option value="manual">Manual</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Display Name</label>
+                  <input
+                    type="text"
+                    value={newPaymentMethod.display_name}
+                    onChange={(e) => setNewPaymentMethod((p) => ({ ...p, display_name: e.target.value }))}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                    placeholder="e.g., Bank Transfer (USD)"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Instructions (optional)</label>
+                  <input
+                    type="text"
+                    value={newPaymentMethod.instructions}
+                    onChange={(e) => setNewPaymentMethod((p) => ({ ...p, instructions: e.target.value }))}
+                    className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                    placeholder="Where to send payment"
+                  />
+                </div>
+              </div>
+              <div className="mb-4">
+                <Button variant="primary" tone="brand" onClick={handleAddPaymentMethod}>
                   Add Payment Method
                 </Button>
               </div>
@@ -501,11 +849,26 @@ export default function PlansAndBillingPage() {
                       <div>
                         <div className="font-medium text-gray-900 dark:text-white">{method.display_name}</div>
                         <div className="text-sm text-gray-600 dark:text-gray-400">{method.type}</div>
+                        {method.instructions && (
+                          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">{method.instructions}</div>
+                        )}
                       </div>
                     </div>
-                    {method.is_enabled && (
-                      <Badge variant="light" color="success">Active</Badge>
-                    )}
+                    <div className="flex items-center gap-2">
+                      {method.is_enabled && (
+                        <Badge variant="light" color="success">Active</Badge>
+                      )}
+                      {method.is_default ? (
+                        <Badge variant="light" color="info">Default</Badge>
+                      ) : (
+                        <Button variant="outline" size="sm" onClick={() => handleSetDefaultPaymentMethod(method.id)}>
+                          Make Default
+                        </Button>
+                      )}
+                      <Button variant="outline" size="sm" tone="neutral" onClick={() => handleRemovePaymentMethod(method.id)}>
+                        Remove
+                      </Button>
+                    </div>
                   </div>
                 ))}
                 {paymentMethods.length === 0 && (

frontend/src/pages/admin/AdminCreditPackagesPage.tsx

@@ -7,12 +7,32 @@ import { useState, useEffect } from 'react';
 import { Plus, Loader2, AlertCircle, Edit, Trash } from 'lucide-react';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
-import { getAdminCreditPackages, type CreditPackage } from '../../services/billing.api';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import {
+  getAdminCreditPackages,
+  createAdminCreditPackage,
+  updateAdminCreditPackage,
+  deleteAdminCreditPackage,
+  type CreditPackage,
+} from '../../services/billing.api';
 
 export default function AdminCreditPackagesPage() {
+  const toast = useToast();
   const [packages, setPackages] = useState<CreditPackage[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string>('');
+  const [saving, setSaving] = useState(false);
+  const [editingId, setEditingId] = useState<number | null>(null);
+  const [form, setForm] = useState({
+    name: '',
+    credits: '',
+    price: '',
+    discount_percentage: '',
+    description: '',
+    is_active: true,
+    is_featured: false,
+    sort_order: '',
+  });
 
   useEffect(() => {
     loadPackages();
@@ -25,11 +45,86 @@ export default function AdminCreditPackagesPage() {
       setPackages(data.results || []);
     } catch (err: any) {
       setError(err.message || 'Failed to load credit packages');
+      toast?.error?.(err.message || 'Failed to load credit packages');
     } finally {
       setLoading(false);
     }
   };
 
+  const resetForm = () => {
+    setEditingId(null);
+    setForm({
+      name: '',
+      credits: '',
+      price: '',
+      discount_percentage: '',
+      description: '',
+      is_active: true,
+      is_featured: false,
+      sort_order: '',
+    });
+  };
+
+  const startEdit = (pkg: CreditPackage) => {
+    setEditingId(pkg.id);
+    setForm({
+      name: pkg.name || '',
+      credits: pkg.credits?.toString?.() || '',
+      price: pkg.price?.toString?.() || '',
+      discount_percentage: pkg.discount_percentage?.toString?.() || '',
+      description: pkg.description || '',
+      is_active: pkg.is_active ?? true,
+      is_featured: pkg.is_featured ?? false,
+      sort_order: (pkg.sort_order ?? pkg.display_order ?? '').toString(),
+    });
+  };
+
+  const handleSubmit = async () => {
+    if (!form.name.trim() || !form.credits || !form.price) {
+      setError('Name, credits, and price are required');
+      return;
+    }
+    try {
+      setSaving(true);
+      const payload = {
+        name: form.name,
+        credits: Number(form.credits),
+        price: form.price,
+        discount_percentage: form.discount_percentage ? Number(form.discount_percentage) : 0,
+        description: form.description || undefined,
+        is_active: form.is_active,
+        is_featured: form.is_featured,
+        sort_order: form.sort_order ? Number(form.sort_order) : undefined,
+      };
+      if (editingId) {
+        await updateAdminCreditPackage(editingId, payload);
+        toast?.success?.('Package updated');
+      } else {
+        await createAdminCreditPackage(payload);
+        toast?.success?.('Package created');
+      }
+      resetForm();
+      await loadPackages();
+    } catch (err: any) {
+      setError(err.message || 'Failed to save package');
+      toast?.error?.(err.message || 'Failed to save package');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!confirm('Delete this credit package?')) return;
+    try {
+      await deleteAdminCreditPackage(id);
+      toast?.success?.('Package deleted');
+      await loadPackages();
+    } catch (err: any) {
+      setError(err.message || 'Failed to delete package');
+      toast?.error?.(err.message || 'Failed to delete package');
+    }
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
@@ -47,12 +142,116 @@ export default function AdminCreditPackagesPage() {
             Manage credit packages available for purchase
           </p>
         </div>
-        <button className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
-          <Plus className="w-4 h-4" />
-          Add Package
-        </button>
       </div>
 
+      {/* Form */}
+      <Card className="p-4 mb-6">
+        <div className="flex items-center justify-between mb-3">
+          <div className="flex items-center gap-2">
+            <Plus className="w-4 h-4 text-blue-600" />
+            <h2 className="text-lg font-semibold">{editingId ? 'Edit Package' : 'Add Package'}</h2>
+          </div>
+          {editingId && (
+            <button
+              className="text-sm text-blue-600 hover:underline"
+              onClick={resetForm}
+            >
+              Cancel edit
+            </button>
+          )}
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>
+            <input
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              value={form.name}
+              onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
+              placeholder="Starter Pack"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Credits</label>
+            <input
+              type="number"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              value={form.credits}
+              onChange={(e) => setForm((p) => ({ ...p, credits: e.target.value }))}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Price</label>
+            <input
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              value={form.price}
+              onChange={(e) => setForm((p) => ({ ...p, price: e.target.value }))}
+              placeholder="99.00"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Discount %</label>
+            <input
+              type="number"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              value={form.discount_percentage}
+              onChange={(e) => setForm((p) => ({ ...p, discount_percentage: e.target.value }))}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Sort Order</label>
+            <input
+              type="number"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              value={form.sort_order}
+              onChange={(e) => setForm((p) => ({ ...p, sort_order: e.target.value }))}
+              placeholder="e.g., 1"
+            />
+          </div>
+          <div className="md:col-span-3">
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description</label>
+            <textarea
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              value={form.description}
+              onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
+              placeholder="Optional description"
+            />
+          </div>
+          <div className="flex items-center gap-3">
+            <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+              <input
+                type="checkbox"
+                checked={form.is_active}
+                onChange={(e) => setForm((p) => ({ ...p, is_active: e.target.checked }))}
+              />
+              Active
+            </label>
+            <label className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+              <input
+                type="checkbox"
+                checked={form.is_featured}
+                onChange={(e) => setForm((p) => ({ ...p, is_featured: e.target.checked }))}
+              />
+              Featured
+            </label>
+          </div>
+        </div>
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            className="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800"
+            onClick={resetForm}
+          >
+            Reset
+          </button>
+          <button
+            className="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-60"
+            onClick={handleSubmit}
+            disabled={saving}
+          >
+            {saving ? 'Saving...' : editingId ? 'Update Package' : 'Create Package'}
+          </button>
+        </div>
+      </Card>
+
       {error && (
         <div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center gap-3">
           <AlertCircle className="w-5 h-5 text-red-600" />
@@ -92,11 +291,17 @@ export default function AdminCreditPackagesPage() {
             )}
 
             <div className="flex gap-2 mt-4">
-              <button className="flex-1 flex items-center justify-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+              <button
+                className="flex-1 flex items-center justify-center gap-2 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
+                onClick={() => startEdit(pkg)}
+              >
                 <Edit className="w-4 h-4" />
                 Edit
               </button>
-              <button className="px-3 py-2 border border-red-300 dark:border-red-600 text-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20">
+              <button
+                className="px-3 py-2 border border-red-300 dark:border-red-600 text-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
+                onClick={() => handleDelete(pkg.id)}
+              >
                 <Trash className="w-4 h-4" />
               </button>
             </div>

frontend/src/pages/admin/AdminSystemDashboard.tsx

@@ -6,7 +6,8 @@
 import { useState, useEffect } from 'react';
 import { 
   Users, DollarSign, TrendingUp, AlertCircle, 
-  CheckCircle, Clock, Activity, Loader2 
+  CheckCircle, Clock, Activity, Loader2, ExternalLink,
+  Globe, Database, Folder, Server, GitBranch, FileText
 } from 'lucide-react';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
@@ -16,6 +17,23 @@ export default function AdminSystemDashboard() {
   const [loading, setLoading] = useState(true);
   const [stats, setStats] = useState<any>(null);
   const [error, setError] = useState<string>('');
+  const issuedCredits = Number(stats?.credits_issued_30d || 0);
+  const usedCredits = Number(stats?.credits_used_30d || 0);
+  const creditScale = Math.max(issuedCredits, usedCredits, 1);
+  const issuedPct = Math.min(100, Math.round((issuedCredits / creditScale) * 100));
+  const usedPct = Math.min(100, Math.round((usedCredits / creditScale) * 100));
+
+  const adminLinks = [
+    { label: 'Marketing Site', url: 'https://igny8.com', icon: <Globe className="w-5 h-5 text-blue-600" />, note: 'Public marketing site' },
+    { label: 'IGNY8 App', url: 'https://app.igny8.com', icon: <Globe className="w-5 h-5 text-green-600" />, note: 'Main SaaS UI' },
+    { label: 'Django Admin', url: 'https://api.igny8.com/admin', icon: <Server className="w-5 h-5 text-indigo-600" />, note: 'Backend admin UI' },
+    { label: 'PgAdmin', url: 'http://31.97.144.105:5050/', icon: <Database className="w-5 h-5 text-amber-600" />, note: 'Postgres console' },
+    { label: 'File Manager', url: 'https://files.igny8.com', icon: <Folder className="w-5 h-5 text-teal-600" />, note: 'File manager UI' },
+    { label: 'Portainer', url: 'http://31.97.144.105:9443', icon: <Server className="w-5 h-5 text-purple-600" />, note: 'Container management' },
+    { label: 'API Docs (Swagger)', url: 'https://api.igny8.com/api/docs/', icon: <FileText className="w-5 h-5 text-orange-600" />, note: 'Swagger UI' },
+    { label: 'API Docs (ReDoc)', url: 'https://api.igny8.com/api/redoc/', icon: <FileText className="w-5 h-5 text-rose-600" />, note: 'ReDoc docs' },
+    { label: 'Gitea Repo', url: 'https://git.igny8.com/salman/igny8', icon: <GitBranch className="w-5 h-5 text-gray-700" />, note: 'Source control' },
+  ];
 
   useEffect(() => {
     loadStats();
@@ -93,7 +111,7 @@ export default function AdminSystemDashboard() {
             <div>
               <div className="text-sm text-gray-600 dark:text-gray-400 mb-1">Revenue This Month</div>
               <div className="text-3xl font-bold text-gray-900 dark:text-white">
-                ${stats?.revenue_this_month || '0.00'}
+                ${Number(stats?.revenue_this_month || 0).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
               </div>
               <div className="text-sm text-green-600 mt-1">
                 <TrendingUp className="w-4 h-4 inline" /> +12% vs last month
@@ -152,25 +170,55 @@ export default function AdminSystemDashboard() {
             <div>
               <div className="flex justify-between items-center mb-1">
                 <span className="text-sm text-gray-600 dark:text-gray-400">Issued (30 days)</span>
-                <span className="font-semibold">{stats?.credits_issued_30d?.toLocaleString() || 0}</span>
+                <span className="font-semibold">{issuedCredits.toLocaleString()}</span>
               </div>
               <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-                <div className="bg-blue-600 h-2 rounded-full" style={{ width: '75%' }}></div>
+                <div className="bg-blue-600 h-2 rounded-full" style={{ width: `${issuedPct}%` }}></div>
               </div>
             </div>
             <div>
               <div className="flex justify-between items-center mb-1">
                 <span className="text-sm text-gray-600 dark:text-gray-400">Used (30 days)</span>
-                <span className="font-semibold">{stats?.credits_used_30d?.toLocaleString() || 0}</span>
+                <span className="font-semibold">{usedCredits.toLocaleString()}</span>
               </div>
               <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-                <div className="bg-green-600 h-2 rounded-full" style={{ width: '60%' }}></div>
+                <div className="bg-green-600 h-2 rounded-full" style={{ width: `${usedPct}%` }}></div>
               </div>
             </div>
           </div>
         </Card>
       </div>
 
+      {/* Admin Quick Access */}
+      <Card className="p-6 mb-6">
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h2 className="text-lg font-semibold">Admin Quick Access</h2>
+            <p className="text-sm text-gray-500 dark:text-gray-400">Open common admin tools directly</p>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          {adminLinks.map((link) => (
+            <a
+              key={link.url}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start justify-between rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 hover:shadow-md transition-shadow"
+            >
+              <div className="flex items-start gap-3">
+                <div className="mt-0.5">{link.icon}</div>
+                <div>
+                  <p className="text-sm font-semibold text-gray-900 dark:text-white">{link.label}</p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{link.note}</p>
+                </div>
+              </div>
+              <ExternalLink className="w-4 h-4 text-gray-400" />
+            </a>
+          ))}
+        </div>
+      </Card>
+
       {/* Recent Activity */}
       <Card className="p-6">
         <h2 className="text-lg font-semibold mb-4">Recent Activity</h2>

frontend/src/services/billing.api.ts

@@ -1,6 +1,6 @@
 /**
  * Billing API Service
- * Uses STANDARD billing endpoints from /api/v1/billing and /api/v1/admin/billing
+ * Uses STANDARD billing endpoints from /v1/billing and /v1/admin/billing
  */
 
 import { fetchAPI } from './api';
@@ -166,6 +166,7 @@ export interface PaymentMethod {
   display_name: string;
   name?: string;
   is_enabled: boolean;
+  is_default?: boolean;
   instructions?: string;
   bank_details?: {
     bank_name?: string;
@@ -200,7 +201,7 @@ export async function getCreditTransactions(): Promise<{
   count: number;
   current_balance?: number;
 }> {
-  return fetchAPI('/api/v1/billing/transactions/');
+  return fetchAPI('/v1/billing/transactions/');
 }
 
 // ============================================================================
@@ -220,7 +221,7 @@ export async function getCreditUsage(params?: {
   if (params?.start_date) queryParams.append('start_date', params.start_date);
   if (params?.end_date) queryParams.append('end_date', params.end_date);
   
-  const url = `/api/v1/billing/credits/usage/${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
+  const url = `/v1/billing/credits/usage/${queryParams.toString() ? '?' + queryParams.toString() : ''}`;
   return fetchAPI(url);
 }
 
@@ -266,7 +267,8 @@ export async function getCreditUsageLimits(): Promise<{
 
 export async function getAdminBillingStats(): Promise<AdminBillingStats> {
   // Admin billing dashboard metrics
-  return fetchAPI('/v1/admin/billing/stats/');
+  // Use business billing stats endpoint to include revenue, accounts, credits, and recent payments
+  return fetchAPI('/v1/billing/admin/stats/');
 }
 
 export async function getAdminInvoices(params?: { status?: string; account_id?: number; search?: string }): Promise<{
@@ -377,7 +379,7 @@ export async function getInvoiceDetail(invoiceId: number): Promise<Invoice> {
 }
 
 export async function downloadInvoicePDF(invoiceId: number): Promise<Blob> {
-  const response = await fetch(`/api/v1/billing/invoices/${invoiceId}/download_pdf/`, {
+  const response = await fetch(`/v1/billing/invoices/${invoiceId}/download_pdf/`, {
     headers: {
       'Authorization': `Bearer ${localStorage.getItem('access_token')}`,
     },
@@ -448,6 +450,49 @@ export async function getAdminCreditPackages(): Promise<{
   return fetchAPI('/v1/billing/credit-packages/');
 }
 
+export async function createAdminCreditPackage(data: {
+  name: string;
+  slug?: string;
+  credits: number;
+  price: string | number;
+  discount_percentage?: number;
+  description?: string;
+  is_active?: boolean;
+  is_featured?: boolean;
+  sort_order?: number;
+}): Promise<{ package: CreditPackage; message?: string }> {
+  return fetchAPI('/v1/billing/credit-packages/', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  });
+}
+
+export async function updateAdminCreditPackage(
+  id: number,
+  data: Partial<{
+    name: string;
+    slug: string;
+    credits: number;
+    price: string | number;
+    discount_percentage: number;
+    description: string;
+    is_active: boolean;
+    is_featured: boolean;
+    sort_order: number;
+  }>
+): Promise<{ package: CreditPackage; message?: string }> {
+  return fetchAPI(`/v1/billing/credit-packages/${id}/`, {
+    method: 'PATCH',
+    body: JSON.stringify(data),
+  });
+}
+
+export async function deleteAdminCreditPackage(id: number): Promise<{ message?: string }> {
+  return fetchAPI(`/v1/billing/credit-packages/${id}/`, {
+    method: 'DELETE',
+  });
+}
+
 export async function purchaseCreditPackage(data: {
   package_id: number;
   payment_method: 'stripe' | 'paypal' | 'bank_transfer' | 'local_wallet';
@@ -461,7 +506,7 @@ export async function purchaseCreditPackage(data: {
   stripe_client_secret?: string;
   paypal_order_id?: string;
 }> {
-  return fetchAPI(`/api/v1/billing/credit-packages/${data.package_id}/purchase/`, {
+  return fetchAPI(`/v1/billing/credit-packages/${data.package_id}/purchase/`, {
     method: 'POST',
     body: JSON.stringify({ payment_method: data.payment_method }),
   });
@@ -505,11 +550,53 @@ export async function removeTeamMember(memberId: number): Promise<{
 // PAYMENT METHODS
 // ============================================================================
 
+// Account payment methods (CRUD)
 export async function getAvailablePaymentMethods(): Promise<{
   results: PaymentMethod[];
   count: number;
 }> {
-  return fetchAPI('/api/v1/billing/payment-methods/');
+  return fetchAPI('/v1/billing/payment-methods/');
+}
+
+export async function createPaymentMethod(data: {
+  type: 'stripe' | 'paypal' | 'bank_transfer' | 'local_wallet' | 'manual';
+  display_name: string;
+  instructions?: string;
+  metadata?: Record<string, any>;
+  country_code?: string;
+  is_default?: boolean;
+}): Promise<{ payment_method: PaymentMethod; message?: string }> {
+  return fetchAPI('/v1/billing/payment-methods/', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  });
+}
+
+export async function deletePaymentMethod(id: string): Promise<{ message?: string }> {
+  return fetchAPI(`/v1/billing/payment-methods/${id}/`, {
+    method: 'DELETE',
+  });
+}
+
+export async function updatePaymentMethod(id: string, data: Partial<PaymentMethod>): Promise<{ payment_method?: PaymentMethod; message?: string }> {
+  return fetchAPI(`/v1/billing/payment-methods/${id}/`, {
+    method: 'PATCH',
+    body: JSON.stringify(data),
+  });
+}
+
+export async function setDefaultPaymentMethod(id: string): Promise<{ payment_method?: PaymentMethod; message?: string }> {
+  return fetchAPI(`/v1/billing/payment-methods/${id}/set_default/`, {
+    method: 'POST',
+  });
+}
+
+// Country/config-driven available methods (legacy)
+export async function getPaymentMethodConfigs(): Promise<{
+  results: PaymentMethod[];
+  count: number;
+}> {
+  return fetchAPI('/v1/billing/payment-methods/available/');
 }
 
 export async function createManualPayment(data: {
@@ -523,7 +610,7 @@ export async function createManualPayment(data: {
   status: string;
   message: string;
 }> {
-  return fetchAPI('/api/v1/billing/payments/manual/', {
+  return fetchAPI('/v1/billing/payments/manual/', {
     method: 'POST',
     body: JSON.stringify(data),
   });
@@ -537,7 +624,7 @@ export async function getPendingPayments(): Promise<{
   results: PendingPayment[];
   count: number;
 }> {
-  return fetchAPI('/api/v1/billing/admin/pending_payments/');
+  return fetchAPI('/v1/billing/admin/pending_payments/');
 }
 
 export async function approvePayment(paymentId: number, data?: {
@@ -546,7 +633,7 @@ export async function approvePayment(paymentId: number, data?: {
   message: string;
   payment: Payment;
 }> {
-  return fetchAPI(`/api/v1/billing/admin/${paymentId}/approve_payment/`, {
+  return fetchAPI(`/v1/billing/admin/${paymentId}/approve_payment/`, {
     method: 'POST',
     body: JSON.stringify(data || {}),
   });
@@ -559,7 +646,7 @@ export async function rejectPayment(paymentId: number, data: {
   message: string;
   payment: Payment;
 }> {
-  return fetchAPI(`/api/v1/billing/admin/${paymentId}/reject_payment/`, {
+  return fetchAPI(`/v1/billing/admin/${paymentId}/reject_payment/`, {
     method: 'POST',
     body: JSON.stringify(data),
   });
@@ -628,3 +715,55 @@ export interface UsageAnalytics {
 export async function getUsageAnalytics(days: number = 30): Promise<UsageAnalytics> {
   return fetchAPI(`/v1/account/usage/analytics/?days=${days}`);
 }
+
+// ============================================================================
+// PLANS & SUBSCRIPTIONS (TENANT)
+// ============================================================================
+
+export interface Plan {
+  id: number;
+  name: string;
+  slug?: string;
+  price?: number | string;
+  currency?: string;
+  interval?: 'month' | 'year';
+  description?: string;
+  is_active?: boolean;
+  features?: string[];
+  limits?: Record<string, any>;
+  display_order?: number;
+}
+
+export interface Subscription {
+  id: number;
+  plan: Plan | number;
+  status: string;
+  current_period_start?: string;
+  current_period_end?: string;
+  cancel_at_period_end?: boolean;
+  created_at?: string;
+}
+
+export async function getPlans(): Promise<{ results: Plan[] }> {
+  return fetchAPI('/v1/auth/plans/');
+}
+
+export async function getSubscriptions(): Promise<{ results: Subscription[] }> {
+  return fetchAPI('/v1/auth/subscriptions/');
+}
+
+export async function createSubscription(data: {
+  plan_id: number;
+  payment_method?: string;
+}): Promise<{ message?: string; subscription?: Subscription }> {
+  return fetchAPI('/v1/auth/subscriptions/', {
+    method: 'POST',
+    body: JSON.stringify(data),
+  });
+}
+
+export async function cancelSubscription(subscriptionId: number): Promise<{ message?: string }> {
+  return fetchAPI(`/v1/auth/subscriptions/${subscriptionId}/cancel/`, {
+    method: 'POST',
+  });
+}

frontend/src/store/billingStore.ts

@@ -1,57 +1,79 @@
 /**
  * Billing Store (Zustand)
- * Manages credit balance and usage tracking
+ * Manages credit balance and usage tracking with graceful error state
  */
 import { create } from 'zustand';
 import {
-  fetchCreditBalance,
-  fetchUsageSummary,
-  CreditBalance,
-  UsageSummary,
-} from '../services/api';
+  getCreditBalance,
+  getCreditUsageLimits,
+  getCreditUsageSummary,
+  type CreditBalance,
+} from '../services/billing.api';
 
 interface BillingState {
   balance: CreditBalance | null;
-  usageSummary: UsageSummary | null;
+  usageSummary: any | null;
+  usageLimits: any | null;
   loading: boolean;
   error: string | null;
+  lastUpdated?: string | null;
   
   // Actions
   loadBalance: () => Promise<void>;
   loadUsageSummary: (startDate?: string, endDate?: string) => Promise<void>;
+  loadUsageLimits: () => Promise<void>;
   reset: () => void;
 }
 
 export const useBillingStore = create<BillingState>((set, get) => ({
   balance: null,
   usageSummary: null,
+  usageLimits: null,
   loading: false,
   error: null,
+  lastUpdated: null,
   
   loadBalance: async () => {
+    // keep existing balance while retrying
     set({ loading: true, error: null });
     try {
-      const balance = await fetchCreditBalance();
-      set({ balance, loading: false });
+      const balance = await getCreditBalance();
+      set({ balance, loading: false, error: null, lastUpdated: new Date().toISOString() });
     } catch (error: any) {
-      set({ error: error.message, loading: false });
+      set({ error: error.message || 'Balance unavailable', loading: false });
     }
   },
   
   loadUsageSummary: async (startDate?: string, endDate?: string) => {
     set({ loading: true, error: null });
     try {
-      const summary = await fetchUsageSummary(startDate, endDate);
+      const summary = await getCreditUsageSummary({ start_date: startDate, end_date: endDate } as any);
       set({ usageSummary: summary, loading: false });
     } catch (error: any) {
       set({ error: error.message, loading: false });
     }
   },
 
+  loadUsageLimits: async () => {
+    set({ loading: true, error: null });
+    try {
+      const limits = await getCreditUsageLimits();
+      set({ usageLimits: limits, loading: false });
+    } catch (error: any) {
+      // If limits endpoint is not available (404), keep going without hard error
+      if (error?.status === 404) {
+        set({ usageLimits: null, loading: false });
+        return;
+      }
+      set({ error: error.message || 'Usage limits unavailable', loading: false });
+    }
+  },
+  
   reset: () => {
     set({
       balance: null,
       usageSummary: null,
+      usageLimits: null,
       loading: false,
       error: null,
     });