Firs Commit

components/auth/LoginForm.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const checkbox = ref(true);
+</script>
+
+<template>
+    <v-row class="d-flex mb-3">
+        <v-col cols="12">
+            <v-label class="font-weight-bold mb-1">Username</v-label>
+            <v-text-field variant="outlined" density="compact" hide-details color="primary"></v-text-field>
+        </v-col>
+        <v-col cols="12">
+            <v-label class="font-weight-bold mb-1">Password</v-label>
+            <v-text-field variant="outlined"  density="compact" type="password"   hide-details color="primary"></v-text-field>
+        </v-col>
+        <v-col cols="12" class="pt-0">
+            <div class="d-flex flex-wrap align-center">
+                <v-checkbox v-model="checkbox"  color="primary" hide-details>
+                    <template v-slot:label class="text-body-1">Remeber this Device</template>
+                </v-checkbox>
+                <div class="ml-sm-auto">
+                    <NuxtLink to="/"
+                        class="text-primary text-decoration-none text-body-1 opacity-1 font-weight-medium">Forgot
+                        Password ?</NuxtLink>
+                </div>
+            </div>
+        </v-col>
+        <v-col cols="12" class="pt-0">
+            <v-btn to="/" color="primary" size="large" block flat>Sign in</v-btn>
+        </v-col>
+    </v-row>
+</template>

components/auth/RegisterForm.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+const checkbox = ref(true);
+</script>
+
+<template>
+    <v-row class="d-flex mb-3">
+        <v-col cols="12">
+            <v-label class="font-weight-bold mb-1">Name</v-label>
+            <v-text-field variant="outlined" density="compact" hide-details color="primary"></v-text-field>
+        </v-col>
+        <v-col cols="12">
+            <v-label class="font-weight-bold mb-1">Email Address</v-label>
+            <v-text-field variant="outlined" density="compact" type="email" hide-details color="primary"></v-text-field>
+        </v-col>
+        <v-col cols="12">
+            <v-label class="font-weight-bold mb-1">Password</v-label>
+            <v-text-field variant="outlined" type="password" density="compact"  hide-details color="primary"></v-text-field>
+        </v-col>
+        <v-col cols="12" >
+            <v-btn to="/" color="primary" size="large" block   flat>Sign up</v-btn>
+        </v-col>
+    </v-row>
+</template>

components/dashboard/BlogCards.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { BlogCardData } from '@/data/dashboard/dashboardData';
+</script>
+<template>
+    <v-row>
+        <v-col cols="12" lg="4" v-for="card in BlogCardData" :key="card.title">
+            <v-card elevation="10"  rounded="md" class="card-hover">
+                <div>
+                    <v-img :src="card.coveravatar" height="250px" cover class="rounded-t-md align-end text-right">
+                        <v-card-item
+                            ><v-chip class="bg-surface text-body-2 font-weight-medium" size="small" rounded="sm" v-text="card.read"></v-chip
+                        ></v-card-item>
+                    </v-img>
+                    <v-avatar size="40" class="mt-n7 mx-6">
+                        <img :src="card.avatar" alt="icon" height="40" />
+                    </v-avatar>
+                    <v-card-item class="pt-4">
+                        <v-chip class="text-body-2 font-weight-medium bg-grey100" size="small" rounded="sm" v-text="card.category"></v-chip>
+                        <h5 class="text-h5 text-13 my-6 custom-text-primary">
+                            <NuxtLink class="text-decoration-none color-inherits custom-title" :to="card.link">{{ card.title }}</NuxtLink>
+                        </h5>
+                        <div class="d-flex align-center justify-space-between">
+                            <div>
+                                <v-avatar class="" size="18">
+                                    <EyeIcon size="18" class="text-textPrimary" />
+                                </v-avatar>
+                                <span class="text-subtitle-1 ml-2 text-textSecondary" v-text="card.view"></span>
+                                <v-avatar class="ml-4" size="18">
+                                    <Message2Icon size="18"  class="text-textPrimary" />
+                                </v-avatar>
+                                <span class="text-subtitle-1 ml-2 text-textSecondary" v-text="card.comments"></span>
+                            </div>
+                            <div>
+                                <v-avatar size="10">
+                                    <CircleIcon size="10" class="text-textPrimary" />
+                                </v-avatar>
+                                <span class="text-subtitle-2 ml-2 text-textSecondary" v-text="card.time"></span>
+                            </div>
+                        </div>
+                    </v-card-item>
+                </div>
+            </v-card>
+        </v-col>
+    </v-row>
+</template>

