From cab785172eb720cc026f473f2ba4ec508b87246d Mon Sep 17 00:00:00 2001
From: Darko Gjorgjijoski <dg@darkog.com>
Date: Sat, 4 Apr 2026 10:45:00 +0200
Subject: [PATCH] Add missing base components and global alias registrations

Create BaseCustomTag (dynamic tag render), BaseFormatMoney,
BaseHeading, BaseScrollPane, BaseDescriptionList/Item, BaseLabel,
BaseCustomerSelectInput, BaseSpinner, BaseRating, and status label
components. Register all renamed v2 components under their old
Base* names (BaseInputGroup->FormGroup, BasePage->Page,
BaseTable->DataTable, etc.) so templates resolve correctly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/base/BaseCustomTag.vue         |  16 ++
 .../base/BaseCustomerSelectInput.vue          | 104 +++++++++
 .../components/base/BaseDescriptionList.vue   |   5 +
 .../base/BaseDescriptionListItem.vue          |  33 +++
 .../base/BaseEstimateStatusLabel.vue          |  44 ++++
 .../components/base/BaseFormatMoney.vue       |  27 +++
 .../components/base/BaseHeading.vue           |  22 ++
 .../base/BaseInvoiceStatusLabel.vue           |  51 +++++
 .../scripts-v2/components/base/BaseLabel.vue  |   5 +
 .../scripts-v2/components/base/BaseRating.vue | 204 ++++++++++++++++++
 .../base/BaseRecurringInvoiceStatusLabel.vue  |  35 +++
 .../components/base/BaseScrollPane.vue        |  11 +
 .../components/base/BaseSpinner.vue           |  22 ++
 resources/scripts-v2/components/base/index.ts |  12 ++
 resources/scripts-v2/global-components.ts     |  60 ++++++
 15 files changed, 651 insertions(+)
 create mode 100644 resources/scripts-v2/components/base/BaseCustomTag.vue
 create mode 100644 resources/scripts-v2/components/base/BaseCustomerSelectInput.vue
 create mode 100644 resources/scripts-v2/components/base/BaseDescriptionList.vue
 create mode 100644 resources/scripts-v2/components/base/BaseDescriptionListItem.vue
 create mode 100644 resources/scripts-v2/components/base/BaseEstimateStatusLabel.vue
 create mode 100644 resources/scripts-v2/components/base/BaseFormatMoney.vue
 create mode 100644 resources/scripts-v2/components/base/BaseHeading.vue
 create mode 100644 resources/scripts-v2/components/base/BaseInvoiceStatusLabel.vue
 create mode 100644 resources/scripts-v2/components/base/BaseLabel.vue
 create mode 100644 resources/scripts-v2/components/base/BaseRating.vue
 create mode 100644 resources/scripts-v2/components/base/BaseRecurringInvoiceStatusLabel.vue
 create mode 100644 resources/scripts-v2/components/base/BaseScrollPane.vue
 create mode 100644 resources/scripts-v2/components/base/BaseSpinner.vue

