@squaredr/fieldcraft-pro 0.0.0

package/dist/chunk-NIKQEWPG.mjs

@@ -0,0 +1,467 @@
+import { requireLicense } from '@squaredr/fieldcraft-pro-license';
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/response-viewer/ResponseViewer.tsx
+function ResponseTable({ schema, responses, onRowClick }) {
+  const questions = getAllQuestions(schema);
+  return /* @__PURE__ */ jsx("div", { style: { overflow: "auto", fontFamily: "inherit" }, children: /* @__PURE__ */ jsxs(
+    "table",
+    {
+      style: {
+        width: "100%",
+        borderCollapse: "collapse",
+        fontSize: "13px"
+      },
+      children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { style: { backgroundColor: "var(--muted, #111113)" }, children: [
+          /* @__PURE__ */ jsx("th", { style: thStyle, children: "Submitted" }),
+          questions.map((q) => /* @__PURE__ */ jsx("th", { style: thStyle, children: q.label }, q.id)),
+          /* @__PURE__ */ jsx("th", { style: thStyle, children: "Score" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("tbody", { children: [
+          responses.map((response, idx) => /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              onClick: () => onRowClick?.(response),
+              style: {
+                cursor: onRowClick ? "pointer" : "default",
+                borderBottom: "1px solid var(--border, #1c1c20)"
+              },
+              onMouseEnter: (e) => {
+                if (onRowClick) e.currentTarget.style.backgroundColor = "var(--accent, #17171a)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+              },
+              children: [
+                /* @__PURE__ */ jsx("td", { style: tdStyle, children: new Date(response.submittedAt).toLocaleString() }),
+                questions.map((q) => /* @__PURE__ */ jsx("td", { style: tdStyle, children: formatCellValue(response.values[q.id]) }, q.id)),
+                /* @__PURE__ */ jsx("td", { style: tdStyle, children: response.totalScore ?? "\u2014" })
+              ]
+            },
+            response.sessionToken || idx
+          )),
+          responses.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan: questions.length + 2,
+              style: { ...tdStyle, textAlign: "center", color: "var(--muted-foreground, #8a8a95)", padding: "32px" },
+              children: "No responses yet"
+            }
+          ) })
+        ] })
+      ]
+    }
+  ) });
+}
+var thStyle = {
+  padding: "8px 12px",
+  textAlign: "left",
+  fontWeight: 600,
+  color: "var(--foreground, #e8e8ea)",
+  borderBottom: "2px solid var(--border, #1c1c20)",
+  whiteSpace: "nowrap"
+};
+var tdStyle = {
+  padding: "8px 12px",
+  color: "var(--foreground, #e8e8ea)",
+  maxWidth: "200px",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+function getAllQuestions(schema) {
+  const questions = [];
+  for (const section of schema.sections) {
+    for (const q of section.questions) {
+      if (q.type === "info-block" || q.type === "section-header" || q.type === "page-break") {
+        continue;
+      }
+      questions.push(q);
+    }
+  }
+  return questions;
+}
+function formatCellValue(value) {
+  if (value == null) return "\u2014";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (Array.isArray(value)) return value.join(", ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function ResponseCard({ response, fields, onClick }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick,
+      style: {
+        border: "1px solid var(--border, #1c1c20)",
+        borderRadius: "8px",
+        padding: "16px",
+        backgroundColor: "var(--card, #111113)",
+        cursor: onClick ? "pointer" : "default",
+        fontFamily: "inherit",
+        transition: "box-shadow 0.15s"
+      },
+      onMouseEnter: (e) => {
+        if (onClick) e.currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.3)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.boxShadow = "none";
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              marginBottom: "12px",
+              fontSize: "12px",
+              color: "var(--muted-foreground, #8a8a95)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: new Date(response.submittedAt).toLocaleString() }),
+              response.completionTimeMs != null && /* @__PURE__ */ jsxs("span", { children: [
+                Math.round(response.completionTimeMs / 1e3),
+                "s"
+              ] })
+            ]
+          }
+        ),
+        fields.slice(0, 4).map((field) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "var(--muted-foreground, #8a8a95)", marginBottom: "2px" }, children: field.label }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "13px", color: "var(--foreground, #e8e8ea)" }, children: formatValue(field.value) })
+        ] }, field.questionId)),
+        fields.length > 4 && /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: "var(--muted-foreground, #8a8a95)", marginTop: "8px" }, children: [
+          "+",
+          fields.length - 4,
+          " more fields"
+        ] }),
+        response.totalScore != null && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "12px",
+              paddingTop: "8px",
+              borderTop: "1px solid var(--border, #1c1c20)",
+              fontSize: "13px",
+              fontWeight: 600,
+              color: "var(--foreground, #e8e8ea)"
+            },
+            children: [
+              "Score: ",
+              response.totalScore
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function formatValue(value) {
+  if (value == null) return "\u2014";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (Array.isArray(value)) return value.map(formatValue).join(", ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function ResponseDetail({ response, fields, onBack }) {
+  return /* @__PURE__ */ jsxs("div", { style: { fontFamily: "inherit" }, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "12px",
+          marginBottom: "20px",
+          paddingBottom: "12px",
+          borderBottom: "1px solid var(--border, #1c1c20)"
+        },
+        children: [
+          onBack && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onBack,
+              style: {
+                padding: "4px 10px",
+                fontSize: "13px",
+                color: "var(--secondary-foreground, #e8e8ea)",
+                backgroundColor: "var(--secondary, #17171a)",
+                border: "1px solid var(--border, #1c1c20)",
+                borderRadius: "6px",
+                cursor: "pointer"
+              },
+              children: "Back"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 600, color: "var(--foreground, #e8e8ea)" }, children: "Response Detail" }),
+            /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: "var(--muted-foreground, #8a8a95)" }, children: [
+              "Submitted ",
+              new Date(response.submittedAt).toLocaleString(),
+              response.completionTimeMs != null && ` \u2014 ${Math.round(response.completionTimeMs / 1e3)}s`
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: fields.map((field) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: "12px",
+          backgroundColor: "var(--muted, #111113)",
+          borderRadius: "6px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: "var(--muted-foreground, #8a8a95)", marginBottom: "4px" }, children: [
+            field.label,
+            /* @__PURE__ */ jsxs("span", { style: { marginLeft: "8px", fontSize: "11px", color: "var(--muted-foreground, #8a8a95)" }, children: [
+              "(",
+              field.type,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "var(--foreground, #e8e8ea)", whiteSpace: "pre-wrap" }, children: formatDetailValue(field.value) })
+        ]
+      },
+      field.questionId
+    )) }),
+    response.scores && Object.keys(response.scores).length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "20px" }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            fontSize: "14px",
+            fontWeight: 600,
+            color: "var(--foreground, #e8e8ea)",
+            marginBottom: "12px"
+          },
+          children: "Scores"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "12px", flexWrap: "wrap" }, children: [
+        Object.entries(response.scores).map(([key, value]) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "8px 16px",
+              backgroundColor: "var(--accent, #17171a)",
+              borderRadius: "6px",
+              fontSize: "13px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { style: { color: "var(--muted-foreground, #8a8a95)" }, children: [
+                key,
+                ": "
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--primary, oklch(0.82 0.14 210))" }, children: value })
+            ]
+          },
+          key
+        )),
+        response.totalScore != null && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "8px 16px",
+              backgroundColor: "var(--accent, #17171a)",
+              borderRadius: "6px",
+              fontSize: "13px"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "var(--muted-foreground, #8a8a95)" }, children: "Total: " }),
+              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--primary, oklch(0.82 0.14 210))" }, children: response.totalScore })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          marginTop: "20px",
+          paddingTop: "12px",
+          borderTop: "1px solid var(--border, #1c1c20)",
+          fontSize: "12px",
+          color: "var(--muted-foreground, #8a8a95)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            "Schema: ",
+            response.schemaId,
+            " (v",
+            response.schemaVersion,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            "Session: ",
+            response.sessionToken
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function formatDetailValue(value) {
+  if (value == null) return "\u2014";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (Array.isArray(value)) return value.map(formatDetailValue).join("\n");
+  if (typeof value === "object") return JSON.stringify(value, null, 2);
+  return String(value);
+}
+var viewButtonStyle = (active) => ({
+  padding: "4px 10px",
+  fontSize: "12px",
+  fontWeight: active ? 600 : 400,
+  color: active ? "var(--primary, oklch(0.82 0.14 210))" : "var(--muted-foreground, #8a8a95)",
+  backgroundColor: active ? "var(--accent, #17171a)" : "transparent",
+  border: "1px solid",
+  borderColor: active ? "var(--ring, oklch(0.82 0.14 210))" : "var(--border, #1c1c20)",
+  borderRadius: "6px",
+  cursor: "pointer",
+  fontFamily: "inherit"
+});
+function ResponseViewerInner({
+  schema,
+  responses,
+  onResponseSelect,
+  height = "500px",
+  width = "100%"
+}) {
+  const [viewMode, setViewMode] = useState("table");
+  const [selectedResponse, setSelectedResponse] = useState(null);
+  function handleSelect(response) {
+    setSelectedResponse(response);
+    onResponseSelect?.(response);
+  }
+  function handleBack() {
+    setSelectedResponse(null);
+  }
+  const questions = getAllQuestions2(schema);
+  function getFields(response) {
+    return questions.map((q) => ({
+      questionId: q.id,
+      label: q.label,
+      type: q.type,
+      value: response.values[q.id]
+    }));
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: typeof height === "number" ? `${height}px` : height,
+        width: typeof width === "number" ? `${width}px` : width,
+        border: "1px solid var(--border, #1c1c20)",
+        borderRadius: "8px",
+        overflow: "hidden",
+        fontFamily: "inherit",
+        backgroundColor: "var(--background, #0a0a0b)",
+        color: "var(--foreground, #e8e8ea)"
+      },
+      children: [
+        !selectedResponse && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              padding: "8px 12px",
+              borderBottom: "1px solid var(--border, #1c1c20)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { fontSize: "13px", color: "var(--muted-foreground, #8a8a95)" }, children: [
+                responses.length,
+                " response",
+                responses.length !== 1 ? "s" : ""
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    style: viewButtonStyle(viewMode === "table"),
+                    onClick: () => setViewMode("table"),
+                    children: "Table"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    style: viewButtonStyle(viewMode === "card"),
+                    onClick: () => setViewMode("card"),
+                    children: "Cards"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", padding: selectedResponse ? "16px" : void 0 }, children: selectedResponse ? /* @__PURE__ */ jsx(
+          ResponseDetail,
+          {
+            response: selectedResponse,
+            fields: getFields(selectedResponse),
+            onBack: handleBack
+          }
+        ) : viewMode === "table" ? /* @__PURE__ */ jsx(
+          ResponseTable,
+          {
+            schema,
+            responses,
+            onRowClick: handleSelect
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+              gap: "12px",
+              padding: "12px"
+            },
+            children: [
+              responses.map((response, idx) => /* @__PURE__ */ jsx(
+                ResponseCard,
+                {
+                  response,
+                  fields: getFields(response),
+                  onClick: () => handleSelect(response)
+                },
+                response.sessionToken || idx
+              )),
+              responses.length === 0 && /* @__PURE__ */ jsx("div", { style: { padding: "32px", textAlign: "center", color: "var(--muted-foreground, #8a8a95)" }, children: "No responses yet" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function getAllQuestions2(schema) {
+  const questions = [];
+  for (const section of schema.sections) {
+    for (const q of section.questions) {
+      if (q.type === "info-block" || q.type === "section-header" || q.type === "page-break") {
+        continue;
+      }
+      questions.push(q);
+    }
+  }
+  return questions;
+}
+
+// src/response-viewer/ResponseViewer.tsx
+var ResponseViewer = requireLicense(ResponseViewerInner, "ResponseViewer");
+
+export { ResponseViewer };