@replicated/portal-components 0.0.2 → 0.0.3

package/dist/user-settings.js

@@ -0,0 +1,370 @@
+"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 NOTIFICATION_DESCRIPTIONS = {
+  "new-version": "New version available"
+};
+var EmailNotificationsSection = ({
+  teamName,
+  notifications,
+  isLoading,
+  onToggle
+}) => {
+  const allNotificationTypes = Object.keys(NOTIFICATION_DESCRIPTIONS);
+  const mergedNotifications = allNotificationTypes.map((type) => {
+    const existing = notifications.find((n) => n.type === type);
+    return {
+      type,
+      enabled: existing ? existing.enabled : type === "new-version"
+      // Default new-version to true
+    };
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-gray-200 bg-white p-6 shadow-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-lg font-semibold text-gray-900", children: [
+        "Email Notifications for ",
+        teamName
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Choose which email notifications you want to receive for this team." }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 flex justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Loading notifications..." }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-gray-200 bg-white p-6 shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-lg font-semibold text-gray-900", children: [
+      "Email Notifications for ",
+      teamName
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Choose which email notifications you want to receive for this team." }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 overflow-hidden rounded-lg border border-gray-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between bg-gray-50 px-4 py-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium uppercase text-gray-600", children: "Description" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium uppercase text-gray-600", children: "Enabled" })
+      ] }),
+      mergedNotifications.map((notification) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between border-t border-gray-200 px-4 py-3",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-900", children: NOTIFICATION_DESCRIPTIONS[notification.type] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: notification.enabled,
+                onChange: () => onToggle?.(notification.type, !notification.enabled),
+                className: "portal-checkbox"
+              }
+            )
+          ]
+        },
+        notification.type
+      ))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-3 text-xs text-gray-500", children: [
+      "These notification preferences are specific to the ",
+      teamName,
+      " team. Switch teams to manage notifications for other teams."
+    ] })
+  ] });
+};
+var TeamsSection = ({
+  teams,
+  currentCustomer,
+  isLoading,
+  onTeamSwitch,
+  primaryColor
+}) => {
+  const groupedTeams = react.useMemo(() => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const team of teams) {
+      const existing = groups.get(team.appId);
+      if (existing) {
+        existing.teams.push(team);
+      } else {
+        groups.set(team.appId, {
+          appName: team.appName,
+          teams: [team]
+        });
+      }
+    }
+    return groups;
+  }, [teams]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-gray-200 bg-white p-6 shadow-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Teams" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Teams associate your email address with any additional licenses your account has access to." }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Loading teams..." }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-gray-200 bg-white p-6 shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Teams" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Teams associate your email address with any additional licenses your account has access to." }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 space-y-6", children: Array.from(groupedTeams.values()).map((appGroup) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-medium text-gray-900", children: appGroup.appName }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: appGroup.teams.map((team) => {
+        const isCurrentTeam = currentCustomer?.id === team.id;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => !isCurrentTeam && onTeamSwitch?.(team),
+            disabled: isCurrentTeam,
+            className: `flex w-full items-center justify-between rounded-lg border p-4 text-left transition ${isCurrentTeam ? "cursor-default border-gray-300 bg-gray-50" : "cursor-pointer border-gray-200 hover:border-indigo-500"}`,
+            style: !isCurrentTeam && primaryColor ? { "--hover-border": primaryColor } : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    className: "h-4 w-4",
+                    style: { color: primaryColor || "#6366f1" },
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900", children: team.name }),
+                  isCurrentTeam && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500", children: "Current Team" })
+                ] })
+              ] }),
+              !isCurrentTeam && /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  className: "h-4 w-4",
+                  style: { color: primaryColor || "#6366f1" },
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      d: "M9 5l7 7-7 7"
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          team.id
+        );
+      }) })
+    ] }, appGroup.appName)) })
+  ] });
+};
+var ProfileSection = ({
+  user,
+  isLoading,
+  isUpdating,
+  error,
+  updateError,
+  onSave,
+  primaryColor
+}) => {
+  const [isEditing, setIsEditing] = react.useState(false);
+  const [firstName, setFirstName] = react.useState(user?.firstName || "");
+  const [lastName, setLastName] = react.useState(user?.lastName || "");
+  const [inputError, setInputError] = react.useState(null);
+  const resetForm = () => {
+    setFirstName(user?.firstName || "");
+    setLastName(user?.lastName || "");
+    setInputError(null);
+  };
+  const handleSave = async () => {
+    if (!firstName && !lastName) {
+      setInputError("Please enter a first name or last name");
+      return;
+    }
+    if (firstName === user?.firstName && lastName === user?.lastName) {
+      setIsEditing(false);
+      return;
+    }
+    try {
+      await onSave?.({ firstName, lastName });
+      setIsEditing(false);
+    } catch (err) {
+      console.error("Error updating user information:", err);
+    }
+  };
+  const handleCancel = () => {
+    setIsEditing(false);
+    resetForm();
+  };
+  const handleEdit = () => {
+    resetForm();
+    setIsEditing(true);
+  };
+  const buttonStyle = primaryColor ? { backgroundColor: primaryColor, borderColor: primaryColor } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-gray-200 bg-white p-6 shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900", children: "Profile Information" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Your account information." }),
+        (error || updateError) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-red-600", children: error?.message || updateError?.message || "Failed to update profile" }),
+        inputError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-red-600", children: inputError })
+      ] }),
+      isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleCancel,
+            disabled: isUpdating,
+            className: "inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-50 disabled:opacity-50",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleSave,
+            disabled: isUpdating,
+            style: buttonStyle,
+            className: "inline-flex items-center rounded-md bg-indigo-500 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-indigo-600 disabled:opacity-50",
+            children: isUpdating ? "Saving..." : "Save"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleEdit,
+          style: buttonStyle,
+          className: "inline-flex items-center rounded-md bg-indigo-500 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-indigo-600",
+          children: "Edit"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex gap-8", children: [
+      isEditing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-600", children: "First Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: firstName,
+              onChange: (e) => {
+                setInputError(null);
+                setFirstName(e.target.value);
+              },
+              disabled: isUpdating,
+              placeholder: "First Name",
+              className: "portal-input mt-1 block w-48"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-600", children: "Last Name" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: lastName,
+              onChange: (e) => {
+                setInputError(null);
+                setLastName(e.target.value);
+              },
+              disabled: isUpdating,
+              placeholder: "Last Name",
+              className: "portal-input mt-1 block w-48"
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-600", children: "Full Name (optional)" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-900", children: user?.firstName || user?.lastName ? `${user.firstName || ""} ${user.lastName || ""}`.trim() : "\u2014" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-600", children: "Email" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: isLoading ? "Loading..." : user?.emailAddress || "" })
+      ] })
+    ] })
+  ] });
+};
+var UserSettings = ({
+  user,
+  isUserLoading = false,
+  userError,
+  isUpdating = false,
+  updateError,
+  onUpdateUser,
+  teams = [],
+  currentCustomer,
+  isTeamsLoading = false,
+  onTeamSwitch,
+  notifications = [],
+  isNotificationsLoading = false,
+  onToggleNotification,
+  primaryColor
+}) => {
+  if (userError) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-red-600", children: [
+      "Failed to load user settings. ",
+      userError?.message,
+      " Please try again later."
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("header", { children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-semibold text-gray-900", children: "User Settings" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ProfileSection,
+        {
+          user,
+          isLoading: isUserLoading,
+          isUpdating,
+          error: userError,
+          updateError,
+          onSave: onUpdateUser,
+          primaryColor
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TeamsSection,
+        {
+          teams,
+          currentCustomer,
+          isLoading: isTeamsLoading,
+          onTeamSwitch,
+          primaryColor
+        }
+      ),
+      currentCustomer && /* @__PURE__ */ jsxRuntime.jsx(
+        EmailNotificationsSection,
+        {
+          teamName: currentCustomer.name,
+          notifications,
+          isLoading: isNotificationsLoading,
+          onToggle: onToggleNotification
+        }
+      )
+    ] })
+  ] });
+};
+UserSettings.displayName = "UserSettings";
+
+exports.UserSettings = UserSettings;
+//# sourceMappingURL=user-settings.js.map
+//# sourceMappingURL=user-settings.js.map