diff --git a/resources/scripts-v2/components/base/BaseCustomTag.vue b/resources/scripts-v2/components/base/BaseCustomTag.vue
new file mode 100644
index 00000000..e160a919
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseCustomTag.vue
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { h, defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseCustomTag',
+  props: {
+    tag: {
+      type: String,
+      default: 'button',
+    },
+  },
+  setup(props, { slots, attrs }) {
+    return () => h(props.tag, attrs, slots)
+  },
+})
+</script>
diff --git a/resources/scripts-v2/components/base/BaseCustomerSelectInput.vue b/resources/scripts-v2/components/base/BaseCustomerSelectInput.vue
new file mode 100644
index 00000000..3fe2dc85
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseCustomerSelectInput.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useCustomerStore } from '../../features/company/customers/store'
+import { useModalStore } from '../../stores/modal.store'
+import { useUserStore } from '../../stores/user.store'
+import { ABILITIES } from '../../config/abilities'
+import CustomerModal from '../../features/company/customers/components/CustomerModal.vue'
+
+interface Props {
+  modelValue?: string | number | Record<string, unknown> | null
+  fetchAll?: boolean
+  showAction?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  fetchAll: false,
+  showAction: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | Record<string, unknown> | null): void
+}>()
+
+const { t } = useI18n()
+const modalStore = useModalStore()
+const customerStore = useCustomerStore()
+const userStore = useUserStore()
+
+const selectedCustomer = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value as string | number | Record<string, unknown> | null)
+  },
+})
+
+async function searchCustomers(search: string) {
+  const data: Record<string, unknown> = { search }
+
+  if (props.fetchAll) {
+    data.limit = 'all'
+  }
+
+  const response = await customerStore.fetchCustomers(data)
+  const results = response.data ?? []
+
+  if (results.length > 0 && customerStore.editCustomer) {
+    const customerFound = results.find(
+      (c: Record<string, unknown>) => c.id === customerStore.editCustomer?.id
+    )
+    if (!customerFound) {
+      const editCopy = { ...customerStore.editCustomer }
+      results.unshift(editCopy as typeof results[0])
+    }
+  }
+
+  return results
+}
+
+function addCustomer(): void {
+  customerStore.resetCurrentCustomer()
+
+  modalStore.openModal({
+    title: t('customers.add_new_customer'),
+    componentName: 'CustomerModal',
+  })
+}
+</script>
+
+<template>
+  <BaseMultiselect
+    v-model="selectedCustomer"
+    v-bind="$attrs"
+    track-by="name"
+    value-prop="id"
+    label="name"
+    :filter-results="false"
+    resolve-on-load
+    :delay="500"
+    :searchable="true"
+    :options="searchCustomers"
+    label-value="name"
+    :placeholder="$t('customers.type_or_click')"
+    :can-deselect="false"
+    class="w-full"
+  >
+    <template v-if="showAction" #action>
+      <BaseSelectAction
+        v-if="userStore.hasAbilities(ABILITIES.CREATE_CUSTOMER)"
+        @click="addCustomer"
+      >
+        <BaseIcon
+          name="UserPlusIcon"
+          class="h-4 mr-2 -ml-2 text-center text-primary-400"
+        />
+
+        {{ $t('customers.add_new_customer') }}
+      </BaseSelectAction>
+    </template>
+  </BaseMultiselect>
+
+  <CustomerModal />
+</template>
diff --git a/resources/scripts-v2/components/base/BaseDescriptionList.vue b/resources/scripts-v2/components/base/BaseDescriptionList.vue
new file mode 100644
index 00000000..bae2f631
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseDescriptionList.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="grid gap-4 mt-5 md:grid-cols-2 lg:grid-cols-3">
+    <slot />
+  </div>
+</template>
diff --git a/resources/scripts-v2/components/base/BaseDescriptionListItem.vue b/resources/scripts-v2/components/base/BaseDescriptionListItem.vue
new file mode 100644
index 00000000..2a2de0fe
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseDescriptionListItem.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+interface Props {
+  label: string
+  value?: string | number
+  contentLoading?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  value: '',
+  contentLoading: false,
+})
+</script>
+
+<template>
+  <div>
+    <BaseContentPlaceholders v-if="contentLoading">
+      <BaseContentPlaceholdersBox class="w-20 h-5 mb-1" />
+      <BaseContentPlaceholdersBox class="w-40 h-5" />
+    </BaseContentPlaceholders>
+
+    <div v-else>
+      <BaseLabel class="font-normal mb-1">
+        {{ label }}
+      </BaseLabel>
+
+      <p class="text-sm font-bold leading-5 text-heading non-italic">
+        {{ value }}
+
+        <slot />
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/resources/scripts-v2/components/base/BaseEstimateStatusLabel.vue b/resources/scripts-v2/components/base/BaseEstimateStatusLabel.vue
new file mode 100644
index 00000000..90b97a77
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseEstimateStatusLabel.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { EstimateStatus } from '@v2/types/domain'
+
+interface Props {
+  status?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: '',
+})
+
+const { t } = useI18n()
+
+const labelStatus = computed<string>(() => {
+  switch (props.status) {
+    case EstimateStatus.DRAFT:
+    case 'DRAFT':
+      return t('estimates.draft')
+    case EstimateStatus.SENT:
+    case 'SENT':
+      return t('estimates.sent')
+    case EstimateStatus.VIEWED:
+    case 'VIEWED':
+      return t('estimates.viewed')
+    case EstimateStatus.EXPIRED:
+    case 'EXPIRED':
+      return t('estimates.expired')
+    case EstimateStatus.ACCEPTED:
+    case 'ACCEPTED':
+      return t('estimates.accepted')
+    case EstimateStatus.REJECTED:
+    case 'REJECTED':
+      return t('estimates.rejected')
+    default:
+      return props.status
+  }
+})
+</script>
+
+<template>
+  {{ labelStatus }}
+</template>
diff --git a/resources/scripts-v2/components/base/BaseFormatMoney.vue b/resources/scripts-v2/components/base/BaseFormatMoney.vue
new file mode 100644
index 00000000..000bba35
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseFormatMoney.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useCompanyStore } from '@v2/stores/company.store'
+import { formatMoney } from '../../utils/format-money'
+import type { CurrencyConfig } from '../../utils/format-money'
+
+interface Props {
+  amount: number | string
+  currency?: CurrencyConfig | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currency: null,
+})
+
+const companyStore = useCompanyStore()
+
+const formattedAmount = computed<string>(() => {
+  const amountNum = typeof props.amount === 'string' ? Number(props.amount) : props.amount
+  const currencyConfig = props.currency ?? companyStore.selectedCompanyCurrency
+  return formatMoney(amountNum, currencyConfig ?? undefined)
+})
+</script>
+
+<template>
+  <span style="font-family: sans-serif">{{ formattedAmount }}</span>
+</template>
diff --git a/resources/scripts-v2/components/base/BaseHeading.vue b/resources/scripts-v2/components/base/BaseHeading.vue
new file mode 100644
index 00000000..feb47254
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseHeading.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  type?: 'section-title' | 'heading-title'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'section-title',
+})
+
+const typeClass = computed<Record<string, boolean>>(() => ({
+  'text-heading text-lg font-medium': props.type === 'heading-title',
+  'text-muted uppercase text-base': props.type === 'section-title',
+}))
+</script>
+
+<template>
+  <h6 :class="typeClass">
+    <slot />
+  </h6>
+</template>
diff --git a/resources/scripts-v2/components/base/BaseInvoiceStatusLabel.vue b/resources/scripts-v2/components/base/BaseInvoiceStatusLabel.vue
new file mode 100644
index 00000000..ec839a72
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseInvoiceStatusLabel.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { InvoiceStatus, InvoicePaidStatus } from '@v2/types/domain'
+
+interface Props {
+  status?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: '',
+})
+
+const { t } = useI18n()
+
+const labelStatus = computed<string>(() => {
+  switch (props.status) {
+    case InvoiceStatus.DRAFT:
+    case 'DRAFT':
+      return t('general.draft')
+    case InvoiceStatus.SENT:
+    case 'SENT':
+      return t('general.sent')
+    case InvoiceStatus.VIEWED:
+    case 'VIEWED':
+      return t('invoices.viewed')
+    case InvoiceStatus.COMPLETED:
+    case 'COMPLETED':
+      return t('invoices.completed')
+    case 'DUE':
+      return t('general.due')
+    case 'OVERDUE':
+      return t('invoices.overdue')
+    case InvoicePaidStatus.UNPAID:
+    case 'UNPAID':
+      return t('invoices.unpaid')
+    case InvoicePaidStatus.PARTIALLY_PAID:
+    case 'PARTIALLY_PAID':
+      return t('invoices.partially_paid')
+    case InvoicePaidStatus.PAID:
+    case 'PAID':
+      return t('invoices.paid')
+    default:
+      return props.status
+  }
+})
+</script>
+
+<template>
+  {{ labelStatus }}
+</template>
diff --git a/resources/scripts-v2/components/base/BaseLabel.vue b/resources/scripts-v2/components/base/BaseLabel.vue
new file mode 100644
index 00000000..2b5671d1
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseLabel.vue
@@ -0,0 +1,5 @@
+<template>
+  <label class="text-sm not-italic font-medium leading-5 text-primary-800">
+    <slot />
+  </label>
+</template>
diff --git a/resources/scripts-v2/components/base/BaseRating.vue b/resources/scripts-v2/components/base/BaseRating.vue
new file mode 100644
index 00000000..75c07537
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseRating.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { ref, computed, onBeforeMount } from 'vue'
+
+interface RatingConfig {
+  style?: Partial<RatingStyle>
+  isIndicatorActive?: boolean
+}
+
+interface RatingStyle {
+  fullStarColor: string
+  emptyStarColor: string
+  starWidth: number
+  starHeight: number
+}
+
+interface StarData {
+  raw: number
+  percent: string
+}
+
+interface Props {
+  config?: RatingConfig | null
+  rating?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  config: null,
+  rating: 0,
+})
+
+const EMPTY_STAR = 0
+const FULL_STAR = 1
+const TOTAL_STARS = 5
+
+const stars = ref<StarData[]>([])
+const isIndicatorActive = ref<boolean>(false)
+const style = ref<RatingStyle>({
+  fullStarColor: '#F1C644',
+  emptyStarColor: '#D4D4D4',
+  starWidth: 20,
+  starHeight: 20,
+})
+
+const getStarPoints = computed<string>(() => {
+  const centerX = style.value.starWidth / 2
+  const centerY = style.value.starHeight / 2
+  const innerCircleArms = 5
+  const innerRadius = style.value.starWidth / innerCircleArms
+  const innerOuterRadiusRatio = 2.5
+  const outerRadius = innerRadius * innerOuterRadiusRatio
+
+  return calcStarPoints(centerX, centerY, innerCircleArms, innerRadius, outerRadius)
+})
+
+function calcStarPoints(
+  centerX: number,
+  centerY: number,
+  innerCircleArms: number,
+  innerRadius: number,
+  outerRadius: number
+): string {
+  const angle = Math.PI / innerCircleArms
+  const angleOffsetToCenterStar = 60
+  const totalArms = innerCircleArms * 2
+  let points = ''
+
+  for (let i = 0; i < totalArms; i++) {
+    const isEvenIndex = i % 2 === 0
+    const r = isEvenIndex ? outerRadius : innerRadius
+    const currX = centerX + Math.cos(i * angle + angleOffsetToCenterStar) * r
+    const currY = centerY + Math.sin(i * angle + angleOffsetToCenterStar) * r
+    points += currX + ',' + currY + ' '
+  }
+
+  return points
+}
+
+function calcStarFullness(starData: StarData): string {
+  return starData.raw * 100 + '%'
+}
+
+function getFullFillColor(starData: StarData): string {
+  return starData.raw !== EMPTY_STAR
+    ? style.value.fullStarColor
+    : style.value.emptyStarColor
+}
+
+function initStars(): void {
+  for (let i = 0; i < TOTAL_STARS; i++) {
+    stars.value.push({
+      raw: EMPTY_STAR,
+      percent: EMPTY_STAR + '%',
+    })
+  }
+}
+
+function setStars(): void {
+  let fullStarsCounter = Math.floor(props.rating)
+
+  for (let i = 0; i < stars.value.length; i++) {
+    if (fullStarsCounter !== 0) {
+      stars.value[i].raw = FULL_STAR
+      stars.value[i].percent = calcStarFullness(stars.value[i])
+      fullStarsCounter--
+    } else {
+      const surplus = Math.round((props.rating % 1) * 10) / 10
+      const roundedOneDecimalPoint = Math.round(surplus * 10) / 10
+      stars.value[i].raw = roundedOneDecimalPoint
+      stars.value[i].percent = calcStarFullness(stars.value[i])
+      return
+    }
+  }
+}
+
+function setConfigData(): void {
+  if (props.config) {
+    if (props.config.style?.fullStarColor) {
+      style.value.fullStarColor = props.config.style.fullStarColor
+    }
+    if (props.config.style?.emptyStarColor) {
+      style.value.emptyStarColor = props.config.style.emptyStarColor
+    }
+    if (props.config.style?.starWidth) {
+      style.value.starWidth = props.config.style.starWidth
+    }
+    if (props.config.style?.starHeight) {
+      style.value.starHeight = props.config.style.starHeight
+    }
+    if (props.config.isIndicatorActive) {
+      isIndicatorActive.value = props.config.isIndicatorActive
+    }
+  }
+}
+
+onBeforeMount(() => {
+  initStars()
+  setStars()
+  setConfigData()
+})
+</script>
+
+<template>
+  <div class="star-rating">
+    <div
+      v-for="(star, index) in stars"
+      :key="index"
+      :title="String(rating)"
+      class="star-container"
+    >
+      <svg
+        :style="[
+          { fill: `url(#gradient${star.raw})` },
+          { width: style.starWidth },
+          { height: style.starHeight },
+        ]"
+        class="star-svg"
+      >
+        <polygon :points="getStarPoints" style="fill-rule: nonzero" />
+        <defs>
+          <linearGradient :id="`gradient${star.raw}`">
+            <stop
+              id="stop1"
+              :offset="star.percent"
+              :stop-color="getFullFillColor(star)"
+              stop-opacity="1"
+            />
+            <stop
+              id="stop2"
+              :offset="star.percent"
+              :stop-color="getFullFillColor(star)"
+              stop-opacity="0"
+            />
+            <stop
+              id="stop3"
+              :offset="star.percent"
+              :stop-color="style.emptyStarColor"
+              stop-opacity="1"
+            />
+            <stop
+              id="stop4"
+              :stop-color="style.emptyStarColor"
+              offset="100%"
+              stop-opacity="1"
+            />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+    <div v-if="isIndicatorActive" class="indicator">{{ rating }}</div>
+  </div>
+</template>
+
+<style scoped>
+.star-rating {
+  display: flex;
+  align-items: center;
+  .star-container {
+    display: flex;
+  }
+  .star-container:not(:last-child) {
+    margin-right: 5px;
+  }
+}
+</style>
diff --git a/resources/scripts-v2/components/base/BaseRecurringInvoiceStatusLabel.vue b/resources/scripts-v2/components/base/BaseRecurringInvoiceStatusLabel.vue
new file mode 100644
index 00000000..ba4942a8
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseRecurringInvoiceStatusLabel.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { RecurringInvoiceStatus } from '@v2/types/domain'
+
+interface Props {
+  status?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: '',
+})
+
+const { t } = useI18n()
+
+const labelStatus = computed<string>(() => {
+  switch (props.status) {
+    case RecurringInvoiceStatus.COMPLETED:
+    case 'COMPLETED':
+      return t('recurring_invoices.complete')
+    case RecurringInvoiceStatus.ON_HOLD:
+    case 'ON_HOLD':
+      return t('recurring_invoices.on_hold')
+    case RecurringInvoiceStatus.ACTIVE:
+    case 'ACTIVE':
+      return t('recurring_invoices.active')
+    default:
+      return props.status
+  }
+})
+</script>
+
+<template>
+  {{ labelStatus }}
+</template>
diff --git a/resources/scripts-v2/components/base/BaseScrollPane.vue b/resources/scripts-v2/components/base/BaseScrollPane.vue
new file mode 100644
index 00000000..45e14994
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseScrollPane.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="flex flex-col">
+    <div class="-my-2 overflow-x-auto lg:overflow-visible sm:-mx-6 lg:-mx-8">
+      <div class="py-2 align-middle inline-block min-w-full sm:px-4 lg:px-6">
+        <div class="overflow-hidden lg:overflow-visible sm:px-2 lg:p-2">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/resources/scripts-v2/components/base/BaseSpinner.vue b/resources/scripts-v2/components/base/BaseSpinner.vue
new file mode 100644
index 00000000..5ce2098f
--- /dev/null
+++ b/resources/scripts-v2/components/base/BaseSpinner.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    class="animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    />
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+</template>
diff --git a/resources/scripts-v2/components/base/index.ts b/resources/scripts-v2/components/base/index.ts
index f7c050ed..6f1234ca 100644
--- a/resources/scripts-v2/components/base/index.ts
+++ b/resources/scripts-v2/components/base/index.ts
@@ -3,29 +3,41 @@ export { default as BaseButton } from './BaseButton.vue'
 export { default as BaseCard } from './BaseCard.vue'
 export { default as BaseCheckbox } from './BaseCheckbox.vue'
 export { default as BaseCustomerAddressDisplay } from './BaseCustomerAddressDisplay.vue'
