diff --git a/resources/scripts/App.vue b/resources/scripts/App.vue
deleted file mode 100644
index 521b699e..00000000
--- a/resources/scripts/App.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <router-view />
-
-  <BaseDialog />
-</template>
diff --git a/resources/scripts/InvoiceShelf.js b/resources/scripts/InvoiceShelf.js
deleted file mode 100644
index b619defa..00000000
--- a/resources/scripts/InvoiceShelf.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { createApp } from 'vue'
-import App from '@/scripts/App.vue'
-import { createI18n } from 'vue-i18n'
-import messages from '/lang/locales'
-import router from '@/scripts/router/index'
-import { defineGlobalComponents } from './global-components'
-import utils from '@/scripts/helpers/utilities.js'
-import _ from 'lodash'
-import { VTooltip } from 'v-tooltip'
-import { setI18nLanguage } from '@/scripts/helpers/language-loader.js'
-
-const app = createApp(App)
-
-export default class InvoiceShelf {
-  constructor() {
-    this.bootingCallbacks = []
-    this.messages = messages
-    this.i18n = null
-  }
-
-  booting(callback) {
-    this.bootingCallbacks.push(callback)
-  }
-
-  executeCallbacks() {
-    this.bootingCallbacks.forEach((callback) => {
-      callback(app, router)
-    })
-  }
-
-  addMessages(moduleMessages = []) {
-    _.merge(this.messages, moduleMessages)
-  }
-
-  /**
-   * Dynamically load and set a language
-   * @param {string} locale - Language code to load
-   * @returns {Promise<void>}
-   */
-  async loadLanguage(locale) {
-    if (this.i18n) {
-      await setI18nLanguage(this.i18n, locale)
-    }
-  }
-
-  start() {
-    this.executeCallbacks()
-
-    defineGlobalComponents(app)
-
-    app.provide('$utils', utils)
-
-    this.i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      fallbackLocale: 'en',
-      globalInjection: true,
-      messages: this.messages,
-    })
-
-    window.i18n = this.i18n
-
-    // Expose language loader globally
-    window.loadLanguage = this.loadLanguage.bind(this)
-
-    const { createPinia } = window.pinia
-
-    app.use(router)
-    app.use(this.i18n)
-    app.use(createPinia())
-    app.provide('utils', utils)
-    app.directive('tooltip', VTooltip)
-
-    app.mount('body')
-  }
-}
diff --git a/resources/scripts/admin/admin-router.js b/resources/scripts/admin/admin-router.js
deleted file mode 100644
index 76a9473a..00000000
--- a/resources/scripts/admin/admin-router.js
+++ /dev/null
@@ -1,586 +0,0 @@
-import abilities from '@/scripts/admin/stub/abilities'
-
-const LayoutInstallation = () =>
-  import('@/scripts/admin/layouts/LayoutInstallation.vue')
-
-const Login = () => import('@/scripts/admin/views/auth/Login.vue')
-const LayoutBasic = () => import('@/scripts/admin/layouts/LayoutBasic.vue')
-const LayoutLogin = () => import('@/scripts/admin/layouts/LayoutLogin.vue')
-const ResetPassword = () =>
-  import('@/scripts/admin/views/auth/ResetPassword.vue')
-const ForgotPassword = () =>
-  import('@/scripts/admin/views/auth/ForgotPassword.vue')
-
-// Dashboard
-const Dashboard = () => import('@/scripts/admin/views/dashboard/Dashboard.vue')
-
-// Customers
-const CustomerIndex = () => import('@/scripts/admin/views/customers/Index.vue')
-const CustomerCreate = () =>
-  import('@/scripts/admin/views/customers/Create.vue')
-const CustomerView = () => import('@/scripts/admin/views/customers/View.vue')
-
-//Settings
-const SettingsIndex = () =>
-  import('@/scripts/admin/views/settings/SettingsIndex.vue')
-const UserSettingsIndex = () =>
-  import('@/scripts/admin/views/user-settings/UserSettingsIndex.vue')
-const UserSettingsGeneral = () =>
-  import('@/scripts/admin/views/user-settings/GeneralTab.vue')
-const UserSettingsProfilePhoto = () =>
-  import('@/scripts/admin/views/user-settings/ProfilePhotoTab.vue')
-const UserSettingsSecurity = () =>
-  import('@/scripts/admin/views/user-settings/SecurityTab.vue')
-const CompanyInfo = () =>
-  import('@/scripts/admin/views/settings/CompanyInfoSettings.vue')
-const Preferences = () =>
-  import('@/scripts/admin/views/settings/PreferencesSetting.vue')
-const Customization = () =>
-  import(
-    '@/scripts/admin/views/settings/customization/CustomizationSetting.vue'
-  )
-const Notifications = () =>
-  import('@/scripts/admin/views/settings/NotificationsSetting.vue')
-const TaxTypes = () =>
-  import('@/scripts/admin/views/settings/TaxTypesSetting.vue')
-const PaymentMode = () =>
-  import('@/scripts/admin/views/settings/PaymentsModeSetting.vue')
-const CustomFieldsIndex = () =>
-  import('@/scripts/admin/views/settings/CustomFieldsSetting.vue')
-const NotesSetting = () =>
-  import('@/scripts/admin/views/settings/NotesSetting.vue')
-const ExpenseCategory = () =>
-  import('@/scripts/admin/views/settings/ExpenseCategorySetting.vue')
-const ExchangeRateSetting = () =>
-  import('@/scripts/admin/views/settings/ExchangeRateProviderSetting.vue')
-const RolesSettings = () =>
-  import('@/scripts/admin/views/settings/RolesSettings.vue')
-const CompanyMailConfig = () =>
-  import('@/scripts/admin/views/settings/CompanyMailConfigSetting.vue')
-
-// Items
-const ItemsIndex = () => import('@/scripts/admin/views/items/Index.vue')
-const ItemCreate = () => import('@/scripts/admin/views/items/Create.vue')
-
-// Expenses
-const ExpensesIndex = () => import('@/scripts/admin/views/expenses/Index.vue')
-const ExpenseCreate = () => import('@/scripts/admin/views/expenses/Create.vue')
-
-// Members
-const MemberIndex = () => import('@/scripts/admin/views/members/Index.vue')
-
-// Estimates
-const EstimateIndex = () => import('@/scripts/admin/views/estimates/Index.vue')
-const EstimateCreate = () =>
-  import('@/scripts/admin/views/estimates/create/EstimateCreate.vue')
-const EstimateView = () => import('@/scripts/admin/views/estimates/View.vue')
-
-// Payments
-const PaymentsIndex = () => import('@/scripts/admin/views/payments/Index.vue')
-const PaymentCreate = () => import('@/scripts/admin/views/payments/Create.vue')
-const PaymentView = () => import('@/scripts/admin/views/payments/View.vue')
-
-const NotFoundPage = () => import('@/scripts/admin/views/errors/404.vue')
-
-// Invoice
-const InvoiceIndex = () => import('@/scripts/admin/views/invoices/Index.vue')
-const InvoiceCreate = () =>
-  import('@/scripts/admin/views/invoices/create/InvoiceCreate.vue')
-const InvoiceView = () => import('@/scripts/admin/views/invoices/View.vue')
-
-// Recurring Invoice
-const RecurringInvoiceIndex = () =>
-  import('@/scripts/admin/views/recurring-invoices/Index.vue')
-const RecurringInvoiceCreate = () =>
-  import(
-    '@/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreate.vue'
-  )
-const RecurringInvoiceView = () =>
-  import('@/scripts/admin/views/recurring-invoices/View.vue')
-
-// Reports
-const ReportsIndex = () =>
-  import('@/scripts/admin/views/reports/layout/Index.vue')
-
-// Installation
-const Installation = () =>
-  import('@/scripts/admin/views/installation/Installation.vue')
-
-// Modules
-const ModuleIndex = () => import('@/scripts/admin/views/modules/Index.vue')
-
-const ModuleView = () => import('@/scripts/admin/views/modules/View.vue')
-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 = () =>
-  import('@/scripts/admin/views/administration/companies/Edit.vue')
-const AdminUsersIndex = () =>
-  import('@/scripts/admin/views/administration/users/Index.vue')
-const AdminUsersEdit = () =>
-  import('@/scripts/admin/views/administration/users/Edit.vue')
-const AdminSettingsIndex = () =>
-  import('@/scripts/admin/views/administration/settings/SettingsIndex.vue')
-const AdminMailConfig = () =>
-  import('@/scripts/admin/views/settings/MailConfigSetting.vue')
-const AdminPDFGeneration = () =>
-  import('@/scripts/admin/views/settings/PDFGenerationSetting.vue')
-const AdminBackup = () =>
-  import('@/scripts/admin/views/settings/BackupSetting.vue')
-const AdminUpdateApp = () =>
-  import('@/scripts/admin/views/settings/UpdateAppSetting.vue')
-const AdminFileDisk = () =>
-  import('@/scripts/admin/views/settings/FileDiskSetting.vue')
-
-const NoCompanyView = () =>
-  import('@/scripts/admin/views/NoCompanyView.vue')
-const RegisterWithInvitation = () =>
-  import('@/scripts/admin/views/auth/RegisterWithInvitation.vue')
-
-export default [
-  {
-    path: '/register',
-    name: 'register',
-    component: RegisterWithInvitation,
-    meta: { requiresAuth: false },
-  },
-  {
-    path: '/installation',
-    component: LayoutInstallation,
-    meta: { requiresAuth: false },
-    children: [
-      {
-        path: '/installation',
-        component: Installation,
-        name: 'installation',
-      },
-    ],
-  },
-
-  {
-    path: '/customer/invoices/view/:hash',
-    component: InvoicePublicPage,
-    name: 'invoice.public',
-  },
-
-  {
-    path: '/',
-    component: LayoutLogin,
-    meta: { requiresAuth: false, redirectIfAuthenticated: true },
-    children: [
-      {
-        path: '',
-        component: Login,
-      },
-      {
-        path: 'login',
-        name: 'login',
-        component: Login,
-      },
-      {
-        path: 'forgot-password',
-        component: ForgotPassword,
-        name: 'forgot-password',
-      },
-      {
-        path: '/reset-password/:token',
-        component: ResetPassword,
-        name: 'reset-password',
-      },
-    ],
-  },
-  {
-    path: '/admin',
-    component: LayoutBasic,
-    meta: { requiresAuth: true },
-    children: [
-      {
-        path: 'no-company',
-        name: 'no.company',
-        component: NoCompanyView,
-      },
-      {
-        path: 'dashboard',
-        name: 'dashboard',
-        meta: { ability: abilities.DASHBOARD },
-        component: Dashboard,
-      },
-
-      // Customers
-      {
-        path: 'customers',
-        meta: { ability: abilities.VIEW_CUSTOMER },
-        component: CustomerIndex,
-      },
-      {
-        path: 'customers/create',
-        name: 'customers.create',
-        meta: { ability: abilities.CREATE_CUSTOMER },
-        component: CustomerCreate,
-      },
-      {
-        path: 'customers/:id/edit',
-        name: 'customers.edit',
-        meta: { ability: abilities.EDIT_CUSTOMER },
-        component: CustomerCreate,
-      },
-      {
-        path: 'customers/:id/view',
-        name: 'customers.view',
-        meta: { ability: abilities.VIEW_CUSTOMER },
-        component: CustomerView,
-      },
-      // Payments
-      {
-        path: 'payments',
-        meta: { ability: abilities.VIEW_PAYMENT },
-        component: PaymentsIndex,
-      },
-      {
-        path: 'payments/create',
-        name: 'payments.create',
-        meta: { ability: abilities.CREATE_PAYMENT },
-        component: PaymentCreate,
-      },
-      {
-        path: 'payments/:id/create',
-        name: 'invoice.payments.create',
-        meta: { ability: abilities.CREATE_PAYMENT },
-        component: PaymentCreate,
-      },
-      {
-        path: 'payments/:id/edit',
-        name: 'payments.edit',
-        meta: { ability: abilities.EDIT_PAYMENT },
-        component: PaymentCreate,
-      },
-      {
-        path: 'payments/:id/view',
-        name: 'payments.view',
-        meta: { ability: abilities.VIEW_PAYMENT },
-        component: PaymentView,
-      },
-
-      // user settings
-      {
-        path: 'user-settings',
-        name: 'user.settings',
-        component: UserSettingsIndex,
-        children: [
-          {
-            path: 'general',
-            name: 'user.settings.general',
-            component: UserSettingsGeneral,
-          },
-          {
-            path: 'profile-photo',
-            name: 'user.settings.profile-photo',
-            component: UserSettingsProfilePhoto,
-          },
-          {
-            path: 'security',
-            name: 'user.settings.security',
-            component: UserSettingsSecurity,
-          },
-        ],
-      },
-
-      //settings
-      {
-        path: 'settings',
-        name: 'settings',
-        component: SettingsIndex,
-        children: [
-          {
-            path: 'company-info',
-            name: 'company.info',
-            meta: { isOwner: true },
-            component: CompanyInfo,
-          },
-          {
-            path: 'preferences',
-            name: 'preferences',
-            meta: { isOwner: true },
-            component: Preferences,
-          },
-          {
-            path: 'customization',
-            name: 'customization',
-            meta: { isOwner: true },
-            component: Customization,
-          },
-          {
-            path: 'notifications',
-            name: 'notifications',
-            meta: { isOwner: true },
-            component: Notifications,
-          },
-          {
-            path: 'roles-settings',
-            name: 'roles.settings',
-            meta: { isOwner: true },
-            component: RolesSettings,
-          },
-          {
-            path: 'exchange-rate-provider',
-            name: 'exchange.rate.provider',
-            meta: { ability: abilities.VIEW_EXCHANGE_RATE },
-            component: ExchangeRateSetting,
-          },
-          {
-            path: 'tax-types',
-            name: 'tax.types',
-            meta: { ability: abilities.VIEW_TAX_TYPE },
-            component: TaxTypes,
-          },
-          {
-            path: 'notes',
-            name: 'notes',
-            meta: { ability: abilities.VIEW_ALL_NOTES },
-            component: NotesSetting,
-          },
-          {
-            path: 'payment-mode',
-            name: 'payment.mode',
-            component: PaymentMode,
-          },
-          {
-            path: 'custom-fields',
-            name: 'custom.fields',
-            meta: { ability: abilities.VIEW_CUSTOM_FIELDS },
-            component: CustomFieldsIndex,
-          },
-          {
-            path: 'expense-category',
-            name: 'expense.category',
-            meta: { ability: abilities.VIEW_EXPENSE },
-            component: ExpenseCategory,
-          },
-          {
-            path: 'mail-configuration',
-            name: 'company.mailconfig',
-            meta: { isOwner: true },
-            component: CompanyMailConfig,
-          },
-        ],
-      },
-
-      // Items
-      {
-        path: 'items',
-        meta: { ability: abilities.VIEW_ITEM },
-        component: ItemsIndex,
-      },
-      {
-        path: 'items/create',
-        name: 'items.create',
-        meta: { ability: abilities.CREATE_ITEM },
-        component: ItemCreate,
-      },
-      {
-        path: 'items/:id/edit',
-        name: 'items.edit',
-        meta: { ability: abilities.EDIT_ITEM },
-        component: ItemCreate,
-      },
-
-      // Expenses
-      {
-        path: 'expenses',
-        meta: { ability: abilities.VIEW_EXPENSE },
-        component: ExpensesIndex,
-      },
-      {
-        path: 'expenses/create',
-        name: 'expenses.create',
-        meta: { ability: abilities.CREATE_EXPENSE },
-        component: ExpenseCreate,
-      },
-      {
-        path: 'expenses/:id/edit',
-        name: 'expenses.edit',
-        meta: { ability: abilities.EDIT_EXPENSE },
-        component: ExpenseCreate,
-      },
-
-      // Members
-      {
-        path: 'members',
-        name: 'members.index',
-        meta: { isOwner: true },
-        component: MemberIndex,
-      },
-
-      // Estimates
-      {
-        path: 'estimates',
-        name: 'estimates.index',
-        meta: { ability: abilities.VIEW_ESTIMATE },
-        component: EstimateIndex,
-      },
-      {
-        path: 'estimates/create',
-        name: 'estimates.create',
-        meta: { ability: abilities.CREATE_ESTIMATE },
-        component: EstimateCreate,
-      },
-      {
-        path: 'estimates/:id/view',
-        name: 'estimates.view',
-        meta: { ability: abilities.VIEW_ESTIMATE },
-        component: EstimateView,
-      },
-      {
-        path: 'estimates/:id/edit',
-        name: 'estimates.edit',
-        meta: { ability: abilities.EDIT_ESTIMATE },
-        component: EstimateCreate,
-      },
-
-      // Invoices
-      {
-        path: 'invoices',
-        name: 'invoices.index',
-        meta: { ability: abilities.VIEW_INVOICE },
-        component: InvoiceIndex,
-      },
-      {
-        path: 'invoices/create',
-        name: 'invoices.create',
-        meta: { ability: abilities.CREATE_INVOICE },
-        component: InvoiceCreate,
-      },
-      {
-        path: 'invoices/:id/view',
-        name: 'invoices.view',
-        meta: { ability: abilities.VIEW_INVOICE },
-        component: InvoiceView,
-      },
-      {
-        path: 'invoices/:id/edit',
-        name: 'invoices.edit',
-        meta: { ability: abilities.EDIT_INVOICE },
-        component: InvoiceCreate,
-      },
-
-      // Recurring Invoices
-      {
-        path: 'recurring-invoices',
-        name: 'recurring-invoices.index',
-        meta: { ability: abilities.VIEW_RECURRING_INVOICE },
-        component: RecurringInvoiceIndex,
-      },
-      {
-        path: 'recurring-invoices/create',
-        name: 'recurring-invoices.create',
-        meta: { ability: abilities.CREATE_RECURRING_INVOICE },
-        component: RecurringInvoiceCreate,
-      },
-      {
-        path: 'recurring-invoices/:id/view',
-        name: 'recurring-invoices.view',
-        meta: { ability: abilities.VIEW_RECURRING_INVOICE },
-        component: RecurringInvoiceView,
-      },
-      {
-        path: 'recurring-invoices/:id/edit',
-        name: 'recurring-invoices.edit',
-        meta: { ability: abilities.EDIT_RECURRING_INVOICE },
-        component: RecurringInvoiceCreate,
-      },
-
-      // Modules
-      {
-        path: 'modules',
-        name: 'modules.index',
-        meta: { isOwner: true },
-        component: ModuleIndex,
-      },
-
-      {
-        path: 'modules/:slug',
-        name: 'modules.view',
-        meta: { isOwner: true },
-        component: ModuleView,
-      },
-
-      // Reports
-      {
-        path: 'reports',
-        meta: { ability: abilities.VIEW_FINANCIAL_REPORT },
-        component: ReportsIndex,
-      },
-
-      // Administration (Super Admin)
-      {
-        path: 'administration/dashboard',
-        name: 'admin.dashboard',
-        meta: { isSuperAdmin: true },
-        component: AdminDashboard,
-      },
-      {
-        path: 'administration/companies',
-        name: 'admin.companies.index',
-        meta: { isSuperAdmin: true },
-        component: AdminCompaniesIndex,
-      },
-      {
-        path: 'administration/companies/:id/edit',
-        name: 'admin.companies.edit',
-        meta: { isSuperAdmin: true },
-        component: AdminCompaniesEdit,
-      },
-      {
-        path: 'administration/users',
-        name: 'admin.users.index',
-        meta: { isSuperAdmin: true },
-        component: AdminUsersIndex,
-      },
-      {
-        path: 'administration/users/:id/edit',
-        name: 'admin.users.edit',
-        meta: { isSuperAdmin: true },
-        component: AdminUsersEdit,
-      },
-      {
-        path: 'administration/settings',
-        name: 'admin.settings',
-        meta: { isSuperAdmin: true },
-        component: AdminSettingsIndex,
-        children: [
-          {
-            path: 'mail-configuration',
-            name: 'admin.settings.mail',
-            component: AdminMailConfig,
-          },
-          {
-            path: 'pdf-generation',
-            name: 'admin.settings.pdf',
-            component: AdminPDFGeneration,
-          },
-          {
-            path: 'backup',
-            name: 'admin.settings.backup',
-            component: AdminBackup,
-          },
-          {
-            path: 'update-app',
-            name: 'admin.settings.update',
-            component: AdminUpdateApp,
-          },
-          {
-            path: 'file-disk',
-            name: 'admin.settings.filedisk',
-            component: AdminFileDisk,
-          },
-        ],
-      },
-    ],
-  },
-  { path: '/:catchAll(.*)', component: NotFoundPage },
-]
diff --git a/resources/scripts/admin/components/CopyInputField.vue b/resources/scripts/admin/components/CopyInputField.vue
deleted file mode 100644
index 7e9512db..00000000
--- a/resources/scripts/admin/components/CopyInputField.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <div
-    class="
-      relative
-      flex
-      px-4
-      py-2
-      rounded-lg
-      bg-surface-muted/40
-      whitespace-nowrap
-      flex-col
-      mt-1
-    "
-  >
-    <span
-      ref="publicUrl"
-      class="
-        pr-10
-        text-sm
-        font-medium
-        text-heading
-        truncate
-        select-all select-color
-      "
-    >
-      {{ token }}
-    </span>
-    <svg
-      v-tooltip="{ content: $t('general.copy_to_clipboard') }"
-      class="
-        absolute
-        right-0
-        h-full
-        inset-y-0
-        cursor-pointer
-        focus:outline-hidden
-        text-primary-500
-      "
-      width="37"
-      viewBox="0 0 37 37"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      @click="copyUrl"
-    >
-      <rect width="37" height="37" rx="10" fill="currentColor" />
-      <path
-        d="M16 10C15.7348 10 15.4804 10.1054 15.2929 10.2929C15.1054 10.4804 15 10.7348 15 11C15 11.2652 15.1054 11.5196 15.2929 11.7071C15.4804 11.8946 15.7348 12 16 12H18C18.2652 12 18.5196 11.8946 18.7071 11.7071C18.8946 11.5196 19 11.2652 19 11C19 10.7348 18.8946 10.4804 18.7071 10.2929C18.5196 10.1054 18.2652 10 18 10H16Z"
-        fill="white"
-      />
-      <path
-        d="M11 13C11 12.4696 11.2107 11.9609 11.5858 11.5858C11.9609 11.2107 12.4696 11 13 11C13 11.7956 13.3161 12.5587 13.8787 13.1213C14.4413 13.6839 15.2044 14 16 14H18C18.7956 14 19.5587 13.6839 20.1213 13.1213C20.6839 12.5587 21 11.7956 21 11C21.5304 11 22.0391 11.2107 22.4142 11.5858C22.7893 11.9609 23 12.4696 23 13V19H18.414L19.707 17.707C19.8892 17.5184 19.99 17.2658 19.9877 17.0036C19.9854 16.7414 19.8802 16.4906 19.6948 16.3052C19.5094 16.1198 19.2586 16.0146 18.9964 16.0123C18.7342 16.01 18.4816 16.1108 18.293 16.293L15.293 19.293C15.1055 19.4805 15.0002 19.7348 15.0002 20C15.0002 20.2652 15.1055 20.5195 15.293 20.707L18.293 23.707C18.4816 23.8892 18.7342 23.99 18.9964 23.9877C19.2586 23.9854 19.5094 23.8802 19.6948 23.6948C19.8802 23.5094 19.9854 23.2586 19.9877 22.9964C19.99 22.7342 19.8892 22.4816 19.707 22.293L18.414 21H23V24C23 24.5304 22.7893 25.0391 22.4142 25.4142C22.0391 25.7893 21.5304 26 21 26H13C12.4696 26 11.9609 25.7893 11.5858 25.4142C11.2107 25.0391 11 24.5304 11 24V13ZM23 19H25C25.2652 19 25.5196 19.1054 25.7071 19.2929C25.8946 19.4804 26 19.7348 26 20C26 20.2652 25.8946 20.5196 25.7071 20.7071C25.5196 20.8946 25.2652 21 25 21H23V19Z"
-        fill="white"
-      />
-    </svg>
-  </div>
-</template>
-
-<script setup>
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { ref } from 'vue'
-const notificationStore = useNotificationStore()
-import { useI18n } from 'vue-i18n'
-const publicUrl = ref('')
-const { t } = useI18n()
-
-const props = defineProps({
-  token: {
-    type: String,
-    default: null,
-    required: true,
-  },
-})
-
-function selectText(element) {
-  let range
-  if (document.selection) {
-    // IE
-    range = document.body.createTextRange()
-    range.moveToElementText(element)
-    range.select()
-  } else if (window.getSelection) {
-    range = document.createRange()
-    range.selectNode(element)
-    window.getSelection().removeAllRanges()
-    window.getSelection().addRange(range)
-  }
-}
-
-function copyUrl() {
-  selectText(publicUrl.value)
-  document.execCommand('copy')
-
-  notificationStore.showNotification({
-    type: 'success',
-    message: t('general.copied_url_clipboard'),
-  })
-}
-</script>
diff --git a/resources/scripts/admin/components/ImpersonationBanner.vue b/resources/scripts/admin/components/ImpersonationBanner.vue
deleted file mode 100644
index 3aaa7c5c..00000000
--- a/resources/scripts/admin/components/ImpersonationBanner.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div
-    v-if="isImpersonating"
-    class="fixed top-0 left-0 right-0 z-50 flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-orange-600"
-  >
-    <BaseIcon name="ExclamationTriangleIcon" class="w-4 h-4 mr-2" />
-    <span>{{ $t('administration.users.impersonating_banner') }}</span>
-    <button
-      class="ml-4 px-3 py-1 text-xs font-semibold text-orange-600 bg-white rounded hover:bg-orange-50"
-      :disabled="isStopping"
-      @click="stopImpersonating"
-    >
-      {{ $t('administration.users.stop_impersonating') }}
-    </button>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-import Ls from '@/scripts/services/ls.js'
-import { useAdministrationStore } from '@/scripts/admin/stores/administration'
-
-const administrationStore = useAdministrationStore()
-let isStopping = ref(false)
-
-const isImpersonating = computed(() => {
-  return Ls.get('admin.impersonating') === 'true'
-})
-
-async function stopImpersonating() {
-  isStopping.value = true
-
-  try {
-    await administrationStore.stopImpersonating()
-  } catch {
-    // Token already cleaned up in store action
-  }
-
-  window.location.href = '/admin/administration/users'
-}
-</script>
diff --git a/resources/scripts/admin/components/SelectNotePopup.vue b/resources/scripts/admin/components/SelectNotePopup.vue
deleted file mode 100644
index 0cf7ed39..00000000
--- a/resources/scripts/admin/components/SelectNotePopup.vue
+++ /dev/null
@@ -1,209 +0,0 @@
-<template>
-  <NoteModal />
-  <div class="w-full">
-    <Popover v-slot="{ isOpen }">
-      <PopoverButton
-        v-if="userStore.hasAbilities(abilities.VIEW_NOTE)"
-        :class="isOpen ? '' : ''"
-        class="
-          flex
-          items-center
-          z-10
-          font-medium
-          text-primary-400
-          focus:outline-hidden focus:border-none
-        "
-        @click="fetchInitialData"
-      >
-        <BaseIcon
-          name="PlusIcon"
-          class="w-4 h-4 font-medium text-primary-400"
-        />
-        {{ $t('general.insert_note') }}
-      </PopoverButton>
-
-      <!-- Note Select Popup -->
-      <transition
-        enter-active-class="transition duration-200 ease-out"
-        enter-from-class="translate-y-1 opacity-0"
-        enter-to-class="translate-y-0 opacity-100"
-        leave-active-class="transition duration-150 ease-in"
-        leave-from-class="translate-y-0 opacity-100"
-        leave-to-class="translate-y-1 opacity-0"
-      >
-        <PopoverPanel
-          v-slot="{ close }"
-          class="
-            absolute
-            z-20
-            px-4
-            mt-3
-            sm:px-0
-            w-screen
-            max-w-full
-            left-0
-            top-3
-          "
-        >
-          <div
-            class="
-              overflow-hidden
-              rounded-md
-              shadow-lg
-              ring-1 ring-black/5
-            "
-          >
-            <div class="relative grid bg-surface">
-              <div class="relative p-4">
-                <BaseInput
-                  v-model="textSearch"
-                  :placeholder="$t('general.search')"
-                  type="text"
-                  class="text-heading"
-                >
-                </BaseInput>
-              </div>
-
-              <div
-                v-if="filteredNotes.length > 0"
-                class="relative flex flex-col overflow-auto list max-h-36"
-              >
-                <div
-                  v-for="(note, index) in filteredNotes"
-                  :key="index"
-                  tabindex="2"
-                  class="
-                    px-6
-                    py-4
-                    border-b border-line-default border-solid
-                    cursor-pointer
-                    hover:bg-surface-tertiary hover:cursor-pointer
-                    last:border-b-0
-                  "
-                  @click="selectNote(index, close)"
-                >
-                  <div class="flex justify-between px-2">
-                    <label
-                      class="
-                        m-0
-                        text-base
-                        font-semibold
-                        leading-tight
-                        text-body
-                        cursor-pointer
-                      "
-                    >
-                      {{ note.name }}
-                    </label>
-                  </div>
-                </div>
-              </div>
-              <div v-else class="flex justify-center p-5 text-subtle">
-                <label class="text-base text-muted">
-                  {{ $t('general.no_note_found') }}
-                </label>
-              </div>
-            </div>
-            <button
-              v-if="userStore.hasAbilities(abilities.MANAGE_NOTE)"
-              type="button"
-              class="
-                h-10
-                flex
-                items-center
-                justify-center
-                w-full
-                px-2
-                py-3
-                bg-surface-muted
-                border-none
-                outline-hidden
-              "
-              @click="openNoteModal"
-            >
-              <BaseIcon name="CheckCircleIcon" class="text-primary-400" />
-              <label
-                class="
-                  m-0
-                  ml-3
-                  text-sm
-                  leading-none
-                  cursor-pointer
-                  font-base
-                  text-primary-400
-                "
-              >
-                {{ $t('settings.customization.notes.add_new_note') }}
-              </label>
-            </button>
-          </div>
-        </PopoverPanel>
-      </transition>
-    </Popover>
-  </div>
-</template>
-
-<script setup>
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-import { computed, ref, inject } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useNotesStore } from '@/scripts/admin/stores/note'
-import { useModalStore } from '@/scripts/stores/modal'
-import NoteModal from '@/scripts/admin/components/modal-components/NoteModal.vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  type: {
-    type: String,
-    default: null,
-  },
-})
-
-const emit = defineEmits(['select'])
-
-const table = ref(null)
-const { t } = useI18n()
-const textSearch = ref(null)
-
-const modalStore = useModalStore()
-const noteStore = useNotesStore()
-const userStore = useUserStore()
-
-const filteredNotes = computed(() => {
-  if (textSearch.value) {
-    return noteStore.notes.filter(function (el) {
-      return (
-        el.name.toLowerCase().indexOf(textSearch.value.toLowerCase()) !== -1
-      )
-    })
-  } else {
-    return noteStore.notes
-  }
-})
-
-async function fetchInitialData() {
-  await noteStore.fetchNotes({
-    filter: {},
-    orderByField: '',
-    orderBy: '',
-    type: props.type ? props.type : '',
-  })
-}
-
-function selectNote(data, close) {
-  emit('select', { ...noteStore.notes[data] })
-
-  textSearch.value = null
-  close()
-}
-
-function openNoteModal() {
-  modalStore.openModal({
-    title: t('settings.customization.notes.add_note'),
-    componentName: 'NoteModal',
-    size: 'lg',
-    data: props.type,
-  })
-}
-</script>
diff --git a/resources/scripts/admin/components/charts/LineChart.vue b/resources/scripts/admin/components/charts/LineChart.vue
deleted file mode 100644
index 0b6026f6..00000000
--- a/resources/scripts/admin/components/charts/LineChart.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-<template>
-  <div class="graph-container h-[300px]">
-    <canvas id="graph" ref="graph" />
-  </div>
-</template>
-
-<script setup>
-import { Chart } from 'chart.js/auto'
-import { ref, reactive, computed, onMounted, watchEffect, inject } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const utils = inject('utils')
-
-const props = defineProps({
-  labels: {
-    type: Array,
-    require: true,
-    default: Array,
-  },
-  values: {
-    type: Array,
-    require: true,
-    default: Array,
-  },
-  invoices: {
-    type: Array,
-    require: true,
-    default: Array,
-  },
-  expenses: {
-    type: Array,
-    require: true,
-    default: Array,
-  },
-  receipts: {
-    type: Array,
-    require: true,
-    default: Array,
-  },
-  income: {
-    type: Array,
-    require: true,
-    default: Array,
-  },
-})
-
-let myLineChart = null
-const graph = ref(null)
-const companyStore = useCompanyStore()
-const defaultCurrency = computed(() => {
-  return companyStore.selectedCompanyCurrency
-})
-
-watchEffect(() => {
-  if (props.labels) {
-    if (myLineChart) {
-      myLineChart.reset()
-      update()
-    }
-  }
-})
-
-onMounted(() => {
-  let context = graph.value.getContext('2d')
-  const style = getComputedStyle(document.documentElement)
-  const gridColor = style.getPropertyValue('--color-line-light').trim() || 'rgba(0,0,0,0.1)'
-  const tickColor = style.getPropertyValue('--color-muted').trim() || '#6b7280'
-
-  let options = reactive({
-    responsive: true,
-    maintainAspectRatio: false,
-    scales: {
-      x: {
-        grid: { color: gridColor },
-        ticks: { color: tickColor },
-      },
-      y: {
-        grid: { color: gridColor },
-        ticks: { color: tickColor },
-      },
-    },
-    plugins: {
-      tooltip: {
-        enabled: true,
-        callbacks: {
-          label: function (context) {
-            return utils.formatMoney(
-              Math.round(context.parsed.y * 100),
-              defaultCurrency.value
-            )
-          },
-        },
-      },
-      legend: {
-        display: false,
-      },
-    },
-  })
-
-  let data = reactive({
-    labels: props.labels,
-    datasets: [
-      {
-        label: 'Sales',
-        fill: false,
-        tension: 0.3,
-        backgroundColor: 'rgba(230, 254, 249)',
-        borderColor: tickColor,
-        borderCapStyle: 'butt',
-        borderDash: [],
-        borderDashOffset: 0.0,
-        borderJoinStyle: 'miter',
-        pointBorderColor: tickColor,
-        pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
-        pointBorderWidth: 1,
-        pointHoverRadius: 5,
-        pointHoverBackgroundColor: tickColor,
-        pointHoverBorderColor: 'rgba(220,220,220,1)',
-        pointHoverBorderWidth: 2,
-        pointRadius: 4,
-        pointHitRadius: 10,
-        data: props.invoices.map((invoice) => invoice / 100),
-      },
-      {
-        label: 'Receipts',
-        fill: false,
-        tension: 0.3,
-        backgroundColor: 'rgba(230, 254, 249)',
-        borderColor: 'rgb(2, 201, 156)',
-        borderCapStyle: 'butt',
-        borderDash: [],
-        borderDashOffset: 0.0,
-        borderJoinStyle: 'miter',
-        pointBorderColor: 'rgb(2, 201, 156)',
-        pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
-        pointBorderWidth: 1,
-        pointHoverRadius: 5,
-        pointHoverBackgroundColor: 'rgb(2, 201, 156)',
-        pointHoverBorderColor: 'rgba(220,220,220,1)',
-        pointHoverBorderWidth: 2,
-        pointRadius: 4,
-        pointHitRadius: 10,
-        data: props.receipts.map((receipt) => receipt / 100),
-      },
-      {
-        label: 'Expenses',
-        fill: false,
-        tension: 0.3,
-        backgroundColor: 'rgba(245, 235, 242)',
-        borderColor: 'rgb(255,0,0)',
-        borderCapStyle: 'butt',
-        borderDash: [],
-        borderDashOffset: 0.0,
-        borderJoinStyle: 'miter',
-        pointBorderColor: 'rgb(255,0,0)',
-        pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
-        pointBorderWidth: 1,
-        pointHoverRadius: 5,
-        pointHoverBackgroundColor: 'rgb(255,0,0)',
-        pointHoverBorderColor: 'rgba(220,220,220,1)',
-        pointHoverBorderWidth: 2,
-        pointRadius: 4,
-        pointHitRadius: 10,
-        data: props.expenses.map((expense) => expense / 100),
-      },
-      {
-        label: 'Net Income',
-        fill: false,
-        tension: 0.3,
-        backgroundColor: 'rgba(236, 235, 249)',
-        borderColor: 'rgba(88, 81, 216, 1)',
-        borderCapStyle: 'butt',
-        borderDash: [],
-        borderDashOffset: 0.0,
-        borderJoinStyle: 'miter',
-        pointBorderColor: 'rgba(88, 81, 216, 1)',
-        pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
-        pointBorderWidth: 1,
-        pointHoverRadius: 5,
-        pointHoverBackgroundColor: 'rgba(88, 81, 216, 1)',
-        pointHoverBorderColor: 'rgba(220,220,220,1)',
-        pointHoverBorderWidth: 2,
-        pointRadius: 4,
-        pointHitRadius: 10,
-        data: props.income.map((_i) => _i / 100),
-      },
-    ],
-  })
-
-  myLineChart = new Chart(context, {
-    type: 'line',
-    data: data,
-    options: options,
-  })
-})
-
-function update() {
-  myLineChart.data.labels = props.labels
-  myLineChart.data.datasets[0].data = props.invoices.map(
-    (invoice) => invoice / 100
-  )
-  myLineChart.data.datasets[1].data = props.receipts.map(
-    (receipt) => receipt / 100
-  )
-  myLineChart.data.datasets[2].data = props.expenses.map(
-    (expense) => expense / 100
-  )
-  myLineChart.data.datasets[3].data = props.income.map((_i) => _i / 100)
-  myLineChart.update('none')
-}
-</script>
diff --git a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue b/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
deleted file mode 100644
index 9b059f90..00000000
--- a/resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-  <BaseCard>
-    <h6 class="font-medium text-lg text-left">
-      {{ $t('settings.exchange_rate.title') }}
-    </h6>
-    <p class="mt-2 text-sm leading-snug text-muted" style="max-width: 680px">
-      {{
-        $t('settings.exchange_rate.description', {
-          currency: companyStore.selectedCompanyCurrency.name,
-        })
-      }}
-    </p>
-
-    <form id="bulk-update-form" action="" @submit.prevent="submitBulkUpdate">
-      <ValidateEach
-        v-for="(c, i) in exchangeRateStore.bulkCurrencies"
-        :key="i"
-        :state="c"
-        :rules="currencyArrayRules"
-      >
-        <template #default="{ v }">
-          <BaseInputGroup
-            class="my-5"
-            :label="`${c.code} to ${companyStore.selectedCompanyCurrency.code}`"
-            :error="
-              v.exchange_rate.$error && v.exchange_rate.$errors[0].$message
-            "
-            required
-          >
-            <BaseInput
-              v-model="c.exchange_rate"
-              :addon="`1 ${c.code} =`"
-              :invalid="v.exchange_rate.$error"
-              @input="v.exchange_rate.$touch()"
-            >
-              <template #right>
-                <span class="text-muted sm:text-sm">
-                  {{ companyStore.selectedCompanyCurrency.code }}
-                </span>
-              </template>
-            </BaseInput>
-            <span class="text-subtle text-xs mt-2 font-light">
-              {{
-                $t('settings.exchange_rate.exchange_help_text', {
-                  currency: c.code,
-                  baseCurrency: companyStore.selectedCompanyCurrency.code,
-                })
-              }}
-            </span>
-          </BaseInputGroup>
-        </template>
-      </ValidateEach>
-    </form>
-
-    <template #footer>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-        "
-      >
-        <BaseButton :loading="isSaving" variant="primary" type="submit" form="bulk-update-form">
-          {{ $t('general.save') }}
-        </BaseButton>
-      </div>
-    </template>
-  </BaseCard>
-</template>
-
-<script setup>
-import { useExchangeRateStore } from '@/scripts/admin/stores/exchange-rate'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useRoute } from 'vue-router'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import useVuelidate from '@vuelidate/core'
-import { required, helpers, numeric, decimal } from '@vuelidate/validators'
-import { ValidateEach } from '@vuelidate/components'
-
-const exchangeRateStore = useExchangeRateStore()
-const notificationStore = useNotificationStore()
-const companyStore = useCompanyStore()
-
-const { t, tm } = useI18n()
-let isSaving = ref(false)
-let isLoading = ref(false)
-
-const currencyArrayRules = {
-  exchange_rate: {
-    required: helpers.withMessage(t('validation.required'), required),
-    decimal: helpers.withMessage(t('validation.valid_exchange_rate'), decimal),
-  },
-}
-const v = useVuelidate()
-
-const emit = defineEmits(['update'])
-
-async function submitBulkUpdate() {
-  v.value.$touch()
-  if (v.value.$invalid) {
-    return true
-  }
-  isSaving.value = true
-  let data = exchangeRateStore.bulkCurrencies.map((_c) => {
-    return {
-      id: _c.id,
-      exchange_rate: _c.exchange_rate,
-    }
-  })
-  let res = await exchangeRateStore.updateBulkExchangeRate({ currencies: data })
-  if (res.data.success) {
-    emit('update', res.data.success)
-  }
-  isSaving.value = false
-}
-</script>
diff --git a/resources/scripts/admin/components/custom-fields/CreateCustomFields.vue b/resources/scripts/admin/components/custom-fields/CreateCustomFields.vue
deleted file mode 100644
index 70c9f059..00000000
--- a/resources/scripts/admin/components/custom-fields/CreateCustomFields.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-  <div
-    v-if="
-      store[storeProp] && store[storeProp].customFields.length > 0 && !isLoading
-    "
-  >
-    <BaseInputGrid :layout="gridLayout">
-      <SingleField
-        v-for="(field, index) in store[storeProp].customFields"
-        :key="field.id"
-        :custom-field-scope="customFieldScope"
-        :store="store"
-        :store-prop="storeProp"
-        :index="index"
-        :field="field"
-      />
-    </BaseInputGrid>
-  </div>
-</template>
-
-<script setup>
-import moment from 'moment'
-import lodash from 'lodash'
-import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
-import { watch } from 'vue'
-import SingleField from './CreateCustomFieldsSingle.vue'
-
-const customFieldStore = useCustomFieldStore()
-
-const props = defineProps({
-  store: {
-    type: Object,
-    required: true,
-  },
-  storeProp: {
-    type: String,
-    required: true,
-  },
-  isEdit: {
-    type: Boolean,
-    default: false,
-  },
-  type: {
-    type: String,
-    default: null,
-  },
-  gridLayout: {
-    type: String,
-    default: 'two-column',
-  },
-  isLoading: {
-    type: Boolean,
-    default: null,
-  },
-  customFieldScope: {
-    type: String,
-    required: true,
-  },
-})
-
-getInitialCustomFields()
-
-function mergeExistingValues() {
-  if (props.isEdit) {
-    props.store[props.storeProp].fields.forEach((field) => {
-      const existingIndex = props.store[props.storeProp].customFields.findIndex(
-        (f) => f.id === field.custom_field_id
-      )
-
-      if (existingIndex > -1) {
-        let value = field.default_answer
-
-        if (value && field.custom_field.type === 'DateTime') {
-          value = moment(field.default_answer, 'YYYY-MM-DD HH:mm:ss').format(
-            'YYYY-MM-DD HH:mm'
-          )
-        }
-
-        props.store[props.storeProp].customFields[existingIndex] = {
-          ...field,
-          id: field.custom_field_id,
-          value: value,
-          label: field.custom_field.label,
-          options: field.custom_field.options,
-          is_required: field.custom_field.is_required,
-          placeholder: field.custom_field.placeholder,
-          order: field.custom_field.order,
-        }
-      }
-    })
-  }
-}
-
-async function getInitialCustomFields() {
-  const res = await customFieldStore.fetchCustomFields({
-    type: props.type,
-    limit: 'all',
-  })
-
-  let data = res.data.data
-
-  data.map((d) => (d.value = d.default_answer))
-
-  props.store[props.storeProp].customFields = lodash.sortBy(
-    data,
-    (_cf) => _cf.order
-  )
-
-  mergeExistingValues()
-}
-
-watch(
-  () => props.store[props.storeProp].fields,
-  (val) => {
-    mergeExistingValues()
-  }
-)
-</script>
diff --git a/resources/scripts/admin/components/custom-fields/CreateCustomFieldsSingle.vue b/resources/scripts/admin/components/custom-fields/CreateCustomFieldsSingle.vue
deleted file mode 100644
index 8b2320e6..00000000
--- a/resources/scripts/admin/components/custom-fields/CreateCustomFieldsSingle.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <BaseInputGroup
-    :label="field.label"
-    :required="field.is_required ? true : false"
-    :error="v$.value.$error && v$.value.$errors[0].$message"
-  >
-    <component
-      :is="getTypeComponent"
-      v-model="field.value"
-      :options="field.options"
-      :invalid="v$.value.$error"
-      :placeholder="field.placeholder"
-    />
-  </BaseInputGroup>
-</template>
-
-<script setup>
-import { defineAsyncComponent, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { helpers, requiredIf } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-
-const props = defineProps({
-  field: {
-    type: Object,
-    required: true,
-  },
-  customFieldScope: {
-    type: String,
-    required: true,
-  },
-  index: {
-    type: Number,
-    required: true,
-  },
-  store: {
-    type: Object,
-    required: true,
-  },
-  storeProp: {
-    type: String,
-    required: true,
-  },
-})
-
-const { t } = useI18n()
-
-const rules = {
-  value: {
-    required: helpers.withMessage(
-      t('validation.required'),
-      requiredIf(props.field.is_required)
-    ),
-  },
-}
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => props.field),
-  { $scope: props.customFieldScope }
-)
-
-const getTypeComponent = computed(() => {
-  if (props.field.type) {
-    return defineAsyncComponent(() =>
-      import(`./types/${props.field.type}Type.vue`)
-    )
-  }
-
-  return false
-})
-</script>
diff --git a/resources/scripts/admin/components/custom-fields/types/DateTimeType.vue b/resources/scripts/admin/components/custom-fields/types/DateTimeType.vue
deleted file mode 100644
index f29a01ab..00000000
--- a/resources/scripts/admin/components/custom-fields/types/DateTimeType.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <BaseDatePicker v-model="date" enable-time />
-</template>
-
-<script setup>
-import moment from 'moment'
-import { computed } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: moment().format('YYYY-MM-DD hh:MM'),
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const date = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/custom-fields/types/DateType.vue b/resources/scripts/admin/components/custom-fields/types/DateType.vue
deleted file mode 100644
index f1954119..00000000
--- a/resources/scripts/admin/components/custom-fields/types/DateType.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <BaseDatePicker v-model="date" />
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import moment from 'moment'
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Date],
-    default: moment().format('YYYY-MM-DD'),
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const date = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/custom-fields/types/DropdownType.vue b/resources/scripts/admin/components/custom-fields/types/DropdownType.vue
deleted file mode 100644
index 4309ef4d..00000000
--- a/resources/scripts/admin/components/custom-fields/types/DropdownType.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <BaseMultiselect
-    v-model="inputValue"
-    :options="options"
-    :label="label"
-    :value-prop="valueProp"
-    :object="object"
-  />
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Object, Number],
-    default: null,
-  },
-  options: {
-    type: Array,
-    default: () => [],
-  },
-  valueProp: {
-    type: String,
-    default: 'name',
-  },
-  label: {
-    type: String,
-    default: 'name',
-  },
-  object: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const inputValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/custom-fields/types/InputType.vue b/resources/scripts/admin/components/custom-fields/types/InputType.vue
deleted file mode 100644
index 026e4f3a..00000000
--- a/resources/scripts/admin/components/custom-fields/types/InputType.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <BaseInput v-model="inputValue" type="text" />
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: null,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const inputValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/custom-fields/types/NumberType.vue b/resources/scripts/admin/components/custom-fields/types/NumberType.vue
deleted file mode 100644
index 5c220c5f..00000000
--- a/resources/scripts/admin/components/custom-fields/types/NumberType.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <BaseInput v-model="inputValue" type="number" />
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: null,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const inputValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/custom-fields/types/PhoneType.vue b/resources/scripts/admin/components/custom-fields/types/PhoneType.vue
deleted file mode 100644
index 5d3c20b8..00000000
--- a/resources/scripts/admin/components/custom-fields/types/PhoneType.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <BaseInput v-model="inputValue" type="tel" />
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: null,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const inputValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/custom-fields/types/SwitchType.vue b/resources/scripts/admin/components/custom-fields/types/SwitchType.vue
deleted file mode 100644
index 34c031ad..00000000
--- a/resources/scripts/admin/components/custom-fields/types/SwitchType.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <BaseSwitch v-model="inputValue" />
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number, Boolean],
-    default: null,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const inputValue = computed({
-  get: () => props.modelValue === 1,
-  set: (value) => {
-    const intVal = value ? 1 : 0
-
-    emit('update:modelValue', intVal)
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/custom-fields/types/TextAreaType.vue b/resources/scripts/admin/components/custom-fields/types/TextAreaType.vue
deleted file mode 100644
index 51dc62ba..00000000
--- a/resources/scripts/admin/components/custom-fields/types/TextAreaType.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <BaseTextarea v-model="inputValue" :rows="rows" :name="inputName" />
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: null,
-  },
-  rows: {
-    type: String,
-    default: '2',
-  },
-  inputName: {
-    type: String,
-    default: 'description',
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const inputValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/custom-fields/types/TimeType.vue b/resources/scripts/admin/components/custom-fields/types/TimeType.vue
deleted file mode 100644
index d8c61702..00000000
--- a/resources/scripts/admin/components/custom-fields/types/TimeType.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <BaseTimePicker v-model="date" />
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import moment from 'moment'
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Date, Object],
-    default: moment().format('YYYY-MM-DD'),
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const date = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/custom-fields/types/UrlType.vue b/resources/scripts/admin/components/custom-fields/types/UrlType.vue
deleted file mode 100644
index 56aeba35..00000000
--- a/resources/scripts/admin/components/custom-fields/types/UrlType.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <BaseInput v-model="inputValue" type="url" />
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: null,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const inputValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/AdminCompanyIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/AdminCompanyIndexDropdown.vue
deleted file mode 100644
index 1afadbed..00000000
--- a/resources/scripts/admin/components/dropdowns/AdminCompanyIndexDropdown.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <router-link :to="`/admin/administration/companies/${row.id}/edit`">
-      <BaseDropdownItem>
-        <BaseIcon
-          name="PencilIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.edit') }}
-      </BaseDropdownItem>
-    </router-link>
-  </BaseDropdown>
-</template>
-
-<script setup>
-defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: null,
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/AdminUserIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/AdminUserIndexDropdown.vue
deleted file mode 100644
index ffcfc8b1..00000000
--- a/resources/scripts/admin/components/dropdowns/AdminUserIndexDropdown.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <router-link :to="`/admin/administration/users/${row.id}/edit`">
-      <BaseDropdownItem>
-        <BaseIcon
-          name="PencilIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.edit') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <BaseDropdownItem
-      v-if="row.id !== userStore.currentUser?.id"
-      @click="onImpersonate"
-    >
-      <BaseIcon
-        name="ArrowRightEndOnRectangleIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('administration.users.impersonate') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useAdministrationStore } from '@/scripts/admin/stores/administration'
-import { useDialogStore } from '@/scripts/stores/dialog'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: null,
-  },
-})
-
-const userStore = useUserStore()
-const administrationStore = useAdministrationStore()
-const dialogStore = useDialogStore()
-const { t } = useI18n()
-
-function onImpersonate() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('administration.users.impersonate_confirm', {
-        name: props.row.name,
-      }),
-      yesLabel: t('administration.users.impersonate'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      size: 'lg',
-      hideNoButton: false,
-    })
-    .then((confirmed) => {
-      if (confirmed) {
-        administrationStore.impersonateUser(props.row.id).then(() => {
-          window.location.href = '/admin/dashboard'
-        })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
deleted file mode 100644
index bdd76d0b..00000000
--- a/resources/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- edit customField  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.EDIT_CUSTOM_FIELDS)"
-      @click="editCustomField(row.id)"
-    >
-      <BaseIcon
-        name="PencilIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.edit') }}
-    </BaseDropdownItem>
-
-    <!-- delete customField  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.DELETE_CUSTOM_FIELDS)"
-      @click="removeCustomField(row.id)"
-    >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useI18n } from 'vue-i18n'
-import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
-import { useRoute, useRouter } from 'vue-router'
-import { inject } from 'vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useModalStore } from '@/scripts/stores/modal'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: null,
-  },
-})
-
-const dialogStore = useDialogStore()
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-const customFieldStore = useCustomFieldStore()
-const route = useRoute()
-const userStore = useUserStore()
-const modalStore = useModalStore()
-
-const $utils = inject('utils')
-
-async function editCustomField(id) {
-  await customFieldStore.fetchCustomField(id)
-
-  modalStore.openModal({
-    title: t('settings.custom_fields.edit_custom_field'),
-    componentName: 'CustomFieldModal',
-    size: 'sm',
-    data: id,
-    refreshData: props.loadData,
-  })
-}
-
-async function removeCustomField(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('settings.custom_fields.custom_field_confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        await customFieldStore.deleteCustomFields(id)
-        props.loadData && props.loadData()
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
deleted file mode 100644
index baade448..00000000
--- a/resources/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <BaseDropdown :content-loading="customerStore.isFetchingViewData">
-    <template #activator>
-      <BaseButton v-if="route.name === 'customers.view'" variant="primary">
-        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- Edit Customer  -->
-    <router-link
-      v-if="userStore.hasAbilities(abilities.EDIT_CUSTOMER)"
-      :to="`/admin/customers/${row.id}/edit`"
-    >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="PencilIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.edit') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- View Customer -->
-    <router-link
-      v-if="
-        route.name !== 'customers.view' &&
-        userStore.hasAbilities(abilities.VIEW_CUSTOMER)
-      "
-      :to="`customers/${row.id}/view`"
-    >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="EyeIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.view') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- Delete Customer  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.DELETE_CUSTOMER)"
-      @click="removeCustomer(row.id)"
-    >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { inject } from 'vue'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: () => {},
-  },
-})
-
-const customerStore = useCustomerStore()
-const notificationStore = useNotificationStore()
-const dialogStore = useDialogStore()
-const userStore = useUserStore()
-
-const { t } = useI18n()
-const route = useRoute()
-const router = useRouter()
-const utils = inject('utils')
-
-function removeCustomer(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('customers.confirm_delete', 1),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((res) => {
-      if (res) {
-        customerStore.deleteCustomer({ ids: [id] }).then((response) => {
-          if (response.data.success) {
-            props.loadData && props.loadData()
-            return true
-          }
-        })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
deleted file mode 100644
index 6ee39ab2..00000000
--- a/resources/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue
+++ /dev/null
@@ -1,369 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseButton v-if="route.name === 'estimates.view'" variant="primary">
-        <BaseIcon name="EllipsisHorizontalIcon" class="text-white" />
-      </BaseButton>
-      <BaseIcon v-else class="text-muted" name="EllipsisHorizontalIcon" />
-    </template>
-
-    <!-- Copy PDF url  -->
-    <BaseDropdownItem
-      v-if="route.name === 'estimates.view'"
-      @click="copyPdfUrl"
-    >
-      <BaseIcon
-        name="LinkIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.copy_pdf_url') }}
-    </BaseDropdownItem>
-
-    <!-- Edit Estimate -->
-    <router-link
-      v-if="userStore.hasAbilities(abilities.EDIT_ESTIMATE)"
-      :to="`/admin/estimates/${row.id}/edit`"
-    >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="PencilIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.edit') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- Delete Estimate  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.DELETE_ESTIMATE)"
-      @click="removeEstimate(row.id)"
-    >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-
-    <!-- View Estimate -->
-    <router-link
-      v-if="
-        route.name !== 'estimates.view' &&
-        userStore.hasAbilities(abilities.VIEW_ESTIMATE)
-      "
-      :to="`estimates/${row.id}/view`"
-    >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="EyeIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.view') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- Clone Estimate into new estimate  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
-      @click="cloneEstimateData(row)"
-    >
-      <BaseIcon
-        name="DocumentTextIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('estimates.clone_estimate') }}
-    </BaseDropdownItem>
-
-    <!-- Convert into Invoice  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
-      @click="convertInToinvoice(row.id)"
-    >
-      <BaseIcon
-        name="DocumentTextIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('estimates.convert_to_invoice') }}
-    </BaseDropdownItem>
-
-    <!-- Mark as sent  -->
-    <BaseDropdownItem
-      v-if="
-        row.status !== 'SENT' &&
-        route.name !== 'estimates.view' &&
-        userStore.hasAbilities(abilities.SEND_ESTIMATE)
-      "
-      @click="onMarkAsSent(row.id)"
-    >
-      <BaseIcon
-        name="CheckCircleIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('estimates.mark_as_sent') }}
-    </BaseDropdownItem>
-
-    <!-- Send Estimate  -->
-    <BaseDropdownItem
-      v-if="
-        row.status !== 'SENT' &&
-        route.name !== 'estimates.view' &&
-        userStore.hasAbilities(abilities.SEND_ESTIMATE)
-      "
-      @click="sendEstimate(row)"
-    >
-      <BaseIcon
-        name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('estimates.send_estimate') }}
-    </BaseDropdownItem>
-
-    <!-- Resend Estimate -->
-    <BaseDropdownItem v-if="canResendEstimate(row)" @click="sendEstimate(row)">
-      <BaseIcon
-        name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('estimates.resend_estimate') }}
-    </BaseDropdownItem>
-
-    <!-- Mark as Accepted -->
-    <BaseDropdownItem
-      v-if="
-        row.status !== 'ACCEPTED' &&
-        userStore.hasAbilities(abilities.EDIT_ESTIMATE)
-      "
-      @click="onMarkAsAccepted(row.id)"
-    >
-      <BaseIcon
-        name="CheckCircleIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('estimates.mark_as_accepted') }}
-    </BaseDropdownItem>
-
-    <!-- Mark as Rejected  -->
-    <BaseDropdownItem
-      v-if="
-        row.status !== 'REJECTED' &&
-        userStore.hasAbilities(abilities.EDIT_ESTIMATE)
-      "
-      @click="onMarkAsRejected(row.id)"
-    >
-      <BaseIcon
-        name="XCircleIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('estimates.mark_as_rejected') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { inject } from 'vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-
-  table: {
-    type: Object,
-    default: null,
-  },
-})
-
-const utils = inject('utils')
-
-const estimateStore = useEstimateStore()
-const modalStore = useModalStore()
-const notificationStore = useNotificationStore()
-const dialogStore = useDialogStore()
-const userStore = useUserStore()
-
-const { t } = useI18n()
-const route = useRoute()
-const router = useRouter()
-
-async function removeEstimate(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('estimates.confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((res) => {
-      id = id
-      if (res) {
-        estimateStore.deleteEstimate({ ids: [id] }).then((res) => {
-          if (res) {
-            props.table && props.table.refresh()
-
-            if (res.data) {
-              router.push('/admin/estimates')
-            }
-            estimateStore.$patch((state) => {
-              state.selectedEstimates = []
-              state.selectAllField = false
-            })
-          }
-        })
-      }
-    })
-}
-
-function convertInToinvoice(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('estimates.confirm_conversion'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'primary',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((res) => {
-      if (res) {
-        estimateStore.convertToInvoice(id).then((res) => {
-          if (res.data) {
-            router.push(`/admin/invoices/${res.data.data.id}/edit`)
-          }
-        })
-      }
-    })
-}
-
-async function onMarkAsSent(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('estimates.confirm_mark_as_sent'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'primary',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((response) => {
-      const data = {
-        id: id,
-        status: 'SENT',
-      }
-      if (response) {
-        estimateStore.markAsSent(data).then((response) => {
-          props.table && props.table.refresh()
-        })
-      }
-    })
-}
-
-function canResendEstimate(row) {
-  return (
-    (row.status == 'SENT' || row.status == 'VIEWED') &&
-    route.name !== 'estimates.view' &&
-    userStore.hasAbilities(abilities.SEND_ESTIMATE)
-  )
-}
-
-async function sendEstimate(estimate) {
-  modalStore.openModal({
-    title: t('estimates.send_estimate'),
-    componentName: 'SendEstimateModal',
-    id: estimate.id,
-    data: estimate,
-    variant: 'lg',
-  })
-}
-
-async function onMarkAsAccepted(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('estimates.confirm_mark_as_accepted'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'primary',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((response) => {
-      const data = {
-        id: id,
-        status: 'ACCEPTED',
-      }
-      if (response) {
-        estimateStore.markAsAccepted(data).then((response) => {
-          props.table && props.table.refresh()
-        })
-      }
-    })
-}
-
-async function onMarkAsRejected(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('estimates.confirm_mark_as_rejected'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'primary',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((response) => {
-      const data = {
-        id: id,
-        status: 'REJECTED',
-      }
-      if (response) {
-        estimateStore.markAsRejected(data).then((response) => {
-          props.table && props.table.refresh()
-        })
-      }
-    })
-}
-
-function copyPdfUrl() {
-  let pdfUrl = `${window.location.origin}/estimates/pdf/${props.row.unique_hash}`
-
-  let response = utils.copyTextToClipboard(pdfUrl)
-  notificationStore.showNotification({
-    type: 'success',
-    message: t('general.copied_pdf_url_clipboard'),
-  })
-}
-
-async function cloneEstimateData(data) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('estimates.confirm_clone'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'primary',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((res) => {
-      if (res) {
-        estimateStore.cloneEstimate(data).then((res) => {
-          router.push(`/admin/estimates/${res.data.data.id}/edit`)
-        })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
deleted file mode 100644
index d24887f9..00000000
--- a/resources/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseButton
-        v-if="route.name === 'expenseCategorys.view'"
-        variant="primary"
-      >
-        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- edit expenseCategory  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.EDIT_EXPENSE)"
-      @click="editExpenseCategory(row.id)"
-    >
-      <BaseIcon
-        name="PencilIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.edit') }}
-    </BaseDropdownItem>
-
-    <!-- delete expenseCategory  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
-      @click="removeExpenseCategory(row.id)"
-    >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useI18n } from 'vue-i18n'
-import { useCategoryStore } from '@/scripts/admin/stores/category'
-import { useRoute, useRouter } from 'vue-router'
-import { inject } from 'vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useModalStore } from '@/scripts/stores/modal'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: null,
-  },
-})
-
-const dialogStore = useDialogStore()
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-const expenseCategoryStore = useCategoryStore()
-const route = useRoute()
-const userStore = useUserStore()
-const modalStore = useModalStore()
-
-const $utils = inject('utils')
-
-function editExpenseCategory(data) {
-  expenseCategoryStore.fetchCategory(data)
-  modalStore.openModal({
-    title: t('settings.expense_category.edit_category'),
-    componentName: 'CategoryModal',
-    refreshData: props.loadData,
-    size: 'sm',
-  })
-}
-
-function removeExpenseCategory(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('settings.expense_category.confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async () => {
-      let response = await expenseCategoryStore.deleteCategory(id)
-      if (response.data.success) {
-        props.loadData && props.loadData()
-        return true
-      }
-      props.loadData && props.loadData()
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
deleted file mode 100644
index ef65ffa7..00000000
--- a/resources/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseButton v-if="route.name === 'expenses.view'" variant="primary">
-        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- edit expense  -->
-    <router-link
-      v-if="userStore.hasAbilities(abilities.EDIT_EXPENSE)"
-      :to="`/admin/expenses/${row.id}/edit`"
-    >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="PencilIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.edit') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- delete expense  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
-      @click="removeExpense(row.id)"
-    >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useI18n } from 'vue-i18n'
-import { useExpenseStore } from '@/scripts/admin/stores/expense'
-import { useRoute, useRouter } from 'vue-router'
-import { inject } from 'vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: null,
-  },
-})
-
-const dialogStore = useDialogStore()
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-const expenseStore = useExpenseStore()
-const route = useRoute()
-const router = useRouter()
-const userStore = useUserStore()
-
-const $utils = inject('utils')
-
-function removeExpense(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('expenses.confirm_delete', 1),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      size: 'lg',
-      hideNoButton: false,
-    })
-    .then((res) => {
-      if (res) {
-        expenseStore.deleteExpense({ ids: [id] }).then((res) => {
-          if (res) {
-            props.loadData && props.loadData()
-          }
-        })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
deleted file mode 100755
index 0db6d0fb..00000000
--- a/resources/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseButton v-if="route.name === 'invoices.view'" variant="primary">
-        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- Edit Invoice  -->
-    <router-link
-      v-if="userStore.hasAbilities(abilities.EDIT_INVOICE)"
-      :to="`/admin/invoices/${row.id}/edit`"
-    >
-      <BaseDropdownItem v-show="row.allow_edit">
-        <BaseIcon
-          name="PencilIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.edit') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- Copy PDF url  -->
-    <BaseDropdownItem v-if="route.name === 'invoices.view'" @click="copyPdfUrl">
-      <BaseIcon
-        name="LinkIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.copy_pdf_url') }}
-    </BaseDropdownItem>
-
-    <!-- View Invoice  -->
-    <router-link
-      v-if="
-        route.name !== 'invoices.view' &&
-        userStore.hasAbilities(abilities.VIEW_INVOICE)
-      "
-      :to="`/admin/invoices/${row.id}/view`"
-    >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="EyeIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.view') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- Send Invoice Mail  -->
-    <BaseDropdownItem v-if="canSendInvoice(row)" @click="sendInvoice(row)">
-      <BaseIcon
-        name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('invoices.send_invoice') }}
-    </BaseDropdownItem>
-
-    <!-- Resend Invoice -->
-    <BaseDropdownItem v-if="canReSendInvoice(row)" @click="sendInvoice(row)">
-      <BaseIcon
-        name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('invoices.resend_invoice') }}
-    </BaseDropdownItem>
-
-    <!-- Record payment  -->
-    <router-link :to="`/admin/payments/${row.id}/create`">
-      <BaseDropdownItem
-        v-if="row.status == 'SENT' && route.name !== 'invoices.view'"
-      >
-        <BaseIcon
-          name="CreditCardIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('invoices.record_payment') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- Mark as sent Invoice -->
-    <BaseDropdownItem v-if="canSendInvoice(row)" @click="onMarkAsSent(row.id)">
-      <BaseIcon
-        name="CheckCircleIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('invoices.mark_as_sent') }}
-    </BaseDropdownItem>
-
-    <!-- Clone Invoice into new invoice  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
-      @click="cloneInvoiceData(row)"
-    >
-      <BaseIcon
-        name="DocumentTextIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('invoices.clone_invoice') }}
-    </BaseDropdownItem>
-
-    <!--  Delete Invoice  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.DELETE_INVOICE)"
-      @click="removeInvoice(row.id)"
-    >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { inject } from 'vue'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: () => {},
-  },
-})
-
-const invoiceStore = useInvoiceStore()
-const modalStore = useModalStore()
-const notificationStore = useNotificationStore()
-const dialogStore = useDialogStore()
-const userStore = useUserStore()
-
-const { t } = useI18n()
-const route = useRoute()
-const router = useRouter()
-const utils = inject('utils')
-
-function canReSendInvoice(row) {
-  return (
-    (row.status == 'SENT' || row.status == 'VIEWED') &&
-    userStore.hasAbilities(abilities.SEND_INVOICE)
-  )
-}
-
-function canSendInvoice(row) {
-  return (
-    row.status == 'DRAFT' &&
-    route.name !== 'invoices.view' &&
-    userStore.hasAbilities(abilities.SEND_INVOICE)
-  )
-}
-
-async function removeInvoice(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('invoices.confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((res) => {
-      id = id
-      if (res) {
-        invoiceStore.deleteInvoice({ ids: [id] }).then((res) => {
-          if (res.data.success) {
-            router.push('/admin/invoices')
-            props.table && props.table.refresh()
-
-            invoiceStore.$patch((state) => {
-              state.selectedInvoices = []
-              state.selectAllField = false
-            })
-          }
-        })
-      }
-    })
-}
-
-async function cloneInvoiceData(data) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('invoices.confirm_clone'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'primary',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((res) => {
-      if (res) {
-        invoiceStore.cloneInvoice(data).then((res) => {
-          router.push(`/admin/invoices/${res.data.data.id}/edit`)
-        })
-      }
-    })
-}
-
-async function onMarkAsSent(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('invoices.invoice_mark_as_sent'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'primary',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((response) => {
-      const data = {
-        id: id,
-        status: 'SENT',
-      }
-      if (response) {
-        invoiceStore.markAsSent(data).then((response) => {
-          props.table && props.table.refresh()
-        })
-      }
-    })
-}
-
-async function sendInvoice(invoice) {
-  modalStore.openModal({
-    title: t('invoices.send_invoice'),
-    componentName: 'SendInvoiceModal',
-    id: invoice.id,
-    data: invoice,
-    variant: 'sm',
-  })
-}
-
-function copyPdfUrl() {
-  let pdfUrl = `${window.location.origin}/invoices/pdf/${props.row.unique_hash}`
-
-  utils.copyTextToClipboard(pdfUrl)
-
-  notificationStore.showNotification({
-    type: 'success',
-    message: t('general.copied_pdf_url_clipboard'),
-  })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
deleted file mode 100644
index 0abc691b..00000000
--- a/resources/scripts/admin/components/dropdowns/ItemIndexDropdown.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseButton v-if="route.name === 'items.view'" variant="primary">
-        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- edit item  -->
-    <router-link
-      v-if="userStore.hasAbilities(abilities.EDIT_ITEM)"
-      :to="`/admin/items/${row.id}/edit`"
-    >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="PencilIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.edit') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- delete item  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.DELETE_ITEM)"
-      @click="removeItem(row.id)"
-    >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useI18n } from 'vue-i18n'
-import { useItemStore } from '@/scripts/admin/stores/item'
-import { useRoute, useRouter } from 'vue-router'
-import { inject } from 'vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: null,
-  },
-})
-
-const dialogStore = useDialogStore()
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-const itemStore = useItemStore()
-const route = useRoute()
-const router = useRouter()
-const userStore = useUserStore()
-
-const $utils = inject('utils')
-
-function removeItem(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('items.confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((res) => {
-      if (res) {
-        itemStore.deleteItem({ ids: [id] }).then((response) => {
-          if (response.data.success) {
-            props.loadData && props.loadData()
-            return true
-          }
-          return true
-        })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/MemberIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/MemberIndexDropdown.vue
deleted file mode 100644
index e02838ee..00000000
--- a/resources/scripts/admin/components/dropdowns/MemberIndexDropdown.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseButton v-if="route.name === 'members.view'" variant="primary">
-        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- edit user  -->
-    <router-link :to="`/admin/members/${row.id}/edit`">
-      <BaseDropdownItem>
-        <BaseIcon
-          name="PencilIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.edit') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- delete user  -->
-    <BaseDropdownItem @click="removeUser(row.id)">
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useI18n } from 'vue-i18n'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useRoute, useRouter } from 'vue-router'
-import { inject } from 'vue'
-import { useMembersStore } from '@/scripts/admin/stores/members'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: null,
-  },
-})
-
-const dialogStore = useDialogStore()
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-const userStore = useUserStore()
-const route = useRoute()
-const router = useRouter()
-const usersStore = useMembersStore()
-
-const $utils = inject('utils')
-
-function removeUser(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('members.confirm_delete', 1),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      size: 'lg',
-      hideNoButton: false,
-    })
-    .then((res) => {
-      if (res) {
-        usersStore.deleteUser({ ids: [id] }).then((res) => {
-          if (res) {
-            props.loadData && props.loadData()
-          }
-        })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
deleted file mode 100644
index bb51920e..00000000
--- a/resources/scripts/admin/components/dropdowns/NoteIndexDropdown.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseButton v-if="route.name === 'notes.view'" variant="primary">
-        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- edit note  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.MANAGE_NOTE)"
-      @click="editNote(row.id)"
-    >
-      <BaseIcon
-        name="PencilIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.edit') }}
-    </BaseDropdownItem>
-
-    <!-- delete note  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.MANAGE_NOTE)"
-      @click="removeNote(row.id)"
-    >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useI18n } from 'vue-i18n'
-import { useNotesStore } from '@/scripts/admin/stores/note'
-import { useRoute } from 'vue-router'
-import { inject } from 'vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useModalStore } from '@/scripts/stores/modal'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: null,
-  },
-})
-
-const dialogStore = useDialogStore()
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-const noteStore = useNotesStore()
-const route = useRoute()
-const userStore = useUserStore()
-const modalStore = useModalStore()
-
-const $utils = inject('utils')
-
-function editNote(data) {
-  noteStore.fetchNote(data)
-  modalStore.openModal({
-    title: t('settings.customization.notes.edit_note'),
-    componentName: 'NoteModal',
-    size: 'md',
-    refreshData: props.loadData,
-  })
-}
-
-function removeNote(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('settings.customization.notes.note_confirm_delete'),
-      yesLabel: t('general.yes'),
-      noLabel: t('general.no'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async () => {
-      let response = await noteStore.deleteNote(id)
-      if (response.data.success) {
-        notificationStore.showNotification({
-          type: 'success',
-          message: t('settings.customization.notes.deleted_message'),
-        })
-      } else {
-        notificationStore.showNotification({
-          type: 'error',
-          message: t('settings.customization.notes.already_in_use'),
-        })
-      }
-      props.loadData && props.loadData()
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
deleted file mode 100644
index 540ae5c8..00000000
--- a/resources/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <BaseDropdown :content-loading="contentLoading">
-    <template #activator>
-      <BaseButton v-if="route.name === 'payments.view'" variant="primary">
-        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- Copy pdf url  -->
-    <BaseDropdown-item
-      v-if="
-        route.name === 'payments.view' &&
-        userStore.hasAbilities(abilities.VIEW_PAYMENT)
-      "
-      class="rounded-md"
-      @click="copyPdfUrl"
-    >
-      <BaseIcon
-        name="LinkIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.copy_pdf_url') }}
-    </BaseDropdown-item>
-
-    <!-- edit payment  -->
-    <router-link
-      v-if="userStore.hasAbilities(abilities.EDIT_PAYMENT)"
-      :to="`/admin/payments/${row.id}/edit`"
-    >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="PencilIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.edit') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- view payment  -->
-    <router-link
-      v-if="
-        route.name !== 'payments.view' &&
-        userStore.hasAbilities(abilities.VIEW_PAYMENT)
-      "
-      :to="`/admin/payments/${row.id}/view`"
-    >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="EyeIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.view') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- Send Estimate  -->
-    <BaseDropdownItem
-      v-if="
-        row.status !== 'SENT' &&
-        route.name !== 'payments.view' &&
-        userStore.hasAbilities(abilities.SEND_PAYMENT)
-      "
-      @click="sendPayment(row)"
-    >
-      <BaseIcon
-        name="PaperAirplaneIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('payments.send_payment') }}
-    </BaseDropdownItem>
-
-    <!-- delete payment  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.DELETE_PAYMENT)"
-      @click="removePayment(row.id)"
-    >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useI18n } from 'vue-i18n'
-import { usePaymentStore } from '@/scripts/admin/stores/payment'
-import { useRoute, useRouter } from 'vue-router'
-import { inject } from 'vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const dialogStore = useDialogStore()
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-const paymentStore = usePaymentStore()
-const route = useRoute()
-const router = useRouter()
-const userStore = useUserStore()
-const modalStore = useModalStore()
-
-const $utils = inject('utils')
-
-function removePayment(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('payments.confirm_delete', 1),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      size: 'lg',
-      hideNoButton: false,
-    })
-    .then(async (res) => {
-      if (res) {
-        await paymentStore.deletePayment({ ids: [id] })
-        router.push(`/admin/payments`)
-        props.table && props.table.refresh()
-
-        return true
-      }
-    })
-}
-
-function copyPdfUrl() {
-  let pdfUrl = `${window.location.origin}/payments/pdf/${props.row?.unique_hash}`
-
-  $utils.copyTextToClipboard(pdfUrl)
-
-  notificationStore.showNotification({
-    type: 'success',
-    message: t('general.copied_pdf_url_clipboard'),
-  })
-}
-
-async function sendPayment(payment) {
-  modalStore.openModal({
-    title: t('payments.send_payment'),
-    componentName: 'SendPaymentModal',
-    id: payment.id,
-    data: payment,
-    variant: 'lg',
-  })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
deleted file mode 100644
index 1e308ad9..00000000
--- a/resources/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseButton v-if="route.name === 'paymentModes.view'" variant="primary">
-        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- edit paymentMode  -->
-    <BaseDropdownItem @click="editPaymentMode(row.id)">
-      <BaseIcon
-        name="PencilIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.edit') }}
-    </BaseDropdownItem>
-
-    <!-- delete paymentMode  -->
-    <BaseDropdownItem @click="removePaymentMode(row.id)">
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useI18n } from 'vue-i18n'
-import { usePaymentStore } from '@/scripts/admin/stores/payment'
-import { useRoute, useRouter } from 'vue-router'
-import { inject } from 'vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useModalStore } from '@/scripts/stores/modal'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: null,
-  },
-})
-
-const dialogStore = useDialogStore()
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-const paymentStore = usePaymentStore()
-const route = useRoute()
-const userStore = useUserStore()
-const modalStore = useModalStore()
-
-const $utils = inject('utils')
-
-function editPaymentMode(id) {
-  paymentStore.fetchPaymentMode(id)
-  modalStore.openModal({
-    title: t('settings.payment_modes.edit_payment_mode'),
-    componentName: 'PaymentModeModal',
-    refreshData: props.loadData && props.loadData,
-    size: 'sm',
-  })
-}
-
-function removePaymentMode(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('settings.payment_modes.payment_mode_confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        await paymentStore.deletePaymentMode(id)
-        props.loadData && props.loadData()
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
deleted file mode 100644
index 2aaf52df..00000000
--- a/resources/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-  <BaseDropdown :content-loading="recurringInvoiceStore.isFetchingViewData">
-    <template #activator>
-      <BaseButton
-        v-if="route.name === 'recurring-invoices.view'"
-        variant="primary"
-      >
-        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- Edit Recurring Invoice  -->
-    <router-link
-      v-if="userStore.hasAbilities(abilities.EDIT_RECURRING_INVOICE)"
-      :to="`/admin/recurring-invoices/${row.id}/edit`"
-    >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="PencilIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.edit') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- View Recurring Invoice -->
-    <router-link
-      v-if="
-        route.name !== 'recurring-invoices.view' &&
-        userStore.hasAbilities(abilities.VIEW_RECURRING_INVOICE)
-      "
-      :to="`recurring-invoices/${row.id}/view`"
-    >
-      <BaseDropdownItem>
-        <BaseIcon
-          name="EyeIcon"
-          class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-        />
-        {{ $t('general.view') }}
-      </BaseDropdownItem>
-    </router-link>
-
-    <!-- Delete Recurring Invoice  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.DELETE_RECURRING_INVOICE)"
-      @click="removeMultipleRecurringInvoices(row.id)"
-    >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { inject } from 'vue'
-import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: () => {},
-  },
-})
-
-const recurringInvoiceStore = useRecurringInvoiceStore()
-const notificationStore = useNotificationStore()
-const dialogStore = useDialogStore()
-const userStore = useUserStore()
-
-const { t } = useI18n()
-const route = useRoute()
-const router = useRouter()
-const utils = inject('utils')
-
-async function removeMultipleRecurringInvoices(id = null) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('invoices.confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        await recurringInvoiceStore
-          .deleteMultipleRecurringInvoices(id)
-          .then((res) => {
-            if (res.data.success) {
-              props.table && props.table.refresh()
-              recurringInvoiceStore.$patch((state) => {
-                state.selectedRecurringInvoices = []
-                state.selectAllField = false
-              })
-              notificationStore.showNotification({
-                type: 'success',
-                message: t('recurring_invoices.deleted_message', 2),
-              })
-            } else if (res.data.error) {
-              notificationStore.showNotification({
-                type: 'error',
-                message: res.data.message,
-              })
-            }
-          })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
deleted file mode 100644
index e54fbd9e..00000000
--- a/resources/scripts/admin/components/dropdowns/RoleIndexDropdown.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseButton v-if="route.name === 'roles.view'" variant="primary">
-        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- edit role  -->
-    <BaseDropdownItem
-      v-if="userStore.currentUser.is_owner"
-      @click="editRole(row.id)"
-    >
-      <BaseIcon
-        name="PencilIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.edit') }}
-    </BaseDropdownItem>
-
-    <!-- delete role  -->
-    <BaseDropdownItem
-      v-if="userStore.currentUser.is_owner"
-      @click="removeRole(row.id)"
-    >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useI18n } from 'vue-i18n'
-import { useRoleStore } from '@/scripts/admin/stores/role'
-import { useRoute, useRouter } from 'vue-router'
-import { inject } from 'vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useModalStore } from '@/scripts/stores/modal'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: null,
-  },
-})
-
-const dialogStore = useDialogStore()
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-const roleStore = useRoleStore()
-const route = useRoute()
-const userStore = useUserStore()
-const modalStore = useModalStore()
-
-const $utils = inject('utils')
-
-async function editRole(id) {
-  Promise.all([
-    await roleStore.fetchAbilities(),
-    await roleStore.fetchRole(id),
-  ]).then(() => {
-    modalStore.openModal({
-      title: t('settings.roles.edit_role'),
-      componentName: 'RolesModal',
-      size: 'lg',
-      refreshData: props.loadData,
-    })
-  })
-}
-
-async function removeRole(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('settings.roles.confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        await roleStore.deleteRole(id).then((response) => {
-          if (response.data) {
-            props.loadData && props.loadData()
-          }
-        })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue b/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
deleted file mode 100644
index ba8c1654..00000000
--- a/resources/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <BaseDropdown>
-    <template #activator>
-      <BaseButton v-if="route.name === 'tax-types.view'" variant="primary">
-        <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
-      </BaseButton>
-      <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-    </template>
-
-    <!-- edit tax-type  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.EDIT_TAX_TYPE)"
-      @click="editTaxType(row.id)"
-    >
-      <BaseIcon
-        name="PencilIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.edit') }}
-    </BaseDropdownItem>
-
-    <!-- delete tax-type  -->
-    <BaseDropdownItem
-      v-if="userStore.hasAbilities(abilities.DELETE_TAX_TYPE)"
-      @click="removeTaxType(row.id)"
-    >
-      <BaseIcon
-        name="TrashIcon"
-        class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-      />
-      {{ $t('general.delete') }}
-    </BaseDropdownItem>
-  </BaseDropdown>
-</template>
-
-<script setup>
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useI18n } from 'vue-i18n'
-import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
-import { useRoute, useRouter } from 'vue-router'
-import { inject } from 'vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useModalStore } from '@/scripts/stores/modal'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  row: {
-    type: Object,
-    default: null,
-  },
-  table: {
-    type: Object,
-    default: null,
-  },
-  loadData: {
-    type: Function,
-    default: null,
-  },
-})
-
-const dialogStore = useDialogStore()
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-const taxTypeStore = useTaxTypeStore()
-const route = useRoute()
-const userStore = useUserStore()
-const modalStore = useModalStore()
-
-const $utils = inject('utils')
-
-async function editTaxType(id) {
-  await taxTypeStore.fetchTaxType(id)
-  modalStore.openModal({
-    title: t('settings.tax_types.edit_tax'),
-    componentName: 'TaxTypeModal',
-    size: 'sm',
-    refreshData: props.loadData && props.loadData,
-  })
-}
-
-function removeTaxType(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('settings.tax_types.confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        let response = await taxTypeStore.deleteTaxType(id)
-        if (response.data.success) {
-          props.loadData && props.loadData()
-          return true
-        }
-        props.loadData && props.loadData()
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
deleted file mode 100644
index 4f0b42c5..00000000
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRow.vue
+++ /dev/null
@@ -1,483 +0,0 @@
-<template>
-  <tr class="box-border bg-surface border-b border-line-light">
-    <td colspan="5" class="p-0 text-left align-top">
-      <table class="w-full">
-        <colgroup>
-          <col style="width: 40%; min-width: 280px" />
-          <col style="width: 10%; min-width: 120px" />
-          <col style="width: 15%; min-width: 120px" />
-          <col
-            v-if="store[storeProp].discount_per_item === 'YES'"
-            style="width: 15%; min-width: 160px"
-          />
-          <col style="width: 15%; min-width: 120px" />
-        </colgroup>
-        <tbody>
-          <tr>
-            <td class="px-5 py-4 text-left align-top">
-              <div class="flex justify-start">
-                <div
-                  class="flex items-center justify-center w-5 h-5 mt-2 mr-2 text-subtle cursor-move  handle"
-                >
-                  <DragIcon />
-                </div>
-                <BaseItemSelect
-                  type="Invoice"
-                  :item="itemData"
-                  :invalid="v$.name.$error"
-                  :invalid-description="v$.description.$error"
-                  :taxes="itemData.taxes"
-                  :index="index"
-                  :store-prop="storeProp"
-                  :store="store"
-                  @search="searchVal"
-                  @select="onSelectItem"
-                />
-              </div>
-            </td>
-            <td class="px-5 py-4 text-right align-top">
-              <BaseInput
-                v-model="quantity"
-                :invalid="v$.quantity.$error"
-                :content-loading="loading"
-                type="number"
-                small
-                step="any"
-                @change="syncItemToStore()"
-                @input="v$.quantity.$touch()"
-              />
-            </td>
-            <td class="px-5 py-4 text-left align-top">
-              <div class="flex flex-col">
-                <div class="flex-auto flex-fill bd-highlight">
-                  <div class="relative w-full">
-                    <BaseMoney
-                      :key="selectedCurrency"
-                      v-model="price"
-                      :invalid="v$.price.$error"
-                      :content-loading="loading"
-                      :currency="selectedCurrency"
-                    />
-                  </div>
-                </div>
-              </div>
-            </td>
-            <td
-              v-if="store[storeProp].discount_per_item === 'YES'"
-              class="px-5 py-4 text-left align-top"
-            >
-              <div class="flex flex-col">
-                <div class="flex" style="width: 120px" role="group">
-                  <BaseInput
-                    v-model="discount"
-                    :invalid="v$.discount_val.$error"
-                    :content-loading="loading"
-                    class="
-                      border-r-0
-                      focus:border-r-2
-                      rounded-tr-sm rounded-br-sm
-                      h-[38px]
-                    "
-                  />
-                  <BaseDropdown position="bottom-end">
-                    <template #activator>
-                      <BaseButton
-                        :content-loading="loading"
-                        class="rounded-tr-md rounded-br-md !p-2 rounded-none"
-                        type="button"
-                        variant="white"
-                      >
-                        <span class="flex items-center">
-                          {{
-                            itemData.discount_type == 'fixed'
-                              ? currency.symbol
-                              : '%'
-                          }}
-
-                          <BaseIcon
-                            name="ChevronDownIcon"
-                            class="w-4 h-4 ml-1 text-muted"
-                          />
-                        </span>
-                      </BaseButton>
-                    </template>
-
-                    <BaseDropdownItem @click="selectFixed">
-                      {{ $t('general.fixed') }}
-                    </BaseDropdownItem>
-
-                    <BaseDropdownItem @click="selectPercentage">
-                      {{ $t('general.percentage') }}
-                    </BaseDropdownItem>
-                  </BaseDropdown>
-                </div>
-              </div>
-            </td>
-            <td class="px-5 py-4 text-right align-top">
-              <div class="flex items-center justify-end text-sm">
-                <span>
-                  <BaseContentPlaceholders v-if="loading">
-                    <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-                  </BaseContentPlaceholders>
-
-                  <BaseFormatMoney
-                    v-else
-                    :amount="total"
-                    :currency="selectedCurrency"
-                  />
-                </span>
-                <div class="flex items-center justify-center w-6 h-10 mx-2">
-                  <BaseIcon
-                    v-if="showRemoveButton"
-                    class="h-5 text-body cursor-pointer"
-                    name="TrashIcon"
-                    @click="store.removeItem(index)"
-                  />
-                </div>
-              </div>
-            </td>
-          </tr>
-          <tr v-if="store[storeProp].tax_per_item === 'YES'">
-            <td class="px-5 py-4 text-left align-top" />
-            <td colspan="4" class="px-5 py-4 text-left align-top">
-              <BaseContentPlaceholders v-if="loading">
-                <BaseContentPlaceholdersText
-                  :lines="1"
-                  class="w-24 h-8 border border-line-light rounded-md"
-                />
-              </BaseContentPlaceholders>
-
-              <ItemTax
-                v-for="(tax, index1) in itemData.taxes"
-                v-else
-                :key="tax.id"
-                :index="index1"
-                :item-index="index"
-                :tax-data="tax"
-                :taxes="itemData.taxes"
-                :discounted-total="total"
-                :total-tax="totalSimpleTax"
-                :total="subtotal"
-                :currency="currency"
-                :update-items="syncItemToStore"
-                :ability="abilities.CREATE_INVOICE"
-                :store="store"
-                :store-prop="storeProp"
-                :discount="discount"
-                @update="updateTax"
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </td>
-  </tr>
-</template>
-
-<script setup>
-import { computed, ref, inject } from 'vue'
-import { useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import Guid from 'guid'
-import TaxStub from '@/scripts/admin/stub/tax'
-import ItemTax from './CreateItemRowTax.vue'
-import { sumBy } from 'lodash'
-import abilities from '@/scripts/admin/stub/abilities'
-import {
-  required,
-  between,
-  maxLength,
-  helpers,
-  minValue,
-} from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useItemStore } from '@/scripts/admin/stores/item'
-import DragIcon from '@/scripts/components/icons/DragIcon.vue'
-
-const props = defineProps({
-  store: {
-    type: Object,
-    default: null,
-  },
-  storeProp: {
-    type: String,
-    default: '',
-  },
-  itemData: {
-    type: Object,
-    default: null,
-  },
-  index: {
-    type: Number,
-    default: null,
-  },
-  type: {
-    type: String,
-    default: '',
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  currency: {
-    type: [Object, String],
-    required: true,
-  },
-  invoiceItems: {
-    type: Array,
-    required: true,
-  },
-  itemValidationScope: {
-    type: String,
-    default: '',
-  },
-})
-
-const emit = defineEmits(['update', 'remove', 'itemValidate'])
-
-const companyStore = useCompanyStore()
-const itemStore = useItemStore()
-
-let route = useRoute()
-const { t } = useI18n()
-
-const quantity = computed({
-  get: () => {
-    return props.itemData.quantity
-  },
-  set: (newValue) => {
-    updateItemAttribute('quantity', parseFloat(newValue))
-  },
-})
-
-const price = computed({
-  get: () => {
-    const price = props.itemData.price
-    return price / 100
-  },
-
-  set: (newValue) => {
-    let price = Math.round(newValue * 100)
-    updateItemAttribute('price', price)
-    setDiscount()
-  },
-})
-
-const subtotal = computed(() => Math.round(props.itemData.price * props.itemData.quantity))
-
-const discount = computed({
-  get: () => {
-    return props.itemData.discount
-  },
-  set: (newValue) => {
-    updateItemAttribute('discount', newValue)
-    setDiscount()
-  },
-})
-
-const total = computed(() => {
-  return subtotal.value - props.itemData.discount_val
-})
-
-const selectedCurrency = computed(() => {
-  if (props.currency) {
-    return props.currency
-  } else {
-    return companyStore.selectedCompanyCurrency
-  }
-})
-
-const showRemoveButton = computed(() => {
-  if (props.store[props.storeProp].items.length == 1) {
-    return false
-  }
-  return true
-})
-
-const totalSimpleTax = computed(() => {
-  return Math.round(
-    sumBy(props.itemData.taxes, function (tax) {
-      if (tax.amount) {
-        return tax.amount
-      }
-      return 0
-    })
-  )
-})
-
-const totalTax = computed(() => totalSimpleTax.value)
-
-const rules = {
-  name: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  quantity: {
-    required: helpers.withMessage(t('validation.required'), required),
-    maxLength: helpers.withMessage(
-      t('validation.amount_maxlength'),
-      maxLength(20)
-    ),
-  },
-  price: {
-    required: helpers.withMessage(t('validation.required'), required),
-    maxLength: helpers.withMessage(
-      t('validation.price_maxlength'),
-      maxLength(20)
-    ),
-  },
-  discount_val: {
-    between: helpers.withMessage(
-      t('validation.discount_maxlength'),
-      between(
-        0,
-        computed(() => Math.abs(subtotal.value))
-      )
-    ),
-  },
-  description: {
-    maxLength: helpers.withMessage(
-      t('validation.notes_maxlength'),
-      maxLength(65000)
-    ),
-  },
-}
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => props.store[props.storeProp].items[props.index]),
-  { $scope: props.itemValidationScope }
-)
-
-//
-// if (
-//   route.params.id &&
-//   (props.store[props.storeProp].tax_per_item === 'YES' || 'NO')
-// ) {
-//   if (props.store[props.storeProp].items[props.index].taxes === undefined) {
-//     props.store.$patch((state) => {
-//       state[props.storeProp].items[props.index].taxes = [
-//         { ...TaxStub, id: Guid.raw() },
-//       ]
-//     })
-//   }
-// }
-
-function updateTax(data) {
-  props.store.$patch((state) => {
-     state[props.storeProp].items[props.index]['taxes'][data.index] = data.item
-  })
-
-  let lastTax = props.itemData.taxes[props.itemData.taxes.length - 1]
-
-  if (lastTax?.tax_type_id !== 0) {
-    props.store.$patch((state) => {
-      state[props.storeProp].items[props.index].taxes.push({
-        ...TaxStub,
-        id: Guid.raw(),
-      })
-    })
-  }
-
-  syncItemToStore()
-}
-
-function setDiscount() {
-  const newValue = props.store[props.storeProp].items[props.index].discount
-  const absoluteSubtotal = Math.abs(subtotal.value)
-
-  if (props.itemData.discount_type === 'percentage'){
-    updateItemAttribute('discount_val', Math.round((absoluteSubtotal * newValue) / 100))
-  } else {
-    updateItemAttribute('discount_val', Math.min(Math.round(newValue * 100), absoluteSubtotal))
-  }
-}
-
-function searchVal(val) {
-  updateItemAttribute('name', val)
-}
-
-function onSelectItem(itm) {
-  props.store.$patch((state) => {
-    state[props.storeProp].items[props.index].name = itm.name
-    state[props.storeProp].items[props.index].price = itm.price
-    state[props.storeProp].items[props.index].item_id = itm.id
-    state[props.storeProp].items[props.index].description = itm.description
-
-    if (itm.unit) {
-      state[props.storeProp].items[props.index].unit_name = itm.unit.name
-    }
-
-    if (props.store[props.storeProp].tax_per_item === 'YES' && itm.taxes) {
-      let index = 0
-
-      itm.taxes.forEach((tax) => {
-        updateTax({ index, item: { ...tax } })
-        index++
-      })
-    }
-
-    if (state[props.storeProp].exchange_rate) {
-      state[props.storeProp].items[props.index].price /=
-        state[props.storeProp].exchange_rate
-    }
-  })
-
-  itemStore.fetchItems()
-  syncItemToStore()
-}
-
-function selectFixed() {
-  if (props.itemData.discount_type === 'fixed') {
-    return
-  }
-
-  updateItemAttribute('discount_val', Math.round(props.itemData.discount * 100))
-  updateItemAttribute('discount_type', 'fixed')
-}
-
-function selectPercentage() {
-  if (props.itemData.discount_type === 'percentage') {
-    return
-  }
-
-  updateItemAttribute(
-    'discount_val',
-    (subtotal.value * props.itemData.discount) / 100
-  )
-
-  updateItemAttribute('discount_type', 'percentage')
-}
-
-function syncItemToStore() {
-  let itemTaxes = props.store[props.storeProp]?.items[props.index]?.taxes
-
-  if (!itemTaxes) {
-    itemTaxes = []
-  }
-
-  let data = {
-    ...props.store[props.storeProp].items[props.index],
-    index: props.index,
-    total: total.value,
-    sub_total: subtotal.value,
-    totalSimpleTax: totalSimpleTax.value,
-    totalTax: totalTax.value,
-    tax: totalTax.value,
-    taxes: [...itemTaxes],
-    tax_type_ids: itemTaxes.flatMap(_t =>
-      _t.tax_type_id ? _t.tax_type_id : [],
-    ),
-  }
-
-  props.store.updateItem(data)
-}
-
-function updateItemAttribute(attribute, value) {
-  props.store.$patch((state) => {
-    state[props.storeProp].items[props.index][attribute] = value
-  })
-
-  syncItemToStore()
-}
-</script>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
deleted file mode 100644
index 3613e1ee..00000000
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItemRowTax.vue
+++ /dev/null
@@ -1,285 +0,0 @@
-<template>
-  <div class="flex items-center justify-between mb-3">
-    <div class="flex items-center text-base" style="flex: 4">
-      <label class="pr-2 mb-0" align="right">
-        {{ $t('invoices.item.tax') }}
-      </label>
-
-      <BaseMultiselect
-        v-model="selectedTax"
-        value-prop="id"
-        :options="filteredTypes"
-        :placeholder="$t('general.select_a_tax')"
-        open-direction="top"
-        track-by="name"
-        searchable
-        object
-        label="name"
-        @update:modelValue="(val) => onSelectTax(val)"
-      >
-        <template #singlelabel="{ value }">
-          <div class="absolute left-3.5">
-            {{ value.name }} - 
-            <template v-if="value.calculation_type === 'fixed'">
-              <BaseFormatMoney :amount="value.fixed_amount" :currency="currency" />
-            </template>
-            <template v-else>
-              {{ value.percent }} %
-            </template>
-          </div>
-        </template>
-
-        <template #option="{ option }">
-          {{ option.name }} - 
-          <template v-if="option.calculation_type === 'fixed'">
-            <BaseFormatMoney :amount="option.fixed_amount" :currency="currency" />
-          </template>
-          <template v-else>
-            {{ option.percent }} %
-          </template>
-        </template>
-
-        <template v-if="userStore.hasAbilities(ability)" #action>
-          <button
-            type="button"
-            class="flex items-center justify-center w-full px-2 py-2 bg-surface-muted border-none outline-hidden cursor-pointer "
-            @click="openTaxModal"
-          >
-            <BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
-
-            <label
-              class="ml-2 text-sm leading-none cursor-pointer text-primary-400"
-              >{{ $t('invoices.add_new_tax') }}</label
-            >
-          </button>
-        </template>
-      </BaseMultiselect>
-      <br />
-    </div>
-
-    <div class="text-sm text-right" style="flex: 3">
-      <BaseFormatMoney :amount="taxAmount" :currency="currency" />
-    </div>
-
-    <div class="flex items-center justify-center w-6 h-10 mx-2 cursor-pointer">
-      <BaseIcon
-        v-if="taxes.length && index !== taxes.length - 1"
-        name="TrashIcon"
-        class="h-5 text-body cursor-pointer"
-        @click="removeTax(index)"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref, inject, reactive, watch } from 'vue'
-import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useI18n } from 'vue-i18n'
-import { useUserStore } from '@/scripts/admin/stores/user'
-
-const props = defineProps({
-  ability: {
-    type: String,
-    default: '',
-  },
-  store: {
-    type: Object,
-    default: null,
-  },
-  storeProp: {
-    type: String,
-    default: '',
-  },
-  itemIndex: {
-    type: Number,
-    required: true,
-  },
-  index: {
-    type: Number,
-    required: true,
-  },
-  taxData: {
-    type: Object,
-    required: true,
-  },
-  taxes: {
-    type: Array,
-    default: () => [],
-  },
-  total: {
-    type: Number,
-    default: 0,
-  },
-  totalTax: {
-    type: Number,
-    default: 0,
-  },
-  discountedTotal: {
-    type: Number,
-    default: 0,
-  },
-  currency: {
-    type: [Object, String],
-    required: true,
-  },
-  updateItems: {
-    type: Function,
-    default: () => {},
-  },
-})
-
-const emit = defineEmits(['remove', 'update'])
-
-const taxTypeStore = useTaxTypeStore()
-const modalStore = useModalStore()
-const userStore = useUserStore()
-
-const selectedTax = ref(null)
-const localTax = reactive({ ...props.taxData })
-const utils = inject('utils')
-const { t } = useI18n()
-
-const filteredTypes = computed(() => {
-  const clonedTypes = taxTypeStore.taxTypes.map((a) => ({ ...a }))
-
-  return clonedTypes.map((taxType) => {
-    let found = props.taxes.find((tax) => tax.tax_type_id === taxType.id)
-
-    if (found) {
-      taxType.disabled = true
-    } else {
-      taxType.disabled = false
-    }
-
-    return taxType
-  })
-})
-
-const taxAmount = computed(() => {
-
-  if(localTax.calculation_type === 'fixed') {
-    return localTax.fixed_amount
-  }
-  
-  if (props.discountedTotal) {
-    const taxPerItemEnabled = props.store[props.storeProp].tax_per_item === 'YES'
-    const discountPerItemEnabled = props.store[props.storeProp].discount_per_item === 'YES'
-    if (taxPerItemEnabled && !discountPerItemEnabled){
-      return getTaxAmount()
-    }
-    if (props.store[props.storeProp].tax_included) {
-      return Math.round(props.discountedTotal - (props.discountedTotal / (1 + (localTax.percent / 100))))
-    }
-    return (props.discountedTotal * localTax.percent) / 100
-  }
-  return 0
-})
-
-watch(
-  () => props.discountedTotal,
-  () => {
-    updateRowTax()
-  }
-)
-
-watch(
-  () => props.totalTax,
-  () => {
-    updateRowTax()
-  }
-)
-
-watch(
-  () => taxAmount.value,
-  () => {
-    updateRowTax()
-  },
-)
-
-// Set SelectedTax
-if (props.taxData.tax_type_id > 0) {
-  selectedTax.value = taxTypeStore.taxTypes.find(
-    (_type) => _type.id === props.taxData.tax_type_id
-  )
-}
-
-updateRowTax()
-
-function onSelectTax(val) {
-  localTax.calculation_type = val.calculation_type
-  localTax.percent = val.calculation_type === 'percentage' ? val.percent : null
-  localTax.fixed_amount = val.calculation_type === 'fixed' ? val.fixed_amount : null
-  localTax.tax_type_id = val.id
-  localTax.name = val.name
-
-  updateRowTax()
-}
-
-function updateRowTax() {
-  if (localTax.tax_type_id === 0) {
-    return
-  }
-
-  emit('update', {
-    index: props.index,
-    item: {
-      ...localTax,
-      amount: taxAmount.value,
-    },
-  })
-}
-
-function openTaxModal() {
-  let data = {
-    itemIndex: props.itemIndex,
-    taxIndex: props.index,
-  }
-
-  modalStore.openModal({
-    title: t('settings.tax_types.add_tax'),
-    componentName: 'TaxTypeModal',
-    data: data,
-    size: 'sm',
-  })
-}
-
-function removeTax(index) {
-  props.store.$patch((state) => {
-    state[props.storeProp].items[props.itemIndex].taxes.splice(index, 1)
-    state[props.storeProp].items[props.itemIndex].tax = 0
-    state[props.storeProp].items[props.itemIndex].totalTax = 0
-  })
-}
-
-function getTaxAmount() {
-
-  if (localTax.calculation_type === 'fixed') {
-    return localTax.fixed_amount
-  }
-
-  let total = 0
-  let discount = 0
-  const itemTotal = props.discountedTotal
-  const modelDiscount = props.store[props.storeProp].discount ? props.store[props.storeProp].discount : 0
-  const type = props.store[props.storeProp].discount_type
-  let discountedTotal = props.discountedTotal
-  if (modelDiscount > 0) {
-    props.store[props.storeProp].items.forEach((_i) => {
-      total += _i.total
-    })
-    const proportion = (itemTotal / total).toFixed(2)
-    discount = type === 'fixed' ? modelDiscount * 100 : (total * modelDiscount) / 100
-    const itemDiscount = Math.round(discount * proportion)
-    discountedTotal = itemTotal - itemDiscount
-  }
-
-  if (props.store[props.storeProp].tax_included) {
-    return Math.round(discountedTotal - (discountedTotal / (1 + (localTax.percent / 100))))
-  }
-
-  return Math.round((discountedTotal * localTax.percent) / 100)
-}
-</script>
-
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
deleted file mode 100644
index 40d38244..00000000
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateItems.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<template>
-  <div class="rounded-xl border border-line-light shadow overflow-hidden bg-surface">
-  <!-- Tax Included -->
-  <div
-    v-if="companyStore.selectedCompanySettings.tax_included === 'YES'"
-    class="
-      flex
-      items-center
-      justify-end
-      w-full
-      px-6
-      text-base
-      border-b border-line-light
-      cursor-pointer
-      text-primary-400
-      bg-surface
-    "
-  >
-    <BaseSwitchSection
-      v-model="taxIncludedField"
-      :title="$t('settings.tax_types.tax_included')"
-      :store="store"
-      :store-prop="storeProp"
-    />
-  </div>
-  <table class="text-center item-table min-w-full">
-    <colgroup>
-      <col style="width: 40%; min-width: 280px" />
-      <col style="width: 10%; min-width: 120px" />
-      <col style="width: 15%; min-width: 120px" />
-      <col
-        v-if="store[storeProp].discount_per_item === 'YES'"
-        style="width: 15%; min-width: 160px"
-      />
-      <col style="width: 15%; min-width: 120px" />
-    </colgroup>
-    <thead class="bg-surface-secondary border-b border-line-light">
-      <tr>
-        <th
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-left text-body
-            
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else class="pl-7">
-            {{ $t('items.item', 2) }}
-          </span>
-        </th>
-        <th
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-right text-body
-            
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.quantity') }}
-          </span>
-        </th>
-        <th
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-left text-body
-            
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.price') }}
-          </span>
-        </th>
-        <th
-          v-if="store[storeProp].discount_per_item === 'YES'"
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-left text-body
-            
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else>
-            {{ $t('invoices.item.discount') }}
-          </span>
-        </th>
-        <th
-          class="
-            px-5
-            py-3
-            text-sm
-            not-italic
-            font-medium
-            leading-5
-            text-right text-body
-            
-          "
-        >
-          <BaseContentPlaceholders v-if="isLoading">
-            <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-          </BaseContentPlaceholders>
-          <span v-else class="pr-10 column-heading">
-            {{ $t('invoices.item.amount') }}
-          </span>
-        </th>
-      </tr>
-    </thead>
-    <draggable
-      v-model="store[storeProp].items"
-      item-key="id"
-      tag="tbody"
-      handle=".handle"
-    >
-      <template #item="{ element, index }">
-        <Item
-          :key="element.id"
-          :index="index"
-          :item-data="element"
-          :loading="isLoading"
-          :currency="defaultCurrency"
-          :item-validation-scope="itemValidationScope"
-          :invoice-items="store[storeProp].items"
-          :store="store"
-          :store-prop="storeProp"
-        />
-      </template>
-    </draggable>
-  </table>
-
-  <div
-    class="
-      flex
-      items-center
-      justify-center
-      w-full
-      px-6
-      py-3
-      text-base
-      border-t border-line-light
-      cursor-pointer
-      text-primary-400
-      hover:bg-primary-100
-    "
-    @click="store.addItem"
-  >
-    <BaseIcon name="PlusCircleIcon" class="mr-2" />
-    {{ $t('general.add_new_item') }}
-  </div>
-  </div><!-- end rounded wrapper -->
-</template>
-
-<script setup>
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { computed } from 'vue'
-import draggable from 'vuedraggable'
-import Item from './CreateItemRow.vue'
-
-const props = defineProps({
-  store: {
-    type: Object,
-    default: null,
-  },
-  storeProp: {
-    type: String,
-    default: '',
-  },
-  currency: {
-    type: [Object, String, null],
-    required: true,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  itemValidationScope: {
-    type: String,
-    default: '',
-  },
-})
-
-const companyStore = useCompanyStore()
-
-const defaultCurrency = computed(() => {
-  if (props.currency) {
-    return props.currency
-  } else {
-    return companyStore.selectedCompanyCurrency
-  }
-})
-
-const taxIncludedField = computed({
-  get: () => {
-    return props.store[props.storeProp].tax_included
-  },
-  set: async (value) => {
-    props.store[props.storeProp].tax_included = value
-  },
-})
-
-</script>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
deleted file mode 100644
index 4f002adf..00000000
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <div class="mb-6">
-    <div
-      class="z-20 text-sm font-semibold leading-5 text-primary-400 float-right"
-    >
-      <SelectNotePopup :type="type" @select="onSelectNote" />
-    </div>
-    <label class="text-heading font-medium mb-4 text-sm">
-      {{ $t('invoices.notes') }}
-    </label>
-    <BaseCustomInput
-      v-model="store[storeProp].notes"
-      :content-loading="store.isFetchingInitialSettings"
-      :fields="fields"
-      class="mt-1"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import SelectNotePopup from '../SelectNotePopup.vue'
-
-const props = defineProps({
-  store: {
-    type: Object,
-    default: null,
-  },
-  storeProp: {
-    type: String,
-    default: '',
-  },
-  fields: {
-    type: Object,
-    default: null,
-  },
-  type: {
-    type: String,
-    default: null,
-  },
-})
-
-function onSelectNote(data) {
-  props.store[props.storeProp].notes = '' + data.notes
-}
-</script>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
deleted file mode 100644
index f8dcf578..00000000
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotal.vue
+++ /dev/null
@@ -1,402 +0,0 @@
-<template>
-  <div
-    class="
-      px-5
-      py-4
-      mt-6
-      bg-surface
-      border border-line-light border-solid
-      rounded-xl shadow
-      md:min-w-[390px]
-      min-w-[300px]
-      lg:mt-7
-    "
-  >
-    <div class="flex items-center justify-between w-full">
-      <BaseContentPlaceholders v-if="isLoading">
-        <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-      </BaseContentPlaceholders>
-      <label
-        v-else
-        class="text-sm font-semibold leading-5 text-subtle uppercase"
-      >
-        {{ $t('estimates.sub_total') }}
-      </label>
-
-      <BaseContentPlaceholders v-if="isLoading">
-        <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-      </BaseContentPlaceholders>
-
-      <label
-        v-else
-        class="flex items-center justify-center m-0 text-lg text-heading uppercase "
-      >
-        <BaseFormatMoney
-          :amount="store.getSubTotal"
-          :currency="defaultCurrency"
-        />
-      </label>
-    </div>
-
-    <div
-      v-if="store[storeProp].tax_per_item === 'YES'"
-    >
-      <NetTotal
-        :currency="currency"
-        :store="store"
-        :storeProp="storeProp"
-        :isLoading="isLoading"
-      />
-    </div>
-
-    <div
-      v-for="tax in itemWiseTaxes"
-      :key="tax.tax_type_id"
-      class="flex items-center justify-between w-full"
-    >
-      <BaseContentPlaceholders v-if="isLoading">
-        <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-      </BaseContentPlaceholders>
-      <label
-        v-else-if="store[storeProp].tax_per_item === 'YES'"
-        class="m-0 text-sm font-semibold leading-5 text-muted uppercase"
-      >
-        <template v-if="tax.calculation_type === 'percentage'">
-          {{ tax.name }} - {{ tax.percent }}%
-        </template>
-        <template v-else>
-          {{ tax.name }} - <BaseFormatMoney :amount="tax.fixed_amount" :currency="defaultCurrency" />
-        </template>
-      </label>
-
-      <BaseContentPlaceholders v-if="isLoading">
-        <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-      </BaseContentPlaceholders>
-
-      <label
-        v-else-if="store[storeProp].tax_per_item === 'YES'"
-        class="flex items-center justify-center m-0 text-lg text-heading uppercase "
-      >
-        <BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
-      </label>
-    </div>
-
-    <div
-      v-if="
-        store[storeProp].discount_per_item === 'NO' ||
-        store[storeProp].discount_per_item === null
-      "
-      class="flex items-center justify-between w-full mt-2"
-    >
-      <BaseContentPlaceholders v-if="isLoading">
-        <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-      </BaseContentPlaceholders>
-      <label
-        v-else
-        class="text-sm font-semibold leading-5 text-subtle uppercase"
-      >
-        {{ $t('estimates.discount') }}
-      </label>
-      <BaseContentPlaceholders v-if="isLoading">
-        <BaseContentPlaceholdersText
-          :lines="1"
-          class="w-24 h-8 border border-line-light rounded-md"
-        />
-      </BaseContentPlaceholders>
-      <div v-else class="flex" style="width: 140px" role="group">
-        <BaseInput
-          v-model="totalDiscount"
-          class="
-            border-r-0
-            focus:border-r-2
-            rounded-tr-sm rounded-br-sm
-            h-[38px]
-          "
-        />
-        <BaseDropdown position="bottom-end">
-          <template #activator>
-            <BaseButton
-              class="p-2 rounded-none rounded-tr-md rounded-br-md"
-              type="button"
-              variant="white"
-            >
-              <span class="flex items-center">
-                {{
-                  store[storeProp].discount_type == 'fixed'
-                    ? defaultCurrency.symbol
-                    : '%'
-                }}
-
-                <BaseIcon
-                  name="ChevronDownIcon"
-                  class="w-4 h-4 ml-1 text-muted"
-                />
-              </span>
-            </BaseButton>
-          </template>
-
-          <BaseDropdownItem @click="selectFixed">
-            {{ $t('general.fixed') }}
-          </BaseDropdownItem>
-
-          <BaseDropdownItem @click="selectPercentage">
-            {{ $t('general.percentage') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </div>
-    </div>
-
-    <div
-      v-if="
-        store[storeProp].tax_per_item === 'NO' ||
-        store[storeProp].tax_per_item === null
-      "
-      class="flex items-center justify-between w-full mt-2"
-    >
-      <NetTotal
-        :currency="currency"
-        :store="store"
-        :storeProp="storeProp"
-        :isLoading="isLoading"
-      />
-    </div>
-
-    <div
-      v-if="
-        store[storeProp].tax_per_item === 'NO' ||
-        store[storeProp].tax_per_item === null
-      "
-    >
-      <Tax
-        v-for="(tax, index) in taxes"
-        :key="tax.id"
-        :index="index"
-        :tax="tax"
-        :taxes="taxes"
-        :currency="currency"
-        :store="store"
-        :storeProp="storeProp"
-        @remove="removeTax"
-        @update="updateTax"
-      />
-    </div>
-
-    <div
-      v-if="
-        store[storeProp].tax_per_item === 'NO' ||
-        store[storeProp].tax_per_item === null
-      "
-      ref="taxModal"
-      class="float-right pt-2 pb-4"
-    >
-      <SelectTaxPopup
-        :store-prop="storeProp"
-        :store="store"
-        :type="taxPopupType"
-        @select:taxType="onSelectTax"
-      />
-    </div>
-
-    <div
-      class="flex items-center justify-between w-full pt-2 mt-5 border-t border-line-light border-solid "
-    >
-      <BaseContentPlaceholders v-if="isLoading">
-        <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-      </BaseContentPlaceholders>
-      <label
-        v-else
-        class="m-0 text-sm font-semibold leading-5 text-subtle uppercase"
-        >{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
-      >
-
-      <BaseContentPlaceholders v-if="isLoading">
-        <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-      </BaseContentPlaceholders>
-      <label
-        v-else
-        class="flex items-center justify-center text-lg uppercase  text-primary-400"
-      >
-        <BaseFormatMoney :amount="store.getTotal" :currency="defaultCurrency" />
-      </label>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, inject, ref, watch } from 'vue'
-import Guid from 'guid'
-import NetTotal from './NetTotal.vue'
-import Tax from './CreateTotalTaxes.vue'
-import TaxStub from '@/scripts/admin/stub/abilities'
-import SelectTaxPopup from './SelectTaxPopup.vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const taxModal = ref(null)
-
-const props = defineProps({
-  store: {
-    type: Object,
-    default: null,
-  },
-  storeProp: {
-    type: String,
-    default: '',
-  },
-  taxPopupType: {
-    type: String,
-    default: '',
-  },
-  currency: {
-    type: [Object, String],
-    default: '',
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const utils = inject('$utils')
-
-const companyStore = useCompanyStore()
-
-watch(
-  () => props.store[props.storeProp].items,
-  (val) => {
-    setDiscount()
-  }, { deep: true },
-)
-
-const totalDiscount = computed({
-  get: () => {
-    return props.store[props.storeProp].discount
-  },
-  set: (newValue) => {
-    props.store[props.storeProp].discount = newValue
-    setDiscount()
-  },
-})
-
-const taxes = computed({
-  get: () => props.store[props.storeProp].taxes,
-  set: (value) => {
-    props.store.$patch((state) => {
-      state[props.storeProp].taxes = value
-    })
-  },
-})
-
-const itemWiseTaxes = computed(() => {
-  let taxes = []
-  props.store[props.storeProp].items.forEach((item) => {
-    if (item.taxes) {
-      item.taxes.forEach((tax) => {
-        let found = taxes.find((_tax) => {
-          return _tax.tax_type_id === tax.tax_type_id
-        })
-        if (found) {
-          found.amount += tax.amount
-        } else if (tax.tax_type_id) {
-          taxes.push({
-            tax_type_id: tax.tax_type_id,
-            amount: Math.round(tax.amount),
-            percent: tax.percent,
-            name: tax.name,
-            calculation_type: tax.calculation_type,
-            fixed_amount: tax.fixed_amount
-          })
-        }
-      })
-    }
-  })
-  return taxes
-})
-
-const defaultCurrency = computed(() => {
-  if (props.currency) {
-    return props.currency
-  } else {
-    return companyStore.selectedCompanyCurrency
-  }
-})
-
-function setDiscount() {
-  const newValue = props.store[props.storeProp].discount
-
-  if (props.store[props.storeProp].discount_type === 'percentage') {
-    props.store[props.storeProp].discount_val
-      = Math.round((props.store.getSubTotal * newValue) / 100)
-
-    return
-  }
-
-  props.store[props.storeProp].discount_val = Math.round(newValue * 100)
-}
-
-function selectFixed() {
-  if (props.store[props.storeProp].discount_type === 'fixed') {
-    return
-  }
-  props.store[props.storeProp].discount_val = Math.round(
-    props.store[props.storeProp].discount * 100
-  )
-  props.store[props.storeProp].discount_type = 'fixed'
-}
-
-function selectPercentage() {
-  if (props.store[props.storeProp].discount_type === 'percentage'){
-    return
-  }
-
-  const val = Math.round(props.store[props.storeProp].discount * 100) / 100
-
-  props.store[props.storeProp].discount_val
-    = Math.round((props.store.getSubTotal * val) / 100)
-
-  props.store[props.storeProp].discount_type = 'percentage'
-}
-
-function onSelectTax(selectedTax) {
-  let amount = 0
-  if (selectedTax.calculation_type === 'percentage' && props.store.getSubtotalWithDiscount && selectedTax.percent) {
-    amount = Math.round(
-      (props.store.getSubtotalWithDiscount * selectedTax.percent) / 100
-    )
-  } else if (selectedTax.calculation_type === 'fixed') {
-    amount = selectedTax.fixed_amount
-  }
-
-  let data = {
-    ...TaxStub,
-    id: Guid.raw(),
-    name: selectedTax.name,
-    percent: selectedTax.percent,
-    tax_type_id: selectedTax.id,
-    amount,
-    calculation_type: selectedTax.calculation_type,
-    fixed_amount: selectedTax.fixed_amount
-  }
-  props.store.$patch((state) => {
-    state[props.storeProp].taxes.push({ ...data })
-  })
-}
-
-function updateTax(data) {
-  const tax = props.store[props.storeProp].taxes.find(
-    (tax) => tax.id === data.id
-  )
-  if (tax) {
-    Object.assign(tax, { ...data })
-  }
-}
-
-function removeTax(id) {
-  const index = props.store[props.storeProp].taxes.findIndex(
-    (tax) => tax.id === id
-  )
-
-  props.store.$patch((state) => {
-    state[props.storeProp].taxes.splice(index, 1)
-  })
-}
-</script>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue b/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
deleted file mode 100644
index 49a35db4..00000000
--- a/resources/scripts/admin/components/estimate-invoice-common/CreateTotalTaxes.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-  <div class="flex items-center justify-between w-full mt-2 text-sm">
-    <label v-if="tax.calculation_type === 'percentage'" class="font-semibold leading-5 text-muted uppercase">
-      {{ tax.name }} ({{ tax.percent }} %)
-    </label>
-    <label v-else class="font-semibold leading-5 text-muted uppercase">
-      {{ tax.name }} (<BaseFormatMoney :amount="tax.fixed_amount" :currency="currency" />)
-    </label>
-    <label class="flex items-center justify-center text-lg text-heading">
-      <BaseFormatMoney :amount="tax.amount" :currency="currency" />
-
-      <BaseIcon
-        name="TrashIcon"
-        class="h-5 ml-2 cursor-pointer"
-        @click="$emit('remove', tax.id)"
-      />
-    </label>
-  </div>
-</template>
-
-<script setup>
-import { computed, watch, inject, watchEffect } from 'vue'
-
-const props = defineProps({
-  index: {
-    type: Number,
-    required: true,
-  },
-  tax: {
-    type: Object,
-    required: true,
-  },
-  taxes: {
-    type: Array,
-    required: true,
-  },
-  currency: {
-    type: [Object, String],
-    required: true,
-  },
-  store: {
-    type: Object,
-    default: null,
-  },
-  storeProp: {
-    type: String,
-    default: '',
-  },
-  data: {
-    type: String,
-    default: '',
-  },
-})
-
-const emit = defineEmits(['update', 'remove'])
-
-const utils = inject('$utils')
-
-const taxAmount = computed(() => {
-  if (props.tax.calculation_type === 'fixed') {
-    return props.tax.fixed_amount;
-  }
-  
-  if (props.tax.compound_tax && props.store.getSubtotalWithDiscount) {
-    return Math.round(
-      ((props.store.getSubtotalWithDiscount + props.store.getTotalSimpleTax) *
-        props.tax.percent) /
-        100
-    )
-  }
-  if (props.store.getSubtotalWithDiscount && props.tax.percent && props.store[props.storeProp].tax_included) {
-    return Math.round(
-      props.store.getSubtotalWithDiscount - (
-        props.store.getSubtotalWithDiscount / (1 + (props.tax.percent / 100))
-      )
-    )
-  }
-  if (props.store.getSubtotalWithDiscount && props.tax.percent) {
-    return Math.round(
-      (props.store.getSubtotalWithDiscount * props.tax.percent) / 100
-    )
-  }
-  return 0
-})
-
-watchEffect(() => {
-  if (props.store.getSubtotalWithDiscount) {
-    updateTax()
-  }
-  if (props.store.getTotalSimpleTax) {
-    updateTax()
-  }
-})
-
-watch(
-  () => props.store[props.storeProp].tax_included,
-  (val) => {
-    updateTax()
-  }, { deep: true },
-)
-
-function updateTax() {
-  emit('update', {
-    ...props.tax,
-    amount: taxAmount.value,
-  })
-}
-</script>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue b/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
deleted file mode 100644
index dc1c8b7d..00000000
--- a/resources/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<template>
-  <BaseInputGroup
-    v-if="store.showExchangeRate && selectedCurrency"
-    :content-loading="isFetching && !isEdit"
-    :label="$t('settings.exchange_rate.exchange_rate')"
-    :error="v.exchange_rate.$error && v.exchange_rate.$errors[0].$message"
-    required
-  >
-    <template #labelRight>
-      <div v-if="hasActiveProvider && isEdit">
-        <BaseIcon
-          v-tooltip="{ content: 'Fetch Latest Exchange rate' }"
-          name="ArrowPathIcon"
-          :class="`h-4 w-4 text-primary-500 cursor-pointer outline-hidden ${
-            isFetching
-              ? ' animate-spin rotate-180 cursor-not-allowed pointer-events-none '
-              : ''
-          }`"
-          @click="getCurrenctExchangeRate(customerCurrency)"
-        />
-      </div>
-    </template>
-    <BaseInput
-      v-model="store[storeProp].exchange_rate"
-      :content-loading="isFetching && !isEdit"
-      :addon="`1 ${selectedCurrency.code} =`"
-      :disabled="isFetching"
-      @input="v.exchange_rate.$touch()"
-    >
-      <template #right>
-        <span class="text-muted sm:text-sm">
-          {{ companyCurrency.code }}
-        </span>
-      </template>
-    </BaseInput>
-    <span class="text-subtle text-xs mt-2 font-light">
-      {{
-        $t('settings.exchange_rate.exchange_help_text', {
-          currency: selectedCurrency.code,
-          baseCurrency: companyCurrency.code,
-        })
-      }}
-    </span>
-  </BaseInputGroup>
-</template>
-
-<script setup>
-import { watch, computed, ref, onBeforeUnmount } from 'vue'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useExchangeRateStore } from '@/scripts/admin/stores/exchange-rate'
-
-const props = defineProps({
-  v: {
-    type: Object,
-    default: null,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  store: {
-    type: Object,
-    default: null,
-  },
-  storeProp: {
-    type: String,
-    default: '',
-  },
-  isEdit: {
-    type: Boolean,
-    default: false,
-  },
-  customerCurrency: {
-    type: [String, Number],
-    default: null,
-  },
-})
-const globalStore = useGlobalStore()
-const companyStore = useCompanyStore()
-const exchangeRateStore = useExchangeRateStore()
-const hasActiveProvider = ref(false)
-let isFetching = ref(false)
-
-globalStore.fetchCurrencies()
-
-const companyCurrency = computed(() => {
-  return companyStore.selectedCompanyCurrency
-})
-
-const selectedCurrency = computed(() => {
-  return globalStore.currencies.find(
-    (c) => c.id === props.store[props.storeProp].currency_id
-  )
-})
-
-const isCurrencyDiffrent = computed(() => {
-  return companyCurrency.value.id !== props.customerCurrency
-})
-
-watch(
-  () => props.store[props.storeProp].customer,
-  (v) => {
-    setCustomerCurrency(v)
-  },
-  { deep: true }
-)
-
-watch(
-  () => props.store[props.storeProp].currency_id,
-  (v) => {
-    onChangeCurrency(v)
-  },
-  { immediate: true }
-)
-watch(
-  () => props.customerCurrency,
-  (v) => {
-    if (v && props.isEdit) {
-      checkForActiveProvider(v)
-    }
-  },
-  { immediate: true }
-)
-
-function checkForActiveProvider() {
-  if (isCurrencyDiffrent.value) {
-    exchangeRateStore
-      .checkForActiveProvider(props.customerCurrency)
-      .then((res) => {
-        if (res.data.success) {
-          hasActiveProvider.value = true
-        }
-      })
-  }
-}
-
-function setCustomerCurrency(v) {
-  if (v) {
-    props.store[props.storeProp].currency_id = v.currency.id
-  } else {
-    props.store[props.storeProp].currency_id = companyCurrency.value.id
-  }
-}
-
-async function onChangeCurrency(v) {
-  if (v !== companyCurrency.value.id) {
-    if (!props.isEdit && v) {
-      await getCurrenctExchangeRate(v)
-    }
-
-    props.store.showExchangeRate = true
-  } else {
-    props.store.showExchangeRate = false
-  }
-}
-
-function getCurrenctExchangeRate(v) {
-  isFetching.value = true
-  exchangeRateStore
-    .getCurrentExchangeRate(v)
-    .then((res) => {
-      if (res.data && !res.data.error) {
-        props.store[props.storeProp].exchange_rate = res.data.exchangeRate[0]
-      } else {
-        props.store[props.storeProp].exchange_rate = ''
-      }
-      isFetching.value = false
-    })
-    .catch((err) => {
-      isFetching.value = false
-    })
-}
-
-onBeforeUnmount(() => {
-  props.store.showExchangeRate = false
-})
-</script>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/NetTotal.vue b/resources/scripts/admin/components/estimate-invoice-common/NetTotal.vue
deleted file mode 100644
index 175f3d88..00000000
--- a/resources/scripts/admin/components/estimate-invoice-common/NetTotal.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <div
-    v-if="store[storeProp].tax_included"
-    class="flex items-center justify-between w-full"
-  >
-    <BaseContentPlaceholders v-if="isLoading">
-      <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-    </BaseContentPlaceholders>
-    <label
-      v-else
-      class="text-sm font-semibold leading-5 text-muted uppercase"
-    >
-      {{ $t('estimates.net_total') }}
-    </label>
-
-    <BaseContentPlaceholders v-if="isLoading">
-      <BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
-    </BaseContentPlaceholders>
-
-    <label
-      v-else
-      class="flex items-center justify-center m-0 text-lg text-heading uppercase "
-    >
-      <BaseFormatMoney
-        :amount="store.getNetTotal"
-        :currency="currency"
-      />
-    </label>
-  </div>
-</template>
-<script setup>
-import BaseContentPlaceholdersText from '@/scripts/components/base/BaseContentPlaceholdersText.vue'
-import BaseContentPlaceholders from '@/scripts/components/base/BaseContentPlaceholders.vue'
-import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
-
-const props = defineProps({
-  store: {
-    type: Object,
-    default: null,
-  },
-  storeProp: {
-    type: String,
-    default: '',
-  },
-  currency: {
-    type: [Object, String],
-    default: '',
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/SalesTax.vue b/resources/scripts/admin/components/estimate-invoice-common/SalesTax.vue
deleted file mode 100644
index ddae749a..00000000
--- a/resources/scripts/admin/components/estimate-invoice-common/SalesTax.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<template>
-  <TaxationAddressModal @addTax="addSalesTax" />
-</template>
-
-<script setup>
-import {} from '@/scripts/admin/stores/recurring-invoice'
-import { useModalStore } from '@/scripts/stores/modal'
-import { computed, watch, onMounted, ref, reactive } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
-import TaxationAddressModal from '@/scripts/admin/components/modal-components/TaxationAddressModal.vue'
-const SALES_TAX_US = 'Sales Tax'
-const SALES_TAX_MODULE = 'MODULE'
-const modalStore = useModalStore()
-const companyStore = useCompanyStore()
-const taxTypeStore = useTaxTypeStore()
-const { t } = useI18n()
-import { isEqual, pick } from 'lodash'
-
-const fetchingTax = ref(false)
-
-const props = defineProps({
-  isEdit: {
-    type: Boolean,
-    default: null,
-  },
-  type: {
-    type: String,
-    default: null,
-  },
-  customer: {
-    type: [Object],
-    default: null,
-  },
-  store: {
-    type: Object,
-    default: null,
-  },
-  storeProp: {
-    type: String,
-    default: null,
-  },
-})
-
-const isSalesTaxTypeBilling = computed(() => {
-  return props.isEdit
-    ? props.store[props.storeProp].sales_tax_address_type === 'billing'
-    : companyStore.selectedCompanySettings.sales_tax_address_type === 'billing'
-})
-
-const salesTaxEnabled = computed(() => {
-  return companyStore.selectedCompanySettings.sales_tax_us_enabled === 'YES'
-})
-
-const salesTaxCustomerLevel = computed(() => {
-  return props.isEdit
-    ? props.store[props.storeProp].sales_tax_type === 'customer_level'
-    : companyStore.selectedCompanySettings.sales_tax_type === 'customer_level'
-})
-
-const salesTaxCompanyLevel = computed(() => {
-  return props.isEdit
-    ? props.store[props.storeProp].sales_tax_type === 'company_level'
-    : companyStore.selectedCompanySettings.sales_tax_type === 'company_level'
-})
-
-const addressData = computed(() => {
-  if (salesTaxCustomerLevel.value && isAddressAvailable.value) {
-    let address = isSalesTaxTypeBilling.value
-      ? props.customer.billing
-      : props.customer.shipping
-    return {
-      address: pick(address, ['address_street_1', 'city', 'state', 'zip']),
-      customer_id: props.customer.id,
-    }
-  } else if (salesTaxCompanyLevel.value && isAddressAvailable.value) {
-    return {
-      address: pick(address, ['address_street_1', 'city', 'state', 'zip']),
-    }
-  }
-  return null
-})
-
-const isAddressAvailable = computed(() => {
-  if (salesTaxCustomerLevel.value) {
-    let address = isSalesTaxTypeBilling.value
-      ? props.customer?.billing
-      : props.customer?.shipping
-
-    return hasAddress(address)
-  } else if (salesTaxCompanyLevel.value) {
-    return hasAddress(companyStore.selectedCompany.address)
-  }
-  return false
-})
-
-watch(
-  () => props.customer,
-  (v, o) => {
-    if (v && o && salesTaxCustomerLevel.value) {
-      // call if customer changed address
-      isCustomerAddressChanged(v, o)
-      return
-    }
-    if (!isAddressAvailable.value && salesTaxCustomerLevel.value && v) {
-      setTimeout(() => {
-        openAddressModal()
-      }, 500)
-    } else if (salesTaxCustomerLevel.value && v) {
-      fetchSalesTax()
-    } else if (salesTaxCustomerLevel.value && !v) {
-      removeSalesTax()
-    }
-  }
-)
-
-// Open modal for company address
-onMounted(() => {
-  if (salesTaxCompanyLevel.value) {
-    isAddressAvailable.value ? fetchSalesTax() : openAddressModal()
-  }
-})
-
-function hasAddress(address) {
-  if (!address) return false
-
-  return (
-    address.address_street_1 && address.city && address.state && address.zip
-  )
-}
-
-function isCustomerAddressChanged(newV, oldV) {
-  const newData = isSalesTaxTypeBilling.value ? newV.billing : newV.shipping
-  const oldData = isSalesTaxTypeBilling.value ? oldV.billing : oldV.shipping
-
-  const newAdd = pick(newData, ['address_street_1', 'city', 'state', 'zip'])
-  const oldAdd = pick(oldData, ['address_street_1', 'city', 'state', 'zip'])
-  !isEqual(newAdd, oldAdd) ? fetchSalesTax() : ''
-}
-
-function openAddressModal() {
-  if (!salesTaxEnabled.value) return
-  let modalData = null
-  let title = ''
-  if (salesTaxCustomerLevel.value) {
-    if (isSalesTaxTypeBilling.value) {
-      modalData = props.customer?.billing
-      title = t('settings.taxations.add_billing_address')
-    } else {
-      modalData = props.customer?.shipping
-      title = t('settings.taxations.add_shipping_address')
-    }
-  } else {
-    modalData = companyStore.selectedCompany.address
-    title = t('settings.taxations.add_company_address')
-  }
-
-  modalStore.openModal({
-    title: title,
-    content: t('settings.taxations.modal_description'),
-    componentName: 'TaxationAddressModal',
-    data: modalData,
-    id: salesTaxCustomerLevel.value ? props.customer.id : '',
-  })
-}
-
-async function fetchSalesTax() {
-  if (!salesTaxEnabled.value) return
-
-  fetchingTax.value = true
-  await taxTypeStore
-    .fetchSalesTax(addressData.value)
-    .then((res) => {
-      addSalesTax(res.data.data)
-      fetchingTax.value = false
-    })
-    .catch((err) => {
-      if (err.response.data.error) {
-        setTimeout(() => {
-          openAddressModal()
-        }, 500)
-      }
-      fetchingTax.value = false
-    })
-}
-
-function addSalesTax(tax) {
-  tax.tax_type_id = tax.id
-
-  const i = props.store[props.storeProp].taxes.findIndex(
-    (_t) => _t.name === SALES_TAX_US && _t.type === SALES_TAX_MODULE
-  )
-
-  if (i > -1) {
-    Object.assign(props.store[props.storeProp].taxes[i], tax)
-  } else {
-    props.store[props.storeProp].taxes.push(tax)
-  }
-}
-
-function removeSalesTax() {
-  // remove from total taxes
-  const i = props.store[props.storeProp].taxes.findIndex(
-    (_t) => _t.name === SALES_TAX_US && _t.type === SALES_TAX_MODULE
-  )
-  i > -1 ? props.store[props.storeProp].taxes.splice(i, 1) : ''
-
-  //  remove from tax-type list
-  let pos = taxTypeStore.taxTypes.findIndex(
-    (_t) => _t.name === SALES_TAX_US && _t.type === SALES_TAX_MODULE
-  )
-
-  pos > -1 ? taxTypeStore.taxTypes.splice(pos, 1) : ''
-}
-</script>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue b/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
deleted file mode 100644
index 27d5a7a5..00000000
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
+++ /dev/null
@@ -1,243 +0,0 @@
-<template>
-  <div class="w-full mt-4 tax-select">
-    <Popover v-slot="{ isOpen }" class="relative">
-      <PopoverButton
-        :class="isOpen ? '' : ''"
-        class="
-          flex
-          items-center
-          text-sm
-          font-medium
-          text-primary-400
-          focus:outline-hidden focus:border-none
-        "
-      >
-        <BaseIcon
-          name="PlusIcon"
-          class="w-4 h-4 font-medium text-primary-400"
-        />
-        {{ $t('settings.tax_types.add_tax') }}
-      </PopoverButton>
-
-      <!-- Tax Select Popup -->
-      <div class="relative w-full max-w-md px-4">
-        <transition
-          enter-active-class="transition duration-200 ease-out"
-          enter-from-class="translate-y-1 opacity-0"
-          enter-to-class="translate-y-0 opacity-100"
-          leave-active-class="transition duration-150 ease-in"
-          leave-from-class="translate-y-0 opacity-100"
-          leave-to-class="translate-y-1 opacity-0"
-        >
-          <PopoverPanel
-            v-slot="{ close }"
-            style="min-width: 350px; margin-left: 62px; top: -28px"
-            class="absolute z-10 px-4 py-2 -translate-x-full sm:px-0"
-          >
-            <div
-              class="
-                overflow-hidden
-                rounded-xl
-                shadow
-                ring-1 ring-black/5
-              "
-            >
-              <!-- Tax Search Input  -->
-
-              <div class="relative bg-surface">
-                <div class="relative p-4">
-                  <BaseInput
-                    v-model="textSearch"
-                    :placeholder="$t('general.search')"
-                    type="text"
-                    class="text-heading"
-                  >
-                  </BaseInput>
-                </div>
-
-                <!-- List of Taxes  -->
-                <div
-                  v-if="filteredTaxType.length > 0"
-                  class="
-                    relative
-                    flex flex-col
-                    overflow-auto
-                    list
-                    max-h-36
-                    border-t border-line-light
-                  "
-                >
-                  <div
-                    v-for="(taxType, index) in filteredTaxType"
-                    :key="index"
-                    :class="{
-                      'bg-surface-tertiary cursor-not-allowed opacity-50 pointer-events-none':
-                        taxes.find((val) => {
-                          return val.tax_type_id === taxType.id
-                        }),
-                    }"
-                    tabindex="2"
-                    class="
-                      px-6
-                      py-4
-                      border-b border-line-light border-solid
-                      cursor-pointer
-                      hover:bg-surface-tertiary hover:cursor-pointer
-                      last:border-b-0
-                    "
-                    @click="selectTaxType(taxType, close)"
-                  >
-                    <div class="flex justify-between px-2">
-                      <label
-                        class="
-                          m-0
-                          text-base
-                          font-semibold
-                          leading-tight
-                          text-body
-                          cursor-pointer
-                        "
-                      >
-                        {{ taxType.name }}
-                      </label>
-
-                      <label
-                        class="
-                          m-0
-                          text-base
-                          font-semibold
-                          text-body
-                          cursor-pointer
-                        "
-                      >
-                        <template v-if="taxType.calculation_type === 'fixed'">
-                          <BaseFormatMoney :amount="taxType.fixed_amount" :currency="companyStore.selectedCompanyCurrency" />
-                        </template>
-                        <template v-else>
-                          {{ taxType.percent }} %
-                        </template>
-                      </label>
-                    </div>
-                  </div>
-                </div>
-
-                <div v-else class="flex justify-center p-5 text-subtle">
-                  <label class="text-base text-muted cursor-pointer">
-                    {{ $t('general.no_tax_found') }}
-                  </label>
-                </div>
-              </div>
-
-              <!-- Add new Tax action -->
-              <button
-                v-if="userStore.hasAbilities(abilities.CREATE_TAX_TYPE)"
-                type="button"
-                class="
-                  flex
-                  items-center
-                  justify-center
-                  w-full
-                  h-10
-                  px-2
-                  py-3
-                  bg-surface-muted
-                  border-none
-                  outline-hidden
-                "
-                @click="openTaxTypeModal"
-              >
-                <BaseIcon name="CheckCircleIcon" class="text-primary-400" />
-                <label
-                  class="
-                    m-0
-                    ml-3
-                    text-sm
-                    leading-none
-                    cursor-pointer
-                    font-base
-                    text-primary-400
-                  "
-                >
-                  {{ $t('estimates.add_new_tax') }}
-                </label>
-              </button>
-            </div>
-          </PopoverPanel>
-        </transition>
-      </div>
-    </Popover>
-  </div>
-</template>
-
-<script setup>
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-import { computed, ref, inject, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import abilities from '@/scripts/admin/stub/abilities'
-import BaseFormatMoney from '@/scripts/components/base/BaseFormatMoney.vue'
-
-const props = defineProps({
-  type: {
-    type: String,
-    default: null,
-  },
-  store: {
-    type: Object,
-    default: null,
-  },
-  storeProp: {
-    type: String,
-    default: '',
-  },
-})
-
-const emit = defineEmits(['select:taxType'])
-
-const modalStore = useModalStore()
-const taxTypeStore = useTaxTypeStore()
-const userStore = useUserStore()
-const companyStore = useCompanyStore()
-
-const { t } = useI18n()
-const textSearch = ref(null)
-
-const formatMoney = (amount) => {
-  return companyStore.formatMoney(amount)
-}
-
-const filteredTaxType = computed(() => {
-  if (textSearch.value) {
-    return taxTypeStore.taxTypes.filter(function (el) {
-      return (
-        el.name.toLowerCase().indexOf(textSearch.value.toLowerCase()) !== -1
-      )
-    })
-  } else {
-    return taxTypeStore.taxTypes
-  }
-})
-
-const taxes = computed(() => {
-  return props.store[props.storeProp].taxes
-})
-
-function selectTaxType(data, close) {
-  emit('select:taxType', { ...data })
-  close()
-}
-
-function openTaxTypeModal() {
-  modalStore.openModal({
-    title: t('settings.tax_types.add_tax'),
-    componentName: 'TaxTypeModal',
-    size: 'sm',
-    refreshData: (data) => emit('select:taxType', data),
-  })
-}
-</script>
diff --git a/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue b/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
deleted file mode 100644
index 3b48ab74..00000000
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div>
-    <label class="flex text-heading font-medium text-sm mb-2">
-      {{ $t('general.select_template') }}
-      <span class="text-sm text-red-500"> *</span>
-    </label>
-    <BaseButton
-      type="button"
-      class="flex justify-center w-full text-sm lg:w-auto hover:bg-surface-muted"
-      variant="gray"
-      @click="openTemplateModal"
-    >
-      <template #right="slotProps">
-        <BaseIcon name="PencilIcon" :class="slotProps.class" />
-      </template>
-      {{ store[storeProp].template_name }}
-    </BaseButton>
-  </div>
-</template>
-
-<script setup>
-import { useModalStore } from '@/scripts/stores/modal'
-import { useI18n } from 'vue-i18n'
-
-const props = defineProps({
-  store: {
-    type: Object,
-    default: null,
-  },
-  storeProp: {
-    type: String,
-    default: '',
-  },
-  isMarkAsDefault: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const modalStore = useModalStore()
-
-const { t } = useI18n()
-
-function openTemplateModal() {
-  let markAsDefaultDescription = ''
-  if (props.storeProp == 'newEstimate') {
-    markAsDefaultDescription = t(
-      'estimates.mark_as_default_estimate_template_description'
-    )
-  } else if (props.storeProp == 'newInvoice') {
-    markAsDefaultDescription = t(
-      'invoices.mark_as_default_invoice_template_description'
-    )
-  }
-
-  modalStore.openModal({
-    title: t('general.choose_template'),
-    componentName: 'SelectTemplate',
-    data: {
-      templates: props.store.templates,
-      store: props.store,
-      storeProp: props.storeProp,
-      isMarkAsDefault: props.isMarkAsDefault,
-      markAsDefaultDescription,
-    },
-  })
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/BackupModal.vue b/resources/scripts/admin/components/modal-components/BackupModal.vue
deleted file mode 100644
index 28e92773..00000000
--- a/resources/scripts/admin/components/modal-components/BackupModal.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @close="onCancel" @open="loadData">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="w-6 h-6 text-muted cursor-pointer"
-          @click="onCancel"
-        />
-      </div>
-    </template>
-
-    <form @submit.prevent="createNewBackup">
-      <div class="p-6">
-        <BaseInputGrid layout="one-column">
-          <BaseInputGroup
-            :label="$t('settings.backup.select_backup_type')"
-            :error="
-              v$.currentBackupData.option.$error &&
-              v$.currentBackupData.option.$errors[0].$message
-            "
-            horizontal
-            required
-            class="py-2"
-          >
-            <BaseMultiselect
-              v-model="backupStore.currentBackupData.option"
-              :options="options"
-              :can-deselect="false"
-              :placeholder="$t('settings.backup.select_backup_type')"
-              searchable
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('settings.disk.select_disk')"
-            :error="
-              v$.currentBackupData.selected_disk.$error &&
-              v$.currentBackupData.selected_disk.$errors[0].$message
-            "
-            horizontal
-            required
-            class="py-2"
-          >
-            <BaseMultiselect
-              v-model="backupStore.currentBackupData.selected_disk"
-              :content-loading="isFetchingInitialData"
-              :options="getDisksOptions"
-              :searchable="true"
-              :allow-empty="false"
-              label="name"
-              value-prop="id"
-              :placeholder="$t('settings.disk.select_disk')"
-              track-by="name"
-              object
-            />
-          </BaseInputGroup>
-        </BaseInputGrid>
-      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-      >
-        <BaseButton
-          class="mr-3"
-          variant="primary-outline"
-          type="button"
-          @click="onCancel"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton
-          :loading="isCreateLoading"
-          :disabled="isCreateLoading"
-          variant="primary"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isCreateLoading"
-              name="ArrowDownOnSquareIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{ $t('general.create') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { useBackupStore } from '@/scripts/admin/stores/backup'
-import { useI18n } from 'vue-i18n'
-import { computed, reactive, ref } from 'vue'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useDiskStore } from '@/scripts/admin/stores/disk'
-import { required, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-
-let table = ref(null)
-let isSaving = ref(false)
-let isCreateLoading = ref(false)
-let isFetchingInitialData = ref(false)
-const options = reactive(['full', 'only-db', 'only-files'])
-
-const backupStore = useBackupStore()
-const modalStore = useModalStore()
-const diskStore = useDiskStore()
-const { t } = useI18n()
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'BackupModal'
-})
-
-const getDisksOptions = computed(() => {
-  return diskStore.disks.map((disk) => {
-    return {
-      ...disk,
-      name: disk.name + ' — ' + '[' + disk.driver + ']',
-    }
-  })
-})
-
-const rules = computed(() => {
-  return {
-    currentBackupData: {
-      option: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      selected_disk: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => backupStore)
-)
-
-async function createNewBackup() {
-  v$.value.currentBackupData.$touch()
-  if (v$.value.currentBackupData.$invalid) {
-    return true
-  }
-
-  let data = {
-    option: backupStore.currentBackupData.option,
-    file_disk_id: backupStore.currentBackupData.selected_disk.id,
-  }
-  try {
-    isCreateLoading.value = true
-    let res = await backupStore.createBackup(data)
-    if (res.data) {
-      isCreateLoading.value = false
-      modalStore.refreshData ? modalStore.refreshData() : ''
-      modalStore.closeModal()
-    }
-  } catch (e) {
-    isCreateLoading.value = false
-  }
-}
-
-async function loadData() {
-  isFetchingInitialData.value = true
-  let res = await diskStore.fetchDisks({ limit: 'all' })
-  backupStore.currentBackupData.selected_disk = res.data.data[0]
-  isFetchingInitialData.value = false
-}
-
-function onCancel() {
-  modalStore.closeModal()
-
-  setTimeout(() => {
-    v$.value.$reset()
-    backupStore.$reset()
-  })
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/CategoryModal.vue b/resources/scripts/admin/components/modal-components/CategoryModal.vue
deleted file mode 100644
index 5134deb9..00000000
--- a/resources/scripts/admin/components/modal-components/CategoryModal.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @close="closeCategoryModal">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="w-6 h-6 text-muted cursor-pointer"
-          @click="closeCategoryModal"
-        />
-      </div>
-    </template>
-
-    <form action="" @submit.prevent="submitCategoryData">
-      <div class="p-8 sm:p-6">
-        <BaseInputGrid layout="one-column">
-          <BaseInputGroup
-            :label="$t('expenses.category')"
-            :error="
-              v$.currentCategory.name.$error &&
-              v$.currentCategory.name.$errors[0].$message
-            "
-            required
-          >
-            <BaseInput
-              v-model="categoryStore.currentCategory.name"
-              :invalid="v$.currentCategory.name.$error"
-              type="text"
-              @input="v$.currentCategory.name.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('expenses.description')"
-            :error="
-              v$.currentCategory.description.$error &&
-              v$.currentCategory.description.$errors[0].$message
-            "
-          >
-            <BaseTextarea
-              v-model="categoryStore.currentCategory.description"
-              rows="4"
-              cols="50"
-              @input="v$.currentCategory.description.$touch()"
-            />
-          </BaseInputGroup>
-        </BaseInputGrid>
-      </div>
-
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-line-default border-solid
-        "
-      >
-        <BaseButton
-          type="button"
-          variant="primary-outline"
-          class="mr-3 text-sm"
-          @click="closeCategoryModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving"
-          variant="primary"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              name="ArrowDownOnSquareIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{ categoryStore.isEdit ? $t('general.update') : $t('general.save') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { useCategoryStore } from '@/scripts/admin/stores/category'
-import { useModalStore } from '@/scripts/stores/modal'
-import { computed, ref } from 'vue'
-import { required, minLength, maxLength, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-
-const categoryStore = useCategoryStore()
-const modalStore = useModalStore()
-const { t } = useI18n()
-
-let isSaving = ref(false)
-
-const rules = computed(() => {
-  return {
-    currentCategory: {
-      name: {
-        required: helpers.withMessage(t('validation.required'), required),
-        minLength: helpers.withMessage(
-          t('validation.name_min_length', { count: 3 }),
-          minLength(3)
-        ),
-      },
-      description: {
-        maxLength: helpers.withMessage(
-          t('validation.description_maxlength', { count: 255 }),
-          maxLength(255)
-        ),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => categoryStore)
-)
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'CategoryModal'
-})
-
-async function submitCategoryData() {
-  v$.value.currentCategory.$touch()
-
-  if (v$.value.currentCategory.$invalid) {
-    return true
-  }
-
-  const action = categoryStore.isEdit
-    ? categoryStore.updateCategory
-    : categoryStore.addCategory
-
-  isSaving.value = true
-
-  await action(categoryStore.currentCategory)
-
-  isSaving.value = false
-
-  modalStore.refreshData ? modalStore.refreshData() : ''
-
-  closeCategoryModal()
-}
-
-function closeCategoryModal() {
-  modalStore.closeModal()
-
-  setTimeout(() => {
-    categoryStore.$reset()
-    v$.value.$reset()
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/CompanyModal.vue b/resources/scripts/admin/components/modal-components/CompanyModal.vue
deleted file mode 100644
index 0b1f9003..00000000
--- a/resources/scripts/admin/components/modal-components/CompanyModal.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @close="closeCompanyModal" @open="getInitials">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-
-        <BaseIcon
-          name="XMarkIcon"
-          class="w-6 h-6 text-muted cursor-pointer"
-          @click="closeCompanyModal"
-        />
-      </div>
-    </template>
-    <form action="" @submit.prevent="submitCompanyData">
-      <div class="p-4 mb-16 sm:p-6 space-y-4">
-        <BaseInputGrid layout="one-column">
-          <BaseInputGroup
-            :content-loading="isFetchingInitialData"
-            :label="$t('settings.company_info.company_logo')"
-          >
-            <BaseContentPlaceholders v-if="isFetchingInitialData">
-              <BaseContentPlaceholdersBox :rounded="true" class="w-full h-24" />
-            </BaseContentPlaceholders>
-            <div v-else class="flex flex-col items-center">
-              <BaseFileUploader
-                :preview-image="previewLogo"
-                base64
-                @remove="onFileInputRemove"
-                @change="onFileInputChange"
-              />
-            </div>
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('settings.company_info.company_name')"
-            :error="
-              v$.newCompanyForm.name.$error &&
-              v$.newCompanyForm.name.$errors[0].$message
-            "
-            :content-loading="isFetchingInitialData"
-            required
-          >
-            <BaseInput
-              v-model="newCompanyForm.name"
-              :invalid="v$.newCompanyForm.name.$error"
-              :content-loading="isFetchingInitialData"
-              @input="v$.newCompanyForm.name.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :content-loading="isFetchingInitialData"
-            :label="$t('settings.company_info.country')"
-            :error="
-              v$.newCompanyForm.address.country_id.$error &&
-              v$.newCompanyForm.address.country_id.$errors[0].$message
-            "
-            required
-          >
-            <BaseMultiselect
-              v-model="newCompanyForm.address.country_id"
-              :content-loading="isFetchingInitialData"
-              label="name"
-              :invalid="v$.newCompanyForm.address.country_id.$error"
-              :options="globalStore.countries"
-              value-prop="id"
-              :can-deselect="true"
-              :can-clear="false"
-              searchable
-              track-by="name"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('wizard.currency')"
-            :error="
-              v$.newCompanyForm.currency.$error &&
-              v$.newCompanyForm.currency.$errors[0].$message
-            "
-            :content-loading="isFetchingInitialData"
-            :help-text="$t('wizard.currency_set_alert')"
-            required
-          >
-            <BaseMultiselect
-              v-model="newCompanyForm.currency"
-              :content-loading="isFetchingInitialData"
-              :options="globalStore.currencies"
-              label="name"
-              value-prop="id"
-              :searchable="true"
-              track-by="name"
-              :placeholder="$t('settings.currencies.select_currency')"
-              :invalid="v$.newCompanyForm.currency.$error"
-              class="w-full"
-            >
-            </BaseMultiselect>
-          </BaseInputGroup>
-        </BaseInputGrid>
-      </div>
-
-      <div class="z-0 flex justify-end p-4 bg-surface-secondary border-t border-line-default">
-        <BaseButton
-          class="mr-3 text-sm"
-          variant="primary-outline"
-          outline
-          type="button"
-          @click="closeCompanyModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving"
-          variant="primary"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              name="ArrowDownOnSquareIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{ $t('general.save') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { useModalStore } from '@/scripts/stores/modal'
-import { computed, onMounted, ref, reactive } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { required, minLength, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const companyStore = useCompanyStore()
-const modalStore = useModalStore()
-const globalStore = useGlobalStore()
-
-const { t } = useI18n()
-let isSaving = ref(false)
-let previewLogo = ref(null)
-let isFetchingInitialData = ref(false)
-let companyLogoFileBlob = ref(null)
-let companyLogoName = ref(null)
-
-const newCompanyForm = reactive({
-  name: null,
-  currency: '',
-  address: {
-    country_id: null,
-  },
-})
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'CompanyModal'
-})
-
-const rules = {
-  newCompanyForm: {
-    name: {
-      required: helpers.withMessage(t('validation.required'), required),
-      minLength: helpers.withMessage(
-        t('validation.name_min_length', { count: 3 }),
-        minLength(3)
-      ),
-    },
-    address: {
-      country_id: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-    currency: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-  },
-}
-
-const v$ = useVuelidate(rules, { newCompanyForm })
-
-async function getInitials() {
-  isFetchingInitialData.value = true
-  await globalStore.fetchCurrencies()
-  await globalStore.fetchCountries()
-
-  newCompanyForm.currency = companyStore.selectedCompanyCurrency.id
-  newCompanyForm.address.country_id =
-    companyStore.selectedCompany.address.country_id
-
-  isFetchingInitialData.value = false
-}
-
-function onFileInputChange(fileName, file) {
-  companyLogoName.value = fileName
-  companyLogoFileBlob.value = file
-}
-
-function onFileInputRemove() {
-  companyLogoName.value = null
-  companyLogoFileBlob.value = null
-}
-
-async function submitCompanyData() {
-  v$.value.newCompanyForm.$touch()
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-  try {
-    const res = await companyStore.addNewCompany(newCompanyForm)
-    if (res.data.data) {
-      await companyStore.setSelectedCompany(res.data.data)
-      if (companyLogoFileBlob && companyLogoFileBlob.value) {
-        let logoData = new FormData()
-
-        logoData.append(
-          'company_logo',
-          JSON.stringify({
-            name: companyLogoName.value,
-            data: companyLogoFileBlob.value,
-          })
-        )
-
-        await companyStore.updateCompanyLogo(logoData)
-        router.push('/admin/dashboard')
-      }
-      await globalStore.setIsAppLoaded(false)
-      await globalStore.bootstrap()
-      closeCompanyModal()
-    }
-    isSaving.value = false
-  } catch {
-    isSaving.value = false
-  }
-}
-
-function resetNewCompanyForm() {
-  newCompanyForm.name = ''
-  newCompanyForm.currency = ''
-  newCompanyForm.address.country_id = ''
-
-  v$.value.$reset()
-}
-
-function closeCompanyModal() {
-  modalStore.closeModal()
-
-  setTimeout(() => {
-    resetNewCompanyForm()
-    v$.value.$reset()
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/CustomerModal.vue b/resources/scripts/admin/components/modal-components/CustomerModal.vue
deleted file mode 100644
index 38530adf..00000000
--- a/resources/scripts/admin/components/modal-components/CustomerModal.vue
+++ /dev/null
@@ -1,663 +0,0 @@
-<template>
-  <BaseModal
-    :show="modalActive"
-    @close="closeCustomerModal"
-    @open="setInitialData"
-  >
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-
-        <BaseIcon
-          name="XMarkIcon"
-          class="h-6 w-6 text-muted cursor-pointer"
-          @click="closeCustomerModal"
-        />
-      </div>
-    </template>
-    <form action="" @submit.prevent="submitCustomerData">
-      <div class="px-6 pb-3">
-        <BaseTabGroup>
-          <BaseTab :title="$t('customers.basic_info')" class="!mt-2">
-            <BaseInputGrid layout="one-column">
-              <BaseInputGroup
-                :label="$t('customers.display_name')"
-                required
-                :error="v$.name.$error && v$.name.$errors[0].$message"
-              >
-                <BaseInput
-                  v-model.trim="customerStore.currentCustomer.name"
-                  type="text"
-                  name="name"
-                  class="mt-1 md:mt-0"
-                  :invalid="v$.name.$error"
-                  @input="v$.name.$touch()"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                :label="$t('settings.currencies.currency')"
-                required
-                :error="
-                  v$.currency_id.$error && v$.currency_id.$errors[0].$message
-                "
-              >
-                <BaseMultiselect
-                  v-model="customerStore.currentCustomer.currency_id"
-                  :options="globalStore.currencies"
-                  value-prop="id"
-                  searchable
-                  :placeholder="$t('customers.select_currency')"
-                  :max-height="200"
-                  class="mt-1 md:mt-0"
-                  track-by="name"
-                  :invalid="v$.currency_id.$error"
-                  label="name"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup :label="$t('customers.primary_contact_name')">
-                <BaseInput
-                  v-model="customerStore.currentCustomer.contact_name"
-                  type="text"
-                  class="mt-1 md:mt-0"
-                />
-              </BaseInputGroup>
-              <BaseInputGroup
-                :label="$t('login.email')"
-                :error="v$.email.$error && v$.email.$errors[0].$message"
-              >
-                <BaseInput
-                  v-model.trim="customerStore.currentCustomer.email"
-                  type="text"
-                  name="email"
-                  class="mt-1 md:mt-0"
-                  :invalid="v$.email.$error"
-                  @input="v$.email.$touch()"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                :label="$t('customers.prefix')"
-                :error="v$.prefix.$error && v$.prefix.$errors[0].$message"
-                :content-loading="isFetchingInitialData"
-              >
-                <BaseInput
-                  v-model="customerStore.currentCustomer.prefix"
-                  :content-loading="isFetchingInitialData"
-                  type="text"
-                  name="name"
-                  class=""
-                  :invalid="v$.prefix.$error"
-                  @input="v$.prefix.$touch()"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGrid>
-                <BaseInputGroup :label="$t('customers.phone')">
-                  <BaseInput
-                    v-model.trim="customerStore.currentCustomer.phone"
-                    type="text"
-                    name="phone"
-                    class="mt-1 md:mt-0"
-                  />
-                </BaseInputGroup>
-
-                <BaseInputGroup
-                  :label="$t('customers.website')"
-                  :error="v$.website.$error && v$.website.$errors[0].$message"
-                >
-                  <BaseInput
-                    v-model="customerStore.currentCustomer.website"
-                    type="url"
-                    class="mt-1 md:mt-0"
-                    :invalid="v$.website.$error"
-                    @input="v$.website.$touch()"
-                  />
-                </BaseInputGroup>
-              </BaseInputGrid>
-
-              <BaseInputGroup :label="$t('customers.tax_id')">
-                <BaseInput
-                  v-model="customerStore.currentCustomer.tax_id"
-                  type="text"
-                  class="mt-1 md:mt-0"
-                />
-              </BaseInputGroup>
-
-            </BaseInputGrid>
-          </BaseTab>
-
-          <BaseTab :title="$t('customers.portal_access')">
-            <BaseInputGrid class="col-span-5 lg:col-span-4">
-              <div class="md:col-span-2">
-                <p class="text-sm text-muted">
-                  {{ $t('customers.portal_access_text') }}
-                </p>
-
-                <BaseSwitch
-                  v-model="customerStore.currentCustomer.enable_portal"
-                  class="mt-1 flex"
-                />
-              </div>
-
-              <BaseInputGroup
-                v-if="customerStore.currentCustomer.enable_portal"
-                :content-loading="isFetchingInitialData"
-                :label="$t('customers.portal_access_url')"
-                class="md:col-span-2"
-                :help-text="$t('customers.portal_access_url_help')"
-              >
-                <CopyInputField :token="getCustomerPortalUrl" />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                v-if="customerStore.currentCustomer.enable_portal"
-                :content-loading="isFetchingInitialData"
-                :error="v$.password.$error && v$.password.$errors[0].$message"
-                :label="$t('customers.password')"
-              >
-                <BaseInput
-                  v-model.trim="customerStore.currentCustomer.password"
-                  :content-loading="isFetchingInitialData"
-                  :type="isShowPassword ? 'text' : 'password'"
-                  name="password"
-                  :invalid="v$.password.$error"
-                  @input="v$.password.$touch()"
-                >
-                  <template #right>
-                    <BaseIcon
-                      :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                      class="mr-1 text-muted cursor-pointer"
-                      @click="isShowPassword = !isShowPassword"
-                    />
-                  </template>
-                </BaseInput>
-              </BaseInputGroup>
-              <BaseInputGroup
-                v-if="customerStore.currentCustomer.enable_portal"
-                :error="
-                  v$.confirm_password.$error &&
-                  v$.confirm_password.$errors[0].$message
-                "
-                :content-loading="isFetchingInitialData"
-                :label="$t('customers.confirm_password')"
-              >
-                <BaseInput
-                  v-model.trim="customerStore.currentCustomer.confirm_password"
-                  :content-loading="isFetchingInitialData"
-                  :type="isShowConfirmPassword ? 'text' : 'password'"
-                  name="confirm_password"
-                  :invalid="v$.confirm_password.$error"
-                  @input="v$.confirm_password.$touch()"
-                >
-                  <template #right>
-                    <BaseIcon
-                      :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                      class="mr-1 text-muted cursor-pointer"
-                      @click="isShowConfirmPassword = !isShowConfirmPassword"
-                    />
-                  </template>
-                </BaseInput>
-              </BaseInputGroup>
-            </BaseInputGrid>
-          </BaseTab>
-
-          <BaseTab :title="$t('customers.billing_address')" class="!mt-2">
-            <BaseInputGrid layout="one-column">
-              <BaseInputGroup :label="$t('customers.name')">
-                <BaseInput
-                  v-model="customerStore.currentCustomer.billing.name"
-                  type="text"
-                  class="mt-1 md:mt-0"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup :label="$t('customers.country')">
-                <BaseMultiselect
-                  v-model="customerStore.currentCustomer.billing.country_id"
-                  :options="globalStore.countries"
-                  searchable
-                  :show-labels="false"
-                  :placeholder="$t('general.select_country')"
-                  :allow-empty="false"
-                  track-by="name"
-                  class="mt-1 md:mt-0"
-                  label="name"
-                  value-prop="id"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup :label="$t('customers.state')">
-                <BaseInput
-                  v-model="customerStore.currentCustomer.billing.state"
-                  type="text"
-                  name="billingState"
-                  class="mt-1 md:mt-0"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup :label="$t('customers.city')">
-                <BaseInput
-                  v-model="customerStore.currentCustomer.billing.city"
-                  type="text"
-                  name="billingCity"
-                  class="mt-1 md:mt-0"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                :label="$t('customers.address')"
-                :error="
-                  v$.billing.address_street_1.$error &&
-                  v$.billing.address_street_1.$errors[0].$message
-                "
-              >
-                <BaseTextarea
-                  v-model="
-                    customerStore.currentCustomer.billing.address_street_1
-                  "
-                  :placeholder="$t('general.street_1')"
-                  rows="2"
-                  cols="50"
-                  class="mt-1 md:mt-0"
-                  :invalid="v$.billing.address_street_1.$error"
-                  @input="v$.billing.address_street_1.$touch()"
-                />
-              </BaseInputGroup>
-            </BaseInputGrid>
-
-            <BaseInputGrid layout="one-column">
-              <BaseInputGroup
-                :error="
-                  v$.billing.address_street_2.$error &&
-                  v$.billing.address_street_2.$errors[0].$message
-                "
-              >
-                <BaseTextarea
-                  v-model="
-                    customerStore.currentCustomer.billing.address_street_2
-                  "
-                  :placeholder="$t('general.street_2')"
-                  rows="2"
-                  cols="50"
-                  :invalid="v$.billing.address_street_2.$error"
-                  @input="v$.billing.address_street_2.$touch()"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup :label="$t('customers.phone')">
-                <BaseInput
-                  v-model.trim="customerStore.currentCustomer.billing.phone"
-                  type="text"
-                  name="phone"
-                  class="mt-1 md:mt-0"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup :label="$t('customers.zip_code')">
-                <BaseInput
-                  v-model="customerStore.currentCustomer.billing.zip"
-                  type="text"
-                  class="mt-1 md:mt-0"
-                />
-              </BaseInputGroup>
-            </BaseInputGrid>
-          </BaseTab>
-
-          <BaseTab :title="$t('customers.shipping_address')" class="!mt-2">
-            <div class="grid md:grid-cols-12">
-              <div class="flex justify-end col-span-12">
-                <BaseButton
-                  variant="primary"
-                  type="button"
-                  size="xs"
-                  @click="copyAddress(true)"
-                >
-                  {{ $t('customers.copy_billing_address') }}
-                </BaseButton>
-              </div>
-            </div>
-
-            <BaseInputGrid layout="one-column">
-              <BaseInputGroup :label="$t('customers.name')">
-                <BaseInput
-                  v-model="customerStore.currentCustomer.shipping.name"
-                  type="text"
-                  class="mt-1 md:mt-0"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup :label="$t('customers.country')">
-                <BaseMultiselect
-                  v-model="customerStore.currentCustomer.shipping.country_id"
-                  :options="globalStore.countries"
-                  :searchable="true"
-                  :show-labels="false"
-                  :allow-empty="false"
-                  :placeholder="$t('general.select_country')"
-                  track-by="name"
-                  class="mt-1 md:mt-0"
-                  label="name"
-                  value-prop="id"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup :label="$t('customers.state')">
-                <BaseInput
-                  v-model="customerStore.currentCustomer.shipping.state"
-                  type="text"
-                  name="shippingState"
-                  class="mt-1 md:mt-0"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup :label="$t('customers.city')">
-                <BaseInput
-                  v-model="customerStore.currentCustomer.shipping.city"
-                  type="text"
-                  name="shippingCity"
-                  class="mt-1 md:mt-0"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                :label="$t('customers.address')"
-                :error="
-                  v$.shipping.address_street_1.$error &&
-                  v$.shipping.address_street_1.$errors[0].$message
-                "
-              >
-                <BaseTextarea
-                  v-model="
-                    customerStore.currentCustomer.shipping.address_street_1
-                  "
-                  :placeholder="$t('general.street_1')"
-                  rows="2"
-                  cols="50"
-                  class="mt-1 md:mt-0"
-                  :invalid="v$.shipping.address_street_1.$error"
-                  @input="v$.shipping.address_street_1.$touch()"
-                />
-              </BaseInputGroup>
-            </BaseInputGrid>
-
-            <BaseInputGrid layout="one-column">
-              <BaseInputGroup
-                :error="
-                  v$.shipping.address_street_2.$error &&
-                  v$.shipping.address_street_2.$errors[0].$message
-                "
-              >
-                <BaseTextarea
-                  v-model="
-                    customerStore.currentCustomer.shipping.address_street_2
-                  "
-                  :placeholder="$t('general.street_2')"
-                  rows="2"
-                  cols="50"
-                  :invalid="v$.shipping.address_street_1.$error"
-                  @input="v$.shipping.address_street_2.$touch()"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup :label="$t('customers.phone')">
-                <BaseInput
-                  v-model.trim="customerStore.currentCustomer.shipping.phone"
-                  type="text"
-                  name="phone"
-                  class="mt-1 md:mt-0"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup :label="$t('customers.zip_code')">
-                <BaseInput
-                  v-model="customerStore.currentCustomer.shipping.zip"
-                  type="text"
-                  class="mt-1 md:mt-0"
-                />
-              </BaseInputGroup>
-            </BaseInputGrid>
-          </BaseTab>
-        </BaseTabGroup>
-      </div>
-
-      <div
-        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-      >
-        <BaseButton
-          class="mr-3 text-sm"
-          type="button"
-          variant="primary-outline"
-          @click="closeCustomerModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton :loading="isLoading" variant="primary" type="submit">
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isLoading"
-              name="ArrowDownOnSquareIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{ $t('general.save') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { computed, onMounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-import {
-  required,
-  minLength,
-  maxLength,
-  email,
-  alpha,
-  url,
-  helpers,
-  requiredIf,
-  sameAs,
-} from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-
-import { useModalStore } from '@/scripts/stores/modal'
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import CopyInputField from '@/scripts/admin/components/CopyInputField.vue'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
-
-const recurringInvoiceStore = useRecurringInvoiceStore()
-const modalStore = useModalStore()
-const estimateStore = useEstimateStore()
-const customerStore = useCustomerStore()
-const companyStore = useCompanyStore()
-const globalStore = useGlobalStore()
-const invoiceStore = useInvoiceStore()
-const notificationStore = useNotificationStore()
-
-let isFetchingInitialData = ref(false)
-
-const { t } = useI18n()
-const route = useRoute()
-const isEdit = ref(false)
-const isLoading = ref(false)
-let isShowPassword = ref(false)
-let isShowConfirmPassword = ref(false)
-
-const modalActive = computed(
-  () => modalStore.active && modalStore.componentName === 'CustomerModal'
-)
-
-const rules = computed(() => {
-  return {
-    name: {
-      required: helpers.withMessage(t('validation.required'), required),
-      minLength: helpers.withMessage(
-        t('validation.name_min_length', { count: 3 }),
-        minLength(3)
-      ),
-    },
-    currency_id: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    password: {
-      required: helpers.withMessage(
-        t('validation.required'),
-        requiredIf(
-          customerStore.currentCustomer.enable_portal == true &&
-            !customerStore.currentCustomer.password_added
-        )
-      ),
-      minLength: helpers.withMessage(
-        t('validation.password_min_length', { count: 8 }),
-        minLength(8)
-      ),
-    },
-    confirm_password: {
-      sameAsPassword: helpers.withMessage(
-        t('validation.password_incorrect'),
-        sameAs(customerStore.currentCustomer.password)
-      ),
-    },
-    email: {
-      required: helpers.withMessage(
-        t('validation.required'),
-        requiredIf(customerStore.currentCustomer.enable_portal == true)
-      ),
-      email: helpers.withMessage(t('validation.email_incorrect'), email),
-    },
-    prefix: {
-      minLength: helpers.withMessage(
-        t('validation.name_min_length', { count: 3 }),
-        minLength(3)
-      ),
-    },
-    website: {
-      url: helpers.withMessage(t('validation.invalid_url'), url),
-    },
-
-    billing: {
-      address_street_1: {
-        maxLength: helpers.withMessage(
-          t('validation.address_maxlength', { count: 255 }),
-          maxLength(255)
-        ),
-      },
-      address_street_2: {
-        maxLength: helpers.withMessage(
-          t('validation.address_maxlength', { count: 255 }),
-          maxLength(255)
-        ),
-      },
-    },
-
-    shipping: {
-      address_street_1: {
-        maxLength: helpers.withMessage(
-          t('validation.address_maxlength', { count: 255 }),
-          maxLength(255)
-        ),
-      },
-      address_street_2: {
-        maxLength: helpers.withMessage(
-          t('validation.address_maxlength', { count: 255 }),
-          maxLength(255)
-        ),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => customerStore.currentCustomer)
-)
-
-const getCustomerPortalUrl = computed(() => {
-  return `${window.location.origin}/${companyStore.selectedCompany.slug}/customer/login`
-})
-
-function copyAddress() {
-  customerStore.copyAddress()
-}
-
-async function setInitialData() {
-  if (!customerStore.isEdit) {
-    customerStore.currentCustomer.currency_id =
-      companyStore.selectedCompanyCurrency.id
-  }
-}
-
-async function submitCustomerData() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid && customerStore.currentCustomer.email === '') {
-    notificationStore.showNotification({
-      type: 'error',
-      message: t('settings.notification.please_enter_email'),
-    })
-  }
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  isLoading.value = true
-
-  let data = {
-    ...customerStore.currentCustomer,
-  }
-
-  try {
-    let response = null
-    if (customerStore.isEdit) {
-      response = await customerStore.updateCustomer(data)
-    } else {
-      response = await customerStore.addCustomer(data)
-    }
-
-    if (response.data) {
-      isLoading.value = false
-      // Automatically create newly created customer
-      if (route.name === 'invoices.create' || route.name === 'invoices.edit') {
-        invoiceStore.selectCustomer(response.data.data.id)
-      }
-      if (
-        route.name === 'estimates.create' ||
-        route.name === 'estimates.edit'
-      ) {
-        estimateStore.selectCustomer(response.data.data.id)
-      }
-      if (
-        route.name === 'recurring-invoices.create' ||
-        route.name === 'recurring-invoices.edit'
-      ) {
-        recurringInvoiceStore.selectCustomer(response.data.data.id)
-      }
-      closeCustomerModal()
-    }
-  } catch (err) {
-    console.error(err)
-    isLoading.value = false
-  }
-}
-
-function closeCustomerModal() {
-  modalStore.closeModal()
-  setTimeout(() => {
-    customerStore.resetCurrentCustomer()
-    v$.value.$reset()
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue b/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
deleted file mode 100644
index 2df776f3..00000000
--- a/resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue
+++ /dev/null
@@ -1,157 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @close="closeCompanyModal">
-    <div class="flex justify-between w-full">
-      <div class="px-6 pt-6">
-        <h6 class="font-medium text-lg text-left">
-          {{ modalStore.title }}
-        </h6>
-        <p
-          class="mt-2 text-sm leading-snug text-muted"
-          style="max-width: 680px"
-        >
-          {{
-            $t('settings.company_info.delete_company_modal_desc', {
-              company: companyStore.selectedCompany.name,
-            })
-          }}
-        </p>
-      </div>
-    </div>
-    <form action="" @submit.prevent="submitCompanyData">
-      <div class="p-4 sm:p-6 space-y-4">
-        <BaseInputGroup
-          :label="
-            $t('settings.company_info.delete_company_modal_label', {
-              company: companyStore.selectedCompany.name,
-            })
-          "
-          :error="
-            v$.formData.name.$error && v$.formData.name.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model="formData.name"
-            :invalid="v$.formData.name.$error"
-            @input="v$.formData.name.$touch()"
-          />
-        </BaseInputGroup>
-      </div>
-
-      <div class="z-0 flex justify-end p-4 bg-surface-secondary border-t border-line-default">
-        <BaseButton
-          class="mr-3 text-sm"
-          variant="primary-outline"
-          outline
-          type="button"
-          @click="closeCompanyModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-        <BaseButton
-          :loading="isDeleting"
-          :disabled="isDeleting"
-          variant="danger"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isDeleting"
-              name="TrashIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{ $t('general.delete') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { useRouter } from 'vue-router'
-import { useModalStore } from '@/scripts/stores/modal'
-import { computed, onMounted, ref, reactive } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { required, minLength, helpers, sameAs } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-
-const companyStore = useCompanyStore()
-const modalStore = useModalStore()
-const globalStore = useGlobalStore()
-const router = useRouter()
-const { t } = useI18n()
-let isDeleting = ref(false)
-
-const formData = reactive({
-  id: companyStore.selectedCompany.id,
-  name: null,
-})
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'DeleteCompanyModal'
-})
-
-const rules = {
-  formData: {
-    name: {
-      required: helpers.withMessage(t('validation.required'), required),
-      sameAsName: helpers.withMessage(
-        t('validation.company_name_not_same'),
-        sameAs(companyStore.selectedCompany.name)
-      ),
-    },
-  },
-}
-
-const v$ = useVuelidate(
-  rules,
-  { formData },
-  {
-    $scope: false,
-  }
-)
-
-async function submitCompanyData() {
-  v$.value.$touch()
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  const company = companyStore.companies[0]
-
-  isDeleting.value = true
-  try {
-    const res = await companyStore.deleteCompany(formData)
-    console.log(res.data.success)
-    if (res.data.success) {
-      closeCompanyModal()
-      await companyStore.setSelectedCompany(company)
-      router.push('/admin/dashboard')
-      await globalStore.setIsAppLoaded(false)
-      await globalStore.bootstrap()
-    }
-    isDeleting.value = false
-  } catch {
-    isDeleting.value = false
-  }
-}
-
-function resetNewCompanyForm() {
-  formData.id = null
-  formData.name = ''
-
-  v$.value.$reset()
-}
-
-function closeCompanyModal() {
-  modalStore.closeModal()
-
-  setTimeout(() => {
-    resetNewCompanyForm()
-    v$.value.$reset()
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/ExchangeRateBulkUpdateModal.vue b/resources/scripts/admin/components/modal-components/ExchangeRateBulkUpdateModal.vue
deleted file mode 100644
index 614ba01d..00000000
--- a/resources/scripts/admin/components/modal-components/ExchangeRateBulkUpdateModal.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <BaseModal :show="modalActive">
-    <ExchangeRateBulkUpdate @update="closeModal()" />
-  </BaseModal>
-</template>
-
-<script setup>
-import { computed, ref, watch } from 'vue'
-import ExchangeRateBulkUpdate from '@/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue'
-import { useModalStore } from '@/scripts/stores/modal'
-
-const modalStore = useModalStore()
-
-const modalActive = computed(() => {
-  return (
-    modalStore.active &&
-    modalStore.componentName === 'ExchangeRateBulkUpdateModal'
-  )
-})
-
-function closeModal() {
-  modalStore.closeModal()
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue b/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
deleted file mode 100644
index 87d3647c..00000000
--- a/resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue
+++ /dev/null
@@ -1,484 +0,0 @@
-<template>
-  <BaseModal
-    :show="modalActive"
-    @close="closeExchangeRateModal"
-    @open="fetchInitialData"
-  >
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-
-        <BaseIcon
-          name="XMarkIcon"
-          class="w-6 h-6 text-muted cursor-pointer"
-          @click="closeExchangeRateModal"
-        />
-      </div>
-    </template>
-
-    <form @submit.prevent="submitExchangeRate">
-      <div class="px-4 md:px-8 py-8 overflow-y-auto sm:p-6">
-        <BaseInputGrid layout="one-column">
-          <BaseInputGroup
-            :label="$t('settings.exchange_rate.driver')"
-            :content-loading="isFetchingInitialData"
-            required
-            :error="
-              v$.currentExchangeRate.driver.$error &&
-              v$.currentExchangeRate.driver.$errors[0].$message
-            "
-            :help-text="driverSite"
-          >
-            <BaseMultiselect
-              v-model="exchangeRateStore.currentExchangeRate.driver"
-              :options="driversLists"
-              :content-loading="isFetchingInitialData"
-              value-prop="value"
-              :can-deselect="true"
-              label="key"
-              :searchable="true"
-              :invalid="v$.currentExchangeRate.driver.$error"
-              track-by="key"
-              @update:modelValue="resetCurrency"
-              @input="v$.currentExchangeRate.driver.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            v-if="isCurrencyConverter"
-            required
-            :label="$t('settings.exchange_rate.server')"
-            :content-loading="isFetchingInitialData"
-            :error="
-              v$.currencyConverter.type.$error &&
-              v$.currencyConverter.type.$errors[0].$message
-            "
-          >
-            <BaseMultiselect
-              v-model="exchangeRateStore.currencyConverter.type"
-              :content-loading="isFetchingInitialData"
-              value-prop="value"
-              searchable
-              :options="serverOptions"
-              :invalid="v$.currencyConverter.type.$error"
-              label="value"
-              track-by="value"
-              @update:modelValue="resetCurrency"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('settings.exchange_rate.key')"
-            required
-            :content-loading="isFetchingInitialData"
-            :error="
-              v$.currentExchangeRate.key.$error &&
-              v$.currentExchangeRate.key.$errors[0].$message
-            "
-          >
-            <BaseInput
-              v-model="exchangeRateStore.currentExchangeRate.key"
-              :content-loading="isFetchingInitialData"
-              type="text"
-              name="key"
-              :loading="isFetchingCurrencies"
-              loading-position="right"
-              :invalid="v$.currentExchangeRate.key.$error"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            v-if="exchangeRateStore.supportedCurrencies.length"
-            :label="$t('settings.exchange_rate.currency')"
-            :content-loading="isFetchingInitialData"
-            :error="
-              v$.currentExchangeRate.currencies.$error &&
-              v$.currentExchangeRate.currencies.$errors[0].$message
-            "
-            :help-text="$t('settings.exchange_rate.currency_help_text')"
-          >
-            <BaseMultiselect
-              v-model="exchangeRateStore.currentExchangeRate.currencies"
-              :content-loading="isFetchingInitialData"
-              value-prop="code"
-              mode="tags"
-              searchable
-              :options="exchangeRateStore.supportedCurrencies"
-              :invalid="v$.currentExchangeRate.currencies.$error"
-              label="code"
-              track-by="code"
-              open-direction="top"
-              @input="v$.currentExchangeRate.currencies.$touch()"
-            />
-          </BaseInputGroup>
-          <!--  For Currency Converter  -->
-
-          <BaseInputGroup
-            v-if="isDedicatedServer"
-            :label="$t('settings.exchange_rate.url')"
-            :content-loading="isFetchingInitialData"
-            :error="
-              v$.currencyConverter.url.$error &&
-              v$.currencyConverter.url.$errors[0].$message
-            "
-          >
-            <BaseInput
-              v-model="exchangeRateStore.currencyConverter.url"
-              :content-loading="isFetchingInitialData"
-              type="url"
-              :invalid="v$.currencyConverter.url.$error"
-              @input="v$.currencyConverter.url.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseSwitch
-            v-model="exchangeRateStore.currentExchangeRate.active"
-            class="flex"
-            :label-right="$t('settings.exchange_rate.active')"
-          />
-        </BaseInputGrid>
-
-        <BaseInfoAlert
-          v-if="
-            currenciesAlredayInUsed.length &&
-            exchangeRateStore.currentExchangeRate.active
-          "
-          class="mt-5"
-          :title="$t('settings.exchange_rate.currency_in_used')"
-          :lists="[currenciesAlredayInUsed.toString()]"
-          :actions="['Remove']"
-          @hide="dismiss"
-          @Remove="removeUsedSelectedCurrencies"
-        />
-      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-      >
-        <BaseButton
-          class="mr-3"
-          variant="primary-outline"
-          type="button"
-          :disabled="isSaving"
-          @click="closeExchangeRateModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving || isFetchingCurrencies"
-          variant="primary"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              name="ArrowDownOnSquareIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{
-            exchangeRateStore.isEdit ? $t('general.update') : $t('general.save')
-          }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { computed, ref, watch } from 'vue'
-import { useExchangeRateStore } from '@/scripts/admin/stores/exchange-rate'
-import { useModalStore } from '@/scripts/stores/modal'
-import useVuelidate from '@vuelidate/core'
-import { debounce } from 'lodash'
-
-import { useI18n } from 'vue-i18n'
-import {
-  required,
-  minLength,
-  helpers,
-  requiredIf,
-  url,
-} from '@vuelidate/validators'
-
-const { t } = useI18n()
-
-let isSaving = ref(false)
-let isFetchingInitialData = ref(false)
-let isFetchingCurrencies = ref(false)
-let currenciesAlredayInUsed = ref([])
-let currenctPorivderOldCurrencies = ref([])
-const modalStore = useModalStore()
-const exchangeRateStore = useExchangeRateStore()
-
-let serverOptions = ref([])
-
-const rules = computed(() => {
-  return {
-    currentExchangeRate: {
-      key: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      driver: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      currencies: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-    currencyConverter: {
-      type: {
-        required: helpers.withMessage(
-          t('validation.required'),
-          requiredIf(isCurrencyConverter)
-        ),
-      },
-      url: {
-        required: helpers.withMessage(
-          t('validation.required'),
-          requiredIf(isDedicatedServer)
-        ),
-        url: helpers.withMessage(t('validation.invalid_url'), url),
-      },
-    },
-  }
-})
-const driversLists = computed(() => {
-  return exchangeRateStore.drivers.map((item) => {
-    return Object.assign({}, item, {
-      key: t(item.key),
-    })
-  })
-})
-
-const modalActive = computed(() => {
-  return (
-    modalStore.active &&
-    modalStore.componentName === 'ExchangeRateProviderModal'
-  )
-})
-
-const modalTitle = computed(() => {
-  return modalStore.title
-})
-
-const isCurrencyConverter = computed(() => {
-  return exchangeRateStore.currentExchangeRate.driver === 'currency_converter'
-})
-
-const isDedicatedServer = computed(() => {
-  return (
-    exchangeRateStore.currencyConverter &&
-    exchangeRateStore.currencyConverter.type === 'DEDICATED'
-  )
-})
-
-const driverSite = computed(() => {
-  switch (exchangeRateStore.currentExchangeRate.driver) {
-    case 'currency_converter':
-      return `https://www.currencyconverterapi.com`
-
-    case 'currency_freak':
-      return 'https://currencyfreaks.com'
-
-    case 'currency_layer':
-      return 'https://currencylayer.com'
-
-    case 'open_exchange_rate':
-      return 'https://openexchangerates.org'
-
-    default:
-      return ''
-  }
-})
-const v$ = useVuelidate(
-  rules,
-  computed(() => exchangeRateStore)
-)
-
-function dismiss() {
-  currenciesAlredayInUsed.value = []
-}
-function removeUsedSelectedCurrencies() {
-  const { currencies } = exchangeRateStore.currentExchangeRate
-  currenciesAlredayInUsed.value.forEach((uc) => {
-    currencies.forEach((c, i) => {
-      if (c === uc) {
-        currencies.splice(i, 1)
-      }
-    })
-  })
-  currenciesAlredayInUsed.value = []
-}
-
-function resetCurrency() {
-  exchangeRateStore.currentExchangeRate.key = null
-  exchangeRateStore.currentExchangeRate.currencies = []
-  exchangeRateStore.supportedCurrencies = []
-}
-
-function resetModalData() {
-  exchangeRateStore.supportedCurrencies = []
-  currenctPorivderOldCurrencies.value = []
-  exchangeRateStore.currentExchangeRate = {
-    id: null,
-    name: '',
-    driver: '',
-    key: '',
-    active: true,
-    currencies: [],
-  }
-
-  exchangeRateStore.currencyConverter = {
-    type: '',
-    url: '',
-  }
-  currenciesAlredayInUsed.value = []
-}
-
-async function fetchInitialData() {
-  exchangeRateStore.currentExchangeRate.driver = 'currency_converter'
-  let params = {}
-  if (exchangeRateStore.isEdit) {
-    params.provider_id = exchangeRateStore.currentExchangeRate.id
-  }
-  isFetchingInitialData.value = true
-  await exchangeRateStore.fetchDefaultProviders()
-  await exchangeRateStore.fetchActiveCurrency(params)
-
-  currenctPorivderOldCurrencies.value =
-    exchangeRateStore.currentExchangeRate.currencies
-
-  isFetchingInitialData.value = false
-}
-
-watch(
-  () => isCurrencyConverter.value,
-  (newVal, oldValue) => {
-    if (newVal) {
-      fetchServers()
-    }
-  },
-  { immediate: true }
-)
-
-watch(
-  () => exchangeRateStore.currentExchangeRate.key,
-  (newVal, oldValue) => {
-    if (newVal) {
-      fetchCurrencies()
-    }
-  }
-)
-
-watch(
-  () => exchangeRateStore?.currencyConverter?.type,
-  (newVal, oldValue) => {
-    if (newVal) {
-      fetchCurrencies()
-    }
-  }
-)
-
-fetchCurrencies = debounce(fetchCurrencies, 500)
-
-function validate() {
-  v$.value.$touch()
-  checkingIsActiveCurrencies()
-  if (
-    v$.value.$invalid ||
-    (currenciesAlredayInUsed.value.length &&
-      exchangeRateStore.currentExchangeRate.active)
-  ) {
-    return true
-  }
-  return false
-}
-
-async function submitExchangeRate() {
-  if (validate()) {
-    return true
-  }
-  let data = {
-    ...exchangeRateStore.currentExchangeRate,
-  }
-  if (isCurrencyConverter.value) {
-    data.driver_config = {
-      ...exchangeRateStore.currencyConverter,
-    }
-    if (!isDedicatedServer.value) {
-      data.driver_config.url = ''
-    }
-  }
-  const action = exchangeRateStore.isEdit
-    ? exchangeRateStore.updateProvider
-    : exchangeRateStore.addProvider
-  isSaving.value = true
-
-  await action(data)
-    .then((res) => {
-      isSaving.value = false
-      modalStore.refreshData ? modalStore.refreshData() : ''
-      closeExchangeRateModal()
-    })
-    .catch((err) => {
-      isSaving.value = false
-    })
-}
-
-async function fetchServers() {
-  let res = await exchangeRateStore.getCurrencyConverterServers()
-  serverOptions.value = res.data.currency_converter_servers
-  exchangeRateStore.currencyConverter.type = 'FREE'
-}
-
-function fetchCurrencies() {
-  const { driver, key } = exchangeRateStore.currentExchangeRate
-  if (driver && key) {
-    isFetchingCurrencies.value = true
-    let data = {
-      driver: driver,
-      key: key,
-    }
-    if (
-      isCurrencyConverter.value &&
-      !exchangeRateStore.currencyConverter.type
-    ) {
-      isFetchingCurrencies.value = false
-      return
-    }
-    if (exchangeRateStore?.currencyConverter?.type) {
-      data.type = exchangeRateStore.currencyConverter.type
-    }
-
-    exchangeRateStore
-      .fetchCurrencies(data)
-      .then((res) => {
-        isFetchingCurrencies.value = false
-      })
-      .catch((err) => {
-        isFetchingCurrencies.value = false
-      })
-  }
-}
-
-function checkingIsActiveCurrencies(showError = true) {
-  currenciesAlredayInUsed.value = []
-  const { currencies } = exchangeRateStore.currentExchangeRate
-
-  if (currencies.length && exchangeRateStore.activeUsedCurrencies?.length) {
-    currencies.forEach((curr) => {
-      if (exchangeRateStore.activeUsedCurrencies.includes(curr)) {
-        currenciesAlredayInUsed.value.push(curr)
-      }
-    })
-  }
-}
-
-function closeExchangeRateModal() {
-  modalStore.closeModal()
-  setTimeout(() => {
-    resetModalData()
-    v$.value.$reset()
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/FileDiskModal.vue b/resources/scripts/admin/components/modal-components/FileDiskModal.vue
deleted file mode 100644
index 45d89595..00000000
--- a/resources/scripts/admin/components/modal-components/FileDiskModal.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @close="closeDiskModal" @open="loadData">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="h-6 w-6 text-muted cursor-pointer"
-          @click="closeDiskModal"
-        />
-      </div>
-    </template>
-    <div class="file-disk-modal">
-      <component
-        :is="diskStore.selected_driver"
-        :loading="isLoading"
-        :disks="diskStore.getDiskDrivers"
-        :is-edit="isEdit"
-        @onChangeDisk="(val) => diskChange(val)"
-        @submit="createNewDisk"
-      >
-        <template #default="slotProps">
-          <div
-            class="z-0 flex justify-end p-4 border-t border-solid border-line-default"
-          >
-            <BaseButton
-              class="mr-3 text-sm"
-              variant="primary-outline"
-              type="button"
-              @click="closeDiskModal"
-            >
-              {{ $t('general.cancel') }}
-            </BaseButton>
-
-            <BaseButton
-              :loading="isRequestFire(slotProps)"
-              :disabled="isRequestFire(slotProps)"
-              variant="primary"
-              type="submit"
-            >
-              <BaseIcon
-                v-if="!isRequestFire(slotProps)"
-                name="ArrowDownOnSquareIcon"
-                class="w-6 mr-2"
-              />
-
-              {{ $t('general.save') }}
-            </BaseButton>
-          </div>
-        </template>
-      </component>
-    </div>
-  </BaseModal>
-</template>
-
-<script>
-import { useDiskStore } from '@/scripts/admin/stores/disk'
-import { useModalStore } from '@/scripts/stores/modal'
-import { computed, ref, watchEffect } from 'vue'
-import Dropbox from '@/scripts/admin/components/modal-components/disks/DropboxDisk.vue'
-import Local from '@/scripts/admin/components/modal-components/disks/LocalDisk.vue'
-import S3 from '@/scripts/admin/components/modal-components/disks/S3Disk.vue'
-import S3compat from '@/scripts/admin/components/modal-components/disks/S3CompatDisk.vue'
-import DoSpaces from '@/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue'
-export default {
-  components: {
-    Dropbox,
-    Local,
-    S3,
-    S3compat,
-    DoSpaces,
-  },
-  setup() {
-    const diskStore = useDiskStore()
-    const modalStore = useModalStore()
-
-    let isLoading = ref(false)
-    let isEdit = ref(false)
-
-    watchEffect(() => {
-      if (modalStore.id) {
-        isEdit.value = true
-      }
-    })
-
-    const modalActive = computed(() => {
-      return modalStore.active && modalStore.componentName === 'FileDiskModal'
-    })
-
-    function isRequestFire(slotProps) {
-      return (
-        slotProps && (slotProps.diskData.isLoading.value || isLoading.value)
-      )
-    }
-
-    async function loadData() {
-      isLoading.value = true
-      let res = await diskStore.fetchDiskDrivers()
-      if (isEdit.value) {
-        diskStore.selected_driver = modalStore.data.driver
-      } else {
-        diskStore.selected_driver = res.data.drivers[0].value
-      }
-      isLoading.value = false
-    }
-
-    async function createNewDisk(data) {
-      try {
-        Object.assign(diskStore.diskConfigData, data)
-        isLoading.value = true
-
-        let formData = {
-          id: modalStore.id,
-          ...data,
-        }
-
-        let response = null
-        const action = isEdit.value
-          ? diskStore.updateDisk
-          : diskStore.createDisk
-
-        response = await action(formData)
-        modalStore.refreshData()
-        closeDiskModal()
-      } catch (e) {
-        // error is handled by the disk store
-      } finally {
-        isLoading.value = false
-      }
-    }
-
-    function closeDiskModal() {
-      modalStore.closeModal()
-    }
-
-    function diskChange(value) {
-      diskStore.selected_driver = value
-      diskStore.diskConfigData.selected_driver = value
-    }
-
-    return {
-      isEdit,
-      createNewDisk,
-      isRequestFire,
-      diskStore,
-      closeDiskModal,
-      loadData,
-      diskChange,
-      modalStore,
-      isLoading,
-      modalActive,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/InviteMemberModal.vue b/resources/scripts/admin/components/modal-components/InviteMemberModal.vue
deleted file mode 100644
index 9c51e7c0..00000000
--- a/resources/scripts/admin/components/modal-components/InviteMemberModal.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <BaseModal :show="show" @close="$emit('close')">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ $t('members.invite_member') }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="w-6 h-6 text-muted cursor-pointer"
-          @click="$emit('close')"
-        />
-      </div>
-    </template>
-
-    <form @submit.prevent="submitInvitation">
-      <div class="p-4 space-y-4">
-        <BaseInputGroup
-          :label="$t('members.email')"
-          :error="v$.email.$error && v$.email.$errors[0].$message"
-          required
-        >
-          <BaseInput
-            v-model="form.email"
-            type="email"
-            :invalid="v$.email.$error"
-            @input="v$.email.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('members.role')"
-          :error="v$.role_id.$error && v$.role_id.$errors[0].$message"
-          required
-        >
-          <BaseMultiselect
-            v-model="form.role_id"
-            :options="roles"
-            label="title"
-            value-prop="id"
-            track-by="title"
-            :searchable="true"
-          />
-        </BaseInputGroup>
-      </div>
-
-      <div class="flex justify-end p-4 border-t border-line-default">
-        <BaseButton
-          variant="primary-outline"
-          class="mr-3"
-          @click="$emit('close')"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-        <BaseButton
-          :loading="isSending"
-          :disabled="isSending"
-          type="submit"
-        >
-          {{ $t('members.invite_member') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { useMembersStore } from '@/scripts/admin/stores/members'
-import { useI18n } from 'vue-i18n'
-import { helpers, required, email } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import http from '@/scripts/http'
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['close'])
-const membersStore = useMembersStore()
-const { t } = useI18n()
-
-const isSending = ref(false)
-const roles = ref([])
-
-const form = reactive({
-  email: '',
-  role_id: null,
-})
-
-const rules = computed(() => ({
-  email: {
-    required: helpers.withMessage(t('validation.required'), required),
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  role_id: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-}))
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => form)
-)
-
-onMounted(async () => {
-  const response = await http.get('/api/v1/roles')
-  roles.value = response.data.data
-})
-
-async function submitInvitation() {
-  v$.value.$touch()
-  if (v$.value.$invalid) return
-
-  isSending.value = true
-  try {
-    await membersStore.inviteMember({
-      email: form.email,
-      role_id: form.role_id,
-    })
-    form.email = ''
-    form.role_id = null
-    v$.value.$reset()
-    emit('close')
-  } catch (e) {
-    // Error handled by store
-  } finally {
-    isSending.value = false
-  }
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/ItemModal.vue b/resources/scripts/admin/components/modal-components/ItemModal.vue
deleted file mode 100644
index 01fb6e10..00000000
--- a/resources/scripts/admin/components/modal-components/ItemModal.vue
+++ /dev/null
@@ -1,275 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @close="closeItemModal">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="h-6 w-6 text-muted cursor-pointer"
-          @click="closeItemModal"
-        />
-      </div>
-    </template>
-    <div class="item-modal">
-      <form action="" @submit.prevent="submitItemData">
-        <div class="px-8 py-8 sm:p-6">
-          <BaseInputGrid layout="one-column">
-            <BaseInputGroup
-              :label="$t('items.name')"
-              required
-              :error="v$.name.$error && v$.name.$errors[0].$message"
-            >
-              <BaseInput
-                v-model="itemStore.currentItem.name"
-                type="text"
-                :invalid="v$.name.$error"
-                @input="v$.name.$touch()"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup :label="$t('items.price')">
-              <BaseMoney
-                :key="companyStore.selectedCompanyCurrency"
-                v-model="price"
-                :currency="companyStore.selectedCompanyCurrency"
-                class="
-                  relative
-                  w-full
-                  focus:border focus:border-solid focus:border-primary
-                "
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup :label="$t('items.unit')">
-              <BaseMultiselect
-                v-model="itemStore.currentItem.unit_id"
-                label="name"
-                :options="itemStore.itemUnits"
-                value-prop="id"
-                :can-deselect="false"
-                :can-clear="false"
-                :placeholder="$t('items.select_a_unit')"
-                searchable
-                track-by="name"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              v-if="isTaxPerItemEnabled"
-              :label="$t('items.taxes')"
-            >
-              <BaseMultiselect
-                v-model="taxes"
-                :options="getTaxTypes"
-                mode="tags"
-                label="tax_name"
-                value-prop="id"
-                class="w-full"
-                :can-deselect="false"
-                :can-clear="false"
-                searchable
-                track-by="tax_name"
-                object
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('items.description')"
-              :error="
-                v$.description.$error && v$.description.$errors[0].$message
-              "
-            >
-              <BaseTextarea
-                v-model="itemStore.currentItem.description"
-                rows="4"
-                cols="50"
-                :invalid="v$.description.$error"
-                @input="v$.description.$touch()"
-              />
-            </BaseInputGroup>
-          </BaseInputGrid>
-        </div>
-        <div
-          class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-        >
-          <BaseButton
-            class="mr-3"
-            variant="primary-outline"
-            type="button"
-            @click="closeItemModal"
-          >
-            {{ $t('general.cancel') }}
-          </BaseButton>
-          <BaseButton
-            :loading="isLoading"
-            :disabled="isLoading"
-            variant="primary"
-            type="submit"
-          >
-            <template #left="slotProps">
-              <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-            </template>
-            {{ itemStore.isEdit ? $t('general.update') : $t('general.save') }}
-          </BaseButton>
-        </div>
-      </form>
-    </div>
-  </BaseModal>
-</template>
-
-<script setup>
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute } from 'vue-router'
-import {
-  required,
-  minLength,
-  maxLength,
-  minValue,
-  helpers,
-  alpha,
-} from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useItemStore } from '@/scripts/admin/stores/item'
-import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-
-const emit = defineEmits(['newItem'])
-
-const modalStore = useModalStore()
-const itemStore = useItemStore()
-const companyStore = useCompanyStore()
-const taxTypeStore = useTaxTypeStore()
-const estimateStore = useEstimateStore()
-const notificationStore = useNotificationStore()
-
-const { t } = useI18n()
-const isLoading = ref(false)
-const taxPerItemSetting = ref(companyStore.selectedCompanySettings.tax_per_item)
-
-const modalActive = computed(
-  () => modalStore.active && modalStore.componentName === 'ItemModal'
-)
-
-const price = computed({
-  get: () => itemStore.currentItem.price / 100,
-  set: (value) => {
-    itemStore.currentItem.price = Math.round(value * 100)
-  },
-})
-
-const taxes = computed({
-  get: () =>
-    itemStore.currentItem.taxes.map((tax) => {
-      if (tax) {
-        return {
-          ...tax,
-          tax_type_id: tax.id,
-          tax_name: tax.name + ' (' + (tax.calculation_type === 'fixed' ? tax.fixed_amount : tax.percent) + (tax.calculation_type === 'fixed' ? companyStore.selectedCompanyCurrency.symbol : '%') + ')',
-        }
-      }
-    }),
-  set: (value) => {
-    itemStore.$patch((state) => {
-      state.currentItem.taxes = value
-    })
-  },
-})
-
-const isTaxPerItemEnabled = computed(() => {
-  return taxPerItemSetting.value === 'YES'
-})
-
-const rules = {
-  name: {
-    required: helpers.withMessage(t('validation.required'), required),
-    minLength: helpers.withMessage(
-      t('validation.name_min_length', { count: 3 }),
-      minLength(3)
-    ),
-  },
-
-  description: {
-    maxLength: helpers.withMessage(
-      t('validation.description_maxlength', { count: 255 }),
-      maxLength(255)
-    ),
-  },
-}
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => itemStore.currentItem)
-)
-
-const getTaxTypes = computed(() => {
-  return taxTypeStore.taxTypes.map((tax) => {
-    const amount = tax.calculation_type === 'fixed'
-      ? new Intl.NumberFormat(undefined, {
-          style: 'currency',
-          currency: companyStore.selectedCompanyCurrency.code
-        }).format(tax.fixed_amount / 100)
-      : `${tax.percent}%`
-
-    return {
-      ...tax,
-      tax_name: `${tax.name} (${amount})`
-    }
-  })
-})
-
-onMounted(() => {
-  v$.value.$reset()
-  itemStore.fetchItemUnits({ limit: 'all' })
-})
-
-async function submitItemData() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  let data = {
-    ...itemStore.currentItem,
-    taxes: itemStore.currentItem.taxes.map((tax) => {
-      return {
-        tax_type_id: tax.id,
-        amount: tax.calculation_type === 'fixed' ? tax.fixed_amount : Math.round(price.value * tax.percent),
-        percent: tax.percent,
-        fixed_amount: tax.fixed_amount,
-        calculation_type: tax.calculation_type,
-        name: tax.name,
-        collective_tax: 0,
-      }
-    }),
-  }
-
-  isLoading.value = true
-
-  const action = itemStore.isEdit ? itemStore.updateItem : itemStore.addItem
-
-  await action(data).then((res) => {
-    isLoading.value = false
-    if (res.data.data) {
-      if (modalStore.data) {
-        modalStore.refreshData(res.data.data)
-      }
-    }
-    closeItemModal()
-  })
-}
-
-function closeItemModal() {
-  modalStore.closeModal()
-  setTimeout(() => {
-    itemStore.resetCurrentItem()
-    modalStore.$reset()
-    v$.value.$reset()
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue b/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
deleted file mode 100644
index 83a2ec5b..00000000
--- a/resources/scripts/admin/components/modal-components/ItemUnitModal.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-  <BaseModal
-    :show="modalStore.active && modalStore.componentName === 'ItemUnitModal'"
-    @close="closeItemUnitModal"
-  >
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="w-6 h-6 text-muted cursor-pointer"
-          @click="closeItemUnitModal"
-        />
-      </div>
-    </template>
-
-    <form action="" @submit.prevent="submitItemUnit">
-      <div class="p-8 sm:p-6">
-        <BaseInputGroup
-          :label="$t('settings.customization.items.unit_name')"
-          :error="v$.name.$error && v$.name.$errors[0].$message"
-          variant="horizontal"
-          required
-        >
-          <BaseInput
-            v-model="itemStore.currentItemUnit.name"
-            :invalid="v$.name.$error"
-            type="text"
-            @input="v$.name.$touch()"
-          />
-        </BaseInputGroup>
-      </div>
-
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-line-default border-solid
-        "
-      >
-        <BaseButton
-          type="button"
-          variant="primary-outline"
-          class="mr-3 text-sm"
-          @click="closeItemUnitModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving"
-          variant="primary"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              name="ArrowDownOnSquareIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{
-            itemStore.isItemUnitEdit ? $t('general.update') : $t('general.save')
-          }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { useItemStore } from '@/scripts/admin/stores/item'
-import { useModalStore } from '@/scripts/stores/modal'
-import { computed, ref, watch } from 'vue'
-import { required, minLength, maxLength, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-
-const itemStore = useItemStore()
-const modalStore = useModalStore()
-
-const { t } = useI18n()
-let isSaving = ref(false)
-
-const rules = computed(() => {
-  return {
-    name: {
-      required: helpers.withMessage(t('validation.required'), required),
-      minLength: helpers.withMessage(
-        t('validation.name_min_length', { count: 2 }),
-        minLength(2)
-      ),
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => itemStore.currentItemUnit)
-)
-
-async function submitItemUnit() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-  try {
-    const action = itemStore.isItemUnitEdit
-      ? itemStore.updateItemUnit
-      : itemStore.addItemUnit
-
-    isSaving.value = true
-
-    await action(itemStore.currentItemUnit)
-
-    modalStore.refreshData ? modalStore.refreshData() : ''
-
-    closeItemUnitModal()
-    isSaving.value = false
-  } catch (err) {
-    isSaving.value = false
-    return true
-  }
-}
-
-function closeItemUnitModal() {
-  modalStore.closeModal()
-
-  setTimeout(() => {
-    itemStore.currentItemUnit = {
-      id: null,
-      name: '',
-    }
-
-    modalStore.$reset()
-    v$.value.$reset()
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/MailTestModal.vue b/resources/scripts/admin/components/modal-components/MailTestModal.vue
deleted file mode 100644
index b0cf1cf7..00000000
--- a/resources/scripts/admin/components/modal-components/MailTestModal.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @close="closeTestModal">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="w-6 h-6 text-muted cursor-pointer"
-          @click="closeTestModal"
-        />
-      </div>
-    </template>
-    <form action="" @submit.prevent="onTestMailSend">
-      <div class="p-4 md:p-8">
-        <BaseInputGrid layout="one-column">
-          <BaseInputGroup
-            :label="$t('general.to')"
-            :error="v$.formData.to.$error && v$.formData.to.$errors[0].$message"
-            variant="horizontal"
-            required
-          >
-            <BaseInput
-              ref="to"
-              v-model="formData.to"
-              type="text"
-              :invalid="v$.formData.to.$error"
-              @input="v$.formData.to.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.subject')"
-            :error="
-              v$.formData.subject.$error &&
-              v$.formData.subject.$errors[0].$message
-            "
-            variant="horizontal"
-            required
-          >
-            <BaseInput
-              v-model="formData.subject"
-              type="text"
-              :invalid="v$.formData.subject.$error"
-              @input="v$.formData.subject.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.message')"
-            :error="
-              v$.formData.message.$error &&
-              v$.formData.message.$errors[0].$message
-            "
-            variant="horizontal"
-            required
-          >
-            <BaseTextarea
-              v-model="formData.message"
-              rows="4"
-              cols="50"
-              :invalid="v$.formData.message.$error"
-              @input="v$.formData.message.$touch()"
-            />
-          </BaseInputGroup>
-        </BaseInputGrid>
-      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-      >
-        <BaseButton
-          variant="primary-outline"
-          type="button"
-          class="mr-3"
-          @click="closeTestModal()"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton :loading="isSaving" variant="primary" type="submit">
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              name="PaperAirplaneIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{ $t('general.send') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { reactive, ref, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { required, email, maxLength, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-import { useCompanyMailStore } from '@/scripts/admin/stores/company-mail'
-
-const props = defineProps({
-  storeType: {
-    type: String,
-    default: 'global',
-  },
-})
-
-let isSaving = ref(false)
-let formData = reactive({
-  to: '',
-  subject: '',
-  message: '',
-})
-
-const modalStore = useModalStore()
-const mailDriverStore = useMailDriverStore()
-const companyMailStore = useCompanyMailStore()
-
-const activeStore = computed(() => {
-  return props.storeType === 'company' ? companyMailStore : mailDriverStore
-})
-const { t } = useI18n()
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'MailTestModal'
-})
-
-const rules = {
-  formData: {
-    to: {
-      required: helpers.withMessage(t('validation.required'), required),
-      email: helpers.withMessage(t('validation.email_incorrect'), email),
-    },
-    subject: {
-      required: helpers.withMessage(t('validation.required'), required),
-      maxLength: helpers.withMessage(
-        t('validation.subject_maxlength'),
-        maxLength(100)
-      ),
-    },
-    message: {
-      required: helpers.withMessage(t('validation.required'), required),
-      maxLength: helpers.withMessage(
-        t('validation.message_maxlength'),
-        maxLength(255)
-      ),
-    },
-  },
-}
-
-const v$ = useVuelidate(rules, { formData })
-
-function resetFormData() {
-  formData.id = ''
-  formData.to = ''
-  formData.subject = ''
-  formData.message = ''
-
-  v$.value.$reset()
-}
-
-async function onTestMailSend() {
-  v$.value.formData.$touch()
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-  let response = await activeStore.value.sendTestMail(formData)
-  if (response.data) {
-    closeTestModal()
-    isSaving.value = false
-  }
-}
-function closeTestModal() {
-  modalStore.closeModal()
-  setTimeout(() => {
-    modalStore.resetModalData()
-    resetFormData()
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/NoteModal.vue b/resources/scripts/admin/components/modal-components/NoteModal.vue
deleted file mode 100644
index 5b1fe591..00000000
--- a/resources/scripts/admin/components/modal-components/NoteModal.vue
+++ /dev/null
@@ -1,290 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @close="closeNoteModal" @open="setFields">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="h-6 w-6 text-muted cursor-pointer"
-          @click="closeNoteModal"
-        />
-      </div>
-    </template>
-    <form action="" @submit.prevent="submitNote">
-      <div class="px-8 py-8 sm:p-6">
-        <BaseInputGrid layout="one-column">
-          <BaseInputGroup
-            :label="$t('settings.customization.notes.name')"
-            variant="vertical"
-            :error="
-              v$.currentNote.name.$error &&
-              v$.currentNote.name.$errors[0].$message
-            "
-            required
-          >
-            <BaseInput
-              v-model="noteStore.currentNote.name"
-              :invalid="v$.currentNote.name.$error"
-              type="text"
-              @input="v$.currentNote.name.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('settings.customization.notes.type')"
-            :error="
-              v$.currentNote.type.$error &&
-              v$.currentNote.type.$errors[0].$message
-            "
-            required
-          >
-            <BaseMultiselect
-              v-model="noteStore.currentNote.type"
-              :options="types"
-              value-prop="value"
-              class="mt-2"
-            />
-          </BaseInputGroup>
-          <BaseSwitchSection
-            v-model="noteStore.currentNote.is_default"
-            :title="$t('settings.customization.notes.is_default')"
-            :description="$t('settings.customization.notes.is_default_description')"
-_          />
-
-          <BaseInputGroup
-            :label="$t('settings.customization.notes.notes')"
-            :error="
-              v$.currentNote.notes.$error &&
-              v$.currentNote.notes.$errors[0].$message
-            "
-            required
-          >
-            <BaseCustomInput
-              v-model="noteStore.currentNote.notes"
-              :invalid="v$.currentNote.notes.$error"
-              :fields="fields"
-              @input="v$.currentNote.notes.$touch()"
-            />
-          </BaseInputGroup>
-        </BaseInputGrid>
-      </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          px-4
-          py-4
-          border-t border-solid border-line-default
-        "
-      >
-        <BaseButton
-          class="mr-2"
-          variant="primary-outline"
-          type="button"
-          @click="closeNoteModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving"
-          variant="primary"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-          </template>
-          {{ noteStore.isEdit ? $t('general.update') : $t('general.save') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { ref, reactive, computed, watch, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute } from 'vue-router'
-import { required, minLength, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useNotesStore } from '@/scripts/admin/stores/note'
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { usePaymentStore } from '@/scripts/admin/stores/payment'
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-
-const modalStore = useModalStore()
-const notificationStore = useNotificationStore()
-const noteStore = useNotesStore()
-const invoiceStore = useInvoiceStore()
-const paymentStore = usePaymentStore()
-const estimateStore = useEstimateStore()
-
-const route = useRoute()
-const { t } = useI18n()
-
-let isSaving = ref(false)
-const types = reactive([
-  {label: t('settings.customization.notes.types.invoice'), value: 'Invoice'},
-  {label: t('settings.customization.notes.types.estimate'), value: 'Estimate'},
-  {label: t('settings.customization.notes.types.payment'), value: 'Payment'}
-])
-let fields = ref(['customer', 'customerCustom'])
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'NoteModal'
-})
-
-const rules = computed(() => {
-  return {
-    currentNote: {
-      name: {
-        required: helpers.withMessage(t('validation.required'), required),
-        minLength: helpers.withMessage(
-          t('validation.name_min_length', { count: 3 }),
-          minLength(3)
-        ),
-      },
-      notes: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      type: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => noteStore)
-)
-
-watch(
-  () => noteStore.currentNote.type,
-  (val) => {
-    setFields()
-  }
-)
-
-onMounted(() => {
-  if (route.name === 'estimates.create') {
-    noteStore.currentNote.type = 'Estimate'
-  } else if (route.name === 'invoices.create' || route.name === 'recurring-invoices.create') {
-    noteStore.currentNote.type = 'Invoice'
-  } else {
-    noteStore.currentNote.type = 'Payment'
-  }
-})
-
-function setFields() {
-  fields.value = ['customer', 'customerCustom']
-
-  if (noteStore.currentNote.type == 'Invoice') {
-    fields.value.push('invoice', 'invoiceCustom')
-  }
-
-  if (noteStore.currentNote.type == 'Estimate') {
-    fields.value.push('estimate', 'estimateCustom')
-  }
-
-  if (noteStore.currentNote.type == 'Payment') {
-    fields.value.push('payment', 'paymentCustom')
-  }
-}
-
-async function submitNote() {
-  v$.value.currentNote.$touch()
-  if (v$.value.currentNote.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-  if (noteStore.isEdit) {
-    let data = {
-      id: noteStore.currentNote.id,
-      ...noteStore.currentNote,
-    }
-    await noteStore
-      .updateNote(data)
-      .then((res) => {
-        isSaving.value = false
-        if (res.data) {
-          notificationStore.showNotification({
-            type: 'success',
-            message: t('settings.customization.notes.note_updated'),
-          })
-          modalStore.refreshData ? modalStore.refreshData() : ''
-          closeNoteModal()
-        }
-      })
-      .catch((err) => {
-        isSaving.value = false
-      })
-  } else {
-    await noteStore
-      .addNote(noteStore.currentNote)
-      .then((res) => {
-        isSaving.value = false
-        if (res.data) {
-          notificationStore.showNotification({
-            type: 'success',
-            message: t('settings.customization.notes.note_added'),
-          })
-
-          if (
-            (route.name === 'invoices.create' &&
-              res.data.data.type === 'Invoice') ||
-            (route.name === 'invoices.edit' && res.data.data.type === 'Invoice')
-          ) {
-            invoiceStore.selectNote(res.data.data)
-          }
-
-          if (
-            (route.name === 'estimates.create' &&
-              res.data.data.type === 'Estimate') ||
-            (route.name === 'estimates.edit' &&
-              res.data.data.type === 'Estimate')
-          ) {
-            estimateStore.selectNote(res.data.data)
-          }
-
-          if (
-            (route.name === 'payments.create' &&
-              res.data.data.type === 'Payment') ||
-            (route.name === 'payments.edit' && res.data.data.type === 'Payment')
-          ) {
-            paymentStore.selectNote(res.data.data)
-          }
-        }
-
-        modalStore.refreshData ? modalStore.refreshData() : ''
-        closeNoteModal()
-      })
-      .catch((err) => {
-        isSaving.value = false
-      })
-  }
-}
-
-function closeNoteModal() {
-  modalStore.closeModal()
-
-  setTimeout(() => {
-    noteStore.resetCurrentNote()
-    v$.value.$reset()
-  }, 300)
-}
-</script>
-
-<style>
-.note-modal {
-  .header-editior .editor-menu-bar {
-    margin-left: 0.5px;
-    margin-right: 0px;
-  }
-}
-</style>
diff --git a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue b/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
deleted file mode 100644
index 5526a638..00000000
--- a/resources/scripts/admin/components/modal-components/PaymentModeModal.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @close="closePaymentModeModal">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="w-6 h-6 text-muted cursor-pointer"
-          @click="closePaymentModeModal"
-        />
-      </div>
-    </template>
-
-    <form action="" @submit.prevent="submitPaymentMode">
-      <div class="p-4 sm:p-6">
-        <BaseInputGroup
-          :label="$t('settings.payment_modes.mode_name')"
-          :error="
-            v$.currentPaymentMode.name.$error &&
-            v$.currentPaymentMode.name.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model="paymentStore.currentPaymentMode.name"
-            :invalid="v$.currentPaymentMode.name.$error"
-            @input="v$.currentPaymentMode.name.$touch()"
-          />
-        </BaseInputGroup>
-      </div>
-
-      <div
-        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-      >
-        <BaseButton
-          variant="primary-outline"
-          class="mr-3"
-          type="button"
-          @click="closePaymentModeModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving"
-          variant="primary"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-          </template>
-          {{
-            paymentStore.currentPaymentMode.id
-              ? $t('general.update')
-              : $t('general.save')
-          }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { usePaymentStore } from '@/scripts/admin/stores/payment'
-import { ref, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { required, minLength, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useModalStore } from '@/scripts/stores/modal'
-
-const modalStore = useModalStore()
-const paymentStore = usePaymentStore()
-
-const { t } = useI18n()
-const isSaving = ref(false)
-
-const rules = computed(() => {
-  return {
-    currentPaymentMode: {
-      name: {
-        required: helpers.withMessage(t('validation.required'), required),
-        minLength: helpers.withMessage(
-          t('validation.name_min_length', { count: 3 }),
-          minLength(3)
-        ),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => paymentStore)
-)
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'PaymentModeModal'
-})
-
-async function submitPaymentMode() {
-  v$.value.currentPaymentMode.$touch()
-
-  if (v$.value.currentPaymentMode.$invalid) {
-    return true
-  }
-  try {
-    const action = paymentStore.currentPaymentMode.id
-      ? paymentStore.updatePaymentMode
-      : paymentStore.addPaymentMode
-    isSaving.value = true
-    await action(paymentStore.currentPaymentMode)
-    isSaving.value = false
-    modalStore.refreshData ? modalStore.refreshData() : ''
-    closePaymentModeModal()
-  } catch (err) {
-    isSaving.value = false
-    return true
-  }
-}
-
-function closePaymentModeModal() {
-  modalStore.closeModal()
-
-  setTimeout(() => {
-    v$.value.$reset()
-    paymentStore.currentPaymentMode = {
-      id: '',
-      name: null,
-    }
-  })
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/RolesModal.vue b/resources/scripts/admin/components/modal-components/RolesModal.vue
deleted file mode 100644
index 26817290..00000000
--- a/resources/scripts/admin/components/modal-components/RolesModal.vue
+++ /dev/null
@@ -1,299 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @close="closeRolesModal">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-
-        <BaseIcon
-          name="XMarkIcon"
-          class="w-6 h-6 text-muted cursor-pointer"
-          @click="closeRolesModal"
-        />
-      </div>
-    </template>
-
-    <form @submit.prevent="submitRoleData">
-      <div class="px-4 md:px-8 py-4 md:py-6">
-        <BaseInputGroup
-          :label="$t('settings.roles.name')"
-          class="mt-3"
-          :error="v$.name.$error && v$.name.$errors[0].$message"
-          required
-          :content-loading="isFetchingInitialData"
-        >
-          <BaseInput
-            v-model="roleStore.currentRole.name"
-            :invalid="v$.name.$error"
-            type="text"
-            :content-loading="isFetchingInitialData"
-            @input="v$.name.$touch()"
-          />
-        </BaseInputGroup>
-      </div>
-      <div class="flex justify-between">
-        <h6
-          class="
-            text-sm
-            not-italic
-            font-medium
-            text-heading
-            px-4
-            md:px-8
-            py-1.5
-          "
-        >
-          {{ $t('settings.roles.permission', 2) }}
-          <span class="text-sm text-red-500"> *</span>
-        </h6>
-        <div
-          class="
-            text-sm
-            not-italic
-            font-medium
-            text-subtle
-            px-4
-            md:px-8
-            py-1.5
-          "
-        >
-          <a
-            class="cursor-pointer text-primary-400"
-            @click="setSelectAll(true)"
-          >
-            {{ $t('settings.roles.select_all') }}
-          </a>
-          /
-          <a
-            class="cursor-pointer text-primary-400"
-            @click="setSelectAll(false)"
-          >
-            {{ $t('settings.roles.none') }}
-          </a>
-        </div>
-      </div>
-
-      <div class="border-t border-line-default py-3">
-        <div
-          class="
-            grid grid-cols-1
-            sm:grid-cols-2
-            md:grid-cols-3
-            lg:grid-cols-4
-            gap-4
-            px-8
-            sm:px-8
-          "
-        >
-          <div
-            v-for="(abilityGroup, gIndex) in roleStore.abilitiesList"
-            :key="gIndex"
-            class="flex flex-col space-y-1"
-          >
-            <p class="text-sm text-muted border-b border-line-default pb-1 mb-2">
-              {{ gIndex }}
-            </p>
-            <div
-              v-for="(ability, index) in abilityGroup"
-              :key="index"
-              class="flex"
-            >
-              <BaseCheckbox
-                v-model="roleStore.currentRole.abilities"
-                :set-initial-value="true"
-                variant="primary"
-                :disabled="ability.disabled"
-                :label="ability.name"
-                :value="ability"
-                @update:modelValue="onUpdateAbility(ability)"
-              />
-            </div>
-          </div>
-          <span
-            v-if="v$.abilities.$error"
-            class="block mt-0.5 text-sm text-red-500"
-          >
-            {{ v$.abilities.$errors[0].$message }}
-          </span>
-        </div>
-      </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border-line-default
-        "
-      >
-        <BaseButton
-          class="mr-3 text-sm"
-          variant="primary-outline"
-          type="button"
-          @click="closeRolesModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving"
-          variant="primary"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-          </template>
-          {{ !roleStore.isEdit ? $t('general.save') : $t('general.update') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { required, minLength, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useRoleStore } from '@/scripts/admin/stores/role'
-import { useModalStore } from '@/scripts/stores/modal'
-
-const modalStore = useModalStore()
-const roleStore = useRoleStore()
-const { t } = useI18n()
-
-let isSaving = ref(false)
-let isFetchingInitialData = ref(false)
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'RolesModal'
-})
-
-const rules = computed(() => {
-  return {
-    name: {
-      required: helpers.withMessage(t('validation.required'), required),
-      minLength: helpers.withMessage(
-        t('validation.name_min_length', { count: 3 }),
-        minLength(3)
-      ),
-    },
-    abilities: {
-      required: helpers.withMessage(
-        t('validation.at_least_one_ability'),
-        required
-      ),
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => roleStore.currentRole)
-)
-
-async function submitRoleData() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-  try {
-    const action = roleStore.isEdit ? roleStore.updateRole : roleStore.addRole
-    isSaving.value = true
-    await action(roleStore.currentRole)
-    isSaving.value = false
-    modalStore.refreshData ? modalStore.refreshData() : ''
-    closeRolesModal()
-  } catch (error) {
-    isSaving.value = false
-    return true
-  }
-}
-
-function onUpdateAbility(currentAbility) {
-  const fd = roleStore.currentRole.abilities.find(
-    (_abl) => _abl.ability === currentAbility.ability
-  )
-
-  if (!fd && currentAbility?.depends_on?.length) {
-    enableAbilities(currentAbility)
-    return
-  }
-
-  currentAbility?.depends_on?.forEach((_d) => {
-    Object.keys(roleStore.abilitiesList).forEach((group) => {
-      roleStore.abilitiesList[group].forEach((_a) => {
-        if (_d === _a.ability) {
-          _a.disabled = true
-
-          let found = roleStore.currentRole.abilities.find(
-            (_af) => _af.ability === _d
-          )
-
-          if (!found) {
-            roleStore.currentRole.abilities.push(_a)
-          }
-        }
-      })
-    })
-  })
-}
-
-function setSelectAll(checked) {
-  let dependList = []
-  Object.keys(roleStore.abilitiesList).forEach((group) => {
-    roleStore.abilitiesList[group].forEach((_a) => {
-      _a?.depends_on && (dependList = [...dependList, ..._a.depends_on])
-    })
-  })
-
-  Object.keys(roleStore.abilitiesList).forEach((group) => {
-    roleStore.abilitiesList[group].forEach((_a) => {
-      if (dependList.includes(_a.ability)) {
-        checked ? (_a.disabled = true) : (_a.disabled = false)
-      }
-      roleStore.currentRole.abilities.push(_a)
-    })
-  })
-
-  if (!checked) roleStore.currentRole.abilities = []
-}
-
-function enableAbilities(ability) {
-  ability.depends_on.forEach((_d) => {
-    Object.keys(roleStore.abilitiesList).forEach((group) => {
-      roleStore.abilitiesList[group].forEach((_a) => {
-        // CHECK IF EXISTS IN CURRENT ROLE ABILITIES
-        let found = roleStore.currentRole.abilities.find((_r) =>
-          _r.depends_on?.includes(_a.ability)
-        )
-
-        if (_d === _a.ability && !found) {
-          _a.disabled = false
-        }
-      })
-    })
-  })
-}
-
-function closeRolesModal() {
-  modalStore.closeModal()
-
-  setTimeout(() => {
-    roleStore.currentRole = {
-      id: null,
-      name: '',
-      abilities: [],
-    }
-
-    // Enable all disabled ability
-    Object.keys(roleStore.abilitiesList).forEach((group) => {
-      roleStore.abilitiesList[group].forEach((_a) => {
-        _a.disabled = false
-      })
-    })
-
-    v$.value.$reset()
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue b/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
deleted file mode 100644
index df0aba62..00000000
--- a/resources/scripts/admin/components/modal-components/SelectTemplateModal.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @close="closeModal" @open="setData">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalTitle }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="h-6 w-6 text-muted cursor-pointer"
-          @click="closeModal"
-        />
-      </div>
-    </template>
-    <div class="px-8 py-8 sm:p-6">
-      <div
-        v-if="modalStore.data"
-        class="grid grid-cols-3 gap-2 p-1 overflow-x-auto"
-      >
-        <div
-          v-for="(template, index) in modalStore.data.templates"
-          :key="index"
-          :class="{
-            'border border-solid border-primary-500':
-              selectedTemplate === template.name,
-          }"
-          class="
-            relative
-            flex flex-col
-            m-2
-            border border-line-default border-solid
-            cursor-pointer
-            hover:border-primary-300
-          "
-          @click="selectedTemplate = template.name"
-        >
-          <img
-            :src="template.path"
-            :alt="template.name"
-            class="w-full min-h-[100px]"
-          />
-          <img
-            v-if="selectedTemplate === template.name"
-            :alt="template.name"
-            class="absolute z-10 w-5 h-5 text-primary-500"
-            style="top: -6px; right: -5px"
-            :src="getTickImage()"
-          />
-          <span
-            :class="[
-              'w-full p-1 bg-surface-muted text-sm text-center absolute bottom-0 left-0',
-              {
-                'text-primary-500 bg-primary-100':
-                  selectedTemplate === template.name,
-                'text-body': selectedTemplate != template.name,
-              },
-            ]"
-          >
-            {{ template.name }}
-          </span>
-        </div>
-      </div>
-
-      <div v-if="!modalStore.data.store.isEdit" class="z-0 flex ml-3 pt-5">
-        <BaseCheckbox
-          v-model="modalStore.data.isMarkAsDefault"
-          :set-initial-value="false"
-          variant="primary"
-          :label="$t('general.mark_as_default')"
-          :description="modalStore.data.markAsDefaultDescription"
-        />
-      </div>
-    </div>
-
-    <div class="z-0 flex justify-end p-4 border-t border-line-default border-solid">
-      <BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
-        {{ $t('general.cancel') }}
-      </BaseButton>
-      <BaseButton variant="primary" @click="chooseTemplate()">
-        <template #left="slotProps">
-          <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('general.choose') }}
-      </BaseButton>
-    </div>
-  </BaseModal>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useUserStore } from '@/scripts/admin/stores/user'
-
-const modalStore = useModalStore()
-const userStore = useUserStore()
-
-const selectedTemplate = ref('')
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'SelectTemplate'
-})
-
-const modalTitle = computed(() => {
-  return modalStore.title
-})
-
-function setData() {
-  if (modalStore.data.store[modalStore.data.storeProp].template_name) {
-    selectedTemplate.value =
-      modalStore.data.store[modalStore.data.storeProp].template_name
-  } else {
-    selectedTemplate.value = modalStore.data.templates[0]
-  }
-}
-
-async function chooseTemplate() {
-  await modalStore.data.store.setTemplate(selectedTemplate.value)
-  // update default estimate or invoice template
-  if (!modalStore.data.store.isEdit && modalStore.data.isMarkAsDefault) {
-    if (modalStore.data.storeProp == 'newEstimate') {
-      await userStore.updateUserSettings({
-        settings: {
-          default_estimate_template: selectedTemplate.value,
-        },
-      })
-    } else if (modalStore.data.storeProp == 'newInvoice') {
-      await userStore.updateUserSettings({
-        settings: {
-          default_invoice_template: selectedTemplate.value,
-        },
-      })
-    }
-  }
-  closeModal()
-}
-
-function getTickImage() {
-  const imgUrl = new URL('$images/tick.png', import.meta.url)
-  return imgUrl
-}
-
-function closeModal() {
-  modalStore.closeModal()
-
-  setTimeout(() => {
-    modalStore.$reset()
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue b/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
deleted file mode 100644
index e0400da9..00000000
--- a/resources/scripts/admin/components/modal-components/SendEstimateModal.vue
+++ /dev/null
@@ -1,309 +0,0 @@
-<template>
-  <BaseModal
-    :show="modalActive"
-    @close="closeSendEstimateModal"
-    @open="setInitialData"
-  >
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="h-6 w-6 text-muted cursor-pointer"
-          @click="closeSendEstimateModal"
-        />
-      </div>
-    </template>
-
-    <form v-if="!isPreview" action="">
-      <div class="px-8 py-8 sm:p-6">
-        <BaseInputGrid layout="one-column">
-          <BaseInputGroup
-            :label="$t('general.from')"
-            required
-            :error="v$.from.$error && v$.from.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="estimateMailForm.from"
-              type="text"
-              :invalid="v$.from.$error"
-              @input="v$.from.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.to')"
-            required
-            :error="v$.to.$error && v$.to.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="estimateMailForm.to"
-              type="text"
-              :invalid="v$.to.$error"
-              @input="v$.to.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.cc')"
-            :error="v$.cc && v$.cc.$error && v$.cc.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="estimateMailForm.cc"
-              type="email"
-              :invalid="v$.cc && v$.cc.$error"
-              @input="v$.cc && v$.cc.$touch()"
-              placeholder="Optional: CC recipient"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.bcc')"
-            :error="v$.bcc && v$.bcc.$error && v$.bcc.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="estimateMailForm.bcc"
-              type="email"
-              :invalid="v$.bcc && v$.bcc.$error"
-              @input="v$.bcc && v$.bcc.$touch()"
-              placeholder="Optional: BCC recipient"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.subject')"
-            required
-            :error="v$.subject.$error && v$.subject.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="estimateMailForm.subject"
-              type="text"
-              :invalid="v$.subject.$error"
-              @input="v$.subject.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup :label="$t('general.body')" required>
-            <BaseCustomInput
-              v-model="estimateMailForm.body"
-              :fields="estimateMailFields"
-            />
-          </BaseInputGroup>
-        </BaseInputGrid>
-      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-      >
-        <BaseButton
-          class="mr-3"
-          variant="primary-outline"
-          type="button"
-          @click="closeSendEstimateModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton
-          :loading="isLoading"
-          :disabled="isLoading"
-          variant="primary"
-          type="button"
-          class="mr-3"
-          @click="submitForm"
-        >
-          <BaseIcon v-if="!isLoading" name="PhotoIcon" class="h-5 mr-2" />
-          {{ $t('general.preview') }}
-        </BaseButton>
-      </div>
-    </form>
-    <div v-else>
-      <div class="my-6 mx-4 border border-line-default relative">
-        <BaseButton
-          class="absolute top-4 right-4"
-          :disabled="isLoading"
-          variant="primary-outline"
-          @click="cancelPreview"
-        >
-          <BaseIcon name="PencilIcon" class="h-5 mr-2" />
-          {{ $t('general.edit') }}
-        </BaseButton>
-        <iframe
-          :src="templateUrl"
-          frameborder="0"
-          class="w-full"
-          style="min-height: 500px"
-        ></iframe>
-      </div>
-
-      <div
-        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-      >
-        <BaseButton
-          class="mr-3"
-          variant="primary-outline"
-          type="button"
-          @click="closeSendEstimateModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-        <BaseButton
-          :loading="isLoading"
-          :disabled="isLoading"
-          variant="primary"
-          type="button"
-          @click="submitForm"
-        >
-          <BaseIcon v-if="!isLoading" name="PaperAirplaneIcon" class="mr-2" />
-          {{ $t('general.send') }}
-        </BaseButton>
-      </div>
-    </div>
-  </BaseModal>
-</template>
-
-<script setup>
-import { computed, onMounted, ref, watchEffect, reactive } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { required, email, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-
-const modalStore = useModalStore()
-const estimateStore = useEstimateStore()
-const notificationStore = useNotificationStore()
-const companyStore = useCompanyStore()
-const mailDriverStore = useMailDriverStore()
-
-const { t } = useI18n()
-const isLoading = ref(false)
-const templateUrl = ref('')
-const isPreview = ref(false)
-
-const estimateMailFields = ref([
-  'customer',
-  'customerCustom',
-  'estimate',
-  'estimateCustom',
-  'company',
-])
-
-let estimateMailForm = reactive({
-  id: null,
-  from: null,
-  to: null,
-  cc: null,
-  bcc: null,
-  subject: t('estimates.new_estimate'),
-  body: null,
-})
-
-const emit = defineEmits(['update'])
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'SendEstimateModal'
-})
-
-const modalData = computed(() => {
-  return modalStore.data
-})
-
-const rules = {
-  from: {
-    required: helpers.withMessage(t('validation.required'), required),
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  to: {
-    required: helpers.withMessage(t('validation.required'), required),
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  cc: {
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  bcc: {
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  subject: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  body: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-}
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => estimateMailForm)
-)
-
-function cancelPreview() {
-  isPreview.value = false
-}
-
-async function setInitialData() {
-  let admin = await companyStore.fetchBasicMailConfig()
-
-  estimateMailForm.id = modalStore.id
-
-  if (admin.data) {
-    estimateMailForm.from = admin.data.from_mail
-  }
-
-  if (modalData.value) {
-    estimateMailForm.to = modalData.value.customer.email
-  }
-
-  estimateMailForm.body =
-    companyStore.selectedCompanySettings.estimate_mail_body
-}
-
-async function submitForm() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  try {
-    isLoading.value = true
-
-    if (!isPreview.value) {
-      const previewResponse = await estimateStore.previewEstimate(
-        estimateMailForm
-      )
-      isLoading.value = false
-
-      isPreview.value = true
-      var blob = new Blob([previewResponse.data], { type: 'text/html' })
-      templateUrl.value = URL.createObjectURL(blob)
-
-      return
-    }
-
-    const response = await estimateStore.sendEstimate(estimateMailForm)
-
-    isLoading.value = false
-
-    if (response.data.success) {
-      emit('update')
-      closeSendEstimateModal()
-      return true
-    }
-  } catch (error) {
-    console.error(error)
-    isLoading.value = false
-    notificationStore.showNotification({
-      type: 'error',
-      message: t('estimates.something_went_wrong'),
-    })
-  }
-}
-
-function closeSendEstimateModal() {
-  modalStore.closeModal()
-
-  setTimeout(() => {
-    v$.value.$reset()
-    isPreview.value = false
-    templateUrl.value = null
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue b/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
deleted file mode 100644
index 79b9f27a..00000000
--- a/resources/scripts/admin/components/modal-components/SendInvoiceModal.vue
+++ /dev/null
@@ -1,322 +0,0 @@
-<template>
-  <BaseModal
-    :show="modalActive"
-    @close="closeSendInvoiceModal"
-    @open="setInitialData"
-  >
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalTitle }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="w-6 h-6 text-muted cursor-pointer"
-          @click="closeSendInvoiceModal"
-        />
-      </div>
-    </template>
-    <form v-if="!isPreview" action="">
-      <div class="px-8 py-8 sm:p-6">
-        <BaseInputGrid layout="one-column" class="col-span-7">
-          <BaseInputGroup
-            :label="$t('general.from')"
-            required
-            :error="v$.from.$error && v$.from.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="invoiceMailForm.from"
-              type="text"
-              :invalid="v$.from.$error"
-              @input="v$.from.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.to')"
-            required
-            :error="v$.to.$error && v$.to.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="invoiceMailForm.to"
-              type="text"
-              :invalid="v$.to.$error"
-              @input="v$.to.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.cc')"
-            :error="v$.cc && v$.cc.$error && v$.cc.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="invoiceMailForm.cc"
-              type="text"
-              :invalid="v$.cc && v$.cc.$error"
-              @input="v$.cc && v$.cc.$touch()"
-              placeholder="Optional: CC recipient"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.bcc')"
-            :error="v$.bcc && v$.bcc.$error && v$.bcc.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="invoiceMailForm.bcc"
-              type="text"
-              :invalid="v$.bcc && v$.bcc.$error"
-              @input="v$.bcc && v$.bcc.$touch()"
-              placeholder="Optional: BCC recipient"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :error="v$.subject.$error && v$.subject.$errors[0].$message"
-            :label="$t('general.subject')"
-            required
-          >
-            <BaseInput
-              v-model="invoiceMailForm.subject"
-              type="text"
-              :invalid="v$.subject.$error"
-              @input="v$.subject.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.body')"
-            :error="v$.body.$error && v$.body.$errors[0].$message"
-            required
-          >
-            <BaseCustomInput
-              v-model="invoiceMailForm.body"
-              :fields="invoiceMailFields"
-            />
-          </BaseInputGroup>
-        </BaseInputGrid>
-      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-      >
-        <BaseButton
-          class="mr-3"
-          variant="primary-outline"
-          type="button"
-          @click="closeSendInvoiceModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-        <BaseButton
-          :loading="isLoading"
-          :disabled="isLoading"
-          variant="primary"
-          type="button"
-          class="mr-3"
-          @click="submitForm"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isLoading"
-              :class="slotProps.class"
-              name="PhotoIcon"
-            />
-          </template>
-          {{ $t('general.preview') }}
-        </BaseButton>
-      </div>
-    </form>
-    <div v-else>
-      <div class="my-6 mx-4 border border-line-default relative">
-        <BaseButton
-          class="absolute top-4 right-4"
-          :disabled="isLoading"
-          variant="primary-outline"
-          @click="cancelPreview"
-        >
-          <BaseIcon name="PencilIcon" class="h-5 mr-2" />
-          {{ $t('general.edit') }}
-        </BaseButton>
-
-        <iframe
-          :src="templateUrl"
-          frameborder="0"
-          class="w-full"
-          style="min-height: 500px"
-        ></iframe>
-      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-      >
-        <BaseButton
-          class="mr-3"
-          variant="primary-outline"
-          type="button"
-          @click="closeSendInvoiceModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton
-          :loading="isLoading"
-          :disabled="isLoading"
-          variant="primary"
-          type="button"
-          @click="submitForm()"
-        >
-          <BaseIcon
-            v-if="!isLoading"
-            name="PaperAirplaneIcon"
-            class="h-5 mr-2"
-          />
-          {{ $t('general.send') }}
-        </BaseButton>
-      </div>
-    </div>
-  </BaseModal>
-</template>
-
-<script setup>
-import { ref, computed, reactive, onMounted } from 'vue'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useI18n } from 'vue-i18n'
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { useVuelidate } from '@vuelidate/core'
-import { required, email, helpers } from '@vuelidate/validators'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-
-const modalStore = useModalStore()
-const companyStore = useCompanyStore()
-const notificationStore = useNotificationStore()
-const invoiceStore = useInvoiceStore()
-const mailDriverStore = useMailDriverStore()
-
-const { t } = useI18n()
-let isLoading = ref(false)
-const templateUrl = ref('')
-const isPreview = ref(false)
-
-const emit = defineEmits(['update'])
-
-const invoiceMailFields = ref([
-  'customer',
-  'customerCustom',
-  'invoice',
-  'invoiceCustom',
-  'company',
-])
-
-const invoiceMailForm = reactive({
-  id: null,
-  from: null,
-  to: null,
-  cc: null,
-  bcc: null,
-  subject: t('invoices.new_invoice'),
-  body: null,
-})
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'SendInvoiceModal'
-})
-
-const modalTitle = computed(() => {
-  return modalStore.title
-})
-
-const modalData = computed(() => {
-  return modalStore.data
-})
-
-const rules = {
-  from: {
-    required: helpers.withMessage(t('validation.required'), required),
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  to: {
-    required: helpers.withMessage(t('validation.required'), required),
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  cc: {
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  bcc: {
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  subject: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  body: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-}
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => invoiceMailForm)
-)
-
-function cancelPreview() {
-  isPreview.value = false
-}
-
-async function setInitialData() {
-  let admin = await companyStore.fetchBasicMailConfig()
-
-  invoiceMailForm.id = modalStore.id
-
-  if (admin.data) {
-    invoiceMailForm.from = admin.data.from_mail
-  }
-
-  if (modalData.value) {
-    invoiceMailForm.to = modalData.value.customer.email
-  }
-
-  invoiceMailForm.body = companyStore.selectedCompanySettings.invoice_mail_body
-}
-
-async function submitForm() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  try {
-    isLoading.value = true
-
-    if (!isPreview.value) {
-      const previewResponse = await invoiceStore.previewInvoice(invoiceMailForm)
-      isLoading.value = false
-
-      isPreview.value = true
-      var blob = new Blob([previewResponse.data], { type: 'text/html' })
-      templateUrl.value = URL.createObjectURL(blob)
-
-      return
-    }
-
-    const response = await invoiceStore.sendInvoice(invoiceMailForm)
-
-    isLoading.value = false
-
-    if (response.data.success) {
-      emit('update', modalStore.id)
-      closeSendInvoiceModal()
-      return true
-    }
-  } catch (error) {
-    console.error(error)
-    isLoading.value = false
-    notificationStore.showNotification({
-      type: 'error',
-      message: t('invoices.something_went_wrong'),
-    })
-  }
-}
-
-function closeSendInvoiceModal() {
-  modalStore.closeModal()
-  setTimeout(() => {
-    v$.value.$reset()
-    isPreview.value = false
-    templateUrl.value = null
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue b/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
deleted file mode 100644
index 1a1d81d0..00000000
--- a/resources/scripts/admin/components/modal-components/SendPaymentModal.vue
+++ /dev/null
@@ -1,315 +0,0 @@
-<template>
-  <BaseModal
-    :show="modalActive"
-    @close="closeSendPaymentModal"
-    @open="setInitialData"
-  >
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalTitle }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="w-6 h-6 text-muted cursor-pointer"
-          @click="closeSendPaymentModal"
-        />
-      </div>
-    </template>
-    <form v-if="!isPreview" action="">
-      <div class="px-8 py-8 sm:p-6">
-        <BaseInputGrid layout="one-column" class="col-span-7">
-          <BaseInputGroup
-            :label="$t('general.from')"
-            required
-            :error="v$.from.$error && v$.from.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="paymentMailForm.from"
-              type="text"
-              :invalid="v$.from.$error"
-              @input="v$.from.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.to')"
-            required
-            :error="v$.to.$error && v$.to.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="paymentMailForm.to"
-              type="text"
-              :invalid="v$.to.$error"
-              @input="v$.to.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.cc')"
-            :error="v$.cc && v$.cc.$error && v$.cc.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="paymentMailForm.cc"
-              type="email"
-              :invalid="v$.cc && v$.cc.$error"
-              @input="v$.cc && v$.cc.$touch()"
-              placeholder="Optional: CC recipient"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.bcc')"
-            :error="v$.bcc && v$.bcc.$error && v$.bcc.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="paymentMailForm.bcc"
-              type="email"
-              :invalid="v$.bcc && v$.bcc.$error"
-              @input="v$.bcc && v$.bcc.$touch()"
-              placeholder="Optional: BCC recipient"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :error="v$.subject.$error && v$.subject.$errors[0].$message"
-            :label="$t('general.subject')"
-            required
-          >
-            <BaseInput
-              v-model="paymentMailForm.subject"
-              type="text"
-              :invalid="v$.subject.$error"
-              @input="v$.subject.$touch()"
-            />
-          </BaseInputGroup>
-          <BaseInputGroup
-            :label="$t('general.body')"
-            :error="v$.body.$error && v$.body.$errors[0].$message"
-            required
-          >
-            <BaseCustomInput
-              v-model="paymentMailForm.body"
-              :fields="paymentMailFields"
-            />
-          </BaseInputGroup>
-        </BaseInputGrid>
-      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-      >
-        <BaseButton
-          class="mr-3"
-          variant="primary-outline"
-          type="button"
-          @click="closeSendPaymentModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-        <BaseButton
-          :loading="isLoading"
-          :disabled="isLoading"
-          variant="primary"
-          type="button"
-          class="mr-3"
-          @click="sendPaymentData"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isLoading"
-              :class="slotProps.class"
-              name="PhotoIcon"
-            />
-          </template>
-          {{ $t('general.preview') }}
-        </BaseButton>
-      </div>
-    </form>
-    <div v-else>
-      <div class="my-6 mx-4 border border-line-default relative">
-        <BaseButton
-          class="absolute top-4 right-4"
-          :disabled="isLoading"
-          variant="primary-outline"
-          @click="cancelPreview"
-        >
-          <BaseIcon name="PencilIcon" class="h-5 mr-2" />
-          {{ $t('general.edit') }}
-        </BaseButton>
-
-        <iframe
-          :src="templateUrl"
-          frameborder="0"
-          class="w-full"
-          style="min-height: 500px"
-        ></iframe>
-      </div>
-      <div
-        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-      >
-        <BaseButton
-          class="mr-3"
-          variant="primary-outline"
-          type="button"
-          @click="closeSendPaymentModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton
-          :loading="isLoading"
-          :disabled="isLoading"
-          variant="primary"
-          type="button"
-          @click="sendPaymentData()"
-        >
-          <BaseIcon
-            v-if="!isLoading"
-            name="PaperAirplaneIcon"
-            class="h-5 mr-2"
-          />
-          {{ $t('general.send') }}
-        </BaseButton>
-      </div>
-    </div>
-  </BaseModal>
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-import { required, email, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { ref, reactive, computed, watch, watchEffect } from 'vue'
-import { usePaymentStore } from '@/scripts/admin/stores/payment'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-import { useDialogStore } from '@/scripts/stores/dialog'
-
-const paymentStore = usePaymentStore()
-const companyStore = useCompanyStore()
-const modalStore = useModalStore()
-const notificationStore = useNotificationStore()
-const mailDriversStore = useMailDriverStore()
-const dialogStore = useDialogStore()
-
-const { t } = useI18n()
-let isLoading = ref(false)
-const templateUrl = ref('')
-const isPreview = ref(false)
-
-const paymentMailFields = ref([
-  'customer',
-  'customerCustom',
-  'payments',
-  'paymentsCustom',
-  'company',
-])
-
-const paymentMailForm = reactive({
-  id: null,
-  from: null,
-  to: null,
-  cc: null,
-  bcc: null,
-  subject: t('payments.new_payment'),
-  body: null,
-})
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'SendPaymentModal'
-})
-
-const modalTitle = computed(() => {
-  return modalStore.title
-})
-
-const modalData = computed(() => {
-  return modalStore.data
-})
-
-const rules = {
-  from: {
-    required: helpers.withMessage(t('validation.required'), required),
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  to: {
-    required: helpers.withMessage(t('validation.required'), required),
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  cc: {
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  bcc: {
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  subject: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  body: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-}
-
-const v$ = useVuelidate(rules, paymentMailForm)
-
-function cancelPreview() {
-  isPreview.value = false
-}
-
-async function setInitialData() {
-  let admin = await companyStore.fetchBasicMailConfig()
-  paymentMailForm.id = modalStore.id
-
-  if (admin.data) {
-    paymentMailForm.from = admin.data.from_mail
-  }
-
-  if (modalData.value) {
-    paymentMailForm.to = modalData.value.customer.email
-  }
-
-  paymentMailForm.body = companyStore.selectedCompanySettings.payment_mail_body
-}
-
-async function sendPaymentData() {
-  v$.value.$touch()
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  try {
-    isLoading.value = true
-
-    if (!isPreview.value) {
-      const previewResponse = await paymentStore.previewPayment(paymentMailForm)
-      isLoading.value = false
-
-      isPreview.value = true
-      var blob = new Blob([previewResponse.data], { type: 'text/html' })
-      templateUrl.value = URL.createObjectURL(blob)
-
-      return
-    }
-
-    const response = await paymentStore.sendEmail(paymentMailForm)
-
-    isLoading.value = false
-
-    if (response.data.success) {
-      closeSendPaymentModal()
-      return true
-    }
-  } catch (error) {
-    isLoading.value = false
-    notificationStore.showNotification({
-      type: 'error',
-      message: t('payments.something_went_wrong'),
-    })
-  }
-}
-
-function closeSendPaymentModal() {
-  setTimeout(() => {
-    v$.value.$reset()
-    isPreview.value = false
-    templateUrl.value = null
-    modalStore.resetModalData()
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue b/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
deleted file mode 100644
index 4888ff9a..00000000
--- a/resources/scripts/admin/components/modal-components/TaxTypeModal.vue
+++ /dev/null
@@ -1,285 +0,0 @@
-<template>
-  <BaseModal
-    :show="modalStore.active && modalStore.componentName === 'TaxTypeModal'"
-    @close="closeTaxTypeModal"
-  >
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-        <BaseIcon
-          name="XMarkIcon"
-          class="h-6 w-6 text-muted cursor-pointer"
-          @click="closeTaxTypeModal"
-        />
-      </div>
-    </template>
-    <form action="" @submit.prevent="submitTaxTypeData">
-      <div class="p-4 sm:p-6">
-        <BaseInputGrid layout="one-column">
-          <BaseInputGroup
-            :label="$t('tax_types.name')"
-            variant="horizontal"
-            :error="
-              v$.currentTaxType.name.$error &&
-              v$.currentTaxType.name.$errors[0].$message
-            "
-            required
-          >
-            <BaseInput
-              v-model="taxTypeStore.currentTaxType.name"
-              :invalid="v$.currentTaxType.name.$error"
-              type="text"
-              @input="v$.currentTaxType.name.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('tax_types.tax_type')"
-            variant="horizontal"
-            required
-          >
-            <BaseSelectInput
-              v-model="taxTypeStore.currentTaxType.calculation_type"
-              :options="[
-                { id: 'percentage', label: $t('tax_types.percentage') }, 
-                { id: 'fixed', label: $t('tax_types.fixed_amount') }
-              ]"
-              :allow-empty="false"
-              value-prop="id"
-              label-prop="label"
-              track-by="label"
-              :searchable="false"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            v-if="taxTypeStore.currentTaxType.calculation_type === 'percentage'"
-            :label="$t('tax_types.percent')"
-            variant="horizontal"
-            required
-          >
-            <BaseMoney
-              v-model="taxTypeStore.currentTaxType.percent"
-              :currency="{
-                decimal: '.',
-                thousands: ',',
-                symbol: '% ',
-                precision: 2,
-                masked: false,
-              }"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            v-else
-            :label="$t('tax_types.fixed_amount')"
-            variant="horizontal"
-            required
-          >
-            <BaseMoney
-              v-model="fixedAmount"
-              :currency="defaultCurrency"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('tax_types.description')"
-            :error="
-              v$.currentTaxType.description.$error &&
-              v$.currentTaxType.description.$errors[0].$message
-            "
-            variant="horizontal"
-          >
-            <BaseTextarea
-              v-model="taxTypeStore.currentTaxType.description"
-              :invalid="v$.currentTaxType.description.$error"
-              rows="4"
-              cols="50"
-              @input="v$.currentTaxType.description.$touch()"
-            />
-          </BaseInputGroup>
-        </BaseInputGrid>
-      </div>
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border-line-default
-        "
-      >
-        <BaseButton
-          class="mr-3 text-sm"
-          variant="primary-outline"
-          type="button"
-          @click="closeTaxTypeModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving"
-          variant="primary"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              name="ArrowDownOnSquareIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{ taxTypeStore.isEdit ? $t('general.update') : $t('general.save') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useRoute } from 'vue-router'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import Guid from 'guid'
-import TaxStub from '@/scripts/admin/stub/abilities'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-import {
-  required,
-  minLength,
-  maxLength,
-  between,
-  helpers,
-} from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-
-const taxTypeStore = useTaxTypeStore()
-const modalStore = useModalStore()
-const notificationStore = useNotificationStore()
-const estimateStore = useEstimateStore()
-const companyStore = useCompanyStore()
-const defaultCurrency = computed(() => companyStore.selectedCompanyCurrency)
-
-const { t, tm } = useI18n()
-let isSaving = ref(false)
-
-const rules = computed(() => {
-  return {
-    currentTaxType: {
-      name: {
-        required: helpers.withMessage(t('validation.required'), required),
-        minLength: helpers.withMessage(
-          t('validation.name_min_length', { count: 3 }),
-          minLength(3)
-        ),
-      },
-      calculation_type: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      percent: {
-        required: helpers.withMessage(t('validation.required'), required),
-        between: helpers.withMessage(
-          t('validation.enter_valid_tax_rate'),
-          between(-100, 100)
-        ),
-      },
-      fixed_amount: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      description: {
-        maxLength: helpers.withMessage(
-          t('validation.description_maxlength', { count: 255 }),
-          maxLength(255)
-        ),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => taxTypeStore)
-)
-
-async function submitTaxTypeData() {
-  v$.value.currentTaxType.$touch()
-  if (v$.value.currentTaxType.$invalid) {
-    return true
-  }
-  try {
-    const action = taxTypeStore.isEdit
-      ? taxTypeStore.updateTaxType
-      : taxTypeStore.addTaxType
-    isSaving.value = true
-    let res = await action(taxTypeStore.currentTaxType)
-    isSaving.value = false
-    modalStore.refreshData ? modalStore.refreshData(res.data.data) : ''
-    closeTaxTypeModal()
-  } catch (err) {
-    isSaving.value = false
-    return true
-  }
-}
-
-function SelectTax(taxData) {
-  let amount = 0
-  if (estimateStore.getSubtotalWithDiscount) {
-    if (taxData.calculation_type === 'percentage') {
-      amount = Math.round(
-        (estimateStore.getSubtotalWithDiscount * taxData.percent) / 100
-      )
-    } else {
-      amount = taxData.fixed_amount
-    }
-  }
-  let data = {
-    ...TaxStub,
-    id: Guid.raw(),
-    name: taxData.name,
-    calculation_type: taxData.calculation_type,
-    percent: taxData.percent,
-    fixed_amount: taxData.fixed_amount,
-    tax_type_id: taxData.id,
-    amount,
-  }
-  estimateStore.$patch((state) => {
-    state.newEstimate.taxes.push({ ...data })
-  })
-}
-
-function selectItemTax(taxData) {
-  if (modalStore.data) {
-    let data = {
-      ...TaxStub,
-      id: Guid.raw(),
-      name: taxData.name,
-      calculation_type: taxData.calculation_type,
-      percent: taxData.percent,
-      fixed_amount: taxData.fixed_amount,
-      tax_type_id: taxData.id,
-    }
-    modalStore.refreshData(data)
-  }
-}
-
-function closeTaxTypeModal() {
-  modalStore.closeModal()
-  setTimeout(() => {
-    taxTypeStore.resetCurrentTaxType()
-    v$.value.$reset()
-  }, 300)
-}
-
-const fixedAmount = computed({
-  get: () => taxTypeStore.currentTaxType.fixed_amount / 100,
-  set: (value) => {
-    taxTypeStore.currentTaxType.fixed_amount = Math.round(value * 100)
-  },
-})
-</script>
diff --git a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue b/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
deleted file mode 100644
index be98a14c..00000000
--- a/resources/scripts/admin/components/modal-components/TaxationAddressModal.vue
+++ /dev/null
@@ -1,209 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @close="closeModal" @open="setAddress">
-    <template #header>
-      <div class="flex justify-between w-full">
-        <div class="flex flex-col">
-          {{ modalStore.title }}
-
-          <p class="text-sm text-muted mt-1">
-            {{ modalStore.content }}
-          </p>
-        </div>
-        <BaseIcon
-          name="XMarkIcon"
-          class="h-6 w-6 text-muted cursor-pointer"
-          @click="closeModal"
-        />
-      </div>
-    </template>
-    <form @submit.prevent="saveCustomerAddress">
-      <div class="p-4 sm:p-6">
-        <BaseInputGrid layout="one-column">
-          <BaseInputGroup
-            required
-            :error="v$.state.$error && v$.state.$errors[0].$message"
-            :label="$t('customers.state')"
-          >
-            <BaseInput
-              v-model="address.state"
-              type="text"
-              name="shippingState"
-              class="mt-1 md:mt-0"
-              :invalid="v$.state.$error"
-              @input="v$.state.$touch()"
-              :placeholder="$t('settings.taxations.state_placeholder')"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            required
-            :error="v$.city.$error && v$.city.$errors[0].$message"
-            :label="$t('customers.city')"
-          >
-            <BaseInput
-              v-model="address.city"
-              type="text"
-              name="shippingCity"
-              class="mt-1 md:mt-0"
-              :invalid="v$.city.$error"
-              @input="v$.city.$touch()"
-              :placeholder="$t('settings.taxations.city_placeholder')"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            required
-            :error="
-              v$.address_street_1.$error &&
-              v$.address_street_1.$errors[0].$message
-            "
-            :label="$t('customers.address')"
-          >
-            <BaseTextarea
-              v-model="address.address_street_1"
-              rows="2"
-              cols="50"
-              class="mt-1 md:mt-0"
-              :invalid="v$.address_street_1.$error"
-              @input="v$.address_street_1.$touch()"
-              :placeholder="$t('settings.taxations.address_placeholder')"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            required
-            :error="v$.zip.$error && v$.zip.$errors[0].$message"
-            :label="$t('customers.zip_code')"
-          >
-            <BaseInput
-              v-model="address.zip"
-              :invalid="v$.zip.$error"
-              @input="v$.zip.$touch()"
-              type="text"
-              class="mt-1 md:mt-0"
-              :placeholder="$t('settings.taxations.zip_placeholder')"
-            />
-          </BaseInputGroup>
-        </BaseInputGrid>
-      </div>
-
-      <div
-        class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
-      >
-        <BaseButton
-          class="mr-3 text-sm"
-          type="button"
-          variant="primary-outline"
-          @click="closeModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton :loading="isLoading" variant="primary" type="submit">
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isLoading"
-              name="ArrowDownOnSquareIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{ $t('general.save') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useI18n } from 'vue-i18n'
-import { helpers, required } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-
-const modalStore = useModalStore()
-const globalStore = useGlobalStore()
-
-const address = reactive({
-  state: '',
-  city: '',
-  address_street_1: '',
-  zip: '',
-})
-
-const isLoading = ref(false)
-const taxTypeStore = useTaxTypeStore()
-const { t } = useI18n()
-
-const modalActive = computed(
-  () => modalStore.active && modalStore.componentName === 'TaxationAddressModal'
-)
-
-const rules = computed(() => {
-  return {
-    state: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    city: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    address_street_1: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    zip: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => address)
-)
-
-async function saveCustomerAddress() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  let data = {
-    address,
-  }
-  if (modalStore.id) {
-    data.customer_id = modalStore.id
-  }
-  // replace '/n' with empty string
-  address.address_street_1 = address.address_street_1.replace(
-    /(\r\n|\n|\r)/gm,
-    ''
-  )
-
-  isLoading.value = true
-  await taxTypeStore
-    .fetchSalesTax(data)
-    .then((res) => {
-      isLoading.value = false
-      emit('addTax', res.data.data)
-      closeModal()
-    })
-    .catch((e) => {
-      isLoading.value = false
-    })
-}
-const emit = defineEmits(['addTax'])
-
-function setAddress() {
-  address.state = modalStore?.data?.state
-  address.city = modalStore?.data?.city
-  address.address_street_1 = modalStore?.data?.address_street_1
-  address.zip = modalStore?.data?.zip
-}
-
-function closeModal() {
-  modalStore.closeModal()
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue b/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
deleted file mode 100644
index 3cb8d76a..00000000
--- a/resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue
+++ /dev/null
@@ -1,421 +0,0 @@
-<template>
-  <BaseModal :show="modalActive" @open="setData">
-    <template #header>
-      <div class="flex justify-between w-full">
-        {{ modalStore.title }}
-
-        <BaseIcon
-          name="XMarkIcon"
-          class="w-6 h-6 text-muted cursor-pointer"
-          @click="closeCustomFieldModal"
-        />
-      </div>
-    </template>
-
-    <form action="" @submit.prevent="submitCustomFieldData">
-      <div class="overflow-y-auto max-h-[550px]">
-        <div class="px-4 md:px-8 py-8 overflow-y-auto sm:p-6">
-          <BaseInputGrid layout="one-column">
-            <BaseInputGroup
-              :label="$t('settings.custom_fields.name')"
-              required
-              :error="
-                v$.currentCustomField.name.$error &&
-                v$.currentCustomField.name.$errors[0].$message
-              "
-            >
-              <BaseInput
-                ref="name"
-                v-model="customFieldStore.currentCustomField.name"
-                :invalid="v$.currentCustomField.name.$error"
-                @input="v$.currentCustomField.name.$touch()"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('settings.custom_fields.model')"
-              :error="
-                v$.currentCustomField.model_type.$error &&
-                v$.currentCustomField.model_type.$errors[0].$message
-              "
-              :help-text="
-                customFieldStore.currentCustomField.in_use
-                  ? $t('settings.custom_fields.model_in_use')
-                  : ''
-              "
-              required
-            >
-              <BaseMultiselect
-                v-model="customFieldStore.currentCustomField.model_type"
-                :options="modelTypes"
-                value-prop="value"
-                :can-deselect="false"
-                :invalid="v$.currentCustomField.model_type.$error"
-                :searchable="true"
-                :disabled="customFieldStore.currentCustomField.in_use"
-                @input="v$.currentCustomField.model_type.$touch()"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              class="flex items-center space-x-4"
-              :label="$t('settings.custom_fields.required')"
-            >
-              <BaseSwitch v-model="isRequiredField" />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('settings.custom_fields.type')"
-              :error="
-                v$.currentCustomField.type.$error &&
-                v$.currentCustomField.type.$errors[0].$message
-              "
-              :help-text="
-                customFieldStore.currentCustomField.in_use
-                  ? $t('settings.custom_fields.type_in_use')
-                  : ''
-              "
-              required
-            >
-              <BaseMultiselect
-                v-model="selectedType"
-                :options="dataTypes"
-                :invalid="v$.currentCustomField.type.$error"
-                :disabled="customFieldStore.currentCustomField.in_use"
-                :searchable="true"
-                :can-deselect="false"
-                object
-                @update:modelValue="onSelectedTypeChange"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('settings.custom_fields.label')"
-              required
-              :error="
-                v$.currentCustomField.label.$error &&
-                v$.currentCustomField.label.$errors[0].$message
-              "
-            >
-              <BaseInput
-                v-model="customFieldStore.currentCustomField.label"
-                :invalid="v$.currentCustomField.label.$error"
-                @input="v$.currentCustomField.label.$touch()"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              v-if="isDropdownSelected"
-              :label="$t('settings.custom_fields.options')"
-            >
-              <OptionCreate @onAdd="addNewOption" />
-
-              <div
-                v-for="(option, index) in customFieldStore.currentCustomField
-                  .options"
-                :key="index"
-                class="flex items-center mt-5"
-              >
-                <BaseInput v-model="option.name" class="w-64" />
-
-                <BaseIcon
-                  name="MinusCircleIcon"
-                  class="ml-1 cursor-pointer"
-                  :class="
-                    customFieldStore.currentCustomField.in_use
-                      ? 'text-subtle'
-                      : 'text-red-300'
-                  "
-                  @click="removeOption(index)"
-                />
-              </div>
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('settings.custom_fields.default_value')"
-              class="relative"
-            >
-              <component
-                :is="defaultValueComponent"
-                v-model="customFieldStore.currentCustomField.default_answer"
-                :options="customFieldStore.currentCustomField.options"
-                :default-date-time="
-                  customFieldStore.currentCustomField.dateTimeValue
-                "
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              v-if="!isSwitchTypeSelected"
-              :label="$t('settings.custom_fields.placeholder')"
-            >
-              <BaseInput
-                v-model="customFieldStore.currentCustomField.placeholder"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('settings.custom_fields.order')"
-              :error="
-                v$.currentCustomField.order.$error &&
-                v$.currentCustomField.order.$errors[0].$message
-              "
-              required
-            >
-              <BaseInput
-                v-model="customFieldStore.currentCustomField.order"
-                type="number"
-                :invalid="v$.currentCustomField.order.$error"
-                @input="v$.currentCustomField.order.$touch()"
-              />
-            </BaseInputGroup>
-          </BaseInputGrid>
-        </div>
-      </div>
-
-      <div
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border-line-default
-        "
-      >
-        <BaseButton
-          class="mr-3"
-          type="button"
-          variant="primary-outline"
-          @click="closeCustomFieldModal"
-        >
-          {{ $t('general.cancel') }}
-        </BaseButton>
-
-        <BaseButton
-          variant="primary"
-          :loading="isSaving"
-          :disabled="isSaving"
-          type="submit"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              :class="slotProps.class"
-              name="ArrowDownOnSquareIcon"
-            />
-          </template>
-          {{
-            !customFieldStore.isEdit ? $t('general.save') : $t('general.update')
-          }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseModal>
-</template>
-
-<script setup>
-import { reactive, ref, computed, defineAsyncComponent } from 'vue'
-import OptionCreate from './OptionsCreate.vue'
-import moment from 'moment'
-import useVuelidate from '@vuelidate/core'
-import { required, numeric, helpers } from '@vuelidate/validators'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
-import { useI18n } from 'vue-i18n'
-
-const modalStore = useModalStore()
-const customFieldStore = useCustomFieldStore()
-const { t } = useI18n()
-
-let isSaving = ref(false)
-
-const modelTypes = reactive([
-  {label: t('settings.custom_fields.model_type.customer'), value: 'Customer'},
-  {label: t('settings.custom_fields.model_type.invoice'), value: 'Invoice'},
-  {label: t('settings.custom_fields.model_type.estimate'), value: 'Estimate'},
-  {label: t('settings.custom_fields.model_type.expense'), value: 'Expense'},
-  {label: t('settings.custom_fields.model_type.payment'), value: 'Payment'}
-])
-
-const dataTypes = reactive([
-  { label: 'Text', value: 'Input' },
-  { label: 'Textarea', value: 'TextArea' },
-  { label: 'Phone', value: 'Phone' },
-  { label: 'URL', value: 'Url' },
-  { label: 'Number', value: 'Number' },
-  { label: 'Select Field', value: 'Dropdown' },
-  { label: 'Switch Toggle', value: 'Switch' },
-  { label: 'Date', value: 'Date' },
-  { label: 'Time', value: 'Time' },
-  { label: 'Date & Time', value: 'DateTime' },
-])
-
-let selectedType = ref(dataTypes[0])
-
-const modalActive = computed(() => {
-  return modalStore.active && modalStore.componentName === 'CustomFieldModal'
-})
-
-const isSwitchTypeSelected = computed(
-  () => selectedType.value && selectedType.value.label === 'Switch Toggle'
-)
-
-const isDropdownSelected = computed(
-  () => selectedType.value && selectedType.value.label === 'Select Field'
-)
-
-const defaultValueComponent = computed(() => {
-  if (customFieldStore.currentCustomField.type) {
-    return defineAsyncComponent(() =>
-      import(
-        `../../custom-fields/types/${customFieldStore.currentCustomField.type}Type.vue`
-      )
-    )
-  }
-
-  return false
-})
-
-const isRequiredField = computed({
-  get: () => customFieldStore.currentCustomField.is_required === 1,
-  set: (value) => {
-    const intVal = value ? 1 : 0
-    customFieldStore.currentCustomField.is_required = intVal
-  },
-})
-
-const rules = computed(() => {
-  return {
-    currentCustomField: {
-      name: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      label: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      model_type: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      order: {
-        required: helpers.withMessage(t('validation.required'), required),
-        numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
-      },
-      type: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => customFieldStore)
-)
-
-function setData() {
-  if (customFieldStore.isEdit) {
-    selectedType.value = dataTypes.find(
-      (type) => type.value == customFieldStore.currentCustomField.type
-    )
-  } else {
-    customFieldStore.currentCustomField.model_type = modelTypes[0]
-
-    customFieldStore.currentCustomField.type = dataTypes[0].value
-    selectedType.value = dataTypes[0]
-  }
-}
-
-async function submitCustomFieldData() {
-  v$.value.currentCustomField.$touch()
-
-  if (v$.value.currentCustomField.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-
-  let data = {
-    ...customFieldStore.currentCustomField,
-  }
-
-  if (customFieldStore.currentCustomField.options) {
-    data.options = customFieldStore.currentCustomField.options.map(
-      (option) => option.name
-    )
-  }
-
-  if (data.type == 'Time' && typeof data.default_answer == 'object') {
-    let HH =
-      data && data.default_answer && data.default_answer.HH
-        ? data.default_answer.HH
-        : null
-    let mm =
-      data && data.default_answer && data.default_answer.mm
-        ? data.default_answer.mm
-        : null
-    let ss =
-      data && data.default_answer && data.default_answer.ss
-        ? data.default_answer.ss
-        : null
-
-    data.default_answer = `${HH}:${mm}`
-  }
-
-  const action = customFieldStore.isEdit
-    ? customFieldStore.updateCustomField
-    : customFieldStore.addCustomField
-
-  await action(data)
-
-  isSaving.value = false
-
-  modalStore.refreshData ? modalStore.refreshData() : ''
-
-  closeCustomFieldModal()
-}
-
-function addNewOption(option) {
-  customFieldStore.currentCustomField.options = [
-    { name: option },
-    ...customFieldStore.currentCustomField.options,
-  ]
-}
-
-function removeOption(index) {
-  if (customFieldStore.isEdit && customFieldStore.currentCustomField.in_use) {
-    return
-  }
-
-  const option = customFieldStore.currentCustomField.options[index]
-
-  if (option.name === customFieldStore.currentCustomField.default_answer) {
-    customFieldStore.currentCustomField.default_answer = null
-  }
-
-  customFieldStore.currentCustomField.options.splice(index, 1)
-}
-
-function onChangeReset() {
-  customFieldStore.$patch((state) => {
-    state.currentCustomField.default_answer = null
-    state.currentCustomField.is_required = false
-    state.currentCustomField.placeholder = null
-    state.currentCustomField.options = []
-  })
-
-  v$.value.$reset()
-}
-
-function onSelectedTypeChange(data) {
-  customFieldStore.currentCustomField.type = data.value
-}
-
-function closeCustomFieldModal() {
-  modalStore.closeModal()
-
-  setTimeout(() => {
-    customFieldStore.resetCurrentCustomField()
-    v$.value.$reset()
-  }, 300)
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/custom-fields/OptionsCreate.vue b/resources/scripts/admin/components/modal-components/custom-fields/OptionsCreate.vue
deleted file mode 100644
index 0ec049bd..00000000
--- a/resources/scripts/admin/components/modal-components/custom-fields/OptionsCreate.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="flex items-center mt-1">
-    <BaseInput
-      v-model="option"
-      type="text"
-      class="w-full md:w-96"
-      :placeholder="$t('settings.custom_fields.press_enter_to_add')"
-      @click="onAddOption"
-      @keydown.enter.prevent.stop="onAddOption"
-    />
-
-    <BaseIcon
-      name="PlusCircleIcon"
-      class="ml-1 text-primary-500 cursor-pointer"
-      @click="onAddOption"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const emit = defineEmits(['onAdd'])
-
-const option = ref(null)
-
-function onAddOption() {
-  if (option.value == null || option.value == '' || option.value == undefined) {
-    return true
-  }
-
-  emit('onAdd', option.value)
-
-  option.value = null
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue b/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
deleted file mode 100644
index 0f329827..00000000
--- a/resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue
+++ /dev/null
@@ -1,330 +0,0 @@
-<template>
-  <form @submit.prevent="submitData">
-    <div class="px-8 py-6">
-      <BaseInputGrid>
-        <BaseInputGroup
-          :label="$t('settings.disk.name')"
-          :error="
-            v$.doSpaceDiskConfig.name.$error &&
-            v$.doSpaceDiskConfig.name.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model="diskStore.doSpaceDiskConfig.name"
-            type="text"
-            name="name"
-            :invalid="v$.doSpaceDiskConfig.name.$error"
-            @input="v$.doSpaceDiskConfig.name.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.driver')"
-          :error="
-            v$.doSpaceDiskConfig.selected_driver.$error &&
-            v$.doSpaceDiskConfig.selected_driver.$errors[0].$message
-          "
-          required
-        >
-          <BaseMultiselect
-            v-model="selected_driver"
-            :invalid="v$.doSpaceDiskConfig.selected_driver.$error"
-            value-prop="value"
-            :options="disks"
-            searchable
-            label="name"
-            :can-deselect="false"
-            track-by="name"
-            @update:modelValue="onChangeDriver(data)"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.do_spaces_root')"
-          :error="
-            v$.doSpaceDiskConfig.root.$error &&
-            v$.doSpaceDiskConfig.root.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.doSpaceDiskConfig.root"
-            type="text"
-            name="name"
-            placeholder="Ex. /user/root/"
-            :invalid="v$.doSpaceDiskConfig.root.$error"
-            @input="v$.doSpaceDiskConfig.root.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.do_spaces_key')"
-          :error="
-            v$.doSpaceDiskConfig.key.$error &&
-            v$.doSpaceDiskConfig.key.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.doSpaceDiskConfig.key"
-            type="text"
-            name="name"
-            placeholder="Ex. KEIS4S39SERSDS"
-            :invalid="v$.doSpaceDiskConfig.key.$error"
-            @input="v$.doSpaceDiskConfig.key.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.do_spaces_secret')"
-          :error="
-            v$.doSpaceDiskConfig.secret.$error &&
-            v$.doSpaceDiskConfig.secret.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.doSpaceDiskConfig.secret"
-            type="text"
-            name="name"
-            placeholder="Ex. ********"
-            :invalid="v$.doSpaceDiskConfig.secret.$error"
-            @input="v$.doSpaceDiskConfig.secret.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.do_spaces_region')"
-          :error="
-            v$.doSpaceDiskConfig.region.$error &&
-            v$.doSpaceDiskConfig.region.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.doSpaceDiskConfig.region"
-            type="text"
-            name="name"
-            placeholder="Ex. nyc3"
-            :invalid="v$.doSpaceDiskConfig.region.$error"
-            @input="v$.doSpaceDiskConfig.region.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.do_spaces_endpoint')"
-          :error="
-            v$.doSpaceDiskConfig.endpoint.$error &&
-            v$.doSpaceDiskConfig.endpoint.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.doSpaceDiskConfig.endpoint"
-            type="text"
-            name="name"
-            placeholder="Ex. https://nyc3.digitaloceanspaces.com"
-            :invalid="v$.doSpaceDiskConfig.endpoint.$error"
-            @input="v$.doSpaceDiskConfig.endpoint.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.do_spaces_bucket')"
-          :error="
-            v$.doSpaceDiskConfig.bucket.$error &&
-            v$.doSpaceDiskConfig.bucket.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.doSpaceDiskConfig.bucket"
-            type="text"
-            name="name"
-            placeholder="Ex. my-new-space"
-            :invalid="v$.doSpaceDiskConfig.bucket.$error"
-            @input="v$.doSpaceDiskConfig.bucket.$touch()"
-          />
-        </BaseInputGroup>
-      </BaseInputGrid>
-      <div v-if="!isDisabled" class="flex items-center mt-6">
-        <div class="relative flex items-center w-12">
-          <BaseSwitch v-model="set_as_default" class="flex" />
-        </div>
-        <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-heading box-title">
-            {{ $t('settings.disk.is_default') }}
-          </p>
-        </div>
-      </div>
-    </div>
-    <slot :disk-data="{ isLoading, submitData }" />
-  </form>
-</template>
-
-<script>
-import { useDiskStore } from '@/scripts/admin/stores/disk'
-import { useModalStore } from '@/scripts/stores/modal'
-import { computed, onBeforeUnmount, reactive, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import useVuelidate from '@vuelidate/core'
-import { required, url, helpers } from '@vuelidate/validators'
-export default {
-  props: {
-    isEdit: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    disks: {
-      type: Array,
-      require: true,
-      default: Array,
-    },
-  },
-
-  emits: ['submit', 'onChangeDisk'],
-
-  setup(props, { emit }) {
-    const diskStore = useDiskStore()
-    const modalStore = useModalStore()
-    const { t } = useI18n()
-
-    let isLoading = ref(false)
-    let set_as_default = ref(false)
-    let selected_disk = ref('')
-    let is_current_disk = ref(null)
-
-    const selected_driver = computed({
-      get: () => diskStore.selected_driver,
-      set: (value) => {
-        diskStore.selected_driver = value
-        diskStore.doSpaceDiskConfig.selected_driver = value
-      },
-    })
-
-    const rules = computed(() => {
-      return {
-        doSpaceDiskConfig: {
-          root: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          key: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          secret: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          region: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          endpoint: {
-            required: helpers.withMessage(t('validation.required'), required),
-            url: helpers.withMessage(t('validation.invalid_url'), url),
-          },
-          bucket: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          selected_driver: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-
-          name: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-        },
-      }
-    })
-
-    const v$ = useVuelidate(
-      rules,
-      computed(() => diskStore)
-    )
-
-    onBeforeUnmount(() => {
-      diskStore.doSpaceDiskConfig = {
-        name: null,
-        selected_driver: 'doSpaces',
-        key: null,
-        secret: null,
-        region: null,
-        bucket: null,
-        endpoint: null,
-        root: null,
-      }
-    })
-
-    loadData()
-
-    async function loadData() {
-      isLoading.value = true
-      let data = reactive({
-        disk: 'doSpaces',
-      })
-
-      if (props.isEdit) {
-        Object.assign(
-          diskStore.doSpaceDiskConfig,
-          JSON.parse(modalStore.data.credentials)
-        )
-        set_as_default.value = modalStore.data.set_as_default
-
-        if (set_as_default.value) {
-          is_current_disk.value = true
-        }
-      } else {
-        let diskData = await diskStore.fetchDiskEnv(data)
-        Object.assign(diskStore.doSpaceDiskConfig, diskData.data)
-      }
-      selected_disk.value = props.disks.find((v) => v.value == 'doSpaces')
-      isLoading.value = false
-    }
-
-    const isDisabled = computed(() => {
-      return props.isEdit && set_as_default.value && is_current_disk.value
-        ? true
-        : false
-    })
-
-    async function submitData() {
-      v$.value.doSpaceDiskConfig.$touch()
-      if (v$.value.doSpaceDiskConfig.$invalid) {
-        return true
-      }
-
-      let data = {
-        credentials: diskStore.doSpaceDiskConfig,
-        name: diskStore.doSpaceDiskConfig.name,
-        driver: selected_disk.value.value,
-        set_as_default: set_as_default.value,
-      }
-      emit('submit', data)
-      return false
-    }
-
-    function onChangeDriver() {
-      emit('onChangeDisk', diskStore.doSpaceDiskConfig.selected_driver)
-    }
-
-    return {
-      v$,
-      diskStore,
-      selected_driver,
-      isLoading,
-      set_as_default,
-      selected_disk,
-      is_current_disk,
-      loadData,
-      submitData,
-      onChangeDriver,
-      isDisabled,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue b/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
deleted file mode 100644
index 94bc577c..00000000
--- a/resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue
+++ /dev/null
@@ -1,299 +0,0 @@
-<template>
-  <form @submit.prevent="submitData">
-    <div class="px-8 py-6">
-      <BaseInputGrid>
-        <BaseInputGroup
-          :label="$t('settings.disk.name')"
-          :error="
-            v$.dropBoxDiskConfig.name.$error &&
-            v$.dropBoxDiskConfig.name.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model="diskStore.dropBoxDiskConfig.name"
-            type="text"
-            name="name"
-            :invalid="v$.dropBoxDiskConfig.name.$error"
-            @input="v$.dropBoxDiskConfig.name.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.driver')"
-          :error="
-            v$.dropBoxDiskConfig.selected_driver.$error &&
-            v$.dropBoxDiskConfig.selected_driver.$errors[0].$message
-          "
-          required
-        >
-          <BaseMultiselect
-            v-model="selected_driver"
-            :invalid="v$.dropBoxDiskConfig.selected_driver.$error"
-            value-prop="value"
-            :options="disks"
-            searchable
-            label="name"
-            :can-deselect="false"
-            @update:modelValue="onChangeDriver(data)"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.dropbox_root')"
-          :error="
-            v$.dropBoxDiskConfig.root.$error &&
-            v$.dropBoxDiskConfig.root.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.dropBoxDiskConfig.root"
-            type="text"
-            name="name"
-            placeholder="Ex. /user/root/"
-            :invalid="v$.dropBoxDiskConfig.root.$error"
-            @input="v$.dropBoxDiskConfig.root.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.dropbox_token')"
-          :error="
-            v$.dropBoxDiskConfig.token.$error &&
-            v$.dropBoxDiskConfig.token.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.dropBoxDiskConfig.token"
-            type="text"
-            name="name"
-            :invalid="v$.dropBoxDiskConfig.token.$error"
-            @input="v$.dropBoxDiskConfig.token.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.dropbox_key')"
-          :error="
-            v$.dropBoxDiskConfig.key.$error &&
-            v$.dropBoxDiskConfig.key.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.dropBoxDiskConfig.key"
-            type="text"
-            name="name"
-            placeholder="Ex. KEIS4S39SERSDS"
-            :invalid="v$.dropBoxDiskConfig.key.$error"
-            @input="v$.dropBoxDiskConfig.key.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.dropbox_secret')"
-          :error="
-            v$.dropBoxDiskConfig.secret.$error &&
-            v$.dropBoxDiskConfig.secret.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.dropBoxDiskConfig.secret"
-            type="text"
-            name="name"
-            placeholder="Ex. ********"
-            :invalid="v$.dropBoxDiskConfig.secret.$error"
-            @input="v$.dropBoxDiskConfig.secret.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.dropbox_app')"
-          :error="
-            v$.dropBoxDiskConfig.app.$error &&
-            v$.dropBoxDiskConfig.app.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.dropBoxDiskConfig.app"
-            type="text"
-            name="name"
-            :invalid="v$.dropBoxDiskConfig.app.$error"
-            @input="v$.dropBoxDiskConfig.app.$touch()"
-          />
-        </BaseInputGroup>
-      </BaseInputGrid>
-      <div v-if="!isDisabled" class="flex items-center mt-6">
-        <div class="relative flex items-center w-12">
-          <BaseSwitch v-model="set_as_default" class="flex" />
-        </div>
-        <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-heading box-title">
-            {{ $t('settings.disk.is_default') }}
-          </p>
-        </div>
-      </div>
-    </div>
-    <slot :disk-data="{ isLoading, submitData }" />
-  </form>
-</template>
-
-<script>
-import { useDiskStore } from '@/scripts/admin/stores/disk'
-import { useModalStore } from '@/scripts/stores/modal'
-import { reactive, ref, computed, onBeforeUnmount } from 'vue'
-import { useI18n } from 'vue-i18n'
-import useVuelidate from '@vuelidate/core'
-import { required, helpers } from '@vuelidate/validators'
-export default {
-  props: {
-    isEdit: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    disks: {
-      type: Array,
-      require: true,
-      default: Array,
-    },
-  },
-
-  emits: ['submit', 'onChangeDisk'],
-
-  setup(props, { emit }) {
-    const diskStore = useDiskStore()
-    const modalStore = useModalStore()
-    const { t } = useI18n()
-
-    let set_as_default = ref(false)
-    let isLoading = ref(false)
-    let is_current_disk = ref(null)
-    let selected_disk = ref(null)
-
-    const selected_driver = computed({
-      get: () => diskStore.selected_driver,
-      set: (value) => {
-        diskStore.selected_driver = value
-        diskStore.dropBoxDiskConfig.selected_driver = value
-      },
-    })
-
-    const rules = computed(() => {
-      return {
-        dropBoxDiskConfig: {
-          root: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          key: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          secret: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          token: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          app: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          selected_driver: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          name: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-        },
-      }
-    })
-
-    const v$ = useVuelidate(
-      rules,
-      computed(() => diskStore)
-    )
-
-    onBeforeUnmount(() => {
-      diskStore.dropBoxDiskConfig = {
-        name: null,
-        selected_driver: 'dropbox',
-        token: null,
-        key: null,
-        secret: null,
-        app: null,
-      }
-    })
-
-    loadData()
-
-    async function loadData() {
-      isLoading.value = true
-      let data = reactive({
-        disk: 'dropbox',
-      })
-
-      if (props.isEdit) {
-        Object.assign(diskStore.dropBoxDiskConfig, modalStore.data)
-        set_as_default.value = modalStore.data.set_as_default
-
-        if (set_as_default.value) {
-          is_current_disk.value = true
-        }
-      } else {
-        let diskData = await diskStore.fetchDiskEnv(data)
-        Object.assign(diskStore.dropBoxDiskConfig, diskData.data)
-      }
-      selected_disk.value = props.disks.find((v) => v.value == 'dropbox')
-      isLoading.value = false
-    }
-
-    const isDisabled = computed(() => {
-      return props.isEdit && set_as_default.value && is_current_disk.value
-        ? true
-        : false
-    })
-
-    async function submitData() {
-      v$.value.dropBoxDiskConfig.$touch()
-      if (v$.value.dropBoxDiskConfig.$invalid) {
-        return true
-      }
-      let data = {
-        credentials: diskStore.dropBoxDiskConfig,
-        name: diskStore.dropBoxDiskConfig.name,
-        driver: selected_disk.value.value,
-        set_as_default: set_as_default.value,
-      }
-
-      emit('submit', data)
-      return false
-    }
-
-    function onChangeDriver() {
-      emit('onChangeDisk', diskStore.dropBoxDiskConfig.selected_driver)
-    }
-
-    return {
-      v$,
-      diskStore,
-      selected_driver,
-      set_as_default,
-      isLoading,
-      is_current_disk,
-      selected_disk,
-      isDisabled,
-      loadData,
-      submitData,
-      onChangeDriver,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue b/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
deleted file mode 100644
index a33462c4..00000000
--- a/resources/scripts/admin/components/modal-components/disks/LocalDisk.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
-  <form action="" @submit.prevent="submitData">
-    <div class="px-4 sm:px-8 py-6">
-      <BaseInputGrid>
-        <BaseInputGroup
-          :label="$t('settings.disk.name')"
-          :error="
-            v$.localDiskConfig.name.$error &&
-            v$.localDiskConfig.name.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model="diskStore.localDiskConfig.name"
-            type="text"
-            name="name"
-            :invalid="v$.localDiskConfig.name.$error"
-            @input="v$.localDiskConfig.name.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.driver')"
-          :error="
-            v$.localDiskConfig.selected_driver.$error &&
-            v$.localDiskConfig.selected_driver.$errors[0].$message
-          "
-          required
-        >
-          <BaseMultiselect
-            v-model="selected_driver"
-            value-prop="value"
-            :invalid="v$.localDiskConfig.selected_driver.$error"
-            :options="disks"
-            searchable
-            label="name"
-            :can-deselect="false"
-            @update:modelValue="onChangeDriver(data)"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.local_root')"
-          :error="
-            v$.localDiskConfig.root.$error &&
-            v$.localDiskConfig.root.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.localDiskConfig.root"
-            type="text"
-            name="name"
-            :invalid="v$.localDiskConfig.root.$error"
-            placeholder="Ex./user/root/"
-            @input="v$.localDiskConfig.root.$touch()"
-          />
-        </BaseInputGroup>
-      </BaseInputGrid>
-      <div v-if="!isDisabled" class="flex items-center mt-6">
-        <div class="relative flex items-center w-12">
-          <BaseSwitch v-model="set_as_default" class="flex" />
-        </div>
-
-        <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-heading box-title">
-            {{ $t('settings.disk.is_default') }}
-          </p>
-        </div>
-      </div>
-    </div>
-    <slot :disk-data="{ isLoading, submitData }" />
-  </form>
-</template>
-
-<script>
-import { useDiskStore } from '@/scripts/admin/stores/disk'
-import { useModalStore } from '@/scripts/stores/modal'
-import { computed, onBeforeUnmount, reactive, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import useVuelidate from '@vuelidate/core'
-import { required, helpers } from '@vuelidate/validators'
-
-export default {
-  props: {
-    isEdit: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    disks: {
-      type: Array,
-      require: true,
-      default: Array,
-    },
-  },
-
-  emits: ['submit', 'onChangeDisk'],
-
-  setup(props, { emit }) {
-    const diskStore = useDiskStore()
-    const modalStore = useModalStore()
-    const { t } = useI18n()
-
-    let isLoading = ref(false)
-    let set_as_default = ref(false)
-    let selected_disk = ref('')
-    let is_current_disk = ref(null)
-
-    const selected_driver = computed({
-      get: () => diskStore.selected_driver,
-      set: (value) => {
-        diskStore.selected_driver = value
-        diskStore.localDiskConfig.selected_driver = value
-      },
-    })
-
-    const rules = computed(() => {
-      return {
-        localDiskConfig: {
-          name: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          selected_driver: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          root: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-        },
-      }
-    })
-
-    const v$ = useVuelidate(
-      rules,
-      computed(() => diskStore)
-    )
-
-    onBeforeUnmount(() => {
-      diskStore.localDiskConfig = {
-        name: null,
-        selected_driver: 'local',
-        root: null,
-      }
-    })
-
-    loadData()
-
-    async function loadData() {
-      isLoading.value = true
-
-      let data = reactive({
-        disk: 'local',
-      })
-
-      if (props.isEdit) {
-        Object.assign(diskStore.localDiskConfig, modalStore.data)
-        diskStore.localDiskConfig.root = modalStore.data.credentials
-        set_as_default.value = modalStore.data.set_as_default
-
-        if (set_as_default.value) {
-          is_current_disk.value = true
-        }
-      } else {
-        let diskData = await diskStore.fetchDiskEnv(data)
-        Object.assign(diskStore.localDiskConfig, diskData.data)
-      }
-
-      selected_disk.value = props.disks.find((v) => v.value == 'local')
-      isLoading.value = false
-    }
-
-    const isDisabled = computed(() => {
-      return props.isEdit && set_as_default.value && is_current_disk.value
-        ? true
-        : false
-    })
-
-    async function submitData() {
-      v$.value.localDiskConfig.$touch()
-
-      if (v$.value.localDiskConfig.$invalid) {
-        return true
-      }
-
-      let data = reactive({
-        credentials: diskStore.localDiskConfig.root,
-        name: diskStore.localDiskConfig.name,
-        driver: diskStore.localDiskConfig.selected_driver,
-        set_as_default: set_as_default.value,
-      })
-
-      emit('submit', data)
-      return false
-    }
-
-    function onChangeDriver() {
-      emit('onChangeDisk', diskStore.localDiskConfig.selected_driver)
-    }
-
-    return {
-      v$,
-      diskStore,
-      modalStore,
-      selected_driver,
-      selected_disk,
-      isLoading,
-      set_as_default,
-      is_current_disk,
-      submitData,
-      onChangeDriver,
-      isDisabled,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/disks/S3CompatDisk.vue b/resources/scripts/admin/components/modal-components/disks/S3CompatDisk.vue
deleted file mode 100644
index b2a2970b..00000000
--- a/resources/scripts/admin/components/modal-components/disks/S3CompatDisk.vue
+++ /dev/null
@@ -1,325 +0,0 @@
-<template>
-  <form @submit.prevent="submitData">
-    <div class="px-8 py-6">
-      <BaseInputGrid>
-        <BaseInputGroup
-          :label="$t('settings.disk.name')"
-          :error="
-            v$.s3CompatDiskConfigData.name.$error &&
-            v$.s3CompatDiskConfigData.name.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model="diskStore.s3CompatDiskConfigData.name"
-            type="text"
-            name="name"
-            :invalid="v$.s3CompatDiskConfigData.name.$error"
-            @input="v$.s3CompatDiskConfigData.name.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.driver')"
-          :error="
-            v$.s3CompatDiskConfigData.selected_driver.$error &&
-            v$.s3CompatDiskConfigData.selected_driver.$errors[0].$message
-          "
-          required
-        >
-          <BaseMultiselect
-            v-model="selected_driver"
-            :invalid="v$.s3CompatDiskConfigData.selected_driver.$error"
-            value-prop="value"
-            :options="disks"
-            searchable
-            label="name"
-            :can-deselect="false"
-            @update:modelValue="onChangeDriver(data)"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.s3_endpoint')"
-          :error="
-            v$.s3CompatDiskConfigData.root.$error &&
-            v$.s3CompatDiskConfigData.root.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.s3CompatDiskConfigData.endpoint"
-            type="url"
-            name="endpoint"
-            placeholder="http://127.0.0.1:9005"
-            :invalid="v$.s3CompatDiskConfigData.endpoint.$error"
-            @input="v$.s3CompatDiskConfigData.endpoint.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.s3_root')"
-          :error="
-            v$.s3CompatDiskConfigData.root.$error &&
-            v$.s3CompatDiskConfigData.root.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.s3CompatDiskConfigData.root"
-            type="text"
-            name="root"
-            placeholder="Ex. /user/root/"
-            :invalid="v$.s3CompatDiskConfigData.root.$error"
-            @input="v$.s3CompatDiskConfigData.root.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.s3_key')"
-          :error="
-            v$.s3CompatDiskConfigData.key.$error &&
-            v$.s3CompatDiskConfigData.key.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.s3CompatDiskConfigData.key"
-            type="text"
-            name="key"
-            placeholder="Ex. KEIS4S39SERSDS"
-            :invalid="v$.s3CompatDiskConfigData.key.$error"
-            @input="v$.s3CompatDiskConfigData.key.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.s3_secret')"
-          :error="
-            v$.s3CompatDiskConfigData.secret.$error &&
-            v$.s3CompatDiskConfigData.secret.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.s3CompatDiskConfigData.secret"
-            type="text"
-            name="secret"
-            placeholder="Ex. ********"
-            :invalid="v$.s3CompatDiskConfigData.secret.$error"
-            @input="v$.s3CompatDiskConfigData.secret.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.s3_region')"
-          :error="
-            v$.s3CompatDiskConfigData.region.$error &&
-            v$.s3CompatDiskConfigData.region.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.s3CompatDiskConfigData.region"
-            type="text"
-            name="region"
-            placeholder="Ex. us-west"
-            :invalid="v$.s3CompatDiskConfigData.region.$error"
-            @input="v$.s3CompatDiskConfigData.region.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.s3_bucket')"
-          :error="
-            v$.s3CompatDiskConfigData.bucket.$error &&
-            v$.s3CompatDiskConfigData.bucket.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.s3CompatDiskConfigData.bucket"
-            type="text"
-            name="bucket"
-            placeholder="Ex. AppName"
-            :invalid="v$.s3CompatDiskConfigData.bucket.$error"
-            @input="v$.s3CompatDiskConfigData.bucket.$touch()"
-          />
-        </BaseInputGroup>
-      </BaseInputGrid>
-      <div v-if="!isDisabled" class="flex items-center mt-6">
-        <div class="relative flex items-center w-12">
-          <BaseSwitch v-model="set_as_default" class="flex" />
-        </div>
-        <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-heading box-title">
-            {{ $t('settings.disk.is_default') }}
-          </p>
-        </div>
-      </div>
-    </div>
-    <slot :disk-data="{ isLoading, submitData }" />
-  </form>
-</template>
-
-<script>
-import { useDiskStore } from '@/scripts/admin/stores/disk'
-import { useModalStore } from '@/scripts/stores/modal'
-import { computed, onBeforeUnmount, reactive, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import useVuelidate from '@vuelidate/core'
-import { required, helpers } from '@vuelidate/validators'
-export default {
-  props: {
-    isEdit: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    disks: {
-      type: Array,
-      require: true,
-      default: Array,
-    },
-  },
-
-  emits: ['submit', 'onChangeDisk'],
-
-  setup(props, { emit }) {
-    const diskStore = useDiskStore()
-    const modalStore = useModalStore()
-    const { t } = useI18n()
-
-    let set_as_default = ref(false)
-    let isLoading = ref(false)
-    let selected_disk = ref(null)
-    let is_current_disk = ref(null)
-
-    const selected_driver = computed({
-      get: () => diskStore.selected_driver,
-      set: (value) => {
-        diskStore.selected_driver = value
-        diskStore.s3CompatDiskConfigData.selected_driver = value
-      },
-    })
-
-    const rules = computed(() => {
-      return {
-        s3CompatDiskConfigData: {
-          name: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          endpoint: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          root: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          key: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          secret: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          region: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          bucket: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          selected_driver: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-        },
-      }
-    })
-
-    const v$ = useVuelidate(
-      rules,
-      computed(() => diskStore),
-    )
-
-    onBeforeUnmount(() => {
-      diskStore.s3CompatDiskConfigData = {
-        name: null,
-        selected_driver: 's3compat',
-        key: null,
-        secret: null,
-        region: null,
-        bucket: null,
-        root: null,
-      }
-    })
-
-    loadData()
-
-    async function loadData() {
-      isLoading.value = true
-      let data = reactive({
-        disk: 's3compat',
-      })
-
-      if (props.isEdit) {
-        Object.assign(diskStore.s3CompatDiskConfigData, modalStore.data)
-        set_as_default.value = modalStore.data.set_as_default
-
-        if (set_as_default.value) {
-          is_current_disk.value = true
-        }
-      } else {
-        let diskData = await diskStore.fetchDiskEnv(data)
-        Object.assign(diskStore.s3CompatDiskConfigData, diskData.data)
-      }
-      selected_disk.value = props.disks.find((v) => v.value == 's3compat')
-      isLoading.value = false
-    }
-
-    const isDisabled = computed(() => {
-      return props.isEdit && set_as_default.value && is_current_disk.value
-        ? true
-        : false
-    })
-
-    async function submitData() {
-      v$.value.s3CompatDiskConfigData.$touch()
-      if (v$.value.s3CompatDiskConfigData.$invalid) {
-        return true
-      }
-
-      let data = {
-        credentials: diskStore.s3CompatDiskConfigData,
-        name: diskStore.s3CompatDiskConfigData.name,
-        driver: selected_disk.value.value,
-        set_as_default: set_as_default.value,
-      }
-
-      emit('submit', data)
-      return false
-    }
-
-    function onChangeDriver() {
-      emit('onChangeDisk', diskStore.s3CompatDiskConfigData.selected_driver)
-    }
-
-    return {
-      v$,
-      diskStore,
-      modalStore,
-      set_as_default,
-      isLoading,
-      selected_disk,
-      selected_driver,
-      is_current_disk,
-      loadData,
-      submitData,
-      onChangeDriver,
-      isDisabled,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/admin/components/modal-components/disks/S3Disk.vue b/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
deleted file mode 100644
index 3b0c0241..00000000
--- a/resources/scripts/admin/components/modal-components/disks/S3Disk.vue
+++ /dev/null
@@ -1,304 +0,0 @@
-<template>
-  <form @submit.prevent="submitData">
-    <div class="px-8 py-6">
-      <BaseInputGrid>
-        <BaseInputGroup
-          :label="$t('settings.disk.name')"
-          :error="
-            v$.s3DiskConfigData.name.$error &&
-            v$.s3DiskConfigData.name.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model="diskStore.s3DiskConfigData.name"
-            type="text"
-            name="name"
-            :invalid="v$.s3DiskConfigData.name.$error"
-            @input="v$.s3DiskConfigData.name.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.driver')"
-          :error="
-            v$.s3DiskConfigData.selected_driver.$error &&
-            v$.s3DiskConfigData.selected_driver.$errors[0].$message
-          "
-          required
-        >
-          <BaseMultiselect
-            v-model="selected_driver"
-            :invalid="v$.s3DiskConfigData.selected_driver.$error"
-            value-prop="value"
-            :options="disks"
-            searchable
-            label="name"
-            :can-deselect="false"
-            @update:modelValue="onChangeDriver(data)"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.aws_root')"
-          :error="
-            v$.s3DiskConfigData.root.$error &&
-            v$.s3DiskConfigData.root.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.s3DiskConfigData.root"
-            type="text"
-            name="name"
-            placeholder="Ex. /user/root/"
-            :invalid="v$.s3DiskConfigData.root.$error"
-            @input="v$.s3DiskConfigData.root.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.aws_key')"
-          :error="
-            v$.s3DiskConfigData.key.$error &&
-            v$.s3DiskConfigData.key.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.s3DiskConfigData.key"
-            type="text"
-            name="name"
-            placeholder="Ex. KEIS4S39SERSDS"
-            :invalid="v$.s3DiskConfigData.key.$error"
-            @input="v$.s3DiskConfigData.key.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.aws_secret')"
-          :error="
-            v$.s3DiskConfigData.secret.$error &&
-            v$.s3DiskConfigData.secret.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.s3DiskConfigData.secret"
-            type="text"
-            name="name"
-            placeholder="Ex. ********"
-            :invalid="v$.s3DiskConfigData.secret.$error"
-            @input="v$.s3DiskConfigData.secret.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.aws_region')"
-          :error="
-            v$.s3DiskConfigData.region.$error &&
-            v$.s3DiskConfigData.region.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.s3DiskConfigData.region"
-            type="text"
-            name="name"
-            placeholder="Ex. us-west"
-            :invalid="v$.s3DiskConfigData.region.$error"
-            @input="v$.s3DiskConfigData.region.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.disk.aws_bucket')"
-          :error="
-            v$.s3DiskConfigData.bucket.$error &&
-            v$.s3DiskConfigData.bucket.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="diskStore.s3DiskConfigData.bucket"
-            type="text"
-            name="name"
-            placeholder="Ex. AppName"
-            :invalid="v$.s3DiskConfigData.bucket.$error"
-            @input="v$.s3DiskConfigData.bucket.$touch()"
-          />
-        </BaseInputGroup>
-      </BaseInputGrid>
-      <div v-if="!isDisabled" class="flex items-center mt-6">
-        <div class="relative flex items-center w-12">
-          <BaseSwitch v-model="set_as_default" class="flex" />
-        </div>
-        <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-heading box-title">
-            {{ $t('settings.disk.is_default') }}
-          </p>
-        </div>
-      </div>
-    </div>
-    <slot :disk-data="{ isLoading, submitData }" />
-  </form>
-</template>
-
-<script>
-import { useDiskStore } from '@/scripts/admin/stores/disk'
-import { useModalStore } from '@/scripts/stores/modal'
-import { computed, onBeforeUnmount, reactive, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import useVuelidate from '@vuelidate/core'
-import { required, helpers } from '@vuelidate/validators'
-export default {
-  props: {
-    isEdit: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    loading: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    disks: {
-      type: Array,
-      require: true,
-      default: Array,
-    },
-  },
-
-  emits: ['submit', 'onChangeDisk'],
-
-  setup(props, { emit }) {
-    const diskStore = useDiskStore()
-    const modalStore = useModalStore()
-    const { t } = useI18n()
-
-    let set_as_default = ref(false)
-    let isLoading = ref(false)
-    let selected_disk = ref(null)
-    let is_current_disk = ref(null)
-
-    const selected_driver = computed({
-      get: () => diskStore.selected_driver,
-      set: (value) => {
-        diskStore.selected_driver = value
-        diskStore.s3DiskConfigData.selected_driver = value
-      },
-    })
-
-    const rules = computed(() => {
-      return {
-        s3DiskConfigData: {
-          name: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          root: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          key: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          secret: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          region: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          bucket: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-          selected_driver: {
-            required: helpers.withMessage(t('validation.required'), required),
-          },
-        },
-      }
-    })
-
-    const v$ = useVuelidate(
-      rules,
-      computed(() => diskStore)
-    )
-
-    onBeforeUnmount(() => {
-      diskStore.s3DiskConfigData = {
-        name: null,
-        selected_driver: 's3',
-        key: null,
-        secret: null,
-        region: null,
-        bucket: null,
-        root: null,
-      }
-    })
-
-    loadData()
-
-    async function loadData() {
-      isLoading.value = true
-      let data = reactive({
-        disk: 's3',
-      })
-
-      if (props.isEdit) {
-        Object.assign(diskStore.s3DiskConfigData, modalStore.data)
-        set_as_default.value = modalStore.data.set_as_default
-
-        if (set_as_default.value) {
-          is_current_disk.value = true
-        }
-      } else {
-        let diskData = await diskStore.fetchDiskEnv(data)
-        Object.assign(diskStore.s3DiskConfigData, diskData.data)
-      }
-      selected_disk.value = props.disks.find((v) => v.value == 's3')
-      isLoading.value = false
-    }
-
-    const isDisabled = computed(() => {
-      return props.isEdit && set_as_default.value && is_current_disk.value
-        ? true
-        : false
-    })
-
-    async function submitData() {
-      v$.value.s3DiskConfigData.$touch()
-      if (v$.value.s3DiskConfigData.$invalid) {
-        return true
-      }
-
-      let data = {
-        credentials: diskStore.s3DiskConfigData,
-        name: diskStore.s3DiskConfigData.name,
-        driver: selected_disk.value.value,
-        set_as_default: set_as_default.value,
-      }
-
-      emit('submit', data)
-      return false
-    }
-
-    function onChangeDriver() {
-      emit('onChangeDisk', diskStore.s3DiskConfigData.selected_driver)
-    }
-
-    return {
-      v$,
-      diskStore,
-      modalStore,
-      set_as_default,
-      isLoading,
-      selected_disk,
-      selected_driver,
-      is_current_disk,
-      loadData,
-      submitData,
-      onChangeDriver,
-      isDisabled,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/admin/layouts/LayoutBasic.vue b/resources/scripts/admin/layouts/LayoutBasic.vue
deleted file mode 100644
index a92dbae1..00000000
--- a/resources/scripts/admin/layouts/LayoutBasic.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <div v-if="isAppLoaded" class="h-full">
-    <NotificationRoot />
-
-    <ImpersonationBanner />
-
-    <SiteHeader />
-
-    <SiteSidebar v-if="hasCompany" />
-
-    <ExchangeRateBulkUpdateModal />
-
-    <main
-      :class="[
-        'h-screen h-screen-ios overflow-y-auto min-h-0 transition-all duration-300',
-        hasCompany ? (globalStore.isSidebarCollapsed ? 'md:pl-16' : 'md:pl-56 xl:pl-64') : '',
-      ]"
-    >
-      <div class="pt-16 pb-16">
-        <router-view />
-      </div>
-    </main>
-  </div>
-
-  <BaseGlobalLoader v-else />
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { onMounted, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useExchangeRateStore } from '@/scripts/admin/stores/exchange-rate'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-import SiteHeader from '@/scripts/admin/layouts/partials/TheSiteHeader.vue'
-import SiteSidebar from '@/scripts/admin/layouts/partials/TheSiteSidebar.vue'
-import NotificationRoot from '@/scripts/components/notifications/NotificationRoot.vue'
-import ExchangeRateBulkUpdateModal from '@/scripts/admin/components/modal-components/ExchangeRateBulkUpdateModal.vue'
-import ImpersonationBanner from '@/scripts/admin/components/ImpersonationBanner.vue'
-
-const globalStore = useGlobalStore()
-const route = useRoute()
-const userStore = useUserStore()
-const router = useRouter()
-const modalStore = useModalStore()
-const { t } = useI18n()
-const exchangeRateStore = useExchangeRateStore()
-const companyStore = useCompanyStore()
-
-const isAppLoaded = computed(() => {
-  return globalStore.isAppLoaded
-})
-
-const hasCompany = computed(() => {
-  return !!companyStore.selectedCompany || companyStore.isAdminMode
-})
-
-onMounted(() => {
-  globalStore.bootstrap().then((res) => {
-    if (companyStore.isAdminMode) {
-      return
-    }
-
-    if (!res.data.current_company) {
-      if (route.name !== 'no.company') {
-        router.push({ name: 'no.company' })
-      }
-      return
-    }
-
-    if (route.meta.ability && !userStore.hasAbilities(route.meta.ability)) {
-      router.push({ name: 'account.settings' })
-    } else if (route.meta.isSuperAdmin && !userStore.currentUser.is_super_admin) {
-      router.push({ name: 'dashboard' })
-    } else if (route.meta.isOwner && !userStore.currentUser.is_owner) {
-      router.push({ name: 'account.settings' })
-    }
-
-    if (
-      res.data.current_company_settings.bulk_exchange_rate_configured === 'NO'
-    ) {
-      exchangeRateStore.fetchBulkCurrencies().then((res) => {
-        if (res.data.currencies.length) {
-          modalStore.openModal({
-            componentName: 'ExchangeRateBulkUpdateModal',
-            size: 'sm',
-          })
-        } else {
-          let data = {
-            settings: {
-              bulk_exchange_rate_configured: 'YES',
-            },
-          }
-          companyStore.updateCompanySettings({
-            data,
-          })
-        }
-      })
-    }
-  })
-})
-</script>
diff --git a/resources/scripts/admin/layouts/LayoutInstallation.vue b/resources/scripts/admin/layouts/LayoutInstallation.vue
deleted file mode 100644
index 951367be..00000000
--- a/resources/scripts/admin/layouts/LayoutInstallation.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <div class="h-screen overflow-y-auto text-base">
-    <NotificationRoot />
-
-    <div class="container mx-auto px-4">
-      <router-view />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import NotificationRoot from '@/scripts/components/notifications/NotificationRoot.vue'
-</script>
diff --git a/resources/scripts/admin/layouts/LayoutLogin.vue b/resources/scripts/admin/layouts/LayoutLogin.vue
deleted file mode 100644
index 850dd3c3..00000000
--- a/resources/scripts/admin/layouts/LayoutLogin.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
-  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-surface-tertiary">
-    <NotificationRoot />
-
-    <div
-      class="
-        flex
-        items-center
-        justify-center
-        w-full
-        max-w-sm
-        col-span-12
-        p-4
-        mx-auto
-        text-heading
-        md:p-8 md:col-span-6
-        lg:col-span-4
-        flex-2
-        md:pb-48 md:pt-40
-      "
-    >
-      <div class="w-full">
-        <MainLogo
-          v-if="!loginPageLogo"
-          class="block w-48 h-auto max-w-full mb-32 text-primary-500"
-        />
-
-        <img
-          v-else
-          :src="loginPageLogo"
-          class="block w-48 h-auto max-w-full mb-32 text-primary-500"
-        />
-
-        <router-view />
-
-        <div
-          class="
-            pt-24
-            mt-0
-            text-sm
-            not-italic
-            font-medium
-            leading-relaxed
-            text-left text-subtle
-            md:pt-40
-          "
-        >
-          <p v-if="copyrightText" class="mb-3">
-            {{ copyrightText }}
-          </p>
-          <p v-else class="mb-3">
-            Powered by
-            <a
-              href="https://invoiceshelf.com/"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-primary-500 hover:underline"
-            >InvoiceShelf</a>
-          </p>
-        </div>
-      </div>
-    </div>
-    <div
-      class="
-        relative
-        flex-col
-        items-center
-        justify-center
-        hidden
-        w-full
-        h-full
-        pl-10
-        bg-no-repeat bg-cover
-        md:col-span-6
-        lg:col-span-8
-        md:flex
-        content-box
-        overflow-hidden
-      "
-    >
-      <LoginBackground class="absolute h-full w-full" />
-
-      <LoginPlanetCrater
-        class="absolute z-10 top-0 right-0 h-[300px] w-[420px]"
-      />
-
-      <LoginBackgroundOverlay class="absolute h-full w-full right-[7.5%]" />
-
-      <div class="md:pl-10 xl:pl-0 relative z-50 w-7/12 xl:w-5/12 xl:w-5/12">
-        <h1
-          class="
-            hidden
-            mb-3
-            text-3xl
-            leading-normal
-            text-left text-white
-            xl:text-5xl xl:leading-tight
-            md:none
-            lg:block
-          "
-        >
-          {{ pageHeading }}
-        </h1>
-        <p
-          class="
-            hidden
-            text-sm
-            not-italic
-            font-normal
-            leading-normal
-            text-left text-gray-100
-            xl:text-base xl:leading-6
-            md:none
-            lg:block
-          "
-        >
-          {{ pageDescription }}
-        </p>
-      </div>
-
-      <LoginBottomVector
-        class="
-          absolute
-          z-50
-          w-full
-          bg-no-repeat
-          content-bottom
-          h-[15vw]
-          lg:h-[22vw]
-          right-[32%]
-          bottom-0
-        "
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import NotificationRoot from '@/scripts/components/notifications/NotificationRoot.vue'
-import MainLogo from '@/scripts/components/icons/MainLogo.vue'
-import LoginBackground from '@/scripts/components/svg/LoginBackground.vue'
-import LoginPlanetCrater from '@/scripts/components/svg/LoginPlanetCrater.vue'
-import LoginBottomVector from '@/scripts/components/svg/LoginBottomVector.vue'
-import LoginBackgroundOverlay from '@/scripts/components/svg/LoginBackgroundOverlay.vue'
-import { computed, ref } from 'vue'
-
-const pageHeading = computed(() => {
-  if (window.login_page_heading) {
-    return window.login_page_heading
-  }
-
-  return 'Simple Invoicing for Individuals Small Businesses'
-})
-
-const pageDescription = computed(() => {
-  if (window.login_page_description) {
-    return window.login_page_description
-  }
-
-  return 'InvoiceShelf helps you track expenses, record payments & generate beautiful invoices & estimates.'
-})
-
-const copyrightText = computed(() => {
-  return window.copyright_text || null
-})
-
-const loginPageLogo = computed(() => {
-  if (window.login_page_logo) {
-    return window.login_page_logo
-  }
-
-  return false
-})
-</script>
-
-<style scoped>
-</style>
diff --git a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue b/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
deleted file mode 100644
index 67f6158c..00000000
--- a/resources/scripts/admin/layouts/partials/TheSiteHeader.vue
+++ /dev/null
@@ -1,282 +0,0 @@
-<template>
-  <header
-    class="
-      fixed
-      top-0
-      left-0
-      z-20
-      flex
-      items-center
-      justify-between
-      w-full
-      px-4
-      py-3
-      md:h-16 md:px-8
-      bg-linear-to-r
-      from-header-from
-      to-header-to
-    "
-  >
-    <div class="flex items-center">
-      <router-link
-        :to="companyStore.isAdminMode ? '/admin/administration/dashboard' : '/admin/dashboard'"
-        class="
-          text-lg
-          not-italic
-          font-black
-          tracking-wider
-          text-white
-          brand-main
-          font-base
-          hidden
-          md:block
-        "
-      >
-        <img v-if="adminLogo" :src="adminLogo" class="h-6" />
-        <MainLogo v-else class="h-6" light-color="white" dark-color="white" />
-      </router-link>
-
-    </div>
-
-    <!-- Mobile toggle button-->
-    <div
-      :class="{ 'is-active': globalStore.isSidebarOpen }"
-      class="
-        flex
-        float-left
-        p-1
-        overflow-visible
-        text-sm
-        ease-linear
-        bg-surface
-        border-0
-        rounded
-        cursor-pointer
-        md:hidden md:ml-0
-        hover:bg-hover-strong
-      "
-      @click.prevent="onToggle"
-    >
-      <BaseIcon name="Bars3Icon" class="!w-6 !h-6 text-muted" />
-    </div>
-
-    <ul class="flex float-right h-8 m-0 list-none md:h-9">
-      <li
-        v-if="hasCreateAbilities() && !companyStore.isAdminMode"
-        class="relative hidden float-left m-0 md:block"
-      >
-        <BaseDropdown width-class="w-48">
-          <template #activator>
-            <div
-              class="
-                flex
-                items-center
-                justify-center
-                w-8
-                h-8
-                ml-2
-                text-sm text-white
-                bg-white/20
-                rounded-lg
-                hover:bg-white/30
-                md:h-9 md:w-9
-              "
-            >
-              <BaseIcon name="PlusIcon" class="w-5 h-5 text-white" />
-            </div>
-          </template>
-
-          <router-link to="/admin/invoices/create">
-            <BaseDropdownItem
-              v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
-            >
-              <BaseIcon
-                name="DocumentTextIcon"
-                class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-                aria-hidden="true"
-              />
-              {{ $t('invoices.new_invoice') }}
-            </BaseDropdownItem>
-          </router-link>
-          <router-link to="/admin/estimates/create">
-            <BaseDropdownItem
-              v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
-            >
-              <BaseIcon
-                name="DocumentIcon"
-                class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-                aria-hidden="true"
-              />
-              {{ $t('estimates.new_estimate') }}
-            </BaseDropdownItem>
-          </router-link>
-
-          <router-link to="/admin/customers/create">
-            <BaseDropdownItem
-              v-if="userStore.hasAbilities(abilities.CREATE_CUSTOMER)"
-            >
-              <BaseIcon
-                name="UserIcon"
-                class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-                aria-hidden="true"
-              />
-              {{ $t('customers.new_customer') }}
-            </BaseDropdownItem>
-          </router-link>
-        </BaseDropdown>
-      </li>
-
-      <li v-if="!companyStore.isAdminMode" class="ml-2">
-        <GlobalSearchBar
-          v-if="
-            userStore.currentUser.is_owner ||
-            userStore.hasAbilities(abilities.VIEW_CUSTOMER)
-          "
-        />
-      </li>
-
-      <li>
-        <CompanySwitcher />
-      </li>
-
-      <!-- User Dropdown-->
-      <li class="relative block float-left ml-2">
-        <BaseDropdown width-class="w-48">
-          <template #activator>
-            <img
-              :src="previewAvatar"
-              class="block w-8 h-8 rounded-full ring-2 ring-white/30 md:h-9 md:w-9 object-cover"
-            />
-          </template>
-
-          <!-- Theme Toggle -->
-          <div class="px-3 py-2">
-            <div class="flex items-center justify-between rounded-lg bg-surface-secondary p-1">
-              <button
-                v-for="opt in themeOptions"
-                :key="opt.value"
-                :class="[
-                  'flex items-center justify-center rounded-md px-2.5 py-1.5 text-xs font-medium transition-colors',
-                  currentTheme === opt.value
-                    ? 'bg-surface text-heading shadow-sm'
-                    : 'text-muted hover:text-body',
-                ]"
-                @click.stop="setTheme(opt.value)"
-              >
-                <BaseIcon :name="opt.icon" class="w-3.5 h-3.5" />
-              </button>
-            </div>
-          </div>
-
-          <router-link to="/admin/user-settings">
-            <BaseDropdownItem>
-              <BaseIcon
-                name="CogIcon"
-                class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-                aria-hidden="true"
-              />
-              {{ $t('navigation.settings') }}
-            </BaseDropdownItem>
-          </router-link>
-
-          <BaseDropdownItem @click="logout">
-            <BaseIcon
-              name="ArrowRightOnRectangleIcon"
-              class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-              aria-hidden="true"
-            />
-            {{ $t('navigation.logout') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </li>
-    </ul>
-  </header>
-</template>
-
-<script setup>
-import { useAuthStore } from '@/scripts/admin/stores/auth'
-import { useRouter } from 'vue-router'
-import { computed, ref, onMounted } 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'
-
-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(() => {
-  return userStore.currentUser && userStore.currentUser.avatar !== 0
-    ? userStore.currentUser.avatar
-    : getDefaultAvatar()
-})
-
-const adminLogo = computed(() => {
-  if (globalStore.globalSettings.admin_portal_logo) {
-    return '/storage/' + globalStore.globalSettings.admin_portal_logo
-  }
-
-  return false
-})
-
-function getDefaultAvatar() {
-  const imgUrl = new URL('$images/default-avatar.jpg', import.meta.url)
-  return imgUrl
-}
-
-function hasCreateAbilities() {
-  return userStore.hasAbilities([
-    abilities.CREATE_INVOICE,
-    abilities.CREATE_ESTIMATE,
-    abilities.CREATE_CUSTOMER,
-  ])
-}
-
-async function logout() {
-  await authStore.logout()
-  router.push('/login')
-}
-
-function onToggle() {
-  globalStore.setSidebarVisibility(true)
-}
-
-const themeOptions = [
-  { value: 'light', icon: 'SunIcon' },
-  { value: 'dark', icon: 'MoonIcon' },
-  { value: 'system', icon: 'ComputerDesktopIcon' },
-]
-
-const currentTheme = ref(localStorage.getItem('theme') || 'system')
-
-function applyTheme(theme) {
-  if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-    document.documentElement.setAttribute('data-theme', 'dark')
-  } else {
-    document.documentElement.removeAttribute('data-theme')
-  }
-}
-
-function setTheme(theme) {
-  currentTheme.value = theme
-  localStorage.setItem('theme', theme)
-  applyTheme(theme)
-}
-
-onMounted(() => {
-  applyTheme(currentTheme.value)
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-    if (currentTheme.value === 'system') {
-      applyTheme('system')
-    }
-  })
-})
-</script>
diff --git a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
deleted file mode 100644
index 9838b99b..00000000
--- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
+++ /dev/null
@@ -1,223 +0,0 @@
-<template>
-  <!-- MOBILE MENU -->
-  <TransitionRoot as="template" :show="globalStore.isSidebarOpen">
-    <Dialog
-      as="div"
-      class="fixed inset-0 z-40 flex md:hidden"
-      @close="globalStore.setSidebarVisibility(false)"
-    >
-      <TransitionChild
-        as="template"
-        enter="transition-opacity ease-linear duration-300"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="transition-opacity ease-linear duration-300"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-      >
-        <DialogOverlay class="fixed inset-0 bg-gray-600/75" />
-      </TransitionChild>
-
-      <TransitionChild
-        as="template"
-        enter="transition ease-in-out duration-300"
-        enter-from="-translate-x-full"
-        enter-to="translate-x-0"
-        leave="transition ease-in-out duration-300"
-        leave-from="translate-x-0"
-        leave-to="-translate-x-full"
-      >
-        <div class="relative flex flex-col flex-1 w-full max-w-xs bg-surface">
-          <TransitionChild
-            as="template"
-            enter="ease-in-out duration-300"
-            enter-from="opacity-0"
-            enter-to="opacity-100"
-            leave="ease-in-out duration-300"
-            leave-from="opacity-100"
-            leave-to="opacity-0"
-          >
-            <div class="absolute top-0 right-0 pt-2 -mr-12">
-              <button
-                class="
-                  flex
-                  items-center
-                  justify-center
-                  w-10
-                  h-10
-                  ml-1
-                  rounded-full
-                  focus:outline-hidden
-                  focus:ring-2
-                  focus:ring-inset
-                  focus:ring-white
-                "
-                @click="globalStore.setSidebarVisibility(false)"
-              >
-                <span class="sr-only">Close sidebar</span>
-                <BaseIcon
-                  name="XMarkIcon"
-                  class="w-6 h-6 text-white"
-                  aria-hidden="true"
-                />
-              </button>
-            </div>
-          </TransitionChild>
-          <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
-            <div class="flex items-center shrink-0 px-4 mb-10">
-              <MainLogo
-                class="block h-auto max-w-full w-36 text-primary-400"
-                alt="InvoiceShelf Logo"
-              />
-            </div>
-
-            <nav
-              v-for="(menu, index) in globalStore.menuGroups"
-              :key="index"
-              class="mt-5 space-y-1"
-            >
-              <div
-                v-if="menu[0] && menu[0].group_label"
-                class="px-4 mt-6 mb-2 text-xs font-semibold text-subtle uppercase tracking-wider"
-              >
-                {{ $t(menu[0].group_label) }}
-              </div>
-              <router-link
-                v-for="item in menu"
-                :key="item.name"
-                :to="item.link"
-                :class="[
-                  hasActiveUrl(item.link)
-                    ? 'text-primary-600 bg-primary-50 font-semibold'
-                    : 'text-body hover:bg-hover',
-                  'cursor-pointer mx-3 px-3 py-2.5 flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
-                ]"
-                @click="globalStore.setSidebarVisibility(false)"
-              >
-                <BaseIcon
-                  :name="item.icon"
-                  :class="[
-                    hasActiveUrl(item.link)
-                      ? 'text-primary-500'
-                      : 'text-subtle',
-                    'mr-3 shrink-0 h-5 w-5',
-                  ]"
-                  @click="globalStore.setSidebarVisibility(false)"
-                />
-                {{ $t(item.title) }}
-              </router-link>
-            </nav>
-          </div>
-        </div>
-      </TransitionChild>
-      <div class="shrink-0 w-14">
-        <!-- Force sidebar to shrink to fit close icon -->
-      </div>
-    </Dialog>
-  </TransitionRoot>
-
-  <!-- DESKTOP MENU -->
-  <div
-    :class="[
-      globalStore.isSidebarCollapsed ? 'w-16' : 'w-56 xl:w-64',
-    ]"
-    class="
-      hidden
-      h-screen
-      pb-0
-      overflow-y-auto overflow-x-hidden
-      bg-surface/80 backdrop-blur-xl
-      border-r border-white/10
-      md:fixed md:flex md:flex-col md:inset-y-0
-      pt-16
-      transition-all duration-300
-    "
-  >
-    <div
-      v-for="(menu, index) in globalStore.menuGroups"
-      :key="index"
-      class="p-0 m-0 mt-4 list-none"
-    >
-      <div
-        v-if="menu[0] && menu[0].group_label && !globalStore.isSidebarCollapsed"
-        class="px-6 mt-6 mb-2 text-xs font-semibold text-subtle uppercase tracking-wider whitespace-nowrap"
-      >
-        {{ $t(menu[0].group_label) }}
-      </div>
-      <div
-        v-else-if="menu[0] && menu[0].group_label && globalStore.isSidebarCollapsed"
-        class="mx-3 my-2 border-t border-line-light"
-      />
-      <router-link
-        v-for="item in menu"
-        :key="item"
-        :to="item.link"
-        v-tooltip="globalStore.isSidebarCollapsed ? { content: $t(item.title), placement: 'right' } : null"
-        :class="[
-          hasActiveUrl(item.link)
-            ? 'text-primary-600 bg-primary-50 font-semibold'
-            : 'text-body hover:bg-hover',
-          globalStore.isSidebarCollapsed
-            ? 'cursor-pointer mx-2 px-0 py-2.5 group flex items-center justify-center rounded-lg text-sm font-medium transition-colors'
-            : 'cursor-pointer mx-3 px-3 py-2.5 group flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
-        ]"
-      >
-        <BaseIcon
-          :name="item.icon"
-          :class="[
-            hasActiveUrl(item.link)
-              ? 'text-primary-500'
-              : 'text-subtle group-hover:text-body',
-            globalStore.isSidebarCollapsed
-              ? 'shrink-0 h-6 w-6'
-              : 'mr-3 shrink-0 h-5 w-5',
-          ]"
-        />
-
-        <span v-if="!globalStore.isSidebarCollapsed" class="whitespace-nowrap">
-          {{ $t(item.title) }}
-        </span>
-      </router-link>
-    </div>
-
-    <!-- Bottom toolbar -->
-    <div class="mt-auto sticky bottom-0 border-t border-white/10 bg-surface/80 backdrop-blur-xl p-2 flex flex-col items-center gap-1">
-      <button
-        v-tooltip="globalStore.isSidebarCollapsed ? { content: $t('general.collapse'), placement: 'right' } : null"
-        :class="[
-          globalStore.isSidebarCollapsed
-            ? 'w-10 h-10 justify-center'
-            : 'w-full px-3 h-10 justify-end',
-        ]"
-        class="flex items-center rounded-lg text-subtle hover:text-body hover:bg-hover transition-colors"
-        @click="globalStore.toggleSidebarCollapse()"
-      >
-        <BaseIcon
-          :name="globalStore.isSidebarCollapsed ? 'ChevronDoubleRightIcon' : 'ChevronDoubleLeftIcon'"
-          class="w-4 h-4 shrink-0"
-        />
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import MainLogo from '@/scripts/components/icons/MainLogo.vue'
-
-import {
-  Dialog,
-  DialogOverlay,
-  TransitionChild,
-  TransitionRoot,
-} from '@headlessui/vue'
-
-import { useRoute } from 'vue-router'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-
-const route = useRoute()
-const globalStore = useGlobalStore()
-
-function hasActiveUrl(url) {
-  return route.path.indexOf(url) > -1
-}
-</script>
diff --git a/resources/scripts/admin/stores/administration.js b/resources/scripts/admin/stores/administration.js
deleted file mode 100644
index 9a7dbe5a..00000000
--- a/resources/scripts/admin/stores/administration.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import http from '@/scripts/http'
-import Ls from '@/scripts/services/ls.js'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useAdministrationStore = defineStore('administration', {
-  state: () => ({
-    companies: [],
-    totalCompanies: 0,
-    selectedCompany: null,
-
-    users: [],
-    totalUsers: 0,
-  }),
-
-  actions: {
-    fetchCompanies(params) {
-      return new Promise((resolve, reject) => {
-        http
-          .get('/api/v1/super-admin/companies', { params })
-          .then((response) => {
-            this.companies = response.data.data
-            this.totalCompanies = response.data.meta
-              ? response.data.meta.total
-              : response.data.data.length
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    fetchCompany(id) {
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/super-admin/companies/${id}`)
-          .then((response) => {
-            this.selectedCompany = response.data.data
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    fetchUsers(params) {
-      return new Promise((resolve, reject) => {
-        http
-          .get('/api/v1/super-admin/users', { params })
-          .then((response) => {
-            this.users = response.data.data
-            this.totalUsers = response.data.meta
-              ? response.data.meta.total
-              : response.data.data.length
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    fetchUser(id) {
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/super-admin/users/${id}`)
-          .then((response) => {
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    updateUser(id, data) {
-      return new Promise((resolve, reject) => {
-        http
-          .put(`/api/v1/super-admin/users/${id}`, data)
-          .then((response) => {
-            const { global } = window.i18n
-            const notificationStore = useNotificationStore()
-            notificationStore.showNotification({
-              type: 'success',
-              message: global.t('administration.users.updated_message'),
-            })
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    impersonateUser(id) {
-      return new Promise((resolve, reject) => {
-        http
-          .post(`/api/v1/super-admin/users/${id}/impersonate`)
-          .then((response) => {
-            Ls.set('admin.impersonating', 'true')
-            Ls.set('auth.token', `Bearer ${response.data.token}`)
-
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    stopImpersonating() {
-      return new Promise((resolve, reject) => {
-        http
-          .post('/api/v1/super-admin/stop-impersonating')
-          .then((response) => {
-            Ls.remove('admin.impersonating')
-            Ls.remove('auth.token')
-
-            resolve(response)
-          })
-          .catch((err) => {
-            Ls.remove('admin.impersonating')
-            Ls.remove('auth.token')
-
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    updateCompany(id, data) {
-      return new Promise((resolve, reject) => {
-        http
-          .put(`/api/v1/super-admin/companies/${id}`, data)
-          .then((response) => {
-            const { global } = window.i18n
-            const notificationStore = useNotificationStore()
-            notificationStore.showNotification({
-              type: 'success',
-              message: global.t(
-                'administration.companies.updated_message'
-              ),
-            })
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-  },
-})
diff --git a/resources/scripts/admin/stores/auth.js b/resources/scripts/admin/stores/auth.js
deleted file mode 100644
index 55321e1c..00000000
--- a/resources/scripts/admin/stores/auth.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useAuthStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('auth', {
-    state: () => ({
-      status: '',
-
-      loginData: {
-        email: '',
-        password: '',
-        remember: '',
-      },
-    }),
-
-    actions: {
-      login(data) {
-        return new Promise((resolve, reject) => {
-          http.get('/sanctum/csrf-cookie').then((response) => {
-            if (response) {
-              http
-                .post('/login', data)
-                .then((response) => {
-                  resolve(response)
-
-                  setTimeout(() => {
-                    this.loginData.email = ''
-                    this.loginData.password = ''
-                  }, 1000)
-                })
-                .catch((err) => {
-                  handleError(err)
-                  reject(err)
-                })
-            }
-          })
-        })
-      },
-
-      logout() {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/auth/logout')
-            .then(async (response) => {
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: 'Logged out successfully.',
-              })
-
-              // Clear stored auth data so next login doesn't send stale tokens
-              window.Ls.remove('auth.token')
-              window.Ls.remove('selectedCompany')
-
-              // Refresh CSRF token so next login works cleanly
-              await http.get('/sanctum/csrf-cookie').catch(() => {})
-
-              window.router.push('/login')
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              window.Ls.remove('auth.token')
-              window.Ls.remove('selectedCompany')
-              http.get('/sanctum/csrf-cookie').catch(() => {})
-              window.router.push('/login')
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
\ No newline at end of file
diff --git a/resources/scripts/admin/stores/backup.js b/resources/scripts/admin/stores/backup.js
deleted file mode 100644
index eb14cf5b..00000000
--- a/resources/scripts/admin/stores/backup.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useBackupStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('backup', {
-    state: () => ({
-      backups: [],
-      currentBackupData: {
-        option: 'full',
-        selected_disk: null,
-      },
-    }),
-
-    actions: {
-      fetchBackups(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/backups`, { params })
-            .then((response) => {
-              this.backups = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      createBackup(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/backups`, data)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.backup.created_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      removeBackup(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .delete(`/api/v1/backups/${params.disk}`, { params })
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.backup.deleted_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/category.js b/resources/scripts/admin/stores/category.js
deleted file mode 100644
index 500b7126..00000000
--- a/resources/scripts/admin/stores/category.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useCategoryStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('category', {
-    state: () => ({
-      categories: [],
-      currentCategory: {
-        id: null,
-        name: '',
-        description: '',
-      },
-      editCategory: null
-    }),
-
-    getters: {
-      isEdit: (state) => (state.currentCategory.id ? true : false),
-    },
-
-    actions: {
-      fetchCategories(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/categories`, { params })
-            .then((response) => {
-              this.categories = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchCategory(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/categories/${id}`)
-            .then((response) => {
-              this.currentCategory = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addCategory(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/categories', data)
-            .then((response) => {
-              this.categories.push(response.data.data)
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.expense_category.created_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateCategory(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/categories/${data.id}`, data)
-            .then((response) => {
-              if (response.data) {
-                let pos = this.categories.findIndex(
-                  (category) => category.id === response.data.data.id
-                )
-                this.categories[pos] = data.categories
-                const notificationStore = useNotificationStore()
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t(
-                    'settings.expense_category.updated_message'
-                  ),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteCategory(id) {
-        return new Promise((resolve) => {
-          http
-            .delete(`/api/v1/categories/${id}`)
-            .then((response) => {
-              let index = this.categories.findIndex(
-                (category) => category.id === id
-              )
-              this.categories.splice(index, 1)
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.expense_category.deleted_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              console.error(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/company-mail.js b/resources/scripts/admin/stores/company-mail.js
deleted file mode 100644
index 97a2850b..00000000
--- a/resources/scripts/admin/stores/company-mail.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useCompanyMailStore = defineStore('company-mail', {
-  state: () => ({
-    mailConfigData: null,
-    mail_driver: '',
-    mail_drivers: [],
-  }),
-
-  actions: {
-    fetchMailDrivers() {
-      return new Promise((resolve, reject) => {
-        http
-          .get('/api/v1/mail/drivers')
-          .then((response) => {
-            if (response.data) {
-              this.mail_drivers = response.data
-            }
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    fetchMailConfig() {
-      return new Promise((resolve, reject) => {
-        http
-          .get('/api/v1/company/mail/company-config')
-          .then((response) => {
-            if (response.data) {
-              this.mailConfigData = response.data
-              this.mail_driver = response.data.mail_driver || ''
-            }
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    updateMailConfig(data) {
-      return new Promise((resolve, reject) => {
-        http
-          .post('/api/v1/company/mail/company-config', data)
-          .then((response) => {
-            const { global } = window.i18n
-            const notificationStore = useNotificationStore()
-            notificationStore.showNotification({
-              type: 'success',
-              message: global.t('settings.mail.company_mail_config_updated'),
-            })
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    sendTestMail(data) {
-      return new Promise((resolve, reject) => {
-        http
-          .post('/api/v1/company/mail/company-test', data)
-          .then((response) => {
-            const { global } = window.i18n
-            const notificationStore = useNotificationStore()
-            if (response.data.success) {
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('general.send_mail_successfully'),
-              })
-            }
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-  },
-})
diff --git a/resources/scripts/admin/stores/company.js b/resources/scripts/admin/stores/company.js
deleted file mode 100644
index e0f4c2f3..00000000
--- a/resources/scripts/admin/stores/company.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-import Ls from '@/scripts/services/ls'
-
-export const useCompanyStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('company', {
-    state: () => ({
-      companies: [],
-      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
-            .get('/api/v1/company/mail/config')
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateCompany(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put('/api/v1/company', data)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.company_info.updated_message'),
-              })
-
-              this.selectedCompany = response.data.data
-              const companyIndex = this.companies.findIndex((company) => company.unique_hash === this.selectedCompany.unique_hash);
-              if (companyIndex !== -1) {
-                this.companies[companyIndex] = this.selectedCompany;
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateCompanyLogo(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/company/upload-logo', data)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addNewCompany(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/companies', data)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('company_switcher.created_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchCompany(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get('/api/v1/current-company', params)
-            .then((response) => {
-              Object.assign(this.companyForm, response.data.data.address)
-              this.companyForm.name = response.data.data.name
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchUserCompanies() {
-        return new Promise((resolve, reject) => {
-          http
-            .get('/api/v1/companies')
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchCompanySettings(settings) {
-        return new Promise((resolve, reject) => {
-          http
-            .get('/api/v1/company/settings', {
-              params: {
-                settings,
-              },
-            })
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateCompanySettings({ data, message }) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/company/settings', data)
-            .then((response) => {
-              Object.assign(this.selectedCompanySettings, data.settings)
-
-              if (message) {
-                const notificationStore = useNotificationStore()
-
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t(message),
-                })
-              }
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteCompany(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/companies/delete`, data)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      setDefaultCurrency(data) {
-        this.defaultCurrency = data.currency
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/custom-field.js b/resources/scripts/admin/stores/custom-field.js
deleted file mode 100644
index 934c1b82..00000000
--- a/resources/scripts/admin/stores/custom-field.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import customFieldStub from '@/scripts/admin/stub/custom-field'
-import utilities from '@/scripts/helpers/utilities'
-import { util } from 'prettier'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useCustomFieldStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('custom-field', {
-    state: () => ({
-      customFields: [],
-      isRequestOngoing: false,
-
-      currentCustomField: {
-        ...customFieldStub,
-      },
-    }),
-
-    getters: {
-      isEdit() {
-        return this.currentCustomField.id ? true : false
-      },
-    },
-
-    actions: {
-      resetCustomFields() {
-        this.customFields = []
-      },
-
-      resetCurrentCustomField() {
-        this.currentCustomField = {
-          ...customFieldStub,
-        }
-      },
-
-      fetchCustomFields(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/custom-fields`, { params })
-            .then((response) => {
-              this.customFields = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchNoteCustomFields(params) {
-        return new Promise((resolve, reject) => {
-          if (this.isRequestOngoing) {
-            resolve({ requestOnGoing: true })
-            return true
-          }
-
-          this.isRequestOngoing = true
-
-          http
-            .get(`/api/v1/custom-fields`, { params })
-            .then((response) => {
-              this.customFields = response.data.data
-              this.isRequestOngoing = false
-              resolve(response)
-            })
-            .catch((err) => {
-              this.isRequestOngoing = false
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchCustomField(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/custom-fields/${id}`)
-            .then((response) => {
-              this.currentCustomField = response.data.data
-
-              if (
-                this.currentCustomField.options &&
-                this.currentCustomField.options.length
-              ) {
-                this.currentCustomField.options =
-                  this.currentCustomField.options.map((option) => {
-                    return (option = { name: option })
-                  })
-              }
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addCustomField(params) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/custom-fields`, params)
-            .then((response) => {
-              let data = {
-                ...response.data.data,
-              }
-
-              if (data.options) {
-                data.options = data.options.map((option) => {
-                  return { name: option ? option : '' }
-                })
-              }
-
-              this.customFields.push(data)
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.custom_fields.added_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateCustomField(params) {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/custom-fields/${params.id}`, params)
-            .then((response) => {
-              let data = {
-                ...response.data.data,
-              }
-
-              if (data.options) {
-                data.options = data.options.map((option) => {
-                  return { name: option ? option : '' }
-                })
-              }
-
-              let pos = this.customFields.findIndex((_f) => _f.id === data.id)
-
-              if (this.customFields[pos]) {
-                this.customFields[pos] = data
-              }
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.custom_fields.updated_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteCustomFields(id) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          http
-            .delete(`/api/v1/custom-fields/${id}`)
-            .then((response) => {
-              let index = this.customFields.findIndex(
-                (field) => field.id === id
-              )
-
-              this.customFields.splice(index, 1)
-
-              if (response.data.error) {
-                notificationStore.showNotification({
-                  type: 'error',
-                  message: global.t('settings.custom_fields.already_in_use'),
-                })
-              } else {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('settings.custom_fields.deleted_message'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              // notificationStore.showNotification({
-              //   type: 'error',
-              //   message: global.t('settings.custom_fields.already_in_use'),
-              // })
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/customer.js b/resources/scripts/admin/stores/customer.js
deleted file mode 100644
index 1338ad0e..00000000
--- a/resources/scripts/admin/stores/customer.js
+++ /dev/null
@@ -1,256 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useRoute } from 'vue-router'
-import { handleError } from '@/scripts/helpers/error-handling'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import addressStub from '@/scripts/admin/stub/address.js'
-import customerStub from '@/scripts/admin/stub/customer'
-
-export const useCustomerStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('customer', {
-    state: () => ({
-      customers: [],
-      totalCustomers: 0,
-      selectAllField: false,
-      selectedCustomers: [],
-      selectedViewCustomer: {},
-      isFetchingInitialSettings: false,
-      isFetchingViewData: false,
-      currentCustomer: {
-        ...customerStub(),
-      },
-      editCustomer: null
-    }),
-
-    getters: {
-      isEdit: (state) => (state.currentCustomer.id ? true : false),
-    },
-
-    actions: {
-      resetCurrentCustomer() {
-        this.currentCustomer = {
-          ...customerStub(),
-        }
-      },
-
-      copyAddress() {
-        this.currentCustomer.shipping = {
-          ...this.currentCustomer.billing,
-          type: 'shipping',
-        }
-      },
-
-      fetchCustomerInitialSettings(isEdit) {
-        const route = useRoute()
-        const globalStore = useGlobalStore()
-        const companyStore = useCompanyStore()
-
-        this.isFetchingInitialSettings = true
-        let editActions = []
-        if (isEdit) {
-          editActions = [this.fetchCustomer(route.params.id)]
-        } else {
-          this.currentCustomer.currency_id =
-            companyStore.selectedCompanyCurrency.id
-        }
-
-        Promise.all([
-          globalStore.fetchCurrencies(),
-          globalStore.fetchCountries(),
-          ...editActions,
-        ])
-          .then(async ([res1, res2, res3]) => {
-            this.isFetchingInitialSettings = false
-          })
-          .catch((error) => {
-            handleError(error)
-          })
-      },
-
-      fetchCustomers(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/customers`, { params })
-            .then((response) => {
-              this.customers = response.data.data
-              this.totalCustomers = response.data.meta.customer_total_count
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchViewCustomer(params) {
-        return new Promise((resolve, reject) => {
-          this.isFetchingViewData = true
-          http
-            .get(`/api/v1/customers/${params.id}/stats`, { params })
-
-            .then((response) => {
-              this.selectedViewCustomer = {}
-              Object.assign(this.selectedViewCustomer, response.data.data)
-              this.setAddressStub(response.data.data)
-              this.isFetchingViewData = false
-              resolve(response)
-            })
-            .catch((err) => {
-              this.isFetchingViewData = false
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchCustomer(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/customers/${id}`)
-            .then((response) => {
-              Object.assign(this.currentCustomer, response.data.data)
-
-              this.setAddressStub(response.data.data)
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addCustomer(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/customers', data)
-            .then((response) => {
-              this.customers.push(response.data.data)
-
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('customers.created_message'),
-              })
-              resolve(response)
-            })
-
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateCustomer(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/customers/${data.id}`, data)
-            .then((response) => {
-              if (response.data) {
-                let pos = this.customers.findIndex(
-                  (customer) => customer.id === response.data.data.id
-                )
-                this.customers[pos] = data
-                const notificationStore = useNotificationStore()
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('customers.updated_message'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteCustomer(id) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/customers/delete`, id)
-            .then((response) => {
-              let index = this.customers.findIndex(
-                (customer) => customer.id === id
-              )
-              this.customers.splice(index, 1)
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('customers.deleted_message', 1),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteMultipleCustomers() {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/customers/delete`, { ids: this.selectedCustomers })
-            .then((response) => {
-              this.selectedCustomers.forEach((customer) => {
-                let index = this.customers.findIndex(
-                  (_customer) => _customer.id === customer.id
-                )
-                this.customers.splice(index, 1)
-              })
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('customers.deleted_message', 2),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      setSelectAllState(data) {
-        this.selectAllField = data
-      },
-
-      selectCustomer(data) {
-        this.selectedCustomers = data
-        if (this.selectedCustomers.length === this.customers.length) {
-          this.selectAllField = true
-        } else {
-          this.selectAllField = false
-        }
-      },
-
-      selectAllCustomers() {
-        if (this.selectedCustomers.length === this.customers.length) {
-          this.selectedCustomers = []
-          this.selectAllField = false
-        } else {
-          let allCustomerIds = this.customers.map((customer) => customer.id)
-          this.selectedCustomers = allCustomerIds
-          this.selectAllField = true
-        }
-      },
-
-      setAddressStub(data) {
-        if (!data.billing) this.currentCustomer.billing = { ...addressStub }
-        if (!data.shipping) this.currentCustomer.shipping = { ...addressStub }
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/dashboard.js b/resources/scripts/admin/stores/dashboard.js
deleted file mode 100644
index c92fdcee..00000000
--- a/resources/scripts/admin/stores/dashboard.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useDashboardStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('dashboard', {
-    state: () => ({
-      stats: {
-        totalAmountDue: 0,
-        totalCustomerCount: 0,
-        totalInvoiceCount: 0,
-        totalEstimateCount: 0,
-      },
-
-      chartData: {
-        months: [],
-        invoiceTotals: [],
-        expenseTotals: [],
-        receiptTotals: [],
-        netIncomeTotals: [],
-      },
-
-      totalSales: null,
-      totalReceipts: null,
-      totalExpenses: null,
-      totalNetIncome: null,
-
-      recentDueInvoices: [],
-      recentEstimates: [],
-
-      isDashboardDataLoaded: false,
-    }),
-
-    actions: {
-      loadData(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/dashboard`, { params })
-            .then((response) => {
-              // Stats
-              this.stats.totalAmountDue = response.data.total_amount_due
-              this.stats.totalCustomerCount = response.data.total_customer_count
-              this.stats.totalInvoiceCount = response.data.total_invoice_count
-              this.stats.totalEstimateCount = response.data.total_estimate_count
-
-              // Dashboard Chart
-              if (this.chartData && response.data.chart_data) {
-                this.chartData.months = response.data.chart_data.months
-                this.chartData.invoiceTotals =
-                  response.data.chart_data.invoice_totals
-                this.chartData.expenseTotals =
-                  response.data.chart_data.expense_totals
-                this.chartData.receiptTotals =
-                  response.data.chart_data.receipt_totals
-                this.chartData.netIncomeTotals =
-                  response.data.chart_data.net_income_totals
-              }
-
-              // Dashboard Chart Labels
-              this.totalSales = response.data.total_sales
-              this.totalReceipts = response.data.total_receipts
-              this.totalExpenses = response.data.total_expenses
-              this.totalNetIncome = response.data.total_net_income
-
-              // Dashboard Table Data
-              this.recentDueInvoices = response.data.recent_due_invoices
-              this.recentEstimates = response.data.recent_estimates
-
-              this.isDashboardDataLoaded = true
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/disk.js b/resources/scripts/admin/stores/disk.js
deleted file mode 100644
index ca5148fb..00000000
--- a/resources/scripts/admin/stores/disk.js
+++ /dev/null
@@ -1,192 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useDiskStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('disk', {
-    state: () => ({
-      disks: [],
-      diskDrivers: [],
-      diskConfigData: null,
-      selected_driver: 'local',
-
-      doSpaceDiskConfig: {
-        name: '',
-        selected_driver: 'doSpaces',
-        key: '',
-        secret: '',
-        region: '',
-        bucket: '',
-        endpoint: '',
-        root: '',
-      },
-
-      dropBoxDiskConfig: {
-        name: '',
-        selected_driver: 'dropbox',
-        token: '',
-        key: '',
-        secret: '',
-        app: '',
-      },
-
-      localDiskConfig: {
-        name: '',
-        selected_driver: 'local',
-        root: '',
-      },
-
-      s3DiskConfigData: {
-        name: '',
-        selected_driver: 's3',
-        key: '',
-        secret: '',
-        region: '',
-        bucket: '',
-        root: '',
-      },
-
-      s3CompatDiskConfigData: {
-        name: '',
-        selected_driver: 's3compat',
-        key: '',
-        secret: '',
-        region: '',
-        bucket: '',
-        root: '',
-        endpoint: '',
-      },
-    }),
-
-    getters: {
-      getDiskDrivers: (state) => state.diskDrivers,
-    },
-
-    actions: {
-      fetchDiskEnv(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/disks/${data.disk}`)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchDisks(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/disks`, { params })
-            .then((response) => {
-              this.disks = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchDiskDrivers() {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/disk/drivers`)
-            .then((response) => {
-              this.diskConfigData = response.data
-              this.diskDrivers = response.data.drivers
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteFileDisk(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .delete(`/api/v1/disks/${id}`)
-            .then((response) => {
-              if (response.data.success) {
-                let index = this.disks.findIndex(
-                  (category) => category.id === id
-                )
-                this.disks.splice(index, 1)
-                const notificationStore = useNotificationStore()
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('settings.disk.deleted_message'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateDisk(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/disks/${data.id}`, data)
-            .then((response) => {
-              if (response.data) {
-                let pos = this.disks.findIndex(
-                  (disk) => disk.id === response.data.data
-                )
-                this.disks[pos] = data.disks
-                const notificationStore = useNotificationStore()
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('settings.disk.success_set_default_disk'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      createDisk(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/disks`, data)
-            .then((response) => {
-              if (response.data) {
-                const notificationStore = useNotificationStore()
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('settings.disk.success_create'),
-                })
-              }
-              this.disks.push(response.data)
-              resolve(response)
-            })
-            .catch((err) => {
-              /*   notificationStore.showNotification({
-                type: 'error',
-                message: global.t('settings.disk.invalid_disk_credentials'),
-              }) */
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/estimate.js b/resources/scripts/admin/stores/estimate.js
deleted file mode 100644
index 7f3769ea..00000000
--- a/resources/scripts/admin/stores/estimate.js
+++ /dev/null
@@ -1,644 +0,0 @@
-import http from '@/scripts/http'
-import moment from 'moment'
-import Guid from 'guid'
-import _ from 'lodash'
-import { defineStore } from 'pinia'
-import { useRoute } from 'vue-router'
-import { useCompanyStore } from './company'
-import { useCustomerStore } from './customer'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useItemStore } from './item'
-import { useTaxTypeStore } from './tax-type'
-import { handleError } from '@/scripts/helpers/error-handling'
-import estimateStub from '../stub/estimate'
-import estimateItemStub from '../stub/estimate-item'
-import taxStub from '../stub/tax'
-import { useUserStore } from './user'
-import { useNotesStore } from './note'
-
-export const useEstimateStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('estimate', {
-    state: () => ({
-      templates: [],
-
-      estimates: [],
-      selectAllField: false,
-      selectedEstimates: [],
-      totalEstimateCount: 0,
-      isFetchingInitialSettings: false,
-      showExchangeRate: false,
-
-      newEstimate: {
-        ...estimateStub(),
-      },
-    }),
-
-    getters: {
-      getSubTotal() {
-        return this.newEstimate.items.reduce(function (a, b) {
-          return a + b['total']
-        }, 0)
-      },
-      getNetTotal() {
-        return this.getSubtotalWithDiscount - this.getTotalTax
-      },
-      getTotalSimpleTax() {
-        return _.sumBy(this.newEstimate.taxes, function (tax) {
-          if (!tax.compound_tax) {
-            return tax.amount
-          }
-          return 0
-        })
-      },
-
-      getTotalCompoundTax() {
-        return _.sumBy(this.newEstimate.taxes, function (tax) {
-          if (tax.compound_tax) {
-            return tax.amount
-          }
-          return 0
-        })
-      },
-
-      getTotalTax() {
-        if (
-          this.newEstimate.tax_per_item === 'NO' ||
-          this.newEstimate.tax_per_item === null
-        ) {
-          return this.getTotalSimpleTax + this.getTotalCompoundTax
-        }
-        return _.sumBy(this.newEstimate.items, function (tax) {
-          return tax.tax
-        })
-      },
-
-      getSubtotalWithDiscount() {
-        return this.getSubTotal - this.newEstimate.discount_val
-      },
-
-      getTotal() {
-        if (this.newEstimate.tax_included) {
-          return this.getSubtotalWithDiscount
-        }
-        return this.getSubtotalWithDiscount + this.getTotalTax
-      },
-
-      isEdit: (state) => (state.newEstimate.id ? true : false),
-    },
-
-    actions: {
-      resetCurrentEstimate() {
-        this.newEstimate = {
-          ...estimateStub(),
-        }
-      },
-
-      previewEstimate(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/estimates/${params.id}/send/preview`, { params })
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchEstimates(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/estimates`, { params })
-            .then((response) => {
-              this.estimates = response.data.data
-              this.totalEstimateCount = response.data.meta.estimate_total_count
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      getNextNumber(params, setState = false) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/next-number?key=estimate`, { params })
-            .then((response) => {
-              if (setState) {
-                this.newEstimate.estimate_number = response.data.nextNumber
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchEstimate(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/estimates/${id}`)
-            .then((response) => {
-              this.setEstimateData(response.data.data)
-              this.setCustomerAddresses(this.newEstimate.customer)
-              resolve(response)
-            })
-            .catch((err) => {
-              console.log(err)
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      setEstimateData(estimate) {
-        Object.assign(this.newEstimate, estimate)
-        if (this.newEstimate.tax_per_item === 'YES') {
-          this.newEstimate.items.forEach((_i) => {
-            if (_i.taxes && !_i.taxes.length) {
-              _i.taxes.push({ ...taxStub, id: Guid.raw() })
-            }
-          })
-        }
-        if (this.newEstimate.discount_per_item === 'YES') {
-          this.newEstimate.items.forEach((_i, index) => {
-            if (_i.discount_type === 'fixed') {
-              this.newEstimate.items[index].discount = _i.discount / 100
-            }
-          })
-        } else {
-          if (this.newEstimate.discount_type === 'fixed') {
-            this.newEstimate.discount = this.newEstimate.discount / 100
-          }
-        }
-      },
-
-      setCustomerAddresses(customer) {
-        const customer_business = customer.customer_business
-
-        if (customer_business?.billing_address) {
-          this.newEstimate.customer.billing_address =
-            customer_business.billing_address
-        }
-
-        if (customer_business?.shipping_address) {
-          this.newEstimate.customer.shipping_address =
-            customer_business.shipping_address
-        }
-      },
-
-      addSalesTaxUs() {
-        const taxTypeStore = useTaxTypeStore()
-        let salesTax = { ...taxStub }
-        let found = this.newEstimate.taxes.find(
-          (_t) => _t.name === 'Sales Tax' && _t.type === 'MODULE',
-        )
-        if (found) {
-          for (const key in found) {
-            if (Object.prototype.hasOwnProperty.call(salesTax, key)) {
-              salesTax[key] = found[key]
-            }
-          }
-          salesTax.id = found.tax_type_id
-          console.log(salesTax, 'salesTax')
-
-          taxTypeStore.taxTypes.push(salesTax)
-          console.log(taxTypeStore.taxTypes)
-        }
-      },
-
-      sendEstimate(data) {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/estimates/${data.id}/send`, data)
-            .then((response) => {
-              if (!data.is_preview) {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('estimates.send_estimate_successfully'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addEstimate(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/estimates', data)
-            .then((response) => {
-              this.estimates = [...this.estimates, response.data.estimate]
-              const notificationStore = useNotificationStore()
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('estimates.created_message'),
-              })
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteEstimate(id) {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/estimates/delete`, id)
-            .then((response) => {
-              let index = this.estimates.findIndex(
-                (estimate) => estimate.id === id,
-              )
-
-              this.estimates.splice(index, 1)
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('estimates.deleted_message', 1),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteMultipleEstimates(id) {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/estimates/delete`, { ids: this.selectedEstimates })
-            .then((response) => {
-              this.selectedEstimates.forEach((estimate) => {
-                let index = this.estimates.findIndex(
-                  (_est) => _est.id === estimate.id,
-                )
-                this.estimates.splice(index, 1)
-              })
-              this.selectedEstimates = []
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('estimates.deleted_message', 2),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateEstimate(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/estimates/${data.id}`, data)
-            .then((response) => {
-              let pos = this.estimates.findIndex(
-                (estimate) => estimate.id === response.data.data.id,
-              )
-              this.estimates[pos] = response.data.data
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('estimates.updated_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      cloneEstimate(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/estimates/${data.id}/clone`, data)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('estimates.cloned_successfully'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      markAsAccepted(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/estimates/${data.id}/status`, data)
-            .then((response) => {
-              let pos = this.estimates.findIndex(
-                (estimate) => estimate.id === data.id,
-              )
-              if (this.estimates[pos]) {
-                this.estimates[pos].status = 'ACCEPTED'
-
-                const notificationStore = useNotificationStore()
-
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('estimates.marked_as_accepted_message'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      markAsRejected(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/estimates/${data.id}/status`, data)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('estimates.marked_as_rejected_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      markAsSent(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/estimates/${data.id}/status`, data)
-            .then((response) => {
-              let pos = this.estimates.findIndex(
-                (estimate) => estimate.id === data.id,
-              )
-              if (this.estimates[pos]) {
-                this.estimates[pos].status = 'SENT'
-
-                const notificationStore = useNotificationStore()
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('estimates.mark_as_sent_successfully'),
-                })
-              }
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      convertToInvoice(id) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/estimates/${id}/convert-to-invoice`)
-            .then((response) => {
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('estimates.conversion_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      searchEstimate(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/estimates?${data}`)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      selectEstimate(data) {
-        this.selectedEstimates = data
-        if (this.selectedEstimates.length === this.estimates.length) {
-          this.selectAllField = true
-        } else {
-          this.selectAllField = false
-        }
-      },
-
-      selectAllEstimates() {
-        if (this.selectedEstimates.length === this.estimates.length) {
-          this.selectedEstimates = []
-          this.selectAllField = false
-        } else {
-          let allEstimateIds = this.estimates.map((estimate) => estimate.id)
-          this.selectedEstimates = allEstimateIds
-          this.selectAllField = true
-        }
-      },
-
-      selectCustomer(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/customers/${id}`)
-            .then((response) => {
-              this.newEstimate.customer = response.data.data
-              this.newEstimate.customer_id = response.data.data.id
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-      fetchEstimateTemplates(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/estimates/templates`, { params })
-            .then((response) => {
-              this.templates = response.data.estimateTemplates
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      setTemplate(data) {
-        this.newEstimate.template_name = data
-      },
-
-      resetSelectedCustomer() {
-        this.newEstimate.customer = null
-        this.newEstimate.customer_id = ''
-      },
-
-      selectNote(data) {
-        this.newEstimate.selectedNote = null
-        this.newEstimate.selectedNote = data
-      },
-
-      resetSelectedNote() {
-        this.newEstimate.selectedNote = null
-      },
-
-      addItem() {
-        this.newEstimate.items.push({
-          ...estimateItemStub,
-          id: Guid.raw(),
-          taxes: [{ ...taxStub, id: Guid.raw() }],
-        })
-      },
-
-      updateItem(data) {
-        Object.assign(this.newEstimate.items[data.index], { ...data })
-      },
-
-      removeItem(index) {
-        this.newEstimate.items.splice(index, 1)
-      },
-
-      deselectItem(index) {
-        this.newEstimate.items[index] = {
-          ...estimateItemStub,
-          id: Guid.raw(),
-          taxes: [{ ...taxStub, id: Guid.raw() }],
-        }
-      },
-
-      async fetchEstimateInitialSettings(isEdit) {
-        const companyStore = useCompanyStore()
-        const customerStore = useCustomerStore()
-        const itemStore = useItemStore()
-        const taxTypeStore = useTaxTypeStore()
-        const route = useRoute()
-        const userStore = useUserStore()
-        const notesStore = useNotesStore()
-
-        this.isFetchingInitialSettings = true
-        this.newEstimate.selectedCurrency = companyStore.selectedCompanyCurrency
-
-        if (route.query.customer) {
-          let response = await customerStore.fetchCustomer(route.query.customer)
-          this.newEstimate.customer = response.data.data
-          this.newEstimate.customer_id = response.data.data.id
-        }
-
-        let editActions = []
-
-        if (!isEdit) {
-          await notesStore.fetchNotes()
-          this.newEstimate.notes =
-            notesStore.getDefaultNoteForType('Estimate')?.notes
-          this.newEstimate.tax_per_item =
-            companyStore.selectedCompanySettings.tax_per_item
-          this.newEstimate.sales_tax_type =
-            companyStore.selectedCompanySettings.sales_tax_type
-          this.newEstimate.sales_tax_address_type =
-            companyStore.selectedCompanySettings.sales_tax_address_type
-          this.newEstimate.discount_per_item =
-            companyStore.selectedCompanySettings.discount_per_item
-          this.newEstimate.estimate_date = moment().format('YYYY-MM-DD')
-          if (
-            companyStore.selectedCompanySettings
-              .estimate_set_expiry_date_automatically === 'YES'
-          ) {
-            this.newEstimate.expiry_date = moment()
-              .add(
-                companyStore.selectedCompanySettings.estimate_expiry_date_days,
-                'days',
-              )
-              .format('YYYY-MM-DD')
-          }
-        } else {
-          editActions = [this.fetchEstimate(route.params.id)]
-        }
-
-        Promise.all([
-          itemStore.fetchItems({
-            filter: {},
-            orderByField: '',
-            orderBy: '',
-          }),
-          this.resetSelectedNote(),
-          this.fetchEstimateTemplates(),
-          this.getNextNumber(),
-          taxTypeStore.fetchTaxTypes({ limit: 'all' }),
-          ...editActions,
-        ])
-          .then(async ([res1, res2, res3, res4, res5, res6, res7]) => {
-            // Create
-            if (!isEdit) {
-              if (res4.data) {
-                this.newEstimate.estimate_number = res4.data.nextNumber
-              }
-
-              this.setTemplate(this.templates[0].name)
-              this.newEstimate.template_name = userStore.currentUserSettings
-                .default_estimate_template
-                ? userStore.currentUserSettings.default_estimate_template
-                : this.newEstimate.template_name
-            }
-
-            if (isEdit) {
-              this.addSalesTaxUs()
-            }
-            this.isFetchingInitialSettings = false
-          })
-          .catch((err) => {
-            handleError(err)
-            this.isFetchingInitialSettings = false
-          })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/exchange-rate.js b/resources/scripts/admin/stores/exchange-rate.js
deleted file mode 100644
index d79443ba..00000000
--- a/resources/scripts/admin/stores/exchange-rate.js
+++ /dev/null
@@ -1,247 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useExchangeRateStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-  const notificationStore = useNotificationStore()
-
-  return defineStoreFunc('exchange-rate', {
-    state: () => ({
-      supportedCurrencies: [],
-      drivers: [],
-      activeUsedCurrencies: [],
-      providers: [],
-      currencies: null,
-      currentExchangeRate: {
-        id: null,
-        driver: '',
-        key: '',
-        active: true,
-        currencies: [],
-      },
-      currencyConverter: {
-        type: '',
-        url: '',
-      },
-      bulkCurrencies: [],
-    }),
-    getters: {
-      isEdit: (state) => (state.currentExchangeRate.id ? true : false),
-    },
-
-    actions: {
-      fetchProviders(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get('/api/v1/exchange-rate-providers', { params })
-            .then((response) => {
-              this.providers = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchDefaultProviders() {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/config?key=exchange_rate_drivers`)
-            .then((response) => {
-              this.drivers = response.data.exchange_rate_drivers
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchProvider(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/exchange-rate-providers/${id}`)
-            .then((response) => {
-              this.currentExchangeRate = response.data.data
-              this.currencyConverter = response.data.data.driver_config
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addProvider(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/exchange-rate-providers', data)
-            .then((response) => {
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.exchange_rate.created_message'),
-              })
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-
-              reject(err)
-            })
-        })
-      },
-
-      updateProvider(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/exchange-rate-providers/${data.id}`, data)
-            .then((response) => {
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.exchange_rate.updated_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteExchangeRate(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .delete(`/api/v1/exchange-rate-providers/${id}`)
-            .then((response) => {
-              let index = this.drivers.findIndex((driver) => driver.id === id)
-              this.drivers.splice(index, 1)
-              if (response.data.success) {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('settings.exchange_rate.deleted_message'),
-                })
-              } else {
-                notificationStore.showNotification({
-                  type: 'error',
-                  message: global.t('settings.exchange_rate.error'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-      fetchCurrencies(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/supported-currencies`, { params })
-            .then((response) => {
-              this.supportedCurrencies = response.data.supportedCurrencies
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-      fetchActiveCurrency(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get('/api/v1/used-currencies', { params })
-            .then((response) => {
-              this.activeUsedCurrencies = response.data.activeUsedCurrencies
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-      fetchBulkCurrencies() {
-        return new Promise((resolve, reject) => {
-          http
-            .get('/api/v1/currencies/used')
-            .then((response) => {
-              this.bulkCurrencies = response.data.currencies.map((_m) => {
-                _m.exchange_rate = null
-                return _m
-              })
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-      updateBulkExchangeRate(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/currencies/bulk-update-exchange-rate', data)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-      getCurrentExchangeRate(currencyId) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/currencies/${currencyId}/exchange-rate`)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              reject(err)
-            })
-        })
-      },
-      getCurrencyConverterServers() {
-        return new Promise((resolve, reject) => {
-          http
-            .get('/api/v1/config?key=currency_converter_servers')
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-      checkForActiveProvider(currency_id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/currencies/${currency_id}/active-provider`)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/expense.js b/resources/scripts/admin/stores/expense.js
deleted file mode 100644
index 024e5459..00000000
--- a/resources/scripts/admin/stores/expense.js
+++ /dev/null
@@ -1,238 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { handleError } from '@/scripts/helpers/error-handling'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import expenseStub from '@/scripts/admin/stub/expense'
-import utils from '@/scripts/helpers/utilities'
-
-export const useExpenseStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('expense', {
-    state: () => ({
-      expenses: [],
-      totalExpenses: 0,
-      selectAllField: false,
-      selectedExpenses: [],
-      paymentModes: [],
-      showExchangeRate: false,
-      currentExpense: {
-        ...expenseStub,
-      },
-    }),
-
-    getters: {
-      getCurrentExpense: (state) => state.currentExpense,
-      getSelectedExpenses: (state) => state.selectedExpenses,
-    },
-
-    actions: {
-      resetCurrentExpenseData() {
-        this.currentExpense = {
-          ...expenseStub,
-        }
-      },
-
-      fetchExpenses(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/expenses`, { params })
-            .then((response) => {
-              this.expenses = response.data.data
-              this.totalExpenses = response.data.meta.expense_total_count
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchExpense(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/expenses/${id}`)
-            .then((response) => {
-              if (response.data) {
-                Object.assign(this.currentExpense, response.data.data)
-                this.currentExpense.selectedCurrency =
-                  response.data.data.currency
-                this.currentExpense.attachment_receipt = null
-                if (response.data.data.attachment_receipt_url) {
-                  if (
-                    utils.isImageFile(
-                      response.data.data.attachment_receipt_meta.mime_type
-                    )
-                  ) {
-                    this.currentExpense.receiptFiles = [
-                      { image: `/reports/expenses/${id}/receipt?${response.data.data.attachment_receipt_meta.uuid}` },
-                    ]
-                  } else {
-                    this.currentExpense.receiptFiles = [
-                      {
-                        type: 'document',
-                        name: response.data.data.attachment_receipt_meta
-                          .file_name,
-                      },
-                    ]
-                  }
-                } else {
-                  this.currentExpense.receiptFiles = []
-                }
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addExpense(data) {
-        const formData = utils.toFormData(data)
-
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/expenses', formData)
-            .then((response) => {
-              this.expenses.push(response.data)
-
-              const notificationStore = useNotificationStore()
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('expenses.created_message'),
-              })
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateExpense({ id, data, isAttachmentReceiptRemoved }) {
-        const notificationStore = useNotificationStore()
-
-        const formData = utils.toFormData(data)
-
-        formData.append('_method', 'PUT')
-        formData.append('is_attachment_receipt_removed', isAttachmentReceiptRemoved)
-
-        return new Promise((resolve) => {
-          http.post(`/api/v1/expenses/${id}`, formData).then((response) => {
-            let pos = this.expenses.findIndex(
-              (expense) => expense.id === response.data.id
-            )
-
-            this.expenses[pos] = data.expense
-
-            notificationStore.showNotification({
-              type: 'success',
-              message: global.t('expenses.updated_message'),
-            })
-
-            resolve(response)
-          })
-        }).catch((err) => {
-          handleError(err)
-          reject(err)
-        })
-      },
-
-      setSelectAllState(data) {
-        this.selectAllField = data
-      },
-
-      selectExpense(data) {
-        this.selectedExpenses = data
-        if (this.selectedExpenses.length === this.expenses.length) {
-          this.selectAllField = true
-        } else {
-          this.selectAllField = false
-        }
-      },
-
-      selectAllExpenses(data) {
-        if (this.selectedExpenses.length === this.expenses.length) {
-          this.selectedExpenses = []
-          this.selectAllField = false
-        } else {
-          let allExpenseIds = this.expenses.map((expense) => expense.id)
-          this.selectedExpenses = allExpenseIds
-          this.selectAllField = true
-        }
-      },
-
-      deleteExpense(id) {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/expenses/delete`, id)
-            .then((response) => {
-              let index = this.expenses.findIndex(
-                (expense) => expense.id === id
-              )
-              this.expenses.splice(index, 1)
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('expenses.deleted_message', 1),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteMultipleExpenses() {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/expenses/delete`, { ids: this.selectedExpenses })
-            .then((response) => {
-              this.selectedExpenses.forEach((expense) => {
-                let index = this.expenses.findIndex(
-                  (_expense) => _expense.id === expense.id
-                )
-                this.expenses.splice(index, 1)
-              })
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('expenses.deleted_message', 2),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-      fetchPaymentModes(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/payment-methods`, { params })
-            .then((response) => {
-              this.paymentModes = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/global.js b/resources/scripts/admin/stores/global.js
deleted file mode 100644
index 76a490e0..00000000
--- a/resources/scripts/admin/stores/global.js
+++ /dev/null
@@ -1,309 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useCompanyStore } from './company'
-import { useUserStore } from './user'
-import { useModuleStore } from './module'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-import _ from 'lodash'
-
-export const useGlobalStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('global', {
-    state: () => ({
-      // Global Configuration
-      config: null,
-      globalSettings: null,
-
-      // Global Lists
-      timeZones: [],
-      dateFormats: [],
-      timeFormats: [],
-      currencies: [],
-      countries: [],
-      languages: [],
-      fiscalYears: [],
-
-      // Menus
-      mainMenu: [],
-      settingMenu: [],
-
-      // Boolean Flags
-      isAppLoaded: false,
-      isSidebarOpen: false,
-      isSidebarCollapsed: window.Ls?.get('sidebarCollapsed') === 'true',
-      areCurrenciesLoading: false,
-
-      downloadReport: null,
-    }),
-
-    getters: {
-      menuGroups: (state) => {
-        return Object.values(_.groupBy(state.mainMenu, 'group'))
-      },
-    },
-
-    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(url)
-            .then(async (response) => {
-              const userStore = useUserStore()
-              const moduleStore = useModuleStore()
-
-              this.mainMenu = response.data.main_menu
-              this.settingMenu = response.data.setting_menu
-
-              this.config = response.data.config
-              this.globalSettings = response.data.global_settings
-
-              // user store
-              userStore.currentUser = response.data.current_user
-              userStore.currentUserSettings =
-                response.data.current_user_settings
-              userStore.currentAbilities = response.data.current_user_abilities
-
-              // Module store
-              moduleStore.apiToken = response.data.global_settings.api_token
-              moduleStore.enableModules = response.data.modules
-
-              // invitation store
-              if (response.data.pending_invitations) {
-                const { useInvitationStore } = await import('@/scripts/admin/stores/invitation')
-                const invitationStore = useInvitationStore()
-                invitationStore.setPendingInvitations(response.data.pending_invitations)
-              }
-
-              // company store
-              companyStore.companies = response.data.companies
-
-              if (response.data.current_company) {
-                companyStore.setSelectedCompany(response.data.current_company)
-                companyStore.selectedCompanySettings =
-                  response.data.current_company_settings
-                companyStore.selectedCompanyCurrency =
-                  response.data.current_company_currency
-              } else {
-                companyStore.setSelectedCompany(null)
-                companyStore.selectedCompanySettings = {}
-                companyStore.selectedCompanyCurrency = null
-              }
-
-              // Determine and load the appropriate language
-              const userLanguage = response.data.current_user_settings?.language
-              const companyLanguage = response.data.current_company_settings?.language
-              const targetLanguage = userLanguage || companyLanguage || 'en'
-
-              // Load the language dynamically if it's not English
-              if (targetLanguage !== 'en' && window.loadLanguage) {
-                try {
-                  await window.loadLanguage(targetLanguage)
-                } catch (error) {
-                  console.warn('Failed to load language during bootstrap:', error)
-                  // Fall back to English if loading fails
-                  if (typeof global.locale !== 'string') {
-                    global.locale.value = 'en'
-                  } else {
-                    global.locale = 'en'
-                  }
-                }
-              } else {
-                // Set locale for English or when loadLanguage is not available
-                if (typeof global.locale !== 'string') {
-                  global.locale.value = targetLanguage
-                } else {
-                  global.locale = targetLanguage
-                }
-              }
-
-              this.isAppLoaded = true
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchCurrencies() {
-        return new Promise((resolve, reject) => {
-          if (this.currencies.length || this.areCurrenciesLoading) {
-            resolve(this.currencies)
-          } else {
-            this.areCurrenciesLoading = true
-            http
-              .get('/api/v1/currencies')
-              .then((response) => {
-                this.currencies = response.data.data.filter((currency) => {
-                  return (currency.name = `${currency.code} - ${currency.name}`)
-                })
-                this.areCurrenciesLoading = false
-                resolve(response)
-              })
-              .catch((err) => {
-                handleError(err)
-                this.areCurrenciesLoading = false
-                reject(err)
-              })
-          }
-        })
-      },
-
-      fetchConfig(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/config`, { params })
-            .then((response) => {
-              if (response.data.languages) {
-                this.languages = response.data.languages
-              } else {
-                this.fiscalYears = response.data.fiscal_years
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchDateFormats() {
-        return new Promise((resolve, reject) => {
-          if (this.dateFormats.length) {
-            resolve(this.dateFormats)
-          } else {
-            http
-              .get('/api/v1/date/formats')
-              .then((response) => {
-                this.dateFormats = response.data.date_formats
-                resolve(response)
-              })
-              .catch((err) => {
-                handleError(err)
-                reject(err)
-              })
-          }
-        })
-      },
-
-      fetchTimeFormats() {
-        return new Promise((resolve, reject) => {
-          if (this.timeFormats.length) {
-            resolve(this.timeFormats)
-          } else {
-            http
-              .get('/api/v1/time/formats')
-              .then((response) => {
-                this.timeFormats = response.data.time_formats
-                resolve(response)
-              })
-              .catch((err) => {
-                handleError(err)
-                reject(err)
-              })
-          }
-        })
-      },
-
-      fetchTimeZones() {
-        return new Promise((resolve, reject) => {
-          if (this.timeZones.length) {
-            resolve(this.timeZones)
-          } else {
-            http
-              .get('/api/v1/timezones')
-              .then((response) => {
-                this.timeZones = response.data.time_zones
-                resolve(response)
-              })
-              .catch((err) => {
-                handleError(err)
-                reject(err)
-              })
-          }
-        })
-      },
-
-      fetchCountries() {
-        return new Promise((resolve, reject) => {
-          if (this.countries.length) {
-            resolve(this.countries)
-          } else {
-            http
-              .get('/api/v1/countries')
-              .then((response) => {
-                this.countries = response.data.data
-                resolve(response)
-              })
-              .catch((err) => {
-                handleError(err)
-                reject(err)
-              })
-          }
-        })
-      },
-
-      fetchPlaceholders(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/number-placeholders`, { params })
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      setSidebarVisibility(val) {
-        this.isSidebarOpen = val
-      },
-
-      toggleSidebarCollapse() {
-        this.isSidebarCollapsed = !this.isSidebarCollapsed
-        window.Ls.set('sidebarCollapsed', this.isSidebarCollapsed ? 'true' : 'false')
-      },
-
-      setIsAppLoaded(isAppLoaded) {
-        this.isAppLoaded = isAppLoaded
-      },
-
-      updateGlobalSettings({ data, message }) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/settings', data)
-            .then((response) => {
-              Object.assign(this.globalSettings, data.settings)
-
-              if (message) {
-                const notificationStore = useNotificationStore()
-
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t(message),
-                })
-              }
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/installation.js b/resources/scripts/admin/stores/installation.js
deleted file mode 100644
index eca15672..00000000
--- a/resources/scripts/admin/stores/installation.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useCompanyStore } from './company'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useInstallationStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-  const companyStore = useCompanyStore()
-
-  return defineStoreFunc('installation', {
-    state: () => ({
-      currentDataBaseData: {
-        database_connection: 'mysql',
-        database_hostname: '127.0.0.1',
-        database_port: '3306',
-        database_name: null,
-        database_username: null,
-        database_password: null,
-        database_overwrite: false,
-        app_url: window.location.origin,
-        app_locale: null
-      },
-    }),
-
-    actions: {
-      fetchInstallationLanguages() {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/installation/languages`)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchInstallationRequirements() {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/installation/requirements`)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchInstallationStep() {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/installation/wizard-step`)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addInstallationStep(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/installation/wizard-step`, data)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addInstallationLanguage(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/installation/wizard-language`, data)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchInstallationPermissions() {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/installation/permissions`)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchInstallationDatabase(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/installation/database/config`, { params })
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addInstallationDatabase(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/installation/database/config`, data)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addInstallationFinish() {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/installation/finish`)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      setInstallationDomain(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/installation/set-domain`, data)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      installationLogin() {
-        return new Promise((resolve, reject) => {
-          http.get('/sanctum/csrf-cookie').then((response) => {
-            if (response) {
-              http
-                .post('/api/v1/installation/login')
-                .then((response) => {
-                  companyStore.setSelectedCompany(response.data.company)
-                  resolve(response)
-                })
-                .catch((err) => {
-                  handleError(err)
-                  reject(err)
-                })
-            }
-          })
-        })
-      },
-
-      checkAuthenticated() {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/auth/check`)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/invitation.js b/resources/scripts/admin/stores/invitation.js
deleted file mode 100644
index da551120..00000000
--- a/resources/scripts/admin/stores/invitation.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import http from '@/scripts/http'
-
-export const useInvitationStore = defineStore('invitation', {
-  state: () => ({
-    pendingInvitations: [],
-  }),
-
-  actions: {
-    setPendingInvitations(invitations) {
-      this.pendingInvitations = invitations
-    },
-
-    async fetchPending() {
-      const response = await http.get('/api/v1/invitations/pending')
-      this.pendingInvitations = response.data.invitations
-      return response
-    },
-
-    async accept(token) {
-      const notificationStore = useNotificationStore()
-      const globalStore = useGlobalStore()
-
-      const response = await http.post(`/api/v1/invitations/${token}/accept`)
-
-      notificationStore.showNotification({
-        type: 'success',
-        message: 'Invitation accepted!',
-      })
-
-      // Refresh bootstrap to get updated companies list
-      await globalStore.bootstrap()
-
-      return response
-    },
-
-    async decline(token) {
-      const notificationStore = useNotificationStore()
-
-      const response = await http.post(`/api/v1/invitations/${token}/decline`)
-
-      this.pendingInvitations = this.pendingInvitations.filter(
-        (inv) => inv.token !== token
-      )
-
-      notificationStore.showNotification({
-        type: 'success',
-        message: 'Invitation declined.',
-      })
-
-      return response
-    },
-  },
-})
diff --git a/resources/scripts/admin/stores/invoice.js b/resources/scripts/admin/stores/invoice.js
deleted file mode 100644
index a3b3a33e..00000000
--- a/resources/scripts/admin/stores/invoice.js
+++ /dev/null
@@ -1,579 +0,0 @@
-import http from '@/scripts/http'
-import moment from 'moment'
-import Guid from 'guid'
-import _ from 'lodash'
-import { defineStore } from 'pinia'
-import { useRoute } from 'vue-router'
-import { handleError } from '@/scripts/helpers/error-handling'
-import invoiceItemStub from '../stub/invoice-item'
-import taxStub from '../stub/tax'
-import invoiceStub from '../stub/invoice'
-
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useCustomerStore } from './customer'
-import { useTaxTypeStore } from './tax-type'
-import { useCompanyStore } from './company'
-import { useItemStore } from './item'
-import { useUserStore } from './user'
-import { useNotesStore } from './note'
-
-export const useInvoiceStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-  const notificationStore = useNotificationStore()
-
-  return defineStoreFunc('invoice', {
-    state: () => ({
-      templates: [],
-      invoices: [],
-      selectedInvoices: [],
-      selectAllField: false,
-      invoiceTotalCount: 0,
-      showExchangeRate: false,
-      isFetchingInitialSettings: false,
-      isFetchingInvoice: false,
-
-      newInvoice: {
-        ...invoiceStub(),
-      },
-    }),
-
-    getters: {
-      getInvoice: (state) => (id) => {
-        let invId = parseInt(id)
-        return state.invoices.find((invoice) => invoice.id === invId)
-      },
-
-      getSubTotal() {
-        return this.newInvoice.items.reduce(function (a, b) {
-          return a + b['total']
-        }, 0)
-      },
-
-      getNetTotal() {
-        return this.getSubtotalWithDiscount - this.getTotalTax
-      },
-
-      getTotalSimpleTax() {
-        return _.sumBy(this.newInvoice.taxes, function (tax) {
-          if (!tax.compound_tax) {
-            return tax.amount
-          }
-          return 0
-        })
-      },
-
-      getTotalCompoundTax() {
-        return _.sumBy(this.newInvoice.taxes, function (tax) {
-          if (tax.compound_tax) {
-            return tax.amount
-          }
-          return 0
-        })
-      },
-
-      getTotalTax() {
-        if (
-          this.newInvoice.tax_per_item === 'NO' ||
-          this.newInvoice.tax_per_item === null
-        ) {
-          return this.getTotalSimpleTax + this.getTotalCompoundTax
-        }
-        return _.sumBy(this.newInvoice.items, function (tax) {
-          return tax.tax
-        })
-      },
-
-      getSubtotalWithDiscount() {
-        return this.getSubTotal - this.newInvoice.discount_val
-      },
-
-      getTotal() {
-        if (this.newInvoice.tax_included) {
-          return this.getSubtotalWithDiscount
-        }
-        return this.getSubtotalWithDiscount + this.getTotalTax
-      },
-
-      isEdit: (state) => (state.newInvoice.id ? true : false),
-    },
-
-    actions: {
-      resetCurrentInvoice() {
-        this.newInvoice = {
-          ...invoiceStub(),
-        }
-      },
-
-      previewInvoice(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/invoices/${params.id}/send/preview`, { params })
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchInvoices(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/invoices`, { params })
-            .then((response) => {
-              this.invoices = response.data.data
-              this.invoiceTotalCount = response.data.meta.invoice_total_count
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchInvoice(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/invoices/${id}`)
-            .then((response) => {
-              this.setInvoiceData(response.data.data)
-              this.setCustomerAddresses(this.newInvoice.customer)
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      setInvoiceData(invoice) {
-        Object.assign(this.newInvoice, invoice)
-
-        if (this.newInvoice.tax_per_item === 'YES') {
-          this.newInvoice.items.forEach((_i) => {
-            if (_i.taxes && !_i.taxes.length)
-              _i.taxes.push({ ...taxStub, id: Guid.raw() })
-          })
-        }
-
-        if (this.newInvoice.discount_per_item === 'YES') {
-          this.newInvoice.items.forEach((_i, index) => {
-            if (_i.discount_type === 'fixed')
-              this.newInvoice.items[index].discount = _i.discount / 100
-          })
-        } else {
-          if (this.newInvoice.discount_type === 'fixed')
-            this.newInvoice.discount = this.newInvoice.discount / 100
-        }
-      },
-
-      setCustomerAddresses(customer) {
-        const customer_business = customer.customer_business
-
-        if (customer_business?.billing_address)
-          this.newInvoice.customer.billing_address =
-            customer_business.billing_address
-
-        if (customer_business?.shipping_address)
-          this.newInvoice.customer.shipping_address =
-            customer_business.shipping_address
-      },
-
-      addSalesTaxUs() {
-        const taxTypeStore = useTaxTypeStore()
-        let salesTax = { ...taxStub }
-        let found = this.newInvoice.taxes.find(
-          (_t) => _t.name === 'Sales Tax' && _t.type === 'MODULE',
-        )
-        if (found) {
-          for (const key in found) {
-            if (Object.prototype.hasOwnProperty.call(salesTax, key)) {
-              salesTax[key] = found[key]
-            }
-          }
-          salesTax.id = found.tax_type_id
-          taxTypeStore.taxTypes.push(salesTax)
-        }
-      },
-
-      sendInvoice(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/invoices/${data.id}/send`, data)
-            .then((response) => {
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('invoices.invoice_sent_successfully'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addInvoice(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/invoices', data)
-            .then((response) => {
-              this.invoices = [...this.invoices, response.data.invoice]
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('invoices.created_message'),
-              })
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteInvoice(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/invoices/delete`, id)
-            .then((response) => {
-              let index = this.invoices.findIndex(
-                (invoice) => invoice.id === id,
-              )
-              this.invoices.splice(index, 1)
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('invoices.deleted_message', 1),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteMultipleInvoices(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/invoices/delete`, { ids: this.selectedInvoices })
-            .then((response) => {
-              this.selectedInvoices.forEach((invoice) => {
-                let index = this.invoices.findIndex(
-                  (_inv) => _inv.id === invoice.id,
-                )
-                this.invoices.splice(index, 1)
-              })
-              this.selectedInvoices = []
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('invoices.deleted_message', 2),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateInvoice(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/invoices/${data.id}`, data)
-            .then((response) => {
-              let pos = this.invoices.findIndex(
-                (invoice) => invoice.id === response.data.data.id,
-              )
-              this.invoices[pos] = response.data.data
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('invoices.updated_message'),
-              })
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      cloneInvoice(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/invoices/${data.id}/clone`, data)
-            .then((response) => {
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('invoices.cloned_successfully'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      markAsSent(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/invoices/${data.id}/status`, data)
-            .then((response) => {
-              let pos = this.invoices.findIndex(
-                (invoices) => invoices.id === data.id,
-              )
-
-              if (this.invoices[pos]) {
-                this.invoices[pos].status = 'SENT'
-              }
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('invoices.mark_as_sent_successfully'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      getNextNumber(params, setState = false) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/next-number?key=invoice`, { params })
-            .then((response) => {
-              if (setState) {
-                this.newInvoice.invoice_number = response.data.nextNumber
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      searchInvoice(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/invoices?${data}`)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      selectInvoice(data) {
-        this.selectedInvoices = data
-        if (this.selectedInvoices.length === this.invoices.length) {
-          this.selectAllField = true
-        } else {
-          this.selectAllField = false
-        }
-      },
-
-      selectAllInvoices() {
-        if (this.selectedInvoices.length === this.invoices.length) {
-          this.selectedInvoices = []
-          this.selectAllField = false
-        } else {
-          let allInvoiceIds = this.invoices.map((invoice) => invoice.id)
-          this.selectedInvoices = allInvoiceIds
-          this.selectAllField = true
-        }
-      },
-
-      selectCustomer(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/customers/${id}`)
-            .then((response) => {
-              this.newInvoice.customer = response.data.data
-              this.newInvoice.customer_id = response.data.data.id
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchInvoiceTemplates(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/invoices/templates`, { params })
-            .then((response) => {
-              this.templates = response.data.invoiceTemplates
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      selectNote(data) {
-        this.newInvoice.selectedNote = null
-        this.newInvoice.selectedNote = data
-      },
-
-      setTemplate(data) {
-        this.newInvoice.template_name = data
-      },
-
-      resetSelectedCustomer() {
-        this.newInvoice.customer = null
-        this.newInvoice.customer_id = null
-      },
-
-      addItem() {
-        this.newInvoice.items.push({
-          ...invoiceItemStub,
-          id: Guid.raw(),
-          taxes: [{ ...taxStub, id: Guid.raw() }],
-        })
-      },
-
-      updateItem(data) {
-        Object.assign(this.newInvoice.items[data.index], { ...data })
-      },
-
-      removeItem(index) {
-        this.newInvoice.items.splice(index, 1)
-      },
-
-      deselectItem(index) {
-        this.newInvoice.items[index] = {
-          ...invoiceItemStub,
-          id: Guid.raw(),
-          taxes: [{ ...taxStub, id: Guid.raw() }],
-        }
-      },
-
-      resetSelectedNote() {
-        this.newInvoice.selectedNote = null
-      },
-
-      // On Load actions
-      async fetchInvoiceInitialSettings(isEdit) {
-        const companyStore = useCompanyStore()
-        const customerStore = useCustomerStore()
-        const itemStore = useItemStore()
-        const taxTypeStore = useTaxTypeStore()
-        const route = useRoute()
-        const userStore = useUserStore()
-        const notesStore = useNotesStore()
-
-        this.isFetchingInitialSettings = true
-
-        this.newInvoice.selectedCurrency = companyStore.selectedCompanyCurrency
-
-        if (route.query.customer) {
-          let response = await customerStore.fetchCustomer(route.query.customer)
-          this.newInvoice.customer = response.data.data
-          this.newInvoice.customer_id = response.data.data.id
-        }
-
-        let editActions = []
-
-        if (!isEdit) {
-          await notesStore.fetchNotes()
-          this.newInvoice.notes =
-            notesStore.getDefaultNoteForType('Invoice')?.notes
-          this.newInvoice.tax_per_item =
-            companyStore.selectedCompanySettings.tax_per_item
-          this.newInvoice.sales_tax_type =
-            companyStore.selectedCompanySettings.sales_tax_type
-          this.newInvoice.sales_tax_address_type =
-            companyStore.selectedCompanySettings.sales_tax_address_type
-          this.newInvoice.discount_per_item =
-            companyStore.selectedCompanySettings.discount_per_item
-
-          let dateFormat = 'YYYY-MM-DD'
-          if (companyStore.selectedCompanySettings.invoice_use_time === 'YES') {
-            dateFormat += ' HH:mm'
-          }
-
-          this.newInvoice.invoice_date = moment().format(dateFormat)
-          if (
-            companyStore.selectedCompanySettings
-              .invoice_set_due_date_automatically === 'YES'
-          ) {
-            this.newInvoice.due_date = moment()
-              .add(
-                companyStore.selectedCompanySettings.invoice_due_date_days,
-                'days',
-              )
-              .format('YYYY-MM-DD')
-          }
-        } else {
-          editActions = [this.fetchInvoice(route.params.id)]
-        }
-
-        Promise.all([
-          itemStore.fetchItems({
-            filter: {},
-            orderByField: '',
-            orderBy: '',
-          }),
-          this.resetSelectedNote(),
-          this.fetchInvoiceTemplates(),
-          this.getNextNumber(),
-          taxTypeStore.fetchTaxTypes({ limit: 'all' }),
-          ...editActions,
-        ])
-          .then(async ([res1, res2, res3, res4, res5, res6]) => {
-            if (!isEdit) {
-              if (res4.data) {
-                this.newInvoice.invoice_number = res4.data.nextNumber
-              }
-
-              if (res3.data) {
-                this.setTemplate(this.templates[0].name)
-                this.newInvoice.template_name = userStore.currentUserSettings
-                  .default_invoice_template
-                  ? userStore.currentUserSettings.default_invoice_template
-                  : this.newInvoice.template_name
-              }
-            }
-            if (isEdit) {
-              this.addSalesTaxUs()
-            }
-
-            this.isFetchingInitialSettings = false
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/item.js b/resources/scripts/admin/stores/item.js
deleted file mode 100644
index d004489e..00000000
--- a/resources/scripts/admin/stores/item.js
+++ /dev/null
@@ -1,335 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useItemStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('item', {
-    state: () => ({
-      items: [],
-      totalItems: 0,
-      selectAllField: false,
-      selectedItems: [],
-      itemUnits: [],
-      currentItemUnit: {
-        id: null,
-        name: '',
-      },
-      currentItem: {
-        name: '',
-        description: '',
-        price: 0,
-        unit_id: '',
-        unit: null,
-        taxes: [],
-        tax_per_item: false,
-      },
-    }),
-    getters: {
-      isItemUnitEdit: (state) => (state.currentItemUnit.id ? true : false),
-    },
-    actions: {
-      resetCurrentItem() {
-        this.currentItem = {
-          name: '',
-          description: '',
-          price: 0,
-          unit_id: '',
-          unit: null,
-          taxes: [],
-        }
-      },
-      fetchItems(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/items`, { params })
-            .then((response) => {
-              this.items = response.data.data
-              this.totalItems = response.data.meta.item_total_count
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchItem(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/items/${id}`)
-            .then((response) => {
-              if (response.data) {
-                Object.assign(this.currentItem, response.data.data)
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addItem(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/items', data)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-
-              this.items.push(response.data.data)
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('items.created_message'),
-              })
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateItem(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/items/${data.id}`, data)
-            .then((response) => {
-              if (response.data) {
-                const notificationStore = useNotificationStore()
-
-                let pos = this.items.findIndex(
-                  (item) => item.id === response.data.data.id
-                )
-
-                this.items[pos] = data.item
-
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('items.updated_message'),
-                })
-              }
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteItem(id) {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/items/delete`, id)
-            .then((response) => {
-              let index = this.items.findIndex((item) => item.id === id)
-              this.items.splice(index, 1)
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('items.deleted_message', 1),
-              })
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteMultipleItems() {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/items/delete`, { ids: this.selectedItems })
-            .then((response) => {
-              this.selectedItems.forEach((item) => {
-                let index = this.items.findIndex(
-                  (_item) => _item.id === item.id
-                )
-                this.items.splice(index, 1)
-              })
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('items.deleted_message', 2),
-              })
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      selectItem(data) {
-        this.selectedItems = data
-        if (this.selectedItems.length === this.items.length) {
-          this.selectAllField = true
-        } else {
-          this.selectAllField = false
-        }
-      },
-
-      selectAllItems(data) {
-        if (this.selectedItems.length === this.items.length) {
-          this.selectedItems = []
-          this.selectAllField = false
-        } else {
-          let allItemIds = this.items.map((item) => item.id)
-          this.selectedItems = allItemIds
-          this.selectAllField = true
-        }
-      },
-
-      addItemUnit(data) {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/units`, data)
-            .then((response) => {
-              this.itemUnits.push(response.data.data)
-
-              if (response.data.data) {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t(
-                    'settings.customization.items.item_unit_added'
-                  ),
-                })
-              }
-
-              if (response.data.errors) {
-                notificationStore.showNotification({
-                  type: 'error',
-                  message: err.response.data.errors[0],
-                })
-              }
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateItemUnit(data) {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/units/${data.id}`, data)
-            .then((response) => {
-              let pos = this.itemUnits.findIndex(
-                (unit) => unit.id === response.data.data.id
-              )
-
-              this.itemUnits[pos] = data
-
-              if (response.data.data) {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t(
-                    'settings.customization.items.item_unit_updated'
-                  ),
-                })
-              }
-
-              if (response.data.errors) {
-                notificationStore.showNotification({
-                  type: 'error',
-                  message: err.response.data.errors[0],
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchItemUnits(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/units`, { params })
-            .then((response) => {
-              this.itemUnits = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchItemUnit(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/units/${id}`)
-            .then((response) => {
-              this.currentItemUnit = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteItemUnit(id) {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .delete(`/api/v1/units/${id}`)
-            .then((response) => {
-              if (!response.data.error) {
-                let index = this.itemUnits.findIndex((unit) => unit.id === id)
-                this.itemUnits.splice(index, 1)
-              }
-
-              if (response.data.success) {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t(
-                    'settings.customization.items.deleted_message'
-                  ),
-                })
-              }
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/mail-driver.js b/resources/scripts/admin/stores/mail-driver.js
deleted file mode 100644
index 02115579..00000000
--- a/resources/scripts/admin/stores/mail-driver.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useMailDriverStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('mail-driver', {
-    state: () => ({
-      mailConfigData: null,
-      mail_driver: 'smtp',
-      mail_drivers: [],
-
-      basicMailConfig: {
-        mail_driver: '',
-        mail_host: '',
-        from_mail: '',
-        from_name: '',
-      },
-
-      mailgunConfig: {
-        mail_driver: '',
-        mail_mailgun_domain: '',
-        mail_mailgun_secret: '',
-        mail_mailgun_endpoint: '',
-        from_mail: '',
-        from_name: '',
-      },
-
-      sesConfig: {
-        mail_driver: '',
-        mail_host: '',
-        mail_port: null,
-        mail_ses_key: '',
-        mail_ses_secret: '',
-        mail_ses_region: '',
-        from_mail: '',
-        from_name: '',
-      },
-
-      smtpConfig: {
-        mail_driver: '',
-        mail_host: '',
-        mail_port: null,
-        mail_username: '',
-        mail_password: '',
-        mail_encryption: '',
-        from_mail: '',
-        from_name: '',
-      },
-    }),
-
-    actions: {
-      fetchMailDrivers() {
-        return new Promise((resolve, reject) => {
-          http
-            .get('/api/v1/mail/drivers')
-            .then((response) => {
-              if (response.data) {
-                this.mail_drivers = response.data
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchMailConfig() {
-        return new Promise((resolve, reject) => {
-          http
-            .get('/api/v1/mail/config')
-            .then((response) => {
-              if (response.data) {
-                this.mailConfigData = response.data
-                this.mail_driver = response.data.mail_driver
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateMailConfig(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/mail/config', data)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              if (response.data.success) {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('wizard.success.' + response.data.success),
-                })
-              } else {
-                notificationStore.showNotification({
-                  type: 'error',
-                  message: global.t('wizard.errors.' + response.data.error),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      sendTestMail(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/mail/test', data)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              if (response.data.success) {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('general.send_mail_successfully'),
-                })
-              } else {
-                notificationStore.showNotification({
-                  type: 'error',
-                  message: global.t('validation.something_went_wrong'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/members.js b/resources/scripts/admin/stores/members.js
deleted file mode 100644
index d223175a..00000000
--- a/resources/scripts/admin/stores/members.js
+++ /dev/null
@@ -1,289 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useMembersStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('members', {
-    state: () => ({
-      roles: [],
-      users: [],
-      totalUsers: 0,
-      pendingInvitations: [],
-      currentUser: null,
-      selectAllField: false,
-      selectedUsers: [],
-      customerList: [],
-      userList: [],
-
-      userData: {
-        name: '',
-        email: '',
-        password: null,
-        phone: null,
-        companies: [],
-      },
-    }),
-
-    actions: {
-      resetUserData() {
-        this.userData = {
-          name: '',
-          email: '',
-          password: null,
-          phone: null,
-          role: null,
-          companies: [],
-        }
-      },
-
-      fetchUsers(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/members`, { params })
-            .then((response) => {
-              this.users = response.data.data
-              this.totalUsers = response.data.meta.total
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchUser(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/members/${id}`)
-            .then((response) => {
-              this.userData = response.data.data
-              if (this.userData?.companies?.length) {
-                this.userData.companies.forEach((c, i) => {
-                  this.userData.roles.forEach((r) => {
-                    if (r.scope === c.id)
-                      this.userData.companies[i].role = r.name
-                  })
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              console.log(err)
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchRoles(state) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/roles`)
-            .then((response) => {
-              this.roles = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addUser(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/members', data)
-            .then((response) => {
-              this.users.push(response.data)
-              const notificationStore = useNotificationStore()
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('members.created_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateUser(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/members/${data.id}`, data)
-            .then((response) => {
-              if (response) {
-                let pos = this.users.findIndex(
-                  (user) => user.id === response.data.data.id
-                )
-                this.users[pos] = response.data.data
-              }
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('members.updated_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteUser(id) {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/members/delete`, { users: id.ids })
-            .then((response) => {
-              let index = this.users.findIndex((user) => user.id === id)
-              this.users.splice(index, 1)
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('members.deleted_message', 1),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteMultipleUsers() {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/members/delete`, { users: this.selectedUsers })
-            .then((response) => {
-              this.selectedUsers.forEach((user) => {
-                let index = this.users.findIndex(
-                  (_user) => _user.id === user.id
-                )
-                this.users.splice(index, 1)
-              })
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('members.deleted_message', 2),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      searchUsers(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/search`, { params })
-            .then((response) => {
-              this.userList = response.data.users.data
-              this.customerList = response.data.customers.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      setSelectAllState(data) {
-        this.selectAllField = data
-      },
-
-      selectUser(data) {
-        this.selectedUsers = data
-        if (this.selectedUsers.length === this.users.length) {
-          this.selectAllField = true
-        } else {
-          this.selectAllField = false
-        }
-      },
-
-      selectAllUsers() {
-        if (this.selectedUsers.length === this.users.length) {
-          this.selectedUsers = []
-          this.selectAllField = false
-        } else {
-          let allUserIds = this.users.map((user) => user.id)
-          this.selectedUsers = allUserIds
-          this.selectAllField = true
-        }
-      },
-
-      fetchPendingInvitations() {
-        return new Promise((resolve, reject) => {
-          http
-            .get('/api/v1/company-invitations')
-            .then((response) => {
-              this.pendingInvitations = response.data.invitations
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      inviteMember(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/company-invitations', data)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('members.invited_message'),
-              })
-              this.fetchPendingInvitations()
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      cancelInvitation(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .delete(`/api/v1/company-invitations/${id}`)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('members.invitation_cancelled'),
-              })
-              this.pendingInvitations = this.pendingInvitations.filter(
-                (inv) => inv.id !== id
-              )
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/module.js b/resources/scripts/admin/stores/module.js
deleted file mode 100644
index 736eff9a..00000000
--- a/resources/scripts/admin/stores/module.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { handleError } from '@/scripts/helpers/error-handling'
-import { useNotificationStore } from '@/scripts/stores/notification'
-
-export const useModuleStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('modules', {
-    state: () => ({
-      currentModule: {},
-      modules: [],
-      apiToken: null,
-      currentUser: {
-        api_token: null,
-      },
-      enableModules: []
-    }),
-
-    getters: {
-      salesTaxUSEnabled: (state) => (state.enableModules.includes('SalesTaxUS')),
-    },
-
-    actions: {
-      fetchModules(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/modules`)
-            .then((response) => {
-              this.modules = response.data.data
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchModule(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/modules/${id}`)
-            .then((response) => {
-              if (response.data.error === 'invalid_token') {
-                this.currentModule = {},
-                this.modules = [],
-                this.apiToken = null,
-                this.currentUser.api_token = null,
-                window.router.push('/admin/modules')
-              } else { 
-                this.currentModule = response.data
-              }
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      checkApiToken(token) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/modules/check?api_token=${token}`)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              if (response.data.error === 'invalid_token') {
-                notificationStore.showNotification({
-                  type: 'error',
-                  message: global.t('modules.invalid_api_token'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      disableModule(module) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/modules/${module}/disable`)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              if (response.data.success) {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('modules.module_disabled'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      enableModule(module) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/modules/${module}/enable`)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              if (response.data.success) {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('modules.module_enabled'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/note.js b/resources/scripts/admin/stores/note.js
deleted file mode 100644
index 8520f683..00000000
--- a/resources/scripts/admin/stores/note.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useNotesStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('notes', {
-    state: () => ({
-      notes: [],
-      currentNote: {
-        id: null,
-        type: '',
-        is_default: false,
-        name: '',
-        notes: '',
-      },
-    }),
-
-    getters: {
-      isEdit: (state) => (state.currentNote.id ? true : false),
-    },
-
-    actions: {
-      getDefaultNoteForType(type) {
-        return this.notes.find((note) => note.type === type && note.is_default)
-      },
-
-      resetCurrentNote() {
-        this.currentNote = {
-          type: '',
-          is_default: false,
-          name: '',
-          notes: '',
-        }
-      },
-
-      fetchNotes(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/notes`, { params })
-            .then((response) => {
-              this.notes = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchNote(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/notes/${id}`)
-            .then((response) => {
-              this.currentNote = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addNote(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/notes', data)
-            .then((response) => {
-              this.notes.push(response.data)
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateNote(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/notes/${data.id}`, data)
-            .then((response) => {
-              if (response.data) {
-                let pos = this.notes.findIndex(
-                  (notes) => notes.id === response.data.data.id
-                )
-                this.notes[pos] = data.notes
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteNote(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .delete(`/api/v1/notes/${id}`)
-            .then((response) => {
-              let index = this.notes.findIndex((note) => note.id === id)
-              this.notes.splice(index, 1)
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/payment.js b/resources/scripts/admin/stores/payment.js
deleted file mode 100644
index 413e7ff7..00000000
--- a/resources/scripts/admin/stores/payment.js
+++ /dev/null
@@ -1,435 +0,0 @@
-import http from '@/scripts/http'
-import moment from 'moment'
-import { defineStore } from 'pinia'
-import { useRoute } from 'vue-router'
-import { useCompanyStore } from './company'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import paymentStub from '../stub/payment'
-import { handleError } from '@/scripts/helpers/error-handling'
-import { useNotesStore } from './note'
-
-export const usePaymentStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('payment', {
-    state: () => ({
-      payments: [],
-      paymentTotalCount: 0,
-
-      selectAllField: false,
-      selectedPayments: [],
-      selectedNote: null,
-      showExchangeRate: false,
-      drivers: [],
-      providers: [],
-
-      paymentProviders: {
-        id: null,
-        name: '',
-        driver: '',
-        active: false,
-        settings: {
-          key: '',
-          secret: '',
-        },
-      },
-
-      currentPayment: {
-        ...paymentStub,
-      },
-
-      paymentModes: [],
-      currentPaymentMode: {
-        id: '',
-        name: null,
-      },
-
-      isFetchingInitialData: false,
-    }),
-
-    getters: {
-      isEdit: (state) => (state.paymentProviders.id ? true : false),
-    },
-
-    actions: {
-      fetchPaymentInitialData(isEdit) {
-        const companyStore = useCompanyStore()
-        const notesStore = useNotesStore()
-        const route = useRoute()
-
-        this.isFetchingInitialData = true
-
-        let actions = []
-        if (isEdit) {
-          actions = [this.fetchPayment(route.params.id)]
-        }
-        Promise.all([
-          this.fetchPaymentModes({ limit: 'all' }),
-          this.getNextNumber(),
-          ...actions,
-        ])
-          .then(async ([res1, res2, res3]) => {
-            if (isEdit) {
-              if (res3.data.data.invoice) {
-                this.currentPayment.maxPayableAmount = parseInt(
-                  res3.data.data.invoice.due_amount
-                )
-              }
-            }
-
-            // On Create
-            else if (!isEdit && res2.data) {
-              await notesStore.fetchNotes()
-              this.currentPayment.notes = notesStore.getDefaultNoteForType('Payment')?.notes
-              this.currentPayment.payment_date = moment().format('YYYY-MM-DD')
-              this.currentPayment.payment_number = res2.data.nextNumber
-              this.currentPayment.currency =
-                companyStore.selectedCompanyCurrency
-            }
-
-            this.isFetchingInitialData = false
-          })
-          .catch((err) => {
-            handleError(err)
-          })
-      },
-
-      fetchPayments(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/payments`, { params })
-            .then((response) => {
-              this.payments = response.data.data
-              this.paymentTotalCount = response.data.meta.payment_total_count
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchPayment(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/payments/${id}`)
-            .then((response) => {
-              Object.assign(this.currentPayment, response.data.data)
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addPayment(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/payments', data)
-            .then((response) => {
-              this.payments.push(response.data)
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('payments.created_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updatePayment(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/payments/${data.id}`, data)
-            .then((response) => {
-              if (response.data) {
-                let pos = this.payments.findIndex(
-                  (payment) => payment.id === response.data.data.id
-                )
-
-                this.payments[pos] = data.payment
-
-                const notificationStore = useNotificationStore()
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('payments.updated_message'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deletePayment(id) {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/payments/delete`, id)
-            .then((response) => {
-              let index = this.payments.findIndex(
-                (payment) => payment.id === id
-              )
-              this.payments.splice(index, 1)
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('payments.deleted_message', 1),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteMultiplePayments() {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/payments/delete`, { ids: this.selectedPayments })
-            .then((response) => {
-              this.selectedPayments.forEach((payment) => {
-                let index = this.payments.findIndex(
-                  (_payment) => _payment.id === payment.id
-                )
-                this.payments.splice(index, 1)
-              })
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('payments.deleted_message', 2),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      setSelectAllState(data) {
-        this.selectAllField = data
-      },
-
-      selectPayment(data) {
-        this.selectedPayments = data
-        if (this.selectedPayments.length === this.payments.length) {
-          this.selectAllField = true
-        } else {
-          this.selectAllField = false
-        }
-      },
-
-      selectAllPayments() {
-        if (this.selectedPayments.length === this.payments.length) {
-          this.selectedPayments = []
-          this.selectAllField = false
-        } else {
-          let allPaymentIds = this.payments.map((payment) => payment.id)
-          this.selectedPayments = allPaymentIds
-          this.selectAllField = true
-        }
-      },
-
-      selectNote(data) {
-        this.selectedNote = null
-        this.selectedNote = data
-      },
-
-      resetSelectedNote(data) {
-        this.selectedNote = null
-      },
-
-      searchPayment(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/payments`, { params })
-            .then((response) => {
-              this.payments = response.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      previewPayment(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/payments/${params.id}/send/preview`, { params })
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      sendEmail(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/payments/${data.id}/send`, data)
-            .then((response) => {
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('payments.send_payment_successfully'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      getNextNumber(params, setState = false) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/next-number?key=payment`, { params })
-            .then((response) => {
-              if (setState) {
-                this.currentPayment.payment_number = response.data.nextNumber
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      resetCurrentPayment() {
-        this.currentPayment = {
-          ...paymentStub,
-        }
-      },
-
-      fetchPaymentModes(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/payment-methods`, { params })
-            .then((response) => {
-              this.paymentModes = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchPaymentMode(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/payment-methods/${id}`)
-            .then((response) => {
-              this.currentPaymentMode = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addPaymentMode(data) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/payment-methods`, data)
-            .then((response) => {
-              this.paymentModes.push(response.data.data)
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.payment_modes.payment_mode_added'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updatePaymentMode(data) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/payment-methods/${data.id}`, data)
-            .then((response) => {
-              if (response.data) {
-                let pos = this.paymentModes.findIndex(
-                  (paymentMode) => paymentMode.id === response.data.data.id
-                )
-                this.paymentModes[pos] = data.paymentModes
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t(
-                    'settings.payment_modes.payment_mode_updated'
-                  ),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deletePaymentMode(id) {
-        const notificationStore = useNotificationStore()
-
-        return new Promise((resolve, reject) => {
-          http
-            .delete(`/api/v1/payment-methods/${id}`)
-            .then((response) => {
-              let index = this.paymentModes.findIndex(
-                (paymentMode) => paymentMode.id === id
-              )
-              this.paymentModes.splice(index, 1)
-              if (response.data.success) {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('settings.payment_modes.deleted_message'),
-                })
-              }
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/pdf-driver.js b/resources/scripts/admin/stores/pdf-driver.js
deleted file mode 100644
index 1e32c941..00000000
--- a/resources/scripts/admin/stores/pdf-driver.js
+++ /dev/null
@@ -1,68 +0,0 @@
-const { defineStore } = window.pinia
-import { handleError } from '@/scripts/helpers/error-handling'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import http from '@/scripts/http'
-
-export const usePDFDriverStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('pdf-driver', {
-    state: () => ({
-      pdfDriverConfig: null,
-      pdf_driver: 'dompdf',
-      pdf_drivers: [],
-
-      dompdf: {
-        pdf_driver: '',
-      },
-      gotenberg: {
-        pdf_driver: '',
-        gotenberg_host: '',
-        gotenberg_papersize: ''
-      }
-    }),
-
-    actions: {
-      async fetchDrivers() {
-        try {
-          const response = await http.get('/api/v1/pdf/drivers')
-          this.pdf_drivers = response.data
-        } catch (err) {
-          handleError(err)
-          throw err
-        }
-      },
-      async fetchConfig() {
-        try {
-          const response = await http.get('/api/v1/pdf/config')
-          this.pdfDriverConfig = response.data
-          this.pdf_driver = response.data.pdf_driver
-        } catch (err) {
-          handleError(err)
-          throw err
-        }
-      },
-      async updateConfig(data) {
-        try {
-          const response = await http.post('/api/v1/pdf/config', data)
-          const notificationStore = useNotificationStore()
-          if (response.data.success) {
-            notificationStore.showNotification({
-              type: 'success',
-              message: global.t('settings.pdf.' + response.data.success),
-            })
-          } else {
-            notificationStore.showNotification({
-              type: 'error',
-              message: global.t('settings.pdf.' + response.data.error),
-            })
-          }
-        } catch (err) {
-          handleError(err)
-          throw err
-        }
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/recurring-invoice.js b/resources/scripts/admin/stores/recurring-invoice.js
deleted file mode 100644
index 801b8a18..00000000
--- a/resources/scripts/admin/stores/recurring-invoice.js
+++ /dev/null
@@ -1,514 +0,0 @@
-import { defineStore } from 'pinia'
-import http from '@/scripts/http'
-import recurringInvoiceStub from '@/scripts/admin/stub/recurring-invoice'
-import recurringInvoiceItemStub from '@/scripts/admin/stub/recurring-invoice-item'
-import TaxStub from '../stub/tax'
-import { useRoute } from 'vue-router'
-import { useCompanyStore } from './company'
-import { useItemStore } from './item'
-import { useTaxTypeStore } from './tax-type'
-import { useCustomerStore } from './customer'
-import Guid from 'guid'
-import { handleError } from '@/scripts/helpers/error-handling'
-import moment from 'moment'
-import _ from 'lodash'
-import { useInvoiceStore } from './invoice'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useNotesStore } from './note'
-
-export const useRecurringInvoiceStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('recurring-invoice', {
-    state: () => ({
-      templates: [],
-      recurringInvoices: [],
-      selectedRecurringInvoices: [],
-      totalRecurringInvoices: 0,
-      isFetchingInitialSettings: false,
-      isFetchingViewData: false,
-      showExchangeRate: false,
-      selectAllField: false,
-      newRecurringInvoice: {
-        ...recurringInvoiceStub(),
-      },
-
-      frequencies: [
-        {
-          label: global.t('recurring_invoices.frequency.every_minute'),
-          value: '* * * * *',
-        },
-        {
-          label: global.t('recurring_invoices.frequency.every_30_minute'),
-          value: '*/30 * * * *',
-        },
-        {
-          label: global.t('recurring_invoices.frequency.every_hour'),
-          value: '0 * * * *',
-        },
-        {
-          label: global.t('recurring_invoices.frequency.every_2_hour'),
-          value: '0 */2 * * *',
-        },
-        {
-          label: global.t('recurring_invoices.frequency.every_day_at_midnight'),
-          value: '0 0 * * *',
-        },
-        {
-          label: global.t('recurring_invoices.frequency.every_week'),
-          value: '0 0 * * 0',
-        },
-        {
-          label: global.t(
-            'recurring_invoices.frequency.every_15_days_at_midnight',
-          ),
-          value: '0 5 */15 * *',
-        },
-        {
-          label: global.t(
-            'recurring_invoices.frequency.on_the_first_day_of_every_month_at_midnight',
-          ),
-          value: '0 0 1 * *',
-        },
-        {
-          label: global.t('recurring_invoices.frequency.every_6_month'),
-          value: '0 0 1 */6 *',
-        },
-        {
-          label: global.t(
-            'recurring_invoices.frequency.every_year_on_the_first_day_of_january_at_midnight',
-          ),
-          value: '0 0 1 1 *',
-        },
-        {
-          label: global.t('recurring_invoices.frequency.custom'),
-          value: 'CUSTOM',
-        },
-      ],
-    }),
-
-    getters: {
-      getSubTotal() {
-        return (
-          this.newRecurringInvoice?.items.reduce(function (a, b) {
-            return a + b['total']
-          }, 0) || 0
-        )
-      },
-
-      getNetTotal() {
-        return this.getSubtotalWithDiscount - this.getTotalTax
-      },
-
-      getTotalSimpleTax() {
-        return _.sumBy(this.newRecurringInvoice.taxes, function (tax) {
-          if (!tax.compound_tax) {
-            return tax.amount
-          }
-          return 0
-        })
-      },
-
-      getTotalCompoundTax() {
-        return _.sumBy(this.newRecurringInvoice.taxes, function (tax) {
-          if (tax.compound_tax) {
-            return tax.amount
-          }
-          return 0
-        })
-      },
-
-      getTotalTax() {
-        if (
-          this.newRecurringInvoice.tax_per_item === 'NO' ||
-          this.newRecurringInvoice.tax_per_item === null
-        ) {
-          return this.getTotalSimpleTax + this.getTotalCompoundTax
-        }
-        return _.sumBy(this.newRecurringInvoice.items, function (tax) {
-          return tax.tax
-        })
-      },
-
-      getSubtotalWithDiscount() {
-        return this.getSubTotal - this.newRecurringInvoice.discount_val
-      },
-
-      getTotal() {
-        if (this.newRecurringInvoice.tax_included) {
-          return this.getSubtotalWithDiscount
-        }
-        return this.getSubtotalWithDiscount + this.getTotalTax
-      },
-    },
-
-    actions: {
-      resetCurrentRecurringInvoice() {
-        this.newRecurringInvoice = {
-          ...recurringInvoiceStub(),
-        }
-      },
-
-      deselectItem(index) {
-        this.newRecurringInvoice.items[index] = {
-          ...recurringInvoiceItemStub,
-          id: Guid.raw(),
-          taxes: [{ ...TaxStub, id: Guid.raw() }],
-        }
-      },
-
-      addRecurringInvoice(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/recurring-invoices', data)
-            .then((response) => {
-              this.recurringInvoices = [
-                ...this.recurringInvoices,
-                response.data.recurringInvoice,
-              ]
-              const notificationStore = useNotificationStore()
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('recurring_invoices.created_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchRecurringInvoice(id) {
-        return new Promise((resolve, reject) => {
-          this.isFetchingViewData = true
-          http
-            .get(`/api/v1/recurring-invoices/${id}`)
-            .then((response) => {
-              Object.assign(this.newRecurringInvoice, response.data.data)
-              this.newRecurringInvoice.invoices =
-                response.data.data.invoices || []
-              this.setSelectedFrequency()
-              this.isFetchingViewData = false
-              resolve(response)
-            })
-            .catch((err) => {
-              this.isFetchingViewData = false
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateRecurringInvoice(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/recurring-invoices/${data.id}`, data)
-            .then((response) => {
-              resolve(response)
-
-              const notificationStore = useNotificationStore()
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('recurring_invoices.updated_message'),
-              })
-
-              let pos = this.recurringInvoices.findIndex(
-                (invoice) => invoice.id === response.data.data.id,
-              )
-
-              this.recurringInvoices[pos] = response.data.data
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      selectCustomer(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/customers/${id}`)
-            .then((response) => {
-              this.newRecurringInvoice.customer = response.data.data
-              this.newRecurringInvoice.customer_id = response.data.data.id
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      searchRecurringInvoice(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/recurring-invoices?${data}`)
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchRecurringInvoices(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/recurring-invoices`, { params })
-            .then((response) => {
-              this.recurringInvoices = response.data.data
-              this.totalRecurringInvoices =
-                response.data.meta.recurring_invoice_total_count
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteRecurringInvoice(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .post(`/api/v1/recurring-invoices/delete`, id)
-            .then((response) => {
-              let index = this.recurringInvoices.findIndex(
-                (invoice) => invoice.id === id,
-              )
-              this.recurringInvoices.splice(index, 1)
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteMultipleRecurringInvoices(id) {
-        return new Promise((resolve, reject) => {
-          let ids = this.selectedRecurringInvoices
-          if (id) {
-            ids = [id]
-          }
-          http
-            .post(`/api/v1/recurring-invoices/delete`, {
-              ids: ids,
-            })
-            .then((response) => {
-              this.selectedRecurringInvoices.forEach((invoice) => {
-                let index = this.recurringInvoices.findIndex(
-                  (_inv) => _inv.id === invoice.id,
-                )
-                this.recurringInvoices.splice(index, 1)
-              })
-              this.selectedRecurringInvoices = []
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      resetSelectedCustomer() {
-        this.newRecurringInvoice.customer = null
-        this.newRecurringInvoice.customer_id = ''
-      },
-
-      selectRecurringInvoice(data) {
-        this.selectedRecurringInvoices = data
-        if (
-          this.selectedRecurringInvoices.length ===
-          this.recurringInvoices.length
-        ) {
-          this.selectAllField = true
-        } else {
-          this.selectAllField = false
-        }
-      },
-
-      selectAllRecurringInvoices() {
-        if (
-          this.selectedRecurringInvoices.length ===
-          this.recurringInvoices.length
-        ) {
-          this.selectedRecurringInvoices = []
-          this.selectAllField = false
-        } else {
-          let allInvoiceIds = this.recurringInvoices.map(
-            (invoice) => invoice.id,
-          )
-          this.selectedRecurringInvoices = allInvoiceIds
-          this.selectAllField = true
-        }
-      },
-
-      addItem() {
-        this.newRecurringInvoice.items.push({
-          ...recurringInvoiceItemStub,
-          id: Guid.raw(),
-          taxes: [{ ...TaxStub, id: Guid.raw() }],
-        })
-      },
-
-      removeItem(index) {
-        this.newRecurringInvoice.items.splice(index, 1)
-      },
-
-      updateItem(data) {
-        Object.assign(this.newRecurringInvoice.items[data.index], { ...data })
-      },
-
-      async fetchRecurringInvoiceInitialSettings(isEdit) {
-        const companyStore = useCompanyStore()
-        const customerStore = useCustomerStore()
-        const itemStore = useItemStore()
-        const invoiceStore = useInvoiceStore()
-        const taxTypeStore = useTaxTypeStore()
-        const route = useRoute()
-        const notesStore = useNotesStore()
-
-        this.isFetchingInitialSettings = true
-        this.newRecurringInvoice.currency = companyStore.selectedCompanyCurrency
-
-        if (route.query.customer) {
-          let response = await customerStore.fetchCustomer(route.query.customer)
-          this.newRecurringInvoice.customer = response.data.data
-          this.selectCustomer(response.data.data.id)
-        }
-
-        let editActions = []
-
-        // on create
-        if (!isEdit) {
-          await notesStore.fetchNotes()
-          this.newRecurringInvoice.notes =
-            notesStore.getDefaultNoteForType('Invoice')?.notes
-          this.newRecurringInvoice.tax_per_item =
-            companyStore.selectedCompanySettings.tax_per_item
-          this.newRecurringInvoice.discount_per_item =
-            companyStore.selectedCompanySettings.discount_per_item
-          this.newRecurringInvoice.sales_tax_type =
-            companyStore.selectedCompanySettings.sales_tax_type
-          this.newRecurringInvoice.sales_tax_address_type =
-            companyStore.selectedCompanySettings.sales_tax_address_type
-          this.newRecurringInvoice.starts_at = moment().format('YYYY-MM-DD')
-          this.newRecurringInvoice.next_invoice_date = moment()
-            .add(7, 'days')
-            .format('YYYY-MM-DD')
-        } else {
-          editActions = [this.fetchRecurringInvoice(route.params.id)]
-        }
-
-        Promise.all([
-          itemStore.fetchItems({
-            filter: {},
-            orderByField: '',
-            orderBy: '',
-          }),
-          this.resetSelectedNote(),
-          invoiceStore.fetchInvoiceTemplates(),
-          taxTypeStore.fetchTaxTypes({ limit: 'all' }),
-          ...editActions,
-        ])
-          .then(async ([res1, res2, res3, res4, res5]) => {
-            if (res3.data) {
-              this.templates = invoiceStore.templates
-            }
-
-            if (!isEdit) {
-              this.setTemplate(this.templates[0].name)
-            }
-
-            if (isEdit && res5?.data) {
-              let data = {
-                ...res5.data.data,
-              }
-
-              this.setTemplate(res5?.data?.data?.template_name)
-            }
-            if (isEdit) {
-              this.addSalesTaxUs()
-            }
-            this.isFetchingInitialSettings = false
-          })
-          .catch((err) => {
-            console.log(err)
-            handleError(err)
-          })
-      },
-
-      addSalesTaxUs() {
-        const taxTypeStore = useTaxTypeStore()
-        let salesTax = { ...TaxStub }
-        let found = this.newRecurringInvoice.taxes.find(
-          (_t) => _t.name === 'Sales Tax' && _t.type === 'MODULE',
-        )
-        if (found) {
-          for (const key in found) {
-            if (Object.prototype.hasOwnProperty.call(salesTax, key)) {
-              salesTax[key] = found[key]
-            }
-          }
-          salesTax.id = found.tax_type_id
-          taxTypeStore.taxTypes.push(salesTax)
-        }
-      },
-
-      setTemplate(data) {
-        this.newRecurringInvoice.template_name = data
-      },
-
-      setSelectedFrequency() {
-        let data = this.frequencies.find((frequency) => {
-          return frequency.value === this.newRecurringInvoice.frequency
-        })
-        data
-          ? (this.newRecurringInvoice.selectedFrequency = data)
-          : (this.newRecurringInvoice.selectedFrequency = {
-              label: 'Custom',
-              value: 'CUSTOM',
-            })
-      },
-
-      resetSelectedNote() {
-        this.newRecurringInvoice.selectedNote = null
-      },
-
-      fetchRecurringInvoiceFrequencyDate(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get('/api/v1/recurring-invoice-frequency', { params })
-            .then((response) => {
-              this.newRecurringInvoice.next_invoice_at =
-                response.data.next_invoice_at
-
-              resolve(response)
-            })
-            .catch((err) => {
-              const notificationStore = useNotificationStore()
-
-              notificationStore.showNotification({
-                type: 'error',
-                message: global.t('errors.enter_valid_cron_format'),
-              })
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/reset.js b/resources/scripts/admin/stores/reset.js
deleted file mode 100644
index 9b107c86..00000000
--- a/resources/scripts/admin/stores/reset.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { defineStore } from 'pinia'
-import { useBackupStore } from './backup'
-import { useCategoryStore } from './category'
-import { useCompanyStore } from './company'
-import { useCustomFieldStore } from './custom-field'
-import { useCustomerStore } from './customer'
-import { useDashboardStore } from './dashboard'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useDiskStore } from './disk'
-import { useEstimateStore } from './estimate'
-import { useExchangeRateStore } from './exchange-rate'
-import { useExpenseStore } from './expense'
-import { useGlobalStore } from './global'
-import { useInstallationStore } from './installation'
-import { useInvoiceStore } from './invoice'
-import { useItemStore } from './item'
-import { useMailDriverStore } from './mail-driver'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useNotesStore } from './note'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { usePaymentStore } from './payment'
-import { useRecurringInvoiceStore } from './recurring-invoice'
-import { useRoleStore } from './role'
-import { useTaxTypeStore } from './tax-type'
-import { useUserStore } from './user'
-import { useMembersStore } from './users'
-
-export const useResetStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('reset', {
-    actions: {
-      clearPinia() {
-        const backupStore = useBackupStore()
-        const categoryStore = useCategoryStore()
-        const companyStore = useCompanyStore()
-        const customFieldStore = useCustomFieldStore()
-        const customerStore = useCustomerStore()
-        const dashboardStore = useDashboardStore()
-        const dialogStore = useDialogStore()
-        const diskStore = useDiskStore()
-        const estimateStore = useEstimateStore()
-        const exchangeRateStore = useExchangeRateStore()
-        const expenseStore = useExpenseStore()
-        const globalStore = useGlobalStore()
-        const installationStore = useInstallationStore()
-        const invoiceStore = useInvoiceStore()
-        const itemStore = useItemStore()
-        const mailDriverStore = useMailDriverStore()
-        const modalStore = useModalStore()
-        const noteStore = useNotesStore()
-        const notificationStore = useNotificationStore()
-        const paymentStore = usePaymentStore()
-        const recurringInvoiceStore = useRecurringInvoiceStore()
-        const roleStore = useRoleStore()
-        const taxTypeStore = useTaxTypeStore()
-        const userStore = useUserStore()
-        const usersStore = useMembersStore()
-
-        backupStore.$reset()
-        categoryStore.$reset()
-        companyStore.$reset()
-        customFieldStore.$reset()
-        customerStore.$reset()
-        dashboardStore.$reset()
-        dialogStore.$reset()
-        diskStore.$reset()
-        estimateStore.$reset()
-        exchangeRateStore.$reset()
-        expenseStore.$reset()
-        globalStore.$reset()
-        installationStore.$reset()
-        invoiceStore.$reset()
-        itemStore.$reset()
-        mailDriverStore.$reset()
-        modalStore.$reset()
-        noteStore.$reset()
-        notificationStore.$reset()
-        paymentStore.$reset()
-        recurringInvoiceStore.$reset()
-        roleStore.$reset()
-        taxTypeStore.$reset()
-        userStore.$reset()
-        usersStore.$reset()
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/role.js b/resources/scripts/admin/stores/role.js
deleted file mode 100644
index 191daa5a..00000000
--- a/resources/scripts/admin/stores/role.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import _ from 'lodash'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useRoleStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('role', {
-    state: () => ({
-      roles: [],
-      allAbilities: [],
-      selectedRoles: [],
-      currentRole: {
-        id: null,
-        name: '',
-        abilities: [],
-      },
-    }),
-
-    getters: {
-      isEdit: (state) => (state.currentRole.id ? true : false),
-      abilitiesList: (state) => {
-        let abilities = state.allAbilities.map((a) => ({
-          modelName: a.model
-            ? a.model.substring(a.model.lastIndexOf('\\') + 1)
-            : 'Common',
-          disabled: false,
-          ...a,
-        }))
-        return _.groupBy(abilities, 'modelName')
-      },
-    },
-
-    actions: {
-      fetchRoles(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/roles`, { params })
-            .then((response) => {
-              this.roles = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchRole(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/roles/${id}`)
-            .then((response) => {
-              this.currentRole.name = response.data.data.name
-              this.currentRole.id = response.data.data.id
-
-              response.data.data.abilities.forEach((_ra) => {
-                for (const property in this.abilitiesList) {
-                  this.abilitiesList[property].forEach((_p) => {
-                    if (_p.ability === _ra.name) {
-                      this.currentRole.abilities.push(_p)
-                    }
-                  })
-                }
-              })
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addRole(data) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/roles', data)
-            .then((response) => {
-              this.roles.push(response.data.role)
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.roles.created_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateRole(data) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/roles/${data.id}`, data)
-            .then((response) => {
-              if (response.data) {
-                let pos = this.roles.findIndex(
-                  (role) => role.id === response.data.data.id
-                )
-                this.roles[pos] = data.role
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('settings.roles.updated_message'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchAbilities(params) {
-        return new Promise((resolve, reject) => {
-          if (this.allAbilities.length) {
-            resolve(this.allAbilities)
-          } else {
-            http
-              .get(`/api/v1/abilities`, { params })
-              .then((response) => {
-                this.allAbilities = response.data.abilities
-
-                resolve(response)
-              })
-              .catch((err) => {
-                handleError(err)
-                reject(err)
-              })
-          }
-        })
-      },
-
-      deleteRole(id) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          http
-            .delete(`/api/v1/roles/${id}`)
-            .then((response) => {
-              let index = this.roles.findIndex((role) => role.id === id)
-              this.roles.splice(index, 1)
-
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.roles.deleted_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/tax-type.js b/resources/scripts/admin/stores/tax-type.js
deleted file mode 100644
index d1edb08b..00000000
--- a/resources/scripts/admin/stores/tax-type.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useTaxTypeStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('taxType', {
-    state: () => ({
-      taxTypes: [],
-      currentTaxType: {
-        id: null,
-        name: '',
-        calculation_type: 'percentage',
-        percent: 0,
-        fixed_amount: 0,
-        description: '',
-        compound_tax: false,
-        collective_tax: 0,
-      },
-    }),
-
-    getters: {
-      isEdit: (state) => (state.currentTaxType.id ? true : false),
-    },
-
-    actions: {
-      resetCurrentTaxType() {
-        this.currentTaxType = {
-          id: null,
-          name: '',
-          calculation_type: 'percentage',
-          percent: 0,
-          fixed_amount: 0,
-          description: '',
-          compound_tax: false,
-          collective_tax: 0,
-        }
-      },
-
-      fetchTaxTypes(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/tax-types`, { params })
-            .then((response) => {
-              this.taxTypes = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchTaxType(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/tax-types/${id}`)
-            .then((response) => {
-              this.currentTaxType = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      addTaxType(data) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/tax-types', data)
-            .then((response) => {
-              this.taxTypes.push(response.data.data)
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.tax_types.created_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateTaxType(data) {
-        const notificationStore = useNotificationStore()
-        return new Promise((resolve, reject) => {
-          http
-            .put(`/api/v1/tax-types/${data.id}`, data)
-            .then((response) => {
-              if (response.data) {
-                let pos = this.taxTypes.findIndex(
-                  (taxTypes) => taxTypes.id === response.data.data.id
-                )
-                this.taxTypes[pos] = data.taxTypes
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('settings.tax_types.updated_message'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchSalesTax(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/m/sales-tax-us/current-tax', data)
-            .then((response) => {
-              if (response.data) {
-                let pos = this.taxTypes.findIndex(
-                  (_t) => _t.name === 'SalesTaxUs'
-                )
-                pos > -1 ? this.taxTypes.splice(pos, 1) : ''
-                this.taxTypes.push({ ...response.data.data, tax_type_id: response.data.data.id })
-              }
-
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      deleteTaxType(id) {
-        return new Promise((resolve, reject) => {
-          http
-            .delete(`/api/v1/tax-types/${id}`)
-            .then((response) => {
-              if (response.data.success) {
-                let index = this.taxTypes.findIndex(
-                  (taxType) => taxType.id === id
-                )
-                this.taxTypes.splice(index, 1)
-                const notificationStore = useNotificationStore()
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.t('settings.tax_types.deleted_message'),
-                })
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stores/user.js b/resources/scripts/admin/stores/user.js
deleted file mode 100644
index 84101f21..00000000
--- a/resources/scripts/admin/stores/user.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import http from '@/scripts/http'
-import { defineStore } from 'pinia'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-export const useUserStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('user', {
-    state: () => ({
-      currentUser: null,
-      currentAbilities: [],
-      currentUserSettings: {},
-
-      userForm: {
-        name: '',
-        email: '',
-        password: '',
-        confirm_password: '',
-        language: '',
-      },
-    }),
-
-    getters: {
-      currentAbilitiesCount: (state) => state.currentAbilities.length,
-    },
-
-    actions: {
-      updateCurrentUser(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put('/api/v1/me', data)
-            .then((response) => {
-              this.currentUser = response.data.data
-              Object.assign(this.userForm, response.data.data)
-              const notificationStore = useNotificationStore()
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('settings.account_settings.updated_message'),
-              })
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchCurrentUser(params) {
-        return new Promise((resolve, reject) => {
-          http
-            .get(`/api/v1/me`, params)
-            .then((response) => {
-              this.currentUser = response.data.data
-              this.userForm = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      uploadAvatar(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .post('/api/v1/me/upload-avatar', data)
-            .then((response) => {
-              this.currentUser.avatar = response.data.data.avatar
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      fetchUserSettings(settings) {
-        return new Promise((resolve, reject) => {
-          http
-            .get('/api/v1/me/settings', {
-              params: {
-                settings,
-              },
-            })
-            .then((response) => {
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      updateUserSettings(data) {
-        return new Promise((resolve, reject) => {
-          http
-            .put('/api/v1/me/settings', data)
-            .then((response) => {
-              if (data.settings.language) {
-                this.currentUserSettings.language = data.settings.language
-                global.locale.value = data.settings.language
-              }
-              if (data.settings.default_estimate_template) {
-                this.currentUserSettings.default_estimate_template =
-                  data.settings.default_estimate_template
-              }
-              if (data.settings.default_invoice_template) {
-                this.currentUserSettings.default_invoice_template =
-                  data.settings.default_invoice_template
-              }
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        })
-      },
-
-      hasAbilities(abilities) {
-        return !!this.currentAbilities.find((ab) => {
-          if (ab.name === '*') return true
-          if (typeof abilities === 'string') {
-            return ab.name === abilities
-          }
-          return !!abilities.find((p) => {
-            return ab.name === p
-          })
-        })
-      },
-
-      hasAllAbilities(abilities) {
-        let isAvailable = true
-        this.currentAbilities.filter((ab) => {
-          let hasContain = !!abilities.find((p) => {
-            return ab.name === p
-          })
-          if (!hasContain) {
-            isAvailable = false
-          }
-        })
-
-        return isAvailable
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/admin/stub/abilities.js b/resources/scripts/admin/stub/abilities.js
deleted file mode 100644
index 024e9992..00000000
--- a/resources/scripts/admin/stub/abilities.js
+++ /dev/null
@@ -1,79 +0,0 @@
-export default {
-  DASHBOARD: 'dashboard',
-
-  // customers
-  CREATE_CUSTOMER: 'create-customer',
-  DELETE_CUSTOMER: 'delete-customer',
-  EDIT_CUSTOMER: 'edit-customer',
-  VIEW_CUSTOMER: 'view-customer',
-
-  // Items
-  CREATE_ITEM: 'create-item',
-  DELETE_ITEM: 'delete-item',
-  EDIT_ITEM: 'edit-item',
-  VIEW_ITEM: 'view-item',
-
-  // Tax Types
-  CREATE_TAX_TYPE: 'create-tax-type',
-  DELETE_TAX_TYPE: 'delete-tax-type',
-  EDIT_TAX_TYPE: 'edit-tax-type',
-  VIEW_TAX_TYPE: 'view-tax-type',
-
-  // Estimates
-  CREATE_ESTIMATE: 'create-estimate',
-  DELETE_ESTIMATE: 'delete-estimate',
-  EDIT_ESTIMATE: 'edit-estimate',
-  VIEW_ESTIMATE: 'view-estimate',
-  SEND_ESTIMATE: 'send-estimate',
-
-  // Invoices
-  CREATE_INVOICE: 'create-invoice',
-  DELETE_INVOICE: 'delete-invoice',
-  EDIT_INVOICE: 'edit-invoice',
-  VIEW_INVOICE: 'view-invoice',
-  SEND_INVOICE: 'send-invoice',
-
-  // Recurring Invoices
-  CREATE_RECURRING_INVOICE: 'create-recurring-invoice',
-  DELETE_RECURRING_INVOICE: 'delete-recurring-invoice',
-  EDIT_RECURRING_INVOICE: 'edit-recurring-invoice',
-  VIEW_RECURRING_INVOICE: 'view-recurring-invoice',
-
-  // Payment
-  CREATE_PAYMENT: 'create-payment',
-  DELETE_PAYMENT: 'delete-payment',
-  EDIT_PAYMENT: 'edit-payment',
-  VIEW_PAYMENT: 'view-payment',
-  SEND_PAYMENT: 'send-payment',
-
-  // Payment
-  CREATE_EXPENSE: 'create-expense',
-  DELETE_EXPENSE: 'delete-expense',
-  EDIT_EXPENSE: 'edit-expense',
-  VIEW_EXPENSE: 'view-expense',
-
-  // Custom fields
-  CREATE_CUSTOM_FIELDS: 'create-custom-field',
-  DELETE_CUSTOM_FIELDS: 'delete-custom-field',
-  EDIT_CUSTOM_FIELDS: 'edit-custom-field',
-  VIEW_CUSTOM_FIELDS: 'view-custom-field',
-
-  // Roles
-  CREATE_ROLE: 'create-role',
-  DELETE_ROLE: 'delete-role',
-  EDIT_ROLE: 'edit-role',
-  VIEW_ROLE: 'view-role',
-
-  // exchange rates
-  VIEW_EXCHANGE_RATE: 'view-exchange-rate-provider',
-  CREATE_EXCHANGE_RATE: 'create-exchange-rate-provider',
-  EDIT_EXCHANGE_RATE: 'edit-exchange-rate-provider',
-  DELETE_EXCHANGE_RATE: 'delete-exchange-rate-provider',
-
-  // Reports
-  VIEW_FINANCIAL_REPORT: 'view-financial-reports',
-
-  // settings
-  MANAGE_NOTE: 'manage-all-notes',
-  VIEW_NOTE: 'view-all-notes',
-}
diff --git a/resources/scripts/admin/stub/address.js b/resources/scripts/admin/stub/address.js
deleted file mode 100644
index cb5f067f..00000000
--- a/resources/scripts/admin/stub/address.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-  name: null,
-  phone: null,
-  address_street_1: null,
-  address_street_2: null,
-  city: null,
-  state: null,
-  country_id: null,
-  zip: null,
-  type: null,
-}
diff --git a/resources/scripts/admin/stub/custom-field.js b/resources/scripts/admin/stub/custom-field.js
deleted file mode 100644
index af04dac3..00000000
--- a/resources/scripts/admin/stub/custom-field.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export default {
-  id: null,
-  label: null,
-  type: null,
-  name: null,
-  default_answer: null,
-  is_required: false,
-  placeholder: null,
-  model_type: null,
-  order: 1,
-  options: [],
-}
diff --git a/resources/scripts/admin/stub/customer.js b/resources/scripts/admin/stub/customer.js
deleted file mode 100644
index 55512add..00000000
--- a/resources/scripts/admin/stub/customer.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import addressStub from '@/scripts/admin/stub/address.js'
-
-export default function () {
-  return {
-    name: '',
-    contact_name: '',
-    email: '',
-    phone: null,
-    password: '',
-    confirm_password:'',
-    currency_id: null,
-    website: null,
-    billing: { ...addressStub },
-    shipping: { ...addressStub },
-    customFields: [],
-    fields: [],
-    enable_portal: false,
-  }
-}
diff --git a/resources/scripts/admin/stub/estimate-item.js b/resources/scripts/admin/stub/estimate-item.js
deleted file mode 100644
index 3cd1a3b4..00000000
--- a/resources/scripts/admin/stub/estimate-item.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export default {
-  estimate_id: null,
-  item_id: null,
-  name: '',
-  title: '',
-  description: null,
-  quantity: 1,
-  price: 0,
-  discount_type: 'fixed',
-  discount_val: 0,
-  discount: 0,
-  total: 0,
-  sub_total: 0,
-  totalTax: 0,
-  totalSimpleTax: 0,
-  totalCompoundTax: 0,
-  tax: 0,
-  taxes: [],
-}
diff --git a/resources/scripts/admin/stub/estimate.js b/resources/scripts/admin/stub/estimate.js
deleted file mode 100644
index f323cc3e..00000000
--- a/resources/scripts/admin/stub/estimate.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Guid from 'guid'
-import estimateItemStub from './estimate-item'
-import taxStub from './tax'
-
-export default function () {
-  return {
-    id: null,
-    customer: null,
-    template_name: '',
-    tax_per_item: null,
-    tax_included: false,
-    sales_tax_type: null,
-    sales_tax_address_type: null,
-    discount_per_item: null,
-    estimate_date: '',
-    expiry_date: '',
-    estimate_number: '',
-    customer_id: null,
-    sub_total: 0,
-    total: 0,
-    tax: 0,
-    notes: '',
-    discount_type: 'fixed',
-    discount_val: 0,
-    reference_number: null,
-    discount: 0,
-    items: [
-      {
-        ...estimateItemStub,
-        id: Guid.raw(),
-        taxes: [{ ...taxStub, id: Guid.raw() }],
-      },
-    ],
-    taxes: [],
-    customFields: [],
-    fields: [],
-    selectedNote: null,
-    selectedCurrency: '',
-  }
-}
diff --git a/resources/scripts/admin/stub/expense.js b/resources/scripts/admin/stub/expense.js
deleted file mode 100644
index 49c6789e..00000000
--- a/resources/scripts/admin/stub/expense.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import moment from 'moment'
-
-export default {
-  expense_category_id: null,
-  expense_date: moment().format('YYYY-MM-DD'),
-  expense_number: '',
-  amount: 100,
-  notes: '',
-  attachment_receipt: null,
-  customer_id: '',
-  currency_id: '',
-  payment_method_id: '',
-  receiptFiles: [],
-  customFields: [],
-  fields: [],
-  in_use: false,
-  selectedCurrency: null
-}
diff --git a/resources/scripts/admin/stub/invoice-item.js b/resources/scripts/admin/stub/invoice-item.js
deleted file mode 100644
index fdb0ced0..00000000
--- a/resources/scripts/admin/stub/invoice-item.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export default {
-  invoice_id: null,
-  item_id: null,
-  name: '',
-  title: '',
-  description: null,
-  quantity: 1,
-  price: 0,
-  discount_type: 'fixed',
-  discount_val: 0,
-  discount: 0,
-  total: 0,
-  totalTax: 0,
-  totalSimpleTax: 0,
-  totalCompoundTax: 0,
-  tax: 0,
-  taxes: [],
-}
diff --git a/resources/scripts/admin/stub/invoice.js b/resources/scripts/admin/stub/invoice.js
deleted file mode 100644
index fdfb1989..00000000
--- a/resources/scripts/admin/stub/invoice.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Guid from 'guid'
-import invoiceItemStub from './invoice-item'
-import taxStub from './tax'
-
-export default function () {
-  return {
-    id: null,
-    invoice_number: '',
-    customer: null,
-    customer_id: null,
-    template_name: null,
-    invoice_date: '',
-    due_date: '',
-    notes: '',
-    discount: 0,
-    discount_type: 'fixed',
-    discount_val: 0,
-    reference_number: null,
-    tax: 0,
-    sub_total: 0,
-    total: 0,
-    tax_per_item: null,
-    tax_included: false,
-    sales_tax_type: null,
-    sales_tax_address_type: null,
-    discount_per_item: null,
-    taxes: [],
-    items: [
-      {
-        ...invoiceItemStub,
-        id: Guid.raw(),
-        taxes: [{ ...taxStub, id: Guid.raw() }],
-      },
-    ],
-    customFields: [],
-    fields: [],
-    selectedNote: null,
-    selectedCurrency: '',
-  }
-}
diff --git a/resources/scripts/admin/stub/payment.js b/resources/scripts/admin/stub/payment.js
deleted file mode 100644
index ca044500..00000000
--- a/resources/scripts/admin/stub/payment.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
-  maxPayableAmount: Number.MAX_SAFE_INTEGER,
-  selectedCustomer: '',
-  currency: null,
-  currency_id: '',
-  customer_id: '',
-  payment_number: '',
-  payment_date: '',
-  amount: 0,
-  invoice_id: '',
-  notes: '',
-  payment_method_id: '',
-  customFields: [],
-  fields: []
-}
diff --git a/resources/scripts/admin/stub/recurring-invoice-item.js b/resources/scripts/admin/stub/recurring-invoice-item.js
deleted file mode 100644
index 78abb27f..00000000
--- a/resources/scripts/admin/stub/recurring-invoice-item.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export default {
-  recurring_invoice_id: null,
-  item_id: null,
-  name: '',
-  title: '',
-  sales_tax_type: null,
-  sales_tax_address_type: null,
-  description: null,
-  quantity: 1,
-  price: 0,
-  discount_type: 'fixed',
-  discount_val: 0,
-  discount: 0,
-  total: 0,
-  totalTax: 0,
-  totalSimpleTax: 0,
-  totalCompoundTax: 0,
-  tax: 0,
-  taxes: [],
-}
diff --git a/resources/scripts/admin/stub/recurring-invoice.js b/resources/scripts/admin/stub/recurring-invoice.js
deleted file mode 100644
index d2b6a361..00000000
--- a/resources/scripts/admin/stub/recurring-invoice.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import Guid from 'guid'
-import recurringInvoiceItemStub from './recurring-invoice-item'
-import taxStub from './tax'
-import { useI18n } from 'vue-i18n'
-
-export default function () {
-  const { t } = useI18n()
-  return {
-    currency: null,
-    customer: null,
-
-    customer_id: null,
-    invoice_template_id: 1,
-    sub_total: 0,
-    total: 0,
-    tax: 0,
-    notes: '',
-    discount_type: 'fixed',
-    discount_val: 0,
-    discount: 0,
-    starts_at: null,
-    send_automatically: true,
-    status: 'ACTIVE',
-    company_id: null,
-    next_invoice_at: null,
-    next_invoice_date: null,
-    frequency: '0 0 * * 0',
-    limit_count: null,
-    limit_by: 'NONE',
-    limit_date: null,
-    exchange_rate: null,
-    tax_per_item: null,
-    discount_per_item: null,
-    template_name: null,
-    items: [
-      {
-        ...recurringInvoiceItemStub,
-        id: Guid.raw(),
-        taxes: [{ ...taxStub, id: Guid.raw() }],
-      },
-    ],
-    taxes: [],
-    customFields: [],
-    fields: [],
-    invoices: [],
-    selectedNote: null,
-    selectedFrequency: { label: t('recurring_invoices.frequency.every_week'), value: '0 0 * * 0' },
-    selectedInvoice: null,
-  }
-}
diff --git a/resources/scripts/admin/stub/tax.js b/resources/scripts/admin/stub/tax.js
deleted file mode 100644
index 1c37a189..00000000
--- a/resources/scripts/admin/stub/tax.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  name: '',
-  tax_type_id: 0,
-  type: 'GENERAL',
-  amount: null,
-  percent: null,
-  compound_tax: false,
-}
diff --git a/resources/scripts/admin/views/NoCompanyView.vue b/resources/scripts/admin/views/NoCompanyView.vue
deleted file mode 100644
index 9dfb2aed..00000000
--- a/resources/scripts/admin/views/NoCompanyView.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="flex items-center justify-center min-h-[70vh]">
-    <div class="w-full max-w-xl p-8">
-      <div class="text-center mb-8">
-        <BaseIcon
-          name="BuildingOfficeIcon"
-          class="w-16 h-16 mx-auto text-subtle mb-4"
-        />
-        <h1 class="text-2xl font-semibold text-heading">
-          {{ $t('general.welcome') }}, {{ userStore.currentUser.name }}
-        </h1>
-        <p class="mt-2 text-sm text-muted">
-          {{ $t('general.no_company_description') }}
-        </p>
-      </div>
-
-      <!-- Pending Invitations -->
-      <div v-if="invitationStore.pendingInvitations.length > 0">
-        <h2
-          class="text-sm font-semibold uppercase tracking-wide text-subtle mb-3"
-        >
-          {{ $t('members.pending_invitations') }}
-        </h2>
-        <div class="space-y-3">
-          <div
-            v-for="invitation in invitationStore.pendingInvitations"
-            :key="invitation.id"
-            class="flex items-center justify-between p-4 bg-surface rounded-lg border border-line-default"
-          >
-            <div>
-              <p class="font-medium text-heading">
-                {{ invitation.company?.name }}
-              </p>
-              <p class="text-sm text-muted">
-                {{ invitation.role?.title }} &middot;
-                {{ $t('members.invited_by') }}:
-                {{ invitation.invited_by?.name }}
-              </p>
-            </div>
-            <div class="flex space-x-2 ml-4 shrink-0">
-              <BaseButton
-                size="sm"
-                @click="acceptInvitation(invitation.token)"
-              >
-                {{ $t('general.accept') }}
-              </BaseButton>
-              <BaseButton
-                variant="white"
-                size="sm"
-                @click="declineInvitation(invitation.token)"
-              >
-                {{ $t('general.decline') }}
-              </BaseButton>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useInvitationStore } from '@/scripts/admin/stores/invitation'
-import { useUserStore } from '@/scripts/admin/stores/user'
-
-const invitationStore = useInvitationStore()
-const userStore = useUserStore()
-const router = useRouter()
-
-onMounted(async () => {
-  await invitationStore.fetchPending()
-})
-
-async function acceptInvitation(token) {
-  await invitationStore.accept(token)
-  router.push('/admin/dashboard')
-}
-
-async function declineInvitation(token) {
-  await invitationStore.decline(token)
-}
-</script>
diff --git a/resources/scripts/admin/views/SampleTable.vue b/resources/scripts/admin/views/SampleTable.vue
deleted file mode 100644
index 60c031ad..00000000
--- a/resources/scripts/admin/views/SampleTable.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-  <BasePage>
-    <h1 class="mb-2">Sample Table Local</h1>
-
-    <BaseTable :data="data" :columns="columns">
-      <template #cell-status="{ row }">
-        <span
-          v-if="row.data.status === 'Active'"
-          class="
-            inline-flex
-            px-2
-            text-xs
-            font-semibold
-            leading-5
-            text-green-800
-            bg-green-100
-            rounded-full
-          "
-        >
-          {{ row.data.status }}
-        </span>
-
-        <span
-          v-else
-          class="
-            inline-flex
-            px-2
-            text-xs
-            font-semibold
-            leading-5
-            text-red-800
-            bg-red-100
-            rounded-full
-          "
-        >
-          {{ row.data.status }}
-        </span>
-      </template>
-
-      <template #cell-actions>
-        <base-dropdown width-class="w-48" margin-class="mt-1">
-          <template #activator>
-            <div class="flex items-center justify-center">
-              <EllipsisHorizontalIcon class="w-6 h-6 text-body" />
-            </div>
-          </template>
-
-          <base-dropdown-item>
-            <document-text-icon
-              class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-              aria-hidden="true"
-            />
-            New Invoice
-          </base-dropdown-item>
-
-          <base-dropdown-item>
-            <document-icon
-              class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-              aria-hidden="true"
-            />
-            New Estimate
-          </base-dropdown-item>
-
-          <base-dropdown-item>
-            <user-icon
-              class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-              aria-hidden="true"
-            />
-            New Customer
-          </base-dropdown-item>
-        </base-dropdown>
-      </template>
-    </BaseTable>
-
-    <h1 class="mt-8 mb-2">Sample Table Remote</h1>
-
-    <BaseTable :data="fetchData" :columns="columns2"> </BaseTable>
-  </BasePage>
-</template>
-
-<script>
-import { computed, reactive } from 'vue'
-import { useItemStore } from '@/scripts/admin/stores/item'
-import {
-  UserIcon,
-  DocumentIcon,
-  DocumentTextIcon,
-  EllipsisHorizontalIcon,
-} from '@heroicons/vue/24/solid'
-
-export default {
-  components: {
-    BaseTable,
-    EllipsisHorizontalIcon,
-    UserIcon,
-    DocumentIcon,
-    DocumentTextIcon,
-  },
-
-  setup() {
-    const itemStore = useItemStore()
-    const data = reactive([
-      { name: 'Tom', age: 3, image: 'tom.jpg', status: 'Active' },
-      { name: 'Felix', age: 5, image: 'felix.jpg', status: 'Disabled' },
-      { name: 'Sylvester', age: 7, image: 'sylvester.jpg', status: 'Active' },
-    ])
-
-    const columns = computed(() => {
-      return [
-        {
-          key: 'name',
-          label: 'Name',
-          thClass: 'extra',
-          tdClass: 'font-medium text-heading',
-        },
-        { key: 'age', label: 'Age' },
-        { key: 'image', label: 'Image' },
-        { key: 'status', label: 'Status' },
-        {
-          key: 'actions',
-          label: '',
-          tdClass: 'text-right text-sm font-medium',
-          sortable: false,
-        },
-      ]
-    })
-
-    const columns2 = computed(() => {
-      return [
-        {
-          key: 'name',
-          label: 'Name',
-          thClass: 'extra',
-          tdClass: 'font-medium text-heading',
-        },
-        { key: 'price', label: 'Price' },
-        { key: 'created_at', label: 'Created At' },
-        {
-          key: 'actions',
-          label: '',
-          tdClass: 'text-right text-sm font-medium',
-          sortable: false,
-        },
-      ]
-    })
-
-    async function fetchData({ page, sort }) {
-      let data = {
-        orderByField: sort.fieldName || 'created_at',
-        orderBy: sort.order || 'desc',
-        page,
-      }
-
-      let response = await itemStore.fetchItems(data)
-
-      return {
-        data: response.data.items.data,
-        pagination: {
-          totalPages: response.data.items.last_page,
-          currentPage: page,
-          totalCount: response.data.itemTotalCount,
-          limit: 10,
-        },
-      }
-    }
-
-    return {
-      data,
-      columns,
-      fetchData,
-      columns2,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/admin/views/administration/AdminDashboard.vue b/resources/scripts/admin/views/administration/AdminDashboard.vue
deleted file mode 100644
index 1841be54..00000000
--- a/resources/scripts/admin/views/administration/AdminDashboard.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<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-subtle" />
-            <span class="font-medium text-body">{{ $t('general.app_version') }}</span>
-          </div>
-        </template>
-        <p class="text-2xl font-semibold text-heading">
-          {{ 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-subtle" />
-            <span class="font-medium text-body">PHP</span>
-          </div>
-        </template>
-        <p class="text-2xl font-semibold text-heading">
-          {{ 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-subtle" />
-            <span class="font-medium text-body">{{ $t('general.database') }}</span>
-          </div>
-        </template>
-        <p class="text-2xl font-semibold text-heading">
-          {{ data.database?.driver?.toUpperCase() }}
-        </p>
-        <p class="text-sm text-muted 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-subtle" />
-            <span class="font-medium text-body">{{ $t('navigation.companies') }}</span>
-          </div>
-        </template>
-        <p class="text-2xl font-semibold text-heading">
-          {{ 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-subtle" />
-            <span class="font-medium text-body">{{ $t('navigation.all_users') }}</span>
-          </div>
-        </template>
-        <p class="text-2xl font-semibold text-heading">
-          {{ 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>
diff --git a/resources/scripts/admin/views/administration/companies/Edit.vue b/resources/scripts/admin/views/administration/companies/Edit.vue
deleted file mode 100644
index 9b1f726e..00000000
--- a/resources/scripts/admin/views/administration/companies/Edit.vue
+++ /dev/null
@@ -1,255 +0,0 @@
-<template>
-  <BasePage v-if="!isLoading">
-    <BasePageHeader :title="$t('administration.companies.edit_company')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem
-          :title="$t('administration.companies.title')"
-          to="/admin/administration/companies"
-        />
-        <BaseBreadcrumbItem
-          :title="$t('administration.companies.edit_company')"
-          to="#"
-          active
-        />
-      </BaseBreadcrumb>
-    </BasePageHeader>
-
-    <form @submit.prevent="submitForm">
-      <BaseCard class="mt-6">
-        <BaseInputGrid class="mt-5">
-          <BaseInputGroup
-            :label="$t('administration.companies.company_name')"
-            :error="v$.name.$error && v$.name.$errors[0].$message"
-            required
-          >
-            <BaseInput
-              v-model="formData.name"
-              :invalid="v$.name.$error"
-              @blur="v$.name.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('administration.companies.owner')"
-            :error="v$.owner_id.$error && v$.owner_id.$errors[0].$message"
-            required
-          >
-            <BaseMultiselect
-              v-model="formData.owner_id"
-              label="name"
-              :invalid="v$.owner_id.$error"
-              :options="searchUsers"
-              value-prop="id"
-              :can-deselect="false"
-              :can-clear="false"
-              searchable
-              :filter-results="false"
-              :min-chars="0"
-              :resolve-on-load="true"
-              :delay="300"
-              object
-              track-by="name"
-              @select="onOwnerSelect"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('settings.company_info.tax_id')">
-            <BaseInput v-model="formData.tax_id" type="text" />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('settings.company_info.vat_id')">
-            <BaseInput v-model="formData.vat_id" type="text" />
-          </BaseInputGroup>
-        </BaseInputGrid>
-
-        <BaseDivider class="my-6" />
-
-        <h3 class="text-lg font-medium text-heading mb-4">
-          {{ $t('administration.companies.address') }}
-        </h3>
-
-        <BaseInputGrid>
-          <BaseInputGroup :label="$t('settings.company_info.phone')">
-            <BaseInput v-model="formData.address.phone" />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('settings.company_info.country')">
-            <BaseMultiselect
-              v-model="formData.address.country_id"
-              label="name"
-              :options="globalStore.countries"
-              value-prop="id"
-              :can-deselect="true"
-              :can-clear="false"
-              searchable
-              track-by="name"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('settings.company_info.state')">
-            <BaseInput v-model="formData.address.state" type="text" />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('settings.company_info.city')">
-            <BaseInput v-model="formData.address.city" type="text" />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('settings.company_info.zip')">
-            <BaseInput v-model="formData.address.zip" />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('settings.company_info.address')">
-            <BaseTextarea
-              v-model="formData.address.address_street_1"
-              rows="2"
-            />
-          </BaseInputGroup>
-        </BaseInputGrid>
-
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving"
-          type="submit"
-          class="mt-6"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              :class="slotProps.class"
-              name="ArrowDownOnSquareIcon"
-            />
-          </template>
-          {{ $t('general.save') }}
-        </BaseButton>
-      </BaseCard>
-    </form>
-  </BasePage>
-
-  <BaseGlobalLoader v-else />
-</template>
-
-<script setup>
-import { reactive, ref, computed, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useAdministrationStore } from '@/scripts/admin/stores/administration'
-import { required, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import http from '@/scripts/http'
-
-const route = useRoute()
-const router = useRouter()
-const globalStore = useGlobalStore()
-const administrationStore = useAdministrationStore()
-const { t } = useI18n()
-
-let isLoading = ref(true)
-let isSaving = ref(false)
-
-const formData = reactive({
-  name: '',
-  owner_id: null,
-  vat_id: '',
-  tax_id: '',
-  address: {
-    address_street_1: '',
-    address_street_2: '',
-    country_id: null,
-    state: '',
-    city: '',
-    phone: '',
-    zip: '',
-  },
-})
-
-const rules = computed(() => {
-  return {
-    name: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    owner_id: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => formData)
-)
-
-onMounted(async () => {
-  await globalStore.fetchCountries()
-  const response = await administrationStore.fetchCompany(route.params.id)
-  const company = response.data.data
-
-  formData.name = company.name
-  formData.vat_id = company.vat_id || ''
-  formData.tax_id = company.tax_id || ''
-
-  if (company.owner) {
-    formData.owner_id = {
-      id: company.owner.id,
-      name: company.owner.name,
-      email: company.owner.email,
-    }
-  }
-
-  if (company.address) {
-    formData.address.address_street_1 = company.address.address_street_1 || ''
-    formData.address.address_street_2 = company.address.address_street_2 || ''
-    formData.address.country_id = company.address.country_id
-    formData.address.state = company.address.state || ''
-    formData.address.city = company.address.city || ''
-    formData.address.phone = company.address.phone || ''
-    formData.address.zip = company.address.zip || ''
-  }
-
-  isLoading.value = false
-})
-
-async function searchUsers(query) {
-  const response = await http.get('/api/v1/search', {
-    params: {
-      search: query,
-      type: 'User',
-    },
-  })
-
-  return response.data.users.map((user) => ({
-    id: user.id,
-    name: `${user.name} (${user.email})`,
-    email: user.email,
-  }))
-}
-
-function onOwnerSelect(option) {
-  formData.owner_id = option
-}
-
-async function submitForm() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return
-  }
-
-  isSaving.value = true
-
-  const data = {
-    name: formData.name,
-    owner_id: formData.owner_id?.id || formData.owner_id,
-    vat_id: formData.vat_id,
-    tax_id: formData.tax_id,
-    address: formData.address,
-  }
-
-  await administrationStore.updateCompany(route.params.id, data)
-
-  isSaving.value = false
-
-  router.push({ name: 'admin.companies.index' })
-}
-</script>
diff --git a/resources/scripts/admin/views/administration/companies/Index.vue b/resources/scripts/admin/views/administration/companies/Index.vue
deleted file mode 100644
index 78de8150..00000000
--- a/resources/scripts/admin/views/administration/companies/Index.vue
+++ /dev/null
@@ -1,188 +0,0 @@
-<template>
-  <BasePage>
-    <BasePageHeader :title="$t('administration.companies.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem
-          :title="$t('administration.companies.title')"
-          to="#"
-          active
-        />
-      </BaseBreadcrumb>
-
-      <template #actions>
-        <div class="flex items-center justify-end space-x-5">
-          <BaseButton variant="primary-outline" @click="toggleFilter">
-            {{ $t('general.filter') }}
-            <template #right="slotProps">
-              <BaseIcon
-                v-if="!showFilters"
-                name="FunnelIcon"
-                :class="slotProps.class"
-              />
-              <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
-            </template>
-          </BaseButton>
-        </div>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper :show="showFilters" class="mt-3" @clear="clearFilter">
-      <BaseInputGroup
-        :label="$t('administration.companies.company_name')"
-        class="flex-1 mt-2"
-      >
-        <BaseInput
-          v-model="filters.search"
-          type="text"
-          name="search"
-          autocomplete="off"
-        />
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <BaseEmptyPlaceholder
-      v-show="showEmptyScreen"
-      :title="$t('administration.companies.no_companies')"
-      :description="$t('administration.companies.list_description')"
-    >
-      <BaseIcon name="BuildingOfficeIcon" class="mt-5 mb-4 h-16 w-16 text-subtle" />
-    </BaseEmptyPlaceholder>
-
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <BaseTable
-        ref="table"
-        :data="fetchData"
-        :columns="companyTableColumns"
-        class="mt-3"
-      >
-        <template #cell-name="{ row }">
-          <router-link
-            :to="{
-              name: 'admin.companies.edit',
-              params: { id: row.data.id },
-            }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.name }}
-          </router-link>
-        </template>
-
-        <template #cell-owner="{ row }">
-          <span v-if="row.data.owner">{{ row.data.owner.name }}</span>
-          <span v-else class="text-subtle">-</span>
-        </template>
-
-        <template #cell-owner_email="{ row }">
-          <span v-if="row.data.owner">{{ row.data.owner.email }}</span>
-          <span v-else class="text-subtle">-</span>
-        </template>
-
-        <template #cell-actions="{ row }">
-          <AdminCompanyDropdown
-            :row="row.data"
-            :table="table"
-            :load-data="refreshTable"
-          />
-        </template>
-      </BaseTable>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { computed, ref, reactive, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useAdministrationStore } from '@/scripts/admin/stores/administration'
-import AdminCompanyDropdown from '@/scripts/admin/components/dropdowns/AdminCompanyIndexDropdown.vue'
-
-const administrationStore = useAdministrationStore()
-const { t } = useI18n()
-
-let showFilters = ref(false)
-let isFetchingInitialData = ref(true)
-let table = ref(null)
-
-let filters = reactive({
-  search: '',
-})
-
-const companyTableColumns = computed(() => {
-  return [
-    {
-      key: 'name',
-      label: t('administration.companies.company_name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'owner',
-      label: t('administration.companies.owner'),
-      sortable: false,
-    },
-    {
-      key: 'owner_email',
-      label: t('general.email'),
-      sortable: false,
-    },
-    {
-      key: 'actions',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-const showEmptyScreen = computed(() => {
-  return !administrationStore.totalCompanies && !isFetchingInitialData.value
-})
-
-watch(
-  filters,
-  () => {
-    refreshTable()
-  },
-  { deep: true }
-)
-
-function refreshTable() {
-  table.value && table.value.refresh()
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    search: filters.search || '',
-    orderByField: sort.fieldName || 'name',
-    orderBy: sort.order || 'asc',
-    page,
-  }
-
-  isFetchingInitialData.value = true
-
-  let response = await administrationStore.fetchCompanies(data)
-
-  isFetchingInitialData.value = false
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-
-function clearFilter() {
-  filters.search = ''
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-</script>
diff --git a/resources/scripts/admin/views/administration/settings/SettingsIndex.vue b/resources/scripts/admin/views/administration/settings/SettingsIndex.vue
deleted file mode 100644
index 945349f3..00000000
--- a/resources/scripts/admin/views/administration/settings/SettingsIndex.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <BasePage>
-    <BasePageHeader :title="$t('administration.settings.title')" class="mb-6">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="/admin/dashboard" />
-        <BaseBreadcrumbItem
-          :title="$t('administration.settings.title')"
-          to="#"
-          active
-        />
-      </BaseBreadcrumb>
-    </BasePageHeader>
-
-    <div class="w-full mb-6 select-wrapper xl:hidden">
-      <BaseMultiselect
-        v-model="currentSetting"
-        :options="menuItems"
-        :can-deselect="false"
-        value-prop="title"
-        track-by="title"
-        label="title"
-        object
-        @update:modelValue="navigateToSetting"
-      />
-    </div>
-
-    <div class="flex gap-8">
-      <div class="hidden mt-1 xl:block min-w-[240px] sticky top-20 self-start">
-        <BaseList>
-          <BaseListItem
-            v-for="(menuItem, index) in menuItems"
-            :key="index"
-            :title="menuItem.title"
-            :to="menuItem.link"
-            :active="hasActiveUrl(menuItem.link)"
-            :index="index"
-            class="py-3"
-          >
-            <template #icon>
-              <BaseIcon :name="menuItem.icon" />
-            </template>
-          </BaseListItem>
-        </BaseList>
-      </div>
-
-      <div class="w-full overflow-hidden">
-        <RouterView />
-      </div>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { ref, computed, watchEffect } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import BaseList from '@/scripts/components/list/BaseList.vue'
-import BaseListItem from '@/scripts/components/list/BaseListItem.vue'
-
-const { t } = useI18n()
-const route = useRoute()
-const router = useRouter()
-
-let currentSetting = ref({})
-
-const menuItems = computed(() => [
-  {
-    title: t('settings.mail.mail_config'),
-    link: '/admin/administration/settings/mail-configuration',
-    icon: 'EnvelopeIcon',
-  },
-  {
-    title: t('settings.menu_title.pdf_generation'),
-    link: '/admin/administration/settings/pdf-generation',
-    icon: 'DocumentIcon',
-  },
-  {
-    title: t('settings.menu_title.backup'),
-    link: '/admin/administration/settings/backup',
-    icon: 'CircleStackIcon',
-  },
-  {
-    title: t('settings.menu_title.file_disk'),
-    link: '/admin/administration/settings/file-disk',
-    icon: 'FolderIcon',
-  },
-  {
-    title: t('settings.menu_title.update_app'),
-    link: '/admin/administration/settings/update-app',
-    icon: 'ArrowPathIcon',
-  },
-])
-
-watchEffect(() => {
-  if (route.path === '/admin/administration/settings') {
-    router.push('/admin/administration/settings/mail-configuration')
-  }
-
-  const item = menuItems.value.find((item) => {
-    return route.path.indexOf(item.link) > -1
-  })
-
-  currentSetting.value = item
-})
-
-function hasActiveUrl(url) {
-  return route.path.indexOf(url) > -1
-}
-
-function navigateToSetting(setting) {
-  return router.push(setting.link)
-}
-</script>
diff --git a/resources/scripts/admin/views/administration/users/Edit.vue b/resources/scripts/admin/views/administration/users/Edit.vue
deleted file mode 100644
index 2750255b..00000000
--- a/resources/scripts/admin/views/administration/users/Edit.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
-  <BasePage v-if="!isLoading">
-    <BasePageHeader :title="$t('administration.users.edit_user')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem
-          :title="$t('administration.users.title')"
-          to="/admin/administration/users"
-        />
-        <BaseBreadcrumbItem
-          :title="$t('administration.users.edit_user')"
-          to="#"
-          active
-        />
-      </BaseBreadcrumb>
-    </BasePageHeader>
-
-    <form @submit.prevent="submitForm">
-      <BaseCard class="mt-6">
-        <BaseInputGrid class="mt-5">
-          <BaseInputGroup
-            :label="$t('users.name')"
-            :error="v$.name.$error && v$.name.$errors[0].$message"
-            required
-          >
-            <BaseInput
-              v-model="formData.name"
-              :invalid="v$.name.$error"
-              @blur="v$.name.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('general.email')"
-            :error="v$.email.$error && v$.email.$errors[0].$message"
-            required
-          >
-            <BaseInput
-              v-model="formData.email"
-              type="email"
-              :invalid="v$.email.$error"
-              @blur="v$.email.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('users.phone')">
-            <BaseInput v-model="formData.phone" type="text" />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('users.password')"
-            :error="v$.password.$error && v$.password.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="formData.password"
-              type="password"
-              :invalid="v$.password.$error"
-              autocomplete="new-password"
-              @blur="v$.password.$touch()"
-            />
-          </BaseInputGroup>
-        </BaseInputGrid>
-
-        <div v-if="userData" class="mt-6 text-sm text-muted">
-          <p>
-            <strong>{{ $t('administration.users.role') }}:</strong>
-            {{ userData.role }}
-          </p>
-          <p v-if="userData.companies && userData.companies.length" class="mt-1">
-            <strong>{{ $t('navigation.companies') }}:</strong>
-            {{ userData.companies.map((c) => c.name).join(', ') }}
-          </p>
-        </div>
-
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving"
-          type="submit"
-          class="mt-6"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              :class="slotProps.class"
-              name="ArrowDownOnSquareIcon"
-            />
-          </template>
-          {{ $t('general.save') }}
-        </BaseButton>
-      </BaseCard>
-    </form>
-  </BasePage>
-
-  <BaseGlobalLoader v-else />
-</template>
-
-<script setup>
-import { reactive, ref, computed, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useAdministrationStore } from '@/scripts/admin/stores/administration'
-import { required, email, minLength, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-
-const route = useRoute()
-const router = useRouter()
-const administrationStore = useAdministrationStore()
-const { t } = useI18n()
-
-let isLoading = ref(true)
-let isSaving = ref(false)
-let userData = ref(null)
-
-const formData = reactive({
-  name: '',
-  email: '',
-  phone: '',
-  password: '',
-})
-
-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_min_length', { count: 8 }),
-        minLength(8)
-      ),
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => formData)
-)
-
-onMounted(async () => {
-  const response = await administrationStore.fetchUser(route.params.id)
-  const user = response.data.data
-  userData.value = user
-
-  formData.name = user.name
-  formData.email = user.email
-  formData.phone = user.phone || ''
-
-  isLoading.value = false
-})
-
-async function submitForm() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return
-  }
-
-  isSaving.value = true
-
-  const data = {
-    name: formData.name,
-    email: formData.email,
-    phone: formData.phone,
-  }
-
-  if (formData.password) {
-    data.password = formData.password
-  }
-
-  await administrationStore.updateUser(route.params.id, data)
-
-  isSaving.value = false
-
-  router.push({ name: 'admin.users.index' })
-}
-</script>
diff --git a/resources/scripts/admin/views/administration/users/Index.vue b/resources/scripts/admin/views/administration/users/Index.vue
deleted file mode 100644
index 878c1b7e..00000000
--- a/resources/scripts/admin/views/administration/users/Index.vue
+++ /dev/null
@@ -1,252 +0,0 @@
-<template>
-  <BasePage>
-    <BasePageHeader :title="$t('administration.users.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem
-          :title="$t('administration.users.title')"
-          to="#"
-          active
-        />
-      </BaseBreadcrumb>
-
-      <template #actions>
-        <div class="flex items-center justify-end space-x-5">
-          <BaseButton variant="primary-outline" @click="toggleFilter">
-            {{ $t('general.filter') }}
-            <template #right="slotProps">
-              <BaseIcon
-                v-if="!showFilters"
-                name="FunnelIcon"
-                :class="slotProps.class"
-              />
-              <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
-            </template>
-          </BaseButton>
-        </div>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper :show="showFilters" class="mt-3" @clear="clearFilter">
-      <BaseInputGroup
-        :label="$t('users.name')"
-        class="flex-1 mt-2 mr-4"
-      >
-        <BaseInput
-          v-model="filters.display_name"
-          type="text"
-          name="name"
-          autocomplete="off"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('general.email')" class="flex-1 mt-2 mr-4">
-        <BaseInput
-          v-model="filters.email"
-          type="text"
-          name="email"
-          autocomplete="off"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('users.phone')" class="flex-1 mt-2">
-        <BaseInput
-          v-model="filters.phone"
-          type="text"
-          name="phone"
-          autocomplete="off"
-        />
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <BaseEmptyPlaceholder
-      v-show="showEmptyScreen"
-      :title="$t('administration.users.no_users')"
-      :description="$t('administration.users.list_description')"
-    >
-      <BaseIcon
-        name="UsersIcon"
-        class="mt-5 mb-4 h-16 w-16 text-subtle"
-      />
-    </BaseEmptyPlaceholder>
-
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <BaseTable
-        ref="table"
-        :data="fetchData"
-        :columns="userTableColumns"
-        class="mt-3"
-      >
-        <template #cell-name="{ row }">
-          <router-link
-            :to="{
-              name: 'admin.users.edit',
-              params: { id: row.data.id },
-            }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.name }}
-          </router-link>
-        </template>
-
-        <template #cell-email="{ row }">
-          <span>{{ row.data.email }}</span>
-        </template>
-
-        <template #cell-role="{ row }">
-          <span
-            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
-            :class="getRoleBadgeClass(row.data.role)"
-          >
-            {{ row.data.role }}
-          </span>
-        </template>
-
-        <template #cell-companies="{ row }">
-          <div v-if="row.data.companies && row.data.companies.length" class="flex flex-wrap gap-1">
-            <span
-              v-for="company in row.data.companies.slice(0, 3)"
-              :key="company.id"
-              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface-tertiary text-body"
-            >
-              {{ company.name }}
-            </span>
-            <span
-              v-if="row.data.companies.length > 3"
-              class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface-tertiary text-muted"
-            >
-              +{{ row.data.companies.length - 3 }}
-            </span>
-          </div>
-          <span v-else class="text-subtle">-</span>
-        </template>
-
-        <template #cell-actions="{ row }">
-          <AdminUserDropdown
-            :row="row.data"
-            :table="table"
-            :load-data="refreshTable"
-          />
-        </template>
-      </BaseTable>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { computed, ref, reactive, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useAdministrationStore } from '@/scripts/admin/stores/administration'
-import AdminUserDropdown from '@/scripts/admin/components/dropdowns/AdminUserIndexDropdown.vue'
-
-const administrationStore = useAdministrationStore()
-const { t } = useI18n()
-
-let showFilters = ref(false)
-let isFetchingInitialData = ref(true)
-let table = ref(null)
-
-let filters = reactive({
-  display_name: '',
-  email: '',
-  phone: '',
-})
-
-const userTableColumns = computed(() => {
-  return [
-    {
-      key: 'name',
-      label: t('users.name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'email',
-      label: t('general.email'),
-    },
-    {
-      key: 'role',
-      label: t('administration.users.role'),
-      sortable: false,
-    },
-    {
-      key: 'companies',
-      label: t('navigation.companies'),
-      sortable: false,
-    },
-    {
-      key: 'actions',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-const showEmptyScreen = computed(() => {
-  return !administrationStore.totalUsers && !isFetchingInitialData.value
-})
-
-watch(
-  filters,
-  () => {
-    refreshTable()
-  },
-  { deep: true }
-)
-
-function refreshTable() {
-  table.value && table.value.refresh()
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    display_name: filters.display_name || '',
-    email: filters.email || '',
-    phone: filters.phone || '',
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  isFetchingInitialData.value = true
-
-  let response = await administrationStore.fetchUsers(data)
-
-  isFetchingInitialData.value = false
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-
-function getRoleBadgeClass(role) {
-  switch (role) {
-    case 'super admin':
-      return 'bg-purple-100 text-purple-800'
-    case 'admin':
-      return 'bg-blue-100 text-blue-800'
-    default:
-      return 'bg-surface-tertiary text-heading'
-  }
-}
-
-function clearFilter() {
-  filters.display_name = ''
-  filters.email = ''
-  filters.phone = ''
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-</script>
diff --git a/resources/scripts/admin/views/auth/ForgotPassword.vue b/resources/scripts/admin/views/auth/ForgotPassword.vue
deleted file mode 100644
index 9ddc54b1..00000000
--- a/resources/scripts/admin/views/auth/ForgotPassword.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <form id="loginForm" @submit.prevent="onSubmit">
-    <BaseInputGroup
-      :error="v$.email.$error && v$.email.$errors[0].$message"
-      :label="$t('login.enter_email')"
-      class="mb-4"
-      required
-    >
-      <BaseInput
-        v-model="formData.email"
-        :invalid="v$.email.$error"
-        focus
-        type="email"
-        name="email"
-        @input="v$.email.$touch()"
-      />
-    </BaseInputGroup>
-    <BaseButton
-      :loading="isLoading"
-      :disabled="isLoading"
-      type="submit"
-      variant="primary"
-    >
-      <div v-if="!isSent">
-        {{ $t('validation.send_reset_link') }}
-      </div>
-      <div v-else>
-        {{ $t('validation.not_yet') }}
-      </div>
-    </BaseButton>
-
-    <div class="mt-4 mb-4 text-sm">
-      <router-link
-        to="/login"
-        class="text-sm text-primary-400 hover:text-body"
-      >
-        {{ $t('general.back_to_login') }}
-      </router-link>
-    </div>
-  </form>
-</template>
-
-<script type="text/babel" setup>
-import http from '@/scripts/http'
-import { reactive, ref, computed } from 'vue'
-import { required, email, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useI18n } from 'vue-i18n'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-
-const formData = reactive({
-  email: '',
-})
-
-const isSent = ref(false)
-const isLoading = ref(false)
-
-const rules = {
-  email: {
-    required: helpers.withMessage(t('validation.required'), required),
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-}
-
-const v$ = useVuelidate(rules, formData)
-
-async function onSubmit(e) {
-  v$.value.$touch()
-
-  if (!v$.value.$invalid) {
-    try {
-      isLoading.value = true
-      let res = await http.post('/api/v1/auth/password/email', formData)
-      if (res.data) {
-        notificationStore.showNotification({
-          type: 'success',
-          message: 'Mail sent successfully',
-        })
-      }
-      isSent.value = true
-      isLoading.value = false
-    } catch (err) {
-      handleError(err)
-      isLoading.value = false
-    }
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/auth/Login.vue b/resources/scripts/admin/views/auth/Login.vue
deleted file mode 100644
index d1c40a4a..00000000
--- a/resources/scripts/admin/views/auth/Login.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <form id="loginForm" class="mt-12 text-left" @submit.prevent="onSubmit">
-    <BaseInputGroup
-      :error="v$.email.$error && v$.email.$errors[0].$message"
-      :label="$t('login.email')"
-      class="mb-4"
-      required
-    >
-      <BaseInput
-        v-model="authStore.loginData.email"
-        :invalid="v$.email.$error"
-        focus
-        type="email"
-        name="email"
-        @input="v$.email.$touch()"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :error="v$.password.$error && v$.password.$errors[0].$message"
-      :label="$t('login.password')"
-      class="mb-4"
-      required
-    >
-      <BaseInput
-        v-model="authStore.loginData.password"
-        :invalid="v$.password.$error"
-        :type="getInputType"
-        name="password"
-        @input="v$.password.$touch()"
-      >
-        <template #right>
-          <BaseIcon
-            :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-            class="mr-1 text-muted cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          />
-        </template>
-      </BaseInput>
-    </BaseInputGroup>
-
-    <div class="mt-5 mb-8">
-      <div class="mb-4">
-        <router-link
-          to="forgot-password"
-          class="text-sm text-primary-400 hover:text-body"
-        >
-          {{ $t('login.forgot_password') }}
-        </router-link>
-      </div>
-    </div>
-    <BaseButton :loading="isLoading" type="submit">
-      {{ $t('login.login') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import http from '@/scripts/http'
-import { ref, computed, onMounted } from 'vue'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useRouter } from 'vue-router'
-import { required, email, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-import { useAuthStore } from '@/scripts/admin/stores/auth'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-const notificationStore = useNotificationStore()
-const authStore = useAuthStore()
-const { t } = useI18n()
-const router = useRouter()
-const isLoading = ref(false)
-let isShowPassword = ref(false)
-
-const rules = {
-  email: {
-    required: helpers.withMessage(t('validation.required'), required),
-    email: helpers.withMessage(t('validation.email_incorrect'), email),
-  },
-  password: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-}
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => authStore.loginData)
-)
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
-async function onSubmit() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  isLoading.value = true
-
-  try {
-    isLoading.value = true
-    await authStore.login(authStore.loginData)
-
-    router.push('/admin/dashboard')
-
-    notificationStore.showNotification({
-      type: 'success',
-      message: 'Logged in successfully.',
-    })
-  } catch (error) {
-    isLoading.value = false
-  }
-}
-
-// Pre-fill demo credentials if in demo environment
-onMounted(() => {
-  if (window.demo_mode) {
-    authStore.loginData.email = 'demo@invoiceshelf.com'
-    authStore.loginData.password = 'demo'
-  }
-})
-</script>
diff --git a/resources/scripts/admin/views/auth/RegisterWithInvitation.vue b/resources/scripts/admin/views/auth/RegisterWithInvitation.vue
deleted file mode 100644
index 15326fbd..00000000
--- a/resources/scripts/admin/views/auth/RegisterWithInvitation.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-  <div class="flex items-center justify-center min-h-screen bg-surface-secondary">
-    <div class="w-full max-w-md p-8">
-      <!-- Logo -->
-      <div class="mb-8 text-center">
-        <MainLogo
-          v-if="!loginPageLogo"
-          class="inline-block w-48 h-auto text-primary-500"
-        />
-        <img
-          v-else
-          :src="loginPageLogo"
-          class="inline-block w-48 h-auto"
-        />
-      </div>
-
-      <!-- Loading -->
-      <div v-if="isLoading" class="text-center">
-        <p class="text-muted">Loading invitation details...</p>
-      </div>
-
-      <!-- Invalid/Expired -->
-      <div v-else-if="error" class="text-center">
-        <BaseIcon
-          name="ExclamationCircleIcon"
-          class="w-16 h-16 mx-auto text-red-400 mb-4"
-        />
-        <h1 class="text-xl font-semibold text-heading mb-2">
-          Invalid Invitation
-        </h1>
-        <p class="text-muted">{{ error }}</p>
-        <router-link to="/login" class="text-primary-500 mt-4 inline-block">
-          Go to Login
-        </router-link>
-      </div>
-
-      <!-- Registration Form -->
-      <div v-else>
-        <div class="text-center mb-6">
-          <h1 class="text-2xl font-semibold text-heading">
-            Create Your Account
-          </h1>
-          <p class="text-muted mt-2">
-            You've been invited to join
-            <strong>{{ invitationDetails.company_name }}</strong> as
-            <strong>{{ invitationDetails.role_name }}</strong>
-          </p>
-        </div>
-
-        <BaseCard class="p-6">
-          <form @submit.prevent="submitRegistration">
-            <div class="space-y-4">
-              <BaseInputGroup
-                label="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="Email">
-                <BaseInput
-                  v-model="form.email"
-                  type="email"
-                  disabled
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                label="Password"
-                :error="v$.password.$error && v$.password.$errors[0].$message"
-                required
-              >
-                <BaseInput
-                  v-model="form.password"
-                  type="password"
-                  :invalid="v$.password.$error"
-                  @input="v$.password.$touch()"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                label="Confirm Password"
-                :error="
-                  v$.password_confirmation.$error &&
-                  v$.password_confirmation.$errors[0].$message
-                "
-                required
-              >
-                <BaseInput
-                  v-model="form.password_confirmation"
-                  type="password"
-                  :invalid="v$.password_confirmation.$error"
-                  @input="v$.password_confirmation.$touch()"
-                />
-              </BaseInputGroup>
-            </div>
-
-            <BaseButton
-              :loading="isSubmitting"
-              :disabled="isSubmitting"
-              class="w-full mt-6"
-              type="submit"
-            >
-              Create Account & Join
-            </BaseButton>
-          </form>
-        </BaseCard>
-
-        <div class="text-center mt-4">
-          <router-link to="/login" class="text-sm text-muted hover:text-primary-500">
-            Already have an account? Log in
-          </router-link>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { helpers, required, minLength, sameAs } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import http from '@/scripts/http'
-import MainLogo from '@/scripts/components/icons/MainLogo.vue'
-
-const route = useRoute()
-const router = useRouter()
-
-const loginPageLogo = computed(() => {
-  return window.login_page_logo || false
-})
-
-const isLoading = ref(true)
-const isSubmitting = ref(false)
-const error = ref(null)
-const invitationDetails = ref({})
-
-const form = reactive({
-  name: '',
-  email: '',
-  password: '',
-  password_confirmation: '',
-})
-
-const rules = computed(() => ({
-  name: {
-    required: helpers.withMessage('Name is required', required),
-  },
-  password: {
-    required: helpers.withMessage('Password is required', required),
-    minLength: helpers.withMessage('Password must be at least 8 characters', minLength(8)),
-  },
-  password_confirmation: {
-    required: helpers.withMessage('Please confirm your password', required),
-    sameAs: helpers.withMessage('Passwords do not match', sameAs(form.password)),
-  },
-}))
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => form)
-)
-
-const token = computed(() => route.query.invitation)
-
-onMounted(async () => {
-  if (!token.value) {
-    error.value = 'No invitation token provided.'
-    isLoading.value = false
-    return
-  }
-
-  try {
-    const response = await http.get(`/api/v1/invitations/${token.value}/details`)
-    invitationDetails.value = response.data
-    form.email = response.data.email
-  } catch (e) {
-    error.value = 'This invitation is invalid or has expired.'
-  } finally {
-    isLoading.value = false
-  }
-})
-
-async function submitRegistration() {
-  v$.value.$touch()
-  if (v$.value.$invalid) return
-
-  isSubmitting.value = true
-  try {
-    const response = await http.post('/api/v1/auth/register-with-invitation', {
-      name: form.name,
-      email: form.email,
-      password: form.password,
-      password_confirmation: form.password_confirmation,
-      invitation_token: token.value,
-    })
-
-    // Store the token and redirect
-    window.Ls.set('auth.token', response.data.token)
-    router.push('/admin/dashboard')
-  } catch (e) {
-    // Validation errors handled by http interceptor
-  } finally {
-    isSubmitting.value = false
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/auth/ResetPassword.vue b/resources/scripts/admin/views/auth/ResetPassword.vue
deleted file mode 100644
index d23e55ce..00000000
--- a/resources/scripts/admin/views/auth/ResetPassword.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-  <form id="loginForm" @submit.prevent="onSubmit">
-    <BaseInputGroup
-      :error="errorEmail"
-      :label="$t('login.email')"
-      class="mb-4"
-      required
-    >
-      <BaseInput
-        v-model="formData.email"
-        :invalid="v$.email.$error"
-        focus
-        type="email"
-        name="email"
-        @input="v$.email.$touch()"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :error="errorPassword"
-      :label="$t('login.password')"
-      class="mb-4"
-      required
-    >
-      <BaseInput
-        v-model="formData.password"
-        :invalid="v$.password.$error"
-        type="password"
-        name="password"
-        @input="v$.password.$touch()"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :error="errorConfirmPassword"
-      :label="$t('login.retype_password')"
-      class="mb-4"
-      required
-    >
-      <BaseInput
-        v-model="formData.password_confirmation"
-        :invalid="v$.password_confirmation.$error"
-        type="password"
-        name="password"
-        @input="v$.password_confirmation.$touch()"
-      />
-    </BaseInputGroup>
-
-    <BaseButton :loading="isLoading" type="submit" variant="primary">
-      {{ $t('login.reset_password') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script type="text/babel" setup>
-import { ref, computed, reactive } from 'vue'
-import useVuelidate from '@vuelidate/core'
-import { required, email, minLength, sameAs } from '@vuelidate/validators'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useRoute, useRouter } from 'vue-router'
-import http from '@/scripts/http'
-import { useI18n } from 'vue-i18n'
-import { handleError } from '@/scripts/helpers/error-handling'
-
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-const route = useRoute()
-const router = useRouter()
-
-const formData = reactive({
-  email: '',
-  password: '',
-  password_confirmation: '',
-})
-
-const isLoading = ref(false)
-
-const rules = computed(() => {
-  return {
-    email: { required, email },
-    password: {
-      required,
-      minLength: minLength(8),
-    },
-    password_confirmation: {
-      sameAsPassword: sameAs(formData.password),
-    },
-  }
-})
-
-const v$ = useVuelidate(rules, formData)
-
-const errorEmail = computed(() => {
-  if (!v$.value.email.$error) {
-    return ''
-  }
-  if (v$.value.email.required.$invalid) {
-    return t('validation.required')
-  }
-  if (v$.value.email.email) {
-    return t('validation.email_incorrect')
-  }
-  return false
-})
-
-const errorPassword = computed(() => {
-  if (!v$.value.password.$error) {
-    return ''
-  }
-
-  if (v$.value.password.required.$invalid) {
-    return t('validation.required')
-  }
-  if (v$.value.password.minLength) {
-    return t('validation.password_min_length', {
-      count: v$.value.password.minLength.$params.min,
-    })
-  }
-  return false
-})
-
-const errorConfirmPassword = computed(() => {
-  if (!v$.value.password_confirmation.$error) {
-    return ''
-  }
-  if (v$.value.password_confirmation.sameAsPassword.$invalid) {
-    return t('validation.password_incorrect')
-  }
-  return false
-})
-
-async function onSubmit(e) {
-  v$.value.$touch()
-
-  if (!v$.value.$invalid) {
-    try {
-      let data = {
-        email: formData.email,
-        password: formData.password,
-        password_confirmation: formData.password_confirmation,
-        token: route.params.token,
-      }
-      isLoading.value = true
-      let res = await http.post('/api/v1/auth/reset/password', data)
-      isLoading.value = false
-      if (res.data) {
-        notificationStore.showNotification({
-          type: 'success',
-          message: t('login.password_reset_successfully'),
-        })
-        router.push('/login')
-      }
-    } catch (err) {
-      handleError(err)
-        isLoading.value = false
-      if (err.response && err.response.status === 403) {
-        // notificationStore.showNotification({
-        //   type: 'error',
-        //   message: t('validation.email_incorrect'),
-        // })
-      }
-    }
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/customers/Create.vue b/resources/scripts/admin/views/customers/Create.vue
deleted file mode 100644
index 8f4b06e5..00000000
--- a/resources/scripts/admin/views/customers/Create.vue
+++ /dev/null
@@ -1,757 +0,0 @@
-<template>
-  <BasePage>
-    <form @submit.prevent="submitCustomerData">
-      <BasePageHeader :title="pageTitle">
-        <BaseBreadcrumb>
-          <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-
-          <BaseBreadcrumbItem
-            :title="$t('customers.customer', 2)"
-            to="/admin/customers"
-          />
-
-          <BaseBreadcrumb-item :title="pageTitle" to="#" active />
-        </BaseBreadcrumb>
-
-        <template #actions>
-          <div class="flex items-center justify-end">
-            <BaseButton type="submit" :loading="isSaving" :disabled="isSaving">
-              <template #left="slotProps">
-                <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-              </template>
-              {{
-                isEdit
-                  ? $t('customers.update_customer')
-                  : $t('customers.save_customer')
-              }}
-            </BaseButton>
-          </div>
-        </template>
-      </BasePageHeader>
-
-      <BaseCard class="mt-5">
-        <!-- Basic Info -->
-        <div class="grid grid-cols-5 gap-4 mb-8">
-          <h6 class="col-span-5 text-lg font-semibold text-left lg:col-span-1">
-            {{ $t('customers.basic_info') }}
-          </h6>
-
-          <BaseInputGrid class="col-span-5 lg:col-span-4">
-            <BaseInputGroup
-              :label="$t('customers.display_name')"
-              required
-              :error="
-                v$.currentCustomer.name.$error &&
-                v$.currentCustomer.name.$errors[0].$message
-              "
-              :content-loading="isFetchingInitialData"
-            >
-              <BaseInput
-                v-model="customerStore.currentCustomer.name"
-                :content-loading="isFetchingInitialData"
-                type="text"
-                name="name"
-                class=""
-                :invalid="v$.currentCustomer.name.$error"
-                @input="v$.currentCustomer.name.$touch()"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.primary_contact_name')"
-              :content-loading="isFetchingInitialData"
-            >
-              <BaseInput
-                v-model.trim="customerStore.currentCustomer.contact_name"
-                :content-loading="isFetchingInitialData"
-                type="text"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :error="
-                v$.currentCustomer.email.$error &&
-                v$.currentCustomer.email.$errors[0].$message
-              "
-              :content-loading="isFetchingInitialData"
-              :label="$t('customers.email')"
-            >
-              <BaseInput
-                v-model.trim="customerStore.currentCustomer.email"
-                :content-loading="isFetchingInitialData"
-                type="text"
-                name="email"
-                :invalid="v$.currentCustomer.email.$error"
-                @input="v$.currentCustomer.email.$touch()"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.phone')"
-              :content-loading="isFetchingInitialData"
-            >
-              <BaseInput
-                v-model.trim="customerStore.currentCustomer.phone"
-                :content-loading="isFetchingInitialData"
-                type="text"
-                name="phone"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.primary_currency')"
-              :content-loading="isFetchingInitialData"
-              :error="
-                v$.currentCustomer.currency_id.$error &&
-                v$.currentCustomer.currency_id.$errors[0].$message
-              "
-              required
-            >
-              <BaseMultiselect
-                v-model="customerStore.currentCustomer.currency_id"
-                value-prop="id"
-                label="name"
-                track-by="name"
-                :content-loading="isFetchingInitialData"
-                :options="globalStore.currencies"
-                searchable
-                :can-deselect="false"
-                :placeholder="$t('customers.select_currency')"
-                :invalid="v$.currentCustomer.currency_id.$error"
-                class="w-full"
-              >
-              </BaseMultiselect>
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :error="
-                v$.currentCustomer.website.$error &&
-                v$.currentCustomer.website.$errors[0].$message
-              "
-              :label="$t('customers.website')"
-              :content-loading="isFetchingInitialData"
-            >
-              <BaseInput
-                v-model="customerStore.currentCustomer.website"
-                :content-loading="isFetchingInitialData"
-                type="url"
-                @input="v$.currentCustomer.website.$touch()"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.prefix')"
-              :error="
-                v$.currentCustomer.prefix.$error &&
-                v$.currentCustomer.prefix.$errors[0].$message
-              "
-              :content-loading="isFetchingInitialData"
-            >
-              <BaseInput
-                v-model="customerStore.currentCustomer.prefix"
-                :content-loading="isFetchingInitialData"
-                type="text"
-                name="name"
-                class=""
-                :invalid="v$.currentCustomer.prefix.$error"
-                @input="v$.currentCustomer.prefix.$touch()"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.tax_id')"
-              :content-loading="isFetchingInitialData"
-            >
-              <BaseInput
-                v-model="customerStore.currentCustomer.tax_id"
-                :content-loading="isFetchingInitialData"
-                type="text"
-                name="tax_id"
-              />
-            </BaseInputGroup>
-
-          </BaseInputGrid>
-        </div>
-
-        <BaseDivider class="mb-5 md:mb-8" />
-
-        <!-- Portal Access-->
-
-        <div class="grid grid-cols-5 gap-4 mb-8">
-          <h6 class="col-span-5 text-lg font-semibold text-left lg:col-span-1">
-            {{ $t('customers.portal_access') }}
-          </h6>
-
-          <BaseInputGrid class="col-span-5 lg:col-span-4">
-            <div class="md:col-span-2">
-              <p class="text-sm text-muted">
-                {{ $t('customers.portal_access_text') }}
-              </p>
-
-              <BaseSwitch
-                v-model="customerStore.currentCustomer.enable_portal"
-                class="mt-1 flex"
-              />
-            </div>
-
-            <BaseInputGroup
-              v-if="customerStore.currentCustomer.enable_portal"
-              :content-loading="isFetchingInitialData"
-              :label="$t('customers.portal_access_url')"
-              class="md:col-span-2"
-              :help-text="$t('customers.portal_access_url_help')"
-            >
-              <CopyInputField :token="getCustomerPortalUrl" />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              v-if="customerStore.currentCustomer.enable_portal"
-              :content-loading="isFetchingInitialData"
-              :error="
-                v$.currentCustomer.password.$error &&
-                v$.currentCustomer.password.$errors[0].$message
-              "
-              :label="$t('customers.password')"
-            >
-              <BaseInput
-                v-model.trim="customerStore.currentCustomer.password"
-                :content-loading="isFetchingInitialData"
-                :type="isShowPassword ? 'text' : 'password'"
-                name="password"
-                :invalid="v$.currentCustomer.password.$error"
-                @input="v$.currentCustomer.password.$touch()"
-              >
-                <template #right>
-                  <BaseIcon
-                    :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                    class="mr-1 text-muted cursor-pointer"
-                    @click="isShowPassword = !isShowPassword"
-                  />
-                </template>
-              </BaseInput>
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              v-if="customerStore.currentCustomer.enable_portal"
-              :error="
-                v$.currentCustomer.confirm_password.$error &&
-                v$.currentCustomer.confirm_password.$errors[0].$message
-              "
-              :content-loading="isFetchingInitialData"
-              :label="$t('customers.confirm_password')"
-            >
-              <BaseInput
-                v-model.trim="customerStore.currentCustomer.confirm_password"
-                :content-loading="isFetchingInitialData"
-                :type="isShowConfirmPassword ? 'text' : 'password'"
-                name="confirm_password"
-                :invalid="v$.currentCustomer.confirm_password.$error"
-                @input="v$.currentCustomer.confirm_password.$touch()"
-              >
-                <template #right>
-                  <BaseIcon
-                    :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                    class="mr-1 text-muted cursor-pointer"
-                    @click="isShowConfirmPassword = !isShowConfirmPassword"
-                  />
-                </template>
-              </BaseInput>
-            </BaseInputGroup>
-          </BaseInputGrid>
-        </div>
-
-        <BaseDivider class="mb-5 md:mb-8" />
-
-        <!-- Billing Address   -->
-        <div class="grid grid-cols-5 gap-4 mb-8">
-          <h6 class="col-span-5 text-lg font-semibold text-left lg:col-span-1">
-            {{ $t('customers.billing_address') }}
-          </h6>
-
-          <BaseInputGrid
-            v-if="customerStore.currentCustomer.billing"
-            class="col-span-5 lg:col-span-4"
-          >
-            <BaseInputGroup
-              :label="$t('customers.name')"
-              :content-loading="isFetchingInitialData"
-            >
-              <BaseInput
-                v-model.trim="customerStore.currentCustomer.billing.name"
-                :content-loading="isFetchingInitialData"
-                type="text"
-                class="w-full"
-                name="address_name"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.country')"
-              :content-loading="isFetchingInitialData"
-            >
-              <BaseMultiselect
-                v-model="customerStore.currentCustomer.billing.country_id"
-                value-prop="id"
-                label="name"
-                track-by="name"
-                resolve-on-load
-                searchable
-                :content-loading="isFetchingInitialData"
-                :options="globalStore.countries"
-                :placeholder="$t('general.select_country')"
-                class="w-full"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.state')"
-              :content-loading="isFetchingInitialData"
-            >
-              <BaseInput
-                v-model="customerStore.currentCustomer.billing.state"
-                :content-loading="isFetchingInitialData"
-                name="billing.state"
-                type="text"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :content-loading="isFetchingInitialData"
-              :label="$t('customers.city')"
-            >
-              <BaseInput
-                v-model="customerStore.currentCustomer.billing.city"
-                :content-loading="isFetchingInitialData"
-                name="billing.city"
-                type="text"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.address')"
-              :error="
-                (v$.currentCustomer.billing.address_street_1.$error &&
-                  v$.currentCustomer.billing.address_street_1.$errors[0]
-                    .$message) ||
-                (v$.currentCustomer.billing.address_street_2.$error &&
-                  v$.currentCustomer.billing.address_street_2.$errors[0]
-                    .$message)
-              "
-              :content-loading="isFetchingInitialData"
-            >
-              <BaseTextarea
-                v-model.trim="
-                  customerStore.currentCustomer.billing.address_street_1
-                "
-                :content-loading="isFetchingInitialData"
-                :placeholder="$t('general.street_1')"
-                type="text"
-                name="billing_street1"
-                :container-class="`mt-3`"
-                @input="v$.currentCustomer.billing.address_street_1.$touch()"
-              />
-
-              <BaseTextarea
-                v-model.trim="
-                  customerStore.currentCustomer.billing.address_street_2
-                "
-                :content-loading="isFetchingInitialData"
-                :placeholder="$t('general.street_2')"
-                type="text"
-                class="mt-3"
-                name="billing_street2"
-                :container-class="`mt-3`"
-                @input="v$.currentCustomer.billing.address_street_2.$touch()"
-              />
-            </BaseInputGroup>
-
-            <div class="space-y-6">
-              <BaseInputGroup
-                :content-loading="isFetchingInitialData"
-                :label="$t('customers.phone')"
-                class="text-left"
-              >
-                <BaseInput
-                  v-model.trim="customerStore.currentCustomer.billing.phone"
-                  :content-loading="isFetchingInitialData"
-                  type="text"
-                  name="phone"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                :label="$t('customers.zip_code')"
-                :content-loading="isFetchingInitialData"
-                class="mt-2 text-left"
-              >
-                <BaseInput
-                  v-model.trim="customerStore.currentCustomer.billing.zip"
-                  :content-loading="isFetchingInitialData"
-                  type="text"
-                  name="zip"
-                />
-              </BaseInputGroup>
-            </div>
-          </BaseInputGrid>
-        </div>
-
-        <BaseDivider class="mb-5 md:mb-8" />
-
-        <!-- Billing Address Copy Button  -->
-        <div
-          class="flex items-center justify-start mb-6 md:justify-end md:mb-0"
-        >
-          <div class="p-1">
-            <BaseButton
-              type="button"
-              :content-loading="isFetchingInitialData"
-              size="sm"
-              variant="primary-outline"
-              @click="customerStore.copyAddress(true)"
-            >
-              <template #left="slotProps">
-                <BaseIcon
-                  name="DocumentDuplicateIcon"
-                  :class="slotProps.class"
-                />
-              </template>
-              {{ $t('customers.copy_billing_address') }}
-            </BaseButton>
-          </div>
-        </div>
-
-        <!-- Shipping Address  -->
-        <div
-          v-if="customerStore.currentCustomer.shipping"
-          class="grid grid-cols-5 gap-4 mb-8"
-        >
-          <h6 class="col-span-5 text-lg font-semibold text-left lg:col-span-1">
-            {{ $t('customers.shipping_address') }}
-          </h6>
-
-          <BaseInputGrid class="col-span-5 lg:col-span-4">
-            <BaseInputGroup
-              :content-loading="isFetchingInitialData"
-              :label="$t('customers.name')"
-            >
-              <BaseInput
-                v-model.trim="customerStore.currentCustomer.shipping.name"
-                :content-loading="isFetchingInitialData"
-                type="text"
-                name="address_name"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.country')"
-              :content-loading="isFetchingInitialData"
-            >
-              <BaseMultiselect
-                v-model="customerStore.currentCustomer.shipping.country_id"
-                value-prop="id"
-                label="name"
-                track-by="name"
-                resolve-on-load
-                searchable
-                :content-loading="isFetchingInitialData"
-                :options="globalStore.countries"
-                :placeholder="$t('general.select_country')"
-                class="w-full"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.state')"
-              :content-loading="isFetchingInitialData"
-            >
-              <BaseInput
-                v-model="customerStore.currentCustomer.shipping.state"
-                :content-loading="isFetchingInitialData"
-                name="shipping.state"
-                type="text"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :content-loading="isFetchingInitialData"
-              :label="$t('customers.city')"
-            >
-              <BaseInput
-                v-model="customerStore.currentCustomer.shipping.city"
-                :content-loading="isFetchingInitialData"
-                name="shipping.city"
-                type="text"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.address')"
-              :content-loading="isFetchingInitialData"
-              :error="
-                (v$.currentCustomer.shipping.address_street_1.$error &&
-                  v$.currentCustomer.shipping.address_street_1.$errors[0]
-                    .$message) ||
-                (v$.currentCustomer.shipping.address_street_2.$error &&
-                  v$.currentCustomer.shipping.address_street_2.$errors[0]
-                    .$message)
-              "
-            >
-              <BaseTextarea
-                v-model.trim="
-                  customerStore.currentCustomer.shipping.address_street_1
-                "
-                :content-loading="isFetchingInitialData"
-                type="text"
-                :placeholder="$t('general.street_1')"
-                name="shipping_street1"
-                @input="v$.currentCustomer.shipping.address_street_1.$touch()"
-              />
-
-              <BaseTextarea
-                v-model.trim="
-                  customerStore.currentCustomer.shipping.address_street_2
-                "
-                :content-loading="isFetchingInitialData"
-                type="text"
-                :placeholder="$t('general.street_2')"
-                name="shipping_street2"
-                class="mt-3"
-                :container-class="`mt-3`"
-                @input="v$.currentCustomer.shipping.address_street_2.$touch()"
-              />
-            </BaseInputGroup>
-
-            <div class="space-y-6">
-              <BaseInputGroup
-                :content-loading="isFetchingInitialData"
-                :label="$t('customers.phone')"
-                class="text-left"
-              >
-                <BaseInput
-                  v-model.trim="customerStore.currentCustomer.shipping.phone"
-                  :content-loading="isFetchingInitialData"
-                  type="text"
-                  name="phone"
-                />
-              </BaseInputGroup>
-
-              <BaseInputGroup
-                :label="$t('customers.zip_code')"
-                :content-loading="isFetchingInitialData"
-                class="mt-2 text-left"
-              >
-                <BaseInput
-                  v-model.trim="customerStore.currentCustomer.shipping.zip"
-                  :content-loading="isFetchingInitialData"
-                  type="text"
-                  name="zip"
-                />
-              </BaseInputGroup>
-            </div>
-          </BaseInputGrid>
-        </div>
-
-        <BaseDivider
-          v-if="customFieldStore.customFields.length > 0"
-          class="mb-5 md:mb-8"
-        />
-
-        <!-- Customer Custom Fields -->
-        <div class="grid grid-cols-5 gap-2 mb-8">
-          <h6
-            v-if="customFieldStore.customFields.length > 0"
-            class="col-span-5 text-lg font-semibold text-left lg:col-span-1"
-          >
-            {{ $t('settings.custom_fields.title') }}
-          </h6>
-
-          <div class="col-span-5 lg:col-span-4">
-            <CustomerCustomFields
-              type="Customer"
-              :store="customerStore"
-              store-prop="currentCustomer"
-              :is-edit="isEdit"
-              :is-loading="isLoadingContent"
-              :custom-field-scope="customFieldValidationScope"
-            />
-          </div>
-        </div>
-      </BaseCard>
-    </form>
-  </BasePage>
-</template>
-
-<script setup>
-import { computed, onMounted, ref } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import {
-  required,
-  minLength,
-  url,
-  maxLength,
-  helpers,
-  email,
-  sameAs,
-  requiredIf,
-} from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
-import CustomerCustomFields from '@/scripts/admin/components/custom-fields/CreateCustomFields.vue'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import CopyInputField from '@/scripts/admin/components/CopyInputField.vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const customerStore = useCustomerStore()
-const customFieldStore = useCustomFieldStore()
-const globalStore = useGlobalStore()
-const companyStore = useCompanyStore()
-
-const customFieldValidationScope = 'customFields'
-
-const { t } = useI18n()
-
-const router = useRouter()
-const route = useRoute()
-
-let isFetchingInitialData = ref(false)
-let isShowPassword = ref(false)
-let isShowConfirmPassword = ref(false)
-
-let active = ref(false)
-const isSaving = ref(false)
-
-const isEdit = computed(() => route.name === 'customers.edit')
-
-let isLoadingContent = computed(() => customerStore.isFetchingInitialSettings)
-
-const pageTitle = computed(() =>
-  isEdit.value ? t('customers.edit_customer') : t('customers.new_customer')
-)
-
-const rules = computed(() => {
-  return {
-    currentCustomer: {
-      name: {
-        required: helpers.withMessage(t('validation.required'), required),
-        minLength: helpers.withMessage(
-          t('validation.name_min_length', { count: 3 }),
-          minLength(3)
-        ),
-      },
-      prefix: {
-        minLength: helpers.withMessage(
-          t('validation.name_min_length', { count: 3 }),
-          minLength(3)
-        ),
-      },
-      currency_id: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-
-      email: {
-        required: helpers.withMessage(
-          t('validation.required'),
-          requiredIf(customerStore.currentCustomer.enable_portal == true)
-        ),
-        email: helpers.withMessage(t('validation.email_incorrect'), email),
-      },
-      password: {
-        required: helpers.withMessage(
-          t('validation.required'),
-          requiredIf(
-            customerStore.currentCustomer.enable_portal == true &&
-              !customerStore.currentCustomer.password_added
-          )
-        ),
-        minLength: helpers.withMessage(
-          t('validation.password_min_length', { count: 8 }),
-          minLength(8)
-        ),
-      },
-      confirm_password: {
-        sameAsPassword: helpers.withMessage(
-          t('validation.password_incorrect'),
-          sameAs(customerStore.currentCustomer.password)
-        ),
-      },
-
-      website: {
-        url: helpers.withMessage(t('validation.invalid_url'), url),
-      },
-      billing: {
-        address_street_1: {
-          maxLength: helpers.withMessage(
-            t('validation.address_maxlength', { count: 255 }),
-            maxLength(255)
-          ),
-        },
-
-        address_street_2: {
-          maxLength: helpers.withMessage(
-            t('validation.address_maxlength', { count: 255 }),
-            maxLength(255)
-          ),
-        },
-      },
-
-      shipping: {
-        address_street_1: {
-          maxLength: helpers.withMessage(
-            t('validation.address_maxlength', { count: 255 }),
-            maxLength(255)
-          ),
-        },
-
-        address_street_2: {
-          maxLength: helpers.withMessage(
-            t('validation.address_maxlength', { count: 255 }),
-            maxLength(255)
-          ),
-        },
-      },
-    },
-  }
-})
-
-const getCustomerPortalUrl = computed(() => {
-  return `${window.location.origin}/${companyStore.selectedCompany.slug}/customer/login`
-})
-
-const v$ = useVuelidate(rules, customerStore, {
-  $scope: customFieldValidationScope,
-})
-
-customerStore.resetCurrentCustomer()
-
-customerStore.fetchCustomerInitialSettings(isEdit.value)
-
-async function submitCustomerData() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-
-  let data = {
-    ...customerStore.currentCustomer,
-  }
-
-  let response = null
-
-  try {
-    const action = isEdit.value
-      ? customerStore.updateCustomer
-      : customerStore.addCustomer
-    response = await action(data)
-  } catch (err) {
-    isSaving.value = false
-    return
-  }
-
-  router.push(`/admin/customers/${response.data.data.id}/view`)
-}
-</script>
diff --git a/resources/scripts/admin/views/customers/Index.vue b/resources/scripts/admin/views/customers/Index.vue
deleted file mode 100644
index 902ef71e..00000000
--- a/resources/scripts/admin/views/customers/Index.vue
+++ /dev/null
@@ -1,366 +0,0 @@
-<template>
-  <BasePage>
-    <!-- Page Header Section -->
-    <BasePageHeader :title="$t('customers.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem
-          :title="$t('customers.customer', 2)"
-          to="#"
-          active
-        />
-      </BaseBreadcrumb>
-
-      <template #actions>
-        <div class="flex items-center justify-end space-x-5">
-          <BaseButton
-            v-show="customerStore.totalCustomers"
-            variant="primary-outline"
-            @click="toggleFilter"
-          >
-            {{ $t('general.filter') }}
-            <template #right="slotProps">
-              <BaseIcon
-                v-if="!showFilters"
-                name="FunnelIcon"
-                :class="slotProps.class"
-              />
-              <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
-            </template>
-          </BaseButton>
-
-          <BaseButton
-            v-if="userStore.hasAbilities(abilities.CREATE_CUSTOMER)"
-            @click="$router.push('customers/create')"
-          >
-            <template #left="slotProps">
-              <BaseIcon name="PlusIcon" :class="slotProps.class" />
-            </template>
-            {{ $t('customers.new_customer') }}
-          </BaseButton>
-        </div>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper :show="showFilters" class="mt-5" @clear="clearFilter">
-      <BaseInputGroup :label="$t('customers.display_name')" class="text-left">
-        <BaseInput
-          v-model="filters.display_name"
-          type="text"
-          name="name"
-          autocomplete="off"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('customers.contact_name')" class="text-left">
-        <BaseInput
-          v-model="filters.contact_name"
-          type="text"
-          name="address_name"
-          autocomplete="off"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('customers.phone')" class="text-left">
-        <BaseInput
-          v-model="filters.phone"
-          type="text"
-          name="phone"
-          autocomplete="off"
-        />
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <BaseEmptyPlaceholder
-      v-show="showEmptyScreen"
-      :title="$t('customers.no_customers')"
-      :description="$t('customers.list_of_customers')"
-    >
-      <AstronautIcon class="mt-5 mb-4" />
-
-      <template #actions>
-        <BaseButton
-          v-if="userStore.hasAbilities(abilities.CREATE_CUSTOMER)"
-          variant="primary-outline"
-          @click="$router.push('/admin/customers/create')"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="PlusIcon" :class="slotProps.class" />
-          </template>
-          {{ $t('customers.add_new_customer') }}
-        </BaseButton>
-      </template>
-    </BaseEmptyPlaceholder>
-
-    <!-- Total no of Customers in Table -->
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <div class="relative flex items-center justify-end h-5">
-        <BaseDropdown v-if="customerStore.selectedCustomers.length">
-          <template #activator>
-            <span
-              class="
-                flex
-                text-sm
-                font-medium
-                cursor-pointer
-                select-none
-                text-primary-400
-              "
-            >
-              {{ $t('general.actions') }}
-
-              <BaseIcon name="ChevronDownIcon" />
-            </span>
-          </template>
-          <BaseDropdownItem @click="removeMultipleCustomers">
-            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </div>
-
-      <!-- Table Section -->
-      <BaseTable
-        ref="tableComponent"
-        class="mt-3"
-        :data="fetchData"
-        :columns="customerColumns"
-      >
-        <!-- Select All Checkbox -->
-        <template #header>
-          <div class="absolute z-10 items-center left-6 top-2.5 select-none">
-            <BaseCheckbox
-              v-model="selectAllFieldStatus"
-              variant="primary"
-              @change="customerStore.selectAllCustomers"
-            />
-          </div>
-        </template>
-
-        <template #cell-status="{ row }">
-          <div class="relative block">
-            <BaseCheckbox
-              :id="row.data.id"
-              v-model="selectField"
-              :value="row.data.id"
-              variant="primary"
-            />
-          </div>
-        </template>
-
-        <template #cell-name="{ row }">
-          <router-link :to="{ path: `customers/${row.data.id}/view` }">
-            <BaseText
-              :text="row.data.name"
-              tag="span"
-              class="font-medium text-primary-500 flex flex-col"
-            />
-            <BaseText
-              :text="row.data.contact_name ? row.data.contact_name : ''"
-              tag="span"
-              class="text-xs text-subtle"
-            />
-          </router-link>
-        </template>
-
-        <template #cell-phone="{ row }">
-          <span>
-            {{ row.data.phone ? row.data.phone : '-' }}
-          </span>
-        </template>
-
-        <template #cell-due_amount="{ row }">
-          <BaseFormatMoney
-            :amount="row.data.due_amount || 0"
-            :currency="row.data.currency"
-          />
-        </template>
-
-        <template #cell-created_at="{ row }">
-          <span>{{ row.data.formatted_created_at }}</span>
-        </template>
-
-        <template v-if="hasAtleastOneAbility()" #cell-actions="{ row }">
-          <CustomerDropdown
-            :row="row.data"
-            :table="tableComponent"
-            :load-data="refreshTable"
-          />
-        </template>
-      </BaseTable>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { debouncedWatch } from '@vueuse/core'
-import moment from 'moment'
-import { reactive, ref, inject, computed, onUnmounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useUserStore } from '@/scripts/admin/stores/user'
-
-import abilities from '@/scripts/admin/stub/abilities'
-
-import CustomerDropdown from '@/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue'
-import AstronautIcon from '@/scripts/components/icons/empty/AstronautIcon.vue'
-
-const companyStore = useCompanyStore()
-const dialogStore = useDialogStore()
-const customerStore = useCustomerStore()
-const userStore = useUserStore()
-
-let tableComponent = ref(null)
-let showFilters = ref(false)
-let isFetchingInitialData = ref(true)
-const { t } = useI18n()
-
-let filters = reactive({
-  display_name: '',
-  contact_name: '',
-  phone: '',
-})
-
-const showEmptyScreen = computed(
-  () => !customerStore.totalCustomers && !isFetchingInitialData.value
-)
-
-const selectField = computed({
-  get: () => customerStore.selectedCustomers,
-  set: (value) => {
-    return customerStore.selectCustomer(value)
-  },
-})
-
-const selectAllFieldStatus = computed({
-  get: () => customerStore.selectAllField,
-  set: (value) => {
-    return customerStore.setSelectAllState(value)
-  },
-})
-
-const customerColumns = computed(() => {
-  return [
-    {
-      key: 'status',
-      thClass: 'extra w-10 pr-0',
-      sortable: false,
-      tdClass: 'font-medium text-heading pr-0',
-    },
-    {
-      key: 'name',
-      label: t('customers.name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    { key: 'phone', label: t('customers.phone') },
-    { key: 'due_amount', label: t('customers.amount_due') },
-    {
-      key: 'created_at',
-      label: t('items.added_on'),
-    },
-    {
-      key: 'actions',
-      tdClass: 'text-right text-sm font-medium pl-0',
-      thClass: 'pl-0',
-      sortable: false,
-    },
-  ]
-})
-
-debouncedWatch(
-  filters,
-  () => {
-    setFilters()
-  },
-  { debounce: 500 }
-)
-
-onUnmounted(() => {
-  if (customerStore.selectAllField) {
-    customerStore.selectAllCustomers()
-  }
-})
-
-function refreshTable() {
-  tableComponent.value.refresh()
-}
-
-function setFilters() {
-  refreshTable()
-}
-
-function hasAtleastOneAbility() {
-  return userStore.hasAbilities([
-    abilities.DELETE_CUSTOMER,
-    abilities.EDIT_CUSTOMER,
-    abilities.VIEW_CUSTOMER,
-  ])
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    display_name: filters.display_name,
-    contact_name: filters.contact_name,
-    phone: filters.phone,
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  isFetchingInitialData.value = true
-  let response = await customerStore.fetchCustomers(data)
-  isFetchingInitialData.value = false
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-
-function clearFilter() {
-  filters.display_name = ''
-  filters.contact_name = ''
-  filters.phone = ''
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-
-let date = ref(new Date())
-
-date.value = moment(date).format('YYYY-MM-DD')
-
-function removeMultipleCustomers() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('customers.confirm_delete', 2),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((res) => {
-      if (res) {
-        customerStore.deleteMultipleCustomers().then((response) => {
-          if (response.data) {
-            refreshTable()
-          }
-        })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/views/customers/View.vue b/resources/scripts/admin/views/customers/View.vue
deleted file mode 100644
index e9a935fb..00000000
--- a/resources/scripts/admin/views/customers/View.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-  <BasePage class="xl:pl-96">
-    <BasePageHeader :title="pageTitle">
-      <template #actions>
-        <router-link
-          v-if="userStore.hasAbilities(abilities.EDIT_CUSTOMER)"
-          :to="`/admin/customers/${route.params.id}/edit`"
-        >
-          <BaseButton
-            class="mr-3"
-            variant="primary-outline"
-            :content-loading="isLoading"
-          >
-            {{ $t('general.edit') }}
-          </BaseButton>
-        </router-link>
-
-        <BaseDropdown
-          v-if="canCreateTransaction()"
-          position="bottom-end"
-          :content-loading="isLoading"
-        >
-          <template #activator>
-            <BaseButton
-              class="mr-3"
-              variant="primary"
-              :content-loading="isLoading"
-            >
-              {{ $t('customers.new_transaction') }}
-            </BaseButton>
-          </template>
-
-          <router-link
-            v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
-            :to="`/admin/estimates/create?customer=${$route.params.id}`"
-          >
-            <BaseDropdownItem class="">
-              <BaseIcon name="DocumentIcon" class="mr-3 text-body" />
-              {{ $t('estimates.new_estimate') }}
-            </BaseDropdownItem>
-          </router-link>
-
-          <router-link
-            v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
-            :to="`/admin/invoices/create?customer=${$route.params.id}`"
-          >
-            <BaseDropdownItem>
-              <BaseIcon name="DocumentTextIcon" class="mr-3 text-body" />
-              {{ $t('invoices.new_invoice') }}
-            </BaseDropdownItem>
-          </router-link>
-
-          <router-link
-            v-if="userStore.hasAbilities(abilities.CREATE_PAYMENT)"
-            :to="`/admin/payments/create?customer=${$route.params.id}`"
-          >
-            <BaseDropdownItem>
-              <BaseIcon name="CreditCardIcon" class="mr-3 text-body" />
-              {{ $t('payments.new_payment') }}
-            </BaseDropdownItem>
-          </router-link>
-
-          <router-link
-            v-if="userStore.hasAbilities(abilities.CREATE_EXPENSE)"
-            :to="`/admin/expenses/create?customer=${$route.params.id}`"
-          >
-            <BaseDropdownItem>
-              <BaseIcon name="CalculatorIcon" class="mr-3 text-body" />
-              {{ $t('expenses.new_expense') }}
-            </BaseDropdownItem>
-          </router-link>
-        </BaseDropdown>
-
-        <CustomerDropdown
-          v-if="hasAtleastOneAbility()"
-          :class="{
-            'ml-3': isLoading,
-          }"
-          :row="customerStore.selectedViewCustomer"
-          :load-data="refreshData"
-        />
-      </template>
-    </BasePageHeader>
-
-    <!-- Customer View Sidebar -->
-    <CustomerViewSidebar />
-
-    <!-- Chart -->
-    <CustomerChart />
-  </BasePage>
-</template>
-
-<script setup>
-import CustomerViewSidebar from './partials/CustomerViewSidebar.vue'
-import CustomerChart from './partials/CustomerChart.vue'
-import { ref, computed, inject } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import CustomerDropdown from '@/scripts/admin/components/dropdowns/CustomerIndexDropdown.vue'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const utils = inject('utils')
-const dialogStore = useDialogStore()
-const customerStore = useCustomerStore()
-const userStore = useUserStore()
-const { t } = useI18n()
-
-const router = useRouter()
-const route = useRoute()
-const customer = ref(null)
-
-const pageTitle = computed(() => {
-  return customerStore.selectedViewCustomer.customer
-    ? customerStore.selectedViewCustomer.customer.name
-    : ''
-})
-
-let isLoading = computed(() => {
-  return customerStore.isFetchingViewData
-})
-
-function canCreateTransaction() {
-  return userStore.hasAbilities([
-    abilities.CREATE_ESTIMATE,
-    abilities.CREATE_INVOICE,
-    abilities.CREATE_PAYMENT,
-    abilities.CREATE_EXPENSE,
-  ])
-}
-
-function hasAtleastOneAbility() {
-  return userStore.hasAbilities([
-    abilities.DELETE_CUSTOMER,
-    abilities.EDIT_CUSTOMER,
-  ])
-}
-
-function refreshData() {
-  router.push('/admin/customers')
-}
-</script>
diff --git a/resources/scripts/admin/views/customers/partials/CustomerChart.vue b/resources/scripts/admin/views/customers/partials/CustomerChart.vue
deleted file mode 100644
index dbbede03..00000000
--- a/resources/scripts/admin/views/customers/partials/CustomerChart.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<template>
-  <BaseCard class="flex flex-col mt-6">
-    <ChartPlaceholder v-if="customerStore.isFetchingViewData" />
-
-    <div v-else class="grid grid-cols-12">
-      <div class="col-span-12 xl:col-span-9 xxl:col-span-10">
-        <div class="flex justify-between mt-1 mb-6">
-          <h6 class="flex items-center">
-            <BaseIcon name="ChartBarSquareIcon" class="h-5 text-primary-400" />
-            {{ $t('dashboard.monthly_chart.title') }}
-          </h6>
-
-          <div class="w-40 h-10">
-            <BaseMultiselect
-              v-model="selectedYear"
-              :options="years"
-              :allow-empty="false"
-              :show-labels="false"
-              :placeholder="$t('dashboard.select_year')"
-              :can-deselect="false"
-              @select="onChangeYear"
-            />
-          </div>
-        </div>
-
-        <LineChart
-          v-if="isLoading"
-          :invoices="getChartInvoices"
-          :expenses="getChartExpenses"
-          :receipts="getReceiptTotals"
-          :income="getNetProfits"
-          :labels="getChartMonths"
-          class="sm:w-full"
-        />
-      </div>
-
-      <div
-        class="
-          grid
-          col-span-12
-          mt-6
-          text-center
-          xl:mt-0
-          sm:grid-cols-4
-          xl:text-right xl:col-span-3 xl:grid-cols-1
-          xxl:col-span-2
-        "
-      >
-        <div class="px-6 py-2">
-          <span class="text-xs leading-5 lg:text-sm">
-            {{ $t('dashboard.chart_info.total_sales') }}
-          </span>
-          <br />
-          <span
-            v-if="isLoading"
-            class="block mt-1 text-xl font-semibold leading-8"
-          >
-            <BaseFormatMoney
-              :amount="chartData.salesTotal"
-              :currency="companyStore.selectedCompanyCurrency"
-            />
-          </span>
-        </div>
-
-        <div class="px-6 py-2">
-          <span class="text-xs leading-5 lg:text-sm">
-            {{ $t('dashboard.chart_info.total_receipts') }}
-          </span>
-          <br />
-
-          <span
-            v-if="isLoading"
-            class="block mt-1 text-xl font-semibold leading-8"
-            style="color: #00c99c"
-          >
-            <BaseFormatMoney
-              :amount="chartData.totalReceipts"
-              :currency="companyStore.selectedCompanyCurrency"
-            />
-          </span>
-        </div>
-
-        <div class="px-6 py-2">
-          <span class="text-xs leading-5 lg:text-sm">
-            {{ $t('dashboard.chart_info.total_expense') }}
-          </span>
-          <br />
-          <span
-            v-if="isLoading"
-            class="block mt-1 text-xl font-semibold leading-8"
-            style="color: #fb7178"
-          >
-            <BaseFormatMoney
-              :amount="chartData.totalExpenses"
-              :currency="companyStore.selectedCompanyCurrency"
-            />
-          </span>
-        </div>
-
-        <div class="px-6 py-2">
-          <span class="text-xs leading-5 lg:text-sm">
-            {{ $t('dashboard.chart_info.net_income') }}
-          </span>
-          <br />
-          <span
-            v-if="isLoading"
-            class="block mt-1 text-xl font-semibold leading-8"
-            style="color: #5851d8"
-          >
-            <BaseFormatMoney
-              :amount="chartData.netProfit"
-              :currency="companyStore.selectedCompanyCurrency"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <CustomerInfo />
-  </BaseCard>
-</template>
-
-<script setup>
-import CustomerInfo from './CustomerInfo.vue'
-import LineChart from '@/scripts/admin/components/charts/LineChart.vue'
-import { ref, computed, watch, reactive, inject } from 'vue'
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import { useRoute } from 'vue-router'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import ChartPlaceholder from './CustomerChartPlaceholder.vue'
-import { useI18n } from 'vue-i18n'
-
-const companyStore = useCompanyStore()
-const customerStore = useCustomerStore()
-const utils = inject('utils')
-const { t } = useI18n()
-
-const route = useRoute()
-
-let isLoading = ref(false)
-let chartData = reactive({})
-let data = reactive({})
-let years = reactive([{label: t('dateRange.this_year'), value: 'This year'}, {label: t('dateRange.previous_year'), value: 'Previous year'}])
-let selectedYear = ref('This year')
-
-const getChartExpenses = computed(() => {
-  if (chartData.expenseTotals) {
-    return chartData.expenseTotals
-  }
-  return []
-})
-
-const getNetProfits = computed(() => {
-  if (chartData.netProfits) {
-    return chartData.netProfits
-  }
-  return []
-})
-
-const getChartMonths = computed(() => {
-  if (chartData && chartData.months) {
-    return chartData.months
-  }
-  return []
-})
-
-const getReceiptTotals = computed(() => {
-  if (chartData.receiptTotals) {
-    return chartData.receiptTotals
-  }
-  return []
-})
-
-const getChartInvoices = computed(() => {
-  if (chartData.invoiceTotals) {
-    return chartData.invoiceTotals
-  }
-
-  return []
-})
-
-watch(
-  route,
-  () => {
-    if (route.params.id) {
-      loadCustomer()
-    }
-    selectedYear.value = 'This year'
-  },
-  { immediate: true }
-)
-
-async function loadCustomer() {
-  isLoading.value = false
-  let response = await customerStore.fetchViewCustomer({
-    id: route.params.id,
-  })
-
-  if (response.data) {
-    Object.assign(chartData, response.data.meta.chartData)
-    Object.assign(data, response.data.data)
-  }
-
-  isLoading.value = true
-}
-
-async function onChangeYear(data) {
-  let params = {
-    id: route.params.id,
-  }
-
-  data === 'Previous year'
-    ? (params.previous_year = true)
-    : (params.this_year = true)
-
-  let response = await customerStore.fetchViewCustomer(params)
-
-  if (response.data.meta.chartData) {
-    Object.assign(chartData, response.data.meta.chartData)
-  }
-
-  return true
-}
-</script>
diff --git a/resources/scripts/admin/views/customers/partials/CustomerChartPlaceholder.vue b/resources/scripts/admin/views/customers/partials/CustomerChartPlaceholder.vue
deleted file mode 100644
index 29c73166..00000000
--- a/resources/scripts/admin/views/customers/partials/CustomerChartPlaceholder.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <BaseContentPlaceholders class="grid grid-cols-12">
-    <div class="col-span-12 xl:col-span-9 xxl:col-span-10">
-      <div class="flex justify-between mt-1 mb-6">
-        <BaseContentPlaceholdersText class="h-10 w-36" :lines="1" />
-        <BaseContentPlaceholdersText class="h-10 w-40 !mt-0" :lines="1" />
-      </div>
-      <BaseContentPlaceholdersBox class="h-80 xl:h-72 sm:w-full" />
-    </div>
-
-    <div
-      class="
-        grid
-        col-span-12
-        mt-6
-        text-center
-        xl:mt-0
-        sm:grid-cols-4
-        xl:text-right xl:col-span-3 xl:grid-cols-1
-        xxl:col-span-2
-      "
-    >
-      <div
-        class="
-          flex flex-col
-          items-center
-          justify-center
-          px-6
-          py-2
-          lg:justify-end lg:items-end
-        "
-      >
-        <BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
-        <BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
-      </div>
-      <div
-        class="
-          flex flex-col
-          items-center
-          justify-center
-          px-6
-          py-2
-          lg:justify-end lg:items-end
-        "
-      >
-        <BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
-        <BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
-      </div>
-
-      <div
-        class="
-          flex flex-col
-          items-center
-          justify-center
-          px-6
-          py-2
-          lg:justify-end lg:items-end
-        "
-      >
-        <BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
-        <BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
-      </div>
-
-      <div
-        class="
-          flex flex-col
-          items-center
-          justify-center
-          px-6
-          py-2
-          lg:justify-end lg:items-end
-        "
-      >
-        <BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
-        <BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
-      </div>
-    </div>
-  </BaseContentPlaceholders>
-</template>
diff --git a/resources/scripts/admin/views/customers/partials/CustomerInfo.vue b/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
deleted file mode 100644
index 5a294096..00000000
--- a/resources/scripts/admin/views/customers/partials/CustomerInfo.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-  <div class="pt-6 mt-5 border-t border-solid lg:pt-8 md:pt-4 border-line-default">
-    <!-- Basic Info -->
-    <BaseHeading>
-      {{ $t('customers.basic_info') }}
-    </BaseHeading>
-
-    <BaseDescriptionList>
-      <BaseDescriptionListItem
-        v-if="selectedViewCustomer.name"
-        :content-loading="contentLoading"
-        :label="$t('customers.display_name')"
-        :value="selectedViewCustomer?.name"
-      />
-
-      <BaseDescriptionListItem
-        v-if="selectedViewCustomer.contact_name"
-        :content-loading="contentLoading"
-        :label="$t('customers.primary_contact_name')"
-        :value="selectedViewCustomer?.contact_name"
-      />
-      <BaseDescriptionListItem
-        v-if="selectedViewCustomer.email"
-        :content-loading="contentLoading"
-        :label="$t('customers.email')"
-        :value="selectedViewCustomer?.email"
-      />
-    </BaseDescriptionList>
-
-    <BaseDescriptionList class="mt-5">
-      <BaseDescriptionListItem
-        :content-loading="contentLoading"
-        :label="$t('wizard.currency')"
-        :value="
-          selectedViewCustomer?.currency
-            ? `${selectedViewCustomer?.currency?.code} (${selectedViewCustomer?.currency?.symbol})`
-            : ''
-        "
-      />
-
-      <BaseDescriptionListItem
-        v-if="selectedViewCustomer.phone"
-        :content-loading="contentLoading"
-        :label="$t('customers.phone_number')"
-        :value="selectedViewCustomer?.phone"
-      />
-      <BaseDescriptionListItem
-        v-if="selectedViewCustomer.website"
-        :content-loading="contentLoading"
-        :label="$t('customers.website')"
-        :value="selectedViewCustomer?.website"
-      />
-    </BaseDescriptionList>
-
-    <!-- Address -->
-    <BaseHeading
-      v-if="selectedViewCustomer.billing || selectedViewCustomer.shipping"
-      class="mt-8"
-    >
-      {{ $t('customers.address') }}
-    </BaseHeading>
-
-    <BaseDescriptionList class="mt-5">
-      <BaseDescriptionListItem
-        v-if="selectedViewCustomer.billing"
-        :content-loading="contentLoading"
-        :label="$t('customers.billing_address')"
-      >
-        <BaseCustomerAddressDisplay :address="selectedViewCustomer.billing" />
-      </BaseDescriptionListItem>
-
-      <BaseDescriptionListItem
-        v-if="selectedViewCustomer.shipping"
-        :content-loading="contentLoading"
-        :label="$t('customers.shipping_address')"
-      >
-        <BaseCustomerAddressDisplay :address="selectedViewCustomer.shipping" />
-      </BaseDescriptionListItem>
-    </BaseDescriptionList>
-
-    <!-- Custom Fields -->
-    <BaseHeading v-if="customerCustomFields.length > 0" class="mt-8">
-      {{ $t('settings.custom_fields.title') }}
-    </BaseHeading>
-
-    <BaseDescriptionList class="mt-5">
-      <BaseDescriptionListItem
-        v-for="(field, index) in customerCustomFields"
-        :key="index"
-        :content-loading="contentLoading"
-        :label="field.custom_field.label"
-      >
-        <p
-          v-if="field.type === 'Switch'"
-          class="text-sm font-bold leading-5 text-heading non-italic"
-        >
-          <span v-if="field.default_answer === 1"> {{ $t('general.yes') }} </span>
-          <span v-else> {{ $t('general.no') }} </span>
-        </p>
-        <p v-else class="text-sm font-bold leading-5 text-heading non-italic">
-          {{ field.default_answer }}
-        </p>
-      </BaseDescriptionListItem>
-    </BaseDescriptionList>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-
-const customerStore = useCustomerStore()
-
-const selectedViewCustomer = computed(() => customerStore.selectedViewCustomer)
-
-const contentLoading = computed(() => customerStore.isFetchingViewData)
-
-const customerCustomFields = computed(() => {
-  if (selectedViewCustomer?.value?.fields) {
-    return selectedViewCustomer?.value?.fields
-  }
-  return []
-})
-</script>
diff --git a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
deleted file mode 100644
index 84cbc913..00000000
--- a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
+++ /dev/null
@@ -1,327 +0,0 @@
-<template>
-  <div
-    class="
-      fixed
-      top-0
-      left-0
-      hidden
-      h-full
-      pt-16
-      pb-[6.6rem]
-      ml-56
-      bg-surface
-      xl:ml-64
-      w-88
-      xl:block
-    "
-  >
-    <div
-      class="
-        flex
-        items-center
-        justify-between
-        px-4
-        pt-8
-        pb-2
-        border border-line-default border-solid
-        height-full
-      "
-    >
-      <BaseInput
-        v-model="searchData.searchText"
-        :placeholder="$t('general.search')"
-        container-class="mb-6"
-        type="text"
-        variant="gray"
-        @input="onSearch()"
-      >
-        <BaseIcon name="MagnifyingGlassIcon" class="text-muted" />
-      </BaseInput>
-
-      <div class="flex mb-6 ml-3" role="group" aria-label="First group">
-        <BaseDropdown
-          :close-on-select="false"
-          position="bottom-start"
-          width-class="w-40"
-          position-class="left-0"
-        >
-          <template #activator>
-            <BaseButton variant="gray">
-              <BaseIcon name="FunnelIcon" />
-            </BaseButton>
-          </template>
-
-          <div
-            class="
-              px-4
-              py-3
-              pb-2
-              mb-2
-              text-sm
-              border-b border-line-default border-solid
-            "
-          >
-            {{ $t('general.sort_by') }}
-          </div>
-
-          <div class="px-2">
-            <BaseDropdownItem
-              class="flex px-1 py-2 mt-1 cursor-pointer hover:rounded-md"
-            >
-              <BaseInputGroup class="pt-2 -mt-4">
-                <BaseRadio
-                  id="filter_create_date"
-                  v-model="searchData.orderByField"
-                  :label="$t('customers.create_date')"
-                  size="sm"
-                  name="filter"
-                  value="invoices.created_at"
-                  @update:modelValue="onSearch"
-                />
-              </BaseInputGroup>
-            </BaseDropdownItem>
-          </div>
-
-          <div class="px-2">
-            <BaseDropdownItem class="flex px-1 cursor-pointer hover:rounded-md">
-              <BaseInputGroup class="pt-2 -mt-4">
-                <BaseRadio
-                  id="filter_display_name"
-                  v-model="searchData.orderByField"
-                  :label="$t('customers.display_name')"
-                  size="sm"
-                  name="filter"
-                  value="name"
-                  @update:modelValue="onSearch"
-                />
-              </BaseInputGroup>
-            </BaseDropdownItem>
-          </div>
-        </BaseDropdown>
-
-        <BaseButton class="ml-1" size="md" variant="gray" @click="sortData">
-          <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" />
-          <BaseIcon v-else name="SortDescendingIcon" />
-        </BaseButton>
-      </div>
-    </div>
-
-    <div
-      ref="customerListSection"
-      class="
-        h-full
-        overflow-y-scroll
-        border-l border-line-default border-solid
-        sidebar
-        base-scroll
-      "
-    >
-      <div v-for="(customer, index) in customerList" :key="index">
-        <router-link
-          v-if="customer"
-          :id="'customer-' + customer.id"
-          :to="`/admin/customers/${customer.id}/view`"
-          :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
-            {
-              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
-                hasActiveUrl(customer.id),
-            },
-          ]"
-          style="border-top: 1px solid rgba(185, 193, 209, 0.41)"
-        >
-          <div>
-            <BaseText
-              :text="customer.name"
-              class="
-                pr-2
-                text-sm
-                not-italic
-                font-normal
-                leading-5
-                text-heading
-                capitalize
-                truncate
-              "
-            />
-
-            <BaseText
-              v-if="customer.contact_name"
-              :text="customer.contact_name"
-              class="
-                mt-1
-                text-xs
-                not-italic
-                font-medium
-                leading-5
-                text-body
-              "
-            />
-          </div>
-          <div class="flex-1 font-bold text-right whitespace-nowrap">
-            <BaseFormatMoney
-              :amount="customer.due_amount!==null ? customer.due_amount : 0"
-              :currency="customer.currency"
-            />
-          </div>
-        </router-link>
-      </div>
-      <div v-if="isFetching" class="flex justify-center p-4 items-center">
-        <LoadingIcon
-          class="h-6 m-1 animate-spin text-primary-400"
-        />
-      </div>
-      <p
-        v-if="!customerList?.length && !isFetching"
-        class="flex justify-center px-4 mt-5 text-sm text-body"
-      >
-        {{ $t('customers.no_matching_customers') }}
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref, reactive } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute } from 'vue-router'
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
-import { debounce } from 'lodash'
-
-const customerStore = useCustomerStore()
-const route = useRoute()
-const { t } = useI18n()
-
-let isFetching = ref(false)
-
-let searchData = reactive({
-  orderBy: null,
-  orderByField: null,
-  searchText: null,
-})
-
-const customerList = ref(null)
-const currentPageNumber = ref(1)
-const lastPageNumber = ref(1)
-const customerListSection = ref(null)
-
-onSearch = debounce(onSearch, 500)
-
-const getOrderBy = computed(() => {
-  if (searchData.orderBy === 'asc' || searchData.orderBy == null) {
-    return true
-  }
-  return false
-})
-
-const getOrderName = computed(() =>
-  getOrderBy.value ? t('general.ascending') : t('general.descending')
-)
-
-function hasActiveUrl(id) {
-  return route.params.id == id
-}
-
-async function loadCustomers(pageNumber, fromScrollListener = false) {
-  if (isFetching.value) {
-    return
-  }
-
-  let params = {}
-  if (
-    searchData.searchText !== '' &&
-    searchData.searchText !== null &&
-    searchData.searchText !== undefined
-  ) {
-    params.display_name = searchData.searchText
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    params.orderBy = searchData.orderBy
-  }
-
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    params.orderByField = searchData.orderByField
-  }
-
-  isFetching.value = true
-  let response = await customerStore.fetchCustomers({
-    page: pageNumber,
-    ...params,
-    limit: 15
-  })
-  isFetching.value = false
-
-  customerList.value = customerList.value ? customerList.value : []
-  customerList.value = [...customerList.value, ...response.data.data]
-
-  currentPageNumber.value = pageNumber ? pageNumber : 1
-  lastPageNumber.value = response.data.meta.last_page
-  let customerFound = customerList.value.find(
-    (cust) => cust.id == route.params.id
-  )
-
-  if (
-    fromScrollListener == false &&
-    !customerFound &&
-    currentPageNumber.value < lastPageNumber.value &&
-    Object.keys(params).length === 0
-  ) {
-    loadCustomers(++currentPageNumber.value)
-  }
-
-  if (customerFound) {
-    setTimeout(() => {
-      if (fromScrollListener == false) {
-        scrollToCustomer()
-      }
-    }, 500)
-  }
-}
-
-function scrollToCustomer() {
-  const el = document.getElementById(`customer-${route.params.id}`)
-
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth' })
-    el.classList.add('shake')
-    addScrollListener()
-  }
-}
-
-function addScrollListener() {
-  customerListSection.value.addEventListener('scroll', (ev) => {
-    if (
-      ev.target.scrollTop > 0 &&
-      ev.target.scrollTop + ev.target.clientHeight >
-        ev.target.scrollHeight - 200
-    ) {
-      if (currentPageNumber.value < lastPageNumber.value) {
-        loadCustomers(++currentPageNumber.value, true)
-      }
-    }
-  })
-}
-
-async function onSearch() {
-  customerList.value = []
-  loadCustomers()
-}
-
-function sortData() {
-  if (searchData.orderBy === 'asc') {
-    searchData.orderBy = 'desc'
-    onSearch()
-    return true
-  }
-  searchData.orderBy = 'asc'
-  onSearch()
-  return true
-}
-
-loadCustomers()
-</script>
diff --git a/resources/scripts/admin/views/dashboard/Dashboard.vue b/resources/scripts/admin/views/dashboard/Dashboard.vue
deleted file mode 100644
index 649b388c..00000000
--- a/resources/scripts/admin/views/dashboard/Dashboard.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup>
-import DashboardStats from '../dashboard/DashboardStats.vue'
-import DashboardChart from '../dashboard/DashboardChart.vue'
-import DashboardTable from '../dashboard/DashboardTable.vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-
-const route = useRoute()
-const userStore = useUserStore()
-const router = useRouter()
-
-onMounted(() => {
-  if (route.meta.ability && !userStore.hasAbilities(route.meta.ability)) {
-    router.push({ name: 'account.settings' })
-  } else if (route.meta.isOwner && !userStore.currentUser.is_owner) {
-    router.push({ name: 'account.settings' })
-  }
-})
-</script>
-
-<template>
-  <BasePage>
-    <DashboardStats />
-    <DashboardChart />
-    <DashboardTable />
-  </BasePage>
-</template>
diff --git a/resources/scripts/admin/views/dashboard/DashboardChart.vue b/resources/scripts/admin/views/dashboard/DashboardChart.vue
deleted file mode 100644
index d30159b8..00000000
--- a/resources/scripts/admin/views/dashboard/DashboardChart.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<template>
-  <div>
-    <div
-      v-if="dashboardStore.isDashboardDataLoaded"
-      class="grid grid-cols-10 mt-8 bg-surface rounded-xl shadow border border-line-light"
-    >
-      <!-- Chart -->
-      <div
-        class="
-          grid grid-cols-1
-          col-span-10
-          px-4
-          py-5
-          lg:col-span-7
-          xl:col-span-8
-          sm:p-6
-        "
-      >
-        <div class="flex justify-between mt-1 mb-4 flex-col md:flex-row">
-          <h6 class="flex items-center sw-section-title h-10">
-            <BaseIcon name="ChartBarSquareIcon" class="text-primary-400 mr-1" />
-            {{ $t('dashboard.monthly_chart.title') }}
-          </h6>
-
-          <div class="w-full my-2 md:m-0 md:w-40 h-10">
-            <BaseMultiselect
-              v-model="selectedYear"
-              :options="years"
-              :allow-empty="false"
-              :show-labels="false"
-              :placeholder="$t('dashboard.select_year')"
-              :can-deselect="false"
-            />
-          </div>
-        </div>
-
-        <LineChart
-          :invoices="dashboardStore.chartData.invoiceTotals"
-          :expenses="dashboardStore.chartData.expenseTotals"
-          :receipts="dashboardStore.chartData.receiptTotals"
-          :income="dashboardStore.chartData.netIncomeTotals"
-          :labels="dashboardStore.chartData.months"
-          class="sm:w-full"
-        />
-      </div>
-
-      <!-- Chart Labels -->
-      <div
-        class="
-          grid grid-cols-3
-          col-span-10
-          text-center
-          border-t border-l border-line-default border-solid
-          lg:border-t-0 lg:text-right lg:col-span-3
-          xl:col-span-2
-          lg:grid-cols-1
-        "
-      >
-        <div class="p-6">
-          <span class="text-xs leading-5 lg:text-sm">
-            {{ $t('dashboard.chart_info.total_sales') }}
-          </span>
-          <br />
-          <span class="block mt-1 text-xl font-semibold leading-8 lg:text-2xl">
-            <BaseFormatMoney
-              :amount="dashboardStore.totalSales"
-              :currency="companyStore.selectedCompanyCurrency"
-            />
-          </span>
-        </div>
-        <div class="p-6">
-          <span class="text-xs leading-5 lg:text-sm">
-            {{ $t('dashboard.chart_info.total_receipts') }}
-          </span>
-          <br />
-          <span
-            class="
-              block
-              mt-1
-              text-xl
-              font-semibold
-              leading-8
-              lg:text-2xl
-              text-green-400
-            "
-          >
-            <BaseFormatMoney
-              :amount="dashboardStore.totalReceipts"
-              :currency="companyStore.selectedCompanyCurrency"
-            />
-          </span>
-        </div>
-        <div class="p-6">
-          <span class="text-xs leading-5 lg:text-sm">
-            {{ $t('dashboard.chart_info.total_expense') }}
-          </span>
-          <br />
-          <span
-            class="
-              block
-              mt-1
-              text-xl
-              font-semibold
-              leading-8
-              lg:text-2xl
-              text-red-400
-            "
-          >
-            <BaseFormatMoney
-              :amount="dashboardStore.totalExpenses"
-              :currency="companyStore.selectedCompanyCurrency"
-            />
-          </span>
-        </div>
-        <div
-          class="
-            col-span-3
-            p-6
-            border-t border-line-default border-solid
-            lg:col-span-1
-          "
-        >
-          <span class="text-xs leading-5 lg:text-sm">
-            {{ $t('dashboard.chart_info.net_income') }}
-          </span>
-          <br />
-          <span
-            class="
-              block
-              mt-1
-              text-xl
-              font-semibold
-              leading-8
-              lg:text-2xl
-              text-primary-500
-            "
-          >
-            <BaseFormatMoney
-              :amount="dashboardStore.totalNetIncome"
-              :currency="companyStore.selectedCompanyCurrency"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <ChartPlaceholder v-else />
-  </div>
-</template>
-
-<script setup>
-import { ref, watch, inject } from 'vue'
-import { useDashboardStore } from '@/scripts/admin/stores/dashboard'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import LineChart from '@/scripts/admin/components/charts/LineChart.vue'
-import ChartPlaceholder from './DashboardChartPlaceholder.vue'
-import abilities from '@/scripts/admin/stub/abilities'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useI18n } from 'vue-i18n'
-
-const dashboardStore = useDashboardStore()
-const companyStore = useCompanyStore()
-
-const { t } = useI18n()
-const utils = inject('utils')
-const userStore = useUserStore()
-const years = ref( [{label: t('dateRange.this_year'), value: 'This year'}, {label: t( 'dateRange.previous_year'), value:
-  'Previous year'}])
-const selectedYear = ref('This year')
-
-watch(
-  selectedYear,
-  (val) => {
-    if (val === 'Previous year') {
-      let params = { previous_year: true }
-      loadData(params)
-    } else {
-      loadData()
-    }
-  },
-  { immediate: true }
-)
-
-async function loadData(params) {
-  if (userStore.hasAbilities(abilities.DASHBOARD)) {
-    await dashboardStore.loadData(params)
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue b/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
deleted file mode 100644
index 04e4fd73..00000000
--- a/resources/scripts/admin/views/dashboard/DashboardChartPlaceholder.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <BaseContentPlaceholders
-    class="grid grid-cols-10 mt-8 bg-surface rounded shadow"
-  >
-    <!-- Chart -->
-    <div
-      class="
-        grid grid-cols-1
-        col-span-10
-        px-4
-        py-5
-        lg:col-span-7
-        xl:col-span-8
-        sm:p-8
-      "
-    >
-      <div class="flex items-center justify-between mb-2 xl:mb-4">
-        <BaseContentPlaceholdersText class="h-10 w-36" :lines="1" />
-        <BaseContentPlaceholdersText class="h-10 w-36 !mt-0" :lines="1" />
-      </div>
-      <BaseContentPlaceholdersBox class="h-80 xl:h-72 sm:w-full" />
-    </div>
-
-    <!-- Chart Labels -->
-    <div
-      class="
-        grid grid-cols-3
-        col-span-10
-        text-center
-        border-t border-l border-line-default border-solid
-        lg:border-t-0 lg:text-right lg:col-span-3
-        xl:col-span-2
-        lg:grid-cols-1
-      "
-    >
-      <div
-        class="
-          flex flex-col
-          items-center
-          justify-center
-          p-6
-          lg:justify-end lg:items-end
-        "
-      >
-        <BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
-        <BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
-      </div>
-      <div
-        class="
-          flex flex-col
-          items-center
-          justify-center
-          p-6
-          lg:justify-end lg:items-end
-        "
-      >
-        <BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
-        <BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
-      </div>
-      <div
-        class="
-          flex flex-col
-          items-center
-          justify-center
-          p-6
-          lg:justify-end lg:items-end
-        "
-      >
-        <BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
-        <BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
-      </div>
-      <div
-        class="
-          flex flex-col
-          items-center
-          justify-center
-          col-span-3
-          p-6
-          border-t border-line-default border-solid
-          lg:justify-end lg:items-end lg:col-span-1
-        "
-      >
-        <BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
-        <BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
-      </div>
-    </div>
-  </BaseContentPlaceholders>
-</template>
diff --git a/resources/scripts/admin/views/dashboard/DashboardStats.vue b/resources/scripts/admin/views/dashboard/DashboardStats.vue
deleted file mode 100644
index 6c392c35..00000000
--- a/resources/scripts/admin/views/dashboard/DashboardStats.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-9 xl:gap-8">
-    <!-- Amount Due -->
-    <DashboardStatsItem
-      v-if="userStore.hasAbilities(abilities.VIEW_INVOICE)"
-      :icon-component="DollarIcon"
-      :loading="!dashboardStore.isDashboardDataLoaded"
-      route="/admin/invoices"
-      :large="true"
-      :label="$t('dashboard.cards.due_amount')"
-    >
-      <BaseFormatMoney
-        :amount="dashboardStore.stats.totalAmountDue"
-        :currency="companyStore.selectedCompanyCurrency"
-      />
-    </DashboardStatsItem>
-
-    <!-- Customers -->
-    <DashboardStatsItem
-      v-if="userStore.hasAbilities(abilities.VIEW_CUSTOMER)"
-      :icon-component="CustomerIcon"
-      :loading="!dashboardStore.isDashboardDataLoaded"
-      route="/admin/customers"
-      :label="(dashboardStore.stats.totalCustomerCount <= 1 ? $t('dashboard.cards.customers', 1) : $t('dashboard.cards.customers', 2))"
-    >
-      {{ dashboardStore.stats.totalCustomerCount }}
-    </DashboardStatsItem>
-
-    <!-- Invoices -->
-    <DashboardStatsItem
-      v-if="userStore.hasAbilities(abilities.VIEW_INVOICE)"
-      :icon-component="InvoiceIcon"
-      :loading="!dashboardStore.isDashboardDataLoaded"
-      route="/admin/invoices"
-      :label="(dashboardStore.stats.totalInvoiceCount <= 1 ? $t('dashboard.cards.invoices', 1) : $t('dashboard.cards.invoices', 2))"
-    >
-      {{ dashboardStore.stats.totalInvoiceCount }}
-    </DashboardStatsItem>
-
-    <!-- Estimates -->
-    <DashboardStatsItem
-      v-if="userStore.hasAbilities(abilities.VIEW_ESTIMATE)"
-      :icon-component="EstimateIcon"
-      :loading="!dashboardStore.isDashboardDataLoaded"
-      route="/admin/estimates"
-      :label="(dashboardStore.stats.totalEstimateCount <= 1 ? $t( 'dashboard.cards.estimates', 1) : $t('dashboard.cards.estimates', 2))"
-    >
-      {{ dashboardStore.stats.totalEstimateCount }}
-    </DashboardStatsItem>
-  </div>
-</template>
-
-<script setup>
-import DollarIcon from '@/scripts/components/icons/dashboard/DollarIcon.vue'
-import CustomerIcon from '@/scripts/components/icons/dashboard/CustomerIcon.vue'
-import InvoiceIcon from '@/scripts/components/icons/dashboard/InvoiceIcon.vue'
-import EstimateIcon from '@/scripts/components/icons/dashboard/EstimateIcon.vue'
-import abilities from '@/scripts/admin/stub/abilities'
-import DashboardStatsItem from './DashboardStatsItem.vue'
-
-import { inject } from 'vue'
-import { useDashboardStore } from '@/scripts/admin/stores/dashboard'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useUserStore } from '@/scripts/admin/stores/user'
-
-const utils = inject('utils')
-
-const dashboardStore = useDashboardStore()
-const companyStore = useCompanyStore()
-const userStore = useUserStore()
-</script>
diff --git a/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue b/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
deleted file mode 100644
index 89da715d..00000000
--- a/resources/scripts/admin/views/dashboard/DashboardStatsItem.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <router-link
-    v-if="!loading"
-    class="
-      relative
-      flex
-      justify-between
-      p-5
-      bg-surface
-      rounded-xl
-      shadow
-      border border-line-light
-      hover:shadow-md
-      transition-shadow
-      xl:p-6
-      lg:col-span-2
-    "
-    :class="{ 'lg:!col-span-3': large }"
-    :to="route"
-  >
-    <div>
-      <span class="text-2xl font-bold leading-tight text-heading xl:text-3xl">
-        <slot />
-      </span>
-      <span class="block mt-1 text-sm font-medium leading-tight text-muted xl:text-base">
-        {{ label }}
-      </span>
-    </div>
-    <div class="flex items-center">
-      <component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
-    </div>
-  </router-link>
-
-  <StatsCardPlaceholder v-else-if="large" />
-
-  <StatsCardSmPlaceholder v-else />
-</template>
-
-
-<script setup>
-import StatsCardPlaceholder from './DashboardStatsPlaceholder.vue'
-import StatsCardSmPlaceholder from './DashboardStatsSmPlaceholder.vue'
-
-defineProps({
-  iconComponent: {
-    type: Object,
-    required: true,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  route: {
-    type: String,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  large: {
-    type: Boolean,
-    default: false,
-  },
-})
-</script>
diff --git a/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue b/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
deleted file mode 100644
index e5a99893..00000000
--- a/resources/scripts/admin/views/dashboard/DashboardStatsPlaceholder.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <BaseContentPlaceholders
-    :rounded="true"
-    class="relative flex justify-between w-full p-3 bg-surface rounded shadow lg:col-span-3 xl:p-4"
-  >
-    <div>
-      <BaseContentPlaceholdersText
-        class="h-5 -mb-1 w-14 xl:mb-6 xl:h-7"
-        :lines="1"
-      />
-      <BaseContentPlaceholdersText class="h-3 w-28 xl:h-4" :lines="1" />
-    </div>
-    <div class="flex items-center">
-      <BaseContentPlaceholdersBox
-        :circle="true"
-        class="w-10 h-10 xl:w-12 xl:h-12"
-      />
-    </div>
-  </BaseContentPlaceholders>
-</template>
diff --git a/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue b/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
deleted file mode 100644
index 9a7ee56c..00000000
--- a/resources/scripts/admin/views/dashboard/DashboardStatsSmPlaceholder.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <BaseContentPlaceholders
-    :rounded="true"
-    class="
-      relative
-      flex
-      justify-between
-      w-full
-      p-3
-      bg-surface
-      rounded
-      shadow
-      lg:col-span-2
-      xl:p-4
-    "
-  >
-    <div>
-      <BaseContentPlaceholdersText
-        class="w-12 h-5 -mb-1 xl:mb-6 xl:h-7"
-        :lines="1"
-      />
-      <BaseContentPlaceholdersText class="w-20 h-3 xl:h-4" :lines="1" />
-    </div>
-    <div class="flex items-center">
-      <BaseContentPlaceholdersBox
-        :circle="true"
-        class="w-10 h-10 xl:w-12 xl:h-12"
-      />
-    </div>
-  </BaseContentPlaceholders>
-</template>
diff --git a/resources/scripts/admin/views/dashboard/DashboardTable.vue b/resources/scripts/admin/views/dashboard/DashboardTable.vue
deleted file mode 100644
index 5a95a4a4..00000000
--- a/resources/scripts/admin/views/dashboard/DashboardTable.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-  <div>
-    <div class="grid grid-cols-1 gap-6 mt-10 xl:grid-cols-2">
-      <!-- Due Invoices -->
-      <div
-        v-if="userStore.hasAbilities(abilities.VIEW_INVOICE)"
-        class="due-invoices"
-      >
-        <div class="relative z-10 flex items-center justify-between mb-3">
-          <h6 class="mb-0 text-lg font-semibold leading-normal text-heading">
-            {{ $t('dashboard.recent_invoices_card.title') }}
-          </h6>
-
-          <BaseButton
-            size="sm"
-            variant="primary-outline"
-            @click="$router.push('/admin/invoices')"
-          >
-            {{ $t('dashboard.recent_invoices_card.view_all') }}
-          </BaseButton>
-        </div>
-
-        <BaseTable
-          :data="dashboardStore.recentDueInvoices"
-          :columns="dueInvoiceColumns"
-          :loading="!dashboardStore.isDashboardDataLoaded"
-        >
-          <template #cell-user="{ row }">
-            <router-link
-              :to="{ path: `invoices/${row.data.id}/view` }"
-              class="font-medium text-primary-500"
-            >
-              {{ row.data.customer.name }}
-            </router-link>
-          </template>
-
-          <template #cell-due_amount="{ row }">
-            <BaseFormatMoney
-              :amount="row.data.due_amount"
-              :currency="row.data.customer.currency"
-            />
-          </template>
-
-          <!-- Actions -->
-          <template
-            v-if="hasAtleastOneInvoiceAbility()"
-            #cell-actions="{ row }"
-          >
-            <InvoiceDropdown :row="row.data" :table="invoiceTableComponent" />
-          </template>
-        </BaseTable>
-      </div>
-
-      <!-- Recent Estimates -->
-      <div
-        v-if="userStore.hasAbilities(abilities.VIEW_ESTIMATE)"
-        class="recent-estimates"
-      >
-        <div class="relative z-10 flex items-center justify-between mb-3">
-          <h6 class="mb-0 text-lg font-semibold leading-normal text-heading">
-            {{ $t('dashboard.recent_estimate_card.title') }}
-          </h6>
-
-          <BaseButton
-            variant="primary-outline"
-            size="sm"
-            @click="$router.push('/admin/estimates')"
-          >
-            {{ $t('dashboard.recent_estimate_card.view_all') }}
-          </BaseButton>
-        </div>
-
-        <BaseTable
-          :data="dashboardStore.recentEstimates"
-          :columns="recentEstimateColumns"
-          :loading="!dashboardStore.isDashboardDataLoaded"
-        >
-          <template #cell-user="{ row }">
-            <router-link
-              :to="{ path: `estimates/${row.data.id}/view` }"
-              class="font-medium text-primary-500"
-            >
-              {{ row.data.customer.name }}
-            </router-link>
-          </template>
-
-          <template #cell-total="{ row }">
-            <BaseFormatMoney
-              :amount="row.data.total"
-              :currency="row.data.customer.currency"
-            />
-          </template>
-
-          <template
-            v-if="hasAtleastOneEstimateAbility()"
-            #cell-actions="{ row }"
-          >
-            <EstimateDropdown :row="row.data" :table="estimateTableComponent" />
-          </template>
-        </BaseTable>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-import { useDashboardStore } from '@/scripts/admin/stores/dashboard'
-import { useI18n } from 'vue-i18n'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-import InvoiceDropdown from '@/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue'
-import EstimateDropdown from '@/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue'
-
-const dashboardStore = useDashboardStore()
-
-const { t } = useI18n()
-const userStore = useUserStore()
-
-const invoiceTableComponent = ref(null)
-const estimateTableComponent = ref(null)
-
-const dueInvoiceColumns = computed(() => {
-  return [
-    {
-      key: 'formattedDueDate',
-      label: t('dashboard.recent_invoices_card.due_on'),
-    },
-    {
-      key: 'user',
-      label: t('dashboard.recent_invoices_card.customer'),
-    },
-    {
-      key: 'due_amount',
-      label: t('dashboard.recent_invoices_card.amount_due'),
-    },
-    {
-      key: 'actions',
-      tdClass: 'text-right text-sm font-medium pl-0',
-      thClass: 'text-right pl-0',
-      sortable: false,
-    },
-  ]
-})
-
-const recentEstimateColumns = computed(() => {
-  return [
-    {
-      key: 'formattedEstimateDate',
-      label: t('dashboard.recent_estimate_card.date'),
-    },
-    {
-      key: 'user',
-      label: t('dashboard.recent_estimate_card.customer'),
-    },
-    {
-      key: 'total',
-      label: t('dashboard.recent_estimate_card.amount_due'),
-    },
-    {
-      key: 'actions',
-      tdClass: 'text-right text-sm font-medium pl-0',
-      thClass: 'text-right pl-0',
-      sortable: false,
-    },
-  ]
-})
-
-function hasAtleastOneInvoiceAbility() {
-  return userStore.hasAbilities([
-    abilities.DELETE_INVOICE,
-    abilities.EDIT_INVOICE,
-    abilities.VIEW_INVOICE,
-    abilities.SEND_INVOICE,
-  ])
-}
-
-function hasAtleastOneEstimateAbility() {
-  return userStore.hasAbilities([
-    abilities.CREATE_ESTIMATE,
-    abilities.EDIT_ESTIMATE,
-    abilities.VIEW_ESTIMATE,
-    abilities.SEND_ESTIMATE,
-  ])
-}
-</script>
diff --git a/resources/scripts/admin/views/errors/404.vue b/resources/scripts/admin/views/errors/404.vue
deleted file mode 100644
index 2137c657..00000000
--- a/resources/scripts/admin/views/errors/404.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <div class="w-full h-screen">
-    <div class="flex items-center justify-center w-full h-full">
-      <div class="flex flex-col items-center justify-center">
-        <h1 class="text-primary-500" style="font-size: 10rem">
-          {{ $t('general.four_zero_four') }}
-        </h1>
-        <h5 class="mb-10 text-3xl text-primary-500">
-          {{ $t('general.you_got_lost') }}
-        </h5>
-        <router-link
-          class="
-            flex
-            items-center
-            w-32
-            h-12
-            px-3
-            py-1
-            text-base
-            font-medium
-            leading-none
-            text-center text-white
-            rounded
-            whitespace-nowrap
-            bg-primary-500
-            btn-lg
-            hover:text-white
-          "
-          :to="path"
-        >
-          <BaseIcon name="ArrowLeftIcon" class="mr-2 text-white icon" />
-
-          {{ $t('general.go_home') }}
-        </router-link>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-
-const route = useRoute()
-const router = useRouter()
-
-const path = computed(() => {
-  let data = route.path.indexOf('customer')
-
-  if (data > -1 && route.params.company) {
-    return `/${route.params.company}/customer/dashboard`
-  } else if (route.params.catchAll) {
-    let index = route.params.catchAll.indexOf('/')
-    if (index > -1) {
-      let slug = route.params.catchAll.substring(index, 0)
-      return `/${slug}/customer/dashboard`
-    } else {
-      return '/'
-    }
-  } else {
-    return `/admin/dashboard`
-  }
-})
-</script>
diff --git a/resources/scripts/admin/views/estimates/Index.vue b/resources/scripts/admin/views/estimates/Index.vue
deleted file mode 100644
index daa9e9a5..00000000
--- a/resources/scripts/admin/views/estimates/Index.vue
+++ /dev/null
@@ -1,492 +0,0 @@
-<template>
-  <BasePage>
-    <SendEstimateModal />
-
-    <BasePageHeader :title="$t('estimates.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-
-        <BaseBreadcrumbItem
-          :title="$t('estimates.estimate', 2)"
-          to="#"
-          active
-        />
-      </BaseBreadcrumb>
-
-      <template #actions>
-        <BaseButton
-          v-show="estimateStore.totalEstimateCount"
-          variant="primary-outline"
-          @click="toggleFilter"
-        >
-          {{ $t('general.filter') }}
-          <template #right="slotProps">
-            <BaseIcon
-              v-if="!showFilters"
-              :class="slotProps.class"
-              name="FunnelIcon"
-            />
-            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
-          </template>
-        </BaseButton>
-
-        <router-link
-          v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
-          to="estimates/create"
-        >
-          <BaseButton variant="primary" class="ml-4">
-            <template #left="slotProps">
-              <BaseIcon name="PlusIcon" :class="slotProps.class" />
-            </template>
-            {{ $t('estimates.new_estimate') }}
-          </BaseButton>
-        </router-link>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper
-      v-show="showFilters"
-      :row-on-xl="true"
-      @clear="clearFilter"
-    >
-      <BaseInputGroup :label="$t('customers.customer', 1)">
-        <BaseCustomerSelectInput
-          v-model="filters.customer_id"
-          :placeholder="$t('customers.type_or_click')"
-          value-prop="id"
-          label="name"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('estimates.status')">
-        <BaseMultiselect
-          v-model="filters.status"
-          :options="status"
-          searchable
-          :placeholder="$t('general.select_a_status')"
-          @update:modelValue="setActiveTab"
-          @remove="clearStatusSearch()"
-        />
-      </BaseInputGroup>
-      <BaseInputGroup :label="$t('general.from')">
-        <BaseDatePicker
-          v-model="filters.from_date"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-
-      <div
-        class="hidden w-8 h-0 mx-4 border border-gray-400 border-solid xl:block"
-        style="margin-top: 1.5rem"
-      />
-
-      <BaseInputGroup :label="$t('general.to')">
-        <BaseDatePicker
-          v-model="filters.to_date"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('estimates.estimate_number')">
-        <BaseInput v-model="filters.estimate_number">
-          <template #left="slotProps">
-            <BaseIcon name="HashtagIcon" :class="slotProps.class" />
-          </template>
-        </BaseInput>
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <BaseEmptyPlaceholder
-      v-show="showEmptyScreen"
-      :title="$t('estimates.no_estimates')"
-      :description="$t('estimates.list_of_estimates')"
-    >
-      <ObservatoryIcon class="mt-5 mb-4" />
-
-      <template #actions>
-        <BaseButton
-          v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
-          variant="primary-outline"
-          @click="$router.push('/admin/estimates/create')"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="PlusIcon" :class="slotProps.class" />
-          </template>
-          {{ $t('estimates.add_new_estimate') }}
-        </BaseButton>
-      </template>
-    </BaseEmptyPlaceholder>
-
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <div
-        class="
-          relative
-          flex
-          items-center
-          justify-between
-          h-10
-          mt-5
-          list-none
-          border-b-2 border-line-default border-solid
-        "
-      >
-        <!-- Tabs -->
-        <BaseTabGroup class="-mb-5" @change="setStatusFilter">
-          <BaseTab :title="$t('general.all')" filter="" />
-          <BaseTab :title="$t('general.draft')" filter="DRAFT" />
-          <BaseTab :title="$t('general.sent')" filter="SENT" />
-        </BaseTabGroup>
-
-        <BaseDropdown
-          v-if="
-            estimateStore.selectedEstimates.length &&
-            userStore.hasAbilities(abilities.DELETE_ESTIMATE)
-          "
-          class="absolute float-right"
-        >
-          <template #activator>
-            <span
-              class="
-                flex
-                text-sm
-                font-medium
-                cursor-pointer
-                select-none
-                text-primary-400
-              "
-            >
-              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" />
-            </span>
-          </template>
-
-          <BaseDropdownItem @click="removeMultipleEstimates">
-            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </div>
-
-      <BaseTable
-        ref="tableComponent"
-        :data="fetchData"
-        :columns="estimateColumns"
-        :placeholder-count="estimateStore.totalEstimateCount >= 20 ? 10 : 5"
-        :key="tableKey"
-        class="mt-10"
-      >
-        <template #header>
-          <div class="absolute items-center left-6 top-2.5 select-none">
-            <BaseCheckbox
-              v-model="estimateStore.selectAllField"
-              variant="primary"
-              @change="estimateStore.selectAllEstimates"
-            />
-          </div>
-        </template>
-
-        <template #cell-checkbox="{ row }">
-          <div class="relative block">
-            <BaseCheckbox
-              :id="row.id"
-              v-model="selectField"
-              :value="row.data.id"
-            />
-          </div>
-        </template>
-
-        <!-- Estimate date  -->
-        <template #cell-estimate_date="{ row }">
-          {{ row.data.formatted_estimate_date }}
-        </template>
-
-        <template #cell-estimate_number="{ row }">
-          <router-link
-            :to="{ path: `estimates/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.estimate_number }}
-          </router-link>
-        </template>
-
-        <template #cell-name="{ row }">
-          <BaseText :text="row.data.customer.name" />
-        </template>
-
-        <template #cell-status="{ row }">
-          <BaseEstimateStatusBadge :status="row.data.status" class="px-3 py-1">
-            <BaseEstimateStatusLabel :status="row.data.status"/>
-          </BaseEstimateStatusBadge>
-        </template>
-
-        <template #cell-total="{ row }">
-          <BaseFormatMoney
-            :amount="row.data.total"
-            :currency="row.data.customer.currency"
-          />
-        </template>
-
-        <!-- Actions -->
-        <template v-if="hasAtleastOneAbility()" #cell-actions="{ row }">
-          <EstimateDropDown :row="row.data" :table="tableComponent" />
-        </template>
-      </BaseTable>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { computed, onUnmounted, reactive, ref, watch, inject } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { debouncedWatch } from '@vueuse/core'
-import abilities from '@/scripts/admin/stub/abilities'
-
-import ObservatoryIcon from '@/scripts/components/icons/empty/ObservatoryIcon.vue'
-import EstimateDropDown from '@/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue'
-import SendEstimateModal from '@/scripts/admin/components/modal-components/SendEstimateModal.vue'
-import BaseEstimateStatusLabel from "@/scripts/components/base/BaseEstimateStatusLabel.vue";
-
-const estimateStore = useEstimateStore()
-const dialogStore = useDialogStore()
-const userStore = useUserStore()
-
-const tableComponent = ref(null)
-const tableKey = ref(0)
-const { t } = useI18n()
-const showFilters = ref(false)
-const status = ref([
-  {label: t('estimates.draft'), value: 'DRAFT'},
-  {label: t('estimates.sent'), value: 'SENT'},
-  {label: t('estimates.viewed'), value: 'VIEWED'},
-  {label: t('estimates.expired'), value: 'EXPIRED'},
-  {label: t('estimates.accepted'), value: 'ACCEPTED'},
-  {label: t('estimates.rejected'), value: 'REJECTED'},
-])
-
-const isRequestOngoing = ref(true)
-const activeTab = ref('general.draft')
-const router = useRouter()
-
-let filters = reactive({
-  customer_id: '',
-  status: '',
-  from_date: '',
-  to_date: '',
-  estimate_number: '',
-})
-
-const showEmptyScreen = computed(
-  () => !estimateStore.totalEstimateCount && !isRequestOngoing.value
-)
-
-const selectField = computed({
-  get: () => estimateStore.selectedEstimates,
-  set: (val) => {
-    estimateStore.selectEstimate(val)
-  },
-})
-
-const estimateColumns = computed(() => {
-  return [
-    {
-      key: 'checkbox',
-      thClass: 'extra w-10 pr-0',
-      sortable: false,
-      tdClass: 'font-medium text-heading pr-0',
-    },
-    {
-      key: 'estimate_date',
-      label: t('estimates.date'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-muted',
-    },
-    { key: 'estimate_number', label: t('estimates.number', 2) },
-    { key: 'name', label: t('estimates.customer') },
-    { key: 'status', label: t('estimates.status') },
-    {
-      key: 'total',
-      label: t('estimates.total'),
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'actions',
-      tdClass: 'text-right text-sm font-medium pl-0',
-      thClass: 'text-right pl-0',
-      sortable: false,
-    },
-  ]
-})
-
-debouncedWatch(
-  filters,
-  () => {
-    setFilters()
-  },
-  { debounce: 500 }
-)
-
-onUnmounted(() => {
-  if (estimateStore.selectAllField) {
-    estimateStore.selectAllEstimates()
-  }
-})
-
-function hasAtleastOneAbility() {
-  return userStore.hasAbilities([
-    abilities.CREATE_ESTIMATE,
-    abilities.EDIT_ESTIMATE,
-    abilities.VIEW_ESTIMATE,
-    abilities.SEND_ESTIMATE,
-  ])
-}
-
-async function clearStatusSearch(removedOption, id) {
-  filters.status = ''
-  refreshTable()
-}
-
-function refreshTable() {
-  tableComponent.value && tableComponent.value.refresh()
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    customer_id: filters.customer_id,
-    status: filters.status,
-    from_date: filters.from_date,
-    to_date: filters.to_date,
-    estimate_number: filters.estimate_number,
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  isRequestOngoing.value = true
-
-  let response = await estimateStore.fetchEstimates(data)
-
-  isRequestOngoing.value = false
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-
-function setStatusFilter(val) {
-  if (activeTab.value == val.title) {
-    return true
-  }
-
-  activeTab.value = val.title
-
-  switch (val.title) {
-    case t('general.draft'):
-      filters.status = 'DRAFT'
-      break
-    case t('general.sent'):
-      filters.status = 'SENT'
-      break
-    default:
-      filters.status = ''
-      break
-  }
-}
-
-function setFilters() {
-  estimateStore.$patch((state) => {
-    state.selectedEstimates = []
-    state.selectAllField = false
-  })
-
-  tableKey.value += 1
-
-  refreshTable()
-}
-
-function clearFilter() {
-  filters.customer_id = ''
-  filters.status = ''
-  filters.from_date = ''
-  filters.to_date = ''
-  filters.estimate_number = ''
-
-  activeTab.value = t('general.all')
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-
-async function removeMultipleEstimates() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('estimates.confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((res) => {
-      if (res) {
-        estimateStore.deleteMultipleEstimates().then((res) => {
-          refreshTable()
-          if (res.data) {
-            estimateStore.$patch((state) => {
-              state.selectedEstimates = []
-              state.selectAllField = false
-            })
-          }
-        })
-      }
-    })
-}
-
-function setActiveTab(val) {
-  switch (val) {
-    case 'DRAFT':
-      activeTab.value = t('general.draft')
-      break
-    case 'SENT':
-      activeTab.value = t('general.sent')
-      break
-
-    case 'VIEWED':
-      activeTab.value = t('estimates.viewed')
-      break
-
-    case 'EXPIRED':
-      activeTab.value = t('estimates.expired')
-      break
-
-    case 'ACCEPTED':
-      activeTab.value = t('estimates.accepted')
-      break
-
-    case 'REJECTED':
-      activeTab.value = t('estimates.rejected')
-      break
-
-    default:
-      activeTab.value = t('general.all')
-      break
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
deleted file mode 100644
index c99a6381..00000000
--- a/resources/scripts/admin/views/estimates/View.vue
+++ /dev/null
@@ -1,539 +0,0 @@
-<template>
-  <SendEstimateModal @update="updateSentEstimate" />
-  <BasePage v-if="estimateData" class="xl:pl-96 xl:ml-8">
-    <BasePageHeader :title="pageTitle">
-      <template #actions>
-        <div class="mr-3 text-sm">
-          <BaseButton
-            v-if="
-              estimateData.status === 'DRAFT' &&
-              userStore.hasAbilities(abilities.EDIT_ESTIMATE)
-            "
-            :disabled="isMarkAsSent"
-            :content-loading="isLoadingEstimate"
-            variant="primary-outline"
-            @click="onMarkAsSent"
-          >
-            {{ $t('estimates.mark_as_sent') }}
-          </BaseButton>
-        </div>
-
-        <BaseButton
-          v-if="
-            estimateData.status === 'DRAFT' &&
-            userStore.hasAbilities(abilities.SEND_ESTIMATE)
-          "
-          :content-loading="isLoadingEstimate"
-          variant="primary"
-          class="text-sm"
-          @click="onSendEstimate"
-        >
-          {{ $t('estimates.send_estimate') }}
-        </BaseButton>
-
-        <EstimateDropDown class="ml-3" :row="estimateData" />
-      </template>
-    </BasePageHeader>
-
-    <!-- Sidebar -->
-    <div
-      class="
-        fixed
-        top-0
-        left-0
-        hidden
-        h-full
-        pt-16
-        pb-[6.4rem]
-        ml-56
-        bg-surface
-        xl:ml-64
-        w-88
-        xl:block
-      "
-    >
-      <div
-        class="
-          flex
-          items-center
-          justify-between
-          px-4
-          pt-8
-          pb-2
-          border border-line-default border-solid
-          height-full
-        "
-      >
-        <div class="mb-6">
-          <BaseInput
-            v-model="searchData.searchText"
-            :placeholder="$t('general.search')"
-            type="text"
-            variant="gray"
-            @input="onSearched()"
-          >
-            <template #right>
-              <BaseIcon name="MagnifyingGlassIcon" class="text-subtle" />
-            </template>
-          </BaseInput>
-        </div>
-
-        <div class="flex mb-6 ml-3" role="group" aria-label="First group">
-          <BaseDropdown
-            class="ml-3"
-            position="bottom-start"
-            width-class="w-45"
-            position-class="left-0"
-          >
-            <template #activator>
-              <BaseButton size="md" variant="gray">
-                <BaseIcon name="FunnelIcon" />
-              </BaseButton>
-            </template>
-
-            <div
-              class="
-                px-4
-                py-1
-                pb-2
-                mb-1 mb-2
-                text-sm
-                border-b border-line-default border-solid
-              "
-            >
-              {{ $t('general.sort_by') }}
-            </div>
-
-            <BaseDropdownItem class="flex px-4 py-2 cursor-pointer">
-              <BaseInputGroup class="-mt-3 font-normal">
-                <BaseRadio
-                  id="filter_estimate_date"
-                  v-model="searchData.orderByField"
-                  :label="$t('reports.estimates.estimate_date')"
-                  size="sm"
-                  name="filter"
-                  value="estimate_date"
-                  @update:modelValue="onSearched"
-                />
-              </BaseInputGroup>
-            </BaseDropdownItem>
-
-            <BaseDropdownItem class="flex px-4 py-2 cursor-pointer">
-              <BaseInputGroup class="-mt-3 font-normal">
-                <BaseRadio
-                  id="filter_due_date"
-                  v-model="searchData.orderByField"
-                  :label="$t('estimates.due_date')"
-                  value="expiry_date"
-                  size="sm"
-                  name="filter"
-                  @update:modelValue="onSearched"
-                />
-              </BaseInputGroup>
-            </BaseDropdownItem>
-
-            <BaseDropdownItem class="flex px-4 py-2 cursor-pointer">
-              <BaseInputGroup class="-mt-3 font-normal">
-                <BaseRadio
-                  id="filter_estimate_number"
-                  v-model="searchData.orderByField"
-                  :label="$t('estimates.estimate_number')"
-                  value="estimate_number"
-                  size="sm"
-                  name="filter"
-                  @update:modelValue="onSearched"
-                />
-              </BaseInputGroup>
-            </BaseDropdownItem>
-          </BaseDropdown>
-
-          <BaseButton class="ml-1" size="md" variant="gray" @click="sortData">
-            <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" />
-            <BaseIcon v-else name="SortDescendingIcon" />
-          </BaseButton>
-        </div>
-      </div>
-
-      <div
-        ref="estimateListSection"
-        class="
-          h-full
-          overflow-y-scroll
-          border-l border-line-default border-solid
-          base-scroll
-        "
-      >
-        <div v-for="(estimate, index) in estimateList" :key="index">
-          <router-link
-            v-if="estimate"
-            :id="'estimate-' + estimate.id"
-            :to="`/admin/estimates/${estimate.id}/view`"
-            :class="[
-              'flex justify-between side-estimate p-4 cursor-pointer hover:bg-hover-strong items-center border-l-4 border-l-transparent',
-              {
-                'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
-                  hasActiveUrl(estimate.id),
-              },
-            ]"
-            style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
-          >
-            <div class="flex-2">
-              <BaseText
-                :text="estimate.customer.name"
-                class="
-                  pr-2
-                  mb-2
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-heading
-                  capitalize
-                  truncate
-                "
-              />
-
-              <div
-                class="
-                  mt-1
-                  mb-2
-                  text-xs
-                  not-italic
-                  font-medium
-                  leading-5
-                  text-body
-                "
-              >
-                {{ estimate.estimate_number }}
-              </div>
-
-              <BaseEstimateStatusBadge
-                :status="estimate.status"
-                class="px-1 text-xs"
-              >
-                <BaseEstimateStatusLabel :status="estimate.status" />
-              </BaseEstimateStatusBadge>
-            </div>
-
-            <div class="flex-1 whitespace-nowrap right">
-              <BaseFormatMoney
-                :amount="estimate.total"
-                :currency="estimate.customer.currency"
-                class="
-                  block
-                  mb-2
-                  text-xl
-                  not-italic
-                  font-semibold
-                  leading-8
-                  text-right text-heading
-                "
-              />
-
-              <div
-                class="
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-right text-body
-                  est-date
-                "
-              >
-                {{ estimate.formatted_estimate_date }}
-              </div>
-            </div>
-          </router-link>
-        </div>
-        <div v-if="isLoading" class="flex justify-center p-4 items-center">
-          <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
-        </div>
-        <p
-          v-if="!estimateList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-body"
-        >
-          {{ $t('estimates.no_matching_estimates') }}
-        </p>
-      </div>
-    </div>
-
-    <div
-      class="flex flex-col min-h-0 mt-8 overflow-hidden"
-      style="height: 75vh"
-    >
-      <iframe
-        :src="`${shareableLink}`"
-        class="
-          flex-1
-          border border-gray-400 border-solid
-          rounded-xl
-          bg-surface
-          frame-style
-        "
-      />
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-import { computed, reactive, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { debounce } from 'lodash'
-
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useUserStore } from '@/scripts/admin/stores/user'
-
-import EstimateDropDown from '@/scripts/admin/components/dropdowns/EstimateIndexDropdown.vue'
-import SendEstimateModal from '@/scripts/admin/components/modal-components/SendEstimateModal.vue'
-import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
-
-import abilities from '@/scripts/admin/stub/abilities'
-
-const modalStore = useModalStore()
-const estimateStore = useEstimateStore()
-const dialogStore = useDialogStore()
-const userStore = useUserStore()
-
-const { t } = useI18n()
-const estimateData = ref(null)
-const route = useRoute()
-const router = useRouter()
-
-const isMarkAsSent = ref(false)
-const isLoading = ref(false)
-const isLoadingEstimate = ref(false)
-
-const estimateList = ref(null)
-const currentPageNumber = ref(1)
-const lastPageNumber = ref(1)
-const estimateListSection = ref(null)
-
-const searchData = reactive({
-  orderBy: null,
-  orderByField: null,
-  searchText: null,
-})
-
-const pageTitle = computed(() => estimateData.value.estimate_number)
-
-const getOrderBy = computed(() => {
-  if (searchData.orderBy === 'asc' || searchData.orderBy == null) {
-    return true
-  }
-  return false
-})
-
-const getOrderName = computed(() => {
-  if (getOrderBy.value) {
-    return t('general.ascending')
-  }
-  return t('general.descending')
-})
-
-const shareableLink = computed(() => {
-  return `/estimates/pdf/${estimateData.value.unique_hash}`
-})
-
-const getCurrentEstimateId = computed(() => {
-  if (estimateData.value && estimateData.value.id) {
-    return estimate.value.id
-  }
-  return null
-})
-
-watch(route, (to, from) => {
-  if (to.name === 'estimates.view') {
-    loadEstimate()
-  }
-})
-
-loadEstimates()
-loadEstimate()
-
-onSearched = debounce(onSearched, 500)
-
-function hasActiveUrl(id) {
-  return route.params.id == id
-}
-
-async function loadEstimates(pageNumber, fromScrollListener = false) {
-  if (isLoading.value) {
-    return
-  }
-
-  let params = {}
-  if (
-    searchData.searchText !== '' &&
-    searchData.searchText !== null &&
-    searchData.searchText !== undefined
-  ) {
-    params.search = searchData.searchText
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    params.orderBy = searchData.orderBy
-  }
-
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    params.orderByField = searchData.orderByField
-  }
-
-  isLoading.value = true
-  let response = await estimateStore.fetchEstimates({
-    page: pageNumber,
-    ...params,
-  })
-  isLoading.value = false
-
-  estimateList.value = estimateList.value ? estimateList.value : []
-  estimateList.value = [...estimateList.value, ...response.data.data]
-
-  currentPageNumber.value = pageNumber ? pageNumber : 1
-  lastPageNumber.value = response.data.meta.last_page
-  let estimateFound = estimateList.value.find(
-    (est) => est.id == route.params.id
-  )
-
-  if (
-    fromScrollListener == false &&
-    !estimateFound &&
-    currentPageNumber.value < lastPageNumber.value &&
-    Object.keys(params).length === 0
-  ) {
-    loadEstimates(++currentPageNumber.value)
-  }
-
-  if (estimateFound) {
-    setTimeout(() => {
-      if (fromScrollListener == false) {
-        scrollToEstimate()
-      }
-    }, 500)
-  }
-}
-
-function scrollToEstimate() {
-  const el = document.getElementById(`estimate-${route.params.id}`)
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth' })
-    el.classList.add('shake')
-    addScrollListener()
-  }
-}
-
-function addScrollListener() {
-  estimateListSection.value.addEventListener('scroll', (ev) => {
-    if (
-      ev.target.scrollTop > 0 &&
-      ev.target.scrollTop + ev.target.clientHeight >
-        ev.target.scrollHeight - 200
-    ) {
-      if (currentPageNumber.value < lastPageNumber.value) {
-        loadEstimates(++currentPageNumber.value, true)
-      }
-    }
-  })
-}
-
-async function loadEstimate() {
-  isLoadingEstimate.value = true
-  let response = await estimateStore.fetchEstimate(route.params.id)
-
-  if (response.data) {
-    isLoadingEstimate.value = false
-    estimateData.value = { ...response.data.data }
-  }
-}
-
-async function onSearched() {
-  estimateList.value = []
-  loadEstimates()
-}
-
-function sortData() {
-  if (searchData.orderBy === 'asc') {
-    searchData.orderBy = 'desc'
-    onSearched()
-    return true
-  }
-  searchData.orderBy = 'asc'
-  onSearched()
-  return true
-}
-
-async function onMarkAsSent() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('estimates.confirm_mark_as_sent'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'primary',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((response) => {
-      isMarkAsSent.value = false
-      if (response) {
-        estimateStore.markAsSent({
-          id: estimateData.value.id,
-          status: 'SENT',
-        })
-        estimateData.value.status = 'SENT'
-        isMarkAsSent.value = true
-      }
-      isMarkAsSent.value = false
-    })
-}
-
-async function onSendEstimate(id) {
-  modalStore.openModal({
-    title: t('estimates.send_estimate'),
-    componentName: 'SendEstimateModal',
-    id: estimateData.value.id,
-    data: estimateData.value,
-  })
-}
-
-async function removeEstimate(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('estimates.confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((res) => {
-      if (res) {
-        estimateStore
-          .deleteEstimate({ ids: [id] })
-          .then(() => {
-            router.push('/admin/estimates')
-          })
-          .catch((err) => {
-            console.error(err)
-          })
-      }
-    })
-}
-
-function updateSentEstimate() {
-  let pos = estimateList.value.findIndex(
-    (estimate) => estimate.id === estimateData.value.id
-  )
-
-  if (estimateList.value[pos]) {
-    estimateList.value[pos].status = 'SENT'
-    estimateData.value.status = 'SENT'
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/estimates/create/EstimateCreate.vue b/resources/scripts/admin/views/estimates/create/EstimateCreate.vue
deleted file mode 100644
index f420213e..00000000
--- a/resources/scripts/admin/views/estimates/create/EstimateCreate.vue
+++ /dev/null
@@ -1,311 +0,0 @@
-<template>
-  <SelectTemplateModal />
-  <ItemModal />
-  <TaxTypeModal />
-  <SalesTax
-    v-if="salesTaxEnabled && (!isLoadingContent || route.query.customer)"
-    :store="estimateStore"
-    store-prop="newEstimate"
-    :is-edit="isEdit"
-    :customer="estimateStore.newEstimate.customer"
-  />
-
-  <BasePage class="relative estimate-create-page">
-    <form @submit.prevent="submitForm">
-      <BasePageHeader :title="pageTitle">
-        <BaseBreadcrumb>
-          <BaseBreadcrumbItem
-            :title="$t('general.home')"
-            to="/admin/dashboard"
-          />
-          <BaseBreadcrumbItem
-            :title="$t('estimates.estimate', 2)"
-            to="/admin/estimates"
-          />
-          <BaseBreadcrumbItem
-            v-if="$route.name === 'estimates.edit'"
-            :title="$t('estimates.edit_estimate')"
-            to="#"
-            active
-          />
-          <BaseBreadcrumbItem
-            v-else
-            :title="$t('estimates.new_estimate')"
-            to="#"
-            active
-          />
-        </BaseBreadcrumb>
-
-        <template #actions>
-          <router-link
-            v-if="$route.name === 'estimates.edit'"
-            :to="`/estimates/pdf/${estimateStore.newEstimate.unique_hash}`"
-            target="_blank"
-          >
-            <BaseButton class="mr-3" variant="primary-outline" type="button">
-              <span class="flex">
-                {{ $t('general.view_pdf') }}
-              </span>
-            </BaseButton>
-          </router-link>
-
-          <BaseButton
-            :loading="isSaving"
-            :disabled="isSaving"
-            :content-loading="isLoadingContent"
-            variant="primary"
-            type="submit"
-          >
-            <template #left="slotProps">
-              <BaseIcon
-                v-if="!isSaving"
-                :class="slotProps.class"
-                name="ArrowDownOnSquareIcon"
-              />
-            </template>
-            {{ $t('estimates.save_estimate') }}
-          </BaseButton>
-        </template>
-      </BasePageHeader>
-
-      <!-- Select Customer & Basic Fields  -->
-      <EstimateBasicFields
-        :v="v$"
-        :is-loading="isLoadingContent"
-        :is-edit="isEdit"
-      />
-
-      <BaseScrollPane>
-        <!-- Estimate Items -->
-        <Items
-          :currency="estimateStore.newEstimate.selectedCurrency"
-          :is-loading="isLoadingContent"
-          :item-validation-scope="estimateValidationScope"
-          :store="estimateStore"
-          store-prop="newEstimate"
-        />
-
-        <!-- Estimate Footer Section -->
-        <div
-          class="
-            block
-            mt-10
-            estimate-foot
-            lg:flex lg:justify-between lg:items-start
-          "
-        >
-          <div class="relative w-full lg:w-1/2">
-            <!-- Estimate Custom Notes -->
-            <NoteFields
-              :store="estimateStore"
-              store-prop="newEstimate"
-              :fields="estimateNoteFieldList"
-              type="Estimate"
-            />
-
-            <!-- Estimate Custom Fields -->
-            <EstimateCustomFields
-              type="Estimate"
-              :is-edit="isEdit"
-              :is-loading="isLoadingContent"
-              :store="estimateStore"
-              store-prop="newEstimate"
-              :custom-field-scope="estimateValidationScope"
-              class="mb-6"
-            />
-
-            <!-- Estimate Template Button-->
-            <SelectTemplate
-              :store="estimateStore"
-              component-name="EstimateTemplate"
-              store-prop="newEstimate"
-              :is-mark-as-default="isMarkAsDefault"
-            />
-          </div>
-
-          <Total
-            :currency="estimateStore.newEstimate.selectedCurrency"
-            :is-loading="isLoadingContent"
-            :store="estimateStore"
-            store-prop="newEstimate"
-            tax-popup-type="estimate"
-          />
-        </div>
-      </BaseScrollPane>
-    </form>
-  </BasePage>
-</template>
-
-<script setup>
-import { computed, ref, watch, onMounted } from 'vue'
-import { cloneDeep } from 'lodash'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import {
-  required,
-  maxLength,
-  helpers,
-  requiredIf,
-  decimal,
-} from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useModuleStore } from '@/scripts/admin/stores/module'
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
-
-import Items from '@/scripts/admin/components/estimate-invoice-common/CreateItems.vue'
-import Total from '@/scripts/admin/components/estimate-invoice-common/CreateTotal.vue'
-import SelectTemplate from '@/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue'
-import EstimateCustomFields from '@/scripts/admin/components/custom-fields/CreateCustomFields.vue'
-import NoteFields from '@/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue'
-import EstimateBasicFields from './EstimateCreateBasicFields.vue'
-import SelectTemplateModal from '@/scripts/admin/components/modal-components/SelectTemplateModal.vue'
-import TaxTypeModal from '@/scripts/admin/components/modal-components/TaxTypeModal.vue'
-import ItemModal from '@/scripts/admin/components/modal-components/ItemModal.vue'
-import SalesTax from '@/scripts/admin/components/estimate-invoice-common/SalesTax.vue'
-
-const estimateStore = useEstimateStore()
-const moduleStore = useModuleStore()
-const companyStore = useCompanyStore()
-const customFieldStore = useCustomFieldStore()
-const { t } = useI18n()
-
-const estimateValidationScope = 'newEstimate'
-let isSaving = ref(false)
-const isMarkAsDefault = ref(false)
-
-const estimateNoteFieldList = ref([
-  'customer',
-  'company',
-  'customerCustom',
-  'estimate',
-  'estimateCustom',
-])
-
-let route = useRoute()
-let router = useRouter()
-
-let isLoadingContent = computed(() => estimateStore.isFetchingInitialSettings)
-
-let pageTitle = computed(() =>
-  isEdit.value ? t('estimates.edit_estimate') : t('estimates.new_estimate')
-)
-
-let isEdit = computed(() => route.name === 'estimates.edit')
-
-const salesTaxEnabled = computed(() => {
-  return (
-    companyStore.selectedCompanySettings.sales_tax_us_enabled === 'YES' &&
-    moduleStore.salesTaxUSEnabled
-  )
-})
-
-const rules = {
-  estimate_date: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  estimate_number: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  reference_number: {
-    maxLength: helpers.withMessage(
-      t('validation.price_maxlength'),
-      maxLength(255)
-    ),
-  },
-  customer_id: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  exchange_rate: {
-    required: requiredIf(function () {
-      helpers.withMessage(t('validation.required'), required)
-      return estimateStore.showExchangeRate
-    }),
-    decimal: helpers.withMessage(t('validation.valid_exchange_rate'), decimal),
-  },
-}
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => estimateStore.newEstimate),
-  { $scope: estimateValidationScope }
-)
-
-watch(
-  () => estimateStore.newEstimate.customer,
-  (newVal) => {
-    if (newVal && newVal.currency) {
-      estimateStore.newEstimate.selectedCurrency = newVal.currency
-    } else {
-      estimateStore.newEstimate.selectedCurrency =
-        companyStore.selectedCompanyCurrency
-    }
-  }
-)
-
-estimateStore.resetCurrentEstimate()
-customFieldStore.resetCustomFields()
-v$.value.$reset
-estimateStore.fetchEstimateInitialSettings(isEdit.value)
-
-watch(
-  () => companyStore.selectedCompanySettings?.tax_included_by_default,
-  (newVal) => {
-    estimateStore.newEstimate.tax_included = newVal === 'YES'
-  },
-  {immediate: true}
-)
-
-async function submitForm() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return false
-  }
-
-  isSaving.value = true
-
-  let data = cloneDeep({
-    ...estimateStore.newEstimate,
-    sub_total: estimateStore.getSubTotal,
-    total: estimateStore.getTotal,
-    tax: estimateStore.getTotalTax,
-  })
-  if (data.discount_per_item === 'YES') {
-    data.items.forEach((item, index) => {
-      if (item.discount_type === 'fixed'){
-        data.items[index].discount = Math.round(item.discount * 100)
-      }
-    })
-  }
-  else {
-    if (data.discount_type === 'fixed'){
-      data.discount = Math.round(data.discount * 100)
-    }
-  }
-
-  if (
-    !estimateStore.newEstimate.tax_per_item === 'YES'
-    && data.taxes.length
-  ){
-    data.tax_type_ids = data.taxes.map(_t => _t.tax_type_id)
-  }
-
-  const action = isEdit.value
-    ? estimateStore.updateEstimate
-    : estimateStore.addEstimate
-
-  try {
-    let res = await action(data)
-
-    if (res.data.data) {
-      router.push(`/admin/estimates/${res.data.data.id}/view`)
-    }
-  } catch (err) {
-    console.error(err)
-  }
-
-  isSaving.value = false
-}
-</script>
diff --git a/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue b/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue
deleted file mode 100644
index 255a89b5..00000000
--- a/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-  <div class="md:grid-cols-12 grid-cols-1 md:gap-x-6 mt-6 mb-8 grid gap-y-5">
-    <BaseCustomerSelectPopup
-      v-model="estimateStore.newEstimate.customer"
-      :valid="v.customer_id"
-      :content-loading="isLoading"
-      type="estimate"
-      class="col-span-5 pr-0"
-    />
-
-    <BaseInputGrid class="col-span-7 rounded-xl shadow border border-line-light bg-surface p-5">
-      <BaseInputGroup
-        :label="$t('reports.estimates.estimate_date')"
-        :content-loading="isLoading"
-        required
-        :error="v.estimate_date.$error && v.estimate_date.$errors[0].$message"
-      >
-        <BaseDatePicker
-          v-model="estimateStore.newEstimate.estimate_date"
-          :content-loading="isLoading"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('estimates.expiry_date')"
-        :content-loading="isLoading"
-      >
-        <BaseDatePicker
-          v-model="estimateStore.newEstimate.expiry_date"
-          :content-loading="isLoading"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('estimates.estimate_number')"
-        :content-loading="isLoading"
-        required
-        :error="
-          v.estimate_number.$error && v.estimate_number.$errors[0].$message
-        "
-      >
-        <BaseInput
-          v-model="estimateStore.newEstimate.estimate_number"
-          :content-loading="isLoading"
-        >
-        </BaseInput>
-      </BaseInputGroup>
-
-      <!-- <BaseInputGroup
-        :label="$t('estimates.ref_number')"
-        :content-loading="isLoading"
-        :error="
-          v.reference_number.$error && v.reference_number.$errors[0].$message
-        "
-      >
-        <BaseInput
-          v-model="estimateStore.newEstimate.reference_number"
-          :content-loading="isLoading"
-          @input="v.reference_number.$touch()"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="HashtagIcon" :class="slotProps.class" />
-          </template>
-        </BaseInput>
-      </BaseInputGroup> -->
-      <ExchangeRateConverter
-        :store="estimateStore"
-        store-prop="newEstimate"
-        :v="v"
-        :is-loading="isLoading"
-        :is-edit="isEdit"
-        :customer-currency="estimateStore.newEstimate.currency_id"
-      />
-    </BaseInputGrid>
-  </div>
-</template>
-
-<script setup>
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import ExchangeRateConverter from '@/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue'
-
-const props = defineProps({
-  v: {
-    type: Object,
-    default: null,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  isEdit: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const estimateStore = useEstimateStore()
-</script>
diff --git a/resources/scripts/admin/views/expenses/Create.vue b/resources/scripts/admin/views/expenses/Create.vue
deleted file mode 100644
index 8fef8209..00000000
--- a/resources/scripts/admin/views/expenses/Create.vue
+++ /dev/null
@@ -1,534 +0,0 @@
-<template>
-  <CategoryModal />
-
-  <BasePage class="relative">
-    <form action="" @submit.prevent="submitForm">
-      <!-- Page Header -->
-      <BasePageHeader :title="pageTitle" class="mb-5">
-        <BaseBreadcrumb>
-          <BaseBreadcrumbItem
-            :title="$t('general.home')"
-            to="/admin/dashboard"
-          />
-
-          <BaseBreadcrumbItem
-            :title="$t('expenses.expense', 2)"
-            to="/admin/expenses"
-          />
-
-          <BaseBreadcrumbItem :title="pageTitle" to="#" active />
-        </BaseBreadcrumb>
-
-        <template #actions>
-          <BaseButton
-            v-if="isEdit && expenseStore.currentExpense.attachment_receipt_url"
-            :href="receiptDownloadUrl"
-            tag="a"
-            variant="primary-outline"
-            type="button"
-            class="mr-2"
-          >
-            <template #left="slotProps">
-              <BaseIcon name="DownloadIcon" :class="slotProps.class" />
-            </template>
-            {{ $t('expenses.download_receipt') }}
-          </BaseButton>
-
-          <div class="hidden md:block">
-            <BaseButton
-              :loading="isSaving"
-              :content-loading="isFetchingInitialData"
-              :disabled="isSaving"
-              variant="primary"
-              type="submit"
-            >
-              <template #left="slotProps">
-                <BaseIcon
-                  v-if="!isSaving"
-                  name="ArrowDownOnSquareIcon"
-                  :class="slotProps.class"
-                />
-              </template>
-              {{
-                isEdit
-                  ? $t('expenses.update_expense')
-                  : $t('expenses.save_expense')
-              }}
-            </BaseButton>
-          </div>
-        </template>
-      </BasePageHeader>
-
-      <BaseCard>
-        <BaseInputGrid>
-          <BaseInputGroup
-            :label="$t('expenses.category')"
-            :error="
-              v$.currentExpense.expense_category_id.$error &&
-              v$.currentExpense.expense_category_id.$errors[0].$message
-            "
-            :content-loading="isFetchingInitialData"
-            required
-          >
-            <BaseMultiselect
-              v-model="expenseStore.currentExpense.expense_category_id"
-              :content-loading="isFetchingInitialData"
-              value-prop="id"
-              label="name"
-              track-by="id"
-              :options="searchCategory"
-              v-if="!isFetchingInitialData"
-              :filter-results="false"
-              resolve-on-load
-              :delay="500"
-              searchable
-              :invalid="v$.currentExpense.expense_category_id.$error"
-              :placeholder="$t('expenses.categories.select_a_category')"
-              @input="v$.currentExpense.expense_category_id.$touch()"
-            >
-              <template #action>
-                <BaseSelectAction @click="openCategoryModal">
-                  <BaseIcon
-                    name="PlusIcon"
-                    class="h-4 mr-2 -ml-2 text-center text-primary-400"
-                  />
-                  {{ $t('settings.expense_category.add_new_category') }}
-                </BaseSelectAction>
-              </template>
-            </BaseMultiselect>
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('expenses.expense_date')"
-            :error="
-              v$.currentExpense.expense_date.$error &&
-              v$.currentExpense.expense_date.$errors[0].$message
-            "
-            :content-loading="isFetchingInitialData"
-            required
-          >
-            <BaseDatePicker
-              v-model="expenseStore.currentExpense.expense_date"
-              :content-loading="isFetchingInitialData"
-              :calendar-button="true"
-              :invalid="v$.currentExpense.expense_date.$error"
-              @input="v$.currentExpense.expense_date.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('expenses.expense_number')"
-            :content-loading="isFetchingInitialData"
-          >
-            <BaseInput
-              v-model="expenseStore.currentExpense.expense_number"
-              :content-loading="isFetchingInitialData"
-              type="text"
-              name="expense_number"
-              :placeholder="$t('expenses.expense_number_placeholder')"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('expenses.amount')"
-            :error="
-              v$.currentExpense.amount.$error &&
-              v$.currentExpense.amount.$errors[0].$message
-            "
-            :content-loading="isFetchingInitialData"
-            required
-          >
-            <BaseMoney
-              :key="expenseStore.currentExpense.selectedCurrency"
-              v-model="amountData"
-              class="focus:border focus:border-solid focus:border-primary-500"
-              :invalid="v$.currentExpense.amount.$error"
-              :currency="expenseStore.currentExpense.selectedCurrency"
-              @input="v$.currentExpense.amount.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('expenses.currency')"
-            :content-loading="isFetchingInitialData"
-            :error="
-              v$.currentExpense.currency_id.$error &&
-              v$.currentExpense.currency_id.$errors[0].$message
-            "
-            required
-          >
-            <BaseMultiselect
-              v-model="expenseStore.currentExpense.currency_id"
-              value-prop="id"
-              label="name"
-              track-by="name"
-              :content-loading="isFetchingInitialData"
-              :options="globalStore.currencies"
-              searchable
-              :can-deselect="false"
-              :placeholder="$t('customers.select_currency')"
-              :invalid="v$.currentExpense.currency_id.$error"
-              class="w-full"
-              @update:modelValue="onCurrencyChange"
-            >
-            </BaseMultiselect>
-          </BaseInputGroup>
-
-          <!-- Exchange rate converter -->
-          <ExchangeRateConverter
-            :store="expenseStore"
-            store-prop="currentExpense"
-            :v="v$.currentExpense"
-            :is-loading="isFetchingInitialData"
-            :is-edit="isEdit"
-            :customer-currency="expenseStore.currentExpense.currency_id"
-          />
-
-          <BaseInputGroup
-            :content-loading="isFetchingInitialData"
-            :label="$t('expenses.customer')"
-          >
-            <BaseMultiselect
-              v-model="expenseStore.currentExpense.customer_id"
-              :content-loading="isFetchingInitialData"
-              value-prop="id"
-              label="name"
-              track-by="id"
-              :options="searchCustomer"
-              v-if="!isFetchingInitialData"
-              :filter-results="false"
-              resolve-on-load
-              :delay="500"
-              searchable
-              :placeholder="$t('customers.select_a_customer')"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :content-loading="isFetchingInitialData"
-            :label="$t('payments.payment_mode')"
-          >
-            <BaseMultiselect
-              v-model="expenseStore.currentExpense.payment_method_id"
-              :content-loading="isFetchingInitialData"
-              label="name"
-              value-prop="id"
-              track-by="name"
-              :options="expenseStore.paymentModes"
-              :placeholder="$t('payments.select_payment_mode')"
-              searchable
-            >
-              <!-- <template #action>
-                <BaseSelectAction @click="addPaymentMode">
-                  <BaseIcon
-                    name="PlusIcon"
-                    class="h-4 mr-2 -ml-2 text-center text-primary-400"
-                  />
-                  {{ $t('settings.payment_modes.add_payment_mode') }}
-                </BaseSelectAction>
-              </template> -->
-            </BaseMultiselect>
-          </BaseInputGroup>
-
-        </BaseInputGrid>
-
-        <BaseInputGrid class="mt-4">
-          <BaseInputGroup
-            :content-loading="isFetchingInitialData"
-            :label="$t('expenses.note')"
-            :error="
-              v$.currentExpense.notes.$error &&
-              v$.currentExpense.notes.$errors[0].$message
-            "
-          >
-            <BaseTextarea
-              v-model="expenseStore.currentExpense.notes"
-              :content-loading="isFetchingInitialData"
-              :row="4"
-              rows="4"
-              @input="v$.currentExpense.notes.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('expenses.receipt')">
-            <BaseFileUploader
-              v-model="expenseStore.currentExpense.receiptFiles"
-              accept="image/*,.doc,.docx,.pdf,.csv,.xlsx,.xls"
-              @change="onFileInputChange"
-              @remove="onFileInputRemove"
-            />
-          </BaseInputGroup>
-
-          <!-- Expense Custom Fields -->
-          <ExpenseCustomFields
-            :is-edit="isEdit"
-            class="col-span-2"
-            :is-loading="isFetchingInitialData"
-            type="Expense"
-            :store="expenseStore"
-            store-prop="currentExpense"
-            :custom-field-scope="expenseValidationScope"
-          />
-
-          <div class="block md:hidden">
-            <BaseButton
-              :loading="isSaving"
-              :tabindex="6"
-              variant="primary"
-              type="submit"
-              class="flex justify-center w-full"
-            >
-              <template #left="slotProps">
-                <BaseIcon
-                  v-if="!isSaving"
-                  name="ArrowDownOnSquareIcon"
-                  :class="slotProps.class"
-                />
-              </template>
-              {{
-                isEdit
-                  ? $t('expenses.update_expense')
-                  : $t('expenses.save_expense')
-              }}
-            </BaseButton>
-          </div>
-        </BaseInputGrid>
-
-      </BaseCard>
-    </form>
-  </BasePage>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import {
-  required,
-  minValue,
-  maxLength,
-  helpers,
-  requiredIf,
-  decimal,
-} from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useExpenseStore } from '@/scripts/admin/stores/expense'
-import { useCategoryStore } from '@/scripts/admin/stores/category'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
-import { useModalStore } from '@/scripts/stores/modal'
-import ExpenseCustomFields from '@/scripts/admin/components/custom-fields/CreateCustomFields.vue'
-import CategoryModal from '@/scripts/admin/components/modal-components/CategoryModal.vue'
-import ExchangeRateConverter from '@/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-
-const customerStore = useCustomerStore()
-const companyStore = useCompanyStore()
-const expenseStore = useExpenseStore()
-const categoryStore = useCategoryStore()
-const customFieldStore = useCustomFieldStore()
-const modalStore = useModalStore()
-const route = useRoute()
-const router = useRouter()
-const { t } = useI18n()
-const globalStore = useGlobalStore()
-
-let isSaving = ref(false)
-let isFetchingInitialData = ref(false)
-const expenseValidationScope = 'newExpense'
-const isAttachmentReceiptRemoved = ref(false)
-
-const rules = computed(() => {
-  return {
-    currentExpense: {
-      expense_category_id: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      expense_date: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-
-      amount: {
-        required: helpers.withMessage(t('validation.required'), required),
-        minValue: helpers.withMessage(
-          t('validation.price_minvalue'),
-          minValue(0.1)
-        ),
-        maxLength: helpers.withMessage(
-          t('validation.price_maxlength'),
-          maxLength(20)
-        ),
-      },
-
-      notes: {
-        maxLength: helpers.withMessage(
-          t('validation.description_maxlength'),
-          maxLength(65000)
-        ),
-      },
-      currency_id: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      exchange_rate: {
-        required: requiredIf(function () {
-          helpers.withMessage(t('validation.required'), required)
-          return expenseStore.showExchangeRate
-        }),
-        decimal: helpers.withMessage(
-          t('validation.valid_exchange_rate'),
-          decimal
-        ),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(rules, expenseStore, {
-  $scope: expenseValidationScope,
-})
-
-const amountData = computed({
-  get: () => expenseStore.currentExpense.amount / 100,
-  set: (value) => {
-    expenseStore.currentExpense.amount = Math.round(value * 100)
-  },
-})
-
-const isEdit = computed(() => route.name === 'expenses.edit')
-
-const pageTitle = computed(() =>
-  isEdit.value ? t('expenses.edit_expense') : t('expenses.new_expense')
-)
-
-const receiptDownloadUrl = computed(() =>
-  isEdit.value ? `/reports/expenses/${route.params.id}/download-receipt` : ''
-)
-
-expenseStore.resetCurrentExpenseData()
-customFieldStore.resetCustomFields()
-
-loadData()
-
-function onFileInputChange(fileName, file) {
-  expenseStore.currentExpense.attachment_receipt = file
-}
-
-function onFileInputRemove() {
-  expenseStore.currentExpense.attachment_receipt = null
-  isAttachmentReceiptRemoved.value = true
-}
-
-function openCategoryModal() {
-  modalStore.openModal({
-    title: t('settings.expense_category.add_category'),
-    componentName: 'CategoryModal',
-    size: 'sm',
-  })
-}
-
-function onCurrencyChange(v) {
-  expenseStore.currentExpense.selectedCurrency = globalStore.currencies.find(
-    (c) => c.id === v
-  )
-}
-
-async function searchCategory(search) {
-  let res = await categoryStore.fetchCategories({ search })
-  if(res.data.data.length>0 && categoryStore.editCategory) {
-    let categoryFound = res.data.data.find((c) => c.id==categoryStore.editCategory.id)
-    if(!categoryFound) {
-      let edit_category = Object.assign({}, categoryStore.editCategory)
-      res.data.data.unshift(edit_category)
-    }
-  }
-  return res.data.data
-}
-
-async function searchCustomer(search) {
-  let res = await customerStore.fetchCustomers({ search })
-  if(res.data.data.length>0 && customerStore.editCustomer) {
-    let customerFound = res.data.data.find((c) => c.id==customerStore.editCustomer.id)
-    if(!customerFound) {
-      let edit_customer = Object.assign({}, customerStore.editCustomer)
-      res.data.data.unshift(edit_customer)
-    }
-  }
-  return res.data.data
-}
-
-async function loadData() {
-  if (!isEdit.value) {
-    expenseStore.currentExpense.currency_id =
-      companyStore.selectedCompanyCurrency.id
-    expenseStore.currentExpense.selectedCurrency =
-      companyStore.selectedCompanyCurrency
-  }
-
-  isFetchingInitialData.value = true
-  await expenseStore.fetchPaymentModes({ limit: 'all' })
-
-  if (isEdit.value) {
-    const expenseData = await expenseStore.fetchExpense(route.params.id)
-
-    expenseStore.currentExpense.currency_id =
-      expenseStore.currentExpense.selectedCurrency.id
-
-    if(expenseData.data) {
-      if(!categoryStore.editCategory && expenseData.data.data.expense_category) {
-        categoryStore.editCategory = expenseData.data.data.expense_category
-      }
-
-      if(!customerStore.editCustomer && expenseData.data.data.customer) {
-        customerStore.editCustomer = expenseData.data.data.customer
-      }
-    }
-
-  } else if (route.query.customer) {
-    expenseStore.currentExpense.customer_id = route.query.customer
-  }
-
-  isFetchingInitialData.value = false
-}
-
-async function submitForm() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return
-  }
-
-  isSaving.value = true
-
-  let formData = {
-    ...expenseStore.currentExpense,
-    expense_number: expenseStore.currentExpense.expense_number || ''
-  }
-
-  try {
-    if (isEdit.value) {
-      await expenseStore.updateExpense({
-        id: route.params.id,
-        data: formData,
-        isAttachmentReceiptRemoved: isAttachmentReceiptRemoved.value
-      })
-    } else {
-      await expenseStore.addExpense(formData)
-    }
-    isSaving.value = false
-    expenseStore.currentExpense.attachment_receipt = null
-    isAttachmentReceiptRemoved.value = false
-    router.push('/admin/expenses')
-  } catch (err) {
-    console.error(err)
-    isSaving.value = false
-    return
-  }
-}
-
-onBeforeUnmount(() => {
-  expenseStore.resetCurrentExpenseData()
-  customerStore.editCustomer = null
-  categoryStore.editCategory = null
-})
-</script>
diff --git a/resources/scripts/admin/views/expenses/Index.vue b/resources/scripts/admin/views/expenses/Index.vue
deleted file mode 100644
index 56150361..00000000
--- a/resources/scripts/admin/views/expenses/Index.vue
+++ /dev/null
@@ -1,414 +0,0 @@
-<template>
-  <BasePage>
-    <!-- Page Header -->
-    <BasePageHeader :title="$t('expenses.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem :title="$t('expenses.expense', 2)" to="#" active />
-      </BaseBreadcrumb>
-
-      <template #actions>
-        <BaseButton
-          v-show="expenseStore.totalExpenses"
-          variant="primary-outline"
-          @click="toggleFilter"
-        >
-          {{ $t('general.filter') }}
-          <template #right="slotProps">
-            <BaseIcon
-              v-if="!showFilters"
-              name="FunnelIcon"
-              :class="slotProps.class"
-            />
-            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
-          </template>
-        </BaseButton>
-
-        <BaseButton
-          v-if="userStore.hasAbilities(abilities.CREATE_EXPENSE)"
-          class="ml-4"
-          variant="primary"
-          @click="$router.push('expenses/create')"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="PlusIcon" :class="slotProps.class" />
-          </template>
-          {{ $t('expenses.add_expense') }}
-        </BaseButton>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper :show="showFilters" class="mt-5" @clear="clearFilter">
-      <BaseInputGroup :label="$t('expenses.customer')">
-        <BaseCustomerSelectInput
-          v-model="filters.customer_id"
-          :placeholder="$t('customers.type_or_click')"
-          value-prop="id"
-          label="name"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('expenses.category')">
-        <BaseMultiselect
-          v-model="filters.expense_category_id"
-          value-prop="id"
-          label="name"
-          track-by="name"
-          :filter-results="false"
-          resolve-on-load
-          :delay="500"
-          :options="searchCategory"
-          searchable
-          :placeholder="$t('expenses.categories.select_a_category')"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('expenses.from_date')">
-        <BaseDatePicker
-          v-model="filters.from_date"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-      <div
-        class="hidden w-8 h-0 mx-4 border border-gray-400 border-solid xl:block"
-        style="margin-top: 1.5rem"
-      />
-
-      <BaseInputGroup :label="$t('expenses.to_date')">
-        <BaseDatePicker
-          v-model="filters.to_date"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <!-- Empty Table Placeholder -->
-    <BaseEmptyPlaceholder
-      v-show="showEmptyScreen"
-      :title="$t('expenses.no_expenses')"
-      :description="$t('expenses.list_of_expenses')"
-    >
-      <UFOIcon class="mt-5 mb-4" />
-
-      <template
-        v-if="userStore.hasAbilities(abilities.CREATE_EXPENSE)"
-        #actions
-      >
-        <BaseButton
-          variant="primary-outline"
-          @click="$router.push('/admin/expenses/create')"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="PlusIcon" :class="slotProps.class" />
-          </template>
-          {{ $t('expenses.add_new_expense') }}
-        </BaseButton>
-      </template>
-    </BaseEmptyPlaceholder>
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <div class="relative flex items-center justify-end h-5">
-        <BaseDropdown
-          v-if="
-            expenseStore.selectedExpenses.length &&
-            userStore.hasAbilities(abilities.DELETE_EXPENSE)
-          "
-        >
-          <template #activator>
-            <span
-              class="
-                flex
-                text-sm
-                font-medium
-                cursor-pointer
-                select-none
-                text-primary-400
-              "
-            >
-              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" />
-            </span>
-          </template>
-
-          <BaseDropdownItem
-            v-if="userStore.hasAbilities(abilities.DELETE_EXPENSE)"
-            @click="removeMultipleExpenses"
-          >
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </div>
-
-      <BaseTable
-        ref="tableComponent"
-        :data="fetchData"
-        :columns="expenseColumns"
-        class="mt-3"
-      >
-        <!-- Select All Checkbox -->
-        <template #header>
-          <div class="absolute items-center left-6 top-2.5 select-none">
-            <BaseCheckbox
-              v-model="selectAllFieldStatus"
-              variant="primary"
-              @change="expenseStore.selectAllExpenses"
-            />
-          </div>
-        </template>
-        <template #cell-status="{ row }">
-          <div class="relative block">
-            <BaseCheckbox
-              :id="row.id"
-              v-model="selectField"
-              :value="row.data.id"
-              variant="primary"
-            />
-          </div>
-        </template>
-
-        <template #cell-name="{ row }">
-          <router-link
-            :to="{ path: `expenses/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.expense_category.name }}
-          </router-link>
-        </template>
-
-        <template #cell-amount="{ row }">
-          <BaseFormatMoney
-            :amount="row.data.amount"
-            :currency="row.data.currency"
-          />
-        </template>
-
-        <template #cell-expense_date="{ row }">
-          {{ row.data.formatted_expense_date }}
-        </template>
-
-        <template #cell-expense_number="{ row }">
-          {{ row.data.expense_number || '-' }}
-        </template>
-
-        <template #cell-user_name="{ row }">
-          <BaseText
-            :text="row.data.customer ? row.data.customer.name : '-'"
-          />
-        </template>
-
-        <template #cell-notes="{ row }">
-          <div class="notes">
-            <div class="truncate note w-60">
-              {{ row.data.notes ? row.data.notes : '-' }}
-            </div>
-          </div>
-        </template>
-
-        <template v-if="hasAbilities()" #cell-actions="{ row }">
-          <ExpenseDropdown
-            :row="row.data"
-            :table="tableComponent"
-            :load-data="refreshTable"
-          />
-        </template>
-      </BaseTable>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { ref, onMounted, computed, reactive, onUnmounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useExpenseStore } from '@/scripts/admin/stores/expense'
-import { useCategoryStore } from '@/scripts/admin/stores/category'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { debouncedWatch } from '@vueuse/core'
-import { useUserStore } from '@/scripts/admin/stores/user'
-
-import abilities from '@/scripts/admin/stub/abilities'
-
-import UFOIcon from '@/scripts/components/icons/empty/UFOIcon.vue'
-import ExpenseDropdown from '@/scripts/admin/components/dropdowns/ExpenseIndexDropdown.vue'
-
-const companyStore = useCompanyStore()
-const expenseStore = useExpenseStore()
-const dialogStore = useDialogStore()
-const categoryStore = useCategoryStore()
-const userStore = useUserStore()
-
-let isFetchingInitialData = ref(true)
-let showFilters = ref(null)
-
-const filters = reactive({
-  expense_category_id: '',
-  from_date: '',
-  to_date: '',
-  customer_id: '',
-})
-
-const { t } = useI18n()
-let tableComponent = ref(null)
-
-const showEmptyScreen = computed(() => {
-  return !expenseStore.totalExpenses && !isFetchingInitialData.value
-})
-
-const selectField = computed({
-  get: () => expenseStore.selectedExpenses,
-  set: (value) => {
-    return expenseStore.selectExpense(value)
-  },
-})
-
-const selectAllFieldStatus = computed({
-  get: () => expenseStore.selectAllField,
-  set: (value) => {
-    return expenseStore.setSelectAllState(value)
-  },
-})
-
-const expenseColumns = computed(() => {
-  return [
-    {
-      key: 'status',
-      thClass: 'extra w-10',
-      tdClass: 'font-medium text-heading',
-      placeholderClass: 'w-10',
-      sortable: false,
-    },
-    {
-      key: 'expense_date',
-      label: t('expenses.date'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'expense_number',
-      label: t('expenses.expense_number'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'name',
-      label: t('expenses.category'),
-      thClass: 'extra',
-      tdClass: 'cursor-pointer font-medium text-primary-500',
-    },
-    { key: 'user_name', label: t('expenses.customer') },
-    { key: 'notes', label: t('expenses.note') },
-    { key: 'amount', label: t('expenses.amount') },
-    {
-      key: 'actions',
-      sortable: false,
-      tdClass: 'text-right text-sm font-medium',
-    },
-  ]
-})
-
-debouncedWatch(
-  filters,
-  () => {
-    setFilters()
-  },
-  { debounce: 500 }
-)
-
-onUnmounted(() => {
-  if (expenseStore.selectAllField) {
-    expenseStore.selectAllExpenses()
-  }
-})
-
-onMounted(() => {
-  categoryStore.fetchCategories({ limit: 'all' })
-})
-
-async function searchCategory(search) {
-  let res = await categoryStore.fetchCategories({ search })
-  return res.data.data
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    ...filters,
-
-    orderByField: sort.fieldName || 'created_at',
-
-    orderBy: sort.order || 'desc',
-
-    page,
-  }
-
-  isFetchingInitialData.value = true
-
-  let response = await expenseStore.fetchExpenses(data)
-  isFetchingInitialData.value = false
-
-  return {
-    data: response.data.data,
-
-    pagination: {
-      data: response.data.data,
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-
-function refreshTable() {
-  tableComponent.value && tableComponent.value.refresh()
-}
-
-function setFilters() {
-  refreshTable()
-}
-
-function clearFilter() {
-  filters.expense_category_id = ''
-  filters.from_date = ''
-  filters.to_date = ''
-  filters.customer_id = ''
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-
-function hasAbilities() {
-  return userStore.hasAbilities([
-    abilities.DELETE_EXPENSE,
-    abilities.EDIT_EXPENSE,
-  ])
-}
-
-function removeMultipleExpenses() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('expenses.confirm_delete', 2),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      size: 'lg',
-      hideNoButton: false,
-    })
-    .then((res) => {
-      if (res) {
-        expenseStore.deleteMultipleExpenses().then((response) => {
-          if (response.data) {
-            refreshTable()
-          }
-        })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/Installation.vue b/resources/scripts/admin/views/installation/Installation.vue
deleted file mode 100644
index a138f2fd..00000000
--- a/resources/scripts/admin/views/installation/Installation.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <div class="flex flex-col items-center justify-between w-full pt-10">
-
-    <img
-      id="logo-invoiceshelf"
-      :src="getTickImage()"
-      alt="InvoiceShelf Logo"
-      class="h-12 mb-5 md:mb-10"
-    />
-
-    <BaseWizard
-      :steps="9"
-      :current-step="currentStepNumber"
-      @click="onNavClick"
-    >
-      <component :is="stepComponent" @next="onStepChange" />
-    </BaseWizard>
-  </div>
-</template>
-
-<script>
-import { ref } from 'vue'
-import Step0SetLanguage from './Step0SetLanguage.vue'
-import Step1RequirementsCheck from './Step1RequirementsCheck.vue'
-import Step2PermissionCheck from './Step2PermissionCheck.vue'
-import Step3DatabaseConfig from './Step3DatabaseConfig.vue'
-import Step4VerifyDomain from './Step4VerifyDomain.vue'
-import Step5EmailConfig from './Step5EmailConfig.vue'
-import Step6AccountSettings from './Step6AccountSettings.vue'
-import Step7CompanyInfo from './Step7CompanyInfo.vue'
-import Step8CompanyPreferences from './Step8CompanyPreferences.vue'
-import { useInstallationStore } from '@/scripts/admin/stores/installation'
-import { useRouter } from 'vue-router'
-
-
-export default {
-  components: {
-    step_0: Step0SetLanguage,
-    step_1: Step1RequirementsCheck,
-    step_2: Step2PermissionCheck,
-    step_3: Step3DatabaseConfig,
-    step_4: Step4VerifyDomain,
-    step_5: Step5EmailConfig,
-    step_6: Step6AccountSettings,
-    step_7: Step7CompanyInfo,
-    step_8: Step8CompanyPreferences,
-  },
-
-  setup() {
-    let stepComponent = ref('step_0')
-    let currentStepNumber = ref(0)
-
-    const router = useRouter()
-    const installationStore = useInstallationStore()
-    const { global } = window.i18n
-
-    checkCurrentProgress()
-
-    async function checkCurrentProgress() {
-      let res = await installationStore.fetchInstallationStep()
-
-      if (res.data.profile_complete === 'COMPLETED') {
-        router.push('/admin/dashboard')
-        return
-      }
-
-      if(typeof res.data.profile_language === 'string') {
-        // Use dynamic language loading instead of direct assignment
-        await window.loadLanguage(res.data.profile_language)
-      }
-
-      let dbstep = parseInt(res.data.profile_complete)
-
-      if (dbstep) {
-        currentStepNumber.value = dbstep + 1
-        stepComponent.value = `step_${dbstep + 1}`
-      }
-    }
-
-    async function saveStepProgress(data) {
-      let status = {
-        profile_complete: data,
-      }
-
-      try {
-        await installationStore.addInstallationStep(status)
-        return true
-      } catch (e) {
-        if (e?.response?.data?.message === 'The MAC is invalid.') {
-          window.location.reload()
-        }
-        return false
-      }
-    }
-
-    async function onStepChange(data) {
-      if (data) {
-        let res = await saveStepProgress(data)
-        if (!res) return false
-      }
-
-      currentStepNumber.value++
-
-      if (currentStepNumber.value <= 9) {
-        stepComponent.value = 'step_' + currentStepNumber.value
-      }
-    }
-
-    function onNavClick(e) {}
-
-    function getTickImage() {
-      const imgUrl = new URL('$images/logo.png', import.meta.url)
-      return imgUrl
-    }
-
-    return {
-      stepComponent,
-      currentStepNumber,
-      onStepChange,
-      saveStepProgress,
-      onNavClick,
-      getTickImage
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/Step0SetLanguage.vue b/resources/scripts/admin/views/installation/Step0SetLanguage.vue
deleted file mode 100644
index 2810ef79..00000000
--- a/resources/scripts/admin/views/installation/Step0SetLanguage.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <BaseWizardStep
-    :title="$t('wizard.install_language.title')"
-    :description="$t('wizard.install_language.description')"
-  >
-    <div class="w-full">
-      <div class="mb-6">
-        <BaseInputGroup
-          :label="$t('wizard.language')"
-          :content-loading="isFetchingInitialData"
-          required
-        >
-          <BaseMultiselect
-            v-model="currentLanguage"
-            :content-loading="isFetchingInitialData"
-            :options="languages"
-            label="name"
-            value-prop="code"
-            :placeholder="$t('settings.preferences.select_language')"
-            class="w-full"
-            track-by="name"
-            :searchable="true"
-            @change="changeLanguage"
-          />
-        </BaseInputGroup>
-      </div>
-
-      <BaseButton
-        v-show="!isFetchingInitialData"
-        :loading="isChangingLanguage"
-        :disabled="isChangingLanguage"
-        @click="next"
-      >
-        {{ $t('wizard.continue') }}
-        <template #left="slotProps">
-          <BaseIcon name="ArrowRightIcon" :class="slotProps.class" />
-        </template>
-      </BaseButton>
-
-    </div>
-  </BaseWizardStep>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { useInstallationStore } from '@/scripts/admin/stores/installation.js'
-
-const emit = defineEmits(['next'])
-
-let isFetchingInitialData = ref(false)
-let isSaving = ref(false)
-let isChangingLanguage = ref(false)
-let languages = ref([])
-let currentLanguage = 'en'
-
-const installationStore = useInstallationStore()
-
-onMounted(() => {
-  getLanguages()
-})
-
-async function getLanguages() {
-  isFetchingInitialData.value = true
-
-  const res = await installationStore.fetchInstallationLanguages()
-
-  languages.value = res.data.languages
-
-  isFetchingInitialData.value = false
-}
-
-
-function next() {
-  isSaving.value = true
-  emit('next')
-  isSaving.value = false
-}
-
-async function changeLanguage(event) {
-  if (!event) return
-
-  isChangingLanguage.value = true
-
-  try {
-    // Dynamically load the selected language
-    await window.loadLanguage(event)
-    currentLanguage.value = event
-  } catch (error) {
-    console.error('Failed to change language:', error)
-  } finally {
-    isChangingLanguage.value = false
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue b/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
deleted file mode 100644
index 11c489d5..00000000
--- a/resources/scripts/admin/views/installation/Step1RequirementsCheck.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-  <BaseWizardStep
-    :title="$t('wizard.req.system_req')"
-    :description="$t('wizard.req.system_req_desc')"
-  >
-    <div class="w-full">
-      <div class="mb-6">
-        <div
-          v-if="phpSupportInfo"
-          class="grid grid-flow-row grid-cols-3 p-3 border border-line-default  lg:gap-24 sm:gap-4"
-        >
-          <div class="col-span-2 text-sm">
-            {{
-              $t('wizard.req.php_req_version', {
-                version: phpSupportInfo.minimum,
-              })
-            }}
-          </div>
-          <div class="text-right">
-            {{ phpSupportInfo.current }}
-            <span
-              v-if="phpSupportInfo.supported"
-              class="inline-block w-4 h-4 ml-3 mr-2 bg-green-500 rounded-full"
-            />
-            <span
-              v-else
-              class="inline-block w-4 h-4 ml-3 mr-2 bg-red-500 rounded-full"
-            />
-          </div>
-        </div>
-        <div v-if="requirements">
-          <div
-            v-for="(requirement, index) in requirements"
-            :key="index"
-            class="grid grid-flow-row grid-cols-3 p-3 border border-line-default  lg:gap-24 sm:gap-4"
-          >
-            <div class="col-span-2 text-sm">
-              {{ index }}
-            </div>
-            <div class="text-right">
-              <span
-                v-if="requirement"
-                class="inline-block w-4 h-4 ml-3 mr-2 bg-green-500 rounded-full"
-              />
-              <span
-                v-else
-                class="inline-block w-4 h-4 ml-3 mr-2 bg-red-500 rounded-full"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <BaseButton v-if="hasNext" @click="next">
-        {{ $t('wizard.continue') }}
-        <template #left="slotProps">
-          <BaseIcon name="ArrowRightIcon" :class="slotProps.class" />
-        </template>
-      </BaseButton>
-
-      <BaseButton
-        v-if="!requirements"
-        :loading="isSaving"
-        :disabled="isSaving"
-        @click="getRequirements"
-      >
-        {{ $t('wizard.req.check_req') }}
-      </BaseButton>
-    </div>
-  </BaseWizardStep>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useInstallationStore } from '@/scripts/admin/stores/installation.js'
-
-const emit = defineEmits(['next'])
-
-const requirements = ref('')
-const phpSupportInfo = ref('')
-const isSaving = ref(false)
-const isShow = ref(true)
-
-const installationStore = useInstallationStore()
-
-onMounted(async () => {
-  getRequirements()
-})
-
-const hasNext = computed(() => {
-  if (requirements.value) {
-    let isRequired = true
-    for (const key in requirements.value) {
-      if (!requirements.value[key]) {
-        isRequired = false
-      }
-      return requirements.value && phpSupportInfo.value.supported && isRequired
-    }
-  }
-  return false
-})
-
-async function getRequirements() {
-  isSaving.value = true
-  const response = await installationStore.fetchInstallationRequirements()
-
-  if (response.data) {
-    requirements.value = response?.data?.requirements?.requirements?.php
-    phpSupportInfo.value = response?.data?.phpSupportInfo
-  }
-}
-
-function next() {
-  isSaving.value = true
-  emit('next')
-  isSaving.value = false
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/Step2PermissionCheck.vue b/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
deleted file mode 100644
index 3cb9deb3..00000000
--- a/resources/scripts/admin/views/installation/Step2PermissionCheck.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <BaseWizardStep
-    :title="$t('wizard.permissions.permissions')"
-    :description="$t('wizard.permissions.permission_desc')"
-  >
-    <!-- Content Placeholders -->
-    <BaseContentPlaceholders v-if="isFetchingInitialData">
-      <div
-        v-for="(permission, index) in 3"
-        :key="index"
-        class="
-          grid grid-flow-row grid-cols-3
-          lg:gap-24
-          sm:gap-4
-          border border-line-default
-        "
-      >
-        <BaseContentPlaceholdersText :lines="1" class="col-span-4 p-3" />
-      </div>
-      <BaseContentPlaceholdersBox
-        :rounded="true"
-        class="mt-10"
-        style="width: 96px; height: 42px"
-      />
-    </BaseContentPlaceholders>
-    <!-- End of Content Placeholder -->
-
-    <div v-else class="relative">
-      <div
-        v-for="(permission, index) in permissions"
-        :key="index"
-        class="border border-line-default"
-      >
-        <div class="grid grid-flow-row grid-cols-3 lg:gap-24 sm:gap-4">
-          <div class="col-span-2 p-3">
-            {{ permission.folder }}
-          </div>
-          <div class="p-3 text-right">
-            <span
-              v-if="permission.isSet"
-              class="inline-block w-4 h-4 ml-3 mr-2 rounded-full bg-green-500"
-            />
-            <span
-              v-else
-              class="inline-block w-4 h-4 ml-3 mr-2 rounded-full bg-red-500"
-            />
-            <span>{{ permission.permission }}</span>
-          </div>
-        </div>
-      </div>
-
-      <BaseButton
-        v-show="!isFetchingInitialData"
-        class="mt-10"
-        :loading="isSaving"
-        :disabled="isSaving"
-        @click="next"
-      >
-        <template #left="slotProps">
-          <BaseIcon name="ArrowRightIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('wizard.continue') }}
-      </BaseButton>
-    </div>
-  </BaseWizardStep>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { useInstallationStore } from '@/scripts/admin/stores/installation'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useI18n } from 'vue-i18n'
-
-const emit = defineEmits(['next'])
-
-let isFetchingInitialData = ref(false)
-let isSaving = ref(false)
-let permissions = ref([])
-const { tm, t } = useI18n()
-
-const installationStore = useInstallationStore()
-const dialogStore = useDialogStore()
-
-onMounted(() => {
-  getPermissions()
-})
-
-async function getPermissions() {
-  isFetchingInitialData.value = true
-
-  const res = await installationStore.fetchInstallationPermissions()
-
-  permissions.value = res.data.permissions.permissions
-
-  if (res.data && res.data.permissions.errors) {
-    setTimeout(() => {
-      dialogStore
-        .openDialog({
-          title: tm('wizard.permissions.permission_confirm_title'),
-          message: t('wizard.permissions.permission_confirm_desc'),
-          yesLabel: 'OK',
-          noLabel: 'Cancel',
-          variant: 'danger',
-          hideNoButton: false,
-          size: 'lg',
-        })
-        .then((res) => {
-          if (res.data) {
-            isFetchingInitialData.value = false
-          }
-        })
-    }, 500)
-  }
-
-  isFetchingInitialData.value = false
-}
-
-function next() {
-  isSaving.value = true
-  emit('next')
-  isSaving.value = false
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue b/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
deleted file mode 100644
index 8e02e8d3..00000000
--- a/resources/scripts/admin/views/installation/Step3DatabaseConfig.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <BaseWizardStep
-    :title="$t('wizard.database.database')"
-    :description="$t('wizard.database.desc')"
-    step-container="w-full p-8 mb-8 bg-surface border border-line-default border-solid rounded md:w-full"
-  >
-    <component
-      :is="databaseData.database_connection"
-      :config-data="databaseData"
-      :is-saving="isSaving"
-      @on-change-driver="getDatabaseConfig"
-      @submit-data="next"
-    />
-  </BaseWizardStep>
-</template>
-
-<script>
-import { ref, computed, onMounted, watch } from 'vue'
-import Mysql from './database/MysqlDatabase.vue'
-import Pgsql from './database/PgsqlDatabase.vue'
-import Sqlite from './database/SqliteDatabase.vue'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useInstallationStore } from '@/scripts/admin/stores/installation'
-import { useI18n } from 'vue-i18n'
-
-export default {
-  components: {
-    Mysql,
-    Pgsql,
-    Sqlite,
-  },
-
-  emits: ['next'],
-
-  setup(props, { emit }) {
-    const database_connection = ref('mysql')
-    const isSaving = ref(false)
-    const { t } = useI18n()
-    const { global } = window.i18n
-
-    const notificationStore = useNotificationStore()
-    const installationStore = useInstallationStore()
-
-    const databaseData = computed(() => installationStore.currentDataBaseData)
-
-    watch(() => global.locale.value, (newLocale) => {
-      installationStore.currentDataBaseData.app_locale = newLocale
-    }, { immediate: true })
-
-    async function getDatabaseConfig(connection) {
-      let params = {}
-      if (connection) {
-        params.connection = connection
-      }
-
-      const res = await installationStore.fetchInstallationDatabase(params)
-
-      if (res.data.success) {
-        databaseData.value.database_connection =
-          res.data.config.database_connection
-      }
-
-      if (res.data.config.database_connection === 'sqlite') {
-        databaseData.value.database_name = res.data.config.database_name
-      } else {
-        databaseData.value.database_name = null
-        if (res.data.config.database_host) {
-          databaseData.value.database_hostname = res.data.config.database_host
-        }
-        if (res.data.config.database_port) {
-          databaseData.value.database_port = res.data.config.database_port
-        }
-      }
-    }
-
-    async function next(databaseData) {
-      isSaving.value = true
-
-      try {
-        let res = await installationStore.addInstallationDatabase(databaseData)
-        isSaving.value = false
-
-        if (res.data.success) {
-          await installationStore.addInstallationFinish()
-
-          emit('next', 3)
-
-          let language = {
-            profile_language: global.locale.value,
-          }
-          await installationStore.addInstallationLanguage(language)
-
-
-          notificationStore.showNotification({
-            type: 'success',
-            message: t('wizard.success.' + res.data.success),
-          })
-
-          return
-        } else if (res.data.error) {
-          if (res.data.requirement) {
-            notificationStore.showNotification({
-              type: 'error',
-              message: t('wizard.errors.' + res.data.error, {
-                version: res.data.requirement.minimum,
-                name: databaseData.value.database_connection,
-              }),
-            })
-            return
-          }
-
-          notificationStore.showNotification({
-            type: 'error',
-            message: t('wizard.errors.' + res.data.error),
-          })
-        } else if (res.data.errors) {
-          notificationStore.showNotification({
-            type: 'error',
-            message: res.data.errors[0],
-          })
-        } else if (res.data.error_message) {
-          notificationStore.showNotification({
-            type: 'error',
-            message: res.data.error_message,
-          })
-        }
-      } catch (e) {
-        notificationStore.showNotification({
-          type: 'error',
-          message: t('validation.something_went_wrong'),
-        })
-        isSaving.value = false
-      } finally {
-        isSaving.value = false
-      }
-    }
-
-    onMounted(() => {
-      getDatabaseConfig()
-    })
-
-    return {
-      databaseData,
-      database_connection,
-      isSaving,
-      getDatabaseConfig,
-      next,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/Step4VerifyDomain.vue b/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
deleted file mode 100644
index 8785b4e4..00000000
--- a/resources/scripts/admin/views/installation/Step4VerifyDomain.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <BaseWizardStep
-    :title="$t('wizard.verify_domain.title')"
-    :description="$t('wizard.verify_domain.desc')"
-  >
-    <div class="w-full">
-      <BaseInputGroup
-        :label="$t('wizard.verify_domain.app_domain')"
-        :error="v$.app_domain.$error && v$.app_domain.$errors[0].$message"
-        required
-      >
-        <BaseInput
-          v-model="formData.app_domain"
-          :invalid="v$.app_domain.$error"
-          type="text"
-          @input="v$.app_domain.$touch()"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <p class="mt-4 mb-0 text-sm text-body">{{ $t('wizard.verify_domain.notes.notes') }}</p>
-    <ul class="w-full text-body list-disc list-inside">
-      <li class="text-sm leading-8">
-        {{ $t('wizard.verify_domain.notes.not_contain') }}
-        <b class="inline-block px-1 bg-surface-tertiary rounded-xs">https://</b> {{ $t('wizard.verify_domain.notes.or') }}
-        <b class="inline-block px-1 bg-surface-tertiary rounded-xs">http</b> {{ $t('wizard.verify_domain.notes.in_front') }}
-      </li>
-      <li class="text-sm leading-8">
-        {{ $t('wizard.verify_domain.notes.if_you') }}
-        <b class="inline-block px-1 bg-surface-tertiary">localhost:8080</b>
-      </li>
-    </ul>
-
-    <BaseButton
-      :loading="isSaving"
-      :disabled="isSaving"
-      class="mt-8"
-      @click="verifyDomain"
-    >
-      {{ $t('wizard.verify_domain.verify_now') }}
-    </BaseButton>
-  </BaseWizardStep>
-</template>
-
-<script setup>
-import { required, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { ref, inject, computed, reactive } from 'vue'
-import { useInstallationStore } from '@/scripts/admin/stores/installation'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useI18n } from 'vue-i18n'
-
-const emit = defineEmits(['next'])
-
-const formData = reactive({
-  app_domain: window.location.origin.replace(/(^\w+:|^)\/\//, ''),
-})
-const isSaving = ref(false)
-const { t } = useI18n()
-const utils = inject('utils')
-const isUrl = (value) => utils.checkValidDomainUrl(value)
-
-const installationStore = useInstallationStore()
-const notificationStore = useNotificationStore()
-
-const rules = {
-  app_domain: {
-    required: helpers.withMessage(t('validation.required'), required),
-    isUrl: helpers.withMessage(t('validation.invalid_domain_url'), isUrl),
-  },
-}
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => formData)
-)
-
-async function verifyDomain() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-
-  try {
-    await installationStore.setInstallationDomain(formData)
-    await installationStore.installationLogin()
-    let driverRes = await installationStore.checkAuthenticated()
-
-    if (driverRes.data) {
-      emit('next', 4)
-    }
-
-    isSaving.value = false
-  } catch (e) {
-    notificationStore.showNotification({
-      type: 'error',
-      message: t('wizard.verify_domain.failed'),
-    })
-
-    isSaving.value = false
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/Step5EmailConfig.vue b/resources/scripts/admin/views/installation/Step5EmailConfig.vue
deleted file mode 100644
index 65d0361b..00000000
--- a/resources/scripts/admin/views/installation/Step5EmailConfig.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <BaseWizardStep
-    :title="$t('wizard.mail.mail_config')"
-    :description="$t('wizard.mail.mail_config_desc')"
-  >
-    <form action="" @submit.prevent="next">
-      <component
-        :is="mailDriverStore.mail_driver"
-        :config-data="mailDriverStore.mailConfigData"
-        :is-saving="isSaving"
-        :is-fetching-initial-data="isFetchingInitialData"
-        @on-change-driver="(val) => changeDriver(val)"
-        @submit-data="next"
-      />
-    </form>
-  </BaseWizardStep>
-</template>
-
-<script>
-import Smtp from './mail-driver/SmtpMailDriver.vue'
-import Mailgun from './mail-driver/MailgunMailDriver.vue'
-import Ses from './mail-driver/SesMailDriver.vue'
-import Basic from './mail-driver/BasicMailDriver.vue'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-import { ref } from 'vue'
-
-export default {
-  components: {
-    Smtp,
-    Mailgun,
-    Ses,
-    sendmail: Basic,
-    Mail: Basic,
-  },
-
-  emits: ['next'],
-
-  setup(props, { emit }) {
-    const isSaving = ref(false)
-    const isFetchingInitialData = ref(false)
-
-    const mailDriverStore = useMailDriverStore()
-
-    loadData()
-
-    function changeDriver(value) {
-      mailDriverStore.mail_driver = value
-    }
-
-    async function loadData() {
-      isFetchingInitialData.value = true
-      await mailDriverStore.fetchMailDrivers()
-      await mailDriverStore.fetchMailConfig()
-      isFetchingInitialData.value = false
-    }
-
-    async function next(mailConfigData) {
-      isSaving.value = true
-      let res = await mailDriverStore.updateMailConfig(mailConfigData)
-      isSaving.value = false
-
-      if (res.data.success) {
-        await emit('next', 5)
-      }
-    }
-
-    return {
-      mailDriverStore,
-      isSaving,
-      isFetchingInitialData,
-      changeDriver,
-      next,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/Step6AccountSettings.vue b/resources/scripts/admin/views/installation/Step6AccountSettings.vue
deleted file mode 100644
index d8ba86fa..00000000
--- a/resources/scripts/admin/views/installation/Step6AccountSettings.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<template>
-  <BaseWizardStep
-    :title="$t('wizard.account_info')"
-    :description="$t('wizard.account_info_desc')"
-  >
-    <form action="" @submit.prevent="next">
-      <div class="grid grid-cols-1 mb-4 md:grid-cols-2 md:mb-6">
-        <BaseInputGroup
-          :label="$t('settings.account_settings.profile_picture')"
-        >
-          <BaseFileUploader
-            :avatar="true"
-            :preview-image="avatarUrl"
-            @change="onFileInputChange"
-            @remove="onFileInputRemove"
-          />
-        </BaseInputGroup>
-      </div>
-
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
-        <BaseInputGroup
-          :label="$t('wizard.name')"
-          :error="
-            v$.userForm.name.$error && v$.userForm.name.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="userForm.name"
-            :invalid="v$.userForm.name.$error"
-            type="text"
-            name="name"
-            @input="v$.userForm.name.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('wizard.email')"
-          :error="
-            v$.userForm.email.$error && v$.userForm.email.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="userForm.email"
-            :invalid="v$.userForm.email.$error"
-            type="text"
-            name="email"
-            @input="v$.userForm.email.$touch()"
-          />
-        </BaseInputGroup>
-      </div>
-
-      <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
-        <BaseInputGroup
-          :label="$t('wizard.password')"
-          :error="
-            v$.userForm.password.$error &&
-            v$.userForm.password.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="userForm.password"
-            :invalid="v$.userForm.password.$error"
-            :type="isShowPassword ? 'text' : 'password'"
-            name="password"
-            @input="v$.userForm.password.$touch()"
-          >
-            <template #right>
-              <BaseIcon
-                :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                class="mr-1 text-muted cursor-pointer"
-                @click="isShowPassword = !isShowPassword"
-              />
-            </template>
-          </BaseInput>
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('wizard.confirm_password')"
-          :error="
-            v$.userForm.confirm_password.$error &&
-            v$.userForm.confirm_password.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="userForm.confirm_password"
-            :invalid="v$.userForm.confirm_password.$error"
-            :type="isShowConfirmPassword ? 'text' : 'password'"
-            name="confirm_password"
-            @input="v$.userForm.confirm_password.$touch()"
-          >
-            <template #right>
-              <BaseIcon
-                :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                class="mr-1 text-muted cursor-pointer"
-                @click="isShowConfirmPassword = !isShowConfirmPassword"
-              />
-            </template>
-          </BaseInput>
-        </BaseInputGroup>
-      </div>
-
-      <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-4">
-        <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('wizard.save_cont') }}
-      </BaseButton>
-    </form>
-  </BaseWizardStep>
-</template>
-
-<script setup>
-import {
-  helpers,
-  required,
-  requiredIf,
-  sameAs,
-  minLength,
-  email,
-} from '@vuelidate/validators'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useVuelidate } from '@vuelidate/core'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const emit = defineEmits(['next'])
-
-let isSaving = ref(false)
-const isShowPassword = ref(false)
-const isShowConfirmPassword = ref(false)
-let avatarUrl = ref('')
-let avatarFileBlob = ref(null)
-
-const userStore = useUserStore()
-const companyStore = useCompanyStore()
-
-const { t } = useI18n()
-
-const userForm = computed(() => {
-  return userStore.userForm
-})
-
-const rules = computed(() => {
-  return {
-    userForm: {
-      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: {
-        required: helpers.withMessage(t('validation.required'), required),
-        minLength: helpers.withMessage(
-          t('validation.password_min_length', { count: 8 }),
-          minLength(8)
-        ),
-      },
-      confirm_password: {
-        required: helpers.withMessage(
-          t('validation.required'),
-          requiredIf(userStore.userForm.password)
-        ),
-        sameAsPassword: helpers.withMessage(
-          t('validation.password_incorrect'),
-          sameAs(userStore.userForm.password)
-        ),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => userStore)
-)
-
-function onFileInputChange(fileName, file) {
-  avatarFileBlob.value = file
-}
-
-function onFileInputRemove() {
-  avatarFileBlob.value = null
-}
-
-async function next() {
-  v$.value.userForm.$touch()
-  if (v$.value.userForm.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-  let res = await userStore.updateCurrentUser(userForm.value)
-  isSaving.value = false
-
-  if (res.data.data) {
-    if (avatarFileBlob.value) {
-      let avatarData = new FormData()
-
-      avatarData.append('admin_avatar', avatarFileBlob.value)
-
-      await userStore.uploadAvatar(avatarData)
-    }
-
-    const company = res.data.data.companies[0]
-
-    await companyStore.setSelectedCompany(company)
-    emit('next', 6)
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/Step7CompanyInfo.vue b/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
deleted file mode 100644
index 57f207d7..00000000
--- a/resources/scripts/admin/views/installation/Step7CompanyInfo.vue
+++ /dev/null
@@ -1,272 +0,0 @@
-<template>
-  <BaseWizardStep
-    :title="$t('wizard.company_info')"
-    :description="$t('wizard.company_info_desc')"
-    step-container="bg-surface border border-line-default border-solid mb-8 md:w-full p-8 rounded w-full"
-  >
-    <form action="" @submit.prevent="next">
-      <div class="grid grid-cols-1 mb-4 md:grid-cols-2 md:mb-6">
-        <BaseInputGroup :label="$t('settings.company_info.company_logo')">
-          <BaseFileUploader
-            base64
-            :preview-image="previewLogo"
-            @change="onFileInputChange"
-            @remove="onFileInputRemove"
-          />
-        </BaseInputGroup>
-      </div>
-
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
-        <BaseInputGroup
-          :label="$t('wizard.company_name')"
-          :error="
-            v$.companyForm.name.$error &&
-            v$.companyForm.name.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model.trim="companyForm.name"
-            :invalid="v$.companyForm.name.$error"
-            type="text"
-            name="name"
-            @input="v$.companyForm.name.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('wizard.country')"
-          :error="
-            v$.companyForm.address.country_id.$error &&
-            v$.companyForm.address.country_id.$errors[0].$message
-          "
-          :content-loading="isFetchingInitialData"
-          required
-        >
-          <BaseMultiselect
-            v-model="companyForm.address.country_id"
-            label="name"
-            :invalid="v$.companyForm.address.country_id.$error"
-            :options="globalStore.countries"
-            value-prop="id"
-            :can-deselect="false"
-            :can-clear="false"
-            :content-loading="isFetchingInitialData"
-            :placeholder="$t('general.select_country')"
-            searchable
-            track-by="name"
-          />
-        </BaseInputGroup>
-      </div>
-
-      <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
-        <BaseInputGroup :label="$t('wizard.state')">
-          <BaseInput
-            v-model="companyForm.address.state"
-            name="state"
-            type="text"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup :label="$t('wizard.city')">
-          <BaseInput
-            v-model="companyForm.address.city"
-            name="city"
-            type="text"
-          />
-        </BaseInputGroup>
-      </div>
-
-      <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
-        <div>
-          <BaseInputGroup
-            :label="$t('wizard.address')"
-            :error="
-              v$.companyForm.address.address_street_1.$error &&
-              v$.companyForm.address.address_street_1.$errors[0].$message
-            "
-          >
-            <BaseTextarea
-              v-model.trim="companyForm.address.address_street_1"
-              :invalid="v$.companyForm.address.address_street_1.$error"
-              :placeholder="$t('general.street_1')"
-              name="billing_street1"
-              rows="2"
-              @input="v$.companyForm.address.address_street_1.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :error="
-              v$.companyForm.address.address_street_2.$error &&
-              v$.companyForm.address.address_street_2.$errors[0].$message
-            "
-            class="mt-1 lg:mt-2 md:mt-2"
-          >
-            <BaseTextarea
-              v-model="companyForm.address.address_street_2"
-              :invalid="v$.companyForm.address.address_street_2.$error"
-              :placeholder="$t('general.street_2')"
-              name="billing_street2"
-              rows="2"
-              @input="v$.companyForm.address.address_street_2.$touch()"
-            />
-          </BaseInputGroup>
-        </div>
-
-        <div>
-          <BaseInputGroup :label="$t('wizard.zip_code')">
-            <BaseInput
-              v-model.trim="companyForm.address.zip"
-              type="text"
-              name="zip"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('wizard.phone')" class="mt-4">
-            <BaseInput
-              v-model.trim="companyForm.address.phone"
-              type="text"
-              name="phone"
-            />
-          </BaseInputGroup>
-        </div>
-
-        <BaseInputGroup :label="$t('settings.company_info.tax_id')">
-          <BaseInput
-            v-model.trim="companyForm.tax_id"
-            type="text"
-            name="tax_id"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.company_info.vat_id')"
-        >
-          <BaseInput
-            v-model.trim="companyForm.vat_id"
-            type="text"
-            name="vat_id"
-          />
-        </BaseInputGroup>
-      </div>
-
-      <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-4">
-        <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('wizard.save_cont') }}
-      </BaseButton>
-    </form>
-  </BaseWizardStep>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, reactive } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { required, maxLength, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const emit = defineEmits(['next'])
-
-let isFetchingInitialData = ref(false)
-let isSaving = ref(false)
-const { t } = useI18n()
-let previewLogo = ref(null)
-let logoFileBlob = ref(null)
-let logoFileName = ref(null)
-
-const companyForm = reactive({
-  name: null,
-  tax_id: null,
-  vat_id: null,
-  address: {
-    address_street_1: '',
-    address_street_2: '',
-    website: '',
-    country_id: null,
-    state: '',
-    city: '',
-    phone: '',
-    zip: '',
-  },
-})
-
-const companyStore = useCompanyStore()
-const globalStore = useGlobalStore()
-
-onMounted(async () => {
-  isFetchingInitialData.value = true
-  await globalStore.fetchCountries()
-  isFetchingInitialData.value = false
-
-  // set default country
-  companyForm.address.country_id = globalStore.countries.find((country) => {
-    return country.code == 'US'
-  })?.id
-})
-
-const rules = {
-  companyForm: {
-    name: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    address: {
-      country_id: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      address_street_1: {
-        maxLength: helpers.withMessage(
-          t('validation.address_maxlength', { count: 255 }),
-          maxLength(255),
-        ),
-      },
-      address_street_2: {
-        maxLength: helpers.withMessage(
-          t('validation.address_maxlength', { count: 255 }),
-          maxLength(255),
-        ),
-      },
-    },
-  },
-}
-
-const v$ = useVuelidate(rules, { companyForm })
-
-function onFileInputChange(fileName, file, fileCount, fileList) {
-  logoFileName.value = fileList.name
-  logoFileBlob.value = file
-}
-
-function onFileInputRemove() {
-  logoFileBlob.value = null
-}
-
-async function next() {
-  v$.value.companyForm.$touch()
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-  let res = companyStore.updateCompany(companyForm)
-  if (res) {
-    if (logoFileBlob.value) {
-      let logoData = new FormData()
-
-      logoData.append(
-        'company_logo',
-        JSON.stringify({
-          name: logoFileName.value,
-          data: logoFileBlob.value,
-        }),
-      )
-      await companyStore.updateCompanyLogo(logoData)
-    }
-    isSaving.value = false
-    emit('next', 7)
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue b/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
deleted file mode 100644
index 73334a54..00000000
--- a/resources/scripts/admin/views/installation/Step8CompanyPreferences.vue
+++ /dev/null
@@ -1,317 +0,0 @@
-<template>
-  <BaseWizardStep
-    :title="$t('wizard.preferences')"
-    :description="$t('wizard.preferences_desc')"
-    step-container="bg-surface border border-line-default border-solid mb-8 md:w-full p-8 rounded w-full"
-  >
-    <form action="" @submit.prevent="next">
-      <div>
-        <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
-          <BaseInputGroup
-            :label="$t('wizard.currency')"
-            :error="
-              v$.currentPreferences.currency.$error &&
-              v$.currentPreferences.currency.$errors[0].$message
-            "
-            :content-loading="isFetchingInitialData"
-            required
-          >
-            <BaseMultiselect
-              v-model="currentPreferences.currency"
-              :content-loading="isFetchingInitialData"
-              :options="globalStore.currencies"
-              label="name"
-              value-prop="id"
-              :searchable="true"
-              track-by="name"
-              :placeholder="$t('settings.currencies.select_currency')"
-              :invalid="v$.currentPreferences.currency.$error"
-              class="w-full"
-            >
-            </BaseMultiselect>
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('settings.preferences.default_language')"
-            :error="
-              v$.currentPreferences.language.$error &&
-              v$.currentPreferences.language.$errors[0].$message
-            "
-            :content-loading="isFetchingInitialData"
-            required
-          >
-            <BaseMultiselect
-              v-model="currentPreferences.language"
-              :content-loading="isFetchingInitialData"
-              :options="globalStore.languages"
-              label="name"
-              value-prop="code"
-              :placeholder="$t('settings.preferences.select_language')"
-              class="w-full"
-              track-by="name"
-              :searchable="true"
-              :invalid="v$.currentPreferences.language.$error"
-            />
-          </BaseInputGroup>
-        </div>
-
-        <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
-          <BaseInputGroup
-            :label="$t('wizard.date_format')"
-            :error="
-              v$.currentPreferences.carbon_date_format.$error &&
-              v$.currentPreferences.carbon_date_format.$errors[0].$message
-            "
-            :content-loading="isFetchingInitialData"
-            required
-          >
-            <BaseMultiselect
-              v-model="currentPreferences.carbon_date_format"
-              :content-loading="isFetchingInitialData"
-              :options="globalStore.dateFormats"
-              label="display_date"
-              value-prop="carbon_format_value"
-              :placeholder="$t('settings.preferences.select_date_format')"
-              track-by="display_date"
-              searchable
-              :invalid="v$.currentPreferences.carbon_date_format.$error"
-              class="w-full"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('wizard.time_zone')"
-            :error="
-              v$.currentPreferences.time_zone.$error &&
-              v$.currentPreferences.time_zone.$errors[0].$message
-            "
-            :content-loading="isFetchingInitialData"
-            required
-          >
-            <BaseMultiselect
-              v-model="currentPreferences.time_zone"
-              :content-loading="isFetchingInitialData"
-              :options="globalStore.timeZones"
-              label="key"
-              value-prop="value"
-              :placeholder="$t('settings.preferences.select_time_zone')"
-              track-by="key"
-              :searchable="true"
-              :invalid="v$.currentPreferences.time_zone.$error"
-            />
-          </BaseInputGroup>
-        </div>
-
-        <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
-          <BaseInputGroup
-            :label="$t('wizard.fiscal_year')"
-            :error="
-              v$.currentPreferences.fiscal_year.$error &&
-              v$.currentPreferences.fiscal_year.$errors[0].$message
-            "
-            :content-loading="isFetchingInitialData"
-            required
-          >
-            <BaseMultiselect
-              v-model="currentPreferences.fiscal_year"
-              :content-loading="isFetchingInitialData"
-              :options="fiscalYearsList"
-              label="key"
-              value-prop="value"
-              :placeholder="$t('settings.preferences.select_financial_year')"
-              :invalid="v$.currentPreferences.fiscal_year.$error"
-              track-by="key"
-              :searchable="true"
-              class="w-full"
-            />
-          </BaseInputGroup>
-        </div>
-
-        <BaseButton
-          :loading="isSaving"
-          :disabled="isSaving"
-          :content-loading="isFetchingInitialData"
-          class="mt-4"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-          </template>
-          {{ $t('wizard.save_cont') }}
-        </BaseButton>
-      </div>
-    </form>
-  </BaseWizardStep>
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-import { ref, computed, onMounted, reactive } from 'vue'
-import { required, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import Ls from '@/scripts/services/ls.js'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useRouter } from 'vue-router'
-
-const emit = defineEmits(['next'])
-
-const isSaving = ref(false)
-let isFetchingInitialData = ref(false)
-
-let currentPreferences = reactive({
-  currency: 3,
-  language: 'en',
-  carbon_date_format: 'd M Y',
-  time_zone: 'UTC',
-  fiscal_year: '1-12',
-})
-
-const { tm, t } = useI18n()
-const router = useRouter()
-
-isFetchingInitialData.value = true
-
-const fiscalYearsList = computed(() => {
-  return globalStore.fiscalYears.map((item) => {
-    return Object.assign({}, item, {
-      key: t(item.key),
-    })
-  })
-})
-
-const options = reactive([
-  {
-    title: tm('settings.customization.invoices.allow'),
-    value: 'allow',
-  },
-  {
-    title: tm(
-      'settings.customization.invoices.disable_on_invoice_partial_paid'
-    ),
-    value: 'disable_on_invoice_partial_paid',
-  },
-  {
-    title: tm('settings.customization.invoices.disable_on_invoice_paid'),
-    value: 'disable_on_invoice_paid',
-  },
-  {
-    title: tm('settings.customization.invoices.disable_on_invoice_sent'),
-    value: 'disable_on_invoice_sent',
-  },
-])
-
-const dialogStore = useDialogStore()
-const globalStore = useGlobalStore()
-const companyStore = useCompanyStore()
-const userStore = useUserStore()
-const notificationStore = useNotificationStore()
-
-let fiscalYears = {
-  key: 'fiscal_years',
-}
-let data = {
-  key: 'languages',
-}
-
-isFetchingInitialData.value = true
-Promise.all([
-  globalStore.fetchCurrencies(),
-  globalStore.fetchDateFormats(),
-  globalStore.fetchTimeZones(),
-  globalStore.fetchCountries(),
-  globalStore.fetchConfig(fiscalYears),
-  globalStore.fetchConfig(data),
-]).then(([res1]) => {
-  isFetchingInitialData.value = false
-})
-
-const rules = computed(() => {
-  return {
-    currentPreferences: {
-      currency: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      language: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      carbon_date_format: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      time_zone: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      fiscal_year: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(rules, { currentPreferences })
-
-async function next() {
-  v$.value.currentPreferences.$touch()
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  dialogStore
-    .openDialog({
-      title: t('general.do_you_wish_to_continue'),
-      message: t('wizard.currency_set_alert'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      size: 'lg',
-      hideNoButton: false,
-    })
-    .then(async (res) => {
-      if (res) {
-        let data = {
-          settings: {
-            ...currentPreferences,
-          },
-        }
-
-        isSaving.value = true
-
-        delete data.settings.discount_per_item
-
-        let res = await companyStore.updateCompanySettings({
-          data,
-        })
-
-        if (res.data) {
-          isSaving.value = false
-
-          let data = {
-            settings: {
-              language: currentPreferences.language,
-            },
-          }
-
-          let res1 = await userStore.updateUserSettings(data)
-
-          if (res1.data) {
-            emit('next', 'COMPLETED')
-            notificationStore.showNotification({
-              type: 'success',
-              message: 'Login Successful',
-            })
-            router.push('/admin/dashboard')
-          }
-
-          Ls.set('auth.token', res.data.token)
-        }
-
-        return true
-      }
-
-      isSaving.value = false
-      return true
-    })
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/database/MysqlDatabase.vue b/resources/scripts/admin/views/installation/database/MysqlDatabase.vue
deleted file mode 100644
index a0b422f8..00000000
--- a/resources/scripts/admin/views/installation/database/MysqlDatabase.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-  <form action="" @submit.prevent="next">
-    <div class="grid grid-cols-1 gap-5 md:grid-cols-2 mb-6">
-      <BaseInputGroup
-        :label="$t('wizard.database.app_url')"
-        :error="v$.app_url.$error && v$.app_url.$errors[0].$message"
-        required
-      >
-        <BaseInput
-          v-model="databaseData.app_url"
-          :invalid="v$.app_url.$error"
-          type="text"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.database.connection')"
-        :error="
-          v$.database_connection.$error &&
-          v$.database_connection.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model="databaseData.database_connection"
-          :invalid="v$.database_connection.$error"
-          :options="connections"
-          :can-deselect="false"
-          :can-clear="false"
-          @update:modelValue="onChangeConnection"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.database.port')"
-        :error="v$.database_port.$error && v$.database_port.$errors[0].$message"
-        required
-      >
-        <BaseInput
-          v-model="databaseData.database_port"
-          :invalid="v$.database_port.$error"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.database.db_name')"
-        :error="v$.database_name.$error && v$.database_name.$errors[0].$message"
-        required
-      >
-        <BaseInput
-          v-model="databaseData.database_name"
-          :invalid="v$.database_name.$error"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.database.username')"
-        :error="
-          v$.database_username.$error &&
-          v$.database_username.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model="databaseData.database_username"
-          :invalid="v$.database_username.$error"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('wizard.database.password')">
-        <BaseInput v-model="databaseData.database_password" type="password" />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.database.host')"
-        :error="
-          v$.database_hostname.$error &&
-          v$.database_hostname.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model="databaseData.database_hostname"
-          :invalid="v$.database_hostname.$error"
-        />
-      </BaseInputGroup>
-
-    </div>
-
-    <div class="w-full">
-      <BaseCheckbox v-model="databaseData.database_overwrite" :label="$t('wizard.database.overwrite')"/>
-    </div>
-
-    <BaseButton
-      type="submit"
-      class="mt-4"
-      :loading="isSaving"
-      :disabled="isSaving"
-    >
-      <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-      </template>
-      {{ $t('wizard.save_cont') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { computed, onMounted, reactive, inject } from 'vue'
-import { useInstallationStore } from '@/scripts/admin/stores/installation'
-import { helpers, required, numeric } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-import BaseInputGroup from '@/scripts/components/base/BaseInputGroup.vue'
-import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
-
-const props = defineProps({
-  configData: {
-    type: Object,
-    require: true,
-    default: Object,
-  },
-  isSaving: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  isFetchingInitialData: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-const connections = reactive(['sqlite', 'mysql', 'pgsql'])
-const { t } = useI18n()
-const utils = inject('utils')
-
-const installationStore = useInstallationStore()
-
-onMounted(() => {
-  for (const key in databaseData.value) {
-    if (props.configData.hasOwnProperty(key)) {
-      databaseData.value[key] = props.configData[key]
-    }
-  }
-})
-
-const databaseData = computed(() => {
-  return installationStore.currentDataBaseData
-})
-
-const isUrl = (value) => utils.checkValidUrl(value)
-
-const rules = {
-  database_connection: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  database_hostname: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  database_port: {
-    required: helpers.withMessage(t('validation.required'), required),
-    numeric: numeric,
-  },
-  database_name: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  database_username: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  app_url: {
-    required: helpers.withMessage(t('validation.required'), required),
-    isUrl: helpers.withMessage(t('validation.invalid_url'), isUrl),
-  },
-}
-
-const v$ = useVuelidate(rules, databaseData.value)
-
-function next() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-  emit('submit-data', databaseData.value)
-}
-
-function onChangeConnection() {
-  v$.value.database_connection.$touch()
-
-  emit('on-change-driver', databaseData.value.database_connection)
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/database/PgsqlDatabase.vue b/resources/scripts/admin/views/installation/database/PgsqlDatabase.vue
deleted file mode 100644
index 2c0667a5..00000000
--- a/resources/scripts/admin/views/installation/database/PgsqlDatabase.vue
+++ /dev/null
@@ -1,215 +0,0 @@
-<template>
-  <form action="" @submit.prevent="next">
-    <div class="grid grid-cols-1 gap-5 md:grid-cols-2 mb-6">
-      <BaseInputGroup
-        :label="$t('wizard.database.app_url')"
-        :content-loading="isFetchingInitialData"
-        :error="v$.app_url.$error && v$.app_url.$errors[0].$message"
-        required
-      >
-        <BaseInput
-          v-model="databaseData.app_url"
-          :content-loading="isFetchingInitialData"
-          :invalid="v$.app_url.$error"
-          type="text"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.database.connection')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.database_connection.$error &&
-          v$.database_connection.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model="databaseData.database_connection"
-          :content-loading="isFetchingInitialData"
-          :invalid="v$.database_connection.$error"
-          :options="connections"
-          :can-deselect="false"
-          :can-clear="false"
-          @update:modelValue="onChangeConnection"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.database.port')"
-        :content-loading="isFetchingInitialData"
-        :error="v$.database_port.$error && v$.database_port.$errors[0].$message"
-        required
-      >
-        <BaseInput
-          v-model="databaseData.database_port"
-          :content-loading="isFetchingInitialData"
-          :invalid="v$.database_port.$error"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.database.db_name')"
-        :content-loading="isFetchingInitialData"
-        :error="v$.database_name.$error && v$.database_name.$errors[0].$message"
-        required
-      >
-        <BaseInput
-          v-model="databaseData.database_name"
-          :content-loading="isFetchingInitialData"
-          :invalid="v$.database_name.$error"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.database.username')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.database_username.$error &&
-          v$.database_username.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model="databaseData.database_username"
-          :content-loading="isFetchingInitialData"
-          :invalid="v$.database_username.$error"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :content-loading="isFetchingInitialData"
-        :label="$t('wizard.database.password')"
-      >
-        <BaseInput
-          v-model="databaseData.database_password"
-          :content-loading="isFetchingInitialData"
-          type="password"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.database.host')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.database_hostname.$error &&
-          v$.database_hostname.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model="databaseData.database_hostname"
-          :content-loading="isFetchingInitialData"
-          :invalid="v$.database_hostname.$error"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <div class="w-full">
-      <BaseCheckbox v-model="databaseData.database_overwrite" :label="$t('wizard.database.overwrite')"/>
-    </div>
-
-    <BaseButton
-      v-show="!isFetchingInitialData"
-      :content-loading="isFetchingInitialData"
-      type="submit"
-      class="mt-4"
-      :loading="isSaving"
-      :disabled="isSaving"
-    >
-      <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-      </template>
-      {{ $t('wizard.save_cont') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { computed, onMounted, reactive, inject } from 'vue'
-import { useInstallationStore } from '@/scripts/admin/stores/installation'
-import { helpers, required, numeric } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
-
-const props = defineProps({
-  configData: {
-    type: Object,
-    require: true,
-    default: Object,
-  },
-  isSaving: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  isFetchingInitialData: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-const connections = reactive(['sqlite', 'mysql', 'pgsql'])
-const { t } = useI18n()
-const utils = inject('utils')
-
-const installationStore = useInstallationStore()
-
-const databaseData = computed(() => {
-  return installationStore.currentDataBaseData
-})
-
-onMounted(() => {
-  for (const key in databaseData.value) {
-    if (props.configData.hasOwnProperty(key)) {
-      databaseData.value[key] = props.configData[key]
-    }
-  }
-})
-
-const isUrl = (value) => utils.checkValidUrl(value)
-
-const rules = {
-  database_connection: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  database_hostname: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  database_port: {
-    required: helpers.withMessage(t('validation.required'), required),
-    numeric: numeric,
-  },
-  database_name: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  database_username: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  app_url: {
-    required: helpers.withMessage(t('validation.required'), required),
-    isUrl: helpers.withMessage(t('validation.invalid_url'), isUrl),
-  },
-}
-
-const v$ = useVuelidate(rules, databaseData.value)
-
-function next() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  emit('submit-data', databaseData.value)
-}
-
-function onChangeConnection() {
-  v$.value.database_connection.$touch()
-  emit('on-change-driver', databaseData.value.database_connection)
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/database/SqliteDatabase.vue b/resources/scripts/admin/views/installation/database/SqliteDatabase.vue
deleted file mode 100644
index c4b2e3f0..00000000
--- a/resources/scripts/admin/views/installation/database/SqliteDatabase.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <form action="" @submit.prevent="next">
-    <div class="grid grid-cols-1 gap-5 md:grid-cols-2 mb-6">
-      <BaseInputGroup
-        :label="$t('wizard.database.app_url')"
-        :content-loading="isFetchingInitialData"
-        :error="v$.app_url.$error && v$.app_url.$errors[0].$message"
-        required
-      >
-        <BaseInput
-          v-model="databaseData.app_url"
-          :content-loading="isFetchingInitialData"
-          :invalid="v$.app_url.$error"
-          type="text"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.database.connection')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.database_connection.$error &&
-          v$.database_connection.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model="databaseData.database_connection"
-          :content-loading="isFetchingInitialData"
-          :invalid="v$.database_connection.$error"
-          :options="connections"
-          :can-deselect="false"
-          :can-clear="false"
-          @update:modelValue="onChangeConnection"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.database.db_path')"
-        :error="v$.database_name.$error && v$.database_name.$errors[0].$message"
-        :content-loading="isFetchingInitialData"
-        required
-      >
-        <BaseInput
-          v-model="databaseData.database_name"
-          :content-loading="isFetchingInitialData"
-          :invalid="v$.database_name.$error"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <div class="w-full">
-      <BaseCheckbox v-model="databaseData.database_overwrite" :label="$t('wizard.database.overwrite')"/>
-    </div>
-
-    <BaseButton
-      v-show="!isFetchingInitialData"
-      :content-loading="isFetchingInitialData"
-      type="submit"
-      class="mt-4"
-      :loading="isSaving"
-      :disabled="isSaving"
-    >
-      <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-      </template>
-      {{ $t('wizard.save_cont') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { computed, onMounted, reactive, inject } from 'vue'
-import { useInstallationStore } from '@/scripts/admin/stores/installation'
-import { helpers, required } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-import BaseCheckbox from '@/scripts/components/base/BaseCheckbox.vue'
-
-const props = defineProps({
-  configData: {
-    type: Object,
-    require: true,
-    default: Object,
-  },
-  isSaving: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  isFetchingInitialData: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-const connections = reactive(['sqlite', 'mysql', 'pgsql'])
-const { t } = useI18n()
-const utils = inject('utils')
-
-const installationStore = useInstallationStore()
-
-const databaseData = computed(() => {
-  return installationStore.currentDataBaseData
-})
-
-onMounted(() => {
-  for (const key in databaseData.value) {
-    if (props.configData.hasOwnProperty(key)) {
-      databaseData.value[key] = props.configData[key]
-    }
-  }
-})
-
-const isUrl = (value) => utils.checkValidUrl(value)
-
-const rules = {
-  database_connection: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-
-  database_name: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-
-  app_url: {
-    required: helpers.withMessage(t('validation.required'), required),
-    isUrl: helpers.withMessage(t('validation.invalid_url'), isUrl),
-  },
-}
-
-const v$ = useVuelidate(rules, databaseData.value)
-
-function next() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  emit('submit-data', databaseData.value)
-}
-
-function onChangeConnection() {
-  v$.value.database_connection.$touch()
-  emit('on-change-driver', databaseData.value.database_connection)
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/mail-driver/BasicMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/BasicMailDriver.vue
deleted file mode 100644
index f7c172f3..00000000
--- a/resources/scripts/admin/views/installation/mail-driver/BasicMailDriver.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-  <form @submit.prevent="saveEmailConfig">
-    <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
-      <BaseInputGroup
-        :label="$t('wizard.mail.driver')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.basicMailConfig.mail_driver.$error &&
-          v$.basicMailConfig.mail_driver.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model="basicMailConfig.mail_driver"
-          :invalid="v$.basicMailConfig.mail_driver.$error"
-          :options="mailDriverStore.mail_drivers"
-          :can-deselect="false"
-          :content-loading="isFetchingInitialData"
-          @update:modelValue="onChangeDriver"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
-      <BaseInputGroup
-        :label="$t('wizard.mail.from_name')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.basicMailConfig.from_name.$error &&
-          v$.basicMailConfig.from_name.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="basicMailConfig.from_name"
-          :invalid="v$.basicMailConfig.from_name.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="name"
-          @input="v$.basicMailConfig.from_name.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.mail.from_mail')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.basicMailConfig.from_mail.$error &&
-          v$.basicMailConfig.from_mail.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="basicMailConfig.from_mail"
-          :invalid="v$.basicMailConfig.from_mail.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          @input="v$.basicMailConfig.from_mail.$touch()"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <BaseButton
-      :loading="isSaving"
-      :disabled="isSaving"
-      :content-loading="isFetchingInitialData"
-      class="mt-4"
-    >
-      <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-      </template>
-      {{ $t('general.save') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { required, email, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-import { computed } from 'vue'
-
-const props = defineProps({
-  isSaving: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  isFetchingInitialData: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-const { t } = useI18n()
-
-const mailDriverStore = useMailDriverStore()
-
-const basicMailConfig = computed(() => {
-  return mailDriverStore.basicMailConfig
-})
-
-const mailDrivers = computed(() => {
-  return mailDriverStore.mail_drivers
-})
-
-basicMailConfig.value.mail_driver = 'mail'
-
-const rules = computed(() => {
-  return {
-    basicMailConfig: {
-      mail_driver: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      from_mail: {
-        required: helpers.withMessage(t('validation.required'), required),
-        email: helpers.withMessage(t('validation.email_incorrect'), email),
-      },
-      from_name: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => mailDriverStore)
-)
-
-function saveEmailConfig() {
-  v$.value.$touch()
-  if (!v$.value.$invalid) {
-    emit('submit-data', mailDriverStore.basicMailConfig)
-  }
-  return false
-}
-
-function onChangeDriver() {
-  v$.value.basicMailConfig.mail_driver.$touch()
-  emit('on-change-driver', mailDriverStore?.basicMailConfig?.mail_driver)
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue
deleted file mode 100644
index 10038124..00000000
--- a/resources/scripts/admin/views/installation/mail-driver/MailgunMailDriver.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<template>
-  <form @submit.prevent="saveEmailConfig">
-    <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
-      <BaseInputGroup
-        :label="$t('wizard.mail.driver')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.mailgunConfig.mail_driver.$error &&
-          v$.mailgunConfig.mail_driver.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model="mailgunConfig.mail_driver"
-          :options="mailDriverStore.mail_drivers"
-          :can-deselect="false"
-          :invalid="v$.mailgunConfig.mail_driver.$error"
-          :content-loading="isFetchingInitialData"
-          @update:modelValue="onChangeDriver"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.mail.mailgun_domain')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.mailgunConfig.mail_mailgun_domain.$error &&
-          v$.mailgunConfig.mail_mailgun_domain.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailgunConfig.mail_mailgun_domain"
-          :invalid="v$.mailgunConfig.mail_mailgun_domain.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mailgun_domain"
-          @input="v$.mailgunConfig.mail_mailgun_domain.$touch()"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:mb-6 md:mb-6">
-      <BaseInputGroup
-        :label="$t('wizard.mail.mailgun_secret')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.mailgunConfig.mail_mailgun_secret.$error &&
-          v$.mailgunConfig.mail_mailgun_secret.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailgunConfig.mail_mailgun_secret"
-          :invalid="v$.mailgunConfig.mail_mailgun_secret.$error"
-          :type="getInputType"
-          :content-loading="isFetchingInitialData"
-          name="mailgun_secret"
-          autocomplete="off"
-          data-lpignore="true"
-          @input="v$.mailgunConfig.mail_mailgun_secret.$touch()"
-        >
-          <template #right>
-            <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-muted cursor-pointer"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.mail.mailgun_endpoint')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.mailgunConfig.mail_mailgun_endpoint.$error &&
-          v$.mailgunConfig.mail_mailgun_endpoint.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailgunConfig.mail_mailgun_endpoint"
-          :invalid="v$.mailgunConfig.mail_mailgun_endpoint.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mailgun_endpoint"
-          @input="v$.mailgunConfig.mail_mailgun_endpoint.$touch()"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
-      <BaseInputGroup
-        :label="$t('wizard.mail.from_mail')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.mailgunConfig.from_mail.$error &&
-          v$.mailgunConfig.from_mail.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailgunConfig.from_mail"
-          name="from_mail"
-          type="text"
-          :invalid="v$.mailgunConfig.from_mail.$error"
-          :content-loading="isFetchingInitialData"
-          @input="v$.mailgunConfig.from_mail.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.mail.from_name')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.mailgunConfig.from_name.$error &&
-          v$.mailgunConfig.from_name.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailgunConfig.from_name"
-          :invalid="v$.mailgunConfig.from_name.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="from_name"
-          @input="v$.mailgunConfig.from_name.$touch()"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <BaseButton
-      :loading="loading"
-      :disabled="isSaving"
-      :content-loading="isFetchingInitialData"
-      class="mt-4"
-    >
-      <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-      </template>
-      {{ $t('general.save') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { required, email, helpers } from '@vuelidate/validators'
-import { useI18n } from 'vue-i18n'
-import useVuelidate from '@vuelidate/core'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-import { computed, onMounted, ref } from 'vue'
-
-const props = defineProps({
-  isSaving: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  isFetchingInitialData: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-let isShowPassword = ref(false)
-
-const mailDriverStore = useMailDriverStore()
-const { t } = useI18n()
-
-const mailgunConfig = computed(() => {
-  return mailDriverStore.mailgunConfig
-})
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
-mailgunConfig.value.mail_driver = 'mailgun'
-
-const rules = computed(() => {
-  return {
-    mailgunConfig: {
-      mail_driver: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_mailgun_domain: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_mailgun_endpoint: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_mailgun_secret: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      from_mail: {
-        required: helpers.withMessage(t('validation.required'), required),
-        email,
-      },
-      from_name: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => mailDriverStore)
-)
-
-function saveEmailConfig() {
-  v$.value.$touch()
-  if (!v$.value.$invalid) {
-    emit('submit-data', mailDriverStore.mailgunConfig)
-  }
-  return false
-}
-
-function onChangeDriver() {
-  v$.value.mailgunConfig.mail_driver.$touch()
-  emit('on-change-driver', mailDriverStore.mailgunConfig.mail_driver)
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue
deleted file mode 100644
index c64d7df6..00000000
--- a/resources/scripts/admin/views/installation/mail-driver/SesMailDriver.vue
+++ /dev/null
@@ -1,293 +0,0 @@
-<template>
-  <form @submit.prevent="saveEmailConfig">
-    <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
-      <BaseInputGroup
-        :label="$t('wizard.mail.driver')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_driver.$error &&
-          v$.sesConfig.mail_driver.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model="sesConfig.mail_driver"
-          :options="mailDriverStore.mail_drivers"
-          :can-deselect="false"
-          :content-loading="isFetchingInitialData"
-          :invalid="v$.sesConfig.mail_driver.$error"
-          @update:modelValue="onChangeDriver"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.mail.host')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_host.$error &&
-          v$.sesConfig.mail_host.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="sesConfig.mail_host"
-          :invalid="v$.sesConfig.mail_host.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mail_host"
-          @input="v$.sesConfig.mail_host.$touch()"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
-      <BaseInputGroup
-        :label="$t('wizard.mail.port')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_port.$error &&
-          v$.sesConfig.mail_port.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="sesConfig.mail_port"
-          :invalid="v$.sesConfig.mail_port.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mail_port"
-          @input="v$.sesConfig.mail_port.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.mail.encryption')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_encryption.$error &&
-          v$.sesConfig.mail_encryption.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model.trim="sesConfig.mail_encryption"
-          :invalid="v$.sesConfig.mail_encryption.$error"
-          :options="encryptions"
-          :content-loading="isFetchingInitialData"
-          @input="v$.sesConfig.mail_encryption.$touch()"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
-      <BaseInputGroup
-        :label="$t('wizard.mail.from_mail')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.from_mail.$error &&
-          v$.sesConfig.from_mail.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="sesConfig.from_mail"
-          :invalid="v$.sesConfig.from_mail.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="from_mail"
-          @input="v$.sesConfig.from_mail.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.mail.from_name')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.from_name.$error &&
-          v$.sesConfig.from_name.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="sesConfig.from_name"
-          :invalid="v$.sesConfig.from_name.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="name"
-          @input="v$.sesConfig.from_name.$touch()"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
-      <BaseInputGroup
-        :label="$t('wizard.mail.ses_key')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_ses_key.$error &&
-          v$.sesConfig.mail_ses_key.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="sesConfig.mail_ses_key"
-          :invalid="v$.sesConfig.mail_ses_key.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mail_ses_key"
-          @input="v$.sesConfig.mail_ses_key.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.mail.ses_secret')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_ses_secret.$error &&
-          v$.sesConfig.mail_ses_secret.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="sesConfig.mail_ses_secret"
-          :invalid="v$.sesConfig.mail_ses_secret.$error"
-          :type="getInputType"
-          :content-loading="isFetchingInitialData"
-          name="mail_ses_secret"
-          autocomplete="off"
-          data-lpignore="true"
-          @input="v$.sesConfig.mail_ses_secret.$touch()"
-        >
-          <template #right>
-            <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-muted cursor-pointer"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.ses_region')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_ses_region.$error &&
-          v$.sesConfig.mail_ses_region.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.sesConfig.mail_ses_region"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mail_ses_region"
-          :invalid="v$.sesConfig.mail_ses_region.$error"
-          @input="v$.sesConfig.mail_ses_region.$touch()"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <BaseButton
-      :loading="isSaving"
-      :disabled="isSaving"
-      :content-loading="isFetchingInitialData"
-      class="mt-4"
-    >
-      <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-      </template>
-
-      {{ $t('general.save') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { computed, reactive, ref } from 'vue'
-import { required, email, numeric, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-
-const props = defineProps({
-  isSaving: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  isFetchingInitialData: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-const { t } = useI18n()
-const encryptions = reactive(['tls', 'ssl', 'starttls'])
-let isShowPassword = ref(false)
-
-const mailDriverStore = useMailDriverStore()
-
-const sesConfig = computed(() => {
-  return mailDriverStore.sesConfig
-})
-
-sesConfig.value.mail_driver = 'ses'
-
-const rules = computed(() => {
-  return {
-    sesConfig: {
-      mail_driver: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_host: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_port: {
-        required: helpers.withMessage(t('validation.required'), required),
-        numeric,
-      },
-      mail_ses_key: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_ses_secret: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_ses_region: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_encryption: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      from_mail: {
-        required: helpers.withMessage(t('validation.required'), required),
-        email: helpers.withMessage(t('validation.email_incorrect'), email),
-      },
-      from_name: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => mailDriverStore)
-)
-
-async function saveEmailConfig() {
-  v$.value.$touch()
-  if (!v$.value.$invalid) {
-    emit('submit-data', mailDriverStore.sesConfig)
-  }
-  return false
-}
-
-function onChangeDriver() {
-  v$.value.sesConfig.mail_driver.$touch()
-  emit('on-change-driver', mailDriverStore.sesConfig.mail_driver)
-}
-</script>
diff --git a/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue b/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue
deleted file mode 100644
index fc9c58ac..00000000
--- a/resources/scripts/admin/views/installation/mail-driver/SmtpMailDriver.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<template>
-  <form @submit.prevent="saveEmailConfig">
-    <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
-      <BaseInputGroup
-        :label="$t('wizard.mail.driver')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.smtpConfig.mail_driver.$error &&
-          v$.smtpConfig.mail_driver.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model="smtpConfig.mail_driver"
-          :options="mailDriverStore.mail_drivers"
-          :can-deselect="false"
-          :content-loading="isFetchingInitialData"
-          :invalid="v$.smtpConfig.mail_driver.$error"
-          @update:modelValue="onChangeDriver"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.mail.host')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.smtpConfig.mail_host.$error &&
-          v$.smtpConfig.mail_host.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="smtpConfig.mail_host"
-          :invalid="v$.smtpConfig.mail_host.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mail_host"
-          @input="v$.smtpConfig.mail_host.$touch()"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
-      <BaseInputGroup
-        :label="$t('wizard.mail.username')"
-        :content-loading="isFetchingInitialData"
-      >
-        <BaseInput
-          v-model.trim="smtpConfig.mail_username"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="db_name"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.mail.password')"
-        :content-loading="isFetchingInitialData"
-      >
-        <BaseInput
-          v-model.trim="smtpConfig.mail_password"
-          :type="getInputType"
-          :content-loading="isFetchingInitialData"
-          autocomplete="off"
-          data-lpignore="true"
-          name="password"
-        >
-          <template #right>
-            <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-muted cursor-pointer"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
-      </BaseInputGroup>
-    </div>
-
-    <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 md:mb-6">
-      <BaseInputGroup
-        :label="$t('wizard.mail.port')"
-        :error="
-          v$.smtpConfig.mail_port.$error &&
-          v$.smtpConfig.mail_port.$errors[0].$message
-        "
-        :content-loading="isFetchingInitialData"
-        required
-      >
-        <BaseInput
-          v-model.trim="smtpConfig.mail_port"
-          :invalid="v$.smtpConfig.mail_port.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mail_port"
-          @input="v$.smtpConfig.mail_port.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.mail.encryption')"
-        :error="
-          v$.smtpConfig.mail_encryption.$error &&
-          v$.smtpConfig.mail_encryption.$errors[0].$message
-        "
-        :content-loading="isFetchingInitialData"
-        required
-      >
-        <BaseMultiselect
-          v-model.trim="smtpConfig.mail_encryption"
-          :options="encryptions"
-          :can-deselect="false"
-          :invalid="v$.smtpConfig.mail_encryption.$error"
-          :content-loading="isFetchingInitialData"
-          @input="v$.smtpConfig.mail_encryption.$touch()"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-2">
-      <BaseInputGroup
-        :label="$t('wizard.mail.from_mail')"
-        :error="
-          v$.smtpConfig.from_mail.$error &&
-          v$.smtpConfig.from_mail.$errors[0].$message
-        "
-        :content-loading="isFetchingInitialData"
-        required
-      >
-        <BaseInput
-          v-model.trim="smtpConfig.from_mail"
-          :invalid="v$.smtpConfig.from_mail.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="from_mail"
-          @input="v$.smtpConfig.from_mail.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('wizard.mail.from_name')"
-        :error="
-          v$.smtpConfig.from_name.$error &&
-          v$.smtpConfig.from_name.$errors[0].$message
-        "
-        :content-loading="isFetchingInitialData"
-        required
-      >
-        <BaseInput
-          v-model.trim="smtpConfig.from_name"
-          :invalid="v$.smtpConfig.from_name.$error"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="from_name"
-          @input="v$.smtpConfig.from_name.$touch()"
-        />
-      </BaseInputGroup>
-    </div>
-
-    <BaseButton
-      :loading="isSaving"
-      :disabled="isSaving"
-      :content-loading="isFetchingInitialData"
-      class="mt-4"
-    >
-      <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-      </template>
-      {{ $t('general.save') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { reactive, ref, computed } from 'vue'
-import { required, email, numeric, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-
-const props = defineProps({
-  isSaving: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  isFetchingInitialData: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-let isShowPassword = ref(false)
-const encryptions = reactive(['none', 'tls', 'ssl', 'starttls'])
-const { t } = useI18n()
-
-const mailDriverStore = useMailDriverStore()
-
-const smtpConfig = computed(() => {
-  return mailDriverStore.smtpConfig
-})
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
-smtpConfig.value.mail_driver = 'smtp'
-
-const rules = computed(() => {
-  return {
-    smtpConfig: {
-      mail_driver: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_host: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_port: {
-        required: helpers.withMessage(t('validation.required'), required),
-        numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
-      },
-      mail_encryption: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      from_mail: {
-        required: helpers.withMessage(t('validation.required'), required),
-        email: helpers.withMessage(t('validation.email_incorrect'), email),
-      },
-      from_name: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => mailDriverStore)
-)
-
-async function saveEmailConfig() {
-  v$.value.$touch()
-  if (!v$.value.$invalid) {
-    emit('submit-data', mailDriverStore.smtpConfig)
-  }
-  return false
-}
-
-function onChangeDriver() {
-  v$.value.smtpConfig.mail_driver.$touch()
-  emit('on-change-driver', mailDriverStore.smtpConfig.mail_driver)
-}
-</script>
diff --git a/resources/scripts/admin/views/invoices/Index.vue b/resources/scripts/admin/views/invoices/Index.vue
deleted file mode 100644
index 05855409..00000000
--- a/resources/scripts/admin/views/invoices/Index.vue
+++ /dev/null
@@ -1,560 +0,0 @@
-<template>
-  <BasePage>
-    <SendInvoiceModal />
-    <BasePageHeader :title="$t('invoices.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem :title="$t('invoices.invoice', 2)" to="#" active />
-      </BaseBreadcrumb>
-
-      <template #actions>
-        <BaseButton
-          v-show="invoiceStore.invoiceTotalCount"
-          variant="primary-outline"
-          @click="toggleFilter"
-        >
-          {{ $t('general.filter') }}
-          <template #right="slotProps">
-            <BaseIcon
-              v-if="!showFilters"
-              name="FunnelIcon"
-              :class="slotProps.class"
-            />
-            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
-          </template>
-        </BaseButton>
-
-        <router-link
-          v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
-          to="invoices/create"
-        >
-          <BaseButton variant="primary" class="ml-4">
-            <template #left="slotProps">
-              <BaseIcon name="PlusIcon" :class="slotProps.class" />
-            </template>
-            {{ $t('invoices.new_invoice') }}
-          </BaseButton>
-        </router-link>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper
-      v-show="showFilters"
-      :row-on-xl="true"
-      @clear="clearFilter"
-    >
-      <BaseInputGroup :label="$t('customers.customer', 1)">
-        <BaseCustomerSelectInput
-          v-model="filters.customer_id"
-          :placeholder="$t('customers.type_or_click')"
-          value-prop="id"
-          label="name"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('invoices.status')">
-        <BaseMultiselect
-          v-model="filters.status"
-          :groups="true"
-          :options="status"
-          searchable
-          :placeholder="$t('general.select_a_status')"
-          @update:modelValue="setActiveTab"
-          @remove="clearStatusSearch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('general.from')">
-        <BaseDatePicker
-          v-model="filters.from_date"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-
-      <div
-        class="hidden w-8 h-0 mx-4 border border-gray-400 border-solid xl:block"
-        style="margin-top: 1.5rem"
-      />
-
-      <BaseInputGroup :label="$t('general.to')" class="mt-2">
-        <BaseDatePicker
-          v-model="filters.to_date"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('invoices.invoice_number')">
-        <BaseInput v-model="filters.invoice_number">
-          <template #left="slotProps">
-            <BaseIcon name="HashtagIcon" :class="slotProps.class" />
-          </template>
-        </BaseInput>
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <BaseEmptyPlaceholder
-      v-show="showEmptyScreen"
-      :title="$t('invoices.no_invoices')"
-      :description="$t('invoices.list_of_invoices')"
-    >
-      <MoonwalkerIcon class="mt-5 mb-4" />
-      <template
-        v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
-        #actions
-      >
-        <BaseButton
-          variant="primary-outline"
-          @click="$router.push('/admin/invoices/create')"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="PlusIcon" :class="slotProps.class" />
-          </template>
-          {{ $t('invoices.add_new_invoice') }}
-        </BaseButton>
-      </template>
-    </BaseEmptyPlaceholder>
-
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <div
-        class="
-          relative
-          flex
-          items-center
-          justify-between
-          h-10
-          mt-5
-          list-none
-          border-b-2 border-line-default border-solid
-        "
-      >
-        <!-- Tabs -->
-        <BaseTabGroup class="-mb-5" @change="setStatusFilter">
-          <BaseTab :title="$t('general.all')" filter="" />
-          <BaseTab :title="$t('general.draft')" filter="DRAFT" />
-          <BaseTab :title="$t('general.sent')" filter="SENT" />
-          <BaseTab :title="$t('general.due')" filter="DUE" />
-        </BaseTabGroup>
-
-        <BaseDropdown
-          v-if="
-            invoiceStore.selectedInvoices.length &&
-            userStore.hasAbilities(abilities.DELETE_INVOICE)
-          "
-          class="absolute float-right"
-        >
-          <template #activator>
-            <span
-              class="
-                flex
-                text-sm
-                font-medium
-                cursor-pointer
-                select-none
-                text-primary-400
-              "
-            >
-              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" />
-            </span>
-          </template>
-
-          <BaseDropdownItem @click="removeMultipleInvoices">
-            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </div>
-
-      <BaseTable
-        ref="table"
-        :data="fetchData"
-        :columns="invoiceColumns"
-        :placeholder-count="invoiceStore.invoiceTotalCount >= 20 ? 10 : 5"
-        :key="tableKey"
-        class="mt-10"
-      >
-        <!-- Select All Checkbox -->
-        <template #header>
-          <div class="absolute items-center left-6 top-2.5 select-none">
-            <BaseCheckbox
-              v-model="invoiceStore.selectAllField"
-              variant="primary"
-              @change="invoiceStore.selectAllInvoices"
-            />
-          </div>
-        </template>
-
-        <template #cell-checkbox="{ row }">
-          <div class="relative block">
-            <BaseCheckbox
-              :id="row.id"
-              v-model="selectField"
-              :value="row.data.id"
-            />
-          </div>
-        </template>
-
-        <template #cell-name="{ row }">
-          <BaseText :text="row.data.customer.name" />
-        </template>
-
-        <!-- Invoice Number  -->
-        <template #cell-invoice_number="{ row }">
-          <router-link
-            :to="{ path: `invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.invoice_number }}
-          </router-link>
-        </template>
-
-        <!-- Invoice date  -->
-        <template #cell-invoice_date="{ row }">
-          {{ row.data.formatted_invoice_date }}
-        </template>
-
-        <!-- Invoice Total  -->
-        <template #cell-total="{ row }">
-          <BaseFormatMoney
-            :amount="row.data.total"
-            :currency="row.data.customer.currency"
-          />
-        </template>
-
-        <!-- Invoice status  -->
-        <template #cell-status="{ row }">
-          <BaseInvoiceStatusBadge :status="row.data.status" class="px-3 py-1">
-            <BaseInvoiceStatusLabel :status="row.data.status" />
-          </BaseInvoiceStatusBadge>
-        </template>
-
-        <!-- Due Amount + Paid Status  -->
-        <template #cell-due_amount="{ row }">
-          <div class="flex justify-between">
-            <BaseFormatMoney
-              :amount="row.data.due_amount"
-              :currency="row.data.currency"
-            />
-
-            <BasePaidStatusBadge
-              v-if="row.data.overdue"
-              status="OVERDUE"
-              class="px-1 py-0.5 ml-2"
-            >
-              {{ $t('invoices.overdue') }}
-            </BasePaidStatusBadge>
-
-            <BasePaidStatusBadge
-              :status="row.data.paid_status"
-              class="px-1 py-0.5 ml-2"
-            >
-              <BaseInvoiceStatusLabel :status="row.data.paid_status" />
-            </BasePaidStatusBadge>
-          </div>
-        </template>
-
-        <!-- Actions -->
-        <template v-if="hasAtleastOneAbility()" #cell-actions="{ row }">
-          <InvoiceDropdown :row="row.data" :table="table" />
-        </template>
-      </BaseTable>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { computed, onUnmounted, reactive, ref, watch, inject } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-import { debouncedWatch } from '@vueuse/core'
-
-import MoonwalkerIcon from '@/scripts/components/icons/empty/MoonwalkerIcon.vue'
-import InvoiceDropdown from '@/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue'
-import SendInvoiceModal from '@/scripts/admin/components/modal-components/SendInvoiceModal.vue'
-import BaseInvoiceStatusLabel from "@/scripts/components/base/BaseInvoiceStatusLabel.vue";
-// Stores
-const invoiceStore = useInvoiceStore()
-const dialogStore = useDialogStore()
-const notificationStore = useNotificationStore()
-
-const { t } = useI18n()
-
-// Local State
-const utils = inject('$utils')
-const table = ref(null)
-const tableKey = ref(0)
-const showFilters = ref(false)
-
-const status = ref([
-  {
-    label: t('invoices.status'),
-    options: [
-      {label: t('general.draft'), value: 'DRAFT'},
-      {label: t('general.due'), value: 'DUE'},
-      {label: t('general.sent'), value: 'SENT'},
-      {label: t('invoices.viewed'), value: 'VIEWED'},
-      {label: t('invoices.completed'), value: 'COMPLETED'}
-    ],
-  },
-  {
-    label: t('invoices.paid_status'),
-    options: [
-      {label: t('invoices.unpaid'), value: 'UNPAID'},
-      {label: t('invoices.paid'), value: 'PAID'},
-      {label: t('invoices.partially_paid'), value: 'PARTIALLY_PAID'}],
-  },
-  ,
-])
-const isRequestOngoing = ref(true)
-const activeTab = ref('general.draft')
-const router = useRouter()
-const userStore = useUserStore()
-
-let filters = reactive({
-  customer_id: '',
-  status: '',
-  from_date: '',
-  to_date: '',
-  invoice_number: '',
-})
-
-const showEmptyScreen = computed(
-  () => !invoiceStore.invoiceTotalCount && !isRequestOngoing.value
-)
-
-const selectField = computed({
-  get: () => invoiceStore.selectedInvoices,
-  set: (value) => {
-    return invoiceStore.selectInvoice(value)
-  },
-})
-
-const invoiceColumns = computed(() => {
-  return [
-    {
-      key: 'checkbox',
-      thClass: 'extra w-10',
-      tdClass: 'font-medium text-heading',
-      placeholderClass: 'w-10',
-      sortable: false,
-    },
-    {
-      key: 'invoice_date',
-      label: t('invoices.date'),
-      thClass: 'extra',
-      tdClass: 'font-medium',
-    },
-    { key: 'invoice_number', label: t('invoices.number') },
-    { key: 'name', label: t('invoices.customer') },
-    { key: 'status', label: t('invoices.status') },
-    {
-      key: 'due_amount',
-      label: t('dashboard.recent_invoices_card.amount_due'),
-    },
-    {
-      key: 'total',
-      label: t('invoices.total'),
-      tdClass: 'font-medium text-heading',
-    },
-
-    {
-      key: 'actions',
-      label: t('invoices.action'),
-      tdClass: 'text-right text-sm font-medium',
-      thClass: 'text-right',
-      sortable: false,
-    },
-  ]
-})
-
-debouncedWatch(
-  filters,
-  () => {
-    setFilters()
-  },
-  { debounce: 500 }
-)
-
-onUnmounted(() => {
-  if (invoiceStore.selectAllField) {
-    invoiceStore.selectAllInvoices()
-  }
-})
-
-function hasAtleastOneAbility() {
-  return userStore.hasAbilities([
-    abilities.DELETE_INVOICE,
-    abilities.EDIT_INVOICE,
-    abilities.VIEW_INVOICE,
-    abilities.SEND_INVOICE,
-  ])
-}
-
-async function clearStatusSearch(removedOption, id) {
-  filters.status = ''
-  refreshTable()
-}
-
-function refreshTable() {
-  table.value && table.value.refresh()
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    customer_id: filters.customer_id,
-    status: filters.status,
-    from_date: filters.from_date,
-    to_date: filters.to_date,
-    invoice_number: filters.invoice_number,
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  console.log(data)
-
-  isRequestOngoing.value = true
-
-  let response = await invoiceStore.fetchInvoices(data)
-  console.log('API response:', response.data.data)
-
-  isRequestOngoing.value = false
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-
-function setStatusFilter(val) {
-  if (activeTab.value == val.title) {
-    return true
-  }
-
-  activeTab.value = val.title
-
-  switch (val.title) {
-    case t('general.draft'):
-      filters.status = 'DRAFT'
-      break
-    case t('general.sent'):
-      filters.status = 'SENT'
-      break
-
-    case t('general.due'):
-      filters.status = 'DUE'
-      break
-
-    default:
-      filters.status = ''
-      break
-  }
-}
-
-function setFilters() {
-  invoiceStore.$patch((state) => {
-    state.selectedInvoices = []
-    state.selectAllField = false
-  })
-
-  tableKey.value += 1
-
-  refreshTable()
-}
-
-function clearFilter() {
-  filters.customer_id = ''
-  filters.status = ''
-  filters.from_date = ''
-  filters.to_date = ''
-  filters.invoice_number = ''
-
-  activeTab.value = t('general.all')
-}
-
-async function removeMultipleInvoices() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('invoices.confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        await invoiceStore.deleteMultipleInvoices().then((res) => {
-          if (res.data.success) {
-            refreshTable()
-
-            invoiceStore.$patch((state) => {
-              state.selectedInvoices = []
-              state.selectAllField = false
-            })
-          }
-        })
-      }
-    })
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-
-function setActiveTab(val) {
-  switch (val) {
-    case 'DRAFT':
-      activeTab.value = t('general.draft')
-      break
-    case 'SENT':
-      activeTab.value = t('general.sent')
-      break
-
-    case 'DUE':
-      activeTab.value = t('general.due')
-      break
-
-    case 'COMPLETED':
-      activeTab.value = t('invoices.completed')
-      break
-
-    case 'PAID':
-      activeTab.value = t('invoices.paid')
-      break
-
-    case 'UNPAID':
-      activeTab.value = t('invoices.unpaid')
-      break
-
-    case 'PARTIALLY_PAID':
-      activeTab.value = t('invoices.partially_paid')
-      break
-
-    case 'VIEWED':
-      activeTab.value = t('invoices.viewed')
-      break
-
-    default:
-      activeTab.value = t('general.all')
-      break
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
deleted file mode 100644
index 35264f94..00000000
--- a/resources/scripts/admin/views/invoices/View.vue
+++ /dev/null
@@ -1,517 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n'
-import { computed, reactive, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { debounce } from 'lodash'
-
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useDialogStore } from '@/scripts/stores/dialog'
-
-import SendInvoiceModal from '@/scripts/admin/components/modal-components/SendInvoiceModal.vue'
-import InvoiceDropdown from '@/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue'
-import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
-
-import abilities from '@/scripts/admin/stub/abilities'
-
-const modalStore = useModalStore()
-const invoiceStore = useInvoiceStore()
-const userStore = useUserStore()
-const dialogStore = useDialogStore()
-
-const { t } = useI18n()
-const invoiceData = ref(null)
-const route = useRoute()
-
-const isMarkAsSent = ref(false)
-const isLoading = ref(false)
-
-const invoiceList = ref(null)
-const currentPageNumber = ref(1)
-const lastPageNumber = ref(1)
-const invoiceListSection = ref(null)
-
-const searchData = reactive({
-  orderBy: null,
-  orderByField: null,
-  searchText: null,
-})
-
-const pageTitle = computed(() => invoiceData.value.invoice_number)
-
-const getOrderBy = computed(() => {
-  if (searchData.orderBy === 'asc' || searchData.orderBy == null) {
-    return true
-  }
-  return false
-})
-
-const getOrderName = computed(() => {
-  if (getOrderBy.value) {
-    return t('general.ascending')
-  }
-  return t('general.descending')
-})
-
-const shareableLink = computed(() => {
-  return `/invoices/pdf/${invoiceData.value.unique_hash}`
-})
-
-const getCurrentInvoiceId = computed(() => {
-  if (invoiceData.value && invoiceData.value.id) {
-    return invoice.value.id
-  }
-  return null
-})
-
-watch(route, (to, from) => {
-  if (to.name === 'invoices.view') {
-    loadInvoice()
-  }
-})
-
-async function onMarkAsSent() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('invoices.invoice_mark_as_sent'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'primary',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (response) => {
-      isMarkAsSent.value = false
-      if (response) {
-        await invoiceStore.markAsSent({
-          id: invoiceData.value.id,
-          status: 'SENT',
-        })
-        invoiceData.value.status = 'SENT'
-        isMarkAsSent.value = true
-      }
-      isMarkAsSent.value = false
-    })
-}
-
-async function onSendInvoice(id) {
-  modalStore.openModal({
-    title: t('invoices.send_invoice'),
-    componentName: 'SendInvoiceModal',
-    id: invoiceData.value.id,
-    data: invoiceData.value,
-  })
-}
-
-function hasActiveUrl(id) {
-  return route.params.id == id
-}
-
-async function loadInvoices(pageNumber, fromScrollListener = false) {
-  if (isLoading.value) {
-    return
-  }
-
-  let params = {}
-  if (
-    searchData.searchText !== '' &&
-    searchData.searchText !== null &&
-    searchData.searchText !== undefined
-  ) {
-    params.search = searchData.searchText
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    params.orderBy = searchData.orderBy
-  }
-
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    params.orderByField = searchData.orderByField
-  }
-
-  isLoading.value = true
-  let response = await invoiceStore.fetchInvoices({
-    page: pageNumber,
-    ...params,
-  })
-  isLoading.value = false
-
-  invoiceList.value = invoiceList.value ? invoiceList.value : []
-  invoiceList.value = [...invoiceList.value, ...response.data.data]
-
-  currentPageNumber.value = pageNumber ? pageNumber : 1
-  lastPageNumber.value = response.data.meta.last_page
-  let invoiceFound = invoiceList.value.find((inv) => inv.id == route.params.id)
-
-  if (
-    fromScrollListener == false &&
-    !invoiceFound &&
-    currentPageNumber.value < lastPageNumber.value &&
-    Object.keys(params).length === 0
-  ) {
-    loadInvoices(++currentPageNumber.value)
-  }
-
-  if (invoiceFound) {
-    setTimeout(() => {
-      if (fromScrollListener == false) {
-        scrollToInvoice()
-      }
-    }, 500)
-  }
-}
-
-function scrollToInvoice() {
-  const el = document.getElementById(`invoice-${route.params.id}`)
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth' })
-    el.classList.add('shake')
-    addScrollListener()
-  }
-}
-
-function addScrollListener() {
-  invoiceListSection.value.addEventListener('scroll', (ev) => {
-    if (
-      ev.target.scrollTop > 0 &&
-      ev.target.scrollTop + ev.target.clientHeight >
-        ev.target.scrollHeight - 200
-    ) {
-      if (currentPageNumber.value < lastPageNumber.value) {
-        loadInvoices(++currentPageNumber.value, true)
-      }
-    }
-  })
-}
-
-async function loadInvoice() {
-  let response = await invoiceStore.fetchInvoice(route.params.id)
-  if (response.data) {
-    invoiceData.value = { ...response.data.data }
-  }
-}
-
-async function onSearched() {
-  invoiceList.value = []
-  loadInvoices()
-}
-
-function sortData() {
-  if (searchData.orderBy === 'asc') {
-    searchData.orderBy = 'desc'
-    onSearched()
-    return true
-  }
-  searchData.orderBy = 'asc'
-  onSearched()
-  return true
-}
-
-function updateSentInvoice() {
-  let pos = invoiceList.value.findIndex(
-    (invoice) => invoice.id === invoiceData.value.id
-  )
-
-  if (invoiceList.value[pos]) {
-    invoiceList.value[pos].status = 'SENT'
-    invoiceData.value.status = 'SENT'
-  }
-}
-
-loadInvoices()
-loadInvoice()
-onSearched = debounce(onSearched, 500)
-</script>
-
-<template>
-  <SendInvoiceModal @update="updateSentInvoice" />
-
-  <BasePage v-if="invoiceData" class="xl:pl-96 xl:ml-8">
-    <BasePageHeader :title="pageTitle">
-      <template #actions>
-        <div class="text-sm mr-3">
-          <BaseButton
-            v-if="
-              invoiceData.status === 'DRAFT' &&
-              userStore.hasAbilities(abilities.EDIT_INVOICE)
-            "
-            :disabled="isMarkAsSent"
-            variant="primary-outline"
-            @click="onMarkAsSent"
-          >
-            {{ $t('invoices.mark_as_sent') }}
-          </BaseButton>
-        </div>
-
-        <BaseButton
-          v-if="
-            invoiceData.status === 'DRAFT' &&
-            userStore.hasAbilities(abilities.SEND_INVOICE)
-          "
-          variant="primary"
-          class="text-sm"
-          @click="onSendInvoice"
-        >
-          {{ $t('invoices.send_invoice') }}
-        </BaseButton>
-
-        <!-- Record Payment  -->
-        <router-link
-          v-if="userStore.hasAbilities(abilities.CREATE_PAYMENT)"
-          :to="`/admin/payments/${$route.params.id}/create`"
-        >
-          <BaseButton
-            v-if="
-              invoiceData.status === 'SENT' || invoiceData.status === 'VIEWED'
-            "
-            variant="primary"
-          >
-            {{ $t('invoices.record_payment') }}
-          </BaseButton>
-        </router-link>
-
-        <!-- Invoice Dropdown  -->
-        <InvoiceDropdown
-          class="ml-3"
-          :row="invoiceData"
-          :load-data="loadInvoices"
-        />
-      </template>
-    </BasePageHeader>
-
-    <!-- sidebar -->
-    <div
-      class="
-        fixed
-        top-0
-        left-0
-        hidden
-        h-full
-        pt-16
-        pb-[6.4rem]
-        ml-56
-        bg-surface
-        xl:ml-64
-        w-88
-        xl:block
-      "
-    >
-      <div
-        class="
-          flex
-          items-center
-          justify-between
-          px-4
-          pt-8
-          pb-2
-          border border-line-default border-solid
-          height-full
-        "
-      >
-        <div class="mb-6">
-          <BaseInput
-            v-model="searchData.searchText"
-            :placeholder="$t('general.search')"
-            type="text"
-            variant="gray"
-            @input="onSearched()"
-          >
-            <template #right>
-              <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
-            </template>
-          </BaseInput>
-        </div>
-
-        <div class="flex mb-6 ml-3" role="group" aria-label="First group">
-          <BaseDropdown class="ml-3" position="bottom-start">
-            <template #activator>
-              <BaseButton size="md" variant="gray">
-                <BaseIcon name="FunnelIcon" />
-              </BaseButton>
-            </template>
-            <div
-              class="
-                px-2
-                py-1
-                pb-2
-                mb-1 mb-2
-                text-sm
-                border-b border-line-default border-solid
-              "
-            >
-              {{ $t('general.sort_by') }}
-            </div>
-
-            <BaseDropdownItem class="flex px-1 py-2 cursor-pointer">
-              <BaseInputGroup class="-mt-3 font-normal">
-                <BaseRadio
-                  id="filter_invoice_date"
-                  v-model="searchData.orderByField"
-                  :label="$t('reports.invoices.invoice_date')"
-                  size="sm"
-                  name="filter"
-                  value="invoice_date"
-                  @update:modelValue="onSearched"
-                />
-              </BaseInputGroup>
-            </BaseDropdownItem>
-
-            <BaseDropdownItem class="flex px-1 py-2 cursor-pointer">
-              <BaseInputGroup class="-mt-3 font-normal">
-                <BaseRadio
-                  id="filter_due_date"
-                  v-model="searchData.orderByField"
-                  :label="$t('invoices.due_date')"
-                  value="due_date"
-                  size="sm"
-                  name="filter"
-                  @update:modelValue="onSearched"
-                />
-              </BaseInputGroup>
-            </BaseDropdownItem>
-
-            <BaseDropdownItem class="flex px-1 py-2 cursor-pointer">
-              <BaseInputGroup class="-mt-3 font-normal">
-                <BaseRadio
-                  id="filter_invoice_number"
-                  v-model="searchData.orderByField"
-                  :label="$t('invoices.invoice_number')"
-                  value="invoice_number"
-                  size="sm"
-                  name="filter"
-                  @update:modelValue="onSearched"
-                />
-              </BaseInputGroup>
-            </BaseDropdownItem>
-          </BaseDropdown>
-
-          <BaseButton class="ml-1" size="md" variant="gray" @click="sortData">
-            <BaseIcon v-if="getOrderBy" name="BarsArrowUpIcon" />
-            <BaseIcon v-else name="BarsArrowDownIcon" />
-          </BaseButton>
-        </div>
-      </div>
-
-      <div
-        ref="invoiceListSection"
-        class="
-          h-full
-          overflow-y-scroll
-          border-l border-line-default border-solid
-          base-scroll
-        "
-      >
-        <div v-for="(invoice, index) in invoiceList" :key="index">
-          <router-link
-            v-if="invoice"
-            :id="'invoice-' + invoice.id"
-            :to="`/admin/invoices/${invoice.id}/view`"
-            :class="[
-              'flex justify-between side-invoice p-4 cursor-pointer hover:bg-hover-strong items-center border-l-4 border-l-transparent',
-              {
-                'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
-                  hasActiveUrl(invoice.id),
-              },
-            ]"
-            style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
-          >
-            <div class="flex-2">
-              <BaseText
-                :text="invoice.customer.name"
-                class="
-                  pr-2
-                  mb-2
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-heading
-                  capitalize
-                  truncate
-                "
-              />
-
-              <div
-                class="
-                  mt-1
-                  mb-2
-                  text-xs
-                  not-italic
-                  font-medium
-                  leading-5
-                  text-body
-                "
-              >
-                {{ invoice.invoice_number }}
-              </div>
-              <BaseEstimateStatusBadge
-                :status="invoice.status"
-                class="px-1 text-xs"
-              >
-                <BaseInvoiceStatusLabel :status="invoice.status" />
-              </BaseEstimateStatusBadge>
-            </div>
-
-            <div class="flex-1 whitespace-nowrap right">
-              <BaseFormatMoney
-                class="
-                  mb-2
-                  text-xl
-                  not-italic
-                  font-semibold
-                  leading-8
-                  text-right text-heading
-                  block
-                "
-                :amount="invoice.total"
-                :currency="invoice.customer.currency"
-              />
-              <div
-                class="
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-right text-body
-                  est-date
-                "
-              >
-                {{ invoice.formatted_invoice_date }}
-              </div>
-            </div>
-          </router-link>
-        </div>
-        <div v-if="isLoading" class="flex justify-center p-4 items-center">
-          <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
-        </div>
-        <p
-          v-if="!invoiceList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-body"
-        >
-          {{ $t('invoices.no_matching_invoices') }}
-        </p>
-      </div>
-    </div>
-
-    <div
-      class="flex flex-col min-h-0 mt-8 overflow-hidden"
-      style="height: 75vh"
-    >
-      <iframe
-        :src="`${shareableLink}`"
-        class="
-          flex-1
-          border border-gray-400 border-solid
-          bg-surface
-          rounded-xl
-          frame-style
-        "
-      />
-    </div>
-  </BasePage>
-</template>
diff --git a/resources/scripts/admin/views/invoices/create/InvoiceCreate.vue b/resources/scripts/admin/views/invoices/create/InvoiceCreate.vue
deleted file mode 100644
index 756865bd..00000000
--- a/resources/scripts/admin/views/invoices/create/InvoiceCreate.vue
+++ /dev/null
@@ -1,313 +0,0 @@
-<template>
-  <SelectTemplateModal />
-  <ItemModal />
-  <TaxTypeModal />
-  <SalesTax
-    v-if="salesTaxEnabled && (!isLoadingContent || route.query.customer)"
-    :store="invoiceStore"
-    :is-edit="isEdit"
-    store-prop="newInvoice"
-    :customer="invoiceStore.newInvoice.customer"
-  />
-
-  <BasePage class="relative invoice-create-page">
-    <form @submit.prevent="submitForm">
-      <BasePageHeader :title="pageTitle">
-        <BaseBreadcrumb>
-          <BaseBreadcrumbItem
-            :title="$t('general.home')"
-            to="/admin/dashboard"
-          />
-          <BaseBreadcrumbItem
-            :title="$t('invoices.invoice', 2)"
-            to="/admin/invoices"
-          />
-          <BaseBreadcrumbItem
-            v-if="$route.name === 'invoices.edit'"
-            :title="$t('invoices.edit_invoice')"
-            to="#"
-            active
-          />
-          <BaseBreadcrumbItem
-            v-else
-            :title="$t('invoices.new_invoice')"
-            to="#"
-            active
-          />
-        </BaseBreadcrumb>
-
-        <template #actions>
-          <router-link
-            v-if="$route.name === 'invoices.edit'"
-            :to="`/invoices/pdf/${invoiceStore.newInvoice.unique_hash}`"
-            target="_blank"
-          >
-            <BaseButton class="mr-3" variant="primary-outline" type="button">
-              <span class="flex">
-                {{ $t('general.view_pdf') }}
-              </span>
-            </BaseButton>
-          </router-link>
-
-          <BaseButton
-            :loading="isSaving"
-            :disabled="isSaving"
-            variant="primary"
-            type="submit"
-          >
-            <template #left="slotProps">
-              <BaseIcon
-                v-if="!isSaving"
-                name="ArrowDownOnSquareIcon"
-                :class="slotProps.class"
-              />
-            </template>
-            {{ $t('invoices.save_invoice') }}
-          </BaseButton>
-        </template>
-      </BasePageHeader>
-
-      <!-- Select Customer & Basic Fields  -->
-      <InvoiceBasicFields
-        :v="v$"
-        :is-loading="isLoadingContent"
-        :is-edit="isEdit"
-      />
-
-      <BaseScrollPane>
-        <!-- Invoice Items -->
-        <InvoiceItems
-          :currency="invoiceStore.newInvoice.selectedCurrency"
-          :is-loading="isLoadingContent"
-          :item-validation-scope="invoiceValidationScope"
-          :store="invoiceStore"
-          store-prop="newInvoice"
-        />
-
-        <!-- Invoice Footer Section -->
-        <div
-          class="
-            block
-            mt-10
-            invoice-foot
-            lg:flex lg:justify-between lg:items-start
-          "
-        >
-          <div class="relative w-full lg:w-1/2 lg:mr-4">
-            <!-- Invoice Custom Notes -->
-            <NoteFields
-              :store="invoiceStore"
-              store-prop="newInvoice"
-              :fields="invoiceNoteFieldList"
-              type="Invoice"
-            />
-
-            <!-- Invoice Custom Fields -->
-            <InvoiceCustomFields
-              type="Invoice"
-              :is-edit="isEdit"
-              :is-loading="isLoadingContent"
-              :store="invoiceStore"
-              store-prop="newInvoice"
-              :custom-field-scope="invoiceValidationScope"
-              class="mb-6"
-            />
-
-            <!-- Invoice Template Button-->
-            <SelectTemplate
-              :store="invoiceStore"
-              store-prop="newInvoice"
-              component-name="InvoiceTemplate"
-              :is-mark-as-default="isMarkAsDefault"
-            />
-          </div>
-
-          <InvoiceTotal
-            :currency="invoiceStore.newInvoice.selectedCurrency"
-            :is-loading="isLoadingContent"
-            :store="invoiceStore"
-            store-prop="newInvoice"
-            tax-popup-type="invoice"
-          />
-        </div>
-      </BaseScrollPane>
-    </form>
-  </BasePage>
-</template>
-
-<script setup>
-import { computed, onMounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import {
-  required,
-  maxLength,
-  helpers,
-  requiredIf,
-  decimal,
-} from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { cloneDeep } from 'lodash'
-
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { useModuleStore } from '@/scripts/admin/stores/module'
-import { useNotesStore } from '@/scripts/admin/stores/note'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
-
-import InvoiceItems from '@/scripts/admin/components/estimate-invoice-common/CreateItems.vue'
-import InvoiceTotal from '@/scripts/admin/components/estimate-invoice-common/CreateTotal.vue'
-import SelectTemplate from '@/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue'
-import InvoiceBasicFields from './InvoiceCreateBasicFields.vue'
-import InvoiceCustomFields from '@/scripts/admin/components/custom-fields/CreateCustomFields.vue'
-import NoteFields from '@/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue'
-import SelectTemplateModal from '@/scripts/admin/components/modal-components/SelectTemplateModal.vue'
-import TaxTypeModal from '@/scripts/admin/components/modal-components/TaxTypeModal.vue'
-import ItemModal from '@/scripts/admin/components/modal-components/ItemModal.vue'
-import SalesTax from '@/scripts/admin/components/estimate-invoice-common/SalesTax.vue'
-
-const invoiceStore = useInvoiceStore()
-const companyStore = useCompanyStore()
-const customFieldStore = useCustomFieldStore()
-const moduleStore = useModuleStore()
-const notesStore = useNotesStore()
-
-const { t } = useI18n()
-let route = useRoute()
-let router = useRouter()
-
-const invoiceValidationScope = 'newInvoice'
-let isSaving = ref(false)
-const isMarkAsDefault = ref(false)
-
-const invoiceNoteFieldList = ref([
-  'customer',
-  'company',
-  'customerCustom',
-  'invoice',
-  'invoiceCustom',
-])
-
-let isLoadingContent = computed(
-  () => invoiceStore.isFetchingInvoice || invoiceStore.isFetchingInitialSettings
-)
-
-let pageTitle = computed(() =>
-  isEdit.value ? t('invoices.edit_invoice') : t('invoices.new_invoice')
-)
-
-const salesTaxEnabled = computed(() => {
-  return (
-    companyStore.selectedCompanySettings.sales_tax_us_enabled === 'YES' &&
-    moduleStore.salesTaxUSEnabled
-  )
-})
-
-let isEdit = computed(() => route.name === 'invoices.edit')
-
-const rules = {
-  invoice_date: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  reference_number: {
-    maxLength: helpers.withMessage(
-      t('validation.price_maxlength'),
-      maxLength(255)
-    ),
-  },
-  customer_id: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  invoice_number: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  exchange_rate: {
-    required: requiredIf(function () {
-      helpers.withMessage(t('validation.required'), required)
-      return invoiceStore.showExchangeRate
-    }),
-    decimal: helpers.withMessage(t('validation.valid_exchange_rate'), decimal),
-  },
-}
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => invoiceStore.newInvoice),
-  { $scope: invoiceValidationScope }
-)
-
-customFieldStore.resetCustomFields()
-v$.value.$reset
-invoiceStore.resetCurrentInvoice()
-invoiceStore.fetchInvoiceInitialSettings(isEdit.value)
-
-watch(
-  () => invoiceStore.newInvoice.customer,
-  (newVal) => {
-    if (newVal && newVal.currency) {
-      invoiceStore.newInvoice.selectedCurrency = newVal.currency
-    } else {
-      invoiceStore.newInvoice.selectedCurrency =
-        companyStore.selectedCompanyCurrency
-    }
-  }
-)
-
-watch(
-  () => companyStore.selectedCompanySettings?.tax_included_by_default,
-  (newVal) => {
-    invoiceStore.newInvoice.tax_included = newVal === 'YES'
-  },
-  {immediate: true}
-)
-
-async function submitForm() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    console.log('Form is invalid:', v$.value.$errors)
-    return false
-  }
-
-  isSaving.value = true
-
-  let data = cloneDeep({
-    ...invoiceStore.newInvoice,
-    sub_total: invoiceStore.getSubTotal,
-    total: invoiceStore.getTotal,
-    tax: invoiceStore.getTotalTax,
-  })
-  if (data.discount_per_item === 'YES') {
-    data.items.forEach((item, index) => {
-      if (item.discount_type === 'fixed'){
-        data.items[index].discount = item.discount * 100
-      }
-    })
-  }
-  else {
-    if (data.discount_type === 'fixed'){
-      data.discount = data.discount * 100
-    }
-  }
-    if (
-    !invoiceStore.newInvoice.tax_per_item === 'YES'
-    && data.taxes.length
-  ){
-    data.tax_type_ids = data.taxes.map(_t => _t.tax_type_id)
-  }
-
-  try {
-    const action = isEdit.value
-      ? invoiceStore.updateInvoice
-      : invoiceStore.addInvoice
-
-    const response = await action(data)
-
-    router.push(`/admin/invoices/${response.data.data.id}/view`)
-  } catch (err) {
-    console.error(err)
-  }
-
-  isSaving.value = false
-}
-</script>
diff --git a/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue b/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue
deleted file mode 100644
index b77c45f0..00000000
--- a/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div class="grid grid-cols-12 gap-8 mt-6 mb-8">
-    <BaseCustomerSelectPopup
-      v-model="invoiceStore.newInvoice.customer"
-      :valid="v.customer_id"
-      :content-loading="isLoading"
-      type="invoice"
-      class="col-span-12 lg:col-span-5 pr-0"
-    />
-
-    <BaseInputGrid class="col-span-12 lg:col-span-7 rounded-xl shadow border border-line-light bg-surface p-5">
-      <BaseInputGroup
-        :label="$t('invoices.invoice_date')"
-        :content-loading="isLoading"
-        required
-        :error="v.invoice_date.$error && v.invoice_date.$errors[0].$message"
-      >
-        <BaseDatePicker
-          v-model="invoiceStore.newInvoice.invoice_date"
-          :content-loading="isLoading"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-          :enableTime="enableTime"
-          :time24hr="time24h"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('invoices.due_date')"
-        :content-loading="isLoading"
-      >
-        <BaseDatePicker
-          v-model="invoiceStore.newInvoice.due_date"
-          :content-loading="isLoading"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('invoices.invoice_number')"
-        :content-loading="isLoading"
-        :error="v.invoice_number.$error && v.invoice_number.$errors[0].$message"
-        required
-      >
-        <BaseInput
-          v-model="invoiceStore.newInvoice.invoice_number"
-          :content-loading="isLoading"
-          @input="v.invoice_number.$touch()"
-        />
-      </BaseInputGroup>
-
-      <ExchangeRateConverter
-        :store="invoiceStore"
-        store-prop="newInvoice"
-        :v="v"
-        :is-loading="isLoading"
-        :is-edit="isEdit"
-        :customer-currency="invoiceStore.newInvoice.currency_id"
-      />
-    </BaseInputGrid>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import ExchangeRateConverter from '@/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue'
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const props = defineProps({
-  v: {
-    type: Object,
-    default: null,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  isEdit: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const invoiceStore = useInvoiceStore()
-const companyStore = useCompanyStore()
-
-const enableTime = computed(() => {
-  return (
-    companyStore.selectedCompanySettings.invoice_use_time === 'YES'
-  );
-})
-const time24h = computed(() => {
-  return (
-    companyStore.selectedCompanySettings.carbon_time_format.indexOf('H') > -1
-  );
-})
-
-</script>
diff --git a/resources/scripts/admin/views/items/Create.vue b/resources/scripts/admin/views/items/Create.vue
deleted file mode 100644
index 6ed7badd..00000000
--- a/resources/scripts/admin/views/items/Create.vue
+++ /dev/null
@@ -1,322 +0,0 @@
-<template>
-  <BasePage>
-    <BasePageHeader :title="pageTitle">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem :title="$t('items.item', 2)" to="/admin/items" />
-        <BaseBreadcrumbItem :title="pageTitle" to="#" active />
-      </BaseBreadcrumb>
-    </BasePageHeader>
-
-    <ItemUnitModal />
-
-    <form
-      class="grid lg:grid-cols-2 mt-6"
-      action="submit"
-      @submit.prevent="submitItem"
-    >
-      <BaseCard class="w-full">
-        <BaseInputGrid layout="one-column">
-          <BaseInputGroup
-            :label="$t('items.name')"
-            :content-loading="isFetchingInitialData"
-            required
-            :error="
-              v$.currentItem.name.$error &&
-              v$.currentItem.name.$errors[0].$message
-            "
-          >
-            <BaseInput
-              v-model="itemStore.currentItem.name"
-              :content-loading="isFetchingInitialData"
-              :invalid="v$.currentItem.name.$error"
-              @input="v$.currentItem.name.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('items.price')"
-            :content-loading="isFetchingInitialData"
-          >
-            <BaseMoney
-              v-model="price"
-              :content-loading="isFetchingInitialData"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :content-loading="isFetchingInitialData"
-            :label="$t('items.unit')"
-          >
-            <BaseMultiselect
-              v-model="itemStore.currentItem.unit_id"
-              :content-loading="isFetchingInitialData"
-              label="name"
-              :options="itemStore.itemUnits"
-              value-prop="id"
-              :placeholder="$t('items.select_a_unit')"
-              searchable
-              track-by="name"
-            >
-              <template #action>
-                <BaseSelectAction @click="addItemUnit">
-                  <BaseIcon
-                    name="PlusIcon"
-                    class="h-4 mr-2 -ml-2 text-center text-primary-400"
-                  />
-                  {{ $t('settings.customization.items.add_item_unit') }}
-                </BaseSelectAction>
-              </template>
-            </BaseMultiselect>
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            v-if="isTaxPerItem"
-            :label="$t('items.taxes')"
-            :content-loading="isFetchingInitialData"
-          >
-            <BaseMultiselect
-              v-model="taxes"
-              :content-loading="isFetchingInitialData"
-              :options="getTaxTypes"
-              mode="tags"
-              label="tax_name"
-              class="w-full"
-              value-prop="id"
-              :can-deselect="false"
-              :can-clear="false"
-              searchable
-              track-by="tax_name"
-              object
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('items.description')"
-            :content-loading="isFetchingInitialData"
-            :error="
-              v$.currentItem.description.$error &&
-              v$.currentItem.description.$errors[0].$message
-            "
-          >
-            <BaseTextarea
-              v-model="itemStore.currentItem.description"
-              :content-loading="isFetchingInitialData"
-              name="description"
-              :row="2"
-              rows="2"
-              @input="v$.currentItem.description.$touch()"
-            />
-          </BaseInputGroup>
-
-          <div>
-            <BaseButton
-              :content-loading="isFetchingInitialData"
-              type="submit"
-              :loading="isSaving"
-            >
-              <template #left="slotProps">
-                <BaseIcon
-                  v-if="!isSaving"
-                  name="ArrowDownOnSquareIcon"
-                  :class="slotProps.class"
-                />
-              </template>
-
-              {{ isEdit ? $t('items.update_item') : $t('items.save_item') }}
-            </BaseButton>
-          </div>
-        </BaseInputGrid>
-      </BaseCard>
-    </form>
-  </BasePage>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import {
-  required,
-  minLength,
-  numeric,
-  minValue,
-  maxLength,
-  helpers,
-} from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useItemStore } from '@/scripts/admin/stores/item'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
-import { useModalStore } from '@/scripts/stores/modal'
-import ItemUnitModal from '@/scripts/admin/components/modal-components/ItemUnitModal.vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const itemStore = useItemStore()
-const taxTypeStore = useTaxTypeStore()
-const modalStore = useModalStore()
-const companyStore = useCompanyStore()
-const { t } = useI18n()
-const route = useRoute()
-const router = useRouter()
-const userStore = useUserStore()
-
-const isSaving = ref(false)
-const taxPerItem = ref(companyStore.selectedCompanySettings.tax_per_item)
-
-let isFetchingInitialData = ref(false)
-
-itemStore.$reset()
-loadData()
-
-const price = computed({
-  get: () => itemStore.currentItem.price / 100,
-  set: (value) => {
-    itemStore.currentItem.price = Math.round(value * 100)
-  },
-})
-
-const taxes = computed({
-  get: () =>
-    itemStore?.currentItem?.taxes?.map((tax) => {
-      if (tax) {
-        return {
-          ...tax,
-          tax_type_id: tax.id,
-          tax_name: `${tax.name} (${tax.calculation_type === 'fixed'
-            ? new Intl.NumberFormat(undefined, {
-                style: 'currency',
-                currency: companyStore.selectedCompanyCurrency.code
-              }).format(tax.fixed_amount / 100)
-            : `${tax.percent}%`})`,
-        }
-      }
-    }),
-  set: (value) => {
-    itemStore.currentItem.taxes = value
-  },
-})
-
-const isEdit = computed(() => route.name === 'items.edit')
-
-const pageTitle = computed(() =>
-  isEdit.value ? t('items.edit_item') : t('items.new_item')
-)
-
-const getTaxTypes = computed(() => {
-  return taxTypeStore.taxTypes.map((tax) => {
-    return {
-      ...tax,
-      tax_type_id: tax.id,
-      tax_name: `${tax.name} (${tax.calculation_type === 'fixed'
-        ? new Intl.NumberFormat(undefined, {
-            style: 'currency',
-            currency: companyStore.selectedCompanyCurrency.code
-          }).format(tax.fixed_amount / 100)
-        : `${tax.percent}%`})`,
-    }
-  })
-})
-
-const isTaxPerItem = computed(() => taxPerItem.value === 'YES')
-
-const rules = computed(() => {
-  return {
-    currentItem: {
-      name: {
-        required: helpers.withMessage(t('validation.required'), required),
-        minLength: helpers.withMessage(
-          t('validation.name_min_length', { count: 2 }),
-          minLength(2)
-        ),
-      },
-
-      description: {
-        maxLength: helpers.withMessage(
-          t('validation.description_maxlength'),
-          maxLength(65000)
-        ),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(rules, itemStore)
-
-async function addItemUnit() {
-  modalStore.openModal({
-    title: t('settings.customization.items.add_item_unit'),
-    componentName: 'ItemUnitModal',
-    size: 'sm',
-  })
-}
-
-async function loadData() {
-  isFetchingInitialData.value = true
-
-  await itemStore.fetchItemUnits({ limit: 'all' })
-  if (userStore.hasAbilities(abilities.VIEW_TAX_TYPE)) {
-    await taxTypeStore.fetchTaxTypes({ limit: 'all' })
-  }
-
-  if (isEdit.value) {
-    let id = route.params.id
-    await itemStore.fetchItem(id)
-    itemStore.currentItem.tax_per_item === 1
-      ? (taxPerItem.value = 'YES')
-      : (taxPerItem.value = 'NO')
-  }
-
-  isFetchingInitialData.value = false
-}
-
-async function submitItem() {
-  v$.value.currentItem.$touch()
-
-  if (v$.value.currentItem.$invalid) {
-    return false
-  }
-
-  isSaving.value = true
-
-  try {
-    let data = {
-      id: route.params.id,
-      ...itemStore.currentItem,
-    }
-
-    if (itemStore.currentItem && itemStore.currentItem.taxes) {
-      data.taxes = itemStore.currentItem.taxes.map((tax) => {
-        return {
-          tax_type_id: tax.tax_type_id,
-          calculation_type: tax.calculation_type,
-          fixed_amount: tax.fixed_amount,
-          amount: tax.calculation_type === 'fixed' ? tax.fixed_amount : Math.round(price.value * tax.percent),
-          percent: tax.percent,
-          name: tax.name,
-          collective_tax: 0,
-        }
-      })
-    }
-
-    const action = isEdit.value ? itemStore.updateItem : itemStore.addItem
-
-    await action(data)
-    isSaving.value = false
-    router.push('/admin/items')
-    closeItemModal()
-  } catch (err) {
-    isSaving.value = false
-    return
-  }
-  function closeItemModal() {
-    modalStore.closeModal()
-    setTimeout(() => {
-      itemStore.resetCurrentItem()
-      modalStore.$reset()
-      v$.value.$reset()
-    }, 300)
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/items/Index.vue b/resources/scripts/admin/views/items/Index.vue
deleted file mode 100644
index 1550fbc6..00000000
--- a/resources/scripts/admin/views/items/Index.vue
+++ /dev/null
@@ -1,359 +0,0 @@
-<template>
-  <BasePage>
-    <BasePageHeader :title="$t('items.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem :title="$t('items.item', 2)" to="#" active />
-      </BaseBreadcrumb>
-
-      <template #actions>
-        <div class="flex items-center justify-end space-x-5">
-          <BaseButton
-            v-show="itemStore.totalItems"
-            variant="primary-outline"
-            @click="toggleFilter"
-          >
-            {{ $t('general.filter') }}
-            <template #right="slotProps">
-              <BaseIcon
-                v-if="!showFilters"
-                :class="slotProps.class"
-                name="FunnelIcon"
-              />
-              <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
-            </template>
-          </BaseButton>
-
-          <BaseButton
-            v-if="userStore.hasAbilities(abilities.CREATE_ITEM)"
-            @click="$router.push('/admin/items/create')"
-          >
-            <template #left="slotProps">
-              <BaseIcon name="PlusIcon" :class="slotProps.class" />
-            </template>
-            {{ $t('items.add_item') }}
-          </BaseButton>
-        </div>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper :show="showFilters" class="mt-5" @clear="clearFilter">
-      <BaseInputGroup :label="$t('items.name')" class="text-left">
-        <BaseInput
-          v-model="filters.name"
-          type="text"
-          name="name"
-          autocomplete="off"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('items.unit')" class="text-left">
-        <BaseMultiselect
-          v-model="filters.unit_id"
-          :placeholder="$t('items.select_a_unit')"
-          value-prop="id"
-          track-by="name"
-          :filter-results="false"
-          label="name"
-          resolve-on-load
-          :delay="500"
-          searchable
-          class="w-full"
-          :options="searchUnits"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup class="text-left" :label="$t('items.price')">
-        <BaseMoney v-model="filters.price" />
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <BaseEmptyPlaceholder
-      v-show="showEmptyScreen"
-      :title="$t('items.no_items')"
-      :description="$t('items.list_of_items')"
-    >
-      <SatelliteIcon class="mt-5 mb-4" />
-
-      <template #actions>
-        <BaseButton
-          v-if="userStore.hasAbilities(abilities.CREATE_ITEM)"
-          variant="primary-outline"
-          @click="$router.push('/admin/items/create')"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="PlusIcon" :class="slotProps.class" />
-          </template>
-          {{ $t('items.add_new_item') }}
-        </BaseButton>
-      </template>
-    </BaseEmptyPlaceholder>
-
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <div
-        class="
-          relative
-          flex
-          items-center
-          justify-end
-          h-5
-          border-line-default border-solid
-        "
-      >
-        <BaseDropdown v-if="itemStore.selectedItems.length">
-          <template #activator>
-            <span
-              class="
-                flex
-                text-sm
-                font-medium
-                cursor-pointer
-                select-none
-                text-primary-400
-              "
-            >
-              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" />
-            </span>
-          </template>
-          <BaseDropdownItem @click="removeMultipleItems">
-            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </div>
-
-      <BaseTable
-        ref="table"
-        :data="fetchData"
-        :columns="itemColumns"
-        :placeholder-count="itemStore.totalItems >= 20 ? 10 : 5"
-        class="mt-3"
-      >
-        <template #header>
-          <div class="absolute items-center left-6 top-2.5 select-none">
-            <BaseCheckbox
-              v-model="itemStore.selectAllField"
-              variant="primary"
-              @change="itemStore.selectAllItems"
-            />
-          </div>
-        </template>
-
-        <template #cell-status="{ row }">
-          <div class="relative block">
-            <BaseCheckbox
-              :id="row.id"
-              v-model="selectField"
-              :value="row.data.id"
-            />
-          </div>
-        </template>
-
-        <template #cell-name="{ row }">
-          <router-link
-            :to="{ path: `items/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
-          >
-            <BaseText :text="row.data.name" />
-          </router-link>
-        </template>
-
-        <template #cell-unit_name="{ row }">
-          <span>
-            {{ row.data.unit ? row.data.unit.name : '-' }}
-          </span>
-        </template>
-
-        <template #cell-price="{ row }">
-          <BaseFormatMoney
-            :amount="row.data.price"
-            :currency="companyStore.selectedCompanyCurrency"
-          />
-        </template>
-
-        <template #cell-created_at="{ row }">
-          <span>{{ row.data.formatted_created_at }}</span>
-        </template>
-
-        <template v-if="hasAbilities()" #cell-actions="{ row }">
-          <ItemDropdown
-            :row="row.data"
-            :table="table"
-            :load-data="refreshTable"
-          />
-        </template>
-      </BaseTable>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { ref, computed, inject, onMounted, reactive, onUnmounted } from 'vue'
-import { debouncedWatch } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
-import { useItemStore } from '@/scripts/admin/stores/item'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import ItemDropdown from '@/scripts/admin/components/dropdowns/ItemIndexDropdown.vue'
-import SatelliteIcon from '@/scripts/components/icons/empty/SatelliteIcon.vue'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const utils = inject('utils')
-
-const itemStore = useItemStore()
-const companyStore = useCompanyStore()
-const notificationStore = useNotificationStore()
-const dialogStore = useDialogStore()
-const userStore = useUserStore()
-
-const { t } = useI18n()
-let showFilters = ref(false)
-let isFetchingInitialData = ref(true)
-
-const filters = reactive({
-  name: '',
-  unit_id: '',
-  price: '',
-})
-
-const table = ref(null)
-
-const showEmptyScreen = computed(
-  () => !itemStore.totalItems && !isFetchingInitialData.value
-)
-
-const selectField = computed({
-  get: () => itemStore.selectedItems,
-  set: (value) => {
-    return itemStore.selectItem(value)
-  },
-})
-
-const itemColumns = computed(() => {
-  return [
-    {
-      key: 'status',
-      thClass: 'extra w-10',
-      tdClass: 'font-medium text-heading',
-      placeholderClass: 'w-10',
-      sortable: false,
-    },
-    {
-      key: 'name',
-      label: t('items.name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    { key: 'unit_name', label: t('items.unit') },
-    { key: 'price', label: t('items.price') },
-    { key: 'created_at', label: t('items.added_on') },
-
-    {
-      key: 'actions',
-      thClass: 'text-right',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-debouncedWatch(
-  filters,
-  () => {
-    setFilters()
-  },
-  { debounce: 500 }
-)
-
-itemStore.fetchItemUnits({ limit: 'all' })
-
-onUnmounted(() => {
-  if (itemStore.selectAllField) {
-    itemStore.selectAllItems()
-  }
-})
-
-function clearFilter() {
-  filters.name = ''
-  filters.unit_id = ''
-  filters.price = ''
-}
-
-function hasAbilities() {
-  return userStore.hasAbilities([abilities.DELETE_ITEM, abilities.EDIT_ITEM])
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-
-function refreshTable() {
-  table.value && table.value.refresh()
-}
-
-function setFilters() {
-  refreshTable()
-}
-
-async function searchUnits(search) {
-  let res = await itemStore.fetchItemUnits({ search })
-
-  return res.data.data
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    search: filters.name,
-    unit_id: filters.unit_id !== null ? filters.unit_id : '',
-    price: Math.round(filters.price * 100),
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  isFetchingInitialData.value = true
-
-  let response = await itemStore.fetchItems(data)
-
-  isFetchingInitialData.value = false
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-
-function removeMultipleItems() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('items.confirm_delete', 2),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((res) => {
-      if (res) {
-        itemStore.deleteMultipleItems().then((response) => {
-          if (response.data.success) {
-            table.value && table.value.refresh()
-          }
-        })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/views/members/Index.vue b/resources/scripts/admin/views/members/Index.vue
deleted file mode 100644
index 9e0b0329..00000000
--- a/resources/scripts/admin/views/members/Index.vue
+++ /dev/null
@@ -1,451 +0,0 @@
-<template>
-  <BasePage>
-    <!-- Page Header Section -->
-    <BasePageHeader :title="$t('members.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem :title="$t('members.title', 2)" to="#" active />
-      </BaseBreadcrumb>
-
-      <template #actions>
-        <div class="flex items-center justify-end space-x-5">
-          <BaseButton
-            v-show="usersStore.totalUsers"
-            variant="primary-outline"
-            @click="toggleFilter"
-          >
-            {{ $t('general.filter') }}
-            <template #right="slotProps">
-              <BaseIcon
-                v-if="!showFilters"
-                name="FunnelIcon"
-                :class="slotProps.class"
-              />
-              <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
-            </template>
-          </BaseButton>
-
-          <BaseButton
-            v-if="userStore.currentUser.is_owner"
-            @click="showInviteModal = true"
-          >
-            <template #left="slotProps">
-              <BaseIcon
-                name="EnvelopeIcon"
-                :class="slotProps.class"
-                aria-hidden="true"
-              />
-            </template>
-            {{ $t('members.invite_member') }}
-          </BaseButton>
-        </div>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper :show="showFilters" class="mt-3" @clear="clearFilter">
-      <BaseInputGroup :label="$t('members.name')" class="flex-1 mt-2 mr-4">
-        <BaseInput
-          v-model="filters.name"
-          type="text"
-          name="name"
-          autocomplete="off"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('members.email')" class="flex-1 mt-2 mr-4">
-        <BaseInput
-          v-model="filters.email"
-          type="text"
-          name="email"
-          autocomplete="off"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup class="flex-1 mt-2" :label="$t('members.phone')">
-        <BaseInput
-          v-model="filters.phone"
-          type="text"
-          name="phone"
-          autocomplete="off"
-        />
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <!-- User Empty Placeholder -->
-
-    <BaseEmptyPlaceholder
-      v-show="showEmptyScreen"
-      :title="$t('members.no_users')"
-      :description="$t('members.list_of_users')"
-    >
-      <AstronautIcon class="mt-5 mb-4" />
-
-      <template #actions>
-        <BaseButton
-          v-if="userStore.currentUser.is_owner"
-          variant="primary-outline"
-          @click="$router.push('/admin/members/create')"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="PlusIcon" :class="slotProps.class" />
-          </template>
-          {{ $t('members.add_user') }}
-        </BaseButton>
-      </template>
-    </BaseEmptyPlaceholder>
-
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <div
-        class="
-          relative
-          flex
-          items-center
-          justify-end
-          h-5
-          border-line-default border-solid
-        "
-      >
-        <BaseDropdown v-if="usersStore.selectedUsers.length">
-          <template #activator>
-            <span
-              class="
-                flex
-                text-sm
-                font-medium
-                cursor-pointer
-                select-none
-                text-primary-400
-              "
-            >
-              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" class="h-5" />
-            </span>
-          </template>
-          <BaseDropdownItem @click="removeMultipleUsers">
-            <BaseIcon name="TrashIcon" class="h-5 mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </div>
-
-      <BaseTable
-        ref="table"
-        :data="fetchData"
-        :columns="userTableColumns"
-        class="mt-3"
-      >
-        <!-- Select All Checkbox -->
-        <template #header>
-          <div class="absolute z-10 items-center left-6 top-2.5 select-none">
-            <BaseCheckbox
-              v-model="selectAllFieldStatus"
-              variant="primary"
-              @change="usersStore.selectAllUsers"
-            />
-          </div>
-        </template>
-        <template #cell-status="{ row }">
-          <div class="custom-control custom-checkbox">
-            <BaseCheckbox
-              :id="row.data.id"
-              v-model="selectField"
-              :value="row.data.id"
-              variant="primary"
-            />
-          </div>
-        </template>
-
-        <template #cell-name="{ row }">
-          <router-link
-            :to="{ path: `users/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.name }}
-          </router-link>
-        </template>
-
-        <template #cell-role="{ row }">
-          <span>{{ row.data.roles?.length ? row.data.roles[0].title : '-' }}</span>
-        </template>
-
-        <template #cell-phone="{ row }">
-          <span>{{ row.data.phone ? row.data.phone : '-' }} </span>
-        </template>
-
-        <template #cell-created_at="{ row }">
-          <span>{{ row.data.formatted_created_at }}</span>
-        </template>
-
-        <template v-if="userStore.currentUser.is_owner" #cell-actions="{ row }">
-          <UserDropdown
-            :row="row.data"
-            :table="table"
-            :load-data="refreshTable"
-          />
-        </template>
-      </BaseTable>
-    </div>
-
-    <!-- Pending Invitations Section -->
-    <div
-      v-if="userStore.currentUser.is_owner && usersStore.pendingInvitations.length > 0"
-      class="mt-8"
-    >
-      <h3 class="text-lg font-medium text-heading mb-4">
-        {{ $t('members.pending_invitations') }}
-      </h3>
-      <BaseCard>
-        <div class="divide-y divide-line-default">
-          <div
-            v-for="invitation in usersStore.pendingInvitations"
-            :key="invitation.id"
-            class="flex items-center justify-between px-6 py-4"
-          >
-            <div>
-              <p class="text-sm font-medium text-heading">
-                {{ invitation.email }}
-              </p>
-              <p class="text-sm text-muted">
-                {{ invitation.role?.title }} &middot;
-                {{ $t('members.invited_by') }}: {{ invitation.invited_by?.name }}
-              </p>
-            </div>
-            <BaseButton
-              variant="danger"
-              size="sm"
-              @click="cancelInvitation(invitation.id)"
-            >
-              {{ $t('members.cancel_invitation') }}
-            </BaseButton>
-          </div>
-        </div>
-      </BaseCard>
-    </div>
-
-    <InviteMemberModal
-      :show="showInviteModal"
-      @close="showInviteModal = false"
-    />
-  </BasePage>
-</template>
-
-<script setup>
-import { computed, onUnmounted, ref, reactive, onMounted, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
-import { useMembersStore } from '@/scripts/admin/stores/members'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import AstronautIcon from '@/scripts/components/icons/empty/AstronautIcon.vue'
-import UserDropdown from '@/scripts/admin/components/dropdowns/MemberIndexDropdown.vue'
-import InviteMemberModal from '@/scripts/admin/components/modal-components/InviteMemberModal.vue'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const notificationStore = useNotificationStore()
-const dialogStore = useDialogStore()
-const usersStore = useMembersStore()
-const userStore = useUserStore()
-
-const router = useRouter()
-
-let showFilters = ref(false)
-let showInviteModal = ref(false)
-let isFetchingInitialData = ref(true)
-let id = ref(null)
-let sortedBy = ref('created_at')
-let isLoading = ref(false)
-const { t } = useI18n()
-let table = ref(null)
-
-let filters = reactive({
-  name: '',
-  email: '',
-  phone: '',
-})
-
-const userTableColumns = computed(() => {
-  return [
-    {
-      key: 'status',
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-      sortable: false,
-    },
-    {
-      key: 'name',
-      label: t('members.name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    { key: 'email', label: 'Email' },
-    {
-      key: 'role',
-      label: t('members.role'),
-      sortable: false,
-    },
-    {
-      key: 'phone',
-      label: t('members.phone'),
-    },
-    {
-      key: 'created_at',
-      label: t('members.added_on'),
-    },
-    {
-      key: 'actions',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-const showEmptyScreen = computed(() => {
-  return !usersStore.totalUsers && !isFetchingInitialData.value
-})
-
-const selectField = computed({
-  get: () => usersStore.selectedUsers,
-  set: (value) => {
-    return usersStore.selectUser(value)
-  },
-})
-
-const selectAllFieldStatus = computed({
-  get: () => usersStore.selectAllField,
-  set: (value) => {
-    return usersStore.setSelectAllState(value)
-  },
-})
-
-watch(
-  filters,
-  () => {
-    setFilters()
-  },
-  { deep: true }
-)
-
-onMounted(() => {
-  usersStore.fetchUsers()
-  usersStore.fetchRoles()
-  usersStore.fetchPendingInvitations()
-})
-
-function cancelInvitation(id) {
-  usersStore.cancelInvitation(id)
-}
-
-onUnmounted(() => {
-  if (usersStore.selectAllField) {
-    usersStore.selectAllUsers()
-  }
-})
-
-function selectAllUser(params) {
-  usersStore.selectAllUsers()
-}
-
-function setFilters() {
-  refreshTable()
-}
-
-function refreshTable() {
-  table.value && table.value.refresh()
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    display_name: filters.name !== null ? filters.name : '',
-    phone: filters.phone !== null ? filters.phone : '',
-    email: filters.email !== null ? filters.email : '',
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  isFetchingInitialData.value = true
-
-  let response = await usersStore.fetchUsers(data)
-
-  isFetchingInitialData.value = false
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-
-function clearFilter() {
-  filters.name = ''
-  filters.email = ''
-  filters.phone = null
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-
-function removeUser(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('members.confirm_delete', 1),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      size: 'lg',
-      hideNoButton: false,
-    })
-    .then((res) => {
-      if (res) {
-        let user = [id]
-        usersStore.deleteUser(user).then((response) => {
-          if (response.data.success) {
-            table.value && table.value.refresh()
-            return true
-          }
-
-          if (response.data.error === 'user_attached') {
-            notificationStore.showNotification({
-              type: 'error',
-              message: t('members.user_attached_message'),
-            })
-            return true
-          }
-        })
-      }
-    })
-}
-
-function removeMultipleUsers() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('members.confirm_delete', 2),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      size: 'lg',
-      hideNoButton: false,
-    })
-    .then((res) => {
-      if (res) {
-        usersStore.deleteMultipleUsers().then((res) => {
-          if (res.data.success) {
-            table.value && table.value.refresh()
-          }
-        })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/views/modules/Index.vue b/resources/scripts/admin/views/modules/Index.vue
deleted file mode 100644
index 16f4b8c0..00000000
--- a/resources/scripts/admin/views/modules/Index.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<template>
-  <BasePage>
-    <BasePageHeader :title="$t('modules.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem :title="$t('modules.module', 2)" to="#" active />
-      </BaseBreadcrumb>
-    </BasePageHeader>
-
-    <!-- Modules Section  -->
-    <div v-if="hasApiToken && moduleStore.modules">
-      <BaseTabGroup class="-mb-5" @change="setStatusFilter">
-        <BaseTab :title="$t('general.all')" filter="" />
-        <BaseTab :title="$t('modules.installed')" filter="INSTALLED" />
-      </BaseTabGroup>
-
-      <!-- Modules Card Placeholder  -->
-      <div
-        v-if="isFetchingModule"
-        class="
-          grid
-          mt-6
-          w-full
-          grid-cols-1
-          items-start
-          gap-6
-          lg:grid-cols-2
-          xl:grid-cols-3
-        "
-      >
-        <ModuleCardPlaceholder />
-        <ModuleCardPlaceholder />
-        <ModuleCardPlaceholder />
-      </div>
-
-      <!-- Modules Card  -->
-      <div v-else>
-        <div
-          v-if="modules && modules.length"
-          class="
-            grid
-            mt-6
-            w-full
-            grid-cols-1
-            items-start
-            gap-6
-            lg:grid-cols-2
-            xl:grid-cols-3
-          "
-        >
-          <div v-for="(moduleData, idx) in modules" :key="idx">
-            <ModuleCard :data="moduleData" />
-          </div>
-        </div>
-        <div v-else class="mt-24">
-          <label class="flex items-center justify-center text-muted">
-            {{ $t('modules.no_modules_installed') }}
-          </label>
-        </div>
-      </div>
-    </div>
-
-    <BaseCard v-else class="mt-6">
-      <h6 class="text-heading text-lg font-medium">
-        {{ $t('modules.connect_installation') }}
-      </h6>
-      <p class="mt-1 text-sm text-muted">
-        {{
-          $t('modules.api_token_description', {
-            url: globalStore.config.base_url.replace(/^http:\/\//, ''),
-          })
-        }}
-      </p>
-
-      <!-- Api Token Form  -->
-      <div class="grid lg:grid-cols-2 mt-6">
-        <form action="" class="mt-6" @submit.prevent="submitApiToken">
-          <BaseInputGroup
-            :label="$t('modules.api_token')"
-            required
-            :error="v$.api_token.$error && v$.api_token.$errors[0].$message"
-          >
-            <BaseInput
-              v-model="moduleStore.currentUser.api_token"
-              :invalid="v$.api_token.$error"
-              @input="v$.api_token.$touch()"
-            />
-          </BaseInputGroup>
-
-          <div class="flex space-x-2">
-            <BaseButton class="mt-6" :loading="isSaving" type="submit">
-              <template #left="slotProps">
-                <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-              </template>
-              {{ $t('general.save') }}
-            </BaseButton>
-
-            <a
-              :href="`${globalStore.config.base_url}/auth/customer/register`"
-              class="mt-6 block"
-              target="_blank"
-            >
-              <BaseButton variant="primary-outline" type="button">
-                {{ $t('modules.sign_up_and_get_token') }}
-              </BaseButton>
-            </a>
-          </div>
-        </form>
-      </div>
-    </BaseCard>
-  </BasePage>
-</template>
-
-<script setup>
-import { useModuleStore } from '@/scripts/admin/stores/module'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
-import {
-  required,
-  minLength,
-  maxLength,
-  helpers,
-  requiredUnless,
-} from '@vuelidate/validators'
-import ModuleCard from './partials/ModuleCard.vue'
-import ModuleCardPlaceholder from './partials/ModuleCardPlaceholder.vue'
-import { useVuelidate } from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-
-const moduleStore = useModuleStore()
-const globalStore = useGlobalStore()
-const activeTab = ref('')
-
-const { t } = useI18n()
-let isSaving = ref(false)
-let isFetchingModule = ref(false)
-
-const rules = computed(() => {
-  return {
-    api_token: {
-      required: helpers.withMessage(t('validation.required'), required),
-      minLength: helpers.withMessage(
-        t('validation.name_min_length', { count: 3 }),
-        minLength(3)
-      ),
-    },
-  }
-})
-
-const hasApiToken = computed(() => {
-  if (moduleStore.apiToken) {
-    fetchModulesData()
-    return true
-  }
-
-  return false
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => moduleStore.currentUser)
-)
-
-const modules = computed(() => {
-  if (activeTab.value === 'INSTALLED') {
-    return moduleStore.modules.filter((_m) => _m.installed)
-  }
-
-  return moduleStore.modules
-})
-
-async function fetchModulesData() {
-  isFetchingModule.value = true
-
-  await moduleStore.fetchModules().then(() => {
-    isFetchingModule.value = false
-  })
-}
-
-async function submitApiToken() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-
-  moduleStore
-    .checkApiToken(moduleStore.currentUser.api_token)
-    .then((response) => {
-      if (response.data.success) {
-        saveApiTokenToSettings()
-        return
-      }
-      isSaving.value = false
-      return
-    })
-}
-
-async function saveApiTokenToSettings() {
-  try {
-    await globalStore
-      .updateGlobalSettings({
-        data: {
-          settings: {
-            api_token: moduleStore.currentUser.api_token,
-          },
-        },
-        message: 'settings.preferences.updated_message',
-      })
-      .then((response) => {
-        if (response.data.success) {
-          moduleStore.apiToken = moduleStore.currentUser.api_token
-          return
-        }
-      })
-
-    isSaving.value = false
-  } catch (err) {
-    isSaving.value = false
-    console.error(err)
-    return
-  }
-}
-
-function setStatusFilter(data) {
-  activeTab.value = data.filter
-}
-</script>
diff --git a/resources/scripts/admin/views/modules/View.vue b/resources/scripts/admin/views/modules/View.vue
deleted file mode 100644
index a88df3b3..00000000
--- a/resources/scripts/admin/views/modules/View.vue
+++ /dev/null
@@ -1,1042 +0,0 @@
-<template>
-  <ModulePlaceholder v-if="isFetchingInitialData" />
-  <BasePage v-else class="bg-surface">
-    <BasePageHeader :title="moduleData.name">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem :title="$t('modules.title')" to="/admin/modules" />
-        <BaseBreadcrumbItem :title="moduleData.name" to="#" active />
-      </BaseBreadcrumb>
-    </BasePageHeader>
-    <!-- Main Content -->
-    <div
-      class="
-        lg:grid lg:grid-rows-1 lg:grid-cols-7 lg:gap-x-8 lg:gap-y-10
-        xl:gap-x-16
-        mt-6
-      "
-    >
-      <!-- Product image -->
-      <div class="lg:row-end-1 lg:col-span-4">
-        <div class="flex flex-col-reverse">
-          <div
-            class="hidden mt-6 w-full max-w-2xl mx-auto sm:block lg:max-w-none"
-          >
-            <div
-              class="grid grid-cols-3 xl:grid-cols-4 gap-6"
-              aria-orientation="horizontal"
-              role="tablist"
-            >
-              <button
-                v-if="thumbnail && videoUrl"
-                :class="[
-                  'relative  md:h-24 lg:h-36 rounded hover:bg-hover',
-                  {
-                    'outline-hidden ring-3 ring-offset-1 ring-primary-500':
-                      displayVideo,
-                  },
-                ]"
-                type="button"
-                @click="setDisplayVideo"
-              >
-                <span class="absolute inset-0 rounded-md overflow-hidden">
-                  <img
-                    :src="thumbnail"
-                    alt=""
-                    class="w-full h-full object-center object-cover"
-                  />
-                </span>
-                <span
-                  class="
-                    ring-transparent
-                    absolute
-                    inset-0
-                    rounded-md
-                    ring-2 ring-offset-2
-                    pointer-events-none
-                  "
-                  aria-hidden="true"
-                ></span>
-              </button>
-
-              <button
-                v-for="(screenshot, ssIndx) in displayImages"
-                id="tabs-1-tab-1"
-                :key="ssIndx"
-                :class="[
-                  'relative  md:h-24 lg:h-36 rounded hover:bg-hover',
-                  {
-                    'outline-hidden ring-3 ring-offset-1 ring-primary-500':
-                      displayImage === screenshot.url,
-                  },
-                ]"
-                type="button"
-                @click="setDisplayImage(screenshot.url)"
-              >
-                <span class="absolute inset-0 rounded-md overflow-hidden">
-                  <img
-                    :src="screenshot.url"
-                    alt=""
-                    class="w-full h-full object-center object-cover"
-                  />
-                </span>
-                <span
-                  class="
-                    ring-transparent
-                    absolute
-                    inset-0
-                    rounded-md
-                    ring-2 ring-offset-2
-                    pointer-events-none
-                  "
-                  aria-hidden="true"
-                ></span>
-              </button>
-            </div>
-          </div>
-
-          <div v-if="displayVideo" class="aspect-w-4 aspect-h-3">
-            <iframe
-              :src="videoUrl"
-              class="sm:rounded-lg"
-              frameborder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowfullscreen
-            >
-            </iframe>
-          </div>
-
-          <div
-            v-else
-            class="aspect-w-4 aspect-h-3 rounded-lg bg-surface-tertiary overflow-hidden"
-          >
-            <img
-              :src="displayImage"
-              alt="Module Images"
-              class="w-full h-full object-center object-cover sm:rounded-lg"
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Product details -->
-      <div
-        class="
-          max-w-2xl
-          mx-auto
-          mt-10
-          lg:max-w-none lg:mt-0 lg:row-end-2 lg:row-span-2 lg:col-span-3
-          w-full
-        "
-      >
-        <!-- Average Rating -->
-
-        <h3 class="sr-only">Reviews</h3>
-
-        <div class="flex items-center">
-          <BaseRating :rating="averageRating" />
-        </div>
-        <p class="sr-only">4 out of 5 stars</p>
-
-        <!-- Module Name and Version -->
-        <div class="flex flex-col-reverse">
-          <div class="mt-4">
-            <h1
-              class="
-                text-2xl
-                font-extrabold
-                tracking-tight
-                text-heading
-                sm:text-3xl
-              "
-            >
-              {{ moduleData.name }}
-            </h1>
-
-            <h2 id="information-heading" class="sr-only">
-              Product information
-            </h2>
-
-            <p
-              v-if="moduleData.latest_module_version"
-              class="text-sm text-muted mt-2"
-            >
-              {{ $t('modules.version') }}
-              {{ moduleVersion }} ({{ $t('modules.last_updated') }}
-              {{ updatedAt }})
-            </p>
-          </div>
-        </div>
-
-        <!-- Module Description  -->
-        <div
-          class="prose prose-sm max-w-none text-muted text-sm my-10"
-          v-html="moduleData.long_description"
-        />
-
-        <!-- Module Pricing -->
-        <div v-if="!moduleData.purchased">
-          <RadioGroup v-model="selectedPlan">
-            <RadioGroupLabel class="sr-only"> Pricing plans </RadioGroupLabel>
-            <div class="relative bg-surface rounded-md -space-y-px">
-              <RadioGroupOption
-                v-for="(size, sizeIdx) in modulePrice"
-                :key="size.name"
-                v-slot="{ checked, active }"
-                as="template"
-                :value="size"
-              >
-                <div
-                  :class="[
-                    sizeIdx === 0 ? 'rounded-tl-md rounded-tr-md' : '',
-                    sizeIdx === modulePrice.length - 1
-                      ? 'rounded-bl-md rounded-br-md'
-                      : '',
-                    checked
-                      ? 'bg-primary-50 border-primary-200 z-10'
-                      : 'border-line-default',
-                    'relative border p-4 flex flex-col cursor-pointer md:pl-4 md:pr-6 md:grid md:grid-cols-2 focus:outline-hidden',
-                  ]"
-                >
-                  <div class="flex items-center text-sm">
-                    <span
-                      :class="[
-                        checked
-                          ? 'bg-primary-600 border-transparent'
-                          : 'bg-surface border-line-strong',
-                        active ? 'ring-2 ring-offset-2 ring-primary-500' : '',
-                        'h-4 w-4 rounded-full border flex items-center justify-center',
-                      ]"
-                      aria-hidden="true"
-                    >
-                      <span class="rounded-full bg-surface w-1.5 h-1.5" />
-                    </span>
-                    <RadioGroupLabel
-                      as="span"
-                      :class="[
-                        checked ? 'text-primary-900' : 'text-heading',
-                        'ml-3 font-medium',
-                      ]"
-                    >
-                      {{ size.name }}
-                    </RadioGroupLabel>
-                  </div>
-                  <RadioGroupDescription
-                    class="ml-6 pl-1 text-base md:ml-0 md:pl-0 md:text-center"
-                  >
-                    <span
-                      :class="[
-                        checked ? 'text-primary-900' : 'text-heading',
-                        'font-medium',
-                      ]"
-                    >
-                      $ {{ size.price }}
-                    </span>
-                  </RadioGroupDescription>
-                </div>
-              </RadioGroupOption>
-            </div>
-          </RadioGroup>
-        </div>
-
-        <!-- Button Section  -->
-
-        <!-- If Module is not purchased -->
-        <a
-          v-if="!moduleData.purchased"
-          :href="`${globalStore.config.base_url}/modules/${moduleData.slug}`"
-          target="_blank"
-          class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2"
-        >
-          <BaseButton
-            size="xl"
-            class="items-center flex justify-center text-base mt-10"
-          >
-            <BaseIcon name="ShoppingCartIcon" class="mr-2" />
-            {{ $t('modules.buy_now') }}
-          </BaseButton>
-        </a>
-
-        <!-- When module is Purchased -->
-        <div v-else>
-          <!-- Module not installed -->
-          <div
-            v-if="!moduleData.installed"
-            class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2"
-          >
-            <BaseButton
-              v-if="moduleData.latest_module_version"
-              size="xl"
-              variant="primary-outline"
-              outline
-              :loading="isInstalling"
-              :disabled="isInstalling"
-              class="mr-4 flex items-center justify-center text-base"
-              @click="installModule()"
-            >
-              <BaseIcon v-if="!isInstalling" name="ArrowDownTrayIcon" class="mr-2" />
-              {{ $t('modules.install') }}
-            </BaseButton>
-          </div>
-
-          <!-- Module already installed -->
-          <div v-else-if="isModuleInstalled">
-            <!-- When new module version is available -->
-
-            <div class="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
-              <BaseButton
-                v-if="moduleData.update_available"
-                variant="primary"
-                size="xl"
-                :loading="isInstalling"
-                :disabled="isInstalling"
-                class="mr-4 flex items-center justify-center text-base"
-                @click="installModule()"
-              >
-                {{ $t('modules.update_to') }}
-                <span class="ml-2">{{ moduleData.latest_module_version }}</span>
-              </BaseButton>
-
-              <BaseButton
-                v-if="moduleData.enabled"
-                variant="danger"
-                size="xl"
-                :loading="isDisabling"
-                :disabled="isDisabling"
-                class="mr-4 flex items-center justify-center text-base"
-                @click="disableModule"
-              >
-                <BaseIcon v-if="!isDisabling" name="NoSymbolIcon" class="mr-2" />
-                {{ $t('modules.disable') }}
-              </BaseButton>
-              <BaseButton
-                v-else
-                variant="primary-outline"
-                size="xl"
-                :loading="isEnabling"
-                :disabled="isEnabling"
-                class="mr-4 flex items-center justify-center text-base"
-                @click="enableModule"
-              >
-                <BaseIcon v-if="!isEnabling" name="CheckIcon" class="mr-2" />
-                {{ $t('modules.enable') }}
-              </BaseButton>
-            </div>
-          </div>
-        </div>
-
-        <div class="mt-10"></div>
-
-        <!-- HighLights  -->
-        <div class="border-t border-line-default mt-10 pt-10">
-          <h3 class="text-sm font-medium text-heading">
-            {{ $t('modules.what_you_get') }}
-          </h3>
-          <div class="mt-4 prose prose-sm max-w-none text-muted">
-            <div
-              class="prose prose-sm max-w-none text-muted text-sm"
-              v-html="moduleData.highlights"
-            />
-          </div>
-        </div>
-        <div class="border-t border-line-default mt-10 pt-10">
-          <div
-            v-for="(link, key) in moduleData.links"
-            :key="key"
-            class="mb-4 last:mb-0 flex"
-          >
-            <BaseIcon :name="link.icon" class="mr-4" />
-            <a :href="link.link" class="text-primary-500" target="_blank">
-              {{ link.label }}
-            </a>
-          </div>
-        </div>
-        <!-- Installation Steps  -->
-        <div v-if="isInstalling" class="border-t border-line-default mt-10 pt-10">
-          <ul class="w-full p-0 list-none">
-            <li
-              v-for="step in installationSteps"
-              :key="step.stepUrl"
-              class="
-                flex
-                justify-between
-                w-full
-                py-3
-                border-b border-line-default border-solid
-                last:border-b-0
-              "
-            >
-              <p class="m-0 text-sm leading-8">
-                {{ $t(step.translationKey) }}
-              </p>
-              <div class="flex flex-row items-center">
-                <span v-if="step.time" class="mr-3 text-xs text-muted">
-                  {{ step.time }}
-                </span>
-                <span
-                  :class="statusClass(step)"
-                  class="block py-1 text-sm text-center uppercase rounded-full"
-                  style="width: 88px"
-                >
-                  {{ getStatus(step) }}
-                </span>
-              </div>
-            </li>
-          </ul>
-        </div>
-
-        <!-- Social Share  -->
-        <!-- <div class="border-t border-line-default mt-10 pt-10">
-          <h3 class="text-sm font-medium text-heading">Share</h3>
-          <ul role="list" class="flex items-center space-x-6 mt-4">
-            <li>
-              <a
-                href="#"
-                class="
-                  flex
-                  items-center
-                  justify-center
-                  w-6
-                  h-6
-                  text-subtle
-                  hover:text-muted
-                "
-              >
-                <span class="sr-only">Share on Facebook</span>
-                <svg
-                  class="w-5 h-5"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  aria-hidden="true"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-              </a>
-            </li>
-            <li>
-              <a
-                href="#"
-                class="
-                  flex
-                  items-center
-                  justify-center
-                  w-6
-                  h-6
-                  text-subtle
-                  hover:text-muted
-                "
-              >
-                <span class="sr-only">Share on Instagram</span>
-                <svg
-                  class="w-6 h-6"
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  aria-hidden="true"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-              </a>
-            </li>
-            <li>
-              <a
-                href="#"
-                class="
-                  flex
-                  items-center
-                  justify-center
-                  w-6
-                  h-6
-                  text-subtle
-                  hover:text-muted
-                "
-              >
-                <span class="sr-only">Share on Twitter</span>
-                <svg
-                  class="w-5 h-5"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  aria-hidden="true"
-                >
-                  <path
-                    d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"
-                  />
-                </svg>
-              </a>
-            </li>
-          </ul>
-        </div> -->
-      </div>
-
-      <div
-        class="
-          w-full
-          max-w-2xl
-          mx-auto
-          mt-16
-          lg:max-w-none lg:mt-0 lg:col-span-4
-        "
-      >
-        <TabGroup as="div">
-          <TabList class="-mb-px flex space-x-8 border-b border-line-default">
-            <Tab v-slot="{ selected }" as="template">
-              <button
-                :class="[
-                  selected
-                    ? 'border-primary-600 text-primary-600'
-                    : 'border-transparent text-body hover:text-heading hover:border-line-strong',
-                  'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
-                ]"
-              >
-                {{ $t('modules.customer_reviews') }}
-              </button>
-            </Tab>
-            <Tab v-slot="{ selected }" as="template">
-              <button
-                :class="[
-                  selected
-                    ? 'border-primary-600 text-primary-600'
-                    : 'border-transparent text-body hover:text-heading hover:border-line-strong',
-                  'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
-                ]"
-              >
-                {{ $t('modules.faq') }}
-              </button>
-            </Tab>
-            <Tab v-slot="{ selected }" as="template">
-              <button
-                :class="[
-                  selected
-                    ? 'border-primary-600 text-primary-600'
-                    : 'border-transparent text-body hover:text-heading hover:border-line-strong',
-                  'whitespace-nowrap py-6 border-b-2 font-medium text-sm',
-                ]"
-              >
-                {{ $t('modules.license') }}
-              </button>
-            </Tab>
-          </TabList>
-          <TabPanels as="template">
-            <!-- Customer Reviews  -->
-            <TabPanel class="-mb-10">
-              <h3 class="sr-only">Customer Reviews</h3>
-              <div v-if="moduleData.reviews.length">
-                <div
-                  v-for="(review, reviewIdx) in moduleData.reviews"
-                  :key="reviewIdx"
-                  class="flex text-sm text-muted space-x-4"
-                >
-                  <div class="flex-none py-10">
-                    <span
-                      class="
-                        inline-flex
-                        items-center
-                        justify-center
-                        h-12
-                        w-12
-                        rounded-full
-                        bg-surface-secondary0
-                      "
-                    >
-                      <span
-                        class="
-                          text-lg
-                          font-medium
-                          leading-none
-                          text-white
-                          uppercase
-                        "
-                        >{{ review.customer.name[0] }}</span
-                      >
-                    </span>
-                  </div>
-                  <div
-                    :class="[
-                      reviewIdx === 0 ? '' : 'border-t border-line-default',
-                      'py-10',
-                    ]"
-                  >
-                    <h3 class="font-medium text-heading">
-                      {{ review.customer.name }}
-                    </h3>
-                    <p>
-                      {{ moment(review.created_at).format('MMMM Do YYYY') }}
-                    </p>
-
-                    <div class="flex items-center mt-4">
-                      <BaseRating :rating="review.rating" />
-                    </div>
-
-                    <div
-                      class="mt-4 prose prose-sm max-w-none text-muted"
-                      v-html="review.feedback"
-                    />
-                  </div>
-                </div>
-              </div>
-              <div v-else class="flex w-full items-center justify-center">
-                <p class="text-muted mt-10 text-sm">
-                  {{ $t('modules.no_reviews_found') }}
-                </p>
-              </div>
-            </TabPanel>
-
-            <!-- FAQs  -->
-            <TabPanel as="dl" class="text-sm text-muted">
-              <h3 class="sr-only">Frequently Asked Questions</h3>
-
-              <template v-for="faq in moduleData.faq" :key="faq.question">
-                <dt class="mt-10 font-medium text-heading">
-                  {{ faq.question }}
-                </dt>
-                <dd class="mt-2 prose prose-sm max-w-none text-muted">
-                  <p>{{ faq.answer }}</p>
-                </dd>
-              </template>
-            </TabPanel>
-
-            <!-- License  -->
-            <TabPanel class="pt-10">
-              <h3 class="sr-only">License</h3>
-
-              <div
-                class="prose prose-sm max-w-none text-muted"
-                v-html="moduleData.license"
-              />
-            </TabPanel>
-          </TabPanels>
-        </TabGroup>
-      </div>
-    </div>
-
-    <!-- Other Modules -->
-    <div
-      v-if="otherModules && otherModules.length"
-      class="mt-24 sm:mt-32 lg:max-w-none"
-    >
-      <div class="flex items-center justify-between space-x-4">
-        <h2 class="text-lg font-medium text-heading">
-          {{ $t('modules.other_modules') }}
-        </h2>
-        <a
-          href="/admin/modules"
-          class="
-            whitespace-nowrap
-            text-sm
-            font-medium
-            text-primary-600
-            hover:text-primary-500
-          "
-          >{{ $t('modules.view_all')
-          }}<span aria-hidden="true"> &rarr;</span></a
-        >
-      </div>
-      <div
-        class="
-          mt-6
-          grid grid-cols-1
-          gap-x-8 gap-y-8
-          sm:grid-cols-2 sm:gap-y-10
-          lg:grid-cols-4
-        "
-      >
-        <div v-for="(other, moduleIdx) in otherModules" :key="moduleIdx">
-          <RecentModuleCard :data="other" />
-        </div>
-      </div>
-    </div>
-
-    <div class="p-6"></div>
-  </BasePage>
-</template>
-
-<script setup>
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
-import {
-  RadioGroup,
-  RadioGroupDescription,
-  RadioGroupLabel,
-  RadioGroupOption,
-} from '@headlessui/vue'
-import { useModuleStore } from '@/scripts/admin/stores/module'
-import { computed, onMounted, ref, watch, reactive } from 'vue'
-import { required, minLength, maxLength, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useRoute } from 'vue-router'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useI18n } from 'vue-i18n'
-import moment from 'moment'
-import http from '@/scripts/http'
-import ModulePlaceholder from './partials/ModulePlaceholder.vue'
-import RecentModuleCard from './partials/RecentModuleCard.vue'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-const globalStore = useGlobalStore()
-
-const moduleStore = useModuleStore()
-const notificationStore = useNotificationStore()
-const dialogStore = useDialogStore()
-
-const route = useRoute()
-const { t } = useI18n()
-let isInstalling = ref(false)
-let isFetchingInitialData = ref(true)
-let displayImage = ref('')
-let isEnabling = ref(false)
-let isDisabling = ref(false)
-let isUpdating = ref(false)
-
-loadData()
-
-watch(
-  () => route.params.slug,
-  async (newSlug) => {
-    loadData()
-  }
-)
-
-const moduleData = computed(() => {
-  return moduleStore.currentModule.data
-})
-
-const modulePrice = computed(() => {
-  let priceList = []
-
-  let monthlyPrice = reactive({
-    name: t('modules.monthly'),
-    price: moduleData?.value?.monthly_price / 100,
-  })
-
-  let yearlyPrice = reactive({
-    name: t('modules.yearly'),
-    price: moduleData?.value?.yearly_price / 100,
-  })
-
-  if (typeYearly.value) {
-    priceList.push(yearlyPrice)
-  } else if (typeMonthly.value) {
-    priceList.push(monthlyPrice)
-  } else {
-    priceList.push(monthlyPrice)
-    priceList.push(yearlyPrice)
-  }
-
-  return priceList
-})
-
-const typeYearly = computed(() => {
-  if (moduleData.value) {
-    return moduleData.value.type === 'YEARLY'
-  }
-
-  return false
-})
-
-const typeMonthly = computed(() => {
-  if (moduleData.value) {
-    return moduleData.value.type === 'MONTHLY'
-  }
-
-  return false
-})
-
-const isModuleInstalled = computed(() => {
-  if (moduleData.value.installed && moduleData.value.latest_module_version) {
-    return true
-  }
-  return false
-})
-
-const otherModules = computed(() => {
-  return moduleStore.currentModule.meta.modules
-})
-
-let updatedAt = computed(() => {
-  let latest = ref(moduleData.value.latest_module_version_updated_at)
-  let installed = ref(moduleData.value.installed_module_version_updated_at)
-
-  const date = installed.value ? installed.value : latest.value
-
-  return moment(date).format('MMMM Do YYYY')
-})
-
-let moduleVersion = computed(() => {
-  let latest = ref(moduleData.value.latest_module_version)
-  let installed = ref(moduleData.value.installed_module_version)
-
-  let data = installed.value ? installed.value : latest.value
-
-  return data
-})
-
-let averageRating = computed(() => {
-  return parseInt(moduleData.value.average_rating)
-})
-
-const displayImages = computed(() => {
-  let images = reactive([])
-
-  let cover = reactive({
-    id: null,
-    url: moduleData.value.cover,
-  })
-
-  images.push(cover)
-
-  if (moduleData.value.screenshots) {
-    moduleData.value.screenshots.forEach((image) => {
-      images.push(image)
-    })
-  }
-
-  return images
-})
-
-const displayVideo = ref(false)
-
-const thumbnail = ref(null)
-
-const videoUrl = ref(null)
-
-const selectedPlan = ref(modulePrice.value[0])
-
-const installationSteps = reactive([
-  {
-    translationKey: 'modules.download_zip_file',
-    stepUrl: '/api/v1/modules/download',
-    time: null,
-    started: false,
-    completed: false,
-  },
-  {
-    translationKey: 'modules.unzipping_package',
-    stepUrl: '/api/v1/modules/unzip',
-    time: null,
-    started: false,
-    completed: false,
-  },
-  {
-    translationKey: 'modules.copying_files',
-    stepUrl: '/api/v1/modules/copy',
-    time: null,
-    started: false,
-    completed: false,
-  },
-  {
-    translationKey: 'modules.completing_installation',
-    stepUrl: '/api/v1/modules/complete',
-    time: null,
-    started: false,
-    completed: false,
-  },
-])
-
-async function installModule() {
-  let path = null
-
-  for (let index = 0; index < installationSteps.length; index++) {
-    let currentStep = installationSteps[index]
-
-    try {
-      isInstalling.value = true
-      currentStep.started = true
-      let updateParams = {
-        version: moduleData.value.latest_module_version,
-        path: path || null,
-        module: moduleData.value.module_name,
-      }
-
-      let requestResponse = await http.post(currentStep.stepUrl, updateParams)
-
-      currentStep.completed = true
-      if (requestResponse.data) {
-        path = requestResponse.data.path
-      }
-
-      if (!requestResponse.data.success) {
-        let displayMsg = ref('')
-
-        if (
-          requestResponse.data.message === 'invoiceshelf_version_is_not_supported'
-        ) {
-          displayMsg.value = t('modules.version_not_supported', {
-            version: requestResponse.data.min_invoiceshelf_version,
-          })
-        } else {
-          displayMsg.value = getErrorMessage(requestResponse.data.message)
-        }
-
-        notificationStore.showNotification({
-          type: 'error',
-          message: displayMsg.value,
-        })
-
-        isInstalling.value = false
-        currentStep.started = false
-        currentStep.completed = true
-        return false
-      }
-      if (currentStep.translationKey == 'modules.completing_installation') {
-        isInstalling.value = false
-        notificationStore.showNotification({
-          type: 'success',
-          message: t('modules.install_success'),
-        })
-
-        setTimeout(() => {
-          location.reload()
-        }, 1500)
-      }
-    } catch (error) {
-      isInstalling.value = false
-      currentStep.started = false
-      currentStep.completed = true
-      return false
-    }
-  }
-}
-
-function getErrorMessage(message) {
-  let msg = ref('')
-
-  switch (message) {
-    case 'module_not_found':
-      msg.value = t('modules.module_not_found')
-      break
-
-    case 'module_not_purchased':
-      msg.value = t('modules.module_not_purchased')
-      break
-
-    case 'version_not_supported':
-      msg.value = t('modules.version_not_supported')
-      break
-
-    default:
-      msg.value = message
-      break
-  }
-
-  return msg
-}
-
-async function loadData() {
-  if (!route.params.slug) {
-    return
-  }
-
-  isFetchingInitialData.value = true
-  await moduleStore.fetchModule(route.params.slug).then((response) => {
-    selectedPlan.value = modulePrice.value[0]
-
-    videoUrl.value = moduleData.value.video_link
-    thumbnail.value = moduleData.value.video_thumbnail
-
-    if (videoUrl.value) {
-      setDisplayVideo()
-      isFetchingInitialData.value = false
-      return
-    }
-    displayImage.value = moduleData.value.cover
-    isFetchingInitialData.value = false
-    return
-  })
-}
-
-function statusClass(step) {
-  const status = getStatus(step)
-
-  switch (status) {
-    case 'pending':
-      return 'text-primary-800 bg-surface-muted'
-    case 'finished':
-      return 'text-teal-500 bg-teal-100'
-    case 'running':
-      return 'text-blue-400 bg-blue-100'
-    case 'error':
-      return 'text-danger bg-red-200'
-    default:
-      return ''
-  }
-}
-
-function disableModule() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('modules.disable_warning'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        isDisabling.value = true
-        await moduleStore
-          .disableModule(moduleData.value.module_name)
-          .then((res) => {
-            if (res.data.success) {
-              moduleData.value.enabled = 0
-              isDisabling.value = false
-
-              setTimeout(() => {
-                location.reload()
-              }, 1500)
-              return
-            }
-          })
-        isDisabling.value = false
-        return
-      }
-    })
-}
-
-async function enableModule() {
-  isEnabling.value = true
-
-  await moduleStore.enableModule(moduleData.value.module_name).then((res) => {
-    if (res.data.success) {
-      moduleData.value.enabled = 1
-
-      setTimeout(() => {
-        location.reload()
-      }, 1500)
-    }
-    isEnabling.value = false
-    return
-  })
-  isEnabling.value = false
-  return
-}
-
-function getStatus(step) {
-  if (step.started && step.completed) {
-    return 'finished'
-  } else if (step.started && !step.completed) {
-    return 'running'
-  } else if (!step.started && !step.completed) {
-    return 'pending'
-  } else {
-    return 'error'
-  }
-}
-
-function setDisplayImage(url) {
-  displayVideo.value = false
-  displayImage.value = url
-}
-
-function setDisplayVideo() {
-  displayVideo.value = true
-  displayImage.value = null
-}
-</script>
diff --git a/resources/scripts/admin/views/modules/partials/ModuleCard.vue b/resources/scripts/admin/views/modules/partials/ModuleCard.vue
deleted file mode 100644
index d4134e15..00000000
--- a/resources/scripts/admin/views/modules/partials/ModuleCard.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<template>
-  <div
-    class="
-      relative
-      shadow-md
-      border-2 border-line-default/60
-      rounded-lg
-      cursor-pointer
-      overflow-hidden
-      h-100
-    "
-    @click="$router.push(`/admin/modules/${data.slug}`)"
-  >
-    <div
-      v-if="data.purchased"
-      class="absolute mt-5 px-6 w-full flex justify-end"
-    >
-      <label
-        v-if="data.purchased"
-        class="
-          bg-white/75
-          text-xs
-          px-3
-          py-1
-          font-semibold
-          tracking-wide
-          rounded
-        "
-      >
-        {{ $t('modules.purchased') }}
-      </label>
-      <label
-        v-if="data.installed"
-        class="
-          ml-2
-          bg-white/75
-          text-xs
-          px-3
-          py-1
-          font-semibold
-          tracking-wide
-          rounded
-        "
-      >
-        <span v-if="data.update_available">
-          {{ $t('modules.update_available') }}
-        </span>
-        <span v-else>
-          {{ $t('modules.installed') }}
-        </span>
-      </label>
-    </div>
-    <img
-      class="lg:h-64 md:h-48 w-full object-cover object-center"
-      :src="data.cover"
-      alt="cover"
-    />
-    <div class="px-6 py-5 flex flex-col bg-surface-secondary flex-1 justify-between">
-      <span
-        class="
-          text-lg
-          sm:text-2xl
-          font-medium
-          whitespace-nowrap
-          truncate
-          text-primary-500
-        "
-      >
-        {{ data.name }}
-      </span>
-      <div v-if="data.author_avatar" class="flex items-center mt-2">
-        <img
-          class="hidden h-10 w-10 rounded-full sm:inline-block mr-2"
-          :src="
-            data.author_avatar
-              ? data.author_avatar
-              : 'http://localhost:3000$images/default-avatar.jpg'
-          "
-          alt=""
-        />
-        <span>by</span>
-        <span class="ml-2 text-base font-semibold truncate"
-          >{{ data.author_name }}
-        </span>
-      </div>
-      <base-text
-        :text="data.short_description"
-        class="pt-4 text-muted h-16 line-clamp-2"
-      >
-      </base-text>
-      <div
-        class="
-          flex
-          justify-between
-          mt-4
-          flex-col
-          space-y-2
-          sm:space-y-0 sm:flex-row
-        "
-      >
-        <div><BaseRating :rating="averageRating" /></div>
-        <div
-          class="
-            text-xl
-            md:text-2xl
-            font-semibold
-            whitespace-nowrap
-            text-primary-500
-          "
-        >
-          $
-          {{
-            data.monthly_price
-              ? data.monthly_price / 100
-              : data.yearly_price / 100
-          }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-import { computed, onMounted, ref, watch, reactive } from 'vue'
-
-const { t } = useI18n()
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-    required: true,
-  },
-})
-
-let averageRating = computed(() => {
-  return parseInt(props.data.average_rating)
-})
-</script>
diff --git a/resources/scripts/admin/views/modules/partials/ModuleCardPlaceholder.vue b/resources/scripts/admin/views/modules/partials/ModuleCardPlaceholder.vue
deleted file mode 100644
index e500594e..00000000
--- a/resources/scripts/admin/views/modules/partials/ModuleCardPlaceholder.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <BaseContentPlaceholders>
-    <div
-      class="
-        shadow-md
-        border-2 border-line-default/60
-        rounded-lg
-        cursor-pointer
-        overflow-hidden
-        h-100
-      "
-    >
-      <BaseContentPlaceholdersBox class="h-48 lg:h-64 md:h-48 w-full" rounded />
-      <div class="px-6 py-5 flex flex-col bg-surface-secondary flex-1 justify-between">
-        <BaseContentPlaceholdersText class="w-32 h-8" :lines="1" rounded />
-        <div class="flex items-center mt-2">
-          <BaseContentPlaceholdersBox
-            class="h-10 w-10 rounded-full sm:inline-block mr-2"
-          />
-          <div>
-            <BaseContentPlaceholdersText
-              class="w-32 h-8 ml-2"
-              :lines="1"
-              rounded
-            />
-          </div>
-        </div>
-        <BaseContentPlaceholdersText
-          class="pt-4 w-full h-16"
-          :lines="1"
-          rounded
-        />
-        <div
-          class="
-            flex
-            justify-between
-            mt-4
-            flex-col
-            space-y-2
-            sm:space-y-0 sm:flex-row
-          "
-        >
-          <BaseContentPlaceholdersText class="w-32 h-8" :lines="1" rounded />
-          <BaseContentPlaceholdersText class="w-32 h-8" :lines="1" rounded />
-        </div>
-      </div>
-    </div>
-  </BaseContentPlaceholders>
-</template>
\ No newline at end of file
diff --git a/resources/scripts/admin/views/modules/partials/ModulePlaceholder.vue b/resources/scripts/admin/views/modules/partials/ModulePlaceholder.vue
deleted file mode 100644
index 7bf138ea..00000000
--- a/resources/scripts/admin/views/modules/partials/ModulePlaceholder.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <BaseContentPlaceholders rounded>
-    <BasePage class="bg-surface">
-
-      <!-- Breadcrumb-->
-      <BaseContentPlaceholdersText class="mt-4 h-8 w-40" :lines="1"/>
-      <BaseContentPlaceholdersText class="mt-4 h-8 w-56 mb-4" :lines="1"/>
-
-      <!-- Product -->
-      <div class="lg:grid lg:grid-rows-1 lg:grid-cols-7 lg:gap-x-8 lg:gap-y-10 xl:gap-x-16 mt-6">
-      
-        <!-- Product image -->
-        <div class="lg:row-end-1 lg:col-span-4">
-          <BaseContentPlaceholdersBox class="h-96 sm:w-full" rounded />
-        </div>
-
-        <!-- Product details -->
-        <div
-          class="
-            max-w-2xl
-            mx-auto
-            mt-10
-            lg:max-w-none lg:mt-0 lg:row-end-2 lg:row-span-2 lg:col-span-3
-            w-full
-          "
-        >
-          <!-- Average Rating -->
-          <div>
-            <h3 class="sr-only">Reviews</h3>
-            <BaseContentPlaceholdersText class="w-32 h-8" :lines="1" />
-
-            <p class="sr-only">4 out of 5 stars</p>
-          </div>
-
-          <!-- Module Name and Version -->
-          <div class="flex flex-col-reverse">
-            <div class="mt-4">
-              <BaseContentPlaceholdersText
-                class="w-48 xl:w-80 h-12"
-                :lines="1"
-              />
-              <BaseContentPlaceholdersText
-                class="w-64 xl:w-80 h-8 mt-2"
-                :lines="1"
-              />
-            </div>
-          </div>
-
-          <!-- Module Description  -->
-          <div>
-            <BaseContentPlaceholdersText
-              class="w-full h-24 my-10"
-              :lines="1"
-            />
-          </div>
-
-          <!-- Module Pricing -->
-          <div>
-            <BaseContentPlaceholdersText
-              class="w-full h-24 mt-6 mb-6"
-              :lines="1"
-            />
-          </div>
-
-          <!-- Button Section  -->
-          <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2">
-            <BaseContentPlaceholdersText class="w-full h-14" :lines="1" />
-          </div>
-
-          <div class="mt-10"></div>
-
-          <!-- HightLight  -->
-          <div class="border-t border-line-default mt-10 pt-10">
-            <div>
-              <BaseContentPlaceholdersText class="w-24 h-6" :lines="1" />
-              <BaseContentPlaceholdersText
-                class="mt-4 w-full h-20"
-                :lines="1"
-              />
-            </div>
-          </div>
-
-          <!-- Social Share  -->
-          <div class="border-t border-line-default mt-10 pt-10">
-            <BaseContentPlaceholdersText class="h-6 w-24" :lines="1" />
-            <BaseContentPlaceholdersText class="h-10 w-32 mt-4" :lines="1" />
-          </div>
-        </div>
-
-        <div
-          class="
-            w-full
-            max-w-2xl
-            mx-auto
-            mt-16
-            lg:max-w-none lg:mt-0 lg:col-span-4
-          "
-        >
-          <BaseContentPlaceholdersBox class="h-96 sm:w-full" rounded />
-        </div>
-      </div>
-    </BasePage>
-  </BaseContentPlaceholders>
-</template>
diff --git a/resources/scripts/admin/views/modules/partials/RecentModuleCard.vue b/resources/scripts/admin/views/modules/partials/RecentModuleCard.vue
deleted file mode 100644
index dcd88651..00000000
--- a/resources/scripts/admin/views/modules/partials/RecentModuleCard.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <router-link class="relative group" :to="`/admin/modules/${data.slug}`">
-    <div class="relative group">
-      <div class="aspect-w-4 aspect-h-3 rounded-lg overflow-hidden bg-surface-tertiary">
-        <img :src="data.cover" class="object-center object-cover" />
-        <div
-          class="flex items-end opacity-0 p-4 group-hover:opacity-100"
-          aria-hidden="true"
-        >
-          <div
-            class="
-              w-full
-              bg-white/75
-              backdrop-filter backdrop-blur
-              py-2
-              px-4
-              rounded-md
-              text-sm
-              font-medium
-              text-primary-500 text-center
-            "
-          >
-            {{ $t('modules.view_module') }}
-          </div>
-        </div>
-      </div>
-      <div
-        class="
-          mt-4
-          flex
-          items-center
-          justify-between
-          text-base
-          font-medium
-          text-heading
-          space-x-8
-          cursor-pointer
-        "
-      >
-        <h3 class="text-primary-500 font-bold">
-          <span aria-hidden="true" class="absolute inset-0"></span>
-          {{ data.name }}
-        </h3>
-        <p class="text-primary-500 font-bold">
-          $ {{ data.monthly_price / 100 }}
-        </p>
-      </div>
-    </div>
-  </router-link>
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-const props = defineProps({
-  data: {
-    type: Object,
-    default: null,
-    required: true,
-  },
-})
-</script>
diff --git a/resources/scripts/admin/views/payments/Create.vue b/resources/scripts/admin/views/payments/Create.vue
deleted file mode 100644
index 55c4de15..00000000
--- a/resources/scripts/admin/views/payments/Create.vue
+++ /dev/null
@@ -1,531 +0,0 @@
-<template>
-  <PaymentModeModal />
-
-  <BasePage class="relative payment-create">
-    <form action="" @submit.prevent="submitPaymentData">
-      <BasePageHeader :title="pageTitle" class="mb-5">
-        <BaseBreadcrumb>
-          <BaseBreadcrumbItem
-            :title="$t('general.home')"
-            to="/admin/dashboard"
-          />
-          <BaseBreadcrumbItem
-            :title="$t('payments.payment', 2)"
-            to="/admin/payments"
-          />
-          <BaseBreadcrumbItem :title="pageTitle" to="#" active />
-        </BaseBreadcrumb>
-
-        <template #actions>
-          <BaseButton
-            :loading="isSaving"
-            :disabled="isSaving"
-            variant="primary"
-            type="submit"
-            class="hidden sm:flex"
-          >
-            <template #left="slotProps">
-              <BaseIcon
-                v-if="!isSaving"
-                name="ArrowDownOnSquareIcon"
-                :class="slotProps.class"
-              />
-            </template>
-            {{
-              isEdit
-                ? $t('payments.update_payment')
-                : $t('payments.save_payment')
-            }}
-          </BaseButton>
-        </template>
-      </BasePageHeader>
-
-      <BaseCard>
-        <BaseInputGrid>
-          <BaseInputGroup
-            :label="$t('payments.date')"
-            :content-loading="isLoadingContent"
-            required
-            :error="
-              v$.currentPayment.payment_date.$error &&
-              v$.currentPayment.payment_date.$errors[0].$message
-            "
-          >
-            <BaseDatePicker
-              v-model="paymentStore.currentPayment.payment_date"
-              :content-loading="isLoadingContent"
-              :calendar-button="true"
-              calendar-button-icon="calendar"
-              :invalid="v$.currentPayment.payment_date.$error"
-              @update:modelValue="v$.currentPayment.payment_date.$touch()"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('payments.payment_number')"
-            :content-loading="isLoadingContent"
-            required
-          >
-            <BaseInput
-              v-model="paymentStore.currentPayment.payment_number"
-              :content-loading="isLoadingContent"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('payments.customer')"
-            :error="
-              v$.currentPayment.customer_id.$error &&
-              v$.currentPayment.customer_id.$errors[0].$message
-            "
-            :content-loading="isLoadingContent"
-            required
-          >
-            <BaseCustomerSelectInput
-              v-model="paymentStore.currentPayment.customer_id"
-              :content-loading="isLoadingContent"
-              v-if="!isLoadingContent"
-              :invalid="v$.currentPayment.customer_id.$error"
-              :placeholder="$t('customers.select_a_customer')"
-              show-action
-              @update:modelValue="
-                selectNewCustomer(paymentStore.currentPayment.customer_id)
-              "
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :content-loading="isLoadingContent"
-            :label="$t('payments.invoice')"
-            :help-text="
-              selectedInvoice
-                ? `${t('payments.amount_due')}: ${
-                    paymentStore.currentPayment.maxPayableAmount / 100
-                  }`
-                : ''
-            "
-          >
-            <BaseMultiselect
-              v-model="paymentStore.currentPayment.invoice_id"
-              :content-loading="isLoadingContent"
-              value-prop="id"
-              track-by="invoice_number"
-              label="invoice_number"
-              :options="invoiceList"
-              :loading="isLoadingInvoices"
-              :placeholder="$t('invoices.select_invoice')"
-              @select="onSelectInvoice"
-            >
-              <template #singlelabel="{ value }">
-                <div class="absolute left-3.5">
-                  {{ value.invoice_number }} ({{
-                    utils.formatMoney(value.total, value.customer.currency)
-                  }})
-                </div>
-              </template>
-
-              <template #option="{ option }">
-                {{ option.invoice_number }} ({{
-                  utils.formatMoney(option.total, option.customer.currency)
-                }})
-              </template>
-            </BaseMultiselect>
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('payments.amount')"
-            :content-loading="isLoadingContent"
-            :error="
-              v$.currentPayment.amount.$error &&
-              v$.currentPayment.amount.$errors[0].$message
-            "
-            required
-          >
-            <div class="relative w-full">
-              <BaseMoney
-                :key="paymentStore.currentPayment.currency"
-                v-model="amount"
-                :currency="paymentStore.currentPayment.currency"
-                :content-loading="isLoadingContent"
-                :invalid="v$.currentPayment.amount.$error"
-                @update:modelValue="v$.currentPayment.amount.$touch()"
-              />
-            </div>
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :content-loading="isLoadingContent"
-            :label="$t('payments.payment_mode')"
-          >
-            <BaseMultiselect
-              v-model="paymentStore.currentPayment.payment_method_id"
-              :content-loading="isLoadingContent"
-              label="name"
-              value-prop="id"
-              track-by="name"
-              :options="paymentStore.paymentModes"
-              :placeholder="$t('payments.select_payment_mode')"
-              searchable
-            >
-              <template #action>
-                <BaseSelectAction @click="addPaymentMode">
-                  <BaseIcon
-                    name="PlusIcon"
-                    class="h-4 mr-2 -ml-2 text-center text-primary-400"
-                  />
-                  {{ $t('settings.payment_modes.add_payment_mode') }}
-                </BaseSelectAction>
-              </template>
-            </BaseMultiselect>
-          </BaseInputGroup>
-
-          <ExchangeRateConverter
-            :store="paymentStore"
-            store-prop="currentPayment"
-            :v="v$.currentPayment"
-            :is-loading="isLoadingContent"
-            :is-edit="isEdit"
-            :customer-currency="paymentStore.currentPayment.currency_id"
-          />
-        </BaseInputGrid>
-
-        <!-- Payment Custom Fields -->
-        <PaymentCustomFields
-          type="Payment"
-          :is-edit="isEdit"
-          :is-loading="isLoadingContent"
-          :store="paymentStore"
-          store-prop="currentPayment"
-          :custom-field-scope="paymentValidationScope"
-          class="mt-6"
-        />
-
-        <!-- Payment Note field -->
-        <div class="relative mt-6">
-          <div
-            class="
-              z-20
-              float-right
-              text-sm
-              font-semibold
-              leading-5
-              text-primary-400
-            "
-          >
-            <SelectNotePopup type="Payment" @select="onSelectNote" />
-          </div>
-
-          <label class="mb-4 text-sm font-medium text-heading">
-            {{ $t('estimates.notes') }}
-          </label>
-
-          <BaseCustomInput
-            v-model="paymentStore.currentPayment.notes"
-            :content-loading="isLoadingContent"
-            :fields="PaymentFields"
-            class="mt-1"
-          />
-        </div>
-
-        <BaseButton
-          :loading="isSaving"
-          :content-loading="isLoadingContent"
-          variant="primary"
-          type="submit"
-          class="flex justify-center w-full mt-4 sm:hidden md:hidden"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              name="ArrowDownOnSquareIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{
-            isEdit ? $t('payments.update_payment') : $t('payments.save_payment')
-          }}
-        </BaseButton>
-      </BaseCard>
-    </form>
-  </BasePage>
-</template>
-
-<script setup>
-import ExchangeRateConverter from '@/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue'
-
-import {
-  ref,
-  reactive,
-  computed,
-  inject,
-  watchEffect,
-  onBeforeUnmount,
-} from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import {
-  required,
-  numeric,
-  helpers,
-  between,
-  requiredIf,
-  decimal,
-} from '@vuelidate/validators'
-
-import useVuelidate from '@vuelidate/core'
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import { usePaymentStore } from '@/scripts/admin/stores/payment'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-
-import SelectNotePopup from '@/scripts/admin/components/SelectNotePopup.vue'
-import PaymentCustomFields from '@/scripts/admin/components/custom-fields/CreateCustomFields.vue'
-import PaymentModeModal from '@/scripts/admin/components/modal-components/PaymentModeModal.vue'
-
-const route = useRoute()
-const router = useRouter()
-
-const paymentStore = usePaymentStore()
-const notificationStore = useNotificationStore()
-const customerStore = useCustomerStore()
-const customFieldStore = useCustomFieldStore()
-const companyStore = useCompanyStore()
-const modalStore = useModalStore()
-const invoiceStore = useInvoiceStore()
-const globalStore = useGlobalStore()
-
-const utils = inject('utils')
-const { t } = useI18n()
-
-let isSaving = ref(false)
-let isLoadingInvoices = ref(false)
-let invoiceList = ref([])
-const selectedInvoice = ref(null)
-
-const paymentValidationScope = 'newEstimate'
-
-const PaymentFields = reactive([
-  'customer',
-  'company',
-  'customerCustom',
-  'payment',
-  'paymentCustom',
-])
-
-const amount = computed({
-  get: () => paymentStore.currentPayment.amount / 100,
-  set: (value) => {
-    paymentStore.currentPayment.amount = Math.round(value * 100)
-  },
-})
-
-const isLoadingContent = computed(() => paymentStore.isFetchingInitialData)
-
-const isEdit = computed(() => route.name === 'payments.edit')
-
-const pageTitle = computed(() => {
-  if (isEdit.value) {
-    return t('payments.edit_payment')
-  }
-  return t('payments.new_payment')
-})
-
-const rules = computed(() => {
-  return {
-    currentPayment: {
-      customer_id: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      payment_date: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      amount: {
-        required: helpers.withMessage(t('validation.required'), required),
-        between: helpers.withMessage(
-          t('validation.payment_greater_than_due_amount'),
-          between(0, paymentStore.currentPayment.maxPayableAmount)
-        ),
-      },
-      exchange_rate: {
-        required: requiredIf(function () {
-          helpers.withMessage(t('validation.required'), required)
-          return paymentStore.showExchangeRate
-        }),
-        decimal: helpers.withMessage(
-          t('validation.valid_exchange_rate'),
-          decimal
-        ),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(rules, paymentStore, {
-  $scope: paymentValidationScope,
-})
-
-watchEffect(() => {
-  // fetch customer and its invoices
-  paymentStore.currentPayment.customer_id
-    ? onCustomerChange(paymentStore.currentPayment.customer_id)
-    : ''
-  if (route.query.customer) {
-    paymentStore.currentPayment.customer_id = route.query.customer
-  }
-})
-
-// Reset State on Create
-paymentStore.resetCurrentPayment()
-
-if (route.query.customer) {
-  paymentStore.currentPayment.customer_id = route.query.customer
-}
-
-paymentStore.fetchPaymentInitialData(isEdit.value)
-
-if (route.params.id && !isEdit.value) {
-  setInvoiceFromUrl()
-}
-
-async function addPaymentMode() {
-  modalStore.openModal({
-    title: t('settings.payment_modes.add_payment_mode'),
-    componentName: 'PaymentModeModal',
-  })
-}
-
-function onSelectNote(data) {
-  paymentStore.currentPayment.notes = '' + data.notes
-}
-
-async function setInvoiceFromUrl() {
-  let res = await invoiceStore.fetchInvoice(route?.params?.id)
-
-  paymentStore.currentPayment.customer_id = res.data.data.customer.id
-  paymentStore.currentPayment.invoice_id = res.data.data.id
-}
-
-async function onSelectInvoice(id) {
-  if (id) {
-    selectedInvoice.value = invoiceList.value.find((inv) => inv.id === id)
-
-    amount.value = selectedInvoice.value.due_amount / 100
-    paymentStore.currentPayment.maxPayableAmount =
-      selectedInvoice.value.due_amount
-  }
-}
-
-function onCustomerChange(customer_id) {
-  if (customer_id) {
-    let data = {
-      customer_id: customer_id,
-      status: 'DUE',
-      limit: 'all',
-    }
-
-    if (isEdit.value) {
-      data.status = ''
-    }
-
-    isLoadingInvoices.value = true
-
-    Promise.all([
-      invoiceStore.fetchInvoices(data),
-      customerStore.fetchCustomer(customer_id),
-    ])
-      .then(async ([res1, res2]) => {
-        if (res1) {
-          invoiceList.value = [...res1.data.data]
-        }
-
-        if (res2 && res2.data) {
-          paymentStore.currentPayment.selectedCustomer = res2.data.data
-          paymentStore.currentPayment.customer = res2.data.data
-          paymentStore.currentPayment.currency = res2.data.data.currency
-          if(isEdit.value && !customerStore.editCustomer && paymentStore.currentPayment.customer_id) {
-            customerStore.editCustomer = res2.data.data
-          }
-        }
-
-        if (paymentStore.currentPayment.invoice_id) {
-          selectedInvoice.value = invoiceList.value.find(
-            (inv) => inv.id === paymentStore.currentPayment.invoice_id
-          )
-
-          paymentStore.currentPayment.maxPayableAmount =
-            selectedInvoice.value.due_amount +
-            paymentStore.currentPayment.amount
-
-          if (amount.value === 0) {
-            amount.value = selectedInvoice.value.due_amount / 100
-          }
-        }
-
-        if (isEdit.value) {
-          // remove all invoices that are paid except currently selected invoice
-          invoiceList.value = invoiceList.value.filter((v) => {
-            return (
-              v.due_amount > 0 || v.id == paymentStore.currentPayment.invoice_id
-            )
-          })
-        }
-
-        isLoadingInvoices.value = false
-      })
-      .catch((error) => {
-        isLoadingInvoices.value = false
-        console.error(error, 'error')
-      })
-  }
-}
-onBeforeUnmount(() => {
-  paymentStore.resetCurrentPayment()
-  invoiceList.value = []
-  customerStore.editCustomer = null
-})
-
-async function submitPaymentData() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return false
-  }
-
-  isSaving.value = true
-
-  let data = {
-    ...paymentStore.currentPayment,
-  }
-
-  let response = null
-
-  try {
-    const action = isEdit.value
-      ? paymentStore.updatePayment
-      : paymentStore.addPayment
-
-    response = await action(data)
-
-    router.push(`/admin/payments/${response.data.data.id}/view`)
-  } catch (err) {
-    isSaving.value = false
-  }
-}
-
-function selectNewCustomer(id) {
-  let params = {
-    userId: id,
-  }
-
-  if (route.params.id) params.model_id = route.params.id
-
-  paymentStore.currentPayment.invoice_id = selectedInvoice.value = null
-  paymentStore.currentPayment.amount = 0
-  invoiceList.value = []
-  paymentStore.getNextNumber(params, true)
-}
-</script>
diff --git a/resources/scripts/admin/views/payments/Index.vue b/resources/scripts/admin/views/payments/Index.vue
deleted file mode 100644
index 2006ab1a..00000000
--- a/resources/scripts/admin/views/payments/Index.vue
+++ /dev/null
@@ -1,380 +0,0 @@
-<template>
-  <BasePage class="payments">
-    <SendPaymentModal />
-    <BasePageHeader :title="$t('payments.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem :title="$t('payments.payment', 2)" to="#" active />
-      </BaseBreadcrumb>
-
-      <template #actions>
-        <BaseButton
-          v-show="paymentStore.paymentTotalCount"
-          variant="primary-outline"
-          @click="toggleFilter"
-        >
-          {{ $t('general.filter') }}
-
-          <template #right="slotProps">
-            <BaseIcon
-              v-if="!showFilters"
-              :class="slotProps.class"
-              name="FunnelIcon"
-            />
-            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
-          </template>
-        </BaseButton>
-
-        <BaseButton
-          v-if="userStore.hasAbilities(abilities.CREATE_PAYMENT)"
-          variant="primary"
-          class="ml-4"
-          @click="$router.push('/admin/payments/create')"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="PlusIcon" :class="slotProps.class" />
-          </template>
-
-          {{ $t('payments.add_payment') }}
-        </BaseButton>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper :show="showFilters" class="mt-3" @clear="clearFilter">
-      <BaseInputGroup :label="$t('payments.customer')">
-        <BaseCustomerSelectInput
-          v-model="filters.customer_id"
-          :placeholder="$t('customers.type_or_click')"
-          value-prop="id"
-          label="name"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('payments.payment_number')">
-        <BaseInput v-model="filters.payment_number">
-          <template #left="slotProps">
-            <BaseIcon name="HashtagIcon" :class="slotProps.class" />
-          </template>
-        </BaseInput>
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('payments.payment_mode')">
-        <BaseMultiselect
-          v-model="filters.payment_mode"
-          value-prop="id"
-          track-by="name"
-          :filter-results="false"
-          label="name"
-          resolve-on-load
-          :delay="500"
-          searchable
-          :options="searchPayment"
-        />
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <BaseEmptyPlaceholder
-      v-if="showEmptyScreen"
-      :title="$t('payments.no_payments')"
-      :description="$t('payments.list_of_payments')"
-    >
-      <CapsuleIcon class="mt-5 mb-4" />
-
-      <template
-        v-if="userStore.hasAbilities(abilities.CREATE_PAYMENT)"
-        #actions
-      >
-        <BaseButton
-          variant="primary-outline"
-          @click="$router.push('/admin/payments/create')"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="PlusIcon" :class="slotProps.class" />
-          </template>
-          {{ $t('payments.add_new_payment') }}
-        </BaseButton>
-      </template>
-    </BaseEmptyPlaceholder>
-
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <!-- Multiple Select Actions -->
-      <div class="relative flex items-center justify-end h-5">
-        <BaseDropdown v-if="paymentStore.selectedPayments.length">
-          <template #activator>
-            <span
-              class="
-                flex
-                text-sm
-                font-medium
-                cursor-pointer
-                select-none
-                text-primary-400
-              "
-            >
-              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" />
-            </span>
-          </template>
-          <BaseDropdownItem @click="removeMultiplePayments">
-            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </div>
-
-      <BaseTable
-        ref="tableComponent"
-        :data="fetchData"
-        :columns="paymentColumns"
-        :placeholder-count="paymentStore.paymentTotalCount >= 20 ? 10 : 5"
-        class="mt-3"
-      >
-        <!-- Select All Checkbox -->
-        <template #header>
-          <div class="absolute items-center left-6 top-2.5 select-none">
-            <BaseCheckbox
-              v-model="selectAllFieldStatus"
-              variant="primary"
-              @change="paymentStore.selectAllPayments"
-            />
-          </div>
-        </template>
-
-        <template #cell-status="{ row }">
-          <div class="relative block">
-            <BaseCheckbox
-              :id="row.id"
-              v-model="selectField"
-              :value="row.data.id"
-              variant="primary"
-            />
-          </div>
-        </template>
-
-        <template #cell-payment_date="{ row }">
-          {{ row.data.formatted_payment_date }}
-        </template>
-
-        <template #cell-payment_number="{ row }">
-          <router-link
-            :to="{ path: `payments/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.payment_number }}
-          </router-link>
-        </template>
-
-        <template #cell-name="{ row }">
-          <BaseText :text="row.data.customer.name" tag="span" />
-        </template>
-
-        <template #cell-payment_mode="{ row }">
-          <span>
-            {{ row.data.payment_method ? row.data.payment_method.name : '-' }}
-          </span>
-        </template>
-
-        <template #cell-invoice_number="{ row }">
-          <span>
-            {{
-              row?.data?.invoice?.invoice_number
-                ? row?.data?.invoice?.invoice_number
-                : '-'
-            }}
-          </span>
-        </template>
-
-        <template #cell-amount="{ row }">
-          <BaseFormatMoney
-            :amount="row.data.amount"
-            :currency="row.data.customer.currency"
-          />
-        </template>
-
-        <template v-if="hasAtleastOneAbility()" #cell-actions="{ row }">
-          <PaymentDropdown :row="row.data" :table="tableComponent" />
-        </template>
-      </BaseTable>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { debouncedWatch } from '@vueuse/core'
-
-import { ref, reactive, computed, onUnmounted } from 'vue'
-
-import { useI18n } from 'vue-i18n'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { usePaymentStore } from '@/scripts/admin/stores/payment'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-import CapsuleIcon from '@/scripts/components/icons/empty/CapsuleIcon.vue'
-import PaymentDropdown from '@/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue'
-import SendPaymentModal from '@/scripts/admin/components/modal-components/SendPaymentModal.vue'
-
-const { t } = useI18n()
-let showFilters = ref(false)
-let isFetchingInitialData = ref(true)
-let tableComponent = ref(null)
-
-const filters = reactive({
-  customer: '',
-  payment_mode: '',
-  payment_number: '',
-})
-
-const paymentStore = usePaymentStore()
-const companyStore = useCompanyStore()
-const dialogStore = useDialogStore()
-const userStore = useUserStore()
-
-const showEmptyScreen = computed(() => {
-  return !paymentStore.paymentTotalCount && !isFetchingInitialData.value
-})
-
-const paymentColumns = computed(() => {
-  return [
-    {
-      key: 'status',
-      sortable: false,
-      thClass: 'extra w-10',
-      tdClass: 'text-left text-sm font-medium extra',
-    },
-    {
-      key: 'payment_date',
-      label: t('payments.date'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    { key: 'payment_number', label: t('payments.payment_number') },
-    { key: 'name', label: t('payments.customer') },
-    { key: 'payment_mode', label: t('payments.payment_mode') },
-    { key: 'invoice_number', label: t('payments.invoice') },
-    { key: 'amount', label: t('payments.amount') },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-const selectField = computed({
-  get: () => paymentStore.selectedPayments,
-  set: (value) => {
-    return paymentStore.selectPayment(value)
-  },
-})
-
-const selectAllFieldStatus = computed({
-  get: () => paymentStore.selectAllField,
-  set: (value) => {
-    return paymentStore.setSelectAllState(value)
-  },
-})
-
-debouncedWatch(
-  filters,
-  () => {
-    setFilters()
-  },
-  { debounce: 500 }
-)
-
-onUnmounted(() => {
-  if (paymentStore.selectAllField) {
-    paymentStore.selectAllPayments()
-  }
-})
-
-paymentStore.fetchPaymentModes({ limit: 'all' })
-
-async function searchPayment(search) {
-  let res = await paymentStore.fetchPaymentModes({ search })
-  return res.data.data
-}
-
-function hasAtleastOneAbility() {
-  return userStore.hasAbilities([
-    abilities.DELETE_PAYMENT,
-    abilities.EDIT_PAYMENT,
-    abilities.VIEW_PAYMENT,
-    abilities.SEND_PAYMENT,
-  ])
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    customer_id: filters.customer_id,
-    payment_method_id:
-      filters.payment_mode !== null ? filters.payment_mode : '',
-    payment_number: filters.payment_number,
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  isFetchingInitialData.value = true
-
-  let response = await paymentStore.fetchPayments(data)
-
-  isFetchingInitialData.value = false
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-
-function refreshTable() {
-  tableComponent.value && tableComponent.value.refresh()
-}
-
-function setFilters() {
-  refreshTable()
-}
-
-function clearFilter() {
-  filters.customer_id = ''
-  filters.payment_mode = ''
-  filters.payment_number = ''
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-
-function removeMultiplePayments() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('payments.confirm_delete', 2),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then((res) => {
-      if (res) {
-        paymentStore.deleteMultiplePayments().then((response) => {
-          if (response.data.success) {
-            refreshTable()
-          }
-        })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/views/payments/View.vue b/resources/scripts/admin/views/payments/View.vue
deleted file mode 100644
index 34313d99..00000000
--- a/resources/scripts/admin/views/payments/View.vue
+++ /dev/null
@@ -1,459 +0,0 @@
-<template>
-  <SendPaymentModal />
-  <BasePage class="xl:pl-96">
-    <BasePageHeader :title="pageTitle">
-      <template #actions>
-        <BaseButton
-          v-if="userStore.hasAbilities(abilities.SEND_PAYMENT)"
-          :content-loading="isFetching"
-          variant="primary"
-          @click="onPaymentSend"
-        >
-          {{ $t('payments.send_payment_receipt') }}
-        </BaseButton>
-
-        <PaymentDropdown
-          :content-loading="isFetching"
-          class="ml-3"
-          :row="payment"
-        />
-      </template>
-    </BasePageHeader>
-
-    <!-- Sidebar -->
-    <div
-      class="
-        fixed
-        top-0
-        left-0
-        hidden
-        h-full
-        pt-16
-        pb-[6rem]
-        ml-56
-        bg-surface
-        xl:ml-64
-        w-88
-        xl:block
-      "
-    >
-      <div
-        class="
-          flex
-          items-center
-          justify-between
-          px-4
-          pt-8
-          pb-6
-          border border-line-default border-solid
-        "
-      >
-        <BaseInput
-          v-model="searchData.searchText"
-          :placeholder="$t('general.search')"
-          type="text"
-          @input="onSearch"
-        >
-          <BaseIcon name="MagnifyingGlassIcon" class="h-5" />
-        </BaseInput>
-
-        <div class="flex ml-3" role="group" aria-label="First group">
-          <BaseDropdown
-            position="bottom-start"
-            width-class="w-50"
-            position-class="left-0"
-          >
-            <template #activator>
-              <BaseButton variant="gray">
-                <BaseIcon name="FunnelIcon" />
-              </BaseButton>
-            </template>
-
-            <div
-              class="
-                px-4
-                py-1
-                pb-2
-                mb-2
-                text-sm
-                border-b border-line-default border-solid
-              "
-            >
-              {{ $t('general.sort_by') }}
-            </div>
-
-            <div class="px-2">
-              <BaseDropdownItem class="pt-3 rounded-md hover:rounded-md">
-                <BaseInputGroup class="-mt-3 font-normal">
-                  <BaseRadio
-                    id="filter_invoice_number"
-                    v-model="searchData.orderByField"
-                    :label="$t('invoices.title')"
-                    size="sm"
-                    name="filter"
-                    value="invoice_number"
-                    @update:modelValue="onSearch"
-                  />
-                </BaseInputGroup>
-              </BaseDropdownItem>
-            </div>
-
-            <div class="px-2">
-              <BaseDropdownItem class="pt-3 rounded-md hover:rounded-md">
-                <BaseInputGroup class="-mt-3 font-normal">
-                  <BaseRadio
-                    v-model="searchData.orderByField"
-                    :label="$t('payments.date')"
-                    size="sm"
-                    name="filter"
-                    value="payment_date"
-                    @update:modelValue="onSearch"
-                  />
-                </BaseInputGroup>
-              </BaseDropdownItem>
-            </div>
-
-            <div class="px-2">
-              <BaseDropdownItem class="pt-3 rounded-md hover:rounded-md">
-                <BaseInputGroup class="-mt-3 font-normal">
-                  <BaseRadio
-                    id="filter_payment_number"
-                    v-model="searchData.orderByField"
-                    :label="$t('payments.payment_number')"
-                    size="sm"
-                    name="filter"
-                    value="payment_number"
-                    @update:modelValue="onSearch"
-                  />
-                </BaseInputGroup>
-              </BaseDropdownItem>
-            </div>
-          </BaseDropdown>
-
-          <BaseButton class="ml-1" size="md" variant="gray" @click="sortData">
-            <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" />
-            <BaseIcon v-else name="SortDescendingIcon" />
-          </BaseButton>
-        </div>
-      </div>
-
-      <div
-        ref="paymentListSection"
-        class="h-full overflow-y-scroll border-l border-line-default border-solid"
-      >
-        <div v-for="(payment, index) in paymentList" :key="index">
-          <router-link
-            v-if="payment"
-            :id="'payment-' + payment.id"
-            :to="`/admin/payments/${payment.id}/view`"
-            :class="[
-              'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
-              {
-                'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
-                  hasActiveUrl(payment.id),
-              },
-            ]"
-            style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
-          >
-            <div class="flex-2">
-              <BaseText
-                :text="payment?.customer?.name"
-                class="
-                  pr-2
-                  mb-2
-                  text-sm
-                  not-italic
-                  font-normal
-                  leading-5
-                  text-heading
-                  capitalize
-                  truncate
-                "
-              />
-
-              <div
-                class="
-                  mb-1
-                  text-xs
-                  not-italic
-                  font-medium
-                  leading-5
-                  text-muted
-                  capitalize
-                "
-              >
-                {{ payment?.payment_number }}
-              </div>
-
-              <div
-                class="
-                  mb-1
-                  text-xs
-                  not-italic
-                  font-medium
-                  leading-5
-                  text-muted
-                  capitalize
-                "
-              >
-                {{ payment?.invoice_number }}
-              </div>
-            </div>
-
-            <div class="flex-1 whitespace-nowrap right">
-              <BaseFormatMoney
-                class="
-                  block
-                  mb-2
-                  text-xl
-                  not-italic
-                  font-semibold
-                  leading-8
-                  text-right text-heading
-                "
-                :amount="payment?.amount"
-                :currency="payment.customer?.currency"
-              />
-
-              <div class="text-sm text-right text-muted non-italic">
-                {{ payment.formatted_payment_date }}
-              </div>
-            </div>
-          </router-link>
-        </div>
-        <div v-if="isLoading" class="flex justify-center p-4 items-center">
-          <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
-        </div>
-        <p
-          v-if="!paymentList?.length && !isLoading"
-          class="flex justify-center px-4 mt-5 text-sm text-body"
-        >
-          {{ $t('payments.no_matching_payments') }}
-        </p>
-      </div>
-    </div>
-
-    <!-- pdf -->
-    <div
-      class="flex flex-col min-h-0 mt-8 overflow-hidden"
-      style="height: 75vh"
-    >
-      <iframe
-        v-if="shareableLink"
-        :src="shareableLink"
-        class="flex-1 border border-gray-400 border-solid rounded-md"
-      />
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-import { debounce } from 'lodash'
-import { ref, reactive, computed, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import moment from 'moment'
-
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { usePaymentStore } from '@/scripts/admin/stores/payment'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useUserStore } from '@/scripts/admin/stores/user'
-
-import PaymentDropdown from '@/scripts/admin/components/dropdowns/PaymentIndexDropdown.vue'
-import SendPaymentModal from '@/scripts/admin/components/modal-components/SendPaymentModal.vue'
-import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
-
-import abilities from '@/scripts/admin/stub/abilities'
-
-const route = useRoute()
-
-const { t } = useI18n()
-let payment = reactive({})
-let searchData = reactive({
-  orderBy: null,
-  orderByField: null,
-  searchText: null,
-})
-
-let isLoading = ref(false)
-let isFetching = ref(false)
-
-const paymentStore = usePaymentStore()
-const modalStore = useModalStore()
-const userStore = useUserStore()
-
-const paymentList = ref(null)
-const currentPageNumber = ref(1)
-const lastPageNumber = ref(1)
-const paymentListSection = ref(null)
-
-const pageTitle = computed(() => {
-  return payment.payment_number || ''
-})
-
-const getOrderBy = computed(() => {
-  if (searchData.orderBy === 'asc' || searchData.orderBy == null) {
-    return true
-  }
-  return false
-})
-
-const getOrderName = computed(() =>
-  getOrderBy.value ? t('general.ascending') : t('general.descending')
-)
-
-const shareableLink = computed(() => {
-  return payment.unique_hash ? `/payments/pdf/${payment.unique_hash}` : false
-})
-
-const paymentDate = computed(() => {
-  return moment(paymentStore?.selectedPayment?.payment_date).format(
-    'YYYY/MM/DD'
-  )
-})
-
-watch(route, () => {
-  loadPayment()
-})
-
-loadPayments()
-loadPayment()
-
-onSearch = debounce(onSearch, 500)
-
-function hasActiveUrl(id) {
-  return route.params.id == id
-}
-
-function hasAbilities() {
-  return userStore.hasAbilities([
-    abilities.DELETE_PAYMENT,
-    abilities.EDIT_PAYMENT,
-    abilities.VIEW_PAYMENT,
-  ])
-}
-
-const dialogStore = useDialogStore()
-
-async function loadPayments(pageNumber, fromScrollListener = false) {
-  if (isLoading.value) {
-    return
-  }
-
-  let params = {}
-  if (
-    searchData.searchText !== '' &&
-    searchData.searchText !== null &&
-    searchData.searchText !== undefined
-  ) {
-    params.search = searchData.searchText
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    params.orderBy = searchData.orderBy
-  }
-
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    params.orderByField = searchData.orderByField
-  }
-
-  isLoading.value = true
-  let response = await paymentStore.fetchPayments({
-    page: pageNumber,
-    ...params,
-  })
-  isLoading.value = false
-
-  paymentList.value = paymentList.value ? paymentList.value : []
-  paymentList.value = [...paymentList.value, ...response.data.data]
-
-  currentPageNumber.value = pageNumber ? pageNumber : 1
-  lastPageNumber.value = response.data.meta.last_page
-  let paymentFound = paymentList.value.find(
-    (paym) => paym.id == route.params.id
-  )
-
-  if (
-    fromScrollListener == false &&
-    !paymentFound &&
-    currentPageNumber.value < lastPageNumber.value &&
-    Object.keys(params).length === 0
-  ) {
-    loadPayments(++currentPageNumber.value)
-  }
-
-  if (paymentFound) {
-    setTimeout(() => {
-      if (fromScrollListener == false) {
-        scrollToPayment()
-      }
-    }, 500)
-  }
-}
-
-async function loadPayment() {
-  if (!route.params.id) return
-
-  isFetching.value = true
-
-  let response = await paymentStore.fetchPayment(route.params.id)
-
-  if (response.data) {
-    isFetching.value = false
-    Object.assign(payment, response.data.data)
-  }
-}
-
-function scrollToPayment() {
-  const el = document.getElementById(`payment-${route.params.id}`)
-
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth' })
-    el.classList.add('shake')
-    addScrollListener()
-  }
-}
-
-function addScrollListener() {
-  paymentListSection.value.addEventListener('scroll', (ev) => {
-    if (
-      ev.target.scrollTop > 0 &&
-      ev.target.scrollTop + ev.target.clientHeight >
-        ev.target.scrollHeight - 200
-    ) {
-      if (currentPageNumber.value < lastPageNumber.value) {
-        loadPayments(++currentPageNumber.value, true)
-      }
-    }
-  })
-}
-
-async function onSearch() {
-  paymentList.value = []
-  loadPayments()
-}
-
-function sortData() {
-  if (searchData.orderBy === 'asc') {
-    searchData.orderBy = 'desc'
-    onSearch()
-    return true
-  }
-  searchData.orderBy = 'asc'
-  onSearch()
-  return true
-}
-
-async function onPaymentSend() {
-  modalStore.openModal({
-    title: t('payments.send_payment'),
-    componentName: 'SendPaymentModal',
-    id: payment.id,
-    data: payment,
-    variant: 'lg',
-  })
-}
-</script>
diff --git a/resources/scripts/admin/views/recurring-invoices/Index.vue b/resources/scripts/admin/views/recurring-invoices/Index.vue
deleted file mode 100644
index 2c1e707e..00000000
--- a/resources/scripts/admin/views/recurring-invoices/Index.vue
+++ /dev/null
@@ -1,498 +0,0 @@
-<template>
-  <BasePage>
-    <SendInvoiceModal />
-
-    <BasePageHeader :title="$t('recurring_invoices.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-
-        <BaseBreadcrumbItem
-          :title="$t('recurring_invoices.invoice', 2)"
-          to="#"
-          active
-        />
-      </BaseBreadcrumb>
-
-      <template #actions>
-        <BaseButton
-          v-show="recurringInvoiceStore.totalRecurringInvoices"
-          variant="primary-outline"
-          @click="toggleFilter"
-        >
-          {{ $t('general.filter') }}
-          <template #right="slotProps">
-            <BaseIcon
-              v-if="!showFilters"
-              name="FunnelIcon"
-              :class="slotProps.class"
-            />
-            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
-          </template>
-        </BaseButton>
-
-        <router-link
-          v-if="userStore.hasAbilities(abilities.CREATE_RECURRING_INVOICE)"
-          to="recurring-invoices/create"
-        >
-          <BaseButton variant="primary" class="ml-4">
-            <template #left="slotProps">
-              <BaseIcon name="PlusIcon" :class="slotProps.class" />
-            </template>
-            {{ $t('recurring_invoices.new_invoice') }}
-          </BaseButton>
-        </router-link>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper v-show="showFilters" @clear="clearFilter">
-      <BaseInputGroup :label="$t('customers.customer', 1)">
-        <BaseCustomerSelectInput
-          v-model="filters.customer_id"
-          :placeholder="$t('customers.type_or_click')"
-          value-prop="id"
-          label="name"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('recurring_invoices.status')">
-        <BaseMultiselect
-          v-model="filters.status"
-          :options="statusList"
-          searchable
-          :placeholder="$t('general.select_a_status')"
-          @update:modelValue="setActiveTab"
-          @remove="clearStatusSearch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('general.from')">
-        <BaseDatePicker
-          v-model="filters.from_date"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-
-      <div
-        class="hidden w-8 h-0 mx-4 border border-gray-400 border-solid xl:block"
-        style="margin-top: 1.5rem"
-      />
-
-      <BaseInputGroup :label="$t('general.to')">
-        <BaseDatePicker
-          v-model="filters.to_date"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <BaseEmptyPlaceholder
-      v-show="showEmptyScreen"
-      :title="$t('recurring_invoices.no_invoices')"
-      :description="$t('recurring_invoices.list_of_invoices')"
-    >
-      <MoonwalkerIcon class="mt-5 mb-4" />
-
-      <template
-        v-if="userStore.hasAbilities(abilities.CREATE_RECURRING_INVOICE)"
-        #actions
-      >
-        <BaseButton
-          variant="primary-outline"
-          @click="$router.push('/admin/recurring-invoices/create')"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="PlusIcon" :class="slotProps.class" />
-          </template>
-          {{ $t('recurring_invoices.add_new_invoice') }}
-        </BaseButton>
-      </template>
-    </BaseEmptyPlaceholder>
-
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <div
-        class="
-          relative
-          flex
-          items-center
-          justify-between
-          h-10
-          mt-5
-          list-none
-          border-b-2 border-line-default border-solid
-        "
-      >
-        <!-- Tabs -->
-        <BaseTabGroup
-          class="-mb-5"
-          :default-index="currentStatusIndex"
-          @change="setStatusFilter"
-        >
-          <BaseTab :title="$t('recurring_invoices.all')" filter="ALL" />
-          <BaseTab :title="$t('recurring_invoices.active')" filter="ACTIVE" />
-          <BaseTab :title="$t('recurring_invoices.on_hold')" filter="ON_HOLD" />
-        </BaseTabGroup>
-
-        <BaseDropdown
-          v-if="recurringInvoiceStore.selectedRecurringInvoices.length"
-          class="absolute float-right"
-        >
-          <template #activator>
-            <span
-              class="
-                flex
-                text-sm
-                font-medium
-                cursor-pointer
-                select-none
-                text-primary-400
-              "
-            >
-              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" class="h-5" />
-            </span>
-          </template>
-
-          <BaseDropdownItem @click="removeMultipleRecurringInvoices()">
-            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </div>
-
-      <BaseTable
-        ref="table"
-        :data="fetchData"
-        :columns="invoiceColumns"
-        :placeholder-count="
-          recurringInvoiceStore.totalRecurringInvoices >= 20 ? 10 : 5
-        "
-        class="mt-10"
-      >
-        <!-- Select All Checkbox -->
-        <template #header>
-          <div class="absolute items-center left-6 top-2.5 select-none">
-            <BaseCheckbox
-              v-model="recurringInvoiceStore.selectAllField"
-              variant="primary"
-              @change="recurringInvoiceStore.selectAllRecurringInvoices"
-            />
-          </div>
-        </template>
-
-        <template #cell-checkbox="{ row }">
-          <div class="relative block">
-            <BaseCheckbox
-              :id="row.id"
-              v-model="selectField"
-              :value="row.data.id"
-            />
-          </div>
-        </template>
-
-        <!-- Starts at  -->
-        <template #cell-starts_at="{ row }">
-          {{ row.data.formatted_starts_at }}
-        </template>
-
-        <!-- Customer  -->
-        <template #cell-customer="{ row }">
-          <router-link :to="{ path: `recurring-invoices/${row.data.id}/view` }">
-            <BaseText
-              :text="row.data.customer.name"
-              tag="span"
-              class="font-medium text-primary-500 flex flex-col"
-            />
-
-            <BaseText
-              :text="
-                row.data.customer.contact_name
-                  ? row.data.customer.contact_name
-                  : ''
-              "
-              tag="span"
-              class="text-xs text-subtle"
-            />
-          </router-link>
-        </template>
-
-        <!-- Frequency  -->
-        <template #cell-frequency="{ row }">
-          {{ getFrequencyLabel(row.data.frequency) }}
-        </template>
-
-        <!-- Status  -->
-        <template #cell-status="{ row }">
-          <BaseRecurringInvoiceStatusBadge
-            :status="row.data.status"
-            class="px-3 py-1"
-          >
-            <BaseRecurringInvoiceStatusLabel :status="row.data.status" />
-          </BaseRecurringInvoiceStatusBadge>
-        </template>
-
-        <!-- Amount  -->
-        <template #cell-total="{ row }">
-          <BaseFormatMoney
-            :amount="row.data.total"
-            :currency="row.data.customer.currency"
-          />
-        </template>
-
-        <!-- Actions -->
-        <template v-if="canViewActions" #cell-actions="{ row }">
-          <RecurringInvoiceIndexDropdown :row="row.data" :table="table" />
-        </template>
-      </BaseTable>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { computed, onUnmounted, reactive, ref, watch, inject } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { debouncedWatch } from '@vueuse/core'
-
-import SendInvoiceModal from '@/scripts/admin/components/modal-components/SendInvoiceModal.vue'
-import RecurringInvoiceIndexDropdown from '@/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue'
-import MoonwalkerIcon from '@/scripts/components/icons/empty/MoonwalkerIcon.vue'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const recurringInvoiceStore = useRecurringInvoiceStore()
-const customerStore = useCustomerStore()
-const dialogStore = useDialogStore()
-const notificationStore = useNotificationStore()
-const userStore = useUserStore()
-
-const table = ref(null)
-const { t } = useI18n()
-const showFilters = ref(false)
-const statusList = ref([
-  {label: t('recurring_invoices.active'), value: 'ACTIVE'},
-  {label: t('recurring_invoices.on_hold'), value: 'ON_HOLD'},
-  {label: t('recurring_invoices.all'), value: 'ALL'}
-])
-const isRequestOngoing = ref(true)
-const activeTab = ref('recurring-invoices.all')
-const router = useRouter()
-
-let filters = reactive({
-  customer_id: '',
-  status: '',
-  from_date: '',
-  to_date: '',
-})
-
-const showEmptyScreen = computed(
-  () => !recurringInvoiceStore.totalRecurringInvoices && !isRequestOngoing.value
-)
-
-const selectField = computed({
-  get: () => recurringInvoiceStore.selectedRecurringInvoices,
-  set: (value) => {
-    return recurringInvoiceStore.selectRecurringInvoice(value)
-  },
-})
-
-const invoiceColumns = computed(() => {
-  return [
-    {
-      key: 'checkbox',
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'starts_at',
-      label: t('recurring_invoices.starts_at'),
-      thClass: 'extra',
-      tdClass: 'font-medium',
-    },
-    { key: 'customer', label: t('invoices.customer') },
-    { key: 'frequency', label: t('recurring_invoices.frequency.title') },
-    { key: 'status', label: t('invoices.status') },
-    { key: 'total', label: t('invoices.total') },
-    {
-      key: 'actions',
-      label: t('recurring_invoices.action'),
-      tdClass: 'text-right text-sm font-medium',
-      thClass: 'text-right',
-      sortable: false,
-    },
-  ]
-})
-
-debouncedWatch(
-  filters,
-  () => {
-    setFilters()
-  },
-  { debounce: 500 }
-)
-
-onUnmounted(() => {
-  if (recurringInvoiceStore.selectAllField) {
-    recurringInvoiceStore.selectAllRecurringInvoices()
-  }
-})
-
-const currentStatusIndex = computed(() => {
-  return statusList.value.findIndex((status) => status === filters.status)
-})
-
-function canViewActions() {
-  return userStore.hasAbilities([
-    abilities.DELETE_RECURRING_INVOICE,
-    abilities.EDIT_RECURRING_INVOICE,
-    abilities.VIEW_RECURRING_INVOICE,
-  ])
-}
-
-function getFrequencyLabel(frequencyFormat) {
-  const frequencyObj = recurringInvoiceStore.frequencies.find((frequency) => {
-    return frequency.value === frequencyFormat
-  })
-
-  return frequencyObj ? frequencyObj.label : `CUSTOM: ${frequencyFormat}`
-}
-
-function refreshTable() {
-  table.value && table.value.refresh()
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    customer_id: filters.customer_id,
-    status: filters.status,
-    from_date: filters.from_date,
-    to_date: filters.to_date,
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  isRequestOngoing.value = true
-
-  let response = await recurringInvoiceStore.fetchRecurringInvoices(data)
-
-  isRequestOngoing.value = false
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-
-function setStatusFilter(val) {
-  if (activeTab.value == val.title) {
-    return true
-  }
-
-  activeTab.value = val.title
-
-  switch (val.title) {
-    case t('recurring_invoices.active'):
-      filters.status = 'ACTIVE'
-      break
-    case t('recurring_invoices.on_hold'):
-      filters.status = 'ON_HOLD'
-      break
-    case t('recurring_invoices.all'):
-      filters.status = 'ALL'
-      break
-  }
-}
-
-function setFilters() {
-  recurringInvoiceStore.$patch((state) => {
-    state.selectedRecurringInvoices = []
-    state.selectAllField = false
-  })
-
-  refreshTable()
-}
-
-function clearFilter() {
-  filters.customer_id = ''
-  filters.status = ''
-  filters.from_date = ''
-  filters.to_date = ''
-  filters.invoice_number = ''
-  activeTab.value = t('general.all')
-}
-
-async function removeMultipleRecurringInvoices(id = null) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('invoices.confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        await recurringInvoiceStore
-          .deleteMultipleRecurringInvoices(id)
-          .then((res) => {
-            if (res.data.success) {
-              refreshTable()
-              recurringInvoiceStore.$patch((state) => {
-                state.selectedRecurringInvoices = []
-                state.selectAllField = false
-              })
-              notificationStore.showNotification({
-                type: 'success',
-                message: t('recurring_invoices.deleted_message', 2),
-              })
-            } else if (res.data.error) {
-              notificationStore.showNotification({
-                type: 'error',
-                message: res.data.message,
-              })
-            }
-          })
-      }
-    })
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-
-async function clearStatusSearch(removedOption, id) {
-  filters.status = ''
-  refreshTable()
-}
-
-function setActiveTab(val) {
-  switch (val) {
-    case 'ACTIVE':
-      activeTab.value = t('recurring_invoices.active')
-      break
-    case 'ON_HOLD':
-      activeTab.value = t('recurring_invoices.on_hold')
-      break
-    case 'ALL':
-      activeTab.value = t('recurring_invoices.all')
-      break
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/recurring-invoices/View.vue b/resources/scripts/admin/views/recurring-invoices/View.vue
deleted file mode 100644
index c3196ff5..00000000
--- a/resources/scripts/admin/views/recurring-invoices/View.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <BasePage class="xl:pl-96">
-    <BasePageHeader :title="pageTitle">
-      <template #actions>
-        <RecurringInvoiceIndexDropdown
-          v-if="hasAtleastOneAbility()"
-          :row="recurringInvoiceStore.newRecurringInvoice"
-        />
-      </template>
-    </BasePageHeader>
-
-    <RecurringInvoiceViewSidebar />
-
-    <RecurringInvoiceInfo />
-  </BasePage>
-</template>
-
-<script setup>
-import { ref, computed, inject } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
-import abilities from '@/scripts/admin/stub/abilities'
-
-import RecurringInvoiceViewSidebar from '@/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue'
-import RecurringInvoiceInfo from '@/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue'
-import RecurringInvoiceIndexDropdown from '@/scripts/admin/components/dropdowns/RecurringInvoiceIndexDropdown.vue'
-
-const dialogStore = useDialogStore()
-const recurringInvoiceStore = useRecurringInvoiceStore()
-const userStore = useUserStore()
-const { t } = useI18n()
-
-const router = useRouter()
-
-const pageTitle = computed(() => {
-  return recurringInvoiceStore.newRecurringInvoice
-    ? recurringInvoiceStore.newRecurringInvoice?.customer?.name
-    : ''
-})
-
-function hasAtleastOneAbility() {
-  return userStore.hasAbilities([
-    abilities.DELETE_RECURRING_INVOICE,
-    abilities.EDIT_RECURRING_INVOICE,
-  ])
-}
-
-function removeRecurringInvoice(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('recurring_invoices.confirm_delete', 1),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      size: 'lg',
-      hideNoButton: false,
-    })
-    .then((res) => {
-      if (res) {
-        let data = { ids: [id] }
-        let response = recurringInvoiceStore
-          .deleteRecurringInvoice(data)
-          .then((res) => {
-            if (response) {
-              router.push('/admin/recurring-invoices')
-              return true
-            }
-          })
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreate.vue b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreate.vue
deleted file mode 100644
index 8a21b13b..00000000
--- a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreate.vue
+++ /dev/null
@@ -1,358 +0,0 @@
-<template>
-  <SelectTemplateModal />
-  <ItemModal />
-  <TaxTypeModal />
-  <SalesTax
-    v-if="salesTaxEnabled && !isLoadingContent"
-    :store="recurringInvoiceStore"
-    store-prop="newRecurringInvoice"
-    :is-edit="isEdit"
-    :customer="recurringInvoiceStore.newRecurringInvoice.customer"
-  />
-  <BasePage class="relative invoice-create-page">
-    <form @submit.prevent="submitForm">
-      <BasePageHeader :title="pageTitle">
-        <BaseBreadcrumb>
-          <BaseBreadcrumbItem
-            :title="$t('general.home')"
-            to="/admin/dashboard"
-          />
-          <BaseBreadcrumbItem
-            :title="$t('recurring_invoices.title', 2)"
-            to="/admin/recurring-invoices"
-          />
-          <BaseBreadcrumbItem
-            v-if="$route.name === 'invoices.edit'"
-            :title="$t('recurring_invoices.edit_invoice')"
-            to="#"
-            active
-          />
-          <BaseBreadcrumbItem v-else :title="pageTitle" to="#" active />
-        </BaseBreadcrumb>
-
-        <template #actions>
-          <router-link
-            :to="`/invoices/pdf/${recurringInvoiceStore.newRecurringInvoice.unique_hash}`"
-          >
-            <BaseButton
-              v-if="$route.name === 'invoices.edit'"
-              target="_blank"
-              class="mr-3"
-              variant="primary-outline"
-              type="button"
-            >
-              <span class="flex">
-                {{ $t('general.view_pdf') }}
-              </span>
-            </BaseButton>
-          </router-link>
-
-          <BaseButton
-            :loading="isSaving"
-            :disabled="isSaving"
-            variant="primary"
-            type="submit"
-          >
-            <template #left="slotProps">
-              <BaseIcon
-                v-if="!isSaving"
-                name="ArrowDownOnSquareIcon"
-                :class="slotProps.class"
-              />
-            </template>
-            {{ $t('recurring_invoices.save_invoice') }}
-          </BaseButton>
-        </template>
-      </BasePageHeader>
-
-      <!-- Select Customer & Basic Fields  -->
-      <div class="grid-cols-12 gap-8 mt-6 mb-8 lg:grid">
-        <InvoiceBasicFields
-          :v="v$"
-          :is-loading="isLoadingContent"
-          :is-edit="isEdit"
-        />
-      </div>
-
-      <BaseScrollPane>
-        <!-- Invoice Items -->
-        <CreateItems
-          :currency="recurringInvoiceStore.newRecurringInvoice.currency"
-          :is-loading="isLoadingContent"
-          :item-validation-scope="recurringInvoiceValidationScope"
-          :store="recurringInvoiceStore"
-          store-prop="newRecurringInvoice"
-        />
-
-        <!-- Invoice Templates -->
-        <div
-          class="
-            block
-            mt-10
-            invoice-foot
-            lg:flex lg:justify-between lg:items-start
-          "
-        >
-          <div class="w-full relative lg:w-1/2">
-            <!-- Invoice Custom Notes -->
-            <NoteFields
-              :store="recurringInvoiceStore"
-              store-prop="newRecurringInvoice"
-              :fields="recurringInvoiceFields"
-              type="Invoice"
-            />
-
-            <!-- Invoice Custom Fields -->
-            <InvoiceCustomFields
-              type="Invoice"
-              :is-edit="isEdit"
-              :is-loading="isLoadingContent"
-              :store="recurringInvoiceStore"
-              store-prop="newRecurringInvoice"
-              :custom-field-scope="recurringInvoiceValidationScope"
-              class="mb-6"
-            />
-
-            <!-- Invoice Template Button-->
-            <SelectTemplateButton
-              :store="recurringInvoiceStore"
-              store-prop="newRecurringInvoice"
-            />
-          </div>
-
-          <!-- Invoice Total Card -->
-          <CreateTotal
-            :currency="recurringInvoiceStore.newRecurringInvoice.currency"
-            :is-loading="isLoadingContent"
-            :store="recurringInvoiceStore"
-            store-prop="newRecurringInvoice"
-            tax-popup-type="invoice"
-          />
-        </div>
-      </BaseScrollPane>
-    </form>
-  </BasePage>
-</template>
-
-<script setup>
-import { computed, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { useModalStore } from '@/scripts/stores/modal'
-import CreateItems from '@/scripts/admin/components/estimate-invoice-common/CreateItems.vue'
-import CreateTotal from '@/scripts/admin/components/estimate-invoice-common/CreateTotal.vue'
-import SelectTemplateButton from '@/scripts/admin/components/estimate-invoice-common/SelectTemplateButton.vue'
-import InvoiceBasicFields from './RecurringInvoiceCreateBasicFields.vue'
-import InvoiceCustomFields from '@/scripts/admin/components/custom-fields/CreateCustomFields.vue'
-import NoteFields from '@/scripts/admin/components/estimate-invoice-common/CreateNotesField.vue'
-import SalesTax from '@/scripts/admin/components/estimate-invoice-common/SalesTax.vue'
-
-import {
-  required,
-  maxLength,
-  numeric,
-  helpers,
-  requiredIf,
-  decimal,
-} from '@vuelidate/validators'
-
-import useVuelidate from '@vuelidate/core'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
-import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
-import { useModuleStore } from '@/scripts/admin/stores/module'
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import SelectTemplateModal from '@/scripts/admin/components/modal-components/SelectTemplateModal.vue'
-import TaxTypeModal from '@/scripts/admin/components/modal-components/TaxTypeModal.vue'
-import ItemModal from '@/scripts/admin/components/modal-components/ItemModal.vue'
-
-const recurringInvoiceStore = useRecurringInvoiceStore()
-const companyStore = useCompanyStore()
-const customFieldStore = useCustomFieldStore()
-const moduleStore = useModuleStore()
-const modalStore = useModalStore()
-const customerStore = useCustomerStore()
-const recurringInvoiceValidationScope = 'newRecurringInvoice'
-const notificationStore = useNotificationStore()
-const { t } = useI18n()
-let isSaving = ref(false)
-
-const recurringInvoiceFields = ref([
-  'customer',
-  'company',
-  'customerCustom',
-  'invoice',
-  'invoiceCustom',
-])
-
-let route = useRoute()
-let router = useRouter()
-
-let isLoadingContent = computed(
-  () =>
-    recurringInvoiceStore.isFetchingInvoice ||
-    recurringInvoiceStore.isFetchingInitialSettings
-)
-
-let pageTitle = computed(() =>
-  isEdit.value
-    ? t('recurring_invoices.edit_invoice')
-    : t('recurring_invoices.new_invoice')
-)
-
-let isEdit = computed(() => route.name === 'recurring-invoices.edit')
-
-const salesTaxEnabled = computed(() => {
-  return (
-    companyStore.selectedCompanySettings.sales_tax_us_enabled === 'YES' &&
-    moduleStore.salesTaxUSEnabled
-  )
-})
-
-const rules = {
-  starts_at: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  status: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  frequency: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  limit_by: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  limit_date: {
-    required: helpers.withMessage(
-      t('validation.required'),
-      requiredIf(function () {
-        return recurringInvoiceStore.newRecurringInvoice.limit_by === 'DATE'
-      })
-    ),
-  },
-  limit_count: {
-    required: helpers.withMessage(
-      t('validation.required'),
-      requiredIf(function () {
-        return recurringInvoiceStore.newRecurringInvoice.limit_by === 'COUNT'
-      })
-    ),
-  },
-  selectedFrequency: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  customer_id: {
-    required: helpers.withMessage(t('validation.required'), required),
-  },
-  exchange_rate: {
-    required: requiredIf(function () {
-      helpers.withMessage(t('validation.required'), required)
-      return recurringInvoiceStore.showExchangeRate
-    }),
-    decimal: helpers.withMessage(t('validation.valid_exchange_rate'), decimal),
-  },
-}
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => recurringInvoiceStore.newRecurringInvoice),
-  { $scope: recurringInvoiceValidationScope }
-)
-
-recurringInvoiceStore.resetCurrentRecurringInvoice()
-recurringInvoiceStore.fetchRecurringInvoiceInitialSettings(isEdit.value)
-customFieldStore.resetCustomFields()
-v$.value.$reset
-
-watch(
-  () => recurringInvoiceStore.newRecurringInvoice.customer,
-  (newVal) => {
-    if (newVal && newVal.currency) {
-      recurringInvoiceStore.newRecurringInvoice.currency = newVal.currency
-    } else {
-      recurringInvoiceStore.newRecurringInvoice.currency =
-        companyStore.selectedCompanyCurrency
-    }
-  }
-)
-
-watch(
-  () => companyStore.selectedCompanySettings?.tax_included_by_default,
-  (newVal) => {
-    recurringInvoiceStore.newRecurringInvoice.tax_included = newVal === 'YES'
-  },
-  {immediate: true}
-)
-
-async function submitForm() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return false
-  }
-
-  isSaving.value = true
-
-  let data = {
-    ...recurringInvoiceStore.newRecurringInvoice,
-    sub_total: recurringInvoiceStore.getSubTotal,
-    total: recurringInvoiceStore.getTotal,
-    tax: recurringInvoiceStore.getTotalTax,
-  }
-
-  if (data.customer && !data.customer.email && data.send_automatically) {
-    notificationStore.showNotification({
-      type: 'error',
-      message: t('recurring_invoices.add_customer_email'),
-    })
-    editCustomer()
-    isSaving.value = false
-    return
-  }
-
-  if (route.params.id) {
-    recurringInvoiceStore
-      .updateRecurringInvoice(data)
-      .then((res) => {
-        if (res.data.data) {
-          router.push(`/admin/recurring-invoices/${res.data.data.id}/view`)
-        }
-        isSaving.value = false
-      })
-      .catch((err) => {
-        isSaving.value = false
-      })
-  } else {
-    submitCreate(data)
-  }
-}
-
-async function editCustomer() {
-  let selectedCustomer = recurringInvoiceStore.newRecurringInvoice.customer.id
-
-  await customerStore.fetchCustomer(selectedCustomer)
-  modalStore.openModal({
-    title: t('customers.edit_customer'),
-    componentName: 'CustomerModal',
-  })
-}
-
-function submitCreate(data) {
-  recurringInvoiceStore
-    .addRecurringInvoice(data)
-    .then((res) => {
-      if (res.data.data) {
-        router.push(`/admin/recurring-invoices/${res.data.data.id}/view`)
-      }
-      isSaving.value = false
-    })
-    .catch((err) => {
-      isSaving.value = false
-    })
-}
-
-function checkValid() {
-  return false
-}
-</script>
diff --git a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
deleted file mode 100644
index b57b183b..00000000
--- a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
+++ /dev/null
@@ -1,296 +0,0 @@
-<template>
-  <div class="col-span-5 pr-0">
-    <BaseCustomerSelectPopup
-      v-model="recurringInvoiceStore.newRecurringInvoice.customer"
-      :valid="v.customer_id"
-      :content-loading="isLoading"
-      type="recurring-invoice"
-    />
-
-    <div class="flex mt-7">
-      <div class="relative w-20 mt-8">
-        <BaseSwitch
-          v-model="recurringInvoiceStore.newRecurringInvoice.send_automatically"
-          class="absolute -top-4"
-        />
-      </div>
-
-      <div class="ml-2">
-        <p class="p-0 mb-1 leading-snug text-left text-heading">
-          {{ $t('recurring_invoices.send_automatically') }}
-        </p>
-        <p
-          class="p-0 m-0 text-xs leading-tight text-left text-muted"
-          style="max-width: 480px"
-        >
-          {{ $t('recurring_invoices.send_automatically_desc') }}
-        </p>
-      </div>
-    </div>
-  </div>
-
-  <div
-    class="
-      grid grid-cols-1
-      col-span-7
-      gap-4
-      mt-8
-      lg:gap-6 lg:mt-0 lg:grid-cols-2
-      rounded-xl shadow border border-line-light bg-surface p-5
-    "
-  >
-    <BaseInputGroup
-      :label="$t('recurring_invoices.starts_at')"
-      :content-loading="isLoading"
-      required
-      :error="v.starts_at.$error && v.starts_at.$errors[0].$message"
-    >
-      <BaseDatePicker
-        v-model="recurringInvoiceStore.newRecurringInvoice.starts_at"
-        :content-loading="isLoading"
-        :calendar-button="true"
-        calendar-button-icon="calendar"
-        :invalid="v.starts_at.$error"
-        @change="getNextInvoiceDate()"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :label="$t('recurring_invoices.next_invoice_date')"
-      :content-loading="isLoading"
-      required
-    >
-      <BaseDatePicker
-        v-model="recurringInvoiceStore.newRecurringInvoice.next_invoice_at"
-        :content-loading="isLoading"
-        :calendar-button="true"
-        :disabled="true"
-        :loading="isLoadingNextDate"
-        calendar-button-icon="calendar"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :label="$t('recurring_invoices.limit_by')"
-      :content-loading="isLoading"
-      class="lg:mt-0"
-      required
-      :error="v.limit_by.$error && v.limit_by.$errors[0].$message"
-    >
-      <BaseMultiselect
-        v-model="recurringInvoiceStore.newRecurringInvoice.limit_by"
-        :content-loading="isLoading"
-        :options="limits"
-        label="label"
-        :invalid="v.limit_by.$error"
-        value-prop="value"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      v-if="hasLimitBy('DATE')"
-      :label="$t('recurring_invoices.limit_date')"
-      :content-loading="isLoading"
-      :required="hasLimitBy('DATE')"
-      :error="v.limit_date.$error && v.limit_date.$errors[0].$message"
-    >
-      <BaseDatePicker
-        v-model="recurringInvoiceStore.newRecurringInvoice.limit_date"
-        :content-loading="isLoading"
-        :invalid="v.limit_date.$error"
-        calendar-button-icon="calendar"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      v-if="hasLimitBy('COUNT')"
-      :label="$t('recurring_invoices.count')"
-      :content-loading="isLoading"
-      :required="hasLimitBy('COUNT')"
-      :error="v.limit_count.$error && v.limit_count.$errors[0].$message"
-    >
-      <BaseInput
-        v-model="recurringInvoiceStore.newRecurringInvoice.limit_count"
-        :content-loading="isLoading"
-        :invalid="v.limit_count.$error"
-        type="number"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :label="$t('recurring_invoices.status')"
-      required
-      :content-loading="isLoading"
-      :error="v.status.$error && v.status.$errors[0].$message"
-    >
-      <BaseMultiselect
-        v-model="recurringInvoiceStore.newRecurringInvoice.status"
-        :options="getStatusOptions"
-        :content-loading="isLoading"
-        :invalid="v.status.$error"
-        :placeholder="$t('recurring_invoices.select_a_status')"
-        value-prop="value"
-        label="key"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :label="$t('recurring_invoices.frequency.select_frequency')"
-      required
-      :content-loading="isLoading"
-      :error="
-        v.selectedFrequency.$error && v.selectedFrequency.$errors[0].$message
-      "
-    >
-      <BaseMultiselect
-        v-model="recurringInvoiceStore.newRecurringInvoice.selectedFrequency"
-        :content-loading="isLoading"
-        :options="recurringInvoiceStore.frequencies"
-        label="label"
-        :invalid="v.selectedFrequency.$error"
-        object
-        @change="getNextInvoiceDate"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      v-if="isCustomFrequency"
-      :label="$t('recurring_invoices.frequency.title')"
-      :content-loading="isLoading"
-      required
-      :error="v.frequency.$error && v.frequency.$errors[0].$message"
-    >
-      <BaseInput
-        v-model="recurringInvoiceStore.newRecurringInvoice.frequency"
-        :content-loading="isLoading"
-        :disabled="!isCustomFrequency"
-        :invalid="v.frequency.$error"
-        :loading="isLoadingNextDate"
-        @update:modelValue="debounceNextDate"
-      />
-    </BaseInputGroup>
-
-    <ExchangeRateConverter
-      :store="recurringInvoiceStore"
-      store-prop="newRecurringInvoice"
-      :v="v"
-      :is-loading="isLoading"
-      :is-edit="isEdit"
-      :customer-currency="recurringInvoiceStore.newRecurringInvoice.currency_id"
-    />
-  </div>
-</template>
-
-<script setup>
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useDebounceFn } from '@vueuse/core'
-import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-
-import ExchangeRateConverter from '@/scripts/admin/components/estimate-invoice-common/ExchangeRateConverter.vue'
-
-const props = defineProps({
-  v: {
-    type: Object,
-    default: null,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  isEdit: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const route = useRoute()
-const recurringInvoiceStore = useRecurringInvoiceStore()
-const globalStore = useGlobalStore()
-const { t } = useI18n()
-
-const isLoadingNextDate = ref(false)
-
-const limits = reactive([
-  { label: t('recurring_invoices.limit.none'), value: 'NONE' },
-  { label: t('recurring_invoices.limit.date'), value: 'DATE' },
-  { label: t('recurring_invoices.limit.count'), value: 'COUNT' },
-])
-
-const isCustomFrequency = computed(() => {
-  return (
-    recurringInvoiceStore.newRecurringInvoice.selectedFrequency &&
-    recurringInvoiceStore.newRecurringInvoice.selectedFrequency.value ===
-      'CUSTOM'
-  )
-})
-
-const getStatusOptions = computed(() => {
-  if (props.isEdit) {
-    return globalStore.config.recurring_invoice_status.update_status.map((item) => {
-      return Object.assign({}, item, {
-        key: t(item.key),
-      })
-    })
-  }
-  return globalStore.config.recurring_invoice_status.create_status.map((item) => {
-    return Object.assign({}, item, {
-      key: t(item.key),
-    })
-  })
-})
-
-watch(
-  () => recurringInvoiceStore.newRecurringInvoice.selectedFrequency,
-  (newValue) => {
-    if (!recurringInvoiceStore.isFetchingInitialSettings) {
-      if (newValue && newValue.value !== 'CUSTOM') {
-        recurringInvoiceStore.newRecurringInvoice.frequency = newValue.value
-      } else {
-        recurringInvoiceStore.newRecurringInvoice.frequency = null
-      }
-    }
-  }
-)
-
-onMounted(() => {
-  // on create
-  if (!route.params.id) {
-    getNextInvoiceDate()
-  }
-})
-
-function hasLimitBy(LimitBy) {
-  return recurringInvoiceStore.newRecurringInvoice.limit_by === LimitBy
-}
-
-const debounceNextDate = useDebounceFn(() => {
-  getNextInvoiceDate()
-}, 500)
-
-async function getNextInvoiceDate() {
-  const val = recurringInvoiceStore.newRecurringInvoice.frequency
-
-  if (!val) {
-    return
-  }
-
-  isLoadingNextDate.value = true
-
-  let data = {
-    starts_at: recurringInvoiceStore.newRecurringInvoice.starts_at,
-    frequency: val,
-  }
-
-  try {
-    await recurringInvoiceStore.fetchRecurringInvoiceFrequencyDate(data)
-  } catch (error) {
-    console.error(error)
-    isLoadingNextDate.value = false
-  }
-
-  isLoadingNextDate.value = false
-}
-</script>
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/Invoices.vue b/resources/scripts/admin/views/recurring-invoices/partials/Invoices.vue
deleted file mode 100644
index e56ee1a8..00000000
--- a/resources/scripts/admin/views/recurring-invoices/partials/Invoices.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <SendInvoiceModal @update="updateSentInvoiceStatus" />
-  <div class="relative table-container">
-    <BaseTable
-      ref="table"
-      :data="recurringInvoiceStore.newRecurringInvoice.invoices"
-      :columns="invoiceColumns"
-      :loading="recurringInvoiceStore.isFetchingViewData"
-      :placeholder-count="5"
-      class="mt-5"
-    >
-      <!-- Invoice Number  -->
-      <template #cell-invoice_number="{ row }">
-        <router-link
-          :to="{ path: `/admin/invoices/${row.data.id}/view` }"
-          class="font-medium text-primary-500"
-        >
-          {{ row.data.invoice_number }}
-        </router-link>
-      </template>
-
-      <!-- Invoice Due amount  -->
-      <template #cell-total="{ row }">
-        <BaseFormatMoney
-          :amount="row.data.due_amount"
-          :currency="row.data.currency"
-        />
-      </template>
-
-      <!-- Invoice date  -->
-      <template #cell-invoice_date="{ row }">
-        {{ row.data.formatted_invoice_date }}
-      </template>
-
-      <!-- Invoice status  -->
-      <template #cell-status="{ row }">
-        <BaseInvoiceStatusBadge :status="row.data.status" class="px-3 py-1">
-          <BaseInvoiceStatusLabel :status="row.data.status" />
-        </BaseInvoiceStatusBadge>
-      </template>
-
-      <!-- Actions -->
-      <template v-if="hasAtleastOneAbility()" #cell-actions="{ row }">
-        <InvoiceDropdown :row="row.data" :table="table" />
-      </template>
-    </BaseTable>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref, inject } from 'vue'
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
-import abilities from '@/scripts/admin/stub/abilities'
-import InvoiceDropdown from '@/scripts/admin/components/dropdowns/InvoiceIndexDropdown.vue'
-import SendInvoiceModal from '@/scripts/admin/components/modal-components/SendInvoiceModal.vue'
-
-const recurringInvoiceStore = useRecurringInvoiceStore()
-
-const table = ref(null)
-const baseSelect = ref(null)
-const utils = inject('$utils')
-const { t } = useI18n()
-const currency = ref(null)
-const router = useRouter()
-const userStore = useUserStore()
-
-const invoiceColumns = computed(() => {
-  return [
-    {
-      key: 'invoice_date',
-      label: t('invoices.date'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    { key: 'invoice_number', label: t('invoices.invoice') },
-    { key: 'customer.name', label: t('invoices.customer') },
-    { key: 'status', label: t('invoices.status') },
-    { key: 'total', label: t('invoices.total') },
-
-    {
-      key: 'actions',
-      label: t('invoices.action'),
-      tdClass: 'text-right text-sm font-medium',
-      thClass: 'text-right',
-      sortable: false,
-    },
-  ]
-})
-
-function hasAtleastOneAbility() {
-  return userStore.hasAbilities([
-    abilities.DELETE_INVOICE,
-    abilities.EDIT_INVOICE,
-    abilities.VIEW_INVOICE,
-    abilities.SEND_INVOICE,
-  ])
-}
-
-function refreshTable() {
-  table.value && table.value.refresh()
-}
-
-function updateSentInvoiceStatus(id) {
-  let pos = recurringInvoiceStore.newRecurringInvoice.invoices.findIndex(
-    (invoice) => invoice.id === id
-  )
-
-  if (recurringInvoiceStore.newRecurringInvoice.invoices[pos]) {
-    recurringInvoiceStore.newRecurringInvoice.invoices[pos].status = 'SENT'
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue
deleted file mode 100644
index bdee42e5..00000000
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <BaseCard class="mt-10">
-    <BaseHeading>
-      {{ $t('customers.basic_info') }}
-    </BaseHeading>
-
-    <BaseDescriptionList class="mt-5">
-      <BaseDescriptionListItem
-        :label="$t('recurring_invoices.starts_at')"
-        :content-loading="isLoading"
-        :value="recurringInvoiceStore.newRecurringInvoice?.formatted_starts_at"
-      />
-
-      <BaseDescriptionListItem
-        :label="$t('recurring_invoices.next_invoice_date')"
-        :content-loading="isLoading"
-        :value="
-          recurringInvoiceStore.newRecurringInvoice?.formatted_next_invoice_at
-        "
-      />
-
-      <BaseDescriptionListItem
-        v-if="
-          recurringInvoiceStore.newRecurringInvoice?.limit_date &&
-          recurringInvoiceStore.newRecurringInvoice?.limit_by !== 'NONE'
-        "
-        :label="$t('recurring_invoices.limit_date')"
-        :content-loading="isLoading"
-        :value="recurringInvoiceStore.newRecurringInvoice?.limit_date"
-      />
-
-      <BaseDescriptionListItem
-        v-if="
-          recurringInvoiceStore.newRecurringInvoice?.limit_date &&
-          recurringInvoiceStore.newRecurringInvoice?.limit_by !== 'NONE'
-        "
-        :label="$t('recurring_invoices.limit_by')"
-        :content-loading="isLoading"
-        :value="recurringInvoiceStore.newRecurringInvoice?.limit_by"
-      />
-
-      <BaseDescriptionListItem
-        v-if="recurringInvoiceStore.newRecurringInvoice?.limit_count"
-        :label="$t('recurring_invoices.limit_count')"
-        :value="recurringInvoiceStore.newRecurringInvoice?.limit_count"
-        :content-loading="isLoading"
-      />
-
-      <BaseDescriptionListItem
-        v-if="recurringInvoiceStore.newRecurringInvoice?.selectedFrequency"
-        :label="$t('recurring_invoices.frequency.title')"
-        :value="
-          recurringInvoiceStore.newRecurringInvoice?.selectedFrequency?.label
-        "
-        :content-loading="isLoading"
-      />
-    </BaseDescriptionList>
-
-    <BaseHeading class="mt-8">
-      {{ $t('invoices.title', 2) }}
-    </BaseHeading>
-
-    <Invoices />
-  </BaseCard>
-</template>
-
-<script setup>
-import { ref, computed, watch, reactive, inject } from 'vue'
-import { useRoute } from 'vue-router'
-import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
-import Invoices from './Invoices.vue'
-
-const recurringInvoiceStore = useRecurringInvoiceStore()
-
-const route = useRoute()
-
-let isLoading = computed(() => {
-  return recurringInvoiceStore.isFetchingViewData
-})
-
-watch(
-  route,
-  () => {
-    if (route.params.id && route.name === 'recurring-invoices.view') {
-      loadRecurringInvoice()
-    }
-  },
-  { immediate: true }
-)
-
-async function loadRecurringInvoice() {
-  await recurringInvoiceStore.fetchRecurringInvoice(route.params.id)
-}
-</script>
diff --git a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue b/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
deleted file mode 100644
index 4eb8e759..00000000
--- a/resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceViewSidebar.vue
+++ /dev/null
@@ -1,340 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n'
-import { computed, reactive, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { debounce } from 'lodash'
-
-import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
-
-import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
-
-const recurringInvoiceStore = useRecurringInvoiceStore()
-
-const { t } = useI18n()
-const route = useRoute()
-const isLoading = ref(false)
-
-const invoiceList = ref(null)
-const currentPageNumber = ref(1)
-const lastPageNumber = ref(1)
-const invoiceListSection = ref(null)
-
-const searchData = reactive({
-  orderBy: null,
-  orderByField: null,
-  searchText: null,
-})
-
-const getOrderBy = computed(() => {
-  if (searchData.orderBy === 'asc' || searchData.orderBy == null) {
-    return true
-  }
-  return false
-})
-
-function hasActiveUrl(id) {
-  return route.params.id == id
-}
-
-async function loadRecurringInvoices(pageNumber, fromScrollListener = false) {
-  if (isLoading.value) {
-    return
-  }
-
-  let params = {}
-  if (
-    searchData.searchText !== '' &&
-    searchData.searchText !== null &&
-    searchData.searchText !== undefined
-  ) {
-    params.search = searchData.searchText
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    params.orderBy = searchData.orderBy
-  }
-
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    params.orderByField = searchData.orderByField
-  }
-
-  isLoading.value = true
-  let response = await recurringInvoiceStore.fetchRecurringInvoices({
-    page: pageNumber,
-    ...params,
-  })
-  isLoading.value = false
-
-  invoiceList.value = invoiceList.value ? invoiceList.value : []
-  invoiceList.value = [...invoiceList.value, ...response.data.data]
-
-  currentPageNumber.value = pageNumber ? pageNumber : 1
-  lastPageNumber.value = response.data.meta.last_page
-  let invoiceFound = invoiceList.value.find((inv) => inv.id == route.params.id)
-
-  if (
-    fromScrollListener == false &&
-    !invoiceFound &&
-    currentPageNumber.value < lastPageNumber.value &&
-    Object.keys(params).length === 0
-  ) {
-    loadRecurringInvoices(++currentPageNumber.value)
-  }
-
-  if (invoiceFound) {
-    setTimeout(() => {
-      if (fromScrollListener == false) {
-        scrollToRecurringInvoice()
-      }
-    }, 500)
-  }
-}
-
-function scrollToRecurringInvoice() {
-  const el = document.getElementById(`recurring-invoice-${route.params.id}`)
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth' })
-    el.classList.add('shake')
-    addScrollListener()
-  }
-}
-
-function addScrollListener() {
-  invoiceListSection.value.addEventListener('scroll', (ev) => {
-    if (
-      ev.target.scrollTop > 0 &&
-      ev.target.scrollTop + ev.target.clientHeight >
-        ev.target.scrollHeight - 200
-    ) {
-      if (currentPageNumber.value < lastPageNumber.value) {
-        loadRecurringInvoices(++currentPageNumber.value, true)
-      }
-    }
-  })
-}
-
-async function onSearched() {
-  invoiceList.value = []
-  loadRecurringInvoices()
-}
-
-function sortData() {
-  if (searchData.orderBy === 'asc') {
-    searchData.orderBy = 'desc'
-    onSearched()
-    return true
-  }
-  searchData.orderBy = 'asc'
-  onSearched()
-  return true
-}
-
-loadRecurringInvoices()
-onSearched = debounce(onSearched, 500)
-</script>
-
-<template>
-  <!-- sidebar -->
-  <div
-    class="
-      fixed
-      top-0
-      left-0
-      hidden
-      h-full
-      pt-16
-      pb-[6.4rem]
-      ml-56
-      bg-surface
-      xl:ml-64
-      w-88
-      xl:block
-    "
-  >
-    <div
-      class="
-        flex
-        items-center
-        justify-between
-        px-4
-        pt-8
-        pb-2
-        border border-line-default border-solid
-        height-full
-      "
-    >
-      <div class="mb-6">
-        <BaseInput
-          v-model="searchData.searchText"
-          :placeholder="$t('general.search')"
-          type="text"
-          variant="gray"
-          @input="onSearched()"
-        >
-          <template #right>
-            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
-          </template>
-        </BaseInput>
-      </div>
-
-      <div class="flex mb-6 ml-3" role="group" aria-label="First group">
-        <BaseDropdown class="ml-3" position="bottom-start">
-          <template #activator>
-            <BaseButton size="md" variant="gray">
-              <BaseIcon name="FunnelIcon" class="h-5" />
-            </BaseButton>
-          </template>
-          <div
-            class="
-              px-2
-              py-1
-              pb-2
-              mb-1 mb-2
-              text-sm
-              border-b border-line-default border-solid
-            "
-          >
-            {{ $t('general.sort_by') }}
-          </div>
-
-          <BaseDropdownItem class="flex px-1 py-2 cursor-pointer">
-            <BaseInputGroup class="-mt-3 font-normal">
-              <BaseRadio
-                id="filter_next_invoice_date"
-                v-model="searchData.orderByField"
-                :label="$t('recurring_invoices.next_invoice_date')"
-                size="sm"
-                name="filter"
-                value="next_invoice_at"
-                @update:modelValue="onSearched"
-              />
-            </BaseInputGroup>
-          </BaseDropdownItem>
-
-          <BaseDropdownItem class="flex px-1 py-2 cursor-pointer">
-            <BaseInputGroup class="-mt-3 font-normal">
-              <BaseRadio
-                id="filter_start_date"
-                v-model="searchData.orderByField"
-                :label="$t('recurring_invoices.starts_at')"
-                value="starts_at"
-                size="sm"
-                name="filter"
-                @update:modelValue="onSearched"
-              />
-            </BaseInputGroup>
-          </BaseDropdownItem>
-        </BaseDropdown>
-
-        <BaseButton class="ml-1" size="md" variant="gray" @click="sortData">
-          <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
-          <BaseIcon v-else name="SortDescendingIcon" class="h-5" />
-        </BaseButton>
-      </div>
-    </div>
-
-    <div
-      ref="invoiceListSection"
-      class="
-        h-full
-        overflow-y-scroll
-        border-l border-line-default border-solid
-        base-scroll
-      "
-    >
-      <div v-for="(invoice, index) in invoiceList" :key="index">
-        <router-link
-          v-if="invoice"
-          :id="'recurring-invoice-' + invoice.id"
-          :to="`/admin/recurring-invoices/${invoice.id}/view`"
-          :class="[
-            'flex justify-between side-invoice p-4 cursor-pointer hover:bg-hover-strong items-center border-l-4 border-l-transparent',
-            {
-              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
-                hasActiveUrl(invoice.id),
-            },
-          ]"
-          style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
-        >
-          <div class="flex-2">
-            <BaseText
-              :text="invoice.customer.name"
-              class="
-                pr-2
-                mb-2
-                text-sm
-                not-italic
-                font-normal
-                leading-5
-                text-heading
-                capitalize
-                truncate
-              "
-            />
-
-            <div
-              class="
-                mt-1
-                mb-2
-                text-xs
-                not-italic
-                font-medium
-                leading-5
-                text-body
-              "
-            >
-              {{ invoice.invoice_number }}
-            </div>
-            <BaseRecurringInvoiceStatusBadge
-              :status="invoice.status"
-              class="px-1 text-xs"
-            >
-              <BaseRecurringInvoiceStatusLabel :status="invoice.status" />
-            </BaseRecurringInvoiceStatusBadge>
-          </div>
-
-          <div class="flex-1 whitespace-nowrap right">
-            <BaseFormatMoney
-              class="
-                block
-                mb-2
-                text-xl
-                not-italic
-                font-semibold
-                leading-8
-                text-right text-heading
-              "
-              :amount="invoice.total"
-              :currency="invoice.customer.currency"
-            />
-
-            <div
-              class="
-                text-sm
-                not-italic
-                font-normal
-                leading-5
-                text-right text-body
-                est-date
-              "
-            >
-              {{ invoice.formatted_starts_at }}
-            </div>
-          </div>
-        </router-link>
-      </div>
-      <div v-if="isLoading" class="flex justify-center p-4 items-center">
-        <LoadingIcon class="h-6 m-1 animate-spin text-primary-400" />
-      </div>
-      <p
-        v-if="!invoiceList?.length && !isLoading"
-        class="flex justify-center px-4 mt-5 text-sm text-body"
-      >
-        {{ $t('invoices.no_matching_invoices') }}
-      </p>
-    </div>
-  </div>
-</template>
diff --git a/resources/scripts/admin/views/reports/ExpensesReport.vue b/resources/scripts/admin/views/reports/ExpensesReport.vue
deleted file mode 100644
index b6915c32..00000000
--- a/resources/scripts/admin/views/reports/ExpensesReport.vue
+++ /dev/null
@@ -1,266 +0,0 @@
-<template>
-  <div class="grid gap-8 md:grid-cols-12 pt-10">
-    <div class="col-span-8 md:col-span-4">
-      <BaseInputGroup
-        :label="$t('reports.sales.date_range')"
-        class="col-span-12 md:col-span-8"
-      >
-        <BaseMultiselect
-          v-model="selectedRange"
-          :options="dateRange"
-          value-prop="key"
-          track-by="key"
-          label="label"
-          object
-          @update:modelValue="onChangeDateRange"
-        />
-      </BaseInputGroup>
-
-      <div class="flex flex-col mt-6 lg:space-x-3 lg:flex-row">
-        <BaseInputGroup :label="$t('reports.expenses.from_date')">
-          <BaseDatePicker v-model="formData.from_date" />
-        </BaseInputGroup>
-
-        <div
-          class="
-            hidden
-            w-5
-            h-0
-            mx-4
-            border border-gray-400 border-solid
-            xl:block
-          "
-          style="margin-top: 2.5rem"
-        />
-
-        <BaseInputGroup :label="$t('reports.expenses.to_date')">
-          <BaseDatePicker v-model="formData.to_date" />
-        </BaseInputGroup>
-      </div>
-
-      <BaseButton
-        variant="primary-outline"
-        class="content-center hidden mt-0 w-md md:flex md:mt-8"
-        type="submit"
-        @click.prevent="getReports"
-      >
-        {{ $t('reports.update_report') }}
-      </BaseButton>
-    </div>
-
-    <div class="col-span-8">
-      <iframe
-        :src="getReportUrl"
-        class="
-          hidden
-          w-full
-          h-screen
-          border-line-light border-solid
-          rounded
-          md:flex
-        "
-      />
-
-      <a
-        class="
-          flex
-          items-center
-          justify-center
-          h-10
-          px-5
-          py-1
-          text-sm
-          font-medium
-          leading-none
-          text-center text-white
-          rounded
-          whitespace-nowrap
-          md:hidden
-          bg-primary-500
-          cursor-pointer
-        "
-        @click="viewReportsPDF"
-      >
-        <BaseIcon name="DocumentTextIcon" class="h-5 mr-2" />
-        <span>{{ $t('reports.view_pdf') }}</span>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch, reactive } from 'vue'
-import moment from 'moment'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useI18n } from 'vue-i18n'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-const globalStore = useGlobalStore()
-const companyStore = useCompanyStore()
-const { t } = useI18n()
-
-globalStore.downloadReport = downloadReport
-
-const dateRange = reactive([
-  {
-    label: t('dateRange.today'),
-    key: 'Today',
-  },
-  {
-    label: t('dateRange.this_week'),
-    key: 'This Week',
-  },
-  {
-    label: t('dateRange.this_month'),
-    key: 'This Month',
-  },
-  {
-    label: t('dateRange.this_quarter'),
-    key: 'This Quarter',
-  },
-  {
-    label: t('dateRange.this_year'),
-    key: 'This Year',
-  },
-  {
-    label: t('dateRange.previous_week'),
-    key: 'Previous Week',
-  },
-  {
-    label: t('dateRange.previous_month'),
-    key: 'Previous Month',
-  },
-  {
-    label: t('dateRange.previous_quarter'),
-    key: 'Previous Quarter',
-  },
-  {
-    label: t('dateRange.previous_year'),
-    key: 'Previous Year',
-  },
-  {
-    label: t('dateRange.custom'),
-    key: 'Custom',
-  },
-])
-
-const selectedRange = ref(dateRange[2])
-let range = ref(new Date())
-let url = ref(null)
-let siteURL = ref(null)
-
-const formData = reactive({
-  from_date: moment().startOf('month').toString(),
-  to_date: moment().endOf('month').toString(),
-})
-
-const getReportUrl = computed(() => {
-  return url.value
-})
-
-const getSelectedCompany = computed(() => {
-  return companyStore.selectedCompany
-})
-
-const dateRangeUrl = computed(() => {
-  return `${siteURL.value}?from_date=${moment(formData.from_date).format(
-    'YYYY-MM-DD'
-  )}&to_date=${moment(formData.to_date).format('YYYY-MM-DD')}`
-})
-
-onMounted(() => {
-  siteURL.value = `/reports/expenses/${getSelectedCompany.value.unique_hash}`
-  url.value = dateRangeUrl.value
-})
-
-watch(
-  () => range,
-  (newRange) => {
-    formData.from_date = moment(newRange).startOf('year').toString()
-    formData.to_date = moment(newRange).endOf('year').toString()
-  }
-)
-
-function getThisDate(type, time) {
-  return moment()[type](time).format('YYYY-MM-DD')
-}
-
-function getPreDate(type, time) {
-  return moment().subtract(1, time)[type](time).format('YYYY-MM-DD')
-}
-
-function onChangeDateRange() {
-  let key = selectedRange.value.key
-
-  switch (key) {
-    case 'Today':
-      formData.from_date = moment().format('YYYY-MM-DD')
-      formData.to_date = moment().format('YYYY-MM-DD')
-      break
-
-    case 'This Week':
-      formData.from_date = getThisDate('startOf', 'isoWeek')
-      formData.to_date = getThisDate('endOf', 'isoWeek')
-      break
-
-    case 'This Month':
-      formData.from_date = getThisDate('startOf', 'month')
-      formData.to_date = getThisDate('endOf', 'month')
-      break
-
-    case 'This Quarter':
-      formData.from_date = getThisDate('startOf', 'quarter')
-      formData.to_date = getThisDate('endOf', 'quarter')
-      break
-
-    case 'This Year':
-      formData.from_date = getThisDate('startOf', 'year')
-      formData.to_date = getThisDate('endOf', 'year')
-      break
-
-    case 'Previous Week':
-      formData.from_date = getPreDate('startOf', 'isoWeek')
-      formData.to_date = getPreDate('endOf', 'isoWeek')
-      break
-
-    case 'Previous Month':
-      formData.from_date = getPreDate('startOf', 'month')
-      formData.to_date = getPreDate('endOf', 'month')
-      break
-
-    case 'Previous Quarter':
-      formData.from_date = getPreDate('startOf', 'quarter')
-      formData.to_date = getPreDate('endOf', 'quarter')
-      break
-
-    case 'Previous Year':
-      formData.from_date = getPreDate('startOf', 'year')
-      formData.to_date = getPreDate('endOf', 'year')
-      break
-
-    default:
-      break
-  }
-}
-
-async function viewReportsPDF() {
-  let data = await getReports()
-  window.open(getReportUrl.value, '_blank')
-  return data
-}
-
-function getReports() {
-  url.value = dateRangeUrl.value
-  return true
-}
-
-function downloadReport() {
-  if (!getReports()) {
-    return false
-  }
-
-  window.open(getReportUrl.value + '&download=true')
-  setTimeout(() => {
-    url.value = dateRangeUrl.value
-  }, 200)
-}
-</script>
diff --git a/resources/scripts/admin/views/reports/ProfitLossReport.vue b/resources/scripts/admin/views/reports/ProfitLossReport.vue
deleted file mode 100644
index 91449421..00000000
--- a/resources/scripts/admin/views/reports/ProfitLossReport.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<template>
-  <div class="grid gap-8 md:grid-cols-12 pt-10">
-    <div class="col-span-8 md:col-span-4">
-      <BaseInputGroup
-        :label="$t('reports.profit_loss.date_range')"
-        class="col-span-12 md:col-span-8"
-      >
-        <BaseMultiselect
-          v-model="selectedRange"
-          :options="dateRange"
-          value-prop="key"
-          track-by="key"
-          label="label"
-          object
-          @update:modelValue="onChangeDateRange"
-        />
-      </BaseInputGroup>
-
-      <div class="flex flex-col mt-6 lg:space-x-3 lg:flex-row">
-        <BaseInputGroup :label="$t('reports.profit_loss.from_date')">
-          <BaseDatePicker v-model="formData.from_date" />
-        </BaseInputGroup>
-
-        <div
-          class="
-            hidden
-            w-5
-            h-0
-            mx-4
-            border border-gray-400 border-solid
-            xl:block
-          "
-          style="margin-top: 2.5rem"
-        />
-
-        <BaseInputGroup :label="$t('reports.profit_loss.to_date')">
-          <BaseDatePicker v-model="formData.to_date" />
-        </BaseInputGroup>
-      </div>
-
-      <BaseButton
-        variant="primary-outline"
-        class="content-center hidden mt-0 w-md md:flex md:mt-8"
-        type="submit"
-        @click.prevent="getReports"
-      >
-        {{ $t('reports.update_report') }}
-      </BaseButton>
-    </div>
-
-    <div class="col-span-8">
-      <iframe
-        :src="getReportUrl"
-        class="
-          hidden
-          w-full
-          h-screen
-          border-line-light border-solid
-          rounded
-          md:flex
-        "
-      />
-      <a
-        class="
-          flex
-          items-center
-          justify-center
-          h-10
-          px-5
-          py-1
-          text-sm
-          font-medium
-          leading-none
-          text-center text-white
-          rounded
-          whitespace-nowrap
-          md:hidden
-          bg-primary-500
-        "
-        @click="viewReportsPDF"
-      >
-        <BaseIcon name="DocumentTextIcon" class="h-5 mr-2" />
-        <span>{{ $t('reports.view_pdf') }}</span>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch, reactive } from 'vue'
-import moment from 'moment'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useI18n } from 'vue-i18n'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-const globalStore = useGlobalStore()
-const companyStore = useCompanyStore()
-const { t } = useI18n()
-
-globalStore.downloadReport = downloadReport
-
-const dateRange = reactive([
-  {
-    label: t('dateRange.today'),
-    key: 'Today',
-  },
-  {
-    label: t('dateRange.this_week'),
-    key: 'This Week',
-  },
-  {
-    label: t('dateRange.this_month'),
-    key: 'This Month',
-  },
-  {
-    label: t('dateRange.this_quarter'),
-    key: 'This Quarter',
-  },
-  {
-    label: t('dateRange.this_year'),
-    key: 'This Year',
-  },
-  {
-    label: t('dateRange.previous_week'),
-    key: 'Previous Week',
-  },
-  {
-    label: t('dateRange.previous_month'),
-    key: 'Previous Month',
-  },
-  {
-    label: t('dateRange.previous_quarter'),
-    key: 'Previous Quarter',
-  },
-  {
-    label: t('dateRange.previous_year'),
-    key: 'Previous Year',
-  },
-  {
-    label: t('dateRange.custom'),
-    key: 'Custom',
-  },
-])
-
-const selectedRange = ref(dateRange[2])
-let url = ref(null)
-let siteURL = ref(null)
-let range = ref(new Date())
-
-const formData = reactive({
-  from_date: moment().startOf('month').toString(),
-  to_date: moment().endOf('month').toString(),
-})
-
-const getReportUrl = computed(() => {
-  return url.value
-})
-
-const getSelectedCompany = computed(() => {
-  return companyStore.selectedCompany
-})
-
-const dateRangeUrl = computed(() => {
-  return `${siteURL.value}?from_date=${moment(formData.from_date).format(
-    'YYYY-MM-DD'
-  )}&to_date=${moment(formData.to_date).format('YYYY-MM-DD')}`
-})
-
-watch(range, (newRange) => {
-  formData.from_date = moment(newRange).startOf('year').toString()
-  formData.to_date = moment(newRange).endOf('year').toString()
-})
-
-onMounted(() => {
-  siteURL.value = `/reports/profit-loss/${getSelectedCompany.value.unique_hash}`
-  url.value = dateRangeUrl.value
-})
-
-function getThisDate(type, time) {
-  return moment()[type](time).format('YYYY-MM-DD')
-}
-
-function getPreDate(type, time) {
-  return moment().subtract(1, time)[type](time).format('YYYY-MM-DD')
-}
-
-function onChangeDateRange() {
-  let key = selectedRange.value.key
-
-  switch (key) {
-    case 'Today':
-      formData.from_date = moment().format('YYYY-MM-DD')
-      formData.to_date = moment().format('YYYY-MM-DD')
-      break
-
-    case 'This Week':
-      formData.from_date = getThisDate('startOf', 'isoWeek')
-      formData.to_date = getThisDate('endOf', 'isoWeek')
-      break
-
-    case 'This Month':
-      formData.from_date = getThisDate('startOf', 'month')
-      formData.to_date = getThisDate('endOf', 'month')
-      break
-
-    case 'This Quarter':
-      formData.from_date = getThisDate('startOf', 'quarter')
-      formData.to_date = getThisDate('endOf', 'quarter')
-      break
-
-    case 'This Year':
-      formData.from_date = getThisDate('startOf', 'year')
-      formData.to_date = getThisDate('endOf', 'year')
-      break
-
-    case 'Previous Week':
-      formData.from_date = getPreDate('startOf', 'isoWeek')
-      formData.to_date = getPreDate('endOf', 'isoWeek')
-      break
-
-    case 'Previous Month':
-      formData.from_date = getPreDate('startOf', 'month')
-      formData.to_date = getPreDate('endOf', 'month')
-      break
-
-    case 'Previous Quarter':
-      formData.from_date = getPreDate('startOf', 'quarter')
-      formData.to_date = getPreDate('endOf', 'quarter')
-      break
-
-    case 'Previous Year':
-      formData.from_date = getPreDate('startOf', 'year')
-      formData.to_date = getPreDate('endOf', 'year')
-      break
-
-    default:
-      break
-  }
-}
-
-async function viewReportsPDF() {
-  let data = await getReports()
-  window.open(getReportUrl.value, '_blank')
-  return data
-}
-
-function getReports() {
-  url.value = dateRangeUrl.value
-  return true
-}
-
-function downloadReport() {
-  if (!getReports()) {
-    return false
-  }
-
-  window.open(getReportUrl.value + '&download=true')
-  setTimeout(() => {
-    url.value = dateRangeUrl.value
-  }, 200)
-}
-</script>
diff --git a/resources/scripts/admin/views/reports/SalesReports.vue b/resources/scripts/admin/views/reports/SalesReports.vue
deleted file mode 100644
index 3d53543a..00000000
--- a/resources/scripts/admin/views/reports/SalesReports.vue
+++ /dev/null
@@ -1,308 +0,0 @@
-<template>
-  <div class="grid gap-8 md:grid-cols-12 pt-10">
-    <div class="col-span-8 md:col-span-4">
-      <BaseInputGroup
-        :label="$t('reports.sales.date_range')"
-        class="col-span-12 md:col-span-8"
-      >
-        <BaseMultiselect
-          v-model="selectedRange"
-          :options="dateRange"
-          value-prop="key"
-          track-by="key"
-          label="label"
-          object
-          @update:modelValue="onChangeDateRange"
-        />
-      </BaseInputGroup>
-
-      <div class="flex flex-col my-6 lg:space-x-3 lg:flex-row">
-        <BaseInputGroup :label="$t('reports.sales.from_date')">
-          <BaseDatePicker v-model="formData.from_date" />
-        </BaseInputGroup>
-
-        <div
-          class="
-            hidden
-            w-5
-            h-0
-            mx-4
-            border border-gray-400 border-solid
-            xl:block
-          "
-          style="margin-top: 2.5rem"
-        />
-
-        <BaseInputGroup :label="$t('reports.sales.to_date')">
-          <BaseDatePicker v-model="formData.to_date" />
-        </BaseInputGroup>
-      </div>
-
-      <BaseInputGroup
-        :label="$t('reports.sales.report_type')"
-        class="col-span-12 md:col-span-8"
-      >
-        <BaseMultiselect
-          v-model="selectedType"
-          :options="reportTypes"
-          :placeholder="$t('reports.sales.report_type')"
-          class="mt-1"
-          @update:modelValue="getInitialReport"
-        />
-      </BaseInputGroup>
-
-      <BaseButton
-        variant="primary-outline"
-        class="content-center hidden mt-0 w-md md:flex md:mt-8"
-        type="submit"
-        @click.prevent="getReports"
-      >
-        {{ $t('reports.update_report') }}
-      </BaseButton>
-    </div>
-
-    <div class="col-span-8">
-      <iframe
-        :src="getReportUrl"
-        class="
-          hidden
-          w-full
-          h-screen
-          border-line-light border-solid
-          rounded
-          md:flex
-        "
-      />
-
-      <a
-        class="
-          flex
-          items-center
-          justify-center
-          h-10
-          px-5
-          py-1
-          text-sm
-          font-medium
-          leading-none
-          text-center text-white
-          rounded
-          whitespace-nowrap
-          md:hidden
-          bg-primary-500
-        "
-        @click="viewReportsPDF"
-      >
-        <BaseIcon name="DocumentTextIcon" class="h-5 mr-2" />
-        <span>{{ $t('reports.view_pdf') }}</span>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch, reactive } from 'vue'
-import moment from 'moment'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useI18n } from 'vue-i18n'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-
-const { t } = useI18n()
-const globalStore = useGlobalStore()
-
-globalStore.downloadReport = downloadReport
-
-const dateRange = reactive([
-  {
-    label: t('dateRange.today'),
-    key: 'Today',
-  },
-  {
-    label: t('dateRange.this_week'),
-    key: 'This Week',
-  },
-  {
-    label: t('dateRange.this_month'),
-    key: 'This Month',
-  },
-  {
-    label: t('dateRange.this_quarter'),
-    key: 'This Quarter',
-  },
-  {
-    label: t('dateRange.this_year'),
-    key: 'This Year',
-  },
-  {
-    label: t('dateRange.previous_week'),
-    key: 'Previous Week',
-  },
-  {
-    label: t('dateRange.previous_month'),
-    key: 'Previous Month',
-  },
-  {
-    label: t('dateRange.previous_quarter'),
-    key: 'Previous Quarter',
-  },
-  {
-    label: t('dateRange.previous_year'),
-    key: 'Previous Year',
-  },
-  {
-    label: t('dateRange.custom'),
-    key: 'Custom',
-  },
-])
-
-const selectedRange = ref(dateRange[2])
-const reportTypes = ref([
-  {
-    label: t('reports.sales.sort.by_customer'),
-    value: 'By Customer'
-  },
-  {
-    label: t('reports.sales.sort.by_item'),
-    value: 'By Item'
-  }
-])
-const selectedType = ref('By Customer')
-let range = ref(new Date())
-let url = ref(null)
-let customerSiteURL = ref(null)
-let itemsSiteURL = ref(null)
-
-let formData = reactive({
-  from_date: moment().startOf('month').format('YYYY-MM-DD').toString(),
-  to_date: moment().endOf('month').format('YYYY-MM-DD').toString(),
-})
-
-const companyStore = useCompanyStore()
-
-const getReportUrl = computed(() => {
-  return url.value
-})
-
-const getSelectedCompany = computed(() => {
-  return companyStore.selectedCompany
-})
-
-const customerDateRangeUrl = computed(() => {
-  return `${customerSiteURL.value}?from_date=${moment(
-    formData.from_date
-  ).format('YYYY-MM-DD')}&to_date=${moment(formData.to_date).format(
-    'YYYY-MM-DD'
-  )}`
-})
-
-const itemDaterangeUrl = computed(() => {
-  return `${itemsSiteURL.value}?from_date=${moment(formData.from_date).format(
-    'YYYY-MM-DD'
-  )}&to_date=${moment(formData.to_date).format('YYYY-MM-DD')}`
-})
-
-watch(range, (newRange) => {
-  formData.from_date = moment(newRange).startOf('year').toString()
-  formData.to_date = moment(newRange).endOf('year').toString()
-})
-
-onMounted(() => {
-  customerSiteURL.value = `/reports/sales/customers/${getSelectedCompany.value.unique_hash}`
-  itemsSiteURL.value = `/reports/sales/items/${getSelectedCompany.value.unique_hash}`
-  getInitialReport()
-})
-
-function getThisDate(type, time) {
-  return moment()[type](time).format('YYYY-MM-DD')
-}
-
-function getPreDate(type, time) {
-  return moment().subtract(1, time)[type](time).format('YYYY-MM-DD')
-}
-
-function onChangeDateRange() {
-  let key = selectedRange.value.key
-
-  switch (key) {
-    case 'Today':
-      formData.from_date = moment().format('YYYY-MM-DD')
-      formData.to_date = moment().format('YYYY-MM-DD')
-      break
-    case 'This Week':
-      formData.from_date = getThisDate('startOf', 'isoWeek')
-      formData.to_date = getThisDate('endOf', 'isoWeek')
-      break
-    case 'This Month':
-      formData.from_date = getThisDate('startOf', 'month')
-      formData.to_date = getThisDate('endOf', 'month')
-      break
-    case 'This Quarter':
-      formData.from_date = getThisDate('startOf', 'quarter')
-      formData.to_date = getThisDate('endOf', 'quarter')
-      break
-    case 'This Year':
-      formData.from_date = getThisDate('startOf', 'year')
-      formData.to_date = getThisDate('endOf', 'year')
-      break
-    case 'Previous Week':
-      formData.from_date = getPreDate('startOf', 'isoWeek')
-      formData.to_date = getPreDate('endOf', 'isoWeek')
-      break
-    case 'Previous Month':
-      formData.from_date = getPreDate('startOf', 'month')
-      formData.to_date = getPreDate('endOf', 'month')
-      break
-    case 'Previous Quarter':
-      formData.from_date = getPreDate('startOf', 'quarter')
-      formData.to_date = getPreDate('endOf', 'quarter')
-      break
-    case 'Previous Year':
-      formData.from_date = getPreDate('startOf', 'year')
-      formData.to_date = getPreDate('endOf', 'year')
-      break
-    default:
-      break
-  }
-}
-
-async function getInitialReport() {
-  if (selectedType.value === 'By Customer') {
-    url.value = customerDateRangeUrl.value
-    return true
-  }
-  url.value = itemDaterangeUrl.value
-  return true
-}
-
-async function viewReportsPDF() {
-  let data = await getReports()
-  window.open(getReportUrl.value, '_blank')
-  return data
-}
-
-function getReports() {
-  if (selectedType.value === 'By Customer') {
-    url.value = customerDateRangeUrl.value
-    return true
-  }
-  url.value = itemDaterangeUrl.value
-  return true
-}
-
-function downloadReport() {
-  if (!getReports()) {
-    return false
-  }
-
-  window.open(getReportUrl.value + '&download=true')
-
-  setTimeout(() => {
-    if (selectedType.value === 'By Customer') {
-      url.value = customerDateRangeUrl.value
-      return true
-    }
-    url.value = itemDaterangeUrl.value
-    return true
-  }, 200)
-}
-</script>
diff --git a/resources/scripts/admin/views/reports/TaxReport.vue b/resources/scripts/admin/views/reports/TaxReport.vue
deleted file mode 100644
index 461a547b..00000000
--- a/resources/scripts/admin/views/reports/TaxReport.vue
+++ /dev/null
@@ -1,264 +0,0 @@
-<template>
-  <div class="grid gap-8 md:grid-cols-12 pt-10">
-    <div class="col-span-8 md:col-span-4">
-      <BaseInputGroup
-        :label="$t('reports.taxes.date_range')"
-        class="col-span-12 md:col-span-8"
-      >
-        <BaseMultiselect
-          v-model="selectedRange"
-          :options="dateRange"
-          value-prop="key"
-          track-by="key"
-          label="label"
-          object
-          @update:modelValue="onChangeDateRange"
-        />
-      </BaseInputGroup>
-
-      <div class="flex flex-col mt-6 lg:space-x-3 lg:flex-row">
-        <BaseInputGroup :label="$t('reports.taxes.from_date')">
-          <BaseDatePicker v-model="formData.from_date" />
-        </BaseInputGroup>
-
-        <div
-          class="
-            hidden
-            w-5
-            h-0
-            mx-4
-            border border-gray-400 border-solid
-            xl:block
-          "
-          style="margin-top: 2.5rem"
-        />
-
-        <BaseInputGroup :label="$t('reports.taxes.to_date')">
-          <BaseDatePicker v-model="formData.to_date" />
-        </BaseInputGroup>
-      </div>
-
-      <BaseButton
-        variant="primary-outline"
-        class="content-center hidden mt-0 w-md md:flex md:mt-8"
-        type="submit"
-        @click.prevent="getReports"
-      >
-        {{ $t('reports.update_report') }}
-      </BaseButton>
-    </div>
-    <div class="col-span-8">
-      <iframe
-        :src="getReportUrl"
-        class="
-          hidden
-          w-full
-          h-screen
-          border-line-light border-solid
-          rounded
-          md:flex
-        "
-      />
-      <a
-        class="
-          flex
-          items-center
-          justify-center
-          h-10
-          px-5
-          py-1
-          text-sm
-          font-medium
-          leading-none
-          text-center text-white
-          rounded
-          whitespace-nowrap
-          md:hidden
-          bg-primary-500
-        "
-        @click="viewReportsPDF"
-      >
-        <BaseIcon name="DocumentTextIcon" class="h-5 mr-2" />
-        <span>{{ $t('reports.view_pdf') }}</span>
-      </a>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch, reactive } from 'vue'
-import moment from 'moment'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useI18n } from 'vue-i18n'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-const globalStore = useGlobalStore()
-
-globalStore.downloadReport = downloadReport
-
-const { t } = useI18n()
-
-const dateRange = reactive([
-  {
-    label: t('dateRange.today'),
-    key: 'Today',
-  },
-  {
-    label: t('dateRange.this_week'),
-    key: 'This Week',
-  },
-  {
-    label: t('dateRange.this_month'),
-    key: 'This Month',
-  },
-  {
-    label: t('dateRange.this_quarter'),
-    key: 'This Quarter',
-  },
-  {
-    label: t('dateRange.this_year'),
-    key: 'This Year',
-  },
-  {
-    label: t('dateRange.previous_week'),
-    key: 'Previous Week',
-  },
-  {
-    label: t('dateRange.previous_month'),
-    key: 'Previous Month',
-  },
-  {
-    label: t('dateRange.previous_quarter'),
-    key: 'Previous Quarter',
-  },
-  {
-    label: t('dateRange.previous_year'),
-    key: 'Previous Year',
-  },
-  {
-    label: t('dateRange.custom'),
-    key: 'Custom',
-  },
-])
-
-const selectedRange = ref(dateRange[2])
-
-const formData = reactive({
-  from_date: moment().startOf('month').format('YYYY-MM-DD').toString(),
-  to_date: moment().endOf('month').format('YYYY-MM-DD').toString(),
-})
-
-let url = ref(null)
-
-const getReportUrl = computed(() => {
-  return url.value
-})
-const companyStore = useCompanyStore()
-
-const getSelectedCompany = computed(() => {
-  return companyStore.selectedCompany
-})
-
-let siteURL = ref(null)
-
-onMounted(() => {
-  siteURL.value = `/reports/tax-summary/${getSelectedCompany.value.unique_hash}`
-  url.value = dateRangeUrl.value
-})
-
-const dateRangeUrl = computed(() => {
-  return `${siteURL.value}?from_date=${moment(formData.from_date).format(
-    'YYYY-MM-DD'
-  )}&to_date=${moment(formData.to_date).format('YYYY-MM-DD')}`
-})
-
-let range = ref(new Date())
-
-watch(range.value, (newRange) => {
-  formData.from_date = moment(newRange).startOf('year').toString()
-  formData.to_date = moment(newRange).endOf('year').toString()
-})
-
-function getThisDate(type, time) {
-  return moment()[type](time).format('YYYY-MM-DD')
-}
-
-function getPreDate(type, time) {
-  return moment().subtract(1, time)[type](time).format('YYYY-MM-DD')
-}
-
-function onChangeDateRange() {
-  let key = selectedRange.value.key
-
-  switch (key) {
-    case 'Today':
-      formData.from_date = moment().format('YYYY-MM-DD')
-      formData.to_date = moment().format('YYYY-MM-DD')
-      break
-
-    case 'This Week':
-      formData.from_date = getThisDate('startOf', 'isoWeek')
-      formData.to_date = getThisDate('endOf', 'isoWeek')
-      break
-
-    case 'This Month':
-      formData.from_date = getThisDate('startOf', 'month')
-      formData.to_date = getThisDate('endOf', 'month')
-      break
-
-    case 'This Quarter':
-      formData.from_date = getThisDate('startOf', 'quarter')
-      formData.to_date = getThisDate('endOf', 'quarter')
-      break
-
-    case 'This Year':
-      formData.from_date = getThisDate('startOf', 'year')
-      formData.to_date = getThisDate('endOf', 'year')
-      break
-
-    case 'Previous Week':
-      formData.from_date = getPreDate('startOf', 'isoWeek')
-      formData.to_date = getPreDate('endOf', 'isoWeek')
-      break
-
-    case 'Previous Month':
-      formData.from_date = getPreDate('startOf', 'month')
-      formData.to_date = getPreDate('endOf', 'month')
-      break
-
-    case 'Previous Quarter':
-      formData.from_date = getPreDate('startOf', 'quarter')
-      formData.to_date = getPreDate('endOf', 'quarter')
-      break
-
-    case 'Previous Year':
-      formData.from_date = getPreDate('startOf', 'year')
-      formData.to_date = getPreDate('endOf', 'year')
-      break
-
-    default:
-      break
-  }
-}
-
-async function viewReportsPDF() {
-  let data = await getReports()
-  window.open(getReportUrl.value, '_blank')
-  return data
-}
-
-function getReports() {
-  url.value = dateRangeUrl.value
-  return true
-}
-
-function downloadReport() {
-  if (!getReports()) {
-    return false
-  }
-
-  window.open(getReportUrl.value + '&download=true')
-  setTimeout(() => {
-    url.value = dateRangeUrl.value
-  }, 200)
-}
-</script>
diff --git a/resources/scripts/admin/views/reports/layout/Index.vue b/resources/scripts/admin/views/reports/layout/Index.vue
deleted file mode 100644
index c3465dac..00000000
--- a/resources/scripts/admin/views/reports/layout/Index.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <BasePage>
-    <BasePageHeader :title="$t('reports.report', 2)">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="/admin/dashboard" />
-        <BaseBreadcrumbItem
-          :title="$t('reports.report', 2)"
-          to="/admin/reports"
-          active
-        />
-      </BaseBreadcrumb>
-      <template #actions>
-        <BaseButton variant="primary" class="ml-4" @click="onDownload">
-          <template #left="slotProps">
-            <BaseIcon name="ArrowDownTrayIcon" :class="slotProps.class" />
-          </template>
-          {{ $t('reports.download_pdf') }}
-        </BaseButton>
-      </template>
-    </BasePageHeader>
-
-    <!-- Tabs -->
-    <BaseTabGroup class="p-2">
-      <BaseTab
-        :title="$t('reports.sales.sales')"
-        tab-panel-container="px-0 py-0"
-      >
-        <SalesReport ref="report" />
-      </BaseTab>
-      <BaseTab
-        :title="$t('reports.profit_loss.profit_loss')"
-        tab-panel-container="px-0 py-0"
-      >
-        <ProfitLossReport ref="report" />
-      </BaseTab>
-      <BaseTab
-        :title="$t('reports.expenses.expenses')"
-        tab-panel-container="px-0 py-0"
-      >
-        <ExpenseReport ref="report" />
-      </BaseTab>
-      <BaseTab
-        :title="$t('reports.taxes.taxes')"
-        tab-panel-container="px-0 py-0"
-      >
-        <TaxReport ref="report" />
-      </BaseTab>
-    </BaseTabGroup>
-  </BasePage>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import SalesReport from '../SalesReports.vue'
-import ExpenseReport from '../ExpensesReport.vue'
-import ProfitLossReport from '../ProfitLossReport.vue'
-import TaxReport from '../TaxReport.vue'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-
-const globalStore = useGlobalStore()
-
-function onDownload() {
-  globalStore.downloadReport()
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/BackupSetting.vue b/resources/scripts/admin/views/settings/BackupSetting.vue
deleted file mode 100644
index 625e1932..00000000
--- a/resources/scripts/admin/views/settings/BackupSetting.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<template>
-  <BackupModal />
-
-  <BaseSettingCard
-    :title="$t('settings.backup.title', 1)"
-    :description="$t('settings.backup.description')"
-  >
-    <template #action>
-      <BaseButton variant="primary-outline" @click="onCreateNewBackup">
-        <template #left="slotProps">
-          <BaseIcon :class="slotProps.class" name="PlusIcon" />
-        </template>
-        {{ $t('settings.backup.new_backup') }}
-      </BaseButton>
-    </template>
-
-    <div class="grid my-14 md:grid-cols-3">
-      <BaseInputGroup
-        :label="$t('settings.disk.select_disk')"
-        :content-loading="isFetchingInitialData"
-      >
-        <BaseMultiselect
-          v-model="filters.selected_disk"
-          :content-loading="isFetchingInitialData"
-          :options="getDisksOptions"
-          track-by="name"
-          :placeholder="$t('settings.disk.select_disk')"
-          label="name"
-          :searchable="true"
-          object
-          class="w-full"
-          value-prop="id"
-          @select="refreshTable"
-        >
-        </BaseMultiselect>
-      </BaseInputGroup>
-    </div>
-
-    <BaseTable
-      ref="table"
-      class="mt-10"
-      :show-filter="false"
-      :data="fetchBackupsData"
-      :columns="backupColumns"
-    >
-      <template #cell-actions="{ row }">
-        <BaseDropdown>
-          <template #activator>
-            <div class="inline-block">
-              <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
-            </div>
-          </template>
-
-          <BaseDropdownItem @click="onDownloadBckup(row.data)">
-            <BaseIcon name="CloudArrowDownIcon" class="mr-3 text-body" />
-
-            {{ $t('general.download') }}
-          </BaseDropdownItem>
-
-          <BaseDropdownItem @click="onRemoveBackup(row.data)">
-            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </template>
-    </BaseTable>
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import { useBackupStore } from '@/scripts/admin/stores/backup'
-import { computed, ref, reactive, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useDiskStore } from '@/scripts/admin/stores/disk'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useModalStore } from '@/scripts/stores/modal'
-import BackupModal from '@/scripts/admin/components/modal-components/BackupModal.vue'
-
-const dialogStore = useDialogStore()
-const backupStore = useBackupStore()
-const modalStore = useModalStore()
-const diskStore = useDiskStore()
-const { t } = useI18n()
-
-const filters = reactive({
-  selected_disk: { driver: 'local' },
-})
-
-const table = ref('')
-let isFetchingInitialData = ref(true)
-
-const backupColumns = computed(() => {
-  return [
-    {
-      key: 'path',
-      label: t('settings.backup.path'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'created_at',
-      label: t('settings.backup.created_at'),
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'size',
-      label: t('settings.backup.size'),
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-const getDisksOptions = computed(() => {
-  return diskStore.disks.map((disk) => {
-    return {
-      ...disk,
-      name: disk.name + ' — ' + '[' + disk.driver + ']',
-    }
-  })
-})
-
-loadDisksData()
-
-function onRemoveBackup(backup) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('settings.backup.backup_confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        let data = {
-          disk: filters.selected_disk.driver,
-          file_disk_id: filters.selected_disk.id,
-          path: backup.path,
-        }
-
-        let response = await backupStore.removeBackup(data)
-
-        if (response.data.success || response.data.backup) {
-          table.value && table.value.refresh()
-          return true
-        }
-      }
-    })
-}
-
-function refreshTable() {
-  setTimeout(() => {
-    table.value.refresh()
-  }, 100)
-}
-
-async function loadDisksData() {
-  isFetchingInitialData.value = true
-  let res = await diskStore.fetchDisks({ limit: 'all' })
-  if (res.data.error) {
-  }
-  filters.selected_disk = res.data.data.find((disk) => disk.set_as_default == 1) ?? res.data.data[0]
-  isFetchingInitialData.value = false
-}
-
-async function fetchBackupsData({ page, filter, sort }) {
-  let data = {
-    disk: filters.selected_disk.driver,
-    file_disk_id: filters.selected_disk.id,
-  }
-
-  isFetchingInitialData.value = true
-
-  let response = await backupStore.fetchBackups(data)
-
-  isFetchingInitialData.value = false
-
-  return {
-    data: response.data.backups,
-    pagination: {
-      totalPages: 1,
-      currentPage: 1,
-    },
-  }
-}
-
-async function onCreateNewBackup() {
-  modalStore.openModal({
-    title: t('settings.backup.create_backup'),
-    componentName: 'BackupModal',
-    refreshData: table.value && table.value.refresh,
-    size: 'sm',
-  })
-}
-
-async function onDownloadBckup(backup) {
-  isFetchingInitialData.value = true
-  window
-    .axios({
-      method: 'GET',
-      url: '/api/v1/download-backup',
-      responseType: 'blob',
-      params: {
-        disk: filters.selected_disk.driver,
-        file_disk_id: filters.selected_disk.id,
-        path: backup.path,
-      },
-    })
-    .then((response) => {
-      const url = window.URL.createObjectURL(new Blob([response.data]))
-      const link = document.createElement('a')
-      link.href = url
-      link.setAttribute('download', backup.path.split('/')[1])
-      document.body.appendChild(link)
-      link.click()
-      isFetchingInitialData.value = false
-    })
-    .catch((e) => {
-      isFetchingInitialData.value = false
-    })
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/CompanyInfoSettings.vue b/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
deleted file mode 100644
index a5c0d442..00000000
--- a/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<template>
-  <form @submit.prevent="updateCompanyData">
-    <BaseSettingCard
-      :title="$t('settings.company_info.company_info')"
-      :description="$t('settings.company_info.section_description')"
-    >
-      <BaseInputGrid class="mt-5">
-        <BaseInputGroup :label="$t('settings.company_info.company_logo')">
-          <BaseFileUploader
-            v-model="previewLogo"
-            base64
-            @change="onFileInputChange"
-            @remove="onFileInputRemove"
-          />
-        </BaseInputGroup>
-      </BaseInputGrid>
-
-      <BaseInputGrid class="mt-5">
-        <BaseInputGroup
-          :label="$t('settings.company_info.company_name')"
-          :error="v$.name.$error && v$.name.$errors[0].$message"
-          required
-        >
-          <BaseInput
-            v-model="companyForm.name"
-            :invalid="v$.name.$error"
-            @blur="v$.name.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup :label="$t('settings.company_info.phone')">
-          <BaseInput v-model="companyForm.address.phone" />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.company_info.country')"
-          :error="
-            v$.address.country_id.$error &&
-            v$.address.country_id.$errors[0].$message
-          "
-          required
-        >
-          <BaseMultiselect
-            v-model="companyForm.address.country_id"
-            label="name"
-            :invalid="v$.address.country_id.$error"
-            :options="globalStore.countries"
-            value-prop="id"
-            :can-deselect="true"
-            :can-clear="false"
-            searchable
-            track-by="name"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup :label="$t('settings.company_info.state')">
-          <BaseInput
-            v-model="companyForm.address.state"
-            name="state"
-            type="text"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup :label="$t('settings.company_info.city')">
-          <BaseInput v-model="companyForm.address.city" type="text" />
-        </BaseInputGroup>
-
-        <BaseInputGroup :label="$t('settings.company_info.zip')">
-          <BaseInput v-model="companyForm.address.zip" />
-        </BaseInputGroup>
-
-        <div>
-          <BaseInputGroup :label="$t('settings.company_info.address')">
-            <BaseTextarea
-              v-model="companyForm.address.address_street_1"
-              rows="2"
-            />
-          </BaseInputGroup>
-
-          <BaseTextarea
-            v-model="companyForm.address.address_street_2"
-            rows="2"
-            :row="2"
-            class="mt-2"
-          />
-        </div>
-
-        <div class="space-y-6">
-          <BaseInputGroup :label="$t('settings.company_info.tax_id')">
-            <BaseInput v-model="companyForm.tax_id" type="text" />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('settings.company_info.vat_id')">
-            <BaseInput v-model="companyForm.vat_id" type="text" />
-          </BaseInputGroup>
-        </div>
-      </BaseInputGrid>
-
-      <BaseButton
-        :loading="isSaving"
-        :disabled="isSaving"
-        type="submit"
-        class="mt-6"
-      >
-        <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
-        </template>
-        {{ $t('settings.company_info.save') }}
-      </BaseButton>
-
-      <div v-if="companyStore.companies.length !== 1" class="py-5">
-        <BaseDivider class="my-4" />
-        <h3 class="text-lg leading-6 font-medium text-heading">
-          {{ $t('settings.company_info.delete_company') }}
-        </h3>
-        <div class="mt-2 max-w-xl text-sm text-muted">
-          <p>
-            {{ $t('settings.company_info.delete_company_description') }}
-          </p>
-        </div>
-        <div class="mt-5">
-          <button
-            type="button"
-            class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
-            @click="removeCompany"
-          >
-            {{ $t('general.delete') }}
-          </button>
-        </div>
-      </div>
-    </BaseSettingCard>
-  </form>
-  <DeleteCompanyModal />
-</template>
-
-<script setup>
-import { reactive, ref, inject, computed } from 'vue'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useI18n } from 'vue-i18n'
-import { required, minLength, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useModalStore } from '@/scripts/stores/modal'
-import DeleteCompanyModal from '@/scripts/admin/components/modal-components/DeleteCompanyModal.vue'
-
-const companyStore = useCompanyStore()
-const globalStore = useGlobalStore()
-const modalStore = useModalStore()
-const { t } = useI18n()
-const utils = inject('utils')
-
-let isSaving = ref(false)
-
-const companyForm = reactive({
-  name: null,
-  logo: null,
-  tax_id: null,
-  vat_id: null,
-  address: {
-    address_street_1: '',
-    address_street_2: '',
-    website: '',
-    country_id: null,
-    state: '',
-    city: '',
-    phone: '',
-    zip: '',
-  },
-})
-
-utils.mergeSettings(companyForm, {
-  ...companyStore.selectedCompany,
-})
-
-let previewLogo = ref([])
-let logoFileBlob = ref(null)
-let logoFileName = ref(null)
-const isCompanyLogoRemoved = ref(false)
-
-if (companyForm.logo) {
-  previewLogo.value.push({
-    image: companyForm.logo,
-  })
-}
-
-const rules = computed(() => {
-  return {
-    name: {
-      required: helpers.withMessage(t('validation.required'), required),
-      minLength: helpers.withMessage(
-        t('validation.name_min_length'),
-        minLength(3),
-      ),
-    },
-    address: {
-      country_id: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => companyForm),
-)
-
-globalStore.fetchCountries()
-
-function onFileInputChange(fileName, file, fileCount, fileList) {
-  logoFileName.value = fileList.name
-  logoFileBlob.value = file
-}
-
-function onFileInputRemove() {
-  logoFileBlob.value = null
-  isCompanyLogoRemoved.value = true
-}
-
-async function updateCompanyData() {
-  v$.value.$touch()
-
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-
-  const res = await companyStore.updateCompany(companyForm)
-
-  if (res.data.data) {
-    if (logoFileBlob.value || isCompanyLogoRemoved.value) {
-      let logoData = new FormData()
-
-      if (logoFileBlob.value) {
-        logoData.append(
-          'company_logo',
-          JSON.stringify({
-            name: logoFileName.value,
-            data: logoFileBlob.value,
-          }),
-        )
-      }
-      logoData.append('is_company_logo_removed', isCompanyLogoRemoved.value)
-
-      await companyStore.updateCompanyLogo(logoData)
-      logoFileBlob.value = null
-      isCompanyLogoRemoved.value = false
-    }
-
-    isSaving.value = false
-  }
-  isSaving.value = false
-}
-function removeCompany(id) {
-  modalStore.openModal({
-    title: t('settings.company_info.are_you_absolutely_sure'),
-    componentName: 'DeleteCompanyModal',
-    size: 'sm',
-  })
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/CompanyMailConfigSetting.vue b/resources/scripts/admin/views/settings/CompanyMailConfigSetting.vue
deleted file mode 100644
index 6aa5a75d..00000000
--- a/resources/scripts/admin/views/settings/CompanyMailConfigSetting.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <MailTestModal :store-type="'company'" />
-
-  <BaseSettingCard
-    :title="$t('settings.mail.company_mail_config')"
-    :description="$t('settings.mail.company_mail_config_desc')"
-  >
-    <div class="mt-8">
-      <BaseSwitchSection
-        v-model="useCustomMailConfig"
-        :title="$t('settings.mail.use_custom_mail_config')"
-        :description="$t('settings.mail.use_custom_mail_config_desc')"
-      />
-    </div>
-
-    <div v-if="useCustomMailConfig && companyMailStore.mailConfigData" class="mt-8">
-      <component
-        :is="mailDriver"
-        :config-data="companyMailStore.mailConfigData"
-        :is-saving="isSaving"
-        :mail-drivers="companyMailStore.mail_drivers"
-        :is-fetching-initial-data="isFetchingInitialData"
-        @on-change-driver="(val) => changeDriver(val)"
-        @submit-data="saveEmailConfig"
-      >
-        <BaseButton
-          variant="primary-outline"
-          type="button"
-          class="ml-2"
-          :content-loading="isFetchingInitialData"
-          @click="openMailTestModal"
-        >
-          {{ $t('general.test_mail_conf') }}
-        </BaseButton>
-      </component>
-    </div>
-
-    <div v-if="!useCustomMailConfig" class="mt-4 p-4 rounded-lg bg-green-500/10 border border-green-500/20 text-sm text-status-green flex items-center">
-      <BaseIcon name="CheckCircleIcon" class="w-5 h-5 mr-2 shrink-0" />
-      {{ $t('settings.mail.using_global_mail_config') }}
-    </div>
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import Smtp from '@/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue'
-import Mailgun from '@/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue'
-import Ses from '@/scripts/admin/views/settings/mail-driver/SesMailDriver.vue'
-import Basic from '@/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue'
-import { ref, computed, watch } from 'vue'
-import { useCompanyMailStore } from '@/scripts/admin/stores/company-mail'
-import { useModalStore } from '@/scripts/stores/modal'
-import MailTestModal from '@/scripts/admin/components/modal-components/MailTestModal.vue'
-import { useI18n } from 'vue-i18n'
-
-let isSaving = ref(false)
-let isFetchingInitialData = ref(false)
-
-const companyMailStore = useCompanyMailStore()
-const modalStore = useModalStore()
-const { t } = useI18n()
-
-const useCustomMailConfig = ref(false)
-
-loadData()
-
-async function loadData() {
-  isFetchingInitialData.value = true
-  await companyMailStore.fetchMailDrivers()
-  await companyMailStore.fetchMailConfig()
-  useCustomMailConfig.value =
-    companyMailStore.mailConfigData?.use_custom_mail_config === 'YES'
-  isFetchingInitialData.value = false
-}
-
-function changeDriver(value) {
-  companyMailStore.mail_driver = value
-  companyMailStore.mailConfigData.mail_driver = value
-}
-
-const mailDriver = computed(() => {
-  if (companyMailStore.mail_driver === 'smtp') return Smtp
-  if (companyMailStore.mail_driver === 'mailgun') return Mailgun
-  if (companyMailStore.mail_driver === 'sendmail') return Basic
-  if (companyMailStore.mail_driver === 'ses') return Ses
-  if (companyMailStore.mail_driver === 'mail') return Basic
-  return Smtp
-})
-
-watch(useCustomMailConfig, async (newVal, oldVal) => {
-  if (oldVal === undefined) return
-
-  if (!newVal) {
-    isSaving.value = true
-    await companyMailStore.updateMailConfig({
-      use_custom_mail_config: 'NO',
-      mail_driver: '',
-    })
-    isSaving.value = false
-  }
-})
-
-async function saveEmailConfig(value) {
-  try {
-    isSaving.value = true
-    await companyMailStore.updateMailConfig({
-      ...value,
-      use_custom_mail_config: 'YES',
-    })
-    isSaving.value = false
-  } catch (e) {
-    isSaving.value = false
-  }
-}
-
-function openMailTestModal() {
-  modalStore.openModal({
-    title: t('general.test_mail_conf'),
-    componentName: 'MailTestModal',
-    size: 'sm',
-  })
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/CustomFieldsSetting.vue b/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
deleted file mode 100644
index 39c5705c..00000000
--- a/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
-  <BaseSettingCard
-    :title="$t('settings.menu_title.custom_fields')"
-    :description="$t('settings.custom_fields.section_description')"
-  >
-    <template #action>
-      <BaseButton
-        v-if="userStore.hasAbilities(abilities.CREATE_CUSTOM_FIELDS)"
-        variant="primary-outline"
-        @click="addCustomField"
-      >
-        <template #left="slotProps">
-          <BaseIcon :class="slotProps.class" name="PlusIcon" />
-
-          {{ $t('settings.custom_fields.add_custom_field') }}
-        </template>
-      </BaseButton>
-    </template>
-
-    <CustomFieldModal />
-
-    <BaseTable
-      ref="table"
-      :data="fetchData"
-      :columns="customFieldsColumns"
-      class="mt-16"
-    >
-      <template #cell-name="{ row }">
-        {{ row.data.name }}
-        <span class="text-xs text-muted"> ({{ row.data.slug }})</span>
-      </template>
-
-      <template #cell-model_type="{ row }">
-        {{ getModelType(row.data.model_type) }}
-      </template>
-
-      <template #cell-is_required="{ row }">
-        <BaseBadge
-          :bg-color="
-            utils.getBadgeStatusColor(row.data.is_required ? 'YES' : 'NO')
-              .bgColor
-          "
-          :color="
-            utils.getBadgeStatusColor(row.data.is_required ? 'YES' : 'NO').color
-          "
-        >
-          {{
-            row.data.is_required
-              ? $t('settings.custom_fields.yes')
-              : $t('settings.custom_fields.no').replace('_', ' ')
-          }}
-        </BaseBadge>
-      </template>
-
-      <template
-        v-if="
-          userStore.hasAbilities([
-            abilities.DELETE_CUSTOM_FIELDS,
-            abilities.EDIT_CUSTOM_FIELDS,
-          ])
-        "
-        #cell-actions="{ row }"
-      >
-        <CustomFieldDropdown
-          :row="row.data"
-          :table="table"
-          :load-data="refreshTable"
-        />
-      </template>
-    </BaseTable>
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import { computed, ref, inject } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import CustomFieldDropdown from '@/scripts/admin/components/dropdowns/CustomFieldIndexDropdown.vue'
-import CustomFieldModal from '@/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const modalStore = useModalStore()
-const customFieldStore = useCustomFieldStore()
-const userStore = useUserStore()
-
-const utils = inject('utils')
-const { t } = useI18n()
-
-const table = ref(null)
-
-const customFieldsColumns = computed(() => {
-  return [
-    {
-      key: 'name',
-      label: t('settings.custom_fields.name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'model_type',
-      label: t('settings.custom_fields.model'),
-    },
-    {
-      key: 'type',
-      label: t('settings.custom_fields.type'),
-    },
-    {
-      key: 'is_required',
-      label: t('settings.custom_fields.required'),
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  let response = await customFieldStore.fetchCustomFields(data)
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      limit: 5,
-      totalCount: response.data.meta.total,
-    },
-  }
-}
-
-function addCustomField() {
-  modalStore.openModal({
-    title: t('settings.custom_fields.add_custom_field'),
-    componentName: 'CustomFieldModal',
-    size: 'sm',
-    refreshData: table.value && table.value.refresh,
-  })
-}
-
-async function refreshTable() {
-  table.value && table.value.refresh()
-}
-
-function getModelType(type) {
-  switch (type) {
-    case 'Customer':
-      return t('settings.custom_fields.model_type.customer')
-    case 'Invoice':
-      return t('settings.custom_fields.model_type.invoice')
-    case 'Estimate':
-      return t('settings.custom_fields.model_type.estimate')
-    case 'Expense':
-      return t('settings.custom_fields.model_type.expense')
-    case 'Payment':
-      return t('settings.custom_fields.model_type.payment')
-    default:
-      return type
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue b/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
deleted file mode 100644
index f72a4f44..00000000
--- a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-  <ExchangeRateProviderModal />
-  <BaseCard>
-    <template #header>
-      <div class="flex flex-wrap justify-between lg:flex-nowrap">
-        <div>
-          <h6 class="text-lg font-medium text-left">
-            {{ $t('settings.menu_title.exchange_rate') }}
-          </h6>
-          <p
-            class="mt-2 text-sm leading-snug text-left text-muted"
-            style="max-width: 680px"
-          >
-            {{ $t('settings.exchange_rate.providers_description') }}
-          </p>
-        </div>
-        <div class="mt-4 lg:mt-0 lg:ml-2">
-          <BaseButton
-            variant="primary-outline"
-            size="lg"
-            @click="addExchangeRate"
-          >
-            <template #left="slotProps">
-              <PlusIcon :class="slotProps.class" />
-            </template>
-            {{ $t('settings.exchange_rate.new_driver') }}
-          </BaseButton>
-        </div>
-      </div>
-    </template>
-
-    <BaseTable ref="table" class="mt-16" :data="fetchData" :columns="drivers">
-      <template #cell-driver="{ row }">
-        <span class="capitalize">{{ row.data.driver.replace('_', ' ') }}</span>
-      </template>
-      <template #cell-active="{ row }">
-        <BaseBadge
-          :bg-color="
-            utils.getBadgeStatusColor(row.data.active ? 'YES' : 'NO').bgColor
-          "
-          :color="
-            utils.getBadgeStatusColor(row.data.active ? 'YES' : 'NO').color
-          "
-        >
-          {{ row.data.active ? 'YES' : 'NO' }}
-        </BaseBadge>
-      </template>
-      <template #cell-actions="{ row }">
-        <BaseDropdown>
-          <template #activator>
-            <div class="inline-block">
-              <EllipsisHorizontalIcon class="w-5 text-muted" />
-            </div>
-          </template>
-
-          <BaseDropdownItem @click="editExchangeRate(row.data.id)">
-            <PencilIcon class="h-5 mr-3 text-body" />
-            {{ $t('general.edit') }}
-          </BaseDropdownItem>
-
-          <BaseDropdownItem @click="removeExchangeRate(row.data.id)">
-            <TrashIcon class="h-5 mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </template>
-    </BaseTable>
-  </BaseCard>
-</template>
-
-<script setup>
-import { useExchangeRateStore } from '@/scripts/admin/stores/exchange-rate'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { ArrowDownOnSquareIcon } from '@heroicons/vue/24/outline'
-import { ref, computed, inject, reactive } from 'vue'
-import ExchangeRateProviderModal from '@/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue'
-import { useI18n } from 'vue-i18n'
-import {
-  PlusIcon,
-  EllipsisHorizontalIcon,
-  PencilIcon,
-  TrashIcon,
-} from '@heroicons/vue/24/outline'
-import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
-
-// store
-
-const { tm, t } = useI18n()
-const companyStore = useCompanyStore()
-const exchangeRateStore = useExchangeRateStore()
-const modalStore = useModalStore()
-const dialogStore = useDialogStore()
-//created
-
-// local state
-
-let table = ref('')
-const utils = inject('utils')
-const drivers = computed(() => {
-  return [
-    {
-      key: 'driver',
-      label: t('settings.exchange_rate.driver'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'key',
-      label: t('settings.exchange_rate.key'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'active',
-      label: t('settings.exchange_rate.active'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-async function fetchData({ page, sort }) {
-  let data = reactive({
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  })
-
-  let response = await exchangeRateStore.fetchProviders(data)
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 5,
-    },
-  }
-}
-async function updateRate() {
-  await exchangeRateStore.updateExchangeRate(
-    exchangeRateStore.currentExchangeRate.rate
-  )
-}
-
-function addExchangeRate() {
-  modalStore.openModal({
-    title: t('settings.exchange_rate.new_driver'),
-    componentName: 'ExchangeRateProviderModal',
-    size: 'md',
-    refreshData: table.value && table.value.refresh,
-  })
-}
-
-function editExchangeRate(data) {
-  exchangeRateStore.fetchProvider(data)
-  modalStore.openModal({
-    title: t('settings.exchange_rate.edit_driver'),
-    componentName: 'ExchangeRateProviderModal',
-    size: 'md',
-    data: data,
-    refreshData: table.value && table.value.refresh,
-  })
-}
-
-function removeExchangeRate(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('settings.exchange_rate.exchange_rate_confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        await exchangeRateStore.deleteExchangeRate(id)
-        table.value && table.value.refresh()
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue b/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue
deleted file mode 100644
index 4d5accc5..00000000
--- a/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <CategoryModal />
-
-  <BaseSettingCard
-    :title="$t('settings.expense_category.title')"
-    :description="$t('settings.expense_category.description')"
-  >
-    <template #action>
-      <BaseButton
-        variant="primary-outline"
-        type="button"
-        @click="openCategoryModal"
-      >
-        <template #left="slotProps">
-          <BaseIcon :class="slotProps.class" name="PlusIcon" />
-        </template>
-
-        {{ $t('settings.expense_category.add_new_category') }}
-      </BaseButton>
-    </template>
-
-    <BaseTable
-      ref="table"
-      :data="fetchData"
-      :columns="ExpenseCategoryColumns"
-      class="mt-16"
-    >
-      <template #cell-description="{ row }">
-        <div class="w-64">
-          <p class="truncate">{{ row.data.description }}</p>
-        </div>
-      </template>
-
-      <template #cell-actions="{ row }">
-        <ExpenseCategoryDropdown
-          :row="row.data"
-          :table="table"
-          :load-data="refreshTable"
-        />
-      </template>
-    </BaseTable>
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useCategoryStore } from '@/scripts/admin/stores/category'
-import { useModalStore } from '@/scripts/stores/modal'
-import { ref, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import ExpenseCategoryDropdown from '@/scripts/admin/components/dropdowns/ExpenseCategoryIndexDropdown.vue'
-import CategoryModal from '@/scripts/admin/components/modal-components/CategoryModal.vue'
-
-const categoryStore = useCategoryStore()
-const dialogStore = useDialogStore()
-const modalStore = useModalStore()
-
-const { t } = useI18n()
-
-const table = ref(null)
-
-const ExpenseCategoryColumns = computed(() => {
-  return [
-    {
-      key: 'name',
-      label: t('settings.expense_category.category_name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'description',
-      label: t('settings.expense_category.category_description'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  let response = await categoryStore.fetchCategories(data)
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 5,
-    },
-  }
-}
-
-function openCategoryModal() {
-  modalStore.openModal({
-    title: t('settings.expense_category.add_category'),
-    componentName: 'CategoryModal',
-    size: 'sm',
-    refreshData: table.value && table.value.refresh,
-  })
-}
-
-async function refreshTable() {
-  table.value && table.value.refresh()
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/FileDiskSetting.vue b/resources/scripts/admin/views/settings/FileDiskSetting.vue
deleted file mode 100644
index eeed11ac..00000000
--- a/resources/scripts/admin/views/settings/FileDiskSetting.vue
+++ /dev/null
@@ -1,257 +0,0 @@
-<template>
-  <FileDiskModal />
-
-  <BaseSettingCard
-    :title="$t('settings.disk.title', 1)"
-    :description="$t('settings.disk.description')"
-  >
-    <template #action>
-      <BaseButton variant="primary-outline" @click="openCreateDiskModal">
-        <template #left="slotProps">
-          <BaseIcon :class="slotProps.class" name="PlusIcon" />
-        </template>
-        {{ $t('settings.disk.new_disk') }}
-      </BaseButton>
-    </template>
-
-    <BaseTable
-      ref="table"
-      class="mt-16"
-      :data="fetchData"
-      :columns="fileDiskColumns"
-    >
-      <template #cell-set_as_default="{ row }">
-        <BaseBadge
-          :bg-color="
-            utils.getBadgeStatusColor(row.data.set_as_default ? 'YES' : 'NO')
-              .bgColor
-          "
-          :color="
-            utils.getBadgeStatusColor(row.data.set_as_default ? 'YES' : 'NO')
-              .color
-          "
-        >
-          {{ row.data.set_as_default ? $t('general.yes') : $t('general.no').replace('_', ' ') }}
-        </BaseBadge>
-      </template>
-
-      <template #cell-actions="{ row }">
-        <BaseDropdown v-if="isNotSystemDisk(row.data)">
-          <template #activator>
-            <div class="inline-block">
-              <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
-            </div>
-          </template>
-
-          <BaseDropdownItem
-            v-if="!row.data.set_as_default"
-            @click="setDefaultDiskData(row.data.id)"
-          >
-            <BaseIcon class="mr-3 tetx-gray-600" name="CheckCircleIcon" />
-
-            {{ $t('settings.disk.set_default_disk') }}
-          </BaseDropdownItem>
-
-          <BaseDropdownItem
-            v-if="row.data.type !== 'SYSTEM'"
-            @click="openEditDiskModal(row.data)"
-          >
-            <BaseIcon name="PencilIcon" class="mr-3 text-body" />
-
-            {{ $t('general.edit') }}
-          </BaseDropdownItem>
-
-          <BaseDropdownItem
-            v-if="row.data.type !== 'SYSTEM' && !row.data.set_as_default"
-            @click="removeDisk(row.data.id)"
-          >
-            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </template>
-    </BaseTable>
-
-    <BaseDivider class="mt-8 mb-2" />
-
-    <BaseSwitchSection
-      v-model="savePdfToDiskField"
-      :title="$t('settings.disk.save_pdf_to_disk')"
-      :description="$t('settings.disk.disk_setting_description')"
-    />
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import { useDiskStore } from '@/scripts/admin/stores/disk'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useModalStore } from '@/scripts/stores/modal'
-import { ref, computed, reactive, onMounted, inject } from 'vue'
-import { useI18n } from 'vue-i18n'
-import FileDiskModal from '@/scripts/admin/components/modal-components/FileDiskModal.vue'
-
-const utils = inject('utils')
-
-const modalStore = useModalStore()
-const diskStore = useDiskStore()
-const globalStore = useGlobalStore()
-const dialogStore = useDialogStore()
-const { t } = useI18n()
-
-let disk = 'local'
-let loading = ref(false)
-let table = ref('')
-
-const fileDiskColumns = computed(() => {
-  return [
-    {
-      key: 'name',
-      label: t('settings.disk.disk_name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'driver',
-      label: t('settings.disk.filesystem_driver'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'type',
-      label: t('settings.disk.disk_type'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-
-    {
-      key: 'set_as_default',
-      label: t('settings.disk.is_default'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-const savePdfToDisk = ref(globalStore.globalSettings?.save_pdf_to_disk || 'NO')
-
-const savePdfToDiskField = computed({
-  get: () => {
-    return savePdfToDisk.value === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-
-    let data = {
-      settings: {
-        save_pdf_to_disk: value,
-      },
-    }
-
-    savePdfToDisk.value = value
-
-    await globalStore.updateGlobalSettings({
-      data,
-      message: 'general.setting_updated',
-    })
-  },
-})
-
-async function fetchData({ page, filter, sort }) {
-  let data = reactive({
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  })
-
-  let response = await diskStore.fetchDisks(data)
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-    },
-  }
-}
-
-function isNotSystemDisk(disk) {
-  if (!disk.set_as_default) return true
-  if (disk.type == 'SYSTEM' && disk.set_as_default) return false
-  return true
-}
-
-function openCreateDiskModal() {
-  modalStore.openModal({
-    title: t('settings.disk.new_disk'),
-    componentName: 'FileDiskModal',
-    variant: 'lg',
-    refreshData: table.value && table.value.refresh,
-  })
-}
-
-function openEditDiskModal(data) {
-  modalStore.openModal({
-    title: t('settings.disk.edit_file_disk'),
-    componentName: 'FileDiskModal',
-    variant: 'lg',
-    id: data.id,
-    data: data,
-    refreshData: table.value && table.value.refresh,
-  })
-}
-
-function setDefaultDiskData(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('settings.disk.set_default_disk_confirm'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'primary',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        loading.value = true
-        let data = reactive({
-          set_as_default: true,
-          id,
-        })
-        await diskStore.updateDisk(data).then(() => {
-          table.value && table.value.refresh()
-        })
-      }
-    })
-}
-
-function removeDisk(id) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('settings.disk.confirm_delete'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        let response = await diskStore.deleteFileDisk(id)
-        if (response.data.success) {
-          table.value && table.value.refresh()
-          return true
-        }
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/MailConfigSetting.vue b/resources/scripts/admin/views/settings/MailConfigSetting.vue
deleted file mode 100644
index eb01b272..00000000
--- a/resources/scripts/admin/views/settings/MailConfigSetting.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <MailTestModal />
-
-  <BaseSettingCard
-    :title="$t('settings.mail.mail_config')"
-    :description="$t('settings.mail.mail_config_desc')"
-  >
-    <div v-if="mailDriverStore && mailDriverStore.mailConfigData" class="mt-14">
-      <component
-        :is="mailDriver"
-        :config-data="mailDriverStore.mailConfigData"
-        :is-saving="isSaving"
-        :mail-drivers="mailDriverStore.mail_drivers"
-        :is-fetching-initial-data="isFetchingInitialData"
-        @on-change-driver="(val) => changeDriver(val)"
-        @submit-data="saveEmailConfig"
-      >
-        <BaseButton
-          variant="primary-outline"
-          type="button"
-          class="ml-2"
-          :content-loading="isFetchingInitialData"
-          @click="openMailTestModal"
-        >
-          {{ $t('general.test_mail_conf') }}
-        </BaseButton>
-      </component>
-    </div>
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import Smtp from '@/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue'
-import Mailgun from '@/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue'
-import Ses from '@/scripts/admin/views/settings/mail-driver/SesMailDriver.vue'
-import Basic from '@/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue'
-import { ref, computed } from 'vue'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-import { useModalStore } from '@/scripts/stores/modal'
-import MailTestModal from '@/scripts/admin/components/modal-components/MailTestModal.vue'
-import { useI18n } from 'vue-i18n'
-
-let isSaving = ref(false)
-let isFetchingInitialData = ref(false)
-
-const mailDriverStore = useMailDriverStore()
-const modalStore = useModalStore()
-const { t } = useI18n()
-
-loadData()
-function changeDriver(value) {
-  mailDriverStore.mail_driver = value
-  mailDriverStore.mailConfigData.mail_driver = value
-}
-
-async function loadData() {
-  isFetchingInitialData.value = true
-  Promise.all([
-    await mailDriverStore.fetchMailDrivers(),
-    await mailDriverStore.fetchMailConfig(),
-  ]).then(([res1]) => {
-    isFetchingInitialData.value = false
-  })
-}
-
-const mailDriver = computed(() => {
-  if (mailDriverStore.mail_driver == 'smtp') return Smtp
-  if (mailDriverStore.mail_driver == 'mailgun') return Mailgun
-  if (mailDriverStore.mail_driver == 'sendmail') return Basic
-  if (mailDriverStore.mail_driver == 'ses') return Ses
-  if (mailDriverStore.mail_driver == 'mail') return Basic
-  return Smtp
-})
-
-async function saveEmailConfig(value) {
-  try {
-    isSaving.value = true
-    await mailDriverStore.updateMailConfig(value)
-    isSaving.value = false
-    return true
-  } catch (e) {
-    console.error(e)
-  }
-}
-
-function openMailTestModal() {
-  modalStore.openModal({
-    title: t('general.test_mail_conf'),
-    componentName: 'MailTestModal',
-    size: 'sm',
-  })
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/NotesSetting.vue b/resources/scripts/admin/views/settings/NotesSetting.vue
deleted file mode 100644
index 1e0806b6..00000000
--- a/resources/scripts/admin/views/settings/NotesSetting.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <NoteModal />
-
-  <BaseSettingCard
-    :title="$t('settings.customization.notes.title')"
-    :description="$t('settings.customization.notes.description')"
-  >
-    <template #action>
-      <BaseButton
-        v-if="userStore.hasAbilities(abilities.MANAGE_NOTE)"
-        variant="primary-outline"
-        @click="openNoteSelectModal"
-      >
-        <template #left="slotProps">
-          <BaseIcon :class="slotProps.class" name="PlusIcon" />
-        </template>
-        {{ $t('settings.customization.notes.add_note') }}
-      </BaseButton>
-    </template>
-
-    <BaseTable
-      ref="table"
-      :data="fetchData"
-      :columns="notesColumns"
-      class="mt-14"
-    >
-      <template #cell-actions="{ row }">
-        <NoteDropdown
-          :row="row.data"
-          :table="table"
-          :load-data="refreshTable"
-        />
-      </template>
-      <template #cell-name="{ row }">
-        {{ row.data.name }}
-        <BaseIcon v-if="row.data.is_default" name="StarIcon" class="w-3 h-3 text-primary-400" />
-      </template>
-      <template #cell-type="{ row }">
-        {{ getLabelNote(row.data.type) }}
-      </template>
-    </BaseTable>
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import { computed, reactive, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useNotesStore } from '@/scripts/admin/stores/note'
-import NoteDropdown from '@/scripts/admin/components/dropdowns/NoteIndexDropdown.vue'
-import NoteModal from '@/scripts/admin/components/modal-components/NoteModal.vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const { t } = useI18n()
-
-const modalStore = useModalStore()
-const noteStore = useNotesStore()
-const userStore = useUserStore()
-
-const table = ref('')
-
-const notesColumns = computed(() => {
-  return [
-    {
-      key: 'name',
-      label: t('settings.customization.notes.name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading flex gap-1 items-center',
-    },
-    {
-      key: 'type',
-      label: t('settings.customization.notes.type'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-async function fetchData({ page, filter, sort }) {
-  let data = reactive({
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  })
-
-  let response = await noteStore.fetchNotes(data)
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 5,
-    },
-  }
-}
-
-async function openNoteSelectModal() {
-  await modalStore.openModal({
-    title: t('settings.customization.notes.add_note'),
-    componentName: 'NoteModal',
-    size: 'md',
-    refreshData: table.value && table.value.refresh,
-  })
-}
-
-async function refreshTable() {
-  table.value && table.value.refresh()
-}
-
-function getLabelNote(type) {
-  switch (type) {
-    case 'Estimate':
-      return t('settings.customization.notes.types.estimate')
-    case 'Invoice':
-      return t('settings.customization.notes.types.invoice')
-    case 'Payment':
-      return t('settings.customization.notes.types.payment')
-    default:
-      return type
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/NotificationsSetting.vue b/resources/scripts/admin/views/settings/NotificationsSetting.vue
deleted file mode 100644
index 4463acae..00000000
--- a/resources/scripts/admin/views/settings/NotificationsSetting.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-  <BaseSettingCard
-    :title="$t('settings.notification.title')"
-    :description="$t('settings.notification.description')"
-  >
-    <form action="" @submit.prevent="submitForm">
-      <div class="grid-cols-2 col-span-1 mt-14">
-        <BaseInputGroup
-          :error="
-            v$.notification_email.$error &&
-            v$.notification_email.$errors[0].$message
-          "
-          :label="$t('settings.notification.email')"
-          class="my-2"
-          required
-        >
-          <BaseInput
-            v-model.trim="settingsForm.notification_email"
-            :invalid="v$.notification_email.$error"
-            type="email"
-            @input="v$.notification_email.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseButton
-          :disabled="isSaving"
-          :loading="isSaving"
-          variant="primary"
-          type="submit"
-          class="mt-6"
-        >
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              :class="slotProps.class"
-              name="ArrowDownOnSquareIcon"
-            />
-          </template>
-
-          {{ $t('settings.notification.save') }}
-        </BaseButton>
-      </div>
-    </form>
-
-    <BaseDivider class="mt-6 mb-2" />
-
-    <ul class="divide-y divide-line-default">
-      <BaseSwitchSection
-        v-model="invoiceViewedField"
-        :title="$t('settings.notification.invoice_viewed')"
-        :description="$t('settings.notification.invoice_viewed_desc')"
-      />
-
-      <BaseSwitchSection
-        v-model="estimateViewedField"
-        :title="$t('settings.notification.estimate_viewed')"
-        :description="$t('settings.notification.estimate_viewed_desc')"
-      />
-    </ul>
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import { ref, onMounted, computed, reactive } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { required, email, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const companyStore = useCompanyStore()
-
-let isSaving = ref(false)
-const { t } = useI18n()
-
-const settingsForm = reactive({
-  notify_invoice_viewed:
-    companyStore.selectedCompanySettings.notify_invoice_viewed,
-  notify_estimate_viewed:
-    companyStore.selectedCompanySettings.notify_estimate_viewed,
-  notification_email: companyStore.selectedCompanySettings.notification_email,
-})
-
-const rules = computed(() => {
-  return {
-    notification_email: {
-      required: helpers.withMessage(t('validation.required'), required),
-      email: helpers.withMessage(t('validation.email_incorrect'), email),
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => settingsForm)
-)
-
-const invoiceViewedField = computed({
-  get: () => {
-    return settingsForm.notify_invoice_viewed === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-
-    let data = {
-      settings: {
-        notify_invoice_viewed: value,
-      },
-    }
-
-    settingsForm.notify_invoice_viewed = value
-
-    await companyStore.updateCompanySettings({
-      data,
-      message: 'general.setting_updated',
-    })
-  },
-})
-
-const estimateViewedField = computed({
-  get: () => {
-    return settingsForm.notify_estimate_viewed === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-
-    let data = {
-      settings: {
-        notify_estimate_viewed: value,
-      },
-    }
-
-    settingsForm.notify_estimate_viewed = value
-
-    await companyStore.updateCompanySettings({
-      data,
-      message: 'general.setting_updated',
-    })
-  },
-})
-
-async function submitForm() {
-  v$.value.$touch()
-  if (v$.value.$invalid) {
-    return true
-  }
-
-  isSaving.value = true
-
-  const data = {
-    settings: {
-      notification_email: settingsForm.notification_email,
-    },
-  }
-
-  await companyStore.updateCompanySettings({
-    data,
-    message: 'settings.notification.email_save_message',
-  })
-
-  isSaving.value = false
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/PDFGenerationSetting.vue b/resources/scripts/admin/views/settings/PDFGenerationSetting.vue
deleted file mode 100644
index 7ec786ac..00000000
--- a/resources/scripts/admin/views/settings/PDFGenerationSetting.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <BaseSettingCard
-      :title="$t('settings.pdf.pdf_configuration')"
-      :description="$t('settings.pdf.section_description')"
-    >
-    <div v-if="pdfDriverStore && pdfDriverStore.pdfDriverConfig" class="mt-14">
-      <component
-        :is="pdfDriver"
-        :config-data="pdfDriverStore.pdfDriverConfig"
-        :is-saving="isSaving"
-        :drivers="pdfDriverStore.pdf_drivers"
-        :is-fetching-initial-data="isFetchingInitialData"
-        @on-change-driver="(val) => changeDriver(val)"
-        @submit-data="saveConfig"
-      >
-      </component>
-    </div>
-    </BaseSettingCard>
-</template>
-
-<script setup>
-  import GotenbergDriver from '@/scripts/admin/views/settings/pdf-driver/GotenbergDriver.vue';
-  import DomPDFDriver from '@/scripts/admin/views/settings/pdf-driver/DomPDFDriver.vue';
-  import { ref, computed } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import { usePDFDriverStore } from '@/scripts/admin/stores/pdf-driver'
-  const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-  let isFetchingInitialData = ref(false)
-  let isSaving = ref(false)
-
-  const pdfDriverStore = usePDFDriverStore();
-  const { t } = useI18n();
-
-  function changeDriver(value) {
-    pdfDriverStore.pdf_driver = value
-    pdfDriverStore.pdfDriverConfig.pdf_driver = value
-  }
-
-  async function loadData() {
-    isFetchingInitialData.value = true
-    await Promise.all([
-      pdfDriverStore.fetchDrivers(),
-      pdfDriverStore.fetchConfig(),
-    ])
-    isFetchingInitialData.value = false
-  }
-  loadData();
-
-  async function saveConfig(value) {
-    try {
-      isSaving.value = true
-      await pdfDriverStore.updateConfig(value)
-    } catch (e) {
-      console.error(e)
-    } finally {
-      isSaving.value = false
-      return false
-    }
-  }
-
-  const pdfDriver = computed(() => {
-    switch (pdfDriverStore.pdf_driver) {
-      case 'dompdf':
-        return DomPDFDriver
-      case 'gotenberg':
-        return GotenbergDriver
-      default:
-        return DomPDFDriver
-    }
-  })
-</script>
diff --git a/resources/scripts/admin/views/settings/PaymentsModeSetting.vue b/resources/scripts/admin/views/settings/PaymentsModeSetting.vue
deleted file mode 100644
index 86f26c8a..00000000
--- a/resources/scripts/admin/views/settings/PaymentsModeSetting.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <PaymentModeModal />
-
-  <BaseSettingCard
-    :title="$t('settings.payment_modes.title')"
-    :description="$t('settings.payment_modes.description')"
-  >
-    <template #action>
-      <BaseButton
-        type="submit"
-        variant="primary-outline"
-        @click="addPaymentMode"
-      >
-        <template #left="slotProps">
-          <BaseIcon :class="slotProps.class" name="PlusIcon" />
-        </template>
-        {{ $t('settings.payment_modes.add_payment_mode') }}
-      </BaseButton>
-    </template>
-
-    <BaseTable
-      ref="table"
-      :data="fetchData"
-      :columns="paymentColumns"
-      class="mt-16"
-    >
-      <template #cell-actions="{ row }">
-        <PaymentModeDropdown
-          :row="row.data"
-          :table="table"
-          :load-data="refreshTable"
-        />
-      </template>
-    </BaseTable>
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-import { usePaymentStore } from '@/scripts/admin/stores/payment'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import { useModalStore } from '@/scripts/stores/modal'
-import PaymentModeModal from '@/scripts/admin/components/modal-components/PaymentModeModal.vue'
-import PaymentModeDropdown from '@/scripts/admin/components/dropdowns/PaymentModeIndexDropdown.vue'
-
-const modalStore = useModalStore()
-const dialogStore = useDialogStore()
-const paymentStore = usePaymentStore()
-const { t } = useI18n()
-
-const table = ref(null)
-
-const paymentColumns = computed(() => {
-  return [
-    {
-      key: 'name',
-      label: t('settings.payment_modes.mode_name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-async function refreshTable() {
-  table.value && table.value.refresh()
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  let response = await paymentStore.fetchPaymentModes(data)
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 5,
-    },
-  }
-}
-
-function addPaymentMode() {
-  modalStore.openModal({
-    title: t('settings.payment_modes.add_payment_mode'),
-    componentName: 'PaymentModeModal',
-    refreshData: table.value && table.value.refresh,
-    size: 'sm',
-  })
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/PreferencesSetting.vue b/resources/scripts/admin/views/settings/PreferencesSetting.vue
deleted file mode 100644
index 23f9a91a..00000000
--- a/resources/scripts/admin/views/settings/PreferencesSetting.vue
+++ /dev/null
@@ -1,411 +0,0 @@
-<template>
-  <form action="" class="relative" @submit.prevent="updatePreferencesData">
-    <BaseSettingCard
-      :title="$t('settings.menu_title.preferences')"
-      :description="$t('settings.preferences.general_settings')"
-    >
-      <BaseInputGrid class="mt-5">
-        <BaseInputGroup
-          :content-loading="isFetchingInitialData"
-          :label="$t('settings.preferences.currency')"
-          :help-text="$t('settings.preferences.company_currency_unchangeable')"
-          :error="v$.currency.$error && v$.currency.$errors[0].$message"
-          required
-        >
-          <BaseMultiselect
-            v-model="settingsForm.currency"
-            :content-loading="isFetchingInitialData"
-            :options="globalStore.currencies"
-            label="name"
-            value-prop="id"
-            :searchable="true"
-            track-by="name"
-            :invalid="v$.currency.$error"
-            disabled
-            class="w-full"
-          >
-          </BaseMultiselect>
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.preferences.default_language')"
-          :content-loading="isFetchingInitialData"
-          :error="v$.language.$error && v$.language.$errors[0].$message"
-          required
-        >
-          <BaseMultiselect
-            v-model="settingsForm.language"
-            :content-loading="isFetchingInitialData"
-            :options="globalStore.config.languages"
-            label="name"
-            value-prop="code"
-            class="w-full"
-            track-by="name"
-            :searchable="true"
-            :invalid="v$.language.$error"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.preferences.time_zone')"
-          :content-loading="isFetchingInitialData"
-          :error="v$.time_zone.$error && v$.time_zone.$errors[0].$message"
-          required
-        >
-          <BaseMultiselect
-            v-model="settingsForm.time_zone"
-            :content-loading="isFetchingInitialData"
-            :options="globalStore.timeZones"
-            label="key"
-            value-prop="value"
-            track-by="key"
-            :searchable="true"
-            :invalid="v$.time_zone.$error"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.preferences.date_format')"
-          :content-loading="isFetchingInitialData"
-          :error="
-            v$.carbon_date_format.$error &&
-            v$.carbon_date_format.$errors[0].$message
-          "
-          required
-        >
-          <BaseMultiselect
-            v-model="settingsForm.carbon_date_format"
-            :content-loading="isFetchingInitialData"
-            :options="globalStore.dateFormats"
-            label="display_date"
-            value-prop="carbon_format_value"
-            track-by="display_date"
-            :searchable="true"
-            :invalid="v$.carbon_date_format.$error"
-            class="w-full"
-          />
-
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :content-loading="isFetchingInitialData"
-          :error="v$.fiscal_year.$error && v$.fiscal_year.$errors[0].$message"
-          :label="$t('settings.preferences.fiscal_year')"
-          required
-        >
-          <BaseMultiselect
-            v-model="settingsForm.fiscal_year"
-            :content-loading="isFetchingInitialData"
-            :options="fiscalYearsList"
-            label="key"
-            value-prop="value"
-            :invalid="v$.fiscal_year.$error"
-            track-by="key"
-            :searchable="true"
-            class="w-full"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.preferences.time_format')"
-          :content-loading="isFetchingInitialData"
-          :error="
-            v$.carbon_time_format.$error &&
-            v$.carbon_time_format.$errors[0].$message
-          "
-          required
-        >
-          <BaseMultiselect
-            v-model="settingsForm.carbon_time_format"
-            :content-loading="isFetchingInitialData"
-            :options="globalStore.timeFormats"
-            label="display_time"
-            value-prop="carbon_format_value"
-            track-by="display_time"
-            :searchable="true"
-            :invalid="v$.carbon_time_format.$error"
-            class="w-full"
-          />
-        </BaseInputGroup>
-      </BaseInputGrid>
-
-      <BaseSwitchSection
-        v-model="invoiceUseTimeField"
-        :title="$t('settings.preferences.invoice_use_time')"
-        :description="$t('settings.preferences.invoice_use_time_description')"
-      />
-
-      <BaseButton
-        :content-loading="isFetchingInitialData"
-        :disabled="isSaving"
-        :loading="isSaving"
-        type="submit"
-        class="mt-6"
-      >
-        <template #left="slotProps">
-          <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('settings.company_info.save') }}
-      </BaseButton>
-
-      <BaseDivider class="mt-6 mb-2" />
-
-      <ul>
-        <form @submit.prevent="submitData">
-          <BaseSwitchSection
-            v-model="expirePdfField"
-            :title="$t('settings.preferences.expire_public_links')"
-            :description="$t('settings.preferences.expire_setting_description')"
-          />
-
-          <!--pdf_link_expiry_days -->
-          <BaseInputGroup
-            v-if="expirePdfField"
-            :content-loading="isFetchingInitialData"
-            :label="$t('settings.preferences.expire_public_links')"
-            class="mt-2 mb-4"
-          >
-            <BaseInput
-              v-model="settingsForm.link_expiry_days"
-              :disabled="
-                settingsForm.automatically_expire_public_links === 'NO'
-              "
-              :content-loading="isFetchingInitialData"
-              type="number"
-            />
-          </BaseInputGroup>
-
-          <BaseButton
-            :content-loading="isFetchingInitialData"
-            :disabled="isDataSaving"
-            :loading="isDataSaving"
-            type="submit"
-            class="mt-6"
-          >
-            <template #left="slotProps">
-              <BaseIcon name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-            </template>
-            {{ $t('general.save') }}
-          </BaseButton>
-        </form>
-
-        <BaseDivider class="mt-6 mb-2" />
-
-        <BaseSwitchSection
-          v-model="discountPerItemField"
-          :title="$t('settings.preferences.discount_per_item')"
-          :description="$t('settings.preferences.discount_setting_description')"
-        />
-      </ul>
-    </BaseSettingCard>
-  </form>
-</template>
-
-<script setup>
-import { ref, computed, watch, reactive } from 'vue'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useI18n } from 'vue-i18n'
-import { required, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-
-const companyStore = useCompanyStore()
-const globalStore = useGlobalStore()
-const { t, tm } = useI18n()
-
-let isSaving = ref(false)
-let isDataSaving = ref(false)
-let isFetchingInitialData = ref(false)
-
-const settingsForm = reactive({ ...companyStore.selectedCompanySettings })
-
-const retrospectiveEditOptions = computed(() => {
-  return globalStore.config.retrospective_edits.map((option) => {
-    option.title = t(option.key)
-    return option
-  })
-})
-
-const fiscalYearsList = computed(() => {
-  return globalStore.config.fiscal_years.map((item) => {
-    return Object.assign({}, item, {
-      key: t(item.key),
-    })
-  })
-})
-
-watch(
-  () => settingsForm.carbon_date_format,
-  (val) => {
-    if (val) {
-      const dateFormatObject = globalStore.dateFormats.find((d) => {
-        return d.carbon_format_value === val
-      })
-
-      settingsForm.moment_date_format = dateFormatObject.moment_format_value
-    }
-  }
-)
-
-watch(
-  () => settingsForm.carbon_time_format,
-  (val) => {
-    if (val) {
-      const timeFormatObject = globalStore.timeFormats.find((d) => {
-        return d.carbon_format_value === val
-      })
-      settingsForm.moment_time_format = timeFormatObject.moment_format_value
-    }
-  }
-)
-
-const invoiceUseTimeField = computed({
-  get: () => {
-    return settingsForm.invoice_use_time === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-    let data = {
-      settings: {
-        invoice_use_time: value,
-      },
-    }
-    settingsForm.invoice_use_time = value
-  }
-})
-
-const discountPerItemField = computed({
-  get: () => {
-    return settingsForm.discount_per_item === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-
-    let data = {
-      settings: {
-        discount_per_item: value,
-      },
-    }
-
-    settingsForm.discount_per_item = value
-
-    await companyStore.updateCompanySettings({
-      data,
-      message: 'general.setting_updated',
-    })
-  },
-})
-
-const expirePdfField = computed({
-  get: () => {
-    return settingsForm.automatically_expire_public_links === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-
-    let data = {
-      settings: {
-        automatically_expire_public_links: value,
-      },
-    }
-
-    settingsForm.automatically_expire_public_links = value
-  },
-})
-
-const rules = computed(() => {
-  return {
-    currency: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    language: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    carbon_date_format: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    moment_date_format: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    carbon_time_format: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    moment_time_format: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    time_zone: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    fiscal_year: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-    invoice_use_time: {
-      required: helpers.withMessage(t('validation.required'), required),
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => settingsForm)
-)
-
-setInitialData()
-
-async function setInitialData() {
-  isFetchingInitialData.value = true
-  Promise.all([
-    globalStore.fetchCurrencies(),
-    globalStore.fetchDateFormats(),
-    globalStore.fetchTimeFormats(),
-    globalStore.fetchTimeZones(),
-  ]).then(([res1]) => {
-    isFetchingInitialData.value = false
-  })
-}
-
-async function updatePreferencesData() {
-  v$.value.$touch()
-  if (v$.value.$invalid) {
-    return
-  }
-
-  let data = {
-    settings: {
-      ...settingsForm,
-    },
-  }
-
-  isSaving.value = true
-  delete data.settings.link_expiry_days
-
-  // If language is being changed, load it dynamically first
-  if (companyStore.selectedCompanySettings.language !== settingsForm.language) {
-    await window.loadLanguage(settingsForm.language)
-  }
-
-  let res = await companyStore.updateCompanySettings({
-    data: data,
-    message: 'settings.preferences.updated_message',
-  })
-
-  isSaving.value = false
-}
-
-async function submitData() {
-  isDataSaving.value = true
-
-  let res = await companyStore.updateCompanySettings({
-    data: {
-      settings: {
-        link_expiry_days: settingsForm.link_expiry_days,
-        automatically_expire_public_links:
-          settingsForm.automatically_expire_public_links,
-      },
-    },
-    message: 'settings.preferences.updated_message',
-  })
-
-  isDataSaving.value = false
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/RolesSettings.vue b/resources/scripts/admin/views/settings/RolesSettings.vue
deleted file mode 100644
index 2f0a21da..00000000
--- a/resources/scripts/admin/views/settings/RolesSettings.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <RolesModal />
-
-  <BaseSettingCard
-    :title="$t('settings.roles.title')"
-    :description="$t('settings.roles.description')"
-  >
-    <template v-if="userStore.currentUser.is_owner" #action>
-      <BaseButton variant="primary-outline" @click="openRoleModal">
-        <template #left="slotProps">
-          <BaseIcon name="PlusIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('settings.roles.add_new_role') }}
-      </BaseButton>
-    </template>
-
-    <BaseTable
-      ref="table"
-      :data="fetchData"
-      :columns="roleColumns"
-      class="mt-14"
-    >
-      <!-- Added on  -->
-      <template #cell-created_at="{ row }">
-        {{ row.data.formatted_created_at }}
-      </template>
-
-      <template #cell-actions="{ row }">
-        <RoleDropdown
-          v-if="
-            userStore.currentUser.is_owner && row.data.name !== 'super admin'
-          "
-          :row="row.data"
-          :table="table"
-          :load-data="refreshTable"
-        />
-      </template>
-    </BaseTable>
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import RoleDropdown from '@/scripts/admin/components/dropdowns/RoleIndexDropdown.vue'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoleStore } from '@/scripts/admin/stores/role'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import RolesModal from '@/scripts/admin/components/modal-components/RolesModal.vue'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const modalStore = useModalStore()
-const roleStore = useRoleStore()
-const userStore = useUserStore()
-const companyStore = useCompanyStore()
-
-const { t } = useI18n()
-const table = ref(null)
-
-const roleColumns = computed(() => {
-  return [
-    {
-      key: 'name',
-      label: t('settings.roles.role_name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'created_at',
-      label: t('settings.roles.added_on'),
-      tdClass: 'font-medium text-heading',
-    },
-
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    company_id: companyStore.selectedCompany.id,
-  }
-
-  let response = await roleStore.fetchRoles(data)
-
-  return {
-    data: response.data.data,
-  }
-}
-
-async function refreshTable() {
-  table.value && table.value.refresh()
-}
-
-async function openRoleModal() {
-  await roleStore.fetchAbilities()
-
-  modalStore.openModal({
-    title: t('settings.roles.add_role'),
-    componentName: 'RolesModal',
-    size: 'lg',
-    refreshData: table.value && table.value.refresh,
-  })
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/SettingsIndex.vue b/resources/scripts/admin/views/settings/SettingsIndex.vue
deleted file mode 100644
index 509b1c47..00000000
--- a/resources/scripts/admin/views/settings/SettingsIndex.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <BasePage>
-    <BasePageHeader :title="$t('settings.setting', 1)" class="mb-6">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="/admin/dashboard" />
-        <BaseBreadcrumbItem
-          :title="$t('settings.setting', 2)"
-          to="/admin/settings/company-info"
-          active
-        />
-      </BaseBreadcrumb>
-    </BasePageHeader>
-
-    <div class="w-full mb-6 select-wrapper xl:hidden">
-      <BaseMultiselect
-        v-model="currentSetting"
-        :options="dropdownMenuItems"
-        :can-deselect="false"
-        value-prop="title"
-        track-by="title"
-        label="title"
-        object
-        @update:modelValue="navigateToSetting"
-      />
-    </div>
-
-    <div class="flex gap-8">
-      <div class="hidden mt-1 xl:block min-w-[240px] sticky top-20 self-start">
-        <BaseList>
-          <BaseListItem
-            v-for="(menuItem, index) in globalStore.settingMenu"
-            :key="index"
-            :title="$t(menuItem.title)"
-            :to="menuItem.link"
-            :active="hasActiveUrl(menuItem.link)"
-            :index="index"
-            class="py-3"
-          >
-            <template #icon>
-              <BaseIcon :name="menuItem.icon"></BaseIcon>
-            </template>
-          </BaseListItem>
-        </BaseList>
-      </div>
-
-      <div class="w-full overflow-hidden">
-        <RouterView />
-      </div>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { ref, reactive, watchEffect, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import BaseList from '@/scripts/components/list/BaseList.vue'
-import BaseListItem from '@/scripts/components/list/BaseListItem.vue'
-import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
-
-let currentSetting = ref({})
-
-const globalStore = useGlobalStore()
-const route = useRoute()
-const router = useRouter()
-
-const dropdownMenuItems = computed(() => {
-  return globalStore.settingMenu.map((item) => {
-    return Object.assign({}, item, {
-      title: t(item.title),
-    })
-  })
-})
-
-watchEffect(() => {
-  if (route.path === '/admin/settings') {
-    router.push('/admin/settings/company-info')
-  }
-
-  const item = dropdownMenuItems.value.find((item) => {
-    return item.link === route.path
-  })
-
-  currentSetting.value = item
-})
-
-function hasActiveUrl(url) {
-  return route.path.indexOf(url) > -1
-}
-
-function navigateToSetting(setting) {
-  return router.push(setting.link)
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/TaxTypesSetting.vue b/resources/scripts/admin/views/settings/TaxTypesSetting.vue
deleted file mode 100644
index 100f4882..00000000
--- a/resources/scripts/admin/views/settings/TaxTypesSetting.vue
+++ /dev/null
@@ -1,251 +0,0 @@
-<template>
-  <BaseSettingCard
-    :title="$t('settings.tax_types.title')"
-    :description="$t('settings.tax_types.description')"
-  >
-    <TaxTypeModal />
-
-    <template v-if="userStore.hasAbilities(abilities.CREATE_TAX_TYPE)" #action>
-      <BaseButton type="submit" variant="primary-outline" @click="openTaxModal">
-        <template #left="slotProps">
-          <BaseIcon :class="slotProps.class" name="PlusIcon" />
-        </template>
-        {{ $t('settings.tax_types.add_new_tax') }}
-      </BaseButton>
-    </template>
-
-    <BaseTable
-      ref="table"
-      class="mt-16"
-      :data="fetchData"
-      :columns="taxTypeColumns"
-    >
-    <template #cell-calculation_type="{ row }">
-      {{ $t(`settings.tax_types.${row.data.calculation_type}`) }}
-    </template>
-    <template #cell-amount="{ row }">
-      <template v-if="row.data.calculation_type === 'percentage'">
-        {{ row.data.percent }} %
-      </template>
-      <template v-else-if="row.data.calculation_type === 'fixed'">
-        <BaseFormatMoney :amount="row.data.fixed_amount" :currency="defaultCurrency" />
-      </template>
-      <template v-else>
-        -
-      </template>
-    </template>
-
-      <template v-if="hasAtleastOneAbility()" #cell-actions="{ row }">
-        <TaxTypeDropdown
-          :row="row.data"
-          :table="table"
-          :load-data="refreshTable"
-        />
-      </template>
-    </BaseTable>
-    <div v-if="userStore.currentUser.is_owner">
-      <BaseDivider class="mt-8 mb-2" />
-
-      <BaseSwitchSection
-        v-model="taxPerItemField"
-        :disabled="salesTaxEnabled"
-        :title="$t('settings.tax_types.tax_per_item')"
-        :description="$t('settings.tax_types.tax_setting_description')"
-      />
-
-      <BaseDivider class="mt-8 mb-2" />
-
-      <BaseSwitchSection
-        v-model="taxIncludedField"
-        :title="$t('settings.tax_types.tax_included')"
-        :description="$t('settings.tax_types.tax_included_description')"
-      />
-
-      <BaseSwitchSection
-        v-if="taxIncludedField"
-        v-model="taxIncludedByDefaultField"
-        :title="$t('settings.tax_types.tax_included_by_default')"
-        :description="$t('settings.tax_types.tax_included_by_default_description')"
-      />
-    </div>
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import { useTaxTypeStore } from '@/scripts/admin/stores/tax-type'
-import { useModalStore } from '@/scripts/stores/modal'
-import { computed, reactive, ref, inject } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useModuleStore } from '@/scripts/admin/stores/module'
-
-import TaxTypeDropdown from '@/scripts/admin/components/dropdowns/TaxTypeIndexDropdown.vue'
-import TaxTypeModal from '@/scripts/admin/components/modal-components/TaxTypeModal.vue'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const { t } = useI18n()
-const utils = inject('utils')
-
-const companyStore = useCompanyStore()
-const taxTypeStore = useTaxTypeStore()
-const modalStore = useModalStore()
-const userStore = useUserStore()
-const moduleStore = useModuleStore()
-const table = ref(null)
-const taxPerItemSetting = ref(companyStore.selectedCompanySettings.tax_per_item)
-const defaultCurrency = computed(() => companyStore.selectedCompanyCurrency)
-
-const taxTypeColumns = computed(() => {
-  return [
-    {
-      key: 'name',
-      label: t('settings.tax_types.tax_name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'calculation_type',
-      label: t('settings.tax_types.calculation_type'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'amount',
-      label: t('settings.tax_types.amount'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-const salesTaxEnabled = computed(() => {
-  return (
-    companyStore.selectedCompanySettings.sales_tax_us_enabled === 'YES' &&
-    moduleStore.salesTaxUSEnabled
-  )
-})
-
-const taxPerItemField = computed({
-  get: () => {
-    return taxPerItemSetting.value === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-
-    let data = {
-      settings: {
-        tax_per_item: value,
-      },
-    }
-
-    taxPerItemSetting.value = value
-
-    await companyStore.updateCompanySettings({
-      data,
-      message: 'general.setting_updated',
-    })
-  },
-})
-
-const taxIncludedSettings = reactive({
-  tax_included: 'NO',
-  tax_included_by_default: 'NO',
-})
-
-utils.mergeSettings(taxIncludedSettings, {
-  ...companyStore.selectedCompanySettings,
-})
-
-const taxIncludedField = computed({
-  get: () => {
-    return taxIncludedSettings.tax_included === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-    taxIncludedSettings.tax_included = value
-
-    if (!newValue) {
-      taxIncludedSettings.tax_included_by_default = 'NO'
-    }
-
-    let data = {
-      settings: {
-        ...taxIncludedSettings,
-      },
-    }
-
-    await companyStore.updateCompanySettings({
-      data,
-      message: 'general.setting_updated',
-    })
-  },
-})
-
-const taxIncludedByDefaultField = computed({
-  get: () => {
-    return taxIncludedSettings.tax_included_by_default === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-    taxIncludedSettings.tax_included_by_default = value
-
-    let data = {
-      settings: {
-        tax_included_by_default: taxIncludedSettings.tax_included_by_default,
-      },
-    }
-
-    await companyStore.updateCompanySettings({
-      data,
-      message: 'general.setting_updated',
-    })
-  },
-})
-
-function hasAtleastOneAbility() {
-  return userStore.hasAbilities([
-    abilities.DELETE_TAX_TYPE,
-    abilities.EDIT_TAX_TYPE,
-  ])
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  let response = await taxTypeStore.fetchTaxTypes(data)
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 5,
-    },
-  }
-}
-
-async function refreshTable() {
-  table.value && table.value.refresh()
-}
-
-function openTaxModal() {
-  modalStore.openModal({
-    title: t('settings.tax_types.add_tax'),
-    componentName: 'TaxTypeModal',
-    size: 'sm',
-    refreshData: table.value && table.value.refresh,
-  })
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/UpdateAppSetting.vue b/resources/scripts/admin/views/settings/UpdateAppSetting.vue
deleted file mode 100644
index d572fb77..00000000
--- a/resources/scripts/admin/views/settings/UpdateAppSetting.vue
+++ /dev/null
@@ -1,476 +0,0 @@
-<template>
-  <BaseSettingCard
-    :title="$t('settings.update_app.title')"
-    :description="$t('settings.update_app.description')"
-  >
-    <div class="pb-8 ml-0">
-      <label class="text-sm not-italic font-medium input-label">
-        {{ $t('settings.update_app.current_version') }}
-      </label>
-
-      <div class="w-full border-b-2 border-line-light border-solid pb-4">
-        <div
-          class="
-          box-border
-          inline-block
-          w-auto
-          p-3
-          my-2
-          text-sm text-body
-          bg-surface-muted
-          border border-line-default border-solid
-          rounded-md
-          version
-        "
-        >
-          {{ currentVersion }}
-        </div>
-      </div>
-
-      <div class="w-full pt-4">
-        <BaseCheckbox v-model="insiderChannel" :label="$t('settings.update_app.insider_consent')"/>
-      </div>
-
-      <BaseButton
-        :loading="isCheckingforUpdate"
-        :disabled="isCheckingforUpdate || isUpdating"
-        variant="primary-outline"
-        class="mt-6"
-        @click="checkUpdate"
-      >
-        {{ $t('settings.update_app.check_update') }}
-      </BaseButton>
-
-      <BaseDivider v-if="isUpdateAvailable" class="mt-6 mb-4" />
-
-      <div v-show="!isUpdating" v-if="isUpdateAvailable" class="mt-4 content">
-        <BaseHeading type="heading-title" class="mb-2">
-          {{ $t('settings.update_app.avail_update') }}
-        </BaseHeading>
-
-        <div class="rounded-md bg-primary-50 p-4 mb-3">
-          <div class="flex">
-            <div class="shrink-0">
-              <BaseIcon
-                name="InformationCircleIcon"
-                class="h-5 w-5 text-primary-400"
-                aria-hidden="true"
-              />
-            </div>
-            <div class="ml-3">
-              <h3 class="text-sm font-medium text-primary-800">
-                {{ $t('general.note') }}
-              </h3>
-              <div class="mt-2 text-sm text-primary-700">
-                <p>
-                  {{ $t('settings.update_app.update_warning') }}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <label class="text-sm not-italic font-medium input-label">
-          {{ $t('settings.update_app.next_version') }}
-        </label>
-        <br />
-        <div
-          class="
-            box-border
-            inline-block
-            w-auto
-            p-3
-            my-2
-            text-sm text-body
-            bg-surface-muted
-            border border-line-default border-solid
-            rounded-md
-            version
-          "
-        >
-          {{ updateData.version }}
-        </div>
-
-        <div
-          class="
-            pl-5
-            mt-4
-            mb-2
-            text-sm
-            leading-snug
-            text-muted
-            update-description
-          "
-          style="white-space: pre-wrap; max-width: 480px"
-          v-if="description"
-          v-html="description"
-        ></div>
-
-        <div
-          class="
-            pl-5
-            mt-2
-            mb-8
-            text-sm
-            leading-snug
-            text-muted
-            update-changelog
-          "
-          style="white-space: pre-wrap; max-width: 480px"
-          v-if="changelog"
-          v-html="changelog"
-        ></div>
-
-        <label class="text-sm not-italic font-medium input-label">
-          {{ $t('settings.update_app.requirements') }}
-        </label>
-
-        <table class="w-1/2 mt-2 border-2 border-line-default BaseTable-fixed">
-          <tr
-            v-for="(ext, i) in requiredExtentions"
-            :key="i"
-            class="p-2 border-2 border-line-default"
-          >
-            <td width="70%" class="p-2 text-sm truncate">
-              {{ i }}
-            </td>
-            <td width="30%" class="p-2 text-sm text-right">
-              <span
-                v-if="ext"
-                class="inline-block w-4 h-4 ml-3 mr-2 bg-green-500 rounded-full"
-              />
-              <span
-                v-else
-                class="inline-block w-4 h-4 ml-3 mr-2 bg-red-500 rounded-full"
-              />
-            </td>
-          </tr>
-        </table>
-
-        <div
-          v-if="!allowToUpdate"
-          class="mt-6 rounded-md bg-red-50 p-4 text-sm text-red-700"
-        >
-          {{ $t('settings.update_app.requirements_not_met') }}
-        </div>
-
-        <BaseButton
-          class="mt-10"
-          variant="primary"
-          :disabled="!allowToUpdate"
-          @click="onUpdateApp"
-        >
-          {{ $t('settings.update_app.update') }}
-        </BaseButton>
-      </div>
-
-      <div v-if="isUpdating" class="relative flex justify-between mt-4 content">
-        <div>
-          <h6 class="m-0 mb-3 font-medium sw-section-title">
-            {{ $t('settings.update_app.update_progress') }}
-          </h6>
-          <p
-            class="mb-8 text-sm leading-snug text-muted"
-            style="max-width: 480px"
-          >
-            {{ $t('settings.update_app.progress_text') }}
-          </p>
-        </div>
-        <LoadingIcon
-          class="absolute right-0 h-6 m-1 animate-spin text-primary-400"
-        />
-      </div>
-      <ul v-if="isUpdating" class="w-full p-0 list-none">
-        <li
-          v-for="step in updateSteps"
-          :key="step.stepUrl"
-          class="
-            flex
-            justify-between
-            w-full
-            py-3
-            border-b border-line-default border-solid
-            last:border-b-0
-          "
-        >
-          <p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
-          <div class="flex flex-row items-center">
-            <span v-if="step.time" class="mr-3 text-xs text-muted">
-              {{ step.time }}
-            </span>
-            <span
-              :class="statusClass(step)"
-              class="block py-1 text-sm text-center uppercase rounded-full"
-              style="width: 88px"
-            >
-              {{ getStatus(step) }}
-            </span>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </BaseSettingCard>
-</template>
-
-<script setup>
-import { useNotificationStore } from '@/scripts/stores/notification'
-import http from '@/scripts/http'
-import LoadingIcon from '@/scripts/components/icons/LoadingIcon.vue'
-import { reactive, ref, onMounted, computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { handleError } from '@/scripts/helpers/error-handling'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useExchangeRateStore } from '@/scripts/admin/stores/exchange-rate'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import BaseCheckbox from "@/scripts/components/base/BaseCheckbox.vue";
-
-const notificationStore = useNotificationStore()
-const dialogStore = useDialogStore()
-const { t, tm } = useI18n()
-const comapnyStore = useCompanyStore()
-const exchangeRateStore = useExchangeRateStore()
-
-let isUpdateAvailable = ref(false)
-let isCheckingforUpdate = ref(false)
-let description = ref('')
-let changelog = ref('');
-let currentVersion = ref('')
-let insiderChannel = ref('')
-let requiredExtentions = ref(null)
-let deletedFiles = ref(null)
-let isUpdating = ref(false)
-
-const updateSteps = reactive([
-  {
-    translationKey: 'settings.update_app.download_zip_file',
-    stepUrl: '/api/v1/update/download',
-    time: null,
-    started: false,
-    completed: false,
-  },
-  {
-    translationKey: 'settings.update_app.unzipping_package',
-    stepUrl: '/api/v1/update/unzip',
-    time: null,
-    started: false,
-    completed: false,
-  },
-  {
-    translationKey: 'settings.update_app.copying_files',
-    stepUrl: '/api/v1/update/copy',
-    time: null,
-    started: false,
-    completed: false,
-  },
-  {
-    translationKey: 'settings.update_app.deleting_files',
-    stepUrl: '/api/v1/update/delete',
-    time: null,
-    started: false,
-    completed: false,
-  },
-  {
-    translationKey: 'settings.update_app.running_migrations',
-    stepUrl: '/api/v1/update/migrate',
-    time: null,
-    started: false,
-    completed: false,
-  },
-  {
-    translationKey: 'settings.update_app.finishing_update',
-    stepUrl: '/api/v1/update/finish',
-    time: null,
-    started: false,
-    completed: false,
-  },
-])
-
-const updateData = reactive({
-  isMinor: Boolean,
-  installed: '',
-  version: '',
-})
-
-let minPhpVesrion = ref(null)
-
-window.addEventListener('beforeunload', (event) => {
-  if (isUpdating.value) {
-    event.returnValue = 'Update is in progress!'
-  }
-})
-
-// Created
-
-http.get('/api/v1/app/version').then((res) => {
-  currentVersion.value = res.data.version
-  insiderChannel.value = res.data.channel === 'insider'
-})
-
-// comapnyStore
-//   .fetchCompanySettings(['bulk_exchange_rate_configured'])
-//   .then((res) => {
-//     isExchangeRateUpdated.value =
-//       res.data.bulk_exchange_rate_configured === 'YES'
-//   })
-
-// Comuted props
-
-const allowToUpdate = computed(() => {
-  if (requiredExtentions.value !== null) {
-    return Object.keys(requiredExtentions.value).every((k) => {
-      return requiredExtentions.value[k]
-    })
-  }
-  return true
-})
-
-function statusClass(step) {
-  const status = getStatus(step)
-
-  switch (status) {
-    case 'pending':
-      return 'text-primary-800 bg-surface-muted'
-    case 'finished':
-      return 'text-teal-500 bg-teal-100'
-    case 'running':
-      return 'text-blue-400 bg-blue-100'
-    case 'error':
-      return 'text-danger bg-red-200'
-    default:
-      return ''
-  }
-}
-
-async function checkUpdate() {
-  try {
-    isCheckingforUpdate.value = true
-    let response = await http.get('/api/v1/check/update', {
-      params: {
-        channel: insiderChannel.value ? 'insider' : ''
-      }
-    });
-    isCheckingforUpdate.value = false
-    if (!response.data.release) {
-      notificationStore.showNotification({
-        title: 'Info!',
-        type: 'info',
-        message: t('settings.update_app.latest_message'),
-      })
-      return;
-    }
-
-    if (response.data) {
-      updateData.isMinor = response.data.is_minor
-      updateData.version = response.data.release.version
-      description.value = response.data.release.description
-      changelog.value = response.data.release.changelog
-      requiredExtentions.value = response.data.release.extensions
-      isUpdateAvailable.value = true
-      minPhpVesrion.value = response.data.release.min_php_version
-      deletedFiles.value = response.data.release.deleted_files
-    }
-  } catch (e) {
-    isUpdateAvailable.value = false
-    isCheckingforUpdate.value = false
-    handleError(e)
-  }
-}
-
-function onUpdateApp() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('settings.update_app.update_warning'),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        let path = null
-        if (!allowToUpdate.value) {
-          notificationStore.showNotification({
-            type: 'error',
-            message:
-              'Your current configuration does not match the update requirements. Please try again after all the requirements are fulfilled.',
-          })
-          return true
-        }
-        for (let index = 0; index < updateSteps.length; index++) {
-          let currentStep = updateSteps[index]
-          try {
-            isUpdating.value = true
-            currentStep.started = true
-            let updateParams = {
-              version: updateData.version,
-              installed: currentVersion.value,
-              path: path || null,
-            }
-
-            let requestResponse = await http.post(
-              currentStep.stepUrl,
-              updateParams
-            )
-            currentStep.completed = true
-            if (requestResponse.data && requestResponse.data.path) {
-              path = requestResponse.data.path
-            }
-            // on finish
-
-            if (currentStep.translationKey == 'settings.update_app.finishing_update') {
-              isUpdating.value = false
-              notificationStore.showNotification({
-                type: 'success',
-                message: t('settings.update_app.update_success'),
-              })
-
-              setTimeout(() => {
-                location.reload()
-              }, 3000)
-            }
-          } catch (error) {
-            currentStep.started = false
-            currentStep.completed = true
-            handleError(error)
-            onUpdateFailed(currentStep.translationKey)
-            return false
-          }
-        }
-      }
-    })
-}
-
-function onUpdateFailed(translationKey) {
-  let stepName = t(translationKey)
-  if (stepName.value) {
-    onUpdateApp()
-    return
-  }
-  isUpdating.value = false
-}
-
-function getStatus(step) {
-  if (step.started && step.completed) {
-    return 'finished'
-  } else if (step.started && !step.completed) {
-    return 'running'
-  } else if (!step.started && !step.completed) {
-    return 'pending'
-  } else {
-    return 'error'
-  }
-}
-</script>
-
-<style>
-.update-changelog ul {
-  list-style: disc!important;
-  margin-left: 30px;
-}
-.update-changelog li {
-  margin-bottom: 4px;
-}
-
-</style>
diff --git a/resources/scripts/admin/views/settings/customization/CustomizationSetting.vue b/resources/scripts/admin/views/settings/customization/CustomizationSetting.vue
deleted file mode 100644
index a9796525..00000000
--- a/resources/scripts/admin/views/settings/customization/CustomizationSetting.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="relative">
-    <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.customization.invoices.title')"
-        >
-          <InvoicesTab />
-        </BaseTab>
-
-        <BaseTab
-          tab-panel-container="py-4 mt-px"
-          :title="$t('settings.customization.estimates.title')"
-        >
-          <EstimatesTab />
-        </BaseTab>
-
-        <BaseTab
-          tab-panel-container="py-4 mt-px"
-          :title="$t('settings.customization.payments.title')"
-        >
-          <PaymentsTab />
-        </BaseTab>
-
-        <BaseTab
-          tab-panel-container="py-4 mt-px"
-          :title="$t('settings.customization.items.title')"
-        >
-          <ItemsTab />
-        </BaseTab>
-      </BaseTabGroup>
-    </BaseCard>
-  </div>
-</template>
-
-<script setup>
-import InvoicesTab from '@/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue'
-import EstimatesTab from '@/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue'
-import PaymentsTab from '@/scripts/admin/views/settings/customization/payments/PaymentsTab.vue'
-import ItemsTab from '@/scripts/admin/views/settings/customization/items/ItemsTab.vue'
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue b/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
deleted file mode 100644
index 12e4ff94..00000000
--- a/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
+++ /dev/null
@@ -1,453 +0,0 @@
-<template>
-  <h6 class="text-heading text-lg font-medium">
-    {{ $t(`settings.customization.${type}s.${type}_number_format`) }}
-  </h6>
-  <p class="mt-1 text-sm text-muted">
-    {{
-      $t(`settings.customization.${type}s.${type}_number_format_description`)
-    }}
-  </p>
-
-  <div class="overflow-x-auto">
-    <table class="w-full mt-6 table-fixed">
-      <colgroup>
-        <col style="width: 4%" />
-        <col style="width: 45%" />
-        <col style="width: 27%" />
-        <col style="width: 24%" />
-      </colgroup>
-
-      <thead>
-        <tr>
-          <th
-            class="
-              px-5
-              py-3
-              text-sm
-              not-italic
-              font-medium
-              leading-5
-              text-left text-body
-              border-t border-b border-line-default border-solid
-            "
-          ></th>
-          <th
-            class="
-              px-5
-              py-3
-              text-sm
-              not-italic
-              font-medium
-              leading-5
-              text-left text-body
-              border-t border-b border-line-default border-solid
-            "
-          >
-            {{ $t('settings.customization.component') }}
-          </th>
-          <th
-            class="
-              px-5
-              py-3
-              text-sm
-              not-italic
-              font-medium
-              leading-5
-              text-left text-body
-              border-t border-b border-line-default border-solid
-            "
-          >
-            {{ $t('settings.customization.Parameter') }}
-          </th>
-          <th
-            class="
-              px-5
-              py-3
-              text-sm
-              not-italic
-              font-medium
-              leading-5
-              text-left text-body
-              border-t border-b border-line-default border-solid
-            "
-          ></th>
-        </tr>
-      </thead>
-      <draggable
-        v-model="selectedFields"
-        class="divide-y divide-line-default"
-        item-key="id"
-        tag="tbody"
-        handle=".handle"
-        filter=".ignore-element"
-      >
-        <template #item="{ element }">
-          <tr class="relative">
-            <td class="text-subtle cursor-move handle align-middle">
-              <DragIcon />
-            </td>
-            <td class="px-5 py-4">
-              <label
-                class="
-                  block
-                  text-sm
-                  not-italic
-                  font-medium
-                  text-primary-500
-                  whitespace-nowrap
-                  mr-2
-                  min-w-[200px]
-                "
-              >
-                {{ element.label }}
-              </label>
-
-              <p class="text-xs text-muted mt-1">
-                {{ element.description }}
-              </p>
-            </td>
-            <td class="px-5 py-4 text-left align-middle">
-              <BaseInputGroup
-                :label="element.paramLabel"
-                class="lg:col-span-3"
-                required
-              >
-                <BaseInput
-                  v-model="element.value"
-                  :disabled="element.inputDisabled"
-                  :type="element.inputType"
-                  @update:modelValue="onUpdate($event, element)"
-                />
-              </BaseInputGroup>
-            </td>
-
-            <td class="px-5 py-4 text-right align-middle pt-10">
-              <BaseButton
-                variant="white"
-                @click.prevent="removeComponent(element)"
-              >
-                {{ $t('general.remove') }}
-                <template #left="slotProps">
-                  <BaseIcon
-                    name="XMarkIcon"
-                    class="!sm:m-0"
-                    :class="slotProps.class"
-                  />
-                </template>
-              </BaseButton>
-            </td>
-          </tr>
-        </template>
-        <template #footer>
-          <tr>
-            <td colspan="2" class="px-5 py-4">
-              <BaseInputGroup
-                :label="
-                  $t(`settings.customization.${type}s.preview_${type}_number`)
-                "
-              >
-                <BaseInput
-                  v-model="nextNumber"
-                  disabled
-                  :loading="isFetchingNextNumber"
-                />
-              </BaseInputGroup>
-            </td>
-            <td class="px-5 py-4 text-right align-middle" colspan="2">
-              <BaseDropdown wrapper-class="flex items-center justify-end mt-5">
-                <template #activator>
-                  <BaseButton variant="primary-outline">
-                    <template #left="slotProps">
-                      <BaseIcon :class="slotProps.class" name="PlusIcon" />
-                    </template>
-
-                    {{ $t('settings.customization.add_new_component') }}
-                  </BaseButton>
-                </template>
-
-                <BaseDropdownItem
-                  v-for="field in computedFields"
-                  :key="field.label"
-                  @click.prevent="onSelectField(field)"
-                >
-                  {{ field.label }}
-                </BaseDropdownItem>
-              </BaseDropdown>
-            </td>
-          </tr>
-        </template>
-      </draggable>
-    </table>
-  </div>
-
-  <BaseButton
-    :loading="isSaving"
-    :disabled="isSaving"
-    variant="primary"
-    type="submit"
-    class="mt-4"
-    @click="submitForm"
-  >
-    <template #left="slotProps">
-      <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
-    </template>
-    {{ $t('settings.customization.save') }}
-  </BaseButton>
-</template>
-
-<script setup>
-import { ref, computed, reactive, watch } from 'vue'
-import { useDebounceFn } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
-import draggable from 'vuedraggable'
-import Guid from 'guid'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-
-import DragIcon from '@/scripts/components/icons/DragIcon.vue'
-
-const props = defineProps({
-  type: {
-    type: String,
-    required: true,
-  },
-  typeStore: {
-    type: Object,
-    required: true,
-  },
-  defaultSeries: {
-    type: String,
-    default: 'INV',
-  },
-})
-
-const { t } = useI18n()
-const companyStore = useCompanyStore()
-const globalStore = useGlobalStore()
-
-const selectedFields = ref([])
-const isSaving = ref(false)
-
-const allFields = ref([
-  {
-    label: t('settings.customization.series'),
-    description: t('settings.customization.series_description'),
-    name: 'SERIES',
-    paramLabel: t('settings.customization.series_param_label'),
-    value: props.defaultSeries,
-    inputDisabled: false,
-    inputType: 'text',
-    allowMultiple: false,
-  },
-  {
-    label: t('settings.customization.sequence'),
-    description: t('settings.customization.sequence_description'),
-    name: 'SEQUENCE',
-    paramLabel: t('settings.customization.sequence_param_label'),
-    value: '6',
-    inputDisabled: false,
-    inputType: 'number',
-    allowMultiple: false,
-  },
-  {
-    label: t('settings.customization.delimiter'),
-    description: t('settings.customization.delimiter_description'),
-    name: 'DELIMITER',
-    paramLabel: t('settings.customization.delimiter_param_label'),
-    value: '-',
-    inputDisabled: false,
-    inputType: 'text',
-    allowMultiple: true,
-  },
-  {
-    label: t('settings.customization.customer_series'),
-    description: t('settings.customization.customer_series_description'),
-    name: 'CUSTOMER_SERIES',
-    paramLabel: '',
-    value: '',
-    inputDisabled: true,
-    inputType: 'text',
-    allowMultiple: false,
-  },
-  {
-    label: t('settings.customization.customer_sequence'),
-    description: t('settings.customization.customer_sequence_description'),
-    name: 'CUSTOMER_SEQUENCE',
-    paramLabel: t('settings.customization.customer_sequence_param_label'),
-    value: '6',
-    inputDisabled: false,
-    inputType: 'number',
-    allowMultiple: false,
-  },
-  {
-    label: t('settings.customization.date_format'),
-    description: t('settings.customization.date_format_description'),
-    name: 'DATE_FORMAT',
-    paramLabel: t('settings.customization.date_format_param_label'),
-    value: 'Y',
-    inputDisabled: false,
-    inputType: 'text',
-    allowMultiple: true,
-  },
-  {
-    label: t('settings.customization.random_sequence'),
-    description: t('settings.customization.random_sequence_description'),
-    name: 'RANDOM_SEQUENCE',
-    paramLabel: t('settings.customization.random_sequence_param_label'),
-    value: '6',
-    inputDisabled: false,
-    inputType: 'number',
-    allowMultiple: false,
-  },
-])
-
-const computedFields = computed(() => {
-  return allFields.value.filter(function (obj) {
-    return !selectedFields.value.some(function (obj2) {
-      if (obj.allowMultiple) {
-        return false
-      }
-
-      return obj.name == obj2.name
-    })
-  })
-})
-
-const nextNumber = ref('')
-const isFetchingNextNumber = ref(false)
-const isLoadingPlaceholders = ref(false)
-
-const getNumberFormat = computed(() => {
-  let format = ''
-
-  selectedFields.value.forEach((field) => {
-    let fieldString = `{{${field.name}`
-
-    if (field.value) {
-      fieldString += `:${field.value}`
-    }
-
-    format += `${fieldString}}}`
-  })
-
-  return format
-})
-
-watch(selectedFields, (val) => {
-  fetchNextNumber()
-})
-
-setInitialFields()
-
-async function setInitialFields() {
-  let data = {
-    format: companyStore.selectedCompanySettings[`${props.type}_number_format`],
-  }
-
-  isLoadingPlaceholders.value = true
-
-  let res = await globalStore.fetchPlaceholders(data)
-
-  res.data.placeholders.forEach((placeholder) => {
-    let found = allFields.value.find((field) => {
-      return field.name === placeholder.name
-    })
-
-    const value = placeholder.value ?? ''
-
-    selectedFields.value.push({ ...found, value, id: Guid.raw() })
-  })
-
-  isLoadingPlaceholders.value = false
-
-  fetchNextNumber()
-}
-
-function isFieldAdded(field) {
-  return selectedFields.value.find((v) => v.name === field.name)
-}
-
-function onSelectField(field) {
-  if (isFieldAdded(field) && !field.allowMultiple) {
-    return
-  }
-
-  selectedFields.value.push({ ...field, id: Guid.raw() })
-
-  fetchNextNumber()
-}
-
-function removeComponent(component) {
-  selectedFields.value = selectedFields.value.filter(function (el) {
-    return component.id !== el.id
-  })
-}
-
-function onUpdate(val, element) {
-  switch (element.name) {
-    case 'SERIES':
-      if (val.length >= 6) {
-        val = val.substring(0, 6)
-      }
-      break
-    case 'DELIMITER':
-      if (val.length >= 1) {
-        val = val.substring(0, 1)
-      }
-      break
-  }
-
-  setTimeout(() => {
-    element.value = val
-
-    fetchNextNumber()
-  }, 100)
-}
-
-const fetchNextNumber = useDebounceFn(() => {
-  getNextNumber()
-}, 500)
-
-async function getNextNumber() {
-  if (!getNumberFormat.value) {
-    nextNumber.value = ''
-    return
-  }
-
-  let data = {
-    key: props.type,
-    format: getNumberFormat.value,
-  }
-
-  isFetchingNextNumber.value = true
-
-  let res = await props.typeStore.getNextNumber(data)
-
-  isFetchingNextNumber.value = false
-
-  if (res.data) {
-    nextNumber.value = res.data.nextNumber
-  }
-}
-
-async function submitForm() {
-  if (isFetchingNextNumber.value || isLoadingPlaceholders.value) {
-    return
-  }
-
-  isSaving.value = true
-
-  let data = { settings: {} }
-
-  data.settings[props.type + '_number_format'] = getNumberFormat.value
-
-  await companyStore.updateCompanySettings({
-    data,
-    message: `settings.customization.${props.type}s.${props.type}_settings_updated`,
-  })
-
-  isSaving.value = false
-
-  return true
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue
deleted file mode 100644
index 96f2b25f..00000000
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <EstimatesTabEstimateNumber />
-
-  <BaseDivider class="my-8" />
-
-  <EstimatesTabExpiryDate />
-
-  <BaseDivider class="my-8" />
-
-  <EstimatesTabConvertEstimate />
-
-  <BaseDivider class="my-8" />
-
-  <EstimatesTabDefaultFormats />
-
-  <BaseDivider class="mt-6 mb-2" />
-
-  <ul class="divide-y divide-line-default">
-    <BaseSwitchSection
-      v-model="sendAsAttachmentField"
-      :title="$t('settings.customization.estimates.estimate_email_attachment')"
-      :description="
-        $t(
-          'settings.customization.estimates.estimate_email_attachment_setting_description'
-        )
-      "
-    />
-  </ul>
-</template>
-
-<script setup>
-import { computed, reactive, inject } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-import EstimatesTabEstimateNumber from './EstimatesTabEstimateNumber.vue'
-import EstimatesTabExpiryDate from './EstimatesTabExpiryDate.vue'
-import EstimatesTabDefaultFormats from './EstimatesTabDefaultFormats.vue'
-import EstimatesTabConvertEstimate from './EstimatesTabConvertEstimate.vue'
-
-const utils = inject('utils')
-
-const companyStore = useCompanyStore()
-
-const estimateSettings = reactive({
-  estimate_email_attachment: null,
-})
-
-utils.mergeSettings(estimateSettings, {
-  ...companyStore.selectedCompanySettings,
-})
-
-const sendAsAttachmentField = computed({
-  get: () => {
-    return estimateSettings.estimate_email_attachment === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-
-    let data = {
-      settings: {
-        estimate_email_attachment: value,
-      },
-    }
-
-    estimateSettings.estimate_email_attachment = value
-
-    await companyStore.updateCompanySettings({
-      data,
-      message: 'general.setting_updated',
-    })
-  },
-})
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
deleted file mode 100644
index 3ecc62ab..00000000
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-  <h6 class="text-heading text-lg font-medium">
-    {{ $t('settings.customization.estimates.convert_estimate_options') }}
-  </h6>
-  <p class="mt-1 text-sm text-muted">
-    {{ $t('settings.customization.estimates.convert_estimate_description') }}
-  </p>
-
-  <BaseInputGroup required>
-    <BaseRadio
-      id="no_action"
-      v-model="settingsForm.estimate_convert_action"
-      :label="$t('settings.customization.estimates.no_action')"
-      size="sm"
-      name="filter"
-      value="no_action"
-      class="mt-2"
-      @update:modelValue="submitForm"
-    />
-    <BaseRadio
-      id="delete_estimate"
-      v-model="settingsForm.estimate_convert_action"
-      :label="$t('settings.customization.estimates.delete_estimate')"
-      size="sm"
-      name="filter"
-      value="delete_estimate"
-      class="my-2"
-      @update:modelValue="submitForm"
-    />
-    <BaseRadio
-      id="mark_estimate_as_accepted"
-      v-model="settingsForm.estimate_convert_action"
-      :label="$t('settings.customization.estimates.mark_estimate_as_accepted')"
-      size="sm"
-      name="filter"
-      value="mark_estimate_as_accepted"
-      @update:modelValue="submitForm"
-    />
-  </BaseInputGroup>
-</template>
-
-<script setup>
-import { reactive, computed, ref, inject } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { required, helpers } from '@vuelidate/validators'
-import { useI18n } from 'vue-i18n'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-
-const { t, tm } = useI18n()
-const companyStore = useCompanyStore()
-const globalStore = useGlobalStore()
-
-const utils = inject('utils')
-
-const settingsForm = reactive({ estimate_convert_action: null })
-
-utils.mergeSettings(settingsForm, {
-  ...companyStore.selectedCompanySettings,
-})
-
-const retrospectiveEditOptions = computed(() => {
-  return globalStore.config.estimate_convert_action.map((option) => {
-    option.title = t(option.key)
-    return option
-  })
-})
-
-async function submitForm() {
-  let data = {
-    settings: {
-      ...settingsForm,
-    },
-  }
-
-  await companyStore.updateCompanySettings({
-    data,
-    message: 'settings.customization.estimates.estimate_settings_updated',
-  })
-
-  return true
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
deleted file mode 100644
index 2f4bd4cb..00000000
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-  <form @submit.prevent="submitForm">
-    <h6 class="text-heading text-lg font-medium">
-      {{ $t('settings.customization.estimates.default_formats') }}
-    </h6>
-    <p class="mt-1 text-sm text-muted mb-2">
-      {{ $t('settings.customization.estimates.default_formats_description') }}
-    </p>
-
-    <BaseInputGroup
-      :label="
-        $t('settings.customization.estimates.default_estimate_email_body')
-      "
-      class="mt-6 mb-4"
-    >
-      <BaseCustomInput
-        v-model="formatSettings.estimate_mail_body"
-        :fields="estimateMailFields"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :label="$t('settings.customization.estimates.company_address_format')"
-      class="mt-6 mb-4"
-    >
-      <BaseCustomInput
-        v-model="formatSettings.estimate_company_address_format"
-        :fields="companyFields"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :label="$t('settings.customization.estimates.shipping_address_format')"
-      class="mt-6 mb-4"
-    >
-      <BaseCustomInput
-        v-model="formatSettings.estimate_shipping_address_format"
-        :fields="shippingFields"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :label="$t('settings.customization.estimates.billing_address_format')"
-      class="mt-6 mb-4"
-    >
-      <BaseCustomInput
-        v-model="formatSettings.estimate_billing_address_format"
-        :fields="billingFields"
-      />
-    </BaseInputGroup>
-
-    <BaseButton
-      :loading="isSaving"
-      :disabled="isSaving"
-      variant="primary"
-      type="submit"
-      class="mt-4"
-    >
-      <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
-      </template>
-      {{ $t('settings.customization.save') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { ref, reactive, inject } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const companyStore = useCompanyStore()
-const utils = inject('utils')
-
-const estimateMailFields = ref([
-  'customer',
-  'customerCustom',
-  'estimate',
-  'estimateCustom',
-  'company',
-])
-
-const billingFields = ref([
-  'billing',
-  'customer',
-  'customerCustom',
-  'estimateCustom',
-])
-
-const shippingFields = ref([
-  'shipping',
-  'customer',
-  'customerCustom',
-  'estimateCustom',
-])
-
-const companyFields = ref(['company', 'estimateCustom'])
-
-let isSaving = ref(false)
-
-const formatSettings = reactive({
-  estimate_mail_body: null,
-  estimate_company_address_format: null,
-  estimate_shipping_address_format: null,
-  estimate_billing_address_format: null,
-})
-
-utils.mergeSettings(formatSettings, {
-  ...companyStore.selectedCompanySettings,
-})
-
-async function submitForm() {
-  isSaving.value = true
-
-  let data = {
-    settings: {
-      ...formatSettings,
-    },
-  }
-
-  await companyStore.updateCompanySettings({
-    data,
-    message: 'settings.customization.estimates.estimate_settings_updated',
-  })
-
-  isSaving.value = false
-
-  return true
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabEstimateNumber.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabEstimateNumber.vue
deleted file mode 100644
index bee3ec7b..00000000
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabEstimateNumber.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <NumberCustomizer
-    type="estimate"
-    :type-store="estimateStore"
-    default-series="EST"
-  />
-</template>
-
-<script setup>
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import NumberCustomizer from '../NumberCustomizer.vue'
-
-const estimateStore = useEstimateStore()
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
deleted file mode 100644
index b5dcac8b..00000000
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <form @submit.prevent="submitForm">
-    <h6 class="text-heading text-lg font-medium">
-      {{ $t('settings.customization.estimates.expiry_date') }}
-    </h6>
-    <p class="mt-1 text-sm text-muted mb-2">
-      {{ $t('settings.customization.estimates.expiry_date_description') }}
-    </p>
-
-    <BaseSwitchSection
-      v-model="expiryDateAutoField"
-      :title="
-        $t('settings.customization.estimates.set_expiry_date_automatically')
-      "
-      :description="
-        $t(
-          'settings.customization.estimates.set_expiry_date_automatically_description'
-        )
-      "
-    />
-
-    <BaseInputGroup
-      v-if="expiryDateAutoField"
-      :label="$t('settings.customization.estimates.expiry_date_days')"
-      :error="
-        v$.expiryDateSettings.estimate_expiry_date_days.$error &&
-        v$.expiryDateSettings.estimate_expiry_date_days.$errors[0].$message
-      "
-      class="mt-2 mb-4"
-    >
-      <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/5">
-        <BaseInput
-          v-model="expiryDateSettings.estimate_expiry_date_days"
-          :invalid="v$.expiryDateSettings.estimate_expiry_date_days.$error"
-          type="number"
-          @input="v$.expiryDateSettings.estimate_expiry_date_days.$touch()"
-        />
-      </div>
-    </BaseInputGroup>
-
-    <BaseButton
-      :loading="isSaving"
-      :disabled="isSaving"
-      variant="primary"
-      type="submit"
-      class="mt-4"
-    >
-      <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
-      </template>
-      {{ $t('settings.customization.save') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, reactive, inject } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { numeric, helpers, requiredIf } from '@vuelidate/validators'
-
-import useVuelidate from '@vuelidate/core'
-
-const { t } = useI18n()
-const companyStore = useCompanyStore()
-
-const utils = inject('utils')
-
-let isSaving = ref(false)
-
-const expiryDateSettings = reactive({
-  estimate_set_expiry_date_automatically: null,
-  estimate_expiry_date_days: null,
-})
-
-utils.mergeSettings(expiryDateSettings, {
-  ...companyStore.selectedCompanySettings,
-})
-
-const expiryDateAutoField = computed({
-  get: () => {
-    return expiryDateSettings.estimate_set_expiry_date_automatically === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-
-    expiryDateSettings.estimate_set_expiry_date_automatically = value
-  },
-})
-
-const rules = computed(() => {
-  return {
-    expiryDateSettings: {
-      estimate_expiry_date_days: {
-        required: helpers.withMessage(
-          t('validation.required'),
-          requiredIf(expiryDateAutoField.value)
-        ),
-        numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(rules, { expiryDateSettings })
-
-async function submitForm() {
-  v$.value.expiryDateSettings.$touch()
-
-  if (v$.value.expiryDateSettings.$invalid) {
-    return false
-  }
-
-  isSaving.value = true
-
-  let data = {
-    settings: {
-      ...expiryDateSettings,
-    },
-  }
-  // Don't pass expiry_date_days if setting is not enabled
-
-  if (!expiryDateAutoField.value) {
-    delete data.settings.estimate_expiry_date_days
-  }
-
-  await companyStore.updateCompanySettings({
-    data,
-    message: 'settings.customization.estimates.estimate_settings_updated',
-  })
-
-  isSaving.value = false
-
-  return true
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue
deleted file mode 100644
index 780fb9a5..00000000
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <InvoicesTabInvoiceNumber />
-
-  <BaseDivider class="my-8" />
-
-  <InvoicesTabDueDate />
-
-  <BaseDivider class="my-8" />
-
-  <InvoicesTabRetrospective />
-
-  <BaseDivider class="my-8" />
-
-  <InvoicesTabDefaultFormats />
-
-  <BaseDivider class="mt-6 mb-2" />
-
-  <ul class="divide-y divide-line-default">
-    <BaseSwitchSection
-      v-model="sendAsAttachmentField"
-      :title="$t('settings.customization.invoices.invoice_email_attachment')"
-      :description="
-        $t(
-          'settings.customization.invoices.invoice_email_attachment_setting_description'
-        )
-      "
-    />
-  </ul>
-</template>
-
-<script setup>
-import { computed, reactive, inject } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import InvoicesTabInvoiceNumber from './InvoicesTabInvoiceNumber.vue'
-import InvoicesTabRetrospective from './InvoicesTabRetrospective.vue'
-import InvoicesTabDueDate from './InvoicesTabDueDate.vue'
-import InvoicesTabDefaultFormats from './InvoicesTabDefaultFormats.vue'
-
-const utils = inject('utils')
-const companyStore = useCompanyStore()
-
-const invoiceSettings = reactive({
-  invoice_email_attachment: null,
-})
-
-utils.mergeSettings(invoiceSettings, {
-  ...companyStore.selectedCompanySettings,
-})
-
-const sendAsAttachmentField = computed({
-  get: () => {
-    return invoiceSettings.invoice_email_attachment === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-
-    let data = {
-      settings: {
-        invoice_email_attachment: value,
-      },
-    }
-
-    invoiceSettings.invoice_email_attachment = value
-
-    await companyStore.updateCompanySettings({
-      data,
-      message: 'general.setting_updated',
-    })
-  },
-})
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
deleted file mode 100644
index 70c33d48..00000000
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <form @submit.prevent="submitForm">
-    <h6 class="text-heading text-lg font-medium">
-      {{ $t('settings.customization.invoices.default_formats') }}
-    </h6>
-    <p class="mt-1 text-sm text-muted mb-2">
-      {{ $t('settings.customization.invoices.default_formats_description') }}
-    </p>
-
-    <BaseInputGroup
-      :label="$t('settings.customization.invoices.default_invoice_email_body')"
-      class="mt-6 mb-4"
-    >
-      <BaseCustomInput
-        v-model="formatSettings.invoice_mail_body"
-        :fields="invoiceMailFields"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :label="$t('settings.customization.invoices.company_address_format')"
-      class="mt-6 mb-4"
-    >
-      <BaseCustomInput
-        v-model="formatSettings.invoice_company_address_format"
-        :fields="companyFields"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :label="$t('settings.customization.invoices.shipping_address_format')"
-      class="mt-6 mb-4"
-    >
-      <BaseCustomInput
-        v-model="formatSettings.invoice_shipping_address_format"
-        :fields="shippingFields"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :label="$t('settings.customization.invoices.billing_address_format')"
-      class="mt-6 mb-4"
-    >
-      <BaseCustomInput
-        v-model="formatSettings.invoice_billing_address_format"
-        :fields="billingFields"
-      />
-    </BaseInputGroup>
-
-    <BaseButton
-      :loading="isSaving"
-      :disabled="isSaving"
-      variant="primary"
-      type="submit"
-      class="mt-4"
-    >
-      <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
-      </template>
-      {{ $t('settings.customization.save') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { ref, reactive, inject } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const companyStore = useCompanyStore()
-const utils = inject('utils')
-
-const invoiceMailFields = ref([
-  'customer',
-  'customerCustom',
-  'invoice',
-  'invoiceCustom',
-  'company',
-])
-
-const billingFields = ref([
-  'billing',
-  'customer',
-  'customerCustom',
-  'invoiceCustom',
-])
-
-const shippingFields = ref([
-  'shipping',
-  'customer',
-  'customerCustom',
-  'invoiceCustom',
-])
-
-const companyFields = ref(['company', 'invoiceCustom'])
-
-let isSaving = ref(false)
-
-const formatSettings = reactive({
-  invoice_mail_body: null,
-  invoice_company_address_format: null,
-  invoice_shipping_address_format: null,
-  invoice_billing_address_format: null,
-})
-
-utils.mergeSettings(formatSettings, {
-  ...companyStore.selectedCompanySettings,
-})
-
-async function submitForm() {
-  isSaving.value = true
-
-  let data = {
-    settings: {
-      ...formatSettings,
-    },
-  }
-
-  await companyStore.updateCompanySettings({
-    data,
-    message: 'settings.customization.invoices.invoice_settings_updated',
-  })
-
-  isSaving.value = false
-
-  return true
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
deleted file mode 100644
index a12d5bba..00000000
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-  <form @submit.prevent="submitForm">
-    <h6 class="text-heading text-lg font-medium">
-      {{ $t('settings.customization.invoices.due_date') }}
-    </h6>
-    <p class="mt-1 text-sm text-muted mb-2">
-      {{ $t('settings.customization.invoices.due_date_description') }}
-    </p>
-
-    <BaseSwitchSection
-      v-model="dueDateAutoField"
-      :title="$t('settings.customization.invoices.set_due_date_automatically')"
-      :description="
-        $t(
-          'settings.customization.invoices.set_due_date_automatically_description'
-        )
-      "
-    />
-
-    <BaseInputGroup
-      v-if="dueDateAutoField"
-      :label="$t('settings.customization.invoices.due_date_days')"
-      :error="
-        v$.dueDateSettings.invoice_due_date_days.$error &&
-        v$.dueDateSettings.invoice_due_date_days.$errors[0].$message
-      "
-      class="mt-2 mb-4"
-    >
-      <div class="w-full sm:w-1/2 md:w-1/4 lg:w-1/5">
-        <BaseInput
-          v-model="dueDateSettings.invoice_due_date_days"
-          :invalid="v$.dueDateSettings.invoice_due_date_days.$error"
-          type="number"
-          @input="v$.dueDateSettings.invoice_due_date_days.$touch()"
-        />
-      </div>
-    </BaseInputGroup>
-
-    <BaseButton
-      :loading="isSaving"
-      :disabled="isSaving"
-      variant="primary"
-      type="submit"
-      class="mt-4"
-    >
-      <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
-      </template>
-      {{ $t('settings.customization.save') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, reactive, inject } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { numeric, helpers, requiredIf } from '@vuelidate/validators'
-
-import useVuelidate from '@vuelidate/core'
-
-const { t } = useI18n()
-const companyStore = useCompanyStore()
-
-const utils = inject('utils')
-
-let isSaving = ref(false)
-
-const dueDateSettings = reactive({
-  invoice_set_due_date_automatically: null,
-  invoice_due_date_days: null,
-})
-
-utils.mergeSettings(dueDateSettings, {
-  ...companyStore.selectedCompanySettings,
-})
-
-const dueDateAutoField = computed({
-  get: () => {
-    return dueDateSettings.invoice_set_due_date_automatically === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-
-    dueDateSettings.invoice_set_due_date_automatically = value
-  },
-})
-
-const rules = computed(() => {
-  return {
-    dueDateSettings: {
-      invoice_due_date_days: {
-        required: helpers.withMessage(
-          t('validation.required'),
-          requiredIf(dueDateAutoField.value)
-        ),
-        numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(rules, { dueDateSettings })
-
-async function submitForm() {
-  v$.value.dueDateSettings.$touch()
-
-  if (v$.value.dueDateSettings.$invalid) {
-    return false
-  }
-
-  isSaving.value = true
-
-  let data = {
-    settings: {
-      ...dueDateSettings,
-    },
-  }
-  // Don't pass due_date_days if setting is not enabled
-
-  if (!dueDateAutoField.value) {
-    delete data.settings.invoice_due_date_days
-  }
-
-  await companyStore.updateCompanySettings({
-    data,
-    message: 'settings.customization.invoices.invoice_settings_updated',
-  })
-
-  isSaving.value = false
-
-  return true
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabInvoiceNumber.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabInvoiceNumber.vue
deleted file mode 100644
index 10a88cdf..00000000
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabInvoiceNumber.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <NumberCustomizer
-    type="invoice"
-    :type-store="invoiceStore"
-    default-series="INV"
-  />
-</template>
-
-<script setup>
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import NumberCustomizer from '../NumberCustomizer.vue'
-
-const invoiceStore = useInvoiceStore()
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
deleted file mode 100644
index 9389d3f0..00000000
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <h6 class="text-heading text-lg font-medium">
-    {{ $t('settings.customization.invoices.retrospective_edits') }}
-  </h6>
-  <p class="mt-1 text-sm text-muted">
-    {{ $t('settings.customization.invoices.retrospective_edits_description') }}
-  </p>
-
-  <BaseInputGroup required>
-    <BaseRadio
-      id="allow"
-      v-model="settingsForm.retrospective_edits"
-      :label="$t('settings.customization.invoices.allow')"
-      size="sm"
-      name="filter"
-      value="allow"
-      class="mt-2"
-      @update:modelValue="submitForm"
-    />
-
-    <BaseRadio
-      id="disable_on_invoice_partial_paid"
-      v-model="settingsForm.retrospective_edits"
-      :label="
-        $t('settings.customization.invoices.disable_on_invoice_partial_paid')
-      "
-      size="sm"
-      name="filter"
-      value="disable_on_invoice_partial_paid"
-      class="mt-2"
-      @update:modelValue="submitForm"
-    />
-    <BaseRadio
-      id="disable_on_invoice_paid"
-      v-model="settingsForm.retrospective_edits"
-      :label="$t('settings.customization.invoices.disable_on_invoice_paid')"
-      size="sm"
-      name="filter"
-      value="disable_on_invoice_paid"
-      class="my-2"
-      @update:modelValue="submitForm"
-    />
-    <BaseRadio
-      id="disable_on_invoice_sent"
-      v-model="settingsForm.retrospective_edits"
-      :label="$t('settings.customization.invoices.disable_on_invoice_sent')"
-      size="sm"
-      name="filter"
-      value="disable_on_invoice_sent"
-      @update:modelValue="submitForm"
-    />
-  </BaseInputGroup>
-</template>
-
-<script setup>
-import { reactive, computed, ref, inject } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useI18n } from 'vue-i18n'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-
-const { t, tm } = useI18n()
-const companyStore = useCompanyStore()
-const globalStore = useGlobalStore()
-const utils = inject('utils')
-
-const settingsForm = reactive({ retrospective_edits: null })
-
-utils.mergeSettings(settingsForm, {
-  ...companyStore.selectedCompanySettings,
-})
-
-const retrospectiveEditOptions = computed(() => {
-  return globalStore.config.retrospective_edits.map((option) => {
-    option.title = t(option.key)
-    return option
-  })
-})
-
-async function submitForm() {
-  let data = {
-    settings: {
-      ...settingsForm,
-    },
-  }
-
-  await companyStore.updateCompanySettings({
-    data,
-    message: 'settings.customization.invoices.invoice_settings_updated',
-  })
-
-  return true
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue b/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
deleted file mode 100644
index d386e3e7..00000000
--- a/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-  <ItemUnitModal />
-
-  <div class="flex flex-wrap justify-end mt-2 lg:flex-nowrap">
-    <BaseButton variant="primary-outline" @click="addItemUnit">
-      <template #left="slotProps">
-        <BaseIcon :class="slotProps.class" name="PlusIcon" />
-      </template>
-      {{ $t('settings.customization.items.add_item_unit') }}
-    </BaseButton>
-  </div>
-
-  <BaseTable ref="table" class="mt-10" :data="fetchData" :columns="columns">
-    <template #cell-actions="{ row }">
-      <BaseDropdown>
-        <template #activator>
-          <div class="inline-block">
-            <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
-          </div>
-        </template>
-
-        <BaseDropdownItem @click="editItemUnit(row)">
-          <BaseIcon
-            name="PencilIcon"
-            class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-          />
-
-          {{ $t('general.edit') }}
-        </BaseDropdownItem>
-        <BaseDropdownItem @click="removeItemUnit(row)">
-          <BaseIcon
-            name="TrashIcon"
-            class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-          />
-          {{ $t('general.delete') }}
-        </BaseDropdownItem>
-      </BaseDropdown>
-    </template>
-  </BaseTable>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useItemStore } from '@/scripts/admin/stores/item'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import ItemUnitModal from '@/scripts/admin/components/modal-components/ItemUnitModal.vue'
-
-const { t } = useI18n()
-const table = ref(null)
-
-const itemStore = useItemStore()
-const modalStore = useModalStore()
-const dialogStore = useDialogStore()
-
-const columns = computed(() => {
-  return [
-    {
-      key: 'name',
-      label: t('settings.customization.items.unit_name'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-  let response = await itemStore.fetchItemUnits(data)
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 5,
-    },
-  }
-}
-
-async function addItemUnit() {
-  modalStore.openModal({
-    title: t('settings.customization.items.add_item_unit'),
-    componentName: 'ItemUnitModal',
-    refreshData: table.value.refresh,
-    size: 'sm',
-  })
-}
-
-async function editItemUnit(row) {
-  itemStore.fetchItemUnit(row.data.id)
-  modalStore.openModal({
-    title: t('settings.customization.items.edit_item_unit'),
-    componentName: 'ItemUnitModal',
-    id: row.data.id,
-    data: row.data,
-    refreshData: table.value && table.value.refresh,
-  })
-}
-
-function removeItemUnit(row) {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('settings.customization.items.item_unit_confirm_delete'),
-      yesLabel: t('general.yes'),
-      noLabel: t('general.no'),
-      variant: 'danger',
-      hideNoButton: false,
-      size: 'lg',
-    })
-    .then(async (res) => {
-      if (res) {
-        await itemStore.deleteItemUnit(row.data.id)
-        table.value && table.value.refresh()
-      }
-    })
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue b/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue
deleted file mode 100644
index 5da762d9..00000000
--- a/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <PaymentsTabPaymentNumber />
-
-  <BaseDivider class="my-8" />
-
-  <PaymentsTabDefaultFormats />
-
-  <BaseDivider class="mt-6 mb-2" />
-
-  <ul class="divide-y divide-line-default">
-    <BaseSwitchSection
-      v-model="sendAsAttachmentField"
-      :title="$t('settings.customization.payments.payment_email_attachment')"
-      :description="
-        $t(
-          'settings.customization.payments.payment_email_attachment_setting_description'
-        )
-      "
-    />
-  </ul>
-</template>
-
-<script setup>
-import { computed, reactive, inject } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import PaymentsTabPaymentNumber from './PaymentsTabPaymentNumber.vue'
-import PaymentsTabDefaultFormats from './PaymentsTabDefaultFormats.vue'
-
-const utils = inject('utils')
-const companyStore = useCompanyStore()
-
-const paymentSettings = reactive({
-  payment_email_attachment: null,
-})
-
-utils.mergeSettings(paymentSettings, {
-  ...companyStore.selectedCompanySettings,
-})
-
-const sendAsAttachmentField = computed({
-  get: () => {
-    return paymentSettings.payment_email_attachment === 'YES'
-  },
-  set: async (newValue) => {
-    const value = newValue ? 'YES' : 'NO'
-
-    let data = {
-      settings: {
-        payment_email_attachment: value,
-      },
-    }
-
-    paymentSettings.payment_email_attachment = value
-
-    await companyStore.updateCompanySettings({
-      data,
-      message: 'general.setting_updated',
-    })
-  },
-})
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue b/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
deleted file mode 100644
index dd65d76b..00000000
--- a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <form @submit.prevent="submitForm">
-    <h6 class="text-heading text-lg font-medium">
-      {{ $t('settings.customization.payments.default_formats') }}
-    </h6>
-    <p class="mt-1 text-sm text-muted mb-2">
-      {{ $t('settings.customization.payments.default_formats_description') }}
-    </p>
-
-    <BaseInputGroup
-      :label="$t('settings.customization.payments.default_payment_email_body')"
-      class="mt-6 mb-4"
-    >
-      <BaseCustomInput
-        v-model="formatSettings.payment_mail_body"
-        :fields="mailFields"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :label="$t('settings.customization.payments.company_address_format')"
-      class="mt-6 mb-4"
-    >
-      <BaseCustomInput
-        v-model="formatSettings.payment_company_address_format"
-        :fields="companyFields"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :label="
-        $t('settings.customization.payments.from_customer_address_format')
-      "
-      class="mt-6 mb-4"
-    >
-      <BaseCustomInput
-        v-model="formatSettings.payment_from_customer_address_format"
-        :fields="customerAddressFields"
-      />
-    </BaseInputGroup>
-
-    <BaseButton
-      :loading="isSaving"
-      :disabled="isSaving"
-      variant="primary"
-      type="submit"
-      class="mt-4"
-    >
-      <template #left="slotProps">
-        <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
-      </template>
-      {{ $t('settings.customization.save') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { ref, reactive, inject } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-const companyStore = useCompanyStore()
-const utils = inject('utils')
-
-const mailFields = ref([
-  'customer',
-  'customerCustom',
-  'company',
-  'payment',
-  'paymentCustom',
-])
-
-const customerAddressFields = ref([
-  'billing',
-  'customer',
-  'customerCustom',
-  'paymentCustom',
-])
-
-const companyFields = ref(['company', 'paymentCustom'])
-
-let isSaving = ref(false)
-
-const formatSettings = reactive({
-  payment_mail_body: null,
-  payment_company_address_format: null,
-  payment_from_customer_address_format: null,
-})
-
-utils.mergeSettings(formatSettings, {
-  ...companyStore.selectedCompanySettings,
-})
-
-async function submitForm() {
-  isSaving.value = true
-
-  let data = {
-    settings: {
-      ...formatSettings,
-    },
-  }
-
-  await companyStore.updateCompanySettings({
-    data,
-    message: 'settings.customization.payments.payment_settings_updated',
-  })
-
-  isSaving.value = false
-
-  return true
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabPaymentNumber.vue b/resources/scripts/admin/views/settings/customization/payments/PaymentsTabPaymentNumber.vue
deleted file mode 100644
index a1e8e12e..00000000
--- a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabPaymentNumber.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <NumberCustomizer
-    type="payment"
-    :type-store="paymentStore"
-    default-series="PAY"
-  />
-</template>
-
-<script setup>
-import { usePaymentStore } from '@/scripts/admin/stores/payment'
-import NumberCustomizer from '../NumberCustomizer.vue'
-
-const paymentStore = usePaymentStore()
-</script>
diff --git a/resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue
deleted file mode 100644
index f3969876..00000000
--- a/resources/scripts/admin/views/settings/mail-driver/BasicMailDriver.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-  <form @submit.prevent="saveEmailConfig">
-    <BaseInputGrid>
-      <BaseInputGroup
-        :label="$t('settings.mail.driver')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.basicMailConfig.mail_driver.$error &&
-          v$.basicMailConfig.mail_driver.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model="mailDriverStore.basicMailConfig.mail_driver"
-          :content-loading="isFetchingInitialData"
-          :options="mailDrivers"
-          :can-deselect="false"
-          :invalid="v$.basicMailConfig.mail_driver.$error"
-          @update:modelValue="onChangeDriver"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.from_mail')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.basicMailConfig.from_mail.$error &&
-          v$.basicMailConfig.from_mail.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.basicMailConfig.from_mail"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="from_mail"
-          :invalid="v$.basicMailConfig.from_mail.$error"
-          @input="v$.basicMailConfig.from_mail.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.from_name')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.basicMailConfig.from_name.$error &&
-          v$.basicMailConfig.from_name.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.basicMailConfig.from_name"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="name"
-          :invalid="v$.basicMailConfig.from_name.$error"
-          @input="v$.basicMailConfig.from_name.$touch()"
-        />
-      </BaseInputGroup>
-    </BaseInputGrid>
-    <div class="flex mt-8">
-      <BaseButton
-        :content-loading="isFetchingInitialData"
-        :disabled="isSaving"
-        :loading="isSaving"
-        variant="primary"
-        type="submit"
-      >
-        <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" :class="slotProps.class" name="ArrowDownOnSquareIcon" />
-        </template>
-        {{ $t('general.save') }}
-      </BaseButton>
-      <slot />
-    </div>
-  </form>
-</template>
-
-<script setup>
-import { onMounted, computed } from 'vue'
-import { required, email, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-
-const props = defineProps({
-  configData: {
-    type: Object,
-    require: true,
-    default: Object,
-  },
-  isSaving: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  isFetchingInitialData: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  mailDrivers: {
-    type: Array,
-    require: true,
-    default: Array,
-  },
-})
-
-const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-const mailDriverStore = useMailDriverStore()
-const { t } = useI18n()
-
-const rules = computed(() => {
-  return {
-    basicMailConfig: {
-      mail_driver: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      from_mail: {
-        required: helpers.withMessage(t('validation.required'), required),
-        email: helpers.withMessage(t('validation.email_incorrect'), email),
-      },
-      from_name: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => mailDriverStore)
-)
-
-onMounted(() => {
-  for (const key in mailDriverStore.basicMailConfig) {
-    if (props.configData.hasOwnProperty(key)) {
-      mailDriverStore.$patch((state) => {
-        state.basicMailConfig[key] = props.configData[key]
-      })
-    }
-  }
-})
-
-async function saveEmailConfig() {
-  v$.value.basicMailConfig.$touch()
-  if (!v$.value.basicMailConfig.$invalid) {
-    emit('submit-data', mailDriverStore.basicMailConfig)
-  }
-  return false
-}
-
-function onChangeDriver() {
-  v$.value.basicMailConfig.mail_driver.$touch()
-  emit('on-change-driver', mailDriverStore.basicMailConfig.mail_driver)
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
deleted file mode 100644
index e606231c..00000000
--- a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<template>
-  <form @submit.prevent="saveEmailConfig">
-    <BaseInputGrid>
-      <BaseInputGroup
-        :label="$t('settings.mail.driver')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.mailgunConfig.mail_driver.$error &&
-          v$.mailgunConfig.mail_driver.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model="mailDriverStore.mailgunConfig.mail_driver"
-          :content-loading="isFetchingInitialData"
-          :options="mailDrivers"
-          :can-deselect="false"
-          :invalid="v$.mailgunConfig.mail_driver.$error"
-          @update:modelValue="onChangeDriver"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.mailgun_domain')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.mailgunConfig.mail_mailgun_domain.$error &&
-          v$.mailgunConfig.mail_mailgun_domain.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_domain"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mailgun_domain"
-          :invalid="v$.mailgunConfig.mail_mailgun_domain.$error"
-          @input="v$.mailgunConfig.mail_mailgun_domain.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.mailgun_secret')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.mailgunConfig.mail_mailgun_secret.$error &&
-          v$.mailgunConfig.mail_mailgun_secret.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_secret"
-          :content-loading="isFetchingInitialData"
-          :type="getInputType"
-          name="mailgun_secret"
-          autocomplete="off"
-          :invalid="v$.mailgunConfig.mail_mailgun_secret.$error"
-          @input="v$.mailgunConfig.mail_mailgun_secret.$touch()"
-        >
-          <template #right>
-            <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-muted cursor-pointer"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.mailgun_endpoint')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.mailgunConfig.mail_mailgun_endpoint.$error &&
-          v$.mailgunConfig.mail_mailgun_endpoint.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.mailgunConfig.mail_mailgun_endpoint"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mailgun_endpoint"
-          :invalid="v$.mailgunConfig.mail_mailgun_endpoint.$error"
-          @input="v$.mailgunConfig.mail_mailgun_endpoint.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.from_mail')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.mailgunConfig.from_mail.$error &&
-          v$.mailgunConfig.from_mail.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.mailgunConfig.from_mail"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="from_mail"
-          :invalid="v$.mailgunConfig.from_mail.$error"
-          @input="v$.mailgunConfig.from_mail.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.from_name')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.mailgunConfig.from_name.$error &&
-          v$.mailgunConfig.from_name.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.mailgunConfig.from_name"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="from_name"
-          :invalid="v$.mailgunConfig.from_name.$error"
-          @input="v$.mailgunConfig.from_name.$touch()"
-        />
-      </BaseInputGroup>
-    </BaseInputGrid>
-    <div class="flex my-10">
-      <BaseButton
-        :disabled="isSaving"
-        :content-loading="isFetchingInitialData"
-        :loading="isSaving"
-        variant="primary"
-        type="submit"
-      >
-        <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('general.save') }}
-      </BaseButton>
-      <slot />
-    </div>
-  </form>
-</template>
-
-<script setup>
-import { onMounted, ref, computed } from 'vue'
-import { required, email, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-
-const props = defineProps({
-  configData: {
-    type: Object,
-    require: true,
-    default: Object,
-  },
-  isSaving: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  isFetchingInitialData: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  mailDrivers: {
-    type: Array,
-    require: true,
-    default: Array,
-  },
-})
-
-const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-const mailDriverStore = useMailDriverStore()
-const { t } = useI18n()
-
-let isShowPassword = ref(false)
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
-const rules = computed(() => {
-  return {
-    mailgunConfig: {
-      mail_driver: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_mailgun_domain: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_mailgun_endpoint: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_mailgun_secret: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      from_mail: {
-        required: helpers.withMessage(t('validation.required'), required),
-        email,
-      },
-      from_name: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => mailDriverStore)
-)
-
-onMounted(() => {
-  for (const key in mailDriverStore.mailgunConfig) {
-    if (props.configData.hasOwnProperty(key)) {
-      mailDriverStore.mailgunConfig[key] = props.configData[key]
-    }
-  }
-})
-
-async function saveEmailConfig() {
-  v$.value.mailgunConfig.$touch()
-  if (!v$.value.mailgunConfig.$invalid) {
-    emit('submit-data', mailDriverStore.mailgunConfig)
-  }
-  return false
-}
-
-function onChangeDriver() {
-  v$.value.mailgunConfig.mail_driver.$touch()
-  emit('on-change-driver', mailDriverStore.mailgunConfig.mail_driver)
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
deleted file mode 100644
index 2c8fc30f..00000000
--- a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
+++ /dev/null
@@ -1,310 +0,0 @@
-<template>
-  <form @submit.prevent="saveEmailConfig">
-    <BaseInputGrid>
-      <BaseInputGroup
-        :label="$t('settings.mail.driver')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_driver.$error &&
-          v$.sesConfig.mail_driver.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model="mailDriverStore.sesConfig.mail_driver"
-          :content-loading="isFetchingInitialData"
-          :options="mailDrivers"
-          :can-deselect="false"
-          :invalid="v$.sesConfig.mail_driver.$error"
-          @update:modelValue="onChangeDriver"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.host')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_host.$error &&
-          v$.sesConfig.mail_host.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.sesConfig.mail_host"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mail_host"
-          :invalid="v$.sesConfig.mail_host.$error"
-          @input="v$.sesConfig.mail_host.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.port')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_port.$error &&
-          v$.sesConfig.mail_port.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.sesConfig.mail_port"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mail_port"
-          :invalid="v$.sesConfig.mail_port.$error"
-          @input="v$.sesConfig.mail_port.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.encryption')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_encryption.$error &&
-          v$.sesConfig.mail_encryption.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model.trim="mailDriverStore.sesConfig.mail_encryption"
-          :content-loading="isFetchingInitialData"
-          :options="encryptions"
-          :invalid="v$.sesConfig.mail_encryption.$error"
-          placeholder="Select option"
-          @input="v$.sesConfig.mail_encryption.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.from_mail')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.from_mail.$error &&
-          v$.sesConfig.from_mail.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.sesConfig.from_mail"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="from_mail"
-          :invalid="v$.sesConfig.from_mail.$error"
-          @input="v$.sesConfig.from_mail.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.from_name')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.from_name.$error &&
-          v$.sesConfig.from_name.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.sesConfig.from_name"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="name"
-          :invalid="v$.sesConfig.from_name.$error"
-          @input="v$.sesConfig.from_name.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.ses_key')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_ses_key.$error &&
-          v$.sesConfig.mail_ses_key.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.sesConfig.mail_ses_key"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mail_ses_key"
-          :invalid="v$.sesConfig.mail_ses_key.$error"
-          @input="v$.sesConfig.mail_ses_key.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.ses_secret')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_ses_secret.$error &&
-          v$.mail_ses_secret.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.sesConfig.mail_ses_secret"
-          :content-loading="isFetchingInitialData"
-          :type="getInputType"
-          name="mail_ses_secret"
-          autocomplete="off"
-          :invalid="v$.sesConfig.mail_ses_secret.$error"
-          @input="v$.sesConfig.mail_ses_secret.$touch()"
-        >
-          <template #right>
-            <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-muted cursor-pointer"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.ses_region')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.sesConfig.mail_ses_region.$error &&
-          v$.sesConfig.mail_ses_region.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.sesConfig.mail_ses_region"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mail_ses_region"
-          :invalid="v$.sesConfig.mail_ses_region.$error"
-          @input="v$.sesConfig.mail_ses_region.$touch()"
-        />
-      </BaseInputGroup>
-
-    </BaseInputGrid>
-
-    <div class="flex my-10">
-      <BaseButton
-        :disabled="isSaving"
-        :content-loading="isFetchingInitialData"
-        :loading="isSaving"
-        variant="primary"
-        type="submit"
-      >
-        <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('general.save') }}
-      </BaseButton>
-      <slot />
-    </div>
-  </form>
-</template>
-
-<script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
-import { required, email, numeric, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-
-const props = defineProps({
-  configData: {
-    type: Object,
-    require: true,
-    default: Object,
-  },
-  isSaving: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  isFetchingInitialData: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  mailDrivers: {
-    type: Array,
-    require: true,
-    default: Array,
-  },
-})
-
-const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-const mailDriverStore = useMailDriverStore()
-const { t } = useI18n()
-
-let isShowPassword = ref(false)
-const encryptions = reactive(['tls', 'ssl', 'starttls'])
-
-const rules = computed(() => {
-  return {
-    sesConfig: {
-      mail_driver: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_host: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_port: {
-        required: helpers.withMessage(t('validation.required'), required),
-        numeric,
-      },
-      mail_ses_key: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_ses_secret: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_ses_region: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_encryption: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      from_mail: {
-        required: helpers.withMessage(t('validation.required'), required),
-        email: helpers.withMessage(t('validation.email_incorrect'), email),
-      },
-      from_name: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => mailDriverStore)
-)
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
-onMounted(() => {
-  for (const key in mailDriverStore.sesConfig) {
-    if (props.configData.hasOwnProperty(key)) {
-      mailDriverStore.sesConfig[key] = props.configData[key]
-    }
-  }
-})
-
-async function saveEmailConfig() {
-  v$.value.sesConfig.$touch()
-  if (!v$.value.sesConfig.$invalid) {
-    emit('submit-data', mailDriverStore.sesConfig)
-  }
-  return false
-}
-
-function onChangeDriver() {
-  v$.value.sesConfig.mail_driver.$touch()
-  emit('on-change-driver', mailDriverStore.sesConfig.mail_driver)
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue b/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
deleted file mode 100644
index 15ae7ea9..00000000
--- a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<template>
-  <form @submit.prevent="saveEmailConfig">
-    <BaseInputGrid>
-      <BaseInputGroup
-        :label="$t('settings.mail.driver')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.smtpConfig.mail_driver.$error &&
-          v$.smtpConfig.mail_driver.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model="mailDriverStore.smtpConfig.mail_driver"
-          :content-loading="isFetchingInitialData"
-          :options="mailDrivers"
-          :can-deselect="false"
-          :invalid="v$.smtpConfig.mail_driver.$error"
-          @update:modelValue="onChangeDriver"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.host')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.smtpConfig.mail_host.$error &&
-          v$.smtpConfig.mail_host.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.smtpConfig.mail_host"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mail_host"
-          :invalid="v$.smtpConfig.mail_host.$error"
-          @input="v$.smtpConfig.mail_host.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :content-loading="isFetchingInitialData"
-        :label="$t('settings.mail.username')"
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.smtpConfig.mail_username"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="db_name"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :content-loading="isFetchingInitialData"
-        :label="$t('settings.mail.password')"
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.smtpConfig.mail_password"
-          :content-loading="isFetchingInitialData"
-          :type="getInputType"
-          name="password"
-        >
-          <template #right>
-            <BaseIcon
-              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-muted cursor-pointer"
-              @click="isShowPassword = !isShowPassword"
-            />
-          </template>
-        </BaseInput>
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.port')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.smtpConfig.mail_port.$error &&
-          v$.smtpConfig.mail_port.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.smtpConfig.mail_port"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="mail_port"
-          :invalid="v$.smtpConfig.mail_port.$error"
-          @input="v$.smtpConfig.mail_port.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.encryption')"
-        :content-loading="isFetchingInitialData"
-      >
-        <BaseMultiselect
-          v-model.trim="mailDriverStore.smtpConfig.mail_encryption"
-          :content-loading="isFetchingInitialData"
-          :options="schemes"
-          :searchable="true"
-          :show-labels="false"
-          placeholder="Select option"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.from_mail')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.smtpConfig.from_mail.$error &&
-          v$.smtpConfig.from_mail.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.smtpConfig.from_mail"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="from_mail"
-          :invalid="v$.smtpConfig.from_mail.$error"
-          @input="v$.smtpConfig.from_mail.$touch()"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('settings.mail.from_name')"
-        :content-loading="isFetchingInitialData"
-        :error="
-          v$.smtpConfig.from_name.$error &&
-          v$.smtpConfig.from_name.$errors[0].$message
-        "
-        required
-      >
-        <BaseInput
-          v-model.trim="mailDriverStore.smtpConfig.from_name"
-          :content-loading="isFetchingInitialData"
-          type="text"
-          name="from_name"
-          :invalid="v$.smtpConfig.from_name.$error"
-          @input="v$.smtpConfig.from_name.$touch()"
-        />
-      </BaseInputGroup>
-    </BaseInputGrid>
-
-    <div class="flex my-10">
-      <BaseButton
-        :disabled="isSaving"
-        :content-loading="isFetchingInitialData"
-        :loading="isSaving"
-        type="submit"
-        variant="primary"
-      >
-        <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('general.save') }}
-      </BaseButton>
-      <slot />
-    </div>
-  </form>
-</template>
-
-<script setup>
-import { reactive, onMounted, ref, computed } from 'vue'
-import { required, email, numeric, helpers } from '@vuelidate/validators'
-import useVuelidate from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-import { useMailDriverStore } from '@/scripts/admin/stores/mail-driver'
-
-const props = defineProps({
-  configData: {
-    type: Object,
-    require: true,
-    default: Object,
-  },
-  isSaving: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  isFetchingInitialData: {
-    type: Boolean,
-    require: true,
-    default: false,
-  },
-  mailDrivers: {
-    type: Array,
-    require: true,
-    default: Array,
-  },
-})
-
-const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-const mailDriverStore = useMailDriverStore()
-const { t } = useI18n()
-
-let isShowPassword = ref(false)
-const schemes = reactive(['smtp', 'smtps', 'none'])
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
-const rules = computed(() => {
-  return {
-    smtpConfig: {
-      mail_driver: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_host: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-      mail_port: {
-        required: helpers.withMessage(t('validation.required'), required),
-        numeric: helpers.withMessage(t('validation.numbers_only'), numeric),
-      },
-      from_mail: {
-        required: helpers.withMessage(t('validation.required'), required),
-        email: helpers.withMessage(t('validation.email_incorrect'), email),
-      },
-      from_name: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => mailDriverStore)
-)
-
-onMounted(() => {
-  for (const key in mailDriverStore.smtpConfig) {
-    if (props.configData.hasOwnProperty(key)) {
-      mailDriverStore.smtpConfig[key] = props.configData[key]
-    }
-  }
-})
-
-async function saveEmailConfig() {
-  v$.value.smtpConfig.$touch()
-  if (!v$.value.smtpConfig.$invalid) {
-    emit('submit-data', mailDriverStore.smtpConfig)
-  }
-  return false
-}
-
-function onChangeDriver() {
-  v$.value.smtpConfig.mail_driver.$touch()
-  emit('on-change-driver', mailDriverStore.smtpConfig.mail_driver)
-}
-</script>
diff --git a/resources/scripts/admin/views/settings/pdf-driver/DomPDFDriver.vue b/resources/scripts/admin/views/settings/pdf-driver/DomPDFDriver.vue
deleted file mode 100644
index 0789733e..00000000
--- a/resources/scripts/admin/views/settings/pdf-driver/DomPDFDriver.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <form @submit.prevent="saveConfig">
-    <BaseInputGrid>
-      <BaseInputGroup
-        :label="$t('settings.pdf.driver')"
-        :error="
-          v$.dompdf.pdf_driver.$error &&
-          v$.dompdf.pdf_driver.$errors[0].$message
-        "
-        required
-      >
-        <BaseMultiselect
-          v-model="pdfDriverStore.dompdf.pdf_driver"
-          :content-loading="isFetchingInitialData"
-          :options="drivers"
-          :can-deselect="false"
-          :invalid="v$.dompdf.pdf_driver.$error"
-          @update:modelValue="onChangeDriver"
-        />
-      </BaseInputGroup>
-    </BaseInputGrid>
-    <div class="flex my-10">
-      <BaseButton
-        :disabled="isSaving"
-        :content-loading="isFetchingInitialData"
-        :loading="isSaving"
-        type="submit"
-        variant="primary"
-      >
-        <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('general.save') }}
-      </BaseButton>
-      <slot />
-    </div>
-  </form>
-</template>
-
-<script setup>
-  import { ref, computed, onMounted } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import { usePDFDriverStore } from '@/scripts/admin/stores/pdf-driver'
-  import {required, email, helpers} from '@vuelidate/validators'
-  import useVuelidate from '@vuelidate/core'
-
-  const props = defineProps({
-    configData: {
-      type: Object,
-      require: true,
-      default: Object,
-    },
-    isSaving: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    isFetchingInitialData: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    drivers: {
-      type: Array,
-      require: true,
-      default: Array,
-    },
-  })
-
-
-  const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-  const pdfDriverStore = usePDFDriverStore();
-  const { t } = useI18n();
-
-  const rules = computed(() => {
-    return {
-      dompdf: {
-        pdf_driver: {
-          required: helpers.withMessage(t('validation.required'), required),
-        },
-      },
-    }
-  })
-
-  const v$ = useVuelidate(
-    rules,
-    computed(() => pdfDriverStore)
-  )
-
-  function onChangeDriver() {
-    // validation
-    v$.value.dompdf.pdf_driver.$touch()
-    emit('on-change-driver', pdfDriverStore.dompdf.pdf_driver)
-  }
-
-  async function saveConfig() {
-    v$.value.dompdf.$touch()
-    if (!v$.value.dompdf.$invalid) {
-      emit('submit-data', pdfDriverStore.dompdf)
-    }
-    return false
-  }
-
-  onMounted(() => {
-    for (const key in pdfDriverStore.dompdf) {
-      if (props.configData.hasOwnProperty(key)) {
-        pdfDriverStore.$patch((state) => {
-          state.dompdf[key] = props.configData[key]
-        });
-      }
-    }
-  })
-
-</script>
diff --git a/resources/scripts/admin/views/settings/pdf-driver/GotenbergDriver.vue b/resources/scripts/admin/views/settings/pdf-driver/GotenbergDriver.vue
deleted file mode 100644
index 4c4296d6..00000000
--- a/resources/scripts/admin/views/settings/pdf-driver/GotenbergDriver.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <form @submit.prevent="saveConfig">
-    <BaseInputGrid>
-      <BaseInputGroup :label="$t('settings.pdf.driver')" :error="
-          v$.gotenberg.pdf_driver.$error &&
-          v$.gotenberg.pdf_driver.$errors[0].$message
-        " required>
-        <BaseMultiselect v-model="pdfDriverStore.gotenberg.pdf_driver" :content-loading="isFetchingInitialData"
-          :options="drivers" :can-deselect="false" @update:modelValue="onChangeDriver"
-          :invalid="v$.gotenberg.pdf_driver.$error" />
-      </BaseInputGroup>
-      <BaseInputGroup :label="$t('settings.pdf.gotenberg_host')" :content-loading="isFetchingInitialData"
-        :error="
-          v$.gotenberg.gotenberg_host.$error &&
-          v$.gotenberg.gotenberg_host.$errors[0].$message
-        " required>
-        <BaseInput v-model="pdfDriverStore.gotenberg.gotenberg_host" :content-loading="isFetchingInitialData"
-          :invalid="v$.gotenberg.gotenberg_host.$error" type="text" name="gotenberg_host" />
-      </BaseInputGroup>
-      <BaseInputGroup :label="$t('settings.pdf.papersize')" :content-loading="isFetchingInitialData" :error="
-          v$.gotenberg.gotenberg_papersize.$error &&
-          v$.gotenberg.gotenberg_papersize.$errors[0].$message
-        "
-          :help-text="$t('settings.pdf.papersize_hint')"
-        required>
-        <BaseInput v-model="pdfDriverStore.gotenberg.gotenberg_papersize" :content-loading="isFetchingInitialData"
-          :invalid="v$.gotenberg.gotenberg_papersize.$error" type="text" name="gotenberg_papersize" />
-      </BaseInputGroup>
-    </BaseInputGrid>
-    <div class="flex my-10">
-      <BaseButton :disabled="isSaving" :content-loading="isFetchingInitialData" :loading="isSaving" type="submit"
-        variant="primary">
-        <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="SaveIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('general.save') }}
-      </BaseButton>
-      <slot />
-    </div>
-  </form>
-</template>
-
-<script setup>
-  import {ref, computed, onMounted} from 'vue'
-  import {useI18n} from 'vue-i18n'
-  import {usePDFDriverStore} from '@/scripts/admin/stores/pdf-driver'
-  import {required, email, helpers} from '@vuelidate/validators'
-  import useVuelidate from '@vuelidate/core'
-
-  const props = defineProps({
-    configData: {
-      type: Object,
-      require: true,
-      default: Object,
-    },
-    isSaving: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    isFetchingInitialData: {
-      type: Boolean,
-      require: true,
-      default: false,
-    },
-    drivers: {
-      type: Array,
-      require: true,
-      default: Array,
-    },
-  })
-
-
-  const emit = defineEmits(['submit-data', 'on-change-driver'])
-
-  const pdfDriverStore = usePDFDriverStore();
-  const {t} = useI18n();
-
-  const rules = computed(() => {
-    return {
-      gotenberg: {
-        pdf_driver: {
-          required: helpers.withMessage(t('validation.required'), required),
-        },
-        gotenberg_host: {
-          required: helpers.withMessage(t('validation.required'), required),
-        },
-        gotenberg_papersize: {
-          required: helpers.withMessage(t('validation.required'), required),
-        },
-      },
-    }
-  })
-
-  const v$ = useVuelidate(
-    rules,
-    computed(() => pdfDriverStore)
-  )
-
-  function onChangeDriver() {
-    v$.value.gotenberg.pdf_driver.$touch()
-    emit('on-change-driver', pdfDriverStore.gotenberg.pdf_driver)
-  }
-
-  async function saveConfig() {
-    v$.value.gotenberg.$touch()
-    if (!v$.value.gotenberg.$invalid) {
-      emit('submit-data', pdfDriverStore.gotenberg)
-    }
-    return false
-  }
-
-  // Fill pdfDriverStore.gotenbergConfig with data from config prop
-  onMounted(() => {
-    for (const key in pdfDriverStore.gotenberg) {
-      if (props.configData.hasOwnProperty(key)) {
-        pdfDriverStore.$patch((state) => {
-          state.gotenberg[key] = props.configData[key]
-        });
-      }
-    }
-    if (pdfDriverStore.gotenberg.gotenberg_papersize == '')
-      pdfDriverStore.$patch((state) => {
-        state.gotenberg.gotenberg_papersize = '210mm 297mm';
-      });
-  })
-
-</script>
diff --git a/resources/scripts/admin/views/user-settings/GeneralTab.vue b/resources/scripts/admin/views/user-settings/GeneralTab.vue
deleted file mode 100644
index faf60fc9..00000000
--- a/resources/scripts/admin/views/user-settings/GeneralTab.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <form @submit.prevent="updateGeneral">
-    <BaseSettingCard
-      :title="$t('settings.account_settings.general')"
-      :description="$t('settings.account_settings.general_description')"
-    >
-    <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>
-    </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 { 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>
diff --git a/resources/scripts/admin/views/user-settings/ProfilePhotoTab.vue b/resources/scripts/admin/views/user-settings/ProfilePhotoTab.vue
deleted file mode 100644
index 1d0b9def..00000000
--- a/resources/scripts/admin/views/user-settings/ProfilePhotoTab.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <form @submit.prevent="updateAvatar">
-    <BaseSettingCard
-      :title="$t('settings.account_settings.profile_picture')"
-      :description="$t('settings.account_settings.profile_picture_description')"
-    >
-    <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>
-    </BaseSettingCard>
-  </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>
diff --git a/resources/scripts/admin/views/user-settings/SecurityTab.vue b/resources/scripts/admin/views/user-settings/SecurityTab.vue
deleted file mode 100644
index a3c7b53d..00000000
--- a/resources/scripts/admin/views/user-settings/SecurityTab.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <form @submit.prevent="updatePassword">
-    <BaseSettingCard
-      :title="$t('settings.account_settings.security')"
-      :description="$t('settings.account_settings.security_description')"
-    >
-    <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>
-    </BaseSettingCard>
-  </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({
-      name: userStore.currentUser.name,
-      email: userStore.currentUser.email,
-      password: form.password,
-    })
-
-    form.password = ''
-    form.confirm_password = ''
-    v$.value.$reset()
-  } finally {
-    isSaving.value = false
-  }
-}
-</script>
diff --git a/resources/scripts/admin/views/user-settings/UserSettingsIndex.vue b/resources/scripts/admin/views/user-settings/UserSettingsIndex.vue
deleted file mode 100644
index 27723c06..00000000
--- a/resources/scripts/admin/views/user-settings/UserSettingsIndex.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <BasePage>
-    <BasePageHeader
-      :title="$t('settings.account_settings.account_settings')"
-      class="mb-6"
-    >
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem
-          :title="$t('general.home')"
-          to="/admin/dashboard"
-        />
-        <BaseBreadcrumbItem
-          :title="$t('settings.account_settings.account_settings')"
-          to="/admin/user-settings/general"
-          active
-        />
-      </BaseBreadcrumb>
-    </BasePageHeader>
-
-    <div class="w-full mb-6 select-wrapper xl:hidden">
-      <BaseMultiselect
-        v-model="currentSetting"
-        :options="menuItems"
-        :can-deselect="false"
-        value-prop="title"
-        track-by="title"
-        label="title"
-        object
-        @update:modelValue="navigateToSetting"
-      />
-    </div>
-
-    <div class="flex gap-8">
-      <div class="hidden mt-1 xl:block min-w-[240px] sticky top-20 self-start">
-        <BaseList>
-          <BaseListItem
-            v-for="(menuItem, index) in menuItems"
-            :key="index"
-            :title="menuItem.title"
-            :to="menuItem.link"
-            :active="hasActiveUrl(menuItem.link)"
-            :index="index"
-            class="py-3"
-          >
-            <template #icon>
-              <BaseIcon :name="menuItem.icon" />
-            </template>
-          </BaseListItem>
-        </BaseList>
-      </div>
-
-      <div class="w-full overflow-hidden">
-        <RouterView />
-      </div>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { ref, watchEffect, computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import BaseList from '@/scripts/components/list/BaseList.vue'
-import BaseListItem from '@/scripts/components/list/BaseListItem.vue'
-
-const { t } = useI18n()
-const route = useRoute()
-const router = useRouter()
-
-let currentSetting = ref({})
-
-const menuItems = computed(() => [
-  {
-    title: t('settings.account_settings.general'),
-    link: '/admin/user-settings/general',
-    icon: 'UserIcon',
-  },
-  {
-    title: t('settings.account_settings.profile_picture'),
-    link: '/admin/user-settings/profile-photo',
-    icon: 'PhotoIcon',
-  },
-  {
-    title: t('settings.account_settings.security'),
-    link: '/admin/user-settings/security',
-    icon: 'LockClosedIcon',
-  },
-])
-
-watchEffect(() => {
-  if (route.path === '/admin/user-settings') {
-    router.push('/admin/user-settings/general')
-  }
-
-  const item = menuItems.value.find((item) => {
-    return item.link === route.path
-  })
-
-  currentSetting.value = item
-})
-
-function hasActiveUrl(url) {
-  return route.path.indexOf(url) > -1
-}
-
-function navigateToSetting(setting) {
-  return router.push(setting.link)
-}
-</script>
diff --git a/resources/scripts/components/CompanySwitcher.vue b/resources/scripts/components/CompanySwitcher.vue
deleted file mode 100644
index cf2888ee..00000000
--- a/resources/scripts/components/CompanySwitcher.vue
+++ /dev/null
@@ -1,316 +0,0 @@
-<template>
-  <div ref="companySwitchBar" class="relative rounded">
-    <CompanyModal />
-
-    <div
-      class="
-        flex
-        items-center
-        justify-center
-        px-3
-        h-8
-        md:h-9
-        ml-2
-        text-sm text-white
-        bg-white/20
-        rounded-lg
-        cursor-pointer
-        hover:bg-white/30
-        transition-colors
-      "
-      @click="isShow = !isShow"
-    >
-      <span
-        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 }}
-      </span>
-      <BaseIcon name="ChevronDownIcon" class="h-5 ml-1 text-white" />
-    </div>
-
-    <transition
-      enter-active-class="transition duration-200 ease-out"
-      enter-from-class="translate-y-1 opacity-0"
-      enter-to-class="translate-y-0 opacity-100"
-      leave-active-class="transition duration-150 ease-in"
-      leave-from-class="translate-y-0 opacity-100"
-      leave-to-class="translate-y-1 opacity-0"
-    >
-      <div
-        v-if="isShow"
-        class="absolute right-0 mt-2 bg-surface rounded-md shadow-lg"
-      >
-        <div
-          class="
-            overflow-y-auto
-            scrollbar-thin scrollbar-thumb-rounded-full
-            w-[300px]
-            max-h-[350px]
-            scrollbar-thumb-surface-muted scrollbar-track-surface-secondary
-            pb-4
-          "
-        >
-          <!-- Administration Mode -->
-          <div v-if="userStore.currentUser?.is_super_admin">
-            <div
-              class="p-2 px-3 rounded-md cursor-pointer hover:bg-hover-strong hover:text-primary-500"
-              :class="{
-                'bg-surface-tertiary 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-line-light my-1"></div>
-          </div>
-
-          <label
-            class="
-              px-3
-              py-2
-              text-xs
-              font-semibold
-              text-subtle
-              mb-0.5
-              block
-              uppercase
-            "
-          >
-            {{ $t('company_switcher.label') }}
-          </label>
-
-          <div
-            v-if="companyStore.companies.length < 1"
-            class="
-              flex flex-col
-              items-center
-              justify-center
-              p-2
-              px-3
-              mt-4
-              text-base text-subtle
-            "
-          >
-            <BaseIcon name="ExclamationCircleIcon" class="h-5 text-subtle" />
-            {{ $t('company_switcher.no_results_found') }}
-          </div>
-          <div v-else>
-            <div v-if="companyStore.companies.length > 0">
-              <div
-                v-for="(company, index) in companyStore.companies"
-                :key="index"
-                class="
-                  p-2
-                  px-3
-                  rounded-md
-                  cursor-pointer
-                  hover:bg-hover-strong hover:text-primary-500
-                "
-                :class="{
-                  'bg-surface-tertiary text-primary-500':
-                    companyStore.selectedCompany && companyStore.selectedCompany.id === company.id,
-                }"
-                @click="changeCompany(company)"
-              >
-                <div class="flex items-center">
-                  <span
-                    class="
-                      flex
-                      items-center
-                      justify-center
-                      mr-3
-                      overflow-hidden
-                      text-base
-                      font-semibold
-                      bg-surface-muted
-                      rounded-md
-                      w-9
-                      h-9
-                      text-primary-500
-                    "
-                  >
-                    <span v-if="!company.logo">
-                      {{ initGenerator(company.name) }}
-                    </span>
-                    <img
-                      v-else
-                      :src="company.logo"
-                      alt="Company logo"
-                      class="w-full h-full object-contain"
-                    />
-                  </span>
-                  <div class="flex flex-col">
-                    <span class="text-sm">{{ company.name }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- Pending Invitations -->
-        <div
-          v-if="invitationStore.pendingInvitations.length > 0"
-          class="border-t border-line-light p-2"
-        >
-          <label
-            class="
-              block px-1 pt-1 pb-2 text-xs font-semibold
-              leading-tight text-subtle uppercase
-            "
-          >
-            {{ $t('members.pending_invitations') }}
-          </label>
-          <div
-            v-for="invitation in invitationStore.pendingInvitations"
-            :key="invitation.id"
-            class="p-2 px-3 rounded-md"
-          >
-            <div class="flex items-center mb-2">
-              <span
-                class="
-                  flex items-center justify-center mr-3
-                  overflow-hidden text-xs font-semibold
-                  bg-surface-muted rounded-md w-9 h-9 shrink-0 text-subtle
-                "
-              >
-                {{ initGenerator(invitation.company?.name || '?') }}
-              </span>
-              <div class="flex flex-col min-w-0">
-                <span class="text-sm text-body truncate">{{ invitation.company?.name }}</span>
-                <span class="text-xs text-subtle">{{ invitation.role?.title }}</span>
-              </div>
-            </div>
-            <div class="flex space-x-1 pl-12">
-              <button
-                class="text-xs px-2 py-1 rounded bg-primary-500 text-white hover:bg-primary-600"
-                @click.stop="acceptInvitation(invitation.token)"
-              >
-                {{ $t('general.accept') }}
-              </button>
-              <button
-                class="text-xs px-2 py-1 rounded bg-surface-muted text-body hover:bg-hover-strong"
-                @click.stop="declineInvitation(invitation.token)"
-              >
-                {{ $t('general.decline') }}
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div
-          v-if="userStore.currentUser.is_owner"
-          class="
-            flex
-            items-center
-            justify-center
-            p-4
-            pl-3
-            border-t-2 border-line-light
-            cursor-pointer
-            text-primary-400
-            hover:text-primary-500
-          "
-          @click="addNewCompany"
-        >
-          <BaseIcon name="PlusIcon" class="h-5 mr-2" />
-
-          <span class="font-medium">
-            {{ $t('company_switcher.add_new_company') }}
-          </span>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { onClickOutside } from '@vueuse/core'
-import { useRoute, useRouter } from 'vue-router'
-import { useModalStore } from '../stores/modal'
-import { useI18n } from 'vue-i18n'
-import { useGlobalStore } from '@/scripts/admin//stores/global'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useInvitationStore } from '@/scripts/admin/stores/invitation'
-
-import CompanyModal from '@/scripts/admin/components/modal-components/CompanyModal.vue'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const companyStore = useCompanyStore()
-const modalStore = useModalStore()
-const route = useRoute()
-const router = useRouter()
-const globalStore = useGlobalStore()
-const { t } = useI18n()
-const userStore = useUserStore()
-const invitationStore = useInvitationStore()
-const isShow = ref(false)
-const name = ref('')
-const companySwitchBar = ref(null)
-
-watch(route, () => {
-  isShow.value = false
-  name.value = ''
-})
-
-onClickOutside(companySwitchBar, () => {
-  isShow.value = false
-})
-
-function initGenerator(name) {
-  if (name) {
-    const nameSplit = name.split(' ')
-    const initials = nameSplit[0].charAt(0).toUpperCase()
-    return initials
-  }
-}
-
-function addNewCompany() {
-  modalStore.openModal({
-    title: t('company_switcher.new_company'),
-    componentName: 'CompanyModal',
-    size: 'sm',
-  })
-}
-
-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)
-  await globalStore.bootstrap()
-}
-
-async function acceptInvitation(token) {
-  await invitationStore.accept(token)
-}
-
-async function declineInvitation(token) {
-  await invitationStore.decline(token)
-}
-</script>
diff --git a/resources/scripts/components/GlobalSearchBar.vue b/resources/scripts/components/GlobalSearchBar.vue
deleted file mode 100644
index 688787c8..00000000
--- a/resources/scripts/components/GlobalSearchBar.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<template>
-  <div ref="searchBar" class="hidden rounded md:block relative">
-    <div>
-      <BaseInput
-        v-model="name"
-        :placeholder="$t('global_search.search')"
-        container-class="!rounded-lg !shadow-none"
-        class="h-8 md:h-9 !rounded-lg !bg-white/20 !border-white/10 !text-white !placeholder-white/60"
-        @input="onSearch"
-      >
-        <template #left>
-          <BaseIcon name="MagnifyingGlassIcon" class="!text-white/70" />
-        </template>
-        <template #right>
-          <SpinnerIcon v-if="isSearching" class="h-5 text-primary-500" />
-        </template>
-      </BaseInput>
-    </div>
-    <transition
-      enter-active-class="transition duration-200 ease-out"
-      enter-from-class="translate-y-1 opacity-0"
-      enter-to-class="translate-y-0 opacity-100"
-      leave-active-class="transition duration-150 ease-in"
-      leave-from-class="translate-y-0 opacity-100"
-      leave-to-class="translate-y-1 opacity-0"
-    >
-      <div
-        v-if="isShow"
-        class="
-          scrollbar-thin
-          scrollbar-thumb-rounded-full
-          scrollbar-thumb-surface-muted
-          scrollbar-track-surface-secondary
-          overflow-y-auto
-          bg-surface
-          rounded-md
-          mt-2
-          shadow-lg
-          p-3
-          absolute
-          w-[300px]
-          h-[200px]
-          right-0
-        "
-      >
-        <div
-          v-if="
-            usersStore.userList.length < 1 && usersStore.customerList.length < 1
-          "
-          class="
-            flex
-            items-center
-            justify-center
-            text-subtle text-base
-            flex-col
-            mt-4
-          "
-        >
-          <BaseIcon name="ExclamationCircleIcon" class="text-subtle" />
-
-          {{ $t('global_search.no_results_found') }}
-        </div>
-        <div v-else>
-          <div v-if="usersStore.customerList.length > 0">
-            <label class="text-sm text-subtle mb-0.5 block px-2 uppercase">
-              {{ $t('global_search.customers') }}
-            </label>
-            <div
-              v-for="(customer, index) in usersStore.customerList"
-              :key="index"
-              class="p-2 hover:bg-hover-strong cursor-pointer rounded-md"
-            >
-              <router-link
-                :to="{ path: `/admin/customers/${customer.id}/view` }"
-                class="flex items-center"
-              >
-                <span
-                  class="
-                    flex
-                    items-center
-                    justify-center
-                    w-9
-                    h-9
-                    mr-3
-                    text-base
-                    font-semibold
-                    bg-surface-muted
-                    rounded-full
-                    text-primary-500
-                  "
-                >
-                  {{ initGenerator(customer.name) }}
-                </span>
-                <div class="flex flex-col">
-                  <span class="text-sm">{{ customer.name }}</span>
-                  <span
-                    v-if="customer.contact_name"
-                    class="text-xs text-subtle"
-                  >
-                    {{ customer.contact_name }}
-                  </span>
-                  <span v-else class="text-xs text-subtle">{{
-                    customer.email
-                  }}</span>
-                </div>
-              </router-link>
-            </div>
-          </div>
-
-          <div v-if="usersStore.userList.length > 0" class="mt-2">
-            <label
-              class="text-sm text-subtle mb-2 block px-2 mb-0.5 uppercase"
-            >
-              {{ $t('global_search.users') }}
-            </label>
-            <div
-              v-for="(user, index) in usersStore.userList"
-              :key="index"
-              class="p-2 hover:bg-hover-strong cursor-pointer rounded-md"
-            >
-              <router-link
-                :to="{ path: `/admin/members/${user.id}/edit` }"
-                class="flex items-center"
-              >
-                <span
-                  class="
-                    flex
-                    items-center
-                    justify-center
-                    w-9
-                    h-9
-                    mr-3
-                    text-base
-                    font-semibold
-                    bg-surface-muted
-                    rounded-full
-                    text-primary-500
-                  "
-                >
-                  {{ initGenerator(user.name) }}
-                </span>
-                <div class="flex flex-col">
-                  <span class="text-sm">{{ user.name }}</span>
-                  <span class="text-xs text-subtle">{{ user.email }}</span>
-                </div>
-              </router-link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import { useMembersStore } from '@/scripts/admin/stores/members'
-import { onClickOutside } from '@vueuse/core'
-import { useRoute } from 'vue-router'
-import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
-import { debounce } from 'lodash'
-
-const usersStore = useMembersStore()
-
-const isShow = ref(false)
-const name = ref('')
-const searchBar = ref(null)
-const isSearching = ref(false)
-const route = useRoute()
-
-watch(route, () => {
-  isShow.value = false
-  name.value = ''
-})
-
-onSearch = debounce(onSearch, 500)
-
-onClickOutside(searchBar, () => {
-  isShow.value = false
-  name.value = ''
-})
-
-function onSearch() {
-  let data = {
-    search: name.value,
-  }
-
-  if (name.value) {
-    isSearching.value = true
-    usersStore.searchUsers(data).then(() => {
-      isShow.value = true
-    })
-    isSearching.value = false
-  }
-  if (name.value === '') {
-    isShow.value = false
-  }
-}
-
-function initGenerator(name) {
-  if (name) {
-    const nameSplit = name.split(' ')
-    const initials = nameSplit[0].charAt(0).toUpperCase()
-    return initials
-  }
-}
-</script>
diff --git a/resources/scripts/components/InvoiceInformationCard.vue b/resources/scripts/components/InvoiceInformationCard.vue
deleted file mode 100644
index 17c7436a..00000000
--- a/resources/scripts/components/InvoiceInformationCard.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div class="bg-surface shadow overflow-hidden rounded-lg mt-6">
-    <div class="px-4 py-5 sm:px-6">
-      <h3 class="text-lg leading-6 font-medium text-heading">
-        {{ $t('invoices.invoice_information') }}
-      </h3>
-    </div>
-    <div v-if="invoice" class="border-t border-line-default px-4 py-5 sm:p-0">
-      <dl class="sm:divide-y sm:divide-line-default">
-        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-muted">
-            {{ $t('general.from') }}
-          </dt>
-          <dd class="mt-1 text-sm text-heading sm:mt-0 sm:col-span-2">
-            {{ invoice.company.name }}
-          </dd>
-        </div>
-        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-muted">
-            {{ $t('general.to') }}
-          </dt>
-          <dd class="mt-1 text-sm text-heading sm:mt-0 sm:col-span-2">
-            {{ invoice.customer.name }}
-          </dd>
-        </div>
-        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-muted capitalize">
-            {{ $t('invoices.paid_status').toLowerCase() }}
-          </dt>
-          <dd class="mt-1 text-sm text-heading sm:mt-0 sm:col-span-2">
-            <BaseInvoiceStatusBadge
-              :status="invoice.paid_status"
-              class="px-3 py-1"
-            >
-              <BaseInvoiceStatusLabel :status="invoice.paid_status" />
-            </BaseInvoiceStatusBadge>
-          </dd>
-        </div>
-        <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
-          <dt class="text-sm font-medium text-muted">
-            {{ $t('invoices.total') }}
-          </dt>
-          <dd class="mt-1 text-sm text-heading sm:mt-0 sm:col-span-2">
-            <BaseFormatMoney
-              :currency="invoice.currency"
-              :amount="invoice.total"
-            />
-          </dd>
-        </div>
-        <div
-          v-if="invoice.formatted_notes"
-          class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
-        >
-          <dt class="text-sm font-medium text-muted">
-            {{ $t('invoices.notes') }}
-          </dt>
-          <dd class="mt-1 text-sm text-heading sm:mt-0 sm:col-span-2">
-            <span v-html="invoice.formatted_notes"></span>
-          </dd>
-        </div>
-      </dl>
-    </div>
-    <div v-else class="w-full flex items-center justify-center p-5">
-      <BaseSpinner class="text-primary-500 h-10 w-10" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  invoice: {
-    type: [Object, null],
-    required: true,
-  },
-})
-</script>
diff --git a/resources/scripts/components/InvoicePublicPage.vue b/resources/scripts/components/InvoicePublicPage.vue
deleted file mode 100644
index b350026c..00000000
--- a/resources/scripts/components/InvoicePublicPage.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-I
-<template>
-  <div class="h-screen overflow-y-auto min-h-0">
-    <div class="bg-linear-to-r from-primary-500 to-primary-400 h-5"></div>
-
-    <div
-      class="
-        relative
-        p-6
-        pb-28
-        px-4
-        md:px-6
-        w-full
-        md:w-auto md:max-w-xl
-        mx-auto
-      "
-    >
-      <BasePageHeader :title="pageTitle || ''">
-        <template #actions>
-          <div
-            class="
-              flex flex-col
-              md:flex-row
-              absolute
-              md:relative
-              bottom-2
-              left-0
-              px-4
-              md:px-0
-              w-full
-              md:space-x-4 md:space-y-0
-              space-y-2
-            "
-          >
-            <a :href="shareableLink" target="_blank" class="block w-full">
-              <BaseButton
-                variant="primary-outline"
-                class="justify-center w-full"
-              >
-                {{ $t('general.download_pdf') }}
-              </BaseButton>
-            </a>
-
-            <BaseButton
-              v-if="
-                invoiceData &&
-                invoiceData.paid_status !== 'PAID' &&
-                invoiceData.payment_module_enabled
-              "
-              variant="primary"
-              class="justify-center"
-              @click="payInvoice"
-            >
-              {{ $t('general.pay_invoice') }}
-            </BaseButton>
-          </div>
-        </template>
-      </BasePageHeader>
-
-      <InvoiceInformationCard :invoice="invoiceData" />
-
-      <div
-        v-if="!customerLogo"
-        class="flex items-center justify-center mt-4 text-muted font-normal"
-      >
-        Powered by
-        <a href="https://invoiceshelf.com" target="_blank">
-          <img :src="getLogo()" class="h-4 ml-1 mb-1" />
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import http from '@/scripts/http'
-import { ref, reactive, computed, onMounted } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import InvoiceInformationCard from '@/scripts/components/InvoiceInformationCard.vue'
-
-let invoiceData = ref(null)
-const route = useRoute()
-const router = useRouter()
-
-loadInvoice()
-
-async function loadInvoice() {
-  let res = await http.get(`/customer/invoices/${route.params.hash}`)
-  invoiceData.value = res.data.data
-}
-
-const shareableLink = computed(() => {
-  return route.path + '?pdf'
-})
-
-function getLogo() {
-  const imgUrl = new URL('$images/logo-gray.png', import.meta.url)
-  return imgUrl
-}
-
-const customerLogo = computed(() => {
-  if (window.customer_logo) {
-    return window.customer_logo
-  }
-
-  return false
-})
-
-const pageTitle = computed(() => invoiceData.value?.invoice_number)
-
-function payInvoice() {
-  router.push({
-    name: 'invoice.pay',
-    params: {
-      hash: route.params.hash,
-      company: invoiceData.value.company.slug,
-    },
-  })
-}
-</script>
diff --git a/resources/scripts/components/base-select/BaseMultiselect.d.ts b/resources/scripts/components/base-select/BaseMultiselect.d.ts
deleted file mode 100644
index e5f1328f..00000000
--- a/resources/scripts/components/base-select/BaseMultiselect.d.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import Vue, { VNode } from 'vue';
-
-declare class BaseMultiselect extends Vue {
-    modelValue?: any;
-    value?: any;
-    mode: 'single' | 'multiple' | 'tags';
-    options?: any[];
-    searchable?: boolean;
-    valueProp?: string;
-    trackBy?: string;
-    label?: string;
-    placeholder?: string | null;
-    multipleLabel?: any; // Function
-    disabled?: boolean;
-    max?: number;
-    limit?: number;
-    loading?: boolean;
-    id?: string;
-    caret?: boolean;
-    maxHeight?: string | number;
-    noOptionsText?: string;
-    noResultsText?: string;
-    canDeselect?: boolean;
-    canClear?: boolean;
-    clearOnSearch?: boolean;
-    clearOnSelect?: boolean;
-    delay?: number;
-    filterResults?: boolean;
-    minChars?: number;
-    resolveOnLoad?: boolean;
-    appendNewTag?: boolean;
-    createTag?: boolean;
-    addTagOn?: string[];
-    hideSelected?: boolean;
-    showOptions?: boolean;
-    object?: boolean;
-    required?: boolean;
-    openDirection?: 'top' | 'bottom';
-    nativeSupport?: boolean;
-    classes?: object;
-    strict?: boolean;
-    closeOnSelect?: boolean;
-    autocomplete?: string;
-    groups: boolean;
-    groupLabel: string;
-    groupOptions: string;
-    groupHideEmpty: boolean;
-    groupSelect: boolean;
-    inputType: string;
-
-    $emit(eventName: 'change', e: { originalEvent: Event, value: any }): this;
-    $emit(eventName: 'select', e: { originalEvent: Event, value: any, option: any }): this;
-    $emit(eventName: 'deselect', e: { originalEvent: Event, value: any, option: any }): this;
-    $emit(eventName: 'remove', e: { originalEvent: Event, value: any, option: any }): this;
-    $emit(eventName: 'search-change', e: { originalEvent: Event, query: string }): this;
-    $emit(eventName: 'tag', e: { originalEvent: Event, query: string }): this;
-    $emit(eventName: 'paste', e: { originalEvent: Event }): this;
-    $emit(eventName: 'open'): this;
-    $emit(eventName: 'close'): this;
-    $emit(eventName: 'clear'): this;
-
-    $slots: {
-        placeholder: VNode[];
-        afterlist: VNode[];
-        beforelist: VNode[];
-        list: VNode[];
-        multiplelabel: VNode[];
-        singlelabel: VNode[];
-        option: VNode[];
-        groupLabel: VNode[];
-        tag: VNode[];
-    };
-}
-
-export default BaseMultiselect;
diff --git a/resources/scripts/components/base-select/BaseMultiselect.vue b/resources/scripts/components/base-select/BaseMultiselect.vue
deleted file mode 100755
index 3e4ee669..00000000
--- a/resources/scripts/components/base-select/BaseMultiselect.vue
+++ /dev/null
@@ -1,646 +0,0 @@
-<template>
-  <BaseContentPlaceholders v-if="contentLoading">
-    <BaseContentPlaceholdersBox
-      :rounded="true"
-      class="w-full"
-      style="height: 40px"
-    />
-  </BaseContentPlaceholders>
-  <div
-    v-else
-    :id="id"
-    ref="multiselect"
-    :tabindex="tabindex"
-    :class="classList.container"
-    @focusin="activate"
-    @focusout="deactivate"
-    @keydown="handleKeydown"
-    @focus="handleFocus"
-  >
-    <!-- Search -->
-    <template v-if="mode !== 'tags' && searchable && !disabled">
-      <input
-        ref="input"
-        :type="inputType"
-        :modelValue="search"
-        :value="search"
-        :class="classList.search"
-        :autocomplete="autocomplete"
-        @input="handleSearchInput"
-        @paste.stop="handlePaste"
-      />
-    </template>
-
-    <!-- Tags (with search) -->
-    <template v-if="mode == 'tags'">
-      <div :class="classList.tags">
-        <slot
-          v-for="(option, i, key) in iv"
-          name="tag"
-          :option="option"
-          :handleTagRemove="handleTagRemove"
-          :disabled="disabled"
-        >
-          <span :key="key" :class="classList.tag">
-            {{ option[label] }}
-            <span
-              v-if="!disabled"
-              :class="classList.tagRemove"
-              @mousedown.stop="handleTagRemove(option, $event)"
-            >
-              <span :class="classList.tagRemoveIcon"></span>
-            </span>
-          </span>
-        </slot>
-
-        <div :class="classList.tagsSearchWrapper">
-          <!-- Used for measuring search width -->
-          <span :class="classList.tagsSearchCopy">{{ search }}</span>
-
-          <!-- Actual search input -->
-          <input
-            v-if="searchable && !disabled"
-            ref="input"
-            :type="inputType"
-            :modelValue="search"
-            :value="search"
-            :class="classList.tagsSearch"
-            :autocomplete="autocomplete"
-            style="box-shadow: none !important"
-            @input="handleSearchInput"
-            @paste.stop="handlePaste"
-          />
-        </div>
-      </div>
-    </template>
-
-    <!-- Single label -->
-    <template v-if="mode == 'single' && hasSelected && !search && iv">
-      <slot name="singlelabel" :value="iv">
-        <div :class="classList.singleLabel">
-          {{ iv[label] }}
-        </div>
-      </slot>
-    </template>
-
-    <!-- Multiple label -->
-    <template v-if="mode == 'multiple' && hasSelected && !search">
-      <slot name="multiplelabel" :values="iv">
-        <div :class="classList.multipleLabel">
-          {{ multipleLabelText }}
-        </div>
-      </slot>
-    </template>
-
-    <!-- Placeholder -->
-    <template v-if="placeholder && !hasSelected && !search">
-      <slot name="placeholder">
-        <div :class="classList.placeholder">
-          {{ placeholder }}
-        </div>
-      </slot>
-    </template>
-
-    <!-- Spinner -->
-    <slot v-if="busy" name="spinner">
-      <span :class="classList.spinner"></span>
-    </slot>
-
-    <!-- Clear -->
-    <slot
-      v-if="hasSelected && !disabled && canClear && !busy"
-      name="clear"
-      :clear="clear"
-    >
-      <span :class="classList.clear" @mousedown="clear"
-        ><span :class="classList.clearIcon"></span
-      ></span>
-    </slot>
-
-    <!-- Caret -->
-    <slot v-if="caret" name="caret">
-      <span
-        :class="classList.caret"
-        @mousedown.prevent.stop="handleCaretClick"
-      ></span>
-    </slot>
-
-    <!-- Options -->
-    <div :class="classList.dropdown" tabindex="-1">
-      <div class="w-full overflow-y-auto">
-        <slot name="beforelist" :options="fo"></slot>
-
-        <ul :class="classList.options">
-          <template v-if="groups">
-            <li
-              v-for="(group, i, key) in fg"
-              :key="key"
-              :class="classList.group"
-            >
-              <div
-                :class="classList.groupLabel(group)"
-                :data-pointed="isPointed(group)"
-                @mouseenter="setPointer(group)"
-                @click="handleGroupClick(group)"
-              >
-                <slot name="grouplabel" :group="group">
-                  <span>{{ group[groupLabel] }}</span>
-                </slot>
-              </div>
-
-              <ul :class="classList.groupOptions">
-                <li
-                  v-for="(option, i, key) in group.__VISIBLE__"
-                  :key="key"
-                  :class="classList.option(option, group)"
-                  :data-pointed="isPointed(option)"
-                  @mouseenter="setPointer(option)"
-                  @click="handleOptionClick(option)"
-                >
-                  <slot name="option" :option="option" :search="search">
-                    <span>{{ option[label] }}</span>
-                  </slot>
-                </li>
-              </ul>
-            </li>
-          </template>
-          <template v-else>
-            <li
-              v-for="(option, i, key) in fo"
-              :key="key"
-              :class="classList.option(option)"
-              :data-pointed="isPointed(option)"
-              @mouseenter="setPointer(option)"
-              @click="handleOptionClick(option)"
-            >
-              <slot name="option" :option="option" :search="search">
-                <span>{{ option[label] }}</span>
-              </slot>
-            </li>
-          </template>
-        </ul>
-
-        <slot v-if="noOptions" name="nooptions">
-          <div :class="classList.noOptions" v-html="$t('general.multiselect.the_list_is_empty')"></div>
-        </slot>
-
-        <slot v-if="noResults" name="noresults">
-          <div :class="classList.noResults" v-html="$t('general.multiselect.no_results_found')"></div>
-        </slot>
-
-        <slot name="afterlist" :options="fo"> </slot>
-      </div>
-      <slot name="action"></slot>
-    </div>
-
-    <!-- Hacky input element to show HTML5 required warning -->
-    <input
-      v-if="required"
-      :class="classList.fakeInput"
-      tabindex="-1"
-      :value="textValue"
-      required
-    />
-
-    <!-- Native input support -->
-    <template v-if="nativeSupport">
-      <input
-        v-if="mode == 'single'"
-        type="hidden"
-        :name="name"
-        :value="plainValue !== undefined ? plainValue : ''"
-      />
-      <template v-else>
-        <input
-          v-for="(v, i) in plainValue"
-          :key="i"
-          type="hidden"
-          :name="`${name}[]`"
-          :value="v"
-        />
-      </template>
-    </template>
-
-    <!-- Create height for empty input -->
-    <div :class="classList.spacer"></div>
-  </div>
-</template>
-
-<script>
-import useData from './composables/useData'
-import useValue from './composables/useValue'
-import useSearch from './composables/useSearch'
-import usePointer from './composables/usePointer'
-import useOptions from './composables/useOptions'
-import usePointerAction from './composables/usePointerAction'
-import useDropdown from './composables/useDropdown'
-import useMultiselect from './composables/useMultiselect'
-import useKeyboard from './composables/useKeyboard'
-import useClasses from './composables/useClasses'
-
-export default {
-  name: 'BaseMultiselect',
-  props: {
-    preserveSearch: {
-      type: Boolean,
-      default: false,
-    },
-    initialSearch: {
-      type: String,
-      default: null,
-    },
-    contentLoading: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      required: false,
-    },
-    modelValue: {
-      required: false,
-    },
-    options: {
-      type: [Array, Object, Function],
-      required: false,
-      default: () => [],
-    },
-    id: {
-      type: [String, Number],
-      required: false,
-    },
-    name: {
-      type: [String, Number],
-      required: false,
-      default: 'multiselect',
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    label: {
-      type: String,
-      required: false,
-      default: 'label',
-    },
-    trackBy: {
-      type: String,
-      required: false,
-      default: 'label',
-    },
-    valueProp: {
-      type: String,
-      required: false,
-      default: 'value',
-    },
-    placeholder: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    mode: {
-      type: String,
-      required: false,
-      default: 'single', // single|multiple|tags
-    },
-    searchable: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    limit: {
-      type: Number,
-      required: false,
-      default: -1,
-    },
-    hideSelected: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    createTag: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    appendNewTag: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    caret: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    loading: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    noOptionsText: {
-      type: String,
-      required: false,
-      default: 'The list is empty',
-    },
-    noResultsText: {
-      type: String,
-      required: false,
-      default: 'No results found',
-    },
-    multipleLabel: {
-      type: Function,
-      required: false,
-    },
-    object: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    delay: {
-      type: Number,
-      required: false,
-      default: -1,
-    },
-    minChars: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    resolveOnLoad: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    filterResults: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    clearOnSearch: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    clearOnSelect: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    canDeselect: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    canClear: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    max: {
-      type: Number,
-      required: false,
-      default: -1,
-    },
-    showOptions: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    addTagOn: {
-      type: Array,
-      required: false,
-      default: () => ['enter'],
-    },
-    required: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    openDirection: {
-      type: String,
-      required: false,
-      default: 'bottom',
-    },
-    nativeSupport: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    invalid: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    classes: {
-      type: Object,
-      required: false,
-      default: () => ({
-        container:
-          'p-0 relative mx-auto w-full flex items-center justify-end box-border cursor-pointer border border-line-default rounded-md bg-surface text-sm leading-snug outline-hidden max-h-10',
-        containerDisabled:
-          'cursor-default bg-surface-muted/50 !text-subtle',
-        containerOpen: '',
-        containerOpenTop: '',
-        containerActive: 'ring-1 ring-primary-400 border-primary-400',
-        containerInvalid:
-          'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400',
-        containerInvalidActive: 'ring-1 border-red-400 ring-red-400',
-        singleLabel:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
-        multipleLabel:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5',
-        search:
-          'w-full absolute inset-0 outline-hidden appearance-none box-border border-0 text-sm font-sans bg-surface rounded-md pl-3.5',
-        tags: 'grow shrink flex flex-wrap mt-1 pl-2',
-        tag: 'bg-primary-500 text-white text-sm font-semibold py-0.5 pl-2 rounded mr-1 mb-1 flex items-center whitespace-nowrap',
-        tagDisabled: 'pr-2 !bg-subtle text-white',
-        tagRemove:
-          'flex items-center justify-center p-1 mx-0.5 rounded-xs hover:bg-black/10 group',
-        tagRemoveIcon:
-          'bg-multiselect-remove text-white bg-center bg-no-repeat opacity-30 inline-block w-3 h-3 group-hover:opacity-60',
-        tagsSearchWrapper: 'inline-block relative mx-1 mb-1 grow shrink h-full',
-        tagsSearch:
-          'absolute inset-0 border-0 focus:outline-hidden !shadow-none !focus:shadow-none appearance-none p-0 text-sm font-sans box-border w-full',
-        tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px',
-        placeholder:
-          'flex items-center h-full absolute left-0 top-0 pointer-events-none bg-transparent leading-snug pl-3.5 text-subtle text-sm',
-        caret:
-          'bg-multiselect-caret bg-center bg-no-repeat w-5 h-5 py-px box-content z-5 relative mr-1 opacity-40 shrink-0 grow-0 transition-transform',
-        caretOpen: 'rotate-180 pointer-events-auto',
-        clear:
-          'pr-3.5 relative z-10 opacity-40 transition duration-300 shrink-0 grow-0 flex hover:opacity-80',
-        clearIcon:
-          'bg-multiselect-remove bg-center bg-no-repeat w-2.5 h-4 py-px box-content inline-block',
-        spinner:
-          'bg-multiselect-spinner bg-center bg-no-repeat w-4 h-4 z-10 mr-3.5 animate-spin shrink-0 grow-0',
-        dropdown:
-          'max-h-60 shadow-lg absolute -left-px -right-px -bottom-1 border border-line-strong mt-1 overflow-y-auto z-50 bg-surface flex flex-col rounded-md',
-        dropdownTop:
-          '-translate-y-full -top-2 bottom-auto flex-col-reverse rounded-md',
-        dropdownBottom: 'translate-y-full',
-        dropdownHidden: 'hidden',
-        options: 'flex flex-col p-0 m-0 list-none',
-        optionsTop: 'flex-col-reverse',
-        group: 'p-0 m-0',
-        groupLabel:
-          'flex text-sm box-border items-center justify-start text-left py-1 px-3 font-semibold bg-surface-muted cursor-default leading-normal',
-        groupLabelPointable: 'cursor-pointer',
-        groupLabelPointed: 'bg-surface-muted text-body',
-        groupLabelSelected: 'bg-primary-600 text-white',
-        groupLabelDisabled: 'bg-surface-tertiary text-subtle cursor-not-allowed',
-        groupLabelSelectedPointed: 'bg-primary-600 text-white opacity-90',
-        groupLabelSelectedDisabled:
-          'text-primary-100 bg-primary-600/50 cursor-not-allowed',
-        groupOptions: 'p-0 m-0',
-        option:
-          'flex items-center justify-start box-border text-left cursor-pointer text-sm leading-snug py-2 px-3',
-        optionPointed: 'text-heading bg-surface-tertiary',
-        optionSelected: 'text-white bg-primary-500',
-        optionDisabled: 'text-subtle cursor-not-allowed',
-        optionSelectedPointed: 'text-white bg-primary-500 opacity-90',
-        optionSelectedDisabled:
-          'text-primary-100 bg-primary-500/50 cursor-not-allowed',
-        noOptions: 'py-2 px-3 text-muted bg-surface',
-        noResults: 'py-2 px-3 text-muted bg-surface',
-        fakeInput:
-          'bg-transparent absolute left-0 right-0 -bottom-px w-full h-px border-0 p-0 appearance-none outline-hidden text-transparent',
-        spacer: 'h-9 py-px box-content',
-      }),
-    },
-    strict: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    closeOnSelect: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    autocomplete: {
-      type: String,
-      required: false,
-    },
-    groups: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    groupLabel: {
-      type: String,
-      required: false,
-      default: 'label',
-    },
-    groupOptions: {
-      type: String,
-      required: false,
-      default: 'options',
-    },
-    groupHideEmpty: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    groupSelect: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    inputType: {
-      type: String,
-      required: false,
-      default: 'text',
-    },
-  },
-  emits: [
-    'open',
-    'close',
-    'select',
-    'deselect',
-    'input',
-    'search-change',
-    'tag',
-    'update:modelValue',
-    'change',
-    'clear',
-  ],
-  setup(props, context) {
-    const value = useValue(props, context)
-    const pointer = usePointer(props, context)
-    const dropdown = useDropdown(props, context)
-    const search = useSearch(props, context)
-
-    const data = useData(props, context, {
-      iv: value.iv,
-    })
-
-    const multiselect = useMultiselect(props, context, {
-      input: search.input,
-      open: dropdown.open,
-      close: dropdown.close,
-      clearSearch: search.clearSearch,
-    })
-
-    const options = useOptions(props, context, {
-      ev: value.ev,
-      iv: value.iv,
-      search: search.search,
-      clearSearch: search.clearSearch,
-      update: data.update,
-      pointer: pointer.pointer,
-      clearPointer: pointer.clearPointer,
-      blur: multiselect.blur,
-      deactivate: multiselect.deactivate,
-    })
-
-    const pointerAction = usePointerAction(props, context, {
-      fo: options.fo,
-      fg: options.fg,
-      handleOptionClick: options.handleOptionClick,
-      handleGroupClick: options.handleGroupClick,
-      search: search.search,
-      pointer: pointer.pointer,
-      setPointer: pointer.setPointer,
-      clearPointer: pointer.clearPointer,
-      multiselect: multiselect.multiselect,
-    })
-
-    const keyboard = useKeyboard(props, context, {
-      iv: value.iv,
-      update: data.update,
-      search: search.search,
-      setPointer: pointer.setPointer,
-      selectPointer: pointerAction.selectPointer,
-      backwardPointer: pointerAction.backwardPointer,
-      forwardPointer: pointerAction.forwardPointer,
-      blur: multiselect.blur,
-      fo: options.fo,
-    })
-
-    const classes = useClasses(props, context, {
-      isOpen: dropdown.isOpen,
-      isPointed: pointerAction.isPointed,
-      canPointGroups: pointerAction.canPointGroups,
-      isSelected: options.isSelected,
-      isDisabled: options.isDisabled,
-      isActive: multiselect.isActive,
-      resolving: options.resolving,
-      fo: options.fo,
-    })
-
-    return {
-      ...value,
-      ...dropdown,
-      ...multiselect,
-      ...pointer,
-      ...data,
-      ...search,
-      ...options,
-      ...pointerAction,
-      ...keyboard,
-      ...classes,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/components/base-select/composables/useClasses.js b/resources/scripts/components/base-select/composables/useClasses.js
deleted file mode 100644
index ac7ba7b6..00000000
--- a/resources/scripts/components/base-select/composables/useClasses.js
+++ /dev/null
@@ -1,182 +0,0 @@
-import { computed, toRefs } from 'vue'
-
-export default function useClasses(props, context, dependencies) {
-  const refs = toRefs(props)
-  const { disabled, openDirection, showOptions, invalid } = refs
-
-  // ============ DEPENDENCIES ============
-
-  const isOpen = dependencies.isOpen
-  const isPointed = dependencies.isPointed
-  const isSelected = dependencies.isSelected
-  const isDisabled = dependencies.isDisabled
-  const isActive = dependencies.isActive
-  const canPointGroups = dependencies.canPointGroups
-  const resolving = dependencies.resolving
-  const fo = dependencies.fo
-  const isInvalid = invalid
-
-  const classes = {
-    container: 'multiselect',
-    containerDisabled: 'is-disabled',
-    containerOpen: 'is-open',
-    containerOpenTop: 'is-open-top',
-    containerActive: 'is-active',
-    containerInvalid: 'is-invalid',
-    containerInvalidActive: 'is-invalid-active',
-    singleLabel: 'multiselect-single-label',
-    multipleLabel: 'multiselect-multiple-label',
-    search: 'multiselect-search',
-    tags: 'multiselect-tags',
-    tag: 'multiselect-tag',
-    tagDisabled: 'is-disabled',
-    tagRemove: 'multiselect-tag-remove',
-    tagRemoveIcon: 'multiselect-tag-remove-icon',
-    tagsSearchWrapper: 'multiselect-tags-search-wrapper',
-    tagsSearch: 'multiselect-tags-search',
-    tagsSearchCopy: 'multiselect-tags-search-copy',
-    placeholder: 'multiselect-placeholder',
-    caret: 'multiselect-caret',
-    caretOpen: 'is-open',
-    clear: 'multiselect-clear',
-    clearIcon: 'multiselect-clear-icon',
-    spinner: 'multiselect-spinner',
-    dropdown: 'multiselect-dropdown',
-    dropdownTop: 'is-top',
-    dropdownHidden: 'is-hidden',
-    options: 'multiselect-options',
-    optionsTop: 'is-top',
-    group: 'multiselect-group',
-    groupLabel: 'multiselect-group-label',
-    groupLabelPointable: 'is-pointable',
-    groupLabelPointed: 'is-pointed',
-    groupLabelSelected: 'is-selected',
-    groupLabelDisabled: 'is-disabled',
-    groupLabelSelectedPointed: 'is-selected is-pointed',
-    groupLabelSelectedDisabled: 'is-selected is-disabled',
-    groupOptions: 'multiselect-group-options',
-    option: 'multiselect-option',
-    optionPointed: 'is-pointed',
-    optionSelected: 'is-selected',
-    optionDisabled: 'is-disabled',
-    optionSelectedPointed: 'is-selected is-pointed',
-    optionSelectedDisabled: 'is-selected is-disabled',
-    noOptions: 'multiselect-no-options',
-    noResults: 'multiselect-no-results',
-    fakeInput: 'multiselect-fake-input',
-    spacer: 'multiselect-spacer',
-    ...refs.classes.value,
-  }
-
-  // ============== COMPUTED ==============
-
-  const showDropdown = computed(() => {
-    return !!(
-      isOpen.value &&
-      showOptions.value &&
-      (!resolving.value || (resolving.value && fo.value.length))
-    )
-  })
-
-  const classList = computed(() => {
-    return {
-      container: [classes.container]
-        .concat(disabled.value ? classes.containerDisabled : [])
-        .concat(
-          showDropdown.value && openDirection.value === 'top'
-            ? classes.containerOpenTop
-            : []
-        )
-        .concat(
-          showDropdown.value && openDirection.value !== 'top'
-            ? classes.containerOpen
-            : []
-        )
-        .concat(isActive.value ? classes.containerActive : [])
-        .concat(invalid.value ? classes.containerInvalid : []),
-      spacer: classes.spacer,
-      singleLabel: classes.singleLabel,
-      multipleLabel: classes.multipleLabel,
-      search: classes.search,
-      tags: classes.tags,
-      tag: [classes.tag].concat(disabled.value ? classes.tagDisabled : []),
-      tagRemove: classes.tagRemove,
-      tagRemoveIcon: classes.tagRemoveIcon,
-      tagsSearchWrapper: classes.tagsSearchWrapper,
-      tagsSearch: classes.tagsSearch,
-      tagsSearchCopy: classes.tagsSearchCopy,
-      placeholder: classes.placeholder,
-      caret: [classes.caret].concat(isOpen.value ? classes.caretOpen : []),
-      clear: classes.clear,
-      clearIcon: classes.clearIcon,
-      spinner: classes.spinner,
-      dropdown: [classes.dropdown]
-        .concat(openDirection.value === 'top' ? classes.dropdownTop : [])
-        .concat(openDirection.value === 'bottom' ? classes.dropdownBottom : [])
-        .concat(
-          !isOpen.value || !showOptions.value || !showDropdown.value
-            ? classes.dropdownHidden
-            : []
-        ),
-      options: [classes.options].concat(
-        openDirection.value === 'top' ? classes.optionsTop : []
-      ),
-      group: classes.group,
-      groupLabel: (g) => {
-        let groupLabel = [classes.groupLabel]
-
-        if (isPointed(g)) {
-          groupLabel.push(
-            isSelected(g)
-              ? classes.groupLabelSelectedPointed
-              : classes.groupLabelPointed
-          )
-        } else if (isSelected(g) && canPointGroups.value) {
-          groupLabel.push(
-            isDisabled(g)
-              ? classes.groupLabelSelectedDisabled
-              : classes.groupLabelSelected
-          )
-        } else if (isDisabled(g)) {
-          groupLabel.push(classes.groupLabelDisabled)
-        }
-
-        if (canPointGroups.value) {
-          groupLabel.push(classes.groupLabelPointable)
-        }
-
-        return groupLabel
-      },
-      groupOptions: classes.groupOptions,
-      option: (o, g) => {
-        let option = [classes.option]
-
-        if (isPointed(o)) {
-          option.push(
-            isSelected(o)
-              ? classes.optionSelectedPointed
-              : classes.optionPointed
-          )
-        } else if (isSelected(o)) {
-          option.push(
-            isDisabled(o)
-              ? classes.optionSelectedDisabled
-              : classes.optionSelected
-          )
-        } else if (isDisabled(o) || (g && isDisabled(g))) {
-          option.push(classes.optionDisabled)
-        }
-
-        return option
-      },
-      noOptions: classes.noOptions,
-      noResults: classes.noResults,
-      fakeInput: classes.fakeInput,
-    }
-  })
-
-  return {
-    classList,
-    showDropdown,
-  }
-}
diff --git a/resources/scripts/components/base-select/composables/useData.js b/resources/scripts/components/base-select/composables/useData.js
deleted file mode 100644
index 3e7d21c9..00000000
--- a/resources/scripts/components/base-select/composables/useData.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { toRefs } from 'vue'
-import isNullish from './../utils/isNullish'
-
-export default function useData(props, context, dep) {
-  const { object, valueProp, mode } = toRefs(props)
-
-  // ============ DEPENDENCIES ============
-
-  const iv = dep.iv
-
-  // =============== METHODS ==============
-
-  const update = (val) => {
-    // Setting object(s) as internal value
-    iv.value = makeInternal(val)
-
-    // Setting object(s) or plain value as external
-    // value based on `option` setting
-    const externalVal = makeExternal(val)
-
-    context.emit('change', externalVal)
-    context.emit('input', externalVal)
-    context.emit('update:modelValue', externalVal)
-  }
-
-  // no export
-  const makeExternal = (val) => {
-    // If external value should be object
-    // no transformation is required
-    if (object.value) {
-      return val
-    }
-
-    // No need to transform if empty value
-    if (isNullish(val)) {
-      return val
-    }
-
-    // If external should be plain transform
-    // value object to plain values
-    return !Array.isArray(val) ? val[valueProp.value] : val.map(v => v[valueProp.value])
-  }
-
-  // no export
-  const makeInternal = (val) => {
-    if (isNullish(val)) {
-      return mode.value === 'single' ? {} : []
-    }
-
-    return val
-  }
-
-  return {
-    update,
-  }
-}
diff --git a/resources/scripts/components/base-select/composables/useDropdown.js b/resources/scripts/components/base-select/composables/useDropdown.js
deleted file mode 100644
index 886156ba..00000000
--- a/resources/scripts/components/base-select/composables/useDropdown.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ref, toRefs } from 'vue'
-
-export default function useDropdown(props, context, dep) {
-  const { disabled } = toRefs(props)
-
-  // ================ DATA ================
-
-  const isOpen = ref(false)
-
-  // =============== METHODS ==============
-
-  const open = () => {
-    if (isOpen.value || disabled.value) {
-      return
-    }
-
-    isOpen.value = true
-    context.emit('open')
-  }
-
-  const close = () => {
-    if (!isOpen.value) {
-      return
-    }
-
-    isOpen.value = false
-    context.emit('close')
-  }
-
-  return {
-    isOpen,
-    open,
-    close,
-  }
-}
diff --git a/resources/scripts/components/base-select/composables/useKeyboard.js b/resources/scripts/components/base-select/composables/useKeyboard.js
deleted file mode 100644
index 78baab96..00000000
--- a/resources/scripts/components/base-select/composables/useKeyboard.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import { toRefs } from 'vue'
-
-export default function useKeyboard(props, context, dep) {
-  const {
-    mode, addTagOn, createTag, openDirection, searchable,
-    showOptions, valueProp, groups: groupped,
-  } = toRefs(props)
-
-  // ============ DEPENDENCIES ============
-
-  const iv = dep.iv
-  const update = dep.update
-  const search = dep.search
-  const setPointer = dep.setPointer
-  const selectPointer = dep.selectPointer
-  const backwardPointer = dep.backwardPointer
-  const forwardPointer = dep.forwardPointer
-  const blur = dep.blur
-  const fo = dep.fo
-
-  // =============== METHODS ==============
-
-  // no export
-  const preparePointer = () => {
-    // When options are hidden and creating tags is allowed
-    // no pointer will be set (because options are hidden).
-    // In such case we need to set the pointer manually to the
-    // first option, which equals to the option created from
-    // the search value.
-    if (mode.value === 'tags' && !showOptions.value && createTag.value && searchable.value && !groupped.value) {
-      setPointer(fo.value[fo.value.map(o => o[valueProp.value]).indexOf(search.value)])
-    }
-  }
-
-  const handleKeydown = (e) => {
-    switch (e.keyCode) {
-      // backspace
-      case 8:
-        if (mode.value === 'single') {
-          return
-        }
-
-        if (searchable.value && [null, ''].indexOf(search.value) === -1) {
-          return
-        }
-
-        if (iv.value.length === 0) {
-          return
-        }
-
-        update([...iv.value].slice(0, -1))
-        break
-
-      // enter
-      case 13:
-        e.preventDefault()
-
-        if (mode.value === 'tags' && addTagOn.value.indexOf('enter') === -1 && createTag.value) {
-          return
-        }
-
-        preparePointer()
-        selectPointer()
-        break
-
-      // space
-      case 32:
-        if (searchable.value && mode.value !== 'tags' && !createTag.value) {
-          return
-        }
-
-        if (mode.value === 'tags' && ((addTagOn.value.indexOf('space') === -1 && createTag.value) || !createTag.value)) {
-          return
-        }
-
-        e.preventDefault()
-
-        preparePointer()
-        selectPointer()
-        break
-
-      // tab
-      // semicolon
-      // comma
-      case 9:
-      case 186:
-      case 188:
-        if (mode.value !== 'tags') {
-          return
-        }
-
-        const charMap = {
-          9: 'tab',
-          186: ';',
-          188: ','
-        }
-
-        if (addTagOn.value.indexOf(charMap[e.keyCode]) === -1 || !createTag.value) {
-          return
-        }
-
-        preparePointer()
-        selectPointer()
-        e.preventDefault()
-        break
-
-      // escape
-      case 27:
-        blur()
-        break
-
-      // up
-      case 38:
-        e.preventDefault()
-
-        if (!showOptions.value) {
-          return
-        }
-
-        openDirection.value === 'top' ? forwardPointer() : backwardPointer()
-        break
-
-      // down
-      case 40:
-        e.preventDefault()
-
-        if (!showOptions.value) {
-          return
-        }
-
-        openDirection.value === 'top' ? backwardPointer() : forwardPointer()
-        break
-    }
-  }
-
-  return {
-    handleKeydown,
-    preparePointer,
-  }
-}
diff --git a/resources/scripts/components/base-select/composables/useMultiselect.js b/resources/scripts/components/base-select/composables/useMultiselect.js
deleted file mode 100644
index 4e6a2162..00000000
--- a/resources/scripts/components/base-select/composables/useMultiselect.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { ref, toRefs, computed } from 'vue'
-
-export default function useMultiselect(props, context, dep) {
-  const { searchable, disabled } = toRefs(props)
-
-  // ============ DEPENDENCIES ============
-
-  const input = dep.input
-  const open = dep.open
-  const close = dep.close
-  const clearSearch = dep.clearSearch
-
-  // ================ DATA ================
-
-  const multiselect = ref(null)
-
-  const isActive = ref(false)
-
-  // ============== COMPUTED ==============
-
-  const tabindex = computed(() => {
-    return searchable.value || disabled.value ? -1 : 0
-  })
-
-  // =============== METHODS ==============
-
-  const blur = () => {
-    if (searchable.value) {
-      input.value.blur()
-    }
-
-    multiselect.value.blur()
-  }
-
-  const handleFocus = () => {
-    if (searchable.value && !disabled.value) {
-      input.value.focus()
-    }
-  }
-
-  const activate = () => {
-
-    if (disabled.value) {
-      return
-    }
-
-    isActive.value = true
-
-    open()
-  }
-
-  const deactivate = () => {
-    isActive.value = false
-
-    setTimeout(() => {
-      if (!isActive.value) {
-        close()
-        clearSearch()
-      }
-    }, 1)
-  }
-
-  const handleCaretClick = () => {
-    if (isActive.value) {
-      deactivate()
-      blur()
-    } else {
-      activate()
-    }
-  }
-
-  return {
-    multiselect,
-    tabindex,
-    isActive,
-    blur,
-    handleFocus,
-    activate,
-    deactivate,
-    handleCaretClick,
-  }
-}
diff --git a/resources/scripts/components/base-select/composables/useOptions.js b/resources/scripts/components/base-select/composables/useOptions.js
deleted file mode 100644
index 39a8bf79..00000000
--- a/resources/scripts/components/base-select/composables/useOptions.js
+++ /dev/null
@@ -1,630 +0,0 @@
-import { ref, toRefs, computed, watch, nextTick } from 'vue'
-import normalize from './../utils/normalize'
-import isObject from './../utils/isObject'
-import isNullish from './../utils/isNullish'
-import arraysEqual from './../utils/arraysEqual'
-
-export default function useOptions(props, context, dep) {
-  const {
-    options, mode, trackBy, limit, hideSelected, createTag, label,
-    appendNewTag, multipleLabel, object, loading, delay, resolveOnLoad,
-    minChars, filterResults, clearOnSearch, clearOnSelect, valueProp,
-    canDeselect, max, strict, closeOnSelect, groups: groupped, groupLabel,
-    groupOptions, groupHideEmpty, groupSelect,
-  } = toRefs(props)
-
-  // ============ DEPENDENCIES ============
-
-  const iv = dep.iv
-  const ev = dep.ev
-  const search = dep.search
-  const clearSearch = dep.clearSearch
-  const update = dep.update
-  const pointer = dep.pointer
-  const clearPointer = dep.clearPointer
-  const blur = dep.blur
-  const deactivate = dep.deactivate
-
-  // ================ DATA ================
-
-  // no export
-  // appendedOptions
-  const ap = ref([])
-
-  // no export
-  // resolvedOptions
-  const ro = ref([])
-
-  const resolving = ref(false)
-
-  // ============== COMPUTED ==============
-
-  // no export
-  // extendedOptions
-  const eo = computed(() => {
-    if (groupped.value) {
-      let groups = ro.value || /* istanbul ignore next */[]
-
-      let eo = []
-
-      groups.forEach((group) => {
-        optionsToArray(group[groupOptions.value]).forEach((option) => {
-          eo.push(Object.assign({}, option, group.disabled ? { disabled: true } : {}))
-        })
-      })
-
-      return eo
-    } else {
-      let eo = optionsToArray(ro.value || [])
-
-      if (ap.value.length) {
-        eo = eo.concat(ap.value)
-      }
-
-      return eo
-    }
-  })
-
-  const fg = computed(() => {
-    if (!groupped.value) {
-      return []
-    }
-
-    return filterGroups((ro.value || /* istanbul ignore next */[]).map((group) => {
-      const arrayOptions = optionsToArray(group[groupOptions.value])
-
-      return {
-        ...group,
-        group: true,
-        [groupOptions.value]: filterOptions(arrayOptions, false).map(o => Object.assign({}, o, group.disabled ? { disabled: true } : {})),
-        __VISIBLE__: filterOptions(arrayOptions).map(o => Object.assign({}, o, group.disabled ? { disabled: true } : {})),
-      }
-      // Difference between __VISIBLE__ and {groupOptions}: visible does not contain selected options when hideSelected=true
-    }))
-  })
-
-  // filteredOptions
-  const fo = computed(() => {
-    let options = eo.value
-
-    if (createdTag.value.length) {
-      options = createdTag.value.concat(options)
-    }
-
-    options = filterOptions(options)
-
-    if (limit.value > 0) {
-      options = options.slice(0, limit.value)
-    }
-
-    return options
-  })
-
-  const hasSelected = computed(() => {
-    switch (mode.value) {
-      case 'single':
-        return !isNullish(iv.value[valueProp.value])
-
-      case 'multiple':
-      case 'tags':
-        return !isNullish(iv.value) && iv.value.length > 0
-
-      default: return null
-    }
-  })
-
-  const multipleLabelText = computed(() => {
-    return multipleLabel.value !== undefined && multipleLabel.value !== undefined
-      ? multipleLabel.value(iv.value)
-      : (iv.value && iv.value.length > 1 ? `${iv.value.length} options selected` : `1 option selected`)
-  })
-
-  const noOptions = computed(() => {
-    return !eo.value.length && !resolving.value && !createdTag.value.length
-  })
-
-
-  const noResults = computed(() => {
-    return eo.value.length > 0 && fo.value.length == 0 && ((search.value && groupped.value) || !groupped.value)
-  })
-
-  // no export
-  const createdTag = computed(() => {
-    if (createTag.value === false || !search.value) {
-      return []
-    }
-
-    return getOptionByTrackBy(search.value) !== -1 ? [] : [{
-      [valueProp.value]: search.value,
-      [label.value]: search.value,
-      [trackBy.value]: search.value,
-    }]
-  })
-
-  // no export
-  const nullValue = computed(() => {
-    switch (mode.value) {
-      case 'single':
-        return null
-
-      case 'multiple':
-      case 'tags':
-        return []
-
-      default: return null
-    }
-  })
-
-  const busy = computed(() => {
-    return loading.value || resolving.value
-  })
-
-  // =============== METHODS ==============
-
-  /**
-   * @param {array|object|string|number} option
-   */
-  const select = (option) => {
-    if (typeof option !== 'object') {
-      option = getOption(option)
-    }
-
-    switch (mode.value) {
-      case 'single':
-        update(option)
-        break
-
-      case 'multiple':
-      case 'tags':
-        update((iv.value).concat(option))
-        break
-    }
-
-    context.emit('select', finalValue(option), option)
-  }
-
-  const deselect = (option) => {
-    if (typeof option !== 'object') {
-      option = getOption(option)
-    }
-
-    switch (mode.value) {
-      case 'single':
-        clear()
-        break
-
-      case 'tags':
-      case 'multiple':
-        update(Array.isArray(option)
-          ? iv.value.filter(v => option.map(o => o[valueProp.value]).indexOf(v[valueProp.value]) === -1)
-          : iv.value.filter(v => v[valueProp.value] != option[valueProp.value]))
-        break
-    }
-
-    context.emit('deselect', finalValue(option), option)
-  }
-
-  // no export
-  const finalValue = (option) => {
-    return object.value ? option : option[valueProp.value]
-  }
-
-  const remove = (option) => {
-    deselect(option)
-  }
-
-  const handleTagRemove = (option, e) => {
-    if (e.button !== 0) {
-      e.preventDefault()
-      return
-    }
-
-    remove(option)
-  }
-
-  const clear = () => {
-    context.emit('clear')
-    update(nullValue.value)
-  }
-
-  const isSelected = (option) => {
-    if (option.group !== undefined) {
-      return mode.value === 'single' ? false : areAllSelected(option[groupOptions.value]) && option[groupOptions.value].length
-    }
-
-    switch (mode.value) {
-      case 'single':
-        return !isNullish(iv.value) && iv.value[valueProp.value] == option[valueProp.value]
-
-      case 'tags':
-      case 'multiple':
-        return !isNullish(iv.value) && iv.value.map(o => o[valueProp.value]).indexOf(option[valueProp.value]) !== -1
-    }
-  }
-
-  const isDisabled = (option) => {
-    return option.disabled === true
-  }
-
-  const isMax = () => {
-    if (max.value === undefined || max.value === -1 || (!hasSelected.value && max.value > 0)) {
-      return false
-    }
-
-    return iv.value.length >= max.value
-  }
-
-  const handleOptionClick = (option) => {
-    if (isDisabled(option)) {
-      return
-    }
-
-    switch (mode.value) {
-      case 'single':
-        if (isSelected(option)) {
-          if (canDeselect.value) {
-            deselect(option)
-          }
-          return
-        }
-
-        blur()
-        select(option)
-        break
-
-      case 'multiple':
-        if (isSelected(option)) {
-          deselect(option)
-          return
-        }
-
-        if (isMax()) {
-          return
-        }
-
-        select(option)
-
-        if (clearOnSelect.value) {
-          clearSearch()
-        }
-
-        if (hideSelected.value) {
-          clearPointer()
-        }
-
-        // If we need to close the dropdown on select we also need
-        // to blur the input, otherwise further searches will not
-        // display any options
-        if (closeOnSelect.value) {
-          blur()
-        }
-        break
-
-      case 'tags':
-        if (isSelected(option)) {
-          deselect(option)
-          return
-        }
-
-        if (isMax()) {
-          return
-        }
-
-        if (getOption(option[valueProp.value]) === undefined && createTag.value) {
-          context.emit('tag', option[valueProp.value])
-
-          if (appendNewTag.value) {
-            appendOption(option)
-          }
-
-          clearSearch()
-        }
-
-        if (clearOnSelect.value) {
-          clearSearch()
-        }
-
-        select(option)
-
-        if (hideSelected.value) {
-          clearPointer()
-        }
-
-        // If we need to close the dropdown on select we also need
-        // to blur the input, otherwise further searches will not
-        // display any options
-        if (closeOnSelect.value) {
-          blur()
-        }
-        break
-    }
-
-    if (closeOnSelect.value) {
-      deactivate()
-    }
-  }
-
-  const handleGroupClick = (group) => {
-    if (isDisabled(group) || mode.value === 'single' || !groupSelect.value) {
-      return
-    }
-
-    switch (mode.value) {
-      case 'multiple':
-      case 'tags':
-        if (areAllEnabledSelected(group[groupOptions.value])) {
-          deselect(group[groupOptions.value])
-        } else {
-          select(group[groupOptions.value]
-            .filter(o => iv.value.map(v => v[valueProp.value]).indexOf(o[valueProp.value]) === -1)
-            .filter(o => !o.disabled)
-            .filter((o, k) => iv.value.length + 1 + k <= max.value || max.value === -1)
-          )
-        }
-        break
-    }
-
-    if (closeOnSelect.value) {
-      deactivate()
-    }
-  }
-
-  // no export
-  const areAllEnabledSelected = (options) => {
-    return options.find(o => !isSelected(o) && !o.disabled) === undefined
-  }
-
-  // no export
-  const areAllSelected = (options) => {
-    return options.find(o => !isSelected(o)) === undefined
-  }
-
-  const getOption = (val) => {
-    return eo.value[eo.value.map(o => String(o[valueProp.value])).indexOf(String(val))]
-  }
-
-  // no export
-  const getOptionByTrackBy = (val, norm = true) => {
-    return eo.value.map(o => o[trackBy.value]).indexOf(val)
-  }
-
-  // no export
-  const shouldHideOption = (option) => {
-    return ['tags', 'multiple'].indexOf(mode.value) !== -1 && hideSelected.value && isSelected(option)
-  }
-
-  // no export
-  const appendOption = (option) => {
-    ap.value.push(option)
-  }
-
-  // no export
-  const filterGroups = (groups) => {
-    // If the search has value we need to filter among
-    // he ones that are visible to the user to avoid
-    // displaying groups which technically have options
-    // based on search but that option is already selected.
-    return groupHideEmpty.value
-      ? groups.filter(g => search.value
-        ? g.__VISIBLE__.length
-        : g[groupOptions.value].length
-      )
-      : groups.filter(g => search.value ? g.__VISIBLE__.length : true)
-  }
-
-  // no export
-  const filterOptions = (options, excludeHideSelected = true) => {
-    let fo = options
-
-    if (search.value && filterResults.value) {
-      fo = fo.filter((option) => {
-        return normalize(option[trackBy.value], strict.value).indexOf(normalize(search.value, strict.value)) !== -1
-      })
-    }
-
-    if (hideSelected.value && excludeHideSelected) {
-      fo = fo.filter((option) => !shouldHideOption(option))
-    }
-
-    return fo
-  }
-
-  // no export
-  const optionsToArray = (options) => {
-    let uo = options
-
-    // Transforming an object to an array of objects
-    if (isObject(uo)) {
-      uo = Object.keys(uo).map((key) => {
-        let val = uo[key]
-
-        return { [valueProp.value]: key, [trackBy.value]: val, [label.value]: val }
-      })
-    }
-
-    // Transforming an plain arrays to an array of objects
-    uo = uo.map((val) => {
-      return typeof val === 'object' ? val : { [valueProp.value]: val, [trackBy.value]: val, [label.value]: val }
-    })
-
-    return uo
-  }
-
-  // no export
-  const initInternalValue = () => {
-    if (!isNullish(ev.value)) {
-      iv.value = makeInternal(ev.value)
-    }
-  }
-
-  const resolveOptions = (callback) => {
-    resolving.value = true
-
-    options.value(search.value).then((response) => {
-      ro.value = response
-
-      if (typeof callback == 'function') {
-        callback(response)
-      }
-
-      resolving.value = false
-    })
-  }
-
-  // no export
-  const refreshLabels = () => {
-    if (!hasSelected.value) {
-      return
-    }
-
-    if (mode.value === 'single') {
-      let newLabel = getOption(iv.value[valueProp.value])[label.value]
-
-      iv.value[label.value] = newLabel
-
-      if (object.value) {
-        ev.value[label.value] = newLabel
-      }
-    } else {
-      iv.value.forEach((val, i) => {
-        let newLabel = getOption(iv.value[i][valueProp.value])[label.value]
-
-        iv.value[i][label.value] = newLabel
-
-        if (object.value) {
-          ev.value[i][label.value] = newLabel
-        }
-      })
-    }
-  }
-
-  const refreshOptions = (callback) => {
-    resolveOptions(callback)
-  }
-
-  // no export
-  const makeInternal = (val) => {
-    if (isNullish(val)) {
-      return mode.value === 'single' ? {} : []
-    }
-
-    if (object.value) {
-      return val
-    }
-
-    // If external should be plain transform
-    // value object to plain values
-    return mode.value === 'single' ? getOption(val) || {} : val.filter(v => !!getOption(v)).map(v => getOption(v))
-  }
-
-  // ================ HOOKS ===============
-
-  if (mode.value !== 'single' && !isNullish(ev.value) && !Array.isArray(ev.value)) {
-    throw new Error(`v-model must be an array when using "${mode.value}" mode`)
-  }
-
-  if (options.value && typeof options.value == 'function') {
-    if (resolveOnLoad.value) {
-      resolveOptions(initInternalValue)
-    } else if (object.value == true) {
-      initInternalValue()
-    }
-  }
-  else {
-    ro.value = options.value
-
-    initInternalValue()
-  }
-
-  // ============== WATCHERS ==============
-
-  if (delay.value > -1) {
-    watch(search, (query) => {
-      if (query.length < minChars.value) {
-        return
-      }
-
-      resolving.value = true
-
-      if (clearOnSearch.value) {
-        ro.value = []
-      }
-      setTimeout(() => {
-        if (query != search.value) {
-          return
-        }
-
-        options.value(search.value).then((response) => {
-          if (query == search.value) {
-            ro.value = response
-            pointer.value = fo.value.filter(o => o.disabled !== true)[0] || null
-            resolving.value = false
-          }
-        })
-      }, delay.value)
-
-    }, { flush: 'sync' })
-  }
-
-  watch(ev, (newValue) => {
-    if (isNullish(newValue)) {
-      iv.value = makeInternal(newValue)
-      return
-    }
-
-    switch (mode.value) {
-      case 'single':
-        if (object.value ? newValue[valueProp.value] != iv.value[valueProp.value] : newValue != iv.value[valueProp.value]) {
-          iv.value = makeInternal(newValue)
-        }
-        break
-
-      case 'multiple':
-      case 'tags':
-        if (!arraysEqual(object.value ? newValue.map(o => o[valueProp.value]) : newValue, iv.value.map(o => o[valueProp.value]))) {
-          iv.value = makeInternal(newValue)
-        }
-        break
-    }
-  }, { deep: true })
-
-  if (typeof props.options !== 'function') {
-    watch(options, (n, o) => {
-      ro.value = props.options
-
-      if (!Object.keys(iv.value).length) {
-        initInternalValue()
-      }
-
-      refreshLabels()
-    })
-  }
-
-  return {
-    fo,
-    filteredOptions: fo,
-    hasSelected,
-    multipleLabelText,
-    eo,
-    extendedOptions: eo,
-    fg,
-    filteredGroups: fg,
-    noOptions,
-    noResults,
-    resolving,
-    busy,
-    select,
-    deselect,
-    remove,
-    clear,
-    isSelected,
-    isDisabled,
-    isMax,
-    getOption,
-    handleOptionClick,
-    handleGroupClick,
-    handleTagRemove,
-    refreshOptions,
-    resolveOptions,
-  }
-}
diff --git a/resources/scripts/components/base-select/composables/usePointer.js b/resources/scripts/components/base-select/composables/usePointer.js
deleted file mode 100644
index 5561ade9..00000000
--- a/resources/scripts/components/base-select/composables/usePointer.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { ref, toRefs } from 'vue'
-
-export default function usePointer(props, context, dep) {
-  const { groupSelect, mode, groups } = toRefs(props)
-
-  // ================ DATA ================
-
-  const pointer = ref(null)
-
-  // =============== METHODS ==============
-
-  const setPointer = (option) => {
-    if (option === undefined || (option !== null && option.disabled)) {
-      return
-    }
-
-    if (groups.value && option && option.group && (mode.value === 'single' || !groupSelect.value)) {
-      return
-    }
-
-    pointer.value = option
-  }
-
-  const clearPointer = () => {
-    setPointer(null)
-  }
-
-  return {
-    pointer,
-    setPointer,
-    clearPointer,
-  }
-}
diff --git a/resources/scripts/components/base-select/composables/usePointerAction.js b/resources/scripts/components/base-select/composables/usePointerAction.js
deleted file mode 100644
index 06ab2480..00000000
--- a/resources/scripts/components/base-select/composables/usePointerAction.js
+++ /dev/null
@@ -1,241 +0,0 @@
-import { toRefs, watch, nextTick, computed } from 'vue'
-
-export default function usePointer(props, context, dep) {
-  const {
-    valueProp, showOptions, searchable, groupLabel,
-    groups: groupped, mode, groupSelect,
-  } = toRefs(props)
-
-  // ============ DEPENDENCIES ============
-
-  const fo = dep.fo
-  const fg = dep.fg
-  const handleOptionClick = dep.handleOptionClick
-  const handleGroupClick = dep.handleGroupClick
-  const search = dep.search
-  const pointer = dep.pointer
-  const setPointer = dep.setPointer
-  const clearPointer = dep.clearPointer
-  const multiselect = dep.multiselect
-
-  // ============== COMPUTED ==============
-
-  // no export
-  const options = computed(() => {
-    return fo.value.filter(o => !o.disabled)
-  })
-
-  const groups = computed(() => {
-    return fg.value.filter(o => !o.disabled)
-  })
-
-  const canPointGroups = computed(() => {
-    return mode.value !== 'single' && groupSelect.value
-  })
-
-  const isPointerGroup = computed(() => {
-    return pointer.value && pointer.value.group
-  })
-
-  const currentGroup = computed(() => {
-    return getParentGroup(pointer.value)
-  })
-
-  const prevGroup = computed(() => {
-    const group = isPointerGroup.value ? pointer.value : /* istanbul ignore next */ getParentGroup(pointer.value)
-    const groupIndex = groups.value.map(g => g[groupLabel.value]).indexOf(group[groupLabel.value])
-    let prevGroup = groups.value[groupIndex - 1]
-
-    if (prevGroup === undefined) {
-      prevGroup = lastGroup.value
-    }
-
-    return prevGroup
-  })
-
-  const nextGroup = computed(() => {
-    let nextIndex = groups.value.map(g => g.label).indexOf(isPointerGroup.value
-      ? pointer.value[groupLabel.value]
-      : getParentGroup(pointer.value)[groupLabel.value]) + 1
-
-    if (groups.value.length <= nextIndex) {
-      nextIndex = 0
-    }
-
-    return groups.value[nextIndex]
-  })
-
-  const lastGroup = computed(() => {
-    return [...groups.value].slice(-1)[0]
-  })
-
-  const currentGroupFirstEnabledOption = computed(() => {
-    return pointer.value.__VISIBLE__.filter(o => !o.disabled)[0]
-  })
-
-  const currentGroupPrevEnabledOption = computed(() => {
-    const options = currentGroup.value.__VISIBLE__.filter(o => !o.disabled)
-    return options[options.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) - 1]
-  })
-
-  const currentGroupNextEnabledOption = computed(() => {
-    const options = getParentGroup(pointer.value).__VISIBLE__.filter(o => !o.disabled)
-    return options[options.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) + 1]
-  })
-
-  const prevGroupLastEnabledOption = computed(() => {
-    return [...prevGroup.value.__VISIBLE__.filter(o => !o.disabled)].slice(-1)[0]
-  })
-
-  const lastGroupLastEnabledOption = computed(() => {
-    return [...lastGroup.value.__VISIBLE__.filter(o => !o.disabled)].slice(-1)[0]
-  })
-
-  // =============== METHODS ==============
-
-  const isPointed = (option) => {
-    if (!pointer.value) {
-      return
-    }
-
-    if (option.group) {
-      return pointer.value[groupLabel.value] == option[groupLabel.value]
-    } else {
-      return pointer.value[valueProp.value] == option[valueProp.value]
-    }
-  }
-
-  const setPointerFirst = () => {
-    setPointer(options.value[0] || null)
-  }
-
-  const selectPointer = () => {
-    if (!pointer.value || pointer.value.disabled === true) {
-      return
-    }
-
-    if (isPointerGroup.value) {
-      handleGroupClick(pointer.value)
-    } else {
-      handleOptionClick(pointer.value)
-    }
-  }
-
-  const forwardPointer = () => {
-    if (pointer.value === null) {
-      setPointer((groupped.value && canPointGroups.value ? groups.value[0] : options.value[0]) || null)
-    }
-    else if (groupped.value && canPointGroups.value) {
-      let nextPointer = isPointerGroup.value ? currentGroupFirstEnabledOption.value : currentGroupNextEnabledOption.value
-
-      if (nextPointer === undefined) {
-        nextPointer = nextGroup.value
-      }
-
-      setPointer(nextPointer || /* istanbul ignore next */ null)
-    } else {
-      let next = options.value.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) + 1
-
-      if (options.value.length <= next) {
-        next = 0
-      }
-
-      setPointer(options.value[next] || null)
-    }
-
-    nextTick(() => {
-      adjustWrapperScrollToPointer()
-    })
-  }
-
-  const backwardPointer = () => {
-    if (pointer.value === null) {
-      let prevPointer = options.value[options.value.length - 1]
-
-      if (groupped.value && canPointGroups.value) {
-        prevPointer = lastGroupLastEnabledOption.value
-
-        if (prevPointer === undefined) {
-          prevPointer = lastGroup.value
-        }
-      }
-
-      setPointer(prevPointer || null)
-    }
-    else if (groupped.value && canPointGroups.value) {
-      let prevPointer = isPointerGroup.value ? prevGroupLastEnabledOption.value : currentGroupPrevEnabledOption.value
-
-      if (prevPointer === undefined) {
-        prevPointer = isPointerGroup.value ? prevGroup.value : currentGroup.value
-      }
-
-      setPointer(prevPointer || /* istanbul ignore next */ null)
-    } else {
-      let prevIndex = options.value.map(o => o[valueProp.value]).indexOf(pointer.value[valueProp.value]) - 1
-
-      if (prevIndex < 0) {
-        prevIndex = options.value.length - 1
-      }
-
-      setPointer(options.value[prevIndex] || null)
-    }
-
-    nextTick(() => {
-      adjustWrapperScrollToPointer()
-    })
-  }
-
-  const getParentGroup = (option) => {
-    return groups.value.find((group) => {
-      return group.__VISIBLE__.map(o => o[valueProp.value]).indexOf(option[valueProp.value]) !== -1
-    })
-  }
-
-  // no export
-  /* istanbul ignore next */
-  const adjustWrapperScrollToPointer = () => {
-    let pointedOption = multiselect.value.querySelector(`[data-pointed]`)
-
-    if (!pointedOption) {
-      return
-    }
-
-    let wrapper = pointedOption.parentElement.parentElement
-
-    if (groupped.value) {
-      wrapper = isPointerGroup.value
-        ? pointedOption.parentElement.parentElement.parentElement
-        : pointedOption.parentElement.parentElement.parentElement.parentElement
-    }
-
-    if (pointedOption.offsetTop + pointedOption.offsetHeight > wrapper.clientHeight + wrapper.scrollTop) {
-      wrapper.scrollTop = pointedOption.offsetTop + pointedOption.offsetHeight - wrapper.clientHeight
-    }
-
-    if (pointedOption.offsetTop < wrapper.scrollTop) {
-      wrapper.scrollTop = pointedOption.offsetTop
-    }
-  }
-
-  // ============== WATCHERS ==============
-
-  watch(search, (val) => {
-    if (searchable.value) {
-      if (val.length && showOptions.value) {
-        setPointerFirst()
-      } else {
-        clearPointer()
-      }
-    }
-  })
-
-  return {
-    pointer,
-    canPointGroups,
-    isPointed,
-    setPointerFirst,
-    selectPointer,
-    forwardPointer,
-    backwardPointer,
-  }
-}
diff --git a/resources/scripts/components/base-select/composables/useSearch.js b/resources/scripts/components/base-select/composables/useSearch.js
deleted file mode 100644
index f73e5278..00000000
--- a/resources/scripts/components/base-select/composables/useSearch.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { ref, toRefs, computed, watch } from 'vue'
-
-export default function useSearch (props, context, dep)
-{
-  const { preserveSearch } = toRefs(props)
-
-  // ================ DATA ================
-
-  const search = ref(props.initialSearch) || ref(null)
-
-  const input = ref(null)
-
-
-  // =============== METHODS ==============
-
-  const clearSearch = () => {
-    if (!preserveSearch.value) search.value = ''
-  }
-
-  const handleSearchInput = (e) => {
-    search.value = e.target.value
-  }
-
-  const handlePaste = (e) => {
-    context.emit('paste', e)
-  }
-
-  // ============== WATCHERS ==============
-
-  watch(search, (val) => {
-    context.emit('search-change', val)
-  })
-
-  return {
-    search,
-    input,
-    clearSearch,
-    handleSearchInput,
-    handlePaste,
-  }
-}
\ No newline at end of file
diff --git a/resources/scripts/components/base-select/composables/useValue.js b/resources/scripts/components/base-select/composables/useValue.js
deleted file mode 100644
index a30e2ea6..00000000
--- a/resources/scripts/components/base-select/composables/useValue.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { computed, toRefs, ref } from 'vue'
-
-export default function useValue(props, context) {
-  const { value, modelValue, mode, valueProp } = toRefs(props)
-
-  // ================ DATA ================
-
-  // internalValue
-  const iv = ref(mode.value !== 'single' ? [] : {})
-
-  // ============== COMPUTED ==============
-
-  /* istanbul ignore next */
-  // externalValue
-  const ev = context.expose !== undefined ? modelValue : value
-
-  const plainValue = computed(() => {
-    return mode.value === 'single' ? iv.value[valueProp.value] : iv.value.map(v => v[valueProp.value])
-  })
-
-  const textValue = computed(() => {
-    return mode.value !== 'single' ? iv.value.map(v => v[valueProp.value]).join(',') : iv.value[valueProp.value]
-  })
-
-  return {
-    iv,
-    internalValue: iv,
-    ev,
-    externalValue: ev,
-    textValue,
-    plainValue,
-  }
-}
diff --git a/resources/scripts/components/base-select/index.d.ts b/resources/scripts/components/base-select/index.d.ts
deleted file mode 100644
index b4419f79..00000000
--- a/resources/scripts/components/base-select/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './BaseMultiselect';
diff --git a/resources/scripts/components/base-select/utils/arraysEqual.js b/resources/scripts/components/base-select/utils/arraysEqual.js
deleted file mode 100644
index 9db76e59..00000000
--- a/resources/scripts/components/base-select/utils/arraysEqual.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function arraysEqual (array1, array2) {
-  const array2Sorted = array2.slice().sort()
-
-  return array1.length === array2.length && array1.slice().sort().every(function(value, index) {
-      return value === array2Sorted[index];
-  })
-}
\ No newline at end of file
diff --git a/resources/scripts/components/base-select/utils/isNullish.js b/resources/scripts/components/base-select/utils/isNullish.js
deleted file mode 100644
index e084b9f4..00000000
--- a/resources/scripts/components/base-select/utils/isNullish.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function isNullish (val) {
-  return [null, undefined, false].indexOf(val) !== -1
-}
\ No newline at end of file
diff --git a/resources/scripts/components/base-select/utils/isObject.js b/resources/scripts/components/base-select/utils/isObject.js
deleted file mode 100644
index b594b15c..00000000
--- a/resources/scripts/components/base-select/utils/isObject.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function isObject (variable) {
-  return Object.prototype.toString.call(variable) === '[object Object]'
-}
\ No newline at end of file
diff --git a/resources/scripts/components/base-select/utils/normalize.js b/resources/scripts/components/base-select/utils/normalize.js
deleted file mode 100644
index e381faef..00000000
--- a/resources/scripts/components/base-select/utils/normalize.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default function normalize (str, strict = true) {
-  return strict
-    ? String(str).toLowerCase().trim()
-    : String(str).normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase().trim()
-}
\ No newline at end of file
diff --git a/resources/scripts/components/base/BaseBadge.vue b/resources/scripts/components/base/BaseBadge.vue
deleted file mode 100644
index a75c2d1a..00000000
--- a/resources/scripts/components/base/BaseBadge.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <span
-    class="
-      px-2
-      py-1
-      text-sm
-      font-normal
-      text-center text-status-green
-      uppercase
-      bg-success
-    "
-    :style="{ backgroundColor: bgColor, color }"
-  >
-    <slot />
-  </span>
-</template>
-
-<script setup>
-const props = defineProps({
-  bgColor: {
-    type: String,
-    default: null,
-  },
-  color: {
-    type: String,
-    default: null,
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/BaseBreadcrumb.vue b/resources/scripts/components/base/BaseBreadcrumb.vue
deleted file mode 100644
index d28ef414..00000000
--- a/resources/scripts/components/base/BaseBreadcrumb.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <nav>
-    <ol class="flex flex-wrap py-4 text-heading rounded list-reset">
-      <slot />
-    </ol>
-  </nav>
-</template>
-
-<script>
-export default {
-  name: 'BaseBreadcrumb',
-}
-</script>
diff --git a/resources/scripts/components/base/BaseBreadcrumbItem.vue b/resources/scripts/components/base/BaseBreadcrumbItem.vue
deleted file mode 100644
index 323bfb44..00000000
--- a/resources/scripts/components/base/BaseBreadcrumbItem.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <li class="pr-2 text-sm">
-    <router-link
-      class="
-        m-0
-        mr-2
-        text-sm
-        font-medium
-        leading-5
-        text-heading
-        outline-hidden
-        focus:ring-2 focus:ring-offset-2 focus:ring-primary-400
-      "
-      :to="to"
-    >
-      {{ title }}
-    </router-link>
-
-    <span v-if="!active" class="px-1">/</span>
-  </li>
-</template>
-
-<script setup>
-let name = 'BaseBreadcrumItem'
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: String,
-  },
-  to: {
-    type: String,
-    default: '#',
-  },
-  active: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/BaseButton.vue b/resources/scripts/components/base/BaseButton.vue
deleted file mode 100644
index 061e353a..00000000
--- a/resources/scripts/components/base/BaseButton.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue'
-import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
-const props = defineProps({
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-  defaultClass: {
-    type: String,
-    default:
-      'inline-flex whitespace-nowrap items-center border font-medium focus:outline-hidden focus:ring-2 focus:ring-offset-2',
-  },
-  tag: {
-    type: String,
-    default: 'button',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  rounded: {
-    type: Boolean,
-    default: false,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  size: {
-    type: String,
-    default: 'md',
-    validator: function (value) {
-      return ['xs', 'sm', 'md', 'lg', 'xl'].indexOf(value) !== -1
-    },
-  },
-  variant: {
-    type: String,
-    default: 'primary',
-    validator: function (value) {
-      return (
-        [
-          'primary',
-          'secondary',
-          'primary-outline',
-          'white',
-          'danger',
-          'gray',
-        ].indexOf(value) !== -1
-      )
-    },
-  },
-})
-
-const sizeClass = computed(() => {
-  return {
-    'px-2.5 py-1.5 text-xs leading-4 rounded-lg': props.size === 'xs',
-    'px-3 py-2 text-sm leading-4 rounded-lg': props.size == 'sm',
-    'px-4 py-2 text-sm leading-5 rounded-lg': props.size === 'md',
-    'px-4 py-2 text-base leading-6 rounded-lg': props.size === 'lg',
-    'px-6 py-3 text-base leading-6 rounded-lg': props.size === 'xl',
-  }
-})
-
-const placeHolderSize = computed(() => {
-  switch (props.size) {
-    case 'xs':
-      return '32'
-    case 'sm':
-      return '38'
-    case 'md':
-      return '42'
-    case 'lg':
-      return '42'
-    case 'xl':
-      return '46'
-    default:
-      return ''
-  }
-})
-
-const variantClass = computed(() => {
-  return {
-    'border-transparent shadow-xs text-white bg-btn-primary hover:bg-btn-primary-hover focus:ring-primary-500':
-      props.variant === 'primary',
-    'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
-      props.variant === 'secondary',
-    'border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-200 shadow-inner focus:ring-primary-500':
-      props.variant == 'primary-outline',
-    'border-line-default text-body bg-surface hover:bg-hover focus:ring-primary-500 focus:ring-offset-0':
-      props.variant == 'white',
-    'border-transparent shadow-xs text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
-      props.variant === 'danger',
-    'border-transparent bg-surface-muted border hover:bg-surface-muted/60 focus:ring-gray-500 focus:ring-offset-0':
-      props.variant === 'gray',
-  }
-})
-
-const roundedClass = computed(() => {
-  return props.rounded ? '!rounded-full' : ''
-})
-
-const iconLeftClass = computed(() => {
-  return {
-    '-ml-0.5 mr-2 h-4 w-4': props.size == 'sm',
-    '-ml-1 mr-2 h-5 w-5': props.size === 'md',
-    '-ml-1 mr-3 h-5 w-5': props.size === 'lg' || props.size === 'xl',
-  }
-})
-
-const iconVariantClass = computed(() => {
-  return {
-    'text-white': props.variant === 'primary',
-    'text-primary-700': props.variant === 'secondary',
-    'text-body': props.variant === 'white',
-    'text-subtle': props.variant === 'gray',
-  }
-})
-
-const iconRightClass = computed(() => {
-  return {
-    'ml-2 -mr-0.5 h-4 w-4': props.size == 'sm',
-    'ml-2 -mr-1 h-5 w-5': props.size === 'md',
-    'ml-3 -mr-1 h-5 w-5': props.size === 'lg' || props.size === 'xl',
-  }
-})
-</script>
-
-<template>
-  <BaseContentPlaceholders
-    v-if="contentLoading"
-    class="disabled cursor-normal pointer-events-none"
-  >
-    <BaseContentPlaceholdersBox
-      :rounded="true"
-      style="width: 96px"
-      :style="`height: ${placeHolderSize}px;`"
-    />
-  </BaseContentPlaceholders>
-
-  <BaseCustomTag
-    v-else
-    :tag="tag"
-    :disabled="disabled"
-    :class="[defaultClass, sizeClass, variantClass, roundedClass]"
-  >
-    <SpinnerIcon v-if="loading" :class="[iconLeftClass, iconVariantClass]" />
-
-    <slot v-else name="left" :class="iconLeftClass"></slot>
-
-    <slot />
-
-    <slot name="right" :class="[iconRightClass, iconVariantClass]"></slot>
-  </BaseCustomTag>
-</template>
diff --git a/resources/scripts/components/base/BaseCard.vue b/resources/scripts/components/base/BaseCard.vue
deleted file mode 100644
index 76ba8c92..00000000
--- a/resources/scripts/components/base/BaseCard.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <div class="bg-surface/70 backdrop-blur-lg rounded-xl shadow-sm border border-white/15">
-    <div
-      v-if="hasHeaderSlot"
-      class="px-5 py-4 text-heading border-b border-line-light border-solid"
-    >
-      <slot name="header" />
-    </div>
-    <div :class="containerClass">
-      <slot />
-    </div>
-    <div
-      v-if="hasFooterSlot"
-      class="px-5 py-4 border-t border-line-light border-solid sm:px-6"
-    >
-      <slot name="footer" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, useSlots } from 'vue'
-
-const props = defineProps({
-  containerClass: {
-    type: String,
-    default: 'px-4 py-5 sm:px-8 sm:py-8',
-  },
-})
-
-const slots = useSlots()
-
-const hasHeaderSlot = computed(() => {
-  return !!slots.header
-})
-const hasFooterSlot = computed(() => {
-  return !!slots.footer
-})
-</script>
diff --git a/resources/scripts/components/base/BaseCheckbox.vue b/resources/scripts/components/base/BaseCheckbox.vue
deleted file mode 100644
index 5e9cf914..00000000
--- a/resources/scripts/components/base/BaseCheckbox.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <div class="relative flex items-start">
-    <div class="flex items-center h-5">
-      <input
-        :id="id"
-        v-model="checked"
-        v-bind="$attrs"
-        :disabled="disabled"
-        type="checkbox"
-        :class="[checkboxClass, disabledClass]"
-      />
-    </div>
-    <div class="ml-3 text-sm">
-      <label
-        v-if="label"
-        :for="id"
-        :class="`font-medium ${
-          disabled ? 'text-subtle cursor-not-allowed' : 'text-body'
-        } cursor-pointer `"
-      >
-        {{ label }}
-      </label>
-      <p v-if="description" class="text-muted">{{ description }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  label: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  modelValue: {
-    type: [Boolean, Array],
-    default: false,
-  },
-  id: {
-    type: [Number, String],
-    default: () => `check_${Math.random().toString(36).substr(2, 9)}`,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  checkboxClass: {
-    type: String,
-    default: 'w-4 h-4 border-line-strong rounded cursor-pointer',
-  },
-  setInitialValue: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['update:modelValue', 'change'])
-
-if (props.setInitialValue) {
-  emit('update:modelValue', props.modelValue)
-}
-
-const checked = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-    emit('change', value)
-  },
-})
-
-const disabledClass = computed(() => {
-  if (props.disabled) {
-    return 'text-subtle cursor-not-allowed'
-  }
-
-  return 'text-primary-600 focus:ring-primary-500'
-})
-</script>
diff --git a/resources/scripts/components/base/BaseContentPlaceholders.vue b/resources/scripts/components/base/BaseContentPlaceholders.vue
deleted file mode 100644
index 47f91461..00000000
--- a/resources/scripts/components/base/BaseContentPlaceholders.vue
+++ /dev/null
@@ -1,215 +0,0 @@
-<template>
-  <div :class="classObject">
-    <slot />
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  rounded: {
-    type: Boolean,
-    default: false,
-  },
-  centered: {
-    type: Boolean,
-    default: false,
-  },
-  animated: {
-    type: Boolean,
-    default: true,
-  },
-})
-
-const classObject = computed(() => {
-  return {
-    'base-content-placeholders': true,
-    'base-content-placeholders-is-rounded': props.rounded,
-    'base-content-placeholders-is-centered': props.centered,
-    'base-content-placeholders-is-animated': props.animated,
-  }
-})
-</script>
-
-<style>
-@keyframes vueContentPlaceholdersAnimation {
-  0% {
-    transform: translate3d(-30%, 0, 0);
-  }
-  100% {
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-.base-content-placeholders-heading {
-  display: flex;
-
-  [class^='base-content-placeholders-'] + & {
-    margin-top: 20px;
-  }
-}
-
-.base-content-placeholders-heading__img {
-  margin-right: 15px;
-  position: relative;
-  overflow: hidden;
-  min-height: 15px;
-  background: var(--color-surface-muted);
-
-  .base-content-placeholders-is-rounded & {
-    border-radius: 6px;
-  }
-  .base-content-placeholders-is-centered & {
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .base-content-placeholders-is-animated &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    max-width: 1000px;
-    height: 100%;
-    background: linear-gradient(to right, transparent 0%, var(--color-hover-strong) 15%, transparent 30%);
-    animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
-  }
-}
-
-.base-content-placeholders-heading__content {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.base-content-placeholders-heading__title {
-  width: 85%;
-  margin-bottom: 10px;
-  background: var(--color-surface-muted);
-  position: relative;
-  overflow: hidden;
-  min-height: 15px;
-
-  .base-content-placeholders-is-rounded & {
-    border-radius: 6px;
-  }
-  .base-content-placeholders-is-centered & {
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .base-content-placeholders-is-animated &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    max-width: 1000px;
-    height: 100%;
-    background: linear-gradient(to right, transparent 0%, var(--color-hover-strong) 15%, transparent 30%);
-    animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
-  }
-}
-
-.base-content-placeholders-heading__subtitle {
-  width: 90%;
-  position: relative;
-  overflow: hidden;
-  min-height: 15px;
-  background: var(--color-surface-muted);
-
-  .base-content-placeholders-is-rounded & {
-    border-radius: 6px;
-  }
-  .base-content-placeholders-is-centered & {
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .base-content-placeholders-is-animated &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    max-width: 1000px;
-    height: 100%;
-    background: linear-gradient(to right, transparent 0%, var(--color-hover-strong) 15%, transparent 30%);
-    animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
-  }
-}
-
-.base-content-placeholders-text {
-  [class^='base-content-placeholders-'] + & {
-    margin-top: 20px;
-  }
-}
-
-.base-content-placeholders-text__line {
-  width: 100%;
-  margin-bottom: 10px;
-  position: relative;
-  overflow: hidden;
-  min-height: 15px;
-  background: var(--color-surface-muted);
-
-  .base-content-placeholders-is-rounded & {
-    border-radius: 6px;
-  }
-  .base-content-placeholders-is-centered & {
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .base-content-placeholders-is-animated &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    max-width: 1000px;
-    height: 100%;
-    background: linear-gradient(to right, transparent 0%, var(--color-hover-strong) 15%, transparent 30%);
-    animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
-  }
-
-  &:first-child {
-    width: 100%;
-  }
-  &:nth-child(2) {
-    width: 90%;
-  }
-  &:nth-child(3) {
-    width: 80%;
-  }
-  &:nth-child(4) {
-    width: 70%;
-  }
-}
-
-.base-content-placeholders-box {
-  position: relative;
-  overflow: hidden;
-  min-height: 15px;
-  background: var(--color-surface-muted);
-
-  .base-content-placeholders-is-animated &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    max-width: 1000px;
-    height: 100%;
-    background: linear-gradient(to right, transparent 0%, var(--color-hover-strong) 15%, transparent 30%);
-    animation: vueContentPlaceholdersAnimation 1.5s linear infinite forwards;
-  }
-}
-
-.base-content-circle {
-  border-radius: 100%;
-}
-
-.base-content-placeholders-is-rounded {
-  border-radius: 6px;
-}
-</style>
diff --git a/resources/scripts/components/base/BaseContentPlaceholdersBox.vue b/resources/scripts/components/base/BaseContentPlaceholdersBox.vue
deleted file mode 100644
index 89283cba..00000000
--- a/resources/scripts/components/base/BaseContentPlaceholdersBox.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div class="base-content-placeholders-box" :class="circleClass" />
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  circle: {
-    type: Boolean,
-    default: false,
-  },
-  rounded: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const circleClass = computed(() => {
-  return {
-    'base-content-circle': props.circle,
-    'base-content-placeholders-is-rounded': props.rounded,
-  }
-})
-</script>
diff --git a/resources/scripts/components/base/BaseContentPlaceholdersHeading.vue b/resources/scripts/components/base/BaseContentPlaceholdersHeading.vue
deleted file mode 100644
index 094ae2e3..00000000
--- a/resources/scripts/components/base/BaseContentPlaceholdersHeading.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div class="base-content-placeholders-heading">
-    <div v-if="box" class="base-content-placeholders-heading__box" />
-    <div class="base-content-placeholders-heading__content">
-      <div
-        class="base-content-placeholders-heading__title"
-        style="background: #eee"
-      />
-      <div class="base-content-placeholders-heading__subtitle" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  box: {
-    type: Boolean,
-    default: false,
-  },
-  rounded: {
-    type: Boolean,
-    default: false,
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/BaseContentPlaceholdersText.vue b/resources/scripts/components/base/BaseContentPlaceholdersText.vue
deleted file mode 100644
index 5f2e5c0c..00000000
--- a/resources/scripts/components/base/BaseContentPlaceholdersText.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="base-content-placeholders-text">
-    <div
-      v-for="n in lines"
-      :key="n"
-      :class="lineClass"
-      class="w-full h-full base-content-placeholders-text__line"
-    />
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  lines: {
-    type: Number,
-    default: 4,
-  },
-  rounded: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const lineClass = computed(() => {
-  return {
-    'base-content-placeholders-is-rounded': props.rounded,
-  }
-})
-</script>
diff --git a/resources/scripts/components/base/BaseCustomInput.vue b/resources/scripts/components/base/BaseCustomInput.vue
deleted file mode 100644
index 84316e55..00000000
--- a/resources/scripts/components/base/BaseCustomInput.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<template>
-  <BaseContentPlaceholders v-if="contentLoading">
-    <BaseContentPlaceholdersBox
-      :rounded="true"
-      class="w-full"
-      style="height: 200px"
-    />
-  </BaseContentPlaceholders>
-
-  <div v-else class="relative">
-    <div class="absolute bottom-0 right-0 z-10">
-      <BaseDropdown
-        :close-on-select="true"
-        max-height="220"
-        position="top-end"
-        width-class="w-92"
-        class="mb-2"
-      >
-        <template #activator>
-          <BaseButton type="button" variant="primary-outline" class="mr-4">
-            {{ $t('settings.customization.insert_fields') }}
-            <template #left="slotProps">
-              <BaseIcon name="PlusSmIcon" :class="slotProps.class" />
-            </template>
-          </BaseButton>
-        </template>
-
-        <div class="flex p-2">
-          <ul v-for="(type, index) in fieldList" :key="index" class="list-none">
-            <li class="mb-1 ml-2 text-xs font-semibold text-muted uppercase">
-              {{ type.label }}
-            </li>
-
-            <li
-              v-for="(field, fieldIndex) in type.fields"
-              :key="fieldIndex"
-              class="
-                w-48
-                text-sm
-                font-normal
-                cursor-pointer
-                hover:bg-hover-strong
-                rounded
-                ml-1
-                py-0.5
-              "
-              @click="value += `{${field.value}}`"
-            >
-              <div class="flex pl-1">
-                <BaseIcon
-                  name="ChevronDoubleRightIcon"
-                  class="h-3 mt-1 mr-2 text-subtle"
-                />
-
-                {{ field.label }}
-              </div>
-            </li>
-          </ul>
-        </div>
-      </BaseDropdown>
-    </div>
-    <BaseEditor v-model="value" />
-  </div>
-</template>
-
-<script setup>
-import { computed, ref, watch, onMounted } from 'vue'
-import { useCustomFieldStore } from '@/scripts/admin/stores/custom-field'
-
-const props = defineProps({
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  fields: {
-    type: Array,
-    default: null,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const customFieldsStore = useCustomFieldStore()
-
-let fieldList = ref([])
-let invoiceFields = ref([])
-let estimateFields = ref([])
-let paymentFields = ref([])
-let customerFields = ref([])
-const position = null
-
-watch(
-  () => props.fields,
-  (val) => {
-    if (props.fields && props.fields.length > 0) {
-      getFields()
-    }
-  }
-)
-
-watch(
-  () => customFieldsStore.customFields,
-  (newValue) => {
-    invoiceFields.value = newValue
-      ? newValue.filter((field) => field.model_type === 'Invoice')
-      : []
-    customerFields.value = newValue
-      ? newValue.filter((field) => field.model_type === 'Customer')
-      : []
-    paymentFields.value = newValue
-      ? newValue.filter((field) => field.model_type === 'Payment')
-      : []
-    estimateFields.value = newValue.filter(
-      (field) => field.model_type === 'Estimate'
-    )
-    getFields()
-  }
-)
-
-onMounted(() => {
-  fetchFields()
-})
-
-const value = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-
-async function fetchFields() {
-  await customFieldsStore.fetchCustomFields()
-}
-
-async function getFields() {
-  fieldList.value = []
-  if (props.fields && props.fields.length > 0) {
-    if (props.fields.find((field) => field == 'shipping')) {
-      fieldList.value.push({
-        label: 'Shipping Address',
-        fields: [
-          { label: 'Address name', value: 'SHIPPING_ADDRESS_NAME' },
-          { label: 'Country', value: 'SHIPPING_COUNTRY' },
-          { label: 'State', value: 'SHIPPING_STATE' },
-          { label: 'City', value: 'SHIPPING_CITY' },
-          { label: 'Address Street 1', value: 'SHIPPING_ADDRESS_STREET_1' },
-          { label: 'Address Street 2', value: 'SHIPPING_ADDRESS_STREET_2' },
-          { label: 'Phone', value: 'SHIPPING_PHONE' },
-          { label: 'Zip Code', value: 'SHIPPING_ZIP_CODE' },
-        ],
-      })
-    }
-
-    if (props.fields.find((field) => field == 'billing')) {
-      fieldList.value.push({
-        label: 'Billing Address',
-        fields: [
-          { label: 'Address name', value: 'BILLING_ADDRESS_NAME' },
-          { label: 'Country', value: 'BILLING_COUNTRY' },
-          { label: 'State', value: 'BILLING_STATE' },
-          { label: 'City', value: 'BILLING_CITY' },
-          { label: 'Address Street 1', value: 'BILLING_ADDRESS_STREET_1' },
-          { label: 'Address Street 2', value: 'BILLING_ADDRESS_STREET_2' },
-          { label: 'Phone', value: 'BILLING_PHONE' },
-          { label: 'Zip Code', value: 'BILLING_ZIP_CODE' },
-        ],
-      })
-    }
-
-    if (props.fields.find((field) => field == 'customer')) {
-      fieldList.value.push({
-        label: 'Customer',
-        fields: [
-          { label: 'Display Name', value: 'CONTACT_DISPLAY_NAME' },
-          { label: 'Contact Name', value: 'PRIMARY_CONTACT_NAME' },
-          { label: 'Email', value: 'CONTACT_EMAIL' },
-          { label: 'Phone', value: 'CONTACT_PHONE' },
-          { label: 'Website', value: 'CONTACT_WEBSITE' },
-          { label: 'Tax ID', value: 'CONTACT_TAX_ID' },
-          ...customerFields.value.map((i) => ({
-            label: i.label,
-            value: i.slug,
-          })),
-        ],
-      })
-    }
-
-    if (props.fields.find((field) => field == 'invoice')) {
-      fieldList.value.push({
-        label: 'Invoice',
-        fields: [
-          { label: 'Date', value: 'INVOICE_DATE' },
-          { label: 'Due Date', value: 'INVOICE_DUE_DATE' },
-          { label: 'Number', value: 'INVOICE_NUMBER' },
-          { label: 'Ref Number', value: 'INVOICE_REF_NUMBER' },
-          ...invoiceFields.value.map((i) => ({
-            label: i.label,
-            value: i.slug,
-          })),
-        ],
-      })
-    }
-
-    if (props.fields.find((field) => field == 'estimate')) {
-      fieldList.value.push({
-        label: 'Estimate',
-        fields: [
-          { label: 'Date', value: 'ESTIMATE_DATE' },
-          { label: 'Expiry Date', value: 'ESTIMATE_EXPIRY_DATE' },
-          { label: 'Number', value: 'ESTIMATE_NUMBER' },
-          { label: 'Ref Number', value: 'ESTIMATE_REF_NUMBER' },
-          ...estimateFields.value.map((i) => ({
-            label: i.label,
-            value: i.slug,
-          })),
-        ],
-      })
-    }
-
-    if (props.fields.find((field) => field == 'payment')) {
-      fieldList.value.push({
-        label: 'Payment',
-        fields: [
-          { label: 'Date', value: 'PAYMENT_DATE' },
-          { label: 'Number', value: 'PAYMENT_NUMBER' },
-          { label: 'Mode', value: 'PAYMENT_MODE' },
-          { label: 'Amount', value: 'PAYMENT_AMOUNT' },
-          ...paymentFields.value.map((i) => ({
-            label: i.label,
-            value: i.slug,
-          })),
-        ],
-      })
-    }
-
-    if (props.fields.find((field) => field == 'company')) {
-      fieldList.value.push({
-        label: 'Company',
-        fields: [
-          { label: 'Company Name', value: 'COMPANY_NAME' },
-          { label: 'Country', value: 'COMPANY_COUNTRY' },
-          { label: 'State', value: 'COMPANY_STATE' },
-          { label: 'City', value: 'COMPANY_CITY' },
-          { label: 'Address Street 1', value: 'COMPANY_ADDRESS_STREET_1' },
-          { label: 'Address Street 2', value: 'COMPANY_ADDRESS_STREET_2' },
-          { label: 'Phone', value: 'COMPANY_PHONE' },
-          { label: 'Zip Code', value: 'COMPANY_ZIP_CODE' },
-          { label: 'Vat Id', value: 'COMPANY_VAT' },
-          { label: 'Tax Id', value: 'COMPANY_TAX' },
-        ],
-      })
-    }
-  }
-}
-
-getFields()
-</script>
diff --git a/resources/scripts/components/base/BaseCustomTag.vue b/resources/scripts/components/base/BaseCustomTag.vue
deleted file mode 100644
index 2809989f..00000000
--- a/resources/scripts/components/base/BaseCustomTag.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-import { h } from 'vue'
-
-export default {
-  props: {
-    tag: {
-      type: String,
-      default: 'button',
-    },
-  },
-  setup(props, { slots, attrs, emit }) {
-    // return the render function
-    return () => h(`${props.tag}`, attrs, slots)
-  },
-}
-</script>
diff --git a/resources/scripts/components/base/BaseCustomerAddressDisplay.vue b/resources/scripts/components/base/BaseCustomerAddressDisplay.vue
deleted file mode 100644
index cb34f710..00000000
--- a/resources/scripts/components/base/BaseCustomerAddressDisplay.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div
-    v-if="address"
-    class="text-sm font-bold leading-5 text-heading non-italic space-y-1"
-  >
-    <p v-if="address?.address_street_1">{{ address?.address_street_1 }},</p>
-
-    <p v-if="address?.address_street_2">{{ address?.address_street_2 }},</p>
-
-    <p v-if="address?.city">{{ address?.city }},</p>
-
-    <p v-if="address?.state">{{ address?.state }},</p>
-
-    <p v-if="address?.country?.name">{{ address?.country?.name }},</p>
-
-    <p v-if="address?.zip">{{ address?.zip }}.</p>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  address: {
-    type: Object,
-    required: true,
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/BaseCustomerSelectInput.vue b/resources/scripts/components/base/BaseCustomerSelectInput.vue
deleted file mode 100644
index ea60b20d..00000000
--- a/resources/scripts/components/base/BaseCustomerSelectInput.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<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>
-
-<script setup>
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import { computed, watch } from 'vue'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useI18n } from 'vue-i18n'
-import CustomerModal from '@/scripts/admin/components/modal-components/CustomerModal.vue'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number, Object],
-    default: '',
-  },
-  fetchAll: {
-    type: Boolean,
-    default: false,
-  },
-  showAction: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const { t } = useI18n()
-
-const emit = defineEmits(['update:modelValue'])
-
-const modalStore = useModalStore()
-const customerStore = useCustomerStore()
-const userStore = useUserStore()
-
-const selectedCustomer = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-
-async function searchCustomers(search) {
-  let data = {
-    search,
-  }
-
-  if (props.fetchAll) {
-    data.limit = 'all'
-  }
-
-  let res = await customerStore.fetchCustomers(data)
-  if(res.data.data.length>0 && customerStore.editCustomer) {
-    let customerFound = res.data.data.find((c) => c.id==customerStore.editCustomer.id)
-    if(!customerFound) {
-      let edit_customer = Object.assign({}, customerStore.editCustomer)
-      res.data.data.unshift(edit_customer)
-    }
-  }
-
-  return res.data.data
-}
-
-async function addCustomer() {
-  customerStore.resetCurrentCustomer()
-
-  modalStore.openModal({
-    title: t('customers.add_new_customer'),
-    componentName: 'CustomerModal',
-  })
-}
-</script>
diff --git a/resources/scripts/components/base/BaseCustomerSelectPopup.vue b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
deleted file mode 100644
index 7c766bd7..00000000
--- a/resources/scripts/components/base/BaseCustomerSelectPopup.vue
+++ /dev/null
@@ -1,535 +0,0 @@
-<template>
-  <BaseContentPlaceholders v-if="contentLoading">
-    <BaseContentPlaceholdersBox
-      :rounded="true"
-      class="w-full"
-      style="min-height: 170px"
-    />
-  </BaseContentPlaceholders>
-
-  <div v-else class="max-h-[173px]">
-    <CustomerModal />
-    <!-- <SalesTax :type="type" /> -->
-
-    <div
-      v-if="selectedCustomer"
-      class="
-        flex flex-col
-        p-4
-        bg-surface
-        border border-line-light border-solid
-        min-h-[170px]
-        rounded-xl
-        shadow
-      "
-      @click.stop
-    >
-      <div class="flex relative justify-between mb-2">
-        <BaseText
-          :text="selectedCustomer.name"
-          class="flex-1 text-base font-medium text-left text-heading"
-        />
-        <div class="flex">
-          <a
-            class="
-              relative
-              my-0
-              ml-6
-              text-sm
-              font-medium
-              cursor-pointer
-              text-primary-500
-              items-center
-              flex
-            "
-            @click.stop="editCustomer"
-          >
-            <BaseIcon name="PencilIcon" class="text-muted h-4 w-4 mr-1" />
-
-            {{ $t('general.edit') }}
-          </a>
-          <a
-            class="
-              relative
-              my-0
-              ml-6
-              text-sm
-              flex
-              items-center
-              font-medium
-              cursor-pointer
-              text-primary-500
-            "
-            @click="resetSelectedCustomer"
-          >
-            <BaseIcon name="XCircleIcon" class="text-muted h-4 w-4 mr-1" />
-            {{ $t('general.deselect') }}
-          </a>
-        </div>
-      </div>
-      <div class="grid grid-cols-2 gap-8 mt-2">
-        <div v-if="selectedCustomer.billing" class="flex flex-col">
-          <label
-            class="
-              mb-1
-              text-sm
-              font-medium
-              text-left text-subtle
-              uppercase
-              whitespace-nowrap
-            "
-          >
-            {{ $t('general.bill_to') }}
-          </label>
-
-          <div
-            v-if="selectedCustomer.billing"
-            class="flex flex-col flex-1 p-0 text-left"
-          >
-            <label
-              v-if="selectedCustomer.billing.name"
-              class="relative w-11/12 text-sm truncate"
-            >
-              {{ selectedCustomer.billing.name }}
-            </label>
-
-            <label class="relative w-11/12 text-sm truncate">
-              <span v-if="selectedCustomer.billing.city">
-                {{ selectedCustomer.billing.city }}
-              </span>
-              <span
-                v-if="
-                  selectedCustomer.billing.city &&
-                  selectedCustomer.billing.state
-                "
-              >
-                ,
-              </span>
-              <span v-if="selectedCustomer.billing.state">
-                {{ selectedCustomer.billing.state }}
-              </span>
-            </label>
-            <label
-              v-if="selectedCustomer.billing.zip"
-              class="relative w-11/12 text-sm truncate"
-            >
-              {{ selectedCustomer.billing.zip }}
-            </label>
-          </div>
-        </div>
-
-        <div v-if="selectedCustomer.shipping" class="flex flex-col">
-          <label
-            class="
-              mb-1
-              text-sm
-              font-medium
-              text-left text-subtle
-              uppercase
-              whitespace-nowrap
-            "
-          >
-            {{ $t('general.ship_to') }}
-          </label>
-
-          <div
-            v-if="selectedCustomer.shipping"
-            class="flex flex-col flex-1 p-0 text-left"
-          >
-            <label
-              v-if="selectedCustomer.shipping.name"
-              class="relative w-11/12 text-sm truncate"
-            >
-              {{ selectedCustomer.shipping.name }}
-            </label>
-
-            <label class="relative w-11/12 text-sm truncate">
-              <span v-if="selectedCustomer.shipping.city">
-                {{ selectedCustomer.shipping.city }}
-              </span>
-              <span
-                v-if="
-                  selectedCustomer.shipping.city &&
-                  selectedCustomer.shipping.state
-                "
-              >
-                ,
-              </span>
-              <span v-if="selectedCustomer.shipping.state">
-                {{ selectedCustomer.shipping.state }}
-              </span>
-            </label>
-            <label
-              v-if="selectedCustomer.shipping.zip"
-              class="relative w-11/12 text-sm truncate"
-            >
-              {{ selectedCustomer.shipping.zip }}
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <Popover v-else v-slot="{ open }" class="relative flex flex-col rounded-xl">
-      <PopoverButton
-        :class="{
-          '': open,
-          'border border-solid border-red-500 focus:ring-red-500 rounded':
-            valid.$error,
-          'focus:ring-2 focus:ring-primary-400': !valid.$error,
-        }"
-        class="w-full outline-hidden rounded-xl"
-      >
-        <div
-          class="
-            relative
-            flex
-            justify-center
-            px-0
-            p-0
-            py-16
-            bg-surface
-            border border-line-light border-solid
-            rounded-xl
-            shadow
-            min-h-[170px]
-          "
-        >
-          <BaseIcon
-            name="UserIcon"
-            class="
-              flex
-              justify-center
-              !w-10
-              !h-10
-              p-2
-              mr-5
-              text-sm text-white
-              bg-surface-muted
-              rounded-full
-              font-base
-            "
-          />
-
-          <div class="mt-1">
-            <label class="text-lg font-medium text-heading">
-              {{ $t('customers.new_customer') }}
-              <span class="text-red-500"> * </span>
-            </label>
-
-            <p
-              v-if="valid.$error && valid.$errors[0].$message"
-              class="text-red-500 text-sm absolute right-3 bottom-3"
-            >
-              {{ $t('estimates.errors.required') }}
-            </p>
-          </div>
-        </div>
-      </PopoverButton>
-
-      <!-- Customer Select Popup -->
-      <transition
-        enter-active-class="transition duration-200 ease-out"
-        enter-from-class="translate-y-1 opacity-0"
-        enter-to-class="translate-y-0 opacity-100"
-        leave-active-class="transition duration-150 ease-in"
-        leave-from-class="translate-y-0 opacity-100"
-        leave-to-class="translate-y-1 opacity-0"
-      >
-        <div v-if="open" class="absolute min-w-full z-10">
-          <PopoverPanel
-            v-slot="{ close }"
-            focus
-            static
-            class="
-              overflow-hidden
-              rounded-xl
-              shadow
-              ring-1 ring-black/5
-              bg-surface
-            "
-          >
-            <div class="relative">
-              <BaseInput
-                v-model="search"
-                container-class="m-4"
-                :placeholder="$t('general.search')"
-                type="text"
-                icon="search"
-                @update:modelValue="(val) => debounceSearchCustomer(val)"
-              />
-
-              <ul
-                class="
-                  max-h-80
-                  flex flex-col
-                  overflow-auto
-                  list
-                  border-t border-line-light
-                "
-              >
-                <li
-                  v-for="(customer, index) in customerStore.customers"
-                  :key="index"
-                  href="#"
-                  class="
-                    flex
-                    px-6
-                    py-2
-                    border-b border-line-light border-solid
-                    cursor-pointer
-                    hover:cursor-pointer hover:bg-hover-strong
-                    focus:outline-hidden focus:bg-surface-tertiary
-                    last:border-b-0
-                  "
-                  @click="selectNewCustomer(customer.id, close)"
-                >
-                  <span
-                    class="
-                      flex
-                      items-center
-                      content-center
-                      justify-center
-                      w-10
-                      h-10
-                      mr-4
-                      text-xl
-                      font-semibold
-                      leading-9
-                      text-white
-                      bg-surface-muted
-                      rounded-full
-                      avatar
-                    "
-                  >
-                    {{ initGenerator(customer.name) }}
-                  </span>
-
-                  <div class="flex flex-col justify-center text-left">
-                    <BaseText
-                      v-if="customer.name"
-                      :text="customer.name"
-                      class="
-                        m-0
-                        text-base
-                        font-normal
-                        leading-tight
-                        cursor-pointer
-                      "
-                    />
-                    <BaseText
-                      v-if="customer.contact_name"
-                      :text="customer.contact_name"
-                      class="
-                        m-0
-                        text-sm
-                        font-medium
-                        text-subtle
-                        cursor-pointer
-                      "
-                    />
-                  </div>
-                </li>
-                <div
-                  v-if="customerStore.customers.length === 0"
-                  class="flex justify-center p-5 text-subtle"
-                >
-                  <label class="text-base text-muted cursor-pointer">
-                    {{ $t('customers.no_customers_found') }}
-                  </label>
-                </div>
-              </ul>
-            </div>
-
-            <button
-              v-if="userStore.hasAbilities(abilities.CREATE_CUSTOMER)"
-              type="button"
-              class="
-                h-10
-                flex
-                items-center
-                justify-center
-                w-full
-                px-2
-                py-3
-                bg-surface-muted
-                border-none
-                outline-hidden
-                focus:bg-surface-muted
-              "
-              @click="openCustomerModal"
-            >
-              <BaseIcon name="UserPlusIcon" class="text-primary-400" />
-
-              <label
-                class="
-                  m-0
-                  ml-3
-                  text-sm
-                  leading-none
-                  cursor-pointer
-                  font-base
-                  text-primary-400
-                "
-              >
-                {{ $t('customers.add_new_customer') }}
-              </label>
-            </button>
-          </PopoverPanel>
-        </div>
-      </transition>
-    </Popover>
-  </div>
-</template>
-
-<script setup>
-import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { useRecurringInvoiceStore } from '@/scripts/admin/stores/recurring-invoice'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useCustomerStore } from '@/scripts/admin/stores/customer'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useDebounceFn } from '@vueuse/core'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-import { useRoute } from 'vue-router'
-import CustomerModal from '@/scripts/admin/components/modal-components/CustomerModal.vue'
-
-const props = defineProps({
-  valid: {
-    type: Object,
-    default: () => {},
-  },
-  customerId: {
-    type: Number,
-    default: null,
-  },
-  type: {
-    type: String,
-    default: null,
-  },
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const modalStore = useModalStore()
-const estimateStore = useEstimateStore()
-const customerStore = useCustomerStore()
-const globalStore = useGlobalStore()
-const invoiceStore = useInvoiceStore()
-const recurringInvoiceStore = useRecurringInvoiceStore()
-const userStore = useUserStore()
-const routes = useRoute()
-const { t } = useI18n()
-const search = ref(null)
-const isSearchingCustomer = ref(false)
-
-const selectedCustomer = computed(() => {
-  switch (props.type) {
-    case 'estimate':
-      return estimateStore.newEstimate.customer
-    case 'invoice':
-      return invoiceStore.newInvoice.customer
-    case 'recurring-invoice':
-      return recurringInvoiceStore.newRecurringInvoice.customer
-    default:
-      return ''
-  }
-})
-
-function resetSelectedCustomer() {
-  if (props.type === 'estimate') {
-    estimateStore.resetSelectedCustomer()
-  } else if (props.type === 'invoice') {
-    invoiceStore.resetSelectedCustomer()
-  } else {
-    recurringInvoiceStore.resetSelectedCustomer()
-  }
-}
-
-if (props.customerId && props.type === 'estimate') {
-  estimateStore.selectCustomer(props.customerId)
-} else if (props.customerId && props.type === 'invoice') {
-  invoiceStore.selectCustomer(props.customerId)
-} else {
-  if (props.customerId) recurringInvoiceStore.selectCustomer(props.customerId)
-}
-
-async function editCustomer() {
-  await customerStore.fetchCustomer(selectedCustomer.value.id)
-  modalStore.openModal({
-    title: t('customers.edit_customer'),
-    componentName: 'CustomerModal',
-  })
-}
-
-async function fetchInitialCustomers() {
-  await customerStore.fetchCustomers({
-    filter: {},
-    orderByField: '',
-    orderBy: '',
-    customer_id: props.customerId,
-  })
-}
-
-const debounceSearchCustomer = useDebounceFn(() => {
-  isSearchingCustomer.value = true
-
-  searchCustomer()
-}, 500)
-
-async function searchCustomer() {
-  let data = {
-    display_name: search.value,
-    page: 1,
-  }
-
-  customerStore.$reset()
-  await customerStore.fetchCustomers(data)
-  isSearchingCustomer.value = false
-}
-
-function openCustomerModal() {
-  modalStore.openModal({
-    title: t('customers.add_customer'),
-    componentName: 'CustomerModal',
-    variant: 'md',
-  })
-}
-
-function initGenerator(name) {
-  if (name) {
-    let nameSplit = name.split(' ')
-    let initials = nameSplit[0].charAt(0).toUpperCase()
-    return initials
-  }
-}
-
-function selectNewCustomer(id, close) {
-  let params = {
-    userId: id,
-  }
-  if (routes.params.id) params.model_id = routes.params.id
-
-  if (props.type === 'estimate') {
-    estimateStore.getNextNumber(params, true)
-    estimateStore.selectCustomer(id)
-  } else if (props.type === 'invoice') {
-    invoiceStore.getNextNumber(params, true)
-    invoiceStore.selectCustomer(id)
-  } else {
-    recurringInvoiceStore.selectCustomer(id)
-  }
-  close()
-  search.value = null
-}
-
-globalStore.fetchCurrencies()
-globalStore.fetchCountries()
-fetchInitialCustomers()
-</script>
diff --git a/resources/scripts/components/base/BaseDatePicker.vue b/resources/scripts/components/base/BaseDatePicker.vue
deleted file mode 100644
index 1605f19b..00000000
--- a/resources/scripts/components/base/BaseDatePicker.vue
+++ /dev/null
@@ -1,318 +0,0 @@
-<template>
-  <BaseContentPlaceholders v-if="contentLoading">
-    <BaseContentPlaceholdersBox
-      :rounded="true"
-      :class="`w-full ${computedContainerClass}`"
-      style="height: 38px"
-    />
-  </BaseContentPlaceholders>
-
-  <div v-else :class="computedContainerClass" class="relative flex flex-row">
-    <svg
-      v-if="showCalendarIcon && !hasIconSlot"
-      viewBox="0 0 20 20"
-      fill="currentColor"
-      class="
-        absolute
-        w-4
-        h-4
-        mx-2
-        my-2.5
-        text-sm
-        not-italic
-        font-black
-        text-subtle
-        cursor-pointer
-      "
-      @click="onClickDp"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-        clip-rule="evenodd"
-      ></path>
-    </svg>
-
-    <slot v-if="showCalendarIcon && hasIconSlot" name="icon" />
-
-    <FlatPickr
-      ref="dp"
-      v-model="date"
-      v-bind="$attrs"
-      :disabled="disabled"
-      :config="config"
-      :class="[defaultInputClass, inputInvalidClass, inputDisabledClass]"
-    />
-  </div>
-</template>
-
-<script type="text/babel" setup>
-import FlatPickr from 'vue-flatpickr-component'
-import 'flatpickr/dist/flatpickr.css'
-import { Arabic } from 'flatpickr/dist/l10n/ar.js'
-import { Czech } from 'flatpickr/dist/l10n/cs.js'
-import { German } from 'flatpickr/dist/l10n/de.js'
-import { Greek } from 'flatpickr/dist/l10n/gr.js'
-import { english } from 'flatpickr/dist/l10n/default.js'
-import { Spanish } from 'flatpickr/dist/l10n/es.js'
-import { Persian } from 'flatpickr/dist/l10n/fa.js'
-import { Finnish } from 'flatpickr/dist/l10n/fi.js'
-import { French } from 'flatpickr/dist/l10n/fr.js'
-import { Hindi } from 'flatpickr/dist/l10n/hi.js'
-import { Croatian } from 'flatpickr/dist/l10n/hr.js'
-import { Indonesian } from 'flatpickr/dist/l10n/id.js'
-import { Italian } from 'flatpickr/dist/l10n/it.js'
-import { Japanese } from 'flatpickr/dist/l10n/ja.js'
-import { Korean } from 'flatpickr/dist/l10n/ko.js'
-import { Lithuanian } from 'flatpickr/dist/l10n/lt.js'
-import { Latvian } from 'flatpickr/dist/l10n/lv.js'
-import { Dutch } from 'flatpickr/dist/l10n/nl.js'
-import { Polish } from 'flatpickr/dist/l10n/pl.js'
-import { Portuguese } from 'flatpickr/dist/l10n/pt.js'
-import { Romanian } from 'flatpickr/dist/l10n/ro.js'
-import { Russian } from 'flatpickr/dist/l10n/ru.js'
-import { Slovak } from 'flatpickr/dist/l10n/sk.js'
-import { Slovenian } from 'flatpickr/dist/l10n/sl.js'
-import { Serbian } from 'flatpickr/dist/l10n/sr.js'
-import { Swedish } from 'flatpickr/dist/l10n/sv.js'
-import { Thai } from 'flatpickr/dist/l10n/th.js'
-import { Turkish } from 'flatpickr/dist/l10n/tr.js'
-import { Vietnamese } from 'flatpickr/dist/l10n/vn.js'
-import { Mandarin } from 'flatpickr/dist/l10n/zh.js'
-import { computed, reactive, watch, ref, useSlots } from 'vue'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { useUserStore } from '@/scripts/admin/stores/user'
-
-const dp = ref(null)
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Date],
-    default: () => new Date(),
-  },
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    default: null,
-  },
-  invalid: {
-    type: Boolean,
-    default: false,
-  },
-  enableTime: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  showCalendarIcon: {
-    type: Boolean,
-    default: true,
-  },
-  containerClass: {
-    type: String,
-    default: '',
-  },
-  defaultInputClass: {
-    type: String,
-    default:
-      'font-base pl-8 py-2 outline-hidden focus:ring-primary-400 focus:outline-hidden focus:border-primary-400 block w-full sm:text-sm border-line-default rounded-md text-heading',
-  },
-  time24hr: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const slots = useSlots()
-
-const companyStore = useCompanyStore()
-
-const userStore = useUserStore()
-
-//Localize Flatpicker stuff
-const lang = userStore.currentUserSettings.language
-let fpLocale = null
-switch(lang){
-  case 'ar':
-    fpLocale = Arabic;
-    break;
-  case 'cs':
-    fpLocale = Czech;
-    break;
-  case 'de':
-    fpLocale = German;
-    break;
-  case 'el':
-    fpLocale = Greek;
-    break;
-  case 'en':
-    fpLocale = english;
-    break;
-  case 'es':
-    fpLocale = Spanish;
-    break;
-  case 'fa':
-    fpLocale = Persian;
-    break;
-  case 'fi':
-    fpLocale = Finnish;
-    break;
-  case 'fr':
-    fpLocale = French;
-    break;
-  case 'hi':
-    fpLocale = Hindi;
-    break;
-  case 'hr':
-    fpLocale = Croatian;
-    break;
-  case 'id':
-    fpLocale = Indonesian;
-    break;
-  case 'it':
-    fpLocale = Italian;
-    break;
-  case 'ja':
-    fpLocale = Japanese;
-    break;
-  case 'ko':
-    fpLocale = Korean;
-    break;
-  case 'lt':
-    fpLocale = Lithuanian;
-    break;
-  case 'lv':
-    fpLocale = Latvian;
-    break;
-  case 'nl':
-    fpLocale = Dutch;
-    break;
-  case 'pl':
-    fpLocale = Polish;
-    break;
-  case 'pt':
-  case 'pt_BR':
-    fpLocale = Portuguese;
-    break;
-  case 'ro':
-    fpLocale = Romanian;
-    break;
-  case 'ru':
-    fpLocale = Russian;
-    break;
-  case 'sk':
-    fpLocale = Slovak;
-    break;
-  case 'sl':
-    fpLocale = Slovenian;
-    break;
-  case 'sr':
-    fpLocale = Serbian;
-    break;
-  case 'sv':
-    fpLocale = Swedish;
-    break;
-  case 'th':
-    fpLocale = Thai;
-    break;
-  case 'tr':
-    fpLocale = Turkish;
-    break;
-  case 'vi':
-    fpLocale = Vietnamese;
-    break;
-  case 'zh':
-    fpLocale = Mandarin;
-    break;
-  default:
-    fpLocale = english;
-}
-
-let config = reactive({
-  altInput: true,
-  enableTime: props.enableTime,
-  time_24hr: props.time24hr,
-  locale: fpLocale
-})
-
-const date = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    emit('update:modelValue', value)
-  },
-})
-
-const carbonFormat = computed(() => {
-  return companyStore.selectedCompanySettings?.carbon_date_format
-})
-
-const carbonFormatWithTime = computed(() => {
-  let format = companyStore.selectedCompanySettings?.carbon_date_format
-  if (companyStore.selectedCompanySettings?.invoice_use_time === 'YES') {
-    format += ' ' + companyStore.selectedCompanySettings?.carbon_time_format
-  }
-  return format.replace("g", "h").replace("a", "K");
-})
-
-const hasIconSlot = computed(() => {
-  return !!slots.icon
-})
-
-const computedContainerClass = computed(() => {
-  let containerClass = `${props.containerClass} `
-
-  return containerClass
-})
-
-const inputInvalidClass = computed(() => {
-  if (props.invalid) {
-    return 'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400'
-  }
-
-  return ''
-})
-
-const inputDisabledClass = computed(() => {
-  if (props.disabled) {
-    return 'border border-solid rounded-md outline-hidden input-field box-border-2 base-date-picker-input placeholder-gray-400 bg-surface-muted text-body border-line-default'
-  }
-
-  return ''
-})
-
-function onClickDp(params) {
-  dp.value.fp.open()
-}
-
-watch(
-  () => props.enableTime,
-  (val) => {
-    if (props.enableTime) {
-      config.enableTime = props.enableTime
-    }
-  },
-  { immediate: true }
-)
-
-watch(
-  () => carbonFormat,
-  () => {
-    if (!props.enableTime) {
-      config.altFormat = carbonFormat.value ? carbonFormat.value : 'd M Y'
-    } else {
-      config.altFormat = carbonFormat.value
-        ? `${carbonFormatWithTime.value}`
-        : 'd M Y H:i'
-    }
-  },
-  { immediate: true }
-)
-</script>
diff --git a/resources/scripts/components/base/BaseDescriptionList.vue b/resources/scripts/components/base/BaseDescriptionList.vue
deleted file mode 100644
index bae2f631..00000000
--- a/resources/scripts/components/base/BaseDescriptionList.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="grid gap-4 mt-5 md:grid-cols-2 lg:grid-cols-3">
-    <slot />
-  </div>
-</template>
diff --git a/resources/scripts/components/base/BaseDescriptionListItem.vue b/resources/scripts/components/base/BaseDescriptionListItem.vue
deleted file mode 100644
index 76496a29..00000000
--- a/resources/scripts/components/base/BaseDescriptionListItem.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<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>
-
-<script setup>
-const props = defineProps({
-  label: {
-    type: String,
-    required: true,
-  },
-  value: {
-    type: [String, Number],
-    default: '',
-  },
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/BaseDialog.vue b/resources/scripts/components/base/BaseDialog.vue
deleted file mode 100644
index 40aaee82..00000000
--- a/resources/scripts/components/base/BaseDialog.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<template>
-  <TransitionRoot as="template" :show="dialogStore.active">
-    <Dialog
-      as="div"
-      static
-      class="fixed inset-0 z-20 overflow-y-auto"
-      :open="dialogStore.active"
-      @close="dialogStore.closeDialog"
-    >
-      <div
-        class="
-          flex
-          items-end
-          justify-center
-          min-h-screen
-          px-4
-          pt-4
-          pb-20
-          text-center
-          sm:block sm:p-0
-        "
-      >
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-surface-secondary0/75"
-          />
-        </TransitionChild>
-
-        <!-- This element is to trick the browser into centering the modal contents. -->
-        <span
-          class="hidden sm:inline-block sm:align-middle sm:h-screen"
-          aria-hidden="true"
-          >&#8203;</span
-        >
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          enter-to="opacity-100 translate-y-0 sm:scale-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100 translate-y-0 sm:scale-100"
-          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        >
-          <div
-            class="
-              inline-block
-              px-4
-              pt-5
-              pb-4
-              overflow-hidden
-              text-left
-              align-bottom
-              transition-all
-              bg-surface/80 backdrop-blur-2xl
-              rounded-xl border border-white/15
-              shadow-xl
-              sm:my-8 sm:align-middle sm:w-full sm:p-6
-              relative
-            "
-            :class="dialogSizeClasses"
-          >
-            <div>
-              <div
-                class="
-                  flex
-                  items-center
-                  justify-center
-                  w-12
-                  h-12
-                  mx-auto
-                  bg-alert-success-bg
-                  rounded-full
-                "
-                :class="{
-                  'bg-alert-success-bg': dialogStore.variant === 'primary',
-                  'bg-alert-error-bg': dialogStore.variant === 'danger',
-                }"
-              >
-                <BaseIcon
-                  v-if="dialogStore.variant === 'primary'"
-                  name="CheckIcon"
-                  class="w-6 h-6 text-alert-success-text"
-                />
-                <BaseIcon
-                  v-else
-                  name="ExclamationIcon"
-                  class="w-6 h-6 text-alert-error-text"
-                  aria-hidden="true"
-                />
-              </div>
-              <div class="mt-3 text-center sm:mt-5">
-                <DialogTitle
-                  as="h3"
-                  class="text-lg font-medium leading-6 text-heading"
-                >
-                  {{ dialogStore.title }}
-                </DialogTitle>
-                <div class="mt-2">
-                  <p class="text-sm text-muted">
-                    {{ dialogStore.message }}
-                  </p>
-                </div>
-              </div>
-            </div>
-            <div
-              class="mt-5 sm:mt-6 grid gap-3"
-              :class="{
-                'sm:grid-cols-2 sm:grid-flow-row-dense':
-                  !dialogStore.hideNoButton,
-              }"
-            >
-              <base-button
-                class="justify-center"
-                :variant="dialogStore.variant"
-                :class="{ 'w-full': dialogStore.hideNoButton }"
-                @click="resolveDialog(true)"
-              >
-                {{ dialogStore.yesLabel }}
-              </base-button>
-
-              <base-button
-                v-if="!dialogStore.hideNoButton"
-                class="justify-center"
-                variant="white"
-                @click="resolveDialog(false)"
-              >
-                {{ dialogStore.noLabel }}
-              </base-button>
-            </div>
-          </div>
-        </TransitionChild>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { useDialogStore } from '@/scripts/stores/dialog'
-import {
-  Dialog,
-  DialogOverlay,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from '@headlessui/vue'
-
-const dialogStore = useDialogStore()
-
-function resolveDialog(resValue) {
-  dialogStore.resolve(resValue)
-  dialogStore.closeDialog()
-}
-
-const dialogSizeClasses = computed(() => {
-  const size = dialogStore.size
-
-  switch (size) {
-    case 'sm':
-      return 'sm:max-w-sm'
-    case 'md':
-      return 'sm:max-w-md'
-    case 'lg':
-      return 'sm:max-w-lg'
-
-    default:
-      return 'sm:max-w-md'
-  }
-})
-</script>
diff --git a/resources/scripts/components/base/BaseDivider.vue b/resources/scripts/components/base/BaseDivider.vue
deleted file mode 100644
index 591b78bd..00000000
--- a/resources/scripts/components/base/BaseDivider.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <hr class="w-full border-line-light" />
-</template>
diff --git a/resources/scripts/components/base/BaseDropdown.vue b/resources/scripts/components/base/BaseDropdown.vue
deleted file mode 100644
index e3c703d0..00000000
--- a/resources/scripts/components/base/BaseDropdown.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <div class="relative" :class="wrapperClass">
-    <BaseContentPlaceholders
-      v-if="contentLoading"
-      class="disabled cursor-normal pointer-events-none"
-    >
-      <BaseContentPlaceholdersBox
-        :rounded="true"
-        class="w-14"
-        style="height: 42px"
-      />
-    </BaseContentPlaceholders>
-    <Menu v-else>
-      <MenuButton ref="trigger" class="focus:outline-hidden" @click="onClick">
-        <slot name="activator" />
-      </MenuButton>
-
-      <div ref="container" class="z-10" :class="widthClass">
-        <transition
-          enter-active-class="transition duration-100 ease-out"
-          enter-from-class="scale-95 opacity-0"
-          enter-to-class="scale-100 opacity-100"
-          leave-active-class="transition duration-75 ease-in"
-          leave-from-class="scale-100 opacity-100"
-          leave-to-class="scale-95 opacity-0"
-        >
-          <MenuItems :class="containerClasses">
-            <div class="py-1">
-              <slot />
-            </div>
-          </MenuItems>
-        </transition>
-      </div>
-    </Menu>
-  </div>
-</template>
-
-<script setup>
-import { Menu, MenuButton, MenuItems } from '@headlessui/vue'
-import { computed, onMounted, ref, onUpdated } from 'vue'
-import { usePopper } from '@/scripts/helpers/use-popper'
-
-const props = defineProps({
-  containerClass: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  widthClass: {
-    type: String,
-    default: 'w-56',
-  },
-  positionClass: {
-    type: String,
-    default: 'absolute z-10 right-0',
-  },
-  position: {
-    type: String,
-    default: 'bottom-end',
-  },
-  wrapperClass: {
-    type: String,
-    default: 'inline-block h-full text-left',
-  },
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const containerClasses = computed(() => {
-  const baseClass = `origin-top-right rounded-xl shadow-xl bg-surface/80 backdrop-blur-xl border border-white/15 divide-y divide-line-light focus:outline-hidden`
-  return `${baseClass} ${props.containerClass}`
-})
-
-let [trigger, container, popper] = usePopper({
-  placement: 'bottom-end',
-  strategy: 'fixed',
-  modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
-})
-
-function onClick() {
-  popper.value.update()
-}
-</script>
diff --git a/resources/scripts/components/base/BaseDropdownItem.vue b/resources/scripts/components/base/BaseDropdownItem.vue
deleted file mode 100644
index c93d1202..00000000
--- a/resources/scripts/components/base/BaseDropdownItem.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <MenuItem v-slot="{ active }" v-bind="$attrs">
-    <a
-      href="#"
-      :class="[
-        active ? 'bg-hover-strong text-heading' : 'text-body',
-        'group flex items-center px-4 py-2 text-sm font-normal whitespace-normal',
-      ]"
-    >
-      <slot :active="active" />
-    </a>
-  </MenuItem>
-</template>
-
-<script setup>
-import { MenuItem } from '@headlessui/vue'
-</script>
diff --git a/resources/scripts/components/base/BaseEmptyPlaceholder.vue b/resources/scripts/components/base/BaseEmptyPlaceholder.vue
deleted file mode 100644
index a888ebf6..00000000
--- a/resources/scripts/components/base/BaseEmptyPlaceholder.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div class="flex flex-col items-center justify-center mt-16">
-    <div class="flex flex-col items-center justify-center">
-      <slot></slot>
-    </div>
-    <div class="mt-2">
-      <label class="font-medium">{{ title }}</label>
-    </div>
-    <div class="mt-2">
-      <label class="text-muted">
-        {{ description }}
-      </label>
-    </div>
-    <div class="mt-6">
-      <slot name="actions" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  title: {
-    type: String,
-    default: String,
-  },
-  description: {
-    type: String,
-    default: String,
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/BaseErrorAlert.vue b/resources/scripts/components/base/BaseErrorAlert.vue
deleted file mode 100644
index 2bebfa26..00000000
--- a/resources/scripts/components/base/BaseErrorAlert.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="rounded-md bg-alert-error-bg p-4">
-    <div class="flex">
-      <div class="shrink-0">
-        <XCircleIcon class="h-5 w-5 text-alert-error-text" aria-hidden="true" />
-      </div>
-      <div class="ml-3">
-        <h3 class="text-sm font-medium text-alert-error-text">
-          {{ errorTitle }}
-        </h3>
-        <div class="mt-2 text-sm text-alert-error-text">
-          <ul role="list" class="list-disc pl-5 space-y-1">
-            <li v-for="(error, key) in errors" :key="key">
-              {{ error }}
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { XCircleIcon } from '@heroicons/vue/24/solid'
-
-const props = defineProps({
-  errorTitle: {
-    type: String,
-    default: 'There were some errors with your submission',
-  },
-  errors: {
-    type: Array,
-    default: null,
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/BaseEstimateStatusBadge.vue b/resources/scripts/components/base/BaseEstimateStatusBadge.vue
deleted file mode 100644
index 9efc9883..00000000
--- a/resources/scripts/components/base/BaseEstimateStatusBadge.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <span :class="badgeColorClasses">
-    <slot />
-  </span>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  status: {
-    type: String,
-    required: false,
-    default: '',
-  },
-})
-
-const badgeColorClasses = computed(() => {
-  switch (props.status) {
-    case 'DRAFT':
-      return 'bg-yellow-300/25 px-2  py-1 text-sm  text-status-yellow uppercase font-normal text-center '
-    case 'SENT':
-      return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center'
-    case 'VIEWED':
-      return 'bg-blue-400/25 px-2  py-1 text-sm  text-status-blue uppercase font-normal text-center'
-    case 'EXPIRED':
-      return 'bg-red-300/25 px-2 py-1 text-sm  text-status-red uppercase font-normal text-center'
-    case 'ACCEPTED':
-      return 'bg-green-400/25 px-2 py-1 text-sm  text-status-green uppercase font-normal text-center'
-    case 'REJECTED':
-      return 'bg-purple-300/25 px-2 py-1 text-sm  text-status-purple uppercase font-normal text-center'
-    default:
-      return 'bg-surface-secondary0/25 px-2 py-1 text-sm  text-heading uppercase font-normal text-center'
-  }
-})
-</script>
diff --git a/resources/scripts/components/base/BaseEstimateStatusLabel.vue b/resources/scripts/components/base/BaseEstimateStatusLabel.vue
deleted file mode 100644
index fb0126af..00000000
--- a/resources/scripts/components/base/BaseEstimateStatusLabel.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  {{ labelStatus }}
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const props = defineProps({
-  status: {
-    type: String,
-    required: false,
-    default: '',
-  },
-})
-
-const labelStatus = computed(() => {
-  switch (props.status) {
-    case 'DRAFT':
-      return t('estimates.draft')
-    case 'SENT':
-      return t('estimates.sent')
-    case 'VIEWED':
-      return t('estimates.viewed')
-    case 'EXPIRED':
-      return t('estimates.expired')
-    case 'ACCEPTED':
-      return t('estimates.accepted')
-    case 'REJECTED':
-      return t('estimates.rejected')
-    case 'DECLINED':
-      return t('estimates.declined')
-    default:
-      return props.status
-  }
-})
-</script>
diff --git a/resources/scripts/components/base/BaseFileUploader.vue b/resources/scripts/components/base/BaseFileUploader.vue
deleted file mode 100644
index 794faaa4..00000000
--- a/resources/scripts/components/base/BaseFileUploader.vue
+++ /dev/null
@@ -1,578 +0,0 @@
-<template>
-  <form
-    enctype="multipart/form-data"
-    class="
-      relative
-      flex
-      items-center
-      justify-center
-      p-2
-      border-2 border-dashed
-      rounded-md
-      cursor-pointer
-      avatar-upload
-      border-line-strong
-      transition-all
-      duration-300
-      ease-in-out
-      isolate
-      hover:border-line-strong
-      group
-      min-h-[100px]
-      bg-surface-secondary
-    "
-    :class="avatar ? 'w-32 h-32' : 'w-full'"
-  >
-    <input
-      id="file-upload"
-      ref="inputRef"
-      type="file"
-      tabindex="-1"
-      :multiple="multiple"
-      :name="inputFieldName"
-      :accept="accept"
-      class="absolute z-10 w-full h-full opacity-0 cursor-pointer"
-      @click="$event.target.value=null"
-      @change="
-        onChange(
-          $event.target.name,
-          $event.target.files,
-          $event.target.files.length
-        )
-      "
-    />
-
-    <!-- Avatar Not Selected -->
-    <div v-if="!localFiles.length && avatar" class="">
-      <img :src="getDefaultAvatar()" class="rounded" alt="Default Avatar" />
-
-      <a
-        href="#"
-        class="absolute z-30 bg-surface rounded-full -bottom-3 -right-3 group"
-        @click.prevent.stop="onBrowse"
-      >
-        <BaseIcon
-          name="PlusCircleIcon"
-          class="
-            h-8
-            text-xl
-            leading-6
-            text-primary-500
-            group-hover:text-primary-600
-          "
-        />
-      </a>
-    </div>
-
-    <!-- Not Selected -->
-    <div v-else-if="!localFiles.length" class="flex flex-col items-center">
-      <BaseIcon
-        name="CloudArrowUpIcon"
-        class="h-6 mb-2 text-xl leading-6 text-subtle"
-      />
-      <p class="text-xs leading-4 text-center text-subtle">
-        {{ $t('general.file_upload.drag_a_file') }}
-        <a
-          class="
-            cursor-pointer
-            text-primary-500
-            hover:text-primary-600 hover:font-medium
-            relative
-            z-20
-          "
-          href="#"
-          @click.prevent.stop="onBrowse"
-        >
-          {{ $t('general.file_upload.browse') }}
-        </a>
-        {{ $t('general.file_upload.to_choose') }}
-      </p>
-      <p class="text-xs leading-4 text-center text-subtle mt-2">
-        {{ recommendedText }}
-      </p>
-    </div>
-
-    <div
-      v-else-if="localFiles.length && avatar && !multiple"
-      class="flex w-full h-full border border-line-default rounded justify-center items-center"
-    >
-      <img
-        v-if="localFiles[0].image"
-        for="file-upload"
-        :src="localFiles[0].image"
-        class="block object-cover w-full h-full rounded opacity-100"
-        style="animation: fadeIn 2s ease"
-      />
-
-      <div
-        v-else
-        class="
-          flex
-          justify-center
-          items-center
-          text-subtle
-          flex-col
-          space-y-2
-          px-2
-          py-4
-          w-full
-        "
-      >
-        <!-- DocumentText Icon -->
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-8 w-8"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="1.25"
-            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-          />
-        </svg>
-
-        <p
-          v-if="localFiles[0].name"
-          class="
-            text-body
-            font-medium
-            text-sm
-            truncate
-            overflow-hidden
-            w-full
-          "
-        >
-          {{ localFiles[0].name }}
-        </p>
-      </div>
-
-      <a
-        href="#"
-        class="
-          box-border
-          absolute
-          z-30
-          flex
-          items-center
-          justify-center
-          w-8
-          h-8
-          bg-surface
-          border border-line-default
-          rounded-full
-          shadow-md
-          -bottom-3
-          -right-3
-          group
-          hover:border-line-strong
-        "
-        @click.prevent.stop="onAvatarRemove(localFiles[0])"
-      >
-        <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-heading" />
-      </a>
-    </div>
-
-    <!-- Preview Files Multiple -->
-    <div
-      v-else-if="localFiles.length && multiple"
-      class="flex flex-wrap w-full"
-    >
-      <a
-        v-for="(localFile, index) in localFiles"
-        :key="localFile"
-        href="#"
-        class="
-          block
-          p-2
-          m-2
-          bg-surface
-          border border-line-default
-          rounded
-          hover:border-gray-500
-          relative
-          max-w-md
-        "
-        @click.prevent
-      >
-        <img
-          v-if="localFile.image"
-          for="file-upload"
-          :src="localFile.image"
-          class="block object-cover w-20 h-20 opacity-100"
-          style="animation: fadeIn 2s ease"
-        />
-
-        <div
-          v-else
-          class="
-            flex
-            justify-center
-            items-center
-            text-subtle
-            flex-col
-            space-y-2
-            px-2
-            py-4
-            w-full
-          "
-        >
-          <!-- DocumentText Icon -->
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.25"
-              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-            />
-          </svg>
-
-          <p
-            v-if="localFile.name"
-            class="
-              text-body
-              font-medium
-              text-sm
-              truncate
-              overflow-hidden
-              w-full
-            "
-          >
-            {{ localFile.name }}
-          </p>
-        </div>
-
-        <span
-          class="
-            cursor-pointer
-            box-border
-            absolute
-            z-30
-            flex
-            items-center
-            justify-center
-            w-8
-            h-8
-            bg-surface
-            border border-line-default
-            rounded-full
-            shadow-md
-            -bottom-3
-            -right-3
-            group
-            hover:border-line-strong
-          "
-          @click.prevent.stop="onFileRemove(index)"
-        >
-          <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-heading" />
-        </span>
-      </a>
-    </div>
-
-    <div v-else class="flex w-full items-center justify-center">
-      <a
-        v-for="(localFile, index) in localFiles"
-        :key="localFile"
-        href="#"
-        class="
-          block
-          p-2
-          m-2
-          bg-surface
-          border border-line-default
-          rounded
-          hover:border-gray-500
-          relative
-          max-w-md
-        "
-        @click.prevent
-      >
-        <img
-          v-if="localFile.image"
-          for="file-upload"
-          :src="localFile.image"
-          class="block object-contain h-20 opacity-100 min-w-[5rem]"
-          style="animation: fadeIn 2s ease"
-        />
-
-        <div
-          v-else
-          class="
-            flex
-            justify-center
-            items-center
-            text-subtle
-            flex-col
-            space-y-2
-            px-2
-            py-4
-            w-full
-          "
-        >
-          <!-- DocumentText Icon -->
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.25"
-              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-            />
-          </svg>
-
-          <p
-            v-if="localFile.name"
-            class="
-              text-body
-              font-medium
-              text-sm
-              truncate
-              overflow-hidden
-              w-full
-            "
-          >
-            {{ localFile.name }}
-          </p>
-        </div>
-
-        <span
-          class="
-            cursor-pointer
-            box-border
-            absolute
-            z-30
-            flex
-            items-center
-            justify-center
-            w-8
-            h-8
-            bg-surface
-            border border-line-default
-            rounded-full
-            shadow-md
-            -bottom-3
-            -right-3
-            group
-            hover:border-line-strong
-          "
-          @click.prevent.stop="onFileRemove(index)"
-        >
-          <BaseIcon name="XMarkIcon" class="h-4 text-xl leading-6 text-heading" />
-        </span>
-      </a>
-    </div>
-  </form>
-</template>
-
-<script setup>
-import { ref, onMounted, watch } from 'vue'
-import http from '@/scripts/http'
-import utils from '@/scripts/helpers/utilities'
-
-const props = defineProps({
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  avatar: {
-    type: Boolean,
-    default: false,
-  },
-  autoProcess: {
-    type: Boolean,
-    default: false,
-  },
-  uploadUrl: {
-    type: String,
-    default: '',
-  },
-  preserveLocalFiles: {
-    type: Boolean,
-    default: false,
-  },
-  accept: {
-    type: String,
-    default: 'image/*',
-  },
-  inputFieldName: {
-    type: String,
-    default: 'photos',
-  },
-  base64: {
-    type: Boolean,
-    default: false,
-  },
-  modelValue: {
-    type: Array,
-    default: () => [],
-  },
-  recommendedText: {
-    type: String,
-    default: '',
-  },
-})
-
-const emit = defineEmits(['change', 'remove', 'update:modelValue'])
-
-// status
-const STATUS_INITIAL = 0
-const STATUS_SAVING = 1
-const STATUS_SUCCESS = 2
-const STATUS_FAILED = 3
-
-let uploadedFiles = ref([])
-const localFiles = ref([])
-const inputRef = ref(null)
-let uploadError = ref(null)
-let currentStatus = ref(null)
-
-function reset() {
-  // reset form to initial state
-  currentStatus.value = STATUS_INITIAL
-
-  uploadedFiles.value = []
-
-  if (props.modelValue && props.modelValue.length) {
-    localFiles.value = [...props.modelValue]
-  } else {
-    localFiles.value = []
-  }
-
-  uploadError.value = null
-}
-
-function upload(formData) {
-  return (
-    http
-      .post(props.uploadUrl, formData)
-      // get data
-      .then((x) => x.data)
-      // add url field
-      .then((x) => x.map((img) => ({ ...img, url: `/images/${img.id}` })))
-  )
-}
-
-// upload data to the server
-function save(formData) {
-  currentStatus.value = STATUS_SAVING
-
-  upload(formData)
-    .then((x) => {
-      uploadedFiles.value = [].concat(x)
-      currentStatus.value = STATUS_SUCCESS
-    })
-    .catch((err) => {
-      uploadError.value = err.response
-      currentStatus.value = STATUS_FAILED
-    })
-}
-
-function getBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.readAsDataURL(file)
-    reader.onload = () => resolve(reader.result)
-    reader.onerror = (error) => reject(error)
-  })
-}
-
-function onChange(fieldName, fileList, fileCount) {
-  if (!fileList.length) return
-
-  if (props.multiple) {
-    emit('change', fieldName, fileList, fileCount)
-  } else {
-    if (props.base64) {
-      getBase64(fileList[0]).then((res) => {
-        emit('change', fieldName, res, fileCount, fileList[0])
-      })
-    } else {
-      emit('change', fieldName, fileList[0], fileCount)
-    }
-  }
-
-  if (!props.preserveLocalFiles) {
-    localFiles.value = []
-  }
-
-  Array.from(Array(fileList.length).keys()).forEach((x) => {
-    const file = fileList[x]
-
-    if (utils.isImageFile(file.type)) {
-      getBase64(file).then((image) => {
-        localFiles.value.push({
-          fileObject: file,
-          type: file.type,
-          name: file.name,
-          image,
-        })
-      })
-    } else {
-      localFiles.value.push({
-        fileObject: file,
-        type: file.type,
-        name: file.name,
-      })
-    }
-  })
-
-  emit('update:modelValue', localFiles.value)
-
-  if (!props.autoProcess) return
-
-  // append the files to FormData
-  const formData = new FormData()
-
-  Array.from(Array(fileList.length).keys()).forEach((x) => {
-    formData.append(fieldName, fileList[x], fileList[x].name)
-  })
-
-  // save it
-  save(formData)
-}
-
-function onBrowse() {
-  if (inputRef.value) {
-    inputRef.value.click()
-  }
-}
-
-function onAvatarRemove(image) {
-  localFiles.value = []
-  emit('remove', image)
-}
-
-function onFileRemove(index) {
-  localFiles.value.splice(index, 1)
-  emit('remove', index)
-}
-
-function getDefaultAvatar() {
-  const imgUrl = new URL('$images/default-avatar.jpg', import.meta.url)
-  return imgUrl
-}
-
-onMounted(() => {
-  reset()
-})
-
-watch(
-  () => props.modelValue,
-  (v) => {
-    localFiles.value = [...v]
-  }
-)
-</script>
diff --git a/resources/scripts/components/base/BaseFilterWrapper.vue b/resources/scripts/components/base/BaseFilterWrapper.vue
deleted file mode 100644
index 8a805c1c..00000000
--- a/resources/scripts/components/base/BaseFilterWrapper.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <transition
-    enter-active-class="transition duration-500 ease-in-out"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="transition ease-in-out"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-surface-muted rounded">
-      <slot name="filter-header" />
-
-      <label
-        class="
-          absolute
-          text-sm
-          leading-snug
-          text-heading
-          cursor-pointer
-          hover:text-body
-          top-2.5
-          right-3.5
-        "
-        @click="$emit('clear')"
-      >
-        {{ $t('general.clear_all') }}
-      </label>
-
-      <div
-        class="flex flex-col space-y-3"
-        :class="
-          rowOnXl
-            ? 'xl:flex-row xl:space-x-4 xl:space-y-0 xl:items-center'
-            : 'lg:flex-row lg:space-x-4 lg:space-y-0 lg:items-center'
-        "
-      >
-        <slot />
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script setup>
-defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  rowOnXl: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-defineEmits(['clear'])
-</script>
diff --git a/resources/scripts/components/base/BaseFormatMoney.vue b/resources/scripts/components/base/BaseFormatMoney.vue
deleted file mode 100644
index 48428a56..00000000
--- a/resources/scripts/components/base/BaseFormatMoney.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <span style="font-family: sans-serif">{{ formattedAmount }}</span>
-</template>
-
-<script setup>
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-import { inject, computed } from 'vue'
-
-const props = defineProps({
-  amount: {
-    type: [Number, String],
-    required: true,
-  },
-  currency: {
-    type: Object,
-    default: () => {
-      return null
-    },
-  },
-})
-
-const utils = inject('utils')
-
-const companyStore = useCompanyStore()
-
-const formattedAmount = computed(() => {
-  return utils.formatMoney(
-    props.amount,
-    props.currency || companyStore.selectedCompanyCurrency
-  )
-})
-</script>
diff --git a/resources/scripts/components/base/BaseGlobalLoader.vue b/resources/scripts/components/base/BaseGlobalLoader.vue
deleted file mode 100644
index a777ab6c..00000000
--- a/resources/scripts/components/base/BaseGlobalLoader.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-  <div class="flex flex-col items-center justify-center h-screen">
-    <MainLogo
-      class="w-28 h-auto text-primary-400 mb-6"
-      alt="InvoiceShelf Logo"
-    />
-    <div class="flex space-x-1.5">
-      <span class="loader-dot" />
-      <span class="loader-dot delay-150" />
-      <span class="loader-dot delay-300" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import MainLogo from '@/scripts/components/icons/MainLogo.vue'
-
-const props = defineProps({
-  showBgOverlay: {
-    default: false,
-    type: Boolean,
-  },
-})
-</script>
-
-<style>
-.loader-dot {
-  width: 0.625rem;
-  height: 0.625rem;
-  border-radius: 9999px;
-  background-color: oklch(0.585 0.233 277.117);
-  animation: loader-bounce 1.4s infinite ease-in-out both;
-}
-
-.loader-dot.delay-150 {
-  animation-delay: 0.15s;
-}
-
-.loader-dot.delay-300 {
-  animation-delay: 0.3s;
-}
-
-@keyframes loader-bounce {
-  0%, 80%, 100% {
-    transform: scale(0.4);
-    opacity: 0.4;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-</style>
diff --git a/resources/scripts/components/base/BaseHeading.vue b/resources/scripts/components/base/BaseHeading.vue
deleted file mode 100644
index ebf15d19..00000000
--- a/resources/scripts/components/base/BaseHeading.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <h6 :class="typeClass">
-    <slot />
-  </h6>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-const props = defineProps({
-  type: {
-    type: String,
-    default: 'section-title',
-    validator: function (value) {
-      return ['section-title', 'heading-title'].indexOf(value) !== -1
-    },
-  },
-})
-
-const typeClass = computed(() => {
-  return {
-    'text-heading text-lg font-medium': props.type === 'heading-title',
-    'text-muted uppercase text-base': props.type === 'section-title',
-  }
-})
-</script>
diff --git a/resources/scripts/components/base/BaseIcon.vue b/resources/scripts/components/base/BaseIcon.vue
deleted file mode 100644
index 8ee698fc..00000000
--- a/resources/scripts/components/base/BaseIcon.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <component :is="heroIcons[name]" v-if="isLoaded" class="h-5 w-5" />
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import * as heroIcons from '@heroicons/vue/24/outline'
-
-const isLoaded = ref(false)
-
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-})
-
-onMounted(() => {
-  isLoaded.value = true
-})
-</script>
diff --git a/resources/scripts/components/base/BaseInfoAlert.vue b/resources/scripts/components/base/BaseInfoAlert.vue
deleted file mode 100644
index 5d8933f2..00000000
--- a/resources/scripts/components/base/BaseInfoAlert.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <div class="rounded-md bg-alert-warning-bg p-4 relative">
-    <BaseIcon
-      name="XMarkIcon"
-      class="h-5 w-5 text-alert-warning-text absolute right-4 cursor-pointer"
-      @click="$emit('hide')"
-    />
-    <div class="flex flex-col">
-      <div class="flex">
-        <div class="shrink-0">
-          <BaseIcon
-            name="ExclamationIcon"
-            class="h-5 w-5 text-alert-warning-text"
-            aria-hidden="true"
-          />
-        </div>
-        <div class="ml-3">
-          <h3 class="text-sm font-medium text-alert-warning-text">
-            {{ title }}
-          </h3>
-          <div class="mt-2 text-sm text-alert-warning-text">
-            <ul role="list" class="list-disc pl-5 space-y-1">
-              <li v-for="(list, key) in lists" :key="key">
-                {{ list }}
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <div v-if="actions.length" class="mt-4 ml-3">
-        <div class="-mx-2 -my-1.5 flex flex-row-reverse">
-          <button
-            v-for="(action, i) in actions"
-            :key="i"
-            type="button"
-            class="
-              bg-alert-warning-bg
-              px-2
-              py-1.5
-              rounded-md
-              text-sm
-              font-medium
-              text-alert-warning-text
-              hover:bg-alert-warning-bg
-              focus:outline-hidden
-              focus:ring-2
-              focus:ring-offset-2
-              focus:ring-offset-yellow-50
-              focus:ring-yellow-600
-              mr-3
-            "
-            @click="$emit(`${action}`)"
-          >
-            {{ action }}
-          </button>
-          <!-- <button
-            v-if="actions[1]"
-            type="button"
-            class="
-              ml-3
-              bg-yellow-50
-              px-2
-              py-1.5
-              rounded-md
-              text-sm
-              font-medium
-              text-yellow-800
-              hover:bg-yellow-100
-              focus:outline-hidden
-              focus:ring-2
-              focus:ring-offset-2
-              focus:ring-offset-yellow-50
-              focus:ring-yellow-600
-            "
-            @click="$emit('action2')"
-          >
-            {{ actions[1] }}
-          </button> -->
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { XCircleIcon } from '@heroicons/vue/24/solid'
-
-const emits = defineEmits(['hide'])
-const props = defineProps({
-  title: {
-    type: String,
-    default: 'There were some errors with your submission',
-  },
-  lists: {
-    type: Array,
-    default: null,
-  },
-  actions: {
-    type: Array,
-    default: () => ['Dismiss'],
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/BaseInput.vue b/resources/scripts/components/base/BaseInput.vue
deleted file mode 100644
index 86b0ea45..00000000
--- a/resources/scripts/components/base/BaseInput.vue
+++ /dev/null
@@ -1,285 +0,0 @@
-<template>
-  <BaseContentPlaceholders v-if="contentLoading">
-    <BaseContentPlaceholdersBox
-      :rounded="true"
-      :class="`w-full ${contentLoadClass}`"
-      style="height: 38px"
-    />
-  </BaseContentPlaceholders>
-
-  <div
-    v-else
-    :class="[containerClass, computedContainerClass]"
-    class="relative rounded-md shadow-xs font-base"
-  >
-    <div
-      v-if="loading && loadingPosition === 'left'"
-      class="
-        absolute
-        inset-y-0
-        left-0
-        flex
-        items-center
-        pl-3
-        pointer-events-none
-      "
-    >
-      <svg
-        class="animate-spin !text-primary-500"
-        :class="[iconLeftClass]"
-        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"
-        ></circle>
-        <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"
-        ></path>
-      </svg>
-    </div>
-
-    <div
-      v-else-if="hasLeftIconSlot"
-      class="absolute inset-y-0 left-0 flex items-center pl-3"
-    >
-      <slot name="left" :class="iconLeftClass" />
-    </div>
-
-    <span
-      v-if="addon"
-      class="
-        inline-flex
-        items-center
-        px-3
-        text-muted
-        border border-r-0 border-line-default
-        rounded-l-md
-        bg-surface-secondary
-        sm:text-sm
-      "
-    >
-      {{ addon }}
-    </span>
-
-    <div
-      v-if="inlineAddon"
-      class="
-        absolute
-        inset-y-0
-        left-0
-        flex
-        items-center
-        pl-3
-        pointer-events-none
-      "
-    >
-      <span class="text-muted sm:text-sm">
-        {{ inlineAddon }}
-      </span>
-    </div>
-
-    <input
-      v-bind="$attrs"
-      :type="type"
-      :value="modelValue"
-      :disabled="disabled"
-      :class="[
-        defaultInputClass,
-        inputPaddingClass,
-        inputAddonClass,
-        inputInvalidClass,
-        inputDisabledClass,
-      ]"
-      @input="emitValue"
-    />
-
-    <div
-      v-if="loading && loadingPosition === 'right'"
-      class="
-        absolute
-        inset-y-0
-        right-0
-        flex
-        items-center
-        pr-3
-        pointer-events-none
-      "
-    >
-      <svg
-        class="animate-spin !text-primary-500"
-        :class="[iconRightClass]"
-        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"
-        ></circle>
-        <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"
-        ></path>
-      </svg>
-    </div>
-
-    <div
-      v-if="hasRightIconSlot"
-      class="absolute inset-y-0 right-0 flex items-center pr-3"
-    >
-      <slot name="right" :class="iconRightClass" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref, useSlots } from 'vue'
-
-let inheritAttrs = ref(false)
-
-const props = defineProps({
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-  type: {
-    type: [Number, String],
-    default: 'text',
-  },
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  loadingPosition: {
-    type: String,
-    default: 'left',
-  },
-  addon: {
-    type: String,
-    default: null,
-  },
-  inlineAddon: {
-    type: String,
-    default: '',
-  },
-  invalid: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  containerClass: {
-    type: String,
-    default: '',
-  },
-  contentLoadClass: {
-    type: String,
-    default: '',
-  },
-  defaultInputClass: {
-    type: String,
-    default:
-      'font-base block w-full sm:text-sm border-line-default rounded-md text-heading',
-  },
-  iconLeftClass: {
-    type: String,
-    default: 'h-5 w-5 text-subtle',
-  },
-  iconRightClass: {
-    type: String,
-    default: 'h-5 w-5 text-subtle',
-  },
-  modelModifiers: {
-    default: () => ({}),
-  },
-})
-
-const slots = useSlots()
-
-const emit = defineEmits(['update:modelValue'])
-
-const hasLeftIconSlot = computed(() => {
-  return !!slots.left || (props.loading && props.loadingPosition === 'left')
-})
-
-const hasRightIconSlot = computed(() => {
-  return !!slots.right || (props.loading && props.loadingPosition === 'right')
-})
-
-const inputPaddingClass = computed(() => {
-  if (hasLeftIconSlot.value && hasRightIconSlot.value) {
-    return 'px-10'
-  } else if (hasLeftIconSlot.value) {
-    return 'pl-10'
-  } else if (hasRightIconSlot.value) {
-    return 'pr-10'
-  }
-
-  return ''
-})
-
-const inputAddonClass = computed(() => {
-  if (props.addon) {
-    return 'flex-1 min-w-0 block w-full px-3 py-2 !rounded-none !rounded-r-md'
-  } else if (props.inlineAddon) {
-    return 'pl-7'
-  }
-
-  return ''
-})
-
-const inputInvalidClass = computed(() => {
-  if (props.invalid) {
-    return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
-  }
-
-  return 'focus:ring-primary-400 focus:border-primary-400'
-})
-
-const inputDisabledClass = computed(() => {
-  if (props.disabled) {
-    return `border-line-light bg-surface-tertiary !text-subtle ring-surface-muted focus:ring-surface-muted focus:border-line-light`
-  }
-
-  return ''
-})
-
-const computedContainerClass = computed(() => {
-  let containerClass = `${props.containerClass} `
-
-  if (props.addon) {
-    return `${props.containerClass} flex`
-  }
-
-  return containerClass
-})
-
-function emitValue(e) {
-  let val = e.target.value
-  if (props.modelModifiers.uppercase) {
-    val = val.toUpperCase()
-  }
-
-  emit('update:modelValue', val)
-}
-</script>
diff --git a/resources/scripts/components/base/BaseInputGrid.vue b/resources/scripts/components/base/BaseInputGrid.vue
deleted file mode 100644
index 7cc52180..00000000
--- a/resources/scripts/components/base/BaseInputGrid.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  layout: {
-    type: String,
-    default: 'two-column',
-  },
-})
-
-const formLayout = computed(() => {
-  if (props.layout === 'two-column') {
-    return 'grid gap-y-6 gap-x-4 grid-cols-1 md:grid-cols-2'
-  }
-
-  return 'grid gap-y-6 gap-x-4 grid-cols-1'
-})
-</script>
-
-<template>
-  <div :class="formLayout">
-    <slot />
-  </div>
-</template>
diff --git a/resources/scripts/components/base/BaseInputGroup.vue b/resources/scripts/components/base/BaseInputGroup.vue
deleted file mode 100644
index 850b763a..00000000
--- a/resources/scripts/components/base/BaseInputGroup.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <div :class="containerClasses" class="relative w-full text-left">
-    <BaseContentPlaceholders v-if="contentLoading">
-      <BaseContentPlaceholdersText :lines="1" :class="contentLoadClass" />
-    </BaseContentPlaceholders>
-    <label
-      v-else-if="label"
-      :class="labelClasses"
-      class="
-        flex
-        text-sm
-        not-italic
-        items-center
-        font-medium
-        text-heading
-        whitespace-nowrap
-        justify-between
-      "
-    >
-      <div>
-        {{ label }}
-        <span v-show="required" class="text-sm text-red-500"> * </span>
-      </div>
-      <slot v-if="hasRightLabelSlot" name="labelRight" />
-      <BaseIcon
-        v-if="tooltip"
-        v-tooltip="{ content: tooltip }"
-        name="InformationCircleIcon"
-        class="h-4 text-subtle cursor-pointer hover:text-body"
-      />
-    </label>
-    <div :class="inputContainerClasses">
-      <slot></slot>
-      <span v-if="helpText" class="text-muted text-xs mt-1 font-light">
-        {{ helpText }}
-      </span>
-      <span v-if="error" class="block mt-0.5 text-sm text-red-500">
-        {{ error }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, useSlots } from 'vue'
-
-const props = defineProps({
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-  contentLoadClass: {
-    type: String,
-    default: 'w-16 h-5',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  variant: {
-    type: String,
-    default: 'vertical',
-  },
-  error: {
-    type: [String, Boolean],
-    default: null,
-  },
-  required: {
-    type: Boolean,
-    default: false,
-  },
-  tooltip: {
-    type: String,
-    default: null,
-    required: false,
-  },
-  helpText: {
-    type: String,
-    default: null,
-    required: false,
-  },
-})
-
-const containerClasses = computed(() => {
-  if (props.variant === 'horizontal') {
-    return 'grid md:grid-cols-12 items-center'
-  }
-
-  return ''
-})
-
-const labelClasses = computed(() => {
-  if (props.variant === 'horizontal') {
-    return 'relative pr-0 pt-1 mr-3 text-sm md:col-span-4 md:text-right mb-1  md:mb-0'
-  }
-
-  return ''
-})
-
-const inputContainerClasses = computed(() => {
-  if (props.variant === 'horizontal') {
-    return 'md:col-span-8 md:col-start-5 md:col-ends-12'
-  }
-
-  return 'flex flex-col mt-1'
-})
-
-const slots = useSlots()
-
-const hasRightLabelSlot = computed(() => {
-  return !!slots.labelRight
-})
-</script>
diff --git a/resources/scripts/components/base/BaseInvoiceStatusBadge.vue b/resources/scripts/components/base/BaseInvoiceStatusBadge.vue
deleted file mode 100644
index 41c4aa99..00000000
--- a/resources/scripts/components/base/BaseInvoiceStatusBadge.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <span :class="badgeColorClasses">
-    <slot />
-  </span>
-</template>
-
-<script>
-import { computed } from 'vue'
-
-export default {
-  props: {
-    status: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-
-  setup(props) {
-    const badgeColorClasses = computed(() => {
-      switch (props.status) {
-        case 'DRAFT':
-          return 'bg-yellow-300/25 px-2  py-1 text-sm  text-status-yellow uppercase font-normal text-center'
-        case 'SENT':
-          return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center'
-        case 'VIEWED':
-          return 'bg-blue-400/25 px-2  py-1 text-sm  text-status-blue uppercase font-normal text-center'
-        case 'COMPLETED':
-          return 'bg-green-500/25 px-2  py-1 text-sm  text-status-green uppercase font-normal text-center'
-        case 'DUE':
-          return 'bg-yellow-500/25 px-2  py-1 text-sm  text-status-yellow uppercase font-normal text-center'
-        case 'OVERDUE':
-          return 'bg-red-300/50 px-2  py-1 text-sm  text-status-red uppercase font-normal text-center'
-        case 'UNPAID':
-          return 'bg-yellow-500/25 px-2 py-1 text-sm  text-status-yellow uppercase font-normal text-center'
-        case 'PARTIALLY_PAID':
-          return 'bg-blue-400/25 px-2  py-1 text-sm  text-status-blue uppercase font-normal text-center'
-        case 'PAID':
-          return 'bg-green-500/40 px-2 py-1 text-sm text-status-green uppercase font-semibold text-center'
-        default:
-          return 'bg-surface-secondary0/25 px-2 py-1 text-sm  text-heading uppercase font-normal text-center'
-      }
-    })
-    return { badgeColorClasses }
-  },
-}
-</script>
diff --git a/resources/scripts/components/base/BaseInvoiceStatusLabel.vue b/resources/scripts/components/base/BaseInvoiceStatusLabel.vue
deleted file mode 100644
index aa711e8d..00000000
--- a/resources/scripts/components/base/BaseInvoiceStatusLabel.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  {{ labelStatus }}
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const props = defineProps({
-  status: {
-    type: String,
-    required: false,
-    default: '',
-  },
-})
-
-const labelStatus = computed(() => {
-  switch (props.status) {
-    case 'DRAFT':
-      return t('general.draft')
-    case 'SENT':
-      return t('general.sent')
-    case 'VIEWED':
-      return t('invoices.viewed')
-    case 'COMPLETED':
-      return t('invoices.completed')
-    case 'DUE':
-      return t('general.due')
-    case 'OVERDUE':
-      return t('invoices.overdue')
-    case 'UNPAID':
-      return t('invoices.unpaid')
-    case 'PARTIALLY_PAID':
-      return t('invoices.partially_paid')
-    case 'PAID':
-      return t('invoices.paid')
-    default:
-      return props.status
-  }
-})
-</script>
diff --git a/resources/scripts/components/base/BaseItemSelect.vue b/resources/scripts/components/base/BaseItemSelect.vue
deleted file mode 100644
index 74ab4a15..00000000
--- a/resources/scripts/components/base/BaseItemSelect.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-  <div class="flex-1 text-sm">
-    <!-- Selected Item Field  -->
-    <div
-      v-if="item.item_id"
-      class="
-        relative
-        flex
-        items-center
-        h-10
-        pl-2
-        bg-surface-muted
-        border border-line-default border-solid
-        rounded
-      "
-    >
-      {{ item.name }}
-
-      <span
-        class="absolute text-subtle cursor-pointer top-[8px] right-[10px]"
-        @click="deselectItem(index)"
-      >
-        <BaseIcon name="XCircleIcon" />
-      </span>
-    </div>
-
-    <!-- Select Item Field -->
-    <BaseMultiselect
-      v-else
-      v-model="itemSelect"
-      :content-loading="contentLoading"
-      value-prop="id"
-      track-by="name"
-      :invalid="invalid"
-      preserve-search
-      :initial-search="itemData.name"
-      label="name"
-      :filterResults="false"
-      resolve-on-load
-      :delay="500"
-      searchable
-      :options="searchItems"
-      object
-      @update:modelValue="(val) => $emit('select', val)"
-      @searchChange="(val) => $emit('search', val)"
-    >
-      <!-- Add Item Action  -->
-      <template #action>
-        <BaseSelectAction
-          v-if="userStore.hasAbilities(abilities.CREATE_ITEM)"
-          @click="openItemModal"
-        >
-          <BaseIcon
-            name="PlusCircleIcon"
-            class="h-4 mr-2 -ml-2 text-center text-primary-400"
-          />
-          {{ $t('general.add_new_item') }}
-        </BaseSelectAction>
-      </template>
-    </BaseMultiselect>
-
-    <!-- Item Description  -->
-    <div class="w-full pt-1 text-xs text-light">
-      <BaseTextarea
-        v-model="description"
-        :content-loading="contentLoading"
-        :autosize="true"
-        class="text-xs"
-        :borderless="true"
-        :placeholder="$t('estimates.item.type_item_description')"
-        :invalid="invalidDescription"
-      />
-      <div v-if="invalidDescription">
-        <span class="text-red-600">
-          {{ $t('validation.description_maxlength') }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, reactive, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute } from 'vue-router'
-import { useEstimateStore } from '@/scripts/admin/stores/estimate'
-import { useInvoiceStore } from '@/scripts/admin/stores/invoice'
-import { useItemStore } from '@/scripts/admin/stores/item'
-import { useModalStore } from '@/scripts/stores/modal'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import abilities from '@/scripts/admin/stub/abilities'
-
-const props = defineProps({
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-  type: {
-    type: String,
-    default: null,
-  },
-  item: {
-    type: Object,
-    required: true,
-  },
-  index: {
-    type: Number,
-    default: 0,
-  },
-  invalid: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  invalidDescription: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  taxPerItem: {
-    type: String,
-    default: '',
-  },
-  taxes: {
-    type: Array,
-    default: null,
-  },
-  store: {
-    type: Object,
-    default: null,
-  },
-  storeProp: {
-    type: String,
-    default: '',
-  },
-})
-
-const emit = defineEmits(['search', 'select'])
-
-const itemStore = useItemStore()
-const estimateStore = useEstimateStore()
-const invoiceStore = useInvoiceStore()
-const modalStore = useModalStore()
-const userStore = useUserStore()
-
-let route = useRoute()
-const { t } = useI18n()
-
-const itemSelect = ref(null)
-const loading = ref(false)
-let itemData = reactive({ ...props.item })
-Object.assign(itemData, props.item)
-
-const taxAmount = computed(() => {
-  return 0
-})
-
-const description = computed({
-  get: () => props.item.description,
-  set: (value) => {
-    props.store[props.storeProp].items[props.index].description = value
-  },
-})
-
-async function searchItems(search) {
-  let res = await itemStore.fetchItems({ search })
-  return res.data.data
-}
-
-function onTextChange(val) {
-  searchItems(val)
-  emit('search', val)
-}
-
-function openItemModal() {
-  modalStore.openModal({
-    title: t('items.add_item'),
-    componentName: 'ItemModal',
-    refreshData: (val) => emit('select', val),
-    data: {
-      taxPerItem: props.taxPerItem,
-      taxes: props.taxes,
-      itemIndex: props.index,
-      store: props.store,
-      storeProps: props.storeProp,
-    },
-  })
-}
-
-function deselectItem(index) {
-  props.store.deselectItem(index)
-}
-</script>
diff --git a/resources/scripts/components/base/BaseLabel.vue b/resources/scripts/components/base/BaseLabel.vue
deleted file mode 100644
index 2b5671d1..00000000
--- a/resources/scripts/components/base/BaseLabel.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <label class="text-sm not-italic font-medium leading-5 text-primary-800">
-    <slot />
-  </label>
-</template>
diff --git a/resources/scripts/components/base/BaseModal.vue b/resources/scripts/components/base/BaseModal.vue
deleted file mode 100644
index 2aa6ffa5..00000000
--- a/resources/scripts/components/base/BaseModal.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-  <Teleport to="body">
-    <TransitionRoot appear as="template" :show="show">
-      <Dialog
-        as="div"
-        static
-        class="fixed inset-0 z-20 overflow-y-auto"
-        :open="show"
-        @close="$emit('close')"
-      >
-        <div
-          class="
-            flex
-            items-end
-            justify-center
-            min-h-screen
-            px-4
-            text-center
-            sm:block sm:px-2
-          "
-        >
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0"
-            enter-to="opacity-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100"
-            leave-to="opacity-0"
-          >
-            <DialogOverlay
-              class="fixed inset-0 transition-opacity bg-gray-700/25"
-            />
-          </TransitionChild>
-
-          <!-- This element is to trick the browser into centering the modal contents. -->
-          <span
-            class="hidden sm:inline-block sm:align-middle sm:h-screen"
-            aria-hidden="true"
-            >&#8203;</span
-          >
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <div
-              :class="`inline-block
-              align-middle
-              bg-surface/80 backdrop-blur-2xl
-              rounded-xl border border-white/15
-              text-left
-              overflow-hidden
-              relative
-              shadow-xl
-              transition-all
-              my-4
-              ${modalSize}
-              sm:w-full
-              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
-            >
-              <div
-                v-if="hasHeaderSlot"
-                class="
-                  flex
-                  items-center
-                  justify-between
-                  px-6
-                  py-4
-                  text-lg
-                  font-medium
-                  text-heading
-                  border-b border-line-default border-solid
-                "
-              >
-                <slot name="header" />
-              </div>
-
-              <slot />
-
-              <slot name="footer" />
-            </div>
-          </TransitionChild>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-  </Teleport>
-</template>
-
-<script setup>
-import { useModalStore } from '@/scripts/stores/modal'
-import { computed, watchEffect, useSlots } from 'vue'
-import {
-  Dialog,
-  DialogOverlay,
-  TransitionChild,
-  TransitionRoot,
-} from '@headlessui/vue'
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-})
-const slots = useSlots()
-
-const emit = defineEmits(['close', 'open'])
-
-const modalStore = useModalStore()
-
-watchEffect(() => {
-  if (props.show) {
-    emit('open', props.show)
-  }
-})
-
-const modalSize = computed(() => {
-  const size = modalStore.size
-  switch (size) {
-    case 'sm':
-      return 'sm:max-w-2xl w-full'
-    case 'md':
-      return 'sm:max-w-4xl w-full'
-    case 'lg':
-      return 'sm:max-w-6xl w-full'
-
-    default:
-      return 'sm:max-w-2xl w-full'
-  }
-})
-
-const hasHeaderSlot = computed(() => {
-  return !!slots.header
-})
-</script>
diff --git a/resources/scripts/components/base/BaseMoney.vue b/resources/scripts/components/base/BaseMoney.vue
deleted file mode 100644
index acec5313..00000000
--- a/resources/scripts/components/base/BaseMoney.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-  <BaseContentPlaceholders v-if="contentLoading">
-    <BaseContentPlaceholdersBox
-      :rounded="true"
-      class="w-full"
-      style="height: 38px"
-    />
-  </BaseContentPlaceholders>
-  <money3
-    v-else
-    v-model="money"
-    v-bind="currencyBindings"
-    :class="[inputClass, invalidClass]"
-    :disabled="disabled"
-  />
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-import { Money3Component } from 'v-money3'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-let money3 = Money3Component
-
-const props = defineProps({
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-  modelValue: {
-    type: [String, Number],
-    required: true,
-    default: '',
-  },
-  invalid: {
-    type: Boolean,
-    default: false,
-  },
-  inputClass: {
-    type: String,
-    default:
-      'font-base block w-full sm:text-sm border-line-default rounded-md text-heading',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  percent: {
-    type: Boolean,
-    default: false,
-  },
-  currency: {
-    type: Object,
-    default: null,
-  },
-})
-const emit = defineEmits(['update:modelValue'])
-const companyStore = useCompanyStore()
-let hasInitialValueSet = false
-
-const money = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    if (!hasInitialValueSet) {
-      hasInitialValueSet = true
-      return
-    }
-
-    emit('update:modelValue', value)
-  },
-})
-
-const currencyBindings = computed(() => {
-  const currency = props.currency
-    ? props.currency
-    : companyStore.selectedCompanyCurrency
-
-  return {
-    decimal: currency.decimal_separator,
-    thousands: currency.thousand_separator,
-    prefix: currency.symbol + ' ',
-    precision: currency.precision,
-    masked: false,
-  }
-})
-
-const invalidClass = computed(() => {
-  if (props.invalid) {
-    return 'border-red-500 ring-red-500 focus:ring-red-500 focus:border-red-500'
-  }
-  return 'focus:ring-primary-400 focus:border-primary-400'
-})
-</script>
diff --git a/resources/scripts/components/base/BaseNewBadge.vue b/resources/scripts/components/base/BaseNewBadge.vue
deleted file mode 100644
index a5d55164..00000000
--- a/resources/scripts/components/base/BaseNewBadge.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <span
-    :class="[
-      sucess ? 'bg-green-500/25 text-status-green ' : 'bg-red-500/25 text-status-red',
-      'px-2 py-1 text-sm font-normal text-center uppercase',
-    ]"
-  >
-    <slot />
-  </span>
-</template>
-
-<script setup>
-const props = defineProps({
-  sucess: {
-    type: Boolean,
-    default: false,
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/BasePage.vue b/resources/scripts/components/base/BasePage.vue
deleted file mode 100644
index 67eec9b6..00000000
--- a/resources/scripts/components/base/BasePage.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="flex-1 p-4 md:p-8 flex flex-col">
-    <slot />
-  </div>
-</template>
diff --git a/resources/scripts/components/base/BasePageHeader.vue b/resources/scripts/components/base/BasePageHeader.vue
deleted file mode 100644
index 15718eaf..00000000
--- a/resources/scripts/components/base/BasePageHeader.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div class="flex flex-wrap justify-between">
-    <div>
-      <h3 class="text-2xl font-bold text-left text-heading">
-        {{ title }}
-      </h3>
-      <slot />
-    </div>
-    <div class="flex items-center">
-      <slot name="actions" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  title: {
-    type: [String],
-    default: '',
-    required: true,
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/BasePaidStatusBadge.vue b/resources/scripts/components/base/BasePaidStatusBadge.vue
deleted file mode 100644
index 9b776ed5..00000000
--- a/resources/scripts/components/base/BasePaidStatusBadge.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <span :class="[badgeColorClasses, defaultClass]" class="">
-    <slot />
-  </span>
-</template>
-
-<script>
-import { computed } from 'vue'
-
-export default {
-  props: {
-    status: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    defaultClass: {
-      type: String,
-      default: 'px-1 py-0.5 text-xs',
-    },
-  },
-
-  setup(props) {
-    const badgeColorClasses = computed(() => {
-      switch (props.status) {
-        case 'PAID':
-          return 'bg-green-500/40 text-status-green uppercase font-semibold text-center'
-        case 'UNPAID':
-          return ' bg-yellow-500/25 text-status-yellow uppercase font-normal text-center '
-        case 'PARTIALLY_PAID':
-          return 'bg-blue-400/25 text-status-blue uppercase font-normal text-center'
-        case 'OVERDUE':
-          return 'bg-red-300/50 px-2  py-1 text-sm  text-status-red uppercase font-normal text-center'
-        default:
-          return 'bg-surface-secondary0/25 text-heading uppercase font-normal text-center'
-      }
-    })
-    return { badgeColorClasses }
-  },
-}
-</script>
diff --git a/resources/scripts/components/base/BaseRadio.vue b/resources/scripts/components/base/BaseRadio.vue
deleted file mode 100644
index 602fd3fd..00000000
--- a/resources/scripts/components/base/BaseRadio.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <RadioGroup v-model="selected">
-    <RadioGroupLabel class="sr-only"> Privacy setting </RadioGroupLabel>
-    <div class="-space-y-px rounded-md">
-      <RadioGroupOption
-        :id="id"
-        v-slot="{ checked, active }"
-        as="template"
-        :value="value"
-        :name="name"
-        v-bind="$attrs"
-      >
-        <div class="relative flex cursor-pointer focus:outline-hidden">
-          <span
-            :class="[
-              checked ? checkedStateClass : unCheckedStateClass,
-              active ? optionGroupActiveStateClass : '',
-              optionGroupClass,
-            ]"
-            aria-hidden="true"
-          >
-            <span class="rounded-full bg-white w-1.5 h-1.5" />
-          </span>
-          <div class="flex flex-col ml-3">
-            <RadioGroupLabel
-              as="span"
-              :class="[
-                checked ? checkedStateLabelClass : unCheckedStateLabelClass,
-                optionGroupLabelClass,
-              ]"
-            >
-              {{ label }}
-            </RadioGroupLabel>
-          </div>
-        </div>
-      </RadioGroupOption>
-    </div>
-  </RadioGroup>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
-
-const props = defineProps({
-  id: {
-    type: [String, Number],
-    required: false,
-    default: () => `radio_${Math.random().toString(36).substr(2, 9)}`,
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-  value: {
-    type: [String, Number],
-    default: '',
-  },
-  name: {
-    type: [String, Number],
-    default: '',
-  },
-  checkedStateClass: {
-    type: String,
-    default: 'bg-primary-500',
-  },
-  unCheckedStateClass: {
-    type: String,
-    default: 'bg-surface ',
-  },
-  optionGroupActiveStateClass: {
-    type: String,
-    default: 'ring-2 ring-offset-2 ring-primary-500',
-  },
-  checkedStateLabelClass: {
-    type: String,
-    default: 'text-primary-500 ',
-  },
-  unCheckedStateLabelClass: {
-    type: String,
-    default: 'text-heading',
-  },
-  optionGroupClass: {
-    type: String,
-    default:
-      'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
-  },
-  optionGroupLabelClass: {
-    type: String,
-    default: 'block text-sm font-light',
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const selected = computed({
-  get: () => props.modelValue,
-  set: (modelValue) => emit('update:modelValue', modelValue),
-})
-</script>
diff --git a/resources/scripts/components/base/BaseRating.vue b/resources/scripts/components/base/BaseRating.vue
deleted file mode 100644
index c121873f..00000000
--- a/resources/scripts/components/base/BaseRating.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<template>
-  <div class="star-rating">
-    <div
-      v-for="(star, index) in stars"
-      :key="index"
-      :title="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>
-          <!--
-            id has to be unique to each star fullness(dynamic offset) - it indicates fullness above
-          -->
-          <linearGradient :id="`gradient${star.raw}`">
-            <stop
-              id="stop1"
-              :offset="star.percent"
-              :stop-color="getFullFillColor(star)"
-              stop-opacity="1"
-            ></stop>
-            <stop
-              id="stop2"
-              :offset="star.percent"
-              :stop-color="getFullFillColor(star)"
-              stop-opacity="0"
-            ></stop>
-            <stop
-              id="stop3"
-              :offset="star.percent"
-              :stop-color="style.emptyStarColor"
-              stop-opacity="1"
-            ></stop>
-            <stop
-              id="stop4"
-              :stop-color="style.emptyStarColor"
-              offset="100%"
-              stop-opacity="1"
-            ></stop>
-          </linearGradient>
-        </defs>
-      </svg>
-    </div>
-    <div v-if="isIndicatorActive" class="indicator">{{ rating }}</div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'StarsRating',
-  components: {},
-  directives: {},
-  props: {
-    config: {
-      type: Object,
-      default: null,
-    },
-    rating: {
-      type: [Number],
-      default: 0,
-    },
-  },
-  data: function () {
-    return {
-      stars: [],
-      emptyStar: 0,
-      fullStar: 1,
-      totalStars: 5,
-      isIndicatorActive: false,
-      style: {
-        fullStarColor: '#F1C644',
-        emptyStarColor: '#D4D4D4',
-        starWidth: 20,
-        starHeight: 20,
-      },
-    }
-  },
-  computed: {
-    getStarPoints: function () {
-      let centerX = this.style.starWidth / 2
-      let centerY = this.style.starHeight / 2
-
-      let innerCircleArms = 5 // a 5 arms star
-
-      let innerRadius = this.style.starWidth / innerCircleArms
-      let innerOuterRadiusRatio = 2.5 // Unique value - determines fatness/sharpness of star
-      let outerRadius = innerRadius * innerOuterRadiusRatio
-
-      return this.calcStarPoints(
-        centerX,
-        centerY,
-        innerCircleArms,
-        innerRadius,
-        outerRadius
-      )
-    },
-  },
-  created() {
-    this.initStars()
-    this.setStars()
-    this.setConfigData()
-  },
-  methods: {
-    calcStarPoints(
-      centerX,
-      centerY,
-      innerCircleArms,
-      innerRadius,
-      outerRadius
-    ) {
-      let angle = Math.PI / innerCircleArms
-      let angleOffsetToCenterStar = 60
-
-      let totalArms = innerCircleArms * 2
-      let points = ''
-      for (let i = 0; i < totalArms; i++) {
-        let isEvenIndex = i % 2 == 0
-        let r = isEvenIndex ? outerRadius : innerRadius
-        let currX = centerX + Math.cos(i * angle + angleOffsetToCenterStar) * r
-        let currY = centerY + Math.sin(i * angle + angleOffsetToCenterStar) * r
-        points += currX + ',' + currY + ' '
-      }
-      return points
-    },
-    initStars() {
-      for (let i = 0; i < this.totalStars; i++) {
-        this.stars.push({
-          raw: this.emptyStar,
-          percent: this.emptyStar + '%',
-        })
-      }
-    },
-    setStars() {
-      let fullStarsCounter = Math.floor(this.rating)
-      for (let i = 0; i < this.stars.length; i++) {
-        if (fullStarsCounter !== 0) {
-          this.stars[i].raw = this.fullStar
-          this.stars[i].percent = this.calcStarFullness(this.stars[i])
-          fullStarsCounter--
-        } else {
-          let surplus = Math.round((this.rating % 1) * 10) / 10 // Support just one decimal
-          let roundedOneDecimalPoint = Math.round(surplus * 10) / 10
-          this.stars[i].raw = roundedOneDecimalPoint
-          return (this.stars[i].percent = this.calcStarFullness(this.stars[i]))
-        }
-      }
-    },
-    setConfigData() {
-      if (this.config) {
-        this.setBindedProp(this.style, this.config.style, 'fullStarColor')
-        this.setBindedProp(this.style, this.config.style, 'emptyStarColor')
-        this.setBindedProp(this.style, this.config.style, 'starWidth')
-        this.setBindedProp(this.style, this.config.style, 'starHeight')
-        if (this.config.isIndicatorActive) {
-          this.isIndicatorActive = this.config.isIndicatorActive
-        }
-        console.log('isIndicatorActive: ', this.isIndicatorActive)
-      }
-    },
-    getFullFillColor(starData) {
-      return starData.raw !== this.emptyStar
-        ? this.style.fullStarColor
-        : this.style.emptyStarColor
-    },
-    calcStarFullness(starData) {
-      let starFullnessPercent = starData.raw * 100 + '%'
-      return starFullnessPercent
-    },
-    setBindedProp(localProp, propParent, propToBind) {
-      if (propParent[propToBind]) {
-        localProp[propToBind] = propParent[propToBind]
-      }
-    },
-  },
-}
-</script>
-
-<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/components/base/BaseRecurringInvoiceStatusBadge.vue b/resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue
deleted file mode 100644
index 822ded96..00000000
--- a/resources/scripts/components/base/BaseRecurringInvoiceStatusBadge.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <span :class="badgeColorClasses">
-    <slot />
-  </span>
-</template>
-
-<script>
-import { computed } from 'vue'
-
-export default {
-  props: {
-    status: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-
-  setup(props) {
-    const badgeColorClasses = computed(() => {
-      switch (props.status) {
-        case 'COMPLETED':
-          return 'bg-green-500/25 px-2  py-1 text-sm  text-status-green uppercase font-normal text-center'
-        case 'ON_HOLD':
-          return 'bg-yellow-500/25 px-2  py-1 text-sm  text-status-yellow uppercase font-normal text-center'
-        case 'ACTIVE':
-          return 'bg-blue-400/25 px-2  py-1 text-sm  text-status-blue uppercase font-normal text-center'
-        default:
-          return 'bg-surface-secondary0/25 px-2 py-1 text-sm  text-heading uppercase font-normal text-center'
-      }
-    })
-    return { badgeColorClasses }
-  },
-}
-</script>
diff --git a/resources/scripts/components/base/BaseRecurringInvoiceStatusLabel.vue b/resources/scripts/components/base/BaseRecurringInvoiceStatusLabel.vue
deleted file mode 100644
index f461f227..00000000
--- a/resources/scripts/components/base/BaseRecurringInvoiceStatusLabel.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  {{ labelStatus }}
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const props = defineProps({
-  status: {
-    type: String,
-    required: false,
-    default: '',
-  },
-})
-
-const labelStatus = computed(() => {
-  switch (props.status) {
-    case 'COMPLETED':
-      return t('recurring_invoices.complete')
-    case 'ON_HOLD':
-      return t('recurring_invoices.on_hold')
-    case 'ACTIVE':
-      return t('recurring_invoices.active')
-    default:
-      return props.status
-  }
-})
-</script>
diff --git a/resources/scripts/components/base/BaseScrollPane.vue b/resources/scripts/components/base/BaseScrollPane.vue
deleted file mode 100644
index 540e86da..00000000
--- a/resources/scripts/components/base/BaseScrollPane.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<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/components/base/BaseSelectAction.vue b/resources/scripts/components/base/BaseSelectAction.vue
deleted file mode 100644
index 2c9adcd1..00000000
--- a/resources/scripts/components/base/BaseSelectAction.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div
-    class="
-      flex
-      items-center
-      justify-center
-      w-full
-      px-6
-      py-2
-      text-sm
-      bg-surface-muted
-      cursor-pointer
-      text-primary-400
-    "
-  >
-    <slot />
-  </div>
-</template>
diff --git a/resources/scripts/components/base/BaseSelectInput.vue b/resources/scripts/components/base/BaseSelectInput.vue
deleted file mode 100644
index 9e9a25b0..00000000
--- a/resources/scripts/components/base/BaseSelectInput.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<template>
-  <BaseContentPlaceholders v-if="contentLoading">
-    <BaseContentPlaceholdersBox :rounded="true" class="w-full h-10" />
-  </BaseContentPlaceholders>
-  <Listbox
-    v-else
-    v-model="selectedValue"
-    as="div"
-    v-bind="{
-      ...$attrs,
-    }"
-  >
-    <ListboxLabel
-      v-if="label"
-      class="block text-sm not-italic font-medium text-heading mb-0.5"
-    >
-      {{ label }}
-    </ListboxLabel>
-
-    <div class="relative">
-      <!-- Select Input button -->
-      <ListboxButton
-        class="
-          relative
-          w-full
-          py-2
-          pl-3
-          pr-10
-          text-left
-          bg-surface
-          border border-line-default
-          rounded-md
-          shadow-xs
-          cursor-default
-          focus:outline-hidden
-          focus:ring-1
-          focus:ring-primary-500
-          focus:border-primary-500
-          sm:text-sm
-        "
-      >
-        <span v-if="getValue(selectedValue)" class="block truncate">
-          {{ getValue(selectedValue) }}
-        </span>
-        <span v-else-if="placeholder" class="block text-subtle truncate">
-          {{ placeholder }}
-        </span>
-        <span v-else class="block text-subtle truncate">
-          Please select an option
-        </span>
-
-        <span
-          class="
-            absolute
-            inset-y-0
-            right-0
-            flex
-            items-center
-            pr-2
-            pointer-events-none
-          "
-        >
-          <BaseIcon
-            name="SelectorIcon"
-            class="text-subtle"
-            aria-hidden="true"
-          />
-        </span>
-      </ListboxButton>
-
-      <transition
-        leave-active-class="transition duration-100 ease-in"
-        leave-from-class="opacity-100"
-        leave-to-class="opacity-0"
-      >
-        <ListboxOptions
-          class="
-            absolute
-            z-10
-            w-full
-            py-1
-            mt-1
-            overflow-auto
-            text-base
-            bg-surface
-            rounded-md
-            shadow-lg
-            max-h-60
-            ring-1 ring-black/5
-            focus:outline-hidden
-            sm:text-sm
-          "
-        >
-          <ListboxOption
-            v-for="option in options"
-            v-slot="{ active, selected }"
-            :key="option.id"
-            :value="option"
-            as="template"
-          >
-            <li
-              :class="[
-                active ? 'text-white bg-primary-600' : 'text-heading',
-                'cursor-default select-none relative py-2 pl-3 pr-9',
-              ]"
-            >
-              <span
-                :class="[
-                  selected ? 'font-semibold' : 'font-normal',
-                  'block truncate',
-                ]"
-              >
-                {{ getValue(option) }}
-              </span>
-
-              <span
-                v-if="selected"
-                :class="[
-                  active ? 'text-white' : 'text-primary-600',
-                  'absolute inset-y-0 right-0 flex items-center pr-4',
-                ]"
-              >
-                <BaseIcon name="CheckIcon" aria-hidden="true" />
-              </span>
-            </li>
-          </ListboxOption>
-          <slot />
-        </ListboxOptions>
-      </transition>
-    </div>
-  </Listbox>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import {
-  Listbox,
-  ListboxButton,
-  ListboxLabel,
-  ListboxOption,
-  ListboxOptions,
-} from '@headlessui/vue'
-
-const props = defineProps({
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-  modelValue: {
-    type: [String, Number, Boolean, Object, Array],
-    default: '',
-  },
-  options: {
-    type: Array,
-    required: true,
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  labelKey: {
-    type: [String],
-    default: 'label',
-  },
-  valueProp: {
-    type: String,
-    default: null,
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-let selectedValue = ref(props.modelValue)
-
-function isObject(val) {
-  return typeof val === 'object' && val !== null
-}
-
-function getValue(val) {
-  if (isObject(val)) {
-    return val[props.labelKey]
-  }
-  return val
-}
-
-watch(
-  () => props.modelValue,
-  () => {
-    if (props.valueProp && props.options.length) {
-      selectedValue.value = props.options.find((val) => {
-        if (val[props.valueProp]) {
-          return val[props.valueProp] === props.modelValue
-        }
-      })
-    } else {
-      selectedValue.value = props.modelValue
-    }
-  }
-)
-
-watch(selectedValue, (val) => {
-  if (props.valueProp) {
-    emit('update:modelValue', val[props.valueProp])
-  } else {
-    emit('update:modelValue', val)
-  }
-})
-</script>
diff --git a/resources/scripts/components/base/BaseSettingCard.vue b/resources/scripts/components/base/BaseSettingCard.vue
deleted file mode 100644
index 2af8c7cf..00000000
--- a/resources/scripts/components/base/BaseSettingCard.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <BaseCard>
-    <div class="flex flex-wrap justify-between lg:flex-nowrap mb-5">
-      <div>
-        <h6 class="font-medium text-lg text-left">
-          {{ title }}
-        </h6>
-
-        <p
-          class="
-            mt-2
-            text-sm
-            leading-snug
-            text-left text-muted
-            max-w-[680px]
-          "
-        >
-          {{ description }}
-        </p>
-      </div>
-
-      <div class="mt-4 lg:mt-0 lg:ml-2">
-        <slot name="action" />
-      </div>
-    </div>
-
-    <slot />
-  </BaseCard>
-</template>
-
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/BaseSpinner.vue b/resources/scripts/components/base/BaseSpinner.vue
deleted file mode 100644
index c7a139ca..00000000
--- a/resources/scripts/components/base/BaseSpinner.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<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"
-    ></circle>
-    <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"
-    ></path>
-  </svg>
-</template>
-
diff --git a/resources/scripts/components/base/BaseSwitch.vue b/resources/scripts/components/base/BaseSwitch.vue
deleted file mode 100644
index aab73dee..00000000
--- a/resources/scripts/components/base/BaseSwitch.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <SwitchGroup>
-    <div class="flex flex-row items-start">
-      <SwitchLabel v-if="labelLeft" class="mr-4 cursor-pointer">{{
-        labelLeft
-      }}</SwitchLabel>
-
-      <Switch
-        v-model="enabled"
-        :class="enabled ? 'bg-primary-500' : 'bg-surface-muted'"
-        class="
-          relative
-          inline-flex
-          items-center
-          h-6
-          transition-colors
-          rounded-full
-          w-11
-          focus:outline-hidden focus:ring-primary-500
-        "
-        v-bind="$attrs"
-      >
-        <span
-          :class="enabled ? 'translate-x-6' : 'translate-x-1'"
-          class="
-            inline-block
-            w-4
-            h-4
-            transition-transform
-            bg-white
-            rounded-full
-          "
-        />
-      </Switch>
-
-      <SwitchLabel v-if="labelRight" class="ml-4 cursor-pointer">{{
-        labelRight
-      }}</SwitchLabel>
-    </div>
-  </SwitchGroup>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
-
-const props = defineProps({
-  labelLeft: {
-    type: String,
-    default: '',
-  },
-  labelRight: {
-    type: String,
-    default: '',
-  },
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const enabled = computed({
-  get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value),
-})
-</script>
diff --git a/resources/scripts/components/base/BaseSwitchSection.vue b/resources/scripts/components/base/BaseSwitchSection.vue
deleted file mode 100644
index 3201bddd..00000000
--- a/resources/scripts/components/base/BaseSwitchSection.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-
-
-<template>
-  <SwitchGroup as="li" class="py-4 flex items-center justify-between">
-    <div class="flex flex-col">
-      <SwitchLabel
-        as="p"
-        class="p-0 mb-1 text-sm leading-snug text-heading font-medium"
-        passive
-      >
-        {{ title }}
-      </SwitchLabel>
-      <SwitchDescription class="text-sm text-muted">
-        {{ description }}
-      </SwitchDescription>
-    </div>
-    <Switch
-      :disabled="disabled"
-      :model-value="modelValue"
-      :class="[
-        modelValue ? 'bg-primary-500' : 'bg-surface-muted',
-        'ml-4 relative inline-flex shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-primary-500',
-      ]"
-      @update:modelValue="onUpdate"
-    >
-      <span
-        aria-hidden="true"
-        :class="[
-          modelValue ? 'translate-x-5' : 'translate-x-0',
-          'inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200',
-        ]"
-      />
-    </Switch>
-  </SwitchGroup>
-</template>
-
-<script setup>
-import {
-  Switch,
-  SwitchDescription,
-  SwitchGroup,
-  SwitchLabel,
-} from '@headlessui/vue'
-
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-function onUpdate(value) {
-  emit('update:modelValue', value)
-}
-</script>
diff --git a/resources/scripts/components/base/BaseTab.vue b/resources/scripts/components/base/BaseTab.vue
deleted file mode 100644
index eebc8143..00000000
--- a/resources/scripts/components/base/BaseTab.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <TabPanel :class="[tabPanelContainer, 'focus:outline-hidden']">
-    <!-- focus:ring-1 focus:ring-jet focus:ring-opacity-60 -->
-    <slot />
-  </TabPanel>
-</template>
-
-<script setup>
-import { TabPanel } from '@headlessui/vue'
-
-const props = defineProps({
-  title: {
-    type: [String, Number],
-    default: 'Tab',
-  },
-  count: {
-    type: [String, Number],
-    default: '',
-  },
-  countVariant: {
-    type: [String, Number],
-    default: '',
-  },
-  tabPanelContainer: {
-    type: String,
-    default: 'py-4 mt-px',
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/BaseTabGroup.vue b/resources/scripts/components/base/BaseTabGroup.vue
deleted file mode 100644
index 16b91bbd..00000000
--- a/resources/scripts/components/base/BaseTabGroup.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div>
-    <TabGroup :default-index="defaultIndex" @change="onChange">
-      <TabList
-        :class="[
-          'flex border-b border-line-default',
-          'relative overflow-x-auto overflow-y-hidden',
-          'lg:pb-0 lg:ml-0',
-        ]"
-      >
-        <Tab
-          v-for="(tab, index) in tabs"
-          v-slot="{ selected }"
-          :key="index"
-          as="template"
-        >
-          <button
-            :class="[
-              'px-8 py-2 text-sm leading-5 font-medium flex items-center relative border-b-2 mt-4 focus:outline-hidden whitespace-nowrap',
-              selected
-                ? ' border-primary-400 text-heading font-medium'
-                : 'border-transparent text-muted hover:text-body hover:border-line-strong',
-            ]"
-          >
-            {{ tab.title }}
-
-            <BaseBadge
-              v-if="tab.count"
-              class="!rounded-full overflow-hidden ml-2"
-              :variant="tab['count-variant']"
-              default-class="flex items-center justify-center w-5 h-5 p-1 rounded-full text-medium"
-            >
-              {{ tab.count }}
-            </BaseBadge>
-          </button>
-        </Tab>
-      </TabList>
-
-      <slot name="before-tabs" />
-
-      <TabPanels>
-        <slot />
-      </TabPanels>
-    </TabGroup>
-  </div>
-</template>
-
-<script setup>
-import { computed, useSlots } from 'vue'
-import { TabGroup, TabList, Tab, TabPanels } from '@headlessui/vue'
-
-const props = defineProps({
-  defaultIndex: {
-    type: Number,
-    default: 0,
-  },
-  filter: {
-    type: String,
-    default: null,
-  },
-})
-
-const emit = defineEmits(['change'])
-
-const slots = useSlots()
-
-const tabs = computed(() => slots.default().map((tab) => tab.props))
-
-function onChange(d) {
-  emit('change', tabs.value[d])
-}
-</script>
diff --git a/resources/scripts/components/base/BaseText.vue b/resources/scripts/components/base/BaseText.vue
deleted file mode 100644
index e44bfc5f..00000000
--- a/resources/scripts/components/base/BaseText.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <div class="whitespace-normal">
-    <BaseCustomTag :tag="tag" :title="props.text" class="line-clamp-1">
-      {{ displayText }}
-    </BaseCustomTag>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "vue"
-
-const props = defineProps({
-  tag: {
-    type: String,
-    default: 'div',
-  },
-
-  text: {
-    type: String,
-    default: '',
-  },
-
-  length: {
-    type: Number,
-    default: null,
-  }
-})
-
-const displayText = computed(() => {
-  if (props.length) {
-    return props.text.length <= props.length 
-      ? props.text 
-      : `${props.text.substring(0, props.length)}...`
-  }
-  return props.text
-})
-</script>
diff --git a/resources/scripts/components/base/BaseTextarea.vue b/resources/scripts/components/base/BaseTextarea.vue
deleted file mode 100644
index 6e835796..00000000
--- a/resources/scripts/components/base/BaseTextarea.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <BaseContentPlaceholders v-if="contentLoading">
-    <BaseContentPlaceholdersBox
-      :rounded="true"
-      class="w-full"
-      :style="`height: ${loadingPlaceholderSize}px`"
-    />
-  </BaseContentPlaceholders>
-
-  <textarea
-    v-else
-    v-bind="$attrs"
-    ref="textarea"
-    :value="modelValue"
-    :class="[defaultInputClass, inputBorderClass]"
-    :disabled="disabled"
-    @input="onInput"
-  />
-</template>
-
-<script setup>
-import { computed, onMounted, ref } from 'vue'
-
-const props = defineProps({
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-  row: {
-    type: Number,
-    default: null,
-  },
-  invalid: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-  defaultInputClass: {
-    type: String,
-    default:
-      'box-border w-full px-3 py-2 text-sm not-italic font-normal leading-snug text-left text-heading placeholder-subtle bg-surface border border-line-default border-solid rounded outline-hidden',
-  },
-  autosize: {
-    type: Boolean,
-    default: false,
-  },
-  borderless: {
-    type: Boolean,
-    default: false,
-  },
-})
-
-const textarea = ref(null)
-
-const inputBorderClass = computed(() => {
-  if (props.invalid && !props.borderless) {
-    return 'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400'
-  } else if (!props.borderless) {
-    return 'focus:ring-primary-400 focus:border-primary-400'
-  }
-
-  return 'border-none outline-hidden focus:ring-primary-400 focus:border focus:border-primary-400'
-})
-
-const loadingPlaceholderSize = computed(() => {
-  switch (props.row) {
-    case 2:
-      return '56'
-    case 4:
-      return '94'
-    default:
-      return '56'
-  }
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-function onInput(e) {
-  emit('update:modelValue', e.target.value)
-
-  if (props.autosize) {
-    e.target.style.height = 'auto'
-    e.target.style.height = `${e.target.scrollHeight}px`
-  }
-}
-
-onMounted(() => {
-  if (textarea.value && props.autosize) {
-    textarea.value.style.height = textarea.value.scrollHeight + 'px'
-
-    if (textarea.value.style.overflow && textarea.value.style.overflow.y) {
-      textarea.value.style.overflow.y = 'hidden'
-    }
-
-    textarea.value.style.resize = 'none'
-  }
-})
-</script>
diff --git a/resources/scripts/components/base/BaseTimePicker.vue b/resources/scripts/components/base/BaseTimePicker.vue
deleted file mode 100644
index 0a52f85f..00000000
--- a/resources/scripts/components/base/BaseTimePicker.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <BaseContentPlaceholders v-if="contentLoading">
-    <BaseContentPlaceholdersBox
-      :rounded="true"
-      :class="`w-full ${computedContainerClass}`"
-      style="height: 38px"
-    />
-  </BaseContentPlaceholders>
-
-  <div v-else :class="computedContainerClass" class="relative flex flex-row">
-    <svg
-      v-if="clockIcon && !hasIconSlot"
-      xmlns="http://www.w3.org/2000/svg"
-      class="
-        absolute
-        top-px
-        w-4
-        h-4
-        mx-2
-        my-2.5
-        text-sm
-        not-italic
-        font-black
-        text-subtle
-        cursor-pointer
-      "
-      viewBox="0 0 20 20"
-      fill="currentColor"
-      @click="onClickPicker"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"
-        clip-rule="evenodd"
-      />
-    </svg>
-
-    <slot v-if="clockIcon && hasIconSlot" name="icon" />
-
-    <FlatPickr
-      ref="dpt"
-      v-model="time"
-      v-bind="$attrs"
-      :disabled="disabled"
-      :config="config"
-      :class="[defaultInputClass, inputInvalidClass, inputDisabledClass]"
-    />
-  </div>
-</template>
-
-<script setup>
-import FlatPickr from 'vue-flatpickr-component'
-import 'flatpickr/dist/flatpickr.css'
-import { computed, reactive, useSlots, ref } from 'vue'
-const dpt = ref(null)
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Date],
-    default: () => moment(new Date()),
-  },
-  contentLoading: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    default: null,
-  },
-  invalid: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  containerClass: {
-    type: String,
-    default: '',
-  },
-  clockIcon: {
-    type: Boolean,
-    default: true,
-  },
-  defaultInputClass: {
-    type: String,
-    default:
-      'font-base pl-8 py-2 outline-hidden focus:ring-primary-400 focus:outline-hidden focus:border-primary-400 block w-full sm:text-sm border-line-strong rounded-md text-heading',
-  },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const slots = useSlots()
-
-let config = reactive({
-  enableTime: true,
-  noCalendar: true,
-  dateFormat: 'H:i',
-  time_24hr: true,
-})
-
-const time = computed({
-  get: () => props.modelValue,
-  set: (value) => emit('update:modelValue', value),
-})
-
-const hasIconSlot = computed(() => {
-  return !!slots.icon
-})
-
-function onClickPicker(params) {
-  dpt.value.fp.open()
-}
-
-const computedContainerClass = computed(() => {
-  let containerClass = `${props.containerClass} `
-
-  return containerClass
-})
-
-const inputInvalidClass = computed(() => {
-  if (props.invalid) {
-    return 'border-red-400 ring-red-400 focus:ring-red-400 focus:border-red-400'
-  }
-
-  return ''
-})
-
-const inputDisabledClass = computed(() => {
-  if (props.disabled) {
-    return 'border border-solid rounded-md outline-hidden input-field box-border-2 base-date-picker-input placeholder-subtle bg-surface-muted text-body border-line-strong'
-  }
-
-  return ''
-})
-</script>
diff --git a/resources/scripts/components/base/BaseWizard.vue b/resources/scripts/components/base/BaseWizard.vue
deleted file mode 100644
index 0a389ffb..00000000
--- a/resources/scripts/components/base/BaseWizard.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="w-full">
-    <slot name="nav">
-      <WizardNavigation
-        :current-step="currentStep"
-        :steps="steps"
-        @click="(stepIndex) => $emit('click', stepIndex)"
-      />
-    </slot>
-
-    <div :class="wizardStepsContainerClass">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import WizardNavigation from './BaseWizardNavigation.vue'
-
-const props = defineProps({
-  wizardStepsContainerClass: {
-    type: String,
-    default: 'relative flex items-center justify-center',
-  },
-  currentStep: {
-    type: Number,
-    default: 0,
-  },
-  steps: {
-    type: Number,
-    default: 0,
-  },
-})
-
-const emit = defineEmits(['click'])
-</script>
diff --git a/resources/scripts/components/base/BaseWizardNavigation.vue b/resources/scripts/components/base/BaseWizardNavigation.vue
deleted file mode 100644
index e33289af..00000000
--- a/resources/scripts/components/base/BaseWizardNavigation.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <div
-    :class="containerClass"
-    class="
-      relative
-      after:bg-surface-muted
-      after:absolute
-      after:transform
-      after:top-1/2
-      after:-translate-y-1/2
-      after:h-2
-      after:w-full
-    "
-  >
-    <a
-      v-for="(number, index) in steps"
-      :key="index"
-      :class="stepStyle(index)"
-      class="z-10"
-      href="#"
-      @click.prevent="$emit('click', index)"
-    >
-      <svg
-        v-if="currentStep > index"
-        :class="iconClass"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        @click="$emit('click', index)"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-          clip-rule="evenodd"
-        ></path>
-      </svg>
-    </a>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    currentStep: {
-      type: Number,
-      default: null,
-    },
-    steps: {
-      type: Number,
-      default: null,
-    },
-    containerClass: {
-      type: String,
-      default: 'flex justify-between w-full my-10 max-w-xl mx-auto',
-    },
-    progress: {
-      type: String,
-      default: 'rounded-full float-left w-6 h-6 border-4 cursor-pointer',
-    },
-    currentStepClass: {
-      type: String,
-      default: 'bg-white border-primary-500',
-    },
-    nextStepClass: {
-      type: String,
-      default: 'border-line-default bg-surface',
-    },
-    previousStepClass: {
-      type: String,
-      default:
-        'bg-primary-500 border-primary-500 flex justify-center items-center',
-    },
-    iconClass: {
-      type: String,
-      default:
-        'flex items-center justify-center w-full h-full text-sm font-black text-center text-white',
-    },
-  },
-
-  emits: ['click'],
-
-  setup(props) {
-    function stepStyle(number) {
-      if (props.currentStep === number) {
-        return [props.currentStepClass, props.progress]
-      }
-      if (props.currentStep > number) {
-        return [props.previousStepClass, props.progress]
-      }
-      if (props.currentStep < number) {
-        return [props.nextStepClass, props.progress]
-      }
-      return [props.progress]
-    }
-
-    return {
-      stepStyle,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/components/base/BaseWizardStep.vue b/resources/scripts/components/base/BaseWizardStep.vue
deleted file mode 100644
index 00de8cb4..00000000
--- a/resources/scripts/components/base/BaseWizardStep.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div :class="stepContainerClass">
-    <div v-if="title || description">
-      <p v-if="title" :class="stepTitleClass">
-        {{ title }}
-      </p>
-      <p v-if="description" :class="stepDescriptionClass">
-        {{ description }}
-      </p>
-    </div>
-    <slot />
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  title: {
-    type: String,
-    default: null,
-  },
-  description: {
-    type: String,
-    default: null,
-  },
-  stepContainerClass: {
-    type: String,
-    default:
-      'w-full p-8 mb-8 bg-surface border border-line-default border-solid rounded',
-  },
-  stepTitleClass: {
-    type: String,
-    default: 'text-2xl not-italic font-semibold leading-7 text-heading',
-  },
-  stepDescriptionClass: {
-    type: String,
-    default:
-      'w-full mt-2.5 mb-8 text-sm not-italic leading-snug text-muted lg:w-7/12 md:w-7/12 sm:w-7/12',
-  },
-})
-</script>
diff --git a/resources/scripts/components/base/base-editor/BaseEditor.vue b/resources/scripts/components/base/base-editor/BaseEditor.vue
deleted file mode 100644
index e8311670..00000000
--- a/resources/scripts/components/base/base-editor/BaseEditor.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<template>
-  <BaseContentPlaceholders v-if="contentLoading">
-    <BaseContentPlaceholdersBox
-      :rounded="true"
-      class="w-full"
-      style="height: 200px"
-    />
-  </BaseContentPlaceholders>
-  <div
-    v-else
-    class="box-border w-full text-sm leading-8 text-left bg-surface border border-line-light rounded-xl shadow min-h-[200px] overflow-hidden"
-  >
-    <div v-if="editor" class="editor-content">
-      <div class="flex justify-end p-2 border-b border-line-light md:hidden">
-        <BaseDropdown width-class="w-48">
-          <template #activator>
-            <div
-              class="flex items-center justify-center w-6 h-6 ml-2 text-sm text-heading bg-surface rounded-xs md:h-9 md:w-9"
-            >
-              <EllipsisVerticalIcon class="w-6 h-6 text-body" />
-            </div>
-          </template>
-          <div class="flex flex-wrap space-x-1">
-            <button
-              v-for="button in editorButtons"
-              type="button"
-              :key="button.name"
-              class="p-1 rounded hover:bg-surface-tertiary"
-              @click="button.action"
-            >
-              <component
-                :is="button.icon"
-                v-if="button.icon"
-                class="w-4 h-4 text-body fill-current text-body"
-              />
-              <span v-else-if="button.text" class="px-1 text-sm font-medium text-body">
-                {{ button.text }}
-              </span>
-            </button>
-          </div>
-        </BaseDropdown>
-      </div>
-      <div class="hidden p-2 border-b border-line-light md:flex">
-        <div class="flex flex-wrap space-x-1">
-          <button
-              v-for="button in editorButtons"
-              type="button"
-              :key="button.name"
-              class="p-1 rounded hover:bg-surface-tertiary"
-              @click="button.action"
-            >
-              <component
-                :is="button.icon"
-                v-if="button.icon"
-                class="w-4 h-4 text-body fill-current text-body"
-              />
-              <span v-else-if="button.text" class="px-1 text-sm font-medium text-body">
-                {{ button.text }}
-              </span>
-            </button>
-        </div>
-      </div>
-      <editor-content
-        :editor="editor"
-        class="box-border relative w-full text-sm leading-8 text-left editor__content"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, onUnmounted, watch, markRaw } from 'vue'
-import { useEditor, EditorContent } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
-import TextAlign from '@tiptap/extension-text-align'
-import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
-import {
-  BoldIcon,
-  CodingIcon,
-  ItalicIcon,
-  ListIcon,
-  ListUlIcon,
-  ParagraphIcon,
-  QuoteIcon,
-  StrikethroughIcon,
-  UndoIcon,
-  RedoIcon,
-  CodeBlockIcon,
-  MenuCenterIcon,
-} from './icons/index.js'
-import { Bars3BottomLeftIcon, Bars3BottomRightIcon, Bars3Icon, LinkIcon } from '@heroicons/vue/24/solid'
-
-export default {
-  components: {
-    EditorContent,
-    EllipsisVerticalIcon,
-  },
-
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-    },
-    contentLoading: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: ['update:modelValue'],
-
-  setup(props, { emit }) {
-    const editor = useEditor({
-      content: props.modelValue,
-      extensions: [
-        StarterKit.configure({
-          link: { openOnClick: false },
-        }),
-        TextAlign.configure({
-          types: ['heading', 'paragraph'],
-          alignments: ['left', 'right', 'center', 'justify'],
-        }),
-      ],
-      onUpdate: ({ editor }) => {
-        emit('update:modelValue', editor.getHTML())
-      },
-    })
-
-    const editorButtons = ref([
-      { name: 'bold', icon: markRaw(BoldIcon), action: () => editor.value.chain().focus().toggleBold().run() },
-      { name: 'italic', icon: markRaw(ItalicIcon), action: () => editor.value.chain().focus().toggleItalic().run() },
-      { name: 'strike', icon: markRaw(StrikethroughIcon), action: () => editor.value.chain().focus().toggleStrike().run() },
-      { name: 'code', icon: markRaw(CodingIcon), action: () => editor.value.chain().focus().toggleCode().run() },
-      { name: 'paragraph', icon: markRaw(ParagraphIcon), action: () => editor.value.chain().focus().setParagraph().run() },
-      { name: 'h1', text: 'H1', action: () => editor.value.chain().focus().toggleHeading({ level: 1 }).run() },
-      { name: 'h2', text: 'H2', action: () => editor.value.chain().focus().toggleHeading({ level: 2 }).run() },
-      { name: 'h3', text: 'H3', action: () => editor.value.chain().focus().toggleHeading({ level: 3 }).run() },
-      { name: 'bulletList', icon: markRaw(ListUlIcon), action: () => editor.value.chain().focus().toggleBulletList().run() },
-      { name: 'orderedList', icon: markRaw(ListIcon), action: () => editor.value.chain().focus().toggleOrderedList().run() },
-      { name: 'blockquote', icon: markRaw(QuoteIcon), action: () => editor.value.chain().focus().toggleBlockquote().run() },
-      { name: 'codeBlock', icon: markRaw(CodeBlockIcon), action: () => editor.value.chain().focus().toggleCodeBlock().run() },
-      { name: 'undo', icon: markRaw(UndoIcon), action: () => editor.value.chain().focus().undo().run() },
-      { name: 'redo', icon: markRaw(RedoIcon), action: () => editor.value.chain().focus().redo().run() },
-      { name: 'alignLeft', icon: markRaw(Bars3BottomLeftIcon), action: () => editor.value.chain().focus().setTextAlign('left').run() },
-      { name: 'alignRight', icon: markRaw(Bars3BottomRightIcon), action: () => editor.value.chain().focus().setTextAlign('right').run() },
-      { name: 'alignJustify', icon: markRaw(Bars3Icon), action: () => editor.value.chain().focus().setTextAlign('justify').run() },
-      { name: 'alignCenter', icon: markRaw(MenuCenterIcon), action: () => editor.value.chain().focus().setTextAlign('center').run() },
-      { name: 'addLink', icon: markRaw(LinkIcon), action: () => {
-        const url = window.prompt('URL')
-        if (url) {
-          editor.value.chain().focus().setLink({ href: url }).run()
-        }
-      }},
-    ])
-
-    watch(() => props.modelValue, (newValue) => {
-      if (editor.value && newValue !== editor.value.getHTML()) {
-        editor.value.commands.setContent(newValue, false)
-      }
-    })
-
-    onUnmounted(() => {
-      if (editor.value) {
-        editor.value.destroy()
-      }
-    })
-
-    return {
-      editor,
-      editorButtons,
-    }
-  },
-}
-</script>
-
-<style>
-@reference "../../../../css/invoiceshelf.css";
-
-.ProseMirror {
-  min-height: 200px;
-  padding: 8px 12px;
-  outline: none;
-  @apply rounded-xl rounded-tl-none rounded-tr-none border border-transparent;
-
-  h1 {
-    font-size: 2em;
-    font-weight: bold;
-  }
-
-  h2 {
-    font-size: 1.5em;
-    font-weight: bold;
-  }
-
-  h3 {
-    font-size: 1.17em;
-    font-weight: bold;
-  }
-
-  ul {
-    padding: 0 1rem;
-    list-style: disc !important;
-  }
-
-  ol {
-    padding: 0 1rem;
-    list-style: auto !important;
-  }
-
-  blockquote {
-    padding-left: 1rem;
-    border-left: 2px solid var(--color-line-default);
-  }
-
-  code {
-    background-color: rgba(97, 97, 97, 0.1);
-    color: #616161;
-    border-radius: 0.4rem;
-    font-size: 0.9rem;
-    padding: 0.1rem 0.3rem;
-  }
-
-  pre {
-    background: #0d0d0d;
-    color: #fff;
-    font-family: 'JetBrainsMono', monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
-
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
-    }
-  }
-
-  a {
-    color: var(--color-primary-500);
-    text-decoration: underline;
-  }
-}
-
-.ProseMirror:focus {
-  @apply border border-primary-400 ring-primary-400;
-}
-</style>
diff --git a/resources/scripts/components/base/base-editor/icons/BoldIcon.vue b/resources/scripts/components/base/base-editor/icons/BoldIcon.vue
deleted file mode 100644
index b73af841..00000000
--- a/resources/scripts/components/base/base-editor/icons/BoldIcon.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      d="M17.194 10.962A6.271 6.271 0 0012.844.248H4.3a1.25 1.25 0 000 2.5h1.013a.25.25 0 01.25.25V21a.25.25 0 01-.25.25H4.3a1.25 1.25 0 100 2.5h9.963a6.742 6.742 0 002.93-12.786zm-4.35-8.214a3.762 3.762 0 010 7.523H8.313a.25.25 0 01-.25-.25V3a.25.25 0 01.25-.25zm1.42 18.5H8.313a.25.25 0 01-.25-.25v-7.977a.25.25 0 01.25-.25h5.951a4.239 4.239 0 010 8.477z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/base/base-editor/icons/CodeBlockIcon.vue b/resources/scripts/components/base/base-editor/icons/CodeBlockIcon.vue
deleted file mode 100644
index e1a9524e..00000000
--- a/resources/scripts/components/base/base-editor/icons/CodeBlockIcon.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      d="M9.147 21.552a1.244 1.244 0 01-.895-.378L.84 13.561a2.257 2.257 0 010-3.125l7.412-7.613a1.25 1.25 0 011.791 1.744l-6.9 7.083a.5.5 0 000 .7l6.9 7.082a1.25 1.25 0 01-.9 2.122zm5.707 0a1.25 1.25 0 01-.9-2.122l6.9-7.083a.5.5 0 000-.7l-6.9-7.082a1.25 1.25 0 011.791-1.744l7.411 7.612a2.257 2.257 0 010 3.125l-7.412 7.614a1.244 1.244 0 01-.89.38zm6.514-9.373z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/base/base-editor/icons/CodingIcon.vue b/resources/scripts/components/base/base-editor/icons/CodingIcon.vue
deleted file mode 100644
index e1a9524e..00000000
--- a/resources/scripts/components/base/base-editor/icons/CodingIcon.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      d="M9.147 21.552a1.244 1.244 0 01-.895-.378L.84 13.561a2.257 2.257 0 010-3.125l7.412-7.613a1.25 1.25 0 011.791 1.744l-6.9 7.083a.5.5 0 000 .7l6.9 7.082a1.25 1.25 0 01-.9 2.122zm5.707 0a1.25 1.25 0 01-.9-2.122l6.9-7.083a.5.5 0 000-.7l-6.9-7.082a1.25 1.25 0 011.791-1.744l7.411 7.612a2.257 2.257 0 010 3.125l-7.412 7.614a1.244 1.244 0 01-.89.38zm6.514-9.373z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/base/base-editor/icons/ItalicIcon.vue b/resources/scripts/components/base/base-editor/icons/ItalicIcon.vue
deleted file mode 100644
index 180bcaf0..00000000
--- a/resources/scripts/components/base/base-editor/icons/ItalicIcon.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      d="M22.5.248h-7.637a1.25 1.25 0 000 2.5h1.086a.25.25 0 01.211.384L4.78 21.017a.5.5 0 01-.422.231H1.5a1.25 1.25 0 000 2.5h7.637a1.25 1.25 0 000-2.5H8.051a.25.25 0 01-.211-.384L19.22 2.98a.5.5 0 01.422-.232H22.5a1.25 1.25 0 000-2.5z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/base/base-editor/icons/ListIcon.vue b/resources/scripts/components/base/base-editor/icons/ListIcon.vue
deleted file mode 100644
index 8a1af92d..00000000
--- a/resources/scripts/components/base/base-editor/icons/ListIcon.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      d="M7.75 4.5h15a1 1 0 000-2h-15a1 1 0 000 2zm15 6.5h-15a1 1 0 100 2h15a1 1 0 000-2zm0 8.5h-15a1 1 0 000 2h15a1 1 0 000-2zM2.212 17.248a2 2 0 00-1.933 1.484.75.75 0 101.45.386.5.5 0 11.483.63.75.75 0 100 1.5.5.5 0 11-.482.635.75.75 0 10-1.445.4 2 2 0 103.589-1.648.251.251 0 010-.278 2 2 0 00-1.662-3.111zm2.038-6.5a2 2 0 00-4 0 .75.75 0 001.5 0 .5.5 0 011 0 1.031 1.031 0 01-.227.645L.414 14.029A.75.75 0 001 15.248h2.5a.75.75 0 000-1.5h-.419a.249.249 0 01-.195-.406L3.7 12.33a2.544 2.544 0 00.55-1.582zM4 5.248h-.25A.25.25 0 013.5 5V1.623A1.377 1.377 0 002.125.248H1.5a.75.75 0 000 1.5h.25A.25.25 0 012 2v3a.25.25 0 01-.25.25H1.5a.75.75 0 000 1.5H4a.75.75 0 000-1.5z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/base/base-editor/icons/ListUlIcon.vue b/resources/scripts/components/base/base-editor/icons/ListUlIcon.vue
deleted file mode 100644
index 39cf6749..00000000
--- a/resources/scripts/components/base/base-editor/icons/ListUlIcon.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <circle cx="2.5" cy="3.998" r="2.5"></circle>
-    <path d="M8.5 5H23a1 1 0 000-2H8.5a1 1 0 000 2z"></path>
-    <circle cx="2.5" cy="11.998" r="2.5"></circle>
-    <path d="M23 11H8.5a1 1 0 000 2H23a1 1 0 000-2z"></path>
-    <circle cx="2.5" cy="19.998" r="2.5"></circle>
-    <path d="M23 19H8.5a1 1 0 000 2H23a1 1 0 000-2z"></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/base/base-editor/icons/MenuCenterIcon.vue b/resources/scripts/components/base/base-editor/icons/MenuCenterIcon.vue
deleted file mode 100644
index 2095a60b..00000000
--- a/resources/scripts/components/base/base-editor/icons/MenuCenterIcon.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      fill="currentColor"
-      fill-rule="evenodd"
-      d="M3.75 5.25h16.5a.75.75 0 1 1 0 1.5H3.75a.75.75 0 0 1 0-1.5zm4 4h8.5a.75.75 0 1 1 0 1.5h-8.5a.75.75 0 1 1 0-1.5zm-4 4h16.5a.75.75 0 1 1 0 1.5H3.75a.75.75 0 1 1 0-1.5zm4 4h8.5a.75.75 0 1 1 0 1.5h-8.5a.75.75 0 1 1 0-1.5z"
-    ></path>
-  </svg>
-</template>
-
-
diff --git a/resources/scripts/components/base/base-editor/icons/ParagraphIcon.vue b/resources/scripts/components/base/base-editor/icons/ParagraphIcon.vue
deleted file mode 100644
index 9b418b81..00000000
--- a/resources/scripts/components/base/base-editor/icons/ParagraphIcon.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      d="M22.5.248H7.228a6.977 6.977 0 100 13.954h2.318a.25.25 0 01.25.25V22.5a1.25 1.25 0 002.5 0V3a.25.25 0 01.25-.25h3.682a.25.25 0 01.25.25v19.5a1.25 1.25 0 002.5 0V3a.249.249 0 01.25-.25H22.5a1.25 1.25 0 000-2.5zM9.8 11.452a.25.25 0 01-.25.25H7.228a4.477 4.477 0 110-8.954h2.318A.25.25 0 019.8 3z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/base/base-editor/icons/QuoteIcon.vue b/resources/scripts/components/base/base-editor/icons/QuoteIcon.vue
deleted file mode 100644
index 59a53cc6..00000000
--- a/resources/scripts/components/base/base-editor/icons/QuoteIcon.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      d="M18.559 3.932a4.942 4.942 0 100 9.883 4.609 4.609 0 001.115-.141.25.25 0 01.276.368 6.83 6.83 0 01-5.878 3.523 1.25 1.25 0 000 2.5 9.71 9.71 0 009.428-9.95V8.873a4.947 4.947 0 00-4.941-4.941zm-12.323 0a4.942 4.942 0 000 9.883 4.6 4.6 0 001.115-.141.25.25 0 01.277.368 6.83 6.83 0 01-5.878 3.523 1.25 1.25 0 000 2.5 9.711 9.711 0 009.428-9.95V8.873a4.947 4.947 0 00-4.942-4.941z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/base/base-editor/icons/RedoIcon.vue b/resources/scripts/components/base/base-editor/icons/RedoIcon.vue
deleted file mode 100644
index 37268674..00000000
--- a/resources/scripts/components/base/base-editor/icons/RedoIcon.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      d="M22.608.161a.5.5 0 00-.545.108L19.472 2.86a.25.25 0 01-.292.045 12.537 12.537 0 00-12.966.865A12.259 12.259 0 006.1 23.632a1.25 1.25 0 001.476-2.018 9.759 9.759 0 01.091-15.809 10 10 0 019.466-1.1.25.25 0 01.084.409l-1.85 1.85a.5.5 0 00.354.853h6.7a.5.5 0 00.5-.5V.623a.5.5 0 00-.313-.462z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/base/base-editor/icons/StrikethroughIcon.vue b/resources/scripts/components/base/base-editor/icons/StrikethroughIcon.vue
deleted file mode 100644
index 109c2254..00000000
--- a/resources/scripts/components/base/base-editor/icons/StrikethroughIcon.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      d="M23.75 12.952A1.25 1.25 0 0022.5 11.7h-8.936a.492.492 0 01-.282-.09c-.722-.513-1.482-.981-2.218-1.432-2.8-1.715-4.5-2.9-4.5-4.863 0-2.235 2.207-2.569 3.523-2.569a4.54 4.54 0 013.081.764 2.662 2.662 0 01.447 1.99v.3a1.25 1.25 0 102.5 0v-.268a4.887 4.887 0 00-1.165-3.777C13.949.741 12.359.248 10.091.248c-3.658 0-6.023 1.989-6.023 5.069 0 2.773 1.892 4.512 4 5.927a.25.25 0 01-.139.458H1.5a1.25 1.25 0 000 2.5h10.977a.251.251 0 01.159.058 4.339 4.339 0 011.932 3.466c0 3.268-3.426 3.522-4.477 3.522-1.814 0-3.139-.405-3.834-1.173a3.394 3.394 0 01-.65-2.7 1.25 1.25 0 00-2.488-.246A5.76 5.76 0 004.4 21.753c1.2 1.324 3.114 2 5.688 2 4.174 0 6.977-2.42 6.977-6.022a6.059 6.059 0 00-.849-3.147.25.25 0 01.216-.377H22.5a1.25 1.25 0 001.25-1.255z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/base/base-editor/icons/UnderlineIcon.vue b/resources/scripts/components/base/base-editor/icons/UnderlineIcon.vue
deleted file mode 100644
index 0879e88e..00000000
--- a/resources/scripts/components/base/base-editor/icons/UnderlineIcon.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      d="M22.5 21.248h-21a1.25 1.25 0 000 2.5h21a1.25 1.25 0 000-2.5zM1.978 2.748h1.363a.25.25 0 01.25.25v8.523a8.409 8.409 0 0016.818 0V3a.25.25 0 01.25-.25h1.363a1.25 1.25 0 000-2.5H16.3a1.25 1.25 0 000 2.5h1.363a.25.25 0 01.25.25v8.523a5.909 5.909 0 01-11.818 0V3a.25.25 0 01.25-.25H7.7a1.25 1.25 0 100-2.5H1.978a1.25 1.25 0 000 2.5z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/base/base-editor/icons/UndoIcon.vue b/resources/scripts/components/base/base-editor/icons/UndoIcon.vue
deleted file mode 100644
index 387418ca..00000000
--- a/resources/scripts/components/base/base-editor/icons/UndoIcon.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg viewBox="0 0 24 24">
-    <path
-      d="M17.786 3.77a12.542 12.542 0 00-12.965-.865.249.249 0 01-.292-.045L1.937.269A.507.507 0 001.392.16a.5.5 0 00-.308.462v6.7a.5.5 0 00.5.5h6.7a.5.5 0 00.354-.854L6.783 5.115a.253.253 0 01-.068-.228.249.249 0 01.152-.181 10 10 0 019.466 1.1 9.759 9.759 0 01.094 15.809 1.25 1.25 0 001.473 2.016 12.122 12.122 0 005.013-9.961 12.125 12.125 0 00-5.127-9.9z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/base/base-editor/icons/index.js b/resources/scripts/components/base/base-editor/icons/index.js
deleted file mode 100644
index ba18b823..00000000
--- a/resources/scripts/components/base/base-editor/icons/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import UnderlineIcon from './UnderlineIcon.vue'
-import BoldIcon from './BoldIcon.vue'
-import CodingIcon from './CodingIcon.vue'
-import ItalicIcon from './ItalicIcon.vue'
-import ListIcon from './ListIcon.vue'
-import ListUlIcon from './ListUlIcon.vue'
-import ParagraphIcon from './ParagraphIcon.vue'
-import QuoteIcon from './QuoteIcon.vue'
-import StrikethroughIcon from './StrikethroughIcon.vue'
-import UndoIcon from './UndoIcon.vue'
-import RedoIcon from './RedoIcon.vue'
-import CodeBlockIcon from './CodeBlockIcon.vue'
-import MenuCenterIcon from './MenuCenterIcon.vue'
-
-export {
-  UnderlineIcon,
-  BoldIcon,
-  CodingIcon,
-  ItalicIcon,
-  ListIcon,
-  ListUlIcon,
-  ParagraphIcon,
-  QuoteIcon,
-  StrikethroughIcon,
-  UndoIcon,
-  RedoIcon,
-  CodeBlockIcon,
-  MenuCenterIcon
-}
diff --git a/resources/scripts/components/base/base-table/BaseTable.vue b/resources/scripts/components/base/base-table/BaseTable.vue
deleted file mode 100644
index d33d91f0..00000000
--- a/resources/scripts/components/base/base-table/BaseTable.vue
+++ /dev/null
@@ -1,368 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8 pb-4 lg:pb-0">
-      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-        <div
-          class="
-            relative
-            overflow-hidden
-            bg-surface/70 backdrop-blur-lg
-            border border-white/15
-            shadow-sm
-            rounded-xl
-          "
-        >
-          <slot name="header" />
-          <table :class="tableClass">
-            <thead :class="theadClass">
-              <tr>
-                <th
-                  v-for="column in tableColumns"
-                  :key="column.key"
-                  :class="[
-                    getThClass(column),
-                    {
-                      'text-bold text-heading': sort.fieldName === column.key,
-                    },
-                  ]"
-                  @click="changeSorting(column)"
-                >
-                  {{ column.label }}
-                  <span
-                    v-if="sort.fieldName === column.key && sort.order === 'asc'"
-                    class="asc-direction"
-                  >
-                    ↑
-                  </span>
-                  <span
-                    v-if="
-                      sort.fieldName === column.key && sort.order === 'desc'
-                    "
-                    class="desc-direction"
-                  >
-                    ↓
-                  </span>
-                </th>
-              </tr>
-            </thead>
-            <tbody
-              v-if="loadingType === 'placeholder' && (loading || isLoading)"
-            >
-              <tr
-                v-for="placeRow in placeholderCount"
-                :key="placeRow"
-                :class="placeRow % 2 === 0 ? 'bg-surface' : 'bg-surface-secondary'"
-              >
-                <td
-                  v-for="column in columns"
-                  :key="column.key"
-                  class=""
-                  :class="getTdClass(column)"
-                >
-                  <base-content-placeholders
-                    :class="getPlaceholderClass(column)"
-                    :rounded="true"
-                  >
-                    <base-content-placeholders-text
-                      class="w-full h-6"
-                      :lines="1"
-                    />
-                  </base-content-placeholders>
-                </td>
-              </tr>
-            </tbody>
-            <tbody v-else>
-              <tr
-                v-for="(row, index) in sortedRows"
-                :key="row.data?.id ?? index"
-                :class="index % 2 === 0 ? 'bg-surface' : 'bg-surface-secondary'"
-              >
-                <td
-                  v-for="column in columns"
-                  :key="column.key"
-                  class=""
-                  :class="getTdClass(column)"
-                >
-                  <slot :name="'cell-' + column.key" :row="row">
-                    {{ lodashGet(row.data, column.key) }}
-                  </slot>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-
-          <div
-            v-if="loadingType === 'spinner' && (loading || isLoading)"
-            class="
-              absolute
-              top-0
-              left-0
-              z-10
-              flex
-              items-center
-              justify-center
-              w-full
-              h-full
-              bg-white/60
-            "
-          >
-            <SpinnerIcon class="w-10 h-10 text-primary-500" />
-          </div>
-
-          <div
-            v-else-if="
-              !loading && !isLoading && sortedRows && sortedRows.length === 0
-            "
-            class="
-              text-center text-muted
-              pb-2
-              flex
-              h-[160px]
-              justify-center
-              items-center
-              flex-col
-            "
-          >
-            <BaseIcon
-              name="ExclamationCircleIcon"
-              class="w-6 h-6 text-subtle"
-            />
-
-            <span class="block mt-1">{{ $t('general.no_data_found') }}</span>
-          </div>
-
-          <BaseTablePagination
-            v-if="pagination"
-            :pagination="pagination"
-            @pageChange="pageChange"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, onMounted, watch, ref, reactive } from 'vue'
-import { get } from 'lodash'
-import Row from './Row'
-import Column from './Column'
-import BaseTablePagination from './BaseTablePagination.vue'
-import SpinnerIcon from '@/scripts/components/icons/SpinnerIcon.vue'
-
-const props = defineProps({
-  columns: {
-    type: Array,
-    required: true,
-  },
-  data: {
-    type: [Array, Function],
-    required: true,
-  },
-  sortBy: { type: String, default: '' },
-  sortOrder: { type: String, default: '' },
-  tableClass: {
-    type: String,
-    default: 'min-w-full divide-y divide-line-default',
-  },
-  theadClass: { type: String, default: 'bg-surface-secondary' },
-  tbodyClass: { type: String, default: '' },
-  noResultsMessage: {
-    type: String,
-    default: 'No Results Found',
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  loadingType: {
-    type: String,
-    default: 'placeholder',
-    validator: function (value) {
-      return ['placeholder', 'spinner'].indexOf(value) !== -1
-    },
-  },
-  placeholderCount: {
-    type: Number,
-    default: 3,
-  },
-})
-
-const rows = ref([])
-let isLoading = ref(false)
-
-let tableColumns = reactive(props.columns.map((column) => new Column(column)))
-
-let sort = reactive({
-  fieldName: '',
-  order: '',
-})
-
-let pagination = ref('')
-
-const usesLocalData = computed(() => {
-  return Array.isArray(props.data)
-})
-
-const sortedRows = computed(() => {
-  if (!usesLocalData.value) {
-    return rows.value
-  }
-
-  if (sort.fieldName === '') {
-    return rows.value
-  }
-
-  if (tableColumns.length === 0) {
-    return rows.value
-  }
-
-  const sortColumn = getColumn(sort.fieldName)
-
-  if (!sortColumn) {
-    return rows.value
-  }
-
-  let sorted = [...rows.value].sort(
-    sortColumn.getSortPredicate(sort.order, tableColumns)
-  )
-
-  return sorted
-})
-
-function getColumn(columnName) {
-  return tableColumns.find((column) => column.key === columnName)
-}
-
-function getThClass(column) {
-  let classes =
-    'whitespace-nowrap px-6 py-3 text-left text-xs font-medium text-muted uppercase tracking-wider'
-
-  if (column.defaultThClass) {
-    classes = column.defaultThClass
-  }
-
-  if (column.sortable) {
-    classes = `${classes} cursor-pointer`
-  } else {
-    classes = `${classes} pointer-events-none`
-  }
-
-  if (column.thClass) {
-    classes = `${classes} ${column.thClass}`
-  }
-
-  return classes
-}
-
-function getTdClass(column) {
-  let classes = 'px-6 py-4 text-sm text-muted whitespace-nowrap'
-
-  if (column.defaultTdClass) {
-    classes = column.defaultTdClass
-  }
-
-  if (column.tdClass) {
-    classes = `${classes} ${column.tdClass}`
-  }
-
-  return classes
-}
-
-function getPlaceholderClass(column) {
-  let classes = 'w-full'
-
-  if (column.placeholderClass) {
-    classes = `${classes} ${column.placeholderClass}`
-  }
-
-  return classes
-}
-
-function prepareLocalData() {
-  pagination.value = null
-  return props.data
-}
-
-async function fetchServerData() {
-  const page = (pagination.value && pagination.value.currentPage) || 1
-
-  isLoading.value = true
-
-  const response = await props.data({
-    sort,
-    page,
-  })
-
-  isLoading.value = false
-
-  // Ignore stale responses: only apply if this is still the requested page
-  const currentPage = (pagination.value && pagination.value.currentPage) || 1
-  if (page !== currentPage) {
-    return null
-  }
-
-  pagination.value = response.pagination
-  return response.data
-}
-
-function changeSorting(column) {
-  if (sort.fieldName !== column.key) {
-    sort.fieldName = column.key
-    sort.order = 'asc'
-  } else {
-    sort.order = sort.order === 'asc' ? 'desc' : 'asc'
-  }
-
-  if (!usesLocalData.value) {
-    if (pagination.value)
-      pagination.value.currentPage = 1
-    mapDataToRows()
-  }
-}
-
-async function mapDataToRows() {
-  let data
-
-  if (usesLocalData.value) {
-    data = prepareLocalData()
-  } else {
-    data = await fetchServerData()
-    if (data === null) {
-      return
-    }
-  }
-
-  rows.value = data.map((rowData) => new Row(rowData, tableColumns))
-}
-
-async function pageChange(page) {
-  pagination.value.currentPage = page
-  await mapDataToRows()
-}
-
-async function refresh(isPreservePage = false) {
-  if (pagination.value && !isPreservePage)
-    pagination.value.currentPage = 1
-
-  await mapDataToRows()
-}
-
-function lodashGet(array, key) {
-  return get(array, key)
-}
-
-watch(
-  () => props.data,
-  () => {
-    mapDataToRows()
-  },
-  { deep: true }
-)
-
-onMounted(async () => {
-  await mapDataToRows()
-})
-
-defineExpose({ refresh })
-</script>
diff --git a/resources/scripts/components/base/base-table/BaseTablePagination.vue b/resources/scripts/components/base/base-table/BaseTablePagination.vue
deleted file mode 100644
index 1710e3d2..00000000
--- a/resources/scripts/components/base/base-table/BaseTablePagination.vue
+++ /dev/null
@@ -1,358 +0,0 @@
-<template>
-  <div
-    v-if="shouldShowPagination"
-    class="
-      flex
-      items-center
-      justify-between
-      px-4
-      py-3
-      bg-surface
-      border-t border-line-default
-      sm:px-6
-    "
-  >
-    <div class="flex justify-between flex-1 sm:hidden">
-      <a
-        href="#"
-        :class="{
-          'disabled cursor-normal pointer-events-none !bg-surface-tertiary !text-subtle':
-            pagination.currentPage === 1,
-        }"
-        class="
-          relative
-          inline-flex
-          items-center
-          px-4
-          py-2
-          text-sm
-          font-medium
-          text-body
-          bg-surface
-          border border-line-default
-          rounded-md
-          hover:bg-hover
-        "
-        @click="pageClicked(pagination.currentPage - 1)"
-      >
-        {{ $t('general.pagination.previous') }}
-      </a>
-      <a
-        href="#"
-        :class="{
-          'disabled cursor-default pointer-events-none !bg-surface-tertiary !text-subtle':
-            pagination.currentPage === pagination.totalPages,
-        }"
-        class="
-          relative
-          inline-flex
-          items-center
-          px-4
-          py-2
-          ml-3
-          text-sm
-          font-medium
-          text-body
-          bg-surface
-          border border-line-default
-          rounded-md
-          hover:bg-hover
-        "
-        @click="pageClicked(pagination.currentPage + 1)"
-      >
-        {{ $t('general.pagination.next') }}
-      </a>
-    </div>
-    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-      <div>
-        <p class="text-sm text-body">
-          {{ $t('general.pagination.showing') }}
-          {{ ' ' }}
-          <span
-            v-if="pagination.limit && pagination.currentPage"
-            class="font-medium"
-          >
-            {{
-              pagination.currentPage * pagination.limit - (pagination.limit - 1)
-            }}
-          </span>
-          {{ ' ' }}
-          {{ $t('general.pagination.to') }}
-          {{ ' ' }}
-          <span
-            v-if="pagination.limit && pagination.currentPage"
-            class="font-medium"
-          >
-            <span
-              v-if="
-                pagination.currentPage * pagination.limit <=
-                pagination.totalCount
-              "
-            >
-              {{ pagination.currentPage * pagination.limit }}
-            </span>
-            <span v-else>
-              {{ pagination.totalCount }}
-            </span>
-          </span>
-          {{ ' ' }}
-          {{ $t('general.pagination.of') }}
-          {{ ' ' }}
-          <span v-if="pagination.totalCount" class="font-medium">
-            {{ pagination.totalCount }}
-          </span>
-          {{ ' ' }}
-          {{ $t('general.pagination.results') }}
-        </p>
-      </div>
-      <div>
-        <nav
-          class="relative z-0 inline-flex -space-x-px rounded-lg shadow-sm"
-          aria-label="Pagination"
-        >
-          <a
-            href="#"
-            :class="{
-              'disabled cursor-normal pointer-events-none !bg-surface-tertiary !text-subtle':
-                pagination.currentPage === 1,
-            }"
-            class="
-              relative
-              inline-flex
-              items-center
-              px-2
-              py-2
-              text-sm
-              font-medium
-              text-muted
-              bg-surface
-              border border-line-default
-              rounded-l-lg
-              hover:bg-hover
-            "
-            @click="pageClicked(pagination.currentPage - 1)"
-          >
-            <span class="sr-only">Previous</span>
-            <BaseIcon name="ChevronLeftIcon" />
-          </a>
-          <a
-            v-if="hasFirst"
-            href="#"
-            aria-current="page"
-            :class="{
-              'z-10 bg-primary-500 border-primary-500 text-white':
-                isActive(1),
-              'bg-surface border-line-default text-muted hover:bg-hover':
-                !isActive(1),
-            }"
-            class="
-              relative
-              inline-flex
-              items-center
-              px-4
-              py-2
-              text-sm
-              font-medium
-              border
-            "
-            @click="pageClicked(1)"
-          >
-            1
-          </a>
-
-          <span
-            v-if="hasFirstEllipsis"
-            class="
-              relative
-              inline-flex
-              items-center
-              px-4
-              py-2
-              text-sm
-              font-medium
-              text-body
-              bg-surface
-              border border-line-default
-            "
-          >
-            ...
-          </span>
-          <a
-            v-for="page in pages"
-            :key="page"
-            href="#"
-            :class="{
-              'z-10 bg-primary-500 border-primary-500 text-white':
-                isActive(page),
-              'bg-surface border-line-default text-muted hover:bg-hover':
-                !isActive(page),
-              disabled: page === '...',
-            }"
-            class="
-              relative
-              items-center
-              hidden
-              px-4
-              py-2
-              text-sm
-              font-medium
-              border
-              md:inline-flex
-            "
-            @click="pageClicked(page)"
-          >
-            {{ page }}
-          </a>
-
-          <span
-            v-if="hasLastEllipsis"
-            class="
-              relative
-              inline-flex
-              items-center
-              px-4
-              py-2
-              text-sm
-              font-medium
-              text-body
-              bg-surface
-              border border-line-default
-            "
-          >
-            ...
-          </span>
-          <a
-            v-if="hasLast"
-            href="#"
-            aria-current="page"
-            :class="{
-              'z-10 bg-primary-500 border-primary-500 text-white':
-                isActive(pagination.totalPages),
-              'bg-surface border-line-default text-muted hover:bg-hover':
-                !isActive(pagination.totalPages),
-            }"
-            class="
-              relative
-              inline-flex
-              items-center
-              px-4
-              py-2
-              text-sm
-              font-medium
-              border
-            "
-            @click="pageClicked(pagination.totalPages)"
-          >
-            {{ pagination.totalPages }}
-          </a>
-          <a
-            href="#"
-            class="
-              relative
-              inline-flex
-              items-center
-              px-2
-              py-2
-              text-sm
-              font-medium
-              text-muted
-              bg-surface
-              border border-line-default
-              rounded-r-lg
-              hover:bg-hover
-            "
-            :class="{
-              'disabled cursor-default pointer-events-none !bg-surface-tertiary !text-subtle':
-                pagination.currentPage === pagination.totalPages,
-            }"
-            @click="pageClicked(pagination.currentPage + 1)"
-          >
-            <span class="sr-only">Next</span>
-            <BaseIcon name="ChevronRightIcon" />
-          </a>
-        </nav>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-// Todo: Need to convert this to Composition API
-
-export default {
-  props: {
-    pagination: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  computed: {
-    pages() {
-      return this.pagination.totalPages === undefined ? [] : this.pageLinks()
-    },
-    hasFirst() {
-      return this.pagination.currentPage >= 4 || this.pagination.totalPages < 10
-    },
-    hasLast() {
-      return (
-        this.pagination.currentPage <= this.pagination.totalPages - 3 ||
-        this.pagination.totalPages < 10
-      )
-    },
-    hasFirstEllipsis() {
-      return (
-        this.pagination.currentPage >= 4 && this.pagination.totalPages >= 10
-      )
-    },
-    hasLastEllipsis() {
-      return (
-        this.pagination.currentPage <= this.pagination.totalPages - 3 &&
-        this.pagination.totalPages >= 10
-      )
-    },
-    shouldShowPagination() {
-      if (this.pagination.totalPages === undefined) {
-        return false
-      }
-      if (this.pagination.count === 0) {
-        return false
-      }
-      return this.pagination.totalPages > 1
-    },
-  },
-  methods: {
-    isActive(page) {
-      const currentPage = this.pagination.currentPage || 1
-      return currentPage === page
-    },
-    pageClicked(page) {
-      if (
-        page === '...' ||
-        page === this.pagination.currentPage ||
-        page > this.pagination.totalPages ||
-        page < 1
-      ) {
-        return
-      }
-
-      this.$emit('pageChange', page)
-    },
-    pageLinks() {
-      const pages = []
-      let left = 2
-      let right = this.pagination.totalPages - 1
-      if (this.pagination.totalPages >= 10) {
-        left = Math.max(1, this.pagination.currentPage - 2)
-        right = Math.min(
-          this.pagination.currentPage + 2,
-          this.pagination.totalPages
-        )
-      }
-      for (let i = left; i <= right; i++) {
-        pages.push(i)
-      }
-      return pages
-    },
-  },
-}
-</script>
diff --git a/resources/scripts/components/base/base-table/Column.js b/resources/scripts/components/base/base-table/Column.js
deleted file mode 100644
index dbef00da..00000000
--- a/resources/scripts/components/base/base-table/Column.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { pick } from './helpers';
-
-export default class Column {
-  constructor(columnObject) {
-    const properties = pick(columnObject, [
-      'key', 'label', 'thClass', 'tdClass', 'sortBy', 'sortable', 'hidden', 'dataType'
-    ]);
-
-    for (const property in properties) {
-      this[property] = columnObject[property];
-    }
-
-    if (!properties['dataType']) {
-      this['dataType'] = 'string'
-    }
-
-    if (properties['sortable'] === undefined) {
-      this['sortable'] = true
-    }
-  }
-
-  getFilterFieldName() {
-    return this.filterOn || this.key;
-  }
-
-  isSortable() {
-    return this.sortable;
-  }
-
-  getSortPredicate(sortOrder, allColumns) {
-    const sortFieldName = this.getSortFieldName();
-
-    const sortColumn = allColumns.find(column => column.key === sortFieldName);
-
-    const dataType = sortColumn.dataType;
-
-    if (dataType.startsWith('date') || dataType === 'numeric') {
-
-      return (row1, row2) => {
-        const value1 = row1.getSortableValue(sortFieldName);
-        const value2 = row2.getSortableValue(sortFieldName);
-
-        if (sortOrder === 'desc') {
-          return value2 < value1 ? -1 : 1;
-        }
-
-        return value1 < value2 ? -1 : 1;
-      };
-    }
-
-    return (row1, row2) => {
-      const value1 = row1.getSortableValue(sortFieldName);
-      const value2 = row2.getSortableValue(sortFieldName);
-
-      if (sortOrder === 'desc') {
-        return value2.localeCompare(value1);
-      }
-
-      return value1.localeCompare(value2);
-    };
-  }
-
-  getSortFieldName() {
-    return this.sortBy || this.key;
-  }
-}
diff --git a/resources/scripts/components/base/base-table/Row.js b/resources/scripts/components/base/base-table/Row.js
deleted file mode 100644
index c58f2a0a..00000000
--- a/resources/scripts/components/base/base-table/Row.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import moment from 'moment';
-import { get } from './helpers';
-
-export default class Row {
-  constructor(data, columns) {
-    this.data = data;
-    this.columns = columns;
-  }
-
-  getValue(columnName) {
-    return get(this.data, columnName);
-  }
-
-  getColumn(columnName) {
-    return this.columns.find(column => column.key === columnName);
-  }
-
-  getSortableValue(columnName) {
-    const dataType = this.getColumn(columnName).dataType;
-
-    let value = this.getValue(columnName);
-
-    if (value === undefined || value === null) {
-      return '';
-    }
-
-    if (value instanceof String) {
-      value = value.toLowerCase();
-    }
-
-    if (dataType.startsWith('date')) {
-      const format = dataType.replace('date:', '');
-
-      return moment(value, format).format('YYYYMMDDHHmmss');
-    }
-
-    if (dataType === 'numeric') {
-      return value;
-    }
-
-    return value.toString();
-  }
-}
diff --git a/resources/scripts/components/base/base-table/helpers.js b/resources/scripts/components/base/base-table/helpers.js
deleted file mode 100644
index 836de649..00000000
--- a/resources/scripts/components/base/base-table/helpers.js
+++ /dev/null
@@ -1,30 +0,0 @@
-export function classList(...classes) {
-  return classes
-    .map(c => Array.isArray(c) ? c : [c])
-    .reduce((classes, c) => classes.concat(c), []);
-}
-
-export function get(object, path) {
-  if (!path) {
-    return object;
-  }
-
-  if (object === null || typeof object !== 'object') {
-    return object;
-  }
-
-  const [pathHead, pathTail] = path.split(/\.(.+)/);
-
-  return get(object[pathHead], pathTail);
-}
-
-export function pick(object, properties) {
-  return properties.reduce((pickedObject, property) => {
-    pickedObject[property] = object[property];
-    return pickedObject;
-  }, {});
-}
-
-export function range(from, to) {
-  return [...Array(to - from)].map((_, i) => i + from);
-}
diff --git a/resources/scripts/components/icons/DragIcon.vue b/resources/scripts/components/icons/DragIcon.vue
deleted file mode 100644
index adde6f72..00000000
--- a/resources/scripts/components/icons/DragIcon.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    data-prefix="fas"
-    data-icon="grip-vertical"
-    class="svg-inline--fa fa-grip-vertical fa-w-10"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 320 512"
-    width="15"
-    height="15"
-  >
-    <path
-      fill="currentColor"
-      d="M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/icons/LoadingIcon.vue b/resources/scripts/components/icons/LoadingIcon.vue
deleted file mode 100644
index dc56ff8e..00000000
--- a/resources/scripts/components/icons/LoadingIcon.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <svg 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"
-    ></circle>
-    <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"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/icons/MainLogo.vue b/resources/scripts/components/icons/MainLogo.vue
deleted file mode 100644
index cb0a32d8..00000000
--- a/resources/scripts/components/icons/MainLogo.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <svg viewBox="0 0 425 65" xmlns="http://www.w3.org/2000/svg">
-    <g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" :stroke="style.stroke" :stroke-width="style.strokeWidth" :fill="style.fill" :style="style">
-      <path d="M 293.04 0 A 3.698 3.698 0 0 0 292.644 0.021 Q 290.4 0.262 290.4 3.36 A 3.019 3.019 0 0 1 290.394 3.534 Q 290.263 5.778 287.16 20.68 Q 284.705 32.472 283.306 38.727 A 293.332 293.332 0 0 1 282.52 42.16 A 837.667 837.667 0 0 0 281.903 44.786 Q 280.961 48.83 280.44 51.28 A 55.028 55.028 0 0 0 280.23 52.314 Q 279.919 53.93 279.814 55.074 A 11.538 11.538 0 0 0 279.76 56.12 Q 279.76 57.402 281.347 59.488 A 22.695 22.695 0 0 0 282.36 60.72 Q 284.96 63.68 286.8 63.68 A 2.763 2.763 0 0 0 287.364 63.621 Q 288.95 63.291 290.68 61.12 A 29.056 29.056 0 0 0 291.428 60.136 Q 293.254 57.632 295.76 53.28 A 123.794 123.794 0 0 1 298.888 48.156 Q 303.588 40.897 306.859 38.746 A 4.671 4.671 0 0 1 309.36 37.84 Q 310 37.84 310 39.84 Q 310 41.465 308.468 47.843 A 291.315 291.315 0 0 1 307.68 51.04 A 117.487 117.487 0 0 0 307.654 51.141 Q 306.08 57.223 306.08 59.92 A 8.333 8.333 0 0 0 306.151 61.051 Q 306.389 62.784 307.429 63.375 A 2.573 2.573 0 0 0 308.72 63.68 A 4.05 4.05 0 0 0 310.673 63.153 Q 313.016 61.878 315.28 57.52 Q 318.48 51.36 319.76 44.72 A 122.156 122.156 0 0 0 320.155 42.573 Q 320.741 39.212 320.939 36.808 A 27.143 27.143 0 0 0 321.04 34.6 A 9.066 9.066 0 0 0 320.603 31.909 Q 320.218 30.669 319.493 29.335 A 22.735 22.735 0 0 0 317.84 26.76 A 23.592 23.592 0 0 0 316.643 25.253 Q 315.165 23.551 313.854 22.864 A 3.655 3.655 0 0 0 312.16 22.4 A 6.206 6.206 0 0 0 309.674 22.982 Q 307.502 23.936 304.888 26.453 A 41.401 41.401 0 0 0 302.44 29.04 Q 298.996 32.983 295.764 38.307 A 102.885 102.885 0 0 0 291.44 46.24 A 153.609 153.609 0 0 1 291.576 45.768 Q 292.412 42.877 294.4 36.36 A 1058.746 1058.746 0 0 0 295.353 33.219 Q 296.813 28.38 297.64 25.44 Q 298.72 21.6 299.76 16.96 Q 300.491 13.698 300.708 11.464 A 17.768 17.768 0 0 0 300.8 9.76 A 5.088 5.088 0 0 0 300.756 9.099 Q 300.448 6.747 298 3.6 Q 296.119 1.182 294.526 0.388 A 3.334 3.334 0 0 0 293.04 0 Z M 274.16 47.04 Q 274.16 53.84 267.68 58.72 Q 261.2 63.6 252.88 63.6 Q 245.547 63.6 240.731 60.4 A 16.356 16.356 0 0 1 239.48 59.48 A 19.654 19.654 0 0 1 237.039 57.157 Q 235.853 55.798 235.2 54.409 A 8.033 8.033 0 0 1 234.4 50.96 A 11.663 11.663 0 0 1 234.487 49.465 Q 234.693 47.88 235.387 47.16 A 1.981 1.981 0 0 1 236.88 46.56 A 4.409 4.409 0 0 1 238.653 46.954 Q 239.3 47.237 239.964 47.722 A 10.407 10.407 0 0 1 240.88 48.48 Q 242.96 50.4 245.56 52.32 Q 248.16 54.24 251.44 54.24 A 9.671 9.671 0 0 0 254.249 53.792 Q 256.409 53.136 258.88 51.52 Q 262.576 49.103 262.988 47.381 A 1.807 1.807 0 0 0 263.04 46.96 A 2.597 2.597 0 0 0 262.775 45.924 Q 262.097 44.412 259.684 41.948 A 49.569 49.569 0 0 0 258.52 40.8 Q 254 36.48 249.48 31.88 Q 244.96 27.28 244.96 24.76 A 16.041 16.041 0 0 1 245.22 21.959 A 21.984 21.984 0 0 1 245.88 19.28 A 15.841 15.841 0 0 1 246.432 17.761 Q 247.071 16.266 247.875 15.46 A 3.95 3.95 0 0 1 248.16 15.2 A 32.728 32.728 0 0 1 253.461 11.023 Q 256.114 9.324 259.32 7.88 A 43.497 43.497 0 0 1 263.829 6.127 Q 266.21 5.36 268.355 5.036 A 20.162 20.162 0 0 1 271.36 4.8 A 5.968 5.968 0 0 1 275.884 6.791 A 8.253 8.253 0 0 1 276.4 7.4 Q 278.4 10 278.4 12.8 A 1.384 1.384 0 0 1 277.978 13.782 Q 277.564 14.212 276.746 14.543 A 6.725 6.725 0 0 1 276.6 14.6 A 19.672 19.672 0 0 1 275.355 15.018 Q 273.988 15.432 272.05 15.86 A 77.258 77.258 0 0 1 271.4 16 A 44.146 44.146 0 0 0 265.796 17.593 A 50.146 50.146 0 0 0 264.48 18.08 A 60.055 60.055 0 0 0 261.811 19.142 Q 256.32 21.494 256.32 23.2 A 1.237 1.237 0 0 0 256.469 23.726 Q 256.846 24.496 258.178 25.799 A 31.251 31.251 0 0 0 259.12 26.68 A 191.286 191.286 0 0 0 262.823 29.924 A 234.359 234.359 0 0 0 265.24 31.96 A 29.32 29.32 0 0 1 269.093 35.859 A 37.314 37.314 0 0 1 271.36 38.92 A 19.31 19.31 0 0 1 273.066 42.031 Q 273.912 44.01 274.104 45.924 A 11.193 11.193 0 0 1 274.16 47.04 Z M 57.944 24.581 A 8.78 8.78 0 0 0 52.16 22.4 Q 49.2 22.4 44.92 28.2 Q 40.64 34 35.44 43.12 Q 38 33.84 38 28.88 A 3.322 3.322 0 0 0 37.924 28.181 Q 37.538 26.384 35.2 24.28 A 11.339 11.339 0 0 0 33.134 22.782 A 7.679 7.679 0 0 0 29.36 21.76 A 0.749 0.749 0 0 0 29.017 21.845 Q 28.71 22.001 28.433 22.444 A 4.033 4.033 0 0 0 28.2 22.88 A 3.564 3.564 0 0 0 28.003 23.603 Q 27.548 25.906 26.96 34.4 A 247.426 247.426 0 0 1 26.948 34.578 Q 26.796 36.842 26.68 37.92 A 156.739 156.739 0 0 1 26.617 38.496 Q 26.504 39.518 26.32 41.08 Q 26.08 43.12 25.72 44.88 Q 25.36 46.64 24.84 48.2 Q 24.32 49.76 23.16 52.68 A 49.051 49.051 0 0 0 22.77 53.693 Q 22 55.763 22 56.48 A 1.711 1.711 0 0 0 22.023 56.75 Q 22.189 57.787 23.566 59.562 A 26.163 26.163 0 0 0 24.56 60.76 Q 26.36 62.813 27.725 63.423 A 2.65 2.65 0 0 0 28.8 63.68 A 3.895 3.895 0 0 0 30.826 63.003 Q 34.681 60.611 40.48 49.76 Q 41.36 48.16 41.92 47.16 Q 42.48 46.16 43.4 44.6 Q 44.32 43.04 44.92 42.04 Q 45.52 41.04 46.36 39.8 Q 47.2 38.56 47.84 37.76 A 18.371 18.371 0 0 1 48.16 37.372 Q 48.714 36.717 49.48 35.92 Q 49.957 35.425 50.442 35.165 A 2.266 2.266 0 0 1 51.52 34.88 Q 52.195 34.88 52.3 37.101 A 19.049 19.049 0 0 1 52.32 38 A 9.777 9.777 0 0 1 52.32 38.026 Q 52.312 41.15 50.32 48.32 A 172.696 172.696 0 0 0 49.671 50.514 Q 48.181 55.68 47.806 58.381 A 11.488 11.488 0 0 0 47.68 59.92 A 8.358 8.358 0 0 0 47.742 60.978 Q 48.088 63.68 50.36 63.68 A 3.688 3.688 0 0 0 51.379 63.535 Q 52.911 63.096 54.417 61.336 A 15.781 15.781 0 0 0 55.64 59.68 A 21.199 21.199 0 0 0 55.758 59.496 Q 57.481 56.786 59.026 52.573 A 72.391 72.391 0 0 0 60.44 48.28 A 57.188 57.188 0 0 0 61.624 43.601 A 46.824 46.824 0 0 0 62.64 34.08 A 11.117 11.117 0 0 0 61.584 29.352 A 14.299 14.299 0 0 0 59.48 26.12 A 12.922 12.922 0 0 0 57.944 24.581 Z M 416.76 15.96 A 14.747 14.747 0 0 0 416.027 13.443 A 13.025 13.025 0 0 0 415.68 12.64 A 4.801 4.801 0 0 0 415.33 12.016 Q 414.728 11.12 413.96 11.12 A 1.597 1.597 0 0 0 413.148 11.358 Q 412.554 11.705 411.96 12.56 Q 410.96 14 410 17.28 Q 408.48 22.4 406.96 29.2 Q 411.615 28.955 414.511 28.898 A 81.8 81.8 0 0 1 416.12 28.88 Q 418.892 28.88 420.4 29.625 A 4.266 4.266 0 0 1 420.72 29.8 A 4.498 4.498 0 0 1 421.42 30.314 Q 421.792 30.652 421.995 31.03 A 2.018 2.018 0 0 1 422.24 32 A 2.743 2.743 0 0 1 421.336 34.002 Q 420.426 34.896 418.601 35.561 A 16.266 16.266 0 0 1 417.76 35.84 A 49.77 49.77 0 0 1 414.747 36.641 Q 411.696 37.36 407.486 38.056 A 193.699 193.699 0 0 1 404.8 38.48 A 821.694 821.694 0 0 1 403.384 44.31 Q 400.671 55.295 399.36 58.966 A 22.165 22.165 0 0 1 399.2 59.4 A 17.211 17.211 0 0 1 398.537 60.933 Q 397.247 63.525 395.766 63.598 A 1.747 1.747 0 0 1 395.68 63.6 A 2.392 2.392 0 0 1 394.64 63.335 Q 393.499 62.783 392.12 61.08 A 26.109 26.109 0 0 1 392.096 61.051 Q 390.177 58.673 390.085 57.406 A 1.725 1.725 0 0 1 390.08 57.28 A 7.302 7.302 0 0 1 390.165 56.207 Q 390.248 55.655 390.409 55.035 A 15.583 15.583 0 0 1 390.64 54.24 A 100.349 100.349 0 0 0 393.431 45.104 A 84.868 84.868 0 0 0 394.4 40.8 A 21.437 21.437 0 0 1 392.468 41.226 Q 391.522 41.387 390.674 41.427 A 11.731 11.731 0 0 1 390.12 41.44 A 4.482 4.482 0 0 1 388.09 40.933 Q 387.453 40.613 386.821 40.091 A 9.146 9.146 0 0 1 386.4 39.72 A 5.733 5.733 0 0 1 384.944 37.628 A 5.696 5.696 0 0 1 384.56 35.52 A 1.99 1.99 0 0 1 385.373 34.047 Q 387.62 32.088 396.08 30.56 Q 398.4 15.2 402.56 8.28 Q 406.72 1.36 414.56 1.36 A 7.762 7.762 0 0 1 419.062 2.834 Q 420.294 3.689 421.44 5.04 Q 424.56 8.72 424.56 13.76 A 16.885 16.885 0 0 1 424.458 15.674 Q 424.347 16.651 424.112 17.462 A 7.044 7.044 0 0 1 423.52 18.92 Q 422.48 20.8 420.8 20.8 A 2.967 2.967 0 0 1 418.484 19.758 A 4.177 4.177 0 0 1 418.12 19.28 Q 417.12 17.76 416.76 15.96 Z M 231.751 41.025 A 6.05 6.05 0 0 0 233.04 37.36 A 11.62 11.62 0 0 0 232.812 35.081 Q 232.049 31.253 228.72 27.4 A 21.71 21.71 0 0 0 228.19 26.809 Q 224.09 22.4 219.32 22.4 Q 214.24 22.4 209.12 26.68 Q 204 30.96 200.6 37.28 A 37.355 37.355 0 0 0 200.554 37.367 Q 199.099 40.087 198.276 42.711 A 22.272 22.272 0 0 0 197.2 49.4 Q 197.2 55.2 201.28 59.44 A 13.262 13.262 0 0 0 207.259 63.037 A 17.452 17.452 0 0 0 212.12 63.68 A 29.377 29.377 0 0 0 216.189 63.407 A 22.983 22.983 0 0 0 224.04 60.88 A 22.187 22.187 0 0 0 225.112 60.261 Q 229.2 57.737 229.2 54.96 A 2.029 2.029 0 0 0 228.962 53.953 Q 228.482 53.096 227.035 52.876 A 7.458 7.458 0 0 0 225.92 52.8 A 0.485 0.485 0 0 0 225.852 52.811 Q 225.35 52.907 221.48 53.92 A 28.116 28.116 0 0 1 219.833 54.297 Q 217.955 54.67 215.791 54.855 A 53.804 53.804 0 0 1 211.2 55.04 Q 209.169 55.04 208.213 54.583 A 1.679 1.679 0 0 1 207.6 54.12 A 2.295 2.295 0 0 1 207.399 53.815 Q 206.88 52.875 206.88 51.04 Q 206.88 48.88 207.6 46.72 A 27.824 27.824 0 0 0 210.004 47.137 Q 211.474 47.33 213.186 47.426 A 64.842 64.842 0 0 0 216.8 47.52 A 19.97 19.97 0 0 0 221.646 46.923 A 22.976 22.976 0 0 0 227.72 44.4 A 17.75 17.75 0 0 0 229.887 42.922 Q 231.024 42.004 231.751 41.025 Z M 359.991 41.025 A 6.05 6.05 0 0 0 361.28 37.36 A 11.62 11.62 0 0 0 361.052 35.081 Q 360.289 31.253 356.96 27.4 A 21.71 21.71 0 0 0 356.43 26.809 Q 352.33 22.4 347.56 22.4 Q 342.48 22.4 337.36 26.68 Q 332.24 30.96 328.84 37.28 A 37.355 37.355 0 0 0 328.794 37.367 Q 327.339 40.087 326.516 42.711 A 22.272 22.272 0 0 0 325.44 49.4 Q 325.44 55.2 329.52 59.44 A 13.262 13.262 0 0 0 335.499 63.037 A 17.452 17.452 0 0 0 340.36 63.68 A 29.377 29.377 0 0 0 344.429 63.407 A 22.983 22.983 0 0 0 352.28 60.88 A 22.187 22.187 0 0 0 353.352 60.261 Q 357.44 57.737 357.44 54.96 A 2.029 2.029 0 0 0 357.202 53.953 Q 356.722 53.096 355.275 52.876 A 7.458 7.458 0 0 0 354.16 52.8 A 0.485 0.485 0 0 0 354.092 52.811 Q 353.59 52.907 349.72 53.92 A 28.116 28.116 0 0 1 348.073 54.297 Q 346.195 54.67 344.031 54.855 A 53.804 53.804 0 0 1 339.44 55.04 Q 337.409 55.04 336.453 54.583 A 1.679 1.679 0 0 1 335.84 54.12 A 2.295 2.295 0 0 1 335.639 53.815 Q 335.12 52.875 335.12 51.04 Q 335.12 48.88 335.84 46.72 A 27.824 27.824 0 0 0 338.244 47.137 Q 339.714 47.33 341.426 47.426 A 64.842 64.842 0 0 0 345.04 47.52 A 19.97 19.97 0 0 0 349.886 46.923 A 22.976 22.976 0 0 0 355.96 44.4 A 17.75 17.75 0 0 0 358.127 42.922 Q 359.264 42.004 359.991 41.025 Z M 97.843 23.1 A 6.112 6.112 0 0 0 95.04 22.4 A 1.521 1.521 0 0 0 94.553 22.483 Q 93.394 22.873 92.072 25.094 A 21.691 21.691 0 0 0 91.32 26.48 Q 89.918 29.285 88.156 33.584 A 228.441 228.441 0 0 0 86.48 37.8 Q 83.68 45.04 81.76 48.72 Q 81.41 46.82 81.216 44.467 A 68.028 68.028 0 0 1 81.04 41.48 A 233.324 233.324 0 0 0 80.932 38.984 Q 80.805 36.38 80.64 34.4 A 16.81 16.81 0 0 0 80.578 33.828 A 13.328 13.328 0 0 0 75.28 24.56 A 14.934 14.934 0 0 0 74.681 24.133 Q 73.615 23.413 72.571 22.992 A 7.693 7.693 0 0 0 69.68 22.4 Q 67.878 22.4 67.525 24.576 A 7.456 7.456 0 0 0 67.44 25.76 A 17.018 17.018 0 0 0 67.549 27.47 Q 67.882 30.65 69.236 37.267 A 370.02 370.02 0 0 0 70.16 41.64 Q 72.88 54.16 74.8 58.8 Q 75.44 60.4 77.72 62 Q 79.368 63.157 80.451 63.477 A 2.668 2.668 0 0 0 81.2 63.6 Q 83.02 63.6 86.028 59.375 A 47.229 47.229 0 0 0 87.48 57.2 A 92.794 92.794 0 0 0 90.209 52.561 Q 91.612 50.022 93.093 47.043 A 213.267 213.267 0 0 0 96.28 40.32 A 176.062 176.062 0 0 0 97.942 36.554 Q 100.215 31.22 100.82 28.549 A 7.498 7.498 0 0 0 101.04 26.96 Q 101.04 25.785 99.983 24.675 A 7.403 7.403 0 0 0 99.08 23.88 A 8.334 8.334 0 0 0 97.843 23.1 Z M 161.6 38.8 A 40.967 40.967 0 0 0 160.62 40.798 Q 158.08 46.363 158.08 51.12 A 6.095 6.095 0 0 0 158.146 52.011 Q 158.651 55.434 163.007 59.256 A 30.25 30.25 0 0 0 163.08 59.32 Q 168.08 63.68 172 63.68 A 21.748 21.748 0 0 0 178.545 62.653 A 27.64 27.64 0 0 0 184.32 60.04 Q 188.242 57.723 189.667 55.454 A 4.812 4.812 0 0 0 190.48 52.88 A 2.715 2.715 0 0 0 190.441 52.41 Q 190.248 51.311 189.082 51.045 A 3.805 3.805 0 0 0 188.24 50.96 A 4.061 4.061 0 0 0 187.693 50.999 Q 187.223 51.062 186.71 51.233 A 8.146 8.146 0 0 0 185.72 51.64 A 8.558 8.558 0 0 1 185.205 51.868 Q 184.294 52.239 182.922 52.597 A 39.479 39.479 0 0 1 181.4 52.96 Q 178.48 53.6 174.92 53.6 A 30.753 30.753 0 0 1 174.112 53.59 Q 172.037 53.536 171.04 53.187 A 2.101 2.101 0 0 1 170.44 52.88 A 1.725 1.725 0 0 1 170.012 52.372 Q 169.52 51.516 169.52 49.76 A 5.869 5.869 0 0 1 169.637 48.643 Q 170.063 46.456 172.04 43.16 A 36.988 36.988 0 0 1 173.35 41.128 A 31.275 31.275 0 0 1 177.8 35.96 A 31.497 31.497 0 0 1 178.009 35.769 Q 180.224 33.754 181.727 33.185 A 3.062 3.062 0 0 1 182.8 32.96 A 6.966 6.966 0 0 1 183.946 33.055 A 7.629 7.629 0 0 1 186.24 33.84 A 14.028 14.028 0 0 0 186.78 34.109 Q 188.08 34.72 188.88 34.72 A 2.841 2.841 0 0 0 189.412 34.674 Q 190.449 34.476 190.711 33.438 A 3.267 3.267 0 0 0 190.8 32.64 A 5.693 5.693 0 0 0 190.796 32.418 Q 190.718 30.439 189.271 28.108 A 19.351 19.351 0 0 0 187.84 26.12 Q 184.88 22.48 182.08 22.48 A 13.13 13.13 0 0 0 179.317 22.778 Q 175.135 23.676 170.84 27.28 Q 165.12 32.08 161.6 38.8 Z M 380.72 3.52 A 29.299 29.299 0 0 0 380.631 3.417 Q 377.652 0 375.76 0 A 3.906 3.906 0 0 0 374.85 0.097 Q 373.735 0.365 373.412 1.374 A 3.104 3.104 0 0 0 373.28 2.32 A 130.145 130.145 0 0 1 373.06 9.828 A 153.086 153.086 0 0 1 371.08 26.84 Q 368.88 39.68 366.72 47.84 A 2851.972 2851.972 0 0 0 366.194 49.829 Q 364.56 56.021 364.56 56.16 A 3.275 3.275 0 0 0 364.708 57.096 Q 365.03 58.175 366.053 59.523 A 18.708 18.708 0 0 0 367.16 60.84 Q 368.95 62.796 370.342 63.405 A 2.951 2.951 0 0 0 371.52 63.68 A 0.516 0.516 0 0 0 371.632 63.668 Q 374.299 63.075 380.8 34.72 Q 381.515 31.365 382.192 26.441 A 241.283 241.283 0 0 0 382.8 21.64 A 354.902 354.902 0 0 0 382.865 21.082 Q 383.532 15.306 383.702 12.118 A 35.976 35.976 0 0 0 383.76 10.24 Q 383.76 8.037 382.319 5.682 A 16.535 16.535 0 0 0 380.72 3.52 Z M 6.066 63.345 A 2.266 2.266 0 0 0 7.04 63.6 A 0.904 0.904 0 0 0 7.432 63.507 Q 7.583 63.435 7.734 63.308 A 2.344 2.344 0 0 0 8 63.04 A 2.019 2.019 0 0 0 8.107 62.9 Q 9.125 61.449 10.714 54.814 A 185.757 185.757 0 0 0 11.52 51.28 A 2001.635 2001.635 0 0 1 11.683 50.425 Q 11.971 48.916 12.4 46.68 A 409.455 409.455 0 0 1 12.561 45.843 Q 12.81 44.564 13.093 43.142 A 695.249 695.249 0 0 1 13.72 40.04 A 125.74 125.74 0 0 1 13.85 39.413 Q 14.655 35.573 16.68 26.92 Q 18.88 17.52 18.88 16.08 A 7.938 7.938 0 0 0 18.492 13.681 Q 17.765 11.383 15.68 8.88 A 31.343 31.343 0 0 0 15.251 8.376 Q 13.225 6.047 11.741 5.344 A 2.785 2.785 0 0 0 10.56 5.04 Q 8.24 5.04 8.08 7.68 A 18.71 18.71 0 0 1 8.044 8.353 Q 7.741 12.656 5.311 25.939 A 976.856 976.856 0 0 1 3.96 33.16 Q 0 53.92 0 55.44 A 2.018 2.018 0 0 0 0.024 55.741 Q 0.199 56.902 1.66 58.914 A 29.822 29.822 0 0 0 2.72 60.28 Q 4.686 62.679 6.066 63.345 Z M 105.147 33.537 A 32.109 32.109 0 0 0 100.4 50.24 A 18.319 18.319 0 0 0 100.478 51.949 A 14.14 14.14 0 0 0 103.6 59.76 A 13.266 13.266 0 0 0 104.869 61.117 A 9.067 9.067 0 0 0 111.2 63.68 Q 117.12 63.68 122.32 59.56 Q 127.52 55.44 130.4 49.2 A 34.248 34.248 0 0 0 131.856 45.513 A 27.481 27.481 0 0 0 133.28 36.92 Q 133.28 30.88 129.12 26.6 Q 124.96 22.32 118.88 22.32 Q 112.8 22.32 106.6 31.28 A 39.914 39.914 0 0 0 105.147 33.537 Z M 151.32 25.6 A 11.73 11.73 0 0 0 150.773 24.866 Q 148.778 22.4 146.32 22.4 A 1.321 1.321 0 0 0 145.446 22.757 Q 144.709 23.392 144.12 25.16 A 26.992 26.992 0 0 0 143.726 26.462 Q 142.973 29.173 142.12 33.88 Q 141.04 39.84 139 48.28 A 239.405 239.405 0 0 0 138.278 51.347 Q 137.293 55.673 137.044 57.718 A 9.696 9.696 0 0 0 136.96 58.84 A 6.144 6.144 0 0 0 137.007 59.615 A 4.448 4.448 0 0 0 138.28 62.28 A 5.511 5.511 0 0 0 138.366 62.364 A 4.198 4.198 0 0 0 141.36 63.6 A 5.334 5.334 0 0 0 141.66 63.592 Q 143.611 63.482 144.629 61.918 A 5.691 5.691 0 0 0 145.28 60.48 Q 148 52.08 150.76 42.68 Q 153.003 35.043 153.423 32.607 A 5.453 5.453 0 0 0 153.52 31.76 Q 153.52 29.887 152.639 27.918 A 14.72 14.72 0 0 0 151.32 25.6 Z M 112.08 55.52 Q 116.4 53.6 119.6 47.76 A 29.882 29.882 0 0 0 121.612 43.308 Q 122.8 39.92 122.8 36.8 Q 122.8 31.68 121.36 29.76 A 11.074 11.074 0 0 0 119.107 31.546 Q 117.138 33.525 115.183 36.955 A 46.237 46.237 0 0 0 114.52 38.16 A 37.693 37.693 0 0 0 112.655 42.192 Q 111.839 44.294 111.457 46.197 A 16.279 16.279 0 0 0 111.12 49.4 A 39.362 39.362 0 0 0 111.154 51.09 Q 111.274 53.889 111.827 55.086 A 2.399 2.399 0 0 0 112.08 55.52 Z M 147 8.12 A 11.126 11.126 0 0 0 146.449 8.818 Q 145.12 10.651 145.12 12.4 A 3.496 3.496 0 0 0 145.293 13.448 Q 145.846 15.206 148.16 17.52 Q 150.131 19.492 151.8 20.185 A 4.487 4.487 0 0 0 153.52 20.56 Q 154.88 20.56 156.16 19.52 A 3.312 3.312 0 0 0 157.289 17.759 A 4.783 4.783 0 0 0 157.44 16.52 Q 157.44 14.56 154.96 10.24 A 28.982 28.982 0 0 0 154.596 9.624 Q 153.049 7.077 151.777 6.281 A 2.083 2.083 0 0 0 150.68 5.92 A 2.949 2.949 0 0 0 150.631 5.921 Q 149.333 5.942 147.993 7.107 A 9.622 9.622 0 0 0 147 8.12 Z M 223.76 36.08 A 1.176 1.176 0 0 0 223.641 35.604 Q 223.346 34.947 222.312 33.974 A 15.926 15.926 0 0 0 222.08 33.76 A 8.215 8.215 0 0 0 221.106 32.996 Q 220.571 32.642 220.057 32.454 A 3.295 3.295 0 0 0 218.92 32.24 A 2.825 2.825 0 0 0 217.94 32.437 Q 216.733 32.886 215.12 34.36 Q 212.945 36.348 210.981 39.425 A 35.66 35.66 0 0 0 210.72 39.84 Q 211.271 39.902 212.198 39.916 A 38.976 38.976 0 0 0 212.8 39.92 A 47.77 47.77 0 0 0 216.244 39.807 Q 223.76 39.26 223.76 36.08 Z M 352 36.08 A 1.176 1.176 0 0 0 351.881 35.604 Q 351.586 34.947 350.552 33.974 A 15.926 15.926 0 0 0 350.32 33.76 A 8.215 8.215 0 0 0 349.346 32.996 Q 348.811 32.642 348.297 32.454 A 3.295 3.295 0 0 0 347.16 32.24 A 2.825 2.825 0 0 0 346.18 32.437 Q 344.973 32.886 343.36 34.36 Q 341.185 36.348 339.221 39.425 A 35.66 35.66 0 0 0 338.96 39.84 Q 339.511 39.902 340.438 39.916 A 38.976 38.976 0 0 0 341.04 39.92 A 47.77 47.77 0 0 0 344.484 39.807 Q 352 39.26 352 36.08 Z" vector-effect="non-scaling-stroke"/>    </g>
-  </svg>
-</template>
-
-<script setup>
-
-import {ref} from 'vue'
-
-const props = defineProps({
-  darkColor: {
-    type: String,
-    default: 'var(--color-primary-500)',
-  },
-  lightColor: {
-    type: String,
-    default: 'var(--color-primary-400)',
-  },
-})
-
-const style = ref({
-  strokeWidth: '0.25mm',
-  stroke: props.lightColor,
-  fill: props.lightColor,
-});
-
-</script>
diff --git a/resources/scripts/components/icons/SaveIcon.vue b/resources/scripts/components/icons/SaveIcon.vue
deleted file mode 100644
index 652e3321..00000000
--- a/resources/scripts/components/icons/SaveIcon.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <svg
-    width="20"
-    height="15"
-    aria-hidden="true"
-    focusable="false"
-    data-prefix="fas"
-    data-icon="save"
-    class="svg-inline--fa fa-save fa-w-14"
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 448 512"
-  >
-    <path
-      fill="currentColor"
-      d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"
-    ></path>
-  </svg>
-</template>
diff --git a/resources/scripts/components/icons/SpinnerIcon.vue b/resources/scripts/components/icons/SpinnerIcon.vue
deleted file mode 100644
index c7a139ca..00000000
--- a/resources/scripts/components/icons/SpinnerIcon.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<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"
-    ></circle>
-    <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"
-    ></path>
-  </svg>
-</template>
-
diff --git a/resources/scripts/components/icons/dashboard/CustomerIcon.vue b/resources/scripts/components/icons/dashboard/CustomerIcon.vue
deleted file mode 100644
index ef982ec1..00000000
--- a/resources/scripts/components/icons/dashboard/CustomerIcon.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <svg
-    width="50"
-    height="50"
-    viewBox="0 0 50 50"
-    :class="colorClass"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
-    <path
-      d="M28.2656 23.0547C27.3021 24.0182 26.1302 24.5 24.75 24.5C23.3698 24.5 22.1849 24.0182 21.1953 23.0547C20.2318 22.0651 19.75 20.8802 19.75 19.5C19.75 18.1198 20.2318 16.9479 21.1953 15.9844C22.1849 14.9948 23.3698 14.5 24.75 14.5C26.1302 14.5 27.3021 14.9948 28.2656 15.9844C29.2552 16.9479 29.75 18.1198 29.75 19.5C29.75 20.8802 29.2552 22.0651 28.2656 23.0547ZM28.2656 25.75C29.6979 25.75 30.9219 26.2708 31.9375 27.3125C32.9792 28.3281 33.5 29.5521 33.5 30.9844V32.625C33.5 33.1458 33.3177 33.5885 32.9531 33.9531C32.5885 34.3177 32.1458 34.5 31.625 34.5H17.875C17.3542 34.5 16.9115 34.3177 16.5469 33.9531C16.1823 33.5885 16 33.1458 16 32.625V30.9844C16 29.5521 16.5078 28.3281 17.5234 27.3125C18.5651 26.2708 19.8021 25.75 21.2344 25.75H21.8984C22.8099 26.1667 23.7604 26.375 24.75 26.375C25.7396 26.375 26.6901 26.1667 27.6016 25.75H28.2656Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
-
-<script setup>
-const props = defineProps({
-  colorClass: {
-    type: String,
-    default: 'text-primary-500',
-  },
-})
-</script>
-
diff --git a/resources/scripts/components/icons/dashboard/DollarIcon.vue b/resources/scripts/components/icons/dashboard/DollarIcon.vue
deleted file mode 100644
index f49218b1..00000000
--- a/resources/scripts/components/icons/dashboard/DollarIcon.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <svg
-    width="50"
-    height="50"
-    viewBox="0 0 50 50"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle cx="25" cy="25" r="25" fill="#FDE4E5" />
-    <path
-      d="M27.2031 23.6016C28.349 23.9401 29.2083 24.6562 29.7812 25.75C30.3802 26.8438 30.4714 27.9766 30.0547 29.1484C29.7422 30.0078 29.2083 30.6979 28.4531 31.2188C27.6979 31.7135 26.8516 31.974 25.9141 32V33.875C25.9141 34.0573 25.849 34.2005 25.7188 34.3047C25.6146 34.4349 25.4714 34.5 25.2891 34.5H24.0391C23.8568 34.5 23.7005 34.4349 23.5703 34.3047C23.4661 34.2005 23.4141 34.0573 23.4141 33.875V32C22.1641 32 21.0443 31.6094 20.0547 30.8281C19.8984 30.6979 19.8073 30.5417 19.7812 30.3594C19.7552 30.1771 19.8203 30.0208 19.9766 29.8906L21.3047 28.5625C21.5651 28.3281 21.8255 28.3021 22.0859 28.4844C22.4766 28.7448 22.9193 28.875 23.4141 28.875H25.9922C26.3307 28.875 26.6042 28.7708 26.8125 28.5625C27.0469 28.3281 27.1641 28.0417 27.1641 27.7031C27.1641 27.1302 26.8906 26.7656 26.3438 26.6094L22.3203 25.4375C21.4349 25.1771 20.6927 24.7083 20.0938 24.0312C19.4948 23.3542 19.1432 22.5729 19.0391 21.6875C18.9349 20.4115 19.2995 19.3177 20.1328 18.4062C20.9922 17.4688 22.0599 17 23.3359 17H23.4141V15.125C23.4141 14.9427 23.4661 14.7995 23.5703 14.6953C23.7005 14.5651 23.8568 14.5 24.0391 14.5H25.2891C25.4714 14.5 25.6146 14.5651 25.7188 14.6953C25.849 14.7995 25.9141 14.9427 25.9141 15.125V17C27.1641 17 28.2839 17.3906 29.2734 18.1719C29.4297 18.3021 29.5208 18.4583 29.5469 18.6406C29.5729 18.8229 29.5078 18.9792 29.3516 19.1094L28.0234 20.4375C27.763 20.6719 27.5026 20.6979 27.2422 20.5156C26.8516 20.2552 26.4089 20.125 25.9141 20.125H23.3359C22.9974 20.125 22.7109 20.2422 22.4766 20.4766C22.2682 20.6849 22.1641 20.9583 22.1641 21.2969C22.1641 21.5312 22.2422 21.7526 22.3984 21.9609C22.5547 22.1693 22.75 22.3125 22.9844 22.3906L27.2031 23.6016Z"
-      fill="#FB7178"
-    />
-  </svg>
-</template>
diff --git a/resources/scripts/components/icons/dashboard/EstimateIcon.vue b/resources/scripts/components/icons/dashboard/EstimateIcon.vue
deleted file mode 100644
index 659cbf37..00000000
--- a/resources/scripts/components/icons/dashboard/EstimateIcon.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <svg
-    width="50"
-    height="50"
-    viewBox="0 0 50 50"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    :class="colorClass"
-  >
-    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
-    <path
-      d="M26.75 19.8125C26.75 20.0729 26.8411 20.2943 27.0234 20.4766C27.2057 20.6589 27.4271 20.75 27.6875 20.75H33V33.5625C33 33.8229 32.9089 34.0443 32.7266 34.2266C32.5443 34.4089 32.3229 34.5 32.0625 34.5H18.9375C18.6771 34.5 18.4557 34.4089 18.2734 34.2266C18.0911 34.0443 18 33.8229 18 33.5625V15.4375C18 15.1771 18.0911 14.9557 18.2734 14.7734C18.4557 14.5911 18.6771 14.5 18.9375 14.5H26.75V19.8125ZM33 19.2656V19.5H28V14.5H28.2344C28.4948 14.5 28.7161 14.5911 28.8984 14.7734L32.7266 18.6016C32.9089 18.7839 33 19.0052 33 19.2656Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
-
-<script setup>
-const props = defineProps({
-  colorClass: {
-    type: String,
-    default: 'text-primary-500',
-  },
-})
-</script>
diff --git a/resources/scripts/components/icons/dashboard/InvoiceIcon.vue b/resources/scripts/components/icons/dashboard/InvoiceIcon.vue
deleted file mode 100644
index b835e48e..00000000
--- a/resources/scripts/components/icons/dashboard/InvoiceIcon.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <svg
-    width="50"
-    height="50"
-    viewBox="0 0 50 50"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    :class="colorClass"
-  >
-    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
-    <path
-      d="M28.25 24.5V27H20.75V24.5H28.25ZM31.7266 18.6016C31.9089 18.7839 32 19.0052 32 19.2656V19.5H27V14.5H27.2344C27.4948 14.5 27.7161 14.5911 27.8984 14.7734L31.7266 18.6016ZM25.75 19.8125C25.75 20.0729 25.8411 20.2943 26.0234 20.4766C26.2057 20.6589 26.4271 20.75 26.6875 20.75H32V33.5625C32 33.8229 31.9089 34.0443 31.7266 34.2266C31.5443 34.4089 31.3229 34.5 31.0625 34.5H17.9375C17.6771 34.5 17.4557 34.4089 17.2734 34.2266C17.0911 34.0443 17 33.8229 17 33.5625V15.4375C17 15.1771 17.0911 14.9557 17.2734 14.7734C17.4557 14.5911 17.6771 14.5 17.9375 14.5H25.75V19.8125ZM19.5 17.3125V17.9375C19.5 18.1458 19.6042 18.25 19.8125 18.25H22.9375C23.1458 18.25 23.25 18.1458 23.25 17.9375V17.3125C23.25 17.1042 23.1458 17 22.9375 17H19.8125C19.6042 17 19.5 17.1042 19.5 17.3125ZM19.5 19.8125V20.4375C19.5 20.6458 19.6042 20.75 19.8125 20.75H22.9375C23.1458 20.75 23.25 20.6458 23.25 20.4375V19.8125C23.25 19.6042 23.1458 19.5 22.9375 19.5H19.8125C19.6042 19.5 19.5 19.6042 19.5 19.8125ZM29.5 31.6875V31.0625C29.5 30.8542 29.3958 30.75 29.1875 30.75H26.0625C25.8542 30.75 25.75 30.8542 25.75 31.0625V31.6875C25.75 31.8958 25.8542 32 26.0625 32H29.1875C29.3958 32 29.5 31.8958 29.5 31.6875ZM29.5 23.875C29.5 23.6927 29.4349 23.5495 29.3047 23.4453C29.2005 23.3151 29.0573 23.25 28.875 23.25H20.125C19.9427 23.25 19.7865 23.3151 19.6562 23.4453C19.5521 23.5495 19.5 23.6927 19.5 23.875V27.625C19.5 27.8073 19.5521 27.9635 19.6562 28.0938C19.7865 28.1979 19.9427 28.25 20.125 28.25H28.875C29.0573 28.25 29.2005 28.1979 29.3047 28.0938C29.4349 27.9635 29.5 27.8073 29.5 27.625V23.875Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
-
-<script setup>
-const props = defineProps({
-  colorClass: {
-    type: String,
-    default: 'text-primary-500',
-  },
-})
-</script>
diff --git a/resources/scripts/components/icons/dashboard/PaymentIcon.vue b/resources/scripts/components/icons/dashboard/PaymentIcon.vue
deleted file mode 100644
index 8e068476..00000000
--- a/resources/scripts/components/icons/dashboard/PaymentIcon.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <svg
-    width="50"
-    height="50"
-    viewBox="0 0 50 50"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    :class="colorClass"
-  >
-    <circle cx="25" cy="25" r="25" fill="#EAF1FB" />
-    <path
-      d="M17.8 17.8C17.1635 17.8 16.5531 18.0529 16.103 18.503C15.6529 18.9531 15.4 19.5635 15.4 20.2V21.4H34.6V20.2C34.6 19.5635 34.3472 18.9531 33.8971 18.503C33.447 18.0529 32.8365 17.8 32.2 17.8H17.8Z"
-      fill="currentColor"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M34.6 23.8H15.4V29.8C15.4 30.4366 15.6529 31.047 16.103 31.4971C16.5531 31.9472 17.1635 32.2 17.8 32.2H32.2C32.8365 32.2 33.447 31.9472 33.8971 31.4971C34.3472 31.047 34.6 30.4366 34.6 29.8V23.8ZM17.8 28.6C17.8 28.2818 17.9265 27.9766 18.1515 27.7515C18.3765 27.5265 18.6818 27.4 19 27.4H20.2C20.5183 27.4 20.8235 27.5265 21.0486 27.7515C21.2736 27.9766 21.4 28.2818 21.4 28.6C21.4 28.9183 21.2736 29.2235 21.0486 29.4486C20.8235 29.6736 20.5183 29.8 20.2 29.8H19C18.6818 29.8 18.3765 29.6736 18.1515 29.4486C17.9265 29.2235 17.8 28.9183 17.8 28.6ZM23.8 27.4C23.4818 27.4 23.1765 27.5265 22.9515 27.7515C22.7265 27.9766 22.6 28.2818 22.6 28.6C22.6 28.9183 22.7265 29.2235 22.9515 29.4486C23.1765 29.6736 23.4818 29.8 23.8 29.8H25C25.3183 29.8 25.6235 29.6736 25.8486 29.4486C26.0736 29.2235 26.2 28.9183 26.2 28.6C26.2 28.2818 26.0736 27.9766 25.8486 27.7515C25.6235 27.5265 25.3183 27.4 25 27.4H23.8Z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
-
-<script setup>
-const props = defineProps({
-  colorClass: {
-    type: String,
-    default: 'text-primary-500',
-  },
-})
-</script>
diff --git a/resources/scripts/components/icons/empty/AstronautIcon.vue b/resources/scripts/components/icons/empty/AstronautIcon.vue
deleted file mode 100644
index 8f4cef20..00000000
--- a/resources/scripts/components/icons/empty/AstronautIcon.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <svg
-    width="125"
-    height="110"
-    viewBox="0 0 125 110"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0)">
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M46.8031 84.4643C46.8031 88.8034 43.3104 92.3215 39.0026 92.3215C34.6948 92.3215 31.2021 88.8034 31.2021 84.4643C31.2021 80.1252 34.6948 76.6072 39.0026 76.6072C43.3104 76.6072 46.8031 80.1252 46.8031 84.4643Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M60.4536 110H64.3539V72.6785H60.4536V110Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M85.8055 76.6072H70.2045C69.1319 76.6072 68.2544 77.4911 68.2544 78.5715V82.5C68.2544 83.5804 69.1319 84.4643 70.2045 84.4643H85.8055C86.878 84.4643 87.7556 83.5804 87.7556 82.5V78.5715C87.7556 77.4911 86.878 76.6072 85.8055 76.6072ZM70.2045 82.5H85.8055V78.5715H70.2045V82.5Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M91.6556 1.96429C94.8811 1.96429 97.506 4.60821 97.506 7.85714V19.6429H83.8181L85.308 21.6071H99.4561V7.85714C99.4561 3.53571 95.9459 0 91.6556 0H33.152C28.8618 0 25.3516 3.53571 25.3516 7.85714V21.6071H39.3203L40.8745 19.6429H27.3017V7.85714C27.3017 4.60821 29.9265 1.96429 33.152 1.96429H91.6556Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M122.858 92.3213H117.007C115.935 92.3213 115.057 93.2052 115.057 94.2856V102.143C115.057 103.223 115.935 104.107 117.007 104.107H122.858C123.93 104.107 124.808 103.223 124.808 102.143V94.2856C124.808 93.2052 123.93 92.3213 122.858 92.3213ZM117.007 102.143H122.858V94.2856H117.007V102.143Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M103.356 43.2142V70.7142H21.4511V43.2142H26.1821V41.2498H19.501V72.6783H105.306V41.2498H98.3541L98.2839 43.2142H103.356Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M101.406 21.6071C104.632 21.6071 107.257 24.251 107.257 27.5V41.25H98.2257L98.0853 43.2142H109.207V27.5C109.207 23.1609 105.714 19.6428 101.406 19.6428H83.8182L85.0878 21.6071H101.406ZM40.8746 19.6428H23.4016C19.0937 19.6428 15.6011 23.1609 15.6011 27.5V43.2142H26.1961L26.3365 41.25H17.5512V27.5C17.5512 24.251 20.1761 21.6071 23.4016 21.6071H39.3204L40.8746 19.6428Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M62.4041 9.82153C45.1709 9.82153 31.2021 23.8917 31.2021 41.2501C31.2021 58.6085 45.1709 72.6787 62.4041 72.6787C79.6373 72.6787 93.606 58.6085 93.606 41.2501C93.606 23.8917 79.6373 9.82153 62.4041 9.82153ZM62.4041 11.7858C78.5335 11.7858 91.6559 25.0035 91.6559 41.2501C91.6559 57.4967 78.5335 70.7144 62.4041 70.7144C46.2746 70.7144 33.1523 57.4967 33.1523 41.2501C33.1523 25.0035 46.2746 11.7858 62.4041 11.7858Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M62.4041 19.6428C45.1709 19.6428 31.2021 23.8916 31.2021 41.25C31.2021 58.6084 45.1709 66.7857 62.4041 66.7857C79.6373 66.7857 93.606 58.6084 93.606 41.25C93.606 23.8916 79.6373 19.6428 62.4041 19.6428ZM62.4041 21.6071C82.6346 21.6071 91.6559 27.665 91.6559 41.25C91.6559 56.0096 80.7216 64.8214 62.4041 64.8214C44.0866 64.8214 33.1523 56.0096 33.1523 41.25C33.1523 27.665 42.1735 21.6071 62.4041 21.6071Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M101.406 70.7144H23.4014C10.478 70.7144 0 81.2685 0 94.2858V110H124.808V94.2858C124.808 81.2685 114.33 70.7144 101.406 70.7144ZM101.406 72.6786C113.234 72.6786 122.858 82.3724 122.858 94.2858V108.036H1.95012V94.2858C1.95012 82.3724 11.574 72.6786 23.4014 72.6786H101.406Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M33.152 33.3928H29.2518C27.0969 33.3928 25.3516 35.1509 25.3516 37.3214V45.1785C25.3516 47.3491 27.0969 49.1071 29.2518 49.1071H33.152V33.3928ZM31.2019 35.3571V47.1428H29.2518C28.1773 47.1428 27.3017 46.2609 27.3017 45.1785V37.3214C27.3017 36.2391 28.1773 35.3571 29.2518 35.3571H31.2019Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M95.556 33.3928H91.6558V49.1071H95.556C97.7109 49.1071 99.4562 47.3491 99.4562 45.1785V37.3214C99.4562 35.1509 97.7109 33.3928 95.556 33.3928ZM95.556 35.3571C96.6305 35.3571 97.5061 36.2391 97.5061 37.3214V45.1785C97.5061 46.2609 96.6305 47.1428 95.556 47.1428H93.6059V35.3571H95.556Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M94.581 15.7144C94.0447 15.7144 93.606 16.1563 93.606 16.6965V34.3751C93.606 34.9152 94.0447 35.3572 94.581 35.3572C95.1173 35.3572 95.5561 34.9152 95.5561 34.3751V16.6965C95.5561 16.1563 95.1173 15.7144 94.581 15.7144Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M38.0273 41.2499C37.4891 41.2499 37.0522 40.8099 37.0522 40.2678C37.0522 33.3142 44.1409 25.5356 53.6283 25.5356C54.1665 25.5356 54.6033 25.9756 54.6033 26.5178C54.6033 27.0599 54.1665 27.4999 53.6283 27.4999C45.2564 27.4999 39.0024 34.2414 39.0024 40.2678C39.0024 40.8099 38.5655 41.2499 38.0273 41.2499Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M97.5059 110H99.456V72.6785H97.5059V110Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M25.3516 110H27.3017V72.6785H25.3516V110Z"
-        :class="secondaryFillColor"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <rect width="124.808" height="110" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
-
-<script setup>
-const props = defineProps({
-  primaryFillColor: {
-    type: String,
-    default: 'fill-primary-500',
-  },
-  secondaryFillColor: {
-    type: String,
-    default: 'fill-gray-600',
-  },
-})
-</script>
diff --git a/resources/scripts/components/icons/empty/CapsuleIcon.vue b/resources/scripts/components/icons/empty/CapsuleIcon.vue
deleted file mode 100644
index 4713ba9a..00000000
--- a/resources/scripts/components/icons/empty/CapsuleIcon.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <svg
-    width="118"
-    height="110"
-    viewBox="0 0 118 110"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0)">
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M58.6672 32.9999C42.1415 32.9999 32.973 28.5119 32.5898 28.3194L33.4093 26.6804C33.4992 26.7244 42.6127 31.1666 58.6672 31.1666C74.542 31.1666 83.8388 26.7208 83.9323 26.6768L84.7354 28.3231C84.3449 28.5156 74.9618 32.9999 58.6672 32.9999Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M25.2438 39.0117L28.4191 40.8451C28.839 41.0871 29.1415 41.4831 29.2698 41.9597C29.3963 42.4346 29.3321 42.9296 29.0901 43.3494L14.4235 68.7521C14.099 69.3167 13.4866 69.6669 12.8248 69.6669C12.504 69.6669 12.1978 69.5844 11.9191 69.4231L8.74382 67.5897L7.82715 69.1774L11.0025 71.0107C11.5763 71.3426 12.2051 71.5002 12.8248 71.5002C14.0953 71.5002 15.3346 70.8421 16.0111 69.6687L30.6778 44.2661C31.6861 42.5189 31.083 40.2657 29.3358 39.2574L26.1605 37.4241L25.2438 39.0117Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M91.1729 37.4241L87.9976 39.2574C86.2504 40.2657 85.6472 42.5189 86.6556 44.2661L101.322 69.6687C101.999 70.8421 103.238 71.5002 104.509 71.5002C105.128 71.5002 105.757 71.3426 106.331 71.0107L109.506 69.1774L108.59 67.5897L105.414 69.4231C105.139 69.5826 104.826 69.6669 104.509 69.6669C103.847 69.6669 103.234 69.3167 102.91 68.7521L88.2432 43.3494C88.0012 42.9296 87.9371 42.4346 88.0636 41.9597C88.1919 41.4831 88.4944 41.0871 88.9142 40.8451L92.0896 39.0117L91.1729 37.4241Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M115.5 84.3333V87.6993C115.5 89.2797 114.424 90.6308 112.88 90.9883C112.013 91.19 111.049 91.4393 109.96 91.7198C102.573 93.6228 88.8268 97.1667 58.6667 97.1667C28.292 97.1667 14.6942 93.6338 7.38833 91.7345C6.29383 91.4503 5.324 91.1992 4.44767 90.9938C2.90767 90.6363 1.83333 89.2833 1.83333 87.7067V84.3333L0 82.5V87.7067C0 90.134 1.66833 92.2295 4.0315 92.7795C10.9322 94.3873 23.6812 99 58.6667 99C93.3478 99 106.372 94.3818 113.296 92.7758C115.661 92.2258 117.333 90.1285 117.333 87.6993V82.5"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M79.6139 20.1666L115.245 81.7354C115.841 82.7566 115.344 84.0656 114.214 84.4102C107.345 86.4966 89.3159 89.8333 58.6662 89.8333C27.9744 89.8333 9.97652 86.3371 3.12535 84.2526C1.99602 83.9079 1.49919 82.5989 2.09502 81.5778L37.7204 20.1666L36.6662 18.3333L0.503686 80.6666C-0.686148 82.7071 0.322186 85.3251 2.58085 86.0163C9.60985 88.1704 27.7104 91.6666 58.6662 91.6666C89.4625 91.6666 107.664 88.3189 114.742 86.1666C117.008 85.4772 118.022 82.8574 116.829 80.8133L80.6662 18.3333"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M110.814 92.4116L115.245 100.069C115.841 101.089 115.344 102.4 114.214 102.742C107.345 104.831 89.3159 108.167 58.6662 108.167C27.9744 108.167 9.97469 104.671 3.12535 102.585C1.99602 102.242 1.49919 100.931 2.09502 99.9117L6.41985 92.4556L4.75885 91.6672L0.503686 99.0006C-0.686148 101.041 0.322185 103.657 2.58085 104.35C9.60985 106.504 27.7104 110.001 58.6662 110.001C89.4625 110.001 107.664 106.653 114.742 104.501C117.007 103.811 118.022 101.191 116.829 99.1472L112.682 91.9789L110.814 92.4116Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M58.667 0C47.238 0 36.667 7.1335 36.667 18.3407V20.1667C36.667 20.1667 42.6052 23.8333 58.667 23.8333C74.6665 23.8333 80.667 20.1667 80.667 20.1667V18.3333C80.667 7.24167 70.767 0 58.667 0ZM58.667 1.83333C70.3527 1.83333 78.8337 8.7725 78.8337 18.3333V19.0172C76.6887 19.9302 70.5103 22 58.667 22C46.7705 22 40.6197 19.9283 38.5003 19.0227V18.3407C38.5003 12.3658 41.7692 8.55617 44.51 6.41117C48.2317 3.50167 53.3907 1.83333 58.667 1.83333Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M69.6667 53.1666C70.6768 53.1666 71.5 53.9898 71.5 54.9999V89.8333H73.3333V54.9999C73.3333 52.9741 71.6925 51.3333 69.6667 51.3333H47.6667C45.6408 51.3333 44 52.9741 44 54.9999V89.8333H45.8333V54.9999C45.8333 53.9898 46.6565 53.1666 47.6667 53.1666H69.6667Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M58.6667 56.8333C53.6048 56.8333 49.5 60.9381 49.5 65.9999C49.5 71.0618 53.6048 75.1666 58.6667 75.1666C63.7285 75.1666 67.8333 71.0618 67.8333 65.9999C67.8333 60.9381 63.7285 56.8333 58.6667 56.8333ZM58.6667 58.6666C62.711 58.6666 66 61.9556 66 65.9999C66 70.0443 62.711 73.3333 58.6667 73.3333C54.6223 73.3333 51.3333 70.0443 51.3333 65.9999C51.3333 61.9556 54.6223 58.6666 58.6667 58.6666Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M63.2503 66C62.7443 66 62.3337 65.5893 62.3337 65.0833C62.3337 63.5672 61.0998 62.3333 59.5837 62.3333C59.0777 62.3333 58.667 61.9227 58.667 61.4167C58.667 60.9107 59.0777 60.5 59.5837 60.5C62.11 60.5 64.167 62.5552 64.167 65.0833C64.167 65.5893 63.7563 66 63.2503 66Z"
-        :class="primaryFillColor"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <rect width="117.333" height="110" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
-
-<script setup>
-const props = defineProps({
-  primaryFillColor: {
-    type: String,
-    default: 'fill-primary-500',
-  },
-  secondaryFillColor: {
-    type: String,
-    default: 'fill-gray-600',
-  },
-})
-</script>
diff --git a/resources/scripts/components/icons/empty/MoonwalkerIcon.vue b/resources/scripts/components/icons/empty/MoonwalkerIcon.vue
deleted file mode 100644
index beeb73f2..00000000
--- a/resources/scripts/components/icons/empty/MoonwalkerIcon.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <svg
-    width="154"
-    height="110"
-    viewBox="0 0 154 110"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0)">
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M33.4784 93.2609C33.4784 94.5809 32.4071 95.6522 31.0871 95.6522C29.7671 95.6522 28.6958 94.5809 28.6958 93.2609C28.6958 91.9409 29.7671 90.8696 31.0871 90.8696C32.4071 90.8696 33.4784 91.9409 33.4784 93.2609Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M78.913 93.2609C78.913 94.5809 77.8417 95.6522 76.5217 95.6522C75.2017 95.6522 74.1304 94.5809 74.1304 93.2609C74.1304 91.9409 75.2017 90.8696 76.5217 90.8696C77.8417 90.8696 78.913 91.9409 78.913 93.2609Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M124.348 93.2609C124.348 94.5809 123.277 95.6522 121.957 95.6522C120.637 95.6522 119.565 94.5809 119.565 93.2609C119.565 91.9409 120.637 90.8696 121.957 90.8696C123.277 90.8696 124.348 91.9409 124.348 93.2609Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M148.261 54.9999C149.578 54.9999 150.652 56.0736 150.652 57.3913V83.6956C150.652 87.658 147.441 90.8695 143.478 90.8695H137.352V93.2608H143.478C148.761 93.2608 153.043 88.978 153.043 83.6956V57.3913C153.043 54.7489 150.903 52.6086 148.261 52.6086H4.78261C2.14022 52.6086 0 54.7489 0 57.3913V83.6956C0 88.978 4.28283 93.2608 9.56522 93.2608H15.4478V90.8695H9.56522C5.60283 90.8695 2.3913 87.658 2.3913 83.6956V57.3913C2.3913 56.0713 3.46261 54.9999 4.78261 54.9999H148.261ZM106.243 90.8695H91.7113L92.1011 93.2608H106.145L106.243 90.8695ZM60.8946 90.8695H46.5587L46.4607 93.2608H60.6985L60.8946 90.8695Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M38.2611 45.4348H23.9133C22.5933 45.4348 21.522 46.5061 21.522 47.8261V52.6087C21.522 53.9287 22.5933 55 23.9133 55H38.2611C39.5811 55 40.6524 53.9287 40.6524 52.6087V47.8261C40.6524 46.5061 39.5811 45.4348 38.2611 45.4348ZM23.9133 52.6087H38.2611V47.8261H23.9133V52.6087Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M28.6957 62.174C28.6957 63.494 27.6244 64.5653 26.3044 64.5653C24.9844 64.5653 23.9131 63.494 23.9131 62.174C23.9131 60.854 24.9844 59.7827 26.3044 59.7827C27.6244 59.7827 28.6957 60.854 28.6957 62.174Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M38.2606 62.174C38.2606 63.494 37.1893 64.5653 35.8693 64.5653C34.5493 64.5653 33.478 63.494 33.478 62.174C33.478 60.854 34.5493 59.7827 35.8693 59.7827C37.1893 59.7827 38.2606 60.854 38.2606 62.174Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M59.7826 64.5653H45.4348C44.1195 64.5653 43.0435 63.4892 43.0435 62.174C43.0435 60.8588 44.1195 59.7827 45.4348 59.7827H59.7826C61.0978 59.7827 62.1739 60.8588 62.1739 62.174C62.1739 63.4892 61.0978 64.5653 59.7826 64.5653Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M101.793 40.0497L118.533 11.354L119.982 13.6162L104.754 39.722L101.793 40.0497Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M110.163 40.0496L124.556 15.3761L127.383 15.2781L112.973 39.9826L110.163 40.0496Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M74.1304 7.17402H119.565V4.78271H74.1304V7.17402Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M74.1304 14.3478H119.565V11.9565H74.1304V14.3478Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M71.7389 2.3913V16.7391H50.2172C48.8996 16.7391 47.8259 15.6654 47.8259 14.3478V11.9565H45.4346V14.3478C45.4346 16.9902 47.5748 19.1304 50.2172 19.1304H74.1302V0H50.2172C47.5748 0 45.4346 2.14022 45.4346 4.78261V7.17391H47.8259V4.78261C47.8259 3.465 48.8996 2.3913 50.2172 2.3913H71.7389Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M124.348 2.39136C120.385 2.39136 117.174 5.60288 117.174 9.56527C117.174 13.5277 120.385 16.7392 124.348 16.7392C128.31 16.7392 131.522 13.5277 131.522 9.56527C131.522 5.60288 128.31 2.39136 124.348 2.39136ZM124.348 4.78266C126.985 4.78266 129.13 6.92766 129.13 9.56527C129.13 12.2029 126.985 14.3479 124.348 14.3479C121.71 14.3479 119.565 12.2029 119.565 9.56527C119.565 6.92766 121.71 4.78266 124.348 4.78266Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M108.902 38.261C98.1965 38.261 89.1358 45.2986 86.0869 55.0001H131.718C128.669 45.2986 119.608 38.261 108.902 38.261ZM108.902 40.6523C117.219 40.6523 124.608 45.3416 128.191 52.6088H89.6141C93.1963 45.3416 100.585 40.6523 108.902 40.6523Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M31.0868 76.5217C21.842 76.5217 14.3477 84.0161 14.3477 93.2609C14.3477 102.506 21.842 110 31.0868 110C40.3316 110 47.8259 102.506 47.8259 93.2609C47.8259 84.0161 40.3316 76.5217 31.0868 76.5217ZM31.0868 78.913C38.9972 78.913 45.4346 85.3504 45.4346 93.2609C45.4346 101.171 38.9972 107.609 31.0868 107.609C23.1764 107.609 16.739 101.171 16.739 93.2609C16.739 85.3504 23.1764 78.913 31.0868 78.913Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M121.956 76.5217C112.712 76.5217 105.217 84.0161 105.217 93.2609C105.217 102.506 112.712 110 121.956 110C131.201 110 138.696 102.506 138.696 93.2609C138.696 84.0161 131.201 76.5217 121.956 76.5217ZM121.956 78.913C129.867 78.913 136.304 85.3504 136.304 93.2609C136.304 101.171 129.867 107.609 121.956 107.609C114.046 107.609 107.609 101.171 107.609 93.2609C107.609 85.3504 114.046 78.913 121.956 78.913Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M76.5218 76.5217C67.2771 76.5217 59.7827 84.0161 59.7827 93.2609C59.7827 102.506 67.2771 110 76.5218 110C85.7666 110 93.261 102.506 93.261 93.2609C93.261 84.0161 85.7666 76.5217 76.5218 76.5217ZM76.5218 78.913C84.4323 78.913 90.8697 85.3504 90.8697 93.2609C90.8697 101.171 84.4323 107.609 76.5218 107.609C68.6114 107.609 62.174 101.171 62.174 93.2609C62.174 85.3504 68.6114 78.913 76.5218 78.913Z"
-        :class="secondaryFillColor"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <rect width="153.043" height="110" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
-
-<script setup>
-const props = defineProps({
-  primaryFillColor: {
-    type: String,
-    default: 'fill-primary-500',
-  },
-  secondaryFillColor: {
-    type: String,
-    default: 'fill-gray-600',
-  },
-})
-</script>
diff --git a/resources/scripts/components/icons/empty/ObservatoryIcon.vue b/resources/scripts/components/icons/empty/ObservatoryIcon.vue
deleted file mode 100644
index 3ee8960c..00000000
--- a/resources/scripts/components/icons/empty/ObservatoryIcon.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-  <svg
-    width="97"
-    height="110"
-    viewBox="0 0 97 110"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0)">
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M41.25 104.844H55V84.2188H41.25V104.844ZM42.9688 103.125H53.2813V85.9375H42.9688V103.125Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M0 110H96.25V103.125H0V110ZM1.71875 108.281H94.5312V104.844H1.71875V108.281Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M34.375 8.59375H61.875V6.875H34.375V8.59375Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M48.125 15.4688C42.4291 15.4688 37.8125 20.0853 37.8125 25.7812C37.8125 31.4772 42.4291 36.0938 48.125 36.0938C53.8209 36.0938 58.4375 31.4772 58.4375 25.7812C58.4375 20.0853 53.8209 15.4688 48.125 15.4688ZM48.125 17.1875C52.8636 17.1875 56.7188 21.0427 56.7188 25.7812C56.7188 30.5198 52.8636 34.375 48.125 34.375C43.3864 34.375 39.5312 30.5198 39.5312 25.7812C39.5312 21.0427 43.3864 17.1875 48.125 17.1875Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M12.8906 63.5938C12.418 63.5938 12.0312 63.207 12.0312 62.7344V55.8594C12.0312 55.3867 12.418 55 12.8906 55C13.3633 55 13.75 55.3867 13.75 55.8594V62.7344C13.75 63.207 13.3633 63.5938 12.8906 63.5938Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M21.4844 63.5938C21.0117 63.5938 20.625 63.207 20.625 62.7344V55.8594C20.625 55.3867 21.0117 55 21.4844 55C21.957 55 22.3438 55.3867 22.3438 55.8594V62.7344C22.3438 63.207 21.957 63.5938 21.4844 63.5938Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M30.0781 63.5938C29.6055 63.5938 29.2188 63.207 29.2188 62.7344V55.8594C29.2188 55.3867 29.6055 55 30.0781 55C30.5508 55 30.9375 55.3867 30.9375 55.8594V62.7344C30.9375 63.207 30.5508 63.5938 30.0781 63.5938Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M38.6719 63.5938C38.1992 63.5938 37.8125 63.207 37.8125 62.7344V55.8594C37.8125 55.3867 38.1992 55 38.6719 55C39.1445 55 39.5312 55.3867 39.5312 55.8594V62.7344C39.5312 63.207 39.1445 63.5938 38.6719 63.5938Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M47.2656 63.5938C46.793 63.5938 46.4062 63.207 46.4062 62.7344V55.8594C46.4062 55.3867 46.793 55 47.2656 55C47.7383 55 48.125 55.3867 48.125 55.8594V62.7344C48.125 63.207 47.7383 63.5938 47.2656 63.5938Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M55.8594 63.5938C55.3867 63.5938 55 63.207 55 62.7344V55.8594C55 55.3867 55.3867 55 55.8594 55C56.332 55 56.7187 55.3867 56.7187 55.8594V62.7344C56.7187 63.207 56.332 63.5938 55.8594 63.5938Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M64.4531 63.5938C63.9805 63.5938 63.5938 63.207 63.5938 62.7344V55.8594C63.5938 55.3867 63.9805 55 64.4531 55C64.9258 55 65.3125 55.3867 65.3125 55.8594V62.7344C65.3125 63.207 64.9258 63.5938 64.4531 63.5938Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M73.0469 63.5938C72.5742 63.5938 72.1875 63.207 72.1875 62.7344V55.8594C72.1875 55.3867 72.5742 55 73.0469 55C73.5195 55 73.9062 55.3867 73.9062 55.8594V62.7344C73.9062 63.207 73.5195 63.5938 73.0469 63.5938Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M81.6406 63.5938C81.168 63.5938 80.7812 63.207 80.7812 62.7344V55.8594C80.7812 55.3867 81.168 55 81.6406 55C82.1133 55 82.5 55.3867 82.5 55.8594V62.7344C82.5 63.207 82.1133 63.5938 81.6406 63.5938Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M3.4375 103.125H5.15625V56.7188H3.4375V103.125Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M91.0938 103.125H92.8125V56.7188H91.0938V103.125Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M34.375 0C17.2098 0.9075 3.4375 15.2745 3.4375 32.6562V51.5625H34.375V0ZM32.6562 1.86484V49.8438H5.15625V32.6562C5.15625 16.7853 17.0947 3.59391 32.6562 1.86484Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M61.875 0V51.5625H92.8125V32.6562C92.8125 15.2745 79.0402 0.9075 61.875 0ZM63.5938 1.86484C79.1553 3.59391 91.0938 16.7853 91.0938 32.6562V49.8438H63.5938V1.86484Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M9.45312 34.375C8.97875 34.375 8.59375 33.99 8.59375 33.5157C8.59375 22.9316 13.6262 14.1247 22.7648 8.71238C23.1756 8.47347 23.7033 8.60925 23.9422 9.01488C24.1845 9.42222 24.0487 9.9516 23.6414 10.1939C14.9222 15.3553 10.3125 23.4197 10.3125 33.5157C10.3125 33.99 9.9275 34.375 9.45312 34.375Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M54.1406 25.7812C53.6663 25.7812 53.2813 25.3962 53.2813 24.9219C53.2813 22.8748 51.0314 20.625 48.9844 20.625C48.51 20.625 48.125 20.24 48.125 19.7656C48.125 19.2913 48.51 18.9062 48.9844 18.9062C51.963 18.9062 55 21.9433 55 24.9219C55 25.3962 54.615 25.7812 54.1406 25.7812Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M0 56.7188H96.25V49.8438H0V56.7188ZM1.71875 55H94.5312V51.5625H1.71875V55Z"
-        :class="primaryFillColor"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <rect width="96.25" height="110" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
-
-<script setup>
-const props = defineProps({
-  primaryFillColor: {
-    type: String,
-    default: 'fill-primary-500',
-  },
-  secondaryFillColor: {
-    type: String,
-    default: 'fill-gray-600',
-  },
-})
-</script>
diff --git a/resources/scripts/components/icons/empty/SatelliteIcon.vue b/resources/scripts/components/icons/empty/SatelliteIcon.vue
deleted file mode 100644
index a1d4c090..00000000
--- a/resources/scripts/components/icons/empty/SatelliteIcon.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-  <svg
-    width="110"
-    height="110"
-    viewBox="0 0 110 110"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0)">
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M5.76398 22.9512L4.54883 21.7361L21.7363 4.54858L22.9515 5.76374L5.76398 22.9512Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M88.264 105.451L87.0488 104.236L104.236 87.0486L105.451 88.2637L88.264 105.451Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M29.8265 81.3887L28.6113 80.1736L38.9238 69.8611L40.139 71.0762L29.8265 81.3887Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M30.9375 81.6406C30.9375 83.0637 29.7825 84.2188 28.3594 84.2188C26.9362 84.2188 25.7812 83.0637 25.7812 81.6406C25.7812 80.2175 26.9362 79.0625 28.3594 79.0625C29.7825 79.0625 30.9375 80.2175 30.9375 81.6406Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M77.3435 61.5801C76.4635 61.5801 75.5835 61.9152 74.9132 62.5873L62.5863 74.9124C61.244 76.2548 61.244 78.4324 62.5863 79.7748L92.8123 110.001L110 92.8132L79.7738 62.5873C79.1035 61.9152 78.2235 61.5801 77.3435 61.5801ZM77.3435 63.2988C77.8024 63.2988 78.2338 63.4776 78.5587 63.8024L107.569 92.8132L92.8123 107.569L63.8015 78.5596C63.4767 78.2348 63.2979 77.8034 63.2979 77.3445C63.2979 76.8838 63.4767 76.4524 63.8015 76.1276L76.1284 63.8024C76.4532 63.4776 76.8846 63.2988 77.3435 63.2988Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M17.1875 0L0 17.1875L30.2259 47.4134C30.8963 48.0838 31.7763 48.4206 32.6562 48.4206C33.5363 48.4206 34.4162 48.0838 35.0866 47.4134L47.4134 35.0866C48.7558 33.7442 48.7558 31.5683 47.4134 30.2259L17.1875 0ZM17.1875 2.43031L46.1983 31.4411C46.5231 31.7659 46.7019 32.1973 46.7019 32.6562C46.7019 33.1152 46.5231 33.5466 46.1983 33.8714L33.8714 46.1983C33.5466 46.5231 33.1152 46.7019 32.6562 46.7019C32.1973 46.7019 31.7659 46.5231 31.4411 46.1983L2.43031 17.1875L17.1875 2.43031Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M60.156 28.9238C59.276 28.9238 58.396 29.259 57.7257 29.931L29.9301 57.7249C28.5878 59.0673 28.5878 61.2449 29.9301 62.5873L47.4132 80.0687C48.0835 80.7407 48.9635 81.0759 49.8435 81.0759C50.7235 81.0759 51.6035 80.7407 52.2738 80.0687L80.0695 52.2748C81.4118 50.9324 81.4118 48.7548 80.0695 47.4124L62.5863 29.931C61.916 29.259 61.036 28.9238 60.156 28.9238ZM60.156 30.6426C60.6149 30.6426 61.0463 30.8213 61.3712 31.1462L78.8543 48.6276C79.1792 48.9524 79.3579 49.3838 79.3579 49.8445C79.3579 50.3034 79.1792 50.7348 78.8543 51.0596L51.0587 78.8535C50.7338 79.1784 50.3024 79.3571 49.8435 79.3571C49.3846 79.3571 48.9532 79.1784 48.6284 78.8535L31.1453 61.3721C30.8204 61.0473 30.6417 60.6159 30.6417 60.157C30.6417 59.6963 30.8204 59.2649 31.1453 58.9401L58.9409 31.1462C59.2657 30.8213 59.6971 30.6426 60.156 30.6426Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M71.0765 40.1387L69.8613 38.9236L72.4395 36.3455L73.6546 37.5606L71.0765 40.1387Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M72.9858 24.8608C69.6291 28.2176 69.6291 33.6574 72.9858 37.0141C74.6633 38.6916 76.8633 39.5321 79.0633 39.5321C81.2616 39.5321 83.4616 38.6916 85.1391 37.0141L72.9858 24.8608ZM73.1388 27.4441L82.5558 36.8612C81.5091 37.4816 80.3111 37.8133 79.0633 37.8133C77.226 37.8133 75.5003 37.0966 74.201 35.799C72.9033 34.4996 72.1883 32.774 72.1883 30.9383C72.1883 29.6888 72.5183 28.4908 73.1388 27.4441Z"
-        :class="secondaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M86.1459 32.0051C85.9259 32.0051 85.7059 31.9209 85.5374 31.7542C85.2023 31.4173 85.2023 30.8742 85.5374 30.5373C86.3504 29.7261 86.7973 28.6467 86.7973 27.5003C86.7973 26.3522 86.3504 25.2728 85.5374 24.4615C83.9149 22.839 81.0859 22.839 79.4616 24.4615C79.1265 24.7984 78.5834 24.7984 78.2465 24.4615C77.9113 24.1264 77.9113 23.5833 78.2465 23.2464C80.5187 20.9742 84.4821 20.9742 86.7543 23.2464C87.8904 24.3825 88.516 25.8933 88.516 27.5003C88.516 29.1073 87.8904 30.6181 86.7543 31.7542C86.5859 31.9209 86.3659 32.0051 86.1459 32.0051Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M89.792 35.6514C89.572 35.6514 89.352 35.5672 89.1836 35.4004C88.8484 35.0636 88.8484 34.5204 89.1836 34.1836C90.9711 32.3978 91.9525 30.0259 91.9525 27.4994C91.9525 24.9745 90.9711 22.6009 89.1836 20.8151C87.3978 19.0294 85.0259 18.0462 82.4994 18.0462C79.9745 18.0462 77.6009 19.0294 75.8152 20.8151C75.48 21.1503 74.9352 21.1503 74.6 20.8151C74.2648 20.48 74.2648 19.9351 74.6 19.6C78.9553 15.2447 86.0434 15.2447 90.4005 19.6C94.7558 23.9553 94.7558 31.0434 90.4005 35.4004C90.232 35.5672 90.012 35.6514 89.792 35.6514Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M93.4379 39.297C93.2179 39.297 92.9979 39.2128 92.8295 39.0461C92.4944 38.7092 92.4944 38.1661 92.8295 37.8292C95.5898 35.0706 97.1092 31.4028 97.1092 27.4995C97.1092 23.5979 95.5898 19.9284 92.8295 17.1698C90.0709 14.4112 86.4031 12.8901 82.4998 12.8901C78.5983 12.8901 74.9287 14.4112 72.1701 17.1698C71.835 17.505 71.2901 17.505 70.955 17.1698C70.6198 16.8347 70.6198 16.2898 70.955 15.9547C74.0384 12.8712 78.1394 11.1714 82.4998 11.1714C86.862 11.1714 90.9612 12.8712 94.0464 15.9547C97.1298 19.0381 98.8279 23.139 98.8279 27.4995C98.8279 31.8617 97.1298 35.9609 94.0464 39.0461C93.8779 39.2128 93.6579 39.297 93.4379 39.297Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M39.7832 40.9981L8.8457 10.0606L10.0609 8.84546L40.9984 39.783L39.7832 40.9981Z"
-        :class="primaryFillColor"
-      />
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M99.9395 101.154L69.002 70.2169L70.2171 69.0017L101.155 99.9392L99.9395 101.154Z"
-        :class="primaryFillColor"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <rect width="110" height="110" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
-
-<script setup>
-const props = defineProps({
-  primaryFillColor: {
-    type: String,
-    default: 'fill-primary-500',
-  },
-  secondaryFillColor: {
-    type: String,
-    default: 'fill-gray-600',
-  },
-})
-</script>
diff --git a/resources/scripts/components/icons/empty/UFOIcon.vue b/resources/scripts/components/icons/empty/UFOIcon.vue
deleted file mode 100644
index 6c894eb9..00000000
--- a/resources/scripts/components/icons/empty/UFOIcon.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <svg
-    width="110"
-    height="110"
-    viewBox="0 0 110 110"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M55 13.75C24.6245 13.75 0 22.9848 0 34.375C0 45.7652 24.6245 55 55 55C85.3755 55 110 45.7652 110 34.375C110 22.9848 85.3755 13.75 55 13.75ZM55 15.4688C86.8708 15.4688 108.281 25.245 108.281 34.375C108.281 43.505 86.8708 53.2812 55 53.2812C23.1292 53.2812 1.71875 43.505 1.71875 34.375C1.71875 25.245 23.1292 15.4688 55 15.4688Z"
-      :class="secondaryFillColor"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M54.9999 1.71875C66.0842 1.71875 75.7452 7.92172 80.697 17.038L82.732 17.2081C77.6737 7.01078 67.1549 0 54.9999 0C42.7985 0 32.2454 7.06406 27.2095 17.3267L29.2479 17.1411C34.1824 7.96812 43.8745 1.71875 54.9999 1.71875Z"
-      :class="primaryFillColor"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M55 96.25C40.7619 96.25 25.7812 99.3283 25.7812 103.125C25.7812 106.922 40.7619 110 55 110C69.2381 110 84.2188 106.922 84.2188 103.125C84.2188 99.3283 69.2381 96.25 55 96.25ZM55 97.9688C70.4602 97.9688 81.5959 101.317 82.4811 103.125C81.5959 104.933 70.4602 108.281 55 108.281C39.5398 108.281 28.4041 104.933 27.5189 103.125C28.4041 101.317 39.5398 97.9688 55 97.9688Z"
-      :class="primaryFillColor"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M27.4756 103.328L25.8049 102.922L41.2737 39.3286L42.9443 39.7342L27.4756 103.328Z"
-      :class="primaryFillColor"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M82.5247 103.328L67.0559 39.7342L68.7265 39.3286L84.1953 102.922L82.5247 103.328Z"
-      :class="primaryFillColor"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M68.75 39.5312C68.75 42.3792 62.5934 44.6875 55 44.6875C47.4066 44.6875 41.25 42.3792 41.25 39.5312C41.25 36.6833 47.4066 34.375 55 34.375C62.5934 34.375 68.75 36.6833 68.75 39.5312Z"
-      :class="secondaryFillColor"
-    />
-  </svg>
-</template>
-
-<script setup>
-const props = defineProps({
-  primaryFillColor: {
-    type: String,
-    default: 'fill-primary-500',
-  },
-  secondaryFillColor: {
-    type: String,
-    default: 'fill-gray-600',
-  },
-})
-</script>
diff --git a/resources/scripts/components/list/BaseList.vue b/resources/scripts/components/list/BaseList.vue
deleted file mode 100644
index 2189e375..00000000
--- a/resources/scripts/components/list/BaseList.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <div class="list-none">
-    <slot />
-  </div>
-</template>
-<script>
-export default {
-  name: 'List',
-}
-</script>
diff --git a/resources/scripts/components/list/BaseListItem.vue b/resources/scripts/components/list/BaseListItem.vue
deleted file mode 100644
index 9624c069..00000000
--- a/resources/scripts/components/list/BaseListItem.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <router-link v-bind="$attrs" :class="containerClass">
-    <span v-if="hasIconSlot" class="mr-3">
-      <slot name="icon" />
-    </span>
-    <span>{{ title }}</span>
-  </router-link>
-</template>
-
-<script>
-import { ref, computed } from 'vue'
-
-export default {
-  name: 'ListItem',
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    active: {
-      type: Boolean,
-      required: true,
-    },
-    index: {
-      type: Number,
-      default: null,
-    },
-  },
-  setup(props, { slots }) {
-    const defaultClass = `cursor-pointer px-3 py-2 mb-0.5 text-sm font-medium leading-5 flex items-center rounded-lg transition-colors`
-    let hasIconSlot = computed(() => {
-      return !!slots.icon
-    })
-    let containerClass = computed(() => {
-      if (props.active) return `${defaultClass} text-primary-600 bg-primary-50 font-semibold`
-      else return `${defaultClass} text-body hover:bg-hover hover:text-heading`
-    })
-    return {
-      hasIconSlot,
-      containerClass,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/components/notifications/NotificationItem.vue b/resources/scripts/components/notifications/NotificationItem.vue
deleted file mode 100644
index 21a58615..00000000
--- a/resources/scripts/components/notifications/NotificationItem.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-  <div
-    :class="success || info ? 'bg-surface' : 'bg-alert-error-bg'"
-    class="
-      max-w-sm
-      mb-3
-      rounded-lg
-      shadow-lg
-      cursor-pointer
-      pointer-events-auto
-      w-full
-      md:w-96
-    "
-    @click.stop="hideNotificationAction"
-    @mouseenter="clearNotificationTimeOut"
-    @mouseleave="setNotificationTimeOut"
-  >
-    <div class="overflow-hidden rounded-lg shadow-xs">
-      <div class="p-4">
-        <div class="flex items-start">
-          <div class="shrink-0">
-            <svg
-              v-if="success"
-              class="w-6 h-6 text-alert-success-text"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            <svg
-              v-if="info"
-              class="w-6 h-6 text-status-blue"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-            <svg
-              v-if="error"
-              class="w-6 h-6 text-alert-error-text"
-              fill="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </div>
-          <div class="flex-1 w-0 ml-3 text-left">
-            <p
-              :class="`text-sm leading-5 font-medium ${
-                success || info ? 'text-heading' : 'text-alert-error-text'
-              }`"
-            >
-              {{
-                notification.title
-                  ? notification.title
-                  : success
-                  ? 'Success!'
-                  : 'Error'
-              }}
-            </p>
-            <p
-              :class="`mt-1 text-sm leading-5 ${
-                success || info ? 'text-muted' : 'text-alert-error-text'
-              }`"
-            >
-              {{
-                notification.message
-                  ? notification.message
-                  : success
-                  ? 'Successful'
-                  : 'Something went wrong'
-              }}
-            </p>
-          </div>
-          <div class="flex shrink-0">
-            <button
-              :class="
-                success || info
-                  ? ' text-subtle focus:text-muted'
-                  : 'text-alert-error-text focus:text-alert-error-text'
-              "
-              class="
-                inline-flex
-                w-5
-                h-5
-                transition
-                duration-150
-                ease-in-out
-                focus:outline-hidden
-              "
-              @click="hideNotificationAction"
-            >
-              <svg
-                class="w-6 h-6"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                  clip-rule="evenodd"
-                ></path>
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, computed, ref } from 'vue'
-import { useNotificationStore } from '@/scripts/stores/notification'
-
-const props = defineProps({
-  notification: {
-    type: Object,
-    default: null,
-  },
-})
-
-const notificationStore = useNotificationStore()
-
-let notiTimeOut = ref('')
-
-const success = computed(() => {
-  return props.notification.type == 'success'
-})
-
-const error = computed(() => {
-  return props.notification.type == 'error'
-})
-
-const info = computed(() => {
-  return props.notification.type == 'info'
-})
-
-function hideNotificationAction() {
-  notificationStore.hideNotification(props.notification)
-}
-
-function clearNotificationTimeOut() {
-  clearTimeout(notiTimeOut)
-}
-
-function setNotificationTimeOut() {
-  notiTimeOut.value = setTimeout(() => {
-    notificationStore.hideNotification(props.notification)
-  }, props.notification.time || 5000)
-}
-
-onMounted(() => {
-  setNotificationTimeOut()
-})
-</script>
diff --git a/resources/scripts/components/notifications/NotificationRoot.vue b/resources/scripts/components/notifications/NotificationRoot.vue
deleted file mode 100644
index 9371c897..00000000
--- a/resources/scripts/components/notifications/NotificationRoot.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <div
-    class="
-      fixed
-      inset-0
-      z-50
-      flex flex-col
-      items-end
-      justify-start
-      w-full
-      px-4
-      py-6
-      pointer-events-none
-      sm:p-6
-    "
-  >
-    <transition-group
-      enter-active-class="transition duration-300 ease-out"
-      enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-      enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-      leave-active-class="transition duration-100 ease-in"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <NotificationItem
-        v-for="notification in notifications"
-        :key="notification.id"
-        :notification="notification"
-      />
-    </transition-group>
-  </div>
-</template>
-
-<script>
-import NotificationItem from './NotificationItem.vue'
-import { computed } from 'vue'
-import { useNotificationStore } from '@/scripts/stores/notification'
-export default {
-  components: {
-    NotificationItem,
-  },
-  setup() {
-    const notificationStore = useNotificationStore()
-
-    const notifications = computed(() => {
-      return notificationStore.notifications
-    })
-
-    return {
-      notifications,
-    }
-  },
-}
-</script>
diff --git a/resources/scripts/components/svg/LoginBackground.vue b/resources/scripts/components/svg/LoginBackground.vue
deleted file mode 100644
index daae47ff..00000000
--- a/resources/scripts/components/svg/LoginBackground.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <svg
-    viewBox="0 0 1012 1023"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    preserveAspectRatio="none"
-    class="text-primary-500"
-  >
-    <path
-      d="M116.21 472.5C55.1239 693.5 78.5219 837.5 114.349 1023H1030.5V-1L0 -106C147.5 21.5 172.311 269.536 116.21 472.5Z"
-      fill="url(#paint0_linear)"
-    />
-    <defs>
-      <linearGradient
-        id="paint0_linear"
-        x1="515.25"
-        y1="-106"
-        x2="515.25"
-        y2="1023"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop
-          stop-color="var(--color-primary-500)"
-        />
-        <stop
-          offset="1"
-          stop-color="var(--color-primary-400)"
-        />
-      </linearGradient>
-    </defs>
-  </svg>
-</template>
-
-<script setup>
-</script>
diff --git a/resources/scripts/components/svg/LoginBackgroundOverlay.vue b/resources/scripts/components/svg/LoginBackgroundOverlay.vue
deleted file mode 100644
index 417fb86b..00000000
--- a/resources/scripts/components/svg/LoginBackgroundOverlay.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <svg
-    width="1122"
-    height="1017"
-    viewBox="0 0 1122 1017"
-    preserveAspectRatio="none"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M226.002 466.5C164.935 687.5 188.326 831.5 224.141 1017H1140V-7L0 -109.5C142.5 -7.5 282.085 263.536 226.002 466.5Z"
-      fill="url(#paint0_linear)"
-      fill-opacity="0.1"
-    />
-    <defs>
-      <linearGradient
-        id="paint0_linear"
-        x1="649.5"
-        y1="-7"
-        x2="649.5"
-        y2="1017"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop
-          stop-color="var(--color-primary-500)"
-        />
-        <stop
-          offset="1"
-          stop-color="var(--color-primary-400)"
-        />
-      </linearGradient>
-    </defs>
-  </svg>
-</template>
diff --git a/resources/scripts/components/svg/LoginBottomVector.vue b/resources/scripts/components/svg/LoginBottomVector.vue
deleted file mode 100644
index d734938b..00000000
--- a/resources/scripts/components/svg/LoginBottomVector.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <svg viewBox="0 0 1170 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M690 4.08004C518 -9.91998 231 4.08004 -6 176.361L231 197.08L1170 219.08C1113.33 175.747 909.275 21.928 690 4.08004Z"
-      fill="white"
-      fill-opacity="0.1"
-    />
-  </svg>
-</template>
diff --git a/resources/scripts/components/svg/LoginPlanetCrater.vue b/resources/scripts/components/svg/LoginPlanetCrater.vue
deleted file mode 100644
index 15f24929..00000000
--- a/resources/scripts/components/svg/LoginPlanetCrater.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <svg
-    width="422"
-    height="290"
-    viewBox="0 0 422 290"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0)">
-      <path
-        opacity="0.3"
-        d="M220.111 290.223C341.676 290.223 440.223 191.676 440.223 70.1115C440.223 -51.4527 341.676 -150 220.111 -150C98.5473 -150 0 -51.4527 0 70.1115C0 191.676 98.5473 290.223 220.111 290.223Z"
-        fill="white"
-        fill-opacity="0.1"
-      />
-      <path
-        opacity="0.3"
-        d="M220.111 246.513C317.535 246.513 396.513 167.535 396.513 70.1114C396.513 -27.3124 317.535 -106.29 220.111 -106.29C122.688 -106.29 43.71 -27.3124 43.71 70.1114C43.71 167.535 122.688 246.513 220.111 246.513Z"
-        fill="white"
-        fill-opacity="0.1"
-      />
-      <path
-        d="M97.0093 35.322C96.7863 35.991 96.5633 36.66 96.5633 37.3291C94.1101 46.4725 92.7721 55.6159 92.3261 64.5364C91.88 74.5718 92.7721 84.6073 94.5562 94.1968C103.477 140.137 137.374 179.387 185.545 192.991C224.794 204.141 265.159 195.444 295.712 173.143C309.538 163.107 321.358 150.172 330.278 135.231C335.854 125.864 340.314 115.606 343.436 104.678C346.335 94.6428 347.896 84.6073 348.119 74.7949C348.788 56.954 345.666 39.3362 339.422 23.2794C325.372 -12.6253 295.043 -41.8397 255.124 -52.9902C211.637 -65.2558 167.481 -53.6593 136.036 -26.452C117.749 -10.6182 103.923 10.3448 97.0093 35.322Z"
-        fill="white"
-        fill-opacity="0.1"
-      />
-      <path
-        d="M97.0095 35.3223C96.7865 35.9913 96.5635 36.6603 96.5635 37.3294L347.896 74.7952C348.565 56.9543 345.443 39.3365 339.199 23.2797L136.036 -26.4517C117.749 -10.6179 103.923 10.3451 97.0095 35.3223Z"
-        fill="white"
-        fill-opacity="0.05"
-      />
-      <path
-        d="M92.3261 64.7598C91.88 74.7952 92.7721 84.8307 94.5562 94.4202L295.489 173.366C309.315 163.33 321.135 150.396 330.055 135.454L92.3261 64.7598Z"
-        fill="white"
-        fill-opacity="0.05"
-      />
-      <path
-        d="M153.431 11.9056C151.424 19.265 152.316 26.8473 155.661 33.0916C159.229 39.7819 165.473 45.1342 173.279 47.3643C188.443 51.6015 204.5 42.6811 208.737 27.5163C209.853 23.9482 210.076 20.157 209.629 16.5888C208.514 5.21529 200.486 -4.82018 188.889 -7.94233C173.502 -12.1795 157.668 -3.25911 153.431 11.9056Z"
-        class="fill-primary-700"
-        fill-opacity="0.8"
-      />
-      <path
-        d="M156.553 22.3869C155.438 25.9551 155.215 29.7462 155.661 33.3144C159.229 40.0047 165.473 45.357 173.279 47.5871C188.443 51.8243 204.5 42.9039 208.737 27.7391C209.852 24.171 210.075 20.3798 209.629 16.8116C206.061 10.1213 199.817 4.76908 192.011 2.53897C176.624 -1.92124 160.79 6.99919 156.553 22.3869Z"
-        class="fill-primary-500"
-        fill-opacity="0.5"
-      />
-      <path
-        d="M270.735 95.5343C267.613 100.887 266.944 106.685 268.282 112.26C269.62 118.058 273.411 123.411 278.986 126.533C289.914 132.777 303.74 128.986 309.985 118.281C311.546 115.605 312.438 112.929 312.884 110.03C314.222 101.11 309.985 91.9661 301.733 87.0599C290.806 81.0386 276.979 84.8298 270.735 95.5343Z"
-        class="fill-primary-700"
-        fill-opacity="0.8"
-      />
-      <path
-        d="M270.958 104.232C269.397 106.908 268.505 109.584 268.059 112.483C269.397 118.281 273.188 123.634 278.764 126.756C289.691 133 303.518 129.209 309.762 118.504C311.323 115.828 312.215 113.152 312.661 110.253C311.323 104.455 307.532 99.1025 301.957 95.9804C291.252 89.5131 277.426 93.3043 270.958 104.232Z"
-        class="fill-primary-500"
-        fill-opacity="0.5"
-      />
-      <path
-        d="M250.663 130.771C247.54 133.001 245.533 136.123 244.864 139.468C243.972 143.036 244.641 147.051 247.094 150.396C251.555 156.863 260.252 158.647 266.942 154.187C268.503 153.072 269.842 151.734 270.734 150.396C273.856 145.712 274.079 139.468 270.734 134.562C265.827 127.872 257.13 126.311 250.663 130.771Z"
-        class="fill-primary-700"
-        fill-opacity="0.8"
-      />
-      <path
-        d="M248.433 135.677C246.872 136.792 245.534 138.13 244.642 139.468C243.75 143.036 244.419 147.051 246.872 150.396C251.332 156.863 260.03 158.647 266.72 154.187C268.281 153.072 269.619 151.734 270.511 150.396C271.403 146.828 270.734 142.813 268.281 139.468C263.821 132.778 254.901 131.217 248.433 135.677Z"
-        class="fill-primary-500"
-        fill-opacity="0.5"
-      />
-      <path
-        d="M215.651 14.8049C214.759 18.15 215.205 21.4952 216.543 24.1713C218.104 27.0704 220.78 29.5236 224.348 30.4156C231.038 32.4227 238.175 28.4085 240.182 21.4952C240.628 19.9341 240.851 18.15 240.628 16.5889C240.182 11.4597 236.614 6.99951 231.484 5.66145C224.571 4.10037 217.435 8.11456 215.651 14.8049Z"
-        class="fill-primary-700"
-        fill-opacity="0.8"
-      />
-      <path
-        d="M216.989 19.4876C216.543 21.0487 216.32 22.8328 216.543 24.3939C218.104 27.293 220.78 29.7461 224.348 30.6382C231.039 32.6453 238.175 28.6311 240.182 21.7177C240.628 20.1567 240.851 18.3726 240.628 16.8115C239.067 13.9124 236.391 11.4593 232.823 10.5672C225.91 8.78313 218.773 12.5743 216.989 19.4876Z"
-        class="fill-primary-500"
-      />
-      <path
-        d="M122.209 124.526C121.763 125.864 121.986 127.202 122.655 128.54C123.324 129.878 124.439 130.77 126.001 131.216C128.9 132.108 131.799 130.324 132.468 127.648C132.691 126.979 132.691 126.31 132.691 125.641C132.468 123.634 130.907 121.627 128.9 121.181C126.001 120.066 123.101 121.85 122.209 124.526Z"
-        class="fill-primary-700"
-        fill-opacity="0.8"
-      />
-      <path
-        d="M122.878 126.533C122.655 127.202 122.655 127.871 122.655 128.54C123.324 129.878 124.439 130.77 126 131.216C128.899 132.108 131.798 130.324 132.468 127.648C132.691 126.979 132.691 126.31 132.691 125.641C132.021 124.303 130.906 123.411 129.345 122.965C126.446 122.073 123.547 123.634 122.878 126.533Z"
-        class="fill-primary-500"
-        fill-opacity="0.5"
-      />
-      <path
-        d="M169.487 123.188C168.149 123.411 166.811 124.08 166.142 125.195C165.25 126.31 164.804 127.648 165.027 129.209C165.473 132.108 168.149 134.116 171.048 133.67C171.717 133.67 172.386 133.224 172.832 133C174.617 131.885 175.732 129.878 175.286 127.648C175.063 124.749 172.386 122.742 169.487 123.188Z"
-        class="fill-primary-700"
-        fill-opacity="0.8"
-      />
-      <path
-        d="M167.926 124.526C167.257 124.526 166.588 124.972 166.142 125.195C165.25 126.31 164.804 127.648 165.027 129.209C165.473 132.108 168.149 134.115 171.048 133.669C171.717 133.669 172.386 133.223 172.832 133C173.724 131.885 174.17 130.547 173.947 128.986C173.501 126.087 170.825 124.08 167.926 124.526Z"
-        class="fill-primary-500"
-        fill-opacity="0.5"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <rect
-          width="440"
-          height="440"
-          fill="white"
-          transform="translate(0 -150)"
-        />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
-
diff --git a/resources/scripts/customer/customer-router.js b/resources/scripts/customer/customer-router.js
deleted file mode 100644
index f5cb2b68..00000000
--- a/resources/scripts/customer/customer-router.js
+++ /dev/null
@@ -1,103 +0,0 @@
-const LayoutBasic = () => import('@/scripts/customer/layouts/LayoutBasic.vue')
-const LayoutLogin = () => import('@/scripts/customer/layouts/LayoutLogin.vue')
-const Login = () => import('@/scripts/customer/views/auth/Login.vue')
-const ForgotPassword = () => import('@/scripts/customer/views/auth/ForgotPassword.vue')
-const ResetPassword = () => import('@/scripts/customer/views/auth/ResetPassword.vue')
-const Dashboard = () => import('@/scripts/customer/views/dashboard/Dashboard.vue')
-const Invoice = () => import('@/scripts/customer/views/invoices/Index.vue')
-const InvoiceView = () => import('@/scripts/customer/views/invoices/View.vue')
-const Estimate = () => import('@/scripts/customer/views/estimates/Index.vue')
-const EstimateView = () => import('@/scripts/customer/views/estimates/View.vue')
-const Payment = () => import('@/scripts/customer/views/payments/Index.vue')
-const PaymentView = () => import('@/scripts/customer/views/payments/View.vue')
-const SettingIndex = () => import('@/scripts/customer/views/settings/SettingsIndex.vue')
-const CustomerProfile = () => import('@/scripts/customer/views/settings/CustomerSettings.vue')
-const AddressInfo = () => import('@/scripts/customer/views/settings/AddressInformation.vue')
-
-export default [
-  {
-    path: '/:company/customer',
-    component: LayoutLogin,
-    meta: { redirectIfAuthenticated: true },
-    children: [
-      {
-        path: '',
-        component: Login,
-      },
-      {
-        path: 'login',
-        component: Login,
-        name: 'customer.login',
-      },
-      {
-        path: 'forgot-password',
-        component: ForgotPassword,
-        name: 'customer.forgot-password',
-      },
-      {
-        path: 'reset/password/:token',
-        component: ResetPassword,
-        name: 'customer.reset-password',
-      },
-    ],
-  },
-  {
-    path: '/:company/customer',
-    component: LayoutBasic,
-    meta: { requiresAuth: true },
-    children: [
-      {
-        path: 'dashboard',
-        component: Dashboard,
-        name: 'customer.dashboard',
-      },
-      {
-        path: 'invoices',
-        component: Invoice,
-        name: 'invoices.dashboard',
-      },
-      {
-        path: 'invoices/:id/view',
-        component: InvoiceView,
-        name: 'customer.invoices.view',
-      },
-      {
-        path: 'estimates',
-        component: Estimate,
-        name: 'estimates.dashboard',
-      },
-      {
-        path: 'estimates/:id/view',
-        component: EstimateView,
-        name: 'customer.estimates.view',
-      },
-      {
-        path: 'payments',
-        component: Payment,
-        name: 'payments.dashboard',
-      },
-      {
-        path: 'payments/:id/view',
-        component: PaymentView,
-        name: 'customer.payments.view',
-      },
-      {
-        path: 'settings',
-        component: SettingIndex,
-        name: 'customer',
-        children: [
-          {
-            path: 'customer-profile',
-            component: CustomerProfile,
-            name: 'customer.profile',
-          },
-          {
-            path: 'address-info',
-            component: AddressInfo,
-            name: 'customer.address.info',
-          },
-        ],
-      },
-    ],
-  },
-]
diff --git a/resources/scripts/customer/helpers/error-handling.js b/resources/scripts/customer/helpers/error-handling.js
deleted file mode 100644
index e64dfd39..00000000
--- a/resources/scripts/customer/helpers/error-handling.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useAuthStore } from '@/scripts/customer/stores/auth'
-import { useNotificationStore } from '@/scripts/stores/notification'
-
-export const handleError = (err) => {
-  const authStore = useAuthStore()
-  const notificationStore = useNotificationStore()
-
-  if (!err.response) {
-    notificationStore.showNotification({
-      type: 'error',
-      message:
-        'Please check your internet connection or wait until servers are back online.',
-    })
-  } else {
-    if (
-      err.response.data &&
-      (err.response.statusText === 'Unauthorized' ||
-        err.response.data === ' Unauthorized.')
-    ) {
-      // Unauthorized and log out
-      const msg = err.response.data.message
-        ? err.response.data.message
-        : 'Unauthorized'
-
-      showToaster(msg)
-
-      authStore.logout()
-    } else if (err.response.data.errors) {
-      // Show a notification per error
-      const errors = JSON.parse(JSON.stringify(err.response.data.errors))
-      for (const i in errors) {
-        showError(errors[i][0])
-      }
-    } else if (err.response.data.error) {
-      showError(err.response.data.error)
-    } else {
-      showError(err.response.data.message)
-    }
-  }
-}
-
-export const showError = (error) => {
-  switch (error) {
-    case 'These credentials do not match our records.':
-      showToaster('errors.login_invalid_credentials')
-      break
-
-    case 'The email has already been taken.':
-      showToaster('validation.email_already_taken')
-      break
-
-    case 'invalid_credentials':
-      showToaster('errors.invalid_credentials')
-      break
-
-    case 'Email could not be sent to this email address.':
-      showToaster('errors.email_could_not_be_sent')
-      break
-
-    case 'not_allowed':
-      showToaster('errors.not_allowed')
-      break
-
-    default:
-      showToaster(error, false)
-      break
-  }
-}
-
-export const showToaster = (msg, t = true) => {
-  const { global } = window.i18n
-  const notificationStore = useNotificationStore()
-
-  notificationStore.showNotification({
-    type: 'error',
-    message: t ? global.t(msg) : msg,
-  })
-}
diff --git a/resources/scripts/customer/layouts/LayoutBasic.vue b/resources/scripts/customer/layouts/LayoutBasic.vue
deleted file mode 100644
index e37005b7..00000000
--- a/resources/scripts/customer/layouts/LayoutBasic.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div v-if="isAppLoaded" class="h-full">
-    <NotificationRoot />
-
-    <SiteHeader />
-
-    <!-- <SiteSidebar /> -->
-
-    <main class="mt-16 pb-16 h-screen overflow-y-auto min-h-0">
-      <router-view />
-    </main>
-  </div>
-
-  <!-- <BaseGlobalLoader v-else /> -->
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from 'vue'
-import SiteHeader from '@/scripts/customer/layouts/partials/TheSiteHeader.vue'
-import NotificationRoot from '@/scripts/components/notifications/NotificationRoot.vue'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import { useRoute } from 'vue-router'
-
-const globalStore = useGlobalStore()
-const route = useRoute()
-
-const isAppLoaded = computed(() => {
-  return globalStore.isAppLoaded
-})
-
-loadData()
-
-async function loadData() {
-  await globalStore.bootstrap(route.params.company)
-}
-</script>
diff --git a/resources/scripts/customer/layouts/LayoutLogin.vue b/resources/scripts/customer/layouts/LayoutLogin.vue
deleted file mode 100644
index 2a31f5d3..00000000
--- a/resources/scripts/customer/layouts/LayoutLogin.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div
-    class="
-      min-h-screen
-      bg-surface-muted
-      flex flex-col
-      justify-center
-      py-12
-      sm:px-6
-      lg:px-8
-    "
-  >
-    <NotificationRoot />
-
-    <div class="sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
-      <MainLogo
-        v-if="!customerLogo"
-        class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
-      />
-      <img
-        v-else
-        :src="customerLogo"
-        class="block w-48 h-auto max-w-full text-primary-400 mx-auto"
-      />
-    </div>
-
-    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md px-4 sm:px-0">
-      <div class="bg-surface py-8 px-4 shadow rounded-lg sm:px-10">
-        <router-view />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import NotificationRoot from '@/scripts/components/notifications/NotificationRoot.vue'
-import MainLogo from '@/scripts/components/icons/MainLogo.vue'
-
-const customerLogo = computed(() => {
-  if (window.customer_logo) {
-    return window.customer_logo
-  }
-
-  return false
-})
-</script>
diff --git a/resources/scripts/customer/layouts/partials/TheSiteFooter.vue b/resources/scripts/customer/layouts/partials/TheSiteFooter.vue
deleted file mode 100644
index 75196e31..00000000
--- a/resources/scripts/customer/layouts/partials/TheSiteFooter.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <footer
-    class="
-      fixed
-      bottom-0
-      flex
-      items-center
-      justify-end
-      w-full
-      h-10
-      py-2
-      pr-8
-      text-sm
-      font-normal
-      text-body
-      bg-surface
-    "
-  >
-    Powered by
-    <a
-      href="http://bytefury.com/"
-      target="_blank"
-      class="pl-1 font-normal text-heading"
-      >Bytefury
-    </a>
-  </footer>
-</template>
diff --git a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue b/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
deleted file mode 100644
index 5d92a8fe..00000000
--- a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
+++ /dev/null
@@ -1,266 +0,0 @@
-<template>
-  <Disclosure
-    v-slot="{ open }"
-    as="nav"
-    class="bg-surface shadow-xs fixed top-0 left-0 z-20 w-full"
-  >
-    <div class="mx-auto px-8">
-      <div class="flex justify-between h-16 w-full">
-        <div class="flex">
-          <div class="shrink-0 flex items-center">
-            <a
-              :href="`/${globalStore.companySlug}/customer/dashboard`"
-              class="
-                float-none
-                text-lg
-                not-italic
-                font-black
-                tracking-wider
-                text-white
-                brand-main
-                md:float-left
-                font-base
-              "
-            >
-              <MainLogo v-if="!customerLogo" class="h-6" />
-              <img v-else :src="customerLogo" class="h-6" />
-            </a>
-          </div>
-          <div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
-            <router-link
-              v-for="item in globalStore.mainMenu"
-              :key="item.title"
-              :to="`/${globalStore.companySlug}${item.link}`"
-              :class="[
-                hasActiveUrl(item.link)
-                  ? 'border-primary-500 text-primary-600'
-                  : 'border-transparent text-muted hover:text-body hover:border-line-strong',
-                'inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
-              ]"
-            >
-              {{ $t(item.title) }}
-            </router-link>
-          </div>
-        </div>
-        <div class="hidden sm:ml-6 sm:flex sm:items-center">
-          <button
-            type="button"
-            class="
-              bg-surface
-              p-1
-              rounded-full
-              text-subtle
-              hover:text-muted
-              focus:outline-hidden
-              focus:ring-2
-              focus:ring-offset-2
-              focus:ring-primary-500
-            "
-          ></button>
-
-          <!-- Profile dropdown -->
-
-          <Menu as="div" class="ml-3 relative">
-            <BaseDropdown width-class="w-48">
-              <template #activator>
-                <MenuButton
-                  class="
-                    bg-surface
-                    flex
-                    text-sm
-                    rounded-full
-                    focus:outline-hidden
-                    focus:ring-2
-                    focus:ring-offset-2
-                    focus:ring-primary-500
-                  "
-                >
-                  <img
-                    class="h-8 w-8 rounded-full"
-                    :src="previewAvatar"
-                    alt=""
-                  />
-                </MenuButton>
-              </template>
-              <router-link :to="{ name: 'customer.profile' }">
-                <BaseDropdownItem>
-                  <CogIcon
-                    class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-                    aria-hidden="true"
-                  />
-                  {{ $t('navigation.settings') }}
-                </BaseDropdownItem>
-              </router-link>
-
-              <BaseDropdownItem @click="logout">
-                <ArrowRightOnRectangleIcon
-                  class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
-                  aria-hidden="true"
-                />
-                {{ $t('navigation.logout') }}
-              </BaseDropdownItem>
-            </BaseDropdown>
-          </Menu>
-        </div>
-        <div class="-mr-2 flex items-center sm:hidden">
-          <!-- Mobile menu button -->
-          <DisclosureButton
-            class="
-              bg-surface
-              inline-flex
-              items-center
-              justify-center
-              p-2
-              rounded-md
-              text-subtle
-              hover:text-muted hover:bg-hover-strong
-              focus:outline-hidden
-              focus:ring-2
-              focus:ring-offset-2
-              focus:ring-primary-500
-            "
-          >
-            <span class="sr-only">Open main menu</span>
-            <Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
-            <XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" />
-          </DisclosureButton>
-        </div>
-      </div>
-    </div>
-
-    <DisclosurePanel class="sm:hidden">
-      <div class="pt-2 pb-3 space-y-1">
-        <router-link
-          v-for="item in globalStore.mainMenu"
-          :key="item.title"
-          :to="`/${globalStore.companySlug}${item.link}`"
-          :class="[
-            hasActiveUrl(item.link)
-              ? 'bg-primary-50 border-primary-500 text-primary-700'
-              : 'border-transparent text-body hover:bg-hover hover:border-line-strong hover:text-heading',
-            'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
-          ]"
-          :aria-current="item.current ? 'page' : undefined"
-          >{{ $t(item.title) }}
-        </router-link>
-      </div>
-      <div class="pt-4 pb-3 border-t border-line-default">
-        <div class="flex items-center px-4">
-          <div class="shrink-0">
-            <img class="h-10 w-10 rounded-full" :src="previewAvatar" alt="" />
-          </div>
-          <div class="ml-3">
-            <div class="text-base font-medium text-heading">
-              {{ globalStore.currentUser.title }}
-            </div>
-            <div class="text-sm font-medium text-muted">
-              {{ globalStore.currentUser.email }}
-            </div>
-          </div>
-          <button
-            type="button"
-            class="
-              ml-auto
-              bg-surface
-              shrink-0
-              p-1
-              rounded-full
-              text-subtle
-              hover:text-muted
-              focus:outline-hidden
-              focus:ring-2
-              focus:ring-offset-2
-              focus:ring-primary-500
-            "
-          ></button>
-        </div>
-        <div class="mt-3 space-y-1">
-          <router-link
-            v-for="item in userNavigation"
-            :key="item.title"
-            :to="item.link"
-            :class="[
-              hasActiveUrl(item.link)
-                ? 'bg-primary-50 border-primary-500 text-primary-700'
-                : 'border-transparent text-body hover:bg-hover hover:border-line-strong hover:text-heading',
-              'block pl-3 pr-4 py-2 border-l-4 text-base font-medium',
-            ]"
-            >{{ $t(item.title) }}</router-link
-          >
-        </div>
-      </div>
-    </DisclosurePanel>
-  </Disclosure>
-</template>
-
-<script setup>
-import { useAuthStore } from '@/scripts/customer/stores/auth'
-import { useRoute, useRouter } from 'vue-router'
-import { ref, watch, computed } from 'vue'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import MainLogo from '@/scripts/components/icons/MainLogo.vue'
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-  Menu,
-  MenuButton,
-} from '@headlessui/vue'
-import { Bars3Icon, XMarkIcon, ArrowRightOnRectangleIcon, CogIcon } from '@heroicons/vue/24/outline'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-const route = useRoute()
-const globalStore = useGlobalStore()
-
-const userNavigation = [
-  {
-    title: t('navigation.logout'),
-    link: `/${globalStore.companySlug}/customer/login`,
-  },
-]
-
-const authStore = useAuthStore()
-const router = useRouter()
-const activeRoute = ref('')
-
-const previewAvatar = computed(() => {
-  return globalStore.currentUser && globalStore.currentUser.avatar !== 0
-    ? globalStore.currentUser.avatar
-    : getDefaultAvatar()
-})
-
-function getDefaultAvatar() {
-  const imgUrl = new URL('$images/default-avatar.jpg', import.meta.url)
-  return imgUrl
-}
-
-watch(
-  route,
-  (val) => {
-    activeRoute.value = val.path
-  },
-  { immediate: true }
-)
-
-const customerLogo = computed(() => {
-  if (window.customer_logo) {
-    return window.customer_logo
-  }
-
-  return false
-})
-
-function hasActiveUrl(url) {
-  return route.path.indexOf(url) > -1
-}
-
-function logout() {
-  authStore.logout(globalStore.companySlug).then((res) => {
-    if (res) {
-      router.push({ name: 'customer.login' })
-    }
-  })
-}
-</script>
diff --git a/resources/scripts/customer/layouts/partials/TheSiteSidebar.vue b/resources/scripts/customer/layouts/partials/TheSiteSidebar.vue
deleted file mode 100644
index 8b137891..00000000
--- a/resources/scripts/customer/layouts/partials/TheSiteSidebar.vue
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/resources/scripts/customer/stores/auth.js b/resources/scripts/customer/stores/auth.js
deleted file mode 100644
index 64ce0295..00000000
--- a/resources/scripts/customer/stores/auth.js
+++ /dev/null
@@ -1,122 +0,0 @@
-const { defineStore } = window.pinia
-import http from '@/scripts/http'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import router from '@/scripts/customer/customer-router'
-import { handleError } from '@/scripts/customer/helpers/error-handling'
-const { global } = window.i18n
-
-export const useAuthStore = defineStore('customerAuth', {
-  state: () => ({
-    loginData: {
-      email: '',
-      password: '',
-      device_name: 'xyz',
-      company: '',
-    },
-  }),
-
-  actions: {
-    login(data) {
-      const notificationStore = useNotificationStore(true)
-      return new Promise((resolve, reject) => {
-        http.get('/sanctum/csrf-cookie').then((response) => {
-          if (response) {
-            http
-              .post(`/${data.company}/customer/login`, data)
-              .then((response) => {
-                notificationStore.showNotification({
-                  type: 'success',
-                  message: global.tm('general.login_successfully'),
-                })
-                resolve(response)
-                setTimeout(() => {
-                  this.loginData.email = ''
-                  this.loginData.password = ''
-                }, 1000)
-              })
-              .catch((err) => {
-                handleError(err)
-                reject(err)
-              })
-          }
-        })
-      })
-    },
-
-    forgotPassword(data) {
-      const notificationStore = useNotificationStore(true)
-      return new Promise((resolve, reject) => {
-        http
-          .post(`/api/v1/${data.company}/customer/auth/password/email`, data)
-
-          .then((response) => {
-            if (response.data) {
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.tm('general.send_mail_successfully'),
-              })
-            }
-            resolve(response)
-          })
-          .catch((err) => {
-            if (err.response && err.response.status === 403) {
-              notificationStore.showNotification({
-                type: 'error',
-                message: global.tm('errors.email_could_not_be_sent'),
-              })
-            } else {
-              handleError(err)
-            }
-            reject(err)
-          })
-      })
-    },
-
-    resetPassword(data, company) {
-      return new Promise((resolve, reject) => {
-        http
-          .post(`/api/v1/${company}/customer/auth/reset/password`, data)
-
-          .then((response) => {
-            if (response.data) {
-              const notificationStore = useNotificationStore(true)
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.tm('login.password_reset_successfully'),
-              })
-            }
-            resolve(response)
-          })
-          .catch((err) => {
-            if (err.response && err.response.status === 403) {
-              notificationStore.showNotification({
-                type: 'error',
-                message: global.tm('validation.email_incorrect'),
-              })
-            }
-            reject(err)
-          })
-      })
-    },
-
-    logout(data) {
-      return new Promise((resolve, reject) => {
-        http
-          .post(`/${data}/customer/logout`)
-          .then((response) => {
-            const notificationStore = useNotificationStore()
-            notificationStore.showNotification({
-              type: 'success',
-              message: global.tm('general.logged_out_successfully'),
-            })
-            router.push({ name: 'customer.login' })
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-  },
-})
diff --git a/resources/scripts/customer/stores/customer.js b/resources/scripts/customer/stores/customer.js
deleted file mode 100644
index 7949f8a1..00000000
--- a/resources/scripts/customer/stores/customer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const { defineStore } = window.pinia
-
-export const useCustomerStore = defineStore('customers', {
-  state: () => ({
-    customers: 'okay',
-  }),
-
-  actions: {
-    resetCustomers() {
-      this.customers = 'okay'
-    },
-  }
-})
diff --git a/resources/scripts/customer/stores/dashboard.js b/resources/scripts/customer/stores/dashboard.js
deleted file mode 100644
index d971ad91..00000000
--- a/resources/scripts/customer/stores/dashboard.js
+++ /dev/null
@@ -1,42 +0,0 @@
-const { defineStore } = window.pinia
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import http from '@/scripts/http'
-import { handleError } from '@/scripts/customer/helpers/error-handling'
-
-export const useDashboardStore = defineStore('dashboard', {
-  state: () => ({
-    recentInvoices: [],
-    recentEstimates: [],
-    invoiceCount: 0,
-    estimateCount: 0,
-    paymentCount: 0,
-    totalDueAmount: [],
-    isDashboardDataLoaded: false,
-  }),
-
-  actions: {
-    loadData(data) {
-      const globalStore = useGlobalStore()
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${globalStore.companySlug}/customer/dashboard`, {
-            data,
-          })
-          .then((response) => {
-            this.totalDueAmount = response.data.due_amount
-            this.estimateCount = response.data.estimate_count
-            this.invoiceCount = response.data.invoice_count
-            this.paymentCount = response.data.payment_count
-            this.recentInvoices = response.data.recentInvoices
-            this.recentEstimates = response.data.recentEstimates
-            globalStore.getDashboardDataLoaded = true
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-  },
-})
diff --git a/resources/scripts/customer/stores/estimate.js b/resources/scripts/customer/stores/estimate.js
deleted file mode 100644
index e8b55682..00000000
--- a/resources/scripts/customer/stores/estimate.js
+++ /dev/null
@@ -1,115 +0,0 @@
-const { defineStore } = window.pinia
-import { useNotificationStore } from '@/scripts/stores/notification'
-import http from '@/scripts/http'
-import { handleError } from '@/scripts/customer/helpers/error-handling'
-
-export const useEstimateStore = defineStore('customerEstimateStore', {
-  state: () => ({
-    estimates: [],
-    totalEstimates: 0,
-    selectedViewEstimate: [],
-  }),
-  actions: {
-    fetchEstimate(params, slug) {
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${slug}/customer/estimates`, { params })
-          .then((response) => {
-            this.estimates = response.data.data
-            this.totalEstimates = response.data.meta.estimateTotalCount
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    fetchViewEstimate(params, slug) {
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${slug}/customer/estimates/${params.id}`, {
-            params,
-          })
-
-          .then((response) => {
-            this.selectedViewEstimate = response.data.data
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    searchEstimate(params, slug) {
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${slug}/customer/estimates`, { params })
-          .then((response) => {
-            this.estimates = response.data
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-    acceptEstimate({ slug, id, status }) {
-
-      return new Promise((resolve, reject) => {
-        http
-          .post(`/api/v1/${slug}/customer/estimate/${id}/status`, { status })
-          .then((response) => {
-            let pos = this.estimates.findIndex(
-              (estimate) => estimate.id === id
-            )
-            if (this.estimates[pos]) {
-              this.estimates[pos].status = 'ACCEPTED'
-
-              const notificationStore = useNotificationStore(true)
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('estimates.marked_as_accepted_message'),
-              })
-            }
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    rejectEstimate({ slug, id, status }) {
-
-      return new Promise((resolve, reject) => {
-        http
-          .post(`/api/v1/${slug}/customer/estimate/${id}/status`, { status })
-          .then((response) => {
-            let pos = this.estimates.findIndex(
-              (estimate) => estimate.id === id
-            )
-            if (this.estimates[pos]) {
-              this.estimates[pos].status = 'REJECTED'
-
-              const notificationStore = useNotificationStore(true)
-              notificationStore.showNotification({
-                type: 'success',
-                message: global.t('estimates.marked_as_rejected_message'),
-              })
-            }
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-  },
-})
diff --git a/resources/scripts/customer/stores/global.js b/resources/scripts/customer/stores/global.js
deleted file mode 100644
index 62d9e50a..00000000
--- a/resources/scripts/customer/stores/global.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { handleError } from '@/scripts/customer/helpers/error-handling'
-import { useUserStore } from './user'
-const { defineStore } = window.pinia
-import http from '@/scripts/http'
-const { global } = window.i18n
-export const useGlobalStore = defineStore('CustomerPortalGlobalStore', {
-  state: () => ({
-    languages: [],
-    currency: null,
-    isAppLoaded: false,
-    countries: [],
-    getDashboardDataLoaded: false,
-    currentUser: null,
-    companySlug: '',
-    mainMenu: null,
-    enabledModules: []
-  }),
-
-  actions: {
-    bootstrap(data) {
-      this.companySlug = data
-      const userStore = useUserStore()
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${data}/customer/bootstrap`)
-          .then((response) => {
-            this.currentUser = response.data.data
-            this.mainMenu = response.data.meta.menu
-            this.currency = response.data.data.currency
-            this.enabledModules = response.data.meta.modules
-            Object.assign(userStore.userForm, response.data.data)
-
-            if(typeof global.locale !== 'string') {
-              global.locale.value =
-                response.data.meta.current_company_language || 'en'
-            }
-
-            this.isAppLoaded = true
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    fetchCountries() {
-      return new Promise((resolve, reject) => {
-        if (this.countries.length) {
-          resolve(this.countries)
-        } else {
-          http
-            .get(`/api/v1/${this.companySlug}/customer/countries`)
-            .then((response) => {
-              this.countries = response.data.data
-              resolve(response)
-            })
-            .catch((err) => {
-              handleError(err)
-              reject(err)
-            })
-        }
-      })
-    },
-  },
-})
diff --git a/resources/scripts/customer/stores/invoice.js b/resources/scripts/customer/stores/invoice.js
deleted file mode 100644
index 165b3ce4..00000000
--- a/resources/scripts/customer/stores/invoice.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { handleError } from '@/scripts/customer/helpers/error-handling'
-const { defineStore } = window.pinia
-import http from '@/scripts/http'
-export const useInvoiceStore = defineStore('customerInvoiceStore', {
-  state: () => ({
-    totalInvoices: 0,
-    invoices: [],
-    selectedViewInvoice: [],
-  }),
-
-  actions: {
-    fetchInvoices(params, slug) {
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${slug}/customer/invoices`, { params })
-          .then((response) => {
-            this.invoices = response.data.data
-            this.totalInvoices = response.data.meta.invoiceTotalCount
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    fetchViewInvoice(params, slug) {
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${slug}/customer/invoices/${params.id}`, {
-            params,
-          })
-
-          .then((response) => {
-            this.selectedViewInvoice = response.data.data
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    searchInvoice(params, slug) {
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${slug}/customer/invoices`, { params })
-          .then((response) => {
-            this.invoices = response.data
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-  },
-})
diff --git a/resources/scripts/customer/stores/payment.js b/resources/scripts/customer/stores/payment.js
deleted file mode 100644
index 70465ef4..00000000
--- a/resources/scripts/customer/stores/payment.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { handleError } from '@/scripts/customer/helpers/error-handling'
-const { defineStore } = window.pinia
-import http from '@/scripts/http'
-
-export const usePaymentStore = defineStore('customerPaymentStore', {
-  state: () => ({
-    payments: [],
-    selectedViewPayment: [],
-    totalPayments: 0,
-  }),
-
-  actions: {
-    fetchPayments(params, slug) {
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${slug}/customer/payments`, { params })
-          .then((response) => {
-            this.payments = response.data.data
-            this.totalPayments = response.data.meta.paymentTotalCount
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    fetchViewPayment(params, slug) {
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${slug}/customer/payments/${params.id}`)
-
-          .then((response) => {
-            this.selectedViewPayment = response.data.data
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    searchPayment(params, slug) {
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${slug}/customer/payments`, { params })
-          .then((response) => {
-            this.payments = response.data
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    fetchPaymentModes(params, slug) {
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${slug}/customer/payment-method`, { params })
-          .then((response) => {
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-  },
-})
diff --git a/resources/scripts/customer/stores/user.js b/resources/scripts/customer/stores/user.js
deleted file mode 100644
index 778fdac5..00000000
--- a/resources/scripts/customer/stores/user.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { handleError } from '@/scripts/customer/helpers/error-handling'
-const { defineStore } = window.pinia
-import { useNotificationStore } from '@/scripts/stores/notification'
-import stubs from '@/scripts/customer/stubs/address'
-import http from '@/scripts/http'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-
-export const useUserStore = defineStore('customerUserStore', {
-  state: () => ({
-    customers: [],
-    userForm: {
-      avatar: null,
-      name: '',
-      email: '',
-      password: '',
-      company: '',
-      confirm_password: '',
-      billing: {
-        ...stubs,
-      },
-      shipping: {
-        ...stubs,
-      },
-    },
-  }),
-
-  actions: {
-    copyAddress() {
-      this.userForm.shipping = {
-        ...this.userForm.billing,
-        type: 'shipping',
-      }
-    },
-
-    fetchCurrentUser() {
-      const globalStore = useGlobalStore()
-      return new Promise((resolve, reject) => {
-        http
-          .get(`/api/v1/${globalStore.companySlug}/customer/me`)
-          .then((response) => {
-            Object.assign(this.userForm, response.data.data)
-            resolve(response)
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-
-    updateCurrentUser({ data, message }) {
-      const globalStore = useGlobalStore()
-      return new Promise((resolve, reject) => {
-        http
-          .post(`/api/v1/${globalStore.companySlug}/customer/profile`, data)
-          .then((response) => {
-            this.userForm = response.data.data
-            globalStore.currentUser = response.data.data
-            resolve(response)
-
-            if (message) {
-              const notificationStore = useNotificationStore(true)
-              notificationStore.showNotification({
-                type: 'success',
-                message: message,
-              })
-            }
-          })
-          .catch((err) => {
-            handleError(err)
-            reject(err)
-          })
-      })
-    },
-  },
-})
diff --git a/resources/scripts/customer/stubs/address.js b/resources/scripts/customer/stubs/address.js
deleted file mode 100644
index cb5f067f..00000000
--- a/resources/scripts/customer/stubs/address.js
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-  name: null,
-  phone: null,
-  address_street_1: null,
-  address_street_2: null,
-  city: null,
-  state: null,
-  country_id: null,
-  zip: null,
-  type: null,
-}
diff --git a/resources/scripts/customer/views/BaseCheckon.vue b/resources/scripts/customer/views/BaseCheckon.vue
deleted file mode 100644
index a45bc224..00000000
--- a/resources/scripts/customer/views/BaseCheckon.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="h-10 w-20 bg-surface-tertiary">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {}
-</script>
-
-<style scoped>
-</style>
diff --git a/resources/scripts/customer/views/SamplePage.vue b/resources/scripts/customer/views/SamplePage.vue
deleted file mode 100644
index e071d4e7..00000000
--- a/resources/scripts/customer/views/SamplePage.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="bg-blue-100 h-screen container mx-auto px-6">
-    <h1 class="text-xl font-bold">Samplez Pages</h1>
-    <BaseButton>Hello </BaseButton>
-    <BaseCheckon>{{ customerStore.customers }} </BaseCheckon>
-  </div>
-</template>
-
-
-<script setup>
-import BaseCheckon from '@/scripts/customer/BaseCheckon.vue'
-import { useCustomerStore } from '@/scripts/customer/stores/customer'
-
-const customerStore = useCustomerStore()
-</script>
diff --git a/resources/scripts/customer/views/auth/ForgotPassword.vue b/resources/scripts/customer/views/auth/ForgotPassword.vue
deleted file mode 100644
index 2de36f5e..00000000
--- a/resources/scripts/customer/views/auth/ForgotPassword.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-  <form id="loginForm" @submit.prevent="validateBeforeSubmit">
-    <BaseInputGroup
-      :error="v$.email.$error && v$.email.$errors[0].$message"
-      :label="$t('login.enter_email')"
-      class="mb-4"
-      required
-    >
-      <BaseInput
-        v-model="formData.email"
-        type="email"
-        name="email"
-        :invalid="v$.email.$error"
-        @input="v$.email.$touch()"
-      />
-    </BaseInputGroup>
-    <BaseButton
-      :loading="isLoading"
-      :disabled="isLoading"
-      type="submit"
-      variant="primary"
-    >
-      <div v-if="!isSent">
-        {{ $t('validation.send_reset_link') }}
-      </div>
-      <div v-else>
-        {{ $t('validation.not_yet') }}
-      </div>
-    </BaseButton>
-
-    <div class="mt-4 mb-4 text-sm">
-      <router-link
-        to="login"
-        class="text-sm text-primary-400 hover:text-body"
-      >
-        {{ $t('general.back_to_login') }}
-      </router-link>
-    </div>
-  </form>
-</template>
-
-<script setup>
-import { reactive, ref, computed } from 'vue'
-import { required, email, helpers } from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useI18n } from 'vue-i18n'
-import { useAuthStore } from '@/scripts/customer/stores/auth'
-import { useRouter, useRoute } from 'vue-router'
-
-// // store
-const authStore = useAuthStore()
-const { t } = useI18n()
-const route = useRoute()
-
-// local state
-
-const formData = reactive({
-  email: '',
-  company: '',
-})
-const isSent = ref(false)
-const isLoading = ref(false)
-
-// validation
-
-const rules = computed(() => {
-  return {
-    email: {
-      required: helpers.withMessage(t('validation.required'), required),
-      email: helpers.withMessage(t('validation.email_incorrect'), email),
-    },
-  }
-})
-
-const v$ = useVuelidate(rules, formData)
-
-// methods
-
-function validateBeforeSubmit(e) {
-  v$.value.$touch()
-  if (v$.value.$invalid) {
-    return true
-  }
-  isLoading.value = true
-  let data = {
-    ...formData,
-    company: route.params.company,
-  }
-
-  authStore
-    .forgotPassword(data)
-    .then((res) => {
-      isLoading.value = false
-    })
-    .catch((err) => {
-      isLoading.value = false
-    })
-  isSent.value = true
-}
-</script>
diff --git a/resources/scripts/customer/views/auth/Login.vue b/resources/scripts/customer/views/auth/Login.vue
deleted file mode 100644
index 55cba735..00000000
--- a/resources/scripts/customer/views/auth/Login.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <form
-    id="loginForm"
-    class="space-y-6"
-    action="#"
-    method="POST"
-    @submit.prevent="validateBeforeSubmit"
-  >
-    <BaseInputGroup
-      :error="
-        v$.loginData.email.$error && v$.loginData.email.$errors[0].$message
-      "
-      :label="$t('login.email')"
-      class="mb-4"
-      required
-    >
-      <BaseInput
-        v-model="authStore.loginData.email"
-        type="email"
-        :invalid="v$.loginData.email.$error"
-        @input="v$.loginData.email.$touch()"
-      />
-    </BaseInputGroup>
-    <BaseInputGroup
-      :error="
-        v$.loginData.password.$error &&
-        v$.loginData.password.$errors[0].$message
-      "
-      :label="$t('login.password')"
-      class="mb-4"
-      required
-    >
-      <BaseInput
-        v-model="authStore.loginData.password"
-        :type="getInputType"
-        :invalid="v$.loginData.password.$error"
-        @input="v$.loginData.password.$touch()"
-      >
-        <template #right>
-          <BaseIcon
-            :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-            class="mr-1 text-muted cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          />
-        </template>
-      </BaseInput>
-    </BaseInputGroup>
-    <div class="flex items-center justify-between">
-      <router-link
-        :to="{ name: 'customer.forgot-password' }"
-        class="text-sm text-primary-600 hover:text-muted"
-      >
-        {{ $t('login.forgot_password') }}
-      </router-link>
-    </div>
-
-    <div>
-      <BaseButton
-        :loading="isLoading"
-        :disabled="isLoading"
-        type="submit"
-        class="w-full justify-center"
-      >
-        <template #left="slotProps">
-          <BaseIcon name="LockClosedIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('login.login') }}
-      </BaseButton>
-    </div>
-  </form>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useVuelidate } from '@vuelidate/core'
-import { required, email, helpers } from '@vuelidate/validators'
-import { useAuthStore } from '@/scripts/customer/stores/auth'
-import { useRouter, useRoute } from 'vue-router'
-
-const router = useRouter()
-const route = useRoute()
-const authStore = useAuthStore()
-const { t } = useI18n()
-
-let isLoading = ref(false)
-const isShowPassword = ref(false)
-
-const getInputType = computed(() => {
-  if (isShowPassword.value) {
-    return 'text'
-  }
-  return 'password'
-})
-
-const rules = computed(() => {
-  return {
-    loginData: {
-      email: {
-        required: helpers.withMessage(t('validation.required'), required),
-        email: helpers.withMessage(t('validation.email_incorrect'), email),
-      },
-      password: {
-        required: helpers.withMessage(t('validation.required'), required),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(rules, authStore)
-
-async function validateBeforeSubmit() {
-  v$.value.loginData.$touch()
-  if (v$.value.loginData.$invalid) {
-    return true
-  }
-  isLoading.value = true
-  let data = {
-    ...authStore.loginData,
-    company: route.params.company,
-  }
-
-  try {
-    await authStore.login(data)
-    isLoading.value = false
-    return router.push({ name: 'customer.dashboard' })
-    authStore.$reset()
-  } catch (error) {
-    isLoading.value = false
-  }
-}
-</script>
diff --git a/resources/scripts/customer/views/auth/ResetPassword.vue b/resources/scripts/customer/views/auth/ResetPassword.vue
deleted file mode 100644
index dd1ca3be..00000000
--- a/resources/scripts/customer/views/auth/ResetPassword.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <form id="loginForm" @submit.prevent="onSubmit">
-    <BaseInputGroup
-      :error="v$.email.$error && v$.email.$errors[0].$message"
-      :label="$t('login.email')"
-      class="mb-4"
-      required
-    >
-      <BaseInput
-        v-model="loginData.email"
-        type="email"
-        name="email"
-        :invalid="v$.email.$error"
-        @input="v$.email.$touch()"
-      />
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :error="v$.password.$error && v$.password.$errors[0].$message"
-      :label="$t('login.password')"
-      class="mb-4"
-      required
-    >
-      <BaseInput
-        v-model="loginData.password"
-        :type="isShowPassword ? 'text' : 'password'"
-        name="password"
-        :invalid="v$.password.$error"
-        @input="v$.password.$touch()"
-      >
-        <template #right>
-          <BaseIcon
-            :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-            class="mr-1 text-muted cursor-pointer"
-            @click="isShowPassword = !isShowPassword"
-          />
-        </template>
-      </BaseInput>
-    </BaseInputGroup>
-
-    <BaseInputGroup
-      :error="
-        v$.password_confirmation.$error &&
-        v$.password_confirmation.$errors[0].$message
-      "
-      :label="$t('login.retype_password')"
-      class="mb-4"
-      required
-    >
-      <BaseInput
-        v-model="loginData.password_confirmation"
-        type="password"
-        name="password"
-        :invalid="v$.password_confirmation.$error"
-        @input="v$.password_confirmation.$touch()"
-      />
-    </BaseInputGroup>
-
-    <BaseButton type="submit" variant="primary">
-      {{ $t('login.reset_password') }}
-    </BaseButton>
-  </form>
-</template>
-
-<script setup>
-import { reactive, ref, computed } from 'vue'
-import useVuelidate from '@vuelidate/core'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import {
-  required,
-  helpers,
-  minLength,
-  sameAs,
-  email,
-} from '@vuelidate/validators'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
-import { useAuthStore } from '@/scripts/customer/stores/auth'
-
-const route = useRoute()
-const router = useRouter()
-const authStore = useAuthStore()
-const { t } = useI18n()
-const loginData = reactive({
-  email: '',
-  password: '',
-  password_confirmation: '',
-})
-
-const globalStore = useGlobalStore()
-
-let isShowPassword = ref(false)
-let isLoading = ref(false)
-
-const rules = computed(() => {
-  return {
-    email: {
-      required: helpers.withMessage(t('validation.required'), required),
-      email: helpers.withMessage(t('validation.email_incorrect'), email),
-    },
-    password: {
-      required: helpers.withMessage(t('validation.required'), required),
-      minLength: helpers.withMessage(
-        t('validation.password_min_length', { count: 8 }),
-        minLength(8)
-      ),
-    },
-    password_confirmation: {
-      sameAsPassword: helpers.withMessage(
-        t('validation.password_incorrect'),
-        sameAs(loginData.password)
-      ),
-    },
-  }
-})
-
-const v$ = useVuelidate(rules, loginData)
-
-async function onSubmit(e) {
-  v$.value.$touch()
-
-  if (!v$.value.$invalid) {
-    let data = {
-      email: loginData.email,
-      password: loginData.password,
-      password_confirmation: loginData.password_confirmation,
-      token: route.params.token,
-    }
-    isLoading.value = true
-    let res = authStore.resetPassword(data, route.params.company)
-    isLoading.value = false
-    if (res.data) {
-      router.push({ name: 'customer.login' })
-    }
-  }
-}
-</script>
diff --git a/resources/scripts/customer/views/dashboard/Dashboard.vue b/resources/scripts/customer/views/dashboard/Dashboard.vue
deleted file mode 100644
index 2b65492b..00000000
--- a/resources/scripts/customer/views/dashboard/Dashboard.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <BasePage>
-    <DashboardStats />
-    <DashboardTable />
-  </BasePage>
-</template>
-
-<script setup>
-import DashboardStats from '@/scripts/customer/views/dashboard/DashboardStats.vue'
-import DashboardTable from '@/scripts/customer/views/dashboard/DashboardTable.vue'
-</script>
diff --git a/resources/scripts/customer/views/dashboard/DashboardStats.vue b/resources/scripts/customer/views/dashboard/DashboardStats.vue
deleted file mode 100644
index a32bb45f..00000000
--- a/resources/scripts/customer/views/dashboard/DashboardStats.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-9 xl:gap-8">
-    <!-- Amount Due -->
-    <DashboardStatsItem
-      :icon-component="DollarIcon"
-      :loading="!globalStore.getDashboardDataLoaded"
-      :route="{ name: 'invoices.dashboard' }"
-      :large="true"
-      :label="$t('dashboard.cards.due_amount')"
-    >
-      <BaseFormatMoney
-        :amount="dashboardStore.totalDueAmount"
-        :currency="globalStore.currency"
-      />
-    </DashboardStatsItem>
-
-    <!-- Invoices -->
-    <DashboardStatsItem
-      :icon-component="InvoiceIcon"
-      :loading="!globalStore.getDashboardDataLoaded"
-      :route="{ name: 'invoices.dashboard' }"
-      :label="(dashboardStore.invoiceCount <= 1 ? $t('dashboard.cards.invoices', 1) : $t('dashboard.cards.invoices', 2))"
-    >
-      {{ dashboardStore.invoiceCount }}
-    </DashboardStatsItem>
-
-    <!-- Estimates -->
-    <DashboardStatsItem
-      :icon-component="EstimateIcon"
-      :loading="!globalStore.getDashboardDataLoaded"
-      :route="{ name: 'estimates.dashboard' }"
-      :label="(dashboardStore.estimateCount <= 1 ? $t('dashboard.cards.estimates', 1) : $t('dashboard.cards.estimates', 2))"
-    >
-      {{ dashboardStore.estimateCount }}
-    </DashboardStatsItem>
-
-    <!-- Payments -->
-
-    <DashboardStatsItem
-      :icon-component="PaymentIcon"
-      :loading="!globalStore.getDashboardDataLoaded"
-      :route="{ name: 'payments.dashboard' }"
-      :label="(dashboardStore.paymentCount <= 1 ? $t('dashboard.cards.payments', 1 ) : $t('dashboard.cards.payments', 2))"
-    >
-      {{ dashboardStore.paymentCount }}
-    </DashboardStatsItem>
-  </div>
-</template>
-
-<script setup>
-import { inject } from 'vue'
-import DollarIcon from '@/scripts/components/icons/dashboard/DollarIcon.vue'
-import InvoiceIcon from '@/scripts/components/icons/dashboard/InvoiceIcon.vue'
-import PaymentIcon from '@/scripts/components/icons/dashboard/PaymentIcon.vue'
-import EstimateIcon from '@/scripts/components/icons/dashboard/EstimateIcon.vue'
-
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import { useDashboardStore } from '@/scripts/customer/stores/dashboard'
-import DashboardStatsItem from '@/scripts/customer/views/dashboard/DashboardStatsItem.vue'
-//store
-
-const utils = inject('utils')
-const globalStore = useGlobalStore()
-const dashboardStore = useDashboardStore()
-dashboardStore.loadData()
-</script>
diff --git a/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue b/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue
deleted file mode 100644
index 75574bce..00000000
--- a/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <router-link
-    v-if="!loading"
-    class="
-      relative
-      flex
-      justify-between
-      p-3
-      bg-surface
-      rounded
-      shadow
-      hover:bg-hover
-      xl:p-4
-      lg:col-span-2
-    "
-    :class="{ 'lg:!col-span-3': large }"
-    :to="route"
-  >
-    <div>
-      <span class="text-xl font-semibold leading-tight text-heading xl:text-3xl">
-        <slot />
-      </span>
-      <span class="block mt-1 text-sm leading-tight text-muted xl:text-lg">
-        {{ label }}
-      </span>
-    </div>
-    <div class="flex items-center">
-      <component :is="iconComponent" class="w-10 h-10 xl:w-12 xl:h-12" />
-    </div>
-  </router-link>
-
-  <StatsCardPlaceholder v-else-if="large" />
-
-  <StatsCardSmPlaceholder v-else />
-</template>
-
-
-<script setup>
-import StatsCardPlaceholder from '@/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue'
-import StatsCardSmPlaceholder from '@/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue'
-
-defineProps({
-  iconComponent: {
-    type: Object,
-    required: true,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  route: {
-    type: Object,
-    required: true,
-  },
-  label: {
-    type: String,
-    required: true,
-  },
-  large: {
-    type: Boolean,
-    default: false,
-  },
-})
-</script>
diff --git a/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue b/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
deleted file mode 100644
index e5a99893..00000000
--- a/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-  <BaseContentPlaceholders
-    :rounded="true"
-    class="relative flex justify-between w-full p-3 bg-surface rounded shadow lg:col-span-3 xl:p-4"
-  >
-    <div>
-      <BaseContentPlaceholdersText
-        class="h-5 -mb-1 w-14 xl:mb-6 xl:h-7"
-        :lines="1"
-      />
-      <BaseContentPlaceholdersText class="h-3 w-28 xl:h-4" :lines="1" />
-    </div>
-    <div class="flex items-center">
-      <BaseContentPlaceholdersBox
-        :circle="true"
-        class="w-10 h-10 xl:w-12 xl:h-12"
-      />
-    </div>
-  </BaseContentPlaceholders>
-</template>
diff --git a/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue b/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
deleted file mode 100644
index 9a7ee56c..00000000
--- a/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <BaseContentPlaceholders
-    :rounded="true"
-    class="
-      relative
-      flex
-      justify-between
-      w-full
-      p-3
-      bg-surface
-      rounded
-      shadow
-      lg:col-span-2
-      xl:p-4
-    "
-  >
-    <div>
-      <BaseContentPlaceholdersText
-        class="w-12 h-5 -mb-1 xl:mb-6 xl:h-7"
-        :lines="1"
-      />
-      <BaseContentPlaceholdersText class="w-20 h-3 xl:h-4" :lines="1" />
-    </div>
-    <div class="flex items-center">
-      <BaseContentPlaceholdersBox
-        :circle="true"
-        class="w-10 h-10 xl:w-12 xl:h-12"
-      />
-    </div>
-  </BaseContentPlaceholders>
-</template>
diff --git a/resources/scripts/customer/views/dashboard/DashboardTable.vue b/resources/scripts/customer/views/dashboard/DashboardTable.vue
deleted file mode 100644
index 1c8c4c3c..00000000
--- a/resources/scripts/customer/views/dashboard/DashboardTable.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-  <div class="grid grid-cols-1 gap-6 mt-10 xl:grid-cols-2">
-    <!-- Due Invoices -->
-    <div class="due-invoices">
-      <div class="relative z-10 flex items-center justify-between mb-3">
-        <h6 class="mb-0 text-xl font-semibold leading-normal">
-          {{ $t('dashboard.recent_invoices_card.title') }}
-        </h6>
-
-        <BaseButton
-          size="sm"
-          variant="primary-outline"
-          @click="$router.push({ name: 'invoices.dashboard' })"
-        >
-          {{ $t('dashboard.recent_invoices_card.view_all') }}
-        </BaseButton>
-      </div>
-      <!-- Recent Invoice-->
-      <BaseTable
-        :data="dashboardStore.recentInvoices"
-        :columns="dueInvoiceColumns"
-        :loading="!globalStore.getDashboardDataLoaded"
-      >
-        <template #cell-invoice_number="{ row }">
-          <router-link
-            :to="{
-              path: `/${globalStore.companySlug}/customer/invoices/${row.data.id}/view`,
-            }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.invoice_number }}
-          </router-link>
-        </template>
-
-        <template #cell-paid_status="{ row }">
-          <BasePaidStatusBadge :status="row.data.paid_status">
-            <BaseInvoiceStatusLabel :status="row.data.paid_status" />
-          </BasePaidStatusBadge>
-        </template>
-
-        <template #cell-due_amount="{ row }">
-          <BaseFormatMoney
-            :amount="row.data.due_amount"
-            :currency="globalStore.currency"
-          />
-        </template>
-      </BaseTable>
-    </div>
-
-    <!-- Recent Estimates -->
-    <div class="recent-estimates">
-      <div class="relative z-10 flex items-center justify-between mb-3">
-        <h6 class="mb-0 text-xl font-semibold leading-normal">
-          {{ $t('dashboard.recent_estimate_card.title') }}
-        </h6>
-
-        <BaseButton
-          variant="primary-outline"
-          size="sm"
-          @click="$router.push({ name: 'estimates.dashboard' })"
-        >
-          {{ $t('dashboard.recent_estimate_card.view_all') }}
-        </BaseButton>
-      </div>
-
-      <BaseTable
-        :data="dashboardStore.recentEstimates"
-        :columns="recentEstimateColumns"
-        :loading="!globalStore.getDashboardDataLoaded"
-      >
-        <template #cell-estimate_number="{ row }">
-          <router-link
-            :to="{
-              path: `/${globalStore.companySlug}/customer/estimates/${row.data.id}/view`,
-            }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.estimate_number }}
-          </router-link>
-        </template>
-        <template #cell-status="{ row }">
-          <BaseEstimateStatusBadge :status="row.data.status" class="px-3 py-1">
-            <BaseEstimateStatusLabel :status="row.data.status" />
-          </BaseEstimateStatusBadge>
-        </template>
-        <template #cell-total="{ row }">
-          <BaseFormatMoney
-            :amount="row.data.total"
-            :currency="globalStore.currency"
-          />
-        </template>
-      </BaseTable>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, inject } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute } from 'vue-router'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import { useDashboardStore } from '@/scripts/customer/stores/dashboard'
-import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
-
-// store
-
-const globalStore = useGlobalStore()
-const dashboardStore = useDashboardStore()
-const { tm, t } = useI18n()
-const utils = inject('utils')
-const route = useRoute()
-
-//computed prop
-
-const dueInvoiceColumns = computed(() => {
-  return [
-    {
-      key: 'formattedDueDate',
-      label: t('dashboard.recent_invoices_card.due_on'),
-    },
-    {
-      key: 'invoice_number',
-      label: t('invoices.number'),
-    },
-    { key: 'paid_status', label: t('invoices.status') },
-    {
-      key: 'due_amount',
-      label: t('dashboard.recent_invoices_card.amount_due'),
-    },
-  ]
-})
-const recentEstimateColumns = computed(() => {
-  return [
-    {
-      key: 'formattedEstimateDate',
-      label: t('dashboard.recent_estimate_card.date'),
-    },
-    {
-      key: 'estimate_number',
-      label: t('estimates.number'),
-    },
-    { key: 'status', label: t('estimates.status') },
-    {
-      key: 'total',
-      label: t('dashboard.recent_estimate_card.amount_due'),
-    },
-  ]
-})
-</script>
diff --git a/resources/scripts/customer/views/estimates/Index.vue b/resources/scripts/customer/views/estimates/Index.vue
deleted file mode 100644
index 10b53b56..00000000
--- a/resources/scripts/customer/views/estimates/Index.vue
+++ /dev/null
@@ -1,270 +0,0 @@
-<template>
-  <BasePage>
-    <!-- Page Header -->
-    <BasePageHeader :title="$t('estimates.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem
-          :title="$t('general.home')"
-          :to="`/${globalStore.companySlug}/customer/dashboard`"
-        />
-        <BaseBreadcrumbItem
-          :title="$t('estimates.estimate', 2)"
-          to="#"
-          active
-        />
-      </BaseBreadcrumb>
-      <template #actions>
-        <BaseButton
-          v-if="estimateStore.totalEstimates"
-          variant="primary-outline"
-          @click="toggleFilter"
-        >
-          {{ $t('general.filter') }}
-          <template #right="slotProps">
-            <BaseIcon
-              v-if="!showFilters"
-              name="FunnelIcon"
-              :class="slotProps.class"
-            />
-            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
-          </template>
-        </BaseButton>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper v-show="showFilters" @clear="clearFilter">
-      <BaseInputGroup :label="$t('estimates.status')" class="px-3">
-        <BaseSelectInput
-          v-model="filters.status"
-          :options="status"
-          searchable
-          :show-labels="false"
-          :allow-empty="false"
-          :placeholder="$t('general.select_a_status')"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('estimates.estimate_number')"
-        color="black-light"
-        class="px-3 mt-2"
-      >
-        <BaseInput v-model="filters.estimate_number">
-          <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-          <BaseIcon name="HashtagIcon" class="h-5 mr-3 text-body" />
-        </BaseInput>
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('general.from')" class="px-3">
-        <BaseDatePicker
-          v-model="filters.from_date"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-
-      <div
-        class="hidden w-8 h-0 mx-4 border border-gray-400 border-solid xl:block"
-        style="margin-top: 1.5rem"
-      />
-
-      <BaseInputGroup :label="$t('general.to')" class="px-3">
-        <BaseDatePicker
-          v-model="filters.to_date"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <BaseEmptyPlaceholder
-      v-if="showEmptyScreen"
-      :title="$t('estimates.no_estimates')"
-      :description="$t('estimates.list_of_estimates')"
-    >
-      <ObservatoryIcon class="mt-5 mb-4" />
-    </BaseEmptyPlaceholder>
-
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <BaseTable
-        ref="table"
-        :data="fetchData"
-        :columns="estimateColumns"
-        :placeholder-count="estimateStore.totalEstimates >= 20 ? 10 : 5"
-        class="mt-10"
-      >
-        <template #cell-estimate_date="{ row }">
-          {{ row.data.formatted_estimate_date }}
-        </template>
-
-        <template #cell-estimate_number="{ row }">
-          <router-link
-            :to="{ path: `estimates/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.estimate_number }}
-          </router-link>
-        </template>
-
-        <template #cell-status="{ row }">
-          <BaseEstimateStatusBadge :status="row.data.status" class="px-3 py-1">
-            <BaseEstimateStatusLabel :status="row.data.status" />
-          </BaseEstimateStatusBadge>
-        </template>
-
-        <template #cell-total="{ row }">
-          <BaseFormatMoney :amount="row.data.total" />
-        </template>
-
-        <template #cell-actions="{ row }">
-          <BaseDropdown>
-            <template #activator>
-              <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-            </template>
-            <router-link :to="`estimates/${row.data.id}/view`">
-              <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-body" />
-                {{ $t('general.view') }}
-              </BaseDropdownItem>
-            </router-link>
-          </BaseDropdown>
-        </template>
-      </BaseTable>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { debouncedWatch } from '@vueuse/core'
-import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
-import { ref, computed, reactive, inject } from 'vue'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import { useEstimateStore } from '@/scripts/customer/stores/estimate'
-import { useRoute } from 'vue-router'
-import ObservatoryIcon from '@/scripts/components/icons/empty/ObservatoryIcon.vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-// utils
-
-const utils = inject('utils')
-const route = useRoute()
-//  Local state
-const table = ref(null)
-let showFilters = ref(false)
-let isFetchingInitialData = ref(true)
-
-const status = ref([
-  {label: t('estimates.draft'), value: 'DRAFT'},
-  {label: t('estimates.sent'), value: 'SENT'},
-  {label: t('estimates.viewed'), value: 'VIEWED'},
-  {label: t('estimates.expired'), value: 'EXPIRED'},
-  {label: t('estimates.accepted'), value: 'ACCEPTED'},
-  {label: t('estimates.rejected'), value: 'REJECTED'},
-])
-const filters = reactive({
-  status: '',
-  from_date: '',
-  to_date: '',
-  estimate_number: '',
-})
-
-// store
-const globalStore = useGlobalStore()
-const estimateStore = useEstimateStore()
-
-// computed
-
-const estimateColumns = computed(() => {
-  return [
-    {
-      key: 'estimate_date',
-      label: t('estimates.date'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    { key: 'estimate_number', label: t('estimates.number', 2) },
-    { key: 'status', label: t('estimates.status') },
-    { key: 'total', label: t('estimates.total') },
-    {
-      key: 'actions',
-      thClass: 'text-right',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-const showEmptyScreen = computed(() => {
-  return !estimateStore.totalEstimates && !isFetchingInitialData.value
-})
-
-const currency = computed(() => {
-  return globalStore.currency
-})
-// watch
-
-debouncedWatch(
-  filters,
-  () => {
-    setFilters()
-  },
-  { debounce: 500 }
-)
-
-// methods
-
-function refreshTable() {
-  table.value.refresh()
-}
-
-function setFilters() {
-  refreshTable()
-}
-
-function clearFilter() {
-  filters.status = ''
-  filters.from_date = ''
-  filters.to_date = ''
-  filters.estimate_number = ''
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-
-async function fetchData({ page, sort }) {
-  let data = {
-    status: filters.status.value,
-    estimate_number: filters.estimate_number,
-    from_date: filters.from_date,
-    to_date: filters.to_date,
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  isFetchingInitialData.value = true
-
-  let response = await estimateStore.fetchEstimate(
-    data,
-    globalStore.companySlug
-  )
-
-  isFetchingInitialData.value = false
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-</script>
diff --git a/resources/scripts/customer/views/estimates/View.vue b/resources/scripts/customer/views/estimates/View.vue
deleted file mode 100644
index 68096f61..00000000
--- a/resources/scripts/customer/views/estimates/View.vue
+++ /dev/null
@@ -1,437 +0,0 @@
-<template>
-  <BasePage class="xl:pl-96">
-    <BasePageHeader :title="pageTitle.estimate_number">
-      <template #actions>
-        <div class="mr-3 text-sm">
-          <BaseButton
-            v-if="estimateStore.selectedViewEstimate.status === 'DRAFT'"
-            variant="primary"
-            @click="AcceptEstimate"
-          >
-            {{ $t('estimates.accept_estimate') }}
-          </BaseButton>
-        </div>
-        <div class="mr-3 text-sm">
-          <BaseButton
-            v-if="estimateStore.selectedViewEstimate.status === 'DRAFT'"
-            variant="primary-outline"
-            @click="RejectEstimate"
-          >
-            {{ $t('estimates.reject_estimate') }}
-          </BaseButton>
-        </div>
-      </template>
-    </BasePageHeader>
-
-    <!-- Sidebar -->
-    <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-surface w-88 xl:block"
-    >
-      <div
-        class="
-          flex
-          items-center
-          justify-between
-          px-4
-          pt-8
-          pb-6
-          border border-line-default border-solid
-        "
-      >
-        <BaseInput
-          v-model="searchData.estimate_number"
-          :placeholder="$t('general.search')"
-          type="text"
-          variant="gray"
-          @input="onSearch"
-        >
-          <template #right>
-            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
-          </template>
-        </BaseInput>
-
-        <div class="flex ml-3" role="group" aria-label="First group">
-          <BaseDropdown
-            position="bottom-start"
-            width-class="w-50"
-            position-class="left-0"
-          >
-            <template #activator>
-              <BaseButton variant="gray">
-                <BaseIcon name="FunnelIcon" class="h-5" />
-              </BaseButton>
-            </template>
-
-            <div
-              class="
-                px-4
-                py-1
-                pb-2
-                mb-2
-                text-sm
-                border-b border-line-default border-solid
-              "
-            >
-              {{ $t('general.sort_by') }}
-            </div>
-
-            <div class="px-2">
-              <BaseDropdownItem class="rounded-md pt-3 hover:rounded-md">
-                <BaseInputGroup class="-mt-3 font-normal">
-                  <BaseRadio
-                    id="filter_estimate_date"
-                    v-model="searchData.orderByField"
-                    :label="$t('reports.estimates.estimate_date')"
-                    size="sm"
-                    name="filter"
-                    value="estimate_date"
-                    @change="onSearch"
-                  />
-                </BaseInputGroup>
-              </BaseDropdownItem>
-            </div>
-
-            <div class="px-2">
-              <BaseDropdownItem class="rounded-md pt-3 hover:rounded-md">
-                <BaseInputGroup class="-mt-3 font-normal">
-                  <BaseRadio
-                    id="filter_due_date"
-                    v-model="searchData.orderByField"
-                    :label="$t('estimates.due_date')"
-                    value="expiry_date"
-                    size="sm"
-                    name="filter"
-                    @update:modelValue="onSearch"
-                  />
-                </BaseInputGroup>
-              </BaseDropdownItem>
-            </div>
-
-            <div class="px-2">
-              <BaseDropdownItem class="rounded-md pt-3 hover:rounded-md">
-                <BaseInputGroup class="-mt-3 font-normal">
-                  <BaseRadio
-                    id="filter_estimate_number"
-                    v-model="searchData.orderByField"
-                    :label="$t('estimates.estimate_number')"
-                    value="estimate_number"
-                    size="sm"
-                    name="filter"
-                    @update:modelValue="onSearch"
-                  />
-                </BaseInputGroup>
-              </BaseDropdownItem>
-            </div>
-          </BaseDropdown>
-
-          <BaseButton class="ml-1" variant="white" @click="sortData">
-            <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
-            <BaseIcon v-else name="SortDescendingIcon" class="h-5" />
-          </BaseButton>
-        </div>
-      </div>
-
-      <div
-        class="
-          h-full
-          pb-32
-          overflow-y-scroll
-          border-l border-line-default border-solid
-          sw-scroll
-        "
-      >
-        <router-link
-          v-for="(estimate, index) in estimateStore.estimates"
-          :id="'estimate-' + estimate.id"
-          :key="index"
-          :to="`/${globalStore.companySlug}/customer/estimates/${estimate.id}/view`"
-          :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
-            {
-              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
-                hasActiveUrl(estimate.id),
-            },
-          ]"
-          style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
-        >
-          <div class="flex-2">
-            <div
-              class="
-                mb-1
-                text-md
-                not-italic
-                font-medium
-                leading-5
-                text-muted
-                capitalize
-              "
-            >
-              {{ estimate.estimate_number }}
-            </div>
-
-            <BaseEstimateStatusBadge :status="estimate.status">
-              <BaseEstimateStatusLabel :status="estimate.status" />
-            </BaseEstimateStatusBadge>
-          </div>
-
-          <div class="flex-1 whitespace-nowrap right">
-            <BaseFormatMoney
-              class="
-                mb-2
-                text-xl
-                not-italic
-                font-semibold
-                leading-8
-                text-right text-heading
-                block
-              "
-              :amount="estimate.total"
-              :currency="estimate.currency"
-            />
-            <div class="text-sm text-right text-muted non-italic">
-              {{ estimate.formatted_estimate_date }}
-            </div>
-          </div>
-        </router-link>
-
-        <p
-          v-if="!estimateStore.estimates.length"
-          class="flex justify-center px-4 mt-5 text-sm text-body"
-        >
-          {{ $t('estimates.no_matching_estimates') }}
-        </p>
-      </div>
-    </div>
-
-    <!-- pdf -->
-    <div
-      class="flex flex-col min-h-0 mt-8 overflow-hidden"
-      style="height: 75vh"
-    >
-      <iframe
-        v-if="shareableLink"
-        :src="shareableLink"
-        class="flex-1 border border-gray-400 border-solid rounded-md"
-      />
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
-import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
-import { debounce } from 'lodash'
-import { ref, reactive, computed, inject, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import moment from 'moment'
-import { useEstimateStore } from '@/scripts/customer/stores/estimate'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import { useDialogStore } from '@/scripts/stores/dialog'
-
-// Router
-const route = useRoute()
-const router = useRouter()
-
-// store
-const estimateStore = useEstimateStore()
-const globalStore = useGlobalStore()
-const dialogStore = useDialogStore()
-const { tm, t } = useI18n()
-
-// local state
-let estimate = reactive({})
-let searchData = reactive({
-  orderBy: '',
-  orderByField: '',
-  estimate_number: '',
-})
-
-let isSearching = ref(false)
-
-//Utils
-
-const utils = inject('utils')
-//Store
-
-const notificationStore = useNotificationStore()
-
-// Computed Props
-
-const pageTitle = computed(() => {
-  return estimateStore.selectedViewEstimate
-})
-
-const getOrderBy = computed(() => {
-  if (searchData.orderBy === 'asc' || searchData.orderBy == null) {
-    return true
-  }
-  return false
-})
-
-const getOrderName = computed(() =>
-  getOrderBy.value ? tm('general.ascending') : tm('general.descending')
-)
-
-const shareableLink = computed(() => {
-  return estimate.unique_hash ? `/estimates/pdf/${estimate.unique_hash}` : false
-})
-
-// Watcher
-
-watch(route, () => {
-  loadEstimate()
-})
-
-// Created
-
-loadEstimates()
-loadEstimate()
-
-onSearch = debounce(onSearch, 500)
-
-// Methods
-
-function hasActiveUrl(id) {
-  return route.params.id == id
-}
-
-async function loadEstimates() {
-  await estimateStore.fetchEstimate({ limit: 'all' }, globalStore.companySlug)
-
-  setTimeout(() => {
-    scrollToEstimate()
-  }, 500)
-}
-
-async function loadEstimate() {
-  if (route && route.params.id) {
-    let response = await estimateStore.fetchViewEstimate(
-      {
-        id: route.params.id,
-      },
-      globalStore.companySlug
-    )
-
-    if (response.data) {
-      Object.assign(estimate, response.data.data)
-    }
-  }
-}
-
-function scrollToEstimate() {
-  const el = document.getElementById(`estimate-${route.params.id}`)
-
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth' })
-    el.classList.add('shake')
-  }
-}
-
-async function onSearch() {
-  let data = {}
-
-  if (
-    searchData.estimate_number !== '' &&
-    searchData.estimate_number !== null &&
-    searchData.estimate_number !== undefined
-  ) {
-    data.estimate_number = searchData.estimate_number
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    data.orderBy = searchData.orderBy
-  }
-
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    data.orderByField = searchData.orderByField
-  }
-
-  isSearching.value = true
-  try {
-    let response = await estimateStore.searchEstimate(
-      data,
-      globalStore.companySlug
-    )
-    isSearching.value = false
-
-    if (response.data.data) {
-      estimateStore.estimates = response.data.data
-    }
-  } catch (error) {
-    isSearching.value = false
-  }
-}
-
-function sortData() {
-  if (searchData.orderBy === 'asc') {
-    searchData.orderBy = 'desc'
-    onSearch()
-    return true
-  }
-  searchData.orderBy = 'asc'
-  onSearch()
-  return true
-}
-
-async function AcceptEstimate() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('estimates.confirm_mark_as_accepted', 1),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'primary',
-      size: 'lg',
-      hideNoButton: false,
-    })
-    .then(async (res) => {
-      let data = {
-        slug: globalStore.companySlug,
-        id: route.params.id,
-        status: 'ACCEPTED',
-      }
-      if (res) {
-        estimateStore.acceptEstimate(data)
-        router.push({ name: 'estimates.dashboard' })
-      }
-    })
-}
-
-async function RejectEstimate() {
-  dialogStore
-    .openDialog({
-      title: t('general.are_you_sure'),
-      message: t('estimates.confirm_mark_as_rejected', 1),
-      yesLabel: t('general.ok'),
-      noLabel: t('general.cancel'),
-      variant: 'primary',
-      size: 'lg',
-      hideNoButton: false,
-    })
-    .then(async (res) => {
-      let data = {
-        slug: globalStore.companySlug,
-        id: route.params.id,
-        status: 'REJECTED',
-      }
-      if (res) {
-        estimateStore.rejectEstimate(data)
-        router.push({ name: 'estimates.dashboard' })
-      }
-    })
-}
-
-function copyPdfUrl() {
-  let pdfUrl = `${window.location.origin}/estimates/pdf/${estimate?.unique_hash}`
-  utils.copyTextToClipboard(pdfUrl)
-  notificationStore.showNotification({
-    type: 'success',
-    message: tm('general.copied_pdf_url_clipboard'),
-  })
-}
-</script>
diff --git a/resources/scripts/customer/views/invoices/Index.vue b/resources/scripts/customer/views/invoices/Index.vue
deleted file mode 100644
index 21251e68..00000000
--- a/resources/scripts/customer/views/invoices/Index.vue
+++ /dev/null
@@ -1,281 +0,0 @@
-<template>
-  <BasePage>
-    <!-- Page Header -->
-    <BasePageHeader :title="$t('invoices.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem
-          :title="$t('general.home')"
-          :to="`/${globalStore.companySlug}/customer/dashboard`"
-        />
-        <BaseBreadcrumbItem :title="$t('invoices.invoice', 2)" to="#" active />
-      </BaseBreadcrumb>
-      <template #actions>
-        <BaseButton
-          v-show="invoiceStore.totalInvoices"
-          variant="primary-outline"
-          @click="toggleFilter"
-        >
-          {{ $t('general.filter') }}
-          <template #right="slotProps">
-            <BaseIcon
-              v-if="!showFilters"
-              name="FunnelIcon"
-              :class="slotProps.class"
-            />
-            <BaseIcon v-else name="XMarkIcon" :class="slotProps.class" />
-          </template>
-        </BaseButton>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper v-show="showFilters" @clear="clearFilter">
-      <BaseInputGroup :label="$t('invoices.status')" class="px-3">
-        <BaseSelectInput
-          v-model="filters.status"
-          :options="status"
-          searchable
-          :allow-empty="false"
-          :placeholder="$t('general.select_a_status')"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup
-        :label="$t('invoices.invoice_number')"
-        color="black-light"
-        class="px-3 mt-2"
-      >
-        <BaseInput v-model="filters.invoice_number">
-          <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-          <BaseIcon name="HashtagIcon" class="h-5 ml-3 text-body" />
-        </BaseInput>
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('general.from')" class="px-3">
-        <BaseDatePicker
-          v-model="filters.from_date"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-
-      <div
-        class="hidden w-8 h-0 mx-4 border border-gray-400 border-solid xl:block"
-        style="margin-top: 1.5rem"
-      />
-
-      <BaseInputGroup :label="$t('general.to')" class="px-3">
-        <BaseDatePicker
-          v-model="filters.to_date"
-          :calendar-button="true"
-          calendar-button-icon="calendar"
-        />
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <BaseEmptyPlaceholder
-      v-if="showEmptyScreen"
-      :title="$t('invoices.no_invoices')"
-      :description="$t('invoices.list_of_invoices')"
-    >
-      <MoonwalkerIcon class="mt-5 mb-4" />
-    </BaseEmptyPlaceholder>
-
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <BaseTable
-        ref="table"
-        :data="fetchData"
-        :columns="itemColumns"
-        :placeholder-count="invoiceStore.totalInvoices >= 20 ? 10 : 5"
-        class="mt-10"
-      >
-        <template #cell-invoice_date="{ row }">
-          {{ row.data.formatted_invoice_date }}
-        </template>
-
-        <template #cell-invoice_number="{ row }">
-          <router-link
-            :to="{ path: `invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.invoice_number }}
-          </router-link>
-        </template>
-
-        <template #cell-due_amount="{ row }">
-          <BaseFormatMoney
-            :amount="row.data.total"
-            :currency="row.data.customer.currency"
-          />
-        </template>
-
-        <template #cell-status="{ row }">
-          <BaseInvoiceStatusBadge :status="row.data.status" class="px-3 py-1">
-            <BaseInvoiceStatusLabel :status="row.data.status" />
-          </BaseInvoiceStatusBadge>
-        </template>
-
-        <template #cell-paid_status="{ row }">
-          <BaseInvoiceStatusBadge
-            :status="row.data.paid_status"
-            class="px-3 py-1"
-          >
-            <BaseInvoiceStatusLabel :status="row.data.paid_status" />
-          </BaseInvoiceStatusBadge>
-        </template>
-
-        <template #cell-actions="{ row }">
-          <BaseDropdown>
-            <template #activator>
-              <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
-            </template>
-            <router-link :to="`invoices/${row.data.id}/view`">
-              <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-body" />
-                {{ $t('general.view') }}
-              </BaseDropdownItem>
-            </router-link>
-          </BaseDropdown>
-        </template>
-      </BaseTable>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { useInvoiceStore } from '@/scripts/customer/stores/invoice'
-import { debouncedWatch } from '@vueuse/core'
-import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
-import { ref, computed, reactive, inject, onMounted } from 'vue'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import { useRoute } from 'vue-router'
-import MoonwalkerIcon from '@/scripts/components/icons/empty/MoonwalkerIcon.vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
-
-//Utils
-const utils = inject('utils')
-const route = useRoute()
-// local state
-const table = ref(null)
-let isFetchingInitialData = ref(true)
-let showFilters = ref(false)
-const status = ref([
-  {label: t('general.draft'), value: 'DRAFT'},
-  {label: t('general.due'), value: 'DUE'},
-  {label: t('general.sent'), value: 'SENT'},
-  {label: t('invoices.viewed'), value: 'VIEWED'},
-  {label: t('invoices.completed'), value: 'COMPLETED'}
-])
-const filters = reactive({
-  status: '',
-  from_date: '',
-  to_date: '',
-  invoice_number: '',
-})
-
-// store
-
-const invoiceStore = useInvoiceStore()
-const globalStore = useGlobalStore()
-
-// Invoice Table columns Data
-
-const currency = computed(() => {
-  return globalStore.currency
-})
-
-const itemColumns = computed(() => {
-  return [
-    {
-      key: 'invoice_date',
-      label: t('invoices.date'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    { key: 'invoice_number', label: t('invoices.number') },
-
-    { key: 'status', label: t('invoices.status') },
-    { key: 'paid_status', label: t('invoices.paid_status') },
-    {
-      key: 'due_amount',
-      label: t('dashboard.recent_invoices_card.amount_due'),
-    },
-    {
-      key: 'actions',
-      thClass: 'text-right',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-// computed props
-
-const showEmptyScreen = computed(() => {
-  return !invoiceStore.totalInvoices && !isFetchingInitialData.value
-})
-
-//watch
-
-debouncedWatch(
-  filters,
-  () => {
-    setFilters()
-  },
-  { debounce: 500 }
-)
-
-//methods
-
-function refreshTable() {
-  table.value.refresh()
-}
-
-function setFilters() {
-  refreshTable()
-}
-
-function clearFilter() {
-  filters.status = ''
-  filters.from_date = ''
-  filters.to_date = ''
-  filters.invoice_number = ''
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-
-async function fetchData({ page, sort }) {
-  let data = {
-    status: filters.status.value,
-    invoice_number: filters.invoice_number,
-    from_date: filters.from_date,
-    to_date: filters.to_date,
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  isFetchingInitialData.value = true
-
-  let response = await invoiceStore.fetchInvoices(data, globalStore.companySlug)
-
-  isFetchingInitialData.value = false
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-</script>
diff --git a/resources/scripts/customer/views/invoices/View.vue b/resources/scripts/customer/views/invoices/View.vue
deleted file mode 100644
index 9833e523..00000000
--- a/resources/scripts/customer/views/invoices/View.vue
+++ /dev/null
@@ -1,405 +0,0 @@
-<template>
-  <BasePage class="xl:pl-96">
-    <BasePageHeader :title="pageTitle.invoice_number">
-      <template #actions>
-        <BaseButton
-          :disabled="isSendingEmail"
-          variant="primary-outline"
-          class="mr-2"
-          tag="a"
-          :href="`/invoices/pdf/${invoice.unique_hash}`"
-          download
-        >
-          <template #left="slotProps">
-            <BaseIcon name="DownloadIcon" :class="slotProps.class" />
-            {{ $t('invoices.download') }}
-          </template>
-        </BaseButton>
-
-        <BaseButton
-          v-if="
-            invoiceStore?.selectedViewInvoice?.paid_status !== 'PAID' &&
-            globalStore.enabledModules.includes('Payments')
-          "
-          variant="primary"
-          @click="payInvoice"
-        >
-          {{ $t('invoices.pay_invoice') }}
-        </BaseButton>
-      </template>
-    </BasePageHeader>
-
-    <!-- Sidebar -->
-    <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-surface w-88 xl:block"
-    >
-      <div
-        class="
-          flex
-          items-center
-          justify-between
-          px-4
-          pt-8
-          pb-6
-          border border-line-default border-solid
-        "
-      >
-        <BaseInput
-          v-model="searchData.invoice_number"
-          :placeholder="$t('general.search')"
-          type="text"
-          variant="gray"
-          @input="onSearch"
-        >
-          <template #right>
-            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
-          </template>
-        </BaseInput>
-
-        <div class="flex ml-3" role="group" aria-label="First group">
-          <BaseDropdown
-            position="bottom-start"
-            width-class="w-50"
-            position-class="left-0"
-          >
-            <template #activator>
-              <BaseButton variant="gray">
-                <BaseIcon name="FunnelIcon" class="h-5" />
-              </BaseButton>
-            </template>
-
-            <div
-              class="
-                px-4
-                py-1
-                pb-2
-                mb-2
-                text-sm
-                border-b border-line-default border-solid
-              "
-            >
-              {{ $t('general.sort_by') }}
-            </div>
-
-            <div class="px-2">
-              <BaseDropdownItem class="pt-3 rounded-md hover:rounded-md">
-                <BaseInputGroup class="-mt-3 font-normal">
-                  <BaseRadio
-                    id="filter_invoice_date"
-                    v-model="searchData.orderByField"
-                    :label="$t('invoices.invoice_date')"
-                    name="filter"
-                    size="sm"
-                    value="invoice_date"
-                    @update:modelValue="onSearch"
-                  />
-                </BaseInputGroup>
-              </BaseDropdownItem>
-            </div>
-
-            <div class="px-2">
-              <BaseDropdownItem class="pt-3 rounded-md hover:rounded-md">
-                <BaseInputGroup class="-mt-3 font-normal">
-                  <BaseRadio
-                    id="filter_due_date"
-                    v-model="searchData.orderByField"
-                    :label="$t('invoices.due_date')"
-                    name="filter"
-                    size="sm"
-                    value="due_date"
-                    @update:modelValue="onSearch"
-                  />
-                </BaseInputGroup>
-              </BaseDropdownItem>
-            </div>
-
-            <div class="px-2">
-              <BaseDropdownItem class="pt-3 rounded-md hover:rounded-md">
-                <BaseInputGroup class="-mt-3 font-normal">
-                  <BaseRadio
-                    id="filter_invoice_number"
-                    v-model="searchData.orderByField"
-                    :label="$t('invoices.invoice_number')"
-                    size="sm"
-                    name="filter"
-                    value="invoice_number"
-                    @update:modelValue="onSearch"
-                  />
-                </BaseInputGroup>
-              </BaseDropdownItem>
-            </div>
-          </BaseDropdown>
-
-          <BaseButton class="ml-1" variant="white" @click="sortData">
-            <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
-            <BaseIcon v-else name="SortDescendingIcon" class="h-5" />
-          </BaseButton>
-        </div>
-      </div>
-
-      <div
-        class="
-          h-full
-          pb-32
-          overflow-y-scroll
-          border-l border-line-default border-solid
-          sw-scroll
-        "
-      >
-        <router-link
-          v-for="(invoice, index) in invoiceStore.invoices"
-          :id="'invoice-' + invoice.id"
-          :key="index"
-          :to="`/${globalStore.companySlug}/customer/invoices/${invoice.id}/view`"
-          :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
-            {
-              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
-                hasActiveUrl(invoice.id),
-            },
-          ]"
-          style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
-        >
-          <div class="flex-2">
-            <div
-              class="
-                mb-1
-                not-italic
-                font-medium
-                leading-5
-                text-muted
-                capitalize
-                text-md
-              "
-            >
-              {{ invoice.invoice_number }}
-            </div>
-            <BaseInvoiceStatusBadge :status="invoice.status">
-              <BaseInvoiceStatusLabel :status="invoice.status" />
-            </BaseInvoiceStatusBadge>
-          </div>
-
-          <div class="flex-1 whitespace-nowrap right">
-            <BaseFormatMoney
-              class="
-                mb-2
-                text-xl
-                not-italic
-                font-semibold
-                leading-8
-                text-right text-heading
-                block
-              "
-              :amount="invoice.total"
-              :currency="invoice.currency"
-            />
-
-            <div class="text-sm text-right text-muted non-italic">
-              {{ invoice.formatted_invoice_date }}
-            </div>
-          </div>
-        </router-link>
-
-        <p
-          v-if="!invoiceStore.invoices.length"
-          class="flex justify-center px-4 mt-5 text-sm text-body"
-        >
-          {{ $t('invoices.no_matching_invoices') }}
-        </p>
-      </div>
-    </div>
-
-    <!-- pdf -->
-    <div
-      class="flex flex-col min-h-0 mt-8 overflow-hidden"
-      style="height: 75vh"
-    >
-      <iframe
-        v-if="shareableLink"
-        ref="report"
-        :src="shareableLink"
-        class="flex-1 border border-gray-400 border-solid rounded-md"
-        @click="ViewReportsPDF"
-      />
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
-import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
-import { debounce } from 'lodash'
-import { ref, reactive, computed, inject, watch, onMounted } from 'vue'
-import { useRoute } from 'vue-router'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import moment from 'moment'
-import { useInvoiceStore } from '@/scripts/customer/stores/invoice'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-
-// Router
-const route = useRoute()
-//store
-
-const invoiceStore = useInvoiceStore()
-const globalStore = useGlobalStore()
-const { tm } = useI18n()
-
-//local state
-let invoice = reactive({})
-let searchData = reactive({
-  orderBy: '',
-  orderByField: '',
-  invoice_number: '',
-  // searchText: '',
-})
-
-let url = ref(null)
-let siteURL = ref(null)
-let isSearching = ref(false)
-let isSendingEmail = ref(false)
-let isMarkingAsSent = ref(false)
-
-//Utils
-const utils = inject('utils')
-
-//Store
-
-const notificationStore = useNotificationStore()
-
-// Computed Props
-
-const pageTitle = computed(() => {
-  return invoiceStore.selectedViewInvoice
-})
-
-const getOrderBy = computed(() => {
-  if (searchData.orderBy === 'asc' || searchData.orderBy == null) {
-    return true
-  }
-  return false
-})
-
-const getOrderName = computed(() =>
-  getOrderBy.value ? tm('general.ascending') : tm('general.descending')
-)
-
-const shareableLink = computed(() => {
-  return invoice.unique_hash ? `/invoices/pdf/${invoice.unique_hash}` : false
-})
-
-// Watcher
-
-watch(route, () => {
-  loadInvoice()
-})
-
-// Created
-
-loadInvoices()
-loadInvoice()
-
-onSearch = debounce(onSearch, 500)
-
-// Methods
-
-function hasActiveUrl(id) {
-  return route.params.id == id
-}
-
-async function loadInvoices() {
-  await invoiceStore.fetchInvoices(
-    {
-      limit: 'all',
-    },
-    globalStore.companySlug
-  )
-
-  setTimeout(() => {
-    scrollToInvoice()
-  }, 500)
-}
-
-async function loadInvoice() {
-  if (route && route.params.id) {
-    let response = await invoiceStore.fetchViewInvoice(
-      {
-        id: route.params.id,
-      },
-      globalStore.companySlug
-    )
-
-    if (response.data) {
-      Object.assign(invoice, response.data.data)
-    }
-  }
-}
-
-function scrollToInvoice() {
-  const el = document.getElementById(`invoice-${route.params.id}`)
-
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth' })
-    el.classList.add('shake')
-  }
-}
-
-async function onSearch() {
-  let data = {}
-
-  if (
-    searchData.invoice_number !== '' &&
-    searchData.invoice_number !== null &&
-    searchData.invoice_number !== undefined
-  ) {
-    data.invoice_number = searchData.invoice_number
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    data.orderBy = searchData.orderBy
-  }
-
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    data.orderByField = searchData.orderByField
-  }
-
-  isSearching.value = true
-  try {
-    let response = await invoiceStore.searchInvoice(
-      data,
-      globalStore.companySlug
-    )
-    isSearching.value = false
-
-    if (response.data.data) {
-      invoiceStore.invoices = response.data.data
-    }
-  } catch (error) {
-    isSearching.value = false
-  }
-}
-
-function sortData() {
-  if (searchData.orderBy === 'asc') {
-    searchData.orderBy = 'desc'
-    onSearch()
-    return true
-  }
-  searchData.orderBy = 'asc'
-  onSearch()
-  return true
-}
-
-function payInvoice() {
-  router.push({
-    name: 'invoice.portal.payment',
-    params: {
-      id: invoiceStore.selectedViewInvoice.id,
-      company: invoiceStore.selectedViewInvoice.company.slug,
-    },
-  })
-}
-</script>
diff --git a/resources/scripts/customer/views/payments/Index.vue b/resources/scripts/customer/views/payments/Index.vue
deleted file mode 100644
index e2463505..00000000
--- a/resources/scripts/customer/views/payments/Index.vue
+++ /dev/null
@@ -1,261 +0,0 @@
-<template>
-  <BasePage>
-    <BasePageHeader :title="$t('payments.title')">
-      <template #breadcrumbs>
-        <BaseBreadcrumb>
-          <BaseBreadcrumbItem
-            :title="$t('general.home')"
-            :to="`/${globalStore.companySlug}/customer/dashboard`"
-          />
-
-          <BaseBreadcrumbItem :title="$t('payments.payment', 2)" to="#" active />
-        </BaseBreadcrumb>
-      </template>
-
-      <template #actions>
-        <BaseButton
-          v-show="paymentStore.totalPayments"
-          variant="primary-outline"
-          @click="toggleFilter"
-        >
-          {{ $t('general.filter') }}
-          <template #right="slotProps">
-            <BaseIcon
-              v-if="!showFilters"
-              :class="slotProps.class"
-              name="FunnelIcon"
-            />
-            <BaseIcon v-else :class="slotProps.class" name="XMarkIcon" />
-          </template>
-        </BaseButton>
-      </template>
-    </BasePageHeader>
-
-    <BaseFilterWrapper v-show="showFilters" @clear="clearFilter">
-      <BaseInputGroup :label="$t('payments.payment_number')" class="px-3">
-        <BaseInput
-          v-model="filters.payment_number"
-          :placeholder="$t('payments.payment_number')"
-        />
-      </BaseInputGroup>
-
-      <BaseInputGroup :label="$t('payments.payment_mode')" class="px-3">
-        <BaseMultiselect
-          v-model="filters.payment_mode"
-          value-prop="id"
-          track-by="name"
-          :filter-results="false"
-          label="name"
-          resolve-on-load
-          :delay="100"
-          searchable
-          :options="searchPayment"
-          :placeholder="$t('payments.payment_mode')"
-        />
-      </BaseInputGroup>
-    </BaseFilterWrapper>
-
-    <BaseEmptyPlaceholder
-      v-if="showEmptyScreen"
-      :title="$t('payments.no_payments')"
-      :description="$t('payments.list_of_payments')"
-    >
-      <CapsuleIcon class="mt-5 mb-4" />
-    </BaseEmptyPlaceholder>
-
-    <div v-show="!showEmptyScreen" class="relative table-container">
-      <BaseTable
-        ref="table"
-        :data="fetchData"
-        :columns="paymentColumns"
-        :placeholder-count="paymentStore.totalPayments >= 20 ? 10 : 5"
-        class="mt-10"
-      >
-        <template #cell-payment_date="{ row }">
-          {{ row.data.formatted_payment_date }}
-        </template>
-
-        <template #cell-payment_number="{ row }">
-          <router-link
-            :to="{
-              path: `payments/${row.data.id}/view`,
-            }"
-            class="font-medium text-primary-500"
-          >
-            {{ row.data.payment_number }}
-          </router-link>
-        </template>
-
-        <template #cell-payment_mode="{ row }">
-          <span>
-            {{
-              row.data.payment_method
-                ? row.data.payment_method.name
-                : $t('payments.not_selected')
-            }}
-          </span>
-        </template>
-
-        <template #cell-invoice_number="{ row }">
-          <span>
-            {{
-              row.data.invoice?.invoice_number
-                ? row.data.invoice?.invoice_number
-                : $t('payments.no_invoice')
-            }}
-          </span>
-        </template>
-
-        <template #cell-amount="{ row }">
-          <div v-html="utils.formatMoney(row.data.amount, currency)" />
-        </template>
-
-        <template #cell-actions="{ row }">
-          <BaseDropdown>
-            <template #activator>
-              <BaseIcon name="EllipsisHorizontalIcon" class="w-5 text-muted" />
-            </template>
-            <router-link :to="`payments/${row.data.id}/view`">
-              <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-body" />
-                {{ $t('general.view') }}
-              </BaseDropdownItem>
-            </router-link>
-          </BaseDropdown>
-        </template>
-      </BaseTable>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { debouncedWatch } from '@vueuse/core'
-import BaseTable from '@/scripts/components/base/base-table/BaseTable.vue'
-import CapsuleIcon from '@/scripts/components/icons/empty/CapsuleIcon.vue'
-import { ref, reactive, inject, computed } from 'vue'
-import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
-import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
-import { useI18n } from 'vue-i18n'
-import { usePaymentStore } from '@/scripts/customer/stores/payment'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import { useRoute } from 'vue-router'
-
-const { tm, t } = useI18n()
-let showFilters = ref(false)
-let sortedBy = ref('created_at')
-let isFetchingInitialData = ref(true)
-let table = ref(null)
-const filters = reactive({
-  payment_mode: '',
-  payment_number: '',
-})
-
-//Utils
-const utils = inject('utils')
-
-//Store
-const route = useRoute()
-const paymentStore = usePaymentStore()
-const globalStore = useGlobalStore()
-
-// Computed Props
-
-const showEmptyScreen = computed(() => {
-  return !paymentStore.totalPayments && !isFetchingInitialData.value
-})
-
-const currency = computed(() => {
-  return globalStore.currency
-})
-
-// Payment Table columns Data
-
-const paymentColumns = computed(() => {
-  return [
-    {
-      key: 'payment_date',
-      label: t('payments.date'),
-      thClass: 'extra',
-      tdClass: 'font-medium text-heading',
-    },
-    { key: 'payment_number', label: t('payments.payment_number') },
-    { key: 'payment_mode', label: t('payments.payment_mode') },
-    { key: 'invoice_number', label: t('invoices.invoice_number') },
-    { key: 'amount', label: t('payments.amount') },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'text-right text-sm font-medium',
-      sortable: false,
-    },
-  ]
-})
-
-// Created
-
-debouncedWatch(
-  filters,
-  () => {
-    setFilters()
-  },
-  { debounce: 500 }
-)
-
-// Methods
-
-async function searchPayment(search) {
-  let res = await paymentStore.fetchPaymentModes(
-    search,
-    globalStore.companySlug
-  )
-  return res.data.data
-}
-
-async function fetchData({ page, filter, sort }) {
-  let data = {
-    payment_method_id:
-      filters.payment_mode !== null ? filters.payment_mode : '',
-    payment_number: filters.payment_number,
-    orderByField: sort.fieldName || 'created_at',
-    orderBy: sort.order || 'desc',
-    page,
-  }
-
-  isFetchingInitialData.value = true
-  let response = await paymentStore.fetchPayments(data, globalStore.companySlug)
-
-  isFetchingInitialData.value = false
-
-  return {
-    data: response.data.data,
-    pagination: {
-      totalPages: response.data.meta.last_page,
-      currentPage: page,
-      totalCount: response.data.meta.total,
-      limit: 10,
-    },
-  }
-}
-
-function refreshTable() {
-  table.value.refresh()
-}
-
-function setFilters() {
-  refreshTable()
-}
-
-function clearFilter() {
-  filters.customer = ''
-  filters.payment_mode = ''
-  filters.payment_number = ''
-}
-
-function toggleFilter() {
-  if (showFilters.value) {
-    clearFilter()
-  }
-
-  showFilters.value = !showFilters.value
-}
-</script>
diff --git a/resources/scripts/customer/views/payments/View.vue b/resources/scripts/customer/views/payments/View.vue
deleted file mode 100644
index dd5bc8d4..00000000
--- a/resources/scripts/customer/views/payments/View.vue
+++ /dev/null
@@ -1,374 +0,0 @@
-<template>
-  <BasePage class="xl:pl-96">
-    <BasePageHeader :title="pageTitle.payment_number">
-      <template #actions>
-        <BaseButton
-          :disabled="isSendingEmail"
-          variant="primary-outline"
-          tag="a"
-          download
-          :href="`/payments/pdf/${payment.unique_hash}`"
-        >
-          <template #left="slotProps">
-            <BaseIcon name="DownloadIcon" :class="slotProps.class" />
-            {{ $t('general.download') }}
-          </template>
-        </BaseButton>
-      </template>
-    </BasePageHeader>
-
-    <!-- Sidebar -->
-    <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-surface w-88 xl:block"
-    >
-      <div
-        class="
-          flex
-          items-center
-          justify-between
-          px-4
-          pt-8
-          pb-6
-          border border-line-default border-solid
-        "
-      >
-        <BaseInput
-          v-model="searchData.payment_number"
-          :placeholder="$t('general.search')"
-          type="text"
-          variant="gray"
-          @input="onSearch"
-        >
-          <template #right>
-            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
-          </template>
-        </BaseInput>
-
-        <div class="flex ml-3" role="group" aria-label="First group">
-          <BaseDropdown
-            position="bottom-start"
-            width-class="w-50"
-            position-class="left-0"
-          >
-            <template #activator>
-              <BaseButton variant="gray">
-                <BaseIcon name="FunnelIcon" class="h-5" />
-              </BaseButton>
-            </template>
-
-            <div
-              class="
-                px-4
-                py-1
-                pb-2
-                mb-2
-                text-sm
-                border-b border-line-default border-solid
-              "
-            >
-              {{ $t('general.sort_by') }}
-            </div>
-
-            <div class="px-2">
-              <BaseDropdownItem class="rounded-md pt-3 hover:rounded-md">
-                <BaseInputGroup class="-mt-3 font-normal">
-                  <BaseRadio
-                    id="filter_invoice_number"
-                    v-model="searchData.orderByField"
-                    :label="$t('invoices.title')"
-                    size="sm"
-                    name="filter"
-                    value="invoice_number"
-                    @update:modelValue="onSearch"
-                  />
-                </BaseInputGroup>
-              </BaseDropdownItem>
-            </div>
-
-            <div class="px-2">
-              <BaseDropdownItem class="rounded-md pt-3 hover:rounded-md">
-                <BaseInputGroup class="-mt-3 font-normal">
-                  <BaseRadio
-                    id="filter_payment_date"
-                    v-model="searchData.orderByField"
-                    :label="$t('payments.date')"
-                    size="sm"
-                    name="filter"
-                    value="payment_date"
-                    @update:modelValue="onSearch"
-                  />
-                </BaseInputGroup>
-              </BaseDropdownItem>
-            </div>
-
-            <div class="px-2">
-              <BaseDropdownItem class="rounded-md pt-3 hover:rounded-md">
-                <BaseInputGroup class="-mt-3 font-normal">
-                  <BaseRadio
-                    id="filter_payment_number"
-                    v-model="searchData.orderByField"
-                    :label="$t('payments.payment_number')"
-                    size="sm"
-                    name="filter"
-                    value="payment_number"
-                    @update:modelValue="onSearch"
-                  />
-                </BaseInputGroup>
-              </BaseDropdownItem>
-            </div>
-          </BaseDropdown>
-
-          <BaseButton class="ml-1" variant="white" @click="sortData">
-            <BaseIcon v-if="getOrderBy" name="SortAscendingIcon" class="h-5" />
-            <BaseIcon v-else name="SortDescendingIcon" class="h-5" />
-          </BaseButton>
-        </div>
-      </div>
-
-      <div
-        class="
-          h-full
-          pb-32
-          overflow-y-scroll
-          border-l border-line-default border-solid
-          sw-scroll
-        "
-      >
-        <router-link
-          v-for="(payment, index) in paymentStore.payments"
-          :id="'payment-' + payment.id"
-          :key="index"
-          :to="`/${globalStore.companySlug}/customer/payments/${payment.id}/view`"
-          :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
-            {
-              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
-                hasActiveUrl(payment.id),
-            },
-          ]"
-          style="border-bottom: 1px solid rgba(185, 193, 209, 0.41)"
-        >
-          <div class="flex-2">
-            <div
-              class="
-                mb-1
-                text-md
-                not-italic
-                font-medium
-                leading-5
-                text-muted
-                capitalize
-              "
-            >
-              {{ payment.payment_number }}
-            </div>
-          </div>
-
-          <div class="flex-1 whitespace-nowrap right">
-            <BaseFormatMoney
-              class="
-                mb-2
-                text-xl
-                not-italic
-                font-semibold
-                leading-8
-                text-right text-heading
-                block
-              "
-              :amount="payment.amount"
-              :currency="payment.currency"
-            />
-
-            <div class="text-sm text-right text-muted non-italic">
-              {{ payment.formatted_payment_date }}
-            </div>
-          </div>
-        </router-link>
-
-        <p
-          v-if="!paymentStore.payments.length"
-          class="flex justify-center px-4 mt-5 text-sm text-body"
-        >
-          {{ $t('payments.no_matching_payments') }}
-        </p>
-      </div>
-    </div>
-
-    <!-- pdf -->
-    <div
-      class="flex flex-col min-h-0 mt-8 overflow-hidden"
-      style="height: 75vh"
-    >
-      <iframe
-        v-if="shareableLink"
-        :src="shareableLink"
-        class="flex-1 border border-gray-400 border-solid rounded-md"
-      />
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { useI18n } from 'vue-i18n'
-import BaseDropdown from '@/scripts/components/base/BaseDropdown.vue'
-import BaseDropdownItem from '@/scripts/components/base/BaseDropdownItem.vue'
-import { debounce } from 'lodash'
-import { ref, reactive, computed, inject, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { useNotificationStore } from '@/scripts/stores/notification'
-import moment from 'moment'
-import { usePaymentStore } from '@/scripts/customer/stores/payment'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-
-// Router
-const route = useRoute()
-const paymentStore = usePaymentStore()
-const globalStore = useGlobalStore()
-
-const { tm, t } = useI18n()
-// let id = ref(null)
-
-let payment = reactive({})
-let searchData = reactive({
-  orderBy: '',
-  orderByField: '',
-  payment_number: '',
-})
-
-let isSearching = ref(false)
-let isSendingEmail = ref(false)
-let isMarkingAsSent = ref(false)
-
-//Utils
-
-const $utils = inject('utils')
-
-//Store
-
-const notificationStore = useNotificationStore()
-
-// Computed Props
-const pageTitle = computed(() => {
-  return paymentStore.selectedViewPayment
-})
-
-const getOrderBy = computed(() => {
-  if (searchData.orderBy === 'asc' || searchData.orderBy == null) {
-    return true
-  }
-  return false
-})
-
-const getOrderName = computed(() =>
-  getOrderBy.value ? tm('general.ascending') : tm('general.descending')
-)
-
-const shareableLink = computed(() => {
-  return payment.unique_hash ? `/payments/pdf/${payment.unique_hash}` : false
-})
-
-// Watcher
-
-watch(route, () => {
-  loadPayment()
-})
-
-// Created
-
-loadPayments()
-loadPayment()
-
-onSearch = debounce(onSearch, 500)
-
-// Methods
-
-function hasActiveUrl(id) {
-  return route.params.id == id
-}
-
-async function loadPayments() {
-  await paymentStore.fetchPayments(
-    {
-      limit: 'all',
-    },
-    globalStore.companySlug
-  )
-
-  setTimeout(() => {
-    scrollToPayment()
-  }, 500)
-}
-
-async function loadPayment() {
-  if (route && route.params.id) {
-    let response = await paymentStore.fetchViewPayment(
-      {
-        id: route.params.id,
-      },
-      globalStore.companySlug
-    )
-
-    if (response.data) {
-      Object.assign(payment, response.data.data)
-    }
-  }
-}
-
-function scrollToPayment() {
-  const el = document.getElementById(`payment-${route.params.id}`)
-
-  if (el) {
-    el.scrollIntoView({ behavior: 'smooth' })
-    el.classList.add('shake')
-  }
-}
-
-async function onSearch() {
-  let data = {}
-
-  if (
-    searchData.payment_number !== '' &&
-    searchData.payment_number !== null &&
-    searchData.payment_number !== undefined
-  ) {
-    data.payment_number = searchData.payment_number
-  }
-
-  if (searchData.orderBy !== null && searchData.orderBy !== undefined) {
-    data.orderBy = searchData.orderBy
-  }
-
-  if (
-    searchData.orderByField !== null &&
-    searchData.orderByField !== undefined
-  ) {
-    data.orderByField = searchData.orderByField
-  }
-
-  isSearching.value = true
-  try {
-    let response = await paymentStore.searchPayment(
-      data,
-      globalStore.companySlug
-    )
-    isSearching.value = false
-
-    if (response.data.data) {
-      paymentStore.payments = response.data.data
-    }
-  } catch (error) {
-    isSearching.value = false
-  }
-}
-
-function sortData() {
-  if (searchData.orderBy === 'asc') {
-    searchData.orderBy = 'desc'
-    onSearch()
-    return true
-  }
-  searchData.orderBy = 'asc'
-  onSearch()
-  return true
-}
-</script>
diff --git a/resources/scripts/customer/views/settings/AddressInformation.vue b/resources/scripts/customer/views/settings/AddressInformation.vue
deleted file mode 100644
index 206014bc..00000000
--- a/resources/scripts/customer/views/settings/AddressInformation.vue
+++ /dev/null
@@ -1,282 +0,0 @@
-<template>
-  <form class="relative h-full mt-4" @submit.prevent="UpdateCustomerAddress">
-    <BaseCard>
-      <div class="mb-6">
-        <h6 class="font-bold text-left">
-          {{ $t('settings.menu_title.address_information') }}
-        </h6>
-        <p
-          class="mt-2 text-sm leading-snug text-left text-muted"
-          style="max-width: 680px"
-        >
-          {{ $t('settings.address_information.section_description') }}
-        </p>
-      </div>
-
-      <!-- Billing Address   -->
-
-      <div class="grid grid-cols-5 gap-4 mb-8">
-        <h6 class="col-span-5 text-lg font-semibold text-left lg:col-span-1">
-          {{ $t('customers.billing_address') }}
-        </h6>
-
-        <div
-          class="grid col-span-5 lg:col-span-4 gap-y-6 gap-x-4 md:grid-cols-6"
-        >
-          <BaseInputGroup
-            :label="$t('customers.name')"
-            class="w-full md:col-span-3"
-          >
-            <BaseInput
-              v-model.trim="userStore.userForm.billing.name"
-              type="text"
-              class="w-full"
-              name="address_name"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('customers.country')"
-            class="md:col-span-3"
-          >
-            <BaseMultiselect
-              v-model="userStore.userForm.billing.country_id"
-              value-prop="id"
-              label="name"
-              track-by="name"
-              resolve-on-load
-              searchable
-              :options="globalStore.countries"
-              :placeholder="$t('general.select_country')"
-              class="w-full"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('customers.state')" class="md:col-span-3">
-            <BaseInput
-              v-model="userStore.userForm.billing.state"
-              name="billing.state"
-              type="text"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('customers.city')" class="md:col-span-3">
-            <BaseInput
-              v-model="userStore.userForm.billing.city"
-              name="billing.city"
-              type="text"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('customers.address')"
-            class="md:col-span-3"
-          >
-            <BaseTextarea
-              v-model.trim="userStore.userForm.billing.address_street_1"
-              :placeholder="$t('general.street_1')"
-              type="text"
-              name="billing_street1"
-              :container-class="`mt-3`"
-            />
-
-            <BaseTextarea
-              v-model.trim="userStore.userForm.billing.address_street_2"
-              :placeholder="$t('general.street_2')"
-              type="text"
-              class="mt-3"
-              name="billing_street2"
-              :container-class="`mt-3`"
-            />
-          </BaseInputGroup>
-
-          <div class="md:col-span-3">
-            <BaseInputGroup :label="$t('customers.phone')" class="text-left">
-              <BaseInput
-                v-model.trim="userStore.userForm.billing.phone"
-                type="text"
-                name="phone"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.zip_code')"
-              class="mt-2 text-left"
-            >
-              <BaseInput
-                v-model.trim="userStore.userForm.billing.zip"
-                type="text"
-                name="zip"
-              />
-            </BaseInputGroup>
-          </div>
-        </div>
-      </div>
-
-      <BaseDivider class="mb-5 md:mb-8" />
-
-      <!-- Billing Address Copy Button  -->
-      <div class="flex items-center justify-start mb-6 md:justify-end md:mb-0">
-        <div class="p-1">
-          <BaseButton
-            ref="sameAddress"
-            type="button"
-            @click="userStore.copyAddress(true)"
-          >
-            <template #left="slotProps">
-              <BaseIcon name="DocumentDuplicateIcon" :class="slotProps.class" />
-            </template>
-            {{ $t('customers.copy_billing_address') }}
-          </BaseButton>
-        </div>
-      </div>
-
-      <!-- Shipping Address  -->
-
-      <div class="grid grid-cols-5 gap-4 mb-8">
-        <h6 class="col-span-5 text-lg font-semibold text-left lg:col-span-1">
-          {{ $t('customers.shipping_address') }}
-        </h6>
-
-        <div
-          v-if="userStore.userForm.shipping"
-          class="grid col-span-5 lg:col-span-4 gap-y-6 gap-x-4 md:grid-cols-6"
-        >
-          <BaseInputGroup :label="$t('customers.name')" class="md:col-span-3">
-            <BaseInput
-              v-model.trim="userStore.userForm.shipping.name"
-              type="text"
-              name="address_name"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('customers.country')"
-            class="md:col-span-3"
-          >
-            <BaseMultiselect
-              v-model="userStore.userForm.shipping.country_id"
-              value-prop="id"
-              label="name"
-              track-by="name"
-              resolve-on-load
-              searchable
-              :options="globalStore.countries"
-              :placeholder="$t('general.select_country')"
-              class="w-full"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('customers.state')" class="md:col-span-3">
-            <BaseInput
-              v-model="userStore.userForm.shipping.state"
-              name="shipping.state"
-              type="text"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup :label="$t('customers.city')" class="md:col-span-3">
-            <BaseInput
-              v-model="userStore.userForm.shipping.city"
-              name="shipping.city"
-              type="text"
-            />
-          </BaseInputGroup>
-
-          <BaseInputGroup
-            :label="$t('customers.address')"
-            class="md:col-span-3"
-          >
-            <BaseTextarea
-              v-model.trim="userStore.userForm.shipping.address_street_1"
-              type="text"
-              :placeholder="$t('general.street_1')"
-              name="shipping_street1"
-            />
-
-            <BaseTextarea
-              v-model.trim="userStore.userForm.shipping.address_street_2"
-              type="text"
-              :placeholder="$t('general.street_2')"
-              name="shipping_street2"
-              class="mt-3"
-            />
-          </BaseInputGroup>
-
-          <div class="md:col-span-3">
-            <BaseInputGroup :label="$t('customers.phone')" class="text-left">
-              <BaseInput
-                v-model.trim="userStore.userForm.shipping.phone"
-                type="text"
-                name="phone"
-              />
-            </BaseInputGroup>
-
-            <BaseInputGroup
-              :label="$t('customers.zip_code')"
-              class="mt-2 text-left"
-            >
-              <BaseInput
-                v-model.trim="userStore.userForm.shipping.zip"
-                type="text"
-                name="zip"
-              />
-            </BaseInputGroup>
-          </div>
-        </div>
-      </div>
-      <div class="flex items-center justify-end">
-        <BaseButton :loading="isSaving" :disabled="isSaving">
-          <template #left="slotProps">
-            <BaseIcon
-              v-if="!isSaving"
-              name="ArrowDownOnSquareIcon"
-              :class="slotProps.class"
-            />
-          </template>
-          {{ $t('general.save') }}
-        </BaseButton>
-      </div>
-    </BaseCard>
-  </form>
-</template>
-
-<script setup>
-import { useUserStore } from '@/scripts/customer/stores/user'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import { useI18n } from 'vue-i18n'
-import { useRoute } from 'vue-router'
-import { ref } from 'vue'
-
-//store
-
-const userStore = useUserStore()
-const route = useRoute()
-const { tm, t } = useI18n()
-const globalStore = useGlobalStore()
-
-// local state
-let isSaving = ref(false)
-
-// created
-
-globalStore.fetchCountries()
-
-// methods
-
-function UpdateCustomerAddress() {
-  isSaving.value = true
-  let data = userStore.userForm
-  userStore
-    .updateCurrentUser({
-      data,
-      message: tm('customers.address_updated_message'),
-    })
-    .then((res) => {
-      isSaving.value = false
-    })
-    .catch((err) => {
-      isSaving.value = false
-    })
-}
-</script>
diff --git a/resources/scripts/customer/views/settings/CustomerSettings.vue b/resources/scripts/customer/views/settings/CustomerSettings.vue
deleted file mode 100644
index 754f16b2..00000000
--- a/resources/scripts/customer/views/settings/CustomerSettings.vue
+++ /dev/null
@@ -1,245 +0,0 @@
-<template>
-  <form class="relative h-full mt-4" @submit.prevent="updateCustomerData">
-    <BaseCard>
-      <div>
-        <h6 class="font-bold text-left">
-          {{ $t('settings.account_settings.account_settings') }}
-        </h6>
-        <p
-          class="mt-2 text-sm leading-snug text-left text-muted"
-          style="max-width: 680px"
-        >
-          {{ $t('settings.account_settings.section_description') }}
-        </p>
-      </div>
-
-      <div class="grid gap-6 sm:grid-col-1 md:grid-cols-2 mt-6">
-        <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$.userForm.name.$error && v$.userForm.name.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model="userStore.userForm.name"
-            :invalid="v$.userForm.name.$error"
-            @input="v$.userForm.name.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.account_settings.email')"
-          :error="
-            v$.userForm.email.$error && v$.userForm.email.$errors[0].$message
-          "
-          required
-        >
-          <BaseInput
-            v-model="userStore.userForm.email"
-            :invalid="v$.userForm.email.$error"
-            @input="v$.userForm.email.$touch()"
-          />
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :error="
-            v$.userForm.password.$error &&
-            v$.userForm.password.$errors[0].$message
-          "
-          :label="$t('settings.account_settings.password')"
-        >
-          <BaseInput
-            v-model="userStore.userForm.password"
-            :type="isShowPassword ? 'text' : 'password'"
-            :invalid="v$.userForm.password.$error"
-            @input="v$.userForm.password.$touch()"
-          >
-            <template #right>
-              <BaseIcon
-                :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                class="mr-1 text-muted cursor-pointer"
-                @click="isShowPassword = !isShowPassword"
-              />
-            </template>
-          </BaseInput>
-        </BaseInputGroup>
-
-        <BaseInputGroup
-          :label="$t('settings.account_settings.confirm_password')"
-          :error="
-            v$.userForm.confirm_password.$error &&
-            v$.userForm.confirm_password.$errors[0].$message
-          "
-        >
-          <BaseInput
-            v-model="userStore.userForm.confirm_password"
-            :type="isShowConfirmPassword ? 'text' : 'password'"
-            :invalid="v$.userForm.confirm_password.$error"
-            @input="v$.userForm.confirm_password.$touch()"
-          >
-            <template #right>
-              <BaseIcon
-                :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                class="mr-1 text-muted cursor-pointer"
-                @click="isShowConfirmPassword = !isShowConfirmPassword"
-              />
-            </template>
-          </BaseInput>
-        </BaseInputGroup>
-      </div>
-
-      <BaseButton :loading="isSaving" :disabled="isSaving" class="mt-6">
-        <template #left="slotProps">
-          <BaseIcon v-if="!isSaving" name="ArrowDownOnSquareIcon" :class="slotProps.class" />
-        </template>
-        {{ $t('general.save') }}
-      </BaseButton>
-    </BaseCard>
-  </form>
-</template>
-
-<script setup>
-import { ArrowDownOnSquareIcon } from '@heroicons/vue/24/solid'
-import { ref, computed } from 'vue'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import { useUserStore } from '@/scripts/customer/stores/user'
-import { useI18n } from 'vue-i18n'
-import {
-  helpers,
-  sameAs,
-  email,
-  required,
-  minLength,
-} from '@vuelidate/validators'
-import { useVuelidate } from '@vuelidate/core'
-import { useRoute } from 'vue-router'
-
-const userStore = useUserStore()
-const globalStore = useGlobalStore()
-const route = useRoute()
-const { t, tm } = useI18n()
-
-// Local State
-let imgFiles = ref([])
-let isSaving = ref(false)
-let avatarFileBlob = ref(null)
-let isShowPassword = ref(false)
-let isShowConfirmPassword = ref(false)
-const isCustomerAvatarRemoved = ref(false)
-
-if (userStore.userForm.avatar) {
-  imgFiles.value.push({
-    image: userStore.userForm.avatar,
-  })
-}
-
-// Validation
-const rules = computed(() => {
-  return {
-    userForm: {
-      name: {
-        required: helpers.withMessage(t('validation.required'), required),
-        minLength: helpers.withMessage(
-          t('validation.name_min_length', { count: 3 }),
-          minLength(3)
-        ),
-      },
-      email: {
-        required: helpers.withMessage(t('validation.required'), required),
-        email: helpers.withMessage(t('validation.email_incorrect'), email),
-      },
-      password: {
-        minLength: helpers.withMessage(
-          t('validation.password_min_length', { count: 8 }),
-          minLength(8)
-        ),
-      },
-      confirm_password: {
-        sameAsPassword: helpers.withMessage(
-          t('validation.password_incorrect'),
-          sameAs(userStore.userForm.password)
-        ),
-      },
-    },
-  }
-})
-
-const v$ = useVuelidate(
-  rules,
-  computed(() => userStore)
-)
-
-// created
-
-// methods
-
-function onFileInputChange(fileName, file) {
-  avatarFileBlob.value = file
-}
-
-function onFileInputRemove() {
-  avatarFileBlob.value = null
-  isCustomerAvatarRemoved.value = true
-}
-
-function updateCustomerData() {
-  v$.value.userForm.$touch()
-
-  if (v$.value.userForm.$invalid) {
-    return true
-  }
-  isSaving.value = true
-
-  let data = new FormData()
-  data.append('name', userStore.userForm.name)
-  data.append('email', userStore.userForm.email)
-
-  if (
-    userStore.userForm.password != null &&
-    userStore.userForm.password !== undefined &&
-    userStore.userForm.password !== ''
-  ) {
-    data.append('password', userStore.userForm.password)
-  }
-  if (avatarFileBlob.value) {
-    data.append('customer_avatar', avatarFileBlob.value)
-  }
-  data.append('is_customer_avatar_removed', isCustomerAvatarRemoved.value)
-
-  userStore
-    .updateCurrentUser({
-      data,
-      message: tm('settings.account_settings.updated_message'),
-    })
-    .then((res) => {
-      if (res.data.data) {
-        isSaving.value = false
-        userStore.$patch((state) => {
-          state.userForm.password = ''
-          state.userForm.confirm_password = ''
-        })
-        avatarFileBlob.value = null
-        isCustomerAvatarRemoved.value = false
-      }
-    })
-    .catch((error) => {
-      isSaving.value = false
-    })
-}
-</script>
diff --git a/resources/scripts/customer/views/settings/SettingsIndex.vue b/resources/scripts/customer/views/settings/SettingsIndex.vue
deleted file mode 100644
index be504c3e..00000000
--- a/resources/scripts/customer/views/settings/SettingsIndex.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <BasePage>
-    <BasePageHeader :title="$t('settings.setting', 2)" class="pb-6">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem
-          :title="$t('general.home')"
-          :to="`/${companySlug}/customer/dashboard`"
-        />
-        <BaseBreadcrumbItem
-          :title="$t('settings.setting', 2)"
-          :to="`/${companySlug}/customer/settings/customer-profile`"
-          active
-        />
-      </BaseBreadcrumb>
-    </BasePageHeader>
-
-    <div class="w-full mb-6 select-wrapper xl:hidden">
-      <aside class="pb-3 lg:col-span-3">
-        <nav class="space-y-1">
-          <BaseList>
-            <BaseListItem
-              v-for="(menuItem, index) in menuItems"
-              :key="index"
-              :title="menuItem.title"
-              :to="menuItem.link"
-              :active="hasActiveUrl(menuItem.link)"
-              :index="index"
-              class="py-3"
-            >
-              <template #icon>
-                <component :is="menuItem.icon" class="h-5 w-6" />
-              </template>
-            </BaseListItem>
-          </BaseList>
-        </nav>
-      </aside>
-    </div>
-
-    <div class="flex">
-      <div class="hidden mt-1 xl:block min-w-[240px]">
-        <BaseList>
-          <BaseListItem
-            v-for="(menuItem, index) in menuItems"
-            :key="index"
-            :title="menuItem.title"
-            :to="menuItem.link"
-            :active="hasActiveUrl(menuItem.link)"
-            :index="index"
-            class="py-3"
-          >
-            <template #icon>
-              <component :is="menuItem.icon" class="h-5 w-6" />
-            </template>
-          </BaseListItem>
-        </BaseList>
-      </div>
-      <div class="w-full overflow-hidden">
-        <RouterView />
-      </div>
-    </div>
-  </BasePage>
-</template>
-
-<script setup>
-import { ref, reactive, watchEffect, computed } from 'vue'
-import BaseList from '@/scripts/components/list/BaseList.vue'
-import BaseListItem from '@/scripts/components/list/BaseListItem.vue'
-import { BuildingOfficeIcon, UserIcon } from '@heroicons/vue/24/outline'
-import { useGlobalStore } from '@/scripts/customer/stores/global'
-import { useI18n } from 'vue-i18n'
-const { t } = useI18n()
-
-//route
-const { useRoute, useRouter } = window.VueRouter
-
-const route = useRoute()
-const router = useRouter()
-const globalStore = useGlobalStore()
-
-const companySlug = computed(() => {
-  return globalStore.companySlug
-})
-
-// local state
-const { global } = window.i18n
-let currentSetting = ref({})
-let activeIndex = ref()
-const menuItems = reactive([
-  {
-    link: `/${globalStore.companySlug}/customer/settings/customer-profile`,
-    title: t('settings.account_settings.account_settings'),
-    icon: UserIcon,
-  },
-  {
-    link: `/${globalStore.companySlug}/customer/settings/address-info`,
-    title: t('settings.menu_title.address_information'),
-    icon: BuildingOfficeIcon,
-  },
-])
-
-// watch
-
-watchEffect(() => {
-  if (route.path === `/${globalStore.companySlug}/customer/settings`) {
-    router.push({ name: 'customer.profile' })
-  }
-
-  const menu = menuItems.find((item) => {
-    return item.link === route.path
-  })
-
-  currentSetting.value = { ...menu }
-})
-
-// computed props
-
-const dropdownMenuItems = computed(() => {
-  return menuItems
-})
-
-// methods
-
-function hasActiveUrl(url) {
-  return route.path.indexOf(url) > -1
-}
-
-function navigateToSetting(setting) {
-  return router.push(setting.link)
-}
-</script>
diff --git a/resources/scripts/global-components.js b/resources/scripts/global-components.js
deleted file mode 100644
index 9808358b..00000000
--- a/resources/scripts/global-components.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { defineAsyncComponent } from 'vue'
-
-export const defineGlobalComponents = (app) => {
-  const components = import.meta.glob('./components/base/*.vue', { eager: true })
-
-  Object.entries(components).forEach(([path, definition]) => {
-    // Get name of component, based on filename
-    // "./components/Fruits.vue" will become "Fruits"
-    const componentName = path
-      .split('/')
-      .pop()
-      .replace(/\.\w+$/, '')
-
-    // Register component on this Vue instance
-    app.component(componentName, definition.default)
-  })
-
-  const BaseTable = defineAsyncComponent(() =>
-    import('./components/base/base-table/BaseTable.vue')
-  )
-
-  const BaseMultiselect = defineAsyncComponent(() =>
-    import('./components/base-select/BaseMultiselect.vue')
-  )
-
-  const BaseEditor = defineAsyncComponent(() =>
-    import('./components/base/base-editor/BaseEditor.vue')
-  )
-
-  app.component('BaseTable', BaseTable)
-  app.component('BaseMultiselect', BaseMultiselect)
-  app.component('BaseEditor', BaseEditor)
-}
diff --git a/resources/scripts/helpers/error-handling.js b/resources/scripts/helpers/error-handling.js
deleted file mode 100644
index b7e01bcc..00000000
--- a/resources/scripts/helpers/error-handling.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import { useAuthStore } from '@/scripts/admin/stores/auth'
-import { useNotificationStore } from '@/scripts/stores/notification'
-
-export const handleError = (err) => {
-  const authStore = useAuthStore()
-  const notificationStore = useNotificationStore()
-
-  if (!err.response) {
-    notificationStore.showNotification({
-      type: 'error',
-      message:
-        'Please check your internet connection or wait until servers are back online.',
-    })
-  } else {
-    if (
-      err.response.data &&
-      (err.response.statusText === 'Unauthorized' ||
-        err.response.data === ' Unauthorized.')
-    ) {
-      // Unauthorized and log out
-      const msg = err.response.data.message
-        ? err.response.data.message
-        : 'Unauthorized'
-
-      showToaster(msg)
-
-      authStore.logout()
-    } else if (err.response.data.errors) {
-      // Show a notification per error
-      const errors = JSON.parse(JSON.stringify(err.response.data.errors))
-      for (const i in errors) {
-        showError(errors[i][0])
-      }
-    } else if (err.response.data.error) {
-      if (typeof err.response.data.error == 'boolean') showError(err.response.data?.message)
-      else showError(err.response.data.error)
-    } else {
-      showError(err.response.data.message)
-    }
-  }
-}
-
-export const showError = (error) => {
-  switch (error) {
-    case 'These credentials do not match our records.':
-      showToaster('errors.login_invalid_credentials')
-      break
-    case 'invalid_key':
-      showToaster('errors.invalid_provider_key')
-      break
-
-    case 'This feature is available on Starter plan and onwards!':
-      showToaster('errors.starter_plan')
-      break
-
-    case 'taxes_attached':
-      showToaster('settings.tax_types.already_in_use')
-      break
-
-    case 'expense_attached':
-      showToaster('settings.expense_category.already_in_use')
-      break
-
-    case 'payments_attached':
-      showToaster('settings.payment_modes.payments_attached')
-      break
-    
-    case 'expenses_attached':
-      showToaster('settings.payment_modes.expenses_attached')
-      break
-
-    case 'role_attached_to_users':
-      showToaster('settings.roles.already_in_use')
-      break
-
-    case 'items_attached':
-      showToaster('settings.customization.items.already_in_use')
-      break
-
-    case 'payment_attached_message':
-      showToaster('invoices.payment_attached_message')
-      break
-
-    case 'The email has already been taken.':
-      showToaster('validation.email_already_taken')
-      break
-
-    case 'Relation estimateItems exists.':
-      showToaster('items.item_attached_message')
-      break
-
-    case 'Relation invoiceItems exists.':
-      showToaster('items.item_attached_message')
-      break
-
-    case 'Relation taxes exists.':
-      showToaster('settings.tax_types.already_in_use')
-      break
-
-    case 'Relation taxes exists.':
-      showToaster('settings.tax_types.already_in_use')
-      break
-
-    case 'Relation payments exists.':
-      showToaster('errors.payment_attached')
-      break
-
-    case 'The estimate number has already been taken.':
-      showToaster('errors.estimate_number_used')
-      break
-
-    case 'The payment number has already been taken.':
-      showToaster('errors.estimate_number_used')
-      break
-
-    case 'The invoice number has already been taken.':
-      showToaster('errors.invoice_number_used')
-      break
-
-    case 'The name has already been taken.':
-      showToaster('errors.name_already_taken')
-      break
-
-    case 'total_invoice_amount_must_be_more_than_paid_amount':
-      showToaster('invoices.invalid_due_amount_message')
-      break
-
-    case 'you_cannot_edit_currency':
-      showToaster('customers.edit_currency_not_allowed')
-      break
-
-    case 'receipt_does_not_exist':
-      showToaster('errors.receipt_does_not_exist')
-      break
-
-    case 'customer_cannot_be_changed_after_payment_is_added':
-      showToaster('errors.customer_cannot_be_changed_after_payment_is_added')
-      break
-
-    case 'invalid_credentials':
-      showToaster('errors.invalid_credentials')
-      break
-
-    case 'not_allowed':
-      showToaster('errors.not_allowed')
-      break
-
-    case 'invalid_key':
-      showToaster('errors.invalid_key')
-      break
-
-    case 'invalid_state':
-      showToaster('errors.invalid_state')
-      break
-
-    case 'invalid_city':
-      showToaster('errors.invalid_city')
-      break
-
-    case 'invalid_postal_code':
-      showToaster('errors.invalid_postal_code')
-      break
-
-    case 'invalid_format':
-      showToaster('errors.invalid_format')
-      break
-
-    case 'api_error':
-      showToaster('errors.api_error')
-      break
-
-    case 'feature_not_enabled':
-      showToaster('errors.feature_not_enabled')
-      break
-
-    case 'request_limit_met':
-      showToaster('errors.request_limit_met')
-      break
-
-    case 'address_incomplete':
-      showToaster('errors.address_incomplete')
-      break
-
-    case 'invalid_address':
-      showToaster('errors.invalid_address')
-      break
-
-    case 'Email could not be sent to this email address.':
-      showToaster('errors.email_could_not_be_sent')
-      break
-
-    default:
-      showToaster(error, false)
-      break
-  }
-}
-
-export const showToaster = (msg, t = true) => {
-  const { global } = window.i18n
-  const notificationStore = useNotificationStore()
-
-  notificationStore.showNotification({
-    type: 'error',
-    message: t ? global.t(msg) : msg,
-  })
-}
diff --git a/resources/scripts/helpers/language-loader.js b/resources/scripts/helpers/language-loader.js
deleted file mode 100644
index 776e52d9..00000000
--- a/resources/scripts/helpers/language-loader.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Dynamic language loader utility
- * Loads language files on demand to reduce bundle size
- */
-
-const loadedLanguages = new Set()
-const languageCache = new Map()
-
-/**
- * Dynamically import a language file
- * @param {string} locale - Language code (e.g., 'en', 'fr', 'pt_BR')
- * @returns {Promise<Object>} - Language messages object
- */
-export async function loadLanguage(locale) {
-  // Return cached language if already loaded
-  if (languageCache.has(locale)) {
-    return languageCache.get(locale)
-  }
-
-  try {
-    // Dynamic import of language file
-    const fileMap = {
-      'zh_CN': 'zh-cn',
-      'pt_BR': 'pt-br',
-    }
-    const fileName = fileMap[locale] || locale;
-    const languageModule = await import(`../../../lang/${fileName}.json`)
-    const messages = languageModule.default || languageModule
-
-    // Cache the loaded language
-    languageCache.set(locale, messages)
-    loadedLanguages.add(locale)
-
-    return messages
-  } catch (error) {
-    console.warn(`Failed to load language: ${locale}`, error)
-
-    // Fallback to English if available
-    if (locale !== 'en' && !languageCache.has('en')) {
-      try {
-        const fallbackModule = await import('../../../lang/en.json')
-        const fallbackMessages = fallbackModule.default || fallbackModule
-        languageCache.set('en', fallbackMessages)
-        return fallbackMessages
-      } catch (fallbackError) {
-        console.error('Failed to load fallback language (en)', fallbackError)
-        return {}
-      }
-    }
-
-    return languageCache.get('en') || {}
-  }
-}
-
-/**
- * Load and set language in i18n instance
- * @param {Object} i18n - Vue i18n instance
- * @param {string} locale - Language code to load
- * @returns {Promise<void>}
- */
-export async function setI18nLanguage(i18n, locale) {
-  // Load the language if not already loaded
-  if (!loadedLanguages.has(locale)) {
-    const messages = await loadLanguage(locale)
-    i18n.global.setLocaleMessage(locale, messages)
-  }
-
-  // Set the locale
-  i18n.global.locale.value = locale
-}
-
-/**
- * Check if a language is already loaded
- * @param {string} locale - Language code
- * @returns {boolean}
- */
-export function isLanguageLoaded(locale) {
-  return loadedLanguages.has(locale)
-}
diff --git a/resources/scripts/helpers/use-popper.js b/resources/scripts/helpers/use-popper.js
deleted file mode 100644
index 1196190f..00000000
--- a/resources/scripts/helpers/use-popper.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ref, onMounted, watchEffect } from 'vue'
-import { createPopper } from '@popperjs/core'
-
-export function usePopper(options) {
-  let activator = ref(null)
-  let container = ref(null)
-  let popper = ref(null)
-
-  onMounted(() => {
-    watchEffect(onInvalidate => {
-      if (!container.value) return
-      if (!activator.value) return
-
-      let containerEl = container.value.el || container.value
-      let activatorEl = activator.value.el || activator.value
-
-      if (!(activatorEl instanceof HTMLElement)) return
-      if (!(containerEl instanceof HTMLElement)) return
-
-      popper.value = createPopper(activatorEl, containerEl, options)
-
-      onInvalidate(popper.value.destroy)
-    })
-  })
-
-  return [activator, container, popper]
-}
diff --git a/resources/scripts/helpers/utilities.js b/resources/scripts/helpers/utilities.js
deleted file mode 100644
index fe273915..00000000
--- a/resources/scripts/helpers/utilities.js
+++ /dev/null
@@ -1,281 +0,0 @@
-import i18n from '../plugins/i18n'
-const { global } = i18n
-import { useNotificationStore } from '@/scripts/stores/notification'
-import { isArray } from 'lodash'
-
-export default {
-  isImageFile(fileType) {
-    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png']
-
-    return validImageTypes.includes(fileType)
-  },
-  addClass(el, className) {
-    if (el.classList) el.classList.add(className)
-    else el.className += ' ' + className
-  },
-  hasClass(el, className) {
-    const hasClass = el.classList
-      ? el.classList.contains(className)
-      : new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className)
-
-    return hasClass
-  },
-
-  formatMoney(amount, currency = 0) {
-    if (!currency) {
-      currency = {
-        precision: 2,
-        thousand_separator: ',',
-        decimal_separator: '.',
-        symbol: '$',
-      }
-    }
-
-    amount = amount / 100
-
-    let {
-      precision,
-      decimal_separator,
-      thousand_separator,
-      symbol,
-      swap_currency_symbol,
-    } = currency
-
-    try {
-      precision = Math.abs(precision)
-      precision = isNaN(precision) ? 2 : precision
-
-      const negativeSign = amount < 0 ? '-' : ''
-
-      let i = parseInt(
-        (amount = Math.abs(Number(amount) || 0).toFixed(precision))
-      ).toString()
-      let j = i.length > 3 ? i.length % 3 : 0
-
-      let moneySymbol = `${symbol}`
-      let thousandText = j ? i.substr(0, j) + thousand_separator : ''
-      let amountText = i
-        .substr(j)
-        .replace(/(\d{3})(?=\d)/g, '$1' + thousand_separator)
-      let precisionText = precision
-        ? decimal_separator +
-        Math.abs(amount - i)
-          .toFixed(precision)
-          .slice(2)
-        : ''
-      let combinedAmountText =
-        negativeSign + thousandText + amountText + precisionText
-
-      return swap_currency_symbol
-        ? combinedAmountText + ' ' + moneySymbol
-        : moneySymbol + ' ' + combinedAmountText
-    } catch (e) {
-      console.error(e)
-    }
-  },
-
-  // Merge two objects but only existing properties
-  mergeSettings(target, source) {
-    Object.keys(source).forEach(function (key) {
-      if (key in target) {
-        // or target.hasOwnProperty(key)
-        target[key] = source[key]
-      }
-    })
-  },
-
-  checkValidUrl(url) {
-    if (
-      url.includes('http://localhost') ||
-      url.includes('http://127.0.0.1') ||
-      url.includes('https://localhost') ||
-      url.includes('https://127.0.0.1')
-    ) {
-      return true
-    }
-    let pattern = new RegExp(
-      '^(https?:\\/\\/)?' + // protocol
-      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
-      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
-      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
-      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-      '(\\#[-a-z\\d_]*)?$',
-      'i'
-    ) // fragment locator
-
-    return !!pattern.test(url)
-  },
-
-  checkValidDomainUrl(url) {
-    if (url.includes('localhost') || url.includes('127.0.0.1')) {
-      return true
-    }
-
-    let pattern = new RegExp(
-      '^(https?:\\/\\/)?' + // protocol
-      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
-      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
-      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
-      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
-      '(\\#[-a-z\\d_]*)?$',
-      'i'
-    ) // fragment locator
-
-    return !!pattern.test(url)
-  },
-
-  fallbackCopyTextToClipboard(text) {
-    var textArea = document.createElement('textarea')
-    textArea.value = text
-    // Avoid scrolling to bottom
-    textArea.style.top = '0'
-    textArea.style.left = '0'
-    textArea.style.position = 'fixed'
-    document.body.appendChild(textArea)
-    textArea.focus()
-    textArea.select()
-    try {
-      var successful = document.execCommand('copy')
-      var msg = successful ? 'successful' : 'unsuccessful'
-      console.log('Fallback: Copying text command was ' + msg)
-    } catch (err) {
-      console.error('Fallback: Oops, unable to copy', err)
-    }
-    document.body.removeChild(textArea)
-  },
-  copyTextToClipboard(text) {
-    if (!navigator.clipboard) {
-      this.fallbackCopyTextToClipboard(text)
-      return
-    }
-    navigator.clipboard.writeText(text).then(
-      function () {
-        return true
-      },
-      function (err) {
-        return false
-      }
-    )
-  },
-  arrayDifference(array1, array2) {
-    return array1?.filter((i) => {
-      return array2?.indexOf(i) < 0
-    })
-  },
-  getBadgeStatusColor(status) {
-    switch (status) {
-      case 'DRAFT':
-        return {
-          bgColor: '#F8EDCB',
-          color: '#744210',
-        }
-      case 'PAID':
-        return {
-          bgColor: '#D5EED0',
-          color: '#276749',
-        }
-      case 'UNPAID':
-        return {
-          bgColor: '#F8EDC',
-          color: '#744210',
-        }
-      case 'SENT':
-        return {
-          bgColor: 'rgba(246, 208, 154, 0.4)',
-          color: '#975a16',
-        }
-      case 'REJECTED':
-        return {
-          bgColor: '#E1E0EA',
-          color: '#1A1841',
-        }
-      case 'ACCEPTED':
-        return {
-          bgColor: '#D5EED0',
-          color: '#276749',
-        }
-      case 'VIEWED':
-        return {
-          bgColor: '#C9E3EC',
-          color: '#2c5282',
-        }
-      case 'EXPIRED':
-        return {
-          bgColor: '#FED7D7',
-          color: '#c53030',
-        }
-      case 'PARTIALLY PAID':
-        return {
-          bgColor: '#C9E3EC',
-          color: '#2c5282',
-        }
-      case 'COMPLETED':
-        return {
-          bgColor: '#D5EED0',
-          color: '#276749',
-        }
-      case 'DUE':
-        return {
-          bgColor: '#F8EDCB',
-          color: '#744210',
-        }
-      case 'YES':
-        return {
-          bgColor: '#D5EED0',
-          color: '#276749',
-        }
-      case 'NO':
-        return {
-          bgColor: '#FED7D7',
-          color: '#c53030',
-        }
-    }
-  },
-  getStatusTranslation(status) {
-    switch (status) {
-      case 'DRAFT':
-        return global.t('general.draft')
-      case 'PAID':
-        return global.t('invoices.paid')
-      case 'UNPAID':
-        return global.t('invoices.unpaid')
-      case 'SENT':
-        return global.t('general.sent')
-      case 'REJECTED':
-        return global.t('estimates.rejected')
-      case 'ACCEPTED':
-        return global.t('estimates.accepted')
-      case 'VIEWED':
-        return global.t('invoices.viewed')
-      case 'EXPIRED':
-        return global.t('estimates.expired')
-      case 'PARTIALLY PAID':
-        return global.t('estimates.partially_paid')
-      case 'COMPLETED':
-        return global.t('invoices.completed')
-      case 'DUE':
-        return global.t('general.due')
-      default:
-        return status
-    }
-  },
-  toFormData(object) {
-    const formData = new FormData()
-
-    Object.keys(object).forEach((key) => {
-      if (isArray(object[key])) {
-        formData.append(key, JSON.stringify(object[key]))
-      } else {
-        // Convert null to empty strings (because formData does not support null values and converts it to string)
-        if (object[key] === null) {
-          object[key] = ''
-        }
-
-        formData.append(key, object[key])
-      }
-    })
-
-    return formData
-  },
-
-}
diff --git a/resources/scripts/http/index.js b/resources/scripts/http/index.js
deleted file mode 100644
index 0a4051b0..00000000
--- a/resources/scripts/http/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import axios from 'axios'
-import Ls from '@/scripts/services/ls.js'
-
-window.Ls = Ls
-
-const instance = axios.create({
-  withCredentials: true,
-  headers: {
-    common: {
-      'X-Requested-With': 'XMLHttpRequest',
-    },
-  },
-})
-
-instance.interceptors.request.use(function (config) {
-  const companyId = Ls.get('selectedCompany')
-  const authToken = Ls.get('auth.token')
-
-  if (authToken) {
-    config.headers.Authorization = authToken
-  }
-
-  if (companyId && Ls.get('isAdminMode') !== 'true') {
-    config.headers.company = companyId
-  }
-
-  return config
-})
-
-function http(config) {
-  return instance(config)
-}
-
-http.get = instance.get.bind(instance)
-http.post = instance.post.bind(instance)
-http.put = instance.put.bind(instance)
-http.delete = instance.delete.bind(instance)
-http.patch = instance.patch.bind(instance)
-
-export default http
diff --git a/resources/scripts/main.js b/resources/scripts/main.js
deleted file mode 100644
index a6f9d8fc..00000000
--- a/resources/scripts/main.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import '../css/invoiceshelf.css'
-import 'v-tooltip/dist/v-tooltip.css'
-import '@/scripts/http'
-import * as VueRouter from 'vue-router'
-import router from '@/scripts/router/index'
-import * as pinia from 'pinia'
-import * as Vue from 'vue'
-import * as Vuelidate from '@vuelidate/core'
-
-window.pinia = pinia
-window.Vuelidate = Vuelidate
-import InvoiceShelf from './InvoiceShelf.js'
-
-window.Vue = Vue
-window.router = router
-window.VueRouter = VueRouter
-
-window.InvoiceShelf = new InvoiceShelf()
\ No newline at end of file
diff --git a/resources/scripts/plugins/i18n.js b/resources/scripts/plugins/i18n.js
deleted file mode 100644
index 1cb43284..00000000
--- a/resources/scripts/plugins/i18n.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createI18n } from 'vue-i18n'
-
-export default (messages) => {
-  return createI18n({
-    locale: 'en',
-    fallbackLocale: 'en',
-    messages
-  })
-}
diff --git a/resources/scripts/router/index.js b/resources/scripts/router/index.js
deleted file mode 100644
index 43181ab0..00000000
--- a/resources/scripts/router/index.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import { useUserStore } from '@/scripts/admin/stores/user'
-import { useGlobalStore } from '@/scripts/admin/stores/global'
-import { useCompanyStore } from '@/scripts/admin/stores/company'
-
-//admin routes
-import AdminRoutes from '@/scripts/admin/admin-router'
-//  Customers routes
-import CustomerRoutes from '@/scripts/customer/customer-router'
-//Payment Routes
-
-let routes = []
-routes = routes.concat(AdminRoutes, CustomerRoutes)
-
-const router = createRouter({
-  history: createWebHistory(),
-  linkActiveClass: 'active',
-  routes,
-})
-
-router.beforeEach((to) => {
-  const userStore = useUserStore()
-  const globalStore = useGlobalStore()
-  const companyStore = useCompanyStore()
-  let ability = to.meta.ability
-  const { isAppLoaded } = globalStore
-
-  if (isAppLoaded && to.meta.requiresAuth && to.name !== 'no.company') {
-    if (!companyStore.selectedCompany && !companyStore.isAdminMode && !(to.meta.isSuperAdmin && userStore.currentUser?.is_super_admin)) {
-      return { name: 'no.company' }
-    }
-  }
-
-  if (ability && isAppLoaded && to.meta.requiresAuth) {
-    if (!userStore.hasAbilities(ability)) {
-      return { name: 'account.settings' }
-    }
-  } else if (to.meta.isSuperAdmin && isAppLoaded) {
-    if (!userStore.currentUser.is_super_admin) {
-      return { name: 'dashboard' }
-    }
-  } else if (to.meta.isOwner && isAppLoaded) {
-    if (!userStore.currentUser.is_owner) {
-      return { name: 'dashboard' }
-    }
-  }
-})
-
-export default router
diff --git a/resources/scripts/services/ls.js b/resources/scripts/services/ls.js
deleted file mode 100644
index caf1ed1c..00000000
--- a/resources/scripts/services/ls.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  get(key) {
-    return localStorage.getItem(key) ? localStorage.getItem(key) : null
-  },
-
-  set(key, val) {
-    localStorage.setItem(key, val)
-  },
-
-  remove(key) {
-    localStorage.removeItem(key)
-  },
-}
diff --git a/resources/scripts/shims-vue.d.ts b/resources/scripts/shims-vue.d.ts
deleted file mode 100644
index 1500dfd7..00000000
--- a/resources/scripts/shims-vue.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// This is required for Visual Studio Code to recognize
-// imported .vue files
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
diff --git a/resources/scripts/stores/dialog.js b/resources/scripts/stores/dialog.js
deleted file mode 100644
index bc25cd42..00000000
--- a/resources/scripts/stores/dialog.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useDialogStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('dialog', {
-    state: () => ({
-      active: false,
-      title: '',
-      message: '',
-      size: 'md',
-      data: null,
-      variant: 'danger', // primary || danger
-      yesLabel: global.t('settings.custom_fields.yes'),
-      noLabel: global.t('settings.custom_fields.no'),
-      resolve: null,
-      hideNoButton: false,
-    }),
-    actions: {
-      openDialog(data) {
-        this.active = true
-        this.title = data.title
-        this.message = data.message
-        this.size = data.size
-        this.data = data.data
-        this.variant = data.variant
-        this.yesLabel = data.yesLabel
-        this.noLabel = data.noLabel
-        this.hideNoButton = data.hideNoButton
-
-        return new Promise((resolve, reject) => {
-          this.resolve = resolve
-        })
-      },
-      closeDialog() {
-        this.active = false
-
-        setTimeout(() => {
-          this.title = ''
-          this.message = ''
-          this.data = null
-        }, 300)
-      },
-    },
-  })()
-}
diff --git a/resources/scripts/stores/modal.js b/resources/scripts/stores/modal.js
deleted file mode 100644
index f0d1d8ba..00000000
--- a/resources/scripts/stores/modal.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useModalStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-  const { global } = window.i18n
-
-  return defineStoreFunc('modal', {
-    state: () => ({
-      active: false,
-      content: '',
-      title: '',
-      componentName: '',
-      id: '',
-      size: 'md',
-      data: null,
-      refreshData: null,
-      variant: '',
-    }),
-
-    getters: {
-      isEdit() {
-        return (this.id ? true : false)
-      }
-    },
-
-    actions: {
-      openModal(payload) {
-        this.componentName = payload.componentName
-        this.active = true
-
-        if (payload.id) {
-          this.id = payload.id
-        }
-
-        this.title = payload.title
-        if (payload.content) {
-          this.content = payload.content
-        }
-
-        if (payload.data) {
-          this.data = payload.data
-        }
-
-        if (payload.refreshData) {
-          this.refreshData = payload.refreshData
-        }
-
-        if (payload.variant) {
-          this.variant = payload.variant
-        }
-
-        if (payload.size) {
-          this.size = payload.size
-        }
-      },
-
-      resetModalData() {
-        this.content = ''
-        this.title = ''
-        this.componentName = ''
-        this.id = ''
-        this.data = null
-        this.refreshData = null
-      },
-
-      closeModal() {
-        this.active = false
-
-        setTimeout(() => {
-          this.resetModalData()
-        }, 300)
-      }
-    }
-  })()
-}
diff --git a/resources/scripts/stores/notification.js b/resources/scripts/stores/notification.js
deleted file mode 100644
index e69ad39e..00000000
--- a/resources/scripts/stores/notification.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useNotificationStore = (useWindow = false) => {
-  const defineStoreFunc = useWindow ? window.pinia.defineStore : defineStore
-
-  return defineStoreFunc('notification', {
-    state: () => ({
-      active: false,
-      autoHide: true,
-      notifications: [],
-    }),
-
-    actions: {
-      showNotification(notification) {
-        this.notifications.push({
-          ...notification,
-          id: (Math.random().toString(36) + Date.now().toString(36)).substr(2),
-        })
-      },
-
-      hideNotification(data) {
-        this.notifications = this.notifications.filter((notification) => {
-          return notification.id != data.id
-        })
-      }
-    }
-  })()
-}