components/dashboard/DailyActivities.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { DailyActivitiesData } from '@/data/dashboard/dashboardData';
+import { Icon } from '@iconify/vue';
+</script>
+
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <v-card-title class="text-h5">Daily activities</v-card-title>
+            <div class="daily-activities mt-8 px-3">
+                <div v-for="list in DailyActivitiesData" :key="list.title">
+                    <v-row class="d-flex mb-1">
+                        <v-col cols="4" lg="3" md="auto" sm="auto" class="px-0 pt-0 pb-0 d-flex align-start">
+                            <p class="text-body-1 text-textSecondary text-no-wrap">{{ list.title }}</p>
+                        </v-col>
+                        <v-col cols="1" sm="1" class="px-0 text-center pt-0 pb-0 mt-1">
+                            <Icon icon="tabler:circle-filled" size="13" :class="'text-' + list.textcolor" />
+                            <div v-if="list.line" class="line mx-auto bg-grey100"></div>
+                        </v-col>
+                        <v-col cols="7" sm="8" class="pt-0 pb-0">
+                            <h6 v-if="list.boldtext" class="text-body-1 text-textPrimary">{{ list.subtitle }}</h6>
+                            <p v-else class="text-body-1 text-textPrimary">{{ list.subtitle }}</p>
+                            <div class="mt-n1">
+                                <NuxtLink :to="list.url" class="text-body-1 text-primary text-decoration-none" v-if="list.link">{{
+                                    list.link
+                                }}</NuxtLink>
+                            </div>
+                        </v-col>
+                    </v-row>
+                </div>
+            </div>
+        </v-card-item>
+    </v-card>
+</template>
+

components/dashboard/NewCustomer.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+</script>
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <div class="d-flex ga-3 align-center">
+                <v-avatar size="48" class="rounded-md bg-lightsecondary">
+                    <Icon icon="solar:football-outline" class="text-secondary" height="25" />
+                </v-avatar>
+                <h6 class="text-h6 heading">New Customers</h6>
+            </div>
+
+            <div class="d-flex align-center justify-space-between mb-3 mt-12">
+                <h5 class="text-textPrimary text-subtitle-1 font-weight-medium">New Goals</h5>
+                <div class="text-textPrimary text-subtitle-1 font-weight-medium">83%</div>
+            </div>
+            <v-progress-linear model-value="83" height="7" color="secondary" bg-color="lightsecondary" rounded></v-progress-linear>
+        </v-card-item>
+    </v-card>
+</template>

