@vicacha-devs/strapi-plugin-inbox 0.0.0-stage → 1.1.0

package/dist/admin/InboxHomePage-B5xUPD7Y.mjs

@@ -0,0 +1,2153 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Box, Flex, Typography, Button, Field, TextInput, SingleSelect, SingleSelectOption, NumberInput, Table, Thead, Tr, Th, Tbody, Td, Badge, Checkbox, Divider, Textarea, MultiSelect, MultiSelectOption, Main } from "@strapi/design-system";
+import { useFetchClient } from "@strapi/strapi/admin";
+import * as React from "react";
+import { useIntl } from "react-intl";
+import { A as ALERT_SEVERITIES, P as PLUGIN_ID, S as SUBMISSION_STATUSES, a as SUBMISSION_PRIORITIES, F as FORM_CATEGORIES, b as FORM_BUILDER_CMS_PLUGIN_ID, L as LOCALE_OPTIONS } from "./index-5e9dAMBs.mjs";
+import { useNavigate } from "react-router-dom";
+import { T as TOPIC_OPTIONS } from "./LocalizationRoutingTab-CEXbHNe4.mjs";
+const STARTER_FORM_TEMPLATES = [
+  {
+    id: "general-contact",
+    name: "General Contact & Inquiry",
+    description: "Multi-language contact form with subject routing and anti-spam protection.",
+    form: {
+      title: "General Contact",
+      slug: "general-contact",
+      description: "Send us a message and our team will respond promptly.",
+      category: "contact",
+      active: true,
+      publishedAt: "2026-01-01T00:00:00.000Z",
+      translations: {
+        es: {
+          title: "Contacto General",
+          description: "Envíanos un mensaje y nuestro equipo te responderá pronto.",
+          submitButtonLabel: "Enviar mensaje",
+          successMessage: "Gracias por contactarnos. Hemos recibido tu mensaje."
+        },
+        en: {
+          title: "General Contact",
+          description: "Send us a message and our team will respond promptly.",
+          submitButtonLabel: "Send message",
+          successMessage: "Thank you for reaching out. We have received your message."
+        },
+        ar: {
+          title: "الاتصال العام",
+          description: "أرسل لنا رسالة وسيرد فريقنا في أقرب وقت.",
+          submitButtonLabel: "إرسال الرسالة",
+          successMessage: "شكراً لتواصلك معنا. لقد استلمنا رسالتك."
+        }
+      },
+      fields: [
+        {
+          id: "fld_full_name",
+          type: "text",
+          name: "fullName",
+          label: "Full Name",
+          required: true,
+          width: "half",
+          localizedLabels: {
+            es: "Nombre completo",
+            en: "Full Name",
+            ar: "الاسم الكامل"
+          },
+          validation: [{ type: "minLength", value: 2 }]
+        },
+        {
+          id: "fld_email",
+          type: "email",
+          name: "email",
+          label: "Email Address",
+          required: true,
+          width: "half",
+          localizedLabels: {
+            es: "Correo electrónico",
+            en: "Email Address",
+            ar: "البريد الإلكتروني"
+          }
+        },
+        {
+          id: "fld_phone",
+          type: "phone",
+          name: "phone",
+          label: "Phone / WhatsApp",
+          required: false,
+          width: "half",
+          localizedLabels: {
+            es: "Teléfono / WhatsApp",
+            en: "Phone / WhatsApp",
+            ar: "الهاتف / واتساب"
+          }
+        },
+        {
+          id: "fld_subject",
+          type: "select",
+          name: "subject",
+          label: "Subject",
+          required: true,
+          width: "half",
+          localizedLabels: {
+            es: "Asunto",
+            en: "Subject",
+            ar: "الموضوع"
+          },
+          options: [
+            {
+              value: "general",
+              label: "General Inquiry",
+              localizedLabels: {
+                es: "Consulta general",
+                en: "General Inquiry",
+                ar: "استفسار عام"
+              }
+            },
+            {
+              value: "visit",
+              label: "Guided Visit",
+              localizedLabels: {
+                es: "Visita guiada",
+                en: "Guided Visit",
+                ar: "زيارة إرشادية"
+              }
+            },
+            {
+              value: "support",
+              label: "Support & Assistance",
+              localizedLabels: {
+                es: "Apoyo y asistencia",
+                en: "Support & Assistance",
+                ar: "الدعم والمساعدة"
+              }
+            }
+          ]
+        },
+        {
+          id: "fld_message",
+          type: "textarea",
+          name: "message",
+          label: "Message",
+          required: true,
+          width: "full",
+          localizedLabels: {
+            es: "Mensaje",
+            en: "Message",
+            ar: "الرسالة"
+          },
+          validation: [
+            { type: "minLength", value: 10 },
+            { type: "maxLength", value: 2e3 }
+          ]
+        }
+      ],
+      settings: {
+        honeypotField: "_website_url",
+        rateLimitPerHour: 15,
+        captchaProvider: "none",
+        defaultPriority: "normal",
+        department: "general"
+      }
+    }
+  },
+  {
+    id: "service-desk-application",
+    name: "Service-Desk Casework & Document Checklist",
+    description: "Casework intake form with document verification checklist, booking bridge, and certificate bridge.",
+    form: {
+      title: "Formal Service Request",
+      slug: "service-request",
+      description: "Submit an official service application and required supporting documents.",
+      category: "service_desk",
+      active: true,
+      publishedAt: "2026-01-01T00:00:00.000Z",
+      translations: {
+        es: {
+          title: "Solicitud Formal de Servicio",
+          description: "Envía una solicitud oficial de servicio con los documentos requeridos.",
+          submitButtonLabel: "Radicar solicitud",
+          successMessage: "Tu solicitud ha sido radicada con éxito."
+        },
+        en: {
+          title: "Formal Service Request",
+          description: "Submit an official service application and required supporting documents.",
+          submitButtonLabel: "Submit application",
+          successMessage: "Your application has been registered."
+        },
+        ar: {
+          title: "طلب خدمة رسمي",
+          description: "قدم طلب خدمة رسمي مع المستندات المطلوبة.",
+          submitButtonLabel: "تقديم الطلب",
+          successMessage: "تم تسجيل طلبك بنجاح."
+        }
+      },
+      fields: [
+        {
+          id: "fld_applicant_name",
+          type: "text",
+          name: "applicantName",
+          label: "Applicant Full Name",
+          required: true,
+          width: "half",
+          localizedLabels: {
+            es: "Nombre completo del solicitante",
+            en: "Applicant Full Name",
+            ar: "الاسم الكامل لمقدم الطلب"
+          }
+        },
+        {
+          id: "fld_applicant_email",
+          type: "email",
+          name: "applicantEmail",
+          label: "Applicant Email",
+          required: true,
+          width: "half",
+          localizedLabels: {
+            es: "Correo del solicitante",
+            en: "Applicant Email",
+            ar: "البريد الإلكتروني لمقدم الطلب"
+          }
+        },
+        {
+          id: "fld_applicant_phone",
+          type: "phone",
+          name: "applicantPhone",
+          label: "Contact Phone",
+          required: true,
+          width: "half",
+          localizedLabels: {
+            es: "Teléfono de contacto",
+            en: "Contact Phone",
+            ar: "هاتف الاتصال"
+          }
+        },
+        {
+          id: "fld_preferred_date",
+          type: "date",
+          name: "preferredDate",
+          label: "Preferred Appointment Date",
+          required: false,
+          width: "half",
+          localizedLabels: {
+            es: "Fecha preferida de cita",
+            en: "Preferred Appointment Date",
+            ar: "تاريخ الموعد المفضل"
+          }
+        },
+        {
+          id: "fld_details",
+          type: "textarea",
+          name: "details",
+          label: "Case Details & Notes",
+          required: true,
+          width: "full",
+          localizedLabels: {
+            es: "Detalles del caso y observaciones",
+            en: "Case Details & Notes",
+            ar: "تفاصيل الطلب والملاحظات"
+          }
+        }
+      ],
+      checklistTemplate: [
+        {
+          id: "chk_id_document",
+          label: "Government ID / Passport Copy",
+          required: true,
+          verified: false,
+          localizedLabels: {
+            es: "Copia de documento de identidad / Pasaporte",
+            en: "Government ID / Passport Copy",
+            ar: "نسخة من بطاقة الهوية أو جواز السفر"
+          }
+        },
+        {
+          id: "chk_supporting_form",
+          label: "Signed Application Form",
+          required: true,
+          verified: false,
+          localizedLabels: {
+            es: "Formulario de solicitud firmado",
+            en: "Signed Application Form",
+            ar: "نموذج الطلب الموقع"
+          }
+        }
+      ],
+      settings: {
+        honeypotField: "_website_url",
+        rateLimitPerHour: 10,
+        captchaProvider: "none",
+        enableBookingBridge: true,
+        enableCertificateBridge: true,
+        defaultPriority: "normal",
+        department: "services"
+      }
+    }
+  }
+];
+const cardBorderStyle$1 = {
+  border: "1px solid rgba(128, 128, 128, 0.2)"
+};
+const AlertBannersTab = ({
+  t,
+  alerts,
+  post,
+  onStatusMessage,
+  onReload
+}) => {
+  const [showCreateForm, setShowCreateForm] = React.useState(false);
+  const [newAlertCode, setNewAlertCode] = React.useState("");
+  const [newAlertSeverity, setNewAlertSeverity] = React.useState("urgent");
+  const [newAlertPriority, setNewAlertPriority] = React.useState(100);
+  const [newAlertTitle, setNewAlertTitle] = React.useState("");
+  const [newAlertMessage, setNewAlertMessage] = React.useState("");
+  const [newAlertCtaLabel, setNewAlertCtaLabel] = React.useState("");
+  const [newAlertCtaUrl, setNewAlertCtaUrl] = React.useState("");
+  const handleCreateAlert = async () => {
+    if (!newAlertCode || !newAlertTitle || !newAlertMessage) return;
+    await post(`/${PLUGIN_ID}/alerts`, {
+      code: newAlertCode,
+      title: newAlertTitle,
+      message: newAlertMessage,
+      severity: newAlertSeverity,
+      active: true,
+      priority: newAlertPriority,
+      ctaLabel: newAlertCtaLabel || void 0,
+      ctaUrl: newAlertCtaUrl || void 0
+    });
+    setNewAlertCode("");
+    setNewAlertTitle("");
+    setNewAlertMessage("");
+    setNewAlertCtaLabel("");
+    setNewAlertCtaUrl("");
+    setShowCreateForm(false);
+    onStatusMessage("Site-wide alert banner saved");
+    await onReload();
+  };
+  return /* @__PURE__ */ jsxs(Box, { paddingTop: 5, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingBottom: 4,
+        wrap: "wrap",
+        gap: 3,
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", children: t("page.ui.alert_banners_list", "Site-Wide Alert Banners") }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "S",
+              variant: showCreateForm ? "tertiary" : "default",
+              onClick: () => setShowCreateForm(!showCreateForm),
+              children: showCreateForm ? t("page.ui.cancel", "Cancel") : t("page.ui.new_alert_banner", "+ New Alert Banner")
+            }
+          )
+        ]
+      }
+    ),
+    showCreateForm ? /* @__PURE__ */ jsxs(
+      Box,
+      {
+        padding: 5,
+        marginBottom: 5,
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "filterShadow",
+        style: cardBorderStyle$1,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              justifyContent: "space-between",
+              alignItems: "center",
+              paddingBottom: 3,
+              wrap: "wrap",
+              gap: 2,
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h3", fontWeight: "bold", children: t(
+                  "page.ui.publish_urgent_site_wide_alert_banner",
+                  "Publish Site-Wide Alert Banner"
+                ) }),
+                /* @__PURE__ */ jsx(Button, { size: "S", onClick: handleCreateAlert, children: t("page.ui.save_alert_banner", "Save Alert Banner") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+                gap: 16
+              },
+              children: [
+                /* @__PURE__ */ jsxs(Field.Root, { name: "code", required: true, children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: t("field.alert_code", "Alert Code") }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      name: "code",
+                      placeholder: t("placeholder.alert_code", "RAMADAN-1448-HILAL"),
+                      value: newAlertCode,
+                      onChange: (e) => setNewAlertCode(e.target.value)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Field.Root, { name: "severity", required: true, children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: t("field.severity_level", "Severity") }),
+                  /* @__PURE__ */ jsx(
+                    SingleSelect,
+                    {
+                      value: newAlertSeverity,
+                      onChange: (val) => setNewAlertSeverity(String(val)),
+                      children: ALERT_SEVERITIES.map((sev) => /* @__PURE__ */ jsx(SingleSelectOption, { value: sev, children: sev.toUpperCase() }, sev))
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Field.Root, { name: "priority", children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: t("field.display_priority", "Priority") }),
+                  /* @__PURE__ */ jsx(
+                    NumberInput,
+                    {
+                      name: "priority",
+                      value: newAlertPriority,
+                      onValueChange: (val) => setNewAlertPriority(typeof val === "number" ? val : 100)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Field.Root, { name: "title", required: true, children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: t("field.headline_title", "Headline") }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      name: "title",
+                      placeholder: t(
+                        "placeholder.alert_headline",
+                        "Moon-Sighting Announcement"
+                      ),
+                      value: newAlertTitle,
+                      onChange: (e) => setNewAlertTitle(e.target.value)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Field.Root, { name: "message", required: true, children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: t("field.ticker_message", "Message") }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      name: "message",
+                      placeholder: t(
+                        "placeholder.alert_message",
+                        "The first day of Ramadan will be..."
+                      ),
+                      value: newAlertMessage,
+                      onChange: (e) => setNewAlertMessage(e.target.value)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Field.Root, { name: "ctaLabel", children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: t("field.cta_button_label_optional", "CTA Label") }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      name: "ctaLabel",
+                      placeholder: t("placeholder.alert_cta_label", "View Schedule"),
+                      value: newAlertCtaLabel,
+                      onChange: (e) => setNewAlertCtaLabel(e.target.value)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs(Field.Root, { name: "ctaUrl", children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: t("field.cta_target_url_optional", "CTA URL") }),
+                  /* @__PURE__ */ jsx(
+                    TextInput,
+                    {
+                      name: "ctaUrl",
+                      placeholder: t("placeholder.alert_cta_url", "/es/ramadan"),
+                      value: newAlertCtaUrl,
+                      onChange: (e) => setNewAlertCtaUrl(e.target.value)
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(Table, { colCount: 5, rowCount: alerts.length + 1, children: [
+      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.code", "Code") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.severity", "Severity") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.title", "Headline") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.message", "Message") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.secondary_calendar", "Hijri Date") }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tbody, { children: alerts.map((banner) => /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: banner.code }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Badge, { children: banner.severity }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: banner.title }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: banner.message }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: banner.secondaryDateLabel || "-" }) })
+      ] }, banner.code)) })
+    ] })
+  ] });
+};
+function formatFieldKeyLabel(rawKey) {
+  return rawKey.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim().replace(/\b\w/g, (ch) => ch.toUpperCase());
+}
+const CaseworkPayloadChecklistColumn = ({
+  t,
+  shortLocale,
+  dataEntries,
+  form,
+  checklist,
+  onToggleChecklistItem
+}) => {
+  const resolveFieldLabel = (key) => {
+    const matchedField = form?.fields?.find((f) => f.name === key);
+    if (matchedField) {
+      return matchedField.localizedLabels?.[shortLocale] || matchedField.label || formatFieldKeyLabel(key);
+    }
+    return formatFieldKeyLabel(key);
+  };
+  const resolveFieldValue = (key, val) => {
+    if (val === null || val === void 0 || val === "") return "-";
+    if (typeof val === "object") return JSON.stringify(val);
+    const strVal = String(val);
+    const matchedField = form?.fields?.find((f) => f.name === key);
+    const matchedOption = matchedField?.options?.find(
+      (o) => o.value === strVal
+    );
+    if (matchedOption) {
+      return matchedOption.localizedLabels?.[shortLocale] || matchedOption.label;
+    }
+    return strVal;
+  };
+  return /* @__PURE__ */ jsxs(Box, { style: { flex: "1 1 360px" }, children: [
+    /* @__PURE__ */ jsxs(Box, { paddingBottom: 4, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("page.ui.submitted_form_payload", "Submitted Form Payload") }),
+      /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 3, hasRadius: true, marginTop: 2, children: dataEntries.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: t(
+        "page.ui.no_payload_fields",
+        "No custom payload fields recorded."
+      ) }) : /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 0, children: dataEntries.map(([key, val], idx) => /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          justifyContent: "space-between",
+          alignItems: "baseline",
+          gap: 3,
+          paddingTop: 2,
+          paddingBottom: 2,
+          style: {
+            borderBottom: idx < dataEntries.length - 1 ? "1px solid rgba(128, 128, 128, 0.14)" : "none"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "pi",
+                fontWeight: "bold",
+                textColor: "neutral600",
+                style: { textTransform: "capitalize" },
+                children: resolveFieldLabel(key)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "pi",
+                fontWeight: "semiBold",
+                textColor: "neutral800",
+                style: { textAlign: "right" },
+                children: resolveFieldValue(key, val)
+              }
+            )
+          ]
+        },
+        key
+      )) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "sigma", textColor: "neutral600", children: [
+        t(
+          "page.ui.document_verification_checklist",
+          "Document Verification Checklist"
+        ),
+        " ",
+        "(",
+        checklist.filter((c) => c.verified).length,
+        "/",
+        checklist.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 3, hasRadius: true, marginTop: 2, children: checklist.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: t(
+        "page.ui.no_checklist",
+        "No verification checklist attached to this form."
+      ) }) : /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: checklist.map((item) => /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: 2,
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: Boolean(item.verified),
+                onCheckedChange: (checked) => onToggleChecklistItem(item.id, Boolean(checked)),
+                children: item.localizedLabels?.[shortLocale] || item.label
+              }
+            ),
+            /* @__PURE__ */ jsx(Badge, { active: Boolean(item.verified), children: item.verified ? t("page.ui.verified", "Verified") : item.required ? t("page.ui.required", "Required") : t("page.ui.optional", "Optional") })
+          ]
+        },
+        item.id
+      )) }) })
+    ] })
+  ] });
+};
+const CaseworkHeaderBar = ({
+  t,
+  submission,
+  onClose
+}) => /* @__PURE__ */ jsxs(
+  Flex,
+  {
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingBottom: 3,
+    wrap: "wrap",
+    gap: 2,
+    children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "delta", fontWeight: "bold", children: [
+          t("page.ui.casework_inspector", "Casework Inspector"),
+          ":",
+          " ",
+          submission.referenceCode
+        ] }),
+        /* @__PURE__ */ jsx(Badge, { children: submission.formSlug }),
+        submission.secondaryDate?.formatted ? /* @__PURE__ */ jsx(Badge, { children: submission.secondaryDate.formatted }) : null,
+        submission.linkedBookingId ? /* @__PURE__ */ jsxs(Badge, { active: true, children: [
+          t("page.ui.booking_badge", "Booking"),
+          ": ",
+          submission.linkedBookingId
+        ] }) : null,
+        submission.linkedCertificateNumber ? /* @__PURE__ */ jsxs(Badge, { active: true, children: [
+          t("page.ui.cert_badge", "Cert"),
+          ":",
+          " ",
+          submission.linkedCertificateNumber
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "S", onClick: onClose, children: t("page.ui.close_inspector", "Close Inspector") })
+    ]
+  }
+);
+const CaseworkQuickBridges = ({
+  t,
+  bookingServiceSlug,
+  onBookingServiceSlugChange,
+  bookingDate,
+  onBookingDateChange,
+  bookingTime,
+  onBookingTimeChange,
+  onBookSlot,
+  certTemplateSlug,
+  onCertTemplateSlugChange,
+  certRecipient,
+  onCertRecipientChange,
+  requireVerifiedChecklist,
+  onRequireVerifiedChecklistChange,
+  onIssueCert
+}) => /* @__PURE__ */ jsxs(Flex, { gap: 3, paddingTop: 3, wrap: "wrap", alignItems: "stretch", children: [
+  /* @__PURE__ */ jsxs(
+    Box,
+    {
+      background: "neutral100",
+      padding: 3,
+      hasRadius: true,
+      style: { flex: "1 1 180px" },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.schedule_appointment", "Schedule Appointment") }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, paddingTop: 2, children: [
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              name: "bookingServiceSlug",
+              placeholder: t("placeholder.service_slug", "Service slug"),
+              value: bookingServiceSlug,
+              onChange: (e) => onBookingServiceSlugChange(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                name: "bookingDate",
+                type: "date",
+                value: bookingDate,
+                onChange: (e) => onBookingDateChange(e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                name: "bookingTime",
+                placeholder: "10:00",
+                value: bookingTime,
+                onChange: (e) => onBookingTimeChange(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Button, { size: "S", variant: "secondary", onClick: onBookSlot, children: t("page.ui.book_slot", "Book Slot") })
+        ] })
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsxs(
+    Box,
+    {
+      background: "neutral100",
+      padding: 3,
+      hasRadius: true,
+      style: { flex: "1 1 180px" },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.issue_certificate", "Issue Certificate") }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, paddingTop: 2, children: [
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              name: "certTemplateSlug",
+              placeholder: t("placeholder.template_slug", "Template slug"),
+              value: certTemplateSlug,
+              onChange: (e) => onCertTemplateSlugChange(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              name: "certRecipient",
+              placeholder: t(
+                "placeholder.recipient_full_name",
+                "Recipient full name"
+              ),
+              value: certRecipient,
+              onChange: (e) => onCertRecipientChange(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: requireVerifiedChecklist,
+              onCheckedChange: (c) => onRequireVerifiedChecklistChange(Boolean(c)),
+              children: t(
+                "page.ui.require_verified_checklist",
+                "Require verified checklist"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { size: "S", variant: "secondary", onClick: onIssueCert, children: t("page.ui.issue_cert", "Issue Cert") })
+        ] })
+      ]
+    }
+  )
+] });
+const CaseworkDetailPanel = ({
+  t,
+  submission,
+  form,
+  post,
+  put,
+  onStatusMessage,
+  onReload,
+  onClose
+}) => {
+  const { locale } = useIntl();
+  const shortLocale = (locale || "es").split("-")[0].toLowerCase();
+  const [status, setStatus] = React.useState(
+    submission.status
+  );
+  const [priority, setPriority] = React.useState(
+    submission.priority
+  );
+  const [department, setDepartment] = React.useState(
+    submission.department || "general"
+  );
+  const [assignedTo, setAssignedTo] = React.useState(
+    submission.assignedTo || ""
+  );
+  const [staffNotes, setStaffNotes] = React.useState(
+    submission.staffNotes || ""
+  );
+  const [checklist, setChecklist] = React.useState(
+    submission.checklistItems || []
+  );
+  const [bookingServiceSlug, setBookingServiceSlug] = React.useState(
+    form?.settings?.defaultBookingServiceSlug || "general-appointment"
+  );
+  const [bookingDate, setBookingDate] = React.useState(
+    (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)
+  );
+  const [bookingTime, setBookingTime] = React.useState("10:00");
+  const [certTemplateSlug, setCertTemplateSlug] = React.useState(
+    form?.settings?.defaultCertificateTemplateId || "official-service-certificate"
+  );
+  const [certRecipient, setCertRecipient] = React.useState(
+    submission.applicantName || ""
+  );
+  const [requireVerifiedChecklist, setRequireVerifiedChecklist] = React.useState(true);
+  React.useEffect(() => {
+    setStatus(submission.status);
+    setPriority(submission.priority);
+    setDepartment(submission.department || "general");
+    setAssignedTo(submission.assignedTo || "");
+    setStaffNotes(submission.staffNotes || "");
+    setChecklist(submission.checklistItems || []);
+    setCertRecipient(submission.applicantName || "");
+  }, [submission]);
+  const handleToggleChecklistItem = async (itemId, verified) => {
+    const nextChecklist = checklist.map(
+      (item) => item.id === itemId ? {
+        ...item,
+        verified,
+        verifiedAt: verified ? (/* @__PURE__ */ new Date()).toISOString() : void 0
+      } : item
+    );
+    setChecklist(nextChecklist);
+    if (!submission.documentId) return;
+    await put(`/${PLUGIN_ID}/submissions/${submission.documentId}/casework`, {
+      checklistItems: nextChecklist
+    });
+    onStatusMessage(
+      `${t("page.ui.checklist_updated", "Checklist updated")}: ${submission.referenceCode}`
+    );
+    await onReload();
+  };
+  const handleSaveCasework = async () => {
+    if (!submission.documentId) return;
+    await put(`/${PLUGIN_ID}/submissions/${submission.documentId}/casework`, {
+      status,
+      priority,
+      department,
+      assignedTo,
+      staffNotes,
+      checklistItems: checklist
+    });
+    onStatusMessage(
+      `${t("page.ui.casework_saved", "Saved casework updates")}: ${submission.referenceCode}`
+    );
+    await onReload();
+  };
+  const handleCustomBooking = async () => {
+    if (!submission.documentId) return;
+    await post(
+      `/${PLUGIN_ID}/submissions/${submission.documentId}/schedule-booking`,
+      {
+        serviceSlug: bookingServiceSlug,
+        date: bookingDate,
+        startTime: bookingTime,
+        notes: staffNotes || `Casework Ref: ${submission.referenceCode}`
+      }
+    );
+    onStatusMessage(
+      `${t("page.ui.appointment_scheduled", "Appointment scheduled")} (${bookingDate} ${bookingTime})`
+    );
+    await onReload();
+  };
+  const handleCustomCertificate = async () => {
+    if (!submission.documentId) return;
+    try {
+      await post(
+        `/${PLUGIN_ID}/submissions/${submission.documentId}/issue-certificate`,
+        {
+          templateSlug: certTemplateSlug,
+          recipientName: certRecipient || submission.applicantName,
+          requireChecklistVerified: requireVerifiedChecklist
+        }
+      );
+      onStatusMessage(
+        `${t("page.ui.certificate_issued", "Certificate issued")}: ${submission.referenceCode}`
+      );
+      await onReload();
+    } catch (err) {
+      const fallbackError = t(
+        "page.ui.verify_checklist_error",
+        "Cannot issue certificate: verify required checklist items first"
+      );
+      onStatusMessage(err instanceof Error ? err.message : fallbackError);
+    }
+  };
+  const dataEntries = Object.entries(submission.data || {});
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      background: "neutral0",
+      padding: 5,
+      shadow: "filterShadow",
+      hasRadius: true,
+      marginBottom: 5,
+      children: [
+        /* @__PURE__ */ jsx(CaseworkHeaderBar, { t, submission, onClose }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(Flex, { gap: 5, paddingTop: 4, alignItems: "flex-start", wrap: "wrap", children: [
+          /* @__PURE__ */ jsx(
+            CaseworkPayloadChecklistColumn,
+            {
+              t,
+              shortLocale,
+              dataEntries,
+              form,
+              checklist,
+              onToggleChecklistItem: handleToggleChecklistItem
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { style: { flex: "1 1 400px" }, children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 3, wrap: "wrap", children: [
+              /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 130px" }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: t("page.ui.status", "Status") }),
+                /* @__PURE__ */ jsx(
+                  SingleSelect,
+                  {
+                    value: status,
+                    onChange: (v) => setStatus(v),
+                    children: SUBMISSION_STATUSES.map((st) => /* @__PURE__ */ jsx(SingleSelectOption, { value: st, children: st }, st))
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 130px" }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: t("page.ui.priority", "Priority") }),
+                /* @__PURE__ */ jsx(
+                  SingleSelect,
+                  {
+                    value: priority,
+                    onChange: (v) => setPriority(v),
+                    children: SUBMISSION_PRIORITIES.map((pr) => /* @__PURE__ */ jsx(SingleSelectOption, { value: pr, children: pr }, pr))
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 150px" }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: t("page.ui.assignee", "Assignee") }),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    name: "assignedTo",
+                    placeholder: t(
+                      "placeholder.assignee_example",
+                      "e.g. Sheikh Ahmad"
+                    ),
+                    value: assignedTo,
+                    onChange: (e) => setAssignedTo(e.target.value)
+                  }
+                )
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { paddingTop: 3, paddingBottom: 3, children: [
+              /* @__PURE__ */ jsxs(Field.Root, { children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: t("page.ui.internal_staff_notes", "Internal Staff Notes") }),
+                /* @__PURE__ */ jsx(
+                  Textarea,
+                  {
+                    name: "staffNotes",
+                    value: staffNotes,
+                    onChange: (e) => setStaffNotes(e.target.value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", paddingTop: 2, children: /* @__PURE__ */ jsx(Button, { size: "S", onClick: handleSaveCasework, children: t("page.ui.save_casework_notes", "Save Casework & Notes") }) })
+            ] }),
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsx(
+              CaseworkQuickBridges,
+              {
+                t,
+                bookingServiceSlug,
+                onBookingServiceSlugChange: setBookingServiceSlug,
+                bookingDate,
+                onBookingDateChange: setBookingDate,
+                bookingTime,
+                onBookingTimeChange: setBookingTime,
+                onBookSlot: handleCustomBooking,
+                certTemplateSlug,
+                onCertTemplateSlugChange: setCertTemplateSlug,
+                certRecipient,
+                onCertRecipientChange: setCertRecipient,
+                requireVerifiedChecklist,
+                onRequireVerifiedChecklistChange: setRequireVerifiedChecklist,
+                onIssueCert: handleCustomCertificate
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+const matchesSubmissionFilters = (sub, statusFilter, priorityFilter, searchQuery) => {
+  if (statusFilter !== "all" && sub.status !== statusFilter) return false;
+  if (priorityFilter !== "all" && sub.priority !== priorityFilter) return false;
+  const q = searchQuery.trim().toLowerCase();
+  if (!q) return true;
+  const haystack = [
+    sub.referenceCode,
+    sub.formSlug,
+    sub.department,
+    sub.applicantName,
+    sub.applicantEmail
+  ].filter(Boolean).join(" ").toLowerCase();
+  return haystack.includes(q);
+};
+const SubmissionRow = ({
+  t,
+  sub,
+  isSelected,
+  onToggleInspect,
+  onScheduleBooking,
+  onIssueCertificate,
+  onMarkCompleted
+}) => {
+  const items = sub.checklistItems || [];
+  const totalChecklist = items.length;
+  const verifiedChecklist = items.filter((c) => c.verified).length;
+  const linkedSummary = [sub.linkedBookingId, sub.linkedCertificateNumber].filter(Boolean).join(" • ");
+  return /* @__PURE__ */ jsxs(Tr, { children: [
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+      /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: sub.referenceCode }),
+      linkedSummary ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: linkedSummary }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", children: [
+      /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: sub.applicantName || t("page.ui.anonymous", "Anonymous") }),
+      sub.applicantEmail ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: sub.applicantEmail }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+      /* @__PURE__ */ jsxs(Typography, { children: [
+        sub.formSlug,
+        " (",
+        sub.department || "general",
+        ")"
+      ] }),
+      totalChecklist > 0 ? /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+        t("page.ui.checklist", "Checklist"),
+        ": ",
+        verifiedChecklist,
+        "/",
+        totalChecklist,
+        " ",
+        t("page.ui.verified", "verified")
+      ] }) : null
+    ] }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsx(Badge, { children: sub.status }),
+      /* @__PURE__ */ jsx(Badge, { children: sub.priority })
+    ] }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", children: [
+      /* @__PURE__ */ jsx(Typography, { children: sub.submittedAt?.slice(0, 10) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: sub.secondaryDate?.formatted || "-" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "S",
+          variant: isSelected ? "default" : "tertiary",
+          onClick: () => onToggleInspect(sub.referenceCode, isSelected),
+          children: isSelected ? t("page.ui.hide_details", "Close") : t("page.ui.inspect", "Inspect")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "S",
+          variant: "secondary",
+          onClick: () => onScheduleBooking(sub.documentId),
+          children: t("page.ui.book_slot", "Book Slot")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "S",
+          variant: "secondary",
+          onClick: () => onIssueCertificate(sub.documentId),
+          children: t("page.ui.issue_cert", "Issue Cert")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "S",
+          variant: "tertiary",
+          onClick: () => onMarkCompleted(sub.documentId),
+          children: t("page.ui.complete", "Complete")
+        }
+      )
+    ] }) })
+  ] }, sub.referenceCode);
+};
+const CaseworkSubmissionsTab = ({
+  t,
+  submissions,
+  forms = [],
+  post,
+  put,
+  onStatusMessage,
+  onReload
+}) => {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [statusFilter, setStatusFilter] = React.useState("all");
+  const [priorityFilter, setPriorityFilter] = React.useState("all");
+  const [selectedRefCode, setSelectedRefCode] = React.useState(
+    null
+  );
+  const selectedSubmission = React.useMemo(
+    () => submissions.find((s) => s.referenceCode === selectedRefCode) || null,
+    [submissions, selectedRefCode]
+  );
+  const selectedForm = React.useMemo(
+    () => selectedSubmission ? forms.find((f) => f.slug === selectedSubmission.formSlug) || null : null,
+    [forms, selectedSubmission]
+  );
+  const handleScheduleBooking = async (documentId) => {
+    if (!documentId) return;
+    await post(`/${PLUGIN_ID}/submissions/${documentId}/schedule-booking`, {
+      serviceSlug: "general-appointment",
+      date: (/* @__PURE__ */ new Date()).toISOString().slice(0, 10),
+      startTime: "10:00"
+    });
+    onStatusMessage("Appointment scheduled via Bookings bridge");
+    await onReload();
+  };
+  const handleIssueCertificate = async (documentId) => {
+    if (!documentId) return;
+    await post(`/${PLUGIN_ID}/submissions/${documentId}/issue-certificate`, {
+      requireChecklistVerified: false
+    });
+    onStatusMessage("Certificate issued via Certificates bridge");
+    await onReload();
+  };
+  const handleMarkCompleted = async (documentId) => {
+    if (!documentId) return;
+    await put(`/${PLUGIN_ID}/submissions/${documentId}/casework`, {
+      status: "completed"
+    });
+    onStatusMessage("Submission marked as completed");
+    await onReload();
+  };
+  const filteredSubmissions = React.useMemo(
+    () => submissions.filter(
+      (sub) => matchesSubmissionFilters(sub, statusFilter, priorityFilter, searchQuery)
+    ),
+    [submissions, statusFilter, priorityFilter, searchQuery]
+  );
+  return /* @__PURE__ */ jsxs(Box, { paddingTop: 5, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingBottom: 4,
+        wrap: "wrap",
+        gap: 3,
+        children: [
+          /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 280px", maxWidth: 420 }, children: /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              name: "searchSubmissions",
+              placeholder: t(
+                "placeholder.search_submissions",
+                "Search by reference code, applicant, or form..."
+              ),
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value)
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Flex, { gap: 3, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(Box, { style: { minWidth: 170 }, children: /* @__PURE__ */ jsxs(
+              SingleSelect,
+              {
+                value: statusFilter,
+                onChange: (val) => setStatusFilter(String(val)),
+                children: [
+                  /* @__PURE__ */ jsx(SingleSelectOption, { value: "all", children: t("page.ui.all_statuses", "Status: All") }),
+                  SUBMISSION_STATUSES.map((st) => /* @__PURE__ */ jsxs(SingleSelectOption, { value: st, children: [
+                    t("page.ui.status", "Status"),
+                    ": ",
+                    st
+                  ] }, st))
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Box, { style: { minWidth: 170 }, children: /* @__PURE__ */ jsxs(
+              SingleSelect,
+              {
+                value: priorityFilter,
+                onChange: (val) => setPriorityFilter(String(val)),
+                children: [
+                  /* @__PURE__ */ jsx(SingleSelectOption, { value: "all", children: t("page.ui.all_priorities", "Priority: All") }),
+                  SUBMISSION_PRIORITIES.map((pr) => /* @__PURE__ */ jsxs(SingleSelectOption, { value: pr, children: [
+                    t("page.ui.priority", "Priority"),
+                    ": ",
+                    pr
+                  ] }, pr))
+                ]
+              }
+            ) })
+          ] })
+        ]
+      }
+    ),
+    selectedSubmission ? /* @__PURE__ */ jsx(
+      CaseworkDetailPanel,
+      {
+        t,
+        submission: selectedSubmission,
+        form: selectedForm,
+        post,
+        put,
+        onStatusMessage,
+        onReload,
+        onClose: () => setSelectedRefCode(null)
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(Table, { colCount: 6, rowCount: filteredSubmissions.length + 1, children: [
+      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.ref_code", "Reference") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.applicant", "Applicant") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.form_dept", "Form & Dept") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.status_priority", "Status") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.date_secondary", "Submitted (Hijri)") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.actions", "Actions") }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tbody, { children: filteredSubmissions.map((sub) => /* @__PURE__ */ jsx(
+        SubmissionRow,
+        {
+          t,
+          sub,
+          isSelected: selectedRefCode === sub.referenceCode,
+          onToggleInspect: (refCode, selected) => setSelectedRefCode(selected ? null : refCode),
+          onScheduleBooking: handleScheduleBooking,
+          onIssueCertificate: handleIssueCertificate,
+          onMarkCompleted: handleMarkCompleted
+        },
+        sub.referenceCode
+      )) })
+    ] })
+  ] });
+};
+const SUPPORTED_FORM_LOCALES = ["es", "en", "ar"];
+const FormChecklistAndLocalePanels = ({
+  t,
+  checklistItems,
+  newChecklistLabel,
+  onNewChecklistLabelChange,
+  onAddChecklistItem,
+  onRemoveChecklistItem,
+  onUpdateChecklistItemLabel,
+  activeLocale,
+  onActiveLocaleChange,
+  translations,
+  onUpdateTranslationField
+}) => {
+  const currentTranslation = translations[activeLocale] || {};
+  return /* @__PURE__ */ jsxs(Flex, { gap: 5, paddingTop: 4, wrap: "wrap", alignItems: "flex-start", children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        padding: 4,
+        background: "neutral100",
+        hasRadius: true,
+        style: { flex: "1 1 340px" },
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsxs(Typography, { variant: "sigma", textColor: "neutral600", children: [
+              t(
+                "page.ui.required_verification_documents",
+                "Required Verification Documents"
+              ),
+              " ",
+              "(",
+              checklistItems.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx(Badge, { children: activeLocale.toUpperCase() })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, paddingTop: 2, children: [
+            checklistItems.map((item) => {
+              const displayLabel = item.localizedLabels?.[activeLocale] ?? item.label;
+              return /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  gap: 2,
+                  padding: 2,
+                  background: "neutral0",
+                  hasRadius: true,
+                  children: [
+                    /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: onUpdateChecklistItemLabel ? /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        name: `chk_${item.id}`,
+                        value: displayLabel,
+                        onChange: (e) => onUpdateChecklistItemLabel(item.id, e.target.value)
+                      }
+                    ) : /* @__PURE__ */ jsx(Typography, { variant: "omega", children: displayLabel }) }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        size: "S",
+                        variant: "danger-light",
+                        onClick: () => onRemoveChecklistItem(item.id),
+                        children: t("page.ui.remove", "Remove")
+                      }
+                    )
+                  ]
+                },
+                item.id
+              );
+            }),
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, paddingTop: 2, children: [
+              /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  name: "newChecklistLabel",
+                  placeholder: t(
+                    "placeholder.add_required_document",
+                    "Add required document (e.g., Valid National ID)..."
+                  ),
+                  value: newChecklistLabel,
+                  onChange: (e) => onNewChecklistLabelChange(e.target.value)
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Button, { size: "S", variant: "secondary", onClick: onAddChecklistItem, children: t("page.ui.add_item", "+ Add") })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        padding: 4,
+        background: "neutral100",
+        hasRadius: true,
+        style: { flex: "1 1 360px" },
+        children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              justifyContent: "space-between",
+              alignItems: "center",
+              paddingBottom: 2,
+              children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t(
+                  "page.ui.form_localization_header",
+                  "Form Localization (es / en / ar)"
+                ) }),
+                /* @__PURE__ */ jsx(Flex, { gap: 1, children: SUPPORTED_FORM_LOCALES.map((loc) => /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "S",
+                    variant: activeLocale === loc ? "default" : "tertiary",
+                    onClick: () => onActiveLocaleChange(loc),
+                    children: loc.toUpperCase()
+                  },
+                  loc
+                )) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                name: "localizedTitle",
+                placeholder: `${t("placeholder.localized_title", "Localized title")} (${activeLocale})`,
+                value: currentTranslation.title || "",
+                onChange: (e) => onUpdateTranslationField("title", e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                name: "localizedDescription",
+                placeholder: `${t("placeholder.localized_description", "Localized description")} (${activeLocale})`,
+                value: currentTranslation.description || "",
+                onChange: (e) => onUpdateTranslationField("description", e.target.value)
+              }
+            ),
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+              /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  name: "localizedSubmit",
+                  placeholder: `${t("placeholder.localized_submit_label", "Submit label")} (${activeLocale})`,
+                  value: currentTranslation.submitButtonLabel || "",
+                  onChange: (e) => onUpdateTranslationField("submitButtonLabel", e.target.value)
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  name: "localizedSuccess",
+                  placeholder: `${t("placeholder.localized_success_message", "Success message")} (${activeLocale})`,
+                  value: currentTranslation.successMessage || "",
+                  onChange: (e) => onUpdateTranslationField("successMessage", e.target.value)
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx(Flex, { gap: 1, paddingTop: 1, children: SUPPORTED_FORM_LOCALES.map(
+              (loc) => translations[loc]?.title ? /* @__PURE__ */ jsxs(Badge, { children: [
+                loc.toUpperCase(),
+                " ",
+                t("page.ui.ready", "Ready")
+              ] }, loc) : null
+            ) })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+const FormRoutingDrawer = ({
+  t,
+  form,
+  post,
+  onStatusMessage,
+  onReload,
+  onClose
+}) => {
+  const [editCategory, setEditCategory] = React.useState(
+    form.category || "contact"
+  );
+  const [editDepartment, setEditDepartment] = React.useState(
+    form.settings?.department || "general"
+  );
+  const [editPriority, setEditPriority] = React.useState(
+    form.settings?.defaultPriority || "normal"
+  );
+  const [editBookingBridge, setEditBookingBridge] = React.useState(
+    Boolean(form.settings?.enableBookingBridge)
+  );
+  const [editCertBridge, setEditCertBridge] = React.useState(
+    Boolean(form.settings?.enableCertificateBridge)
+  );
+  const [editChecklistItems, setEditChecklistItems] = React.useState(form.checklistTemplate || []);
+  const [newChecklistLabel, setNewChecklistLabel] = React.useState("");
+  const [activeLocale, setActiveLocale] = React.useState("es");
+  const [translations, setTranslations] = React.useState(form.translations || {});
+  React.useEffect(() => {
+    setEditCategory(form.category || "contact");
+    setEditDepartment(form.settings?.department || "general");
+    setEditPriority(form.settings?.defaultPriority || "normal");
+    setEditBookingBridge(Boolean(form.settings?.enableBookingBridge));
+    setEditCertBridge(Boolean(form.settings?.enableCertificateBridge));
+    setEditChecklistItems(form.checklistTemplate || []);
+    setTranslations(form.translations || {});
+    setNewChecklistLabel("");
+  }, [form]);
+  const updateTranslationField = (key, value) => {
+    setTranslations((prev) => ({
+      ...prev,
+      [activeLocale]: {
+        ...prev[activeLocale],
+        [key]: value
+      }
+    }));
+  };
+  const handleAddChecklistItem = () => {
+    const trimmed = newChecklistLabel.trim();
+    if (!trimmed) return;
+    setEditChecklistItems([
+      ...editChecklistItems,
+      {
+        id: `chk_${Date.now()}`,
+        label: trimmed,
+        required: true,
+        verified: false,
+        localizedLabels: {
+          [activeLocale]: trimmed
+        }
+      }
+    ]);
+    setNewChecklistLabel("");
+  };
+  const handleUpdateChecklistItemLabel = (id, value) => {
+    setEditChecklistItems(
+      (prev) => prev.map((item) => {
+        if (item.id !== id) return item;
+        return {
+          ...item,
+          label: activeLocale === "es" || !item.label ? value : item.label,
+          localizedLabels: {
+            ...item.localizedLabels,
+            [activeLocale]: value
+          }
+        };
+      })
+    );
+  };
+  const handleRemoveChecklistItem = (id) => {
+    setEditChecklistItems(editChecklistItems.filter((item) => item.id !== id));
+  };
+  const handleSave = async () => {
+    await post(`/${PLUGIN_ID}/forms`, {
+      ...form,
+      category: editCategory,
+      checklistTemplate: editChecklistItems,
+      translations,
+      settings: {
+        ...form.settings,
+        department: editDepartment,
+        defaultPriority: editPriority,
+        enableBookingBridge: editBookingBridge,
+        enableCertificateBridge: editCertBridge
+      }
+    });
+    onStatusMessage(
+      `Saved routing, checklist & translations (es/en/ar) on Form Builder form "${form.title}"`
+    );
+    onClose();
+    await onReload();
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      padding: 5,
+      marginBottom: 5,
+      background: "neutral0",
+      hasRadius: true,
+      shadow: "filterShadow",
+      style: { border: "1px solid rgba(128, 128, 128, 0.22)" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            justifyContent: "space-between",
+            alignItems: "center",
+            paddingBottom: 4,
+            wrap: "wrap",
+            gap: 2,
+            children: [
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsxs(Typography, { variant: "delta", tag: "h3", fontWeight: "bold", children: [
+                  t(
+                    "page.ui.routing_checklist_localization",
+                    "Routing, Checklist & Localization"
+                  ),
+                  " ",
+                  "— ",
+                  form.slug
+                ] }),
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+                  "page.ui.routing_drawer_subtitle",
+                  "Stored directly on Form Builder CMS (`settings.inbox`). Configure casework routing, document checklist, and es/en/ar translations."
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+                /* @__PURE__ */ jsx(Button, { size: "S", variant: "tertiary", onClick: onClose, children: t("page.ui.close", "Close") }),
+                /* @__PURE__ */ jsx(Button, { size: "S", onClick: handleSave, children: t("page.ui.save_form_config", "Save Form Config") })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { gap: 4, wrap: "wrap", children: [
+          /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 200px" }, children: /* @__PURE__ */ jsxs(Field.Root, { name: "editCategory", children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: t("field.workflow_category", "Workflow Category") }),
+            /* @__PURE__ */ jsx(
+              SingleSelect,
+              {
+                value: editCategory,
+                onChange: (val) => setEditCategory(String(val)),
+                children: FORM_CATEGORIES.map((cat) => /* @__PURE__ */ jsx(SingleSelectOption, { value: cat, children: cat }, cat))
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 200px" }, children: /* @__PURE__ */ jsxs(Field.Root, { name: "editDepartment", children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: t("field.target_department", "Target Department") }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                name: "editDepartment",
+                value: editDepartment,
+                onChange: (e) => setEditDepartment(e.target.value),
+                placeholder: t(
+                  "placeholder.target_department",
+                  "e.g., imamate, nikah_family, general"
+                )
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(Box, { style: { flex: "1 1 200px" }, children: /* @__PURE__ */ jsxs(Field.Root, { name: "editPriority", children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: t("field.default_priority", "Default Priority") }),
+            /* @__PURE__ */ jsx(
+              SingleSelect,
+              {
+                value: editPriority,
+                onChange: (val) => setEditPriority(String(val)),
+                children: SUBMISSION_PRIORITIES.map((pr) => /* @__PURE__ */ jsx(SingleSelectOption, { value: pr, children: pr }, pr))
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 6, paddingTop: 4, paddingBottom: 4, wrap: "wrap", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: editBookingBridge,
+              onCheckedChange: (checked) => setEditBookingBridge(Boolean(checked)),
+              children: t(
+                "checkbox.enable_1_click_booking",
+                "Enable 1-Click Appointment Booking"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: editCertBridge,
+              onCheckedChange: (checked) => setEditCertBridge(Boolean(checked)),
+              children: t(
+                "checkbox.enable_1_click_certificate",
+                "Enable 1-Click Certificate Issuance"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsx(
+          FormChecklistAndLocalePanels,
+          {
+            t,
+            checklistItems: editChecklistItems,
+            newChecklistLabel,
+            onNewChecklistLabelChange: setNewChecklistLabel,
+            onAddChecklistItem: handleAddChecklistItem,
+            onRemoveChecklistItem: handleRemoveChecklistItem,
+            onUpdateChecklistItemLabel: handleUpdateChecklistItemLabel,
+            activeLocale,
+            onActiveLocaleChange: setActiveLocale,
+            translations,
+            onUpdateTranslationField: updateTranslationField
+          }
+        )
+      ]
+    }
+  );
+};
+const drawerCardStyle = {
+  border: "1px solid rgba(128, 128, 128, 0.22)"
+};
+const FormBuilderTab = ({
+  t,
+  forms,
+  post,
+  onStatusMessage,
+  onReload
+}) => {
+  const navigate = useNavigate();
+  const [editingFormSlug, setEditingFormSlug] = React.useState(
+    null
+  );
+  const [showTemplates, setShowTemplates] = React.useState(false);
+  const selectedForm = React.useMemo(
+    () => forms.find((f) => f.slug === editingFormSlug) || null,
+    [forms, editingFormSlug]
+  );
+  const handleCreateTemplate = async (templateId) => {
+    await post(`/${PLUGIN_ID}/forms/from-template`, { templateId });
+    onStatusMessage(`Created form from "${templateId}" in Visual Form Builder`);
+    setShowTemplates(false);
+    await onReload();
+  };
+  const handleSyncFormBuilder = async () => {
+    const res = await post(`/${PLUGIN_ID}/forms/sync-builder`, {});
+    const info = res?.data?.data;
+    onStatusMessage(
+      `Refreshed Visual Form Builder (${info?.forms?.length ?? 0} forms)`
+    );
+    await onReload();
+  };
+  const handleOpenInVisualBuilder = async (form) => {
+    if (form.formBuilderId) {
+      navigate(
+        `/plugins/${FORM_BUILDER_CMS_PLUGIN_ID}/builder/${form.formBuilderId}`
+      );
+      return;
+    }
+    const res = await post(`/${PLUGIN_ID}/forms/sync-builder`, {});
+    const syncedForms = res?.data?.data?.forms || [];
+    const matched = syncedForms.find((f) => f.slug === form.slug);
+    if (matched?.formBuilderId) {
+      navigate(
+        `/plugins/${FORM_BUILDER_CMS_PLUGIN_ID}/builder/${matched.formBuilderId}`
+      );
+    } else {
+      navigate(`/plugins/${FORM_BUILDER_CMS_PLUGIN_ID}`);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { paddingTop: 5, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingBottom: 4,
+        wrap: "wrap",
+        gap: 3,
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", children: t("page.ui.active_forms", "Forms & Service-Desk Workflows") }),
+            /* @__PURE__ */ jsx(Badge, { children: t("page.ui.formcraft_visual_builder", "FormCraft Visual Builder") })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "tertiary",
+                size: "S",
+                onClick: () => setShowTemplates(!showTemplates),
+                children: showTemplates ? t("page.ui.hide_templates", "Hide Templates") : t("page.ui.starter_templates", "Starter Templates")
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "S", onClick: handleSyncFormBuilder, children: t("page.ui.sync_form_builder", "Refresh Forms") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "default",
+                size: "S",
+                onClick: () => navigate(`/plugins/${FORM_BUILDER_CMS_PLUGIN_ID}/builder/new`),
+                children: t("page.ui.new_visual_form", "+ New Visual Form")
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    showTemplates ? /* @__PURE__ */ jsx(
+      Box,
+      {
+        padding: 4,
+        marginBottom: 4,
+        background: "neutral100",
+        hasRadius: true,
+        style: drawerCardStyle,
+        children: /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            justifyContent: "space-between",
+            alignItems: "center",
+            wrap: "wrap",
+            gap: 3,
+            children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+                "page.ui.seed_starter_form_hint",
+                "Quickly seed a pre-configured multilingual mosque form:"
+              ) }),
+              /* @__PURE__ */ jsx(Flex, { gap: 2, wrap: "wrap", children: STARTER_FORM_TEMPLATES.map((tpl) => /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  size: "S",
+                  variant: "secondary",
+                  onClick: () => handleCreateTemplate(tpl.id),
+                  children: [
+                    "+ ",
+                    tpl.name
+                  ]
+                },
+                tpl.id
+              )) })
+            ]
+          }
+        )
+      }
+    ) : null,
+    selectedForm ? /* @__PURE__ */ jsx(
+      FormRoutingDrawer,
+      {
+        t,
+        form: selectedForm,
+        post,
+        onStatusMessage,
+        onReload,
+        onClose: () => setEditingFormSlug(null)
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(Table, { colCount: 6, rowCount: forms.length + 1, children: [
+      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.title", "Form") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.category", "Category & Dept") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.fields", "Fields & Locales") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.checklist", "Checklist") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.submissions", "Submissions") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.actions", "Actions") }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tbody, { children: forms.map((form) => {
+        const localeKeys = Object.keys(form.translations || {});
+        return /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: form.title }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+              "/",
+              form.slug
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Badge, { children: form.category }),
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: form.settings?.department || "general" })
+          ] }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+            /* @__PURE__ */ jsxs(Typography, { children: [
+              (form.fields || []).length,
+              " ",
+              t("page.ui.fields_label", "fields")
+            ] }),
+            localeKeys.length > 0 ? /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+              t("page.ui.locales_label", "Locales"),
+              ":",
+              " ",
+              localeKeys.join(", ").toUpperCase()
+            ] }) : null
+          ] }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: (form.checklistTemplate || []).length }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: form.submissionCount || 0 }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "S",
+                variant: "secondary",
+                onClick: () => handleOpenInVisualBuilder(form),
+                children: t(
+                  "page.ui.design_fields",
+                  "Design Fields (Drag & Drop)"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "S",
+                variant: editingFormSlug === form.slug ? "default" : "tertiary",
+                onClick: () => setEditingFormSlug(
+                  editingFormSlug === form.slug ? null : form.slug
+                ),
+                children: t(
+                  "page.ui.casework_checklist",
+                  "Routing, Checklist & i18n"
+                )
+              }
+            )
+          ] }) })
+        ] }, form.slug);
+      }) })
+    ] })
+  ] });
+};
+const cardBorderStyle = {
+  border: "1px solid rgba(128, 128, 128, 0.2)"
+};
+const SubscribersTab = ({
+  t,
+  subscribers,
+  post,
+  onStatusMessage,
+  onReload
+}) => {
+  const [showAddForm, setShowAddForm] = React.useState(false);
+  const [newSubEmail, setNewSubEmail] = React.useState("");
+  const [newSubName, setNewSubName] = React.useState("");
+  const [newSubLocale, setNewSubLocale] = React.useState("es");
+  const [newSubTopics, setNewSubTopics] = React.useState([
+    "announcements",
+    "events"
+  ]);
+  const handleAddSubscriber = async () => {
+    if (!newSubEmail.trim()) return;
+    await post(`/api/${PLUGIN_ID}/subscribers`, {
+      email: newSubEmail.trim(),
+      fullName: newSubName.trim(),
+      locale: newSubLocale,
+      topics: newSubTopics.length > 0 ? newSubTopics : ["announcements"]
+    });
+    setNewSubEmail("");
+    setNewSubName("");
+    setShowAddForm(false);
+    onStatusMessage(`Subscriber "${newSubEmail.trim()}" added`);
+    await onReload();
+  };
+  return /* @__PURE__ */ jsxs(Box, { paddingTop: 5, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingBottom: 4,
+        wrap: "wrap",
+        gap: 3,
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", children: t("page.ui.subscribers_list", "Community Subscribers") }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "S",
+              variant: showAddForm ? "tertiary" : "default",
+              onClick: () => setShowAddForm(!showAddForm),
+              children: showAddForm ? t("page.ui.cancel", "Cancel") : t("page.ui.add_subscriber", "+ Add Subscriber")
+            }
+          )
+        ]
+      }
+    ),
+    showAddForm ? /* @__PURE__ */ jsx(
+      Box,
+      {
+        padding: 5,
+        marginBottom: 5,
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "filterShadow",
+        style: cardBorderStyle,
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+              gap: 16,
+              alignItems: "end"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Field.Root, { name: "newSubEmail", required: true, children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: t("field.subscriber_email", "Email") }),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    name: "newSubEmail",
+                    type: "email",
+                    placeholder: t(
+                      "placeholder.subscriber_email",
+                      "fatima@example.org"
+                    ),
+                    value: newSubEmail,
+                    onChange: (e) => setNewSubEmail(e.target.value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Field.Root, { name: "newSubName", children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: t("field.full_name", "Full Name") }),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    name: "newSubName",
+                    placeholder: t("placeholder.subscriber_name", "Fatima Zahra"),
+                    value: newSubName,
+                    onChange: (e) => setNewSubName(e.target.value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Field.Root, { name: "newSubLocale", children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: t("field.preferred_locale", "Locale") }),
+                /* @__PURE__ */ jsx(
+                  SingleSelect,
+                  {
+                    value: newSubLocale,
+                    onChange: (val) => setNewSubLocale(String(val)),
+                    children: LOCALE_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SingleSelectOption, { value: opt.value, children: opt.label }, opt.value))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Field.Root, { name: "newSubTopics", children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: t("field.topics", "Topics") }),
+                /* @__PURE__ */ jsx(
+                  MultiSelect,
+                  {
+                    name: "newSubTopics",
+                    withTags: true,
+                    placeholder: t(
+                      "placeholder.subscriber_topics",
+                      "Select topics..."
+                    ),
+                    value: newSubTopics,
+                    onChange: (nextValues) => setNewSubTopics(
+                      nextValues.length > 0 ? nextValues : ["announcements"]
+                    ),
+                    onClear: () => setNewSubTopics(["announcements"]),
+                    children: TOPIC_OPTIONS.map((opt) => /* @__PURE__ */ jsx(MultiSelectOption, { value: opt.value, children: opt.label }, opt.value))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button, { onClick: handleAddSubscriber, children: t("page.ui.save_subscriber", "Save Subscriber") }) })
+            ]
+          }
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(Table, { colCount: 5, rowCount: subscribers.length + 1, children: [
+      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.email", "Email") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.name", "Name") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.locale", "Locale") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.topics", "Topics") }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("page.ui.status", "Status") }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tbody, { children: subscribers.map((sub) => /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", children: sub.email }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: sub.fullName || "-" }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Badge, { children: sub.locale }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: (sub.topics || []).join(", ") }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Badge, { children: sub.status }) })
+      ] }, sub.email)) })
+    ] })
+  ] });
+};
+const InboxHomePage = () => {
+  const { formatMessage } = useIntl();
+  const t = (id, defaultMessage) => formatMessage({ id: `${PLUGIN_ID}.${id}`, defaultMessage });
+  const { get, post, put } = useFetchClient();
+  const [activeTab, setActiveTab] = React.useState("submissions");
+  const [forms, setForms] = React.useState([]);
+  const [submissions, setSubmissions] = React.useState([]);
+  const [subscribers, setSubscribers] = React.useState([]);
+  const [alerts, setAlerts] = React.useState([]);
+  const [statusMessage, setStatusMessage] = React.useState("");
+  const loadAll = async () => {
+    try {
+      const [formsRes, subsRes, subscRes, alertsRes] = await Promise.all([
+        get(`/${PLUGIN_ID}/forms?activeOnly=false&admin=true`),
+        get(`/${PLUGIN_ID}/submissions`),
+        get(`/${PLUGIN_ID}/subscribers`),
+        get(`/${PLUGIN_ID}/alerts`)
+      ]);
+      setForms(formsRes?.data?.data || []);
+      setSubmissions(subsRes?.data?.data || []);
+      setSubscribers(subscRes?.data?.data || []);
+      setAlerts(alertsRes?.data?.data || []);
+    } catch {
+    }
+  };
+  React.useEffect(() => {
+    void loadAll();
+  }, []);
+  return /* @__PURE__ */ jsx(Main, { children: /* @__PURE__ */ jsxs(Box, { padding: 8, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingBottom: 4,
+        wrap: "wrap",
+        gap: 3,
+        children: [
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "alpha", tag: "h1", children: t("page.ui.inbox_service_desk", "Inbox & Service Desk") }),
+            /* @__PURE__ */ jsx(Typography, { variant: "epsilon", textColor: "neutral600", children: t(
+              "page.ui.inbox_service_desk_subtitle",
+              "Casework submissions, visual forms, subscribers, and site-wide alert banners"
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, wrap: "wrap", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: activeTab === "submissions" ? "default" : "tertiary",
+                onClick: () => setActiveTab("submissions"),
+                children: [
+                  t("page.ui.casework_inbox", "Casework Inbox"),
+                  " (",
+                  submissions.length,
+                  ")"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: activeTab === "forms" ? "default" : "tertiary",
+                onClick: () => setActiveTab("forms"),
+                children: [
+                  t("page.ui.form_builder", "Form Builder"),
+                  " (",
+                  forms.length,
+                  ")"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: activeTab === "subscribers" ? "default" : "tertiary",
+                onClick: () => setActiveTab("subscribers"),
+                children: [
+                  t("page.ui.subscribers", "Subscribers"),
+                  " (",
+                  subscribers.length,
+                  ")"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: activeTab === "alerts" ? "default" : "tertiary",
+                onClick: () => setActiveTab("alerts"),
+                children: [
+                  t("page.ui.alert_banners", "Alert Banners"),
+                  " (",
+                  alerts.length,
+                  ")"
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    statusMessage ? /* @__PURE__ */ jsx(Box, { padding: 3, marginBottom: 4, background: "success100", hasRadius: true, children: /* @__PURE__ */ jsx(Typography, { textColor: "success700", fontWeight: "semiBold", children: statusMessage }) }) : null,
+    /* @__PURE__ */ jsx(Divider, {}),
+    activeTab === "submissions" && /* @__PURE__ */ jsx(
+      CaseworkSubmissionsTab,
+      {
+        t,
+        submissions,
+        forms,
+        post,
+        put,
+        onStatusMessage: setStatusMessage,
+        onReload: loadAll
+      }
+    ),
+    activeTab === "forms" && /* @__PURE__ */ jsx(
+      FormBuilderTab,
+      {
+        t,
+        forms,
+        post,
+        onStatusMessage: setStatusMessage,
+        onReload: loadAll
+      }
+    ),
+    activeTab === "subscribers" && /* @__PURE__ */ jsx(
+      SubscribersTab,
+      {
+        t,
+        subscribers,
+        post,
+        onStatusMessage: setStatusMessage,
+        onReload: loadAll
+      }
+    ),
+    activeTab === "alerts" && /* @__PURE__ */ jsx(
+      AlertBannersTab,
+      {
+        t,
+        alerts,
+        post,
+        onStatusMessage: setStatusMessage,
+        onReload: loadAll
+      }
+    )
+  ] }) });
+};
+export {
+  InboxHomePage
+};