package/dist/user-settings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/user-settings.tsx"],"names":["jsxs","jsx","useMemo","useState"],"mappings":";;;;;;;;;;AA8DA,IAAM,yBAAA,GAAoD;AAAA,EACxD,aAAA,EAAe;AACjB,CAAA;AAaA,IAAM,4BAA4B,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAAsC;AAEpC,EAAA,MAAM,oBAAA,GAAuB,MAAA,CAAO,IAAA,CAAK,yBAAyB,CAAA;AAClE,EAAA,MAAM,mBAAA,GAAsB,oBAAA,CAAqB,GAAA,CAAI,CAAC,IAAA,KAAS;AAC7D,IAAA,MAAM,WAAW,aAAA,CAAc,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,SAAS,IAAI,CAAA;AAC1D,IAAA,OAAO;AAAA,MACL,IAAA;AAAA,MACA,OAAA,EAAS,QAAA,GAAW,QAAA,CAAS,OAAA,GAAU,IAAA,KAAS;AAAA;AAAA,KAClD;AAAA,EACF,CAAC,CAAA;AAED,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2DAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,IAAA,EAAA,EAAG,WAAU,qCAAA,EAAsC,QAAA,EAAA;AAAA,QAAA,0BAAA;AAAA,QACzB;AAAA,OAAA,EAC3B,CAAA;AAAA,sBACAC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4BAAA,EAA6B,QAAA,EAAA,qEAAA,EAE1C,CAAA;AAAA,sBACAA,cAAA,CAAC,SAAI,SAAA,EAAU,+BAAA,EACb,yCAAC,GAAA,EAAA,EAAE,SAAA,EAAU,uBAAA,EAAwB,QAAA,EAAA,0BAAA,EAAwB,CAAA,EAC/D;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACED,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2DAAA,EACb,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,IAAA,EAAA,EAAG,WAAU,qCAAA,EAAsC,QAAA,EAAA;AAAA,MAAA,0BAAA;AAAA,MACzB;AAAA,KAAA,EAC3B,CAAA;AAAA,oBACAC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4BAAA,EAA6B,QAAA,EAAA,qEAAA,EAE1C,CAAA;AAAA,oBAEAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wDAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wDAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6CAAA,EAA8C,QAAA,EAAA,aAAA,EAE9D,CAAA;AAAA,wBACAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6CAAA,EAA8C,QAAA,EAAA,SAAA,EAE9D;AAAA,OAAA,EACF,CAAA;AAAA,MACC,mBAAA,CAAoB,GAAA,CAAI,CAAC,YAAA,qBACxBD,eAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAU,sEAAA;AAAA,UAEV,QAAA,EAAA;AAAA,4BAAAC,cAAA,CAAC,UAAK,SAAA,EAAU,uBAAA,EACb,QAAA,EAAA,yBAAA,CAA0B,YAAA,CAAa,IAAI,CAAA,EAC9C,CAAA;AAAA,4BACAA,cAAA;AAAA,cAAC,OAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,UAAA;AAAA,gBACL,SAAS,YAAA,CAAa,OAAA;AAAA,gBACtB,UAAU,MAAM,QAAA,GAAW,aAAa,IAAA,EAAM,CAAC,aAAa,OAAO,CAAA;AAAA,gBACnE,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA,SAAA;AAAA,QAXK,YAAA,CAAa;AAAA,OAarB;AAAA,KAAA,EACH,CAAA;AAAA,oBACAD,eAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4BAAA,EAA6B,QAAA,EAAA;AAAA,MAAA,qDAAA;AAAA,MACY,QAAA;AAAA,MAAS;AAAA,KAAA,EAE/D;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;AAcA,IAAM,eAAe,CAAC;AAAA,EACpB,KAAA;AAAA,EACA,eAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,KAAyB;AAEvB,EAAA,MAAM,YAAA,GAAeE,cAAQ,MAAM;AACjC,IAAA,MAAM,MAAA,uBAAa,GAAA,EAA4D;AAE/E,IAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,MAAA,MAAM,QAAA,GAAW,MAAA,CAAO,GAAA,CAAI,IAAA,CAAK,KAAK,CAAA;AACtC,MAAA,IAAI,QAAA,EAAU;AACZ,QAAA,QAAA,CAAS,KAAA,CAAM,KAAK,IAAI,CAAA;AAAA,MAC1B,CAAA,MAAO;AACL,QAAA,MAAA,CAAO,GAAA,CAAI,KAAK,KAAA,EAAO;AAAA,UACrB,SAAS,IAAA,CAAK,OAAA;AAAA,UACd,KAAA,EAAO,CAAC,IAAI;AAAA,SACb,CAAA;AAAA,MACH;AAAA,IACF;AAEA,IAAA,OAAO,MAAA;AAAA,EACT,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,uBACEF,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2DAAA,EACb,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qCAAA,EAAsC,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,sBACzDA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4BAAA,EAA6B,QAAA,EAAA,6FAAA,EAG1C,CAAA;AAAA,sBACAA,cAAA,CAAC,SAAI,SAAA,EAAU,MAAA,EACb,yCAAC,GAAA,EAAA,EAAE,SAAA,EAAU,uBAAA,EAAwB,QAAA,EAAA,kBAAA,EAAgB,CAAA,EACvD;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACED,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2DAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qCAAA,EAAsC,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,oBACzDA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4BAAA,EAA6B,QAAA,EAAA,6FAAA,EAG1C,CAAA;AAAA,mCAEC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACZ,QAAA,EAAA,KAAA,CAAM,KAAK,YAAA,CAAa,MAAA,EAAQ,CAAA,CAAE,IAAI,CAAC,QAAA,qBACtCD,eAAA,CAAC,KAAA,EAAA,EAA2B,WAAU,WAAA,EACpC,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qCAAA,EACX,QAAA,EAAA,QAAA,CAAS,OAAA,EACZ,CAAA;AAAA,sBACAA,cAAA,CAAC,SAAI,SAAA,EAAU,WAAA,EACZ,mBAAS,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AAC5B,QAAA,MAAM,aAAA,GAAgB,eAAA,EAAiB,EAAA,KAAO,IAAA,CAAK,EAAA;AACnD,QAAA,uBACED,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAM,CAAC,aAAA,IAAiB,eAAe,IAAI,CAAA;AAAA,YACpD,QAAA,EAAU,aAAA;AAAA,YACV,SAAA,EAAW,CAAA,oFAAA,EACT,aAAA,GACI,2CAAA,GACA,wDACN,CAAA,CAAA;AAAA,YACA,OACE,CAAC,aAAA,IAAiB,eACd,EAAE,gBAAA,EAAkB,cAAa,GACjC,MAAA;AAAA,YAGN,QAAA,EAAA;AAAA,8BAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,gCAAAC,cAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAU,SAAA;AAAA,oBACV,KAAA,EAAO,EAAE,KAAA,EAAO,YAAA,IAAgB,SAAA,EAAU;AAAA,oBAC1C,IAAA,EAAK,MAAA;AAAA,oBACL,OAAA,EAAQ,WAAA;AAAA,oBACR,MAAA,EAAO,cAAA;AAAA,oBACP,WAAA,EAAa,CAAA;AAAA,oBAEb,QAAA,kBAAAA,cAAA;AAAA,sBAAC,MAAA;AAAA,sBAAA;AAAA,wBACC,aAAA,EAAc,OAAA;AAAA,wBACd,cAAA,EAAe,OAAA;AAAA,wBACf,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA,iBACF;AAAA,gDACC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,kCAAAA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,mCAAA,EACV,QAAA,EAAA,IAAA,CAAK,IAAA,EACR,CAAA;AAAA,kBACC,aAAA,oBACCA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,yBAAwB,QAAA,EAAA,cAAA,EAAY;AAAA,iBAAA,EAErD;AAAA,eAAA,EACF,CAAA;AAAA,cACC,CAAC,aAAA,oBACAA,cAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,SAAA;AAAA,kBACV,KAAA,EAAO,EAAE,KAAA,EAAO,YAAA,IAAgB,SAAA,EAAU;AAAA,kBAC1C,IAAA,EAAK,MAAA;AAAA,kBACL,OAAA,EAAQ,WAAA;AAAA,kBACR,MAAA,EAAO,cAAA;AAAA,kBACP,WAAA,EAAa,CAAA;AAAA,kBAEb,QAAA,kBAAAA,cAAA;AAAA,oBAAC,MAAA;AAAA,oBAAA;AAAA,sBACC,aAAA,EAAc,OAAA;AAAA,sBACd,cAAA,EAAe,OAAA;AAAA,sBACf,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA;AACF;AAAA,WAAA;AAAA,UArDG,IAAA,CAAK;AAAA,SAuDZ;AAAA,MAEJ,CAAC,CAAA,EACH;AAAA,KAAA,EAAA,EAnEQ,QAAA,CAAS,OAoEnB,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;AAgBA,IAAM,iBAAiB,CAAC;AAAA,EACtB,IAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIE,eAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,IAAIA,cAAA,CAAS,IAAA,EAAM,aAAa,EAAE,CAAA;AAChE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,IAAIA,cAAA,CAAS,IAAA,EAAM,YAAY,EAAE,CAAA;AAC7D,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAwB,IAAI,CAAA;AAGhE,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,YAAA,CAAa,IAAA,EAAM,aAAa,EAAE,CAAA;AAClC,IAAA,WAAA,CAAY,IAAA,EAAM,YAAY,EAAE,CAAA;AAChC,IAAA,aAAA,CAAc,IAAI,CAAA;AAAA,EACpB,CAAA;AAEA,EAAA,MAAM,aAAa,YAAY;AAC7B,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,QAAA,EAAU;AAC3B,MAAA,aAAA,CAAc,wCAAwC,CAAA;AACtD,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,SAAA,KAAc,IAAA,EAAM,SAAA,IAAa,QAAA,KAAa,MAAM,QAAA,EAAU;AAChE,MAAA,YAAA,CAAa,KAAK,CAAA;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,IAAI;AACF,MAAA,MAAM,MAAA,GAAS,EAAE,SAAA,EAAW,QAAA,EAAU,CAAA;AACtC,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,IACpB,SAAS,GAAA,EAAK;AACZ,MAAA,OAAA,CAAQ,KAAA,CAAM,oCAAoC,GAAG,CAAA;AAAA,IACvD;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAA,SAAA,EAAU;AAAA,EACZ,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,SAAA,EAAU;AACV,IAAA,YAAA,CAAa,IAAI,CAAA;AAAA,EACnB,CAAA;AAEA,EAAA,MAAM,cAAc,YAAA,GAChB,EAAE,iBAAiB,YAAA,EAAc,WAAA,EAAa,cAAa,GAC3D,MAAA;AAEJ,EAAA,uBACEH,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2DAAA,EACb,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wCAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qCAAA,EAAsC,QAAA,EAAA,qBAAA,EAEpD,CAAA;AAAA,wBACAA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4BAAA,EAA6B,QAAA,EAAA,2BAAA,EAAyB,CAAA;AAAA,QAAA,CACjE,KAAA,IAAS,WAAA,qBACTA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,6BACV,QAAA,EAAA,KAAA,EAAO,OAAA,IAAW,WAAA,EAAa,OAAA,IAAW,0BAAA,EAC7C,CAAA;AAAA,QAED,UAAA,oBACCA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,6BAA6B,QAAA,EAAA,UAAA,EAAW;AAAA,OAAA,EAEzD,CAAA;AAAA,MACC,SAAA,mBACCD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,YAAA;AAAA,YACT,QAAA,EAAU,UAAA;AAAA,YACV,SAAA,EAAU,6KAAA;AAAA,YACX,QAAA,EAAA;AAAA;AAAA,SAED;AAAA,wBACAA,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,UAAA;AAAA,YACT,QAAA,EAAU,UAAA;AAAA,YACV,KAAA,EAAO,WAAA;AAAA,YACP,SAAA,EAAU,2JAAA;AAAA,YAET,uBAAa,WAAA,GAAc;AAAA;AAAA;AAC9B,OAAA,EACF,CAAA,mBAEAA,cAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,OAAA,EAAS,UAAA;AAAA,UACT,KAAA,EAAO,WAAA;AAAA,UACP,SAAA,EAAU,uIAAA;AAAA,UACX,QAAA,EAAA;AAAA;AAAA;AAED,KAAA,EAEJ,CAAA;AAAA,oBAEAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iBAAA,EACZ,QAAA,EAAA;AAAA,MAAA,SAAA,mBACCA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAA,EACb,QAAA,EAAA;AAAA,wBAAAA,eAAA,CAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,yCAAA,EAA0C,QAAA,EAAA,YAAA,EAE3D,CAAA;AAAA,0BACAA,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,MAAA;AAAA,cACL,KAAA,EAAO,SAAA;AAAA,cACP,QAAA,EAAU,CAAC,CAAA,KAAM;AACf,gBAAA,aAAA,CAAc,IAAI,CAAA;AAClB,gBAAA,YAAA,CAAa,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,cAC7B,CAAA;AAAA,cACA,QAAA,EAAU,UAAA;AAAA,cACV,WAAA,EAAY,YAAA;AAAA,cACZ,SAAA,EAAU;AAAA;AAAA;AACZ,SAAA,EACF,CAAA;AAAA,wCACC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAAA,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,yCAAA,EAA0C,QAAA,EAAA,WAAA,EAE3D,CAAA;AAAA,0BACAA,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,MAAA;AAAA,cACL,KAAA,EAAO,QAAA;AAAA,cACP,QAAA,EAAU,CAAC,CAAA,KAAM;AACf,gBAAA,aAAA,CAAc,IAAI,CAAA;AAClB,gBAAA,WAAA,CAAY,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,cAC5B,CAAA;AAAA,cACA,QAAA,EAAU,UAAA;AAAA,cACV,WAAA,EAAY,WAAA;AAAA,cACZ,SAAA,EAAU;AAAA;AAAA;AACZ,SAAA,EACF;AAAA,OAAA,EACF,CAAA,mBAEAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,QAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,yCAAA,EAA0C,QAAA,EAAA,sBAAA,EAE3D,CAAA;AAAA,uCACC,GAAA,EAAA,EAAE,SAAA,EAAU,8BACV,QAAA,EAAA,IAAA,EAAM,SAAA,IAAa,MAAM,QAAA,GACtB,CAAA,EAAG,KAAK,SAAA,IAAa,EAAE,IAAI,IAAA,CAAK,QAAA,IAAY,EAAE,CAAA,CAAA,CAAG,IAAA,KACjD,QAAA,EACN;AAAA,OAAA,EACF,CAAA;AAAA,sBAEFD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,QAAA,EACb,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAU,yCAAA,EAA0C,QAAA,EAAA,OAAA,EAAK,CAAA;AAAA,wBAChEA,cAAA,CAAC,OAAE,SAAA,EAAU,4BAAA,EACV,sBAAY,YAAA,GAAe,IAAA,EAAM,gBAAgB,EAAA,EACpD;AAAA,OAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;AAMO,IAAM,eAAe,CAAC;AAAA,EAC3B,IAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,SAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,WAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAQ,EAAC;AAAA,EACT,eAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,YAAA;AAAA,EACA,gBAAgB,EAAC;AAAA,EACjB,sBAAA,GAAyB,KAAA;AAAA,EACzB,oBAAA;AAAA,EACA;AACF,CAAA,KAAyB;AACvB,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAU,OACb,QAAA,kBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,cAAA,EAAe,QAAA,EAAA;AAAA,MAAA,gCAAA;AAAA,MACG,SAAA,EAAW,OAAA;AAAA,MAAQ;AAAA,KAAA,EACpD,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,YACC,QAAA,kBAAAA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,sCAAA,EAAuC,2BAAa,CAAA,EACpE,CAAA;AAAA,oBAEAD,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,WAAA,EACb,QAAA,EAAA;AAAA,sBAAAC,cAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,SAAA,EAAW,aAAA;AAAA,UACX,UAAA;AAAA,UACA,KAAA,EAAO,SAAA;AAAA,UACP,WAAA;AAAA,UACA,MAAA,EAAQ,YAAA;AAAA,UACR;AAAA;AAAA,OACF;AAAA,sBAEAA,cAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,KAAA;AAAA,UACA,eAAA;AAAA,UACA,SAAA,EAAW,cAAA;AAAA,UACX,YAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA,MAEC,eAAA,oBACCA,cAAA;AAAA,QAAC,yBAAA;AAAA,QAAA;AAAA,UACC,UAAU,eAAA,CAAgB,IAAA;AAAA,UAC1B,aAAA;AAAA,UACA,SAAA,EAAW,sBAAA;AAAA,UACX,QAAA,EAAU;AAAA;AAAA;AACZ,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"user-settings.js","sourcesContent":["\"use client\";\n\nimport { useState, useMemo } from \"react\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface UserSettingsUser {\n  emailAddress: string;\n  firstName?: string;\n  lastName?: string;\n}\n\nexport interface UserSettingsTeam {\n  id: string;\n  name: string;\n  appId: string;\n  appName: string;\n  appSlug: string;\n}\n\nexport interface UserSettingsCustomer {\n  id: string;\n  name: string;\n}\n\nexport interface UserSettingsNotification {\n  type: string;\n  enabled: boolean;\n}\n\nexport interface UserSettingsProps {\n  // User profile\n  user?: UserSettingsUser;\n  isUserLoading?: boolean;\n  userError?: Error | null;\n  \n  // Profile editing\n  isUpdating?: boolean;\n  updateError?: Error | null;\n  onUpdateUser?: (data: { firstName?: string; lastName?: string }) => Promise<void>;\n  \n  // Teams\n  teams?: UserSettingsTeam[];\n  currentCustomer?: UserSettingsCustomer;\n  isTeamsLoading?: boolean;\n  onTeamSwitch?: (team: UserSettingsTeam) => Promise<void>;\n  \n  // Notifications\n  notifications?: UserSettingsNotification[];\n  isNotificationsLoading?: boolean;\n  onToggleNotification?: (notificationType: string, enabled: boolean) => Promise<void>;\n  \n  // Optional branding\n  primaryColor?: string;\n}\n\n// =============================================================================\n// Notification descriptions\n// =============================================================================\n\nconst NOTIFICATION_DESCRIPTIONS: Record<string, string> = {\n  \"new-version\": \"New version available\",\n};\n\n// =============================================================================\n// Email Notifications Section\n// =============================================================================\n\ninterface EmailNotificationsSectionProps {\n  teamName: string;\n  notifications: UserSettingsNotification[];\n  isLoading: boolean;\n  onToggle?: (type: string, enabled: boolean) => Promise<void>;\n}\n\nconst EmailNotificationsSection = ({\n  teamName,\n  notifications,\n  isLoading,\n  onToggle,\n}: EmailNotificationsSectionProps) => {\n  // Merge API data with all notification types to ensure all options are always shown\n  const allNotificationTypes = Object.keys(NOTIFICATION_DESCRIPTIONS);\n  const mergedNotifications = allNotificationTypes.map((type) => {\n    const existing = notifications.find((n) => n.type === type);\n    return {\n      type,\n      enabled: existing ? existing.enabled : type === \"new-version\", // Default new-version to true\n    };\n  });\n\n  if (isLoading) {\n    return (\n      <div className=\"rounded-2xl border border-gray-200 bg-white p-6 shadow-sm\">\n        <h2 className=\"text-lg font-semibold text-gray-900\">\n          Email Notifications for {teamName}\n        </h2>\n        <p className=\"mt-1 text-sm text-gray-500\">\n          Choose which email notifications you want to receive for this team.\n        </p>\n        <div className=\"mt-6 flex justify-center py-8\">\n          <p className=\"text-sm text-gray-500\">Loading notifications...</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"rounded-2xl border border-gray-200 bg-white p-6 shadow-sm\">\n      <h2 className=\"text-lg font-semibold text-gray-900\">\n        Email Notifications for {teamName}\n      </h2>\n      <p className=\"mt-1 text-sm text-gray-500\">\n        Choose which email notifications you want to receive for this team.\n      </p>\n\n      <div className=\"mt-6 overflow-hidden rounded-lg border border-gray-200\">\n        <div className=\"flex items-center justify-between bg-gray-50 px-4 py-2\">\n          <span className=\"text-xs font-medium uppercase text-gray-600\">\n            Description\n          </span>\n          <span className=\"text-xs font-medium uppercase text-gray-600\">\n            Enabled\n          </span>\n        </div>\n        {mergedNotifications.map((notification) => (\n          <div\n            key={notification.type}\n            className=\"flex items-center justify-between border-t border-gray-200 px-4 py-3\"\n          >\n            <span className=\"text-sm text-gray-900\">\n              {NOTIFICATION_DESCRIPTIONS[notification.type]}\n            </span>\n            <input\n              type=\"checkbox\"\n              checked={notification.enabled}\n              onChange={() => onToggle?.(notification.type, !notification.enabled)}\n              className=\"portal-checkbox\"\n            />\n          </div>\n        ))}\n      </div>\n      <p className=\"mt-3 text-xs text-gray-500\">\n        These notification preferences are specific to the {teamName} team.\n        Switch teams to manage notifications for other teams.\n      </p>\n    </div>\n  );\n};\n\n// =============================================================================\n// Teams Section\n// =============================================================================\n\ninterface TeamsSectionProps {\n  teams: UserSettingsTeam[];\n  currentCustomer?: UserSettingsCustomer;\n  isLoading: boolean;\n  onTeamSwitch?: (team: UserSettingsTeam) => Promise<void>;\n  primaryColor?: string;\n}\n\nconst TeamsSection = ({\n  teams,\n  currentCustomer,\n  isLoading,\n  onTeamSwitch,\n  primaryColor,\n}: TeamsSectionProps) => {\n  // Group teams by app\n  const groupedTeams = useMemo(() => {\n    const groups = new Map<string, { appName: string; teams: UserSettingsTeam[] }>();\n    \n    for (const team of teams) {\n      const existing = groups.get(team.appId);\n      if (existing) {\n        existing.teams.push(team);\n      } else {\n        groups.set(team.appId, {\n          appName: team.appName,\n          teams: [team],\n        });\n      }\n    }\n    \n    return groups;\n  }, [teams]);\n\n  if (isLoading) {\n    return (\n      <div className=\"rounded-2xl border border-gray-200 bg-white p-6 shadow-sm\">\n        <h2 className=\"text-lg font-semibold text-gray-900\">Teams</h2>\n        <p className=\"mt-1 text-sm text-gray-500\">\n          Teams associate your email address with any additional licenses your\n          account has access to.\n        </p>\n        <div className=\"mt-6\">\n          <p className=\"text-sm text-gray-500\">Loading teams...</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"rounded-2xl border border-gray-200 bg-white p-6 shadow-sm\">\n      <h2 className=\"text-lg font-semibold text-gray-900\">Teams</h2>\n      <p className=\"mt-1 text-sm text-gray-500\">\n        Teams associate your email address with any additional licenses your\n        account has access to.\n      </p>\n\n      <div className=\"mt-6 space-y-6\">\n        {Array.from(groupedTeams.values()).map((appGroup) => (\n          <div key={appGroup.appName} className=\"space-y-3\">\n            <h3 className=\"text-base font-medium text-gray-900\">\n              {appGroup.appName}\n            </h3>\n            <div className=\"space-y-2\">\n              {appGroup.teams.map((team) => {\n                const isCurrentTeam = currentCustomer?.id === team.id;\n                return (\n                  <button\n                    key={team.id}\n                    type=\"button\"\n                    onClick={() => !isCurrentTeam && onTeamSwitch?.(team)}\n                    disabled={isCurrentTeam}\n                    className={`flex w-full items-center justify-between rounded-lg border p-4 text-left transition ${\n                      isCurrentTeam\n                        ? \"cursor-default border-gray-300 bg-gray-50\"\n                        : \"cursor-pointer border-gray-200 hover:border-indigo-500\"\n                    }`}\n                    style={\n                      !isCurrentTeam && primaryColor\n                        ? { \"--hover-border\": primaryColor } as React.CSSProperties\n                        : undefined\n                    }\n                  >\n                    <div className=\"flex items-center gap-3\">\n                      <svg\n                        className=\"h-4 w-4\"\n                        style={{ color: primaryColor || \"#6366f1\" }}\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                        strokeWidth={2}\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\"\n                        />\n                      </svg>\n                      <div>\n                        <p className=\"text-sm font-medium text-gray-900\">\n                          {team.name}\n                        </p>\n                        {isCurrentTeam && (\n                          <p className=\"text-xs text-gray-500\">Current Team</p>\n                        )}\n                      </div>\n                    </div>\n                    {!isCurrentTeam && (\n                      <svg\n                        className=\"h-4 w-4\"\n                        style={{ color: primaryColor || \"#6366f1\" }}\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                        strokeWidth={2}\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          d=\"M9 5l7 7-7 7\"\n                        />\n                      </svg>\n                    )}\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\n// =============================================================================\n// Profile Section\n// =============================================================================\n\ninterface ProfileSectionProps {\n  user?: UserSettingsUser;\n  isLoading: boolean;\n  isUpdating: boolean;\n  error?: Error | null;\n  updateError?: Error | null;\n  onSave?: (data: { firstName?: string; lastName?: string }) => Promise<void>;\n  primaryColor?: string;\n}\n\nconst ProfileSection = ({\n  user,\n  isLoading,\n  isUpdating,\n  error,\n  updateError,\n  onSave,\n  primaryColor,\n}: ProfileSectionProps) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const [firstName, setFirstName] = useState(user?.firstName || \"\");\n  const [lastName, setLastName] = useState(user?.lastName || \"\");\n  const [inputError, setInputError] = useState<string | null>(null);\n\n  // Reset form when user changes\n  const resetForm = () => {\n    setFirstName(user?.firstName || \"\");\n    setLastName(user?.lastName || \"\");\n    setInputError(null);\n  };\n\n  const handleSave = async () => {\n    if (!firstName && !lastName) {\n      setInputError(\"Please enter a first name or last name\");\n      return;\n    }\n\n    if (firstName === user?.firstName && lastName === user?.lastName) {\n      setIsEditing(false);\n      return;\n    }\n\n    try {\n      await onSave?.({ firstName, lastName });\n      setIsEditing(false);\n    } catch (err) {\n      console.error(\"Error updating user information:\", err);\n    }\n  };\n\n  const handleCancel = () => {\n    setIsEditing(false);\n    resetForm();\n  };\n\n  const handleEdit = () => {\n    resetForm();\n    setIsEditing(true);\n  };\n\n  const buttonStyle = primaryColor\n    ? { backgroundColor: primaryColor, borderColor: primaryColor }\n    : undefined;\n\n  return (\n    <div className=\"rounded-2xl border border-gray-200 bg-white p-6 shadow-sm\">\n      <div className=\"flex items-start justify-between gap-4\">\n        <div>\n          <h2 className=\"text-lg font-semibold text-gray-900\">\n            Profile Information\n          </h2>\n          <p className=\"mt-1 text-sm text-gray-500\">Your account information.</p>\n          {(error || updateError) && (\n            <p className=\"mt-2 text-sm text-red-600\">\n              {error?.message || updateError?.message || \"Failed to update profile\"}\n            </p>\n          )}\n          {inputError && (\n            <p className=\"mt-2 text-sm text-red-600\">{inputError}</p>\n          )}\n        </div>\n        {isEditing ? (\n          <div className=\"flex gap-2\">\n            <button\n              type=\"button\"\n              onClick={handleCancel}\n              disabled={isUpdating}\n              className=\"inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-50 disabled:opacity-50\"\n            >\n              Cancel\n            </button>\n            <button\n              type=\"button\"\n              onClick={handleSave}\n              disabled={isUpdating}\n              style={buttonStyle}\n              className=\"inline-flex items-center rounded-md bg-indigo-500 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-indigo-600 disabled:opacity-50\"\n            >\n              {isUpdating ? \"Saving...\" : \"Save\"}\n            </button>\n          </div>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={handleEdit}\n            style={buttonStyle}\n            className=\"inline-flex items-center rounded-md bg-indigo-500 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-indigo-600\"\n          >\n            Edit\n          </button>\n        )}\n      </div>\n\n      <div className=\"mt-6 flex gap-8\">\n        {isEditing ? (\n          <div className=\"flex gap-4\">\n            <div>\n              <label className=\"block text-sm font-medium text-gray-600\">\n                First Name\n              </label>\n              <input\n                type=\"text\"\n                value={firstName}\n                onChange={(e) => {\n                  setInputError(null);\n                  setFirstName(e.target.value);\n                }}\n                disabled={isUpdating}\n                placeholder=\"First Name\"\n                className=\"portal-input mt-1 block w-48\"\n              />\n            </div>\n            <div>\n              <label className=\"block text-sm font-medium text-gray-600\">\n                Last Name\n              </label>\n              <input\n                type=\"text\"\n                value={lastName}\n                onChange={(e) => {\n                  setInputError(null);\n                  setLastName(e.target.value);\n                }}\n                disabled={isUpdating}\n                placeholder=\"Last Name\"\n                className=\"portal-input mt-1 block w-48\"\n              />\n            </div>\n          </div>\n        ) : (\n          <div className=\"flex-1\">\n            <label className=\"block text-sm font-medium text-gray-600\">\n              Full Name (optional)\n            </label>\n            <p className=\"mt-1 text-sm text-gray-900\">\n              {user?.firstName || user?.lastName\n                ? `${user.firstName || \"\"} ${user.lastName || \"\"}`.trim()\n                : \"—\"}\n            </p>\n          </div>\n        )}\n        <div className=\"flex-1\">\n          <label className=\"block text-sm font-medium text-gray-600\">Email</label>\n          <p className=\"mt-1 text-sm text-gray-500\">\n            {isLoading ? \"Loading...\" : user?.emailAddress || \"\"}\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// =============================================================================\n// Main Component\n// =============================================================================\n\nexport const UserSettings = ({\n  user,\n  isUserLoading = false,\n  userError,\n  isUpdating = false,\n  updateError,\n  onUpdateUser,\n  teams = [],\n  currentCustomer,\n  isTeamsLoading = false,\n  onTeamSwitch,\n  notifications = [],\n  isNotificationsLoading = false,\n  onToggleNotification,\n  primaryColor,\n}: UserSettingsProps) => {\n  if (userError) {\n    return (\n      <div className=\"p-8\">\n        <div className=\"text-red-600\">\n          Failed to load user settings. {userError?.message} Please try again later.\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"w-full space-y-6\">\n      <header>\n        <h1 className=\"text-2xl font-semibold text-gray-900\">User Settings</h1>\n      </header>\n\n      <div className=\"space-y-6\">\n        <ProfileSection\n          user={user}\n          isLoading={isUserLoading}\n          isUpdating={isUpdating}\n          error={userError}\n          updateError={updateError}\n          onSave={onUpdateUser}\n          primaryColor={primaryColor}\n        />\n\n        <TeamsSection\n          teams={teams}\n          currentCustomer={currentCustomer}\n          isLoading={isTeamsLoading}\n          onTeamSwitch={onTeamSwitch}\n          primaryColor={primaryColor}\n        />\n\n        {currentCustomer && (\n          <EmailNotificationsSection\n            teamName={currentCustomer.name}\n            notifications={notifications}\n            isLoading={isNotificationsLoading}\n            onToggle={onToggleNotification}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nUserSettings.displayName = \"UserSettings\";\n"]}

