@littlebearapps/platform-admin-sdk 2.1.0 → 2.3.0

package/templates/shared/dashboard/src/components/usage/OverageCostCard.astro

@@ -0,0 +1,212 @@
+---
+/**
+ * OverageCostCard - Displays base cost + overage breakdown
+ *
+ * Shows "$5.00 base + $0.00 overage" breakdown for Workers Paid Plan.
+ * Supports prorated base cost for sub-monthly periods.
+ *
+ * @created 2026-01-22
+ */
+
+interface Props {
+  /** Card title */
+  title?: string;
+  /** ID for JavaScript updates */
+  id?: string;
+}
+
+const { title = 'Estimated Cost', id = 'overage-cost' } = Astro.props;
+---
+
+<div
+  id={id}
+  class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm"
+>
+  <!-- Header -->
+  <div class="flex items-center justify-between mb-4">
+    <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">{title}</h3>
+    <span
+      id={`${id}-badge`}
+      class="px-2 py-0.5 text-xs font-medium rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
+    >
+      Within Budget
+    </span>
+  </div>
+
+  <!-- Total Cost Display -->
+  <div class="text-center mb-4">
+    <span id={`${id}-total`} class="text-3xl font-bold text-gray-900 dark:text-gray-100">
+      $--.--
+    </span>
+    <span id={`${id}-period-label`} class="text-sm text-gray-500 dark:text-gray-400 ml-1">
+      / month
+    </span>
+  </div>
+
+  <!-- Cost Breakdown -->
+  <div class="space-y-2 border-t border-gray-200 dark:border-gray-700 pt-3">
+    <!-- Base Cost -->
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <div class="w-2 h-2 rounded-full bg-blue-500"></div>
+        <span class="text-sm text-gray-600 dark:text-gray-300">Base Plan</span>
+      </div>
+      <span id={`${id}-base`} class="text-sm font-medium text-gray-900 dark:text-gray-100">
+        $5.00
+      </span>
+    </div>
+
+    <!-- Overage Cost -->
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <div id={`${id}-overage-dot`} class="w-2 h-2 rounded-full bg-green-500"></div>
+        <span class="text-sm text-gray-600 dark:text-gray-300">Overage</span>
+      </div>
+      <span id={`${id}-overage`} class="text-sm font-medium text-gray-900 dark:text-gray-100">
+        $0.00
+      </span>
+    </div>
+  </div>
+
+  <!-- Progress Bar (overage proportion) -->
+  <div class="mt-4">
+    <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
+      <span>Base</span>
+      <span id={`${id}-overage-pct`}>0% overage</span>
+    </div>
+    <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+      <div class="h-full flex">
+        <div
+          id={`${id}-base-bar`}
+          class="bg-blue-500 transition-all duration-500"
+          style="width: 100%"
+        >
+        </div>
+        <div
+          id={`${id}-overage-bar`}
+          class="bg-orange-500 transition-all duration-500"
+          style="width: 0%"
+        >
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Footnote -->
+  <p id={`${id}-note`} class="text-xs text-gray-400 dark:text-gray-500 mt-3 text-center">
+    Workers Paid Plan (prorated)
+  </p>
+</div>
+
+<script>
+  interface OverageCostData {
+    baseCost: number;
+    overageCost: number;
+    totalCost: number;
+    periodLabel?: string; // "month" | "MTD" | "24h" etc.
+    note?: string;
+    isProrated?: boolean;
+  }
+
+  function formatCurrency(amount: number): string {
+    return `$${amount.toFixed(2)}`;
+  }
+
+  function getBadgeClasses(overageCost: number, baseCost: number): string {
+    const overagePct = baseCost > 0 ? (overageCost / baseCost) * 100 : 0;
+    if (overagePct >= 100) {
+      return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
+    }
+    if (overagePct >= 50) {
+      return 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400';
+    }
+    if (overagePct >= 20) {
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
+    }
+    return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
+  }
+
+  function getBadgeText(overageCost: number, baseCost: number): string {
+    const overagePct = baseCost > 0 ? (overageCost / baseCost) * 100 : 0;
+    if (overagePct >= 100) return 'High Overage';
+    if (overagePct >= 50) return 'Moderate Overage';
+    if (overagePct >= 20) return 'Low Overage';
+    if (overageCost > 0) return 'Minimal Overage';
+    return 'Within Budget';
+  }
+
+  function getOverageDotColor(overageCost: number): string {
+    if (overageCost <= 0) return 'bg-green-500';
+    if (overageCost < 1) return 'bg-yellow-500';
+    if (overageCost < 5) return 'bg-orange-500';
+    return 'bg-red-500';
+  }
+
+  function updateOverageCostCard(cardId: string, data: OverageCostData) {
+    const totalEl = document.getElementById(`${cardId}-total`);
+    const periodLabelEl = document.getElementById(`${cardId}-period-label`);
+    const baseEl = document.getElementById(`${cardId}-base`);
+    const overageEl = document.getElementById(`${cardId}-overage`);
+    const badgeEl = document.getElementById(`${cardId}-badge`);
+    const overagePctEl = document.getElementById(`${cardId}-overage-pct`);
+    const baseBarEl = document.getElementById(`${cardId}-base-bar`);
+    const overageBarEl = document.getElementById(`${cardId}-overage-bar`);
+    const overageDotEl = document.getElementById(`${cardId}-overage-dot`);
+    const noteEl = document.getElementById(`${cardId}-note`);
+
+    // Update total
+    if (totalEl) {
+      totalEl.textContent = formatCurrency(data.totalCost);
+    }
+
+    // Update period label
+    if (periodLabelEl && data.periodLabel) {
+      periodLabelEl.textContent = `/ ${data.periodLabel}`;
+    }
+
+    // Update breakdown
+    if (baseEl) {
+      baseEl.textContent = formatCurrency(data.baseCost);
+    }
+    if (overageEl) {
+      overageEl.textContent = formatCurrency(data.overageCost);
+    }
+
+    // Update badge
+    if (badgeEl) {
+      badgeEl.className = `px-2 py-0.5 text-xs font-medium rounded-full ${getBadgeClasses(data.overageCost, data.baseCost)}`;
+      badgeEl.textContent = getBadgeText(data.overageCost, data.baseCost);
+    }
+
+    // Update overage percentage text
+    if (overagePctEl) {
+      const pct = data.totalCost > 0 ? (data.overageCost / data.totalCost) * 100 : 0;
+      overagePctEl.textContent = `${pct.toFixed(0)}% overage`;
+    }
+
+    // Update progress bars
+    if (baseBarEl && overageBarEl && data.totalCost > 0) {
+      const basePct = (data.baseCost / data.totalCost) * 100;
+      const overagePct = (data.overageCost / data.totalCost) * 100;
+      baseBarEl.style.width = `${basePct}%`;
+      overageBarEl.style.width = `${overagePct}%`;
+    }
+
+    // Update overage dot color
+    if (overageDotEl) {
+      overageDotEl.className = `w-2 h-2 rounded-full ${getOverageDotColor(data.overageCost)}`;
+    }
+
+    // Update note
+    if (noteEl && data.note) {
+      noteEl.textContent = data.note;
+    } else if (noteEl && data.isProrated) {
+      noteEl.textContent = 'Workers Paid Plan (prorated for period)';
+    }
+  }
+
+  // Expose globally for page scripts
+  (
+    window as unknown as { updateOverageCostCard: typeof updateOverageCostCard }
+  ).updateOverageCostCard = updateOverageCostCard;
+</script>