components/dashboard/RevenueCard.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
+const select = ref('Sept 2024');
+const items = ref(['Sept 2024', 'Oct 2024', 'Nov 2024']);
+/* Chart */
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            toolbar: {
+                show: false
+            },
+            type: 'bar',
+            fontFamily: 'inherit',
+            foreColor: '#adb0bb',
+            height: 285,
+            stacked: true,
+            offsetX: -15
+        },
+        colors: ['rgba(var(--v-theme-primary))', 'rgba(var(--v-theme-error))'],
+        plotOptions: {
+            bar: {
+                horizontal: false,
+                barHeight: '60%',
+                columnWidth: '15%',
+                borderRadius: [6],
+                borderRadiusApplication: 'end',
+                borderRadiusWhenStacked: 'all'
+            }
+        },
+        dataLabels: {
+            enabled: false
+        },
+        legend: {
+            show: false
+        },
+        grid: {
+            show: true,
+            padding: {
+                top: 0,
+                bottom: 0,
+                right: 0
+            },
+            borderColor: 'rgba(0,0,0,0.05)',
+            xaxis: {
+                lines: {
+                    show: true
+                }
+            },
+            yaxis: {
+                lines: {
+                    show: true
+                }
+            }
+        },
+        yaxis: {
+            min: -5,
+            max: 5,
+            tickAmount: 4
+        },
+        xaxis: {
+            axisBorder: {
+                show: false
+            },
+            axisTicks: {
+                show: false
+            },
+            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep'],
+            labels: {
+                style: { fontSize: '13px', colors: '#adb0bb', fontWeight: '400' }
+            }
+        },
+
+        tooltip: {
+            theme: 'dark'
+        }
+    };
+});
+
+const Chart = {
+    series: [
+        {
+            name: '2024',
+            data: [1.2, 2.7, 1, 3.6, 2.1, 2.7, 2.2, 1.3, 2.5]
+        },
+        {
+            name: '2023',
+            data: [-2.8, -1.1, -2.5, -1.5, -2.3, -1.9, -1, -2.1, -1.3]
+        }
+    ]
+};
+</script>
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <div class="d-md-flex justify-space-between mb-mb-0 mb-3">
+                <v-card-title class="text-h5">Revenue Forecast</v-card-title>
+                <div>
+                    <v-select
+                        v-model="select"
+                        :items="items"
+                        variant="outlined"
+                        density="compact"
+                        class="text-body-1"
+                        hide-details
+                    ></v-select>
+                </div>
+            </div>
+            <div class="mx-n1 mt-4 pt-2">
+                <apexchart type="bar" height="285" class="rounded-bars" :options="chartOptions" :series="Chart.series"> </apexchart>
+            </div>
+        </v-card-item>
+    </v-card>
+</template>

components/dashboard/RevenueProducts.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon } from '@iconify/vue';
+import { RevenueProjectsData } from '@/data/dashboard/dashboardData';
+import { selectUser } from '~/data/user/userData';
+import { storeToRefs } from 'pinia';
+
+const {Users} = storeToRefs(selectUser());
+const {loadUserSelect} = selectUser();
+
+onMounted(()=> {
+    loadUserSelect();
+    console.log(Users);
+})
+
+</script>
+<template>
+    <v-card elevation="10" class="revenue-products">
+        <v-card-item class="pb-4">
+            <div class="d-flex ga-3 align-center justify-space-between">
+                <v-card-title class="text-h5">Revenue by Product</v-card-title>
+            </div>
+            <div class="mt-4">
+                <v-table class="revenue-table">
+                    <template v-slot:default>
+                        <thead>
+                            <tr>
+                                <th class="text-body-1">No</th>
+                                <th class="text-body-1">Nama</th>
+                                <th class="text-body-1">Umur</th>
+                                <th class="text-body-1">Alamat</th>
+                                <th class="text-body-1">Jenis Kelamin</th>
+                                <th class="text-body-1">Agama</th>
+                                <th class="text-body-1">Aksi</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="(item,i) in Users" :key="item.ID" class="month-item">
+                                <td>
+                                    <p> {{ i + 1 }}</p>
+                                </td>
+                                <td>
+                                    <p> {{ item.Name }}</p>
+                                </td>
+                                <td>
+                                    <p> {{ item.Age }}</p>
+                                </td>
+                                <td>
+                                    <p> {{ item.Address }}</p>
+                                </td>
+                                <td>
+                                    <p> {{ item.Gender }}</p>
+                                </td>
+                                <td>
+                                    <p> {{ item.Religion }}</p>
+                                </td>
+                                <td></td>
+                            </tr>
+                        </tbody>
+                    </template>
+                </v-table>
+            </div>
+        </v-card-item>
+    </v-card>
+</template>

