diff --git a/apps/admin-web/src/views/BrandsView.vue b/apps/admin-web/src/views/BrandsView.vue index e551855..61df379 100644 --- a/apps/admin-web/src/views/BrandsView.vue +++ b/apps/admin-web/src/views/BrandsView.vue @@ -131,12 +131,19 @@ const orderedBrands = computed(() => { }) const canSortBrands = computed(() => brandList.value.length > 1) const hasBrandOrderChanges = computed( - () => !isSameBrandOrder(draftBrandIds.value, brandList.value.map((brand) => brand.id)), + () => + !isSameBrandOrder( + draftBrandIds.value, + brandList.value.map((brand) => brand.id), + ), ) const currentQuestions = computed(() => questionsQuery.data.value?.items ?? []) const questionTotal = computed(() => questionsQuery.data.value?.total ?? 0) +const maxBrands = computed(() => brandLibrarySummary.value?.max_brands ?? 0) +const usedBrands = computed(() => brandLibrarySummary.value?.used_brands ?? brandList.value.length) + const maxQuestions = computed( () => brandLibrarySummary.value?.max_questions ?? @@ -638,9 +645,15 @@ async function invalidateBrandQueries(): Promise {

{{ t('brands.eyebrow') }}

{{ t('brands.title') }}

-
- {{ t('brands.quota.questions') }} - {{ usedQuestions }} / {{ maxQuestions || '--' }} +
+
+ {{ t('brands.quota.brands') }} + {{ usedBrands }} / {{ maxBrands || '--' }} +
+
+ {{ t('brands.quota.questions') }} + {{ usedQuestions }} / {{ maxQuestions || '--' }} +
@@ -1020,11 +1033,21 @@ async function invalidateBrandQueries(): Promise { font-weight: 760; } +.brand-page-head__quotas { + display: grid; + grid-template-columns: repeat(2, minmax(150px, 1fr)); + align-items: stretch; +} + .brand-page-head__quota { - min-width: 132px; - padding-left: 18px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-width: 0; + padding: 0 24px; border-left: 1px solid #e2e8f0; - text-align: right; + text-align: center; } .brand-page-head__quota span { @@ -1335,6 +1358,15 @@ async function invalidateBrandQueries(): Promise { justify-content: flex-start; } + .brand-page-head__quotas { + width: 100%; + } + + .brand-page-head__quota { + min-width: 0; + padding: 0 12px; + } + .brand-detail__actions { justify-content: flex-start; }