package/dist/utils/index.d.mts

@@ -0,0 +1,70 @@
+/**
+ * Centralized API client utility for handling authenticated requests
+ * with automatic 401 detection, cookie deletion, and redirect.
+ */
+interface ApiFetchOptions extends RequestInit {
+    token?: string;
+}
+declare class UnauthorizedError extends Error {
+    constructor(message?: string);
+}
+/**
+ * Helper to check if an error is a Next.js redirect error.
+ * These errors should NOT be caught as they control navigation flow.
+ */
+declare function isRedirectError(error: unknown): boolean;
+/**
+ * Fetch wrapper that automatically handles error responses by:
+ * - 401: Redirecting to "/" with expired parameter
+ * - 502, 503, 504: Redirecting to "/error" with status code
+ *
+ * This function should be used for all authenticated API calls in server actions.
+ *
+ * IMPORTANT: This must be called from a Server Action context, not directly from
+ * a Server Component, because it modifies cookies.
+ */
+declare function authenticatedFetch(url: string, options?: ApiFetchOptions): Promise<Response>;
+
+interface RawBranding {
+    brandingData?: string;
+}
+declare const decodeBranding: ({ brandingData }: RawBranding) => {
+    logo?: undefined;
+    title?: undefined;
+    customColor1?: undefined;
+    customColor2?: undefined;
+} | {
+    logo: string | undefined;
+    title: string | undefined;
+    customColor1: string | undefined;
+    customColor2: string | undefined;
+};
+
+/**
+ * Session validation utilities for handling authentication tokens.
+ */
+/**
+ * Validates a session token by making a lightweight authenticated request.
+ * Returns true if valid, false if invalid (401).
+ *
+ * This should be called from Server Components (like the home page) to validate
+ * the session cookie before rendering authenticated content.
+ */
+declare function validateSession(token: string): Promise<boolean>;
+/**
+ * Deletes the portal_session cookie.
+ * This MUST be called from a Server Action or Route Handler, not from Server Component render.
+ *
+ * Usage example in a Server Action:
+ * ```typescript
+ * "use server";
+ * import { deleteSessionCookie } from "@replicated/portal-components/utils";
+ * export async function logout() {
+ *   await deleteSessionCookie();
+ *   redirect("/");
+ * }
+ * ```
+ */
+declare function deleteSessionCookie(): Promise<void>;
+
+export { UnauthorizedError, authenticatedFetch, decodeBranding, deleteSessionCookie, isRedirectError, validateSession };

