@devalok/shilp-sutra-karm 0.8.2 → 0.9.0

package/dist/_chunks/render-adjustment-type.js

@@ -0,0 +1,3596 @@
+"use client";
+import { jsx as e, jsxs as s, Fragment as V } from "react/jsx-runtime";
+import * as O from "react";
+import ve, { useState as M, useEffect as U, useRef as Be, useCallback as $, Fragment as ht, useReducer as Lt, useMemo as Ye, createContext as bt, useContext as yt } from "react";
+import { g as qt, i as Ut, j as Ie, k as es, l as Z, m as A, n as ts, o as Se, p as ss, q as gt, r as Ve, t as wt, c as as, w as q, x as rs, y as Nt, z as ls, A as lt, B as ds } from "./vendor.js";
+import { cn as S } from "@devalok/shilp-sutra/ui/lib/utils";
+import { Skeleton as R } from "@devalok/shilp-sutra/ui/skeleton";
+import { DropdownMenu as he, DropdownMenuTrigger as be, DropdownMenuContent as ke, DropdownMenuItem as pe } from "@devalok/shilp-sutra/ui/dropdown-menu";
+import { IconButton as X } from "@devalok/shilp-sutra/ui/icon-button";
+import { IconChevronDown as ie, IconChevronLeft as ye, IconChevronRight as ge, IconX as oe, IconUser as vt, IconPencil as Je, IconSend as Dt, IconGripVertical as dt, IconSquareCheck as ns, IconSquare as is, IconPlus as os, IconCheck as Ge, IconTrash as cs, IconArrowRight as ms, IconDotsVertical as us, IconCalendar as xs, IconCalendarEvent as fs } from "@tabler/icons-react";
+import { Button as J } from "@devalok/shilp-sutra/ui/button";
+import { SegmentedControl as Et } from "@devalok/shilp-sutra/ui/segmented-control";
+import { AvatarGroup as nt } from "@devalok/shilp-sutra/composed/avatar-group";
+import { Dialog as ce, DialogTrigger as we, DialogContent as me, DialogHeader as Ne, DialogFooter as He, DialogClose as $e, DialogTitle as ps, DialogDescription as Ze } from "@devalok/shilp-sutra/ui/dialog";
+import { Checkbox as it } from "@devalok/shilp-sutra/ui/checkbox";
+import { Avatar as Xe, AvatarImage as Qe, AvatarFallback as Le } from "@devalok/shilp-sutra/ui/avatar";
+import { Tooltip as ae, TooltipTrigger as re, TooltipContent as le } from "@devalok/shilp-sutra/ui/tooltip";
+import { useIsMobile as hs } from "@devalok/shilp-sutra/hooks/use-mobile";
+import { useToast as je } from "@devalok/shilp-sutra/hooks/use-toast";
+import { Textarea as bs } from "@devalok/shilp-sutra/ui/textarea";
+import { Popover as ys, PopoverTrigger as gs, PopoverContent as ws } from "@devalok/shilp-sutra/ui/popover";
+import { Badge as Ns, Tooltip as vs, TooltipTrigger as Ds, TooltipContent as Es } from "@devalok/shilp-sutra/ui";
+import { NumberInput as ks } from "@devalok/shilp-sutra/ui/number-input";
+const kt = O.forwardRef(
+  function(t, n) {
+    return /* @__PURE__ */ e("div", { ref: n, className: "flex w-full max-w-layout flex-col items-center justify-center max-md:h-[100%] max-md:justify-start", children: /* @__PURE__ */ s("div", { className: "z-raised flex w-full flex-col items-start justify-start rounded-ds-lg border border-border bg-layer-02 p-ds-05 shadow-05 max-md:flex-1 max-md:min-h-0 max-md:overflow-y-auto max-md:border-0 max-md:px-ds-05 max-md:pb-0 max-md:pt-ds-06", children: [
+      /* @__PURE__ */ s("div", { className: "mb-ds-06 flex w-full flex-col items-start justify-between md:flex-row md:items-center", children: [
+        /* @__PURE__ */ e(he, { children: /* @__PURE__ */ s(be, { className: "text-ds-xl flex items-center gap-ds-03 text-text-secondary", "aria-label": "Select period", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
+            /* @__PURE__ */ e(R, { className: "h-[25px] w-[50px] rounded-ds-md bg-field" }),
+            /* @__PURE__ */ e(R, { className: "h-[25px] w-[50px] rounded-ds-md bg-field" })
+          ] }),
+          /* @__PURE__ */ e(ie, {})
+        ] }) }),
+        /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-between gap-ds-05 md:mt-0 md:w-auto md:justify-start max-md:mt-[17px] max-lg:gap-[0.5rem]", children: [
+          /* @__PURE__ */ e("div", { className: "hidden md:flex", children: /* @__PURE__ */ e(R, { className: "h-ds-sm w-[180px] rounded-ds-md" }) }),
+          /* @__PURE__ */ s("div", { className: "flex w-[200px] items-center justify-between overflow-clip rounded-ds-full border border-layer-03", children: [
+            /* @__PURE__ */ e("div", { className: "flex h-ds-sm w-[100px] items-center justify-center rounded-r-none bg-field", children: /* @__PURE__ */ e(R, { className: "h-[20px] w-[40px] rounded-r-none bg-layer-03" }) }),
+            /* @__PURE__ */ e("div", { className: "flex h-ds-sm w-[100px] items-center justify-center", children: /* @__PURE__ */ e(R, { className: "h-[20px] w-[40px] bg-layer-03" }) })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex gap-0", children: [
+            /* @__PURE__ */ e(X, { icon: /* @__PURE__ */ e(ye, {}), size: "sm", "aria-label": "Previous" }),
+            /* @__PURE__ */ e(
+              X,
+              {
+                icon: /* @__PURE__ */ e(ge, {}),
+                size: "sm",
+                "aria-label": "Next",
+                onClick: () => {
+                }
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "flex w-full items-center", children: Array.from({ length: 7 }).map((a, d) => /* @__PURE__ */ s(
+        "div",
+        {
+          className: "flex w-full flex-col items-center rounded-t-ds-lg pb-ds-04 pt-ds-05 max-md:rounded-ds-lg",
+          children: [
+            /* @__PURE__ */ e(R, { className: "mb-ds-03 h-[10px] w-[10px] rounded-ds-lg bg-field" }),
+            /* @__PURE__ */ e("div", { className: "mx-ds-02 my-ds-02 flex items-center justify-center", children: /* @__PURE__ */ e(R, { className: "h-ds-md w-ds-md rounded-ds-full bg-field" }) })
+          ]
+        },
+        d
+      )) }),
+      /* @__PURE__ */ s("div", { className: "flex w-full flex-col rounded-ds-lg bg-layer-02 md:p-ds-06 max-md:bg-transparent", children: [
+        /* @__PURE__ */ e("div", { className: "no-scrollbar w-full cursor-grab overflow-x-auto active:cursor-grabbing max-md:pb-ds-05", children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: "flex items-start justify-start gap-ds-04 px-0 pt-ds-03 md:gap-0 md:px-ds-06 min-w-max",
+            children: Array.from({ length: 3 }).map((a, d) => /* @__PURE__ */ s(
+              "div",
+              {
+                className: S("flex w-full flex-col gap-ds-04 rounded-ds-md bg-layer-02 p-ds-06 md:rounded-ds-lg md:p-ds-05", d !== 2 ? "border-r border-border" : "", "max-md:border-0 max-md:p-ds-05", "min-w-[200px]"),
+                children: [
+                  /* @__PURE__ */ e(R, { className: "h-[20px] w-[120px] rounded-ds-md bg-field" }),
+                  /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center gap-ds-03", children: Array.from({ length: 4 }).map((m, p) => /* @__PURE__ */ e(
+                    R,
+                    {
+                      className: S("h-ds-md w-ds-md rounded-ds-full bg-field", p > 0 ? "ml-[-5px]" : "")
+                    },
+                    p
+                  )) })
+                ]
+              },
+              d
+            ))
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "w-full p-0 md:p-ds-06", children: /* @__PURE__ */ s("div", { className: "max-md:pt-[16px] flex flex-col items-start overflow-hidden rounded-ds-lg border-0 border-border-subtle bg-layer-01 shadow-01 pt-ds-03 md:border max-md:pb-0", children: [
+          /* @__PURE__ */ s("div", { className: "flex w-full items-start border-b-[1px] border-b-border px-ds-06 md:border-b max-md:border-0 max-md:px-0", children: [
+            /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider cursor-pointer border-b-[1.5px] border-b-interactive-hover px-ds-03 py-ds-04 font-semibold  text-text-primary", children: "REQUESTS(1)" }),
+            /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider cursor-pointer px-ds-03 py-ds-04  text-text-tertiary", children: "ATTENDANCE CORRECTION(1)" })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "flex max-h-[200px] w-full flex-col overflow-y-auto bg-layer-01 px-ds-06 max-md:flex-1 max-md:max-h-none max-md:min-h-[372px] max-md:p-0", children: Array.from({ length: 2 }).map((a, d) => /* @__PURE__ */ s(
+            "div",
+            {
+              className: "flex items-center justify-between px-ds-03 py-ds-04",
+              children: [
+                /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04", children: [
+                  /* @__PURE__ */ e(R, { className: "h-ds-md w-ds-md rounded-ds-full bg-field" }),
+                  /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-02", children: [
+                    /* @__PURE__ */ e(R, { className: "h-[20px] w-[120px] rounded-ds-md bg-field" }),
+                    /* @__PURE__ */ e(R, { className: "h-[20px] w-[200px] rounded-ds-md bg-field" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04", children: [
+                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-field" }),
+                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-field" })
+                ] })
+              ]
+            },
+            d
+          )) })
+        ] }) })
+      ] })
+    ] }) });
+  }
+);
+kt.displayName = "DashboardSkeleton";
+const Ct = O.forwardRef(
+  function({
+    selectedMonth: t,
+    yearsList: n,
+    isTodaySelected: a,
+    selectedAssociate: d,
+    users: m,
+    userImages: p,
+    activeTimeFrame: r,
+    onMonthSelection: o,
+    onTodayClick: x,
+    onSelectAssociate: u,
+    onTimeFrameChange: f,
+    onDateChange: y
+  }, i) {
+    return /* @__PURE__ */ s("div", { ref: i, className: "mb-ds-06 flex w-full flex-col items-start justify-between md:flex-row md:items-center", children: [
+      /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-between gap-ds-05 md:w-auto md:justify-start", children: [
+        /* @__PURE__ */ s(he, { children: [
+          /* @__PURE__ */ s(be, { className: "text-ds-xl flex items-center gap-ds-03 text-text-secondary", children: [
+            t,
+            /* @__PURE__ */ e(ie, {})
+          ] }),
+          /* @__PURE__ */ e(ke, { className: "custom-scrollbar absolute ml-ds-08 max-h-[300px] overflow-y-auto rounded-ds-md border border-0 border-border p-0 shadow-brand", children: n.map((h, c) => /* @__PURE__ */ e(
+            pe,
+            {
+              onSelect: () => {
+                o(h);
+              },
+              className: S("p-0", c !== n.length - 1 ? "border-b border-b-border" : ""),
+              children: /* @__PURE__ */ e(
+                "span",
+                {
+                  className: S("w-full py-ds-04 pl-ds-05 pr-ds-06", t === h ? "text-ds-md font-semibold bg-interactive text-text-on-color" : "text-ds-md text-text-secondary hover:bg-layer-02", c === 0 ? "rounded-t-[7px]" : c === n.length - 1 ? "rounded-b-[7px]" : ""),
+                  children: h.split(" ")[1]
+                }
+              )
+            },
+            h
+          )) })
+        ] }),
+        !a && /* @__PURE__ */ e(
+          J,
+          {
+            variant: "outline",
+            onClick: x,
+            children: "Today"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-between gap-ds-05 md:mt-0 md:w-auto md:justify-start max-md:mt-[17px] max-lg:gap-[0.5rem]", children: [
+        /* @__PURE__ */ e("div", { className: "hidden md:flex", children: d ? /* @__PURE__ */ s("div", { className: "text-ds-md flex items-center justify-start rounded-ds-md bg-interactive px-ds-03 py-ds-02b text-text-on-color", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center justify-start gap-0", children: [
+            p[d.id] ? /* @__PURE__ */ e(
+              "img",
+              {
+                src: p[d.id],
+                alt: `${d.name}'s avatar`,
+                className: "h-ico-md w-ico-md rounded-ds-full"
+              }
+            ) : /* @__PURE__ */ e("div", { className: "flex h-ico-md w-ico-md flex-shrink-0 items-center justify-center rounded-ds-full bg-layer-03", children: /* @__PURE__ */ e("span", { className: "text-interactive", children: d.name.charAt(0) }) }),
+            /* @__PURE__ */ e("span", { className: "text-ds-md ml-ds-01 mr-ds-02 text-text-on-color", children: d.name })
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              "aria-label": "Clear filter",
+              onClick: () => u(null),
+              className: "border-0 bg-transparent p-0",
+              children: /* @__PURE__ */ e(oe, { className: "h-ico-sm w-ico-sm text-text-on-color" })
+            }
+          )
+        ] }) : /* @__PURE__ */ s(he, { children: [
+          /* @__PURE__ */ s(be, { className: "text-ds-md hidden items-center justify-between rounded-ds-md border border-border-subtle bg-layer-01 px-ds-03 py-ds-02b md:flex", children: [
+            /* @__PURE__ */ s("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ e(vt, { className: "h-ico-md w-ico-md" }),
+              /* @__PURE__ */ e("span", { className: "text-ds-md ml-ds-01 mr-ds-02 text-text-secondary max-lg:mx-0 max-lg:text-ds-sm", children: "Associate" })
+            ] }),
+            /* @__PURE__ */ e(ie, { className: "h-ico-sm w-ico-sm" })
+          ] }),
+          /* @__PURE__ */ e(ke, { className: "custom-scrollbar max-h-[400px] w-64 overflow-y-auto p-ds-03", children: (m == null ? void 0 : m.length) === 0 ? /* @__PURE__ */ e(pe, { disabled: !0, children: "No users available" }) : m == null ? void 0 : m.map((h) => /* @__PURE__ */ s(
+            pe,
+            {
+              onSelect: () => {
+                const c = {
+                  ...h,
+                  createdAt: new Date(h.createdAt)
+                };
+                u(c);
+              },
+              className: "flex items-center gap-ds-03 p-ds-03",
+              children: [
+                p[h.id] ? /* @__PURE__ */ e(
+                  "img",
+                  {
+                    src: p[h.id],
+                    alt: `${h.name}'s avatar`,
+                    className: "h-ds-xs w-ds-xs rounded-ds-full"
+                  }
+                ) : /* @__PURE__ */ e("div", { className: "flex h-ds-xs w-ds-xs items-center justify-center rounded-ds-full bg-layer-03", children: /* @__PURE__ */ e("span", { className: "text-ds-md text-interactive", children: h.name.charAt(0) }) }),
+                /* @__PURE__ */ e("span", { className: "text-ds-md text-text-secondary", children: h.name })
+              ]
+            },
+            h.id
+          )) })
+        ] }) }),
+        /* @__PURE__ */ e(
+          Et,
+          {
+            size: "md",
+            variant: "tonal",
+            options: [
+              { id: "weekly", text: "Weekly" },
+              { id: "monthly", text: "Monthly" }
+            ],
+            selectedId: r,
+            onSelect: f
+          }
+        ),
+        /* @__PURE__ */ s("div", { className: "flex gap-0", children: [
+          /* @__PURE__ */ e(
+            X,
+            {
+              icon: /* @__PURE__ */ e(ye, {}),
+              size: "sm",
+              "aria-label": "Previous",
+              onClick: () => y("prev")
+            }
+          ),
+          /* @__PURE__ */ e(
+            X,
+            {
+              icon: /* @__PURE__ */ e(ge, {}),
+              size: "sm",
+              "aria-label": "Next",
+              onClick: () => y("next")
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+);
+Ct.displayName = "DashboardHeader";
+const Oe = "Asia/Kolkata", Pe = "en-IN";
+function na(l, t) {
+  return new Date(l).toLocaleDateString(Pe, {
+    timeZone: Oe,
+    ...t
+  });
+}
+function ia(l, t) {
+  return new Date(l).toLocaleTimeString(Pe, {
+    timeZone: Oe,
+    ...t
+  });
+}
+function de(l) {
+  return (l instanceof Date ? l : new Date(l)).toLocaleDateString(Pe, {
+    day: "2-digit",
+    month: "short",
+    year: "2-digit",
+    timeZone: Oe
+  }).replace(",", "").replace(/(\d{2})$/, "’$1");
+}
+function ot(l) {
+  return l === "-" ? "-" : de(l);
+}
+function Me(l) {
+  const t = l.toLocaleString(Pe, {
+    weekday: "long",
+    timeZone: Oe
+  });
+  return `${de(l)}, ${t}`;
+}
+function _e(l) {
+  if (l >= 11 && l <= 13) return `${l}th`;
+  switch (l % 10) {
+    case 1:
+      return `${l}st`;
+    case 2:
+      return `${l}nd`;
+    case 3:
+      return `${l}rd`;
+    default:
+      return `${l}th`;
+  }
+}
+function Q(l, t) {
+  return !(l instanceof Date) || !(t instanceof Date) ? !1 : Z(l, t);
+}
+function Tt(l, t) {
+  const n = ss(new Date(l), { weekStartsOn: 0 }), a = /* @__PURE__ */ new Date(), d = new Date(t);
+  return Array.from({ length: 7 }, (m, p) => {
+    const r = gt(n, p);
+    return {
+      day: A(r, "EEE").toUpperCase(),
+      date: r.getDate(),
+      fullDate: r,
+      isToday: Z(r, a),
+      isActive: Z(r, d)
+    };
+  });
+}
+function Cs(l, t) {
+  const n = new Date(l), a = new Date(t), d = /* @__PURE__ */ new Date(), m = Ut(n), p = m.getDay(), r = Ie(n), o = [], x = es(m), u = Ie(x);
+  for (let h = p - 1; h >= 0; h--) {
+    const c = u - h, w = new Date(x.getFullYear(), x.getMonth(), c);
+    o.push({
+      day: A(w, "EEE").toUpperCase(),
+      date: w.getDate(),
+      fullDate: w,
+      isToday: Z(w, d),
+      isActive: Z(w, a),
+      isPadding: !0
+    });
+  }
+  for (let h = 1; h <= r; h++) {
+    const c = new Date(n.getFullYear(), n.getMonth(), h);
+    o.push({
+      day: A(c, "EEE").toUpperCase(),
+      date: h,
+      fullDate: c,
+      isToday: Z(c, d),
+      isActive: Z(c, a),
+      isPadding: !1
+    });
+  }
+  const y = (7 - o.length % 7) % 7, i = ts(m, 1);
+  for (let h = 1; h <= y; h++) {
+    const c = new Date(i.getFullYear(), i.getMonth(), h);
+    o.push({
+      day: A(c, "EEE").toUpperCase(),
+      date: h,
+      fullDate: c,
+      isToday: Z(c, d),
+      isActive: Z(c, a),
+      isPadding: !0
+    });
+  }
+  return o;
+}
+function fe(l = /* @__PURE__ */ new Date()) {
+  return Se(l);
+}
+function oa(l = /* @__PURE__ */ new Date()) {
+  return qt(l);
+}
+const Mt = O.forwardRef(
+  function({
+    day: t,
+    isAdmin: n,
+    dateAttendanceMap: a,
+    selectedDate: d,
+    activeTimeFrame: m
+  }, p) {
+    const [r, o] = M({
+      today: t.isToday,
+      isPresent: null,
+      isDefault: null,
+      isBreak: null,
+      isAbsent: null,
+      breakStart: null,
+      breakMid: null,
+      breakEnd: null,
+      disabled: null,
+      disabledState: !1,
+      hover: !1,
+      focus: !1,
+      pressed: !1,
+      selected: t.isActive
+    }), x = (E) => {
+      const v = /* @__PURE__ */ new Date();
+      return fe(E) < fe(v);
+    }, u = (E) => {
+      const v = A(E, "yyyy-MM-dd"), k = a == null ? void 0 : a.get(v);
+      return (k == null ? void 0 : k.status) === "BREAK";
+    }, f = (E) => {
+      const v = A(E, "yyyy-MM-dd"), k = a == null ? void 0 : a.get(v);
+      return x(E) && k && !k.hasCorrectionOrApproval && (k == null ? void 0 : k.status) === "ABSENT";
+    }, y = (E) => {
+      const v = A(E, "yyyy-MM-dd"), k = a == null ? void 0 : a.get(v);
+      return (k == null ? void 0 : k.status) === "PRESENT";
+    };
+    U(() => {
+      var F, b, N, _;
+      const E = y(t.fullDate) ?? !1, v = u(t.fullDate) ?? !1, k = f(t.fullDate) ?? !1, D = t.isDisabled || !1, P = !t.isToday && !v && !k && !D;
+      let Y = !1, C = !1, B = !1;
+      if (v) {
+        const j = new Date(t.fullDate);
+        j.setDate(j.getDate() - 1);
+        const L = A(j, "yyyy-MM-dd"), ee = new Date(t.fullDate);
+        ee.setDate(ee.getDate() + 1);
+        const te = A(ee, "yyyy-MM-dd"), z = ((F = a == null ? void 0 : a.get(L)) == null ? void 0 : F.status) === "BREAK" && ((b = a == null ? void 0 : a.get(L)) == null ? void 0 : b.isBreakApproved), se = ((N = a == null ? void 0 : a.get(te)) == null ? void 0 : N.status) === "BREAK" && ((_ = a == null ? void 0 : a.get(te)) == null ? void 0 : _.isBreakApproved);
+        Y = v && !z && !!se, C = v && !!z && !!se, B = v && !!z && !se, v && !z && !se && (Y = !0, B = !0, C = !1);
+      }
+      const I = Q(new Date(d), t.fullDate);
+      o((j) => ({
+        ...j,
+        isPresent: E,
+        isBreak: v,
+        isAbsent: k,
+        disabled: D,
+        isDefault: P,
+        breakStart: Y,
+        breakMid: C,
+        breakEnd: B,
+        selected: I
+      }));
+    }, [t, a, d, n]);
+    const i = r.isBreak && m !== "weekly", h = i && r.breakStart && !r.breakEnd, c = i && r.breakEnd && !r.breakStart, w = i && r.breakMid, g = S(
+      "flex w-full items-center justify-center p-ds-02",
+      h && "rounded-l-ds-2xl",
+      c && "rounded-r-ds-2xl",
+      w && "bg-interactive-subtle"
+    ), T = S(
+      // Base layout & transitions
+      "flex h-ds-md w-ds-md items-center justify-center rounded-ds-full text-ds-base relative overflow-hidden",
+      "transition-[background-color,color,border] duration-200",
+      "outline-border-strong outline-solid outline-0",
+      // Cursor
+      r.disabled ? "cursor-default" : "cursor-pointer",
+      // ── Base states (mutually exclusive in original if/else) ──
+      // Disabled
+      r.disabled && "bg-transparent text-text-disabled",
+      // Today (not break, not disabled)
+      !r.disabled && r.today && !r.isBreak && "bg-interactive text-text-on-color ring-2 ring-inset ring-interactive",
+      // Break (not disabled, not today-only)
+      !r.disabled && r.isBreak && !w && "bg-interactive-selected text-text-secondary ring-2 ring-inset ring-interactive",
+      // Break mid in non-weekly view overrides break base
+      !r.disabled && r.isBreak && w && "rounded-ds-none bg-interactive-subtle text-text-secondary shadow-none",
+      // Break border-radius overrides for non-weekly
+      !r.disabled && r.isBreak && h && "rounded-l-ds-2xl rounded-r-none",
+      !r.disabled && r.isBreak && c && "rounded-l-none rounded-r-ds-2xl",
+      // Absent (not disabled, not today, not break)
+      !r.disabled && !r.today && !r.isBreak && r.isAbsent && "bg-transparent text-error",
+      // Present (not disabled, not today, not break, not absent)
+      !r.disabled && !r.today && !r.isBreak && !r.isAbsent && r.isPresent && "bg-transparent text-text-primary",
+      // Default (not disabled, not today, not break, not absent, not present)
+      !r.disabled && r.isDefault && "bg-transparent text-text-secondary",
+      // ── Hover overrides ──
+      // Hover on today (not break)
+      r.hover && !r.disabled && r.today && !r.isBreak && "bg-interactive text-text-on-color ring-2 ring-inset ring-interactive",
+      // Hover on present (not today, not break)
+      r.hover && !r.disabled && !r.today && !r.isBreak && r.isPresent && "bg-field text-text-primary",
+      // Hover on default (not today, not break, not present)
+      r.hover && !r.disabled && !r.today && !r.isBreak && !r.isPresent && r.isDefault && "bg-field text-text-secondary",
+      // Hover on break (same visual as base break, but re-assert to match original)
+      r.hover && !r.disabled && r.isBreak && !w && "bg-interactive-selected text-text-secondary ring-2 ring-inset ring-interactive",
+      r.hover && !r.disabled && r.isBreak && w && "rounded-ds-none bg-interactive-subtle text-text-secondary shadow-none",
+      // Hover on absent (not today, not break)
+      r.hover && !r.disabled && !r.today && !r.isBreak && r.isAbsent && "bg-field text-error",
+      // ── Focus ──
+      r.focus && !r.pressed && "outline-2",
+      // ── Pressed ──
+      r.pressed && (r.isPresent || r.isAbsent || r.isDefault || r.disabled) && "bg-error-surface",
+      // ── Selected ──
+      r.selected && "font-semibold",
+      r.selected && m === "monthly" && "text-text-primary",
+      // ── DisabledState (visual-only disabled, different from functional disabled) ──
+      r.disabledState && "text-text-disabled",
+      r.disabledState && r.today && "bg-text-disabled text-text-on-color"
+    );
+    return /* @__PURE__ */ e("div", { ref: p, className: g, children: /* @__PURE__ */ s(
+      "div",
+      {
+        className: T,
+        onMouseEnter: () => o((E) => ({ ...E, hover: !0 })),
+        onMouseLeave: () => o((E) => ({ ...E, hover: !1 })),
+        onFocus: () => o((E) => ({ ...E, focus: !0 })),
+        onBlur: () => o((E) => ({ ...E, focus: !1 })),
+        onMouseDown: () => o((E) => ({ ...E, pressed: !0 })),
+        onMouseUp: () => o((E) => ({ ...E, pressed: !1 })),
+        children: [
+          t.date,
+          r.isAbsent && /* @__PURE__ */ e("span", { className: "absolute bottom-0 left-1/2 h-ds-02b w-ds-02b -translate-x-1/2 rounded-ds-full bg-error" })
+        ]
+      }
+    ) });
+  }
+);
+Mt.displayName = "RenderDate";
+function Ts(l, t, n) {
+  const a = [];
+  if (!(l != null && l.length)) return { onBreak: a };
+  const d = new Date(n), m = new Date(d);
+  m.setHours(0, 0, 0, 0);
+  const p = new Date(d);
+  p.setHours(23, 59, 59, 999);
+  const r = /* @__PURE__ */ new Map();
+  return t.forEach((o) => {
+    const x = new Date(o.date);
+    x >= m && x <= p && r.set(o.userId, o.status);
+  }), l.forEach((o) => {
+    r.get(o.id) === "BREAK" && a.push(o);
+  }), { onBreak: a };
+}
+const St = O.forwardRef(
+  function({
+    isFutureDate: t,
+    users: n,
+    groupedAttendance: a,
+    userImages: d,
+    selectedDate: m
+  }, p) {
+    var E;
+    const r = Be(null), o = $((v) => {
+      r.current = v, typeof p == "function" ? p(v) : p && (p.current = v);
+    }, [p]), [x, u] = M(!1), [f, y] = M(0), [i, h] = M(0);
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- drag-to-scroll UX enhancement on scrollable container
+      /* @__PURE__ */ e(
+        "div",
+        {
+          ref: o,
+          className: "hide-scrollbar w-full cursor-grab overflow-x-auto active:cursor-grabbing max-md:pb-ds-05",
+          onMouseDown: (v) => {
+            var k, D;
+            u(!0), y(v.pageX - (((k = r.current) == null ? void 0 : k.offsetLeft) || 0)), h(((D = r.current) == null ? void 0 : D.scrollLeft) || 0);
+          },
+          onMouseMove: (v) => {
+            var P;
+            if (!x) return;
+            v.preventDefault();
+            const D = (v.pageX - (((P = r.current) == null ? void 0 : P.offsetLeft) || 0) - f) * 2;
+            r.current && (r.current.scrollLeft = i - D);
+          },
+          onMouseUp: () => {
+            u(!1);
+          },
+          onMouseLeave: () => {
+            u(!1);
+          },
+          style: {
+            scrollbarWidth: "none",
+            msOverflowStyle: "none"
+          },
+          children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: "flex items-start justify-start gap-ds-04 px-0 pt-ds-03 md:gap-0 md:px-ds-06 min-w-max",
+              children: t ? /* @__PURE__ */ e("div", { className: "min-h-28", children: n && ((E = Object.entries(
+                Ts(
+                  n,
+                  [],
+                  m
+                )
+              )) == null ? void 0 : E.map(([v, k]) => {
+                const D = k;
+                return /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: "flex w-full flex-col gap-ds-04 rounded-ds-md bg-layer-02 p-ds-06 md:rounded-ds-lg",
+                    children: [
+                      (D == null ? void 0 : D.length) > 0 && /* @__PURE__ */ e("h2", { className: "text-ds-sm font-semibold uppercase tracking-wider capitalize text-text-tertiary", children: `On Break (${(D == null ? void 0 : D.length) || 0})` }),
+                      /* @__PURE__ */ e("div", { className: "flex w-full flex-wrap items-center", children: (D == null ? void 0 : D.length) > 0 && /* @__PURE__ */ e(
+                        nt,
+                        {
+                          users: D == null ? void 0 : D.map((P) => ({
+                            image: d[P.id],
+                            name: P.name || "User"
+                          })),
+                          max: 4,
+                          showTooltip: !1
+                        }
+                      ) })
+                    ]
+                  },
+                  v
+                );
+              })) }) : Object.entries(a || {}).map(
+                ([v, k]) => /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: S("flex w-full flex-col gap-ds-04 rounded-ds-md bg-layer-02 p-ds-06 md:rounded-ds-lg md:p-ds-05", v !== "yetToMark" ? "border-r border-border" : "", "max-md:border-0 max-md:p-ds-05", "min-w-[200px]"),
+                    children: [
+                      /* @__PURE__ */ s("h2", { className: "text-ds-sm font-semibold uppercase tracking-wider capitalize text-text-tertiary", children: [
+                        v === "yetToMark" ? "Yet to Mark" : v.replace(/([A-Z])/g, " $1").toLowerCase(),
+                        " ",
+                        "(",
+                        k.length,
+                        ")"
+                      ] }),
+                      /* @__PURE__ */ e("div", { className: "flex cursor-pointer flex-wrap items-center", children: /* @__PURE__ */ e(
+                        nt,
+                        {
+                          users: k.map(
+                            ({ user: D }) => ({
+                              image: d[D.id],
+                              name: D.name
+                            })
+                          ),
+                          max: 4,
+                          showTooltip: !1
+                        }
+                      ) })
+                    ]
+                  },
+                  v
+                )
+              )
+            }
+          )
+        }
+      )
+    );
+  }
+);
+St.displayName = "AttendanceOverview";
+function ca(l) {
+  return l.replace(
+    /^[\p{Emoji_Presentation}\p{Extended_Pictographic}\u200B-\u200D]+/gu,
+    ""
+  );
+}
+function Re(l) {
+  return (l == null ? void 0 : l.replace(
+    /[\p{Emoji_Presentation}\p{Extended_Pictographic}\u200B-\u200D]+/gu,
+    ""
+  )) ?? "";
+}
+const ct = {
+  APPROVED: { text: "Corrected", color: "accent" },
+  PENDING: { text: "Pending", color: "warning" },
+  REJECTED: { text: "Denied", color: "error" },
+  MISSING: { text: "Missed", color: "error" }
+}, mt = {
+  APPROVED: { text: "Approved", color: "success" },
+  PENDING: { text: "Pending", color: "warning" },
+  REJECTED: { text: "Denied", color: "error" },
+  CANCELLED: { text: "Redacted", color: "error" },
+  MISSING: { text: "Missed", color: "error" }
+};
+function Rt(l, t) {
+  const n = t ? ct : mt, a = t ? ct.REJECTED : mt.REJECTED, { text: d, color: m } = n[l] || a;
+  return /* @__PURE__ */ e(Ns, { color: m, size: "sm", children: d });
+}
+const ze = O.forwardRef(
+  function({
+    selectedDate: t,
+    userId: n,
+    breakRequest: a,
+    assetsBaseUrl: d = "",
+    onCancelBreak: m,
+    onRefreshAttendance: p,
+    onRefreshGroupedAttendance: r
+  }, o) {
+    const [x, u] = M(!0), [f, y] = M(!1);
+    U(() => {
+      y(!1);
+    }, [t]);
+    const i = a && a.numberOfDays === 1, h = () => {
+      if (!a) return !1;
+      const g = Se(/* @__PURE__ */ new Date()), T = Se(new Date(a.endDate));
+      return Z(T, g) || Ve(T, g);
+    }, c = async () => {
+      !a || !m || (await m({
+        requestId: a.id,
+        deleteSingleDay: x,
+        dateToCancel: t,
+        userId: n
+      }), y(!1), p == null || p(), r == null || r());
+    }, w = (g) => A(new Date(g), "dd/MM/yyyy");
+    return !a || a.status === "CANCELLED" ? null : /* @__PURE__ */ s("div", { ref: o, className: "relative flex w-full flex-col gap-ds-06 rounded-ds-lg bg-layer-accent-subtle", children: [
+      d && /* @__PURE__ */ e(
+        "img",
+        {
+          src: `${d}/break-background.svg`,
+          alt: "Break Background",
+          className: "absolute bottom-0 z-0 h-full min-h-[236px] rounded-ds-lg object-cover"
+        }
+      ),
+      /* @__PURE__ */ s("div", { className: "relative flex min-h-[236px] flex-col items-center justify-between rounded-ds-lg md:flex-row", children: [
+        f && i ? /* @__PURE__ */ e("div", { className: "flex h-full w-full flex-col items-center justify-center px-ds-04 pt-[17px]", children: /* @__PURE__ */ s("div", { className: "w-full gap-ds-05 rounded-ds-md bg-layer-01 shadow-01 px-ds-06 py-ds-07 md:hidden", children: [
+          /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-ds-04", children: [
+            /* @__PURE__ */ e("div", { className: "text-ds-lg font-semibold text-center text-text-primary", children: "Cancel this break?" }),
+            /* @__PURE__ */ s("div", { className: "text-ds-base max-w-[240px] text-center text-text-tertiary max-md:leading-[100%]", children: [
+              "You're about to cancel the break scheduled for",
+              " ",
+              /* @__PURE__ */ e("span", { className: "font-semibold text-text-secondary", children: w(a.startDate) })
+            ] })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "mt-ds-05 flex w-full flex-col gap-ds-04", children: /* @__PURE__ */ e(J, { variant: "solid", className: "w-full rounded-ds-full", onClick: c, children: "Yes, cancel" }) }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              "aria-label": "Close cancel form",
+              className: "absolute right-ds-05 top-ds-05 rounded-ds-sm p-ds-04 text-icon-secondary transition-colors hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus disabled:pointer-events-none",
+              onClick: () => y(!1),
+              children: /* @__PURE__ */ e(oe, { className: "h-ico-lg w-ico-lg" })
+            }
+          )
+        ] }) }) : /* @__PURE__ */ s("div", { className: "flex h-full w-full flex-col items-center justify-center gap-ds-06 p-ds-06 px-ds-06 py-ds-07 md:w-1/2 md:p-ds-07", children: [
+          /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-end gap-ds-05", children: [
+            /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider text-text-tertiary", children: "Reason" }),
+            /* @__PURE__ */ e("div", { className: "text-ds-lg font-semibold text-text-primary", children: Re((a == null ? void 0 : a.reason) || " ") })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-end gap-ds-05", children: [
+            /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider text-text-tertiary", children: "Break Period" }),
+            /* @__PURE__ */ s("div", { className: "text-ds-lg font-semibold text-text-primary", children: [
+              de(new Date(a.startDate)),
+              " ",
+              a.numberOfDays > 1 && /* @__PURE__ */ s(V, { children: [
+                "- ",
+                de(new Date(a.endDate)),
+                " "
+              ] }),
+              /* @__PURE__ */ e("span", { className: "text-ds-lg text-text-placeholder", children: `(${a.numberOfDays} day${a.numberOfDays > 1 ? "s" : ""})` })
+            ] })
+          ] })
+        ] }),
+        !f && /* @__PURE__ */ s(V, { children: [
+          /* @__PURE__ */ e("div", { className: "h-[1px] w-[329px] bg-border-subtle md:hidden max-md:w-[90%]" }),
+          /* @__PURE__ */ e("div", { className: "hidden h-[170px] w-[2px] bg-border-subtle md:block" })
+        ] }),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: S("flex w-full flex-col items-center justify-center px-ds-05", f || a.status === "APPROVED" || a.status === "REJECTED" ? "pb-ds-06 pt-[9px]" : "py-ds-06", "md:w-1/2 md:px-ds-06 md:py-ds-05 max-md:pt-[34px]"),
+            children: [
+              /* @__PURE__ */ e("p", { className: "text-ds-sm font-semibold uppercase tracking-wider mb-ds-06  text-text-tertiary max-md:mb-ds-05", children: "Break Status" }),
+              /* @__PURE__ */ s("div", { className: "mb-ds-04 flex w-full flex-col items-center justify-start gap-ds-04 rounded-ds-2xl border border-border-subtle bg-layer-01 shadow-01 px-ds-05 py-ds-04 text-center font-semibold text-text-primary", children: [
+                Rt(a.status, !1),
+                a.status === "APPROVED" && a.adminComment,
+                a.status === "REJECTED" && a.adminComment
+              ] }),
+              i ? /* @__PURE__ */ s(V, { children: [
+                h() && m && /* @__PURE__ */ e(
+                  "button",
+                  {
+                    className: "text-ds-sm cursor-pointer border-none bg-transparent text-interactive-hover underline md:hidden",
+                    onClick: () => y(!f),
+                    children: "Want to cancel this break?"
+                  }
+                ),
+                /* @__PURE__ */ s(ce, { children: [
+                  h() && m && /* @__PURE__ */ e(we, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "text-ds-sm hidden cursor-pointer border-none bg-transparent text-interactive-hover underline md:block", children: "Want to cancel this break?" }) }),
+                  /* @__PURE__ */ s(me, { className: "max-w-[329px] gap-ds-04 rounded-ds-xl", children: [
+                    /* @__PURE__ */ e(Ne, { children: /* @__PURE__ */ e("div", { className: "text-ds-lg font-semibold text-center text-text-primary", children: "Cancel this break?" }) }),
+                    /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-start", children: /* @__PURE__ */ s("div", { className: "text-ds-base max-w-[241px] text-center text-text-tertiary", children: [
+                      "You're about to cancel the break scheduled for",
+                      " ",
+                      /* @__PURE__ */ e("span", { className: "font-semibold text-text-secondary", children: w(a.startDate) })
+                    ] }) }),
+                    /* @__PURE__ */ e(He, { className: "mt-ds-04 sm:justify-start", children: /* @__PURE__ */ e($e, { asChild: !0, children: /* @__PURE__ */ e(J, { variant: "solid", className: "w-full rounded-ds-full", onClick: c, children: "Yes, cancel" }) }) })
+                  ] })
+                ] })
+              ] }) : /* @__PURE__ */ s(ce, { children: [
+                h() && m && /* @__PURE__ */ e(we, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "text-ds-sm cursor-pointer border-none bg-transparent text-interactive-hover underline", children: "Want to cancel this break?" }) }),
+                /* @__PURE__ */ s(me, { className: "max-w-[329px] gap-ds-04 rounded-ds-xl", children: [
+                  /* @__PURE__ */ e(Ne, { children: /* @__PURE__ */ e("div", { className: "text-ds-lg font-semibold flex text-center text-text-primary", children: "Cancel your break" }) }),
+                  /* @__PURE__ */ e("div", { className: "flex flex-col items-center justify-start", children: /* @__PURE__ */ s("div", { className: "flex w-full flex-col items-start", children: [
+                    /* @__PURE__ */ s("label", { className: "breakRequest-checkbox flex items-center space-x-ds-03", children: [
+                      /* @__PURE__ */ e(
+                        it,
+                        {
+                          checked: x,
+                          onCheckedChange: (g) => u(g === !0)
+                        }
+                      ),
+                      /* @__PURE__ */ s("span", { className: "text-text-secondary", children: [
+                        _e(new Date(t).getDate()),
+                        " break only"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ s("label", { className: "breakRequest-checkbox mt-ds-03 flex items-center space-x-ds-03", children: [
+                      /* @__PURE__ */ e(
+                        it,
+                        {
+                          checked: !x,
+                          onCheckedChange: (g) => u(g !== !0)
+                        }
+                      ),
+                      /* @__PURE__ */ s("span", { className: "text-text-secondary", children: [
+                        _e(
+                          new Date(a.startDate).getDate()
+                        ),
+                        " ",
+                        "to",
+                        " ",
+                        _e(new Date(a.endDate).getDate()),
+                        " ",
+                        "breaks"
+                      ] })
+                    ] })
+                  ] }) }),
+                  /* @__PURE__ */ e(He, { className: "mt-ds-04 sm:justify-start", children: /* @__PURE__ */ e($e, { asChild: !0, children: /* @__PURE__ */ e(J, { variant: "solid", className: "w-full rounded-ds-full", onClick: c, children: "Yes, cancel" }) }) })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+ze.displayName = "BreakRequestCard";
+function Ms({
+  selectedUserAttendance: l
+}) {
+  const t = (l == null ? void 0 : l.status) || "ABSENT", n = t === "Not_Marked" ? "ABSENT" : t, a = n.charAt(0).toUpperCase() + n.slice(1).toLowerCase(), d = l != null && l.timeIn ? new Date(l.timeIn).toLocaleTimeString() : null;
+  return /* @__PURE__ */ s("div", { className: "flex w-full flex-col items-center justify-center px-ds-05 py-ds-07 sm:px-ds-05 sm:py-ds-06 md:px-ds-06 md:py-ds-05 md:pr-0", children: [
+    /* @__PURE__ */ e("p", { className: "text-ds-sm font-semibold uppercase tracking-wider mb-ds-06  text-text-tertiary", children: "Attendance status" }),
+    /* @__PURE__ */ s("div", { className: "mb-ds-04 flex w-full items-center justify-center gap-ds-03 rounded-ds-3xl border border-border-subtle px-ds-05 py-ds-04 text-center", children: [
+      /* @__PURE__ */ e("span", { className: "font-semibold text-interactive", children: a }),
+      a === "Absent" && /* @__PURE__ */ e("div", { className: "w-px h-5 opacity-[0.5] bg-border-strong" }),
+      !d && t !== "HOLIDAY" && t !== "WEEKEND" && /* @__PURE__ */ e("span", { className: "text-ds-md text-text-tertiary", children: "Not marked" }),
+      !!d && t === "ABSENT" && /* @__PURE__ */ e("span", { className: "text-ds-md text-text-tertiary", children: "Removed" })
+    ] }),
+    d && /* @__PURE__ */ s("p", { className: "text-ds-md m-0 text-center text-text-disabled", children: [
+      "Marked at ",
+      d
+    ] })
+  ] });
+}
+function Ss({
+  selectedAssociate: l,
+  selectedDate: t,
+  selectedUserAttendance: n,
+  onUpdateAttendanceStatus: a
+}) {
+  return /* @__PURE__ */ s(me, { className: "sm:max-w-md", children: [
+    /* @__PURE__ */ e(Ne, { children: /* @__PURE__ */ s("div", { className: "text-ds-md text-text-tertiary", children: [
+      "Edit attendance of",
+      " ",
+      /* @__PURE__ */ e("span", { className: "text-ds-md font-semibold text-interactive", children: l.name })
+    ] }) }),
+    /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-start", children: [
+      /* @__PURE__ */ e("div", { className: "text-ds-lg mb-ds-05 text-interactive", children: A(new Date(t), "dd MMMM ''yy") }),
+      /* @__PURE__ */ e("div", { className: "mb-ds-04 flex w-full items-center justify-center gap-ds-03 rounded-ds-3xl border border-border-subtle px-ds-05 py-ds-04 text-center font-semibold text-interactive", children: (n == null ? void 0 : n.status) === "PRESENT" ? "PRESENT " : "ABSENT" })
+    ] }),
+    /* @__PURE__ */ e(He, { className: "sm:justify-start", children: /* @__PURE__ */ e($e, { asChild: !0, children: /* @__PURE__ */ e(
+      J,
+      {
+        variant: "solid",
+        fullWidth: !0,
+        onClick: () => {
+          const d = (n == null ? void 0 : n.status) !== "PRESENT";
+          a == null || a({
+            userId: l.id,
+            date: t,
+            isPresent: d
+          });
+        },
+        children: `Mark as ${(n == null ? void 0 : n.status) === "PRESENT" ? "absent" : "present"}`
+      }
+    ) }) })
+  ] });
+}
+const At = O.forwardRef(
+  function({
+    selectedAssociate: t,
+    selectedDate: n,
+    selectedUserAttendance: a,
+    userTasks: d,
+    selectedBreakRequest: m,
+    isFutureDate: p,
+    assetsBaseUrl: r,
+    onUpdateAttendanceStatus: o,
+    onToggleTaskStatus: x,
+    onAddTask: u,
+    onReorderTasks: f,
+    onCancelBreak: y,
+    onRefreshSelectedUserAttendance: i,
+    onRefreshAttendanceData: h
+  }, c) {
+    const [w, g] = M(""), [T, E] = M(null), [v, k] = M(null), D = async (C) => {
+      C.preventDefault(), !(!w.trim() || !t) && (await (u == null ? void 0 : u(w, t.id)), g(""));
+    }, P = (C, B) => {
+      E(B), C.target.classList.add("dragging");
+    }, Y = async (C, B) => {
+      if (C.preventDefault(), T !== null && T !== B) {
+        const I = d[T], F = d[B];
+        await (f == null ? void 0 : f(I.id, F.id));
+      }
+      E(null), k(null);
+    };
+    return /* @__PURE__ */ s("div", { ref: c, className: "relative flex items-center justify-between md:items-stretch", children: [
+      !p && (a == null ? void 0 : a.status) !== "BREAK" && /* @__PURE__ */ s(ce, { children: [
+        /* @__PURE__ */ e(we, { asChild: !0, children: /* @__PURE__ */ e(
+          X,
+          {
+            icon: /* @__PURE__ */ e(Je, {}),
+            size: "sm",
+            "aria-label": "Edit",
+            className: "absolute right-2 top-2"
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          Ss,
+          {
+            selectedAssociate: t,
+            selectedDate: n,
+            selectedUserAttendance: a,
+            onUpdateAttendanceStatus: o
+          }
+        )
+      ] }),
+      p ? /* @__PURE__ */ e(V, { children: (a == null ? void 0 : a.status) === "BREAK" ? /* @__PURE__ */ e(
+        ze,
+        {
+          selectedDate: n,
+          userId: t.id,
+          breakRequest: m,
+          assetsBaseUrl: r,
+          onCancelBreak: y,
+          onRefreshAttendance: i,
+          onRefreshGroupedAttendance: h
+        }
+      ) : /* @__PURE__ */ e("div", { className: "min-h-28" }) }) : (a == null ? void 0 : a.status) === "BREAK" ? /* @__PURE__ */ e(
+        ze,
+        {
+          selectedDate: n,
+          userId: t.id,
+          breakRequest: m,
+          assetsBaseUrl: r,
+          onCancelBreak: y,
+          onRefreshAttendance: i,
+          onRefreshGroupedAttendance: h
+        }
+      ) : (a == null ? void 0 : a.status) === "ABSENT" || (a == null ? void 0 : a.status) === "Not_Marked" && wt(
+        new Date(n),
+        Se(/* @__PURE__ */ new Date())
+      ) ? /* @__PURE__ */ s("div", { className: "flex w-full flex-col items-center justify-center p-ds-06", children: [
+        /* @__PURE__ */ e("p", { className: "text-ds-sm font-semibold uppercase tracking-wider mb-ds-05  text-text-tertiary", children: "COMMENT" }),
+        /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-between rounded-ds-lg border border-border bg-layer-01 px-ds-05 max-md:h-ds-lg", children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              className: "text-ds-md flex-1 border-none py-ds-03 text-text-primary outline-none",
+              defaultValue: "Don't miss next time :)"
+            }
+          ),
+          /* @__PURE__ */ e(
+            X,
+            {
+              icon: /* @__PURE__ */ e(Dt, {}),
+              size: "sm",
+              "aria-label": "Update status",
+              onClick: () => {
+                const C = (a == null ? void 0 : a.status) !== "PRESENT";
+                o == null || o({
+                  userId: t.id,
+                  date: n,
+                  isPresent: C
+                });
+              }
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ s("div", { className: "mb-auto flex w-full flex-col md:pr-ds-06", children: [
+        /* @__PURE__ */ e("p", { className: "text-ds-sm font-semibold uppercase tracking-wider mb-ds-06  text-interactive", children: "Tasks for the day" }),
+        d && /* @__PURE__ */ s(V, { children: [
+          /* @__PURE__ */ e("div", { className: "no-scrollbar mb-ds-03 flex max-h-[250px] flex-col gap-ds-03 overflow-y-auto", children: d.map((C, B) => (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            /* @__PURE__ */ s(
+              "div",
+              {
+                className: S("task-item mb-ds-03 flex items-center gap-ds-02", T === B ? "dragging" : ""),
+                draggable: !0,
+                onDragStart: (I) => P(I, B),
+                onDragOver: (I) => I.preventDefault(),
+                onDrop: (I) => Y(I, B),
+                onDragEnter: () => k(B),
+                onDragLeave: () => k(null),
+                onDragEnd: (I) => {
+                  I.target instanceof HTMLElement && I.target.classList.remove("dragging");
+                },
+                children: [
+                  v === B && /* @__PURE__ */ e("div", { className: "drop-indicator" }),
+                  C.status === "COMPLETED" ? /* @__PURE__ */ e(dt, { className: "" }) : /* @__PURE__ */ e(dt, {}),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        x == null || x(
+                          C.id,
+                          C.status === "COMPLETED" ? "TODO" : "COMPLETED"
+                        );
+                      },
+                      "aria-label": C.status === "COMPLETED" ? `Mark "${C.title}" as incomplete` : `Mark "${C.title}" as complete`,
+                      className: "cursor-pointer",
+                      children: C.status === "COMPLETED" ? /* @__PURE__ */ e(ns, { className: "text-interactive-hover" }) : /* @__PURE__ */ e(is, {})
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "p",
+                    {
+                      className: S("text-ds-md flex-1 overflow-hidden hyphens-auto break-all pr-ds-05 break-words min-w-0", C.status === "COMPLETED" ? "text-text-disabled line-through" : "text-text-secondary"),
+                      children: C.title
+                    }
+                  )
+                ]
+              },
+              C.id
+            )
+          )) }),
+          Q(new Date(n), /* @__PURE__ */ new Date()) && /* @__PURE__ */ s(
+            "form",
+            {
+              className: "flex items-center gap-ds-02 pb-ds-05",
+              onSubmit: D,
+              children: [
+                /* @__PURE__ */ e("div", { className: "w-ds-06" }),
+                /* @__PURE__ */ e("button", { type: "submit", className: "appearance-none", children: /* @__PURE__ */ e(os, {}) }),
+                /* @__PURE__ */ e(
+                  "textarea",
+                  {
+                    className: "text-ds-md flex w-full resize-none items-center border-none bg-transparent !leading-6 text-text-secondary outline-none placeholder:leading-6",
+                    placeholder: "Add a task",
+                    value: w,
+                    onChange: (C) => g(C.target.value),
+                    onKeyDown: (C) => {
+                      C.key === "Enter" && !C.shiftKey && (C.preventDefault(), D(C));
+                    },
+                    rows: 1,
+                    style: {
+                      minHeight: "24px",
+                      height: "auto",
+                      overflow: "hidden"
+                    },
+                    onInput: (C) => {
+                      const B = C.target;
+                      B.style.height = "auto", B.style.height = B.scrollHeight + "px";
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] }),
+      !p && (a == null ? void 0 : a.status) !== "BREAK" && /* @__PURE__ */ s(V, { children: [
+        /* @__PURE__ */ e("div", { className: "block h-full w-[2px] bg-border-subtle" }),
+        /* @__PURE__ */ e(Ms, { selectedUserAttendance: a })
+      ] })
+    ] });
+  }
+);
+At.displayName = "AssociateDetail";
+const Bt = O.forwardRef(
+  function({
+    corrections: t,
+    currentUserId: n,
+    userImages: a,
+    assetsBaseUrl: d,
+    activeTimeFrame: m,
+    onApproveCorrection: p,
+    onRejectCorrection: r
+  }, o) {
+    const x = async (u, f) => {
+      f === "APPROVED" ? await (p == null ? void 0 : p(u.id)) : await (r == null ? void 0 : r(u.id));
+    };
+    return t.length === 0 ? /* @__PURE__ */ e("div", { ref: o, className: "p-ds-05 text-center", children: "No pending corrections" }) : /* @__PURE__ */ e(
+      "div",
+      {
+        ref: o,
+        className: "flex max-h-[200px] w-full flex-col overflow-y-auto bg-layer-01 px-ds-06 max-md:flex-1 max-md:max-h-none max-md:min-h-[372px] max-md:p-0",
+        children: t.map((u) => {
+          var f, y, i, h, c, w, g, T, E, v, k;
+          return /* @__PURE__ */ e(ht, { children: /* @__PURE__ */ s("div", { className: "max-md:border flex items-center justify-between px-ds-03 py-ds-04 max-md:rounded-ds-lg max-md:border-border", children: [
+            /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04", children: [
+              /* @__PURE__ */ s(Xe, { className: "h-ds-md w-ds-md border-2 max-md:mb-[auto]", children: [
+                /* @__PURE__ */ e(
+                  Qe,
+                  {
+                    src: a[((f = u == null ? void 0 : u.user) == null ? void 0 : f.id) || ""] || "",
+                    alt: `${(y = u == null ? void 0 : u.user) == null ? void 0 : y.name}'s Icon`
+                  }
+                ),
+                /* @__PURE__ */ e(Le, { children: ((h = (i = u == null ? void 0 : u.user) == null ? void 0 : i.name) == null ? void 0 : h[0]) || "U" })
+              ] }),
+              /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-02", children: [
+                /* @__PURE__ */ e("p", { className: "text-ds-sm text-text-secondary", children: (c = u == null ? void 0 : u.user) == null ? void 0 : c.name }),
+                /* @__PURE__ */ s("div", { className: "flex w-full flex-wrap items-center gap-ds-03", children: [
+                  /* @__PURE__ */ e("p", { className: "text-ds-base font-semibold text-text-primary", children: u == null ? void 0 : u.reason }),
+                  u != null && u.reason ? /* @__PURE__ */ e("p", { className: "text-ds-base font-semibold text-text-tertiary", children: "•" }) : null,
+                  /* @__PURE__ */ e("p", { className: "text-ds-base text-text-tertiary", children: Me(
+                    new Date(u == null ? void 0 : u.date)
+                  ) })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ s("div", { className: "ml-auto flex items-center gap-ds-04 max-md:flex-col max-md:justify-center max-md:gap-0", children: [
+              /* @__PURE__ */ e("div", { className: "p-ds-02", children: /* @__PURE__ */ s(ae, { delayDuration: 0, children: [
+                /* @__PURE__ */ e(re, { asChild: !0, children: /* @__PURE__ */ e(
+                  "button",
+                  {
+                    "aria-label": "Reject correction",
+                    className: S("rounded-ds-full p-ds-03 text-text-tertiary hover:text-text-secondary", ((w = u == null ? void 0 : u.user) == null ? void 0 : w.id) === n ? "cursor-not-allowed opacity-[0.38]" : ""),
+                    onClick: () => {
+                      var D;
+                      return ((D = u == null ? void 0 : u.user) == null ? void 0 : D.id) !== n && x(
+                        u,
+                        "REJECTED"
+                      );
+                    },
+                    disabled: ((g = u == null ? void 0 : u.user) == null ? void 0 : g.id) === n,
+                    children: /* @__PURE__ */ e(oe, { className: "h-ico-lg w-ico-lg" })
+                  }
+                ) }),
+                ((T = u == null ? void 0 : u.user) == null ? void 0 : T.id) === n && /* @__PURE__ */ e(le, { children: /* @__PURE__ */ e("p", { children: "You cannot approve/reject your own correction request" }) })
+              ] }) }),
+              /* @__PURE__ */ e("div", { className: "p-ds-02", children: /* @__PURE__ */ s(ae, { delayDuration: 0, children: [
+                /* @__PURE__ */ e(re, { asChild: !0, children: /* @__PURE__ */ e(
+                  "button",
+                  {
+                    "aria-label": "Approve correction",
+                    className: S("rounded-ds-full p-ds-03", ((E = u == null ? void 0 : u.user) == null ? void 0 : E.id) === n ? "cursor-not-allowed opacity-[0.38]" : ""),
+                    onClick: () => {
+                      var D;
+                      return ((D = u == null ? void 0 : u.user) == null ? void 0 : D.id) !== n && x(
+                        u,
+                        "APPROVED"
+                      );
+                    },
+                    disabled: ((v = u == null ? void 0 : u.user) == null ? void 0 : v.id) === n,
+                    children: /* @__PURE__ */ e(Ge, { className: "h-ico-lg w-ico-lg text-text-success" })
+                  }
+                ) }),
+                ((k = u == null ? void 0 : u.user) == null ? void 0 : k.id) === n && /* @__PURE__ */ e(le, { children: /* @__PURE__ */ e("p", { children: "You cannot approve/reject your own correction request" }) })
+              ] }) })
+            ] })
+          ] }) }, u.id);
+        })
+      }
+    );
+  }
+);
+Bt.displayName = "CorrectionList";
+function Rs() {
+  const [l, t] = M(!1), [n, a] = M(null), [d, m] = M(null), [p, r] = M(""), [o, x] = M(!1), [u, f] = M(
+    null
+  ), [y, i] = M(!1), [h, c] = M(null), w = $(() => {
+    t(!1), a(null), m(null), r(""), x(!1), f(null), i(!1), c(null);
+  }, []);
+  return {
+    // State
+    isProcessing: l,
+    activeRequest: n,
+    activeAction: d,
+    message: p,
+    openComment: o,
+    hoveredRequest: u,
+    isCtrlPressed: y,
+    hoverActionTemp: h,
+    // Setters
+    setIsProcessing: t,
+    setActiveRequest: a,
+    setActiveAction: m,
+    setMessage: r,
+    setOpenComment: x,
+    setHoveredRequest: f,
+    setIsCtrlPressed: i,
+    setHoverActionTemp: c,
+    // Helpers
+    reset: w
+  };
+}
+const jt = O.forwardRef(
+  function({
+    requests: t,
+    currentUserId: n,
+    userImages: a = {},
+    activeTimeFrame: d,
+    onApproveBreak: m,
+    onRejectBreak: p
+  }, r) {
+    const o = Rs(), x = hs();
+    U(() => {
+      const i = (c) => {
+        (c.ctrlKey || c.metaKey) && (o.setIsCtrlPressed(!0), o.hoveredRequest ? (o.setActiveAction(o.hoverActionTemp), o.setOpenComment(!0), o.setActiveRequest(o.hoveredRequest)) : (o.setOpenComment(!1), o.setActiveAction(null), o.setActiveRequest(null)));
+      }, h = (c) => {
+        !c.ctrlKey && !c.metaKey && o.setIsCtrlPressed(!1);
+      };
+      return window.addEventListener("keydown", i), window.addEventListener("keyup", h), () => {
+        window.removeEventListener("keydown", i), window.removeEventListener("keyup", h);
+      };
+    }, [o.hoveredRequest, o.isCtrlPressed, o.openComment, o.hoverActionTemp]);
+    const u = (i, h) => {
+      o.setHoverActionTemp(h), o.setHoveredRequest(i);
+    }, f = async (i, h) => {
+      if (!(!i || !h)) {
+        o.setIsProcessing(!0), o.setOpenComment(!1);
+        try {
+          const c = {
+            requestId: i.id,
+            adminComment: o.message,
+            userId: n
+          };
+          h === "approveBreak" ? await (m == null ? void 0 : m(c)) : h === "rejectBreak" && await (p == null ? void 0 : p(c)), o.setActiveRequest(null), o.setActiveAction(null), o.setMessage("");
+        } catch (c) {
+          console.error("Error processing break request:", c);
+        } finally {
+          o.setIsProcessing(!1);
+        }
+      }
+    }, y = (i) => Z(new Date(i.startDate), new Date(i.endDate));
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: r,
+        className: "no-scrollbar max-h-[230px] w-full overflow-y-auto px-0 md:px-ds-06 max-md:flex-1 max-md:max-h-none max-md:min-h-[407.2px]",
+        children: /* @__PURE__ */ e("div", { className: "flex h-full flex-col gap-ds-03 py-ds-03 max-md:h-[max-content] max-md:gap-ds-05 max-md:py-0 max-md:pb-ds-05", children: t == null ? void 0 : t.map((i) => {
+          var h, c, w, g, T, E, v, k, D, P, Y, C, B, I;
+          return /* @__PURE__ */ s(
+            "div",
+            {
+              className: "flex flex-col justify-start rounded-ds-lg border-b border-border md:gap-ds-05 md:border-b-0 max-md:border-none",
+              children: [
+                /* @__PURE__ */ s("div", { className: "flex flex-col justify-between rounded-t-ds-lg border border-border md:flex-row md:border-0 md:px-ds-03 md:py-ds-04 max-md:border-b-0", children: [
+                  /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04 border-b border-border p-ds-05 md:border-none md:p-0 max-md:items-start", children: [
+                    /* @__PURE__ */ e(
+                      "img",
+                      {
+                        src: a[((h = i.user) == null ? void 0 : h.id) || ""],
+                        className: "h-ds-md w-ds-md overflow-hidden rounded-ds-full bg-interactive-subtle",
+                        alt: ((w = (c = i.user) == null ? void 0 : c.name) == null ? void 0 : w[0]) || "U"
+                      }
+                    ),
+                    /* @__PURE__ */ s("div", { className: "flex max-w-[277px] flex-col items-start gap-ds-02 sm:max-w-none", children: [
+                      /* @__PURE__ */ e("div", { className: "flex flex-row gap-ds-02b", children: /* @__PURE__ */ e("div", { className: "flex items-center gap-ds-03", children: /* @__PURE__ */ e("p", { className: "text-ds-sm text-text-secondary", children: (g = i.user) == null ? void 0 : g.name }) }) }),
+                      y(i) ? /* @__PURE__ */ s("div", { className: "flex w-full flex-col items-center gap-ds-03 md:flex-row md:flex-wrap max-md:items-start", children: [
+                        /* @__PURE__ */ e("p", { className: "text-ds-base font-semibold text-text-primary", children: Re(i.reason) }),
+                        /* @__PURE__ */ e("p", { className: "text-ds-base hidden font-semibold text-text-tertiary md:block", children: "•" }),
+                        /* @__PURE__ */ e("p", { className: "text-ds-base text-text-tertiary", children: de(new Date(i.startDate)) })
+                      ] }) : /* @__PURE__ */ s("div", { className: "flex flex-col items-start justify-start gap-ds-03", children: [
+                        /* @__PURE__ */ e("p", { className: "text-ds-base font-semibold text-text-primary", children: Re(i.reason) }),
+                        /* @__PURE__ */ s("p", { className: "text-ds-base text-text-tertiary", children: [
+                          de(new Date(i.startDate)),
+                          " to",
+                          " ",
+                          de(new Date(i.endDate)),
+                          /* @__PURE__ */ s("span", { className: "text-interactive-hover", children: [
+                            ", ",
+                            i.numberOfDays,
+                            " days"
+                          ] })
+                        ] })
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ s("div", { className: "flex h-full w-full items-center justify-between self-stretch sm:w-auto sm:justify-start", children: [
+                    /* @__PURE__ */ e("div", { className: "flex w-1/2 justify-center border-r border-border p-ds-02 md:border-r-0", children: /* @__PURE__ */ s(ae, { delayDuration: 0, children: [
+                      /* @__PURE__ */ e(re, { asChild: !0, children: /* @__PURE__ */ e(
+                        "button",
+                        {
+                          "aria-label": "Reject request",
+                          onMouseEnter: () => {
+                            u(i, "rejectBreak");
+                          },
+                          onMouseLeave: () => {
+                            o.setHoverActionTemp(null), o.setHoveredRequest(null);
+                          },
+                          onClick: () => {
+                            var F, b;
+                            ((F = i == null ? void 0 : i.user) == null ? void 0 : F.id) !== n && (o.setActiveRequest(i), o.setActiveAction("rejectBreak"), ((b = o.activeRequest) == null ? void 0 : b.id) !== i.id && o.setMessage(""), f(i, "rejectBreak"));
+                          },
+                          disabled: o.isProcessing || ((T = i == null ? void 0 : i.user) == null ? void 0 : T.id) === n,
+                          className: S(
+                            "rounded-ds-full p-ds-03",
+                            ((E = o.activeRequest) == null ? void 0 : E.id) === i.id && o.activeAction === "rejectBreak" && "bg-error-surface",
+                            ((v = i == null ? void 0 : i.user) == null ? void 0 : v.id) === n && "cursor-not-allowed opacity-[0.38]",
+                            "max-md:flex max-md:w-full max-md:justify-center"
+                          ),
+                          children: /* @__PURE__ */ e(
+                            oe,
+                            {
+                              className: S(
+                                "h-ico-lg w-ico-lg",
+                                ((k = o.activeRequest) == null ? void 0 : k.id) === i.id && o.activeAction === "rejectBreak" && "text-text-error"
+                              )
+                            }
+                          )
+                        }
+                      ) }),
+                      ((D = i == null ? void 0 : i.user) == null ? void 0 : D.id) === n && /* @__PURE__ */ e(le, { children: /* @__PURE__ */ e("p", { children: "You cannot approve/reject your own break request" }) })
+                    ] }) }),
+                    /* @__PURE__ */ e("div", { className: "flex w-1/2 justify-center bg-success-surface p-ds-02 md:bg-transparent", children: /* @__PURE__ */ s(ae, { delayDuration: 0, children: [
+                      /* @__PURE__ */ e(re, { asChild: !0, children: /* @__PURE__ */ e(
+                        "button",
+                        {
+                          "aria-label": "Approve request",
+                          onMouseEnter: () => {
+                            u(i, "approveBreak");
+                          },
+                          onMouseLeave: () => {
+                            o.setHoverActionTemp(null), o.setHoveredRequest(null);
+                          },
+                          onClick: () => {
+                            var F, b;
+                            ((F = i == null ? void 0 : i.user) == null ? void 0 : F.id) !== n && (o.setActiveRequest(i), o.setActiveAction("approveBreak"), ((b = o.activeRequest) == null ? void 0 : b.id) !== i.id && o.setMessage(""), f(i, "approveBreak"));
+                          },
+                          disabled: o.isProcessing || ((P = i == null ? void 0 : i.user) == null ? void 0 : P.id) === n,
+                          className: S(
+                            "rounded-ds-full p-ds-03",
+                            ((Y = o.activeRequest) == null ? void 0 : Y.id) === i.id && o.activeAction === "approveBreak" && "bg-success-surface",
+                            ((C = i == null ? void 0 : i.user) == null ? void 0 : C.id) === n && "cursor-not-allowed opacity-[0.38]",
+                            "max-md:flex max-md:w-full max-md:justify-center"
+                          ),
+                          children: /* @__PURE__ */ e(Ge, { className: "h-ico-lg w-ico-lg" })
+                        }
+                      ) }),
+                      ((B = i == null ? void 0 : i.user) == null ? void 0 : B.id) === n && /* @__PURE__ */ e(le, { children: /* @__PURE__ */ e("p", { children: "You cannot approve/reject your own break request" }) })
+                    ] }) })
+                  ] })
+                ] }),
+                (o.openComment && o.activeRequest && ((I = o.activeRequest) == null ? void 0 : I.id) === i.id || x) && /* @__PURE__ */ s("div", { className: "flex flex-row items-start justify-between rounded-ds-lg border-[1px] border-border py-ds-02 max-md:rounded-t-none", children: [
+                  /* @__PURE__ */ s("div", { className: "flex w-full flex-col items-start justify-start gap-ds-02 px-ds-05 pb-ds-02 pt-[10px]", children: [
+                    /* @__PURE__ */ e("div", { className: "text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder", children: "comment" }),
+                    /* @__PURE__ */ e(
+                      "input",
+                      {
+                        type: "text",
+                        value: o.message,
+                        onChange: (F) => {
+                          var b;
+                          return o.setMessage((b = F == null ? void 0 : F.target) == null ? void 0 : b.value);
+                        },
+                        placeholder: "Enter a Comment",
+                        className: "text-ds-md w-full text-text-primary outline-none"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      "aria-label": "Send comment",
+                      disabled: o.isProcessing,
+                      onClick: () => f(i, o.activeAction),
+                      className: "my-auto flex items-center justify-center rounded-ds-full p-ds-03",
+                      children: /* @__PURE__ */ e(Dt, { className: "h-ico-lg w-ico-lg" })
+                    }
+                  )
+                ] })
+              ]
+            },
+            i.id
+          );
+        }) })
+      }
+    );
+  }
+);
+jt.displayName = "LeaveRequests";
+const xe = (l) => A(l, "yyyy-MM-dd'T'HH:mm:ssxxx"), ue = (l, t, n) => l === "weekly" ? Tt(t, n) : Cs(t, n), Ee = (l) => `${A(l, "MMMM")} ${A(l, "yyyy")}`;
+function As(l, t) {
+  const n = /* @__PURE__ */ new Date();
+  switch (t.type) {
+    case "SET_TIME_FRAME": {
+      const a = ue(
+        t.payload,
+        l.currentDate,
+        l.selectedDate
+      );
+      return {
+        ...l,
+        activeTimeFrame: t.payload,
+        days: a
+      };
+    }
+    case "SELECT_DATE": {
+      const { index: a, date: d } = t.payload, m = xe(d), p = fe(d) > fe(n), r = Ee(d);
+      return {
+        ...l,
+        activeIndex: a,
+        selectedDate: m,
+        isFutureDate: p,
+        selectedMonth: r
+      };
+    }
+    case "SELECT_DAY_MONTHLY": {
+      const { date: a } = t.payload, d = xe(a), m = fe(a) > fe(n), p = Ee(a), r = ue(
+        l.activeTimeFrame,
+        l.currentDate,
+        d
+      );
+      return {
+        ...l,
+        selectedDate: d,
+        isFutureDate: m,
+        selectedMonth: p,
+        days: r
+      };
+    }
+    case "NAVIGATE_DATE": {
+      const a = new Date(l.currentDate);
+      if (l.activeTimeFrame === "weekly") {
+        const r = t.payload === "prev" ? -7 : 7;
+        a.setDate(a.getDate() + r);
+      } else {
+        const r = t.payload === "prev" ? -1 : 1;
+        a.setMonth(a.getMonth() + r), a.setDate(1);
+      }
+      const d = xe(a), m = Ee(a), p = ue(l.activeTimeFrame, d, d);
+      return {
+        ...l,
+        currentDate: d,
+        selectedDate: d,
+        dateOffset: l.dateOffset + (t.payload === "prev" ? -1 : 1),
+        selectedMonth: m,
+        days: p
+      };
+    }
+    case "SELECT_MONTH": {
+      const [a, d] = t.payload.split(" "), m = new Date(l.selectedDate);
+      m.setMonth((/* @__PURE__ */ new Date(`${a} 1, 2024`)).getMonth()), m.setFullYear(parseInt(d));
+      const p = xe(m), r = Math.floor(
+        (m.getTime() - n.getTime()) / (7 * 24 * 60 * 60 * 1e3)
+      ), o = ue(l.activeTimeFrame, p, p);
+      return {
+        ...l,
+        currentDate: p,
+        selectedDate: p,
+        selectedMonth: t.payload,
+        dateOffset: r,
+        days: o
+      };
+    }
+    case "GO_TODAY": {
+      const a = xe(n), d = Ee(n), m = Math.floor(
+        (n.getTime() - (/* @__PURE__ */ new Date()).getTime()) / (7 * 24 * 60 * 60 * 1e3)
+      ), p = ue(l.activeTimeFrame, a, a), r = p.findIndex(
+        (o) => Q(o.fullDate, n)
+      );
+      return {
+        ...l,
+        currentDate: a,
+        selectedDate: a,
+        selectedMonth: d,
+        dateOffset: m,
+        isFutureDate: !1,
+        days: p,
+        activeIndex: r !== -1 ? r : l.activeIndex
+      };
+    }
+    case "UPDATE_DAYS": {
+      const a = ue(
+        l.activeTimeFrame,
+        l.currentDate,
+        l.selectedDate
+      );
+      return { ...l, days: a };
+    }
+    default:
+      return l;
+  }
+}
+function Bs() {
+  const l = /* @__PURE__ */ new Date(), t = xe(l), n = Tt(t, t), a = n.findIndex(
+    (d) => Q(d.fullDate, l)
+  );
+  return {
+    currentDate: t,
+    selectedDate: t,
+    isFutureDate: !1,
+    activeTimeFrame: "weekly",
+    days: n,
+    selectedMonth: Ee(l),
+    activeIndex: a !== -1 ? a : 0,
+    dateOffset: 0
+  };
+}
+function Ot() {
+  const [l, t] = Lt(As, null, Bs), n = $((i) => {
+    t({ type: "SET_TIME_FRAME", payload: i });
+  }, []), a = $((i, h) => {
+    t({ type: "SELECT_DATE", payload: { index: i, date: h } });
+  }, []), d = $((i) => {
+    t({ type: "SELECT_DAY_MONTHLY", payload: { date: i } });
+  }, []), m = $((i) => {
+    t({ type: "NAVIGATE_DATE", payload: i });
+  }, []), p = $((i) => {
+    t({ type: "SELECT_MONTH", payload: i });
+  }, []), r = $(() => {
+    t({ type: "GO_TODAY" });
+  }, []), o = $(() => {
+    t({ type: "UPDATE_DAYS" });
+  }, []), x = $(() => Q(new Date(l.selectedDate), /* @__PURE__ */ new Date()), [l.selectedDate]), u = $(() => {
+    const i = [], h = (/* @__PURE__ */ new Date()).getFullYear(), c = A(new Date(l.selectedDate), "MMMM");
+    for (let w = -2; w < 1; w++) {
+      const g = new Date(h + w, 0);
+      i.push(`${c} ${g.getFullYear()}`);
+    }
+    return i;
+  }, [l.selectedDate]), f = $(() => l.days.length > 0 && !!l.days[0].fullDate && Q(l.days[0].fullDate, new Date(l.selectedDate)), [l.days, l.selectedDate]), y = $(() => l.days.length > 0 && !!l.days[l.days.length - 1].fullDate && Q(
+    l.days[l.days.length - 1].fullDate,
+    new Date(l.selectedDate)
+  ), [l.days, l.selectedDate]);
+  return {
+    ...l,
+    dispatch: t,
+    // Action creators
+    setActiveTimeFrame: n,
+    selectDate: a,
+    selectDayMonthly: d,
+    navigateDate: m,
+    selectMonth: p,
+    goToday: r,
+    updateDays: o,
+    // Computed
+    isTodaySelected: x,
+    getYearsList: u,
+    isFirstDate: f,
+    isLastDate: y
+  };
+}
+const Pt = bt(
+  null
+);
+function Ce() {
+  const l = yt(Pt);
+  if (!l)
+    throw new Error(
+      "AdminDashboard compound components must be used within <AdminDashboard.Root>"
+    );
+  return l;
+}
+const Ke = ve.forwardRef(function({
+  currentUserId: t,
+  currentUserRole: n,
+  currentUser: a,
+  assetsBaseUrl: d = "",
+  userImages: m = {},
+  isLoading: p = !1,
+  onAssociateChange: r,
+  children: o
+}, x) {
+  const u = Ot(), [f, y] = M("leaveRequest"), [i, h] = M(
+    null
+  ), c = $(
+    (g) => {
+      h(g), r == null || r(g);
+    },
+    [r]
+  ), w = Ye(
+    () => ({
+      currentUserId: t,
+      currentUserRole: n,
+      currentUser: a,
+      assetsBaseUrl: d,
+      userImages: m,
+      cal: u,
+      activeTab: f,
+      setActiveTab: y,
+      selectedAssociate: i,
+      setSelectedAssociate: c
+    }),
+    [
+      t,
+      n,
+      a,
+      d,
+      m,
+      u,
+      f,
+      i,
+      c
+    ]
+  );
+  return p ? /* @__PURE__ */ e(kt, {}) : /* @__PURE__ */ e(Pt.Provider, { value: w, children: /* @__PURE__ */ e(
+    "div",
+    {
+      ref: x,
+      className: "flex w-full max-w-layout flex-col items-center justify-center max-md:h-[100%] max-md:justify-start",
+      children: /* @__PURE__ */ e("div", { className: "z-raised flex w-full flex-col items-start justify-start rounded-ds-lg border border-border bg-layer-02 p-ds-05 shadow-05 max-md:flex-1 max-md:min-h-0 max-md:overflow-y-auto max-md:border-0 max-md:px-ds-05 max-md:pb-0 max-md:pt-ds-06", children: o })
+    }
+  ) });
+});
+Ke.displayName = "AdminDashboard.Root";
+const Ft = ve.forwardRef(function({
+  dateAttendanceMap: t = null,
+  onDateChange: n,
+  onTimeFrameChange: a,
+  users: d = [],
+  selectedUserAttendance: m = null
+}, p) {
+  const { cal: r, selectedAssociate: o, setSelectedAssociate: x, userImages: u, setActiveTab: f } = Ce(), y = () => {
+    r.goToday(), f("leaveRequest");
+  }, i = (g) => {
+    r.navigateDate(g), f("leaveRequest");
+  }, h = (g) => {
+    r.selectMonth(g), f("leaveRequest");
+  }, c = (g) => {
+    const T = r.days[g].fullDate;
+    r.selectDate(g, T), n == null || n(A(T, "yyyy-MM-dd'T'HH:mm:ssxxx"));
+  }, w = (g, T) => {
+    r.activeTimeFrame === "weekly" ? (c(g), f("leaveRequest")) : (r.selectDayMonthly(T), f("leaveRequest"), n == null || n(A(T, "yyyy-MM-dd'T'HH:mm:ssxxx")));
+  };
+  return U(() => {
+    a == null || a(r.activeTimeFrame);
+  }, [r.activeTimeFrame]), U(() => {
+    n == null || n(r.selectedDate);
+  }, [r.selectedDate]), /* @__PURE__ */ s("div", { ref: p, children: [
+    /* @__PURE__ */ e(
+      Ct,
+      {
+        selectedMonth: r.selectedMonth,
+        yearsList: r.getYearsList(),
+        isTodaySelected: r.isTodaySelected(),
+        selectedAssociate: o,
+        users: d,
+        userImages: u,
+        activeTimeFrame: r.activeTimeFrame,
+        onMonthSelection: h,
+        onTodayClick: y,
+        onSelectAssociate: x,
+        onTimeFrameChange: (g) => r.setActiveTimeFrame(g),
+        onDateChange: i
+      }
+    ),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: S(
+          "calendar",
+          r.activeTimeFrame === "weekly" ? "flex" : "grid grid-cols-7 gap-0",
+          "w-full items-center"
+        ),
+        children: [
+          r.activeTimeFrame === "monthly" && ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"].map((g) => /* @__PURE__ */ e("div", { className: "pb-ds-03 pt-ds-05 text-center", children: /* @__PURE__ */ e("span", { className: "text-ds-sm font-semibold uppercase tracking-wider  text-text-tertiary", children: g }) }, g)),
+          r.days.map((g, T) => /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              tabIndex: g.isPadding ? -1 : 0,
+              "aria-label": g.isPadding ? void 0 : A(g.fullDate, "MMMM d, yyyy"),
+              className: S(
+                r.activeTimeFrame === "weekly" ? "w-full rounded-t-ds-lg pb-ds-04 pt-ds-05 max-md:rounded-ds-lg" : "pb-0 pt-0",
+                "flex cursor-pointer flex-col items-center text-center",
+                r.activeTimeFrame === "weekly" && r.activeIndex === T ? (m == null ? void 0 : m.status) === "BREAK" ? "bg-layer-accent-subtle" : "bg-layer-02" : "",
+                g.isPadding && "opacity-[0.5]"
+              ),
+              onClick: () => w(T, g.fullDate),
+              children: [
+                r.activeTimeFrame === "weekly" && /* @__PURE__ */ e("span", { className: "text-ds-sm font-semibold uppercase tracking-wider mb-ds-03  text-text-tertiary", children: g.day }),
+                /* @__PURE__ */ e(
+                  Mt,
+                  {
+                    day: g,
+                    isAdmin: !0,
+                    selectedDate: r.selectedDate,
+                    dateAttendanceMap: o ? t : null,
+                    activeTimeFrame: r.activeTimeFrame
+                  }
+                )
+              ]
+            },
+            T
+          ))
+        ]
+      }
+    )
+  ] });
+});
+Ft.displayName = "AdminDashboard.Calendar";
+const _t = ve.forwardRef(function({ groupedAttendance: t = null, users: n = [] }, a) {
+  const { cal: d, selectedAssociate: m, userImages: p } = Ce();
+  return m ? null : /* @__PURE__ */ e("div", { ref: a, children: /* @__PURE__ */ e(
+    St,
+    {
+      isFutureDate: d.isFutureDate,
+      users: n,
+      groupedAttendance: t,
+      userImages: p,
+      selectedDate: d.selectedDate
+    }
+  ) });
+});
+_t.displayName = "AdminDashboard.AttendanceOverview";
+const Yt = ve.forwardRef(function({
+  attendance: t = null,
+  tasks: n = [],
+  breakRequest: a = null,
+  onUpdateAttendanceStatus: d,
+  onToggleTaskStatus: m,
+  onAddTask: p,
+  onReorderTasks: r,
+  onCancelBreak: o,
+  onRefreshSelectedUserAttendance: x,
+  onRefreshAttendanceData: u
+}, f) {
+  const { cal: y, selectedAssociate: i, assetsBaseUrl: h } = Ce();
+  return i ? /* @__PURE__ */ e("div", { ref: f, children: /* @__PURE__ */ e(
+    At,
+    {
+      selectedAssociate: i,
+      selectedDate: y.selectedDate,
+      selectedUserAttendance: t,
+      userTasks: n,
+      selectedBreakRequest: a,
+      isFutureDate: y.isFutureDate,
+      assetsBaseUrl: h,
+      onUpdateAttendanceStatus: d,
+      onToggleTaskStatus: m,
+      onAddTask: p,
+      onReorderTasks: r,
+      onCancelBreak: o,
+      onRefreshSelectedUserAttendance: x,
+      onRefreshAttendanceData: u
+    }
+  ) }) : null;
+});
+Yt.displayName = "AdminDashboard.AssociateDetail";
+const ut = as(
+  "text-ds-sm font-semibold uppercase tracking-wider cursor-pointer px-ds-03 py-ds-04",
+  {
+    variants: {
+      active: {
+        true: "border-b-[1px] border-b-interactive-hover text-text-primary",
+        false: "text-text-tertiary"
+      }
+    },
+    defaultVariants: {
+      active: !1
+    }
+  }
+), It = ve.forwardRef(function({
+  requests: t = [],
+  corrections: n = [],
+  onApproveBreak: a,
+  onRejectBreak: d,
+  onApproveCorrection: m,
+  onRejectCorrection: p
+}, r) {
+  const { currentUserId: o, userImages: x, cal: u, activeTab: f, setActiveTab: y, assetsBaseUrl: i } = Ce(), h = n.filter(
+    (w) => w.correctionStatus === "PENDING"
+  );
+  U(() => {
+    t.length > 0 ? y("leaveRequest") : h.length > 0 && y("attendanceRequest");
+  }, [t.length, h.length, y]);
+  const c = (w) => {
+    y(w);
+  };
+  return h.length === 0 && t.length === 0 ? null : /* @__PURE__ */ e("div", { ref: r, className: "w-full p-0 md:p-ds-06", children: /* @__PURE__ */ s("div", { className: "max-md:pt-[16px] flex flex-col items-start overflow-hidden rounded-ds-lg border-0 border-border-subtle bg-layer-01 shadow-01 pt-ds-03 md:border max-md:pb-0", children: [
+    /* @__PURE__ */ s("div", { className: "flex w-full items-start border-b-[1px] border-b-border px-ds-06 md:border-b max-md:border-0 max-md:px-0", children: [
+      t.length > 0 && /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: () => c("leaveRequest"),
+          "aria-current": f === "leaveRequest" ? "true" : void 0,
+          className: ut({ active: f === "leaveRequest" }),
+          children: [
+            /* @__PURE__ */ e("span", { className: "hidden sm:inline", children: "break " }),
+            "Requests",
+            /* @__PURE__ */ s("span", { className: "text-interactive-hover", children: [
+              "(",
+              t.length,
+              ")"
+            ] })
+          ]
+        }
+      ),
+      h.length > 0 && /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: () => c("attendanceRequest"),
+          "aria-current": f === "attendanceRequest" ? "true" : void 0,
+          className: ut({ active: f === "attendanceRequest" }),
+          children: [
+            "Attendance Correction",
+            " ",
+            /* @__PURE__ */ s("span", { className: "text-interactive-hover", children: [
+              "(",
+              h.length,
+              ")"
+            ] })
+          ]
+        }
+      )
+    ] }),
+    f === "attendanceRequest" && h.length > 0 && /* @__PURE__ */ e(
+      Bt,
+      {
+        corrections: h,
+        currentUserId: o,
+        userImages: x,
+        assetsBaseUrl: i,
+        activeTimeFrame: u.activeTimeFrame,
+        onApproveCorrection: m,
+        onRejectCorrection: p
+      }
+    ),
+    f === "leaveRequest" && t.length > 0 && /* @__PURE__ */ e(
+      jt,
+      {
+        requests: t,
+        currentUserId: o,
+        userImages: x,
+        activeTimeFrame: u.activeTimeFrame,
+        onApproveBreak: a,
+        onRejectBreak: d
+      }
+    )
+  ] }) });
+});
+It.displayName = "AdminDashboard.LeaveRequests";
+const Ht = ve.forwardRef(function({ children: t }, n) {
+  const { cal: a } = Ce(), d = a.isFirstDate(), m = a.isLastDate();
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      ref: n,
+      className: S(
+        "flex w-full flex-col rounded-ds-lg bg-layer-02 md:p-ds-06 max-md:bg-transparent",
+        {
+          "rounded-ds-lg": !d && !m,
+          "rounded-ds-lg rounded-tl-none": d && !m,
+          "rounded-b-ds-lg rounded-tr-none": !d && m,
+          "rounded-ds-none": d && m
+        }
+      ),
+      children: t
+    }
+  );
+});
+Ht.displayName = "AdminDashboard.Content";
+const ma = Object.assign(Ke, {
+  Root: Ke,
+  Calendar: Ft,
+  AttendanceOverview: _t,
+  AssociateDetail: Yt,
+  LeaveRequests: It,
+  Content: Ht
+}), js = O.forwardRef(
+  function({ onDateSelect: t, hasCorrection: n }, a) {
+    const d = Ot(), m = (x) => {
+      d.navigateDate(x);
+    }, p = (x) => {
+      d.selectMonth(x);
+    }, r = () => {
+      const x = [], f = new Date(d.currentDate).getFullYear();
+      for (let y = 0; y < 12; y++) {
+        const i = new Date(f, y, 1);
+        x.push(`${A(i, "MMMM")} ${f}`);
+      }
+      return x;
+    }, o = (x, u) => {
+      d.activeTimeFrame === "weekly" ? d.selectDate(x, u) : d.selectDayMonthly(u), t(u);
+    };
+    return /* @__PURE__ */ s("div", { ref: a, className: "w-full", children: [
+      /* @__PURE__ */ s("div", { className: "mb-ds-06 flex w-full items-center justify-start", children: [
+        /* @__PURE__ */ s(he, { children: [
+          /* @__PURE__ */ s(be, { className: "text-ds-xl flex items-center gap-ds-03 text-text-secondary", children: [
+            d.selectedMonth,
+            /* @__PURE__ */ e(ie, {})
+          ] }),
+          /* @__PURE__ */ e(ke, { children: r().map((x) => /* @__PURE__ */ e(
+            pe,
+            {
+              onSelect: () => p(x),
+              children: x
+            },
+            x
+          )) })
+        ] }),
+        /* @__PURE__ */ s("div", { className: "ml-auto flex items-center gap-ds-05", children: [
+          /* @__PURE__ */ e(
+            Et,
+            {
+              size: "md",
+              variant: "tonal",
+              options: [
+                { id: "weekly", text: "Weekly" },
+                { id: "monthly", text: "Monthly" }
+              ],
+              selectedId: d.activeTimeFrame,
+              onSelect: (x) => d.setActiveTimeFrame(x)
+            }
+          ),
+          /* @__PURE__ */ s("div", { className: "flex gap-0", children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                "aria-label": "Previous",
+                onClick: () => m("prev"),
+                className: "rounded-ds-full p-ds-02 hover:bg-layer-02",
+                children: /* @__PURE__ */ e(ye, { className: "h-ico-md w-ico-md text-text-secondary" })
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                "aria-label": "Next",
+                onClick: () => m("next"),
+                className: "rounded-ds-full p-ds-02 hover:bg-layer-02",
+                children: /* @__PURE__ */ e(ge, { className: "h-ico-md w-ico-md text-text-secondary" })
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ s(
+        "div",
+        {
+          className: S(
+            "calendar",
+            d.activeTimeFrame === "weekly" ? "flex" : "grid grid-cols-7 gap-0",
+            "w-full items-center overflow-hidden"
+          ),
+          children: [
+            d.activeTimeFrame === "monthly" && ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"].map((x) => /* @__PURE__ */ e("div", { className: "pb-ds-03 pt-ds-05 text-center", children: /* @__PURE__ */ e("span", { className: "text-ds-sm font-semibold uppercase tracking-wider  text-text-tertiary", children: x }) }, x)),
+            d.days.map((x, u) => /* @__PURE__ */ s(
+              "button",
+              {
+                type: "button",
+                tabIndex: x.isPadding ? -1 : 0,
+                "aria-label": x.isPadding ? void 0 : A(x.fullDate, "MMMM d, yyyy"),
+                className: S(
+                  d.activeTimeFrame === "weekly" ? "w-full rounded-t-ds-lg pb-ds-04 pt-ds-05" : "pb-0 pt-0",
+                  "flex cursor-pointer flex-col items-center text-center",
+                  d.activeTimeFrame === "weekly" && d.activeIndex === u && "bg-layer-02",
+                  x.isPadding && "opacity-[0.5]"
+                ),
+                onClick: () => o(u, x.fullDate),
+                children: [
+                  d.activeTimeFrame === "weekly" && /* @__PURE__ */ e("span", { className: "text-ds-sm font-semibold uppercase tracking-wider mb-ds-03  text-text-tertiary", children: x.day }),
+                  /* @__PURE__ */ s(
+                    "div",
+                    {
+                      className: S(
+                        "mx-ds-02 my-ds-02 flex-col",
+                        "flex h-ds-md w-ds-md items-center justify-center",
+                        d.activeTimeFrame === "monthly" && Q(x.fullDate, new Date(d.selectedDate)) && "rounded-ds-full bg-interactive-subtle ring-2 ring-inset ring-interactive"
+                      ),
+                      children: [
+                        /* @__PURE__ */ e(
+                          "span",
+                          {
+                            className: S(
+                              "text-ds-base flex h-ds-md w-ds-md items-center justify-center rounded-ds-full",
+                              x.isToday ? "bg-interactive-hover p-ds-03 text-text-on-color" : "text-text-secondary",
+                              x.isActive && !x.isToday && "bg-field"
+                            ),
+                            children: x.date
+                          }
+                        ),
+                        n && n(x.fullDate) && /* @__PURE__ */ e("div", { className: "absolute z-raised mt-ds-06 h-ds-02b w-ds-02b translate-y-[5px] rounded-ds-full bg-text-error" })
+                      ]
+                    }
+                  )
+                ]
+              },
+              u
+            ))
+          ]
+        }
+      )
+    ] });
+  }
+);
+js.displayName = "Calendar";
+const $t = O.forwardRef(
+  function({
+    breakBalanceData: t,
+    userImages: n,
+    onSaveBalance: a
+  }, d) {
+    return /* @__PURE__ */ s("div", { ref: d, className: "m-0 flex h-[400px] flex-col items-start justify-start p-0 max-md:h-auto", children: [
+      /* @__PURE__ */ s("div", { className: "m-0 mx-[4%] mb-ds-05 mt-ds-04 flex w-[92%] items-start justify-start gap-ds-03 p-0 text-text-placeholder", children: [
+        /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider w-[16.4%] min-w-[120px] px-ds-04 py-ds-03 text-text-tertiary", children: "NAME" }),
+        /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider w-[16.4%] px-ds-04 py-ds-03 text-text-tertiary", children: "Total Balance" })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "no-scrollbar mx-[4%] flex w-[92%] flex-col gap-ds-05 overflow-y-auto max-md:h-[calc(100dvh-373px)]", children: t.map((m) => {
+        var p, r, o, x, u, f;
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            className: "flex w-full flex-row items-center justify-start gap-ds-03 !border-0 text-left hover:bg-field",
+            children: [
+              /* @__PURE__ */ s("div", { className: "flex w-1/6 min-w-[120px] items-center gap-ds-03 p-ds-04", children: [
+                /* @__PURE__ */ s(Xe, { className: "h-ds-xs-plus w-ds-xs-plus", children: [
+                  /* @__PURE__ */ e(Qe, { src: n[m.userId], alt: ((p = m.user) == null ? void 0 : p.name) || "" }),
+                  /* @__PURE__ */ e(Le, { children: ((o = (r = m.user) == null ? void 0 : r.name) == null ? void 0 : o[0]) || "U" })
+                ] }),
+                /* @__PURE__ */ e("div", { className: "w-[calc(100%-36px)]", children: /* @__PURE__ */ e("span", { className: "text-ds-md block w-full cursor-default truncate text-text-primary", children: ((x = m.user) == null ? void 0 : x.firstName) ?? ((f = (u = m.user) == null ? void 0 : u.name) == null ? void 0 : f.split(" ")[0]) }) })
+              ] }),
+              /* @__PURE__ */ e("div", { className: "text-ds-md w-[16.4%] p-ds-04 px-ds-04 text-interactive", children: m.totalDays })
+            ]
+          },
+          m.id
+        );
+      }) })
+    ] });
+  }
+);
+$t.displayName = "BreakBalance";
+const zt = O.forwardRef(function({
+  request: t,
+  userImages: n,
+  handleRejectRequest: a,
+  handleApproveRequest: d,
+  commentBoxOpen: m,
+  onCommentBoxClose: p,
+  clickedAction: r,
+  userId: o
+}, x) {
+  var c, w, g, T, E, v, k, D, P;
+  const [u, f] = M(""), y = new Date(t.startDate), i = new Date(t.endDate), h = Z(y, i);
+  return /* @__PURE__ */ s(V, { children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        ref: x,
+        className: "flex justify-between border-b border-border px-ds-03 py-ds-04 last:border-b-0",
+        children: [
+          /* @__PURE__ */ s("div", { className: "flex w-full items-center gap-ds-04", children: [
+            /* @__PURE__ */ s(Xe, { className: "h-ds-md w-ds-md", children: [
+              /* @__PURE__ */ e(Qe, { src: n[((c = t.user) == null ? void 0 : c.id) || ""], alt: ((w = t.user) == null ? void 0 : w.name) || "" }),
+              /* @__PURE__ */ e(Le, { children: (((g = t.user) == null ? void 0 : g.name) || "?")[0] })
+            ] }),
+            /* @__PURE__ */ s("div", { className: "flex w-auto max-w-[75%] flex-col items-start gap-ds-02b", children: [
+              /* @__PURE__ */ e("div", { className: "flex flex-row gap-ds-02b", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
+                /* @__PURE__ */ e("p", { className: "text-ds-sm text-text-secondary", children: (T = t.user) == null ? void 0 : T.name }),
+                t.correction && /* @__PURE__ */ s(V, { children: [
+                  /* @__PURE__ */ e("div", { className: "block h-3 w-[1px] bg-border-subtle" }),
+                  " ",
+                  /* @__PURE__ */ e("p", { className: "text-ds-sm text-interactive", children: "Attendance Corrections" }),
+                  " "
+                ] })
+              ] }) }),
+              /* @__PURE__ */ e("div", { className: "flex w-full flex-wrap items-center gap-ds-04", children: h ? /* @__PURE__ */ s("div", { className: "flex w-full flex-wrap items-center gap-ds-03", children: [
+                /* @__PURE__ */ s(ae, { children: [
+                  /* @__PURE__ */ e(re, { asChild: !0, children: /* @__PURE__ */ e("p", { className: "text-ds-base font-semibold line-clamp-2 cursor-default text-text-primary", children: t.reason }) }),
+                  /* @__PURE__ */ e(le, { children: t.reason })
+                ] }),
+                /* @__PURE__ */ s("p", { className: "text-ds-base text-text-tertiary", children: [
+                  "• ",
+                  Me(y)
+                ] })
+              ] }) : /* @__PURE__ */ s(V, { children: [
+                /* @__PURE__ */ s(ae, { children: [
+                  /* @__PURE__ */ e(re, { asChild: !0, children: /* @__PURE__ */ e("p", { className: "text-ds-base font-semibold line-clamp-2 cursor-default text-text-primary", children: t.reason }) }),
+                  /* @__PURE__ */ e(le, { children: t.reason })
+                ] }),
+                /* @__PURE__ */ s("p", { className: "text-ds-base text-text-tertiary", children: [
+                  Me(y),
+                  " to",
+                  " ",
+                  Me(i),
+                  ",",
+                  /* @__PURE__ */ s("span", { className: "text-interactive-hover", children: [
+                    " ",
+                    t.numberOfDays,
+                    " days"
+                  ] })
+                ] })
+              ] }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04", children: [
+            /* @__PURE__ */ s(ae, { delayDuration: 0, children: [
+              /* @__PURE__ */ e(re, { asChild: !0, children: /* @__PURE__ */ e(
+                J,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: (Y) => {
+                    var C;
+                    return ((C = t.user) == null ? void 0 : C.id) !== o && a(Y, t.id);
+                  },
+                  disabled: ((E = t.user) == null ? void 0 : E.id) === o,
+                  "aria-label": "Reject break request",
+                  children: /* @__PURE__ */ e(oe, { className: "h-ico-lg w-ico-lg" })
+                }
+              ) }),
+              ((v = t.user) == null ? void 0 : v.id) === o && /* @__PURE__ */ e(le, { children: /* @__PURE__ */ e("p", { children: "You cannot approve/reject your own break request" }) })
+            ] }),
+            /* @__PURE__ */ s(ae, { delayDuration: 0, children: [
+              /* @__PURE__ */ e(re, { asChild: !0, children: /* @__PURE__ */ e(
+                J,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: (Y) => {
+                    var C;
+                    return ((C = t.user) == null ? void 0 : C.id) !== o && d(Y, t.id);
+                  },
+                  disabled: ((k = t.user) == null ? void 0 : k.id) === o,
+                  "aria-label": "Approve break request",
+                  children: /* @__PURE__ */ e(Ge, { className: "h-ico-lg w-ico-lg" })
+                }
+              ) }),
+              ((D = t.user) == null ? void 0 : D.id) === o && /* @__PURE__ */ e(le, { children: /* @__PURE__ */ e("p", { children: "You cannot approve/reject your own break request" }) })
+            ] })
+          ] })
+        ]
+      },
+      t.id
+    ),
+    /* @__PURE__ */ e(
+      ce,
+      {
+        open: m,
+        onOpenChange: () => {
+          p(), f("");
+        },
+        children: /* @__PURE__ */ s(me, { children: [
+          /* @__PURE__ */ s(Ne, { children: [
+            /* @__PURE__ */ e(ps, { className: "text-ds-xl", children: (P = t.user) == null ? void 0 : P.name }),
+            /* @__PURE__ */ e(Ze, { className: "text-ds-lg", children: t.reason })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ s("div", { className: "text-ds-md flex flex-col items-start justify-center gap-ds-03 rounded-ds-lg border border-border-subtle bg-layer-01 shadow-01 px-ds-05 pb-ds-01 pt-ds-03 text-text-primary", children: [
+              /* @__PURE__ */ e("label", { className: "text-ds-xs font-semibold uppercase tracking-wider text-text-helper", htmlFor: "comment", children: "Comment" }),
+              /* @__PURE__ */ e(
+                bs,
+                {
+                  id: "comment",
+                  defaultValue: u,
+                  onChange: (Y) => f(Y.target.value),
+                  placeholder: "Enjoy your break",
+                  className: "resize-none border-none px-0 shadow-none placeholder:font-accent"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
+              J,
+              {
+                className: "mt-ds-06",
+                variant: "solid",
+                onClick: () => {
+                  r === "approve" ? d(void 0, t.id, u) : r === "reject" && a(void 0, t.id, u);
+                },
+                children: r === "approve" ? "Approve" : "Reject"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+});
+zt.displayName = "LeaveRequest";
+const Kt = O.forwardRef(function({ id: t, userId: n, onDelete: a }, d) {
+  const [m, p] = M(!1), { toast: r } = je(), [o, x] = M(!1), u = Be(null);
+  return /* @__PURE__ */ s(ce, { open: o, onOpenChange: x, children: [
+    /* @__PURE__ */ e(we, { asChild: !0, children: /* @__PURE__ */ e(X, { icon: /* @__PURE__ */ e(cs, {}), size: "md", "aria-label": "Delete break" }) }),
+    /* @__PURE__ */ s(me, { className: "flex w-[335px] flex-col items-center gap-ds-06 p-ds-06 max-md:w-[90%] max-md:rounded-ds-lg", children: [
+      /* @__PURE__ */ s("div", { className: "flex w-full max-w-[240px] flex-col items-center gap-ds-04 text-center", children: [
+        /* @__PURE__ */ e("p", { className: "text-ds-lg font-semibold text-center text-text-primary", children: "Delete this break?" }),
+        /* @__PURE__ */ e("p", { className: "text-ds-base text-text-tertiary", children: "This will be permanently deleted and can not undo" })
+      ] }),
+      /* @__PURE__ */ e("form", { ref: u, onSubmit: async (y) => {
+        var i;
+        y.preventDefault(), (i = y.stopPropagation) == null || i.call(y), p(!0);
+        try {
+          a && a(), r({
+            description: "Break request deleted successfully",
+            color: "neutral"
+          }), x(!1);
+        } catch (h) {
+          console.error("Error deleting break request:", h), r({
+            title: "Error",
+            description: "Failed to delete break request",
+            color: "error"
+          });
+        } finally {
+          p(!1);
+        }
+      }, className: "w-full", children: /* @__PURE__ */ e(
+        J,
+        {
+          className: "w-full",
+          variant: "solid",
+          onClick: () => {
+            var y;
+            return (y = u.current) == null ? void 0 : y.requestSubmit();
+          },
+          disabled: m,
+          children: "Yes, Delete"
+        }
+      ) })
+    ] })
+  ] });
+});
+Kt.displayName = "DeleteBreak";
+function Ae(l, t, n) {
+  const a = q(l), d = q(t), m = q(n);
+  return rs(a, { start: d, end: m });
+}
+function Os(l, t) {
+  const n = q(l), a = q(t);
+  return wt(n, a) || Nt(n, a);
+}
+function Wt(l, t) {
+  const n = q(l), a = q(t);
+  return Ve(n, a) || Nt(n, a);
+}
+function Ps(l, t) {
+  return Ve(q(l), q(t));
+}
+function xt(l, t, n, a) {
+  return n.some((d) => {
+    const m = A(new Date(d.startDate), "yyyy-MM-dd"), p = A(new Date(d.endDate), "yyyy-MM-dd"), r = Ae(l, m, p), o = Ae(t, m, p), x = Os(l, m) && Wt(t, p);
+    return d.id !== a && (r || o || x);
+  });
+}
+function ft(l, t, n) {
+  return t.some((a) => {
+    const d = A(new Date(a.startDate), "yyyy-MM-dd"), m = A(new Date(a.endDate), "yyyy-MM-dd");
+    return a.id !== n && Ae(l, d, m);
+  });
+}
+function Fs() {
+  const [l, t] = M(!1), [n, a] = M(null), [d, m] = M((/* @__PURE__ */ new Date()).getMonth()), [p, r] = M((/* @__PURE__ */ new Date()).getFullYear()), [o, x] = M(
+    null
+  ), [u, f] = M(null), y = $(
+    (h) => {
+      const c = d, w = p;
+      if (h === "next") {
+        const g = c === 11 ? 0 : c + 1, T = c === 11 ? w + 1 : w;
+        m(g), r(T);
+      } else {
+        const g = c === 0 ? 11 : c - 1, T = c === 0 ? w - 1 : w;
+        m(g), r(T);
+      }
+    },
+    [d, p]
+  ), i = $(() => {
+    t(!1), a(null), x(null), f(null);
+  }, []);
+  return {
+    // State
+    showCalendar: l,
+    activeDate: n,
+    currentMonth: d,
+    currentYear: p,
+    selectedStartDate: o,
+    selectedEndDate: u,
+    // Setters (for cases needing direct access)
+    setShowCalendar: t,
+    setActiveDate: a,
+    setCurrentMonth: m,
+    setCurrentYear: r,
+    setSelectedStartDate: x,
+    setSelectedEndDate: f,
+    // Helpers
+    navigateMonth: y,
+    resetDates: i
+  };
+}
+const Vt = O.forwardRef(function({
+  selectedLeave: t,
+  existingBreaks: n,
+  onFetchMonthBreaks: a,
+  onSave: d,
+  onDelete: m
+}, p) {
+  var F;
+  const [r, o] = M(!1), [x, u] = M(
+    n || []
+  ), [f, y] = M(!1), [i, h] = M({
+    status: (t == null ? void 0 : t.status) || "",
+    comment: (t == null ? void 0 : t.adminComment) || "",
+    startDate: (t == null ? void 0 : t.startDate) || "",
+    endDate: (t == null ? void 0 : t.endDate) || ""
+  }), c = Fs(), w = Be(null), { toast: g } = je();
+  U(() => {
+    if (t) {
+      const b = (N) => N ? A(new Date(N), "yyyy-MM-dd") : "";
+      h({
+        status: (t == null ? void 0 : t.status) || "",
+        comment: (t == null ? void 0 : t.adminComment) || "",
+        startDate: b(t == null ? void 0 : t.startDate),
+        endDate: b(t == null ? void 0 : t.endDate)
+      }), c.setSelectedStartDate(b(t == null ? void 0 : t.startDate)), c.setSelectedEndDate(b(t == null ? void 0 : t.endDate));
+    }
+  }, [t]), U(() => {
+    if (n) {
+      u(n);
+      return;
+    }
+    a && a(c.currentMonth, c.currentYear).then((b) => {
+      b && u(
+        b.map((N) => ({
+          ...N,
+          startDate: new Date(N.startDate).toISOString(),
+          endDate: new Date(N.endDate).toISOString()
+        }))
+      );
+    }).catch((b) => {
+      console.error("Error fetching breaks:", b);
+    });
+  }, [c.currentMonth, c.currentYear, n, a]);
+  const T = (b) => {
+    const { name: N, value: _ } = b.target;
+    h((j) => ({
+      ...j,
+      [N]: _
+    }));
+  }, E = (b) => {
+    h((N) => ({
+      ...N,
+      status: b
+    })), o(!1);
+  }, v = (b) => {
+    if (c.setActiveDate(b), b === "start" && i.startDate) {
+      const N = new Date(i.startDate);
+      c.setCurrentMonth(N.getMonth()), c.setCurrentYear(N.getFullYear());
+    } else if (b === "end" && i.endDate) {
+      const N = new Date(i.endDate);
+      c.setCurrentMonth(N.getMonth()), c.setCurrentYear(N.getFullYear());
+    }
+    c.setShowCalendar(!0);
+  }, k = async (b) => {
+    if (b.preventDefault(), i.status === "PENDING") {
+      g({
+        title: "Action Required",
+        description: "Please update the status",
+        color: "neutral"
+      });
+      return;
+    }
+    y(!0);
+    try {
+      d && d({
+        requestId: t.id,
+        userId: t.userId,
+        status: i.status,
+        adminComment: i.comment,
+        startDate: new Date(i.startDate).toISOString(),
+        endDate: new Date(i.endDate).toISOString(),
+        isEditing: !0
+      }), g({
+        description: "Break request updated successfully",
+        color: "neutral"
+      });
+    } catch (N) {
+      console.error("Error updating break request:", N), g({
+        title: "Error",
+        description: "Failed to update break request",
+        color: "error"
+      });
+    } finally {
+      y(!1);
+    }
+  }, D = (b) => {
+    const N = {
+      APPROVED: {
+        text: "Approved",
+        className: "bg-success-surface text-text-success"
+      },
+      PENDING: {
+        text: "Pending",
+        className: "bg-warning-surface text-text-warning"
+      },
+      REJECTED: {
+        text: "Deny",
+        className: "bg-error-surface text-text-error"
+      },
+      CANCELLED: {
+        text: "Redacted",
+        className: "bg-error-surface text-text-error"
+      }
+    }, { text: _, className: j } = N[b] || N.REJECTED;
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        className: S("text-ds-sm w-fit rounded-ds-2xl px-ds-02b py-ds-02 capitalize", j),
+        children: _
+      }
+    );
+  }, P = (b) => b ? A(new Date(b), "EEEE, MMMM d") : "", Y = (b, N) => {
+    const _ = [], j = new Date(N, b, 1), L = ls(j), ee = lt(j), te = 6 - lt(L), z = /* @__PURE__ */ new Date();
+    for (let K = ee - 1; K >= 0; K--) {
+      const G = ds(j, K + 1);
+      _.push({
+        date: G.getDate(),
+        fullDate: A(G, "yyyy-MM-dd"),
+        isPadding: !0,
+        isToday: Q(G, z),
+        isWeekend: !1
+      });
+    }
+    const se = Ie(j);
+    for (let K = 1; K <= se; K++) {
+      const G = new Date(N, b, K);
+      _.push({
+        date: K,
+        fullDate: A(G, "yyyy-MM-dd"),
+        isPadding: !1,
+        isToday: Q(G, z),
+        isWeekend: !1
+      });
+    }
+    for (let K = 1; K <= te; K++) {
+      const G = gt(L, K);
+      _.push({
+        date: G.getDate(),
+        fullDate: A(G, "yyyy-MM-dd"),
+        isPadding: !0,
+        isToday: Q(G, z),
+        isWeekend: !1
+      });
+    }
+    return _;
+  }, C = (b) => {
+    if (ft(b.fullDate, x, t.id)) {
+      g({
+        title: "Error",
+        description: "This date is already part of another break request.",
+        color: "error"
+      });
+      return;
+    }
+    if (!b.isPadding) {
+      if (c.activeDate === "start") {
+        const N = b.fullDate, _ = c.selectedEndDate || N;
+        if (xt(N, _, x, t.id)) {
+          g({
+            title: "Error",
+            description: "The selected date range overlaps with an existing break request.",
+            color: "error"
+          });
+          return;
+        }
+        c.setSelectedStartDate(N), h((j) => ({
+          ...j,
+          startDate: N
+        })), c.selectedEndDate && Ps(N, c.selectedEndDate) && (c.setSelectedEndDate(N), h((j) => ({
+          ...j,
+          endDate: N
+        })));
+      } else if (c.activeDate === "end") {
+        const N = b.fullDate, _ = c.selectedStartDate || N;
+        if (xt(_, N, x, t.id)) {
+          g({
+            title: "Error",
+            description: "The selected date range overlaps with an existing break request.",
+            color: "error"
+          });
+          return;
+        }
+        c.selectedStartDate && Wt(N, c.selectedStartDate) ? (c.setSelectedEndDate(N), h((j) => ({
+          ...j,
+          endDate: N
+        }))) : c.selectedStartDate || (c.setSelectedStartDate(N), c.setSelectedEndDate(N), h((j) => ({
+          ...j,
+          startDate: N,
+          endDate: N
+        })));
+      }
+      c.setShowCalendar(!1);
+    }
+  }, B = (b) => !c.selectedStartDate || !c.selectedEndDate ? !!(c.showCalendar && (c.activeDate === "start" && i.startDate === b || c.activeDate === "end" && i.endDate === b)) : Ae(b, c.selectedStartDate, c.selectedEndDate), I = Y(c.currentMonth, c.currentYear);
+  return /* @__PURE__ */ s(ce, { children: [
+    /* @__PURE__ */ e(we, { asChild: !0, children: /* @__PURE__ */ s(
+      J,
+      {
+        variant: "outline",
+        className: "text-ds-base border-border bg-layer-01 px-ds-05 py-ds-04 pr-ds-06 text-text-secondary shadow-02",
+        children: [
+          /* @__PURE__ */ e(Je, {}),
+          /* @__PURE__ */ e("span", { children: "Edit" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(me, { className: "w-[440px] p-ds-06 max-md:w-[90%] max-md:rounded-ds-lg", children: /* @__PURE__ */ e(Ne, { children: /* @__PURE__ */ e(Ze, { children: /* @__PURE__ */ s("div", { className: "flex w-full flex-col items-center gap-ds-05", children: [
+      /* @__PURE__ */ s("p", { className: "text-ds-md w-full text-left text-text-tertiary", children: [
+        "Edit break details of",
+        " ",
+        /* @__PURE__ */ e("span", { className: "font-semibold text-interactive", children: (F = t == null ? void 0 : t.user) == null ? void 0 : F.name })
+      ] }),
+      /* @__PURE__ */ s(
+        "form",
+        {
+          ref: w,
+          onSubmit: k,
+          id: "updateleaveform",
+          className: "flex w-full flex-col gap-ds-05",
+          children: [
+            /* @__PURE__ */ s("div", { className: "flex w-full flex-col gap-ds-02 rounded-ds-lg border border-border-subtle px-ds-05 pb-ds-03 pt-ds-04", children: [
+              /* @__PURE__ */ e("h2", { className: "text-ds-xs font-semibold uppercase tracking-wider  text-text-placeholder", children: "Reason" }),
+              /* @__PURE__ */ e("p", { className: "text-ds-md text-text-primary", children: Re(t == null ? void 0 : t.reason) })
+            ] }),
+            /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-center gap-ds-02", children: [
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => v("start"),
+                  className: S(
+                    "text-ds-md flex w-full items-center justify-center gap-ds-03 rounded-ds-full border bg-layer-02 px-ds-03 py-ds-03 text-text-secondary max-md:text-ds-sm",
+                    c.showCalendar && c.activeDate === "start" ? "border-border-strong" : "border-border"
+                  ),
+                  children: P(i.startDate)
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: "flex h-ico-sm w-ico-sm items-center", children: /* @__PURE__ */ e(ms, { className: "h-ico-sm w-ico-sm text-icon-secondary" }) }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => v("end"),
+                  className: S(
+                    "text-ds-md flex w-full items-center justify-center gap-ds-03 rounded-ds-full border bg-layer-02 px-ds-03 py-ds-03 text-text-secondary max-md:text-ds-sm",
+                    c.showCalendar && c.activeDate === "end" ? "border-border-strong" : "border-border"
+                  ),
+                  children: P(i.endDate)
+                }
+              )
+            ] }),
+            c.showCalendar && /* @__PURE__ */ s("div", { className: "", children: [
+              /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    className: "rounded-ds-full p-ds-03 hover:bg-field-hover",
+                    onClick: () => c.navigateMonth("prev"),
+                    children: /* @__PURE__ */ e(ye, { className: "h-ico-md w-ico-md" })
+                  }
+                ),
+                /* @__PURE__ */ s("div", { className: "text-ds-md font-semibold uppercase", children: [
+                  new Date(c.currentYear, c.currentMonth).toLocaleString(
+                    "default",
+                    {
+                      month: "long"
+                    }
+                  ),
+                  " ",
+                  c.currentYear
+                ] }),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    className: "rounded-ds-full p-ds-03 hover:bg-field-hover",
+                    onClick: () => c.navigateMonth("next"),
+                    children: /* @__PURE__ */ e(ge, { className: "h-ico-md w-ico-md" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s("div", { className: "calendar grid w-full grid-cols-7 items-center gap-0 overflow-hidden", children: [
+                ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"].map(
+                  (b) => /* @__PURE__ */ e("div", { className: "pb-ds-03 pt-ds-05 text-center", children: /* @__PURE__ */ e("span", { className: "text-ds-sm font-semibold uppercase tracking-wider  text-text-tertiary", children: b }) }, b)
+                ),
+                I.map((b, N) => /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    tabIndex: b.isPadding ? -1 : 0,
+                    "aria-label": b.isPadding ? void 0 : A(new Date(b.fullDate), "MMMM d, yyyy"),
+                    className: S(
+                      "flex cursor-pointer flex-col items-center pb-0 pt-0 text-center",
+                      B(b.fullDate) && b.fullDate !== c.selectedStartDate && b.fullDate !== c.selectedEndDate && "bg-layer-accent-subtle",
+                      b.isPadding && "opacity-[0.5]",
+                      b.fullDate === c.selectedStartDate && B(b.fullDate) && "start-date mini",
+                      b.fullDate === c.selectedEndDate && B(b.fullDate) && "end-date mini",
+                      B(b.fullDate) && b.fullDate !== c.selectedStartDate && b.fullDate !== c.selectedEndDate && "in-range-date",
+                      c.selectedStartDate === c.selectedEndDate && "same-date"
+                    ),
+                    onClick: () => C(b),
+                    children: /* @__PURE__ */ e(
+                      "div",
+                      {
+                        className: S(
+                          "mx-ds-02 my-ds-02",
+                          b.isPadding && "opacity-[0.5]"
+                        ),
+                        children: /* @__PURE__ */ e(
+                          "span",
+                          {
+                            className: S(
+                              "text-ds-base flex h-ds-md w-ds-md items-center justify-center rounded-ds-full",
+                              (b.fullDate === c.selectedStartDate || b.fullDate === c.selectedEndDate || ft(b.fullDate, x, t.id)) && "bg-accent ring-2 ring-inset ring-accent",
+                              b.isToday ? "bg-interactive-hover p-ds-03 text-text-on-color" : "text-text-secondary"
+                            ),
+                            children: b.date
+                          }
+                        )
+                      }
+                    )
+                  },
+                  N
+                ))
+              ] })
+            ] }),
+            /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-between rounded-ds-lg border border-border px-ds-05 py-ds-04", children: [
+              /* @__PURE__ */ e("p", { className: "text-ds-xs font-semibold uppercase tracking-wider  text-text-placeholder", children: "No of Days" }),
+              /* @__PURE__ */ e("p", { className: "text-ds-xl font-semibold text-text-primary", children: t.numberOfDays })
+            ] }),
+            /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-between rounded-ds-lg border border-border px-ds-05 py-ds-04", children: [
+              /* @__PURE__ */ e("p", { className: "text-ds-xs font-semibold uppercase tracking-wider  text-text-placeholder", children: "Status" }),
+              /* @__PURE__ */ s("div", { className: "relative flex items-center gap-ds-02", children: [
+                /* @__PURE__ */ s(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex cursor-pointer items-center gap-ds-02",
+                    "aria-label": "Change status",
+                    "aria-haspopup": "listbox",
+                    "aria-expanded": r,
+                    onClick: () => o(!r),
+                    children: [
+                      D(i.status),
+                      /* @__PURE__ */ e(ie, {})
+                    ]
+                  }
+                ),
+                r && /* @__PURE__ */ s("div", { className: "text-ds-base absolute left-[10px] top-[25px] z-raised flex flex-col overflow-hidden rounded-ds-md border border-border bg-layer-01 shadow-02", role: "listbox", children: [
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: "cursor-pointer border-b border-b-border bg-layer-01 px-ds-04 py-ds-03 text-left",
+                      role: "option",
+                      tabIndex: 0,
+                      "aria-selected": i.status === "APPROVED",
+                      onClick: () => E("APPROVED"),
+                      onKeyDown: (b) => {
+                        (b.key === "Enter" || b.key === " ") && (b.preventDefault(), E("APPROVED"));
+                      },
+                      children: D("APPROVED")
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: "cursor-pointer bg-layer-01 px-ds-04 py-ds-03 text-left",
+                      role: "option",
+                      tabIndex: 0,
+                      "aria-selected": i.status === "REJECTED",
+                      onClick: () => E("REJECTED"),
+                      onKeyDown: (b) => {
+                        (b.key === "Enter" || b.key === " ") && (b.preventDefault(), E("REJECTED"));
+                      },
+                      children: D("REJECTED")
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ s("div", { className: "flex w-full flex-col gap-ds-02 rounded-ds-lg border border-border-subtle px-ds-05 pb-ds-03 pt-ds-04", children: [
+              /* @__PURE__ */ e("h2", { className: "text-ds-xs font-semibold uppercase tracking-wider  text-text-placeholder", children: "Comment" }),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  type: "text",
+                  name: "comment",
+                  className: "text-ds-md text-text-primary outline-none",
+                  placeholder: "Enjoy your break, TC",
+                  value: i.comment,
+                  onChange: T
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s("div", { className: "flex w-full justify-between", children: [
+              /* @__PURE__ */ e("div", { className: "flex h-ds-md w-ds-md items-center justify-center", children: /* @__PURE__ */ e(
+                Kt,
+                {
+                  id: t.id,
+                  userId: t.userId,
+                  onDelete: m
+                }
+              ) }),
+              /* @__PURE__ */ e(
+                J,
+                {
+                  className: "w-fit",
+                  variant: "outline",
+                  disabled: f,
+                  onClick: () => {
+                    var b;
+                    return (b = w.current) == null ? void 0 : b.requestSubmit();
+                  },
+                  children: "Update"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }) }) }) })
+  ] });
+});
+Vt.displayName = "EditBreak";
+const Jt = O.forwardRef(
+  function({
+    breaks: t,
+    userImages: n,
+    existingBreaks: a,
+    onFetchMonthBreaks: d,
+    onSave: m,
+    onDelete: p,
+    onRefresh: r
+  }, o) {
+    return /* @__PURE__ */ s("div", { ref: o, className: "m-0 flex h-[400px] w-full flex-col items-start justify-start p-0 max-md:h-auto", children: [
+      /* @__PURE__ */ s("div", { className: "mx-auto mb-ds-05 mt-ds-04 flex w-[92%] items-center", children: [
+        /* @__PURE__ */ e("div", { className: "w-[16%] min-w-[120px] overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider text-text-tertiary", children: "NAME" }) }),
+        /* @__PURE__ */ e("div", { className: "w-[19%] overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider text-text-tertiary", children: "DATE" }) }),
+        /* @__PURE__ */ e("div", { className: "w-[8%] overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider w-full text-center text-text-tertiary", children: "DAYS" }) }),
+        /* @__PURE__ */ e("div", { className: "w-[22%] overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider text-text-tertiary", children: "REASON" }) }),
+        /* @__PURE__ */ e("div", { className: "flex w-[14%] items-center justify-start overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider text-text-tertiary", children: "STATUS" }) }),
+        /* @__PURE__ */ e("div", { className: "w-[24%] overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider text-text-tertiary", children: "COMMENT" }) }),
+        /* @__PURE__ */ e("div", { className: "w-ds-lg overflow-hidden px-ds-04 py-ds-03" })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "no-scrollbar mx-auto flex w-[92%] flex-col gap-ds-05 overflow-y-auto max-md:h-[calc(100dvh-373px)]", children: t.map((x) => {
+        var i, h, c, w, g, T;
+        const u = new Date(x.startDate), f = new Date(x.endDate), y = Z(u, f);
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            className: "flex w-full items-center hover:bg-field",
+            children: [
+              /* @__PURE__ */ s("div", { className: "flex w-[16%] min-w-[120px] items-center gap-ds-03 overflow-hidden px-ds-04 py-ds-03", children: [
+                n[x.userId] ? /* @__PURE__ */ e(
+                  "img",
+                  {
+                    src: n[x.userId],
+                    alt: "",
+                    className: "h-ds-xs-plus w-full max-w-7 flex-shrink-0 rounded-ds-full object-cover"
+                  }
+                ) : /* @__PURE__ */ e("span", { className: "flex h-ds-xs-plus w-full max-w-7 items-center justify-center rounded-ds-full bg-layer-02 text-ds-sm font-medium uppercase text-text-primary", children: ((h = (i = x.user) == null ? void 0 : i.name) == null ? void 0 : h[0]) || "U" }),
+                /* @__PURE__ */ s(vs, { children: [
+                  /* @__PURE__ */ e(Ds, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "text-ds-md truncate text-text-primary", children: ((c = x.user) == null ? void 0 : c.name) || ((g = (w = x.user) == null ? void 0 : w.name) == null ? void 0 : g.split(" ")[0]) }) }),
+                  /* @__PURE__ */ e(Es, { children: (T = x.user) == null ? void 0 : T.name })
+                ] })
+              ] }),
+              /* @__PURE__ */ e("div", { className: "w-[19%] overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ s("span", { className: "text-ds-md whitespace-nowrap text-text-secondary", children: [
+                ot(u),
+                " ",
+                !y && /* @__PURE__ */ s(V, { children: [
+                  /* @__PURE__ */ e("span", { children: "-" }),
+                  " ",
+                  ot(f)
+                ] })
+              ] }) }),
+              /* @__PURE__ */ e("div", { className: "flex w-[8%] items-center justify-center overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ e("span", { className: "text-ds-md text-center text-text-secondary", children: x.numberOfDays }) }),
+              /* @__PURE__ */ e("div", { className: "w-[22%] overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ e("span", { className: "text-ds-md text-text-tertiary", children: x.reason }) }),
+              /* @__PURE__ */ e("div", { className: "flex w-[14%] items-center justify-start overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ e("span", { className: "text-ds-md text-text-tertiary", children: Rt(x == null ? void 0 : x.status, x == null ? void 0 : x.correction) }) }),
+              /* @__PURE__ */ e("div", { className: "w-[24%] overflow-hidden px-ds-04 py-ds-03", children: /* @__PURE__ */ e("span", { className: "text-ds-md text-text-tertiary", children: x.adminComment || " " }) }),
+              /* @__PURE__ */ e("div", { className: "flex w-ds-lg justify-center px-ds-04 py-ds-03", children: /* @__PURE__ */ s(ys, { children: [
+                /* @__PURE__ */ e(gs, { children: /* @__PURE__ */ e(X, { icon: /* @__PURE__ */ e(us, {}), size: "md", "aria-label": "More options" }) }),
+                /* @__PURE__ */ e(ws, { className: "w-auto p-0", children: /* @__PURE__ */ e(
+                  Vt,
+                  {
+                    selectedLeave: x,
+                    existingBreaks: a,
+                    onFetchMonthBreaks: d,
+                    onSave: m,
+                    onDelete: p
+                  }
+                ) })
+              ] }) })
+            ]
+          },
+          x.id
+        );
+      }) })
+    ] });
+  }
+);
+Jt.displayName = "Breaks";
+const pt = [
+  { id: 1, name: "January" },
+  { id: 2, name: "February" },
+  { id: 3, name: "March" },
+  { id: 4, name: "April" },
+  { id: 5, name: "May" },
+  { id: 6, name: "June" },
+  { id: 7, name: "July" },
+  { id: 8, name: "August" },
+  { id: 9, name: "September" },
+  { id: 10, name: "October" },
+  { id: 11, name: "November" },
+  { id: 12, name: "December" }
+], Gt = O.forwardRef(
+  function({
+    filters: t,
+    onFilterChange: n,
+    breakBalance: a,
+    userImages: d,
+    users: m
+  }, p) {
+    const r = (f) => {
+      n(f(t));
+    }, o = () => {
+      r((f) => ({
+        ...f,
+        currMonth: f.currMonth === 0 ? 11 : f.currMonth - 1
+      }));
+    }, x = () => {
+      r((f) => ({
+        ...f,
+        currMonth: f.currMonth === 11 ? 0 : f.currMonth + 1
+      }));
+    }, u = () => {
+      r((f) => ({
+        ...f,
+        dateFilterStart: new Date(f.currYear, f.currMonth, 1),
+        dateFilterEnd: new Date(f.currYear, f.currMonth + 1, 0),
+        isOpen: !1
+      }));
+    };
+    return /* @__PURE__ */ s("div", { ref: p, className: "flex min-w-[800px] items-center justify-between bg-field px-ds-06 py-ds-05b max-md:justify-start max-md:gap-ds-05b max-lg:min-w-[100%]", children: [
+      /* @__PURE__ */ e("div", { className: "flex flex-col gap-ds-05", children: t.selectedAssociate && /* @__PURE__ */ s(V, { children: [
+        /* @__PURE__ */ e("p", { className: "text-ds-sm font-semibold uppercase tracking-wider text-text-tertiary", children: "Break Balance" }),
+        /* @__PURE__ */ s("div", { className: "flex items-end", children: [
+          /* @__PURE__ */ e("p", { className: "text-ds-5xl font-semibold mr-ds-02 text-interactive", children: (a == null ? void 0 : a.remainingDays) || 0 }),
+          /* @__PURE__ */ s("p", { className: "text-ds-2xl translate-y-[-5px] text-text-placeholder", children: [
+            "/ ",
+            (a == null ? void 0 : a.breakBalance) || 0
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ s("header", { className: "flex items-center gap-ds-04", children: [
+        t.selectedAssociate ? /* @__PURE__ */ s("div", { className: "text-ds-md flex flex-row items-center justify-start gap-ds-02 rounded-ds-md bg-interactive p-ds-02b text-text-on-color", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center justify-start gap-ds-01", children: [
+            d[t.selectedAssociate.id] ? /* @__PURE__ */ e(
+              "img",
+              {
+                src: d[t.selectedAssociate.id],
+                alt: `${t.selectedAssociate.name}'s avatar`,
+                className: "h-ico-md w-ico-md rounded-ds-full"
+              }
+            ) : /* @__PURE__ */ e("div", { className: "flex h-ico-md w-ico-md items-center justify-center rounded-ds-full bg-layer-02", children: /* @__PURE__ */ e("span", { className: "text-interactive", children: t.selectedAssociate.name.charAt(0) }) }),
+            /* @__PURE__ */ e("span", { className: "text-ds-md mx-ds-01 text-text-on-color", children: t.selectedAssociate.name })
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              "aria-label": "Clear filter",
+              onClick: () => r((f) => ({
+                ...f,
+                selectedAssociate: null
+              })),
+              className: "border-0 p-0",
+              children: /* @__PURE__ */ e(oe, { className: "h-ico-sm w-ico-sm text-text-on-color" })
+            }
+          )
+        ] }) : /* @__PURE__ */ s(he, { children: [
+          /* @__PURE__ */ s(be, { className: "text-ds-md flex flex-row items-center justify-between rounded-ds-md border border-border-subtle bg-layer-01 px-ds-03 py-ds-02b", children: [
+            /* @__PURE__ */ s("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ e(vt, { className: "h-ico-sm w-ico-sm" }),
+              /* @__PURE__ */ e("span", { className: "text-ds-md mx-ds-03 text-text-secondary max-lg:mx-0 max-lg:text-ds-sm", children: "Associate" })
+            ] }),
+            /* @__PURE__ */ e(ie, { className: "h-ico-sm w-ico-sm" })
+          ] }),
+          /* @__PURE__ */ e(ke, { className: "custom-scrollbar max-h-[400px] w-64 overflow-y-auto p-ds-03", children: (m == null ? void 0 : m.length) === 0 ? /* @__PURE__ */ e(pe, { disabled: !0, children: "No users available" }) : m == null ? void 0 : m.map((f) => /* @__PURE__ */ e(ht, { children: /* @__PURE__ */ s(
+            pe,
+            {
+              onSelect: () => r((y) => ({
+                ...y,
+                selectedAssociate: f
+              })),
+              className: "flex items-center gap-ds-03 p-ds-03",
+              children: [
+                d[f.id] ? /* @__PURE__ */ e(
+                  "img",
+                  {
+                    src: d[f.id],
+                    alt: `${f.name}'s avatar`,
+                    className: "h-ds-xs w-ds-xs rounded-ds-full"
+                  }
+                ) : /* @__PURE__ */ e("div", { className: "flex h-ds-xs w-ds-xs items-center justify-center rounded-ds-full bg-layer-03", children: /* @__PURE__ */ e("span", { className: "text-ds-md text-interactive", children: f.name.charAt(0) }) }),
+                /* @__PURE__ */ e("span", { className: "text-ds-md text-text-secondary", children: f.name })
+              ]
+            },
+            f.id
+          ) }, f.id)) })
+        ] }),
+        t.dateFilterEnd && /* @__PURE__ */ s("div", { className: "text-ds-md flex items-center justify-between rounded-ds-md bg-interactive px-ds-03 py-ds-02b text-text-on-color", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ e(xs, {}),
+            /* @__PURE__ */ s("span", { className: "ml-ds-01 mr-ds-02", children: [
+              pt[new Date(t.dateFilterStart).getMonth()].name,
+              ","
+            ] }),
+            /* @__PURE__ */ e("span", { className: "mr-ds-02", children: new Date(t.dateFilterStart).getFullYear() })
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              "aria-label": "Clear filter",
+              onClick: () => {
+                r((f) => ({
+                  ...f,
+                  dateFilterStart: null,
+                  dateFilterEnd: null
+                }));
+              },
+              className: "border-0 bg-transparent p-0",
+              children: /* @__PURE__ */ e(oe, { className: "h-ico-sm w-ico-sm" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s(
+          he,
+          {
+            open: t.isOpen,
+            onOpenChange: (f) => {
+              r((y) => ({ ...y, isOpen: f }));
+            },
+            children: [
+              /* @__PURE__ */ s(be, { className: "text-ds-md flex items-center justify-between rounded-ds-md border border-border-subtle bg-layer-01 p-ds-02b", children: [
+                /* @__PURE__ */ s("div", { className: "flex items-center", children: [
+                  /* @__PURE__ */ e(fs, {}),
+                  /* @__PURE__ */ e("span", { className: "mx-ds-03 text-text-secondary", children: "Date" })
+                ] }),
+                /* @__PURE__ */ e(ie, { className: "h-ico-sm w-ico-sm" })
+              ] }),
+              /* @__PURE__ */ e(ke, { className: "mr-32 p-ds-04", children: /* @__PURE__ */ s("div", { className: "flex w-[140px] flex-col items-center justify-start", children: [
+                /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-between", children: [
+                  /* @__PURE__ */ e(
+                    X,
+                    {
+                      size: "sm",
+                      icon: /* @__PURE__ */ e(ye, {}),
+                      "aria-label": "Previous month",
+                      onClick: o
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "text-ds-md text-text-secondary", children: pt[t.currMonth].name }),
+                  /* @__PURE__ */ e(
+                    X,
+                    {
+                      size: "sm",
+                      icon: /* @__PURE__ */ e(ge, {}),
+                      "aria-label": "Next month",
+                      onClick: x
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ s("div", { className: "mt-ds-04 flex w-full items-center justify-between", children: [
+                  /* @__PURE__ */ e(
+                    X,
+                    {
+                      size: "sm",
+                      icon: /* @__PURE__ */ e(ye, {}),
+                      "aria-label": "Previous year",
+                      onClick: () => {
+                        r((f) => ({
+                          ...f,
+                          currYear: f.currYear - 1
+                        }));
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "text-ds-md text-text-secondary", children: t.currYear }),
+                  /* @__PURE__ */ e(
+                    X,
+                    {
+                      size: "sm",
+                      icon: /* @__PURE__ */ e(ge, {}),
+                      "aria-label": "Next year",
+                      onClick: () => {
+                        r((f) => ({
+                          ...f,
+                          currYear: f.currYear + 1
+                        }));
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e(
+                  J,
+                  {
+                    className: "mt-ds-05",
+                    variant: "outline",
+                    fullWidth: !0,
+                    onClick: u,
+                    children: "Filter"
+                  }
+                )
+              ] }) })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+Gt.displayName = "BreakAdminHeader";
+const Zt = O.forwardRef(
+  function(t, n) {
+    return /* @__PURE__ */ s("div", { ref: n, className: "z-base h-fit w-full max-w-layout-body overflow-hidden border-[1px] border-border-subtle bg-field sm:rounded-ds-lg", children: [
+      /* @__PURE__ */ e("div", { className: "flex items-center justify-end bg-field px-ds-06 py-ds-05b", children: /* @__PURE__ */ e("header", { className: "flex items-center", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04", children: [
+        /* @__PURE__ */ e(R, { className: "h-ds-sm-plus w-32 rounded-ds-md" }),
+        /* @__PURE__ */ e(R, { className: "h-ds-sm-plus w-32 rounded-ds-md" })
+      ] }) }) }),
+      /* @__PURE__ */ s("div", { className: "flex h-fit flex-col border-t-[1px] border-border-subtle bg-layer-02 shadow-transparent", children: [
+        /* @__PURE__ */ s("div", { className: "flex w-full gap-ds-03 border-b-[1px] border-border px-ds-06 pt-ds-03", children: [
+          /* @__PURE__ */ e(R, { className: "h-ds-md w-20" }),
+          /* @__PURE__ */ e(R, { className: "h-ds-md w-24" }),
+          /* @__PURE__ */ e(R, { className: "h-ds-md w-24" })
+        ] }),
+        /* @__PURE__ */ s("div", { className: "h-[400px] border-0 px-ds-06 py-ds-05", children: [
+          /* @__PURE__ */ s("div", { className: "mb-ds-05 ml-ds-06 grid grid-cols-6 items-center gap-ds-05 py-ds-03", children: [
+            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-field" }),
+            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-field" }),
+            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-field" }),
+            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-field" }),
+            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-field" }),
+            /* @__PURE__ */ e(R, { className: "h-5 w-full bg-field" })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "flex flex-col gap-ds-05", children: Array.from({ length: 5 }).map((a, d) => /* @__PURE__ */ s(
+            "div",
+            {
+              className: "ml-ds-06 grid grid-cols-6 items-center gap-ds-05 rounded-ds-lg py-ds-03",
+              children: [
+                /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
+                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-field" }),
+                  /* @__PURE__ */ e(R, { className: "h-5 w-24 bg-field" })
+                ] }),
+                /* @__PURE__ */ e(R, { className: "h-5 w-full bg-field" }),
+                /* @__PURE__ */ e(R, { className: "h-5 w-16 bg-field" }),
+                /* @__PURE__ */ e(R, { className: "h-5 w-full bg-field" }),
+                /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
+                  /* @__PURE__ */ e(R, { className: "h-ds-xs w-ds-xs rounded-ds-full bg-field" }),
+                  /* @__PURE__ */ e(R, { className: "h-5 w-16 bg-field" })
+                ] }),
+                /* @__PURE__ */ s("div", { className: "flex items-center justify-end gap-ds-03", children: [
+                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-field" }),
+                  /* @__PURE__ */ e(R, { className: "h-ds-sm w-ds-sm rounded-ds-full bg-field" })
+                ] })
+              ]
+            },
+            d
+          )) })
+        ] })
+      ] })
+    ] });
+  }
+);
+Zt.displayName = "BreakAdminSkeleton";
+const Xt = bt(null);
+function Te() {
+  const l = yt(Xt);
+  if (!l)
+    throw new Error(
+      "BreakAdmin compound components must be used within <BreakAdmin>"
+    );
+  return l;
+}
+const We = O.forwardRef(
+  function({
+    currentUser: t,
+    breaks: n,
+    pendingRequests: a,
+    cashoutRequests: d = [],
+    breakBalanceData: m,
+    breakBalance: p,
+    userImages: r,
+    users: o,
+    isLoading: x = !1,
+    isLoadingBreaks: u = !1,
+    isLoadingRequests: f = !1,
+    isLoadingBalance: y = !1,
+    existingBreaks: i,
+    filters: h,
+    onFilterChange: c,
+    onApproveRequest: w,
+    onRejectRequest: g,
+    onApproveCashout: T,
+    onRejectCashout: E,
+    onRefresh: v,
+    onSaveBreak: k,
+    onDeleteBreak: D,
+    onSaveBalance: P,
+    onFetchMonthBreaks: Y,
+    realtimeCallbacks: C,
+    children: B
+  }, I) {
+    const [F, b] = M("breaks"), [N, _] = M(!1), [j, L] = M(
+      null
+    ), [ee, te] = M(null), { toast: z } = je(), se = Ye(
+      () => ({
+        selectedAssociate: null,
+        dateFilterStart: null,
+        dateFilterEnd: null,
+        currMonth: (/* @__PURE__ */ new Date()).getMonth(),
+        currYear: (/* @__PURE__ */ new Date()).getFullYear(),
+        isOpen: !1
+      }),
+      []
+    ), K = h || se, G = $(
+      (W) => {
+        c && c(W);
+      },
+      [c]
+    ), at = $(
+      async (W, ne, De) => {
+        if (!N) {
+          if (!De && ((W == null ? void 0 : W.metaKey) || (W == null ? void 0 : W.ctrlKey))) {
+            L(ne);
+            return;
+          }
+          try {
+            _(!0);
+            const H = a.find((Fe) => Fe.id === ne);
+            if (!H)
+              throw new Error("Request not found");
+            w && w(ne, De, H.correction, H), z({
+              description: /* @__PURE__ */ s(V, { children: [
+                /* @__PURE__ */ s("span", { children: [
+                  H.correction ? "Attendance correction" : "Break request",
+                  " "
+                ] }),
+                /* @__PURE__ */ e("span", { className: "text-success-text", children: "approved successfully" })
+              ] }),
+              color: "neutral",
+              style: { marginBottom: "var(--spacing-04)", border: "none" }
+            });
+          } catch (H) {
+            console.error("Error approving request:", H), z({
+              title: "Error",
+              description: H instanceof Error ? H.message : "Failed to approve request",
+              color: "error"
+            });
+          } finally {
+            _(!1);
+          }
+        }
+      },
+      [N, a, w, z]
+    ), rt = $(
+      async (W, ne, De) => {
+        if (!N) {
+          if (!De && ((W == null ? void 0 : W.metaKey) || (W == null ? void 0 : W.ctrlKey))) {
+            te(ne);
+            return;
+          }
+          try {
+            _(!0);
+            const H = a.find((Fe) => Fe.id === ne);
+            if (!H)
+              throw new Error("Request not found");
+            g && g(ne, De, H.correction, H), z({
+              description: /* @__PURE__ */ s(V, { children: [
+                /* @__PURE__ */ s("span", { children: [
+                  H.correction ? "Attendance correction" : "Break request",
+                  " "
+                ] }),
+                /* @__PURE__ */ e("span", { className: "text-error-text", children: "rejected" })
+              ] }),
+              color: "neutral",
+              style: { marginBottom: "var(--spacing-04)", border: "none" }
+            });
+          } catch (H) {
+            console.error("Error rejecting request:", H), z({
+              title: "Error",
+              description: H instanceof Error ? H.message : "Failed to reject request",
+              color: "error"
+            });
+          } finally {
+            _(!1);
+          }
+        }
+      },
+      [N, a, g, z]
+    ), Qt = Ye(
+      () => ({
+        currentUser: t,
+        activeTab: F,
+        setActiveTab: b,
+        isProcessing: N,
+        breaks: n,
+        pendingRequests: a,
+        cashoutRequests: d,
+        breakBalanceData: m,
+        breakBalance: p,
+        userImages: r,
+        users: o,
+        existingBreaks: i,
+        filters: K,
+        handleFilterChange: G,
+        handleApproveRequest: at,
+        handleRejectRequest: rt,
+        acceptedCommentBox: j,
+        rejectedCommentBox: ee,
+        setAcceptedCommentBox: L,
+        setRejectedCommentBox: te,
+        onRefresh: v,
+        onSaveBreak: k,
+        onDeleteBreak: D,
+        onSaveBalance: P,
+        onFetchMonthBreaks: Y
+      }),
+      [
+        t,
+        F,
+        b,
+        N,
+        n,
+        a,
+        d,
+        m,
+        p,
+        r,
+        o,
+        i,
+        K,
+        G,
+        at,
+        rt,
+        j,
+        ee,
+        L,
+        te,
+        v,
+        k,
+        D,
+        P,
+        Y
+      ]
+    );
+    return x ? /* @__PURE__ */ e(Zt, {}) : /* @__PURE__ */ e(Xt.Provider, { value: Qt, children: /* @__PURE__ */ e(
+      "div",
+      {
+        ref: I,
+        className: "z-base flex w-full max-w-layout flex-col items-center justify-center md:pt-0",
+        children: /* @__PURE__ */ e("div", { className: "no-scrollbar w-full overflow-auto border border-border-subtle sm:rounded-ds-lg max-md:rounded-ds-none max-md:border-0", children: B ?? /* @__PURE__ */ s(V, { children: [
+          /* @__PURE__ */ e(qe, {}),
+          /* @__PURE__ */ s("div", { className: "no-scrollbar flex h-fit min-w-[800px] flex-col border-t-[1px] border-border-subtle bg-layer-02 shadow-transparent max-lg:min-w-[100%] max-lg:overflow-x-auto", children: [
+            /* @__PURE__ */ e(Ue, {}),
+            /* @__PURE__ */ s("div", { className: "w-full border-0 max-lg:min-w-[800px]", children: [
+              /* @__PURE__ */ e(et, {}),
+              /* @__PURE__ */ e(tt, {}),
+              /* @__PURE__ */ e(st, {})
+            ] })
+          ] })
+        ] }) })
+      }
+    ) });
+  }
+);
+We.displayName = "BreakAdmin";
+const qe = O.forwardRef(function({ className: t, ...n }, a) {
+  const {
+    filters: d,
+    handleFilterChange: m,
+    breakBalance: p,
+    userImages: r,
+    users: o
+  } = Te();
+  return /* @__PURE__ */ e("div", { ref: a, className: S(t), ...n, children: /* @__PURE__ */ e(
+    Gt,
+    {
+      filters: d,
+      onFilterChange: m,
+      breakBalance: p,
+      userImages: r,
+      users: o
+    }
+  ) });
+});
+qe.displayName = "BreakAdmin.Header";
+const Ue = O.forwardRef(function({ className: t, ...n }, a) {
+  const { activeTab: d, setActiveTab: m, pendingRequests: p, breakBalanceData: r } = Te();
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: a,
+      className: S(
+        "flex w-full gap-ds-03 border-b-[1px] border-border px-ds-06 pt-ds-03 max-lg:min-w-[800px]",
+        t
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: S("text-ds-sm font-semibold uppercase tracking-wider mb-[-1px] px-ds-03 py-ds-04", d === "breaks" ? "text-text-primary border-b-[1px] border-interactive-hover" : "text-text-tertiary"),
+            onClick: () => m("breaks"),
+            children: "BREAKS"
+          }
+        ),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            className: S("text-ds-sm font-semibold uppercase tracking-wider mb-[-1px] flex items-center gap-ds-02 px-ds-03 py-ds-04", d === "requests" ? "border-b-[1px] border-interactive-hover text-text-primary" : "text-text-tertiary"),
+            onClick: () => m("requests"),
+            children: [
+              "REQUESTS",
+              " ",
+              /* @__PURE__ */ e("span", { className: "text-interactive-hover", children: `(${p.length})` })
+            ]
+          }
+        ),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            className: S("text-ds-sm font-semibold uppercase tracking-wider mb-[-1px] flex items-center gap-ds-02 px-ds-03 py-ds-04", d === "balance" ? "border-b-[1px] border-interactive-hover text-text-primary" : "text-text-tertiary"),
+            onClick: () => m("balance"),
+            children: [
+              "BALANCE",
+              " ",
+              /* @__PURE__ */ e("span", { className: "text-interactive-hover", children: `(${r.length})` })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+Ue.displayName = "BreakAdmin.TabBar";
+const et = O.forwardRef(function({ className: t, ...n }, a) {
+  const {
+    activeTab: d,
+    breaks: m,
+    userImages: p,
+    existingBreaks: r,
+    onFetchMonthBreaks: o,
+    onSaveBreak: x,
+    onDeleteBreak: u,
+    onRefresh: f
+  } = Te();
+  return d !== "breaks" ? null : /* @__PURE__ */ e("div", { ref: a, className: S(t), ...n, children: /* @__PURE__ */ e(
+    Jt,
+    {
+      breaks: m,
+      userImages: p,
+      existingBreaks: r,
+      onFetchMonthBreaks: o,
+      onSave: x,
+      onDelete: u,
+      onRefresh: f
+    }
+  ) });
+});
+et.displayName = "BreakAdmin.BreaksPanel";
+const tt = O.forwardRef(function({ className: t, ...n }, a) {
+  const {
+    activeTab: d,
+    currentUser: m,
+    pendingRequests: p,
+    userImages: r,
+    handleApproveRequest: o,
+    handleRejectRequest: x,
+    acceptedCommentBox: u,
+    rejectedCommentBox: f,
+    setAcceptedCommentBox: y,
+    setRejectedCommentBox: i
+  } = Te();
+  return d !== "requests" ? null : /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      className: S(
+        /* intentional: h-[400px] is the fixed panel height for break tab content areas; mobile uses dvh for browser chrome */
+        "no-scrollbar flex h-[400px] flex-col gap-ds-02 overflow-y-auto border-t border-t-border px-ds-06 pb-ds-02 pt-ds-02 max-md:h-[calc(100dvh-317px)] max-md:border-0",
+        t
+      ),
+      ...n,
+      children: p.map((h) => /* @__PURE__ */ e(
+        zt,
+        {
+          request: h,
+          userImages: r,
+          handleRejectRequest: x,
+          handleApproveRequest: o,
+          commentBoxOpen: u === h.id || f === h.id,
+          onCommentBoxClose: () => {
+            y(null), i(null);
+          },
+          clickedAction: u === h.id ? "approve" : f === h.id ? "reject" : null,
+          userId: m.id
+        },
+        h.id
+      ))
+    }
+  );
+});
+tt.displayName = "BreakAdmin.RequestsPanel";
+const st = O.forwardRef(function({ className: t, ...n }, a) {
+  const { activeTab: d, breakBalanceData: m, userImages: p, onSaveBalance: r } = Te();
+  return d !== "balance" ? null : /* @__PURE__ */ e("div", { ref: a, className: S(t), ...n, children: /* @__PURE__ */ e(
+    $t,
+    {
+      breakBalanceData: m,
+      userImages: p,
+      onSaveBalance: r
+    }
+  ) });
+});
+st.displayName = "BreakAdmin.BalancePanel";
+const ua = Object.assign(We, {
+  Root: We,
+  Header: qe,
+  TabBar: Ue,
+  BreaksPanel: et,
+  RequestsPanel: tt,
+  BalancePanel: st
+}), _s = O.forwardRef(function({
+  selectedLeave: t,
+  onSave: n
+}, a) {
+  var i;
+  const [d, m] = M(!1), [p, r] = M(
+    typeof (t == null ? void 0 : t.cashout) == "number" ? t.cashout : 0
+  ), [o, x] = M(
+    (t == null ? void 0 : t.carryForward) || 0
+  ), u = Be(null), { toast: f } = je();
+  U(() => {
+    r(
+      typeof (t == null ? void 0 : t.cashout) == "number" ? t.cashout : 0
+    ), x((t == null ? void 0 : t.carryForward) || 0);
+  }, [t]);
+  const y = async (h) => {
+    h.preventDefault(), m(!0);
+    try {
+      n && n({
+        userId: t.userId,
+        cashOutDays: p,
+        carryForward: o,
+        year: (/* @__PURE__ */ new Date()).getFullYear()
+      }), f({
+        description: "Break balance updated successfully",
+        color: "neutral"
+      });
+    } catch (c) {
+      console.error("Error updating break balance:", c), f({
+        title: "Error",
+        description: "Failed to update break balance",
+        color: "error"
+      });
+    } finally {
+      m(!1);
+    }
+  };
+  return /* @__PURE__ */ s(ce, { children: [
+    /* @__PURE__ */ e(we, { asChild: !0, children: /* @__PURE__ */ s(
+      J,
+      {
+        variant: "outline",
+        className: "text-ds-base border-border bg-layer-01 px-ds-05 py-ds-04 pr-ds-06 text-text-secondary shadow-02",
+        children: [
+          /* @__PURE__ */ e(Je, {}),
+          /* @__PURE__ */ e("span", { children: "Edit" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(me, { className: "w-[308px] p-ds-06", children: /* @__PURE__ */ e(Ne, { children: /* @__PURE__ */ e(Ze, { children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-start gap-ds-05", children: [
+      /* @__PURE__ */ s("p", { className: "text-ds-md w-full text-left text-text-tertiary", children: [
+        "Edit break balance conversion of ",
+        /* @__PURE__ */ e("br", { className: "mb-ds-02" }),
+        /* @__PURE__ */ e("span", { className: "font-semibold text-interactive", children: (i = t == null ? void 0 : t.user) == null ? void 0 : i.name })
+      ] }),
+      /* @__PURE__ */ s(
+        "form",
+        {
+          ref: u,
+          onSubmit: y,
+          id: "updatebreakbalanceform",
+          className: "flex w-full flex-col gap-ds-05",
+          children: [
+            /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-between", children: [
+              /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider  text-text-placeholder", children: "Cash out" }),
+              /* @__PURE__ */ e(
+                ks,
+                {
+                  value: p,
+                  onValueChange: r,
+                  min: 0,
+                  max: 100,
+                  step: 1,
+                  disabled: d
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s("div", { className: "flex w-full items-center justify-between", children: [
+              /* @__PURE__ */ e("div", { className: "text-ds-sm font-semibold uppercase tracking-wider  text-text-placeholder", children: "Carry forward" }),
+              /* @__PURE__ */ e("div", { className: "flex w-[100px] items-center justify-center", children: /* @__PURE__ */ e("div", { className: "text-ds-base font-semibold text-text-secondary", children: o }) })
+            ] }),
+            /* @__PURE__ */ e(
+              J,
+              {
+                variant: "outline",
+                fullWidth: !0,
+                onClick: () => {
+                  var h;
+                  return (h = u.current) == null ? void 0 : h.requestSubmit();
+                },
+                disabled: d,
+                children: "Update"
+              }
+            )
+          ]
+        }
+      )
+    ] }) }) }) })
+  ] });
+});
+_s.displayName = "EditBreakBalance";
+const Ys = O.forwardRef(
+  function({
+    adjustments: t,
+    adminId: n
+  }, a) {
+    return /* @__PURE__ */ e("div", { ref: a, className: "no-scrollbar w-full overflow-auto border border-border-subtle sm:rounded-ds-lg max-md:rounded-ds-none max-md:border-0", children: /* @__PURE__ */ e("div", { className: "bg-layer-02 pb-ds-06 pl-ds-05 pt-ds-03 md:p-ds-05", children: /* @__PURE__ */ e("div", { className: "no-scrollbar w-full overflow-x-auto overflow-y-auto", children: /* @__PURE__ */ s("div", { className: "min-w-[800px] max-md:w-[max-content]", children: [
+      /* @__PURE__ */ s("div", { className: "text-ds-sm font-semibold uppercase tracking-wider sticky top-0 grid grid-cols-[200px_160px_80px_1fr_1fr_1fr] gap-ds-05 py-ds-03  text-text-placeholder sm:px-ds-06", children: [
+        /* @__PURE__ */ e("div", { className: "p-ds-03 pl-ds-04", children: "User" }),
+        /* @__PURE__ */ e("div", { className: "p-ds-03 pl-ds-04", children: "Date" }),
+        /* @__PURE__ */ e("div", { className: "p-ds-03 text-center", children: "Days" }),
+        /* @__PURE__ */ e("div", { className: "p-ds-03 pl-ds-04", children: "Type" }),
+        /* @__PURE__ */ e("div", { className: "p-ds-03", children: "Reason" }),
+        /* @__PURE__ */ e("div", { className: "p-ds-03", children: "Approved By" })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "text-ds-md no-scrollbar overflow-y-auto md:max-h-[414px] max-md:h-[calc(100dvh-366px)] max-md:max-h-[calc(100dvh-366px)] max-md:overflow-visible max-md:overflow-y-auto max-md:overflow-x-visible", children: t.length === 0 ? /* @__PURE__ */ e("div", { className: "flex justify-center p-ds-05 text-text-tertiary", children: "No approved adjustments found" }) : t.map((d) => {
+        var m, p;
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            className: "grid grid-cols-[200px_160px_80px_1fr_1fr_1fr] gap-ds-05 bg-layer-02 py-ds-03 sm:px-ds-06",
+            children: [
+              /* @__PURE__ */ e("div", { className: "p-ds-03 pl-ds-04 text-text-secondary", children: ((m = d.user) == null ? void 0 : m.name) || "Unknown User" }),
+              /* @__PURE__ */ e("div", { className: "w-[160px] p-ds-03 text-text-secondary", children: de(new Date(d.createdAt)) }),
+              /* @__PURE__ */ e("div", { className: "w-[80px] p-ds-03 text-center text-text-secondary", children: d.numberOfDays }),
+              /* @__PURE__ */ e("div", { className: "max-w-[350px] p-ds-03 pl-ds-04 text-text-tertiary", children: d.type }),
+              /* @__PURE__ */ e("div", { className: "max-w-[350px] p-ds-03 text-text-secondary", children: d.reason || "-" }),
+              /* @__PURE__ */ e("div", { className: "p-ds-03 text-text-secondary", children: ((p = d.approver) == null ? void 0 : p.name) || (d.approvedBy === n ? "You" : "Unknown") })
+            ]
+          },
+          d.id
+        );
+      }) })
+    ] }) }) }) });
+  }
+);
+Ys.displayName = "ApprovedAdjustments";
+const xa = {
+  YEARLY_BALANCE: "YEARLY_BALANCE",
+  CARRY_FORWARD: "CARRY_FORWARD",
+  CASHOUT: "CASHOUT",
+  OTHER: "OTHER"
+}, Is = {
+  YEARLY_BALANCE: "Yearly Balance",
+  CARRY_FORWARD: "Carry Forward",
+  CASHOUT: "Cashout",
+  OTHER: "Other"
+};
+function fa(l) {
+  return /* @__PURE__ */ e("div", { children: Is[l] });
+}
+export {
+  xa as A,
+  ua as B,
+  js as C,
+  kt as D,
+  Vt as E,
+  ca as F,
+  fa as G,
+  Rt as H,
+  zt as L,
+  Mt as R,
+  ma as a,
+  Ys as b,
+  At as c,
+  St as d,
+  Gt as e,
+  Zt as f,
+  $t as g,
+  ze as h,
+  Jt as i,
+  Bt as j,
+  Ct as k,
+  Kt as l,
+  _s as m,
+  jt as n,
+  de as o,
+  na as p,
+  Me as q,
+  ot as r,
+  ia as s,
+  _e as t,
+  oa as u,
+  Cs as v,
+  fe as w,
+  Tt as x,
+  Q as y,
+  Re as z
+};