@7365admin1/layer-common 1.8.0

package/components/SignaturePad.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <Vue3Signature
+      ref="signatureRef"
+      :sigOption="options"
+      @save="onSave"
+      style="border: 1px solid #ccc; width: 100%; height: 200px"
+    />
+    <div class="mt-4 flex justify-end">
+      <button @click="clear" class="px-4 py-2 bg-red-500 rounded">Clear</button>
+      <button @click="save" class="px-4 py-2 bg-green-500 rounded ml-2">
+        Save
+      </button>
+    </div>
+
+    <div style="position: fixed; top: 20px; right: 20px; z-index: 9999">
+      <Snackbar
+        v-model="messageSnackbar"
+        :text="message"
+        :color="messageColor"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, defineEmits } from "vue";
+import Vue3Signature from "vue3-signature";
+
+defineProps({
+  modelValue: String,
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const signatureRef = ref();
+
+const options = {
+  penColor: "black",
+  backgroundColor: "white",
+};
+
+// Snackbar control
+const message = ref("");
+const messageColor = ref("");
+const messageSnackbar = ref(false);
+
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function onSave(data: string) {
+  emit("update:modelValue", data);
+  showMessage("Signature saved successfully.", "success");
+}
+
+function save() {
+  const signatureData = signatureRef.value?.save("image/jpeg");
+  if (signatureData) {
+    emit("update:modelValue", signatureData);
+    showMessage("Signature saved successfully.", "success");
+  } else {
+    showMessage("No signature to save.", "error");
+  }
+}
+
+function clear() {
+  signatureRef.value?.clear();
+  showMessage("Signature cleared.", "success");
+}
+</script>

package/components/Snackbar.vue

@@ -0,0 +1,23 @@
+<template>
+  <v-snackbar v-model="snackbar" :color="props.color" :z-index="100000000" >
+    {{ props.text }}
+
+    <template #actions>
+      <v-btn variant="text" @click="snackbar = false"> Close </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script setup lang="ts">
+const snackbar = defineModel({ type: Boolean });
+const props = defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+  color: {
+    type: String,
+    default: "primary",
+  },
+});
+</script>

package/components/SpecificAttr.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-row no-gutters class="pa-4" justify="center">
+    <v-col cols="12" :lg="props.lg" :md="props.md" :sm="props.sm">
+      <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">{{ 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>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits(["back"]);
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Title",
+  },
+  lg: {
+    type: String,
+    default: "4",
+  },
+  md: {
+    type: String,
+    default: "6",
+  },
+  sm: {
+    type: String,
+    default: "6",
+  },
+  fluid: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

package/components/SupplyManagement.vue

