@7365admin1/layer-common 1.10.0 → 1.10.2

package/components/AreaChecklistHistoryLogs.vue

@@ -0,0 +1,235 @@
+<template>
+  <v-row no-gutters align="center" justify="center">
+    <v-col cols="12">
+      <v-card class="mx-auto">
+        <v-toolbar
+          density="compact"
+          color="grey-lighten-4"
+          class="d-flex align-center px-4 py-3"
+        >
+          <v-btn icon variant="plain" @click="back()" class="mr-2">
+            <v-icon>mdi-chevron-left</v-icon>
+          </v-btn>
+          <span class="text-h6 font-weight-bold">Area Checklist</span>
+        </v-toolbar>
+
+        <v-divider />
+
+        <v-card-text class="pa-0">
+          <v-row no-gutters>
+            <v-col
+              cols="12"
+              md="6"
+              lg="5"
+              xl="4"
+              style="border-right: 1px solid rgba(0, 0, 0, 0.12)"
+            >
+              <v-row no-gutters class="pa-6">
+                <v-col cols="12" class="mb-4">
+                  <h3 class="text-h6 font-weight-bold">Checklist Details</h3>
+                </v-col>
+
+                <v-col cols="12" class="mb-4">
+                  <v-row no-gutters>
+                    <v-col cols="12" class="mb-3">
+                      <div class="text-body-2 mb-1">Date Created:</div>
+                      <div class="text-body-1 font-weight-bold">
+                        {{ createdAt }}
+                      </div>
+                    </v-col>
+
+                    <v-col cols="12" class="mb-3">
+                      <div class="text-body-2 mb-1">Date Completed:</div>
+                      <div class="text-body-1 font-weight-bold">
+                        {{ timeOut }}
+                      </div>
+                    </v-col>
+
+                    <v-col cols="12" class="mb-3">
+                      <div class="text-body-2 mb-1">Status:</div>
+                      <v-chip
+                        class="text-capitalize text-body-2 font-weight-medium"
+                      >
+                        {{ status || "N/A" }}
+                      </v-chip>
+                    </v-col>
+                  </v-row>
+                </v-col>
+
+                <!-- <v-col cols="12" class="mb-4">
+                  <v-sheet
+                    height="220"
+                    rounded
+                    border
+                    class="d-flex align-center justify-center"
+                  >
+                    <v-img
+                      v-if="signatureUrl"
+                      :src="signatureUrl"
+                      height="220"
+                      contain
+                      class="rounded"
+                    >
+                      <template v-slot:placeholder>
+                        <div
+                          class="d-flex align-center justify-center fill-height"
+                        >
+                          <v-progress-circular
+                            color="grey-lighten-4"
+                            indeterminate
+                          ></v-progress-circular>
+                        </div>
+                      </template>
+                    </v-img>
+                    <span v-else class="text-body-2 text-grey">
+                      Completion / Signature
+                    </span>
+                  </v-sheet>
+                </v-col> -->
+
+                <!-- <v-col cols="12">
+                  <v-row no-gutters align="center">
+                    <v-col cols="auto">
+                      <v-avatar size="40" color="primary" class="mr-3">
+                        <span class="text-body-1 font-weight-bold">HS</span>
+                      </v-avatar>
+                    </v-col>
+                    <v-col>
+                      <span class="text-body-1 font-weight-medium"
+                        >Cleaner</span
+                      >
+                    </v-col>
+                  </v-row>
+                </v-col> -->
+              </v-row>
+            </v-col>
+
+            <v-col cols="12" md="6" lg="7" xl="8">
+              <v-row no-gutters class="pa-6">
+                <v-col cols="12">
+                  <h4 class="text-subtitle-1 font-weight-bold mb-3">Units</h4>
+
+                  <v-list class="pa-0">
+                    <template
+                      v-for="(checklistSet, setIndex) in unitSets"
+                      :key="`set-${setIndex}`"
+                    >
+                      <v-list-subheader
+                        v-if="checklistSet.set !== undefined"
+                        class="text-subtitle-2 font-weight-bold px-0"
+                      >
+                        Set {{ checklistSet.set }}
+                      </v-list-subheader>
+
+                      <v-list-item
+                        v-for="(unit, idx) in checklistSet.units"
+                        :key="`${setIndex}-${idx}`"
+                        class="px-0"
+                      >
+                        <v-row no-gutters align="center" class="py-2">
+                          <v-col cols="12" sm="3">
+                            <div class="text-body-2 font-weight-medium">
+                              {{ unit.name }}
+                            </div>
+                          </v-col>
+                          <v-col cols="12" sm="2">
+                            <div class="text-body-2 text-medium-emphasis">
+                              {{ unit.remarks || "N/A" }}
+                            </div>
+                          </v-col>
+                          <v-col cols="12" sm="2">
+                            <div class="text-body-2 text-medium-emphasis">
+                              {{ unit.completedByName || "N/A" }}
+                            </div>
+                          </v-col>
+                          <v-col cols="12" sm="3">
+                            <div class="text-body-2 text-medium-emphasis">
+                              {{
+                                unit.timestamp
+                                  ? formatDate(String(unit.timestamp))
+                                  : "N/A"
+                              }}
+                            </div>
+                          </v-col>
+                          <v-col cols="12" sm="2" class="text-right">
+                            <v-chip
+                              :color="
+                                unit.status?.toLowerCase() === 'completed'
+                                  ? 'success'
+                                  : 'grey'
+                              "
+                              :variant="
+                                unit.status?.toLowerCase() === 'completed'
+                                  ? 'flat'
+                                  : 'outlined'
+                              "
+                              size="small"
+                              class="text-capitalize"
+                            >
+                              {{ unit.status || "Ready" }}
+                            </v-chip>
+                          </v-col>
+                        </v-row>
+                      </v-list-item>
+
+                      <v-divider
+                        v-if="setIndex < unitSets.length - 1"
+                        class="my-2"
+                      />
+                    </template>
+                  </v-list>
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  orgId: { type: String, required: true, default: "" },
+  site: { type: String, required: true, default: "" },
+  scheduleAreaId: { type: String, required: true, default: "" },
+  type: { type: String, required: true, default: "cleaner" },
+});
+
+const { back, formatDate } = useUtils();
+const { getFileUrl } = useFile();
+
+const { getAreaChecklistHistoryById } = useCleaningSchedules();
+const unitSets = ref<TChecklistSet[]>([]);
+
+const { data: getAreaChecklistHistoryReq } = await useLazyAsyncData(
+  "get-area-checklist-history-by-id",
+  () => getAreaChecklistHistoryById(props.scheduleAreaId)
+);
+
+watchEffect(() => {
+  if (getAreaChecklistHistoryReq.value) {
+    const data = getAreaChecklistHistoryReq.value;
+    const area = data.area;
+    unitSets.value = data.units || [];
+
+    createdAt.value = area?.createdAt
+      ? formatDate(String(area.createdAt))
+      : "N/A";
+    timeOut.value = area?.completedAt
+      ? formatDate(String(area.completedAt))
+      : "N/A";
+    status.value = area?.status || "N/A";
+
+    if (area?.signature) {
+      signatureUrl.value = getFileUrl(area.signature);
+    }
+  }
+});
+
+const createdAt = ref<string>("N/A");
+const createdBy = ref<string>("N/A");
+const timeOut = ref<string>("N/A");
+const status = ref<string>("N/A");
+const signatureUrl = ref<string>("");
+</script>

