Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test

Sin Yee requested for additional info to be included in arrived-parcel.xlsx
Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)
2026-08-19 12:34:18 +00:00 · 2026-08-06 12:03:14 +08:00 · 2026-08-06 12:01:43 +08:00 · 2026-07-24 15:41:27 +08:00 · 2026-07-23 13:06:12 +08:00 · 2026-07-22 21:46:38 +08:00
108 changed files with 490 additions and 869 deletions
@@ -5,7 +5,7 @@ APP_KEY=base64:I9qXyDlm7GVu/e47+YGzLB00fA/FMA2/hMPEhqu8pUQ=
 JWT_SECRET=9j7f7vUWEzxUBjLYcQimZp5wmxHEglcjU3beog26qC4pQKENZSpfWQfv065tjZrZ

 DB_CONNECTION=mysql
-DB_HOST=172.18.0.2
+DB_HOST=mysql
 DB_PORT=3306
 DB_DATABASE=ci_test_shipping_portal
 DB_USERNAME=ci
@@ -69,7 +69,7 @@ class SuccessUpdatePaymentStatusV2CommandJob implements ShouldQueue
                    $packingList->save();

                    if(app()->environment('production')){
-                        (App()->make(UpdateDoFromVTPortalProcessor::class))->execute($packingList);
+                        //(App()->make(UpdateDoFromVTPortalProcessor::class))->execute($packingList);
                        (App()->make(UpdateDoFromYDPortalProcessor::class))->execute($packingList);
                    }

@@ -2,6 +2,7 @@

 namespace App\Classes\Modules\Exports\Services;

+use App\Classes\ValueObjects\Constants\ApprovalStatus;
 use App\Models\Order;
 use App\Models\PackingList;
 use Carbon\Carbon;
@@ -38,7 +39,10 @@ class ExportsArrivedParcel implements WithHeadings, WithHeadingRow, WithMapping,
            'Received Date',
            'Recorded On',
            'Days to Record',
-            'Remarks'
+            'Remarks',
+            'Delivery Address',
+            'Post Code',
+            'State',
        ];
    }

@@ -79,6 +83,8 @@ class ExportsArrivedParcel implements WithHeadings, WithHeadingRow, WithMapping,
        $recorded_on = $packingList->created_at->format('d-m-Y');
        $days_to_record = Carbon::parse($arrival_date)->diffInDays(Carbon::parse($recorded_on));

+        $address = $order->addresses()->where('status', '=', ApprovalStatus::APPROVED)->first();
+
        return [
            $packingList->owner->reference,
            $marking,
@@ -89,7 +95,10 @@ class ExportsArrivedParcel implements WithHeadings, WithHeadingRow, WithMapping,
            $arrival_date,
            $recorded_on,
            $days_to_record,
-            ''
+            '',
+            $address->street_one . ' ' . ($address->street_two ? $address->street_two : '') . ', ' . $address->district->name,
+            $address->postcode,
+            $address->state->name,
        ];
    }
 }
@@ -68,7 +68,7 @@ class ApproveChangeOrderAddressProcessor
            $appointee = $address->owner->orderRoles()->where('role_id', '=', OrderRoleTypes::ORIGIN_FREIGHT_FORWARDER)->first()->appointee->id;
            if($appointee === 2) {
                foreach($address->owner->packingLists()->where('type', PackingListType::SHIPPING_PACKING_LIST) as $packingList){
-                    $this->updateDoFromVTPortalProcessor->execute($packingList);
+                    //$this->updateDoFromVTPortalProcessor->execute($packingList);
                }
            }

@@ -77,7 +77,7 @@ class UpdatePackingListStatusLogic extends AbstractControllerLogic

 //        $appointee = $address->owner->orderRoles()->where('role_id', '=', OrderRoleTypes::ORIGIN_FREIGHT_FORWARDER)->first()->appointee->id;

-        $this->updateDoFromVTPortalProcessor->execute($packingList);
+        // $this->updateDoFromVTPortalProcessor->execute($packingList);
        $this->updateDoFromYDPortalProcessor->execute($packingList);

        return $this->resourceResponse(new PackingListResource($packingList));
@@ -6,6 +6,7 @@ namespace App\Classes\Modules\Transactions\ControllersLogic;
 use App\Classes\General\Abstracts\AbstractControllerLogic;
 use App\Classes\Modules\Transactions\Services\ListsTransactions;
 use App\Http\Resources\TransactionWithStorageResource;
+use Carbon\Carbon;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Log;
@@ -40,7 +41,19 @@ class ListTransactionsLogic extends AbstractControllerLogic
        $query = $this->listsTransactions->execute($this->listsTransactions->deserializeFilters($request->input('filters')));
        foreach ($query->items() as $item) {
            if($item instanceof \App\Models\Transaction && $item->owner && $item->owner->owner->companyModule){
-                $item['is_einvoice_applicable'] = $item->owner->owner->companyModule->company->e_invoice === 1;
+                $eInvoice = false;
+                $eInvoiceStartDate = Carbon::parse(env('E_INVOICE_START_DATE', '2025-07-01 00:00:00'));
+                $transactionCreatedDate = Carbon::parse($item->created_at);
+                $eInvoiceRequestedDate = Carbon::parse($item->owner->owner->companyModule->company->e_invoice_requested_at);
+
+                if ($transactionCreatedDate->isAfter($eInvoiceStartDate)
+                &&($transactionCreatedDate->isAfter($eInvoiceRequestedDate) || $transactionCreatedDate->diffInMinutes($eInvoiceRequestedDate) <= 60)
+                && $item->owner->owner->companyModule->company->e_invoice === 1)
+                {
+                    $eInvoice = true;
+                }
+                $item['is_einvoice_applicable'] = $eInvoice;
+                // $item['is_einvoice_applicable'] = $item->owner->owner->companyModule->company->e_invoice === 1;
            }
        }

@@ -135,7 +135,13 @@ class CreateInvoiceTransactionProcessor

        $warehouseId = $order->orderRoles()->where('role_id', OrderRoleTypes::ORIGIN_WAREHOUSE)->first()->company_module_id;
        $selected_warehouse_rate = $this->getConstantByKey($warehouse_rate_constant, $warehouseId);
-        $warehouse_rate = is_object($selected_warehouse_rate) ? $selected_warehouse_rate->amount : 0;
+
+        $warehouse_rate = 0;
+        if (is_object($selected_warehouse_rate)) {
+            $warehouse_rate = $selected_warehouse_rate->amount;
+        } elseif (is_array($selected_warehouse_rate)) {
+            $warehouse_rate = $selected_warehouse_rate['amount'] ?? 0;
+        }

        $stateId = $address->state_id;
        $state_rate_constant = $this->getConstantByKey($state_rate_constant, $stateId);
@@ -144,7 +144,7 @@ class CreatePaymentTransactionOneTimeFixProcessor
                $packingList->save();

                if(app()->environment('production')){
-                    $this->updateDoFromVTPortalProcessor->execute($packingList);
+                    //$this->updateDoFromVTPortalProcessor->execute($packingList);
                    $this->updateDoFromYDPortalProcessor->execute($packingList);
                }
            }
@@ -135,7 +135,7 @@ class CreatePaymentTransactionProcessor
                $packingList->save();

                if(app()->environment('production')){
-                    $this->updateDoFromVTPortalProcessor->execute($packingList);
+                    //$this->updateDoFromVTPortalProcessor->execute($packingList);
                    $this->updateDoFromYDPortalProcessor->execute($packingList);
                }
            }
@@ -93,7 +93,7 @@ class ReleaseGoodsToCustomerProcessor
            $packingList->save();

            if (app()->environment('production')) {
-                $this->updateDoFromVTPortalProcessor->execute($packingList);
+                // $this->updateDoFromVTPortalProcessor->execute($packingList);
                $this->updateDoFromYDPortalProcessor->execute($packingList);
            }

@@ -76,10 +76,10 @@ class SuccessUpdatePaymentStatusButFailedCallback extends Command
     */
    public function handle()
    {
-        ini_set('memory_limit', '-1'); 
+        ini_set('memory_limit', '-1');

        $this->info(Carbon::now() . ' : Billplz Failled Callback cron started.');
-        $this->outputArray = []; 
+        $this->outputArray = [];
        $start   = new Carbon();

        $approvalStatusArray = ApprovalStatus::APPROVAL_STATUS_ID;
@@ -107,27 +107,27 @@ class SuccessUpdatePaymentStatusButFailedCallback extends Command
                $this->info('PackingList has no owner. PackingList ID: ' . $packingList->id);
                continue;
            }
-            
+
            if ($invoice->status == ApprovalStatus::APPROVED) {

                $totalPaidAmount = $invoice->transactions->where('type', TransactionType::PAYMENT)->whereIn('status', [ApprovalStatus::APPROVED, ApprovalStatus::COMPLETED])->sum('amount');
-    
+
                if(($invoice->amount - $totalPaidAmount) < 0.01) {
                    $this->updatesTransactionStatus->execute($invoice, ApprovalStatus::COMPLETED);
-        
+
                    $packingList->status = ApprovalStatus::APPROVED;
                    $packingList->save();
-        
+
                    if(app()->environment('production')){
-                        $this->updateDoFromVTPortalProcessor->execute($packingList);
+                        //$this->updateDoFromVTPortalProcessor->execute($packingList);
                        $this->updateDoFromYDPortalProcessor->execute($packingList);
                    }
-    
+
                    dump('Updated invoice ' . $invoice->id . '. Order: '. $order->reference);
                } else {
                    $this->info('Failed Update invoice ' . $invoice->id . ' because payment not enough. Invoice Amount: ' . $invoice->amount . ' . Paid Amount: ' . $totalPaidAmount . ' . Order: '. $order->reference);
                }
-            } 
+            }
        }

        $end = new Carbon();
@@ -17,6 +17,7 @@ use Carbon\Carbon;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
 use App\Classes\Modules\Jobs\ControllersLogic\SubmitJobLogic;
