From 1ee46af467c2427e68fa3e62486e42929bb92cd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Thu, 3 Nov 2022 16:52:39 +0300
Subject: [PATCH] Demos added

---
 src/assets/demo/styles/items.scss |  13 +
 src/main.js                       |   3 +
 src/router/index.js               |  71 ++++
 src/views/demo/Button.vue         | 173 ++++++++++
 src/views/demo/File.vue           |  23 ++
 src/views/demo/FloatLabel.vue     | 115 +++++++
 src/views/demo/FormLayout.vue     | 124 +++++++
 src/views/demo/Icons.vue          | 146 ++++++++
 src/views/demo/Input.vue          | 297 ++++++++++++++++
 src/views/demo/InvalidState.vue   | 100 ++++++
 src/views/demo/List.vue           | 154 +++++++++
 src/views/demo/Media.vue          | 112 ++++++
 src/views/demo/Menu.vue           | 546 ++++++++++++++++++++++++++++++
 src/views/demo/Messages.vue       | 101 ++++++
 src/views/demo/Misc.vue           | 191 +++++++++++
 src/views/demo/Overlay.vue        | 187 ++++++++++
 src/views/demo/Panels.vue         | 229 +++++++++++++
 src/views/demo/Table.vue          | 392 +++++++++++++++++++++
 src/views/demo/Tree.vue           |  37 ++
 19 files changed, 3014 insertions(+)
 create mode 100644 src/assets/demo/styles/items.scss
 create mode 100644 src/views/demo/Button.vue
 create mode 100644 src/views/demo/File.vue
 create mode 100644 src/views/demo/FloatLabel.vue
 create mode 100644 src/views/demo/FormLayout.vue
 create mode 100644 src/views/demo/Icons.vue
 create mode 100644 src/views/demo/Input.vue
 create mode 100644 src/views/demo/InvalidState.vue
 create mode 100644 src/views/demo/List.vue
 create mode 100644 src/views/demo/Media.vue
 create mode 100644 src/views/demo/Menu.vue
 create mode 100644 src/views/demo/Messages.vue
 create mode 100644 src/views/demo/Misc.vue
 create mode 100644 src/views/demo/Overlay.vue
 create mode 100644 src/views/demo/Panels.vue
 create mode 100644 src/views/demo/Table.vue
 create mode 100644 src/views/demo/Tree.vue

diff --git a/src/assets/demo/styles/items.scss b/src/assets/demo/styles/items.scss
new file mode 100644
index 0000000..67eb9f8
--- /dev/null
+++ b/src/assets/demo/styles/items.scss
@@ -0,0 +1,13 @@
+.product-item {
+    .product-item-content {
+        border: 1px solid var(--surface-d);
+        border-radius: 3px;
+        margin: 0.3rem;
+        text-align: center;
+        padding: 2rem 0;
+    }
+    .product-image {
+        width: 50%;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+    }
+}
diff --git a/src/main.js b/src/main.js
index 25cdc15..ea5eba6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -106,6 +106,9 @@ const app = createApp(App);
 
 app.use(router);
 app.use(PrimeVue, { ripple: true });
+app.use(ToastService);
+app.use(DialogService);
+app.use(ConfirmationService);
 
 app.directive('tooltip', Tooltip);
 app.directive('badge', BadgeDirective);
diff --git a/src/router/index.js b/src/router/index.js
index 8cd0d3b..4040bff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,7 +12,78 @@ const router = createRouter({
                     path: '',
                     name: 'dashboard',
                     component: () => import('@/views/Dashboard.vue')
+                },
+                {
+                    path: '/formlayout',
+                    name: 'formlayout',
+                    component: () => import('@/views/demo/FormLayout.vue')
+                },
+                {
+                    path: '/input',
+                    name: 'input',
+                    component: () => import('@/views/demo/Input.vue')
+                },
+                {
+                    path: '/floatlabel',
+                    name: 'floatlabel',
+                    component: () => import('@/views/demo/FloatLabel.vue')
+                },
+                {
+                    path: '/invalidstate',
+                    name: 'invalidstate',
+                    component: () => import('@/views/demo/InvalidState.vue')
+                },
+                {
+                    path: '/button',
+                    name: 'button',
+                    component: () => import('@/views/demo/Button.vue')
+                },
+                {
+                    path: '/table',
+                    name: 'table',
+                    component: () => import('@/views/demo/Table.vue')
+                },
+                {
+                    path: '/list',
+                    name: 'list',
+                    component: () => import('@/views/demo/List.vue')
+                },
+                {
+                    path: '/tree',
+                    name: 'tree',
+                    component: () => import('@/views/demo/Tree.vue')
+                },
+                {
+                    path: '/panel',
+                    name: 'panel',
+                    component: () => import('@/views/demo/Panels.vue')
+                },
+
+                {
+                    path: '/overlay',
+                    name: 'overlay',
+                    component: () => import('@/views/demo/Overlay.vue')
+                },
+                {
+                    path: '/media',
+                    name: 'media',
+                    component: () => import('@/views/demo/Media.vue')
                 }
+                /*
+               
+               
+           
+               
+                {
+                    path: '/overlay',
+                    name: 'overlay',
+                    component: () => import('./components/OverlayDemo.vue')
+                },
+                {
+                    path: '/media',
+                    name: 'media',
+                    component: () => import('./components/MediaDemo.vue')
+                } */
             ]
         }
     ]