@@ -0,0 +1,292 @@
+<template>
+  <v-row no-gutters>
+    <v-col cols="12" lg="12">
+      <TableMain
+        :title="`Units`"
+        :items="items"
+        :headers="headers"
+        :loading="loading"
+        :show-header="true"
+        v-model:page="page"
+        :pages="pages"
+        :pageRange="pageRange"
+        :no-data-text="`No supplies found.`"
+        @refresh="updatePage"
+        :canCreate="true"
+        createLabel="Add Supply"
+        @row-click="tableRowClickHandler"
+      >
+        <template #actions>
+          <v-row no-gutters align="center" class="w-100">
+            <v-col cols="auto">
+              <v-btn
+                class="text-none"
+                rounded="pill"
+                variant="tonal"
+                size="large"
+              >
+                Add Supply
+              </v-btn>
+            </v-col>
+
+            <v-spacer />
+
+            <v-col cols="auto">
+              <v-text-field
+                v-model="searchText"
+                density="compact"
+                placeholder="Search"
+                clearable
+                width="300"
+                append-inner-icon="mdi-magnify"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+        </template>
+
+        <template #item.block="{ value }">
+          {{ value ? `blk ${value}` : "" }}
+        </template>
+      </TableMain>
+    </v-col>
+  </v-row>
+</template>
+<script setup lang="ts">
+const searchText = ref("");
+const loading = ref(false);
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("1-10 of 10");
+const items = ref<Array<Record<string, any>>>([]);
+
+const headers: Array<Record<string, any>> = [
+  { title: "Item", value: "item", align: "start" },
+  //   { title: "Type", value: "type", align: "start" },
+  //   { title: "Created By", value: "createdByName", align: "start" },
+  //   { title: "Last Updated", value: "lastUpdated", align: "start" },
+  //   { title: "Available Qty", value: "availableQty", align: "start" },
+  { title: "Stock Qty", value: "stockQty", align: "start" },
+  { title: "", value: "action-table", align: "end" },
+];
+
+watchEffect(() => {
+  items.value = [
+    {
+      item: "Multi-Surface Cleaner",
+      type: "Consumable",
+      createdByName: "John Reyes",
+      lastUpdated: "2025-11-20",
+      availableQty: 45,
+      stockQty: 100,
+    },
+    {
+      item: "Disinfectant Spray",
+      type: "Consumable",
+      createdByName: "Marianne Santos",
+      lastUpdated: "2025-11-18",
+      availableQty: 30,
+      stockQty: 80,
+    },
+    {
+      item: "Glass Cleaner",
+      type: "Consumable",
+      createdByName: "Evan Lim",
+      lastUpdated: "2025-11-22",
+      availableQty: 60,
+      stockQty: 120,
+    },
+    {
+      item: "Floor Degreaser",
+      type: "Consumable",
+      createdByName: "Kristine Tan",
+      lastUpdated: "2025-11-21",
+      availableQty: 20,
+      stockQty: 50,
+    },
+    {
+      item: "Microfiber Cloth",
+      type: "Equipment",
+      createdByName: "Angela Chua",
+      lastUpdated: "2025-11-22",
+      availableQty: 120,
+      stockQty: 200,
+    },
+    {
+      item: "Toilet Brush",
+      type: "Equipment",
+      createdByName: "Miguel Perez",
+      lastUpdated: "2025-11-19",
+      availableQty: 15,
+      stockQty: 40,
+    },
+    {
+      item: "Mop Head Refill",
+      type: "Consumable",
+      createdByName: "Sarah Ong",
+      lastUpdated: "2025-11-23",
+      availableQty: 50,
+      stockQty: 100,
+    },
+    {
+      item: "Cleaning Mop Set",
+      type: "Equipment",
+      createdByName: "Jenny Ramos",
+      lastUpdated: "2025-11-21",
+      availableQty: 10,
+      stockQty: 25,
+    },
+    {
+      item: "Trash Bags (Large)",
+      type: "Consumable",
+      createdByName: "Philip Cruz",
+      lastUpdated: "2025-11-18",
+      availableQty: 90,
+      stockQty: 150,
+    },
+    {
+      item: "Air Freshener Spray",
+      type: "Consumable",
+      createdByName: "Leo Dizon",
+      lastUpdated: "2025-11-20",
+      availableQty: 75,
+      stockQty: 150,
+    },
+  ];
+  pages.value = 2;
+});
+
+async function updatePage(pageVal: any) {
+  if (pageVal == 2) {
+    items.value = [
+      {
+        item: "Vacuum Cleaner",
+        type: "Equipment",
+        createdByName: "Robert Sy",
+        lastUpdated: "2025-11-22",
+        availableQty: 4,
+        stockQty: 10,
+      },
+      {
+        item: "Dishwashing Liquid",
+        type: "Consumable",
+        createdByName: "Kristine Tan",
+        lastUpdated: "2025-11-19",
+        availableQty: 55,
+        stockQty: 110,
+      },
+      {
+        item: "Pressure Washer",
+        type: "Equipment",
+        createdByName: "Marcel Tan",
+        lastUpdated: "2025-11-24",
+        availableQty: 2,
+        stockQty: 5,
+      },
+      {
+        item: "Scrubbing Pads",
+        type: "Consumable",
+        createdByName: "Hannah Cruz",
+        lastUpdated: "2025-11-23",
+        availableQty: 80,
+        stockQty: 150,
+      },
+      {
+        item: "Squeegee Set",
+        type: "Equipment",
+        createdByName: "Darryl Go",
+        lastUpdated: "2025-11-22",
+        availableQty: 12,
+        stockQty: 30,
+      },
+    ];
+  } else {
+    items.value = [
+      {
+        item: "Multi-Surface Cleaner",
+        type: "Consumable",
+        createdByName: "John Reyes",
+        lastUpdated: "2025-11-20",
+        availableQty: 45,
+        stockQty: 100,
+      },
+      {
+        item: "Disinfectant Spray",
+        type: "Consumable",
+        createdByName: "Marianne Santos",
+        lastUpdated: "2025-11-18",
+        availableQty: 30,
+        stockQty: 80,
+      },
+      {
+        item: "Glass Cleaner",
+        type: "Consumable",
+        createdByName: "Evan Lim",
+        lastUpdated: "2025-11-22",
+        availableQty: 60,
+        stockQty: 120,
+      },
+      {
+        item: "Floor Degreaser",
+        type: "Consumable",
+        createdByName: "Kristine Tan",
+        lastUpdated: "2025-11-21",
+        availableQty: 20,
+        stockQty: 50,
+      },
+      {
+        item: "Microfiber Cloth",
+        type: "Equipment",
+        createdByName: "Angela Chua",
+        lastUpdated: "2025-11-22",
+        availableQty: 120,
+        stockQty: 200,
+      },
+      {
+        item: "Toilet Brush",
+        type: "Equipment",
+        createdByName: "Miguel Perez",
+        lastUpdated: "2025-11-19",
+        availableQty: 15,
+        stockQty: 40,
+      },
+      {
+        item: "Mop Head Refill",
+        type: "Consumable",
+        createdByName: "Sarah Ong",
+        lastUpdated: "2025-11-23",
+        availableQty: 50,
+        stockQty: 100,
+      },
+      {
+        item: "Cleaning Mop Set",
+        type: "Equipment",
+        createdByName: "Jenny Ramos",
+        lastUpdated: "2025-11-21",
+        availableQty: 10,
+        stockQty: 25,
+      },
+      {
+        item: "Trash Bags (Large)",
+        type: "Consumable",
+        createdByName: "Philip Cruz",
+        lastUpdated: "2025-11-18",
+        availableQty: 90,
+        stockQty: 150,
+      },
+      {
+        item: "Air Freshener Spray",
+        type: "Consumable",
+        createdByName: "Leo Dizon",
+        lastUpdated: "2025-11-20",
+        availableQty: 75,
+        stockQty: 150,
+      },
+    ];
+  }
+  page.value = pageVal;
+}
+
+function tableRowClickHandler(_: any, data: any) {}
+</script>