+use Illuminate\Support\Facades\Log;

 class MonthlyReportController
 {
@@ -150,45 +151,84 @@ class MonthlyReportController
    }

    public function customerReport(Request $request): JsonResponse {
+        try {
+            $connection = CompanyConnection::where('invitee_reference', $request->route('marking'))->firstOrFail();
+            $invitee = $connection->invitee;

-        $connection = CompanyConnection::where('invitee_reference', $request->route('marking'))->firstOrFail();
-        $id = $connection->invitee->id;
+            if (!$invitee) {
+                Log::warning('Customer report: invitee not found for marking', ['marking' => $request->route('marking')]);
+                return (new ApiResponseObject('Customer not found',
+                    'The customer associated with this marking no longer exists.',
+                    HttpStatus::OK_WITH_MESSAGE, ['data' => [
+                        'activated_orders' => 0,
+                        'total_cbm' => 0,
+                        'packages' => 0,
+                    ]]))->handler();
+            }

-        $from = $request->route('from') ? Carbon::parse($request->route('from')) : Carbon::parse('01-01-2018');
-        $to = $request->route('to') ? Carbon::parse($request->route('to')) : Carbon::now();
+            $id = $invitee->id;

-        $containers = Container::whereBetween('loading_date', [$from, $to])->orderBy('loading_date')->get();
+            $from = $request->route('from') ? Carbon::parse($request->route('from')) : Carbon::parse('01-01-2018');
+            $to = $request->route('to') ? Carbon::parse($request->route('to')) : Carbon::now();

-        $packingLists = $containers->flatMap(function ($container) {
-            return $container->packingLists;
-        });
+            // Only load containers that actually have packing lists belonging to this customer,
+            // instead of loading ALL containers and filtering in PHP (which causes memory exhaustion).
+            $containers = Container::whereBetween('loading_date', [$from, $to])
+                ->whereHas('packingLists', function ($query) use ($id) {
+                    $query->whereHas('packages', function ($pkgQuery) use ($id) {
+                        $pkgQuery->whereHas('companyModule', function ($cmQuery) use ($id) {
+                            $cmQuery->where('company_modules.id', $id);
+                        });
+                    });
+                })
+                ->orderBy('loading_date')
+                ->get();

-        $packages = $packingLists->map(function ($packingList) {
-            $replica = in_array(Auth()->user()->type, [RoleTypes::SHADOW_ADMIN, RoleTypes::SUPER_ADMIN]) ? $packingList : $packingList->packingLists()->where('type', PackingListType::SHIPPING_PACKING_LIST_REPLICA)->first();
-            return $replica ? $replica : $packingList;
-        })->flatMap(function ($packingList) {
-            return $packingList->packages;
-        });
+            $packingLists = $containers->flatMap(function ($container) {
+                return $container->packingLists;
+            });

-        $packages = $packages->filter(function($package) use ($id) {
-            return $package->companyModule->id === $id;
-        });
+            $userType = Auth() && Auth()->user() ? Auth()->user()->type : RoleTypes::USER;
+            $exceptionUsers = in_array($userType, [RoleTypes::SHADOW_ADMIN, RoleTypes::SUPER_ADMIN]);

-        $orders = $packages->unique(function ($package) {
-            return $package->order;
-        });
+            $packages = $packingLists->map(function ($packingList) use ($exceptionUsers) {
+                $replica = $exceptionUsers ? $packingList : $packingList->packingLists()->where('type', PackingListType::SHIPPING_PACKING_LIST_REPLICA)->first();
+                return $replica ? $replica : $packingList;
+            })->flatMap(function ($packingList) {
+                return $packingList->packages;
+            });

-        $totalCbm = $packages->sum(function($package){
-            return (( (float) $package->width / 100) * ( (float) $package->length / 100) * ( (float) $package->height / 100)) * $package->quantity;
-        });
+            $packages = $packages->filter(function($package) use ($id) {
+                $companyModule = $package->companyModule;
+                return $companyModule && $companyModule->id === $id;
+            });

-        return (new ApiResponseObject('fetch monthly report Successful',
-            '',
-            HttpStatus::OK_WITH_MESSAGE, ['data' => [
-                'activated_orders' => count($orders),
-                'total_cbm' => $totalCbm,
-                'packages' => $packages->sum('quantity'),
-            ]]))->handler();
+            $orders = $packages->unique(function ($package) {
+                return $package->order;
+            });
+
+            $totalCbm = $packages->sum(function($package){
+                return (( (float) $package->width / 100) * ( (float) $package->length / 100) * ( (float) $package->height / 100)) * $package->quantity;
+            });
+
+            return (new ApiResponseObject('fetch monthly report Successful',
+                '',
+                HttpStatus::OK_WITH_MESSAGE, ['data' => [
+                    'activated_orders' => count($orders),
+                    'total_cbm' => $totalCbm,
+                    'packages' => $packages->sum('quantity'),
+                ]]))->handler();
+
+        } catch (\Exception $e) {
+            Log::error('Customer report failed', [
+                'marking' => $request->route('marking'),
+                'from' => $request->route('from'),
+                'to' => $request->route('to'),
+                'error' => $e->getMessage(),
+                'trace' => $e->getTraceAsString(),
+            ]);
+            throw $e;
+        }
    }

    public function serviceReport(Request $request): JsonResponse {
@@ -5,6 +5,7 @@ namespace App\Http\Resources;
 use App\Classes\ValueObjects\Constants\ApprovalStatus;
 use App\Classes\ValueObjects\Constants\OrderRoleTypes;
 use App\Classes\ValueObjects\Constants\TransactionType;
+use Carbon\Carbon;
 use Illuminate\Http\Resources\Json\JsonResource;

 class FetchOrderResource extends JsonResource
@@ -30,7 +31,19 @@ class FetchOrderResource extends JsonResource
            'invoices' => $this->whenLoaded('packingLists', function() {
                $transactions = $this->transactions()->whereNotIn('transactions.status', [0, 1])->whereIn('transactions.type', [TransactionType::SHIPPING_INVOICE, TransactionType::STORAGE_INVOICE])->get();
                foreach ($transactions as $transaction) {
-                    $transaction['is_einvoice_applicable'] = $this->companyModule->company->e_invoice === 1;
+                    $eInvoice = false;
+                    $eInvoiceStartDate = Carbon::parse(env('E_INVOICE_START_DATE', '2025-07-01 00:00:00'));
+                    $transactionCreatedDate = Carbon::parse($transaction->created_at);
+                    $eInvoiceRequestedDate = Carbon::parse($this->companyModule->company->e_invoice_requested_at);
+
+                    if ($transactionCreatedDate->isAfter($eInvoiceStartDate)
+                    &&($transactionCreatedDate->isAfter($eInvoiceRequestedDate) || $transactionCreatedDate->diffInMinutes($eInvoiceRequestedDate) <= 60)
+                    && $this->companyModule->company->e_invoice === 1)
+                    {
+                        $eInvoice = true;
+                    }
+                    $transaction['is_einvoice_applicable'] = $eInvoice;
+                    // $transaction['is_einvoice_applicable'] = $this->companyModule->company->e_invoice === 1;
                }
                return TransactionWithStorageResource::collection($transactions);
            }),
@@ -23,7 +23,7 @@ class OrderPackagesOriginWarehouseResource extends JsonResource
            'reference_contract' => (int) $this->type,
            'type' => (int) $this->type,
            'status' => (int) $this->status,
-            'origin_warehouse_packages' =>  PackingListForPackagesReceivedResource::collection($origin_warehouse_packages), //cief todo: 150 - to update with new resource
+            'origin_warehouse_packages' =>  PackingListForOriginWarehouseResource::collection($origin_warehouse_packages),
            'created_at' => $this->created_at->format('d-m-Y')
        ];
    }
@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Http\Resources;
+
+use App\Classes\ValueObjects\Constants\RoleTypes;
+use App\Models\Order;
+use Illuminate\Http\Resources\Json\JsonResource;
+use Illuminate\Support\Facades\Log;
+
+class PackingListForOriginWarehouseResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        // $exceptionUsers = in_array(Auth()->user()->type, [RoleTypes::SHADOW_ADMIN, RoleTypes::SUPER_ADMIN]);
+        $userType = Auth() && Auth()->user() ? Auth()->user()->type : RoleTypes::USER;
+        $exceptionUsers = in_array($userType, [RoleTypes::SHADOW_ADMIN, RoleTypes::SUPER_ADMIN]);
+
+        $data = [
+            'id' => $this->id,
+            'claimant_id' => $this->claimant_id,
+            'status' => $this->status,
+            'transport' => new TransportResource($this->transports()->first()),
+            'type' => $this->type,
+            'container' => new ContainerResource($this->containers->first()),
+            $this->mergeWhen($this->owner instanceof Order, [
+                'order' => New OrderResource($this->owner)
+            ]),
+        ];
+
+        $packages = !$this->packingLists()->exists() || $exceptionUsers ? $this->packages : $this->packingLists->first()->packages;
+        $data['packages'] = PackageReceivedResource::collection($packages);
+
+        return $data;
+    }
+}
@@ -29,6 +29,6 @@ return [

    'max_age' => 0,

-    'supports_credentials' => false, //cief todo: 137
+    'supports_credentials' => false,

 ];
@@ -8,7 +8,7 @@ services:
  nginx:
    image: nginx:stable-alpine
    platform: linux/amd64
-    container_name: shipping-portal-2-ngnix
+    container_name: shipping-portal-ngnix
    ports:
      - "8081:80"
    volumes:
@@ -23,7 +23,7 @@ services:
  mysql:
    image: mysql:5.7.29
    platform: linux/amd64
-    container_name: shipping-portal-2-mysql
+    container_name: shipping-portal-mysql
    restart: unless-stopped
    tty: true
    ports:
@@ -44,7 +44,7 @@ services:
    build:
      context: .
      dockerfile: Dockerfile
-    container_name: shipping-portal-2-php
+    container_name: shipping-portal-php
    volumes:
      - ../:/var/www/html
    ports:
@@ -1576,8 +1576,6 @@ padding-right: 30px;
 .navbar-center, .navbar-center > li{
     float:none;
  display:inline-block;
-  *display:inline; /* ie7 fix */
-  *zoom:1; /* hasLayout ie7 trigger */
  vertical-align: top;
 }

