@retinalabsllc/zairusjs 16.0.70 → 16.0.90
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 +403 -27
- package/dist/index.mjs +414 -27
- 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,16 +400,18 @@ 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)("");
|
|
409
413
|
const [orgName, setOrgName] = (0, import_react6.useState)("");
|
|
414
|
+
const [accountType, setAccountType] = (0, import_react6.useState)("ORGANIZATION");
|
|
410
415
|
const [agreedToTerms, setAgreedToTerms] = (0, import_react6.useState)(false);
|
|
411
416
|
const [userHas2FA, setUserHas2FA] = (0, import_react6.useState)(false);
|
|
412
417
|
const [userHasPasskey, setUserHasPasskey] = (0, import_react6.useState)(false);
|
|
@@ -462,8 +467,8 @@ function AuthFormInner({
|
|
|
462
467
|
email: emailId,
|
|
463
468
|
firstName: mode === "SIGNUP" && requireNames ? firstName : void 0,
|
|
464
469
|
lastName: mode === "SIGNUP" && requireNames ? lastName : void 0,
|
|
465
|
-
organizationName: mode === "SIGNUP" &&
|
|
466
|
-
|
|
470
|
+
organizationName: mode === "SIGNUP" && accountType === "ORGANIZATION" ? orgName.trim() : void 0,
|
|
471
|
+
accountType: mode === "SIGNUP" ? accountType : void 0,
|
|
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,9 +535,8 @@ 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
|
-
if (signupStep === "ORGANIZATION") return orgName.trim().length < 3;
|
|
539
|
+
if (signupStep === "ORGANIZATION") return accountType === "ORGANIZATION" ? orgName.trim().length < 3 : false;
|
|
540
540
|
if (signupStep === "EMAIL_ID") return emailId.length < 3 || !agreedToTerms;
|
|
541
541
|
}
|
|
542
542
|
return false;
|
|
@@ -546,21 +546,26 @@ 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
|
-
"
|
|
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: "flex bg-neutral-100 p-1 rounded-lg" }, /* @__PURE__ */ import_react6.default.createElement(
|
|
553
|
+
"button",
|
|
555
554
|
{
|
|
556
|
-
type: "
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
555
|
+
type: "button",
|
|
556
|
+
onClick: () => setAccountType("INDIVIDUAL"),
|
|
557
|
+
className: `flex-1 py-2 text-xs rounded-md transition-colors outline-none ${accountType === "INDIVIDUAL" ? "bg-white shadow-sm text-black" : "text-neutral-500 hover:text-black"}`
|
|
558
|
+
},
|
|
559
|
+
"Personal"
|
|
560
|
+
), /* @__PURE__ */ import_react6.default.createElement(
|
|
561
|
+
"button",
|
|
562
|
+
{
|
|
563
|
+
type: "button",
|
|
564
|
+
onClick: () => setAccountType("ORGANIZATION"),
|
|
565
|
+
className: `flex-1 py-2 text-xs rounded-md transition-colors outline-none ${accountType === "ORGANIZATION" ? "bg-white shadow-sm text-black" : "text-neutral-500 hover:text-black"}`
|
|
566
|
+
},
|
|
567
|
+
"Organization"
|
|
568
|
+
)), accountType === "ORGANIZATION" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "space-y-1.5 relative animate-in fade-in zoom-in-95 duration-200" }, /* @__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" })), accountType === "INDIVIDUAL" && /* @__PURE__ */ import_react6.default.createElement("div", { className: "py-4 text-center animate-in fade-in duration-200" }, /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-[13px] text-neutral-500" }, "You are creating a personal account. You can join organizations later."))), (mode === "LOGIN" || mode === "SIGNUP" && signupStep === "EMAIL_ID") && /* @__PURE__ */ 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
569
|
e.preventDefault();
|
|
565
570
|
verifyOtpCode(otp.join(""));
|
|
566
571
|
} }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex justify-between gap-2", onPaste: handlePaste }, otp.map((digit, index) => /* @__PURE__ */ import_react6.default.createElement(
|
|
@@ -585,9 +590,9 @@ function AuthFormInner({
|
|
|
585
590
|
{
|
|
586
591
|
onClick: triggerPasskeyLogin,
|
|
587
592
|
disabled: isSubmitting,
|
|
588
|
-
className: "w-full py-2.5 rounded-full text-black border border-neutral-200
|
|
593
|
+
className: "w-full py-2.5 rounded-full text-black border border-neutral-200 hover:bg-neutral-50 text-xs tracking-wide transition-colors outline-none disabled:opacity-50"
|
|
589
594
|
},
|
|
590
|
-
"Use Passkey
|
|
595
|
+
"Use Passkey Biometrics"
|
|
591
596
|
))))));
|
|
592
597
|
}
|
|
593
598
|
var PipleAuth = (props) => {
|
|
@@ -4452,6 +4457,374 @@ var UniversalBuyCryptoPage = ({
|
|
|
4452
4457
|
);
|
|
4453
4458
|
}))))));
|
|
4454
4459
|
};
|
|
4460
|
+
|
|
4461
|
+
// src/components/UniversalDepartmentsPage.tsx
|
|
4462
|
+
var import_react77 = __toESM(require("react"));
|
|
4463
|
+
var import_react78 = require("@hugeicons/react");
|
|
4464
|
+
var import_core_free_icons27 = require("@hugeicons/core-free-icons");
|
|
4465
|
+
var formatMembersCount = (num) => {
|
|
4466
|
+
if (num >= 1e6) return (num / 1e6).toFixed(1) + "m";
|
|
4467
|
+
if (num >= 1e3) return (num / 1e3).toFixed(1) + "k";
|
|
4468
|
+
return num.toString();
|
|
4469
|
+
};
|
|
4470
|
+
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" }));
|
|
4471
|
+
var UniversalDepartmentsPage = ({
|
|
4472
|
+
headerTitle,
|
|
4473
|
+
headerDescription,
|
|
4474
|
+
departments,
|
|
4475
|
+
isLoading,
|
|
4476
|
+
currentPage,
|
|
4477
|
+
totalPages,
|
|
4478
|
+
onPageChange,
|
|
4479
|
+
onDepartmentClick
|
|
4480
|
+
}) => {
|
|
4481
|
+
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(
|
|
4482
|
+
"div",
|
|
4483
|
+
{
|
|
4484
|
+
key: dept.id,
|
|
4485
|
+
onClick: () => onDepartmentClick(dept.id),
|
|
4486
|
+
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"
|
|
4487
|
+
},
|
|
4488
|
+
/* @__PURE__ */ import_react77.default.createElement("p", { className: "text-[14px] text-black tracking-tight truncate" }, dept.name),
|
|
4489
|
+
/* @__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(
|
|
4490
|
+
"img",
|
|
4491
|
+
{
|
|
4492
|
+
src: src || "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif",
|
|
4493
|
+
alt: "Member",
|
|
4494
|
+
className: "w-full h-full object-cover"
|
|
4495
|
+
}
|
|
4496
|
+
)))), 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"))
|
|
4497
|
+
))), /* @__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(
|
|
4498
|
+
"button",
|
|
4499
|
+
{
|
|
4500
|
+
onClick: () => onPageChange(currentPage - 1),
|
|
4501
|
+
disabled: currentPage <= 1 || isLoading,
|
|
4502
|
+
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"
|
|
4503
|
+
},
|
|
4504
|
+
/* @__PURE__ */ import_react77.default.createElement(import_react78.HugeiconsIcon, { icon: import_core_free_icons27.ArrowLeft01Icon, size: 14 })
|
|
4505
|
+
), /* @__PURE__ */ import_react77.default.createElement(
|
|
4506
|
+
"button",
|
|
4507
|
+
{
|
|
4508
|
+
onClick: () => onPageChange(currentPage + 1),
|
|
4509
|
+
disabled: currentPage >= totalPages || isLoading || totalPages === 0,
|
|
4510
|
+
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"
|
|
4511
|
+
},
|
|
4512
|
+
/* @__PURE__ */ import_react77.default.createElement(import_react78.HugeiconsIcon, { icon: import_core_free_icons27.ArrowRight01Icon, size: 14 })
|
|
4513
|
+
)))))));
|
|
4514
|
+
};
|
|
4515
|
+
|
|
4516
|
+
// src/components/UniversalMembersPage.tsx
|
|
4517
|
+
var import_react79 = __toESM(require("react"));
|
|
4518
|
+
var import_react80 = require("@hugeicons/react");
|
|
4519
|
+
var import_react_hot_toast13 = __toESM(require("react-hot-toast"));
|
|
4520
|
+
var import_core_free_icons28 = require("@hugeicons/core-free-icons");
|
|
4521
|
+
var MemberAvatar = ({ src, status }) => {
|
|
4522
|
+
const [loaded, setLoaded] = (0, import_react79.useState)(false);
|
|
4523
|
+
const [error, setError] = (0, import_react79.useState)(false);
|
|
4524
|
+
const defaultAvatar = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
|
|
4525
|
+
const finalSrc = error || !src ? defaultAvatar : src;
|
|
4526
|
+
const getStatusColor = () => {
|
|
4527
|
+
switch (status?.toUpperCase()) {
|
|
4528
|
+
case "ACTIVE":
|
|
4529
|
+
return "bg-emerald-500";
|
|
4530
|
+
case "BUSY":
|
|
4531
|
+
return "bg-amber-500";
|
|
4532
|
+
case "OFFLINE":
|
|
4533
|
+
return "bg-rose-500";
|
|
4534
|
+
case "AWAY":
|
|
4535
|
+
return "bg-neutral-400";
|
|
4536
|
+
default:
|
|
4537
|
+
return "bg-neutral-200";
|
|
4538
|
+
}
|
|
4539
|
+
};
|
|
4540
|
+
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(
|
|
4541
|
+
"img",
|
|
4542
|
+
{
|
|
4543
|
+
src: finalSrc,
|
|
4544
|
+
alt: "Member Avatar",
|
|
4545
|
+
className: `w-full h-full object-cover transition-opacity duration-300 ${loaded || error ? "opacity-100" : "opacity-0"}`,
|
|
4546
|
+
onLoad: () => setLoaded(true),
|
|
4547
|
+
onError: () => setError(true)
|
|
4548
|
+
}
|
|
4549
|
+
)), /* @__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()}` }));
|
|
4550
|
+
};
|
|
4551
|
+
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" }));
|
|
4552
|
+
var UniversalMembersPage = ({
|
|
4553
|
+
headerTitle,
|
|
4554
|
+
headerDescription,
|
|
4555
|
+
members,
|
|
4556
|
+
isLoading,
|
|
4557
|
+
currentPage,
|
|
4558
|
+
totalPages,
|
|
4559
|
+
onPageChange,
|
|
4560
|
+
searchQuery,
|
|
4561
|
+
onSearchChange,
|
|
4562
|
+
activeStatusFilter,
|
|
4563
|
+
onStatusFilterChange,
|
|
4564
|
+
activeRoleFilter,
|
|
4565
|
+
onRoleFilterChange,
|
|
4566
|
+
actionButtonText,
|
|
4567
|
+
hideAction = false,
|
|
4568
|
+
onRemoveMember
|
|
4569
|
+
}) => {
|
|
4570
|
+
const [expandedId, setExpandedId] = (0, import_react79.useState)(null);
|
|
4571
|
+
const [memberToRemove, setMemberToRemove] = (0, import_react79.useState)(null);
|
|
4572
|
+
const [isRemoving, setIsRemoving] = (0, import_react79.useState)(false);
|
|
4573
|
+
const [localSearchQuery, setLocalSearchQuery] = (0, import_react79.useState)(searchQuery);
|
|
4574
|
+
const [isTyping, setIsTyping] = (0, import_react79.useState)(false);
|
|
4575
|
+
const [isStatusModalOpen, setIsStatusModalOpen] = (0, import_react79.useState)(false);
|
|
4576
|
+
const [isRoleModalOpen, setIsRoleModalOpen] = (0, import_react79.useState)(false);
|
|
4577
|
+
const statusDropdownRef = (0, import_react79.useRef)(null);
|
|
4578
|
+
const roleDropdownRef = (0, import_react79.useRef)(null);
|
|
4579
|
+
(0, import_react79.useEffect)(() => {
|
|
4580
|
+
function handleClickOutside(event) {
|
|
4581
|
+
if (statusDropdownRef.current && !statusDropdownRef.current.contains(event.target)) {
|
|
4582
|
+
setIsStatusModalOpen(false);
|
|
4583
|
+
}
|
|
4584
|
+
if (roleDropdownRef.current && !roleDropdownRef.current.contains(event.target)) {
|
|
4585
|
+
setIsRoleModalOpen(false);
|
|
4586
|
+
}
|
|
4587
|
+
}
|
|
4588
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
4589
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
4590
|
+
}, []);
|
|
4591
|
+
(0, import_react79.useEffect)(() => {
|
|
4592
|
+
setIsTyping(true);
|
|
4593
|
+
const handler = setTimeout(() => {
|
|
4594
|
+
onSearchChange(localSearchQuery);
|
|
4595
|
+
setIsTyping(false);
|
|
4596
|
+
}, 600);
|
|
4597
|
+
return () => clearTimeout(handler);
|
|
4598
|
+
}, [localSearchQuery, onSearchChange]);
|
|
4599
|
+
(0, import_react79.useEffect)(() => {
|
|
4600
|
+
if (searchQuery === "" && localSearchQuery !== "") {
|
|
4601
|
+
setLocalSearchQuery("");
|
|
4602
|
+
}
|
|
4603
|
+
}, [searchQuery]);
|
|
4604
|
+
const handleConfirmRemove = async () => {
|
|
4605
|
+
if (!memberToRemove) return;
|
|
4606
|
+
setIsRemoving(true);
|
|
4607
|
+
try {
|
|
4608
|
+
await onRemoveMember(memberToRemove.id);
|
|
4609
|
+
import_react_hot_toast13.default.success("Member removed successfully.");
|
|
4610
|
+
setExpandedId(null);
|
|
4611
|
+
setMemberToRemove(null);
|
|
4612
|
+
} catch (error) {
|
|
4613
|
+
import_react_hot_toast13.default.error("Failed to remove member.");
|
|
4614
|
+
} finally {
|
|
4615
|
+
setIsRemoving(false);
|
|
4616
|
+
}
|
|
4617
|
+
};
|
|
4618
|
+
const isListLoading = isLoading || isTyping;
|
|
4619
|
+
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(
|
|
4620
|
+
ConfirmationDialog,
|
|
4621
|
+
{
|
|
4622
|
+
isOpen: !!memberToRemove,
|
|
4623
|
+
title: "Remove Member",
|
|
4624
|
+
message: `Are you sure you want to remove ${memberToRemove?.name}? This action cannot be undone.`,
|
|
4625
|
+
confirmText: "Remove",
|
|
4626
|
+
cancelText: "Cancel",
|
|
4627
|
+
isProcessing: isRemoving,
|
|
4628
|
+
isDestructive: true,
|
|
4629
|
+
onClose: () => setMemberToRemove(null),
|
|
4630
|
+
onConfirm: handleConfirmRemove
|
|
4631
|
+
}
|
|
4632
|
+
), /* @__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(
|
|
4633
|
+
"input",
|
|
4634
|
+
{
|
|
4635
|
+
type: "text",
|
|
4636
|
+
placeholder: "Search members...",
|
|
4637
|
+
value: localSearchQuery,
|
|
4638
|
+
onChange: (e) => setLocalSearchQuery(e.target.value),
|
|
4639
|
+
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"
|
|
4640
|
+
}
|
|
4641
|
+
)), /* @__PURE__ */ import_react79.default.createElement("div", { className: "flex items-center gap-3 w-auto pb-0 shrink-0" }, /* @__PURE__ */ import_react79.default.createElement(
|
|
4642
|
+
"button",
|
|
4643
|
+
{
|
|
4644
|
+
onClick: () => setIsStatusModalOpen(true),
|
|
4645
|
+
className: "flex items-center justify-center bg-white w-9 h-9 rounded-full text-neutral-500 hover:text-black transition-colors outline-none"
|
|
4646
|
+
},
|
|
4647
|
+
/* @__PURE__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.SearchList02Icon, size: 16 })
|
|
4648
|
+
), /* @__PURE__ */ import_react79.default.createElement(
|
|
4649
|
+
"button",
|
|
4650
|
+
{
|
|
4651
|
+
onClick: () => setIsRoleModalOpen(true),
|
|
4652
|
+
className: "flex items-center justify-center bg-white w-9 h-9 rounded-full text-neutral-500 hover:text-black transition-colors outline-none"
|
|
4653
|
+
},
|
|
4654
|
+
/* @__PURE__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.ListSettingIcon, size: 16 })
|
|
4655
|
+
))), /* @__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(
|
|
4656
|
+
"button",
|
|
4657
|
+
{
|
|
4658
|
+
onClick: () => setMemberToRemove(member),
|
|
4659
|
+
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"
|
|
4660
|
+
},
|
|
4661
|
+
actionButtonText
|
|
4662
|
+
), /* @__PURE__ */ import_react79.default.createElement(
|
|
4663
|
+
"button",
|
|
4664
|
+
{
|
|
4665
|
+
onClick: () => setExpandedId(null),
|
|
4666
|
+
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"
|
|
4667
|
+
},
|
|
4668
|
+
"Close"
|
|
4669
|
+
))) : /* @__PURE__ */ import_react79.default.createElement(
|
|
4670
|
+
"div",
|
|
4671
|
+
{
|
|
4672
|
+
onClick: () => setExpandedId(member.id),
|
|
4673
|
+
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"
|
|
4674
|
+
},
|
|
4675
|
+
/* @__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())))
|
|
4676
|
+
)))), /* @__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(
|
|
4677
|
+
"button",
|
|
4678
|
+
{
|
|
4679
|
+
onClick: () => onPageChange(currentPage - 1),
|
|
4680
|
+
disabled: currentPage <= 1 || isListLoading,
|
|
4681
|
+
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"
|
|
4682
|
+
},
|
|
4683
|
+
/* @__PURE__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.ArrowLeft01Icon, size: 14 })
|
|
4684
|
+
), /* @__PURE__ */ import_react79.default.createElement(
|
|
4685
|
+
"button",
|
|
4686
|
+
{
|
|
4687
|
+
onClick: () => onPageChange(currentPage + 1),
|
|
4688
|
+
disabled: currentPage >= totalPages || isListLoading || totalPages === 0,
|
|
4689
|
+
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"
|
|
4690
|
+
},
|
|
4691
|
+
/* @__PURE__ */ import_react79.default.createElement(import_react80.HugeiconsIcon, { icon: import_core_free_icons28.ArrowRight01Icon, size: 14 })
|
|
4692
|
+
)))))), 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(
|
|
4693
|
+
"button",
|
|
4694
|
+
{
|
|
4695
|
+
key: option,
|
|
4696
|
+
onClick: () => {
|
|
4697
|
+
onStatusFilterChange(option);
|
|
4698
|
+
setIsStatusModalOpen(false);
|
|
4699
|
+
},
|
|
4700
|
+
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"}`
|
|
4701
|
+
},
|
|
4702
|
+
/* @__PURE__ */ import_react79.default.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
|
|
4703
|
+
))), /* @__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(
|
|
4704
|
+
"button",
|
|
4705
|
+
{
|
|
4706
|
+
key: option,
|
|
4707
|
+
onClick: () => {
|
|
4708
|
+
onRoleFilterChange(option);
|
|
4709
|
+
setIsRoleModalOpen(false);
|
|
4710
|
+
},
|
|
4711
|
+
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"}`
|
|
4712
|
+
},
|
|
4713
|
+
/* @__PURE__ */ import_react79.default.createElement("span", { className: "truncate pr-2 capitalize" }, option.toLowerCase())
|
|
4714
|
+
))), /* @__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")))));
|
|
4715
|
+
};
|
|
4716
|
+
|
|
4717
|
+
// src/components/UniversalHome2.tsx
|
|
4718
|
+
var import_react81 = __toESM(require("react"));
|
|
4719
|
+
var import_navigation6 = require("next/navigation");
|
|
4720
|
+
var import_react82 = require("@hugeicons/react");
|
|
4721
|
+
var import_core_free_icons29 = require("@hugeicons/core-free-icons");
|
|
4722
|
+
var UniversalHome2 = ({
|
|
4723
|
+
fullName = "",
|
|
4724
|
+
avatarSrc,
|
|
4725
|
+
createHuddleAction,
|
|
4726
|
+
joinHuddleAction,
|
|
4727
|
+
notifications = [],
|
|
4728
|
+
notificationPage = 1,
|
|
4729
|
+
notificationTotalPages = 1,
|
|
4730
|
+
isNotifsLoading = false,
|
|
4731
|
+
onNotificationPageChange,
|
|
4732
|
+
onNotificationClick,
|
|
4733
|
+
formatNotifDate,
|
|
4734
|
+
customContent,
|
|
4735
|
+
departmentsProps
|
|
4736
|
+
}) => {
|
|
4737
|
+
const [isAvatarLoaded, setIsAvatarLoaded] = (0, import_react81.useState)(false);
|
|
4738
|
+
const [showNotifDialog, setShowNotifDialog] = (0, import_react81.useState)(false);
|
|
4739
|
+
const [selectedNotif, setSelectedNotif] = (0, import_react81.useState)(null);
|
|
4740
|
+
const router = (0, import_navigation6.useRouter)();
|
|
4741
|
+
const fallbackAvatarUrl = "https://storage.googleapis.com/retina-cloud-v2/assets/images/avatar.avif";
|
|
4742
|
+
const finalAvatarSrc = avatarSrc || fallbackAvatarUrl;
|
|
4743
|
+
const hasUnreadNotifs = notifications.some((n) => !n.isRead);
|
|
4744
|
+
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(
|
|
4745
|
+
"img",
|
|
4746
|
+
{
|
|
4747
|
+
src: finalAvatarSrc,
|
|
4748
|
+
alt: "User Avatar",
|
|
4749
|
+
onLoad: () => setIsAvatarLoaded(true),
|
|
4750
|
+
className: `w-full h-full object-cover transition-opacity duration-300 ${isAvatarLoaded ? "opacity-100" : "opacity-0"}`
|
|
4751
|
+
}
|
|
4752
|
+
))), /* @__PURE__ */ import_react81.default.createElement(
|
|
4753
|
+
"button",
|
|
4754
|
+
{
|
|
4755
|
+
onClick: () => {
|
|
4756
|
+
setShowNotifDialog(true);
|
|
4757
|
+
setSelectedNotif(null);
|
|
4758
|
+
},
|
|
4759
|
+
className: "relative w-10 h-10 flex items-center justify-center rounded-full bg-white outline-none hover:bg-neutral-50 transition-colors"
|
|
4760
|
+
},
|
|
4761
|
+
/* @__PURE__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.Notification01Icon, size: 20, className: "text-black" }),
|
|
4762
|
+
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" })
|
|
4763
|
+
)), /* @__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(
|
|
4764
|
+
"div",
|
|
4765
|
+
{
|
|
4766
|
+
onClick: createHuddleAction?.onClick,
|
|
4767
|
+
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"
|
|
4768
|
+
},
|
|
4769
|
+
/* @__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" }))),
|
|
4770
|
+
/* @__PURE__ */ import_react81.default.createElement(
|
|
4771
|
+
"img",
|
|
4772
|
+
{
|
|
4773
|
+
src: "https://storage.googleapis.com/retina-cloud-v2/assets/images/cal_a.avif",
|
|
4774
|
+
alt: "Create Huddle",
|
|
4775
|
+
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"
|
|
4776
|
+
}
|
|
4777
|
+
)
|
|
4778
|
+
), /* @__PURE__ */ import_react81.default.createElement(
|
|
4779
|
+
"div",
|
|
4780
|
+
{
|
|
4781
|
+
onClick: joinHuddleAction?.onClick,
|
|
4782
|
+
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"
|
|
4783
|
+
},
|
|
4784
|
+
/* @__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" }))),
|
|
4785
|
+
/* @__PURE__ */ import_react81.default.createElement(
|
|
4786
|
+
"img",
|
|
4787
|
+
{
|
|
4788
|
+
src: "https://storage.googleapis.com/retina-cloud-v2/assets/images/cam_a.avif",
|
|
4789
|
+
alt: "Join Huddle",
|
|
4790
|
+
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"
|
|
4791
|
+
}
|
|
4792
|
+
)
|
|
4793
|
+
))), 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(
|
|
4794
|
+
UniversalDepartmentsPage,
|
|
4795
|
+
{
|
|
4796
|
+
...departmentsProps
|
|
4797
|
+
}
|
|
4798
|
+
)), 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(
|
|
4799
|
+
"div",
|
|
4800
|
+
{
|
|
4801
|
+
key: notif.id,
|
|
4802
|
+
onClick: () => {
|
|
4803
|
+
setSelectedNotif(notif);
|
|
4804
|
+
onNotificationClick?.(notif);
|
|
4805
|
+
},
|
|
4806
|
+
className: `p-3 flex items-start gap-3 rounded-xl cursor-pointer transition-colors ${isNotifsLoading ? "opacity-50 pointer-events-none" : "hover:bg-neutral-50"}`
|
|
4807
|
+
},
|
|
4808
|
+
/* @__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" })),
|
|
4809
|
+
/* @__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)))
|
|
4810
|
+
)))), !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(
|
|
4811
|
+
"button",
|
|
4812
|
+
{
|
|
4813
|
+
disabled: notificationPage <= 1 || isNotifsLoading,
|
|
4814
|
+
onClick: () => onNotificationPageChange?.(notificationPage - 1),
|
|
4815
|
+
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"
|
|
4816
|
+
},
|
|
4817
|
+
/* @__PURE__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.ArrowLeft01Icon, size: 12 })
|
|
4818
|
+
), /* @__PURE__ */ import_react81.default.createElement(
|
|
4819
|
+
"button",
|
|
4820
|
+
{
|
|
4821
|
+
disabled: notificationPage >= notificationTotalPages || notificationTotalPages === 0 || isNotifsLoading,
|
|
4822
|
+
onClick: () => onNotificationPageChange?.(notificationPage + 1),
|
|
4823
|
+
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"
|
|
4824
|
+
},
|
|
4825
|
+
/* @__PURE__ */ import_react81.default.createElement(import_react82.HugeiconsIcon, { icon: import_core_free_icons29.ArrowRight01Icon, size: 12 })
|
|
4826
|
+
))))));
|
|
4827
|
+
};
|
|
4455
4828
|
// Annotate the CommonJS export names for ESM import in node:
|
|
4456
4829
|
0 && (module.exports = {
|
|
4457
4830
|
AppBento2,
|
|
@@ -4487,8 +4860,11 @@ var UniversalBuyCryptoPage = ({
|
|
|
4487
4860
|
UniversalBuyCryptoPage,
|
|
4488
4861
|
UniversalCardActionPage,
|
|
4489
4862
|
UniversalCardPage,
|
|
4863
|
+
UniversalDepartmentsPage,
|
|
4490
4864
|
UniversalErrorView,
|
|
4865
|
+
UniversalHome2,
|
|
4491
4866
|
UniversalHomeView,
|
|
4867
|
+
UniversalMembersPage,
|
|
4492
4868
|
UniversalOrganizationPage,
|
|
4493
4869
|
UniversalProfilePage,
|
|
4494
4870
|
UniversalProfileSettings,
|