Implement subscription management features including billing history, plan changes, and usage metrics

.vscode/settings.json

@@ -1,8 +1,67 @@
 {
+    // ─── Python Environment ──────────────────────────────────────────────────
+    // Automatically targets your virtual environment for Windows
     "python.defaultInterpreterPath": "${workspaceFolder}/.venv/Scripts/python.exe",
+    
+    // Tells the linter where your Django root is to prevent import errors
     "python.analysis.extraPaths": [
-        "${workspaceFolder}/apps",
-        "${workspaceFolder}/config"
+        "${workspaceFolder}"
     ],
-    "python.terminal.activateEnvironment": true
+
+    // ─── Formatting & Linting (Black, isort, Flake8) ─────────────────────────
+    "[python]": {
+        "editor.defaultFormatter": "ms-python.black-formatter",
+        "editor.formatOnSave": true,
+        "editor.codeActionsOnSave": {
+            "source.organizeImports": "explicit"
+        }
+    },
+    
+    // isort configuration (aligns with Black)
+    "isort.args": ["--profile", "black"],
+
+    // Flake8 linting
+    "flake8.args": [
+        "--max-line-length=88",
+        "--extend-ignore=E203,W503"
+    ],
+
+    // ─── Templates (Jinja2 / Django) ─────────────────────────────────────────
+    // Forces HTML files in template folders to use Jinja/Django HTML syntax highlighting
+    "files.associations": {
+        "**/templates/**/*.html": "jinja-html",
+        "*.html": "jinja-html"
+    },
+    
+    // Tailors editor settings specifically for Jinja template files
+    "[jinja-html]": {
+        "editor.tabSize": 4,
+        "editor.formatOnSave": true
+    },
+    "[django-html]": {
+        "editor.tabSize": 4,
+        "editor.formatOnSave": true
+    },
+
+    // ─── Tailwind CSS ────────────────────────────────────────────────────────
+    // Ensures Tailwind autocomplete works inside your template files
+    "tailwindCSS.includeLanguages": {
+        "jinja-html": "html",
+        "django-html": "html"
+    },
+    "tailwindCSS.experimental.classRegex": [
+        "class=\\s*['\"]([^'\"]*)['\"]",
+        "class:\\s*['\"]([^'\"]*)['\"]"
+    ],
+
+    // ─── File Explorer ───────────────────────────────────────────────────────
+    // Excludes messy compiled files from your VS Code file explorer search
+    "files.exclude": {
+        "**/__pycache__": true,
+        "**/*.pyc": true,
+        "**/.pytest_cache": true,
+        "**/.mypy_cache": true,
+        "**/.ruff_cache": true,
+        ".venv": false  // Kept visible in case you need to inspect installed packages
+    }
 }

SAAS.code-workspace

@@ -3,5 +3,34 @@
         {
             "path": "."
         }
-    ]
-}
+    ],
+    "settings": {
+        // Automatically targets your virtual environment (adjust path if needed)
+        "python.defaultInterpreterPath": "${workspaceFolder}/venv/bin/python",
+        
+        // Tells the linter where your Django root is to prevent import errors
+        "python.analysis.extraPaths": [
+            "${workspaceFolder}"
+        ],
+        
+        // Forces HTML files in template folders to use Django HTML syntax highlighting
+        "files.associations": {
+            "**/templates/**/*.html": "django-html",
+            "*.html": "django-html"
+        },
+        
+        // Tailors editor settings specifically for Django template files
+        "[django-html]": {
+            "editor.tabSize": 4,
+            "editor.formatOnSave": true,
+            "editor.defaultFormatter": "batisteo.vscode-django"
+        },
+        
+        // Excludes messy compiled files from your VS Code file explorer search
+        "files.exclude": {
+            "**/__pycache__": true,
+            "**/*.pyc": true,
+            "**/.*": true
+        }
+    }
+}

apps/billing/decorators.py

