@retinalabsllc/zairusjs 16.0.70 → 16.0.80

package/dist/index.d.mts

@@ -67,7 +67,7 @@ interface PipleAuthProps {
         firstName?: string;
         lastName?: string;
         organizationName?: string;
-        r_c?: string;
+        accountType?: "INDIVIDUAL" | "ORGANIZATION";
         mode: AuthMode;
         recaptchaToken?: string;
     }) => Promise<{
@@ -972,4 +972,80 @@ interface UniversalBuyCryptoPageProps {
 }
 declare const UniversalBuyCryptoPage: React.FC<UniversalBuyCryptoPageProps>;
 
-export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CardData, CardInfoDialog, type CardInfoDialogProps, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type CryptoOption, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, type FiatCurrencyOption, Footer, type FooterColumn, type FooterLink, type FooterProps, FundCardDialog, type FundCardDialogProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NetworkOption, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PinDialerBottomSheet, type PinDialerBottomSheetProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingFeature2, type PricingPlan, type PricingTab, type ProjectItem, type RateCalculationPayload, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, type TierOption, UniversalBuyCryptoPage, type UniversalBuyCryptoPageProps, UniversalCardActionPage, type UniversalCardActionPageProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };
+interface UniversalDepartment {
+    id: string;
+    name: string;
+    totalMembers: number;
+    avatars: string[];
+}
+interface UniversalDepartmentsPageProps {
+    headerTitle: string;
+    headerDescription: string;
+    departments: UniversalDepartment[];
+    isLoading: boolean;
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    onDepartmentClick: (departmentId: string) => void;
+}
+declare const UniversalDepartmentsPage: React.FC<UniversalDepartmentsPageProps>;
+
+interface UniversalMember {
+    id: string;
+    userId: string;
+    name: string;
+    avatarUrl?: string | null;
+    status: 'ACTIVE' | 'BUSY' | 'AWAY' | 'OFFLINE' | string;
+    role: string;
+    departmentName?: string;
+}
+interface UniversalMembersPageProps {
+    headerTitle: string;
+    headerDescription: string;
+    members: UniversalMember[];
+    isLoading: boolean;
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    searchQuery: string;
+    onSearchChange: (query: string) => void;
+    activeStatusFilter: string;
+    onStatusFilterChange: (status: string) => void;
+    activeRoleFilter: string;
+    onRoleFilterChange: (role: string) => void;
+    actionButtonText: string;
+    hideAction?: boolean;
+    onRemoveMember: (memberId: string) => Promise<void>;
+}
+declare const UniversalMembersPage: React.FC<UniversalMembersPageProps>;
+
+interface HomeActionBtn2 {
+    label: string;
+    icon?: any;
+    onClick: () => void;
+}
+interface NotificationItem2 {
+    id: string;
+    title: string;
+    message: string;
+    isRead: boolean;
+    createdAt: string | Date;
+}
+interface UniversalHome2Props {
+    fullName?: string;
+    avatarSrc?: string | null;
+    createHuddleAction?: HomeActionBtn2;
+    joinHuddleAction?: HomeActionBtn2;
+    notifications?: NotificationItem2[];
+    notificationPage?: number;
+    notificationTotalPages?: number;
+    isNotifsLoading?: boolean;
+    onNotificationPageChange?: (page: number) => void;
+    onNotificationClick?: (notif: NotificationItem2) => void;
+    formatNotifDate: (date: string | Date) => string;
+    customContent?: React.ReactNode;
+    departmentsProps: UniversalDepartmentsPageProps;
+}
+declare const UniversalHome2: React.FC<UniversalHome2Props>;
+
+export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CardData, CardInfoDialog, type CardInfoDialogProps, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type CryptoOption, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, type FiatCurrencyOption, Footer, type FooterColumn, type FooterLink, type FooterProps, FundCardDialog, type FundCardDialogProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type HomeActionBtn2, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NetworkOption, type NotificationItem, type NotificationItem2, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PinDialerBottomSheet, type PinDialerBottomSheetProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingFeature2, type PricingPlan, type PricingTab, type ProjectItem, type RateCalculationPayload, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, type TierOption, UniversalBuyCryptoPage, type UniversalBuyCryptoPageProps, UniversalCardActionPage, type UniversalCardActionPageProps, UniversalCardPage, type UniversalCardPageProps, type UniversalDepartment, UniversalDepartmentsPage, type UniversalDepartmentsPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHome2, type UniversalHome2Props, UniversalHomeView, type UniversalHomeViewProps, type UniversalMember, UniversalMembersPage, type UniversalMembersPageProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };

package/dist/index.d.ts

@@ -67,7 +67,7 @@ interface PipleAuthProps {
         firstName?: string;
         lastName?: string;
         organizationName?: string;
-        r_c?: string;
+        accountType?: "INDIVIDUAL" | "ORGANIZATION";
         mode: AuthMode;
         recaptchaToken?: string;
     }) => Promise<{
@@ -972,4 +972,80 @@ interface UniversalBuyCryptoPageProps {
 }
 declare const UniversalBuyCryptoPage: React.FC<UniversalBuyCryptoPageProps>;
 
-export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CardData, CardInfoDialog, type CardInfoDialogProps, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type CryptoOption, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, type FiatCurrencyOption, Footer, type FooterColumn, type FooterLink, type FooterProps, FundCardDialog, type FundCardDialogProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NetworkOption, type NotificationItem, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PinDialerBottomSheet, type PinDialerBottomSheetProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingFeature2, type PricingPlan, type PricingTab, type ProjectItem, type RateCalculationPayload, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, type TierOption, UniversalBuyCryptoPage, type UniversalBuyCryptoPageProps, UniversalCardActionPage, type UniversalCardActionPageProps, UniversalCardPage, type UniversalCardPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHomeView, type UniversalHomeViewProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };
+interface UniversalDepartment {
+    id: string;
+    name: string;
+    totalMembers: number;
+    avatars: string[];
+}
+interface UniversalDepartmentsPageProps {
+    headerTitle: string;
+    headerDescription: string;
+    departments: UniversalDepartment[];
+    isLoading: boolean;
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    onDepartmentClick: (departmentId: string) => void;
+}
+declare const UniversalDepartmentsPage: React.FC<UniversalDepartmentsPageProps>;
+
+interface UniversalMember {
+    id: string;
+    userId: string;
+    name: string;
+    avatarUrl?: string | null;
+    status: 'ACTIVE' | 'BUSY' | 'AWAY' | 'OFFLINE' | string;
+    role: string;
+    departmentName?: string;
+}
+interface UniversalMembersPageProps {
+    headerTitle: string;
+    headerDescription: string;
+    members: UniversalMember[];
+    isLoading: boolean;
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    searchQuery: string;
+    onSearchChange: (query: string) => void;
+    activeStatusFilter: string;
+    onStatusFilterChange: (status: string) => void;
+    activeRoleFilter: string;
+    onRoleFilterChange: (role: string) => void;
+    actionButtonText: string;
+    hideAction?: boolean;
+    onRemoveMember: (memberId: string) => Promise<void>;
+}
+declare const UniversalMembersPage: React.FC<UniversalMembersPageProps>;
+
+interface HomeActionBtn2 {
+    label: string;
+    icon?: any;
+    onClick: () => void;
+}
+interface NotificationItem2 {
+    id: string;
+    title: string;
+    message: string;
+    isRead: boolean;
+    createdAt: string | Date;
+}
+interface UniversalHome2Props {
+    fullName?: string;
+    avatarSrc?: string | null;
+    createHuddleAction?: HomeActionBtn2;
+    joinHuddleAction?: HomeActionBtn2;
+    notifications?: NotificationItem2[];
+    notificationPage?: number;
+    notificationTotalPages?: number;
+    isNotifsLoading?: boolean;
+    onNotificationPageChange?: (page: number) => void;
+    onNotificationClick?: (notif: NotificationItem2) => void;
+    formatNotifDate: (date: string | Date) => string;
+    customContent?: React.ReactNode;
+    departmentsProps: UniversalDepartmentsPageProps;
+}
+declare const UniversalHome2: React.FC<UniversalHome2Props>;
+
+export { AppBento2, type AppBento2Props, type BannerProps, type BentoFeature, type BoardMember, type CardData, CardInfoDialog, type CardInfoDialogProps, type CompanyDetails, type ConsultantProfile, ConsultantShowcase, type ConsultantShowcaseProps, ContentGridBlock, type ContentGridBlockProps, type CryptoOption, type DocumentSectionData, type EmailContact, Faq, type FaqItem, type FaqProps, FeatureScroll, type FeatureScrollProps, type FiatCurrencyOption, Footer, type FooterColumn, type FooterLink, type FooterProps, FundCardDialog, type FundCardDialogProps, GifFeatureCard, type GifFeatureCardProps, Header, type HeaderLink, type HeaderProps, type AppLogo$1 as HeroAppLogo, HeroSection, type HeroSectionProps, type HomeActionBtn, type HomeActionBtn2, type LeaderboardItem, ManagedBoardBlock, type ManagedBoardBlockProps, ManagedContactBlock, type ManagedContactBlockProps, ManagedDocument, type ManagedDocumentProps, ManagedNewsletterSplitBlock, type ManagedNewsletterSplitBlockProps, ManagedNotFoundBlock, type ManagedNotFoundBlockProps, ManagedPricingBlock, type ManagedPricingBlockProps, ManagedProjectsBlock, type ManagedProjectsBlockProps, ManagedToaster, MedicalFeatureStatsBlock, MobileNav, type MobileNavItem, type MobileNavProps, type NavItem, type NetworkOption, type NotificationItem, type NotificationItem2, NumberInput, type NumberInputProps, PageSpinner, type PageSpinnerProps, PinDialerBottomSheet, type PinDialerBottomSheetProps, PipleAuth, type PipleAuthProps, type PlatformFeatureItem, PlatformFeatures, type PlatformFeaturesProps, PortfolioHero, type PortfolioHeroProps, type AppLogo as PricingAppLogo, type PricingFeature, type PricingFeature2, type PricingPlan, type PricingTab, type ProjectItem, type RateCalculationPayload, type ReferralProfile, type RewardItem, type RewardProfile, type ScrollFeature, type SocialContact, type SocialLink, type StatItem, TextInput, type TextInputProps, ThreeDActionButton, type ThreeDActionButtonProps, ThreeDButton, type ThreeDButtonProps, type TierOption, UniversalBuyCryptoPage, type UniversalBuyCryptoPageProps, UniversalCardActionPage, type UniversalCardActionPageProps, UniversalCardPage, type UniversalCardPageProps, type UniversalDepartment, UniversalDepartmentsPage, type UniversalDepartmentsPageProps, UniversalErrorView, type UniversalErrorViewProps, UniversalHome2, type UniversalHome2Props, UniversalHomeView, type UniversalHomeViewProps, type UniversalMember, UniversalMembersPage, type UniversalMembersPageProps, UniversalOrganizationPage, type UniversalOrganizationPageProps, UniversalProfilePage, type UniversalProfilePageProps, UniversalProfileSettings, type UniversalProfileSettingsProps, type UniversalReferralItem, UniversalReferralPage, type UniversalReferralPageProps, UniversalRewardPage, type UniversalRewardPageProps, UniversalSecurityPage, type UniversalSecurityPageProps, UniversalSidebar, type UniversalSidebarProps, type UniversalTransaction, UniversalTransactionPage, type UniversalTransactionPageProps, UniversalVerificationPage, type UniversalVerificationPageProps, type UniversalWallet, UniversalWalletPage, type UniversalWalletPageProps, type VerificationStatus, WaitlistDialog, type WaitlistDialogProps };

