first commit

components/shared/AppBaseCard.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useDisplay } from 'vuetify';
+const { xs, lgAndUp } = useDisplay();
+const sDrawer = ref(false);
+</script>
+
+<template>
+    <!---/Left chat list -->
+    <div class="d-flex mainbox rounded-md">
+        <div class="left-part" v-if="lgAndUp">
+            <!-- <perfect-scrollbar style="height: calc(100vh - 290px)"> -->
+            <slot name="leftpart"></slot>
+            <!-- </perfect-scrollbar> -->
+        </div>
+
+        <!---right chat conversation -->
+        <div class="right-part">
+            <!---Toggle Button For mobile-->
+            <v-btn block @click="sDrawer = !sDrawer" variant="text" class="d-lg-none d-md-flex d-sm-flex">
+                <Menu2Icon size="20" class="mr-2" /> Menu
+            </v-btn>
+            <v-divider class="d-lg-none d-block" />
+            <slot name="rightpart"></slot>
+        </div>
+
+        <!---right chat conversation -->
+    </div>
+
+    <v-navigation-drawer temporary v-model="sDrawer" width="320" top v-if="!lgAndUp">
+        <v-card-text class="pa-0">
+            <slot name="mobileLeftContent"></slot>
+        </v-card-text>
+    </v-navigation-drawer>
+    
+</template>
+
+<style lang="scss">
+.mainbox {
+    position: relative;
+    overflow: hidden;
+}
+.left-part {
+    width: 320px;
+    border-inline-end-width: thin !important;
+    border-inline-end-style: solid !important;
+    border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+    min-height: 500px;
+    transition: 0.1s ease-in;
+    flex-shrink: 0;
+}
+.v-theme--light {
+    .left-part {
+        background: white;
+    }
+}
+.v-theme--dark {
+    .left-part {
+        background: #2b2b2b;
+    }
+}
+
+
+.right-part{
+    width: 100%;
+}
+
+</style>

components/shared/AppEmailCard.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useDisplay } from "vuetify";
+const { xs, lgAndUp } = useDisplay();
+
+const sDrawer = ref(false); // Sidebar drawer for mobile
+const eDrawer = ref(false); // Email details drawer
+const selectedEmail = ref(null); // To store the selected email details
+
+// Method to select an email and open the email details drawer
+const openEmailDetails = (email:any) => {
+  selectedEmail.value = email; // Store the selected email
+  eDrawer.value = true; // Open the email details drawer
+};
+
+</script>
+
+<template>
+  <div class="d-flex mainbox">
+    <div class="compose pa-6 " v-if="lgAndUp">
+      <slot name="mailCompose"></slot>
+    </div>
+
+    <div class="mail-list">
+     
+      <v-divider class="d-lg-none d-block" />
+      <slot name="mailList" :openEmailDetails="openEmailDetails"></slot> <!-- Pass the method as a slot prop -->
+    </div>
+
+    <div class="mail-details pa-6  d-md-block d-none">
+      <slot name="mailDetail"></slot>
+    </div>
+  </div>
+
+</template>
+
+<style lang="scss">
+.compose {
+  max-width: 235px;
+  width: 100%;
+}
+.mail-list {
+  max-width: 340px;
+  width: 100%;
+}
+.mail-details {
+  width: 100%;
+}
+
+@media screen and (max-width: 991px) {
+  .mail-list {
+    max-width: 100%;
+  }
+}
+@media screen and (min-width: 991px) {
+  .compose,.mail-list{
+    border-inline-end-width: thin !important;
+    border-inline-end-style: solid !important;
+    border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  }
+}
+</style>

components/shared/BaseBreadcrumb.vue

@@ -0,0 +1,43 @@
+<script setup >
+import { Icon } from '@iconify/vue';
+const props = defineProps({
+    title: String,
+    breadcrumbs: Array ,
+    icon: String,
+    text: String
+});
+
+
+</script>
+
+<template>
+    <v-card elevation="10" class="mb-8">
+        <div class="px-6 py-4">
+            <div class="d-flex justify-space-between align-center">
+                <h5 class="text-h5">{{ title }}</h5>
+                <v-breadcrumbs :items="breadcrumbs" class="pa-0">
+                        <template v-slot:prepend>
+                            <router-link to="/" class="textSecondary lh-0">
+                                <Icon icon="solar:home-2-line-duotone" height="20"   />
+                            </router-link>
+                        </template>
+                        <template v-slot:divider>
+                            <div class="d-flex align-center textSecondary "></div>
+                        </template>
+                        <template v-slot:title="{ item }">
+                            <v-chip size="small" class="rounded-sm" color="primary" >{{ item.text }}</v-chip>
+                        </template>
+                    </v-breadcrumbs>
+                
+            </div>
+        </div>
+    </v-card>
+</template>
+
+<style lang="scss">
+.page-breadcrumb {
+    .v-toolbar {
+        background: transparent;
+    }
+}
+</style>

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,22 @@
+<script setup lang="ts">
+const props = defineProps({
+    title: String
+});
+</script>
+
+// ===============================|| Ui Parent Card||=============================== //
+<template>
+    <v-card elevation="10" >
+        <v-card-item class="py-4 px-6">
+            <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-divider></v-divider>
+        <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>