+export { default as BaseCustomerSelectInput } from './BaseCustomerSelectInput.vue'
 export { default as BaseCustomerSelectPopup } from './BaseCustomerSelectPopup.vue'
 export { default as BaseCustomInput } from './BaseCustomInput.vue'
 export { default as BaseDatePicker } from './BaseDatePicker.vue'
+export { default as BaseDescriptionList } from './BaseDescriptionList.vue'
+export { default as BaseDescriptionListItem } from './BaseDescriptionListItem.vue'
 export { default as BaseDialog } from './BaseDialog.vue'
 export { default as BaseDivider } from './BaseDivider.vue'
 export { default as BaseDropdown } from './BaseDropdown.vue'
 export { default as BaseDropdownItem } from './BaseDropdownItem.vue'
 export { default as BaseErrorAlert } from './BaseErrorAlert.vue'
+export { default as BaseEstimateStatusLabel } from './BaseEstimateStatusLabel.vue'
 export { default as BaseFileUploader } from './BaseFileUploader.vue'
+export { default as BaseFormatMoney } from './BaseFormatMoney.vue'
 export { default as BaseGlobalLoader } from './BaseGlobalLoader.vue'
+export { default as BaseHeading } from './BaseHeading.vue'
 export { default as BaseIcon } from './BaseIcon.vue'
 export { default as BaseInfoAlert } from './BaseInfoAlert.vue'
 export { default as BaseInput } from './BaseInput.vue'