@@ -0,0 +1,18 @@
+from functools import wraps
+from django.http import HttpResponseForbidden
+
+def plan_required(feature_key):
+    """View decorator — checks org plan includes the feature."""
+    def decorator(view_func):
+        @wraps(view_func)
+        def wrapper(request, *args, **kwargs):
+            org = getattr(request, 'tenant', None)
+            if org:
+                from apps.billing.services.plan_enforcement import check_feature_access
+                try:
+                    check_feature_access(org, feature_key)
+                except Exception:
+                    return HttpResponseForbidden("Upgrade your plan to access this feature.")
+            return view_func(request, *args, **kwargs)
+        return wrapper
+    return decorator

apps/billing/management/commands/seed_plans.py

@@ -0,0 +1,42 @@
+from django.core.management.base import BaseCommand
+from django.conf import settings
+from apps.billing.models import SubscriptionPlan
+
+class Command(BaseCommand):
+    help = 'Seeds subscription plans from settings.SUBSCRIPTION_PLANS into the database.'
+
+    def handle(self, *args, **options):
+        plans_config = getattr(settings, 'SUBSCRIPTION_PLANS', [])
+        if not plans_config:
+            self.stdout.write(self.style.WARNING("No SUBSCRIPTION_PLANS found in settings."))
+            return
+
+        active_slugs = []
+        for plan_data in plans_config:
+            slug = plan_data['slug']
+            active_slugs.append(slug)
+            
+            defaults = {
+                'name': plan_data['name'],
+                'description': plan_data.get('description', ''),
+                'monthly_price': plan_data.get('monthly_price', 0),
+                'max_users': plan_data.get('max_users', 1),
+                'max_storage_bytes': plan_data.get('max_storage_bytes', 1073741824),
+                'features': plan_data.get('features', []),
+                'is_active': True,
+            }
+            
+            plan, created = SubscriptionPlan.objects.update_or_create(
+                slug=slug,
+                defaults=defaults
+            )
+            
+            action = "Created" if created else "Updated"
+            self.stdout.write(self.style.SUCCESS(f"[OK] {action} plan: {plan.name} (Rs {plan.monthly_price}/mo, {plan.max_users} users, {plan.max_storage_bytes // (1024**3)}GB)"))
+
+        # Mark plans not in settings as inactive
+        deactivated = SubscriptionPlan.objects.exclude(slug__in=active_slugs).update(is_active=False)
+        if deactivated > 0:
+            self.stdout.write(self.style.WARNING(f"Deactivated {deactivated} plans not found in settings."))
+            
+        self.stdout.write(self.style.SUCCESS(f"[OK] {len(active_slugs)} plans synced from settings.SUBSCRIPTION_PLANS"))

apps/billing/services/billing_service.py

