@7365admin1/layer-common 1.8.0

package/components/AccessManagement.vue

@@ -0,0 +1,420 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" class="mb-2">
+      <v-row no-gutters align="center" justify="space-between">
+        <v-btn
+          class="text-none"
+          rounded="pill"
+          variant="tonal"
+          size="large"
+          @click="setCard()"
+          v-if="canCreate && canCreateAccessCard"
+        >
+          Add Access Card
+        </v-btn>
+
+        <v-text-field
+          v-model="searchText"
+          placeholder="Search Card, Unit..."
+          variant="outlined"
+          density="comfortable"
+          clearable
+          hide-details
+          class="ml-2"
+          style="max-width: 250px"
+        />
+      </v-row>
+    </v-col>
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="loading"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable" @click="getCards">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination
+                v-model="page"
+                :length="pages"
+                @update:value="getCards"
+              />
+            </v-row>
+          </template>
+        </v-toolbar>
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="10"
+          fixed-header
+          hide-default-footer
+          @click:row="tableRowClickHandler"
+          style="max-height: calc(100vh - (200px))"
+        />
+      </v-card>
+    </v-col>
+
+    <!-- Create Dialog -->
+    <v-dialog v-model="createDialog" width="650" persistent>
+      <AccessCardAddForm
+        @cancel="createDialog = false"
+        @success="successCreate()"
+      />
+    </v-dialog>
+
+    <!-- Edit Dialog -->
+    <v-dialog v-model="editDialog" width="650" persistent>
+      <AccessCardAddForm
+        mode="edit"
+        @cancel="editDialog = false"
+        @success="successUpdate()"
+        :card="selectedCard"
+      />
+    </v-dialog>
+
+    <!-- Preview Dialog -->
+    <v-dialog v-model="previewDialog" width="450" persistent>
+      <v-card width="100%">
+        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+          <v-row no-gutters class="mb-4">
+            <v-col cols="12">
+              <strong>Card:</strong> {{ selectedCard?.cardNumber ?? "N/A" }}
+            </v-col>
+            <v-col cols="12">
+              <strong>Access Type:</strong>
+              {{ selectedCard?.accessCardType ?? "N/A" }}
+            </v-col>
+            <v-col cols="12">
+              <strong>Unit:</strong>
+              {{ selectedCard?.unit || "N/A" }}
+            </v-col>
+            <v-col cols="12">
+              <strong>Assign:</strong> {{ selectedCard?.assign || "N/A" }}
+            </v-col>
+            <v-col cols="12">
+              <strong>Status:</strong> {{ selectedCard?.status ?? "N/A" }}
+            </v-col>
+          </v-row></v-card-text
+        >
+        <v-toolbar class="pa-0" density="compact">
+          <v-row no-gutters>
+            <v-col cols="6" class="pa-0">
+              <v-btn
+                block
+                variant="text"
+                class="text-none"
+                size="large"
+                @click="previewDialog = false"
+                height="48"
+              >
+                Close
+              </v-btn>
+            </v-col>
+            <v-col cols="6" class="pa-0" v-if="canUpdate">
+              <v-menu>
+                <template #activator="{ props }">
+                  <v-btn
+                    block
+                    variant="flat"
+                    color="black"
+                    class="text-none"
+                    height="48"
+                    v-bind="props"
+                    tile
+                  >
+                    More actions
+                  </v-btn>
+                </template>
+                <v-list class="pa-0">
+                  <v-list-item
+                    @click="openEditDialog()"
+                    v-if="canUpdateAccessCard"
+                  >
+                    <v-list-item-title class="text-subtitle-2">
+                      Edit Card
+                    </v-list-item-title>
+                  </v-list-item>
+                  <v-list-item @click="openReplaceDialog()" v-if="canReplaceAccessCard">
+                    <v-list-item-title class="text-subtitle-2">
+                      Replace Card
+                    </v-list-item-title>
+                  </v-list-item>
+                  <v-list-item
+                    @click="openDeleteDialog()"
+                    class="text-red"
+                    v-if="canDeleteAccessCard"
+                  >
+                    <v-list-item-title class="text-subtitle-2">
+                      Delete Card
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </v-col>
+          </v-row>
+        </v-toolbar></v-card
+      >
+    </v-dialog>
+
+    <!-- Delete Dialog -->
+    <v-dialog
+      v-model="confirmDialog"
+      :loading="deleteLoading"
+      width="450"
+      persistent
+    >
+      <v-card width="100%">
+        <v-toolbar density="compact" class="pl-4">
+          <span class="font-weight-medium text-h5">Delete Card</span>
+        </v-toolbar>
+        <v-card-text>
+          <p class="text-subtitle-2 text-center">
+            Are you sure you want to delete this card? This action cannot be
+            undone.
+          </p>
+
+          <v-row v-if="message" no-gutters justify="center" class="mt-4">
+            <span class="text-caption text-error text-center">
+              {{ message }}
+            </span>
+          </v-row></v-card-text
+        >
+        <v-toolbar density="compact">
+          <v-row no-gutters>
+            <v-col cols="6">
+              <v-btn
+                tile
+                block
+                size="48"
+                variant="text"
+                class="text-none"
+                @click="confirmDialog = false"
+                :disabled="deleteLoading"
+              >
+                Close
+              </v-btn>
+            </v-col>
+            <v-col cols="6">
+              <v-btn
+                tile
+                block
+                size="48"
+                color="black"
+                variant="flat"
+                class="text-none"
+                @click="handleDeleteCard"
+                :loading="deleteLoading"
+              >
+                Delete Card
+              </v-btn>
+            </v-col>
+          </v-row></v-toolbar
+        >
+      </v-card>
+    </v-dialog>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+  </v-row>
+</template>
+<script setup lang="ts">
+definePageMeta({
+  middleware: ["01-auth", "02-org"],
+  memberOnly: true,
+});
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    default: () => [
+      {
+        title: "Card",
+        value: "cardNumber",
+      },
+      {
+        title: "Unit",
+        value: "unit",
+      },
+      {
+        title: "Assign",
+        value: "assign",
+      },
+      { title: "Action", value: "action-table" },
+    ],
+  },
+  canCreate: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  canCreateAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+  canUpdateAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+  canDeleteAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+  canReplaceAccessCard: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+// const { headerSearch } = useLocal();
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+
+const items = ref<Array<Record<string, any>>>([]);
+const createDialog = ref(false);
+const editDialog = ref(false);
+const previewDialog = ref(false);
+const deleteLoading = ref(false);
+const confirmDialog = ref(false);
+const searchText = ref("");
+const replaceDialog = ref(false);
+
+const selectedCard = ref<TCard>({
+  _id: "",
+  name: "",
+  accessCardType: "",
+  // visitorType: "",
+  type: "",
+  cardNumber: "",
+  startDate: "",
+  endDate: "",
+  door: "",
+  accessGroup: [],
+  cardType: "",
+  pinNo: "",
+  useAsLiftCard: false,
+  liftAccessLevel: "",
+  isActivate: true,
+  isAntiPassBack: false,
+  status: "",
+  org: "",
+  site: "",
+  unit: "",
+  assign: "",
+});
+const selectedCardId = ref<string | null>(null);
+
+const { getAll: _getAllCards, deleteById: _deleteCard } = useCard();
+
+const {
+  data: getCardReq,
+  refresh: getCards,
+  status: getAllReqStatus,
+} = useLazyAsyncData(
+  "get-all-cards",
+  () =>
+    _getAllCards({
+      page: page.value,
+      search: searchText.value,
+      // search: headerSearch.value,
+    }),
+  {
+    watch: [page, searchText],
+  }
+);
+
+const loading = computed(() => getAllReqStatus.value === "pending");
+
+watchEffect(() => {
+  if (getCardReq.value) {
+    items.value = getCardReq.value.items;
+    pages.value = getCardReq.value.pages;
+    pageRange.value = getCardReq.value.pageRange;
+  }
+});
+
+function setCard({ mode = "create", dialog = true, data = {} as TCard } = {}) {
+  if (mode === "create") {
+    createDialog.value = dialog;
+  } else if (mode === "edit") {
+    editDialog.value = dialog;
+    selectedCard.value = data;
+  } else if (mode === "preview") {
+    previewDialog.value = dialog;
+    selectedCard.value = data;
+  }
+}
+
+function successCreate() {
+  createDialog.value = false;
+  getCards();
+  showMessage("Card created successfully!", "success");
+}
+
+function successUpdate() {
+  editDialog.value = false;
+  previewDialog.value = false;
+  getCards();
+  showMessage("Card updated successfully!", "success");
+}
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function tableRowClickHandler(_: any, data: any) {
+  selectedCard.value = data.item as TCard;
+  previewDialog.value = true;
+}
+
+function openEditDialog() {
+  editDialog.value = true;
+}
+
+function openDeleteDialog() {
+  confirmDialog.value = true;
+  message.value = "";
+}
+
+function openReplaceDialog() {
+  replaceDialog.value = true;
+}
+
+async function handleDeleteCard() {
+  deleteLoading.value = true;
+  try {
+    await _deleteCard(selectedCard.value._id ?? "");
+    await getCards();
+    selectedCardId.value = null;
+    confirmDialog.value = false;
+    previewDialog.value = false;
+  } catch (error: any) {
+    message.value = error?.response?._data?.message || "Failed to delete card";
+  } finally {
+    deleteLoading.value = false;
+  }
+}
+</script>

