@bagdja/kumpul 1.0.3 → 1.2.0

package/README.md

@@ -15,11 +15,38 @@ direction and notes about the prototype's sample data and host-managed pages.
 ## Contract
 
 - Package: `@bagdja/kumpul`
-- Version: `1.0.3`
+- Version: `1.1.0`
 - Template slug: `kumpul`
 - `manifestVersion`: `1`, `rendererApiVersion`: `1`
 - Entry point: `dist/server.cjs` (wajib) dan `dist/client.js` (JavaScript browser), dinyatakan di `manifest.entry`
 - Halaman contoh untuk website baru: `manifest.defaultPages` (Beranda, Katalog Gathering, Cara Kerja, Tentang)
+- Halaman sistem milik template (`manifest.pageOverrides`): header, keranjang, transaksi, detail transaksi, tagihan, invoice, kalender, rencana gathering
+
+## Halaman sistem (`props.page`)
+
+Sejak `1.1.0`, data halaman sistem dibaca dari `props.page` sesuai kontrak
+Bagdja (`bagdja-website-template-runtime/contract/page-contract.d.ts`), bukan
+lagi dari `props.preview*`. `src/page-adapter.cjs` adalah satu-satunya tempat
+yang mengenal bentuk kontrak itu dan menerjemahkannya ke model internal
+renderer. Data yang sama dipakai di preview lokal, preview platform, dan
+website seller; `isPreview` hanya mengatur catatan "Preview desainer" dan
+simulator rencana gathering.
+
+- Tanggal: ISO 8601 dengan offset timezone; uang: bilangan bulat rupiah.
+- Template tidak menerima email/token/ID internal. Identitas aksi = `key` opaque.
+- Aksi memakai atribut bridge host Bagdja — bootstrap di iframe menangani
+  klik, template tidak memanggil API:
+  `data-bagdja-intent` (`cart.set_quantity` / `cart.remove` / `cart.checkout` /
+  `invoice.pay` / `gathering.respond`) + `data-bagdja-key`,
+  `data-bagdja-quantity` (jumlah tujuan), `data-bagdja-selectable` pada checkbox
+  item yang ikut checkout, dan `data-bagdja-action="order.retry_payment"` untuk
+  aksi transaksi. Tombol baru aktif bila host menyediakan bridge
+  (`props.bridgeVersion`); setelah aksi berhasil host memuat ulang halaman atau
+  mengarahkan ke pembayaran.
+- `props.headerOnly === true` → hanya header Kumpul (halaman yang isinya masih
+  dikelola Bagdja, mis. chat dan checkout).
+- Fixture halaman sistem di `fixtures/` memakai data yang sama dengan fixture
+  standar Bagdja, dengan identitas Kumpul.
 - Export: `render(props)`, returning a React element
 - React: supplied by the Bagdja runtime
 

package/dist/client.js

@@ -2120,6 +2120,20 @@
             window.addEventListener("resize", updateHeaderHeight);
           }
         }
+        document.querySelectorAll("[data-plan-live]").forEach((workflow) => {
+          const tabs = Array.from(workflow.querySelectorAll("[data-plan-step-tab]"));
+          const panels = Array.from(workflow.querySelectorAll("[data-plan-step-panel]"));
+          tabs.forEach((tab) => {
+            tab.addEventListener("click", () => {
+              if (tab.disabled) return;
+              const step = tab.dataset.planStepTab;
+              tabs.forEach((item) => item.setAttribute("aria-pressed", String(item === tab)));
+              panels.forEach((panel) => {
+                panel.hidden = panel.dataset.planStepPanel !== step;
+              });
+            });
+          });
+        });
         document.querySelectorAll("[data-calendar-page]").forEach((calendar) => {
           const tabs = Array.from(calendar.querySelectorAll("[data-calendar-tab]"));
           const panels = Array.from(calendar.querySelectorAll("[data-calendar-panel]"));

package/dist/server.cjs

@@ -1,5 +1,321 @@
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+
+// src/page-adapter.cjs
+var require_page_adapter = __commonJS({
+  "src/page-adapter.cjs"(exports2, module2) {
+    var PAGE_SLUGS = {
+      cart: "cart",
+      orders: "orders",
+      order_detail: "transaction-detail",
+      tagihan: "tagihan",
+      invoice_detail: "invoice-detail",
+      calendar: "calendar",
+      gathering_plan: "plan-detail"
+    };
+    function list2(value) {
+      return Array.isArray(value) ? value : [];
+    }
+    function gatheringPaymentStatus(status) {
+      if (status === "PAID") return "PAID";
+      if (status === "REFUNDED") return "REFUNDED";
+      return "PENDING_PAYMENT";
+    }
+    function adaptCart(page) {
+      return list2(page.items).map((item) => ({
+        id: item.key,
+        key: item.key,
+        kind: item.kind,
+        name: item.name,
+        category: item.category,
+        subtitle: item.subtitle,
+        variant: item.variant,
+        emoji: item.emoji,
+        imageUrl: item.imageUrl,
+        price: item.unitPrice,
+        quantity: item.quantity,
+        quantity_editable: item.quantityEditable !== false,
+        max_quantity: item.maxQuantity,
+        can_checkout: item.checkoutable !== false,
+        blocked_reason: item.blockedReason,
+        detail_href: item.detailHref
+      }));
+    }
+    function adaptTransactions(page) {
+      return list2(page.transactions).map((transaction) => ({
+        id: transaction.key,
+        key: transaction.key,
+        ref_number: transaction.reference,
+        status: transaction.status,
+        status_label: transaction.statusLabel,
+        created_at: transaction.createdAt,
+        total_amount: transaction.totalAmount,
+        item_count: transaction.itemCount,
+        has_outstanding_invoice: Boolean(transaction.outstanding),
+        outstanding_label: transaction.outstanding ? transaction.outstanding.label : void 0,
+        items: list2(transaction.itemNames).map((name) => ({ product_name: name })),
+        detail_href: transaction.detailHref
+      }));
+    }
+    function adaptTransaction(page) {
+      const transaction = page.transaction || {};
+      const shipping = transaction.shipping || {};
+      return {
+        id: transaction.key,
+        key: transaction.key,
+        ref_number: transaction.reference,
+        status: transaction.status,
+        status_label: transaction.statusLabel,
+        status_message: transaction.statusMessage,
+        created_at: transaction.createdAt,
+        total_amount: transaction.totalAmount,
+        subtotal_amount: transaction.subtotalAmount,
+        payment_mode: transaction.paymentMode,
+        payment_mode_label: transaction.paymentModeLabel,
+        shipping_cost: transaction.shippingAmount,
+        recipient_name: shipping.recipient,
+        phone: shipping.phone,
+        address: shipping.address,
+        metadata: {
+          shipping: {
+            courier_service_name: shipping.courierLabel || transaction.courierLabel,
+            destination_area_name: shipping.areaLabel
+          }
+        },
+        items: list2(transaction.items).map((item) => ({
+          id: item.key,
+          key: item.key,
+          quantity: item.quantity,
+          unit_price: item.unitPrice,
+          total_amount: item.totalAmount,
+          product_name: item.name,
+          emoji: item.emoji,
+          detail_href: item.detailHref
+        }))
+      };
+    }
+    function adaptInvoices(page) {
+      return list2(page.invoices).map((invoice) => {
+        if (invoice.kind === "gathering") {
+          return {
+            id: invoice.key,
+            key: invoice.key,
+            kind: "gathering",
+            invoice_id: invoice.label,
+            gathering_title: invoice.title,
+            amount: invoice.amount,
+            invoice_issued_at: invoice.status === "SCHEDULED" ? null : invoice.createdAt,
+            invoice_status: invoice.status === "SCHEDULED" ? "SCHEDULED" : "ISSUED",
+            payment_status: gatheringPaymentStatus(invoice.status),
+            payment_deadline: invoice.dueAt,
+            can_pay: invoice.canPay === true,
+            detail_href: invoice.detailHref,
+            transaction_href: invoice.transactionHref
+          };
+        }
+        return {
+          id: invoice.key,
+          key: invoice.key,
+          kind: "termin",
+          sequence: invoice.sequence,
+          productName: invoice.title,
+          label: invoice.label,
+          amount: invoice.amount,
+          status: invoice.status,
+          anchorStepName: invoice.stepLabel,
+          createdAt: invoice.createdAt,
+          dueDate: invoice.dueAt,
+          can_pay: invoice.canPay === true,
+          detail_href: invoice.detailHref,
+          transaction_href: invoice.transactionHref
+        };
+      });
+    }
+    function adaptInvoice(page) {
+      const invoice = page.invoice || {};
+      return {
+        key: invoice.key,
+        invoice_id: invoice.number,
+        plan_number: invoice.planNumber,
+        gathering_title: invoice.title,
+        attendee_name: invoice.attendeeName,
+        initiator_name: invoice.initiatorName,
+        amount: invoice.amount,
+        currency: page.currency,
+        payment_status: invoice.status === "PAID" || invoice.status === "REFUNDED" ? invoice.status : "UNPAID",
+        payment_open: page.canPay === true,
+        login_required: page.loginRequired === true,
+        payment_deadline: invoice.dueAt,
+        event_date: invoice.eventAt
+      };
+    }
+    function adaptPlan(page) {
+      const plan = page.plan || {};
+      const occurrence = plan.occurrence || {};
+      const options = list2(occurrence.options);
+      return {
+        id: plan.key,
+        key: plan.key,
+        plan_number: plan.planNumber,
+        title: plan.title,
+        status: plan.status,
+        status_label: plan.statusLabel,
+        workflow_step: plan.workflowStep,
+        workflow_step_label: plan.workflowStepLabel,
+        invite_policy: plan.invitePolicy,
+        can_cancel: plan.canCancel === true,
+        public_invitation_href: plan.publicInvitationHref,
+        occurrence: {
+          status: occurrence.status,
+          status_label: occurrence.statusLabel,
+          price_per_seat: occurrence.seatPrice,
+          currency: page.currency,
+          deposit_amount_per_seat: occurrence.depositPerSeatAmount,
+          min_attendees: occurrence.minAttendees,
+          max_attendees: occurrence.maxAttendees,
+          rsvp_close_at: occurrence.rsvpCloseAt,
+          payment_deadline: occurrence.paymentDueAt,
+          final_schedule: occurrence.scheduledAt,
+          final_location: occurrence.location,
+          option_groups_snapshot: options.map((option) => ({
+            product_option_id: option.key,
+            option_group_key: option.group,
+            option_key: option.key,
+            label: option.label,
+            description: option.description,
+            venue_location: option.venue,
+            is_final_selection: option.isFinal === true
+          })),
+          opened_option_ids_snapshot: options.filter((option) => option.isOpen).map((option) => option.key),
+          voting_results: Object.fromEntries(
+            options.filter((option) => typeof option.votes === "number").map((option) => [option.key, option.votes])
+          )
+        }
+      };
+    }
+    function adaptInvitations(page) {
+      return list2(page.invitations).map((invitation) => ({
+        key: invitation.key,
+        name: invitation.name,
+        status: invitation.status,
+        status_label: invitation.statusLabel,
+        channel: invitation.channel,
+        invite_href: invitation.inviteHref,
+        can_revoke: invitation.canRevoke === true
+      }));
+    }
+    function adaptRegistrations(page) {
+      return list2(page.registrations).map((registration) => ({
+        key: registration.key,
+        name: registration.name,
+        registration_status: registration.registrationStatus,
+        payment_status: registration.paymentStatus,
+        status_label: registration.statusLabel,
+        invoice_amount: registration.invoiceAmount,
+        selected_options: list2(registration.selectedOptions),
+        rejection_message: registration.rejectionMessage,
+        can_reject: registration.canReject === true,
+        can_checkout: registration.canCheckout === true,
+        can_cancel_checkout: registration.canCancelCheckout === true,
+        can_refund: registration.canRefund === true
+      }));
+    }
+    function adaptOperation(page) {
+      const operation = page.operation;
+      if (!operation || typeof operation !== "object") return null;
+      return {
+        kind: operation.kind,
+        status: operation.status,
+        label: operation.label,
+        processed: operation.processedCount,
+        total: operation.totalCount,
+        failed: operation.failedCount,
+        message: operation.message
+      };
+    }
+    function adaptCalendar(page) {
+      return {
+        title: "Kalender Acara",
+        month: page.initialMonth,
+        plans: list2(page.plans).map((plan) => ({
+          id: plan.key,
+          key: plan.key,
+          title: plan.title,
+          plan_number: plan.planNumber,
+          status: plan.status,
+          workflow_step_label: plan.stepLabel,
+          event_date: plan.eventAt,
+          payment_deadline: plan.paymentDueAt,
+          min_attendees: plan.minAttendees,
+          max_attendees: plan.maxAttendees,
+          detail_href: plan.detailHref
+        })),
+        invitations: list2(page.invitations).map((invitation) => ({
+          id: invitation.key,
+          key: invitation.key,
+          gathering_title: invitation.title,
+          plan_number: invitation.planNumber,
+          initiator_name: invitation.initiatorName,
+          event_date: invitation.eventAt,
+          event_location: invitation.location,
+          is_new: invitation.isNew === true,
+          needs_action: invitation.needsAction === true,
+          response: invitation.response,
+          action_label: invitation.responseLabel,
+          detail_href: invitation.detailHref
+        }))
+      };
+    }
+    function adaptPage2(page) {
+      if (!page || typeof page !== "object" || !PAGE_SLUGS[page.type]) return null;
+      const base = {
+        type: page.type,
+        activePageSlug: PAGE_SLUGS[page.type],
+        actions: list2(page.actions),
+        timezone: typeof page.timezone === "string" ? page.timezone : "Asia/Jakarta"
+      };
+      switch (page.type) {
+        case "cart":
+          return { ...base, cart: adaptCart(page) };
+        case "orders":
+          return { ...base, transactions: adaptTransactions(page) };
+        case "order_detail":
+          return { ...base, transaction: adaptTransaction(page) };
+        case "tagihan":
+          return { ...base, invoices: adaptInvoices(page) };
+        case "invoice_detail":
+          return { ...base, invoice: adaptInvoice(page) };
+        case "calendar":
+          return { ...base, calendar: adaptCalendar(page) };
+        case "gathering_plan":
+          return {
+            ...base,
+            plan: adaptPlan(page),
+            // Keputusan E3: tanpa email/kontak peserta.
+            invitees: list2(page.invitees).map((invitee) => ({
+              name: invitee.name,
+              rsvp_status: invitee.rsvpStatus,
+              rsvp_label: invitee.rsvpLabel
+            })),
+            // Kontrak v2: data pengelolaan initiator (tanpa kontak peserta).
+            invitations: adaptInvitations(page),
+            registrations: adaptRegistrations(page),
+            operation: adaptOperation(page),
+            viewerRole: page.viewerRole
+          };
+        default:
+          return null;
+      }
+    }
+    module2.exports = { adaptPage: adaptPage2, PAGE_SLUGS };
+  }
+});
+
 // src/server.cjs
 var React = require("react");
+var { adaptPage } = require_page_adapter();
 var h = React.createElement;
 var defaultColors = {
   background: "#F0F7F8",
@@ -15,6 +331,12 @@ var defaultColors = {
 function text(value, fallback = "") {
   return typeof value === "string" && value.trim() ? value : fallback;
 }
+function intentEnabled(props, action) {
+  return Boolean(props.bridgeVersion) && list(props.kumpulPage && props.kumpulPage.actions).includes(action);
+}
+function intentAttributes(action, key, extra = {}) {
+  return { "data-bagdja-intent": action, ...key ? { "data-bagdja-key": key } : {}, ...extra };
+}
 function list(value) {
   return Array.isArray(value) ? value : [];
 }
@@ -47,7 +369,9 @@ function billingStatus(invoice) {
   return {
     SCHEDULED: "scheduled",
     ISSUED: "issued",
+    OVERDUE: "issued",
     PAID: "paid",
+    REFUNDED: "refunded",
     CANCELLED: "cancelled"
   }[invoice.status] || "scheduled";
 }
@@ -84,7 +408,7 @@ var transactionFilters = [
   ["cancelled", "Dibatalkan"]
 ];
 function CartSection({ props }) {
-  const cartItems = props.isPreview === true ? list(props.previewCart) : [];
+  const cartItems = list(props.kumpulPage && props.kumpulPage.cart);
   const displayCount = cartItems.filter((item) => item.kind !== "gathering_plan").reduce((count, item) => count + (Number(item.quantity) || 1), 0);
   const selectableCount = cartItems.filter((item) => item.can_checkout !== false && item.kind !== "gathering_plan").length;
   return h(
@@ -149,6 +473,7 @@ function CartSection({ props }) {
                     defaultChecked: canCheckout,
                     disabled: !canCheckout,
                     "data-cart-select": "",
+                    ...canCheckout && item.key ? { "data-bagdja-selectable": "", "data-bagdja-key": item.key } : {},
                     "aria-label": canCheckout ? `Pilih ${text(item.name, "item keranjang")}` : `${text(item.name, "Item")} belum bisa checkout`
                   })
                 ),
@@ -173,19 +498,23 @@ function CartSection({ props }) {
                       type: "button",
                       "aria-label": `Kurangi jumlah ${text(item.name, "item")}`,
                       "data-cart-quantity-decrease": "",
-                      disabled: quantity <= 1
+                      disabled: quantity <= 1 || item.quantity_editable === false,
+                      ...item.key && quantity > 1 ? intentAttributes("cart.set_quantity", item.key, { "data-bagdja-quantity": String(quantity - 1) }) : {}
                     }, "\u2212"),
                     h("span", { "data-cart-quantity": "" }, String(quantity)),
                     h("button", {
                       type: "button",
                       "aria-label": `Tambah jumlah ${text(item.name, "item")}`,
-                      "data-cart-quantity-increase": ""
+                      "data-cart-quantity-increase": "",
+                      disabled: item.quantity_editable === false || Number(item.max_quantity) > 0 && quantity >= Number(item.max_quantity),
+                      ...item.key ? intentAttributes("cart.set_quantity", item.key, { "data-bagdja-quantity": String(quantity + 1) }) : {}
                     }, "+")
                   ) : null,
                   h("button", {
                     type: "button",
                     className: "kumpul-cart-remove",
                     "data-cart-remove": "",
+                    ...item.key ? intentAttributes("cart.remove", item.key) : {},
                     "aria-label": `Hapus ${text(item.name, "item")}`
                   }, "Hapus")
                 )
@@ -209,7 +538,7 @@ function CartSection({ props }) {
             h("span", null, "Total sementara"),
             h("strong", { "data-cart-selected-total": "" }, "Rp 0")
           ),
-          h("button", { type: "button", className: "kumpul-cart-checkout", disabled: true }, "Lanjut ke Checkout"),
+          h("button", { type: "button", className: "kumpul-cart-checkout", disabled: !intentEnabled(props, "cart.checkout"), ...intentAttributes("cart.checkout") }, "Lanjut ke Checkout"),
           h("p", null, "Item yang belum dapat dibayar akan tetap tersimpan di keranjang.")
         )
       ),