package/components/SwitchContext.vue

@@ -0,0 +1,108 @@
+<template>
+  <v-menu
+    v-model="menu"
+    location="bottom"
+    offset="5px"
+    :close-on-content-click="false"
+  >
+    <template #activator="{ props }">
+      <v-list class="pa-0">
+        <v-list-item
+          v-bind="props"
+          :key="props.title"
+          :prepend-icon="prop.icon"
+          append-icon="mdi-chevron-down"
+          :to="props.route"
+          class="text-subtitle-2 font-weight-bold"
+        >
+          <v-list-item-title class="text-truncate">
+            {{ name || `Select ${prop.title}` }}
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </template>
+
+    <v-card width="300px" rounded="lg" class="pa-4">
+      <span class="text-subtitle-2 font-weight-bold">
+        Switch {{ prop.title }} context
+      </span>
+      <v-text-field
+        v-model="search"
+        @keydown.enter="emit('search')"
+        density="compact"
+        width="100%"
+        hide-details
+        class="mb-2"
+      >
+        <template #prepend-inner>
+          <v-icon>mdi-magnify</v-icon>
+        </template>
+      </v-text-field>
+      <v-divider />
+      <v-list class="pa-0 my-2" density="compact" max-height="200px">
+        <v-list-item
+          density="compact"
+          class="text-caption font-weight-bold"
+          v-for="item in prop.items"
+          :key="item.value"
+          @click="selectItem(item.value)"
+        >
+          <v-icon size="16" class="mr-2">
+            {{ selected === item.value ? "mdi-check" : "" }}
+          </v-icon>
+
+          {{ item.text }}
+        </v-list-item>
+      </v-list>
+
+      <slot name="footer"></slot>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+  title: {
+    type: String,
+    required: true,
+    default: "app",
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    required: false,
+    default: () => [],
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: "mdi-domain",
+  },
+  logo: {
+    type: String,
+    required: false,
+    default: "",
+  },
+});
+
+const menu = defineModel<boolean>("menu", { required: false, default: false });
+const selected = defineModel<string>("selected", {
+  required: false,
+  default: "",
+});
+const search = defineModel<string>("search", {
+  required: false,
+  default: "",
+});
+
+const emit = defineEmits(["search", "select"]);
+
+const name = computed(() => {
+  return prop.items.find((item) => item.value === selected.value)?.text ?? "";
+});
+
+const selectItem = (value: string) => {
+  selected.value = value;
+  menu.value = false;
+  emit("select", value);
+};
+</script>

