@eztrak/shared 0.13.5 → 0.13.7

package/dist/components/index.js

@@ -41,6 +41,7 @@ __export(components_exports, {
   ResetColumnsButton: () => ResetColumnsButton,
   ResetFiltersButton: () => ResetFiltersButton,
   SearchInput: () => SearchInput,
+  TableErrorBoundary: () => TableErrorBoundary,
   TableLayoutToolbarControls: () => TableLayoutToolbarControls,
   ToolTip: () => ToolTip,
   TooltipText: () => TooltipText,
@@ -269,6 +270,40 @@ var import_react_router_dom = require("react-router-dom");
 // src/utils/handleApiError.ts
 var import_react_hot_toast = __toESM(require("react-hot-toast"));
 var import_sweetalert2 = __toESM(require("sweetalert2"));
+function classifyError(error) {
+  if (!error) {
+    return {
+      isRetryable: false,
+      userMessage: "An error occurred.",
+      technicalMessage: "Unknown error",
+      suggestedAction: "none"
+    };
+  }
+  const status = error.status ?? error.originalStatus;
+  const data = error.data;
+  if (status === "FETCH_ERROR" || status === "TIMEOUT_ERROR" || status === "PARSING_ERROR") {
+    return {
+      isRetryable: true,
+      userMessage: "Network error. Please check your connection.",
+      technicalMessage: "Network request failed",
+      suggestedAction: "retry"
+    };
+  }
+  if (typeof status === "number" && status >= 500 && status < 600) {
+    return {
+      isRetryable: true,
+      userMessage: "Server is temporarily unavailable. Please try again.",
+      technicalMessage: `Server error: ${status}`,
+      suggestedAction: "retry"
+    };
+  }
+  return {
+    isRetryable: false,
+    userMessage: data?.message || data?.title || error.error || "An error occurred. Please try again.",
+    technicalMessage: typeof status === "number" || typeof status === "string" ? `Client error: ${status}` : "Request failed",
+    suggestedAction: "none"
+  };
+}
 var BRAND_ORANGE = "#FF7335";
 var CANCEL_RED = "#ff0000";
 function getConfirmErrorMessage(error) {
@@ -1746,6 +1781,85 @@ function PopupCellRenderer({
     }
   ) });
 }
+
+// src/components/table-error-boundary/TableErrorBoundary.tsx
+var import_react9 = require("react");
+var import_fa6 = require("react-icons/fa6");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var TableErrorBoundary = ({
+  isError,
+  isLoading = false,
+  refetch,
+  children,
+  error,
+  errorMessage,
+  className,
+  minHeight = "280px"
+}) => {
+  const message = (0, import_react9.useMemo)(() => {
+    if (errorMessage) return errorMessage;
+    if (error) return classifyError(error).userMessage;
+    return "Unable to load table data. Please try again.";
+  }, [error, errorMessage]);
+  if (isLoading && !isError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "div",
+      {
+        className: cn(
+          "flex w-full items-center justify-center rounded-xl bg-neutral-50",
+          className
+        ),
+        style: { minHeight },
+        role: "status",
+        "aria-live": "polite",
+        "aria-busy": "true",
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Loader, { size: "40px" })
+      }
+    );
+  }
+  if (isError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: cn(
+          "flex w-full flex-col items-center justify-center gap-4 rounded-xl border border-red-100 bg-red-50 px-6 py-10 text-center",
+          className
+        ),
+        style: { minHeight },
+        role: "alert",
+        "aria-live": "assertive",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_fa6.FaTriangleExclamation,
+            {
+              className: "text-red-500",
+              size: 32,
+              "aria-hidden": true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "max-w-md space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-base font-semibold text-gray-800", children: "Failed to load data" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-gray-600", children: message })
+          ] }),
+          refetch && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => refetch(),
+              disabled: isLoading,
+              className: "inline-flex items-center gap-2 rounded-lg bg-primary-150 px-4 py-2 text-sm font-medium text-white transition-colors hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fa6.FaArrowsRotate, { className: cn(isLoading && "animate-spin") }),
+                isLoading ? "Retrying..." : "Try again"
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CardSkeleton,
@@ -1759,6 +1873,7 @@ function PopupCellRenderer({
   ResetColumnsButton,
   ResetFiltersButton,
   SearchInput,
+  TableErrorBoundary,
   TableLayoutToolbarControls,
   ToolTip,
   TooltipText,