@@ -2040,7 +2038,7 @@ padding-right: 30px;

 .mfp-figure:after {
 	box-shadow: none !important;
-	background: none !important;	
+	background: none !important;
 }

 .profile-picture {
@@ -16,35 +16,32 @@ window.route = route;
 window.Vapor = Vapor;
 window.Vapor.withBaseAssetUrl(import.meta.env.VITE_VAPOR_ASSET_URL);

+const pinia = createPinia();
 // Create app
 const app = createApp({
-    created() {
+    setup() {
        const { routesGuard } = useGuards();
        routesGuard();
    },
 });

 // Pinia store
-const pinia = createPinia();
 app.use(pinia);

 // V-Money
 app.use(VMoney);
-app.directive('money', Money3Directive);
+// app.directive('money', Money3Directive);

 // Expose stores for legacy Blade templates that are not SFCs
 (app.config.globalProperties as any).authStore = useAuthStore();
 (app.config.globalProperties as any).uiStore = useUiStore();

-
-
 app.config.globalProperties.qr_code_img_url = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=';
 app.config.globalProperties.route = window.route;
-app.config.globalProperties.asset = window.Vapor.asset;


-const modules = import.meta.glob('./**/*.vue', { eager: true });
-
+//const modules = import.meta.glob('./**/*.vue', { eager: true });
+/*
 const STORAGE_KEY = 'shippingPortalComponents';

 const usedComponents = new Set<string>(
@@ -96,364 +93,20 @@ function downloadUsedComponents() {
 }

 (window as any).downloadUsedComponents = downloadUsedComponents;
+*/
+
+// Remove data created by the previously disabled component tracking logic.
+const LEGACY_COMPONENTS_STORAGE_KEY = 'shippingPortalComponents';
+localStorage.removeItem(LEGACY_COMPONENTS_STORAGE_KEY);

 // Auto-register components (eager loaded)
-// const modules = import.meta.glob('./**/*.vue', { eager: true });
-// Object.entries(modules).forEach(([path, module]) => {
-//     const componentName = path.split('/').pop()?.split('.')[0];
-//     if (componentName) {
-//         app.component(componentName, (module as any).default);
-//     }
-// });
-
-// Components
-// import LoadingComponent from './components/general/elements/LoadingComponent.vue';
-// import ModalComponent from './components/general/elements/ModalComponent.vue';
-// import LoginFormComponent from './components/accounts/forms/LoginFormComponent.vue';
-// import ForgetPasswordFormComponent from './components/accounts/forms/ForgetPasswordFormComponent.vue';
-// import RegistrationFormComponent from './components/accounts/forms/RegistrationFormComponent.vue';
-// import LogoutComponent from './components/accounts/elements/LogoutComponent.vue';
-// import ValidationWrapperComponent from './components/general/forms/ValidationWrapperComponent.vue';
-// import ValidationErrorComponent from './components/general/forms/ValidationErrorComponent.vue';
-// import ErrorMessageComponent from './components/general/elements/ErrorMessageComponent.vue';
-// import ListComponent from './components/general/elements/ListComponent.vue';
-// import PaginationComponent from './components/general/elements/PaginationComponent.vue';
-// import TransitionComponent from './components/general/elements/TransitionComponent.vue';
-// import CustomerProfileSectionComponent from './components/companies/sections/CustomerProfileSectionComponent.vue';
-// import DeliveryCustomerProfileSectionComponent from './components/companies/sections/DeliveryCustomerProfileSectionComponent.vue';
-// import WarehouseSectionComponent from './components/companies/sections/WarehouseSectionComponent.vue';
-// import CustomerProfileComponent from './components/companies/elements/CustomerProfileComponent.vue';
-// import QuickOrderComponent from './components/orders/elements/QuickOrderComponent.vue';
-// import OnBoardingSectionComponent from './components/companies/sections/OnBoardingSectionComponent.vue';
-// import IdentificationVerificationComponent from './components/companies/elements/IdentificationVerificationComponent.vue';
-// import AddressVerificationComponent from './components/addresses/elements/AddressVerificationComponent.vue';
-// import UnclaimedPackinglistComponent from './components/orders/elements/UnclaimedPackinglistComponent.vue';
-// import ProfitModelReportSectionComponent from './components/reports/sections/ProfitModelReportSectionComponent.vue';
-// import MonthlySalesReportSectionComponent from './components/reports/sections/MonthlySalesReportSectionComponent.vue';
-// import ServiceReportSectionComponent from './components/reports/sections/ServiceReportSectionComponent.vue';
-// import DatePickerComponent from './components/general/forms/DatePickerComponent.vue';
-// import DatePickerLimitRangeComponent from './components/general/forms/DatePickerLimitRangeComponent.vue';
-// import OpenLinkInNewTabComponent from './components/general/elements/OpenLinkInNewTabComponent.vue';
-// import AddressFormComponent from './components/addresses/forms/AddressFormComponent.vue';
-// import AssignSegmentFormComponent from './components/companies/forms/AssignSegmentFormComponent.vue';
-// import ContactFormComponent from './components/companies/forms/ContactFormComponent.vue';
-// import DetachSegmentFormComponent from './components/companies/forms/DetachSegmentFormComponent.vue';
-// import EInvoiceInfoFormComponent from './components/companies/forms/EInvoiceInfoFormComponent.vue';
-// import EInvoiceRequestFormComponent from './components/companies/forms/EInvoiceRequestFormComponent.vue';
-// import IdentificationVerificationFormComponent from './components/companies/forms/IdentificationVerificationFormComponent.vue';
-// import UpdateCompanyNameFormComponent from './components/companies/forms/UpdateCompanyNameFormComponent.vue';
-// import UpdateCreditTermStatusFormComponent from './components/companies/forms/UpdateCreditTermStatusFormComponent.vue';
-// import UpdateIdentificationNumberFormComponent from './components/companies/forms/UpdateIdentificationNumberFormComponent.vue';
-// import RejectIdentificationVerificationFormComponent from './components/companies/forms/RejectIdentificationVerificationFormComponent.vue';
-// import ChangeCustomerCompanyDetailsFormComponent from './components/orders/forms/ChangeCustomerCompanyDetailsFormComponent.vue';
-// import ChangeCustomerEmailFormComponent from './components/orders/forms/ChangeCustomerEmailFormComponent.vue';
-// import ChangeCustomerContactNumberFormComponent from './components/orders/forms/ChangeCustomerContactNumberFormComponent.vue';
-// import ChangeCustomerNameFormComponent from './components/orders/forms/ChangeCustomerNameFormComponent.vue';
-// import EInvoiceInfoComponent from './components/companies/elements/EInvoiceInfoComponent.vue';
-// import AdminPaymentsBillingSectionComponent from './components/paymentsBilling/sections/AdminPaymentsBillingSectionComponent.vue';
-// import AdminPaymentsBillingPollingSectionComponent from './components/paymentsBilling/sections/AdminPaymentsBillingPollingSectionComponent.vue';
-// import AdminDisputePaymentsBillingComponent from './components/paymentsBilling/elements/AdminDisputePaymentsBillingComponent.vue';
-// import AdminPaymentsBillingWithSearchComponent from './components/paymentsBilling/elements/AdminPaymentsBillingWithSearchComponent.vue';
-// import AdminPaymentsBillingWithSearchPollingComponent from './components/paymentsBilling/elements/AdminPaymentsBillingWithSearchPollingComponent.vue';
-// import SingleParentAdminPaymentsBillingComponent from './components/paymentsBilling/elements/SingleParentAdminPaymentsBillingComponent.vue';
-// import SingleAdminPaymentsBillingWithStorageComponent from './components/paymentsBilling/elements/SingleAdminPaymentsBillingWithStorageComponent.vue';
-// import SingleAdminPaymentsBillingWithoutStorageComponent from './components/paymentsBilling/elements/SingleAdminPaymentsBillingWithoutStorageComponent.vue';
-// import CustomerPaymentsBillingWithStorageComponent from './components/paymentsBilling/elements/CustomerPaymentsBillingWithStorageComponent.vue';
-// import ApproveShippingInvoiceFormComponent from './components/paymentsBilling/forms/ApproveShippingInvoiceFormComponent.vue';
-// import CustomerInvoiceRemarkFormComponent from './components/paymentsBilling/forms/CustomerInvoiceRemarkFormComponent.vue';
-// import DeleteDisputeFormComponent from './components/paymentsBilling/forms/DeleteDisputeFormComponent.vue';
-// import DeleteGroupPaymentAttemptFormComponent from './components/paymentsBilling/forms/DeleteGroupPaymentAttemptFormComponent.vue';
-// import DeleteInvoiceFormComponent from './components/paymentsBilling/forms/DeleteInvoiceFormComponent.vue';
-// import DeleteShippingInvoiceFormComponent from './components/paymentsBilling/forms/DeleteShippingInvoiceFormComponent.vue';
-// import GroupPaymentFormComponent from './components/paymentsBilling/forms/GroupPaymentFormComponent.vue';
-// import InvoiceItemFormComponent from './components/paymentsBilling/forms/InvoiceItemFormComponent.vue';
-// import InvoiceItemsFormComponent from './components/paymentsBilling/forms/InvoiceItemsFormComponent.vue';
-// import PaymentFormComponent from './components/paymentsBilling/forms/PaymentFormComponent.vue';
-// import PaymentVerificationFormComponent from './components/paymentsBilling/forms/PaymentVerificationFormComponent.vue';
-// import RegenerateDisputeInvoiceFormComponent from './components/paymentsBilling/forms/RegenerateDisputeInvoiceFormComponent.vue';
-// import WaiveInvoiceFormComponent from './components/paymentsBilling/forms/WaiveInvoiceFormComponent.vue';
-// import DownloadBillingWithDatesComponent from './components/paymentsBilling/forms/DownloadBillingWithDatesComponent.vue';
-// import DownloadParcelSummaryComponent from './components/paymentsBilling/forms/DownloadParcelSummaryComponent.vue';
-// import NewServiceAnnouncementComponent from './components/companies/elements/NewServiceAnnouncementComponent.vue';
-// import ExportCompanyModuleSummaryFormComponent from './components/reports/forms/ExportCompanyModuleSummaryFormComponent.vue';
-// import NotificationSectionComponent from './components/general/elements/NotificationSectionComponent.vue';
-// import PaymentVerificationComponent from './components/paymentsBilling/elements/PaymentVerificationComponent.vue';
-// import DocumentFileViewerComponent from './components/general/elements/DocumentFileViewerComponent.vue';
-// import FulfilmentInterestedFormComponent from './components/companies/elements/FulfilmentInterestedFormComponent.vue';
-// import FileInputComponent from './components/general/forms/FileInputComponent.vue';
-// import FileUploadComponent from './components/general/forms/FileUploadComponent.vue';
-// import RemarkComponent from './components/general/elements/RemarkComponent.vue';
-// import GeneralConfirmationFormComponent from './components/general/forms/GeneralConfirmationFormComponent.vue';
-// import SelectComponent from './components/general/forms/SelectComponent.vue';
-// import SelectableComponent from './components/general/forms/SelectableComponent.vue';
-// import RemarkFormComponent from './components/general/forms/RemarkFormComponent.vue';
-// import RemarkCommentFormComponent from './components/general/forms/RemarkCommentFormComponent.vue';
-// import ReloadConfirmationFormComponent from './components/general/forms/ReloadConfirmationFormComponent.vue';
-// import HelpMenuFormComponent from './components/general/forms/HelpMenuFormComponent.vue';
-// import DeleteRemarkFormComponent from './components/general/forms/DeleteRemarkFormComponent.vue';
-// import ModalFormComponent from './components/general/forms/ModalFormComponent.vue';
-// import AnchorLinkComponent from './components/general/elements/AnchorLinkComponent.vue';
-// import BearComponent from './components/general/elements/bearComponent.vue';
-// import BoxLoadingComponent from './components/general/elements/BoxLoadingComponent.vue';
-// import HelpMenuComponent from './components/general/elements/HelpMenuComponent.vue';
-// import ListPollingComponent from './components/general/elements/ListPollingComponent.vue';
-// import PasswordProtectedDownloadComponent from './components/general/elements/PasswordProtectedDownloadComponent.vue';
-// import PdfViewerComponent from './components/general/elements/PdfViewerComponent.vue';
-// import RemarkListComponent from './components/general/elements/RemarkListComponent.vue';
-// import SearchComponent from './components/general/elements/SearchComponent.vue';
-// import CustomerPaymentBillingSectionComponent from './components/companies/sections/CustomerPaymentBillingSectionComponent.vue';
-// import PaymentsBillingVariant2Components from './components/paymentsBilling/elements/PaymentsBillingVariant2Components.vue';
-// import GroupPaymentsBillingComponents from './components/paymentsBilling/elements/GroupPaymentsBillingComponents.vue';
-// import WalletComponent from './components/wallets/elements/WalletComponent.vue';
-// import WalletTopUpFormComponent from './components/wallets/forms/WalletTopUpFormComponent.vue';
-// import ViewAnnouncementFormComponent from './components/announcements/forms/ViewAnnouncementFormComponent.vue';
-// import BillingAddressSectionComponent from './components/addresses/sections/BillingAddressSectionComponent.vue';
-// import OrderSectionComponent from './components/orders/sections/OrderSectionComponent.vue';
-// import OrderFormComponent from './components/orders/forms/OrderFormComponent.vue';
-// import SelectAddressComponent from './components/addresses/elements/SelectAddressComponent.vue';
-// import WarehouseAddressFormComponent from './components/addresses/forms/WarehouseAddressFormComponent.vue';
-// import OrderProfileV2SectionComponent from './components/orders/sections/OrderProfileV2SectionComponent.vue';
-// import OrderPackageV3SectionComponent from './components/orders/sections/OrderPackageV3SectionComponent.vue';
-// import OrderPackageReceivedSectionComponent from './components/orders/sections/OrderPackageReceivedSectionComponent.vue';
-// import TaxRebateQrCodeFormComponent from './components/orders/forms/TaxRebateQrCodeFormComponent.vue';
-// import CustPayBillParentComponent from './components/paymentsBilling/elements/CustPayBillParentComponent.vue';
-// import ChangeOrderAddressFormComponent from './components/orders/forms/ChangeOrderAddressFormComponent.vue';
-// import ChangeOrderNumberFormComponent from './components/orders/forms/ChangeOrderNumberFormComponent.vue';
-// import CreateWarehousePackageListFormComponent from './components/orders/forms/CreateWarehousePackageListFormComponent.vue';
-// import DownloadReceivePaymentDepositEntryReportComponent from './components/companies/elements/DownloadReceivePaymentDepositEntryReportComponent.vue';
-// import DownloadCustomersDataReportComponent from './components/companies/elements/DownloadCustomersDataReportComponent.vue';
-// import DownloadUploadSalesInvoiceReportComponent from './components/companies/elements/DownloadUploadSalesInvoiceReportComponent.vue';
-// import DownloadUnpaidSalesInvoiceReportComponent from './components/companies/elements/DownloadUnpaidSalesInvoiceReportComponent.vue';
-// import DownloadReceivePaymentForOrderReportComponent from './components/companies/elements/DownloadReceivePaymentForOrderReportComponent.vue';
-// import UploadComponent from './components/orders/elements/UploadComponent.vue';
-// import OrderComponent from './components/orders/elements/OrderComponent.vue';
-// import ListOrderComponent from './components/orders/elements/ListOrderComponent.vue';
-// import OrderPackageSummaryComponent from './components/orders/elements/OrderPackageSummaryComponent.vue';
-// import CancelOrderFormComponent from './components/orders/forms/CancelOrderFormComponent.vue';
-// import RestoreOrderFormComponent from './components/orders/forms/RestoreOrderFormComponent.vue';
-// import PaymentsBillingComponents from './components/paymentsBilling/elements/PaymentsBillingComponents.vue';
-// import CustomerActivityReportSectionComponent from './components/reports/sections/CustomerActivityReportSectionComponent.vue';
-// import SearchCustomerByEmailComponent from './components/reports/sections/SearchCustomerByEmailComponent.vue';
-// import CustomerReportSectionComponent from './components/reports/sections/CustomerReportSectionComponent.vue';
-// import CompanyComponent from './components/companies/elements/CompanyComponent.vue';
-// import UserCompanyComponent from './components/companies/elements/UserCompanyComponent.vue';
-// import OrderSearchSectionComponent from './components/orders/sections/OrderSearchSectionComponent.vue';
-// import WarehouseListExportComponent from './components/companies/elements/WarehouseListExportComponent.vue';
-// import WarehousePackingListComponent from './components/containers/elements/WarehousePackingListComponent.vue';
-// import ParcelComponent from './components/orders/elements/ParcelComponent.vue';
-// import DeleteParcelFormComponent from './components/paymentsBilling/forms/DeleteParcelFormComponent.vue';
-// import ContainerSearchComponent from './components/containers/elements/ContainerSearchComponent.vue';
-// import CreateLoadContainerFormComponent from './components/containers/forms/CreateLoadContainerFormComponent.vue';
-// import ContainerComponent from './components/containers/elements/ContainerComponent.vue';
-// import PackingListSectionComponent from './components/containers/sections/PackingListSectionComponent.vue';
-// import SegmentCompanyComponent from './components/segments/elements/SegmentCompanyComponent.vue';
-// import AdminFeedbackCustomerSectionComponent from './components/feedback/sections/AdminFeedbackCustomerSectionComponent.vue';
-// import GenerateFeedbackLinkFormComponent from './components/feedback/forms/GenerateFeedbackLinkFormComponent.vue';
-// import QuestionAnswerComponent from './components/feedback/elements/QuestionAnswerComponent.vue';
-// import UserProfileComponent from './components/settings/elements/UserProfileComponent.vue';
-// import UploadDebtorExcelComponent from './components/containers/elements/UploadDebtorExcelComponent.vue';
-// import PermitsReminderComponent from './components/settings/elements/PermitsReminderComponent.vue';
-// import UserFormComponent from './components/user/form/UserFormComponent.vue';
-// import ListAdminComponent from './components/user/elements/ListAdminComponent.vue';
-// import BasePriceFormComponent from './components/settings/forms/BasePriceFormComponent.vue';
-// import ListBasePriceSectionComponent from './components/settings/elements/ListBasePriceSectionComponent.vue';
-// import EditSegmentPriceFormComponent from './components/settings/forms/EditSegmentPriceFormComponent.vue';
-// import SegmentFormComponent from './components/settings/forms/SegmentFormComponent.vue';
-// import SegmentComponent from './components/settings/elements/SegmentComponent.vue';
-// import AnnouncementFormComponent from './components/settings/forms/AnnouncementFormComponent.vue';
-// import AnnouncementListComponent from './components/announcements/elements/AnnouncementListComponent.vue';
-// import DeleteAnnouncementFormComponent from './components/settings/forms/DeleteAnnouncementFormComponent.vue';
-// import DetachAnnouncementFromSegmentFormComponent from './components/announcements/forms/DetachAnnouncementFromSegmentFormComponent.vue';
-// import AssignAnnouncementToSegmentFormComponent from './components/announcements/forms/AssignAnnouncementToSegmentFormComponent.vue';
-// import PostcodeSectionComponent from './components/settings/elements/PostcodeSectionComponent.vue';
-// import StatesChargesComponent from './components/settings/elements/StatesChargesComponent.vue';
-// import EditStateChargesFormComponent from './components/settings/forms/EditStateChargesFormComponent.vue';
-// import WarehouseChargesComponent from './components/settings/elements/WarehouseChargesComponent.vue';
-// import EditWarehouseChargesFormComponent from './components/settings/forms/EditWarehouseChargesFormComponent.vue';
-// import PaymentAttemptLimitFormComponent from './components/settings/forms/PaymentAttemptLimitFormComponent.vue';
-// import DisplayWarehouseAddressComponent from './components/addresses/elements/DisplayWarehouseAddressComponent.vue';
-// import AddPermitsReminderFormComponent from './components/settings/forms/AddPermitsReminderFormComponent.vue';
-// import PermitsReminderItemComponent from './components/settings/elements/PermitsReminderItemComponent.vue';
-// import UserComponent from './components/user/elements/UserComponent.vue';
-// import ListPostcodeComponent from './components/settings/elements/ListPostcodeComponent.vue';
-// import ChangeAdminRoleTypeFormComponent from './components/orders/forms/ChangeAdminRoleTypeFormComponent.vue';
-// import DeleteUserFormComponent from './components/user/form/DeleteUserFormComponent.vue';
-// import DeclarePostcodeAreaFormComponent from './components/containers/forms/DeclarePostcodeAreaFormComponent.vue';
-
-
-// app.component('LoadingComponent', LoadingComponent);
-// app.component('ModalComponent', ModalComponent);
-// app.component('LoginFormComponent', LoginFormComponent);
-// app.component('ForgetPasswordFormComponent', ForgetPasswordFormComponent);
-// app.component('RegistrationFormComponent', RegistrationFormComponent);
-// app.component('LogoutComponent', LogoutComponent);
-// app.component('ValidationWrapperComponent', ValidationWrapperComponent);
-// app.component('ValidationErrorComponent', ValidationErrorComponent);
-// app.component('ErrorMessageComponent', ErrorMessageComponent);
-// app.component('ListComponent', ListComponent);
-// app.component('PaginationComponent', PaginationComponent);
-// app.component('TransitionComponent', TransitionComponent);
-// app.component('CustomerProfileSectionComponent', CustomerProfileSectionComponent);
-// app.component('DeliveryCustomerProfileSectionComponent', DeliveryCustomerProfileSectionComponent);
-// app.component('WarehouseSectionComponent', WarehouseSectionComponent);
-// app.component('CustomerProfileComponent', CustomerProfileComponent);
-// app.component('QuickOrderComponent', QuickOrderComponent);
-// app.component('OnBoardingSectionComponent', OnBoardingSectionComponent);
-// app.component('IdentificationVerificationComponent', IdentificationVerificationComponent);
-// app.component('AddressVerificationComponent', AddressVerificationComponent);
-// app.component('UnclaimedPackinglistComponent', UnclaimedPackinglistComponent);
-// app.component('ProfitModelReportSectionComponent', ProfitModelReportSectionComponent);
-// app.component('MonthlySalesReportSectionComponent', MonthlySalesReportSectionComponent);
-// app.component('ServiceReportSectionComponent', ServiceReportSectionComponent);
-// app.component('DatePickerComponent', DatePickerComponent);
-// app.component('DatePickerLimitRangeComponent', DatePickerLimitRangeComponent);
-// app.component('OpenLinkInNewTabComponent', OpenLinkInNewTabComponent);
-// app.component('AddressFormComponent', AddressFormComponent);
-// app.component('AssignSegmentFormComponent', AssignSegmentFormComponent);
-// app.component('ContactFormComponent', ContactFormComponent);
-// app.component('DetachSegmentFormComponent', DetachSegmentFormComponent);
-// app.component('EInvoiceInfoFormComponent', EInvoiceInfoFormComponent);
-// app.component('EInvoiceRequestFormComponent', EInvoiceRequestFormComponent);
-// app.component('IdentificationVerificationFormComponent', IdentificationVerificationFormComponent);
-// app.component('UpdateCompanyNameFormComponent', UpdateCompanyNameFormComponent);
-// app.component('UpdateCreditTermStatusFormComponent', UpdateCreditTermStatusFormComponent);
-// app.component('UpdateIdentificationNumberFormComponent', UpdateIdentificationNumberFormComponent);
-// app.component('RejectIdentificationVerificationFormComponent', RejectIdentificationVerificationFormComponent);
-// app.component('ChangeCustomerCompanyDetailsFormComponent', ChangeCustomerCompanyDetailsFormComponent);
-// app.component('ChangeCustomerEmailFormComponent', ChangeCustomerEmailFormComponent);
-// app.component('ChangeCustomerContactNumberFormComponent', ChangeCustomerContactNumberFormComponent);
-// app.component('ChangeCustomerNameFormComponent', ChangeCustomerNameFormComponent);
-// app.component('EInvoiceInfoComponent', EInvoiceInfoComponent);
-// app.component('AdminPaymentsBillingSectionComponent', AdminPaymentsBillingSectionComponent);
-// app.component('AdminPaymentsBillingPollingSectionComponent', AdminPaymentsBillingPollingSectionComponent);
-// app.component('AdminDisputePaymentsBillingComponent', AdminDisputePaymentsBillingComponent);
-// app.component('AdminPaymentsBillingWithSearchComponent', AdminPaymentsBillingWithSearchComponent);
-// app.component('AdminPaymentsBillingWithSearchPollingComponent', AdminPaymentsBillingWithSearchPollingComponent);
-// app.component('SingleParentAdminPaymentsBillingComponent', SingleParentAdminPaymentsBillingComponent);
-// app.component('SingleAdminPaymentsBillingWithStorageComponent', SingleAdminPaymentsBillingWithStorageComponent);
-// app.component('SingleAdminPaymentsBillingWithoutStorageComponent', SingleAdminPaymentsBillingWithoutStorageComponent);
-// app.component('CustomerPaymentsBillingWithStorageComponent', CustomerPaymentsBillingWithStorageComponent);
-// app.component('ApproveShippingInvoiceFormComponent', ApproveShippingInvoiceFormComponent);
-// app.component('CustomerInvoiceRemarkFormComponent', CustomerInvoiceRemarkFormComponent);
-// app.component('DeleteDisputeFormComponent', DeleteDisputeFormComponent);
-// app.component('DeleteGroupPaymentAttemptFormComponent', DeleteGroupPaymentAttemptFormComponent);
-// app.component('DeleteInvoiceFormComponent', DeleteInvoiceFormComponent);
-// app.component('DeleteShippingInvoiceFormComponent', DeleteShippingInvoiceFormComponent);
-// app.component('GroupPaymentFormComponent', GroupPaymentFormComponent);
-// app.component('InvoiceItemFormComponent', InvoiceItemFormComponent);
-// app.component('InvoiceItemsFormComponent', InvoiceItemsFormComponent);
-// app.component('PaymentFormComponent', PaymentFormComponent);
-// app.component('PaymentVerificationFormComponent', PaymentVerificationFormComponent);
-// app.component('RegenerateDisputeInvoiceFormComponent', RegenerateDisputeInvoiceFormComponent);
-// app.component('WaiveInvoiceFormComponent', WaiveInvoiceFormComponent);
-// app.component('DownloadBillingWithDatesComponent', DownloadBillingWithDatesComponent);
-// app.component('DownloadParcelSummaryComponent', DownloadParcelSummaryComponent);
-// app.component('NewServiceAnnouncementComponent', NewServiceAnnouncementComponent);
-// app.component('ExportCompanyModuleSummaryFormComponent', ExportCompanyModuleSummaryFormComponent);
-// app.component('NotificationSectionComponent', NotificationSectionComponent);
-// app.component('PaymentVerificationComponent', PaymentVerificationComponent);
-// app.component('DocumentFileViewerComponent', DocumentFileViewerComponent);
-// app.component('FulfilmentInterestedFormComponent', FulfilmentInterestedFormComponent);
-// app.component('FileInputComponent', FileInputComponent);
-// app.component('FileUploadComponent', FileUploadComponent);
-// app.component('RemarkComponent', RemarkComponent);
-// app.component('GeneralConfirmationFormComponent', GeneralConfirmationFormComponent);
-// app.component('SelectComponent', SelectComponent);
-// app.component('SelectableComponent', SelectableComponent);
-// app.component('RemarkFormComponent', RemarkFormComponent);
-// app.component('RemarkCommentFormComponent', RemarkCommentFormComponent);
-// app.component('ReloadConfirmationFormComponent', ReloadConfirmationFormComponent);
-// app.component('HelpMenuFormComponent', HelpMenuFormComponent);
-// app.component('DeleteRemarkFormComponent', DeleteRemarkFormComponent);
-// app.component('ModalFormComponent', ModalFormComponent);
-// app.component('AnchorLinkComponent', AnchorLinkComponent);
-// app.component('BearComponent', BearComponent);
-// app.component('BoxLoadingComponent', BoxLoadingComponent);
-// app.component('HelpMenuComponent', HelpMenuComponent);
-// app.component('ListPollingComponent', ListPollingComponent);
-// app.component('PasswordProtectedDownloadComponent', PasswordProtectedDownloadComponent);
-// app.component('PdfViewerComponent', PdfViewerComponent);
-// app.component('RemarkListComponent', RemarkListComponent);
-// app.component('SearchComponent', SearchComponent);
-// app.component('CustomerPaymentBillingSectionComponent', CustomerPaymentBillingSectionComponent);
-// app.component('PaymentsBillingVariant2Components', PaymentsBillingVariant2Components);
-// app.component('GroupPaymentsBillingComponents', GroupPaymentsBillingComponents);
-// app.component('WalletComponent', WalletComponent);
-// app.component('WalletTopUpFormComponent', WalletTopUpFormComponent);
-// app.component('ViewAnnouncementFormComponent', ViewAnnouncementFormComponent);
-// app.component('BillingAddressSectionComponent', BillingAddressSectionComponent);
-// app.component('OrderSectionComponent', OrderSectionComponent);
-// app.component('OrderFormComponent', OrderFormComponent);
-// app.component('SelectAddressComponent', SelectAddressComponent);
-// app.component('WarehouseAddressFormComponent', WarehouseAddressFormComponent);
-// app.component('OrderProfileV2SectionComponent', OrderProfileV2SectionComponent);
-// app.component('OrderPackageV3SectionComponent', OrderPackageV3SectionComponent);
-// app.component('OrderPackageReceivedSectionComponent', OrderPackageReceivedSectionComponent);
-// app.component('TaxRebateQrCodeFormComponent', TaxRebateQrCodeFormComponent);
-// app.component('CustPayBillParentComponent', CustPayBillParentComponent);
-// app.component('ChangeOrderAddressFormComponent', ChangeOrderAddressFormComponent);
-// app.component('ChangeOrderNumberFormComponent', ChangeOrderNumberFormComponent);
-// app.component('CreateWarehousePackageListFormComponent', CreateWarehousePackageListFormComponent);
-// app.component('DownloadReceivePaymentDepositEntryReportComponent', DownloadReceivePaymentDepositEntryReportComponent);
-// app.component('DownloadCustomersDataReportComponent', DownloadCustomersDataReportComponent);
-// app.component('DownloadUploadSalesInvoiceReportComponent', DownloadUploadSalesInvoiceReportComponent);
-// app.component('DownloadUnpaidSalesInvoiceReportComponent', DownloadUnpaidSalesInvoiceReportComponent);
-// app.component('DownloadReceivePaymentForOrderReportComponent', DownloadReceivePaymentForOrderReportComponent);
-// app.component('UploadComponent', UploadComponent);
-// app.component('OrderComponent', OrderComponent);
-// app.component('ListOrderComponent', ListOrderComponent);
-// app.component('OrderPackageSummaryComponent', OrderPackageSummaryComponent);
-// app.component('CancelOrderFormComponent', CancelOrderFormComponent);
-// app.component('RestoreOrderFormComponent', RestoreOrderFormComponent);
-// app.component('PaymentsBillingComponents', PaymentsBillingComponents);
-// app.component('CustomerActivityReportSectionComponent', CustomerActivityReportSectionComponent);
-// app.component('SearchCustomerByEmailComponent', SearchCustomerByEmailComponent);
-// app.component('CustomerReportSectionComponent', CustomerReportSectionComponent);
-// app.component('CompanyComponent', CompanyComponent);
-// app.component('UserCompanyComponent', UserCompanyComponent);
-// app.component('OrderSearchSectionComponent', OrderSearchSectionComponent);
-// app.component('WarehouseListExportComponent', WarehouseListExportComponent);
-// app.component('WarehousePackingListComponent', WarehousePackingListComponent);
-// app.component('ParcelComponent', ParcelComponent);
-// app.component('DeleteParcelFormComponent', DeleteParcelFormComponent);
-// app.component('ContainerSearchComponent', ContainerSearchComponent);
-// app.component('CreateLoadContainerFormComponent', CreateLoadContainerFormComponent);
-// app.component('ContainerComponent', ContainerComponent);
-// app.component('PackingListSectionComponent', PackingListSectionComponent);
-// app.component('SegmentCompanyComponent', SegmentCompanyComponent);
-// app.component('AdminFeedbackCustomerSectionComponent', AdminFeedbackCustomerSectionComponent);
-// app.component('GenerateFeedbackLinkFormComponent', GenerateFeedbackLinkFormComponent);
-// app.component('QuestionAnswerComponent', QuestionAnswerComponent);
-// app.component('UserProfileComponent', UserProfileComponent);
-// app.component('UploadDebtorExcelComponent', UploadDebtorExcelComponent);
-// app.component('PermitsReminderComponent', PermitsReminderComponent);
-// app.component('UserFormComponent', UserFormComponent);
-// app.component('ListAdminComponent', ListAdminComponent);
-// app.component('BasePriceFormComponent', BasePriceFormComponent);
-// app.component('ListBasePriceSectionComponent', ListBasePriceSectionComponent);
-// app.component('EditSegmentPriceFormComponent', EditSegmentPriceFormComponent);
-// app.component('SegmentFormComponent', SegmentFormComponent);
-// app.component('SegmentComponent', SegmentComponent);
-// app.component('AnnouncementFormComponent', AnnouncementFormComponent);
-// app.component('AnnouncementListComponent', AnnouncementListComponent);
-// app.component('DeleteAnnouncementFormComponent', DeleteAnnouncementFormComponent);
-// app.component('DetachAnnouncementFromSegmentFormComponent', DetachAnnouncementFromSegmentFormComponent);
-// app.component('AssignAnnouncementToSegmentFormComponent', AssignAnnouncementToSegmentFormComponent);
-// app.component('PostcodeSectionComponent', PostcodeSectionComponent);
-// app.component('StatesChargesComponent', StatesChargesComponent);
-// app.component('EditStateChargesFormComponent', EditStateChargesFormComponent);
-// app.component('WarehouseChargesComponent', WarehouseChargesComponent);
-// app.component('EditWarehouseChargesFormComponent', EditWarehouseChargesFormComponent);
-// app.component('PaymentAttemptLimitFormComponent', PaymentAttemptLimitFormComponent);
-// app.component('DisplayWarehouseAddressComponent', DisplayWarehouseAddressComponent);
-// app.component('AddPermitsReminderFormComponent', AddPermitsReminderFormComponent);
-// app.component('PermitsReminderItemComponent', PermitsReminderItemComponent);
-// app.component('UserComponent', UserComponent);
-// app.component('ListPostcodeComponent', ListPostcodeComponent);
-// app.component('ChangeAdminRoleTypeFormComponent', ChangeAdminRoleTypeFormComponent);
-// app.component('DeleteUserFormComponent', DeleteUserFormComponent);
-// app.component('DeclarePostcodeAreaFormComponent', DeclarePostcodeAreaFormComponent);
-
+const modules = import.meta.glob('./**/*.vue', { eager: true });
+Object.entries(modules).forEach(([path, module]) => {
+    const componentName = path.split('/').pop()?.split('.')[0];
+    if (componentName) {
+        app.component(componentName, (module as any).default);
+    }
+});

 // Register tooltip directive
 app.directive('tooltip', {
@@ -172,7 +172,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, email, numeric, sameAs, requiredIf } from '@vuelidate/validators';
 import { useAuthStore } from '@/stores/auth';
 import { useUiStore } from '@/stores/ui';
-import { useRequest } from '@/composables/useRequest';
+import { useModalFormHandler } from '@/composables/useModalFormHandler';
 import route from '@/general/functions/router';
 import ErrorMessageComponent from '@/components/general/elements/ErrorMessageComponent.vue';
 import ValidationWrapperComponent from '@/components/general/forms/ValidationWrapperComponent.vue';
@@ -181,11 +181,10 @@ const props = defineProps<{
    section: string;
 }>();

-const { submit } = useRequest();
+const { submit, error } = useModalFormHandler(props);
 const authStore = useAuthStore();
 const uiStore = useUiStore();

-const error = ref('');
 const step = ref(1);
 const parameters = reactive({
    name: '',
@@ -220,7 +219,7 @@ const rules = computed(() => ({
        },
        password_confirmation: {
            required: requiredIf(() => step.value === 2),
-            sameAs: sameAs(parameters.password)
+            sameAs: sameAs(parameters.password, 'password')
        },
        identification_no: {
            required: requiredIf(() => step.value === 1)
@@ -266,9 +265,6 @@ const submitForm = async () => {
                        access_token: response.payload.access_token,
                        redirect_url: response.payload.redirect_url
                    });
-                },
-                errorHandler: (response: any) => {
-                    error.value = response.message;
                }
            }
        );
@@ -35,7 +35,7 @@ const props = defineProps<{
    section: string;
 }>();

-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';
 const { submit } = useRequest();

 const parameters = ref({
@@ -44,7 +44,7 @@
 import { reactive, ref } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, email } from '@vuelidate/validators';
-import { useRequest } from '@/composables/useRequest';
+import { useModalFormHandler } from '@/composables/useModalFormHandler';
 import { useAuthStore } from '@/stores/auth';
 import { useUiStore } from '@/stores/ui';
 import route from '@/general/functions/router';
@@ -55,7 +55,7 @@ const props = defineProps<{
    section: string;
 }>();

-const { submit } = useRequest();
+const { submit, error } = useModalFormHandler(props);
 const authStore = useAuthStore();
 const uiStore = useUiStore();
 const rules = {
@@ -65,7 +65,6 @@ const rules = {
    }
 };

-const error = ref('');
 const parameters = reactive({
    email: '',
    password: ''
@@ -92,11 +91,8 @@ const submitForm = async () => {
                    access_token: response.payload.access_token,
                    redirect_url: response.payload.redirect_url
                });
-            },
-            errorHandler: (response: any) => {
-                error.value = response.message;
            }
        }
    );
 };
-</script>
+</script>
@@ -48,7 +48,7 @@ import { useModalFormHandler } from '@/composables/useModalFormHandler';
 import { useAuthStore } from '@/stores/auth';
 import { useUiStore } from '@/stores/ui';
 import { useRequest } from '@/composables/useRequest';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 const authStore = useAuthStore();
 const uiStore = useUiStore();
@@ -55,7 +55,7 @@ import { required, email } from '@vuelidate/validators'
 import { useRequest } from '@/composables/useRequest'
 import { useAuthStore } from '@/stores/auth';
 import { useUiStore } from '@/stores/ui'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';

 interface Props {
    section: string
@@ -80,7 +80,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, email, numeric, sameAs } from '@vuelidate/validators';
 import { useAuthStore } from '@/stores/auth';
 import { useUiStore } from '@/stores/ui';
-import { useRequest } from '@/composables/useRequest';
+import { useModalFormHandler } from '@/composables/useModalFormHandler';
 import route from '@/general/functions/router';
 import ErrorMessageComponent from '@/components/general/elements/ErrorMessageComponent.vue';
 import ValidationWrapperComponent from '@/components/general/forms/ValidationWrapperComponent.vue';
@@ -90,11 +90,10 @@ const props = defineProps<{
    section: string;
 }>();

-const { submit } = useRequest();
+const { submit, error } = useModalFormHandler(props);
 const authStore = useAuthStore();
 const uiStore = useUiStore();

-const error = ref('');
 const parameters = reactive({
    company_id: props.id,
    name: '',
@@ -112,7 +111,7 @@ const rules = computed(() => ({
        password: { required },
        password_confirmation: {
            required,
-            sameAs: sameAs(parameters.password)
+            sameAs: sameAs(parameters.password, 'password')
        }
    }
 }));
@@ -135,9 +134,6 @@ const submitForm = async () => {
                    access_token: response.payload.access_token,
                    redirect_url: response.payload.redirect_url
                });
-            },
-            errorHandler: (response: any) => {
-                error.value = response.message;
            }
        }
    );