@@ -0,0 +1,133 @@
+from django.conf import settings
+from django.db import transaction
+from django.utils import timezone
+from apps.billing.models import SubscriptionPlan, OrganizationSubscription, BillingHistory
+from core.exceptions import NotFoundError
+
+def get_org_subscription(org):
+    """Get current subscription (or None)."""
+    try:
+        return OrganizationSubscription.objects.get(organization=org)
+    except OrganizationSubscription.DoesNotExist:
+        return None
+
+
+def get_org_plan(org):
+    """
+    Get the plan object for an org. 
+    Defaults to settings.DEFAULT_PLAN_SLUG if no subscription exists.
+    """
+    try:
+        sub = OrganizationSubscription.objects.select_related('plan').get(
+            organization=org
+        )
+        if sub.is_active_or_trialing:
+            return sub.plan
+    except OrganizationSubscription.DoesNotExist:
+        pass
+    
+    # Fallback to default plan from settings
+    try:
+        return SubscriptionPlan.objects.get(slug=settings.DEFAULT_PLAN_SLUG)
+    except SubscriptionPlan.DoesNotExist:
+        raise NotFoundError(f"Default plan '{settings.DEFAULT_PLAN_SLUG}' not found in DB. Run seed_plans.")
+
+
+@transaction.atomic
+def assign_default_plan(org):
+    """Auto-assign the default plan to an org on creation."""
+    try:
+        plan = SubscriptionPlan.objects.get(slug=settings.DEFAULT_PLAN_SLUG)
+    except SubscriptionPlan.DoesNotExist:
+        # Fallback gently if plans aren't seeded yet
+        return None
+        
+    sub, created = OrganizationSubscription.objects.get_or_create(
+        organization=org,
+        defaults={
+            "plan": plan,
+            "status": OrganizationSubscription.Status.ACTIVE,
+        }
+    )
+    return sub
+
+
+@transaction.atomic
+def activate_subscription(org, plan, razorpay_subscription_id=None):
+    """Set subscription to ACTIVE after payment."""
+    sub, _ = OrganizationSubscription.objects.update_or_create(
+        organization=org,
+        defaults={
+            "plan": plan,
+            "status": OrganizationSubscription.Status.ACTIVE,
+            "razorpay_subscription_id": razorpay_subscription_id,
+            "cancel_at_period_end": False,
+        }
+    )
+    return sub
+
+
+@transaction.atomic
+def cancel_subscription(org):
+    """Set cancel_at_period_end = True."""
+    sub = get_org_subscription(org)
+    if not sub:
+        raise NotFoundError("No active subscription to cancel.")
+        
+    sub.cancel_at_period_end = True
+    sub.save(update_fields=["cancel_at_period_end", "updated_at"])
+    return sub
+
+
+@transaction.atomic
+def reactivate_subscription(org):
+    """Undo cancel_at_period_end."""
+    sub = get_org_subscription(org)
+    if not sub:
+        raise NotFoundError("No active subscription to reactivate.")
+        
+    sub.cancel_at_period_end = False
+    sub.save(update_fields=["cancel_at_period_end", "updated_at"])
+    return sub
+
+
+@transaction.atomic
+def handle_payment_failed(org):
+    """Set status to PAST_DUE."""
+    sub = get_org_subscription(org)
+    if sub:
+        sub.status = OrganizationSubscription.Status.PAST_DUE
+        sub.save(update_fields=["status", "updated_at"])
+    return sub
+
+
+@transaction.atomic
+def handle_subscription_cancelled(org):
+    """Downgrade to default plan."""
+    sub = get_org_subscription(org)
+    if sub:
+        sub.status = OrganizationSubscription.Status.CANCELED
+        sub.save(update_fields=["status", "updated_at"])
+        
+    # Switch them back to free plan
+    assign_default_plan(org)
+    return sub
+
+
+@transaction.atomic
+def record_payment(org, amount, status, razorpay_payment_id=None, razorpay_invoice_id=None):
+    """Create BillingHistory entry."""
+    history = BillingHistory.objects.create(
+        organization=org,
+        amount=amount,
+        status=status,
+        razorpay_payment_id=razorpay_payment_id,
+        razorpay_invoice_id=razorpay_invoice_id,
+        currency=settings.RAZORPAY_CURRENCY,
+    )
+    return history
+
+
+def get_billing_history(org):
+    """List payment records for org."""
+    return BillingHistory.objects.filter(organization=org).order_by('-created_at')

apps/billing/services/plan_enforcement.py

