Refactor Administration entrypoint

We moved the administration item to the company switcher in the header

resources/scripts/admin/admin-router.js

@@ -114,6 +114,8 @@ const InvoicePublicPage = () =>
   import('@/scripts/components/InvoicePublicPage.vue')
 
 // Administration (Super Admin)
+const AdminDashboard = () =>
+  import('@/scripts/admin/views/administration/AdminDashboard.vue')
 const AdminCompaniesIndex = () =>
   import('@/scripts/admin/views/administration/companies/Index.vue')
 const AdminCompaniesEdit = () =>
@@ -515,6 +517,12 @@ export default [
       },
 
       // Administration (Super Admin)
+      {
+        path: 'administration/dashboard',
+        name: 'admin.dashboard',
+        meta: { isSuperAdmin: true },
+        component: AdminDashboard,
+      },
       {
         path: 'administration/companies',
         name: 'admin.companies.index',

resources/scripts/admin/layouts/LayoutBasic.vue

@@ -55,12 +55,16 @@ const isAppLoaded = computed(() => {
 })
 
 const hasCompany = computed(() => {
-  return !!companyStore.selectedCompany || !!userStore.currentUser?.is_super_admin
+  return !!companyStore.selectedCompany || companyStore.isAdminMode
 })
 
 onMounted(() => {
   globalStore.bootstrap().then((res) => {
-    if (!res.data.current_company && !res.data.current_user.is_super_admin) {
+    if (companyStore.isAdminMode) {
+      return
+    }
+
+    if (!res.data.current_company) {
       if (route.name !== 'no.company') {
         router.push({ name: 'no.company' })
       }

resources/scripts/admin/layouts/partials/TheSiteHeader.vue

@@ -18,7 +18,7 @@
     "
   >
     <router-link
-      to="/admin/dashboard"
+      :to="companyStore.isAdminMode ? '/admin/administration/dashboard' : '/admin/dashboard'"
       class="
         float-none
         text-lg
@@ -61,7 +61,7 @@
 
     <ul class="flex float-right h-8 m-0 list-none md:h-9">
       <li
-        v-if="hasCreateAbilities()"
+        v-if="hasCreateAbilities() && !companyStore.isAdminMode"
         class="relative hidden float-left m-0 md:block"
       >
         <BaseDropdown width-class="w-48">
@@ -124,7 +124,7 @@
         </BaseDropdown>
       </li>
 
-      <li class="ml-2">
+      <li v-if="!companyStore.isAdminMode" class="ml-2">
         <GlobalSearchBar
           v-if="
             userStore.currentUser.is_owner ||
@@ -179,6 +179,7 @@ import { computed } from 'vue'
 import { useUserStore } from '@/scripts/admin/stores/user'
 import { useGlobalStore } from '@/scripts/admin/stores/global'
 
+import { useCompanyStore } from '@/scripts/admin/stores/company'
 import CompanySwitcher from '@/scripts/components/CompanySwitcher.vue'
 import GlobalSearchBar from '@/scripts/components/GlobalSearchBar.vue'
 import MainLogo from '@/scripts/components/icons/MainLogo.vue'
@@ -188,6 +189,7 @@ import abilities from '@/scripts/admin/stub/abilities'
 const authStore = useAuthStore()
 const userStore = useUserStore()
 const globalStore = useGlobalStore()
+const companyStore = useCompanyStore()
 const router = useRouter()
 
 const previewAvatar = computed(() => {

resources/scripts/admin/stores/company.js

@@ -14,18 +14,32 @@ export const useCompanyStore = (useWindow = false) => {
       selectedCompany: null,
       selectedCompanySettings: {},
       selectedCompanyCurrency: null,
+      isAdminMode: window.Ls?.get('isAdminMode') === 'true',
     }),
 
     actions: {
       setSelectedCompany(data) {
         if (data) {
           window.Ls.set('selectedCompany', data.id)
+          window.Ls.remove('isAdminMode')
+          this.isAdminMode = false
         } else {
           window.Ls.remove('selectedCompany')
         }
         this.selectedCompany = data
       },
 
+      setAdminMode(enabled) {
+        this.isAdminMode = enabled
+        if (enabled) {
+          window.Ls.set('isAdminMode', 'true')
+          window.Ls.remove('selectedCompany')
+          this.selectedCompany = null
+        } else {
+          window.Ls.remove('isAdminMode')
+        }
+      },
+
       fetchBasicMailConfig() {
         return new Promise((resolve, reject) => {
           http

resources/scripts/admin/stores/global.js

@@ -47,10 +47,14 @@ export const useGlobalStore = (useWindow = false) => {
     actions: {
       bootstrap() {
         return new Promise((resolve, reject) => {
+          const companyStore = useCompanyStore()
+          const url = companyStore.isAdminMode
+            ? '/api/v1/bootstrap?admin_mode=1'
+            : '/api/v1/bootstrap'
+
           http
-            .get('/api/v1/bootstrap')
+            .get(url)
             .then(async (response) => {
-              const companyStore = useCompanyStore()
               const userStore = useUserStore()
               const moduleStore = useModuleStore()
 

resources/scripts/admin/views/administration/AdminDashboard.vue

@@ -0,0 +1,104 @@
+<template>
+  <BasePage>
+    <BasePageHeader :title="$t('navigation.dashboard')">
+      <BaseBreadcrumb>
+        <BaseBreadcrumbItem
+          :title="$t('navigation.administration')"
+          to="/admin/administration/dashboard"
+          active
+        />
+      </BaseBreadcrumb>
+    </BasePageHeader>
+
+    <div v-if="isLoading" class="flex justify-center py-16">
+      <BaseGlobalLoader />
+    </div>
+
+    <div v-else class="grid grid-cols-1 gap-6 mt-6 md:grid-cols-2 lg:grid-cols-3">
+      <!-- App Version -->
+      <BaseCard>
+        <template #header>
+          <div class="flex items-center">
+            <BaseIcon name="ServerIcon" class="w-5 h-5 mr-2 text-gray-400" />
+            <span class="font-medium text-gray-700">{{ $t('general.app_version') }}</span>
+          </div>
+        </template>
+        <p class="text-2xl font-semibold text-gray-900">
+          {{ data.app_version }}
+        </p>
+      </BaseCard>
+
+      <!-- PHP Version -->
+      <BaseCard>
+        <template #header>
+          <div class="flex items-center">
+            <BaseIcon name="CodeBracketIcon" class="w-5 h-5 mr-2 text-gray-400" />
+            <span class="font-medium text-gray-700">PHP</span>
+          </div>
+        </template>
+        <p class="text-2xl font-semibold text-gray-900">
+          {{ data.php_version }}
+        </p>
+      </BaseCard>
+
+      <!-- Database -->
+      <BaseCard>
+        <template #header>
+          <div class="flex items-center">
+            <BaseIcon name="CircleStackIcon" class="w-5 h-5 mr-2 text-gray-400" />
+            <span class="font-medium text-gray-700">{{ $t('general.database') }}</span>
+          </div>
+        </template>
+        <p class="text-2xl font-semibold text-gray-900">
+          {{ data.database?.driver?.toUpperCase() }}
+        </p>
+        <p class="text-sm text-gray-500 mt-1">
+          {{ data.database?.version }}
+        </p>
+      </BaseCard>
+
+      <!-- Companies -->
+      <BaseCard>
+        <template #header>
+          <div class="flex items-center">
+            <BaseIcon name="BuildingOfficeIcon" class="w-5 h-5 mr-2 text-gray-400" />
+            <span class="font-medium text-gray-700">{{ $t('navigation.companies') }}</span>
+          </div>
+        </template>
+        <p class="text-2xl font-semibold text-gray-900">
+          {{ data.counts?.companies }}
+        </p>
+      </BaseCard>
+
+      <!-- Users -->
+      <BaseCard>
+        <template #header>
+          <div class="flex items-center">
+            <BaseIcon name="UsersIcon" class="w-5 h-5 mr-2 text-gray-400" />
+            <span class="font-medium text-gray-700">{{ $t('navigation.all_users') }}</span>
+          </div>
+        </template>
+        <p class="text-2xl font-semibold text-gray-900">
+          {{ data.counts?.users }}
+        </p>
+      </BaseCard>
+    </div>
+  </BasePage>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import http from '@/scripts/http'
+
+const isLoading = ref(true)
+const data = ref({})
+
+onMounted(async () => {
+  try {
+    const response = await http.get('/api/v1/super-admin/dashboard')
+    data.value = response.data
+  } finally {
+    isLoading.value = false
+  }
+})
+</script>

resources/scripts/components/CompanySwitcher.vue

@@ -19,7 +19,13 @@
       @click="isShow = !isShow"
     >
       <span
-        v-if="companyStore.selectedCompany"
+        v-if="companyStore.isAdminMode"
+        class="w-16 text-sm font-medium truncate sm:w-auto"
+      >
+        {{ $t('navigation.administration') }}
+      </span>
+      <span
+        v-else-if="companyStore.selectedCompany"
         class="w-16 text-sm font-medium truncate sm:w-auto"
       >
         {{ companyStore.selectedCompany.name }}
@@ -49,6 +55,29 @@
             pb-4
           "
         >
+          <!-- Administration Mode -->
+          <div v-if="userStore.currentUser?.is_super_admin">
+            <div
+              class="p-2 px-3 rounded-md cursor-pointer hover:bg-gray-100 hover:text-primary-500"
+              :class="{
+                'bg-gray-100 text-primary-500': companyStore.isAdminMode,
+              }"
+              @click="enterAdminMode"
+            >
+              <div class="flex items-center">
+                <span
+                  class="flex items-center justify-center mr-3 overflow-hidden text-base font-semibold bg-primary-100 rounded-md w-9 h-9 shrink-0 text-primary-500"
+                >
+                  <BaseIcon name="ShieldCheckIcon" class="w-5 h-5" />
+                </span>
+                <div class="flex flex-col">
+                  <span class="text-sm font-medium">{{ $t('navigation.administration') }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="border-t border-gray-100 my-1"></div>
+          </div>
+
           <label
             class="
               px-3
@@ -259,7 +288,16 @@ function addNewCompany() {
   })
 }
 
+async function enterAdminMode() {
+  companyStore.setAdminMode(true)
+  isShow.value = false
+  router.push('/admin/administration/dashboard')
+  await globalStore.setIsAppLoaded(false)
+  await globalStore.bootstrap()
+}
+
 async function changeCompany(company) {
+  companyStore.setAdminMode(false)
   await companyStore.setSelectedCompany(company)
   router.push('/admin/dashboard')
   await globalStore.setIsAppLoaded(false)

resources/scripts/http/index.js

@@ -20,7 +20,7 @@ instance.interceptors.request.use(function (config) {
     config.headers.Authorization = authToken
   }
 
-  if (companyId) {
+  if (companyId && Ls.get('isAdminMode') !== 'true') {
     config.headers.company = companyId
   }
 

resources/scripts/router/index.js

@@ -26,7 +26,7 @@ router.beforeEach((to) => {
   const { isAppLoaded } = globalStore
 
   if (isAppLoaded && to.meta.requiresAuth && to.name !== 'no.company') {
-    if (!companyStore.selectedCompany && !(to.meta.isSuperAdmin && userStore.currentUser?.is_super_admin)) {
+    if (!companyStore.selectedCompany && !companyStore.isAdminMode && !(to.meta.isSuperAdmin && userStore.currentUser?.is_super_admin)) {
       return { name: 'no.company' }
     }
   }