@retinalabsllc/zairusjs 4.0.14 → 4.0.16
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 +8 -4
- package/dist/index.mjs +8 -4
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1723,7 +1723,7 @@ var import_react37 = require("@hugeicons/react");
|
|
|
1723
1723
|
var import_core_free_icons8 = require("@hugeicons/core-free-icons");
|
|
1724
1724
|
var ButtonSpinner = () => /* @__PURE__ */ import_react36.default.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__ */ import_react36.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react36.default.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" }));
|
|
1725
1725
|
var ECOSYSTEM_APPS = [
|
|
1726
|
-
{ id: "desktop", name: "Retina", description: "Ai Document Editor", iconSrc: "https://retinalabs.company/assets/images/
|
|
1726
|
+
{ id: "desktop", name: "Retina", description: "Ai Document Editor", iconSrc: "https://retinalabs.company/assets/images/retina.avif", url: "https://app.retinaapps.com/" },
|
|
1727
1727
|
{ id: "audditur", name: "Audditur", description: "AI Legal & Compliance", iconSrc: "https://retinalabs.company/assets/images/audditur.avif", url: "https://app.audditur.com/" }
|
|
1728
1728
|
];
|
|
1729
1729
|
var UniversalSidebar = ({
|
|
@@ -1819,7 +1819,7 @@ var UniversalSidebar = ({
|
|
|
1819
1819
|
{
|
|
1820
1820
|
src: currentAppConfig.iconSrc,
|
|
1821
1821
|
alt: currentAppConfig.name,
|
|
1822
|
-
className: "w-
|
|
1822
|
+
className: "w-7 h-7 rounded-md object-contain shrink-0"
|
|
1823
1823
|
}
|
|
1824
1824
|
) : /* @__PURE__ */ import_react36.default.createElement("div", { className: " rounded-md shrink-0 flex items-center justify-center" }), (!isCollapsed || isMobileOpen) && /* @__PURE__ */ import_react36.default.createElement("div", { className: "flex flex-col justify-center min-w-0 pr-2 flex-1" }, /* @__PURE__ */ import_react36.default.createElement("span", { className: "text-[13px] text-black leading-none truncate tracking-wide mb-1" }, title), subtitle && /* @__PURE__ */ import_react36.default.createElement("span", { className: "text-[9px] text-neutral-500 truncate tracking-[0.2em] leading-none " }, subtitle))), /* @__PURE__ */ import_react36.default.createElement("div", { className: "md:hidden flex shrink-0" }, /* @__PURE__ */ import_react36.default.createElement(
|
|
1825
1825
|
"button",
|
|
@@ -2605,6 +2605,10 @@ var formatDate = (dateString) => {
|
|
|
2605
2605
|
var formatUsd = (amount) => {
|
|
2606
2606
|
return `$${(amount || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
2607
2607
|
};
|
|
2608
|
+
var capitalizeWords = (input) => {
|
|
2609
|
+
if (!input) return "";
|
|
2610
|
+
return input.toLowerCase().split(" ").map((part) => part.length ? part[0].toUpperCase() + part.slice(1) : part).join(" ");
|
|
2611
|
+
};
|
|
2608
2612
|
var UniversalBillingPage = ({
|
|
2609
2613
|
headerTitle,
|
|
2610
2614
|
headerDescription,
|
|
@@ -2683,10 +2687,10 @@ var UniversalBillingPage = ({
|
|
|
2683
2687
|
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"
|
|
2684
2688
|
},
|
|
2685
2689
|
timeframe === "ALL" ? "All Time" : timeframe === "24H" ? "Past 24 Hours" : timeframe === "7D" ? "Past 7 Days" : "Past 30 Days"
|
|
2686
|
-
))) : /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ import_react46.default.createElement("button", { onClick: () => setCurrentView("list"), className: "text-[11px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none" }, /* @__PURE__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: import_core_free_icons13.ArrowLeft01Icon, size: 12 }), " Back")), isReadOnly && currentView === "list" && /* @__PURE__ */ import_react46.default.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-50 text-neutral-500 rounded-full " }, /* @__PURE__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: import_core_free_icons13.CircleLock02Icon, size: 18, className: "text-current" }))), currentView === "list" && /* @__PURE__ */ import_react46.default.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col gap-8 w-full" }, (metricPrimaryLabel || metricSecondaryLabel) && /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-start pb-8
|
|
2690
|
+
))) : /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ import_react46.default.createElement("button", { onClick: () => setCurrentView("list"), className: "text-[11px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none" }, /* @__PURE__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: import_core_free_icons13.ArrowLeft01Icon, size: 12 }), " Back")), isReadOnly && currentView === "list" && /* @__PURE__ */ import_react46.default.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-50 text-neutral-500 rounded-full " }, /* @__PURE__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: import_core_free_icons13.CircleLock02Icon, size: 18, className: "text-current" }))), currentView === "list" && /* @__PURE__ */ import_react46.default.createElement("div", { className: "w-full max-w-5xl" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col gap-8 w-full" }, (metricPrimaryLabel || metricSecondaryLabel) && /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col sm:flex-row sm:justify-between sm:items-start pb-8 gap-6 sm:gap-0" }, metricPrimaryLabel && /* @__PURE__ */ import_react46.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react46.default.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-2 truncate block " }, metricPrimaryLabel), /* @__PURE__ */ import_react46.default.createElement("div", { className: "text-2xl text-black tracking-tight truncate" }, formatUsd(metricPrimaryValue)), metricPrimarySubtext && /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 tracking-widest " }, metricPrimarySubtext)), metricSecondaryLabel && /* @__PURE__ */ import_react46.default.createElement("div", { className: "min-w-0 sm:text-right" }, /* @__PURE__ */ import_react46.default.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-2 truncate block " }, metricSecondaryLabel), /* @__PURE__ */ import_react46.default.createElement("div", { className: "text-xl text-emerald-600 tracking-tight truncate" }, formatUsd(metricSecondaryValue)), metricSecondarySubtext && /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 tracking-widest " }, metricSecondarySubtext))), !isReadOnly && showBillingOverview && /* @__PURE__ */ import_react46.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-8 sm:gap-4" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react46.default.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-3 truncate block " }, "Billing Status"), /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: `w-2 h-2 rounded-full shrink-0 ${billingStatus === "ACTIVE" ? "bg-green-500" : "bg-neutral-300"}` }), /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-xs text-black tracking-widest truncate" }, billingStatus || "UNKNOWN"))), /* @__PURE__ */ import_react46.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react46.default.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-3 truncate block " }, "Next Billing Date"), /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-sm text-black truncate" }, formatDate(nextBillingDate))), lastPaidDate && /* @__PURE__ */ import_react46.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react46.default.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-3 truncate block " }, "Last Paid Date"), /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-sm text-neutral-600 truncate" }, formatDate(lastPaidDate)))), !isReadOnly && showUsageMetrics && usageMetrics.length > 0 && /* @__PURE__ */ import_react46.default.createElement("div", { className: "pt-8 border-t border-neutral-100" }, /* @__PURE__ */ import_react46.default.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-6 truncate block " }, "Usage & Limits"), /* @__PURE__ */ import_react46.default.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__ */ import_react46.default.createElement("div", { key: idx, className: "flex justify-between pb-2" }, /* @__PURE__ */ import_react46.default.createElement("span", { className: "text-neutral-500 text-xs" }, metric.label), /* @__PURE__ */ import_react46.default.createElement("span", { className: "text-xs text-black" }, metric.value))))), /* @__PURE__ */ import_react46.default.createElement("div", { className: "pt-8 border-t border-neutral-100" }, /* @__PURE__ */ import_react46.default.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-4 truncate block " }, "Transaction History"), isLoading ? /* @__PURE__ */ import_react46.default.createElement(PageSpinner3, null) : invoices.length === 0 ? /* @__PURE__ */ import_react46.default.createElement(import_react46.default.Fragment, null, /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-xs text-neutral-500 py-4" }, "No records found.")) : /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "divide-y divide-neutral-100" }, invoices.map((inv) => /* @__PURE__ */ import_react46.default.createElement("div", { key: inv.id, onClick: () => {
|
|
2687
2691
|
setSelectedInvoice(inv);
|
|
2688
2692
|
setCurrentView("details");
|
|
2689
|
-
}, className: "flex items-center justify-between py-4 hover:bg-neutral-50/50 cursor-pointer group min-w-0 px-2 transition-colors" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col gap-1 min-w-0 flex-1" }, /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-sm text-black truncate pr-4" }, inv.name), /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-xs text-neutral-500 truncate" }, inv.subtext)), /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col items-end gap-1 shrink-0 pl-4" }, /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-sm text-black" }, formatUsd(inv.amountDue)), /* @__PURE__ */ import_react46.default.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__ */ import_react46.default.createElement("div", { className: "flex items-center justify-between pt-4 mt-2" }, /* @__PURE__ */ import_react46.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages), /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react46.default.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__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: import_core_free_icons13.ArrowLeft01Icon, size: 14 })), /* @__PURE__ */ import_react46.default.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__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: import_core_free_icons13.ArrowRight01Icon, size: 14 })))))))), currentView === "details" && selectedInvoice && /* @__PURE__ */ import_react46.default.createElement("div", { className: "w-full max-w-5xl animate-in fade-in duration-300" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col gap-6 w-full" }, /* @__PURE__ */ import_react46.default.createElement("div", null, /* @__PURE__ */ import_react46.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Breakdown"), /* @__PURE__ */ import_react46.default.createElement("h2", { className: "text-lg text-black mb-1" }, selectedInvoice.name), /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-xs text-neutral-500" }, "Generated on ", formatDate(selectedInvoice.createdAt))), /* @__PURE__ */ import_react46.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 " }, /* @__PURE__ */ import_react46.default.createElement("div", null, /* @__PURE__ */ import_react46.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Amount"), /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-xl text-black" }, formatUsd(selectedInvoice.amountDue))), /* @__PURE__ */ import_react46.default.createElement("div", null, /* @__PURE__ */ import_react46.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Status"), isModMode ? /* @__PURE__ */ import_react46.default.createElement(
|
|
2693
|
+
}, className: "flex items-center justify-between py-4 hover:bg-neutral-50/50 cursor-pointer group min-w-0 px-2 transition-colors" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col gap-1 min-w-0 flex-1" }, /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-sm text-black truncate pr-4" }, capitalizeWords(inv.name)), /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-xs text-neutral-500 truncate" }, inv.subtext)), /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col items-end gap-1 shrink-0 pl-4" }, /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-sm text-black" }, formatUsd(inv.amountDue)), /* @__PURE__ */ import_react46.default.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__ */ import_react46.default.createElement("div", { className: "flex items-center justify-between pt-4 mt-2" }, /* @__PURE__ */ import_react46.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", currentPage, " of ", totalPages), /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react46.default.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__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: import_core_free_icons13.ArrowLeft01Icon, size: 14 })), /* @__PURE__ */ import_react46.default.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__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: import_core_free_icons13.ArrowRight01Icon, size: 14 })))))))), currentView === "details" && selectedInvoice && /* @__PURE__ */ import_react46.default.createElement("div", { className: "w-full max-w-5xl animate-in fade-in duration-300" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex flex-col gap-6 w-full" }, /* @__PURE__ */ import_react46.default.createElement("div", null, /* @__PURE__ */ import_react46.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Breakdown"), /* @__PURE__ */ import_react46.default.createElement("h2", { className: "text-lg text-black mb-1" }, capitalizeWords(selectedInvoice.name)), /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-xs text-neutral-500" }, "Generated on ", formatDate(selectedInvoice.createdAt))), /* @__PURE__ */ import_react46.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 " }, /* @__PURE__ */ import_react46.default.createElement("div", null, /* @__PURE__ */ import_react46.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Amount"), /* @__PURE__ */ import_react46.default.createElement("p", { className: "text-xl text-black" }, formatUsd(selectedInvoice.amountDue))), /* @__PURE__ */ import_react46.default.createElement("div", null, /* @__PURE__ */ import_react46.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Status"), isModMode ? /* @__PURE__ */ import_react46.default.createElement(
|
|
2690
2694
|
"button",
|
|
2691
2695
|
{
|
|
2692
2696
|
onClick: () => !isUpdating && setIsActionModalOpen(true),
|
package/dist/index.mjs
CHANGED
|
@@ -1644,7 +1644,7 @@ import {
|
|
|
1644
1644
|
} from "@hugeicons/core-free-icons";
|
|
1645
1645
|
var ButtonSpinner = () => /* @__PURE__ */ React25.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React25.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React25.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
1646
1646
|
var ECOSYSTEM_APPS = [
|
|
1647
|
-
{ id: "desktop", name: "Retina", description: "Ai Document Editor", iconSrc: "https://retinalabs.company/assets/images/
|
|
1647
|
+
{ id: "desktop", name: "Retina", description: "Ai Document Editor", iconSrc: "https://retinalabs.company/assets/images/retina.avif", url: "https://app.retinaapps.com/" },
|
|
1648
1648
|
{ id: "audditur", name: "Audditur", description: "AI Legal & Compliance", iconSrc: "https://retinalabs.company/assets/images/audditur.avif", url: "https://app.audditur.com/" }
|
|
1649
1649
|
];
|
|
1650
1650
|
var UniversalSidebar = ({
|
|
@@ -1740,7 +1740,7 @@ var UniversalSidebar = ({
|
|
|
1740
1740
|
{
|
|
1741
1741
|
src: currentAppConfig.iconSrc,
|
|
1742
1742
|
alt: currentAppConfig.name,
|
|
1743
|
-
className: "w-
|
|
1743
|
+
className: "w-7 h-7 rounded-md object-contain shrink-0"
|
|
1744
1744
|
}
|
|
1745
1745
|
) : /* @__PURE__ */ React25.createElement("div", { className: " rounded-md shrink-0 flex items-center justify-center" }), (!isCollapsed || isMobileOpen) && /* @__PURE__ */ React25.createElement("div", { className: "flex flex-col justify-center min-w-0 pr-2 flex-1" }, /* @__PURE__ */ React25.createElement("span", { className: "text-[13px] text-black leading-none truncate tracking-wide mb-1" }, title), subtitle && /* @__PURE__ */ React25.createElement("span", { className: "text-[9px] text-neutral-500 truncate tracking-[0.2em] leading-none " }, subtitle))), /* @__PURE__ */ React25.createElement("div", { className: "md:hidden flex shrink-0" }, /* @__PURE__ */ React25.createElement(
|
|
1746
1746
|
"button",
|
|
@@ -2545,6 +2545,10 @@ var formatDate = (dateString) => {
|
|
|
2545
2545
|
var formatUsd = (amount) => {
|
|
2546
2546
|
return `$${(amount || 0).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
2547
2547
|
};
|
|
2548
|
+
var capitalizeWords = (input) => {
|
|
2549
|
+
if (!input) return "";
|
|
2550
|
+
return input.toLowerCase().split(" ").map((part) => part.length ? part[0].toUpperCase() + part.slice(1) : part).join(" ");
|
|
2551
|
+
};
|
|
2548
2552
|
var UniversalBillingPage = ({
|
|
2549
2553
|
headerTitle,
|
|
2550
2554
|
headerDescription,
|
|
@@ -2623,10 +2627,10 @@ var UniversalBillingPage = ({
|
|
|
2623
2627
|
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"
|
|
2624
2628
|
},
|
|
2625
2629
|
timeframe === "ALL" ? "All Time" : timeframe === "24H" ? "Past 24 Hours" : timeframe === "7D" ? "Past 7 Days" : "Past 30 Days"
|
|
2626
|
-
))) : /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ React30.createElement("button", { onClick: () => setCurrentView("list"), className: "text-[11px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none" }, /* @__PURE__ */ React30.createElement(HugeiconsIcon17, { icon: ArrowLeft01Icon4, size: 12 }), " Back")), isReadOnly && currentView === "list" && /* @__PURE__ */ React30.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-50 text-neutral-500 rounded-full " }, /* @__PURE__ */ React30.createElement(HugeiconsIcon17, { icon: CircleLock02Icon4, size: 18, className: "text-current" }))), currentView === "list" && /* @__PURE__ */ React30.createElement("div", { className: "w-full max-w-5xl" }, /* @__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
|
|
2630
|
+
))) : /* @__PURE__ */ React30.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ React30.createElement("button", { onClick: () => setCurrentView("list"), className: "text-[11px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none" }, /* @__PURE__ */ React30.createElement(HugeiconsIcon17, { icon: ArrowLeft01Icon4, size: 12 }), " Back")), isReadOnly && currentView === "list" && /* @__PURE__ */ React30.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-50 text-neutral-500 rounded-full " }, /* @__PURE__ */ React30.createElement(HugeiconsIcon17, { icon: CircleLock02Icon4, size: 18, className: "text-current" }))), currentView === "list" && /* @__PURE__ */ React30.createElement("div", { className: "w-full max-w-5xl" }, /* @__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 gap-6 sm:gap-0" }, metricPrimaryLabel && /* @__PURE__ */ React30.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React30.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-2 truncate block " }, metricPrimaryLabel), /* @__PURE__ */ React30.createElement("div", { className: "text-2xl text-black tracking-tight truncate" }, formatUsd(metricPrimaryValue)), metricPrimarySubtext && /* @__PURE__ */ React30.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 tracking-widest " }, metricPrimarySubtext)), metricSecondaryLabel && /* @__PURE__ */ React30.createElement("div", { className: "min-w-0 sm:text-right" }, /* @__PURE__ */ React30.createElement("h3", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-2 truncate block " }, metricSecondaryLabel), /* @__PURE__ */ React30.createElement("div", { className: "text-xl text-emerald-600 tracking-tight truncate" }, formatUsd(metricSecondaryValue)), metricSecondarySubtext && /* @__PURE__ */ React30.createElement("p", { className: "text-[11px] text-neutral-500 mt-1 tracking-widest " }, 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: "text-[11px] text-neutral-400 tracking-[0.2em] mb-3 truncate block " }, "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: "text-[11px] text-neutral-400 tracking-[0.2em] mb-3 truncate block " }, "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: "text-[11px] text-neutral-400 tracking-[0.2em] mb-3 truncate block " }, "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: "text-[11px] text-neutral-400 tracking-[0.2em] mb-6 truncate block " }, "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 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: "text-[11px] text-neutral-400 tracking-[0.2em] mb-4 truncate block " }, "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: () => {
|
|
2627
2631
|
setSelectedInvoice(inv);
|
|
2628
2632
|
setCurrentView("details");
|
|
2629
|
-
}, 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" }, formatUsd(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-[11px] 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(HugeiconsIcon17, { 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(HugeiconsIcon17, { icon: ArrowRight01Icon4, size: 14 })))))))), currentView === "details" && selectedInvoice && /* @__PURE__ */ React30.createElement("div", { className: "w-full max-w-5xl 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-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Breakdown"), /* @__PURE__ */ React30.createElement("h2", { className: "text-lg 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 " }, /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Amount"), /* @__PURE__ */ React30.createElement("p", { className: "text-xl text-black" }, formatUsd(selectedInvoice.amountDue))), /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Status"), isModMode ? /* @__PURE__ */ React30.createElement(
|
|
2633
|
+
}, className: "flex items-center justify-between py-4 hover:bg-neutral-50/50 cursor-pointer group min-w-0 px-2 transition-colors" }, /* @__PURE__ */ 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" }, capitalizeWords(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" }, formatUsd(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-[11px] 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(HugeiconsIcon17, { 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(HugeiconsIcon17, { icon: ArrowRight01Icon4, size: 14 })))))))), currentView === "details" && selectedInvoice && /* @__PURE__ */ React30.createElement("div", { className: "w-full max-w-5xl 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-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Breakdown"), /* @__PURE__ */ React30.createElement("h2", { className: "text-lg text-black mb-1" }, capitalizeWords(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 " }, /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Amount"), /* @__PURE__ */ React30.createElement("p", { className: "text-xl text-black" }, formatUsd(selectedInvoice.amountDue))), /* @__PURE__ */ React30.createElement("div", null, /* @__PURE__ */ React30.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-1 " }, "Status"), isModMode ? /* @__PURE__ */ React30.createElement(
|
|
2630
2634
|
"button",
|
|
2631
2635
|
{
|
|
2632
2636
|
onClick: () => !isUpdating && setIsActionModalOpen(true),
|