@retinalabsllc/zairusjs 16.0.70 → 16.0.90

package/dist/index.mjs

@@ -302,8 +302,8 @@ var InputSpinner = () => /* @__PURE__ */ React5.createElement("svg", { className
 function AuthFormInner({
   companyName,
   workspaceLabel = "Workspace",
-  termsUrl = "https://truhuddle.com/terms-of-service",
-  privacyUrl = "https://truhuddle.com/privacy-policy",
+  termsUrl = "",
+  privacyUrl = "",
   requireNames = true,
   requireOrganization = true,
   useRecaptcha = false,
@@ -317,16 +317,18 @@ function AuthFormInner({
   const [mode, setMode] = useState3("LOGIN");
   const [step, setStep] = useState3("INPUT");
   const getInitialSignupStep = () => {
-    return "INVITATION";
+    if (requireNames) return "NAME";
+    if (requireOrganization) return "ORGANIZATION";
+    return "EMAIL_ID";
   };
   const [signupStep, setSignupStep] = useState3(getInitialSignupStep());
   const [isSubmitting, setIsSubmitting] = useState3(false);
   const [countdown, setCountdown] = useState3(0);
-  const [invitationCode, setInvitationCode] = useState3("");
   const [emailId, setEmailId] = useState3("");
   const [firstName, setFirstName] = useState3("");
   const [lastName, setLastName] = useState3("");
   const [orgName, setOrgName] = useState3("");
+  const [accountType, setAccountType] = useState3("ORGANIZATION");
   const [agreedToTerms, setAgreedToTerms] = useState3(false);
   const [userHas2FA, setUserHas2FA] = useState3(false);
   const [userHasPasskey, setUserHasPasskey] = useState3(false);
@@ -382,8 +384,8 @@ function AuthFormInner({
         email: emailId,
         firstName: mode === "SIGNUP" && requireNames ? firstName : void 0,
         lastName: mode === "SIGNUP" && requireNames ? lastName : void 0,
-        organizationName: mode === "SIGNUP" && requireOrganization ? orgName : void 0,
-        r_c: mode === "SIGNUP" && invitationCode.trim() ? invitationCode.trim().toUpperCase() : void 0,
+        organizationName: mode === "SIGNUP" && accountType === "ORGANIZATION" ? orgName.trim() : void 0,
+        accountType: mode === "SIGNUP" ? accountType : void 0,
         mode,
         recaptchaToken
       });
@@ -439,11 +441,7 @@ function AuthFormInner({
     }
   };
   const handleNextSignupStep = () => {
-    if (signupStep === "INVITATION") {
-      if (requireNames) setSignupStep("NAME");
-      else if (requireOrganization) setSignupStep("ORGANIZATION");
-      else setSignupStep("EMAIL_ID");
-    } else if (signupStep === "NAME") {
+    if (signupStep === "NAME") {
       if (requireOrganization) setSignupStep("ORGANIZATION");
       else setSignupStep("EMAIL_ID");
     } else if (signupStep === "ORGANIZATION") {
@@ -454,9 +452,8 @@ function AuthFormInner({
     if (isSubmitting) return true;
     if (mode === "LOGIN") return emailId.length < 3;
     if (mode === "SIGNUP") {
-      if (signupStep === "INVITATION") return invitationCode.trim().length > 0 && invitationCode.trim().length < 3;
       if (signupStep === "NAME") return firstName.trim() === "" || lastName.trim() === "";
-      if (signupStep === "ORGANIZATION") return orgName.trim().length < 3;
+      if (signupStep === "ORGANIZATION") return accountType === "ORGANIZATION" ? orgName.trim().length < 3 : false;
       if (signupStep === "EMAIL_ID") return emailId.length < 3 || !agreedToTerms;
     }
     return false;
@@ -466,21 +463,26 @@ function AuthFormInner({
     setSignupStep(getInitialSignupStep());
   }, className: "text-black transition-colors ml-1" }, "Sign up")) : /* @__PURE__ */ React5.createElement(React5.Fragment, null, "Already have an account? ", /* @__PURE__ */ React5.createElement("button", { type: "button", onClick: () => setMode("LOGIN"), className: "text-black transition-colors ml-1" }, "Log in")))), /* @__PURE__ */ React5.createElement("form", { className: "space-y-6", autoComplete: "off", onSubmit: (e) => {
     e.preventDefault();
-    if (mode === "SIGNUP" && signupStep === "INVITATION") handleNextSignupStep();
-    else if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
+    if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
     else if (mode === "SIGNUP" && signupStep === "ORGANIZATION") handleNextSignupStep();
     else handleAuthRequestSubmit();
-  } }, mode === "SIGNUP" && signupStep === "INVITATION" && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Referral Code"), /* @__PURE__ */ React5.createElement(
-    "input",
+  } }, mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "flex bg-neutral-100 p-1 rounded-lg" }, /* @__PURE__ */ React5.createElement(
+    "button",
     {
-      type: "text",
-      value: invitationCode,
-      onChange: (e) => setInvitationCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "")),
-      autoFocus: true,
-      className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300 tracking-widest",
-      placeholder: "Referral Code (Optional)"
-    }
-  ))), mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: firstName, onChange: (e) => setFirstName(cleanAlpha(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "First name" })), /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: lastName, onChange: (e) => setLastName(cleanAlpha(e.target.value)), required: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Last name" }))), mode === "SIGNUP" && signupStep === "ORGANIZATION" && requireOrganization && /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: orgName, onChange: (e) => setOrgName(cleanOrgName(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Acme Corporation" }))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "EMAIL_ID") && /* @__PURE__ */ React5.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Email ID"), /* @__PURE__ */ React5.createElement("input", { type: "email", value: emailId, onChange: (e) => setEmailId(cleanEmailId(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "name@company.com" })), mode === "SIGNUP" && /* @__PURE__ */ React5.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ React5.createElement("input", { type: "checkbox", id: "zairus-terms", checked: agreedToTerms, onChange: (e) => setAgreedToTerms(e.target.checked), className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer", required: true }), /* @__PURE__ */ React5.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ React5.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ React5.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))), /* @__PURE__ */ React5.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, "Continue"))), step === "OTP" && /* @__PURE__ */ React5.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React5.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ React5.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React5.createElement("p", { className: "text-[13px] text-neutral-500" }, userHas2FA ? "Enter the code from your authenticator app." : `Enter the code sent to ${emailId}`)), /* @__PURE__ */ React5.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
+      type: "button",
+      onClick: () => setAccountType("INDIVIDUAL"),
+      className: `flex-1 py-2 text-xs rounded-md transition-colors outline-none ${accountType === "INDIVIDUAL" ? "bg-white shadow-sm text-black" : "text-neutral-500 hover:text-black"}`
+    },
+    "Personal"
+  ), /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setAccountType("ORGANIZATION"),
+      className: `flex-1 py-2 text-xs rounded-md transition-colors outline-none ${accountType === "ORGANIZATION" ? "bg-white shadow-sm text-black" : "text-neutral-500 hover:text-black"}`
+    },
+    "Organization"
+  )), accountType === "ORGANIZATION" && /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5 relative animate-in fade-in zoom-in-95 duration-200" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ React5.createElement("input", { type: "text", value: orgName, onChange: (e) => setOrgName(cleanOrgName(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "Acme Corporation" })), accountType === "INDIVIDUAL" && /* @__PURE__ */ React5.createElement("div", { className: "py-4 text-center animate-in fade-in duration-200" }, /* @__PURE__ */ React5.createElement("p", { className: "text-[13px] text-neutral-500" }, "You are creating a personal account. You can join organizations later."))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "EMAIL_ID") && /* @__PURE__ */ React5.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React5.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Email ID"), /* @__PURE__ */ React5.createElement("input", { type: "email", value: emailId, onChange: (e) => setEmailId(cleanEmailId(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-neutral-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "name@company.com" })), mode === "SIGNUP" && /* @__PURE__ */ React5.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ React5.createElement("input", { type: "checkbox", id: "zairus-terms", checked: agreedToTerms, onChange: (e) => setAgreedToTerms(e.target.checked), className: "mt-0.5 w-4 h-4 bg-white border-neutral-300 rounded text-black focus:ring-black cursor-pointer", required: true }), /* @__PURE__ */ React5.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ React5.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ React5.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))), /* @__PURE__ */ React5.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, "Continue"))), step === "OTP" && /* @__PURE__ */ React5.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ React5.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ React5.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ React5.createElement("p", { className: "text-[13px] text-neutral-500" }, userHas2FA ? "Enter the code from your authenticator app." : `Enter the code sent to ${emailId}`)), /* @__PURE__ */ React5.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
     e.preventDefault();
     verifyOtpCode(otp.join(""));
   } }, /* @__PURE__ */ React5.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React5.createElement(
@@ -505,9 +507,9 @@ function AuthFormInner({
     {
       onClick: triggerPasskeyLogin,
       disabled: isSubmitting,
-      className: "w-full py-2.5 rounded-full text-black border border-neutral-200  hover:bg-neutral-50 text-xs  tracking-wide transition-colors outline-none disabled:opacity-50"
+      className: "w-full py-2.5 rounded-full text-black border border-neutral-200 hover:bg-neutral-50 text-xs tracking-wide transition-colors outline-none disabled:opacity-50"
     },
-    "Use Passkey / Biometrics"
+    "Use Passkey Biometrics"
   ))))));
 }
 var PipleAuth = (props) => {
@@ -4468,6 +4470,388 @@ var UniversalBuyCryptoPage = ({
     );
   }))))));
 };