@@ -0,0 +1,55 @@
+from apps.billing.services.billing_service import get_org_plan
+from core.exceptions import ValidationError
+
+def get_plan_limits(org) -> dict:
+    """Get all limits from the org's current plan."""
+    plan = get_org_plan(org)
+    return {
+        "max_users": plan.max_users,
+        "max_storage_bytes": plan.max_storage_bytes,
+        "features": plan.features or [],
+        "plan_name": plan.name,
+        "plan_slug": plan.slug,
+    }
+
+
+def check_user_limit(org, is_invite=False) -> None:
+    """Raise ValidationError if org has reached max users for their plan."""
+    from apps.organizations.models import OrgMembership, OrgInvitation
+    plan = get_org_plan(org)
+    member_count = OrgMembership.objects.filter(org=org).count()
+    
+    if is_invite:
+        pending_count = OrgInvitation.objects.filter(org=org, accepted_at__isnull=True).count()
+        total = member_count + pending_count
+    else:
+        total = member_count
+        pending_count = 0
+    
+    if total >= plan.max_users:
+        msg = f"Your {plan.name} plan allows {plan.max_users} users. "
+        if is_invite and pending_count > 0:
+            msg += f"You have {member_count} members and {pending_count} pending invites. "
+        msg += "Upgrade to add more members."
+        raise ValidationError(msg)
+
+
+def check_storage_limit(org, additional_bytes: int) -> None:
+    """Raise ValidationError if upload would exceed plan storage."""
+    plan = get_org_plan(org)
+    if (org.storage_usage_bytes + additional_bytes) > plan.max_storage_bytes:
+        max_gb = plan.max_storage_bytes / (1024 ** 3)
+        raise ValidationError(
+            f"Your {plan.name} plan allows {max_gb:.0f}GB storage. "
+            f"Upgrade to get more space."
+        )
+
+
+def check_feature_access(org, feature_key: str) -> None:
+    """Raise ValidationError if feature not included in plan."""
+    plan = get_org_plan(org)
+    if feature_key not in (plan.features or []):
+        raise ValidationError(
+            f"The '{feature_key}' feature requires a higher plan. "
+            f"You are on the {plan.name} plan."
+        )

apps/billing/services/razorpay_service.py

@@ -50,3 +50,22 @@ class RazorpayService:
             "razorpay_signature": razorpay_signature,
         }
         self.client.utility.verify_payment_signature(params)
+
+    def create_upgrade_order(self, organization, new_plan_slug):
+        """
+        Create order for plan upgrade (full price of new plan).
+        Proration logic can be added here later if required.
+        """
+        return self.create_order(organization, new_plan_slug)
+
+    def fetch_payment(self, payment_id):
+        """
+        Get payment details from Razorpay API.
+        """
+        return self.client.payment.fetch(payment_id)
+
+    def verify_webhook_signature(self, body, signature):
+        """
+        HMAC-SHA256 verification for webhook requests.
+        """
+        return self.client.utility.verify_webhook_signature(body, signature, settings.RAZORPAY_KEY_SECRET)

apps/billing/urls.py

@@ -7,4 +7,10 @@ urlpatterns = [
     path("pricing/", views.pricing_view, name="pricing"),
     path("checkout/<slug:plan_slug>/", views.create_subscription_checkout, name="checkout"),
     path("verify/", views.verify_payment, name="verify"),
+    
+    path("billing/", views.subscription_view, name="subscription"),
+    path("billing/change/<slug:plan_slug>/", views.change_plan_view, name="change-plan"),
+    path("billing/cancel/", views.cancel_subscription_view, name="cancel"),
+    path("billing/reactivate/", views.reactivate_subscription_view, name="reactivate"),
+    path("webhooks/razorpay/", views.razorpay_webhook, name="razorpay-webhook"),
 ]

apps/billing/views.py

@@ -121,3 +121,127 @@ def verify_payment(request):
 
     except Exception as e:
         return JsonResponse({"status": "failure", "error": str(e)}, status=400)