components/dashboard/TotalIncome.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
+
+/* Chart */
+const chartOptions = computed(() => {
+    return {
+        chart: {
+            type: 'line',
+            fontFamily: 'inherit',
+            foreColor: '#adb0bb',
+            height: 60,
+            sparkline: {
+                enabled: true
+            },
+            group: 'sparklines'
+        },
+        colors:['rgba(var(--v-theme-error))'],
+        stroke: {
+            curve: 'smooth',
+            width: 2
+        },
+        markers: {
+            size: 0
+        },
+        tooltip: {
+            theme: 'dark',
+            fixed: {
+                enabled: true,
+                position: 'right'
+            },
+            x: {
+                show: false
+            }
+        }
+    };
+});
+
+const Chart = {
+    series: [
+        {
+            name: 'Income',
+            data: [30, 25, 35, 20, 30, 40]
+        }
+    ]
+};
+</script>
+<template>
+    <v-card elevation="10">
+        <v-card-item>
+            <div class="d-flex ga-3 align-center">
+                <v-avatar size="48" class="rounded-md bg-lighterror">
+                    <Icon icon="solar:box-linear" class="text-error" height="25" />
+                </v-avatar>
+                <h6 class="text-h6 heading">Total Income</h6>
+            </div>
+            <v-row class="mt-6">
+                <v-col cols="6">
+                    <h3 class="text-h3 heading">$680</h3>
+                    <div class="text-success text-subtitle-2 font-weight-medium mt-2">+18%</div>
+                </v-col>
+                <v-col cols="6"> 
+                    <apexchart type="line" height="60" :options="chartOptions" :series="Chart.series"> </apexchart>
+                </v-col>
+            </v-row>
+        </v-card-item>
+    </v-card>
+</template>

components/layout/full/Main.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue';
+import sidebarItems from '@/components/layout/full/vertical-sidebar/sidebarItem';
+import { Menu2Icon } from 'vue-tabler-icons';
+
+const sidebarMenu = shallowRef(sidebarItems);
+const sDrawer = ref(true);
+</script>
+
+<template>
+    <!------Sidebar-------->
+    <v-navigation-drawer left elevation="0"  app class="leftSidebar"  v-model="sDrawer">
+        <!---Logo part -->
+        <div class="pa-5">
+            <LayoutFullLogo />
+        </div>
+        <!-- ---------------------------------------------- -->
+        <!---Navigation -->
+        <!-- ---------------------------------------------- -->
+        <div>
+        <perfect-scrollbar class="scrollnavbar">
+            <v-list class="pa-6 pt-0">
+                <!---Menu Loop -->
+                <template v-for="(item, i) in sidebarMenu">
+                    <!---Item Sub Header -->
+                    <LayoutFullVerticalSidebarNavGroup :item="item" v-if="item.header" :key="item.title" />
+
+                    <!---Single Item-->
+                    <LayoutFullVerticalSidebarNavItem :item="item" v-else class="leftPadding" />
+                    <!---End Single Item-->
+                </template>
+            </v-list>
+            <!--div class="pa-4">
+                <LayoutFullVerticalSidebarUpgradeBox/>
+            </div-->
+        </perfect-scrollbar>
+    </div>
+
+    </v-navigation-drawer>
+    <!------Header-------->
+    <v-app-bar elevation="0" height="70">
+        <div class="d-flex align-center justify-space-between w-100">
+            <div>
+                <v-btn class="hidden-lg-and-up ms-md-3 ms-sm-5 ms-3 text-muted" @click="sDrawer = !sDrawer" icon variant="flat"
+                    size="small">
+                    <Menu2Icon size="20" stroke-width="1.5" />
+                </v-btn>
+                <!-- Notification -->
+                <LayoutFullVerticalHeaderNotificationDD/>
+            </div>
+            <div>
+                <!-- Upgrade button -->
+                <!--v-btn class="mr-2 bg-primary" href="https://adminmart.com/templates/nuxtjs/" target="_blank">Download Free</v-btn-->
+                <!-- User Profile -->
+                <LayoutFullVerticalHeaderProfileDD />
+            </div>
+        </div>
+    </v-app-bar>
+</template>

components/layout/full/logo/Logo.vue

@@ -0,0 +1,3 @@
+<template>
+  <LayoutFullLogoDark />
+</template>