+export { default as BaseInvoiceStatusLabel } from './BaseInvoiceStatusLabel.vue'
 export { default as BaseItemSelect } from './BaseItemSelect.vue'
+export { default as BaseLabel } from './BaseLabel.vue'
 export { default as BaseList } from './BaseList.vue'
 export { default as BaseListItem } from './BaseListItem.vue'
 export { default as BaseMoney } from './BaseMoney.vue'
 export { default as BaseModal } from './BaseModal.vue'
 export { default as BaseMultiselect } from './BaseMultiselect.vue'
 export { default as BaseRadio } from './BaseRadio.vue'
+export { default as BaseRating } from './BaseRating.vue'
+export { default as BaseRecurringInvoiceStatusLabel } from './BaseRecurringInvoiceStatusLabel.vue'
+export { default as BaseScrollPane } from './BaseScrollPane.vue'
 export { default as BaseSelectAction } from './BaseSelectAction.vue'
 export { default as BaseSelectInput } from './BaseSelectInput.vue'
 export { default as BaseSettingCard } from './BaseSettingCard.vue'
+export { default as BaseSpinner } from './BaseSpinner.vue'
 export { default as BaseSwitch } from './BaseSwitch.vue'
 export { default as BaseTabGroup } from './BaseTabGroup.vue'
 export { default as BaseText } from './BaseText.vue'
