runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
at <RouterView>
at <ThemeLayout onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > >
at <RouterView>
at <App>
warn @ runtime-core.esm-bundler.js?d2dd:38
logError @ runtime-core.esm-bundler.js?d2dd:212
handleError @ runtime-core.esm-bundler.js?d2dd:204
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:158
flushJobs @ runtime-core.esm-bundler.js?d2dd:396
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?d2dd:285
queueCb @ runtime-core.esm-bundler.js?d2dd:307
queuePostFlushCb @ runtime-core.esm-bundler.js?d2dd:313
queueEffectWithSuspense @ runtime-core.esm-bundler.js?d2dd:1582
scheduler @ runtime-core.esm-bundler.js?d2dd:1804
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:384
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
eval @ reactivity.esm-bundler.js?89dc:1131
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:379
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
eval @ reactivity.esm-bundler.js?89dc:1131
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:379
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
set value @ reactivity.esm-bundler.js?89dc:1044
finalizeNavigation @ vue-router.mjs?083c:3307
eval @ vue-router.mjs?083c:3180
Promise.then (async)
pushWithRedirect @ vue-router.mjs?083c:3151
push @ vue-router.mjs?083c:3078
navigate @ vue-router.mjs?083c:2171
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:164
invoker @ runtime-dom.esm-bundler.js?2725:369
runtime-dom.esm-bundler.js?2725:35 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
at parentNode (runtime-dom.esm-bundler.js?2725:35:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5662:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:185:1)
at instance.update (runtime-core.esm-bundler.js?d2dd:5694:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
at flushJobs (runtime-core.esm-bundler.js?d2dd:396:1)
parentNode @ runtime-dom.esm-bundler.js?2725:35
componentUpdateFn @ runtime-core.esm-bundler.js?d2dd:5662
run @ reactivity.esm-bundler.js?89dc:185
instance.update @ runtime-core.esm-bundler.js?d2dd:5694
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:155
flushJobs @ runtime-core.esm-bundler.js?d2dd:396
Promise.then (async)
nextTick @ runtime-core.esm-bundler.js?d2dd:246
eval @ Layout.vue?0147:97
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:164
job @ runtime-core.esm-bundler.js?d2dd:1782
flushPreFlushCbs @ runtime-core.esm-bundler.js?d2dd:328
flushJobs @ runtime-core.esm-bundler.js?d2dd:371
Promise.then (async)
queueFlush @ runtime-core.esm-bundler.js?d2dd:285
queueCb @ runtime-core.esm-bundler.js?d2dd:307
queuePostFlushCb @ runtime-core.esm-bundler.js?d2dd:313
queueEffectWithSuspense @ runtime-core.esm-bundler.js?d2dd:1582
scheduler @ runtime-core.esm-bundler.js?d2dd:1804
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:384
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
eval @ reactivity.esm-bundler.js?89dc:1131
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:379
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
eval @ reactivity.esm-bundler.js?89dc:1131
triggerEffect @ reactivity.esm-bundler.js?89dc:394
triggerEffects @ reactivity.esm-bundler.js?89dc:379
triggerRefValue @ reactivity.esm-bundler.js?89dc:1000
set value @ reactivity.esm-bundler.js?89dc:1044
finalizeNavigation @ vue-router.mjs?083c:3307
eval @ vue-router.mjs?083c:3180
Promise.then (async)
pushWithRedirect @ vue-router.mjs?083c:3151
push @ vue-router.mjs?083c:3078
navigate @ vue-router.mjs?083c:2171
callWithErrorHandling @ runtime-core.esm-bundler.js?d2dd:155
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?d2dd:164
invoker @ runtime-dom.esm-bundler.js?2725:369
<template>
<div class="row mb-5">
<div class="col">
<div class="card card-stretch mb-5">
<div class="card-body px-9 py-5">
<div class="mb-5">
<span class="svg-icon svg-icon-3x m-0">
<inline-svg src="media/icons/duotune/general/mail-open.svg" />
</span>
</div>
<div class="fw-bolder font-28 line-h-34 text-black-400">267</div>
<div class="fw-bold font-12 line-h-15 text-black-500">Urgent</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-stretch mb-5">
<div class="card-body px-9 py-5">
<div class="mb-5">
<span class="svg-icon svg-icon-3x m-0 text-black-100">
<inline-svg src="media/icons/duotune/general/user.svg" />
</span>
</div>
<div class="fw-bolder font-28 line-h-34 text-black-400">31</div>
<div class="fw-bold font-12 line-h-15 text-black-500">
New Opportunities
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-stretch mb-5">
<div class="card-body px-9 py-5">
<div class="mb-5">
<span class="svg-icon svg-icon-3x m-0 text-black-100">
<inline-svg src="media/icons/duotune/general/gen016.svg" />
</span>
</div>
<div class="fw-bolder font-28 line-h-34 text-black-400">89</div>
<div class="fw-bold font-12 line-h-15 text-black-500">
Unassigned Opportunities
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-stretch mb-5">
<div class="card-body px-9 py-5">
<div class="mb-5">
<span class="svg-icon svg-icon-3x m-0">
<inline-svg src="media/icons/duotune/general/chat.svg" />
</span>
</div>
<div class="fw-bolder font-28 line-h-34 text-black-400">54</div>
<div class="fw-bold font-12 line-h-15 text-black-500">
Follow-Ups Today
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-stretch mb-5">
<div class="card-body px-9 py-5">
<div class="mb-5">
<span class="svg-icon svg-icon-3x m-0">
<inline-svg src="media/icons/duotune/general/chat.svg" />
</span>
</div>
<div class="fw-bolder font-28 line-h-34 text-black-400">183</div>
<div class="fw-bold font-12 line-h-15 text-black-500">
Follow-Ups Overdue
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body pt-0">
<el-skeleton class="pt-5" :rows="5" animated v-if="loading" />
<Datatable
:data="tableData"
:header="tableHeader"
v-if="!loading"
:enable-items-per-page-dropdown="true"
>
<template v-slot:user_name="{ row: item }">
<div
class="d-flex align-items-center flex-row-fluid position-relative ms-4"
>
<span class="font-14 line-h-17 fw-bolder text-black-100 me-2">
{{ item.user_name }}
</span>
<span
class="badge me-2 rounded bg-gold-100 fw-bolder text-black-300 font-11 line-h-13 px-2 py-1"
>
{{ item.opportunity_count }}
</span>
<span
class="position-absolute top-0 start-0 translate-middle badge rounded fw-bolder text-black-300 font-11 line-h-13 px-2 py-1"
:class="
item.user_type_name === 'Lead' ? 'bg-blue-100' : 'bg-gold-200'
"
>
{{ item.user_type_name === "Lead" ? "L" : "C" }}
</span>
</div>
<div class="d-flex mt-2 ms-4">
<span class="font-13 line-h-16 text-black-300 fw-semibold me-2">
{{ item.contact_no }}
</span>
<span
class="font-10 line-h-12 text-black-300 fw-semibold badge bg-transaparent border px-2 py-1"
>{{ item.branch_name }}</span
>
</div>
</template>
<template v-slot:source_name="{ row: item }">
<span
class="badge bg-gray-100 font-11 line-h-13 text-black-300 fw-semibold px-2 py-1"
>
{{ item.source_name }}
</span>
</template>
<template v-slot:responsible="{ row: item }">
<span
class="badge bg-gray-100 font-11 line-h-13 text-black-300 fw-semibold px-2 py-1"
v-if="item.responsible"
>
{{ getInitials(item.responsible.name) }}
</span>
</template>
<template v-slot:treatments="{ row: item }">
<template v-for="(val, index) in item.treatments" :key="index">
<div
class="badge bg-gray-100 font-11 line-h-13 text-black-300 fw-semibold px-2 py-1 ms-2"
>
{{ val.name }}
</div>
</template>
</template>
<template v-slot:enquiry_date="{ row: item }">
<div class="d-flex flex-column">
<span class="font-13 line-h-16 fw-semibold text-black-300 mb-1">{{
dateFormat(item.enquiry_date)
}}</span>
<span class="d-flex font-13 line-h-16 fw-bold text-black-300"
>{{ dateFormat(item.follow_up_date) }}
<span class="svg-icon svg-icon-2 text-black-100 m-0 ms-1">
<inline-svg src="media/icons/duotune/arrows/arr050.svg" />
</span>
</span>
</div>
</template>
<template v-slot:updated_at="{ row: item }">
<div class="d-flex flex-column">
<span class="font-13 line-h-16 fw-semibold text-black-300 mb-1">{{
dateFormat(item.updated_at)
}}</span>
<div class="d-flex">
<span
class="badge bg-gray-100 fw-semibold text-black-300 font-11 line-h-13 px-2 py-1"
>
<span class="svg-icon svg-icon-5 m-0 me-1">
<inline-svg src="media/icons/comment.svg" />
</span>
2
</span>
<span
class="badge bg-gray-100 fw-semibold text-black-300 font-11 line-h-13 px-2 py-1 ms-2"
>
<span class="svg-icon svg-icon-5 m-0 me-1">
<inline-svg src="media/icons/phone.svg" />
</span>
2
</span>
</div>
</div>
</template>
<template v-slot:status="{ row: item }">
<template v-for="(val, index) in statusTags">
<span
class="badge fw-semibold text-black-300 font-11 line-h-13 px-2 py-1"
:style="
val.outline
? `border: 1px solid ${val.color}`
: `background: ${val.color}`
"
:key="index"
v-if="item.status === val.id"
>{{ val.name }}</span
>
</template>
</template>
<template v-slot:actions="{ row: item }">
<div class="d-flex justify-content-end">
<a
class="btn btn-icon me-2 w-32px h-32px"
:class="item.status === 20 ? 'bg-red-100' : 'bg-gray-100'"
@click="flagStatus(item.id)"
><span
class="svg-icon svg-icon-2"
:class="item.status === 20 ? 'text-white' : 'text-black-100'"
>
<inline-svg src="media/icons/duotune/maps/map001.svg" /> </span
></a>
<a
class="btn btn-icon bg-gray-100 w-32px h-32px"
@click="editItem(item.id)"
>
<span class="svg-icon svg-icon-2 text-black-100">
<inline-svg
src="media/icons/duotune/general/gen055.svg"
/> </span
></a>
<a ></a>
</div>
</template>
</Datatable>
</div>
</div>
<editOpportunity></editOpportunity>
</template>
import { defineComponent, ref, onMounted, inject } from "vue";
import Datatable from "@/components/kt-datatable/KTDataTable.vue";
import { setCurrentPageTitle } from "@/core/helpers/breadcrumb";
import editOpportunity from "@/forms/opportunities/editOpportunity.vue";
import ApiService from "@/core/services/ApiService";
import statusTags from "@/composables/Status";
import { getInitials, dateFormat } from "@/composables/General";
export default defineComponent({
name: "Opportunities-screen",
components: {
Datatable,
editOpportunity,
},
setup() {
const emitter = inject("emitter");
let loading = ref(false);
const payload = ref({});
const tableData = ref([]);
const tableHeader = ref([
{
columnName: "Name",
columnLabel: "user_name",
sortEnabled: true,
},
{
columnName: "Source",
columnLabel: "source_name",
sortEnabled: true,
},
{
columnName: "Treatments",
columnLabel: "treatments",
sortEnabled: true,
},
{
columnName: "Staff",
columnLabel: "responsible",
sortEnabled: true,
},
{
columnName: "Enquiry",
columnLabel: "enquiry_date",
sortEnabled: true,
},
{
columnName: "Updated",
columnLabel: "updated_at",
sortEnabled: true,
},
{
columnName: "Status",
columnLabel: "status",
sortEnabled: true,
},
{
columnName: "Actions",
columnLabel: "actions",
sortEnabled: false,
},
]);
emitter.on("refreshOpportunities", (value) => {
fetchOpportunities();
});
async function fetchOpportunities() {
loading.value = true;
await ApiService.setHeader();
await ApiService.post("opportunity/get", payload)
.then((resource) => {
loading.value = false;
tableData.value = resource.data.data.data;
})
.catch((error) => {
console.log(error);
});
}
async function editItem(id) {
document.getElementById("kt_edit_opportunity_toggle").click();
emitter.emit("editOpportunityItem", id);
}
async function flagStatus(id) {
await ApiService.setHeader();
await ApiService.post("opportunity/update-status", { id: id, status: 20 })
.then((resource) => {
if (resource.data.result === "success") {
fetchOpportunities();
}
})
.catch((error) => {
console.log(error);
});
}
onMounted(() => {
setCurrentPageTitle("Opportunities");
fetchOpportunities();
});
return {
tableHeader,
tableData,
loading,
editItem,
statusTags,
flagStatus,
getInitials,
dateFormat,
emitter,
};
},
});
tableData.value = resource.data.data.data;
tableData.value.splice(0, tableData.value.length, ...resource.data.data.data.value);