components/layout/full/logo/LogoDark.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import Logoimg from "/images/logos/logo.svg";
+</script>
+<template>
+  <div class="logo">
+    <NuxtLink to="/">
+      <img :src="Logoimg" alt="home" />
+    </NuxtLink>
+  </div>
+</template>

components/layout/full/vertical-header/NotificationDD.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+</script>
+<template>
+    <v-btn icon class="custom-hover-primary" size="small" variant="text" rounded="circle" color="primary" >
+        <v-badge dot color="primary" offset-x="-5" offset-y="-3">
+            <Icon icon="solar:bell-bing-line-duotone" height="22" />
+        </v-badge>
+    </v-btn>
+</template>

components/layout/full/vertical-header/ProfileDD.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { UserIcon, MailIcon, ListCheckIcon } from 'vue-tabler-icons';
+</script>
+
+<template>
+    <!-- ---------------------------------------------- -->
+    <!-- notifications DD -->
+    <!-- ---------------------------------------------- -->
+    <v-menu :close-on-content-click="false">
+        <template v-slot:activator="{ props }">
+            <v-btn class="profileBtn custom-hover-primary" variant="text" rounded="circle" v-bind="props" icon>
+                <v-avatar size="35">
+                    <img src="/images/profile/user-1.jpg" height="35" alt="user" />
+                </v-avatar>
+            </v-btn>
+        </template>
+        <v-sheet rounded="md" width="200" elevation="10" class="mt-2">
+            <v-list class="py-0" lines="one" density="compact">
+                <v-list-item value="item1" active-color="primary" >
+                    <template v-slot:prepend>
+                        <UserIcon stroke-width="1.5" size="20"/>
+                    </template>
+                    <v-list-item-title class="pl-4 text-body-1">My Profile</v-list-item-title>
+                </v-list-item>
+                <v-list-item value="item2" active-color="primary">
+                    <template v-slot:prepend>
+                        <MailIcon stroke-width="1.5" size="20"/>
+                    </template>
+                    <v-list-item-title  class="pl-4 text-body-1">My Account</v-list-item-title>
+                </v-list-item>
+                <v-list-item value="item3" active-color="primary"> 
+                    <template v-slot:prepend>
+                        <ListCheckIcon stroke-width="1.5"  size="20"/>
+                    </template>
+                    <v-list-item-title class="pl-4 text-body-1">My Task</v-list-item-title>
+                </v-list-item>
+            </v-list>
+            <div class="pt-4 pb-4 px-5 text-center">
+                <v-btn to="/auth/login" color="primary" variant="outlined" block>Logout</v-btn>
+            </div>
+        </v-sheet>
+    </v-menu>
+</template>

components/layout/full/vertical-sidebar/Icon.vue

@@ -0,0 +1,23 @@
+<script setup>
+const props = defineProps({ item: Object, level: Number });
+</script>
+
+<template>
+  <template v-if="level > 0">
+    <component
+      :is="item"
+      size="5"
+      fill="currentColor"
+      stroke-width="1.5"
+      class="iconClass"
+    ></component>
+  </template>
+  <template v-else>
+    <component
+      :is="item"
+      size="20"
+      stroke-width="1.5"
+      class="iconClass"
+    ></component>
+  </template>
+</template>

components/layout/full/vertical-sidebar/NavGroup/index.vue

@@ -0,0 +1,7 @@
+<script setup>
+const props = defineProps({ item: Object });
+</script>
+
+<template>
+    <v-list-subheader color="darkText" class="smallCap text-uppercase text-subtitle-2 mt-5 font-weight-bold mini-text">{{ props.item.header}}</v-list-subheader>
+</template>

