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

fixed

Browse Source
This commit is contained in:
nasir@endelospay.com 2024-05-31 20:11:35 +05:00
parent 7e0031ba81
commit 88c2df5145
17 changed files with 1808 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.eslintrc-auto-import.json
View File

@ -352,6 +352,11 @@
"watchThrottled": true,
"watchTriggerable": true,
"watchWithFilter": true,
"whenever": true
"whenever": true,
"validUSAPhone": true,
"requiredPhone": true,
"requiredFirstName": true,
"requiredLastName": true,
"requiredEmail": true
}
}

15
auto-imports.d.ts vendored
View File

@ -121,6 +121,10 @@ declare global {
const refWithControl: typeof import('@vueuse/core')['refWithControl']
const regexValidator: typeof import('./resources/js/@core/utils/validators.js')['regexValidator']
const registerPlugins: typeof import('./resources/js/@core/utils/plugins.js')['registerPlugins']
const requiredEmail: typeof import('./resources/js/@core/utils/validators.js')['requiredEmail']
const requiredFirstName: typeof import('./resources/js/@core/utils/validators.js')['requiredFirstName']
const requiredLastName: typeof import('./resources/js/@core/utils/validators.js')['requiredLastName']
const requiredPhone: typeof import('./resources/js/@core/utils/validators.js')['requiredPhone']
const requiredValidator: typeof import('./resources/js/@core/utils/validators.js')['requiredValidator']
const resolveComponent: typeof import('vue')['resolveComponent']
const resolveRef: typeof import('@vueuse/core')['resolveRef']
@ -331,6 +335,7 @@ declare global {
const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
const validUSAPhone: typeof import('./resources/js/@core/utils/validators.js')['validUSAPhone']
const watch: typeof import('vue')['watch']
const watchArray: typeof import('@vueuse/core')['watchArray']
const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
@ -475,6 +480,10 @@ declare module 'vue' {
readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
readonly regexValidator: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['regexValidator']>
readonly registerPlugins: UnwrapRef<typeof import('./resources/js/@core/utils/plugins.js')['registerPlugins']>
readonly requiredEmail: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['requiredEmail']>
readonly requiredFirstName: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['requiredFirstName']>
readonly requiredLastName: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['requiredLastName']>
readonly requiredPhone: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['requiredPhone']>
readonly requiredValidator: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['requiredValidator']>
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
@ -685,6 +694,7 @@ declare module 'vue' {
readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
readonly validUSAPhone: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['validUSAPhone']>
readonly watch: UnwrapRef<typeof import('vue')['watch']>
readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
@ -822,6 +832,10 @@ declare module '@vue/runtime-core' {
readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
readonly regexValidator: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['regexValidator']>
readonly registerPlugins: UnwrapRef<typeof import('./resources/js/@core/utils/plugins.js')['registerPlugins']>
readonly requiredEmail: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['requiredEmail']>
readonly requiredFirstName: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['requiredFirstName']>
readonly requiredLastName: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['requiredLastName']>
readonly requiredPhone: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['requiredPhone']>
readonly requiredValidator: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['requiredValidator']>
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
@ -1032,6 +1046,7 @@ declare module '@vue/runtime-core' {
readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
readonly validUSAPhone: UnwrapRef<typeof import('./resources/js/@core/utils/validators.js')['validUSAPhone']>
readonly watch: UnwrapRef<typeof import('vue')['watch']>
readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>

31
resources/js/@core/utils/validators.js
View File

@ -93,3 +93,34 @@ export const alphaDashValidator = value => {
return /^[0-9A-Z_-]*$/i.test(valueAsString) || 'All Character are not valid'
}
export const validUSAPhone = value => {
if (isEmpty(value))
return true
const valueAsString = String(value)
return /^\(\d{3}\)\s\d{3}-\d{4}$/i.test(valueAsString) || 'Phone are not valid'
}
export const requiredPhone = value => {
if (isNullOrUndefined(value) || isEmptyArray(value) || value === false)
return 'Phone is required'
return !!String(value).trim().length || ' Phone is required'
}
export const requiredFirstName = value => {
if (isNullOrUndefined(value) || isEmptyArray(value) || value === false)
return 'First Name field is required'
return !!String(value).trim().length || 'Name is required'
}
export const requiredLastName = value => {
if (isNullOrUndefined(value) || isEmptyArray(value) || value === false)
return 'Last Name field is required'
return !!String(value).trim().length || ' Last Name is required'
}
export const requiredEmail = value => {
if (isNullOrUndefined(value) || isEmptyArray(value) || value === false)
return 'Email field is required'
return !!String(value).trim().length || 'Email is required'
}

18
resources/js/App.vue
View File

@ -1,13 +1,14 @@
<script setup>
import { useTheme } from 'vuetify'
import ScrollToTop from '@core/components/ScrollToTop.vue'
import initCore from '@core/initCore'
import {
initConfigStore,
useConfigStore,
initConfigStore,
useConfigStore,
} from '@core/stores/config'
import { hexToRgb } from '@layouts/utils'
import { useTheme } from 'vuetify'
import { useStore } from 'vuex'
const store = useStore()
const { global } = useTheme()
// ℹ️ Sync current theme with initial loader theme
@ -18,6 +19,15 @@ const configStore = useConfigStore()
</script>
<template>
<VOverlay
v-model="store.getters.getIsLoading"
contained
persistent
scroll-strategy="none"
class="align-center justify-center"
>
<VProgressCircular indeterminate />
</VOverlay>
<VLocaleProvider :rtl="configStore.isAppRTL">
<!-- ℹ️ This is required to set the background color of active nav link based on currently active global theme's primary -->
<VApp :style="`--v-global-theme-primary: ${hexToRgb(global.current.value.colors.primary)}`">

3
resources/js/constants.js
View File

@ -1,3 +1,4 @@
export const GET_BASE_PATH = ""
let MAIN_DOMAIN = "http://127.0.0.1:8005";
let MAIN_DOMAIN = "http://127.0.0.1:8000";
export const ADMIN_LOGIN_API = MAIN_DOMAIN + "/api/admin/login"
export const PATIENT_LIST_API = MAIN_DOMAIN + "/api/admin/patient-list"

24
resources/js/layouts/components/DefaultLayoutWithVerticalNav.vue
View File

@ -1,18 +1,19 @@
<script setup>
import navItems from '@/navigation/vertical'
import { themeConfig } from '@themeConfig'
import navItems from '@/navigation/vertical';
import { themeConfig } from '@themeConfig';
import { useStore } from 'vuex';
const store = useStore()
// Components
import Footer from '@/layouts/components/Footer.vue'
import NavBarNotifications from '@/layouts/components/NavBarNotifications.vue'
import NavSearchBar from '@/layouts/components/NavSearchBar.vue'
import NavbarShortcuts from '@/layouts/components/NavbarShortcuts.vue'
import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
import UserProfile from '@/layouts/components/UserProfile.vue'
import NavBarI18n from '@core/components/I18n.vue'
import Footer from '@/layouts/components/Footer.vue';
import NavBarNotifications from '@/layouts/components/NavBarNotifications.vue';
import NavSearchBar from '@/layouts/components/NavSearchBar.vue';
import NavbarShortcuts from '@/layouts/components/NavbarShortcuts.vue';
import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue';
import UserProfile from '@/layouts/components/UserProfile.vue';
import NavBarI18n from '@core/components/I18n.vue';
// @layouts plugin
import { VerticalNavLayout } from '@layouts'
import { VerticalNavLayout } from '@layouts';
// SECTION: Loading Indicator
const isFallbackStateActive = ref(false)
@ -31,6 +32,7 @@ watch([
</script>
<template>
<VerticalNavLayout :nav-items="navItems">
<!-- 👉 navbar -->
<template #navbar="{ toggleVerticalOverlayNavActive }">

131
resources/js/navigation/vertical/dashboard.js
View File

@ -1,61 +1,84 @@
export default [
{
title: 'Dashboards',
title: 'Dashboard',
icon: { icon: 'ri-home-smile-line' },
children: [
{
title: 'CRM',
to: 'dashboards-crm',
},
{
title: 'Analytics',
to: 'dashboards-analytics',
},
{
title: 'eCommerce',
to: 'dashboards-ecommerce',
},
{
title: 'Academy',
to: 'dashboards-academy',
},
{
title: 'Logistics',
to: 'dashboards-logistics',
},
],
badgeContent: '5',
badgeClass: 'bg-error',
to: 'admin-dashboard',
// children: [
// {
// title: 'CRM',
// to: 'dashboards-crm',
// },
// {
// title: 'Analytics',
// to: 'dashboards-analytics',
// },
// {
// title: 'eCommerce',
// to: 'dashboards-ecommerce',
// },
// {
// title: 'Academy',
// to: 'dashboards-academy',
// },
// {
// title: 'Logistics',
// to: 'dashboards-logistics',
// },
// ],
// badgeContent: '5',
// badgeClass: 'bg-error',
},
{
title: 'Front Pages',
icon: { icon: 'ri-file-copy-line' },
children: [
{
title: 'Landing',
to: 'front-pages-landing-page',
target: '_blank',
},
{
title: 'Pricing',
to: 'front-pages-pricing',
target: '_blank',
},
{
title: 'Payment',
to: 'front-pages-payment',
target: '_blank',
},
{
title: 'Checkout',
to: 'front-pages-checkout',
target: '_blank',
},
{
title: 'Help Center',
to: 'front-pages-help-center',
target: '_blank',
},
],
title: 'Patients',
icon: { icon: 'ri-user-line' },
to: 'admin-patients',
},
{
title: 'Providers',
icon: { icon: 'ri-stethoscope-line' },
to: 'admin-providers',
},
{
title: 'Labs',
icon: { icon: 'ri-test-tube-line' },
to: 'admin-labs',
},
{
title: 'Medicines',
icon: { icon: 'ri-medicine-bottle-line' },
to: 'admin-medicines',
},
// {
// title: 'Front Pages',
// icon: { icon: 'ri-file-copy-line' },
// children: [
// {
// title: 'Landing',
// to: 'front-pages-landing-page',
// target: '_blank',
// },
// {
// title: 'Pricing',
// to: 'front-pages-pricing',
// target: '_blank',
// },
// {
// title: 'Payment',
// to: 'front-pages-payment',
// target: '_blank',
// },
// {
// title: 'Checkout',
// to: 'front-pages-checkout',
// target: '_blank',
// },
// {
// title: 'Help Center',
// to: 'front-pages-help-center',
// target: '_blank',
// },
// ],
// },
]

12
resources/js/navigation/vertical/index.js
View File

@ -1,8 +1,8 @@
import appsAndPages from './apps-and-pages'
import charts from './charts'
// import appsAndPages from './apps-and-pages'
// import charts from './charts'
import dashboard from './dashboard'
import forms from './forms'
import others from './others'
import uiElements from './ui-elements'
// import forms from './forms'
// import others from './others'
// import uiElements from './ui-elements'
export default [...dashboard, ...appsAndPages, ...uiElements, ...forms, ...charts, ...others]
export default [...dashboard]

10
resources/js/pages/dashboards/crm.vue
View File

@ -11,7 +11,8 @@ import CrmUpgradeYourPlan from '@/views/dashboards/crm/CrmUpgradeYourPlan.vue'
import CrmWeeklySales from '@/views/dashboards/crm/CrmWeeklySales.vue'
import illustration1 from '@images/cards/illustration-1.png'
import illustration2 from '@images/cards/illustration-2.png'
import { useStore } from 'vuex'
const store = useStore()
const cardStatisticsWithImages = [
{
title: 'Ratings',
@ -39,6 +40,13 @@ const statistic = {
change: -18,
subtitle: 'Yearly Project',
}
onMounted(() => {
store.dispatch('updateIsLoading', false)
})
</script>
<template>

395
resources/js/pages/labs/labs.vue Normal file
View File

@ -0,0 +1,395 @@
<script setup>
import data from '@/views/demos/forms/tables/data-table/datatable';
const editDialog = ref(false)
const deleteDialog = ref(false)
const search = ref('')
const defaultItem = ref({
responsiveId: '',
id: -1,
avatar: '',
fullName: '',
post: '',
email: '',
city: '',
startDate: '',
salary: -1,
age: '',
experience: '',
status: -1,
})
const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const userList = ref([])
const isLoading=ref(false)
// status options
const selectedOptions = [
{
text: 'Current',
value: 1,
},
{
text: 'Professional',
value: 2,
},
{
text: 'Rejected',
value: 3,
},
{
text: 'Resigned',
value: 4,
},
{
text: 'Applied',
value: 5,
},
]
// headers
const headers = [
{
title: 'NAME',
key: 'fullName',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'DATE',
key: 'startDate',
},
{
title: 'SALARY',
key: 'salary',
},
{
title: 'AGE',
key: 'age',
},
{
title: 'STATUS',
key: 'status',
},
{
title: 'ACTIONS',
key: 'actions',
},
]
const resolveStatusVariant = status => {
if (status === 1)
return {
color: 'primary',
text: 'Current',
}
else if (status === 2)
return {
color: 'success',
text: 'Professional',
}
else if (status === 3)
return {
color: 'error',
text: 'Rejected',
}
else if (status === 4)
return {
color: 'warning',
text: 'Resigned',
}
else
return {
color: 'info',
text: 'Applied',
}
}
const editItem = item => {
editedIndex.value = userList.value.indexOf(item)
editedItem.value = { ...item }
editDialog.value = true
}
const deleteItem = item => {
editedIndex.value = userList.value.indexOf(item)
editedItem.value = { ...item }
deleteDialog.value = true
}
const close = () => {
editDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const closeDelete = () => {
deleteDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const save = () => {
if (editedIndex.value > -1)
Object.assign(userList.value[editedIndex.value], editedItem.value)
else
userList.value.push(editedItem.value)
close()
}
const deleteItemConfirm = () => {
userList.value.splice(editedIndex.value, 1)
closeDelete()
}
onMounted(() => {
userList.value = JSON.parse(JSON.stringify(data))
})
</script>
<template>
<VOverlay
v-model="isLoading"
contained
persistent
scroll-strategy="none"
class="align-center justify-center"
>
<VProgressCircular indeterminate />
</VOverlay>
<VCardText>
<VRow>
<VCol
cols="12"
offset-md="8"
md="4"
>
<VTextField
v-model="search"
label="Search"
placeholder="Search ..."
append-inner-icon="ri-search-line"
single-line
hide-details
dense
outlined
/>
</VCol>
</VRow>
</VCardText>
<VDataTable
:headers="headers"
:items="userList"
:search="search"
:items-per-page="5"
class="text-no-wrap"
>
<!-- full name -->
<template #item.fullName="{ item }">
<div class="d-flex align-center">
<!-- avatar -->
<VAvatar
size="32"
:color="item.avatar ? '' : 'primary'"
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
:variant="!item.avatar ? 'tonal' : undefined"
>
<VImg
v-if="item.avatar"
:src="item.avatar"
/>
<span
v-else
class="text-sm"
>{{ avatarText(item.fullName) }}</span>
</VAvatar>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.fullName }}</span>
<small>{{ item.post }}</small>
</div>
</div>
</template>
<!-- status -->
<template #item.status="{ item }">
<VChip
:color="resolveStatusVariant(item.status).color"
density="comfortable"
>
{{ resolveStatusVariant(item.status).text }}
</VChip>
</template>
<!-- Actions -->
<template #item.actions="{ item }">
<div class="d-flex gap-1">
<IconBtn
size="small"
@click="editItem(item)"
>
<VIcon icon="ri-pencil-line" />
</IconBtn>
<IconBtn
size="small"
@click="deleteItem(item)"
>
<VIcon icon="ri-delete-bin-line" />
</IconBtn>
</div>
</template>
</VDataTable>
<!-- 👉 Edit Dialog -->
<VDialog
v-model="editDialog"
max-width="800px"
>
<VCard>
<VCardTitle>
<span class="headline">Edit Item</span>
</VCardTitle>
<VCardText>
<VContainer>
<VRow>
<!-- fullName -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.fullName"
label="User name"
/>
</VCol>
<!-- email -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.email"
label="Email"
/>
</VCol>
<!-- salary -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.salary"
label="Salary"
prefix="$"
type="number"
/>
</VCol>
<!-- age -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.age"
label="Age"
type="number"
/>
</VCol>
<!-- start date -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.startDate"
label="Date"
/>
</VCol>
<!-- status -->
<VCol
cols="12"
sm="6"
md="4"
>
<VSelect
v-model="editedItem.status"
:items="selectedOptions"
item-title="text"
item-value="value"
label="Status"
variant="outlined"
/>
</VCol>
</VRow>
</VContainer>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="close"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="save"
>
Save
</VBtn>
</VCardActions>
</VCard>
</VDialog>
<!-- 👉 Delete Dialog -->
<VDialog
v-model="deleteDialog"
max-width="600px"
>
<VCard>
<VCardTitle>
Are you sure you want to delete this item?
</VCardTitle>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="closeDelete"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="deleteItemConfirm"
>
OK
</VBtn>
<VSpacer />
</VCardActions>
</VCard>
</VDialog>
</template>

395
resources/js/pages/medicines/medicines.vue Normal file
View File

@ -0,0 +1,395 @@
<script setup>
import data from '@/views/demos/forms/tables/data-table/datatable';
const editDialog = ref(false)
const deleteDialog = ref(false)
const search = ref('')
const defaultItem = ref({
responsiveId: '',
id: -1,
avatar: '',
fullName: '',
post: '',
email: '',
city: '',
startDate: '',
salary: -1,
age: '',
experience: '',
status: -1,
})
const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const userList = ref([])
const isLoading=ref(false)
// status options
const selectedOptions = [
{
text: 'Current',
value: 1,
},
{
text: 'Professional',
value: 2,
},
{
text: 'Rejected',
value: 3,
},
{
text: 'Resigned',
value: 4,
},
{
text: 'Applied',
value: 5,
},
]
// headers
const headers = [
{
title: 'NAME',
key: 'fullName',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'DATE',
key: 'startDate',
},
{
title: 'SALARY',
key: 'salary',
},
{
title: 'AGE',
key: 'age',
},
{
title: 'STATUS',
key: 'status',
},
{
title: 'ACTIONS',
key: 'actions',
},
]
const resolveStatusVariant = status => {
if (status === 1)
return {
color: 'primary',
text: 'Current',
}
else if (status === 2)
return {
color: 'success',
text: 'Professional',
}
else if (status === 3)
return {
color: 'error',
text: 'Rejected',
}
else if (status === 4)
return {
color: 'warning',
text: 'Resigned',
}
else
return {
color: 'info',
text: 'Applied',
}
}
const editItem = item => {
editedIndex.value = userList.value.indexOf(item)
editedItem.value = { ...item }
editDialog.value = true
}
const deleteItem = item => {
editedIndex.value = userList.value.indexOf(item)
editedItem.value = { ...item }
deleteDialog.value = true
}
const close = () => {
editDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const closeDelete = () => {
deleteDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const save = () => {
if (editedIndex.value > -1)
Object.assign(userList.value[editedIndex.value], editedItem.value)
else
userList.value.push(editedItem.value)
close()
}
const deleteItemConfirm = () => {
userList.value.splice(editedIndex.value, 1)
closeDelete()
}
onMounted(() => {
userList.value = JSON.parse(JSON.stringify(data))
})
</script>
<template>
<VOverlay
v-model="isLoading"
contained
persistent
scroll-strategy="none"
class="align-center justify-center"
>
<VProgressCircular indeterminate />
</VOverlay>
<VCardText>
<VRow>
<VCol
cols="12"
offset-md="8"
md="4"
>
<VTextField
v-model="search"
label="Search"
placeholder="Search ..."
append-inner-icon="ri-search-line"
single-line
hide-details
dense
outlined
/>
</VCol>
</VRow>
</VCardText>
<VDataTable
:headers="headers"
:items="userList"
:search="search"
:items-per-page="5"
class="text-no-wrap"
>
<!-- full name -->
<template #item.fullName="{ item }">
<div class="d-flex align-center">
<!-- avatar -->
<VAvatar
size="32"
:color="item.avatar ? '' : 'primary'"
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
:variant="!item.avatar ? 'tonal' : undefined"
>
<VImg
v-if="item.avatar"
:src="item.avatar"
/>
<span
v-else
class="text-sm"
>{{ avatarText(item.fullName) }}</span>
</VAvatar>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.fullName }}</span>
<small>{{ item.post }}</small>
</div>
</div>
</template>
<!-- status -->
<template #item.status="{ item }">
<VChip
:color="resolveStatusVariant(item.status).color"
density="comfortable"
>
{{ resolveStatusVariant(item.status).text }}
</VChip>
</template>
<!-- Actions -->
<template #item.actions="{ item }">
<div class="d-flex gap-1">
<IconBtn
size="small"
@click="editItem(item)"
>
<VIcon icon="ri-pencil-line" />
</IconBtn>
<IconBtn
size="small"
@click="deleteItem(item)"
>
<VIcon icon="ri-delete-bin-line" />
</IconBtn>
</div>
</template>
</VDataTable>
<!-- 👉 Edit Dialog -->
<VDialog
v-model="editDialog"
max-width="600px"
>
<VCard>
<VCardTitle>
<span class="headline">Edit Item</span>
</VCardTitle>
<VCardText>
<VContainer>
<VRow>
<!-- fullName -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.fullName"
label="User name"
/>
</VCol>
<!-- email -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.email"
label="Email"
/>
</VCol>
<!-- salary -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.salary"
label="Salary"
prefix="$"
type="number"
/>
</VCol>
<!-- age -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.age"
label="Age"
type="number"
/>
</VCol>
<!-- start date -->
<VCol
cols="12"
sm="6"
md="4"
>
<VTextField
v-model="editedItem.startDate"
label="Date"
/>
</VCol>
<!-- status -->
<VCol
cols="12"
sm="6"
md="4"
>
<VSelect
v-model="editedItem.status"
:items="selectedOptions"
item-title="text"
item-value="value"
label="Status"
variant="outlined"
/>
</VCol>
</VRow>
</VContainer>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="close"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="save"
>
Save
</VBtn>
</VCardActions>
</VCard>
</VDialog>
<!-- 👉 Delete Dialog -->
<VDialog
v-model="deleteDialog"
max-width="500px"
>
<VCard>
<VCardTitle>
Are you sure you want to delete this item?
</VCardTitle>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="closeDelete"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="deleteItemConfirm"
>
OK
</VBtn>
<VSpacer />
</VCardActions>
</VCard>
</VDialog>
</template>

384
resources/js/pages/patients/patients.vue Normal file
View File

@ -0,0 +1,384 @@
<script setup>
import { useStore } from 'vuex';
const store = useStore()
const editDialog = ref(false)
const deleteDialog = ref(false)
const search = ref('')
const defaultItem = ref({
id: -1,
avatar: '',
name: '',
email: '',
dob: '',
phone_no: '',
})
const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const patientList = ref([])
const isLoading=ref(false)
// status options
const selectedOptions = [
{
text: 'Active',
value: 1,
},
{
text: 'InActive',
value: 2,
},
]
const refVForm = ref(null)
const formatPhoneNumber = () => {
console.log(editedItem.value)
// Remove non-numeric characters from the input
const numericValue = editedItem.value.phone_no.replace(/\D/g, '');
// Apply formatting logic
if (numericValue.length <= 10) {
editedItem.value.phone_no = numericValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
} else {
// Limit the input to a maximum of 14 characters
const truncatedValue = numericValue.slice(0, 10);
editedItem.value.phone_no = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
}
};
// headers
const headers = [
{
title: 'NAME',
key: 'name',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'Date Of Birth',
key: 'dob',
},
{
title: 'Phone',
key: 'phone_no',
},
{
title: 'ACTIONS',
key: 'actions',
},
]
const resolveStatusVariant = status => {
if (status === 1)
return {
color: 'primary',
text: 'Current',
}
else if (status === 2)
return {
color: 'success',
text: 'Professional',
}
else if (status === 3)
return {
color: 'error',
text: 'Rejected',
}
else if (status === 4)
return {
color: 'warning',
text: 'Resigned',
}
else
return {
color: 'info',
text: 'Applied',
}
}
const editItem = item => {
editedIndex.value = patientList.value.indexOf(item)
editedItem.value = { ...item }
editDialog.value = true
}
const deleteItem = item => {
editedIndex.value = patientList.value.indexOf(item)
editedItem.value = { ...item }
deleteDialog.value = true
}
const close = () => {
editDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const closeDelete = () => {
deleteDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const save = async () => {
const { valid } = await refVForm.value.validate()
console.log(valid)
if (valid) {
if (editedIndex.value > -1)
Object.assign(patientList.value[editedIndex.value], editedItem.value)
else
patientList.value.push(editedItem.value)
close()
}
}
const deleteItemConfirm = () => {
patientList.value.splice(editedIndex.value, 1)
closeDelete()
}
const getPatientList = computed(async () => {
store.dispatch('updateIsLoading', true)
await store.dispatch('patientList')
console.log('patientList',store.getters.getPatientList)
let list = store.getters.getPatientList
store.dispatch('updateIsLoading', false)
patientList.value = list
return patientList.value
});
onMounted(() => {
})
</script>
<template>
<v-row>
<v-col cols="12" md="12" v-if="getPatientList">
<VCardText >
<VRow>
<VCol
cols="12"
offset-md="8"
md="4"
>
<VTextField
v-model="search"
label="Search"
placeholder="Search ..."
append-inner-icon="ri-search-line"
single-line
hide-details
dense
outlined
/>
</VCol>
</VRow>
</VCardText>
<VDataTable
:headers="headers"
:items="patientList"
:search="search"
:items-per-page="5"
class="text-no-wrap"
>
<!-- full name -->
<template #item.name="{ item }">
<div class="d-flex align-center">
<!-- avatar -->
<VAvatar
size="32"
:color="item.avatar ? '' : 'primary'"
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
:variant="!item.avatar ? 'tonal' : undefined"
>
<VImg
v-if="item.avatar"
:src="item.avatar"
/>
<span
v-else
class="text-sm"
>{{ avatarText(item.name) }}</span>
</VAvatar>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</span>
<small>{{ item.post }}</small>
</div>
</div>
</template>
<!-- status -->
<template #item.status="{ item }">
<VChip
:color="resolveStatusVariant(item.status).color"
density="comfortable"
>
{{ resolveStatusVariant(item.status).text }}
</VChip>
</template>
<!-- Actions -->
<template #item.actions="{ item }">
<div class="d-flex gap-1">
<IconBtn
size="small"
@click="editItem(item)"
>
<VIcon icon="ri-pencil-line" />
</IconBtn>
<IconBtn
size="small"
@click="deleteItem(item)"
>
<VIcon icon="ri-delete-bin-line" />
</IconBtn>
</div>
</template>
</VDataTable>
</v-col>
</v-row>
<!-- 👉 Edit Dialog -->
<VDialog
v-model="editDialog"
max-width="600px"
>
<VForm ref="refVForm" >
<VCard>
<VCardTitle>
<span class="headline">Edit Patient</span>
</VCardTitle>
<VCardText>
<VContainer >
<VRow>
<!-- fullName -->
<VCol cols="12" md="6">
<VTextField
v-model="editedItem.first_name"
label="First Name"
:rules="[requiredFirstName]"
/>
</VCol>
<VCol cols="12" md="6">
<VTextField
v-model="editedItem.last_name"
label="Last Name"
:rules="[requiredLastName]"
/>
</VCol>
<!-- email -->
<VCol cols="12" sm="6" md="12">
<VTextField
v-model="editedItem.email"
label="Email"
:rules="[requiredEmail, emailValidator]"
/>
</VCol>
<VCol cols="12" sm="6" md="12">
<VTextField
v-model="editedItem.dob"
label="Date Of Birth"
/>
</VCol>
<VCol cols="12" sm="6" md="12">
<VTextField v-model="editedItem.phone_no" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
:rules="[requiredPhone, validUSAPhone]" placeholder="i.e. (000) 000-0000"
@input="formatPhoneNumber" max="14" density="comfortable" />
</VCol>
<!-- status -->
<VCol
cols="12"
md="12"
>
<VSelect
v-model="editedItem.status"
:items="selectedOptions"
item-title="text"
item-value="value"
label="Status"
variant="outlined"
/>
</VCol>
</VRow>
</VContainer>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="close"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="save"
>
Save
</VBtn>
</VCardActions>
</VCard>
</VForm>
</VDialog>
<!-- 👉 Delete Dialog -->
<VDialog
v-model="deleteDialog"
max-width="500px"
>
<VCard>
<VCardTitle>
Are you sure you want to delete this item?
</VCardTitle>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="closeDelete"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="deleteItemConfirm"
>
OK
</VBtn>
<VSpacer />
</VCardActions>
</VCard>
</VDialog>
</template>

384
resources/js/pages/providers/providers.vue Normal file
View File

@ -0,0 +1,384 @@
<script setup>
import { useStore } from 'vuex';
const store = useStore()
const editDialog = ref(false)
const deleteDialog = ref(false)
const search = ref('')
const defaultItem = ref({
id: -1,
avatar: '',
name: '',
email: '',
dob: '',
phone_no: '',
})
const editedItem = ref(defaultItem.value)
const editedIndex = ref(-1)
const patientList = ref([])
const isLoading=ref(false)
// status options
const selectedOptions = [
{
text: 'Active',
value: 1,
},
{
text: 'InActive',
value: 2,
},
]
const refVForm = ref(null)
const formatPhoneNumber = () => {
console.log(editedItem.value)
// Remove non-numeric characters from the input
const numericValue = editedItem.value.phone_no.replace(/\D/g, '');
// Apply formatting logic
if (numericValue.length <= 10) {
editedItem.value.phone_no = numericValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
} else {
// Limit the input to a maximum of 14 characters
const truncatedValue = numericValue.slice(0, 10);
editedItem.value.phone_no = truncatedValue.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
}
};
// headers
const headers = [
{
title: 'NAME',
key: 'name',
},
{
title: 'EMAIL',
key: 'email',
},
{
title: 'Date Of Birth',
key: 'dob',
},
{
title: 'Phone',
key: 'phone_no',
},
{
title: 'ACTIONS',
key: 'actions',
},
]
const resolveStatusVariant = status => {
if (status === 1)
return {
color: 'primary',
text: 'Current',
}
else if (status === 2)
return {
color: 'success',
text: 'Professional',
}
else if (status === 3)
return {
color: 'error',
text: 'Rejected',
}
else if (status === 4)
return {
color: 'warning',
text: 'Resigned',
}
else
return {
color: 'info',
text: 'Applied',
}
}
const editItem = item => {
editedIndex.value = patientList.value.indexOf(item)
editedItem.value = { ...item }
editDialog.value = true
}
const deleteItem = item => {
editedIndex.value = patientList.value.indexOf(item)
editedItem.value = { ...item }
deleteDialog.value = true
}
const close = () => {
editDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const closeDelete = () => {
deleteDialog.value = false
editedIndex.value = -1
editedItem.value = { ...defaultItem.value }
}
const save = async () => {
const { valid } = await refVForm.value.validate()
console.log(valid)
if (valid) {
if (editedIndex.value > -1)
Object.assign(patientList.value[editedIndex.value], editedItem.value)
else
patientList.value.push(editedItem.value)
close()
}
}
const deleteItemConfirm = () => {
patientList.value.splice(editedIndex.value, 1)
closeDelete()
}
const getPatientList = computed(async () => {
store.dispatch('updateIsLoading', true)
await store.dispatch('patientList')
console.log('patientList',store.getters.getPatientList)
let list = store.getters.getPatientList
store.dispatch('updateIsLoading', false)
patientList.value = list
return patientList.value
});
onMounted(() => {
})
</script>
<template>
<v-row>
<v-col cols="12" md="12" v-if="getPatientList">
<VCardText >
<VRow>
<VCol
cols="12"
offset-md="8"
md="4"
>
<VTextField
v-model="search"
label="Search"
placeholder="Search ..."
append-inner-icon="ri-search-line"
single-line
hide-details
dense
outlined
/>
</VCol>
</VRow>
</VCardText>
<VDataTable
:headers="headers"
:items="patientList"
:search="search"
:items-per-page="5"
class="text-no-wrap"
>
<!-- full name -->
<template #item.name="{ item }">
<div class="d-flex align-center">
<!-- avatar -->
<VAvatar
size="32"
:color="item.avatar ? '' : 'primary'"
:class="item.avatar ? '' : 'v-avatar-light-bg primary--text'"
:variant="!item.avatar ? 'tonal' : undefined"
>
<VImg
v-if="item.avatar"
:src="item.avatar"
/>
<span
v-else
class="text-sm"
>{{ avatarText(item.name) }}</span>
</VAvatar>
<div class="d-flex flex-column ms-3">
<span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</span>
<small>{{ item.post }}</small>
</div>
</div>
</template>
<!-- status -->
<template #item.status="{ item }">
<VChip
:color="resolveStatusVariant(item.status).color"
density="comfortable"
>
{{ resolveStatusVariant(item.status).text }}
</VChip>
</template>
<!-- Actions -->
<template #item.actions="{ item }">
<div class="d-flex gap-1">
<IconBtn
size="small"
@click="editItem(item)"
>
<VIcon icon="ri-pencil-line" />
</IconBtn>
<IconBtn
size="small"
@click="deleteItem(item)"
>
<VIcon icon="ri-delete-bin-line" />
</IconBtn>
</div>
</template>
</VDataTable>
</v-col>
</v-row>
<!-- 👉 Edit Dialog -->
<VDialog
v-model="editDialog"
max-width="600px"
>
<VForm ref="refVForm" >
<VCard>
<VCardTitle>
<span class="headline">Edit Patient</span>
</VCardTitle>
<VCardText>
<VContainer >
<VRow>
<!-- fullName -->
<VCol cols="12" md="6">
<VTextField
v-model="editedItem.first_name"
label="First Name"
:rules="[requiredFirstName]"
/>
</VCol>
<VCol cols="12" md="6">
<VTextField
v-model="editedItem.last_name"
label="Last Name"
:rules="[requiredLastName]"
/>
</VCol>
<!-- email -->
<VCol cols="12" sm="6" md="12">
<VTextField
v-model="editedItem.email"
label="Email"
:rules="[requiredEmail, emailValidator]"
/>
</VCol>
<VCol cols="12" sm="6" md="12">
<VTextField
v-model="editedItem.dob"
label="Date Of Birth"
/>
</VCol>
<VCol cols="12" sm="6" md="12">
<VTextField v-model="editedItem.phone_no" label="Phone Number" pattern="^\(\d{3}\) \d{3}-\d{4}$"
:rules="[requiredPhone, validUSAPhone]" placeholder="i.e. (000) 000-0000"
@input="formatPhoneNumber" max="14" density="comfortable" />
</VCol>
<!-- status -->
<VCol
cols="12"
md="12"
>
<VSelect
v-model="editedItem.status"
:items="selectedOptions"
item-title="text"
item-value="value"
label="Status"
variant="outlined"
/>
</VCol>
</VRow>
</VContainer>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="close"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="save"
>
Save
</VBtn>
</VCardActions>
</VCard>
</VForm>
</VDialog>
<!-- 👉 Delete Dialog -->
<VDialog
v-model="deleteDialog"
max-width="500px"
>
<VCard>
<VCardTitle>
Are you sure you want to delete this item?
</VCardTitle>
<VCardActions>
<VSpacer />
<VBtn
color="error"
variant="outlined"
@click="closeDelete"
>
Cancel
</VBtn>
<VBtn
color="success"
variant="elevated"
@click="deleteItemConfirm"
>
OK
</VBtn>
<VSpacer />
</VCardActions>
</VCard>
</VDialog>
</template>

29
resources/js/plugins/1.router/additional-routes.js
View File

@ -12,7 +12,7 @@ export const redirects = [
const userData = useCookie('userData')
const userRole = userData.value?.role
if (userRole === 'admin')
return { name: 'dashboards-crm' }
return { name: 'admin-dashboard' }
if (userRole === 'client')
return { name: 'access-control' }
@ -29,9 +29,36 @@ export const redirects = [
name: 'pages-account-settings',
redirect: () => ({ name: 'pages-account-settings-tab', params: { tab: 'account' } }),
},
]
export const routes = [
// Email filter
{
path: '/admin/dashboard',
name: 'admin-dashboard',
component: () => import('@/pages/dashboards/crm.vue'),
},
{
path: '/admin/patients',
name: 'admin-patients',
component: () => import('@/pages/patients/patients.vue'),
},
{
path: '/admin/providers',
name: 'admin-providers',
component: () => import('@/pages/providers/providers.vue'),
},
{
path: '/admin/labs',
name: 'admin-labs',
component: () => import('@/pages/labs/labs.vue'),
},
{
path: '/admin/medicines',
name: 'admin-medicines',
component: () => import('@/pages/medicines/medicines.vue'),
},
{
path: '/apps/email/filter/:filter',
name: 'apps-email-filter',

4
resources/js/plugins/i18n/locales/en.json
View File

@ -156,6 +156,10 @@
"Dashboard": "Dashboard",
"Fleet": "Fleet",
"Widgets": "Widgets",
"Patients": "Patients",
"Providers": "Providers",
"Labs": "Labs",
"Medicines": "Medicines",
"5": "5",
"10": "10",
"20": "20",

42
resources/js/store.js
View File

@ -1,24 +1,64 @@
// import axios from 'axios';
import axios from 'axios';
import { createStore } from 'vuex';
import { PATIENT_LIST_API } from './constants.js';
export default createStore({
state: {
isLoading: false,
patientList:[]
},
mutations: {
setLoading(state, payload) {
console.log('payload');
state.isLoading = payload
},
setPtientList(state, payload) {
state.patientList = payload
}
},
actions: {
async updateIsLoading({ commit }, payload) {
commit('setLoading', payload)
},
async patientList({ commit }, payload) {
commit('setLoading', true)
console.log(localStorage.getItem('admin_access_token'))
await axios.post(PATIENT_LIST_API, {}, {
headers: {
'Authorization': `Bearer ${localStorage.getItem('admin_access_token')}`,
}
}) .then(response => {
commit('setLoading', false)
console.log('Response:', response.data.patients);
let dataArray =[]
for (let data of response.data.patients) {
let dataObject = {}
dataObject.name = data.first_name + ' ' + data.last_name
dataObject.first_name = data.first_name
dataObject.last_name = data.last_name
dataObject.email = data.email
dataObject.dob = data.dob
dataObject.phone_no = data.phone_no
dataObject.avatar = ''
dataArray.push(dataObject)
}
console.log(dataArray)
commit('setPtientList',dataArray)
})
.catch(error => {
commit('setLoading', false)
console.error('Error:', error);
});
},
},
getters: {
getIsLoading(state){
return state.isLoading
},
getPatientList(state){
return state.patientList
},
}
})

4
typed-router.d.ts vendored
View File

@ -118,7 +118,9 @@ declare module 'vue-router/auto/routes' {
'front-pages-landing-page': RouteRecordInfo<'front-pages-landing-page', '/front-pages/landing-page', Record<never, never>, Record<never, never>>,
'front-pages-payment': RouteRecordInfo<'front-pages-payment', '/front-pages/payment', Record<never, never>, Record<never, never>>,
'front-pages-pricing': RouteRecordInfo<'front-pages-pricing', '/front-pages/pricing', Record<never, never>, Record<never, never>>,
'labs-labs': RouteRecordInfo<'labs-labs', '/labs/labs', Record<never, never>, Record<never, never>>,
'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
'medicines-medicines': RouteRecordInfo<'medicines-medicines', '/medicines/medicines', Record<never, never>, Record<never, never>>,
'not-authorized': RouteRecordInfo<'not-authorized', '/not-authorized', Record<never, never>, Record<never, never>>,
'pages-account-settings-tab': RouteRecordInfo<'pages-account-settings-tab', '/pages/account-settings/:tab', { tab: ParamValue<true> }, { tab: ParamValue<false> }>,
'pages-authentication-forgot-password-v1': RouteRecordInfo<'pages-authentication-forgot-password-v1', '/pages/authentication/forgot-password-v1', Record<never, never>, Record<never, never>>,
@ -148,6 +150,8 @@ declare module 'vue-router/auto/routes' {
'pages-pricing': RouteRecordInfo<'pages-pricing', '/pages/pricing', Record<never, never>, Record<never, never>>,
'pages-typography': RouteRecordInfo<'pages-typography', '/pages/typography', Record<never, never>, Record<never, never>>,
'pages-user-profile-tab': RouteRecordInfo<'pages-user-profile-tab', '/pages/user-profile/:tab', { tab: ParamValue<true> }, { tab: ParamValue<false> }>,
'patients-patients': RouteRecordInfo<'patients-patients', '/patients/patients', Record<never, never>, Record<never, never>>,
'providers-providers': RouteRecordInfo<'providers-providers', '/providers/providers', Record<never, never>, Record<never, never>>,
'register': RouteRecordInfo<'register', '/register', Record<never, never>, Record<never, never>>,
'tables-data-table': RouteRecordInfo<'tables-data-table', '/tables/data-table', Record<never, never>, Record<never, never>>,
'tables-simple-table': RouteRecordInfo<'tables-simple-table', '/tables/simple-table', Record<never, never>, Record<never, never>>,