package/components/TableList.vue

@@ -0,0 +1,150 @@
+<template>
+  <v-card
+    width="100%"
+    variant="outlined"
+    border="thin"
+    rounded="lg"
+    :loading="loading"
+  >
+    <v-toolbar density="compact" color="grey-lighten-4">
+      <template #prepend>
+        <v-checkbox v-model="selectAll" hide-details class="mx-1"></v-checkbox>
+
+        <v-btn fab icon density="comfortable" @click="emit('refresh')">
+          <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">
+            {{ props.pageRange }}
+          </span>
+          <div class="arrow-navigation">
+            <v-btn
+              icon="mdi-chevron-left"
+              variant="text"
+              density="comfortable"
+              :disabled="page <= 1"
+              @click="decrement"
+            />
+            <v-btn
+              icon="mdi-chevron-right"
+              variant="text"
+              density="comfortable"
+              :disabled="page >= props.length"
+              @click="increment"
+            />
+          </div>
+          <slot name="action-button"></slot>
+        </v-row>
+      </template>
+
+      <template v-if="$slots.extension" v-slot:extension>
+        <slot name="extension"></slot>
+      </template>
+    </v-toolbar>
+    <div :style="{ overflowY: 'auto', height }">
+      <v-data-table
+        v-model="selected"
+        :headers="props.headers"
+        :items="props.items"
+        item-value="_id"
+        items-per-page="20"
+        show-select
+        fixed-header
+        hide-default-footer
+        hide-default-header
+        :max-height="props.height"
+        :loading="props.loading"
+        @click:row="tableRowClickHandler"
+      >
+        <template v-if="$slots.item" v-slot:item>
+          <slot name="item" :items="props.items"></slot>
+        </template>
+
+        <template v-slot:item="{ item }">
+          <tr>
+            <td v-for="col in props.headers" :key="col.value">
+              <slot :name="col.value" :item="item">
+                {{ item[col.value] }}
+              </slot>
+            </td>
+          </tr>
+        </template>
+      </v-data-table>
+    </div>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const selected = defineModel({
+  type: Array as PropType<Array<string>>,
+  default: () => [],
+});
+const page = defineModel("page", { type: Number, default: 0 });
+
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<Record<string, string>>>,
+    required: true,
+    default: () => [],
+  },
+  items: {
+    type: Array as PropType<Array<Record<string, any>>>,
+    required: true,
+    default: () => [],
+  },
+  pages: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+  pageRange: {
+    type: String,
+    required: true,
+    default: "-- - -- of --",
+  },
+  length: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+  loading: {
+    type: Boolean,
+    required: true,
+    default: true,
+  },
+  height: {
+    type: String,
+    default: "500px",
+  },
+});
+
+const emit = defineEmits(["refresh", "update:pagination", "row-click"]);
+
+function increment() {
+  page.value++;
+  emit("update:pagination", page.value);
+}
+
+function decrement() {
+  page.value--;
+  emit("update:pagination", page.value);
+}
+
+function tableRowClickHandler(_: any, row: any) {
+  const item = props.items[row.index];
+  emit("row-click", item);
+}
+
+const selectAll = ref(false);
+
+watch(selectAll, (curr) => {
+  selected.value.splice(0, selected.value.length);
+  if (curr) {
+    const ids = props.items.map((i) => i._id as string);
+    selected.value.push(...ids);
+  }
+});
+</script>