components/layout/full/vertical-sidebar/NavItem/index.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { Icon } from '@iconify/vue';
+const props = defineProps({ item: Object, level: Number });
+</script>
+
+<template>
+    <!---Single Item-->
+    <v-list-item
+        :to="item.type === 'external' ? '' : item.to"
+        :href="item.type === 'external' ? item.to : ''"
+        rounded
+        class="mb-1"
+        :disabled="item.disabled"
+        :target="item.type === 'external' ? '_blank' : ''">
+        <!---If icon-->
+        <template v-slot:prepend>
+            <Icon :icon="'solar:' + item.icon" height="18" width="18" :level="level" class="dot" :class="'text-' + item.BgColor"/>
+        </template>
+        <v-list-item-title>{{item.title}}</v-list-item-title>
+        <!---If Caption-->
+        <v-list-item-subtitle v-if="item.subCaption" class="text-caption mt-n1 hide-menu">
+            {{ item.subCaption }}
+        </v-list-item-subtitle>
+        <!---If any chip or label-->
+        <template v-slot:append v-if="item.chip">
+            <v-chip
+                :color="item.chipColor"
+                :class="'sidebarchip hide-menu bg-' + item.chipBgColor"
+                :size="item.chipIcon ? 'small' : 'small'"
+                :variant="item.chipVariant"
+                :prepend-icon="item.chipIcon"
+            >
+                {{ item.chip }}
+            </v-chip>
+        </template>
+    </v-list-item>
+</template>

components/layout/full/vertical-sidebar/UpgradeBox/index.vue

@@ -0,0 +1,15 @@
+
+<template>
+    <v-sheet rounded="md" color="lightprimary" class="ExtraBox hide-menu mx-1 px-4 py-3">
+        <div class="d-flex align-center">
+            <!--div>
+                <h6 class="text-h6 text-10 mb-3">Upgrade to pro</h6>
+                <v-btn href="https://adminmart.com/product/matdash-vuetify-nuxt-js-admin-template/?ref=5" target="_blank" color="primary" flat>Buy Pro</v-btn>
+            </div>
+            <div class="">
+                <img src="/images/backgrounds/rupee.png" class="w-100 ms-9 px-2" />
+            </div-->
+        </div>
+    </v-sheet>
+</template>
+

components/layout/full/vertical-sidebar/sidebarItem.ts

@@ -0,0 +1,63 @@
+
+export interface menu {
+    header?: string;
+    title?: string;
+    icon?: any;
+    to?: string;
+    chip?: string;
+    BgColor?: string;
+    chipBgColor?: string;
+    chipColor?: string;
+    chipVariant?: string;
+    chipIcon?: string;
+    children?: menu[];
+    disabled?: boolean;
+    type?: string;
+    subCaption?: string;
+}
+
+const sidebarItem: menu[] = [
+
+    { header: 'Home' },
+    {
+        title: 'Dashboard',
+        icon: 'widget-add-line-duotone',
+        to: '/'
+    },
+    { header: 'Rekamedis' },
+    {
+        title: 'Pendaftaran',
+        icon: 'add-square-outline',
+        to: '/pendaftaran/rawatjalan/kategoripasien'
+    },
+    {
+        title: 'CPPT',
+        icon: 'clipboard-list-bold',
+        to: '/dokter/rawatjalan/cppt'
+    },
+    { header: 'auth' },
+    {
+        title: 'Login',
+        icon: 'login-3-line-duotone',
+        to: '/auth/login'
+    },
+    {
+        title: 'Register',
+        icon: 'user-plus-rounded-line-duotone',
+        to: '/auth/register'
+    },
+    { header: 'Extra' },
+    {
+        title: 'Icons',
+        icon: 'sticker-smile-circle-2-line-duotone',
+        to: '/icons'
+    },
+    {
+        title: 'Sample Page',
+        icon: 'planet-3-line-duotone',
+        to: '/sample-page'
+    },
+
+];
+
+export default sidebarItem;

components/shared/CardHeaderFooter.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = defineProps({
+    title: String
+});
+</script>
+
+<template>
+    <!-- -------------------------------------------------------------------- -->
+    <!-- Card with Header & Footer -->
+    <!-- -------------------------------------------------------------------- -->
+    <v-card variant="outlined" elevation="0" >
+        <v-card-item>
+            <v-card-title class="text-18">{{ title }}</v-card-title>
+        </v-card-item>
+        <v-divider></v-divider>
+        <v-card-text>
+            <slot />
+        </v-card-text>
+        <v-divider></v-divider>
+        <v-card-actions>
+            <slot name="footer" />
+        </v-card-actions>
+    </v-card>
+</template>

