@pagamio/frontend-commons-lib 0.8.292 → 0.8.294

package/lib/api/client.js

@@ -160,10 +160,24 @@ export class ApiClient {
      */
     createUrl(endpoint, params) {
         const raw = endpoint.startsWith('http') ? endpoint : `${this.config.baseURL}${endpoint}`;
-        // When baseURL is a relative path (e.g. /api/v1) we need window.location.origin
-        // as the base for the URL constructor.
-        const base = typeof window !== 'undefined' ? window.location.origin : undefined;
-        const url = new URL(raw, base);
+        // Absolute URLs work directly. Relative paths need a base for the URL
+        // constructor — use window.location.origin in the browser, or the
+        // server-side API_BASE_URL during SSR.
+        let url;
+        if (raw.startsWith('http')) {
+            url = new URL(raw);
+        }
+        else if (typeof window !== 'undefined') {
+            url = new URL(raw, window.location.origin);
+        }
+        else {
+            // SSR: resolve relative path against the backend URL so server-side
+            // fetch calls go directly to the backend (no proxy needed server→server).
+            const ssrBase = process.env?.API_BASE_URL?.replace(/\/api\/v1$/, '');
+            if (!ssrBase)
+                throw new Error('API_BASE_URL env var is required for SSR');
+            url = new URL(raw, ssrBase);
+        }
         if (params) {
             Object.entries(params).forEach(([key, value]) => {
                 url.searchParams.append(key, value);

package/lib/auth/services/LogoutService.js

@@ -63,7 +63,19 @@ export class LogoutService {
         }
     }
     async invalidateServerSession(endpoint, token) {
-        const fullEndpoint = endpoint.startsWith('http') ? endpoint : `${this.baseUrl}${endpoint}`;
+        let fullEndpoint = endpoint.startsWith('http') ? endpoint : `${this.baseUrl}${endpoint}`;
+        // Resolve relative URLs for SSR — Node's fetch requires absolute URLs.
+        if (!fullEndpoint.startsWith('http')) {
+            if (typeof window !== 'undefined') {
+                fullEndpoint = `${window.location.origin}${fullEndpoint}`;
+            }
+            else {
+                const serverBase = process.env?.API_BASE_URL?.replace(/\/api\/v1$/, '');
+                if (!serverBase)
+                    throw new Error('API_BASE_URL env var is required for SSR');
+                fullEndpoint = `${serverBase}${fullEndpoint}`;
+            }
+        }
         const response = await fetch(fullEndpoint, {
             method: 'POST',
             headers: {

package/lib/auth/utils/TokenManager.js

@@ -64,7 +64,20 @@ export class TokenManager {
             // Requests go through the same-origin proxy so cookies are first-party
             // and sent automatically with credentials: 'same-origin'.
             const oldRefreshToken = this.getRefreshToken();
-            const response = await fetch(`${this.baseUrl}${this.refreshEndpoint}`, {
+            // Resolve relative URLs for SSR — Node's fetch requires absolute URLs.
+            let refreshUrl = `${this.baseUrl}${this.refreshEndpoint}`;
+            if (!refreshUrl.startsWith('http')) {
+                if (typeof window !== 'undefined') {
+                    refreshUrl = `${window.location.origin}${refreshUrl}`;
+                }
+                else {
+                    const serverBase = process.env?.API_BASE_URL?.replace(/\/api\/v1$/, '');
+                    if (!serverBase)
+                        throw new Error('API_BASE_URL env var is required for SSR');
+                    refreshUrl = `${serverBase}${refreshUrl}`;
+                }
+            }
+            const response = await fetch(refreshUrl, {
                 method: 'POST',
                 credentials: 'same-origin',
                 headers: {

package/lib/dashboard-visuals/v2/components/ChartDetailsModal.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @fileoverview ChartDetailsModal
+ *
+ * Standardized 3-tab modal shell for chart drill-down views.
+ * Provides Visual Chart, Data Table, and Analytics tabs with a consistent
+ * layout across all dashboards.
+ *
+ * @example
+ * ```tsx
+ * <ChartDetailsModal
+ *   isOpen={isOpen}
+ *   onClose={onClose}
+ *   title="Top Products"
+ *   chartContent={<BarChartV2 ... />}
+ *   tableContent={<MyTable data={data} />}
+ *   analyticsContent={<MyStats data={data} />}
+ * />
+ * ```
+ */
+import * as React from 'react';
+export interface ChartDetailsModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback to close the modal */
+    onClose: () => void;
+    /** Modal title (shown in header) */
+    title: string;
+    /** Content for the Visual Chart tab */
+    chartContent: React.ReactNode;
+    /** Content for the Data Table tab */
+    tableContent: React.ReactNode;
+    /** Content for the Analytics tab */
+    analyticsContent: React.ReactNode;
+    /** Modal width size — defaults to 7xl */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
+}
+declare const ChartDetailsModal: React.FC<ChartDetailsModalProps>;
+export default ChartDetailsModal;

package/lib/dashboard-visuals/v2/components/ChartDetailsModal.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Modal } from '../../../components';
+import { PagamioTabs } from '../../../components';
+// =============================================================================
+// COMPONENT
+// =============================================================================
+const ChartDetailsModal = ({ isOpen, onClose, title, chartContent, tableContent, analyticsContent, size = '7xl', }) => {
+    const tabs = [
+        {
+            id: 1,
+            title: 'Visual Chart',
+            content: _jsx("div", { className: "py-2", children: chartContent }),
+        },
+        {
+            id: 2,
+            title: 'Data Table',
+            content: _jsx("div", { className: "py-2", children: tableContent }),
+        },
+        {
+            id: 3,
+            title: 'Analytics',
+            content: _jsx("div", { className: "py-2", children: analyticsContent }),
+        },
+    ];
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: `${title} — Detailed Analysis`, size: size, children: _jsx(PagamioTabs, { tabs: tabs, defaultTab: 0, variant: "pills" }) }));
+};
+export default ChartDetailsModal;

package/lib/dashboard-visuals/v2/components/ChartExpandButton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface ChartExpandButtonProps {
+    /** Handler called when the button is clicked */
+    onClick: () => void;
+    /** Optional accessible label — defaults to "View Details" */
+    label?: string;
+}
+declare const ChartExpandButton: React.FC<ChartExpandButtonProps>;
+export default ChartExpandButton;

package/lib/dashboard-visuals/v2/components/ChartExpandButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @fileoverview ChartExpandButton
+ *
+ * Standardized icon button used to open chart detail modals.
+ * Renders in the DashboardCard `actions` slot (top-right of chart cards).
+ * Replaces all "View All" text links with a consistent icon button.
+ *
+ * @example
+ * ```tsx
+ * // Inside a DashboardWrapperV2 ChartConfig:
+ * action: <ChartExpandButton onClick={() => setIsOpen(true)} />,
+ * ```
+ */
+import { HiArrowsExpand } from 'react-icons/hi';
+import { IconButton } from '../../../components';
+// =============================================================================
+// COMPONENT
+// =============================================================================
+const ChartExpandButton = ({ onClick, label = 'View Details' }) => {
+    return _jsx(IconButton, { icon: HiArrowsExpand, label: label, variant: "ghost", size: "sm", onClick: onClick });
+};
+export default ChartExpandButton;

package/lib/dashboard-visuals/v2/components/index.d.ts

@@ -11,3 +11,7 @@ export { DashboardStatCardRow, DashboardStatCard } from './DashboardStatCardRow'
 export type { DashboardStatCardRowProps, DashboardStatCardProps } from './DashboardStatCardRow';
 export { DashboardChartRow, ChartRenderer } from './DashboardChartRow';
 export type { DashboardChartRowProps, ChartRendererProps } from './DashboardChartRow';
+export { default as ChartDetailsModal } from './ChartDetailsModal';
+export type { ChartDetailsModalProps } from './ChartDetailsModal';
+export { default as ChartExpandButton } from './ChartExpandButton';
+export type { ChartExpandButtonProps } from './ChartExpandButton';

package/lib/dashboard-visuals/v2/components/index.js

@@ -12,3 +12,7 @@ export { DashboardWrapperV2 } from './DashboardWrapperV2';
 export { DashboardStatCardRow, DashboardStatCard } from './DashboardStatCardRow';
 // Chart Row
 export { DashboardChartRow, ChartRenderer } from './DashboardChartRow';
+// Chart Details Modal — standardized 3-tab drill-down shell
+export { default as ChartDetailsModal } from './ChartDetailsModal';
+// Chart Expand Button — icon button for opening chart detail modals
+export { default as ChartExpandButton } from './ChartExpandButton';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.292",
+  "version": "0.8.294",
   "publishConfig": {
     "access": "public",
     "provenance": false