package/components/AreaChecklistHistoryMain.vue

@@ -0,0 +1,176 @@
+<template>
+  <v-row no-gutters align="center" justify="center">
+    <v-col cols="12" lg="12">
+      <TableMain
+        :title="'Cleaner Checklist'"
+        :headers="headers"
+        :items="items"
+        :loading="loading"
+        :show-header="true"
+        v-model:page="page"
+        :pages="pages"
+        :pageRange="pageRange"
+        @update:items="items = $event"
+        @refresh="getAreaChecklistHistoryRefresh"
+        @row-click="handleRowClick"
+      >
+        <template #extension>
+          <v-row no-gutters class="w-100 d-flex flex-column">
+            <v-card
+              class="w-100 px-3 d-flex align-center ga-5 py-2"
+              flat
+              :height="60"
+            >
+              <v-text-field
+                v-model="searchInput"
+                density="compact"
+                placeholder="Search"
+                clearable
+                max-width="300"
+                append-inner-icon="mdi-magnify"
+                hide-details
+              />
+              <v-select
+                v-model="status"
+                :items="statusOptions"
+                item-title="label"
+                item-value="value"
+                density="compact"
+                clearable
+                hide-details
+                max-width="200"
+              />
+            </v-card>
+          </v-row>
+        </template>
+
+        <template #item.createdAt="{ value, item }">
+          <div>
+            {{
+              formatDate
+                ? formatDate(value)
+                : value
+                ? new Date(value).toLocaleString()
+                : ""
+            }}
+            <span v-if="item?.endedAt">
+              -
+              {{
+                formatDate
+                  ? formatDate(item.endedAt)
+                  : new Date(item.endedAt).toLocaleString()
+              }}</span
+            >
+          </div>
+        </template>
+        <template #item.status="{ value }">
+          <v-chip class="text-capitalize">{{ value || "No Status" }}</v-chip>
+        </template>
+      </TableMain></v-col
+    >
+  </v-row>
+
+  <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
+</template>
+
+<script setup lang="ts">
+import useCleaningSchedules from "../composables/useCleaningSchedules";
+
+const props = defineProps({
+  orgId: { type: String, required: true, default: "" },
+  site: { type: String, required: true, default: "" },
+  scheduleAreaId: { type: String, required: true, default: "" },
+  type: { type: String, required: true, default: "cleaner" },
+});
+
+const { formatDate } = useUtils();
+
+const loading = ref(false);
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
+const searchInput = ref("");
+const page = ref(1);
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const headers = [
+  { title: "Area / Created Date", value: "name" },
+  { title: "Time In / Time Out", value: "createdAt" },
+  { title: "Status", value: "status" },
+  { title: "No. Of Visits", value: "set" },
+  { title: "Type", value: "type" },
+];
+
+const items = ref<Array<Record<string, any>>>([]);
+
+const route = useRoute();
+const router = useRouter();
+
+const status = ref<string>((route.query.status as string) ?? "ongoing");
+const statusOptions = [
+  { label: "Ongoing", value: "ongoing" },
+  { label: "Completed", value: "completed" },
+];
+
+watch(status, (v) => {
+  const newQuery: Record<string, any> = {
+    ...(route.query as Record<string, any>),
+  };
+  if (v) {
+    newQuery.status = v;
+  } else {
+    delete newQuery.status;
+  }
+  router.replace({ query: newQuery }).catch(() => {});
+});
+
+const { getAreaChecklistHistory } = useCleaningSchedules();
+
+const {
+  data: getAreaChecklistHistoryReq,
+  refresh: getAreaChecklistHistoryRefresh,
+} = await useLazyAsyncData(
+  "get-area-checklist-history",
+  () =>
+    getAreaChecklistHistory({
+      parentChecklistId: props.scheduleAreaId,
+
+      page: page.value,
+      status: status.value,
+      search: searchInput.value,
+    }),
+  {
+    watch: [
+      page,
+      () => status.value,
+      () => props.site,
+      () => props.scheduleAreaId,
+      () => props.type,
+    ],
+  }
+);
+
+watchEffect(() => {
+  if (getAreaChecklistHistoryReq.value) {
+    items.value = getAreaChecklistHistoryReq.value.items;
+    pages.value = getAreaChecklistHistoryReq.value.pages;
+    pageRange.value = getAreaChecklistHistoryReq.value.pageRange;
+  }
+});
+
+function handleRowClick(data: any) {
+  const item = data?.item ?? data;
+  const id = item?._id || item?.id || item?.areaId;
+
+  if (id) {
+    if (props.type === "toilet") {
+      const path = `/${props.orgId}/${props.site}/toilet-checklist/${props.scheduleAreaId}/history/${id}`;
+      navigateTo(path);
+      return;
+    }
+    const path = `/${props.orgId}/${props.site}/cleaning-schedule/${props.scheduleAreaId}/history/${id}`;
+    navigateTo(path);
+  }
+}
+</script>

