@retinalabsllc/zairusjs 4.0.16 → 4.0.17
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 +203 -195
- package/dist/index.mjs +201 -193
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1644,7 +1644,7 @@ import {
|
|
|
1644
1644
|
} from "@hugeicons/core-free-icons";
|
|
1645
1645
|
var ButtonSpinner = () => /* @__PURE__ */ React25.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React25.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React25.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
1646
1646
|
var ECOSYSTEM_APPS = [
|
|
1647
|
-
{ id: "desktop", name: "Retina", description: "Ai Document Editor", iconSrc: "https://retinalabs.company/assets/images/
|
|
1647
|
+
{ id: "desktop", name: "Retina", description: "Ai Document Editor", iconSrc: "https://retinalabs.company/assets/images/retina_.avif", url: "https://app.retinaapps.com/" },
|
|
1648
1648
|
{ id: "audditur", name: "Audditur", description: "AI Legal & Compliance", iconSrc: "https://retinalabs.company/assets/images/audditur.avif", url: "https://app.audditur.com/" }
|
|
1649
1649
|
];
|
|
1650
1650
|
var UniversalSidebar = ({
|
|
@@ -1742,7 +1742,7 @@ var UniversalSidebar = ({
|
|
|
1742
1742
|
alt: currentAppConfig.name,
|
|
1743
1743
|
className: "w-7 h-7 rounded-md object-contain shrink-0"
|
|
1744
1744
|
}
|
|
1745
|
-
) : /* @__PURE__ */ React25.createElement("div", { className: " rounded-md shrink-0 flex items-center justify-center" }), (!isCollapsed || isMobileOpen) && /* @__PURE__ */ React25.createElement("div", { className: "flex flex-col justify-center min-w-0 pr-2 flex-1" }, /* @__PURE__ */ React25.createElement("span", { className: "text-[13px] text
|
|
1745
|
+
) : /* @__PURE__ */ React25.createElement("div", { className: " rounded-md shrink-0 flex items-center justify-center" }), (!isCollapsed || isMobileOpen) && /* @__PURE__ */ React25.createElement("div", { className: "flex flex-col justify-center min-w-0 pr-2 flex-1" }, /* @__PURE__ */ React25.createElement("span", { className: "text-[13px] gradient-text leading-none truncate tracking-wide mb-1" }, title), subtitle && /* @__PURE__ */ React25.createElement("span", { className: "text-[9px] text-neutral-500 truncate tracking-[0.2em] leading-none " }, subtitle))), /* @__PURE__ */ React25.createElement("div", { className: "md:hidden flex shrink-0" }, /* @__PURE__ */ React25.createElement(
|
|
1746
1746
|
"button",
|
|
1747
1747
|
{
|
|
1748
1748
|
onClick: closeMobile,
|
|
@@ -1964,7 +1964,7 @@ var UniversalOrganizationPage = ({
|
|
|
1964
1964
|
};
|
|
1965
1965
|
const hasChanges = orgName !== initialOrgName || slug !== initialSlug;
|
|
1966
1966
|
const isSaveDisabled = isSubmitting || isReadOnly || isCheckingSlug || !hasChanges || orgName.length < 3 || slug.length < 3 || slug !== initialSlug && slugAvailable === false;
|
|
1967
|
-
return /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-5xl rounded-2xl p-6 bg-white fade-in duration-300 " }, /* @__PURE__ */ React26.createElement(ManagedToaster, null), /* @__PURE__ */ React26.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("h1", { className: "
|
|
1967
|
+
return /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-5xl rounded-2xl p-6 bg-white fade-in duration-300 " }, /* @__PURE__ */ React26.createElement(ManagedToaster, null), /* @__PURE__ */ React26.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("h1", { className: " gradient-text text-xl mb-1 tracking-tight" }, "Organization"), /* @__PURE__ */ React26.createElement("p", { className: "text-xs text-neutral-500" }, "Manage your tenant workspace details and identity.")), isReadOnly && /* @__PURE__ */ React26.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-50 text-neutral-500 rounded-full " }, /* @__PURE__ */ React26.createElement(HugeiconsIcon13, { icon: CircleLock02Icon, size: 18, className: "text-current" }))), /* @__PURE__ */ React26.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ React26.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ React26.createElement(
|
|
1968
1968
|
TextInput,
|
|
1969
1969
|
{
|
|
1970
1970
|
label: "Organization Name",
|
|
@@ -2088,7 +2088,7 @@ var UniversalIdentityPage = ({
|
|
|
2088
2088
|
};
|
|
2089
2089
|
const hasChanges = primaryValue !== initialPrimaryValue || secondaryValue !== initialSecondaryValue;
|
|
2090
2090
|
const isSaveDisabled = isSubmitting || isReadOnly || !hasChanges || primaryValue.trim().length < 3;
|
|
2091
|
-
return /* @__PURE__ */ React27.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-5xl rounded-2xl p-6 bg-white fade-in duration-300 " }, /* @__PURE__ */ React27.createElement(ManagedToaster, null), /* @__PURE__ */ React27.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React27.createElement("div", null, /* @__PURE__ */ React27.createElement("h1", { className: "
|
|
2091
|
+
return /* @__PURE__ */ React27.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-5xl rounded-2xl p-6 bg-white fade-in duration-300 " }, /* @__PURE__ */ React27.createElement(ManagedToaster, null), /* @__PURE__ */ React27.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React27.createElement("div", null, /* @__PURE__ */ React27.createElement("h1", { className: " gradient-text text-xl mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ React27.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription)), isReadOnly && /* @__PURE__ */ React27.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-50 text-neutral-500 rounded-full " }, /* @__PURE__ */ React27.createElement(HugeiconsIcon14, { icon: CircleLock02Icon2, size: 18, className: "text-current" }))), /* @__PURE__ */ React27.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ React27.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ React27.createElement(
|
|
2092
2092
|
TextInput,
|
|
2093
2093
|
{
|
|
2094
2094
|
label: primaryInputLabel,
|
|
@@ -2157,9 +2157,9 @@ var UniversalIdentityPage = ({
|
|
|
2157
2157
|
};
|
|
2158
2158
|
|
|
2159
2159
|
// src/components/UniversalMembersPage.tsx
|
|
2160
|
-
import
|
|
2160
|
+
import React29, { useState as useState17, useEffect as useEffect14, useRef as useRef9 } from "react";
|
|
2161
2161
|
import toast4 from "react-hot-toast";
|
|
2162
|
-
import { HugeiconsIcon as
|
|
2162
|
+
import { HugeiconsIcon as HugeiconsIcon16 } from "@hugeicons/react";
|
|
2163
2163
|
import {
|
|
2164
2164
|
UserAdd01Icon,
|
|
2165
2165
|
ArrowLeft01Icon as ArrowLeft01Icon3,
|
|
@@ -2168,8 +2168,73 @@ import {
|
|
|
2168
2168
|
ArrowDown01Icon,
|
|
2169
2169
|
Loading03Icon as Loading03Icon6
|
|
2170
2170
|
} from "@hugeicons/core-free-icons";
|
|
2171
|
-
|
|
2172
|
-
|
|
2171
|
+
|
|
2172
|
+
// src/components/Banner.tsx
|
|
2173
|
+
import React28, { useState as useState16 } from "react";
|
|
2174
|
+
import { HugeiconsIcon as HugeiconsIcon15 } from "@hugeicons/react";
|
|
2175
|
+
import {
|
|
2176
|
+
Alert02Icon,
|
|
2177
|
+
CheckmarkBadge01Icon,
|
|
2178
|
+
InformationCircleIcon,
|
|
2179
|
+
Cancel01Icon
|
|
2180
|
+
} from "@hugeicons/core-free-icons";
|
|
2181
|
+
var Banner = ({
|
|
2182
|
+
title,
|
|
2183
|
+
message,
|
|
2184
|
+
type,
|
|
2185
|
+
icon,
|
|
2186
|
+
isDismissible = true,
|
|
2187
|
+
onDismiss,
|
|
2188
|
+
action
|
|
2189
|
+
}) => {
|
|
2190
|
+
const [isVisible, setIsVisible] = useState16(true);
|
|
2191
|
+
if (!isVisible) return null;
|
|
2192
|
+
const handleDismiss = () => {
|
|
2193
|
+
setIsVisible(false);
|
|
2194
|
+
if (onDismiss) onDismiss();
|
|
2195
|
+
};
|
|
2196
|
+
const config = {
|
|
2197
|
+
success: {
|
|
2198
|
+
bg: "bg-emerald-50",
|
|
2199
|
+
iconColor: "text-emerald-600",
|
|
2200
|
+
titleColor: "text-emerald-900",
|
|
2201
|
+
msgColor: "text-emerald-700",
|
|
2202
|
+
defaultIcon: CheckmarkBadge01Icon,
|
|
2203
|
+
closeHover: "hover:bg-emerald-100 text-emerald-500"
|
|
2204
|
+
},
|
|
2205
|
+
warning: {
|
|
2206
|
+
bg: "bg-amber-50",
|
|
2207
|
+
iconColor: "text-amber-600",
|
|
2208
|
+
titleColor: "text-amber-900",
|
|
2209
|
+
msgColor: "text-amber-700",
|
|
2210
|
+
defaultIcon: InformationCircleIcon,
|
|
2211
|
+
closeHover: "hover:bg-amber-100 text-amber-500"
|
|
2212
|
+
},
|
|
2213
|
+
alert: {
|
|
2214
|
+
bg: "bg-red-50",
|
|
2215
|
+
iconColor: "text-red-600",
|
|
2216
|
+
titleColor: "text-red-900",
|
|
2217
|
+
msgColor: "text-red-700",
|
|
2218
|
+
defaultIcon: Alert02Icon,
|
|
2219
|
+
closeHover: "hover:bg-red-100 text-red-500"
|
|
2220
|
+
}
|
|
2221
|
+
};
|
|
2222
|
+
const currentConfig = config[type];
|
|
2223
|
+
const IconToUse = icon || currentConfig.defaultIcon;
|
|
2224
|
+
return /* @__PURE__ */ React28.createElement("div", { className: `relative w-full rounded-2xl p-4 flex items-start gap-4 transition-all duration-300 animate-in fade-in slide-in-from-top-2 ${currentConfig.bg}` }, /* @__PURE__ */ React28.createElement("div", { className: `shrink-0 mt-0.5 ${currentConfig.iconColor}` }, /* @__PURE__ */ React28.createElement(HugeiconsIcon15, { icon: IconToUse, size: 20 })), /* @__PURE__ */ React28.createElement("div", { className: "flex-1 flex flex-col min-w-0 pr-6" }, /* @__PURE__ */ React28.createElement("h4", { className: `text-sm tracking-tight mb-1 ${currentConfig.titleColor}` }, title), /* @__PURE__ */ React28.createElement("p", { className: `text-xs leading-relaxed ${currentConfig.msgColor}` }, message), action && /* @__PURE__ */ React28.createElement("div", { className: "mt-3" }, action)), isDismissible && /* @__PURE__ */ React28.createElement(
|
|
2225
|
+
"button",
|
|
2226
|
+
{
|
|
2227
|
+
onClick: handleDismiss,
|
|
2228
|
+
className: `absolute top-3 right-3 p-1.5 rounded-full transition-colors outline-none shrink-0 ${currentConfig.closeHover}`,
|
|
2229
|
+
"aria-label": "Dismiss banner"
|
|
2230
|
+
},
|
|
2231
|
+
/* @__PURE__ */ React28.createElement(HugeiconsIcon15, { icon: Cancel01Icon, size: 16 })
|
|
2232
|
+
));
|
|
2233
|
+
};
|
|
2234
|
+
|
|
2235
|
+
// src/components/UniversalMembersPage.tsx
|
|
2236
|
+
var ButtonSpinner3 = () => /* @__PURE__ */ React29.createElement(HugeiconsIcon16, { icon: Loading03Icon6, size: 16, className: "animate-spin text-white" });
|
|
2237
|
+
var PageSpinner2 = () => /* @__PURE__ */ React29.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React29.createElement(HugeiconsIcon16, { icon: Loading03Icon6, size: 32, className: "animate-spin mb-4 text-black" }));
|
|
2173
2238
|
var getInitials = (name) => {
|
|
2174
2239
|
if (!name) return "U";
|
|
2175
2240
|
const parts = name.trim().split(" ");
|
|
@@ -2212,16 +2277,16 @@ var UniversalMembersPage = ({
|
|
|
2212
2277
|
onRemoveMember,
|
|
2213
2278
|
onUpdateRole
|
|
2214
2279
|
}) => {
|
|
2215
|
-
const [currentView, setCurrentView] =
|
|
2216
|
-
const [selectedMember, setSelectedMember] =
|
|
2217
|
-
const [inviteEmail, setInviteEmail] =
|
|
2218
|
-
const [inviteFirst, setInviteFirst] =
|
|
2219
|
-
const [inviteLast, setInviteLast] =
|
|
2220
|
-
const [isInviting, setIsInviting] =
|
|
2221
|
-
const [isRoleModalOpen, setIsRoleModalOpen] =
|
|
2222
|
-
const [isUpdatingRole, setIsUpdatingRole] =
|
|
2223
|
-
const [memberToDelete, setMemberToDelete] =
|
|
2224
|
-
const [isDeleting, setIsDeleting] =
|
|
2280
|
+
const [currentView, setCurrentView] = useState17("list");
|
|
2281
|
+
const [selectedMember, setSelectedMember] = useState17(null);
|
|
2282
|
+
const [inviteEmail, setInviteEmail] = useState17("");
|
|
2283
|
+
const [inviteFirst, setInviteFirst] = useState17("");
|
|
2284
|
+
const [inviteLast, setInviteLast] = useState17("");
|
|
2285
|
+
const [isInviting, setIsInviting] = useState17(false);
|
|
2286
|
+
const [isRoleModalOpen, setIsRoleModalOpen] = useState17(false);
|
|
2287
|
+
const [isUpdatingRole, setIsUpdatingRole] = useState17(false);
|
|
2288
|
+
const [memberToDelete, setMemberToDelete] = useState17(null);
|
|
2289
|
+
const [isDeleting, setIsDeleting] = useState17(false);
|
|
2225
2290
|
const dropdownRef = useRef9(null);
|
|
2226
2291
|
useEffect14(() => {
|
|
2227
2292
|
function handleClickOutside(event) {
|
|
@@ -2297,15 +2362,15 @@ var UniversalMembersPage = ({
|
|
|
2297
2362
|
setSelectedMember(null);
|
|
2298
2363
|
setIsRoleModalOpen(false);
|
|
2299
2364
|
};
|
|
2300
|
-
return /* @__PURE__ */
|
|
2365
|
+
return /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-5xl fade-in duration-300 p-6 rounded-2xl bg-white " }, /* @__PURE__ */ React29.createElement(ManagedToaster, null), /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, currentView === "list" && /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement("h1", { className: " gradient-text text-xl mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ React29.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription)), canManage && /* @__PURE__ */ React29.createElement(
|
|
2301
2366
|
ThreeDActionButton,
|
|
2302
2367
|
{
|
|
2303
2368
|
onClick: () => setCurrentView("invite"),
|
|
2304
2369
|
className: "w-fit shrink-0 gap-2"
|
|
2305
2370
|
},
|
|
2306
|
-
/* @__PURE__ */
|
|
2371
|
+
/* @__PURE__ */ React29.createElement(HugeiconsIcon16, { icon: UserAdd01Icon, size: 12 }),
|
|
2307
2372
|
"Add Member"
|
|
2308
|
-
)), currentView !== "list" && /* @__PURE__ */
|
|
2373
|
+
)), currentView !== "list" && /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ React29.createElement("button", { onClick: goBack, className: "text-[11px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none" }, /* @__PURE__ */ React29.createElement(HugeiconsIcon16, { icon: ArrowLeft01Icon3, size: 12 }), " Back"), /* @__PURE__ */ React29.createElement("h1", { className: " text-lg text-black tracking-tight" }, currentView === "invite" ? "Add New Member" : "Member Profile"))), currentView === "list" && /* @__PURE__ */ React29.createElement("div", { className: "w-full overflow-hidden" }, isLoading ? /* @__PURE__ */ React29.createElement(PageSpinner2, null) : /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React29.createElement("div", { className: "divide-y divide-neutral-100" }, members.length === 0 ? /* @__PURE__ */ React29.createElement("p", { className: "text-xs text-neutral-500 py-6 text-center" }, "No organization member") : members.map((member) => /* @__PURE__ */ React29.createElement(
|
|
2309
2374
|
"div",
|
|
2310
2375
|
{
|
|
2311
2376
|
key: member.id,
|
|
@@ -2315,7 +2380,7 @@ var UniversalMembersPage = ({
|
|
|
2315
2380
|
},
|
|
2316
2381
|
className: "flex items-center justify-between p-4 sm:p-5 hover:bg-neutral-50/50 transition-colors cursor-pointer group min-w-0"
|
|
2317
2382
|
},
|
|
2318
|
-
/* @__PURE__ */
|
|
2383
|
+
/* @__PURE__ */ React29.createElement("div", { className: "flex items-center gap-3 sm:gap-4 min-w-0 flex-1" }, member.displayImage && member.displayImage !== "NO_IMAGE" ? /* @__PURE__ */ React29.createElement("div", { className: "w-10 h-10 shrink-0 rounded-full overflow-hidden bg-neutral-100" }, /* @__PURE__ */ React29.createElement(
|
|
2319
2384
|
"img",
|
|
2320
2385
|
{
|
|
2321
2386
|
src: member.displayImage,
|
|
@@ -2323,25 +2388,25 @@ var UniversalMembersPage = ({
|
|
|
2323
2388
|
className: "w-full h-full object-cover blur-sm transition-all duration-300",
|
|
2324
2389
|
onLoad: (e) => e.currentTarget.classList.remove("blur-sm")
|
|
2325
2390
|
}
|
|
2326
|
-
)) : /* @__PURE__ */
|
|
2327
|
-
/* @__PURE__ */
|
|
2328
|
-
))), /* @__PURE__ */
|
|
2391
|
+
)) : /* @__PURE__ */ React29.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center text-black text-xs ${resolveThemeColor(member.profileColor)}` }, getInitials(member.fullName)), /* @__PURE__ */ React29.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React29.createElement("p", { className: "text-sm text-black truncate pr-2 sm:pr-4" }, member.fullName, " ", member.userId === currentUserId && /* @__PURE__ */ React29.createElement("span", { className: "text-neutral-400 ml-1 sm:ml-2" }, "(You)")), /* @__PURE__ */ React29.createElement("p", { className: "text-xs text-neutral-500 truncate pr-2 sm:pr-4 mt-0.5" }, member.email))),
|
|
2392
|
+
/* @__PURE__ */ React29.createElement("div", { className: `shrink-0 pl-2 sm:pl-4 transition-opacity hidden sm:block ${canManage ? "opacity-0 group-hover:opacity-100" : "opacity-100"}` }, /* @__PURE__ */ React29.createElement("span", { className: "text-[11px] tracking-[0.2em] text-black border border-neutral-100 px-4 py-2 rounded-full bg-white whitespace-nowrap" }, canManage ? "Manage" : "View"))
|
|
2393
|
+
))), /* @__PURE__ */ React29.createElement("div", { className: "flex items-center justify-between p-4 sm:p-5" }, /* @__PURE__ */ React29.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages), /* @__PURE__ */ React29.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React29.createElement(
|
|
2329
2394
|
"button",
|
|
2330
2395
|
{
|
|
2331
2396
|
onClick: () => onPageChange(currentPage - 1),
|
|
2332
2397
|
disabled: currentPage === 1 || isLoading,
|
|
2333
2398
|
className: "p-2 border border-neutral-100 rounded-full bg-white text-neutral-500 hover:text-black hover:border-black disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
|
|
2334
2399
|
},
|
|
2335
|
-
/* @__PURE__ */
|
|
2336
|
-
), /* @__PURE__ */
|
|
2400
|
+
/* @__PURE__ */ React29.createElement(HugeiconsIcon16, { icon: ArrowLeft01Icon3, size: 14 })
|
|
2401
|
+
), /* @__PURE__ */ React29.createElement(
|
|
2337
2402
|
"button",
|
|
2338
2403
|
{
|
|
2339
2404
|
onClick: () => onPageChange(currentPage + 1),
|
|
2340
2405
|
disabled: currentPage >= totalPages || isLoading,
|
|
2341
2406
|
className: "p-2 border border-neutral-100 rounded-full bg-white text-neutral-500 hover:text-black hover:border-black disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
|
|
2342
2407
|
},
|
|
2343
|
-
/* @__PURE__ */
|
|
2344
|
-
))))), currentView === "details" && selectedMember && /* @__PURE__ */
|
|
2408
|
+
/* @__PURE__ */ React29.createElement(HugeiconsIcon16, { icon: ArrowRight01Icon3, size: 14 })
|
|
2409
|
+
))))), currentView === "details" && selectedMember && /* @__PURE__ */ React29.createElement("div", { className: "w-full max-w-5xl text-left" }, /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col gap-8" }, /* @__PURE__ */ React29.createElement("div", { className: "flex items-center gap-5" }, selectedMember.displayImage && selectedMember.displayImage !== "NO_IMAGE" ? /* @__PURE__ */ React29.createElement("div", { className: "w-16 h-16 shrink-0 rounded-full overflow-hidden bg-neutral-100" }, /* @__PURE__ */ React29.createElement(
|
|
2345
2410
|
"img",
|
|
2346
2411
|
{
|
|
2347
2412
|
src: selectedMember.displayImage,
|
|
@@ -2349,7 +2414,7 @@ var UniversalMembersPage = ({
|
|
|
2349
2414
|
className: "w-full h-full object-cover blur-sm transition-all duration-300",
|
|
2350
2415
|
onLoad: (e) => e.currentTarget.classList.remove("blur-sm")
|
|
2351
2416
|
}
|
|
2352
|
-
)) : /* @__PURE__ */
|
|
2417
|
+
)) : /* @__PURE__ */ React29.createElement("div", { className: `w-16 h-16 shrink-0 rounded-full flex items-center justify-center text-black text-sm ${resolveThemeColor(selectedMember.profileColor)}` }, getInitials(selectedMember.fullName)), /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement("h2", { className: " text-lg text-black" }, selectedMember.fullName), /* @__PURE__ */ React29.createElement("p", { className: "text-sm text-neutral-500 mt-1" }, selectedMember.email))), /* @__PURE__ */ React29.createElement("div", { className: "grid grid-cols-2 gap-6 border-t border-neutral-100 pt-8" }, /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-3" }, "Role"), canChangeRoles && selectedMember.userId !== currentUserId ? /* @__PURE__ */ React29.createElement(
|
|
2353
2418
|
"button",
|
|
2354
2419
|
{
|
|
2355
2420
|
onClick: () => !isUpdatingRole && setIsRoleModalOpen(true),
|
|
@@ -2357,16 +2422,24 @@ var UniversalMembersPage = ({
|
|
|
2357
2422
|
className: `flex items-center gap-3 text-xs text-black pl-4 pr-3 py-2 border rounded-full transition-colors disabled:opacity-50 outline-none ${isRoleModalOpen ? "bg-neutral-50 border-neutral-300" : "bg-white border-neutral-100 hover:bg-neutral-50"}`
|
|
2358
2423
|
},
|
|
2359
2424
|
selectedMember.role,
|
|
2360
|
-
isUpdatingRole ? /* @__PURE__ */
|
|
2361
|
-
) : /* @__PURE__ */
|
|
2425
|
+
isUpdatingRole ? /* @__PURE__ */ React29.createElement(ButtonSpinner3, null) : /* @__PURE__ */ React29.createElement(HugeiconsIcon16, { icon: ArrowDown01Icon, size: 14, className: "text-neutral-400" })
|
|
2426
|
+
) : /* @__PURE__ */ React29.createElement("span", { className: "text-xs text-black bg-neutral-50 px-4 py-2 rounded-full inline-block" }, selectedMember.role)), /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-3" }, "Joined Date"), /* @__PURE__ */ React29.createElement("span", { className: "text-sm text-black" }, new Date(selectedMember.joinedAt).toLocaleDateString()))), canManage && selectedMember.userId !== currentUserId && /* @__PURE__ */ React29.createElement("div", { className: "pt-8 mt-2 border-t border-neutral-100" }, /* @__PURE__ */ React29.createElement(
|
|
2362
2427
|
"button",
|
|
2363
2428
|
{
|
|
2364
2429
|
onClick: () => setMemberToDelete(selectedMember),
|
|
2365
2430
|
className: "flex items-center gap-2 text-[11px] tracking-widest text-red-600 hover:text-red-700 transition-colors w-fit outline-none"
|
|
2366
2431
|
},
|
|
2367
|
-
/* @__PURE__ */
|
|
2432
|
+
/* @__PURE__ */ React29.createElement(HugeiconsIcon16, { icon: Delete01Icon, size: 14 }),
|
|
2368
2433
|
" Remove Member"
|
|
2369
|
-
)))), currentView === "invite" && canManage && /* @__PURE__ */
|
|
2434
|
+
)))), currentView === "invite" && canManage && /* @__PURE__ */ React29.createElement("div", { className: "w-full max-w-5xl text-left" }, /* @__PURE__ */ React29.createElement("form", { onSubmit: handleInvite, className: "space-y-8", autoComplete: "off" }, /* @__PURE__ */ React29.createElement(
|
|
2435
|
+
Banner,
|
|
2436
|
+
{
|
|
2437
|
+
title: "Universal Workspace Access",
|
|
2438
|
+
message: "Any member you add here will be granted access across your Retina Organization accounts. These permissions are universal.",
|
|
2439
|
+
type: "warning",
|
|
2440
|
+
isDismissible: false
|
|
2441
|
+
}
|
|
2442
|
+
), /* @__PURE__ */ React29.createElement(
|
|
2370
2443
|
TextInput,
|
|
2371
2444
|
{
|
|
2372
2445
|
label: "Email Address",
|
|
@@ -2375,7 +2448,7 @@ var UniversalMembersPage = ({
|
|
|
2375
2448
|
disabled: isInviting,
|
|
2376
2449
|
placeholder: "developer@acme.com"
|
|
2377
2450
|
}
|
|
2378
|
-
), requireNamesForInvite && /* @__PURE__ */
|
|
2451
|
+
), requireNamesForInvite && /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col sm:flex-row gap-6" }, /* @__PURE__ */ React29.createElement(
|
|
2379
2452
|
TextInput,
|
|
2380
2453
|
{
|
|
2381
2454
|
label: "First Name",
|
|
@@ -2384,7 +2457,7 @@ var UniversalMembersPage = ({
|
|
|
2384
2457
|
disabled: isInviting,
|
|
2385
2458
|
placeholder: "Jane"
|
|
2386
2459
|
}
|
|
2387
|
-
), /* @__PURE__ */
|
|
2460
|
+
), /* @__PURE__ */ React29.createElement(
|
|
2388
2461
|
TextInput,
|
|
2389
2462
|
{
|
|
2390
2463
|
label: "Last Name",
|
|
@@ -2393,7 +2466,7 @@ var UniversalMembersPage = ({
|
|
|
2393
2466
|
disabled: isInviting,
|
|
2394
2467
|
placeholder: "Doe"
|
|
2395
2468
|
}
|
|
2396
|
-
)), /* @__PURE__ */
|
|
2469
|
+
)), /* @__PURE__ */ React29.createElement("div", { className: "pt-4 mt-2" }, /* @__PURE__ */ React29.createElement(
|
|
2397
2470
|
ThreeDActionButton,
|
|
2398
2471
|
{
|
|
2399
2472
|
type: "submit",
|
|
@@ -2402,7 +2475,7 @@ var UniversalMembersPage = ({
|
|
|
2402
2475
|
className: "min-w-40"
|
|
2403
2476
|
},
|
|
2404
2477
|
"Send Invitation"
|
|
2405
|
-
)))), isRoleModalOpen && canChangeRoles && /* @__PURE__ */
|
|
2478
|
+
)))), isRoleModalOpen && canChangeRoles && /* @__PURE__ */ React29.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React29.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isUpdatingRole && setIsRoleModalOpen(false) }), /* @__PURE__ */ React29.createElement("div", { ref: dropdownRef, 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__ */ React29.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React29.createElement("h3", { className: " text-[14px] text-black tracking-tight" }, "Update Role")), /* @__PURE__ */ React29.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, availableRoles.map((roleOption) => /* @__PURE__ */ React29.createElement(
|
|
2406
2479
|
"button",
|
|
2407
2480
|
{
|
|
2408
2481
|
key: roleOption,
|
|
@@ -2410,9 +2483,9 @@ var UniversalMembersPage = ({
|
|
|
2410
2483
|
disabled: isUpdatingRole,
|
|
2411
2484
|
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${selectedMember?.role === roleOption ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
|
|
2412
2485
|
},
|
|
2413
|
-
/* @__PURE__ */
|
|
2414
|
-
selectedMember?.role === roleOption && /* @__PURE__ */
|
|
2415
|
-
))), /* @__PURE__ */
|
|
2486
|
+
/* @__PURE__ */ React29.createElement("span", { className: "truncate pr-2" }, roleOption),
|
|
2487
|
+
selectedMember?.role === roleOption && /* @__PURE__ */ React29.createElement("div", null)
|
|
2488
|
+
))), /* @__PURE__ */ React29.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React29.createElement(
|
|
2416
2489
|
"button",
|
|
2417
2490
|
{
|
|
2418
2491
|
onClick: () => setIsRoleModalOpen(false),
|
|
@@ -2420,13 +2493,13 @@ var UniversalMembersPage = ({
|
|
|
2420
2493
|
className: "w-full py-2.5 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none"
|
|
2421
2494
|
},
|
|
2422
2495
|
"Cancel"
|
|
2423
|
-
)))), memberToDelete && canManage && /* @__PURE__ */
|
|
2496
|
+
)))), memberToDelete && canManage && /* @__PURE__ */ React29.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React29.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isDeleting && setMemberToDelete(null) }), /* @__PURE__ */ React29.createElement("div", { 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__ */ React29.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React29.createElement("h3", { className: " text-[17px] text-black tracking-tight mb-1" }, "Remove Member"), /* @__PURE__ */ React29.createElement("p", { className: "text-[11px] text-neutral-500 leading-snug mt-2" }, "Are you sure you want to remove this member? They will lose access instantly.")), /* @__PURE__ */ React29.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React29.createElement("button", { onClick: () => setMemberToDelete(null), disabled: isDeleting, className: "flex-1 py-3 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none" }, "Cancel"), /* @__PURE__ */ React29.createElement("button", { onClick: handleDelete, disabled: isDeleting, className: "flex-1 py-3 text-[13px] text-red-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 flex justify-center outline-none" }, isDeleting ? /* @__PURE__ */ React29.createElement(ButtonSpinner3, null) : "Remove")))));
|
|
2424
2497
|
};
|
|
2425
2498
|
|
|
2426
2499
|
// src/components/UniversalProfileSettings.tsx
|
|
2427
|
-
import
|
|
2500
|
+
import React30, { useState as useState18, useEffect as useEffect15 } from "react";
|
|
2428
2501
|
import toast5 from "react-hot-toast";
|
|
2429
|
-
import { HugeiconsIcon as
|
|
2502
|
+
import { HugeiconsIcon as HugeiconsIcon17 } from "@hugeicons/react";
|
|
2430
2503
|
import {
|
|
2431
2504
|
CircleLock02Icon as CircleLock02Icon3
|
|
2432
2505
|
} from "@hugeicons/core-free-icons";
|
|
@@ -2439,9 +2512,9 @@ var UniversalProfileSettings = ({
|
|
|
2439
2512
|
isReadOnly = false,
|
|
2440
2513
|
onSaveProfile
|
|
2441
2514
|
}) => {
|
|
2442
|
-
const [firstName, setFirstName] =
|
|
2443
|
-
const [lastName, setLastName] =
|
|
2444
|
-
const [isSubmitting, setIsSubmitting] =
|
|
2515
|
+
const [firstName, setFirstName] = useState18(initialFirstName);
|
|
2516
|
+
const [lastName, setLastName] = useState18(initialLastName);
|
|
2517
|
+
const [isSubmitting, setIsSubmitting] = useState18(false);
|
|
2445
2518
|
useEffect15(() => {
|
|
2446
2519
|
setFirstName(initialFirstName || "");
|
|
2447
2520
|
setLastName(initialLastName || "");
|
|
@@ -2472,7 +2545,7 @@ var UniversalProfileSettings = ({
|
|
|
2472
2545
|
};
|
|
2473
2546
|
const hasChanges = firstName !== initialFirstName || lastName !== initialLastName;
|
|
2474
2547
|
const isSaveDisabled = isSubmitting || isReadOnly || !hasChanges || firstName.trim().length === 0 || lastName.trim().length === 0;
|
|
2475
|
-
return /* @__PURE__ */
|
|
2548
|
+
return /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col max-w-5xl rounded-2xl p-6 bg-white gap-8 animate-in fade-in duration-300 " }, /* @__PURE__ */ React30.createElement(ManagedToaster, null), /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ React30.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React30.createElement("h1", { className: " gradient-text text-xl mb-1 truncate tracking-tight" }, "Personal Settings"), /* @__PURE__ */ React30.createElement("p", { className: "text-xs text-neutral-500 truncate" }, "Manage your personal account profile.")), isReadOnly && /* @__PURE__ */ React30.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-50 text-neutral-500 rounded-full " }, /* @__PURE__ */ React30.createElement(HugeiconsIcon17, { icon: CircleLock02Icon3, size: 18, className: "text-current" }))), /* @__PURE__ */ React30.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ React30.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col sm:flex-row gap-6" }, /* @__PURE__ */ React30.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React30.createElement(
|
|
2476
2549
|
TextInput,
|
|
2477
2550
|
{
|
|
2478
2551
|
label: "First Name",
|
|
@@ -2481,7 +2554,7 @@ var UniversalProfileSettings = ({
|
|
|
2481
2554
|
disabled: isReadOnly || isSubmitting,
|
|
2482
2555
|
placeholder: "System"
|
|
2483
2556
|
}
|
|
2484
|
-
)), /* @__PURE__ */
|
|
2557
|
+
)), /* @__PURE__ */ React30.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React30.createElement(
|
|
2485
2558
|
TextInput,
|
|
2486
2559
|
{
|
|
2487
2560
|
label: "Last Name",
|
|
@@ -2490,7 +2563,7 @@ var UniversalProfileSettings = ({
|
|
|
2490
2563
|
disabled: isReadOnly || isSubmitting,
|
|
2491
2564
|
placeholder: "Admin"
|
|
2492
2565
|
}
|
|
2493
|
-
))), /* @__PURE__ */
|
|
2566
|
+
))), /* @__PURE__ */ React30.createElement("div", { className: "space-y-2 min-w-0" }, /* @__PURE__ */ React30.createElement(
|
|
2494
2567
|
TextInput,
|
|
2495
2568
|
{
|
|
2496
2569
|
label: "Email ID",
|
|
@@ -2499,7 +2572,7 @@ var UniversalProfileSettings = ({
|
|
|
2499
2572
|
},
|
|
2500
2573
|
disabled: true
|
|
2501
2574
|
}
|
|
2502
|
-
), /* @__PURE__ */
|
|
2575
|
+
), /* @__PURE__ */ React30.createElement("p", { className: "text-[11px] text-neutral-400 mt-1 truncate" }, "To change your email address, please contact support.")), /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between pt-8 mt-2 gap-6 sm:gap-4 " }, /* @__PURE__ */ React30.createElement("div", { className: "flex items-center gap-6 min-w-0" }, /* @__PURE__ */ React30.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React30.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block truncate " }, "Account Status"), /* @__PURE__ */ React30.createElement("span", { className: "text-xs text-black block truncate" }, accountStatus)), /* @__PURE__ */ React30.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React30.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block truncate " }, "Member Since"), /* @__PURE__ */ React30.createElement("span", { className: "text-xs text-black block truncate" }, memberSince ? new Date(memberSince).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) : "N/A"))), /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col-reverse sm:flex-row items-center gap-3 sm:gap-4 w-full sm:w-auto shrink-0" }, hasChanges && !isSubmitting && !isReadOnly && /* @__PURE__ */ React30.createElement(
|
|
2503
2576
|
"button",
|
|
2504
2577
|
{
|
|
2505
2578
|
type: "button",
|
|
@@ -2510,7 +2583,7 @@ var UniversalProfileSettings = ({
|
|
|
2510
2583
|
className: "text-[11px] tracking-widest text-neutral-500 hover:text-black transition-colors w-full sm:w-auto py-2 sm:py-0 outline-none"
|
|
2511
2584
|
},
|
|
2512
2585
|
"Cancel"
|
|
2513
|
-
), /* @__PURE__ */
|
|
2586
|
+
), /* @__PURE__ */ React30.createElement(
|
|
2514
2587
|
ThreeDActionButton,
|
|
2515
2588
|
{
|
|
2516
2589
|
type: "submit",
|
|
@@ -2523,8 +2596,8 @@ var UniversalProfileSettings = ({
|
|
|
2523
2596
|
};
|
|
2524
2597
|
|
|
2525
2598
|
// src/components/UniversalBillingPage.tsx
|
|
2526
|
-
import
|
|
2527
|
-
import { HugeiconsIcon as
|
|
2599
|
+
import React31, { useState as useState19 } from "react";
|
|
2600
|
+
import { HugeiconsIcon as HugeiconsIcon18 } from "@hugeicons/react";
|
|
2528
2601
|
import {
|
|
2529
2602
|
ArrowLeft01Icon as ArrowLeft01Icon4,
|
|
2530
2603
|
ArrowRight01Icon as ArrowRight01Icon4,
|
|
@@ -2532,8 +2605,8 @@ import {
|
|
|
2532
2605
|
ArrowDown01Icon as ArrowDown01Icon2,
|
|
2533
2606
|
CircleLock02Icon as CircleLock02Icon4
|
|
2534
2607
|
} from "@hugeicons/core-free-icons";
|
|
2535
|
-
var PageSpinner3 = () => /* @__PURE__ */
|
|
2536
|
-
var ButtonSpinner4 = () => /* @__PURE__ */
|
|
2608
|
+
var PageSpinner3 = () => /* @__PURE__ */ React31.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React31.createElement(HugeiconsIcon18, { icon: Loading03Icon7, size: 32, className: "animate-spin mb-4 text-neutral-400" }));
|
|
2609
|
+
var ButtonSpinner4 = () => /* @__PURE__ */ React31.createElement(HugeiconsIcon18, { icon: Loading03Icon7, size: 16, className: "animate-spin text-neutral-500" });
|
|
2537
2610
|
var formatDate = (dateString) => {
|
|
2538
2611
|
if (!dateString) return "N/A";
|
|
2539
2612
|
return new Date(dateString).toLocaleDateString("en-US", {
|
|
@@ -2579,13 +2652,13 @@ var UniversalBillingPage = ({
|
|
|
2579
2652
|
onPayInvoice,
|
|
2580
2653
|
onUpdateInvoiceStatus
|
|
2581
2654
|
}) => {
|
|
2582
|
-
const [currentView, setCurrentView] =
|
|
2583
|
-
const [selectedInvoice, setSelectedInvoice] =
|
|
2584
|
-
const [isTimeframeModalOpen, setIsTimeframeModalOpen] =
|
|
2585
|
-
const [isPaying, setIsPaying] =
|
|
2586
|
-
const [isActionModalOpen, setIsActionModalOpen] =
|
|
2587
|
-
const [isUpdating, setIsUpdating] =
|
|
2588
|
-
const [twoFactorCode, setTwoFactorCode] =
|
|
2655
|
+
const [currentView, setCurrentView] = useState19("list");
|
|
2656
|
+
const [selectedInvoice, setSelectedInvoice] = useState19(null);
|
|
2657
|
+
const [isTimeframeModalOpen, setIsTimeframeModalOpen] = useState19(false);
|
|
2658
|
+
const [isPaying, setIsPaying] = useState19(false);
|
|
2659
|
+
const [isActionModalOpen, setIsActionModalOpen] = useState19(false);
|
|
2660
|
+
const [isUpdating, setIsUpdating] = useState19(false);
|
|
2661
|
+
const [twoFactorCode, setTwoFactorCode] = useState19("");
|
|
2589
2662
|
const handlePayment = async () => {
|
|
2590
2663
|
if (!selectedInvoice || isReadOnly || !onPayInvoice || isPaying) return;
|
|
2591
2664
|
setIsPaying(true);
|
|
@@ -2612,14 +2685,14 @@ var UniversalBillingPage = ({
|
|
|
2612
2685
|
setIsUpdating(false);
|
|
2613
2686
|
}
|
|
2614
2687
|
};
|
|
2615
|
-
return /* @__PURE__ */
|
|
2688
|
+
return /* @__PURE__ */ React31.createElement("div", { className: "flex max-w-5xl rounded-2xl bg-white p-6 flex-col gap-8 animate-in fade-in duration-300 " }, /* @__PURE__ */ React31.createElement(ManagedToaster, null), /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, currentView === "list" ? /* @__PURE__ */ React31.createElement("div", { className: "min-w-0 w-full" }, /* @__PURE__ */ React31.createElement("h1", { className: "text-lg gradient-text mb-1 truncate tracking-tight" }, headerTitle), /* @__PURE__ */ React31.createElement("p", { className: "text-xs text-neutral-500 truncate mb-6" }, headerDescription), showSearchAndFilter && onSearchChange && onTimeframeChange && /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col sm:flex-row gap-4 mb-4" }, /* @__PURE__ */ React31.createElement(
|
|
2616
2689
|
TextInput,
|
|
2617
2690
|
{
|
|
2618
2691
|
placeholder: "Search by ID or Name...",
|
|
2619
2692
|
value: searchQuery,
|
|
2620
2693
|
onChange: onSearchChange
|
|
2621
2694
|
}
|
|
2622
|
-
), /* @__PURE__ */
|
|
2695
|
+
), /* @__PURE__ */ React31.createElement(
|
|
2623
2696
|
"button",
|
|
2624
2697
|
{
|
|
2625
2698
|
type: "button",
|
|
@@ -2627,10 +2700,10 @@ var UniversalBillingPage = ({
|
|
|
2627
2700
|
className: "px-4 py-3 text-sm bg-transparent border-b border-neutral-100 text-black outline-none focus:border-black shrink-0 text-left"
|
|
2628
2701
|
},
|
|
2629
2702
|
timeframe === "ALL" ? "All Time" : timeframe === "24H" ? "Past 24 Hours" : timeframe === "7D" ? "Past 7 Days" : "Past 30 Days"
|
|
2630
|
-
))) : /* @__PURE__ */
|
|
2703
|
+
))) : /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ React31.createElement("button", { onClick: () => setCurrentView("list"), className: "text-[11px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none" }, /* @__PURE__ */ React31.createElement(HugeiconsIcon18, { icon: ArrowLeft01Icon4, size: 12 }), " Back")), isReadOnly && currentView === "list" && /* @__PURE__ */ React31.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-50 text-neutral-500 rounded-full " }, /* @__PURE__ */ React31.createElement(HugeiconsIcon18, { icon: CircleLock02Icon4, size: 18, className: "text-current" }))), currentView === "list" && /* @__PURE__ */ React31.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col gap-8 w-full" }, (metricPrimaryLabel || metricSecondaryLabel) && /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-start pb-8 gap-6 sm:gap-0" }, metricPrimaryLabel && /* @__PURE__ */ React31.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React31.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-2 truncate block " }, metricPrimaryLabel), /* @__PURE__ */ React31.createElement("div", { className: "text-2xl text-black tracking-tight truncate" }, formatUsd(metricPrimaryValue)), metricPrimarySubtext && /* @__PURE__ */ React31.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 tracking-widest " }, metricPrimarySubtext)), metricSecondaryLabel && /* @__PURE__ */ React31.createElement("div", { className: "min-w-0 sm:text-right" }, /* @__PURE__ */ React31.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-2 truncate block " }, metricSecondaryLabel), /* @__PURE__ */ React31.createElement("div", { className: "text-xl text-emerald-600 tracking-tight truncate" }, formatUsd(metricSecondaryValue)), metricSecondarySubtext && /* @__PURE__ */ React31.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 tracking-widest " }, metricSecondarySubtext))), !isReadOnly && showBillingOverview && /* @__PURE__ */ React31.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-8 sm:gap-4" }, /* @__PURE__ */ React31.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React31.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-3 truncate block " }, "Billing Status"), /* @__PURE__ */ React31.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React31.createElement("div", { className: `w-2 h-2 rounded-full shrink-0 ${billingStatus === "ACTIVE" ? "bg-green-500" : "bg-neutral-300"}` }), /* @__PURE__ */ React31.createElement("p", { className: "text-xs text-black tracking-widest truncate" }, billingStatus || "UNKNOWN"))), /* @__PURE__ */ React31.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React31.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-3 truncate block " }, "Next Billing Date"), /* @__PURE__ */ React31.createElement("p", { className: "text-sm text-black truncate" }, formatDate(nextBillingDate))), lastPaidDate && /* @__PURE__ */ React31.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React31.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-3 truncate block " }, "Last Paid Date"), /* @__PURE__ */ React31.createElement("p", { className: "text-sm text-neutral-600 truncate" }, formatDate(lastPaidDate)))), !isReadOnly && showUsageMetrics && usageMetrics.length > 0 && /* @__PURE__ */ React31.createElement("div", { className: "pt-8 border-t border-neutral-100" }, /* @__PURE__ */ React31.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-6 truncate block " }, "Usage & Limits"), /* @__PURE__ */ React31.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4 text-sm text-black" }, usageMetrics.map((metric, idx) => /* @__PURE__ */ React31.createElement("div", { key: idx, className: "flex justify-between pb-2" }, /* @__PURE__ */ React31.createElement("span", { className: "text-neutral-500 text-xs" }, metric.label), /* @__PURE__ */ React31.createElement("span", { className: "text-xs text-black" }, metric.value))))), /* @__PURE__ */ React31.createElement("div", { className: "pt-8 border-t border-neutral-100" }, /* @__PURE__ */ React31.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-4 truncate block " }, "Transaction History"), isLoading ? /* @__PURE__ */ React31.createElement(PageSpinner3, null) : invoices.length === 0 ? /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement("p", { className: "text-xs text-neutral-500 py-4" }, "No records found.")) : /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React31.createElement("div", { className: "divide-y divide-neutral-100" }, invoices.map((inv) => /* @__PURE__ */ React31.createElement("div", { key: inv.id, onClick: () => {
|
|
2631
2704
|
setSelectedInvoice(inv);
|
|
2632
2705
|
setCurrentView("details");
|
|
2633
|
-
}, className: "flex items-center justify-between py-4 hover:bg-neutral-50/50 cursor-pointer group min-w-0 px-2 transition-colors" }, /* @__PURE__ */
|
|
2706
|
+
}, className: "flex items-center justify-between py-4 hover:bg-neutral-50/50 cursor-pointer group min-w-0 px-2 transition-colors" }, /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col gap-1 min-w-0 flex-1" }, /* @__PURE__ */ React31.createElement("p", { className: "text-sm text-black truncate pr-4" }, capitalizeWords(inv.name)), /* @__PURE__ */ React31.createElement("p", { className: "text-xs text-neutral-500 truncate" }, inv.subtext)), /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col items-end gap-1 shrink-0 pl-4" }, /* @__PURE__ */ React31.createElement("p", { className: "text-sm text-black" }, formatUsd(inv.amountDue)), /* @__PURE__ */ React31.createElement("span", { className: `text-[9px] tracking-widest px-2 py-0.5 rounded-full ${inv.status === "PAID" ? "bg-emerald-50 text-emerald-600" : "bg-neutral-50 text-neutral-600"}` }, inv.status))))), totalPages > 1 && /* @__PURE__ */ React31.createElement("div", { className: "flex items-center justify-between pt-4 mt-2" }, /* @__PURE__ */ React31.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages), /* @__PURE__ */ React31.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React31.createElement("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1 || isLoading, className: "p-2 border border-neutral-100 rounded-full bg-white text-neutral-500 hover:text-black outline-none disabled:opacity-30" }, /* @__PURE__ */ React31.createElement(HugeiconsIcon18, { icon: ArrowLeft01Icon4, size: 14 })), /* @__PURE__ */ React31.createElement("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages || isLoading, className: "p-2 border border-neutral-100 rounded-full bg-white text-neutral-500 hover:text-black outline-none disabled:opacity-30" }, /* @__PURE__ */ React31.createElement(HugeiconsIcon18, { icon: ArrowRight01Icon4, size: 14 })))))))), currentView === "details" && selectedInvoice && /* @__PURE__ */ React31.createElement("div", { className: "w-full max-w-5xl animate-in fade-in duration-300" }, /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col gap-6 w-full" }, /* @__PURE__ */ React31.createElement("div", null, /* @__PURE__ */ React31.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Breakdown"), /* @__PURE__ */ React31.createElement("h2", { className: "text-lg text-black mb-1" }, capitalizeWords(selectedInvoice.name)), /* @__PURE__ */ React31.createElement("p", { className: "text-xs text-neutral-500" }, "Generated on ", formatDate(selectedInvoice.createdAt))), /* @__PURE__ */ React31.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 " }, /* @__PURE__ */ React31.createElement("div", null, /* @__PURE__ */ React31.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Amount"), /* @__PURE__ */ React31.createElement("p", { className: "text-xl text-black" }, formatUsd(selectedInvoice.amountDue))), /* @__PURE__ */ React31.createElement("div", null, /* @__PURE__ */ React31.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Status"), isModMode ? /* @__PURE__ */ React31.createElement(
|
|
2634
2707
|
"button",
|
|
2635
2708
|
{
|
|
2636
2709
|
onClick: () => !isUpdating && setIsActionModalOpen(true),
|
|
@@ -2638,8 +2711,8 @@ var UniversalBillingPage = ({
|
|
|
2638
2711
|
className: `flex items-center gap-3 text-xs text-black px-3 py-1.5 mt-1 border rounded-full transition-colors disabled:opacity-50 outline-none ${isActionModalOpen ? "bg-neutral-50 border-neutral-300" : "bg-white border-neutral-100 hover:bg-neutral-50"}`
|
|
2639
2712
|
},
|
|
2640
2713
|
selectedInvoice.status,
|
|
2641
|
-
isUpdating ? /* @__PURE__ */
|
|
2642
|
-
) : /* @__PURE__ */
|
|
2714
|
+
isUpdating ? /* @__PURE__ */ React31.createElement(ButtonSpinner4, null) : /* @__PURE__ */ React31.createElement(HugeiconsIcon18, { icon: ArrowDown01Icon2, size: 14, className: "text-neutral-400" })
|
|
2715
|
+
) : /* @__PURE__ */ React31.createElement("span", { className: `text-[11px] tracking-widest px-3 py-1 mt-1 inline-block rounded-full ${selectedInvoice.status === "PAID" ? "bg-emerald-100 text-emerald-700" : "bg-neutral-100 text-neutral-700"}` }, selectedInvoice.status)), /* @__PURE__ */ React31.createElement("div", { className: "md:col-span-2 pt-4 border-t border-neutral-100/60 mt-2" }, /* @__PURE__ */ React31.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Reference ID"), /* @__PURE__ */ React31.createElement("p", { className: "text-xs text-neutral-500 inline-block" }, selectedInvoice.id))), /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-end gap-4 pt-4" }, !isModMode && (selectedInvoice.status === "ISSUED" || selectedInvoice.status === "OVERDUE") && onPayInvoice && /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col items-end gap-2 w-full sm:w-auto" }, /* @__PURE__ */ React31.createElement(
|
|
2643
2716
|
ThreeDActionButton,
|
|
2644
2717
|
{
|
|
2645
2718
|
onClick: handlePayment,
|
|
@@ -2648,12 +2721,12 @@ var UniversalBillingPage = ({
|
|
|
2648
2721
|
className: "w-full sm:w-auto"
|
|
2649
2722
|
},
|
|
2650
2723
|
"Pay Invoice"
|
|
2651
|
-
)), !isModMode && selectedInvoice.status === "PAID" && /* @__PURE__ */
|
|
2724
|
+
)), !isModMode && selectedInvoice.status === "PAID" && /* @__PURE__ */ React31.createElement("span", { className: "text-[11px] tracking-widest text-emerald-600 px-6 py-3 bg-emerald-50 rounded-full" }, "Invoice Completed")))), isTimeframeModalOpen && showSearchAndFilter && onTimeframeChange && /* @__PURE__ */ React31.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React31.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTimeframeModalOpen(false) }), /* @__PURE__ */ React31.createElement("div", { className: "relative w-80 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React31.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React31.createElement("h3", { className: "text-[14px] text-black tracking-tight mb-2" }, "Select Timeframe"), /* @__PURE__ */ React31.createElement("p", { className: "text-[11px] text-neutral-500" }, "Choose the range of transactions to display.")), /* @__PURE__ */ React31.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, [
|
|
2652
2725
|
{ value: "ALL", label: "All Time" },
|
|
2653
2726
|
{ value: "24H", label: "Past 24 Hours" },
|
|
2654
2727
|
{ value: "7D", label: "Past 7 Days" },
|
|
2655
2728
|
{ value: "30D", label: "Past 30 Days" }
|
|
2656
|
-
].map((option) => /* @__PURE__ */
|
|
2729
|
+
].map((option) => /* @__PURE__ */ React31.createElement(
|
|
2657
2730
|
"button",
|
|
2658
2731
|
{
|
|
2659
2732
|
key: option.value,
|
|
@@ -2664,9 +2737,9 @@ var UniversalBillingPage = ({
|
|
|
2664
2737
|
},
|
|
2665
2738
|
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${timeframe === option.value ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
|
|
2666
2739
|
},
|
|
2667
|
-
/* @__PURE__ */
|
|
2668
|
-
timeframe === option.value && /* @__PURE__ */
|
|
2669
|
-
))), /* @__PURE__ */
|
|
2740
|
+
/* @__PURE__ */ React31.createElement("span", { className: "truncate pr-2" }, option.label),
|
|
2741
|
+
timeframe === option.value && /* @__PURE__ */ React31.createElement("div", null)
|
|
2742
|
+
))), /* @__PURE__ */ React31.createElement("div", { className: "w-full flex mt-2" }, /* @__PURE__ */ React31.createElement("button", { onClick: () => setIsTimeframeModalOpen(false), className: "w-full py-2.5 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none" }, "Cancel")))), isActionModalOpen && isModMode && /* @__PURE__ */ React31.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React31.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isUpdating && setIsActionModalOpen(false) }), /* @__PURE__ */ React31.createElement("div", { className: "relative w-80 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React31.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React31.createElement("h3", { className: "text-[14px] text-black tracking-tight mb-2" }, "Update Invoice Status"), /* @__PURE__ */ React31.createElement(
|
|
2670
2743
|
TextInput,
|
|
2671
2744
|
{
|
|
2672
2745
|
placeholder: "Enter 2FA Code...",
|
|
@@ -2674,7 +2747,7 @@ var UniversalBillingPage = ({
|
|
|
2674
2747
|
onChange: setTwoFactorCode,
|
|
2675
2748
|
type: "password"
|
|
2676
2749
|
}
|
|
2677
|
-
)), /* @__PURE__ */
|
|
2750
|
+
)), /* @__PURE__ */ React31.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, ["DRAFT", "ISSUED", "PAID", "VOIDED", "OVERDUE"].map((statusOption) => /* @__PURE__ */ React31.createElement(
|
|
2678
2751
|
"button",
|
|
2679
2752
|
{
|
|
2680
2753
|
key: statusOption,
|
|
@@ -2682,16 +2755,16 @@ var UniversalBillingPage = ({
|
|
|
2682
2755
|
disabled: isUpdating || !twoFactorCode,
|
|
2683
2756
|
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${selectedInvoice?.status === statusOption ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
|
|
2684
2757
|
},
|
|
2685
|
-
/* @__PURE__ */
|
|
2686
|
-
selectedInvoice?.status === statusOption && /* @__PURE__ */
|
|
2687
|
-
))), /* @__PURE__ */
|
|
2758
|
+
/* @__PURE__ */ React31.createElement("span", { className: "truncate pr-2" }, statusOption),
|
|
2759
|
+
selectedInvoice?.status === statusOption && /* @__PURE__ */ React31.createElement("div", null)
|
|
2760
|
+
))), /* @__PURE__ */ React31.createElement("div", { className: "w-full flex mt-2" }, /* @__PURE__ */ React31.createElement("button", { onClick: () => setIsActionModalOpen(false), disabled: isUpdating, className: "w-full py-2.5 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none" }, "Cancel")))));
|
|
2688
2761
|
};
|
|
2689
2762
|
|
|
2690
2763
|
// src/components/UniversalCheckoutView.tsx
|
|
2691
|
-
import
|
|
2692
|
-
import { HugeiconsIcon as
|
|
2764
|
+
import React32, { useState as useState20 } from "react";
|
|
2765
|
+
import { HugeiconsIcon as HugeiconsIcon19 } from "@hugeicons/react";
|
|
2693
2766
|
import { Loading03Icon as Loading03Icon8 } from "@hugeicons/core-free-icons";
|
|
2694
|
-
var PageSpinner4 = () => /* @__PURE__ */
|
|
2767
|
+
var PageSpinner4 = () => /* @__PURE__ */ React32.createElement("div", { className: "flex justify-center items-center py-20" }, /* @__PURE__ */ React32.createElement(HugeiconsIcon19, { icon: Loading03Icon8, size: 32, className: "animate-spin text-neutral-400" }));
|
|
2695
2768
|
var formatDate2 = (dateString) => {
|
|
2696
2769
|
if (!dateString) return "N/A";
|
|
2697
2770
|
return new Date(dateString).toLocaleDateString("en-US", {
|
|
@@ -2710,8 +2783,8 @@ var UniversalCheckoutView = ({
|
|
|
2710
2783
|
onPayInvoice,
|
|
2711
2784
|
onBackClick
|
|
2712
2785
|
}) => {
|
|
2713
|
-
const [isPaying, setIsPaying] =
|
|
2714
|
-
const [localStatus, setLocalStatus] =
|
|
2786
|
+
const [isPaying, setIsPaying] = useState20(false);
|
|
2787
|
+
const [localStatus, setLocalStatus] = useState20(null);
|
|
2715
2788
|
const handlePayment = async () => {
|
|
2716
2789
|
if (!invoice || isReadOnly || isPaying) return;
|
|
2717
2790
|
setIsPaying(true);
|
|
@@ -2725,7 +2798,7 @@ var UniversalCheckoutView = ({
|
|
|
2725
2798
|
}
|
|
2726
2799
|
};
|
|
2727
2800
|
const displayStatus = localStatus || invoice?.status;
|
|
2728
|
-
return /* @__PURE__ */
|
|
2801
|
+
return /* @__PURE__ */ React32.createElement("div", { className: "flex max-w-5xl rounded-2xl bg-white p-6 sm:p-8 flex-col gap-6 animate-in fade-in duration-300 mx-auto w-full border border-neutral-100" }, /* @__PURE__ */ React32.createElement(ManagedToaster, null), isLoading ? /* @__PURE__ */ React32.createElement(PageSpinner4, null) : !invoice ? /* @__PURE__ */ React32.createElement("div", { className: "py-12 text-center text-sm text-neutral-500" }, "Invoice not found or could not be loaded.") : /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col gap-8 w-full animate-in fade-in duration-300" }, /* @__PURE__ */ React32.createElement("div", null, /* @__PURE__ */ React32.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Checkout Summary"), /* @__PURE__ */ React32.createElement("h2", { className: "text-lg text-black mb-1" }, invoice.name), /* @__PURE__ */ React32.createElement("p", { className: "text-xs text-neutral-500" }, "Generated on ", formatDate2(invoice.createdAt))), /* @__PURE__ */ React32.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6" }, /* @__PURE__ */ React32.createElement("div", null, /* @__PURE__ */ React32.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Amount Due"), /* @__PURE__ */ React32.createElement("p", { className: "text-xl text-black" }, formatUsd2(invoice.amountDue))), /* @__PURE__ */ React32.createElement("div", null, /* @__PURE__ */ React32.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Status"), /* @__PURE__ */ React32.createElement("span", { className: `text-[11px] tracking-widest px-3 py-1 mt-1 inline-block rounded-full ${displayStatus === "PAID" ? "bg-emerald-100 text-emerald-700" : "bg-neutral-100 text-neutral-700"}` }, displayStatus)), /* @__PURE__ */ React32.createElement("div", { className: "md:col-span-2 pt-4 border-t border-neutral-200/60 mt-2" }, /* @__PURE__ */ React32.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Reference ID"), /* @__PURE__ */ React32.createElement("p", { className: "text-xs text-neutral-500 inline-block" }, invoice.invoiceNumber))), /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-end gap-4 pt-4" }, (displayStatus === "ISSUED" || displayStatus === "OVERDUE") && /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col items-end gap-2 w-full sm:w-auto" }, /* @__PURE__ */ React32.createElement(
|
|
2729
2802
|
ThreeDActionButton,
|
|
2730
2803
|
{
|
|
2731
2804
|
onClick: handlePayment,
|
|
@@ -2734,12 +2807,12 @@ var UniversalCheckoutView = ({
|
|
|
2734
2807
|
className: "w-full sm:w-auto"
|
|
2735
2808
|
},
|
|
2736
2809
|
"Pay Invoice"
|
|
2737
|
-
)), displayStatus === "PAID" && /* @__PURE__ */
|
|
2810
|
+
)), displayStatus === "PAID" && /* @__PURE__ */ React32.createElement("span", { className: "text-[12px] tracking-widest text-emerald-600 px-6 py-3 bg-emerald-50 rounded-full w-full sm:w-auto text-center" }, "Payment Successful"))));
|
|
2738
2811
|
};
|
|
2739
2812
|
|
|
2740
2813
|
// src/components/UniversalDashboardPage.tsx
|
|
2741
|
-
import
|
|
2742
|
-
import { HugeiconsIcon as
|
|
2814
|
+
import React33, { useState as useState21 } from "react";
|
|
2815
|
+
import { HugeiconsIcon as HugeiconsIcon20 } from "@hugeicons/react";
|
|
2743
2816
|
import { ArrowDown01Icon as ArrowDown01Icon3, Loading03Icon as Loading03Icon9 } from "@hugeicons/core-free-icons";
|
|
2744
2817
|
var UniversalDashboardPage = ({
|
|
2745
2818
|
headerTitle,
|
|
@@ -2751,20 +2824,20 @@ var UniversalDashboardPage = ({
|
|
|
2751
2824
|
lists,
|
|
2752
2825
|
isLoading = false
|
|
2753
2826
|
}) => {
|
|
2754
|
-
const [isTimeframeModalOpen, setIsTimeframeModalOpen] =
|
|
2827
|
+
const [isTimeframeModalOpen, setIsTimeframeModalOpen] = useState21(false);
|
|
2755
2828
|
const selectedTimeframe = timeframes.find((t) => t.id === activeTimeframe) || timeframes[0];
|
|
2756
2829
|
if (isLoading) {
|
|
2757
|
-
return /* @__PURE__ */
|
|
2830
|
+
return /* @__PURE__ */ React33.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React33.createElement(HugeiconsIcon20, { icon: Loading03Icon9, size: 32, className: "animate-spin mb-4 text-black" }));
|
|
2758
2831
|
}
|
|
2759
|
-
return /* @__PURE__ */
|
|
2832
|
+
return /* @__PURE__ */ React33.createElement("div", { className: "flex flex-col gap-8 animate-in fade-in duration-300 pb-10" }, /* @__PURE__ */ React33.createElement(ManagedToaster, null), /* @__PURE__ */ React33.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4" }, /* @__PURE__ */ React33.createElement("div", null, /* @__PURE__ */ React33.createElement("h1", { className: " gradient-text text-xl mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ React33.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription)), timeframes.length > 0 && selectedTimeframe && onTimeframeChange && /* @__PURE__ */ React33.createElement(
|
|
2760
2833
|
"button",
|
|
2761
2834
|
{
|
|
2762
2835
|
onClick: () => setIsTimeframeModalOpen(true),
|
|
2763
2836
|
className: "flex items-center gap-3 px-4 py-2 text-xs bg-white text-black outline-none rounded-full transition-colors hover:bg-neutral-50 shrink-0"
|
|
2764
2837
|
},
|
|
2765
|
-
/* @__PURE__ */
|
|
2766
|
-
/* @__PURE__ */
|
|
2767
|
-
)), stats.length > 0 && /* @__PURE__ */
|
|
2838
|
+
/* @__PURE__ */ React33.createElement("span", null, selectedTimeframe.label),
|
|
2839
|
+
/* @__PURE__ */ React33.createElement(HugeiconsIcon20, { icon: ArrowDown01Icon3, size: 14, className: "text-neutral-400" })
|
|
2840
|
+
)), stats.length > 0 && /* @__PURE__ */ React33.createElement("div", { className: "w-full rounded-2xl overflow-hidden bg-white" }, /* @__PURE__ */ React33.createElement("div", { className: "grid grid-cols-2 md:grid-cols-5 divide-y md:divide-y-0 md:divide-x divide-neutral-100" }, stats.map((stat, idx) => /* @__PURE__ */ React33.createElement("div", { key: idx, className: "p-6 flex flex-col gap-1 min-w-0" }, /* @__PURE__ */ React33.createElement("p", { className: "text-[11px] tracking-[0.2em] text-neutral-400 truncate " }, stat.label), /* @__PURE__ */ React33.createElement("p", { className: `text-xl tracking-tight truncate ${stat.valueClass || "text-black"}` }, stat.value))))), lists.length > 0 && /* @__PURE__ */ React33.createElement("div", { className: "flex flex-col gap-8 w-full max-w-4xl" }, lists.map((list, idx) => /* @__PURE__ */ React33.createElement("div", { key: idx, className: "bg-white rounded-2xl p-6 flex flex-col min-w-0" }, /* @__PURE__ */ React33.createElement("div", { className: "flex items-center gap-3 mb-6" }, /* @__PURE__ */ React33.createElement("div", { className: "text-neutral-400" }, list.icon), /* @__PURE__ */ React33.createElement("h2", { className: " text-[11px] text-black tracking-[0.2em] " }, list.title)), /* @__PURE__ */ React33.createElement("div", { className: "divide-y divide-neutral-100 flex-1 overflow-y-auto" }, list.items.length === 0 ? /* @__PURE__ */ React33.createElement("p", { className: "text-xs text-neutral-500 py-4" }, list.emptyMessage) : list.items.map((item) => /* @__PURE__ */ React33.createElement("div", { key: item.id, className: "flex flex-col sm:flex-row sm:items-center justify-between py-4 gap-2 min-w-0 group" }, /* @__PURE__ */ React33.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React33.createElement("p", { className: "text-sm text-black truncate pr-4" }, item.primaryText), /* @__PURE__ */ React33.createElement("p", { className: "text-[11px] text-neutral-500 truncate tracking-widest mt-0.5" }, item.secondaryText)), /* @__PURE__ */ React33.createElement("div", { className: "flex items-center gap-4 shrink-0 pl-4" }, item.rightText && /* @__PURE__ */ React33.createElement("p", { className: "text-xs text-black" }, item.rightText), item.rightBadge && /* @__PURE__ */ React33.createElement("span", { className: `text-[9px] tracking-widest px-2.5 py-1 rounded-full ${item.rightBadgeClass || "bg-neutral-50 text-neutral-600"}` }, item.rightBadge)))))))), isTimeframeModalOpen && timeframes.length > 0 && onTimeframeChange && /* @__PURE__ */ React33.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React33.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTimeframeModalOpen(false) }), /* @__PURE__ */ React33.createElement("div", { 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__ */ React33.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React33.createElement("h3", { className: " text-[14px] text-black tracking-tight" }, "Select Timeframe")), /* @__PURE__ */ React33.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 pb-2" }, timeframes.map((tf) => /* @__PURE__ */ React33.createElement(
|
|
2768
2841
|
"button",
|
|
2769
2842
|
{
|
|
2770
2843
|
key: tf.id,
|
|
@@ -2774,9 +2847,9 @@ var UniversalDashboardPage = ({
|
|
|
2774
2847
|
},
|
|
2775
2848
|
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeTimeframe === tf.id ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
|
|
2776
2849
|
},
|
|
2777
|
-
/* @__PURE__ */
|
|
2778
|
-
activeTimeframe === tf.id && /* @__PURE__ */
|
|
2779
|
-
))), /* @__PURE__ */
|
|
2850
|
+
/* @__PURE__ */ React33.createElement("span", { className: "truncate pr-2" }, tf.label),
|
|
2851
|
+
activeTimeframe === tf.id && /* @__PURE__ */ React33.createElement("div", null)
|
|
2852
|
+
))), /* @__PURE__ */ React33.createElement("div", { className: "w-full flex border-t border-neutral-50" }, /* @__PURE__ */ React33.createElement(
|
|
2780
2853
|
"button",
|
|
2781
2854
|
{
|
|
2782
2855
|
onClick: () => setIsTimeframeModalOpen(false),
|
|
@@ -2787,14 +2860,14 @@ var UniversalDashboardPage = ({
|
|
|
2787
2860
|
};
|
|
2788
2861
|
|
|
2789
2862
|
// src/components/UniversalAgentConsole.tsx
|
|
2790
|
-
import
|
|
2791
|
-
import { HugeiconsIcon as
|
|
2863
|
+
import React34, { useState as useState22, useRef as useRef10 } from "react";
|
|
2864
|
+
import { HugeiconsIcon as HugeiconsIcon21 } from "@hugeicons/react";
|
|
2792
2865
|
import {
|
|
2793
2866
|
ArrowLeft01Icon as ArrowLeft01Icon6,
|
|
2794
2867
|
ArrowRight01Icon as ArrowRight01Icon5,
|
|
2795
2868
|
Loading03Icon as Loading03Icon10,
|
|
2796
2869
|
AttachmentIcon,
|
|
2797
|
-
Cancel01Icon,
|
|
2870
|
+
Cancel01Icon as Cancel01Icon2,
|
|
2798
2871
|
Upload01Icon,
|
|
2799
2872
|
Download01Icon,
|
|
2800
2873
|
ArrowDown01Icon as ArrowDown01Icon4,
|
|
@@ -2830,12 +2903,12 @@ var UniversalAgentConsole = ({
|
|
|
2830
2903
|
onDeleteArchive
|
|
2831
2904
|
}) => {
|
|
2832
2905
|
const archiveRef = useRef10(null);
|
|
2833
|
-
const [pendingFiles, setPendingFiles] =
|
|
2834
|
-
const [isUploading, setIsUploading] =
|
|
2835
|
-
const [isActioning, setIsActioning] =
|
|
2836
|
-
const [actionModal, setActionModal] =
|
|
2837
|
-
const [actionMessage, setActionMessage] =
|
|
2838
|
-
const [archiveToDelete, setArchiveToDelete] =
|
|
2906
|
+
const [pendingFiles, setPendingFiles] = useState22([]);
|
|
2907
|
+
const [isUploading, setIsUploading] = useState22(false);
|
|
2908
|
+
const [isActioning, setIsActioning] = useState22(false);
|
|
2909
|
+
const [actionModal, setActionModal] = useState22(null);
|
|
2910
|
+
const [actionMessage, setActionMessage] = useState22("");
|
|
2911
|
+
const [archiveToDelete, setArchiveToDelete] = useState22(null);
|
|
2839
2912
|
const handleFileSelect = (e) => {
|
|
2840
2913
|
if (e.target.files && e.target.files.length > 0) {
|
|
2841
2914
|
setPendingFiles((prev) => [...prev, ...Array.from(e.target.files)]);
|
|
@@ -2861,36 +2934,36 @@ var UniversalAgentConsole = ({
|
|
|
2861
2934
|
}
|
|
2862
2935
|
};
|
|
2863
2936
|
const DynamicArrayAccordion = ({ items, parentKey }) => {
|
|
2864
|
-
const [activeFAQ, setActiveFAQ] =
|
|
2865
|
-
return /* @__PURE__ */
|
|
2937
|
+
const [activeFAQ, setActiveFAQ] = useState22(null);
|
|
2938
|
+
return /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col relative z-10 bg-transparent w-full mt-2 border-t border-neutral-100" }, items.map((item, index) => {
|
|
2866
2939
|
const isOpen = activeFAQ === index;
|
|
2867
2940
|
let label = `${parentKey ? formatKeyName(parentKey) : "Item"} ${index + 1}`;
|
|
2868
2941
|
if (item.fullName) label = toTitleCaseSafe(item.fullName);
|
|
2869
2942
|
else if (item.role) label = item.role;
|
|
2870
2943
|
else if (item.proposedName) label = toTitleCaseSafe(item.proposedName);
|
|
2871
|
-
return /* @__PURE__ */
|
|
2944
|
+
return /* @__PURE__ */ React34.createElement("div", { key: index, className: `transition-all duration-300 ${index !== items.length - 1 ? "border-b border-neutral-100" : ""}` }, /* @__PURE__ */ React34.createElement("button", { className: "flex items-center justify-between w-full gap-4 text-left py-5 md:py-6 group outline-none bg-transparent", onClick: () => setActiveFAQ(isOpen ? null : index) }, /* @__PURE__ */ React34.createElement("span", { className: `text-[13px] md:text-[14px] transition-colors ${isOpen ? "text-black" : "text-neutral-700 group-hover:text-black"}` }, label), /* @__PURE__ */ React34.createElement("div", { className: `shrink-0 flex items-center justify-center w-8 h-8 rounded-full border transition-all duration-300 ${isOpen ? "rotate-180 border-black text-black" : "border-neutral-300 text-neutral-500"}` }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: ArrowDown01Icon4, size: 16 }))), /* @__PURE__ */ React34.createElement("div", { className: `grid transition-all duration-300 ease-in-out ${isOpen ? "grid-rows-[1fr] pb-6 md:pb-8 opacity-100" : "grid-rows-[0fr] opacity-0"}` }, /* @__PURE__ */ React34.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React34.createElement("div", { className: "pt-2 flex flex-col gap-3 pr-4 md:pr-12" }, renderDynamicObject(item)))));
|
|
2872
2945
|
}));
|
|
2873
2946
|
};
|
|
2874
2947
|
const renderValue = (key, value) => {
|
|
2875
2948
|
if (value === null || value === void 0 || value === "") return null;
|
|
2876
2949
|
if (typeof value === "string") {
|
|
2877
|
-
if (value.startsWith("http") || value.startsWith("data:image")) return /* @__PURE__ */
|
|
2878
|
-
if (key.toLowerCase().includes("name") && !value.includes("@")) return /* @__PURE__ */
|
|
2879
|
-
return /* @__PURE__ */
|
|
2950
|
+
if (value.startsWith("http") || value.startsWith("data:image")) return /* @__PURE__ */ React34.createElement("a", { href: value, download: true, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-2 px-5 py-2 bg-white border border-neutral-100 text-black text-[11px] tracking-widest rounded-full hover:bg-neutral-50 transition-colors w-fit outline-none mt-2" }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: Download01Icon, size: 14 }), " Download File");
|
|
2951
|
+
if (key.toLowerCase().includes("name") && !value.includes("@")) return /* @__PURE__ */ React34.createElement("p", { className: "text-[11px] md:text-[13px] leading-[1.8] text-neutral-600" }, toTitleCaseSafe(value));
|
|
2952
|
+
return /* @__PURE__ */ React34.createElement("p", { className: "text-[11px] md:text-[13px] leading-[1.8] text-neutral-600" }, value);
|
|
2880
2953
|
}
|
|
2881
2954
|
if (Array.isArray(value)) {
|
|
2882
2955
|
const validItems = value.filter((item) => item !== null && item !== void 0 && item !== "");
|
|
2883
2956
|
if (validItems.length === 0) return null;
|
|
2884
|
-
if (typeof validItems[0] === "string") return /* @__PURE__ */
|
|
2885
|
-
return /* @__PURE__ */
|
|
2957
|
+
if (typeof validItems[0] === "string") return /* @__PURE__ */ React34.createElement("ul", { className: "list-disc pl-4 mt-1" }, validItems.map((v, i) => /* @__PURE__ */ React34.createElement("li", { key: i, className: "text-[11px] md:text-[13px] leading-[1.8] text-neutral-600" }, toTitleCaseSafe(v))));
|
|
2958
|
+
return /* @__PURE__ */ React34.createElement(DynamicArrayAccordion, { items: validItems, parentKey: key });
|
|
2886
2959
|
}
|
|
2887
2960
|
if (typeof value === "object") {
|
|
2888
2961
|
if (Object.keys(value).length === 0) return null;
|
|
2889
2962
|
const renderedObj = renderDynamicObject(value);
|
|
2890
2963
|
if (!renderedObj || Array.isArray(renderedObj) && renderedObj.length === 0) return null;
|
|
2891
|
-
return /* @__PURE__ */
|
|
2964
|
+
return /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col gap-3 mt-1 w-full border-l border-neutral-100 pl-4 py-2" }, renderedObj);
|
|
2892
2965
|
}
|
|
2893
|
-
return /* @__PURE__ */
|
|
2966
|
+
return /* @__PURE__ */ React34.createElement("span", { className: "text-sm text-black" }, String(value));
|
|
2894
2967
|
};
|
|
2895
2968
|
const renderDynamicObject = (obj) => {
|
|
2896
2969
|
if (!obj) return null;
|
|
@@ -2901,22 +2974,22 @@ var UniversalAgentConsole = ({
|
|
|
2901
2974
|
return true;
|
|
2902
2975
|
});
|
|
2903
2976
|
if (entries.length === 0) return null;
|
|
2904
|
-
return entries.map(([k, v]) => /* @__PURE__ */
|
|
2977
|
+
return entries.map(([k, v]) => /* @__PURE__ */ React34.createElement("div", { key: k, className: "flex flex-col items-start min-w-0 wrap-break-word w-full mb-3 last:mb-0" }, /* @__PURE__ */ React34.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 mb-1 " }, formatKeyName(k)), renderValue(k, v)));
|
|
2905
2978
|
};
|
|
2906
|
-
return /* @__PURE__ */
|
|
2979
|
+
return /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col gap-8 animate-in fade-in duration-300 pb-10" }, /* @__PURE__ */ React34.createElement(ManagedToaster, null), currentView === "list" && /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col items-start gap-1" }, /* @__PURE__ */ React34.createElement("h1", { className: " text-xl text-black tracking-tight" }, headerTitle), /* @__PURE__ */ React34.createElement("p", { className: "text-sm text-neutral-500" }, headerDescription)), stats.length > 0 && /* @__PURE__ */ React34.createElement("div", { className: "w-full rounded-2xl max-w-5xl overflow-hidden bg-white" }, /* @__PURE__ */ React34.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-neutral-100" }, stats.map((stat, idx) => /* @__PURE__ */ React34.createElement("div", { key: idx, className: "p-6 flex items-center gap-4 hover:bg-neutral-50/50 transition-colors min-w-0" }, /* @__PURE__ */ React34.createElement("div", { className: "w-12 h-12 rounded-full border border-neutral-100 bg-white flex items-center justify-center text-black shrink-0" }, stat.icon), /* @__PURE__ */ React34.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React34.createElement("p", { className: "text-[11px] tracking-[0.2em] text-neutral-400 mb-1 truncate " }, stat.label), /* @__PURE__ */ React34.createElement("p", { className: "text-xl text-black tracking-tight truncate" }, stat.value)))))), tabs.length > 0 && /* @__PURE__ */ React34.createElement("div", { className: "flex items-center gap-6" }, tabs.map((tab) => /* @__PURE__ */ React34.createElement("button", { key: tab.id, onClick: () => onTabChange(tab.id), className: `pb-3 text-sm transition-colors outline-none ${activeTab === tab.id ? "text-black border-b border-black" : "text-neutral-400 hover:text-black"}` }, tab.label))), /* @__PURE__ */ React34.createElement("div", { className: "w-full bg-white rounded-2xl max-w-5xl overflow-hidden flex flex-col min-h-100" }, isLoadingList ? /* @__PURE__ */ React34.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: Loading03Icon10, size: 32, className: "animate-spin text-black" })) : listData.length === 0 ? /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("div", { className: "flex-1 flex justify-center items-center text-neutral-500 text-sm py-20" }, "No matching applications found.")) : /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("div", { className: "divide-y divide-neutral-100 flex-1" }, listData.map((item) => /* @__PURE__ */ React34.createElement("div", { key: item.id, onClick: () => onRowClick(item.id), className: "flex items-center justify-between p-5 hover:bg-neutral-50/50 transition-colors cursor-pointer group min-w-0" }, /* @__PURE__ */ React34.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React34.createElement("p", { className: "text-sm text-black truncate pr-4" }, item.title), /* @__PURE__ */ React34.createElement("p", { className: "text-xs text-neutral-500 truncate mt-1" }, item.subtitle)), /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col items-end gap-1 shrink-0 pl-4" }, /* @__PURE__ */ React34.createElement("span", { className: `text-[11px] tracking-widest px-3 py-1 rounded-full ${item.status === "COMPLETED" ? "bg-emerald-50 text-emerald-600" : "bg-neutral-50 text-neutral-600"}` }, item.status.replace(/_/g, " ")), /* @__PURE__ */ React34.createElement("span", { className: "text-[11px] text-neutral-400 mt-1" }, item.date))))), totalPages > 1 && /* @__PURE__ */ React34.createElement("div", { className: "flex items-center justify-between p-5 bg-neutral-50/50" }, /* @__PURE__ */ React34.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages), /* @__PURE__ */ React34.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React34.createElement("button", { onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, className: "p-2 border border-neutral-100 rounded-full bg-white text-neutral-500 hover:text-black outline-none disabled:opacity-30" }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: ArrowLeft01Icon6, size: 14 })), /* @__PURE__ */ React34.createElement("button", { onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, className: "p-2 border border-neutral-100 rounded-full bg-white text-neutral-500 hover:text-black outline-none disabled:opacity-30" }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: ArrowRight01Icon5, size: 14 }))))))), currentView === "details" && selectedApp && /* @__PURE__ */ React34.createElement("div", { className: "w-full bg-white rounded-2xl p-6 sm:p-10 animate-in fade-in duration-300 max-w-5xl flex flex-col" }, /* @__PURE__ */ React34.createElement("div", { className: "flex items-center justify-between gap-4 pb-6" }, /* @__PURE__ */ React34.createElement("button", { onClick: () => {
|
|
2907
2980
|
onBackToList();
|
|
2908
2981
|
setPendingFiles([]);
|
|
2909
|
-
}, className: "flex items-center gap-2 text-[11px] text-neutral-400 hover:text-black tracking-widest transition-colors outline-none " }, /* @__PURE__ */
|
|
2982
|
+
}, className: "flex items-center gap-2 text-[11px] text-neutral-400 hover:text-black tracking-widest transition-colors outline-none " }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: ArrowLeft01Icon6, size: 14 }), " Back to List"), /* @__PURE__ */ React34.createElement("span", { className: `text-[11px] tracking-widest px-4 py-1.5 rounded-full ${selectedApp.status === "COMPLETED" ? "bg-emerald-50 text-emerald-600" : "bg-neutral-50 text-neutral-600"}` }, selectedApp.status.replace(/_/g, " "))), /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col gap-2 mb-8" }, /* @__PURE__ */ React34.createElement("h2", { className: " text-xl text-black tracking-tight" }, selectedApp.name || selectedApp.title), /* @__PURE__ */ React34.createElement("p", { className: "text-sm text-neutral-500" }, selectedApp.type ? selectedApp.type.replace(/_/g, " ").toLowerCase().replace(/\b\w/g, (c) => c.toUpperCase()) : selectedApp.subtitle)), selectedApp.agentId === currentAgentId && selectedApp.metadata && Object.keys(selectedApp.metadata).length > 0 ? /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col gap-5" }, renderDynamicObject(selectedApp.metadata)) : selectedApp.agentId === currentAgentId ? /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col gap-5" }, /* @__PURE__ */ React34.createElement("p", { className: "text-sm text-neutral-500" }, "No application data extracted.")) : null, selectedApp.agentId && /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col gap-4 pt-8 mt-4 border-t border-neutral-100" }, /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col gap-1 mb-4" }, /* @__PURE__ */ React34.createElement("h3", { className: " text-sm text-black" }, "Official Archives"), /* @__PURE__ */ React34.createElement("p", { className: "text-xs text-neutral-500 leading-relaxed" }, "Upload final certificates or documents. Once marked completed, the archive unlocks for the user.")), selectedApp.archives?.map((arch) => /* @__PURE__ */ React34.createElement("div", { key: arch.id, className: "flex items-center justify-between p-4 bg-emerald-50 rounded-full text-emerald-800 text-sm w-full" }, /* @__PURE__ */ React34.createElement("div", { className: "flex items-center gap-3 min-w-0" }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: File02Icon, size: 18, className: "shrink-0" }), /* @__PURE__ */ React34.createElement("span", { className: "truncate pr-2" }, arch.name)), /* @__PURE__ */ React34.createElement("button", { onClick: () => setArchiveToDelete(arch), className: "text-emerald-700 hover:text-red-500 transition-colors p-1 outline-none shrink-0" }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: Delete02Icon, size: 16 })))), pendingFiles.map((file, idx) => /* @__PURE__ */ React34.createElement("div", { key: idx, className: "flex items-center justify-between text-neutral-600 text-sm w-full" }, /* @__PURE__ */ React34.createElement("div", { className: "flex items-center gap-3 min-w-0" }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: AttachmentIcon, size: 18, className: "shrink-0" }), /* @__PURE__ */ React34.createElement("span", { className: "truncate pr-2" }, file.name)), /* @__PURE__ */ React34.createElement("button", { onClick: () => setPendingFiles((p) => p.filter((_, i) => i !== idx)), className: "text-neutral-400 hover:text-red-500 transition-colors p-1 outline-none shrink-0" }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: Cancel01Icon2, size: 16 })))), /* @__PURE__ */ React34.createElement("input", { type: "file", multiple: true, ref: archiveRef, onChange: handleFileSelect, className: "hidden", accept: "application/pdf,image/*" }), /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col sm:flex-row items-center gap-3 w-full" }, /* @__PURE__ */ React34.createElement("button", { onClick: () => archiveRef.current?.click(), disabled: selectedApp.status !== "COMPLETED" || isUploading, className: "flex items-center justify-center gap-3 p-4 border border-neutral-100 rounded-full hover:bg-neutral-50 transition-colors text-black text-sm w-full outline-none disabled:opacity-50" }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: Upload01Icon, size: 18, className: "text-neutral-400" }), " Select Files to Upload"), pendingFiles.length > 0 && /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col sm:flex-row items-center gap-3 w-full sm:w-auto shrink-0" }, /* @__PURE__ */ React34.createElement("button", { onClick: () => setPendingFiles([]), disabled: isUploading, className: "px-6 py-2 text-neutral-600 text-[11px] tracking-widest rounded-full hover:bg-neutral-100 outline-none w-full sm:w-auto " }, "Clear All"), /* @__PURE__ */ React34.createElement(ThreeDActionButton, { onClick: executeUpload, disabled: isUploading, isLoading: isUploading, className: "w-full sm:w-auto" }, "Upload ", pendingFiles.length, " File(s)")))), /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 mt-8 pt-6" }, !selectedApp.agentId ? /* @__PURE__ */ React34.createElement(ThreeDActionButton, { onClick: async () => {
|
|
2910
2983
|
setIsActioning(true);
|
|
2911
2984
|
await onAcceptApplication(selectedApp.id);
|
|
2912
2985
|
setIsActioning(false);
|
|
2913
|
-
}, disabled: isActioning, isLoading: isActioning, className: "w-full sm:w-auto" }, "Accept Application") : selectedApp.agentId !== currentAgentId ? /* @__PURE__ */
|
|
2986
|
+
}, disabled: isActioning, isLoading: isActioning, className: "w-full sm:w-auto" }, "Accept Application") : selectedApp.agentId !== currentAgentId ? /* @__PURE__ */ React34.createElement("div", { className: "w-full p-4 border border-red-100 bg-red-50/30 rounded-xl flex items-start gap-3" }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: Cancel01Icon2, size: 16, className: "text-red-500 shrink-0 mt-0.5" }), /* @__PURE__ */ React34.createElement("div", null, /* @__PURE__ */ React34.createElement("p", { className: "text-sm text-red-700" }, "Application Taken"), /* @__PURE__ */ React34.createElement("p", { className: "text-xs text-red-600 mt-1" }, "Currently handled by ", selectedApp.agentName || "another agent", "."))) : /* @__PURE__ */ React34.createElement("div", { className: "w-full flex flex-col sm:flex-row items-center gap-4 justify-between" }, /* @__PURE__ */ React34.createElement("p", { className: "text-xs text-neutral-500" }, "You are the assigned agent."), /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-end gap-3 w-full sm:w-auto" }, /* @__PURE__ */ React34.createElement("button", { onClick: () => setActionModal("query"), disabled: selectedApp.status === "COMPLETED", className: "w-full sm:w-auto px-6 py-2 bg-white border border-neutral-100 text-neutral-600 text-[11px] tracking-widest rounded-full hover:bg-neutral-50 transition-colors outline-none disabled:opacity-30 " }, "Query"), /* @__PURE__ */ React34.createElement("button", { onClick: () => setActionModal("reject"), disabled: selectedApp.status === "COMPLETED", className: "w-full sm:w-auto px-6 py-2 bg-white border border-neutral-100 text-neutral-600 text-[11px] tracking-widest rounded-full hover:bg-neutral-50 transition-colors outline-none disabled:opacity-30 " }, "Reject"), /* @__PURE__ */ React34.createElement(ThreeDActionButton, { onClick: () => setActionModal("success"), disabled: selectedApp.status === "COMPLETED", className: "w-full sm:w-auto" }, "Mark Success"))))), actionModal && /* @__PURE__ */ React34.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React34.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isActioning && setActionModal(null) }), /* @__PURE__ */ React34.createElement("div", { className: "relative w-full max-w-md bg-white rounded-3xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200 text-left" }, /* @__PURE__ */ React34.createElement("div", { className: "p-6" }, /* @__PURE__ */ React34.createElement("h3", { className: " text-lg text-black tracking-tight capitalize mb-2" }, actionModal === "success" ? "Complete Application" : `${actionModal} Application`), /* @__PURE__ */ React34.createElement("p", { className: "text-xs text-neutral-500" }, actionModal === "success" ? "Are you sure you want to mark this application as successfully completed?" : `Please provide a clear reason for the user. They will see this message and be asked to fix their application.`)), (actionModal === "query" || actionModal === "reject") && /* @__PURE__ */ React34.createElement("div", { className: "p-6 pb-2" }, /* @__PURE__ */ React34.createElement(TextInput, { label: "Reason for Action", value: actionMessage, onChange: setActionMessage, placeholder: "Enter your reason here...", disabled: isActioning })), /* @__PURE__ */ React34.createElement("div", { className: "flex items-center p-6 pt-4 gap-3" }, /* @__PURE__ */ React34.createElement("button", { onClick: () => setActionModal(null), disabled: isActioning, className: "flex-1 py-3 text-[11px] tracking-widest text-neutral-600 rounded-full hover:bg-neutral-50 transition-colors outline-none disabled:opacity-50" }, "Cancel"), /* @__PURE__ */ React34.createElement(ThreeDActionButton, { onClick: async () => {
|
|
2914
2987
|
setIsActioning(true);
|
|
2915
2988
|
await onUpdateStatus(selectedApp.id, actionModal === "success" ? "COMPLETED" : actionModal === "reject" ? "REJECTED" : "QUEUED", actionMessage);
|
|
2916
2989
|
setIsActioning(false);
|
|
2917
2990
|
setActionModal(null);
|
|
2918
2991
|
setActionMessage("");
|
|
2919
|
-
}, disabled: isActioning || (actionModal === "query" || actionModal === "reject") && actionMessage.trim().length < 5, isLoading: isActioning, className: "flex-1" }, "Confirm ", actionModal)))), archiveToDelete && /* @__PURE__ */
|
|
2992
|
+
}, disabled: isActioning || (actionModal === "query" || actionModal === "reject") && actionMessage.trim().length < 5, isLoading: isActioning, className: "flex-1" }, "Confirm ", actionModal)))), archiveToDelete && /* @__PURE__ */ React34.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React34.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isActioning && setArchiveToDelete(null) }), /* @__PURE__ */ React34.createElement("div", { className: "relative w-full max-w-md bg-white rounded-3xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200 text-left" }, /* @__PURE__ */ React34.createElement("div", { className: "p-6" }, /* @__PURE__ */ React34.createElement("h3", { className: " text-lg text-black tracking-tight mb-2" }, "Delete Document?"), /* @__PURE__ */ React34.createElement("p", { className: "text-xs text-neutral-500" }, 'Are you sure you want to permanently delete "', archiveToDelete.name, '"?')), /* @__PURE__ */ React34.createElement("div", { className: "flex items-center p-6 gap-3" }, /* @__PURE__ */ React34.createElement("button", { onClick: () => setArchiveToDelete(null), disabled: isActioning, className: "flex-1 py-3 text-[11px] tracking-widest text-neutral-600 rounded-full hover:bg-neutral-50 transition-colors outline-none disabled:opacity-50" }, "Cancel"), /* @__PURE__ */ React34.createElement(ThreeDActionButton, { onClick: async () => {
|
|
2920
2993
|
setIsActioning(true);
|
|
2921
2994
|
await onDeleteArchive(selectedApp.id, archiveToDelete.id);
|
|
2922
2995
|
setIsActioning(false);
|
|
@@ -2926,71 +2999,6 @@ var UniversalAgentConsole = ({
|
|
|
2926
2999
|
|
|
2927
3000
|
// src/components/UniversalOverviewPage.tsx
|
|
2928
3001
|
import React35 from "react";
|
|
2929
|
-
|
|
2930
|
-
// src/components/Banner.tsx
|
|
2931
|
-
import React34, { useState as useState22 } from "react";
|
|
2932
|
-
import { HugeiconsIcon as HugeiconsIcon21 } from "@hugeicons/react";
|
|
2933
|
-
import {
|
|
2934
|
-
Alert02Icon,
|
|
2935
|
-
CheckmarkBadge01Icon,
|
|
2936
|
-
InformationCircleIcon,
|
|
2937
|
-
Cancel01Icon as Cancel01Icon2
|
|
2938
|
-
} from "@hugeicons/core-free-icons";
|
|
2939
|
-
var Banner = ({
|
|
2940
|
-
title,
|
|
2941
|
-
message,
|
|
2942
|
-
type,
|
|
2943
|
-
icon,
|
|
2944
|
-
isDismissible = true,
|
|
2945
|
-
onDismiss,
|
|
2946
|
-
action
|
|
2947
|
-
}) => {
|
|
2948
|
-
const [isVisible, setIsVisible] = useState22(true);
|
|
2949
|
-
if (!isVisible) return null;
|
|
2950
|
-
const handleDismiss = () => {
|
|
2951
|
-
setIsVisible(false);
|
|
2952
|
-
if (onDismiss) onDismiss();
|
|
2953
|
-
};
|
|
2954
|
-
const config = {
|
|
2955
|
-
success: {
|
|
2956
|
-
bg: "bg-emerald-50",
|
|
2957
|
-
iconColor: "text-emerald-600",
|
|
2958
|
-
titleColor: "text-emerald-900",
|
|
2959
|
-
msgColor: "text-emerald-700",
|
|
2960
|
-
defaultIcon: CheckmarkBadge01Icon,
|
|
2961
|
-
closeHover: "hover:bg-emerald-100 text-emerald-500"
|
|
2962
|
-
},
|
|
2963
|
-
warning: {
|
|
2964
|
-
bg: "bg-amber-50",
|
|
2965
|
-
iconColor: "text-amber-600",
|
|
2966
|
-
titleColor: "text-amber-900",
|
|
2967
|
-
msgColor: "text-amber-700",
|
|
2968
|
-
defaultIcon: InformationCircleIcon,
|
|
2969
|
-
closeHover: "hover:bg-amber-100 text-amber-500"
|
|
2970
|
-
},
|
|
2971
|
-
alert: {
|
|
2972
|
-
bg: "bg-red-50",
|
|
2973
|
-
iconColor: "text-red-600",
|
|
2974
|
-
titleColor: "text-red-900",
|
|
2975
|
-
msgColor: "text-red-700",
|
|
2976
|
-
defaultIcon: Alert02Icon,
|
|
2977
|
-
closeHover: "hover:bg-red-100 text-red-500"
|
|
2978
|
-
}
|
|
2979
|
-
};
|
|
2980
|
-
const currentConfig = config[type];
|
|
2981
|
-
const IconToUse = icon || currentConfig.defaultIcon;
|
|
2982
|
-
return /* @__PURE__ */ React34.createElement("div", { className: `relative w-full rounded-2xl p-4 flex items-start gap-4 transition-all duration-300 animate-in fade-in slide-in-from-top-2 ${currentConfig.bg}` }, /* @__PURE__ */ React34.createElement("div", { className: `shrink-0 mt-0.5 ${currentConfig.iconColor}` }, /* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: IconToUse, size: 20 })), /* @__PURE__ */ React34.createElement("div", { className: "flex-1 flex flex-col min-w-0 pr-6" }, /* @__PURE__ */ React34.createElement("h4", { className: `text-sm tracking-tight mb-1 ${currentConfig.titleColor}` }, title), /* @__PURE__ */ React34.createElement("p", { className: `text-xs leading-relaxed ${currentConfig.msgColor}` }, message), action && /* @__PURE__ */ React34.createElement("div", { className: "mt-3" }, action)), isDismissible && /* @__PURE__ */ React34.createElement(
|
|
2983
|
-
"button",
|
|
2984
|
-
{
|
|
2985
|
-
onClick: handleDismiss,
|
|
2986
|
-
className: `absolute top-3 right-3 p-1.5 rounded-full transition-colors outline-none shrink-0 ${currentConfig.closeHover}`,
|
|
2987
|
-
"aria-label": "Dismiss banner"
|
|
2988
|
-
},
|
|
2989
|
-
/* @__PURE__ */ React34.createElement(HugeiconsIcon21, { icon: Cancel01Icon2, size: 16 })
|
|
2990
|
-
));
|
|
2991
|
-
};
|
|
2992
|
-
|
|
2993
|
-
// src/components/UniversalOverviewPage.tsx
|
|
2994
3002
|
var UniversalOverviewPage = ({
|
|
2995
3003
|
headerTitle,
|
|
2996
3004
|
headerDescription,
|
|
@@ -3001,7 +3009,7 @@ var UniversalOverviewPage = ({
|
|
|
3001
3009
|
alerts = [],
|
|
3002
3010
|
banner
|
|
3003
3011
|
}) => {
|
|
3004
|
-
return /* @__PURE__ */ React35.createElement("div", { className: "flex flex-col gap-8 animate-in fade-in duration-300 pb-10" }, /* @__PURE__ */ React35.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ React35.createElement("div", null, /* @__PURE__ */ React35.createElement("h1", { className: "
|
|
3012
|
+
return /* @__PURE__ */ React35.createElement("div", { className: "flex flex-col gap-8 animate-in fade-in duration-300 pb-10" }, /* @__PURE__ */ React35.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ React35.createElement("div", null, /* @__PURE__ */ React35.createElement("h1", { className: " gradient-text text-xl mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ React35.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription))), quickStats.length > 0 && /* @__PURE__ */ React35.createElement("div", { className: "w-full rounded-2xl overflow-hidden max-w-5xl bg-white" }, /* @__PURE__ */ React35.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-neutral-100" }, quickStats.map((stat, idx) => /* @__PURE__ */ React35.createElement("div", { key: idx, className: "p-6 flex items-center gap-4 hover:bg-neutral-50/50 transition-colors min-w-0" }, /* @__PURE__ */ React35.createElement("div", { className: "w-12 h-12 rounded-full border border-neutral-100 bg-white flex items-center justify-center text-black shrink-0" }, stat.icon), /* @__PURE__ */ React35.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React35.createElement("p", { className: "text-[11px] tracking-[0.2em] text-neutral-400 mb-1 truncate " }, stat.label), /* @__PURE__ */ React35.createElement("p", { className: "text-lg md:text-xl text-black tracking-tight truncate" }, stat.value)))))), banner && banner.isVisible && /* @__PURE__ */ React35.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ React35.createElement(
|
|
3005
3013
|
Banner,
|
|
3006
3014
|
{
|
|
3007
3015
|
title: banner.title,
|
|
@@ -3122,7 +3130,7 @@ var UniversalLookupPage = ({
|
|
|
3122
3130
|
}) => {
|
|
3123
3131
|
const [isTypeModalOpen, setIsTypeModalOpen] = useState23(false);
|
|
3124
3132
|
const currentOptionLabel = searchOptions.find((opt) => opt.value === selectedSearchType)?.label || "Select Type";
|
|
3125
|
-
return /* @__PURE__ */ React37.createElement("div", { className: "flex flex-col max-w-5xl rounded-2xl p-6 bg-white gap-8 animate-in fade-in duration-300 pb-20" }, /* @__PURE__ */ React37.createElement(ManagedToaster, null), /* @__PURE__ */ React37.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ React37.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React37.createElement("h1", { className: " text
|
|
3133
|
+
return /* @__PURE__ */ React37.createElement("div", { className: "flex flex-col max-w-5xl rounded-2xl p-6 bg-white gap-8 animate-in fade-in duration-300 pb-20" }, /* @__PURE__ */ React37.createElement(ManagedToaster, null), /* @__PURE__ */ React37.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ React37.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React37.createElement("h1", { className: " gradient-text text-xl mb-1 truncate tracking-tight" }, headerTitle), /* @__PURE__ */ React37.createElement("p", { className: "text-xs text-neutral-500 truncate" }, headerDescription))), /* @__PURE__ */ React37.createElement("div", { className: "w-full max-w-5xl pb-8" }, /* @__PURE__ */ React37.createElement("form", { className: "flex flex-col gap-6", onSubmit: onSearch, autoComplete: "off" }, /* @__PURE__ */ React37.createElement("div", { className: "flex gap-4" }, /* @__PURE__ */ React37.createElement(
|
|
3126
3134
|
"button",
|
|
3127
3135
|
{
|
|
3128
3136
|
type: "button",
|
|
@@ -3590,13 +3598,13 @@ import { CheckmarkCircle01Icon as CheckmarkCircle01Icon2, CancelCircleIcon as Ca
|
|
|
3590
3598
|
var AiApproveDecline = ({ suggestionTitle, suggestionValue, onApprove, onDecline, onEdit }) => {
|
|
3591
3599
|
const [isEditing, setIsEditing] = useState26(false);
|
|
3592
3600
|
const [editVal, setEditVal] = useState26(typeof suggestionValue === "string" ? suggestionValue : "");
|
|
3593
|
-
return /* @__PURE__ */ React44.createElement("div", { className: "border border-
|
|
3601
|
+
return /* @__PURE__ */ React44.createElement("div", { className: "border border-orange-100 bg-linear-to-bl from-orange-50/80 via-white to-white p-5 rounded-2xl flex flex-col gap-4 relative overflow-hidden" }, /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-widest text-orange-600 block mb-1 " }, "AI Suggestion: ", suggestionTitle), !isEditing ? /* @__PURE__ */ React44.createElement("div", { className: "text-sm text-black" }, suggestionValue) : /* @__PURE__ */ React44.createElement(
|
|
3594
3602
|
"input",
|
|
3595
3603
|
{
|
|
3596
3604
|
type: "text",
|
|
3597
3605
|
value: editVal,
|
|
3598
3606
|
onChange: (e) => setEditVal(e.target.value),
|
|
3599
|
-
className: "w-full text-sm p-2 border-b border-
|
|
3607
|
+
className: "w-full text-sm p-2 border-b border-orange-200 bg-transparent outline-none focus:border-orange-400 transition-colors",
|
|
3600
3608
|
autoFocus: true
|
|
3601
3609
|
}
|
|
3602
3610
|
)), /* @__PURE__ */ React44.createElement("div", { className: "flex items-center gap-1 mt-2" }, !isEditing ? /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement("button", { onClick: onApprove, title: "Approve", className: "p-1.5 text-black hover:text-black hover:bg-neutral-50 rounded-full transition-colors outline-none" }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: CheckmarkCircle01Icon2, size: 28 })), /* @__PURE__ */ React44.createElement("button", { onClick: onDecline, title: "Decline", className: "p-1.5 text-neutral-400 hover:text-neutral-400 hover:bg-neutral-50 rounded-full transition-colors outline-none" }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: CancelCircleIcon2, size: 28 })), onEdit && /* @__PURE__ */ React44.createElement("button", { onClick: () => setIsEditing(true), title: "Edit", className: "ml-auto p-1.5 text-neutral-400 hover:text-black hover:bg-neutral-100 rounded-full transition-colors outline-none" }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: PencilEdit01Icon, size: 18 }))) : /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement("button", { onClick: () => {
|
|
@@ -3610,7 +3618,7 @@ import React45 from "react";
|
|
|
3610
3618
|
import { HugeiconsIcon as HugeiconsIcon30 } from "@hugeicons/react";
|
|
3611
3619
|
import { Loading03Icon as Loading03Icon14, CheckmarkCircle02Icon, CancelCircleIcon as CancelCircleIcon3 } from "@hugeicons/core-free-icons";
|
|
3612
3620
|
var AiStageCheck = ({ tasks }) => {
|
|
3613
|
-
return /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-3 p-5 rounded-2xl border border-
|
|
3621
|
+
return /* @__PURE__ */ React45.createElement("div", { className: "flex flex-col gap-3 p-5 rounded-2xl border border-orange-100 bg-linear-to-bl from-orange-50/80 via-white to-white relative overflow-hidden" }, /* @__PURE__ */ React45.createElement("span", { className: "text-[11px] tracking-widest text-orange-600 mb-1 " }, "AI Processing"), tasks.map((task) => /* @__PURE__ */ React45.createElement("div", { key: task.id, className: "flex items-center gap-3" }, task.status === "pending" && /* @__PURE__ */ React45.createElement("div", { className: "w-4 h-4 rounded-full border border-orange-200" }), task.status === "loading" && /* @__PURE__ */ React45.createElement(HugeiconsIcon30, { icon: Loading03Icon14, size: 16, className: "animate-spin text-orange-500" }), task.status === "success" && /* @__PURE__ */ React45.createElement(HugeiconsIcon30, { icon: CheckmarkCircle02Icon, size: 16, className: "text-emerald-500" }), task.status === "error" && /* @__PURE__ */ React45.createElement(HugeiconsIcon30, { icon: CancelCircleIcon3, size: 16, className: "text-red-500" }), /* @__PURE__ */ React45.createElement("span", { className: `text-xs transition-colors ${task.status === "success" ? "text-black" : task.status === "loading" ? "text-orange-700" : "text-neutral-500"}` }, task.label))));
|
|
3614
3622
|
};
|
|
3615
3623
|
|
|
3616
3624
|
// src/components/Stagger.tsx
|
|
@@ -4223,7 +4231,7 @@ var UniversalRegistrationFlow = ({
|
|
|
4223
4231
|
const newForm = { ...formData, natureOfBusiness: suggestedNature };
|
|
4224
4232
|
setFormData(newForm);
|
|
4225
4233
|
approveSection("natureApproved", newForm);
|
|
4226
|
-
}, onDecline: () => setSuggestedNature(null) }))) : /* @__PURE__ */ React47.createElement("div", { className: " flex items-center justify-between" }, /* @__PURE__ */ React47.createElement("div", { className: "pr-4" }, /* @__PURE__ */ React47.createElement("p", { className: "text-sm text-black" }, formData.natureOfBusiness?.specificLabel), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-400 mt-1" }, formData.businessDesc)), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => editSection("natureApproved"), className: "p-2 text-neutral-400 hover:text-black transition-colors outline-none shrink-0" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: PencilEdit01Icon2, size: 16 })))), formState.natureApproved && /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4 pt-6 animate-in slide-in-from-top-4 duration-500" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center text-black" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-sm " }, "What name would you like to register?")), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-400 -mt-2" }, "Provide two options. We will verify availability against the official registry."), !formState.nameApproved ? /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React47.createElement(TextInput, { label: "Proposed Name 1 (Preferred)", value: formData.proposedName, onChange: (v) => setFormData({ ...formData, proposedName: v }), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement(TextInput, { label: "Proposed Name 2 (Alternative)", value: formData.proposedName2, onChange: (v) => setFormData({ ...formData, proposedName2: v }), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: () => handleCheckNames(formData.proposedName), disabled: !formData.proposedName || !formData.proposedName2 || isCheckingName || isCheckingQualifier || isReadOnly, isLoading: isCheckingQualifier || isCheckingName, className: "w-fit" }, "Check Availability")), (isCheckingQualifier || isCheckingName) && /* @__PURE__ */ React47.createElement("div", { className: " mt-2" }, /* @__PURE__ */ React47.createElement(AiStageCheck, { tasks: [{ id: "1", label: "AI Qualifier Pre-check...", status: isCheckingQualifier ? "loading" : "success" }, { id: "2", label: "Checking Official Registry Database...", status: isCheckingName ? "loading" : "pending" }, { id: "3", label: "Fallback Checking Public Database...", status: isCheckingName ? "loading" : "pending" }, { id: "4", label: "Validation Status...", status: isCheckingName ? "loading" : "pending" }] })), qualifierCheckResult && /* @__PURE__ */ React47.createElement("div", { className: "mt-2 animate-in fade-in" }, /* @__PURE__ */ React47.createElement("div", { className: "border border-
|
|
4234
|
+
}, onDecline: () => setSuggestedNature(null) }))) : /* @__PURE__ */ React47.createElement("div", { className: " flex items-center justify-between" }, /* @__PURE__ */ React47.createElement("div", { className: "pr-4" }, /* @__PURE__ */ React47.createElement("p", { className: "text-sm text-black" }, formData.natureOfBusiness?.specificLabel), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-400 mt-1" }, formData.businessDesc)), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => editSection("natureApproved"), className: "p-2 text-neutral-400 hover:text-black transition-colors outline-none shrink-0" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: PencilEdit01Icon2, size: 16 })))), formState.natureApproved && /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4 pt-6 animate-in slide-in-from-top-4 duration-500" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center text-black" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-sm " }, "What name would you like to register?")), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-400 -mt-2" }, "Provide two options. We will verify availability against the official registry."), !formState.nameApproved ? /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React47.createElement(TextInput, { label: "Proposed Name 1 (Preferred)", value: formData.proposedName, onChange: (v) => setFormData({ ...formData, proposedName: v }), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement(TextInput, { label: "Proposed Name 2 (Alternative)", value: formData.proposedName2, onChange: (v) => setFormData({ ...formData, proposedName2: v }), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: () => handleCheckNames(formData.proposedName), disabled: !formData.proposedName || !formData.proposedName2 || isCheckingName || isCheckingQualifier || isReadOnly, isLoading: isCheckingQualifier || isCheckingName, className: "w-fit" }, "Check Availability")), (isCheckingQualifier || isCheckingName) && /* @__PURE__ */ React47.createElement("div", { className: " mt-2" }, /* @__PURE__ */ React47.createElement(AiStageCheck, { tasks: [{ id: "1", label: "AI Qualifier Pre-check...", status: isCheckingQualifier ? "loading" : "success" }, { id: "2", label: "Checking Official Registry Database...", status: isCheckingName ? "loading" : "pending" }, { id: "3", label: "Fallback Checking Public Database...", status: isCheckingName ? "loading" : "pending" }, { id: "4", label: "Validation Status...", status: isCheckingName ? "loading" : "pending" }] })), qualifierCheckResult && /* @__PURE__ */ React47.createElement("div", { className: "mt-2 animate-in fade-in" }, /* @__PURE__ */ React47.createElement("div", { className: "border border-orange-100 bg-linear-to-bl from-orange-50/80 via-white to-white p-5 rounded-2xl flex flex-col gap-4 relative overflow-hidden" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("span", { className: "text-[11px] tracking-widest text-orange-600 block mb-1" }, "AI Suggestion: Structural Qualifier Missing"), /* @__PURE__ */ React47.createElement("p", { className: "text-sm text-black mb-3" }, "Nigerian registrations require a structural qualifier to be approved."), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-2" }, (qualifierCheckResult.suggestions || []).map((alt, i) => /* @__PURE__ */ React47.createElement("button", { key: i, onClick: () => setFormData({ ...formData, proposedName: alt }), className: "text-left px-4 py-2 border border-neutral-100 rounded-full hover:border-black text-sm transition-colors outline-none" }, alt)))), /* @__PURE__ */ React47.createElement("button", { onClick: () => setQualifierCheckResult(null), className: "w-fit text-[11px] tracking-widest text-neutral-500 hover:text-black transition-colors mt-2 outline-none" }, "Edit Name Manually"))), nameCheckResult && /* @__PURE__ */ React47.createElement("div", { className: " mt-2 animate-in fade-in" }, nameCheckResult.status === "APPROVED" || nameCheckResult.status === "APPROVED_WARNING" || nameCheckResult.status === "SKIPPED" ? /* @__PURE__ */ React47.createElement(AiApproveDecline, { suggestionTitle: nameCheckResult.status === "APPROVED" ? "Name Available!" : "Fallback Approval", suggestionValue: /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("p", { className: `mb-1 ${nameCheckResult.status === "APPROVED" ? "text-emerald-600 " : "text-orange-500 "}` }, nameCheckResult.status === "APPROVED" ? "Excellent chance of approval." : "Validation Bypassed / Fallback."), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-600" }, nameCheckResult.message), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-600 mt-2 " }, "Proposed Option: ", nameCheckResult.approvedOption)), onApprove: () => {
|
|
4227
4235
|
const newForm = { ...formData, approvedName: nameCheckResult.approvedOption };
|
|
4228
4236
|
setFormData(newForm);
|
|
4229
4237
|
approveSection("nameApproved", newForm);
|
|
@@ -4231,7 +4239,7 @@ var UniversalRegistrationFlow = ({
|
|
|
4231
4239
|
}, disabled: isReadOnly || isSubmitting })), /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: () => approveSection("addressApproved"), disabled: !formData.address || !formData.city || !formData.state || isReadOnly, className: "w-fit mt-2" }, "Confirm Address")) : /* @__PURE__ */ React47.createElement("div", { className: " flex items-center justify-between" }, /* @__PURE__ */ React47.createElement("p", { className: "text-sm text-neutral-500" }, formData.address, ", ", formData.city, ", ", formData.state), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => editSection("addressApproved"), className: "p-2 text-neutral-400 hover:text-black transition-colors outline-none shrink-0" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: PencilEdit01Icon2, size: 16 })))), formState.addressApproved && type === "company" && /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4 pt-6 animate-in slide-in-from-top-4 duration-500" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between gap-2 text-black" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-sm " }, "Directors & Shareholders")), !formState.membersDetailsApproved && /* @__PURE__ */ React47.createElement("div", { className: `text-xs px-3 py-1 rounded-full ${getCompanyTotalShares() === 100 ? "bg-emerald-50 text-emerald-600" : "bg-red-50 text-red-500"}` }, "Total Shares: ", getCompanyTotalShares(), "%")), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-400 -mt-2" }, "Provide details for all individuals. Ensure total share percentage equals 100%."), !formState.membersDetailsApproved ? /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-6 " }, formData.members.map((member, i) => /* @__PURE__ */ React47.createElement("div", { key: member.id, className: "flex flex-col gap-4 border border-neutral-100 p-5 rounded-2xl bg-neutral-50/30" }, /* @__PURE__ */ React47.createElement("div", { className: "flex justify-between items-center mb-1" }, /* @__PURE__ */ React47.createElement("span", { className: "text-[11px] tracking-widest text-neutral-400" }, "Member ", i + 1), formData.members.length > 1 && !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => removeCompanyMember(i), className: "text-red-500 text-xs hover:text-red-600" }, "Remove")), /* @__PURE__ */ React47.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4" }, /* @__PURE__ */ React47.createElement(TextInput, { label: "Role", value: member.role, readOnly: true, onClick: () => !isReadOnly && setActiveModal({ isOpen: true, type: "role", memberIndex: i }), onChange: () => {
|
|
4232
4240
|
}, disabled: isReadOnly || isSubmitting }), member.role !== "Director Only" && /* @__PURE__ */ React47.createElement(NumberInput, { label: "Share Percentage (%)", value: member.sharePercentage, onChange: (v) => updateCompanyMemberInfo(i, "sharePercentage", v), disabled: isReadOnly || isSubmitting })), /* @__PURE__ */ React47.createElement(TextInput, { label: "Full Name", value: member.fullName, onChange: (v) => updateCompanyMemberInfo(i, "fullName", v), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4" }, /* @__PURE__ */ React47.createElement(NumberInput, { label: "Phone Number", value: member.phone, onChange: (v) => updateCompanyMemberInfo(i, "phone", v), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement(TextInput, { label: "Email Address", value: member.email, onChange: (v) => updateCompanyMemberInfo(i, "email", v), disabled: isReadOnly || isSubmitting })), /* @__PURE__ */ React47.createElement(TextInput, { label: "Nationality", value: member.nationality, readOnly: true, onClick: () => !isReadOnly && setActiveModal({ isOpen: true, type: "nationality", memberIndex: i }), onChange: () => {
|
|
4233
4241
|
}, disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement(TextInput, { label: "Residential Address", value: member.address, onChange: (v) => updateCompanyMemberInfo(i, "address", v), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4" }, /* @__PURE__ */ React47.createElement(TextInput, { label: "City", value: member.city, onChange: (v) => updateCompanyMemberInfo(i, "city", v), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement(TextInput, { label: "State", value: member.state, readOnly: true, onClick: () => !isReadOnly && setActiveModal({ isOpen: true, type: "state", memberIndex: i }), onChange: () => {
|
|
4234
|
-
}, disabled: isReadOnly || isSubmitting })))), /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between mt-2" }, !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: addCompanyMember, className: "px-6 py-2 bg-white border border-neutral-100 text-black text-[11px] tracking-widest rounded-full hover:bg-neutral-50 transition-colors outline-none" }, "+ Add Member"), /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: () => approveSection("membersDetailsApproved"), disabled: !areCompanyMembersValid() || isReadOnly, className: "w-fit" }, "Confirm Members"))) : /* @__PURE__ */ React47.createElement("div", { className: " flex items-center justify-between" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("p", { className: "text-sm text-black" }, formData.members.length, " Member(s) Registered"), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-500 mt-1" }, "Total Shares: 100% Verified.")), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => editSection("membersDetailsApproved"), className: "p-2 text-neutral-400 hover:text-black transition-colors outline-none shrink-0" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: PencilEdit01Icon2, size: 16 })))), formState.addressApproved && type === "business" && /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4 pt-6 animate-in slide-in-from-top-4 duration-500" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center text-black" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-sm " }, "Who owns the business?")), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-400 -mt-2" }, "Provide basic contact info. We will extract your DOB and ID number automatically in the next step."), !formState.ownerApproved ? /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4 " }, /* @__PURE__ */ React47.createElement(TextInput, { label: "Full Name", value: formData.ownerName, onChange: (v) => setFormData({ ...formData, ownerName: v }), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4" }, /* @__PURE__ */ React47.createElement(NumberInput, { label: "Phone Number", value: formData.ownerPhone, onChange: (v) => setFormData({ ...formData, ownerPhone: v }), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement(TextInput, { label: "Email Address", value: formData.ownerEmail, onChange: (v) => setFormData({ ...formData, ownerEmail: v }), disabled: isReadOnly || isSubmitting })), /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: () => approveSection("ownerApproved"), disabled: !formData.ownerName || !formData.ownerPhone || !formData.ownerEmail || isReadOnly, className: "w-fit mt-2" }, "Confirm Owner Details")) : /* @__PURE__ */ React47.createElement("div", { className: " flex items-center justify-between" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("p", { className: "text-sm text-black" }, formData.ownerName), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-500 mt-1" }, formData.ownerEmail, " \u2022 ", formData.ownerPhone)), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => editSection("ownerApproved"), className: "p-2 text-neutral-400 hover:text-black transition-colors outline-none shrink-0" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: PencilEdit01Icon2, size: 16 })))), /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between mt-8 pt-6 " }, /* @__PURE__ */ React47.createElement("button", { onClick: handleBack, className: "flex items-center gap-2 px-6 py-2 text-[11px] tracking-widest text-neutral-500 hover:text-black hover:bg-neutral-50 rounded-full transition-colors outline-none" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: ArrowLeft01Icon10, size: 14 }), " Close"), /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: handleNext, disabled: !isStep0Valid, className: "w-fit shrink-0" }, "Next Step"))), macroStep === 1 && /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-8 animate-in fade-in" }, type === "company" ? /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-sm text-black" }, "Member Identity Documents"), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-500 leading-relaxed" }, "Upload valid means of identification, passport photographs, and signatures for every director and shareholder.")), !formState.membersDocsApproved ? /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-6" }, formData.members.map((member, i) => /* @__PURE__ */ React47.createElement("div", { key: member.id, className: "flex flex-col gap-4" }, /* @__PURE__ */ React47.createElement("span", { className: "text-[11px] tracking-widest text-black mb-1" }, member.fullName || `Member ${i + 1}`, " ", /* @__PURE__ */ React47.createElement("span", { className: "text-neutral-400 ml-2" }, "(", member.role, ")")), /* @__PURE__ */ React47.createElement("input", { id: `id-upload-${i}`, type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", className: "hidden", onChange: (e) => handleCompanyMemberUpload(e, i, "id"), disabled: isReadOnly || isAnyUploading }), /* @__PURE__ */ React47.createElement("input", { id: `pass-upload-${i}`, type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", className: "hidden", onChange: (e) => handleCompanyMemberUpload(e, i, "passport"), disabled: isReadOnly || isAnyUploading }), /* @__PURE__ */ React47.createElement("input", { id: `sig-upload-${i}`, type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", className: "hidden", onChange: (e) => handleCompanyMemberUpload(e, i, "signature"), disabled: isReadOnly || isAnyUploading }), !member.idExtractedData && !globalExtractingId ? /* @__PURE__ */ React47.createElement("button", { onClick: () => !isReadOnly && !isAnyUploading && document.getElementById(`id-upload-${i}`)?.click(), className: `flex items-center gap-3 p-4 border border-neutral-100 rounded-full transition-colors text-sm w-full outline-none ${isAnyUploading ? "opacity-50 cursor-not-allowed bg-neutral-50 text-neutral-400" : "text-black hover:bg-neutral-50"}`, disabled: isReadOnly || isAnyUploading }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Upload01Icon3, size: 18, className: "text-neutral-400" }), " Upload Valid ID (NIN, License, Voter's Card)") : globalExtractingId && !member.idExtractedData ? /* @__PURE__ */ React47.createElement("div", { className: " mt-2" }, /* @__PURE__ */ React47.createElement(AiStageCheck, { tasks: aiTasks })) : member.idExtractedData ? /* @__PURE__ */ React47.createElement("div", { className: " mt-2 animate-in fade-in border border-purple-100 bg-linear-to-bl from-purple-50/80 via-white to-white p-5 rounded-xl flex flex-col gap-4 relative overflow-hidden" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("span", { className: "text-[11px] tracking-widest text-purple-600 block mb-2" }, "Review Extracted ID"), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React47.createElement(TextInput, { label: "Full Name on ID", value: member.idExtractedData.fullName, onChange: (v) => updateCompanyMemberInfo(i, "idExtractedData", { ...member.idExtractedData, fullName: v }), disabled: isReadOnly || isAnyUploading }), /* @__PURE__ */ React47.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React47.createElement(TextInput, { label: "ID Number", value: member.idExtractedData.idNumber, onChange: (v) => updateCompanyMemberInfo(i, "idExtractedData", { ...member.idExtractedData, idNumber: v }), disabled: isReadOnly || isAnyUploading }), /* @__PURE__ */ React47.createElement(TextInput, { label: "Date of Birth", value: member.idExtractedData.dob, onChange: (v) => updateCompanyMemberInfo(i, "idExtractedData", { ...member.idExtractedData, dob: v }), disabled: isReadOnly || isAnyUploading })))), /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-2 mt-2" }, !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => deleteCompanyMemberDocument(i, "id"), disabled: isAnyUploading, className: "px-6 py-2 bg-white border border-neutral-100 text-neutral-500 text-[11px] rounded-full tracking-widest hover:bg-neutral-50 transition-colors outline-none disabled:opacity-50 disabled:cursor-not-allowed" }, "Delete & Re-upload ID"))) : null, !member.passportFileUrl && !globalUploadingPassport ? /* @__PURE__ */ React47.createElement("button", { onClick: () => !isReadOnly && !isAnyUploading && document.getElementById(`pass-upload-${i}`)?.click(), className: `flex items-center gap-3 p-4 border border-neutral-100 rounded-full transition-colors text-sm w-full outline-none ${isAnyUploading ? "opacity-50 cursor-not-allowed bg-neutral-50 text-neutral-400" : "text-black hover:bg-neutral-50"}`, disabled: isReadOnly || isAnyUploading }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Upload01Icon3, size: 18, className: "text-neutral-400" }), " Upload Passport Photo") : globalUploadingPassport && !member.passportFileUrl ? /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3 p-4 border border-neutral-100 rounded-full bg-neutral-50 text-neutral-500 text-sm w-full" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Loading03Icon15, size: 18, className: "animate-spin text-black" }), " Uploading Passport...") : member.passportFileUrl ? /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between p-4 bg-emerald-50 rounded-full text-emerald-800 text-sm w-full" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: IdentificationIcon, size: 18 }), " Passport Uploaded"), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => deleteCompanyMemberDocument(i, "passport"), disabled: isAnyUploading, className: "text-emerald-700 hover:text-red-500 transition-colors p-1 outline-none shrink-0 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Delete02Icon3, size: 16 }))) : null, !member.signatureFileUrl && !globalUploadingSignature ? /* @__PURE__ */ React47.createElement("button", { onClick: () => !isReadOnly && !isAnyUploading && document.getElementById(`sig-upload-${i}`)?.click(), className: `flex items-center gap-3 p-4 border border-neutral-100 rounded-full transition-colors text-sm w-full outline-none ${isAnyUploading ? "opacity-50 cursor-not-allowed bg-neutral-50 text-neutral-400" : "text-black hover:bg-neutral-50"}`, disabled: isReadOnly || isAnyUploading }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Upload01Icon3, size: 18, className: "text-neutral-400" }), " Upload Signature") : globalUploadingSignature && !member.signatureFileUrl ? /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3 p-4 border border-neutral-100 rounded-full bg-neutral-50 text-neutral-500 text-sm w-full" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Loading03Icon15, size: 18, className: "animate-spin text-black" }), " Uploading Signature...") : member.signatureFileUrl ? /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between p-4 bg-emerald-50 rounded-full text-emerald-800 text-sm w-full" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: SignatureIcon, size: 18 }), " Signature Uploaded"), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => deleteCompanyMemberDocument(i, "signature"), disabled: isAnyUploading, className: "text-emerald-700 hover:text-red-500 transition-colors p-1 outline-none shrink-0 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Delete02Icon3, size: 16 }))) : null)), /* @__PURE__ */ React47.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: () => approveSection("membersDocsApproved"), disabled: !areCompanyMemberDocsValid() || isReadOnly || isAnyUploading, className: "w-fit" }, "Confirm All Documents"))) : /* @__PURE__ */ React47.createElement("div", { className: " flex items-center justify-between bg-emerald-50 p-6 rounded-full" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("p", { className: "text-sm text-emerald-800" }, "Documents Uploaded"), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-emerald-600 mt-1" }, "Data safely extracted.")), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => editSection("membersDocsApproved"), className: "p-2 text-emerald-700 hover:text-black transition-colors outline-none shrink-0" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: PencilEdit01Icon2, size: 16 })))) : /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement("input", { type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", ref: idRef, onChange: (e) => handleBusinessUpload(e, "id"), disabled: isReadOnly || isAnyUploading, className: "hidden" }), /* @__PURE__ */ React47.createElement("input", { type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", ref: passportRef, onChange: (e) => handleBusinessUpload(e, "passport"), disabled: isReadOnly || isAnyUploading, className: "hidden" }), /* @__PURE__ */ React47.createElement("input", { type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", ref: signatureRef, onChange: (e) => handleBusinessUpload(e, "signature"), disabled: isReadOnly || isAnyUploading, className: "hidden" }), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-2 text-black" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-sm " }, "Upload Means of Identification")), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-500 -mt-2" }, "Upload your NIN, Driver's License, Voter's Card, or Int'l Passport (JPG/PNG/WEBP)."), !formState.idApproved ? /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement("button", { onClick: () => !isReadOnly && !isAnyUploading && idRef.current?.click(), disabled: isReadOnly || isAnyUploading, className: `w-full h-32 border border-neutral-100 rounded-full flex flex-col items-center justify-center gap-2 transition-colors outline-none ${isAnyUploading ? "opacity-50 cursor-not-allowed bg-neutral-50 text-neutral-400" : "hover:bg-neutral-50 text-black"}` }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Upload01Icon3, size: 24, className: "text-neutral-400" }), /* @__PURE__ */ React47.createElement("span", { className: "text-xs" }, "Select ID Image to Upload")), globalExtractingId && /* @__PURE__ */ React47.createElement("div", { className: " mt-2" }, /* @__PURE__ */ React47.createElement(AiStageCheck, { tasks: aiTasks })), formData.idExtractedData && /* @__PURE__ */ React47.createElement("div", { className: " mt-2 animate-in fade-in border border-purple-100 bg-linear-to-bl from-purple-50/80 via-white to-white p-5 rounded-2xl flex flex-col gap-4 relative overflow-hidden" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("span", { className: "text-[11px] tracking-widest text-purple-600 block mb-2" }, "Review AI Extracted Data"), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-500 mb-4" }, "Please verify the extracted information and correct any OCR mistakes before approving."), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React47.createElement(TextInput, { label: "Full Name on ID", value: formData.idExtractedData.fullName, onChange: (v) => setFormData((f) => ({ ...f, idExtractedData: { ...f.idExtractedData, fullName: v } })), disabled: isReadOnly || isAnyUploading }), /* @__PURE__ */ React47.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React47.createElement(TextInput, { label: "ID Number", value: formData.idExtractedData.idNumber, onChange: (v) => setFormData((f) => ({ ...f, idExtractedData: { ...f.idExtractedData, idNumber: v } })), disabled: isReadOnly || isAnyUploading }), /* @__PURE__ */ React47.createElement(TextInput, { label: "Date of Birth (YYYY-MM-DD)", value: formData.idExtractedData.dob, onChange: (v) => setFormData((f) => ({ ...f, idExtractedData: { ...f.idExtractedData, dob: v } })), disabled: isReadOnly || isAnyUploading })))), /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-2 mt-2" }, /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: () => approveSection("idApproved"), disabled: isAnyUploading || isReadOnly, className: "w-fit shrink-0" }, "Approve Data"), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => deleteBusinessDocument("id"), disabled: isAnyUploading, className: "px-6 py-2 bg-white border border-neutral-100 text-neutral-500 text-[11px] rounded-full tracking-widest hover:bg-neutral-50 transition-colors outline-none disabled:opacity-50 disabled:cursor-not-allowed" }, "Delete & Re-upload")))) : /* @__PURE__ */ React47.createElement("div", { className: " flex items-center justify-between bg-emerald-50 p-6 rounded-full" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("p", { className: "text-sm text-emerald-800" }, "ID Document Verified"), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-emerald-600 mt-1" }, "Data safely extracted and stored.")), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => editSection("idApproved"), className: "p-2 text-emerald-700 hover:text-black transition-colors outline-none shrink-0" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: PencilEdit01Icon2, size: 16 })))), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4 pt-6 animate-in slide-in-from-top-4 duration-500" }, /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-3 " }, !formState.passportApproved && !globalUploadingPassport ? /* @__PURE__ */ React47.createElement("button", { onClick: () => !isReadOnly && !isAnyUploading && passportRef.current?.click(), disabled: isReadOnly || isAnyUploading, className: `flex items-center gap-3 p-4 border border-neutral-100 rounded-full transition-colors text-sm w-full outline-none ${isAnyUploading ? "opacity-50 cursor-not-allowed bg-neutral-50 text-neutral-400" : "text-black hover:bg-neutral-50"}` }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Upload01Icon3, size: 18, className: "text-neutral-400" }), " Upload Passport Photo") : globalUploadingPassport && !formData.passportFileUrl ? /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3 p-4 border border-neutral-100 rounded-full bg-neutral-50 text-neutral-500 text-sm w-full" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Loading03Icon15, size: 18, className: "animate-spin text-black" }), " Uploading Passport...") : /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between p-4 bg-emerald-50 rounded-full text-emerald-800 text-sm w-full" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: IdentificationIcon, size: 18 }), " Passport Uploaded"), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => deleteBusinessDocument("passport"), disabled: isAnyUploading, className: "text-emerald-700 hover:text-red-500 transition-colors p-1 outline-none shrink-0 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Delete02Icon3, size: 16 }))), !formState.signatureApproved && !globalUploadingSignature ? /* @__PURE__ */ React47.createElement("button", { onClick: () => !isReadOnly && !isAnyUploading && signatureRef.current?.click(), disabled: isReadOnly || isAnyUploading, className: `flex items-center gap-3 p-4 border border-neutral-100 rounded-full transition-colors text-sm w-full outline-none ${isAnyUploading ? "opacity-50 cursor-not-allowed bg-neutral-50 text-neutral-400" : "text-black hover:bg-neutral-50"}` }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Upload01Icon3, size: 18, className: "text-neutral-400" }), " Upload Signature") : globalUploadingSignature && !formData.signatureFileUrl ? /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3 p-4 border border-neutral-100 rounded-full bg-neutral-50 text-neutral-500 text-sm w-full" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Loading03Icon15, size: 18, className: "animate-spin text-black" }), " Uploading Signature...") : /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between p-4 bg-emerald-50 rounded-full text-emerald-800 text-sm w-full" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: SignatureIcon, size: 18 }), " Signature Uploaded"), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => deleteBusinessDocument("signature"), disabled: isAnyUploading, className: "text-emerald-700 hover:text-red-500 transition-colors p-1 outline-none shrink-0 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Delete02Icon3, size: 16 })))))), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4 pt-6 border-t border-neutral-100 animate-in slide-in-from-top-4 duration-500" }, /* @__PURE__ */ React47.createElement("input", { type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", ref: other1Ref, onChange: (e) => handleOptionalUpload(e, "other1"), disabled: isAnyUploading || isReadOnly, className: "hidden" }), /* @__PURE__ */ React47.createElement("input", { type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", ref: other2Ref, onChange: (e) => handleOptionalUpload(e, "other2"), disabled: isAnyUploading || isReadOnly, className: "hidden" }), /* @__PURE__ */ React47.createElement("input", { type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", ref: other3Ref, onChange: (e) => handleOptionalUpload(e, "other3"), disabled: isAnyUploading || isReadOnly, className: "hidden" }), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-1 mb-2" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-sm text-black" }, "Additional Documents (Optional)"), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-500 leading-relaxed" }, "If your ", type === "company" ? "company" : "business", " involves regulated professional services, please upload relevant licenses, certificates, or permits here (up to 3 documents).")), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-3" }, [1, 2, 3].map((num) => {
|
|
4242
|
+
}, disabled: isReadOnly || isSubmitting })))), /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between mt-2" }, !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: addCompanyMember, className: "px-6 py-2 bg-white border border-neutral-100 text-black text-[11px] tracking-widest rounded-full hover:bg-neutral-50 transition-colors outline-none" }, "+ Add Member"), /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: () => approveSection("membersDetailsApproved"), disabled: !areCompanyMembersValid() || isReadOnly, className: "w-fit" }, "Confirm Members"))) : /* @__PURE__ */ React47.createElement("div", { className: " flex items-center justify-between" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("p", { className: "text-sm text-black" }, formData.members.length, " Member(s) Registered"), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-500 mt-1" }, "Total Shares: 100% Verified.")), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => editSection("membersDetailsApproved"), className: "p-2 text-neutral-400 hover:text-black transition-colors outline-none shrink-0" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: PencilEdit01Icon2, size: 16 })))), formState.addressApproved && type === "business" && /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4 pt-6 animate-in slide-in-from-top-4 duration-500" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center text-black" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-sm " }, "Who owns the business?")), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-400 -mt-2" }, "Provide basic contact info. We will extract your DOB and ID number automatically in the next step."), !formState.ownerApproved ? /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4 " }, /* @__PURE__ */ React47.createElement(TextInput, { label: "Full Name", value: formData.ownerName, onChange: (v) => setFormData({ ...formData, ownerName: v }), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4" }, /* @__PURE__ */ React47.createElement(NumberInput, { label: "Phone Number", value: formData.ownerPhone, onChange: (v) => setFormData({ ...formData, ownerPhone: v }), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React47.createElement(TextInput, { label: "Email Address", value: formData.ownerEmail, onChange: (v) => setFormData({ ...formData, ownerEmail: v }), disabled: isReadOnly || isSubmitting })), /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: () => approveSection("ownerApproved"), disabled: !formData.ownerName || !formData.ownerPhone || !formData.ownerEmail || isReadOnly, className: "w-fit mt-2" }, "Confirm Owner Details")) : /* @__PURE__ */ React47.createElement("div", { className: " flex items-center justify-between" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("p", { className: "text-sm text-black" }, formData.ownerName), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-500 mt-1" }, formData.ownerEmail, " \u2022 ", formData.ownerPhone)), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => editSection("ownerApproved"), className: "p-2 text-neutral-400 hover:text-black transition-colors outline-none shrink-0" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: PencilEdit01Icon2, size: 16 })))), /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between mt-8 pt-6 " }, /* @__PURE__ */ React47.createElement("button", { onClick: handleBack, className: "flex items-center gap-2 px-6 py-2 text-[11px] tracking-widest text-neutral-500 hover:text-black hover:bg-neutral-50 rounded-full transition-colors outline-none" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: ArrowLeft01Icon10, size: 14 }), " Close"), /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: handleNext, disabled: !isStep0Valid, className: "w-fit shrink-0" }, "Next Step"))), macroStep === 1 && /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-8 animate-in fade-in" }, type === "company" ? /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-sm text-black" }, "Member Identity Documents"), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-500 leading-relaxed" }, "Upload valid means of identification, passport photographs, and signatures for every director and shareholder.")), !formState.membersDocsApproved ? /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-6" }, formData.members.map((member, i) => /* @__PURE__ */ React47.createElement("div", { key: member.id, className: "flex flex-col gap-4" }, /* @__PURE__ */ React47.createElement("span", { className: "text-[11px] tracking-widest text-black mb-1" }, member.fullName || `Member ${i + 1}`, " ", /* @__PURE__ */ React47.createElement("span", { className: "text-neutral-400 ml-2" }, "(", member.role, ")")), /* @__PURE__ */ React47.createElement("input", { id: `id-upload-${i}`, type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", className: "hidden", onChange: (e) => handleCompanyMemberUpload(e, i, "id"), disabled: isReadOnly || isAnyUploading }), /* @__PURE__ */ React47.createElement("input", { id: `pass-upload-${i}`, type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", className: "hidden", onChange: (e) => handleCompanyMemberUpload(e, i, "passport"), disabled: isReadOnly || isAnyUploading }), /* @__PURE__ */ React47.createElement("input", { id: `sig-upload-${i}`, type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", className: "hidden", onChange: (e) => handleCompanyMemberUpload(e, i, "signature"), disabled: isReadOnly || isAnyUploading }), !member.idExtractedData && !globalExtractingId ? /* @__PURE__ */ React47.createElement("button", { onClick: () => !isReadOnly && !isAnyUploading && document.getElementById(`id-upload-${i}`)?.click(), className: `flex items-center gap-3 p-4 border border-neutral-100 rounded-full transition-colors text-sm w-full outline-none ${isAnyUploading ? "opacity-50 cursor-not-allowed bg-neutral-50 text-neutral-400" : "text-black hover:bg-neutral-50"}`, disabled: isReadOnly || isAnyUploading }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Upload01Icon3, size: 18, className: "text-neutral-400" }), " Upload Valid ID (NIN, License, Voter's Card)") : globalExtractingId && !member.idExtractedData ? /* @__PURE__ */ React47.createElement("div", { className: " mt-2" }, /* @__PURE__ */ React47.createElement(AiStageCheck, { tasks: aiTasks })) : member.idExtractedData ? /* @__PURE__ */ React47.createElement("div", { className: " mt-2 animate-in fade-in border border-orange-100 bg-linear-to-bl from-orange-50/80 via-white to-white p-5 rounded-xl flex flex-col gap-4 relative overflow-hidden" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("span", { className: "text-[11px] tracking-widest text-orange-600 block mb-2" }, "Review Extracted ID"), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React47.createElement(TextInput, { label: "Full Name on ID", value: member.idExtractedData.fullName, onChange: (v) => updateCompanyMemberInfo(i, "idExtractedData", { ...member.idExtractedData, fullName: v }), disabled: isReadOnly || isAnyUploading }), /* @__PURE__ */ React47.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React47.createElement(TextInput, { label: "ID Number", value: member.idExtractedData.idNumber, onChange: (v) => updateCompanyMemberInfo(i, "idExtractedData", { ...member.idExtractedData, idNumber: v }), disabled: isReadOnly || isAnyUploading }), /* @__PURE__ */ React47.createElement(TextInput, { label: "Date of Birth", value: member.idExtractedData.dob, onChange: (v) => updateCompanyMemberInfo(i, "idExtractedData", { ...member.idExtractedData, dob: v }), disabled: isReadOnly || isAnyUploading })))), /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-2 mt-2" }, !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => deleteCompanyMemberDocument(i, "id"), disabled: isAnyUploading, className: "px-6 py-2 bg-white border border-neutral-100 text-neutral-500 text-[11px] rounded-full tracking-widest hover:bg-neutral-50 transition-colors outline-none disabled:opacity-50 disabled:cursor-not-allowed" }, "Delete & Re-upload ID"))) : null, !member.passportFileUrl && !globalUploadingPassport ? /* @__PURE__ */ React47.createElement("button", { onClick: () => !isReadOnly && !isAnyUploading && document.getElementById(`pass-upload-${i}`)?.click(), className: `flex items-center gap-3 p-4 border border-neutral-100 rounded-full transition-colors text-sm w-full outline-none ${isAnyUploading ? "opacity-50 cursor-not-allowed bg-neutral-50 text-neutral-400" : "text-black hover:bg-neutral-50"}`, disabled: isReadOnly || isAnyUploading }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Upload01Icon3, size: 18, className: "text-neutral-400" }), " Upload Passport Photo") : globalUploadingPassport && !member.passportFileUrl ? /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3 p-4 border border-neutral-100 rounded-full bg-neutral-50 text-neutral-500 text-sm w-full" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Loading03Icon15, size: 18, className: "animate-spin text-black" }), " Uploading Passport...") : member.passportFileUrl ? /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between p-4 bg-emerald-50 rounded-full text-emerald-800 text-sm w-full" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: IdentificationIcon, size: 18 }), " Passport Uploaded"), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => deleteCompanyMemberDocument(i, "passport"), disabled: isAnyUploading, className: "text-emerald-700 hover:text-red-500 transition-colors p-1 outline-none shrink-0 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Delete02Icon3, size: 16 }))) : null, !member.signatureFileUrl && !globalUploadingSignature ? /* @__PURE__ */ React47.createElement("button", { onClick: () => !isReadOnly && !isAnyUploading && document.getElementById(`sig-upload-${i}`)?.click(), className: `flex items-center gap-3 p-4 border border-neutral-100 rounded-full transition-colors text-sm w-full outline-none ${isAnyUploading ? "opacity-50 cursor-not-allowed bg-neutral-50 text-neutral-400" : "text-black hover:bg-neutral-50"}`, disabled: isReadOnly || isAnyUploading }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Upload01Icon3, size: 18, className: "text-neutral-400" }), " Upload Signature") : globalUploadingSignature && !member.signatureFileUrl ? /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3 p-4 border border-neutral-100 rounded-full bg-neutral-50 text-neutral-500 text-sm w-full" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Loading03Icon15, size: 18, className: "animate-spin text-black" }), " Uploading Signature...") : member.signatureFileUrl ? /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between p-4 bg-emerald-50 rounded-full text-emerald-800 text-sm w-full" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: SignatureIcon, size: 18 }), " Signature Uploaded"), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => deleteCompanyMemberDocument(i, "signature"), disabled: isAnyUploading, className: "text-emerald-700 hover:text-red-500 transition-colors p-1 outline-none shrink-0 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Delete02Icon3, size: 16 }))) : null)), /* @__PURE__ */ React47.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: () => approveSection("membersDocsApproved"), disabled: !areCompanyMemberDocsValid() || isReadOnly || isAnyUploading, className: "w-fit" }, "Confirm All Documents"))) : /* @__PURE__ */ React47.createElement("div", { className: " flex items-center justify-between bg-emerald-50 p-6 rounded-full" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("p", { className: "text-sm text-emerald-800" }, "Documents Uploaded"), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-emerald-600 mt-1" }, "Data safely extracted.")), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => editSection("membersDocsApproved"), className: "p-2 text-emerald-700 hover:text-black transition-colors outline-none shrink-0" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: PencilEdit01Icon2, size: 16 })))) : /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement("input", { type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", ref: idRef, onChange: (e) => handleBusinessUpload(e, "id"), disabled: isReadOnly || isAnyUploading, className: "hidden" }), /* @__PURE__ */ React47.createElement("input", { type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", ref: passportRef, onChange: (e) => handleBusinessUpload(e, "passport"), disabled: isReadOnly || isAnyUploading, className: "hidden" }), /* @__PURE__ */ React47.createElement("input", { type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", ref: signatureRef, onChange: (e) => handleBusinessUpload(e, "signature"), disabled: isReadOnly || isAnyUploading, className: "hidden" }), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-2 text-black" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-sm " }, "Upload Means of Identification")), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-500 -mt-2" }, "Upload your NIN, Driver's License, Voter's Card, or Int'l Passport (JPG/PNG/WEBP)."), !formState.idApproved ? /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement("button", { onClick: () => !isReadOnly && !isAnyUploading && idRef.current?.click(), disabled: isReadOnly || isAnyUploading, className: `w-full h-32 border border-neutral-100 rounded-full flex flex-col items-center justify-center gap-2 transition-colors outline-none ${isAnyUploading ? "opacity-50 cursor-not-allowed bg-neutral-50 text-neutral-400" : "hover:bg-neutral-50 text-black"}` }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Upload01Icon3, size: 24, className: "text-neutral-400" }), /* @__PURE__ */ React47.createElement("span", { className: "text-xs" }, "Select ID Image to Upload")), globalExtractingId && /* @__PURE__ */ React47.createElement("div", { className: " mt-2" }, /* @__PURE__ */ React47.createElement(AiStageCheck, { tasks: aiTasks })), formData.idExtractedData && /* @__PURE__ */ React47.createElement("div", { className: " mt-2 animate-in fade-in border border-orange-100 bg-linear-to-bl from-orange-50/80 via-white to-white p-5 rounded-2xl flex flex-col gap-4 relative overflow-hidden" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("span", { className: "text-[11px] tracking-widest text-orange-600 block mb-2" }, "Review AI Extracted Data"), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-500 mb-4" }, "Please verify the extracted information and correct any OCR mistakes before approving."), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React47.createElement(TextInput, { label: "Full Name on ID", value: formData.idExtractedData.fullName, onChange: (v) => setFormData((f) => ({ ...f, idExtractedData: { ...f.idExtractedData, fullName: v } })), disabled: isReadOnly || isAnyUploading }), /* @__PURE__ */ React47.createElement("div", { className: "grid grid-cols-2 gap-4" }, /* @__PURE__ */ React47.createElement(TextInput, { label: "ID Number", value: formData.idExtractedData.idNumber, onChange: (v) => setFormData((f) => ({ ...f, idExtractedData: { ...f.idExtractedData, idNumber: v } })), disabled: isReadOnly || isAnyUploading }), /* @__PURE__ */ React47.createElement(TextInput, { label: "Date of Birth (YYYY-MM-DD)", value: formData.idExtractedData.dob, onChange: (v) => setFormData((f) => ({ ...f, idExtractedData: { ...f.idExtractedData, dob: v } })), disabled: isReadOnly || isAnyUploading })))), /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-2 mt-2" }, /* @__PURE__ */ React47.createElement(ThreeDActionButton, { onClick: () => approveSection("idApproved"), disabled: isAnyUploading || isReadOnly, className: "w-fit shrink-0" }, "Approve Data"), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => deleteBusinessDocument("id"), disabled: isAnyUploading, className: "px-6 py-2 bg-white border border-neutral-100 text-neutral-500 text-[11px] rounded-full tracking-widest hover:bg-neutral-50 transition-colors outline-none disabled:opacity-50 disabled:cursor-not-allowed" }, "Delete & Re-upload")))) : /* @__PURE__ */ React47.createElement("div", { className: " flex items-center justify-between bg-emerald-50 p-6 rounded-full" }, /* @__PURE__ */ React47.createElement("div", null, /* @__PURE__ */ React47.createElement("p", { className: "text-sm text-emerald-800" }, "ID Document Verified"), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-emerald-600 mt-1" }, "Data safely extracted and stored.")), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => editSection("idApproved"), className: "p-2 text-emerald-700 hover:text-black transition-colors outline-none shrink-0" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: PencilEdit01Icon2, size: 16 })))), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4 pt-6 animate-in slide-in-from-top-4 duration-500" }, /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-3 " }, !formState.passportApproved && !globalUploadingPassport ? /* @__PURE__ */ React47.createElement("button", { onClick: () => !isReadOnly && !isAnyUploading && passportRef.current?.click(), disabled: isReadOnly || isAnyUploading, className: `flex items-center gap-3 p-4 border border-neutral-100 rounded-full transition-colors text-sm w-full outline-none ${isAnyUploading ? "opacity-50 cursor-not-allowed bg-neutral-50 text-neutral-400" : "text-black hover:bg-neutral-50"}` }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Upload01Icon3, size: 18, className: "text-neutral-400" }), " Upload Passport Photo") : globalUploadingPassport && !formData.passportFileUrl ? /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3 p-4 border border-neutral-100 rounded-full bg-neutral-50 text-neutral-500 text-sm w-full" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Loading03Icon15, size: 18, className: "animate-spin text-black" }), " Uploading Passport...") : /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between p-4 bg-emerald-50 rounded-full text-emerald-800 text-sm w-full" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: IdentificationIcon, size: 18 }), " Passport Uploaded"), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => deleteBusinessDocument("passport"), disabled: isAnyUploading, className: "text-emerald-700 hover:text-red-500 transition-colors p-1 outline-none shrink-0 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Delete02Icon3, size: 16 }))), !formState.signatureApproved && !globalUploadingSignature ? /* @__PURE__ */ React47.createElement("button", { onClick: () => !isReadOnly && !isAnyUploading && signatureRef.current?.click(), disabled: isReadOnly || isAnyUploading, className: `flex items-center gap-3 p-4 border border-neutral-100 rounded-full transition-colors text-sm w-full outline-none ${isAnyUploading ? "opacity-50 cursor-not-allowed bg-neutral-50 text-neutral-400" : "text-black hover:bg-neutral-50"}` }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Upload01Icon3, size: 18, className: "text-neutral-400" }), " Upload Signature") : globalUploadingSignature && !formData.signatureFileUrl ? /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3 p-4 border border-neutral-100 rounded-full bg-neutral-50 text-neutral-500 text-sm w-full" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Loading03Icon15, size: 18, className: "animate-spin text-black" }), " Uploading Signature...") : /* @__PURE__ */ React47.createElement("div", { className: "flex items-center justify-between p-4 bg-emerald-50 rounded-full text-emerald-800 text-sm w-full" }, /* @__PURE__ */ React47.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: SignatureIcon, size: 18 }), " Signature Uploaded"), !isReadOnly && /* @__PURE__ */ React47.createElement("button", { onClick: () => deleteBusinessDocument("signature"), disabled: isAnyUploading, className: "text-emerald-700 hover:text-red-500 transition-colors p-1 outline-none shrink-0 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React47.createElement(HugeiconsIcon32, { icon: Delete02Icon3, size: 16 })))))), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-4 pt-6 border-t border-neutral-100 animate-in slide-in-from-top-4 duration-500" }, /* @__PURE__ */ React47.createElement("input", { type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", ref: other1Ref, onChange: (e) => handleOptionalUpload(e, "other1"), disabled: isAnyUploading || isReadOnly, className: "hidden" }), /* @__PURE__ */ React47.createElement("input", { type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", ref: other2Ref, onChange: (e) => handleOptionalUpload(e, "other2"), disabled: isAnyUploading || isReadOnly, className: "hidden" }), /* @__PURE__ */ React47.createElement("input", { type: "file", accept: "image/jpeg, image/png, image/webp, application/pdf", ref: other3Ref, onChange: (e) => handleOptionalUpload(e, "other3"), disabled: isAnyUploading || isReadOnly, className: "hidden" }), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-1 mb-2" }, /* @__PURE__ */ React47.createElement("h3", { className: "text-sm text-black" }, "Additional Documents (Optional)"), /* @__PURE__ */ React47.createElement("p", { className: "text-xs text-neutral-500 leading-relaxed" }, "If your ", type === "company" ? "company" : "business", " involves regulated professional services, please upload relevant licenses, certificates, or permits here (up to 3 documents).")), /* @__PURE__ */ React47.createElement("div", { className: "flex flex-col gap-3" }, [1, 2, 3].map((num) => {
|
|
4235
4243
|
const docType = `other${num}`;
|
|
4236
4244
|
const ref = num === 1 ? other1Ref : num === 2 ? other2Ref : other3Ref;
|
|
4237
4245
|
const isUploading = num === 1 ? isUploadingOther1 : num === 2 ? isUploadingOther2 : isUploadingOther3;
|
|
@@ -4335,7 +4343,7 @@ SECRET_KEY="${secKey}"
|
|
|
4335
4343
|
};
|
|
4336
4344
|
const hasWebhookChanges = webhookUrl !== initialWebhookUrl;
|
|
4337
4345
|
const isWebhookSaveDisabled = isSavingWebhook || isReadOnly || !hasWebhookChanges;
|
|
4338
|
-
return /* @__PURE__ */ React48.createElement("div", { className: "flex flex-col max-w-5xl rounded-2xl p-6 bg-white gap-8 animate-in fade-in duration-300" }, /* @__PURE__ */ React48.createElement(ManagedToaster, null), /* @__PURE__ */ React48.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ React48.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React48.createElement("h1", { className: " text-xl text-black mb-1 truncate tracking-tight" }, "Developer Settings"), /* @__PURE__ */ React48.createElement("p", { className: "text-xs text-neutral-500 truncate" }, "Manage your API credentials and webhook integrations.")), isReadOnly && /* @__PURE__ */ React48.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-50 text-neutral-500 rounded-full flex items-center justify-center shrink-0" }, /* @__PURE__ */ React48.createElement(HugeiconsIcon33, { icon: CircleLock02Icon5, size: 18, className: "text-current" }))), isLoading ? /* @__PURE__ */ React48.createElement(PageSpinner6, null) : /* @__PURE__ */ React48.createElement("div", { className: "w-full max-w-5xl flex flex-col gap-12" }, /* @__PURE__ */ React48.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React48.createElement("div", { className: "space-y-2 min-w-0" }, /* @__PURE__ */ React48.createElement(
|
|
4346
|
+
return /* @__PURE__ */ React48.createElement("div", { className: "flex flex-col max-w-5xl rounded-2xl p-6 bg-white gap-8 animate-in fade-in duration-300" }, /* @__PURE__ */ React48.createElement(ManagedToaster, null), /* @__PURE__ */ React48.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ React48.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React48.createElement("h1", { className: " text-xl text-black mb-1 truncate gradient-text tracking-tight" }, "Developer Settings"), /* @__PURE__ */ React48.createElement("p", { className: "text-xs text-neutral-500 truncate" }, "Manage your API credentials and webhook integrations.")), isReadOnly && /* @__PURE__ */ React48.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-50 text-neutral-500 rounded-full flex items-center justify-center shrink-0" }, /* @__PURE__ */ React48.createElement(HugeiconsIcon33, { icon: CircleLock02Icon5, size: 18, className: "text-current" }))), isLoading ? /* @__PURE__ */ React48.createElement(PageSpinner6, null) : /* @__PURE__ */ React48.createElement("div", { className: "w-full max-w-5xl flex flex-col gap-12" }, /* @__PURE__ */ React48.createElement("div", { className: "flex flex-col gap-6" }, /* @__PURE__ */ React48.createElement("div", { className: "space-y-2 min-w-0" }, /* @__PURE__ */ React48.createElement(
|
|
4339
4347
|
TextInput,
|
|
4340
4348
|
{
|
|
4341
4349
|
label: "Public Key",
|