diff --git a/src/views/demo/Button.vue b/src/views/demo/Button.vue
new file mode 100644
index 0000000..ecb2798
--- /dev/null
+++ b/src/views/demo/Button.vue
@@ -0,0 +1,173 @@
+<template>
+    <div class="grid">
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>Default</h5>
+                <Button label="Submit" class="mr-2 mb-2"></Button>
+                <Button label="Disabled" class="mr-2 mb-2" :disabled="true"></Button>
+                <Button label="Link" class="p-button-link mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Severities</h5>
+                <Button label="Primary" class="mr-2 mb-2" />
+                <Button label="Secondary" class="p-button-secondary mr-2 mb-2" />
+                <Button label="Success" class="p-button-success mr-2 mb-2" />
+                <Button label="Info" class="p-button-info mr-2 mb-2" />
+                <Button label="Warning" class="p-button-warning mr-2 mb-2" />
+                <Button label="Danger" class="p-button-danger mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Text</h5>
+                <Button label="Primary" class="p-button-text mr-2 mb-2" />
+                <Button label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2" />
+                <Button label="Success" class="p-button-success p-button-text mr-2 mb-2" />
+                <Button label="Info" class="p-button-info p-button-text mr-2 mb-2" />
+                <Button label="Warning" class="p-button-warning p-button-text mr-2 mb-2" />
+                <Button label="Help" class="p-button-help p-button-text mr-2 mb-2" />
+                <Button label="Danger" class="p-button-danger p-button-text mr-2 mb-2" />
+                <Button label="Plain" class="p-button-plain p-button-text mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Outlined</h5>
+                <Button label="Primary" class="p-button-outlined mr-2 mb-2" />
+                <Button label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2" />
+                <Button label="Success" class="p-button-outlined p-button-success mr-2 mb-2" />
+                <Button label="Info" class="p-button-outlined p-button-info mr-2 mb-2" />
+                <Button label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2" />
+                <Button label="Help" class="p-button-outlined p-button-help mr-2 mb-2" />
+                <Button label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Button Group</h5>
+                <span class="p-buttonset">
+                    <Button label="Save" icon="pi pi-check" />
+                    <Button label="Delete" icon="pi pi-trash" />
+                    <Button label="Cancel" icon="pi pi-times" />
+                </span>
+            </div>
+
+            <div class="card">
+                <h5>SplitButton</h5>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-secondary mr-2 mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-success mr-2 mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-info mr-2 mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning mr-2 mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-danger mr-2 mb-2"></SplitButton>
+            </div>
+
+            <div class="card">
+                <h5>Templating</h5>
+                <Button type="button" class="mr-2 mb-2 px-3">
+                    <img alt="logo" src="images/primevue-logo.svg" style="width: 1.5rem" />
+                </Button>
+                <Button type="button" class="p-button-outlined p-button-success mr-2 mb-2">
+                    <img alt="logo" src="images/primevue-logo.svg" style="width: 1.5rem" />
+                    <span class="ml-2 text-bold">PrimeVue</span>
+                </Button>
+            </div>
+        </div>
+
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>Icons</h5>
+                <Button icon="pi pi-star-fill" class="mr-2 mb-2"></Button>
+                <Button label="Bookmark" icon="pi pi-bookmark" class="mr-2 mb-2"></Button>
+                <Button label="Bookmark" icon="pi pi-bookmark" iconPos="right" class="mr-2 mb-2"></Button>
+            </div>
+
+            <div class="card">
+                <h5>Raised</h5>
+                <Button label="Primary" class="p-button-raised mr-2 mb-2" />
+                <Button label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2" />
+                <Button label="Success" class="p-button-raised p-button-success mr-2 mb-2" />
+                <Button label="Info" class="p-button-raised p-button-info mr-2 mb-2" />
+                <Button label="Warning" class="p-button-raised p-button-warning mr-2 mb-2" />
+                <Button label="Danger" class="p-button-raised p-button-danger mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Rounded</h5>
+                <Button label="Primary" class="p-button-rounded mr-2 mb-2" />
+                <Button label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2" />
+                <Button label="Success" class="p-button-rounded p-button-success mr-2 mb-2" />
+                <Button label="Info" class="p-button-rounded p-button-info mr-2 mb-2" />
+                <Button label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2" />
+                <Button label="Danger" class="p-button-rounded p-button-danger mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Rounded Icons</h5>
+                <Button icon="pi pi-star-fill" class="p-button-rounded mr-2 mb-2" />
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2" />
+                <Button icon="pi pi-check" class="p-button-rounded p-button-success mr-2 mb-2" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-info mr-2 mb-2" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-warning mr-2 mb-2" />
+                <Button icon="pi pi-sign-out" class="p-button-rounded p-button-danger mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Rounded Text</h5>
+                <Button icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2" />
+                <Button icon="pi pi-filter" class="p-button-rounded p-button-plain p-button-text mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Rounded Outlined</h5>
+                <Button icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2" />
+                <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mr-2 mb-2" />
+            </div>
+
+            <div class="card">
+                <h5>Loading</h5>
+                <Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
+                <Button type="button" class="mr-2 mb-2" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)" />
+                <Button type="button" class="mr-2 mb-2" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
+                <Button type="button" class="mr-2 mb-2" label="Search" :loading="loading[3]" @click="load(3)" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref([
+    {
+        label: 'Update',
+        icon: 'pi pi-refresh'
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-times'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Home',
+        icon: 'pi pi-home'
+    }
+]);
+
+const loading = ref([false, false, false]);
+
+const load = (index) => {
+    loading.value[index] = true;
+    setTimeout(() => (loading.value[index] = false), 1000);
+};
+</script>
diff --git a/src/views/demo/File.vue b/src/views/demo/File.vue
new file mode 100644
index 0000000..6d15337
--- /dev/null
+++ b/src/views/demo/File.vue
@@ -0,0 +1,23 @@
+<template>
+	<div class="grid">
+		<div class="col-12">
+			<div class="card">
+				<h5>Advanced</h5>
+				<FileUpload name="demo[]" url="./upload.php" @upload="onUpload" :multiple="true" accept="image/*" :maxFileSize="1000000"/>
+
+				<h5>Basic</h5>
+				<FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" :maxFileSize="1000000" @upload="onUpload" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		methods: {
+			onUpload() {
+				this.$toast.add({severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000});
+			}
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/src/views/demo/FloatLabel.vue b/src/views/demo/FloatLabel.vue
new file mode 100644
index 0000000..2a62464
--- /dev/null
+++ b/src/views/demo/FloatLabel.vue
@@ -0,0 +1,115 @@
+<template>
+    <div class="card">
+        <h5>Float Label</h5>
+        <div class="grid p-fluid mt-3">
+            <div class="field col-12 md:col-4">
+                <span class="p-float-label">
+                    <InputText type="text" id="inputtext" v-model="value1" />
+                    <label for="inputtext">InputText</label>
+                </span>
+            </div>
+            <div class="field col-12 md:col-4">
+                <span class="p-float-label">
+                    <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></AutoComplete>
+                    <label for="autocomplete">AutoComplete</label>
+                </span>
+            </div>
+            <div class="field col-12 md:col-4">
+                <span class="p-float-label">
+                    <Calendar inputId="calendar" v-model="value3"></Calendar>
+                    <label for="calendar">Calendar</label>
+                </span>
+            </div>
+            <div class="field col-12 md:col-4">
+                <span class="p-float-label">
+                    <Chips inputId="chips" v-model="value4"></Chips>
+                    <label for="chips">Chips</label>
+                </span>
+            </div>
+            <div class="field col-12 md:col-4">
+                <span class="p-float-label">
+                    <InputMask id="inputmask" mask="99/99/9999" v-model="value5"></InputMask>
+                    <label for="inputmask">InputMask</label>
+                </span>
+            </div>
+            <div class="field col-12 md:col-4">
+                <span class="p-float-label">
+                    <InputNumber id="inputnumber" v-model="value6"></InputNumber>
+                    <label for="inputnumber">InputNumber</label>
+                </span>
+            </div>
+            <div class="field col-12 md:col-4">
+                <div class="p-inputgroup">
+                    <span class="p-inputgroup-addon">
+                        <i class="pi pi-user"></i>
+                    </span>
+                    <span class="p-float-label">
+                        <InputText type="text" id="inputgroup" v-model="value7" />
+                        <label for="inputgroup">InputGroup</label>
+                    </span>
+                </div>
+            </div>
+            <div class="field col-12 md:col-4">
+                <span class="p-float-label">
+                    <Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
+                    <label for="dropdown">Dropdown</label>
+                </span>
+            </div>
+            <div class="field col-12 md:col-4">
+                <span class="p-float-label">
+                    <MultiSelect id="multiselect" :options="cities" v-model="value9" optionLabel="name" :filter="false"></MultiSelect>
+                    <label for="multiselect">MultiSelect</label>
+                </span>
+            </div>
+            <div class="field col-12 md:col-4">
+                <span class="p-float-label">
+                    <Textarea inputId="textarea" rows="3" cols="30" v-model="value10"></Textarea>
+                    <label for="textarea">Textarea</label>
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import CountryService from '@/layout/service/CountryService';
+
+const countries = ref([]);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+const filteredCountries = ref(null);
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const value4 = ref(null);
+const value5 = ref(null);
+const value6 = ref(null);
+const value7 = ref(null);
+const value8 = ref(null);
+const value9 = ref(null);
+const value10 = ref(null);
+const countryService = new CountryService();
+
+onMounted(() => {
+    countryService.getCountries().then((data) => (countries.value = data));
+});
+
+const searchCountry = (event) => {
+    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
+    const filtered = [];
+    const query = event.query;
+    for (let i = 0; i < this.countries.length; i++) {
+        const country = this.countries[i];
+        if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
+            filtered.push(country);
+        }
+    }
+    filteredCountries.value = filtered;
+};
+</script>
diff --git a/src/views/demo/FormLayout.vue b/src/views/demo/FormLayout.vue
new file mode 100644
index 0000000..3145cac
--- /dev/null
+++ b/src/views/demo/FormLayout.vue
@@ -0,0 +1,124 @@
+<template>
+	<div class="grid">
+		<div class="col-12 md:col-6">
+			<div class="card p-fluid">
+				<h5>Vertical</h5>
+				<div class="field">
+					<label for="name1">Name</label>
+					<InputText id="name1" type="text" />
+				</div>
+				<div class="field">
+					<label for="email1">Email</label>
+					<InputText id="email1" type="text" />
+				</div>
+				<div class="field">
+					<label for="age1">Age</label>
+					<InputText id="age1" type="text" />
+				</div>
+			</div>
+
+			<div class="card p-fluid">
+				<h5>Vertical Grid</h5>
+				<div class="formgrid grid">
+					<div class="field col">
+						<label for="name2">Name</label>
+						<InputText id="name2" type="text" />
+					</div>
+					<div class="field col">
+						<label for="email2">Email</label>
+						<InputText id="email2" type="text" />
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="col-12 md:col-6">
+			<div class="card p-fluid">
+				<h5>Horizontal</h5>
+				<div class="field grid">
+					<label for="name3" class="col-12 mb-2 md:col-2 md:mb-0">Name</label>
+					<div class="col-12 md:col-10">
+						<InputText id="name3" type="text" />
+					</div>
+				</div>
+				<div class="field grid">
+					<label for="email3" class="col-12 mb-2 md:col-2 md:mb-0">Email</label>
+					<div class="col-12 md:col-10">
+						<InputText id="email3" type="text" />
+					</div>
+				</div>
+			</div>
+
+			<div class="card">
+				<h5>Inline</h5>
+				<div class="formgroup-inline">
+					<div class="field">
+						<label for="firstname1" class="p-sr-only">Firstname</label>
+						<InputText id="firstname1" type="text" placeholder="Firstname"/>
+					</div>
+					<div class="field">
+						<label for="lastname1" class="p-sr-only">Lastname</label>
+						<InputText id="lastname1" type="text" placeholder="Lastname"/>
+					</div>
+					<Button label="Submit"></Button>
+				</div>
+			</div>
+
+			<div class="card">
+				<h5>Help Text</h5>
+				<div class="field p-fluid">
+					<label for="username">Username</label>
+					<InputText id="username" type="text" />
+					<small>Enter your username to reset your password.</small>
+				</div>
+			</div>
+		</div>
+
+		<div class="col-12">
+			<div class="card">
+				<h5>Advanced</h5>
+				<div class="p-fluid formgrid grid">
+					<div class="field col-12 md:col-6">
+						<label for="firstname2">Firstname</label>
+						<InputText id="firstname2" type="text"/>
+					</div>
+					<div class="field col-12 md:col-6">
+						<label for="lastname2">Lastname</label>
+						<InputText id="lastname2" type="text"/>
+					</div>
+					<div class="field col-12">
+						<label for="address">Address</label>
+						<Textarea id="address" rows="4"/>
+					</div>
+					<div class="field col-12 md:col-6">
+						<label for="city">City</label>
+						<InputText id="city" type="text" />
+					</div>
+					<div class="field col-12 md:col-3">
+						<label for="state">State</label>
+						<Dropdown id="state" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Select One"></Dropdown>
+					</div>
+					<div class="field col-12 md:col-3">
+						<label for="zip">Zip</label>
+						<InputText id="zip" type="text"/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dropdownItems: [
+					{name: 'Option 1', code: 'Option 1'},
+					{name: 'Option 2', code: 'Option 2'},
+					{name: 'Option 3', code: 'Option 3'}
+				],
+				dropdownItem: null
+			}
+		}
+	}
+</script>
diff --git a/src/views/demo/Icons.vue b/src/views/demo/Icons.vue
new file mode 100644
index 0000000..8c3572a
--- /dev/null
+++ b/src/views/demo/Icons.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="card">
+            <h3>Icons</h3>
+            <p>PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium">PrimeIcons</a> library, the official icons suite from <a href="https://www.primetek.com.tr" class="font-medium">PrimeTek</a>.</p>
+
+            <h5>Download</h5>
+            <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
+
+<pre v-code><code>
+npm install primeicons --save
+
+</code></pre>
+
+            <h5>Getting Started</h5>
+            <p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>.
+            A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
+
+<pre v-code><code>
+&lt;i class="pi pi-check"&gt;&lt;/i&gt;
+&lt;i class="pi pi-times"&gt;&lt;/i&gt;
+
+</code></pre>
+
+<i class="pi pi-check" style="margin-right: .5rem"></i>
+<i class="pi pi-times"></i>
+
+            <h5>Size</h5>
+            <p>Size of the icons can easily be changed using font-size property.</p>
+
+<pre v-code><code>
+&lt;i class="pi pi-check"&gt;&lt;/i&gt;
+
+</code></pre>
+
+            <i class="pi pi-check"></i>
+
+<pre v-code><code>
+&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
+
+</code></pre>
+
+            <i class="pi pi-check" style="font-size: 2rem"></i>
+
+            <h5>Spinning Animation</h5>
+            <p>Special pi-spin class applies continuous rotation to an icon.</p>
+<pre v-code><code>
+&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
+
+</code></pre>
+
+            <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+
+            <h5>Constants</h5>
+            <p>PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.</p>
+<pre v-code><code>
+&lt;Menu :model="items" /&gt;
+
+</code></pre>
+
+<pre v-code.script><code>
+import {PrimeIcons} from 'primevue/api';
+
+export default {
+	data() {
+		return {
+			items: [
+				{
+					label: 'Update',
+					icon: PrimeIcons.REFRESH,
+                    to: '/update'
+				},
+				{
+					label: 'Delete',
+					icon: PrimeIcons.TIMES,
+                    to: '/delete'
+				}
+			]
+		}
+	}
+}
+
+</code></pre>
+
+            <h5>List of Icons</h5>
+            <p>Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium">request new icons</a> at the issue tracker.</p>
+
+            <InputText v-model="filter" class="w-full p-3 mt-3 mb-5" placeholder="Search an icon" />
+
+            <div class="grid icons-list text-center">
+                <div class="col-6 sm:col-4 lg:col-3 xl:col-2 pb-5" v-for="icon of filteredIcons" :key="icon.properties.name">
+                    <i :class="'text-2xl mb-2 pi pi-' + icon.properties.name"></i>
+                    <div>pi-{{icon.properties.name}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            icons: null,
+            filter: null
+        }
+    },
+    mounted() {
+        fetch('data/icons.json', { headers: { 'Cache-Control' : 'no-cache' } }).then(res => res.json())
+            .then(d => {
+                let icons = d.icons;
+                let data = icons.filter(value => {
+                    return value.icon.tags.indexOf('deprecate') === -1;
+                });
+                data.sort((icon1, icon2) => {
+                    if(icon1.properties.name < icon2.properties.name)
+                        return -1;
+                    else if(icon1.properties.name < icon2.properties.name)
+                        return 1;
+                    else
+                        return 0;
+                });
+
+                this.icons = data;
+            });
+    },
+    computed: {
+        filteredIcons() {
+            if (this.filter)
+                return this.icons.filter(icon => icon.properties.name.indexOf(this.filter.toLowerCase()) > -1);
+            else
+                return this.icons;
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../assets/demo/documentation.scss';
+
+.icons-list {
+    i {
+        color: var(--text-color-secondary);
+    }
+}
+</style>
diff --git a/src/views/demo/Input.vue b/src/views/demo/Input.vue
new file mode 100644
index 0000000..e648ab0
--- /dev/null
+++ b/src/views/demo/Input.vue
@@ -0,0 +1,297 @@
+<template>
+    <div class="grid p-fluid">
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>InputText</h5>
+                <div class="grid formgrid">
+                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
+                        <InputText type="text" placeholder="Default"></InputText>
+                    </div>
+                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
+                        <InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
+                    </div>
+                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
+                        <InputText type="text" placeholder="Invalid" class="p-invalid" />
+                    </div>
+                </div>
+
+                <h5>Icons</h5>
+                <div class="grid formgrid">
+                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
+                        <span class="p-input-icon-left">
+                            <i class="pi pi-user" />
+                            <InputText type="text" placeholder="Username" />
+                        </span>
+                    </div>
+                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
+                        <span class="p-input-icon-right">
+                            <InputText type="text" placeholder="Search" />
+                            <i class="pi pi-search" />
+                        </span>
+                    </div>
+                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
+                        <span class="p-input-icon-left p-input-icon-right">
+                            <i class="pi pi-user" />
+                            <InputText type="text" placeholder="Search" />
+                            <i class="pi pi-search" />
+                        </span>
+                    </div>
+                </div>
+
+                <h5>Float Label</h5>
+                <span class="p-float-label">
+                    <InputText id="username" type="text" v-model="floatValue" />
+                    <label for="username">Username</label>
+                </span>
+
+                <h5>Textarea</h5>
+                <Textarea placeholder="Your Message" :autoResize="true" rows="3" cols="30" />
+
+                <h5>AutoComplete</h5>
+                <AutoComplete placeholder="Search" id="dd" :dropdown="true" :multiple="true" v-model="selectedAutoValue" :suggestions="autoFilteredValue" @complete="searchCountry($event)" field="name" />
+
+                <h5>Calendar</h5>
+                <Calendar :showIcon="true" :showButtonBar="true" v-model="calendarValue"></Calendar>
+
+                <h5>Spinner</h5>
+                <InputNumber v-model="inputNumberValue" showButtons mode="decimal"></InputNumber>
+
+                <h5>Chips</h5>
+                <Chips v-model="chipsValue" />
+            </div>
+
+            <div class="card">
+                <div class="grid">
+                    <div class="col-12">
+                        <h5>Slider</h5>
+                        <InputText v-model.number="sliderValue" />
+                        <Slider v-model="sliderValue" />
+                    </div>
+                    <div class="col-12 md:col-6">
+                        <h5>Rating</h5>
+                        <Rating v-model="ratingValue" />
+                    </div>
+                    <div class="col-12 md:col-6">
+                        <h5>ColorPicker</h5>
+                        <ColorPicker style="width: 2rem" v-model="colorValue" />
+                    </div>
+                    <div class="col-12">
+                        <h5>Knob</h5>
+                        <Knob v-model="knobValue" :step="10" :min="-50" :max="50" valueTemplate="{value}%" />
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>RadioButton</h5>
+                <div class="grid">
+                    <div class="col-12 md:col-4">
+                        <div class="field-radiobutton mb-0">
+                            <RadioButton id="option1" name="option" value="Chicago" v-model="radioValue" />
+                            <label for="option1">Chicago</label>
+                        </div>
+                    </div>
+                    <div class="col-12 md:col-4">
+                        <div class="field-radiobutton mb-0">
+                            <RadioButton id="option2" name="option" value="Los Angeles" v-model="radioValue" />
+                            <label for="option2">Los Angeles</label>
+                        </div>
+                    </div>
+                    <div class="col-12 md:col-4">
+                        <div class="field-radiobutton mb-0">
+                            <RadioButton id="option3" name="option" value="New York" v-model="radioValue" />
+                            <label for="option3">New York</label>
+                        </div>
+                    </div>
+                </div>
+
+                <h5>Checkbox</h5>
+                <div class="grid">
+                    <div class="col-12 md:col-4">
+                        <div class="field-checkbox mb-0">
+                            <Checkbox id="checkOption1" name="option" value="Chicago" v-model="checkboxValue" />
+                            <label for="checkOption1">Chicago</label>
+                        </div>
+                    </div>
+                    <div class="col-12 md:col-4">
+                        <div class="field-checkbox mb-0">
+                            <Checkbox id="checkOption2" name="option" value="Los Angeles" v-model="checkboxValue" />
+                            <label for="checkOption2">Los Angeles</label>
+                        </div>
+                    </div>
+                    <div class="col-12 md:col-4">
+                        <div class="field-checkbox mb-0">
+                            <Checkbox id="checkOption3" name="option" value="New York" v-model="checkboxValue" />
+                            <label for="checkOption3">New York</label>
+                        </div>
+                    </div>
+                </div>
+
+                <h5>Input Switch</h5>
+                <InputSwitch v-model="switchValue" />
+            </div>
+
+            <div class="card">
+                <h5>Listbox</h5>
+                <Listbox v-model="listboxValue" :options="listboxValues" optionLabel="name" :filter="true" />
+
+                <h5>Dropdown</h5>
+                <Dropdown v-model="dropdownValue" :options="dropdownValues" optionLabel="name" placeholder="Select" />
+
+                <h5>MultiSelect</h5>
+                <MultiSelect v-model="multiselectValue" :options="multiselectValues" optionLabel="name" placeholder="Select Countries" :filter="true">
+                    <template #value="slotProps">
+                        <div class="inline-flex align-items-center py-1 px-2 bg-primary text-primary border-round mr-2" v-for="option of slotProps.value" :key="option.code">
+                            <span :class="'mr-2 flag flag-' + option.code.toLowerCase()" style="width: 18px; height: 12px" />
+                            <div>{{ option.name }}</div>
+                        </div>
+                        <template v-if="!slotProps.value || slotProps.value.length === 0">
+                            <div class="p-1">Select Countries</div>
+                        </template>
+                    </template>
+                    <template #option="slotProps">
+                        <div class="flex align-items-center">
+                            <span :class="'mr-2 flag flag-' + slotProps.option.code.toLowerCase()" style="width: 18px; height: 12px" />
+                            <div>{{ slotProps.option.name }}</div>
+                        </div>
+                    </template>
+                </MultiSelect>
+
+                <h5>TreeSelect</h5>
+                <TreeSelect v-model="selectedNode" :options="treeSelectNodes" placeholder="Select Item"></TreeSelect>
+            </div>
+
+            <div class="card">
+                <h5>ToggleButton</h5>
+                <ToggleButton v-model="toggleValue" onLabel="Yes" offLabel="No" :style="{ width: '10em' }" />
+
+                <h5>SelectButton</h5>
+                <SelectButton v-model="selectButtonValue1" :options="selectButtonValues1" optionLabel="name" />
+
+                <h5>SelectButton - Multiple</h5>
+                <SelectButton v-model="selectButtonValue2" :options="selectButtonValues2" optionLabel="name" :multiple="true" />
+            </div>
+        </div>
+
+        <div class="col-12">
+            <div class="card">
+                <h5>Input Groups</h5>
+                <div class="grid p-fluid">
+                    <div class="col-12 md:col-6">
+                        <div class="p-inputgroup">
+                            <span class="p-inputgroup-addon">
+                                <i class="pi pi-user"></i>
+                            </span>
+                            <InputText placeholder="Username" />
+                        </div>
+                    </div>
+
+                    <div class="col-12 md:col-6">
+                        <div class="p-inputgroup">
+                            <span class="p-inputgroup-addon"><i class="pi pi-shopping-cart"></i></span>
+                            <span class="p-inputgroup-addon"><i class="pi pi-globe"></i></span>
+                            <InputText placeholder="Price" />
+                            <span class="p-inputgroup-addon">$</span>
+                            <span class="p-inputgroup-addon">.00</span>
+                        </div>
+                    </div>
+
+                    <div class="col-12 md:col-6">
+                        <div class="p-inputgroup">
+                            <Button label="Search" />
+                            <InputText placeholder="Keyword" />
+                        </div>
+                    </div>
+
+                    <div class="col-12 md:col-6">
+                        <div class="p-inputgroup">
+                            <span class="p-inputgroup-addon p-inputgroup-addon-checkbox">
+                                <Checkbox v-model="inputGroupValue" :binary="true" />
+                            </span>
+                            <InputText placeholder="Confirm" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue';
+import CountryService from '@/layout/service/CountryService';
+import NodeService from '@/layout/service/NodeService';
+
+const floatValue = ref(null);
+const autoValue = ref(null);
+const selectedAutoValue = ref(null);
+const autoFilteredValue = ref([]);
+const calendarValue = ref(null);
+const inputNumberValue = ref(null);
+const chipsValue = ref(null);
+const sliderValue = ref(50);
+const ratingValue = ref(null);
+const colorValue = ref('#1976D2');
+const radioValue = ref(null);
+const checkboxValue = ref([]);
+const switchValue = ref(false);
+const listboxValues = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+const listboxValue = ref(null);
+const dropdownValues = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+const dropdownValue = ref(null);
+const multiselectValues = ref([
+    { name: 'Australia', code: 'AU' },
+    { name: 'Brazil', code: 'BR' },
+    { name: 'China', code: 'CN' },
+    { name: 'Egypt', code: 'EG' },
+    { name: 'France', code: 'FR' },
+    { name: 'Germany', code: 'DE' },
+    { name: 'India', code: 'IN' },
+    { name: 'Japan', code: 'JP' },
+    { name: 'Spain', code: 'ES' },
+    { name: 'United States', code: 'US' }
+]);
+
+const multiselectValue = ref(null);
+const toggleValue = ref(false);
+const selectButtonValue1 = ref(null);
+const selectButtonValues1 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
+const selectButtonValue2 = ref(null);
+const selectButtonValues2 = ref([{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]);
+const knobValue = ref(50);
+const inputGroupValue = ref(false);
+const treeSelectNodes = ref(null);
+const selectedNode = ref(null);
+const countryService = new CountryService();
+const nodeService = new NodeService();
+
+onMounted(() => {
+    countryService.getCountries().then((data) => (autoValue.value = data));
+    nodeService.getTreeNodes().then((data) => (treeSelectNodes.value = data));
+});
+
+const searchCountry = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            this.autoFilteredValue = [...this.autoValue];
+        } else {
+            this.autoFilteredValue = this.autoValue.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+};
+</script>
diff --git a/src/views/demo/InvalidState.vue b/src/views/demo/InvalidState.vue
new file mode 100644
index 0000000..25023ab
--- /dev/null
+++ b/src/views/demo/InvalidState.vue
@@ -0,0 +1,100 @@
+<template>
+    <div class="grid p-fluid">
+        <div class="col">
+            <div class="card">
+                <h5>Invalid State</h5>
+                <div class="p-fluid grid">
+                    <div class="col-12 md:col-6">
+                        <div class="field">
+                            <label for="inputtext">InputText</label>
+                            <InputText id="inputtext" type="text" v-model="value1" class="p-invalid" />
+                        </div>
+                        <div class="field">
+                            <label for="autocomplete">AutoComplete</label>
+                            <AutoComplete id="autocomplete" v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" class="p-invalid" />
+                        </div>
+                        <div class="field">
+                            <label for="calendar">Calendar</label>
+                            <Calendar id="calendar" v-model="value3" class="p-invalid" :showIcon="true" />
+                        </div>
+                        <div class="field">
+                            <label for="chips">Chips</label>
+                            <Chips id="chips" v-model="value4" class="p-invalid" />
+                        </div>
+                        <div class="field">
+                            <label for="password">Password</label>
+                            <Password id="password" v-model="value10" class="p-invalid" />
+                        </div>
+                    </div>
+
+                    <div class="col-12 md:col-6">
+                        <div class="field">
+                            <label for="inputmask">InputMask</label>
+                            <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" class="p-invalid" />
+                        </div>
+                        <div class="field">
+                            <label for="inputnumber">InputNumber</label>
+                            <InputNumber id="inputnumber" v-model="value6" class="p-invalid" />
+                        </div>
+                        <div class="field">
+                            <label for="dropdown">Dropdown</label>
+                            <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" class="p-invalid" />
+                        </div>
+                        <div class="field">
+                            <label for="multiselect">MultiSelect</label>
+                            <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" class="p-invalid" />
+                        </div>
+                        <div class="field">
+                            <label for="textarea">Textarea</label>
+                            <Textarea id="textarea" v-model="value9" rows="3" class="p-invalid" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import CountryService from '@/layout/service/CountryService';
+
+const countries = ref(null);
+const filteredCountries = ref(null);
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+const value4 = ref(null);
+const value5 = ref(null);
+const value6 = ref(null);
+const value7 = ref(null);
+const value8 = ref(null);
+const value9 = ref(null);
+const value10 = ref(null);
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+const countryService = new CountryService();
+
+onMounted(() => {
+    countryService.getCountries().then((data) => {
+        countries.value = data;
+    });
+});
+
+const searchCountry = (event) => {
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            filteredCountries.value = [...countries];
+        } else {
+            filteredCountries.value = countries.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
+};
+</script>
diff --git a/src/views/demo/List.vue b/src/views/demo/List.vue
new file mode 100644
index 0000000..e408560
--- /dev/null
+++ b/src/views/demo/List.vue
@@ -0,0 +1,154 @@
+<template>
+    <div class="grid">
+        <div class="col-12">
+            <div class="card">
+                <h5>DataView</h5>
+                <DataView :value="dataviewValue" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
+                    <template #header>
+                        <div class="grid grid-nogutter">
+                            <div class="col-6 text-left">
+                                <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
+                            </div>
+                            <div class="col-6 text-right">
+                                <DataViewLayoutOptions v-model="layout" />
+                            </div>
+                        </div>
+                    </template>
+                    <template #list="slotProps">
+                        <div class="col-12">
+                            <div class="flex flex-column md:flex-row align-items-center p-3 w-full">
+                                <img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5" />
+                                <div class="flex-1 text-center md:text-left">
+                                    <div class="font-bold text-2xl">{{ slotProps.data.name }}</div>
+                                    <div class="mb-3">{{ slotProps.data.description }}</div>
+                                    <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" class="mb-2"></Rating>
+                                    <div class="flex align-items-center">
+                                        <i class="pi pi-tag mr-2"></i>
+                                        <span class="font-semibold">{{ slotProps.data.category }}</span>
+                                    </div>
+                                </div>
+                                <div class="flex flex-row md:flex-column justify-content-between w-full md:w-auto align-items-center md:align-items-end mt-5 md:mt-0">
+                                    <span class="text-2xl font-semibold mb-2 align-self-center md:align-self-end">${{ slotProps.data.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" label="Add to Cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'" class="mb-2"></Button>
+                                    <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+
+                    <template #grid="slotProps">
+                        <div class="col-12 md:col-4">
+                            <div class="card m-3 border-1 surface-border">
+                                <div class="flex align-items-center justify-content-between">
+                                    <div class="flex align-items-center">
+                                        <i class="pi pi-tag mr-2"></i>
+                                        <span class="font-semibold">{{ slotProps.data.category }}</span>
+                                    </div>
+                                    <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
+                                </div>
+                                <div class="text-center">
+                                    <img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-9 shadow-2 my-3 mx-0" />
+                                    <div class="text-2xl font-bold">{{ slotProps.data.name }}</div>
+                                    <div class="mb-3">{{ slotProps.data.description }}</div>
+                                    <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>
+                                </div>
+                                <div class="flex align-items-center justify-content-between">
+                                    <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
+                                    <Button icon="pi pi-shopping-cart" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </DataView>
+            </div>
+        </div>
+
+        <div class="col-12 lg:col-8">
+            <div class="card">
+                <h5>PickList</h5>
+                <PickList v-model="picklistValue" listStyle="height:250px" dataKey="code">
+                    <template #sourceheader> From </template>
+                    <template #targetheader> To </template>
+                    <template #item="slotProps">
+                        <div>{{ slotProps.item.name }}</div>
+                    </template>
+                </PickList>
+            </div>
+        </div>
+
+        <div class="col-12 lg:col-4">
+            <div class="card">
+                <h5>OrderList</h5>
+                <OrderList v-model="orderlistValue" listStyle="height:250px" dataKey="code" :rows="10">
+                    <template #header> Cities </template>
+                    <template #item="slotProps">
+                        <div>{{ slotProps.item.name }}</div>
+                    </template>
+                </OrderList>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import ProductService from '@/layout/service/ProductService';
+
+const picklistValue = ref([
+    [
+        { name: 'San Francisco', code: 'SF' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Paris', code: 'PRS' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Berlin', code: 'BRL' },
+        { name: 'Barcelona', code: 'BRC' },
+        { name: 'Rome', code: 'RM' }
+    ],
+    []
+]);
+
+const orderlistValue = ref([
+    { name: 'San Francisco', code: 'SF' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Paris', code: 'PRS' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Berlin', code: 'BRL' },
+    { name: 'Barcelona', code: 'BRC' },
+    { name: 'Rome', code: 'RM' }
+]);
+
+const dataviewValue = ref(null);
+const layout = ref('grid');
+const sortKey = ref(null);
+const sortOrder = ref(null);
+const sortField = ref(null);
+const sortOptions = ref([
+    { label: 'Price High to Low', value: '!price' },
+    { label: 'Price Low to High', value: 'price' }
+]);
+
+const productService = new ProductService();
+
+onMounted(() => {
+    productService.getProductsSmall().then((data) => (dataviewValue.value = data));
+});
+
+const onSortChange = (event) => {
+    const value = event.value.value;
+    const sortValue = event.value;
+
+    if (value.indexOf('!') === 0) {
+        sortOrder.value = -1;
+        sortField.value = value.substring(1, value.length);
+        sortKey.value = sortValue;
+    } else {
+        sortOrder.value = 1;
+        sortField.value = value;
+        sortKey.value = sortValue;
+    }
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/demo/styles/badges.scss';
+</style>
diff --git a/src/views/demo/Media.vue b/src/views/demo/Media.vue
new file mode 100644
index 0000000..0c1c96d
--- /dev/null
+++ b/src/views/demo/Media.vue
@@ -0,0 +1,112 @@
+<template>
+    <div class="grid p-fluid">
+        <div class="col-12">
+            <div class="card">
+                <h5>Carousel</h5>
+                <Carousel :value="products" :numVisible="3" :numScroll="3" :circular="false" :responsiveOptions="carouselResponsiveOptions">
+                    <template #item="product">
+                        <div class="product-item">
+                            <div class="product-item-content">
+                                <div class="mb-3">
+                                    <img :src="'images/product/' + product.data.image" :alt="product.data.name" class="product-image" />
+                                </div>
+                                <div>
+                                    <h4 class="mb-1">
+                                        {{ product.data.name }}
+                                    </h4>
+                                    <h6 class="mt-0 mb-3">${{ product.data.price }}</h6>
+                                    <span :class="'product-badge status-' + product.data.inventoryStatus.toLowerCase()">{{ product.data.inventoryStatus }}</span>
+                                    <div class="car-buttons mt-5">
+                                        <Button type="button" class="p-button p-button-rounded mr-2" icon="pi pi-search"></Button>
+                                        <Button type="button" class="p-button-success p-button-rounded mr-2" icon="pi pi-star-fill"></Button>
+                                        <Button type="button" class="p-button-help p-button-rounded" icon="pi pi-cog"></Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </Carousel>
+            </div>
+        </div>
+
+        <div class="col-12">
+            <div class="card">
+                <h5>Galleria</h5>
+                <Galleria :value="images" :responsiveOptions="galleriaResponsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px; margin: auto">
+                    <template #item="slotProps">
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                    </template>
+                    <template #thumbnail="slotProps">
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
+                    </template>
+                </Galleria>
+            </div>
+        </div>
+
+        <div class="col-12">
+            <div class="card">
+                <h5>Image</h5>
+                <div class="flex justify-content-center">
+                    <Image src="images/galleria/galleria11.jpg" alt="Image" width="250" preview />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import ProductService from '@/layout/service/ProductService';
+import PhotoService from '@/layout/service/PhotoService';
+import { ref, onMounted } from 'vue';
+
+const products = ref([]);
+const images = ref([]);
+const galleriaResponsiveOptions = ref([
+    {
+        breakpoint: '1024px',
+        numVisible: 5
+    },
+    {
+        breakpoint: '960px',
+        numVisible: 4
+    },
+    {
+        breakpoint: '768px',
+        numVisible: 3
+    },
+    {
+        breakpoint: '560px',
+        numVisible: 1
+    }
+]);
+const carouselResponsiveOptions = ref([
+    {
+        breakpoint: '1024px',
+        numVisible: 3,
+        numScroll: 3
+    },
+    {
+        breakpoint: '768px',
+        numVisible: 2,
+        numScroll: 2
+    },
+    {
+        breakpoint: '560px',
+        numVisible: 1,
+        numScroll: 1
+    }
+]);
+
+const productService = new ProductService();
+const photoService = new PhotoService();
+
+onMounted(() => {
+    productService.getProductsSmall().then((data) => (products.value = data));
+    photoService.getImages().then((data) => (images.value = data));
+});
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/demo/styles/badges.scss';
+@import '@/assets/demo/styles/items.scss';
+</style>
diff --git a/src/views/demo/Menu.vue b/src/views/demo/Menu.vue
new file mode 100644
index 0000000..a906aaa
--- /dev/null
+++ b/src/views/demo/Menu.vue
@@ -0,0 +1,546 @@
+<template>
+	<div class="grid p-fluid">
+		<div class="col-12">
+			<div class="card card-w-title">
+				<h5>Menubar</h5>
+				<Menubar :model="nestedMenuitems">
+					<template #end>
+						<span class="p-input-icon-left">
+							<i class="pi pi-search" />
+							<InputText type="text" placeholder="Search" />
+						</span>
+					</template>
+				</Menubar>
+			</div>
+		</div>
+
+		<div class="col-12">
+			<div class="card card-w-title">
+				<h5>Breadcrumb</h5>
+				<Breadcrumb :home="breadcrumbHome" :model="breadcrumbItems" />
+			</div>
+		</div>
+
+		<div class="col-12 md:col-6">
+			<div class="card card-w-title">
+				<h5>Steps</h5>
+				<p>Steps and TabMenu are integrated with the same child routes.</p>
+				<Steps :model="nestedRouteItems" :readonly="false" />
+				<router-view/>
+			</div>
+		</div>
+
+		<div class="col-12 md:col-6">
+			<div class="card card-w-title">
+				<h5>TabMenu</h5>
+				<p>Steps and TabMenu are integrated with the same child routes.</p>
+				<TabMenu :model="nestedRouteItems" />
+				<router-view/>
+			</div>
+		</div>
+
+		<div class="col-12 md:col-4">
+			<div class="card">
+				<h5>Tiered Menu</h5>
+				<TieredMenu :model="tieredMenuItems" />
+			</div>
+		</div>
+
+		<div class="col-12 md:col-4">
+			<div class="card">
+				<h5>Plain Menu</h5>
+				<Menu :model="menuitems" />
+			</div>
+		</div>
+
+		<div class="col-12 md:col-4">
+			<div class="card">
+				<h5>Overlay Menu</h5>
+
+				<Menu ref="menu" :model="overlayMenuItems" :popup="true" />
+				<Button type="button" label="Options" icon="pi pi-angle-down" @click="toggleMenu" style="width: auto"/>
+			</div>
+
+			<div class="card" @contextmenu="onContextRightClick">
+				<h5>ContextMenu</h5>
+				Right click to display.
+				<ContextMenu ref="contextMenu" :model="contextMenuItems" />
+			</div>
+		</div>
+
+		<div class="col-12 md:col-6">
+			<div class="card">
+				<h5>MegaMenu - Horizontal</h5>
+				<MegaMenu :model="megamenuItems" />
+
+				<h5 style="margin-top: 1.55em">MegaMenu - Vertical</h5>
+				<MegaMenu :model="megamenuItems" orientation="vertical" />
+			</div>
+		</div>
+
+		<div class="col-12 md:col-6">
+			<div class="card">
+				<h5>PanelMenu</h5>
+				<PanelMenu :model="panelMenuitems" />
+			</div>
+		</div>
+
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				nestedMenuitems: [
+					{
+						label:'Customers',
+						icon:'pi pi-fw pi-table',
+						items:[
+							{
+								label:'New',
+								icon:'pi pi-fw pi-user-plus',
+								items:[
+									{
+										label:'Customer',
+										icon:'pi pi-fw pi-plus'
+									},
+									{
+										label:'Duplicate',
+										icon:'pi pi-fw pi-copy'
+									},
+
+								]
+							},
+							{
+								label:'Edit',
+								icon:'pi pi-fw pi-user-edit'
+							}
+						]
+					},
+					{
+						label:'Orders',
+						icon:'pi pi-fw pi-shopping-cart',
+						items:[
+							{
+								label:'View',
+								icon:'pi pi-fw pi-list'
+							},
+							{
+								label:'Search',
+								icon:'pi pi-fw pi-search'
+							},
+
+						]
+					},
+					{
+						label:'Shipments',
+						icon:'pi pi-fw pi-envelope',
+						items:[
+							{
+								label:'Tracker',
+								icon:'pi pi-fw pi-compass'
+
+							},
+							{
+								label:'Map',
+								icon:'pi pi-fw pi-map-marker'
+
+							},
+							{
+								label:'Manage',
+								icon:'pi pi-fw pi-pencil'
+							}
+						]
+					},
+					{
+						label:'Profile',
+						icon:'pi pi-fw pi-user',
+						items:[
+							{
+								label:'Settings',
+								icon:'pi pi-fw pi-cog'
+							},
+							{
+								label:'Billing',
+								icon:'pi pi-fw pi-file'
+							}
+						]
+					},
+					{
+						label:'Quit',
+						icon:'pi pi-fw pi-sign-out'
+					}
+				],
+				breadcrumbHome: {icon: 'pi pi-home', to: '/'},
+				breadcrumbItems: [
+					{label:'Computer'},
+					{label:'Notebook'},
+					{label:'Accessories'},
+					{label:'Backpacks'},
+					{label:'Item'}
+				],
+				nestedRouteItems: [
+					{
+						label: 'Personal',
+						to: '/menu'
+					},
+					{
+						label: 'Seat',
+						to: '/menu/seat'
+					},
+					{
+						label: 'Payment',
+						to: '/menu/payment'
+					},
+					{
+						label: 'Confirmation',
+						to: '/menu/confirmation'
+					}
+				],
+				tieredMenuItems: [
+					{
+						label:'Customers',
+						icon:'pi pi-fw pi-table',
+						items:[
+							{
+								label:'New',
+								icon:'pi pi-fw pi-user-plus',
+								items:[
+									{
+										label:'Customer',
+										icon:'pi pi-fw pi-plus'
+									},
+									{
+										label:'Duplicate',
+										icon:'pi pi-fw pi-copy'
+									},
+
+								]
+							},
+							{
+								label:'Edit',
+								icon:'pi pi-fw pi-user-edit'
+							}
+						]
+					},
+					{
+						label:'Orders',
+						icon:'pi pi-fw pi-shopping-cart',
+						items:[
+							{
+								label:'View',
+								icon:'pi pi-fw pi-list'
+							},
+							{
+								label:'Search',
+								icon:'pi pi-fw pi-search'
+							},
+
+						]
+					},
+					{
+						label:'Shipments',
+						icon:'pi pi-fw pi-envelope',
+						items:[
+							{
+								label:'Tracker',
+								icon:'pi pi-fw pi-compass'
+
+							},
+							{
+								label:'Map',
+								icon:'pi pi-fw pi-map-marker'
+
+							},
+							{
+								label:'Manage',
+								icon:'pi pi-fw pi-pencil'
+							}
+						]
+					},
+					{
+						label:'Profile',
+						icon:'pi pi-fw pi-user',
+						items:[
+							{
+								label:'Settings',
+								icon:'pi pi-fw pi-cog'
+							},
+							{
+								label:'Billing',
+								icon:'pi pi-fw pi-file'
+							}
+						]
+					},
+					{
+						separator:true
+					},
+					{
+						label:'Quit',
+						icon:'pi pi-fw pi-sign-out'
+					}
+				],
+				overlayMenuItems: [
+					{
+						label: 'Save',
+						icon: 'pi pi-save'
+					},
+					{
+						label: 'Update',
+						icon: 'pi pi-refresh'
+					},
+					{
+						label: 'Delete',
+						icon: 'pi pi-trash'
+					},
+					{
+						separator: true
+					},
+					{
+						label: 'Home',
+						icon: 'pi pi-home'
+					},
+				],
+				menuitems: [
+					{
+						label:'Customers',
+						items:[
+							{
+								label:'New',
+								icon:'pi pi-fw pi-plus',
+							},
+							{
+								label:'Edit',
+								icon:'pi pi-fw pi-user-edit'
+							}
+						]
+					},
+					{
+						label:'Orders',
+						items:[
+							{
+								label:'View',
+								icon:'pi pi-fw pi-list'
+							},
+							{
+								label:'Search',
+								icon:'pi pi-fw pi-search'
+							},
+
+						]
+					}
+				],
+				contextMenuItems: [
+					{
+						label: 'Save',
+						icon: 'pi pi-save'
+					},
+					{
+						label: 'Update',
+						icon: 'pi pi-refresh'
+					},
+					{
+						label: 'Delete',
+						icon: 'pi pi-trash'
+					},
+					{
+						separator: true
+					},
+					{
+						label: 'Options',
+						icon: 'pi pi-cog'
+					},
+				],
+				megamenuItems: [
+					{
+						label: 'Fashion', icon: 'pi pi-fw pi-tag',
+						items: [
+							[
+								{
+									label: 'Woman',
+									items: [{label: 'Woman Item'}, {label: 'Woman Item'}, {label: 'Woman Item'}]
+								},
+								{
+									label: 'Men',
+									items: [{label: 'Men Item'}, {label: 'Men Item'}, {label: 'Men Item'}]
+								}
+							],
+							[
+								{
+									label: 'Kids',
+									items: [{label: 'Kids Item'}, {label: 'Kids Item'} ]
+								},
+								{
+									label: 'Luggage',
+									items: [{label: 'Luggage Item'}, {label: 'Luggage Item'}, {label: 'Luggage Item'} ]
+								}
+							]
+						]
+					},
+					{
+						label: 'Electronics', icon: 'pi pi-fw pi-desktop',
+						items: [
+							[
+								{
+									label: 'Computer',
+									items: [{label: 'Computer Item'}, {label: 'Computer Item'}]
+								},
+								{
+									label: 'Camcorder',
+									items: [{label: 'Camcorder Item'}, {label: 'Camcorder Item'}, {label: 'Camcorder Item'}, ]
+								},
+							],
+							[
+								{
+									label: 'TV',
+									items: [{label: 'TV Item'}, {label: 'TV Item'}]
+								},
+								{
+									label: 'Audio',
+									items: [{label: 'Audio Item'}, {label: 'Audio Item'}, {label: 'Audio Item'} ]
+								}
+							],
+							[
+								{
+									label: 'Sports.7',
+									items: [{label: 'Sports.7.1'}, {label: 'Sports.7.2'}]
+								}
+							]
+						]
+					},
+					{
+						label: 'Furniture', icon: 'pi pi-fw pi-image',
+						items: [
+							[
+								{
+									label: 'Living Room',
+									items: [{label: 'Living Room Item'}, {label: 'Living Room Item'}, ]
+								},
+								{
+									label: 'Kitchen',
+									items: [{label: 'Kitchen Item'}, {label: 'Kitchen Item'}, {label: 'Kitchen Item'} ]
+								}
+							],
+							[
+								{
+									label: 'Bedroom',
+									items: [{label: 'Bedroom Item'}, {label: 'Bedroom Item'}]
+								},
+								{
+									label: 'Outdoor',
+									items: [{label: 'Outdoor Item'}, {label: 'Outdoor Item'}, {label: 'Outdoor Item'} ]
+								}
+							]
+						]
+					},
+					{
+						label: 'Sports', icon: 'pi pi-fw pi-star',
+						items: [
+							[
+								{
+									label: 'Basketball',
+									items: [{label: 'Basketball Item'}, {label: 'Basketball Item'}]
+								},
+								{
+									label: 'Football',
+									items: [{label: 'Football Item'}, {label: 'Football Item'}, {label: 'Football Item'}]
+								}
+							],
+							[
+								{
+									label: 'Tennis',
+									items: [{label: 'Tennis Item'}, {label: 'Tennis Item'}]
+								}
+							]
+						]
+					}
+				],
+				panelMenuitems: [
+					{
+						label:'Customers',
+						icon:'pi pi-fw pi-table',
+						items:[
+							{
+								label:'New',
+								icon:'pi pi-fw pi-user-plus',
+								items:[
+									{
+										label:'Customer',
+										icon:'pi pi-fw pi-plus'
+									},
+									{
+										label:'Duplicate',
+										icon:'pi pi-fw pi-copy'
+									},
+
+								]
+							},
+							{
+								label:'Edit',
+								icon:'pi pi-fw pi-user-edit'
+							}
+						]
+					},
+					{
+						label:'Orders',
+						icon:'pi pi-fw pi-shopping-cart',
+						items:[
+							{
+								label:'View',
+								icon:'pi pi-fw pi-list'
+							},
+							{
+								label:'Search',
+								icon:'pi pi-fw pi-search'
+							},
+
+						]
+					},
+					{
+						label:'Shipments',
+						icon:'pi pi-fw pi-envelope',
+						items:[
+							{
+								label:'Tracker',
+								icon:'pi pi-fw pi-compass'
+
+							},
+							{
+								label:'Map',
+								icon:'pi pi-fw pi-map-marker'
+
+							},
+							{
+								label:'Manage',
+								icon:'pi pi-fw pi-pencil'
+							}
+						]
+					},
+					{
+						label:'Profile',
+						icon:'pi pi-fw pi-user',
+						items:[
+							{
+								label:'Settings',
+								icon:'pi pi-fw pi-cog'
+							},
+							{
+								label:'Billing',
+								icon:'pi pi-fw pi-file'
+							}
+						]
+					}
+				],
+			}
+		},
+		methods: {
+			toggleMenu(event) {
+				this.$refs.menu.toggle(event);
+			},
+			onContextRightClick(event) {
+				this.$refs.contextMenu.show(event);
+			}
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/src/views/demo/Messages.vue b/src/views/demo/Messages.vue
new file mode 100644
index 0000000..f51f5b8
--- /dev/null
+++ b/src/views/demo/Messages.vue
@@ -0,0 +1,101 @@
+<template>
+	<div class="grid">
+		<div class="col-12 lg:col-6">
+			<div class="card">
+				<h5>Toast</h5>
+
+				<Toast />
+				<Button @click="showSuccess()" label="Success" class="p-button-success mr-2" />
+				<Button @click="showInfo()" label="Info" class="p-button-info mr-2" />
+				<Button @click="showWarn()" label="Warn" class="p-button-warning mr-2" />
+				<Button @click="showError()" label="Error" class="p-button-danger mr-2" />
+			</div>
+		</div>
+
+		<div class="col-12 lg:col-6">
+			<div class="card">
+				<h5>Messages</h5>
+
+				<Button label="Success" @click="addMessage('success')" class="p-button-success mr-2"/>
+				<Button label="Info" @click="addMessage('info')" class="p-button-info mr-2"/>
+				<Button label="Warn" @click="addMessage('warn')" class="p-button-warning mr-2"/>
+				<Button label="Error" @click="addMessage('error')" class="p-button-danger mr-2"/>
+
+				<transition-group name="p-message" tag="div">
+					<Message v-for="msg of message" :severity="msg.severity" :key="msg.content">{{msg.content}}</Message>
+				</transition-group>
+			</div>
+		</div>
+
+		<div class="col-12 lg:col-8">
+			<div class="card">
+				<h5>Inline</h5>
+				<div class="field grid">
+					<label for="username1" class="col-fixed w-9rem">Username</label>
+					<div class="col">
+						<InputText id="username1" v-model="username" :required="true" class="p-invalid mr-2"></InputText>
+						<InlineMessage>Username is required</InlineMessage>
+					</div>
+				</div>
+				<div class="field grid">
+					<label for="email" class="col-fixed w-9rem">Email</label>
+					<div class="col">
+						<InputText id="email" v-model="email" :required="true" class="p-invalid mr-2"></InputText>
+						<InlineMessage/>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="col-12 lg:col-4">
+			<div class="card">
+				<h5>Help Text</h5>
+				<div class="field p-fluid">
+					<label for="username2">Username</label>
+					<InputText id="username2" type="username" class="p-error" aria-describedby="username-help" />
+					<small id="username-help" class="p-error">Enter your username to reset your password.</small>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				message: [],
+				username:null,
+				email:null
+			}
+		},
+		methods: {
+			addMessage(type) {
+				if(type === 'success') {
+					this.message = [{severity: 'success', detail: 'Success Message', content: 'Message sent', id: this.count++}]
+				}
+				else if(type === 'info') {
+					this.message = [{severity: 'info', detail: 'Info Message', content: 'PrimeVue rocks', id: this.count++}]
+				}
+				else if(type === 'warn') {
+					this.message = [{severity: 'warn', detail: 'Warn Message', content: 'There are unsaved changes', id: this.count++}]
+				}
+				else if(type === 'error') {
+					this.message = [{severity: 'error', detail: 'Error Message', content: 'Validation failed', id: this.count++}]
+				}
+			},
+			showSuccess() {
+				this.$toast.add({severity:'success', summary: 'Success Message', detail:'Message Detail', life: 3000});
+			},
+			showInfo() {
+				this.$toast.add({severity:'info', summary: 'Info Message', detail:'Message Detail', life: 3000});
+			},
+			showWarn() {
+				this.$toast.add({severity:'warn', summary: 'Warn Message', detail:'Message Detail', life: 3000});
+			},
+			showError() {
+				this.$toast.add({severity:'error', summary: 'Error Message', detail:'Message Detail', life: 3000});
+			},
+		}
+	}
+</script>
diff --git a/src/views/demo/Misc.vue b/src/views/demo/Misc.vue
new file mode 100644
index 0000000..df4df11
--- /dev/null
+++ b/src/views/demo/Misc.vue
@@ -0,0 +1,191 @@
+<template>
+	<div class="grid">
+    <div class="col-12">
+        <div class="card">
+            <h5>ProgressBar</h5>
+            <div class="grid">
+                <div class="col">
+                    <ProgressBar :value="value"></ProgressBar>
+                </div>
+                <div class="col">
+                    <ProgressBar :value="50" :showValue="false"></ProgressBar>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h4>Badge</h4>
+            <h5>Numbers</h5>
+            <div class="badges">
+                <Badge :value="2" class="mr-2"></Badge>
+                <Badge :value="8" severity="success" class="mr-2"></Badge>
+                <Badge :value="4" severity="info" class="mr-2"></Badge>
+                <Badge :value="12" severity="warning" class="mr-2"></Badge>
+                <Badge :value="3" severity="danger"></Badge>
+            </div>
+
+            <h5>Positioned Badge</h5>
+            <i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
+            <i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
+            <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
+
+
+            <h5>Inline Button Badge</h5>
+            <Button label="Emails" badge="8" class="mr-2"></Button>
+            <Button label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></Button>
+
+            <h5>Sizes</h5>
+            <div class="badges">
+                <Badge :value="2" class="mr-2"></Badge>
+                <Badge :value="4" size="large" severity="warning" class="mr-2"></Badge>
+                <Badge :value="6" size="xlarge" severity="success"></Badge>
+            </div>
+        </div>
+
+        <div class="card">
+            <h4>Avatar</h4>
+            <h5>Avatar Group</h5>
+            <AvatarGroup class="mb-3">
+                <Avatar image="images/avatar/amyelsner.png" size="large" shape="circle"></Avatar>
+                <Avatar image="images/avatar/asiyajavayant.png" size="large" shape="circle"></Avatar>
+                <Avatar image="images/avatar/onyamalimba.png" size="large" shape="circle"></Avatar>
+                <Avatar image="images/avatar/ionibowcher.png" size="large" shape="circle"></Avatar>
+                <Avatar image="images/avatar/xuxuefeng.png" size="large" shape="circle"></Avatar>
+                <Avatar label="+2" shape="circle" size="large" :style="{'background-color':'#9c27b0', 'color': '#ffffff'}"></Avatar>
+            </AvatarGroup>
+
+            <h5>Label - Circle</h5>
+            <Avatar label="P" class="mr-2" size="xlarge" shape="circle"></Avatar>
+            <Avatar label="V" class="mr-2" size="large" :style="{'background-color':'#2196F3', 'color': '#ffffff'}" shape="circle"></Avatar>
+            <Avatar label="U" class="mr-2" :style="{'background-color': '#9c27b0', 'color': '#ffffff'}" shape="circle"></Avatar>
+
+            <h5>Icon - Badge</h5>
+            <Avatar icon="pi pi-user" class="mr-2" size="xlarge" v-badge.success="4"></Avatar>
+        </div>
+
+        <div class="card">
+            <h4>ScrollTop</h4>
+            <ScrollPanel :style="{width: '250px', height: '200px'}">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Vitae et leo duis ut diam.
+                    Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
+                    Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
+                    Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
+                    Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
+                    Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
+                    Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
+                    Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
+                    Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
+                    Mattis aliquam faucibus purus in massa tempor nec.
+                </p>
+                <ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up"></ScrollTop>
+            </ScrollPanel>
+        </div>
+    </div>
+    <div class="col-12 lg:col-6">
+        <div class="card">
+            <h4>Tag</h4>
+            <h5>Tags</h5>
+            <Tag class="mr-2" value="Primary"></Tag>
+            <Tag class="mr-2" severity="success" value="Success"></Tag>
+            <Tag class="mr-2" severity="info" value="Info"></Tag>
+            <Tag class="mr-2" severity="warning" value="Warning"></Tag>
+            <Tag severity="danger" value="Danger"></Tag>
+
+            <h5>Pills</h5>
+            <Tag class="mr-2" value="Primary" :rounded="true"></Tag>
+            <Tag class="mr-2" severity="success" value="Success" :rounded="true"></Tag>
+            <Tag class="mr-2" severity="info" value="Info" :rounded="true"></Tag>
+            <Tag class="mr-2" severity="warning" value="Warning" :rounded="true"></Tag>
+            <Tag severity="danger" value="Danger" :rounded="true"></Tag>
+
+            <h5>Icons</h5>
+            <Tag class="mr-2" icon="pi pi-user" value="Primary"></Tag>
+            <Tag class="mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
+            <Tag class="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+            <Tag class="mr-2" con="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
+            <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+        </div>
+
+        <div class="card">
+            <h4>Chip</h4>
+            <h5>Basic</h5>
+            <div class="flex align-items-center flex-column sm:flex-row">
+                <Chip label="Action" class="mr-2 mb-2"></Chip>
+                <Chip label="Comedy" class="mr-2 mb-2"></Chip>
+                <Chip label="Mystery" class="mr-2 mb-2"></Chip>
+                <Chip label="Thriller" :removable="true" class="mb-2"></Chip>
+            </div>
+
+            <h5>Icon</h5>
+            <div class="flex align-items-center flex-column sm:flex-row">
+                <Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2"></Chip>
+                <Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></Chip>
+                <Chip label="Google" icon="pi pi-google" class="mr-2 mb-2"></Chip>
+                <Chip label="Microsoft" icon="pi pi-microsoft" :removable="true" class="mb-2"></Chip>
+            </div>
+
+            <h5>Image</h5>
+            <div class="flex align-items-center flex-column sm:flex-row">
+                <Chip label="Amy Elsner" image="images/avatar/amyelsner.png" class="mr-2 mb-2"></Chip>
+                <Chip label="Asiya Javayant" image="images/avatar/asiyajavayant.png" class="mr-2 mb-2"></Chip>
+                <Chip label="Onyama Limba" image="images/avatar/onyamalimba.png" class="mr-2 mb-2"></Chip>
+            </div>
+        </div>
+
+        <div class="card">
+            <h4>Skeleton</h4>
+            <div class="border-round border-1 surface-border p-4">
+                <div class="flex mb-3">
+                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
+                    <div>
+                        <Skeleton width="10rem" class="mb-2"></Skeleton>
+                        <Skeleton width="5rem" class="mb-2"></Skeleton>
+                        <Skeleton height=".5rem"></Skeleton>
+                    </div>
+                </div>
+                <Skeleton width="100%" height="150px"></Skeleton>
+                <div class="flex justify-content-between mt-3">
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				value: 0
+			}
+		},
+		interval: null,
+		methods: {
+			startProgress() {
+				this.interval = setInterval(() => {
+					let newValue = this.value + Math.floor(Math.random() * 10) + 1;
+					if (newValue >= 100) {
+						newValue = 100;
+					}
+					this.value = newValue;
+				}, 2000);
+			},
+			endProgress() {
+				clearInterval(this.interval);
+				this.interval = null;
+			}
+		},
+		mounted() {
+			this.startProgress();
+		},
+		beforeUnmount() {
+			this.endProgress();
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/src/views/demo/Overlay.vue b/src/views/demo/Overlay.vue
new file mode 100644
index 0000000..e69622e
--- /dev/null
+++ b/src/views/demo/Overlay.vue
@@ -0,0 +1,187 @@
+<template>
+    <div class="grid">
+        <div class="col-12 lg:col-6">
+            <div class="card p-fluid">
+                <h5>Dialog</h5>
+                <Dialog header="Dialog" v-model:visible="display" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true">
+                    <p class="line-height-3 m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                    <template #footer>
+                        <Button label="Ok" @click="close" icon="pi pi-check" class="p-button-outlined" />
+                    </template>
+                </Dialog>
+                <Button label="Show" icon="pi pi-external-link" style="width: auto" @click="open" />
+            </div>
+            <div class="card p-fluid">
+                <h5>Overlay Panel</h5>
+                <div class="grid formgrid">
+                    <div class="col-6">
+                        <Button type="button" label="Image" @click="toggle" class="p-button-success" />
+                        <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true">
+                            <img src="images/nature/nature9.jpg" alt="Nature 9" />
+                        </OverlayPanel>
+                    </div>
+                    <div class="col-6">
+                        <Button type="button" label="DataTable" @click="toggleDataTable" class="p-button-success" />
+                        <OverlayPanel ref="op2" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
+                            <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
+                                <Column field="name" header="Name" :sortable="true" headerStyle="min-width:10rem;"></Column>
+                                <Column header="Image" headerStyle="min-width:10rem;">
+                                    <template #body="slotProps">
+                                        <img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.image" width="100" class="shadow-2" />
+                                    </template>
+                                </Column>
+                                <Column field="price" header="Price" :sortable="true" headerStyle="min-width:8rem;">
+                                    <template #body="slotProps">
+                                        {{ formatCurrency(slotProps.data.price) }}
+                                    </template>
+                                </Column>
+                            </DataTable>
+                        </OverlayPanel>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-12 lg:col-6">
+            <div class="card p-fluid">
+                <h5>Confirmation</h5>
+                <Button label="Delete" icon="pi pi-trash" class="p-button-danger" style="width: auto" @click="openConfirmation" />
+                <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{ width: '350px' }" :modal="true">
+                    <div class="flex align-items-center justify-content-center">
+                        <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
+                        <span>Are you sure you want to proceed?</span>
+                    </div>
+                    <template #footer>
+                        <Button label="No" icon="pi pi-times" @click="closeConfirmation" class="p-button-text" />
+                        <Button label="Yes" icon="pi pi-check" @click="closeConfirmation" class="p-button-text" autofocus />
+                    </template>
+                </Dialog>
+            </div>
+            <div class="card">
+                <h5>Sidebar</h5>
+                <Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
+                    <h1 style="font-weight: normal">Left Sidebar</h1>
+                </Sidebar>
+
+                <Sidebar v-model:visible="visibleRight" :baseZIndex="1000" position="right">
+                    <h1 style="font-weight: normal">Right Sidebar</h1>
+                </Sidebar>
+
+                <Sidebar v-model:visible="visibleTop" :baseZIndex="1000" position="top">
+                    <h1 style="font-weight: normal">Top Sidebar</h1>
+                </Sidebar>
+
+                <Sidebar v-model:visible="visibleBottom" :baseZIndex="1000" position="bottom">
+                    <h1 style="font-weight: normal">Bottom Sidebar</h1>
+                </Sidebar>
+
+                <Sidebar v-model:visible="visibleFull" :baseZIndex="1000" position="full">
+                    <h1 style="font-weight: normal">Full Screen</h1>
+                </Sidebar>
+
+                <Button icon="pi pi-arrow-right" class="p-button-warning" @click="visibleLeft = true" style="margin-right: 0.25em" />
+                <Button icon="pi pi-arrow-left" class="p-button-warning" @click="visibleRight = true" style="margin-right: 0.25em" />
+                <Button icon="pi pi-arrow-down" class="p-button-warning" @click="visibleTop = true" style="margin-right: 0.25em" />
+                <Button icon="pi pi-arrow-up" class="p-button-warning" @click="visibleBottom = true" style="margin-right: 0.25em" />
+                <Button icon="pi pi-external-link" class="p-button-warning" @click="visibleFull = true" />
+            </div>
+        </div>
+        <div class="col-12 lg:col-6">
+            <div class="card">
+                <h5>Tooltip</h5>
+                <div class="formgroup-inline">
+                    <div class="field">
+                        <InputText type="text" placeholder="Username" v-tooltip="'Your username'" />
+                    </div>
+
+                    <Button type="button" label="Save" icon="pi pi-check" v-tooltip="'Click to proceed'" />
+                </div>
+            </div>
+        </div>
+        <div class="col-12 lg:col-6">
+            <div class="card">
+                <h5>ConfirmPopup</h5>
+                <ConfirmPopup></ConfirmPopup>
+                <Toast />
+                <Button ref="popup" @click="confirm($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import ProductService from '@/layout/service/ProductService';
+import { ref, onMounted } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+
+const display = ref(false);
+const displayConfirmation = ref(false);
+const visibleLeft = ref(false);
+const visibleRight = ref(false);
+const visibleTop = ref(false);
+const visibleBottom = ref(false);
+const visibleFull = ref(false);
+const products = ref(null);
+const selectedProduct = ref(null);
+const op = ref(null);
+const op2 = ref(null);
+const popup = ref(null);
+
+const productService = new ProductService();
+const toast = useToast();
+const confirmPopup = useConfirm();
+
+onMounted(() => {
+    productService.getProductsSmall().then((data) => (products.value = data));
+});
+
+const open = () => {
+    display.value = true;
+};
+
+const close = () => {
+    display.value = false;
+};
+
+const openConfirmation = () => {
+    displayConfirmation.value = true;
+};
+
+const closeConfirmation = () => {
+    displayConfirmation.value = false;
+};
+
+const toggle = (event) => {
+    op.value.toggle(event);
+};
+
+const toggleDataTable = (event) => {
+    op2.value.toggle(event);
+};
+
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+
+const onProductSelect = (event) => {
+    op.value.hide();
+    toast.add({ severity: 'info', summary: 'Product Selected', detail: event.data.name, life: 3000 });
+};
+
+const confirm = (event) => {
+    confirmPopup.require({
+        target: event.target,
+        message: 'Are you sure you want to proceed?',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'info', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+</script>
diff --git a/src/views/demo/Panels.vue b/src/views/demo/Panels.vue
new file mode 100644
index 0000000..14a14e5
--- /dev/null
+++ b/src/views/demo/Panels.vue
@@ -0,0 +1,229 @@
+<template>
+    <div class="grid">
+        <div class="col-12">
+            <div class="card">
+                <h5>Toolbar</h5>
+                <Toolbar>
+                    <template v-slot:start>
+                        <Button label="New" icon="pi pi-plus" class="mr-2" />
+                        <Button label="Open" icon="pi pi-folder-open" class="p-button-secondary mr-2" />
+
+                        <i class="pi pi-bars p-toolbar-separator mr-2"></i>
+
+                        <Button icon="pi pi-check" class="p-button-success mr-2" />
+                        <Button icon="pi pi-trash" class="p-button-warning mr-2" />
+                        <Button icon="pi pi-print" class="p-button-danger" />
+                    </template>
+                    <template v-slot:end>
+                        <SplitButton label="Options" :model="toolbarItems"></SplitButton>
+                    </template>
+                </Toolbar>
+            </div>
+        </div>
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>AccordionPanel</h5>
+                <Accordion :activeIndex="0">
+                    <AccordionTab header="Header I">
+                        <p class="line-height-3 m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab header="Header II">
+                        <p class="line-height-3 m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab header="Header III">
+                        <p class="line-height-3 m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </AccordionTab>
+                </Accordion>
+            </div>
+            <div class="card">
+                <h5>TabView</h5>
+                <TabView>
+                    <TabPanel header="Header I">
+                        <p class="line-height-3 m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p></TabPanel
+                    >
+                    <TabPanel header="Header II">
+                        <p class="line-height-3 m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                    </TabPanel>
+                    <TabPanel header="Header III">
+                        <p class="line-height-3 m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </TabPanel>
+                </TabView>
+            </div>
+        </div>
+        <div class="col-12 md:col-6">
+            <div class="card">
+                <h5>Panel</h5>
+                <Panel header="Header" :toggleable="true">
+                    <p class="line-height-3 m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Panel>
+            </div>
+            <div class="card">
+                <h5>Fieldset</h5>
+                <Fieldset legend="Legend" :toggleable="true">
+                    <p class="line-height-3 m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Fieldset>
+            </div>
+
+            <Card>
+                <template v-slot:title>
+                    <div class="flex align-items-center justify-content-between mb-0">
+                        <h5>Card</h5>
+                        <Button icon="pi pi-plus" class="p-button-text" @click="toggle" />
+                    </div>
+                    <Menu id="config_menu" ref="menuRef" :model="cardMenu" :popup="true" />
+                </template>
+
+                <template v-slot:content>
+                    <p class="line-height-3 m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </template>
+            </Card>
+        </div>
+
+        <div class="col-12">
+            <div class="card">
+                <h5>Divider</h5>
+                <div class="grid">
+                    <div class="col-5 flex align-items-center justify-content-center">
+                        <div class="p-fluid">
+                            <div class="field">
+                                <label for="username">Username</label>
+                                <InputText id="username" type="text" />
+                            </div>
+                            <div class="field">
+                                <label for="password">Password</label>
+                                <InputText id="password" type="password" />
+                            </div>
+                            <Button label="Login" class="mt-2"></Button>
+                        </div>
+                    </div>
+
+                    <div class="col-2">
+                        <Divider layout="vertical">
+                            <b>OR</b>
+                        </Divider>
+                    </div>
+                    <div class="col-5 align-items-center justify-content-center">
+                        <p class="line-height-3 m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+
+                        <Divider layout="horizontal" align="center">
+                            <span class="p-tag">Badge</span>
+                        </Divider>
+
+                        <p class="line-height-3 m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+
+                        <Divider align="right">
+                            <Button label="Button" icon="pi pi-search" class="p-button-outlined"></Button>
+                        </Divider>
+
+                        <p class="line-height-3 m-0">
+                            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                            voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-12">
+            <div class="card">
+                <h5>Splitter</h5>
+                <div class="grid">
+                    <Splitter style="height: 300px" class="mb-5">
+                        <SplitterPanel :size="40" :minSize="10" style="overflow: scroll">
+                            <p class="col m-3">
+                                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur pariatur recusandae rerum atque nisi ipsum fuga numquam distinctio obcaecati quibusdam repellat, est assumenda quam perferendis reprehenderit,
+                                blanditiis, excepturi facilis! Voluptatem.
+                            </p>
+                        </SplitterPanel>
+                        <SplitterPanel :size="60" style="overflow: scroll">
+                            <Splitter layout="vertical">
+                                <SplitterPanel :size="15">
+                                    <p class="col m-3">
+                                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident,
+                                        similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio
+                                        cumque nihil impedit quo minus.
+                                    </p>
+                                </SplitterPanel>
+                                <SplitterPanel :size="85">
+                                    <p class="col m-3">
+                                        Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut
+                                        aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus
+                                        luctus odio.
+                                    </p>
+                                </SplitterPanel>
+                            </Splitter>
+                        </SplitterPanel>
+                    </Splitter>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const toolbarItems = ref([
+    {
+        label: 'Save',
+        icon: 'pi pi-check'
+    },
+    {
+        label: 'Update',
+        icon: 'pi pi-upload'
+    },
+    {
+        label: 'Delete',
+        icon: 'pi pi-trash'
+    },
+    {
+        label: 'Home Page',
+        icon: 'pi pi-home'
+    }
+]);
+const cardMenu = ref([
+    { label: 'Save', icon: 'pi pi-fw pi-check' },
+    { label: 'Update', icon: 'pi pi-fw pi-refresh' },
+    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+]);
+const menuRef = ref(null);
+
+const toggle = () => {
+    menuRef.value.toggle(event);
+};
+</script>
diff --git a/src/views/demo/Table.vue b/src/views/demo/Table.vue
new file mode 100644
index 0000000..e400764
--- /dev/null
+++ b/src/views/demo/Table.vue
@@ -0,0 +1,392 @@
+<template>
+    <div class="grid">
+        <div class="col-12">
+            <div class="card">
+                <h5>Filter Menu</h5>
+                <DataTable
+                    :value="customer1"
+                    :paginator="true"
+                    class="p-datatable-gridlines"
+                    :rows="10"
+                    dataKey="id"
+                    :rowHover="true"
+                    v-model:filters="filters1"
+                    filterDisplay="menu"
+                    :loading="loading1"
+                    :filters="filters1"
+                    responsiveLayout="scroll"
+                    :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']"
+                >
+                    <template #header>
+                        <div class="flex justify-content-between flex-column sm:flex-row">
+                            <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined mb-2" @click="clearFilter1()" />
+                            <span class="p-input-icon-left mb-2">
+                                <i class="pi pi-search" />
+                                <InputText v-model="filters1['global'].value" placeholder="Keyword Search" style="width: 100%" />
+                            </span>
+                        </div>
+                    </template>
+                    <template #empty> No customers found. </template>
+                    <template #loading> Loading customers data. Please wait. </template>
+                    <Column field="name" header="Name" style="min-width: 12rem">
+                        <template #body="{ data }">
+                            {{ data.name }}
+                        </template>
+                        <template #filter="{ filterModel }">
+                            <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name" />
+                        </template>
+                    </Column>
+                    <Column header="Country" filterField="country.name" style="min-width: 12rem">
+                        <template #body="{ data }">
+                            <img src="@/assets/demo/images/flag/flag_placeholder.png" :alt="data.country.name" :class="'flag flag-' + data.country.code" width="30" />
+                            <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.country.name }}</span>
+                        </template>
+                        <template #filter="{ filterModel }">
+                            <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country" />
+                        </template>
+                        <template #filterclear="{ filterCallback }">
+                            <Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button>
+                        </template>
+                        <template #filterapply="{ filterCallback }">
+                            <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
+                        </template>
+                    </Column>
+                    <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+                        <template #body="{ data }">
+                            <img :alt="data.representative.name" :src="'images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
+                        </template>
+                        <template #filter="{ filterModel }">
+                            <div class="mb-3 text-bold">Agent Picker</div>
+                            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                                <template #option="slotProps">
+                                    <div class="p-multiselect-representative-option">
+                                        <img :alt="slotProps.option.name" :src="'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ slotProps.option.name }}</span>
+                                    </div>
+                                </template>
+                            </MultiSelect>
+                        </template>
+                    </Column>
+                    <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
+                        <template #body="{ data }">
+                            {{ formatDate(data.date) }}
+                        </template>
+                        <template #filter="{ filterModel }">
+                            <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
+                        </template>
+                    </Column>
+                    <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
+                        <template #body="{ data }">
+                            {{ formatCurrency(data.balance) }}
+                        </template>
+                        <template #filter="{ filterModel }">
+                            <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+                        </template>
+                    </Column>
+                    <Column field="status" header="Status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+                        <template #body="{ data }">
+                            <span :class="'customer-badge status-' + data.status">{{ data.status }}</span>
+                        </template>
+                        <template #filter="{ filterModel }">
+                            <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Any" class="p-column-filter" :showClear="true">
+                                <template #value="slotProps">
+                                    <span :class="'customer-badge status-' + slotProps.value" v-if="slotProps.value">{{ slotProps.value }}</span>
+                                    <span v-else>{{ slotProps.placeholder }}</span>
+                                </template>
+                                <template #option="slotProps">
+                                    <span :class="'customer-badge status-' + slotProps.option">{{ slotProps.option }}</span>
+                                </template>
+                            </Dropdown>
+                        </template>
+                    </Column>
+                    <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
+                        <template #body="{ data }">
+                            <ProgressBar :value="data.activity" :showValue="false" style="height: 0.5rem"></ProgressBar>
+                        </template>
+                        <template #filter="{ filterModel }">
+                            <Slider v-model="filterModel.value" range class="m-3"></Slider>
+                            <div class="flex align-items-center justify-content-between px-2">
+                                <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                                <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+                            </div>
+                        </template>
+                    </Column>
+                    <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
+                        <template #body="{ data }">
+                            <i class="pi" :class="{ 'text-green-500 pi-check-circle': data.verified, 'text-pink-500 pi-times-circle': !data.verified }"></i>
+                        </template>
+                        <template #filter="{ filterModel }">
+                            <TriStateCheckbox v-model="filterModel.value" />
+                        </template>
+                    </Column>
+                </DataTable>
+            </div>
+        </div>
+
+        <div class="col-12">
+            <div class="card">
+                <h5>Frozen Columns</h5>
+                <ToggleButton v-model="idFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Id" offLabel="Freeze Id" style="width: 10rem" />
+
+                <DataTable :value="customer2" :scrollable="true" scrollHeight="400px" :loading="loading2" scrollDirection="both" class="mt-3">
+                    <Column field="name" header="Name" :style="{ width: '150px' }" frozen></Column>
+                    <Column field="id" header="Id" :style="{ width: '100px' }" :frozen="idFrozen"></Column>
+                    <Column field="name" header="Name" :style="{ width: '200px' }"></Column>
+                    <Column field="country.name" header="Country" :style="{ width: '200px' }">
+                        <template #body="{ data }">
+                            <img src="@/assets/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
+                            <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.country.name }}</span>
+                        </template>
+                    </Column>
+                    <Column field="date" header="Date" :style="{ width: '200px' }"></Column>
+                    <Column field="company" header="Company" :style="{ width: '200px' }"></Column>
+                    <Column field="status" header="Status" :style="{ width: '200px' }">
+                        <template #body="{ data }">
+                            <span :class="'customer-badge status-' + data.status">{{ data.status }}</span>
+                        </template>
+                    </Column>
+                    <Column field="activity" header="Activity" :style="{ width: '200px' }"></Column>
+                    <Column field="representative.name" header="Representative" :style="{ width: '200px' }">
+                        <template #body="{ data }">
+                            <img :alt="data.representative.name" :src="'images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
+                            <span style="margin-left: 0.5em; vertical-align: middle" class="image-text">{{ data.representative.name }}</span>
+                        </template>
+                    </Column>
+                    <Column field="balance" header="Balance" :style="{ width: '150px' }" frozen alignFrozen="right">
+                        <template #body="{ data }">
+                            <span class="text-bold">{{ formatCurrency(data.balance) }}</span>
+                        </template>
+                    </Column>
+                </DataTable>
+            </div>
+        </div>
+
+        <div class="col-12">
+            <div class="card">
+                <h5>Row Expand</h5>
+                <DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id" responsiveLayout="scroll">
+                    <template #header>
+                        <div>
+                            <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2 mb-2" />
+                            <Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" class="mb-2" />
+                        </div>
+                    </template>
+                    <Column :expander="true" headerStyle="width: 3rem" />
+                    <Column field="name" header="Name" :sortable="true">
+                        <template #body="slotProps">
+                            {{ slotProps.data.name }}
+                        </template>
+                    </Column>
+                    <Column header="Image">
+                        <template #body="slotProps">
+                            <img :src="'images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="shadow-2" width="100" />
+                        </template>
+                    </Column>
+                    <Column field="price" header="Price" :sortable="true">
+                        <template #body="slotProps">
+                            {{ formatCurrency(slotProps.data.price) }}
+                        </template>
+                    </Column>
+                    <Column field="category" header="Category" :sortable="true">
+                        <template #body="slotProps">
+                            {{ formatCurrency(slotProps.data.category) }}
+                        </template></Column
+                    >
+                    <Column field="rating" header="Reviews" :sortable="true">
+                        <template #body="slotProps">
+                            <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
+                        </template>
+                    </Column>
+                    <Column field="inventoryStatus" header="Status" :sortable="true">
+                        <template #body="slotProps">
+                            <span :class="'product-badge status-' + (slotProps.data.inventoryStatus ? slotProps.data.inventoryStatus.toLowerCase() : '')">{{ slotProps.data.inventoryStatus }}</span>
+                        </template>
+                    </Column>
+                    <template #expansion="slotProps">
+                        <div class="p-3">
+                            <h5>Orders for {{ slotProps.data.name }}</h5>
+                            <DataTable :value="slotProps.data.orders" responsiveLayout="scroll">
+                                <Column field="id" header="Id" :sortable="true">
+                                    <template #body="slotProps">
+                                        {{ slotProps.data.id }}
+                                    </template>
+                                </Column>
+                                <Column field="customer" header="Customer" :sortable="true">
+                                    <template #body="slotProps">
+                                        {{ slotProps.data.customer }}
+                                    </template>
+                                </Column>
+                                <Column field="date" header="Date" :sortable="true">
+                                    <template #body="slotProps">
+                                        {{ slotProps.data.date }}
+                                    </template>
+                                </Column>
+                                <Column field="amount" header="Amount" :sortable="true">
+                                    <template #body="slotProps">
+                                        {{ formatCurrency(slotProps.data.amount) }}
+                                    </template>
+                                </Column>
+                                <Column field="status" header="Status" :sortable="true">
+                                    <template #body="slotProps">
+                                        <span :class="'order-badge order-' + (slotProps.data.status ? slotProps.data.status.toLowerCase() : '')">{{ slotProps.data.status }}</span>
+                                    </template>
+                                </Column>
+                                <Column headerStyle="width:4rem">
+                                    <template #body>
+                                        <Button icon="pi pi-search" />
+                                    </template>
+                                </Column>
+                            </DataTable>
+                        </div>
+                    </template>
+                </DataTable>
+            </div>
+        </div>
+
+        <div class="col-12">
+            <div class="card">
+                <h5>Subheader Grouping</h5>
+                <DataTable :value="customer3" rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px">
+                    <Column field="representative.name" header="Representative"></Column>
+                    <Column field="name" header="Name" style="min-width: 200px"></Column>
+                    <Column field="country" header="Country" style="min-width: 200px">
+                        <template #body="slotProps">
+                            <img src="@/assets/demo/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
+                            <span class="image-text ml-2">{{ slotProps.data.country.name }}</span>
+                        </template>
+                    </Column>
+                    <Column field="company" header="Company" style="min-width: 200px"></Column>
+                    <Column field="status" header="Status" style="min-width: 200px">
+                        <template #body="slotProps">
+                            <span :class="'customer-badge status-' + slotProps.data.status">{{ slotProps.data.status }}</span>
+                        </template>
+                    </Column>
+                    <Column field="date" header="Date" style="min-width: 200px"></Column>
+                    <template #groupheader="slotProps">
+                        <img :alt="slotProps.data.representative.name" :src="'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                        <span class="image-text font-bold ml-2">{{ slotProps.data.representative.name }}</span>
+                    </template>
+                    <template #groupfooter="slotProps">
+                        <td style="text-align: right" class="text-bold pr-6">Total Customers: {{ calculateCustomerTotal(slotProps.data.representative.name) }}</td>
+                    </template>
+                </DataTable>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { FilterMatchMode, FilterOperator } from 'primevue/api';
+import CustomerService from '@/layout/service/CustomerService';
+import ProductService from '@/layout/service/ProductService';
+import { ref, onMounted } from 'vue';
+
+const customer1 = ref(null);
+const customer2 = ref(null);
+const customer3 = ref(null);
+const filters1 = ref({
+    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+    name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+    'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+    representative: { value: null, matchMode: FilterMatchMode.IN },
+    date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+    balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+    status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+    activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
+    verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+});
+const loading1 = ref(null);
+const loading2 = ref(null);
+const idFrozen = ref(false);
+const products = ref(null);
+const expandedRows = ref([]);
+const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
+const representatives = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png' },
+    { name: 'Anna Fali', image: 'annafali.png' },
+    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+    { name: 'Onyama Limba', image: 'onyamalimba.png' },
+    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+]);
+
+const customerService = new CustomerService();
+const productService = new ProductService();
+
+onMounted(() => {
+    productService.getProductsWithOrdersSmall().then((data) => (products.value = data));
+    customerService.getCustomersLarge().then((data) => {
+        customer1.value = data;
+        loading1.value = false;
+        customer1.value.forEach((customer) => (customer.date = new Date(customer.date)));
+    });
+    customerService.getCustomersLarge().then((data) => (customer2.value = data));
+    customerService.getCustomersMedium().then((data) => (customer3.value = data));
+    loading2.value = false;
+});
+
+const initFilters1 = () => {
+    filters1.value = {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    };
+    console.log(filters1);
+};
+
+const clearFilter1 = () => {
+    initFilters1();
+};
+const expandAll = () => {
+    expandedRows.value = products.value.filter((p) => p.id);
+};
+const collapseAll = () => {
+    expandedRows.value = null;
+};
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+
+const formatDate = (value) => {
+    return value.toLocaleDateString('en-US', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    });
+};
+const calculateCustomerTotal = (name) => {
+    let total = 0;
+    if (customer3.value) {
+        for (let customer of customer3.value) {
+            if (customer.representative.name === name) {
+                total++;
+            }
+        }
+    }
+
+    return total;
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/demo/styles/badges.scss';
+
+::v-deep(.p-datatable-frozen-tbody) {
+    font-weight: bold;
+}
+
+::v-deep(.p-datatable-scrollable .p-frozen-column) {
+    font-weight: bold;
+}
+</style>
diff --git a/src/views/demo/Tree.vue b/src/views/demo/Tree.vue
new file mode 100644
index 0000000..09ce22d
--- /dev/null
+++ b/src/views/demo/Tree.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="grid">
+        <div class="col-12">
+            <div class="card">
+                <h5>Tree</h5>
+                <Tree :value="treeValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeValue"></Tree>
+            </div>
+        </div>
+        <div class="col-12">
+            <div class="card">
+                <h5>TreeTable</h5>
+                <TreeTable :value="treeTableValue" selectionMode="checkbox" v-model:selectionKeys="selectedTreeTableValue">
+                    <template #header> FileSystem </template>
+                    <Column field="name" header="Name" :expander="true"></Column>
+                    <Column field="size" header="Size"></Column>
+                    <Column field="type" header="Type"></Column>
+                </TreeTable>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import NodeService from '@/layout/service/NodeService';
+import { onMounted, ref } from 'vue';
+
+const treeValue = ref(null);
+const selectedTreeValue = ref(null);
+const treeTableValue = ref(null);
+const selectedTreeTableValue = ref(null);
+const nodeService = new NodeService();
+
+onMounted(() => {
+    nodeService.getTreeNodes().then((data) => (treeValue.value = data));
+    nodeService.getTreeTableNodes().then((data) => (treeTableValue.value = data));
+});
+</script>