package/components/Avatar/Main.vue

@@ -0,0 +1,68 @@
+<template>
+    <v-avatar :color="getColor(name || id)" :size="size">
+        <v-img v-if="imageSrc" alt="John" :src="imageUrl" />
+        <span v-else :style="{
+            fontSize: `${fontSize}px`,
+            lineHeight: `${size}px`
+        }">{{ initials }}</span>
+    </v-avatar>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+    name: {
+        type: String,
+        default: ""
+    },
+    color: {
+        type: String,
+        default: 'red'
+    },
+    size: {
+        type: Number,
+        default: 40
+    },
+    id: {
+        type: String, //fallback for constant default color without name
+        default: ""
+    },
+    imageSrc:{
+        type: String,
+        default: ""
+    }
+
+})
+
+
+const { getNameInitials } = useUtils();
+const { getFileUrl } = useFile();
+
+const initials = computed(() => {
+    return getNameInitials(props.name)
+})
+
+const fontSize = computed(() => Math.round(props.size * 0.5))
+
+function getColor(str?: string): string {
+    if(!str) return "grey"
+
+    let hash = 0
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash << 5) - hash + str.charCodeAt(i)
+        hash |= 0 // Convert to 32-bit integer
+    }
+
+    const hue = Math.abs(hash) % 360
+    const saturation = 60 + (Math.abs((hash >> 3) % 20)) // 60–80%
+    const lightness = 45 + (Math.abs((hash >> 5) % 15)) // 45–60%
+
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`
+}
+
+const imageUrl = computed(() => {
+    return getFileUrl(props?.imageSrc || '')
+})
+
+</script>
+
+<style scoped></style>

package/components/BillingMain.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12">
+      <v-card
+        width="100%"
+        variant="outlined"
+        border="thin"
+        rounded="lg"
+        :loading="false"
+      >
+        <v-toolbar density="compact" color="grey-lighten-4">
+          <template #prepend>
+            <v-btn fab icon density="comfortable">
+              <v-icon>mdi-refresh</v-icon>
+            </v-btn>
+          </template>
+          <template #append>
+            <v-row no-gutters justify="end" align="center">
+              <span class="mr-2 text-caption text-fontgray">
+                {{ pageRange }}
+              </span>
+              <local-pagination v-model="page" :length="pages" />
+            </v-row>
+          </template>
+        </v-toolbar>
+
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          item-value="_id"
+          items-per-page="20"
+          fixed-header
+          hide-default-footer
+          hide-default-header
+          style="max-height: calc(100vh - (180px))"
+        >
+          <template #item.permissions="{ value }">
+            <span class="text-caption font-weight-bold text-capitalize">
+              permissions
+            </span>
+            <v-chip>{{ value.length }}</v-chip>
+          </template>
+
+          <template #item.nature="{ item }">
+            <span class="text-capitalize">
+              {{ item.nature }}
+            </span>
+          </template>
+        </v-data-table>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const items = ref<Array<Record<string, any>>>([]);
+
+const headers = [
+  { title: "Name", value: "name" },
+  { title: "Nature", value: "nature" },
+];
+</script>

package/components/BtnUploadFile.vue

@@ -0,0 +1,139 @@
+<template>
+  <v-input
+    :label="label"
+    :error="!!errorMessage"
+    :error-messages="errorMessage"
+    :hide-details="readOnly ?? !!value"
+    class="btn-input-file"
+  >
+    <template #default>
+      <v-row no-gutters>
+        <v-col v-if="value || readOnly" cols="12">
+          <v-row no-gutters>
+            <v-card
+              variant="outlined"
+              border="thin"
+              class="px-4 text-caption font-weight-medium"
+              :rounded="readOnly ? '' : '0 s'"
+              height="36"
+              @click="emit('click:view')"
+            >
+              <v-row no-gutters class="fill-height" align="center">
+                {{ value ? "View attachment" : "No file attached" }}
+              </v-row>
+            </v-card>
+            <v-card
+              v-if="!readOnly"
+              variant="outlined"
+              border="s-0 thin"
+              rounded="0 e"
+              class="px-4 d-inline"
+              height="36"
+              @click="emit('click:close')"
+            >
+              <v-row no-gutters class="fill-height" align="center">
+                <v-icon size="small"> mdi-close </v-icon>
+              </v-row>
+            </v-card>
+          </v-row>
+        </v-col>
+
+        <v-col v-else cols="12">
+          <v-btn
+            variant="outlined"
+            border="thin"
+            class="text-none"
+            :prepend-icon="value ? '' : 'mdi-tray-arrow-up'"
+            :disabled="loading"
+            :loading="loading"
+            @click="selectAttachment"
+          >
+            Add file
+          </v-btn>
+        </v-col>
+      </v-row>
+
+      <v-file-input
+        v-show="false"
+        v-model="attachment"
+        multiple
+        accept="image/*"
+        :class="`attachment-input-${inputClass}`"
+        :name="name + 'custom-input-file'"
+        @change="uploadAttachment"
+      />
+    </template>
+  </v-input>
+</template>
+
+<script setup lang="ts">
+const value = defineModel<string>({ required: true, default: "" });
+const attachment = ref<File | null>(null);
+const loading = ref(false);
+
+const emit = defineEmits(["click:view", "click:close", "upload"]);
+
+const { addFile } = useFile();
+const inputClass = Date.now().toString();
+
+function selectAttachment() {
+  const input = document.querySelector(
+    `.attachment-input-${inputClass} input`
+  ) as HTMLInputElement;
+  input.click();
+}
+
+async function uploadAttachment(e: Event) {
+  loading.value = true;
+  const files = (e.target as HTMLInputElement).files;
+
+  if (files && files.length > 0) {
+    const file = files[0];
+
+    try {
+      const res = await addFile(file);
+      value.value = res.id as string;
+      await emit("upload", res);
+    } catch (error) {
+      console.log(error);
+    }
+  } else {
+    console.log("No file selected");
+  }
+  loading.value = false;
+}
+
+// Other props (optional)
+const { label, rules, name, readOnly } = defineProps({
+  label: {
+    type: String,
+    default: "Rating",
+  },
+  // Array of validation functions: (number) => true | string
+  rules: {
+    type: Array<Function>,
+    default: () => [],
+  },
+  name: {
+    type: String,
+    required: true,
+    default: "button-upload-file",
+  },
+  readOnly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/**
+ * Compute the first failed validation rule, if any.
+ * Each rule returns true (if valid) or a string (if invalid).
+ */
+const errorMessage = computed(() => {
+  for (const rule of rules) {
+    const result = rule(attachment.value || value.value);
+    return typeof result === "string" ? result : null;
+  }
+  return null;
+});
+</script>