@replicated/portal-components 0.0.2 → 0.0.4

package/dist/support-bundle-collection-card.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SupportBundleCollectionCardProps {
+    /** App slug used in the Linux CLI command. Defaults to "APP_SLUG" placeholder. */
+    appSlug?: string;
+    /** Whether to show the Linux tab. Defaults to true. */
+    showLinux?: boolean;
+    /** Whether to show the Helm tab. Defaults to true. */
+    showHelm?: boolean;
+    /** Callback when the upload button is clicked. If not provided, button is hidden. */
+    onUploadClick?: () => void;
+    /** Primary brand color for buttons. Defaults to "#6366f1". */
+    primaryColor?: string;
+}
+declare const SupportBundleCollectionCard: {
+    ({ appSlug, showLinux, showHelm, onUploadClick, primaryColor }: SupportBundleCollectionCardProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+export { SupportBundleCollectionCard };

package/dist/support-bundle-collection-card.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SupportBundleCollectionCardProps {
+    /** App slug used in the Linux CLI command. Defaults to "APP_SLUG" placeholder. */
+    appSlug?: string;
+    /** Whether to show the Linux tab. Defaults to true. */
+    showLinux?: boolean;
+    /** Whether to show the Helm tab. Defaults to true. */
+    showHelm?: boolean;
+    /** Callback when the upload button is clicked. If not provided, button is hidden. */
+    onUploadClick?: () => void;
+    /** Primary brand color for buttons. Defaults to "#6366f1". */
+    primaryColor?: string;
+}
+declare const SupportBundleCollectionCard: {
+    ({ appSlug, showLinux, showHelm, onUploadClick, primaryColor }: SupportBundleCollectionCardProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+export { SupportBundleCollectionCard };

package/dist/support-bundle-collection-card.js

@@ -0,0 +1,172 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+var getInstructionsByTab = (appSlug) => ({
+  Linux: {
+    title: "UI based collection",
+    description: "Log in to the Admin Console and go to the Troubleshoot tab. Click Analyze to generate a support bundle. After the analysis completes, you can download the bundle or send it directly to the vendor if enabled.",
+    cli: `sudo ./${appSlug} support-bundle`,
+    footer: "The support bundle will be saved as a .tar.gz file in your current directory. While sensitive information is automatically redacted, we recommend reviewing the contents before uploading for analysis."
+  },
+  Helm: {
+    title: "CLI based collection",
+    description: "For Helm installations, you'll need to use the kubectl support-bundle plugin to collect diagnostics.",
+    steps: [
+      {
+        title: "Step 1: Install the support-bundle plugin",
+        description: "First, install the kubectl support-bundle plugin using krew:",
+        command: "kubectl krew install support-bundle",
+        notes: [
+          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            "If you don't have krew installed, follow the instructions at",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: "https://krew.sigs.k8s.io/docs/user-guide/setup/install/",
+                className: "text-indigo-500 hover:text-indigo-400",
+                target: "_blank",
+                rel: "noreferrer",
+                children: "https://krew.sigs.k8s.io/docs/user-guide/setup/install/"
+              }
+            )
+          ] })
+        ]
+      },
+      {
+        title: "Step 2: Generate a support bundle",
+        description: "Run the following command to collect diagnostics from your Kubernetes cluster:",
+        command: "kubectl support-bundle --load-cluster-specs",
+        notes: [
+          "This command will automatically detect and collect diagnostics from your Kubernetes cluster.",
+          "The support bundle will be saved as a .tar.gz file in your current directory. While sensitive information is automatically redacted, we recommend reviewing the contents before uploading for analysis."
+        ]
+      }
+    ]
+  }
+});
+var tabButtonBase = "w-full rounded-lg px-4 py-2 text-left text-sm font-medium transition";
+var cliWrapperClass = "mt-4 rounded-lg bg-slate-900 px-4 py-3 font-mono text-sm text-slate-100 shadow-inner flex items-center justify-between";
+var CommandBlock = ({ command }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cliWrapperClass, role: "group", "aria-label": "Copy support bundle command", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("code", { children: command }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      className: "rounded-md bg-slate-800 px-2 py-1 text-xs font-semibold text-white transition hover:bg-slate-700",
+      onClick: async () => {
+        try {
+          await navigator.clipboard?.writeText(command);
+        } catch (error) {
+          console.error("[SupportBundleCollection] copy failed", error);
+        }
+      },
+      children: "Copy"
+    }
+  )
+] });
+var SupportBundleCollectionCard = ({
+  appSlug = "APP_SLUG",
+  showLinux = true,
+  showHelm = true,
+  onUploadClick,
+  primaryColor = "#6366f1"
+}) => {
+  const availableTabs = react.useMemo(() => {
+    const tabs = [];
+    if (showLinux) tabs.push("Linux");
+    if (showHelm) tabs.push("Helm");
+    return tabs;
+  }, [showLinux, showHelm]);
+  const [activeTab, setActiveTab] = react.useState(() => availableTabs[0] ?? "Linux");
+  const instructionsByTab = react.useMemo(() => getInstructionsByTab(appSlug), [appSlug]);
+  const activeInstructions = instructionsByTab[activeTab];
+  if (availableTabs.length === 0) {
+    return null;
+  }
+  const showTabs = availableTabs.length > 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "rounded-3xl border border-gray-100 bg-white p-8 shadow-[0_18px_45px_rgba(17,24,39,0.08)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900", children: "Support Bundle Collection" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: showTabs ? "Choose your deployment method to view the recommended collection steps." : "Follow these steps to collect a support bundle." })
+      ] }),
+      onUploadClick && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onUploadClick,
+          className: "inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:opacity-90",
+          style: { backgroundColor: primaryColor },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                className: "h-4 w-4",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 16V3" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 7l4-4 4 4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 21h14" })
+                ]
+              }
+            ),
+            "Upload a support bundle"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex flex-col gap-6 lg:flex-row", children: [
+      showTabs && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex w-full flex-col gap-2 rounded-2xl border border-gray-200 bg-gray-50 p-4 lg:w-52", children: availableTabs.map((tab) => {
+        const isActive = tab === activeTab;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveTab(tab),
+            className: `${tabButtonBase} ${isActive ? "text-white shadow" : "text-gray-600 hover:bg-white"}`,
+            style: isActive ? { backgroundColor: primaryColor } : void 0,
+            children: tab
+          },
+          tab
+        );
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("article", { className: "flex-1 rounded-2xl border border-gray-200 bg-white p-6 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: activeInstructions.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-600", children: activeInstructions.description })
+        ] }),
+        activeInstructions.steps?.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: activeInstructions.steps.map((step) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold text-gray-900", children: step.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: step.description }),
+          step.command ? /* @__PURE__ */ jsxRuntime.jsx(CommandBlock, { command: step.command }) : null,
+          step.notes?.map((note, index) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600", children: note }, `${step.title}-note-${index}`))
+        ] }, step.title)) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          activeInstructions.cli ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-semibold text-gray-900", children: "CLI based collection" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-600", children: "To collect diagnostics about your environment, SSH onto a controller node and run the following command:" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CommandBlock, { command: activeInstructions.cli })
+          ] }) : null,
+          activeInstructions.footer ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 leading-relaxed", children: activeInstructions.footer }) : null
+        ] })
+      ] }) })
+    ] })
+  ] });
+};
+SupportBundleCollectionCard.displayName = "SupportBundleCollectionCard";
+
+exports.SupportBundleCollectionCard = SupportBundleCollectionCard;
+//# sourceMappingURL=support-bundle-collection-card.js.map
+//# sourceMappingURL=support-bundle-collection-card.js.map

