@feedmepos/mf-hrm-portal 2.3.1 → 2.3.2-dev.10

package/dist/TimesheetList-CL_eJp2h.js

@@ -0,0 +1,437 @@
+import { ref as m, computed as v, defineComponent as fe, onMounted as pe, watch as X, resolveComponent as d, createElementBlock as P, openBlock as L, Fragment as Z, createVNode as s, createElementVNode as i, unref as n, withCtx as w, createCommentVNode as ve, toDisplayString as T, createTextVNode as he, isRef as ge, renderList as De, createBlock as ee, nextTick as we } from "vue";
+import { d as l } from "./dayjs.min-B55I-uhI.js";
+import { useI18n as Ye } from "@feedmepos/mf-common";
+import { useSnackbar as be, components as ye } from "@feedmepos/ui-library";
+import { S as _e } from "./SelectFilter-BpzBwBmQ.js";
+import { _ as Me } from "./app-DEZT4wdV.js";
+import { _ as xe } from "./TableEmptyState.vue_vue_type_script_setup_true_lang-IfAZmWr0.js";
+import { u as ke } from "./useLoading-CQnX5WjI.js";
+import { g as Se, s as Ve } from "./iteration-CcXrOMQe.js";
+import { f as Ce } from "./utils-BZkjJbju.js";
+import { n as Fe } from "./string-DZQ1uNjn.js";
+import { u as Le } from "./restaurant-ejyX2jEG.js";
+import { u as Te } from "./timesheet-CZHcebqS.js";
+function Oe(Y, a) {
+  return ["years", "months"].find((y) => {
+    const _ = Y.startOf(y), p = Y.endOf(y);
+    return Y.isSame(_, "day") && a.isSame(p, "day");
+  }) || "days";
+}
+function Re() {
+  const Y = {
+    startDate: l().format("YYYY-MM-DD"),
+    endDate: l().format("YYYY-MM-DD")
+  }, a = m(Y), b = v(() => {
+    if (!a.value) return "No dates selected.";
+    const p = a.value.startDate ?? "Start", g = a.value.endDate ?? "End";
+    return `${p} - ${g}`;
+  }), y = v(() => ({
+    startDate: new Date(a.value.startDate),
+    endDate: new Date(a.value.endDate)
+  }));
+  function _(p) {
+    const g = l(a.value.startDate), c = l(a.value.endDate), h = Oe(g, c), M = h === "days" ? c.diff(g, "days") + 1 : 1, O = p === "subtract" ? (D) => D.subtract(M, h) : (D) => D.add(M, h);
+    a.value = {
+      startDate: O(g).startOf(h).format("YYYY-MM-DD"),
+      endDate: O(c).endOf(h).format("YYYY-MM-DD")
+    };
+  }
+  return { dateRange: a, parsedDateRange: y, dateRangeLabel: b, setRange: _ };
+}
+const Ie = {
+  class: "my-16 flex w-[350px] flex-col gap-40"
+}, $e = {
+  class: "flex gap-16"
+}, Ae = {
+  class: "flex flex-col gap-4"
+}, Ee = {
+  class: "fm-typo-body-md-400 text-fm-color-typo-secondary"
+}, Ke = {
+  class: "fm-typo-body-md-700 text-fm-color-typo-primary"
+}, Ne = {
+  class: "flex flex-col gap-8"
+}, Ue = {
+  class: "fm-typo-body-xl-700"
+}, ze = {
+  class: "flex flex-col gap-24"
+}, Be = {
+  class: "flex flex-col gap-8"
+}, Pe = {
+  class: "fm-typo-body-xl-700"
+}, je = {
+  class: "flex flex-col gap-24"
+}, He = {
+  key: 0,
+  class: "fm-typo-body-sm-400 text-fm-color-typo-error mt-1 flex items-center gap-4"
+}, Ge = {
+  class: "flex items-center justify-start gap-8"
+}, qe = {
+  class: "space-y-8"
+}, Je = {
+  class: "flex items-start gap-8 flex-wrap xs:px-16"
+}, Qe = {
+  class: "flex items-center gap-8"
+}, We = {
+  class: "flex h-full flex-col overflow-auto"
+}, ct = /* @__PURE__ */ fe({
+  __name: "TimesheetList",
+  setup(Y) {
+    const {
+      t: a
+    } = Ye(), b = be(), y = ke(b), _ = [{
+      label: a("hr.timesheet.listView"),
+      value: "listView"
+    }, {
+      label: a("hr.timesheet.userView"),
+      value: "userView"
+    }], p = m("listView"), g = v(() => {
+      var t;
+      return (t = _.find((e) => e.value === p.value)) == null ? void 0 : t.label;
+    }), c = m(""), h = Te(), M = Le(), O = v(() => new Map(M.restaurants.value.map((t) => [t._id, t.profile.code]))), D = v(() => h.timesheets.value.map((r) => {
+      const u = O.value.get(r.restaurantId);
+      return {
+        ...r,
+        restaurantCode: u
+      };
+    })), R = v(() => D.value.filter((t) => {
+      var e, r;
+      return t.user.name.toLowerCase().includes(c.value.toLowerCase()) || t.restaurantName.toLowerCase().includes(c.value.toLowerCase()) || ((e = t.restaurantCode) == null ? void 0 : e.toLowerCase().includes(c.value.toLowerCase())) || ((r = t.user.code) == null ? void 0 : r.toLowerCase().includes(c.value.toLowerCase()));
+    })), j = v(() => {
+      const t = Se(D.value, (r) => r.user.name), e = Object.entries(t).map(([r, u]) => ({
+        key: r,
+        user: u[0].user.name,
+        code: u[0].user.code || "",
+        timesheets: u,
+        total: Ce(u.reduce((A, B) => A + B.totalMin, 0))
+      }));
+      return Ve(e, {
+        selector: "user"
+      });
+    }), H = v(() => j.value.filter((t) => {
+      var e;
+      return t.user.toLowerCase().includes(c.value.toLowerCase()) || ((e = t.code) == null ? void 0 : e.toLowerCase().includes(c.value.toLowerCase()));
+    })), K = m(!1), N = v(() => K.value && D.value.length === 0), U = async () => {
+      const {
+        startDate: t,
+        endDate: e
+      } = x.value;
+      K.value = !0;
+      try {
+        await h.readTimesheet(new Date(t), new Date(e), I.value), await we(), z.value = Object.fromEntries(Object.entries(new Array(j.value.length).fill(!0)));
+      } catch (r) {
+        b.open({
+          title: r instanceof Error ? r.message : `${r}`,
+          type: "error"
+        });
+      } finally {
+        K.value = !1;
+      }
+    };
+    pe(async () => {
+      try {
+        await M.readRestaurants();
+      } catch (t) {
+        console.error("Failed to load timesheet dependencies:", t), b.open({
+          message: t instanceof Error ? t.message : String(t),
+          type: "error"
+        });
+      }
+      U();
+    });
+    const I = m(), te = v(() => M.restaurants.value.filter((t) => t.managable).map((t) => ({
+      label: `${t.profile.code ? `${t.profile.code} - ` : ""}${t.profile.name}`,
+      value: t._id
+    }))), {
+      dateRange: x,
+      dateRangeLabel: ae,
+      setRange: G
+    } = Re(), oe = [{
+      label: "Today",
+      value: {
+        startDate: l().format("YYYY-MM-DD"),
+        endDate: l().format("YYYY-MM-DD")
+      }
+    }, {
+      label: "Yesterday",
+      value: {
+        startDate: l().subtract(1, "day").format("YYYY-MM-DD"),
+        endDate: l().subtract(1, "day").format("YYYY-MM-DD")
+      }
+    }, {
+      label: "This week",
+      value: {
+        startDate: l().startOf("week").format("YYYY-MM-DD"),
+        endDate: l().endOf("week").format("YYYY-MM-DD")
+      }
+    }, {
+      label: "Last week",
+      value: {
+        startDate: l().subtract(1, "week").startOf("week").format("YYYY-MM-DD"),
+        endDate: l().subtract(1, "week").endOf("week").format("YYYY-MM-DD")
+      }
+    }, {
+      label: "Last 7 days",
+      value: {
+        startDate: l().subtract(7, "day").format("YYYY-MM-DD"),
+        endDate: l().subtract(1, "day").format("YYYY-MM-DD")
+      }
+    }, {
+      label: "This month",
+      value: {
+        startDate: l().startOf("month").format("YYYY-MM-DD"),
+        endDate: l().endOf("month").format("YYYY-MM-DD")
+      }
+    }, {
+      label: "Last month",
+      value: {
+        startDate: l().subtract(1, "month").startOf("month").format("YYYY-MM-DD"),
+        endDate: l().subtract(1, "month").endOf("month").format("YYYY-MM-DD")
+      }
+    }];
+    X([x, I], async () => {
+      U();
+    });
+    const se = [{
+      accessorKey: "user.code",
+      size: 100,
+      header: () => a("hr.employee.columns.code"),
+      cell: (t) => t.row.original.user.code || "--",
+      enableSorting: !0
+    }, {
+      accessorKey: "user",
+      header: () => a("hr.timesheet.columns.name"),
+      cell: (t) => t.row.original.user.name,
+      enableSorting: !1
+    }, {
+      accessorKey: "restaurantName",
+      header: () => a("hr.timesheet.columns.restaurant"),
+      cell: (t) => {
+        const e = t.row.original.restaurantCode, r = t.row.original.restaurantName;
+        return `${e ? e + " - " : ""}${r}`;
+      },
+      enableSorting: !0
+    }, {
+      accessorKey: "start",
+      header: () => a("hr.timesheet.columns.start"),
+      cell: (t) => t.row.original.start || "--",
+      enableSorting: !0
+    }, {
+      accessorKey: "end",
+      header: () => a("hr.timesheet.columns.end"),
+      cell: (t) => t.row.original.end || "--",
+      enableSorting: !0
+    }, {
+      name: "duration",
+      accessorKey: "duration",
+      header: () => a("hr.timesheet.columns.duration"),
+      cell: (t) => t.row.original.duration || "--",
+      enableSorting: !0
+    }], z = m({}), le = [{
+      accessorKey: "code",
+      size: 100,
+      header: () => a("hr.employee.columns.code"),
+      cell: (t) => t.row.original.code,
+      enableSorting: !1
+    }, {
+      accessorKey: "user",
+      header: () => a("hr.timesheet.columns.name"),
+      cell: (t) => {
+        const e = t.row.original;
+        if (typeof e.user == "string") {
+          const r = t.row.getIsExpanded();
+          return s("div", {
+            class: "flex items-center gap-8"
+          }, [s("div", {
+            onClick: (u) => {
+              u.stopPropagation(), t.row.getToggleExpandedHandler()(u);
+            }
+          }, [s(ye.FmButton, {
+            variant: "tertiary",
+            icon: r ? "keyboard_arrow_up" : "keyboard_arrow_down"
+          }, null)]), e.user]);
+        }
+      },
+      enableSorting: !1
+    }, {
+      accessorKey: "start",
+      header: () => a("hr.timesheet.columns.start"),
+      cell: (t) => {
+        const e = t.row.original;
+        return (e == null ? void 0 : e.start) || "--";
+      },
+      enableSorting: !1
+    }, {
+      accessorKey: "end",
+      header: () => a("hr.timesheet.columns.end"),
+      cell: (t) => {
+        const e = t.row.original;
+        return (e == null ? void 0 : e.end) || "--";
+      },
+      enableSorting: !1
+    }, {
+      name: "duration",
+      accessorKey: "duration",
+      header: () => a("hr.timesheet.columns.hourMinute"),
+      cell: (t) => {
+        const e = t.row.original;
+        return e.total ? `Total: ${e.total}` : e.duration;
+      },
+      enableSorting: !1
+    }], k = m(!1);
+    function q(t) {
+      f.value = t, S.value = l(f.value.startedAt).format("YYYY-MM-DD"), C.value = l(f.value.endedAt || f.value.startedAt).format("YYYY-MM-DD"), V.value = l(f.value.startedAt).format("HH:mm"), F.value = l(f.value.endedAt || f.value.startedAt).format("HH:mm"), k.value = !0;
+    }
+    const S = m(), V = m(), C = m(), F = m(), f = m(), $ = m("");
+    async function re() {
+      const t = J(S.value, V.value), e = J(C.value, F.value);
+      if (l(t).isAfter(e)) {
+        $.value = a("hr.timesheet.checkOutMustBeforeCheckIn");
+        return;
+      }
+      y.minor(async () => {
+        await h.updateTimesheet(f.value, t, e);
+      }, {
+        successMessage: a("hr.timesheet.update.successMessage")
+      }), U(), k.value = !1;
+    }
+    const J = (t, e) => l(t).set("h", parseInt(e.split(":")[0])).set("m", parseInt(e.split(":")[1])).toISOString();
+    return X([S, C, V, F], ([t, e, r, u]) => {
+      (t || e || r || u) && ($.value = "");
+    }), (t, e) => {
+      const r = d("FmAvatar"), u = d("FmDatePicker"), A = d("FmTimePicker"), B = d("FmIcon"), E = d("FmButton"), ne = d("FmSideSheet"), Q = d("FmChip"), ie = d("FmDateRangePicker"), ue = d("FmMenuItem"), de = d("FmMenu"), me = d("FmSpacer"), ce = d("FmSearch"), W = d("FmTable");
+      return L(), P(Z, null, [s(ne, {
+        modelValue: k.value,
+        "onUpdate:modelValue": e[5] || (e[5] = (o) => k.value = o),
+        "dismiss-away": "",
+        header: n(a)("hr.timesheet.update.title")
+      }, {
+        "side-sheet-footer": w(() => [i("div", Ge, [s(E, {
+          label: n(a)("common.update"),
+          size: "md",
+          variant: "primary",
+          onClick: re
+        }, null, 8, ["label"]), s(E, {
+          label: n(a)("common.cancel"),
+          size: "md",
+          variant: "secondary",
+          onClick: e[4] || (e[4] = (o) => k.value = !1)
+        }, null, 8, ["label"])])]),
+        default: w(() => [i("div", Ie, [i("div", $e, [s(r, {
+          name: f.value.user.name,
+          initials: n(Fe)(f.value.user.name),
+          size: "lg"
+        }, null, 8, ["name", "initials"]), i("div", Ae, [i("div", Ee, T(n(a)("hr.timesheet.employeeName")), 1), i("div", Ke, T(f.value.user.name), 1)])]), i("div", Ne, [i("div", Ue, T(n(a)("hr.timesheet.update.checkIn")), 1), i("div", ze, [s(u, {
+          modelValue: S.value,
+          "onUpdate:modelValue": e[0] || (e[0] = (o) => S.value = o),
+          disabled: !1,
+          label: n(a)("hr.timesheet.update.date")
+        }, null, 8, ["modelValue", "label"]), s(A, {
+          modelValue: V.value,
+          "onUpdate:modelValue": e[1] || (e[1] = (o) => V.value = o),
+          label: n(a)("hr.timesheet.update.time")
+        }, null, 8, ["modelValue", "label"])])]), i("div", Be, [i("div", Pe, T(n(a)("hr.timesheet.update.checkOut")), 1), i("div", je, [s(u, {
+          modelValue: C.value,
+          "onUpdate:modelValue": e[2] || (e[2] = (o) => C.value = o),
+          disabled: !1,
+          label: n(a)("hr.timesheet.update.date")
+        }, null, 8, ["modelValue", "label"]), s(A, {
+          modelValue: F.value,
+          "onUpdate:modelValue": e[3] || (e[3] = (o) => F.value = o),
+          label: n(a)("hr.timesheet.update.time")
+        }, null, 8, ["modelValue", "label"])])]), $.value ? (L(), P("div", He, [s(B, {
+          color: "#FF3B30",
+          name: "error",
+          size: "sm"
+        }), he(" " + T($.value), 1)])) : ve("", !0)])]),
+        _: 1
+      }, 8, ["modelValue", "header"]), i("div", qe, [i("div", Je, [s(_e, {
+        modelValue: I.value,
+        "onUpdate:modelValue": e[6] || (e[6] = (o) => I.value = o),
+        multiple: "",
+        items: te.value,
+        variant: "dark",
+        "selected-prefix": n(a)("hr.role.columns.restaurants"),
+        placeholder: n(a)("hr.role.columns.restaurants"),
+        class: "!w-auto pt-[3px]"
+      }, null, 8, ["modelValue", "items", "selected-prefix", "placeholder"]), i("div", Qe, [s(ie, {
+        modelValue: n(x),
+        "onUpdate:modelValue": e[7] || (e[7] = (o) => ge(x) ? x.value = o : null),
+        "show-predefined-range": "",
+        "predefined-range": oe
+      }, {
+        "trigger-button": w(() => [s(Q, {
+          label: n(ae)
+        }, null, 8, ["label"])]),
+        _: 1
+      }, 8, ["modelValue"]), s(E, {
+        icon: "chevron_left",
+        variant: "tertiary",
+        onClick: e[8] || (e[8] = (o) => n(G)("subtract"))
+      }), s(E, {
+        icon: "chevron_right",
+        variant: "tertiary",
+        onClick: e[9] || (e[9] = (o) => n(G)("add"))
+      })]), s(de, {
+        class: "pt-[3px]"
+      }, {
+        "menu-button": w(() => [s(Q, {
+          label: g.value,
+          "right-icon": "keyboard_arrow_down"
+        }, null, 8, ["label"])]),
+        default: w(() => [(L(), P(Z, null, De(_, (o) => s(ue, {
+          key: o.value,
+          label: o.label,
+          onClick: (Xe) => p.value = o.value
+        }, null, 8, ["label", "onClick"])), 64))]),
+        _: 1
+      }), s(me), s(ce, {
+        modelValue: c.value,
+        "onUpdate:modelValue": e[10] || (e[10] = (o) => c.value = o),
+        class: "w-[320px]",
+        placeholder: n(a)("hr.timesheet.search.placeholder")
+      }, null, 8, ["modelValue", "placeholder"])]), s(Me, {
+        class: "w-full xs:px-16"
+      }, {
+        default: w(() => [i("div", We, [s(xe, {
+          "is-loading": N.value,
+          "is-empty": p.value === "listView" ? R.value.length === 0 : H.value.length === 0,
+          "collapse-at": !1,
+          title: n(a)("hr.timesheet.noData.title"),
+          subtitle: ""
+        }, {
+          default: w(() => [p.value === "listView" ? (L(), ee(W, {
+            key: 0,
+            class: "min-w-[640px]",
+            "column-defs": se,
+            "row-data": R.value,
+            "page-size": R.value.length,
+            loading: N.value,
+            virtual: R.value.length > 0,
+            "pin-header-row": "",
+            "hide-footer": "",
+            "shrink-at": !1,
+            onRowClick: e[11] || (e[11] = (o) => q(o.original))
+          }, null, 8, ["row-data", "page-size", "loading", "virtual"])) : (L(), ee(W, {
+            key: 1,
+            class: "min-w-[640px]",
+            "column-defs": le,
+            "row-data": H.value,
+            "page-size": 100,
+            loading: N.value,
+            "pin-header-row": "",
+            "shrink-at": !1,
+            "expanded-state": z.value,
+            "get-sub-row": (o) => o.timesheets,
+            "onUpdate:expandedState": e[12] || (e[12] = (o) => z.value = o),
+            onRowClick: e[13] || (e[13] = (o) => q(o.original))
+          }, null, 8, ["row-data", "loading", "expanded-state", "get-sub-row"]))]),
+          _: 1
+        }, 8, ["is-loading", "is-empty", "title"])])]),
+        _: 1
+      })])], 64);
+    };
+  }
+});
+export {
+  ct as default
+};