@7365admin1/layer-common 1.8.0

package/components/Chat/Navigation.vue

@@ -0,0 +1,150 @@
+<template>
+  <v-sheet
+    elevation="1"
+    rounded="0"
+    class="pa-4 fill-height"
+    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
+  >
+    <h3 class="text-h6 mb-4">{{ title }}</h3>
+
+    <v-text-field
+      v-model="search"
+      @input="_search"
+      label="Search"
+      prepend-inner-icon="mdi-magnify"
+      density="compact"
+      hide-details
+      variant="outlined"
+      class="mb-4"
+    />
+
+    <v-select
+      label="Filter by Status"
+      :items="['All', 'In Progress', 'To Do', 'Done']"
+      v-model="selectedStatus"
+      density="compact"
+      hide-details
+      variant="outlined"
+      class="mb-4"
+    />
+
+    <v-row dense class="mb-4" align="center">
+      <v-col cols="5">
+        <v-menu
+          v-model="startMenu"
+          :close-on-content-click="false"
+          transition="scale-transition"
+          offset-y
+          max-width="280px"
+          min-width="auto"
+        >
+          <template #activator="{ props }">
+            <v-text-field
+              v-bind="props"
+              v-model="startDate"
+              label="Start Date"
+              density="compact"
+              variant="outlined"
+              readonly
+              hide-details
+              prepend-inner-icon="mdi-calendar"
+            />
+          </template>
+
+          <v-date-picker
+            v-model="startDate"
+            @update:model-value="startMenu = false"
+            show-adjacent-months
+            hide-header
+            class="d-flex flex-column pa-2"
+            style="font-size: 0.85rem; max-height: 300px"
+          />
+        </v-menu>
+      </v-col>
+
+      <v-col cols="2" class="d-flex align-center justify-center">
+        <span class="text-subtitle-2">to</span>
+      </v-col>
+
+      <v-col cols="5">
+        <v-menu
+          v-model="endMenu"
+          :close-on-content-click="false"
+          transition="scale-transition"
+          offset-y
+          max-width="280px"
+          min-width="auto"
+        >
+          <template #activator="{ props }">
+            <v-text-field
+              v-bind="props"
+              v-model="endDate"
+              label="End Date"
+              density="compact"
+              variant="outlined"
+              readonly
+              hide-details
+              prepend-inner-icon="mdi-calendar"
+            />
+          </template>
+
+          <v-date-picker
+            v-model="endDate"
+            @update:model-value="endMenu = false"
+            show-adjacent-months
+            hide-header
+            class="d-flex flex-column pa-2"
+            style="font-size: 0.85rem; max-height: 300px"
+          />
+        </v-menu>
+      </v-col>
+    </v-row>
+
+    <v-sheet
+      class="overflow-y-auto flex-grow-1 pa-3"
+      :style="{ height: 'calc(100vh - 320px)', overflowX: 'hidden' }"
+    >
+      <v-row dense>
+        <v-col v-for="(item, index) in items" :key="item._id" cols="12">
+          <div class="cursor-pointer" @click="$emit('select', item._id)">
+            <ChatListCard
+              :image="currentUser?.profile"
+              :subject="item.subject"
+              :status="item.status"
+              :createdAt="
+                item.createdAt
+                  ? new Date(item.createdAt).toLocaleDateString()
+                  : ''
+              "
+              :createdByName="item.createdByName"
+              :userProfile="currentUser?.profile"
+              :getNameInitials="getNameInitials"
+            />
+          </div>
+        </v-col>
+      </v-row>
+    </v-sheet>
+  </v-sheet>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  items: Array<Record<string, any>>;
+}>();
+
+const emit = defineEmits(["select", "search"]);
+
+const { currentUser } = useLocalAuth();
+const { getNameInitials, search } = useUtils();
+
+const selectedStatus = ref("All");
+const startDate = ref(null);
+const endDate = ref(null);
+const startMenu = ref(false);
+const endMenu = ref(false);
+
+function _search() {
+  emit("search", search.value);
+}
+</script>

package/components/ConfirmDialog.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-dialog v-model="dialog" max-width="400" persistent>
+    <v-card class="rounded-xl pa-6" elevation="2">
+      <!-- Close Button -->
+      <v-btn
+        icon
+        variant="text"
+        size="small"
+        class="position-absolute"
+        style="top: 8px; right: 8px"
+        @click="closeDialog"
+      >
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+
+      <v-card-text class="text-center">
+        <v-row v-if="imageSrc" justify="center" class="py-10">
+          <v-img height="120" :src="imageSrc" alt="Dialog Image" contain />
+        </v-row>
+
+        <!-- Title Slot -->
+        <div class="text-h6 font-weight-medium mb-2">
+          <slot name="title"></slot>
+        </div>
+
+        <!-- Description Slot -->
+        <div class="text-body-1 mb-4">
+          <slot name="description"></slot>
+        </div>
+      </v-card-text>
+
+      <!-- Footer Slot -->
+      <v-card-actions>
+        <slot name="footer"></slot>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  imageSrc: {
+    type: String,
+    default: "",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "submit"]);
+
+const dialog = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+</script>

package/components/Container/Standard.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <span
+        class="font-weight-medium text-subtitle-1 text-decoration-underline cursor-pointer"
+        @click="emit('back')"
+      >
+        Back
+      </span>
+    </v-col>
+    <v-col cols="12">
+      <span class="text-h5 font-weight-medium">{{ props.title }}</span>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <slot name="default"> </slot>
+    </v-col>
+
+    <v-col cols="12" class="mt-4">
+      <slot name="footer"> </slot>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(["back"]);
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+</script>