{t('superadmin.tenants.empty')}
) : ( @@ -130,11 +127,11 @@ export function SuperAdminTenantManager() { {tenants.map((tenant) => ({tenant.name}
{tenant.slug}
Modal.present(TenantDetailModal, { tenant })}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ Modal.present(TenantDetailModal, { tenant })
+ }
+ }}
+ role="button"
+ tabIndex={0}
+ >
+
{t('superadmin.tenants.usage.empty')}
- } - - return ( -
- {activeEntries.map((entry) => (
-
- )
-}
-
function PlanDescription({ plan }: { plan: BillingPlanDefinition | undefined }) {
if (!plan) {
return null
@@ -270,56 +225,6 @@ function PlanDescription({ plan }: { plan: BillingPlanDefinition | undefined })
return {plan.description}
} -type UsageBadgeProps = { - label: string - tone: (typeof BILLING_USAGE_EVENT_CONFIG)[BillingUsageEventType]['tone'] - value: number - unit: 'count' | 'byte' - formatter: Intl.NumberFormat -} - -function UsageBadge({ label, tone, value, unit, formatter }: UsageBadgeProps) { - const toneClass = - tone === 'accent' - ? 'bg-emerald-500/10 text-emerald-200 border-emerald-500/30' - : tone === 'warning' - ? 'bg-rose-500/10 text-rose-200 border-rose-500/30' - : 'bg-fill/30 text-text-secondary border-border/40' - - return ( - - {label} - {formatUsageValue(value, unit, formatter)} - - ) -} - -function formatUsageValue(value: number, unit: 'count' | 'byte', formatter: Intl.NumberFormat): string { - if (!Number.isFinite(value)) { - return '0' - } - if (unit === 'byte') { - return formatBytes(value) - } - return formatter.format(value) -} - -function formatBytes(bytes: number): string { - if (!Number.isFinite(bytes) || bytes <= 0) { - return '0 B' - } - const units = ['B', 'KB', 'MB', 'GB', 'TB'] - let value = bytes - let unitIndex = 0 - while (value >= 1024 && unitIndex < units.length - 1) { - value /= 1024 - unitIndex += 1 - } - return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unitIndex]}` -} - function StatusBadge({ status, banned }: { status: SuperAdminTenantSummary['status']; banned: boolean }) { const { t } = useTranslation() if (banned) { diff --git a/be/apps/dashboard/src/modules/super-admin/components/TenantDetailModal.tsx b/be/apps/dashboard/src/modules/super-admin/components/TenantDetailModal.tsx new file mode 100644 index 00000000..fc286037 --- /dev/null +++ b/be/apps/dashboard/src/modules/super-admin/components/TenantDetailModal.tsx @@ -0,0 +1,151 @@ +import type { ModalComponent } from '@afilmory/ui' +import { DialogDescription, DialogHeader, DialogTitle } from '@afilmory/ui' +import { useTranslation } from 'react-i18next' + +import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs' + +import { useSuperAdminTenantPhotosQuery } from '../hooks' +import type { SuperAdminTenantSummary } from '../types' +import { TenantUsageCell } from './TenantUsageCell' + +interface TenantDetailModalProps { + tenant: SuperAdminTenantSummary +} + +export const TenantDetailModal: ModalComponent
+
+ {tenant.name}
+ {tenant.slug}
+
+
+
+
+ {t('superadmin.tenants.modal.tab.overview')}
+ {t('superadmin.tenants.modal.tab.photos')}
+
+
+
+
+
+
+
+
+
+ )
+}
+
+TenantDetailModal.contentClassName = 'max-w-4xl h-[80vh]'
+
+function TenantPhotosTab({ tenantId }: { tenantId: string }) {
+ const { t } = useTranslation()
+ const { data, isLoading, isError } = useSuperAdminTenantPhotosQuery(tenantId)
+
+ if (isLoading) {
+ return
+
+
+ {t('superadmin.tenants.table.usage')}
+
+
+ + {t('superadmin.tenants.modal.overview.details')} +
+-
+
- {t('superadmin.tenants.table.status')} +
- {tenant.status} +
- {t('superadmin.tenants.table.plan')} +
- {tenant.planId} +
- {t('superadmin.tenants.modal.overview.photos')} +
- {photoCount} +
- {t('superadmin.tenants.table.created')} +
- {new Date(tenant.createdAt).toLocaleDateString()} +
- {t('superadmin.tenants.table.ban')} +
- {tenant.banned ? 'Yes' : 'No'} +
+
+
+
+
+
+
+
+
+
+ {t('superadmin.tenants.modal.photos.loading')}
+ } + + if (isError) { + return{t('superadmin.tenants.modal.photos.error')}
+ } + + const photos = data?.photos ?? [] + + if (photos.length === 0) { + return{t('superadmin.tenants.modal.photos.empty')}
+ } + + return ( +
+
+
+
+
+ )
+}
+
+function formatBytes(bytes: number): string {
+ if (!Number.isFinite(bytes) || bytes <= 0) {
+ return '0 B'
+ }
+ const units = ['B', 'KB', 'MB', 'GB', 'TB']
+ let value = bytes
+ let unitIndex = 0
+ while (value >= 1024 && unitIndex < units.length - 1) {
+ value /= 1024
+ unitIndex += 1
+ }
+ return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unitIndex]}`
+}
diff --git a/be/apps/dashboard/src/modules/super-admin/components/TenantUsageCell.tsx b/be/apps/dashboard/src/modules/super-admin/components/TenantUsageCell.tsx
new file mode 100644
index 00000000..2e6fdf82
--- /dev/null
+++ b/be/apps/dashboard/src/modules/super-admin/components/TenantUsageCell.tsx
@@ -0,0 +1,113 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { BILLING_USAGE_EVENT_CONFIG } from '~/modules/photos/constants'
+import type { BillingUsageEventType } from '~/modules/photos/types'
+
+import type { SuperAdminTenantSummary } from '../types'
+
+export function TenantUsageCell({ usageTotals }: { usageTotals: SuperAdminTenantSummary['usageTotals'] }) {
+ const { t, i18n } = useTranslation()
+ const locale = i18n.language ?? i18n.resolvedLanguage ?? 'en'
+ const numberFormatter = useMemo(
+ () =>
+ new Intl.NumberFormat(locale, {
+ notation: 'compact',
+ maximumFractionDigits: 1,
+ }),
+ [locale],
+ )
+
+ const entries = useMemo(() => {
+ const totalsMap = new Map| + {t('superadmin.tenants.modal.photos.table.preview')} + | ++ {t('superadmin.tenants.modal.photos.table.name')} + | ++ {t('superadmin.tenants.modal.photos.table.size')} + | ++ {t('superadmin.tenants.modal.photos.table.created')} + | +
|---|---|---|---|
|
+
+ {/* We might not have a public URL if it's not synced or private, but let's try */}
+ {photo.publicUrl && (
+
+ |
+ + {photo.storageKey.split('/').pop()} + | +{formatBytes(photo.size ?? 0)} | +{new Date(photo.createdAt).toLocaleDateString()} | +
{t('superadmin.tenants.usage.empty')}
+ } + + return ( +
+ {activeEntries.map((entry) => (
+
+ )
+}
+
+type UsageBadgeProps = {
+ label: string
+ tone: (typeof BILLING_USAGE_EVENT_CONFIG)[BillingUsageEventType]['tone']
+ value: number
+ unit: 'count' | 'byte'
+ formatter: Intl.NumberFormat
+}
+
+function UsageBadge({ label, tone, value, unit, formatter }: UsageBadgeProps) {
+ const toneClass =
+ tone === 'accent'
+ ? 'bg-emerald-500/10 text-emerald-200 border-emerald-500/30'
+ : tone === 'warning'
+ ? 'bg-rose-500/10 text-rose-200 border-rose-500/30'
+ : 'bg-fill/30 text-text-secondary border-border/40'
+
+ return (
+
+ {label}
+ {formatUsageValue(value, unit, formatter)}
+
+ )
+}
+
+function formatUsageValue(value: number, unit: 'count' | 'byte', formatter: Intl.NumberFormat): string {
+ if (!Number.isFinite(value)) {
+ return '0'
+ }
+ if (unit === 'byte') {
+ return formatBytes(value)
+ }
+ return formatter.format(value)
+}
+
+export function formatBytes(bytes: number): string {
+ if (!Number.isFinite(bytes) || bytes <= 0) {
+ return '0 B'
+ }
+ const units = ['B', 'KB', 'MB', 'GB', 'TB']
+ let value = bytes
+ let unitIndex = 0
+ while (value >= 1024 && unitIndex < units.length - 1) {
+ value /= 1024
+ unitIndex += 1
+ }
+ return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unitIndex]}`
+}
diff --git a/be/apps/dashboard/src/modules/super-admin/hooks.ts b/be/apps/dashboard/src/modules/super-admin/hooks.ts
index 1c0785b6..d1fd7ac2 100644
--- a/be/apps/dashboard/src/modules/super-admin/hooks.ts
+++ b/be/apps/dashboard/src/modules/super-admin/hooks.ts
@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import {
fetchSuperAdminSettings,
+ fetchSuperAdminTenantPhotos,
fetchSuperAdminTenants,
updateSuperAdminSettings,
updateSuperAdminTenantBan,
@@ -10,6 +11,7 @@ import {
import type {
SuperAdminSettingsResponse,
SuperAdminTenantListResponse,
+ SuperAdminTenantPhotosResponse,
UpdateSuperAdminSettingsPayload,
UpdateTenantBanPayload,
UpdateTenantPlanPayload,
@@ -74,3 +76,11 @@ export function useUpdateTenantBanMutation() {
},
})
}
+
+export function useSuperAdminTenantPhotosQuery(tenantId: string | undefined) {
+ return useQuery