@pagamio/frontend-commons-lib 0.8.293 → 0.8.295

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 { HiOutlineExternalLink } from 'react-icons/hi';
+import { IconButton } from '../../../components';
+// =============================================================================
+// COMPONENT
+// =============================================================================
+const ChartExpandButton = ({ onClick, label = 'View Details' }) => {
+    return _jsx(IconButton, { icon: HiOutlineExternalLink, 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.293",
+  "version": "0.8.295",
   "publishConfig": {
     "access": "public",
     "provenance": false