@vicacha-devs/strapi-plugin-bookings 0.0.0-stage → 1.0.0

package/dist/admin/App-ZlqOsILc.js

@@ -0,0 +1,371 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactRouterDom = require("react-router-dom");
+const designSystem = require("@strapi/design-system");
+const admin = require("@strapi/strapi/admin");
+const React = require("react");
+const reactIntl = require("react-intl");
+const index = require("./index.js");
+const getTranslation = require("./getTranslation-Cd0_4UtW.js");
+const EMPTY_STATS = {
+  totalBookings: 0,
+  confirmedBookings: 0,
+  pendingBookings: 0,
+  cancelledBookings: 0,
+  completedBookings: 0,
+  totalGuests: 0,
+  activeResources: 0
+};
+const CalendarPage = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  const navigate = reactRouterDom.useNavigate();
+  const { get, post, put } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  const isMountedRef = React.useRef(true);
+  React.useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  const t = React.useCallback(
+    (id, defaultMessage) => formatMessage({ id: getTranslation.getTranslation(id), defaultMessage }),
+    [formatMessage]
+  );
+  const [bookings, setBookings] = React.useState([]);
+  const [resources, setResources] = React.useState([]);
+  const [stats, setStats] = React.useState(EMPTY_STATS);
+  const [selectedResourceId, setSelectedResourceId] = React.useState("");
+  const [selectedStatus, setSelectedStatus] = React.useState("");
+  const [search, setSearch] = React.useState("");
+  const [debouncedSearch, setDebouncedSearch] = React.useState("");
+  const [selectedBooking, setSelectedBooking] = React.useState(
+    null
+  );
+  const [quickCreateStartIso, setQuickCreateStartIso] = React.useState(
+    null
+  );
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (isMountedRef.current) {
+        setDebouncedSearch(search);
+      }
+    }, 250);
+    return () => clearTimeout(timer);
+  }, [search]);
+  const fetchBookingsData = React.useCallback(async () => {
+    try {
+      const params = new URLSearchParams();
+      if (selectedResourceId) {
+        params.set("resourceDocumentId", selectedResourceId);
+      }
+      if (selectedStatus) {
+        params.set("status", selectedStatus);
+      }
+      if (debouncedSearch.trim()) {
+        params.set("search", debouncedSearch.trim());
+      }
+      const res = await get(`/${index.PLUGIN_ID}/calendar?${params.toString()}`);
+      if (!isMountedRef.current) return;
+      const payload = res.data?.data;
+      if (payload) {
+        const nextBookings = payload.bookings ?? [];
+        setBookings(nextBookings);
+        setResources(payload.resources ?? []);
+        setStats(payload.stats ?? EMPTY_STATS);
+        setSelectedBooking((prev) => {
+          if (!prev) return null;
+          return nextBookings.find((b) => b.documentId === prev.documentId) ?? null;
+        });
+      }
+    } catch {
+      if (!isMountedRef.current) return;
+      toggleNotification({
+        type: "danger",
+        message: t("notifications.loadError", "Failed to load bookings")
+      });
+    }
+  }, [
+    get,
+    selectedResourceId,
+    selectedStatus,
+    debouncedSearch,
+    toggleNotification,
+    t
+  ]);
+  React.useEffect(() => {
+    void fetchBookingsData();
+  }, [fetchBookingsData]);
+  const handleUpdateStatus = async (documentId, status, assignedHost, internalNotes) => {
+    try {
+      const res = await put(
+        `/${index.PLUGIN_ID}/bookings/${documentId}/status`,
+        {
+          status,
+          assignedHost,
+          internalNotes
+        }
+      );
+      if (isMountedRef.current && res.data?.data) {
+        setSelectedBooking(res.data.data);
+      }
+      toggleNotification({
+        type: "success",
+        message: t("notifications.updated", "Booking updated")
+      });
+      await fetchBookingsData();
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: t("notifications.updateError", "Failed to update booking")
+      });
+    }
+  };
+  const handleCreateBooking = async (payload) => {
+    try {
+      await post(`/${index.PLUGIN_ID}/bookings`, payload);
+      toggleNotification({
+        type: "success",
+        message: t("notifications.created", "Booking created")
+      });
+      await fetchBookingsData();
+    } catch (err) {
+      toggleNotification({
+        type: "danger",
+        message: t("notifications.createError", "Failed to create booking")
+      });
+      throw err;
+    }
+  };
+  const handleExportCsv = async () => {
+    try {
+      const params = new URLSearchParams();
+      if (selectedResourceId) {
+        params.set("resourceDocumentId", selectedResourceId);
+      }
+      if (selectedStatus) {
+        params.set("status", selectedStatus);
+      }
+      if (debouncedSearch.trim()) {
+        params.set("search", debouncedSearch.trim());
+      }
+      const qs = params.toString();
+      const url = qs ? `/${index.PLUGIN_ID}/export.csv?${qs}` : `/${index.PLUGIN_ID}/export.csv`;
+      const res = await get(url);
+      const csvText = typeof res.data === "string" ? res.data : String(res.data ?? "");
+      const blob = new Blob([csvText], { type: "text/csv;charset=utf-8;" });
+      const objectUrl = URL.createObjectURL(blob);
+      try {
+        const link = document.createElement("a");
+        link.href = objectUrl;
+        link.setAttribute("download", "bookings.csv");
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      } finally {
+        URL.revokeObjectURL(objectUrl);
+      }
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: t("notifications.exportError", "Failed to export CSV")
+      });
+    }
+  };
+  const handleOpenInContentManager = (booking) => {
+    const uid = booking.sourceCollection || "plugin::bookings.booking";
+    navigate(`/content-manager/collection-types/${uid}/${booking.documentId}`);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Root, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      admin.Layouts.Header,
+      {
+        title: t("plugin.title", "Bookings & Slot Availability"),
+        subtitle: t(
+          "plugin.subtitle",
+          "Manage bookable resources, time-slot availability, staff assignment, and reservation approvals. Schedule views are unified in Calendar."
+        ),
+        primaryAction: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              variant: "secondary",
+              onClick: () => navigate("/plugins/calendar?source=bookings"),
+              children: t("actions.openUnifiedCalendar", "Open in Calendar")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              variant: "tertiary",
+              onClick: () => navigate(`/settings/${index.PLUGIN_ID}`),
+              children: t("actions.settings", "Settings")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", onClick: () => void handleExportCsv(), children: t("actions.exportCsv", "Export CSV") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              variant: "default",
+              onClick: () => setQuickCreateStartIso((/* @__PURE__ */ new Date()).toISOString().slice(0, 10)),
+              children: t("actions.newBooking", "New Booking")
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Content, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 5, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { gap: 4, wrap: "wrap", children: [
+          {
+            label: t("stats.total", "Total Bookings"),
+            value: stats.totalBookings,
+            badge: "neutral100"
+          },
+          {
+            label: t("stats.confirmed", "Confirmed"),
+            value: stats.confirmedBookings,
+            badge: "success100"
+          },
+          {
+            label: t("stats.pending", "Pending Approval"),
+            value: stats.pendingBookings,
+            badge: "warning100"
+          },
+          {
+            label: t("stats.guests", "Total Guests / Seats"),
+            value: stats.totalGuests,
+            badge: "primary100"
+          },
+          {
+            label: t("stats.resources", "Active Resources"),
+            value: stats.activeResources,
+            badge: "secondary100"
+          }
+        ].map((card) => /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Box,
+          {
+            background: "neutral0",
+            hasRadius: true,
+            shadow: "tableShadow",
+            padding: 4,
+            style: { flex: "1 1 180px" },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: card.label }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: card.badge, children: card.value })
+            ] })
+          },
+          card.label
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", hasRadius: true, shadow: "tableShadow", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+              gap: 12
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("filters.resource", "Bookable Resource") }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  designSystem.SingleSelect,
+                  {
+                    placeholder: t("placeholder.all_resources", "All Resources"),
+                    value: selectedResourceId || "all",
+                    onChange: (val) => setSelectedResourceId(
+                      String(val) === "all" ? "" : String(val)
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "all", children: t("filters.allResources", "All Resources") }),
+                      resources.map((res) => /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.SingleSelectOption,
+                        {
+                          value: res.documentId,
+                          children: res.name
+                        },
+                        res.documentId
+                      ))
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("filters.status", "Booking Status") }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  designSystem.SingleSelect,
+                  {
+                    placeholder: t("placeholder.all_statuses", "All Statuses"),
+                    value: selectedStatus || "all",
+                    onChange: (val) => setSelectedStatus(String(val) === "all" ? "" : String(val)),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "all", children: t("filters.allStatuses", "All Statuses") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "pending", children: t("page.ui.pending", "PENDING") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "confirmed", children: t("page.ui.confirmed", "CONFIRMED") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "completed", children: t("page.ui.completed", "COMPLETED") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "cancelled", children: t("page.ui.cancelled", "CANCELLED") }),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "no_show", children: t("page.ui.no_show", "NO SHOW") })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("filters.search", "Search Reservations") }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.TextInput,
+                  {
+                    placeholder: t(
+                      "filters.searchPlaceholder",
+                      "Code, customer, host, org..."
+                    ),
+                    value: search,
+                    onChange: (e) => setSearch(e.target.value)
+                  }
+                )
+              ] })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, alignItems: "flex-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            index.BookingsGridCanvas,
+            {
+              t,
+              bookings,
+              onSelectBooking: (b) => setSelectedBooking(b)
+            }
+          ) }),
+          selectedBooking && /* @__PURE__ */ jsxRuntime.jsx(
+            index.BookingSidePanel,
+            {
+              t,
+              booking: selectedBooking,
+              onClose: () => setSelectedBooking(null),
+              onUpdateStatus: handleUpdateStatus,
+              onOpenInContentManager: handleOpenInContentManager
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        index.QuickCreateBookingModal,
+        {
+          t,
+          isOpen: Boolean(quickCreateStartIso),
+          initialStartIso: quickCreateStartIso || (/* @__PURE__ */ new Date()).toISOString().slice(0, 10),
+          resources,
+          onClose: () => setQuickCreateStartIso(null),
+          onSubmit: handleCreateBooking
+        }
+      )
+    ] })
+  ] });
+};
+const App = () => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(CalendarPage, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "*", element: /* @__PURE__ */ jsxRuntime.jsx(CalendarPage, {}) })
+  ] });
+};
+exports.App = App;