@vinetechke/next-error-logger 0.1.0-beta.1

package/dist/components/index.js

@@ -0,0 +1,1147 @@
+"use client";
+
+// src/components/LogViewer.tsx
+import { useState, useEffect, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultTheme = {
+  errorBg: "rgb(254, 226, 226)",
+  errorText: "rgb(153, 27, 27)",
+  warnBg: "rgb(254, 249, 195)",
+  warnText: "rgb(133, 77, 14)",
+  infoBg: "rgb(219, 234, 254)",
+  infoText: "rgb(30, 64, 175)",
+  debugBg: "rgb(243, 244, 246)",
+  debugText: "rgb(55, 65, 81)"
+};
+function LogViewer({
+  apiBasePath = "/api/logs",
+  className = "",
+  pageSize = 50,
+  theme: customTheme,
+  onLogSelect,
+  showDelete = true,
+  autoRefresh = 0
+}) {
+  const theme = { ...defaultTheme, ...customTheme };
+  const [logs, setLogs] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [filters, setFilters] = useState({
+    level: "",
+    search: "",
+    userId: ""
+  });
+  const [selectedLog, setSelectedLog] = useState(null);
+  const [deleting, setDeleting] = useState(false);
+  const fetchLogs = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams({
+        page: page.toString(),
+        limit: pageSize.toString(),
+        ...filters.level && { level: filters.level },
+        ...filters.search && { search: filters.search },
+        ...filters.userId && { userId: filters.userId }
+      });
+      const res = await fetch(`${apiBasePath}?${params}`);
+      if (!res.ok) throw new Error("Failed to fetch logs");
+      const data = await res.json();
+      setLogs(data.logs);
+      setTotal(data.total);
+    } catch (error) {
+      console.error("Failed to fetch logs:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBasePath, page, pageSize, filters]);
+  useEffect(() => {
+    fetchLogs();
+  }, [fetchLogs]);
+  useEffect(() => {
+    if (autoRefresh <= 0) return;
+    const interval = setInterval(fetchLogs, autoRefresh * 1e3);
+    return () => clearInterval(interval);
+  }, [autoRefresh, fetchLogs]);
+  const handleDelete = async (id) => {
+    if (!confirm("Are you sure you want to delete this log?")) return;
+    setDeleting(true);
+    try {
+      const res = await fetch(`${apiBasePath}/${id}`, {
+        method: "DELETE"
+      });
+      if (!res.ok) throw new Error("Failed to delete log");
+      setLogs((prev) => prev.filter((log) => log.id !== id));
+      setTotal((prev) => prev - 1);
+      if (selectedLog?.id === id) setSelectedLog(null);
+    } catch (error) {
+      console.error("Failed to delete log:", error);
+      alert("Failed to delete log");
+    } finally {
+      setDeleting(false);
+    }
+  };
+  const handleClearAll = async () => {
+    const confirmed = confirm(
+      "Are you sure you want to delete ALL logs? This cannot be undone."
+    );
+    if (!confirmed) return;
+    setDeleting(true);
+    try {
+      const res = await fetch(apiBasePath, {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({})
+      });
+      if (!res.ok) throw new Error("Failed to clear logs");
+      setLogs([]);
+      setTotal(0);
+      setSelectedLog(null);
+    } catch (error) {
+      console.error("Failed to clear logs:", error);
+      alert("Failed to clear logs");
+    } finally {
+      setDeleting(false);
+    }
+  };
+  const getLevelStyle = (level) => {
+    switch (level) {
+      case "error":
+        return {
+          backgroundColor: theme.errorBg,
+          color: theme.errorText
+        };
+      case "warn":
+        return { backgroundColor: theme.warnBg, color: theme.warnText };
+      case "info":
+        return { backgroundColor: theme.infoBg, color: theme.infoText };
+      case "debug":
+        return {
+          backgroundColor: theme.debugBg,
+          color: theme.debugText
+        };
+    }
+  };
+  const totalPages = Math.ceil(total / pageSize);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: { fontFamily: "system-ui, sans-serif" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "1rem",
+              marginBottom: "1rem",
+              flexWrap: "wrap",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  value: filters.level,
+                  onChange: (e) => {
+                    setFilters({
+                      ...filters,
+                      level: e.target.value
+                    });
+                    setPage(1);
+                  },
+                  style: {
+                    padding: "0.5rem 1rem",
+                    borderRadius: "0.375rem",
+                    border: "1px solid #d1d5db",
+                    fontSize: "0.875rem"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: "All Levels" }),
+                    /* @__PURE__ */ jsx("option", { value: "error", children: "Error" }),
+                    /* @__PURE__ */ jsx("option", { value: "warn", children: "Warning" }),
+                    /* @__PURE__ */ jsx("option", { value: "info", children: "Info" }),
+                    /* @__PURE__ */ jsx("option", { value: "debug", children: "Debug" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "Search logs...",
+                  value: filters.search,
+                  onChange: (e) => {
+                    setFilters({ ...filters, search: e.target.value });
+                    setPage(1);
+                  },
+                  style: {
+                    padding: "0.5rem 1rem",
+                    borderRadius: "0.375rem",
+                    border: "1px solid #d1d5db",
+                    flex: 1,
+                    minWidth: "200px",
+                    fontSize: "0.875rem"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  placeholder: "User ID...",
+                  value: filters.userId,
+                  onChange: (e) => {
+                    setFilters({ ...filters, userId: e.target.value });
+                    setPage(1);
+                  },
+                  style: {
+                    padding: "0.5rem 1rem",
+                    borderRadius: "0.375rem",
+                    border: "1px solid #d1d5db",
+                    width: "150px",
+                    fontSize: "0.875rem"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: fetchLogs,
+                  disabled: loading,
+                  style: {
+                    padding: "0.5rem 1rem",
+                    borderRadius: "0.375rem",
+                    backgroundColor: "#3b82f6",
+                    color: "white",
+                    border: "none",
+                    cursor: loading ? "not-allowed" : "pointer",
+                    opacity: loading ? 0.7 : 1,
+                    fontSize: "0.875rem"
+                  },
+                  children: loading ? "Loading..." : "Refresh"
+                }
+              ),
+              showDelete && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleClearAll,
+                  disabled: deleting || total === 0,
+                  style: {
+                    padding: "0.5rem 1rem",
+                    borderRadius: "0.375rem",
+                    backgroundColor: "#ef4444",
+                    color: "white",
+                    border: "none",
+                    cursor: deleting || total === 0 ? "not-allowed" : "pointer",
+                    opacity: deleting || total === 0 ? 0.7 : 1,
+                    fontSize: "0.875rem"
+                  },
+                  children: "Clear All"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginBottom: "1rem",
+              fontSize: "0.875rem",
+              color: "#6b7280"
+            },
+            children: [
+              "Showing ",
+              logs.length,
+              " of ",
+              total,
+              " logs",
+              autoRefresh > 0 && ` \u2022 Auto-refreshing every ${autoRefresh}s`
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              border: "1px solid #e5e7eb",
+              borderRadius: "0.5rem",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { style: { backgroundColor: "#f9fafb" }, children: [
+                /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    style: {
+                      padding: "0.75rem 1rem",
+                      textAlign: "left",
+                      fontSize: "0.875rem",
+                      fontWeight: 500,
+                      borderBottom: "1px solid #e5e7eb"
+                    },
+                    children: "Level"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    style: {
+                      padding: "0.75rem 1rem",
+                      textAlign: "left",
+                      fontSize: "0.875rem",
+                      fontWeight: 500,
+                      borderBottom: "1px solid #e5e7eb"
+                    },
+                    children: "Message"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    style: {
+                      padding: "0.75rem 1rem",
+                      textAlign: "left",
+                      fontSize: "0.875rem",
+                      fontWeight: 500,
+                      borderBottom: "1px solid #e5e7eb"
+                    },
+                    children: "User"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    style: {
+                      padding: "0.75rem 1rem",
+                      textAlign: "left",
+                      fontSize: "0.875rem",
+                      fontWeight: 500,
+                      borderBottom: "1px solid #e5e7eb"
+                    },
+                    children: "Path"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    style: {
+                      padding: "0.75rem 1rem",
+                      textAlign: "left",
+                      fontSize: "0.875rem",
+                      fontWeight: 500,
+                      borderBottom: "1px solid #e5e7eb"
+                    },
+                    children: "Time"
+                  }
+                ),
+                showDelete && /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    style: {
+                      padding: "0.75rem 1rem",
+                      textAlign: "center",
+                      fontSize: "0.875rem",
+                      fontWeight: 500,
+                      borderBottom: "1px solid #e5e7eb",
+                      width: "80px"
+                    },
+                    children: "Actions"
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { children: loading && logs.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                "td",
+                {
+                  colSpan: showDelete ? 6 : 5,
+                  style: {
+                    padding: "2rem",
+                    textAlign: "center",
+                    color: "#6b7280"
+                  },
+                  children: "Loading..."
+                }
+              ) }) : logs.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                "td",
+                {
+                  colSpan: showDelete ? 6 : 5,
+                  style: {
+                    padding: "2rem",
+                    textAlign: "center",
+                    color: "#6b7280"
+                  },
+                  children: "No logs found"
+                }
+              ) }) : logs.map((log) => /* @__PURE__ */ jsxs(
+                "tr",
+                {
+                  onClick: () => {
+                    setSelectedLog(log);
+                    onLogSelect?.(log);
+                  },
+                  style: {
+                    cursor: "pointer",
+                    backgroundColor: selectedLog?.id === log.id ? "#f3f4f6" : "white"
+                  },
+                  onMouseEnter: (e) => {
+                    if (selectedLog?.id !== log.id) {
+                      e.currentTarget.style.backgroundColor = "#f9fafb";
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    if (selectedLog?.id !== log.id) {
+                      e.currentTarget.style.backgroundColor = "white";
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        style: {
+                          padding: "0.75rem 1rem",
+                          borderBottom: "1px solid #e5e7eb"
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              ...getLevelStyle(log.level),
+                              padding: "0.25rem 0.5rem",
+                              borderRadius: "0.25rem",
+                              fontSize: "0.75rem",
+                              fontWeight: 500,
+                              textTransform: "uppercase"
+                            },
+                            children: log.level
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        style: {
+                          padding: "0.75rem 1rem",
+                          borderBottom: "1px solid #e5e7eb",
+                          fontSize: "0.875rem",
+                          maxWidth: "300px",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: log.message
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        style: {
+                          padding: "0.75rem 1rem",
+                          borderBottom: "1px solid #e5e7eb",
+                          fontSize: "0.875rem",
+                          color: "#6b7280"
+                        },
+                        children: log.userEmail || log.userName || log.userId || "-"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        style: {
+                          padding: "0.75rem 1rem",
+                          borderBottom: "1px solid #e5e7eb",
+                          fontSize: "0.875rem",
+                          color: "#6b7280"
+                        },
+                        children: log.path || "-"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        style: {
+                          padding: "0.75rem 1rem",
+                          borderBottom: "1px solid #e5e7eb",
+                          fontSize: "0.875rem",
+                          color: "#6b7280",
+                          whiteSpace: "nowrap"
+                        },
+                        children: new Date(
+                          log.createdAt
+                        ).toLocaleString()
+                      }
+                    ),
+                    showDelete && /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        style: {
+                          padding: "0.75rem 1rem",
+                          borderBottom: "1px solid #e5e7eb",
+                          textAlign: "center"
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleDelete(log.id);
+                            },
+                            disabled: deleting,
+                            style: {
+                              padding: "0.25rem 0.5rem",
+                              borderRadius: "0.25rem",
+                              backgroundColor: "transparent",
+                              color: "#ef4444",
+                              border: "1px solid #ef4444",
+                              cursor: deleting ? "not-allowed" : "pointer",
+                              fontSize: "0.75rem"
+                            },
+                            children: "Delete"
+                          }
+                        )
+                      }
+                    )
+                  ]
+                },
+                log.id
+              )) })
+            ] })
+          }
+        ),
+        totalPages > 1 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginTop: "1rem"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", color: "#6b7280" }, children: [
+                "Page ",
+                page,
+                " of ",
+                totalPages
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem" }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setPage(1),
+                    disabled: page === 1,
+                    style: {
+                      padding: "0.5rem 0.75rem",
+                      borderRadius: "0.375rem",
+                      border: "1px solid #d1d5db",
+                      backgroundColor: "white",
+                      cursor: page === 1 ? "not-allowed" : "pointer",
+                      opacity: page === 1 ? 0.5 : 1,
+                      fontSize: "0.875rem"
+                    },
+                    children: "First"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setPage(Math.max(1, page - 1)),
+                    disabled: page === 1,
+                    style: {
+                      padding: "0.5rem 0.75rem",
+                      borderRadius: "0.375rem",
+                      border: "1px solid #d1d5db",
+                      backgroundColor: "white",
+                      cursor: page === 1 ? "not-allowed" : "pointer",
+                      opacity: page === 1 ? 0.5 : 1,
+                      fontSize: "0.875rem"
+                    },
+                    children: "Previous"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setPage(Math.min(totalPages, page + 1)),
+                    disabled: page === totalPages,
+                    style: {
+                      padding: "0.5rem 0.75rem",
+                      borderRadius: "0.375rem",
+                      border: "1px solid #d1d5db",
+                      backgroundColor: "white",
+                      cursor: page === totalPages ? "not-allowed" : "pointer",
+                      opacity: page === totalPages ? 0.5 : 1,
+                      fontSize: "0.875rem"
+                    },
+                    children: "Next"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => setPage(totalPages),
+                    disabled: page === totalPages,
+                    style: {
+                      padding: "0.5rem 0.75rem",
+                      borderRadius: "0.375rem",
+                      border: "1px solid #d1d5db",
+                      backgroundColor: "white",
+                      cursor: page === totalPages ? "not-allowed" : "pointer",
+                      opacity: page === totalPages ? 0.5 : 1,
+                      fontSize: "0.875rem"
+                    },
+                    children: "Last"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        selectedLog && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              inset: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "1rem",
+              zIndex: 50
+            },
+            onClick: () => setSelectedLog(null),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  backgroundColor: "white",
+                  borderRadius: "0.5rem",
+                  maxWidth: "48rem",
+                  width: "100%",
+                  maxHeight: "80vh",
+                  overflow: "auto",
+                  padding: "1.5rem"
+                },
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "flex-start",
+                        marginBottom: "1rem"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "h2",
+                          {
+                            style: {
+                              fontSize: "1.125rem",
+                              fontWeight: 600,
+                              margin: 0
+                            },
+                            children: "Log Details"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: () => setSelectedLog(null),
+                            style: {
+                              background: "none",
+                              border: "none",
+                              fontSize: "1.5rem",
+                              cursor: "pointer",
+                              color: "#6b7280",
+                              lineHeight: 1
+                            },
+                            children: "\xD7"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("dl", { style: { display: "grid", gap: "1rem" }, children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "dt",
+                        {
+                          style: {
+                            fontSize: "0.875rem",
+                            fontWeight: 500,
+                            color: "#6b7280",
+                            marginBottom: "0.25rem"
+                          },
+                          children: "Level"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("dd", { style: { margin: 0 }, children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            ...getLevelStyle(selectedLog.level),
+                            padding: "0.25rem 0.5rem",
+                            borderRadius: "0.25rem",
+                            fontSize: "0.75rem",
+                            fontWeight: 500,
+                            textTransform: "uppercase"
+                          },
+                          children: selectedLog.level
+                        }
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "dt",
+                        {
+                          style: {
+                            fontSize: "0.875rem",
+                            fontWeight: 500,
+                            color: "#6b7280",
+                            marginBottom: "0.25rem"
+                          },
+                          children: "Message"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("dd", { style: { margin: 0, fontSize: "0.875rem" }, children: selectedLog.message })
+                    ] }),
+                    selectedLog.stack && /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "dt",
+                        {
+                          style: {
+                            fontSize: "0.875rem",
+                            fontWeight: 500,
+                            color: "#6b7280",
+                            marginBottom: "0.25rem"
+                          },
+                          children: "Stack Trace"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("dd", { style: { margin: 0 }, children: /* @__PURE__ */ jsx(
+                        "pre",
+                        {
+                          style: {
+                            fontSize: "0.75rem",
+                            fontFamily: "monospace",
+                            backgroundColor: "#f3f4f6",
+                            padding: "0.75rem",
+                            borderRadius: "0.375rem",
+                            overflow: "auto",
+                            maxHeight: "200px",
+                            margin: 0,
+                            whiteSpace: "pre-wrap",
+                            wordBreak: "break-all"
+                          },
+                          children: selectedLog.stack
+                        }
+                      ) })
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "grid",
+                          gridTemplateColumns: "repeat(2, 1fr)",
+                          gap: "1rem"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            /* @__PURE__ */ jsx(
+                              "dt",
+                              {
+                                style: {
+                                  fontSize: "0.875rem",
+                                  fontWeight: 500,
+                                  color: "#6b7280",
+                                  marginBottom: "0.25rem"
+                                },
+                                children: "User"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "dd",
+                              {
+                                style: {
+                                  margin: 0,
+                                  fontSize: "0.875rem"
+                                },
+                                children: selectedLog.userEmail || selectedLog.userName || selectedLog.userId || "-"
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            /* @__PURE__ */ jsx(
+                              "dt",
+                              {
+                                style: {
+                                  fontSize: "0.875rem",
+                                  fontWeight: 500,
+                                  color: "#6b7280",
+                                  marginBottom: "0.25rem"
+                                },
+                                children: "User ID"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "dd",
+                              {
+                                style: {
+                                  margin: 0,
+                                  fontSize: "0.875rem"
+                                },
+                                children: selectedLog.userId || "-"
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            /* @__PURE__ */ jsx(
+                              "dt",
+                              {
+                                style: {
+                                  fontSize: "0.875rem",
+                                  fontWeight: 500,
+                                  color: "#6b7280",
+                                  marginBottom: "0.25rem"
+                                },
+                                children: "Path"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "dd",
+                              {
+                                style: {
+                                  margin: 0,
+                                  fontSize: "0.875rem"
+                                },
+                                children: selectedLog.path || "-"
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            /* @__PURE__ */ jsx(
+                              "dt",
+                              {
+                                style: {
+                                  fontSize: "0.875rem",
+                                  fontWeight: 500,
+                                  color: "#6b7280",
+                                  marginBottom: "0.25rem"
+                                },
+                                children: "Method"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "dd",
+                              {
+                                style: {
+                                  margin: 0,
+                                  fontSize: "0.875rem"
+                                },
+                                children: selectedLog.method || "-"
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            /* @__PURE__ */ jsx(
+                              "dt",
+                              {
+                                style: {
+                                  fontSize: "0.875rem",
+                                  fontWeight: 500,
+                                  color: "#6b7280",
+                                  marginBottom: "0.25rem"
+                                },
+                                children: "IP Address"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "dd",
+                              {
+                                style: {
+                                  margin: 0,
+                                  fontSize: "0.875rem"
+                                },
+                                children: selectedLog.ip || "-"
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            /* @__PURE__ */ jsx(
+                              "dt",
+                              {
+                                style: {
+                                  fontSize: "0.875rem",
+                                  fontWeight: 500,
+                                  color: "#6b7280",
+                                  marginBottom: "0.25rem"
+                                },
+                                children: "Time"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "dd",
+                              {
+                                style: {
+                                  margin: 0,
+                                  fontSize: "0.875rem"
+                                },
+                                children: new Date(
+                                  selectedLog.createdAt
+                                ).toLocaleString()
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    ),
+                    selectedLog.userAgent && /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "dt",
+                        {
+                          style: {
+                            fontSize: "0.875rem",
+                            fontWeight: 500,
+                            color: "#6b7280",
+                            marginBottom: "0.25rem"
+                          },
+                          children: "User Agent"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "dd",
+                        {
+                          style: {
+                            margin: 0,
+                            fontSize: "0.75rem",
+                            color: "#6b7280",
+                            wordBreak: "break-all"
+                          },
+                          children: selectedLog.userAgent
+                        }
+                      )
+                    ] }),
+                    selectedLog.metadata && Object.keys(selectedLog.metadata).length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "dt",
+                        {
+                          style: {
+                            fontSize: "0.875rem",
+                            fontWeight: 500,
+                            color: "#6b7280",
+                            marginBottom: "0.25rem"
+                          },
+                          children: "Metadata"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("dd", { style: { margin: 0 }, children: /* @__PURE__ */ jsx(
+                        "pre",
+                        {
+                          style: {
+                            fontSize: "0.75rem",
+                            fontFamily: "monospace",
+                            backgroundColor: "#f3f4f6",
+                            padding: "0.75rem",
+                            borderRadius: "0.375rem",
+                            overflow: "auto",
+                            maxHeight: "150px",
+                            margin: 0
+                          },
+                          children: JSON.stringify(
+                            selectedLog.metadata,
+                            null,
+                            2
+                          )
+                        }
+                      ) })
+                    ] })
+                  ] }),
+                  showDelete && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        marginTop: "1.5rem",
+                        textAlign: "right"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => {
+                            handleDelete(selectedLog.id);
+                          },
+                          disabled: deleting,
+                          style: {
+                            padding: "0.5rem 1rem",
+                            borderRadius: "0.375rem",
+                            backgroundColor: "#ef4444",
+                            color: "white",
+                            border: "none",
+                            cursor: deleting ? "not-allowed" : "pointer",
+                            opacity: deleting ? 0.7 : 1,
+                            fontSize: "0.875rem"
+                          },
+                          children: "Delete This Log"
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ErrorBoundary.tsx
+import { Component } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    this.reset = () => {
+      this.setState({ hasError: false, error: null });
+    };
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    const {
+      onError,
+      logToConsole = process.env.NODE_ENV === "development"
+    } = this.props;
+    if (logToConsole) {
+      console.error("ErrorBoundary caught an error:", error);
+      console.error("Component stack:", errorInfo.componentStack);
+    }
+    onError?.(error, errorInfo);
+  }
+  render() {
+    const { hasError, error } = this.state;
+    const { children, fallback } = this.props;
+    if (hasError && error) {
+      if (typeof fallback === "function") {
+        return fallback(error, this.reset);
+      }
+      if (fallback) {
+        return fallback;
+      }
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: {
+            padding: "2rem",
+            textAlign: "center",
+            fontFamily: "system-ui, sans-serif"
+          },
+          children: [
+            /* @__PURE__ */ jsx2(
+              "h2",
+              {
+                style: {
+                  fontSize: "1.5rem",
+                  fontWeight: 600,
+                  color: "#dc2626",
+                  marginBottom: "1rem"
+                },
+                children: "Something went wrong"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "p",
+              {
+                style: {
+                  color: "#6b7280",
+                  marginBottom: "1rem"
+                },
+                children: "An unexpected error occurred. Please try again."
+              }
+            ),
+            /* @__PURE__ */ jsxs2(
+              "details",
+              {
+                style: {
+                  marginBottom: "1rem",
+                  textAlign: "left",
+                  maxWidth: "600px",
+                  margin: "0 auto 1rem"
+                },
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    "summary",
+                    {
+                      style: {
+                        cursor: "pointer",
+                        color: "#3b82f6",
+                        marginBottom: "0.5rem"
+                      },
+                      children: "Error details"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2(
+                    "pre",
+                    {
+                      style: {
+                        fontSize: "0.75rem",
+                        fontFamily: "monospace",
+                        backgroundColor: "#f3f4f6",
+                        padding: "1rem",
+                        borderRadius: "0.5rem",
+                        overflow: "auto",
+                        textAlign: "left",
+                        whiteSpace: "pre-wrap",
+                        wordBreak: "break-all"
+                      },
+                      children: [
+                        error.message,
+                        "\n\n",
+                        error.stack
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: this.reset,
+                style: {
+                  padding: "0.75rem 1.5rem",
+                  backgroundColor: "#3b82f6",
+                  color: "white",
+                  border: "none",
+                  borderRadius: "0.375rem",
+                  cursor: "pointer",
+                  fontSize: "1rem"
+                },
+                children: "Try again"
+              }
+            )
+          ]
+        }
+      );
+    }
+    return children;
+  }
+};
+function withErrorBoundary(Component2, errorBoundaryProps) {
+  const WrappedComponent = (props) => /* @__PURE__ */ jsx2(ErrorBoundary, { ...errorBoundaryProps, children: /* @__PURE__ */ jsx2(Component2, { ...props }) });
+  WrappedComponent.displayName = `withErrorBoundary(${Component2.displayName || Component2.name || "Component"})`;
+  return WrappedComponent;
+}
+export {
+  ErrorBoundary,
+  LogViewer,
+  withErrorBoundary
+};
+//# sourceMappingURL=index.js.map