package/dist/utils/index.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Centralized API client utility for handling authenticated requests
+ * with automatic 401 detection, cookie deletion, and redirect.
+ */
+interface ApiFetchOptions extends RequestInit {
+    token?: string;
+}
+declare class UnauthorizedError extends Error {
+    constructor(message?: string);
+}
+/**
+ * Helper to check if an error is a Next.js redirect error.
+ * These errors should NOT be caught as they control navigation flow.
+ */
+declare function isRedirectError(error: unknown): boolean;
+/**
+ * Fetch wrapper that automatically handles error responses by:
+ * - 401: Redirecting to "/" with expired parameter
+ * - 502, 503, 504: Redirecting to "/error" with status code
+ *
+ * This function should be used for all authenticated API calls in server actions.
+ *
+ * IMPORTANT: This must be called from a Server Action context, not directly from
+ * a Server Component, because it modifies cookies.
+ */
+declare function authenticatedFetch(url: string, options?: ApiFetchOptions): Promise<Response>;
+
+interface RawBranding {
+    brandingData?: string;
+}
+declare const decodeBranding: ({ brandingData }: RawBranding) => {
+    logo?: undefined;
+    title?: undefined;
+    customColor1?: undefined;
+    customColor2?: undefined;
+} | {
+    logo: string | undefined;
+    title: string | undefined;
+    customColor1: string | undefined;
+    customColor2: string | undefined;
+};
+
+/**
+ * Session validation utilities for handling authentication tokens.
+ */
+/**
+ * Validates a session token by making a lightweight authenticated request.
+ * Returns true if valid, false if invalid (401).
+ *
+ * This should be called from Server Components (like the home page) to validate
+ * the session cookie before rendering authenticated content.
+ */
+declare function validateSession(token: string): Promise<boolean>;
+/**
+ * Deletes the portal_session cookie.
+ * This MUST be called from a Server Action or Route Handler, not from Server Component render.
+ *
+ * Usage example in a Server Action:
+ * ```typescript
+ * "use server";
+ * import { deleteSessionCookie } from "@replicated/portal-components/utils";
+ * export async function logout() {
+ *   await deleteSessionCookie();
+ *   redirect("/");
+ * }
+ * ```
+ */
+declare function deleteSessionCookie(): Promise<void>;
+
+export { UnauthorizedError, authenticatedFetch, decodeBranding, deleteSessionCookie, isRedirectError, validateSession };