@@ -243,7 +572,7 @@ function transactionStatus(transaction) {
   };
 }
 function TransactionsSection({ props }) {
-  const transactions = props.isPreview === true ? list(props.previewTransactions) : [];
+  const transactions = list(props.kumpulPage && props.kumpulPage.transactions);
   const counts = Object.fromEntries(transactionFilters.map(([key]) => [
     key,
     key === "all" ? transactions.length : transactions.filter((transaction) => transactionStatus(transaction).filter === key).length
@@ -343,9 +672,9 @@ function TransactionsSection({ props }) {
           h(
             "div",
             { className: "kumpul-transaction-actions" },
-            transaction.status === "PENDING_PAYMENT" ? h("button", { type: "button", disabled: true }, "Lanjutkan Pembayaran") : null,
-            h("button", { type: "button", disabled: true }, "Detail Transaksi"),
-            h("button", { type: "button", disabled: true }, "Chat Order")
+            transaction.status === "PENDING_PAYMENT" && transaction.detail_href ? h("a", { className: "kumpul-transaction-action-link", href: transaction.detail_href }, "Lanjutkan Pembayaran") : null,
+            transaction.detail_href ? h("a", { className: "kumpul-transaction-action-link", href: transaction.detail_href }, "Detail Transaksi") : h("button", { type: "button", disabled: true }, "Detail Transaksi"),
+            props.auth && props.auth.chatHref ? h("a", { className: "kumpul-transaction-action-link", href: props.auth.chatHref }, "Chat Order") : h("button", { type: "button", disabled: true }, "Chat Order")
           )
         );
       }),
@@ -372,7 +701,8 @@ function invoiceDetailStatus(invoice) {
   };
 }
 function InvoiceDetailSection({ props }) {
-  if (props.isPreview !== true) {
+  const invoice = props.kumpulPage && props.kumpulPage.invoice;
+  if (!invoice) {
     return h(
       "section",
       { className: "kumpul-detail-page", "data-invoice-detail": "" },
@@ -380,7 +710,6 @@ function InvoiceDetailSection({ props }) {
       h("p", null, "Data tagihan dan status pembayaran dikelola oleh host Bagdja.")
     );
   }
-  const invoice = props.isPreview === true ? props.previewInvoice || {} : {};
   const status = invoiceDetailStatus(invoice);
   const amount = new Intl.NumberFormat("id-ID", {
     style: "currency",
@@ -454,17 +783,21 @@ function InvoiceDetailSection({ props }) {
           h("h3", null, "Mengapa perlu login untuk membayar?"),
           h("p", null, "Akun Bagdja menghubungkan pembayaran escrow dengan peserta. Gunakan email yang sama dengan email saat RSVP. Initiator juga dapat membayar beberapa tagihan dari halaman gathering.")
         ) : null,
-        !isPaid ? h(
+        !isPaid && paymentOpen && invoice.login_required && props.auth && props.auth.loginHref ? h("a", { className: "kumpul-detail-pay-link", href: props.auth.loginHref }, "Login untuk membayar") : !isPaid ? h(
           "button",
-          { type: "button", disabled: props.isPreview === true || !paymentOpen },
-          paymentOpen ? isPending ? "Lanjutkan pembayaran" : "Login untuk membayar" : "Pembayaran belum dibuka"
+          {
+            type: "button",
+            disabled: !paymentOpen || !intentEnabled(props, "invoice.pay"),
+            ...intentAttributes("invoice.pay", invoice.key)
+          },
+          paymentOpen ? isPending ? "Lanjutkan pembayaran" : "Bayar sekarang" : "Pembayaran belum dibuka"
         ) : null
       )
     )
   );
 }
 function TransactionDetailSection({ props, section }) {
-  const transaction = props.isPreview === true ? props.previewTransaction || {} : section?.content?.transaction || {};
+  const transaction = props.kumpulPage && props.kumpulPage.transaction || section && section.content && section.content.transaction || {};
   const items = list(transaction.items);
   const status = transactionStatus(transaction);
   const subtotal = items.reduce((sum, item) => sum + (Number(item.total_amount) || 0), 0);
@@ -574,7 +907,8 @@ function TransactionDetailSection({ props, section }) {
         transaction.status === "PENDING_PAYMENT" || transaction.status === "PENDING" ? h(
           React.Fragment,
           null,
-          h("button", { type: "button", disabled: true }, "Lanjutkan Pembayaran"),
+          // order.* memakai jalur aksi transaksi host yang sudah ada (data-bagdja-action).
+          h("button", { type: "button", disabled: !intentEnabled(props, "order.retry_payment"), "data-bagdja-action": "order.retry_payment" }, "Lanjutkan Pembayaran"),
           transaction.payment_mode === "ESCROW" ? h("p", { className: "kumpul-detail-payment-note" }, "Dana escrow disimpan sampai proses konfirmasi pesanan selesai.") : null
         ) : h(
           "p",
@@ -605,7 +939,7 @@ function GatheringPlanSimulator({ plan, props }) {
   const occurrence = plan.occurrence || {};
   const options = list(occurrence.option_groups_snapshot);
   const openedIds = new Set(list(occurrence.opened_option_ids_snapshot));
-  const invitees = list(props.previewPlanInvitees);
+  const invitees = list(props.kumpulPage && props.kumpulPage.invitees);
   const localDatePart = (value) => typeof value === "string" ? value.slice(0, 10) : "";
   const localTimePart = (value) => typeof value === "string" ? value.slice(11, 16) : "";
   return h(
@@ -886,10 +1220,399 @@ function GatheringPlanSimulator({ plan, props }) {
     )
   );
 }
+function jakartaInputValue(value) {
+  const time = typeof value === "string" ? Date.parse(value) : Number.NaN;
+  return Number.isFinite(time) ? new Date(time + 7 * 3600 * 1e3).toISOString().slice(0, 16) : "";
+}
+function planDateTime(value) {
+  const date = formatCalendarDate(value);
+  const time = formatCalendarTime(value);
+  return date ? `${date}${time ? ` \xB7 ${time} WIB` : ""}` : "Belum ditentukan";
+}
+var invitationChannels = {
+  email: "Email",
+  whatsapp: "WhatsApp",
+  email_whatsapp: "Email & WhatsApp",
+  public: "Tautan terbuka"
+};
+function PlanOperationNotice({ operation, kinds }) {
+  if (!operation || !kinds.includes(operation.kind)) return null;
+  const failed = operation.status === "FAILED";
+  return h(
+    "p",
+    { className: `kumpul-plan-live-operation${failed ? " is-failed" : ""}`, role: "status" },
+    h("strong", null, failed ? `${operation.label} gagal` : `${operation.label}\u2026`),
+    ` ${Number(operation.processed) || 0}/${Number(operation.total) || 0} diproses`,
+    Number(operation.failed) ? ` \xB7 ${operation.failed} gagal` : "",
+    operation.message ? ` \xB7 ${operation.message}` : "",
+    failed ? null : " \xB7 muat ulang halaman untuk melihat progres terbaru."
+  );
+}
+function PlanSummaryFields({ plan, openedOptions }) {
+  const occurrence = plan.occurrence || {};
+  return h(
+    "div",
+    null,
+    h(
+      "dl",
+      { className: "kumpul-detail-fields" },
+      h("div", null, h("dt", null, "Nama rencana"), h("dd", null, text(plan.title, "Rencana gathering"))),
+      h("div", null, h("dt", null, "Akses peserta"), h("dd", null, plan.invite_policy === "INVITE_ONLY" ? "Khusus undangan" : "Terbuka")),
+      h("div", null, h("dt", null, "Batas reservasi"), h("dd", null, planDateTime(occurrence.rsvp_close_at))),
+      h("div", null, h("dt", null, "Batas pembayaran"), h("dd", null, planDateTime(occurrence.payment_deadline))),
+      h("div", null, h("dt", null, "Tanggal acara"), h("dd", null, planDateTime(occurrence.final_schedule))),
+      h("div", null, h("dt", null, "Pilihan dibuka"), h(
+        "dd",
+        null,
+        openedOptions.length ? openedOptions.map((option) => `${text(option.option_group_key, "Pilihan")} \xB7 ${text(option.label)}`).join(", ") : "Belum ada"
+      ))
+    )
+  );
+}
+function PlanPeopleList({ registrations, selectable, selectAction, props, rowActions }) {
+  if (!registrations.length) {
+    return h("p", { className: "kumpul-plan-sim-help" }, "Belum ada peserta yang mengonfirmasi kehadiran.");
+  }
+  return h(
+    "ul",
+    { className: "kumpul-plan-live-people" },
+    ...registrations.map((registration) => h(
+      "li",
+      { key: registration.key, className: "kumpul-plan-sim-person" },
+      h(
+        "div",
+        { className: "kumpul-plan-sim-person-heading" },
+        h(
+          "label",
+          { className: "kumpul-plan-live-person-name" },
+          selectable(registration) ? h("input", {
+            type: "checkbox",
+            "data-bagdja-selectable": "",
+            "data-bagdja-key": registration.key,
+            disabled: !intentEnabled(props, selectAction),
+            "aria-label": `Pilih ${text(registration.name, "peserta")}`
+          }) : null,
+          h("strong", null, text(registration.name, "Peserta"))
+        ),
+        h("span", null, [
+          registration.status_label,
+          list(registration.selected_options).join(", "),
+          Number.isFinite(Number(registration.invoice_amount)) ? formatCurrency(registration.invoice_amount) : ""
+        ].filter(Boolean).join(" \xB7 ")),
+        registration.rejection_message ? h("span", null, `Alasan: ${registration.rejection_message}`) : null
+      ),
+      rowActions ? h("div", { className: "kumpul-plan-live-row-actions" }, ...rowActions(registration)) : null
+    ))
+  );
+}
+function LivePlanWorkflow({ plan, props }) {
+  const page = props.kumpulPage || {};
+  const occurrence = plan.occurrence || {};
+  const options = list(occurrence.option_groups_snapshot);
+  const openedIds = new Set(list(occurrence.opened_option_ids_snapshot));
+  const openedOptions = options.filter((option) => openedIds.has(option.product_option_id));
+  const invitations = list(page.invitations);
+  const privateInvitations = invitations.filter((invitation) => invitation.channel !== "public");
+  const registrations = list(page.registrations);
+  const activeRegistrations = registrations.filter((registration) => registration.registration_status === "RSVP_CONFIRMED");
+  const paidRegistrations = activeRegistrations.filter((registration) => registration.payment_status === "PAID");
+  const operation = page.operation;
+  const stepIndex = gatheringWorkflowSteps.findIndex((step) => step.key === plan.workflow_step);
+  const finished = stepIndex < 0;
+  const currentIndex = finished ? gatheringWorkflowSteps.length - 1 : stepIndex;
+  const has = (action) => list(page.actions).includes(action);
+  const button = (action, label, extra = {}, className = "kumpul-plan-sim-primary") => h("button", {
+    type: "button",
+    className,
+    disabled: !intentEnabled(props, action),
+    ...intentAttributes(action, plan.key, extra)
+  }, label);
+  const minMax = `min. ${Number(occurrence.min_attendees) || 0} \xB7 maks. ${Number(occurrence.max_attendees) || 0}`;
+  const publicLink = plan.invite_policy === "OPEN" && plan.public_invitation_href ? h(
+    "p",
+    { className: "kumpul-plan-live-public" },
+    "Undangan terbuka: ",
+    h("a", { href: plan.public_invitation_href }, "Buka halaman undangan"),
+    " \u2014 bagikan tautan halaman tersebut ke calon peserta."
+  ) : null;
+  const planPanel = (editable) => editable && has("gathering.plan.save") ? h(
+    "div",
+    { "data-bagdja-scope": "" },
+    h("p", { className: "kumpul-plan-sim-help" }, "Tetapkan akses undangan, tenggat, tanggal acara, dan pilihan produk yang dibuka untuk peserta."),
+    h(
+      "div",
+      { className: "kumpul-plan-sim-form" },
+      h(
+        "label",
+        null,
+        "Nama rencana",
+        h("input", { type: "text", required: true, minLength: 3, maxLength: 255, defaultValue: text(plan.title), "data-bagdja-field": "title" })
+      ),
+      h(
+        "label",
+        null,
+        "Akses peserta",
+        h(
+          "select",
+          { defaultValue: plan.invite_policy === "INVITE_ONLY" ? "INVITE_ONLY" : "OPEN", "data-bagdja-field": "invitePolicy" },
+          h("option", { value: "OPEN" }, "Terbuka"),
+          h("option", { value: "INVITE_ONLY" }, "Khusus undangan")
+        )
+      )
+    ),
+    h(
+      "div",
+      { className: "kumpul-plan-sim-form kumpul-plan-live-dates" },
+      ...[
+        ["rsvpCloseAt", "Batas reservasi", occurrence.rsvp_close_at],
+        ["paymentDueAt", "Batas pembayaran", occurrence.payment_deadline],
+        ["scheduledAt", "Tanggal acara", occurrence.final_schedule]
+      ].map(([field, label, value]) => h(
+        "label",
+        { key: field },
+        `${label} (WIB)`,
+        h("input", { type: "datetime-local", defaultValue: jakartaInputValue(value), "data-bagdja-field": field })
+      ))
+    ),
+    h(
+      "fieldset",
+      { className: "kumpul-plan-sim-options" },
+      h("legend", null, "Pilihan dari produk yang dibuka"),
+      options.length ? options.map((option) => h(
+        "label",
+        { key: option.product_option_id, className: "kumpul-plan-sim-option" },
+        h("input", { type: "checkbox", value: option.product_option_id, defaultChecked: openedIds.has(option.product_option_id), "data-bagdja-field": "optionKeys" }),
+        h(
+          "span",
+          null,
+          h("strong", null, `${text(option.option_group_key, "Pilihan")} \xB7 ${text(option.label)}`),
+          option.venue_location || option.description ? h("small", null, [option.venue_location, option.description].filter(Boolean).join(" \xB7 ")) : null
+        )
+      )) : h("p", null, "Produk ini tidak memiliki pilihan.")
+    ),
+    h(
+      "div",
+      { className: "kumpul-plan-sim-actions" },
+      button("gathering.plan.save", "Simpan", {}, "kumpul-plan-sim-secondary"),
+      button("gathering.plan.save", "Submit & lanjut buat undangan", { "data-bagdja-submit": "true" })
+    )
+  ) : h(PlanSummaryFields, { plan, openedOptions });
+  const invitationsPanel = (editable) => h(
+    "div",
+    null,
+    h("p", { className: "kumpul-plan-sim-help" }, plan.invite_policy === "INVITE_ONLY" ? "Rencana khusus undangan: tambahkan calon peserta lewat email atau WhatsApp, lalu kirim undangan." : "Rencana terbuka: undangan publik dibuat saat undangan dikirim, lalu siapa pun dengan tautan bisa RSVP."),
+    publicLink,
+    editable && has("gathering.invitation.add") ? h(
+      "div",
+      { className: "kumpul-plan-sim-invite-form", "data-bagdja-scope": "" },
+      h("label", null, "Nama calon peserta", h("input", { type: "text", maxLength: 120, placeholder: "Nama peserta", "data-bagdja-field": "invitee.name" })),
+      h("label", null, "Email", h("input", { type: "email", maxLength: 254, placeholder: "nama@email.com", "data-bagdja-field": "invitee.email" })),
+      h("label", null, "WhatsApp", h("input", { type: "tel", maxLength: 20, placeholder: "+628123456789", "data-bagdja-field": "invitee.whatsapp" })),
+      button("gathering.invitation.add", "Tambah peserta", {}, "")
+    ) : null,
+    privateInvitations.length ? h(
+      "ul",
+      { className: "kumpul-plan-live-people" },
+      ...privateInvitations.map((invitation) => h(
+        "li",
+        { key: invitation.key, className: "kumpul-plan-sim-person" },
+        h(
+          "div",
+          { className: "kumpul-plan-sim-person-heading" },
+          h("strong", null, text(invitation.name, "Peserta")),
+          h("span", null, `${invitationChannels[invitation.channel] || "Undangan"} \xB7 ${text(invitation.status_label)}`)
+        ),
+        h(
+          "div",
+          { className: "kumpul-plan-live-row-actions" },
+          invitation.invite_href ? h("a", { href: invitation.invite_href }, "Lihat undangan") : null,
+          editable && invitation.can_revoke && has("gathering.invitation.revoke") ? h("button", {
+            type: "button",
+            disabled: !intentEnabled(props, "gathering.invitation.revoke"),
+            ...intentAttributes("gathering.invitation.revoke", plan.key, { "data-bagdja-target": invitation.key })
+          }, "Cabut") : null
+        )
+      ))
+    ) : plan.invite_policy === "INVITE_ONLY" ? h("p", { className: "kumpul-plan-sim-help" }, "Belum ada calon peserta.") : null,
+    h(PlanOperationNotice, { operation, kinds: ["INVITATION_DISPATCH", "INVITATION_REVOCATION"] }),
+    editable && has("gathering.invitations.submit") ? h("div", { className: "kumpul-plan-sim-actions" }, button("gathering.invitations.submit", "Kirim undangan")) : null
+  );
+  const confirmationPanel = (editable) => {
+    const canReject = editable && has("gathering.registrations.reject");
+    return h(
+      "div",
+      { "data-bagdja-scope": "" },
+      h("p", { className: "kumpul-plan-sim-help" }, `Peserta hadir ${activeRegistrations.length} (${minMax}). Jumlah harus memenuhi batas produk sebelum RSVP ditutup.`),
+      editable ? publicLink : null,
+      h(PlanPeopleList, {
+        registrations,
+        props,
+        selectAction: "gathering.registrations.reject",
+        selectable: (registration) => canReject && registration.can_reject
+      }),
+      canReject ? h(
+        "label",
+        { className: "kumpul-plan-live-reason" },
+        "Alasan penolakan untuk peserta terpilih",
+        h("textarea", { rows: 2, maxLength: 2e3, "data-bagdja-field": "message" })
+      ) : null,
+      editable && (canReject || has("gathering.reservations.confirm")) ? h(
+        "div",
+        { className: "kumpul-plan-sim-actions" },
+        canReject ? button("gathering.registrations.reject", "Tolak peserta terpilih", {}, "kumpul-plan-sim-secondary") : null,
+        has("gathering.reservations.confirm") ? button("gathering.reservations.confirm", "Tutup RSVP & buka pembayaran") : null
+      ) : null
+    );
+  };
+  const paymentPanel = (editable) => {
+    const canCheckout = editable && has("gathering.registrations.checkout");
+    const groups = [...new Set(openedOptions.map((option) => text(option.option_group_key, "Pilihan")))];
+    const deposit = Number(occurrence.deposit_amount_per_seat) || 0;
+    return h(
+      "div",
+      { "data-bagdja-scope": "" },
+      h(
+        "p",
+        { className: "kumpul-plan-sim-help" },
+        `Peserta lunas ${paidRegistrations.length} dari ${activeRegistrations.length} (${minMax}).`,
+        deposit ? ` DP ${formatCurrency(deposit * paidRegistrations.length)} dicairkan ke penyelenggara saat acara dikonfirmasi.` : ""
+      ),
+      h(PlanOperationNotice, { operation, kinds: ["INVOICE_ISSUANCE"] }),
+      h(PlanPeopleList, {
+        registrations: activeRegistrations,
+        props,
+        selectAction: "gathering.registrations.checkout",
+        selectable: (registration) => canCheckout && registration.can_checkout,
+        rowActions: editable ? (registration) => [
+          registration.can_cancel_checkout && has("gathering.registration.cancel_checkout") ? h("button", {
+            type: "button",
+            key: "cancel",
+            disabled: !intentEnabled(props, "gathering.registration.cancel_checkout"),
+            ...intentAttributes("gathering.registration.cancel_checkout", plan.key, { "data-bagdja-target": registration.key })
+          }, "Batalkan checkout") : null,
+          registration.can_refund && has("gathering.registration.refund") ? h("button", {
+            type: "button",
+            key: "refund",
+            disabled: !intentEnabled(props, "gathering.registration.refund"),
+            ...intentAttributes("gathering.registration.refund", plan.key, { "data-bagdja-target": registration.key })
+          }, "Refund") : null
+        ] : null
+      }),
+      editable && (canCheckout || has("gathering.invoices.resend")) ? h(
+        "div",
+        { className: "kumpul-plan-sim-actions" },
+        has("gathering.invoices.resend") ? button("gathering.invoices.resend", "Kirim ulang invoice", {}, "kumpul-plan-sim-secondary") : null,
+        canCheckout ? button("gathering.registrations.checkout", "Bayarkan peserta terpilih", {}, "kumpul-plan-sim-secondary") : null
+      ) : null,
+      h(
+        "fieldset",
+        { className: "kumpul-plan-sim-options" },
+        h("legend", null, "Opsi final gathering"),
+        groups.length ? groups.map((group) => h(
+          "div",
+          { key: group, className: "kumpul-plan-sim-final-group" },
+          h("strong", null, group),
+          ...openedOptions.filter((option) => text(option.option_group_key, "Pilihan") === group).map((option) => {
+            const votes = Number((occurrence.voting_results || {})[option.product_option_id]);
+            const voteLabel = Number.isFinite(votes) ? ` \xB7 ${votes} suara` : "";
+            return editable && has("gathering.event.confirm") ? h(
+              "label",
+              { key: option.product_option_id },
+              h("input", {
+                type: "radio",
+                name: `kumpul-final-${group}`,
+                value: option.product_option_id,
+                defaultChecked: option.is_final_selection === true,
+                "data-bagdja-field": "optionKeys"
+              }),
+              `${text(option.label)}${voteLabel}`
+            ) : h(
+              "p",
+              { key: option.product_option_id },
+              `${text(option.label)}${option.is_final_selection ? " \xB7 opsi final" : ""}${voteLabel}`
+            );
+          })
+        )) : h("p", null, "Tidak ada pilihan yang perlu ditetapkan.")
+      ),
+      editable && has("gathering.event.confirm") ? h("div", { className: "kumpul-plan-sim-actions" }, button("gathering.event.confirm", "Konfirmasi acara")) : null
+    );
+  };
+  const panels = [planPanel, invitationsPanel, confirmationPanel, paymentPanel];
+  return h(
+    "section",
+    {
+      className: "kumpul-plan-simulator kumpul-plan-live",
+      "aria-label": "Tahapan gathering",
+      "data-plan-live": "",
+      "data-current-step": finished ? "DONE" : plan.workflow_step
+    },
+    h(
+      "div",
+      { className: "kumpul-plan-simulator-heading" },
+      h(
+        "div",
+        null,
+        h("p", { className: "kumpul-eyebrow" }, "Kelola rencana"),
+        h("h2", null, finished ? "Rencana selesai diproses" : `Tahap ${currentIndex + 1}: ${gatheringWorkflowSteps[currentIndex].label}`),
+        h("p", null, "Klik tahap sebelumnya untuk melihat ringkasan yang sudah diisi.")
+      )
+    ),
+    h(
+      "ol",
+      { className: "kumpul-plan-sim-steps", "aria-label": "Tahapan gathering" },
+      ...gatheringWorkflowSteps.map((step, index) => h(
+        "li",
+        {
+          key: step.key,
+          className: finished || index < currentIndex ? "is-complete" : index === currentIndex ? "is-current" : ""
+        },
+        h(
+          "button",
+          {
+            type: "button",
+            "data-plan-step-tab": step.key,
+            "aria-current": index === currentIndex ? "step" : void 0,
+            "aria-pressed": index === currentIndex ? "true" : "false",
+            disabled: index > currentIndex
+          },
+          h("span", null, finished || index < currentIndex ? "\u2713" : String(index + 1)),
+          h("span", null, step.label)
+        )
+      ))
+    ),
+    ...gatheringWorkflowSteps.map((step, index) => {
+      const editable = !finished && index === currentIndex;
+      return h(
+        "div",
+        {
+          key: step.key,
+          className: "kumpul-plan-sim-panel",
+          "data-plan-step-panel": step.key,
+          hidden: index !== currentIndex
+        },
+        h("h3", null, `${index + 1}. ${step.label}`),
+        index < currentIndex || finished ? h("p", { className: "kumpul-plan-live-readonly" }, "Ringkasan tahap yang sudah dilewati \u2014 tidak dapat diubah.") : null,
+        panels[index](editable)
+      );
+    }),
+    has("gathering.cancel") ? h(
+      "details",
+      { className: "kumpul-plan-live-cancel", "data-bagdja-scope": "" },
+      h("summary", null, "Batalkan acara"),
+      h(
+        "label",
+        null,
+        "Alasan pembatalan (opsional)",
+        h("input", { type: "text", maxLength: 500, placeholder: "Dibatalkan oleh initiator", "data-bagdja-field": "reason" })
+      ),
+      button("gathering.cancel", "Batalkan acara", {}, "kumpul-plan-live-danger")
+    ) : null
+  );
+}
 function GatheringPlanDetailSection({ props, section }) {
   const sectionContent = section?.content || {};
-  const plan = props.isPreview === true ? props.previewGatheringPlan || {} : sectionContent.gatheringPlan || {};
-  const order = props.isPreview === true ? props.previewGatheringOrder || {} : sectionContent.order || {};
+  const plan = props.kumpulPage && props.kumpulPage.plan || sectionContent.gatheringPlan || {};
+  const order = sectionContent.order || {};
   const occurrence = plan.occurrence || {};
   const openedIds = new Set(list(occurrence.opened_option_ids_snapshot));
   const openedOptions = list(occurrence.option_groups_snapshot).filter((option) => openedIds.has(option.product_option_id));
@@ -933,26 +1656,7 @@ function GatheringPlanDetailSection({ props, section }) {
       "Preview desainer \xB7 data contoh saja. Status dan pengelolaan rencana dilakukan oleh host Bagdja."
     ) : null,
     props.isPreview === true ? h(GatheringPlanSimulator, { plan, props }) : null,
-    props.isPreview === true ? null : h(
-      "section",
-      { className: "kumpul-plan-workflow", "aria-label": "Tahapan gathering" },
-      h("p", { className: "kumpul-plan-current-step" }, "Tahap saat ini: ", h("strong", { "data-plan-current-step": "" }, currentStep)),
-      h(
-        "ol",
-        null,
-        ...gatheringWorkflowSteps.map((step, index) => h(
-          "li",
-          {
-            key: step.key,
-            className: index < currentStepIndex ? "is-complete" : index === currentStepIndex ? "is-current" : "",
-            "aria-current": index === currentStepIndex ? "step" : void 0
-          },
-          h("span", { className: "kumpul-plan-step-marker", "aria-hidden": "true" }, index < currentStepIndex ? "\u2713" : String(index + 1)),
-          h("span", null, step.label)
-        ))
-      ),
-      h("p", { className: "kumpul-plan-readonly" }, "Ringkasan ini hanya untuk melihat progres. Aksi rencana tersedia melalui host Bagdja.")
-    ),
+    props.isPreview === true ? null : h(LivePlanWorkflow, { plan, props }),
     h(
       "div",
       { className: "kumpul-plan-layout" },
@@ -1024,7 +1728,7 @@ function GatheringPlanDetailSection({ props, section }) {
         h("h2", null, "Status rencana"),
         h("span", { className: "kumpul-transaction-status kumpul-transaction-status-info" }, workflowStatus),
         h("p", null, "Tahap kerja \xB7 ", h("span", { "data-plan-aside-step": "" }, currentStep)),
-        h("p", null, "Rencana gathering dikelola terpisah dari keranjang. Pembayaran peserta hanya tersedia setelah tahap konfirmasi melalui host Bagdja."),
+        h("p", null, "Rencana gathering dikelola terpisah dari keranjang. Pembayaran peserta dibuka setelah RSVP ditutup di tahap Konfirmasi undangan."),
         order.id ? h("p", { className: "kumpul-plan-order-ref" }, `Referensi pesanan \xB7 ${order.id}`) : null,
         h("a", { className: "kumpul-plan-account-link", href: tenantPath(props, "/cart") }, "Kembali ke Keranjang")
       )
@@ -1032,7 +1736,7 @@ function GatheringPlanDetailSection({ props, section }) {
   );
 }
 function BillingSection({ props }) {
-  const previewInvoices = props.isPreview === true ? list(props.previewInvoices) : [];
+  const previewInvoices = list(props.kumpulPage && props.kumpulPage.invoices);
   const outstandingCount = previewInvoices.filter((invoice) => billingStatus(invoice) === "issued").length;
   const counts = Object.fromEntries(billingFilters.map(([key]) => [
     key,
@@ -1107,10 +1811,11 @@ function BillingSection({ props }) {
           const title = text(isGathering ? invoice.gathering_title : invoice.productName, "Tagihan gathering");
           const reference = isGathering ? `${text(invoice.invoice_id, "Invoice")} \xB7 ${text(invoice.attendee_name, "Peserta")}` : `${text(invoice.label, "Termin pembayaran")} \xB7 ${text(invoice.anchorStepName, text(invoice.orderId, "Pesanan"))}`;
           const dueDate = invoice.payment_deadline || invoice.dueDate;
+          const cardHref = isGathering ? invoice.detail_href : invoice.transaction_href;
           return h(
             "article",
             {
-              className: `kumpul-billing-card kumpul-billing-card-${status}`,
+              className: `kumpul-billing-card kumpul-billing-card-${status}${cardHref ? " kumpul-billing-card-linked" : ""}`,
               "data-billing-item": "",
               "data-billing-status": status,
               key: invoice.id || index
@@ -1122,7 +1827,7 @@ function BillingSection({ props }) {
                 "div",
                 null,
                 h("span", { className: "kumpul-billing-kind" }, isGathering ? "Tagihan gathering" : `Termin ${invoice.sequence || ""}`.trim()),
-                h("h3", null, title),
+                h("h3", null, cardHref ? h("a", { className: "kumpul-billing-card-link", href: cardHref }, title) : title),
                 h("p", null, reference)
               ),
               h("span", { className: `kumpul-billing-status kumpul-billing-status-${statusInfo.tone}` }, statusInfo.label)
@@ -1136,7 +1841,12 @@ function BillingSection({ props }) {
                 h("strong", null, formatCurrency(invoice.amount)),
                 dueDate ? h("p", null, `Batas pembayaran \xB7 ${formatCalendarDate(dueDate)}`) : null
               ),
-              status === "issued" ? h("button", { type: "button", className: "kumpul-billing-action", disabled: true }, isGathering ? "Lihat detail tagihan" : "Bayar") : null
+              status === "issued" && isGathering && invoice.detail_href ? h("a", { className: "kumpul-billing-action", href: invoice.detail_href }, "Lihat detail tagihan") : status === "issued" ? h("button", {
+                type: "button",
+                className: "kumpul-billing-action",
+                disabled: !invoice.can_pay || !intentEnabled(props, "invoice.pay"),
+                ...intentAttributes("invoice.pay", invoice.key)
+              }, isGathering ? "Lihat detail tagihan" : "Bayar") : null
             )
           );
         }),
@@ -1594,8 +2304,8 @@ function calendarMonthCells(monthKey, events, selectedDate) {
 function CalendarSection({ props, section }) {
   const content = section?.content || {};
   const isPreview = props.isPreview === true;
-  const plans = isPreview ? list(content.preview_plans) : [];
-  const invitations = isPreview ? list(content.preview_invitations) : [];
+  const plans = list(content.plans);
+  const invitations = list(content.invitations);
   const attentionCount = invitations.filter((invitation) => invitation.needs_action === true).length;
   const events = [
     ...plans.filter((plan) => calendarDateKey(plan.event_date)).map((plan) => ({
@@ -1605,7 +2315,8 @@ function CalendarSection({ props, section }) {
       title: text(plan.title, "Rencana gathering"),
       statusLabel: text(plan.status_label, calendarStatusLabels[plan.status] || "Status belum tersedia"),
       event_date: plan.event_date,
-      location: text(plan.event_location)
+      location: text(plan.event_location),
+      href: plan.detail_href
     })),
     ...invitations.filter((invitation) => calendarDateKey(invitation.event_date)).map((invitation) => ({
       id: invitation.id || invitation.plan_number,
@@ -1614,10 +2325,11 @@ function CalendarSection({ props, section }) {
       title: text(invitation.gathering_title, "Undangan gathering"),
       statusLabel: text(invitation.action_label, "Undangan diterima"),
       event_date: invitation.event_date,
-      location: text(invitation.event_location)
+      location: text(invitation.event_location),
+      href: invitation.detail_href
     }))
   ].sort((left, right) => new Date(left.event_date).getTime() - new Date(right.event_date).getTime());
-  const initialMonth = calendarMonthKey(content.preview_month, events[0]?.event_date);
+  const initialMonth = calendarMonthKey(content.month, events[0]?.event_date);
   const initialDate = events.find((event) => calendarDateKey(event.event_date).startsWith(`${initialMonth}-`));
   const selectedDate = initialDate ? calendarDateKey(initialDate.event_date) : `${initialMonth}-01`;
   const monthLabel = formatCalendarDate(`${initialMonth}-01`, { month: "long", year: "numeric" });
@@ -1766,7 +2478,7 @@ function CalendarSection({ props, section }) {
             ...events.map((event, index) => h(
               "article",
               {
-                className: `kumpul-calendar-event kumpul-calendar-event-${event.type}`,
+                className: `kumpul-calendar-event kumpul-calendar-event-${event.type}${event.href ? " kumpul-calendar-event-linked" : ""}`,
                 "data-calendar-event": "",
                 "data-calendar-date": calendarDateKey(event.event_date),
                 hidden: calendarDateKey(event.event_date) !== selectedDate,
@@ -1777,7 +2489,7 @@ function CalendarSection({ props, section }) {
                 "div",
                 { className: "kumpul-calendar-event-copy" },
                 h("span", { className: "kumpul-calendar-event-kind" }, event.typeLabel),
-                h("h4", null, event.title),
+                h("h4", null, event.href ? h("a", { className: "kumpul-calendar-event-link", href: event.href }, event.title) : event.title),
                 h("p", null, `${event.statusLabel}${event.location ? ` \xB7 ${event.location}` : ""}`)
               )
             )),
@@ -1841,7 +2553,7 @@ function CalendarSection({ props, section }) {
             ),
             plan.payment_deadline ? h("p", { className: "kumpul-calendar-meta" }, `Batas pembayaran: ${formatCalendarDate(plan.payment_deadline)}`) : null
           ),
-          h("button", { type: "button", className: "kumpul-calendar-action", disabled: true }, "Lanjutkan rencana")
+          plan.detail_href ? h("a", { className: "kumpul-calendar-action", href: plan.detail_href }, "Lanjutkan rencana") : h("button", { type: "button", className: "kumpul-calendar-action", disabled: true }, "Lanjutkan rencana")
         )),
         h("p", {
           className: "kumpul-calendar-empty",
@@ -1893,7 +2605,12 @@ function CalendarSection({ props, section }) {
             "div",
             { className: "kumpul-calendar-invitation-action" },
             invitation.action_label ? h("span", null, invitation.action_label) : null,
-            h("button", { type: "button", className: "kumpul-calendar-action", disabled: true }, "Lihat undangan")
+            invitation.detail_href ? h("a", { className: "kumpul-calendar-action", href: invitation.detail_href }, "Lihat undangan") : h("button", {
+              type: "button",
+              className: "kumpul-calendar-action",
+              disabled: !invitation.key || !intentEnabled(props, "gathering.respond"),
+              ...invitation.key ? intentAttributes("gathering.respond", invitation.key) : {}
+            }, "Lihat undangan")
           )
         )),
         h("p", {
@@ -2201,12 +2918,12 @@ function styles(colors) {
     .kumpul-cart.is-empty .kumpul-cart-select-all,.kumpul-cart.is-empty .kumpul-cart-summary{display:none}.kumpul-cart.is-empty .kumpul-cart-layout{grid-template-columns:1fr}
     @media(max-width:760px){.kumpul-cart-layout{grid-template-columns:1fr;gap:15px}.kumpul-cart-item{grid-template-columns:20px 52px minmax(0,1fr);gap:10px;padding:12px}.kumpul-cart-art{width:52px;height:52px;border-radius:12px;font-size:23px}.kumpul-cart-copy h2{font-size:11px}.kumpul-cart-item-controls{grid-column:3;min-width:0;width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px}.kumpul-cart-price{margin-right:auto;font-size:12px}.kumpul-cart-summary{position:static}.kumpul-cart-heading h1{font-size:32px}}
     .kumpul-transactions{max-width:980px;margin:0 auto}.kumpul-transactions-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.kumpul-transactions-heading h1{margin:0;color:var(--kt-text);font-size:clamp(30px,4vw,42px);line-height:1.15;letter-spacing:-.04em}.kumpul-transactions-heading>div:first-child>p:last-child{margin:9px 0 0;color:var(--kt-muted);font-size:13px}.kumpul-transactions-total{padding:13px 16px;display:grid;gap:2px;border:1px solid var(--kt-border);border-radius:15px;background:var(--kt-surface)}.kumpul-transactions-total strong{font-size:21px;line-height:1.1}.kumpul-transactions-total span{color:var(--kt-muted);font-size:10px}.kumpul-transactions-preview-note{margin:20px 0 0;padding:11px 14px;border:1px solid var(--kt-border);border-radius:12px;background:var(--kt-surface);color:var(--kt-muted);font-size:11px}.kumpul-transactions-filters{margin:25px 0 22px;padding-bottom:7px;display:flex;gap:8px;overflow-x:auto;border-bottom:1px solid var(--kt-border);scrollbar-width:thin}.kumpul-transactions-filters button{padding:9px 12px;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:11px 11px 0 0;background:transparent;color:var(--kt-muted);font:inherit;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}.kumpul-transactions-filters button[aria-pressed=true]{border-color:var(--kt-border);border-bottom-color:var(--kt-surface);background:var(--kt-surface);color:var(--kt-accent)}.kumpul-transactions-filters button span{min-width:20px;height:20px;padding:2px 6px;display:grid;place-items:center;border-radius:99px;background:var(--kt-bg);color:var(--kt-muted);font-size:9px}.kumpul-transactions-list{display:grid;gap:12px}.kumpul-transaction-card{overflow:hidden;border:1px solid var(--kt-border);border-radius:16px;background:var(--kt-surface)}.kumpul-transaction-top{padding:13px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #e8f0f2}.kumpul-transaction-top>div{display:flex;align-items:center;gap:8px;color:var(--kt-muted);font-size:10px}.kumpul-transaction-ref{color:var(--kt-text);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:750}.kumpul-transaction-status{padding:6px 9px;flex:none;border-radius:99px;font-size:9px;font-weight:800}.kumpul-transaction-status-warning{background:#fff4da;color:#a15c00}.kumpul-transaction-status-info{background:#e8f2ff;color:#2563eb}.kumpul-transaction-status-success{background:#e5f7ef;color:#08734f}.kumpul-transaction-status-danger{background:#ffeded;color:#b91c1c}.kumpul-transaction-status-muted{background:#eef1f4;color:#64748b}.kumpul-transaction-body{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px}.kumpul-transaction-item{min-width:0;display:flex;align-items:center;gap:13px}.kumpul-transaction-art{width:58px;height:58px;flex:none;display:grid;place-items:center;border:1px solid var(--kt-border);border-radius:14px;background:var(--kt-bg);color:var(--kt-accent);font-size:26px}.kumpul-transaction-item>div{min-width:0}.kumpul-transaction-item h2{margin:0;font-size:13px}.kumpul-transaction-item p{margin:5px 0 0;color:var(--kt-muted);font-size:10px}.kumpul-transaction-total{flex:none;text-align:right}.kumpul-transaction-total span{display:block;color:var(--kt-muted);font-size:10px}.kumpul-transaction-total strong{display:block;margin-top:3px;font-size:16px}.kumpul-transaction-actions{padding:0 18px 15px;display:flex;justify-content:flex-end;gap:8px}.kumpul-transaction-actions button{min-height:34px;padding:7px 11px;border:1px solid var(--kt-border);border-radius:10px;background:var(--kt-surface);color:var(--kt-text);font:inherit;font-size:9px;font-weight:750;opacity:.62;cursor:not-allowed}.kumpul-transaction-actions button:disabled{opacity:.62}.kumpul-transactions-empty{margin:0;padding:32px 18px;border:1px dashed var(--kt-border);border-radius:15px;color:var(--kt-muted);font-size:12px;text-align:center}
-    @media(max-width:700px){.kumpul-transactions-heading{align-items:flex-start;flex-direction:column;gap:16px}.kumpul-transactions-total{width:100%;padding:11px 13px}.kumpul-transactions-total strong{font-size:18px}.kumpul-transactions-filters{margin-top:20px}.kumpul-transaction-top{align-items:flex-start;padding:12px 14px}.kumpul-transaction-top>div{flex-wrap:wrap;gap:5px;font-size:9px}.kumpul-transaction-status{max-width:120px;white-space:normal;text-align:center}.kumpul-transaction-body{align-items:flex-start;padding:14px;gap:10px}.kumpul-transaction-art{width:44px;height:44px;border-radius:12px;font-size:20px}.kumpul-transaction-item{gap:9px}.kumpul-transaction-item h2{font-size:11px}.kumpul-transaction-total strong{font-size:13px}.kumpul-transaction-actions{padding:0 14px 13px;flex-wrap:wrap}.kumpul-transaction-actions button{flex:1;padding:7px 8px;font-size:8px}}
-    .kumpul-billing{max-width:980px;margin:0 auto}.kumpul-billing-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.kumpul-billing-heading h1{margin:0;color:var(--kt-text);font-size:clamp(30px,4vw,42px);line-height:1.15;letter-spacing:-.04em}.kumpul-billing-description{margin:9px 0 0;color:var(--kt-muted);font-size:13px}.kumpul-billing-summary{display:flex;gap:10px}.kumpul-billing-summary-card{min-width:132px;padding:13px 16px;display:grid;gap:2px;border:1px solid var(--kt-border);border-radius:15px;background:var(--kt-surface)}.kumpul-billing-summary-card strong{font-size:21px;line-height:1.1}.kumpul-billing-summary-card span{color:var(--kt-muted);font-size:10px}.kumpul-billing-preview-note{margin:20px 0 0;padding:11px 14px;border:1px solid var(--kt-border);border-radius:12px;background:var(--kt-surface);color:var(--kt-muted);font-size:11px}.kumpul-billing-filters{margin:25px 0 22px;padding-bottom:7px;display:flex;gap:8px;overflow-x:auto;border-bottom:1px solid var(--kt-border);scrollbar-width:thin}.kumpul-billing-filters button{padding:9px 12px;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:11px 11px 0 0;background:transparent;color:var(--kt-muted);font:inherit;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}.kumpul-billing-filters button[aria-pressed=true]{border-color:var(--kt-border);border-bottom-color:var(--kt-surface);background:var(--kt-surface);color:var(--kt-accent)}.kumpul-billing-filters button span{min-width:20px;height:20px;padding:2px 6px;display:grid;place-items:center;border-radius:99px;background:var(--kt-bg);color:var(--kt-muted);font-size:9px}.kumpul-billing-results-heading{margin-bottom:12px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}.kumpul-billing-results-heading h2{margin:0;font-size:16px}.kumpul-billing-results-heading span{color:var(--kt-muted);font-size:11px}.kumpul-billing-list{display:grid;gap:12px}.kumpul-billing-card{overflow:hidden;border:1px solid var(--kt-border);border-radius:16px;background:var(--kt-surface)}.kumpul-billing-card-top{padding:17px 19px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid #e8f0f2}.kumpul-billing-kind{color:var(--kt-accent);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.kumpul-billing-card h3{margin:4px 0 0;font-size:14px}.kumpul-billing-card-top p{margin:5px 0 0;color:var(--kt-muted);font-size:10px}.kumpul-billing-status{padding:6px 9px;flex:none;border-radius:99px;font-size:9px;font-weight:800}.kumpul-billing-status-warning{background:#fff4da;color:#a15c00}.kumpul-billing-status-success{background:#e5f7ef;color:#08734f}.kumpul-billing-status-muted{background:#eef1f4;color:#64748b}.kumpul-billing-card-bottom{padding:14px 19px;display:flex;align-items:center;justify-content:space-between;gap:16px}.kumpul-billing-card-bottom strong{font-size:17px;color:var(--kt-accent)}.kumpul-billing-card-bottom p{margin:4px 0 0;color:var(--kt-muted);font-size:10px}.kumpul-billing-action{min-height:36px;padding:8px 13px;border:0;border-radius:10px;background:var(--kt-accent);color:#fff;font:inherit;font-size:10px;font-weight:750;opacity:.62;cursor:not-allowed}.kumpul-billing-empty{margin:0;padding:32px 18px;border:1px dashed var(--kt-border);border-radius:15px;color:var(--kt-muted);font-size:12px;text-align:center}
+    @media(max-width:700px){.kumpul-transactions-heading{align-items:flex-start;flex-direction:column;gap:16px}.kumpul-transactions-total{width:100%;padding:11px 13px}.kumpul-transactions-total strong{font-size:18px}.kumpul-transactions-filters{margin-top:20px}.kumpul-transaction-top{align-items:flex-start;padding:12px 14px}.kumpul-transaction-top>div{flex-wrap:wrap;gap:5px;font-size:9px}.kumpul-transaction-status{max-width:120px;white-space:normal;text-align:center}.kumpul-transaction-body{align-items:flex-start;padding:14px;gap:10px}.kumpul-transaction-art{width:44px;height:44px;border-radius:12px;font-size:20px}.kumpul-transaction-item{gap:9px}.kumpul-transaction-item h2{font-size:11px}.kumpul-transaction-total strong{font-size:13px}.kumpul-transaction-actions{padding:0 14px 13px;flex-wrap:wrap}.kumpul-transaction-actions button,.kumpul-transaction-actions .kumpul-transaction-action-link{flex:1;padding:7px 8px;font-size:8px}}
+    .kumpul-billing{max-width:980px;margin:0 auto}.kumpul-billing-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.kumpul-billing-heading h1{margin:0;color:var(--kt-text);font-size:clamp(30px,4vw,42px);line-height:1.15;letter-spacing:-.04em}.kumpul-billing-description{margin:9px 0 0;color:var(--kt-muted);font-size:13px}.kumpul-billing-summary{display:flex;gap:10px}.kumpul-billing-summary-card{min-width:132px;padding:13px 16px;display:grid;gap:2px;border:1px solid var(--kt-border);border-radius:15px;background:var(--kt-surface)}.kumpul-billing-summary-card strong{font-size:21px;line-height:1.1}.kumpul-billing-summary-card span{color:var(--kt-muted);font-size:10px}.kumpul-billing-preview-note{margin:20px 0 0;padding:11px 14px;border:1px solid var(--kt-border);border-radius:12px;background:var(--kt-surface);color:var(--kt-muted);font-size:11px}.kumpul-billing-filters{margin:25px 0 22px;padding-bottom:7px;display:flex;gap:8px;overflow-x:auto;border-bottom:1px solid var(--kt-border);scrollbar-width:thin}.kumpul-billing-filters button{padding:9px 12px;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:11px 11px 0 0;background:transparent;color:var(--kt-muted);font:inherit;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer}.kumpul-billing-filters button[aria-pressed=true]{border-color:var(--kt-border);border-bottom-color:var(--kt-surface);background:var(--kt-surface);color:var(--kt-accent)}.kumpul-billing-filters button span{min-width:20px;height:20px;padding:2px 6px;display:grid;place-items:center;border-radius:99px;background:var(--kt-bg);color:var(--kt-muted);font-size:9px}.kumpul-billing-results-heading{margin-bottom:12px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}.kumpul-billing-results-heading h2{margin:0;font-size:16px}.kumpul-billing-results-heading span{color:var(--kt-muted);font-size:11px}.kumpul-billing-list{display:grid;gap:12px}.kumpul-billing-card{overflow:hidden;border:1px solid var(--kt-border);border-radius:16px;background:var(--kt-surface)}.kumpul-billing-card-top{padding:17px 19px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid #e8f0f2}.kumpul-billing-kind{color:var(--kt-accent);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.kumpul-billing-card h3{margin:4px 0 0;font-size:14px}.kumpul-billing-card-linked{position:relative;transition:border-color .15s,box-shadow .15s}.kumpul-billing-card-linked:hover{border-color:var(--kt-accent);box-shadow:0 8px 22px rgba(15,23,42,.06)}.kumpul-billing-card-linked:focus-within{border-color:var(--kt-accent)}.kumpul-billing-card-link{color:inherit;text-decoration:none;outline:none}.kumpul-billing-card-link::after{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit}.kumpul-billing-card-linked .kumpul-billing-status,.kumpul-billing-card-linked .kumpul-billing-action{position:relative;z-index:1}.kumpul-billing-card-top p{margin:5px 0 0;color:var(--kt-muted);font-size:10px}.kumpul-billing-status{padding:6px 9px;flex:none;border-radius:99px;font-size:9px;font-weight:800}.kumpul-billing-status-warning{background:#fff4da;color:#a15c00}.kumpul-billing-status-success{background:#e5f7ef;color:#08734f}.kumpul-billing-status-muted{background:#eef1f4;color:#64748b}.kumpul-billing-card-bottom{padding:14px 19px;display:flex;align-items:center;justify-content:space-between;gap:16px}.kumpul-billing-card-bottom strong{font-size:17px;color:var(--kt-accent)}.kumpul-billing-card-bottom p{margin:4px 0 0;color:var(--kt-muted);font-size:10px}.kumpul-billing-action{min-height:36px;padding:8px 13px;border:0;border-radius:10px;background:var(--kt-accent);color:#fff;font:inherit;font-size:10px;font-weight:750;opacity:.62;cursor:not-allowed}.kumpul-billing-empty{margin:0;padding:32px 18px;border:1px dashed var(--kt-border);border-radius:15px;color:var(--kt-muted);font-size:12px;text-align:center}
     @media(max-width:700px){.kumpul-billing-heading{align-items:flex-start;flex-direction:column;gap:16px}.kumpul-billing-summary{width:100%}.kumpul-billing-summary-card{min-width:0;flex:1;padding:11px 13px}.kumpul-billing-summary-card strong{font-size:18px}.kumpul-billing-filters{margin-top:20px}.kumpul-billing-card-top{padding:15px;gap:10px}.kumpul-billing-card h3{font-size:13px}.kumpul-billing-status{max-width:120px;white-space:normal;text-align:center}.kumpul-billing-card-bottom{padding:13px 15px}.kumpul-billing-card-bottom strong{font-size:15px}}
     .kumpul-calendar-agenda:not([open]){display:none}.kumpul-calendar-agenda[open]{position:fixed;inset:50% auto auto 50%;z-index:10;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);margin:0;padding:0;display:flex;flex-direction:column;transform:translate(-50%,-50%);overflow:hidden;border:1px solid var(--kt-border);border-radius:22px;background:var(--kt-bg);color:var(--kt-text);box-shadow:0 24px 80px #0f172a45}.kumpul-calendar-agenda::backdrop{background:rgb(15 23 42 / 45%);backdrop-filter:blur(2px)}.kumpul-calendar-agenda-handle{display:none}.kumpul-calendar-agenda-heading{padding:22px 24px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--kt-border)}.kumpul-calendar-agenda-heading .kumpul-eyebrow{margin:0 0 4px}.kumpul-calendar-agenda-heading h2{margin:0;font-size:20px;text-transform:capitalize}.kumpul-calendar-agenda-close{width:36px;height:36px;flex:none;border:1px solid var(--kt-border);border-radius:50%;background:var(--kt-surface);color:var(--kt-text);font:inherit;font-size:22px;line-height:1;cursor:pointer}.kumpul-calendar-agenda-content{min-height:0;padding:18px 24px 24px;overflow:auto;overscroll-behavior:contain}.kumpul-calendar-agenda-list{display:grid;gap:10px}.kumpul-calendar-empty{margin:0;padding:18px;border:1px dashed var(--kt-border);border-radius:14px;color:var(--kt-muted);font-size:13px;text-align:center}
     @media(max-width:620px){.kumpul-calendar-agenda[open]{inset:auto 0 0;width:100%;max-width:none;max-height:min(84dvh,720px);padding-bottom:env(safe-area-inset-bottom);transform:none;border-right:0;border-bottom:0;border-left:0;border-radius:22px 22px 0 0}.kumpul-calendar-agenda-handle{width:38px;height:4px;margin:10px auto 0;display:block;border-radius:99px;background:#cbd5e1}.kumpul-calendar-agenda-heading{padding:14px 20px 14px}.kumpul-calendar-agenda-content{padding:16px 20px 22px}.kumpul-calendar-agenda-close{width:34px;height:34px}}
-    .kumpul-calendar-month-toolbar{margin:22px 0 14px;padding:17px 19px;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--kt-border);border-radius:17px;background:var(--kt-surface)}.kumpul-calendar-month-title h2{margin:0;font-size:20px;line-height:1.2;text-transform:capitalize}.kumpul-calendar-month-title p{margin:5px 0 0;color:var(--kt-muted);font-size:11px}.kumpul-calendar-month-actions{display:flex;align-items:center;gap:7px}.kumpul-calendar-month-actions button{min-width:38px;height:38px;padding:7px 11px;border:1px solid var(--kt-border);border-radius:11px;background:var(--kt-surface);color:var(--kt-text);font:inherit;font-size:12px;font-weight:700;cursor:pointer}.kumpul-calendar-month-actions button[data-calendar-previous],.kumpul-calendar-month-actions button[data-calendar-next]{font-size:22px;line-height:1}.kumpul-calendar-month-view{overflow:hidden;border:1px solid var(--kt-border);border-radius:17px;background:var(--kt-surface)}.kumpul-calendar-weekdays,.kumpul-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.kumpul-calendar-weekdays{border-bottom:1px solid var(--kt-border);background:#f8fbfc}.kumpul-calendar-weekdays span{padding:10px 6px;color:var(--kt-muted);font-size:10px;font-weight:750;text-align:center}.kumpul-calendar-day{position:relative;min-width:0;min-height:77px;padding:9px;display:flex;align-items:flex-start;justify-content:space-between;gap:4px;border:0;border-right:1px solid #e8f0f2;border-bottom:1px solid #e8f0f2;background:var(--kt-surface);color:var(--kt-text);font:inherit;text-align:left;cursor:pointer}.kumpul-calendar-day:nth-child(7n){border-right:0}.kumpul-calendar-day:nth-last-child(-n+7){border-bottom:0}.kumpul-calendar-day:hover{background:#f4fafb}.kumpul-calendar-day[aria-pressed=true]{background:#e6f4f6;box-shadow:inset 0 0 0 2px var(--kt-accent)}.kumpul-calendar-day[data-outside-month=true]{color:#a7b3bd;background:#fbfcfd}.kumpul-calendar-day>span{font-size:11px;font-weight:700}.kumpul-calendar-day small{min-width:19px;height:19px;padding:2px 5px;display:grid;place-items:center;border-radius:999px;background:var(--kt-accent);color:#fff;font-size:9px;font-weight:800}.kumpul-calendar-day:focus-visible,.kumpul-calendar-month-actions button:focus-visible{position:relative;z-index:1;outline:3px solid var(--kt-success);outline-offset:-3px}.kumpul-calendar-agenda{margin-top:24px}.kumpul-calendar-agenda>h3{margin:0 0 12px;font-size:16px;text-transform:capitalize}.kumpul-calendar-event{padding:14px 16px;display:grid;grid-template-columns:76px 1fr;align-items:start;gap:14px;border:1px solid var(--kt-border);border-left:4px solid var(--kt-accent);border-radius:14px;background:var(--kt-surface)}.kumpul-calendar-event[hidden]{display:none}.kumpul-calendar-event-invitation{border-left-color:var(--kt-success)}.kumpul-calendar-event-time{padding-top:2px;color:var(--kt-accent);font-size:11px;font-weight:800}.kumpul-calendar-event-copy{min-width:0}.kumpul-calendar-event-kind{color:var(--kt-muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.kumpul-calendar-event-copy h4{margin:3px 0 0;font-size:13px}.kumpul-calendar-event-copy p{margin:4px 0 0;color:var(--kt-muted);font-size:10px}
+    .kumpul-calendar-month-toolbar{margin:22px 0 14px;padding:17px 19px;display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--kt-border);border-radius:17px;background:var(--kt-surface)}.kumpul-calendar-month-title h2{margin:0;font-size:20px;line-height:1.2;text-transform:capitalize}.kumpul-calendar-month-title p{margin:5px 0 0;color:var(--kt-muted);font-size:11px}.kumpul-calendar-month-actions{display:flex;align-items:center;gap:7px}.kumpul-calendar-month-actions button{min-width:38px;height:38px;padding:7px 11px;border:1px solid var(--kt-border);border-radius:11px;background:var(--kt-surface);color:var(--kt-text);font:inherit;font-size:12px;font-weight:700;cursor:pointer}.kumpul-calendar-month-actions button[data-calendar-previous],.kumpul-calendar-month-actions button[data-calendar-next]{font-size:22px;line-height:1}.kumpul-calendar-month-view{overflow:hidden;border:1px solid var(--kt-border);border-radius:17px;background:var(--kt-surface)}.kumpul-calendar-weekdays,.kumpul-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.kumpul-calendar-weekdays{border-bottom:1px solid var(--kt-border);background:#f8fbfc}.kumpul-calendar-weekdays span{padding:10px 6px;color:var(--kt-muted);font-size:10px;font-weight:750;text-align:center}.kumpul-calendar-day{position:relative;min-width:0;min-height:77px;padding:9px;display:flex;align-items:flex-start;justify-content:space-between;gap:4px;border:0;border-right:1px solid #e8f0f2;border-bottom:1px solid #e8f0f2;background:var(--kt-surface);color:var(--kt-text);font:inherit;text-align:left;cursor:pointer}.kumpul-calendar-day:nth-child(7n){border-right:0}.kumpul-calendar-day:nth-last-child(-n+7){border-bottom:0}.kumpul-calendar-day:hover{background:#f4fafb}.kumpul-calendar-day[aria-pressed=true]{background:#e6f4f6;box-shadow:inset 0 0 0 2px var(--kt-accent)}.kumpul-calendar-day[data-outside-month=true]{color:#a7b3bd;background:#fbfcfd}.kumpul-calendar-day>span{font-size:11px;font-weight:700}.kumpul-calendar-day small{min-width:19px;height:19px;padding:2px 5px;display:grid;place-items:center;border-radius:999px;background:var(--kt-accent);color:#fff;font-size:9px;font-weight:800}.kumpul-calendar-day:focus-visible,.kumpul-calendar-month-actions button:focus-visible{position:relative;z-index:1;outline:3px solid var(--kt-success);outline-offset:-3px}.kumpul-calendar-agenda{margin-top:24px}.kumpul-calendar-agenda>h3{margin:0 0 12px;font-size:16px;text-transform:capitalize}.kumpul-calendar-event{padding:14px 16px;display:grid;grid-template-columns:76px 1fr;align-items:start;gap:14px;border:1px solid var(--kt-border);border-left:4px solid var(--kt-accent);border-radius:14px;background:var(--kt-surface)}.kumpul-calendar-event[hidden]{display:none}.kumpul-calendar-event-linked{position:relative;transition:border-color .15s,box-shadow .15s}.kumpul-calendar-event-linked:hover,.kumpul-calendar-event-linked:focus-within{border-color:var(--kt-accent);box-shadow:0 8px 22px rgba(15,23,42,.06)}.kumpul-calendar-event-link{color:inherit;text-decoration:none;outline:none}.kumpul-calendar-event-link::after{content:'';position:absolute;inset:0;border-radius:inherit}.kumpul-calendar-event-invitation{border-left-color:var(--kt-success)}.kumpul-calendar-event-time{padding-top:2px;color:var(--kt-accent);font-size:11px;font-weight:800}.kumpul-calendar-event-copy{min-width:0}.kumpul-calendar-event-kind{color:var(--kt-muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.kumpul-calendar-event-copy h4{margin:3px 0 0;font-size:13px}.kumpul-calendar-event-copy p{margin:4px 0 0;color:var(--kt-muted);font-size:10px}
     @media(max-width:620px){.kumpul-calendar-month-toolbar{padding:13px;align-items:flex-start}.kumpul-calendar-month-title h2{font-size:17px}.kumpul-calendar-month-title p{max-width:170px;font-size:9px}.kumpul-calendar-month-actions{gap:4px}.kumpul-calendar-month-actions button{min-width:33px;height:34px;padding:5px 8px;font-size:10px}.kumpul-calendar-weekdays span{padding:8px 2px;font-size:9px}.kumpul-calendar-day{min-height:55px;padding:6px 5px}.kumpul-calendar-day>span{font-size:10px}.kumpul-calendar-day small{min-width:16px;height:16px;padding:1px 4px;font-size:8px}.kumpul-calendar-event{grid-template-columns:52px 1fr;gap:9px;padding:12px}.kumpul-calendar-event-time{font-size:10px}}
     @media(max-width:620px){.kumpul-calendar-tabs{overflow-x:auto}.kumpul-calendar-tabs button{flex:none;white-space:nowrap}}
     .kumpul-template{--kt-bg:${colors.background};--kt-surface:${colors.surface};--kt-text:${colors.text};--kt-muted:${colors.textMuted};--kt-accent:${colors.accent};--kt-hover:${colors.accentHover};--kt-border:${colors.border};--kt-success:${colors.success};--kt-warning:${colors.warning};min-height:100vh;background:var(--kt-bg);color:var(--kt-text);font:400 15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
@@ -2244,19 +2961,37 @@ function styles(colors) {
     .kumpul-footer{padding:26px 28px;display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--kt-border);color:var(--kt-muted);font-size:11px}.kumpul-footer strong{color:var(--kt-text)}.kumpul-mobile-dock{display:none}
     .kumpul-detail-page{max-width:980px;margin:0 auto}.kumpul-detail-back{display:inline-block;margin-bottom:20px;color:var(--kt-accent);font-size:11px;font-weight:750}.kumpul-detail-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.kumpul-detail-heading h1{margin:0;color:var(--kt-text);font-size:clamp(28px,4vw,40px);line-height:1.15;letter-spacing:-.04em}.kumpul-detail-heading .kumpul-eyebrow{margin-bottom:8px}.kumpul-detail-heading>div>p:last-child{margin:8px 0 0;color:var(--kt-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.kumpul-detail-preview-note{margin:18px 0 0;padding:11px 14px;border:1px solid var(--kt-border);border-radius:12px;background:var(--kt-surface);color:var(--kt-muted);font-size:10px}.kumpul-detail-layout{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) 310px;align-items:start;gap:18px}.kumpul-detail-main{display:grid;gap:14px}.kumpul-detail-card{min-width:0;padding:20px;border:1px solid var(--kt-border);border-radius:17px;background:var(--kt-surface)}.kumpul-detail-card h2{margin:0 0 16px;font-size:14px}.kumpul-detail-fields{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.kumpul-detail-fields>div{min-width:0}.kumpul-detail-fields dt,.kumpul-detail-totals dt{color:var(--kt-muted);font-size:9px}.kumpul-detail-fields dd,.kumpul-detail-totals dd{margin:4px 0 0;font-size:11px;font-weight:700;overflow-wrap:anywhere}.kumpul-detail-total{margin-top:20px;padding-top:16px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid var(--kt-border);color:var(--kt-muted);font-size:11px}.kumpul-detail-total strong{color:var(--kt-accent);font-size:22px}.kumpul-detail-aside{position:sticky;top:20px}.kumpul-detail-aside>p{margin:13px 0 0;color:var(--kt-muted);font-size:10px;line-height:1.6}.kumpul-detail-aside>button{width:100%;min-height:42px;margin-top:16px;padding:10px;border:0;border-radius:11px;background:var(--kt-accent);color:#fff;font:inherit;font-size:11px;font-weight:800;opacity:.55;cursor:not-allowed}.kumpul-detail-login-info{margin-top:15px;padding:13px;border-left:3px solid var(--kt-accent);background:var(--kt-bg)}.kumpul-detail-login-info h3{margin:0;font-size:11px}.kumpul-detail-login-info p{margin:7px 0 0;color:var(--kt-muted);font-size:10px;line-height:1.6}.kumpul-detail-items{display:grid}.kumpul-detail-item{padding:13px 0;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;border-top:1px solid var(--kt-border)}.kumpul-detail-item-art{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--kt-border);border-radius:13px;background:var(--kt-bg);color:var(--kt-accent);font-size:20px;font-weight:800}.kumpul-detail-item-copy{min-width:0}.kumpul-detail-item h3{margin:0;font-size:11px}.kumpul-detail-item p{margin:5px 0 0;color:var(--kt-muted);font-size:9px}.kumpul-detail-item>strong{font-size:10px;white-space:nowrap}.kumpul-detail-escrow-note{display:block;margin-top:5px;color:var(--kt-accent);font-size:8px;line-height:1.5}.kumpul-detail-address{margin:0;color:var(--kt-muted);font-size:11px;line-height:1.6}.kumpul-detail-totals{margin:0;display:grid;gap:12px}.kumpul-detail-totals>div{display:flex;justify-content:space-between;gap:12px}.kumpul-detail-totals dd{margin:0;text-align:right}.kumpul-detail-grand-total{padding-top:13px;border-top:1px solid var(--kt-border)}.kumpul-detail-grand-total dt{color:var(--kt-text);font-weight:800}.kumpul-detail-grand-total dd{color:var(--kt-accent);font-size:16px}.kumpul-detail-payment-fields{margin-top:17px;padding-top:14px;border-top:1px solid var(--kt-border)}.kumpul-detail-fields .kumpul-detail-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px}.kumpul-detail-payment-note{padding:10px 12px;border:1px solid var(--kt-border);border-radius:11px;background:var(--kt-bg)}
     .kumpul-plan-detail{max-width:980px;margin:0 auto}.kumpul-plan-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.kumpul-plan-heading h1{margin:0;color:var(--kt-text);font-size:clamp(28px,4vw,40px);line-height:1.15;letter-spacing:-.04em}.kumpul-plan-heading .kumpul-eyebrow{margin-bottom:8px}.kumpul-plan-number{margin:9px 0 0;color:var(--kt-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.kumpul-plan-workflow{margin-top:20px;padding:17px;border:1px solid var(--kt-border);border-radius:16px;background:var(--kt-surface)}.kumpul-plan-current-step{margin:0 0 14px;color:var(--kt-muted);font-size:10px}.kumpul-plan-current-step strong{color:var(--kt-text)}.kumpul-plan-workflow ol{margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none}.kumpul-plan-workflow li{min-width:0;padding:12px 9px 0;display:flex;align-items:center;gap:7px;border-top:2px solid var(--kt-border);color:var(--kt-muted);font-size:9px;font-weight:700}.kumpul-plan-workflow li.is-complete,.kumpul-plan-workflow li.is-current{border-color:var(--kt-accent);color:var(--kt-text)}.kumpul-plan-step-marker{width:21px;height:21px;flex:none;display:grid;place-items:center;border:1px solid var(--kt-border);border-radius:50%;font-size:9px}.kumpul-plan-workflow li.is-complete .kumpul-plan-step-marker,.kumpul-plan-workflow li.is-current .kumpul-plan-step-marker{border-color:var(--kt-accent);background:var(--kt-accent);color:#fff}.kumpul-plan-readonly{margin:12px 0 0;color:var(--kt-muted);font-size:9px;line-height:1.5}.kumpul-plan-layout{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:16px}.kumpul-plan-main{display:grid;gap:14px}.kumpul-plan-options{margin:0;padding:0;display:grid;list-style:none}.kumpul-plan-options li{padding:13px 0;border-top:1px solid var(--kt-border)}.kumpul-plan-option-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.kumpul-plan-option-group{color:var(--kt-muted);font-size:8px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.kumpul-plan-option-heading h3{margin:3px 0 0;font-size:11px}.kumpul-plan-options li>p{margin:6px 0 0;color:var(--kt-muted);font-size:9px;line-height:1.5}.kumpul-plan-final-option{padding:5px 8px;border:1px solid var(--kt-accent);border-radius:99px;color:var(--kt-accent);font-size:8px;font-weight:800;white-space:nowrap}.kumpul-plan-votes{display:inline-block;margin-top:8px;color:var(--kt-accent);font-size:9px;font-weight:750}.kumpul-plan-empty-options{margin:0;color:var(--kt-muted);font-size:10px}.kumpul-plan-aside>p{margin:13px 0 0;color:var(--kt-muted);font-size:10px;line-height:1.6}.kumpul-plan-order-ref{overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8px!important}.kumpul-plan-account-link{margin-top:16px;padding:10px 12px;display:block;border:1px solid var(--kt-border);border-radius:10px;color:var(--kt-accent);font-size:10px;font-weight:800;text-align:center}
-    .kumpul-plan-simulator{margin-top:18px;padding:20px;border:1px solid var(--kt-border);border-radius:18px;background:var(--kt-surface);box-shadow:0 8px 26px #0f172a0a}.kumpul-plan-simulator-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.kumpul-plan-simulator-heading h2{margin:0;font-size:19px;letter-spacing:-.025em}.kumpul-plan-simulator-heading .kumpul-eyebrow{margin-bottom:7px}.kumpul-plan-simulator-heading>div>p:last-child{margin:7px 0 0;color:var(--kt-muted);font-size:10px;line-height:1.55}.kumpul-plan-simulation-badge{padding:6px 9px;flex:none;border-radius:99px;background:#e6f4f6;color:var(--kt-accent);font-size:8px;font-weight:800}.kumpul-plan-simulation-note{margin:15px 0;padding:10px 12px;border:1px solid var(--kt-border);border-radius:10px;background:var(--kt-bg);color:var(--kt-muted);font-size:9px;line-height:1.55}.kumpul-plan-sim-steps{margin:17px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none}.kumpul-plan-sim-steps li{min-width:0;border-top:2px solid var(--kt-border)}.kumpul-plan-sim-steps li.is-current,.kumpul-plan-sim-steps li.is-complete{border-color:var(--kt-accent)}.kumpul-plan-sim-steps button{width:100%;padding:10px 5px 4px;display:flex;align-items:center;gap:6px;border:0;background:none;color:var(--kt-muted);font:inherit;font-size:8px;font-weight:750;text-align:left}.kumpul-plan-sim-steps li.is-current button,.kumpul-plan-sim-steps li.is-complete button{color:var(--kt-text)}.kumpul-plan-sim-steps button:disabled{cursor:not-allowed;opacity:.65}.kumpul-plan-sim-steps button:not(:disabled){cursor:pointer}.kumpul-plan-sim-steps button>span:first-child{width:20px;height:20px;flex:none;display:grid;place-items:center;border:1px solid var(--kt-border);border-radius:50%;font-size:8px}.kumpul-plan-sim-steps li.is-current button>span:first-child,.kumpul-plan-sim-steps li.is-complete button>span:first-child{border-color:var(--kt-accent);background:var(--kt-accent);color:#fff}.kumpul-plan-sim-panel{margin-top:17px}.kumpul-plan-sim-panel[hidden],.kumpul-plan-sim-complete[hidden]{display:none}.kumpul-plan-sim-panel h3,.kumpul-plan-sim-complete h3{margin:0;font-size:15px}.kumpul-plan-sim-help{margin:6px 0 14px;color:var(--kt-muted);font-size:9px;line-height:1.5}.kumpul-plan-sim-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.kumpul-plan-sim-form label,.kumpul-plan-sim-invite-form label,.kumpul-plan-sim-person>label{min-width:0;display:grid;gap:5px;color:var(--kt-muted);font-size:9px;font-weight:700}.kumpul-plan-sim-form input,.kumpul-plan-sim-form select,.kumpul-plan-sim-invite-form input,.kumpul-plan-sim-invitees input,.kumpul-plan-sim-person select{width:100%;min-width:0;min-height:37px;padding:8px 9px;border:1px solid var(--kt-border);border-radius:9px;background:#fff;color:var(--kt-text);font:inherit;font-size:10px}.kumpul-plan-sim-options{min-width:0;margin:15px 0 0;padding:11px;border:1px solid var(--kt-border);border-radius:11px}.kumpul-plan-sim-options legend{padding:0 5px;color:var(--kt-text);font-size:10px;font-weight:800}.kumpul-plan-sim-option{margin:5px 10px 5px 0;display:inline-flex;align-items:center;gap:6px;color:var(--kt-muted);font-size:9px}.kumpul-plan-sim-option input{accent-color:var(--kt-accent)}.kumpul-plan-sim-actions{margin-top:15px;display:flex;justify-content:flex-end;gap:8px}.kumpul-plan-sim-actions button,.kumpul-plan-sim-invite-form button,.kumpul-plan-sim-invitees button,.kumpul-plan-sim-payment button,.kumpul-plan-sim-complete button{min-height:36px;padding:8px 12px;border:1px solid var(--kt-border);border-radius:9px;background:#fff;color:var(--kt-text);font:inherit;font-size:9px;font-weight:800;cursor:pointer}.kumpul-plan-sim-actions .kumpul-plan-sim-primary{border-color:var(--kt-accent);background:var(--kt-accent);color:#fff}.kumpul-plan-sim-actions .kumpul-plan-sim-secondary{color:var(--kt-accent)}.kumpul-plan-sim-error{margin:12px 0 0;color:#b91c1c;font-size:9px;font-weight:700}.kumpul-plan-sim-invite-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:9px}.kumpul-plan-sim-invitees{margin:12px 0 0;padding:0;display:grid;gap:7px;list-style:none}.kumpul-plan-sim-invitees li{display:flex;align-items:center;gap:8px}.kumpul-plan-sim-invitees li>div{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.kumpul-plan-sim-invitees button,.kumpul-plan-sim-payment button{min-height:33px;padding:7px 9px;color:var(--kt-accent)}.kumpul-plan-sim-participants,.kumpul-plan-sim-payments{display:grid;gap:9px}.kumpul-plan-sim-person{padding:12px;display:grid;grid-template-columns:minmax(0,1fr) 170px;align-items:center;gap:11px;border:1px solid var(--kt-border);border-radius:12px;background:var(--kt-bg)}.kumpul-plan-sim-person-heading{min-width:0;display:grid;gap:3px}.kumpul-plan-sim-person-heading strong{font-size:10px}.kumpul-plan-sim-person-heading span{overflow-wrap:anywhere;color:var(--kt-muted);font-size:8px}.kumpul-plan-sim-person-options{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.kumpul-plan-sim-payment{grid-template-columns:minmax(0,1fr) auto}.kumpul-plan-sim-payment[data-sim-paid=true]{border-color:var(--kt-success);background:#effaf5}.kumpul-plan-sim-final-group{margin:7px 0 0;padding:8px;border:1px solid var(--kt-border);border-radius:9px}.kumpul-plan-sim-final-group legend{padding:0 4px;font-size:9px;font-weight:800}.kumpul-plan-sim-final-group label{margin:5px 10px 5px 0;display:inline-flex;align-items:center;gap:6px;color:var(--kt-muted);font-size:9px}.kumpul-plan-sim-final-group input{accent-color:var(--kt-accent)}.kumpul-plan-sim-complete{margin-top:18px;padding:22px;border:1px solid #8bd1ae;border-radius:13px;background:#effaf5;text-align:center}.kumpul-plan-sim-complete>span{width:34px;height:34px;margin:0 auto 9px;display:grid;place-items:center;border-radius:50%;background:var(--kt-success);color:#fff;font-weight:900}.kumpul-plan-sim-complete p{margin:7px 0 13px;color:var(--kt-muted);font-size:9px;line-height:1.5}
+    .kumpul-plan-simulator{margin-top:18px;padding:20px;border:1px solid var(--kt-border);border-radius:18px;background:var(--kt-surface);box-shadow:0 8px 26px #0f172a0a}.kumpul-plan-simulator-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.kumpul-plan-simulator-heading h2{margin:0;font-size:19px;letter-spacing:-.025em}.kumpul-plan-simulator-heading .kumpul-eyebrow{margin-bottom:7px}.kumpul-plan-simulator-heading>div>p:last-child{margin:7px 0 0;color:var(--kt-muted);font-size:10px;line-height:1.55}.kumpul-plan-simulation-badge{padding:6px 9px;flex:none;border-radius:99px;background:#e6f4f6;color:var(--kt-accent);font-size:8px;font-weight:800}.kumpul-plan-simulation-note{margin:15px 0;padding:10px 12px;border:1px solid var(--kt-border);border-radius:10px;background:var(--kt-bg);color:var(--kt-muted);font-size:9px;line-height:1.55}.kumpul-plan-sim-steps{margin:17px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none}.kumpul-plan-sim-steps li{min-width:0;border-top:2px solid var(--kt-border)}.kumpul-plan-sim-steps li.is-current,.kumpul-plan-sim-steps li.is-complete{border-color:var(--kt-accent)}.kumpul-plan-sim-steps button{width:100%;padding:10px 5px 4px;display:flex;align-items:center;gap:6px;border:0;background:none;color:var(--kt-muted);font:inherit;font-size:8px;font-weight:750;text-align:left}.kumpul-plan-sim-steps li.is-current button,.kumpul-plan-sim-steps li.is-complete button{color:var(--kt-text)}.kumpul-plan-sim-steps button:disabled{cursor:not-allowed;opacity:.65}.kumpul-plan-sim-steps button:not(:disabled){cursor:pointer}.kumpul-plan-sim-steps button>span:first-child{width:20px;height:20px;flex:none;display:grid;place-items:center;border:1px solid var(--kt-border);border-radius:50%;font-size:8px}.kumpul-plan-sim-steps li.is-current button>span:first-child,.kumpul-plan-sim-steps li.is-complete button>span:first-child{border-color:var(--kt-accent);background:var(--kt-accent);color:#fff}.kumpul-plan-sim-panel{margin-top:17px}.kumpul-plan-sim-panel[hidden],.kumpul-plan-sim-complete[hidden]{display:none}.kumpul-plan-sim-panel h3,.kumpul-plan-sim-complete h3{margin:0;font-size:15px}.kumpul-plan-sim-help{margin:6px 0 14px;color:var(--kt-muted);font-size:9px;line-height:1.5}.kumpul-plan-sim-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.kumpul-plan-sim-form label,.kumpul-plan-sim-invite-form label,.kumpul-plan-sim-person>label{min-width:0;display:grid;gap:5px;color:var(--kt-muted);font-size:9px;font-weight:700}.kumpul-plan-sim-form input,.kumpul-plan-sim-form select,.kumpul-plan-sim-invite-form input,.kumpul-plan-sim-invitees input,.kumpul-plan-sim-person select{width:100%;min-width:0;min-height:37px;padding:8px 9px;border:1px solid var(--kt-border);border-radius:9px;background:#fff;color:var(--kt-text);font:inherit;font-size:10px}.kumpul-plan-sim-options{min-width:0;margin:15px 0 0;padding:11px;border:1px solid var(--kt-border);border-radius:11px}.kumpul-plan-sim-options legend{padding:0 5px;color:var(--kt-text);font-size:10px;font-weight:800}.kumpul-plan-sim-option{margin:5px 10px 5px 0;display:inline-flex;align-items:center;gap:6px;color:var(--kt-muted);font-size:9px}.kumpul-plan-sim-option input{accent-color:var(--kt-accent)}.kumpul-plan-sim-actions{margin-top:15px;display:flex;justify-content:flex-end;gap:8px}.kumpul-plan-sim-actions button,.kumpul-plan-sim-invite-form button,.kumpul-plan-sim-invitees button,.kumpul-plan-sim-payment button,.kumpul-plan-sim-complete button{min-height:36px;padding:8px 12px;border:1px solid var(--kt-border);border-radius:9px;background:#fff;color:var(--kt-text);font:inherit;font-size:9px;font-weight:800;cursor:pointer}.kumpul-plan-sim-actions .kumpul-plan-sim-primary{border-color:var(--kt-accent);background:var(--kt-accent);color:#fff}.kumpul-plan-sim-actions .kumpul-plan-sim-secondary{color:var(--kt-accent)}.kumpul-plan-sim-error{margin:12px 0 0;color:#b91c1c;font-size:9px;font-weight:700}.kumpul-plan-sim-invite-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:9px}.kumpul-plan-sim-invitees{margin:12px 0 0;padding:0;display:grid;gap:7px;list-style:none}.kumpul-plan-sim-invitees li{display:flex;align-items:center;gap:8px}.kumpul-plan-sim-invitees li>div{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px}.kumpul-plan-sim-invitees button,.kumpul-plan-sim-payment button{min-height:33px;padding:7px 9px;color:var(--kt-accent)}.kumpul-plan-sim-participants,.kumpul-plan-sim-payments{display:grid;gap:9px}.kumpul-plan-sim-person{padding:12px;display:grid;grid-template-columns:minmax(0,1fr) 170px;align-items:center;gap:11px;border:1px solid var(--kt-border);border-radius:12px;background:var(--kt-bg)}.kumpul-plan-sim-person-heading{min-width:0;display:grid;gap:3px}.kumpul-plan-sim-person-heading strong{font-size:10px}.kumpul-plan-sim-person-heading span{overflow-wrap:anywhere;color:var(--kt-muted);font-size:8px}.kumpul-plan-sim-person-options{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.kumpul-plan-sim-payment{grid-template-columns:minmax(0,1fr) auto}.kumpul-plan-sim-payment[data-sim-paid=true]{border-color:var(--kt-success);background:#effaf5}.kumpul-plan-sim-final-group{margin:7px 0 0;padding:8px;border:1px solid var(--kt-border);border-radius:9px}.kumpul-plan-sim-final-group legend{padding:0 4px;font-size:9px;font-weight:800}.kumpul-plan-sim-final-group label{margin:5px 10px 5px 0;display:inline-flex;align-items:center;gap:6px;color:var(--kt-muted);font-size:9px}.kumpul-plan-sim-final-group input{accent-color:var(--kt-accent)}.kumpul-plan-sim-complete{margin-top:18px;padding:22px;border:1px solid #8bd1ae;border-radius:13px;background:#effaf5;text-align:center}.kumpul-plan-sim-complete>span{width:34px;height:34px;margin:0 auto 9px;display:grid;place-items:center;border-radius:50%;background:var(--kt-success);color:#fff;font-weight:900}.kumpul-plan-sim-complete p{margin:7px 0 13px;color:var(--kt-muted);font-size:9px;line-height:1.5}.kumpul-plan-live .kumpul-plan-sim-steps{position:sticky;top:var(--kumpul-header-height,0px);z-index:8;padding-top:10px;background:var(--kt-surface)}.kumpul-plan-live-dates{margin-top:11px;grid-template-columns:repeat(3,minmax(0,1fr))}.kumpul-plan-live .kumpul-plan-sim-option{width:100%;margin:7px 0;display:flex;align-items:flex-start}.kumpul-plan-live .kumpul-plan-sim-option>span{display:grid;gap:3px}.kumpul-plan-live .kumpul-plan-sim-option small{color:var(--kt-muted);font-size:8px;line-height:1.45}.kumpul-plan-live .kumpul-plan-sim-invite-form{margin-bottom:12px;grid-template-columns:repeat(3,minmax(0,1fr)) auto}.kumpul-plan-live-readonly{margin:6px 0 12px;padding:8px 10px;border-radius:9px;background:var(--kt-bg);color:var(--kt-muted);font-size:9px}.kumpul-plan-live-people{margin:12px 0 0;padding:0;display:grid;gap:8px;list-style:none}.kumpul-plan-live-people .kumpul-plan-sim-person{grid-template-columns:minmax(0,1fr) auto}.kumpul-plan-live-person-name{display:flex;align-items:center;gap:8px}.kumpul-plan-live-person-name input{accent-color:var(--kt-accent)}.kumpul-plan-live-row-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;font-size:9px;font-weight:800}.kumpul-plan-live-row-actions a{color:var(--kt-accent)}.kumpul-plan-live-row-actions button{min-height:32px;padding:6px 10px;border:1px solid var(--kt-border);border-radius:9px;background:#fff;color:var(--kt-accent);font:inherit;cursor:pointer}.kumpul-plan-live-public{margin:0 0 12px;padding:10px 12px;border:1px dashed var(--kt-accent);border-radius:11px;color:var(--kt-muted);font-size:9px}.kumpul-plan-live-public a{color:var(--kt-accent);font-weight:800}.kumpul-plan-live-operation{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#e6f4f6;color:var(--kt-text);font-size:9px}.kumpul-plan-live-operation.is-failed{background:#fdecec;color:#b91c1c}.kumpul-plan-live-reason{margin-top:12px;display:grid;gap:5px;color:var(--kt-muted);font-size:9px;font-weight:700}.kumpul-plan-live-reason textarea,.kumpul-plan-live-cancel input{width:100%;padding:8px 9px;border:1px solid var(--kt-border);border-radius:9px;font:inherit;font-size:10px}.kumpul-plan-live .kumpul-plan-sim-final-group{display:grid;gap:4px}.kumpul-plan-live .kumpul-plan-sim-final-group p{margin:0;color:var(--kt-muted);font-size:9px}.kumpul-plan-live-cancel{margin-top:18px;padding-top:12px;border-top:1px solid var(--kt-border);font-size:10px}.kumpul-plan-live-cancel summary{color:#b91c1c;font-weight:800;cursor:pointer}.kumpul-plan-live-cancel label{margin:10px 0;display:grid;gap:5px;color:var(--kt-muted);font-size:9px;font-weight:700}.kumpul-plan-live-danger{min-height:36px;padding:8px 12px;border:0;border-radius:9px;background:#b91c1c;color:#fff;font:inherit;font-size:9px;font-weight:800;cursor:pointer}.kumpul-plan-live button:disabled{cursor:not-allowed;opacity:.55}@media(max-width:760px){.kumpul-plan-live-dates,.kumpul-plan-live .kumpul-plan-sim-invite-form,.kumpul-plan-live-people .kumpul-plan-sim-person{grid-template-columns:1fr}.kumpul-plan-live-row-actions{justify-content:flex-start}}
     @media(max-width:760px){.kumpul-plan-heading{flex-direction:column;gap:12px}.kumpul-plan-workflow{padding:14px}.kumpul-plan-workflow ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kumpul-plan-workflow li{padding:9px 5px 0;font-size:8px}.kumpul-plan-layout{grid-template-columns:1fr;gap:13px}.kumpul-plan-aside{position:static}.kumpul-plan-simulator{padding:15px}.kumpul-plan-simulator-heading{flex-direction:column;gap:10px}.kumpul-plan-sim-form{grid-template-columns:1fr}.kumpul-plan-sim-invite-form{grid-template-columns:1fr}.kumpul-plan-sim-invite-form button{width:100%}.kumpul-plan-sim-invitees li{align-items:flex-start;flex-direction:column}.kumpul-plan-sim-invitees li>div{width:100%;grid-template-columns:1fr}.kumpul-plan-sim-invitees button{align-self:flex-end}.kumpul-plan-sim-person{grid-template-columns:1fr}.kumpul-plan-sim-person-options{grid-template-columns:1fr}.kumpul-plan-sim-payment{grid-template-columns:1fr}.kumpul-plan-sim-payment button{width:100%}.kumpul-plan-sim-steps button{align-items:flex-start;flex-direction:column;font-size:7px}.kumpul-plan-sim-actions{flex-wrap:wrap}.kumpul-plan-sim-actions button{flex:1}}
     @media(max-width:760px){.kumpul-detail-heading{align-items:flex-start;flex-direction:column}.kumpul-detail-layout{grid-template-columns:1fr;gap:13px}.kumpul-detail-aside{position:static}.kumpul-detail-card{padding:16px}.kumpul-detail-fields{gap:13px}.kumpul-detail-total strong{font-size:19px}.kumpul-detail-item{grid-template-columns:40px minmax(0,1fr);gap:10px}.kumpul-detail-item-art{width:40px;height:40px}.kumpul-detail-item>strong{grid-column:2}.kumpul-detail-page .kumpul-detail-preview-note{font-size:9px}}
+    .kumpul-transaction-actions .kumpul-transaction-action-link{display:inline-flex;min-height:34px;align-items:center;justify-content:center;padding:7px 11px;border:1px solid var(--kt-border);border-radius:10px;background:var(--kt-surface);color:var(--kt-text);font-size:9px;font-weight:750;text-decoration:none}
+    .kumpul-transaction-actions .kumpul-transaction-action-link:hover{border-color:var(--kt-accent);color:var(--kt-accent)}
+    a.kumpul-billing-action{display:inline-flex;align-items:center;text-decoration:none;opacity:1;cursor:pointer}
+    .kumpul-billing-action:not(:disabled),.kumpul-detail-aside>button:not(:disabled),.kumpul-cart-checkout:not(:disabled){opacity:1;cursor:pointer}
+    .kumpul-detail-aside>.kumpul-detail-pay-link{display:flex;width:100%;min-height:42px;margin-top:16px;align-items:center;justify-content:center;border-radius:11px;background:var(--kt-accent);color:#fff;font-size:11px;font-weight:800;text-decoration:none}
+    .kumpul-header-only .kumpul-header{position:static}
+    a.kumpul-calendar-action{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;opacity:1;cursor:pointer}
     @media(max-width:900px){.kumpul-header-main{padding:12px 20px}.kumpul-utilities>a span{display:none}.kumpul-utilities>a{padding:9px}.kumpul-main{padding:24px 20px 60px}.kumpul-hero{grid-template-columns:1fr}.kumpul-hero-copy{padding:38px}.kumpul-feature-card{min-height:310px}.kumpul-about-section{grid-template-columns:1fr .8fr;gap:24px}.kumpul-about-art,.kumpul-about-image{min-height:230px}.kumpul-process-list{grid-template-columns:repeat(2,minmax(0,1fr))}.kumpul-process-step+.kumpul-process-step{border-left:0}.kumpul-process-step:nth-child(even){border-left:1px solid var(--kt-border)}.kumpul-process-step:nth-child(n+3){border-top:1px solid var(--kt-border)}.kumpul-gathering-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kumpul-location-list{grid-template-columns:repeat(2,minmax(0,1fr))}.kumpul-category-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.kumpul-calendar-heading{align-items:flex-start;flex-direction:column}.kumpul-calendar-stats{width:100%}.kumpul-cta{align-items:flex-start;flex-direction:column}}
     @media(max-width:620px){.kumpul-header-main{min-height:64px;padding:9px 16px}.kumpul-logo,.kumpul-logo-mark{width:40px;height:40px;border-radius:13px}.kumpul-brand-copy strong{font-size:15px}.kumpul-brand-copy small{font-size:8px}.kumpul-utilities{display:none}.kumpul-page-nav{min-height:47px;justify-content:flex-start;overflow-x:auto;padding:5px 12px}.kumpul-page-nav a{padding:7px 12px;font-size:11px}.kumpul-main{padding:16px 14px 98px}.kumpul-hero{border-radius:21px}.kumpul-hero-copy{padding:27px 22px}.kumpul-community-pill{margin-bottom:17px;font-size:9px}.kumpul-hero h1{font-size:clamp(39px,12vw,58px)}.kumpul-hero-description{margin-top:15px;font-size:13px}.kumpul-hero-actions{gap:8px;margin-top:19px}.kumpul-button{min-height:42px;padding:10px 13px;font-size:11px}.kumpul-stats{gap:20px;margin-top:22px}.kumpul-stat strong{font-size:18px}.kumpul-stat span{font-size:9px}.kumpul-feature-card{min-height:250px;padding:16px}.kumpul-feature-art>span{width:86px;height:86px;font-size:42px}.kumpul-about-section{margin-top:0;padding:22px;grid-template-columns:1fr;border-radius:21px}.kumpul-about-copy h1{font-size:clamp(34px,10vw,48px)}.kumpul-about-body{font-size:13px}.kumpul-about-art,.kumpul-about-image{min-height:230px}.kumpul-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:135px;gap:9px}.kumpul-gallery-item:nth-child(3n+2){grid-row:span 1}.kumpul-gallery-item:nth-child(4n+1){grid-row:span 2}.kumpul-gallery-item>span{font-size:38px}.kumpul-process-list{grid-template-columns:1fr}.kumpul-process-step{padding:14px;display:grid;grid-template-columns:34px 1fr;column-gap:12px}.kumpul-process-step+.kumpul-process-step,.kumpul-process-step:nth-child(even),.kumpul-process-step:nth-child(n+3){border-top:1px solid var(--kt-border);border-left:0}.kumpul-process-step .kumpul-flow-number{grid-row:span 2}.kumpul-process-step small{grid-column:2}.kumpul-section{margin-top:48px}.kumpul-section-heading .kumpul-section-title,.kumpul-cta h2{font-size:29px}.kumpul-section-description{font-size:12px}.kumpul-flow-list{grid-template-columns:1fr;border-radius:16px}.kumpul-flow-step{min-height:0;padding:13px 15px;display:grid;grid-template-columns:34px 1fr;column-gap:11px}.kumpul-flow-step+.kumpul-flow-step{border-top:1px solid var(--kt-border);border-left:0}.kumpul-flow-number{grid-row:span 2}.kumpul-flow-step strong{margin:0}.kumpul-flow-step>span:last-child{font-size:10px}.kumpul-section-topline{align-items:flex-start}.kumpul-text-link{margin-top:5px;font-size:10px}.kumpul-catalog-heading{align-items:stretch;flex-direction:column;gap:16px}.kumpul-catalog-search{width:100%;min-height:44px}.kumpul-category-filters{grid-template-columns:1fr 1fr;gap:8px}.kumpul-category-filter{padding:9px;gap:8px}.kumpul-category-icon{width:32px;height:32px}.kumpul-category-filter strong{font-size:10px}.kumpul-category-filter small{font-size:8px}.kumpul-gathering-grid{grid-template-columns:1fr;gap:12px}.kumpul-gathering-card{display:grid;grid-template-columns:112px 1fr}.kumpul-gathering-art{min-height:100%;}.kumpul-gathering-art>span:first-child{font-size:36px}.kumpul-card-content{min-width:0;padding:12px}.kumpul-card-content h3{font-size:13px}.kumpul-card-meta{font-size:9px}.kumpul-card-bottom{margin-top:9px;padding-top:8px}.kumpul-card-bottom strong{font-size:10px}.kumpul-card-bottom span{font-size:9px}.kumpul-calendar{margin-top:0}.kumpul-calendar-title{font-size:34px}.kumpul-calendar-description{font-size:12px}.kumpul-calendar-stats{gap:7px}.kumpul-calendar-stat{min-width:0;flex:1;padding:10px}.kumpul-calendar-stat strong{font-size:16px}.kumpul-calendar-stat span{font-size:9px}.kumpul-calendar-card{align-items:flex-start;flex-direction:column;padding:15px}.kumpul-calendar-invitation-action{width:100%;justify-items:start}.kumpul-calendar-action{min-height:36px}.kumpul-section-topline{align-items:flex-start}.kumpul-text-link{margin-top:5px;font-size:10px}.kumpul-testimonial-grid{grid-template-columns:1fr}.kumpul-location-list{grid-template-columns:1fr}.kumpul-cta{margin-top:48px;padding:25px 20px;border-radius:19px}.kumpul-cta-actions{width:100%}.kumpul-cta-actions .kumpul-button{flex:1}.kumpul-footer{padding:20px 15px 95px;flex-direction:column}.kumpul-mobile-dock{position:fixed;z-index:5;right:0;bottom:0;left:0;padding:9px 5px max(9px,env(safe-area-inset-bottom));display:flex;justify-content:space-around;border-top:1px solid var(--kt-border);background:#fffffff2;backdrop-filter:blur(14px)}.kumpul-mobile-dock a{min-width:0;display:grid;justify-items:center;gap:3px;color:var(--kt-muted);font-size:8px}.kumpul-mobile-dock .kumpul-icon{width:19px;height:19px}}
     @media(prefers-reduced-motion:reduce){.kumpul-template *{scroll-behavior:auto!important;transition:none!important}}
   `;
 }
-function render(props = {}) {
+function render(inputProps = {}) {
+  const kumpulPage = adaptPage(inputProps.page);
+  const props = kumpulPage ? { ...inputProps, kumpulPage } : inputProps;
   const colors = themeColors(props);
   const sections = list(props.sections);
+  if (props.headerOnly === true) {
+    return h(
+      "div",
+      { className: "kumpul-template kumpul-header-only" },
+      h("style", { dangerouslySetInnerHTML: { __html: styles(colors) } }),
+      h(Header, { ...props, activePageSlug: "" })
+    );
+  }
   const orderDetailSection = sections.find((section) => section?.type === "order_detail");
-  const activePageSlug = orderDetailSection ? orderDetailSection.content?.gatheringPlan ? "plan-detail" : "transaction-detail" : ["cart", "orders", "tagihan", "invoice-detail", "transaction-detail", "plan-detail"].includes(props.activePageSlug) ? props.activePageSlug : pageSlugForSections(sections);
+  const activePageSlug = kumpulPage ? kumpulPage.activePageSlug : orderDetailSection ? orderDetailSection.content?.gatheringPlan ? "plan-detail" : "transaction-detail" : ["cart", "orders", "tagihan", "invoice-detail", "transaction-detail", "plan-detail"].includes(props.activePageSlug) ? props.activePageSlug : pageSlugForSections(sections);
+  const calendarPageSection = kumpulPage && kumpulPage.calendar ? { id: "kalender-acara", type: "gathering_calendar", content: kumpulPage.calendar } : null;
   const catalogPage = activePageSlug === "gathering";
   const billingPage = activePageSlug === "tagihan";
   const transactionsPage = activePageSlug === "orders";
@@ -2286,7 +3021,7 @@ function render(props = {}) {
       gatherings ? h(GatheringsSection, { props, section: gatherings, catalogPage }) : null,
       sections.filter((section) => section?.type === "service_process_section").map((section) => h(ProcessSection, { ...section, key: section.id || "process" })),
       sections.filter((section) => section?.type === "faq_list").map((section) => h(FaqSection, { props, section, key: section.id || "faq" })),
-      sections.filter((section) => section?.type === "gathering_calendar").map((section) => h(CalendarSection, { props, section, key: section.id || "calendar" })),
+      calendarPageSection ? h(CalendarSection, { props, section: calendarPageSection, key: "calendar" }) : null,
       billingPage ? h(BillingSection, { props }) : null,
       transactionsPage ? h(TransactionsSection, { props }) : null,
       cartPage ? h(CartSection, { props }) : null,

package/manifest.json

@@ -2,7 +2,7 @@
   "manifestVersion": 1,
   "slug": "kumpul",
   "name": "Kumpul",
-  "version": "1.0.3",
+  "version": "1.2.0",
   "rendererApiVersion": 1,
   "businessProfiles": [
     "gathering"
@@ -29,6 +29,16 @@
     "locations_list",
     "cta"
   ],
+  "pageOverrides": [
+    "header",
+    "cart",
+    "orders",
+    "order_detail",
+    "tagihan",
+    "invoice_detail",
+    "calendar",
+    "gathering_plan"
+  ],
   "entry": {
     "server": "dist/server.cjs",
     "client": "dist/client.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bagdja/kumpul",
-  "version": "1.0.3",
+  "version": "1.2.0",
   "description": "Kumpul website template for Bagdja",
   "license": "UNLICENSED",
   "type": "commonjs",