+
+
+@login_required
+def subscription_view(request):
+    """
+    Shows current plan, usage meters, and billing history.
+    """
+    from apps.billing.services.billing_service import get_org_plan, get_org_subscription, get_billing_history
+    from apps.billing.services.plan_enforcement import get_plan_limits
+    
+    org = getattr(request, 'tenant', None)
+    if not org:
+        from apps.organizations.models import Organization
+        org = Organization.objects.filter(owner=request.user).first()
+        
+    if not org:
+        return render(request, "pages/billing/subscription.html", {"error": "You must own an organisation."})
+
+    plan = get_org_plan(org)
+    subscription = get_org_subscription(org)
+    limits = get_plan_limits(org)
+    history = get_billing_history(org)
+    
+    # Calculate usage
+    from apps.organizations.models import OrgMembership
+    user_count = OrgMembership.objects.filter(org=org).count()
+    storage_gb = org.storage_usage_bytes / (1024**3)
+    max_storage_gb = limits['max_storage_bytes'] / (1024**3)
+    
+    context = {
+        "org": org,
+        "plan": plan,
+        "subscription": subscription,
+        "limits": limits,
+        "history": history,
+        "usage": {
+            "users": user_count,
+            "max_users": limits['max_users'],
+            "users_percent": min(100, int((user_count / max(1, limits['max_users'])) * 100)),
+            "storage_gb": round(storage_gb, 2),
+            "max_storage_gb": round(max_storage_gb, 2),
+            "storage_percent": min(100, int((storage_gb / max(0.01, max_storage_gb)) * 100)),
+        }
+    }
+    return render(request, "pages/billing/subscription.html", context)
+
+
+@login_required
+@require_POST
+def change_plan_view(request, plan_slug):
+    """Create order for plan change."""
+    # We reuse create_subscription_checkout logic for now.
+    return create_subscription_checkout(request, plan_slug)
+
+
+@login_required
+@require_POST
+def cancel_subscription_view(request):
+    """Cancel subscription at period end."""
+    from apps.billing.services.billing_service import cancel_subscription
+    from django.shortcuts import redirect
+    from django.contrib import messages
+    
+    org = getattr(request, 'tenant', None) or request.user.owned_organizations.first()
+    if org:
+        try:
+            cancel_subscription(org)
+            messages.success(request, "Your subscription has been canceled and will end at the current billing cycle.")
+        except Exception as e:
+            messages.error(request, f"Error: {str(e)}")
+    return redirect("billing:subscription")
+
+
+@login_required
+@require_POST
+def reactivate_subscription_view(request):
+    """Undo cancellation."""
+    from apps.billing.services.billing_service import reactivate_subscription
+    from django.shortcuts import redirect
+    from django.contrib import messages
+    
+    org = getattr(request, 'tenant', None) or request.user.owned_organizations.first()
+    if org:
+        try:
+            reactivate_subscription(org)
+            messages.success(request, "Your subscription has been reactivated successfully.")
+        except Exception as e:
+            messages.error(request, f"Error: {str(e)}")
+    return redirect("billing:subscription")
+
+
+from django.views.decorators.csrf import csrf_exempt
+
+@csrf_exempt
+@require_POST
+def razorpay_webhook(request):
+    """Handle incoming Razorpay webhooks."""
+    from apps.billing.services.billing_service import (
+        handle_payment_failed, handle_subscription_cancelled, activate_subscription
+    )
+    
+    signature = request.headers.get("X-Razorpay-Signature", "")
+    service = RazorpayService()
+    
+    try:
+        service.verify_webhook_signature(request.body.decode('utf-8'), signature)
+    except Exception:
+        return JsonResponse({"error": "Invalid signature"}, status=400)
+        
+    try:
+        payload = json.loads(request.body)
+        event = payload.get("event")
+        # In a real system, you'd parse the entity and find the org based on razorpay_subscription_id
+        # For this prototype, we'll log it or handle via a mocked org lookup if needed.
+        
+        # Example pseudo-handling
+        if event == "payment.failed":
+            pass # handle_payment_failed(org)
+        elif event == "subscription.cancelled":
+            pass # handle_subscription_cancelled(org)
+            
+        return JsonResponse({"status": "ok"})
+    except Exception as e:
+        return JsonResponse({"error": str(e)}, status=400)

apps/organizations/services/api_key_service.py

@@ -11,6 +11,9 @@ from core.services.encryption import hash_token
 
 def generate_key(org, user=None, name: str = "", scope: str = "", expires_at=None) -> tuple:
     """Generate a new API key. Returns (APIKey, raw_key)."""
+    if org:
+        from apps.billing.services.plan_enforcement import check_feature_access
+        check_feature_access(org, 'api_keys')
     return APIKey.generate(org=org, user=user, name=name, scope=scope, expires_at=expires_at)
 
 

apps/organizations/services/file_service.py

