@7365admin1/layer-common 1.10.0 → 1.10.2

package/components/HygieneUpdateMoreAction.vue

@@ -0,0 +1,238 @@
+<template>
+  <v-card width="100%">
+    <v-toolbar>
+      <template v-if="$slots.header">
+        <slot name="header" :title="title" :onClose="onClose" />
+      </template>
+      <template v-else>
+        <v-row no-gutters class="fill-height px-6" align="center">
+          <span class="font-weight-bold text-h5 text-capitalize">{{
+            title
+          }}</span>
+        </v-row>
+      </template>
+    </v-toolbar>
+
+    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+      <slot name="content" />
+    </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="emit('close')"
+            height="48"
+          >
+            Close
+          </v-btn>
+        </v-col>
+
+        <v-col cols="6" class="pa-0">
+          <v-menu>
+            <template #activator="{ props }">
+              <v-btn
+                block
+                variant="flat"
+                color="black"
+                class="text-none"
+                height="48"
+                :disabled="disabled"
+                v-bind="props"
+                tile
+              >
+                More actions
+              </v-btn>
+            </template>
+
+            <v-list class="pa-0 rounded-0">
+              <v-list-item
+                v-if="showQrButton && qrButtonLabel"
+                @click="emit('showqr')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ qrButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="showViewStock && viewButtonLabel"
+                @click="emit('viewStock')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ viewButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="showAddStock && addStockButtonLabel"
+                @click="emit('addstock')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ addStockButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="showApproveRequest && appproveRequestItemButtonLabel"
+                @click="emit('approveRequest')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ appproveRequestItemButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="showDisapproveRequest && disapproveRequestItemButtonLabel"
+                @click="emit('disapproveRequest')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ disapproveRequestItemButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="showRequestItem && requestItemButtonLabel"
+                @click="emit('requestItem')"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ requestItemButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item v-if="canUpdate" @click="emit('edit')">
+                <v-list-item-title class="text-subtitle-2">
+                  {{ editButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+
+              <v-list-item
+                v-if="canDelete"
+                @click="emit('delete')"
+                class="text-red"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ deleteButtonLabel }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-col>
+      </v-row>
+    </v-toolbar>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+const prop = defineProps({
+  canUpdate: {
+    type: Boolean,
+    default: true,
+  },
+  canDelete: {
+    type: Boolean,
+    default: true,
+  },
+  editButtonLabel: {
+    type: String,
+    default: "Edit Area",
+  },
+  deleteButtonLabel: {
+    type: String,
+    default: "Delete Area",
+  },
+
+  qrButtonLabel: {
+    type: String,
+    default: "Show QR",
+  },
+  showQrButton: {
+    type: Boolean,
+    default: false,
+  },
+  addStockButtonLabel: {
+    type: String,
+    default: "Add Stock",
+  },
+  viewButtonLabel: {
+    type: String,
+    default: "View Stock",
+  },
+  showAddStock: {
+    type: Boolean,
+    default: false,
+  },
+  showViewStock: {
+    type: Boolean,
+    default: false,
+  },
+  requestItemButtonLabel: {
+    type: String,
+    default: "Request Item",
+  },
+
+  appproveRequestItemButtonLabel: {
+    type: String,
+    default: "Approve Request",
+  },
+
+  showApproveRequest: {
+    type: Boolean,
+    default: false,
+  },
+  showDisapproveRequest: {
+    type: Boolean,
+    default: false,
+  },
+  disapproveRequestItemButtonLabel: {
+    type: String,
+    default: "Disapprove Request",
+  },
+  showRequestItem: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: "Actions",
+  },
+});
+
+const emit = defineEmits([
+  "close",
+  "edit",
+  "delete",
+  "showqr",
+  "addstock",
+  "viewStock",
+  "requestItem",
+  "approveRequest",
+  "disapproveRequest",
+]);
+const {
+  canUpdate,
+  editButtonLabel,
+  deleteButtonLabel,
+
+  qrButtonLabel,
+  showQrButton,
+  addStockButtonLabel,
+  viewButtonLabel,
+  showAddStock,
+  showViewStock,
+  title,
+  requestItemButtonLabel,
+  showRequestItem,
+  disabled,
+} = prop;
+</script>
+
+<style scoped></style>

package/components/ManageChecklistMain.vue

