|
|
|
@@ -3,26 +3,25 @@
|
|
|
|
<div class="w-full min-h-screen bg-base-200 px-4 md:px-10">
|
|
|
|
<div class="w-full min-h-screen bg-base-200 px-4 md:px-10">
|
|
|
|
<!-- ... breadcrumbs ... -->
|
|
|
|
<!-- ... breadcrumbs ... -->
|
|
|
|
|
|
|
|
|
|
|
|
<div v-if="customer && customer.id" class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
|
|
|
<div v-if="customer && customer.id" class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Current Plan Status Banner - Same as ServicePlanEdit.vue -->
|
|
|
|
<!-- Current Plan Status Banner - Same as ServicePlanEdit.vue -->
|
|
|
|
<div v-if="servicePlan && servicePlan.contract_plan > 0"
|
|
|
|
<div v-if="servicePlan && servicePlan.contract_plan > 0" class="alert alert-info mb-6"
|
|
|
|
class="alert alert-info mb-6"
|
|
|
|
:class="servicePlan.contract_plan === 2 ? 'border-4 border-yellow-400 bg-yellow-50' : ''">
|
|
|
|
:class="servicePlan.contract_plan === 2 ? 'border-4 border-yellow-400 bg-yellow-50' : ''">
|
|
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
<div class="flex items-center">
|
|
|
|
<div class="flex-1">
|
|
|
|
<div class="flex-1">
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
<h3 class="font-bold">Current Plan: {{ getPlanName(servicePlan.contract_plan) }}</h3>
|
|
|
|
<h3 class="font-bold">Current Plan: {{ getPlanName(servicePlan.contract_plan) }}</h3>
|
|
|
|
<!-- Premium Star Icon -->
|
|
|
|
<!-- Premium Star Icon -->
|
|
|
|
<svg v-if="servicePlan.contract_plan === 2"
|
|
|
|
<svg v-if="servicePlan.contract_plan === 2" class="w-8 h-8 text-yellow-500 fill-current" fill="none"
|
|
|
|
class="w-8 h-8 text-yellow-500 fill-current"
|
|
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
|
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
|
|
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
|
|
|
|
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
|
|
|
|
</svg>
|
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p>{{ servicePlan.contract_years }} Year{{ servicePlan.contract_years > 1 ? 's' : '' }} Contract</p>
|
|
|
|
<p>{{ servicePlan.contract_years }} Year{{ servicePlan.contract_years > 1 ? 's' : '' }} Contract</p>
|
|
|
|
<p class="text-sm">Expires: {{ formatEndDate(servicePlan.contract_start_date, servicePlan.contract_years) }}</p>
|
|
|
|
<p class="text-sm">Expires: {{ formatEndDate(servicePlan.contract_start_date, servicePlan.contract_years) }}
|
|
|
|
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="badge" :class="getStatusBadge(servicePlan.contract_start_date, servicePlan.contract_years)">
|
|
|
|
<div class="badge" :class="getStatusBadge(servicePlan.contract_start_date, servicePlan.contract_years)">
|
|
|
|
{{ getStatusText(servicePlan.contract_start_date, servicePlan.contract_years) }}
|
|
|
|
{{ getStatusText(servicePlan.contract_start_date, servicePlan.contract_years) }}
|
|
|
|
@@ -35,35 +34,22 @@
|
|
|
|
|
|
|
|
|
|
|
|
<!-- FIX: Changed `lg:` to `xl:` -->
|
|
|
|
<!-- FIX: Changed `lg:` to `xl:` -->
|
|
|
|
<div class="xl:col-span-8 space-y-6">
|
|
|
|
<div class="xl:col-span-8 space-y-6">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 xl:grid-cols-12 gap-6">
|
|
|
|
|
|
|
|
<ProfileMap
|
|
|
|
|
|
|
|
v-if="customer && customer.customer_latitude != null && customer.customer_longitude != null"
|
|
|
|
|
|
|
|
class="xl:col-span-7"
|
|
|
|
|
|
|
|
:customer="customer"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- You can add a placeholder for when the map isn't ready -->
|
|
|
|
|
|
|
|
<div v-else class="xl:col-span-7 bg-base-100 rounded-lg flex justify-center items-center">
|
|
|
|
|
|
|
|
<p class="text-gray-400">Location not available...</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ProfileSummary
|
|
|
|
<div class="grid grid-cols-1 xl:grid-cols-12 gap-6">
|
|
|
|
class="xl:col-span-5"
|
|
|
|
<ProfileMap v-if="customer && customer.customer_latitude != null && customer.customer_longitude != null"
|
|
|
|
:customer="customer"
|
|
|
|
class="xl:col-span-7" :customer="customer" />
|
|
|
|
:automatic_status="automatic_status"
|
|
|
|
|
|
|
|
:customer_description="customer_description.description"
|
|
|
|
<!-- You can add a placeholder for when the map isn't ready -->
|
|
|
|
@toggle-automatic="userAutomatic"
|
|
|
|
<div v-else class="xl:col-span-7 bg-base-100 rounded-lg flex justify-center items-center">
|
|
|
|
/>
|
|
|
|
<p class="text-gray-400">Location not available...</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ProfileSummary class="xl:col-span-5" :customer="customer" :automatic_status="automatic_status"
|
|
|
|
|
|
|
|
:customer_description="customer_description.description" @toggle-automatic="userAutomatic" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<HistoryTabs
|
|
|
|
<HistoryTabs :deliveries="deliveries" :autodeliveries="autodeliveries" :service-calls="serviceCalls"
|
|
|
|
:deliveries="deliveries"
|
|
|
|
:transactions="transactions" @open-service-modal="openEditModal" />
|
|
|
|
:autodeliveries="autodeliveries"
|
|
|
|
|
|
|
|
:service-calls="serviceCalls"
|
|
|
|
|
|
|
|
:transactions="transactions"
|
|
|
|
|
|
|
|
@open-service-modal="openEditModal"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@@ -75,7 +61,8 @@
|
|
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
|
|
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
|
|
|
|
<div class="flex items-center gap-3 mb-3 md:mb-0">
|
|
|
|
<div class="flex items-center gap-3 mb-3 md:mb-0">
|
|
|
|
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
|
<svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v4a3 3 0 003 3z"/>
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
|
|
|
|
|
|
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v4a3 3 0 003 3z" />
|
|
|
|
</svg>
|
|
|
|
</svg>
|
|
|
|
<span v-if="isLoadingAuthorize" class="text-sm font-medium">
|
|
|
|
<span v-if="isLoadingAuthorize" class="text-sm font-medium">
|
|
|
|
<span class="loading loading-dots loading-xs mr-2"></span>
|
|
|
|
<span class="loading loading-dots loading-xs mr-2"></span>
|
|
|
|
@@ -91,52 +78,32 @@
|
|
|
|
<div class="flex gap-2" v-if="!isLoadingAuthorize && !authorizeCheck.valid_for_charging">
|
|
|
|
<div class="flex gap-2" v-if="!isLoadingAuthorize && !authorizeCheck.valid_for_charging">
|
|
|
|
<!-- CREATE ACCOUNT SECTION - Only show when account doesn't exist -->
|
|
|
|
<!-- CREATE ACCOUNT SECTION - Only show when account doesn't exist -->
|
|
|
|
<div class="flex gap-2">
|
|
|
|
<div class="flex gap-2">
|
|
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
<button @click="createAuthorizeAccount"
|
|
|
|
@click="createAuthorizeAccount"
|
|
|
|
|
|
|
|
:class="['btn btn-sm', credit_cards_count === 0 ? 'btn-disabled' : 'btn-primary']"
|
|
|
|
:class="['btn btn-sm', credit_cards_count === 0 ? 'btn-disabled' : 'btn-primary']"
|
|
|
|
:disabled="credit_cards_count === 0"
|
|
|
|
:disabled="credit_cards_count === 0" v-if="credit_cards_count > 0">
|
|
|
|
v-if="credit_cards_count > 0"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
Create Account
|
|
|
|
Create Account
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
<button v-else @click="addCreditCard" class="btn btn-secondary btn-sm">
|
|
|
|
v-else
|
|
|
|
|
|
|
|
@click="addCreditCard"
|
|
|
|
|
|
|
|
class="btn btn-secondary btn-sm"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
Add Card First
|
|
|
|
Add Card First
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- DELETE ACCOUNT SECTION - Only show when account exists -->
|
|
|
|
<!-- DELETE ACCOUNT SECTION - Only show when account exists -->
|
|
|
|
<div v-if="authorizeCheck.valid_for_charging" class="mt-3 lg:mt-0 lg:flex lg:gap-2">
|
|
|
|
<div v-if="authorizeCheck.valid_for_charging" class="mt-3 lg:mt-0 lg:flex lg:gap-2">
|
|
|
|
<button
|
|
|
|
<button @click="showDeleteAccountModal" class="btn btn-error btn-sm lg:self-start">
|
|
|
|
@click="showDeleteAccountModal"
|
|
|
|
|
|
|
|
class="btn btn-error btn-sm lg:self-start"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
Delete Account
|
|
|
|
Delete Account
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<CustomerComments
|
|
|
|
<CustomerComments :comments="comments" @add-comment="onSubmitSocial" @delete-comment="deleteCustomerSocial" />
|
|
|
|
:comments="comments"
|
|
|
|
|
|
|
|
@add-comment="onSubmitSocial"
|
|
|
|
|
|
|
|
@delete-comment="deleteCustomerSocial"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<CustomerStats :stats="customer_stats" :last_delivery="customer_last_delivery" />
|
|
|
|
<CustomerStats :stats="customer_stats" :last_delivery="customer_last_delivery" />
|
|
|
|
<TankInfo :customer_id="customer.id" :tank="customer_tank" :description="customer_description" />
|
|
|
|
<TankInfo :customer_id="customer.id" :tank="customer_tank" :description="customer_description" />
|
|
|
|
<EquipmentParts :parts="currentParts" @open-parts-modal="openPartsModal" />
|
|
|
|
<EquipmentParts :parts="currentParts" @open-parts-modal="openPartsModal" />
|
|
|
|
<CreditCards
|
|
|
|
<CreditCards :cards="credit_cards" :count="credit_cards_count" :user_id="customer.id"
|
|
|
|
:cards="credit_cards"
|
|
|
|
:auth_net_profile_id="customer.auth_net_profile_id" @edit-card="editCard" @remove-card="removeCard" />
|
|
|
|
:count="credit_cards_count"
|
|
|
|
|
|
|
|
:user_id="customer.id"
|
|
|
|
|
|
|
|
:auth_net_profile_id="customer.auth_net_profile_id"
|
|
|
|
|
|
|
|
@edit-card="editCard"
|
|
|
|
|
|
|
|
@remove-card="removeCard"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Automatic Delivery Actions Box -->
|
|
|
|
<!-- Automatic Delivery Actions Box -->
|
|
|
|
<div v-if="automatic_status === 1 && autodeliveries.length > 0" class="bg-base-100 rounded-lg p-4 border">
|
|
|
|
<div v-if="automatic_status === 1 && autodeliveries.length > 0" class="bg-base-100 rounded-lg p-4 border">
|
|
|
|
@@ -162,7 +129,7 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- A loading indicator is shown while the API call is in progress -->
|
|
|
|
<!-- A loading indicator is shown while the API call is in progress -->
|
|
|
|
<div v-else class="flex justify-center items-center mt-20">
|
|
|
|
<div v-else class="flex justify-center items-center mt-20">
|
|
|
|
<span class="loading loading-spinner loading-lg"></span>
|
|
|
|
<span class="loading loading-spinner loading-lg"></span>
|
|
|
|
@@ -174,26 +141,17 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Modals remain at the root of the template for proper display -->
|
|
|
|
<!-- Modals remain at the root of the template for proper display -->
|
|
|
|
<ServiceEditModal
|
|
|
|
<ServiceEditModal v-if="selectedServiceForEdit" :service="selectedServiceForEdit" @close-modal="closeEditModal"
|
|
|
|
v-if="selectedServiceForEdit"
|
|
|
|
@save-changes="handleSaveChanges" @delete-service="handleDeleteService" />
|
|
|
|
:service="selectedServiceForEdit"
|
|
|
|
<PartsEditModal v-if="isPartsModalOpen && currentParts" :customer-id="customer.id" :existing-parts="currentParts"
|
|
|
|
@close-modal="closeEditModal"
|
|
|
|
@close-modal="closePartsModal" @save-parts="handleSaveParts" />
|
|
|
|
@save-changes="handleSaveChanges"
|
|
|
|
|
|
|
|
@delete-service="handleDeleteService"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<PartsEditModal
|
|
|
|
|
|
|
|
v-if="isPartsModalOpen && currentParts"
|
|
|
|
|
|
|
|
:customer-id="customer.id"
|
|
|
|
|
|
|
|
:existing-parts="currentParts"
|
|
|
|
|
|
|
|
@close-modal="closePartsModal"
|
|
|
|
|
|
|
|
@save-parts="handleSaveParts"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Delete Account Confirmation Modal -->
|
|
|
|
<!-- Delete Account Confirmation Modal -->
|
|
|
|
<div class="modal" :class="{ 'modal-open': isDeleteAccountModalVisible }">
|
|
|
|
<div class="modal" :class="{ 'modal-open': isDeleteAccountModalVisible }">
|
|
|
|
<div class="modal-box">
|
|
|
|
<div class="modal-box">
|
|
|
|
<h3 class="font-bold text-lg">Confirm Account Deletion</h3>
|
|
|
|
<h3 class="font-bold text-lg">Confirm Account Deletion</h3>
|
|
|
|
<p class="py-4">This will permanently delete the Authorize.net account and remove all payment profiles. This action cannot be undone.</p>
|
|
|
|
<p class="py-4">This will permanently delete the Authorize.net account and remove all payment profiles. This
|
|
|
|
|
|
|
|
action cannot be undone.</p>
|
|
|
|
<div class="modal-action">
|
|
|
|
<div class="modal-action">
|
|
|
|
<button @click="deleteAccount" class="btn btn-error">Delete Account</button>
|
|
|
|
<button @click="deleteAccount" class="btn btn-error">Delete Account</button>
|
|
|
|
<button @click="isDeleteAccountModalVisible = false" class="btn">Cancel</button>
|
|
|
|
<button @click="isDeleteAccountModalVisible = false" class="btn">Cancel</button>
|
|
|
|
@@ -214,7 +172,9 @@
|
|
|
|
<div v-else class="text-center">
|
|
|
|
<div v-else class="text-center">
|
|
|
|
<div class="text-success mb-3">
|
|
|
|
<div class="text-success mb-3">
|
|
|
|
<svg class="w-12 h-12 mx-auto mb-2" fill="currentColor" viewBox="0 0 20 20">
|
|
|
|
<svg class="w-12 h-12 mx-auto mb-2" fill="currentColor" viewBox="0 0 20 20">
|
|
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
|
|
|
<path fill-rule="evenodd"
|
|
|
|
|
|
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
|
|
|
|
|
|
clip-rule="evenodd" />
|
|
|
|
</svg>
|
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p class="text-lg font-semibold mb-2">Account Created Successfully!</p>
|
|
|
|
<p class="text-lg font-semibold mb-2">Account Created Successfully!</p>
|
|
|
|
@@ -236,7 +196,7 @@
|
|
|
|
<div class="text-center">
|
|
|
|
<div class="text-center">
|
|
|
|
<svg class="w-16 h-16 mx-auto mb-4 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
|
<svg class="w-16 h-16 mx-auto mb-4 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
|
|
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
|
|
|
</svg>
|
|
|
|
</svg>
|
|
|
|
<p class="text-lg font-semibold">Duplicate Account in Authorize.net</p>
|
|
|
|
<p class="text-lg font-semibold">Duplicate Account in Authorize.net</p>
|
|
|
|
<p class="text-sm text-gray-600 mt-2">
|
|
|
|
<p class="text-sm text-gray-600 mt-2">
|
|
|
|
@@ -293,7 +253,7 @@ import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
|
|
|
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
|
|
|
|
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
import ServiceEditModal from '../../service/ServiceEditModal.vue';
|
|
|
|
import ServiceEditModal from '../../service/ServiceEditModal.vue';
|
|
|
|
import PartsEditModal from '../service/PartsEditModal.vue';
|
|
|
|
import PartsEditModal from '../service/PartsEditModal.vue';
|
|
|
|
|
|
|
|
|
|
|
|
// Import new child components
|
|
|
|
// Import new child components
|
|
|
|
import ProfileMap from './profile/ProfileMap.vue';
|
|
|
|
import ProfileMap from './profile/ProfileMap.vue';
|
|
|
|
@@ -326,7 +286,7 @@ interface AutomaticDelivery {
|
|
|
|
customer_full_name: string;
|
|
|
|
customer_full_name: string;
|
|
|
|
gallons_delivered: number | string;
|
|
|
|
gallons_delivered: number | string;
|
|
|
|
fill_date: string;
|
|
|
|
fill_date: string;
|
|
|
|
auto_status: number | string;
|
|
|
|
auto_status: number | string;
|
|
|
|
open_ticket_id: number | string;
|
|
|
|
open_ticket_id: number | string;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@@ -384,7 +344,7 @@ export default defineComponent({
|
|
|
|
ServiceEditModal,
|
|
|
|
ServiceEditModal,
|
|
|
|
PartsEditModal,
|
|
|
|
PartsEditModal,
|
|
|
|
// Register new components
|
|
|
|
// Register new components
|
|
|
|
ProfileMap,
|
|
|
|
ProfileMap,
|
|
|
|
ProfileSummary,
|
|
|
|
ProfileSummary,
|
|
|
|
CustomerStats,
|
|
|
|
CustomerStats,
|
|
|
|
TankInfo,
|
|
|
|
TankInfo,
|
|
|
|
@@ -394,12 +354,12 @@ export default defineComponent({
|
|
|
|
HistoryTabs,
|
|
|
|
HistoryTabs,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
zoom: 14,
|
|
|
|
zoom: 14,
|
|
|
|
user: null as { user_id: number; user_name: string; confirmed: string; } | null,
|
|
|
|
user: null as { user_id: number; user_name: string; confirmed: string; } | null,
|
|
|
|
automatic_status: 0,
|
|
|
|
automatic_status: 0,
|
|
|
|
customer_last_delivery: '',
|
|
|
|
customer_last_delivery: '',
|
|
|
|
comments: [ { id: 0, created: '', customer_id: 0, poster_employee_id: 0, comment: '' } ],
|
|
|
|
comments: [{ id: 0, created: '', customer_id: 0, poster_employee_id: 0, comment: '' }],
|
|
|
|
CreateSocialForm: { basicInfo: { comment: '' } },
|
|
|
|
CreateSocialForm: { basicInfo: { comment: '' } },
|
|
|
|
|
|
|
|
|
|
|
|
// --- UPDATE THESE LINES ---
|
|
|
|
// --- UPDATE THESE LINES ---
|
|
|
|
@@ -429,7 +389,7 @@ export default defineComponent({
|
|
|
|
isDuplicateErrorModalVisible: false, // Add for duplicate detection popup
|
|
|
|
isDuplicateErrorModalVisible: false, // Add for duplicate detection popup
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
computed: {
|
|
|
|
hasPartsData() {
|
|
|
|
hasPartsData() {
|
|
|
|
if (!this.currentParts) return false;
|
|
|
|
if (!this.currentParts) return false;
|
|
|
|
return !!(this.currentParts.oil_filter || this.currentParts.oil_filter_2 || this.currentParts.oil_nozzle || this.currentParts.oil_nozzle_2);
|
|
|
|
return !!(this.currentParts.oil_filter || this.currentParts.oil_filter_2 || this.currentParts.oil_nozzle || this.currentParts.oil_nozzle_2);
|
|
|
|
@@ -456,12 +416,12 @@ export default defineComponent({
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
// ALL YOUR METHODS from the original file go here without any changes.
|
|
|
|
// ALL YOUR METHODS from the original file go here without any changes.
|
|
|
|
// getCustomer, userStatus, userAutomatic, etc...
|
|
|
|
// getCustomer, userStatus, userAutomatic, etc...
|
|
|
|
getPage: function (page: any) {
|
|
|
|
getPage: function (page: any) {
|
|
|
|
if (this.customer && this.customer.id) {
|
|
|
|
if (this.customer && this.customer.id) {
|
|
|
|
this.getCustomerDelivery(this.customer.id, page);
|
|
|
|
this.getCustomerDelivery(this.customer.id, page);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getCustomer(userid: any) {
|
|
|
|
getCustomer(userid: any) {
|
|
|
|
if (!userid) return;
|
|
|
|
if (!userid) return;
|
|
|
|
let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
|
|
|
|
let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
|
|
|
|
axios({
|
|
|
|
axios({
|
|
|
|
@@ -470,14 +430,14 @@ export default defineComponent({
|
|
|
|
headers: authHeader(),
|
|
|
|
headers: authHeader(),
|
|
|
|
}).then((response: any) => {
|
|
|
|
}).then((response: any) => {
|
|
|
|
this.customer = response.data;
|
|
|
|
this.customer = response.data;
|
|
|
|
|
|
|
|
|
|
|
|
// --- DEPENDENT API CALLS ---
|
|
|
|
// --- DEPENDENT API CALLS ---
|
|
|
|
this.userStatus();
|
|
|
|
this.userStatus();
|
|
|
|
|
|
|
|
|
|
|
|
// FIX: Pass the correct ID for payment-related calls
|
|
|
|
// FIX: Pass the correct ID for payment-related calls
|
|
|
|
this.getCreditCards(this.customer.id);
|
|
|
|
this.getCreditCards(this.customer.id);
|
|
|
|
this.getCreditCardsCount(this.customer.id);
|
|
|
|
this.getCreditCardsCount(this.customer.id);
|
|
|
|
|
|
|
|
|
|
|
|
// These other calls are likely correct as they are customer-specific
|
|
|
|
// These other calls are likely correct as they are customer-specific
|
|
|
|
this.getCustomerSocial(this.customer.id, 1);
|
|
|
|
this.getCustomerSocial(this.customer.id, 1);
|
|
|
|
this.getPage(this.delivery_page);
|
|
|
|
this.getPage(this.delivery_page);
|
|
|
|
@@ -494,7 +454,7 @@ export default defineComponent({
|
|
|
|
this.checkAuthorizeAccount();
|
|
|
|
this.checkAuthorizeAccount();
|
|
|
|
|
|
|
|
|
|
|
|
}).catch((error: any) => {
|
|
|
|
}).catch((error: any) => {
|
|
|
|
console.error("CRITICAL: Failed to fetch main customer data. Aborting other calls.", error);
|
|
|
|
console.error("CRITICAL: Failed to fetch main customer data. Aborting other calls.", error);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
userStatus() {
|
|
|
|
userStatus() {
|
|
|
|
@@ -505,9 +465,9 @@ export default defineComponent({
|
|
|
|
withCredentials: true,
|
|
|
|
withCredentials: true,
|
|
|
|
headers: authHeader(),
|
|
|
|
headers: authHeader(),
|
|
|
|
}).then((response: any) => {
|
|
|
|
}).then((response: any) => {
|
|
|
|
if (response.data.ok) {
|
|
|
|
if (response.data.ok) {
|
|
|
|
this.user = response.data.user;
|
|
|
|
this.user = response.data.user;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}).catch(() => { this.user = null });
|
|
|
|
}).catch(() => { this.user = null });
|
|
|
|
},
|
|
|
|
},
|
|
|
|
userAutomaticStatus(userid: any) {
|
|
|
|
userAutomaticStatus(userid: any) {
|
|
|
|
@@ -518,7 +478,7 @@ export default defineComponent({
|
|
|
|
headers: authHeader(),
|
|
|
|
headers: authHeader(),
|
|
|
|
}).then((response: any) => {
|
|
|
|
}).then((response: any) => {
|
|
|
|
this.automatic_status = response.data.status
|
|
|
|
this.automatic_status = response.data.status
|
|
|
|
if (this.automatic_status === 1){
|
|
|
|
if (this.automatic_status === 1) {
|
|
|
|
this.getCustomerAutoDelivery(this.customer.id)
|
|
|
|
this.getCustomerAutoDelivery(this.customer.id)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.checktotalOil(this.customer.id)
|
|
|
|
this.checktotalOil(this.customer.id)
|
|
|
|
@@ -623,14 +583,15 @@ export default defineComponent({
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getCustomerAutoDelivery(userid: any) {
|
|
|
|
getCustomerAutoDelivery(userid: any) {
|
|
|
|
let path = import.meta.env.VITE_AUTO_URL + '/delivery/auto/customer/' + userid ;
|
|
|
|
let path = import.meta.env.VITE_AUTO_URL + '/delivery/all/profile/' + userid;
|
|
|
|
axios({
|
|
|
|
axios({
|
|
|
|
method: 'get',
|
|
|
|
method: 'get',
|
|
|
|
url: path,
|
|
|
|
url: path,
|
|
|
|
headers: authHeader(),
|
|
|
|
headers: authHeader(),
|
|
|
|
}).then((response: any) => {
|
|
|
|
}).then((response: any) => {
|
|
|
|
// Handle the case where response.data might be null (no auto delivery found)
|
|
|
|
// Handle the case where response.data might be null (no auto delivery found)
|
|
|
|
this.autodeliveries = response.data ? [response.data] : []
|
|
|
|
this.autodeliveries = response.data || []
|
|
|
|
|
|
|
|
console.log(this.autodeliveries)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getCustomerDelivery(userid: any, delivery_page: any) {
|
|
|
|
getCustomerDelivery(userid: any, delivery_page: any) {
|
|
|
|
@@ -646,30 +607,30 @@ export default defineComponent({
|
|
|
|
editCard(card_id: any) {
|
|
|
|
editCard(card_id: any) {
|
|
|
|
this.$router.push({ name: "cardedit", params: { id: card_id } });
|
|
|
|
this.$router.push({ name: "cardedit", params: { id: card_id } });
|
|
|
|
},
|
|
|
|
},
|
|
|
|
removeCard(card_id: any) {
|
|
|
|
removeCard(card_id: any) {
|
|
|
|
let path = import.meta.env.VITE_BASE_URL + '/payment/card/remove/' + card_id;
|
|
|
|
let path = import.meta.env.VITE_BASE_URL + '/payment/card/remove/' + card_id;
|
|
|
|
axios({
|
|
|
|
axios({
|
|
|
|
method: 'delete',
|
|
|
|
method: 'delete',
|
|
|
|
url: path,
|
|
|
|
url: path,
|
|
|
|
headers: authHeader(),
|
|
|
|
headers: authHeader(),
|
|
|
|
}).then(() => {
|
|
|
|
}).then(() => {
|
|
|
|
// --- EFFICIENT FIX: Manipulate the local array directly ---
|
|
|
|
// --- EFFICIENT FIX: Manipulate the local array directly ---
|
|
|
|
|
|
|
|
|
|
|
|
// 1. Filter the 'credit_cards' array to remove the card with the matching id.
|
|
|
|
|
|
|
|
this.credit_cards = this.credit_cards.filter(card => card.id !== card_id);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 2. Decrement the count.
|
|
|
|
|
|
|
|
this.credit_cards_count--;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// --- END EFFICIENT FIX ---
|
|
|
|
// 1. Filter the 'credit_cards' array to remove the card with the matching id.
|
|
|
|
|
|
|
|
this.credit_cards = this.credit_cards.filter(card => card.id !== card_id);
|
|
|
|
notify({ title: "Card Status", text: "Card Removed", type: "Success" });
|
|
|
|
|
|
|
|
})
|
|
|
|
// 2. Decrement the count.
|
|
|
|
.catch(() => {
|
|
|
|
this.credit_cards_count--;
|
|
|
|
|
|
|
|
|
|
|
|
notify({ title: "Error", text: "Could not remove card.", type: "error" });
|
|
|
|
// --- END EFFICIENT FIX ---
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
notify({ title: "Card Status", text: "Card Removed", type: "Success" });
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
.catch(() => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
notify({ title: "Error", text: "Could not remove card.", type: "error" });
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
deleteCall(delivery_id: any) {
|
|
|
|
deleteCall(delivery_id: any) {
|
|
|
|
let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
|
|
|
|
let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
|
|
|
|
axios({
|
|
|
|
axios({
|
|
|
|
@@ -724,40 +685,40 @@ removeCard(card_id: any) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
onSubmitSocial(commentText: string) {
|
|
|
|
onSubmitSocial(commentText: string) {
|
|
|
|
if (!this.user) {
|
|
|
|
if (!this.user) {
|
|
|
|
console.error("Cannot submit comment: user is not logged in.");
|
|
|
|
console.error("Cannot submit comment: user is not logged in.");
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
let payload = { comment: commentText, poster_employee_id: this.user.user_id };
|
|
|
|
let payload = { comment: commentText, poster_employee_id: this.user.user_id };
|
|
|
|
this.CreateSocialComment(payload);
|
|
|
|
this.CreateSocialComment(payload);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getServiceCalls(customerId: number) {
|
|
|
|
getServiceCalls(customerId: number) {
|
|
|
|
let path = `${import.meta.env.VITE_BASE_URL}/service/for-customer/${customerId}`;
|
|
|
|
let path = `${import.meta.env.VITE_BASE_URL}/service/for-customer/${customerId}`;
|
|
|
|
axios({
|
|
|
|
axios({
|
|
|
|
method: 'get',
|
|
|
|
method: 'get',
|
|
|
|
url: path,
|
|
|
|
url: path,
|
|
|
|
headers: authHeader(),
|
|
|
|
headers: authHeader(),
|
|
|
|
withCredentials: true,
|
|
|
|
withCredentials: true,
|
|
|
|
}).then((response: any) => {
|
|
|
|
}).then((response: any) => {
|
|
|
|
this.serviceCalls = response.data;
|
|
|
|
this.serviceCalls = response.data;
|
|
|
|
}).catch((error: any) => {
|
|
|
|
}).catch((error: any) => {
|
|
|
|
console.error("Failed to get customer service calls:", error);
|
|
|
|
console.error("Failed to get customer service calls:", error);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getCustomerTransactions(customerId: number) {
|
|
|
|
getCustomerTransactions(customerId: number) {
|
|
|
|
let path = `${import.meta.env.VITE_BASE_URL}/payment/transactions/customer/${customerId}/1`;
|
|
|
|
let path = `${import.meta.env.VITE_BASE_URL}/payment/transactions/customer/${customerId}/1`;
|
|
|
|
axios({
|
|
|
|
axios({
|
|
|
|
method: 'get',
|
|
|
|
method: 'get',
|
|
|
|
url: path,
|
|
|
|
url: path,
|
|
|
|
headers: authHeader(),
|
|
|
|
headers: authHeader(),
|
|
|
|
}).then((response: any) => {
|
|
|
|
}).then((response: any) => {
|
|
|
|
this.transactions = response.data;
|
|
|
|
this.transactions = response.data;
|
|
|
|
}).catch((error: any) => {
|
|
|
|
}).catch((error: any) => {
|
|
|
|
console.error("Failed to get customer transactions:", error);
|
|
|
|
console.error("Failed to get customer transactions:", error);
|
|
|
|
this.transactions = [];
|
|
|
|
this.transactions = [];
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
openEditModal(service: ServiceCall) {
|
|
|
|
openEditModal(service: ServiceCall) {
|
|
|
|
this.selectedServiceForEdit = service;
|
|
|
|
this.selectedServiceForEdit = service;
|
|
|
|
@@ -780,23 +741,23 @@ onSubmitSocial(commentText: string) {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
|
|
|
|
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
|
|
|
|
const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
|
|
|
|
const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
|
|
|
|
if(response.data.ok) {
|
|
|
|
if (response.data.ok) {
|
|
|
|
this.getServiceCalls(this.customer.id);
|
|
|
|
this.getServiceCalls(this.customer.id);
|
|
|
|
this.closeEditModal();
|
|
|
|
this.closeEditModal();
|
|
|
|
notify({ title: "Success", text: "Service call deleted!", type: "success" });
|
|
|
|
notify({ title: "Success", text: "Service call deleted!", type: "success" });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
console.error("Failed to delete service call:", error);
|
|
|
|
console.error("Failed to delete service call:", error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
async fetchCustomerParts(customerId: number) {
|
|
|
|
async fetchCustomerParts(customerId: number) {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
const path = `${import.meta.env.VITE_BASE_URL}/service/parts/customer/${customerId}`;
|
|
|
|
const path = `${import.meta.env.VITE_BASE_URL}/service/parts/customer/${customerId}`;
|
|
|
|
const response = await axios.get(path, { headers: authHeader() });
|
|
|
|
const response = await axios.get(path, { headers: authHeader() });
|
|
|
|
this.currentParts = response.data;
|
|
|
|
this.currentParts = response.data;
|
|
|
|
} catch (error) {
|
|
|
|
} catch (error) {
|
|
|
|
console.error("Failed to fetch customer parts:", error);
|
|
|
|
console.error("Failed to fetch customer parts:", error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
openPartsModal() {
|
|
|
|
openPartsModal() {
|
|
|
|
if (this.currentParts) {
|
|
|
|
if (this.currentParts) {
|
|
|
|
@@ -809,19 +770,19 @@ onSubmitSocial(commentText: string) {
|
|
|
|
this.isPartsModalOpen = false;
|
|
|
|
this.isPartsModalOpen = false;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
async handleSaveParts(partsToSave: ServiceParts) {
|
|
|
|
async handleSaveParts(partsToSave: ServiceParts) {
|
|
|
|
try {
|
|
|
|
try {
|
|
|
|
const path = `${import.meta.env.VITE_BASE_URL}/service/parts/update/${partsToSave.customer_id}`;
|
|
|
|
const path = `${import.meta.env.VITE_BASE_URL}/service/parts/update/${partsToSave.customer_id}`;
|
|
|
|
const response = await axios.post(path, partsToSave, { headers: authHeader() });
|
|
|
|
const response = await axios.post(path, partsToSave, { headers: authHeader() });
|
|
|
|
|
|
|
|
|
|
|
|
if(response.data.ok) {
|
|
|
|
if (response.data.ok) {
|
|
|
|
this.currentParts = partsToSave;
|
|
|
|
this.currentParts = partsToSave;
|
|
|
|
notify({ title: "Success", text: "Equipment parts saved successfully!", type: "success" });
|
|
|
|
notify({ title: "Success", text: "Equipment parts saved successfully!", type: "success" });
|
|
|
|
}
|
|
|
|
|
|
|
|
this.closePartsModal();
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.error("Failed to save parts:", error);
|
|
|
|
|
|
|
|
notify({ title: "Error", text: "Failed to save equipment parts.", type: "error" });
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.closePartsModal();
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
|
|
console.error("Failed to save parts:", error);
|
|
|
|
|
|
|
|
notify({ title: "Error", text: "Failed to save equipment parts.", type: "error" });
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
formatDate(dateString: string): string {
|
|
|
|
formatDate(dateString: string): string {
|
|
|
|
if (!dateString) return 'N/A';
|
|
|
|
if (!dateString) return 'N/A';
|
|
|
|
@@ -836,7 +797,7 @@ onSubmitSocial(commentText: string) {
|
|
|
|
return typeMap[typeId] || 'Unknown Service';
|
|
|
|
return typeMap[typeId] || 'Unknown Service';
|
|
|
|
},
|
|
|
|
},
|
|
|
|
getServiceTypeColor(typeId: number): string {
|
|
|
|
getServiceTypeColor(typeId: number): string {
|
|
|
|
const colorMap: { [key: number]: string } = { 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' };
|
|
|
|
const colorMap: { [key: number]: string } = { 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' };
|
|
|
|
return colorMap[typeId] || 'gray';
|
|
|
|
return colorMap[typeId] || 'gray';
|
|
|
|
},
|
|
|
|
},
|
|
|
|
formatEndDate(startDate: string, years: number): string {
|
|
|
|
formatEndDate(startDate: string, years: number): string {
|
|
|
|
@@ -1009,9 +970,9 @@ onSubmitSocial(commentText: string) {
|
|
|
|
|
|
|
|
|
|
|
|
// Check for E00039 duplicate error
|
|
|
|
// Check for E00039 duplicate error
|
|
|
|
const errorMessage = error.response?.data?.error_detail ||
|
|
|
|
const errorMessage = error.response?.data?.error_detail ||
|
|
|
|
error.response?.data?.detail ||
|
|
|
|
error.response?.data?.detail ||
|
|
|
|
error.response?.data?.message ||
|
|
|
|
error.response?.data?.message ||
|
|
|
|
error.message || "Failed to create Authorize.net account";
|
|
|
|
error.message || "Failed to create Authorize.net account";
|
|
|
|
|
|
|
|
|
|
|
|
if (error.response?.data?.is_duplicate || errorMessage.includes("E00039")) {
|
|
|
|
if (error.response?.data?.is_duplicate || errorMessage.includes("E00039")) {
|
|
|
|
// Show duplicate account popup
|
|
|
|
// Show duplicate account popup
|
|
|
|
|