@nextlyhq/plugin-form-builder 0.0.1

package/dist/chunk-ABNZFTQK.js

@@ -0,0 +1,586 @@
+// src/components/submissions/SubmissionList.tsx
+import { useState, useCallback, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function formatValue(value) {
+  if (value === null || value === void 0) return "-";
+  if (Array.isArray(value)) return value.join(", ");
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (value instanceof Date) return value.toLocaleDateString();
+  let str;
+  if (typeof value === "object") {
+    str = JSON.stringify(value);
+  } else {
+    str = String(value);
+  }
+  return str.length > 50 ? str.slice(0, 50) + "..." : str;
+}
+function formatDate(date) {
+  const d = typeof date === "string" ? new Date(date) : date;
+  return d.toLocaleString();
+}
+function getStatusBadgeClass(status) {
+  switch (status) {
+    case "new":
+      return "submission-status-badge submission-status-badge--new";
+    case "read":
+      return "submission-status-badge submission-status-badge--read";
+    case "archived":
+      return "submission-status-badge submission-status-badge--archived";
+    default:
+      return "submission-status-badge";
+  }
+}
+function SubmissionList({
+  form,
+  submissions,
+  isLoading = false,
+  onStatusChange,
+  onDelete,
+  onBulkDelete,
+  onBulkStatusChange,
+  onExport,
+  onViewDetail
+}) {
+  const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
+  const [filter, setFilter] = useState("all");
+  const [processingIds, setProcessingIds] = useState(/* @__PURE__ */ new Set());
+  const displayFields = useMemo(() => {
+    return form.fields.filter((f) => f.type !== "hidden").slice(0, 3);
+  }, [form.fields]);
+  const filteredSubmissions = useMemo(() => {
+    if (filter === "all") return submissions;
+    return submissions.filter((sub) => sub.status === filter);
+  }, [submissions, filter]);
+  const allSelected = filteredSubmissions.length > 0 && selectedIds.size === filteredSubmissions.length && filteredSubmissions.every((s) => selectedIds.has(s.id));
+  const someSelected = selectedIds.size > 0;
+  const toggleSelect = useCallback((id) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+  const toggleSelectAll = useCallback(() => {
+    if (allSelected) {
+      setSelectedIds(/* @__PURE__ */ new Set());
+    } else {
+      setSelectedIds(new Set(filteredSubmissions.map((s) => s.id)));
+    }
+  }, [allSelected, filteredSubmissions]);
+  const handleStatusChange = useCallback(
+    async (id, status) => {
+      if (!onStatusChange) return;
+      setProcessingIds((prev) => new Set(prev).add(id));
+      try {
+        await onStatusChange(id, status);
+      } finally {
+        setProcessingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      }
+    },
+    [onStatusChange]
+  );
+  const handleDelete = useCallback(
+    async (id) => {
+      if (!onDelete) return;
+      if (!window.confirm("Are you sure you want to delete this submission?")) {
+        return;
+      }
+      setProcessingIds((prev) => new Set(prev).add(id));
+      try {
+        await onDelete(id);
+        setSelectedIds((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      } finally {
+        setProcessingIds((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      }
+    },
+    [onDelete]
+  );
+  const handleBulkDelete = useCallback(async () => {
+    if (!onBulkDelete || selectedIds.size === 0) return;
+    if (!window.confirm(
+      `Are you sure you want to delete ${selectedIds.size} submission(s)?`
+    )) {
+      return;
+    }
+    const ids = Array.from(selectedIds);
+    ids.forEach((id) => setProcessingIds((prev) => new Set(prev).add(id)));
+    try {
+      await onBulkDelete(ids);
+      setSelectedIds(/* @__PURE__ */ new Set());
+    } finally {
+      setProcessingIds(/* @__PURE__ */ new Set());
+    }
+  }, [onBulkDelete, selectedIds]);
+  const handleBulkStatusChange = useCallback(
+    async (status) => {
+      if (!onBulkStatusChange || selectedIds.size === 0) return;
+      const ids = Array.from(selectedIds);
+      ids.forEach((id) => setProcessingIds((prev) => new Set(prev).add(id)));
+      try {
+        await onBulkStatusChange(ids, status);
+        setSelectedIds(/* @__PURE__ */ new Set());
+      } finally {
+        setProcessingIds(/* @__PURE__ */ new Set());
+      }
+    },
+    [onBulkStatusChange, selectedIds]
+  );
+  const handleRowClick = useCallback(
+    (submission) => {
+      onViewDetail?.(submission);
+    },
+    [onViewDetail]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "submission-list", children: [
+    /* @__PURE__ */ jsxs("div", { className: "submission-list__toolbar", children: [
+      /* @__PURE__ */ jsx("div", { className: "submission-list__filters", children: /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: filter,
+          onChange: (e) => setFilter(e.target.value),
+          className: "submission-list__filter-select",
+          "aria-label": "Filter by status",
+          children: [
+            /* @__PURE__ */ jsxs("option", { value: "all", children: [
+              "All Submissions (",
+              submissions.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxs("option", { value: "new", children: [
+              "New (",
+              submissions.filter((s) => s.status === "new").length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxs("option", { value: "read", children: [
+              "Read (",
+              submissions.filter((s) => s.status === "read").length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxs("option", { value: "archived", children: [
+              "Archived (",
+              submissions.filter((s) => s.status === "archived").length,
+              ")"
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "submission-list__actions", children: [
+        someSelected && /* @__PURE__ */ jsxs("div", { className: "submission-list__bulk-actions", children: [
+          /* @__PURE__ */ jsxs("span", { className: "submission-list__selected-count", children: [
+            selectedIds.size,
+            " selected"
+          ] }),
+          onBulkStatusChange && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => void handleBulkStatusChange("read"),
+                className: "submission-list__action-btn",
+                children: "Mark Read"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => void handleBulkStatusChange("archived"),
+                className: "submission-list__action-btn",
+                children: "Archive"
+              }
+            )
+          ] }),
+          onBulkDelete && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void handleBulkDelete(),
+              className: "submission-list__action-btn submission-list__action-btn--danger",
+              children: "Delete"
+            }
+          )
+        ] }),
+        onExport && /* @__PURE__ */ jsxs("div", { className: "submission-list__export-actions", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onExport("csv"),
+              className: "submission-list__export-btn",
+              children: "Export CSV"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onExport("json"),
+              className: "submission-list__export-btn",
+              children: "Export JSON"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "submission-list__table-container", children: /* @__PURE__ */ jsxs("table", { className: "submission-list__table", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: "submission-list__th submission-list__th--checkbox", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: allSelected,
+            onChange: toggleSelectAll,
+            "aria-label": "Select all submissions"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("th", { className: "submission-list__th", children: "ID" }),
+        /* @__PURE__ */ jsx("th", { className: "submission-list__th", children: "Status" }),
+        /* @__PURE__ */ jsx("th", { className: "submission-list__th", children: "Submitted" }),
+        displayFields.map((field) => /* @__PURE__ */ jsx("th", { className: "submission-list__th", children: field.label }, field.name)),
+        /* @__PURE__ */ jsx("th", { className: "submission-list__th submission-list__th--actions", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: isLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: 5 + displayFields.length,
+          className: "submission-list__loading",
+          children: "Loading submissions..."
+        }
+      ) }) : filteredSubmissions.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
+        {
+          colSpan: 5 + displayFields.length,
+          className: "submission-list__empty",
+          children: "No submissions found"
+        }
+      ) }) : filteredSubmissions.map((submission) => {
+        const isSelected = selectedIds.has(submission.id);
+        const isProcessing = processingIds.has(submission.id);
+        return /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: `submission-list__row ${isSelected ? "submission-list__row--selected" : ""} ${isProcessing ? "submission-list__row--processing" : ""}`,
+            onClick: () => handleRowClick(submission),
+            style: { cursor: onViewDetail ? "pointer" : "default" },
+            children: [
+              /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: "submission-list__td submission-list__td--checkbox",
+                  onClick: (e) => e.stopPropagation(),
+                  children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: isSelected,
+                      onChange: () => toggleSelect(submission.id),
+                      disabled: isProcessing,
+                      "aria-label": `Select submission ${submission.id}`
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("td", { className: "submission-list__td submission-list__td--id", children: /* @__PURE__ */ jsxs("code", { children: [
+                submission.id.slice(0, 8),
+                "..."
+              ] }) }),
+              /* @__PURE__ */ jsx("td", { className: "submission-list__td", children: /* @__PURE__ */ jsx("span", { className: getStatusBadgeClass(submission.status), children: submission.status }) }),
+              /* @__PURE__ */ jsx("td", { className: "submission-list__td", children: formatDate(submission.submittedAt) }),
+              displayFields.map((field) => /* @__PURE__ */ jsx("td", { className: "submission-list__td", children: formatValue(submission.data[field.name]) }, field.name)),
+              /* @__PURE__ */ jsxs(
+                "td",
+                {
+                  className: "submission-list__td submission-list__td--actions",
+                  onClick: (e) => e.stopPropagation(),
+                  children: [
+                    onStatusChange && submission.status !== "read" && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => void handleStatusChange(submission.id, "read"),
+                        disabled: isProcessing,
+                        className: "submission-list__row-action",
+                        title: "Mark as read",
+                        children: "Mark Read"
+                      }
+                    ),
+                    onStatusChange && submission.status !== "archived" && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => void handleStatusChange(submission.id, "archived"),
+                        disabled: isProcessing,
+                        className: "submission-list__row-action",
+                        title: "Archive",
+                        children: "Archive"
+                      }
+                    ),
+                    onDelete && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => void handleDelete(submission.id),
+                        disabled: isProcessing,
+                        className: "submission-list__row-action submission-list__row-action--danger",
+                        title: "Delete",
+                        children: "Delete"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          },
+          submission.id
+        );
+      }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "submission-list__summary", children: [
+      "Showing ",
+      filteredSubmissions.length,
+      " of ",
+      submissions.length,
+      " submissions"
+    ] })
+  ] });
+}
+
+// src/components/submissions/SubmissionDetail.tsx
+import { useState as useState2, useCallback as useCallback2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function safeString(value) {
+  if (typeof value === "object" && value !== null) {
+    return JSON.stringify(value);
+  }
+  return String(value);
+}
+function formatFieldValue(value, field) {
+  if (value === null || value === void 0) return "-";
+  switch (field.type) {
+    case "checkbox":
+      return value ? "Yes" : "No";
+    case "select":
+      if (Array.isArray(value)) {
+        return value.join(", ");
+      }
+      return safeString(value);
+    case "file":
+      if (Array.isArray(value)) {
+        return value.map((v) => safeString(v)).join(", ");
+      }
+      return safeString(value);
+    case "date":
+      if (value instanceof Date) {
+        return value.toLocaleDateString();
+      }
+      if (typeof value === "string") {
+        return new Date(value).toLocaleDateString();
+      }
+      return safeString(value);
+    case "time":
+      return safeString(value);
+    default:
+      return safeString(value);
+  }
+}
+function formatDate2(date) {
+  const d = typeof date === "string" ? new Date(date) : date;
+  return d.toLocaleString();
+}
+var STATUS_OPTIONS = [
+  { value: "new", label: "New" },
+  { value: "read", label: "Read" },
+  { value: "archived", label: "Archived" }
+];
+function SubmissionDetail({
+  form,
+  submission,
+  onStatusChange,
+  onNotesUpdate,
+  onBack,
+  onDelete
+}) {
+  const [isProcessing, setIsProcessing] = useState2(false);
+  const [notes, setNotes] = useState2(
+    submission.notes || ""
+  );
+  const [notesModified, setNotesModified] = useState2(false);
+  const handleStatusChange = useCallback2(
+    async (event) => {
+      if (!onStatusChange) return;
+      const newStatus = event.target.value;
+      setIsProcessing(true);
+      try {
+        await onStatusChange(newStatus);
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    [onStatusChange]
+  );
+  const handleNotesChange = useCallback2(
+    (event) => {
+      setNotes(event.target.value);
+      setNotesModified(true);
+    },
+    []
+  );
+  const handleNotesSave = useCallback2(async () => {
+    if (!onNotesUpdate || !notesModified) return;
+    setIsProcessing(true);
+    try {
+      await onNotesUpdate(notes);
+      setNotesModified(false);
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [onNotesUpdate, notes, notesModified]);
+  const handleDelete = useCallback2(async () => {
+    if (!onDelete) return;
+    if (!window.confirm("Are you sure you want to delete this submission?")) {
+      return;
+    }
+    setIsProcessing(true);
+    try {
+      await onDelete();
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [onDelete]);
+  const displayFields = form.fields;
+  const data = submission.data;
+  return /* @__PURE__ */ jsxs2("div", { className: "submission-detail", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "submission-detail__header", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "submission-detail__header-left", children: [
+        onBack && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: onBack,
+            className: "submission-detail__back-btn",
+            disabled: isProcessing,
+            children: "\u2190 Back to List"
+          }
+        ),
+        /* @__PURE__ */ jsx2("h2", { className: "submission-detail__title", children: "Submission Details" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "submission-detail__header-right", children: [
+        onStatusChange && /* @__PURE__ */ jsxs2("div", { className: "submission-detail__status-control", children: [
+          /* @__PURE__ */ jsx2("label", { htmlFor: "submission-status", children: "Status:" }),
+          /* @__PURE__ */ jsx2(
+            "select",
+            {
+              id: "submission-status",
+              value: submission.status,
+              onChange: (e) => void handleStatusChange(e),
+              disabled: isProcessing,
+              className: "submission-detail__status-select",
+              children: STATUS_OPTIONS.map((option) => /* @__PURE__ */ jsx2("option", { value: option.value, children: option.label }, option.value))
+            }
+          )
+        ] }),
+        onDelete && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => void handleDelete(),
+            disabled: isProcessing,
+            className: "submission-detail__delete-btn",
+            children: "Delete"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "submission-detail__id", children: [
+      /* @__PURE__ */ jsx2("span", { className: "submission-detail__id-label", children: "Submission ID:" }),
+      /* @__PURE__ */ jsx2("code", { className: "submission-detail__id-value", children: submission.id })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "submission-detail__section", children: [
+      /* @__PURE__ */ jsx2("h3", { className: "submission-detail__section-title", children: "Submitted Data" }),
+      /* @__PURE__ */ jsxs2("div", { className: "submission-detail__fields", children: [
+        displayFields.map((field) => /* @__PURE__ */ jsxs2("div", { className: "submission-detail__field", children: [
+          /* @__PURE__ */ jsx2("div", { className: "submission-detail__field-label", children: field.label }),
+          /* @__PURE__ */ jsx2("div", { className: "submission-detail__field-value", children: formatFieldValue(data[field.name], field) })
+        ] }, field.name)),
+        displayFields.length === 0 && /* @__PURE__ */ jsx2("div", { className: "submission-detail__empty", children: "No fields to display" })
+      ] })
+    ] }),
+    onNotesUpdate && /* @__PURE__ */ jsxs2("div", { className: "submission-detail__section", children: [
+      /* @__PURE__ */ jsx2("h3", { className: "submission-detail__section-title", children: "Internal Notes" }),
+      /* @__PURE__ */ jsxs2("div", { className: "submission-detail__notes", children: [
+        /* @__PURE__ */ jsx2(
+          "textarea",
+          {
+            value: notes,
+            onChange: handleNotesChange,
+            placeholder: "Add internal notes about this submission...",
+            disabled: isProcessing,
+            className: "submission-detail__notes-textarea",
+            rows: 4
+          }
+        ),
+        notesModified && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: () => void handleNotesSave(),
+            disabled: isProcessing,
+            className: "submission-detail__notes-save-btn",
+            children: "Save Notes"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "submission-detail__section", children: [
+      /* @__PURE__ */ jsx2("h3", { className: "submission-detail__section-title", children: "Metadata" }),
+      /* @__PURE__ */ jsxs2("div", { className: "submission-detail__metadata", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "submission-detail__metadata-item", children: [
+          /* @__PURE__ */ jsx2("span", { className: "submission-detail__metadata-label", children: "Submitted At:" }),
+          /* @__PURE__ */ jsx2("span", { className: "submission-detail__metadata-value", children: formatDate2(submission.submittedAt) })
+        ] }),
+        submission.ipAddress && /* @__PURE__ */ jsxs2("div", { className: "submission-detail__metadata-item", children: [
+          /* @__PURE__ */ jsx2("span", { className: "submission-detail__metadata-label", children: "IP Address:" }),
+          /* @__PURE__ */ jsx2("span", { className: "submission-detail__metadata-value", children: /* @__PURE__ */ jsx2("code", { children: submission.ipAddress }) })
+        ] }),
+        submission.userAgent && /* @__PURE__ */ jsxs2("div", { className: "submission-detail__metadata-item", children: [
+          /* @__PURE__ */ jsx2("span", { className: "submission-detail__metadata-label", children: "User Agent:" }),
+          /* @__PURE__ */ jsx2("span", { className: "submission-detail__metadata-value submission-detail__metadata-value--truncate", children: submission.userAgent })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "submission-detail__metadata-item", children: [
+          /* @__PURE__ */ jsx2("span", { className: "submission-detail__metadata-label", children: "Created At:" }),
+          /* @__PURE__ */ jsx2("span", { className: "submission-detail__metadata-value", children: formatDate2(submission.createdAt) })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "submission-detail__metadata-item", children: [
+          /* @__PURE__ */ jsx2("span", { className: "submission-detail__metadata-label", children: "Updated At:" }),
+          /* @__PURE__ */ jsx2("span", { className: "submission-detail__metadata-value", children: formatDate2(submission.updatedAt) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("details", { className: "submission-detail__raw-data", children: [
+      /* @__PURE__ */ jsx2("summary", { className: "submission-detail__raw-data-summary", children: "View Raw JSON Data" }),
+      /* @__PURE__ */ jsx2("pre", { className: "submission-detail__raw-data-content", children: JSON.stringify(submission.data, null, 2) })
+    ] })
+  ] });
+}
+
+export {
+  SubmissionList,
+  SubmissionDetail
+};
+//# sourceMappingURL=chunk-ABNZFTQK.js.map