Split CompanyController and introduce standalone User Settings page

Backend:
- Extract user profile methods (show, update, uploadAvatar) from
  CompanyController into new UserProfileController
- CompanyController now only handles company concerns (updateCompany,
  uploadCompanyLogo)
- Remove Account Settings from setting_menu config

Frontend:
- New /admin/user-settings page with 3 tabs: General, Profile Photo,
  Security (password change)
- User dropdown now links to /admin/user-settings instead of
  /admin/settings/account-settings
- Settings sidebar defaults to Company Information as first item
- Remove old monolithic AccountSetting.vue

resources/scripts/admin/views/settings/AccountSetting.vue

@@ -1,239 +0,0 @@
-<template>
-  <form class="relative" @submit.prevent="updateUserData">
-    <BaseSettingCard
-      :title="$t('settings.account_settings.account_settings')"
-      :description="$t('settings.account_settings.section_description')"
-    >
-      <BaseInputGrid>
-        <BaseInputGroup
-          :label="$t('settings.account_settings.profile_picture')"
-        >
-          <BaseFileUploader
-            v-model="imgFiles"
-            :avatar="true"
-            accept="image/*"
-            @change="onFileInputChange"
-            @remove="onFileInputRemove"
-          />
-        </BaseInputGroup>
-
-        <!-- Empty Column -->
-        <span></span>
-
-        <BaseInputGroup
-          :label="$t('settings.account_settings.name')"
-          :error="v$.name.$error && v$.name.$errors[0].$message"
-          required
-        >
-          <BaseInput
-            v-model="userForm.name"
-            :invalid="v$.name.$error"
-            @input="v$.name.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.account_settings.email')"
-          :error="v$.email.$error && v$.email.$errors[0].$message"
-          required
-        >
-          <BaseInput
-            v-model="userForm.email"
-            :invalid="v$.email.$error"
-            @input="v$.email.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :error="v$.password.$error && v$.password.$errors[0].$message"
-          :label="$t('settings.account_settings.password')"
-        >
-          <BaseInput
-            v-model="userForm.password"
-            type="password"
-            @input="v$.password.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.account_settings.confirm_password')"
-          :error="
-            v$.confirm_password.$error &&
-            v$.confirm_password.$errors[0].$message
-          "
-        >
-          <BaseInput
-            v-model="userForm.confirm_password"
-            type="password"
-            @input="v$.confirm_password.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup :label="$t('settings.language')">
-          <BaseMultiselect
-            v-model="userForm.language"
-            :options="globalStore.config.languages"
-            label="name"
-            value-prop="code"
-            track-by="name"
-            :searchable="true"
-            open-direction="top"
-          />
-        </BaseInputGroup>
-      </BaseInputGrid>
-
-      <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-6">
-        <template #left="slotProps">
-          <BaseIcon
-            v-if="!isSaving"
-            name="ArrowDownOnSquareIcon"
-            :class="slotProps.class"
-          ></BaseIcon>
-        </template>
-        {{ $t('settings.company_info.save') }}
-      </BaseButton>
-    </BaseSettingCard>
-  </form>
-</template>
-
-<script setup>
-import { ref, computed, reactive } from 'vue'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useI18n } from 'vue-i18n'
-import {
-  helpers,
-  sameAs,
-  email,
-  required,
-  minLength,
-} from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const userStore = useUserStore()
-const globalStore = useGlobalStore()
-const companyStore = useCompanyStore()
-const { t } = useI18n()
-
-let isSaving = ref(false)
-let avatarFileBlob = ref(null)
-let imgFiles = ref([])
-const isAdminAvatarRemoved = ref(false)
-
-if (userStore.currentUser.avatar) {
-  imgFiles.value.push({
-    image: userStore.currentUser.avatar,
-  })
-}
-
-const rules = computed(() => {
-  return {
-    name: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    email: {
-      required: helpers.withMessage(t('validation.required'), required),
-      email: helpers.withMessage(t('validation.email_incorrect'), email),
-    },
-    password: {
-      minLength: helpers.withMessage(
-        t('validation.password_length', { count: 8 }),
-        minLength(8)
-      ),
-    },
-    confirm_password: {
-      sameAsPassword: helpers.withMessage(
-        t('validation.password_incorrect'),
-        sameAs(userForm.password)
-      ),
-    },
-  }
-})
-
-const userForm = reactive({
-  name: userStore.currentUser.name,
-  email: userStore.currentUser.email,
-  language:
-    userStore.currentUserSettings.language ||
-    companyStore.selectedCompanySettings.language,
-  password: '',
-  confirm_password: '',
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => userForm)
-)
-
-function onFileInputChange(fileName, file) {
-  avatarFileBlob.value = file
-}
-
-function onFileInputRemove() {
-  avatarFileBlob.value = null
-  isAdminAvatarRemoved.value = true
-}
-
-async function updateUserData() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-
-  let data = {
-    name: userForm.name,
-    email: userForm.email,
-  }
-
-  try {
-    if (
-      userForm.password != null &&
-      userForm.password !== undefined &&
-      userForm.password !== ''
-    ) {
-      data = { ...data, password: userForm.password }
-    }
-    // Update Language if changed
-
-    if (userStore.currentUserSettings.language !== userForm.language) {
-      // Load the new language dynamically before updating settings
-      await window.loadLanguage(userForm.language)
-
-      await userStore.updateUserSettings({
-        settings: {
-          language: userForm.language,
-        },
-      })
-    }
-
-    let response = await userStore.updateCurrentUser(data)
-
-    if (response.data.data) {
-      isSaving.value = false
-
-      if (avatarFileBlob.value || isAdminAvatarRemoved.value) {
-        let avatarData = new FormData()
-
-        if (avatarFileBlob.value) {
-          avatarData.append('admin_avatar', avatarFileBlob.value)
-        }
-        avatarData.append('is_admin_avatar_removed', isAdminAvatarRemoved.value)
-
-        await userStore.uploadAvatar(avatarData)
-        avatarFileBlob.value = null
-        isAdminAvatarRemoved.value = false
-      }
-
-      userForm.password = ''
-      userForm.confirm_password = ''
-    }
-  } catch (error) {
-    isSaving.value = false
-    return true
-  }
-}
-</script>