components/shared/UiChildCard.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps({
+    title: String
+});
+</script>
+
+<template>
+    <v-card variant="outlined">
+        <v-card-item class="py-4 px-6">
+            <v-card-title class="text-h5 mb-0">{{ title }}</v-card-title>
+        </v-card-item>
+        <v-divider />
+        <v-card-text>
+            <slot />
+        </v-card-text>
+    </v-card>
+</template>

components/shared/UiParentCard.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const props = defineProps({
+    title: String
+});
+</script>
+
+// ===============================|| Ui Parent Card||=============================== //
+<template>
+    <v-card elevation="10" >
+        <v-card-item>
+            <div class="d-sm-flex align-center justify-space-between">
+                <v-card-title class="text-h5 mb-0">{{ title }}</v-card-title>
+                <slot name="action"></slot>
+                <!-- </template> -->
+            </div>
+        </v-card-item>
+        <v-card-text>
+            <slot />
+        </v-card-text>
+    </v-card>
+</template>

components/shared/UiParentCardLogo.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import Logo from "@/layouts/full/logo/Logo.vue";
+</script>
+
+// ===============================|| Ui Parent Card||=============================== //
+<template>
+    <v-card elevation="10" >
+        <v-card-item>
+            <div class="d-sm-flex align-center justify-space-between">
+                <v-card-title class="text-h5"><Logo/></v-card-title>
+                <!-- <template v-slot:append> -->
+                <slot name="action"></slot>
+                <!-- </template> -->
+            </div>
+        </v-card-item>
+        <v-divider></v-divider>
+        <v-card-text>
+            <slot />
+        </v-card-text>
+    </v-card>
+</template>

components/shared/UiTableCard.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps({
+    title: String
+});
+</script>
+
+<template>
+    <!-- ---------------------------------------------------- -->
+    <!-- Table Card -->
+    <!-- ---------------------------------------------------- -->
+    <v-card variant="outlined" elevation="0" >
+        <v-card-item>
+            <v-card-title class="text-18">{{ title }}</v-card-title>
+        </v-card-item>
+        <v-divider></v-divider>
+
+        <slot />
+    </v-card>
+</template>

components/shared/UiTextfieldPrimary.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// const props = defineProps({
+//   title: String,
+// });
+</script>
+
+<template>
+    <v-text-field color="primary"><slot /></v-text-field>
+</template>

components/shared/WidgetCard.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps({
+    title: String
+});
+</script>
+
+<template>
+    <!-- -------------------------------------------------------------------- -->
+    <!-- Card with Header & Footer -->
+    <!-- -------------------------------------------------------------------- -->
+    <v-card variant="outlined" elevation="0" class=" mb-6 overflow-hidden">
+        <v-card-item>
+            <v-card-title class="text-18">{{ title }}</v-card-title>
+        </v-card-item>
+        <v-divider></v-divider>
+        <v-card-text>
+            <slot />
+        </v-card-text>
+    </v-card>
+</template>

components/shared/WidgetCardv2.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps({
+    title: String,
+    hideaction: Boolean
+});
+</script>
+
+<template>
+    <!-- -------------------------------------------------------------------- -->
+    <!-- Card with Header & Footer -->
+    <!-- -------------------------------------------------------------------- -->
+    <v-card variant="outlined" elevation="0" class=" mb-6 overflow-hidden">
+        <v-card-item>
+            <v-card-title class="text-18">{{ title }}</v-card-title>
+        </v-card-item>
+        <v-divider></v-divider>
+        <slot />
+        <v-divider></v-divider>
+        <v-card-actions :class="`${hideaction ? 'd-none' : ''}`">
+            <slot name="footer" />
+        </v-card-actions>
+    </v-card>
+</template>

