@retinalabsllc/zairusjs 0.6.0 → 0.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +43 -21
- package/dist/index.d.ts +43 -21
- package/dist/index.js +324 -255
- package/dist/index.mjs +328 -253
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -664,13 +664,13 @@ import React9, { useRef as useRef2, useState as useState4, useEffect as useEffec
|
|
|
664
664
|
import Image3 from "next/image";
|
|
665
665
|
import { HugeiconsIcon as HugeiconsIcon5 } from "@hugeicons/react";
|
|
666
666
|
import { ArrowLeft01Icon, ArrowRight01Icon, Loading03Icon as Loading03Icon2 } from "@hugeicons/core-free-icons";
|
|
667
|
-
var FeatureCard = ({ feature }) => {
|
|
667
|
+
var FeatureCard = ({ feature, bgImage }) => {
|
|
668
668
|
const [isBgLoading, setIsBgLoading] = useState4(true);
|
|
669
669
|
const [isFgLoading, setIsFgLoading] = useState4(!!feature.image);
|
|
670
670
|
return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col shrink-0 w-[90vw] sm:w-150 snap-center md:snap-start group cursor-grab active:cursor-grabbing" }, /* @__PURE__ */ React9.createElement("div", { className: "relative w-full aspect-16/10 bg-neutral-100 rounded-2xl overflow-hidden mb-6 flex items-center justify-center" }, /* @__PURE__ */ React9.createElement(
|
|
671
671
|
Image3,
|
|
672
672
|
{
|
|
673
|
-
src:
|
|
673
|
+
src: bgImage,
|
|
674
674
|
alt: "Card Background",
|
|
675
675
|
fill: true,
|
|
676
676
|
sizes: "(max-width: 768px) 90vw, 600px",
|
|
@@ -725,6 +725,11 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
725
725
|
scrollRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
|
|
726
726
|
}
|
|
727
727
|
};
|
|
728
|
+
const bgImages = [
|
|
729
|
+
"/assets/webp/card-bg.webp",
|
|
730
|
+
"/assets/webp/card-bg2.webp",
|
|
731
|
+
"/assets/webp/card-bg3.webp"
|
|
732
|
+
];
|
|
728
733
|
return /* @__PURE__ */ React9.createElement("section", { className: "py-24 w-full flex justify-center relative z-10 overflow-hidden" }, /* @__PURE__ */ React9.createElement("div", { className: "max-w-6xl w-full flex flex-col px-4 md:px-8" }, /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12" }, /* @__PURE__ */ React9.createElement("div", { className: "relative z-10 text-left" }, /* @__PURE__ */ React9.createElement("span", { className: "text-[10px] tracking-[0.4em] text-neutral-500 block mb-4" }, tagline), /* @__PURE__ */ React9.createElement("h2", { className: " font-serif text-3xl md:text-5xl tracking-tight text-black leading-[1.05]" }, headline)), /* @__PURE__ */ React9.createElement("div", { className: "hidden md:flex items-center gap-3" }, /* @__PURE__ */ React9.createElement(
|
|
729
734
|
"button",
|
|
730
735
|
{
|
|
@@ -750,7 +755,7 @@ var FeatureScroll = ({ tagline, headline, features }) => {
|
|
|
750
755
|
onScroll: checkScroll,
|
|
751
756
|
className: "flex gap-6 overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] scrollbar-none pb-8 -mx-4 px-4 md:mx-0 md:px-0"
|
|
752
757
|
},
|
|
753
|
-
features.map((feature, idx) => /* @__PURE__ */ React9.createElement(FeatureCard, { key: idx, feature }))
|
|
758
|
+
features.slice(0, 3).map((feature, idx) => /* @__PURE__ */ React9.createElement(FeatureCard, { key: idx, feature, bgImage: bgImages[idx] }))
|
|
754
759
|
), /* @__PURE__ */ React9.createElement("div", { className: "flex md:hidden items-center justify-center gap-4 mt-2" }, /* @__PURE__ */ React9.createElement(
|
|
755
760
|
"button",
|
|
756
761
|
{
|
|
@@ -1444,13 +1449,35 @@ var GifFeatureCard = ({
|
|
|
1444
1449
|
import React25, { useState as useState9, useEffect as useEffect6 } from "react";
|
|
1445
1450
|
import Link9 from "next/link";
|
|
1446
1451
|
import { HugeiconsIcon as HugeiconsIcon13 } from "@hugeicons/react";
|
|
1447
|
-
import {
|
|
1452
|
+
import {
|
|
1453
|
+
SidebarLeft01Icon,
|
|
1454
|
+
CancelCircleIcon,
|
|
1455
|
+
UserIcon,
|
|
1456
|
+
CheckmarkCircle01Icon,
|
|
1457
|
+
LogoutCircle02Icon,
|
|
1458
|
+
ArrowLeft01Icon as ArrowLeft01Icon2
|
|
1459
|
+
} from "@hugeicons/core-free-icons";
|
|
1460
|
+
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" }));
|
|
1448
1461
|
var UniversalSidebar = ({
|
|
1449
1462
|
navItems,
|
|
1450
1463
|
currentPath,
|
|
1451
1464
|
isMobileOpen,
|
|
1452
1465
|
closeMobile,
|
|
1466
|
+
openMobile,
|
|
1453
1467
|
onNavClick,
|
|
1468
|
+
// Header integrations
|
|
1469
|
+
title = "App",
|
|
1470
|
+
subtitle,
|
|
1471
|
+
homeUrl = "/app",
|
|
1472
|
+
showBackButton = false,
|
|
1473
|
+
backUrl = "/app",
|
|
1474
|
+
showWorkspaceSwitcher = false,
|
|
1475
|
+
workspaces = [],
|
|
1476
|
+
activeWorkspaceId,
|
|
1477
|
+
onSwitchWorkspace,
|
|
1478
|
+
showLogoutAction = false,
|
|
1479
|
+
onLogout,
|
|
1480
|
+
// Intercept
|
|
1454
1481
|
showInterceptDialog = false,
|
|
1455
1482
|
onCancelIntercept,
|
|
1456
1483
|
onConfirmIntercept,
|
|
@@ -1458,6 +1485,9 @@ var UniversalSidebar = ({
|
|
|
1458
1485
|
interceptMessage = "Are you sure you want to leave? All unsaved changes will be lost."
|
|
1459
1486
|
}) => {
|
|
1460
1487
|
const [isCollapsed, setIsCollapsed] = useState9(false);
|
|
1488
|
+
const [showSwitcherDialog, setShowSwitcherDialog] = useState9(false);
|
|
1489
|
+
const [showLogoutDialog, setShowLogoutDialog] = useState9(false);
|
|
1490
|
+
const [isLoggingOut, setIsLoggingOut] = useState9(false);
|
|
1461
1491
|
useEffect6(() => {
|
|
1462
1492
|
if (isMobileOpen) {
|
|
1463
1493
|
closeMobile();
|
|
@@ -1466,7 +1496,33 @@ var UniversalSidebar = ({
|
|
|
1466
1496
|
const hasActiveMatch = navItems.some(
|
|
1467
1497
|
(item) => item.path === "/mod" || item.path === "/app" ? currentPath === item.path : currentPath === item.path || currentPath?.startsWith(`${item.path}/`)
|
|
1468
1498
|
);
|
|
1499
|
+
const handleLogoutInitiation = async () => {
|
|
1500
|
+
if (isLoggingOut || !onLogout) return;
|
|
1501
|
+
setIsLoggingOut(true);
|
|
1502
|
+
try {
|
|
1503
|
+
await onLogout();
|
|
1504
|
+
} catch (error) {
|
|
1505
|
+
setIsLoggingOut(false);
|
|
1506
|
+
setShowLogoutDialog(false);
|
|
1507
|
+
}
|
|
1508
|
+
};
|
|
1469
1509
|
return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(
|
|
1510
|
+
"button",
|
|
1511
|
+
{
|
|
1512
|
+
onClick: openMobile,
|
|
1513
|
+
className: `md:hidden fixed top-4 left-4 z-40 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-[0_4px_20px_rgba(0,0,0,0.08)] border border-neutral-100 text-black transition-all duration-300 outline-none ${isMobileOpen ? "opacity-0 pointer-events-none scale-90" : "opacity-100 scale-100"}`,
|
|
1514
|
+
"aria-label": "Open Menu"
|
|
1515
|
+
},
|
|
1516
|
+
/* @__PURE__ */ React25.createElement(HugeiconsIcon13, { icon: SidebarLeft01Icon, size: 18 })
|
|
1517
|
+
), showBackButton && /* @__PURE__ */ React25.createElement(
|
|
1518
|
+
Link9,
|
|
1519
|
+
{
|
|
1520
|
+
href: backUrl,
|
|
1521
|
+
className: "fixed top-4 right-4 md:top-6 md:right-8 z-40 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-[0_4px_20px_rgba(0,0,0,0.08)] border border-neutral-100 text-black hover:bg-neutral-50 transition-all duration-300 outline-none",
|
|
1522
|
+
"aria-label": "Go Back"
|
|
1523
|
+
},
|
|
1524
|
+
/* @__PURE__ */ React25.createElement(HugeiconsIcon13, { icon: ArrowLeft01Icon2, size: 18 })
|
|
1525
|
+
), /* @__PURE__ */ React25.createElement(
|
|
1470
1526
|
"div",
|
|
1471
1527
|
{
|
|
1472
1528
|
className: `fixed inset-0 bg-black/30 shadow-2xl transition-opacity duration-300 md:hidden z-90 ${isMobileOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`,
|
|
@@ -1482,16 +1538,16 @@ var UniversalSidebar = ({
|
|
|
1482
1538
|
${isCollapsed ? "md:w-16 w-64" : "w-64"}
|
|
1483
1539
|
`
|
|
1484
1540
|
},
|
|
1485
|
-
/* @__PURE__ */ React25.createElement("div", { className: "
|
|
1541
|
+
/* @__PURE__ */ React25.createElement("div", { className: `flex items-center shrink-0 p-5 ${isCollapsed && !isMobileOpen ? "justify-center min-h-18" : "justify-between"}` }, (!isCollapsed || isMobileOpen) && /* @__PURE__ */ React25.createElement(Link9, { href: homeUrl, className: "flex flex-col justify-center outline-none group min-w-0 pr-2" }, /* @__PURE__ */ React25.createElement("span", { className: "text-[13px] font-serif text-black leading-none truncate tracking-wide mb-1 group-hover:opacity-70 transition-opacity" }, 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(
|
|
1486
1542
|
"button",
|
|
1487
1543
|
{
|
|
1488
1544
|
onClick: closeMobile,
|
|
1489
1545
|
className: "text-neutral-400 hover:text-black transition-colors outline-none",
|
|
1490
1546
|
"aria-label": "Close Menu"
|
|
1491
1547
|
},
|
|
1492
|
-
/* @__PURE__ */ React25.createElement(HugeiconsIcon13, { icon: CancelCircleIcon, size:
|
|
1493
|
-
)),
|
|
1494
|
-
/* @__PURE__ */ React25.createElement("nav", { className: "flex-1 py-
|
|
1548
|
+
/* @__PURE__ */ React25.createElement(HugeiconsIcon13, { icon: CancelCircleIcon, size: 24 })
|
|
1549
|
+
))),
|
|
1550
|
+
/* @__PURE__ */ React25.createElement("nav", { className: "flex-1 py-2 flex flex-col gap-1.5 px-3 overflow-y-auto custom-scrollbar" }, navItems.map((item, index) => {
|
|
1495
1551
|
const isExactOrSubMatch = item.path === "/mod" || item.path === "/app" ? currentPath === item.path : currentPath === item.path || currentPath?.startsWith(`${item.path}/`);
|
|
1496
1552
|
const isCurrentRoute = isExactOrSubMatch || !hasActiveMatch && index === 0;
|
|
1497
1553
|
return /* @__PURE__ */ React25.createElement(
|
|
@@ -1500,7 +1556,7 @@ var UniversalSidebar = ({
|
|
|
1500
1556
|
key: item.name,
|
|
1501
1557
|
href: item.path,
|
|
1502
1558
|
onClick: (e) => onNavClick ? onNavClick(e, item.path) : void 0,
|
|
1503
|
-
className: `flex items-center gap-3 px-3 py-2 rounded-full transition-all outline-none group ${isCurrentRoute ? "bg-neutral-100 text-black " : "text-neutral-500 hover:text-black hover:bg-neutral-50"}`,
|
|
1559
|
+
className: `flex items-center gap-3 px-3 py-2 rounded-full transition-all outline-none group shrink-0 ${isCurrentRoute ? "bg-neutral-100 text-black " : "text-neutral-500 hover:text-black hover:bg-neutral-50"}`,
|
|
1504
1560
|
title: isCollapsed && !isMobileOpen ? item.name : void 0
|
|
1505
1561
|
},
|
|
1506
1562
|
/* @__PURE__ */ React25.createElement(
|
|
@@ -1514,7 +1570,23 @@ var UniversalSidebar = ({
|
|
|
1514
1570
|
(!isCollapsed || isMobileOpen) && /* @__PURE__ */ React25.createElement("span", { className: "text-xs tracking-wide truncate" }, item.name)
|
|
1515
1571
|
);
|
|
1516
1572
|
})),
|
|
1517
|
-
/* @__PURE__ */ React25.createElement("div", { className: "p-4
|
|
1573
|
+
/* @__PURE__ */ React25.createElement("div", { className: "p-4 shrink-0 flex flex-col gap-2 " }, (showWorkspaceSwitcher || showLogoutAction) && /* @__PURE__ */ React25.createElement("div", { className: `flex gap-2 px-1 pb-2 ${isCollapsed && !isMobileOpen ? "flex-col items-center" : "items-center"}` }, showWorkspaceSwitcher && workspaces && workspaces.length > 0 && /* @__PURE__ */ React25.createElement(
|
|
1574
|
+
"button",
|
|
1575
|
+
{
|
|
1576
|
+
onClick: () => setShowSwitcherDialog(true),
|
|
1577
|
+
className: "w-8 h-8 shrink-0 rounded-full bg-neutral-50 flex items-center justify-center text-neutral-500 hover:text-black hover:bg-neutral-100 transition-all outline-none",
|
|
1578
|
+
title: "Switch Workspace"
|
|
1579
|
+
},
|
|
1580
|
+
/* @__PURE__ */ React25.createElement(HugeiconsIcon13, { icon: UserIcon, size: 16 })
|
|
1581
|
+
), showLogoutAction && /* @__PURE__ */ React25.createElement(
|
|
1582
|
+
"button",
|
|
1583
|
+
{
|
|
1584
|
+
onClick: () => setShowLogoutDialog(true),
|
|
1585
|
+
className: "w-8 h-8 shrink-0 rounded-full bg-neutral-50 flex items-center justify-center text-neutral-500 hover:text-black hover:bg-neutral-100 transition-all outline-none",
|
|
1586
|
+
title: "Secure Logout"
|
|
1587
|
+
},
|
|
1588
|
+
/* @__PURE__ */ React25.createElement(HugeiconsIcon13, { icon: LogoutCircle02Icon, size: 16 })
|
|
1589
|
+
)), /* @__PURE__ */ React25.createElement("div", { className: "hidden md:block" }, /* @__PURE__ */ React25.createElement(
|
|
1518
1590
|
"button",
|
|
1519
1591
|
{
|
|
1520
1592
|
onClick: () => setIsCollapsed(!isCollapsed),
|
|
@@ -1522,108 +1594,14 @@ var UniversalSidebar = ({
|
|
|
1522
1594
|
},
|
|
1523
1595
|
/* @__PURE__ */ React25.createElement(HugeiconsIcon13, { icon: SidebarLeft01Icon, size: 18, className: "shrink-0 text-neutral-400" }),
|
|
1524
1596
|
!isCollapsed && /* @__PURE__ */ React25.createElement("span", { className: "text-xs" }, "Collapse")
|
|
1525
|
-
))
|
|
1526
|
-
),
|
|
1527
|
-
"div",
|
|
1528
|
-
{
|
|
1529
|
-
className: "absolute inset-0 bg-black/30",
|
|
1530
|
-
onClick: onCancelIntercept
|
|
1531
|
-
}
|
|
1532
|
-
), /* @__PURE__ */ React25.createElement("div", { className: "relative w-72 bg-white rounded-2xl flex flex-col items-center overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React25.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React25.createElement("h3", { className: " font-serif text-[17px] text-black tracking-tight mb-1" }, interceptTitle), /* @__PURE__ */ React25.createElement("p", { className: "text-[12px] text-neutral-500 leading-snug mt-2" }, interceptMessage)), /* @__PURE__ */ React25.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React25.createElement(
|
|
1533
|
-
"button",
|
|
1534
|
-
{
|
|
1535
|
-
onClick: onCancelIntercept,
|
|
1536
|
-
className: "flex-1 py-2 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none"
|
|
1537
|
-
},
|
|
1538
|
-
"Cancel"
|
|
1539
|
-
), /* @__PURE__ */ React25.createElement(
|
|
1540
|
-
"button",
|
|
1541
|
-
{
|
|
1542
|
-
onClick: onConfirmIntercept,
|
|
1543
|
-
className: "flex-1 py-2 text-[13px] text-[#F16A50] hover:bg-neutral-50 transition-colors flex justify-center items-center outline-none"
|
|
1544
|
-
},
|
|
1545
|
-
"Leave"
|
|
1546
|
-
)))));
|
|
1547
|
-
};
|
|
1548
|
-
|
|
1549
|
-
// src/components/UniversalHeader.tsx
|
|
1550
|
-
import React26, { useState as useState10 } from "react";
|
|
1551
|
-
import Link10 from "next/link";
|
|
1552
|
-
import { HugeiconsIcon as HugeiconsIcon14 } from "@hugeicons/react";
|
|
1553
|
-
import {
|
|
1554
|
-
UserIcon,
|
|
1555
|
-
SidebarLeft01Icon as SidebarLeft01Icon2,
|
|
1556
|
-
CheckmarkCircle01Icon,
|
|
1557
|
-
LogoutCircle02Icon,
|
|
1558
|
-
ArrowLeft01Icon as ArrowLeft01Icon2
|
|
1559
|
-
} from "@hugeicons/core-free-icons";
|
|
1560
|
-
var ButtonSpinner = () => /* @__PURE__ */ React26.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__ */ React26.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React26.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" }));
|
|
1561
|
-
var UniversalHeader = ({
|
|
1562
|
-
onOpenMobile,
|
|
1563
|
-
title,
|
|
1564
|
-
subtitle,
|
|
1565
|
-
homeUrl = "/app",
|
|
1566
|
-
showBackButton = false,
|
|
1567
|
-
backUrl = "/app",
|
|
1568
|
-
showWorkspaceSwitcher = false,
|
|
1569
|
-
workspaces = [],
|
|
1570
|
-
activeWorkspaceId,
|
|
1571
|
-
onSwitchWorkspace,
|
|
1572
|
-
showLogoutAction = false,
|
|
1573
|
-
onLogout
|
|
1574
|
-
}) => {
|
|
1575
|
-
const [showSwitcherDialog, setShowSwitcherDialog] = useState10(false);
|
|
1576
|
-
const [showLogoutDialog, setShowLogoutDialog] = useState10(false);
|
|
1577
|
-
const [isLoggingOut, setIsLoggingOut] = useState10(false);
|
|
1578
|
-
const handleLogoutInitiation = async () => {
|
|
1579
|
-
if (isLoggingOut || !onLogout) return;
|
|
1580
|
-
setIsLoggingOut(true);
|
|
1581
|
-
try {
|
|
1582
|
-
await onLogout();
|
|
1583
|
-
} catch (error) {
|
|
1584
|
-
setIsLoggingOut(false);
|
|
1585
|
-
setShowLogoutDialog(false);
|
|
1586
|
-
}
|
|
1587
|
-
};
|
|
1588
|
-
return /* @__PURE__ */ React26.createElement("div", { className: "w-full shrink-0 z-50 flex flex-col absolute top-0 left-0 pointer-events-none" }, /* @__PURE__ */ React26.createElement("div", { className: "w-full pointer-events-auto relative z-20" }, /* @__PURE__ */ React26.createElement("header", { className: "w-full pt-6 pb-3" }, /* @__PURE__ */ React26.createElement("div", { className: "max-w-7xl mx-auto px-6 flex justify-between items-center" }, /* @__PURE__ */ React26.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React26.createElement(
|
|
1589
|
-
"button",
|
|
1590
|
-
{
|
|
1591
|
-
className: "md:hidden bg-white rounded-full w-8 h-8 text-neutral-500 hover:text-black transition-colors outline-none",
|
|
1592
|
-
onClick: onOpenMobile,
|
|
1593
|
-
"aria-label": "Open Menu"
|
|
1594
|
-
},
|
|
1595
|
-
/* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: SidebarLeft01Icon2, size: 16 })
|
|
1596
|
-
), /* @__PURE__ */ React26.createElement(Link10, { href: homeUrl, className: "flex items-center gap-3 transition-opacity hover:opacity-70 outline-none" }, /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col justify-center" }, /* @__PURE__ */ React26.createElement("span", { className: "text-[13px] font-serif text-black leading-none truncate tracking-wide mb-1" }, title), subtitle && /* @__PURE__ */ React26.createElement("span", { className: "text-[9px] text-neutral-500 truncate tracking-[0.2em] leading-none" }, subtitle)))), /* @__PURE__ */ React26.createElement("div", { className: "flex items-center gap-3" }, showWorkspaceSwitcher && workspaces.length > 0 && /* @__PURE__ */ React26.createElement(
|
|
1597
|
-
"button",
|
|
1598
|
-
{
|
|
1599
|
-
onClick: () => setShowSwitcherDialog(true),
|
|
1600
|
-
className: "w-8 h-8 rounded-full bg-white flex items-center justify-center text-black transition-all group outline-none",
|
|
1601
|
-
"aria-label": "Switch Workspace"
|
|
1602
|
-
},
|
|
1603
|
-
/* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: UserIcon, size: 16, className: "transition-transform group-hover:-translate-x-0.5" })
|
|
1604
|
-
), showLogoutAction && /* @__PURE__ */ React26.createElement(
|
|
1605
|
-
"button",
|
|
1606
|
-
{
|
|
1607
|
-
onClick: () => setShowLogoutDialog(true),
|
|
1608
|
-
className: "w-8 h-8 rounded-full bg-white flex items-center justify-center text-black transition-all group outline-none",
|
|
1609
|
-
"aria-label": "Secure Logout"
|
|
1610
|
-
},
|
|
1611
|
-
/* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: LogoutCircle02Icon, size: 16, className: "transition-transform group-hover:-translate-x-0.5" })
|
|
1612
|
-
), showBackButton && /* @__PURE__ */ React26.createElement(
|
|
1613
|
-
Link10,
|
|
1614
|
-
{
|
|
1615
|
-
href: backUrl,
|
|
1616
|
-
className: "flex items-center bg-white justify-center w-8 h-8 rounded-full text-black transition-all group outline-none",
|
|
1617
|
-
"aria-label": "Go Back"
|
|
1618
|
-
},
|
|
1619
|
-
/* @__PURE__ */ React26.createElement(HugeiconsIcon14, { icon: ArrowLeft01Icon2, size: 16, className: "transition-transform group-hover:-translate-x-0.5" })
|
|
1620
|
-
))))), showSwitcherDialog && showWorkspaceSwitcher && workspaces.length > 0 && /* @__PURE__ */ React26.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React26.createElement(
|
|
1597
|
+
)))
|
|
1598
|
+
), showSwitcherDialog && showWorkspaceSwitcher && workspaces && workspaces.length > 0 && /* @__PURE__ */ React25.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React25.createElement(
|
|
1621
1599
|
"div",
|
|
1622
1600
|
{
|
|
1623
1601
|
className: "absolute inset-0 bg-black/30",
|
|
1624
1602
|
onClick: () => setShowSwitcherDialog(false)
|
|
1625
1603
|
}
|
|
1626
|
-
), /* @__PURE__ */
|
|
1604
|
+
), /* @__PURE__ */ React25.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React25.createElement("div", { className: "p-5 text-center w-full" }, /* @__PURE__ */ React25.createElement("h3", { className: " font-serif text-[17px] text-black tracking-tight mb-1" }, "Switch Workspace"), /* @__PURE__ */ React25.createElement("p", { className: "text-[11px] text-neutral-500 leading-snug" }, "Select an organization to switch your current context.")), /* @__PURE__ */ React25.createElement("div", { className: "max-h-75 overflow-y-auto w-full custom-scrollbar" }, workspaces.map((org) => /* @__PURE__ */ React25.createElement(
|
|
1627
1605
|
"button",
|
|
1628
1606
|
{
|
|
1629
1607
|
key: org.id,
|
|
@@ -1633,22 +1611,22 @@ var UniversalHeader = ({
|
|
|
1633
1611
|
},
|
|
1634
1612
|
className: "w-full text-left px-5 py-4 flex items-center justify-between hover:bg-neutral-50 transition-colors group outline-none last:border-0"
|
|
1635
1613
|
},
|
|
1636
|
-
/* @__PURE__ */
|
|
1637
|
-
activeWorkspaceId === org.id && /* @__PURE__ */
|
|
1638
|
-
))), /* @__PURE__ */
|
|
1614
|
+
/* @__PURE__ */ React25.createElement("div", { className: "flex flex-col truncate pr-4" }, /* @__PURE__ */ React25.createElement("span", { className: `text-[13px] truncate ${activeWorkspaceId === org.id ? "text-black" : "text-neutral-600 group-hover:text-black"}` }, org.name), /* @__PURE__ */ React25.createElement("span", { className: "text-[9px] text-neutral-400 tracking-[0.2em] mt-1" }, "Role: ", org.role)),
|
|
1615
|
+
activeWorkspaceId === org.id && /* @__PURE__ */ React25.createElement(HugeiconsIcon13, { icon: CheckmarkCircle01Icon, size: 16, className: "text-black shrink-0" })
|
|
1616
|
+
))), /* @__PURE__ */ React25.createElement("div", { className: "w-full flex mt-auto" }, /* @__PURE__ */ React25.createElement(
|
|
1639
1617
|
"button",
|
|
1640
1618
|
{
|
|
1641
1619
|
onClick: () => setShowSwitcherDialog(false),
|
|
1642
1620
|
className: "w-full py-2.5 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none"
|
|
1643
1621
|
},
|
|
1644
1622
|
"Cancel"
|
|
1645
|
-
)))), showLogoutDialog && showLogoutAction && /* @__PURE__ */
|
|
1623
|
+
)))), showLogoutDialog && showLogoutAction && /* @__PURE__ */ React25.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React25.createElement(
|
|
1646
1624
|
"div",
|
|
1647
1625
|
{
|
|
1648
1626
|
className: "absolute inset-0 bg-black/30",
|
|
1649
1627
|
onClick: () => !isLoggingOut && setShowLogoutDialog(false)
|
|
1650
1628
|
}
|
|
1651
|
-
), /* @__PURE__ */
|
|
1629
|
+
), /* @__PURE__ */ React25.createElement("div", { className: "relative w-72 bg-white rounded-2xl flex flex-col items-center overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React25.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React25.createElement("h3", { className: " font-serif text-[17px] text-black tracking-tight mb-1" }, "Secure Logout"), /* @__PURE__ */ React25.createElement("p", { className: "text-[12px] text-neutral-500 leading-snug mt-2" }, "Are you sure you want to log out? You will need to authenticate to return.")), /* @__PURE__ */ React25.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React25.createElement(
|
|
1652
1630
|
"button",
|
|
1653
1631
|
{
|
|
1654
1632
|
onClick: () => setShowLogoutDialog(false),
|
|
@@ -1656,21 +1634,41 @@ var UniversalHeader = ({
|
|
|
1656
1634
|
className: "flex-1 py-2 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none"
|
|
1657
1635
|
},
|
|
1658
1636
|
"Cancel"
|
|
1659
|
-
), /* @__PURE__ */
|
|
1637
|
+
), /* @__PURE__ */ React25.createElement(
|
|
1660
1638
|
"button",
|
|
1661
1639
|
{
|
|
1662
1640
|
onClick: handleLogoutInitiation,
|
|
1663
1641
|
disabled: isLoggingOut,
|
|
1664
1642
|
className: "flex-1 py-2 text-[13px] text-[#F16A50] hover:bg-neutral-50 transition-colors disabled:opacity-50 flex justify-center items-center outline-none"
|
|
1665
1643
|
},
|
|
1666
|
-
isLoggingOut ? /* @__PURE__ */
|
|
1644
|
+
isLoggingOut ? /* @__PURE__ */ React25.createElement(ButtonSpinner, null) : "Log Out"
|
|
1645
|
+
)))), showInterceptDialog && /* @__PURE__ */ React25.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React25.createElement(
|
|
1646
|
+
"div",
|
|
1647
|
+
{
|
|
1648
|
+
className: "absolute inset-0 bg-black/30",
|
|
1649
|
+
onClick: onCancelIntercept
|
|
1650
|
+
}
|
|
1651
|
+
), /* @__PURE__ */ React25.createElement("div", { className: "relative w-72 bg-white rounded-2xl flex flex-col items-center overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React25.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React25.createElement("h3", { className: " font-serif text-[17px] text-black tracking-tight mb-1" }, interceptTitle), /* @__PURE__ */ React25.createElement("p", { className: "text-[12px] text-neutral-500 leading-snug mt-2" }, interceptMessage)), /* @__PURE__ */ React25.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React25.createElement(
|
|
1652
|
+
"button",
|
|
1653
|
+
{
|
|
1654
|
+
onClick: onCancelIntercept,
|
|
1655
|
+
className: "flex-1 py-2 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none"
|
|
1656
|
+
},
|
|
1657
|
+
"Cancel"
|
|
1658
|
+
), /* @__PURE__ */ React25.createElement(
|
|
1659
|
+
"button",
|
|
1660
|
+
{
|
|
1661
|
+
onClick: onConfirmIntercept,
|
|
1662
|
+
className: "flex-1 py-2 text-[13px] text-[#F16A50] hover:bg-neutral-50 transition-colors flex justify-center items-center outline-none"
|
|
1663
|
+
},
|
|
1664
|
+
"Leave"
|
|
1667
1665
|
)))));
|
|
1668
1666
|
};
|
|
1669
1667
|
|
|
1670
1668
|
// src/components/UniversalOrganizationPage.tsx
|
|
1671
|
-
import
|
|
1669
|
+
import React26, { useState as useState10, useEffect as useEffect7 } from "react";
|
|
1672
1670
|
import toast2 from "react-hot-toast";
|
|
1673
|
-
var InputSpinner2 = () => /* @__PURE__ */
|
|
1671
|
+
var InputSpinner2 = () => /* @__PURE__ */ React26.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__ */ React26.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React26.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" }));
|
|
1674
1672
|
var UniversalOrganizationPage = ({
|
|
1675
1673
|
initialOrgName,
|
|
1676
1674
|
initialSlug,
|
|
@@ -1680,11 +1678,11 @@ var UniversalOrganizationPage = ({
|
|
|
1680
1678
|
onSaveConfiguration,
|
|
1681
1679
|
onCheckSlugAvailability
|
|
1682
1680
|
}) => {
|
|
1683
|
-
const [orgName, setOrgName] =
|
|
1684
|
-
const [slug, setSlug] =
|
|
1685
|
-
const [isCheckingSlug, setIsCheckingSlug] =
|
|
1686
|
-
const [slugAvailable, setSlugAvailable] =
|
|
1687
|
-
const [isSubmitting, setIsSubmitting] =
|
|
1681
|
+
const [orgName, setOrgName] = useState10(initialOrgName);
|
|
1682
|
+
const [slug, setSlug] = useState10(initialSlug);
|
|
1683
|
+
const [isCheckingSlug, setIsCheckingSlug] = useState10(false);
|
|
1684
|
+
const [slugAvailable, setSlugAvailable] = useState10(null);
|
|
1685
|
+
const [isSubmitting, setIsSubmitting] = useState10(false);
|
|
1688
1686
|
useEffect7(() => {
|
|
1689
1687
|
setOrgName(initialOrgName || "");
|
|
1690
1688
|
setSlug(initialSlug || "");
|
|
@@ -1749,7 +1747,7 @@ var UniversalOrganizationPage = ({
|
|
|
1749
1747
|
};
|
|
1750
1748
|
const hasChanges = orgName !== initialOrgName || slug !== initialSlug;
|
|
1751
1749
|
const isSaveDisabled = isSubmitting || isReadOnly || isCheckingSlug || !hasChanges || orgName.length < 3 || slug.length < 3 || slug !== initialSlug && slugAvailable === false;
|
|
1752
|
-
return /* @__PURE__ */
|
|
1750
|
+
return /* @__PURE__ */ React26.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-3xl 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: " font-serif text-xl text-black 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: "px-3 py-1 bg-neutral-50 text-neutral-500 rounded-full text-[10px] tracking-[0.2em] shrink-0" }, "Read Only Access")), /* @__PURE__ */ React26.createElement("div", { className: "w-full max-w-2xl" }, /* @__PURE__ */ React26.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ React26.createElement(
|
|
1753
1751
|
TextInput,
|
|
1754
1752
|
{
|
|
1755
1753
|
label: "Organization Name",
|
|
@@ -1759,7 +1757,7 @@ var UniversalOrganizationPage = ({
|
|
|
1759
1757
|
placeholder: "Acme Corporation",
|
|
1760
1758
|
maxLength: 50
|
|
1761
1759
|
}
|
|
1762
|
-
), /* @__PURE__ */
|
|
1760
|
+
), /* @__PURE__ */ React26.createElement("div", { className: "space-y-2 relative w-full" }, /* @__PURE__ */ React26.createElement("label", { className: "text-[10px] text-neutral-400 tracking-[0.2em] block uppercase" }, "Organization Slug"), /* @__PURE__ */ React26.createElement("div", { className: "flex items-center relative w-full" }, /* @__PURE__ */ React26.createElement("span", { className: "text-neutral-400 text-sm py-3 pr-2 border-b border-neutral-100 shrink-0" }, slugPrefixUrl), /* @__PURE__ */ React26.createElement(
|
|
1763
1761
|
"input",
|
|
1764
1762
|
{
|
|
1765
1763
|
type: "text",
|
|
@@ -1771,7 +1769,7 @@ var UniversalOrganizationPage = ({
|
|
|
1771
1769
|
className: "w-full px-2 py-3 text-sm bg-transparent border-b border-neutral-100 text-black transition-all outline-none focus:border-black pr-8 disabled:opacity-50 disabled:cursor-not-allowed",
|
|
1772
1770
|
placeholder: "acme-corp"
|
|
1773
1771
|
}
|
|
1774
|
-
), /* @__PURE__ */
|
|
1772
|
+
), /* @__PURE__ */ React26.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ React26.createElement(InputSpinner2, null), !isCheckingSlug && !isReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === false && /* @__PURE__ */ React26.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-100" }, /* @__PURE__ */ React26.createElement("svg", { className: "w-2 h-2 text-red-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React26.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))), !isCheckingSlug && !isReadOnly && slug !== initialSlug && slug.length >= 3 && slugAvailable === true && /* @__PURE__ */ React26.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ React26.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React26.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" })))))), /* @__PURE__ */ React26.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ React26.createElement(
|
|
1775
1773
|
ThreeDActionButton,
|
|
1776
1774
|
{
|
|
1777
1775
|
type: "submit",
|
|
@@ -1780,7 +1778,7 @@ var UniversalOrganizationPage = ({
|
|
|
1780
1778
|
className: "min-w-32"
|
|
1781
1779
|
},
|
|
1782
1780
|
"Save Changes"
|
|
1783
|
-
), hasChanges && !isSubmitting && !isReadOnly && /* @__PURE__ */
|
|
1781
|
+
), hasChanges && !isSubmitting && !isReadOnly && /* @__PURE__ */ React26.createElement(
|
|
1784
1782
|
"button",
|
|
1785
1783
|
{
|
|
1786
1784
|
type: "button",
|
|
@@ -1795,9 +1793,9 @@ var UniversalOrganizationPage = ({
|
|
|
1795
1793
|
};
|
|
1796
1794
|
|
|
1797
1795
|
// src/components/UniversalIdentityPage.tsx
|
|
1798
|
-
import
|
|
1796
|
+
import React27, { useState as useState11, useEffect as useEffect8 } from "react";
|
|
1799
1797
|
import toast3 from "react-hot-toast";
|
|
1800
|
-
var ButtonSpinner2 = () => /* @__PURE__ */
|
|
1798
|
+
var ButtonSpinner2 = () => /* @__PURE__ */ React27.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__ */ React27.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React27.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" }));
|
|
1801
1799
|
var UniversalIdentityPage = ({
|
|
1802
1800
|
headerTitle,
|
|
1803
1801
|
headerDescription,
|
|
@@ -1813,11 +1811,11 @@ var UniversalIdentityPage = ({
|
|
|
1813
1811
|
onDeleteResource,
|
|
1814
1812
|
onSuccessfulDeleteRedirect = "/app"
|
|
1815
1813
|
}) => {
|
|
1816
|
-
const [primaryValue, setPrimaryValue] =
|
|
1817
|
-
const [secondaryValue, setSecondaryValue] =
|
|
1818
|
-
const [isSubmitting, setIsSubmitting] =
|
|
1819
|
-
const [isDeleteModalOpen, setIsDeleteModalOpen] =
|
|
1820
|
-
const [isDeleting, setIsDeleting] =
|
|
1814
|
+
const [primaryValue, setPrimaryValue] = useState11(initialPrimaryValue);
|
|
1815
|
+
const [secondaryValue, setSecondaryValue] = useState11(initialSecondaryValue);
|
|
1816
|
+
const [isSubmitting, setIsSubmitting] = useState11(false);
|
|
1817
|
+
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState11(false);
|
|
1818
|
+
const [isDeleting, setIsDeleting] = useState11(false);
|
|
1821
1819
|
useEffect8(() => {
|
|
1822
1820
|
setPrimaryValue(initialPrimaryValue || "");
|
|
1823
1821
|
setSecondaryValue(initialSecondaryValue || "");
|
|
@@ -1869,7 +1867,7 @@ var UniversalIdentityPage = ({
|
|
|
1869
1867
|
};
|
|
1870
1868
|
const hasChanges = primaryValue !== initialPrimaryValue || secondaryValue !== initialSecondaryValue;
|
|
1871
1869
|
const isSaveDisabled = isSubmitting || isReadOnly || !hasChanges || primaryValue.trim().length < 3;
|
|
1872
|
-
return /* @__PURE__ */
|
|
1870
|
+
return /* @__PURE__ */ React27.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-3xl 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: " font-serif text-xl text-black mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ React27.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription)), isReadOnly && /* @__PURE__ */ React27.createElement("span", { className: "px-3 py-1 bg-neutral-50 text-neutral-500 rounded-full text-[10px] tracking-[0.2em] shrink-0" }, "Read Only Access")), /* @__PURE__ */ React27.createElement("div", { className: "w-full max-w-2xl" }, /* @__PURE__ */ React27.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ React27.createElement(
|
|
1873
1871
|
TextInput,
|
|
1874
1872
|
{
|
|
1875
1873
|
label: primaryInputLabel,
|
|
@@ -1878,7 +1876,7 @@ var UniversalIdentityPage = ({
|
|
|
1878
1876
|
disabled: isReadOnly || isSubmitting,
|
|
1879
1877
|
maxLength: 50
|
|
1880
1878
|
}
|
|
1881
|
-
), secondaryInputLabel && /* @__PURE__ */
|
|
1879
|
+
), secondaryInputLabel && /* @__PURE__ */ React27.createElement(
|
|
1882
1880
|
TextInput,
|
|
1883
1881
|
{
|
|
1884
1882
|
label: secondaryInputLabel,
|
|
@@ -1887,7 +1885,7 @@ var UniversalIdentityPage = ({
|
|
|
1887
1885
|
disabled: isReadOnly || isSubmitting,
|
|
1888
1886
|
maxLength: 150
|
|
1889
1887
|
}
|
|
1890
|
-
), !isReadOnly && /* @__PURE__ */
|
|
1888
|
+
), !isReadOnly && /* @__PURE__ */ React27.createElement("div", { className: "pt-8 mt-2 flex flex-col sm:flex-row sm:items-center justify-between gap-6" }, /* @__PURE__ */ React27.createElement("div", { className: "flex items-center gap-4 w-full sm:w-auto" }, /* @__PURE__ */ React27.createElement(
|
|
1891
1889
|
ThreeDActionButton,
|
|
1892
1890
|
{
|
|
1893
1891
|
type: "submit",
|
|
@@ -1896,7 +1894,7 @@ var UniversalIdentityPage = ({
|
|
|
1896
1894
|
className: "min-w-32 w-full sm:w-auto"
|
|
1897
1895
|
},
|
|
1898
1896
|
"Save Changes"
|
|
1899
|
-
), hasChanges && !isSubmitting && /* @__PURE__ */
|
|
1897
|
+
), hasChanges && !isSubmitting && /* @__PURE__ */ React27.createElement(
|
|
1900
1898
|
"button",
|
|
1901
1899
|
{
|
|
1902
1900
|
type: "button",
|
|
@@ -1907,7 +1905,7 @@ var UniversalIdentityPage = ({
|
|
|
1907
1905
|
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"
|
|
1908
1906
|
},
|
|
1909
1907
|
"Cancel"
|
|
1910
|
-
)), allowDeletion && /* @__PURE__ */
|
|
1908
|
+
)), allowDeletion && /* @__PURE__ */ React27.createElement(
|
|
1911
1909
|
"button",
|
|
1912
1910
|
{
|
|
1913
1911
|
type: "button",
|
|
@@ -1916,7 +1914,7 @@ var UniversalIdentityPage = ({
|
|
|
1916
1914
|
},
|
|
1917
1915
|
"Delete ",
|
|
1918
1916
|
headerTitle.split(" ")[0]
|
|
1919
|
-
)))), isDeleteModalOpen && !isReadOnly && allowDeletion && /* @__PURE__ */
|
|
1917
|
+
)))), isDeleteModalOpen && !isReadOnly && allowDeletion && /* @__PURE__ */ React27.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React27.createElement("div", { className: "absolute inset-0 bg-black/30 shadow-2xl", onClick: () => !isDeleting && setIsDeleteModalOpen(false) }), /* @__PURE__ */ React27.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__ */ React27.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React27.createElement("h3", { className: " font-serif text-[17px] text-black tracking-tight mb-1" }, "Confirm Deletion"), /* @__PURE__ */ React27.createElement("p", { className: "text-[12px] text-neutral-500 leading-snug mt-2" }, deleteWarningText)), /* @__PURE__ */ React27.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React27.createElement(
|
|
1920
1918
|
"button",
|
|
1921
1919
|
{
|
|
1922
1920
|
type: "button",
|
|
@@ -1925,7 +1923,7 @@ var UniversalIdentityPage = ({
|
|
|
1925
1923
|
className: "flex-1 py-2 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none"
|
|
1926
1924
|
},
|
|
1927
1925
|
"Cancel"
|
|
1928
|
-
), /* @__PURE__ */
|
|
1926
|
+
), /* @__PURE__ */ React27.createElement(
|
|
1929
1927
|
"button",
|
|
1930
1928
|
{
|
|
1931
1929
|
type: "button",
|
|
@@ -1933,14 +1931,14 @@ var UniversalIdentityPage = ({
|
|
|
1933
1931
|
disabled: isDeleting,
|
|
1934
1932
|
className: "flex-1 py-2 text-[13px] text-red-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 flex justify-center items-center outline-none"
|
|
1935
1933
|
},
|
|
1936
|
-
isDeleting ? /* @__PURE__ */
|
|
1934
|
+
isDeleting ? /* @__PURE__ */ React27.createElement(ButtonSpinner2, null) : "Delete"
|
|
1937
1935
|
)))));
|
|
1938
1936
|
};
|
|
1939
1937
|
|
|
1940
1938
|
// src/components/UniversalMembersPage.tsx
|
|
1941
|
-
import
|
|
1939
|
+
import React28, { useState as useState12, useEffect as useEffect9, useRef as useRef4 } from "react";
|
|
1942
1940
|
import toast4 from "react-hot-toast";
|
|
1943
|
-
import { HugeiconsIcon as
|
|
1941
|
+
import { HugeiconsIcon as HugeiconsIcon14 } from "@hugeicons/react";
|
|
1944
1942
|
import {
|
|
1945
1943
|
UserAdd01Icon,
|
|
1946
1944
|
ArrowLeft01Icon as ArrowLeft01Icon3,
|
|
@@ -1949,8 +1947,8 @@ import {
|
|
|
1949
1947
|
ArrowDown01Icon as ArrowDown01Icon2,
|
|
1950
1948
|
Loading03Icon as Loading03Icon6
|
|
1951
1949
|
} from "@hugeicons/core-free-icons";
|
|
1952
|
-
var ButtonSpinner3 = () => /* @__PURE__ */
|
|
1953
|
-
var PageSpinner2 = () => /* @__PURE__ */
|
|
1950
|
+
var ButtonSpinner3 = () => /* @__PURE__ */ React28.createElement(HugeiconsIcon14, { icon: Loading03Icon6, size: 16, className: "animate-spin text-white" });
|
|
1951
|
+
var PageSpinner2 = () => /* @__PURE__ */ React28.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React28.createElement(HugeiconsIcon14, { icon: Loading03Icon6, size: 32, className: "animate-spin mb-4 text-black" }));
|
|
1954
1952
|
var getInitials = (name) => {
|
|
1955
1953
|
if (!name) return "U";
|
|
1956
1954
|
const parts = name.trim().split(" ");
|
|
@@ -1993,16 +1991,16 @@ var UniversalMembersPage = ({
|
|
|
1993
1991
|
onRemoveMember,
|
|
1994
1992
|
onUpdateRole
|
|
1995
1993
|
}) => {
|
|
1996
|
-
const [currentView, setCurrentView] =
|
|
1997
|
-
const [selectedMember, setSelectedMember] =
|
|
1998
|
-
const [inviteEmail, setInviteEmail] =
|
|
1999
|
-
const [inviteFirst, setInviteFirst] =
|
|
2000
|
-
const [inviteLast, setInviteLast] =
|
|
2001
|
-
const [isInviting, setIsInviting] =
|
|
2002
|
-
const [isRoleModalOpen, setIsRoleModalOpen] =
|
|
2003
|
-
const [isUpdatingRole, setIsUpdatingRole] =
|
|
2004
|
-
const [memberToDelete, setMemberToDelete] =
|
|
2005
|
-
const [isDeleting, setIsDeleting] =
|
|
1994
|
+
const [currentView, setCurrentView] = useState12("list");
|
|
1995
|
+
const [selectedMember, setSelectedMember] = useState12(null);
|
|
1996
|
+
const [inviteEmail, setInviteEmail] = useState12("");
|
|
1997
|
+
const [inviteFirst, setInviteFirst] = useState12("");
|
|
1998
|
+
const [inviteLast, setInviteLast] = useState12("");
|
|
1999
|
+
const [isInviting, setIsInviting] = useState12(false);
|
|
2000
|
+
const [isRoleModalOpen, setIsRoleModalOpen] = useState12(false);
|
|
2001
|
+
const [isUpdatingRole, setIsUpdatingRole] = useState12(false);
|
|
2002
|
+
const [memberToDelete, setMemberToDelete] = useState12(null);
|
|
2003
|
+
const [isDeleting, setIsDeleting] = useState12(false);
|
|
2006
2004
|
const dropdownRef = useRef4(null);
|
|
2007
2005
|
useEffect9(() => {
|
|
2008
2006
|
function handleClickOutside(event) {
|
|
@@ -2078,15 +2076,15 @@ var UniversalMembersPage = ({
|
|
|
2078
2076
|
setSelectedMember(null);
|
|
2079
2077
|
setIsRoleModalOpen(false);
|
|
2080
2078
|
};
|
|
2081
|
-
return /* @__PURE__ */
|
|
2079
|
+
return /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col gap-8 animate-in max-w-3xl fade-in duration-300 p-6 rounded-2xl bg-white " }, /* @__PURE__ */ React28.createElement(ManagedToaster, null), /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, currentView === "list" && /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("h1", { className: " font-serif text-xl text-black mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ React28.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription)), canManage && /* @__PURE__ */ React28.createElement(
|
|
2082
2080
|
ThreeDActionButton,
|
|
2083
2081
|
{
|
|
2084
2082
|
onClick: () => setCurrentView("invite"),
|
|
2085
2083
|
className: "w-fit shrink-0 gap-2"
|
|
2086
2084
|
},
|
|
2087
|
-
/* @__PURE__ */
|
|
2085
|
+
/* @__PURE__ */ React28.createElement(HugeiconsIcon14, { icon: UserAdd01Icon, size: 12 }),
|
|
2088
2086
|
"Add Member"
|
|
2089
|
-
)), currentView !== "list" && /* @__PURE__ */
|
|
2087
|
+
)), currentView !== "list" && /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ React28.createElement("button", { onClick: goBack, className: "text-[10px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none" }, /* @__PURE__ */ React28.createElement(HugeiconsIcon14, { icon: ArrowLeft01Icon3, size: 12 }), " Back"), /* @__PURE__ */ React28.createElement("h1", { className: " font-serif text-lg text-black tracking-tight" }, currentView === "invite" ? "Add New Member" : "Member Profile"))), currentView === "list" && /* @__PURE__ */ React28.createElement("div", { className: "w-full overflow-hidden" }, isLoading ? /* @__PURE__ */ React28.createElement(PageSpinner2, null) : /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React28.createElement("div", { className: "divide-y divide-neutral-100" }, members.map((member) => /* @__PURE__ */ React28.createElement(
|
|
2090
2088
|
"div",
|
|
2091
2089
|
{
|
|
2092
2090
|
key: member.id,
|
|
@@ -2096,7 +2094,7 @@ var UniversalMembersPage = ({
|
|
|
2096
2094
|
},
|
|
2097
2095
|
className: "flex items-center justify-between p-4 sm:p-5 hover:bg-neutral-50/50 transition-colors cursor-pointer group min-w-0"
|
|
2098
2096
|
},
|
|
2099
|
-
/* @__PURE__ */
|
|
2097
|
+
/* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-3 sm:gap-4 min-w-0 flex-1" }, member.displayImage && member.displayImage !== "NO_IMAGE" ? /* @__PURE__ */ React28.createElement("div", { className: "w-10 h-10 shrink-0 rounded-full overflow-hidden bg-neutral-100" }, /* @__PURE__ */ React28.createElement(
|
|
2100
2098
|
"img",
|
|
2101
2099
|
{
|
|
2102
2100
|
src: member.displayImage,
|
|
@@ -2104,25 +2102,25 @@ var UniversalMembersPage = ({
|
|
|
2104
2102
|
className: "w-full h-full object-cover blur-sm transition-all duration-300",
|
|
2105
2103
|
onLoad: (e) => e.currentTarget.classList.remove("blur-sm")
|
|
2106
2104
|
}
|
|
2107
|
-
)) : /* @__PURE__ */
|
|
2108
|
-
/* @__PURE__ */
|
|
2109
|
-
))), /* @__PURE__ */
|
|
2105
|
+
)) : /* @__PURE__ */ React28.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__ */ React28.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React28.createElement("p", { className: "text-sm text-black truncate pr-2 sm:pr-4" }, member.fullName, " ", member.userId === currentUserId && /* @__PURE__ */ React28.createElement("span", { className: "text-neutral-400 ml-1 sm:ml-2" }, "(You)")), /* @__PURE__ */ React28.createElement("p", { className: "text-xs text-neutral-500 truncate pr-2 sm:pr-4 mt-0.5" }, member.email))),
|
|
2106
|
+
/* @__PURE__ */ React28.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__ */ React28.createElement("span", { className: "text-[10px] tracking-[0.2em] text-black border border-neutral-100 px-4 py-2 rounded-full bg-white whitespace-nowrap" }, canManage ? "Manage" : "View"))
|
|
2107
|
+
))), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center justify-between p-4 sm:p-5" }, /* @__PURE__ */ React28.createElement("span", { className: "text-[10px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React28.createElement(
|
|
2110
2108
|
"button",
|
|
2111
2109
|
{
|
|
2112
2110
|
onClick: () => onPageChange(currentPage - 1),
|
|
2113
2111
|
disabled: currentPage === 1 || isLoading,
|
|
2114
2112
|
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"
|
|
2115
2113
|
},
|
|
2116
|
-
/* @__PURE__ */
|
|
2117
|
-
), /* @__PURE__ */
|
|
2114
|
+
/* @__PURE__ */ React28.createElement(HugeiconsIcon14, { icon: ArrowLeft01Icon3, size: 14 })
|
|
2115
|
+
), /* @__PURE__ */ React28.createElement(
|
|
2118
2116
|
"button",
|
|
2119
2117
|
{
|
|
2120
2118
|
onClick: () => onPageChange(currentPage + 1),
|
|
2121
2119
|
disabled: currentPage >= totalPages || isLoading,
|
|
2122
2120
|
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"
|
|
2123
2121
|
},
|
|
2124
|
-
/* @__PURE__ */
|
|
2125
|
-
))))), currentView === "details" && selectedMember && /* @__PURE__ */
|
|
2122
|
+
/* @__PURE__ */ React28.createElement(HugeiconsIcon14, { icon: ArrowRight01Icon3, size: 14 })
|
|
2123
|
+
))))), currentView === "details" && selectedMember && /* @__PURE__ */ React28.createElement("div", { className: "w-full max-w-2xl text-left" }, /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col gap-8" }, /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-5" }, selectedMember.displayImage && selectedMember.displayImage !== "NO_IMAGE" ? /* @__PURE__ */ React28.createElement("div", { className: "w-16 h-16 shrink-0 rounded-full overflow-hidden bg-neutral-100" }, /* @__PURE__ */ React28.createElement(
|
|
2126
2124
|
"img",
|
|
2127
2125
|
{
|
|
2128
2126
|
src: selectedMember.displayImage,
|
|
@@ -2130,7 +2128,7 @@ var UniversalMembersPage = ({
|
|
|
2130
2128
|
className: "w-full h-full object-cover blur-sm transition-all duration-300",
|
|
2131
2129
|
onLoad: (e) => e.currentTarget.classList.remove("blur-sm")
|
|
2132
2130
|
}
|
|
2133
|
-
)) : /* @__PURE__ */
|
|
2131
|
+
)) : /* @__PURE__ */ React28.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__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("h2", { className: " font-serif text-lg text-black" }, selectedMember.fullName), /* @__PURE__ */ React28.createElement("p", { className: "text-sm text-neutral-500 mt-1" }, selectedMember.email))), /* @__PURE__ */ React28.createElement("div", { className: "grid grid-cols-2 gap-6 border-t border-neutral-100 pt-8" }, /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-3" }, "Role"), canChangeRoles && selectedMember.userId !== currentUserId ? /* @__PURE__ */ React28.createElement(
|
|
2134
2132
|
"button",
|
|
2135
2133
|
{
|
|
2136
2134
|
onClick: () => !isUpdatingRole && setIsRoleModalOpen(true),
|
|
@@ -2138,16 +2136,16 @@ var UniversalMembersPage = ({
|
|
|
2138
2136
|
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"}`
|
|
2139
2137
|
},
|
|
2140
2138
|
selectedMember.role,
|
|
2141
|
-
isUpdatingRole ? /* @__PURE__ */
|
|
2142
|
-
) : /* @__PURE__ */
|
|
2139
|
+
isUpdatingRole ? /* @__PURE__ */ React28.createElement(ButtonSpinner3, null) : /* @__PURE__ */ React28.createElement(HugeiconsIcon14, { icon: ArrowDown01Icon2, size: 14, className: "text-neutral-400" })
|
|
2140
|
+
) : /* @__PURE__ */ React28.createElement("span", { className: "text-xs text-black bg-neutral-50 px-4 py-2 rounded-full inline-block" }, selectedMember.role)), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-3" }, "Joined Date"), /* @__PURE__ */ React28.createElement("span", { className: "text-sm text-black" }, new Date(selectedMember.joinedAt).toLocaleDateString()))), canManage && selectedMember.userId !== currentUserId && /* @__PURE__ */ React28.createElement("div", { className: "pt-8 mt-2 border-t border-neutral-100" }, /* @__PURE__ */ React28.createElement(
|
|
2143
2141
|
"button",
|
|
2144
2142
|
{
|
|
2145
2143
|
onClick: () => setMemberToDelete(selectedMember),
|
|
2146
2144
|
className: "flex items-center gap-2 text-[11px] tracking-widest text-red-600 hover:text-red-700 transition-colors w-fit outline-none"
|
|
2147
2145
|
},
|
|
2148
|
-
/* @__PURE__ */
|
|
2146
|
+
/* @__PURE__ */ React28.createElement(HugeiconsIcon14, { icon: Delete01Icon, size: 14 }),
|
|
2149
2147
|
" Remove Member"
|
|
2150
|
-
)))), currentView === "invite" && canManage && /* @__PURE__ */
|
|
2148
|
+
)))), currentView === "invite" && canManage && /* @__PURE__ */ React28.createElement("div", { className: "w-full max-w-2xl text-left" }, /* @__PURE__ */ React28.createElement("form", { onSubmit: handleInvite, className: "space-y-8", autoComplete: "off" }, /* @__PURE__ */ React28.createElement(
|
|
2151
2149
|
TextInput,
|
|
2152
2150
|
{
|
|
2153
2151
|
label: "Email Address",
|
|
@@ -2156,7 +2154,7 @@ var UniversalMembersPage = ({
|
|
|
2156
2154
|
disabled: isInviting,
|
|
2157
2155
|
placeholder: "developer@acme.com"
|
|
2158
2156
|
}
|
|
2159
|
-
), requireNamesForInvite && /* @__PURE__ */
|
|
2157
|
+
), requireNamesForInvite && /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col sm:flex-row gap-6" }, /* @__PURE__ */ React28.createElement(
|
|
2160
2158
|
TextInput,
|
|
2161
2159
|
{
|
|
2162
2160
|
label: "First Name",
|
|
@@ -2165,7 +2163,7 @@ var UniversalMembersPage = ({
|
|
|
2165
2163
|
disabled: isInviting,
|
|
2166
2164
|
placeholder: "Jane"
|
|
2167
2165
|
}
|
|
2168
|
-
), /* @__PURE__ */
|
|
2166
|
+
), /* @__PURE__ */ React28.createElement(
|
|
2169
2167
|
TextInput,
|
|
2170
2168
|
{
|
|
2171
2169
|
label: "Last Name",
|
|
@@ -2174,7 +2172,7 @@ var UniversalMembersPage = ({
|
|
|
2174
2172
|
disabled: isInviting,
|
|
2175
2173
|
placeholder: "Doe"
|
|
2176
2174
|
}
|
|
2177
|
-
)), /* @__PURE__ */
|
|
2175
|
+
)), /* @__PURE__ */ React28.createElement("div", { className: "pt-8 mt-2" }, /* @__PURE__ */ React28.createElement(
|
|
2178
2176
|
ThreeDActionButton,
|
|
2179
2177
|
{
|
|
2180
2178
|
type: "submit",
|
|
@@ -2183,7 +2181,7 @@ var UniversalMembersPage = ({
|
|
|
2183
2181
|
className: "min-w-40"
|
|
2184
2182
|
},
|
|
2185
2183
|
"Send Invitation"
|
|
2186
|
-
)))), isRoleModalOpen && canChangeRoles && /* @__PURE__ */
|
|
2184
|
+
)))), isRoleModalOpen && canChangeRoles && /* @__PURE__ */ React28.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isUpdatingRole && setIsRoleModalOpen(false) }), /* @__PURE__ */ React28.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__ */ React28.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React28.createElement("h3", { className: " font-serif text-[14px] text-black tracking-tight" }, "Update Role")), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, availableRoles.map((roleOption) => /* @__PURE__ */ React28.createElement(
|
|
2187
2185
|
"button",
|
|
2188
2186
|
{
|
|
2189
2187
|
key: roleOption,
|
|
@@ -2191,9 +2189,9 @@ var UniversalMembersPage = ({
|
|
|
2191
2189
|
disabled: isUpdatingRole,
|
|
2192
2190
|
className: `text-left px-4 py-3 text-[12px] 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"}`
|
|
2193
2191
|
},
|
|
2194
|
-
/* @__PURE__ */
|
|
2195
|
-
selectedMember?.role === roleOption && /* @__PURE__ */
|
|
2196
|
-
))), /* @__PURE__ */
|
|
2192
|
+
/* @__PURE__ */ React28.createElement("span", { className: "truncate pr-2" }, roleOption),
|
|
2193
|
+
selectedMember?.role === roleOption && /* @__PURE__ */ React28.createElement("div", { className: "w-1.5 h-1.5 rounded-full shrink-0 bg-black" })
|
|
2194
|
+
))), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React28.createElement(
|
|
2197
2195
|
"button",
|
|
2198
2196
|
{
|
|
2199
2197
|
onClick: () => setIsRoleModalOpen(false),
|
|
@@ -2201,11 +2199,11 @@ var UniversalMembersPage = ({
|
|
|
2201
2199
|
className: "w-full py-2.5 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none"
|
|
2202
2200
|
},
|
|
2203
2201
|
"Cancel"
|
|
2204
|
-
)))), memberToDelete && canManage && /* @__PURE__ */
|
|
2202
|
+
)))), memberToDelete && canManage && /* @__PURE__ */ React28.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isDeleting && setMemberToDelete(null) }), /* @__PURE__ */ React28.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__ */ React28.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React28.createElement("h3", { className: " font-serif text-[17px] text-black tracking-tight mb-1" }, "Remove Member"), /* @__PURE__ */ React28.createElement("p", { className: "text-[12px] text-neutral-500 leading-snug mt-2" }, "Are you sure you want to remove this member? They will lose access instantly.")), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React28.createElement("button", { onClick: () => setMemberToDelete(null), disabled: isDeleting, className: "flex-1 py-2 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none" }, "Cancel"), /* @__PURE__ */ React28.createElement("button", { onClick: handleDelete, disabled: isDeleting, className: "flex-1 py-2 text-[13px] text-red-600 hover:bg-neutral-50 transition-colors disabled:opacity-50 flex justify-center outline-none" }, isDeleting ? /* @__PURE__ */ React28.createElement(ButtonSpinner3, null) : "Remove")))));
|
|
2205
2203
|
};
|
|
2206
2204
|
|
|
2207
2205
|
// src/components/UniversalProfileSettings.tsx
|
|
2208
|
-
import
|
|
2206
|
+
import React29, { useState as useState13, useEffect as useEffect10 } from "react";
|
|
2209
2207
|
import toast5 from "react-hot-toast";
|
|
2210
2208
|
var UniversalProfileSettings = ({
|
|
2211
2209
|
initialFirstName,
|
|
@@ -2216,9 +2214,9 @@ var UniversalProfileSettings = ({
|
|
|
2216
2214
|
isReadOnly = false,
|
|
2217
2215
|
onSaveProfile
|
|
2218
2216
|
}) => {
|
|
2219
|
-
const [firstName, setFirstName] =
|
|
2220
|
-
const [lastName, setLastName] =
|
|
2221
|
-
const [isSubmitting, setIsSubmitting] =
|
|
2217
|
+
const [firstName, setFirstName] = useState13(initialFirstName);
|
|
2218
|
+
const [lastName, setLastName] = useState13(initialLastName);
|
|
2219
|
+
const [isSubmitting, setIsSubmitting] = useState13(false);
|
|
2222
2220
|
useEffect10(() => {
|
|
2223
2221
|
setFirstName(initialFirstName || "");
|
|
2224
2222
|
setLastName(initialLastName || "");
|
|
@@ -2249,7 +2247,7 @@ var UniversalProfileSettings = ({
|
|
|
2249
2247
|
};
|
|
2250
2248
|
const hasChanges = firstName !== initialFirstName || lastName !== initialLastName;
|
|
2251
2249
|
const isSaveDisabled = isSubmitting || isReadOnly || !hasChanges || firstName.trim().length === 0 || lastName.trim().length === 0;
|
|
2252
|
-
return /* @__PURE__ */
|
|
2250
|
+
return /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col max-w-3xl rounded-2xl p-6 bg-white gap-8 animate-in fade-in duration-300 " }, /* @__PURE__ */ React29.createElement(ManagedToaster, null), /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4" }, /* @__PURE__ */ React29.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React29.createElement("h1", { className: " font-serif text-xl text-black mb-1 truncate tracking-tight" }, "Personal Settings"), /* @__PURE__ */ React29.createElement("p", { className: "text-xs text-neutral-500 truncate" }, "Manage your personal account profile.")), isReadOnly && /* @__PURE__ */ React29.createElement("span", { className: "px-3 py-1 bg-neutral-50 text-neutral-500 rounded-full text-[10px] tracking-[0.2em] shrink-0 w-fit" }, "Read Only Access")), /* @__PURE__ */ React29.createElement("div", { className: "w-full max-w-2xl" }, /* @__PURE__ */ React29.createElement("form", { className: "flex flex-col gap-8", onSubmit: handleSave, autoComplete: "off" }, /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col sm:flex-row gap-6" }, /* @__PURE__ */ React29.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React29.createElement(
|
|
2253
2251
|
TextInput,
|
|
2254
2252
|
{
|
|
2255
2253
|
label: "First Name",
|
|
@@ -2258,7 +2256,7 @@ var UniversalProfileSettings = ({
|
|
|
2258
2256
|
disabled: isReadOnly || isSubmitting,
|
|
2259
2257
|
placeholder: "System"
|
|
2260
2258
|
}
|
|
2261
|
-
)), /* @__PURE__ */
|
|
2259
|
+
)), /* @__PURE__ */ React29.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React29.createElement(
|
|
2262
2260
|
TextInput,
|
|
2263
2261
|
{
|
|
2264
2262
|
label: "Last Name",
|
|
@@ -2267,7 +2265,7 @@ var UniversalProfileSettings = ({
|
|
|
2267
2265
|
disabled: isReadOnly || isSubmitting,
|
|
2268
2266
|
placeholder: "Admin"
|
|
2269
2267
|
}
|
|
2270
|
-
))), /* @__PURE__ */
|
|
2268
|
+
))), /* @__PURE__ */ React29.createElement("div", { className: "space-y-2 min-w-0" }, /* @__PURE__ */ React29.createElement(
|
|
2271
2269
|
TextInput,
|
|
2272
2270
|
{
|
|
2273
2271
|
label: "Email ID",
|
|
@@ -2276,7 +2274,7 @@ var UniversalProfileSettings = ({
|
|
|
2276
2274
|
},
|
|
2277
2275
|
disabled: true
|
|
2278
2276
|
}
|
|
2279
|
-
), /* @__PURE__ */
|
|
2277
|
+
), /* @__PURE__ */ React29.createElement("p", { className: "text-[10px] text-neutral-400 mt-1 truncate" }, "To change your email address, please contact support.")), /* @__PURE__ */ React29.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between pt-8 mt-2 gap-6 sm:gap-4 border-t border-neutral-100" }, /* @__PURE__ */ React29.createElement("div", { className: "flex items-center gap-6 min-w-0" }, /* @__PURE__ */ React29.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React29.createElement("span", { className: "text-[10px] text-neutral-400 tracking-[0.2em] block truncate uppercase" }, "Account Status"), /* @__PURE__ */ React29.createElement("span", { className: "text-xs text-black block truncate" }, accountStatus)), /* @__PURE__ */ React29.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React29.createElement("span", { className: "text-[10px] text-neutral-400 tracking-[0.2em] block truncate uppercase" }, "Member Since"), /* @__PURE__ */ React29.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__ */ React29.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__ */ React29.createElement(
|
|
2280
2278
|
"button",
|
|
2281
2279
|
{
|
|
2282
2280
|
type: "button",
|
|
@@ -2287,7 +2285,7 @@ var UniversalProfileSettings = ({
|
|
|
2287
2285
|
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"
|
|
2288
2286
|
},
|
|
2289
2287
|
"Cancel"
|
|
2290
|
-
), /* @__PURE__ */
|
|
2288
|
+
), /* @__PURE__ */ React29.createElement(
|
|
2291
2289
|
ThreeDActionButton,
|
|
2292
2290
|
{
|
|
2293
2291
|
type: "submit",
|
|
@@ -2300,16 +2298,16 @@ var UniversalProfileSettings = ({
|
|
|
2300
2298
|
};
|
|
2301
2299
|
|
|
2302
2300
|
// src/components/UniversalBillingPage.tsx
|
|
2303
|
-
import
|
|
2304
|
-
import { HugeiconsIcon as
|
|
2301
|
+
import React30, { useState as useState14 } from "react";
|
|
2302
|
+
import { HugeiconsIcon as HugeiconsIcon15 } from "@hugeicons/react";
|
|
2305
2303
|
import {
|
|
2306
2304
|
ArrowLeft01Icon as ArrowLeft01Icon4,
|
|
2307
2305
|
ArrowRight01Icon as ArrowRight01Icon4,
|
|
2308
2306
|
Loading03Icon as Loading03Icon7,
|
|
2309
2307
|
ArrowDown01Icon as ArrowDown01Icon3
|
|
2310
2308
|
} from "@hugeicons/core-free-icons";
|
|
2311
|
-
var PageSpinner3 = () => /* @__PURE__ */
|
|
2312
|
-
var ButtonSpinner4 = () => /* @__PURE__ */
|
|
2309
|
+
var PageSpinner3 = () => /* @__PURE__ */ React30.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React30.createElement(HugeiconsIcon15, { icon: Loading03Icon7, size: 32, className: "animate-spin mb-4 text-neutral-400" }));
|
|
2310
|
+
var ButtonSpinner4 = () => /* @__PURE__ */ React30.createElement(HugeiconsIcon15, { icon: Loading03Icon7, size: 16, className: "animate-spin text-neutral-500" });
|
|
2313
2311
|
var formatDate = (dateString) => {
|
|
2314
2312
|
if (!dateString) return "N/A";
|
|
2315
2313
|
return new Date(dateString).toLocaleDateString("en-US", {
|
|
@@ -2351,13 +2349,13 @@ var UniversalBillingPage = ({
|
|
|
2351
2349
|
onPayInvoice,
|
|
2352
2350
|
onUpdateInvoiceStatus
|
|
2353
2351
|
}) => {
|
|
2354
|
-
const [currentView, setCurrentView] =
|
|
2355
|
-
const [selectedInvoice, setSelectedInvoice] =
|
|
2356
|
-
const [isTimeframeModalOpen, setIsTimeframeModalOpen] =
|
|
2357
|
-
const [isPaying, setIsPaying] =
|
|
2358
|
-
const [isActionModalOpen, setIsActionModalOpen] =
|
|
2359
|
-
const [isUpdating, setIsUpdating] =
|
|
2360
|
-
const [twoFactorCode, setTwoFactorCode] =
|
|
2352
|
+
const [currentView, setCurrentView] = useState14("list");
|
|
2353
|
+
const [selectedInvoice, setSelectedInvoice] = useState14(null);
|
|
2354
|
+
const [isTimeframeModalOpen, setIsTimeframeModalOpen] = useState14(false);
|
|
2355
|
+
const [isPaying, setIsPaying] = useState14(false);
|
|
2356
|
+
const [isActionModalOpen, setIsActionModalOpen] = useState14(false);
|
|
2357
|
+
const [isUpdating, setIsUpdating] = useState14(false);
|
|
2358
|
+
const [twoFactorCode, setTwoFactorCode] = useState14("");
|
|
2361
2359
|
const handlePayment = async () => {
|
|
2362
2360
|
if (!selectedInvoice || isReadOnly || !onPayInvoice || isPaying) return;
|
|
2363
2361
|
setIsPaying(true);
|
|
@@ -2384,14 +2382,14 @@ var UniversalBillingPage = ({
|
|
|
2384
2382
|
setIsUpdating(false);
|
|
2385
2383
|
}
|
|
2386
2384
|
};
|
|
2387
|
-
return /* @__PURE__ */
|
|
2385
|
+
return /* @__PURE__ */ React30.createElement("div", { className: "flex max-w-3xl rounded-2xl bg-white p-6 flex-col 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" }, currentView === "list" ? /* @__PURE__ */ React30.createElement("div", { className: "min-w-0 w-full" }, /* @__PURE__ */ React30.createElement("h1", { className: " font-serif text-xl text-black mb-1 truncate tracking-tight" }, headerTitle), /* @__PURE__ */ React30.createElement("p", { className: "text-xs text-neutral-500 truncate mb-6" }, headerDescription), showSearchAndFilter && onSearchChange && onTimeframeChange && /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col sm:flex-row gap-4 mb-4" }, /* @__PURE__ */ React30.createElement(
|
|
2388
2386
|
TextInput,
|
|
2389
2387
|
{
|
|
2390
2388
|
placeholder: "Search by ID or Name...",
|
|
2391
2389
|
value: searchQuery,
|
|
2392
2390
|
onChange: onSearchChange
|
|
2393
2391
|
}
|
|
2394
|
-
), /* @__PURE__ */
|
|
2392
|
+
), /* @__PURE__ */ React30.createElement(
|
|
2395
2393
|
"button",
|
|
2396
2394
|
{
|
|
2397
2395
|
type: "button",
|
|
@@ -2399,10 +2397,10 @@ var UniversalBillingPage = ({
|
|
|
2399
2397
|
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"
|
|
2400
2398
|
},
|
|
2401
2399
|
timeframe === "ALL" ? "All Time" : timeframe === "24H" ? "Past 24 Hours" : timeframe === "7D" ? "Past 7 Days" : "Past 30 Days"
|
|
2402
|
-
))) : /* @__PURE__ */
|
|
2400
|
+
))) : /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ React30.createElement("button", { onClick: () => setCurrentView("list"), className: "text-[10px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none" }, /* @__PURE__ */ React30.createElement(HugeiconsIcon15, { icon: ArrowLeft01Icon4, size: 12 }), " Back")), isReadOnly && currentView === "list" && /* @__PURE__ */ React30.createElement("span", { className: "px-3 py-1 bg-neutral-50 text-neutral-500 rounded-full text-[10px] tracking-[0.2em] shrink-0 w-fit" }, "Read Only Access")), currentView === "list" && /* @__PURE__ */ React30.createElement("div", { className: "w-full max-w-2xl" }, /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col gap-8 w-full" }, (metricPrimaryLabel || metricSecondaryLabel) && /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-start pb-8 border-b border-neutral-100 gap-6 sm:gap-0" }, metricPrimaryLabel && /* @__PURE__ */ React30.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React30.createElement("h3", { className: " font-serif text-[10px] text-neutral-400 tracking-[0.2em] mb-2 truncate block uppercase" }, metricPrimaryLabel), /* @__PURE__ */ React30.createElement("div", { className: "text-xl text-black tracking-tight truncate" }, formatNaira(metricPrimaryValue)), metricPrimarySubtext && /* @__PURE__ */ React30.createElement("p", { className: "text-[10px] text-neutral-500 mt-1 tracking-widest uppercase" }, metricPrimarySubtext)), metricSecondaryLabel && /* @__PURE__ */ React30.createElement("div", { className: "min-w-0 sm:text-right" }, /* @__PURE__ */ React30.createElement("h3", { className: " font-serif text-[10px] text-neutral-400 tracking-[0.2em] mb-2 truncate block uppercase" }, metricSecondaryLabel), /* @__PURE__ */ React30.createElement("div", { className: "text-xl text-emerald-600 tracking-tight truncate" }, formatNaira(metricSecondaryValue)), metricSecondarySubtext && /* @__PURE__ */ React30.createElement("p", { className: "text-[10px] text-neutral-500 mt-1 tracking-widest uppercase" }, metricSecondarySubtext))), !isReadOnly && showBillingOverview && /* @__PURE__ */ React30.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-8 sm:gap-4" }, /* @__PURE__ */ React30.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React30.createElement("h3", { className: " font-serif text-[10px] text-neutral-400 tracking-[0.2em] mb-3 truncate block uppercase" }, "Billing Status"), /* @__PURE__ */ React30.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React30.createElement("div", { className: `w-2 h-2 rounded-full shrink-0 ${billingStatus === "ACTIVE" ? "bg-green-500" : "bg-neutral-300"}` }), /* @__PURE__ */ React30.createElement("p", { className: "text-xs text-black tracking-widest truncate" }, billingStatus || "UNKNOWN"))), /* @__PURE__ */ React30.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React30.createElement("h3", { className: " font-serif text-[10px] text-neutral-400 tracking-[0.2em] mb-3 truncate block uppercase" }, "Next Billing Date"), /* @__PURE__ */ React30.createElement("p", { className: "text-sm text-black truncate" }, formatDate(nextBillingDate))), lastPaidDate && /* @__PURE__ */ React30.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React30.createElement("h3", { className: " font-serif text-[10px] text-neutral-400 tracking-[0.2em] mb-3 truncate block uppercase" }, "Last Paid Date"), /* @__PURE__ */ React30.createElement("p", { className: "text-sm text-neutral-600 truncate" }, formatDate(lastPaidDate)))), !isReadOnly && showUsageMetrics && usageMetrics.length > 0 && /* @__PURE__ */ React30.createElement("div", { className: "pt-8 border-t border-neutral-100" }, /* @__PURE__ */ React30.createElement("h3", { className: " font-serif text-[10px] text-neutral-400 tracking-[0.2em] mb-6 truncate block uppercase" }, "Usage & Limits"), /* @__PURE__ */ React30.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__ */ React30.createElement("div", { key: idx, className: "flex justify-between border-b border-neutral-50 pb-2" }, /* @__PURE__ */ React30.createElement("span", { className: "text-neutral-500 text-xs" }, metric.label), /* @__PURE__ */ React30.createElement("span", { className: "text-xs text-black" }, metric.value))))), /* @__PURE__ */ React30.createElement("div", { className: "pt-8 border-t border-neutral-100" }, /* @__PURE__ */ React30.createElement("h3", { className: " font-serif text-[10px] text-neutral-400 tracking-[0.2em] mb-4 truncate block uppercase" }, "Transaction History"), isLoading ? /* @__PURE__ */ React30.createElement(PageSpinner3, null) : invoices.length === 0 ? /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement("p", { className: "text-xs text-neutral-500 py-4" }, "No records found.")) : /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React30.createElement("div", { className: "divide-y divide-neutral-100" }, invoices.map((inv) => /* @__PURE__ */ React30.createElement("div", { key: inv.id, onClick: () => {
|
|
2403
2401
|
setSelectedInvoice(inv);
|
|
2404
2402
|
setCurrentView("details");
|
|
2405
|
-
}, className: "flex items-center justify-between py-4 hover:bg-neutral-50/50 cursor-pointer group min-w-0 px-2 transition-colors" }, /* @__PURE__ */
|
|
2403
|
+
}, className: "flex items-center justify-between py-4 hover:bg-neutral-50/50 cursor-pointer group min-w-0 px-2 transition-colors" }, /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col gap-1 min-w-0 flex-1" }, /* @__PURE__ */ React30.createElement("p", { className: "text-sm text-black truncate pr-4" }, inv.name), /* @__PURE__ */ React30.createElement("p", { className: "text-xs text-neutral-500 truncate" }, inv.subtext)), /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col items-end gap-1 shrink-0 pl-4" }, /* @__PURE__ */ React30.createElement("p", { className: "text-sm text-black" }, formatNaira(inv.amountDue)), /* @__PURE__ */ React30.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__ */ React30.createElement("div", { className: "flex items-center justify-between pt-4 mt-2" }, /* @__PURE__ */ React30.createElement("span", { className: "text-[10px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages), /* @__PURE__ */ React30.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React30.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__ */ React30.createElement(HugeiconsIcon15, { icon: ArrowLeft01Icon4, size: 14 })), /* @__PURE__ */ React30.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__ */ React30.createElement(HugeiconsIcon15, { icon: ArrowRight01Icon4, size: 14 })))))))), currentView === "details" && selectedInvoice && /* @__PURE__ */ React30.createElement("div", { className: "w-full max-w-2xl animate-in fade-in duration-300" }, /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col gap-6 w-full" }, /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1 uppercase" }, "Breakdown"), /* @__PURE__ */ React30.createElement("h2", { className: " font-serif text-xl text-black mb-1" }, selectedInvoice.name), /* @__PURE__ */ React30.createElement("p", { className: "text-xs text-neutral-500" }, "Generated on ", formatDate(selectedInvoice.createdAt))), /* @__PURE__ */ React30.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 p-6 sm:p-8 rounded-2xl border border-neutral-100" }, /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1 uppercase" }, "Amount"), /* @__PURE__ */ React30.createElement("p", { className: "text-xl text-black" }, formatNaira(selectedInvoice.amountDue))), /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1 uppercase" }, "Status"), isModMode ? /* @__PURE__ */ React30.createElement(
|
|
2406
2404
|
"button",
|
|
2407
2405
|
{
|
|
2408
2406
|
onClick: () => !isUpdating && setIsActionModalOpen(true),
|
|
@@ -2410,8 +2408,8 @@ var UniversalBillingPage = ({
|
|
|
2410
2408
|
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"}`
|
|
2411
2409
|
},
|
|
2412
2410
|
selectedInvoice.status,
|
|
2413
|
-
isUpdating ? /* @__PURE__ */
|
|
2414
|
-
) : /* @__PURE__ */
|
|
2411
|
+
isUpdating ? /* @__PURE__ */ React30.createElement(ButtonSpinner4, null) : /* @__PURE__ */ React30.createElement(HugeiconsIcon15, { icon: ArrowDown01Icon3, size: 14, className: "text-neutral-400" })
|
|
2412
|
+
) : /* @__PURE__ */ React30.createElement("span", { className: `text-[10px] 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__ */ React30.createElement("div", { className: "md:col-span-2 pt-4 border-t border-neutral-100/60 mt-2" }, /* @__PURE__ */ React30.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 block mb-1 uppercase" }, "Reference ID"), /* @__PURE__ */ React30.createElement("p", { className: "text-xs text-neutral-500 bg-white px-3 py-2 rounded-full border border-neutral-100 inline-block" }, selectedInvoice.id))), /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-end gap-4 pt-4" }, !isModMode && selectedInvoice.status === "SCHEDULED" && onPayInvoice && /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col items-end gap-2 w-full sm:w-auto" }, /* @__PURE__ */ React30.createElement(
|
|
2415
2413
|
ThreeDActionButton,
|
|
2416
2414
|
{
|
|
2417
2415
|
onClick: handlePayment,
|
|
@@ -2420,12 +2418,12 @@ var UniversalBillingPage = ({
|
|
|
2420
2418
|
className: "w-full sm:w-auto"
|
|
2421
2419
|
},
|
|
2422
2420
|
"Pay Invoice"
|
|
2423
|
-
)), !isModMode && selectedInvoice.status === "PAID" && /* @__PURE__ */
|
|
2421
|
+
)), !isModMode && selectedInvoice.status === "PAID" && /* @__PURE__ */ React30.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__ */ React30.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React30.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTimeframeModalOpen(false) }), /* @__PURE__ */ React30.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__ */ React30.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React30.createElement("h3", { className: " font-serif text-[14px] text-black tracking-tight mb-2" }, "Select Timeframe"), /* @__PURE__ */ React30.createElement("p", { className: "text-[12px] text-neutral-500" }, "Choose the range of transactions to display.")), /* @__PURE__ */ React30.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, [
|
|
2424
2422
|
{ value: "ALL", label: "All Time" },
|
|
2425
2423
|
{ value: "24H", label: "Past 24 Hours" },
|
|
2426
2424
|
{ value: "7D", label: "Past 7 Days" },
|
|
2427
2425
|
{ value: "30D", label: "Past 30 Days" }
|
|
2428
|
-
].map((option) => /* @__PURE__ */
|
|
2426
|
+
].map((option) => /* @__PURE__ */ React30.createElement(
|
|
2429
2427
|
"button",
|
|
2430
2428
|
{
|
|
2431
2429
|
key: option.value,
|
|
@@ -2436,9 +2434,9 @@ var UniversalBillingPage = ({
|
|
|
2436
2434
|
},
|
|
2437
2435
|
className: `text-left px-4 py-3 text-[12px] 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"}`
|
|
2438
2436
|
},
|
|
2439
|
-
/* @__PURE__ */
|
|
2440
|
-
timeframe === option.value && /* @__PURE__ */
|
|
2441
|
-
))), /* @__PURE__ */
|
|
2437
|
+
/* @__PURE__ */ React30.createElement("span", { className: "truncate pr-2" }, option.label),
|
|
2438
|
+
timeframe === option.value && /* @__PURE__ */ React30.createElement("div", { className: "w-1.5 h-1.5 bg-black rounded-full shrink-0" })
|
|
2439
|
+
))), /* @__PURE__ */ React30.createElement("div", { className: "w-full flex mt-2" }, /* @__PURE__ */ React30.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__ */ React30.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React30.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isUpdating && setIsActionModalOpen(false) }), /* @__PURE__ */ React30.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__ */ React30.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React30.createElement("h3", { className: " font-serif text-[14px] text-black tracking-tight mb-2" }, "Update Invoice Status"), /* @__PURE__ */ React30.createElement(
|
|
2442
2440
|
TextInput,
|
|
2443
2441
|
{
|
|
2444
2442
|
placeholder: "Enter 2FA Code...",
|
|
@@ -2446,7 +2444,7 @@ var UniversalBillingPage = ({
|
|
|
2446
2444
|
onChange: setTwoFactorCode,
|
|
2447
2445
|
type: "password"
|
|
2448
2446
|
}
|
|
2449
|
-
)), /* @__PURE__ */
|
|
2447
|
+
)), /* @__PURE__ */ React30.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, ["SCHEDULED", "PAID", "FAILED", "CANCELED"].map((statusOption) => /* @__PURE__ */ React30.createElement(
|
|
2450
2448
|
"button",
|
|
2451
2449
|
{
|
|
2452
2450
|
key: statusOption,
|
|
@@ -2454,14 +2452,14 @@ var UniversalBillingPage = ({
|
|
|
2454
2452
|
disabled: isUpdating || !twoFactorCode,
|
|
2455
2453
|
className: `text-left px-4 py-3 text-[12px] 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"}`
|
|
2456
2454
|
},
|
|
2457
|
-
/* @__PURE__ */
|
|
2458
|
-
selectedInvoice?.status === statusOption && /* @__PURE__ */
|
|
2459
|
-
))), /* @__PURE__ */
|
|
2455
|
+
/* @__PURE__ */ React30.createElement("span", { className: "truncate pr-2" }, statusOption),
|
|
2456
|
+
selectedInvoice?.status === statusOption && /* @__PURE__ */ React30.createElement("div", { className: "w-1.5 h-1.5 bg-black rounded-full shrink-0" })
|
|
2457
|
+
))), /* @__PURE__ */ React30.createElement("div", { className: "w-full flex mt-2" }, /* @__PURE__ */ React30.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")))));
|
|
2460
2458
|
};
|
|
2461
2459
|
|
|
2462
2460
|
// src/components/UniversalDashboardPage.tsx
|
|
2463
|
-
import
|
|
2464
|
-
import { HugeiconsIcon as
|
|
2461
|
+
import React31, { useState as useState15 } from "react";
|
|
2462
|
+
import { HugeiconsIcon as HugeiconsIcon16 } from "@hugeicons/react";
|
|
2465
2463
|
import { ArrowDown01Icon as ArrowDown01Icon4, Loading03Icon as Loading03Icon8 } from "@hugeicons/core-free-icons";
|
|
2466
2464
|
var UniversalDashboardPage = ({
|
|
2467
2465
|
headerTitle,
|
|
@@ -2473,20 +2471,20 @@ var UniversalDashboardPage = ({
|
|
|
2473
2471
|
lists,
|
|
2474
2472
|
isLoading = false
|
|
2475
2473
|
}) => {
|
|
2476
|
-
const [isTimeframeModalOpen, setIsTimeframeModalOpen] =
|
|
2474
|
+
const [isTimeframeModalOpen, setIsTimeframeModalOpen] = useState15(false);
|
|
2477
2475
|
const selectedTimeframe = timeframes.find((t) => t.id === activeTimeframe) || timeframes[0];
|
|
2478
2476
|
if (isLoading) {
|
|
2479
|
-
return /* @__PURE__ */
|
|
2477
|
+
return /* @__PURE__ */ React31.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React31.createElement(HugeiconsIcon16, { icon: Loading03Icon8, size: 32, className: "animate-spin mb-4 text-black" }));
|
|
2480
2478
|
}
|
|
2481
|
-
return /* @__PURE__ */
|
|
2479
|
+
return /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col gap-8 animate-in fade-in duration-300 pb-10" }, /* @__PURE__ */ React31.createElement(ManagedToaster, null), /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4" }, /* @__PURE__ */ React31.createElement("div", null, /* @__PURE__ */ React31.createElement("h1", { className: " font-serif text-xl text-black mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ React31.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription)), timeframes.length > 0 && selectedTimeframe && onTimeframeChange && /* @__PURE__ */ React31.createElement(
|
|
2482
2480
|
"button",
|
|
2483
2481
|
{
|
|
2484
2482
|
onClick: () => setIsTimeframeModalOpen(true),
|
|
2485
2483
|
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"
|
|
2486
2484
|
},
|
|
2487
|
-
/* @__PURE__ */
|
|
2488
|
-
/* @__PURE__ */
|
|
2489
|
-
)), stats.length > 0 && /* @__PURE__ */
|
|
2485
|
+
/* @__PURE__ */ React31.createElement("span", null, selectedTimeframe.label),
|
|
2486
|
+
/* @__PURE__ */ React31.createElement(HugeiconsIcon16, { icon: ArrowDown01Icon4, size: 14, className: "text-neutral-400" })
|
|
2487
|
+
)), stats.length > 0 && /* @__PURE__ */ React31.createElement("div", { className: "w-full rounded-2xl overflow-hidden bg-white" }, /* @__PURE__ */ React31.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__ */ React31.createElement("div", { key: idx, className: "p-6 flex flex-col gap-1 min-w-0" }, /* @__PURE__ */ React31.createElement("p", { className: "text-[10px] tracking-[0.2em] text-neutral-400 truncate uppercase" }, stat.label), /* @__PURE__ */ React31.createElement("p", { className: `text-xl tracking-tight truncate ${stat.valueClass || "text-black"}` }, stat.value))))), lists.length > 0 && /* @__PURE__ */ React31.createElement("div", { className: "flex flex-col gap-8 w-full max-w-4xl" }, lists.map((list, idx) => /* @__PURE__ */ React31.createElement("div", { key: idx, className: "bg-white rounded-2xl p-6 flex flex-col min-w-0" }, /* @__PURE__ */ React31.createElement("div", { className: "flex items-center gap-3 mb-6" }, /* @__PURE__ */ React31.createElement("div", { className: "text-neutral-400" }, list.icon), /* @__PURE__ */ React31.createElement("h2", { className: " font-serif text-[11px] text-black tracking-[0.2em] uppercase" }, list.title)), /* @__PURE__ */ React31.createElement("div", { className: "divide-y divide-neutral-100 flex-1 overflow-y-auto" }, list.items.length === 0 ? /* @__PURE__ */ React31.createElement("p", { className: "text-xs text-neutral-500 py-4" }, list.emptyMessage) : list.items.map((item) => /* @__PURE__ */ React31.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__ */ React31.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React31.createElement("p", { className: "text-sm text-black truncate pr-4" }, item.primaryText), /* @__PURE__ */ React31.createElement("p", { className: "text-[10px] text-neutral-500 truncate tracking-widest mt-0.5" }, item.secondaryText)), /* @__PURE__ */ React31.createElement("div", { className: "flex items-center gap-4 shrink-0 pl-4" }, item.rightText && /* @__PURE__ */ React31.createElement("p", { className: "text-xs text-black" }, item.rightText), item.rightBadge && /* @__PURE__ */ React31.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__ */ 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-72 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: " font-serif text-[14px] text-black tracking-tight" }, "Select Timeframe")), /* @__PURE__ */ React31.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 pb-2" }, timeframes.map((tf) => /* @__PURE__ */ React31.createElement(
|
|
2490
2488
|
"button",
|
|
2491
2489
|
{
|
|
2492
2490
|
key: tf.id,
|
|
@@ -2496,9 +2494,9 @@ var UniversalDashboardPage = ({
|
|
|
2496
2494
|
},
|
|
2497
2495
|
className: `text-left px-4 py-3 text-[12px] 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"}`
|
|
2498
2496
|
},
|
|
2499
|
-
/* @__PURE__ */
|
|
2500
|
-
activeTimeframe === tf.id && /* @__PURE__ */
|
|
2501
|
-
))), /* @__PURE__ */
|
|
2497
|
+
/* @__PURE__ */ React31.createElement("span", { className: "truncate pr-2" }, tf.label),
|
|
2498
|
+
activeTimeframe === tf.id && /* @__PURE__ */ React31.createElement("div", { className: "w-1.5 h-1.5 bg-black rounded-full shrink-0" })
|
|
2499
|
+
))), /* @__PURE__ */ React31.createElement("div", { className: "w-full flex border-t border-neutral-50" }, /* @__PURE__ */ React31.createElement(
|
|
2502
2500
|
"button",
|
|
2503
2501
|
{
|
|
2504
2502
|
onClick: () => setIsTimeframeModalOpen(false),
|
|
@@ -2509,8 +2507,8 @@ var UniversalDashboardPage = ({
|
|
|
2509
2507
|
};
|
|
2510
2508
|
|
|
2511
2509
|
// src/components/UniversalAgentConsole.tsx
|
|
2512
|
-
import
|
|
2513
|
-
import { HugeiconsIcon as
|
|
2510
|
+
import React32, { useState as useState16, useRef as useRef5 } from "react";
|
|
2511
|
+
import { HugeiconsIcon as HugeiconsIcon17 } from "@hugeicons/react";
|
|
2514
2512
|
import {
|
|
2515
2513
|
ArrowLeft01Icon as ArrowLeft01Icon5,
|
|
2516
2514
|
ArrowRight01Icon as ArrowRight01Icon5,
|
|
@@ -2552,12 +2550,12 @@ var UniversalAgentConsole = ({
|
|
|
2552
2550
|
onDeleteArchive
|
|
2553
2551
|
}) => {
|
|
2554
2552
|
const archiveRef = useRef5(null);
|
|
2555
|
-
const [pendingFiles, setPendingFiles] =
|
|
2556
|
-
const [isUploading, setIsUploading] =
|
|
2557
|
-
const [isActioning, setIsActioning] =
|
|
2558
|
-
const [actionModal, setActionModal] =
|
|
2559
|
-
const [actionMessage, setActionMessage] =
|
|
2560
|
-
const [archiveToDelete, setArchiveToDelete] =
|
|
2553
|
+
const [pendingFiles, setPendingFiles] = useState16([]);
|
|
2554
|
+
const [isUploading, setIsUploading] = useState16(false);
|
|
2555
|
+
const [isActioning, setIsActioning] = useState16(false);
|
|
2556
|
+
const [actionModal, setActionModal] = useState16(null);
|
|
2557
|
+
const [actionMessage, setActionMessage] = useState16("");
|
|
2558
|
+
const [archiveToDelete, setArchiveToDelete] = useState16(null);
|
|
2561
2559
|
const handleFileSelect = (e) => {
|
|
2562
2560
|
if (e.target.files && e.target.files.length > 0) {
|
|
2563
2561
|
setPendingFiles((prev) => [...prev, ...Array.from(e.target.files)]);
|
|
@@ -2586,36 +2584,36 @@ var UniversalAgentConsole = ({
|
|
|
2586
2584
|
}
|
|
2587
2585
|
};
|
|
2588
2586
|
const DynamicArrayAccordion = ({ items, parentKey }) => {
|
|
2589
|
-
const [activeFAQ, setActiveFAQ] =
|
|
2590
|
-
return /* @__PURE__ */
|
|
2587
|
+
const [activeFAQ, setActiveFAQ] = useState16(null);
|
|
2588
|
+
return /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col relative z-10 bg-transparent w-full mt-2 border-t border-neutral-100" }, items.map((item, index) => {
|
|
2591
2589
|
const isOpen = activeFAQ === index;
|
|
2592
2590
|
let label = `${parentKey ? formatKeyName(parentKey) : "Item"} ${index + 1}`;
|
|
2593
2591
|
if (item.fullName) label = toTitleCaseSafe(item.fullName);
|
|
2594
2592
|
else if (item.role) label = item.role;
|
|
2595
2593
|
else if (item.proposedName) label = toTitleCaseSafe(item.proposedName);
|
|
2596
|
-
return /* @__PURE__ */
|
|
2594
|
+
return /* @__PURE__ */ React32.createElement("div", { key: index, className: `transition-all duration-300 ${index !== items.length - 1 ? "border-b border-neutral-100" : ""}` }, /* @__PURE__ */ React32.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__ */ React32.createElement("span", { className: `text-[13px] md:text-[14px] transition-colors ${isOpen ? "text-black" : "text-neutral-700 group-hover:text-black"}` }, label), /* @__PURE__ */ React32.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__ */ React32.createElement(HugeiconsIcon17, { icon: ArrowDown01Icon5, size: 16 }))), /* @__PURE__ */ React32.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__ */ React32.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React32.createElement("div", { className: "pt-2 flex flex-col gap-3 pr-4 md:pr-12" }, renderDynamicObject(item)))));
|
|
2597
2595
|
}));
|
|
2598
2596
|
};
|
|
2599
2597
|
const renderValue = (key, value) => {
|
|
2600
2598
|
if (value === null || value === void 0 || value === "") return null;
|
|
2601
2599
|
if (typeof value === "string") {
|
|
2602
|
-
if (value.startsWith("http") || value.startsWith("data:image")) return /* @__PURE__ */
|
|
2603
|
-
if (key.toLowerCase().includes("name") && !value.includes("@")) return /* @__PURE__ */
|
|
2604
|
-
return /* @__PURE__ */
|
|
2600
|
+
if (value.startsWith("http") || value.startsWith("data:image")) return /* @__PURE__ */ React32.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__ */ React32.createElement(HugeiconsIcon17, { icon: Download01Icon, size: 14 }), " Download File");
|
|
2601
|
+
if (key.toLowerCase().includes("name") && !value.includes("@")) return /* @__PURE__ */ React32.createElement("p", { className: "text-[12px] md:text-[13px] leading-[1.8] text-neutral-600" }, toTitleCaseSafe(value));
|
|
2602
|
+
return /* @__PURE__ */ React32.createElement("p", { className: "text-[12px] md:text-[13px] leading-[1.8] text-neutral-600" }, value);
|
|
2605
2603
|
}
|
|
2606
2604
|
if (Array.isArray(value)) {
|
|
2607
2605
|
const validItems = value.filter((item) => item !== null && item !== void 0 && item !== "");
|
|
2608
2606
|
if (validItems.length === 0) return null;
|
|
2609
|
-
if (typeof validItems[0] === "string") return /* @__PURE__ */
|
|
2610
|
-
return /* @__PURE__ */
|
|
2607
|
+
if (typeof validItems[0] === "string") return /* @__PURE__ */ React32.createElement("ul", { className: "list-disc pl-4 mt-1" }, validItems.map((v, i) => /* @__PURE__ */ React32.createElement("li", { key: i, className: "text-[12px] md:text-[13px] leading-[1.8] text-neutral-600" }, toTitleCaseSafe(v))));
|
|
2608
|
+
return /* @__PURE__ */ React32.createElement(DynamicArrayAccordion, { items: validItems, parentKey: key });
|
|
2611
2609
|
}
|
|
2612
2610
|
if (typeof value === "object") {
|
|
2613
2611
|
if (Object.keys(value).length === 0) return null;
|
|
2614
2612
|
const renderedObj = renderDynamicObject(value);
|
|
2615
2613
|
if (!renderedObj || Array.isArray(renderedObj) && renderedObj.length === 0) return null;
|
|
2616
|
-
return /* @__PURE__ */
|
|
2614
|
+
return /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col gap-3 mt-1 w-full border-l border-neutral-100 pl-4 py-2" }, renderedObj);
|
|
2617
2615
|
}
|
|
2618
|
-
return /* @__PURE__ */
|
|
2616
|
+
return /* @__PURE__ */ React32.createElement("span", { className: "text-sm text-black" }, String(value));
|
|
2619
2617
|
};
|
|
2620
2618
|
const renderDynamicObject = (obj) => {
|
|
2621
2619
|
if (!obj) return null;
|
|
@@ -2626,22 +2624,22 @@ var UniversalAgentConsole = ({
|
|
|
2626
2624
|
return true;
|
|
2627
2625
|
});
|
|
2628
2626
|
if (entries.length === 0) return null;
|
|
2629
|
-
return entries.map(([k, v]) => /* @__PURE__ */
|
|
2627
|
+
return entries.map(([k, v]) => /* @__PURE__ */ React32.createElement("div", { key: k, className: "flex flex-col items-start min-w-0 wrap-break-word w-full mb-3 last:mb-0" }, /* @__PURE__ */ React32.createElement("span", { className: "text-[10px] tracking-[0.2em] text-neutral-400 mb-1 uppercase" }, formatKeyName(k)), renderValue(k, v)));
|
|
2630
2628
|
};
|
|
2631
|
-
return /* @__PURE__ */
|
|
2629
|
+
return /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col gap-8 animate-in fade-in duration-300 pb-10" }, /* @__PURE__ */ React32.createElement(ManagedToaster, null), currentView === "list" && /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col items-start gap-1" }, /* @__PURE__ */ React32.createElement("h1", { className: " font-serif text-xl text-black tracking-tight" }, headerTitle), /* @__PURE__ */ React32.createElement("p", { className: "text-sm text-neutral-500" }, headerDescription)), stats.length > 0 && /* @__PURE__ */ React32.createElement("div", { className: "w-full rounded-2xl max-w-3xl overflow-hidden bg-white" }, /* @__PURE__ */ React32.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__ */ React32.createElement("div", { key: idx, className: "p-6 flex items-center gap-4 hover:bg-neutral-50/50 transition-colors min-w-0" }, /* @__PURE__ */ React32.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__ */ React32.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React32.createElement("p", { className: "text-[10px] tracking-[0.2em] text-neutral-400 mb-1 truncate uppercase" }, stat.label), /* @__PURE__ */ React32.createElement("p", { className: "text-xl text-black tracking-tight truncate" }, stat.value)))))), tabs.length > 0 && /* @__PURE__ */ React32.createElement("div", { className: "flex items-center gap-6" }, tabs.map((tab) => /* @__PURE__ */ React32.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__ */ React32.createElement("div", { className: "w-full bg-white rounded-2xl max-w-3xl overflow-hidden flex flex-col min-h-100" }, isLoadingList ? /* @__PURE__ */ React32.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React32.createElement(HugeiconsIcon17, { icon: Loading03Icon9, size: 32, className: "animate-spin text-black" })) : listData.length === 0 ? /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement("div", { className: "flex-1 flex justify-center items-center text-neutral-500 text-sm py-20" }, "No matching applications found.")) : /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement("div", { className: "divide-y divide-neutral-100 flex-1" }, listData.map((item) => /* @__PURE__ */ React32.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__ */ React32.createElement("div", { className: "min-w-0 flex-1" }, /* @__PURE__ */ React32.createElement("p", { className: "text-sm text-black truncate pr-4" }, item.title), /* @__PURE__ */ React32.createElement("p", { className: "text-xs text-neutral-500 truncate mt-1" }, item.subtitle)), /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col items-end gap-1 shrink-0 pl-4" }, /* @__PURE__ */ React32.createElement("span", { className: `text-[10px] tracking-widest px-3 py-1 rounded-full uppercase ${item.status === "COMPLETED" ? "bg-emerald-50 text-emerald-600" : "bg-neutral-50 text-neutral-600"}` }, item.status.replace(/_/g, " ")), /* @__PURE__ */ React32.createElement("span", { className: "text-[10px] text-neutral-400 mt-1" }, item.date))))), totalPages > 1 && /* @__PURE__ */ React32.createElement("div", { className: "flex items-center justify-between p-5 bg-neutral-50/50" }, /* @__PURE__ */ React32.createElement("span", { className: "text-[10px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages), /* @__PURE__ */ React32.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React32.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__ */ React32.createElement(HugeiconsIcon17, { icon: ArrowLeft01Icon5, size: 14 })), /* @__PURE__ */ React32.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__ */ React32.createElement(HugeiconsIcon17, { icon: ArrowRight01Icon5, size: 14 }))))))), currentView === "details" && selectedApp && /* @__PURE__ */ React32.createElement("div", { className: "w-full bg-white rounded-2xl p-6 sm:p-10 animate-in fade-in duration-300 max-w-3xl flex flex-col" }, /* @__PURE__ */ React32.createElement("div", { className: "flex items-center justify-between gap-4 pb-6" }, /* @__PURE__ */ React32.createElement("button", { onClick: () => {
|
|
2632
2630
|
onBackToList();
|
|
2633
2631
|
setPendingFiles([]);
|
|
2634
|
-
}, className: "flex items-center gap-2 text-[10px] text-neutral-400 hover:text-black tracking-widest transition-colors outline-none uppercase" }, /* @__PURE__ */
|
|
2632
|
+
}, className: "flex items-center gap-2 text-[10px] text-neutral-400 hover:text-black tracking-widest transition-colors outline-none uppercase" }, /* @__PURE__ */ React32.createElement(HugeiconsIcon17, { icon: ArrowLeft01Icon5, size: 14 }), " Back to List"), /* @__PURE__ */ React32.createElement("span", { className: `text-[10px] tracking-widest px-4 py-1.5 rounded-full uppercase ${selectedApp.status === "COMPLETED" ? "bg-emerald-50 text-emerald-600" : "bg-neutral-50 text-neutral-600"}` }, selectedApp.status.replace(/_/g, " "))), /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col gap-2 mb-8" }, /* @__PURE__ */ React32.createElement("h2", { className: " font-serif text-xl text-black tracking-tight" }, selectedApp.name || selectedApp.title), /* @__PURE__ */ React32.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__ */ React32.createElement("div", { className: "flex flex-col gap-5" }, renderDynamicObject(selectedApp.metadata)) : selectedApp.agentId === currentAgentId ? /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col gap-5" }, /* @__PURE__ */ React32.createElement("p", { className: "text-sm text-neutral-500" }, "No application data extracted.")) : null, selectedApp.agentId && /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col gap-4 pt-8 mt-4 border-t border-neutral-100" }, /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col gap-1 mb-4" }, /* @__PURE__ */ React32.createElement("h3", { className: " font-serif text-sm text-black" }, "Official Archives"), /* @__PURE__ */ React32.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__ */ React32.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__ */ React32.createElement("div", { className: "flex items-center gap-3 min-w-0" }, /* @__PURE__ */ React32.createElement(HugeiconsIcon17, { icon: File02Icon, size: 18, className: "shrink-0" }), /* @__PURE__ */ React32.createElement("span", { className: "truncate pr-2" }, arch.name)), /* @__PURE__ */ React32.createElement("button", { onClick: () => setArchiveToDelete(arch), className: "text-emerald-700 hover:text-red-500 transition-colors p-1 outline-none shrink-0" }, /* @__PURE__ */ React32.createElement(HugeiconsIcon17, { icon: Delete02Icon, size: 16 })))), pendingFiles.map((file, idx) => /* @__PURE__ */ React32.createElement("div", { key: idx, className: "flex items-center justify-between text-neutral-600 text-sm w-full" }, /* @__PURE__ */ React32.createElement("div", { className: "flex items-center gap-3 min-w-0" }, /* @__PURE__ */ React32.createElement(HugeiconsIcon17, { icon: AttachmentIcon, size: 18, className: "shrink-0" }), /* @__PURE__ */ React32.createElement("span", { className: "truncate pr-2" }, file.name)), /* @__PURE__ */ React32.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__ */ React32.createElement(HugeiconsIcon17, { icon: Cancel01Icon, size: 16 })))), /* @__PURE__ */ React32.createElement("input", { type: "file", multiple: true, ref: archiveRef, onChange: handleFileSelect, className: "hidden", accept: "application/pdf,image/*" }), /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col sm:flex-row items-center gap-3 w-full" }, /* @__PURE__ */ React32.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__ */ React32.createElement(HugeiconsIcon17, { icon: Upload01Icon, size: 18, className: "text-neutral-400" }), " Select Files to Upload"), pendingFiles.length > 0 && /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col sm:flex-row items-center gap-3 w-full sm:w-auto shrink-0" }, /* @__PURE__ */ React32.createElement("button", { onClick: () => setPendingFiles([]), disabled: isUploading, className: "px-6 py-2 text-neutral-600 text-[11px] tracking-widest rounded-full hover:bg-neutral-200 outline-none w-full sm:w-auto uppercase" }, "Clear All"), /* @__PURE__ */ React32.createElement(ThreeDActionButton, { onClick: executeUpload, disabled: isUploading, isLoading: isUploading, className: "w-full sm:w-auto" }, "Upload ", pendingFiles.length, " File(s)")))), /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 mt-8 pt-6" }, !selectedApp.agentId ? /* @__PURE__ */ React32.createElement(ThreeDActionButton, { onClick: async () => {
|
|
2635
2633
|
setIsActioning(true);
|
|
2636
2634
|
await onAcceptApplication(selectedApp.id);
|
|
2637
2635
|
setIsActioning(false);
|
|
2638
|
-
}, disabled: isActioning, isLoading: isActioning, className: "w-full sm:w-auto" }, "Accept Application") : selectedApp.agentId !== currentAgentId ? /* @__PURE__ */
|
|
2636
|
+
}, disabled: isActioning, isLoading: isActioning, className: "w-full sm:w-auto" }, "Accept Application") : selectedApp.agentId !== currentAgentId ? /* @__PURE__ */ React32.createElement("div", { className: "w-full p-4 border border-red-100 bg-red-50/30 rounded-xl flex items-start gap-3" }, /* @__PURE__ */ React32.createElement(HugeiconsIcon17, { icon: Cancel01Icon, size: 16, className: "text-red-500 shrink-0 mt-0.5" }), /* @__PURE__ */ React32.createElement("div", null, /* @__PURE__ */ React32.createElement("p", { className: "text-sm text-red-700" }, "Application Taken"), /* @__PURE__ */ React32.createElement("p", { className: "text-xs text-red-600 mt-1" }, "Currently handled by ", selectedApp.agentName || "another agent", "."))) : /* @__PURE__ */ React32.createElement("div", { className: "w-full flex flex-col sm:flex-row items-center gap-4 justify-between" }, /* @__PURE__ */ React32.createElement("p", { className: "text-xs text-neutral-500" }, "You are the assigned agent."), /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-end gap-3 w-full sm:w-auto" }, /* @__PURE__ */ React32.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 uppercase" }, "Query"), /* @__PURE__ */ React32.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 uppercase" }, "Reject"), /* @__PURE__ */ React32.createElement(ThreeDActionButton, { onClick: () => setActionModal("success"), disabled: selectedApp.status === "COMPLETED", className: "w-full sm:w-auto" }, "Mark Success"))))), actionModal && /* @__PURE__ */ React32.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React32.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isActioning && setActionModal(null) }), /* @__PURE__ */ React32.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__ */ React32.createElement("div", { className: "p-6" }, /* @__PURE__ */ React32.createElement("h3", { className: " font-serif text-lg text-black tracking-tight capitalize mb-2" }, actionModal === "success" ? "Complete Application" : `${actionModal} Application`), /* @__PURE__ */ React32.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__ */ React32.createElement("div", { className: "p-6 pb-2" }, /* @__PURE__ */ React32.createElement(TextInput, { label: "Reason for Action", value: actionMessage, onChange: setActionMessage, placeholder: "Enter your reason here...", disabled: isActioning })), /* @__PURE__ */ React32.createElement("div", { className: "flex items-center p-6 pt-4 gap-3" }, /* @__PURE__ */ React32.createElement("button", { onClick: () => setActionModal(null), disabled: isActioning, className: "flex-1 py-3 text-[11px] tracking-widest uppercase text-neutral-600 rounded-full hover:bg-neutral-50 transition-colors outline-none disabled:opacity-50" }, "Cancel"), /* @__PURE__ */ React32.createElement(ThreeDActionButton, { onClick: async () => {
|
|
2639
2637
|
setIsActioning(true);
|
|
2640
2638
|
await onUpdateStatus(selectedApp.id, actionModal === "success" ? "COMPLETED" : actionModal === "reject" ? "REJECTED" : "QUEUED", actionMessage);
|
|
2641
2639
|
setIsActioning(false);
|
|
2642
2640
|
setActionModal(null);
|
|
2643
2641
|
setActionMessage("");
|
|
2644
|
-
}, disabled: isActioning || (actionModal === "query" || actionModal === "reject") && actionMessage.trim().length < 5, isLoading: isActioning, className: "flex-1" }, "Confirm ", actionModal)))), archiveToDelete && /* @__PURE__ */
|
|
2642
|
+
}, disabled: isActioning || (actionModal === "query" || actionModal === "reject") && actionMessage.trim().length < 5, isLoading: isActioning, className: "flex-1" }, "Confirm ", actionModal)))), archiveToDelete && /* @__PURE__ */ React32.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React32.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isActioning && setArchiveToDelete(null) }), /* @__PURE__ */ React32.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__ */ React32.createElement("div", { className: "p-6" }, /* @__PURE__ */ React32.createElement("h3", { className: " font-serif text-lg text-black tracking-tight mb-2" }, "Delete Document?"), /* @__PURE__ */ React32.createElement("p", { className: "text-xs text-neutral-500" }, 'Are you sure you want to permanently delete "', archiveToDelete.name, '"?')), /* @__PURE__ */ React32.createElement("div", { className: "flex items-center p-6 gap-3" }, /* @__PURE__ */ React32.createElement("button", { onClick: () => setArchiveToDelete(null), disabled: isActioning, className: "flex-1 py-3 text-[11px] tracking-widest uppercase text-neutral-600 rounded-full hover:bg-neutral-50 transition-colors outline-none disabled:opacity-50" }, "Cancel"), /* @__PURE__ */ React32.createElement(ThreeDActionButton, { onClick: async () => {
|
|
2645
2643
|
setIsActioning(true);
|
|
2646
2644
|
await onDeleteArchive(selectedApp.id, archiveToDelete.id);
|
|
2647
2645
|
setIsActioning(false);
|
|
@@ -2651,6 +2649,71 @@ var UniversalAgentConsole = ({
|
|
|
2651
2649
|
|
|
2652
2650
|
// src/components/UniversalOverviewPage.tsx
|
|
2653
2651
|
import React34 from "react";
|
|
2652
|
+
|
|
2653
|
+
// src/components/Banner.tsx
|
|
2654
|
+
import React33, { useState as useState17 } from "react";
|
|
2655
|
+
import { HugeiconsIcon as HugeiconsIcon18 } from "@hugeicons/react";
|
|
2656
|
+
import {
|
|
2657
|
+
Alert02Icon,
|
|
2658
|
+
CheckmarkBadge01Icon,
|
|
2659
|
+
InformationCircleIcon,
|
|
2660
|
+
Cancel01Icon as Cancel01Icon2
|
|
2661
|
+
} from "@hugeicons/core-free-icons";
|
|
2662
|
+
var Banner = ({
|
|
2663
|
+
title,
|
|
2664
|
+
message,
|
|
2665
|
+
type,
|
|
2666
|
+
icon,
|
|
2667
|
+
isDismissible = true,
|
|
2668
|
+
onDismiss,
|
|
2669
|
+
action
|
|
2670
|
+
}) => {
|
|
2671
|
+
const [isVisible, setIsVisible] = useState17(true);
|
|
2672
|
+
if (!isVisible) return null;
|
|
2673
|
+
const handleDismiss = () => {
|
|
2674
|
+
setIsVisible(false);
|
|
2675
|
+
if (onDismiss) onDismiss();
|
|
2676
|
+
};
|
|
2677
|
+
const config = {
|
|
2678
|
+
success: {
|
|
2679
|
+
bg: "bg-emerald-50",
|
|
2680
|
+
iconColor: "text-emerald-600",
|
|
2681
|
+
titleColor: "text-emerald-900",
|
|
2682
|
+
msgColor: "text-emerald-700",
|
|
2683
|
+
defaultIcon: CheckmarkBadge01Icon,
|
|
2684
|
+
closeHover: "hover:bg-emerald-100 text-emerald-500"
|
|
2685
|
+
},
|
|
2686
|
+
warning: {
|
|
2687
|
+
bg: "bg-amber-50",
|
|
2688
|
+
iconColor: "text-amber-600",
|
|
2689
|
+
titleColor: "text-amber-900",
|
|
2690
|
+
msgColor: "text-amber-700",
|
|
2691
|
+
defaultIcon: InformationCircleIcon,
|
|
2692
|
+
closeHover: "hover:bg-amber-100 text-amber-500"
|
|
2693
|
+
},
|
|
2694
|
+
alert: {
|
|
2695
|
+
bg: "bg-red-50",
|
|
2696
|
+
iconColor: "text-red-600",
|
|
2697
|
+
titleColor: "text-red-900",
|
|
2698
|
+
msgColor: "text-red-700",
|
|
2699
|
+
defaultIcon: Alert02Icon,
|
|
2700
|
+
closeHover: "hover:bg-red-100 text-red-500"
|
|
2701
|
+
}
|
|
2702
|
+
};
|
|
2703
|
+
const currentConfig = config[type];
|
|
2704
|
+
const IconToUse = icon || currentConfig.defaultIcon;
|
|
2705
|
+
return /* @__PURE__ */ React33.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__ */ React33.createElement("div", { className: `shrink-0 mt-0.5 ${currentConfig.iconColor}` }, /* @__PURE__ */ React33.createElement(HugeiconsIcon18, { icon: IconToUse, size: 20 })), /* @__PURE__ */ React33.createElement("div", { className: "flex-1 flex flex-col min-w-0 pr-6" }, /* @__PURE__ */ React33.createElement("h4", { className: `text-sm font-medium tracking-tight mb-1 ${currentConfig.titleColor}` }, title), /* @__PURE__ */ React33.createElement("p", { className: `text-xs leading-relaxed ${currentConfig.msgColor}` }, message), action && /* @__PURE__ */ React33.createElement("div", { className: "mt-3" }, action)), isDismissible && /* @__PURE__ */ React33.createElement(
|
|
2706
|
+
"button",
|
|
2707
|
+
{
|
|
2708
|
+
onClick: handleDismiss,
|
|
2709
|
+
className: `absolute top-3 right-3 p-1.5 rounded-full transition-colors outline-none shrink-0 ${currentConfig.closeHover}`,
|
|
2710
|
+
"aria-label": "Dismiss banner"
|
|
2711
|
+
},
|
|
2712
|
+
/* @__PURE__ */ React33.createElement(HugeiconsIcon18, { icon: Cancel01Icon2, size: 16 })
|
|
2713
|
+
));
|
|
2714
|
+
};
|
|
2715
|
+
|
|
2716
|
+
// src/components/UniversalOverviewPage.tsx
|
|
2654
2717
|
var UniversalOverviewPage = ({
|
|
2655
2718
|
headerTitle,
|
|
2656
2719
|
headerDescription,
|
|
@@ -2658,9 +2721,21 @@ var UniversalOverviewPage = ({
|
|
|
2658
2721
|
detailsTitle = "Details",
|
|
2659
2722
|
details,
|
|
2660
2723
|
primaryAction,
|
|
2661
|
-
alerts = []
|
|
2724
|
+
alerts = [],
|
|
2725
|
+
banner
|
|
2662
2726
|
}) => {
|
|
2663
|
-
return /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col gap-8 animate-in fade-in duration-300 pb-10" }, /* @__PURE__ */ React34.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ React34.createElement("div", null, /* @__PURE__ */ React34.createElement("h1", { className: " font-serif text-xl text-black mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ React34.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription))), quickStats.length > 0 && /* @__PURE__ */ React34.createElement("div", { className: "w-full rounded-2xl overflow-hidden max-w-3xl 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" }, quickStats.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-[10px] tracking-[0.2em] text-neutral-400 mb-1 truncate uppercase" }, stat.label), /* @__PURE__ */ React34.createElement("p", { className: "text-lg md:text-xl text-black tracking-tight truncate" }, stat.value)))))),
|
|
2727
|
+
return /* @__PURE__ */ React34.createElement("div", { className: "flex flex-col gap-8 animate-in fade-in duration-300 pb-10" }, /* @__PURE__ */ React34.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ React34.createElement("div", null, /* @__PURE__ */ React34.createElement("h1", { className: " font-serif text-xl text-black mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ React34.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription))), quickStats.length > 0 && /* @__PURE__ */ React34.createElement("div", { className: "w-full rounded-2xl overflow-hidden max-w-3xl 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" }, quickStats.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-[10px] tracking-[0.2em] text-neutral-400 mb-1 truncate uppercase" }, stat.label), /* @__PURE__ */ React34.createElement("p", { className: "text-lg md:text-xl text-black tracking-tight truncate" }, stat.value)))))), banner && banner.isVisible && /* @__PURE__ */ React34.createElement("div", { className: "w-full max-w-3xl" }, /* @__PURE__ */ React34.createElement(
|
|
2728
|
+
Banner,
|
|
2729
|
+
{
|
|
2730
|
+
title: banner.title,
|
|
2731
|
+
message: banner.message,
|
|
2732
|
+
type: banner.type,
|
|
2733
|
+
icon: banner.icon,
|
|
2734
|
+
isDismissible: banner.isDismissible,
|
|
2735
|
+
onDismiss: banner.onDismiss,
|
|
2736
|
+
action: banner.action
|
|
2737
|
+
}
|
|
2738
|
+
)), /* @__PURE__ */ React34.createElement("div", { className: "w-full rounded-2xl max-w-3xl overflow-hidden bg-white min-w-0" }, /* @__PURE__ */ React34.createElement("div", { className: "p-6 sm:p-8 flex flex-col h-full min-w-0 gap-6" }, /* @__PURE__ */ React34.createElement("div", { className: "flex flex-wrap items-center justify-between gap-4 border-b border-neutral-100 pb-4" }, /* @__PURE__ */ React34.createElement("h3", { className: " font-serif text-[11px] text-black tracking-[0.2em] uppercase" }, detailsTitle), primaryAction && (primaryAction.href ? /* @__PURE__ */ React34.createElement(
|
|
2664
2739
|
ThreeDButton,
|
|
2665
2740
|
{
|
|
2666
2741
|
href: primaryAction.href,
|
|
@@ -2911,7 +2986,7 @@ var Stagger = ({ steps, currentStep }) => {
|
|
|
2911
2986
|
import React41, { useState as useState20, useEffect as useEffect11, useRef as useRef6 } from "react";
|
|
2912
2987
|
import toast6 from "react-hot-toast";
|
|
2913
2988
|
import { HugeiconsIcon as HugeiconsIcon25 } from "@hugeicons/react";
|
|
2914
|
-
import { CheckmarkBadge01Icon, Upload01Icon as Upload01Icon3, Loading03Icon as Loading03Icon12, PencilEdit01Icon as PencilEdit01Icon2, Delete02Icon as Delete02Icon2, SignatureIcon, IdentificationIcon, ArrowLeft01Icon as ArrowLeft01Icon7, HourglassIcon } from "@hugeicons/core-free-icons";
|
|
2989
|
+
import { CheckmarkBadge01Icon as CheckmarkBadge01Icon2, Upload01Icon as Upload01Icon3, Loading03Icon as Loading03Icon12, PencilEdit01Icon as PencilEdit01Icon2, Delete02Icon as Delete02Icon2, SignatureIcon, IdentificationIcon, ArrowLeft01Icon as ArrowLeft01Icon7, HourglassIcon } from "@hugeicons/core-free-icons";
|
|
2915
2990
|
var MACRO_STEPS = ["Details", "Documents", "Review", "Submit"];
|
|
2916
2991
|
var NIGERIAN_STATES = ["Abia", "Adamawa", "Akwa Ibom", "Anambra", "Bauchi", "Bayelsa", "Benue", "Borno", "Cross River", "Delta", "Ebonyi", "Edo", "Ekiti", "Enugu", "FCT - Abuja", "Gombe", "Imo", "Jigawa", "Kaduna", "Kano", "Katsina", "Kebbi", "Kogi", "Kwara", "Lagos", "Nasarawa", "Niger", "Ogun", "Ondo", "Osun", "Oyo", "Plateau", "Rivers", "Sokoto", "Taraba", "Yobe", "Zamfara"];
|
|
2917
2992
|
var MEMBER_ROLES = ["Director Only", "Shareholder Only", "Both Director & Shareholder"];
|
|
@@ -3481,7 +3556,7 @@ var UniversalRegistrationFlow = ({
|
|
|
3481
3556
|
const titleText = type === "company" ? "Company Incorporation (LLC)" : "Business Name Registration";
|
|
3482
3557
|
if (isBooting) return /* @__PURE__ */ React41.createElement("div", { className: "flex justify-center py-20" }, /* @__PURE__ */ React41.createElement(HugeiconsIcon25, { icon: Loading03Icon12, size: 32, className: "animate-spin text-black" }));
|
|
3483
3558
|
if (!["DRAFT", "QUEUED", "REJECTED"].includes(appStatus) && appStatus !== "") {
|
|
3484
|
-
return /* @__PURE__ */ React41.createElement("div", { className: "w-full max-w-3xl mx-auto bg-white rounded-4xl p-6 sm:p-10 flex flex-col items-center justify-center text-center gap-5 animate-in fade-in slide-in-from-bottom-2 duration-500 mb-20 py-24" }, appStatus === "COMPLETED" ? /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement("div", { className: "w-20 h-20 bg-neutral-50 text-neutral-500 rounded-full flex items-center justify-center mb-2" }, /* @__PURE__ */ React41.createElement(HugeiconsIcon25, { icon:
|
|
3559
|
+
return /* @__PURE__ */ React41.createElement("div", { className: "w-full max-w-3xl mx-auto bg-white rounded-4xl p-6 sm:p-10 flex flex-col items-center justify-center text-center gap-5 animate-in fade-in slide-in-from-bottom-2 duration-500 mb-20 py-24" }, appStatus === "COMPLETED" ? /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement("div", { className: "w-20 h-20 bg-neutral-50 text-neutral-500 rounded-full flex items-center justify-center mb-2" }, /* @__PURE__ */ React41.createElement(HugeiconsIcon25, { icon: CheckmarkBadge01Icon2, size: 35 })), /* @__PURE__ */ React41.createElement("h2", { className: "text-xl font-serif text-black" }, "Registration Completed"), /* @__PURE__ */ React41.createElement("p", { className: "text-sm text-neutral-500 max-w-md" }, "Your application has been successfully verified and registered.")) : appStatus === "PENDING" ? /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement("div", { className: "w-20 h-20 bg-neutral-50 text-neutral-500 rounded-full flex items-center justify-center mb-2" }, /* @__PURE__ */ React41.createElement(HugeiconsIcon25, { icon: HourglassIcon, size: 35, className: "animate-spin" })), /* @__PURE__ */ React41.createElement("h2", { className: "text-xl font-serif text-black" }, "Application is Pending"), /* @__PURE__ */ React41.createElement("p", { className: "text-sm text-neutral-500 max-w-md" }, "Your application is currently pending review.")) : appStatus === "AWAITING_PAYMENT" ? /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement("div", { className: "w-20 h-20 bg-amber-50 text-amber-500 rounded-full flex items-center justify-center mb-2" }, /* @__PURE__ */ React41.createElement(HugeiconsIcon25, { icon: HourglassIcon, size: 35, className: "animate-pulse" })), /* @__PURE__ */ React41.createElement("h2", { className: "text-xl font-serif text-black" }, "Awaiting Payment"), /* @__PURE__ */ React41.createElement("p", { className: "text-sm text-neutral-500 max-w-md" }, "Your application is complete and awaiting government fee settlement. Please go to the Billing tab to authorize payment."), /* @__PURE__ */ React41.createElement("div", { className: "mt-6 flex flex-col items-center gap-3" }, /* @__PURE__ */ React41.createElement("button", { onClick: onRedirectToBilling, className: "px-8 py-3 bg-black text-white text-[11px] tracking-widest rounded-full hover:bg-neutral-800 outline-none" }, "Go to Billing & Invoices"), /* @__PURE__ */ React41.createElement("button", { onClick: () => setIsAbortModalOpen(true), className: "px-8 py-3 border border-neutral-100 text-neutral-600 text-[11px] tracking-widest rounded-full hover:bg-neutral-50 outline-none" }, "Abort & Edit Application"))) : /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement("div", { className: "w-20 h-20 bg-neutral-50 text-neutral-500 rounded-full flex items-center justify-center mb-2" }, /* @__PURE__ */ React41.createElement(HugeiconsIcon25, { icon: HourglassIcon, size: 35 })), /* @__PURE__ */ React41.createElement("h2", { className: "text-xl font-serif text-black" }, "Application Submitted"), /* @__PURE__ */ React41.createElement("p", { className: "text-sm text-neutral-500 max-w-md" }, "Your application is currently ", appStatus.replace(/_/g, " ").toLowerCase(), "."), ["AWAITING_PAYMENT", "READY_FOR_SUBMISSION", "AWAITING_CONFIRMATION"].includes(appStatus) && /* @__PURE__ */ React41.createElement("div", { className: "mt-6 flex flex-col items-center gap-3" }, /* @__PURE__ */ React41.createElement("button", { onClick: () => setIsAbortModalOpen(true), className: "px-8 py-3 border border-neutral-100 text-neutral-600 text-[11px] tracking-widest rounded-full hover:bg-neutral-50 outline-none" }, "Abort Application"))), isAbortModalOpen && /* @__PURE__ */ React41.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React41.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => !isAborting && setIsAbortModalOpen(false) }), /* @__PURE__ */ React41.createElement("div", { className: "relative w-100 bg-white shadow-2xl rounded-3xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200 text-left" }, /* @__PURE__ */ React41.createElement("div", { className: "p-6 flex flex-col gap-4 text-center" }, /* @__PURE__ */ React41.createElement("h3", { className: "text-[17px] font-serif text-black tracking-tight" }, "Abort Application?"), /* @__PURE__ */ React41.createElement("p", { className: "text-[12px] text-neutral-500 leading-relaxed" }, "Are you sure you want to abort? If you have already made a payment, returning to draft may cause issues. Your invoice will be deleted.")), /* @__PURE__ */ React41.createElement("div", { className: "w-full flex " }, /* @__PURE__ */ React41.createElement("button", { onClick: () => setIsAbortModalOpen(false), disabled: isAborting, className: "flex-1 py-4 text-[13px] text-neutral-500 hover:bg-neutral-50 transition-colors outline-none disabled:opacity-50" }, "Cancel"), /* @__PURE__ */ React41.createElement("button", { onClick: handleAbort, disabled: isAborting, className: "flex-1 py-4 text-[13px] text-red-500 hover:bg-neutral-50 transition-colors outline-none disabled:opacity-50" }, isAborting ? "Aborting..." : "Yes, Abort")))));
|
|
3485
3560
|
}
|
|
3486
3561
|
return /* @__PURE__ */ React41.createElement("div", { className: "w-full max-w-3xl mx-auto bg-white rounded-4xl p-6 sm:p-10 flex flex-col gap-10 animate-in fade-in slide-in-from-bottom-2 duration-500 mb-20" }, /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col gap-8" }, /* @__PURE__ */ React41.createElement("div", null, /* @__PURE__ */ React41.createElement("h2", { className: "text-xl font-serif text-black tracking-tight mb-1" }, titleText), /* @__PURE__ */ React41.createElement("p", { className: "text-sm text-neutral-500" }, "Answer the questions below to build your official application.")), /* @__PURE__ */ React41.createElement("div", { className: "px-2" }, /* @__PURE__ */ React41.createElement(Stagger, { steps: MACRO_STEPS, currentStep: macroStep }))), /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col gap-8" }, macroStep === 0 && /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col gap-8 animate-in fade-in" }, /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col gap-4" }, /* @__PURE__ */ React41.createElement("div", { className: "flex items-center text-black" }, /* @__PURE__ */ React41.createElement("h3", { className: "text-sm " }, "What does your ", type === "company" ? "company" : "business", " do?")), !formState.natureApproved ? /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col gap-3 " }, /* @__PURE__ */ React41.createElement(TextInput, { label: type === "company" ? "Company Description" : "Business Description", placeholder: "e.g. We provide professional services to clients.", value: formData.businessDesc, onChange: (v) => setFormData({ ...formData, businessDesc: v }), disabled: isReadOnly || isSubmitting }), /* @__PURE__ */ React41.createElement(ThreeDActionButton, { onClick: handleAnalyzeNature, disabled: formData.businessDesc.length < 5 || isAnalyzingNature || isReadOnly, isLoading: isAnalyzingNature, className: "w-fit" }, "Analyze Nature")), isAnalyzingNature && /* @__PURE__ */ React41.createElement("div", { className: " mt-2" }, /* @__PURE__ */ React41.createElement(AiStageCheck, { tasks: [{ id: "1", label: "Matching with Official Categories...", status: "loading" }] })), suggestedNature && /* @__PURE__ */ React41.createElement("div", { className: " mt-2 animate-in fade-in" }, /* @__PURE__ */ React41.createElement(AiApproveDecline, { suggestionTitle: "Classification Found", suggestionValue: /* @__PURE__ */ React41.createElement("div", null, /* @__PURE__ */ React41.createElement("p", { className: " text-black" }, suggestedNature.specificLabel), /* @__PURE__ */ React41.createElement("p", { className: "text-xs text-neutral-500 mt-1" }, "Category: ", suggestedNature.categoryLabel)), onApprove: () => {
|
|
3487
3562
|
const newForm = { ...formData, natureOfBusiness: suggestedNature };
|
|
@@ -3508,7 +3583,7 @@ var UniversalRegistrationFlow = ({
|
|
|
3508
3583
|
if (isUploading) {
|
|
3509
3584
|
return /* @__PURE__ */ React41.createElement("div", { key: num, 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__ */ React41.createElement(HugeiconsIcon25, { icon: Loading03Icon12, size: 18, className: "animate-spin text-black" }), " Uploading Document ", num, "...");
|
|
3510
3585
|
}
|
|
3511
|
-
return /* @__PURE__ */ React41.createElement("div", { key: num, className: "flex items-center justify-between p-4 bg-emerald-50 rounded-full text-emerald-800 text-sm w-full" }, /* @__PURE__ */ React41.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React41.createElement(HugeiconsIcon25, { icon:
|
|
3586
|
+
return /* @__PURE__ */ React41.createElement("div", { key: num, className: "flex items-center justify-between p-4 bg-emerald-50 rounded-full text-emerald-800 text-sm w-full" }, /* @__PURE__ */ React41.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React41.createElement(HugeiconsIcon25, { icon: CheckmarkBadge01Icon2, size: 18 }), " Optional Document ", num, " Uploaded"), !isReadOnly && /* @__PURE__ */ React41.createElement("button", { onClick: () => deleteOptionalDocument(docType), 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__ */ React41.createElement(HugeiconsIcon25, { icon: Delete02Icon2, size: 16 })));
|
|
3512
3587
|
}))), /* @__PURE__ */ React41.createElement("div", { className: "flex items-center justify-between mt-8 pt-6 " }, /* @__PURE__ */ React41.createElement("button", { onClick: handleBack, disabled: isAnyUploading, 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 disabled:opacity-50 disabled:cursor-not-allowed" }, /* @__PURE__ */ React41.createElement(HugeiconsIcon25, { icon: ArrowLeft01Icon7, size: 14 }), " Back"), /* @__PURE__ */ React41.createElement(ThreeDActionButton, { onClick: handleNext, disabled: !isStep1Valid || isAnyUploading, className: "w-fit shrink-0" }, "Next Step"))), macroStep === 2 && /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in" }, /* @__PURE__ */ React41.createElement("div", null, /* @__PURE__ */ React41.createElement("h3", { className: "text-sm mb-5 text-black" }, "Application Summary"), /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col gap-4 text-sm" }, /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col sm:flex-row sm:justify-between border-b border-neutral-100 pb-3 gap-1" }, /* @__PURE__ */ React41.createElement("span", { className: "text-neutral-500 truncate text-[13px] " }, type === "company" ? "Company Name" : "Business Name"), /* @__PURE__ */ React41.createElement("span", { className: " text-black text-[13px]" }, formData.approvedName)), /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col sm:flex-row sm:justify-between border-b border-neutral-100 pb-3 gap-1" }, /* @__PURE__ */ React41.createElement("span", { className: "text-neutral-500 text-[13px] " }, "Classification"), /* @__PURE__ */ React41.createElement("span", { className: " text-black truncate sm:text-right text-[13px] " }, formData.natureOfBusiness?.specificLabel || "Pending")), type === "company" ? /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col sm:flex-row sm:justify-between border-b border-neutral-100 pb-3 gap-1" }, /* @__PURE__ */ React41.createElement("span", { className: "text-neutral-500 text-[13px] " }, "Total Members"), /* @__PURE__ */ React41.createElement("span", { className: " text-black truncate text-[13px] " }, formData.members.length, " Directors/Shareholders")), /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col sm:flex-row sm:justify-between border-b border-neutral-100 pb-3 gap-1" }, /* @__PURE__ */ React41.createElement("span", { className: "text-neutral-500 text-[13px] " }, "Share Capital"), /* @__PURE__ */ React41.createElement("span", { className: " text-black truncate text-[13px] " }, "100% Allocated"))) : /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col sm:flex-row sm:justify-between border-b border-neutral-100 pb-3 gap-1" }, /* @__PURE__ */ React41.createElement("span", { className: "text-neutral-500 text-[13px] " }, "Proprietor"), /* @__PURE__ */ React41.createElement("span", { className: " text-black truncate text-[13px] " }, formData.ownerName)), /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col sm:flex-row sm:justify-between pb-2 gap-1" }, /* @__PURE__ */ React41.createElement("span", { className: "text-neutral-500 text-[13px] " }, "Documents Attached"), /* @__PURE__ */ React41.createElement("span", { className: " text-neutral-400 text-[13px] " }, "ID, Passport, Signature")), formData.otherDoc1Url && /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col sm:flex-row sm:justify-between pb-2 gap-1" }, /* @__PURE__ */ React41.createElement("span", { className: "text-neutral-500 text-[13px] " }, "Optional Documents"), /* @__PURE__ */ React41.createElement("span", { className: " text-neutral-400 text-[13px] " }, [formData.otherDoc1Url, formData.otherDoc2Url, formData.otherDoc3Url].filter(Boolean).length, " Attached")))), /* @__PURE__ */ React41.createElement("div", { className: "flex items-center justify-between mt-4 pt-4 " }, /* @__PURE__ */ React41.createElement("button", { onClick: handleBack, className: "flex items-center gap-2 px-6 py-2 rounded-full text-[11px] tracking-widest text-neutral-500 hover:text-black hover:bg-neutral-50 transition-colors outline-none" }, /* @__PURE__ */ React41.createElement(HugeiconsIcon25, { icon: ArrowLeft01Icon7, size: 14 }), " Back"), /* @__PURE__ */ React41.createElement(ThreeDActionButton, { onClick: handleNext, className: "w-fit shrink-0" }, "Confirm & Proceed"))), macroStep === 3 && /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col gap-6 py-6 animate-in zoom-in-95 duration-500" }, /* @__PURE__ */ React41.createElement("h2", { className: "text-lg font-serif text-black tracking-tight mb-2" }, "Terms and Conditions of Application"), /* @__PURE__ */ React41.createElement("div", { className: "text-xs text-neutral-500 mb-4" }, /* @__PURE__ */ React41.createElement("p", { className: " mb-3" }, "Declaration and Consent"), /* @__PURE__ */ React41.createElement("p", { className: "mb-3 leading-relaxed" }, "By proceeding with this application, you acknowledge and agree that all data, documents, and identification materials provided herein will be securely transmitted to the relevant official registries and authorized agents for the purpose of ", type === "company" ? "company" : "business", " incorporation and compliance verification."), /* @__PURE__ */ React41.createElement("p", { className: "mb-3 leading-relaxed" }, "You confirm that all information provided is accurate and authentic. Any falsification of identity or corporate data may result in immediate rejection, and you may be held liable under applicable laws and regulations."), /* @__PURE__ */ React41.createElement("p", { className: "mb-3 leading-relaxed" }, "This service operates strictly as a digital intermediary connecting you with official registries. The final approval of the ", type === "company" ? "company" : "business", " name and registration rests solely with the regulatory authorities. We are not liable for rejections arising from pre existing conflicts, non compliance, or regulatory policy changes not flagged during the AI pre check stages."), /* @__PURE__ */ React41.createElement("p", { className: "leading-relaxed" }, "Proceeding to generate the invoice confirms your acceptance of these terms and initiates the formal filing process.")), /* @__PURE__ */ React41.createElement("label", { className: "flex items-start gap-3 mt-2 cursor-pointer group" }, /* @__PURE__ */ React41.createElement("input", { type: "checkbox", checked: iAgree, onChange: (e) => setIAgree(e.target.checked), disabled: isReadOnly, className: "mt-0.5 w-4 h-4 accent-black rounded cursor-pointer" }), /* @__PURE__ */ React41.createElement("span", { className: "text-[13px] text-red-500 group-hover:text-red-600 transition-colors" }, "I have read, understood, and agree to the terms of data transfer and processing.")), /* @__PURE__ */ React41.createElement("div", { className: "flex flex-col sm:flex-row items-center gap-4 mt-8 w-full justify-end pt-6" }, /* @__PURE__ */ React41.createElement("button", { onClick: onCancelOrClose, disabled: isSubmitting, className: "px-8 py-2 text-[11px] tracking-widest text-neutral-500 hover:text-black hover:bg-neutral-50 rounded-full transition-colors outline-none w-full sm:w-auto" }, "Cancel"), /* @__PURE__ */ React41.createElement("button", { onClick: () => setMacroStep(0), disabled: isSubmitting || isReadOnly, className: "px-8 py-2 text-[11px] tracking-widest text-neutral-500 hover:text-black hover:bg-neutral-50 rounded-full transition-colors outline-none w-full sm:w-auto" }, "Edit Application"), /* @__PURE__ */ React41.createElement(ThreeDActionButton, { onClick: handleFinalSubmit, disabled: isSubmitting || !iAgree || isReadOnly, isLoading: isSubmitting, className: "min-w-40 w-full sm:w-auto" }, "Submit")))), activeModal.isOpen && /* @__PURE__ */ React41.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React41.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setActiveModal({ isOpen: false, type: null, memberIndex: null }) }), /* @__PURE__ */ React41.createElement("div", { className: "relative w-80 bg-white shadow-2xl rounded-3xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200 max-h-[80vh]" }, /* @__PURE__ */ React41.createElement("div", { className: "p-4 text-center w-full shrink-0" }, /* @__PURE__ */ React41.createElement("h3", { className: "text-[14px] text-black tracking-tight capitalize" }, "Select ", activeModal.type)), /* @__PURE__ */ React41.createElement("div", { className: "p-4 flex flex-col gap-2 overflow-y-auto custom-scrollbar" }, (activeModal.type === "state" ? NIGERIAN_STATES : activeModal.type === "role" ? MEMBER_ROLES : NATIONALITIES).map((opt) => {
|
|
3513
3588
|
const isSelected = activeModal.isGlobalState ? formData.state === opt : formData.members[activeModal.memberIndex][activeModal.type] === opt;
|
|
3514
3589
|
return /* @__PURE__ */ React41.createElement("button", { key: opt, onClick: () => {
|
|
@@ -3523,6 +3598,7 @@ export {
|
|
|
3523
3598
|
AiApproveDecline,
|
|
3524
3599
|
AiStageCheck,
|
|
3525
3600
|
AppBento2,
|
|
3601
|
+
Banner,
|
|
3526
3602
|
Faq,
|
|
3527
3603
|
FeatureScroll,
|
|
3528
3604
|
Footer,
|
|
@@ -3551,7 +3627,6 @@ export {
|
|
|
3551
3627
|
UniversalDashboardPage,
|
|
3552
3628
|
UniversalDirectoryPage,
|
|
3553
3629
|
UniversalErrorView,
|
|
3554
|
-
UniversalHeader,
|
|
3555
3630
|
UniversalIdentityPage,
|
|
3556
3631
|
UniversalLookupPage,
|
|
3557
3632
|
UniversalMembersPage,
|