@@ -55,7 +55,7 @@ const props = defineProps<{
    section: string;
 }>();

-const { submit } = useModalFormHandler({ section: props.section })
+const { submit, error } = useModalFormHandler({ section: props.section })
 const authStore = useAuthStore();
 const uiStore = useUiStore();
 const rules = {
@@ -65,7 +65,6 @@ const rules = {
    }
 };

-const error = ref('');
 const parameters = reactive({
    email: '',
    password: ''
@@ -92,9 +91,6 @@ const submitForm = async () => {
                    access_token: response.payload.access_token,
                    redirect_url: response.payload.redirect_url
                });
-            },
-            errorHandler: (response: any) => {
-                error.value = response.message;
            }
        }
    );
@@ -76,7 +76,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, email, numeric, sameAs } from '@vuelidate/validators';
 import { useAuthStore } from '@/stores/auth';
 import { useUiStore } from '@/stores/ui';
-import { useRequest } from '@/composables/useRequest';
+import { useModalFormHandler } from '@/composables/useModalFormHandler';
 import route from '@/general/functions/router';
 import ErrorMessageComponent from '@/components/general/elements/ErrorMessageComponent.vue';
 import ValidationWrapperComponent from '@/components/general/forms/ValidationWrapperComponent.vue';
@@ -85,11 +85,10 @@ const props = defineProps<{
    section: string;
 }>();

