Finalize Typescript restructure

app/Http/Controllers/Admin/BackupsController.php

@@ -68,7 +68,6 @@ class BackupsController extends Controller
         $this->authorize('manage backups');
 
         $data = $request->all();
-        $data['company'] = $request->header('company');
 
         dispatch(new CreateBackupJob($data))->onQueue(config('backup.queue.name'));
 

app/Models/User.php

@@ -257,6 +257,12 @@ class User extends Authenticatable implements HasMedia
             $query->wherePhone($filters->get('phone'));
         }
 
+        if ($filters->get('role')) {
+            $query->whereHas('roles', function ($q) use ($filters) {
+                $q->where('roles.id', $filters->get('role'));
+            });
+        }
+
         if ($filters->get('orderByField') || $filters->get('orderBy')) {
             $field = $filters->get('orderByField') ? $filters->get('orderByField') : 'name';
             $orderBy = $filters->get('orderBy') ? $filters->get('orderBy') : 'asc';

app/Services/Backup/BackupConfigurationFactory.php

@@ -2,19 +2,14 @@
 
 namespace App\Services\Backup;
 
-use App\Models\CompanySetting;
 use App\Models\FileDisk;
 use Exception;
 use Spatie\Backup\Config\Config;
 
 class BackupConfigurationFactory
 {
-    public static function make($data = []): Config
+    public static function make(array $data = []): Config
     {
-        if (blank($data['company'] ?? null)) {
-            throw new Exception('The Company ID is missig');
-        }
-
         if (blank($data['file_disk_id'] ?? null)) {
             throw new Exception('No file disk selected');
         }
@@ -27,12 +22,6 @@ class BackupConfigurationFactory
 
         config(['backup.backup.destination.disks' => [$prefix.$fileDisk->driver]]);
 
-        $companyNotificationEmail = CompanySetting::getSetting('notification_email', $data['company']);
-
-        if ($companyNotificationEmail) {
-            config(['backup.notifications.mail.to' => $companyNotificationEmail]);
-        }
-
         $config = Config::fromArray(config('backup'));
 
         return $config;

config/invoiceshelf.php

@@ -9,7 +9,6 @@ use App\Models\Invoice;
 use App\Models\Item;
 use App\Models\Note;
 use App\Models\Payment;
-use App\Models\RecurringInvoice;
 use App\Models\TaxType;
 
 return [
@@ -164,7 +163,7 @@ return [
             'title' => 'settings.roles.title',
             'group' => '',
             'name' => 'Company Roles',
-            'link' => '/admin/settings/roles-settings',
+            'link' => '/admin/settings/roles',
             'icon' => 'UserGroupIcon',
             'owner_only' => true,
             'ability' => '',
@@ -174,7 +173,7 @@ return [
             'title' => 'settings.menu_title.exchange_rate',
             'group' => '',
             'name' => 'Exchange Rate Provider',
-            'link' => '/admin/settings/exchange-rate-provider',
+            'link' => '/admin/settings/exchange-rate',
             'icon' => 'BanknotesIcon',
             'owner_only' => false,
             'ability' => 'view-exchange-rate-provider',
@@ -204,7 +203,7 @@ return [
             'title' => 'settings.menu_title.payment_modes',
             'group' => '',
             'name' => 'Payment modes',
-            'link' => '/admin/settings/payment-mode',
+            'link' => '/admin/settings/payment-modes',
             'icon' => 'CreditCardIcon',
             'owner_only' => false,
             'ability' => 'view-payment',
@@ -234,7 +233,7 @@ return [
             'title' => 'settings.menu_title.expense_category',
             'group' => '',
             'name' => 'Expense Category',
-            'link' => '/admin/settings/expense-category',
+            'link' => '/admin/settings/expense-categories',
             'icon' => 'ClipboardDocumentListIcon',
             'owner_only' => false,
             'ability' => 'view-expense',
@@ -244,7 +243,7 @@ return [
             'title' => 'settings.mail.company_mail_config',
             'group' => '',
             'name' => 'Mail Configuration',
-            'link' => '/admin/settings/mail-configuration',
+            'link' => '/admin/settings/mail-config',
             'icon' => 'EnvelopeIcon',
             'owner_only' => true,
             'ability' => '',
@@ -306,16 +305,6 @@ return [
             'ability' => 'view-invoice',
             'model' => Invoice::class,
         ],
-        [
-            'title' => 'navigation.recurring-invoices',
-            'group' => 2,
-            'link' => '/admin/recurring-invoices',
-            'icon' => 'DocumentTextIcon',
-            'name' => 'Recurring Invoices',
-            'owner_only' => false,
-            'ability' => 'view-recurring-invoice',
-            'model' => RecurringInvoice::class,
-        ],
         [
             'title' => 'navigation.payments',
             'group' => 2,

lang/en.json

@@ -102,6 +102,7 @@
     "street_2": "Street 2",
     "action_failed": "Action Failed",
     "retry": "Retry",
+    "unable_to_load_pdf": "Unable to load document preview",
     "choose_note": "Choose Note",
     "no_note_found": "No Note Found",
     "insert_note": "Insert Note",
@@ -451,6 +452,7 @@
     "update_expense": "Update Expense",
     "edit_invoice": "Edit Invoice",
     "new_invoice": "New Invoice",
+    "one_time": "One-time",
     "save_invoice": "Save Invoice",
     "update_invoice": "Update Invoice",
     "add_new_tax": "Add New Tax",
@@ -550,6 +552,7 @@
     "update_expense": "Update Expense",
     "edit_invoice": "Edit Recurring Invoice",
     "new_invoice": "New Recurring Invoice",
+    "recurring": "Recurring",
     "send_automatically": "Send Automatically",
     "send_automatically_desc": "Enable this, if you would like to send the invoice automatically to the customer when its created.",
     "save_invoice": "Save Recurring Invoice",
@@ -594,7 +597,13 @@
       "every_hour": "Every Hour",
       "every_2_hour": "Every 2 Hour",
       "every_day_at_midnight": "Every day at midnight",
+      "every_day": "Every Day",
       "every_week": "Every Week",
+      "every_2_weeks": "Every 2 Weeks",
+      "every_month": "Every Month",
+      "every_2_months": "Every 2 Months",
+      "every_quarter": "Every 3 Months (Quarterly)",
+      "every_year": "Every Year",
       "every_15_days_at_midnight": "Every 15 days at midnight",
       "on_the_first_day_of_every_month_at_midnight": "On the first day of every month at 00:00",
       "every_6_month": "Every 6 Month",
@@ -613,7 +622,8 @@
       "none": "None",
       "date": "Date",
       "count": "Count"
-    }
+    },
+    "make_recurring": "Make Recurring"
   },
   "payments": {
     "title": "Payments",
@@ -771,6 +781,7 @@
     "date_of_creation": "Date Of Creation",
     "action": "Action",
     "invite_member": "Invite Member",
+    "select_role": "Select Role",
     "add_member": "Add Member",
     "save_member": "Save Member",
     "update_member": "Update Member",
@@ -968,6 +979,7 @@
       "updated_message": "Company information updated successfully",
       "delete_company": "Delete Company",
       "delete_company_description": "Once you delete your company, you will lose all the data and files associated with it permanently.",
+      "danger_zone": "Danger Zone",
       "are_you_absolutely_sure": "Are you absolutely sure?",
       "delete_company_modal_desc": "This action cannot be undone. This will permanently delete {company} and all of its associated data.",
       "delete_company_modal_label": "Please type {company} to confirm"
@@ -1188,6 +1200,7 @@
       "description": "Manage the roles & permissions of this company",
       "save": "Save",
       "add_new_role": "Add New Role",
+      "system_role": "System Role",
       "role_name": "Role Name",
       "added_on": "Added on",
       "add_role": "Add Role",

resources/scripts-v2/api/index.ts

@@ -27,6 +27,7 @@ export {
   mailService,
   pdfService,
   diskService,
+  updateService,
 } from './services'
 
 // Re-export all service types
@@ -55,7 +56,9 @@ export type {
   FrequencyDateResponse,
   CustomerListParams,
   CustomerListResponse,
-  CustomerStatsData,
+  CustomerStatsChartData,
+  CustomerStatsParams,
+  CustomerStatsResponse,
   PaymentListParams,
   PaymentListResponse,
   SendPaymentPayload,
@@ -103,6 +106,7 @@ export type {
   ModuleInstallPayload,
   ModuleCheckResponse,
   Backup,
+  BackupListResponse,
   CreateBackupPayload,
   DeleteBackupParams,
   MailConfig,
@@ -119,5 +123,11 @@ export type {
   GotenbergConfig,
   Disk,
   DiskDriversResponse,
+  DiskDriverValue,
   CreateDiskPayload,
+  CheckUpdateResponse,
+  UpdateRelease,
+  UpdateDownloadResponse,
+  UpdateStepResponse,
+  FinishUpdatePayload,
 } from './services'

resources/scripts-v2/api/services/auth.service.ts

@@ -36,6 +36,11 @@ export interface RegisterWithInvitationPayload {
   email: string
   password: string
   password_confirmation: string
+  invitation_token: string
+}
+
+export interface RegisterWithInvitationResponse {
+  type: string
   token: string
 }
 
@@ -74,8 +79,8 @@ export const authService = {
     return data
   },
 
-  async registerWithInvitation(payload: RegisterWithInvitationPayload): Promise<ApiResponse<User>> {
-    const { data } = await client.post(API.REGISTER_WITH_INVITATION, payload)
+  async registerWithInvitation(payload: RegisterWithInvitationPayload): Promise<RegisterWithInvitationResponse> {
+    const { data } = await client.post<RegisterWithInvitationResponse>(API.REGISTER_WITH_INVITATION, payload)
     return data
   },
 }

resources/scripts-v2/api/services/backup.service.ts

@@ -1,28 +1,35 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { ApiResponse, ListParams } from '@v2/types/api'
 
 export interface Backup {
-  id: number
-  disk: string
   path: string
   created_at: string
-  file_size: string
+  size: string
+}
+
+export interface BackupListResponse {
+  backups: Backup[]
+  disks: string[]
+  error?: string
+  error_message?: string
 }
 
 export interface CreateBackupPayload {
-  option: 'full' | 'database' | 'files'
-  selected_disk: string | null
+  option: 'full' | 'only-db' | 'only-files'
+  file_disk_id: number
 }
 
 export interface DeleteBackupParams {
   disk: string
-  path?: string
-  file_name?: string
+  path: string
+  file_disk_id?: number
 }
 
 export const backupService = {
-  async list(params?: ListParams): Promise<ApiResponse<Backup[]>> {
+  async list(params: {
+    disk: string
+    file_disk_id?: number
+  }): Promise<BackupListResponse> {
     const { data } = await client.get(API.BACKUPS, { params })
     return data
   },
@@ -37,7 +44,11 @@ export const backupService = {
     return data
   },
 
-  async download(params: { disk: string; path?: string; file_name?: string }): Promise<Blob> {
+  async download(params: {
+    disk: string
+    path: string
+    file_disk_id?: number
+  }): Promise<Blob> {
     const { data } = await client.get(API.DOWNLOAD_BACKUP, {
       params,
       responseType: 'blob',

resources/scripts-v2/api/services/bootstrap.service.ts

@@ -8,9 +8,10 @@ import type { Ability } from '@v2/types/domain/role'
 export interface MenuItem {
   title: string
   name: string
-  route: string
+  link: string
   icon: string
   group: string
+  group_label?: string
   ability?: string
 }
 
@@ -27,6 +28,7 @@ export interface BootstrapResponse {
   config: Record<string, unknown>
   global_settings: Record<string, string>
   modules: string[]
+  admin_mode?: boolean
   pending_invitations?: Array<{
     token: string
     company_name: string

resources/scripts-v2/api/services/custom-field.service.ts

@@ -17,6 +17,7 @@ export interface CreateCustomFieldPayload {
   is_required?: boolean
   options?: Array<{ name: string }> | string[] | null
   order?: number | null
+  default_answer?: string | null
 }
 
 export const customFieldService = {

resources/scripts-v2/api/services/customer.service.ts

@@ -24,16 +24,28 @@ export interface CustomerListResponse {
   meta: CustomerListMeta
 }
 
-export interface CustomerStatsData {
-  id: number
-  name: string
-  email: string | null
-  total_invoices: number
-  total_estimates: number
-  total_payments: number
-  total_expenses: number
-  total_amount_due: number
-  total_paid: number
+export interface CustomerStatsChartData {
+  salesTotal: number
+  totalReceipts: number
+  totalExpenses: number
+  netProfit: number
+  expenseTotals: number[]
+  netProfits: number[]
+  months: string[]
+  receiptTotals: number[]
+  invoiceTotals: number[]
+}
+
+export interface CustomerStatsParams {
+  previous_year?: boolean
+  this_year?: boolean
+}
+
+export interface CustomerStatsResponse {
+  data: Customer
+  meta: {
+    chartData: CustomerStatsChartData
+  }
 }
 
 export const customerService = {
@@ -62,7 +74,10 @@ export const customerService = {
     return data
   },
 
-  async getStats(id: number, params?: Record<string, unknown>): Promise<ApiResponse<CustomerStatsData>> {
+  async getStats(
+    id: number,
+    params?: CustomerStatsParams
+  ): Promise<CustomerStatsResponse> {
     const { data } = await client.get(`${API.CUSTOMER_STATS}/${id}/stats`, { params })
     return data
   },

resources/scripts-v2/api/services/disk.service.ts

@@ -1,54 +1,59 @@
 import { client } from '../client'
 import { API } from '../endpoints'
-import type { ApiResponse, ListParams } from '@v2/types/api'
+import type { ApiResponse, ListParams, PaginatedResponse } from '@v2/types/api'
+
+export type DiskDriverValue =
+  | 'local'
+  | 's3'
+  | 's3compat'
+  | 'doSpaces'
+  | 'dropbox'
 
 export interface Disk {
   id: number
   name: string
-  driver: string
+  type: string
+  driver: DiskDriverValue
   set_as_default: boolean
-  credentials: Record<string, string>
-  created_at: string
-  updated_at: string
+  credentials: Record<string, string> | string | null
+  company_id?: number | null
 }
 
 export interface DiskDriversResponse {
-  drivers: string[]
-  [key: string]: unknown
+  drivers: Array<{
+    name: string
+    value: DiskDriverValue
+  }>
+  default: DiskDriverValue | string
 }
 
 export interface CreateDiskPayload {
   name: string
-  selected_driver: string
-  // S3/S3-compat/DOSpaces fields
-  key?: string
-  secret?: string
-  region?: string
-  bucket?: string
-  root?: string
-  endpoint?: string
-  // Dropbox fields
-  token?: string
-  app?: string
+  driver: DiskDriverValue
+  credentials?: Record<string, string> | string
+  set_as_default?: boolean
 }
 
 export const diskService = {
-  async list(params?: ListParams): Promise<ApiResponse<Disk[]>> {
+  async list(params?: ListParams): Promise<PaginatedResponse<Disk>> {
     const { data } = await client.get(API.DISKS, { params })
     return data
   },
 
-  async get(disk: string): Promise<Record<string, unknown>> {
+  async get(disk: DiskDriverValue): Promise<Record<string, string>> {
     const { data } = await client.get(`${API.DISKS}/${disk}`)
     return data
   },
 
-  async create(payload: CreateDiskPayload): Promise<Disk> {
+  async create(payload: CreateDiskPayload): Promise<ApiResponse<Disk>> {
     const { data } = await client.post(API.DISKS, payload)
     return data
   },
 
-  async update(id: number, payload: Partial<CreateDiskPayload>): Promise<ApiResponse<Disk>> {
+  async update(
+    id: number,
+    payload: Partial<CreateDiskPayload>
+  ): Promise<ApiResponse<Disk>> {
     const { data } = await client.put(`${API.DISKS}/${id}`, payload)
     return data
   },

resources/scripts-v2/api/services/index.ts

@@ -23,6 +23,7 @@ export { backupService } from './backup.service'
 export { mailService } from './mail.service'
 export { pdfService } from './pdf.service'
 export { diskService } from './disk.service'
+export { updateService } from './update.service'
 
 // Re-export service types for convenience
 export type { LoginPayload, LoginResponse, ForgotPasswordPayload, ResetPasswordPayload, RegisterWithInvitationPayload } from './auth.service'
@@ -30,7 +31,13 @@ export type { BootstrapResponse, MenuItem, CurrentCompanyResponse } from './boot
 export type { InvoiceListParams, InvoiceListResponse, SendInvoicePayload, InvoiceStatusPayload, InvoiceTemplatesResponse } from './invoice.service'
 export type { EstimateListParams, EstimateListResponse, SendEstimatePayload, EstimateStatusPayload, EstimateTemplatesResponse } from './estimate.service'
 export type { RecurringInvoiceListParams, RecurringInvoiceListResponse, FrequencyDateParams, FrequencyDateResponse } from './recurring-invoice.service'
-export type { CustomerListParams, CustomerListResponse, CustomerStatsData } from './customer.service'
+export type {
+  CustomerListParams,
+  CustomerListResponse,
+  CustomerStatsChartData,
+  CustomerStatsParams,
+  CustomerStatsResponse,
+} from './customer.service'
 export type { PaymentListParams, PaymentListResponse, SendPaymentPayload, CreatePaymentMethodPayload } from './payment.service'
 export type { ExpenseListParams, ExpenseListResponse, CreateExpenseCategoryPayload } from './expense.service'
 export type { ItemListParams, ItemListResponse, CreateItemPayload, CreateUnitPayload } from './item.service'
@@ -46,7 +53,8 @@ export type { CustomFieldListParams, CreateCustomFieldPayload } from './custom-f
 export type { CreateNotePayload } from './note.service'
 export type { CreateExchangeRateProviderPayload, BulkUpdatePayload, ExchangeRateResponse, ActiveProviderResponse } from './exchange-rate.service'
 export type { Module, ModuleInstallPayload, ModuleCheckResponse } from './module.service'
-export type { Backup, CreateBackupPayload, DeleteBackupParams } from './backup.service'
+export type { Backup, BackupListResponse, CreateBackupPayload, DeleteBackupParams } from './backup.service'
 export type { MailConfig, MailConfigResponse, MailDriver, SmtpConfig, MailgunConfig, SesConfig, TestMailPayload } from './mail.service'
 export type { PdfConfig, PdfConfigResponse, PdfDriver, DomPdfConfig, GotenbergConfig } from './pdf.service'
-export type { Disk, DiskDriversResponse, CreateDiskPayload } from './disk.service'
+export type { Disk, DiskDriversResponse, DiskDriverValue, CreateDiskPayload } from './disk.service'
+export type { CheckUpdateResponse, UpdateRelease, UpdateDownloadResponse, UpdateStepResponse, FinishUpdatePayload } from './update.service'

resources/scripts-v2/api/services/invoice.service.ts

@@ -30,10 +30,12 @@ export interface InvoiceListResponse {
 
 export interface SendInvoicePayload {
   id: number
-  subject?: string
-  body?: string
-  from?: string
-  to?: string
+  subject?: string | null
+  body?: string | null
+  from?: string | null
+  to?: string | null
+  cc?: string | null
+  bcc?: string | null
 }
 
 export interface InvoiceStatusPayload {
@@ -43,6 +45,12 @@ export interface InvoiceStatusPayload {
 
 export interface SendPreviewParams {
   id: number
+  from?: string | null
+  to?: string | null
+  cc?: string | null
+  bcc?: string | null
+  subject?: string | null
+  body?: string | null
 }
 
 export interface InvoiceTemplate {

resources/scripts-v2/api/services/mail.service.ts

@@ -1,10 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
 
-export interface MailDriver {
-  name: string
-  value: string
-}
+export type MailDriver = string
 
 export interface SmtpConfig {
   mail_driver: string
@@ -46,6 +43,8 @@ export interface MailConfigResponse {
 
 export interface TestMailPayload {
   to: string
+  subject: string
+  message: string
 }
 
 export const mailService = {

resources/scripts-v2/api/services/member.service.ts

@@ -31,7 +31,7 @@ export interface UpdateMemberPayload {
 
 export interface InviteMemberPayload {
   email: string
-  role?: string
+  role_id: number | null
 }
 
 export interface DeleteMembersPayload {

resources/scripts-v2/api/services/pdf.service.ts

@@ -1,10 +1,7 @@
 import { client } from '../client'
 import { API } from '../endpoints'
 
-export interface PdfDriver {
-  name: string
-  value: string
-}
+export type PdfDriver = string
 
 export interface DomPdfConfig {
   pdf_driver: string

resources/scripts-v2/api/services/setting.service.ts

@@ -28,7 +28,7 @@ export interface NumberPlaceholdersParams {
 }
 
 export interface NumberPlaceholder {
-  description: string
+  name: string
   value: string
 }
 
@@ -102,7 +102,7 @@ export const settingService = {
   },
 
   // App Version
-  async getAppVersion(): Promise<{ version: string }> {
+  async getAppVersion(): Promise<{ version: string; channel: string }> {
     const { data } = await client.get(API.APP_VERSION)
     return data
   },

resources/scripts-v2/api/services/update.service.ts

@@ -0,0 +1,74 @@
+import { client } from '../client'
+import { API } from '../endpoints'
+
+export interface UpdateRelease {
+  version: string
+  description?: string | null
+  changelog?: string | null
+  extensions?: Record<string, boolean>
+  min_php_version?: string | null
+  deleted_files?: string | string[] | null
+}
+
+export interface CheckUpdateResponse {
+  success?: boolean
+  release: UpdateRelease | null
+  is_minor?: boolean
+}
+
+export interface UpdateDownloadResponse {
+  success: boolean
+  path?: string | boolean | Record<string, unknown> | null
+}
+
+export interface UpdateStepResponse {
+  success: boolean
+  path?: string | boolean | Record<string, unknown> | null
+  error?: string | boolean
+  data?: Record<string, unknown>
+}
+
+export interface FinishUpdatePayload {
+  installed: string
+  version: string
+}
+
+export const updateService = {
+  async check(channel: 'stable' | 'insider' = 'stable'): Promise<CheckUpdateResponse> {
+    const { data } = await client.get(API.CHECK_UPDATE, {
+      params: { channel },
+    })
+
+    return data
+  },
+
+  async download(payload: { version: string }): Promise<UpdateDownloadResponse> {
+    const { data } = await client.post(API.UPDATE_DOWNLOAD, payload)
+    return data
+  },
+
+  async unzip(payload: { path: string }): Promise<UpdateStepResponse> {
+    const { data } = await client.post(API.UPDATE_UNZIP, payload)
+    return data
+  },
+
+  async copy(payload: { path: string }): Promise<UpdateStepResponse> {
+    const { data } = await client.post(API.UPDATE_COPY, payload)
+    return data
+  },
+
+  async delete(payload: { deleted_files?: string | string[] | null }): Promise<UpdateStepResponse> {
+    const { data } = await client.post(API.UPDATE_DELETE, payload)
+    return data
+  },
+
+  async migrate(): Promise<UpdateStepResponse> {
+    const { data } = await client.post(API.UPDATE_MIGRATE)
+    return data
+  },
+
+  async finish(payload: FinishUpdatePayload): Promise<UpdateStepResponse> {
+    const { data } = await client.post(API.UPDATE_FINISH, payload)
+    return data
+  },
+}

resources/scripts-v2/components/base/BaseCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-surface/70 backdrop-blur-lg rounded-xl shadow-sm border border-white/15">
+  <div class="bg-surface rounded-xl shadow-sm border border-line-default">
     <div
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-heading border-b border-line-light border-solid"

resources/scripts-v2/components/base/BaseCustomInput.vue

@@ -227,7 +227,7 @@ getFields()
         :close-on-select="true"
         max-height="220"
         position="top-end"
-        width-class="w-92"
+        width-class="w-auto min-w-[40rem]"
         class="mb-2"
       >
         <template #activator>

resources/scripts-v2/components/base/BaseCustomerSelectPopup.vue

@@ -4,10 +4,14 @@ import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useDebounceFn } from '@vueuse/core'
 import { useRoute } from 'vue-router'
-import { usePermissions } from '@v2/composables/use-permissions'
-import { useModal } from '@v2/composables/use-modal'
+import { useUserStore } from '@v2/stores/user.store'
+import { useModalStore } from '@v2/stores/modal.store'
 import { ABILITIES } from '@v2/config/abilities'
-import type { Customer, Address } from '@v2/types/domain'
+import { useCustomerStore } from '@v2/features/company/customers/store'
+import { useInvoiceStore } from '@v2/features/company/invoices/store'
+import { useEstimateStore } from '@v2/features/company/estimates/store'
+import { useRecurringInvoiceStore } from '@v2/features/company/recurring-invoices/store'
+import CustomerModal from '@v2/features/company/customers/components/CustomerModal.vue'
 
 type DocumentType = 'estimate' | 'invoice' | 'recurring-invoice'
 
@@ -20,28 +24,11 @@ interface Validation {
   $errors: ValidationError[]
 }
 
-interface SelectedCustomerData {
-  id: number
-  name: string
-  billing?: Pick<Address, 'name' | 'city' | 'state' | 'zip'> | null
-  shipping?: Pick<Address, 'name' | 'city' | 'state' | 'zip'> | null
-}
-
 interface Props {
   valid?: Validation
   customerId?: number | null
   type?: DocumentType | null
   contentLoading?: boolean
-  selectedCustomer?: SelectedCustomerData | null
-  customers?: Customer[]
-}
-
-interface Emits {
-  (e: 'select', customerId: number): void
-  (e: 'deselect'): void
-  (e: 'edit', customerId: number): void
-  (e: 'search', query: string): void
-  (e: 'create'): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -49,44 +36,112 @@ const props = withDefaults(defineProps<Props>(), {
   customerId: null,
   type: null,
   contentLoading: false,
-  selectedCustomer: null,
-  customers: () => [],
 })
 
-const emit = defineEmits<Emits>()
-
-const { hasAbility } = usePermissions()
-const { openModal } = useModal()
+const userStore = useUserStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 
+const customerStore = useCustomerStore()
+const invoiceStore = useInvoiceStore()
+const estimateStore = useEstimateStore()
+const recurringInvoiceStore = useRecurringInvoiceStore()
+
 const search = ref<string | null>(null)
 const isSearchingCustomer = ref<boolean>(false)
 
+const selectedCustomer = computed(() => {
+  switch (props.type) {
+    case 'invoice':
+      return invoiceStore.newInvoice.customer
+    case 'estimate':
+      return estimateStore.newEstimate.customer
+    case 'recurring-invoice':
+      return recurringInvoiceStore.newRecurringInvoice.customer
+    default:
+      return null
+  }
+})
+
+// Fetch initial customers on setup
+async function fetchInitialCustomers(): Promise<void> {
+  await customerStore.fetchCustomers({
+    orderByField: '',
+    orderBy: '',
+  })
+}
+
+// Select customer on setup if customerId is provided
+if (props.customerId) {
+  if (props.type === 'invoice') {
+    invoiceStore.selectCustomer(props.customerId)
+  } else if (props.type === 'estimate') {
+    estimateStore.selectCustomer(props.customerId)
+  } else if (props.type === 'recurring-invoice') {
+    recurringInvoiceStore.selectCustomer(props.customerId)
+  }
+}
+
+fetchInitialCustomers()
+
 const debounceSearchCustomer = useDebounceFn(() => {
   isSearchingCustomer.value = true
   searchCustomer()
 }, 500)
 
-function searchCustomer(): void {
-  if (search.value !== null) {
-    emit('search', search.value)
-  }
+async function searchCustomer(): Promise<void> {
+  await customerStore.fetchCustomers({
+    display_name: search.value ?? '',
+    page: 1,
+  })
   isSearchingCustomer.value = false
 }
 
-function editCustomer(): void {
-  if (props.selectedCustomer) {
-    emit('edit', props.selectedCustomer.id)
+function selectNewCustomer(id: number, close: () => void): void {
+  const params: Record<string, unknown> = { userId: id }
+  if (route.params.id) params.model_id = route.params.id
+
+  if (props.type === 'invoice') {
+    invoiceStore.getNextNumber(params, true)
+    invoiceStore.selectCustomer(id)
+  } else if (props.type === 'estimate') {
+    estimateStore.getNextNumber(params, true)
+    estimateStore.selectCustomer(id)
+  } else if (props.type === 'recurring-invoice') {
+    recurringInvoiceStore.selectCustomer(id)
   }
+
+  close()
+  search.value = null
 }
 
 function resetSelectedCustomer(): void {
-  emit('deselect')
+  if (props.type === 'invoice') {
+    invoiceStore.resetSelectedCustomer()
+  } else if (props.type === 'estimate') {
+    estimateStore.resetSelectedCustomer()
+  } else if (props.type === 'recurring-invoice') {
+    recurringInvoiceStore.resetSelectedCustomer()
+  }
+}
+
+async function editCustomer(): Promise<void> {
+  if (!selectedCustomer.value) return
+  await customerStore.fetchCustomer(selectedCustomer.value.id)
+  modalStore.openModal({
+    title: t('customers.edit_customer'),
+    componentName: 'CustomerModal',
+  })
 }
 
 function openCustomerModal(): void {
-  emit('create')
+  customerStore.resetCurrentCustomer()
+  modalStore.openModal({
+    title: t('customers.add_customer'),
+    componentName: 'CustomerModal',
+    variant: 'md',
+  })
 }
 
 function initGenerator(name: string): string {
@@ -96,16 +151,13 @@ function initGenerator(name: string): string {
   }
   return ''
 }
-
-function selectNewCustomer(id: number, close: () => void): void {
-  emit('select', id)
-  close()
-  search.value = null
-}
 </script>
 
 <template>
-  <BaseContentPlaceholders v-if="contentLoading">
+  <div>
+    <CustomerModal />
+
+    <BaseContentPlaceholders v-if="contentLoading">
     <BaseContentPlaceholdersBox
       :rounded="true"
       class="w-full"
@@ -359,7 +411,7 @@ function selectNewCustomer(id: number, close: () => void): void {
                 :placeholder="$t('general.search')"
                 type="text"
                 icon="search"
-                @update:modelValue="(val: string | null) => debounceSearchCustomer()"
+                @update:modelValue="() => debounceSearchCustomer()"
               />
 
               <ul
@@ -372,7 +424,7 @@ function selectNewCustomer(id: number, close: () => void): void {
                 "
               >
                 <li
-                  v-for="(customer, index) in customers"
+                  v-for="(customer, index) in customerStore.customers"
                   :key="index"
                   href="#"
                   class="
@@ -434,7 +486,7 @@ function selectNewCustomer(id: number, close: () => void): void {
                   </div>
                 </li>
                 <div
-                  v-if="customers.length === 0"
+                  v-if="customerStore.customers.length === 0"
                   class="flex justify-center p-5 text-subtle"
                 >
                   <label class="text-base text-muted cursor-pointer">
@@ -445,7 +497,7 @@ function selectNewCustomer(id: number, close: () => void): void {
             </div>
 
             <button
-              v-if="hasAbility(ABILITIES.CREATE_CUSTOMER)"
+              v-if="userStore.hasAbilities(ABILITIES.CREATE_CUSTOMER)"
               type="button"
               class="
                 h-10
@@ -483,4 +535,5 @@ function selectNewCustomer(id: number, close: () => void): void {
       </transition>
     </Popover>
   </div>
+  </div>
 </template>

resources/scripts-v2/components/base/BaseDialog.vue

@@ -30,7 +30,7 @@
           leave-to="opacity-0"
         >
           <DialogOverlay
-            class="fixed inset-0 transition-opacity bg-surface-secondary0/75"
+            class="fixed inset-0 transition-opacity bg-black/50"
           />
         </TransitionChild>
 
@@ -59,9 +59,9 @@
               text-left
               align-bottom
               transition-all
-              bg-surface/80 backdrop-blur-2xl
-              rounded-xl border border-white/15
-              shadow-xl
+              bg-surface/95 backdrop-blur-xl backdrop-saturate-150
+              rounded-xl border border-line-default
+              shadow-2xl
               sm:my-8 sm:align-middle sm:w-full sm:p-6
               relative
             "
@@ -86,12 +86,12 @@
               >
                 <BaseIcon
                   v-if="dialogStore.variant === 'primary'"
-                  name="CheckIcon"
+                  name="CheckCircleIcon"
                   class="w-6 h-6 text-alert-success-text"
                 />
                 <BaseIcon
                   v-else
-                  name="ExclamationIcon"
+                  name="ExclamationTriangleIcon"
                   class="w-6 h-6 text-alert-error-text"
                   aria-hidden="true"
                 />

resources/scripts-v2/components/base/BaseDropdown.vue

@@ -11,40 +11,49 @@
       />
     </BaseContentPlaceholders>
     <Menu v-else>
-      <MenuButton ref="trigger" class="focus:outline-hidden" @click="onClick">
-        <slot name="activator" />
-      </MenuButton>
+      <span ref="trigger" class="inline-flex">
+        <MenuButton class="focus:outline-hidden" @click="onClick">
+          <slot name="activator" />
+        </MenuButton>
+      </span>
 
-      <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"
+      <Teleport to="body">
+        <div
+          ref="container"
+          class="fixed top-0 left-0 z-10"
+          :class="[widthClass, !contentLoading ? 'pointer-events-none' : '']"
         >
-          <MenuItems :class="containerClasses">
-            <div class="py-1">
-              <slot />
-            </div>
-          </MenuItems>
-        </transition>
-      </div>
+          <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>
+      </Teleport>
     </Menu>
   </div>
 </template>
 
 <script setup lang="ts">
 import { Menu, MenuButton, MenuItems } from '@headlessui/vue'
-import { computed, ref } from 'vue'
+import { computed, nextTick } from 'vue'
 import { usePopper } from '@v2/composables/use-popper'
+import type { Placement } from '@popperjs/core'
 
 interface Props {
   containerClass?: string
   widthClass?: string
   positionClass?: string
-  position?: string
+  position?: Placement
   wrapperClass?: string
   contentLoading?: boolean
 }
@@ -60,16 +69,19 @@ const props = withDefaults(defineProps<Props>(), {
 
 const containerClasses = computed<string>(() => {
   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}`
+  return `${baseClass} pointer-events-auto ${props.containerClass}`
 })
 
 const [trigger, container, popper] = usePopper({
-  placement: 'bottom-end',
+  placement: props.position,
   strategy: 'fixed',
   modifiers: [{ name: 'offset', options: { offset: [0, 10] } }],
 })
 
-function onClick(): void {
-  popper.value.update()
+async function onClick(): Promise<void> {
+  await nextTick()
+  requestAnimationFrame(() => {
+    popper.value?.update()
+  })
 }
 </script>

resources/scripts-v2/components/base/BaseItemSelect.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { usePermissions } from '@v2/composables/use-permissions'
-import { useModal } from '@v2/composables/use-modal'
+import { useUserStore } from '@v2/stores/user.store'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useItemStore } from '@v2/features/company/items/store'
 import { ABILITIES } from '@v2/config/abilities'
+import ItemModal from '@v2/features/company/items/components/ItemModal.vue'
 import type { Item } from '@v2/types/domain'
 import type { Tax } from '@v2/types/domain'
 
@@ -23,6 +25,8 @@ interface Props {
   invalidDescription?: boolean
   taxPerItem?: string
   taxes?: Tax[] | null
+  store?: { deselectItem: (index: number) => void } | null
+  storeProp?: string
 }
 
 interface Emits {
@@ -40,18 +44,27 @@ const props = withDefaults(defineProps<Props>(), {
   invalidDescription: false,
   taxPerItem: '',
   taxes: null,
+  store: null,
+  storeProp: '',
 })
 
 const emit = defineEmits<Emits>()
 
-const { hasAbility } = usePermissions()
-const { openModal } = useModal()
+const userStore = useUserStore()
+const modalStore = useModalStore()
+const itemStore = useItemStore()
 const { t } = useI18n()
 
 const itemSelect = ref<Item | null>(null)
+const multiselectRef = ref<{ close?: () => void } | null>(null)
 const loading = ref<boolean>(false)
 const itemData = reactive<LineItem>({ ...props.item })
 
+async function searchItems(search: string): Promise<Item[]> {
+  const res = await itemStore.fetchItems({ search })
+  return res.data as unknown as Item[]
+}
+
 const description = computed<string | null>({
   get: () => props.item.description,
   set: (value: string | null) => {
@@ -60,25 +73,35 @@ const description = computed<string | null>({
 })
 
 function openItemModal(): void {
-  openModal({
-    title: t('items.add_item'),
-    componentName: 'ItemModal',
-    refreshData: () => {},
-    data: {
-      taxPerItem: props.taxPerItem,
-      taxes: props.taxes,
-      itemIndex: props.index,
-    },
+  // Close the multiselect dropdown before opening the modal
+  ;(document.activeElement as HTMLElement)?.blur()
+
+  nextTick(() => {
+    modalStore.openModal({
+      title: t('items.add_item'),
+      componentName: 'ItemModal',
+      refreshData: (val: Item) => emit('select', val),
+      data: {
+        taxPerItem: props.taxPerItem,
+        taxes: props.taxes,
+        itemIndex: props.index,
+      },
+    })
   })
 }
 
 function deselectItem(index: number): void {
+  if (props.store) {
+    props.store.deselectItem(index)
+  }
   emit('deselect', index)
 }
 </script>
 
 <template>
   <div class="flex-1 text-sm">
+    <ItemModal />
+
     <!-- Selected Item Field  -->
     <div
       v-if="item.item_id"
@@ -106,6 +129,7 @@ function deselectItem(index: number): void {
     <!-- Select Item Field -->
     <BaseMultiselect
       v-else
+      ref="multiselectRef"
       v-model="itemSelect"
       :content-loading="contentLoading"
       value-prop="id"
@@ -118,6 +142,7 @@ function deselectItem(index: number): void {
       resolve-on-load
       :delay="500"
       searchable
+      :options="searchItems"
       object
       @update:modelValue="(val: Item) => $emit('select', val)"
       @searchChange="(val: string) => $emit('search', val)"
@@ -125,7 +150,7 @@ function deselectItem(index: number): void {
       <!-- Add Item Action  -->
       <template #action>
         <BaseSelectAction
-          v-if="hasAbility(ABILITIES.CREATE_ITEM)"
+          v-if="userStore.hasAbilities(ABILITIES.CREATE_ITEM)"
           @click="openItemModal"
         >
           <BaseIcon

resources/scripts-v2/components/base/BaseModal.vue

@@ -29,7 +29,7 @@
             leave-to="opacity-0"
           >
             <DialogOverlay
-              class="fixed inset-0 transition-opacity bg-gray-700/25"
+              class="fixed inset-0 transition-opacity bg-black/50"
             />
           </TransitionChild>
 
@@ -51,17 +51,17 @@
             <div
               :class="`inline-block
               align-middle
-              bg-surface/80 backdrop-blur-2xl
-              rounded-xl border border-white/15
+              bg-surface/95 backdrop-blur-xl backdrop-saturate-150
+              rounded-xl border border-line-default
               text-left
               overflow-hidden
               relative
-              shadow-xl
+              shadow-2xl
               transition-all
               my-4
               ${modalSize}
               sm:w-full
-              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
+              border-t-8 border-solid rounded border-primary-500`"
             >
               <div
                 v-if="hasHeaderSlot"

resources/scripts-v2/components/base/BasePdfPreview.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface Props {
+  src: string | false
+}
+
+const props = defineProps<Props>()
+
+const status = ref<'idle' | 'loading' | 'ready' | 'error'>('idle')
+
+async function checkPdf(url: string): Promise<void> {
+  status.value = 'loading'
+  try {
+    const response = await fetch(url, { method: 'GET', credentials: 'same-origin' })
+    if (response.ok) {
+      status.value = 'ready'
+    } else {
+      status.value = 'error'
+    }
+  } catch {
+    status.value = 'error'
+  }
+}
+
+function retry(): void {
+  if (props.src) {
+    checkPdf(props.src)
+  }
+}
+
+watch(
+  () => props.src,
+  (url) => {
+    if (url) {
+      checkPdf(url)
+    } else {
+      status.value = 'idle'
+    }
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div
+    class="flex flex-col min-h-0 mt-8 overflow-hidden"
+    style="height: 75vh"
+  >
+    <!-- Loading -->
+    <div
+      v-if="status === 'loading' || status === 'idle'"
+      class="flex-1 flex items-center justify-center border border-line-default rounded-md bg-surface"
+    >
+      <BaseSpinner class="w-8 h-8 text-primary-400" />
+    </div>
+
+    <!-- Error -->
+    <div
+      v-else-if="status === 'error'"
+      class="flex-1 flex flex-col items-center justify-center gap-4 border border-line-default rounded-md bg-surface"
+    >
+      <BaseIcon name="ExclamationCircleIcon" class="w-12 h-12 text-muted" />
+      <p class="text-sm text-muted">
+        {{ $t('general.unable_to_load_pdf') }}
+      </p>
+      <BaseButton variant="primary-outline" size="sm" @click="retry">
+        {{ $t('general.retry') }}
+      </BaseButton>
+    </div>
+
+    <!-- PDF iframe -->
+    <iframe
+      v-else
+      :src="src || undefined"
+      class="flex-1 border border-line-default border-solid rounded-md bg-surface"
+    />
+  </div>
+</template>

resources/scripts-v2/components/base/BaseTab.vue

@@ -0,0 +1,24 @@
+<template>
+  <TabPanel :class="[tabPanelContainer, 'focus:outline-hidden']">
+    <slot />
+  </TabPanel>
+</template>
+
+<script setup lang="ts">
+import { TabPanel } from '@headlessui/vue'
+
+withDefaults(
+  defineProps<{
+    title?: string | number
+    count?: string | number
+    countVariant?: string | number
+    tabPanelContainer?: string
+  }>(),
+  {
+    title: 'Tab',
+    count: '',
+    countVariant: '',
+    tabPanelContainer: 'py-4 mt-px',
+  },
+)
+</script>

resources/scripts-v2/components/base/BaseTabGroup.vue

@@ -40,7 +40,7 @@ function onChange(d: number): void {
 </script>
 
 <template>
-  <div>
+  <div class="w-full">
     <TabGroup :default-index="defaultIndex" @change="onChange">
       <TabList
         :class="[
@@ -57,9 +57,9 @@ function onChange(d: number): void {
         >
           <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',
+              'px-5 py-2.5 text-sm leading-5 font-medium flex items-center relative -mb-px border-b-2 focus:outline-hidden whitespace-nowrap transition-colors',
               selected
-                ? ' border-primary-400 text-heading font-medium'
+                ? 'border-primary-400 text-heading'
                 : 'border-transparent text-muted hover:text-body hover:border-line-strong',
             ]"
           >

resources/scripts-v2/components/base/EstimateStatusBadge.vue

@@ -10,28 +10,30 @@ const props = withDefaults(defineProps<Props>(), {
   status: '',
 })
 
+const baseClasses = 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium'
+
 const badgeColorClasses = computed<string>(() => {
   switch (props.status) {
     case EstimateStatus.DRAFT:
     case 'DRAFT':
-      return 'bg-yellow-300/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center'
+      return `${baseClasses} bg-gray-100 text-gray-700 ring-1 ring-inset ring-gray-300/50`
     case EstimateStatus.SENT:
     case 'SENT':
-      return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center'
+      return `${baseClasses} bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-300/50`
     case EstimateStatus.VIEWED:
     case 'VIEWED':
-      return 'bg-blue-400/25 px-2 py-1 text-sm text-status-blue uppercase font-normal text-center'
+      return `${baseClasses} bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-300/50`
     case EstimateStatus.EXPIRED:
     case 'EXPIRED':
-      return 'bg-red-300/25 px-2 py-1 text-sm text-status-red uppercase font-normal text-center'
+      return `${baseClasses} bg-red-50 text-red-700 ring-1 ring-inset ring-red-300/50`
     case EstimateStatus.ACCEPTED:
     case 'ACCEPTED':
-      return 'bg-green-400/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center'
+      return `${baseClasses} bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-300/50`
     case EstimateStatus.REJECTED:
     case 'REJECTED':
-      return 'bg-purple-300/25 px-2 py-1 text-sm text-status-purple uppercase font-normal text-center'
+      return `${baseClasses} bg-rose-50 text-rose-700 ring-1 ring-inset ring-rose-300/50`
     default:
-      return 'bg-surface-secondary0/25 px-2 py-1 text-sm text-heading uppercase font-normal text-center'
+      return `${baseClasses} bg-surface-secondary text-muted ring-1 ring-inset ring-line-default`
   }
 })
 </script>

resources/scripts-v2/components/base/InvoicePublicPage.vue

@@ -2,6 +2,8 @@
 import { ref, computed } from 'vue'
 import type { Ref, ComputedRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { client } from '@v2/api/client'
+import InvoiceInformationCard from './InvoiceInformationCard.vue'
 import type { Currency } from '@v2/types/domain'
 import type { Company } from '@v2/types/domain'
 import type { Customer } from '@v2/types/domain'
@@ -23,12 +25,6 @@ interface InvoicePublicData {
   customer?: Pick<Customer, 'name'>
 }
 
-interface Props {
-  fetchInvoice: (hash: string) => Promise<InvoicePublicData>
-}
-
-const props = defineProps<Props>()
-
 const invoiceData = ref<InvoicePublicData | null>(null) as Ref<InvoicePublicData | null>
 const route = useRoute()
 const router = useRouter()
@@ -37,7 +33,8 @@ loadInvoice()
 
 async function loadInvoice(): Promise<void> {
   const hash = route.params.hash as string
-  invoiceData.value = await props.fetchInvoice(hash)
+  const { data } = await client.get(`/customer/invoices/${hash}`)
+  invoiceData.value = data.data
 }
 
 const shareableLink = computed<string>(() => {
@@ -60,13 +57,16 @@ const customerLogo = computed<string | false>(() => {
 const pageTitle: ComputedRef<string> = computed(() => invoiceData.value?.invoice_number ?? '')
 
 function payInvoice(): void {
-  router.push({
-    name: 'invoice.pay',
-    params: {
-      hash: route.params.hash as string,
-      company: invoiceData.value?.company?.slug ?? '',
-    },
-  })
+  const resolved = router.resolve({ name: 'invoice.pay' })
+  if (resolved.matched.length) {
+    router.push({
+      name: 'invoice.pay',
+      params: {
+        hash: route.params.hash as string,
+        company: invoiceData.value?.company?.slug ?? '',
+      },
+    })
+  }
 }
 </script>
 

resources/scripts-v2/components/base/InvoiceStatusBadge.vue

@@ -16,35 +16,37 @@ const props = withDefaults(defineProps<Props>(), {
   status: '',
 })
 
+const baseClasses = 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium'
+
 const badgeColorClasses = computed<string>(() => {
   switch (props.status) {
     case InvoiceStatus.DRAFT:
     case 'DRAFT':
-      return 'bg-yellow-300/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center'
+      return `${baseClasses} bg-gray-100 text-gray-700 ring-1 ring-inset ring-gray-300/50`
     case InvoiceStatus.SENT:
     case 'SENT':
-      return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center'
+      return `${baseClasses} bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-300/50`
     case InvoiceStatus.VIEWED:
     case 'VIEWED':
-      return 'bg-blue-400/25 px-2 py-1 text-sm text-status-blue uppercase font-normal text-center'
+      return `${baseClasses} bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-300/50`
     case InvoiceStatus.COMPLETED:
     case 'COMPLETED':
-      return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center'
+      return `${baseClasses} bg-green-50 text-green-700 ring-1 ring-inset ring-green-300/50`
     case 'DUE':
-      return 'bg-yellow-500/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center'
+      return `${baseClasses} bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-300/50`
     case 'OVERDUE':
-      return 'bg-red-300/50 px-2 py-1 text-sm text-status-red uppercase font-normal text-center'
+      return `${baseClasses} bg-red-50 text-red-700 ring-1 ring-inset ring-red-300/50`
     case InvoicePaidStatus.UNPAID:
     case 'UNPAID':
-      return 'bg-yellow-500/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center'
+      return `${baseClasses} bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-300/50`
     case InvoicePaidStatus.PARTIALLY_PAID:
     case 'PARTIALLY_PAID':
-      return 'bg-blue-400/25 px-2 py-1 text-sm text-status-blue uppercase font-normal text-center'
+      return `${baseClasses} bg-cyan-50 text-cyan-700 ring-1 ring-inset ring-cyan-300/50`
     case InvoicePaidStatus.PAID:
     case 'PAID':
-      return 'bg-green-500/40 px-2 py-1 text-sm text-status-green uppercase font-semibold text-center'
+      return `${baseClasses} bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-300/50`
     default:
-      return 'bg-surface-secondary0/25 px-2 py-1 text-sm text-heading uppercase font-normal text-center'
+      return `${baseClasses} bg-surface-secondary text-muted ring-1 ring-inset ring-line-default`
   }
 })
 </script>

resources/scripts-v2/components/base/PaidStatusBadge.vue

@@ -6,35 +6,35 @@ type PaidBadgeStatus = InvoicePaidStatus | 'OVERDUE' | string
 
 interface Props {
   status?: PaidBadgeStatus
-  defaultClass?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   status: '',
-  defaultClass: 'px-1 py-0.5 text-xs',
 })
 
+const baseClasses = 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium'
+
 const badgeColorClasses = computed<string>(() => {
   switch (props.status) {
     case InvoicePaidStatus.PAID:
     case 'PAID':
-      return 'bg-green-500/40 text-status-green uppercase font-semibold text-center'
+      return `${baseClasses} bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-300/50`
     case InvoicePaidStatus.UNPAID:
     case 'UNPAID':
-      return 'bg-yellow-500/25 text-status-yellow uppercase font-normal text-center'
+      return `${baseClasses} bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-300/50`
     case InvoicePaidStatus.PARTIALLY_PAID:
     case 'PARTIALLY_PAID':
-      return 'bg-blue-400/25 text-status-blue uppercase font-normal text-center'
+      return `${baseClasses} bg-cyan-50 text-cyan-700 ring-1 ring-inset ring-cyan-300/50`
     case 'OVERDUE':
-      return 'bg-red-300/50 px-2 py-1 text-sm text-status-red uppercase font-normal text-center'
+      return `${baseClasses} bg-red-50 text-red-700 ring-1 ring-inset ring-red-300/50`
     default:
-      return 'bg-surface-secondary0/25 text-heading uppercase font-normal text-center'
+      return `${baseClasses} bg-surface-secondary text-muted ring-1 ring-inset ring-line-default`
   }
 })
 </script>
 
 <template>
-  <span :class="[badgeColorClasses, defaultClass]">
+  <span :class="badgeColorClasses">
     <slot />
   </span>
 </template>

resources/scripts-v2/components/base/RecurringInvoiceStatusBadge.vue

@@ -10,19 +10,21 @@ const props = withDefaults(defineProps<Props>(), {
   status: '',
 })
 
+const baseClasses = 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium'
+
 const badgeColorClasses = computed<string>(() => {
   switch (props.status) {
-    case RecurringInvoiceStatus.COMPLETED:
-    case 'COMPLETED':
-      return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center'
-    case RecurringInvoiceStatus.ON_HOLD:
-    case 'ON_HOLD':
-      return 'bg-yellow-500/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center'
     case RecurringInvoiceStatus.ACTIVE:
     case 'ACTIVE':
-      return 'bg-blue-400/25 px-2 py-1 text-sm text-status-blue uppercase font-normal text-center'
+      return `${baseClasses} bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-300/50`
+    case RecurringInvoiceStatus.ON_HOLD:
+    case 'ON_HOLD':
+      return `${baseClasses} bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-300/50`
+    case RecurringInvoiceStatus.COMPLETED:
+    case 'COMPLETED':
+      return `${baseClasses} bg-green-50 text-green-700 ring-1 ring-inset ring-green-300/50`
     default:
-      return 'bg-surface-secondary0/25 px-2 py-1 text-sm text-heading uppercase font-normal text-center'
+      return `${baseClasses} bg-surface-secondary text-muted ring-1 ring-inset ring-line-default`
   }
 })
 </script>

resources/scripts-v2/components/base/index.ts

@@ -30,6 +30,7 @@ export { default as BaseListItem } from './BaseListItem.vue'
 export { default as BaseMoney } from './BaseMoney.vue'
 export { default as BaseModal } from './BaseModal.vue'
 export { default as BaseMultiselect } from './BaseMultiselect.vue'
+export { default as BasePdfPreview } from './BasePdfPreview.vue'
 export { default as BaseRadio } from './BaseRadio.vue'
 export { default as BaseRating } from './BaseRating.vue'
 export { default as BaseRecurringInvoiceStatusLabel } from './BaseRecurringInvoiceStatusLabel.vue'
@@ -39,6 +40,7 @@ export { default as BaseSelectInput } from './BaseSelectInput.vue'
 export { default as BaseSettingCard } from './BaseSettingCard.vue'
 export { default as BaseSpinner } from './BaseSpinner.vue'
 export { default as BaseSwitch } from './BaseSwitch.vue'
+export { default as BaseTab } from './BaseTab.vue'
 export { default as BaseTabGroup } from './BaseTabGroup.vue'
 export { default as BaseText } from './BaseText.vue'
 export { default as BaseTextarea } from './BaseTextarea.vue'

resources/scripts-v2/components/layout/FilterWrapper.vue

@@ -1,37 +1,41 @@
 <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"
+    enter-active-class="transition duration-300 ease-out"
+    enter-from-class="opacity-0 -translate-y-2"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-active-class="transition duration-200 ease-in"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 -translate-y-2"
   >
-    <div v-show="show" class="relative z-10 p-4 md:p-8 bg-surface-muted rounded">
+    <div
+      v-show="show"
+      class="relative z-10 p-5 md:p-6 bg-surface rounded-xl border border-line-default shadow-sm mb-4"
+    >
       <slot name="filter-header" />
 
-      <label
+      <button
         class="
-          absolute
-          text-sm
-          leading-snug
-          text-heading
-          cursor-pointer
-          hover:text-body
-          top-2.5
-          right-3.5
+          absolute top-4 right-4
+          flex items-center gap-1
+          text-xs font-medium
+          text-muted hover:text-heading
+          px-2 py-1
+          rounded-md
+          hover:bg-surface-secondary
+          transition-colors
         "
         @click="emit('clear')"
       >
+        <BaseIcon name="XMarkIcon" class="w-3.5 h-3.5" />
         {{ $t('general.clear_all') }}
-      </label>
+      </button>
 
       <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'
+            ? 'xl:flex-row xl:space-x-4 xl:space-y-0 xl:items-end'
+            : 'lg:flex-row lg:space-x-4 lg:space-y-0 lg:items-end'
         "
       >
         <slot />

resources/scripts-v2/components/notifications/NotificationItem.vue

@@ -80,10 +80,10 @@
             >
               {{
                 notification.message
-                  ? notification.message
+                  ? $t(notification.message)
                   : success
-                  ? 'Successful'
-                  : 'Something went wrong'
+                  ? $t('general.successful')
+                  : $t('general.something_went_wrong')
               }}
             </p>
           </div>

resources/scripts-v2/components/table/DataTable.vue

@@ -6,8 +6,8 @@
           class="
             relative
             overflow-hidden
-            bg-surface/70 backdrop-blur-lg
-            border border-white/15
+            bg-surface
+            border border-line-default
             shadow-sm
             rounded-xl
           "

resources/scripts-v2/composables/use-company.ts

@@ -47,9 +47,7 @@ const selectedCompany = ref<Company | null>(null)
 const companies = ref<Company[]>([])
 const selectedCompanySettings = ref<CompanySettings>({})
 const selectedCompanyCurrency = ref<CompanyCurrency | null>(null)
-const isAdminMode = ref<boolean>(
-  ls.get<string>(LS_KEYS.IS_ADMIN_MODE) === 'true'
-)
+const isAdminMode = ref<boolean>(ls.getBoolean(LS_KEYS.IS_ADMIN_MODE))
 
 /**
  * Composable for managing company selection and admin mode state.
@@ -104,7 +102,7 @@ export function useCompany(): UseCompanyReturn {
    */
   function enterAdminMode(): void {
     isAdminMode.value = true
-    ls.set(LS_KEYS.IS_ADMIN_MODE, 'true')
+    ls.set(LS_KEYS.IS_ADMIN_MODE, true)
     ls.remove(LS_KEYS.SELECTED_COMPANY)
     selectedCompany.value = null
   }

resources/scripts-v2/features/admin/components/settings/AdminBackupModal.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import {
+  backupService,
+  type CreateBackupPayload,
+} from '@v2/api/services/backup.service'
+import { diskService, type Disk } from '@v2/api/services/disk.service'
+import {
+  getErrorTranslationKey,
+  handleApiError,
+} from '@v2/utils/error-handling'
+
+type BackupOption = CreateBackupPayload['option']
+
+interface DiskOption extends Disk {
+  display_name: string
+}
+
+interface BackupTypeOption {
+  id: BackupOption
+  label: string
+}
+
+interface BackupModalData {
+  disks?: DiskOption[]
+  selectedDiskId?: number | null
+}
+
+interface BackupForm {
+  option: BackupOption | ''
+  selectedDiskId: number | null
+}
+
+const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+
+const isSaving = ref(false)
+const isFetchingInitialData = ref(false)
+const disks = ref<DiskOption[]>([])
+
+const form = reactive<BackupForm>({
+  option: 'full',
+  selectedDiskId: null,
+})
+
+const backupTypeOptions: BackupTypeOption[] = [
+  {
+    id: 'full',
+    label: 'full',
+  },
+  {
+    id: 'only-db',
+    label: 'only-db',
+  },
+  {
+    id: 'only-files',
+    label: 'only-files',
+  },
+]
+
+const modalActive = computed<boolean>(() => {
+  return modalStore.active && modalStore.componentName === 'AdminBackupModal'
+})
+
+const rules = computed(() => ({
+  option: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  selectedDiskId: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, form)
+
+async function setInitialData(): Promise<void> {
+  resetForm()
+  isFetchingInitialData.value = true
+
+  try {
+    const modalData = isBackupModalData(modalStore.data) ? modalStore.data : null
+
+    if (modalData?.disks?.length) {
+      disks.value = modalData.disks
+      form.selectedDiskId =
+        modalData.selectedDiskId ??
+        modalData.disks.find((disk) => disk.set_as_default)?.id ??
+        modalData.disks[0]?.id ??
+        null
+
+      return
+    }
+
+    const response = await diskService.list({ limit: 'all' })
+
+    disks.value = response.data.map((disk) => ({
+      ...disk,
+      display_name: `${disk.name} - [${disk.driver}]`,
+    }))
+
+    const selectedDiskId =
+      modalStore.data &&
+      typeof modalStore.data === 'object' &&
+      'id' in (modalStore.data as Record<string, unknown>)
+        ? Number((modalStore.data as Record<string, unknown>).id)
+        : null
+
+    form.selectedDiskId =
+      disks.value.find((disk) => disk.id === selectedDiskId)?.id ??
+      disks.value.find((disk) => disk.set_as_default)?.id ??
+      disks.value[0]?.id ??
+      null
+  } catch (error: unknown) {
+    showApiError(error)
+  } finally {
+    isFetchingInitialData.value = false
+  }
+}
+
+async function createBackup(): Promise<void> {
+  v$.value.$touch()
+
+  if (v$.value.$invalid || !form.selectedDiskId) {
+    return
+  }
+
+  isSaving.value = true
+
+  try {
+    const response = await backupService.create({
+      option: form.option as BackupOption,
+      file_disk_id: form.selectedDiskId,
+    })
+
+    if (response.success) {
+      notificationStore.showNotification({
+        type: 'success',
+        message: t('settings.backup.created_message'),
+      })
+      modalStore.refreshData?.()
+      closeModal()
+    }
+  } catch (error: unknown) {
+    showApiError(error)
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function showApiError(error: unknown): void {
+  const normalizedError = handleApiError(error)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+
+function resetForm(): void {
+  form.option = 'full'
+  form.selectedDiskId = null
+  v$.value.$reset()
+}
+
+function closeModal(): void {
+  modalStore.closeModal()
+
+  setTimeout(() => {
+    resetForm()
+    disks.value = []
+  }, 300)
+}
+
+function isBackupModalData(value: unknown): value is BackupModalData {
+  return Boolean(value && typeof value === 'object')
+}
+</script>
+
+<template>
+  <BaseModal :show="modalActive" @close="closeModal" @open="setInitialData">
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalStore.title }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="w-6 h-6 text-muted cursor-pointer"
+          @click="closeModal"
+        />
+      </div>
+    </template>
+
+    <form @submit.prevent="createBackup">
+      <div class="p-4 md:p-6">
+        <BaseInputGrid layout="one-column">
+          <BaseInputGroup
+            :label="$t('settings.backup.select_backup_type')"
+            :error="v$.option.$error && v$.option.$errors[0]?.$message"
+            required
+          >
+            <BaseSelectInput
+              v-model="form.option"
+              :options="backupTypeOptions"
+              :placeholder="$t('settings.backup.select_backup_type')"
+              value-prop="id"
+              @update:model-value="v$.option.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('settings.disk.select_disk')"
+            :error="
+              v$.selectedDiskId.$error && v$.selectedDiskId.$errors[0]?.$message
+            "
+            required
+          >
+            <BaseMultiselect
+              v-model="form.selectedDiskId"
+              :options="disks"
+              :content-loading="isFetchingInitialData"
+              :can-deselect="false"
+              :invalid="v$.selectedDiskId.$error"
+              label="display_name"
+              track-by="id"
+              value-prop="id"
+              searchable
+              :placeholder="$t('settings.disk.select_disk')"
+              @update:model-value="v$.selectedDiskId.$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"
+          @click="closeModal"
+        >
+          {{ $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.create') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>

resources/scripts-v2/features/admin/components/settings/AdminFileDiskModal.vue

@@ -0,0 +1,565 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import {
+  diskService,
+  type CreateDiskPayload,
+  type Disk,
+  type DiskDriverValue,
+} from '@v2/api/services/disk.service'
+import {
+  getErrorTranslationKey,
+  handleApiError,
+} from '@v2/utils/error-handling'
+
+interface DiskField {
+  key: string
+  labelKey: string
+  placeholder?: string
+}
+
+interface DiskDriverOption {
+  name: string
+  value: DiskDriverValue
+}
+
+interface DiskForm {
+  name: string
+  driver: DiskDriverValue
+  set_as_default: boolean
+  credentials: Record<string, string>
+}
+
+const DRIVER_FIELDS: Record<DiskDriverValue, DiskField[]> = {
+  local: [
+    {
+      key: 'root',
+      labelKey: 'settings.disk.local_root',
+      placeholder: 'Ex. /user/root/',
+    },
+  ],
+  s3: [
+    {
+      key: 'root',
+      labelKey: 'settings.disk.aws_root',
+      placeholder: 'Ex. /user/root/',
+    },
+    {
+      key: 'key',
+      labelKey: 'settings.disk.aws_key',
+      placeholder: 'Ex. KEIS4S39SERSDS',
+    },
+    {
+      key: 'secret',
+      labelKey: 'settings.disk.aws_secret',
+      placeholder: 'Ex. ********',
+    },
+    {
+      key: 'region',
+      labelKey: 'settings.disk.aws_region',
+      placeholder: 'Ex. us-west',
+    },
+    {
+      key: 'bucket',
+      labelKey: 'settings.disk.aws_bucket',
+      placeholder: 'Ex. AppName',
+    },
+  ],
+  s3compat: [
+    {
+      key: 'endpoint',
+      labelKey: 'settings.disk.s3_endpoint',
+      placeholder: 'Ex. https://s3.example.com',
+    },
+    {
+      key: 'key',
+      labelKey: 'settings.disk.s3_key',
+      placeholder: 'Ex. KEIS4S39SERSDS',
+    },
+    {
+      key: 'secret',
+      labelKey: 'settings.disk.s3_secret',
+      placeholder: 'Ex. ********',
+    },
+    {
+      key: 'region',
+      labelKey: 'settings.disk.s3_region',
+      placeholder: 'Ex. us-west',
+    },
+    {
+      key: 'bucket',
+      labelKey: 'settings.disk.s3_bucket',
+      placeholder: 'Ex. AppName',
+    },
+    {
+      key: 'root',
+      labelKey: 'settings.disk.s3_root',
+      placeholder: 'Ex. /user/root/',
+    },
+  ],
+  doSpaces: [
+    {
+      key: 'key',
+      labelKey: 'settings.disk.do_spaces_key',
+      placeholder: 'Ex. KEIS4S39SERSDS',
+    },
+    {
+      key: 'secret',
+      labelKey: 'settings.disk.do_spaces_secret',
+      placeholder: 'Ex. ********',
+    },
+    {
+      key: 'region',
+      labelKey: 'settings.disk.do_spaces_region',
+      placeholder: 'Ex. nyc3',
+    },
+    {
+      key: 'bucket',
+      labelKey: 'settings.disk.do_spaces_bucket',
+      placeholder: 'Ex. AppName',
+    },
+    {
+      key: 'endpoint',
+      labelKey: 'settings.disk.do_spaces_endpoint',
+      placeholder: 'Ex. https://nyc3.digitaloceanspaces.com',
+    },
+    {
+      key: 'root',
+      labelKey: 'settings.disk.do_spaces_root',
+      placeholder: 'Ex. /user/root/',
+    },
+  ],
+  dropbox: [
+    {
+      key: 'token',
+      labelKey: 'settings.disk.dropbox_token',
+    },
+    {
+      key: 'key',
+      labelKey: 'settings.disk.dropbox_key',
+      placeholder: 'Ex. KEIS4S39SERSDS',
+    },
+    {
+      key: 'secret',
+      labelKey: 'settings.disk.dropbox_secret',
+      placeholder: 'Ex. ********',
+    },
+    {
+      key: 'app',
+      labelKey: 'settings.disk.dropbox_app',
+    },
+    {
+      key: 'root',
+      labelKey: 'settings.disk.dropbox_root',
+      placeholder: 'Ex. /user/root/',
+    },
+  ],
+}
+
+const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+
+const isSaving = ref(false)
+const isFetchingInitialData = ref(false)
+const driverOptions = ref<DiskDriverOption[]>([])
+const currentDisk = ref<Disk | null>(null)
+
+const form = reactive<DiskForm>({
+  name: '',
+  driver: 'local',
+  set_as_default: false,
+  credentials: {},
+})
+
+const modalActive = computed<boolean>(() => {
+  return modalStore.active && modalStore.componentName === 'AdminFileDiskModal'
+})
+
+const currentFields = computed<DiskField[]>(() => {
+  return DRIVER_FIELDS[form.driver] ?? []
+})
+
+const defaultSwitchDisabled = computed<boolean>(() => {
+  return Boolean(currentDisk.value?.set_as_default)
+})
+
+const rules = computed(() => {
+  const credentialRules = currentFields.value.reduce<
+    Record<string, { required: ReturnType<typeof helpers.withMessage> }>
+  >((ruleSet, field) => {
+    ruleSet[field.key] = {
+      required: helpers.withMessage(t('validation.required'), required),
+    }
+
+    return ruleSet
+  }, {})
+
+  return {
+    name: {
+      required: helpers.withMessage(t('validation.required'), required),
+    },
+    driver: {
+      required: helpers.withMessage(t('validation.required'), required),
+    },
+    credentials: credentialRules,
+  }
+})
+
+const v$ = useVuelidate(rules, form)
+
+async function setInitialData(): Promise<void> {
+  resetForm()
+  isFetchingInitialData.value = true
+
+  try {
+    const response = await diskService.getDrivers()
+    driverOptions.value = response.drivers
+
+    if (isDisk(modalStore.data)) {
+      currentDisk.value = modalStore.data
+      form.name = currentDisk.value.name
+      form.driver = currentDisk.value.driver
+      form.set_as_default = currentDisk.value.set_as_default
+      form.credentials = normalizeDiskCredentials(
+        currentDisk.value.credentials,
+        currentDisk.value.driver
+      )
+    } else {
+      currentDisk.value = null
+      form.driver = resolveInitialDriver(response.drivers, response.default)
+      form.credentials = await loadDriverCredentials(form.driver)
+    }
+  } catch (error: unknown) {
+    showApiError(error)
+  } finally {
+    isFetchingInitialData.value = false
+  }
+}
+
+async function handleDriverChange(value: DiskDriverValue): Promise<void> {
+  v$.value.driver.$touch()
+  form.driver = value
+
+  const existingName = form.name
+  const existingDefaultState = form.set_as_default
+
+  form.credentials = await loadDriverCredentials(value)
+  form.name = existingName
+  form.set_as_default = existingDefaultState
+}
+
+async function saveDisk(): Promise<void> {
+  v$.value.$touch()
+
+  if (v$.value.$invalid) {
+    return
+  }
+
+  isSaving.value = true
+
+  try {
+    const payload: CreateDiskPayload = {
+      name: form.name.trim(),
+      driver: form.driver,
+      credentials: { ...form.credentials },
+      set_as_default: form.set_as_default,
+    }
+
+    if (currentDisk.value) {
+      await diskService.update(currentDisk.value.id, payload)
+      notificationStore.showNotification({
+        type: 'success',
+        message: t('settings.disk.success_update'),
+      })
+    } else {
+      await diskService.create(payload)
+      notificationStore.showNotification({
+        type: 'success',
+        message: t('settings.disk.success_create'),
+      })
+    }
+
+    modalStore.refreshData?.()
+    closeModal()
+  } catch (error: unknown) {
+    showApiError(error)
+  } finally {
+    isSaving.value = false
+  }
+}
+
+async function loadDriverCredentials(
+  driver: DiskDriverValue
+): Promise<Record<string, string>> {
+  if (currentDisk.value && currentDisk.value.driver === driver) {
+    return normalizeDiskCredentials(currentDisk.value.credentials, driver)
+  }
+
+  const defaults = await diskService.get(driver)
+  return normalizeDiskCredentials(defaults, driver)
+}
+
+function resolveInitialDriver(
+  drivers: DiskDriverOption[],
+  defaultDriver: string
+): DiskDriverValue {
+  const matchedDriver = drivers.find((driver) => driver.value === defaultDriver)
+  return matchedDriver?.value ?? drivers[0]?.value ?? 'local'
+}
+
+function normalizeDiskCredentials(
+  credentials: Disk['credentials'] | Record<string, string>,
+  driver: DiskDriverValue
+): Record<string, string> {
+  const emptyCredentials = createEmptyCredentials(driver)
+
+  if (!credentials) {
+    return emptyCredentials
+  }
+
+  if (typeof credentials === 'string') {
+    try {
+      const parsedCredentials = JSON.parse(credentials) as unknown
+
+      if (typeof parsedCredentials === 'string') {
+        return {
+          ...emptyCredentials,
+          root: parsedCredentials,
+        }
+      }
+
+      if (parsedCredentials && typeof parsedCredentials === 'object') {
+        return {
+          ...emptyCredentials,
+          ...stringifyRecord(parsedCredentials as Record<string, unknown>),
+        }
+      }
+    } catch {
+      return {
+        ...emptyCredentials,
+        root: credentials,
+      }
+    }
+  }
+
+  return {
+    ...emptyCredentials,
+    ...stringifyRecord(credentials as Record<string, unknown>),
+  }
+}
+
+function createEmptyCredentials(driver: DiskDriverValue): Record<string, string> {
+  return currentFieldsFor(driver).reduce<Record<string, string>>(
+    (credentialSet, field) => {
+      credentialSet[field.key] = ''
+      return credentialSet
+    },
+    {}
+  )
+}
+
+function currentFieldsFor(driver: DiskDriverValue): DiskField[] {
+  return DRIVER_FIELDS[driver] ?? []
+}
+
+function stringifyRecord(
+  value: Record<string, unknown>
+): Record<string, string> {
+  return Object.entries(value).reduce<Record<string, string>>(
+    (record, [key, entry]) => {
+      record[key] = entry == null ? '' : String(entry)
+      return record
+    },
+    {}
+  )
+}
+
+function touchCredential(key: string): void {
+  const credentialField = (
+    v$.value.credentials as Record<
+      string,
+      { $touch: () => void }
+    >
+  )[key]
+
+  credentialField?.$touch()
+}
+
+function credentialError(key: string): string {
+  const credentialField = (
+    v$.value.credentials as Record<
+      string,
+      { $error: boolean; $errors: Array<{ $message: string }> }
+    >
+  )[key]
+
+  if (!credentialField?.$error) {
+    return ''
+  }
+
+  return credentialField.$errors[0]?.$message ?? ''
+}
+
+function isCredentialInvalid(key: string): boolean {
+  const credentialField = (
+    v$.value.credentials as Record<string, { $error: boolean }>
+  )[key]
+
+  return Boolean(credentialField?.$error)
+}
+
+function showApiError(error: unknown): void {
+  const normalizedError = handleApiError(error)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+
+function resetForm(): void {
+  form.name = ''
+  form.driver = 'local'
+  form.set_as_default = false
+  form.credentials = {}
+  currentDisk.value = null
+  v$.value.$reset()
+}
+
+function closeModal(): void {
+  modalStore.closeModal()
+
+  setTimeout(() => {
+    resetForm()
+    driverOptions.value = []
+  }, 300)
+}
+
+function isDisk(value: unknown): value is Disk {
+  return Boolean(
+    value &&
+      typeof value === 'object' &&
+      'id' in value &&
+      'driver' in value &&
+      'name' in value
+  )
+}
+</script>
+
+<template>
+  <BaseModal :show="modalActive" @close="closeModal" @open="setInitialData">
+    <template #header>
+      <div class="flex justify-between w-full">
+        {{ modalStore.title }}
+        <BaseIcon
+          name="XMarkIcon"
+          class="w-6 h-6 text-muted cursor-pointer"
+          @click="closeModal"
+        />
+      </div>
+    </template>
+
+    <form @submit.prevent="saveDisk">
+      <div class="p-4 md:p-6">
+        <BaseInputGrid>
+          <BaseInputGroup
+            :label="$t('settings.disk.name')"
+            :error="v$.name.$error && v$.name.$errors[0]?.$message"
+            required
+          >
+            <BaseInput
+              v-model.trim="form.name"
+              :invalid="v$.name.$error"
+              @input="v$.name.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('settings.disk.driver')"
+            :error="v$.driver.$error && v$.driver.$errors[0]?.$message"
+            required
+          >
+            <BaseMultiselect
+              v-model="form.driver"
+              :options="driverOptions"
+              :content-loading="isFetchingInitialData"
+              :can-deselect="false"
+              :invalid="v$.driver.$error"
+              label="name"
+              track-by="value"
+              value-prop="value"
+              searchable
+              @update:model-value="handleDriverChange"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            v-for="field in currentFields"
+            :key="field.key"
+            :label="$t(field.labelKey)"
+            :error="credentialError(field.key)"
+            required
+          >
+            <BaseInput
+              v-model.trim="form.credentials[field.key]"
+              :invalid="isCredentialInvalid(field.key)"
+              :placeholder="field.placeholder"
+              @input="touchCredential(field.key)"
+            />
+          </BaseInputGroup>
+        </BaseInputGrid>
+
+        <div class="mt-6 flex items-center">
+          <div class="relative flex items-center w-12">
+            <BaseSwitch
+              v-model="form.set_as_default"
+              :disabled="defaultSwitchDisabled"
+              class="flex"
+            />
+          </div>
+
+          <div class="ml-4">
+            <p class="mb-1 text-base leading-snug text-heading">
+              {{ $t('settings.disk.is_default') }}
+            </p>
+          </div>
+        </div>
+      </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"
+          @click="closeModal"
+        >
+          {{ $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>
+          {{ currentDisk ? $t('general.update') : $t('general.save') }}
+        </BaseButton>
+      </div>
+    </form>
+  </BaseModal>
+</template>

resources/scripts-v2/features/admin/components/settings/AdminPdfDomDriver.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import type { PdfDriver } from '@v2/api/services/pdf.service'
+
+interface DomPdfForm {
+  pdf_driver: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    configData?: Record<string, unknown>
+    isSaving?: boolean
+    isFetchingInitialData?: boolean
+    drivers?: PdfDriver[]
+  }>(),
+  {
+    configData: () => ({}),
+    isSaving: false,
+    isFetchingInitialData: false,
+    drivers: () => [],
+  }
+)
+
+const emit = defineEmits<{
+  'submit-data': [config: DomPdfForm]
+  'on-change-driver': [driver: string]
+}>()
+
+const { t } = useI18n()
+
+const form = reactive<DomPdfForm>({
+  pdf_driver: 'dompdf',
+})
+
+const rules = computed(() => ({
+  pdf_driver: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, form)
+
+onMounted(() => {
+  if (typeof props.configData.pdf_driver === 'string') {
+    form.pdf_driver = props.configData.pdf_driver
+  }
+})
+
+function onChangeDriver(): void {
+  v$.value.pdf_driver.$touch()
+  emit('on-change-driver', form.pdf_driver)
+}
+
+function saveConfig(): void {
+  v$.value.$touch()
+  if (v$.value.$invalid) {
+    return
+  }
+
+  emit('submit-data', { ...form })
+}
+</script>
+
+<template>
+  <form @submit.prevent="saveConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.pdf.driver')"
+        :error="v$.pdf_driver.$error && v$.pdf_driver.$errors[0]?.$message"
+        required
+      >
+        <BaseMultiselect
+          v-model="form.pdf_driver"
+          :content-loading="isFetchingInitialData"
+          :options="drivers"
+          :can-deselect="false"
+          :invalid="v$.pdf_driver.$error"
+          @update:model-value="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="ArrowDownOnSquareIcon"
+            :class="slotProps.class"
+          />
+        </template>
+        {{ $t('general.save') }}
+      </BaseButton>
+    </div>
+  </form>
+</template>

resources/scripts-v2/features/admin/components/settings/AdminPdfGotenbergDriver.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
+import type { PdfDriver } from '@v2/api/services/pdf.service'
+
+interface GotenbergForm {
+  pdf_driver: string
+  gotenberg_host: string
+  gotenberg_papersize: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    configData?: Record<string, unknown>
+    isSaving?: boolean
+    isFetchingInitialData?: boolean
+    drivers?: PdfDriver[]
+  }>(),
+  {
+    configData: () => ({}),
+    isSaving: false,
+    isFetchingInitialData: false,
+    drivers: () => [],
+  }
+)
+
+const emit = defineEmits<{
+  'submit-data': [config: GotenbergForm]
+  'on-change-driver': [driver: string]
+}>()
+
+const { t } = useI18n()
+
+const form = reactive<GotenbergForm>({
+  pdf_driver: 'gotenberg',
+  gotenberg_host: '',
+  gotenberg_papersize: '210mm 297mm',
+})
+
+function isValidServiceUrl(value: string): boolean {
+  if (!helpers.req(value)) {
+    return true
+  }
+
+  try {
+    const parsedUrl = new URL(value)
+
+    return (
+      (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') &&
+      parsedUrl.hostname.length > 0
+    )
+  } catch {
+    return false
+  }
+}
+
+const rules = computed(() => ({
+  pdf_driver: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+  gotenberg_host: {
+    required: helpers.withMessage(t('validation.required'), required),
+    validServiceUrl: helpers.withMessage(
+      t('validation.invalid_url'),
+      isValidServiceUrl
+    ),
+  },
+  gotenberg_papersize: {
+    required: helpers.withMessage(t('validation.required'), required),
+  },
+}))
+
+const v$ = useVuelidate(rules, form)
+
+onMounted(() => {
+  if (typeof props.configData.pdf_driver === 'string') {
+    form.pdf_driver = props.configData.pdf_driver
+  }
+
+  if (typeof props.configData.gotenberg_host === 'string') {
+    form.gotenberg_host = props.configData.gotenberg_host
+  }
+
+  if (typeof props.configData.gotenberg_papersize === 'string') {
+    form.gotenberg_papersize = props.configData.gotenberg_papersize
+  }
+})
+
+function onChangeDriver(): void {
+  v$.value.pdf_driver.$touch()
+  emit('on-change-driver', form.pdf_driver)
+}
+
+function saveConfig(): void {
+  v$.value.$touch()
+  if (v$.value.$invalid) {
+    return
+  }
+
+  emit('submit-data', { ...form })
+}
+</script>
+
+<template>
+  <form @submit.prevent="saveConfig">
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('settings.pdf.driver')"
+        :error="v$.pdf_driver.$error && v$.pdf_driver.$errors[0]?.$message"
+        required
+      >
+        <BaseMultiselect
+          v-model="form.pdf_driver"
+          :content-loading="isFetchingInitialData"
+          :options="drivers"
+          :can-deselect="false"
+          :invalid="v$.pdf_driver.$error"
+          @update:model-value="onChangeDriver"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.pdf.gotenberg_host')"
+        :error="
+          v$.gotenberg_host.$error && v$.gotenberg_host.$errors[0]?.$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="form.gotenberg_host"
+          :content-loading="isFetchingInitialData"
+          :invalid="v$.gotenberg_host.$error"
+          type="text"
+          name="gotenberg_host"
+          @input="v$.gotenberg_host.$touch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('settings.pdf.papersize')"
+        :help-text="$t('settings.pdf.papersize_hint')"
+        :error="
+          v$.gotenberg_papersize.$error &&
+          v$.gotenberg_papersize.$errors[0]?.$message
+        "
+        required
+      >
+        <BaseInput
+          v-model.trim="form.gotenberg_papersize"
+          :content-loading="isFetchingInitialData"
+          :invalid="v$.gotenberg_papersize.$error"
+          type="text"
+          name="gotenberg_papersize"
+          @input="v$.gotenberg_papersize.$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>
+    </div>
+  </form>
+</template>

resources/scripts-v2/features/admin/routes.ts

@@ -7,6 +7,11 @@ const AdminCompanyEditView = () => import('./views/AdminCompanyEditView.vue')
 const AdminUsersView = () => import('./views/AdminUsersView.vue')
 const AdminUserEditView = () => import('./views/AdminUserEditView.vue')
 const AdminSettingsView = () => import('./views/AdminSettingsView.vue')
+const AdminMailConfigView = () => import('./views/settings/AdminMailConfigView.vue')
+const AdminPdfGenerationView = () => import('./views/settings/AdminPdfGenerationView.vue')
+const AdminBackupView = () => import('./views/settings/AdminBackupView.vue')
+const AdminFileDiskView = () => import('./views/settings/AdminFileDiskView.vue')
+const AdminUpdateAppView = () => import('./views/settings/AdminUpdateAppView.vue')
 
 export const adminRoutes: RouteRecordRaw[] = [
   {
@@ -15,6 +20,7 @@ export const adminRoutes: RouteRecordRaw[] = [
     meta: {
       requiresAuth: true,
       isSuperAdmin: true,
+      usesAdminBootstrap: true,
     },
     children: [
       {
@@ -65,14 +71,17 @@ export const adminRoutes: RouteRecordRaw[] = [
           isSuperAdmin: true,
         },
         children: [
+          {
+            path: '',
+            redirect: 'mail-configuration',
+          },
           {
             path: 'mail-configuration',
             name: 'admin.settings.mail',
             meta: {
               isSuperAdmin: true,
             },
-            // Loaded by settings sub-routes
-            component: { template: '<router-view />' },
+            component: AdminMailConfigView,
           },
           {
             path: 'pdf-generation',
@@ -80,7 +89,7 @@ export const adminRoutes: RouteRecordRaw[] = [
             meta: {
               isSuperAdmin: true,
             },
-            component: { template: '<router-view />' },
+            component: AdminPdfGenerationView,
           },
           {
             path: 'backup',
@@ -88,7 +97,7 @@ export const adminRoutes: RouteRecordRaw[] = [
             meta: {
               isSuperAdmin: true,
             },
-            component: { template: '<router-view />' },
+            component: AdminBackupView,
           },
           {
             path: 'file-disk',
@@ -96,7 +105,7 @@ export const adminRoutes: RouteRecordRaw[] = [
             meta: {
               isSuperAdmin: true,
             },
-            component: { template: '<router-view />' },
+            component: AdminFileDiskView,
           },
           {
             path: 'update-app',
@@ -104,7 +113,7 @@ export const adminRoutes: RouteRecordRaw[] = [
             meta: {
               isSuperAdmin: true,
             },
-            component: { template: '<router-view />' },
+            component: AdminUpdateAppView,
           },
         ],
       },

resources/scripts-v2/features/admin/views/settings/AdminBackupView.vue

@@ -0,0 +1,328 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useDialogStore } from '@v2/stores/dialog.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { backupService, type Backup } from '@v2/api/services/backup.service'
+import { diskService, type Disk } from '@v2/api/services/disk.service'
+import {
+  getErrorTranslationKey,
+  handleApiError,
+} from '@v2/utils/error-handling'
+import AdminBackupModal from '@v2/features/admin/components/settings/AdminBackupModal.vue'
+
+interface TableColumn {
+  key: string
+  label?: string
+  thClass?: string
+  tdClass?: string
+  sortable?: boolean
+}
+
+interface DiskOption extends Disk {
+  display_name: string
+}
+
+interface FetchParams {
+  page: number
+  filter: Record<string, unknown>
+  sort: { fieldName: string; order: string }
+}
+
+interface FetchResult {
+  data: Backup[]
+  pagination: {
+    totalPages: number
+    currentPage: number
+    totalCount: number
+    limit: number
+  }
+}
+
+const modalStore = useModalStore()
+const dialogStore = useDialogStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+
+const table = ref<{ refresh: () => void } | null>(null)
+const disks = ref<DiskOption[]>([])
+const selectedDisk = ref<DiskOption | null>(null)
+const isFetchingInitialData = ref(false)
+const backupError = ref('')
+
+const backupColumns = computed<TableColumn[]>(() => [
+  {
+    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,
+  },
+])
+
+watch(
+  selectedDisk,
+  (newDisk, oldDisk) => {
+    if (newDisk?.id && oldDisk?.id && newDisk.id !== oldDisk.id) {
+      refreshTable()
+    }
+  }
+)
+
+loadDisks()
+
+async function loadDisks(): Promise<void> {
+  isFetchingInitialData.value = true
+
+  try {
+    const response = await diskService.list({ limit: 'all' })
+
+    disks.value = response.data.map((disk) => ({
+      ...disk,
+      display_name: `${disk.name} - [${disk.driver}]`,
+    }))
+
+    selectedDisk.value =
+      disks.value.find((disk) => disk.set_as_default) ?? disks.value[0] ?? null
+  } catch (error: unknown) {
+    showApiError(error)
+  } finally {
+    isFetchingInitialData.value = false
+  }
+}
+
+async function fetchData({ page }: FetchParams): Promise<FetchResult> {
+  if (!selectedDisk.value) {
+    return emptyResult(page)
+  }
+
+  backupError.value = ''
+
+  try {
+    const response = await backupService.list({
+      disk: selectedDisk.value.driver,
+      file_disk_id: selectedDisk.value.id,
+    })
+
+    if (response.error) {
+      backupError.value = t('settings.backup.invalid_disk_credentials')
+
+      return emptyResult(page)
+    }
+
+    return {
+      data: response.backups,
+      pagination: {
+        totalPages: 1,
+        currentPage: 1,
+        totalCount: response.backups.length,
+        limit: response.backups.length || 1,
+      },
+    }
+  } catch (error: unknown) {
+    showApiError(error)
+    return emptyResult(page)
+  }
+}
+
+async function removeBackup(backup: Backup): Promise<void> {
+  if (!selectedDisk.value) {
+    return
+  }
+
+  const confirmed = await 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',
+  })
+
+  if (!confirmed) {
+    return
+  }
+
+  try {
+    const response = await backupService.delete({
+      disk: selectedDisk.value.driver,
+      file_disk_id: selectedDisk.value.id,
+      path: backup.path,
+    })
+
+    if (response.success) {
+      notificationStore.showNotification({
+        type: 'success',
+        message: t('settings.backup.deleted_message'),
+      })
+      refreshTable()
+    }
+  } catch (error: unknown) {
+    showApiError(error)
+  }
+}
+
+async function downloadBackup(backup: Backup): Promise<void> {
+  if (!selectedDisk.value) {
+    return
+  }
+
+  isFetchingInitialData.value = true
+  let objectUrl = ''
+
+  try {
+    const blob = await backupService.download({
+      disk: selectedDisk.value.driver,
+      file_disk_id: selectedDisk.value.id,
+      path: backup.path,
+    })
+
+    objectUrl = window.URL.createObjectURL(blob)
+
+    const downloadLink = document.createElement('a')
+    downloadLink.href = objectUrl
+    downloadLink.setAttribute(
+      'download',
+      backup.path.split('/').pop() ?? 'backup.zip'
+    )
+    document.body.appendChild(downloadLink)
+    downloadLink.click()
+    document.body.removeChild(downloadLink)
+  } catch (error: unknown) {
+    showApiError(error)
+  } finally {
+    if (objectUrl) {
+      window.URL.revokeObjectURL(objectUrl)
+    }
+    isFetchingInitialData.value = false
+  }
+}
+
+function openCreateBackupModal(): void {
+  modalStore.openModal({
+    title: t('settings.backup.create_backup'),
+    componentName: 'AdminBackupModal',
+    size: 'sm',
+    data: {
+      disks: disks.value,
+      selectedDiskId: selectedDisk.value?.id ?? null,
+    },
+    refreshData: table.value?.refresh,
+  })
+}
+
+function refreshTable(): void {
+  table.value?.refresh()
+}
+
+function emptyResult(page: number): FetchResult {
+  return {
+    data: [],
+    pagination: {
+      totalPages: 1,
+      currentPage: page,
+      totalCount: 0,
+      limit: 1,
+    },
+  }
+}
+
+function showApiError(error: unknown): void {
+  const normalizedError = handleApiError(error)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+</script>
+
+<template>
+  <AdminBackupModal />
+
+  <BaseSettingCard
+    :title="$t('settings.backup.title', 1)"
+    :description="$t('settings.backup.description')"
+  >
+    <template #action>
+      <BaseButton variant="primary-outline" @click="openCreateBackupModal">
+        <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="selectedDisk"
+          :content-loading="isFetchingInitialData"
+          :options="disks"
+          track-by="id"
+          value-prop="id"
+          label="display_name"
+          :placeholder="$t('settings.disk.select_disk')"
+          object
+          searchable
+          class="w-full"
+        />
+      </BaseInputGroup>
+    </div>
+
+    <BaseErrorAlert
+      v-if="backupError"
+      class="mt-6"
+      :errors="[backupError]"
+    />
+
+    <BaseTable
+      ref="table"
+      class="mt-10"
+      :show-filter="false"
+      :data="fetchData"
+      :columns="backupColumns"
+    >
+      <template #cell-actions="{ row }">
+        <BaseDropdown>
+          <template #activator>
+            <div class="inline-block">
+              <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
+            </div>
+          </template>
+
+          <BaseDropdownItem @click="downloadBackup(row.data)">
+            <BaseIcon name="CloudArrowDownIcon" class="mr-3 text-body" />
+            {{ $t('general.download') }}
+          </BaseDropdownItem>
+
+          <BaseDropdownItem @click="removeBackup(row.data)">
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
+            {{ $t('general.delete') }}
+          </BaseDropdownItem>
+        </BaseDropdown>
+      </template>
+    </BaseTable>
+  </BaseSettingCard>
+</template>

resources/scripts-v2/features/admin/views/settings/AdminFileDiskView.vue

@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useDialogStore } from '@v2/stores/dialog.store'
+import { useGlobalStore } from '@v2/stores/global.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { diskService, type Disk } from '@v2/api/services/disk.service'
+import {
+  getErrorTranslationKey,
+  handleApiError,
+} from '@v2/utils/error-handling'
+import AdminFileDiskModal from '@v2/features/admin/components/settings/AdminFileDiskModal.vue'
+
+interface TableColumn {
+  key: string
+  label?: string
+  thClass?: string
+  tdClass?: string
+  sortable?: boolean
+}
+
+interface FetchParams {
+  page: number
+  filter: Record<string, unknown>
+  sort: { fieldName: string; order: string }
+}
+
+interface FetchResult {
+  data: Disk[]
+  pagination: {
+    totalPages: number
+    currentPage: number
+    totalCount: number
+    limit: number
+  }
+}
+
+const modalStore = useModalStore()
+const dialogStore = useDialogStore()
+const globalStore = useGlobalStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+
+const table = ref<{ refresh: () => void } | null>(null)
+const savePdfToDisk = ref(
+  (globalStore.globalSettings?.save_pdf_to_disk ?? 'NO') === 'YES'
+)
+
+const fileDiskColumns = computed<TableColumn[]>(() => [
+  {
+    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 savePdfToDiskField = computed<boolean>({
+  get: () => savePdfToDisk.value,
+  set: async (enabled) => {
+    savePdfToDisk.value = enabled
+
+    await globalStore.updateGlobalSettings({
+      data: {
+        settings: {
+          save_pdf_to_disk: enabled ? 'YES' : 'NO',
+        },
+      },
+      message: t('general.setting_updated'),
+    })
+  },
+})
+
+async function fetchData({ page, sort }: FetchParams): Promise<FetchResult> {
+  const response = await diskService.list({
+    orderByField: sort.fieldName || 'created_at',
+    orderBy: sort.order || 'desc',
+    page,
+  })
+
+  return {
+    data: response.data,
+    pagination: {
+      totalPages: response.meta.last_page,
+      currentPage: page,
+      totalCount: response.meta.total,
+      limit: Number(response.meta.per_page) || 5,
+    },
+  }
+}
+
+async function setDefaultDisk(id: number): Promise<void> {
+  const confirmed = await 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',
+  })
+
+  if (!confirmed) {
+    return
+  }
+
+  try {
+    await diskService.update(id, { set_as_default: true })
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: t('settings.disk.success_set_default_disk'),
+    })
+
+    refreshTable()
+  } catch (error: unknown) {
+    showApiError(error)
+  }
+}
+
+async function removeDisk(id: number): Promise<void> {
+  const confirmed = await 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',
+  })
+
+  if (!confirmed) {
+    return
+  }
+
+  try {
+    const response = await diskService.delete(id)
+
+    if (response.success) {
+      notificationStore.showNotification({
+        type: 'success',
+        message: t('settings.disk.deleted_message'),
+      })
+      refreshTable()
+    }
+  } catch (error: unknown) {
+    showApiError(error)
+  }
+}
+
+function openCreateDiskModal(): void {
+  modalStore.openModal({
+    title: t('settings.disk.new_disk'),
+    componentName: 'AdminFileDiskModal',
+    size: 'lg',
+    refreshData: table.value?.refresh,
+  })
+}
+
+function openEditDiskModal(disk: Disk): void {
+  modalStore.openModal({
+    title: t('settings.disk.edit_file_disk'),
+    componentName: 'AdminFileDiskModal',
+    id: disk.id,
+    data: disk,
+    size: 'lg',
+    refreshData: table.value?.refresh,
+  })
+}
+
+function canShowActions(disk: Disk): boolean {
+  return !disk.set_as_default || disk.type !== 'SYSTEM'
+}
+
+function refreshTable(): void {
+  table.value?.refresh()
+}
+
+function showApiError(error: unknown): void {
+  const normalizedError = handleApiError(error)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+</script>
+
+<template>
+  <AdminFileDiskModal />
+
+  <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 }">
+        <span
+          :class="
+            row.data.set_as_default
+              ? 'bg-success text-status-green'
+              : 'bg-surface-muted text-muted'
+          "
+          class="inline-flex rounded-full px-2 py-1 text-xs font-medium uppercase"
+        >
+          {{
+            row.data.set_as_default ? $t('general.yes') : $t('general.no')
+          }}
+        </span>
+      </template>
+
+      <template #cell-actions="{ row }">
+        <BaseDropdown v-if="canShowActions(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="setDefaultDisk(row.data.id)"
+          >
+            <BaseIcon class="mr-3 text-body" 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>

resources/scripts-v2/features/admin/views/settings/AdminMailConfigView.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useModalStore } from '@v2/stores/modal.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { mailService } from '@v2/api/services/mail.service'
+import type { MailConfig, MailDriver } from '@v2/api/services/mail.service'
+import SmtpMailDriver from '@v2/features/company/settings/components/SmtpMailDriver.vue'
+import MailgunMailDriver from '@v2/features/company/settings/components/MailgunMailDriver.vue'
+import SesMailDriver from '@v2/features/company/settings/components/SesMailDriver.vue'
+import BasicMailDriver from '@v2/features/company/settings/components/BasicMailDriver.vue'
+import MailTestModal from '@v2/features/company/settings/components/MailTestModal.vue'
+
+const { t } = useI18n()
+const modalStore = useModalStore()
+const notificationStore = useNotificationStore()
+
+const isSaving = ref(false)
+const isFetchingInitialData = ref(false)
+const mailConfigData = ref<Record<string, unknown> | null>(null)
+const mailDrivers = ref<MailDriver[]>([])
+const currentMailDriver = ref('smtp')
+
+loadData()
+
+async function loadData(): Promise<void> {
+  isFetchingInitialData.value = true
+
+  try {
+    const [driversResponse, configResponse] = await Promise.all([
+      mailService.getDrivers(),
+      mailService.getConfig(),
+    ])
+
+    mailDrivers.value = driversResponse
+    mailConfigData.value = configResponse
+    currentMailDriver.value = configResponse.mail_driver ?? 'smtp'
+  } finally {
+    isFetchingInitialData.value = false
+  }
+}
+
+const mailDriver = computed(() => {
+  switch (currentMailDriver.value) {
+    case 'mailgun':
+      return MailgunMailDriver
+    case 'ses':
+      return SesMailDriver
+    case 'sendmail':
+    case 'mail':
+      return BasicMailDriver
+    default:
+      return SmtpMailDriver
+  }
+})
+
+function changeDriver(value: string): void {
+  currentMailDriver.value = value
+
+  if (mailConfigData.value) {
+    mailConfigData.value.mail_driver = value
+  }
+}
+
+async function saveEmailConfig(value: MailConfig): Promise<void> {
+  isSaving.value = true
+
+  try {
+    const response = await mailService.saveConfig(value)
+
+    if (response.success) {
+      notificationStore.showNotification({
+        type: 'success',
+        message: t(`settings.success.${response.success}`),
+      })
+
+      if (mailConfigData.value) {
+        mailConfigData.value = {
+          ...mailConfigData.value,
+          ...value,
+        }
+      }
+    }
+  } finally {
+    isSaving.value = false
+  }
+}
+
+function openMailTestModal(): void {
+  modalStore.openModal({
+    title: t('general.test_mail_conf'),
+    componentName: 'MailTestModal',
+    size: 'sm',
+  })
+}
+</script>
+
+<template>
+  <MailTestModal store-type="global" />
+
+  <BaseSettingCard
+    :title="$t('settings.mail.mail_config')"
+    :description="$t('settings.mail.mail_config_desc')"
+  >
+    <div v-if="mailConfigData" class="mt-14">
+      <component
+        :is="mailDriver"
+        :config-data="mailConfigData"
+        :is-saving="isSaving"
+        :mail-drivers="mailDrivers"
+        :is-fetching-initial-data="isFetchingInitialData"
+        @on-change-driver="changeDriver"
+        @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>

resources/scripts-v2/features/admin/views/settings/AdminPdfGenerationView.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { pdfService } from '@v2/api/services/pdf.service'
+import type { PdfConfig, PdfDriver } from '@v2/api/services/pdf.service'
+import AdminPdfDomDriver from '@v2/features/admin/components/settings/AdminPdfDomDriver.vue'
+import AdminPdfGotenbergDriver from '@v2/features/admin/components/settings/AdminPdfGotenbergDriver.vue'
+
+const { t } = useI18n()
+const notificationStore = useNotificationStore()
+
+const isSaving = ref(false)
+const isFetchingInitialData = ref(false)
+const configData = ref<Record<string, unknown> | null>(null)
+const drivers = ref<PdfDriver[]>([])
+const currentDriver = ref('dompdf')
+
+loadData()
+
+async function loadData(): Promise<void> {
+  isFetchingInitialData.value = true
+
+  try {
+    const [driversResponse, configResponse] = await Promise.all([
+      pdfService.getDrivers(),
+      pdfService.getConfig(),
+    ])
+
+    drivers.value = driversResponse
+    configData.value = configResponse
+    currentDriver.value = configResponse.pdf_driver ?? 'dompdf'
+  } finally {
+    isFetchingInitialData.value = false
+  }
+}
+
+const pdfDriver = computed(() => {
+  if (currentDriver.value === 'gotenberg') {
+    return AdminPdfGotenbergDriver
+  }
+
+  return AdminPdfDomDriver
+})
+
+function changeDriver(value: string): void {
+  currentDriver.value = value
+
+  if (configData.value) {
+    configData.value.pdf_driver = value
+  }
+}
+
+async function saveConfig(value: PdfConfig): Promise<void> {
+  isSaving.value = true
+
+  try {
+    const response = await pdfService.saveConfig(value)
+
+    if (response.success) {
+      notificationStore.showNotification({
+        type: 'success',
+        message: t(`settings.pdf.${response.success}`),
+      })
+
+      if (configData.value) {
+        configData.value = {
+          ...configData.value,
+          ...value,
+        }
+      }
+    }
+  } finally {
+    isSaving.value = false
+  }
+}
+</script>
+
+<template>
+  <BaseSettingCard
+    :title="$t('settings.pdf.pdf_configuration')"
+    :description="$t('settings.pdf.section_description')"
+  >
+    <div v-if="configData" class="mt-14">
+      <component
+        :is="pdfDriver"
+        :config-data="configData"
+        :is-saving="isSaving"
+        :drivers="drivers"
+        :is-fetching-initial-data="isFetchingInitialData"
+        @on-change-driver="changeDriver"
+        @submit-data="saveConfig"
+      />
+    </div>
+  </BaseSettingCard>
+</template>

resources/scripts-v2/features/admin/views/settings/AdminUpdateAppView.vue

@@ -0,0 +1,481 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useDialogStore } from '@v2/stores/dialog.store'
+import { useNotificationStore } from '@v2/stores/notification.store'
+import { settingService } from '@v2/api/services/setting.service'
+import { updateService, type UpdateRelease } from '@v2/api/services/update.service'
+import {
+  getErrorTranslationKey,
+  handleApiError,
+} from '@v2/utils/error-handling'
+
+type UpdateStepKey =
+  | 'download'
+  | 'unzip'
+  | 'copy'
+  | 'delete'
+  | 'migrate'
+  | 'finish'
+
+type UpdateStepStatus = 'pending' | 'running' | 'finished' | 'error'
+
+interface UpdateStep {
+  key: UpdateStepKey
+  translationKey: string
+  status: UpdateStepStatus
+  time: string | null
+}
+
+const dialogStore = useDialogStore()
+const notificationStore = useNotificationStore()
+const { t } = useI18n()
+
+const isCheckingForUpdate = ref(false)
+const isUpdating = ref(false)
+const insiderChannel = ref(false)
+const currentVersion = ref('')
+const updateRelease = ref<UpdateRelease | null>(null)
+const isMinorUpdate = ref(false)
+
+const updateSteps = ref<UpdateStep[]>([
+  {
+    key: 'download',
+    translationKey: 'settings.update_app.download_zip_file',
+    status: 'pending',
+    time: null,
+  },
+  {
+    key: 'unzip',
+    translationKey: 'settings.update_app.unzipping_package',
+    status: 'pending',
+    time: null,
+  },
+  {
+    key: 'copy',
+    translationKey: 'settings.update_app.copying_files',
+    status: 'pending',
+    time: null,
+  },
+  {
+    key: 'delete',
+    translationKey: 'settings.update_app.deleting_files',
+    status: 'pending',
+    time: null,
+  },
+  {
+    key: 'migrate',
+    translationKey: 'settings.update_app.running_migrations',
+    status: 'pending',
+    time: null,
+  },
+  {
+    key: 'finish',
+    translationKey: 'settings.update_app.finishing_update',
+    status: 'pending',
+    time: null,
+  },
+])
+
+const isUpdateAvailable = computed<boolean>(() => {
+  return Boolean(updateRelease.value)
+})
+
+const requirementEntries = computed(() => {
+  return Object.entries(updateRelease.value?.extensions ?? {})
+})
+
+const allowToUpdate = computed<boolean>(() => {
+  return requirementEntries.value.every(([, isAvailable]) => isAvailable)
+})
+
+onMounted(async () => {
+  window.addEventListener('beforeunload', preventUnloadDuringUpdate)
+  await loadCurrentVersion()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', preventUnloadDuringUpdate)
+})
+
+async function loadCurrentVersion(): Promise<void> {
+  try {
+    const response = await settingService.getAppVersion()
+    currentVersion.value = response.version
+    insiderChannel.value = response.channel === 'insider'
+  } catch (error: unknown) {
+    showApiError(error)
+  }
+}
+
+async function checkUpdate(): Promise<void> {
+  isCheckingForUpdate.value = true
+
+  try {
+    const response = await updateService.check(
+      insiderChannel.value ? 'insider' : 'stable'
+    )
+
+    if (!response.release) {
+      updateRelease.value = null
+      notificationStore.showNotification({
+        type: 'info',
+        message: t('settings.update_app.latest_message'),
+      })
+      return
+    }
+
+    updateRelease.value = response.release
+    isMinorUpdate.value = Boolean(response.is_minor)
+    resetUpdateProgress()
+  } catch (error: unknown) {
+    updateRelease.value = null
+    showApiError(error)
+  } finally {
+    isCheckingForUpdate.value = false
+  }
+}
+
+async function startUpdate(): Promise<void> {
+  if (!updateRelease.value) {
+    return
+  }
+
+  const confirmed = await 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',
+  })
+
+  if (!confirmed) {
+    return
+  }
+
+  if (!allowToUpdate.value) {
+    notificationStore.showNotification({
+      type: 'error',
+      message: t('settings.update_app.requirements_not_met'),
+    })
+    return
+  }
+
+  resetUpdateProgress()
+  isUpdating.value = true
+
+  let updatePath: string | null = null
+
+  try {
+    for (const step of updateSteps.value) {
+      step.status = 'running'
+
+      switch (step.key) {
+        case 'download': {
+          const response = await updateService.download({
+            version: updateRelease.value.version,
+          })
+
+          updatePath = extractPath(response.path)
+          break
+        }
+
+        case 'unzip': {
+          if (!updatePath) {
+            throw new Error('Missing update package path.')
+          }
+
+          const response = await updateService.unzip({ path: updatePath })
+          updatePath = extractPath(response.path) ?? updatePath
+          break
+        }
+
+        case 'copy': {
+          if (!updatePath) {
+            throw new Error('Missing extracted update path.')
+          }
+
+          const response = await updateService.copy({ path: updatePath })
+          updatePath = extractPath(response.path) ?? updatePath
+          break
+        }
+
+        case 'delete':
+          await updateService.delete({
+            deleted_files: updateRelease.value.deleted_files ?? null,
+          })
+          break
+
+        case 'migrate':
+          await updateService.migrate()
+          break
+
+        case 'finish':
+          await updateService.finish({
+            installed: currentVersion.value,
+            version: updateRelease.value.version,
+          })
+          break
+      }
+
+      step.status = 'finished'
+      step.time = new Date().toLocaleTimeString()
+    }
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: t('settings.update_app.update_success'),
+    })
+
+    setTimeout(() => {
+      window.location.reload()
+    }, 3000)
+  } catch (error: unknown) {
+    const currentStep = updateSteps.value.find((step) => step.status === 'running')
+
+    if (currentStep) {
+      currentStep.status = 'error'
+      currentStep.time = new Date().toLocaleTimeString()
+    }
+
+    showApiError(error)
+  } finally {
+    isUpdating.value = false
+  }
+}
+
+function resetUpdateProgress(): void {
+  updateSteps.value = updateSteps.value.map((step) => ({
+    ...step,
+    status: 'pending',
+    time: null,
+  }))
+}
+
+function statusClass(step: UpdateStep): string {
+  if (step.status === 'finished') {
+    return 'text-status-green bg-success'
+  }
+
+  if (step.status === 'running') {
+    return 'text-primary-700 bg-primary-100'
+  }
+
+  if (step.status === 'error') {
+    return 'text-danger bg-red-200'
+  }
+
+  return 'text-muted bg-surface-muted'
+}
+
+function preventUnloadDuringUpdate(event: BeforeUnloadEvent): void {
+  if (!isUpdating.value) {
+    return
+  }
+
+  event.preventDefault()
+  event.returnValue = 'Update is in progress!'
+}
+
+function extractPath(value: unknown): string | null {
+  if (typeof value === 'string') {
+    return value
+  }
+
+  return null
+}
+
+function showApiError(error: unknown): void {
+  const normalizedError = handleApiError(error)
+  const translationKey = getErrorTranslationKey(normalizedError.message)
+
+  notificationStore.showNotification({
+    type: 'error',
+    message: translationKey ? t(translationKey) : normalizedError.message,
+  })
+}
+</script>
+
+<template>
+  <BaseSettingCard
+    :title="$t('settings.update_app.title')"
+    :description="$t('settings.update_app.description')"
+  >
+    <div class="pb-8">
+      <label class="text-sm 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="my-2 inline-block rounded-md border border-line-default bg-surface-muted p-3 text-sm text-body"
+        >
+          {{ currentVersion }}
+        </div>
+      </div>
+
+      <div class="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-if="isUpdateAvailable && updateRelease && !isUpdating" class="mt-4">
+        <BaseHeading type="heading-title" class="mb-2">
+          {{ $t('settings.update_app.avail_update') }}
+        </BaseHeading>
+
+        <div class="mb-3 rounded-md bg-primary-50 p-4">
+          <div class="flex">
+            <div class="shrink-0">
+              <BaseIcon
+                name="InformationCircleIcon"
+                class="h-5 w-5 text-primary-400"
+              />
+            </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 font-medium input-label">
+          {{ $t('settings.update_app.next_version') }}
+        </label>
+        <br />
+        <div
+          class="my-2 inline-block rounded-md border border-line-default bg-surface-muted p-3 text-sm text-body"
+        >
+          {{ updateRelease.version }}
+          <span v-if="isMinorUpdate" class="ml-2 text-xs text-muted">
+            (minor)
+          </span>
+        </div>
+
+        <div
+          v-if="updateRelease.description"
+          class="update-rich-text mt-4 max-w-[680px] text-sm leading-snug text-muted"
+          v-html="updateRelease.description"
+        />
+
+        <div
+          v-if="updateRelease.changelog"
+          class="update-rich-text mt-4 max-w-[680px] text-sm leading-snug text-muted"
+          v-html="updateRelease.changelog"
+        />
+
+        <div v-if="requirementEntries.length" class="mt-6">
+          <label class="text-sm font-medium input-label">
+            {{ $t('settings.update_app.requirements') }}
+          </label>
+
+          <table class="mt-2 w-full max-w-xl border border-line-default">
+            <tbody>
+              <tr
+                v-for="([extension, available], index) in requirementEntries"
+                :key="extension"
+                :class="index === requirementEntries.length - 1 ? '' : 'border-b border-line-default'"
+              >
+                <td class="p-3 text-sm">
+                  {{ extension }}
+                </td>
+                <td class="p-3 text-right text-sm">
+                  <span
+                    :class="available ? 'bg-success' : 'bg-red-500'"
+                    class="inline-block h-4 w-4 rounded-full"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <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="startUpdate"
+        >
+          {{ $t('settings.update_app.update') }}
+        </BaseButton>
+      </div>
+
+      <div v-if="isUpdating" class="mt-4">
+        <div class="mb-6 flex items-start justify-between">
+          <div>
+            <BaseHeading type="heading-title" class="mb-2">
+              {{ $t('settings.update_app.update_progress') }}
+            </BaseHeading>
+            <p class="max-w-[480px] text-sm leading-snug text-muted">
+              {{ $t('settings.update_app.progress_text') }}
+            </p>
+          </div>
+
+          <BaseIcon
+            name="ArrowPathIcon"
+            class="h-6 w-6 animate-spin text-primary-400"
+          />
+        </div>
+
+        <ul class="w-full list-none p-0">
+          <li
+            v-for="step in updateSteps"
+            :key="step.key"
+            class="flex w-full justify-between border-b border-line-default py-3 last:border-b-0"
+          >
+            <p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
+            <div class="flex items-center">
+              <span v-if="step.time" class="mr-3 text-xs text-muted">
+                {{ step.time }}
+              </span>
+              <span
+                :class="statusClass(step)"
+                class="block rounded-full px-3 py-1 text-sm uppercase"
+              >
+                {{ step.status }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </BaseSettingCard>
+</template>
+
+<style scoped>
+.update-rich-text :deep(ul) {
+  list-style: disc;
+  margin-left: 1.5rem;
+}
+
+.update-rich-text :deep(li) {
+  margin-bottom: 0.25rem;
+}
+</style>

resources/scripts-v2/features/auth/routes.ts

@@ -38,15 +38,15 @@ export const authRoutes: RouteRecordRaw[] = [
           title: 'Reset Password',
         },
       },
+      {
+        path: '/register',
+        name: 'register-with-invitation',
+        component: RegisterWithInvitationView,
+        meta: {
+          requiresAuth: false,
+          title: 'Register',
+        },
+      },
     ],
   },
-  {
-    path: '/register',
-    name: 'register-with-invitation',
-    component: RegisterWithInvitationView,
-    meta: {
-      requiresAuth: false,
-      title: 'Register',
-    },
-  },
 ]

resources/scripts-v2/features/auth/views/ForgotPasswordView.vue

@@ -93,7 +93,11 @@ async function onSubmit(): Promise<void> {
 
     isSent.value = true
   } catch (err: unknown) {
-    handleApiError(err)
+    const normalized = handleApiError(err)
+    notificationStore.showNotification({
+      type: 'error',
+      message: normalized.message,
+    })
   } finally {
     isLoading.value = false
   }

resources/scripts-v2/features/auth/views/LoginView.vue

@@ -115,7 +115,13 @@ async function onSubmit(): Promise<void> {
       type: 'success',
       message: 'Logged in successfully.',
     })
-  } catch {
+  } catch (err: unknown) {
+    const { handleApiError } = await import('../../../utils/error-handling')
+    const normalized = handleApiError(err)
+    notificationStore.showNotification({
+      type: 'error',
+      message: normalized.message,
+    })
     isLoading.value = false
   }
 }

resources/scripts-v2/features/auth/views/RegisterWithInvitationView.vue

@@ -1,123 +1,128 @@
 <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="mt-12 text-center">
+    <BaseSpinner class="w-8 h-8 text-primary-400 mx-auto" />
+    <p class="text-muted mt-4 text-sm">Loading invitation details...</p>
+  </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="mt-12 text-center">
+    <BaseIcon
+      name="ExclamationCircleIcon"
+      class="w-12 h-12 mx-auto text-red-400 mb-4"
+    />
+    <h2 class="text-lg font-semibold text-heading mb-2">
+      Invalid Invitation
+    </h2>
+    <p class="text-sm text-muted mb-4">{{ error }}</p>
+    <router-link
+      to="/login"
+      class="text-sm text-primary-400 hover:text-primary-500"
+    >
+      Go to Login
+    </router-link>
+  </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"
+  <!-- Registration Form -->
+  <div v-else class="mt-12">
+    <div class="mb-8">
+      <h1 class="text-2xl font-semibold text-heading">
+        Create Your Account
+      </h1>
+      <p class="text-sm text-muted mt-2">
+        You've been invited to join
+        <strong class="text-heading">{{ invitationDetails.company_name }}</strong>
+        as <strong class="text-heading">{{ invitationDetails.role_name }}</strong>
+      </p>
+    </div>
+
+    <form @submit.prevent="submitRegistration">
+      <BaseInputGroup
+        label="Name"
+        :error="v$.name.$error && v$.name.$errors[0].$message"
+        class="mb-4"
+        required
+      >
+        <BaseInput
+          v-model="form.name"
+          :invalid="v$.name.$error"
+          focus
+          @input="v$.name.$touch()"
         />
-        <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
+      </BaseInputGroup>
+
+      <BaseInputGroup label="Email" class="mb-4">
+        <BaseInput
+          v-model="form.email"
+          type="email"
+          disabled
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        label="Password"
+        :error="v$.password.$error && v$.password.$errors[0].$message"
+        class="mb-4"
+        required
+      >
+        <BaseInput
+          v-model="form.password"
+          :type="isShowPassword ? 'text' : '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
+        label="Confirm Password"
+        :error="
+          v$.password_confirmation.$error &&
+          v$.password_confirmation.$errors[0].$message
+        "
+        class="mb-4"
+        required
+      >
+        <BaseInput
+          v-model="form.password_confirmation"
+          :type="isShowConfirmPassword ? 'text' : 'password'"
+          :invalid="v$.password_confirmation.$error"
+          @input="v$.password_confirmation.$touch()"
+        >
+          <template #right>
+            <BaseIcon
+              :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
+              class="mr-1 text-muted cursor-pointer"
+              @click="isShowConfirmPassword = !isShowConfirmPassword"
+            />
+          </template>
+        </BaseInput>
+      </BaseInputGroup>
+
+      <div class="mt-5 mb-8">
+        <router-link
+          to="/login"
+          class="text-sm text-primary-400 hover:text-body"
+        >
+          Already have an account? Log in
         </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>
+      <BaseButton
+        :loading="isSubmitting"
+        :disabled="isSubmitting"
+        type="submit"
+      >
+        Create Account & Join
+      </BaseButton>
+    </form>
   </div>
 </template>
 
@@ -127,8 +132,6 @@ import { useRoute, useRouter } from 'vue-router'
 import { helpers, required, minLength, sameAs } from '@vuelidate/validators'
 import { useVuelidate } from '@vuelidate/core'
 import { authService } from '../../../api/services/auth.service'
-import * as ls from '../../../utils/local-storage'
-import MainLogo from '../../../components/icons/MainLogo.vue'
 
 interface InvitationDetailsData {
   email: string
@@ -146,12 +149,10 @@ interface RegistrationForm {
 const route = useRoute()
 const router = useRouter()
 
-const loginPageLogo = computed<string | false>(() => {
-  return (window as Record<string, unknown>).login_page_logo as string || false
-})
-
 const isLoading = ref<boolean>(true)
 const isSubmitting = ref<boolean>(false)
+const isShowPassword = ref<boolean>(false)
+const isShowConfirmPassword = ref<boolean>(false)
 const error = ref<string | null>(null)
 const invitationDetails = ref<InvitationDetailsData>({
   email: '',
@@ -182,7 +183,7 @@ const rules = computed(() => ({
 
 const v$ = useVuelidate(
   rules,
-  computed(() => form)
+  computed(() => form),
 )
 
 const token = computed<string>(() => route.query.invitation as string)
@@ -195,12 +196,11 @@ onMounted(async () => {
   }
 
   try {
-    const response = await authService.getInvitationDetails(token.value)
-    const details = response.data
+    const details = await authService.getInvitationDetails(token.value) as unknown as InvitationDetailsData
     invitationDetails.value = {
       email: details.email,
       company_name: details.company_name,
-      role_name: details.invited_by,
+      role_name: details.role_name,
     }
     form.email = details.email
   } catch {
@@ -217,17 +217,27 @@ async function submitRegistration(): Promise<void> {
   isSubmitting.value = true
 
   try {
-    await authService.registerWithInvitation({
+    const response = await authService.registerWithInvitation({
       name: form.name,
       email: form.email,
       password: form.password,
       password_confirmation: form.password_confirmation,
-      token: token.value,
+      invitation_token: token.value,
     })
 
+    // Save the auth token before navigating (matching old version's pattern)
+    localStorage.setItem('auth.token', `Bearer ${response.token}`)
+
     router.push('/admin/dashboard')
-  } catch {
-    // Validation errors handled by http interceptor
+  } catch (err: unknown) {
+    const { handleApiError } = await import('../../../utils/error-handling')
+    const { useNotificationStore } = await import('../../../stores/notification.store')
+    const normalized = handleApiError(err)
+    const notificationStore = useNotificationStore()
+    notificationStore.showNotification({
+      type: 'error',
+      message: normalized.message,
+    })
   } finally {
     isSubmitting.value = false
   }

resources/scripts-v2/features/auth/views/ResetPasswordView.vue

@@ -157,7 +157,11 @@ async function onSubmit(): Promise<void> {
 
     router.push('/login')
   } catch (err: unknown) {
-    handleApiError(err)
+    const normalized = handleApiError(err)
+    notificationStore.showNotification({
+      type: 'error',
+      message: normalized.message,
+    })
   } finally {
     isLoading.value = false
   }

resources/scripts-v2/features/company/customers/components/CreateCustomFields.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { computed, watch } from 'vue'
 import lodash from 'lodash'
 import moment from 'moment'
 import { customFieldService } from '@v2/api/services/custom-field.service'
@@ -51,16 +51,32 @@ const props = withDefaults(
   }
 )
 
-const customFields = ref<CustomFieldItem[]>([])
+const storeData = computed(() => {
+  const data = props.store[props.storeProp]
+
+  if (!data) {
+    return null
+  }
+
+  if (!Array.isArray(data.customFields)) {
+    data.customFields = []
+  }
+
+  if (!Array.isArray(data.fields)) {
+    data.fields = []
+  }
+
+  return data
+})
 
 getInitialCustomFields()
 
 function mergeExistingValues(): void {
-  if (props.isEdit && props.store[props.storeProp]) {
-    props.store[props.storeProp].fields.forEach((field) => {
-      const existingIndex = props.store[
-        props.storeProp
-      ].customFields.findIndex((f) => f.id === field.custom_field_id)
+  if (props.isEdit && storeData.value) {
+    storeData.value.fields.forEach((field) => {
+      const existingIndex = storeData.value?.customFields.findIndex(
+        (f) => f.id === field.custom_field_id
+      ) ?? -1
 
       if (existingIndex > -1) {
         let value: string | boolean | number | null = field.default_answer
@@ -72,7 +88,7 @@ function mergeExistingValues(): void {
           ).format('YYYY-MM-DD HH:mm')
         }
 
-        props.store[props.storeProp].customFields[existingIndex] = {
+        storeData.value.customFields[existingIndex] = {
           ...field,
           id: field.custom_field_id ?? field.id,
           value,
@@ -89,6 +105,10 @@ function mergeExistingValues(): void {
 }
 
 async function getInitialCustomFields(): Promise<void> {
+  if (!storeData.value) {
+    return
+  }
+
   const res = await customFieldService.list({
     type: props.type ?? undefined,
     limit: 'all',
@@ -99,7 +119,7 @@ async function getInitialCustomFields(): Promise<void> {
     d.value = d.default_answer
   })
 
-  props.store[props.storeProp].customFields = lodash.sortBy(
+  storeData.value.customFields = lodash.sortBy(
     data,
     (_cf: CustomFieldItem) => _cf.order
   )
@@ -108,7 +128,7 @@ async function getInitialCustomFields(): Promise<void> {
 }
 
 watch(
-  () => props.store[props.storeProp]?.fields,
+  () => storeData.value?.fields,
   () => {
     mergeExistingValues()
   }
@@ -118,14 +138,14 @@ watch(
 <template>
   <div
     v-if="
-      store[storeProp] &&
-      store[storeProp].customFields.length > 0 &&
+      storeData &&
+      storeData.customFields.length > 0 &&
       !isLoading
     "
   >
     <BaseInputGrid :layout="gridLayout">
       <SingleField
-        v-for="(field, index) in store[storeProp].customFields"
+        v-for="(field, index) in storeData.customFields"
         :key="field.id"
         :custom-field-scope="customFieldScope"
         :store="store"

resources/scripts-v2/features/company/customers/components/CustomerChart.vue

@@ -4,22 +4,10 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useCustomerStore } from '../store'
 import { useCompanyStore } from '@v2/stores/company.store'
-import { customerService } from '@v2/api/services/customer.service'
 import LineChart from '@v2/components/charts/LineChart.vue'
 import ChartPlaceholder from './CustomerChartPlaceholder.vue'
 import CustomerInfo from './CustomerInfo.vue'
-
-interface ChartData {
-  salesTotal: number
-  totalReceipts: number
-  totalExpenses: number
-  netProfit: number
-  expenseTotals: number[]
-  netProfits: number[]
-  months: string[]
-  receiptTotals: number[]
-  invoiceTotals: number[]
-}
+import type { CustomerStatsChartData } from '@v2/api/services/customer.service'
 
 interface YearOption {
   label: string
@@ -32,7 +20,7 @@ const { t } = useI18n()
 const route = useRoute()
 
 const isLoading = ref<boolean>(false)
-const chartData = reactive<Partial<ChartData>>({})
+const chartData = reactive<Partial<CustomerStatsChartData>>({})
 const years = reactive<YearOption[]>([
   { label: t('dateRange.this_year'), value: 'This year' },
   { label: t('dateRange.previous_year'), value: 'Previous year' },
@@ -58,21 +46,24 @@ watch(
 
 async function loadCustomer(): Promise<void> {
   isLoading.value = false
-  const response = await customerService.getStats(Number(route.params.id))
+  const response = await customerStore.fetchViewCustomer({
+    id: Number(route.params.id),
+  })
 
-  if (response.data) {
-    const meta = (response as Record<string, unknown>).meta as Record<string, unknown> | undefined
-    if (meta?.chartData) {
-      Object.assign(chartData, meta.chartData)
-    }
+  if (response.meta.chartData) {
+    Object.assign(chartData, response.meta.chartData)
   }
 
   isLoading.value = true
 }
 
 async function onChangeYear(data: string): Promise<boolean> {
-  const params: Record<string, unknown> = {
-    id: route.params.id,
+  const params: {
+    id: number
+    previous_year?: boolean
+    this_year?: boolean
+  } = {
+    id: Number(route.params.id),
   }
 
   if (data === 'Previous year') {
@@ -81,14 +72,10 @@ async function onChangeYear(data: string): Promise<boolean> {
     params.this_year = true
   }
 
-  const response = await customerService.getStats(
-    Number(route.params.id),
-    params
-  )
+  const response = await customerStore.fetchViewCustomer(params)
 
-  const meta = (response as Record<string, unknown>).meta as Record<string, unknown> | undefined
-  if (meta?.chartData) {
-    Object.assign(chartData, meta.chartData)
+  if (response.meta.chartData) {
+    Object.assign(chartData, response.meta.chartData)
   }
 
   return true

resources/scripts-v2/features/company/customers/components/CustomerDropdown.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { useCustomerStore } from '../store'
 import { useDialogStore } from '../../../../stores/dialog.store'
 import { useUserStore } from '../../../../stores/user.store'
 
 interface RowData {
-  id: number
+  id?: number | string | null
   [key: string]: unknown
 }
 
@@ -40,7 +41,33 @@ const userStore = useUserStore()
 
 const { t } = useI18n()
 const route = useRoute()
-const router = useRouter()
+
+const isDetailView = computed<boolean>(() => route.name === 'customers.view')
+const customerId = computed<number | null>(() => {
+  const rowId = normalizeCustomerId(props.row?.id)
+  if (rowId !== null) {
+    return rowId
+  }
+
+  if (isDetailView.value) {
+    return normalizeCustomerId(route.params.id)
+  }
+
+  return null
+})
+
+function normalizeCustomerId(value: unknown): number | null {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value
+  }
+
+  if (typeof value === 'string' && value.trim() !== '') {
+    const parsedValue = Number(value)
+    return Number.isFinite(parsedValue) ? parsedValue : null
+  }
+
+  return null
+}
 
 function removeCustomer(id: number): void {
   dialogStore
@@ -63,12 +90,20 @@ function removeCustomer(id: number): void {
       }
     })
 }
+
+function onRemoveCustomer(): void {
+  if (customerId.value === null) {
+    return
+  }
+
+  removeCustomer(customerId.value)
+}
 </script>
 
 <template>
   <BaseDropdown :content-loading="customerStore.isFetchingViewData">
     <template #activator>
-      <BaseButton v-if="route.name === 'customers.view'" variant="primary">
+      <BaseButton v-if="isDetailView" variant="primary">
         <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
       </BaseButton>
       <BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
@@ -76,8 +111,11 @@ function removeCustomer(id: number): void {
 
     <!-- Edit Customer -->
     <router-link
-      v-if="userStore.hasAbilities(ABILITIES.EDIT_CUSTOMER) && row"
-      :to="`/admin/customers/${row.id}/edit`"
+      v-if="
+        userStore.hasAbilities(ABILITIES.EDIT_CUSTOMER) &&
+        customerId !== null
+      "
+      :to="`/admin/customers/${customerId}/edit`"
     >
       <BaseDropdownItem>
         <BaseIcon
@@ -91,11 +129,11 @@ function removeCustomer(id: number): void {
     <!-- View Customer -->
     <router-link
       v-if="
-        route.name !== 'customers.view' &&
+        !isDetailView &&
         userStore.hasAbilities(ABILITIES.VIEW_CUSTOMER) &&
-        row
+        customerId !== null
       "
-      :to="`customers/${row.id}/view`"
+      :to="`/admin/customers/${customerId}/view`"
     >
       <BaseDropdownItem>
         <BaseIcon
@@ -108,8 +146,11 @@ function removeCustomer(id: number): void {
 
     <!-- Delete Customer -->
     <BaseDropdownItem
-      v-if="userStore.hasAbilities(ABILITIES.DELETE_CUSTOMER) && row"
-      @click="removeCustomer(row.id)"
+      v-if="
+        userStore.hasAbilities(ABILITIES.DELETE_CUSTOMER) &&
+        customerId !== null
+      "
+      @click="onRemoveCustomer"
     >
       <BaseIcon
         name="TrashIcon"

resources/scripts-v2/features/company/customers/components/CustomerModal.vue

@@ -137,6 +137,11 @@ function copyAddress(): void {
 }
 
 async function setInitialData(): Promise<void> {
+  await Promise.all([
+    globalStore.fetchCurrencies(),
+    globalStore.fetchCountries(),
+  ])
+
   if (!customerStore.isEdit) {
     customerStore.currentCustomer.currency_id =
       companyStore.selectedCompanyCurrency?.id ?? null
@@ -217,9 +222,9 @@ function closeCustomerModal(): void {
       </div>
     </template>
     <form action="" @submit.prevent="submitCustomerData">
-      <div class="px-6 pb-3">
+      <div class="px-6 pb-3 max-h-[calc(80vh-8rem)] overflow-y-auto">
         <BaseTabGroup>
-          <BaseTab :title="$t('customers.basic_info')" class="!mt-2">
+          <BaseTab :title="$t('customers.basic_info')">
             <BaseInputGrid layout="one-column">
               <BaseInputGroup
                 :label="$t('customers.display_name')"
@@ -403,7 +408,7 @@ function closeCustomerModal(): void {
             </BaseInputGrid>
           </BaseTab>
 
-          <BaseTab :title="$t('customers.billing_address')" class="!mt-2">
+          <BaseTab :title="$t('customers.billing_address')">
             <BaseInputGrid layout="one-column">
               <BaseInputGroup :label="$t('customers.name')">
                 <BaseInput
@@ -505,7 +510,7 @@ function closeCustomerModal(): void {
             </BaseInputGrid>
           </BaseTab>
 
-          <BaseTab :title="$t('customers.shipping_address')" class="!mt-2">
+          <BaseTab :title="$t('customers.shipping_address')">
             <div class="grid md:grid-cols-12">
               <div class="flex justify-end col-span-12">
                 <BaseButton

resources/scripts-v2/features/company/customers/components/types/DateTimeType.vue

@@ -0,0 +1,15 @@
+<template>
+  <BaseDatePicker v-model="date" enable-time />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | null): void }>()
+
+const date = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>

resources/scripts-v2/features/company/customers/components/types/DateType.vue

@@ -0,0 +1,15 @@
+<template>
+  <BaseDatePicker v-model="date" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | Date | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | Date | null): void }>()
+
+const date = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>

resources/scripts-v2/features/company/customers/components/types/DropdownType.vue

@@ -0,0 +1,29 @@
+<template>
+  <BaseMultiselect
+    v-model="inputValue"
+    :options="options"
+    label="name"
+    value-prop="name"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: string | Record<string, unknown> | number | null
+  options?: Array<{ name: string }> | string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  options: () => [],
+})
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: unknown): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>

resources/scripts-v2/features/company/customers/components/types/InputType.vue

@@ -0,0 +1,15 @@
+<template>
+  <BaseInput v-model="inputValue" type="text" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | null): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>

resources/scripts-v2/features/company/customers/components/types/NumberType.vue

@@ -0,0 +1,15 @@
+<template>
+  <BaseInput v-model="inputValue" type="number" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | number | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | number | null): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>

resources/scripts-v2/features/company/customers/components/types/PhoneType.vue

@@ -0,0 +1,15 @@
+<template>
+  <BaseInput v-model="inputValue" type="tel" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | null): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>

resources/scripts-v2/features/company/customers/components/types/SwitchType.vue

@@ -0,0 +1,15 @@
+<template>
+  <BaseSwitch v-model="inputValue" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | number | boolean | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: number): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue === 1,
+  set: (value: boolean) => emit('update:modelValue', value ? 1 : 0),
+})
+</script>

resources/scripts-v2/features/company/customers/components/types/TextAreaType.vue

@@ -0,0 +1,15 @@
+<template>
+  <BaseTextarea v-model="inputValue" rows="2" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | null): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>

resources/scripts-v2/features/company/customers/components/types/TimeType.vue

@@ -0,0 +1,15 @@
+<template>
+  <BaseTimePicker v-model="date" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | Date | Record<string, string> | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | Date | Record<string, string> | null): void }>()
+
+const date = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>

resources/scripts-v2/features/company/customers/components/types/UrlType.vue

@@ -0,0 +1,15 @@
+<template>
+  <BaseInput v-model="inputValue" type="url" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ modelValue?: string | null }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string | null): void }>()
+
+const inputValue = computed({
+  get: () => props.modelValue ?? null,
+  set: (value) => emit('update:modelValue', value),
+})
+</script>

resources/scripts-v2/features/company/customers/routes.ts

@@ -6,6 +6,7 @@ const customerRoutes: RouteRecordRaw[] = [
     name: 'customers.index',
     component: () => import('./views/CustomerIndexView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'view-customer',
     },
   },
@@ -14,6 +15,7 @@ const customerRoutes: RouteRecordRaw[] = [
     name: 'customers.create',
     component: () => import('./views/CustomerCreateView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'create-customer',
     },
   },
@@ -22,6 +24,7 @@ const customerRoutes: RouteRecordRaw[] = [
     name: 'customers.edit',
     component: () => import('./views/CustomerCreateView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'edit-customer',
     },
   },
@@ -30,6 +33,7 @@ const customerRoutes: RouteRecordRaw[] = [
     name: 'customers.view',
     component: () => import('./views/CustomerDetailView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'view-customer',
     },
   },

resources/scripts-v2/features/company/customers/store.ts

@@ -5,7 +5,8 @@ import { customerService } from '../../../api/services/customer.service'
 import type {
   CustomerListParams,
   CustomerListResponse,
-  CustomerStatsData,
+  CustomerStatsParams,
+  CustomerStatsResponse,
 } from '../../../api/services/customer.service'
 import { useNotificationStore } from '../../../stores/notification.store'
 import { useGlobalStore } from '../../../stores/global.store'
@@ -47,10 +48,7 @@ export interface CustomerForm {
   password_added?: boolean
 }
 
-export interface CustomerViewData {
-  customer?: Customer
-  [key: string]: unknown
-}
+export type CustomerViewData = Partial<Customer>
 
 function createAddressStub(): CustomerFormAddress {
   return {
@@ -153,13 +151,15 @@ export const useCustomerStore = defineStore('customer', () => {
     }
   }
 
-  async function fetchViewCustomer(params: { id: number }): Promise<ApiResponse<CustomerStatsData>> {
+  async function fetchViewCustomer(
+    params: { id: number } & CustomerStatsParams
+  ): Promise<CustomerStatsResponse> {
     isFetchingViewData.value = true
     try {
-      const response = await customerService.getStats(params.id, params as Record<string, unknown>)
+      const { id, ...queryParams } = params
+      const response = await customerService.getStats(id, queryParams)
       selectedViewCustomer.value = {}
       Object.assign(selectedViewCustomer.value, response.data)
-      setAddressStub(response.data as unknown as Record<string, unknown>)
       isFetchingViewData.value = false
       return response
     } catch (err: unknown) {

resources/scripts-v2/features/company/customers/views/CustomerCreateView.vue

@@ -19,11 +19,7 @@ import { useCompanyStore } from '../../../../stores/company.store'
 import CustomerCustomFields from '@v2/features/company/customers/components/CreateCustomFields.vue'
 import CopyInputField from '@v2/features/company/customers/components/CopyInputField.vue'
 
-// Custom field store - imported from original location
-import { customFieldService } from '@v2/api/services/custom-field.service'
-
 const customerStore = useCustomerStore()
-// Custom fields fetched via service
 const globalStore = useGlobalStore()
 const companyStore = useCompanyStore()
 
@@ -49,6 +45,10 @@ const pageTitle = computed<string>(() =>
   isEdit.value ? t('customers.edit_customer') : t('customers.new_customer')
 )
 
+const hasCustomFields = computed<boolean>(() => {
+  return customerStore.currentCustomer.customFields.length > 0
+})
+
 const rules = computed(() => ({
   currentCustomer: {
     name: {
@@ -709,14 +709,14 @@ async function submitCustomerData(): Promise<void> {
         </div>
 
         <BaseDivider
-          v-if="customFieldStore.customFields.length > 0"
+          v-if="hasCustomFields"
           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"
+            v-if="hasCustomFields"
             class="col-span-5 text-lg font-semibold text-left lg:col-span-1"
           >
             {{ $t('settings.custom_fields.title') }}

resources/scripts-v2/features/company/customers/views/CustomerDetailView.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 import { useCustomerStore } from '../store'
 import { useUserStore } from '../../../../stores/user.store'
 import CustomerDropdown from '../components/CustomerDropdown.vue'
@@ -19,15 +18,12 @@ const ABILITIES = {
 
 const customerStore = useCustomerStore()
 const userStore = useUserStore()
-const { t } = useI18n()
 
 const router = useRouter()
 const route = useRoute()
 
 const pageTitle = computed<string>(() => {
-  return customerStore.selectedViewCustomer.customer
-    ? (customerStore.selectedViewCustomer.customer as { name: string }).name
-    : ''
+  return customerStore.selectedViewCustomer.name ?? ''
 })
 
 const isLoading = computed<boolean>(() => customerStore.isFetchingViewData)

resources/scripts-v2/features/company/dashboard/components/DashboardTable.vue

@@ -16,12 +16,15 @@ interface TableColumn {
 
 const ABILITIES = {
   VIEW_INVOICE: 'view-invoice',
-  VIEW_ESTIMATE: 'view-estimate',
-  DELETE_INVOICE: 'delete-invoice',
+  CREATE_INVOICE: 'create-invoice',
   EDIT_INVOICE: 'edit-invoice',
+  DELETE_INVOICE: 'delete-invoice',
   SEND_INVOICE: 'send-invoice',
+  CREATE_PAYMENT: 'create-payment',
+  VIEW_ESTIMATE: 'view-estimate',
   CREATE_ESTIMATE: 'create-estimate',
   EDIT_ESTIMATE: 'edit-estimate',
+  DELETE_ESTIMATE: 'delete-estimate',
   SEND_ESTIMATE: 'send-estimate',
 } as const
 
@@ -91,6 +94,22 @@ function hasAtleastOneEstimateAbility(): boolean {
     ABILITIES.SEND_ESTIMATE,
   ])
 }
+
+// Invoice ability props
+const canViewInvoice = computed(() => userStore.hasAbilities(ABILITIES.VIEW_INVOICE))
+const canCreateInvoice = computed(() => userStore.hasAbilities(ABILITIES.CREATE_INVOICE))
+const canEditInvoice = computed(() => userStore.hasAbilities(ABILITIES.EDIT_INVOICE))
+const canDeleteInvoice = computed(() => userStore.hasAbilities(ABILITIES.DELETE_INVOICE))
+const canSendInvoice = computed(() => userStore.hasAbilities(ABILITIES.SEND_INVOICE))
+const canCreatePayment = computed(() => userStore.hasAbilities(ABILITIES.CREATE_PAYMENT))
+
+// Estimate ability props
+const canViewEstimate = computed(() => userStore.hasAbilities(ABILITIES.VIEW_ESTIMATE))
+const canCreateEstimate = computed(() => userStore.hasAbilities(ABILITIES.CREATE_ESTIMATE))
+const canEditEstimate = computed(() => userStore.hasAbilities(ABILITIES.EDIT_ESTIMATE))
+const canDeleteEstimate = computed(() => userStore.hasAbilities(ABILITIES.DELETE_ESTIMATE))
+const canSendEstimate = computed(() => userStore.hasAbilities(ABILITIES.SEND_ESTIMATE))
+const canCreateInvoiceFromEstimate = computed(() => userStore.hasAbilities(ABILITIES.CREATE_INVOICE))
 </script>
 
 <template>
@@ -140,7 +159,16 @@ function hasAtleastOneEstimateAbility(): boolean {
             v-if="hasAtleastOneInvoiceAbility()"
             #cell-actions="{ row }"
           >
-            <InvoiceDropdown :row="row.data" :table="invoiceTableComponent" />
+            <InvoiceDropdown
+              :row="row.data"
+              :table="invoiceTableComponent"
+              :can-edit="canEditInvoice"
+              :can-view="canViewInvoice"
+              :can-create="canCreateInvoice"
+              :can-delete="canDeleteInvoice"
+              :can-send="canSendInvoice"
+              :can-create-payment="canCreatePayment"
+            />
           </template>
         </BaseTable>
       </div>
@@ -189,7 +217,16 @@ function hasAtleastOneEstimateAbility(): boolean {
             v-if="hasAtleastOneEstimateAbility()"
             #cell-actions="{ row }"
           >
-            <EstimateDropdown :row="row.data" :table="estimateTableComponent" />
+            <EstimateDropdown
+              :row="row.data"
+              :table="estimateTableComponent"
+              :can-edit="canEditEstimate"
+              :can-view="canViewEstimate"
+              :can-create="canCreateEstimate"
+              :can-delete="canDeleteEstimate"
+              :can-send="canSendEstimate"
+              :can-create-invoice="canCreateInvoiceFromEstimate"
+            />
           </template>
         </BaseTable>
       </div>

resources/scripts-v2/features/company/dashboard/routes.ts

@@ -6,6 +6,7 @@ const dashboardRoutes: RouteRecordRaw[] = [
     name: 'dashboard',
     component: () => import('./views/DashboardView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'dashboard',
     },
   },

resources/scripts-v2/features/company/dashboard/views/DashboardView.vue

@@ -14,9 +14,9 @@ onMounted(() => {
   const meta = route.meta as { ability?: string; isOwner?: boolean }
 
   if (meta.ability && !userStore.hasAbilities(meta.ability)) {
-    router.push({ name: 'account.settings' })
+    router.push({ name: 'settings.account' })
   } else if (meta.isOwner && !userStore.isOwner) {
-    router.push({ name: 'account.settings' })
+    router.push({ name: 'settings.account' })
   }
 })
 </script>

resources/scripts-v2/features/company/estimates/components/EstimateBasicFields.vue

@@ -1,15 +1,14 @@
 <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"
+      class="col-span-6 pr-0"
     />
 
     <BaseInputGrid
-      class="col-span-7 rounded-xl shadow border border-line-light bg-surface p-5"
+      class="col-span-6 rounded-xl shadow border border-line-light bg-surface p-5"
     >
       <BaseInputGroup
         :label="$t('reports.estimates.estimate_date')"

resources/scripts-v2/features/company/estimates/components/EstimateDropdown.vue

@@ -135,6 +135,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useEstimateStore } from '../store'
+import { useDialogStore } from '../../../../stores/dialog.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { Estimate } from '../../../../types/domain/estimate'
 
 interface TableRef {
@@ -163,6 +165,8 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const estimateStore = useEstimateStore()
+const dialogStore = useDialogStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
@@ -177,46 +181,70 @@ const canResendEstimate = computed<boolean>(() => {
   )
 })
 
-async function removeEstimate(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await estimateStore.deleteEstimate({ ids: [props.row.id] })
-  if (res.data) {
-    props.table?.refresh()
-    if (res.data.success) {
-      router.push('/admin/estimates')
+function removeEstimate(): void {
+  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(async (res: boolean) => {
+    if (res) {
+      const response = await estimateStore.deleteEstimate({ ids: [props.row.id] })
+      if (response.data) {
+        props.table?.refresh()
+        if (response.data.success) {
+          router.push('/admin/estimates')
+        }
+        estimateStore.$patch((state) => {
+          state.selectedEstimates = []
+          state.selectAllField = false
+        })
+      }
     }
-    estimateStore.$patch((state) => {
-      state.selectedEstimates = []
-      state.selectAllField = false
-    })
-  }
+  })
 }
 
-async function convertToInvoice(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_conversion'))
-  if (!confirmed) return
-
-  const res = await estimateStore.convertToInvoice(props.row.id)
-  if (res.data) {
-    router.push(`/admin/invoices/${res.data.data.id}/edit`)
-  }
+function convertToInvoice(): void {
+  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(async (res: boolean) => {
+    if (res) {
+      const response = await estimateStore.convertToInvoice(props.row.id)
+      if (response.data) {
+        router.push(`/admin/invoices/${response.data.data.id}/edit`)
+      }
+    }
+  })
 }
 
-async function onMarkAsSent(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_sent'))
-  if (!confirmed) return
-
-  await estimateStore.markAsSent({ id: props.row.id, status: 'SENT' })
-  props.table?.refresh()
+function onMarkAsSent(): void {
+  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(async (res: boolean) => {
+    if (res) {
+      await estimateStore.markAsSent({ id: props.row.id, status: 'SENT' })
+      props.table?.refresh()
+    }
+  })
 }
 
 function sendEstimate(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('estimates.send_estimate'),
     componentName: 'SendEstimateModal',
     id: props.row.id,
@@ -225,20 +253,38 @@ function sendEstimate(): void {
   })
 }
 
-async function onMarkAsAccepted(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_accepted'))
-  if (!confirmed) return
-
-  await estimateStore.markAsAccepted({ id: props.row.id, status: 'ACCEPTED' })
-  props.table?.refresh()
+function onMarkAsAccepted(): void {
+  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(async (res: boolean) => {
+    if (res) {
+      await estimateStore.markAsAccepted({ id: props.row.id, status: 'ACCEPTED' })
+      props.table?.refresh()
+    }
+  })
 }
 
-async function onMarkAsRejected(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_rejected'))
-  if (!confirmed) return
-
-  await estimateStore.markAsRejected({ id: props.row.id, status: 'REJECTED' })
-  props.table?.refresh()
+function onMarkAsRejected(): void {
+  dialogStore.openDialog({
+    title: t('general.are_you_sure'),
+    message: t('estimates.confirm_mark_as_rejected'),
+    yesLabel: t('general.ok'),
+    noLabel: t('general.cancel'),
+    variant: 'danger',
+    hideNoButton: false,
+    size: 'lg',
+  }).then(async (res: boolean) => {
+    if (res) {
+      await estimateStore.markAsRejected({ id: props.row.id, status: 'REJECTED' })
+      props.table?.refresh()
+    }
+  })
 }
 
 function copyPdfUrl(): void {
@@ -253,11 +299,20 @@ function copyPdfUrl(): void {
   })
 }
 
-async function cloneEstimateData(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_clone'))
-  if (!confirmed) return
-
-  const res = await estimateStore.cloneEstimate({ id: props.row.id })
-  router.push(`/admin/estimates/${res.data.data.id}/edit`)
+function cloneEstimateData(): void {
+  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(async (res: boolean) => {
+    if (res) {
+      const response = await estimateStore.cloneEstimate({ id: props.row.id })
+      router.push(`/admin/estimates/${response.data.data.id}/edit`)
+    }
+  })
 }
 </script>

resources/scripts-v2/features/company/estimates/components/SendEstimateModal.vue

@@ -0,0 +1,321 @@
+<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')"
+            :error="v$.body.$error && v$.body.$errors[0].$message"
+            required
+          >
+            <BaseCustomInput
+              v-model="estimateMailForm.body"
+              :fields="['customer', 'company', 'estimate']"
+            />
+          </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="h-5 mr-2"
+          />
+          {{ $t('general.send') }}
+        </BaseButton>
+      </div>
+    </div>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { required, email, helpers } from '@vuelidate/validators'
+import { useVuelidate } from '@vuelidate/core'
+import { useModalStore } from '../../../../stores/modal.store'
+import { useCompanyStore } from '../../../../stores/company.store'
+import { useNotificationStore } from '../../../../stores/notification.store'
+import { useEstimateStore } from '../store'
+
+const modalStore = useModalStore()
+const companyStore = useCompanyStore()
+const notificationStore = useNotificationStore()
+const estimateStore = useEstimateStore()
+
+const { t } = useI18n()
+const isLoading = ref(false)
+const templateUrl = ref<string>('')
+const isPreview = ref(false)
+
+const emit = defineEmits(['update'])
+
+const estimateMailForm = reactive({
+  id: null as number | null,
+  from: null as string | null,
+  to: null as string | null,
+  cc: null as string | null,
+  bcc: null as string | null,
+  subject: t('estimates.new_estimate'),
+  body: null as string | null,
+})
+
+const modalActive = computed(() => {
+  return modalStore.active && modalStore.componentName === 'SendEstimateModal'
+})
+
+const modalData = computed(() => {
+  return modalStore.data as Record<string, unknown> | null
+})
+
+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() {
+  const admin = await companyStore.fetchBasicMailConfig()
+
+  estimateMailForm.id = modalStore.id as number
+
+  if (admin.data) {
+    estimateMailForm.from = (admin.data as Record<string, string>).from_mail
+  }
+
+  if (modalData.value) {
+    const customer = modalData.value.customer as Record<string, string> | undefined
+    if (customer) {
+      estimateMailForm.to = customer.email
+    }
+  }
+
+  estimateMailForm.body =
+    companyStore.selectedCompanySettings.estimate_mail_body
+  estimateMailForm.subject = t('estimates.new_estimate')
+}
+
+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 as unknown as { id: number },
+      )
+      isLoading.value = false
+
+      isPreview.value = true
+      const blob = new Blob([(previewResponse as { data: string }).data], {
+        type: 'text/html',
+      })
+      templateUrl.value = URL.createObjectURL(blob)
+
+      return
+    }
+
+    await estimateStore.sendEstimate(
+      estimateMailForm as unknown as Parameters<typeof estimateStore.sendEstimate>[0],
+    )
+
+    isLoading.value = false
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: 'estimates.estimate_sent_successfully',
+    })
+
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+
+    emit('update')
+    closeSendEstimateModal()
+  } catch (error) {
+    console.error(error)
+    isLoading.value = false
+    notificationStore.showNotification({
+      type: 'error',
+      message: 'estimates.something_went_wrong',
+    })
+  }
+}
+
+function closeSendEstimateModal() {
+  modalStore.closeModal()
+
+  setTimeout(() => {
+    v$.value.$reset()
+    isPreview.value = false
+    templateUrl.value = ''
+  }, 300)
+}
+</script>

resources/scripts-v2/features/company/estimates/routes.ts

@@ -10,6 +10,7 @@ export const estimateRoutes: RouteRecordRaw[] = [
     name: 'estimates.index',
     component: EstimateIndexView,
     meta: {
+      requiresAuth: true,
       ability: 'view-estimate',
       title: 'estimates.title',
     },
@@ -19,6 +20,7 @@ export const estimateRoutes: RouteRecordRaw[] = [
     name: 'estimates.create',
     component: EstimateCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'create-estimate',
       title: 'estimates.new_estimate',
     },
@@ -28,6 +30,7 @@ export const estimateRoutes: RouteRecordRaw[] = [
     name: 'estimates.edit',
     component: EstimateCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'edit-estimate',
       title: 'estimates.edit_estimate',
     },
@@ -37,6 +40,7 @@ export const estimateRoutes: RouteRecordRaw[] = [
     name: 'estimates.view',
     component: EstimateDetailView,
     meta: {
+      requiresAuth: true,
       ability: 'view-estimate',
       title: 'estimates.title',
     },

resources/scripts-v2/features/company/estimates/store.ts

@@ -1,4 +1,6 @@
 import { defineStore } from 'pinia'
+import { useNotificationStore } from '../../../stores/notification.store'
+import { useCompanyStore } from '../../../stores/company.store'
 import { estimateService } from '../../../api/services/estimate.service'
 import type {
   EstimateListParams,
@@ -15,6 +17,7 @@ import type { Customer } from '../../../types/domain/customer'
 import type { Note } from '../../../types/domain/note'
 import type { CustomFieldValue } from '../../../types/domain/custom-field'
 import type { DocumentTax, DocumentItem } from '../../shared/document-form/use-document-calculations'
+import { generateClientId } from '../../../utils'
 
 // ----------------------------------------------------------------
 // Stub factories
@@ -22,11 +25,11 @@ import type { DocumentTax, DocumentItem } from '../../shared/document-form/use-d
 
 function createTaxStub(): DocumentTax {
   return {
-    id: crypto.randomUUID(),
+    id: generateClientId(),
     name: '',
     tax_type_id: 0,
     type: 'GENERAL',
-    amount: 0,
+    amount: null,
     percent: null,
     compound_tax: false,
     calculation_type: null,
@@ -36,7 +39,7 @@ function createTaxStub(): DocumentTax {
 
 function createEstimateItemStub(): DocumentItem {
   return {
-    id: crypto.randomUUID(),
+    id: generateClientId(),
     estimate_id: null,
     item_id: null,
     name: '',
@@ -309,6 +312,13 @@ export const useEstimateStore = defineStore('estimate', {
     async addEstimate(data: Record<string, unknown>): Promise<{ data: { data: Estimate } }> {
       const response = await estimateService.create(data as never)
       this.estimates = [...this.estimates, response.data]
+
+      const notificationStore = useNotificationStore()
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'estimates.created_message',
+      })
+
       return { data: response }
     },
 
@@ -342,6 +352,13 @@ export const useEstimateStore = defineStore('estimate', {
       if (pos !== -1) {
         this.estimates[pos] = response.data
       }
+
+      const notificationStore = useNotificationStore()
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'estimates.updated_message',
+      })
+
       return { data: response }
     },
 
@@ -461,14 +478,17 @@ export const useEstimateStore = defineStore('estimate', {
     async fetchEstimateInitialSettings(
       isEdit: boolean,
       routeParams?: { id?: string; query?: Record<string, string> },
-      companySettings?: Record<string, string>,
+      companySettingsParam?: Record<string, string>,
       companyCurrency?: Currency,
       userSettings?: Record<string, string>,
     ): Promise<void> {
       this.isFetchingInitialSettings = true
 
-      if (companyCurrency) {
-        this.newEstimate.selectedCurrency = companyCurrency
+      const companyStore = useCompanyStore()
+      const companySettings = companySettingsParam ?? companyStore.selectedCompanySettings
+
+      if (companyCurrency || companyStore.selectedCompanyCurrency) {
+        this.newEstimate.selectedCurrency = companyCurrency ?? companyStore.selectedCompanyCurrency!
       }
 
       // If customer is specified in route query

resources/scripts-v2/features/company/estimates/views/EstimateCreateView.vue

@@ -85,6 +85,7 @@
               store-prop="newEstimate"
               :is-mark-as-default="isMarkAsDefault"
             />
+            <SelectTemplateModal />
           </div>
 
           <DocumentTotals
@@ -104,6 +105,7 @@
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import cloneDeep from 'lodash/cloneDeep'
 import {
   required,
   maxLength,
@@ -119,6 +121,7 @@ import {
   DocumentTotals,
   DocumentNotes,
   TemplateSelectButton,
+  SelectTemplateModal,
 } from '../../../shared/document-form'
 
 const estimateStore = useEstimateStore()
@@ -130,7 +133,7 @@ const estimateValidationScope = 'newEstimate'
 const isSaving = ref<boolean>(false)
 const isMarkAsDefault = ref<boolean>(false)
 
-const estimateNoteFieldList = ref<Record<string, unknown> | null>(null)
+const estimateNoteFieldList = ref<string[]>(['customer', 'company', 'estimate'])
 
 const isLoadingContent = computed<boolean>(
   () => estimateStore.isFetchingInitialSettings,
@@ -156,11 +159,7 @@ const rules = {
     required: helpers.withMessage(t('validation.required'), required),
   },
   exchange_rate: {
-    required: requiredIf(() => {
-      helpers.withMessage(t('validation.required'), required)
-      return estimateStore.showExchangeRate
-    }),
-    decimal: helpers.withMessage(t('validation.valid_exchange_rate'), decimal),
+    required: requiredIf(() => estimateStore.showExchangeRate),
   },
 }
 
@@ -193,13 +192,16 @@ async function submitForm(): Promise<void> {
   v$.value.$touch()
 
   if (v$.value.$invalid) {
+    console.log('Estimate form invalid. Errors:', JSON.stringify(
+      v$.value.$errors.map((e: { $property: string; $message: string }) => `${e.$property}: ${e.$message}`)
+    ))
     return
   }
 
   isSaving.value = true
 
   const data: Record<string, unknown> = {
-    ...structuredClone(estimateStore.newEstimate),
+    ...cloneDeep(estimateStore.newEstimate),
     sub_total: estimateStore.getSubTotal,
     total: estimateStore.getTotal,
     tax: estimateStore.getTotalTax,

resources/scripts-v2/features/company/estimates/views/EstimateDetailView.vue

@@ -191,12 +191,9 @@
     </div>
 
     <!-- PDF Preview -->
-    <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>
+    <BasePdfPreview :src="shareableLink" />
+
+    <SendEstimateModal @update="updateSentEstimate" />
   </BasePage>
 </template>
 
@@ -206,7 +203,11 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useEstimateStore } from '../store'
 import EstimateDropdown from '../components/EstimateDropdown.vue'
+import SendEstimateModal from '../components/SendEstimateModal.vue'
 import LoadingIcon from '@v2/components/icons/LoadingIcon.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useDialogStore } from '../../../../stores/dialog.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { Estimate } from '../../../../types/domain/estimate'
 
 interface Props {
@@ -227,10 +228,48 @@ const props = withDefaults(defineProps<Props>(), {
   canCreateInvoice: false,
 })
 
+const ABILITIES = {
+  EDIT: 'edit-estimate',
+  VIEW: 'view-estimate',
+  CREATE: 'create-estimate',
+  DELETE: 'delete-estimate',
+  SEND: 'send-estimate',
+  CREATE_INVOICE: 'create-invoice',
+} as const
+
 const estimateStore = useEstimateStore()
+const userStore = useUserStore()
+const dialogStore = useDialogStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canView = computed<boolean>(() => {
+  return props.canView || userStore.hasAbilities(ABILITIES.VIEW)
+})
+
+const canCreate = computed<boolean>(() => {
+  return props.canCreate || userStore.hasAbilities(ABILITIES.CREATE)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
+const canSend = computed<boolean>(() => {
+  return props.canSend || userStore.hasAbilities(ABILITIES.SEND)
+})
+
+const canCreateInvoice = computed<boolean>(() => {
+  return (
+    props.canCreateInvoice || userStore.hasAbilities(ABILITIES.CREATE_INVOICE)
+  )
+})
+
 const estimateData = ref<Estimate | null>(null)
 const isMarkAsSent = ref<boolean>(false)
 const isLoading = ref<boolean>(false)
@@ -373,29 +412,36 @@ function sortData(): void {
   onSearched()
 }
 
-async function onMarkAsSent(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_mark_as_sent'))
-  if (!confirmed) return
-
-  isMarkAsSent.value = false
-  await estimateStore.markAsSent({
-    id: estimateData.value!.id,
-    status: 'SENT',
+function onMarkAsSent(): void {
+  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(async (res: boolean) => {
+    if (res) {
+      isMarkAsSent.value = false
+      await estimateStore.markAsSent({
+        id: estimateData.value!.id,
+        status: 'SENT',
+      })
+      estimateData.value!.status = 'SENT' as Estimate['status']
+      isMarkAsSent.value = true
+      isMarkAsSent.value = false
+    }
   })
-  estimateData.value!.status = 'SENT' as Estimate['status']
-  isMarkAsSent.value = true
-  isMarkAsSent.value = false
 }
 
 function onSendEstimate(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('estimates.send_estimate'),
     componentName: 'SendEstimateModal',
     id: estimateData.value!.id,
     data: estimateData.value,
+    refreshData: () => loadEstimate(),
   })
 }
 

resources/scripts-v2/features/company/estimates/views/EstimateIndexView.vue

@@ -113,9 +113,9 @@
     <!-- Table -->
     <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"
+        class="relative flex items-center justify-between mt-5 list-none"
       >
-        <BaseTabGroup class="-mb-5" @change="setStatusFilter">
+        <BaseTabGroup @change="setStatusFilter">
           <BaseTab :title="$t('general.all')" filter="" />
           <BaseTab :title="$t('general.draft')" filter="DRAFT" />
           <BaseTab :title="$t('general.sent')" filter="SENT" />
@@ -147,7 +147,7 @@
         :columns="estimateColumns"
         :placeholder-count="estimateStore.totalEstimateCount >= 20 ? 10 : 5"
         :key="tableKey"
-        class="mt-10"
+        class="mt-4"
       >
         <template #header>
           <div class="absolute items-center left-6 top-2.5 select-none">
@@ -183,7 +183,14 @@
         </template>
 
         <template #cell-name="{ row }">
-          <BaseText :text="row.data.customer.name" />
+          <router-link
+            v-if="row.data.customer?.id"
+            :to="`/admin/customers/${row.data.customer.id}/view`"
+            class="font-medium text-primary-500 hover:text-primary-600"
+          >
+            {{ row.data.customer.name }}
+          </router-link>
+          <span v-else>{{ row.data.customer?.name ?? '-' }}</span>
         </template>
 
         <template #cell-status="{ row }">
@@ -221,6 +228,8 @@ import { useI18n } from 'vue-i18n'
 import { debouncedWatch } from '@vueuse/core'
 import { useEstimateStore } from '../store'
 import EstimateDropdown from '../components/EstimateDropdown.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useDialogStore } from '../../../../stores/dialog.store'
 import type { Estimate } from '../../../../types/domain/estimate'
 
 interface Props {
@@ -239,7 +248,17 @@ const props = withDefaults(defineProps<Props>(), {
   canSend: false,
 })
 
+const ABILITIES = {
+  CREATE: 'create-estimate',
+  EDIT: 'edit-estimate',
+  VIEW: 'view-estimate',
+  DELETE: 'delete-estimate',
+  SEND: 'send-estimate',
+} as const
+
 const estimateStore = useEstimateStore()
+const userStore = useUserStore()
+const dialogStore = useDialogStore()
 const { t } = useI18n()
 
 const tableRef = ref<{ refresh: () => void } | null>(null)
@@ -289,8 +308,28 @@ const selectField = computed<number[]>({
   },
 })
 
+const canCreate = computed<boolean>(() => {
+  return props.canCreate || userStore.hasAbilities(ABILITIES.CREATE)
+})
+
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canView = computed<boolean>(() => {
+  return props.canView || userStore.hasAbilities(ABILITIES.VIEW)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
+const canSend = computed<boolean>(() => {
+  return props.canSend || userStore.hasAbilities(ABILITIES.SEND)
+})
+
 const hasAtLeastOneAbility = computed<boolean>(() => {
-  return props.canCreate || props.canEdit || props.canView || props.canSend
+  return canCreate.value || canEdit.value || canView.value || canSend.value
 })
 
 interface TableColumn {
@@ -432,18 +471,27 @@ function toggleFilter(): void {
   showFilters.value = !showFilters.value
 }
 
-async function removeMultipleEstimates(): Promise<void> {
-  const confirmed = window.confirm(t('estimates.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await estimateStore.deleteMultipleEstimates()
-  if (res.data) {
-    refreshTable()
-    estimateStore.$patch((state) => {
-      state.selectedEstimates = []
-      state.selectAllField = false
-    })
-  }
+function removeMultipleEstimates(): void {
+  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(async (res: boolean) => {
+    if (res) {
+      const response = await estimateStore.deleteMultipleEstimates()
+      if (response.data) {
+        refreshTable()
+        estimateStore.$patch((state) => {
+          state.selectedEstimates = []
+          state.selectAllField = false
+        })
+      }
+    }
+  })
 }
 
 function setActiveTab(val: string): void {

resources/scripts-v2/features/company/expenses/components/ExpenseCategoryDropdown.vue

@@ -26,6 +26,8 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { useDialogStore } from '../../../../stores/dialog.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { ExpenseCategory } from '../../../../types/domain/expense'
 
 interface TableRef {
@@ -48,12 +50,11 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { t } = useI18n()
+const dialogStore = useDialogStore()
+const modalStore = useModalStore()
 
 function editExpenseCategory(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('settings.expense_category.edit_category'),
     componentName: 'CategoryModal',
     refreshData: props.loadData,
@@ -61,22 +62,31 @@ function editExpenseCategory(): void {
   })
 }
 
-async function removeExpenseCategory(): Promise<void> {
-  const confirmed = window.confirm(
-    t('settings.expense_category.confirm_delete'),
-  )
-  if (!confirmed) return
-
-  try {
-    const { expenseService } = await import(
-      '../../../../api/services/expense.service'
-    )
-    const response = await expenseService.deleteCategory(props.row.id)
-    if (response.success) {
-      props.loadData?.()
-    }
-  } catch {
-    props.loadData?.()
-  }
+function removeExpenseCategory(): void {
+  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 (res: boolean) => {
+      if (res) {
+        try {
+          const { expenseService } = await import(
+            '../../../../api/services/expense.service'
+          )
+          const response = await expenseService.deleteCategory(props.row.id)
+          if (response.success) {
+            props.loadData?.()
+          }
+        } catch {
+          props.loadData?.()
+        }
+      }
+    })
 }
 </script>

resources/scripts-v2/features/company/expenses/components/ExpenseDropdown.vue

@@ -29,6 +29,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { useExpenseStore } from '../store'
+import { useDialogStore } from '../../../../stores/dialog.store'
 import type { Expense } from '../../../../types/domain/expense'
 
 interface TableRef {
@@ -51,15 +52,27 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const expenseStore = useExpenseStore()
+const dialogStore = useDialogStore()
 const { t } = useI18n()
 
-async function removeExpense(): Promise<void> {
-  const confirmed = window.confirm(t('expenses.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await expenseStore.deleteExpense({ ids: [props.row.id] })
-  if (res) {
-    props.loadData?.()
-  }
+function removeExpense(): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('expenses.confirm_delete'),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        const response = await expenseStore.deleteExpense({ ids: [props.row.id] })
+        if (response) {
+          props.loadData?.()
+        }
+      }
+    })
 }
 </script>

resources/scripts-v2/features/company/expenses/routes.ts

@@ -9,6 +9,7 @@ export const expenseRoutes: RouteRecordRaw[] = [
     name: 'expenses.index',
     component: ExpenseIndexView,
     meta: {
+      requiresAuth: true,
       ability: 'view-expense',
       title: 'expenses.title',
     },
@@ -18,6 +19,7 @@ export const expenseRoutes: RouteRecordRaw[] = [
     name: 'expenses.create',
     component: ExpenseCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'create-expense',
       title: 'expenses.new_expense',
     },
@@ -27,6 +29,7 @@ export const expenseRoutes: RouteRecordRaw[] = [
     name: 'expenses.edit',
     component: ExpenseCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'edit-expense',
       title: 'expenses.edit_expense',
     },

resources/scripts-v2/features/company/expenses/views/ExpenseIndexView.vue

@@ -182,9 +182,14 @@
         </template>
 
         <template #cell-user_name="{ row }">
-          <BaseText
-            :text="row.data.customer ? row.data.customer.name : '-'"
-          />
+          <router-link
+            v-if="row.data.customer?.id"
+            :to="`/admin/customers/${row.data.customer.id}/view`"
+            class="font-medium text-primary-500 hover:text-primary-600"
+          >
+            {{ row.data.customer.name }}
+          </router-link>
+          <span v-else>-</span>
         </template>
 
         <template #cell-notes="{ row }">
@@ -215,6 +220,8 @@ import { useI18n } from 'vue-i18n'
 import { debouncedWatch } from '@vueuse/core'
 import { useExpenseStore } from '../store'
 import ExpenseDropdown from '../components/ExpenseDropdown.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useDialogStore } from '../../../../stores/dialog.store'
 import type { Expense, ExpenseCategory } from '../../../../types/domain/expense'
 
 interface Props {
@@ -229,15 +236,35 @@ const props = withDefaults(defineProps<Props>(), {
   canDelete: false,
 })
 
+const ABILITIES = {
+  CREATE: 'create-expense',
+  EDIT: 'edit-expense',
+  DELETE: 'delete-expense',
+} as const
+
 const expenseStore = useExpenseStore()
+const userStore = useUserStore()
+const dialogStore = useDialogStore()
 const { t } = useI18n()
 
 const tableRef = ref<{ refresh: () => void } | null>(null)
 const showFilters = ref<boolean>(false)
 const isFetchingInitialData = ref<boolean>(true)
 
+const canCreate = computed<boolean>(() => {
+  return props.canCreate || userStore.hasAbilities(ABILITIES.CREATE)
+})
+
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
 const hasAtLeastOneAbility = computed<boolean>(() => {
-  return props.canDelete || props.canEdit
+  return canDelete.value || canEdit.value
 })
 
 interface ExpenseFilters {
@@ -402,13 +429,24 @@ function toggleFilter(): void {
   showFilters.value = !showFilters.value
 }
 
-async function removeMultipleExpenses(): Promise<void> {
-  const confirmed = window.confirm(t('expenses.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await expenseStore.deleteMultipleExpenses()
-  if (res.data) {
-    refreshTable()
-  }
+function removeMultipleExpenses(): void {
+  dialogStore
+    .openDialog({
+      title: t('general.are_you_sure'),
+      message: t('expenses.confirm_delete'),
+      yesLabel: t('general.ok'),
+      noLabel: t('general.cancel'),
+      variant: 'danger',
+      hideNoButton: false,
+      size: 'lg',
+    })
+    .then(async (res: boolean) => {
+      if (res) {
+        const response = await expenseStore.deleteMultipleExpenses()
+        if (response.data) {
+          refreshTable()
+        }
+      }
+    })
 }
 </script>

resources/scripts-v2/features/company/invoices/components/InvoiceBasicFields.vue

@@ -1,15 +1,21 @@
 <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"
+      class="col-span-12 lg:col-span-6 pr-0"
+    />
+
+    <RecurringFields
+      v-if="isRecurring"
+      :is-loading="isLoading"
+      :is-edit="isEdit"
     />
 
     <BaseInputGrid
-      class="col-span-12 lg:col-span-7 rounded-xl shadow border border-line-light bg-surface p-5"
+      v-else
+      class="col-span-12 lg:col-span-6 rounded-xl shadow border border-line-light bg-surface p-5"
     >
       <BaseInputGroup
         :label="$t('invoices.invoice_date')"
@@ -68,6 +74,7 @@
 import { computed } from 'vue'
 import { ExchangeRateConverter } from '../../../shared/document-form'
 import { useInvoiceStore } from '../store'
+import RecurringFields from './RecurringFields.vue'
 
 interface ValidationField {
   $error: boolean
@@ -79,12 +86,14 @@ interface Props {
   v: Record<string, ValidationField>
   isLoading?: boolean
   isEdit?: boolean
+  isRecurring?: boolean
   companySettings?: Record<string, string>
 }
 
 const props = withDefaults(defineProps<Props>(), {
   isLoading: false,
   isEdit: false,
+  isRecurring: false,
   companySettings: () => ({}),
 })
 

resources/scripts-v2/features/company/invoices/components/InvoiceDropdown.vue

@@ -65,7 +65,7 @@
     <!-- Record Payment -->
     <router-link :to="`/admin/payments/${row.id}/create`">
       <BaseDropdownItem
-        v-if="row.status === 'SENT' && !isDetailView"
+        v-if="row.status === 'SENT' && !isDetailView && canCreatePayment"
       >
         <BaseIcon
           name="CreditCardIcon"
@@ -109,6 +109,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useInvoiceStore } from '../store'
+import { useDialogStore } from '../../../../stores/dialog.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { Invoice } from '../../../../types/domain/invoice'
 
 interface TableRef {
@@ -124,6 +126,7 @@ interface Props {
   canCreate?: boolean
   canDelete?: boolean
   canSend?: boolean
+  canCreatePayment?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -134,9 +137,12 @@ const props = withDefaults(defineProps<Props>(), {
   canCreate: false,
   canDelete: false,
   canSend: false,
+  canCreatePayment: false,
 })
 
 const invoiceStore = useInvoiceStore()
+const dialogStore = useDialogStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
@@ -158,43 +164,66 @@ const canSendInvoice = computed<boolean>(() => {
   )
 })
 
-async function removeInvoice(): Promise<void> {
-  // In v2, use a dialog composable or store
-  const confirmed = window.confirm(t('invoices.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await invoiceStore.deleteInvoice({ ids: [props.row.id] })
-  if (res.data.success) {
-    router.push('/admin/invoices')
-    props.table?.refresh()
-    invoiceStore.$patch((state) => {
-      state.selectedInvoices = []
-      state.selectAllField = false
-    })
-  }
+function removeInvoice(): void {
+  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: boolean) => {
+    if (res) {
+      const response = await invoiceStore.deleteInvoice({ ids: [props.row.id] })
+      if (response.data.success) {
+        router.push('/admin/invoices')
+        props.table?.refresh()
+        invoiceStore.$patch((state) => {
+          state.selectedInvoices = []
+          state.selectAllField = false
+        })
+      }
+    }
+  })
 }
 
-async function cloneInvoiceData(): Promise<void> {
-  const confirmed = window.confirm(t('invoices.confirm_clone'))
-  if (!confirmed) return
-
-  const res = await invoiceStore.cloneInvoice({ id: props.row.id })
-  router.push(`/admin/invoices/${res.data.data.id}/edit`)
+function cloneInvoiceData(): void {
+  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(async (res: boolean) => {
+    if (res) {
+      const response = await invoiceStore.cloneInvoice({ id: props.row.id })
+      router.push(`/admin/invoices/${response.data.data.id}/edit`)
+    }
+  })
 }
 
-async function onMarkAsSent(): Promise<void> {
-  const confirmed = window.confirm(t('invoices.invoice_mark_as_sent'))
-  if (!confirmed) return
-
-  await invoiceStore.markAsSent({ id: props.row.id, status: 'SENT' })
-  props.table?.refresh()
+function onMarkAsSent(): void {
+  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 (res: boolean) => {
+    if (res) {
+      await invoiceStore.markAsSent({ id: props.row.id, status: 'SENT' })
+      props.table?.refresh()
+    }
+  })
 }
 
 function sendInvoice(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('invoices.send_invoice'),
     componentName: 'SendInvoiceModal',
     id: props.row.id,

resources/scripts-v2/features/company/invoices/components/RecurringFields.vue

@@ -0,0 +1,234 @@
+<template>
+  <div
+    class="col-span-12 lg:col-span-6 rounded-xl shadow border border-line-light bg-surface p-5"
+  >
+    <!-- Send Automatically -->
+    <BaseSwitchSection
+      v-model="recurringInvoiceStore.newRecurringInvoice.send_automatically"
+      :title="$t('recurring_invoices.send_automatically')"
+      :description="$t('recurring_invoices.send_automatically_desc')"
+    />
+
+    <BaseDivider class="my-4" />
+
+    <!-- Schedule -->
+    <BaseInputGrid>
+      <BaseInputGroup
+        :label="$t('recurring_invoices.starts_at')"
+        :content-loading="isLoading"
+        required
+      >
+        <BaseDatePicker
+          v-model="recurringInvoiceStore.newRecurringInvoice.starts_at"
+          :content-loading="isLoading"
+          :calendar-button="true"
+          calendar-button-icon="calendar"
+          @change="getNextInvoiceDate()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('recurring_invoices.next_invoice_date')"
+        :content-loading="isLoading"
+      >
+        <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.frequency.select_frequency')"
+        required
+        :content-loading="isLoading"
+      >
+        <BaseMultiselect
+          v-model="recurringInvoiceStore.newRecurringInvoice.selectedFrequency"
+          :content-loading="isLoading"
+          :options="recurringInvoiceStore.frequencies"
+          label="label"
+          object
+          @change="getNextInvoiceDate"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        v-if="isCustomFrequency"
+        :label="$t('recurring_invoices.frequency.title')"
+        :content-loading="isLoading"
+        required
+      >
+        <BaseInput
+          v-model="recurringInvoiceStore.newRecurringInvoice.frequency"
+          :content-loading="isLoading"
+          :disabled="!isCustomFrequency"
+          :loading="isLoadingNextDate"
+          @update:model-value="debounceNextDate"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('recurring_invoices.limit_by')"
+        :content-loading="isLoading"
+        required
+      >
+        <BaseMultiselect
+          v-model="recurringInvoiceStore.newRecurringInvoice.limit_by"
+          :content-loading="isLoading"
+          :options="limits"
+          label="label"
+          value-prop="value"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        v-if="hasLimitBy('DATE')"
+        :label="$t('recurring_invoices.limit_date')"
+        :content-loading="isLoading"
+        :required="hasLimitBy('DATE')"
+      >
+        <BaseDatePicker
+          v-model="recurringInvoiceStore.newRecurringInvoice.limit_date"
+          :content-loading="isLoading"
+          calendar-button-icon="calendar"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        v-if="hasLimitBy('COUNT')"
+        :label="$t('recurring_invoices.count')"
+        :content-loading="isLoading"
+        :required="hasLimitBy('COUNT')"
+      >
+        <BaseInput
+          v-model="recurringInvoiceStore.newRecurringInvoice.limit_count"
+          :content-loading="isLoading"
+          type="number"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup
+        :label="$t('recurring_invoices.status')"
+        required
+        :content-loading="isLoading"
+      >
+        <BaseMultiselect
+          v-model="recurringInvoiceStore.newRecurringInvoice.status"
+          :options="statusOptions"
+          :content-loading="isLoading"
+          :placeholder="$t('recurring_invoices.select_a_status')"
+          value-prop="value"
+          label="key"
+        />
+      </BaseInputGroup>
+    </BaseInputGrid>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useDebounceFn } from '@vueuse/core'
+import { useRecurringInvoiceStore } from '@v2/features/company/recurring-invoices/store'
+import type { FrequencyOption } from '@v2/features/company/recurring-invoices/store'
+
+interface Props {
+  isLoading?: boolean
+  isEdit?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLoading: false,
+  isEdit: false,
+})
+
+const recurringInvoiceStore = useRecurringInvoiceStore()
+const { t } = useI18n()
+
+const isLoadingNextDate = ref<boolean>(false)
+
+interface LimitOption {
+  label: string
+  value: string
+}
+
+const limits = reactive<LimitOption[]>([
+  { label: t('recurring_invoices.limit.none'), value: 'NONE' },
+  { label: t('recurring_invoices.limit.date'), value: 'DATE' },
+  { label: t('recurring_invoices.limit.count'), value: 'COUNT' },
+])
+
+interface StatusOption {
+  key: string
+  value: string
+}
+
+const statusOptions = computed<StatusOption[]>(() => {
+  if (props.isEdit) {
+    return [
+      { key: t('recurring_invoices.active'), value: 'ACTIVE' },
+      { key: t('recurring_invoices.on_hold'), value: 'ON_HOLD' },
+      { key: t('recurring_invoices.completed'), value: 'COMPLETED' },
+    ]
+  }
+  return [
+    { key: t('recurring_invoices.active'), value: 'ACTIVE' },
+    { key: t('recurring_invoices.on_hold'), value: 'ON_HOLD' },
+  ]
+})
+
+const isCustomFrequency = computed<boolean>(() => {
+  return (
+    recurringInvoiceStore.newRecurringInvoice.selectedFrequency != null &&
+    recurringInvoiceStore.newRecurringInvoice.selectedFrequency.value ===
+      'CUSTOM'
+  )
+})
+
+watch(
+  () => recurringInvoiceStore.newRecurringInvoice.selectedFrequency,
+  (newValue: FrequencyOption | null) => {
+    if (!recurringInvoiceStore.isFetchingInitialSettings) {
+      if (newValue && newValue.value !== 'CUSTOM') {
+        recurringInvoiceStore.newRecurringInvoice.frequency = newValue.value
+      } else {
+        recurringInvoiceStore.newRecurringInvoice.frequency = null
+      }
+    }
+  },
+)
+
+onMounted(() => {
+  getNextInvoiceDate()
+})
+
+function hasLimitBy(limitBy: string): boolean {
+  return recurringInvoiceStore.newRecurringInvoice.limit_by === limitBy
+}
+
+const debounceNextDate = useDebounceFn(() => {
+  getNextInvoiceDate()
+}, 500)
+
+async function getNextInvoiceDate(): Promise<void> {
+  const val = recurringInvoiceStore.newRecurringInvoice.frequency
+  if (!val) return
+
+  isLoadingNextDate.value = true
+
+  try {
+    await recurringInvoiceStore.fetchRecurringInvoiceFrequencyDate({
+      starts_at: recurringInvoiceStore.newRecurringInvoice.starts_at,
+      frequency: val,
+    })
+  } catch {
+    // Error handled in store
+  } finally {
+    isLoadingNextDate.value = false
+  }
+}
+</script>

resources/scripts-v2/features/company/invoices/components/SendInvoiceModal.vue

@@ -0,0 +1,378 @@
+<template>
+  <BaseModal
+    :show="modalActive"
+    @close="closeModal"
+    @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="closeModal"
+        />
+      </div>
+    </template>
+
+    <form v-if="!isPreview" @submit.prevent>
+      <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 as string) : undefined
+            "
+          >
+            <BaseInput
+              v-model="form.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 as string) : undefined
+            "
+          >
+            <BaseInput
+              v-model="form.to"
+              type="text"
+              :invalid="v$.to.$error"
+              @input="v$.to.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('general.cc')"
+            :error="
+              v$.cc.$error ? (v$.cc.$errors[0]?.$message as string) : undefined
+            "
+          >
+            <BaseInput
+              v-model="form.cc"
+              type="text"
+              :invalid="v$.cc.$error"
+              @input="v$.cc.$touch()"
+              placeholder="Optional: CC recipient"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('general.bcc')"
+            :error="
+              v$.bcc.$error ? (v$.bcc.$errors[0]?.$message as string) : undefined
+            "
+          >
+            <BaseInput
+              v-model="form.bcc"
+              type="text"
+              :invalid="v$.bcc.$error"
+              @input="v$.bcc.$touch()"
+              placeholder="Optional: BCC recipient"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('general.subject')"
+            required
+            :error="
+              v$.subject.$error
+                ? (v$.subject.$errors[0]?.$message as string)
+                : undefined
+            "
+          >
+            <BaseInput
+              v-model="form.subject"
+              type="text"
+              :invalid="v$.subject.$error"
+              @input="v$.subject.$touch()"
+            />
+          </BaseInputGroup>
+
+          <BaseInputGroup
+            :label="$t('general.body')"
+            required
+            :error="
+              v$.body.$error ? (v$.body.$errors[0]?.$message as string) : undefined
+            "
+          >
+            <BaseCustomInput
+              v-model="form.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="closeModal"
+        >
+          {{ $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"
+        />
+      </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="closeModal"
+        >
+          {{ $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 lang="ts">
+import { ref, computed, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useVuelidate } from '@vuelidate/core'
+import { required, email, helpers } from '@vuelidate/validators'
+import { useModalStore } from '../../../../stores/modal.store'
+import { useCompanyStore } from '../../../../stores/company.store'
+import { useNotificationStore } from '../../../../stores/notification.store'
+import { useInvoiceStore } from '../store'
+
+interface InvoiceMailForm {
+  id: number | string | null
+  from: string | null
+  to: string | null
+  cc: string | null
+  bcc: string | null
+  subject: string
+  body: string | null
+}
+
+type FieldType = 'customer' | 'customerCustom' | 'invoice' | 'invoiceCustom' | 'company'
+
+const modalStore = useModalStore()
+const companyStore = useCompanyStore()
+const notificationStore = useNotificationStore()
+const invoiceStore = useInvoiceStore()
+const { t } = useI18n()
+
+const isLoading = ref<boolean>(false)
+const templateUrl = ref<string>('')
+const isPreview = ref<boolean>(false)
+
+const invoiceMailFields = ref<FieldType[]>([
+  'customer',
+  'customerCustom',
+  'invoice',
+  'invoiceCustom',
+  'company',
+])
+
+const form = reactive<InvoiceMailForm>({
+  id: null,
+  from: null,
+  to: null,
+  cc: null,
+  bcc: null,
+  subject: t('invoices.new_invoice'),
+  body: null,
+})
+
+const modalActive = computed<boolean>(() => {
+  return modalStore.active && modalStore.componentName === 'SendInvoiceModal'
+})
+
+const modalTitle = computed<string>(() => {
+  return modalStore.title
+})
+
+const modalData = computed<Record<string, unknown> | null>(() => {
+  return modalStore.data as Record<string, unknown> | null
+})
+
+const rules = computed(() => ({
+  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, form)
+
+function cancelPreview(): void {
+  isPreview.value = false
+}
+
+async function setInitialData(): Promise<void> {
+  try {
+    const admin = await companyStore.fetchBasicMailConfig()
+
+    form.id = modalStore.id
+
+    if (admin?.data) {
+      form.from = (admin.data as Record<string, unknown>).from_mail as string
+    }
+
+    if (modalData.value?.customer) {
+      const customer = modalData.value.customer as Record<string, unknown>
+      form.to = (customer.email as string) ?? null
+    }
+
+    form.body = companyStore.selectedCompanySettings.invoice_mail_body ?? null
+  } catch {
+    // Silently handle initialization errors
+  }
+}
+
+async function submitForm(): Promise<void> {
+  v$.value.$touch()
+
+  if (v$.value.$invalid) {
+    return
+  }
+
+  try {
+    isLoading.value = true
+
+    if (!isPreview.value) {
+      const previewResponse = await invoiceStore.previewInvoice({
+        id: form.id as number,
+        from: form.from,
+        to: form.to,
+        cc: form.cc,
+        bcc: form.bcc,
+        subject: form.subject,
+        body: form.body,
+      })
+      isLoading.value = false
+
+      isPreview.value = true
+      const blob = new Blob(
+        [(previewResponse as { data: string }).data ?? previewResponse],
+        { type: 'text/html' },
+      )
+      templateUrl.value = URL.createObjectURL(blob)
+      return
+    }
+
+    await invoiceStore.sendInvoice({
+      id: form.id as number,
+      from: form.from,
+      to: form.to,
+      cc: form.cc,
+      bcc: form.bcc,
+      subject: form.subject,
+      body: form.body,
+    })
+
+    isLoading.value = false
+
+    notificationStore.showNotification({
+      type: 'success',
+      message: 'invoices.invoice_sent_successfully',
+    })
+
+    if (modalStore.refreshData) {
+      modalStore.refreshData()
+    }
+
+    closeModal()
+  } catch {
+    isLoading.value = false
+    notificationStore.showNotification({
+      type: 'error',
+      message: t('invoices.something_went_wrong'),
+    })
+  }
+}
+
+function closeModal(): void {
+  modalStore.closeModal()
+  setTimeout(() => {
+    v$.value.$reset()
+    isPreview.value = false
+    templateUrl.value = ''
+  }, 300)
+}
+</script>

resources/scripts-v2/features/company/invoices/routes.ts

@@ -10,6 +10,7 @@ export const invoiceRoutes: RouteRecordRaw[] = [
     name: 'invoices.index',
     component: InvoiceIndexView,
     meta: {
+      requiresAuth: true,
       ability: 'view-invoice',
       title: 'invoices.title',
     },
@@ -19,6 +20,7 @@ export const invoiceRoutes: RouteRecordRaw[] = [
     name: 'invoices.create',
     component: InvoiceCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'create-invoice',
       title: 'invoices.new_invoice',
     },
@@ -28,6 +30,7 @@ export const invoiceRoutes: RouteRecordRaw[] = [
     name: 'invoices.edit',
     component: InvoiceCreateView,
     meta: {
+      requiresAuth: true,
       ability: 'edit-invoice',
       title: 'invoices.edit_invoice',
     },
@@ -37,6 +40,7 @@ export const invoiceRoutes: RouteRecordRaw[] = [
     name: 'invoices.view',
     component: InvoiceDetailView,
     meta: {
+      requiresAuth: true,
       ability: 'view-invoice',
       title: 'invoices.title',
     },

resources/scripts-v2/features/company/invoices/store.ts

@@ -1,4 +1,6 @@
 import { defineStore } from 'pinia'
+import { useNotificationStore } from '../../../stores/notification.store'
+import { useCompanyStore } from '../../../stores/company.store'
 import { invoiceService } from '../../../api/services/invoice.service'
 import type {
   InvoiceListParams,
@@ -14,6 +16,7 @@ import type { Customer } from '../../../types/domain/customer'
 import type { Note } from '../../../types/domain/note'
 import type { CustomFieldValue } from '../../../types/domain/custom-field'
 import type { DocumentTax, DocumentItem } from '../../shared/document-form/use-document-calculations'
+import { generateClientId } from '../../../utils'
 
 // ----------------------------------------------------------------
 // Stub factories
@@ -21,11 +24,11 @@ import type { DocumentTax, DocumentItem } from '../../shared/document-form/use-d
 
 function createTaxStub(): DocumentTax {
   return {
-    id: crypto.randomUUID(),
+    id: generateClientId(),
     name: '',
     tax_type_id: 0,
     type: 'GENERAL',
-    amount: 0,
+    amount: null,
     percent: null,
     compound_tax: false,
     calculation_type: null,
@@ -35,7 +38,7 @@ function createTaxStub(): DocumentTax {
 
 function createInvoiceItemStub(): DocumentItem {
   return {
-    id: crypto.randomUUID(),
+    id: generateClientId(),
     invoice_id: null,
     item_id: null,
     name: '',
@@ -219,7 +222,7 @@ export const useInvoiceStore = defineStore('invoice', {
       this.newInvoice = createInvoiceStub()
     },
 
-    async previewInvoice(params: { id: number }): Promise<unknown> {
+    async previewInvoice(params: SendInvoicePayload): Promise<unknown> {
       return invoiceService.sendPreview(params)
     },
 
@@ -305,6 +308,13 @@ export const useInvoiceStore = defineStore('invoice', {
     async addInvoice(data: Record<string, unknown>): Promise<{ data: { data: Invoice } }> {
       const response = await invoiceService.create(data as never)
       this.invoices = [...this.invoices, response.data]
+
+      const notificationStore = useNotificationStore()
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'invoices.created_message',
+      })
+
       return { data: response }
     },
 
@@ -336,6 +346,13 @@ export const useInvoiceStore = defineStore('invoice', {
       if (pos !== -1) {
         this.invoices[pos] = response.data
       }
+
+      const notificationStore = useNotificationStore()
+      notificationStore.showNotification({
+        type: 'success',
+        message: 'invoices.updated_message',
+      })
+
       return { data: response }
     },
 
@@ -440,14 +457,17 @@ export const useInvoiceStore = defineStore('invoice', {
     async fetchInvoiceInitialSettings(
       isEdit: boolean,
       routeParams?: { id?: string; query?: Record<string, string> },
-      companySettings?: Record<string, string>,
+      companySettingsParam?: Record<string, string>,
       companyCurrency?: Currency,
       userSettings?: Record<string, string>,
     ): Promise<void> {
       this.isFetchingInitialSettings = true
 
-      if (companyCurrency) {
-        this.newInvoice.selectedCurrency = companyCurrency
+      const companyStore = useCompanyStore()
+      const companySettings = companySettingsParam ?? companyStore.selectedCompanySettings
+
+      if (companyCurrency || companyStore.selectedCompanyCurrency) {
+        this.newInvoice.selectedCurrency = companyCurrency ?? companyStore.selectedCompanyCurrency!
       }
 
       // If customer is specified in route query

resources/scripts-v2/features/company/invoices/views/InvoiceCreateView.vue

@@ -15,6 +15,12 @@
         </BaseBreadcrumb>
 
         <template #actions>
+          <!-- Make Recurring Toggle -->
+          <div v-if="!isEdit" class="flex items-center mr-4">
+            <BaseSwitch v-model="isRecurring" class="mr-2" />
+            <span class="text-sm font-medium text-heading whitespace-nowrap">{{ $t('recurring_invoices.make_recurring') }}</span>
+          </div>
+
           <router-link
             v-if="isEdit"
             :to="`/invoices/pdf/${invoiceStore.newInvoice.unique_hash}`"
@@ -40,7 +46,7 @@
                 :class="slotProps.class"
               />
             </template>
-            {{ $t('invoices.save_invoice') }}
+            {{ isRecurring ? $t('recurring_invoices.save_invoice') : $t('invoices.save_invoice') }}
           </BaseButton>
         </template>
       </BasePageHeader>
@@ -50,6 +56,7 @@
         :v="v$"
         :is-loading="isLoadingContent"
         :is-edit="isEdit"
+        :is-recurring="isRecurring"
       />
 
       <BaseScrollPane>
@@ -81,6 +88,7 @@
               store-prop="newInvoice"
               :is-mark-as-default="isMarkAsDefault"
             />
+            <SelectTemplateModal />
           </div>
 
           <DocumentTotals
@@ -100,6 +108,7 @@
 import { computed, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import cloneDeep from 'lodash/cloneDeep'
 import {
   required,
   maxLength,
@@ -109,15 +118,18 @@ import {
 } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { useInvoiceStore } from '../store'
+import { useRecurringInvoiceStore } from '@v2/features/company/recurring-invoices/store'
 import InvoiceBasicFields from '../components/InvoiceBasicFields.vue'
 import {
   DocumentItemsTable,
   DocumentTotals,
   DocumentNotes,
   TemplateSelectButton,
+  SelectTemplateModal,
 } from '../../../shared/document-form'
 
 const invoiceStore = useInvoiceStore()
+const recurringInvoiceStore = useRecurringInvoiceStore()
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
@@ -125,40 +137,54 @@ const router = useRouter()
 const invoiceValidationScope = 'newInvoice'
 const isSaving = ref<boolean>(false)
 const isMarkAsDefault = ref<boolean>(false)
+const isRecurring = ref<boolean>(false)
 
-const invoiceNoteFieldList = ref<Record<string, unknown> | null>(null)
+const invoiceNoteFieldList = ref<string[]>(['customer', 'company', 'invoice'])
 
 const isLoadingContent = computed<boolean>(
   () => invoiceStore.isFetchingInvoice || invoiceStore.isFetchingInitialSettings,
 )
 
-const pageTitle = computed<string>(() =>
-  isEdit.value ? t('invoices.edit_invoice') : t('invoices.new_invoice'),
+const pageTitle = computed<string>(() => {
+  if (isRecurringEdit.value) return t('recurring_invoices.edit_invoice')
+  if (isEdit.value) return t('invoices.edit_invoice')
+  return t('invoices.new_invoice')
+})
+
+const isEdit = computed<boolean>(() =>
+  route.name === 'invoices.edit' || route.name === 'recurring-invoices.edit',
 )
 
-const isEdit = computed<boolean>(() => route.name === 'invoices.edit')
+const isRecurringEdit = computed<boolean>(() =>
+  route.name === 'recurring-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(() => {
-      helpers.withMessage(t('validation.required'), required)
-      return invoiceStore.showExchangeRate
-    }),
-    decimal: helpers.withMessage(t('validation.valid_exchange_rate'), decimal),
-  },
-}
+const rules = computed(() => {
+  if (isRecurring.value) {
+    return {
+      customer_id: {
+        required: helpers.withMessage(t('validation.required'), required),
+      },
+    }
+  }
+  return {
+    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(() => invoiceStore.showExchangeRate),
+    },
+  }
+})
 
 const v$ = useVuelidate(
   rules,
@@ -169,10 +195,61 @@ const v$ = useVuelidate(
 // Initialization
 invoiceStore.resetCurrentInvoice()
 v$.value.$reset
-invoiceStore.fetchInvoiceInitialSettings(
-  isEdit.value,
-  { id: route.params.id as string, query: route.query as Record<string, string> },
-)
+
+// Check for recurring mode
+if (route.query.recurring === '1' || isRecurringEdit.value) {
+  isRecurring.value = true
+}
+
+// Initialize recurring store
+recurringInvoiceStore.initFrequencies(t)
+
+if (isRecurringEdit.value) {
+  // Editing a recurring invoice — load its data into both stores
+  recurringInvoiceStore.resetCurrentRecurringInvoice()
+  recurringInvoiceStore.fetchRecurringInvoiceInitialSettings(
+    true,
+    { id: route.params.id as string, query: route.query as Record<string, string> },
+  ).then(() => {
+    // Sync recurring data to invoice store for the shared form fields
+    const ri = recurringInvoiceStore.newRecurringInvoice
+    invoiceStore.newInvoice.customer = ri.customer
+    invoiceStore.newInvoice.customer_id = ri.customer_id
+    invoiceStore.newInvoice.items = ri.items as typeof invoiceStore.newInvoice.items
+    invoiceStore.newInvoice.taxes = ri.taxes as typeof invoiceStore.newInvoice.taxes
+    invoiceStore.newInvoice.notes = ri.notes
+    invoiceStore.newInvoice.discount = ri.discount
+    invoiceStore.newInvoice.discount_type = ri.discount_type as typeof invoiceStore.newInvoice.discount_type
+    invoiceStore.newInvoice.discount_val = ri.discount_val
+    invoiceStore.newInvoice.discount_per_item = ri.discount_per_item
+    invoiceStore.newInvoice.tax_per_item = ri.tax_per_item
+    invoiceStore.newInvoice.tax_included = ri.tax_included
+    invoiceStore.newInvoice.template_name = ri.template_name
+    invoiceStore.newInvoice.currency_id = ri.currency_id as typeof invoiceStore.newInvoice.currency_id
+    invoiceStore.newInvoice.exchange_rate = ri.exchange_rate as typeof invoiceStore.newInvoice.exchange_rate
+    invoiceStore.newInvoice.customFields = ri.customFields as typeof invoiceStore.newInvoice.customFields
+  })
+} else if (!isRecurring.value) {
+  // Normal invoice create/edit
+  invoiceStore.fetchInvoiceInitialSettings(
+    isEdit.value,
+    { id: route.params.id as string, query: route.query as Record<string, string> },
+  )
+} else {
+  // New recurring invoice — just initialize
+  recurringInvoiceStore.resetCurrentRecurringInvoice()
+  invoiceStore.fetchInvoiceInitialSettings(
+    false,
+    { query: route.query as Record<string, string> },
+  )
+}
+
+// Initialize recurring store when toggled on manually
+watch(isRecurring, (newVal) => {
+  if (newVal && !isRecurringEdit.value) {
+    recurringInvoiceStore.resetCurrentRecurringInvoice()
+  }
+})
 
 watch(
   () => invoiceStore.newInvoice.customer,
@@ -189,43 +266,95 @@ async function submitForm(): Promise<void> {
   v$.value.$touch()
 
   if (v$.value.$invalid) {
+    console.log('Invoice form invalid. Errors:', JSON.stringify(
+      v$.value.$errors.map((e: { $property: string; $message: string }) => `${e.$property}: ${e.$message}`)
+    ))
     return
   }
 
   isSaving.value = true
 
-  const data: Record<string, unknown> = {
-    ...structuredClone(invoiceStore.newInvoice),
-    sub_total: invoiceStore.getSubTotal,
-    total: invoiceStore.getTotal,
-    tax: invoiceStore.getTotalTax,
-  }
-
-  const items = data.items as Array<Record<string, unknown>>
-  if (data.discount_per_item === 'YES') {
-    items.forEach((item, index) => {
-      if (item.discount_type === 'fixed') {
-        items[index].discount = (item.discount as number) * 100
-      }
-    })
-  } else {
-    if (data.discount_type === 'fixed') {
-      data.discount = (data.discount as number) * 100
-    }
-  }
-
-  const taxes = data.taxes as Array<Record<string, unknown>>
-  if (data.tax_per_item !== 'YES' && taxes.length) {
-    data.tax_type_ids = taxes.map((tax) => tax.tax_type_id)
-  }
-
   try {
-    const action = isEdit.value
-      ? invoiceStore.updateInvoice
-      : invoiceStore.addInvoice
+    if (isRecurring.value) {
+      const recurringData = recurringInvoiceStore.newRecurringInvoice
+      const invoiceData = invoiceStore.newInvoice
 
-    const response = await action(data)
-    router.push(`/admin/invoices/${response.data.data.id}/view`)
+      // Build clean payload with only backend-expected fields
+      const data: Record<string, unknown> = {
+        // Recurring-specific fields
+        starts_at: recurringData.starts_at,
+        send_automatically: recurringData.send_automatically ? 1 : 0,
+        frequency: recurringData.frequency,
+        status: recurringData.status || 'ACTIVE',
+        limit_by: recurringData.limit_by || 'NONE',
+        limit_count: recurringData.limit_count,
+        limit_date: recurringData.limit_date,
+
+        // Shared fields from invoice form
+        customer_id: invoiceData.customer_id,
+        discount: invoiceData.discount,
+        discount_type: invoiceData.discount_type,
+        discount_val: invoiceData.discount_val,
+        discount_per_item: invoiceData.discount_per_item,
+        tax_per_item: invoiceData.tax_per_item,
+        tax_included: invoiceData.tax_included,
+        sales_tax_type: invoiceData.sales_tax_type,
+        sales_tax_address_type: invoiceData.sales_tax_address_type,
+        notes: invoiceData.notes,
+        template_name: invoiceData.template_name,
+        items: cloneDeep(invoiceData.items),
+        taxes: cloneDeep(invoiceData.taxes),
+        currency_id: invoiceData.currency_id,
+        exchange_rate: invoiceData.exchange_rate,
+        customFields: invoiceData.customFields,
+
+        // Calculated totals
+        sub_total: invoiceStore.getSubTotal,
+        total: invoiceStore.getTotal,
+        tax: invoiceStore.getTotalTax,
+      }
+
+      let response
+      if (isRecurringEdit.value) {
+        data.id = recurringData.id
+        response = await recurringInvoiceStore.updateRecurringInvoice(data)
+      } else {
+        response = await recurringInvoiceStore.addRecurringInvoice(data)
+      }
+      router.push(`/admin/recurring-invoices/${response.data.data.id}/view`)
+    } else {
+      const data: Record<string, unknown> = {
+        ...cloneDeep(invoiceStore.newInvoice),
+        sub_total: invoiceStore.getSubTotal,
+        total: invoiceStore.getTotal,
+        tax: invoiceStore.getTotalTax,
+      }
+
+      const items = data.items as Array<Record<string, unknown>>
+      if (data.discount_per_item === 'YES') {
+        items.forEach((item, index) => {
+          if (item.discount_type === 'fixed') {
+            items[index].discount = (item.discount as number) * 100
+          }
+        })
+      } else {
+        if (data.discount_type === 'fixed') {
+          data.discount = (data.discount as number) * 100
+        }
+      }
+
+      const taxes = data.taxes as Array<Record<string, unknown>>
+      if (data.tax_per_item !== 'YES' && taxes.length) {
+        data.tax_type_ids = taxes.map((tax) => tax.tax_type_id)
+      }
+
+      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)
   }

resources/scripts-v2/features/company/invoices/views/InvoiceDetailView.vue

@@ -16,7 +16,7 @@
         <BaseButton
           v-if="invoiceData.status === 'DRAFT' && canSend"
           variant="primary"
-          class="text-sm"
+          class="text-sm mr-3"
           @click="onSendInvoice"
         >
           {{ $t('invoices.send_invoice') }}
@@ -197,12 +197,9 @@
     </div>
 
     <!-- PDF Preview -->
-    <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>
+    <BasePdfPreview :src="shareableLink" />
+
+    <SendInvoiceModal />
   </BasePage>
 </template>
 
@@ -212,7 +209,11 @@ import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useInvoiceStore } from '../store'
 import InvoiceDropdown from '../components/InvoiceDropdown.vue'
+import SendInvoiceModal from '../components/SendInvoiceModal.vue'
 import LoadingIcon from '@v2/components/icons/LoadingIcon.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useDialogStore } from '../../../../stores/dialog.store'
+import { useModalStore } from '../../../../stores/modal.store'
 import type { Invoice } from '../../../../types/domain/invoice'
 
 interface Props {
@@ -233,10 +234,48 @@ const props = withDefaults(defineProps<Props>(), {
   canCreatePayment: false,
 })
 
+const ABILITIES = {
+  EDIT: 'edit-invoice',
+  VIEW: 'view-invoice',
+  CREATE: 'create-invoice',
+  DELETE: 'delete-invoice',
+  SEND: 'send-invoice',
+  CREATE_PAYMENT: 'create-payment',
+} as const
+
 const invoiceStore = useInvoiceStore()
+const userStore = useUserStore()
+const dialogStore = useDialogStore()
+const modalStore = useModalStore()
 const { t } = useI18n()
 const route = useRoute()
 
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canView = computed<boolean>(() => {
+  return props.canView || userStore.hasAbilities(ABILITIES.VIEW)
+})
+
+const canCreate = computed<boolean>(() => {
+  return props.canCreate || userStore.hasAbilities(ABILITIES.CREATE)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
+const canSend = computed<boolean>(() => {
+  return props.canSend || userStore.hasAbilities(ABILITIES.SEND)
+})
+
+const canCreatePayment = computed<boolean>(() => {
+  return (
+    props.canCreatePayment || userStore.hasAbilities(ABILITIES.CREATE_PAYMENT)
+  )
+})
+
 const invoiceData = ref<Invoice | null>(null)
 const isMarkAsSent = ref<boolean>(false)
 const isLoading = ref<boolean>(false)
@@ -274,29 +313,36 @@ watch(route, (to) => {
   }
 })
 
-async function onMarkAsSent(): Promise<void> {
-  const confirmed = window.confirm(t('invoices.invoice_mark_as_sent'))
-  if (!confirmed) return
-
-  isMarkAsSent.value = false
-  await invoiceStore.markAsSent({
-    id: invoiceData.value!.id,
-    status: 'SENT',
+function onMarkAsSent(): void {
+  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 (res: boolean) => {
+    if (res) {
+      isMarkAsSent.value = false
+      await invoiceStore.markAsSent({
+        id: invoiceData.value!.id,
+        status: 'SENT',
+      })
+      invoiceData.value!.status = 'SENT' as Invoice['status']
+      isMarkAsSent.value = true
+      isMarkAsSent.value = false
+    }
   })
-  invoiceData.value!.status = 'SENT' as Invoice['status']
-  isMarkAsSent.value = true
-  isMarkAsSent.value = false
 }
 
 function onSendInvoice(): void {
-  const modalStore = (window as Record<string, unknown>).__modalStore as
-    | { openModal: (opts: Record<string, unknown>) => void }
-    | undefined
-  modalStore?.openModal({
+  modalStore.openModal({
     title: t('invoices.send_invoice'),
     componentName: 'SendInvoiceModal',
     id: invoiceData.value!.id,
     data: invoiceData.value,
+    refreshData: () => loadInvoice(),
   })
 }
 

resources/scripts-v2/features/company/invoices/views/InvoiceIndexView.vue

@@ -1,14 +1,50 @@
 <template>
   <BasePage>
-    <BasePageHeader :title="$t('invoices.title')">
-      <BaseBreadcrumb>
-        <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
-        <BaseBreadcrumbItem :title="$t('invoices.invoice', 2)" to="#" active />
-      </BaseBreadcrumb>
+    <BasePageHeader>
+      <template #default>
+        <div class="flex items-center gap-2">
+          <h1 class="text-2xl font-semibold text-heading">
+            {{ $t('invoices.title') }}
+          </h1>
+          <BaseDropdown position="bottom-start" width-class="w-44">
+            <template #activator>
+              <button
+                class="flex items-center gap-1 px-2 py-1 text-sm font-medium text-muted hover:text-heading rounded-md hover:bg-surface-secondary transition-colors"
+              >
+                <span class="text-xs text-primary-500 bg-primary-50 px-2 py-0.5 rounded-full">
+                  {{ viewMode === 'one-time' ? $t('invoices.one_time') : $t('recurring_invoices.recurring') }}
+                </span>
+                <BaseIcon name="ChevronDownIcon" class="w-4 h-4 text-muted" />
+              </button>
+            </template>
+            <BaseDropdownItem
+              :class="{ 'bg-primary-50 text-primary-600': viewMode === 'one-time' }"
+              @click="setViewMode('one-time')"
+            >
+              <BaseIcon name="DocumentTextIcon" class="w-4 h-4 mr-2 text-subtle" />
+              {{ $t('invoices.one_time') }}
+              <BaseIcon v-if="viewMode === 'one-time'" name="CheckIcon" class="w-4 h-4 ml-auto text-primary-500" />
+            </BaseDropdownItem>
+            <BaseDropdownItem
+              v-if="canViewRecurring"
+              :class="{ 'bg-primary-50 text-primary-600': viewMode === 'recurring' }"
+              @click="setViewMode('recurring')"
+            >
+              <BaseIcon name="ArrowPathIcon" class="w-4 h-4 mr-2 text-subtle" />
+              {{ $t('recurring_invoices.recurring') }}
+              <BaseIcon v-if="viewMode === 'recurring'" name="CheckIcon" class="w-4 h-4 ml-auto text-primary-500" />
+            </BaseDropdownItem>
+          </BaseDropdown>
+        </div>
+        <BaseBreadcrumb>
+          <BaseBreadcrumbItem :title="$t('general.home')" to="dashboard" />
+          <BaseBreadcrumbItem :title="$t('invoices.invoice', 2)" to="#" active />
+        </BaseBreadcrumb>
+      </template>
 
       <template #actions>
         <BaseButton
-          v-show="invoiceStore.invoiceTotalCount"
+          v-show="viewMode === 'one-time' ? invoiceStore.invoiceTotalCount : recurringInvoiceStore.totalRecurringInvoices"
           variant="primary-outline"
           @click="toggleFilter"
         >
@@ -23,7 +59,10 @@
           </template>
         </BaseButton>
 
-        <router-link v-if="canCreate" to="invoices/create">
+        <router-link
+          v-if="canCreate"
+          :to="viewMode === 'recurring' ? 'invoices/create?recurring=1' : 'invoices/create'"
+        >
           <BaseButton variant="primary" class="ml-4">
             <template #left="slotProps">
               <BaseIcon name="PlusIcon" :class="slotProps.class" />
@@ -34,9 +73,9 @@
       </template>
     </BasePageHeader>
 
-    <!-- Filters -->
+    <!-- Filters (one-time) -->
     <BaseFilterWrapper
-      v-show="showFilters"
+      v-show="showFilters && viewMode === 'one-time'"
       :row-on-xl="true"
       @clear="clearFilter"
     >
@@ -91,162 +130,360 @@
       </BaseInputGroup>
     </BaseFilterWrapper>
 
-    <!-- Empty State -->
-    <BaseEmptyPlaceholder
-      v-show="showEmptyScreen"
-      :title="$t('invoices.no_invoices')"
-      :description="$t('invoices.list_of_invoices')"
+    <!-- Filters (recurring) -->
+    <BaseFilterWrapper
+      v-show="showFilters && viewMode === 'recurring'"
+      @clear="clearRecurringFilter"
     >
-      <template v-if="canCreate" #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>
+      <BaseInputGroup :label="$t('customers.customer', 1)">
+        <BaseCustomerSelectInput
+          v-model="recurringFilters.customer_id"
+          :placeholder="$t('customers.type_or_click')"
+          value-prop="id"
+          label="name"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup :label="$t('recurring_invoices.status')">
+        <BaseMultiselect
+          v-model="recurringFilters.status"
+          :options="recurringStatusList"
+          searchable
+          :placeholder="$t('general.select_a_status')"
+          @update:model-value="setRecurringActiveTab"
+          @remove="clearRecurringStatusSearch()"
+        />
+      </BaseInputGroup>
+
+      <BaseInputGroup :label="$t('general.from')">
+        <BaseDatePicker
+          v-model="recurringFilters.from_date"
+          :calendar-button="true"
+          calendar-button-icon="calendar"
+        />
+      </BaseInputGroup>
 
-    <!-- Table -->
-    <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"
-      >
-        <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>
+        class="hidden w-8 h-0 mx-4 border border-gray-400 border-solid xl:block"
+        style="margin-top: 1.5rem"
+      />
 
-        <BaseDropdown
-          v-if="invoiceStore.selectedInvoices.length && canDelete"
-          class="absolute float-right"
+      <BaseInputGroup :label="$t('general.to')">
+        <BaseDatePicker
+          v-model="recurringFilters.to_date"
+          :calendar-button="true"
+          calendar-button-icon="calendar"
+        />
+      </BaseInputGroup>
+    </BaseFilterWrapper>
+
+    <!-- One-time invoices section -->
+    <template v-if="viewMode === 'one-time'">
+      <!-- Empty State -->
+      <BaseEmptyPlaceholder
+        v-show="showEmptyScreen"
+        :title="$t('invoices.no_invoices')"
+        :description="$t('invoices.list_of_invoices')"
+      >
+        <template v-if="canCreate" #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>
+
+      <!-- Table -->
+      <div v-show="!showEmptyScreen" class="relative table-container">
+        <div
+          class="relative flex items-center justify-between mt-5 list-none"
         >
-          <template #activator>
-            <span
-              class="flex text-sm font-medium cursor-pointer select-none text-primary-400"
-            >
-              {{ $t('general.actions') }}
-              <BaseIcon name="ChevronDownIcon" />
-            </span>
+          <BaseTabGroup @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 && canDelete"
+            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="tableRef"
+          :data="fetchData"
+          :columns="invoiceColumns"
+          :placeholder-count="invoiceStore.invoiceTotalCount >= 20 ? 10 : 5"
+          :key="tableKey"
+          class="mt-4"
+        >
+          <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>
 
-          <BaseDropdownItem @click="removeMultipleInvoices">
-            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
-            {{ $t('general.delete') }}
-          </BaseDropdownItem>
-        </BaseDropdown>
-      </div>
+          <template #cell-checkbox="{ row }">
+            <div class="relative block">
+              <BaseCheckbox
+                :id="row.id"
+                v-model="selectField"
+                :value="row.data.id"
+              />
+            </div>
+          </template>
 
-      <BaseTable
-        ref="tableRef"
-        :data="fetchData"
-        :columns="invoiceColumns"
-        :placeholder-count="invoiceStore.invoiceTotalCount >= 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="invoiceStore.selectAllField"
-              variant="primary"
-              @change="invoiceStore.selectAllInvoices"
-            />
-          </div>
-        </template>
+          <template #cell-name="{ row }">
+            <router-link
+              v-if="row.data.customer?.id"
+              :to="`/admin/customers/${row.data.customer.id}/view`"
+              class="font-medium text-primary-500 hover:text-primary-600"
+            >
+              {{ row.data.customer.name }}
+            </router-link>
+            <span v-else>{{ row.data.customer?.name ?? '-' }}</span>
+          </template>
 
-        <template #cell-checkbox="{ row }">
-          <div class="relative block">
-            <BaseCheckbox
-              :id="row.id"
-              v-model="selectField"
-              :value="row.data.id"
-            />
-          </div>
-        </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-name="{ row }">
-          <BaseText :text="row.data.customer.name" />
-        </template>
+          <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-invoice_date="{ row }">
-          {{ row.data.formatted_invoice_date }}
-        </template>
-
-        <template #cell-total="{ 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-due_amount="{ row }">
-          <div class="flex justify-between">
+          <template #cell-total="{ row }">
             <BaseFormatMoney
-              :amount="row.data.due_amount"
-              :currency="row.data.currency"
+              :amount="row.data.total"
+              :currency="row.data.customer.currency"
             />
+          </template>
 
-            <BasePaidStatusBadge
-              v-if="row.data.overdue"
-              status="OVERDUE"
-              class="px-1 py-0.5 ml-2"
-            >
-              {{ $t('invoices.overdue') }}
-            </BasePaidStatusBadge>
+          <template #cell-status="{ row }">
+            <BaseInvoiceStatusBadge :status="row.data.status" class="px-3 py-1">
+              <BaseInvoiceStatusLabel :status="row.data.status" />
+            </BaseInvoiceStatusBadge>
+          </template>
 
-            <BasePaidStatusBadge
-              :status="row.data.paid_status"
-              class="px-1 py-0.5 ml-2"
-            >
-              <BaseInvoiceStatusLabel :status="row.data.paid_status" />
-            </BasePaidStatusBadge>
-          </div>
+          <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>
+
+          <template v-if="hasAtLeastOneAbility" #cell-actions="{ row }">
+            <InvoiceDropdown
+              :row="row.data"
+              :table="tableRef"
+              :can-edit="canEdit"
+              :can-view="canView"
+              :can-create="canCreate"
+              :can-delete="canDelete"
+              :can-send="canSend"
+              :can-create-payment="canCreatePayment"
+            />
+          </template>
+        </BaseTable>
+      </div>
+    </template>
+
+    <!-- Recurring invoices section -->
+    <template v-else-if="canViewRecurring">
+      <!-- Empty State -->
+      <BaseEmptyPlaceholder
+        v-show="showRecurringEmptyScreen"
+        :title="$t('recurring_invoices.no_invoices')"
+        :description="$t('recurring_invoices.list_of_invoices')"
+      >
+        <template v-if="canCreate" #actions>
+          <BaseButton
+            variant="primary-outline"
+            @click="$router.push('/admin/invoices/create?recurring=1')"
+          >
+            <template #left="slotProps">
+              <BaseIcon name="PlusIcon" :class="slotProps.class" />
+            </template>
+            {{ $t('recurring_invoices.add_new_invoice') }}
+          </BaseButton>
         </template>
+      </BaseEmptyPlaceholder>
 
-        <template v-if="hasAtLeastOneAbility" #cell-actions="{ row }">
-          <InvoiceDropdown
-            :row="row.data"
-            :table="tableRef"
-            :can-edit="canEdit"
-            :can-view="canView"
-            :can-create="canCreate"
-            :can-delete="canDelete"
-            :can-send="canSend"
-          />
-        </template>
-      </BaseTable>
-    </div>
+      <div v-show="!showRecurringEmptyScreen" class="relative table-container">
+        <!-- Recurring tabs -->
+        <div class="relative flex items-center justify-between mt-5 list-none">
+          <BaseTabGroup @change="setRecurringStatusFilter">
+            <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 && canRecurringDelete"
+            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>
+
+        <!-- Recurring table -->
+        <BaseTable
+          ref="recurringTableRef"
+          :data="fetchRecurringData"
+          :columns="recurringColumns"
+          :placeholder-count="recurringInvoiceStore.totalRecurringInvoices >= 20 ? 10 : 5"
+          class="mt-4"
+        >
+          <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="recurringSelectField"
+                :value="row.data.id"
+              />
+            </div>
+          </template>
+
+          <!-- starts_at column -->
+          <template #cell-starts_at="{ row }">
+            {{ row.data.formatted_starts_at }}
+          </template>
+
+          <!-- customer column -->
+          <template #cell-customer="{ row }">
+            <router-link
+              v-if="row.data.customer?.id"
+              :to="`/admin/customers/${row.data.customer.id}/view`"
+              class="flex flex-col"
+            >
+              <span class="font-medium text-primary-500 hover:text-primary-600">
+                {{ row.data.customer.name }}
+              </span>
+              <span v-if="row.data.customer.contact_name" class="text-xs text-subtle">
+                {{ row.data.customer.contact_name }}
+              </span>
+            </router-link>
+            <span v-else>-</span>
+          </template>
+
+          <!-- frequency column -->
+          <template #cell-frequency="{ row }">
+            {{ getFrequencyLabel(row.data.frequency) }}
+          </template>
+
+          <!-- status column -->
+          <template #cell-status="{ row }">
+            <BaseRecurringInvoiceStatusBadge :status="row.data.status" class="px-3 py-1">
+              <BaseRecurringInvoiceStatusLabel :status="row.data.status" />
+            </BaseRecurringInvoiceStatusBadge>
+          </template>
+
+          <!-- total column -->
+          <template #cell-total="{ row }">
+            <BaseFormatMoney
+              :amount="row.data.total"
+              :currency="row.data.customer?.currency"
+            />
+          </template>
+
+          <!-- actions column -->
+          <template v-if="hasRecurringAtLeastOneAbility" #cell-actions="{ row }">
+            <RecurringInvoiceDropdown
+              :row="row.data"
+              :table="recurringTableRef"
+              :can-edit="canRecurringEdit"
+              :can-view="canRecurringView"
+              :can-delete="canRecurringDelete"
+            />
+          </template>
+        </BaseTable>
+      </div>
+    </template>
   </BasePage>
 </template>
 
 <script setup lang="ts">
-import { computed, onUnmounted, reactive, ref } from 'vue'
+import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
 import { debouncedWatch } from '@vueuse/core'
 import { useInvoiceStore } from '../store'
+import { useRecurringInvoiceStore } from '../../recurring-invoices/store'
 import InvoiceDropdown from '../components/InvoiceDropdown.vue'
+import RecurringInvoiceDropdown from '../../recurring-invoices/components/RecurringInvoiceDropdown.vue'
+import { useUserStore } from '../../../../stores/user.store'
+import { useDialogStore } from '../../../../stores/dialog.store'
 import type { Invoice } from '../../../../types/domain/invoice'
+import type { RecurringInvoice } from '../../../../types/domain/recurring-invoice'
 
 interface Props {
   canCreate?: boolean
@@ -264,9 +501,66 @@ const props = withDefaults(defineProps<Props>(), {
   canSend: false,
 })
 
+const ABILITIES = {
+  CREATE: 'create-invoice',
+  EDIT: 'edit-invoice',
+  VIEW: 'view-invoice',
+  DELETE: 'delete-invoice',
+  SEND: 'send-invoice',
+} as const
+
+const RECURRING_ABILITIES = {
+  CREATE: 'create-recurring-invoice',
+  EDIT: 'edit-recurring-invoice',
+  VIEW: 'view-recurring-invoice',
+  DELETE: 'delete-recurring-invoice',
+} as const
+
 const invoiceStore = useInvoiceStore()
+const recurringInvoiceStore = useRecurringInvoiceStore()
+const userStore = useUserStore()
+const dialogStore = useDialogStore()
+const route = useRoute()
+const router = useRouter()
 const { t } = useI18n()
 
+// ----------------------------------------------------------------
+// Recurring invoice ability
+// ----------------------------------------------------------------
+
+const canViewRecurring = computed<boolean>(() => {
+  return userStore.hasAbilities(RECURRING_ABILITIES.VIEW)
+})
+
+// ----------------------------------------------------------------
+// View mode toggle
+// ----------------------------------------------------------------
+
+const storedViewMode = localStorage.getItem('invoiceViewMode') as 'one-time' | 'recurring' | null
+const viewMode = ref<'one-time' | 'recurring'>(
+  storedViewMode === 'recurring' && !canViewRecurring.value ? 'one-time' : (storedViewMode ?? 'one-time')
+)
+
+onMounted(() => {
+  if (route.query.view === 'recurring' && canViewRecurring.value) {
+    viewMode.value = 'recurring'
+  }
+  recurringInvoiceStore.initFrequencies(t)
+})
+
+function setViewMode(mode: 'one-time' | 'recurring'): void {
+  if (mode === 'recurring' && !canViewRecurring.value) return
+  viewMode.value = mode
+  localStorage.setItem('invoiceViewMode', mode)
+  router.replace({
+    query: mode === 'recurring' ? { view: 'recurring' } : {},
+  })
+}
+
+// ----------------------------------------------------------------
+// One-time invoice state
+// ----------------------------------------------------------------
+
 const tableRef = ref<{ refresh: () => void } | null>(null)
 const tableKey = ref<number>(0)
 const showFilters = ref<boolean>(false)
@@ -331,8 +625,32 @@ const selectField = computed<number[]>({
   },
 })
 
+const canCreate = computed<boolean>(() => {
+  return props.canCreate || userStore.hasAbilities(ABILITIES.CREATE)
+})
+
+const canEdit = computed<boolean>(() => {
+  return props.canEdit || userStore.hasAbilities(ABILITIES.EDIT)
+})
+
+const canView = computed<boolean>(() => {
+  return props.canView || userStore.hasAbilities(ABILITIES.VIEW)
+})
+
+const canDelete = computed<boolean>(() => {
+  return props.canDelete || userStore.hasAbilities(ABILITIES.DELETE)
+})
+
+const canSend = computed<boolean>(() => {
+  return props.canSend || userStore.hasAbilities(ABILITIES.SEND)
+})
+
+const canCreatePayment = computed<boolean>(() => {
+  return userStore.hasAbilities('create-payment')
+})
+
 const hasAtLeastOneAbility = computed<boolean>(() => {
-  return props.canDelete || props.canEdit || props.canView || props.canSend
+  return canDelete.value || canEdit.value || canView.value || canSend.value
 })
 
 interface TableColumn {
@@ -385,6 +703,9 @@ onUnmounted(() => {
   if (invoiceStore.selectAllField) {
     invoiceStore.selectAllInvoices()
   }
+  if (recurringInvoiceStore.selectAllField) {
+    recurringInvoiceStore.selectAllRecurringInvoices()
+  }
 })
 
 function clearStatusSearch(): void {
@@ -477,23 +798,36 @@ function clearFilter(): void {
   activeTab.value = t('general.all')
 }
 
-async function removeMultipleInvoices(): Promise<void> {
-  const confirmed = window.confirm(t('invoices.confirm_delete'))
-  if (!confirmed) return
-
-  const res = await invoiceStore.deleteMultipleInvoices()
-  if (res.data.success) {
-    refreshTable()
-    invoiceStore.$patch((state) => {
-      state.selectedInvoices = []
-      state.selectAllField = false
-    })
-  }
+function removeMultipleInvoices(): void {
+  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: boolean) => {
+    if (res) {
+      const response = await invoiceStore.deleteMultipleInvoices()
+      if (response.data.success) {
+        refreshTable()
+        invoiceStore.$patch((state) => {
+          state.selectedInvoices = []
+          state.selectAllField = false
+        })
+      }
+    }
+  })
 }
 
 function toggleFilter(): void {
   if (showFilters.value) {
-    clearFilter()
+    if (viewMode.value === 'one-time') {
+      clearFilter()
+    } else {
+      clearRecurringFilter()
+    }
   }
   showFilters.value = !showFilters.value
 }
@@ -511,4 +845,214 @@ function setActiveTab(val: string): void {
   }
   activeTab.value = tabMap[val] ?? t('general.all')
 }
+
+// ----------------------------------------------------------------
+// Recurring invoice state
+// ----------------------------------------------------------------
+
+const recurringTableRef = ref<{ refresh: () => void } | null>(null)
+const isRecurringRequestOngoing = ref<boolean>(true)
+const recurringActiveTab = ref<string>('recurring_invoices.all')
+
+const recurringStatusList = ref<StatusOption[]>([
+  { label: t('recurring_invoices.active'), value: 'ACTIVE' },
+  { label: t('recurring_invoices.on_hold'), value: 'ON_HOLD' },
+  { label: t('recurring_invoices.all'), value: 'ALL' },
+])
+
+interface RecurringInvoiceFilters {
+  customer_id: string | number
+  status: string
+  from_date: string
+  to_date: string
+}
+
+const recurringFilters = reactive<RecurringInvoiceFilters>({
+  customer_id: '',
+  status: '',
+  from_date: '',
+  to_date: '',
+})
+
+const showRecurringEmptyScreen = computed<boolean>(
+  () =>
+    !recurringInvoiceStore.totalRecurringInvoices &&
+    !isRecurringRequestOngoing.value,
+)
+
+const recurringSelectField = computed<number[]>({
+  get: () => recurringInvoiceStore.selectedRecurringInvoices,
+  set: (value: number[]) => {
+    recurringInvoiceStore.selectRecurringInvoice(value)
+  },
+})
+
+const canRecurringEdit = computed<boolean>(() => {
+  return userStore.hasAbilities(RECURRING_ABILITIES.EDIT)
+})
+
+const canRecurringView = computed<boolean>(() => {
+  return userStore.hasAbilities(RECURRING_ABILITIES.VIEW)
+})
+
+const canRecurringDelete = computed<boolean>(() => {
+  return userStore.hasAbilities(RECURRING_ABILITIES.DELETE)
+})
+
+const hasRecurringAtLeastOneAbility = computed<boolean>(() => {
+  return canRecurringDelete.value || canRecurringEdit.value || canRecurringView.value
+})
+
+const recurringColumns = computed<TableColumn[]>(() => [
+  {
+    key: 'checkbox',
+    thClass: 'extra',
+    tdClass: 'font-medium text-heading',
+    sortable: false,
+  },
+  {
+    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(recurringFilters, () => setRecurringFilters(), { debounce: 500 })
+
+interface RecurringFetchResult {
+  data: RecurringInvoice[]
+  pagination: {
+    totalPages: number
+    currentPage: number
+    totalCount: number
+    limit: number
+  }
+}
+
+async function fetchRecurringData({
+  page,
+  sort,
+}: FetchParams): Promise<RecurringFetchResult> {
+  const data = {
+    customer_id: recurringFilters.customer_id
+      ? Number(recurringFilters.customer_id)
+      : undefined,
+    status: recurringFilters.status || undefined,
+    from_date: recurringFilters.from_date || undefined,
+    to_date: recurringFilters.to_date || undefined,
+    orderByField: sort.fieldName || 'created_at',
+    orderBy: sort.order || 'desc',
+    page,
+  }
+
+  isRecurringRequestOngoing.value = true
+  const response = await recurringInvoiceStore.fetchRecurringInvoices(
+    data as never,
+  )
+  isRecurringRequestOngoing.value = false
+
+  return {
+    data: response.data.data,
+    pagination: {
+      totalPages: response.data.meta.last_page,
+      currentPage: page,
+      totalCount: response.data.meta.total,
+      limit: 10,
+    },
+  }
+}
+
+function getFrequencyLabel(frequencyFormat: string): string {
+  const frequencyObj = recurringInvoiceStore.frequencies.find(
+    (f) => f.value === frequencyFormat,
+  )
+  return frequencyObj ? frequencyObj.label : `CUSTOM: ${frequencyFormat}`
+}
+
+function refreshRecurringTable(): void {
+  recurringTableRef.value?.refresh()
+}
+
+function setRecurringStatusFilter(val: { title: string }): void {
+  if (recurringActiveTab.value === val.title) return
+  recurringActiveTab.value = val.title
+
+  switch (val.title) {
+    case t('recurring_invoices.active'):
+      recurringFilters.status = 'ACTIVE'
+      break
+    case t('recurring_invoices.on_hold'):
+      recurringFilters.status = 'ON_HOLD'
+      break
+    default:
+      recurringFilters.status = ''
+      break
+  }
+}
+
+function setRecurringFilters(): void {
+  recurringInvoiceStore.$patch((state) => {
+    state.selectedRecurringInvoices = []
+    state.selectAllField = false
+  })
+  refreshRecurringTable()
+}
+
+function clearRecurringFilter(): void {
+  recurringFilters.customer_id = ''
+  recurringFilters.status = ''
+  recurringFilters.from_date = ''
+  recurringFilters.to_date = ''
+  recurringActiveTab.value = t('recurring_invoices.all')
+}
+
+function clearRecurringStatusSearch(): void {
+  recurringFilters.status = ''
+  refreshRecurringTable()
+}
+
+function setRecurringActiveTab(val: string): void {
+  const tabMap: Record<string, string> = {
+    ACTIVE: t('recurring_invoices.active'),
+    ON_HOLD: t('recurring_invoices.on_hold'),
+    ALL: t('recurring_invoices.all'),
+  }
+  recurringActiveTab.value = tabMap[val] ?? t('recurring_invoices.all')
+}
+
+function removeMultipleRecurringInvoices(): void {
+  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: boolean) => {
+    if (res) {
+      const response =
+        await recurringInvoiceStore.deleteMultipleRecurringInvoices()
+      if (response.data.success) {
+        refreshRecurringTable()
+        recurringInvoiceStore.$patch((state) => {
+          state.selectedRecurringInvoices = []
+          state.selectAllField = false
+        })
+      }
+    }
+  })
+}
 </script>

resources/scripts-v2/features/company/items/components/ItemModal.vue

@@ -10,10 +10,11 @@ import {
 import useVuelidate from '@vuelidate/core'
 import { useModalStore } from '../../../../stores/modal.store'
 import { useCompanyStore } from '../../../../stores/company.store'
+import { useUserStore } from '../../../../stores/user.store'
 import { useItemStore } from '../store'
-
-// Tax type store - imported from original location
-import { taxTypeService } from '@v2/api/services/tax-type.service'
+import { useTaxTypes } from '../use-tax-types'
+import ItemUnitModal from '@v2/features/company/settings/components/ItemUnitModal.vue'
+import type { TaxType } from '@v2/types/domain/tax'
 
 interface TaxOption {
   id: number
@@ -24,6 +25,10 @@ interface TaxOption {
   tax_name: string
 }
 
+const ABILITIES = {
+  VIEW_TAX_TYPE: 'view-tax-type',
+} as const
+
 interface Emits {
   (e: 'newItem', item: unknown): void
 }
@@ -33,7 +38,8 @@ const emit = defineEmits<Emits>()
 const modalStore = useModalStore()
 const itemStore = useItemStore()
 const companyStore = useCompanyStore()
-// Tax types fetched via service
+const userStore = useUserStore()
+const { taxTypes, fetchTaxTypes } = useTaxTypes()
 
 const { t } = useI18n()
 const isLoading = ref<boolean>(false)
@@ -54,7 +60,7 @@ const price = computed<number>({
 
 const taxes = computed({
   get: () =>
-    itemStore.currentItem.taxes.map((tax) => {
+    itemStore.currentItem.taxes?.map((tax) => {
       if (tax) {
         const currencySymbol = companyStore.selectedCompanyCurrency?.symbol ?? '$'
         return {
@@ -68,7 +74,7 @@ const taxes = computed({
         }
       }
       return tax
-    }),
+    }) ?? [],
   set: (value: TaxOption[]) => {
     itemStore.currentItem.taxes = value as unknown as typeof itemStore.currentItem.taxes
   },
@@ -100,7 +106,7 @@ const v$ = useVuelidate(
 )
 
 const getTaxTypes = computed<TaxOption[]>(() => {
-  return taxTypeStore.taxTypes.map((tax) => {
+  return taxTypes.value.map((tax: TaxType) => {
     const currencyCode = companyStore.selectedCompanyCurrency?.code ?? 'USD'
     const amount =
       tax.calculation_type === 'fixed'
@@ -117,9 +123,13 @@ const getTaxTypes = computed<TaxOption[]>(() => {
   }) as TaxOption[]
 })
 
-onMounted(() => {
+onMounted(async () => {
   v$.value.$reset()
-  itemStore.fetchItemUnits({ limit: 'all' })
+  await itemStore.fetchItemUnits({ limit: 'all' })
+
+  if (userStore.hasAbilities(ABILITIES.VIEW_TAX_TYPE)) {
+    await fetchTaxTypes()
+  }
 })
 
 async function submitItemData(): Promise<void> {
@@ -163,6 +173,17 @@ async function submitItemData(): Promise<void> {
   }
 }
 
+function addItemUnit(): void {
+  modalStore.openModal({
+    title: t('settings.customization.items.add_item_unit'),
+    componentName: 'ItemUnitModal',
+    size: 'sm',
+    refreshData: (unit: { id: number }) => {
+      itemStore.currentItem.unit_id = unit.id
+    },
+  })
+}
+
 function closeItemModal(): void {
   modalStore.closeModal()
   setTimeout(() => {
@@ -225,7 +246,18 @@ function closeItemModal(): void {
                 :placeholder="$t('items.select_a_unit')"
                 searchable
                 track-by="name"
-              />
+              >
+                <template #action>
+                  <BaseSelectAction @click="addItemUnit">
+                    <BaseIcon
+                      name="PlusCircleIcon"
+                      class="h-4 mr-2 -ml-2 text-center text-primary-400"
+                    />
+                    {{ $t('settings.customization.items.add_item_unit') }}
+                  </BaseSelectAction>
+                </template>
+              </BaseMultiselect>
+              <ItemUnitModal />
             </BaseInputGroup>
 
             <BaseInputGroup

resources/scripts-v2/features/company/items/routes.ts

@@ -6,6 +6,7 @@ const itemRoutes: RouteRecordRaw[] = [
     name: 'items.index',
     component: () => import('./views/ItemIndexView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'view-item',
     },
   },
@@ -14,6 +15,7 @@ const itemRoutes: RouteRecordRaw[] = [
     name: 'items.create',
     component: () => import('./views/ItemCreateView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'create-item',
     },
   },
@@ -22,6 +24,7 @@ const itemRoutes: RouteRecordRaw[] = [
     name: 'items.edit',
     component: () => import('./views/ItemCreateView.vue'),
     meta: {
+      requiresAuth: true,
       ability: 'edit-item',
     },
   },

resources/scripts-v2/features/company/items/use-tax-types.ts

@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import { taxTypeService } from '@v2/api/services/tax-type.service'
+import type { TaxType } from '@v2/types/domain/tax'
+import { handleApiError } from '@v2/utils/error-handling'
+
+export function useTaxTypes(): {
+  taxTypes: Ref<TaxType[]>
+  fetchTaxTypes: () => Promise<TaxType[]>
+} {
+  const taxTypes = ref<TaxType[]>([])
+
+  async function fetchTaxTypes(): Promise<TaxType[]> {
+    try {
+      const response = await taxTypeService.list({ limit: 'all' })
+      taxTypes.value = response.data
+      return taxTypes.value
+    } catch (error: unknown) {
+      handleApiError(error)
+      throw error
+    }
+  }
+
+  return {
+    taxTypes,
+    fetchTaxTypes,
+  }
+}