resources/scripts/admin/views/settings/SettingsIndex.vue

@@ -5,7 +5,7 @@
         <BaseBreadcrumbItem :title="$t('general.home')" to="/admin/dashboard" />
         <BaseBreadcrumbItem
           :title="$t('settings.setting', 2)"
-          to="/admin/settings/account-settings"
+          to="/admin/settings/company-info"
           active
         />
       </BaseBreadcrumb>
@@ -75,7 +75,7 @@ const dropdownMenuItems = computed(() => {
 
 watchEffect(() => {
   if (route.path === '/admin/settings') {
-    router.push('/admin/settings/account-settings')
+    router.push('/admin/settings/company-info')
   }
 
   const item = dropdownMenuItems.value.find((item) => {

resources/scripts/admin/views/user-settings/GeneralTab.vue

@@ -0,0 +1,121 @@
+<template>
+  <form @submit.prevent="updateGeneral">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.account_settings.name')"
+        :error="v$.name.$error && v$.name.$errors[0].$message"
+        required
+      >
+        <BaseInput
+          v-model="form.name"
+          :invalid="v$.name.$error"
+          @input="v$.name.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.account_settings.email')"
+        :error="v$.email.$error && v$.email.$errors[0].$message"
+        required
+      >
+        <BaseInput
+          v-model="form.email"
+          :invalid="v$.email.$error"
+          @input="v$.email.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup :label="$t('settings.language')">
+        <BaseMultiselect
+          v-model="form.language"
+          :options="globalStore.config.languages"
+          label="name"
+          value-prop="code"
+          track-by="name"
+          :searchable="true"
+          open-direction="top"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+
+    <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-6">
+      <template #left="slotProps">
+        <BaseIcon
+          v-if="!isSaving"
+          name="ArrowDownOnSquareIcon"
+          :class="slotProps.class"
+        />
+      </template>
+      {{ $t('settings.company_info.save') }}
+    </BaseButton>
+  </form>
+</template>
+
+<script setup>
+import { ref, computed, reactive } from 'vue'
+import { useGlobalStore } from '@/scripts/admin/stores/global'
+import { useUserStore } from '@/scripts/admin/stores/user'
+import { useCompanyStore } from '@/scripts/admin/stores/company'
+import { useI18n } from 'vue-i18n'
+import { helpers, email, required } from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
+
+const userStore = useUserStore()
+const globalStore = useGlobalStore()
+const companyStore = useCompanyStore()
+const { t } = useI18n()
+
+const isSaving = ref(false)
+
+const form = reactive({
+  name: userStore.currentUser.name,
+  email: userStore.currentUser.email,
+  language:
+    userStore.currentUserSettings.language ||
+    companyStore.selectedCompanySettings.language,
+})
+
+const rules = computed(() => ({
+  name: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  email: {
+    required: helpers.withMessage(t('validation.required'), required),
+    email: helpers.withMessage(t('validation.email_incorrect'), email),
+  },
+}))
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => form)
+)
+
+async function updateGeneral() {
+  v$.value.$touch()
+
+  if (v$.value.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+
+  try {
+    if (userStore.currentUserSettings.language !== form.language) {
+      await window.loadLanguage(form.language)
+
+      await userStore.updateUserSettings({
+        settings: {
+          language: form.language,
+        },
+      })
+    }
+
+    await userStore.updateCurrentUser({
+      name: form.name,
+      email: form.email,
+    })
+  } finally {
+    isSaving.value = false
+  }
+}
+</script>

resources/scripts/admin/views/user-settings/ProfilePhotoTab.vue

@@ -0,0 +1,78 @@
+<template>
+  <form @submit.prevent="updateAvatar">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.account_settings.profile_picture')"
+      >
+        <BaseFileUploader
+          v-model="imgFiles"
+          :avatar="true"
+          accept="image/*"
+          @change="onFileInputChange"
+          @remove="onFileInputRemove"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+
+    <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-6">
+      <template #left="slotProps">
+        <BaseIcon
+          v-if="!isSaving"
+          name="ArrowDownOnSquareIcon"
+          :class="slotProps.class"
+        />
+      </template>
+      {{ $t('settings.company_info.save') }}
+    </BaseButton>
+  </form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useUserStore } from '@/scripts/admin/stores/user'
+
+const userStore = useUserStore()
+
+const isSaving = ref(false)
+let avatarFileBlob = ref(null)
+let imgFiles = ref([])
+const isAdminAvatarRemoved = ref(false)
+
+if (userStore.currentUser.avatar) {
+  imgFiles.value.push({
+    image: userStore.currentUser.avatar,
+  })
+}
+
+function onFileInputChange(fileName, file) {
+  avatarFileBlob.value = file
+}
+
+function onFileInputRemove() {
+  avatarFileBlob.value = null
+  isAdminAvatarRemoved.value = true
+}
+
+async function updateAvatar() {
+  if (!avatarFileBlob.value && !isAdminAvatarRemoved.value) {
+    return
+  }
+
+  isSaving.value = true
+
+  try {
+    let data = new FormData()
+
+    if (avatarFileBlob.value) {
+      data.append('admin_avatar', avatarFileBlob.value)
+    }
+    data.append('is_admin_avatar_removed', isAdminAvatarRemoved.value)
+
+    await userStore.uploadAvatar(data)
+    avatarFileBlob.value = null
+    isAdminAvatarRemoved.value = false
+  } finally {
+    isSaving.value = false
+  }
+}
+</script>

resources/scripts/admin/views/user-settings/SecurityTab.vue

@@ -0,0 +1,105 @@
+<template>
+  <form @submit.prevent="updatePassword">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.account_settings.password')"
+        :error="v$.password.$error && v$.password.$errors[0].$message"
+      >
+        <BaseInput
+          v-model="form.password"
+          type="password"
+          @input="v$.password.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.account_settings.confirm_password')"
+        :error="
+          v$.confirm_password.$error &&
+          v$.confirm_password.$errors[0].$message
+        "
+      >
+        <BaseInput
+          v-model="form.confirm_password"
+          type="password"
+          @input="v$.confirm_password.$touch()"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+
+    <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-6">
+      <template #left="slotProps">
+        <BaseIcon
+          v-if="!isSaving"
+          name="ArrowDownOnSquareIcon"
+          :class="slotProps.class"
+        />
+      </template>
+      {{ $t('settings.company_info.save') }}
+    </BaseButton>
+  </form>
+</template>
+
+<script setup>
+import { ref, computed, reactive } from 'vue'
+import { useUserStore } from '@/scripts/admin/stores/user'
+import { useI18n } from 'vue-i18n'
+import { helpers, sameAs, minLength } from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
+
+const userStore = useUserStore()
+const { t } = useI18n()
+
+const isSaving = ref(false)
+
+const form = reactive({
+  password: '',
+  confirm_password: '',
+})
+
+const rules = computed(() => ({
+  password: {
+    minLength: helpers.withMessage(
+      t('validation.password_length', { count: 8 }),
+      minLength(8)
+    ),
+  },
+  confirm_password: {
+    sameAsPassword: helpers.withMessage(
+      t('validation.password_incorrect'),
+      sameAs(form.password)
+    ),
+  },
+}))
+
+const v$ = useVuelidate(
+  rules,
+  computed(() => form)
+)
+
+async function updatePassword() {
+  v$.value.$touch()
+
+  if (v$.value.$invalid) {
+    return
+  }
+
+  if (!form.password) {
+    return
+  }
+
+  isSaving.value = true
+
+  try {
+    await userStore.updateCurrentUser({
+      password: form.password,
+    })
+
+    form.password = ''
+    form.confirm_password = ''
+    v$.value.$reset()
+  } finally {
+    isSaving.value = false
+  }
+}
+</script>

resources/scripts/admin/views/user-settings/UserSettingsIndex.vue

@@ -0,0 +1,47 @@
+<template>
+  <BasePage>
+    <BasePageHeader :title="$t('settings.account_settings.account_settings')">
+      <template #actions>
+        <router-link to="/admin/settings">
+          <BaseButton variant="primary-outline">
+            <template #left="slotProps">
+              <BaseIcon name="CogIcon" :class="slotProps.class" />
+            </template>
+            {{ $t('navigation.settings') }}
+          </BaseButton>
+        </router-link>
+      </template>
+    </BasePageHeader>
+
+    <BaseCard container-class="px-4 py-5 sm:px-8 sm:py-2">
+      <BaseTabGroup>
+        <BaseTab
+          tab-panel-container="py-4 mt-px"
+          :title="$t('settings.account_settings.general')"
+        >
+          <GeneralTab />
+        </BaseTab>
+
+        <BaseTab
+          tab-panel-container="py-4 mt-px"
+          :title="$t('settings.account_settings.profile_picture')"
+        >
+          <ProfilePhotoTab />
+        </BaseTab>
+
+        <BaseTab
+          tab-panel-container="py-4 mt-px"
+          :title="$t('settings.account_settings.security')"
+        >
+          <SecurityTab />
+        </BaseTab>
+      </BaseTabGroup>
+    </BaseCard>
+  </BasePage>
+</template>
+
+<script setup>
+import GeneralTab from './GeneralTab.vue'
+import ProfilePhotoTab from './ProfilePhotoTab.vue'
+import SecurityTab from './SecurityTab.vue'
+</script>