TelemedPro/purityselect
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Inshal
2024-10-25 01:05:27 +05:00
commit 94cd8a1dc9
1710 changed files with 273609 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
resources/js/layouts/agentCallDefault.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup>
import agentCallDefaultLayout from './components/agentCallDefaultLayout.vue';
</script>
<template>
<agentCallDefaultLayout>
<RouterView />
</agentCallDefaultLayout>
</template>
<style lang="scss">
// As we are using `layouts` plugin we need its styles to be imported
@use "@layouts/styles/default-layout";
</style>

11
resources/js/layouts/blank.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="layout-wrapper layout-blank">
<RouterView />
</div>
</template>
<style>
.layout-wrapper.layout-blank {
flex-direction: column;
}
</style>

723
resources/js/layouts/components/DefaultLayoutWithVerticalNav.vue Normal file
View File

@@ -0,0 +1,723 @@
<script setup>
import NavBarNotifications from '@/layouts/components/NavBarNotifications.vue';
import axios from "@axios";
import upgradeBannerDark from "@images/pro/upgrade-banner-dark.png";
import upgradeBannerLight from "@images/pro/upgrade-banner-light.png";
import VerticalNavLayout from "@layouts/components/VerticalNavLayout.vue";
import VerticalNavLink from "@layouts/components/VerticalNavLink.vue";
import { useRoute, useRouter } from "vue-router";
import { useTheme } from "vuetify";
import { useStore } from "vuex";
const isConferncePage = computed(
() => store.getters.getCurrentPage === "/provider/telehealth"
);
const isConferncePageForPatient = computed(
() => store.getters.getCurrentPage === "/queue"
);
const router = useRouter();
const route = useRoute();
const store = useStore();
const queueUsers = ref([]);
const usertime = ref(null);
const isMuted = ref(false);
const isMicrophoneAllowed = ref(null);
const isCameraAllowed = ref(false);
const currentUser = ref(localStorage.getItem("user_role"));
const toggelUserValue = ref(null);
const isMobile = ref(window.innerWidth <= 768);
const isLoadingVisible = ref(false);
const patientName = ref();
const profileData = ref(null);
const profileName = ref(null);
// Components
import Footer from "@/layouts/components/Footer.vue";
import QueueComponent from "@/layouts/components/QueueComponent.vue";
import UserProfile from "@/layouts/components/UserProfile.vue";
import { computed } from "vue";
const vuetifyTheme = useTheme();
const userRole = localStorage.getItem("user_role"); // Fetch user role from local storage
const isPatient = computed(() => userRole.toLowerCase() === "patient");
const isAgent = computed(() => userRole.toLowerCase() === "agent");
//const currentRout = computed(() => localStorage.getItem('getCurrentPage'));queue');
const patient = ref();
const upgradeBanner = computed(() => {
return vuetifyTheme.global.name.value === "light"
? upgradeBannerLight
: upgradeBannerDark;
});
const isCameraPermissionGranted = ref(false);
const isMicrophonePermissionGranted = ref(false);
const getIsTonalSnackbarVisible = ref(false);
const errorMessage = ref(null);
const isMenu = ref(false);
const checkMobile = () => {
isMobile.value = window.innerWidth <= 768;
};
const items = [
{
title: 'Orders', icon: 'mdi-shopping-cart', to: '/orders-list'
},
{
title: 'Subscriptions', icon: 'mdi-refresh-circle', to: '/subscriptions',
},
{ title: 'Schedules', icon: 'tabler-clock', to: '/schedules' },
{
title: 'Complete', icon: 'mdi-success-circle',
to: '/complete'
},
];
const locations = [
'top',
'bottom',
'start',
'end',
'center',
];
const location = ref('bottom');
onMounted(async () => {
window.addEventListener("resize", checkMobile);
const access_token = localStorage.getItem("access_token");
if (currentUser.value == "agent") {
await store.dispatch("getAgentProfile");
profileData.value = store.getters.getAgentProfile.ai_switch;
profileName.value = profileData.value.name;
console.log("profileData", profileData.value);
}
if (currentUser.value == "patient") {
await loadGoogleAnalytics();
// console.log("patient", currentUser.value);
patient.value = localStorage.getItem("patient_id");
await axios
.post("/api/get-patient-detail/" + patient.value, {
headers: {
Authorization: `Bearer ${access_token}`,
},
})
.then((response) => {
// console.log('Response:', response.data);
if (response.data) {
let patientData = response.data.patient;
profileName.value =
patientData.first_name + " " + patientData.last_name;
console.log("data", profileName.value);
} else {
isLoadingVisible.value = false;
}
})
.catch((error) => {
console.error("Error:", error);
});
}
// await checkPermissions();
});
const loadGoogleAnalytics = async () => {
const script = document.createElement('script')
script.async = true
script.src = 'https://www.googletagmanager.com/gtag/js?id=G-0VZR7VCVWD'
document.head.appendChild(script)
window.dataLayer = window.dataLayer || []
function gtag(){dataLayer.push(arguments)}
gtag('js', new Date())
gtag('config', 'G-0VZR7VCVWD')
}
const logout = () => {
// const currentUser = localStorage.getItem('user_role');
localStorage.removeItem("isLogin");
localStorage.removeItem("patient_id");
localStorage.removeItem("user_role");
localStorage.removeItem("access_token");
localStorage.removeItem("userAbilities");
localStorage.removeItem("agent_id");
localStorage.removeItem("appiontment-id");
localStorage.removeItem("patient_appointment_id");
localStorage.removeItem("cominguser");
localStorage.removeItem("currentPage");
localStorage.removeItem("profileCompleted");
localStorage.removeItem("category_name");
localStorage.removeItem("selectedSidebarMenu");
localStorage.removeItem("plan_name");
localStorage.removeItem("plan_price");
if (currentUser.value == "agent") {
router.push("/provider/login");
} else {
router.push("/login");
}
};
const openNotesModel = ref(false);
const patientNotes = ref(null);
const openNotes = async () => {
await store.dispatch("getAgentPatientNotes");
patientNotes.value = store.getters.getPatientNotes;
openNotesModel.value = true;
};
const iconName = ref('mdi-chevron-down');
const changeIcon = () => {
if (iconName.value == 'mdi-chevron-down') {
iconName.value = 'mdi-chevron-right';
isMenu.value = false;
} else {
iconName.value = 'mdi-chevron-down';
isMenu.value = true;
}
}
</script>
<template>
<VDialog v-model="openNotesModel" refs="myDialog" persistent width="500">
<!-- <template v-slot:default="{ isActive }"> -->
<v-card>
<v-card-text>
<div class="mt-2 mb-2">
<h4>Patient Notes.</h4>
</div>
<p v-for="note in patientNotes" :key="note.id">
{{ note.note }}
</p>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text="Close" @click="openNotesModel = false"></v-btn>
</v-card-actions>
</v-card>
<!-- </template> -->
</VDialog>
<VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">
<VCardText class="" style="color: white !important">
<div class="demo-space-x">
<VProgressCircular :size="40" color="primary" indeterminate />
</div>
</VCardText>
</VDialog>
<VSnackbar v-model="getIsTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat" color="red">
{{ errorMessage }}
</VSnackbar>
<VerticalNavLayout>
<!-- 👉 navbar -->
<template #navbar="{ toggleVerticalOverlayNavActive }">
<div class="d-flex h-100 align-center">
<!-- 👉 Vertical nav toggle in overlay mode -->
<IconBtn class="ms-n3 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
<VIcon icon="bx-menu" />
</IconBtn>
<!-- 👉 Search -->
<div class="d-flex align-center cursor-pointer" style="user-select: none">
<!-- 👉 Search Trigger button -->
<!-- <IconBtn>
<VIcon icon="bx-search" />
</IconBtn> -->
<!-- <span class="d-none d-md-flex align-center text-disabled">
<VCol cols="12" md="12">
<VCardText class="px-0">
<h3 class="mb-0"> Welcome, {{ profileName }} </h3>
</VCardText>
</VCol>
</span> -->
</div>
<VSpacer />
<!-- <IconBtn class="me-2" href="https://github.com/themeselection/sneat-vuetify-vuejs-admin-template-free"
target="_blank" rel="noopener noreferrer">
</IconBtn> -->
<!-- <NavbarThemeSwitcher class="me-2" /> -->
<NavBarNotifications class="me-2" />
<UserProfile />
</div>
</template>
<template #vertical-nav-content>
<div v-if="!isConferncePageForPatient">
<VerticalNavLink v-if="isPatient" :item="{
title: 'Overview',
icon: 'mdi-view-dashboard',
to: '/overview',
}" />
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Tele Health',
icon: 'mdi-content-paste',
to: '/treatment-plan',
}" />
<VerticalNavLink v-if="isPatient" :item="{
title: 'Membership',
icon: 'mdi-cached',
to: '/membership',
}" />
<VerticalNavLink v-if="isPatient" :item="{
title: 'Labs',
icon: 'bx-table',
to: '/labs',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Doctor Appiontment',
icon: 'bx-add-to-queue',
to: '/doctor-appiontments',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Prescriptions',
icon: 'tabler-prescription',
to: '/prescriptions',
}" /> -->
<VerticalNavLink v-if="isPatient" :item="{
title: 'Orders',
icon: 'mdi-shopping-cart',
to: '/orders-list',
}" />
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Subscriptions',
icon: 'mdi-refresh-circle',
to: '/subscriptions',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Orders',
icon: 'mdi-shopping-cart',
children: [
{
title: 'Orders',
icon: 'mdi-shopping-cart',
to: '/orders-list',
},
{
title: 'Subscriptions',
icon: 'mdi-refresh-circle',
to: '/subscriptions',
},
],
}" />-->
<VerticalNavLink v-if="isPatient" :item="{
title: 'Appointments',
icon: 'bx-add-to-queue',
to: '/complete',
// children: [
// {
// title: 'Schedules',
// icon: 'tabler-clock',
// to: '/schedules',
// },
// {
// title: 'Complete',
// icon: 'mdi-success-circle',
// to: '/complete',
// },
// ],
}" />
</div>
<QueueComponent v-if="!isMobile" :isVisable="true" />
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Labs Kits',
icon: 'bx-table',
to: '/lab-kits',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Profile',
icon: 'bx-table',
to: '/profile',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'TeleHealth ',
icon: 'bx-table',
to: '/telehealth',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Description',
icon: 'bx-table',
to: '/description',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Follow up',
icon: 'bx-table',
to: '/followup',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Account Settings',
icon: 'mdi-account',
to: '/account-settings',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Forms',
icon: 'mdi-clipboard-text-multiple',
}" /> -->
<!-- <VerticalNavLink v-if="isPatient" :item="{
title: 'Contact Us',
icon: 'mdi-at',
to: '/contactus',
}" /> -->
<!-- <VerticalNavLink v-if="isAgent" :item="{
title: 'Appointments',
icon: 'bx-table',
to: '/provider/appointments',
}" /> -->
<!-- <VerticalNavLink v-if="isAgent" :item="{
title: 'Doctor Appiontment',
icon: 'bx-add-to-queue',
to: '/provider/doctor-appiontments',
}" /> -->
<!-- <VerticalNavLink
:item="{
title: 'New Slot',
icon: 'bx-add-to-queue',
to: '/book-slot',
}"
/> -->
<!-- <VerticalNavLink v-if="isAgent" :item="{
title: 'Users',
icon: 'bx-add-to-queue',
to: '/provider/queue-users',
}" /> -->
<VerticalNavLink v-if="isAgent" :item="{
title: 'Dashboard',
icon: 'bx-home',
to: '/provider/dashboard',
}" />
<VerticalNavLink v-if="isAgent" :item="{
title: 'Prescriptions',
icon: 'tabler-prescription',
to: '/provider/orders-list',
}" />
<!-- <VerticalNavLink v-if="isAgent" :item="{
title: 'Meeting History',
icon: 'tabler-clock',
to: '/provider/meeting-history',
}" /> -->
<VerticalNavLink @click="logout()" v-if="isPatient" :item="{
title: 'Logout',
icon: 'bx-log-out',
}" />
<QueueComponent v-if="isMobile" :isVisable="true" />
<!-- 👉 Pages -->
<!-- <VerticalNavSectionTitle
:item="{
heading: 'Pages',
}"
/>
<VerticalNavLink
:item="{
title: 'Login',
icon: 'bx-log-in',
to: '/login',
}"
/> -->
<!-- <VerticalNavLink
:item="{
title: 'Register',
icon: 'bx-user-plus',
to: '/register',
}"
/>
<VerticalNavLink
:item="{
title: 'Error',
icon: 'bx-info-circle',
to: '/no-existence',
}"
/> -->
<!-- 👉 User Interface -->
<!-- <VerticalNavSectionTitle
:item="{
heading: 'User Interface',
}"
/> -->
<!-- <VerticalNavLink
:item="{
title: 'Typography',
icon: 'mdi-alpha-t-box-outline',
to: '/typography',
}"
/>
<VerticalNavLink
:item="{
title: 'Icons',
icon: 'bx-show',
to: '/icons',
}"
/>
<VerticalNavLink
:item="{
title: 'Cards',
icon: 'bx-credit-card',
to: '/cards',
}"
/>
<VerticalNavLink
:item="{
title: 'Tables',
icon: 'bx-table',
to: '/tables',
}"
/>
<VerticalNavLink
:item="{
title: 'Form Layouts',
icon: 'mdi-form-select',
to: '/form-layouts',
}"
/> -->
</template>
<!-- 👉 Pages -->
<slot />
<!-- 👉 Footer -->
<template #footer>
<Footer />
</template>
</VerticalNavLayout>
</template>
<style lang="scss" scoped>
.meta-key {
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
border-radius: 6px;
block-size: 1.5625rem;
line-height: 1.3125rem;
padding-block: 0.125rem;
padding-inline: 0.25rem;
}
::v-deep .custom-menu {
position: relative;
}
::v-deep .custom-menu::before {
content: "" !important;
position: absolute !important;
transform: translateY(-50%);
top: 50% !important;
left: -8px !important;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-bottom: 8px solid #fff !important;
}
// Styles for the VList component
.more .v-list-item-title {
color: rgb(106 109 255);
}
.more .menu-item:hover {
cursor: pointer;
}
.slide-enter-active,
.slide-leave-active {
transition: transform 0.3s ease;
}
.slide-enter,
.slide-leave-to {
transform: translateX(-100%);
}
.start-call-btn {
opacity: 0;
display: none;
transition: opacity 0.3s ease;
}
.button_margin {
margin: 2px;
}
.dialog_padding {
padding: 5px;
}
.custom-menu .v-menu__content {
background-color: #333;
color: #fff;
border-radius: 4px;
padding: 8px 0;
}
.user-info {
display: flex;
flex-direction: column;
transition: opacity 0.3s ease;
}
.list-item-hover {
transition: background-color 0.3s ease;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.1);
.start-call-btn {
opacity: 1;
display: block;
position: relative;
left: -35px;
}
.user-info {
opacity: 0;
display: none;
}
}
}
.pop_card {
overflow: hidden !important;
padding: 10px;
}
.v-overlay__content {
max-height: 706.4px;
max-width: 941.6px;
min-width: 24px;
--v-overlay-anchor-origin: bottom left;
transform-origin: left top;
top: 154.4px !important;
left: 204px !important;
}
.button_margin {
margin-top: 10px;
font-size: 10px;
}
/* Responsive Styles */
@media screen and (max-width: 768px) {
.pop_card {
max-width: 100%;
margin: 0 auto;
}
}
.container_img {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
.image {
order: 2;
/* Change the order to 2 in mobile view */
}
.text {
order: 1;
/* Change the order to 1 in mobile view */
}
/* Media query for mobile view */
@media (max-width: 768px) {
.container_img {
flex-direction: row;
margin-top: 10px;
}
.button_margin_mobile {
width: 100%;
}
.image {
width: 20%;
padding: 0 10px;
}
.text {
width: 80%;
/* Each takes 50% width */
padding: 0 10px;
/* Optional padding */
}
}
::-webkit-scrollbar {
width: 10px;
/* Width of the scrollbar */
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
/* Color of the track */
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
/* Color of the handle */
border-radius: 5px;
/* Roundness of the handle */
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
/* Color of the handle on hover */
}
/* Container for the content */
.scroll-container {
max-height: 191px;
/* Maximum height of the scrollable content */
overflow-y: scroll;
/* Enable vertical scrolling */
}
/* Content within the scroll container */
.scroll-content {
padding: 20px;
}
/* Example of additional styling for content */
.scroll-content p {
margin-bottom: 20px;
}
.cross button {
padding: 0px;
margin: 0px;
/* font-size: 10px; */
background: none;
border: none;
box-shadow: none;
height: 23px;
}
.v-data-table-header {
display: table-header-group;
}
button.v-btn.v-btn--elevated.v-theme--light.bg-primary.v-btn--density-default.v-btn--size-default.v-btn--variant-elevated.text-capitalize {
letter-spacing: 1.15px;
font-size: 15px;
}
</style>

46
resources/js/layouts/components/DefinedSteps.vue Normal file
View File

@@ -0,0 +1,46 @@
<script setup>
import { onBeforeMount, onMounted, ref } from 'vue';
const steps = ref([
{
description:'1) Confirm Shipping details'
},
{
description:'2) Make the payment.'
},
{
description:'3) Schedule your visit.'
},
{
description:'4) Meet with your provider.'
}
]);
const isMobile = ref(window.innerWidth <= 768);
const checkIfMobile = () => {
isMobile.value = window.innerWidth <= 768;
};
onBeforeMount(async () => {
})
onMounted(async () => {
window.addEventListener('resize', checkIfMobile);
});
</script>
<template>
<VCard class="bg-transparent d-flex flex-column justify-center align-center" :class="isMobile ? '' : 'auth-card pa-2 plan-card'" style="min-width: 90%;border: none;box-shadow: none;" color="">
<v-card-text class="text-center">
<h4 style="text-decoration: underline;font-weight: 700;">NEXT STEPS</h4>
<v-list class="bg-transparent text-yellow-theme-button">
<v-list-item-group>
<v-list-item v-for="step in steps" :key="step.id">
<v-list-item-content>
<v-list-item-title class="text-left">
{{ step.description }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card-text>
</VCard>
</template>

40
resources/js/layouts/components/Footer.vue Normal file
View File

@@ -0,0 +1,40 @@
<script setup>
import axios from '@axios';
const seetingFooterText = ref();
const gotoTermsCondition = () => {
window.open('/terms-and-conditions', '_blank');
};
const gotoPrivacyPolicy = () => {
window.open('/privacy-policy', '_blank');
};
const gotoRefundPolicy = () => {
window.open('/refund-policy', '_blank');
};
onMounted(async () => {
let setting = await axios.post('/api/settings', {})
// console.log(setting.data)
seetingFooterText.value = setting.data.footer_text
})
</script>
<template>
<div class="h-100 d-flex align-center justify-space-between">
<!-- 👉 Footer: left content -->
<span class="d-flex align-center">
&copy; Copyright {{ new Date().getFullYear() }}, {{ seetingFooterText }}
</span>
<!-- 👉 Footer: right content -->
<div class="d-flex align-center">
<a type="button" class="mr-3 ">Contact Us</a>
<a type="button" class="mr-3 " @click="gotoTermsCondition()">Terms & Conditions</a>
<a type="button" class="mr-3 " @click="gotoPrivacyPolicy()">Privacy Policy</a>
<a type="button" class="" @click="gotoRefundPolicy()">Refund Policy</a>
</div>
</div>
</template>
<style>
.layout-footer {
background-color: rgb(var(--v-theme-footer)) !important;
color: #fff !important;
}
</style>

157
resources/js/layouts/components/NavBarNotifications.vue Normal file
View File

@@ -0,0 +1,157 @@
<script setup>
import avatar3 from '@images/avatars/avatar-3.png';
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter()
const route = useRoute()
const store = useStore();
const currentUser = ref(localStorage.getItem('user_role'));
const access_token = localStorage.getItem('access_token');
const isVisiable = ref(true);
const itemHistory = ref([]);
const notifications = ref([]);
onMounted(async () => {
if (currentUser.value == 'patient') {
console.log("currentUserAsif", currentUser.value);
await store.dispatch('getPatientsNotification')
itemHistory.value = store.getters.getPatientsNotification.notification;
console.log("itemHistory", itemHistory.value);
if (itemHistory.value == '') {
console.log("itemHistory not found");
itemHistory.value = [
{
"id": 1,
"created_at": "2024-07-17T19:08:45.000000Z",
"updated_at": "2024-07-30T19:08:45.000000Z",
"deleted_at": null,
"status": "Approved",
"cart_id": 20,
"patient_id": 38,
"message": "Order Update",
"description": "Your order status has been updated."
}
]
}
console.log("second hostory", itemHistory.value);
appendItemHistoryToNotifications(itemHistory.value);
}
else {
itemHistory.value = '';
}
});
const appendItemHistoryToNotifications = (itemHistory) => {
if (itemHistory) {
itemHistory.forEach(item => {
notifications.value.push({
id: item.cart_id,
img: avatar3, // Placeholder for image
title: item.message,
subtitle: item.description,
time: new Date(item.created_at).toLocaleString(),
isSeen: false,
});
});
} else {
notifications.value = [];
}
console.log("notifications1", notifications.value);
};
// const notifications = ref([
// {
// id: 1,
// img: avatar4,
// title: 'Congratulation Flora! 🎉',
// subtitle: 'Won the monthly best seller badge',
// time: 'Today',
// isSeen: true,
// },
// {
// id: 2,
// text: 'Tom Holland',
// title: 'New user registered.',
// subtitle: '5 hours ago',
// time: 'Yesterday',
// isSeen: false,
// },
// {
// id: 3,
// img: avatar5,
// title: 'New message received 👋🏻',
// subtitle: 'You have 10 unread messages',
// time: '11 Aug',
// isSeen: true,
// },
// {
// id: 4,
// img: paypal,
// title: 'Paypal',
// subtitle: 'Received Payment',
// time: '25 May',
// isSeen: false,
// color: 'error',
// },
// {
// id: 5,
// img: avatar3,
// title: 'Received Order 📦',
// subtitle: 'New order received from john',
// time: '19 Mar',
// isSeen: true,
// },
// ])
const removeNotification = notificationId => {
notifications.value.forEach((item, index) => {
if (notificationId === item.id)
notifications.value.splice(index, 1)
})
}
const markRead = notificationId => {
notifications.value.forEach(item => {
notificationId.forEach(id => {
if (id === item.id)
item.isSeen = true
})
})
}
const markUnRead = notificationId => {
notifications.value.forEach(item => {
notificationId.forEach(id => {
if (id === item.id)
item.isSeen = false
})
})
}
const handleNotificationClick = notification => {
console.log("ok", notification);
if (!notification.isSeen)
markRead([notification.id])
const mainDiv = document.querySelector('.v-overlay-container');
// Remove all child elements
while (mainDiv.firstChild) {
mainDiv.removeChild(mainDiv.firstChild);
}
router.push('/order-detail/' + notification.id);
}
const handleClick = (event) => {
// Handle window click event here
console.log('Window clicked!', event);
};
</script>
<template>
<!-- <div v-if="history"></div> -->
<Notifications :notifications="notifications" @remove="removeNotification" @read="markRead" @unread="markUnRead"
@click:notification="handleNotificationClick" />
</template>

16
resources/js/layouts/components/NavbarThemeSwitcher.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
const themes = [
{
name: 'light',
icon: 'bx-sun',
},
{
name: 'dark',
icon: 'bx-moon',
},
]
</script>
<template>
<ThemeSwitcher :themes="themes" />
</template>

411
resources/js/layouts/components/PatientPrescriptionDetail.vue Normal file
View File

@@ -0,0 +1,411 @@
<script setup>
const firstName = ref('')
const email = ref('')
const mobile = ref()
const password = ref()
const checkbox = ref(false)
const getPrintData = ref([]);
const props = defineProps({
itemProps: {
type: Array,
required: false,
},
})
const calculateAge = (dob) => {
const birthDate = new Date(dob);
const today = new Date();
let years = today.getFullYear() - birthDate.getFullYear();
let months = today.getMonth() - birthDate.getMonth();
let days = today.getDate() - birthDate.getDate();
// Adjust the days and months if negative
if (days < 0) {
months -= 1;
let previousMonth = today.getMonth() - 1;
if (previousMonth < 0) {
previousMonth = 11; // December
}
const daysInPreviousMonth = new Date(today.getFullYear(), previousMonth + 1, 0).getDate();
days += daysInPreviousMonth;
}
if (months < 0) {
years -= 1;
months += 12;
}
// Return the largest unit that is non-zero
if (years > 0) {
return `${years} year${years !== 1 ? 's' : ''}`;
} else if (months > 0) {
return `${months} month${months !== 1 ? 's' : ''}`;
} else {
return `${days} day${days !== 1 ? 's' : ''}`;
}
};
const changeDateFormat = (dateFormat) => {
const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
const year = parseInt(dateParts[0]);
const month = parseInt(dateParts[1]); // No need for padding
const day = parseInt(dateParts[2]); // No need for padding
// Create a new Date object with the parsed values
const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object
// Format the date as mm-dd-yyyy
const formattedDate = month + '-' + day + '-' + date.getFullYear();
return formattedDate;
}
// const changeDateFormat = (dateFormat) => {
// const dateObject = new Date(dateFormat);
// const month = String(dateObject.getMonth() + 1).padStart(2, '0'); // Adding 1 because getMonth() returns zero-based month index
// const day = String(dateObject.getDate()).padStart(2, '0');
// const year = dateObject.getFullYear();
// return `${month}-${day}-${year}`;
// }
</script>
<template>
<!-- <VCard class="px-3"> -->
<div class="data pb-0">
<div style="line-height:25px;">
<v-row class="px-3 ">
<v-col cols="12" md="12" class="d-flex align-items-center pb-0 pl-0 pr-0">
<label class="v-label text-body-2 text-high-emphasis text-primary-sign print_info"
for="mobile">Name: </label>
<div class="border-bottom font-style"><span class="bottomlined_value">
{{ props.itemProps.first_name }} {{ props.itemProps.last_name }}</span></div>
<!-- <v-text-field class="cross text-primary" variant="underlined"></v-text-field> -->
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="12" class="cross d-flex align-items-center pb-0">
<label class="v-label text-body-2 text-high-emphasis text-primary-sign print_info"
for="mobile">Address:
</label>
<div class="border-bottom font-style">
<span class="bottomlined_value">{{ props.itemProps.patient_address }}</span>
</div>
<!-- <v-text-field class="field-laypout text-primary" variant="underlined"></v-text-field> -->
</v-col>
</v-row>
<v-row>
<v-col cols="4" md="4" sm="4" class="cross d-flex align-items-center pb-0">
<label class="v-label text-body-2 text-high-emphasis text-primary-sign print_info" for="mobile">Age:
</label>
<div class="border-bottom fs-0 font-style"><span class="bottomlined_value"> {{
calculateAge(props.itemProps.dob)
}}</span>
</div>
<!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
</v-col>
<v-col cols="4" md="4" sm="4" class="cross d-flex w-100 align-items-center pb-0">
<label class="v-label text-body-2 text-high-emphasis text-primary-sign print_info" for="mobile">Sex:
</label>
<div class="border-bottom font-style"><span class="bottomlined_value"> {{ props.itemProps.gender
}}</span> </div>
<!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
</v-col>
<v-col cols="4" md="4" sm="4" class="cross d-flex align-items-center pb-0 pl-0">
<label class="v-label text-body-2 text-high-emphasis text-primary-sign print_info"
for="mobile">Date: </label>
<div class="border-bottom font-style pl-2"><span class="bottomlined_value"> {{
changeDateFormat(props.itemProps.date) }}</span> </div>
<!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
</v-col>
</v-row>
</div>
<v-row class="px-3 py-5 mt-5 pb-5 mb-5">
<div class="w-100 ml-5">
<v-col cols="12" md="12" sm="12" class="cross d-flex align-items-center pb-0">
<!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">Name:
</label> -->
<div class="prescription fs-0 W-100 ml-5 mt-3 text-prescriptin-color">
<span class="bottomlined_value">{{ props.itemProps.name
}}</span>
</div>
<!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
</v-col>
<v-col cols="12" md="12" sm="12" class="cross d-flex align-items-center pb-0">
<!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">Brand:
</label> -->
<div class="prescription ml-5 mt-3 text-prescriptin-color"> <span class="bottomlined_value">{{
props.itemProps.brand }}</span> </div>
<!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
</v-col>
<v-col cols="12" md="12" sm="12" class="cross d-flex align-items-center pb-0">
<!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">From:
</label> -->
<div class="prescription font-style ml-5 mt-3 text-prescriptin-color"><span
class="bottomlined_value">{{ props.itemProps.from
}}</span>
</div>
<!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
</v-col>
<v-col cols="12" md="12" sm="12" class="cross d-flex align-items-center pb-0">
<!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">From:
</label> -->
<div class="prescription font-style ml-5 mt-3 text-prescriptin-color">
<span class="bottomlined_value">{{ props.itemProps.direction_quantity }} </span>
</div>
<!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
</v-col>
<v-col cols="12" md="12" sm="12" class="cross d-flex align-items-center pb-0">
<!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">From:
</label> -->
<div class="prescription font-style ml-5 mt-3 text-prescriptin-color">
<span class="bottomlined_value"> {{ props.itemProps.dosage }}</span>
</div>
<!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
</v-col>
<v-col cols="12" md="12" sm="12" class="cross d-flex align-items-center pb-0">
<!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">From:
</label> -->
<div class="prescription font-style ml-5 mt-3 text-prescriptin-color">
<span class="bottomlined_value"> {{ props.itemProps.quantity }}</span>
</div>
<!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
</v-col>
<v-col cols="12" md="12" sm="12" class="cross d-flex align-items-center pb-0">
<!-- <label class="v-label text-body-2 text-high-emphasis text-primary-color" for="mobile">From:
</label> -->
<div class="prescription font-style ml-5 mt-3"> <span class="bottomlined_value">{{
props.itemProps.refill_quantity }} </span> </div>
<!-- <v-text-field class="text-primary" variant="underlined"></v-text-field> -->
</v-col>
</div>
</v-row>
<v-row class="p-0 py-0 m-0 pt-1">
<v-col cols="6" offset="6" class="cross bottom-input d-flex align-items-center">
<label class=" text-body-2 text-primary-color mb-0 physician-sign" for="physician-sign">Physician
sign's:</label>
<div class="border-bottom font-style"> <span class="bottomlined_value"> {{ props.itemProps.agent_sign }}
</span></div>
<!-- <div class="border-bottom"> Physician
sign's </div> -->
<!-- <v-text-field class="cross text-primary" variant="underlined" id="physician-sign"></v-text-field> -->
</v-col>
</v-row>
<v-row class="p-0 py-0 m-0 pt-1">
<v-col cols="6" offset="6" class="cross w-50 pt-0 d-flex align-items-center">
<label class="text-body-2 text-primary-color mr-0 lic-no" for="lic-no">Lic No.</label>
<div class="border-bottom text-left font-style"> <span class="bottomlined_value">{{
props.itemProps.medical_license_number }} </span> </div>
<!-- <v-text-field class="cross text-primary" variant="underlined" id="lic-no"></v-text-field> -->
</v-col>
</v-row>
<v-row class="p-0 py-0 m-0 pt-1">
<v-col cols="6" offset="6" class="cross w-50 pt-0 d-flex align-items-center">
<label class="text-body-2 text-high-emphasis text-primary-color mr-0 ptr-no" for="ptr-no">
PTR
No.</label>
<div class="border-bottom text-left font-style"> <span class="bottomlined_value"></span></div>
<!-- <v-text-field class="cross" variant="underlined" id="ptr-no"></v-text-field> -->
</v-col>
</v-row>
<v-row class="p-0 py-0 m-0 pt-0">
<v-col cols="6" offset="6" class="cross w-50 pt-0 d-flex align-items-center mb-1">
<label class="v-label text-high-emphasis text-primary-color mr-0 sr-no" for="sr-no">S2 No.
:</label>
<div class="border-bottom text-left font-style"><span class="bottomlined_value"></span> </div>
<!-- <v-text-field class="cross" variant="underlined" id="sr-no"></v-text-field> -->
</v-col>
</v-row>
</div>
<!-- </VCard> -->
</template>
<style>
.physician-sign {
width: 162px;
}
.sr-no {
width: 60px;
}
.ptr-no {
width: 67px;
}
.lic-no {
width: 56px;
}
.print_info {
position: relative;
top: 7px;
}
.border-bottom1 {
border-bottom: 1px solid black;
/* Adjust thickness and color as needed */
width: 100%;
/* font-weight: 800; */
/* Ensure the underline spans the entire width */
}
.data {
display: block;
position: relative;
height: 100%;
width: 100%;
}
.data::after {
content: "";
background: url('@images/pages/watermark.png') no-repeat;
opacity: 0.1;
top: 30%;
left: 30%;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
height: 50%;
width: 50%;
}
@media screen and (max-width:567px) {
.data::after {
content: "";
background: url('@images/pages/watermark.png') no-repeat;
opacity: 0.1;
top: 30%;
left: 20%;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
height: 50%;
width: 100%;
}
}
.font-style {
font-size: 12px;
}
h1::after {
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
height: 100%;
width: 100%;
}
@font-face {
font-family: 'ReceiptDemo';
src: url('@vendor/fonts/fontawesome/ReceiptDemo.ttf') format('truetype');
}
@font-face {
font-family: 'Shatomi-PKrrg';
src: url('@vendor/fonts/fontawesome/Shatomi-PKrrg.ttf') format('truetype');
}
@font-face {
font-family: 'doctor-signature';
src: url('@vendor/fonts/fontawesome/doctor-signature.ttf') format('truetype');
}
.bottomlined_value {
position: relative;
top: 5px;
left: 10px;
}
.cross {
padding-top: 0px;
padding-bottom: 0px
}
label.v-label.text-body-2.text-high-emphasis.text-primary {
position: relative;
top: 18px;
right: 5px;
}
.text-primary-color {
position: relative;
top: 5px;
/* right: 0px; */
/* left: 10px; */
color: #909fea !important;
font-family: 'ui-serif !important' !important;
/* font-size: 15px !important; */
}
.text-primary-sign {
position: relative;
top: 8px;
/* right: 0px; */
/* left: 10px; */
color: #909fea !important;
font-family: 'ui-serif !important' !important;
}
.text-prescriptin-color {
position: relative;
top: 7px;
/* right: 0px; */
/* left: 10px; */
color: #060606 !important;
font-family: 'ReceiptDemo' !important;
}
.border-bottom {
border-bottom: 1px solid #909fea !important;
width: 100%;
/* margin-left: 3px; */
/* margin-top: 5px; */
font-weight: 800;
color: #060606 !important;
font-family: 'Shatomi-PKrrg' !important;
/* font-size: 15px; */
}
.prescription {
/* border-bottom: 1px solid #7680AD !important; */
width: 100%;
margin-left: 10px;
margin-top: 5px;
font-weight: 800;
font-family: 'Shatomi-PKrrg' !important;
}
.field-laypout {
padding-top: 0px
}
.v-text-field--underlined .v-input__control::before {
border-bottom-width: 100px;
/* Adjust the thickness as needed */
}
</style>

58
resources/js/layouts/components/ProviderInfo.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<v-card class="bg-transparent" :class="isMobile ? '' : 'auth-card pa-4'" color="transparent" elevation="0">
<v-card-text class="text-center">
<v-avatar color="#e0f2f1" size="120" class="mb-4">
<span class="text-h5 text-green-darken-2">{{ getInitials() }}</span>
</v-avatar>
<h2 class="text-h5 font-weight-bold mb-2">Dr. {{ doctorName }}, <span>{{ doctorSpecialty }}</span></h2>
<!-- <p class="text-body-1 mb-4">{{ doctorSpecialty }}</p> -->
<p class="text-body-2 text-grey-darken-1">
Dr. {{ doctorName }} is a dedicated medical professional with
extensive experience in {{ doctorSpecialty.toLowerCase() }}. Known for his patient-
centered approach, he strives to provide personalized care and
ensure the best outcomes for his patients. Dr. {{ lastName }} stays at the
forefront of medical advancements to offer the highest quality
treatment.
</p>
</v-card-text>
</v-card>
</template>
<script setup>
import { ref, computed } from 'vue';
const doctorName = ref('Jonathan Hines');
const doctorSpecialty = ref('MD');
const lastName = computed(() => {
return doctorName.value.split(' ').pop();
});
const isMobile = ref(window.innerWidth <= 768);
const getInitials = () => {
return doctorName.value
.split(' ')
.map(name => name[0])
.join('');
};
const checkIfMobile = () => {
isMobile.value = window.innerWidth <= 768;
};
onMounted(() => {
checkIfMobile();
window.addEventListener('resize', checkIfMobile);
});
onUnmounted(() => {
window.removeEventListener('resize', checkIfMobile);
});
</script>
<style scoped>
.v-card {
background-color: #f5f5f5 !important;
}
</style>

2301
resources/js/layouts/components/QueueComponent.vue Normal file
View File

File diff suppressed because it is too large Load Diff

254
resources/js/layouts/components/UserProfile.vue Normal file
View File

@@ -0,0 +1,254 @@
<script setup>
import axios from '@axios';
import avatar1 from '@images/avatars/avatar-1.png';
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore()
const router = useRouter()
const route = useRoute()
const profileName = ref();
const profileImg = ref(null)
const role_id = ref();
const categories = ref([]);
const answerCategory = ref(0);
const categoryLength = ref();
const percentage = ref();
const currentUser = ref(localStorage.getItem('user_role'));
const access_token = localStorage.getItem('access_token');
const isConferncePageForPatient = computed(() => store.getters.getCurrentPage === '/queue');
const showHomeBtn = ref(false)
const isMobile = ref(window.innerWidth <= 768);
const checkMobile = () => {
isMobile.value = window.innerWidth <= 768;
};
onMounted(async () => {
console.log('store.getters.getPatient.url', store.getters.getPatient.url)
window.addEventListener('resize', checkMobile);
if (currentUser.value == 'patient') {
await store.dispatch('getPatientInfo')
await store.dispatch('getCategory')
categories.value = store.getters.getCategories.data;
categoryLength.value = categories.value.length;
console.log("categoriesLength", categories.value.length);
}
if (route.path === '/provider/patient-profile') {
showHomeBtn.value = true
}
router.beforeEach((to, from, next) => {
if (to.fullPath === '/provider/patient-profile') {
showHomeBtn.value = true
}
// console.log('Navigating from', from.fullPath, 'to', to.fullPath);
next(); // Don't forget to call next() to continue navigation
});
// console.log("currentUser", currentUser.value);
const access_token = localStorage.getItem('access_token');
if (currentUser.value == 'patient') {
// console.log("patient", currentUser.value);
role_id.value = localStorage.getItem('patient_id')
await axios.post('/api/get-patient-detail/' + role_id.value, {
headers: {
'Authorization': `Bearer ${access_token}`,
}
})
.then(response => {
// console.log('Response:', response.data);
if (response.data) {
let patientData = response.data.patient
profileName.value = patientData.first_name + ' ' + patientData.last_name
profileImg.value = patientData.profile_picture
// console.log("profileName", profileName.value);
} else {
isLoadingVisible.value = false;
}
})
.catch(error => {
console.error('Error:', error);
});
}
if (currentUser.value == 'agent') {
// console.log("Agent", currentUser.value);
await axios.post('/agent/api/agent-profile', {
headers: {
'Authorization': `Bearer ${access_token}`,
}
})
.then(response => {
// console.log('ResponseTest:', response.data);
if (response.data) {
let patientData = response.data.ai_switch;
profileName.value = patientData.name;
// console.log("profileName", profileName.value);
} else {
isLoadingVisible.value = false;
}
})
.catch(error => {
console.error('Error:', error);
});
}
});
const profilePercentage = computed(async () => {
if (currentUser.value == 'patient') {
await store.dispatch('getCategory')
categories.value = store.getters.getCategories.data;
categoryLength.value = categories.value.length;
console.log("categoriesLength", categories.value.length);
for (const cate of categories.value) {
if (cate.question_count > 0) {
answerCategory.value = answerCategory.value + 1;
}
}
percentage.value = Math.round((answerCategory.value / categoryLength.value) * 100);
}
console.log('--->percentage ', answerCategory.value, categories.value.length)
percentage.value = Math.round((answerCategory.value / categoryLength.value) * 100);
})
const logout = () => {
// const currentUser = localStorage.getItem('user_role');
localStorage.removeItem('isLogin');
localStorage.removeItem('patient_id');
localStorage.removeItem('user_role');
localStorage.removeItem('access_token');
localStorage.removeItem('userAbilities');
localStorage.removeItem('agent_id');
localStorage.removeItem('appiontment-id');
localStorage.removeItem('patient_appointment_id');
localStorage.removeItem('cominguser');
localStorage.removeItem('currentPage');
localStorage.removeItem('profileCompleted');
localStorage.removeItem('category_name');
localStorage.removeItem('selectedSidebarMenu');
localStorage.removeItem('plan_name');
localStorage.removeItem('plan_price');
localStorage.removeItem('email');
localStorage.removeItem('selected_time_slot');
localStorage.removeItem('patient_appointment_details');
localStorage.removeItem('cart_products');
localStorage.removeItem('cart_id');
localStorage.removeItem('exist');
if (currentUser.value == 'agent') {
router.push('/provider/login');
} else {
router.push('/login');
}
}
const skill = ref(20)
</script>
<template>
<RouterLink v-if="currentUser == 'agent' && showHomeBtn" class="text-black" to="/provider/dashboard"
style="float: left;position: absolute;" :style="isMobile ? 'left:20%' : ''">
<VIcon class="me-2" icon="mdi-home" size="22" color="grey" />
</RouterLink>
<VBadge dot location="bottom right" offset-x="3" offset-y="3" color="success" bordered>
<VAvatar class="cursor-pointer" color="grey-800" variant="tonal">
<VImg :src="store.getters.getPatient.url ? store.getters.getPatient.url : avatar1" />
<!-- SECTION Menu -->
<VMenu activator="parent" width="230" location="bottom end" offset="14px">
<VList>
<VListItem>
<template #prepend>
<VListItemAction start>
<VBadge dot location="bottom right" offset-x="3" offset-y="3" color="success">
<VAvatar color="grey-800" variant="tonal">
<VImg :src="profileImg ? profileImg : avatar1" />
</VAvatar>
</VBadge>
</VListItemAction>
</template>
<VListItemTitle class="font-weight-semibold"
style="color: rgb(var(--v-theme-yellow-theme-button));">
{{ profileName }}
</VListItemTitle>
<VListItemSubtitle v-if="currentUser == 'agent'">Agent</VListItemSubtitle>
<VListItemSubtitle v-else>Patient</VListItemSubtitle>
</VListItem>
<VDivider v-if="currentUser == 'patient'" class="my-2" />
<!-- 👉 Profile -->
<!-- <VListItem link v-if="currentUser == 'patient'">
<template #prepend>
<VIcon class="me-2" icon="bx-user" size="22" />
</template>
<VListItemTitle>
<RouterLink class="text-black" to="/category">
Profile
</RouterLink>
</VListItemTitle>
</VListItem> -->
<!-- 👉 Settings -->
<VListItem link v-if="currentUser == 'patient'">
<template #prepend>
<VIcon class="me-2" icon="bx-cog" size="22" />
</template>
<VListItemTitle>
<RouterLink class="text-black" to="/account-settings">
Settings
</RouterLink>
</VListItemTitle>
</VListItem>
<!-- 👉 Pricing -->
<!-- 👉 FAQ -->
<!-- Divider -->
<VDivider class="my-2" />
<!-- 👉 Logout -->
<VListItem @click="logout">
<template #prepend>
<VIcon class="me-2" icon="bx-log-out" size="22" />
</template>
<VListItemTitle class="text-black">Logout</VListItemTitle>
</VListItem>
</VList>
</VMenu>
<!-- !SECTION -->
</VAvatar>
</VBadge>
<div v-if="profilePercentage"></div>
<p class="ml-3 mt-3" style="color: #000;" v-if="!isConferncePageForPatient">{{
profileName }}
<!-- <router-link to="/category" v-if="currentUser == 'patient'">
<div class="progress-label text-center"
style="color: rgb(var(--v-theme-yellow-theme-button)); font-size: 10px;"
v-if="!isConferncePageForPatient">Complete your profile {{ percentage }}%</div>
<VProgressLinear :model-value="percentage" width="600" height="2" style="width:125px"
class="gradient-progress" :rounded="true" v-if="!isConferncePageForPatient" />
</router-link> -->
</p>
</template>
<style lang="scss">
.gradient-progress .v-progress-linear__determinate {
background: linear-gradient(to right, #f11d1d, #06f78a);
/* Adjust colors as needed */
}
</style>

662
resources/js/layouts/components/agentCallDefaultLayout.vue Normal file
View File

@@ -0,0 +1,662 @@
<script setup>
import upgradeBannerDark from '@images/pro/upgrade-banner-dark.png';
import upgradeBannerLight from '@images/pro/upgrade-banner-light.png';
import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue';
import VerticalNavLink from '@layouts/components/VerticalNavLink.vue';
import { useRoute, useRouter } from 'vue-router';
import { useTheme } from 'vuetify';
import { useStore } from 'vuex';
const isConferncePage = computed(() => store.getters.getCurrentPage === '/provider/telehealth');
const isConferncePageForPatient = computed(() => store.getters.getCurrentPage === '/queue');
const router = useRouter()
const route = useRoute()
const store = useStore()
const queueUsers = ref([]);
const usertime = ref(null);
const isMuted = ref(false);
const isMicrophoneAllowed = ref(null);
const profileName = ref();
const isCameraAllowed = ref(false);
const toggelUserValue = ref(null)
const isMobile = ref(window.innerWidth <= 768);
const isLoadingVisible = ref(false);
const emailPatient = ref('')
const agePatient = ref('')
const genderPatient = ref('')
const namePatient = ref('')
// Components
import Footer from '@/layouts/components/Footer.vue';
import QueueComponent from '@/layouts/components/QueueComponent.vue';
import UserProfile from '@/layouts/components/UserProfile.vue';
import NotesPatientCall from '@/pages/NotesPatient.vue';
import PatientProfileCall from '@/pages/PatientProfile.vue';
import PrescriptionPatientCall from '@/pages/PrescriptionPatient.vue';
import LabKitOrderCall from '@/pages/patient-lab-kit-order.vue';
import { computed } from 'vue';
const vuetifyTheme = useTheme()
const userRole = localStorage.getItem('user_role'); // Fetch user role from local storage
const isPatient = computed(() => userRole.toLowerCase() === 'patient');
const isAgent = computed(() => userRole.toLowerCase() === 'agent');
//const currentRout = computed(() => localStorage.getItem('getCurrentPage'));queue');
const dialogNote = ref(false);
const dialogLabKit = ref(false);
const dialogPrescription = ref(false);
const dialogProfile = ref(false);
const upgradeBanner = computed(() => {
return vuetifyTheme.global.name.value === 'light' ? upgradeBannerLight : upgradeBannerDark
})
const isCameraPermissionGranted = ref(false);
const isMicrophonePermissionGranted = ref(false);
const getIsTonalSnackbarVisible = ref(false);
const errorMessage = ref(null);
const checkMobile = () => {
isMobile.value = window.innerWidth <= 768;
};
const calculateAge = (dateOfBirth) => {
const today = new Date();
const birthDate = new Date(dateOfBirth);
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (
monthDiff < 0 ||
(monthDiff === 0 && today.getDate() < birthDate.getDate())
) {
age--;
}
return age;
}
onMounted(async () => {
console.log("router", store.getters.getCurrentPage)
window.addEventListener('resize', checkMobile);
await store.dispatch('getPatientInfoByID')
namePatient.value = store.getters.getPatient.first_name + ' ' + store.getters.getPatient.last_name;
emailPatient.value = store.getters.getPatient.email
agePatient.value = calculateAge(store.getters.getPatient.dob) + ""
genderPatient.value = store.getters.getPatient.gender
// console.log("genderPatient.value", store.getters.getPatient);
});
const genderAbbreviation = computed(() => {
if (store.getters.getPatient.gender) {
const gender = store.getters.getPatient.gender.toLowerCase();
if (gender === 'male') {
return 'M';
} else if (gender === 'female') {
return 'F';
}
return '';
}
return '';
});
const openNotesModel = ref(false)
const patientNotes = ref(null)
const openNotes = async () => {
await store.dispatch('getAgentPatientNotes')
patientNotes.value = store.getters.getPatientNotes
openNotesModel.value = true
};
const openProfile = () => {
// Resolve the path to the desired route
const routeData = router.resolve({ path: '/provider/patient-profile' });
console.log('store.getters.getCurrentPage', store.getters.getCurrentPage)
console.log(route);
//dialogProfile.value = true
// Open the resolved route in a new tab
// if (route.path == '/provider/telehealth') {
// window.open(routeData.href, '_blank');
// } else {
router.push(routeData.href)
// }
};
const queueComp = ref(null);
const openCallModel = async (type) => {
console.log('here')
if (queueComp.value) {
console.log(queueComp.value)
let Calluser = localStorage.getItem('call_user')
// console.log('Calluser', Calluser)
queueComp.value.openDialog(JSON.parse(Calluser), type);
}
};
const openPatientPrescription = () => {
if (queueComp.value) {
console.log(queueComp.value)
let Calluser = localStorage.getItem('call_user')
// console.log('Calluser', Calluser)
console.log('store.getters.getCurrentPage', store.getters.getCurrentPage)
console.log(route);
//dialogPrescription.value = true
const routeData = router.resolve({ path: '/provider/prescriptions' });
// if (route.path == '/provider/telehealth') {
// window.open(routeData.href, '_blank');
// } else {
router.push(routeData.href)
// }
}
// Resolve the path to the desired route
// Open the resolved route in a new tab
};
const openPatientNotes = () => {
if (queueComp.value) {
console.log(queueComp.value)
let Calluser = localStorage.getItem('call_user')
// console.log('Calluser', Calluser)
console.log('store.getters.getCurrentPage', store.getters.getCurrentPage)
console.log(route);
//dialogNote.value = true
const routeData = router.resolve({ path: '/provider/notes' });
// if (route.path == '/provider/telehealth') {
// window.open(routeData.href, '_blank');
// } else {
router.push(routeData.href)
// }
}
// Resolve the path to the desired route
// Open the resolved route in a new tab
};
const openPatientLabKitOrder = () => {
if (queueComp.value) {
console.log(queueComp.value)
let Calluser = localStorage.getItem('call_user')
// console.log('Calluser', Calluser)
console.log('store.getters.getCurrentPage', store.getters.getCurrentPage)
console.log(route);
// dialogLabKit.value = true
const routeData = router.resolve({ path: '/provider/lab-kit-order' });
// if (route.path == '/provider/telehealth') {
// window.open(routeData.href, '_blank');
// } else {
router.push(routeData.href)
// }
}
// Resolve the path to the desired route
// Open the resolved route in a new tab
};
</script>
<template>
<VDialog v-model="openNotesModel" refs="myDialog" persistent width="500">
<!-- <template v-slot:default="{ isActive }"> -->
<v-card>
<v-card-text>
<div class="mt-2 mb-2">
<h4>Patient Notes.</h4>
</div>
<p v-for="note in patientNotes" :key="note.id"> {{ note.note }}</p>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text="Close" @click="openNotesModel = false"></v-btn>
</v-card-actions>
</v-card>
<!-- </template> -->
</VDialog>
<VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">
<VCardText class="" style="color: white !important;">
<div class="demo-space-x">
<VProgressCircular :size="40" color="primary" indeterminate />
</div>
</VCardText>
</VDialog>
<VSnackbar v-model="getIsTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat" color="red">
{{ errorMessage }}
</VSnackbar>
<VerticalNavLayout>
<!-- 👉 navbar -->
<template #navbar="{ toggleVerticalOverlayNavActive }">
<div class="d-flex h-100 align-center">
<!-- 👉 Vertical nav toggle in overlay mode -->
<IconBtn class="ms-n3 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
<VIcon icon="bx-menu" />
</IconBtn>
<!-- 👉 Search -->
<div class="d-flex align-center cursor-pointer" style="user-select: none;">
</div>
<VSpacer />
<UserProfile />
</div>
</template>
<template #vertical-nav-content>
<v-row class='mx-2'>
<v-list class="custom-class" style="background-color: rgb(var(--v-theme-yellow)) ;">
<v-list-item>
<!-- <template v-slot:prepend>
<v-icon icon="mdi-account" size="20"></v-icon>
</template> -->
<v-list-item-title>
<h4>{{ namePatient }}, {{ agePatient }}, {{ genderAbbreviation }}</h4>
</v-list-item-title>
</v-list-item>
<!-- <v-list-item class="mb-0">
<template v-slot:prepend>
<v-icon icon="mdi-email" size="20"></v-icon>
</template>
<v-list-item-title>{{ emailPatient }}</v-list-item-title>
</v-list-item> -->
<!-- <v-list-item>
<template v-slot:prepend>
<v-icon icon="mdi-calendar-account" size="20"></v-icon>
</template>
<v-list-item-title>{{ agePatient }}</v-list-item-title>
</v-list-item> -->
<!-- <v-list-item>
<template v-slot:prepend>
<v-icon icon="mdi-gender-male-female" size="20"></v-icon>
</template>
<v-list-item-title>{{ genderPatient }}</v-list-item-title>
</v-list-item> -->
</v-list>
</v-row>
<QueueComponent v-if="!isMobile" ref="queueComp" :isVisable="true" />
<VerticalNavLink v-if="isAgent" @click=openProfile() :item="{
title: 'Profile',
icon: 'bx-user',
}" />
<VerticalNavLink v-if="isAgent" @click=openPatientNotes() :item="{
title: 'Notes',
icon: 'mdi-clipboard',
}" />
<VerticalNavLink v-if="isAgent" @click="openPatientLabKitOrder()" :item="{
title: 'Lab Order',
icon: 'mdi-flask',
}" />
<VerticalNavLink v-if="isAgent" @click="openPatientPrescription()" :item="{
title: 'Prescriptions',
icon: 'mdi-clipboard-text',
}" />
<v-dialog v-model="dialogNote" max-width="800">
<v-card class="pa-3">
<v-row>
<v-col cols="12" class="text-right cross">
<v-btn icon color="transparent" small @click="dialogNote = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="12">
<NotesPatientCall></NotesPatientCall>
</v-col>
</v-row>
</v-card>
</v-dialog>
<!-- lab kit model ==== -->
<v-dialog v-model="dialogLabKit" max-width="1200">
<v-card class="pa-3">
<v-row>
<v-col cols="12" class="text-right cross">
<v-btn icon color="transparent" small @click="dialogLabKit = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="12">
<LabKitOrderCall></LabKitOrderCall>
</v-col>
</v-row>
</v-card>
</v-dialog>
<!-- Prescription model model ==== -->
<v-dialog v-model="dialogPrescription" max-width="1200">
<v-card class="pa-3">
<v-row>
<v-col cols="12" class="text-right cross">
<v-btn icon color="transparent" small @click="dialogPrescription = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="12">
<PrescriptionPatientCall></PrescriptionPatientCall>
</v-col>
</v-row>
</v-card>
</v-dialog>
<!-- Profile model model ==== -->
<v-dialog v-model="dialogProfile" max-width="1200">
<v-card class="pa-3">
<v-row>
<v-col cols="12" class="text-right cross">
<v-btn icon color="transparent" small @click="dialogProfile = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="12">
<PatientProfileCall></PatientProfileCall>
</v-col>
</v-row>
</v-card>
</v-dialog>
<!-- <VerticalNavLink v-if="isAgent" @click="openCallModel('Request For Documents')" :item="{
title: 'Request For Documents',
icon: 'mdi-file-document-multiple',
}" /> -->
<VerticalNavLink @click=logout() v-if="isPatient" :item="{
title: 'Logout',
icon: 'bx-log-out',
}" />
<QueueComponent v-if="isMobile" ref="queueComp" :isVisable="true" />
</template>
<!-- 👉 Pages -->
<slot />
<!-- 👉 Footer -->
<template #footer>
<Footer />
</template>
</VerticalNavLayout>
</template>
<style lang="scss" scoped>
.meta-key {
border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
border-radius: 6px;
block-size: 1.5625rem;
line-height: 1.3125rem;
padding-block: 0.125rem;
padding-inline: 0.25rem;
}
::v-deep .custom-menu {
position: relative;
}
::v-deep .custom-menu::before {
content: "" !important;
position: absolute !important;
transform: translateY(-50%);
top: 50% !important;
left: -8px !important;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-bottom: 8px solid #fff !important;
}
.custom-class .v-list-item {
min-height: 21px;
color: #fff !important;
}
.custom-class .v-list-item h4 {
color: #fff !important;
}
.custom-class {
margin-bottom: 12px;
background-color: rgb(var(--v-theme-yellow)) !important;
color: #fff !important;
}
// Styles for the VList component
.more .v-list-item-title {
color: rgb(106 109 255);
}
.more .menu-item:hover {
cursor: pointer;
}
.slide-enter-active,
.slide-leave-active {
transition: transform 0.3s ease;
}
.slide-enter,
.slide-leave-to {
transform: translateX(-100%);
}
.start-call-btn {
opacity: 0;
display: none;
transition: opacity 0.3s ease;
}
.button_margin {
margin: 2px;
}
.dialog_padding {
padding: 5px;
}
.custom-menu .v-menu__content {
background-color: #333;
color: #fff;
border-radius: 4px;
padding: 8px 0;
}
.user-info {
display: flex;
flex-direction: column;
transition: opacity 0.3s ease;
}
.list-item-hover {
transition: background-color 0.3s ease;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.1);
.start-call-btn {
opacity: 1;
display: block;
position: relative;
left: -35px;
}
.user-info {
opacity: 0;
display: none;
}
}
}
.pop_card {
overflow: hidden !important;
padding: 10px;
}
.v-overlay__content {
max-height: 706.4px;
max-width: 941.6px;
min-width: 24px;
--v-overlay-anchor-origin: bottom left;
transform-origin: left top;
top: 154.4px !important;
left: 204px !important;
}
.button_margin {
margin-top: 10px;
font-size: 10px;
}
/* Responsive Styles */
@media screen and (max-width: 768px) {
.pop_card {
max-width: 100%;
margin: 0 auto;
}
}
.container_img {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}
.image {
order: 2;
/* Change the order to 2 in mobile view */
}
.text {
order: 1;
/* Change the order to 1 in mobile view */
}
/* Media query for mobile view */
@media (max-width: 768px) {
.container_img {
flex-direction: row;
margin-top: 10px;
}
.button_margin_mobile {
width: 100%;
}
.image {
width: 20%;
padding: 0 10px;
}
.text {
width: 80%;
/* Each takes 50% width */
padding: 0 10px;
/* Optional padding */
}
}
::-webkit-scrollbar {
width: 10px;
/* Width of the scrollbar */
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
/* Color of the track */
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
/* Color of the handle */
border-radius: 5px;
/* Roundness of the handle */
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
/* Color of the handle on hover */
}
/* Container for the content */
.scroll-container {
max-height: 191px;
/* Maximum height of the scrollable content */
overflow-y: scroll;
/* Enable vertical scrolling */
}
/* Content within the scroll container */
.scroll-content {
padding: 20px;
}
/* Example of additional styling for content */
.scroll-content p {
margin-bottom: 20px;
}
.cross button {
padding: 0px;
margin: 0px;
/* font-size: 10px; */
background: none;
border: none;
box-shadow: none;
height: 23px;
}
.v-data-table-header {
display: table-header-group;
}
</style>

