@retinalabsllc/zairusjs 5.1.1 → 5.1.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.js +18 -18
- package/dist/index.mjs +20 -19
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2151,10 +2151,10 @@ var UniversalSidebar = ({
|
|
|
2151
2151
|
"aria-label": "Open Menu"
|
|
2152
2152
|
},
|
|
2153
2153
|
/* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons9.SidebarLeft01Icon, size: 18 })
|
|
2154
|
-
), /* @__PURE__ */ import_react39.default.createElement(HeaderActions, null)), /* @__PURE__ */ import_react39.default.createElement("div", { className: "hidden md:flex fixed top-0 right-0 w-full justify-end px-8 pt-6 pb-4 bg-neutral-100 z-40 pointer-events-none" }, /* @__PURE__ */ import_react39.default.createElement(HeaderActions, null)), /* @__PURE__ */ import_react39.default.createElement(
|
|
2154
|
+
), /* @__PURE__ */ import_react39.default.createElement(HeaderActions, null)), /* @__PURE__ */ import_react39.default.createElement("div", { className: "hidden md:flex fixed top-0 right-0 w-full backdrop-blur-sm justify-end px-8 pt-6 pb-4 bg-neutral-100/50 z-40 pointer-events-none" }, /* @__PURE__ */ import_react39.default.createElement(HeaderActions, null)), /* @__PURE__ */ import_react39.default.createElement(
|
|
2155
2155
|
"div",
|
|
2156
2156
|
{
|
|
2157
|
-
className: `fixed inset-0 bg-black/30 shadow-2xl
|
|
2157
|
+
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"}`,
|
|
2158
2158
|
onClick: closeMobile
|
|
2159
2159
|
}
|
|
2160
2160
|
), /* @__PURE__ */ import_react39.default.createElement(
|
|
@@ -2167,7 +2167,7 @@ var UniversalSidebar = ({
|
|
|
2167
2167
|
${isCollapsed ? "md:w-16 w-64" : "w-64"}
|
|
2168
2168
|
`
|
|
2169
2169
|
},
|
|
2170
|
-
/* @__PURE__ */ import_react39.default.createElement("div", { className: `flex items-center shrink-0 p-5 ${isCollapsed && !isMobileOpen ? "justify-center min-h-18" : "justify-between"}` }, /* @__PURE__ */ import_react39.default.createElement("div", { className: `flex items-center gap-3 text-left ${!isCollapsed || isMobileOpen ? "w-full" : ""}` }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-9 h-9 bg-[#1f26d6] rounded-full flex items-center justify-center shrink-0" }, /* @__PURE__ */ import_react39.default.createElement("h3", { className: "text-[10px] text-white
|
|
2170
|
+
/* @__PURE__ */ import_react39.default.createElement("div", { className: `flex items-center shrink-0 p-5 ${isCollapsed && !isMobileOpen ? "justify-center min-h-18" : "justify-between"}` }, /* @__PURE__ */ import_react39.default.createElement("div", { className: `flex items-center gap-3 text-left ${!isCollapsed || isMobileOpen ? "w-full" : ""}` }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-9 h-9 bg-[#1f26d6] rounded-full flex items-center justify-center shrink-0" }, /* @__PURE__ */ import_react39.default.createElement("h3", { className: "text-[10px] text-white tracking-wider" }, userInitials.substring(0, 2))), (!isCollapsed || isMobileOpen) && /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex flex-col justify-center min-w-0 pr-2 flex-1" }, /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[13px] text-black leading-none truncate tracking-wide mb-1" }, userName), userTag && /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[9px] text-[#1f26d6] truncate tracking-[0.2em] leading-none " }, userTag))), /* @__PURE__ */ import_react39.default.createElement("div", { className: "md:hidden flex shrink-0" }, /* @__PURE__ */ import_react39.default.createElement(
|
|
2171
2171
|
"button",
|
|
2172
2172
|
{
|
|
2173
2173
|
onClick: closeMobile,
|
|
@@ -2216,7 +2216,7 @@ var UniversalSidebar = ({
|
|
|
2216
2216
|
/* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons9.SidebarLeft01Icon, size: 18, className: "shrink-0 text-neutral-400" }),
|
|
2217
2217
|
!isCollapsed && /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-xs " }, "Collapse")
|
|
2218
2218
|
)))
|
|
2219
|
-
), showNotifDialog && /* @__PURE__ */ import_react39.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ import_react39.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 h-125-h-[80vh]" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, selectedNotif ? /* @__PURE__ */ import_react39.default.createElement("button", { onClick: () => setSelectedNotif(null), className: "text-neutral-400 hover:text-black transition-colors outline-none flex items-center gap-2 text-[11px] tracking-widest
|
|
2219
|
+
), showNotifDialog && /* @__PURE__ */ import_react39.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ import_react39.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 h-125-h-[80vh]" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, selectedNotif ? /* @__PURE__ */ import_react39.default.createElement("button", { onClick: () => setSelectedNotif(null), className: "text-neutral-400 hover:text-black transition-colors outline-none flex items-center gap-2 text-[11px] tracking-widest " }, /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons9.ArrowLeft01Icon, size: 14 }), " Back") : /* @__PURE__ */ import_react39.default.createElement("h3", { className: "text-[15px] text-black tracking-tight " }, "Notifications"), /* @__PURE__ */ import_react39.default.createElement("button", { onClick: () => setShowNotifDialog(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons9.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2" }, selectedNotif ? /* @__PURE__ */ import_react39.default.createElement("div", { className: "p-4 text-left" }, /* @__PURE__ */ import_react39.default.createElement("h4", { className: "text-[14px] text-black mb-1" }, selectedNotif.title), /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest mb-4 block" }, formatNotifDate(selectedNotif.createdAt)), /* @__PURE__ */ import_react39.default.createElement("p", { className: "text-[12px] text-neutral-600 leading-relaxed whitespace-pre-wrap" }, selectedNotif.message)) : /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex flex-col divide-y divide-neutral-50/50" }, notifications?.length === 0 ? /* @__PURE__ */ import_react39.default.createElement("div", { className: "p-8 text-center text-xs text-neutral-400" }, "You have no notifications.") : notifications?.map((notif) => /* @__PURE__ */ import_react39.default.createElement(
|
|
2220
2220
|
"div",
|
|
2221
2221
|
{
|
|
2222
2222
|
key: notif.id,
|
|
@@ -2227,8 +2227,8 @@ var UniversalSidebar = ({
|
|
|
2227
2227
|
className: "p-3 flex items-start gap-3 hover:bg-neutral-50 rounded-xl cursor-pointer transition-colors"
|
|
2228
2228
|
},
|
|
2229
2229
|
/* @__PURE__ */ import_react39.default.createElement("div", { className: "mt-1.5 shrink-0" }, !notif.isRead ? /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-1.5 h-1.5 bg-blue-500 rounded-full" }) : /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-1.5 h-1.5 bg-transparent" })),
|
|
2230
|
-
/* @__PURE__ */ import_react39.default.createElement("div", { className: "flex-1 min-w-0 text-left" }, /* @__PURE__ */ import_react39.default.createElement("h5", { className: `text-[12px] truncate ${notif.isRead ? "text-neutral-500 " : "text-black "}` }, notif.title), /* @__PURE__ */ import_react39.default.createElement("p", { className: "text-[11px] text-neutral-400 truncate mt-0.5" }, notif.message), /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[9px] text-neutral-400 tracking-widest
|
|
2231
|
-
)))), !selectedNotif && /* @__PURE__ */ import_react39.default.createElement("div", { className: "p-4 flex items-center justify-between shrink-0
|
|
2230
|
+
/* @__PURE__ */ import_react39.default.createElement("div", { className: "flex-1 min-w-0 text-left" }, /* @__PURE__ */ import_react39.default.createElement("h5", { className: `text-[12px] truncate ${notif.isRead ? "text-neutral-500 " : "text-black "}` }, notif.title), /* @__PURE__ */ import_react39.default.createElement("p", { className: "text-[11px] text-neutral-400 truncate mt-0.5" }, notif.message), /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[9px] text-neutral-400 tracking-widest mt-2 block" }, formatNotifDate(notif.createdAt)))
|
|
2231
|
+
)))), !selectedNotif && /* @__PURE__ */ import_react39.default.createElement("div", { className: "p-4 flex items-center justify-between shrink-0" }, /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest " }, "Page ", notificationPage, " of ", notificationTotalPages === 0 ? 1 : notificationTotalPages), /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ import_react39.default.createElement(
|
|
2232
2232
|
"button",
|
|
2233
2233
|
{
|
|
2234
2234
|
disabled: notificationPage <= 1,
|
|
@@ -3992,24 +3992,24 @@ var UniversalTransactionPage = ({
|
|
|
3992
3992
|
placeholder: "Search reference or amount...",
|
|
3993
3993
|
value: localSearchQuery,
|
|
3994
3994
|
onChange: (e) => setLocalSearchQuery(e.target.value),
|
|
3995
|
-
className: "w-full pl-10 pr-4 py-
|
|
3995
|
+
className: "w-full pl-10 pr-4 py-2 bg-white rounded-full text-[13px] text-black outline-none transition-colors "
|
|
3996
3996
|
}
|
|
3997
3997
|
)), /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex items-center gap-3 w-full sm:w-auto overflow-x-auto pb-1 sm:pb-0" }, /* @__PURE__ */ import_react72.default.createElement(
|
|
3998
3998
|
"button",
|
|
3999
3999
|
{
|
|
4000
4000
|
onClick: () => setIsDirectionModalOpen(true),
|
|
4001
|
-
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-
|
|
4001
|
+
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-2 rounded-full text-[12px] text-neutral-600 hover:text-black hover:bg-neutral-50 transition-colors outline-none "
|
|
4002
4002
|
},
|
|
4003
|
-
/* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.
|
|
4004
|
-
activeDirectionFilter === "ALL" ? "
|
|
4003
|
+
/* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.SearchList02Icon, size: 12 }),
|
|
4004
|
+
activeDirectionFilter === "ALL" ? "Payment Type" : activeDirectionFilter
|
|
4005
4005
|
), /* @__PURE__ */ import_react72.default.createElement(
|
|
4006
4006
|
"button",
|
|
4007
4007
|
{
|
|
4008
4008
|
onClick: () => setIsTypeModalOpen(true),
|
|
4009
|
-
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-
|
|
4009
|
+
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-2 rounded-full text-[12px] text-neutral-600 hover:text-black hover:bg-neutral-50 transition-colors outline-none "
|
|
4010
4010
|
},
|
|
4011
|
-
/* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.
|
|
4012
|
-
activeTypeFilter === "ALL" ? "
|
|
4011
|
+
/* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.ListSettingIcon, size: 14 }),
|
|
4012
|
+
activeTypeFilter === "ALL" ? "All Transactions" : activeTypeFilter.replace("_", " ")
|
|
4013
4013
|
))), /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, currentView === "list" ? /* @__PURE__ */ import_react72.default.createElement("div", null, /* @__PURE__ */ import_react72.default.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight " }, headerTitle), /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-xs text-neutral-500 " }, headerDescription)) : /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ import_react72.default.createElement("button", { onClick: goBack, className: "text-[11px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none " }, /* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.ArrowLeft01Icon, size: 12 }), " Back to Ledger"), /* @__PURE__ */ import_react72.default.createElement("h1", { className: "text-lg text-black tracking-tight " }, "Transaction Details"))), currentView === "list" && /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full overflow-hidden" }, isListLoading ? /* @__PURE__ */ import_react72.default.createElement(PageSpinner6, null) : /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "divide-y divide-neutral-100" }, transactions.length === 0 ? /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-xs text-neutral-500 py-6 text-center " }, "No transactions found") : transactions.map((tx) => /* @__PURE__ */ import_react72.default.createElement(
|
|
4014
4014
|
"div",
|
|
4015
4015
|
{
|
|
@@ -4022,7 +4022,7 @@ var UniversalTransactionPage = ({
|
|
|
4022
4022
|
},
|
|
4023
4023
|
/* @__PURE__ */ import_react72.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center ${tx.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: tx.direction === "CREDIT" ? import_core_free_icons25.ArrowDown01Icon : import_core_free_icons25.ArrowUp01Icon, size: 18 })), /* @__PURE__ */ import_react72.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-[13px] text-black truncate " }, getDisplayName(tx)), /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-[13px] text-neutral-500 truncate " }, tx.direction === "CREDIT" ? "+" : "-", tx.amount, " ", tx.currency))),
|
|
4024
4024
|
/* @__PURE__ */ import_react72.default.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] text-neutral-500 " }, formatDate3(tx.createdAt)), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] text-neutral-400 capitalize " }, tx.direction.toLowerCase()))
|
|
4025
|
-
))), /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]
|
|
4025
|
+
))), /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] " }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react72.default.createElement(
|
|
4026
4026
|
"button",
|
|
4027
4027
|
{
|
|
4028
4028
|
onClick: () => onPageChange(currentPage - 1),
|
|
@@ -4038,7 +4038,7 @@ var UniversalTransactionPage = ({
|
|
|
4038
4038
|
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"
|
|
4039
4039
|
},
|
|
4040
4040
|
/* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.ArrowRight01Icon, size: 14 })
|
|
4041
|
-
))))), currentView === "details" && selectedTransaction && /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full text-left " }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col items-center justify-center py-10 border-b border-neutral-100 mb-8" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: `w-14 h-14 rounded-full flex items-center justify-center mb-4 ${selectedTransaction.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: selectedTransaction.direction === "CREDIT" ? import_core_free_icons25.ArrowDown01Icon : import_core_free_icons25.ArrowUp01Icon, size: 24 })), /* @__PURE__ */ import_react72.default.createElement("h2", { className: "text-3xl text-black mb-2" }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-500
|
|
4041
|
+
))))), currentView === "details" && selectedTransaction && /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full text-left " }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col items-center justify-center py-10 border-b border-neutral-100 mb-8" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: `w-14 h-14 rounded-full flex items-center justify-center mb-4 ${selectedTransaction.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: selectedTransaction.direction === "CREDIT" ? import_core_free_icons25.ArrowDown01Icon : import_core_free_icons25.ArrowUp01Icon, size: 24 })), /* @__PURE__ */ import_react72.default.createElement("h2", { className: "text-3xl text-black mb-2" }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-500 px-4 py-1.5 rounded-full bg-neutral-50 " }, selectedTransaction.status)), /* @__PURE__ */ import_react72.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-y-8 gap-x-4" }, /* @__PURE__ */ import_react72.default.createElement("div", null, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 " }, "Reference ID"), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[13px] text-black break-all " }, selectedTransaction.reference)), /* @__PURE__ */ import_react72.default.createElement("div", null, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 " }, "Date & Time"), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[13px] text-black " }, formatDate3(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ import_react72.default.createElement("div", null, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 " }, "Transaction Type"), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[13px] text-black capitalize " }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ import_react72.default.createElement("div", null, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 " }, "Flow Direction"), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[13px] text-black capitalize " }, selectedTransaction.direction.toLowerCase()))))), isDirectionModalOpen && /* @__PURE__ */ import_react72.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsDirectionModalOpen(false) }), /* @__PURE__ */ import_react72.default.createElement("div", { ref: directionDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react72.default.createElement("h3", { className: "text-[14px] text-black tracking-tight " }, "Payment Type")), /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, ["ALL", "CREDIT", "DEBIT"].map((option) => /* @__PURE__ */ import_react72.default.createElement(
|
|
4042
4042
|
"button",
|
|
4043
4043
|
{
|
|
4044
4044
|
key: option,
|
|
@@ -4048,7 +4048,7 @@ var UniversalTransactionPage = ({
|
|
|
4048
4048
|
},
|
|
4049
4049
|
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeDirectionFilter === option ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
|
|
4050
4050
|
},
|
|
4051
|
-
/* @__PURE__ */ import_react72.default.createElement("span", { className: "truncate pr-2
|
|
4051
|
+
/* @__PURE__ */ import_react72.default.createElement("span", { className: "truncate pr-2" }, option.charAt(0).toUpperCase() + option.slice(1).toLowerCase())
|
|
4052
4052
|
))), /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ import_react72.default.createElement(
|
|
4053
4053
|
"button",
|
|
4054
4054
|
{
|
|
@@ -4056,7 +4056,7 @@ var UniversalTransactionPage = ({
|
|
|
4056
4056
|
className: "w-full py-3 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none "
|
|
4057
4057
|
},
|
|
4058
4058
|
"Cancel"
|
|
4059
|
-
)))), isTypeModalOpen && /* @__PURE__ */ import_react72.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ import_react72.default.createElement("div", { ref: typeDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react72.default.createElement("
|
|
4059
|
+
)))), isTypeModalOpen && /* @__PURE__ */ import_react72.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ import_react72.default.createElement("div", { ref: typeDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react72.default.createElement("h3", { className: "text-[14px] text-black tracking-tight " }, "Transactions Type")), /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, [
|
|
4060
4060
|
{ label: "All Transactions", value: "ALL" },
|
|
4061
4061
|
{ label: "Wallet Transactions", value: "WALLET_TRANSACTION" },
|
|
4062
4062
|
{ label: "Card Transactions", value: "CARD_TRANSACTION" }
|
|
@@ -4070,7 +4070,7 @@ var UniversalTransactionPage = ({
|
|
|
4070
4070
|
},
|
|
4071
4071
|
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeTypeFilter === option.value ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
|
|
4072
4072
|
},
|
|
4073
|
-
/* @__PURE__ */ import_react72.default.createElement("span", { className: "truncate pr-2" }, option.label)
|
|
4073
|
+
/* @__PURE__ */ import_react72.default.createElement("span", { className: "truncate pr-2" }, option.label.charAt(0).toUpperCase() + option.label.slice(1).toLowerCase())
|
|
4074
4074
|
))), /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ import_react72.default.createElement(
|
|
4075
4075
|
"button",
|
|
4076
4076
|
{
|
package/dist/index.mjs
CHANGED
|
@@ -2066,10 +2066,10 @@ var UniversalSidebar = ({
|
|
|
2066
2066
|
"aria-label": "Open Menu"
|
|
2067
2067
|
},
|
|
2068
2068
|
/* @__PURE__ */ React27.createElement(HugeiconsIcon13, { icon: SidebarLeft01Icon, size: 18 })
|
|
2069
|
-
), /* @__PURE__ */ React27.createElement(HeaderActions, null)), /* @__PURE__ */ React27.createElement("div", { className: "hidden md:flex fixed top-0 right-0 w-full justify-end px-8 pt-6 pb-4 bg-neutral-100 z-40 pointer-events-none" }, /* @__PURE__ */ React27.createElement(HeaderActions, null)), /* @__PURE__ */ React27.createElement(
|
|
2069
|
+
), /* @__PURE__ */ React27.createElement(HeaderActions, null)), /* @__PURE__ */ React27.createElement("div", { className: "hidden md:flex fixed top-0 right-0 w-full backdrop-blur-sm justify-end px-8 pt-6 pb-4 bg-neutral-100/50 z-40 pointer-events-none" }, /* @__PURE__ */ React27.createElement(HeaderActions, null)), /* @__PURE__ */ React27.createElement(
|
|
2070
2070
|
"div",
|
|
2071
2071
|
{
|
|
2072
|
-
className: `fixed inset-0 bg-black/30 shadow-2xl
|
|
2072
|
+
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"}`,
|
|
2073
2073
|
onClick: closeMobile
|
|
2074
2074
|
}
|
|
2075
2075
|
), /* @__PURE__ */ React27.createElement(
|
|
@@ -2082,7 +2082,7 @@ var UniversalSidebar = ({
|
|
|
2082
2082
|
${isCollapsed ? "md:w-16 w-64" : "w-64"}
|
|
2083
2083
|
`
|
|
2084
2084
|
},
|
|
2085
|
-
/* @__PURE__ */ React27.createElement("div", { className: `flex items-center shrink-0 p-5 ${isCollapsed && !isMobileOpen ? "justify-center min-h-18" : "justify-between"}` }, /* @__PURE__ */ React27.createElement("div", { className: `flex items-center gap-3 text-left ${!isCollapsed || isMobileOpen ? "w-full" : ""}` }, /* @__PURE__ */ React27.createElement("div", { className: "w-9 h-9 bg-[#1f26d6] rounded-full flex items-center justify-center shrink-0" }, /* @__PURE__ */ React27.createElement("h3", { className: "text-[10px] text-white
|
|
2085
|
+
/* @__PURE__ */ React27.createElement("div", { className: `flex items-center shrink-0 p-5 ${isCollapsed && !isMobileOpen ? "justify-center min-h-18" : "justify-between"}` }, /* @__PURE__ */ React27.createElement("div", { className: `flex items-center gap-3 text-left ${!isCollapsed || isMobileOpen ? "w-full" : ""}` }, /* @__PURE__ */ React27.createElement("div", { className: "w-9 h-9 bg-[#1f26d6] rounded-full flex items-center justify-center shrink-0" }, /* @__PURE__ */ React27.createElement("h3", { className: "text-[10px] text-white tracking-wider" }, userInitials.substring(0, 2))), (!isCollapsed || isMobileOpen) && /* @__PURE__ */ React27.createElement("div", { className: "flex flex-col justify-center min-w-0 pr-2 flex-1" }, /* @__PURE__ */ React27.createElement("span", { className: "text-[13px] text-black leading-none truncate tracking-wide mb-1" }, userName), userTag && /* @__PURE__ */ React27.createElement("span", { className: "text-[9px] text-[#1f26d6] truncate tracking-[0.2em] leading-none " }, userTag))), /* @__PURE__ */ React27.createElement("div", { className: "md:hidden flex shrink-0" }, /* @__PURE__ */ React27.createElement(
|
|
2086
2086
|
"button",
|
|
2087
2087
|
{
|
|
2088
2088
|
onClick: closeMobile,
|
|
@@ -2131,7 +2131,7 @@ var UniversalSidebar = ({
|
|
|
2131
2131
|
/* @__PURE__ */ React27.createElement(HugeiconsIcon13, { icon: SidebarLeft01Icon, size: 18, className: "shrink-0 text-neutral-400" }),
|
|
2132
2132
|
!isCollapsed && /* @__PURE__ */ React27.createElement("span", { className: "text-xs " }, "Collapse")
|
|
2133
2133
|
)))
|
|
2134
|
-
), showNotifDialog && /* @__PURE__ */ React27.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React27.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ React27.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 h-125-h-[80vh]" }, /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, selectedNotif ? /* @__PURE__ */ React27.createElement("button", { onClick: () => setSelectedNotif(null), className: "text-neutral-400 hover:text-black transition-colors outline-none flex items-center gap-2 text-[11px] tracking-widest
|
|
2134
|
+
), showNotifDialog && /* @__PURE__ */ React27.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React27.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ React27.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 h-125-h-[80vh]" }, /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, selectedNotif ? /* @__PURE__ */ React27.createElement("button", { onClick: () => setSelectedNotif(null), className: "text-neutral-400 hover:text-black transition-colors outline-none flex items-center gap-2 text-[11px] tracking-widest " }, /* @__PURE__ */ React27.createElement(HugeiconsIcon13, { icon: ArrowLeft01Icon2, size: 14 }), " Back") : /* @__PURE__ */ React27.createElement("h3", { className: "text-[15px] text-black tracking-tight " }, "Notifications"), /* @__PURE__ */ React27.createElement("button", { onClick: () => setShowNotifDialog(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React27.createElement(HugeiconsIcon13, { icon: CancelCircleIcon, size: 18 }))), /* @__PURE__ */ React27.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2" }, selectedNotif ? /* @__PURE__ */ React27.createElement("div", { className: "p-4 text-left" }, /* @__PURE__ */ React27.createElement("h4", { className: "text-[14px] text-black mb-1" }, selectedNotif.title), /* @__PURE__ */ React27.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest mb-4 block" }, formatNotifDate(selectedNotif.createdAt)), /* @__PURE__ */ React27.createElement("p", { className: "text-[12px] text-neutral-600 leading-relaxed whitespace-pre-wrap" }, selectedNotif.message)) : /* @__PURE__ */ React27.createElement("div", { className: "flex flex-col divide-y divide-neutral-50/50" }, notifications?.length === 0 ? /* @__PURE__ */ React27.createElement("div", { className: "p-8 text-center text-xs text-neutral-400" }, "You have no notifications.") : notifications?.map((notif) => /* @__PURE__ */ React27.createElement(
|
|
2135
2135
|
"div",
|
|
2136
2136
|
{
|
|
2137
2137
|
key: notif.id,
|
|
@@ -2142,8 +2142,8 @@ var UniversalSidebar = ({
|
|
|
2142
2142
|
className: "p-3 flex items-start gap-3 hover:bg-neutral-50 rounded-xl cursor-pointer transition-colors"
|
|
2143
2143
|
},
|
|
2144
2144
|
/* @__PURE__ */ React27.createElement("div", { className: "mt-1.5 shrink-0" }, !notif.isRead ? /* @__PURE__ */ React27.createElement("div", { className: "w-1.5 h-1.5 bg-blue-500 rounded-full" }) : /* @__PURE__ */ React27.createElement("div", { className: "w-1.5 h-1.5 bg-transparent" })),
|
|
2145
|
-
/* @__PURE__ */ React27.createElement("div", { className: "flex-1 min-w-0 text-left" }, /* @__PURE__ */ React27.createElement("h5", { className: `text-[12px] truncate ${notif.isRead ? "text-neutral-500 " : "text-black "}` }, notif.title), /* @__PURE__ */ React27.createElement("p", { className: "text-[11px] text-neutral-400 truncate mt-0.5" }, notif.message), /* @__PURE__ */ React27.createElement("span", { className: "text-[9px] text-neutral-400 tracking-widest
|
|
2146
|
-
)))), !selectedNotif && /* @__PURE__ */ React27.createElement("div", { className: "p-4 flex items-center justify-between shrink-0
|
|
2145
|
+
/* @__PURE__ */ React27.createElement("div", { className: "flex-1 min-w-0 text-left" }, /* @__PURE__ */ React27.createElement("h5", { className: `text-[12px] truncate ${notif.isRead ? "text-neutral-500 " : "text-black "}` }, notif.title), /* @__PURE__ */ React27.createElement("p", { className: "text-[11px] text-neutral-400 truncate mt-0.5" }, notif.message), /* @__PURE__ */ React27.createElement("span", { className: "text-[9px] text-neutral-400 tracking-widest mt-2 block" }, formatNotifDate(notif.createdAt)))
|
|
2146
|
+
)))), !selectedNotif && /* @__PURE__ */ React27.createElement("div", { className: "p-4 flex items-center justify-between shrink-0" }, /* @__PURE__ */ React27.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest " }, "Page ", notificationPage, " of ", notificationTotalPages === 0 ? 1 : notificationTotalPages), /* @__PURE__ */ React27.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React27.createElement(
|
|
2147
2147
|
"button",
|
|
2148
2148
|
{
|
|
2149
2149
|
disabled: notificationPage <= 1,
|
|
@@ -3908,7 +3908,8 @@ import {
|
|
|
3908
3908
|
ArrowDown01Icon as ArrowDown01Icon5,
|
|
3909
3909
|
ArrowUp01Icon,
|
|
3910
3910
|
Search01Icon as Search01Icon2,
|
|
3911
|
-
|
|
3911
|
+
SearchList02Icon,
|
|
3912
|
+
ListSettingIcon
|
|
3912
3913
|
} from "@hugeicons/core-free-icons";
|
|
3913
3914
|
var PageSpinner6 = () => /* @__PURE__ */ React44.createElement("div", { className: "flex justify-center items-center py-12" }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: Loading03Icon15, size: 32, className: "animate-spin mb-4 text-black" }));
|
|
3914
3915
|
var formatDate3 = (dateInput) => {
|
|
@@ -3986,24 +3987,24 @@ var UniversalTransactionPage = ({
|
|
|
3986
3987
|
placeholder: "Search reference or amount...",
|
|
3987
3988
|
value: localSearchQuery,
|
|
3988
3989
|
onChange: (e) => setLocalSearchQuery(e.target.value),
|
|
3989
|
-
className: "w-full pl-10 pr-4 py-
|
|
3990
|
+
className: "w-full pl-10 pr-4 py-2 bg-white rounded-full text-[13px] text-black outline-none transition-colors "
|
|
3990
3991
|
}
|
|
3991
3992
|
)), /* @__PURE__ */ React44.createElement("div", { className: "flex items-center gap-3 w-full sm:w-auto overflow-x-auto pb-1 sm:pb-0" }, /* @__PURE__ */ React44.createElement(
|
|
3992
3993
|
"button",
|
|
3993
3994
|
{
|
|
3994
3995
|
onClick: () => setIsDirectionModalOpen(true),
|
|
3995
|
-
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-
|
|
3996
|
+
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-2 rounded-full text-[12px] text-neutral-600 hover:text-black hover:bg-neutral-50 transition-colors outline-none "
|
|
3996
3997
|
},
|
|
3997
|
-
/* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon:
|
|
3998
|
-
activeDirectionFilter === "ALL" ? "
|
|
3998
|
+
/* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: SearchList02Icon, size: 12 }),
|
|
3999
|
+
activeDirectionFilter === "ALL" ? "Payment Type" : activeDirectionFilter
|
|
3999
4000
|
), /* @__PURE__ */ React44.createElement(
|
|
4000
4001
|
"button",
|
|
4001
4002
|
{
|
|
4002
4003
|
onClick: () => setIsTypeModalOpen(true),
|
|
4003
|
-
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-
|
|
4004
|
+
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-2 rounded-full text-[12px] text-neutral-600 hover:text-black hover:bg-neutral-50 transition-colors outline-none "
|
|
4004
4005
|
},
|
|
4005
|
-
/* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon:
|
|
4006
|
-
activeTypeFilter === "ALL" ? "
|
|
4006
|
+
/* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: ListSettingIcon, size: 14 }),
|
|
4007
|
+
activeTypeFilter === "ALL" ? "All Transactions" : activeTypeFilter.replace("_", " ")
|
|
4007
4008
|
))), /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, currentView === "list" ? /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight " }, headerTitle), /* @__PURE__ */ React44.createElement("p", { className: "text-xs text-neutral-500 " }, headerDescription)) : /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ React44.createElement("button", { onClick: goBack, className: "text-[11px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none " }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: ArrowLeft01Icon10, size: 12 }), " Back to Ledger"), /* @__PURE__ */ React44.createElement("h1", { className: "text-lg text-black tracking-tight " }, "Transaction Details"))), currentView === "list" && /* @__PURE__ */ React44.createElement("div", { className: "w-full overflow-hidden" }, isListLoading ? /* @__PURE__ */ React44.createElement(PageSpinner6, null) : /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React44.createElement("div", { className: "divide-y divide-neutral-100" }, transactions.length === 0 ? /* @__PURE__ */ React44.createElement("p", { className: "text-xs text-neutral-500 py-6 text-center " }, "No transactions found") : transactions.map((tx) => /* @__PURE__ */ React44.createElement(
|
|
4008
4009
|
"div",
|
|
4009
4010
|
{
|
|
@@ -4016,7 +4017,7 @@ var UniversalTransactionPage = ({
|
|
|
4016
4017
|
},
|
|
4017
4018
|
/* @__PURE__ */ React44.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React44.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center ${tx.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: tx.direction === "CREDIT" ? ArrowDown01Icon5 : ArrowUp01Icon, size: 18 })), /* @__PURE__ */ React44.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React44.createElement("p", { className: "text-[13px] text-black truncate " }, getDisplayName(tx)), /* @__PURE__ */ React44.createElement("p", { className: "text-[13px] text-neutral-500 truncate " }, tx.direction === "CREDIT" ? "+" : "-", tx.amount, " ", tx.currency))),
|
|
4018
4019
|
/* @__PURE__ */ React44.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] text-neutral-500 " }, formatDate3(tx.createdAt)), /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] text-neutral-400 capitalize " }, tx.direction.toLowerCase()))
|
|
4019
|
-
))), /* @__PURE__ */ React44.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]
|
|
4020
|
+
))), /* @__PURE__ */ React44.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] " }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ React44.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React44.createElement(
|
|
4020
4021
|
"button",
|
|
4021
4022
|
{
|
|
4022
4023
|
onClick: () => onPageChange(currentPage - 1),
|
|
@@ -4032,7 +4033,7 @@ var UniversalTransactionPage = ({
|
|
|
4032
4033
|
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"
|
|
4033
4034
|
},
|
|
4034
4035
|
/* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: ArrowRight01Icon10, size: 14 })
|
|
4035
|
-
))))), currentView === "details" && selectedTransaction && /* @__PURE__ */ React44.createElement("div", { className: "w-full text-left " }, /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col items-center justify-center py-10 border-b border-neutral-100 mb-8" }, /* @__PURE__ */ React44.createElement("div", { className: `w-14 h-14 rounded-full flex items-center justify-center mb-4 ${selectedTransaction.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: selectedTransaction.direction === "CREDIT" ? ArrowDown01Icon5 : ArrowUp01Icon, size: 24 })), /* @__PURE__ */ React44.createElement("h2", { className: "text-3xl text-black mb-2" }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-widest text-neutral-500
|
|
4036
|
+
))))), currentView === "details" && selectedTransaction && /* @__PURE__ */ React44.createElement("div", { className: "w-full text-left " }, /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col items-center justify-center py-10 border-b border-neutral-100 mb-8" }, /* @__PURE__ */ React44.createElement("div", { className: `w-14 h-14 rounded-full flex items-center justify-center mb-4 ${selectedTransaction.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: selectedTransaction.direction === "CREDIT" ? ArrowDown01Icon5 : ArrowUp01Icon, size: 24 })), /* @__PURE__ */ React44.createElement("h2", { className: "text-3xl text-black mb-2" }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-widest text-neutral-500 px-4 py-1.5 rounded-full bg-neutral-50 " }, selectedTransaction.status)), /* @__PURE__ */ React44.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-y-8 gap-x-4" }, /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 " }, "Reference ID"), /* @__PURE__ */ React44.createElement("span", { className: "text-[13px] text-black break-all " }, selectedTransaction.reference)), /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 " }, "Date & Time"), /* @__PURE__ */ React44.createElement("span", { className: "text-[13px] text-black " }, formatDate3(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 " }, "Transaction Type"), /* @__PURE__ */ React44.createElement("span", { className: "text-[13px] text-black capitalize " }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 " }, "Flow Direction"), /* @__PURE__ */ React44.createElement("span", { className: "text-[13px] text-black capitalize " }, selectedTransaction.direction.toLowerCase()))))), isDirectionModalOpen && /* @__PURE__ */ React44.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React44.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsDirectionModalOpen(false) }), /* @__PURE__ */ React44.createElement("div", { ref: directionDropdownRef, 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__ */ React44.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React44.createElement("h3", { className: "text-[14px] text-black tracking-tight " }, "Payment Type")), /* @__PURE__ */ React44.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, ["ALL", "CREDIT", "DEBIT"].map((option) => /* @__PURE__ */ React44.createElement(
|
|
4036
4037
|
"button",
|
|
4037
4038
|
{
|
|
4038
4039
|
key: option,
|
|
@@ -4042,7 +4043,7 @@ var UniversalTransactionPage = ({
|
|
|
4042
4043
|
},
|
|
4043
4044
|
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeDirectionFilter === option ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
|
|
4044
4045
|
},
|
|
4045
|
-
/* @__PURE__ */ React44.createElement("span", { className: "truncate pr-2
|
|
4046
|
+
/* @__PURE__ */ React44.createElement("span", { className: "truncate pr-2" }, option.charAt(0).toUpperCase() + option.slice(1).toLowerCase())
|
|
4046
4047
|
))), /* @__PURE__ */ React44.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React44.createElement(
|
|
4047
4048
|
"button",
|
|
4048
4049
|
{
|
|
@@ -4050,7 +4051,7 @@ var UniversalTransactionPage = ({
|
|
|
4050
4051
|
className: "w-full py-3 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none "
|
|
4051
4052
|
},
|
|
4052
4053
|
"Cancel"
|
|
4053
|
-
)))), isTypeModalOpen && /* @__PURE__ */ React44.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React44.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ React44.createElement("div", { ref: typeDropdownRef, 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__ */ React44.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React44.createElement("
|
|
4054
|
+
)))), isTypeModalOpen && /* @__PURE__ */ React44.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React44.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ React44.createElement("div", { ref: typeDropdownRef, 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__ */ React44.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React44.createElement("h3", { className: "text-[14px] text-black tracking-tight " }, "Transactions Type")), /* @__PURE__ */ React44.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, [
|
|
4054
4055
|
{ label: "All Transactions", value: "ALL" },
|
|
4055
4056
|
{ label: "Wallet Transactions", value: "WALLET_TRANSACTION" },
|
|
4056
4057
|
{ label: "Card Transactions", value: "CARD_TRANSACTION" }
|
|
@@ -4064,7 +4065,7 @@ var UniversalTransactionPage = ({
|
|
|
4064
4065
|
},
|
|
4065
4066
|
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeTypeFilter === option.value ? "bg-neutral-100 text-black" : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
|
|
4066
4067
|
},
|
|
4067
|
-
/* @__PURE__ */ React44.createElement("span", { className: "truncate pr-2" }, option.label)
|
|
4068
|
+
/* @__PURE__ */ React44.createElement("span", { className: "truncate pr-2" }, option.label.charAt(0).toUpperCase() + option.label.slice(1).toLowerCase())
|
|
4068
4069
|
))), /* @__PURE__ */ React44.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React44.createElement(
|
|
4069
4070
|
"button",
|
|
4070
4071
|
{
|