package/dist/index.js

@@ -64,8 +64,11 @@ __export(index_exports, {
   UniversalBuyCryptoPage: () => UniversalBuyCryptoPage,
   UniversalCardActionPage: () => UniversalCardActionPage,
   UniversalCardPage: () => UniversalCardPage,
+  UniversalDepartmentsPage: () => UniversalDepartmentsPage,
   UniversalErrorView: () => UniversalErrorView,
+  UniversalHome2: () => UniversalHome2,
   UniversalHomeView: () => UniversalHomeView,
+  UniversalMembersPage: () => UniversalMembersPage,
   UniversalOrganizationPage: () => UniversalOrganizationPage,
   UniversalProfilePage: () => UniversalProfilePage,
   UniversalProfileSettings: () => UniversalProfileSettings,
@@ -382,8 +385,8 @@ var InputSpinner = () => /* @__PURE__ */ import_react6.default.createElement("sv
 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,
@@ -397,12 +400,13 @@ function AuthFormInner({
   const [mode, setMode] = (0, import_react6.useState)("LOGIN");
   const [step, setStep] = (0, import_react6.useState)("INPUT");
   const getInitialSignupStep = () => {
-    return "INVITATION";
+    if (requireNames) return "NAME";
+    if (requireOrganization) return "ORGANIZATION";
+    return "EMAIL_ID";
   };
   const [signupStep, setSignupStep] = (0, import_react6.useState)(getInitialSignupStep());
   const [isSubmitting, setIsSubmitting] = (0, import_react6.useState)(false);
   const [countdown, setCountdown] = (0, import_react6.useState)(0);
-  const [invitationCode, setInvitationCode] = (0, import_react6.useState)("");
   const [emailId, setEmailId] = (0, import_react6.useState)("");
   const [firstName, setFirstName] = (0, import_react6.useState)("");
   const [lastName, setLastName] = (0, import_react6.useState)("");
@@ -458,12 +462,13 @@ function AuthFormInner({
       if (useRecaptcha && captchaContext?.executeRecaptcha) {
         recaptchaToken = await captchaContext.executeRecaptcha("auth_request");
       }
+      const hasOrg = mode === "SIGNUP" && requireOrganization && orgName.trim().length > 0;
       const res = await onAuthRequest({
         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: hasOrg ? orgName.trim() : void 0,
+        accountType: hasOrg ? "ORGANIZATION" : "INDIVIDUAL",
         mode,
         recaptchaToken
       });
@@ -519,11 +524,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") {
@@ -534,7 +535,6 @@ 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 === "EMAIL_ID") return emailId.length < 3 || !agreedToTerms;
@@ -546,21 +546,10 @@ function AuthFormInner({
     setSignupStep(getInitialSignupStep());
   }, className: "text-black transition-colors ml-1" }, "Sign up")) : /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, "Already have an account? ", /* @__PURE__ */ import_react6.default.createElement("button", { type: "button", onClick: () => setMode("LOGIN"), className: "text-black transition-colors ml-1" }, "Log in")))), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Referral Code"), /* @__PURE__ */ import_react6.default.createElement(
-    "input",
-    {
-      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__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Email ID"), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ import_react6.default.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ import_react6.default.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))), /* @__PURE__ */ import_react6.default.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, "Continue"))), step === "OTP" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ import_react6.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-[13px] text-neutral-500" }, userHas2FA ? "Enter the code from your authenticator app." : `Enter the code sent to ${emailId}`)), /* @__PURE__ */ import_react6.default.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
+  } }, mode === "SIGNUP" && signupStep === "NAME" && requireNames && /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "First Name"), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Last Name"), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5 relative" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Organization Name"), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "space-y-6" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ import_react6.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block " }, "Email ID"), /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("div", { className: "flex items-start gap-3 mt-4" }, /* @__PURE__ */ import_react6.default.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__ */ import_react6.default.createElement("label", { htmlFor: "zairus-terms", className: "text-[11px] text-neutral-500 cursor-pointer leading-snug" }, "I agree to ", companyName, "'s ", /* @__PURE__ */ import_react6.default.createElement("a", { href: termsUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Terms of Service"), " and ", /* @__PURE__ */ import_react6.default.createElement("a", { href: privacyUrl, target: "_blank", rel: "noreferrer", className: "text-black underline " }, "Privacy Policy"), "."))), /* @__PURE__ */ import_react6.default.createElement(ThreeDActionButton, { type: "submit", disabled: isContinueDisabled(), isLoading: isSubmitting, className: "w-full mt-10" }, "Continue"))), step === "OTP" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "animate-in fade-in duration-300" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-center mb-10 mt-2" }, /* @__PURE__ */ import_react6.default.createElement("h2", { className: "text-xl text-black mb-2 tracking-tight" }, "Security Check"), /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-[13px] text-neutral-500" }, userHas2FA ? "Enter the code from your authenticator app." : `Enter the code sent to ${emailId}`)), /* @__PURE__ */ import_react6.default.createElement("form", { className: "space-y-8", autoComplete: "off", onSubmit: (e) => {
     e.preventDefault();
     verifyOtpCode(otp.join(""));
   } }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ import_react6.default.createElement(
@@ -4452,6 +4441,374 @@ var UniversalBuyCryptoPage = ({
     );
   }))))));
 };