120
resources/js/layouts/components/cart.vue Normal file
View File

@@ -0,0 +1,120 @@
<script setup>
import { onBeforeMount, onMounted, ref } from 'vue';
const products = JSON.parse(localStorage.getItem('cart_products'));
const labKits = JSON.parse(localStorage.getItem('labkits'));
const totalShipping = ref(0)
const totalAmount = ref(0)
const grandTotal = ref(0)
const prescreptionRequired = ref(false)
const isMobile = ref(window.innerWidth <= 768);
const checkIfMobile = () => {
isMobile.value = window.innerWidth <= 768;
};
onBeforeMount(async () => {
// products.push({
// title: 'Doctor Visit',
// subscription: false,
// onetime: false,
// product_id: 1,
// qty: 1,
// price: labKits[0].amount,
// is_prescription_required: 0,
// shipping_cost: 0
// })
products.forEach(product => {
var price = 0
if (product.is_prescription_required == 1) {
prescreptionRequired.value = true
// if (labKits[0].amount)
// price = 0
price = product.price
product.title = product.title
product.price = productTotalPreReq(product.qty, product.price)
console.log('Prescreption Req Price', price)
} else {
prescreptionRequired.value = false
price = parseFloat(product.price);
product.price = productTotal(product)
console.log('Not Req Price', price)
}
const shippingPrice = parseFloat(product.shipping_cost);
totalShipping.value += product.qty * shippingPrice;
totalAmount.value += product.qty * price;
});
})
onMounted(async () => {
let options = { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 };
// grandTotal.value = new Intl.NumberFormat('en-US', options).format(parseFloat(totalAmount.value) + parseFloat(totalShipping.value));
grandTotal.value = new Intl.NumberFormat('en-US', options).format(parseFloat(labKits[0].amount));
totalAmount.value = new Intl.NumberFormat('en-US', options).format(totalAmount.value);
totalShipping.value = new Intl.NumberFormat('en-US', options).format(totalShipping.value);
window.addEventListener('resize', checkIfMobile);
});
const productTotalPreReq = (qty, price) => {
let options = { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 };
return new Intl.NumberFormat('en-US', options).format(qty * parseFloat(price));
};
const productTotal = (product) => {
let options = { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 };
return new Intl.NumberFormat('en-US', options).format(product.qty * parseFloat(product.price));
};
</script>
<template>
<VCard class="bg-transparent" :class="isMobile ? '' : 'auth-card pa-2 card-margin'" style="min-width: 90%;border: none;box-shadow: none;" color="">
<v-card-text style="padding-left: 30px;">
<h4 style="font-weight: 700;font-size: 20px;font-family: system-ui;color: black;">Order Details</h4>
<v-list class="bg-transparent text-yellow-theme-button">
<v-list-item-group>
<v-list-item v-for="product in products" :key="product.id" style="padding-left: 0px;">
<v-list-item-content>
<v-list-item-title style="font-size: 18px!important;font-family: sans-serif;">
{{ product.title }}
<span class="float-right ml-2">{{ product.price }}</span>
</v-list-item-title>
<!-- <v-list-item-subtitle class="text-yellow-theme-button">Qty: {{ product.qty
}}</v-list-item-subtitle> -->
</v-list-item-content>
</v-list-item>
<v-list-item style="padding-top: 10px;padding-bottom: 10px;padding-left: 0px;">
<v-list-item-content>
<v-list-item-title style="font-size: 18px!important;font-family: sans-serif;">
<span style="padding-top: 10px;padding-bottom: 10px;"><b>Total</b></span>
<span class="float-right ml-2" style="border-top: 1px solid silver;border-bottom: 1px solid silver;padding-top: 10px;padding-bottom: 10px;padding-left: 50px;">&nbsp;<b>{{ grandTotal }}</b></span>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card-text>
<!-- <v-divider></v-divider> -->
<v-card-text>
<v-row justify="end">
<v-col cols="auto">
<h4 class="text-yellow-theme-button total-font" style="display: none;"><span class="mr-2">Sub Total:</span> <span
class="float-right">{{
totalAmount }}</span>
</h4>
<h4 class="text-yellow-theme-button total-font" style="display: none;"><span class="mr-2">Shipping:</span> <span
class="float-right">{{
totalShipping
}}</span></h4>
<h4 class="text-yellow-theme-button total-font" style="display: none;"><span class="mr-2">Order Total:</span> <span
class="float-right">{{
grandTotal
}}</span></h4>
</v-col>
</v-row>
</v-card-text>
<v-card-text class="mt-4" style="color: black;font-family: system-ui;">
<b>Note: At this time, you will only be charged for the doctor visit. After the consultation, once we receive the prescription, your order will be automatically processed, and your card will be charged for the cost of the medication.</b>
</v-card-text>
</VCard>
</template>

23
resources/js/layouts/components/navbar-custom.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup>
const props = defineProps({
logo: {
type: String,
required: true,
},
})
</script>
<template>
<v-app-bar color="white" prominent>
<!-- Logo with a link -->
<a href="https://peptidewebmd.com" target="_blank" style="margin-left: 10px;width: 100%;">
<VImg :src='logo' max-width="250" height="50" />
</a>
<v-spacer></v-spacer>
<!-- Links on the right -->
<v-btn text color="black" href="#">Live Chat</v-btn>
<v-btn text color="black" href="https://peptidewebmd.com/contact-us/" target="_blank">Contact Us</v-btn>
</v-app-bar>
</template>

14
resources/js/layouts/default.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup>
import DefaultLayoutWithVerticalNav from './components/DefaultLayoutWithVerticalNav.vue';
</script>
<template>
<DefaultLayoutWithVerticalNav>
<RouterView />
</DefaultLayoutWithVerticalNav>
</template>
<style lang="scss">
// As we are using `layouts` plugin we need its styles to be imported
@use "@layouts/styles/default-layout";
</style>