@gspa/ui 0.1.3 → 0.2.0

package/dist/components/EventsCalendar.js

@@ -0,0 +1,863 @@
+import A from "./Icon.js";
+import B from "./RightDrawer.js";
+import { resolveComponent as E, createElementBlock as a, openBlock as l, normalizeClass as c, normalizeStyle as z, createElementVNode as n, createVNode as C, toDisplayString as m, Fragment as h, renderList as f, renderSlot as P, createCommentVNode as p, createTextVNode as _, withModifiers as M, withCtx as O, withDirectives as Y, vShow as j } from "vue";
+import { _ as W } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+function w(e) {
+  if (typeof e == "string" && /^\d{4}-\d{2}-\d{2}$/.test(e))
+    return e;
+  if (e instanceof Date) {
+    const t = e.getFullYear(), i = String(e.getMonth() + 1).padStart(2, "0"), u = String(e.getDate()).padStart(2, "0");
+    return `${t}-${i}-${u}`;
+  }
+  return null;
+}
+function k() {
+  return w(/* @__PURE__ */ new Date());
+}
+function N(e) {
+  const t = e.getDay(), i = new Date(e);
+  i.setDate(e.getDate() - t);
+  const u = new Date(i);
+  return u.setDate(i.getDate() + 6), { startDate: i, endDate: u };
+}
+function I(e) {
+  const { startDate: t } = N(e), i = [];
+  for (let u = 0; u < 7; u++) {
+    const d = new Date(t);
+    d.setDate(t.getDate() + u), i.push(d);
+  }
+  return i;
+}
+function T(e) {
+  const t = e.getFullYear(), i = e.getMonth(), u = new Date(t, i, 1), d = new Date(t, i + 1, 0), r = u.getDay(), D = d.getDate(), y = [], s = k(), o = new Date(t, i, 0).getDate();
+  for (let x = r - 1; x >= 0; x--) {
+    const b = o - x, v = new Date(t, i - 1, b), S = w(v);
+    y.push({
+      dayNumber: b,
+      date: S,
+      dateObj: v,
+      isCurrentMonth: !1,
+      isToday: S === s
+    });
+  }
+  for (let x = 1; x <= D; x++) {
+    const b = new Date(t, i, x), v = w(b);
+    y.push({
+      dayNumber: x,
+      date: v,
+      dateObj: b,
+      isCurrentMonth: !0,
+      isToday: v === s
+    });
+  }
+  const g = 42 - y.length;
+  for (let x = 1; x <= g; x++) {
+    const b = new Date(t, i + 1, x), v = w(b);
+    y.push({
+      dayNumber: x,
+      date: v,
+      dateObj: b,
+      isCurrentMonth: !1,
+      isToday: v === s
+    });
+  }
+  return y;
+}
+function H(e = 0, t = 23, i = 60) {
+  const u = [];
+  for (let d = e; d <= t; d++)
+    for (let r = 0; r < 60; r += i) {
+      const D = String(d).padStart(2, "0"), y = String(r).padStart(2, "0"), s = `${D}:${y}`, o = d === 0 ? 12 : d > 12 ? d - 12 : d, g = d < 12 ? "AM" : "PM", x = `${o}:${y} ${g}`;
+      u.push({ time: s, display: x });
+    }
+  return u;
+}
+function F(e, t) {
+  const i = w(e), u = w(t);
+  return i === u;
+}
+function R(e, t = "long") {
+  return e.toLocaleDateString("en-US", { month: t });
+}
+function V(e) {
+  return e.getFullYear();
+}
+const G = {
+  name: "EventsCalendar",
+  components: {
+    Icon: A,
+    RightDrawer: B
+  },
+  props: {
+    events: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: "compact",
+      validator: (e) => ["xs", "compact", "default", "large", "full"].includes(e)
+    },
+    height: {
+      type: String,
+      default: "100%"
+    },
+    minHeight: {
+      type: String,
+      default: "420px"
+    },
+    maxHeight: {
+      type: String,
+      default: ""
+    },
+    drawerSize: {
+      type: String,
+      default: "lg",
+      validator: (e) => ["sm", "md", "lg", "xl", "full"].includes(e)
+    },
+    drawerTitle: {
+      type: String,
+      default: "Compliance Details"
+    },
+    drawerDetailFields: {
+      type: Array,
+      default: () => [
+        { label: "Date", path: "date", type: "date" },
+        { label: "End Date", path: "end_date", type: "date" },
+        { label: "Code", path: "details.code" },
+        { label: "Company", path: "details.company_name" }
+      ]
+    },
+    drawerStatusMap: {
+      type: Object,
+      default: () => ({
+        complied: { label: "Complied", class: "ui-success-soft ui-success" },
+        pending: { label: "Pending", class: "ui-warning-soft ui-warning" }
+      })
+    },
+    drawerAccentMap: {
+      type: Object,
+      default: () => ({
+        complied: "bg-(--ui-success)",
+        complete: "bg-(--ui-success)",
+        partial: "bg-(--ui-info)",
+        in_progress: "bg-(--ui-info)",
+        pending: "bg-(--ui-warning)",
+        overdue: "bg-(--ui-danger)",
+        open: "bg-(--ui-danger)"
+      })
+    },
+    showViewMoreDetails: {
+      type: Boolean,
+      default: !0
+    },
+    drawerDocumentActions: {
+      type: Object,
+      default: () => ({
+        view: !0,
+        download: !0,
+        delete: !1
+      })
+    },
+    drawerFieldGridCols: {
+      type: [Number, String],
+      default: 1
+    },
+    drawerHeaderCardClass: {
+      type: String,
+      default: "rounded-xl border ui-border bg-(--ui-surface-muted) p-4"
+    },
+    drawerSectionCardClass: {
+      type: String,
+      default: "rounded-lg border ui-border bg-(--ui-surface) p-3"
+    },
+    drawerViewDetailsButtonClass: {
+      type: String,
+      default: "inline-flex items-center rounded-md bg-(--ui-primary) px-3 py-1.5 text-xs font-medium text-(--ui-text-inverse) hover:opacity-90 transition-opacity"
+    },
+    drawerEmptyDocumentsClass: {
+      type: String,
+      default: "text-sm ui-text-muted"
+    }
+  },
+  emits: [
+    "select-date",
+    "select-event",
+    "close-event-details",
+    "view-more-details",
+    "document-view",
+    "document-download",
+    "document-delete"
+  ],
+  data() {
+    return {
+      currentDate: /* @__PURE__ */ new Date(),
+      selectedDate: null,
+      viewMode: "month",
+      selectedEvent: null,
+      weekDays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+      weekDaysShort: ["S", "M", "T", "W", "T", "F", "S"],
+      timeSlots: H(0, 23, 60),
+      monthNames: [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December"
+      ]
+    };
+  },
+  computed: {
+    containerStyles() {
+      return {
+        height: this.height || void 0,
+        minHeight: this.minHeight || void 0,
+        maxHeight: this.maxHeight || void 0
+      };
+    },
+    sizePreset() {
+      const e = {
+        xs: {
+          rootTextClass: "text-[11px]",
+          toolbarPaddingClass: "px-2.5 py-1.5",
+          titleClass: "text-xs min-w-[100px]",
+          controlButtonClass: "px-2 py-0.5 text-[10px]",
+          iconButtonClass: "w-5 h-5",
+          viewButtonClass: "px-2 py-0.5 text-[10px]",
+          monthDayCellClass: "min-h-[52px]",
+          sidebarWidthClass: "w-48"
+        },
+        compact: {
+          rootTextClass: "text-xs",
+          toolbarPaddingClass: "px-3 py-2",
+          titleClass: "text-sm min-w-[120px]",
+          controlButtonClass: "px-2 py-1 text-[11px]",
+          iconButtonClass: "w-6 h-6",
+          viewButtonClass: "px-2 py-0.5 text-[11px]",
+          monthDayCellClass: "min-h-[42px]",
+          sidebarWidthClass: "w-52"
+        },
+        default: {
+          rootTextClass: "text-sm",
+          toolbarPaddingClass: "px-4 py-2.5",
+          titleClass: "text-base min-w-[150px]",
+          controlButtonClass: "px-3 py-1.5 text-xs",
+          iconButtonClass: "w-7 h-7",
+          viewButtonClass: "px-3 py-1 text-xs",
+          monthDayCellClass: "min-h-[82px]",
+          sidebarWidthClass: "w-64"
+        },
+        large: {
+          rootTextClass: "text-base",
+          toolbarPaddingClass: "px-5 py-3",
+          titleClass: "text-lg min-w-[180px]",
+          controlButtonClass: "px-3.5 py-2 text-sm",
+          iconButtonClass: "w-8 h-8",
+          viewButtonClass: "px-3.5 py-1.5 text-sm",
+          monthDayCellClass: "min-h-[96px]",
+          sidebarWidthClass: "w-72"
+        },
+        full: {
+          rootTextClass: "text-base",
+          toolbarPaddingClass: "px-5 py-3",
+          titleClass: "text-lg min-w-[180px]",
+          controlButtonClass: "px-3.5 py-2 text-sm",
+          iconButtonClass: "w-8 h-8",
+          viewButtonClass: "px-3.5 py-1.5 text-sm",
+          monthDayCellClass: "min-h-[104px]",
+          sidebarWidthClass: "w-80"
+        }
+      };
+      return e[this.size] || e.default;
+    },
+    isDrawerOpen: {
+      get() {
+        return !!this.selectedEvent;
+      },
+      set(e) {
+        e || this.closeEvent();
+      }
+    },
+    displayTitle() {
+      if (this.viewMode === "year")
+        return V(this.currentDate);
+      if (this.viewMode === "day")
+        return this.formatConsistentDate(this.currentDate);
+      if (this.viewMode === "week") {
+        const { startDate: e, endDate: t } = N(this.currentDate);
+        return `${this.formatConsistentDate(e)} - ${this.formatConsistentDate(t)}`;
+      } else
+        return `${R(this.currentDate)} ${V(this.currentDate)}`;
+    },
+    calendarDays() {
+      return T(this.currentDate).map((t) => ({
+        ...t,
+        events: this.getEventsForDate(t.date)
+      }));
+    },
+    visibleCalendarDays() {
+      return this.calendarDays.length < 7 ? this.calendarDays : this.calendarDays.slice(-7).every((i) => !i.isCurrentMonth) ? this.calendarDays.slice(0, -7) : this.calendarDays;
+    },
+    weekViewDays() {
+      return I(this.currentDate).map((t) => {
+        const i = w(t);
+        return {
+          dateObj: t,
+          date: i,
+          dayNumber: t.getDate(),
+          dayName: this.weekDays[t.getDay()],
+          isToday: F(t, k()),
+          events: this.getEventsForDate(i)
+        };
+      });
+    },
+    dayViewDate() {
+      const e = w(this.currentDate);
+      return {
+        dateObj: this.currentDate,
+        date: e,
+        dayNumber: this.currentDate.getDate(),
+        dayName: this.weekDays[this.currentDate.getDay()],
+        isToday: F(this.currentDate, k()),
+        events: this.getEventsForDate(e)
+      };
+    },
+    yearViewMonths() {
+      const e = this.currentDate.getFullYear();
+      return this.monthNames.map((t, i) => {
+        const u = new Date(e, i, 1), d = T(u);
+        return {
+          name: t,
+          index: i,
+          days: d.map((r) => ({
+            ...r,
+            events: this.getEventsForDate(r.date)
+          }))
+        };
+      });
+    },
+    drawerFieldGridClass() {
+      const e = Math.max(1, Math.min(Number(this.drawerFieldGridCols) || 1, 3));
+      return e === 1 ? "grid-cols-1" : e === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-2 xl:grid-cols-3";
+    }
+  },
+  methods: {
+    formatConsistentDate(e) {
+      if (!e) return "";
+      let t;
+      if (e instanceof Date)
+        t = e;
+      else if (typeof e == "string" && /^\d{4}-\d{2}-\d{2}$/.test(e)) {
+        const [d, r, D] = e.split("-").map(Number);
+        t = new Date(d, r - 1, D);
+      } else
+        t = new Date(e);
+      if (Number.isNaN(t.getTime())) return String(e);
+      const i = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+      return `${String(t.getDate()).padStart(2, "0")}-${i[t.getMonth()]}-${t.getFullYear()}`;
+    },
+    getNestedValue(e, t) {
+      return !e || !t ? null : String(t).split(".").reduce((i, u) => i == null ? null : i[u], e);
+    },
+    getDrawerFieldValue(e) {
+      if (!this.selectedEvent || !e) return null;
+      if (Array.isArray(e.paths)) {
+        for (const t of e.paths) {
+          const i = this.getNestedValue(this.selectedEvent, t);
+          if (i != null && i !== "") return i;
+        }
+        return null;
+      }
+      return this.getNestedValue(this.selectedEvent, e.path);
+    },
+    formatDrawerFieldValue(e, t) {
+      return t == null || t === "" ? "-" : e?.type === "date" ? this.formatConsistentDate(t) : t;
+    },
+    shouldShowDrawerField(e) {
+      if (!this.selectedEvent) return !1;
+      const t = this.getDrawerFieldValue(e);
+      return e?.showWhenEmpty ? !0 : t != null && t !== "";
+    },
+    getDrawerFieldColSpanClass(e) {
+      const t = Math.max(1, Math.min(Number(this.drawerFieldGridCols) || 1, 3)), i = Number(e?.colSpan || 1), u = Math.max(1, Math.min(i, t));
+      return t === 1 || u === 1 ? "col-span-1" : t === 2 ? u === 2 ? "md:col-span-2" : "md:col-span-1" : u === 3 ? "xl:col-span-3" : u === 2 ? "md:col-span-2 xl:col-span-2" : "md:col-span-1 xl:col-span-1";
+    },
+    getDrawerStatus(e) {
+      const t = String(e || "pending").toLowerCase();
+      return this.drawerStatusMap[t] ? this.drawerStatusMap[t] : {
+        label: t.split(/[_\s-]+/).filter(Boolean).map((i) => i.charAt(0).toUpperCase() + i.slice(1)).join(" ") || "Pending",
+        class: "ui-surface-soft ui-text-muted"
+      };
+    },
+    getDrawerAccentClass(e) {
+      const t = String(e?.status || "pending").toLowerCase();
+      return this.drawerAccentMap[t] ? this.drawerAccentMap[t] : this.getColorStripClass(e?.color);
+    },
+    getSelectedEventDetails() {
+      return this.selectedEvent ? this.selectedEvent.details || this.selectedEvent.related_record || this.selectedEvent.relatedRecord || this.selectedEvent.compliance || {} : {};
+    },
+    getSelectedEventDocuments() {
+      const e = this.getSelectedEventDetails(), t = this.selectedEvent?.module_data || this.selectedEvent?.moduleData || {}, i = this.selectedEvent?.related_record || this.selectedEvent?.relatedRecord || {};
+      return Array.isArray(e.documents) ? e.documents : Array.isArray(e.compliance_documents) ? e.compliance_documents : Array.isArray(i.compliance_documents) ? i.compliance_documents : Array.isArray(t.documents) ? t.documents : [];
+    },
+    getSelectedEventDocumentsCount() {
+      const e = this.getSelectedEventDetails(), t = this.selectedEvent?.related_record || this.selectedEvent?.relatedRecord || {};
+      return e.documents_count != null ? e.documents_count : t.documents_count != null ? t.documents_count : this.getSelectedEventDocuments().length;
+    },
+    formatFileSize(e) {
+      const t = Number(e);
+      if (!Number.isFinite(t) || t <= 0) return "0 Bytes";
+      const i = ["Bytes", "KB", "MB", "GB"], u = Math.min(Math.floor(Math.log(t) / Math.log(1024)), i.length - 1);
+      return `${(t / Math.pow(1024, u)).toFixed(2)} ${i[u]}`;
+    },
+    getEventsForDate(e) {
+      return this.events.filter((t) => t.date === e);
+    },
+    previousPeriod() {
+      this.viewMode === "year" ? this.currentDate = new Date(this.currentDate.getFullYear() - 1, 0, 1) : this.viewMode === "day" ? this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate() - 1) : this.viewMode === "week" ? this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate() - 7) : this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1);
+    },
+    nextPeriod() {
+      this.viewMode === "year" ? this.currentDate = new Date(this.currentDate.getFullYear() + 1, 0, 1) : this.viewMode === "day" ? this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate() + 1) : this.viewMode === "week" ? this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate() + 7) : this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
+    },
+    goToToday() {
+      this.currentDate = /* @__PURE__ */ new Date(), this.selectedDate = k(), this.$emit("select-date", { date: this.selectedDate, events: this.getEventsForDate(this.selectedDate) });
+    },
+    selectDay(e) {
+      this.selectedDate = e.date;
+      const [t, i, u] = e.date.split("-").map(Number);
+      this.currentDate = new Date(t, i - 1, u), this.selectedEvent = e.events.length === 1 ? e.events[0] : null, this.$emit("select-date", { date: e.date, events: e.events });
+    },
+    getVisibleMonthEvents(e) {
+      return this.selectedDate === e.date ? e.events : e.events.slice(0, 2);
+    },
+    selectEvent(e, t) {
+      this.selectedEvent = e, this.selectedDate = t.date;
+      const [i, u, d] = t.date.split("-").map(Number);
+      this.currentDate = new Date(i, u - 1, d), this.$emit("select-event", e);
+    },
+    closeEvent() {
+      this.selectedEvent = null, this.$emit("close-event-details");
+    },
+    handleViewMoreDetails() {
+      this.selectedEvent && this.$emit("view-more-details", this.selectedEvent);
+    },
+    handleDocumentView(e) {
+      e && this.$emit("document-view", { doc: e, event: this.selectedEvent });
+    },
+    handleDocumentDownload(e) {
+      e && this.$emit("document-download", { doc: e, event: this.selectedEvent });
+    },
+    handleDocumentDelete(e) {
+      e && this.$emit("document-delete", { doc: e, event: this.selectedEvent });
+    },
+    getEventColorClass(e) {
+      return {
+        blue: "bg-(--ui-primary-soft) text-(--ui-primary-strong) border-l-2 border-(--ui-primary)",
+        red: "bg-(--ui-danger-soft) text-(--ui-danger-strong) border-l-2 border-(--ui-danger)",
+        green: "bg-(--ui-success-soft) text-(--ui-success-strong) border-l-2 border-(--ui-success)",
+        purple: "bg-(--ui-accent-soft) text-(--ui-accent-strong) border-l-2 border-(--ui-accent)",
+        orange: "bg-(--ui-warning-soft) text-(--ui-warning-strong) border-l-2 border-(--ui-warning)"
+      }[e] || "ui-surface-soft ui-text-muted border-l-2 border-(--ui-border-strong)";
+    },
+    getColorStripClass(e) {
+      return {
+        blue: "bg-(--ui-primary)",
+        red: "bg-(--ui-danger)",
+        green: "bg-(--ui-success)",
+        purple: "bg-(--ui-accent)",
+        orange: "bg-(--ui-warning)"
+      }[e] || "bg-(--ui-border-strong)";
+    },
+    getEventsAtTime(e, t) {
+      return e.filter((i) => {
+        if (!i.time || !/^\d{1,2}:\d{2}/.test(i.time)) return !1;
+        const u = i.time.split(":")[0].padStart(2, "0");
+        return t.time.startsWith(u);
+      });
+    },
+    getAllDayEvents(e) {
+      return e.filter((t) => t.time ? !/^\d{1,2}:\d{2}/.test(t.time) : !0);
+    },
+    selectMonthFromYear(e) {
+      this.currentDate = new Date(this.currentDate.getFullYear(), e, 1), this.viewMode = "month";
+    }
+  }
+}, J = { class: "flex items-center gap-2" }, L = { class: "flex" }, U = { class: "flex gap-0.5 ui-surface-muted rounded-lg p-0.5" }, q = ["onClick"], K = { class: "flex flex-1 overflow-hidden" }, Q = { class: "flex flex-col flex-1 overflow-hidden min-w-0" }, X = {
+  key: 0,
+  class: "flex-1 overflow-y-auto p-4"
+}, Z = { class: "grid grid-cols-3 gap-4" }, $ = ["onClick"], ee = { class: "px-3 py-2 bg-(--ui-surface-muted) border-b ui-border" }, te = { class: "text-xs font-semibold ui-text" }, se = { class: "p-2 ui-surface" }, re = { class: "grid grid-cols-7 mb-1" }, ie = { class: "grid grid-cols-7 gap-px" }, ne = {
+  key: 0,
+  class: "absolute bottom-px left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-(--ui-primary)"
+}, ae = { class: "grid grid-cols-7 border-b ui-border shrink-0 ui-surface" }, le = { class: "grid grid-cols-7 flex-1 overflow-y-auto border-l border-t ui-border" }, oe = ["onClick"], de = { class: "flex flex-col gap-0.5" }, ue = ["onClick"], ce = ["onClick"], me = {
+  class: "grid border-b ui-border shrink-0 ui-surface",
+  style: { "grid-template-columns": "52px repeat(7, 1fr)" }
+}, he = { class: "text-[10px] font-semibold ui-text-soft uppercase tracking-wider" }, ge = {
+  class: "grid border-b ui-border bg-(--ui-surface-muted) shrink-0",
+  style: { "grid-template-columns": "52px repeat(7, 1fr)" }
+}, xe = ["onClick"], fe = { class: "flex-1 overflow-y-auto" }, pe = {
+  class: "grid",
+  style: { "grid-template-columns": "52px repeat(7, 1fr)" }
+}, ye = { class: "h-14 border-b border-r border-(--ui-border) px-1.5 pt-1 text-[10px] ui-text-soft text-right leading-none" }, De = ["onClick"], be = { class: "font-semibold opacity-70 mr-1" }, ve = { class: "text-xs font-semibold uppercase tracking-wider ui-text-soft" }, we = {
+  key: 0,
+  class: "flex border-b ui-border bg-(--ui-surface-muted) shrink-0"
+}, Ce = { class: "flex-1 p-1 flex flex-col gap-0.5" }, _e = ["onClick"], ke = { class: "flex-1 overflow-y-auto" }, Se = {
+  class: "grid",
+  style: { "grid-template-columns": "52px 1fr" }
+}, Ee = { class: "h-14 border-b border-r border-(--ui-border) px-1.5 pt-1 text-[10px] ui-text-soft text-right leading-none" }, Me = ["onClick"], Te = { class: "font-semibold mr-1" }, Fe = {
+  key: 0,
+  class: "text-[10px] opacity-75 mt-0.5 truncate"
+}, Ve = {
+  key: 0,
+  class: "h-full overflow-y-auto p-4 space-y-4"
+}, Ne = { class: "mt-2 flex items-start justify-between gap-3" }, Ae = { class: "text-lg font-bold leading-tight ui-text wrap-break-word" }, Be = {
+  key: 0,
+  class: "mt-3"
+}, ze = { class: "mt-1 text-sm ui-text leading-relaxed" }, Pe = { class: "mt-1 text-sm ui-text" }, Oe = { class: "mb-2 flex items-center justify-between" }, Ye = { class: "text-xs ui-text-muted" }, je = {
+  key: 1,
+  class: "space-y-2"
+}, We = { class: "truncate text-sm font-semibold ui-text" }, Ie = { class: "text-xs ui-text-muted" }, He = { class: "mt-2 flex gap-2" }, Re = ["onClick"], Ge = ["onClick"], Je = ["onClick"];
+function Le(e, t, i, u, d, r) {
+  const D = E("Icon"), y = E("RightDrawer");
+  return l(), a("div", {
+    style: z(r.containerStyles),
+    class: c(["flex flex-col h-full ui-surface border ui-border rounded-xl overflow-hidden shadow-sm", r.sizePreset.rootTextClass])
+  }, [
+    n("div", {
+      class: c(["flex items-center justify-between border-b ui-border ui-surface shrink-0", r.sizePreset.toolbarPaddingClass])
+    }, [
+      n("div", J, [
+        n("button", {
+          class: c(["font-medium border ui-border-strong rounded-md ui-text hover:bg-(--ui-surface-muted) transition-colors", r.sizePreset.controlButtonClass]),
+          onClick: t[0] || (t[0] = (...s) => r.goToToday && r.goToToday(...s))
+        }, " Today ", 2),
+        n("div", L, [
+          n("button", {
+            class: c(["flex items-center justify-center rounded-md ui-text-muted hover:bg-(--ui-surface-soft) transition-colors", r.sizePreset.iconButtonClass]),
+            onClick: t[1] || (t[1] = (...s) => r.previousPeriod && r.previousPeriod(...s))
+          }, [
+            C(D, {
+              icon: "chevron-left",
+              class: "w-4 h-4"
+            })
+          ], 2),
+          n("button", {
+            class: c(["flex items-center justify-center rounded-md ui-text-muted hover:bg-(--ui-surface-soft) transition-colors", r.sizePreset.iconButtonClass]),
+            onClick: t[2] || (t[2] = (...s) => r.nextPeriod && r.nextPeriod(...s))
+          }, [
+            C(D, {
+              icon: "chevron-right",
+              class: "w-4 h-4"
+            })
+          ], 2)
+        ]),
+        n("h2", {
+          class: c(["font-semibold ui-text", r.sizePreset.titleClass])
+        }, m(r.displayTitle), 3)
+      ]),
+      n("div", U, [
+        (l(), a(h, null, f(["year", "month", "week", "day"], (s) => n("button", {
+          key: s,
+          class: c([
+            "font-medium rounded-md transition-colors capitalize",
+            r.sizePreset.viewButtonClass,
+            d.viewMode === s ? "ui-surface ui-text shadow-sm" : "ui-text-muted hover:text-(--ui-text)"
+          ]),
+          onClick: (o) => d.viewMode = s
+        }, m(s), 11, q)), 64))
+      ])
+    ], 2),
+    n("div", K, [
+      n("div", Q, [
+        d.viewMode === "year" ? (l(), a("div", X, [
+          n("div", Z, [
+            (l(!0), a(h, null, f(r.yearViewMonths, (s) => (l(), a("div", {
+              key: s.index,
+              class: "border ui-border rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition-shadow",
+              onClick: (o) => r.selectMonthFromYear(s.index)
+            }, [
+              n("div", ee, [
+                n("h3", te, m(s.name), 1)
+              ]),
+              n("div", se, [
+                n("div", re, [
+                  (l(!0), a(h, null, f(d.weekDaysShort, (o) => (l(), a("span", {
+                    key: o,
+                    class: "text-center text-[9px] font-semibold ui-text-soft uppercase"
+                  }, m(o), 1))), 128))
+                ]),
+                n("div", ie, [
+                  (l(!0), a(h, null, f(s.days, (o, g) => (l(), a("div", {
+                    key: g,
+                    class: c(["relative aspect-square flex items-center justify-center text-[10px] rounded-full", [
+                      o.isCurrentMonth ? "ui-text-muted" : "ui-text-soft opacity-60",
+                      o.isToday ? "bg-(--ui-primary) text-(--ui-text-inverse) font-semibold" : "",
+                      o.events.length > 0 && o.isCurrentMonth && !o.isToday ? "font-semibold ui-text" : ""
+                    ]])
+                  }, [
+                    _(m(o.dayNumber) + " ", 1),
+                    o.events.length > 0 && o.isCurrentMonth && !o.isToday ? (l(), a("span", ne)) : p("", !0)
+                  ], 2))), 128))
+                ])
+              ])
+            ], 8, $))), 128))
+          ])
+        ])) : p("", !0),
+        d.viewMode === "month" ? (l(), a(h, { key: 1 }, [
+          n("div", ae, [
+            (l(!0), a(h, null, f(d.weekDays, (s) => (l(), a("div", {
+              key: s,
+              class: "py-2 text-center text-[11px] font-semibold ui-text-soft uppercase tracking-wider"
+            }, m(s), 1))), 128))
+          ]),
+          n("div", le, [
+            (l(!0), a(h, null, f(r.visibleCalendarDays, (s, o) => (l(), a("div", {
+              key: o,
+              class: c([
+                "border-r border-b ui-border p-1.5 cursor-pointer transition-colors",
+                r.sizePreset.monthDayCellClass,
+                s.isCurrentMonth ? "ui-surface hover:bg-(--ui-surface-muted)" : "bg-(--ui-surface-muted)",
+                s.isToday ? "bg-(--ui-primary-soft) hover:bg-(--ui-primary-soft)" : "",
+                d.selectedDate === s.date ? "ring-2 ring-inset ring-(--ui-primary)" : ""
+              ]),
+              onClick: (g) => r.selectDay(s)
+            }, [
+              n("div", {
+                class: c(["w-10 h-8 flex items-center justify-center rounded-full text-xl mb-1 font-semibold", [
+                  s.isToday ? "bg-(--ui-primary) text-(--ui-text-inverse) font-semibold" : "",
+                  !s.isToday && s.isCurrentMonth ? "ui-text" : "ui-text-soft opacity-60"
+                ]])
+              }, m(s.dayNumber), 3),
+              n("div", de, [
+                (l(!0), a(h, null, f(r.getVisibleMonthEvents(s), (g, x) => (l(), a("div", {
+                  key: x,
+                  class: c(["text-xs px-1.5 py-0.5 rounded truncate cursor-pointer hover:opacity-75 transition-opacity", r.getEventColorClass(g.color)]),
+                  onClick: M((b) => r.selectEvent(g, s), ["stop"])
+                }, m(g.title), 11, ue))), 128)),
+                s.events.length > 2 && d.selectedDate !== s.date ? (l(), a("div", {
+                  key: 0,
+                  class: "text-[10px] ui-text-soft pl-1 cursor-pointer hover:underline",
+                  onClick: M((g) => r.selectDay(s), ["stop"])
+                }, " +" + m(s.events.length - 2) + " more ", 9, ce)) : p("", !0)
+              ])
+            ], 10, oe))), 128))
+          ])
+        ], 64)) : p("", !0),
+        d.viewMode === "week" ? (l(), a(h, { key: 2 }, [
+          n("div", me, [
+            t[5] || (t[5] = n("div", { class: "border-r ui-border" }, null, -1)),
+            (l(!0), a(h, null, f(r.weekViewDays, (s) => (l(), a("div", {
+              key: s.date,
+              class: c(["py-2 text-center border-r ui-border last:border-r-0", s.isToday ? "bg-(--ui-primary-soft)" : ""])
+            }, [
+              n("div", he, m(s.dayName), 1),
+              n("div", {
+                class: c(["mx-auto mt-1 w-7 h-7 flex items-center justify-center rounded-full text-sm font-medium", s.isToday ? "bg-(--ui-primary) text-(--ui-text-inverse)" : "ui-text"])
+              }, m(s.dayNumber), 3)
+            ], 2))), 128))
+          ]),
+          n("div", ge, [
+            t[6] || (t[6] = n("div", { class: "border-r ui-border px-1 py-1 text-[10px] ui-text-soft text-right flex items-center justify-end" }, " All day ", -1)),
+            (l(!0), a(h, null, f(r.weekViewDays, (s) => (l(), a("div", {
+              key: "ad-" + s.date,
+              class: "p-1 border-r ui-border last:border-r-0 flex flex-col gap-0.5 min-h-8"
+            }, [
+              (l(!0), a(h, null, f(r.getAllDayEvents(s.events), (o) => (l(), a("div", {
+                key: o.id,
+                class: c(["text-[11px] px-1.5 py-0.5 rounded truncate cursor-pointer hover:opacity-75 transition-opacity", r.getEventColorClass(o.color)]),
+                onClick: (g) => r.selectEvent(o, s)
+              }, m(o.title), 11, xe))), 128))
+            ]))), 128))
+          ]),
+          n("div", fe, [
+            n("div", pe, [
+              (l(!0), a(h, null, f(d.timeSlots, (s) => (l(), a(h, {
+                key: s.time
+              }, [
+                n("div", ye, m(s.display), 1),
+                (l(!0), a(h, null, f(r.weekViewDays, (o) => (l(), a("div", {
+                  key: o.date + s.time,
+                  class: c(["h-14 border-b border-r border-(--ui-border) last:border-r-0 p-0.5", o.isToday ? "bg-(--ui-primary-soft)" : ""])
+                }, [
+                  (l(!0), a(h, null, f(r.getEventsAtTime(o.events, s), (g) => (l(), a("div", {
+                    key: g.id,
+                    class: c(["text-[11px] px-1.5 py-0.5 rounded truncate cursor-pointer hover:opacity-75 transition-opacity", r.getEventColorClass(g.color)]),
+                    onClick: (x) => r.selectEvent(g, o)
+                  }, [
+                    n("span", be, m(g.time), 1),
+                    _(m(g.title), 1)
+                  ], 10, De))), 128))
+                ], 2))), 128))
+              ], 64))), 128))
+            ])
+          ])
+        ], 64)) : p("", !0),
+        d.viewMode === "day" ? (l(), a(h, { key: 3 }, [
+          n("div", {
+            class: c(["flex items-center justify-center gap-3 px-4 py-3 border-b ui-border shrink-0", r.dayViewDate.isToday ? "bg-(--ui-primary-soft)" : "ui-surface"])
+          }, [
+            n("span", ve, m(r.dayViewDate.dayName), 1),
+            n("span", {
+              class: c(["text-2xl font-light", r.dayViewDate.isToday ? "ui-primary" : "ui-text"])
+            }, m(r.dayViewDate.dayNumber), 3)
+          ], 2),
+          r.getAllDayEvents(r.dayViewDate.events).length ? (l(), a("div", we, [
+            t[7] || (t[7] = n("div", { class: "w-[52px] border-r ui-border px-1.5 py-1 text-[10px] ui-text-soft text-right flex items-center justify-end shrink-0" }, " All day ", -1)),
+            n("div", Ce, [
+              (l(!0), a(h, null, f(r.getAllDayEvents(r.dayViewDate.events), (s) => (l(), a("div", {
+                key: s.id,
+                class: c(["text-[11px] px-1.5 py-0.5 rounded truncate cursor-pointer hover:opacity-75 transition-opacity", r.getEventColorClass(s.color)]),
+                onClick: (o) => r.selectEvent(s, r.dayViewDate)
+              }, m(s.title), 11, _e))), 128))
+            ])
+          ])) : p("", !0),
+          n("div", ke, [
+            n("div", Se, [
+              (l(!0), a(h, null, f(d.timeSlots, (s) => (l(), a(h, {
+                key: s.time
+              }, [
+                n("div", Ee, m(s.display), 1),
+                n("div", {
+                  class: c(["h-14 border-b border-(--ui-border) p-0.5", r.dayViewDate.isToday ? "bg-(--ui-primary-soft)" : ""])
+                }, [
+                  (l(!0), a(h, null, f(r.getEventsAtTime(r.dayViewDate.events, s), (o) => (l(), a("div", {
+                    key: o.id,
+                    class: c(["text-xs px-2 py-1 rounded cursor-pointer hover:opacity-75 transition-opacity", r.getEventColorClass(o.color)]),
+                    onClick: (g) => r.selectEvent(o, r.dayViewDate)
+                  }, [
+                    n("span", Te, m(o.time), 1),
+                    _(m(o.title) + " ", 1),
+                    o.description ? (l(), a("div", Fe, m(o.description), 1)) : p("", !0)
+                  ], 10, Me))), 128))
+                ], 2)
+              ], 64))), 128))
+            ])
+          ])
+        ], 64)) : p("", !0)
+      ]),
+      P(e.$slots, "sidebar", {
+        selectedEvent: d.selectedEvent,
+        closeEvent: r.closeEvent
+      }, () => [
+        C(y, {
+          modelValue: r.isDrawerOpen,
+          "onUpdate:modelValue": t[4] || (t[4] = (s) => r.isDrawerOpen = s),
+          title: i.drawerTitle,
+          size: i.drawerSize,
+          onClose: r.closeEvent
+        }, {
+          default: O(() => [
+            d.selectedEvent ? (l(), a("div", Ve, [
+              n("div", {
+                class: c(i.drawerHeaderCardClass)
+              }, [
+                n("div", {
+                  class: c(["mb-2 h-1 w-full rounded-full", r.getDrawerAccentClass(d.selectedEvent)])
+                }, null, 2),
+                n("div", Ne, [
+                  n("h4", Ae, m(d.selectedEvent.title), 1),
+                  i.showViewMoreDetails ? (l(), a("button", {
+                    key: 0,
+                    class: c(i.drawerViewDetailsButtonClass),
+                    onClick: t[3] || (t[3] = (...s) => r.handleViewMoreDetails && r.handleViewMoreDetails(...s))
+                  }, [
+                    t[8] || (t[8] = _(" Full details ", -1)),
+                    C(D, {
+                      icon: "arrow-right",
+                      class: "ml-1 w-3 h-3"
+                    })
+                  ], 2)) : p("", !0)
+                ]),
+                d.selectedEvent.status ? (l(), a("div", Be, [
+                  n("span", {
+                    class: c(["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold", r.getDrawerStatus(d.selectedEvent.status).class])
+                  }, m(r.getDrawerStatus(d.selectedEvent.status).label), 3)
+                ])) : p("", !0)
+              ], 2),
+              n("div", {
+                class: c(["grid gap-3", r.drawerFieldGridClass])
+              }, [
+                (l(!0), a(h, null, f(i.drawerDetailFields, (s, o) => Y((l(), a("div", {
+                  key: `${s.path || (s.paths || []).join("|")}-${o}`,
+                  class: c([i.drawerSectionCardClass, r.getDrawerFieldColSpanClass(s), s.cardClass])
+                }, [
+                  n("p", {
+                    class: c(["text-[11px] font-semibold uppercase tracking-wide ui-text-soft", s.labelClass])
+                  }, m(s.label), 3),
+                  n("p", {
+                    class: c(["mt-1 text-sm ui-text", s.valueClass])
+                  }, m(r.formatDrawerFieldValue(s, r.getDrawerFieldValue(s))), 3)
+                ], 2)), [
+                  [j, r.shouldShowDrawerField(s)]
+                ])), 128))
+              ], 2),
+              d.selectedEvent.description ? (l(), a("div", {
+                key: 0,
+                class: c(i.drawerSectionCardClass)
+              }, [
+                t[9] || (t[9] = n("p", { class: "text-[11px] font-semibold uppercase tracking-wide ui-text-soft" }, " Description ", -1)),
+                n("p", ze, m(d.selectedEvent.description), 1)
+              ], 2)) : p("", !0),
+              r.getSelectedEventDetails().remarks ? (l(), a("div", {
+                key: 1,
+                class: c(i.drawerSectionCardClass)
+              }, [
+                t[10] || (t[10] = n("p", { class: "text-[11px] font-semibold uppercase tracking-wide ui-text-soft" }, " Compliance Remarks ", -1)),
+                n("p", Pe, m(r.getSelectedEventDetails().remarks), 1)
+              ], 2)) : p("", !0),
+              r.getSelectedEventDetails() ? (l(), a("div", {
+                key: 2,
+                class: c(i.drawerSectionCardClass)
+              }, [
+                n("div", Oe, [
+                  t[11] || (t[11] = n("p", { class: "text-[11px] font-semibold uppercase tracking-wide ui-text-soft" }, " Documents ", -1)),
+                  n("span", Ye, m(r.getSelectedEventDocumentsCount()) + " file(s) ", 1)
+                ]),
+                r.getSelectedEventDocuments().length ? (l(), a("div", je, [
+                  (l(!0), a(h, null, f(r.getSelectedEventDocuments(), (s, o) => (l(), a("div", {
+                    key: s.doc_id || s.id || s.filename || o,
+                    class: "rounded-md border ui-border bg-(--ui-surface-muted) p-2.5"
+                  }, [
+                    n("p", We, m(s.filename || s.name || "Document"), 1),
+                    n("p", Ie, m(r.formatFileSize(s.file_size || s.size || 0)), 1),
+                    n("div", He, [
+                      i.drawerDocumentActions.view ? (l(), a("button", {
+                        key: 0,
+                        class: "rounded-md border ui-border px-2 py-1 text-xs ui-text hover:bg-(--ui-surface)",
+                        onClick: (g) => r.handleDocumentView(s)
+                      }, " View ", 8, Re)) : p("", !0),
+                      i.drawerDocumentActions.download ? (l(), a("button", {
+                        key: 1,
+                        class: "rounded-md border ui-border px-2 py-1 text-xs ui-text hover:bg-(--ui-surface)",
+                        onClick: (g) => r.handleDocumentDownload(s)
+                      }, " Download ", 8, Ge)) : p("", !0),
+                      i.drawerDocumentActions.delete ? (l(), a("button", {
+                        key: 2,
+                        class: "rounded-md border border-(--ui-danger) px-2 py-1 text-xs text-(--ui-danger) hover:bg-(--ui-danger-soft)",
+                        onClick: (g) => r.handleDocumentDelete(s)
+                      }, " Delete ", 8, Je)) : p("", !0)
+                    ])
+                  ]))), 128))
+                ])) : (l(), a("p", {
+                  key: 0,
+                  class: c(i.drawerEmptyDocumentsClass)
+                }, " No documents uploaded ", 2))
+              ], 2)) : p("", !0)
+            ])) : p("", !0)
+          ]),
+          _: 1
+        }, 8, ["modelValue", "title", "size", "onClose"])
+      ])
+    ])
+  ], 6);
+}
+const Xe = /* @__PURE__ */ W(G, [["render", Le]]);
+export {
+  Xe as default
+};