@7365admin1/layer-common 1.9.0 → 1.10.1

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");

package/components/MyAttendanceMain.vue

@@ -0,0 +1,224 @@
+<template>
+  <v-row no-gutters align="center" justify="center">
+    <v-col cols="12" lg="12">
+      <TableMain
+        title="Attendance Records"
+        :items="items"
+        :headers="headers"
+        :loading="loading"
+        :show-header="true"
+        v-model:page="page"
+        :pages="pages"
+        :pageRange="pageRange"
+        no-data-text="No attendance records found."
+        @row-click="handleRowClick"
+      >
+        <template #actions>
+          <v-row no-gutters align="center" class="w-100">
+            <v-col cols="auto" v-if="canCheckInOut">
+              <v-btn
+                class="text-none"
+                rounded="pill"
+                variant="tonal"
+                size="large"
+                @click="onCreateItem"
+              >
+                {{ hasCheckedInToday ? "Check Out" : "Check In" }}
+              </v-btn>
+            </v-col>
+            <v-spacer />
+
+            <v-col cols="auto">
+              <v-text-field
+                v-model="searchInput"
+                density="compact"
+                placeholder="Search"
+                clearable
+                width="300"
+                append-inner-icon="mdi-magnify"
+                hide-details
+              />
+            </v-col>
+          </v-row>
+        </template>
+
+        <template #item.checkInTimestamp="{ item }">
+          <span>{{ formatDate(item.checkInTimestamp) }}</span>
+        </template>
+
+        <template #item.checkOutTimestamp="{ item }">
+          <span>{{
+            item.checkOutTimestamp ? formatDate(item.checkOutTimestamp) : "N/A"
+          }}</span>
+        </template>
+
+        <template #item.totalHours="{ item }">
+          <span>{{ calculateTotalHours(item) }}</span>
+        </template>
+      </TableMain>
+    </v-col>
+  </v-row>
+
+  <AttendanceCheckInOutDialog
+    v-model="dialogShowForm"
+    :action="currentAction"
+    @saved="onAttendanceSaved"
+    @close="dialogShowForm = false"
+  />
+
+  <AttendanceDetailsDialog
+    v-model="dialogShowMoreActions"
+    :attendance-id="selectedAttendanceId"
+    @close="dialogShowMoreActions = false"
+  />
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script setup lang="ts">
+import useAttendance from "../composables/useAttendance";
+import { useAttendancePermission } from "../composables/useAttendancePermission";
+
+const props = defineProps({
+  orgId: { type: String, default: "" },
+  site: { type: String, default: "" },
+});
+
+const { canViewOwnAttendance, canCheckInOut, canViewAttendanceDetails } =
+  useAttendancePermission();
+
+const searchInput = ref("");
+const dialogShowForm = ref(false);
+const currentAction = ref<"checkIn" | "checkOut">("checkIn");
+const messageSnackbar = ref(false);
+const message = ref("");
+const messageColor = ref("success");
+
+const items = ref<Array<Record<string, any>>>([]);
+const submitting = ref(false);
+
+const headers = [
+  { title: "Team Member", value: "userName" },
+  { title: "Check In", value: "checkInTimestamp" },
+  { title: "Check Out", value: "checkOutTimestamp" },
+  { title: "Total Hours", value: "totalHours" },
+];
+
+const { getMyAttendances, checkIn, checkOut } = useAttendance();
+const { formatDate } = useUtils();
+
+const dialogShowMoreActions = ref(false);
+const selectedAttendanceId = ref("");
+const todayAttendance = ref<Record<string, any> | null>(null);
+
+const hasCheckedInToday = computed(() => {
+  return (
+    todayAttendance.value &&
+    todayAttendance.value.checkInTimestamp &&
+    !todayAttendance.value.checkOutTimestamp
+  );
+});
+
+function calculateTotalHours(attendance: any): string {
+  const checkInTime =
+    attendance.checkInTimestamp || attendance.checkIn?.timestamp;
+  const checkOutTime =
+    attendance.checkOutTimestamp || attendance.checkOut?.timestamp;
+
+  if (!checkInTime) return "N/A";
+  if (!checkOutTime) return "In Progress";
+
+  const checkIn = new Date(checkInTime);
+  const checkOut = new Date(checkOutTime);
+  const diffMs = checkOut.getTime() - checkIn.getTime();
+  const diffHours = diffMs / (1000 * 60 * 60);
+
+  return `${diffHours.toFixed(2)} hrs`;
+}
+
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const {
+  data: getMyAttendancesReq,
+  refresh: getMyAttendancesRefresh,
+  pending: loading,
+} = await useLazyAsyncData(
+  "get-my-attendances",
+  () =>
+    getMyAttendances({
+      page: page.value,
+      search: searchInput.value,
+      site: props.site,
+    }),
+  {
+    watch: [page, searchInput, () => props.site],
+  }
+);
+
+watchEffect(() => {
+  if (getMyAttendancesReq.value) {
+    items.value = getMyAttendancesReq.value.items;
+    pages.value = getMyAttendancesReq.value.pages;
+    pageRange.value = getMyAttendancesReq.value.pageRange;
+
+    const today = new Date().toISOString().split("T")[0];
+    todayAttendance.value =
+      getMyAttendancesReq.value.items.find((item: any) => {
+        if (!item.checkInTimestamp) return false;
+        const itemDate = new Date(item.checkInTimestamp)
+          .toISOString()
+          .split("T")[0];
+        return itemDate === today && !item.checkOutTimestamp;
+      }) || null;
+  }
+});
+
+const onCreateItem = () => {
+  currentAction.value = hasCheckedInToday.value ? "checkOut" : "checkIn";
+  dialogShowForm.value = true;
+};
+
+async function handleRowClick(data: any) {
+  const id = (data?.item as any)?._id;
+  if (!id) return;
+
+  selectedAttendanceId.value = id;
+  dialogShowMoreActions.value = true;
+}
+
+const onAttendanceSaved = async (
+  payload: TAttendanceCheckIn | TAttendanceCheckOut
+) => {
+  submitting.value = true;
+
+  try {
+    let response;
+    if (currentAction.value === "checkIn") {
+      response = await checkIn(props.site, payload as TAttendanceCheckIn);
+    } else {
+      if (!todayAttendance.value?._id) {
+        throw new Error("Attendance ID not found");
+      }
+      response = await checkOut(
+        todayAttendance.value._id,
+        payload as TAttendanceCheckOut
+      );
+    }
+
+    message.value = response.message;
+    messageColor.value = "success";
+    messageSnackbar.value = true;
+    dialogShowForm.value = false;
+
+    await getMyAttendancesRefresh();
+  } catch (err: any) {
+    message.value = err.data?.message;
+    messageColor.value = "error";
+    messageSnackbar.value = true;
+  } finally {
+    submitting.value = false;
+  }
+};
+</script>