@retinalabsllc/zairusjs 16.0.60 → 16.0.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +78 -2
- package/dist/index.d.ts +78 -2
- package/dist/index.js +391 -31
- package/dist/index.mjs +402 -31
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -64,8 +64,11 @@ __export(index_exports, {
|
|
|
64
64
|
UniversalBuyCryptoPage: () => UniversalBuyCryptoPage,
|
|
65
65
|
UniversalCardActionPage: () => UniversalCardActionPage,
|
|
66
66
|
UniversalCardPage: () => UniversalCardPage,
|
|
67
|
+
UniversalDepartmentsPage: () => UniversalDepartmentsPage,
|
|
67
68
|
UniversalErrorView: () => UniversalErrorView,
|
|
69
|
+
UniversalHome2: () => UniversalHome2,
|
|
68
70
|
UniversalHomeView: () => UniversalHomeView,
|
|
71
|
+
UniversalMembersPage: () => UniversalMembersPage,
|
|
69
72
|
UniversalOrganizationPage: () => UniversalOrganizationPage,
|
|
70
73
|
UniversalProfilePage: () => UniversalProfilePage,
|
|
71
74
|
UniversalProfileSettings: () => UniversalProfileSettings,
|
|
@@ -382,8 +385,8 @@ var InputSpinner = () => /* @__PURE__ */ import_react6.default.createElement("sv
|
|
|
382
385
|
function AuthFormInner({
|
|
383
386
|
companyName,
|
|
384
387
|
workspaceLabel = "Workspace",
|
|
385
|
-
termsUrl = "
|
|
386
|
-
privacyUrl = "
|
|
388
|
+
termsUrl = "",
|
|
389
|
+
privacyUrl = "",
|
|
387
390
|
requireNames = true,
|
|
388
391
|
requireOrganization = true,
|
|
389
392
|
useRecaptcha = false,
|
|
@@ -397,12 +400,13 @@ function AuthFormInner({
|
|
|
397
400
|
const [mode, setMode] = (0, import_react6.useState)("LOGIN");
|
|
398
401
|
const [step, setStep] = (0, import_react6.useState)("INPUT");
|
|
399
402
|
const getInitialSignupStep = () => {
|
|
400
|
-
return "
|
|
403
|
+
if (requireNames) return "NAME";
|
|
404
|
+
if (requireOrganization) return "ORGANIZATION";
|
|
405
|
+
return "EMAIL_ID";
|
|
401
406
|
};
|
|
402
407
|
const [signupStep, setSignupStep] = (0, import_react6.useState)(getInitialSignupStep());
|
|
403
408
|
const [isSubmitting, setIsSubmitting] = (0, import_react6.useState)(false);
|
|
404
409
|
const [countdown, setCountdown] = (0, import_react6.useState)(0);
|
|
405
|
-
const [invitationCode, setInvitationCode] = (0, import_react6.useState)("");
|
|
406
410
|
const [emailId, setEmailId] = (0, import_react6.useState)("");
|
|
407
411
|
const [firstName, setFirstName] = (0, import_react6.useState)("");
|
|
408
412
|
const [lastName, setLastName] = (0, import_react6.useState)("");
|
|
@@ -458,12 +462,13 @@ function AuthFormInner({
|
|
|
458
462
|
if (useRecaptcha && captchaContext?.executeRecaptcha) {
|
|
459
463
|
recaptchaToken = await captchaContext.executeRecaptcha("auth_request");
|
|
460
464
|
}
|
|
465
|
+
const hasOrg = mode === "SIGNUP" && requireOrganization && orgName.trim().length > 0;
|
|
461
466
|
const res = await onAuthRequest({
|
|
462
467
|
email: emailId,
|
|
463
468
|
firstName: mode === "SIGNUP" && requireNames ? firstName : void 0,
|
|
464
469
|
lastName: mode === "SIGNUP" && requireNames ? lastName : void 0,
|
|
465
|
-
organizationName:
|
|
466
|
-
|
|
470
|
+
organizationName: hasOrg ? orgName.trim() : void 0,
|
|
471
|
+
accountType: hasOrg ? "ORGANIZATION" : "INDIVIDUAL",
|
|
467
472
|
mode,
|
|
468
473
|
recaptchaToken
|
|
469
474
|
});
|
|
@@ -519,11 +524,7 @@ function AuthFormInner({
|
|
|
519
524
|
}
|
|
520
525
|
};
|
|
521
526
|
const handleNextSignupStep = () => {
|
|
522
|
-
if (signupStep === "
|
|
523
|
-
if (requireNames) setSignupStep("NAME");
|
|
524
|
-
else if (requireOrganization) setSignupStep("ORGANIZATION");
|
|
525
|
-
else setSignupStep("EMAIL_ID");
|
|
526
|
-
} else if (signupStep === "NAME") {
|
|
527
|
+
if (signupStep === "NAME") {
|
|
527
528
|
if (requireOrganization) setSignupStep("ORGANIZATION");
|
|
528
529
|
else setSignupStep("EMAIL_ID");
|
|
529
530
|
} else if (signupStep === "ORGANIZATION") {
|
|
@@ -534,7 +535,6 @@ function AuthFormInner({
|
|
|
534
535
|
if (isSubmitting) return true;
|
|
535
536
|
if (mode === "LOGIN") return emailId.length < 3;
|
|
536
537
|
if (mode === "SIGNUP") {
|
|
537
|
-
if (signupStep === "INVITATION") return invitationCode.trim().length > 0 && invitationCode.trim().length < 3;
|
|
538
538
|
if (signupStep === "NAME") return firstName.trim() === "" || lastName.trim() === "";
|
|
539
539
|
if (signupStep === "ORGANIZATION") return orgName.trim().length < 3;
|
|
540
540
|
if (signupStep === "EMAIL_ID") return emailId.length < 3 || !agreedToTerms;
|
|
@@ -546,21 +546,10 @@ function AuthFormInner({
|
|
|
546
546
|
setSignupStep(getInitialSignupStep());
|
|
547
547
|
}, 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) => {
|
|
548
548
|
e.preventDefault();
|
|
549
|
-
if (mode === "SIGNUP" && signupStep === "
|
|
550
|
-
else if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
|
|
549
|
+
if (mode === "SIGNUP" && signupStep === "NAME") handleNextSignupStep();
|
|
551
550
|
else if (mode === "SIGNUP" && signupStep === "ORGANIZATION") handleNextSignupStep();
|
|
552
551
|
else handleAuthRequestSubmit();
|
|
553
|
-
} }, mode === "SIGNUP" && signupStep === "
|
|
554
|
-
"input",
|
|
555
|
-
{
|
|
556
|
-
type: "text",
|
|
557
|
-
value: invitationCode,
|
|
558
|
-
onChange: (e) => setInvitationCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "")),
|
|
559
|
-
autoFocus: true,
|
|
560
|
-
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",
|
|
561
|
-
placeholder: "Referral Code (Optional)"
|
|
562
|
-
}
|
|
563
|
-
))), 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) => {
|
|
552
|
+
} }, 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) => {
|
|
564
553
|
e.preventDefault();
|
|
565
554
|
verifyOtpCode(otp.join(""));
|
|
566
555
|
} }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ import_react6.default.createElement(
|
|
@@ -612,7 +601,7 @@ var Footer = ({
|
|
|
612
601
|
const toggleColumn = (idx) => {
|
|
613
602
|
setOpenCol(openCol === idx ? null : idx);
|
|
614
603
|
};
|
|
615
|
-
return /* @__PURE__ */ import_react7.default.createElement("div", { className: "" }, topSection && topSection, /* @__PURE__ */ import_react7.default.createElement("footer", { className: "relative px-6 overflow-hidden flex flex-col" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative w-full max-w-7xl mx-auto z-20 flex flex-col" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative py-12 md:py-16" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start gap-12 lg:gap-16 mb-12 text-left" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full lg:max-w-sm flex flex-col items-start justify-between shrink-0" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-4 mb-4" }, /* @__PURE__ */ import_react7.default.createElement("img", { src: "https://
|
|
604
|
+
return /* @__PURE__ */ import_react7.default.createElement("div", { className: "" }, topSection && topSection, /* @__PURE__ */ import_react7.default.createElement("footer", { className: "relative px-6 overflow-hidden flex flex-col" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative w-full max-w-7xl mx-auto z-20 flex flex-col" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative py-12 md:py-16" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col lg:flex-row justify-between items-start gap-12 lg:gap-16 mb-12 text-left" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full lg:max-w-sm flex flex-col items-start justify-between shrink-0" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-4 mb-4" }, /* @__PURE__ */ import_react7.default.createElement("img", { src: "https://storage.googleapis.com/retina-cloud-v2/assets/images/ndpr.avif", alt: "NDPR", className: "w-28 h-auto object-contain filter grayscale opacity-80" }), /* @__PURE__ */ import_react7.default.createElement("img", { src: "https://storage.googleapis.com/retina-cloud-v2/assets/images/gdpr.avif", alt: "GDPR", className: "w-12 h-12 object-contain filter grayscale opacity-80" })), /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-[11px] text-neutral-600 leading-relaxed pr-4" }, description))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full lg:flex-1 lg:max-w-2xl" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "hidden md:grid grid-cols-2 gap-x-16 lg:gap-x-24 gap-y-12" }, columns.map((col, idx) => /* @__PURE__ */ import_react7.default.createElement("div", { key: idx, className: "flex flex-col" }, /* @__PURE__ */ import_react7.default.createElement("h4", { className: "text-[11px] tracking-[0.2em] text-black mb-6 " }, col.title), /* @__PURE__ */ import_react7.default.createElement("ul", { className: "space-y-4 text-[13px] text-neutral-500" }, col.links.map((link, lIdx) => /* @__PURE__ */ import_react7.default.createElement("li", { key: lIdx }, link.isExternal ? /* @__PURE__ */ import_react7.default.createElement("a", { href: link.href, target: "_blank", rel: "noopener noreferrer", className: "hover:text-black transition-colors block truncate" }, link.label) : /* @__PURE__ */ import_react7.default.createElement(import_link3.default, { href: link.href, className: "hover:text-black transition-colors block truncate" }, link.label))))))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col md:hidden w-full border-t border-neutral-200 mt-4" }, columns.map((col, idx) => {
|
|
616
605
|
const isOpen = openCol === idx;
|
|
617
606
|
return /* @__PURE__ */ import_react7.default.createElement("div", { key: idx, className: "border-b border-neutral-200" }, /* @__PURE__ */ import_react7.default.createElement(
|
|
618
607
|
"button",
|
|
@@ -1558,7 +1547,7 @@ var UniversalHomeView = ({
|
|
|
1558
1547
|
/* @__PURE__ */ import_react25.default.createElement(
|
|
1559
1548
|
"img",
|
|
1560
1549
|
{
|
|
1561
|
-
src: "https://
|
|
1550
|
+
src: "https://storage.googleapis.com/retina-cloud-v2/assets/images/save_box.avif",
|
|
1562
1551
|
alt: "Buy Crypto",
|
|
1563
1552
|
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"
|
|
1564
1553
|
}
|
|
@@ -1573,7 +1562,7 @@ var UniversalHomeView = ({
|
|
|
1573
1562
|
/* @__PURE__ */ import_react25.default.createElement(
|
|
1574
1563
|
"img",
|
|
1575
1564
|
{
|
|
1576
|
-
src: "https://
|
|
1565
|
+
src: "https://storage.googleapis.com/retina-cloud-v2/assets/images/gift_box.avif",
|
|
1577
1566
|
alt: "Referral",
|
|
1578
1567
|
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"
|
|
1579
1568
|
}
|
|
@@ -2873,9 +2862,9 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
2873
2862
|
}
|
|
2874
2863
|
};
|
|
2875
2864
|
const bgImages = [
|
|
2876
|
-
"https://
|
|
2877
|
-
"https://
|
|
2878
|
-
"https://
|
|
2865
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_7.avif",
|
|
2866
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_6.avif",
|
|
2867
|
+
"https://storage.googleapis.com/retina-cloud-v2/assets/images/bg_1.avif"
|
|
2879
2868
|
];
|
|
2880
2869
|
return /* @__PURE__ */ import_react43.default.createElement("section", { className: "py-24 w-full flex justify-center relative z-10 overflow-hidden" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "max-w-6xl w-full flex flex-col px-4 md:px-8" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "relative z-10 text-left" }, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 block mb-4" }, tagline), /* @__PURE__ */ import_react43.default.createElement("h2", { className: " text-3xl tracking-tight text-black leading-[1.05]" }, headline)), /* @__PURE__ */ import_react43.default.createElement("div", { className: "hidden md:flex items-center gap-3" }, /* @__PURE__ */ import_react43.default.createElement(
|
|
2881
2870
|
"button",
|
|
@@ -4452,6 +4441,374 @@ var UniversalBuyCryptoPage = ({
|
|
|
4452
4441
|
);
|
|
4453
4442
|
}))))));
|
|
4454
4443
|
};
|
|
4444
|
+
|
|
4445
|
+
// src/components/UniversalDepartmentsPage.tsx
|
|
4446
|
+
var import_react77 = __toESM(require("react"));
|
|
4447
|
+
var import_react78 = require("@hugeicons/react");
|
|
4448
|
+
var import_core_free_icons27 = require("@hugeicons/core-free-icons");
|
|
4449
|
+
var formatMembersCount = (num) => {
|
|
4450
|
+
if (num >= 1e6) return (num / 1e6).toFixed(1) + "m";
|
|
4451
|
+
if (num >= 1e3) return (num / 1e3).toFixed(1) + "k";
|
|
4452
|
+
return num.toString();
|
|
4453
|
+
};
|
|
4454
|
+
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" }));
|
|
4455
|
+
var UniversalDepartmentsPage = ({
|
|
4456
|
+
headerTitle,
|
|
4457
|
+
headerDescription,
|
|
4458
|
+
departments,
|
|
4459
|
+
isLoading,
|
|
4460
|
+
currentPage,
|
|
4461
|
+
totalPages,
|
|
4462
|
+
onPageChange,
|
|
4463
|
+
onDepartmentClick
|
|
4464
|
+
}) => {
|
|
4465
|
+
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(
|
|
4466
|
+
"div",
|
|
4467
|
+
{
|
|
4468
|
+
key: dept.id,
|
|
4469
|
+
onClick: () => onDepartmentClick(dept.id),
|
|
4470
|
+
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"
|
|
4471
|
+
},
|
|
4472
|
+
/* @__PURE__ */ import_react77.default.createElement("p", { className: "text-[14px] text-black tracking-tight truncate" }, dept.name),
|
|
4473
|
+
/* @__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(
|
|
4474
|
+
"img",
|
|
4475
|
+
{
|
|
4476
|
+
src: src || "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif",
|
|
4477
|
+
alt: "Member",
|
|
4478
|
+
className: "w-full h-full object-cover"
|
|
4479
|
+
}
|
|
4480
|
+
)))), 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"))
|
|
4481
|
+
))), /* @__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(
|
|
4482
|
+
"button",
|
|
4483
|
+
{
|
|
4484
|
+
onClick: () => onPageChange(currentPage - 1),
|
|
4485
|
+
disabled: currentPage <= 1 || isLoading,
|
|
4486
|
+
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"
|
|
4487
|
+
},
|
|
4488
|
+
/* @__PURE__ */ import_react77.default.createElement(import_react78.HugeiconsIcon, { icon: import_core_free_icons27.ArrowLeft01Icon, size: 14 })
|
|
4489
|
+
), /* @__PURE__ */ import_react77.default.createElement(
|
|
4490
|
+
"button",
|
|
4491
|
+
{
|
|
4492
|
+
onClick: () => onPageChange(currentPage + 1),
|
|
4493
|
+
disabled: currentPage >= totalPages || isLoading || totalPages === 0,
|
|
4494
|
+
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"
|
|
4495
|
+
},
|
|
4496
|
+
/* @__PURE__ */ import_react77.default.createElement(import_react78.HugeiconsIcon, { icon: import_core_free_icons27.ArrowRight01Icon, size: 14 })
|
|
4497
|
+
)))))));
|
|
4498
|
+
};
|
|
4499
|
+
|
|
4500
|
+
// src/components/UniversalMembersPage.tsx
|
|
4501
|
+
var import_react79 = __toESM(require("react"));
|
|
4502
|
+
var import_react80 = require("@hugeicons/react");
|
|
4503
|
+
var import_react_hot_toast13 = __toESM(require("react-hot-toast"));
|
|
4504
|
+
var import_core_free_icons28 = require("@hugeicons/core-free-icons");
|
|
4505
|
+
var MemberAvatar = ({ src, status }) => {
|
|
4506
|
+
const [loaded, setLoaded] = (0, import_react79.useState)(false);
|
|
4507
|
+
const [error, setError] = (0, import_react79.useState)(false);
|
|
4508
|
+
const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
|
|
4509
|
+
const finalSrc = error || !src ? defaultAvatar : src;
|
|
4510
|
+
const getStatusColor = () => {
|
|
4511
|
+
switch (status?.toUpperCase()) {
|
|
4512
|
+
case "ACTIVE":
|
|
4513
|
+
return "bg-emerald-500";
|
|
4514
|
+
case "BUSY":
|
|
4515
|
+
return "bg-amber-500";
|
|
4516
|
+
case "OFFLINE":
|
|
4517
|
+
return "bg-rose-500";
|
|
4518
|
+
case "AWAY":
|
|
4519
|
+
return "bg-neutral-400";
|
|
4520
|
+
default:
|
|
4521
|
+
return "bg-neutral-200";
|
|
4522
|
+
}
|
|
4523
|
+
};
|
|
4524
|
+
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(
|
|
4525
|
+
"img",
|
|
4526
|
+
{
|
|
4527
|
+
src: finalSrc,
|
|
4528
|
+
alt: "Member Avatar",
|
|
4529
|
+
className: `w-full h-full object-cover transition-opacity duration-300 ${loaded || error ? "opacity-100" : "opacity-0"}`,
|
|
4530
|
+
onLoad: () => setLoaded(true),
|
|
4531
|
+
onError: () => setError(true)
|
|
4532
|
+
}
|
|
4533
|
+
)), /* @__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()}` }));
|
|
4534
|
+
};
|
|
4535
|
+
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" }));
|
|
4536
|
+
var UniversalMembersPage = ({
|
|
4537
|
+
headerTitle,
|
|
4538
|
+
headerDescription,
|
|
4539
|
+
members,
|
|
4540
|
+
isLoading,
|
|
4541
|
+
currentPage,
|
|
4542
|
+
totalPages,
|
|
4543
|
+
onPageChange,
|
|
4544
|
+
searchQuery,
|
|
4545
|
+
onSearchChange,
|
|
4546
|
+
activeStatusFilter,
|
|
4547
|
+
onStatusFilterChange,
|
|
4548
|
+
activeRoleFilter,
|
|
4549
|
+
onRoleFilterChange,
|
|
4550
|
+
actionButtonText,
|
|
4551
|
+
hideAction = false,
|
|
4552
|
+
onRemoveMember
|
|
4553
|
+
}) => {
|
|
4554
|
+
const [expandedId, setExpandedId] = (0, import_react79.useState)(null);
|
|
4555
|
+
const [memberToRemove, setMemberToRemove] = (0, import_react79.useState)(null);
|
|
4556
|
+
const [isRemoving, setIsRemoving] = (0, import_react79.useState)(false);
|
|
4557
|
+
const [localSearchQuery, setLocalSearchQuery] = (0, import_react79.useState)(searchQuery);
|
|
4558
|
+
const [isTyping, setIsTyping] = (0, import_react79.useState)(false);
|
|
4559
|
+
const [isStatusModalOpen, setIsStatusModalOpen] = (0, import_react79.useState)(false);
|
|
4560
|
+
const [isRoleModalOpen, setIsRoleModalOpen] = (0, import_react79.useState)(false);
|
|
4561
|
+
const statusDropdownRef = (0, import_react79.useRef)(null);
|
|
4562
|
+
const roleDropdownRef = (0, import_react79.useRef)(null);
|
|
4563
|
+
(0, import_react79.useEffect)(() => {
|
|
4564
|
+
function handleClickOutside(event) {
|
|
4565
|
+
if (statusDropdownRef.current && !statusDropdownRef.current.contains(event.target)) {
|
|
4566
|
+
setIsStatusModalOpen(false);
|
|
4567
|
+
}
|
|
4568
|
+
if (roleDropdownRef.current && !roleDropdownRef.current.contains(event.target)) {
|
|
4569
|
+
setIsRoleModalOpen(false);
|
|
4570
|
+
}
|
|
4571
|
+
}
|
|
4572
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
4573
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
4574
|
+
}, []);
|
|
4575
|
+
(0, import_react79.useEffect)(() => {
|
|
4576
|
+
setIsTyping(true);
|
|
4577
|
+
const handler = setTimeout(() => {
|
|
4578
|
+
onSearchChange(localSearchQuery);
|
|
4579
|
+
setIsTyping(false);
|
|
4580
|
+
}, 600);
|
|
4581
|
+
return () => clearTimeout(handler);
|
|
4582
|
+
}, [localSearchQuery, onSearchChange]);
|
|
4583
|
+
(0, import_react79.useEffect)(() => {
|
|
4584
|
+
if (searchQuery === "" && localSearchQuery !== "") {
|
|
4585
|
+
setLocalSearchQuery("");
|
|
4586
|
+
}
|
|
4587
|
+
}, [searchQuery]);
|
|
4588
|
+
const handleConfirmRemove = async () => {
|
|
4589
|
+
if (!memberToRemove) return;
|
|
4590
|
+
setIsRemoving(true);
|
|
4591
|
+
try {
|
|
4592
|
+
await onRemoveMember(memberToRemove.id);
|
|
4593
|
+
import_react_hot_toast13.default.success("Member removed successfully.");
|
|
4594
|
+
setExpandedId(null);
|
|
4595
|
+
setMemberToRemove(null);
|
|
4596
|
+
} catch (error) {
|
|
4597
|
+
import_react_hot_toast13.default.error("Failed to remove member.");
|
|
4598
|
+
} finally {
|
|
4599
|
+
setIsRemoving(false);
|
|
4600
|
+
}
|
|
4601
|
+
};
|
|
4602
|
+
const isListLoading = isLoading || isTyping;
|
|
4603
|
+
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(
|
|
4604
|
+
ConfirmationDialog,
|
|
4605
|
+
{
|
|
4606
|
+
isOpen: !!memberToRemove,
|
|
4607
|
+
title: "Remove Member",
|
|
4608
|
+
message: `Are you sure you want to remove ${memberToRemove?.name}? This action cannot be undone.`,
|
|
4609
|
+
confirmText: "Remove",
|
|
4610
|
+
cancelText: "Cancel",
|
|
4611
|
+
isProcessing: isRemoving,
|
|
4612
|
+
isDestructive: true,
|
|
4613
|
+
onClose: () => setMemberToRemove(null),
|
|
4614
|
+
onConfirm: handleConfirmRemove
|
|
4615
|
+
}
|
|
4616
|
+
), /* @__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(
|
|
4617
|
+
"input",
|
|
4618
|
+
{
|
|
4619
|
+
type: "text",
|
|
4620
|
+
placeholder: "Search members...",
|
|
4621
|
+
value: localSearchQuery,
|
|
4622
|
+
onChange: (e) => setLocalSearchQuery(e.target.value),
|
|
4623
|
+
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"
|
|
4624
|
+
}
|
|
4625
|
+
)), /* @__PURE__ */ import_react79.default.createElement("div", { className: "flex items-center gap-3 w-auto pb-0 shrink-0" }, /* @__PURE__ */ import_react79.default.createElement(
|
|
4626
|
+
"button",
|
|
4627
|
+
{
|
|
4628
|
+
onClick: () => setIsStatusModalOpen(true),
|
|
4629
|
+
className: "flex items-center justify-center bg-white w-9 h-9 rounded-full text-neutral-500 hover:text-black transition-colors outline-none"
|
|
4630
|
+
},
|
|
4631
|
+
/* @__PURE__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.SearchList02Icon, size: 16 })
|
|
4632
|
+
), /* @__PURE__ */ import_react79.default.createElement(
|
|
4633
|
+
"button",
|
|
4634
|
+
{
|
|
4635
|
+
onClick: () => setIsRoleModalOpen(true),
|
|
4636
|
+
className: "flex items-center justify-center bg-white w-9 h-9 rounded-full text-neutral-500 hover:text-black transition-colors outline-none"
|
|
4637
|
+
},
|
|
4638
|
+
/* @__PURE__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.ListSettingIcon, size: 16 })
|
|
4639
|
+
))), /* @__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(
|
|
4640
|
+
"button",
|
|
4641
|
+
{
|
|
4642
|
+
onClick: () => setMemberToRemove(member),
|
|
4643
|
+
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"
|
|
4644
|
+
},
|
|
4645
|
+
actionButtonText
|
|
4646
|
+
), /* @__PURE__ */ import_react79.default.createElement(
|
|
4647
|
+
"button",
|
|
4648
|
+
{
|
|
4649
|
+
onClick: () => setExpandedId(null),
|
|
4650
|
+
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"
|
|
4651
|
+
},
|
|
4652
|
+
"Close"
|
|
4653
|
+
))) : /* @__PURE__ */ import_react79.default.createElement(
|
|
4654
|
+
"div",
|
|
4655
|
+
{
|
|
4656
|
+
onClick: () => setExpandedId(member.id),
|
|
4657
|
+
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"
|
|
4658
|
+
},
|
|
4659
|
+
/* @__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())))
|
|
4660
|
+
)))), /* @__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(
|
|
4661
|
+
"button",
|
|
4662
|
+
{
|
|
4663
|
+
onClick: () => onPageChange(currentPage - 1),
|
|
4664
|
+
disabled: currentPage <= 1 || isListLoading,
|
|
4665
|
+
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"
|
|
4666
|
+
},
|
|
4667
|
+
/* @__PURE__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.ArrowLeft01Icon, size: 14 })
|
|
4668
|
+
), /* @__PURE__ */ import_react79.default.createElement(
|
|
4669
|
+
"button",
|
|
4670
|
+
{
|
|
4671
|
+
onClick: () => onPageChange(currentPage + 1),
|
|
4672
|
+
disabled: currentPage >= totalPages || isListLoading || totalPages === 0,
|
|
4673
|
+
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"
|
|
4674
|
+
},
|
|
4675
|
+
/* @__PURE__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.ArrowRight01Icon, size: 14 })
|
|
4676
|
+
)))))), 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(
|
|
4677
|
+
"button",
|
|
4678
|
+
{
|
|
4679
|
+
key: option,
|
|
4680
|
+
onClick: () => {
|
|
4681
|
+
onStatusFilterChange(option);
|
|
4682
|
+
setIsStatusModalOpen(false);
|
|
4683
|
+
},
|
|
4684
|
+
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"}`
|
|
4685
|
+
},
|
|
4686
|
+
/* @__PURE__ */ import_react79.default.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
|
|
4687
|
+
))), /* @__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(
|
|
4688
|
+
"button",
|
|
4689
|
+
{
|
|
4690
|
+
key: option,
|
|
4691
|
+
onClick: () => {
|
|
4692
|
+
onRoleFilterChange(option);
|
|
4693
|
+
setIsRoleModalOpen(false);
|
|
4694
|
+
},
|
|
4695
|
+
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"}`
|
|
4696
|
+
},
|
|
4697
|
+
/* @__PURE__ */ import_react79.default.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
|
|
4698
|
+
))), /* @__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")))));
|
|
4699
|
+
};
|
|
4700
|
+
|
|
4701
|
+
// src/components/UniversalHome2.tsx
|
|
4702
|
+
var import_react81 = __toESM(require("react"));
|
|
4703
|
+
var import_navigation6 = require("next/navigation");
|
|
4704
|
+
var import_react82 = require("@hugeicons/react");
|
|
4705
|
+
var import_core_free_icons29 = require("@hugeicons/core-free-icons");
|
|
4706
|
+
var UniversalHome2 = ({
|
|
4707
|
+
fullName = "",
|
|
4708
|
+
avatarSrc,
|
|
4709
|
+
createHuddleAction,
|
|
4710
|
+
joinHuddleAction,
|
|
4711
|
+
notifications = [],
|
|
4712
|
+
notificationPage = 1,
|
|
4713
|
+
notificationTotalPages = 1,
|
|
4714
|
+
isNotifsLoading = false,
|
|
4715
|
+
onNotificationPageChange,
|
|
4716
|
+
onNotificationClick,
|
|
4717
|
+
formatNotifDate,
|
|
4718
|
+
customContent,
|
|
4719
|
+
departmentsProps
|
|
4720
|
+
}) => {
|
|
4721
|
+
const [isAvatarLoaded, setIsAvatarLoaded] = (0, import_react81.useState)(false);
|
|
4722
|
+
const [showNotifDialog, setShowNotifDialog] = (0, import_react81.useState)(false);
|
|
4723
|
+
const [selectedNotif, setSelectedNotif] = (0, import_react81.useState)(null);
|
|
4724
|
+
const router = (0, import_navigation6.useRouter)();
|
|
4725
|
+
const fallbackAvatarUrl = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
|
|
4726
|
+
const finalAvatarSrc = avatarSrc || fallbackAvatarUrl;
|
|
4727
|
+
const hasUnreadNotifs = notifications.some((n) => !n.isRead);
|
|
4728
|
+
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(
|
|
4729
|
+
"img",
|
|
4730
|
+
{
|
|
4731
|
+
src: finalAvatarSrc,
|
|
4732
|
+
alt: "User Avatar",
|
|
4733
|
+
onLoad: () => setIsAvatarLoaded(true),
|
|
4734
|
+
className: `w-full h-full object-cover transition-opacity duration-300 ${isAvatarLoaded ? "opacity-100" : "opacity-0"}`
|
|
4735
|
+
}
|
|
4736
|
+
))), /* @__PURE__ */ import_react81.default.createElement(
|
|
4737
|
+
"button",
|
|
4738
|
+
{
|
|
4739
|
+
onClick: () => {
|
|
4740
|
+
setShowNotifDialog(true);
|
|
4741
|
+
setSelectedNotif(null);
|
|
4742
|
+
},
|
|
4743
|
+
className: "relative w-10 h-10 flex items-center justify-center rounded-full bg-white outline-none hover:bg-neutral-50 transition-colors"
|
|
4744
|
+
},
|
|
4745
|
+
/* @__PURE__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.Notification01Icon, size: 20, className: "text-black" }),
|
|
4746
|
+
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" })
|
|
4747
|
+
)), /* @__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(
|
|
4748
|
+
"div",
|
|
4749
|
+
{
|
|
4750
|
+
onClick: createHuddleAction?.onClick,
|
|
4751
|
+
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"
|
|
4752
|
+
},
|
|
4753
|
+
/* @__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" }))),
|
|
4754
|
+
/* @__PURE__ */ import_react81.default.createElement(
|
|
4755
|
+
"img",
|
|
4756
|
+
{
|
|
4757
|
+
src: "https://storage.googleapis.com/retina-cloud-v2/assets/images/cal_a.avif",
|
|
4758
|
+
alt: "Create Huddle",
|
|
4759
|
+
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"
|
|
4760
|
+
}
|
|
4761
|
+
)
|
|
4762
|
+
), /* @__PURE__ */ import_react81.default.createElement(
|
|
4763
|
+
"div",
|
|
4764
|
+
{
|
|
4765
|
+
onClick: joinHuddleAction?.onClick,
|
|
4766
|
+
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"
|
|
4767
|
+
},
|
|
4768
|
+
/* @__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" }))),
|
|
4769
|
+
/* @__PURE__ */ import_react81.default.createElement(
|
|
4770
|
+
"img",
|
|
4771
|
+
{
|
|
4772
|
+
src: "https://storage.googleapis.com/retina-cloud-v2/assets/images/cam_a.avif",
|
|
4773
|
+
alt: "Join Huddle",
|
|
4774
|
+
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"
|
|
4775
|
+
}
|
|
4776
|
+
)
|
|
4777
|
+
))), 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(
|
|
4778
|
+
UniversalDepartmentsPage,
|
|
4779
|
+
{
|
|
4780
|
+
...departmentsProps
|
|
4781
|
+
}
|
|
4782
|
+
)), 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(
|
|
4783
|
+
"div",
|
|
4784
|
+
{
|
|
4785
|
+
key: notif.id,
|
|
4786
|
+
onClick: () => {
|
|
4787
|
+
setSelectedNotif(notif);
|
|
4788
|
+
onNotificationClick?.(notif);
|
|
4789
|
+
},
|
|
4790
|
+
className: `p-3 flex items-start gap-3 rounded-xl cursor-pointer transition-colors ${isNotifsLoading ? "opacity-50 pointer-events-none" : "hover:bg-neutral-50"}`
|
|
4791
|
+
},
|
|
4792
|
+
/* @__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" })),
|
|
4793
|
+
/* @__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)))
|
|
4794
|
+
)))), !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(
|
|
4795
|
+
"button",
|
|
4796
|
+
{
|
|
4797
|
+
disabled: notificationPage <= 1 || isNotifsLoading,
|
|
4798
|
+
onClick: () => onNotificationPageChange?.(notificationPage - 1),
|
|
4799
|
+
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"
|
|
4800
|
+
},
|
|
4801
|
+
/* @__PURE__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.ArrowLeft01Icon, size: 12 })
|
|
4802
|
+
), /* @__PURE__ */ import_react81.default.createElement(
|
|
4803
|
+
"button",
|
|
4804
|
+
{
|
|
4805
|
+
disabled: notificationPage >= notificationTotalPages || notificationTotalPages === 0 || isNotifsLoading,
|
|
4806
|
+
onClick: () => onNotificationPageChange?.(notificationPage + 1),
|
|
4807
|
+
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"
|
|
4808
|
+
},
|
|
4809
|
+
/* @__PURE__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.ArrowRight01Icon, size: 12 })
|
|
4810
|
+
))))));
|
|
4811
|
+
};
|
|
4455
4812
|
// Annotate the CommonJS export names for ESM import in node:
|
|
4456
4813
|
0 && (module.exports = {
|
|
4457
4814
|
AppBento2,
|
|
@@ -4487,8 +4844,11 @@ var UniversalBuyCryptoPage = ({
|
|
|
4487
4844
|
UniversalBuyCryptoPage,
|
|
4488
4845
|
UniversalCardActionPage,
|
|
4489
4846
|
UniversalCardPage,
|
|
4847
|
+
UniversalDepartmentsPage,
|
|
4490
4848
|
UniversalErrorView,
|
|
4849
|
+
UniversalHome2,
|
|
4491
4850
|
UniversalHomeView,
|
|
4851
|
+
UniversalMembersPage,
|
|
4492
4852
|
UniversalOrganizationPage,
|
|
4493
4853
|
UniversalProfilePage,
|
|
4494
4854
|
UniversalProfileSettings,
|