-const { submit } = useRequest();
+const { submit, error } = useModalFormHandler(props);
 const authStore = useAuthStore();
 const uiStore = useUiStore();

-const error = ref('');
 const parameters = reactive({
    name: '',
    email: '',
@@ -108,7 +107,7 @@ const rules = computed(() => ({
        password: { required },
        password_confirmation: {
            required,
-            sameAs: sameAs(parameters.password)
+            sameAs: sameAs(parameters.password, 'password')
        },
    }
 }));
@@ -132,9 +131,6 @@ const submitForm = async () => {
                    redirect_url: response.payload.redirect_url
                });
            },
-            errorHandler: (response: any) => {
-                error.value = response.message;
-            }
        }
    );
 };
@@ -34,20 +34,29 @@
                </div>
            </div>
        </div>
-    </div>    
+    </div>
 </template>
 <script setup lang="ts">
 import { reactive, ref, watch } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, email } from '@vuelidate/validators';
 import { useUiStore } from '@/stores/ui';
-import { useRequest } from '@/composables/useRequest';
+import { useModalFormHandler } from '@/composables/useModalFormHandler';
 import route from '@/general/functions/router';
 import ValidationWrapperComponent from '@/components/general/forms/ValidationWrapperComponent.vue';

+interface Props {
+    data?: any;
+    section: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    data: null
+});
+
 const emit = defineEmits(['updateStatus']);