@@ -42,6 +42,10 @@ def upload_file(
     """
     validate_file(mime_type, size_bytes)
 
+    if org:
+        from apps.billing.services.plan_enforcement import check_storage_limit
+        check_storage_limit(org, size_bytes)
+
     if org and not check_storage_quota(org, size_bytes):
         raise ValidationError("Storage quota would be exceeded.")
 

apps/organizations/services/membership_service.py

@@ -11,6 +11,8 @@ from core.exceptions import NotFoundError, ValidationError
 @transaction.atomic
 def invite_user(org, email: str, invited_by=None) -> OrgInvitation:
     """Create an invitation to join the org."""
+    from apps.billing.services.plan_enforcement import check_user_limit
+    check_user_limit(org, is_invite=True)
     if OrgMembership.objects.filter(org=org, user__email=email).exists():
         raise ValidationError("User is already a member.")
     if OrgInvitation.objects.filter(org=org, email=email, accepted_at__isnull=True).exists():
@@ -107,11 +109,14 @@ def _send_invitation_email(invitation, invited_by) -> None:
 @transaction.atomic
 def accept_invitation(token: str, user) -> OrgMembership:
     """Accept an invitation and create membership."""
+    from apps.billing.services.plan_enforcement import check_user_limit
     try:
         invitation = OrgInvitation.objects.get(token=token)
     except OrgInvitation.DoesNotExist:
         raise NotFoundError("Invalid invitation token.")
 
+    check_user_limit(invitation.org)
+
     if not invitation.is_valid:
         raise ValidationError("Invitation has expired or already been accepted.")
 

apps/organizations/services/org_service.py

@@ -42,6 +42,10 @@ def create_org(name: str, owner, vertical_type: str = "generic") -> Organization
     StorageQuota.objects.create(org=org)
     OrgMembership.objects.create(org=org, user=owner)
 
+    # Auto-assign default subscription plan
+    from apps.billing.services.billing_service import assign_default_plan
+    assign_default_plan(org)
+
     # Auto-assign org_owner role to the creator
     from apps.organizations.services.membership_service import assign_org_role
     assign_org_role(org, owner, "org_owner")

apps/organizations/services/quota_service.py

@@ -16,6 +16,13 @@ from core.exceptions import ValidationError
 def get_storage_quota(org) -> StorageQuota:
     """Get or create the storage quota for an org."""
     quota, _ = StorageQuota.objects.get_or_create(org=org)
+    
+    from apps.billing.services.plan_enforcement import get_plan_limits
+    limits = get_plan_limits(org)
+    if quota.max_bytes != limits['max_storage_bytes']:
+        quota.max_bytes = limits['max_storage_bytes']
+        quota.save(update_fields=['max_bytes'])
+        
     return quota
 
 

config/settings/__init__.py

@@ -238,3 +238,52 @@ Q_CLUSTER = {
 RAZORPAY_KEY_ID = env('RAZORPAY_KEY_ID', default='')
 RAZORPAY_KEY_SECRET = env('RAZORPAY_KEY_SECRET', default='')
 RAZORPAY_CURRENCY = env('RAZORPAY_CURRENCY', default='INR')
+
+# ─── Subscription Plan Configuration ─────────────────────────────────────────
+# Source of truth for plan definitions.
+# Run `python manage.py seed_plans` after changing to sync DB.
+
+SUBSCRIPTION_PLANS = [
+    {
+        "slug": "free",
+        "name": "Free",
+        "description": "For individuals and small teams getting started.",
+        "monthly_price": 0,
+        "max_users": 3,
+        "max_storage_bytes": 1 * 1024 * 1024 * 1024,   # 1 GB
+        "features": [],
+    },
+    {
+        "slug": "starter",
+        "name": "Starter",
+        "description": "For growing teams that need more power.",
+        "monthly_price": 499,
+        "max_users": 15,
+        "max_storage_bytes": 10 * 1024 * 1024 * 1024,  # 10 GB
+        "features": [
+            "api_keys",
+            "feature_flags",
+            "file_uploads",
+        ],
+    },
+    {
+        "slug": "pro",
+        "name": "Pro",
+        "description": "For large organizations with advanced needs.",
+        "monthly_price": 1499,
+        "max_users": 100,
+        "max_storage_bytes": 50 * 1024 * 1024 * 1024,  # 50 GB
+        "features": [
+            "api_keys",
+            "feature_flags",
+            "file_uploads",
+            "ai_chat",
+            "webhooks",
+            "data_export",
+            "priority_support",
+        ],
+    },
+]
+
+# Default plan slug assigned to new orgs
+DEFAULT_PLAN_SLUG = "free"

templates/layouts/partials/sidebar.html

@@ -83,6 +83,25 @@
             </div>
         </a>
 
+        <a href="{{ url('billing:subscription') }}" class="group relative flex items-center gap-3 px-2.5 py-1.5 text-sm font-medium rounded-lg {% if 'billing' in request.path %}bg-[--primary]/10 text-[--primary]{% else %}text-[--muted-foreground] hover:bg-[--muted] hover:text-[--foreground]{% endif %} transition-colors [.minimized_&]:justify-center [.minimized_&]:px-0 [.minimized_&]:py-2">
+             <svg class="h-[18px] w-[18px] shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
+            </svg>
+            <span class="whitespace-nowrap transition-opacity duration-300 [.minimized_&]:opacity-0 [.minimized_&]:w-0 [.minimized_&]:hidden flex-1 flex justify-between items-center">
+                <span>Billing</span>
+            </span>
+
+            {# Tooltip #}
+            <div class="absolute left-full top-1/2 -translate-y-1/2 ml-3 px-3 py-1.5 
+                        bg-[--card] border border-[--border] text-[--foreground] text-xs font-bold rounded-lg shadow-2xl
+                        opacity-0 translate-x-1 transition-all duration-200 pointer-events-none z-[70] whitespace-nowrap
+                        hidden [.minimized_&]:block [.minimized_&]:group-hover:opacity-100 [.minimized_&]:group-hover:translate-x-0">
+                Billing
+                {# Arrow #}
+                <div class="absolute -left-1 top-1/2 -translate-y-1/2 w-2 h-2 bg-[--card] border-l border-b border-[--border] rotate-45"></div>
+            </div>
+        </a>
+
         <div class="text-[10px] font-semibold text-[--muted-foreground] uppercase tracking-wider mt-6 mb-1.5 px-2 transition-opacity duration-300 [.minimized_&]:opacity-0 [.minimized_&]:hidden">Management</div>
 
         <a href="#" class="group relative flex items-center gap-3 px-2.5 py-1.5 text-sm font-medium rounded-lg text-[--muted-foreground] hover:bg-[--muted] hover:text-[--foreground] transition-colors [.minimized_&]:justify-center [.minimized_&]:px-0 [.minimized_&]:py-2">

templates/pages/billing/subscription.html

@@ -0,0 +1,182 @@
+{% extends "layouts/app_shell.html" %}
+
+{% block title %}Subscription - SaaS Platform{% endblock %}
+
+{% block page_header %}
+    {% include "components/page_header.html" with title="Subscription & Billing" subtitle="Manage your organization's plan, usage, and billing history." %}
+{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+
+    {% if messages %}
+    <div class="mb-4">
+        {% for message in messages %}
+            <div class="p-4 rounded-md text-sm {% if message.tags == 'success' %}bg-green-50 text-green-800 border border-green-200{% else %}bg-red-50 text-red-800 border border-red-200{% endif %}">
+                {{ message }}
+            </div>
+        {% endfor %}
+    </div>
+    {% endif %}
+
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <!-- Current Plan Card -->
+        <div class="col-span-1 md:col-span-2 bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
+            <div class="px-6 py-5 border-b border-gray-200">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <h3 class="text-lg leading-6 font-medium text-gray-900">
+                            Current Plan: {{ plan.name }}
+                        </h3>
+                        <p class="mt-1 text-sm text-gray-500">
+                            {% if plan.monthly_price == 0 %}
+                                Free forever
+                            {% else %}
+                                ₹{{ plan.monthly_price }}/month
+                            {% endif %}
+                        </p>
+                    </div>
+                    <div>
+                        {% if subscription and subscription.status == 'active' %}
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
+                                Active
+                            </span>
+                        {% elif subscription and subscription.status == 'past_due' %}
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
+                                Past Due
+                            </span>
+                        {% else %}
+                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800">
+                                {{ subscription.status|default:"Free"|title }}
+                            </span>
+                        {% endif %}
+                    </div>
+                </div>
+            </div>
+            
+            <div class="px-6 py-5">
+                <h4 class="text-sm font-medium text-gray-900 mb-3">Included Features</h4>
+                <ul class="space-y-2">
+                    {% for feature in limits.features %}
+                        <li class="flex items-start">
+                            <svg class="h-5 w-5 text-green-500 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                            </svg>
+                            <span class="text-sm text-gray-600">{{ feature|title|replace("_", " ") }}</span>
+                        </li>
+                    {% empty %}
+                        <li class="text-sm text-gray-500 italic">Core features only.</li>
+                    {% endfor %}
+                </ul>
+            </div>
+            
+            <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-between items-center">
+                {% if subscription and subscription.cancel_at_period_end %}
+                    <span class="text-sm text-red-600 font-medium">Cancels at end of billing period.</span>
+                    <form method="POST" action="{% url 'billing:reactivate' %}">
+                        {% csrf_token %}
+                        <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
+                            Reactivate Subscription
+                        </button>
+                    </form>
+                {% else %}
+                    <a href="{% url 'billing:pricing' %}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                        Change Plan
+                    </a>
+                    {% if plan.monthly_price > 0 %}
+                        <form method="POST" action="{% url 'billing:cancel' %}" onsubmit="return confirm('Are you sure you want to cancel your subscription?');">
+                            {% csrf_token %}
+                            <button type="submit" class="text-sm text-red-600 hover:text-red-900 font-medium">
+                                Cancel Subscription
+                            </button>
+                        </form>
+                    {% endif %}
+                {% endif %}
+            </div>
+        </div>
+
+        <!-- Usage Meters -->
+        <div class="col-span-1 bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
+            <div class="px-6 py-5 border-b border-gray-200">
+                <h3 class="text-lg leading-6 font-medium text-gray-900">Current Usage</h3>
+            </div>
+            <div class="px-6 py-5 space-y-6">
+                
+                <!-- Users -->
+                <div>
+                    <div class="flex justify-between items-center mb-1">
+                        <span class="text-sm font-medium text-gray-700">Members</span>
+                        <span class="text-sm text-gray-500">{{ usage.users }} / {{ usage.max_users }}</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-2">
+                        <div class="bg-indigo-600 h-2 rounded-full" style="width: {{ usage.users_percent }}%"></div>
+                    </div>
+                </div>
+
+                <!-- Storage -->
+                <div>
+                    <div class="flex justify-between items-center mb-1">
+                        <span class="text-sm font-medium text-gray-700">Storage</span>
+                        <span class="text-sm text-gray-500">{{ usage.storage_gb }} / {{ usage.max_storage_gb }} GB</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-2">
+                        <div class="bg-indigo-600 h-2 rounded-full" style="width: {{ usage.storage_percent }}%"></div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+    <!-- Billing History -->
+    <div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden mt-6">
+        <div class="px-6 py-5 border-b border-gray-200">
+            <h3 class="text-lg leading-6 font-medium text-gray-900">Billing History</h3>
+        </div>
+        
+        {% if history %}
+        <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reference</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                    {% for invoice in history %}
+                    <tr>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            {{ invoice.created_at|date:"M d, Y" }}
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">
+                            ₹{{ invoice.amount }}
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm">
+                            {% if invoice.status == 'paid' %}
+                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Paid</span>
+                            {% elif invoice.status == 'pending' %}
+                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Pending</span>
+                            {% else %}
+                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">{{ invoice.status|title }}</span>
+                            {% endif %}
+                        </td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                            {{ invoice.razorpay_payment_id|default:"-" }}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% else %}
+        <div class="px-6 py-8 text-center text-sm text-gray-500">
+            No billing history available yet.
+        </div>
+        {% endif %}
+    </div>
+
+</div>
+{% endblock %}