diff --git a/resources/scripts-v2/global-components.ts b/resources/scripts-v2/global-components.ts
index 4d5f1800..23ee2d92 100644
--- a/resources/scripts-v2/global-components.ts
+++ b/resources/scripts-v2/global-components.ts
@@ -50,4 +50,64 @@ export function defineGlobalComponents(app: App): void {
     'BaseEditor',
     defineAsyncComponent(() => import('./components/editor/RichEditor.vue'))
   )
+
+  // ---------------------------------------------------------------------------
+  // Alias registrations: map old Base* names to new v2 components so that
+  // templates using the legacy names continue to resolve correctly.
+  // ---------------------------------------------------------------------------
+
+  // Form
+  const FormGroup = () => import('./components/form/FormGroup.vue')
+  const FormGrid = () => import('./components/form/FormGrid.vue')
+  const SwitchSection = () => import('./components/form/SwitchSection.vue')
+
+  app.component('BaseInputGroup', defineAsyncComponent(FormGroup))
+  app.component('BaseInputGrid', defineAsyncComponent(FormGrid))
+  app.component('BaseSwitchSection', defineAsyncComponent(SwitchSection))
+
+  // Layout
+  const Page = () => import('./components/layout/Page.vue')
+  const PageHeader = () => import('./components/layout/PageHeader.vue')
+  const Breadcrumb = () => import('./components/layout/Breadcrumb.vue')
+  const BreadcrumbItem = () => import('./components/layout/BreadcrumbItem.vue')
+  const FilterWrapper = () => import('./components/layout/FilterWrapper.vue')
+  const EmptyPlaceholder = () => import('./components/layout/EmptyPlaceholder.vue')
+  const ContentPlaceholder = () => import('./components/layout/ContentPlaceholder.vue')
+  const ContentPlaceholderBox = () => import('./components/layout/ContentPlaceholderBox.vue')
+  const ContentPlaceholderText = () => import('./components/layout/ContentPlaceholderText.vue')
+  const ContentPlaceholderHeading = () => import('./components/layout/ContentPlaceholderHeading.vue')
+  app.component('BasePage', defineAsyncComponent(Page))
+  app.component('BasePageHeader', defineAsyncComponent(PageHeader))
+  app.component('BaseBreadcrumb', defineAsyncComponent(Breadcrumb))
+  app.component('BaseBreadcrumbItem', defineAsyncComponent(BreadcrumbItem))
+  app.component('BaseFilterWrapper', defineAsyncComponent(FilterWrapper))
+  app.component('BaseEmptyPlaceholder', defineAsyncComponent(EmptyPlaceholder))
+  app.component('BaseContentPlaceholders', defineAsyncComponent(ContentPlaceholder))
+  app.component('BaseContentPlaceholdersBox', defineAsyncComponent(ContentPlaceholderBox))
+  app.component('BaseContentPlaceholdersText', defineAsyncComponent(ContentPlaceholderText))
+  app.component('BaseContentPlaceholdersHeading', defineAsyncComponent(ContentPlaceholderHeading))
+
+  // Table
+  const TablePagination = () => import('./components/table/TablePagination.vue')
+
+  app.component('BaseTablePagination', defineAsyncComponent(TablePagination))
+
+  // Notifications
+  const NotificationRoot = () => import('./components/notifications/NotificationRoot.vue')
+  const NotificationItem = () => import('./components/notifications/NotificationItem.vue')
+
+  app.component('NotificationRoot', defineAsyncComponent(NotificationRoot))
+  app.component('NotificationItem', defineAsyncComponent(NotificationItem))
+
+  // Status badge aliases (map old Base* prefix names to the already eager-loaded
+  // components from ./components/base/*.vue)
+  const invoiceStatusBadge = components['./components/base/InvoiceStatusBadge.vue']
+  const estimateStatusBadge = components['./components/base/EstimateStatusBadge.vue']
+  const paidStatusBadge = components['./components/base/PaidStatusBadge.vue']
+  const recurringInvoiceStatusBadge = components['./components/base/RecurringInvoiceStatusBadge.vue']
+
+  if (invoiceStatusBadge) app.component('BaseInvoiceStatusBadge', invoiceStatusBadge.default)
+  if (estimateStatusBadge) app.component('BaseEstimateStatusBadge', estimateStatusBadge.default)
+  if (paidStatusBadge) app.component('BasePaidStatusBadge', paidStatusBadge.default)
+  if (recurringInvoiceStatusBadge) app.component('BaseRecurringInvoiceStatusBadge', recurringInvoiceStatusBadge.default)
 }