package/components/AreaFormDialog.vue

@@ -0,0 +1,266 @@
+<template>
+  <v-dialog v-model="showDialog" max-width="450">
+    <v-card>
+      <v-toolbar>
+        <template v-if="$slots.header">
+          <slot
+            name="header"
+            :title="
+              prop.mode === 'edit'
+                ? `Edit ${prop.entityType}`
+                : `Add New ${prop.entityType}`
+            "
+            :close="close"
+          />
+        </template>
+        <template v-else>
+          <v-row no-gutters class="fill-height px-6" align="center">
+            <span class="font-weight-bold text-h6 text-capitalize">{{
+              prop.mode === "edit"
+                ? `Edit ${prop.entityType}`
+                : `Add New ${prop.entityType}`
+            }}</span>
+          </v-row>
+        </template>
+      </v-toolbar>
+
+      <v-card-text class="pa-4">
+        <v-form ref="formRef" v-model="valid">
+          <v-row no-gutters class="pa-0">
+            <v-col v-if="prop.showType" cols="12" class="pa-0 mb-2">
+              <InputLabel for="type" title="Type" required class="mb-1" />
+              <v-select
+                v-model="typeModel"
+                :items="typeOptions"
+                density="comfortable"
+                variant="outlined"
+                hide-details
+                class="w-100 mb-0"
+              />
+            </v-col>
+
+            <v-col cols="12" class="pa-0 mb-0">
+              <InputLabel
+                for="name"
+                :title="prop.label"
+                required
+                class="mb-1"
+              />
+              <v-text-field
+                v-model="model"
+                :rules="[requiredRule]"
+                class="mb-0"
+              />
+            </v-col>
+
+            <v-col v-if="prop.showUnits" cols="12" class="pa-0 mb-2">
+              <InputLabel for="units" title="Units" class="mb-1" />
+              <v-autocomplete
+                v-model="unitsModel"
+                :items="unitItems"
+                :loading="loadingUnits"
+                item-title="title"
+                item-value="value"
+                density="comfortable"
+                variant="outlined"
+                :rules="[unitsRequiredRule]"
+                multiple
+                chips
+                closable-chips
+                placeholder="Select units"
+                class="mb-0"
+              />
+            </v-col>
+
+            <v-col v-if="prop.showOptional" cols="12" class="mb-4">
+              <v-row dense justify="center">
+                <v-col cols="6" class="pa-0">
+                  <v-btn
+                    block
+                    color="primary"
+                    variant="text"
+                    class="text-none font-weight-bold"
+                    text="Optional"
+                    @click="show = !show"
+                  ></v-btn>
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-expand-transition v-if="prop.showOptional">
+              <v-row v-show="show" no-gutters>
+                <v-col cols="12">
+                  <v-row no-gutters>
+                    <InputLabel
+                      class="text-capitalize font-weight-bold"
+                      title="Number of visits"
+                    />
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model="set"
+                        density="comfortable"
+                        type="number"
+                        min="1"
+                      ></v-text-field>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-expand-transition>
+          </v-row>
+        </v-form>
+      </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="close"
+              height="48"
+            >
+              Cancel
+            </v-btn>
+          </v-col>
+
+          <v-col cols="6" class="pa-0">
+            <v-btn
+              block
+              variant="flat"
+              color="black"
+              class="text-none font-weight-bold rounded-0"
+              height="48"
+              :loading="submitting"
+              @click="submit"
+            >
+              {{ prop.mode === "edit" ? "Save" : "Create" }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+const model = defineModel("name", { type: String, default: "" });
+const typeModel = defineModel("type", { type: String, default: "Common" });
+const set = defineModel("set", { type: Number, default: 1 });
+const unitsModel = defineModel("units", { type: Array, default: () => [] });
+const showDialog = defineModel({ type: Boolean, default: false });
+
+const prop = defineProps({
+  mode: {
+    type: String,
+    default: "add",
+  },
+  areaData: {
+    type: Object,
+    default: null,
+  },
+  label: { type: String, default: "Name" },
+  entityType: { type: String, default: "Area" }, // values: "Area", "Unit"
+  showType: { type: Boolean, default: true },
+  showOptional: { type: Boolean, default: true },
+  showUnits: { type: Boolean, default: false },
+  site: { type: String, default: "" },
+});
+
+const emit = defineEmits(["saved", "close"]);
+
+const formRef = ref<any>(null);
+const valid = ref(false);
+const submitting = ref(false);
+const show = ref(false);
+
+const { requiredRule } = useUtils();
+
+const unitsRequiredRule = (v: any) => {
+  if (Array.isArray(v)) return v.length > 0 || "Select at least one unit";
+  return !!v || "Select at least one unit";
+};
+
+const typeOptions = ["Common", "Toilet"];
+
+const unitItems = ref<Array<{ title: string; value: string }>>([]);
+const loadingUnits = ref(false);
+
+const { getUnits } = useUnits();
+
+watch(
+  [showDialog, () => prop.showUnits, () => prop.site],
+  async ([isOpen, shouldShow, siteId]) => {
+    if (isOpen && shouldShow && siteId) {
+      loadingUnits.value = true;
+      try {
+        const response = await getUnits({ site: siteId, limit: 100 });
+        unitItems.value = (response?.items || []).map((unit: any) => ({
+          title: unit.name,
+          value: unit._id || unit.id,
+        }));
+      } catch (error) {
+        console.error("Error loading units:", error);
+      } finally {
+        loadingUnits.value = false;
+      }
+    }
+  }
+);
+
+watchEffect(() => {
+  model.value = prop.areaData?.name || "";
+  typeModel.value = prop.areaData?.type || "Common";
+  set.value = prop.areaData?.set || 1;
+  unitsModel.value =
+    prop.areaData?.units?.map((u: any) => u.unit || u._id || u.id || u) || [];
+});
+
+function close() {
+  showDialog.value = false;
+  emit("close");
+}
+
+async function submit() {
+  const form = formRef.value as any;
+  let ok = valid.value;
+  if (form && typeof form.validate === "function") {
+    try {
+      ok = await form.validate();
+    } catch (e) {
+      ok = false;
+    }
+  }
+
+  if (!ok) return;
+
+  submitting.value = true;
+  try {
+    await new Promise((r) => setTimeout(r, 500));
+
+    if (prop.showType) {
+      emit("saved", {
+        name: model.value,
+        type: typeModel.value,
+        set: set.value,
+        units: prop.showUnits ? unitsModel.value : undefined,
+      });
+    } else {
+      emit("saved", model.value);
+    }
+
+    model.value = "";
+    typeModel.value = "Common";
+    set.value = 1;
+    unitsModel.value = [];
+
+    showDialog.value = false;
+    emit("close");
+  } catch (e) {
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>