package/dist/support-bundle-collection-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/support-bundle-collection-card.tsx"],"names":["jsxs","Fragment","jsx","useMemo","useState"],"mappings":"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","file":"support-bundle-collection-card.js","sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState, useMemo } from \"react\";\n\ntype Platform = \"Linux\" | \"Helm\";\n\ntype StepInstruction = {\n  title: string;\n  description: ReactNode;\n  command?: string;\n  notes?: ReactNode[];\n};\n\ntype Instruction = {\n  title: string;\n  description: ReactNode;\n  cli?: string;\n  footer?: ReactNode;\n  steps?: StepInstruction[];\n};\n\ninterface SupportBundleCollectionCardProps {\n  /** App slug used in the Linux CLI command. Defaults to \"APP_SLUG\" placeholder. */\n  appSlug?: string;\n  /** Whether to show the Linux tab. Defaults to true. */\n  showLinux?: boolean;\n  /** Whether to show the Helm tab. Defaults to true. */\n  showHelm?: boolean;\n  /** Callback when the upload button is clicked. If not provided, button is hidden. */\n  onUploadClick?: () => void;\n  /** Primary brand color for buttons. Defaults to \"#6366f1\". */\n  primaryColor?: string;\n}\n\nconst getInstructionsByTab = (appSlug: string): Record<Platform, Instruction> => ({\n  Linux: {\n    title: \"UI based collection\",\n    description:\n      \"Log in to the Admin Console and go to the Troubleshoot tab. Click Analyze to generate a support bundle. After the analysis completes, you can download the bundle or send it directly to the vendor if enabled.\",\n    cli: `sudo ./${appSlug} support-bundle`,\n    footer:\n      \"The support bundle will be saved as a .tar.gz file in your current directory. While sensitive information is automatically redacted, we recommend reviewing the contents before uploading for analysis.\"\n  },\n  Helm: {\n    title: \"CLI based collection\",\n    description:\n      \"For Helm installations, you'll need to use the kubectl support-bundle plugin to collect diagnostics.\",\n    steps: [\n      {\n        title: \"Step 1: Install the support-bundle plugin\",\n        description: \"First, install the kubectl support-bundle plugin using krew:\",\n        command: \"kubectl krew install support-bundle\",\n        notes: [\n          <>\n            If you don't have krew installed, follow the instructions at{\" \"}\n            <a\n              href=\"https://krew.sigs.k8s.io/docs/user-guide/setup/install/\"\n              className=\"text-indigo-500 hover:text-indigo-400\"\n              target=\"_blank\"\n              rel=\"noreferrer\"\n            >\n              https://krew.sigs.k8s.io/docs/user-guide/setup/install/\n            </a>\n          </>\n        ]\n      },\n      {\n        title: \"Step 2: Generate a support bundle\",\n        description: \"Run the following command to collect diagnostics from your Kubernetes cluster:\",\n        command: \"kubectl support-bundle --load-cluster-specs\",\n        notes: [\n          \"This command will automatically detect and collect diagnostics from your Kubernetes cluster.\",\n          \"The support bundle will be saved as a .tar.gz file in your current directory. While sensitive information is automatically redacted, we recommend reviewing the contents before uploading for analysis.\"\n        ]\n      }\n    ]\n  }\n});\n\nconst tabButtonBase =\n  \"w-full rounded-lg px-4 py-2 text-left text-sm font-medium transition\";\n\nconst cliWrapperClass =\n  \"mt-4 rounded-lg bg-slate-900 px-4 py-3 font-mono text-sm text-slate-100 shadow-inner flex items-center justify-between\";\n\nconst CommandBlock = ({ command }: { command: string }) => (\n  <div className={cliWrapperClass} role=\"group\" aria-label=\"Copy support bundle command\">\n    <code>{command}</code>\n    <button\n      type=\"button\"\n      className=\"rounded-md bg-slate-800 px-2 py-1 text-xs font-semibold text-white transition hover:bg-slate-700\"\n      onClick={async () => {\n        try {\n          await navigator.clipboard?.writeText(command);\n        } catch (error) {\n          console.error(\"[SupportBundleCollection] copy failed\", error);\n        }\n      }}\n    >\n      Copy\n    </button>\n  </div>\n);\n\nexport const SupportBundleCollectionCard = ({\n  appSlug = \"APP_SLUG\",\n  showLinux = true,\n  showHelm = true,\n  onUploadClick,\n  primaryColor = \"#6366f1\"\n}: SupportBundleCollectionCardProps) => {\n  // Build available tabs based on props\n  const availableTabs = useMemo(() => {\n    const tabs: Platform[] = [];\n    if (showLinux) tabs.push(\"Linux\");\n    if (showHelm) tabs.push(\"Helm\");\n    return tabs;\n  }, [showLinux, showHelm]);\n\n  // Default to first available tab\n  const [activeTab, setActiveTab] = useState<Platform>(() => availableTabs[0] ?? \"Linux\");\n\n  // Get instructions with dynamic app slug\n  const instructionsByTab = useMemo(() => getInstructionsByTab(appSlug), [appSlug]);\n  const activeInstructions = instructionsByTab[activeTab];\n\n  // If no tabs available, don't render\n  if (availableTabs.length === 0) {\n    return null;\n  }\n\n  const showTabs = availableTabs.length > 1;\n\n  return (\n    <section className=\"rounded-3xl border border-gray-100 bg-white p-8 shadow-[0_18px_45px_rgba(17,24,39,0.08)]\">\n      <header className=\"flex flex-wrap items-center justify-between gap-4\">\n        <div>\n          <h2 className=\"text-xl font-semibold text-gray-900\">Support Bundle Collection</h2>\n          <p className=\"mt-1 text-sm text-gray-500\">\n            {showTabs\n              ? \"Choose your deployment method to view the recommended collection steps.\"\n              : \"Follow these steps to collect a support bundle.\"}\n          </p>\n        </div>\n        {onUploadClick && (\n          <button\n            type=\"button\"\n            onClick={onUploadClick}\n            className=\"inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:opacity-90\"\n            style={{ backgroundColor: primaryColor }}\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              className=\"h-4 w-4\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M12 16V3\" />\n              <path d=\"M8 7l4-4 4 4\" />\n              <path d=\"M5 21h14\" />\n            </svg>\n            Upload a support bundle\n          </button>\n        )}\n      </header>\n      <div className=\"mt-6 flex flex-col gap-6 lg:flex-row\">\n        {showTabs && (\n          <nav className=\"flex w-full flex-col gap-2 rounded-2xl border border-gray-200 bg-gray-50 p-4 lg:w-52\">\n            {availableTabs.map((tab) => {\n              const isActive = tab === activeTab;\n              return (\n                <button\n                  key={tab}\n                  type=\"button\"\n                  onClick={() => setActiveTab(tab)}\n                  className={`${tabButtonBase} ${\n                    isActive\n                      ? \"text-white shadow\"\n                      : \"text-gray-600 hover:bg-white\"\n                  }`}\n                  style={isActive ? { backgroundColor: primaryColor } : undefined}\n                >\n                  {tab}\n                </button>\n              );\n            })}\n          </nav>\n        )}\n        <article className=\"flex-1 rounded-2xl border border-gray-200 bg-white p-6 shadow-sm\">\n          <div className=\"space-y-5\">\n            <div>\n              <h3 className=\"text-lg font-semibold text-gray-900\">\n                {activeInstructions.title}\n              </h3>\n              <p className=\"mt-2 text-sm text-gray-600\">\n                {activeInstructions.description}\n              </p>\n            </div>\n            {activeInstructions.steps?.length ? (\n              <div className=\"space-y-6\">\n                {activeInstructions.steps.map((step) => (\n                  <div key={step.title} className=\"space-y-3\">\n                    <h4 className=\"text-sm font-semibold text-gray-900\">{step.title}</h4>\n                    <p className=\"text-sm text-gray-600\">{step.description}</p>\n                    {step.command ? <CommandBlock command={step.command} /> : null}\n                    {step.notes?.map((note, index) => (\n                      <p key={`${step.title}-note-${index}`} className=\"text-sm text-gray-600\">\n                        {note}\n                      </p>\n                    ))}\n                  </div>\n                ))}\n              </div>\n            ) : (\n              <>\n                {activeInstructions.cli ? (\n                  <div>\n                    <h4 className=\"text-sm font-semibold text-gray-900\">CLI based collection</h4>\n                    <p className=\"mt-2 text-sm text-gray-600\">\n                      To collect diagnostics about your environment, SSH onto a controller node and run the following command:\n                    </p>\n                    <CommandBlock command={activeInstructions.cli} />\n                  </div>\n                ) : null}\n                {activeInstructions.footer ? (\n                  <p className=\"text-xs text-gray-500 leading-relaxed\">\n                    {activeInstructions.footer}\n                  </p>\n                ) : null}\n              </>\n            )}\n          </div>\n        </article>\n      </div>\n    </section>\n  );\n};\n\nSupportBundleCollectionCard.displayName = \"SupportBundleCollectionCard\";\n"]}

