Improve package usage visibility

resources/js/admin/mobile/__tests__/billingUsage.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import type { TenantPackageSummary } from '../../api';
-import { buildPackageUsageMetrics, usagePercent } from '../billingUsage';
+import { buildPackageUsageMetrics, getUsageState, usagePercent } from '../billingUsage';
 
 const basePackage: TenantPackageSummary = {
   id: 1,
@@ -17,6 +17,8 @@ const basePackage: TenantPackageSummary = {
     max_events_per_year: 5,
     max_guests: 150,
     max_photos: 1000,
+    gallery_days: 90,
+    remaining_gallery_days: 30,
   },
   branding_allowed: true,
   watermark_allowed: true,
@@ -27,12 +29,25 @@ describe('buildPackageUsageMetrics', () => {
   it('builds usage metrics for event, guest, and photo limits', () => {
     const metrics = buildPackageUsageMetrics(basePackage);
     const keys = metrics.map((metric) => metric.key);
-    expect(keys).toEqual(['events', 'guests', 'photos']);
+    expect(keys).toEqual(['events', 'guests', 'photos', 'gallery']);
 
     const eventMetric = metrics.find((metric) => metric.key === 'events');
     expect(eventMetric?.used).toBe(2);
     expect(eventMetric?.limit).toBe(5);
     expect(eventMetric?.remaining).toBe(3);
+
+    const galleryMetric = metrics.find((metric) => metric.key === 'gallery');
+    expect(galleryMetric?.remaining).toBe(30);
+  });
+
+  it('derives remaining when only usage is known', () => {
+    const metrics = buildPackageUsageMetrics({
+      ...basePackage,
+      remaining_events: null,
+      package_limits: { max_events_per_year: 10, gallery_days: 60 },
+      used_events: 4,
+    });
+    expect(metrics[0].remaining).toBe(6);
   });
 
   it('filters metrics without limits', () => {
@@ -62,3 +77,16 @@ describe('usagePercent', () => {
     expect(usagePercent(metrics[0])).toBe(100);
   });
 });
+
+describe('getUsageState', () => {
+  it('returns warning and danger based on thresholds', () => {
+    const metrics = buildPackageUsageMetrics({
+      ...basePackage,
+      used_events: 8,
+      remaining_events: null,
+      package_limits: { max_events_per_year: 10 },
+    });
+    expect(getUsageState(metrics[0])).toBe('warning');
+    expect(getUsageState({ ...metrics[0], used: 10, remaining: 0 })).toBe('danger');
+  });
+});