fix: replaced header h4 with breadcrumbs component

billing/src/components/AppSidebar.vue

@@ -24,9 +24,6 @@
 				/>
 			</nav>
 		</div>
-		<div class="m-2 text-base text-gray-600 p-2 flex justify-center">
-			Powered by Frappe Cloud
-		</div>
 	</div>
 </template>
 <script setup>
@@ -97,7 +94,7 @@ async function openSupport() {
 			'frappe.integrations.frappe_providers.frappecloud_billing.api',
 			{
 				method: 'site.get_first_support_plan',
-			}
+			},
 		)
 		if (!supportPlan) return
 		let currency = team.data.currency == 'INR' ? '₹' : '$'

billing/src/pages/Cards.vue

@@ -1,8 +1,6 @@
 <template>
 	<header class="flex h-10.5 border-b items-center justify-between py-2 px-5 shrink-0">
-		<h2 class="text-lg font-semibold text-gray-900 leading-5">
-			{{ 'Cards' }}
-		</h2>
+		<Breadcrumbs :items="[{ label: 'Cards' }]" />
 	</header>
 	<div class="flex flex-col overflow-hidden mx-60 mt-6">
 		<div class="flex justify-end gap-2 mb-3">
@@ -94,6 +92,7 @@ import {
 	Tooltip,
 	FeatherIcon,
 	createResource,
+	Breadcrumbs,
 } from 'frappe-ui'
 import { useTimeAgo } from '@vueuse/core'
 import { createDialog } from '@/dialogs.js'
@@ -168,7 +167,7 @@ const rows = computed(() => {
 				? h(FeatherIcon, {
 						name: 'check-circle',
 						class: 'h-4 w-4 text-green-600',
-				  })
+					})
 				: null,
 			alert:
 				card.is_default && card.stripe_payment_method
@@ -181,8 +180,8 @@ const rows = computed(() => {
 								h(FeatherIcon, {
 									name: 'alert-circle',
 									class: 'h-4 w-4 text-red-600',
-								})
-					  )
+								}),
+						)
 					: null,
 			creation: useTimeAgo(card.creation).value,
 			actions: {

billing/src/pages/Invoices.vue

@@ -1,8 +1,6 @@
 <template>
 	<header class="flex h-10.5 border-b items-center justify-between py-2 px-5 shrink-0">
-		<h2 class="text-lg font-semibold text-gray-900 leading-5">
-			{{ 'Invoices' }}
-		</h2>
+		<Breadcrumbs :items="[{ label: 'Invoices' }]" />
 	</header>
 	<div class="flex flex-col overflow-hidden px-60 pt-6">
 		<ListView
@@ -67,6 +65,7 @@ import {
 	Button,
 	Badge,
 	createResource,
+	Breadcrumbs,
 } from 'frappe-ui'
 import { computed, inject } from 'vue'
 
@@ -150,8 +149,8 @@ const rows = computed(() => {
 					invoice.status === 'Paid'
 						? 'green'
 						: invoice.status == 'Unpaid'
-						? 'orange'
-						: 'gray',
+							? 'orange'
+							: 'gray',
 			},
 			due_date: due_date,
 			total: formatCurrency(invoice.total),

billing/src/pages/Overview.vue

@@ -1,8 +1,6 @@
 <template>
 	<header class="flex h-10.5 border-b items-center justify-between py-2 px-5 shrink-0">
-		<h2 class="text-lg font-semibold text-gray-900 leading-5">
-			{{ 'Billing Overview' }}
-		</h2>
+		<Breadcrumbs :items="[{ label: 'Billing Overview' }]" />
 	</header>
 	<div v-if="team.data" class="flex flex-1 flex-col px-60 pt-6 gap-8 overflow-y-auto">
 		<CurrentPlan @changePlan="router.push({ name: 'Plans' })" />
@@ -15,7 +13,7 @@
 <script setup>
 import CurrentPlan from '@/components/CurrentPlan.vue'
 import PaymentDetails from '@/components/PaymentDetails.vue'
-import { Spinner, createResource } from 'frappe-ui'
+import { Spinner, createResource, Breadcrumbs } from 'frappe-ui'
 import { useRouter } from 'vue-router'
 import { computed, provide, inject } from 'vue'
 

billing/src/pages/Plans.vue

@@ -1,8 +1,6 @@
 <template>
 	<header class="flex h-10.5 border-b items-center justify-between py-2 px-5 shrink-0">
-		<h2 class="text-lg font-semibold text-gray-900 leading-5">
-			{{ 'Plans' }}
-		</h2>
+		<Breadcrumbs :items="[{ label: 'Plans' }]" />
 	</header>
 	<div class="flex flex-col overflow-hidden px-60 pt-6">
 		<ListView
@@ -85,6 +83,7 @@ import {
 	FeatherIcon,
 	Tooltip,
 	createResource,
+	Breadcrumbs,
 } from 'frappe-ui'
 import { createDialog } from '@/dialogs'
 import { parseSize, ConfirmMessage } from '@/utils'
@@ -180,7 +179,7 @@ const rows = computed(() => {
 		})
 		.filter(
 			(row) =>
-				row.name !== 'Trial' || (row.name === 'Trial' && row.name === currentPlan.value)
+				row.name !== 'Trial' || (row.name === 'Trial' && row.name === currentPlan.value),
 		)
 })
 
@@ -207,7 +206,7 @@ function changePlan(_plan, price) {
 	createDialog({
 		title: 'Change plan',
 		component: markRaw(
-			h(ConfirmMessage, { price, currency: currency.value === 'INR' ? '₹' : '$' })
+			h(ConfirmMessage, { price, currency: currency.value === 'INR' ? '₹' : '$' }),
 		),
 		actions: [
 			{