Finalize Typescript restructure

resources/scripts-v2/features/company/settings/views/SettingsLayoutView.vue

@@ -3,6 +3,8 @@ import { ref, computed, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useGlobalStore } from '../../../../stores/global.store'
+import { useCompanyStore } from '../../../../stores/company.store'
+import { useUserStore } from '../../../../stores/user.store'
 
 interface SettingMenuItem {
   title: string
@@ -16,21 +18,42 @@ interface DropdownMenuItem extends SettingMenuItem {
 
 const { t } = useI18n()
 const globalStore = useGlobalStore()
+const companyStore = useCompanyStore()
+const userStore = useUserStore()
 const route = useRoute()
 const router = useRouter()
 
+const showDangerZone = computed<boolean>(() => {
+  return (
+    userStore.currentUser?.is_owner === true &&
+    companyStore.companies.length > 1
+  )
+})
+
 const currentSetting = ref<DropdownMenuItem | undefined>(undefined)
 
 const dropdownMenuItems = computed<DropdownMenuItem[]>(() => {
-  return (globalStore.settingMenu as SettingMenuItem[]).map((item) => ({
+  const items = (globalStore.settingMenu as SettingMenuItem[]).map((item) => ({
     ...item,
     title: t(item.title),
   }))
+
+  if (showDangerZone.value) {
+    items.push({
+      title: t('settings.company_info.danger_zone'),
+      link: '/admin/settings/danger-zone',
+      icon: 'ExclamationTriangleIcon',
+    })
+  }
+
+  return items
 })
 
 watchEffect(() => {
   if (route.path === '/admin/settings') {
-    router.push('/admin/settings/company-info')
+    // Redirect to first available setting menu item, or account settings as fallback
+    const firstItem = globalStore.settingMenu?.[0]
+    router.push(firstItem?.link ?? '/admin/settings/account-settings')
   }
 
   const item = dropdownMenuItems.value.find((item) => item.link === route.path)
@@ -44,6 +67,7 @@ function hasActiveUrl(url: string): boolean {
 function navigateToSetting(setting: DropdownMenuItem): void {
   router.push(setting.link)
 }
+
 </script>
 
 <template>
@@ -53,7 +77,7 @@ function navigateToSetting(setting: DropdownMenuItem): void {
         <BaseBreadcrumbItem :title="$t('general.home')" to="/admin/dashboard" />
         <BaseBreadcrumbItem
           :title="$t('settings.setting', 2)"
-          to="/admin/settings/company-info"
+          to="/admin/settings"
           active
         />
       </BaseBreadcrumb>
@@ -89,6 +113,22 @@ function navigateToSetting(setting: DropdownMenuItem): void {
             </template>
           </BaseListItem>
         </BaseList>
+
+        <router-link
+          v-if="showDangerZone"
+          to="/admin/settings/danger-zone"
+          :class="[
+            'cursor-pointer px-3 py-2 mt-1 text-sm font-medium leading-5 flex items-center rounded-lg transition-colors',
+            hasActiveUrl('/admin/settings/danger-zone')
+              ? 'text-red-600 bg-red-50 font-semibold'
+              : 'text-red-500 hover:bg-red-50 hover:text-red-600',
+          ]"
+        >
+          <span class="mr-3">
+            <BaseIcon name="ExclamationTriangleIcon" />
+          </span>
+          <span>{{ $t('settings.company_info.danger_zone') }}</span>
+        </router-link>
       </div>
 
       <div class="w-full overflow-hidden">