corrosion-admin-panel/frontend/src/views/platform-admin/AdminSubscriptions.vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useApi } from '@/composables/useApi'
import { CreditCard, Package, DollarSign, Users } from 'lucide-vue-next'
import { safeCurrency, safeLocaleString } from '@/utils/formatters'

const api = useApi()

interface Subscription {
  owner_email: string
  module_name: string
  license_id: string
}

interface SubscriptionResponse {
  subscriptions: Subscription[]
}

const subscriptions = ref<Subscription[]>([])
const isLoading = ref(false)

const MODULE_PRICE = 9.99

const totalSubscribers = computed(() => {
  const emails = new Set(subscriptions.value.map(s => s.owner_email))
  return emails.size
})

const totalMrr = computed(() => {
  return subscriptions.value.length * MODULE_PRICE
})

const moduleBreakdown = computed(() => {
  const counts: Record<string, number> = {}
  for (const sub of subscriptions.value) {
    counts[sub.module_name] = (counts[sub.module_name] || 0) + 1
  }
  return Object.entries(counts)
    .map(([name, count]) => ({ name, count }))
    .sort((a, b) => b.count - a.count)
})

async function fetchSubscriptions() {
  isLoading.value = true
  try {
    const data = await api.get<SubscriptionResponse>('/admin/subscriptions')
    subscriptions.value = data.subscriptions
  } catch {
    // API not wired yet
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  fetchSubscriptions()
})
</script>

<template>
  <div class="p-6 space-y-6 bg-neutral-950 min-h-screen">
    <!-- Header -->
    <div class="flex items-center gap-3">
      <CreditCard class="w-5 h-5 text-oxide-500" />
      <div>
        <h1 class="text-2xl font-bold text-neutral-100">Subscriptions</h1>
        <p class="text-sm text-neutral-400 mt-0.5">Module subscription overview and subscriber details.</p>
      </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      <!-- Total Subscribers -->
      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
        <div class="flex items-center gap-3 mb-3">
          <div class="p-2 rounded-lg bg-oxide-500/10">
            <Users class="w-4 h-4 text-oxide-400" />
          </div>
          <p class="text-sm text-neutral-400">Total Subscribers</p>
        </div>
        <div v-if="isLoading" class="h-8 w-16 bg-neutral-800 rounded animate-pulse" />
        <p v-else class="text-3xl font-bold text-neutral-100">{{ safeLocaleString(totalSubscribers) }}</p>
      </div>

      <!-- Total MRR -->
      <div class="bg-neutral-900 border border-neutral-800 rounded-lg p-5">
        <div class="flex items-center gap-3 mb-3">
          <div class="p-2 rounded-lg bg-green-500/10">
            <DollarSign class="w-4 h-4 text-green-400" />
          </div>
          <p class="text-sm text-neutral-400">Total MRR</p>
        </div>
        <div v-if="isLoading" class="h-8 w-24 bg-neutral-800 rounded animate-pulse" />
        <p v-else class="text-3xl font-bold text-neutral-100">{{ safeCurrency(totalMrr, '$') }}</p>
      </div>

      <!-- Per-Module Cards -->
      <div
        v-for="mod in moduleBreakdown"
        :key="mod.name"
        class="bg-neutral-900 border border-neutral-800 rounded-lg p-5"
      >
        <div class="flex items-center gap-3 mb-3">
          <div class="p-2 rounded-lg bg-oxide-500/10">
            <Package class="w-4 h-4 text-oxide-400" />
          </div>
          <p class="text-sm text-neutral-400 truncate">{{ mod.name }}</p>
        </div>
        <p class="text-3xl font-bold text-neutral-100">{{ mod.count }}</p>
        <p class="text-xs text-neutral-500 mt-1">subscribers</p>
      </div>
    </div>

    <!-- Table -->
    <div class="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden">
      <table class="w-full">
        <thead>
          <tr class="border-b border-neutral-800 text-left">
            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Owner Email</th>
            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">Module Name</th>
            <th class="px-4 py-3 text-xs font-medium text-neutral-500 uppercase tracking-wider">License ID</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-neutral-800">
          <tr v-if="subscriptions.length === 0 && !isLoading">
            <td colspan="3" class="px-4 py-12 text-center text-neutral-500 text-sm">
              No subscriptions found.
            </td>
          </tr>
          <tr v-if="isLoading">
            <td colspan="3" class="px-4 py-12 text-center text-neutral-500 text-sm">Loading subscriptions...</td>
          </tr>
          <tr
            v-for="(sub, idx) in subscriptions"
            :key="`${sub.license_id}-${sub.module_name}-${idx}`"
            class="hover:bg-neutral-800/50 transition-colors"
          >
            <td class="px-4 py-3 text-sm text-neutral-100">{{ sub.owner_email }}</td>
            <td class="px-4 py-3 text-sm text-neutral-400">{{ sub.module_name }}</td>
            <td class="px-4 py-3 text-sm text-neutral-400 font-mono">{{ sub.license_id }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>