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

package/dist/admin/CertificatesPage-CFDIEBN_.js

@@ -0,0 +1,783 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Box, Flex, Typography, Button, Field, SingleSelect, SingleSelectOption, TextInput, Textarea, Checkbox, Badge } from "@strapi/design-system";
+import { useFetchClient, useNotification, Layouts } from "@strapi/strapi/admin";
+import { useState, useCallback, useEffect } from "react";
+import { useIntl } from "react-intl";
+import { P as PLUGIN_ID } from "./index-BYO34da4.js";
+function trimOrUndefined(value) {
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : void 0;
+}
+function buildWitnessEntry(name, docId, email, role) {
+  const fullName = trimOrUndefined(name);
+  if (!fullName) return null;
+  return {
+    fullName,
+    documentIdRaw: trimOrUndefined(docId),
+    email: trimOrUndefined(email),
+    routingOrder: 1,
+    role
+  };
+}
+const IssueCertificateModal = ({
+  templates,
+  onClose,
+  onSubmit
+}) => {
+  const { formatMessage } = useIntl();
+  const t = (id, defaultMessage, values) => formatMessage({ id: `${"certificates"}.${id}`, defaultMessage }, values);
+  const [templateSlug, setTemplateSlug] = useState(
+    templates[0]?.slug || ""
+  );
+  const [recipientFullName, setRecipientFullName] = useState("");
+  const [recipientChosenName, setRecipientChosenName] = useState("");
+  const [recipientEmail, setRecipientEmail] = useState("");
+  const [recipientPhone, _setRecipientPhone] = useState("");
+  const [recipientNationality, setRecipientNationality] = useState("");
+  const [nationalIdRaw, setNationalIdRaw] = useState("");
+  const [witness1Name, setWitness1Name] = useState("");
+  const [witness1Id, setWitness1Id] = useState("");
+  const [witness1Email, setWitness1Email] = useState("");
+  const [witness2Name, setWitness2Name] = useState("");
+  const [witness2Id, setWitness2Id] = useState("");
+  const [witness2Email, setWitness2Email] = useState("");
+  const [linkedBookingCode, setLinkedBookingCode] = useState("");
+  const [notes, setNotes] = useState("");
+  const [autoApprove, setAutoApprove] = useState(true);
+  const [sendViaESign, setSendViaESign] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const selectedTemplate = templates.find((tpl) => tpl.slug === templateSlug);
+  const handleCreate = async () => {
+    const cleanName = trimOrUndefined(recipientFullName);
+    if (!cleanName || !templateSlug) return;
+    setSubmitting(true);
+    try {
+      const w1 = buildWitnessEntry(
+        witness1Name,
+        witness1Id,
+        witness1Email,
+        "Official Witness 1"
+      );
+      const w2 = buildWitnessEntry(
+        witness2Name,
+        witness2Id,
+        witness2Email,
+        "Official Witness 2"
+      );
+      const witnesses = [w1, w2].filter(
+        (w) => w !== null
+      );
+      await onSubmit({
+        templateSlug,
+        recipientFullName: cleanName,
+        recipientChosenName: trimOrUndefined(recipientChosenName),
+        recipientEmail: trimOrUndefined(recipientEmail),
+        recipientPhone: trimOrUndefined(recipientPhone),
+        recipientNationality: trimOrUndefined(recipientNationality),
+        nationalIdRaw: trimOrUndefined(nationalIdRaw),
+        witnesses,
+        linkedBookingCode: trimOrUndefined(linkedBookingCode),
+        notes: trimOrUndefined(notes),
+        autoApprove: !sendViaESign && autoApprove,
+        sendViaESign
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      padding: 6,
+      background: "neutral0",
+      hasRadius: true,
+      shadow: "filterShadow",
+      borderColor: "neutral200",
+      marginBottom: 6,
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "beta", fontWeight: "bold", children: t(
+            "modal.title_issue_official_signed_certificate",
+            "Issue Official Signed Certificate"
+          ) }),
+          /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onClose, children: t("modal.close", "Close") })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, alignItems: "stretch", children: [
+          /* @__PURE__ */ jsxs(Field.Root, { required: true, children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: t("field.certificate_template", "Certificate Template") }),
+            /* @__PURE__ */ jsx(
+              SingleSelect,
+              {
+                placeholder: t(
+                  "placeholder.select_certificate_template",
+                  "Select certificate template"
+                ),
+                value: templateSlug,
+                onChange: (val) => setTemplateSlug(String(val)),
+                children: templates.map((tpl) => /* @__PURE__ */ jsxs(SingleSelectOption, { value: tpl.slug, children: [
+                  tpl.name,
+                  " (",
+                  tpl.serialPrefix,
+                  ")"
+                ] }, tpl.slug))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { gap: 4, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 240 }, children: /* @__PURE__ */ jsxs(Field.Root, { required: true, children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: t(
+                "field.recipient_full_legal_name",
+                "Recipient Full Legal Name"
+              ) }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  value: recipientFullName,
+                  onChange: (e) => setRecipientFullName(e.target.value),
+                  placeholder: t(
+                    "placeholder.e_g_carlos_andres_perez",
+                    "e.g. Carlos Andres Perez"
+                  )
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 240 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: t(
+                "field.chosen_name_honorific_title_optional",
+                "Chosen Name / Honorific / Title (Optional)"
+              ) }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  value: recipientChosenName,
+                  onChange: (e) => setRecipientChosenName(e.target.value),
+                  placeholder: t(
+                    "placeholder.e_g_ibrahim_chosen_muslim_name",
+                    "e.g. Ibrahim / Chosen Muslim Name"
+                  )
+                }
+              )
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { gap: 4, wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 200 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: t(
+                "field.national_id_passport_hashed_sha_256_at_rest",
+                "National ID / Passport (Hashed SHA-256 at rest)"
+              ) }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  value: nationalIdRaw,
+                  onChange: (e) => setNationalIdRaw(e.target.value),
+                  placeholder: t(
+                    "placeholder.e_g_cc_1020304050",
+                    "e.g. CC 1020304050"
+                  )
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 200 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: t("field.nationality", "Nationality") }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  value: recipientNationality,
+                  onChange: (e) => setRecipientNationality(e.target.value),
+                  placeholder: t("placeholder.e_g_colombian", "e.g. Colombian")
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 200 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: t("field.recipient_email", "Recipient Email") }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  value: recipientEmail,
+                  onChange: (e) => setRecipientEmail(e.target.value),
+                  placeholder: t(
+                    "placeholder.recipient_example_org",
+                    "recipient@example.org"
+                  )
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 180 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: t("field.linked_booking_code", "Linked Booking Code") }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  value: linkedBookingCode,
+                  onChange: (e) => setLinkedBookingCode(e.target.value),
+                  placeholder: t(
+                    "placeholder.e_g_bk_a1b2c3d4",
+                    "e.g. BK-A1B2C3D4"
+                  )
+                }
+              )
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              padding: 4,
+              background: "neutral100",
+              hasRadius: true,
+              borderColor: "neutral200",
+              style: { border: "1px solid rgba(128, 128, 128, 0.18)" },
+              children: [
+                /* @__PURE__ */ jsxs(Typography, { variant: "omega", fontWeight: "bold", children: [
+                  t(
+                    "modal.official_witnesses_attestation",
+                    "Official Witnesses Attestation"
+                  ),
+                  " ",
+                  selectedTemplate?.requiresWitnesses ? t(
+                    "modal.minimum_witnesses_required",
+                    "(Minimum {count} required)",
+                    {
+                      count: selectedTemplate.minWitnesses
+                    }
+                  ) : t("modal.optional_suffix", "(Optional)")
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { gap: 4, wrap: "wrap", marginTop: 3, children: [
+                  /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 180 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                    /* @__PURE__ */ jsx(Field.Label, { children: t("field.witness_1_full_name", "Witness 1 Full Name") }),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        value: witness1Name,
+                        onChange: (e) => setWitness1Name(e.target.value),
+                        placeholder: t(
+                          "placeholder.e_g_ahmad_al_mansour",
+                          "e.g., Ahmad Al-Mansour"
+                        )
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 150 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                    /* @__PURE__ */ jsx(Field.Label, { children: t("field.witness_1_id_document", "Witness 1 ID Document") }),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        value: witness1Id,
+                        onChange: (e) => setWitness1Id(e.target.value),
+                        placeholder: t(
+                          "placeholder.e_g_cc_79123456_masked",
+                          "e.g., CC 79123456 (masked)"
+                        )
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 180 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                    /* @__PURE__ */ jsx(Field.Label, { children: t(
+                      "field.witness_1_email_docusign",
+                      "Witness 1 Email (DocuSign)"
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        value: witness1Email,
+                        onChange: (e) => setWitness1Email(e.target.value),
+                        placeholder: t(
+                          "placeholder.e_g_witness1_example_org",
+                          "e.g., witness1@example.org"
+                        )
+                      }
+                    )
+                  ] }) })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { gap: 4, wrap: "wrap", marginTop: 3, children: [
+                  /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 180 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                    /* @__PURE__ */ jsx(Field.Label, { children: t("field.witness_2_full_name", "Witness 2 Full Name") }),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        value: witness2Name,
+                        onChange: (e) => setWitness2Name(e.target.value),
+                        placeholder: t(
+                          "placeholder.e_g_yusuf_benavides",
+                          "e.g., Yusuf Benavides"
+                        )
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 150 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                    /* @__PURE__ */ jsx(Field.Label, { children: t("field.witness_2_id_document", "Witness 2 ID Document") }),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        value: witness2Id,
+                        onChange: (e) => setWitness2Id(e.target.value),
+                        placeholder: t(
+                          "placeholder.e_g_cc_80234567_masked",
+                          "e.g., CC 80234567 (masked)"
+                        )
+                      }
+                    )
+                  ] }) }),
+                  /* @__PURE__ */ jsx(Box, { style: { flex: 1, minWidth: 180 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+                    /* @__PURE__ */ jsx(Field.Label, { children: t(
+                      "field.witness_2_email_docusign",
+                      "Witness 2 Email (DocuSign)"
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      TextInput,
+                      {
+                        value: witness2Email,
+                        onChange: (e) => setWitness2Email(e.target.value),
+                        placeholder: t(
+                          "placeholder.e_g_witness2_example_org",
+                          "e.g., witness2@example.org"
+                        )
+                      }
+                    )
+                  ] }) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: t("field.internal_registry_notes", "Internal Registry Notes") }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                placeholder: t(
+                  "placeholder.attestation_context_officiating_imam_or_ceremony",
+                  "Attestation context, officiating Imam, or ceremony notes..."
+                ),
+                value: notes,
+                onChange: (e) => setNotes(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: autoApprove && !sendViaESign,
+              disabled: sendViaESign,
+              onCheckedChange: (val) => setAutoApprove(Boolean(val)),
+              children: t(
+                "checkbox.immediately_sign_with_ed25519",
+                "Immediately sign with Ed25519 private key and mark as Issued"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: sendViaESign,
+              onCheckedChange: (val) => setSendViaESign(Boolean(val)),
+              children: t(
+                "checkbox.dispatch_docusign_esignature_envelope",
+                "Dispatch DocuSign eSignature Envelope to Witnesses & Signatories first (auto-approves on completion webhook)"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { justifyContent: "flex-end", gap: 3, children: [
+            /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onClose, children: t("modal.cancel", "Cancel") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: handleCreate,
+                loading: submitting,
+                disabled: !recipientFullName.trim() || !templateSlug,
+                children: sendViaESign ? t(
+                  "modal.create_and_send_docusign",
+                  "Create & Send via DocuSign"
+                ) : t(
+                  "modal.sign_and_issue_certificate",
+                  "Sign & Issue Certificate"
+                )
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+const CertificatesPage = () => {
+  const { formatMessage } = useIntl();
+  const t = (id, defaultMessage, values) => formatMessage({ id: `${PLUGIN_ID}.${id}`, defaultMessage }, values);
+  const { get, post, put } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const [records, setRecords] = useState([]);
+  const [templates, setTemplates] = useState([]);
+  const [stats, setStats] = useState({
+    total: 0,
+    issued: 0,
+    pending_approval: 0,
+    revoked: 0,
+    expired: 0
+  });
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showIssueModal, setShowIssueModal] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const queryParams = new URLSearchParams();
+      if (statusFilter && statusFilter !== "all") {
+        queryParams.set("status", statusFilter);
+      }
+      if (searchQuery.trim()) {
+        queryParams.set("search", searchQuery.trim());
+      }
+      const [certRes, tplRes] = await Promise.all([
+        get(
+          `/${PLUGIN_ID}/certificates?${queryParams.toString()}`
+        ),
+        get(`/${PLUGIN_ID}/templates`)
+      ]);
+      setRecords(certRes.data?.data || []);
+      if (certRes.data?.meta?.stats) {
+        setStats(certRes.data.meta.stats);
+      }
+      setTemplates(tplRes.data?.data || []);
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: t(
+          "page.ui.msg_failed_to_load_certificates_registry",
+          "Failed to load certificates registry"
+        )
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, [get, searchQuery, statusFilter, toggleNotification]);
+  useEffect(() => {
+    void loadData();
+  }, [loadData]);
+  const handleIssue = async (payload) => {
+    try {
+      const res = await post(
+        `/${PLUGIN_ID}/certificates/issue`,
+        payload
+      );
+      toggleNotification({
+        type: "success",
+        message: `Certificate ${res.data?.data?.serialNumber} created`
+      });
+      setShowIssueModal(false);
+      await loadData();
+    } catch (err) {
+      toggleNotification({
+        type: "danger",
+        message: err.message || "Failed to issue certificate"
+      });
+    }
+  };
+  const handleSendDocuSign = async (documentId) => {
+    try {
+      const res = await post(
+        `/${PLUGIN_ID}/certificates/${documentId}/send-docusign`,
+        {}
+      );
+      toggleNotification({
+        type: "success",
+        message: `Dispatched DocuSign envelope ${res.data?.data?.envelopeId}`
+      });
+      await loadData();
+    } catch (err) {
+      toggleNotification({
+        type: "danger",
+        message: err.message || "Failed to send DocuSign eSignature envelope"
+      });
+    }
+  };
+  const handleApprove = async (documentId) => {
+    try {
+      await put(`/${PLUGIN_ID}/certificates/${documentId}/approve`, {});
+      toggleNotification({
+        type: "success",
+        message: t(
+          "page.ui.msg_certificate_approved_and_signed_with_ed25519",
+          "Certificate approved and signed with Ed25519"
+        )
+      });
+      await loadData();
+    } catch (err) {
+      toggleNotification({
+        type: "danger",
+        message: err.message || "Failed to approve certificate"
+      });
+    }
+  };
+  const handleRevoke = async (documentId) => {
+    try {
+      await put(`/${PLUGIN_ID}/certificates/${documentId}/revoke`, {
+        reason: "Revoked via Admin Registry"
+      });
+      toggleNotification({
+        type: "warning",
+        message: t("page.ui.msg_certificate_revoked", "Certificate revoked")
+      });
+      await loadData();
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: t(
+          "page.ui.msg_failed_to_revoke_certificate",
+          "Failed to revoke certificate"
+        )
+      });
+    }
+  };
+  const handleOpenPrintable = async (documentId) => {
+    try {
+      const res = await get(
+        `/${PLUGIN_ID}/certificates/${documentId}/print`
+      );
+      const htmlContent = typeof res.data === "string" ? res.data : String(res.data || "");
+      const blob = new Blob([htmlContent], { type: "text/html;charset=utf-8" });
+      const blobUrl = URL.createObjectURL(blob);
+      window.open(blobUrl, "_blank", "noopener,noreferrer");
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: t(
+          "page.ui.msg_unable_to_render_printable_certificate_document",
+          "Unable to render printable certificate document"
+        )
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Layouts.Root, { children: [
+    /* @__PURE__ */ jsx(
+      Layouts.Header,
+      {
+        title: t(
+          "page.ui.title_official_certificates_cryptographic_registry",
+          "Official Certificates & Cryptographic Registry"
+        ),
+        subtitle: t(
+          "page.ui.subtitle_ed25519_digitally_signed_certificates_optional_d",
+          "Ed25519 digitally signed certificates, optional DocuSign eSignature envelopes, witness attestation, and QR verification"
+        ),
+        primaryAction: /* @__PURE__ */ jsx(Button, { onClick: () => setShowIssueModal(true), children: t(
+          "page.ui.issue_signed_certificate",
+          "+ Issue Signed Certificate"
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Layouts.Content, { children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 4, marginBottom: 6, wrap: "wrap", children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            padding: 4,
+            background: "neutral0",
+            hasRadius: true,
+            shadow: "filterShadow",
+            style: { flex: 1, minWidth: 160 },
+            children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("page.ui.total_certificates", "Total Certificates") }),
+              /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: stats.total }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            padding: 4,
+            background: "neutral0",
+            hasRadius: true,
+            shadow: "filterShadow",
+            style: { flex: 1, minWidth: 160 },
+            children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "success600", children: t("page.ui.issued_signed", "Issued & Signed") }),
+              /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: stats.issued }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            padding: 4,
+            background: "neutral0",
+            hasRadius: true,
+            shadow: "filterShadow",
+            style: { flex: 1, minWidth: 160 },
+            children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "warning600", children: t("page.ui.pending_approval", "Pending Approval") }),
+              /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: stats.pending_approval }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            padding: 4,
+            background: "neutral0",
+            hasRadius: true,
+            shadow: "filterShadow",
+            style: { flex: 1, minWidth: 160 },
+            children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "danger600", children: t("page.ui.revoked_expired", "Revoked / Expired") }),
+              /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Typography, { variant: "alpha", fontWeight: "bold", children: stats.revoked + stats.expired }) })
+            ]
+          }
+        )
+      ] }),
+      showIssueModal && /* @__PURE__ */ jsx(
+        IssueCertificateModal,
+        {
+          templates,
+          onClose: () => setShowIssueModal(false),
+          onSubmit: handleIssue
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 4,
+          background: "neutral0",
+          hasRadius: true,
+          shadow: "filterShadow",
+          marginBottom: 4,
+          children: /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "flex-end", wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(Box, { style: { minWidth: 260, flex: 1 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: t("field.search_certificates", "Search Certificates") }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  placeholder: t(
+                    "placeholder.search_by_serial_number_recipient_name_chosen_na",
+                    "Search by serial number, recipient name, chosen name, or email..."
+                  ),
+                  value: searchQuery,
+                  onChange: (e) => setSearchQuery(e.target.value)
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(Box, { style: { minWidth: 200 }, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: t("field.certificate_status", "Certificate Status") }),
+              /* @__PURE__ */ jsxs(
+                SingleSelect,
+                {
+                  placeholder: t("placeholder.all_statuses", "All Statuses"),
+                  value: statusFilter,
+                  onChange: (val) => setStatusFilter(String(val)),
+                  children: [
+                    /* @__PURE__ */ jsx(SingleSelectOption, { value: "all", children: t("page.ui.all_statuses", "All Statuses") }),
+                    /* @__PURE__ */ jsx(SingleSelectOption, { value: "issued", children: t("page.ui.issued", "Issued") }),
+                    /* @__PURE__ */ jsx(SingleSelectOption, { value: "pending_approval", children: t("page.ui.pending_approval", "Pending Approval") }),
+                    /* @__PURE__ */ jsx(SingleSelectOption, { value: "revoked", children: t("page.ui.revoked", "Revoked") }),
+                    /* @__PURE__ */ jsx(SingleSelectOption, { value: "expired", children: t("page.ui.expired", "Expired") })
+                  ]
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => void loadData(), children: t("page.ui.refresh", "Refresh") })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(Box, { padding: 4, background: "neutral0", hasRadius: true, shadow: "filterShadow", children: loading ? /* @__PURE__ */ jsx(Typography, { children: t(
+        "page.ui.loading_official_certificates_registry",
+        "Loading official certificates registry..."
+      ) }) : records.length === 0 ? /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t(
+        "page.ui.no_certificates_found_matching_the_current_filte",
+        "No certificates found matching the current filters."
+      ) }) : /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 3, alignItems: "stretch", children: records.map((rec) => {
+        const secondaryText = Object.values(rec.secondaryDates || {}).map((d) => `${d.label}: ${d.compact || d.formatted}`).join(" • ");
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            padding: 4,
+            background: "neutral100",
+            hasRadius: true,
+            borderColor: "neutral200",
+            children: /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                justifyContent: "space-between",
+                alignItems: "center",
+                wrap: "wrap",
+                gap: 3,
+                children: [
+                  /* @__PURE__ */ jsxs(Box, { children: [
+                    /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
+                      /* @__PURE__ */ jsx(Typography, { fontWeight: "bold", variant: "omega", children: rec.serialNumber }),
+                      /* @__PURE__ */ jsx(Badge, { children: rec.status.toUpperCase() }),
+                      rec.esignEnvelopeId && /* @__PURE__ */ jsx(Badge, { children: t(
+                        "page.ui.docusign_badge",
+                        "DOCUSIGN: {status}",
+                        {
+                          status: (rec.esignEnvelopeStatus || "sent").toUpperCase()
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: rec.templateName })
+                    ] }),
+                    /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsxs(Typography, { fontWeight: "semiBold", children: [
+                      rec.recipientFullName,
+                      rec.recipientChosenName ? ` (${rec.recipientChosenName})` : ""
+                    ] }) }),
+                    /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
+                      t("page.ui.issued_date", "Issued: {date}", {
+                        date: rec.issuedAt.slice(0, 10)
+                      }),
+                      secondaryText ? ` • ${secondaryText}` : "",
+                      rec.nationalIdMasked ? ` • ${t("page.ui.id_masked", "ID: {id}", {
+                        id: rec.nationalIdMasked
+                      })}` : "",
+                      " • ",
+                      t(
+                        "page.ui.witnesses_count",
+                        "Witnesses: {count}",
+                        {
+                          count: (rec.witnesses || []).length
+                        }
+                      )
+                    ] }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "secondary",
+                        onClick: () => void handleOpenPrintable(rec.documentId),
+                        children: t("page.ui.print_pdf", "Print / PDF")
+                      }
+                    ),
+                    rec.status === "pending_approval" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          variant: "tertiary",
+                          onClick: () => void handleSendDocuSign(rec.documentId),
+                          children: t("page.ui.send_docusign", "Send DocuSign")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          onClick: () => void handleApprove(rec.documentId),
+                          children: t("page.ui.approve_sign", "Approve & Sign")
+                        }
+                      )
+                    ] }),
+                    rec.status === "issued" && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "danger-light",
+                        onClick: () => void handleRevoke(rec.documentId),
+                        children: t("page.ui.revoke", "Revoke")
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          },
+          rec.documentId
+        );
+      }) }) })
+    ] })
+  ] });
+};
+export {
+  CertificatesPage
+};