@@ -0,0 +1,384 @@
+<template>
+  <v-row no-gutters align="center" justify="center">
+    <v-col cols="12" lg="12">
+      <v-row no-gutters class="mb-4">
+        <v-col cols="auto">
+          <v-btn variant="text" color="primary" class="text-none" @click="back">
+            <v-icon left>mdi-arrow-left</v-icon>
+            Back
+          </v-btn>
+        </v-col>
+      </v-row>
+      <TableHygiene
+        ref="tableHygieneRef"
+        :title="'Cleaner Checklist'"
+        :headers="headers"
+        :items="items"
+        :selected="selectedItems"
+        :item-value="'unit'"
+        v-model:page="page"
+        :pages="pages"
+        :pageRange="pageRange"
+        :loading="loading"
+        :no-data-text="`No checklist found`"
+        :show-header="true"
+        :can-manage-schedule-tasks="canManageScheduleTasks"
+        :can-add-remarks="canAddRemarks"
+        @refresh="getUnitCleanerChecklistRefresh"
+        @update:selected="selectedItems = $event"
+        @action-click="handleActionClick"
+        @request-completion-dialog="openCompletionDialog"
+      />
+    </v-col>
+  </v-row>
+
+  <v-dialog v-model="showCompletionModal" max-width="600" persistent>
+    <v-card>
+      <v-card-title class="text-h5 pa-4">
+        {{
+          modalData.currentSet !== undefined
+            ? `Set ${modalData.currentSet} Completed`
+            : "All Items Checked"
+        }}
+      </v-card-title>
+
+      <v-divider />
+
+      <v-card-text class="pa-4">
+        <v-row>
+          <v-col cols="12">
+            <InputLabel
+              title="Remarks (Optional)"
+              :required="false"
+              class="mb-2"
+            />
+            <v-textarea
+              v-model="modalData.remark"
+              placeholder="Enter your remarks here"
+              rows="4"
+              variant="outlined"
+              density="comfortable"
+              hide-details
+            />
+          </v-col>
+
+          <v-col cols="12">
+            <v-divider class="mb-4" />
+            <PhotoUpload
+              title="Take/Upload Photo"
+              :required="false"
+              v-model="modalData.photos"
+              v-model:photo-ids="modalData.photoIds"
+              @error="handlePhotoError"
+            />
+          </v-col>
+        </v-row>
+      </v-card-text>
+
+      <v-divider />
+
+      <v-card-actions class="pa-4">
+        <v-spacer />
+        <v-btn color="grey" variant="text" @click="closeModal"> Cancel </v-btn>
+        <v-btn
+          color="primary"
+          variant="flat"
+          @click="submitModal"
+          :disabled="!isModalValid"
+        >
+          Submit
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script setup lang="ts">
+import { useCleaningSchedulePermission } from "../composables/useCleaningSchedulePermission";
+import useCleaningSchedules from "../composables/useCleaningSchedules";
+
+const props = defineProps({
+  orgId: { type: String, default: "" },
+  site: { type: String, default: "" },
+  cleanerChecklistId: { type: String, default: "" },
+  scheduleAreaId: { type: String, default: "" },
+  type: { type: String, default: "cleaner" },
+});
+
+const { getUnitCleanerChecklist, updateUnitChecklist } = useCleaningSchedules();
+const { getBySiteAsServiceProvider } = useCustomerSite();
+const { back } = useUtils();
+const { canAddRemarks, canManageScheduleTasks } =
+  useCleaningSchedulePermission();
+
+const page = ref<number>(1);
+const pages = ref<number>(0);
+const pageRange = ref<string>("-- - -- of --");
+const items = ref<TChecklistSet[]>([]);
+const selectedItems = ref<Array<{ unit: string; set: number }>>([]);
+const submitting = ref<boolean>(false);
+const message = ref<string>("");
+const messageSnackbar = ref<boolean>(false);
+const messageColor = ref<string>("");
+const categories = ref<
+  Array<{ title: string; value: string; subtitle: string }>
+>([]);
+const tableHygieneRef = ref<any>(null);
+
+const headers = [{ title: "Name", value: "name" }];
+
+const { data: getCategoriesReq } = await useLazyAsyncData(
+  "get-categories-for-work-order",
+  () => getBySiteAsServiceProvider(props.site)
+);
+
+// Modal state management
+const showCompletionModal = ref<boolean>(false);
+const modalData = reactive({
+  remark: "",
+  photos: [] as string[],
+  photoIds: [] as string[],
+  currentSet: undefined as number | undefined,
+  approvedItems: [] as Array<{ key: string; item: any; action: "approve" }>,
+  lastApprovedKey: null as string | null,
+});
+
+const isModalValid = computed(() => {
+  return modalData.remark?.trim().length > 0;
+});
+
+const {
+  data: getUnitCleanerChecklistReq,
+  refresh: getUnitCleanerChecklistRefresh,
+  pending: loading,
+} = await useLazyAsyncData(
+  `get-all-unit-cleaner-checklist`,
+  () =>
+    getUnitCleanerChecklist({
+      page: page.value,
+      scheduleAreaId: props.scheduleAreaId,
+    }),
+  {
+    watch: [() => page.value, () => props.scheduleAreaId],
+  }
+);
+
+watchEffect(() => {
+  if (getCategoriesReq.value) {
+    categories.value = getCategoriesReq.value.map((i: any) => ({
+      title: i.nature.replace(/_/g, " "),
+      subtitle: i.title,
+      value: i._id.org,
+    }));
+  }
+});
+
+watchEffect(() => {
+  if (getUnitCleanerChecklistReq.value) {
+    items.value = getUnitCleanerChecklistReq.value.items;
+    page.value = getUnitCleanerChecklistReq.value.page;
+    pages.value = getUnitCleanerChecklistReq.value.pages;
+    pageRange.value = getUnitCleanerChecklistReq.value.pageRange;
+  }
+});
+
+watchEffect(() => {
+  const completed: Array<{ unit: string; set: number }> = [];
+
+  items.value.forEach((checklistSet: TChecklistSet) => {
+    checklistSet.units?.forEach((unit: TUnitChecklistItem) => {
+      if (
+        unit.status?.toLowerCase() === "completed" ||
+        (unit as any).approve === true
+      ) {
+        completed.push({ unit: unit.unit, set: checklistSet.set });
+      }
+    });
+  });
+
+  selectedItems.value = completed;
+});
+
+function showMessage(msg: string, color: string = "error"): void {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
+function resetModalData(): void {
+  modalData.remark = "";
+  modalData.photos = [];
+  modalData.photoIds = [];
+  modalData.currentSet = undefined;
+  modalData.approvedItems = [];
+  modalData.lastApprovedKey = null;
+}
+
+function closeModal(): void {
+  const setNumber = modalData.currentSet;
+  showCompletionModal.value = false;
+  resetModalData();
+
+  // Notify TableHygiene to revert approval states
+  if (setNumber !== undefined && tableHygieneRef.value) {
+    tableHygieneRef.value.revertSetApprovals(setNumber);
+  }
+}
+
+function handlePhotoError(errorMessage: string): void {
+  console.error("Photo upload error:", errorMessage);
+  showMessage(errorMessage, "error");
+}
+
+function openCompletionDialog({
+  setNumber,
+  approvedItems,
+  lastApprovedKey,
+}: {
+  setNumber: number | undefined;
+  approvedItems: Array<{ key: string; item: any; action: "approve" }>;
+  lastApprovedKey: string | null;
+}): void {
+  // If user does not need to add remarks, perform approvals immediately
+  if (!canAddRemarks.value) {
+    // call update directly without opening modal
+    _updateUnitChecklist({
+      remark: "",
+      photos: [],
+      photoIds: [],
+      approvedItems,
+      lastApprovedKey,
+      setNumber,
+    }).catch((err) => {
+      console.error("Error auto-approving set:", err);
+      showMessage(err?.message || "Failed to approve set", "error");
+    });
+    return;
+  }
+
+  modalData.currentSet = setNumber;
+  modalData.approvedItems = approvedItems;
+  modalData.lastApprovedKey = lastApprovedKey;
+  showCompletionModal.value = true;
+}
+
+async function submitModal(): Promise<void> {
+  if (!isModalValid.value) return;
+
+  await _updateUnitChecklist({
+    remark: modalData.remark,
+    photos: modalData.photos,
+    photoIds: modalData.photoIds,
+    approvedItems: modalData.approvedItems,
+    lastApprovedKey: modalData.lastApprovedKey,
+    setNumber: modalData.currentSet,
+  });
+
+  closeModal();
+}
+
+async function handleActionClick(data: {
+  item: TFlattenedUnitItem;
+  action: "approve" | "reject";
+}): Promise<void> {
+  const { item, action } = data;
+
+  if (!item?.unit || item?.set === undefined) {
+    showMessage("Invalid unit or set", "error");
+    return;
+  }
+
+  const isApproved = selectedItems.value.some(
+    (s) => s.unit === item.unit && s.set === item.set
+  );
+
+  if (isApproved && action === "approve") {
+    showMessage("Unit already approved", "info");
+    return;
+  }
+
+  submitting.value = true;
+
+  try {
+    const checklistId = props.scheduleAreaId;
+    const unitId = item.unit;
+    const setNumber = item.set;
+
+    const response = await updateUnitChecklist(
+      checklistId,
+      unitId,
+      setNumber,
+      action
+    );
+
+    showMessage(
+      response?.message ||
+        `Unit ${action === "approve" ? "approved" : "rejected"} successfully`,
+      "success"
+    );
+
+    await getUnitCleanerChecklistRefresh();
+  } catch (error: any) {
+    console.error("Error updating unit checklist:", error);
+    showMessage(error?.message || "Failed to update checklist", "error");
+  } finally {
+    submitting.value = false;
+  }
+}
+
+async function _updateUnitChecklist({
+  remark,
+  photoIds,
+  approvedItems,
+  setNumber,
+}: {
+  remark: string;
+  photos: string[];
+  photoIds: string[];
+  approvedItems: Array<{ key: string; item: any; action: "approve" }>;
+  lastApprovedKey: string | null;
+  setNumber: number | undefined;
+}) {
+  submitting.value = true;
+
+  try {
+    if (!approvedItems || approvedItems.length === 0) {
+      throw new Error("No items to approve");
+    }
+
+    if (!remark?.trim()) {
+      throw new Error("Remark is required");
+    }
+
+    const checklistId = props.scheduleAreaId;
+
+    for (let i = 0; i < approvedItems.length; i++) {
+      const { item } = approvedItems[i];
+      const unitId = item.unit;
+      const setNum = item.set;
+      const isLastItem = i === approvedItems.length - 1;
+
+      await updateUnitChecklist(
+        checklistId,
+        unitId,
+        setNum,
+        "approve",
+        isLastItem ? remark : undefined,
+        isLastItem ? photoIds : undefined
+      );
+    }
+
+    showMessage(`Set ${setNumber} approved successfully`, "success");
+
+    // Refresh data
+    await getUnitCleanerChecklistRefresh();
+  } catch (error: any) {
+    console.error("Error approving set:", error);
+    showMessage(error?.message || "Failed to approve set", "error");
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>

package/components/MemberMain.vue

@@ -41,20 +41,18 @@
           </template>
 
           <template #extension>
-            <v-tabs>
+            <v-tabs
+              v-model="selectedStatus"
+              color="primary"
+              :height="40"
+              @update:model-value="toRoute"
+              class="w-100"
+            >
               <v-tab
-                v-for="tab in [
-                  { name: 'Active', status: 'active' },
-                  { name: 'Suspended', status: 'suspended' },
-                ]"
+                v-for="tab in tabOptions"
+                :value="tab.status"
                 :key="tab.status"
-                :to="{
-                  name: props.route,
-                  params: setRouteParams({
-                    status: tab.status,
-                    orgId: props.orgId,
-                  }),
-                }"
+                class="text-capitalize"
               >
                 {{ tab.name }}
               </v-tab>
@@ -331,18 +329,48 @@ const {
 const { headerSearch } = useLocal();
 const { replaceMatch, setRouteParams, requiredRule } = useUtils();
 
+const selectedStatus = ref(props.status);
+const route = useRoute();
+const orgId = route.params.org as string;
+const routeName = (useRoute().name as string) ?? "";
+
+const tabOptions = [
+  { name: "Active", status: "active" },
+  { name: "Suspended", status: "suspended" },
+];
+
+function toRoute(status: any) {
+  const obj = tabOptions.find((x) => x.status === status);
+  if (!obj) return;
+  page.value = 1;
+  navigateTo({
+    name: routeName,
+    params: {
+      org: orgId,
+    },
+    query: {
+      status: obj.status,
+    },
+  });
+}
+
 const {
   data: getAllReq,
   refresh: getAll,
   status: getAllReqStatus,
-} = useLazyAsyncData("get-all-members", () =>
-  _getAll({
-    status: props.status,
-    org: props.orgId,
-    search: headerSearch.value,
-    page: page.value,
-    type: props.type,
-  })
+} = useLazyAsyncData(
+  "get-all-members",
+  () =>
+    _getAll({
+      status: selectedStatus.value,
+      org: orgId,
+      search: headerSearch.value,
+      page: page.value,
+      type: props.type,
+    }),
+  {
+    watch: [page, () => route.query],
+  }
 );
 
 const loading = computed(() => getAllReqStatus.value === "pending");