package/templates/shared/dashboard/src/components/usage/PlanUtilizationCard.astro

@@ -0,0 +1,193 @@
+---
+/**
+ * PlanUtilizationCard - Shows highest service utilisation %
+ *
+ * Part of task-usage-rebuild: Single Pane of Glass
+ * Displays the service with highest monthly limit utilisation
+ */
+---
+
+<div
+  class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm h-full flex flex-col justify-between"
+>
+  <!-- Header -->
+  <div class="flex items-center gap-2 mb-3">
+    <div
+      class="w-8 h-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center"
+    >
+      <svg
+        class="w-4 h-4 text-purple-600 dark:text-purple-400"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+        ></path>
+      </svg>
+    </div>
+    <div>
+      <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Plan Utilisation</h3>
+    </div>
+  </div>
+
+  <!-- Main metric -->
+  <div class="mb-3">
+    <div class="flex items-baseline gap-2">
+      <span id="utilization-pct" class="text-3xl font-bold text-gray-900 dark:text-gray-100"
+        >--%</span
+      >
+      <span id="utilization-service" class="text-sm text-gray-500 dark:text-gray-400"
+        >Loading...</span
+      >
+    </div>
+  </div>
+
+  <!-- Progress bar -->
+  <div class="mb-2">
+    <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+      <div
+        id="utilization-bar"
+        class="h-full bg-purple-500 rounded-full transition-all duration-500"
+        style="width: 0%"
+      >
+      </div>
+    </div>
+  </div>
+
+  <!-- Status label -->
+  <div class="flex items-center justify-between text-xs">
+    <span id="utilization-usage" class="text-gray-500 dark:text-gray-400">-- / -- used</span>
+    <span id="utilization-status" class="font-medium text-gray-600 dark:text-gray-300">--</span>
+  </div>
+
+  <!-- Billing Countdown (compact inline) -->
+  <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
+    <div class="flex items-center justify-between text-xs">
+      <div class="flex items-center gap-1.5 text-gray-500 dark:text-gray-400">
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+          ></path>
+        </svg>
+        <span id="billing-countdown-text">-- days until reset</span>
+      </div>
+      <span id="billing-period-label" class="text-gray-400 dark:text-gray-500">
+        Jan 1 - Jan 31
+      </span>
+    </div>
+  </div>
+</div>
+
+<script>
+  interface ServiceData {
+    name: string;
+    usagePct: number;
+    current: number;
+    limit: number;
+    unit: string;
+    status: 'normal' | 'warning' | 'high' | 'critical';
+  }
+
+  function formatNumber(num: number): string {
+    if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)}B`;
+    if (num >= 1_000_000) return `${(num / 1_000_000).toFixed(1)}M`;
+    if (num >= 1_000) return `${(num / 1_000).toFixed(1)}K`;
+    return num.toFixed(0);
+  }
+
+  function getStatusColor(pct: number): string {
+    if (pct >= 90) return 'bg-red-500';
+    if (pct >= 75) return 'bg-orange-500';
+    if (pct >= 50) return 'bg-yellow-500';
+    return 'bg-purple-500';
+  }
+
+  function getStatusLabel(pct: number): string {
+    if (pct >= 90) return 'Critical';
+    if (pct >= 75) return 'High';
+    if (pct >= 50) return 'Warning';
+    return 'Normal';
+  }
+
+  function updatePlanUtilization(services: ServiceData[]) {
+    if (!services || services.length === 0) return;
+
+    // Find highest utilisation service
+    const highest = services.reduce(
+      (max, service) => (service.usagePct > max.usagePct ? service : max),
+      services[0]
+    );
+
+    const pctEl = document.getElementById('utilization-pct');
+    const serviceEl = document.getElementById('utilization-service');
+    const barEl = document.getElementById('utilization-bar');
+    const usageEl = document.getElementById('utilization-usage');
+    const statusEl = document.getElementById('utilization-status');
+
+    // Cap extreme percentages at 999% for display
+    const displayPct = highest.usagePct > 999 ? '>999' : highest.usagePct.toFixed(0);
+    if (pctEl) pctEl.textContent = `${displayPct}%`;
+    if (serviceEl) {
+      // Show overage indicator when over 100%
+      serviceEl.textContent =
+        highest.usagePct > 100 ? `${highest.name} (over limit!)` : highest.name;
+    }
+    if (barEl) {
+      barEl.style.width = `${Math.min(highest.usagePct, 100)}%`;
+      barEl.className = `h-full rounded-full transition-all duration-500 ${getStatusColor(highest.usagePct)}`;
+    }
+    if (usageEl) {
+      usageEl.textContent = `${formatNumber(highest.current)} / ${formatNumber(highest.limit)} ${highest.unit}`;
+    }
+    if (statusEl) {
+      statusEl.textContent = getStatusLabel(highest.usagePct);
+      const statusColors: Record<string, string> = {
+        Critical: 'text-red-600 dark:text-red-400',
+        High: 'text-orange-600 dark:text-orange-400',
+        Warning: 'text-yellow-600 dark:text-yellow-400',
+        Normal: 'text-green-600 dark:text-green-400',
+      };
+      statusEl.className = `font-medium ${statusColors[getStatusLabel(highest.usagePct)]}`;
+    }
+  }
+
+  // Billing countdown update function
+  interface BillingData {
+    daysRemaining: number;
+    periodFormatted: string;
+  }
+
+  function updateBillingCountdown(data: BillingData) {
+    const textEl = document.getElementById('billing-countdown-text');
+    const periodEl = document.getElementById('billing-period-label');
+
+    if (textEl) {
+      if (data.daysRemaining <= 0) {
+        textEl.textContent = 'Billing reset today';
+      } else if (data.daysRemaining === 1) {
+        textEl.textContent = '1 day until reset';
+      } else {
+        textEl.textContent = `${data.daysRemaining} days until reset`;
+      }
+    }
+
+    if (periodEl && data.periodFormatted) {
+      periodEl.textContent = data.periodFormatted;
+    }
+  }
+
+  // Expose globally for index.astro to call
+  (
+    window as unknown as { updatePlanUtilization: typeof updatePlanUtilization }
+  ).updatePlanUtilization = updatePlanUtilization;
+  (
+    window as unknown as { updateBillingCountdown: typeof updateBillingCountdown }
+  ).updateBillingCountdown = updateBillingCountdown;
+</script>