312 lines
12 KiB
Vue
312 lines
12 KiB
Vue
<script setup>
|
|
import illustrationJohnDark from '@images/cards/illustration-john-dark.png';
|
|
import illustrationJohnLight from '@images/cards/illustration-john-light.png';
|
|
import { useTheme } from 'vuetify';
|
|
// const panelActive = ref(true);
|
|
const panel = ref(0)
|
|
onMounted(() => {
|
|
// panelActive.value = true;
|
|
});
|
|
const props = defineProps({
|
|
date: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
time: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
timezone: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
const orders = ref([
|
|
{
|
|
icon: 'tabler-circle-check',
|
|
type: 'SENDER',
|
|
name: 'Myrtle Ullrich',
|
|
address: '101 Boulder, California(CA), 95959',
|
|
},
|
|
{
|
|
icon: 'tabler-map-pin',
|
|
type: 'RECEIVER',
|
|
name: 'Barry Schowalter',
|
|
address: '939 Orange, California(CA),92118',
|
|
},
|
|
]);
|
|
const { global } = useTheme()
|
|
const illustrationJohn = computed(() => global.name.value === 'dark' ? illustrationJohnDark : illustrationJohnLight)
|
|
</script>
|
|
|
|
<template>
|
|
<VCard class="text-center text-sm-start">
|
|
<VRow no-gutters>
|
|
<VCol>
|
|
|
|
<VExpansionPanels v-model="panel">
|
|
<VExpansionPanel>
|
|
<VExpansionPanelTitle variant="tonal" color="secondary">
|
|
<span><b>TRT Lab Kit with a Virtual Provider Consultation.</b> <br><br>
|
|
<p>{{ date }} Status: InProcess <br>
|
|
</p>
|
|
<p>Test Kit Tracking : <Routerview to="/"> To you</Routerview> / <Routerview to="/trt"> back to Lab
|
|
</Routerview>
|
|
</p>
|
|
</span>
|
|
</VExpansionPanelTitle>
|
|
<VExpansionPanelText>
|
|
<VCardText>
|
|
<VTimeline side="end" align="start" line-inset="8" truncate-line="both" density="compact">
|
|
<!-- SECTION Timeline Item: Flight -->
|
|
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
|
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center gap-2 flex-wrap">
|
|
<span class="app-timeline-title">
|
|
<b>Medical History Form Completed</b><br><br>
|
|
</span>
|
|
</div>
|
|
</VTimelineItem>
|
|
|
|
<!-- !SECTION -->
|
|
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div class="app-timeline-title">
|
|
<b>Online Consultation Scheduled</b><br><br>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
|
|
<!-- SECTION Timeline Item: Interview Schedule -->
|
|
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
|
<template #icon>
|
|
3
|
|
</template>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div class="app-timeline-title">
|
|
<b>eClinic Schedule is Confirmed for {{ date }}</b>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-space-between align-center flex-wrap">
|
|
<!-- 👉 Avatar & Personal Info -->
|
|
<div class="d-flex align-center mt-2">
|
|
<div class="d-flex flex-column">
|
|
<p class="text-sm font-weight-medium text-high-emphasis mb-0">
|
|
Your virtual consultation with your HGH provider is set for {{ props.date }}, at {{
|
|
props.time
|
|
}}
|
|
, {{ props.timezone }}. On the appointment day, we will send you an email containing the
|
|
link
|
|
to join, along
|
|
with useful tips for preparation. If you have any inquiries or need to reschedule, feel free
|
|
to reach out via text at (223) 124-5533.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
<VBtn class="mt-3" color="rgb(var(--v-theme-yellow))">Go to Meeting</VBtn>
|
|
<!-- 👉 Person Actions -->
|
|
</div>
|
|
|
|
|
|
</VTimelineItem>
|
|
|
|
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
|
<template #icon>
|
|
4
|
|
</template>
|
|
<!-- <template #icon>
|
|
<VIcon size="20" icon="tabler-circle-check" color="error" />
|
|
</template> -->
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div>
|
|
<b>eClicnic Attented</b><br><br>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
|
<template #icon>
|
|
5
|
|
</template>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div>
|
|
<b>Medication Ordered</b>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
|
<template #icon>
|
|
6
|
|
</template>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div>
|
|
<b>Medication Shipped</b>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
|
<template #icon>
|
|
7
|
|
</template>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div>
|
|
<b>Medication Delivered</b>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
<!-- !SECTION -->
|
|
</VTimeline>
|
|
</VCardText>
|
|
</VExpansionPanelText>
|
|
</VExpansionPanel>
|
|
|
|
</VExpansionPanels>
|
|
<VCardTitle class="text-start">Latest Labs <RouterLink to="/">
|
|
<span>(See all)</span>
|
|
</RouterLink>
|
|
</VCardTitle>
|
|
<VExpansionPanels class="mt-2">
|
|
<VExpansionPanel>
|
|
<VExpansionPanelTitle variant="tonal" color="secondary">
|
|
<span><b>TRT Lab Kit </b> <br><br>
|
|
<p>{{ date }} Status: Ordered <br>
|
|
</p>
|
|
<p>Test Kit Tracking : <Routerview to="/"> To you</Routerview> / <Routerview to="/trt"> back to Lab
|
|
</Routerview>
|
|
</p>
|
|
</span>
|
|
</VExpansionPanelTitle>
|
|
<VExpansionPanelText>
|
|
<h2 class="text-start">Results</h2>
|
|
<VCardText>
|
|
|
|
<VTimeline side="end" align="start" line-inset="8" truncate-line="both" density="compact">
|
|
<!-- SECTION Timeline Item: Flight -->
|
|
|
|
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
|
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center gap-2 flex-wrap">
|
|
|
|
<span class="app-timeline-title">
|
|
<b>Ordered Hormone Test Kit</b><br><br>
|
|
</span>
|
|
</div>
|
|
</VTimelineItem>
|
|
|
|
<!-- !SECTION -->
|
|
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div class="app-timeline-title">
|
|
<b>Shipped Hormone Test Kit</b><br><br>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
|
|
<!-- SECTION Timeline Item: Interview Schedule -->
|
|
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" icon="tabler-check" size="small">
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div class="app-timeline-title">
|
|
<b>Delivered Hormone Test Kit</b><br><br>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
|
|
<VTimelineItem dot-color="rgb(var(--v-theme-yellow))" color="rgb(var(--v-theme-yellow))"
|
|
icon="tabler-check" size="small">
|
|
<template #icon>
|
|
4
|
|
</template>
|
|
<!-- <template #icon>
|
|
<VIcon size="20" icon="tabler-circle-check" color="error" />
|
|
</template> -->
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1 ">
|
|
<div>
|
|
<b>Hormone Test Kit in Transit</b><br><br>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
|
<template #icon>
|
|
5
|
|
</template>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div>
|
|
<b>Lab Received Hormone Test Kit</b>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
<VTimelineItem dot-color="secondary" color="secondary" icon="tabler-check" size="small">
|
|
<template #icon>
|
|
6
|
|
</template>
|
|
<!-- 👉 Header -->
|
|
<div class="d-flex justify-space-between align-center flex-wrap mb-1">
|
|
<div>
|
|
<b>Provider Reviewed Test Results</b>
|
|
</div>
|
|
</div>
|
|
</VTimelineItem>
|
|
<!-- !SECTION -->
|
|
</VTimeline>
|
|
</VCardText>
|
|
</VExpansionPanelText>
|
|
</VExpansionPanel>
|
|
|
|
</VExpansionPanels>
|
|
|
|
|
|
|
|
|
|
</VCol>
|
|
</VRow>
|
|
</VCard>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.john-illustration {
|
|
inset-block-end: -0.0625rem;
|
|
inset-inline-end: 3rem;
|
|
}
|
|
|
|
.v-timeline .v-timeline-divider__inner-dot {
|
|
background-color: white !important;
|
|
}
|
|
|
|
button.v-expansion-panel-title {
|
|
background-color: rgb(var(--v-theme-yellow)) !important;
|
|
color: #fff;
|
|
}
|
|
|
|
button.v-expansion-panel-title.bg-secondary {
|
|
background-color: rgb(var(--v-theme-yellow)) !important;
|
|
color: #fff;
|
|
}
|
|
|
|
button.v-expansion-panel-title {
|
|
background-color: rgb(var(--v-theme-yellow)) !important;
|
|
color: #fff;
|
|
}
|
|
|
|
button.v-expansion-panel-title.v-expansion-panel-title--active {
|
|
background-color: rgb(var(--v-theme-yellow)) !important;
|
|
color: #fff;
|
|
}
|
|
|
|
span.v-expansion-panel-title__icon {
|
|
color: #fff
|
|
}
|
|
</style>
|