+
+// src/components/UniversalDepartmentsPage.tsx
+import React46 from "react";
+import { HugeiconsIcon as HugeiconsIcon32 } from "@hugeicons/react";
+import { ArrowLeft01Icon as ArrowLeft01Icon13, ArrowRight01Icon as ArrowRight01Icon9, Loading03Icon as Loading03Icon20 } from "@hugeicons/core-free-icons";
+var formatMembersCount = (num) => {
+  if (num >= 1e6) return (num / 1e6).toFixed(1) + "m";
+  if (num >= 1e3) return (num / 1e3).toFixed(1) + "k";
+  return num.toString();
+};
+var PageSpinner6 = () => /* @__PURE__ */ React46.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React46.createElement(HugeiconsIcon32, { icon: Loading03Icon20, size: 32, className: "animate-spin mb-4 text-black" }));
+var UniversalDepartmentsPage = ({
+  headerTitle,
+  headerDescription,
+  departments,
+  isLoading,
+  currentPage,
+  totalPages,
+  onPageChange,
+  onDepartmentClick
+}) => {
+  return /* @__PURE__ */ React46.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React46.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, /* @__PURE__ */ React46.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, /* @__PURE__ */ React46.createElement("div", null, /* @__PURE__ */ React46.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, headerTitle), headerDescription && /* @__PURE__ */ React46.createElement("p", { className: "text-[12px] text-neutral-500" }, headerDescription))), /* @__PURE__ */ React46.createElement("div", { className: "w-full overflow-hidden" }, isLoading ? /* @__PURE__ */ React46.createElement(PageSpinner6, null) : /* @__PURE__ */ React46.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React46.createElement("div", null, departments.length === 0 ? /* @__PURE__ */ React46.createElement("p", { className: "text-[12px] text-neutral-400 py-6 text-center" }, "No departments available") : departments.map((dept) => /* @__PURE__ */ React46.createElement(
+    "div",
+    {
+      key: dept.id,
+      onClick: () => onDepartmentClick(dept.id),
+      className: "flex flex-col py-4 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl gap-2"
+    },
+    /* @__PURE__ */ React46.createElement("p", { className: "text-[14px] text-black tracking-tight truncate" }, dept.name),
+    /* @__PURE__ */ React46.createElement("div", { className: "flex items-center gap-3 min-w-0" }, dept.avatars && dept.avatars.length > 0 && /* @__PURE__ */ React46.createElement("div", { className: "flex items-center -space-x-2 shrink-0" }, dept.avatars.slice(0, 4).map((src, idx) => /* @__PURE__ */ React46.createElement("div", { key: idx, className: "w-7 h-7 rounded-lg border-2 border-white bg-neutral-100 overflow-hidden shrink-0" }, /* @__PURE__ */ React46.createElement(
+      "img",
+      {
+        src: src || "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif",
+        alt: "Member",
+        className: "w-full h-full object-cover"
+      }
+    )))), dept.totalMembers > 0 ? /* @__PURE__ */ React46.createElement("span", { className: "text-[11px] text-neutral-500 truncate block" }, formatMembersCount(dept.totalMembers), " ", dept.totalMembers > 4 ? "+" : "") : /* @__PURE__ */ React46.createElement("span", { className: "text-[11px] text-neutral-400 truncate block" }, "Empty"))
+  ))), /* @__PURE__ */ React46.createElement("div", { className: "flex items-center justify-between pt-6 mt-2" }, /* @__PURE__ */ React46.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ React46.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React46.createElement(
+    "button",
+    {
+      onClick: () => onPageChange(currentPage - 1),
+      disabled: currentPage <= 1 || isLoading,
+      className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
+    },
+    /* @__PURE__ */ React46.createElement(HugeiconsIcon32, { icon: ArrowLeft01Icon13, size: 14 })
+  ), /* @__PURE__ */ React46.createElement(
+    "button",
+    {
+      onClick: () => onPageChange(currentPage + 1),
+      disabled: currentPage >= totalPages || isLoading || totalPages === 0,
+      className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
+    },
+    /* @__PURE__ */ React46.createElement(HugeiconsIcon32, { icon: ArrowRight01Icon9, size: 14 })
+  )))))));
+};
+
+// src/components/UniversalMembersPage.tsx
+import React47, { useState as useState32, useEffect as useEffect18, useRef as useRef12 } from "react";
+import { HugeiconsIcon as HugeiconsIcon33 } from "@hugeicons/react";
+import toast12 from "react-hot-toast";
+import {
+  ArrowLeft01Icon as ArrowLeft01Icon14,
+  ArrowRight01Icon as ArrowRight01Icon10,
+  Loading03Icon as Loading03Icon21,
+  Search01Icon as Search01Icon3,
+  SearchList02Icon as SearchList02Icon2,
+  ListSettingIcon as ListSettingIcon2
+} from "@hugeicons/core-free-icons";
+var MemberAvatar = ({ src, status }) => {
+  const [loaded, setLoaded] = useState32(false);
+  const [error, setError] = useState32(false);
+  const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
+  const finalSrc = error || !src ? defaultAvatar : src;
+  const getStatusColor = () => {
+    switch (status?.toUpperCase()) {
+      case "ACTIVE":
+        return "bg-emerald-500";
+      case "BUSY":
+        return "bg-amber-500";
+      case "OFFLINE":
+        return "bg-rose-500";
+      case "AWAY":
+        return "bg-neutral-400";
+      default:
+        return "bg-neutral-200";
+    }
+  };
+  return /* @__PURE__ */ React47.createElement("div", { className: "relative w-10 h-10 shrink-0" }, /* @__PURE__ */ React47.createElement("div", { className: "w-full h-full rounded-lg bg-neutral-100 flex items-center justify-center overflow-hidden border border-neutral-200" }, !loaded && !error && /* @__PURE__ */ React47.createElement(HugeiconsIcon33, { icon: Loading03Icon21, className: "animate-spin text-neutral-400 absolute", size: 14 }), /* @__PURE__ */ React47.createElement(
+    "img",
+    {
+      src: finalSrc,
+      alt: "Member Avatar",
+      className: `w-full h-full object-cover transition-opacity duration-300 ${loaded || error ? "opacity-100" : "opacity-0"}`,
+      onLoad: () => setLoaded(true),
+      onError: () => setError(true)
+    }
+  )), /* @__PURE__ */ React47.createElement("div", { className: `absolute -bottom-1 -right-1 w-3.5 h-3.5 rounded-full border-2 border-white z-10 ${getStatusColor()}` }));
+};
+var PageSpinner7 = () => /* @__PURE__ */ React47.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon33, { icon: Loading03Icon21, size: 32, className: "animate-spin mb-4 text-black" }));
+var UniversalMembersPage = ({
+  headerTitle,
+  headerDescription,
+  members,
+  isLoading,
+  currentPage,
+  totalPages,
+  onPageChange,
+  searchQuery,
+  onSearchChange,
+  activeStatusFilter,
+  onStatusFilterChange,
+  activeRoleFilter,
+  onRoleFilterChange,
+  actionButtonText,
+  hideAction = false,
+  onRemoveMember
+}) => {
+  const [expandedId, setExpandedId] = useState32(null);
+  const [memberToRemove, setMemberToRemove] = useState32(null);
+  const [isRemoving, setIsRemoving] = useState32(false);
+  const [localSearchQuery, setLocalSearchQuery] = useState32(searchQuery);
+  const [isTyping, setIsTyping] = useState32(false);
+  const [isStatusModalOpen, setIsStatusModalOpen] = useState32(false);
+  const [isRoleModalOpen, setIsRoleModalOpen] = useState32(false);
+  const statusDropdownRef = useRef12(null);
+  const roleDropdownRef = useRef12(null);
+  useEffect18(() => {
+    function handleClickOutside(event) {
+      if (statusDropdownRef.current && !statusDropdownRef.current.contains(event.target)) {
+        setIsStatusModalOpen(false);
+      }
+      if (roleDropdownRef.current && !roleDropdownRef.current.contains(event.target)) {
+        setIsRoleModalOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect18(() => {
+    setIsTyping(true);
+    const handler = setTimeout(() => {
+      onSearchChange(localSearchQuery);
+      setIsTyping(false);
+    }, 600);
+    return () => clearTimeout(handler);
+  }, [localSearchQuery, onSearchChange]);
+  useEffect18(() => {
+    if (searchQuery === "" && localSearchQuery !== "") {
+      setLocalSearchQuery("");
+    }
+  }, [searchQuery]);
+  const handleConfirmRemove = async () => {
+    if (!memberToRemove) return;
+    setIsRemoving(true);
+    try {
+      await onRemoveMember(memberToRemove.id);
+      toast12.success("Member removed successfully.");
+      setExpandedId(null);
+      setMemberToRemove(null);
+    } catch (error) {
+      toast12.error("Failed to remove member.");
+    } finally {
+      setIsRemoving(false);
+    }
+  };
+  const isListLoading = isLoading || isTyping;
+  return /* @__PURE__ */ React47.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ React47.createElement(ManagedToaster, null), /* @__PURE__ */ React47.createElement(
+    ConfirmationDialog,
+    {
+      isOpen: !!memberToRemove,
+      title: "Remove Member",
+      message: `Are you sure you want to remove ${memberToRemove?.name}? This action cannot be undone.`,
+      confirmText: "Remove",
+      cancelText: "Cancel",
+      isProcessing: isRemoving,
+      isDestructive: true,
+      onClose: () => setMemberToRemove(null),
+      onConfirm: handleConfirmRemove
+    }
+  ), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-row flex-nowrap mb-4 items-center justify-between gap-4 w-full" }, /* @__PURE__ */ React47.createElement("div", { className: "relative flex-1 min-w-0 max-w-full" }, /* @__PURE__ */ React47.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon33, { icon: Search01Icon3, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ React47.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "Search members...",
+      value: localSearchQuery,
+      onChange: (e) => setLocalSearchQuery(e.target.value),
+      className: "w-full pl-10 pr-4 py-2 bg-white rounded-full text-[13px] text-black placeholder-neutral-400 outline-none transition-colors focus:border-black"
+    }
+  )), /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3 w-auto pb-0 shrink-0" }, /* @__PURE__ */ React47.createElement(
+    "button",
+    {
+      onClick: () => setIsStatusModalOpen(true),
+      className: "flex items-center justify-center bg-white w-9 h-9 rounded-full text-neutral-500 hover:text-black transition-colors outline-none"
+    },
+    /* @__PURE__ */ React47.createElement(HugeiconsIcon33, { icon: SearchList02Icon2, size: 16 })
+  ), /* @__PURE__ */ React47.createElement(
+    "button",
+    {
+      onClick: () => setIsRoleModalOpen(true),
+      className: "flex items-center justify-center bg-white w-9 h-9 rounded-full text-neutral-500 hover:text-black transition-colors outline-none"
+    },
+    /* @__PURE__ */ React47.createElement(HugeiconsIcon33, { icon: ListSettingIcon2, size: 16 })
+  ))), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, headerTitle), headerDescription && /* @__PURE__ */ React47.createElement("p", { className: "text-[12px] text-neutral-500" }, headerDescription))), /* @__PURE__ */ React47.createElement("div", { className: "w-full overflow-hidden" }, isListLoading ? /* @__PURE__ */ React47.createElement(PageSpinner7, null) : /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React47.createElement("div", null, members.length === 0 ? /* @__PURE__ */ React47.createElement("p", { className: "text-[12px] text-neutral-400 py-6 text-center" }, "No members found") : members.map((member) => /* @__PURE__ */ React47.createElement(React47.Fragment, { key: member.id }, expandedId === member.id ? /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col p-5 bg-neutral-50 rounded-xl animate-in fade-in zoom-in-95 duration-200 gap-5 my-2" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React47.createElement(MemberAvatar, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React47.createElement("span", { className: "text-[14px] text-black tracking-tight truncate" }, member.name), /* @__PURE__ */ React47.createElement("span", { className: "text-[12px] text-neutral-500 capitalize" }, member.role.toLowerCase()))), member.departmentName && /* @__PURE__ */ React47.createElement("div", { className: "pt-3 border-t border-neutral-200" }, /* @__PURE__ */ React47.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Department"), /* @__PURE__ */ React47.createElement("span", { className: "text-[13px] text-black truncate block" }, member.departmentName)), /* @__PURE__ */ React47.createElement("div", { className: "flex gap-3 pt-2" }, !hideAction && /* @__PURE__ */ React47.createElement(
+    "button",
+    {
+      onClick: () => setMemberToRemove(member),
+      className: "flex-1 py-2.5 bg-white border border-rose-200 text-rose-600 hover:bg-rose-50 rounded-full text-[12px] tracking-wide transition-colors outline-none"
+    },
+    actionButtonText
+  ), /* @__PURE__ */ React47.createElement(
+    "button",
+    {
+      onClick: () => setExpandedId(null),
+      className: "flex-1 py-2.5 bg-white border border-neutral-200 text-black hover:bg-neutral-100 rounded-full text-[12px] tracking-wide transition-colors outline-none"
+    },
+    "Close"
+  ))) : /* @__PURE__ */ React47.createElement(
+    "div",
+    {
+      onClick: () => setExpandedId(member.id),
+      className: "flex items-center justify-between py-3 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl"
+    },
+    /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React47.createElement(MemberAvatar, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ React47.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5" }, /* @__PURE__ */ React47.createElement("p", { className: "text-[13px] text-black truncate" }, member.name), /* @__PURE__ */ React47.createElement("p", { className: "text-[11px] text-neutral-500 capitalize truncate" }, member.role.toLowerCase())))
+  )))), /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between pt-6 mt-2" }, /* @__PURE__ */ React47.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React47.createElement(
+    "button",
+    {
+      onClick: () => onPageChange(currentPage - 1),
+      disabled: currentPage <= 1 || isListLoading,
+      className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
+    },
+    /* @__PURE__ */ React47.createElement(HugeiconsIcon33, { icon: ArrowLeft01Icon14, size: 14 })
+  ), /* @__PURE__ */ React47.createElement(
+    "button",
+    {
+      onClick: () => onPageChange(currentPage + 1),
+      disabled: currentPage >= totalPages || isListLoading || totalPages === 0,
+      className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
+    },
+    /* @__PURE__ */ React47.createElement(HugeiconsIcon33, { icon: ArrowRight01Icon10, size: 14 })
+  )))))), isStatusModalOpen && /* @__PURE__ */ React47.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React47.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => setIsStatusModalOpen(false) }), /* @__PURE__ */ React47.createElement("div", { ref: statusDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React47.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Status Filter")), /* @__PURE__ */ React47.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"].map((option) => /* @__PURE__ */ React47.createElement(
+    "button",
+    {
+      key: option,
+      onClick: () => {
+        onStatusFilterChange(option);
+        setIsStatusModalOpen(false);
+      },
+      className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeStatusFilter === option ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
+    },
+    /* @__PURE__ */ React47.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
+  ))), /* @__PURE__ */ React47.createElement("div", { className: "w-full flex mt-2" }, /* @__PURE__ */ React47.createElement("button", { onClick: () => setIsStatusModalOpen(false), className: "w-full py-4 text-[13px] text-neutral-500 hover:text-black transition-colors outline-none" }, "Cancel")))), isRoleModalOpen && /* @__PURE__ */ React47.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React47.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => setIsRoleModalOpen(false) }), /* @__PURE__ */ React47.createElement("div", { ref: roleDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React47.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Role Filter")), /* @__PURE__ */ React47.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, ["ALL", "ADMIN", "MANAGER", "MEMBER", "GUEST"].map((option) => /* @__PURE__ */ React47.createElement(
+    "button",
+    {
+      key: option,
+      onClick: () => {
+        onRoleFilterChange(option);
+        setIsRoleModalOpen(false);
+      },
+      className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeRoleFilter === option ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
+    },
+    /* @__PURE__ */ React47.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
+  ))), /* @__PURE__ */ React47.createElement("div", { className: "w-full flex mt-2" }, /* @__PURE__ */ React47.createElement("button", { onClick: () => setIsRoleModalOpen(false), className: "w-full py-4 text-[13px] text-neutral-500 hover:text-black transition-colors outline-none" }, "Cancel")))));
+};
+
+// src/components/UniversalHome2.tsx
+import React48, { useState as useState33 } from "react";
+import { useRouter as useRouter3 } from "next/navigation";
+import { HugeiconsIcon as HugeiconsIcon34 } from "@hugeicons/react";
+import {
+  Loading03Icon as Loading03Icon22,
+  Notification01Icon as Notification01Icon2,
+  ArrowLeft01Icon as ArrowLeft01Icon15,
+  ArrowRight01Icon as ArrowRight01Icon11,
+  CancelCircleIcon as CancelCircleIcon9,
+  ArrowUpRight01Icon as ArrowUpRight01Icon3
+} from "@hugeicons/core-free-icons";
+var UniversalHome2 = ({
+  fullName = "",
+  avatarSrc,
+  createHuddleAction,
+  joinHuddleAction,
+  notifications = [],
+  notificationPage = 1,
+  notificationTotalPages = 1,
+  isNotifsLoading = false,
+  onNotificationPageChange,
+  onNotificationClick,
+  formatNotifDate,
+  customContent,
+  departmentsProps
+}) => {
+  const [isAvatarLoaded, setIsAvatarLoaded] = useState33(false);
+  const [showNotifDialog, setShowNotifDialog] = useState33(false);
+  const [selectedNotif, setSelectedNotif] = useState33(null);
+  const router = useRouter3();
+  const fallbackAvatarUrl = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
+  const finalAvatarSrc = avatarSrc || fallbackAvatarUrl;
+  const hasUnreadNotifs = notifications.some((n) => !n.isRead);
+  return /* @__PURE__ */ React48.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, /* @__PURE__ */ React48.createElement("div", { className: "flex items-center justify-between w-full pb-4" }, /* @__PURE__ */ React48.createElement("div", { className: "w-10 h-10 shrink-0 cursor-pointer", onClick: () => router.push("/app/account/me") }, /* @__PURE__ */ React48.createElement("div", { className: "relative w-full h-full rounded-lg overflow-hidden bg-neutral-100 flex items-center justify-center border border-neutral-200" }, !isAvatarLoaded && /* @__PURE__ */ React48.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-10 bg-neutral-100" }, /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: Loading03Icon22, size: 16, className: "animate-spin text-black" })), /* @__PURE__ */ React48.createElement(
+    "img",
+    {
+      src: finalAvatarSrc,
+      alt: "User Avatar",
+      onLoad: () => setIsAvatarLoaded(true),
+      className: `w-full h-full object-cover transition-opacity duration-300 ${isAvatarLoaded ? "opacity-100" : "opacity-0"}`
+    }
+  ))), /* @__PURE__ */ React48.createElement(
+    "button",
+    {
+      onClick: () => {
+        setShowNotifDialog(true);
+        setSelectedNotif(null);
+      },
+      className: "relative w-10 h-10 flex items-center justify-center rounded-full bg-white outline-none hover:bg-neutral-50 transition-colors"
+    },
+    /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: Notification01Icon2, size: 20, className: "text-black" }),
+    hasUnreadNotifs && /* @__PURE__ */ React48.createElement("span", { className: "absolute top-2.5 right-2.5 w-2 h-2 bg-red-500 rounded-full border border-white" })
+  )), /* @__PURE__ */ React48.createElement("div", { className: "w-full pb-6 flex flex-col gap-4" }, /* @__PURE__ */ React48.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ React48.createElement(
+    "div",
+    {
+      onClick: createHuddleAction?.onClick,
+      className: "bg-[#143731] rounded-2xl p-5 relative overflow-hidden flex flex-col h-32 sm:h-36 cursor-pointer hover:opacity-90 transition-opacity"
+    },
+    /* @__PURE__ */ React48.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ React48.createElement("p", { className: "text-[15px] sm:text-[15px] text-white leading-tight" }, "Create", /* @__PURE__ */ React48.createElement("br", null), /* @__PURE__ */ React48.createElement("span", { className: "text-white/70" }, "Huddle")), /* @__PURE__ */ React48.createElement("div", { className: "w-8 h-8 rounded-full bg-white/10 flex items-center justify-center" }, /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: ArrowUpRight01Icon3, size: 16, className: "text-white" }))),
+    /* @__PURE__ */ React48.createElement(
+      "img",
+      {
+        src: "https://storage.googleapis.com/retina-cloud-v2/assets/images/cal_a.avif",
+        alt: "Create Huddle",
+        className: "absolute bottom-4 right-2 translate-x-1/4 translate-y-1/2 w-32 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
+      }
+    )
+  ), /* @__PURE__ */ React48.createElement(
+    "div",
+    {
+      onClick: joinHuddleAction?.onClick,
+      className: "bg-[#ceff8a] rounded-2xl p-5 relative overflow-hidden flex flex-col h-32 sm:h-36 cursor-pointer hover:opacity-90 transition-opacity"
+    },
+    /* @__PURE__ */ React48.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ React48.createElement("p", { className: "text-[15px] sm:text-[15px] text-black leading-tight" }, "Join", /* @__PURE__ */ React48.createElement("br", null), /* @__PURE__ */ React48.createElement("span", { className: "text-black/60" }, "Huddle")), /* @__PURE__ */ React48.createElement("div", { className: "w-8 h-8 rounded-full bg-black/5 flex items-center justify-center" }, /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: ArrowRight01Icon11, size: 16, className: "text-black" }))),
+    /* @__PURE__ */ React48.createElement(
+      "img",
+      {
+        src: "https://storage.googleapis.com/retina-cloud-v2/assets/images/cam_a.avif",
+        alt: "Join Huddle",
+        className: "absolute bottom-4 right-2 translate-x-1/4 translate-y-1/2 w-32 h-auto object-contain z-0 pointer-events-none drop-shadow-md"
+      }
+    )
+  ))), customContent && /* @__PURE__ */ React48.createElement("div", { className: "w-full" }, customContent), /* @__PURE__ */ React48.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ React48.createElement(
+    UniversalDepartmentsPage,
+    {
+      ...departmentsProps
+    }
+  )), showNotifDialog && /* @__PURE__ */ React48.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React48.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ React48.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 h-[80vh]" }, /* @__PURE__ */ React48.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, selectedNotif ? /* @__PURE__ */ React48.createElement("button", { onClick: () => setSelectedNotif(null), className: "text-neutral-400 hover:text-black transition-colors outline-none flex items-center gap-2 text-[11px] tracking-widest" }, /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: ArrowLeft01Icon15, size: 14 }), " Back") : /* @__PURE__ */ React48.createElement("h3", { className: "text-[15px] text-black tracking-tight flex items-center gap-2" }, "Notifications", isNotifsLoading && /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: Loading03Icon22, size: 14, className: "animate-spin text-neutral-400" })), /* @__PURE__ */ React48.createElement("button", { onClick: () => setShowNotifDialog(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: CancelCircleIcon9, size: 18 }))), /* @__PURE__ */ React48.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2" }, selectedNotif ? /* @__PURE__ */ React48.createElement("div", { className: "p-4 text-left" }, /* @__PURE__ */ React48.createElement("h4", { className: "text-[14px] text-black mb-1" }, selectedNotif.title), /* @__PURE__ */ React48.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest mb-4 block" }, formatNotifDate(selectedNotif.createdAt)), /* @__PURE__ */ React48.createElement("p", { className: "text-[12px] text-neutral-600 leading-relaxed whitespace-pre-wrap" }, selectedNotif.message)) : /* @__PURE__ */ React48.createElement("div", { className: "flex flex-col divide-y divide-neutral-50/50" }, notifications?.length === 0 && !isNotifsLoading ? /* @__PURE__ */ React48.createElement("div", { className: "p-8 text-center text-xs text-neutral-400" }, "You have no notifications.") : notifications?.map((notif) => /* @__PURE__ */ React48.createElement(
+    "div",
+    {
+      key: notif.id,
+      onClick: () => {
+        setSelectedNotif(notif);
+        onNotificationClick?.(notif);
+      },
+      className: `p-3 flex items-start gap-3 rounded-xl cursor-pointer transition-colors ${isNotifsLoading ? "opacity-50 pointer-events-none" : "hover:bg-neutral-50"}`
+    },
+    /* @__PURE__ */ React48.createElement("div", { className: "mt-1.5 shrink-0" }, !notif.isRead ? /* @__PURE__ */ React48.createElement("div", { className: "w-1.5 h-1.5 bg-red-500 rounded-full" }) : /* @__PURE__ */ React48.createElement("div", { className: "w-1.5 h-1.5 bg-transparent" })),
+    /* @__PURE__ */ React48.createElement("div", { className: "flex-1 min-w-0 text-left" }, /* @__PURE__ */ React48.createElement("h5", { className: `text-[12px] truncate ${notif.isRead ? "text-neutral-500" : "text-black"}` }, notif.title), /* @__PURE__ */ React48.createElement("p", { className: "text-[11px] text-neutral-400 truncate mt-0.5" }, notif.message), /* @__PURE__ */ React48.createElement("span", { className: "text-[9px] text-neutral-400 tracking-widest mt-2 block" }, formatNotifDate(notif.createdAt)))
+  )))), !selectedNotif && /* @__PURE__ */ React48.createElement("div", { className: "p-4 flex items-center justify-between shrink-0" }, /* @__PURE__ */ React48.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest" }, "Page ", notificationPage, " of ", notificationTotalPages === 0 ? 1 : notificationTotalPages), /* @__PURE__ */ React48.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React48.createElement(
+    "button",
+    {
+      disabled: notificationPage <= 1 || isNotifsLoading,
+      onClick: () => onNotificationPageChange?.(notificationPage - 1),
+      className: "w-7 h-7 flex items-center justify-center rounded-full bg-white border border-neutral-200 text-neutral-600 disabled:opacity-30 outline-none hover:bg-neutral-50 transition-colors"
+    },
+    /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: ArrowLeft01Icon15, size: 12 })
+  ), /* @__PURE__ */ React48.createElement(
+    "button",
+    {
+      disabled: notificationPage >= notificationTotalPages || notificationTotalPages === 0 || isNotifsLoading,
+      onClick: () => onNotificationPageChange?.(notificationPage + 1),
+      className: "w-7 h-7 flex items-center justify-center rounded-full bg-white border border-neutral-200 text-neutral-600 disabled:opacity-30 outline-none hover:bg-neutral-50 transition-colors"
+    },
+    /* @__PURE__ */ React48.createElement(HugeiconsIcon34, { icon: ArrowRight01Icon11, size: 12 })
+  ))))));
+};
 export {
   AppBento2,
   CardInfoDialog,
@@ -4502,8 +4886,11 @@ export {
   UniversalBuyCryptoPage,
   UniversalCardActionPage,
   UniversalCardPage,
+  UniversalDepartmentsPage,
   UniversalErrorView,
+  UniversalHome2,
   UniversalHomeView,
+  UniversalMembersPage,
   UniversalOrganizationPage,
   UniversalProfilePage,
   UniversalProfileSettings,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retinalabsllc/zairusjs",
-  "version": "16.0.70",
+  "version": "16.0.90",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",