From 88c2df51453549ba53e10a4d68ce5f2964ea343c Mon Sep 17 00:00:00 2001
From: "nasir@endelospay.com" <nasir@endelospay.com>
Date: Fri, 31 May 2024 20:11:35 +0500
Subject: [PATCH] fixed

---
 .eslintrc-auto-import.json                    |   7 +-
 auto-imports.d.ts                             |  15 +
 resources/js/@core/utils/validators.js        |  31 ++
 resources/js/App.vue                          |  18 +-
 resources/js/constants.js                     |   3 +-
 .../DefaultLayoutWithVerticalNav.vue          |  24 +-
 resources/js/navigation/vertical/dashboard.js | 131 +++---
 resources/js/navigation/vertical/index.js     |  12 +-
 resources/js/pages/dashboards/crm.vue         |  10 +-
 resources/js/pages/labs/labs.vue              | 395 ++++++++++++++++++
 resources/js/pages/medicines/medicines.vue    | 395 ++++++++++++++++++
 resources/js/pages/patients/patients.vue      | 384 +++++++++++++++++
 resources/js/pages/providers/providers.vue    | 384 +++++++++++++++++
 .../js/plugins/1.router/additional-routes.js  |  29 +-
 resources/js/plugins/i18n/locales/en.json     |   4 +
 resources/js/store.js                         |  42 +-
 typed-router.d.ts                             |   4 +
 17 files changed, 1808 insertions(+), 80 deletions(-)
 create mode 100644 resources/js/pages/labs/labs.vue
 create mode 100644 resources/js/pages/medicines/medicines.vue
 create mode 100644 resources/js/pages/patients/patients.vue
 create mode 100644 resources/js/pages/providers/providers.vue

diff --git a/.eslintrc-auto-import.json b/.eslintrc-auto-import.json
index 2ea71a7..49fbfa4 100644
--- a/.eslintrc-auto-import.json
+++ b/.eslintrc-auto-import.json
@@ -352,6 +352,11 @@
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,
-    "whenever": true
+    "whenever": true,
+    "validUSAPhone": true,
+    "requiredPhone": true,
+    "requiredFirstName": true,
+    "requiredLastName": true,
+    "requiredEmail": true
   }
 }
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 776a33d..3737951 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -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']>
diff --git a/resources/js/@core/utils/validators.js b/resources/js/@core/utils/validators.js
index 0fa75ea..c3c3733 100644
--- a/resources/js/@core/utils/validators.js
+++ b/resources/js/@core/utils/validators.js
@@ -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'
+}
diff --git a/resources/js/App.vue b/resources/js/App.vue
index a97ee6d..e6b6bdb 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -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)}`">
diff --git a/resources/js/constants.js b/resources/js/constants.js
index bf70871..f0d3376 100644
--- a/resources/js/constants.js
+++ b/resources/js/constants.js
@@ -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"
diff --git a/resources/js/layouts/components/DefaultLayoutWithVerticalNav.vue b/resources/js/layouts/components/DefaultLayoutWithVerticalNav.vue
index 0f7ee50..1aba2f3 100644
--- a/resources/js/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/resources/js/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -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 }">
diff --git a/resources/js/navigation/vertical/dashboard.js b/resources/js/navigation/vertical/dashboard.js
index 4500a7b..3b09710 100644
--- a/resources/js/navigation/vertical/dashboard.js
+++ b/resources/js/navigation/vertical/dashboard.js
@@ -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',
+  //     },
+  //   ],
+  // },
 ]
diff --git a/resources/js/navigation/vertical/index.js b/resources/js/navigation/vertical/index.js
index fa9ace6..4919e54 100644
--- a/resources/js/navigation/vertical/index.js
+++ b/resources/js/navigation/vertical/index.js
@@ -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]
diff --git a/resources/js/pages/dashboards/crm.vue b/resources/js/pages/dashboards/crm.vue
index a5561f9..7dd6ff9 100644
--- a/resources/js/pages/dashboards/crm.vue
+++ b/resources/js/pages/dashboards/crm.vue
@@ -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>
diff --git a/resources/js/pages/labs/labs.vue b/resources/js/pages/labs/labs.vue
new file mode 100644
index 0000000..2844195
--- /dev/null
+++ b/resources/js/pages/labs/labs.vue
@@ -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>
diff --git a/resources/js/pages/medicines/medicines.vue b/resources/js/pages/medicines/medicines.vue
new file mode 100644
index 0000000..ecbe9c0
--- /dev/null
+++ b/resources/js/pages/medicines/medicines.vue
@@ -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>
diff --git a/resources/js/pages/patients/patients.vue b/resources/js/pages/patients/patients.vue
new file mode 100644
index 0000000..aad5f5b
--- /dev/null
+++ b/resources/js/pages/patients/patients.vue
@@ -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>
diff --git a/resources/js/pages/providers/providers.vue b/resources/js/pages/providers/providers.vue
new file mode 100644
index 0000000..aad5f5b
--- /dev/null
+++ b/resources/js/pages/providers/providers.vue
@@ -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>
diff --git a/resources/js/plugins/1.router/additional-routes.js b/resources/js/plugins/1.router/additional-routes.js
index 49fd182..dbd362c 100644
--- a/resources/js/plugins/1.router/additional-routes.js
+++ b/resources/js/plugins/1.router/additional-routes.js
@@ -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',
diff --git a/resources/js/plugins/i18n/locales/en.json b/resources/js/plugins/i18n/locales/en.json
index c7d7831..8a89607 100644
--- a/resources/js/plugins/i18n/locales/en.json
+++ b/resources/js/plugins/i18n/locales/en.json
@@ -156,6 +156,10 @@
   "Dashboard": "Dashboard",
   "Fleet": "Fleet",
   "Widgets": "Widgets",
+  "Patients": "Patients",
+  "Providers": "Providers",
+  "Labs": "Labs",
+  "Medicines": "Medicines",
   "5": "5",
   "10": "10",
   "20": "20",
diff --git a/resources/js/store.js b/resources/js/store.js
index 782950c..c70c2c8 100644
--- a/resources/js/store.js
+++ b/resources/js/store.js
@@ -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
+    },
   }
 })
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 4223508..86f30ea 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -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>>,