mirror of
https://github.com/vernu/textbee.git
synced 2026-07-31 09:28:14 -04:00
497a14074a
Introduce a typed data layer under lib/api (query-key factory, response
types, feature hooks) plus shared lib/format and lib/status helpers, and
migrate the canonical dashboard consumers (subscription-info, overview,
device-list, api-keys) onto it, deleting their duplicated inline queries,
mutations and formatters.
List hooks keep the raw { data: [] } envelope in the cache and unwrap
per-observer with react-query `select`, so shared keys like ['devices']
stay compatible with the not-yet-migrated components that still read the
raw shape (avoids a cache-shape collision surfaced by the dashboard e2e).
Adds unit tests for the formatters and the hooks (against MSW). Build,
19 unit tests, and 2 e2e all green.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import type { SubscriptionStatus } from '@/lib/api/types'
|
|
|
|
// Subscription status colors, previously repeated across subscription-info's
|
|
// badge, icon and text. Returns semantic tone classes for text + background.
|
|
export type StatusTone = {
|
|
text: string
|
|
bg: string
|
|
}
|
|
|
|
export function subscriptionStatusTone(
|
|
status: SubscriptionStatus | null | undefined
|
|
): StatusTone {
|
|
switch (status) {
|
|
case 'active':
|
|
return {
|
|
text: 'text-green-600 dark:text-green-400',
|
|
bg: 'bg-green-50 dark:bg-green-900/30',
|
|
}
|
|
case 'past_due':
|
|
return {
|
|
text: 'text-amber-600 dark:text-amber-400',
|
|
bg: 'bg-amber-50 dark:bg-amber-900/30',
|
|
}
|
|
default:
|
|
return {
|
|
text: 'text-muted-foreground',
|
|
bg: 'bg-muted',
|
|
}
|
|
}
|
|
}
|
|
|
|
// Usage meter color by percentage: green under 80, amber 80-99, red at 100+.
|
|
export function usageMeterColor(percentage: number): string {
|
|
if (percentage >= 100) return 'bg-red-500'
|
|
if (percentage >= 80) return 'bg-amber-500'
|
|
return 'bg-green-500'
|
|
}
|