-const { submit } = useRequest();
+const { submit } = useModalFormHandler(props);
 const uiStore = useUiStore();

 const parameters = reactive({
@@ -260,7 +260,7 @@ import { computed, reactive, ref } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, email, numeric, sameAs, requiredIf } from '@vuelidate/validators';
 import { useAuthStore } from '@/stores/auth';
-import { useRequest } from '@/composables/useRequest';
+import { useModalFormHandler } from '@/composables/useModalFormHandler';
 import route from '@/general/functions/router';
 import ErrorMessageComponent from '@/components/general/elements/ErrorMessageComponent.vue';
 import ValidationWrapperComponent from '@/components/general/forms/ValidationWrapperComponent.vue';
@@ -270,10 +270,9 @@ const props = defineProps<{
    section: string;
 }>();

-const { submit } = useRequest();
+const { submit, error } = useModalFormHandler(props);
 const authStore = useAuthStore();

-const error = ref('');
 const step = ref(1);
 const parameters = reactive({
    name: '',
@@ -308,7 +307,7 @@ const rules = computed(() => ({
        },
        password_confirmation: {
            required: requiredIf(() => step.value === 2),
-            sameAs: sameAs(parameters.password)
+            sameAs: sameAs(parameters.password, 'password')
        },
        identification_no: {
            required: requiredIf(() => step.value === 1)
@@ -354,9 +353,6 @@ const submitForm = async () => {
                        access_token: response.payload.access_token,
                        redirect_url: response.payload.redirect_url
                    });
-                },
-                errorHandler: (response: any) => {
-                    error.value = response.message;
                }
            }
        );
@@ -364,4 +360,4 @@ const submitForm = async () => {
        await changeStep('next');
    }
 };
-</script>
+</script>
@@ -63,7 +63,7 @@ import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import { useRequest } from '@/composables/useRequest'
 import { useUiStore } from '@/stores/ui'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';

 interface Props {
    section: string
@@ -125,6 +125,7 @@ import { ref, watch } from 'vue';
 import { useQueueStore } from '@/stores/queue';
 import { useRequest } from '@/composables/useRequest';
 import route from '@/general/functions/router';
+import { useModalFormHandler } from '@/composables/useModalFormHandler';

 interface Props {
    data?: any;
@@ -136,11 +137,10 @@ const props = withDefaults(defineProps<Props>(), {
 });

 const queueStore = useQueueStore();
-const { submit } = useRequest();
+const { submit } = useModalFormHandler(props);

 const item = ref(props.data ? JSON.parse(JSON.stringify(props.data)) : {});
 const isLoading = ref(false);
-const error = ref('');

 watch(() => props.data, (newData) => {
    if (newData) {
@@ -150,24 +150,9 @@ watch(() => props.data, (newData) => {
    }
 }, { deep: true });

-const successHandler = () => {
-    isLoading.value = false;
-    queueStore.reloadList({ name: props.section });
-    error.value = '';
-};
-
-const errorHandler = (err: any) => {
-    isLoading.value = false;
-    queueStore.reloadList({ name: props.section });
-    error.value = err.message || 'An error occurred';
-};
-
 const approveAddress = (status: number) => {
    isLoading.value = true;
    const url = route('api.order.address.status.update', item.value.id, status);
-    submit(url, 'put', 'addressVerificationSection', true, true, null, {
-        successHandler: successHandler,
-        errorHandler: errorHandler
-    });
+    submit(url, 'put', 'addressVerificationSection', true, true, null);
 };
 </script>
@@ -321,4 +321,5 @@ const submitForm = async () => {
        }
    });
 };
+
 </script>
@@ -27,6 +27,7 @@
 import { useComponentHandler } from '@/composables/useComponentHandler';
 import { useModalFormHandler } from '@/composables/useModalFormHandler';
 import { useRequest } from '@/composables/useRequest';
+import route from '@/general/functions/router';

 const props = defineProps<{
    section: string;
@@ -115,7 +115,7 @@ import { ref, onMounted, computed } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required, requiredIf } from '@vuelidate/validators'
 import { useModalFormHandler } from '@/composables/useModalFormHandler'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';
 import { useAuthStore } from '@/stores/auth'

 interface Props {
@@ -67,7 +67,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useRequest } from '@/composables/useRequest';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 const props = withDefaults(defineProps<{
    section?: string;
@@ -41,7 +41,7 @@ import { ref, computed } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import { useModalFormHandler } from '@/composables/useModalFormHandler'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';
 import { useUiStore } from '@/stores/ui';

 interface Props {
@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import { useComponentHandler } from '@/composables/useComponentHandler';
 import { useModalFormHandler } from '@/composables/useModalFormHandler';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 const props = defineProps<{
    announcement_id: number;
@@ -42,12 +42,13 @@
 <script setup lang="ts">
 import route from '@/general/functions/router';
 import { ref, computed } from 'vue';
+import DatePickerLimitRangeComponent from '@/components/general/forms/DatePickerLimitRangeComponent.vue';

 const maxDays = ref(180);
 const startDate = ref('');
 const endDate = ref('');
 const isValidRange = ref(false);
-const endDatePicker = ref<any>(null);
+const endDatePicker = ref<InstanceType<typeof DatePickerLimitRangeComponent> | null>(null);

 const onStartDateChange = (date: string) => {
    if (date) {
@@ -76,6 +76,7 @@
 <script setup lang="ts">
 import route from '@/general/functions/router';
 import { ref, computed } from 'vue';
+import DatePickerLimitRangeComponent from '@/components/general/forms/DatePickerLimitRangeComponent.vue';

 const isCollapsed = ref(false);
 const maxDays = ref(180);
@@ -83,7 +84,7 @@ const startDate = ref('');
 const endDate = ref('');
 const isValidRange = ref(false);
 const section = ref('ExportReceivePaymentDepositEntryReportSection');
-const endDatePicker = ref<any>(null);
+const endDatePicker = ref<InstanceType<typeof DatePickerLimitRangeComponent> | null>(null);

 const onStartDateChange = (date: string) => {
    if (date) {
@@ -87,6 +87,7 @@
 <script setup lang="ts">
 import route from '@/general/functions/router';
 import { ref, computed } from 'vue';
+import DatePickerLimitRangeComponent from '@/components/general/forms/DatePickerLimitRangeComponent.vue';

 const isCollapsed = ref(false);
 const maxDays = ref(180);
@@ -94,7 +95,7 @@ const startDate = ref('');
 const endDate = ref('');
 const isValidRange = ref(false);
 const section = ref('ExportReceivePaymentDepositForOrderSection');
-const endDatePicker = ref<any>(null);
+const endDatePicker = ref<InstanceType<typeof DatePickerLimitRangeComponent> | null>(null);

 const onStartDateChange = (date: string) => {
    if (date) {
@@ -76,13 +76,14 @@
 <script setup lang="ts">
 import route from '@/general/functions/router';
 import { ref, computed } from 'vue';
+import DatePickerLimitRangeComponent from '@/components/general/forms/DatePickerLimitRangeComponent.vue';

 const isCollapsed = ref(false);
 const maxDays = ref(180);
 const startDate = ref('');
 const endDate = ref('');
 const isValidRange = ref(false);
-const endDatePicker = ref<any>(null);
+const endDatePicker = ref<InstanceType<typeof DatePickerLimitRangeComponent> | null>(null);

 const onStartDateChange = (date: string) => {
    if (date) {
@@ -110,6 +110,7 @@
 <script setup lang="ts">
 import route from '@/general/functions/router';
 import { ref, computed } from 'vue';
+import DatePickerLimitRangeComponent from '@/components/general/forms/DatePickerLimitRangeComponent.vue';

 const isCollapsed = ref(false);
 const maxDays = ref(180);
@@ -118,7 +119,7 @@ const endDate = ref('');
 const isValidRange = ref(false);
 const section = ref('ImportExportSalesInvoiceReportSection');
 const generateEInvoicesUrl = ref<string | null>(null);
-const endDatePicker = ref<any>(null);
+const endDatePicker = ref<InstanceType<typeof DatePickerLimitRangeComponent> | null>(null);

 const onStartDateChange = (date: string) => {
    if (date) {
@@ -184,7 +184,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { useQueueStore } from '@/stores/queue';
-import { useRequest } from '@/composables/useRequest';
+import { useModalFormHandler } from '@/composables/useModalFormHandler';
 import { useUiStore } from '@/stores/ui';
 import { useAuthStore } from '@/stores/auth';
 import route from '@/general/functions/router';
@@ -194,17 +194,14 @@ const props = defineProps<{
    section: string;
 }>();

-const queueStore = useQueueStore();
-const uiStore = useUiStore();
 const authStore = useAuthStore();
-const { submit } = useRequest();
+const { submit } = useModalFormHandler(props);

 const expanded = ref(false);
 const isEditIdentificationNumber = ref(false);
 const isEditCompanyName = ref(false);
 const item = ref(props.data ? JSON.parse(JSON.stringify(props.data)) : {});
 const isLoading = ref(false);
-const error = ref('');

 watch(() => props.data, (newData) => {
    if (newData) {
@@ -214,24 +211,9 @@ watch(() => props.data, (newData) => {
    }
 }, { deep: true });

-const successHandler = () => {
-    isLoading.value = false;
-    queueStore.reloadList({ name: props.section });
-    error.value = '';
-};
-
-const errorHandler = (err: any) => {
-    isLoading.value = false;
-    queueStore.reloadList({ name: props.section });
-    error.value = err.message || 'An error occurred';
-};
-
 const approveDocument = (status: string) => {
    isLoading.value = true;
    const url = route('api.company.identification.approval', item.value.owner.id, item.value.id, status);
-    submit(url, 'put', 'identificationVerificationSection', true, true, null, {
-        successHandler: successHandler,
-        errorHandler: errorHandler
-    });
+    submit(url, 'put', 'identificationVerificationSection', true, true, null);
 };
 </script>
@@ -130,7 +130,7 @@ import { useAuthStore } from '@/stores/auth';
 import { useRequest } from '@/composables/useRequest';
 import { useUiStore } from '@/stores/ui';

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 interface Props {
    company_id: number;
@@ -52,7 +52,7 @@ import { ref, computed } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import { useModalFormHandler } from '@/composables/useModalFormHandler'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';
 import { useUiStore } from '@/stores/ui';

 interface Props {
@@ -40,7 +40,7 @@ import { ref } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import { useModalFormHandler } from '@/composables/useModalFormHandler'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';

 interface Props {
    data: any
@@ -15,7 +15,7 @@ import { ref, onMounted } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import { useModalFormHandler } from '@/composables/useModalFormHandler'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';

 interface Props {
    id: number
@@ -40,7 +40,7 @@ import { ref } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import { useModalFormHandler } from '@/composables/useModalFormHandler'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';

 interface Props {
    data: any
@@ -40,7 +40,7 @@ import { ref } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import { useModalFormHandler } from '@/composables/useModalFormHandler'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';

 interface Props {
    packinglistId: number
@@ -41,7 +41,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useModalFormHandler } from '@/composables/useModalFormHandler'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';

 interface Props {
    data?: any
@@ -33,7 +33,7 @@ import { ref } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import { useModalFormHandler } from '@/composables/useModalFormHandler'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';
 import { useAuthStore } from '@/stores/auth';

 const authStore = useAuthStore();
@@ -40,7 +40,7 @@ import { ref } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import { useModalFormHandler } from '@/composables/useModalFormHandler'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';

 interface Props {
    data: any
@@ -40,7 +40,7 @@ import { ref } from 'vue'
 import { useVuelidate } from '@vuelidate/core'
 import { required } from '@vuelidate/validators'
 import { useModalFormHandler } from '@/composables/useModalFormHandler'
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';

 interface Props {
    section?: string
@@ -40,7 +40,7 @@
 import { ref, onMounted } from 'vue'
 import { useComponentHandler } from '@/composables/useComponentHandler'
 import { useRequest } from '@/composables/useRequest';
-import { route } from '@/general/functions/router'
+import route from '@/general/functions/router';
 import LoadingComponent from '@/components/general/elements/LoadingComponent.vue'
 import PackingListComponent from '@/components/containers/elements/PackingListComponent.vue'

@@ -23,7 +23,7 @@ import { ref, computed } from 'vue';
 import { useRequest } from '@/composables/useRequest';
 import route from '@/general/functions/router';

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const props = defineProps<{
    file: any;
@@ -54,6 +54,7 @@ import { ref, watch, onMounted } from 'vue';
 import { useQueueStore } from '@/stores/queue';
 import { useUiStore } from '@/stores/ui';
 import { useRequest } from '@/composables/useRequest';
+import PaginationComponent from '@/components/general/elements/PaginationComponent.vue';

 const asset = window.Vapor.asset;

@@ -74,7 +75,8 @@ const props = withDefaults(defineProps<Props>(), {
 const queueStore = useQueueStore();
 const uiStore = useUiStore();
 const { submit } = useRequest();
-const pagination = ref<any>(null);
+
+const pagination = ref<InstanceType<typeof PaginationComponent> | null>(null);
 const filters = ref<any>(props.options);

 const setDecoratorDefault = () => {
@@ -94,7 +96,8 @@ const fetchList = () => {
        successHandler: (response: any) => {
            queueStore.setListComplete({ name: props.section, data: response.payload.data });
            if (pagination.value) {
-                pagination.value.makePagination(response.payload.meta, response.payload.links);
+                // pagination.value.makePagination(response.payload.meta, response.payload.links);
+                pagination.value.makePagination(response.payload.meta);
            }
        }
    });
@@ -108,7 +111,8 @@ const updateFilters = (newFilters: any) => {
        successHandler: (response: any) => {
            queueStore.setListComplete({ name: props.section, data: response.payload.data });
            if (pagination.value) {
-                pagination.value.makePagination(response.payload.meta, response.payload.links);
+                // pagination.value.makePagination(response.payload.meta, response.payload.links);
+                pagination.value.makePagination(response.payload.meta);
            }
        }
    });
@@ -126,6 +130,6 @@ watch(() => queueStore.isInCompleteQueue(props.section), (inComplete) => {
 });

 defineExpose({
-    updateFilters
+    // updateFilters //no where is this being used
 });
 </script>
@@ -56,6 +56,7 @@ import { useQueueStore } from '@/stores/queue';
 import { useUiStore } from '@/stores/ui';
 import { useJobPollingStore } from '@/stores/jobPolling';
 import { useRequest } from '@/composables/useRequest';
+import PaginationComponent from '@/components/general/elements/PaginationComponent.vue';

 const props = withDefaults(defineProps<{
    section: string;
@@ -67,6 +68,8 @@ const props = withDefaults(defineProps<{
    emptyListSection: true
 });

+const asset = window.Vapor.asset;
+
 const queueStore = useQueueStore();
 const uiStore = useUiStore();
 const jobPollingStore = useJobPollingStore();
@@ -74,7 +77,7 @@ const { submit } = useRequest();

 const filters = ref(props.options);
 const isLoading = ref(false);
-const pagination = ref<any>(null);
+const pagination = ref<InstanceType<typeof PaginationComponent> | null>(null);

 const setDecoratorDefault = () => {
    filters.value = {};
@@ -126,7 +129,8 @@ const successHandler = (response: any) => {
    queueStore.setListComplete({ name: props.section, data: result.data });
    jobPollingStore.stopPollingJobResultByJobId(currentJob().jobId);
    if (pagination.value) {
-        pagination.value.makePagination(result.meta, result.links);
+        // pagination.value.makePagination(result.meta, result.links);
+        pagination.value.makePagination(result.meta);
    }
    isLoading.value = false;
 };
@@ -72,7 +72,7 @@ import LoadingComponent from "@/components/general/elements/LoadingComponent.vue
 import route from '@/general/functions/router';
 import { useModalFormHandler } from '@/composables/useModalFormHandler';

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const props = defineProps<{
    data?: any;
@@ -6,7 +6,7 @@
    </component>
 </template>
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, Transition, TransitionGroup } from 'vue';

 const props = withDefaults(defineProps<{
    speed?: string;
@@ -22,9 +22,7 @@ const props = withDefaults(defineProps<{
    tag: 'div'
 });

-const type = computed(() => {
-    return props.group ? "transition-group" : "transition";
-});
+const type = computed(() => (props.group ? TransitionGroup : Transition));

 const dynamicProps = computed(() => {
    const p: any = {
@@ -53,4 +51,4 @@ const hooks = {
    beforeLeave: setAbsolutePosition,
    afterLeave: cleanUp
 };
-</script>
+</script>
@@ -15,5 +15,5 @@

 <script setup lang="ts">
 import ModalComponent from './ModalComponent.vue'
-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;
 </script>
@@ -40,7 +40,11 @@ const getErrorMessage = (error: ValidationErrorItem): string => {

    if (validatorName === 'minLength') return `${errorMessages.minLength} ${params.min} characters`;
    if (validatorName === 'maxLength') return `${errorMessages.maxLength} ${params.max} characters`;
-    if (validatorName === 'sameAs') return `${errorMessages.sameAs} ${params.eq} field`;
+    if (validatorName === 'sameAs' || validatorName === 'sameAsPassword') {
+        let fieldName = params.otherName || params.eq || 'password';
+        if (fieldName === 'password') fieldName = 'password';
+        return `${errorMessages.sameAs} ${fieldName} field`;
+    }
    if (validatorName === 'minValue') return `${errorMessages.minValue} ${params.min}`;
    if (validatorName === 'maxValue') return `${errorMessages.maxValue} ${params.max}`;

@@ -54,7 +54,8 @@ import { ref, computed, watch, onMounted } from 'vue';
 import { useRequest } from '@/composables/useRequest';
 import { useQueueStore } from '@/stores/queue';
 import { useUiStore } from '@/stores/ui';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';
+import PaginationComponent from '@/components/general/elements/PaginationComponent.vue';

 const asset = window.Vapor.asset;

@@ -80,7 +81,7 @@ const { submit } = useRequest();
 const filters = ref(props.options);
 const api_count = ref(0);
 const isLoading = ref(true);
-const pagination = ref<any>(null);
+const pagination = ref<InstanceType<typeof PaginationComponent> | null>(null);

 // Create computed properties for reactive data
 const listData = computed(() => queueStore.getListData(props.section));
@@ -114,7 +115,7 @@ const fetchList = () => {
                    name: props.section,
                    data: response.payload.data
                });
-                pagination.value?.makePagination(response.payload.meta, response.payload.links);
+                pagination.value?.makePagination(response.payload.meta); //pagination.value?.makePagination(response.payload.meta, response.payload.links);
                api_count.value += 1;
                isLoading.value = false;
            }
@@ -138,7 +139,7 @@ const updateFilters = (newFilters: any) => {
                    name: props.section,
                    data: response.payload.data
                });
-                pagination.value?.makePagination(response.payload.meta, response.payload.links);
+                pagination.value?.makePagination(response.payload.meta); //pagination.value?.makePagination(response.payload.meta, response.payload.links);
                api_count.value += 1;
                isLoading.value = false;
            }
@@ -157,6 +158,6 @@ onMounted(() => {
 });

 defineExpose({
-    updateFilters
+    // updateFilters //no where is this being used
 });
 </script>
@@ -158,7 +158,7 @@ import { useComponentHandler } from '@/composables/useComponentHandler';
 import { useRequest } from '@/composables/useRequest';
 import { useAuthStore } from '@/stores/auth';
 import { useCrudStore } from '@/stores/crud';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 interface Props {
    data: any;
@@ -54,7 +54,7 @@ const dataLoaded = ref(false);
 const isLoading = computed(() => uiStore.isLoading(section));


-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;
 const filters = {
    include_packages_delivery: true,
 };
@@ -53,7 +53,7 @@ const order = ref<any>(null);
 const dataLoaded = ref(false);
 const isLoading = computed(() => uiStore.isLoading(section));

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;
 const filters = {
    include_packages_destination_warehouse: true,
 };
@@ -54,7 +54,7 @@ const dataLoaded = ref(false);
 const isLoading = computed(() => uiStore.isLoading(section));


-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;
 const filters = {
    include_packages_in_transit: true,
 };
@@ -85,6 +85,8 @@ interface Props {

 const props = defineProps<Props>();

+const asset = window.Vapor.asset;
+
 const authStore = useAuthStore();
 const { submit } = useRequest();

@@ -66,7 +66,7 @@
 import { ref, onMounted } from 'vue';
 import { useAuthStore } from '@/stores/auth';
 import { useRequest } from '@/composables/useRequest';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 interface Props {
    order_number: string;
@@ -92,7 +92,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { useAuthStore } from '@/stores/auth';
 import { useRequest } from '@/composables/useRequest';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 interface Props {
    order_number: number;
@@ -100,6 +100,8 @@ interface Props {

 const props = defineProps<Props>();

+const asset = window.Vapor.asset;
+
 const authStore = useAuthStore();
 const { submit } = useRequest();

@@ -223,7 +223,7 @@
 import { ref, onMounted } from 'vue';
 import { useAuthStore } from '@/stores/auth';
 import { useComponentHandler } from '@/composables/useComponentHandler';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';
 const asset = window.Vapor.asset;

 interface Props {
@@ -66,7 +66,7 @@
 import { ref, onMounted } from 'vue';
 import { useAuthStore } from '@/stores/auth';
 import { useComponentHandler } from '@/composables/useComponentHandler';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 interface Props {
    data: any;
@@ -108,7 +108,7 @@
 import { ref } from 'vue';
 import { useAuthStore } from '@/stores/auth';
 import { useComponentHandler } from '@/composables/useComponentHandler';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 interface Props {
    data: any;
@@ -34,7 +34,7 @@ import { ref } from 'vue';
 import { required } from "@vuelidate/validators";
 import useVuelidate from '@vuelidate/core';
 import { useModalFormHandler } from '@/composables/useModalFormHandler';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 interface Props {
    data?: number;
@@ -326,22 +326,19 @@ const parameters = ref({
 const money = {
    decimal: '.',
    thousands: ',',
-    precision: 2,
-    masked: false
+    precision: 2
 };

 const weight = {
    decimal: '.',
    thousands: ',',
-    precision: 1,
-    masked: false
+    precision: 1
 };

 const integer = {
    decimal: '',
    thousands: '',
-    precision: 0,
-    masked: false
+    precision: 0
 };

 const rules = {
@@ -204,7 +204,7 @@ const parameters = reactive({
    company_id: props.company.id,
 });

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 const createOrder = () => {
    step.value++;
@@ -314,7 +314,7 @@ import { ref, reactive, computed } from 'vue';
 import { required } from "@vuelidate/validators";
 import useVuelidate from '@vuelidate/core';
 import { useUiStore } from '@/stores/ui';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 const uiStore = useUiStore();
 const section = 'createDelvieryOrderSectionComponent';
@@ -145,7 +145,8 @@ import { useAuthStore } from '@/stores/auth';
 import { useUiStore } from '@/stores/ui';
 import { useQueueStore } from '@/stores/queue';
 import { useRequest } from '@/composables/useRequest';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';
+import PaginationComponent from '@/components/general/elements/PaginationComponent.vue';

 interface Props {
    data?: any;
@@ -166,7 +167,7 @@ const emptyListSection = ref(false);
 const orderNumber = ref('');
 const orderMarking = ref('');
 const orderSenderName = ref('');
-const pagination = ref<any>(null);
+const pagination = ref<InstanceType<typeof PaginationComponent> | null>(null);

 const filters = ref(props.data ? {
    company_module_id: props.data.company_module.id,
@@ -224,7 +225,7 @@ const fetchList = () => {

 const successHandler = (response: any) => {
    queueStore.setListComplete({ name: section.value, data: response.payload.data });
-    pagination.value?.makePagination(response.payload.meta, response.payload.links);
+    pagination.value?.makePagination(response.payload.meta); //pagination.value?.makePagination(response.payload.meta, response.payload.links);
    metaData.value = response.payload.meta;
    orderData.value = response.payload.data;
 };
@@ -206,7 +206,7 @@ import { useAuthStore } from '@/stores/auth';
 import { useQueueStore } from '@/stores/queue';
 import { useRequest } from '@/composables/useRequest';
 import { useCrudStore } from '@/stores/crud';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 interface Props {
    order_number: number;
@@ -191,7 +191,10 @@ import { useAuthStore } from '@/stores/auth';
 import { useUiStore } from '@/stores/ui';
 import { useQueueStore } from '@/stores/queue';
 import { useRequest } from '@/composables/useRequest';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';
+import PaginationComponent from '@/components/general/elements/PaginationComponent.vue';
+
+const asset = window.Vapor.asset;

 const authStore = useAuthStore();
 const uiStore = useUiStore();
@@ -205,7 +208,7 @@ const perPageFilterDropDownStatus = ref(false);
 const orderStatus = ref('Active');
 const orderStatusFilterArray = ref(['Active', 'Complete', 'Pending Verification', 'Cancelled']);
 const orderStatusFilterDropDownStatus = ref(false);
-const pagination = ref<any>(null);
+const pagination = ref<InstanceType<typeof PaginationComponent> | null>(null);

 const filters = ref({
    per_page: 2,
@@ -298,7 +301,7 @@ const updateFilters = (newFilters: any) => {

 const successHandler = (response: any) => {
    queueStore.setListComplete({ name: section.value, data: response.payload.data });
-    pagination.value?.makePagination(response.payload.meta, response.payload.links);
+    pagination.value?.makePagination(response.payload.meta); //pagination.value?.makePagination(response.payload.meta, response.payload.links);
    metaData.value = response.payload.meta;
 };

@@ -344,6 +344,7 @@ import { ref, computed, onMounted } from 'vue';
 import { useComponentHandler } from '@/composables/useComponentHandler';
 import { useRequest } from '@/composables/useRequest';
 import { useAuthStore } from '@/stores/auth';
+import route from '@/general/functions/router';

 const props = withDefaults(defineProps<{
    data: any;
@@ -50,7 +50,7 @@
                            </div>
                        </div>
                        <modal-component type="paymentProofModal">
-                            <payment-verification-form-component v-if="selected_id === item.id" :section="section" :data="{...item, id: item.payment_transaction.id}"></payment-verification-form-component>
+                            <payment-verification-form-component v-if="selected_id === String(item.id)" :section="section" :data="{...item, id: item.payment_transaction.id}"></payment-verification-form-component>
                        </modal-component>
                        <div class="col-auto" v-if="item.payment_method == 1 && [1, 2].includes(item.payment_transaction.status)">
                            <div class="fs-10  all-caps">Payment Proof</div>
@@ -134,7 +134,7 @@ const request = useRequest();
 const expanded = ref(false);
 const selectedValue = ref(false);
 const selected_id = ref('');
-const item = ref<any>(props.data || {}); 
+const item = ref<any>(props.data || {});
 const isLoading = ref(false);

 const pendingQueue = computed(() => queueStore.isInCompleteQueue(props.section));
@@ -209,7 +209,7 @@ const props = defineProps<{
    no_action?: boolean;
 }>();

-const { submit, closeModal, formHandler } = useModalFormHandler({ section: props.section });
+const { submit } = useModalFormHandler({ section: props.section });

 const item = ref(props.data);
 const isLoading = ref(false);
@@ -221,17 +221,6 @@ watch(() => props.data, (newData) => {

 const approvePayment = async (status: string) => {
    isLoading.value = true;
-    await submit(route('api.transaction.payment.approval', item.value.id, status), 'put', 'identificationVerificationSection', true, true, null, {
-        successHandler: () => {
-            isLoading.value = false;
-            closeModal();
-            formHandler();
-        },
-        errorHandler: () => {
-            isLoading.value = false;
-            closeModal();
-            formHandler();
-        }
-    });
+    await submit(route('api.transaction.payment.approval', item.value.id, status), 'put', 'identificationVerificationSection', true, true, null);
 };
 </script>
@@ -45,6 +45,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useComponentHandler } from '@/composables/useComponentHandler';
+import route from '@/general/functions/router';

 const props = defineProps<{
    data?: any;
@@ -130,6 +130,7 @@
 import { ref } from 'vue';
 import { useComponentHandler } from '@/composables/useComponentHandler';
 import { useAuthStore } from '@/stores/auth';
+import route from '@/general/functions/router';

 const props = withDefaults(defineProps<{
    data: any;
@@ -45,6 +45,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useComponentHandler } from '@/composables/useComponentHandler';
+import route from '@/general/functions/router';

 const props = defineProps<{
    data?: any;
@@ -52,7 +52,7 @@ const maxDays = 30;
 const startDate = ref('');
 const endDate = ref('');
 const isValidRange = ref(false);
-const endDatePicker = ref<any>(null);
+const endDatePicker = ref<InstanceType<typeof DatePickerLimitRangeComponent> | null>(null);

 const downloadUrl = computed(() => {
    return generateLink();
@@ -199,7 +199,7 @@ const v$ = useVuelidate(rules, { parameters }) as any;

 const { submit, isLoading, error, formHandler, closeModal } = useModalFormHandler(props);

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 watch(() => props.sumAmount, (newValue) => {
    parameters.amount = newValue.toFixed(2);
@@ -235,7 +235,7 @@ const successHandler = (response: any, section?: string) => {
 };


-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 onMounted(() => {
 });
@@ -29,7 +29,7 @@
                        </div>
                        <div class="col p-l-0">
                            <div class="btn btn-primary b-rad-none" @click="fetchReport()">
-                                <i class="fa fa-refresh lh-40"></i>
+                                <i class="fa fa-search lh-40"></i>
                            </div>
                        </div>
                    </div>
@@ -130,4 +130,4 @@ const fetchReport = () => {
        }
    });
 };
-</script>
+</script>
@@ -64,7 +64,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from "@vuelidate/validators";
 import { useModalFormHandler } from '@/composables/useModalFormHandler';
 import { useUiStore } from '@/stores/ui';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 const props = defineProps<{
    closable?: boolean;
@@ -76,7 +76,7 @@ const props = defineProps<{
 const emit = defineEmits(['close']);

 const uiStore = useUiStore();
-const { submit } = useModalFormHandler({ section: props.section });
+const { submit, error } = useModalFormHandler({ section: props.section });

 const parameters = ref({
    starting_on: '',
@@ -85,7 +85,6 @@ const parameters = ref({
    description: '',
 });

-const error = ref('');

 const rules = {
    parameters: {
@@ -10,7 +10,7 @@
            <validation-wrapper-component class="m-b-15" :validator="v$?.parameters?.rate">
                <label class="text-primary">Base Price (MYR)</label>
                <div class="controls">
-                    <input type="text" class="form-control fs-12" v-model.trim="parameters.rate" v-money3="money">
+                    <input type="text" class="form-control fs-12" v-model.lazy="parameters.rate" v-money3="money">
                </div>
            </validation-wrapper-component>
            <div class="row m-t-15">
@@ -9,13 +9,13 @@
            <validation-wrapper-component class="m-b-15" :validator="v$.parameters.rate.center">
                <label class="text-primary">City Center Charges (MYR)</label>
                <div class="controls">
-                    <input type="text" class="form-control fs-12" v-model.trim="parameters.rate.center" v-money3="money">
+                    <input type="text" class="form-control fs-12" v-model.lazy="parameters.rate.center" v-money3="money">
                </div>
            </validation-wrapper-component>
            <validation-wrapper-component class="m-b-15" :validator="v$.parameters.rate.outstation">
                <label class="text-primary">Outskirt Charges (MYR)</label>
                <div class="controls">
-                    <input type="text" class="form-control fs-12" v-model.trim="parameters.rate.outstation" v-money3="money">
+                    <input type="text" class="form-control fs-12" v-model.lazy="parameters.rate.outstation" v-money3="money">
                </div>
            </validation-wrapper-component>
            <div class="row m-t-15">
@@ -61,7 +61,7 @@ const parameters = reactive({

 const v$ = useVuelidate(rules, { parameters }) as any;

-const { submit, closeModal, error, errorHandler } = useModalFormHandler({ section: props.section });
+const { submit, closeModal, error, formHandler } = useModalFormHandler({ section: props.section });

 const submitForm = async () => {
    await submit(route('api.account.user.update', authStore.getUserId), 'put', props.section, true, true, parameters, {
@@ -71,12 +71,10 @@ const submitForm = async () => {
        },
        successHandler: (response: any) => {
            closeModal();
-            errorHandler('');
+            formHandler('');
            authStore.updateProfile(response.payload.data.name);
-        },
-        errorHandler: (response: any) => {
-            errorHandler(response.message);
        }
+
    });
 };
 </script>
@@ -9,7 +9,7 @@
            <validation-wrapper-component class="m-b-15" :validator="v$?.parameters?.rate?.amount">
                <label class="text-primary">Extra Charges (MYR)</label>
                <div class="controls">
-                    <input type="text" class="form-control fs-12" v-model.trim="parameters.rate.amount" v-money3="money">
+                    <input type="text" class="form-control fs-12" v-model.lazy="parameters.rate.amount" v-money3="money">
                </div>
            </validation-wrapper-component>
            <div class="row m-t-15">
@@ -53,7 +53,7 @@ const parameters = reactive({

 const v$ = useVuelidate(rules, { parameters }) as any;

-const { submit, closeModal, error, errorHandler } = useModalFormHandler({ section: props.section });
+const { submit, closeModal, error, formHandler } = useModalFormHandler({ section: props.section });

 const submitForm = async () => {
    await submit(route('api.account.authentication.password.forget'), 'post', props.section, true, true, parameters, {
@@ -63,11 +63,9 @@ const submitForm = async () => {
        },
        successHandler: () => {
            closeModal();
-            errorHandler('');
-        },
-        errorHandler: (response: any) => {
-            errorHandler(response.message);
+            formHandler('');
        }
+
    });
 };
 </script>
@@ -66,7 +66,7 @@ import { useVuelidate } from '@vuelidate/core';
 import { required, sameAs, minLength, email } from "@vuelidate/validators";
 import { useModalFormHandler } from '@/composables/useModalFormHandler';
 import { useUiStore } from '@/stores/ui';
-import { route } from '@/general/functions/router';
+import route from '@/general/functions/router';

 const props = defineProps<{
    closable?: boolean;
@@ -76,7 +76,7 @@ const props = defineProps<{
 const emit = defineEmits(['close', 'createdAdmin']);

 const uiStore = useUiStore();
-const { submit, closeModal, formHandler: reloadQueue } = useModalFormHandler({ section: props.section });
+const { submit, closeModal, formHandler: reloadQueue , error} = useModalFormHandler({ section: props.section });

 const parameters = ref({
    name: '',
@@ -85,8 +85,6 @@ const parameters = ref({
    password_confirmation: '',
 });

-const error = ref('');
-
 const rules = computed(() => ({
    parameters: {
        name: { required },
@@ -94,7 +92,7 @@ const rules = computed(() => ({
        password: { required, minLength: minLength(6) },
        password_confirmation: {
            required,
-            sameAsPassword: sameAs(parameters.value.password)
+            sameAs: sameAs(parameters.value.password, 'password')
        }
    }
 }));
@@ -170,7 +170,7 @@ const v$ = useVuelidate(rules, { showingTransactionCount, reference_no, startDat

 const pendingQueue = computed(() => queueStore.isInCompleteQueue(section));

-const asset = (path: string) => (window as any).Vapor.asset(path);
+const asset = window.Vapor.asset;

 onMounted(() => {
    queueStore.updateListQueue({ name: section, page: 1, filters: {} });
@@ -174,6 +174,5 @@ const $store = {
        get getUserId() { return authStore.getUserId; }
    }
 };
-defineExpose({ v$ });

 </script>
@@ -1,4 +1,4 @@
-import { inject, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useRequest } from '@/composables/useRequest';
 import { useQueueStore } from '@/stores/queue';
 import { useUiStore } from '@/stores/ui';
@@ -10,8 +10,14 @@ export function useModalFormHandler(props: { section: string; }) {
    const uiStore = useUiStore();
    const { error, errorMessageHandler } = useErrorMessageHandler();
    // const closeModal = inject('closeModal', null) as (() => void) | null;
+    const localLoading = ref(false);

-    const isLoading = computed(() => uiStore.isLoading(props.section));
+    const isLoading = computed(() => {
+        if (props.section) {
+            return uiStore.isLoading(props.section);
+        }
+        return localLoading.value;
+    });

    const closeModal = () => {
        if ((window as any).$) {
@@ -20,7 +26,10 @@ export function useModalFormHandler(props: { section: string; }) {
    };

    const formHandler = (errorMessage?: string) => {
-        queueStore.reloadList({ name: props.section });
+        localLoading.value = false;
+        if (props.section) {
+            queueStore.reloadList({ name: props.section });
+        }
        if (errorMessage) {
            errorMessageHandler(errorMessage);
        }
@@ -46,6 +55,12 @@ export function useModalFormHandler(props: { section: string; }) {
        parameters?: any,
        options: any = {}
    ) => {
+        const activeSection = section || props.section;
+
+        if (!activeSection) {
+            localLoading.value = true;
+        }
+
        const { successHandler: customSuccessHandler, errorHandler: customErrorHandler, ...restOptions } = options;
        const mergedOptions = {
            ...restOptions,
@@ -60,6 +75,7 @@ export function useModalFormHandler(props: { section: string; }) {
                if (customErrorHandler) {
                    customErrorHandler(response, statusCode, section);
                } else {
+                    localLoading.value = false;
                    errorHandler(response);
                }
            }
@@ -68,7 +84,7 @@ export function useModalFormHandler(props: { section: string; }) {
        return await request.submit(
            url,
            method,
-            section || props.section,
+            activeSection,
            successNotification,
            errorNotification,
            parameters,
@@ -80,8 +96,6 @@ export function useModalFormHandler(props: { section: string; }) {
        isLoading,
        error,
        closeModal,
-        errorHandler,
-        successHandler,
        formHandler,
        submit,
    };
@@ -16,8 +16,5 @@ function route() {
        .join('/');
 }

-// Named export for compatibility
-export { route };
-
 // Default export
 export default route;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Dillon Ngo	e4344c8fe9	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-08-06 12:03:14 +08:00
Dillon Ngo	6cc8283594	Sin Yee requested for additional info to be included in arrived-parcel.xlsx	2026-08-06 12:01:43 +08:00
Dillon Ngo	390510e8aa	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment) - Fix an error reported by KS on settings > Warehouses > Extra Charges	2026-07-24 15:41:27 +08:00
Dillon Ngo	f834bfd63a	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment) - Fix an error reported by KS on settings > Warehouses > Extra Charges	2026-07-23 13:06:12 +08:00
Dillon Ngo	1336b3f3ae	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment) - Fix an error reported by KS on settings > Warehouses > Extra Charges	2026-07-22 21:46:38 +08:00
Dillon Ngo	350d045554	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-07-22 03:05:53 +08:00
Dillon Ngo	fe1df936ed	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-22 03:05:31 +08:00
Dillon Ngo	f05ce01a40	Fix previously marked TODO	2026-07-08 02:12:40 +08:00
Dillon Ngo	6e26ca4139	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-07-08 01:38:15 +08:00
Dillon Ngo	f1d5de226f	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment) - Fix a timing problem exist before upgrade from Vue 2 to Vue 3	2026-07-08 01:37:54 +08:00
Dillon Ngo	92915320ba	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-07-07 00:34:25 +08:00
Dillon Ngo	2625d58da2	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-07 00:33:55 +08:00
Dillon Ngo	75d3f74d09	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-05 12:24:11 +08:00
Dillon Ngo	2007473d98	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-07-05 12:17:14 +08:00
Dillon Ngo	f420afd790	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-05 12:16:51 +08:00
Dillon Ngo	ab714a687e	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-07-04 22:48:33 +08:00
Dillon Ngo	d41b82bcee	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-04 22:48:14 +08:00
Dillon Ngo	c70d6244f2	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-04 21:32:13 +08:00
Dillon Ngo	d09709c65d	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-04 21:09:57 +08:00
Dillon Ngo	d1297709b0	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-07-04 20:28:41 +08:00
Dillon Ngo	0a24113fdb	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-04 20:28:00 +08:00
Dillon Ngo	402907d3f1	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-07-03 22:25:08 +08:00
Dillon Ngo	7cc22d555c	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-03 22:24:55 +08:00
Dillon Ngo	4f286507f3	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-07-03 22:06:55 +08:00
Dillon Ngo	eac7885ef9	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-03 22:06:14 +08:00
Dillon Ngo	e8e6a68259	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-03 21:51:12 +08:00
Dillon Ngo	c01c127846	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-03 21:47:14 +08:00
Dillon Ngo	76692755ca	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-01 12:25:08 +08:00
Dillon Ngo	9d09eb4dd7	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-01 12:09:29 +08:00
Dillon Ngo	ab67557d89	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment) - Minor update on docker-compose,yml	2026-07-01 11:13:27 +08:00
Dillon Ngo	f9eef62536	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-01 11:03:40 +08:00
Dillon Ngo	f36fbfc948	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-07-01 10:10:34 +08:00
Dillon Ngo	2566f26c53	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-07-01 10:10:07 +08:00
Dillon Ngo	dc553e5e95	Fix server error reported by Mira: failed to approve address due to an error related to VT portal: Client error: POST http://portal.vtnation.com.my/Services/DataControllerService.asmx/Login	2026-06-30 12:20:30 +08:00
Dillon Ngo	000c212085	Fix server error reported by Kanisha: failed to approve address due to an error related to VT portal: Client error: POST http://portal.vtnation.com.my/Services/DataControllerService.asmx/Login	2026-06-29 11:38:37 +08:00
Dillon Ngo	ba9db2562b	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-06-21 15:53:44 +08:00
Dillon Ngo	01c53c20df	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-06-21 15:53:07 +08:00
Dillon Ngo	1da569b68f	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-06-21 15:11:14 +08:00
Dillon Ngo	7a7c096aba	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-06-21 15:10:34 +08:00
Dillon Ngo	e5a474f21c	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-06-16 16:51:12 +08:00
Dillon Ngo	11b24f376c	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-06-16 16:02:03 +08:00
Dillon Ngo	7314c3aa0b	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-06-16 15:47:17 +08:00
Dillon Ngo	e52dee2877	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-06-10 15:30:07 +08:00
Dillon Ngo	1c393e86e2	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-06-08 19:42:42 +08:00
Dillon Ngo	00b18b38d4	Merge branch 'dillon/137-project-upgrade-update-1A' into vapor/test	2026-06-05 20:20:19 +08:00
Dillon Ngo	7f66e616de	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-06-05 20:15:52 +08:00
Dillon Ngo	56e4c07adb	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml (Post PROD Deployment)	2026-05-28 11:30:50 +08:00
Dillon Ngo	9b0746246c	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml	2026-05-27 20:59:43 +08:00
Dillon Ngo	baa3bb3d4e	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml	2026-05-27 20:52:19 +08:00
Dillon Ngo	51ae5c756e	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml	2026-05-27 20:43:27 +08:00
Dillon Ngo	79fa84c5cf	Update: Vue 2 to Vue 3 with Typescript, node 14 to node 22, Jenkinsfile, Dockerfile, vapor.yml	2026-05-27 20:23:16 +08:00