@retinalabsllc/zairusjs 20.1.15 → 20.1.25
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.js +55 -26
- package/dist/index.mjs +57 -27
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -5512,6 +5512,8 @@ var UniversalSettings = ({
|
|
|
5512
5512
|
const [isSavingProfile, setIsSavingProfile] = (0, import_react89.useState)(false);
|
|
5513
5513
|
const orgFileInputRef = (0, import_react89.useRef)(null);
|
|
5514
5514
|
const userFileInputRef = (0, import_react89.useRef)(null);
|
|
5515
|
+
const [pendingOrgAvatar, setPendingOrgAvatar] = (0, import_react89.useState)(null);
|
|
5516
|
+
const [pendingUserAvatar, setPendingUserAvatar] = (0, import_react89.useState)(null);
|
|
5515
5517
|
const [isUploadingOrgAvatar, setIsUploadingOrgAvatar] = (0, import_react89.useState)(false);
|
|
5516
5518
|
const [isUploadingUserAvatar, setIsUploadingUserAvatar] = (0, import_react89.useState)(false);
|
|
5517
5519
|
(0, import_react89.useEffect)(() => {
|
|
@@ -5525,7 +5527,7 @@ var UniversalSettings = ({
|
|
|
5525
5527
|
setDescription(initialDescription || "");
|
|
5526
5528
|
setAvatarUrl(initialAvatarUrl || "");
|
|
5527
5529
|
}, [initialOrgName, initialOrgSlug, initialOrgAvatarUrl, initialFullName, initialJobTitle, initialDescription, initialAvatarUrl]);
|
|
5528
|
-
const handleFileSelect =
|
|
5530
|
+
const handleFileSelect = (e, type) => {
|
|
5529
5531
|
const file = e.target.files?.[0];
|
|
5530
5532
|
if (!file) return;
|
|
5531
5533
|
if (file.size > 1024 * 1024) {
|
|
@@ -5539,27 +5541,15 @@ var UniversalSettings = ({
|
|
|
5539
5541
|
e.target.value = "";
|
|
5540
5542
|
return;
|
|
5541
5543
|
}
|
|
5542
|
-
|
|
5543
|
-
|
|
5544
|
-
|
|
5545
|
-
|
|
5546
|
-
}
|
|
5547
|
-
|
|
5548
|
-
|
|
5549
|
-
if (type === "ORGANIZATION") setIsUploadingOrgAvatar(true);
|
|
5550
|
-
const res = await onUploadAvatar(file, type);
|
|
5551
|
-
if (res?.url) {
|
|
5552
|
-
if (type === "USER") setAvatarUrl(res.url);
|
|
5553
|
-
if (type === "ORGANIZATION") setOrgAvatarUrl(res.url);
|
|
5554
|
-
import_react_hot_toast15.default.success("Image uploaded. Remember to save changes.");
|
|
5555
|
-
}
|
|
5556
|
-
} catch (error) {
|
|
5557
|
-
import_react_hot_toast15.default.error("Failed to process image upload.");
|
|
5558
|
-
} finally {
|
|
5559
|
-
if (type === "USER") setIsUploadingUserAvatar(false);
|
|
5560
|
-
if (type === "ORGANIZATION") setIsUploadingOrgAvatar(false);
|
|
5561
|
-
e.target.value = "";
|
|
5544
|
+
const previewUrl = URL.createObjectURL(file);
|
|
5545
|
+
if (type === "USER") {
|
|
5546
|
+
setPendingUserAvatar(file);
|
|
5547
|
+
setAvatarUrl(previewUrl);
|
|
5548
|
+
} else if (type === "ORGANIZATION") {
|
|
5549
|
+
setPendingOrgAvatar(file);
|
|
5550
|
+
setOrgAvatarUrl(previewUrl);
|
|
5562
5551
|
}
|
|
5552
|
+
e.target.value = "";
|
|
5563
5553
|
};
|
|
5564
5554
|
(0, import_react89.useEffect)(() => {
|
|
5565
5555
|
if (activeTab !== "MEMBERS") return;
|
|
@@ -5651,13 +5641,32 @@ var UniversalSettings = ({
|
|
|
5651
5641
|
if (orgSlug !== initialOrgSlug && slugAvailable === false) return import_react_hot_toast15.default.error("Address handle unavailable.");
|
|
5652
5642
|
setIsSavingOrg(true);
|
|
5653
5643
|
try {
|
|
5654
|
-
|
|
5644
|
+
let finalAvatarUrl = orgAvatarUrl;
|
|
5645
|
+
if (pendingOrgAvatar && onUploadAvatar) {
|
|
5646
|
+
setIsUploadingOrgAvatar(true);
|
|
5647
|
+
try {
|
|
5648
|
+
const res2 = await onUploadAvatar(pendingOrgAvatar, "ORGANIZATION");
|
|
5649
|
+
if (res2?.url) {
|
|
5650
|
+
finalAvatarUrl = res2.url;
|
|
5651
|
+
setOrgAvatarUrl(finalAvatarUrl);
|
|
5652
|
+
}
|
|
5653
|
+
} catch (err) {
|
|
5654
|
+
import_react_hot_toast15.default.error("Failed to securely upload workspace avatar.");
|
|
5655
|
+
setIsSavingOrg(false);
|
|
5656
|
+
setIsUploadingOrgAvatar(false);
|
|
5657
|
+
return;
|
|
5658
|
+
}
|
|
5659
|
+
setPendingOrgAvatar(null);
|
|
5660
|
+
setIsUploadingOrgAvatar(false);
|
|
5661
|
+
}
|
|
5662
|
+
const res = await onSaveOrganization({ name: orgName, slug: orgSlug, avatarUrl: finalAvatarUrl });
|
|
5655
5663
|
if (res.success) import_react_hot_toast15.default.success("Workspace updated successfully.");
|
|
5656
5664
|
else import_react_hot_toast15.default.error(res.error || "Failed to update workspace.");
|
|
5657
5665
|
} catch (error) {
|
|
5658
5666
|
import_react_hot_toast15.default.error("Service unavailable.");
|
|
5659
5667
|
} finally {
|
|
5660
5668
|
setIsSavingOrg(false);
|
|
5669
|
+
setIsUploadingOrgAvatar(false);
|
|
5661
5670
|
}
|
|
5662
5671
|
};
|
|
5663
5672
|
const handleSaveProfile = async (e) => {
|
|
@@ -5665,13 +5674,32 @@ var UniversalSettings = ({
|
|
|
5665
5674
|
if (isSavingProfile || !onSaveProfile) return;
|
|
5666
5675
|
setIsSavingProfile(true);
|
|
5667
5676
|
try {
|
|
5668
|
-
|
|
5677
|
+
let finalAvatarUrl = avatarUrl;
|
|
5678
|
+
if (pendingUserAvatar && onUploadAvatar) {
|
|
5679
|
+
setIsUploadingUserAvatar(true);
|
|
5680
|
+
try {
|
|
5681
|
+
const res2 = await onUploadAvatar(pendingUserAvatar, "USER");
|
|
5682
|
+
if (res2?.url) {
|
|
5683
|
+
finalAvatarUrl = res2.url;
|
|
5684
|
+
setAvatarUrl(finalAvatarUrl);
|
|
5685
|
+
}
|
|
5686
|
+
} catch (err) {
|
|
5687
|
+
import_react_hot_toast15.default.error("Failed to securely upload profile avatar.");
|
|
5688
|
+
setIsSavingProfile(false);
|
|
5689
|
+
setIsUploadingUserAvatar(false);
|
|
5690
|
+
return;
|
|
5691
|
+
}
|
|
5692
|
+
setPendingUserAvatar(null);
|
|
5693
|
+
setIsUploadingUserAvatar(false);
|
|
5694
|
+
}
|
|
5695
|
+
const res = await onSaveProfile({ firstName, lastName, jobTitle, description, avatarUrl: finalAvatarUrl });
|
|
5669
5696
|
if (res.success) import_react_hot_toast15.default.success("Identity updated successfully.");
|
|
5670
5697
|
else import_react_hot_toast15.default.error(res.error || "Failed to update identity.");
|
|
5671
5698
|
} catch (error) {
|
|
5672
5699
|
import_react_hot_toast15.default.error("Service unavailable.");
|
|
5673
5700
|
} finally {
|
|
5674
5701
|
setIsSavingProfile(false);
|
|
5702
|
+
setIsUploadingUserAvatar(false);
|
|
5675
5703
|
}
|
|
5676
5704
|
};
|
|
5677
5705
|
const hasOrgChanges = orgName !== initialOrgName || orgSlug !== initialOrgSlug || orgAvatarUrl !== initialOrgAvatarUrl;
|
|
@@ -5715,18 +5743,19 @@ var UniversalSettings = ({
|
|
|
5715
5743
|
))))))) : /* @__PURE__ */ import_react89.default.createElement(import_react89.default.Fragment, null, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex flex-row items-center justify-between gap-4" }, /* @__PURE__ */ import_react89.default.createElement("h2", { className: "text-black text-xl tracking-tight" }, isInviteMode ? "Add Member" : "Team Directory"), !isInviteMode && canManage && /* @__PURE__ */ import_react89.default.createElement("button", { onClick: () => setIsInviteMode(true), className: "shrink-0 px-4 py-1.5 border border-stone-200 text-black text-xs tracking-wide rounded-full hover:bg-stone-50 transition-colors outline-none" }, "Invite Team")), !isInviteMode && /* @__PURE__ */ import_react89.default.createElement("p", { className: "text-xs text-stone-500" }, "Manage members and access controls across your organization.")), /* @__PURE__ */ import_react89.default.createElement("div", { className: "w-full overflow-hidden" }, isInviteMode ? /* @__PURE__ */ import_react89.default.createElement("form", { onSubmit: handleInviteSubmit, className: "flex flex-col gap-8 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "space-y-1.5 mt-2" }, /* @__PURE__ */ import_react89.default.createElement("label", { className: "text-xs text-stone-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ import_react89.default.createElement("input", { type: "email", value: inviteEmail, onChange: (e) => setInviteEmail(cleanEmailId(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-stone-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "name@company.com" })), /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ import_react89.default.createElement(ThreeDActionButton, { type: "submit", disabled: inviteEmail.length < 5 || isInviting, isLoading: isInviting, className: "w-full" }, "Send Invitation"), /* @__PURE__ */ import_react89.default.createElement("button", { type: "button", onClick: () => {
|
|
5716
5744
|
setIsInviteMode(false);
|
|
5717
5745
|
setInviteEmail("");
|
|
5718
|
-
}, disabled: isInviting, className: "w-full flex items-center justify-center py-2.5 rounded-full border border-stone-200 text-black hover:bg-stone-50 transition-colors outline-none text-xs tracking-wide" }, "Cancel"))) : isMembersLoading || isTyping ? /* @__PURE__ */ import_react89.default.createElement(PageSpinner8, null) : /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex flex-col min-w-0 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react89.default.createElement("div", null, members.length === 0 ? /* @__PURE__ */ import_react89.default.createElement("p", { className: "text-xs text-stone-400 py-6 text-center" }, "No members found") : members.map((member) => /* @__PURE__ */ import_react89.default.createElement("div", { key: member.id, onClick: () => setExpandedId(member.id), className: "flex items-center justify-between py-3 hover:bg-stone-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react89.default.createElement(MemberAvatar3, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ import_react89.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5" }, /* @__PURE__ */ import_react89.default.createElement("p", { className: "text-sm text-black truncate" }, member.fullName), /* @__PURE__ */ import_react89.default.createElement("p", { className: "text-xs text-stone-500 capitalize truncate" }, member.role.toLowerCase())))))), /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ import_react89.default.createElement("span", { className: "text-xs text-stone-400 tracking-[0.2em]" }, "Page ", membersCurrentPage, " of ", membersTotalPages === 0 ? 1 : membersTotalPages), /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react89.default.createElement("button", { onClick: () => onMembersPageChange(membersCurrentPage - 1), disabled: membersCurrentPage <= 1 || isMembersLoading, className: "p-2 bg-white border border-stone-200 rounded-full text-black hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none" }, /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.ArrowLeft01Icon, size: 14 })), /* @__PURE__ */ import_react89.default.createElement("button", { onClick: () => onMembersPageChange(membersCurrentPage + 1), disabled: membersCurrentPage >= membersTotalPages || isMembersLoading || membersTotalPages === 0, className: "p-2 bg-white border border-stone-200 rounded-full text-black hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none" }, /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.ArrowRight01Icon, size: 14 })))))))), /* @__PURE__ */ import_react89.default.createElement(ReusableOptions, { isOpen: isStatusModalOpen, onClose: () => setIsStatusModalOpen(false), title: "Status Filter", options: ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"], selectedOption: activeStatusFilter, onSelect: (status) => onStatusFilterChange(status) }), /* @__PURE__ */ import_react89.default.createElement(ReusableOptions, { isOpen: isRoleModalOpen, onClose: () => setIsRoleModalOpen(false), title: "Role Filter", options: ["ALL", "OWNER", "ADMIN", "MANAGER", "MEMBER", "GUEST"], selectedOption: activeRoleFilter, onSelect: (role) => onRoleFilterChange(role) }), /* @__PURE__ */ import_react89.default.createElement(ReusableOptions, { isOpen: !!roleEditTarget, onClose: () => setRoleEditTarget(null), title: "Modify Access Role", options: ["ADMIN", "MANAGER", "MEMBER"], selectedOption: roleEditTarget?.role || "", onSelect: handleRoleUpdate })), activeTab === "ORGANIZATION" && isOrg && /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex flex-col gap-8 animate-in rounded-2xl p-6 bg-white fade-in duration-300" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "relative group cursor-pointer shrink-0", onClick: () => canManage && !isSavingOrg ? orgFileInputRef.current?.click() : void 0 }, /* @__PURE__ */ import_react89.default.createElement(OrgAvatar2, { src: orgAvatarUrl, sizeClass: "w-14 h-14" }), canManage && /* @__PURE__ */ import_react89.default.createElement("div", { className: "absolute -bottom-1 -right-1 w-6 h-6 bg-white border border-stone-200 rounded-full flex items-center justify-center text-stone-500 group-hover:text-black transition-colors z-10" }, isUploadingOrgAvatar ? /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.Loading03Icon, size: 12, className: "animate-spin" }) : /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.
|
|
5746
|
+
}, disabled: isInviting, className: "w-full flex items-center justify-center py-2.5 rounded-full border border-stone-200 text-black hover:bg-stone-50 transition-colors outline-none text-xs tracking-wide" }, "Cancel"))) : isMembersLoading || isTyping ? /* @__PURE__ */ import_react89.default.createElement(PageSpinner8, null) : /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex flex-col min-w-0 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react89.default.createElement("div", null, members.length === 0 ? /* @__PURE__ */ import_react89.default.createElement("p", { className: "text-xs text-stone-400 py-6 text-center" }, "No members found") : members.map((member) => /* @__PURE__ */ import_react89.default.createElement("div", { key: member.id, onClick: () => setExpandedId(member.id), className: "flex items-center justify-between py-3 hover:bg-stone-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react89.default.createElement(MemberAvatar3, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ import_react89.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5" }, /* @__PURE__ */ import_react89.default.createElement("p", { className: "text-sm text-black truncate" }, member.fullName), /* @__PURE__ */ import_react89.default.createElement("p", { className: "text-xs text-stone-500 capitalize truncate" }, member.role.toLowerCase())))))), /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ import_react89.default.createElement("span", { className: "text-xs text-stone-400 tracking-[0.2em]" }, "Page ", membersCurrentPage, " of ", membersTotalPages === 0 ? 1 : membersTotalPages), /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react89.default.createElement("button", { onClick: () => onMembersPageChange(membersCurrentPage - 1), disabled: membersCurrentPage <= 1 || isMembersLoading, className: "p-2 bg-white border border-stone-200 rounded-full text-black hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none" }, /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.ArrowLeft01Icon, size: 14 })), /* @__PURE__ */ import_react89.default.createElement("button", { onClick: () => onMembersPageChange(membersCurrentPage + 1), disabled: membersCurrentPage >= membersTotalPages || isMembersLoading || membersTotalPages === 0, className: "p-2 bg-white border border-stone-200 rounded-full text-black hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none" }, /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.ArrowRight01Icon, size: 14 })))))))), /* @__PURE__ */ import_react89.default.createElement(ReusableOptions, { isOpen: isStatusModalOpen, onClose: () => setIsStatusModalOpen(false), title: "Status Filter", options: ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"], selectedOption: activeStatusFilter, onSelect: (status) => onStatusFilterChange(status) }), /* @__PURE__ */ import_react89.default.createElement(ReusableOptions, { isOpen: isRoleModalOpen, onClose: () => setIsRoleModalOpen(false), title: "Role Filter", options: ["ALL", "OWNER", "ADMIN", "MANAGER", "MEMBER", "GUEST"], selectedOption: activeRoleFilter, onSelect: (role) => onRoleFilterChange(role) }), /* @__PURE__ */ import_react89.default.createElement(ReusableOptions, { isOpen: !!roleEditTarget, onClose: () => setRoleEditTarget(null), title: "Modify Access Role", options: ["ADMIN", "MANAGER", "MEMBER"], selectedOption: roleEditTarget?.role || "", onSelect: handleRoleUpdate })), activeTab === "ORGANIZATION" && isOrg && /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex flex-col gap-8 animate-in rounded-2xl p-6 bg-white fade-in duration-300" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "relative group cursor-pointer shrink-0", onClick: () => canManage && !isSavingOrg ? orgFileInputRef.current?.click() : void 0 }, /* @__PURE__ */ import_react89.default.createElement(OrgAvatar2, { src: orgAvatarUrl, sizeClass: "w-14 h-14" }), canManage && /* @__PURE__ */ import_react89.default.createElement("div", { className: "absolute -bottom-1 -right-1 w-6 h-6 bg-white border border-stone-200 rounded-full flex items-center justify-center text-stone-500 group-hover:text-black transition-colors z-10" }, isUploadingOrgAvatar ? /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.Loading03Icon, size: 12, className: "animate-spin" }) : /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.CloudUploadIcon, size: 14 })), /* @__PURE__ */ import_react89.default.createElement("input", { type: "file", ref: orgFileInputRef, className: "hidden", accept: ".png, .jpg, .jpeg", onChange: (e) => handleFileSelect(e, "ORGANIZATION") })), /* @__PURE__ */ import_react89.default.createElement("div", null, /* @__PURE__ */ import_react89.default.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Workspace Details"), /* @__PURE__ */ import_react89.default.createElement("p", { className: "text-xs text-stone-500" }, "Manage your organizational identity and handles."))), !canManage && /* @__PURE__ */ import_react89.default.createElement("span", { className: "p-2 w-9 h-9 bg-stone-100 text-stone-400 rounded-full shrink-0" }, /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.CircleLock02Icon, size: 18, className: "text-current" }))), /* @__PURE__ */ import_react89.default.createElement("form", { className: "flex flex-col gap-8 w-full max-w-5xl", onSubmit: handleSaveOrganization, autoComplete: "off" }, /* @__PURE__ */ import_react89.default.createElement(TextInput, { label: "Workspace Name", value: orgName, onChange: handleOrgNameChange, disabled: !canManage || isSavingOrg, placeholder: "Acme Corporation", maxLength: 50 }), /* @__PURE__ */ import_react89.default.createElement("div", { className: "space-y-1.5 relative w-full" }, /* @__PURE__ */ import_react89.default.createElement("label", { className: "text-xs text-stone-400 tracking-[0.2em] block" }, "Workspace Handle"), /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-center relative w-full border-b border-stone-200 focus-within:border-black transition-all duration-300 overflow-hidden" }, /* @__PURE__ */ import_react89.default.createElement("input", { type: "text", value: orgSlug, disabled: !canManage || isSavingOrg, onChange: (e) => handleOrgSlugChange(e.target.value), spellCheck: "false", autoComplete: "off", className: "w-full pr-10 pl-0 py-3 text-sm bg-transparent text-black outline-none disabled:opacity-50 disabled:cursor-not-allowed", placeholder: "workspace-handle" }), /* @__PURE__ */ import_react89.default.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ import_react89.default.createElement(InputSpinner3, null), !isCheckingSlug && canManage && orgSlug !== initialOrgSlug && orgSlug.length >= 3 && slugAvailable === false && /* @__PURE__ */ import_react89.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#d97757]/10" }, /* @__PURE__ */ import_react89.default.createElement("svg", { className: "w-2 h-2 text-[#d97757]", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react89.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))), !isCheckingSlug && canManage && orgSlug !== initialOrgSlug && orgSlug.length >= 3 && slugAvailable === true && /* @__PURE__ */ import_react89.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ import_react89.default.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react89.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" })))))), /* @__PURE__ */ import_react89.default.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ import_react89.default.createElement(ThreeDActionButton, { type: "submit", disabled: isOrgSaveDisabled, isLoading: isSavingOrg, className: "min-w-32" }, "Save Changes"), hasOrgChanges && !isSavingOrg && canManage && /* @__PURE__ */ import_react89.default.createElement("button", { type: "button", onClick: () => {
|
|
5719
5747
|
setOrgName(initialOrgName || "");
|
|
5720
5748
|
setOrgSlug(initialOrgSlug || "");
|
|
5721
5749
|
setOrgAvatarUrl(initialOrgAvatarUrl || "");
|
|
5722
|
-
|
|
5750
|
+
setPendingOrgAvatar(null);
|
|
5751
|
+
}, className: "text-xs tracking-widest text-stone-400 hover:text-black transition-colors outline-none" }, "Cancel")))), activeTab === "ACCOUNT" && /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex flex-col gap-8 rounded-2xl p-6 bg-white w-full" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "relative group cursor-pointer shrink-0", onClick: () => !isSavingProfile ? userFileInputRef.current?.click() : void 0 }, /* @__PURE__ */ import_react89.default.createElement(MemberAvatar3, { src: avatarUrl, status: "ACTIVE", sizeClass: "w-14 h-14" }), /* @__PURE__ */ import_react89.default.createElement("div", { className: "absolute -bottom-1 -right-1 w-6 h-6 bg-white border border-stone-200 rounded-full flex items-center justify-center text-stone-500 group-hover:text-black transition-colors z-20" }, isUploadingUserAvatar ? /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.Loading03Icon, size: 12, className: "animate-spin" }) : /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.CloudUploadIcon, size: 14 })), /* @__PURE__ */ import_react89.default.createElement("input", { type: "file", ref: userFileInputRef, className: "hidden", accept: ".png, .jpg, .jpeg", onChange: (e) => handleFileSelect(e, "USER") })), /* @__PURE__ */ import_react89.default.createElement("div", null, /* @__PURE__ */ import_react89.default.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Personal Identity"), /* @__PURE__ */ import_react89.default.createElement("p", { className: "text-xs text-stone-500" }, "Update your system display name and contact email.")))), /* @__PURE__ */ import_react89.default.createElement("form", { className: "flex flex-col gap-6 w-full max-w-5xl", onSubmit: handleSaveProfile, autoComplete: "off" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6" }, /* @__PURE__ */ import_react89.default.createElement(TextInput, { label: "First Name", value: firstName, onChange: (v) => setFirstName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "First name", maxLength: 50 }), /* @__PURE__ */ import_react89.default.createElement(TextInput, { label: "Last Name", value: lastName, onChange: (v) => setLastName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "Last name", maxLength: 50 })), /* @__PURE__ */ import_react89.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6" }, /* @__PURE__ */ import_react89.default.createElement(TextInput, { label: "Job Title", value: jobTitle, onChange: (v) => setJobTitle(v.substring(0, 50)), disabled: isSavingProfile, placeholder: "e.g. HR Manager, CEO", maxLength: 50 }), /* @__PURE__ */ import_react89.default.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ import_react89.default.createElement("label", { className: "text-xs text-stone-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ import_react89.default.createElement("input", { type: "email", value: initialEmail, disabled: true, className: "w-full pb-3 pt-3 text-sm bg-transparent text-stone-400 border-b border-stone-200 outline-none cursor-not-allowed" }))), /* @__PURE__ */ import_react89.default.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ import_react89.default.createElement("label", { className: "text-xs text-stone-400 tracking-[0.2em] block" }, "About Me"), /* @__PURE__ */ import_react89.default.createElement(
|
|
5723
5752
|
"textarea",
|
|
5724
5753
|
{
|
|
5725
5754
|
value: description,
|
|
5726
5755
|
onChange: (e) => setDescription(e.target.value.substring(0, 300)),
|
|
5727
5756
|
disabled: isSavingProfile,
|
|
5728
5757
|
placeholder: "A short shout about yourself...",
|
|
5729
|
-
className: "w-full pb-3 pt-3 text-sm bg-transparent text-black border-b border-stone-200 outline-none focus:border-
|
|
5758
|
+
className: "w-full pb-3 pt-3 text-sm bg-transparent text-black border-b border-stone-200 outline-none focus:border-[#d97757] transition-all duration-300 resize-none h-20 custom-scrollbar",
|
|
5730
5759
|
maxLength: 300
|
|
5731
5760
|
}
|
|
5732
5761
|
)), /* @__PURE__ */ import_react89.default.createElement("div", { className: "pt-4 flex items-center gap-4" }, /* @__PURE__ */ import_react89.default.createElement(ThreeDActionButton, { type: "submit", disabled: isProfileSaveDisabled, isLoading: isSavingProfile, className: "min-w-32" }, "Update Identity")))), /* @__PURE__ */ import_react89.default.createElement("div", { className: "bg-white rounded-2xl p-6 w-full flex flex-col sm:flex-row sm:items-center justify-between gap-6 border border-stone-100" }, /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex flex-col items-start max-w-sm" }, /* @__PURE__ */ import_react89.default.createElement("p", { className: "text-xs text-stone-400 tracking-[0.2em] mb-2 uppercase" }, "AI Credits Balance"), isBillingLoading ? /* @__PURE__ */ import_react89.default.createElement("div", { className: "h-8 w-32 bg-stone-100 animate-pulse rounded mt-1" }) : /* @__PURE__ */ import_react89.default.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.Coins01Icon, size: 28, className: "text-[#d97757]" }), /* @__PURE__ */ import_react89.default.createElement("span", { className: "text-3xl text-black tracking-tight" }, aiCredits)), /* @__PURE__ */ import_react89.default.createElement("p", { className: "text-xs text-stone-500 mt-4 leading-relaxed" }, "AI credits are consumed when generating intelligent summaries, transcriptions, and automated huddle insights.")), /* @__PURE__ */ import_react89.default.createElement("button", { onClick: onTopUp, className: "w-12 h-12 rounded-full border border-stone-200 flex items-center justify-center text-black hover:bg-stone-50 transition-colors outline-none shrink-0", "aria-label": "Top Up Credits" }, /* @__PURE__ */ import_react89.default.createElement(import_react90.HugeiconsIcon, { icon: import_core_free_icons33.PlusSignIcon, size: 20 })))));
|
package/dist/index.mjs
CHANGED
|
@@ -5454,7 +5454,8 @@ import {
|
|
|
5454
5454
|
ListSettingIcon as ListSettingIcon3,
|
|
5455
5455
|
CircleLock02Icon as CircleLock02Icon3,
|
|
5456
5456
|
Coins01Icon,
|
|
5457
|
-
PlusSignIcon as PlusSignIcon3
|
|
5457
|
+
PlusSignIcon as PlusSignIcon3,
|
|
5458
|
+
CloudUploadIcon
|
|
5458
5459
|
} from "@hugeicons/core-free-icons";
|
|
5459
5460
|
var MemberAvatar3 = ({ src, status, sizeClass = "w-10 h-10" }) => {
|
|
5460
5461
|
const [loaded, setLoaded] = useState38(false);
|
|
@@ -5567,6 +5568,8 @@ var UniversalSettings = ({
|
|
|
5567
5568
|
const [isSavingProfile, setIsSavingProfile] = useState38(false);
|
|
5568
5569
|
const orgFileInputRef = useRef14(null);
|
|
5569
5570
|
const userFileInputRef = useRef14(null);
|
|
5571
|
+
const [pendingOrgAvatar, setPendingOrgAvatar] = useState38(null);
|
|
5572
|
+
const [pendingUserAvatar, setPendingUserAvatar] = useState38(null);
|
|
5570
5573
|
const [isUploadingOrgAvatar, setIsUploadingOrgAvatar] = useState38(false);
|
|
5571
5574
|
const [isUploadingUserAvatar, setIsUploadingUserAvatar] = useState38(false);
|
|
5572
5575
|
useEffect21(() => {
|
|
@@ -5580,7 +5583,7 @@ var UniversalSettings = ({
|
|
|
5580
5583
|
setDescription(initialDescription || "");
|
|
5581
5584
|
setAvatarUrl(initialAvatarUrl || "");
|
|
5582
5585
|
}, [initialOrgName, initialOrgSlug, initialOrgAvatarUrl, initialFullName, initialJobTitle, initialDescription, initialAvatarUrl]);
|
|
5583
|
-
const handleFileSelect =
|
|
5586
|
+
const handleFileSelect = (e, type) => {
|
|
5584
5587
|
const file = e.target.files?.[0];
|
|
5585
5588
|
if (!file) return;
|
|
5586
5589
|
if (file.size > 1024 * 1024) {
|
|
@@ -5594,27 +5597,15 @@ var UniversalSettings = ({
|
|
|
5594
5597
|
e.target.value = "";
|
|
5595
5598
|
return;
|
|
5596
5599
|
}
|
|
5597
|
-
|
|
5598
|
-
|
|
5599
|
-
|
|
5600
|
-
|
|
5601
|
-
}
|
|
5602
|
-
|
|
5603
|
-
|
|
5604
|
-
if (type === "ORGANIZATION") setIsUploadingOrgAvatar(true);
|
|
5605
|
-
const res = await onUploadAvatar(file, type);
|
|
5606
|
-
if (res?.url) {
|
|
5607
|
-
if (type === "USER") setAvatarUrl(res.url);
|
|
5608
|
-
if (type === "ORGANIZATION") setOrgAvatarUrl(res.url);
|
|
5609
|
-
toast14.success("Image uploaded. Remember to save changes.");
|
|
5610
|
-
}
|
|
5611
|
-
} catch (error) {
|
|
5612
|
-
toast14.error("Failed to process image upload.");
|
|
5613
|
-
} finally {
|
|
5614
|
-
if (type === "USER") setIsUploadingUserAvatar(false);
|
|
5615
|
-
if (type === "ORGANIZATION") setIsUploadingOrgAvatar(false);
|
|
5616
|
-
e.target.value = "";
|
|
5600
|
+
const previewUrl = URL.createObjectURL(file);
|
|
5601
|
+
if (type === "USER") {
|
|
5602
|
+
setPendingUserAvatar(file);
|
|
5603
|
+
setAvatarUrl(previewUrl);
|
|
5604
|
+
} else if (type === "ORGANIZATION") {
|
|
5605
|
+
setPendingOrgAvatar(file);
|
|
5606
|
+
setOrgAvatarUrl(previewUrl);
|
|
5617
5607
|
}
|
|
5608
|
+
e.target.value = "";
|
|
5618
5609
|
};
|
|
5619
5610
|
useEffect21(() => {
|
|
5620
5611
|
if (activeTab !== "MEMBERS") return;
|
|
@@ -5706,13 +5697,32 @@ var UniversalSettings = ({
|
|
|
5706
5697
|
if (orgSlug !== initialOrgSlug && slugAvailable === false) return toast14.error("Address handle unavailable.");
|
|
5707
5698
|
setIsSavingOrg(true);
|
|
5708
5699
|
try {
|
|
5709
|
-
|
|
5700
|
+
let finalAvatarUrl = orgAvatarUrl;
|
|
5701
|
+
if (pendingOrgAvatar && onUploadAvatar) {
|
|
5702
|
+
setIsUploadingOrgAvatar(true);
|
|
5703
|
+
try {
|
|
5704
|
+
const res2 = await onUploadAvatar(pendingOrgAvatar, "ORGANIZATION");
|
|
5705
|
+
if (res2?.url) {
|
|
5706
|
+
finalAvatarUrl = res2.url;
|
|
5707
|
+
setOrgAvatarUrl(finalAvatarUrl);
|
|
5708
|
+
}
|
|
5709
|
+
} catch (err) {
|
|
5710
|
+
toast14.error("Failed to securely upload workspace avatar.");
|
|
5711
|
+
setIsSavingOrg(false);
|
|
5712
|
+
setIsUploadingOrgAvatar(false);
|
|
5713
|
+
return;
|
|
5714
|
+
}
|
|
5715
|
+
setPendingOrgAvatar(null);
|
|
5716
|
+
setIsUploadingOrgAvatar(false);
|
|
5717
|
+
}
|
|
5718
|
+
const res = await onSaveOrganization({ name: orgName, slug: orgSlug, avatarUrl: finalAvatarUrl });
|
|
5710
5719
|
if (res.success) toast14.success("Workspace updated successfully.");
|
|
5711
5720
|
else toast14.error(res.error || "Failed to update workspace.");
|
|
5712
5721
|
} catch (error) {
|
|
5713
5722
|
toast14.error("Service unavailable.");
|
|
5714
5723
|
} finally {
|
|
5715
5724
|
setIsSavingOrg(false);
|
|
5725
|
+
setIsUploadingOrgAvatar(false);
|
|
5716
5726
|
}
|
|
5717
5727
|
};
|
|
5718
5728
|
const handleSaveProfile = async (e) => {
|
|
@@ -5720,13 +5730,32 @@ var UniversalSettings = ({
|
|
|
5720
5730
|
if (isSavingProfile || !onSaveProfile) return;
|
|
5721
5731
|
setIsSavingProfile(true);
|
|
5722
5732
|
try {
|
|
5723
|
-
|
|
5733
|
+
let finalAvatarUrl = avatarUrl;
|
|
5734
|
+
if (pendingUserAvatar && onUploadAvatar) {
|
|
5735
|
+
setIsUploadingUserAvatar(true);
|
|
5736
|
+
try {
|
|
5737
|
+
const res2 = await onUploadAvatar(pendingUserAvatar, "USER");
|
|
5738
|
+
if (res2?.url) {
|
|
5739
|
+
finalAvatarUrl = res2.url;
|
|
5740
|
+
setAvatarUrl(finalAvatarUrl);
|
|
5741
|
+
}
|
|
5742
|
+
} catch (err) {
|
|
5743
|
+
toast14.error("Failed to securely upload profile avatar.");
|
|
5744
|
+
setIsSavingProfile(false);
|
|
5745
|
+
setIsUploadingUserAvatar(false);
|
|
5746
|
+
return;
|
|
5747
|
+
}
|
|
5748
|
+
setPendingUserAvatar(null);
|
|
5749
|
+
setIsUploadingUserAvatar(false);
|
|
5750
|
+
}
|
|
5751
|
+
const res = await onSaveProfile({ firstName, lastName, jobTitle, description, avatarUrl: finalAvatarUrl });
|
|
5724
5752
|
if (res.success) toast14.success("Identity updated successfully.");
|
|
5725
5753
|
else toast14.error(res.error || "Failed to update identity.");
|
|
5726
5754
|
} catch (error) {
|
|
5727
5755
|
toast14.error("Service unavailable.");
|
|
5728
5756
|
} finally {
|
|
5729
5757
|
setIsSavingProfile(false);
|
|
5758
|
+
setIsUploadingUserAvatar(false);
|
|
5730
5759
|
}
|
|
5731
5760
|
};
|
|
5732
5761
|
const hasOrgChanges = orgName !== initialOrgName || orgSlug !== initialOrgSlug || orgAvatarUrl !== initialOrgAvatarUrl;
|
|
@@ -5770,18 +5799,19 @@ var UniversalSettings = ({
|
|
|
5770
5799
|
))))))) : /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React52.createElement("div", { className: "flex flex-row items-center justify-between gap-4" }, /* @__PURE__ */ React52.createElement("h2", { className: "text-black text-xl tracking-tight" }, isInviteMode ? "Add Member" : "Team Directory"), !isInviteMode && canManage && /* @__PURE__ */ React52.createElement("button", { onClick: () => setIsInviteMode(true), className: "shrink-0 px-4 py-1.5 border border-stone-200 text-black text-xs tracking-wide rounded-full hover:bg-stone-50 transition-colors outline-none" }, "Invite Team")), !isInviteMode && /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-stone-500" }, "Manage members and access controls across your organization.")), /* @__PURE__ */ React52.createElement("div", { className: "w-full overflow-hidden" }, isInviteMode ? /* @__PURE__ */ React52.createElement("form", { onSubmit: handleInviteSubmit, className: "flex flex-col gap-8 animate-in fade-in duration-300" }, /* @__PURE__ */ React52.createElement("div", { className: "space-y-1.5 mt-2" }, /* @__PURE__ */ React52.createElement("label", { className: "text-xs text-stone-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ React52.createElement("input", { type: "email", value: inviteEmail, onChange: (e) => setInviteEmail(cleanEmailId(e.target.value)), required: true, autoFocus: true, className: "w-full px-2 py-3 bg-transparent text-sm border-b border-stone-200 text-black outline-none focus:border-black transition-all duration-300", placeholder: "name@company.com" })), /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React52.createElement(ThreeDActionButton, { type: "submit", disabled: inviteEmail.length < 5 || isInviting, isLoading: isInviting, className: "w-full" }, "Send Invitation"), /* @__PURE__ */ React52.createElement("button", { type: "button", onClick: () => {
|
|
5771
5800
|
setIsInviteMode(false);
|
|
5772
5801
|
setInviteEmail("");
|
|
5773
|
-
}, disabled: isInviting, className: "w-full flex items-center justify-center py-2.5 rounded-full border border-stone-200 text-black hover:bg-stone-50 transition-colors outline-none text-xs tracking-wide" }, "Cancel"))) : isMembersLoading || isTyping ? /* @__PURE__ */ React52.createElement(PageSpinner8, null) : /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col min-w-0 animate-in fade-in duration-300" }, /* @__PURE__ */ React52.createElement("div", null, members.length === 0 ? /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-stone-400 py-6 text-center" }, "No members found") : members.map((member) => /* @__PURE__ */ React52.createElement("div", { key: member.id, onClick: () => setExpandedId(member.id), className: "flex items-center justify-between py-3 hover:bg-stone-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React52.createElement(MemberAvatar3, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ React52.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5" }, /* @__PURE__ */ React52.createElement("p", { className: "text-sm text-black truncate" }, member.fullName), /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-stone-500 capitalize truncate" }, member.role.toLowerCase())))))), /* @__PURE__ */ React52.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ React52.createElement("span", { className: "text-xs text-stone-400 tracking-[0.2em]" }, "Page ", membersCurrentPage, " of ", membersTotalPages === 0 ? 1 : membersTotalPages), /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React52.createElement("button", { onClick: () => onMembersPageChange(membersCurrentPage - 1), disabled: membersCurrentPage <= 1 || isMembersLoading, className: "p-2 bg-white border border-stone-200 rounded-full text-black hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: ArrowLeft01Icon18, size: 14 })), /* @__PURE__ */ React52.createElement("button", { onClick: () => onMembersPageChange(membersCurrentPage + 1), disabled: membersCurrentPage >= membersTotalPages || isMembersLoading || membersTotalPages === 0, className: "p-2 bg-white border border-stone-200 rounded-full text-black hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: ArrowRight01Icon13, size: 14 })))))))), /* @__PURE__ */ React52.createElement(ReusableOptions, { isOpen: isStatusModalOpen, onClose: () => setIsStatusModalOpen(false), title: "Status Filter", options: ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"], selectedOption: activeStatusFilter, onSelect: (status) => onStatusFilterChange(status) }), /* @__PURE__ */ React52.createElement(ReusableOptions, { isOpen: isRoleModalOpen, onClose: () => setIsRoleModalOpen(false), title: "Role Filter", options: ["ALL", "OWNER", "ADMIN", "MANAGER", "MEMBER", "GUEST"], selectedOption: activeRoleFilter, onSelect: (role) => onRoleFilterChange(role) }), /* @__PURE__ */ React52.createElement(ReusableOptions, { isOpen: !!roleEditTarget, onClose: () => setRoleEditTarget(null), title: "Modify Access Role", options: ["ADMIN", "MANAGER", "MEMBER"], selectedOption: roleEditTarget?.role || "", onSelect: handleRoleUpdate })), activeTab === "ORGANIZATION" && isOrg && /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-8 animate-in rounded-2xl p-6 bg-white fade-in duration-300" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React52.createElement("div", { className: "relative group cursor-pointer shrink-0", onClick: () => canManage && !isSavingOrg ? orgFileInputRef.current?.click() : void 0 }, /* @__PURE__ */ React52.createElement(OrgAvatar2, { src: orgAvatarUrl, sizeClass: "w-14 h-14" }), canManage && /* @__PURE__ */ React52.createElement("div", { className: "absolute -bottom-1 -right-1 w-6 h-6 bg-white border border-stone-200 rounded-full flex items-center justify-center text-stone-500 group-hover:text-black transition-colors z-10" }, isUploadingOrgAvatar ? /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: Loading03Icon25, size: 12, className: "animate-spin" }) : /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon:
|
|
5802
|
+
}, disabled: isInviting, className: "w-full flex items-center justify-center py-2.5 rounded-full border border-stone-200 text-black hover:bg-stone-50 transition-colors outline-none text-xs tracking-wide" }, "Cancel"))) : isMembersLoading || isTyping ? /* @__PURE__ */ React52.createElement(PageSpinner8, null) : /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col min-w-0 animate-in fade-in duration-300" }, /* @__PURE__ */ React52.createElement("div", null, members.length === 0 ? /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-stone-400 py-6 text-center" }, "No members found") : members.map((member) => /* @__PURE__ */ React52.createElement("div", { key: member.id, onClick: () => setExpandedId(member.id), className: "flex items-center justify-between py-3 hover:bg-stone-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React52.createElement(MemberAvatar3, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ React52.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5" }, /* @__PURE__ */ React52.createElement("p", { className: "text-sm text-black truncate" }, member.fullName), /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-stone-500 capitalize truncate" }, member.role.toLowerCase())))))), /* @__PURE__ */ React52.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ React52.createElement("span", { className: "text-xs text-stone-400 tracking-[0.2em]" }, "Page ", membersCurrentPage, " of ", membersTotalPages === 0 ? 1 : membersTotalPages), /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React52.createElement("button", { onClick: () => onMembersPageChange(membersCurrentPage - 1), disabled: membersCurrentPage <= 1 || isMembersLoading, className: "p-2 bg-white border border-stone-200 rounded-full text-black hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: ArrowLeft01Icon18, size: 14 })), /* @__PURE__ */ React52.createElement("button", { onClick: () => onMembersPageChange(membersCurrentPage + 1), disabled: membersCurrentPage >= membersTotalPages || isMembersLoading || membersTotalPages === 0, className: "p-2 bg-white border border-stone-200 rounded-full text-black hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: ArrowRight01Icon13, size: 14 })))))))), /* @__PURE__ */ React52.createElement(ReusableOptions, { isOpen: isStatusModalOpen, onClose: () => setIsStatusModalOpen(false), title: "Status Filter", options: ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"], selectedOption: activeStatusFilter, onSelect: (status) => onStatusFilterChange(status) }), /* @__PURE__ */ React52.createElement(ReusableOptions, { isOpen: isRoleModalOpen, onClose: () => setIsRoleModalOpen(false), title: "Role Filter", options: ["ALL", "OWNER", "ADMIN", "MANAGER", "MEMBER", "GUEST"], selectedOption: activeRoleFilter, onSelect: (role) => onRoleFilterChange(role) }), /* @__PURE__ */ React52.createElement(ReusableOptions, { isOpen: !!roleEditTarget, onClose: () => setRoleEditTarget(null), title: "Modify Access Role", options: ["ADMIN", "MANAGER", "MEMBER"], selectedOption: roleEditTarget?.role || "", onSelect: handleRoleUpdate })), activeTab === "ORGANIZATION" && isOrg && /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-8 animate-in rounded-2xl p-6 bg-white fade-in duration-300" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React52.createElement("div", { className: "relative group cursor-pointer shrink-0", onClick: () => canManage && !isSavingOrg ? orgFileInputRef.current?.click() : void 0 }, /* @__PURE__ */ React52.createElement(OrgAvatar2, { src: orgAvatarUrl, sizeClass: "w-14 h-14" }), canManage && /* @__PURE__ */ React52.createElement("div", { className: "absolute -bottom-1 -right-1 w-6 h-6 bg-white border border-stone-200 rounded-full flex items-center justify-center text-stone-500 group-hover:text-black transition-colors z-10" }, isUploadingOrgAvatar ? /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: Loading03Icon25, size: 12, className: "animate-spin" }) : /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: CloudUploadIcon, size: 14 })), /* @__PURE__ */ React52.createElement("input", { type: "file", ref: orgFileInputRef, className: "hidden", accept: ".png, .jpg, .jpeg", onChange: (e) => handleFileSelect(e, "ORGANIZATION") })), /* @__PURE__ */ React52.createElement("div", null, /* @__PURE__ */ React52.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Workspace Details"), /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-stone-500" }, "Manage your organizational identity and handles."))), !canManage && /* @__PURE__ */ React52.createElement("span", { className: "p-2 w-9 h-9 bg-stone-100 text-stone-400 rounded-full shrink-0" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: CircleLock02Icon3, size: 18, className: "text-current" }))), /* @__PURE__ */ React52.createElement("form", { className: "flex flex-col gap-8 w-full max-w-5xl", onSubmit: handleSaveOrganization, autoComplete: "off" }, /* @__PURE__ */ React52.createElement(TextInput, { label: "Workspace Name", value: orgName, onChange: handleOrgNameChange, disabled: !canManage || isSavingOrg, placeholder: "Acme Corporation", maxLength: 50 }), /* @__PURE__ */ React52.createElement("div", { className: "space-y-1.5 relative w-full" }, /* @__PURE__ */ React52.createElement("label", { className: "text-xs text-stone-400 tracking-[0.2em] block" }, "Workspace Handle"), /* @__PURE__ */ React52.createElement("div", { className: "flex items-center relative w-full border-b border-stone-200 focus-within:border-black transition-all duration-300 overflow-hidden" }, /* @__PURE__ */ React52.createElement("input", { type: "text", value: orgSlug, disabled: !canManage || isSavingOrg, onChange: (e) => handleOrgSlugChange(e.target.value), spellCheck: "false", autoComplete: "off", className: "w-full pr-10 pl-0 py-3 text-sm bg-transparent text-black outline-none disabled:opacity-50 disabled:cursor-not-allowed", placeholder: "workspace-handle" }), /* @__PURE__ */ React52.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ React52.createElement(InputSpinner3, null), !isCheckingSlug && canManage && orgSlug !== initialOrgSlug && orgSlug.length >= 3 && slugAvailable === false && /* @__PURE__ */ React52.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#d97757]/10" }, /* @__PURE__ */ React52.createElement("svg", { className: "w-2 h-2 text-[#d97757]", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React52.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))), !isCheckingSlug && canManage && orgSlug !== initialOrgSlug && orgSlug.length >= 3 && slugAvailable === true && /* @__PURE__ */ React52.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ React52.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React52.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" })))))), /* @__PURE__ */ React52.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ React52.createElement(ThreeDActionButton, { type: "submit", disabled: isOrgSaveDisabled, isLoading: isSavingOrg, className: "min-w-32" }, "Save Changes"), hasOrgChanges && !isSavingOrg && canManage && /* @__PURE__ */ React52.createElement("button", { type: "button", onClick: () => {
|
|
5774
5803
|
setOrgName(initialOrgName || "");
|
|
5775
5804
|
setOrgSlug(initialOrgSlug || "");
|
|
5776
5805
|
setOrgAvatarUrl(initialOrgAvatarUrl || "");
|
|
5777
|
-
|
|
5806
|
+
setPendingOrgAvatar(null);
|
|
5807
|
+
}, className: "text-xs tracking-widest text-stone-400 hover:text-black transition-colors outline-none" }, "Cancel")))), activeTab === "ACCOUNT" && /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in duration-300" }, /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-8 rounded-2xl p-6 bg-white w-full" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React52.createElement("div", { className: "relative group cursor-pointer shrink-0", onClick: () => !isSavingProfile ? userFileInputRef.current?.click() : void 0 }, /* @__PURE__ */ React52.createElement(MemberAvatar3, { src: avatarUrl, status: "ACTIVE", sizeClass: "w-14 h-14" }), /* @__PURE__ */ React52.createElement("div", { className: "absolute -bottom-1 -right-1 w-6 h-6 bg-white border border-stone-200 rounded-full flex items-center justify-center text-stone-500 group-hover:text-black transition-colors z-20" }, isUploadingUserAvatar ? /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: Loading03Icon25, size: 12, className: "animate-spin" }) : /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: CloudUploadIcon, size: 14 })), /* @__PURE__ */ React52.createElement("input", { type: "file", ref: userFileInputRef, className: "hidden", accept: ".png, .jpg, .jpeg", onChange: (e) => handleFileSelect(e, "USER") })), /* @__PURE__ */ React52.createElement("div", null, /* @__PURE__ */ React52.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Personal Identity"), /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-stone-500" }, "Update your system display name and contact email.")))), /* @__PURE__ */ React52.createElement("form", { className: "flex flex-col gap-6 w-full max-w-5xl", onSubmit: handleSaveProfile, autoComplete: "off" }, /* @__PURE__ */ React52.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6" }, /* @__PURE__ */ React52.createElement(TextInput, { label: "First Name", value: firstName, onChange: (v) => setFirstName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "First name", maxLength: 50 }), /* @__PURE__ */ React52.createElement(TextInput, { label: "Last Name", value: lastName, onChange: (v) => setLastName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "Last name", maxLength: 50 })), /* @__PURE__ */ React52.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6" }, /* @__PURE__ */ React52.createElement(TextInput, { label: "Job Title", value: jobTitle, onChange: (v) => setJobTitle(v.substring(0, 50)), disabled: isSavingProfile, placeholder: "e.g. HR Manager, CEO", maxLength: 50 }), /* @__PURE__ */ React52.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ React52.createElement("label", { className: "text-xs text-stone-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ React52.createElement("input", { type: "email", value: initialEmail, disabled: true, className: "w-full pb-3 pt-3 text-sm bg-transparent text-stone-400 border-b border-stone-200 outline-none cursor-not-allowed" }))), /* @__PURE__ */ React52.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ React52.createElement("label", { className: "text-xs text-stone-400 tracking-[0.2em] block" }, "About Me"), /* @__PURE__ */ React52.createElement(
|
|
5778
5808
|
"textarea",
|
|
5779
5809
|
{
|
|
5780
5810
|
value: description,
|
|
5781
5811
|
onChange: (e) => setDescription(e.target.value.substring(0, 300)),
|
|
5782
5812
|
disabled: isSavingProfile,
|
|
5783
5813
|
placeholder: "A short shout about yourself...",
|
|
5784
|
-
className: "w-full pb-3 pt-3 text-sm bg-transparent text-black border-b border-stone-200 outline-none focus:border-
|
|
5814
|
+
className: "w-full pb-3 pt-3 text-sm bg-transparent text-black border-b border-stone-200 outline-none focus:border-[#d97757] transition-all duration-300 resize-none h-20 custom-scrollbar",
|
|
5785
5815
|
maxLength: 300
|
|
5786
5816
|
}
|
|
5787
5817
|
)), /* @__PURE__ */ React52.createElement("div", { className: "pt-4 flex items-center gap-4" }, /* @__PURE__ */ React52.createElement(ThreeDActionButton, { type: "submit", disabled: isProfileSaveDisabled, isLoading: isSavingProfile, className: "min-w-32" }, "Update Identity")))), /* @__PURE__ */ React52.createElement("div", { className: "bg-white rounded-2xl p-6 w-full flex flex-col sm:flex-row sm:items-center justify-between gap-6 border border-stone-100" }, /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col items-start max-w-sm" }, /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-stone-400 tracking-[0.2em] mb-2 uppercase" }, "AI Credits Balance"), isBillingLoading ? /* @__PURE__ */ React52.createElement("div", { className: "h-8 w-32 bg-stone-100 animate-pulse rounded mt-1" }) : /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: Coins01Icon, size: 28, className: "text-[#d97757]" }), /* @__PURE__ */ React52.createElement("span", { className: "text-3xl text-black tracking-tight" }, aiCredits)), /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-stone-500 mt-4 leading-relaxed" }, "AI credits are consumed when generating intelligent summaries, transcriptions, and automated huddle insights.")), /* @__PURE__ */ React52.createElement("button", { onClick: onTopUp, className: "w-12 h-12 rounded-full border border-stone-200 flex items-center justify-center text-black hover:bg-stone-50 transition-colors outline-none shrink-0", "aria-label": "Top Up Credits" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon38, { icon: PlusSignIcon3, size: 20 })))));
|