@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,192 @@
+---
+/**
+ * BillingCycleCountdown - Shows days until billing reset
+ *
+ * Displays "X days until billing reset" with a progress bar
+ * showing how far through the billing period we are.
+ *
+ * @created 2026-01-22
+ */
+
+interface Props {
+  /** Card title */
+  title?: string;
+  /** ID for JavaScript updates */
+  id?: string;
+  /** Compact mode (inline display) */
+  compact?: boolean;
+}
+
+const { title = 'Billing Cycle', id = 'billing-countdown', compact = false } = Astro.props;
+---
+
+{
+  compact ? (
+    <div id={id} class="flex items-center gap-2 text-sm">
+      <span class="text-gray-500 dark:text-gray-400">
+        <svg
+          class="w-4 h-4 inline-block mr-1"
+          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"
+          />
+        </svg>
+      </span>
+      <span id={`${id}-text`} class="text-gray-700 dark:text-gray-300">
+        -- days until reset
+      </span>
+    </div>
+  ) : (
+    <div
+      id={id}
+      class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm"
+    >
+      <div class="flex items-center justify-between mb-3">
+        <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-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
+        >
+          Active
+        </span>
+      </div>
+
+      <div class="text-center mb-4">
+        <div class="flex items-center justify-center gap-1">
+          <span id={`${id}-days`} class="text-4xl font-bold text-gray-900 dark:text-gray-100">
+            --
+          </span>
+          <span class="text-lg text-gray-500 dark:text-gray-400">days</span>
+        </div>
+        <p id={`${id}-text`} class="text-sm text-gray-600 dark:text-gray-300 mt-1">
+          until billing reset
+        </p>
+      </div>
+
+      <div class="mb-3">
+        <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
+          <span id={`${id}-start`}>Jan 1</span>
+          <span id={`${id}-end`}>Jan 31</span>
+        </div>
+        <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+          <div
+            id={`${id}-progress`}
+            class="h-full bg-blue-500 transition-all duration-500"
+            style="width: 0%"
+          />
+        </div>
+      </div>
+
+      <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400">
+        <span>
+          <span id={`${id}-elapsed`}>0</span> days elapsed
+        </span>
+        <span>
+          <span id={`${id}-total`}>30</span> day period
+        </span>
+      </div>
+    </div>
+  )
+}
+
+<script>
+  interface BillingCycleData {
+    startDate: string; // ISO date
+    endDate: string; // ISO date
+    daysInPeriod: number;
+    daysElapsed: number;
+    daysRemaining: number;
+    progress: number; // 0-1
+    periodFormatted?: string; // "Jan 1 - Jan 31"
+  }
+
+  function formatShortDate(isoDate: string): string {
+    const date = new Date(isoDate);
+    return new Intl.DateTimeFormat('en-AU', { month: 'short', day: 'numeric' }).format(date);
+  }
+
+  function getBadgeClasses(daysRemaining: number): string {
+    if (daysRemaining <= 1) {
+      return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400';
+    }
+    if (daysRemaining <= 3) {
+      return 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400';
+    }
+    if (daysRemaining <= 7) {
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
+    }
+    return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400';
+  }
+
+  function getBadgeText(daysRemaining: number): string {
+    if (daysRemaining <= 0) return 'Reset Today';
+    if (daysRemaining <= 1) return 'Reset Tomorrow';
+    if (daysRemaining <= 3) return 'Ending Soon';
+    return 'Active';
+  }
+
+  function getCountdownText(daysRemaining: number): string {
+    if (daysRemaining <= 0) return 'Billing reset today';
+    if (daysRemaining === 1) return '1 day until billing reset';
+    return `${daysRemaining} days until billing reset`;
+  }
+
+  function updateBillingCycleCountdown(countdownId: string, data: BillingCycleData) {
+    const daysEl = document.getElementById(`${countdownId}-days`);
+    const textEl = document.getElementById(`${countdownId}-text`);
+    const badgeEl = document.getElementById(`${countdownId}-badge`);
+    const progressEl = document.getElementById(`${countdownId}-progress`);
+    const startEl = document.getElementById(`${countdownId}-start`);
+    const endEl = document.getElementById(`${countdownId}-end`);
+    const elapsedEl = document.getElementById(`${countdownId}-elapsed`);
+    const totalEl = document.getElementById(`${countdownId}-total`);
+
+    // Update days display (for full mode)
+    if (daysEl) {
+      daysEl.textContent = String(data.daysRemaining);
+    }
+
+    // Update countdown text
+    if (textEl) {
+      textEl.textContent = getCountdownText(data.daysRemaining);
+    }
+
+    // Update badge
+    if (badgeEl) {
+      badgeEl.className = `px-2 py-0.5 text-xs font-medium rounded-full ${getBadgeClasses(data.daysRemaining)}`;
+      badgeEl.textContent = getBadgeText(data.daysRemaining);
+    }
+
+    // Update progress bar
+    if (progressEl) {
+      progressEl.style.width = `${Math.min(100, data.progress * 100)}%`;
+    }
+
+    // Update date labels
+    if (startEl) {
+      startEl.textContent = formatShortDate(data.startDate);
+    }
+    if (endEl) {
+      endEl.textContent = formatShortDate(data.endDate);
+    }
+
+    // Update stats
+    if (elapsedEl) {
+      elapsedEl.textContent = String(data.daysElapsed);
+    }
+    if (totalEl) {
+      totalEl.textContent = String(data.daysInPeriod);
+    }
+  }
+
+  // Expose globally for page scripts
+  (
+    window as unknown as { updateBillingCycleCountdown: typeof updateBillingCycleCountdown }
+  ).updateBillingCycleCountdown = updateBillingCycleCountdown;
+</script>