components/style-components/shadow/Shadow.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import UiParentCard from '@/components/shared/UiParentCard.vue';
+</script>
+<template>
+    <UiParentCard title="Shadow">
+        <v-row justify="center" class="mb-5 mt-1 px-8 px-3">
+            <v-col v-for="(m, n) in 25" :key="n" cols="6" sm="auto">
+                <v-card 
+                    :class="['d-flex justify-center align-center bg-primary py-sm-4 py-3 px-sm-8 px-4', `elevation-${n}`]">
+                    <div>{{ n }}</div>
+                </v-card>
+            </v-col>
+        </v-row>    
+    </UiParentCard>
+</template> 

components/style-components/typography/DefaultText.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const colortext = ref(
+    [
+        ['Text Primary', 'text-primary text-h5','text-primary text-subtitle-1 mt-1'],
+        ['Text Secondary', 'text-secondary text-h5','text-secondary text-subtitle-1 mt-1'],
+        ['Text Info', 'text-info text-h5','text-info text-subtitle-1 mt-1'],
+        ['Text Warning', 'text-warning text-h5','text-warning text-subtitle-1 mt-1'],
+        ['Text Error', 'text-error text-h5','text-error text-subtitle-1 mt-1'],
+        ['Text Success', 'text-success text-h5','text-success text-subtitle-1 mt-1'],
+    ]
+)
+</script>
+<template>
+    <div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
+        <div class="mb-6" v-for="[name1, cls1,cls2] in colortext" :key="name1" >
+            <v-card elevation="10" >
+                <div class="py-6 px-4">  
+                    <h5 :class="[cls1, '']">{{ name1 }} </h5>
+                    <div :class="[cls2, '']">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</div>
+                 </div>   
+            </v-card>
+        </div>    
+    </div>
+</template>

components/style-components/typography/Heading.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const headings = ref([
+    ['h1.Heading', 'text-h1', 'font size: 30 | line-height: 45 | font weight: 500'],
+    ['h2.Heading', 'text-h2', 'font size: 24 | line-height: 36 | font weight: 500'],
+    ['h3.Heading', 'text-h3', 'font size: 21 | line-height: 31.5 | font weight: 500'],
+    ['h4.Heading', 'text-h4', 'font size: 18 | line-height: 27 | font weight: 500'],
+    ['h5.Heading', 'text-h5', 'font size: 16 | line-height: 24 | font weight: 500'],
+    ['h6.Heading', 'text-h6', 'font size: 14 | line-height: 21 | font weight: 500'],
+]);
+
+const subtext = ref(
+    [
+        ['Subtitle 1.', 'text-subtitle-1', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 16 | line-height: 28 | font weight: 400'],
+        ['Subtitle 2.', 'text-subtitle-2', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 14 | line-height: 21 | font weight: 400'],
+        ['Body 1.', 'text-body-1', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 16 | line-height: 24 | font weight: 400'],
+        ['Body 2.', 'text-body-2', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 14 | line-height: 20 | font weight: 400'],
+        ['Caption.', 'text-caption', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 12 | line-height: 19 | font weight: 400'],
+        ['OVERLINE.', 'text-overline letter-spacing-0', ' Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur', 'font size: 12 | line-height: 31 | font weight: 400']
+    ]
+)
+</script>
+<template>
+    <div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
+        <div class="mb-6" v-for="[name, cls, val] in headings" :key="name">
+            <v-card elevation="10">
+                <div class="py-6 px-4">
+                    <div :class="[cls, '']">{{ name }}</div>
+                    <div class="text-body-1">
+                        <div class="text-muted">{{ val }}</div>
+                    </div>
+                </div>
+            </v-card>
+        </div>
+    </div>
+
+    <div class="d-flex flex-column gap-1 mx-1 pt-0 pa-7 pb-0">
+        <div class="mb-6" v-for="[name1, cls1, val1, prop] in subtext" :key="name1">
+            <v-card elevation="10">
+                <div class="py-6 px-4">
+                    <div :class="[cls1, '']">{{ name1 }} <span>{{ val1 }}</span></div>
+                    <div class="text-body-1 ">
+                        <div class="text-muted">{{ prop }}</div>
+                    </div>
+                </div>
+            </v-card>
+        </div>
+    </div>
+</template>