LPD-91802 Add the four Daily Stats KPI cards

Author: igor-franca

modules/dxp/apps/ai-hub/ai-hub-web/src/main/resources/META-INF/resources/js/activity_dashboard/components/AgentsCard.tsx

@@ -0,0 +1,19 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import ClayIcon from '@clayui/icon';
+import React from 'react';
+
+import MetricCard from './MetricCard';
+
+export default function AgentsCard({value}: {value: number}) {
+	return (
+		<MetricCard
+			icon={<ClayIcon symbol="organizations" />}
+			title={Liferay.Language.get('agents')}
+			value={value}
+		/>
+	);
+}

modules/dxp/apps/ai-hub/ai-hub-web/src/main/resources/META-INF/resources/js/activity_dashboard/components/AverageResponseTimeCard.tsx

@@ -0,0 +1,20 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import ClayIcon from '@clayui/icon';
+import React from 'react';
+
+import {formatMillisecondsAsSeconds} from '../utils/formatters';
+import MetricCard from './MetricCard';
+
+export default function AverageResponseTimeCard({value}: {value: number}) {
+	return (
+		<MetricCard
+			icon={<ClayIcon symbol="message-boards" />}
+			title={Liferay.Language.get('average-response-time')}
+			value={formatMillisecondsAsSeconds(value)}
+		/>
+	);
+}

modules/dxp/apps/ai-hub/ai-hub-web/src/main/resources/META-INF/resources/js/activity_dashboard/components/ChatbotsCard.tsx

@@ -0,0 +1,19 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import ClayIcon from '@clayui/icon';
+import React from 'react';
+
+import MetricCard from './MetricCard';
+
+export default function ChatbotsCard({value}: {value: number}) {
+	return (
+		<MetricCard
+			icon={<ClayIcon symbol="chatbot" />}
+			title={Liferay.Language.get('chatbots')}
+			value={value}
+		/>
+	);
+}

modules/dxp/apps/ai-hub/ai-hub-web/src/main/resources/META-INF/resources/js/activity_dashboard/components/TotalInteractionsCard.tsx

@@ -0,0 +1,19 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import ClayIcon from '@clayui/icon';
+import React from 'react';
+
+import MetricCard from './MetricCard';
+
+export default function TotalInteractionsCard({value}: {value: number}) {
+	return (
+		<MetricCard
+			icon={<ClayIcon symbol="message-boards" />}
+			title={Liferay.Language.get('total-interactions')}
+			value={value.toLocaleString()}
+		/>
+	);
+}

modules/dxp/apps/ai-hub/ai-hub-web/src/main/resources/META-INF/resources/js/activity_dashboard/utils/formatters.ts

@@ -0,0 +1,8 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+export function formatMillisecondsAsSeconds(milliseconds: number): string {
+	return `${(milliseconds / 1000).toFixed(1)}s`;
+}

modules/dxp/apps/ai-hub/ai-hub-web/test/js/activity_dashboard/components/AgentsCard.test.tsx

@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import {render, screen} from '@testing-library/react';
+import React from 'react';
+
+import '@testing-library/jest-dom';
+
+import AgentsCard from '../../../../src/main/resources/META-INF/resources/js/activity_dashboard/components/AgentsCard';
+
+(global as any).Liferay = {
+	Language: {
+		get: (key: string) => key,
+	},
+};
+
+describe('AgentsCard', () => {
+	it('renders the agents heading and value', () => {
+		render(<AgentsCard value={18} />);
+
+		expect(
+			screen.getByRole('heading', {level: 2, name: 'agents'})
+		).toBeInTheDocument();
+		expect(screen.getByText('18')).toBeInTheDocument();
+	});
+});

modules/dxp/apps/ai-hub/ai-hub-web/test/js/activity_dashboard/components/AverageResponseTimeCard.test.tsx

@@ -0,0 +1,31 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import {render, screen} from '@testing-library/react';
+import React from 'react';
+
+import '@testing-library/jest-dom';
+
+import AverageResponseTimeCard from '../../../../src/main/resources/META-INF/resources/js/activity_dashboard/components/AverageResponseTimeCard';
+
+(global as any).Liferay = {
+	Language: {
+		get: (key: string) => key,
+	},
+};
+
+describe('AverageResponseTimeCard', () => {
+	it('renders the average response time heading and the value in seconds', () => {
+		render(<AverageResponseTimeCard value={2600} />);
+
+		expect(
+			screen.getByRole('heading', {
+				level: 2,
+				name: 'average-response-time',
+			})
+		).toBeInTheDocument();
+		expect(screen.getByText('2.6s')).toBeInTheDocument();
+	});
+});

modules/dxp/apps/ai-hub/ai-hub-web/test/js/activity_dashboard/components/ChatbotsCard.test.tsx

@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import {render, screen} from '@testing-library/react';
+import React from 'react';
+
+import '@testing-library/jest-dom';
+
+import ChatbotsCard from '../../../../src/main/resources/META-INF/resources/js/activity_dashboard/components/ChatbotsCard';
+
+(global as any).Liferay = {
+	Language: {
+		get: (key: string) => key,
+	},
+};
+
+describe('ChatbotsCard', () => {
+	it('renders the chatbots heading and value', () => {
+		render(<ChatbotsCard value={4} />);
+
+		expect(
+			screen.getByRole('heading', {level: 2, name: 'chatbots'})
+		).toBeInTheDocument();
+		expect(screen.getByText('4')).toBeInTheDocument();
+	});
+});

modules/dxp/apps/ai-hub/ai-hub-web/test/js/activity_dashboard/components/TotalInteractionsCard.test.tsx

@@ -0,0 +1,28 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import {render, screen} from '@testing-library/react';
+import React from 'react';
+
+import '@testing-library/jest-dom';
+
+import TotalInteractionsCard from '../../../../src/main/resources/META-INF/resources/js/activity_dashboard/components/TotalInteractionsCard';
+
+(global as any).Liferay = {
+	Language: {
+		get: (key: string) => key,
+	},
+};
+
+describe('TotalInteractionsCard', () => {
+	it('renders the total interactions heading and the value with a thousands separator', () => {
+		render(<TotalInteractionsCard value={1245} />);
+
+		expect(
+			screen.getByRole('heading', {level: 2, name: 'total-interactions'})
+		).toBeInTheDocument();
+		expect(screen.getByText('1,245')).toBeInTheDocument();
+	});
+});

modules/dxp/apps/ai-hub/ai-hub-web/test/js/activity_dashboard/utils/formatters.test.ts

@@ -0,0 +1,20 @@
+/**
+ * SPDX-FileCopyrightText: (c) 2026 Liferay, Inc. https://liferay.com
+ * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
+ */
+
+import {formatMillisecondsAsSeconds} from '../../../../src/main/resources/META-INF/resources/js/activity_dashboard/utils/formatters';
+
+describe('formatMillisecondsAsSeconds', () => {
+	it('converts whole seconds', () => {
+		expect(formatMillisecondsAsSeconds(2000)).toBe('2.0s');
+	});
+
+	it('formats fractional milliseconds to one decimal', () => {
+		expect(formatMillisecondsAsSeconds(2600)).toBe('2.6s');
+	});
+
+	it('formats zero as 0.0s', () => {
+		expect(formatMillisecondsAsSeconds(0)).toBe('0.0s');
+	});
+});