+
+// src/components/UniversalDepartmentsPage.tsx
+var import_react77 = __toESM(require("react"));
+var import_react78 = require("@hugeicons/react");
+var import_core_free_icons27 = require("@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__ */ import_react77.default.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ import_react77.default.createElement(import_react78.HugeiconsIcon, { icon: import_core_free_icons27.Loading03Icon, size: 32, className: "animate-spin mb-4 text-black" }));
+var UniversalDepartmentsPage = ({
+  headerTitle,
+  headerDescription,
+  departments,
+  isLoading,
+  currentPage,
+  totalPages,
+  onPageChange,
+  onDepartmentClick
+}) => {
+  return /* @__PURE__ */ import_react77.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, /* @__PURE__ */ import_react77.default.createElement("div", null, /* @__PURE__ */ import_react77.default.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, headerTitle), headerDescription && /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-[12px] text-neutral-500" }, headerDescription))), /* @__PURE__ */ import_react77.default.createElement("div", { className: "w-full overflow-hidden" }, isLoading ? /* @__PURE__ */ import_react77.default.createElement(PageSpinner6, null) : /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react77.default.createElement("div", null, departments.length === 0 ? /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-[12px] text-neutral-400 py-6 text-center" }, "No departments available") : departments.map((dept) => /* @__PURE__ */ import_react77.default.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__ */ import_react77.default.createElement("p", { className: "text-[14px] text-black tracking-tight truncate" }, dept.name),
+    /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex items-center gap-3 min-w-0" }, dept.avatars && dept.avatars.length > 0 && /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex items-center -space-x-2 shrink-0" }, dept.avatars.slice(0, 4).map((src, idx) => /* @__PURE__ */ import_react77.default.createElement("div", { key: idx, className: "w-7 h-7 rounded-lg border-2 border-white bg-neutral-100 overflow-hidden shrink-0" }, /* @__PURE__ */ import_react77.default.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__ */ import_react77.default.createElement("span", { className: "text-[11px] text-neutral-500 truncate block" }, formatMembersCount(dept.totalMembers), " ", dept.totalMembers > 4 ? "+" : "") : /* @__PURE__ */ import_react77.default.createElement("span", { className: "text-[11px] text-neutral-400 truncate block" }, "Empty"))
+  ))), /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2" }, /* @__PURE__ */ import_react77.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react77.default.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__ */ import_react77.default.createElement(import_react78.HugeiconsIcon, { icon: import_core_free_icons27.ArrowLeft01Icon, size: 14 })
+  ), /* @__PURE__ */ import_react77.default.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__ */ import_react77.default.createElement(import_react78.HugeiconsIcon, { icon: import_core_free_icons27.ArrowRight01Icon, size: 14 })
+  )))))));
+};
+
+// src/components/UniversalMembersPage.tsx
+var import_react79 = __toESM(require("react"));
+var import_react80 = require("@hugeicons/react");
+var import_react_hot_toast13 = __toESM(require("react-hot-toast"));
+var import_core_free_icons28 = require("@hugeicons/core-free-icons");
+var MemberAvatar = ({ src, status }) => {
+  const [loaded, setLoaded] = (0, import_react79.useState)(false);
+  const [error, setError] = (0, import_react79.useState)(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__ */ import_react79.default.createElement("div", { className: "relative w-10 h-10 shrink-0" }, /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.Loading03Icon, className: "animate-spin text-neutral-400 absolute", size: 14 }), /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.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__ */ import_react79.default.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.Loading03Icon, 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] = (0, import_react79.useState)(null);
+  const [memberToRemove, setMemberToRemove] = (0, import_react79.useState)(null);
+  const [isRemoving, setIsRemoving] = (0, import_react79.useState)(false);
+  const [localSearchQuery, setLocalSearchQuery] = (0, import_react79.useState)(searchQuery);
+  const [isTyping, setIsTyping] = (0, import_react79.useState)(false);
+  const [isStatusModalOpen, setIsStatusModalOpen] = (0, import_react79.useState)(false);
+  const [isRoleModalOpen, setIsRoleModalOpen] = (0, import_react79.useState)(false);
+  const statusDropdownRef = (0, import_react79.useRef)(null);
+  const roleDropdownRef = (0, import_react79.useRef)(null);
+  (0, import_react79.useEffect)(() => {
+    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);
+  }, []);
+  (0, import_react79.useEffect)(() => {
+    setIsTyping(true);
+    const handler = setTimeout(() => {
+      onSearchChange(localSearchQuery);
+      setIsTyping(false);
+    }, 600);
+    return () => clearTimeout(handler);
+  }, [localSearchQuery, onSearchChange]);
+  (0, import_react79.useEffect)(() => {
+    if (searchQuery === "" && localSearchQuery !== "") {
+      setLocalSearchQuery("");
+    }
+  }, [searchQuery]);
+  const handleConfirmRemove = async () => {
+    if (!memberToRemove) return;
+    setIsRemoving(true);
+    try {
+      await onRemoveMember(memberToRemove.id);
+      import_react_hot_toast13.default.success("Member removed successfully.");
+      setExpandedId(null);
+      setMemberToRemove(null);
+    } catch (error) {
+      import_react_hot_toast13.default.error("Failed to remove member.");
+    } finally {
+      setIsRemoving(false);
+    }
+  };
+  const isListLoading = isLoading || isTyping;
+  return /* @__PURE__ */ import_react79.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300" }, /* @__PURE__ */ import_react79.default.createElement(ManagedToaster, null), /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement("div", { className: "flex flex-row flex-nowrap mb-4 items-center justify-between gap-4 w-full" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "relative flex-1 min-w-0 max-w-full" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.Search01Icon, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement("div", { className: "flex items-center gap-3 w-auto pb-0 shrink-0" }, /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.SearchList02Icon, size: 16 })
+  ), /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.ListSettingIcon, size: 16 })
+  ))), /* @__PURE__ */ import_react79.default.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, /* @__PURE__ */ import_react79.default.createElement("div", null, /* @__PURE__ */ import_react79.default.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, headerTitle), headerDescription && /* @__PURE__ */ import_react79.default.createElement("p", { className: "text-[12px] text-neutral-500" }, headerDescription))), /* @__PURE__ */ import_react79.default.createElement("div", { className: "w-full overflow-hidden" }, isListLoading ? /* @__PURE__ */ import_react79.default.createElement(PageSpinner7, null) : /* @__PURE__ */ import_react79.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react79.default.createElement("div", null, members.length === 0 ? /* @__PURE__ */ import_react79.default.createElement("p", { className: "text-[12px] text-neutral-400 py-6 text-center" }, "No members found") : members.map((member) => /* @__PURE__ */ import_react79.default.createElement(import_react79.default.Fragment, { key: member.id }, expandedId === member.id ? /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ import_react79.default.createElement(MemberAvatar, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ import_react79.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "text-[14px] text-black tracking-tight truncate" }, member.name), /* @__PURE__ */ import_react79.default.createElement("span", { className: "text-[12px] text-neutral-500 capitalize" }, member.role.toLowerCase()))), member.departmentName && /* @__PURE__ */ import_react79.default.createElement("div", { className: "pt-3 border-t border-neutral-200" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1" }, "Department"), /* @__PURE__ */ import_react79.default.createElement("span", { className: "text-[13px] text-black truncate block" }, member.departmentName)), /* @__PURE__ */ import_react79.default.createElement("div", { className: "flex gap-3 pt-2" }, !hideAction && /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.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__ */ import_react79.default.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__ */ import_react79.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react79.default.createElement(MemberAvatar, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ import_react79.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5" }, /* @__PURE__ */ import_react79.default.createElement("p", { className: "text-[13px] text-black truncate" }, member.name), /* @__PURE__ */ import_react79.default.createElement("p", { className: "text-[11px] text-neutral-500 capitalize truncate" }, member.role.toLowerCase())))
+  )))), /* @__PURE__ */ import_react79.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2" }, /* @__PURE__ */ import_react79.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ import_react79.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.ArrowLeft01Icon, size: 14 })
+  ), /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.ArrowRight01Icon, size: 14 })
+  )))))), isStatusModalOpen && /* @__PURE__ */ import_react79.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => setIsStatusModalOpen(false) }), /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ import_react79.default.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Status Filter")), /* @__PURE__ */ import_react79.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"].map((option) => /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
+  ))), /* @__PURE__ */ import_react79.default.createElement("div", { className: "w-full flex mt-2" }, /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react79.default.createElement("div", { className: "absolute inset-0 bg-black/40", onClick: () => setIsRoleModalOpen(false) }), /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ import_react79.default.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Role Filter")), /* @__PURE__ */ import_react79.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, ["ALL", "ADMIN", "MANAGER", "MEMBER", "GUEST"].map((option) => /* @__PURE__ */ import_react79.default.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__ */ import_react79.default.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
+  ))), /* @__PURE__ */ import_react79.default.createElement("div", { className: "w-full flex mt-2" }, /* @__PURE__ */ import_react79.default.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
+var import_react81 = __toESM(require("react"));
+var import_navigation6 = require("next/navigation");
+var import_react82 = require("@hugeicons/react");
+var import_core_free_icons29 = require("@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] = (0, import_react81.useState)(false);
+  const [showNotifDialog, setShowNotifDialog] = (0, import_react81.useState)(false);
+  const [selectedNotif, setSelectedNotif] = (0, import_react81.useState)(null);
+  const router = (0, import_navigation6.useRouter)();
+  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__ */ import_react81.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, /* @__PURE__ */ import_react81.default.createElement("div", { className: "flex items-center justify-between w-full pb-4" }, /* @__PURE__ */ import_react81.default.createElement("div", { className: "w-10 h-10 shrink-0 cursor-pointer", onClick: () => router.push("/app/account/me") }, /* @__PURE__ */ import_react81.default.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__ */ import_react81.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-10 bg-neutral-100" }, /* @__PURE__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.Loading03Icon, size: 16, className: "animate-spin text-black" })), /* @__PURE__ */ import_react81.default.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__ */ import_react81.default.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__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.Notification01Icon, size: 20, className: "text-black" }),
+    hasUnreadNotifs && /* @__PURE__ */ import_react81.default.createElement("span", { className: "absolute top-2.5 right-2.5 w-2 h-2 bg-red-500 rounded-full border border-white" })
+  )), /* @__PURE__ */ import_react81.default.createElement("div", { className: "w-full pb-6 flex flex-col gap-4" }, /* @__PURE__ */ import_react81.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ import_react81.default.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__ */ import_react81.default.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ import_react81.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-white leading-tight" }, "Create", /* @__PURE__ */ import_react81.default.createElement("br", null), /* @__PURE__ */ import_react81.default.createElement("span", { className: "text-white/70" }, "Huddle")), /* @__PURE__ */ import_react81.default.createElement("div", { className: "w-8 h-8 rounded-full bg-white/10 flex items-center justify-center" }, /* @__PURE__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.ArrowUpRight01Icon, size: 16, className: "text-white" }))),
+    /* @__PURE__ */ import_react81.default.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__ */ import_react81.default.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__ */ import_react81.default.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ import_react81.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-black leading-tight" }, "Join", /* @__PURE__ */ import_react81.default.createElement("br", null), /* @__PURE__ */ import_react81.default.createElement("span", { className: "text-black/60" }, "Huddle")), /* @__PURE__ */ import_react81.default.createElement("div", { className: "w-8 h-8 rounded-full bg-black/5 flex items-center justify-center" }, /* @__PURE__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.ArrowRight01Icon, size: 16, className: "text-black" }))),
+    /* @__PURE__ */ import_react81.default.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__ */ import_react81.default.createElement("div", { className: "w-full" }, customContent), /* @__PURE__ */ import_react81.default.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ import_react81.default.createElement(
+    UniversalDepartmentsPage,
+    {
+      ...departmentsProps
+    }
+  )), showNotifDialog && /* @__PURE__ */ import_react81.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react81.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ import_react81.default.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__ */ import_react81.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, selectedNotif ? /* @__PURE__ */ import_react81.default.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__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.ArrowLeft01Icon, size: 14 }), " Back") : /* @__PURE__ */ import_react81.default.createElement("h3", { className: "text-[15px] text-black tracking-tight flex items-center gap-2" }, "Notifications", isNotifsLoading && /* @__PURE__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.Loading03Icon, size: 14, className: "animate-spin text-neutral-400" })), /* @__PURE__ */ import_react81.default.createElement("button", { onClick: () => setShowNotifDialog(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react81.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2" }, selectedNotif ? /* @__PURE__ */ import_react81.default.createElement("div", { className: "p-4 text-left" }, /* @__PURE__ */ import_react81.default.createElement("h4", { className: "text-[14px] text-black mb-1" }, selectedNotif.title), /* @__PURE__ */ import_react81.default.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest mb-4 block" }, formatNotifDate(selectedNotif.createdAt)), /* @__PURE__ */ import_react81.default.createElement("p", { className: "text-[12px] text-neutral-600 leading-relaxed whitespace-pre-wrap" }, selectedNotif.message)) : /* @__PURE__ */ import_react81.default.createElement("div", { className: "flex flex-col divide-y divide-neutral-50/50" }, notifications?.length === 0 && !isNotifsLoading ? /* @__PURE__ */ import_react81.default.createElement("div", { className: "p-8 text-center text-xs text-neutral-400" }, "You have no notifications.") : notifications?.map((notif) => /* @__PURE__ */ import_react81.default.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__ */ import_react81.default.createElement("div", { className: "mt-1.5 shrink-0" }, !notif.isRead ? /* @__PURE__ */ import_react81.default.createElement("div", { className: "w-1.5 h-1.5 bg-red-500 rounded-full" }) : /* @__PURE__ */ import_react81.default.createElement("div", { className: "w-1.5 h-1.5 bg-transparent" })),
+    /* @__PURE__ */ import_react81.default.createElement("div", { className: "flex-1 min-w-0 text-left" }, /* @__PURE__ */ import_react81.default.createElement("h5", { className: `text-[12px] truncate ${notif.isRead ? "text-neutral-500" : "text-black"}` }, notif.title), /* @__PURE__ */ import_react81.default.createElement("p", { className: "text-[11px] text-neutral-400 truncate mt-0.5" }, notif.message), /* @__PURE__ */ import_react81.default.createElement("span", { className: "text-[9px] text-neutral-400 tracking-widest mt-2 block" }, formatNotifDate(notif.createdAt)))
+  )))), !selectedNotif && /* @__PURE__ */ import_react81.default.createElement("div", { className: "p-4 flex items-center justify-between shrink-0" }, /* @__PURE__ */ import_react81.default.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest" }, "Page ", notificationPage, " of ", notificationTotalPages === 0 ? 1 : notificationTotalPages), /* @__PURE__ */ import_react81.default.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ import_react81.default.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__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.ArrowLeft01Icon, size: 12 })
+  ), /* @__PURE__ */ import_react81.default.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__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.ArrowRight01Icon, size: 12 })
+  ))))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppBento2,
@@ -4487,8 +4844,11 @@ var UniversalBuyCryptoPage = ({
   UniversalBuyCryptoPage,
   UniversalCardActionPage,
   UniversalCardPage,
+  UniversalDepartmentsPage,
   UniversalErrorView,
+  UniversalHome2,
   UniversalHomeView,
+  UniversalMembersPage,
   UniversalOrganizationPage,
   UniversalProfilePage,
   UniversalProfileSettings,

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,12 +317,13 @@ 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("");
@@ -378,12 +379,13 @@ function AuthFormInner({
       if (useRecaptcha && captchaContext?.executeRecaptcha) {
         recaptchaToken = await captchaContext.executeRecaptcha("auth_request");
       }
+      const hasOrg = mode === "SIGNUP" && requireOrganization && orgName.trim().length > 0;
       const res = await onAuthRequest({
         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: hasOrg ? orgName.trim() : void 0,
+        accountType: hasOrg ? "ORGANIZATION" : "INDIVIDUAL",
         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,7 +452,6 @@ 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 === "EMAIL_ID") return emailId.length < 3 || !agreedToTerms;
@@ -466,21 +463,10 @@ 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",
-    {
-      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) => {
+  } }, 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) => {
     e.preventDefault();
     verifyOtpCode(otp.join(""));
   } }, /* @__PURE__ */ React5.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ React5.createElement(
@@ -4468,6 +4454,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 +4870,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.80",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",