package/dist/support-bundles-card.d.mts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SupportBundleSummary } from './actions/index.mjs';
+
+interface SupportBundlesCardProps {
+    totalCount: number;
+    bundles: SupportBundleSummary[];
+    /** Callback to download a bundle. Returns a signed URL. */
+    onDownload?: (bundleId: string) => Promise<string>;
+    /** Callback to delete a bundle. */
+    onDelete?: (bundleId: string) => Promise<void>;
+    /** Primary brand color. Defaults to "#6366f1". */
+    primaryColor?: string;
+}
+declare const SupportBundlesCard: {
+    ({ totalCount, bundles, onDownload, onDelete, primaryColor }: SupportBundlesCardProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { SupportBundlesCard };

package/dist/support-bundles-card.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SupportBundleSummary } from './actions/index.js';
+
+interface SupportBundlesCardProps {
+    totalCount: number;
+    bundles: SupportBundleSummary[];
+    /** Callback to download a bundle. Returns a signed URL. */
+    onDownload?: (bundleId: string) => Promise<string>;
+    /** Callback to delete a bundle. */
+    onDelete?: (bundleId: string) => Promise<void>;
+    /** Primary brand color. Defaults to "#6366f1". */
+    primaryColor?: string;
+}
+declare const SupportBundlesCard: {
+    ({ totalCount, bundles, onDownload, onDelete, primaryColor }: SupportBundlesCardProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { SupportBundlesCard };

package/dist/support-bundles-card.js

@@ -0,0 +1,308 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * Enterprise Portal Components
+ * This file is generated by tsup. Do not edit manually.
+ */
+
+var formatBytes = (bytes, decimals = 1) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};
+var DownloadIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    className,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3v14" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 13l4 4 4-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 21h14" })
+    ]
+  }
+);
+var TrashIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    className,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 6h18" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
+    ]
+  }
+);
+var CheckIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    className,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 12l2 2 4-4" })
+    ]
+  }
+);
+var PendingIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    className,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "4 2" })
+  }
+);
+var AlertTriangleIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    className,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+    ]
+  }
+);
+var SupportBundlesCard = ({
+  totalCount,
+  bundles,
+  onDownload,
+  onDelete,
+  primaryColor = "#6366f1"
+}) => {
+  const [downloadingId, setDownloadingId] = react.useState(null);
+  const [deletingId, setDeletingId] = react.useState(null);
+  const [bundleToDelete, setBundleToDelete] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const handleDownload = react.useCallback(async (bundleId) => {
+    if (!onDownload) return;
+    setError(null);
+    setDownloadingId(bundleId);
+    try {
+      const signedUrl = await onDownload(bundleId);
+      const link = document.createElement("a");
+      link.href = signedUrl;
+      link.setAttribute("download", "");
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to download bundle");
+    } finally {
+      setDownloadingId(null);
+    }
+  }, [onDownload]);
+  const handleDeleteClick = react.useCallback((bundle) => {
+    setBundleToDelete(bundle);
+  }, []);
+  const handleDeleteConfirm = react.useCallback(async () => {
+    if (!onDelete || !bundleToDelete) return;
+    setError(null);
+    setDeletingId(bundleToDelete.id);
+    try {
+      await onDelete(bundleToDelete.id);
+      setBundleToDelete(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete bundle");
+      setBundleToDelete(null);
+    } finally {
+      setDeletingId(null);
+    }
+  }, [onDelete, bundleToDelete]);
+  const handleDeleteCancel = react.useCallback(() => {
+    setBundleToDelete(null);
+  }, []);
+  const isActionDisabled = downloadingId !== null || deletingId !== null;
+  const renderIssues = (insights) => {
+    const errors = insights?.filter((i) => i.level === "error")?.length ?? 0;
+    const warnings = insights?.filter((i) => i.level === "warn")?.length ?? 0;
+    if (!errors && !warnings) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "No issues found" });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      errors > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-red-600", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "h-4 w-4" }),
+        errors,
+        " ",
+        errors === 1 ? "error" : "errors"
+      ] }),
+      warnings > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-yellow-600", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "h-4 w-4" }),
+        warnings,
+        " ",
+        warnings === 1 ? "warning" : "warnings"
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "rounded-3xl border border-gray-100 bg-white p-8 shadow-[0_18px_45px_rgba(17,24,39,0.08)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900", children: "Support Bundles" }),
+        totalCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500", children: [
+          totalCount,
+          " total"
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700", children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: bundles.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rounded-2xl border border-dashed border-gray-200 bg-gray-50 px-6 py-10 text-center text-sm text-gray-500", children: "No support bundles have been uploaded yet." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-xl border border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500", children: "Instance" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500", children: "Date Collected" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500", children: "Status" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500", children: "Issues" }),
+          /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500", children: "Size" }),
+          (onDownload || onDelete) && /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "relative px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Actions" }) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-gray-200 bg-white", children: bundles.map((bundle) => {
+          const isDownloading = downloadingId === bundle.id;
+          const isDeleting = deletingId === bundle.id;
+          const status = bundle.status ?? "uploaded";
+          const isUploaded = status === "uploaded";
+          return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "whitespace-nowrap px-4 py-3 text-sm text-gray-900", children: (bundle.instanceId || bundle.id).slice(0, 7) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "whitespace-nowrap px-4 py-3 text-sm text-gray-500", children: bundle.createdAt ? new Date(bundle.createdAt).toLocaleString() : "Unknown" }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "whitespace-nowrap px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: `inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium ${isUploaded ? "bg-green-50 text-green-700" : "bg-yellow-50 text-yellow-700"}`,
+                children: [
+                  isUploaded ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(PendingIcon, { className: "h-3 w-3" }),
+                  status.charAt(0).toUpperCase() + status.slice(1)
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "whitespace-nowrap px-4 py-3 text-sm", children: renderIssues(bundle.insights) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "whitespace-nowrap px-4 py-3 text-sm text-gray-500", children: bundle.size ? formatBytes(bundle.size) : "\u2014" }),
+            (onDownload || onDelete) && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "whitespace-nowrap px-4 py-3 text-right text-sm font-medium", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-3", children: [
+              onDownload && /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleDownload(bundle.id),
+                  disabled: isActionDisabled,
+                  className: "inline-flex items-center gap-1 text-gray-600 hover:text-gray-900 disabled:opacity-50",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, { className: "h-4 w-4" }),
+                    isDownloading ? "Downloading..." : "Download"
+                  ]
+                }
+              ),
+              onDelete && /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleDeleteClick(bundle),
+                  disabled: isActionDisabled,
+                  className: "inline-flex items-center gap-1 text-red-600 hover:text-red-700 disabled:opacity-50",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(TrashIcon, { className: "h-4 w-4" }),
+                    isDeleting ? "Deleting..." : "Delete"
+                  ]
+                }
+              )
+            ] }) })
+          ] }, bundle.id);
+        }) })
+      ] }) }) })
+    ] }),
+    bundleToDelete && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "delete-modal-title",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md rounded-2xl bg-white p-6 shadow-xl", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { id: "delete-modal-title", className: "text-lg font-semibold text-gray-900", children: "Confirm Deletion" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-gray-600", children: "Are you sure you want to delete this support bundle? This action cannot be undone." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 rounded-lg bg-gray-50 p-3 text-sm text-gray-700", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Instance ID:" }),
+              " ",
+              (bundleToDelete.instanceId || bundleToDelete.id).slice(0, 7)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Date Collected:" }),
+              " ",
+              bundleToDelete.createdAt ? new Date(bundleToDelete.createdAt).toLocaleString() : "Unknown"
+            ] }),
+            bundleToDelete.size && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Size:" }),
+              " ",
+              formatBytes(bundleToDelete.size)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Status:" }),
+              " ",
+              (bundleToDelete.status ?? "uploaded").charAt(0).toUpperCase() + (bundleToDelete.status ?? "uploaded").slice(1)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex justify-end gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleDeleteCancel,
+                disabled: deletingId !== null,
+                className: "rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-200 disabled:opacity-50",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleDeleteConfirm,
+                disabled: deletingId !== null,
+                className: "rounded-lg px-4 py-2 text-sm font-medium text-white transition hover:opacity-90 disabled:opacity-50",
+                style: { backgroundColor: primaryColor },
+                children: deletingId !== null ? "Deleting..." : "Delete"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+SupportBundlesCard.displayName = "SupportBundlesCard";
+
+exports.SupportBundlesCard = SupportBundlesCard;
+//# sourceMappingURL=support-bundles-card.js.map
+//# sourceMappingURL=support-bundles-card.js.map