;
+}
+
+export function withDebugData(
+ WrappedComponent: React.ComponentType
+) {
+ return React.forwardRef((props, ref) => {
+ const debugDataRef = useRef({});
+ const { debugRef, ...componentProps } = props;
+
+ // Create a wrapped component that captures debug data
+ const ComponentWithDebugCapture = (innerProps: P) => {
+ // Capture props for debug
+ debugDataRef.current.props = innerProps;
+
+ return = ({
+ open,
+ onClose,
+ onWidgetAdd,
+}) => {
+ const [activeTab, setActiveTab] = useState('monitoring');
+ const [searchText, setSearchText] = useState('');
+
+ const widgetCategories = {
+ monitoring: {
+ title: 'Monitoring & Analytics',
+ icon:
+
+
+
+ {widget.icon}
+
+
+ {widget.title}
+
+
+
+ {widget.description}
+
+
+ {widget.preview}
+
+
+
+
+ );
+
+ // Calculate total matches across all categories
+ const totalMatches = useMemo(() => {
+ if (!searchText.trim()) return null;
+
+ return Object.values(widgetCategories).reduce((total, category) => {
+ return total + getFilteredWidgets(category.widgets).length;
+ }, 0);
+ }, [searchText]);
+
+ const tabItems = Object.entries(widgetCategories).map(([key, category]) => {
+ const filteredWidgets = getFilteredWidgets(category.widgets);
+
+ return {
+ key,
+ label: (
+
+ {category.icon}
+ {category.title}
+ {searchText && (
+
+ ({filteredWidgets.length})
+
+ )}
+
+ ),
+ children: (
+
+
+
+ {category.title}
+
+
+ {category.description}
+
+
+
+ {filteredWidgets.length > 0 ? (
+ filteredWidgets.map(renderWidgetCard)
+ ) : (
+
+
+ No widgets found matching "{searchText}"
+
+
+
+ )}
+
+
+ Add Dashboard Widget
+
+ }
+ placement="right"
+ width={720}
+ onClose={handleClose}
+ open={open}
+ styles={{
+ body: { backgroundColor: '#0a0a0a', padding: 0 },
+ header: { backgroundColor: '#1a1a1a', borderBottom: '1px solid #333' }
+ }}
+ >
+
+
}
+ placeholder="Search widgets by name or description..."
+ value={searchText}
+ onChange={(e) => setSearchText(e.target.value)}
+ style={{
+ backgroundColor: '#1a1a1a',
+ borderColor: '#333'
+ }}
+ allowClear
+ size="large"
+ />
+ {searchText && totalMatches !== null && (
+
+
+ Found {totalMatches} widget{totalMatches !== 1 ? 's' : ''} matching "{searchText}"
+
+
+ )}
+ {!searchText && (
+
+ )}
+
+ );
+};
+
+export default DashboardWidgetDrawer;
\ No newline at end of file
diff --git a/client/src/pages/Dashboard/Components/DashboardWidgets.tsx b/client/src/pages/Dashboard/Components/DashboardWidgets.tsx
new file mode 100644
index 000000000..7e42dc907
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/DashboardWidgets.tsx
@@ -0,0 +1,149 @@
+import React, { useState, useCallback } from 'react';
+import { Col, Row, Button, Space, Typography } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { motion } from 'framer-motion';
+import NotebookWidget from './NotebookWidget';
+import RSSFeedWidget from './RSSFeedWidget';
+import IFrameWidget from './IFrameWidget';
+import QuickActionsWidget from './QuickActionsWidget';
+import AnsiblePlaybookRunner from './AnsiblePlaybookRunner';
+import ContainerUpdateCenter from './ContainerUpdateCenter';
+import MaintenanceCalendar from './MaintenanceCalendar';
+import SystemPerformanceCard from './SystemPerformanceCard';
+import AvailabilityCard from './AvailabilityCard';
+import ContainersCard from './ContainersCard';
+import CombinedPowerCard from './CombinedPowerCard';
+import TimeSeriesLineChart from './TimeSeriesLineChart';
+import DashboardWidgetDrawer from './DashboardWidgetDrawer';
+
+const widgetColProps = {
+ xs: 24,
+ sm: 24,
+ md: 12,
+ lg: 12,
+ xl: 8,
+ style: { marginBottom: 24 },
+};
+
+const largeWidgetColProps = {
+ xs: 24,
+ sm: 24,
+ md: 24,
+ lg: 16,
+ xl: 12,
+ style: { marginBottom: 24 },
+};
+
+const cardVariants = {
+ hidden: { opacity: 0, y: 20 },
+ visible: (i: number) => ({
+ opacity: 1,
+ y: 0,
+ transition: {
+ delay: i * 0.1,
+ duration: 0.4,
+ },
+ }),
+};
+
+const DashboardWidgets: React.FC = () => {
+ const [drawerOpen, setDrawerOpen] = useState(false);
+ const [activeWidgets, setActiveWidgets] = useState(() => {
+ const saved = localStorage.getItem('ssm-dashboard-active-widgets');
+ return saved ? JSON.parse(saved) : [
+ 'QuickActionsWidget',
+ 'AnsiblePlaybookRunner',
+ 'ContainerUpdateCenter',
+ 'NotebookWidget',
+ 'RSSFeedWidget',
+ 'IFrameWidget',
+ 'MaintenanceCalendar'
+ ];
+ });
+
+ const handleWidgetAdd = useCallback((widgetKey: string, category: string) => {
+ if (!activeWidgets.includes(widgetKey)) {
+ const newWidgets = [...activeWidgets, widgetKey];
+ setActiveWidgets(newWidgets);
+ localStorage.setItem('ssm-dashboard-active-widgets', JSON.stringify(newWidgets));
+ }
+ }, [activeWidgets]);
+
+ const getWidgetComponent = (widgetKey: string) => {
+ const components: Record = {
+ // Monitoring & Analytics
+ SystemPerformanceCard:
+
+ Dashboard Widgets
+
+
+
+
+ {activeWidgets.map((widgetKey, index) => {
+ const component = getWidgetComponent(widgetKey);
+ if (!component) return null;
+
+ return (
+
+ {component}
+
+
+ );
+ })}
+
+
+ setDrawerOpen(false)}
+ onWidgetAdd={handleWidgetAdd}
+ />
+
+ );
+};
+
+export default DashboardWidgets;
\ No newline at end of file
diff --git a/client/src/pages/Dashboard/Components/DebugOverlay.tsx b/client/src/pages/Dashboard/Components/DebugOverlay.tsx
new file mode 100644
index 000000000..ef799c63a
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/DebugOverlay.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface DebugOverlayProps {
+ fileName: string;
+ componentName: string;
+}
+
+const DebugOverlay: React.FC = ({ fileName, componentName }) => {
+ if (process.env.NODE_ENV !== 'development') {
+ return null;
+ }
+
+ return (
+
+
{fileName}
+
{componentName}
+
= ({
+ data,
+ title = 'Debug: Raw JSON Data',
+ maxHeight = 300,
+ componentName
+}) => {
+ const handleCopy = () => {
+ const debugData = JSON.stringify({
+ component: componentName,
+ ...data
+ }, null, 2);
+ navigator.clipboard.writeText(debugData);
+ message.success('Debug data copied to clipboard');
+ };
+
+ return (
+
+ {title}
+
+ ),
+ children: (
+
+
}
+ size="small"
+ style={{
+ position: 'absolute',
+ top: '8px',
+ right: '8px',
+ zIndex: 1
+ }}
+ onClick={handleCopy}
+ >
+ Copy
+
+
+
+
+ {JSON.stringify({
+ component: componentName,
+ ...data
+ }, null, 2)}
+
+
+
+
= ({
+ show,
+ position = 'bottom-right',
+ size = 'small'
+}) => {
+ if (!show) return null;
+
+ const getPositionStyles = () => {
+ const baseStyles = {
+ position: 'absolute' as const,
+ zIndex: 10,
+ backgroundColor: 'rgba(255, 152, 0, 0.9)',
+ color: '#fff',
+ borderRadius: '4px',
+ fontWeight: 'bold',
+ fontSize: size === 'small' ? '10px' : '12px',
+ padding: size === 'small' ? '2px 6px' : '4px 8px',
+ textTransform: 'uppercase' as const,
+ letterSpacing: '0.5px',
+ boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+ pointerEvents: 'none' as const,
+ };
+
+ switch (position) {
+ case 'bottom-right':
+ return { ...baseStyles, bottom: '8px', right: '8px' };
+ case 'bottom-left':
+ return { ...baseStyles, bottom: '8px', left: '8px' };
+ case 'top-right':
+ return { ...baseStyles, top: '8px', right: '8px' };
+ case 'top-left':
+ return { ...baseStyles, top: '8px', left: '8px' };
+ default:
+ return { ...baseStyles, bottom: '8px', right: '8px' };
+ }
+ };
+
+ return (
+
+ DEMO
+
+ );
+};
+
+export default DemoOverlay;
\ No newline at end of file
diff --git a/client/src/pages/Dashboard/Components/DndProvider.tsx b/client/src/pages/Dashboard/Components/DndProvider.tsx
new file mode 100644
index 000000000..bf3ab47d5
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/DndProvider.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { DndProvider as ReactDndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+interface DndProviderProps {
+ children: React.ReactNode;
+}
+
+// This is a wrapper component to ensure the DndProvider is only mounted once
+// and to handle any potential issues with module federation
+const DndProvider: React.FC = ({ children }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+export default DndProvider;
\ No newline at end of file
diff --git a/client/src/pages/Dashboard/Components/DonutChart.tsx b/client/src/pages/Dashboard/Components/DonutChart.tsx
new file mode 100644
index 000000000..3e5948ad8
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/DonutChart.tsx
@@ -0,0 +1,745 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { Card, Typography, Space, Row, Col, Spin } from 'antd';
+import ReactApexChart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+import { getPaletteColors } from './utils/colorPalettes';
+import {
+ getDashboardDevicesStats,
+ getDashboardAveragedDevicesStats
+} from '@/services/rest/statistics/stastistics';
+import {
+ getContainerStat
+} from '@/services/rest/containers/container-statistics';
+import { entityCacheService } from '@/services/cache/entityCache.service';
+import moment from 'moment';
+import { useWidgetContext } from './DashboardLayoutEngine/WidgetContext';
+import { useRegisterDebugData } from './DashboardLayoutEngine/DebugDataProvider';
+import DemoOverlay from './DemoOverlay';
+
+interface LegendItem {
+ name: string;
+ value: string;
+ color: string;
+}
+
+interface DonutChartProps {
+ title: string;
+ dataType?: 'device' | 'container';
+ source?: string | string[];
+ metric?: string;
+ totalTours?: number;
+ mainLabel?: string;
+ chartData?: { type: string; value: number; color: string; originalValue?: number }[];
+ legendItems?: LegendItem[];
+ cardStyle?: React.CSSProperties;
+ isPreview?: boolean;
+ colorPalette?: string;
+ customColors?: string[];
+}
+
+const DonutChart: React.FC = ({
+ title,
+ dataType = 'device',
+ source = 'all',
+ metric = 'cpu_usage',
+ totalTours = 0,
+ mainLabel = 'Total',
+ chartData = [],
+ legendItems = [],
+ cardStyle,
+ isPreview = false,
+ colorPalette = 'default',
+ customColors,
+}) => {
+ const [loading, setLoading] = useState(false);
+ const [apiChartData, setApiChartData] = useState<{ type: string; value: number; color: string; originalValue?: number }[]>([]);
+ const [apiLegendItems, setApiLegendItems] = useState([]);
+ const [apiTotalValue, setApiTotalValue] = useState(0);
+ const [isUsingMockData, setIsUsingMockData] = useState(false);
+
+ // Get widget context and debug registration
+ const widgetContext = useWidgetContext();
+ const updateDebugData = useRegisterDebugData(widgetContext?.widgetId);
+
+ // Get colors from palette
+ const paletteColors = useMemo(() => {
+ return customColors && customColors.length > 0 ? customColors : getPaletteColors(colorPalette);
+ }, [colorPalette, customColors]);
+
+ // Determine if we're looking at all items or specific ones
+ const { isAllSelected, sourceIds } = useMemo(() => {
+ const isAll = Array.isArray(source) ? source.includes('all') : source === 'all';
+ let ids: string[] = [];
+
+ if (Array.isArray(source)) {
+ ids = source.filter(s => s && s !== 'all');
+ } else if (source && source !== 'all') {
+ ids = [source];
+ }
+
+ return { isAllSelected: isAll, sourceIds: ids };
+ }, [source]);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ if (loading) return; // Prevent multiple simultaneous fetches
+ setLoading(true);
+ try {
+ // Use provided data in preview mode or when static data is provided
+ if (isPreview || (chartData && chartData.length > 0)) {
+ setApiChartData(chartData);
+ setApiLegendItems(legendItems);
+ setApiTotalValue(totalTours);
+ setIsUsingMockData(isPreview || true); // Mark as mock data when using static props
+ setLoading(false);
+ return;
+ }
+
+ // Fetch data from API
+ const now = moment();
+ const weekAgo = moment().subtract(7, 'days');
+
+ // Reset mock data flag when fetching real data
+ setIsUsingMockData(false);
+
+ console.log('DonutChart date range:', {
+ from: weekAgo.toISOString(),
+ to: now.toISOString(),
+ metric,
+ dataType,
+ source
+ });
+
+ const deviceOrContainerMap = new Map();
+ const apiResponses: any = {};
+
+ if (dataType === 'device' && metric) {
+ if (isAllSelected) {
+ // Get all devices using cache
+ console.log('📊 DonutChart: Getting all devices');
+ const devices = await entityCacheService.getDevices();
+ apiResponses.devices = { data: devices };
+ const allDeviceIds = devices.map(device => device.uuid);
+
+ console.log('📊 DonutChart - Device IDs retrieved:', {
+ count: allDeviceIds.length,
+ deviceIds: allDeviceIds
+ });
+
+ if (allDeviceIds.length > 0) {
+ // Prepare API call parameters
+ const avgStatsParams = {
+ from: moment().subtract(1, 'hour').toDate(),
+ to: moment().toDate(),
+ };
+ const historicalStatsParams = {
+ from: weekAgo.toDate(),
+ to: now.toDate(),
+ };
+
+ console.log('📊 DonutChart API Calls - Parameters:', {
+ avgStats: {
+ method: 'getDashboardAveragedDevicesStats',
+ deviceIds: allDeviceIds,
+ metric: metric,
+ params: avgStatsParams,
+ body: { devices: allDeviceIds }
+ },
+ historicalStats: {
+ method: 'getDashboardDevicesStats',
+ deviceIds: allDeviceIds,
+ metric: metric,
+ params: historicalStatsParams,
+ body: { devices: allDeviceIds }
+ }
+ });
+
+ // Get averaged stats for each device to get their current values
+ const [avgStats, historicalStats] = await Promise.all([
+ getDashboardAveragedDevicesStats(allDeviceIds, metric, avgStatsParams),
+ getDashboardDevicesStats(allDeviceIds, metric, historicalStatsParams),
+ ]);
+
+ apiResponses.avgStats = avgStats;
+ apiResponses.historicalStats = historicalStats;
+
+ console.log('📊 DonutChart API Responses:', {
+ avgStats: {
+ success: avgStats.success,
+ dataLength: avgStats.data?.length || 0,
+ data: avgStats.data
+ },
+ historicalStats: {
+ success: historicalStats.success,
+ dataLength: historicalStats.data?.length || 0,
+ data: historicalStats.data
+ }
+ });
+
+ // Process historical stats to get per-device values
+ if (historicalStats.data && Array.isArray(historicalStats.data)) {
+ console.log('DonutChart: Processing historical data', {
+ dataLength: historicalStats.data.length,
+ sample: historicalStats.data[0]
+ });
+
+ // Group by device and get latest value for each
+ const deviceLatestValues = new Map();
+
+ historicalStats.data.forEach((stat: any) => {
+ // The API returns 'name' field with device UUID
+ const deviceId = stat.name || stat.deviceUuid;
+ if (deviceId && typeof stat.value === 'number') {
+ const existingEntry = deviceLatestValues.get(deviceId);
+
+ if (!existingEntry || stat.date > existingEntry.date) {
+ deviceLatestValues.set(deviceId, {
+ value: stat.value,
+ date: stat.date
+ });
+ }
+ }
+ });
+
+ console.log('DonutChart: Device latest values', {
+ deviceCount: deviceLatestValues.size,
+ values: Array.from(deviceLatestValues.entries())
+ });
+
+ // Create chart data from latest values
+ const nameMap = await entityCacheService.getEntitiesByIds('device', Array.from(deviceLatestValues.keys()));
+
+ deviceLatestValues.forEach((entry, deviceId) => {
+ const deviceName = nameMap.get(deviceId) || deviceId;
+ deviceOrContainerMap.set(deviceId, {
+ name: deviceName,
+ value: entry.value
+ });
+ });
+ } else {
+ console.log('DonutChart: No historical data available');
+ }
+ }
+ } else {
+ // Fetch specific devices
+ console.log('📊 DonutChart - Fetching specific devices:', sourceIds);
+
+ // Get device details from cache
+ const devices = await entityCacheService.getDevices();
+ apiResponses.devices = { data: devices };
+
+ if (sourceIds.length > 0) {
+ // Use the same API calls as for "all" but with specific device IDs
+ const avgStatsParams = {
+ from: moment().subtract(1, 'hour').toDate(),
+ to: moment().toDate(),
+ };
+ const historicalStatsParams = {
+ from: weekAgo.toDate(),
+ to: now.toDate(),
+ };
+
+ console.log('📊 DonutChart API Calls (Specific Devices) - Parameters:', {
+ deviceIds: sourceIds,
+ avgStats: {
+ method: 'getDashboardAveragedDevicesStats',
+ deviceIds: sourceIds,
+ metric: metric,
+ params: avgStatsParams,
+ body: { devices: sourceIds }
+ },
+ historicalStats: {
+ method: 'getDashboardDevicesStats',
+ deviceIds: sourceIds,
+ metric: metric,
+ params: historicalStatsParams,
+ body: { devices: sourceIds }
+ }
+ });
+
+ const [avgStats, historicalStats] = await Promise.all([
+ getDashboardAveragedDevicesStats(sourceIds, metric, avgStatsParams),
+ getDashboardDevicesStats(sourceIds, metric, historicalStatsParams),
+ ]);
+
+ apiResponses.avgStats = avgStats;
+ apiResponses.historicalStats = historicalStats;
+
+ console.log('📊 DonutChart API Responses (Specific Devices):', {
+ avgStats: {
+ success: avgStats.success,
+ dataLength: avgStats.data?.length || 0,
+ data: avgStats.data
+ },
+ historicalStats: {
+ success: historicalStats.success,
+ dataLength: historicalStats.data?.length || 0,
+ data: historicalStats.data
+ }
+ });
+
+ // Process historical stats to get per-device values
+ if (historicalStats.data && Array.isArray(historicalStats.data)) {
+ console.log('DonutChart: Processing historical data for specific devices', {
+ dataLength: historicalStats.data.length,
+ sample: historicalStats.data[0]
+ });
+
+ // Group by device and get latest value for each
+ const deviceLatestValues = new Map();
+
+ historicalStats.data.forEach((stat: any) => {
+ // The API returns 'name' field with device UUID
+ const deviceId = stat.name || stat.deviceUuid;
+ if (deviceId && typeof stat.value === 'number') {
+ const existingEntry = deviceLatestValues.get(deviceId);
+
+ if (!existingEntry || stat.date > existingEntry.date) {
+ deviceLatestValues.set(deviceId, {
+ value: stat.value,
+ date: stat.date
+ });
+ }
+ }
+ });
+
+ console.log('DonutChart: Device latest values', {
+ deviceCount: deviceLatestValues.size,
+ values: Array.from(deviceLatestValues.entries())
+ });
+
+ // Create chart data from latest values
+ const nameMap = await entityCacheService.getEntitiesByIds('device', Array.from(deviceLatestValues.keys()));
+
+ deviceLatestValues.forEach((entry, deviceId) => {
+ const deviceName = nameMap.get(deviceId) || deviceId;
+ deviceOrContainerMap.set(deviceId, {
+ name: deviceName,
+ value: entry.value
+ });
+ });
+ }
+ }
+ }
+ } else if (dataType === 'container' && metric) {
+ if (isAllSelected) {
+ // Get all containers from cache
+ const containers = await entityCacheService.getContainers();
+ apiResponses.containers = { data: containers };
+ const allContainerIds = containers.map(container => container.id);
+
+ // Limit to first 10 containers to prevent overload
+ const limitedContainerIds = allContainerIds.slice(0, 10);
+
+ // Get container names from cache
+ const containerNameMap = await entityCacheService.getEntitiesByIds('container', limitedContainerIds);
+
+ // Fetch current value for each container
+ for (const containerId of limitedContainerIds) {
+ const containerName = containerNameMap.get(containerId) || containerId;
+ const statsResponse = await getContainerStat(
+ containerId,
+ metric,
+ {
+ from: weekAgo.toISOString(),
+ to: now.toISOString()
+ }
+ );
+
+ if (statsResponse.success && statsResponse.data?.length > 0) {
+ const latestValue = statsResponse.data[statsResponse.data.length - 1].value;
+ deviceOrContainerMap.set(containerId, {
+ name: containerName,
+ value: latestValue
+ });
+ }
+ }
+ } else {
+ // Fetch specific containers
+ const containerNameMap = await entityCacheService.getEntitiesByIds('container', sourceIds);
+
+ for (const containerId of sourceIds) {
+ const containerName = containerNameMap.get(containerId) || containerId;
+ const statsResponse = await getContainerStat(
+ containerId,
+ metric,
+ {
+ from: weekAgo.toISOString(),
+ to: now.toISOString()
+ }
+ );
+
+ if (statsResponse.success && statsResponse.data?.length > 0) {
+ const latestValue = statsResponse.data[statsResponse.data.length - 1].value;
+ deviceOrContainerMap.set(containerId, {
+ name: containerName,
+ value: latestValue
+ });
+ }
+ }
+ }
+ }
+
+ // Convert map to chart data
+ const items = Array.from(deviceOrContainerMap.values());
+
+ let newChartData: { type: string; value: number; color: string; originalValue?: number }[] = [];
+ let newLegendItems: LegendItem[] = [];
+ let avgTotal = 0;
+
+ // If we have items, show them; otherwise show "No data"
+ if (items.length > 0) {
+ const total = items.reduce((sum, item) => sum + item.value, 0);
+ avgTotal = total / items.length; // Average percentage
+
+ // Special case: Single device should show as progress circle (actual percentage)
+ // Multiple devices should show as comparative donut (normalized proportions)
+ if (items.length === 1) {
+ // Single device: show actual percentage as progress circle
+ const singleItem = items[0];
+ const actualPercentage = singleItem.value;
+ const remainingPercentage = 100 - actualPercentage;
+
+ newChartData = [
+ {
+ type: singleItem.name || 'Used',
+ value: actualPercentage, // Actual percentage (e.g., 3%)
+ originalValue: actualPercentage,
+ color: paletteColors[0] || '#52c41a'
+ },
+ {
+ type: 'Available',
+ value: remainingPercentage, // Remaining percentage (e.g., 97%)
+ originalValue: remainingPercentage,
+ color: 'rgba(255,255,255,0.1)' // Semi-transparent background
+ }
+ ];
+
+ newLegendItems = [{
+ name: singleItem.name || 'Usage',
+ value: `${actualPercentage.toFixed(1)}%`,
+ color: paletteColors[0] || '#52c41a'
+ }];
+ } else {
+ // Multiple devices: normalize for comparative donut chart
+ const totalValue = items.reduce((sum, item) => sum + item.value, 0);
+
+ // If totalValue is 0, give equal segments to all devices
+ const normalizedItems = totalValue > 0
+ ? items.map(item => ({
+ ...item,
+ // Each device gets a proportion of 100 based on its relative value
+ normalizedValue: (item.value / totalValue) * 100,
+ originalValue: item.value
+ }))
+ : items.map(item => ({
+ ...item,
+ // Equal segments if all values are 0
+ normalizedValue: 100 / items.length,
+ originalValue: item.value
+ }));
+
+ newChartData = normalizedItems.map((item, index) => ({
+ type: item.name || `Device ${index + 1}`,
+ value: item.normalizedValue, // Normalized to sum to 100 for full circle
+ originalValue: item.originalValue, // Keep original percentage for display
+ color: paletteColors[index % paletteColors.length] || '#cccccc'
+ }));
+
+ newLegendItems = normalizedItems.map((item, index) => ({
+ name: item.name || `Device ${index + 1}`,
+ value: `${item.originalValue.toFixed(1)}%`, // Show original percentage in legend
+ color: paletteColors[index % paletteColors.length] || '#cccccc'
+ }));
+ }
+
+ setApiChartData(newChartData);
+ setApiLegendItems(newLegendItems);
+ setApiTotalValue(avgTotal);
+ } else {
+ // No data available
+ setApiChartData([]);
+ setApiLegendItems([]);
+ setApiTotalValue(0);
+ }
+
+ console.log('DonutChart final processed data:', {
+ itemCount: items.length,
+ items: items,
+ originalTotal: items.reduce((sum, item) => sum + item.value, 0),
+ normalizedTotal: newChartData.reduce((sum, item) => sum + item.value, 0),
+ chartData: newChartData
+ });
+
+ // Include API call parameters in raw data for debugging
+ const deviceIds = isAllSelected
+ ? (apiResponses.devices?.data?.map((d: any) => d.uuid) || [])
+ : sourceIds;
+
+ const debugData = {
+ apiCalls: {
+ source: source,
+ isAllSelected: isAllSelected,
+ sourceIds: sourceIds,
+ getAllDevices: {
+ method: 'GET',
+ endpoint: '/api/devices'
+ },
+ getDashboardDevicesStats: {
+ method: 'POST',
+ endpoint: `/api/statistics/dashboard/stats/${metric}`,
+ params: {
+ from: weekAgo.toDate(),
+ to: now.toDate()
+ },
+ body: {
+ devices: deviceIds
+ }
+ },
+ getDashboardAveragedDevicesStats: {
+ method: 'POST',
+ endpoint: `/api/statistics/dashboard/averaged/${metric}`,
+ params: {
+ from: moment().subtract(1, 'hour').toDate(),
+ to: moment().toDate()
+ },
+ body: {
+ devices: deviceIds
+ }
+ }
+ },
+ responses: apiResponses
+ };
+
+ // Update debug data in the provider
+ if (updateDebugData) {
+ updateDebugData({
+ componentName: 'DonutChart',
+ fileName: 'DonutChart.tsx',
+ rawApiData: debugData as Record,
+ processedData: {
+ chartData: newChartData,
+ legendItems: newLegendItems,
+ totalValue: avgTotal
+ } as Record,
+ config: {
+ dataType,
+ source,
+ metric
+ } as Record
+ });
+ }
+
+ } catch (error) {
+ console.error('Error fetching donut chart data:', error);
+ // Fallback to provided data if available
+ setApiChartData(chartData);
+ setApiLegendItems(legendItems);
+ setApiTotalValue(totalTours);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchData();
+ }, [dataType, source, metric, isAllSelected, sourceIds.join(','), isPreview, colorPalette, customColors?.join(',')]);
+
+ // Use API data if available, otherwise fall back to provided data
+ const displayChartData = apiChartData.length > 0 ? apiChartData : chartData;
+ const displayLegendItems = apiLegendItems.length > 0 ? apiLegendItems : legendItems;
+ const displayTotalValue = apiTotalValue > 0 ? apiTotalValue : totalTours;
+ // Prepare data for ApexCharts - use display data
+ const chartSeries = displayChartData?.map(item => item.value) || [];
+ const chartLabels = displayChartData?.map(item => item.type) || [];
+ const chartColors = displayChartData?.map(item => item.color) || [];
+
+ console.log('DonutChart render data:', {
+ displayChartData,
+ chartSeries,
+ chartLabels,
+ loading
+ });
+
+ const chartOptions: ApexOptions = {
+ chart: {
+ type: 'donut',
+ height: 120,
+ background: 'transparent',
+ animations: {
+ enabled: false
+ }
+ },
+ labels: chartLabels,
+ colors: chartColors,
+ legend: {
+ show: false
+ },
+ dataLabels: {
+ enabled: false
+ },
+ plotOptions: {
+ pie: {
+ donut: {
+ size: '65%',
+ labels: {
+ show: true,
+ total: {
+ show: true,
+ showAlways: true,
+ label: mainLabel,
+ fontSize: '12px',
+ fontWeight: 400,
+ color: '#8c8c8c',
+ formatter: function() {
+ return displayTotalValue.toFixed(1) + '%';
+ }
+ },
+ value: {
+ show: true,
+ fontSize: '20px',
+ fontWeight: 600,
+ color: '#ffffff',
+ offsetY: 8,
+ formatter: function() {
+ return '';
+ }
+ },
+ name: {
+ show: false
+ }
+ }
+ }
+ }
+ },
+ stroke: {
+ width: 0
+ },
+ tooltip: {
+ theme: 'dark',
+ style: {
+ fontSize: '12px'
+ },
+ y: {
+ formatter: function(_val: number) {
+ return _val.toFixed(1) + '%';
+ }
+ },
+ custom: function({ series, seriesIndex, w }) {
+ const label = w.globals.labels[seriesIndex];
+ // Use original value if available, otherwise use the normalized value
+ const originalValue = displayChartData[seriesIndex]?.originalValue;
+ const displayValue = originalValue !== undefined ? originalValue : series[seriesIndex];
+
+ // Hide tooltip for "Available" segment in single-device progress mode
+ if (label === 'Available') {
+ return '';
+ }
+
+ return `
+
+
${label}: ${displayValue.toFixed(1)}%
+
+
+
+ {title}
+
+
+
+ {loading ? (
+
+
+ ) : chartSeries.length > 0 && chartSeries.every(v => typeof v === 'number' && !isNaN(v)) ? (
+
+ ) : (
+
+ No data available
+
+ )}
+
+ {displayLegendItems?.map((item) => (
+
+
+
+
+ {item.name}
+
+
+
+
+ {item.value}
+
+
+
+ ))}
+
+
+
+ );
+};
+export default DonutChart;
diff --git a/client/src/pages/Dashboard/Components/DonutChartWithTable.tsx b/client/src/pages/Dashboard/Components/DonutChartWithTable.tsx
new file mode 100644
index 000000000..18df231b2
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/DonutChartWithTable.tsx
@@ -0,0 +1,155 @@
+import React from 'react';
+import { Card, Typography, Space } from 'antd';
+import ReactApexChart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+
+interface OSDownloadData {
+ type: string; // OS Name
+ value: number; // Count or percentage
+ color: string;
+}
+
+interface DonutChartWithTableProps {
+ title: string;
+ subtitle: string;
+ totalDownloadsLabel: string; // e.g. "Total"
+ totalDownloadsValue: string;
+ chartData: OSDownloadData[];
+ cardStyle?: React.CSSProperties;
+}
+
+const DonutChartWithTable: React.FC = ({
+ title,
+ subtitle,
+ totalDownloadsLabel,
+ totalDownloadsValue,
+ chartData,
+ cardStyle,
+}) => {
+ // Prepare data for ApexCharts
+ const chartSeries = chartData?.map(item => item.value) || [];
+ const chartLabels = chartData?.map(item => item.type) || [];
+ const chartColors = chartData?.map(item => item.color) || [];
+
+ const chartOptions: ApexOptions = {
+ chart: {
+ type: 'donut',
+ height: 230,
+ background: 'transparent',
+ animations: {
+ enabled: false
+ }
+ },
+ labels: chartLabels,
+ colors: chartColors,
+ legend: {
+ show: false
+ },
+ dataLabels: {
+ enabled: false
+ },
+ plotOptions: {
+ pie: {
+ donut: {
+ size: '75%',
+ labels: {
+ show: true,
+ total: {
+ show: true,
+ showAlways: true,
+ label: totalDownloadsLabel,
+ fontSize: '14px',
+ fontWeight: 400,
+ color: '#8c8c8c',
+ formatter: function() {
+ return totalDownloadsValue;
+ }
+ },
+ value: {
+ show: true,
+ fontSize: '28px',
+ fontWeight: 600,
+ color: '#f0f0f0',
+ offsetY: -12
+ },
+ name: {
+ show: false
+ }
+ }
+ }
+ }
+ },
+ stroke: {
+ width: 0
+ },
+ tooltip: {
+ theme: 'dark',
+ style: {
+ fontSize: '12px'
+ },
+ y: {
+ formatter: function(val: number) {
+ return val.toString();
+ }
+ },
+ custom: function({ series, seriesIndex, dataPointIndex, w }) {
+ const label = w.globals.labels[seriesIndex];
+ const value = series[seriesIndex];
+ return `
+ `;
+ }
+ },
+ states: {
+ hover: {
+ filter: {
+ type: 'lighten',
+ value: 0.1
+ }
+ },
+ active: {
+ filter: {
+ type: 'darken',
+ value: 0.1
+ }
+ }
+ }
+ };
+
+ return (
+
+
+ {' '}
+ {/* Adjusted spacing */}
+
+ {title}
+
+
+ {subtitle}
+
+
+
+ );
+};
+
+export default DonutChartWithTable;
diff --git a/client/src/pages/Dashboard/Components/FeaturedAppCard.tsx b/client/src/pages/Dashboard/Components/FeaturedAppCard.tsx
new file mode 100644
index 000000000..a90b76f6d
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/FeaturedAppCard.tsx
@@ -0,0 +1,376 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Card, Typography, Tag, Tooltip } from 'antd';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+
+interface Tip {
+ tagText: string;
+ title: string;
+ description: string;
+ imageUrl?: string;
+ docLink?: string;
+}
+
+interface FeaturedAppCardProps {
+ tips?: Tip[];
+ // Keep backward compatibility
+ tagText?: string;
+ title?: string;
+ description?: string;
+ imageUrl?: string;
+ cardStyle?: React.CSSProperties;
+}
+
+const FeaturedAppCard: React.FC = ({
+ tips,
+ tagText,
+ title,
+ description,
+ imageUrl,
+ cardStyle,
+}) => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [selectedTips, setSelectedTips] = useState([]);
+ const [isTransitioning, setIsTransitioning] = useState(false);
+ const [isPaused, setIsPaused] = useState(false);
+
+ // For backward compatibility, create tips array from individual props if tips not provided
+ const allTips = tips || [{
+ tagText: tagText || 'FEATURED APP',
+ title: title || 'Default Title',
+ description: description || 'Default description',
+ imageUrl: imageUrl || '/assets/images/dashboard/featured-app-image.png',
+ }];
+
+ // Function to get a random background image (bck1 to bck5)
+ const getRandomBackground = () => {
+ const randomNum = Math.floor(Math.random() * 5) + 1;
+ return `/assets/images/dashboard/tips/bck${randomNum}.png`;
+ };
+
+ // Initialize with 3 random tips from the 100
+ useEffect(() => {
+ if (allTips.length > 3) {
+ // Get 3 random tips with random backgrounds
+ const shuffled = [...allTips].sort(() => 0.5 - Math.random());
+ const tipsWithRandomBg = shuffled.slice(0, 3).map(tip => ({
+ ...tip,
+ imageUrl: getRandomBackground()
+ }));
+ setSelectedTips(tipsWithRandomBg);
+ } else {
+ const tipsWithRandomBg = allTips.map(tip => ({
+ ...tip,
+ imageUrl: getRandomBackground()
+ }));
+ setSelectedTips(tipsWithRandomBg);
+ }
+ }, [allTips]);
+
+ const tipsData = selectedTips.length > 0 ? selectedTips : allTips;
+
+ const handlePrevious = useCallback(() => {
+ if (isTransitioning) return;
+ setIsTransitioning(true);
+ setCurrentIndex((prev) => (prev === 0 ? tipsData.length - 1 : prev - 1));
+ setTimeout(() => setIsTransitioning(false), 600);
+ }, [isTransitioning, tipsData.length]);
+
+ const handleNext = useCallback(() => {
+ if (isTransitioning) return;
+ setIsTransitioning(true);
+ setCurrentIndex((prev) => (prev === tipsData.length - 1 ? 0 : prev + 1));
+ setTimeout(() => setIsTransitioning(false), 600);
+ }, [isTransitioning, tipsData.length]);
+
+ const handleDotClick = useCallback((index: number) => {
+ if (isTransitioning || index === currentIndex) return;
+ setIsTransitioning(true);
+ setCurrentIndex(index);
+ setTimeout(() => setIsTransitioning(false), 600);
+ }, [isTransitioning, currentIndex]);
+
+ // Auto-play carousel effect similar to Next.js examples
+ useEffect(() => {
+ if (!isPaused && tipsData.length > 1) {
+ const interval = setInterval(() => {
+ handleNext();
+ }, 4000); // 4 seconds like the Next.js example
+
+ return () => clearInterval(interval);
+ }
+ }, [currentIndex, isPaused, tipsData.length, handleNext]);
+
+ const currentTip = tipsData[currentIndex];
+
+ const handleTipClick = () => {
+ if (currentTip?.docLink) {
+ const event = new CustomEvent('openDocumentation', {
+ detail: { link: currentTip.docLink },
+ });
+ window.dispatchEvent(event);
+ }
+ };
+
+ // Safety check - if no current tip, don't render anything
+ if (!currentTip) {
+ return (
+
+
+ Loading tips...
+
+
+ );
+ }
+
+ return (
+ {
+ e.currentTarget.style.transform = 'translateY(-4px)';
+ e.currentTarget.style.boxShadow = '0 12px 48px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.15)';
+ setIsPaused(true);
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.transform = 'translateY(0)';
+ e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.1)';
+ setIsPaused(false);
+ }}
+ >
+ {/* Sliding Cards Container */}
+
+ {tipsData.map((tip, index) => (
+
+ {/* Background Image */}
+
+
+ {/* Gradient Overlay */}
+
+
+ {/* Content */}
+
{
+ if (tip?.docLink) {
+ const event = new CustomEvent('openDocumentation', {
+ detail: { link: tip.docLink },
+ });
+ window.dispatchEvent(event);
+ }
+ }}
+ >
+
+ {tip?.tagText?.toUpperCase() || 'TIP'}
+
+
+
+ {tip?.title || 'Tip Title'}
+
+
+
+
+ {tip?.description || 'No description available'}
+
+
+
+
+ ))}
+
+ {/* Dots Indicator */}
+
+ {tipsData.map((_, index) => (
+
handleDotClick(index)}
+ />
+ ))}
+
+
+ {/* Chevron Navigation */}
+
+ {
+ e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.2)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.1)';
+ }}
+ >
+
+ {
+ e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.2)';
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.1)';
+ }}
+ >
+
+
+
+ )}
+
+ );
+};
+
+export default FeaturedAppCard;
\ No newline at end of file
diff --git a/client/src/pages/Dashboard/Components/GroupedBarChart.tsx b/client/src/pages/Dashboard/Components/GroupedBarChart.tsx
new file mode 100644
index 000000000..354e9397f
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/GroupedBarChart.tsx
@@ -0,0 +1,524 @@
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import { Card, Typography, Space, Select, Spin, Empty } from 'antd';
+import ReactApexChart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+import {
+ getDashboardDevicesStats,
+ getDashboardAveragedDevicesStats
+} from '@/services/rest/statistics/stastistics';
+import {
+ getContainerStats,
+ getAveragedStats
+} from '@/services/rest/containers/container-statistics';
+import { getAllDevices } from '@/services/rest/devices/devices';
+import { getContainers as getAllContainers } from '@/services/rest/containers/containers';
+import { getTimeDistance } from '@/utils/time';
+import { API, StatsType } from 'ssm-shared-lib';
+import moment from 'moment';
+
+// Static mapping outside component to avoid useCallback dependency issues
+const STATS_TYPE_MAPPING: Record
= {
+ cpu_usage: StatsType.DeviceStatsType.CPU,
+ memory_usage: StatsType.DeviceStatsType.MEM_USED,
+ memory_free: StatsType.DeviceStatsType.MEM_FREE,
+ storage_usage: StatsType.DeviceStatsType.DISK_USED,
+ storage_free: StatsType.DeviceStatsType.DISK_FREE,
+ containers: StatsType.DeviceStatsType.CONTAINERS,
+};
+
+interface VisitEntry {
+ month: string;
+ team: string;
+ visits: number;
+}
+
+interface GroupedBarChartProps {
+ title: string;
+ subtitle: string;
+ // Legacy static props (optional for backward compatibility)
+ chartData?: VisitEntry[];
+ categoryColors?: Record;
+ cardStyle?: React.CSSProperties;
+ // API-driven props
+ dataType?: 'device' | 'container';
+ source?: string | string[];
+ metrics?: string[];
+ dateRangePreset?: string;
+ customDateRange?: [moment.Moment, moment.Moment];
+ isPreview?: boolean;
+}
+
+const GroupedBarChart: React.FC = ({
+ title,
+ subtitle,
+ // Legacy props
+ chartData,
+ categoryColors,
+ cardStyle,
+ // API props
+ dataType = 'device',
+ source = 'all',
+ metrics = ['cpu_usage', 'memory_usage'],
+ dateRangePreset = 'last7days',
+ customDateRange,
+ isPreview = false,
+}) => {
+ const [loading, setLoading] = useState(false);
+ const [graphData, setGraphData] = useState([]);
+ const [currentPeriod, setCurrentPeriod] = useState(dateRangePreset);
+ const [rangePickerValue, setRangePickerValue] = useState(null);
+ const [deviceNameMap, setDeviceNameMap] = useState>({});
+ const [containerNameMap, setContainerNameMap] = useState>({});
+ const [rawApiData, setRawApiData] = useState([]);
+
+ // If legacy chartData is provided, use it instead of API
+ const isLegacyMode = chartData && chartData.length > 0;
+
+ // Convert date range preset to actual dates (stable function)
+ const getDateRangeFromPreset = useCallback((preset: string, customRange?: any) => {
+ if (preset === 'custom' && customRange) {
+ return customRange;
+ }
+
+ switch (preset) {
+ case 'last24hours':
+ return getTimeDistance('today');
+ case 'last7days':
+ return getTimeDistance('week');
+ case 'last30days':
+ return getTimeDistance('month');
+ case 'last3months':
+ return [moment().subtract(3, 'months'), moment()];
+ case 'last6months':
+ return [moment().subtract(6, 'months'), moment()];
+ case 'lastyear':
+ return getTimeDistance('year');
+ default:
+ return getTimeDistance('week');
+ }
+ }, []);
+
+ // Initialize date range only once
+ useEffect(() => {
+ if (!rangePickerValue && !isLegacyMode) {
+ const initialRange = getDateRangeFromPreset(dateRangePreset, customDateRange);
+ setRangePickerValue(initialRange);
+ }
+ }, [dateRangePreset, customDateRange, getDateRangeFromPreset, isLegacyMode]);
+
+
+ // Determine if we're looking at all items or specific ones (memoized)
+ const { isAllSelected, sourceIds } = useMemo(() => {
+ const isAll = Array.isArray(source) ? source.includes('all') : source === 'all';
+ let ids: string[] = [];
+
+ if (Array.isArray(source)) {
+ ids = source.filter(s => s && s !== 'all');
+ } else if (source && source !== 'all') {
+ ids = [source];
+ }
+
+ return { isAllSelected: isAll, sourceIds: ids };
+ }, [source]);
+
+ // Fetch data when dependencies change
+ useEffect(() => {
+ if (rangePickerValue && !isLegacyMode) {
+ if (isPreview) {
+ // Use mock data in preview mode
+ const mockData = Array.from({ length: 6 }, (_, i) => ({
+ name: `device-${i % 2 + 1}`,
+ value: Math.floor(Math.random() * 40) + 30,
+ date: moment().subtract(6 - i, 'months').format('YYYY-MM'),
+ }));
+ setGraphData(mockData);
+ setLoading(false);
+ } else {
+ const fetchData = async () => {
+ setLoading(true);
+ try {
+ if (dataType === 'device') {
+ let deviceIds = sourceIds;
+
+ // If "all" is selected, fetch all device IDs
+ if (isAllSelected) {
+ const devicesResponse = await getAllDevices();
+ const devices = devicesResponse.data || [];
+ deviceIds = devices.map(device => device.uuid);
+
+ // Build device name mapping
+ const nameMap: Record = {};
+ devices.forEach(device => {
+ nameMap[device.uuid] = device.fqdn || device.ip || device.uuid;
+ });
+ setDeviceNameMap(nameMap);
+ } else {
+ // For specific devices, fetch their details to get names
+ const devicesResponse = await getAllDevices();
+ const devices = devicesResponse.data || [];
+ const nameMap: Record = {};
+ devices.forEach(device => {
+ if (sourceIds.includes(device.uuid)) {
+ nameMap[device.uuid] = device.fqdn || device.ip || device.uuid;
+ }
+ });
+ setDeviceNameMap(nameMap);
+ }
+
+ if (deviceIds.length === 0) {
+ setGraphData([]);
+ return;
+ }
+
+ // Use the primary metric for the chart
+ const primaryMetric = metrics[0] || 'cpu_usage';
+ const statsType = STATS_TYPE_MAPPING[primaryMetric] || StatsType.DeviceStatsType.CPU;
+
+ // Fetch data using the same pattern as MainChartCard
+ const deviceStats = await getDashboardDevicesStats(
+ deviceIds as string[],
+ statsType,
+ {
+ from: rangePickerValue[0].toDate(),
+ to: rangePickerValue[1].toDate(),
+ }
+ );
+
+ // Store raw API data for debugging
+ setRawApiData(deviceStats.data || []);
+
+ // Process the data - keep the original structure
+ const processedData = deviceStats.data || [];
+ setGraphData(processedData);
+ }
+ } catch (error) {
+ console.error('Failed to fetch chart data:', error);
+ setGraphData([]);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchData();
+ }
+ }
+ }, [dataType, sourceIds, isAllSelected, metrics, rangePickerValue, isLegacyMode, isPreview]);
+
+ // Legacy data processing for static chartData
+ const legacyProcessedData = useMemo(() => {
+ if (!isLegacyMode || !chartData) return { categories: [], series: [] };
+
+ // Get unique months in order
+ const months = Array.from(new Set(chartData.map(item => item.month)));
+
+ // Get unique teams
+ const teams = Array.from(new Set(chartData.map(item => item.team)));
+
+ // Create series data for each team
+ const seriesData = teams.map(team => {
+ const data = months.map(month => {
+ const entry = chartData.find(item => item.month === month && item.team === team);
+ return entry ? entry.visits : 0;
+ });
+
+ return {
+ name: team,
+ data: data
+ };
+ });
+
+ return {
+ categories: months,
+ series: seriesData
+ };
+ }, [chartData, isLegacyMode]);
+
+ // API data processing - group by device and create monthly aggregations
+ const apiProcessedData = useMemo(() => {
+ if (isLegacyMode || !graphData || graphData.length === 0) return { categories: [], series: [] };
+
+ // Group data by device and aggregate by month
+ const dataByDevice: Record> = {};
+
+ graphData.forEach(stat => {
+ const deviceName = deviceNameMap[stat.name] || stat.name;
+
+ // Parse the custom date format and get month
+ let parsedDate;
+ if (typeof stat.date === 'string' && stat.date.includes('-') && stat.date.split('-').length > 3) {
+ const parts = stat.date.split('-');
+ if (parts.length >= 4) {
+ const dateStr = `${parts[0]}-${parts[1]}-${parts[2]}T${parts[3]}`;
+ parsedDate = moment(dateStr);
+ }
+ } else {
+ parsedDate = moment(stat.date);
+ }
+
+ if (!parsedDate.isValid()) return;
+
+ const monthKey = parsedDate.format('MMM YYYY');
+
+ if (!dataByDevice[deviceName]) {
+ dataByDevice[deviceName] = {};
+ }
+
+ if (!dataByDevice[deviceName][monthKey]) {
+ dataByDevice[deviceName][monthKey] = [];
+ }
+
+ dataByDevice[deviceName][monthKey].push(stat.value || 0);
+ });
+
+ // Get all unique months and sort them
+ const allMonths = new Set();
+ Object.values(dataByDevice).forEach(deviceData => {
+ Object.keys(deviceData).forEach(month => allMonths.add(month));
+ });
+
+ const sortedMonths = Array.from(allMonths).sort((a, b) =>
+ moment(a, 'MMM YYYY').valueOf() - moment(b, 'MMM YYYY').valueOf()
+ );
+
+ // Create series for ApexCharts - average values per month per device
+ const series = Object.entries(dataByDevice).slice(0, 2).map(([deviceName, monthData]) => {
+ const data = sortedMonths.map(month => {
+ const values = monthData[month] || [];
+ return values.length > 0
+ ? values.reduce((sum, val) => sum + val, 0) / values.length
+ : 0;
+ });
+
+ return {
+ name: deviceName,
+ data: data
+ };
+ });
+
+ return {
+ categories: sortedMonths,
+ series: series
+ };
+ }, [graphData, deviceNameMap, isLegacyMode]);
+
+ // Use the appropriate processed data
+ const { categories, series } = isLegacyMode ? legacyProcessedData : apiProcessedData;
+
+ // Handle period changes
+ const handlePeriodChange = useCallback((newPeriod: string) => {
+ setCurrentPeriod(newPeriod);
+ const newRange = getDateRangeFromPreset(newPeriod, customDateRange);
+ setRangePickerValue(newRange);
+ }, [customDateRange, getDateRangeFromPreset]);
+
+ // Period options (stable)
+ const periodOptions = useMemo(() => [
+ { label: 'Last 24 Hours', value: 'last24hours' },
+ { label: 'Last 7 Days', value: 'last7days' },
+ { label: 'Last 30 Days', value: 'last30days' },
+ { label: 'Last 3 Months', value: 'last3months' },
+ { label: 'Last 6 Months', value: 'last6months' },
+ ], []);
+
+ const getMetricLabel = useCallback((metric: string): string => {
+ const labels: Record = {
+ cpu_usage: 'CPU Usage',
+ memory_usage: 'Memory Usage',
+ memory_free: 'Memory Free',
+ storage_usage: 'Storage Usage',
+ storage_free: 'Storage Free',
+ containers: 'Containers',
+ };
+ return labels[metric] || metric;
+ }, []);
+
+ const chartOptions: ApexOptions = {
+ chart: {
+ type: 'bar',
+ height: 300,
+ toolbar: {
+ show: false
+ },
+ background: 'transparent',
+ animations: {
+ enabled: false
+ }
+ },
+ plotOptions: {
+ bar: {
+ horizontal: false,
+ columnWidth: '60%',
+ borderRadius: 4,
+ borderRadiusApplication: 'end',
+ dataLabels: {
+ position: 'top'
+ }
+ }
+ },
+ colors: ['#52c41a', '#faad14'],
+ dataLabels: {
+ enabled: false
+ },
+ stroke: {
+ show: true,
+ width: 2,
+ colors: ['transparent']
+ },
+ xaxis: {
+ categories: categories,
+ labels: {
+ style: {
+ colors: '#8c8c8c',
+ fontSize: '12px'
+ }
+ },
+ axisBorder: {
+ color: '#3a3a3e'
+ },
+ axisTicks: {
+ color: '#3a3a3e'
+ }
+ },
+ yaxis: {
+ max: isLegacyMode ? 80 : (metrics.includes('containers') ? undefined : 100),
+ tickAmount: 4,
+ labels: {
+ style: {
+ colors: '#8c8c8c',
+ fontSize: '11px'
+ },
+ formatter: (value) => {
+ if (isLegacyMode) {
+ return value.toString();
+ }
+ if (metrics.includes('containers')) {
+ return Math.round(value).toString();
+ }
+ return `${value}%`;
+ }
+ }
+ },
+ grid: {
+ borderColor: '#3a3a3e',
+ strokeDashArray: 4,
+ yaxis: {
+ lines: {
+ show: true,
+ opacity: 0.3
+ }
+ },
+ xaxis: {
+ lines: {
+ show: false
+ }
+ }
+ },
+ legend: {
+ show: false
+ },
+ tooltip: {
+ theme: 'dark',
+ shared: true,
+ intersect: false,
+ y: {
+ formatter: function(val: number) {
+ if (isLegacyMode) {
+ return val + ' visits';
+ }
+ if (metrics.includes('containers')) {
+ return Math.round(val).toLocaleString();
+ }
+ return `${val.toFixed(2)}%`;
+ }
+ }
+ },
+ fill: {
+ opacity: 1
+ }
+ };
+
+ return (
+
+ {/* Header with title and period selector */}
+
+
+
+ {title}
+
+
+ {isLegacyMode ? subtitle : metrics.map(m => getMetricLabel(m)).join(' vs ')}
+
+
+ {!isLegacyMode && dateRangePreset !== 'custom' && (
+
+ )}
+
+ {series.map((seriesItem, index) => (
+
+
+
+ {isLegacyMode ? seriesItem.name : seriesItem.name}
+
+
+ ))}
+
+
+
+ {loading ? (
+
+
+ ) : series.length > 0 ? (
+
+ ) : (
+
+ )}
+
+ );
+};
+
+export default GroupedBarChart;
diff --git a/client/src/pages/Dashboard/Components/IFrameWidget.tsx b/client/src/pages/Dashboard/Components/IFrameWidget.tsx
new file mode 100644
index 000000000..c99b119c8
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/IFrameWidget.tsx
@@ -0,0 +1,308 @@
+import React, { useState, useRef } from 'react';
+import { Card, Typography, Button, Input, message, Spin, Alert } from 'antd';
+import { ReloadOutlined, ExpandOutlined, SettingOutlined, LinkOutlined } from '@ant-design/icons';
+
+interface IFrameWidgetProps {
+ title?: string;
+ defaultUrl?: string;
+ allowedDomains?: string[];
+ cardStyle?: React.CSSProperties;
+}
+
+const IFrameWidget: React.FC = ({
+ title = 'External Service',
+ defaultUrl = '',
+ allowedDomains = [],
+ cardStyle,
+}) => {
+ const [url, setUrl] = useState(() => {
+ const savedUrl = localStorage.getItem(`ssm-iframe-url-${title}`);
+ return savedUrl || defaultUrl;
+ });
+ const [inputUrl, setInputUrl] = useState(url);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [showSettings, setShowSettings] = useState(false);
+ const iframeRef = useRef(null);
+
+ // Common monitoring tools and documentation URLs
+ const quickUrls = [
+ { name: 'Grafana', url: 'http://localhost:3000' },
+ { name: 'Prometheus', url: 'http://localhost:9090' },
+ { name: 'Portainer', url: 'http://localhost:9000' },
+ { name: 'Netdata', url: 'http://localhost:19999' },
+ { name: 'Uptime Kuma', url: 'http://localhost:3001' },
+ { name: 'SSM Docs', url: 'https://squirrelserversmanager.io/docs/' },
+ ];
+
+ const isValidUrl = (urlString: string) => {
+ try {
+ const urlObj = new URL(urlString);
+
+ // Check if domain is allowed (if allowedDomains is specified)
+ if (allowedDomains.length > 0) {
+ const hostname = urlObj.hostname;
+ const isAllowed = allowedDomains.some(domain =>
+ hostname === domain || hostname.endsWith(`.${domain}`) || domain === '*'
+ );
+ if (!isAllowed) {
+ setError(`Domain ${hostname} is not in the allowed domains list`);
+ return false;
+ }
+ }
+
+ // Only allow http and https protocols
+ if (!['http:', 'https:'].includes(urlObj.protocol)) {
+ setError('Only HTTP and HTTPS URLs are allowed');
+ return false;
+ }
+
+ return true;
+ } catch {
+ setError('Invalid URL format');
+ return false;
+ }
+ };
+
+ const loadUrl = (newUrl: string) => {
+ if (!newUrl.trim()) {
+ setError('Please enter a URL');
+ return;
+ }
+
+ setError(null);
+
+ if (!isValidUrl(newUrl)) {
+ return;
+ }
+
+ setLoading(true);
+ setUrl(newUrl);
+ setInputUrl(newUrl);
+
+ // Save to localStorage
+ localStorage.setItem(`ssm-iframe-url-${title}`, newUrl);
+
+ // Reset loading state after iframe loads
+ setTimeout(() => setLoading(false), 2000);
+
+ message.success('URL loaded');
+ };
+
+ const reloadIframe = () => {
+ if (iframeRef.current) {
+ setLoading(true);
+ iframeRef.current.src = iframeRef.current.src;
+ setTimeout(() => setLoading(false), 2000);
+ }
+ };
+
+ const openInNewTab = () => {
+ if (url) {
+ window.open(url, '_blank');
+ }
+ };
+
+ const handleIframeLoad = () => {
+ setLoading(false);
+ setError(null);
+ };
+
+ const handleIframeError = () => {
+ setLoading(false);
+ setError('Failed to load the page. Check if the URL is accessible and allows embedding.');
+ };
+
+ return (
+
+
+
+ {title}
+
+
+
+
+
+ Enter URL to embed
+
+
+
+ loadUrl(inputUrl)}
+ size="small"
+ style={{ backgroundColor: '#4ecb71', borderColor: '#4ecb71' }}
+ >
+ Load
+
+
+
+
+ Quick access:
+
+
+ {quickUrls.map((quickUrl) => (
+ {
+ setInputUrl(quickUrl.url);
+ loadUrl(quickUrl.url);
+ }}
+ style={{
+ color: '#4ecb71',
+ fontSize: '11px',
+ height: '24px',
+ padding: '0 8px',
+ }}
+ >
+ {quickUrl.name}
+
+ ))}
+
+
+ {allowedDomains.length > 0 && (
+
+
+ Allowed domains: {allowedDomains.join(', ')}
+
+
+ )}
+
setError(null)}
+ style={{ marginBottom: '16px' }}
+ />
+ )}
+
+
+ {loading && (
+
+
+ )}
+
+ {url ? (
+
+ ) : (
+
+
+ No URL configured
+
+
+ Click the settings icon to add a URL
+
+
+ )}
+
+ {url}
+
+ )}
+
+ );
+};
+
+export default IFrameWidget;
\ No newline at end of file
diff --git a/client/src/pages/Dashboard/Components/LineChart.css b/client/src/pages/Dashboard/Components/LineChart.css
new file mode 100644
index 000000000..879fecc50
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/LineChart.css
@@ -0,0 +1,48 @@
+/* Line chart container - proper width constraints */
+.line-chart-container {
+ position: relative;
+ width: 100% !important;
+ max-width: 100% !important;
+ min-width: 100% !important;
+ overflow: hidden;
+ display: block;
+}
+
+/* Ensure ApexCharts respects container width */
+.line-chart-container .apexcharts-canvas {
+ width: 100% !important;
+ max-width: 100% !important;
+ min-width: 100% !important;
+}
+
+/* Force SVG to fill container */
+.line-chart-container svg {
+ width: 100% !important;
+ max-width: 100% !important;
+ display: block;
+}
+
+/* Ensure the chart wrapper also respects width */
+.line-chart-container > div {
+ width: 100% !important;
+ max-width: 100% !important;
+}
+
+/* Add gradient shadow effect below lines */
+.line-chart-container .apexcharts-line-series path {
+ filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
+}
+
+/* Enhanced shadow for better visibility */
+.line-chart-container .apexcharts-series[seriesName] path {
+ filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2));
+}
+
+/* Specific shadow for green and orange lines */
+.line-chart-container .apexcharts-series path[stroke*="#52c41a"] {
+ filter: drop-shadow(0 8px 16px rgba(82, 196, 26, 0.3));
+}
+
+.line-chart-container .apexcharts-series path[stroke*="#faad14"] {
+ filter: drop-shadow(0 8px 16px rgba(250, 173, 20, 0.3));
+}
\ No newline at end of file
diff --git a/client/src/pages/Dashboard/Components/LineChart.tsx b/client/src/pages/Dashboard/Components/LineChart.tsx
new file mode 100644
index 000000000..cdfb39094
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/LineChart.tsx
@@ -0,0 +1,804 @@
+import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
+import { Card, Typography, Space, Select, Spin, Empty } from 'antd';
+import ReactApexChart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+import {
+ getDashboardDevicesStats,
+ getDashboardAveragedDevicesStats
+} from '@/services/rest/statistics/stastistics';
+import {
+ getContainerStats,
+ getAveragedStats
+} from '@/services/rest/containers/container-statistics';
+import { getAllDevices } from '@/services/rest/devices/devices';
+import { getContainers as getAllContainers } from '@/services/rest/containers/containers';
+import { getTimeDistance } from '@/utils/time';
+import { LoadingOutlined } from '@ant-design/icons';
+import { API, StatsType } from 'ssm-shared-lib';
+import moment from 'moment';
+import './LineChart.css';
+import { useWidgetContext } from './DashboardLayoutEngine/WidgetContext';
+import { useRegisterDebugData } from './DashboardLayoutEngine/DebugDataProvider';
+import DemoOverlay from './DemoOverlay';
+
+// Static mapping outside component to avoid useCallback dependency issues
+const STATS_TYPE_MAPPING: Record = {
+ cpu_usage: StatsType.DeviceStatsType.CPU,
+ memory_usage: StatsType.DeviceStatsType.MEM_USED,
+ memory_free: StatsType.DeviceStatsType.MEM_FREE,
+ storage_usage: StatsType.DeviceStatsType.DISK_USED,
+ storage_free: StatsType.DeviceStatsType.DISK_FREE,
+ containers: StatsType.DeviceStatsType.CONTAINERS,
+};
+
+interface LineChartProps {
+ title: string;
+ cardStyle?: React.CSSProperties;
+ // API-driven props
+ dataType?: 'device' | 'container';
+ source?: string | string[];
+ metrics?: string[];
+ dateRangePreset?: string;
+ customDateRange?: [moment.Moment, moment.Moment];
+ isPreview?: boolean; // Add flag to prevent data fetching in preview mode
+ colorPalette?: string;
+ customColors?: string[];
+}
+
+const LineChart: React.FC = ({
+ title,
+ cardStyle,
+ // API props
+ dataType = 'device',
+ source = 'all',
+ metrics = ['cpu_usage', 'memory_usage'],
+ dateRangePreset = 'last7days',
+ customDateRange,
+ isPreview = false,
+ colorPalette = 'default',
+ customColors = [],
+}) => {
+ console.log('🎨 LineChart received props:', { colorPalette, customColors });
+ const [loading, setLoading] = useState(false);
+ const [graphData, setGraphData] = useState([]);
+ const [currentPeriod, setCurrentPeriod] = useState(dateRangePreset);
+ const [rangePickerValue, setRangePickerValue] = useState(null);
+ const [deviceNameMap, setDeviceNameMap] = useState>({});
+ const [containerNameMap, setContainerNameMap] = useState>({});
+ const [chartDimensions, setChartDimensions] = useState({ width: '100%', height: 300 });
+ const [forceRerender, setForceRerender] = useState(0);
+ const [isUsingMockData, setIsUsingMockData] = useState(false);
+ const chartContainerRef = useRef(null);
+ const chartRef = useRef(null);
+
+ // Get widget context and debug registration
+ const widgetContext = useWidgetContext();
+ const updateDebugData = useRegisterDebugData(widgetContext?.widgetId);
+
+
+ // Convert date range preset to actual dates (stable function)
+ const getDateRangeFromPreset = useCallback((preset: string, customRange?: any) => {
+ if (preset === 'custom' && customRange) {
+ return customRange;
+ }
+
+ switch (preset) {
+ case 'last24hours':
+ return getTimeDistance('today');
+ case 'last7days':
+ return getTimeDistance('week');
+ case 'last30days':
+ return getTimeDistance('month');
+ case 'last3months':
+ return [moment().subtract(3, 'months'), moment()];
+ case 'last6months':
+ return [moment().subtract(6, 'months'), moment()];
+ case 'lastyear':
+ return getTimeDistance('year');
+ default:
+ return getTimeDistance('week');
+ }
+ }, []);
+
+ // Initialize date range only once
+ useEffect(() => {
+ if (!rangePickerValue) {
+ const initialRange = getDateRangeFromPreset(dateRangePreset, customDateRange);
+ setRangePickerValue(initialRange);
+ }
+ }, [dateRangePreset, customDateRange, getDateRangeFromPreset]);
+
+ // Set up resize observer to handle container size changes
+ useEffect(() => {
+ if (!chartContainerRef.current) return;
+
+ const container = chartContainerRef.current;
+
+ // ResizeObserver for size changes
+ const resizeObserver = new ResizeObserver((entries) => {
+ for (const entry of entries) {
+ const { width } = entry.contentRect;
+ if (width > 0 && chartRef.current) {
+ console.log('📐 LineChart: Container resized to width:', width);
+ // Update ApexCharts dimensions
+ chartRef.current.updateOptions({
+ chart: {
+ width: width,
+ height: 300
+ }
+ }, false, false);
+ }
+ }
+ });
+
+ // MutationObserver to detect when chart is added to DOM
+ const mutationObserver = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ if (mutation.type === 'childList' && chartRef.current) {
+ const containerWidth = container.offsetWidth;
+ if (containerWidth > 0) {
+ console.log('📐 LineChart: DOM mutation detected, resizing to:', containerWidth);
+ chartRef.current.updateOptions({
+ chart: {
+ width: containerWidth,
+ height: 300
+ }
+ }, false, true);
+ }
+ }
+ });
+ });
+
+ resizeObserver.observe(container);
+ mutationObserver.observe(container, { childList: true, subtree: true });
+
+ return () => {
+ resizeObserver.disconnect();
+ mutationObserver.disconnect();
+ };
+ }, []);
+
+ // Force chart resize on mount and data changes
+ useEffect(() => {
+ if (chartRef.current && chartContainerRef.current && chartSeries.length > 0) {
+ // Multiple resize attempts to ensure proper width
+ const resizeChart = () => {
+ const containerWidth = chartContainerRef.current?.offsetWidth;
+ if (containerWidth && containerWidth > 0 && chartRef.current) {
+ console.log('📐 LineChart: Forcing resize to width:', containerWidth);
+ // Force complete chart re-render with new dimensions
+ chartRef.current.updateOptions({
+ chart: {
+ width: containerWidth,
+ height: 300
+ }
+ }, false, true);
+
+ // Also trigger window resize event as a fallback
+ window.dispatchEvent(new Event('resize'));
+ }
+ };
+
+ // Try multiple times to ensure the container has settled
+ const timers = [
+ setTimeout(resizeChart, 0),
+ setTimeout(resizeChart, 100),
+ setTimeout(resizeChart, 300),
+ setTimeout(resizeChart, 500),
+ ];
+
+ return () => {
+ timers.forEach(timer => clearTimeout(timer));
+ };
+ }
+ }, [chartSeries]);
+
+ // Handle page visibility changes (fixes reload width issues)
+ useEffect(() => {
+ const handleVisibilityChange = () => {
+ if (!document.hidden && chartRef.current && chartContainerRef.current) {
+ // Page became visible, force chart resize
+ setTimeout(() => {
+ const containerWidth = chartContainerRef.current?.offsetWidth;
+ if (containerWidth && containerWidth > 0) {
+ console.log('📐 LineChart: Page visibility change, resizing to:', containerWidth);
+ chartRef.current.updateOptions({
+ chart: {
+ width: containerWidth,
+ height: 300
+ }
+ }, false, true);
+
+ // Force rerender as last resort
+ setForceRerender(prev => prev + 1);
+ }
+ }, 200);
+ }
+ };
+
+ document.addEventListener('visibilitychange', handleVisibilityChange);
+ window.addEventListener('focus', handleVisibilityChange);
+
+ return () => {
+ document.removeEventListener('visibilitychange', handleVisibilityChange);
+ window.removeEventListener('focus', handleVisibilityChange);
+ };
+ }, []);
+
+
+ // Determine if we're looking at all items or specific ones (memoized)
+ const { isAllSelected, sourceIds } = useMemo(() => {
+ const isAll = Array.isArray(source) ? source.includes('all') : source === 'all';
+ let ids: string[] = [];
+
+ if (Array.isArray(source)) {
+ ids = source.filter(s => s && s !== 'all');
+ } else if (source && source !== 'all') {
+ ids = [source];
+ }
+
+ return { isAllSelected: isAll, sourceIds: ids };
+ }, [source]);
+
+ // Memoize metrics array to prevent unnecessary re-renders
+ const memoizedMetrics = useMemo(() => metrics, [JSON.stringify(metrics)]);
+
+ // Create stable string representation for date range to prevent infinite loops
+ const rangePickerKey = useMemo(() => {
+ if (!rangePickerValue) return null;
+ return `${rangePickerValue[0]?.toISOString()}-${rangePickerValue[1]?.toISOString()}`;
+ }, [rangePickerValue]);
+
+ // Fetch data when dependencies change
+ useEffect(() => {
+ console.log('🔄 LineChart useEffect triggered with dependencies:', {
+ dataType,
+ sourceIds,
+ isAllSelected,
+ memoizedMetrics,
+ rangePickerKey: rangePickerKey ? 'exists' : 'null',
+ isPreview
+ });
+
+ if (rangePickerValue && rangePickerKey) {
+ if (isPreview) {
+ console.log('📊 Using mock data in preview mode');
+ // Use mock data in preview mode
+ const mockData = Array.from({ length: 20 }, (_, i) => ({
+ name: `device-${i % 2 + 1}`,
+ value: Math.floor(Math.random() * 40) + 30,
+ date: moment().subtract(20 - i, 'hours').toISOString(),
+ }));
+ setGraphData(mockData);
+ setIsUsingMockData(true);
+ setLoading(false);
+ } else {
+ console.log('🌐 Starting data fetch for LineChart');
+ const fetchData = async () => {
+ console.log('⏳ Setting loading to true');
+ setLoading(true);
+
+ // Reset mock data flag when fetching real data
+ setIsUsingMockData(false);
+
+ const apiResponses: Record = {};
+ try {
+ if (dataType === 'device') {
+ console.log('🖥️ Processing device data type');
+ let deviceIds = sourceIds;
+
+ // If "all" is selected, fetch all device IDs
+ if (isAllSelected) {
+ console.log('📊 LineChart API Call: getAllDevices', {
+ component: 'LineChart',
+ title,
+ timestamp: new Date().toISOString()
+ });
+ const devicesResponse = await getAllDevices();
+ apiResponses.devices = devicesResponse;
+ const devices = devicesResponse.data || [];
+ deviceIds = devices.map(device => device.uuid);
+ console.log('📊 LineChart API Response: getAllDevices', {
+ component: 'LineChart',
+ title,
+ deviceCount: devices.length,
+ deviceIds,
+ timestamp: new Date().toISOString()
+ });
+
+ // Build device name mapping
+ const nameMap: Record = {};
+ devices.forEach(device => {
+ nameMap[device.uuid] = device.fqdn || device.ip || device.uuid;
+ });
+ console.log('🏷️ Setting device name map:', nameMap);
+ setDeviceNameMap(nameMap);
+ } else {
+ // For specific devices, fetch their details to get names
+ const devicesResponse = await getAllDevices();
+ const devices = devicesResponse.data || [];
+ const nameMap: Record = {};
+ devices.forEach(device => {
+ if (sourceIds.includes(device.uuid)) {
+ nameMap[device.uuid] = device.fqdn || device.ip || device.uuid;
+ }
+ });
+ setDeviceNameMap(nameMap);
+ }
+
+ if (deviceIds.length === 0) {
+ setGraphData([]);
+ return;
+ }
+
+ // Use the primary metric for the chart (following MainChartCard pattern)
+ const primaryMetric = memoizedMetrics[0] || 'cpu_usage';
+ const statsType = STATS_TYPE_MAPPING[primaryMetric] || StatsType.DeviceStatsType.CPU;
+ console.log(`📊 Using metric: ${primaryMetric}, statsType: ${statsType}`);
+
+ // Fetch data using the same pattern as MainChartCard
+ console.log('📊 LineChart API Call: getDashboardDevicesStats', {
+ component: 'LineChart',
+ title,
+ deviceIds,
+ statsType,
+ metric: primaryMetric,
+ dateRange: {
+ from: rangePickerValue[0].toDate(),
+ to: rangePickerValue[1].toDate()
+ },
+ timestamp: new Date().toISOString()
+ });
+
+ const deviceStats = await getDashboardDevicesStats(
+ deviceIds as string[],
+ statsType,
+ {
+ from: rangePickerValue[0].toDate(),
+ to: rangePickerValue[1].toDate(),
+ }
+ );
+
+ apiResponses.deviceStats = deviceStats;
+
+ console.log('📊 LineChart API Response: getDashboardDevicesStats', {
+ component: 'LineChart',
+ title,
+ dataLength: deviceStats.data?.length || 0,
+ rawData: deviceStats.data,
+ timestamp: new Date().toISOString()
+ });
+ // Process the data - keep the original structure
+ const processedData = deviceStats.data || [];
+ console.log('💾 Setting graph data:', processedData);
+ setGraphData(processedData);
+
+ // Update debug data
+ if (updateDebugData) {
+ updateDebugData({
+ componentName: 'LineChart',
+ fileName: 'LineChart.tsx',
+ rawApiData: {
+ apiCalls: {
+ source,
+ isAllSelected,
+ sourceIds,
+ getAllDevices: isAllSelected ? {
+ method: 'GET',
+ endpoint: '/api/devices'
+ } : null,
+ getDashboardDevicesStats: {
+ method: 'POST',
+ endpoint: `/api/statistics/dashboard/stats/${primaryMetric}`,
+ params: {
+ from: rangePickerValue[0].toDate(),
+ to: rangePickerValue[1].toDate()
+ },
+ body: {
+ devices: deviceIds,
+ statsType
+ }
+ }
+ },
+ responses: apiResponses
+ } as Record,
+ processedData: {
+ graphData: processedData,
+ deviceCount: deviceIds.length,
+ dateRange: {
+ from: rangePickerValue[0].toISOString(),
+ to: rangePickerValue[1].toISOString()
+ }
+ } as Record,
+ config: {
+ dataType,
+ source,
+ metrics: memoizedMetrics,
+ dateRangePreset,
+ colorPalette
+ } as Record
+ });
+ }
+ } else if (dataType === 'container') {
+ // For containers, we'll need to adapt the data format to match API.DeviceStat
+ let containerIds = sourceIds;
+
+ if (isAllSelected) {
+ const containersResponse = await getAllContainers();
+ const containers = containersResponse.data || [];
+ containerIds = containers.map(container => container.id);
+
+ // Build container name mapping
+ const nameMap: Record = {};
+ containers.forEach(container => {
+ nameMap[container.id] = container.customName || container.name || container.id;
+ });
+ setContainerNameMap(nameMap);
+ } else {
+ // For specific containers, fetch their details to get names
+ const containersResponse = await getAllContainers();
+ const containers = containersResponse.data || [];
+ const nameMap: Record = {};
+ containers.forEach(container => {
+ if (sourceIds.includes(container.id)) {
+ nameMap[container.id] = container.customName || container.name || container.id;
+ }
+ });
+ setContainerNameMap(nameMap);
+ }
+
+ if (containerIds.length === 0) {
+ setGraphData([]);
+ return;
+ }
+
+ // For now, we'll use a simplified approach for containers
+ // This can be expanded to use container-specific APIs
+ setGraphData([]);
+ }
+ } catch (error) {
+ console.error('Failed to fetch chart data:', error);
+ setGraphData([]);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchData();
+ }
+ }
+ }, [dataType, sourceIds, isAllSelected, memoizedMetrics, rangePickerKey, isPreview]);
+
+ const getMetricLabel = useCallback((metric: string): string => {
+ const labels: Record = {
+ cpu_usage: 'CPU Usage',
+ memory_usage: 'Memory Usage',
+ memory_free: 'Memory Free',
+ storage_usage: 'Storage Usage',
+ storage_free: 'Storage Free',
+ containers: 'Containers',
+ container_cpu_usage: 'CPU Usage',
+ container_memory_usage: 'Memory Usage',
+ };
+ return labels[metric] || metric;
+ }, []);
+
+ // Process data for charts - separate by device
+ const processedChartData = useMemo(() => {
+ if (!graphData || graphData.length === 0) return {};
+
+ // Group data by device
+ const dataByDevice: Record> = {};
+
+ // First, get all unique device names
+ const deviceNames = new Set();
+ graphData.forEach(stat => {
+ const deviceName = deviceNameMap[stat.name] || stat.name;
+ deviceNames.add(deviceName);
+ });
+
+ // Initialize empty arrays for each device
+ deviceNames.forEach(deviceName => {
+ dataByDevice[deviceName] = [];
+ });
+
+ // Sort all data by date first to ensure consistent indexing
+ const sortedData = [...graphData].sort((a, b) =>
+ new Date(a.date).getTime() - new Date(b.date).getTime()
+ );
+
+ // Get unique dates for consistent indexing across devices
+ const uniqueDates = Array.from(new Set(sortedData.map(stat => stat.date)));
+
+ // Populate data for each device with consistent indexing
+ deviceNames.forEach(deviceName => {
+ uniqueDates.forEach((date, index) => {
+ const stat = sortedData.find(s =>
+ s.date === date && (deviceNameMap[s.name] || s.name) === deviceName
+ );
+ if (stat) {
+ dataByDevice[deviceName].push({
+ value: stat.value || 0,
+ index: index,
+ date: stat.date
+ });
+ }
+ });
+ });
+
+ return dataByDevice;
+ }, [graphData, deviceNameMap]);
+
+ // Handle period changes
+ const handlePeriodChange = useCallback((newPeriod: string) => {
+ setCurrentPeriod(newPeriod);
+ const newRange = getDateRangeFromPreset(newPeriod, customDateRange);
+ setRangePickerValue(newRange);
+ }, [customDateRange, getDateRangeFromPreset]);
+
+ // Color palette logic
+ const getChartColors = useCallback(() => {
+ if (customColors && customColors.length > 0) {
+ return customColors;
+ }
+
+ const colorPalettes = {
+ default: ['#52c41a', '#faad14', '#40a9ff', '#ff4d4f', '#722ed1'],
+ vibrant: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#6c5ce7'],
+ cool: ['#74b9ff', '#0984e3', '#6c5ce7', '#a29bfe', '#fd79a8'],
+ warm: ['#fd79a8', '#fdcb6e', '#e84393', '#fd79a8', '#ffeaa7'],
+ nature: ['#00b894', '#55a3ff', '#fd79a8', '#fdcb6e', '#74b9ff'],
+ };
+
+ return colorPalettes[colorPalette] || colorPalettes.default;
+ }, [colorPalette, customColors]);
+
+ // Period options (stable)
+ const periodOptions = useMemo(() => [
+ { label: 'Last 24 Hours', value: 'last24hours' },
+ { label: 'Last 7 Days', value: 'last7days' },
+ { label: 'Last 30 Days', value: 'last30days' },
+ { label: 'Last 3 Months', value: 'last3months' },
+ ], []);
+
+ // Generate stable mock data for preview mode
+ const mockData = useMemo(() => {
+ if (isPreview) {
+ return [
+ {
+ name: 'Device 1',
+ data: Array.from({ length: 20 }, (_, i) => ({
+ x: new Date(Date.now() - (20 - i) * 3600000).toISOString(),
+ y: 30 + (i * 2) + Math.sin(i * 0.5) * 10 // Stable deterministic data
+ }))
+ },
+ {
+ name: 'Device 2',
+ data: Array.from({ length: 20 }, (_, i) => ({
+ x: new Date(Date.now() - (20 - i) * 3600000).toISOString(),
+ y: 50 + (i * 1.5) + Math.cos(i * 0.3) * 8 // Stable deterministic data
+ }))
+ }
+ ];
+ }
+ return [];
+ }, [isPreview]);
+
+ // Prepare data for ApexCharts
+ const chartSeries = useMemo(() => {
+ if (isPreview) {
+ console.log('📊 LineChart using mockData:', mockData);
+ return mockData;
+ }
+
+ if (Object.keys(processedChartData).length === 0) {
+ console.log('⚠️ LineChart: No processed chart data available');
+ return [];
+ }
+
+ const series = Object.entries(processedChartData).slice(0, 2).map((entry, index) => {
+ const [deviceName, data] = entry;
+ return {
+ name: deviceName,
+ data: data.map(point => ({
+ x: point.date,
+ y: point.value
+ }))
+ };
+ });
+
+ console.log('📈 LineChart series data:', series);
+ return series;
+ }, [processedChartData, isPreview, mockData]);
+
+ const chartOptions: ApexOptions = useMemo(() => {
+ const colors = getChartColors();
+ console.log('🎨 Chart colors for palette:', colorPalette, '→', colors);
+
+ const options: ApexOptions = {
+ chart: {
+ type: 'area',
+ height: 300,
+ toolbar: { show: false },
+ background: 'transparent',
+ dropShadow: {
+ enabled: false
+ },
+ redrawOnParentResize: true,
+ redrawOnWindowResize: true
+ },
+ stroke: {
+ width: 2.5,
+ curve: 'smooth',
+ lineCap: 'round'
+ },
+ colors: colors,
+ dataLabels: {
+ enabled: false
+ },
+ markers: {
+ size: 0,
+ strokeWidth: 3,
+ hover: {
+ size: 6
+ }
+ },
+ xaxis: {
+ type: 'datetime',
+ labels: {
+ style: {
+ colors: '#8c8c8c',
+ fontSize: '12px'
+ }
+ },
+ axisBorder: {
+ show: false
+ },
+ axisTicks: {
+ show: false
+ }
+ },
+ yaxis: {
+ labels: {
+ style: {
+ colors: '#8c8c8c',
+ fontSize: '12px'
+ },
+ formatter: function(val) {
+ if (memoizedMetrics.includes('containers')) {
+ return Math.round(val).toLocaleString();
+ }
+ return val.toFixed(1) + '%';
+ }
+ }
+ },
+ grid: {
+ borderColor: '#3a3a3e',
+ strokeDashArray: 3
+ },
+ legend: {
+ show: false
+ },
+ tooltip: {
+ theme: 'dark'
+ },
+ fill: {
+ opacity: 1,
+ gradient: {
+ type: 'vertical',
+ shadeIntensity: 0,
+ opacityFrom: 0.4,
+ opacityTo: 0,
+ stops: [0, 100]
+ }
+ }
+ };
+
+ console.log('⚙️ Final chart options:', options);
+ return options;
+ }, [memoizedMetrics, getChartColors, colorPalette, customColors]);
+
+ return (
+
+
+
+
+ {title}
+
+
+ {memoizedMetrics.map(m => getMetricLabel(m)).join(' vs ')}
+
+
+ {dateRangePreset !== 'custom' && (
+
+ )}
+
+ {/* Legend */}
+
+ {Object.entries(processedChartData).slice(0, 2).map((entry, index) => {
+ const [deviceName, data] = entry;
+ const lastValue = data.length > 0 ? data[data.length - 1]?.value || 0 : 0;
+ const valueStr = memoizedMetrics.includes('containers')
+ ? Math.round(lastValue).toLocaleString()
+ : `${lastValue.toFixed(1)}%`;
+
+ const chartColors = getChartColors();
+ const currentColor = chartColors[index] || chartColors[0];
+
+ return (
+
+
+
+
+ {valueStr}
+
+
+ {deviceName}
+
+
+
+
+ {/* Charts */}
+
+ {loading ? (
+
+
+ ) : chartSeries.length > 0 ? (
+
+ ) : (
+
+ )}
+
+
+ );
+};
+
+export default LineChart;
\ No newline at end of file
diff --git a/client/src/pages/Dashboard/Components/MainChartCard.tsx b/client/src/pages/Dashboard/Components/MainChartCard.tsx
deleted file mode 100644
index 19c323bca..000000000
--- a/client/src/pages/Dashboard/Components/MainChartCard.tsx
+++ /dev/null
@@ -1,395 +0,0 @@
-import {
- getDashboardAveragedDevicesStats,
- getDashboardDevicesStats,
-} from '@/services/rest/statistics/stastistics';
-import Devicestatus from '@/utils/devicestatus';
-import { getTimeDistance } from '@/utils/time';
-import { LoadingOutlined } from '@ant-design/icons';
-import { Line, LineConfig } from '@ant-design/charts';
-import { useModel } from '@umijs/max';
-import {
- Card,
- Col,
- DatePicker,
- Flex,
- Row,
- Select,
- Tabs,
- TabsProps,
- Typography,
-} from 'antd';
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
-import { API, StatsType } from 'ssm-shared-lib';
-import styles from '../Analysis.less';
-
-const { RangePicker } = DatePicker;
-
-const MainChartCard: React.FC = () => {
- const { initialState } = useModel('@@initialState');
- const { currentUser }: { currentUser?: API.CurrentUser } = initialState || {};
-
- const [loading, setLoading] = useState(false);
- const [graphData, setGraphData] = useState([]);
- const [graphMemData, setGraphMemData] = useState<
- API.DeviceStat[] | undefined
- >([]);
- const [graphStorageData, setGraphStorageData] = useState<
- API.DeviceStat[] | undefined
- >([]);
-
- const [topTenData, setTopTenData] = useState<
- { name: string; value: number }[] | undefined
- >([]);
- const [devices, setDevices] = useState(
- currentUser?.devices?.overview
- ?.filter((e) => e.status !== Devicestatus.UNMANAGED)
- .map((e) => e.uuid) || [],
- );
- const [type, setType] = useState(
- StatsType.DeviceStatsType.CPU,
- );
- const [rangePickerValue, setRangePickerValue] = useState(
- getTimeDistance('year'),
- );
-
- const isActive = useCallback(
- (dateType: string) => {
- const value = getTimeDistance(dateType);
- if (!rangePickerValue[0] || !rangePickerValue[1]) {
- return '';
- }
- if (
- rangePickerValue[0].isSame(value[0], 'day') &&
- rangePickerValue[1].isSame(value[1], 'day')
- ) {
- return styles.currentDate;
- }
- return '';
- },
- [rangePickerValue],
- );
-
- const handleRangePickerChange = useCallback((dates: any) => {
- setRangePickerValue(dates);
- }, []);
-
- const selectDate = useCallback((dateType: string) => {
- setRangePickerValue(getTimeDistance(dateType));
- }, []);
-
- const fetchData = useCallback(async () => {
- setLoading(true);
- try {
- if (devices.length > 0) {
- setGraphData(undefined);
- setGraphMemData(undefined);
- setGraphStorageData(undefined);
- setTopTenData(undefined);
- const [deviceStats, averagedDeviceStats] = await Promise.all([
- getDashboardDevicesStats(devices as string[], type, {
- from: rangePickerValue[0].toDate(),
- to: rangePickerValue[1].toDate(),
- }),
- getDashboardAveragedDevicesStats(devices as string[], type, {
- from: rangePickerValue[0].toDate(),
- to: rangePickerValue[1].toDate(),
- }),
- ]);
- console.log(deviceStats.data);
- switch (type) {
- case StatsType.DeviceStatsType.CPU:
- setGraphData(deviceStats.data);
- setTopTenData(averagedDeviceStats.data);
- break;
- case StatsType.DeviceStatsType.MEM_USED:
- setGraphMemData(deviceStats.data);
- setTopTenData(averagedDeviceStats.data);
- break;
- case StatsType.DeviceStatsType.DISK_USED:
- setGraphStorageData(deviceStats.data);
- setTopTenData(averagedDeviceStats.data);
- break;
- }
- }
- } catch (error) {
- console.error('Failed to fetch data:', error);
- } finally {
- setLoading(false);
- }
- }, [devices, type, rangePickerValue]);
-
- useEffect(() => {
- void fetchData();
- }, [fetchData]);
-
- const cpuConfig: LineConfig = useMemo(
- () => ({
- data: graphData,
- loading,
- animate: { enter: { type: 'waveIn' } },
- theme: {
- view: {
- viewFill: 'rgba(255,255,255,0.00)',
- },
- },
- loadingTemplate: (
-
-
- ),
- xField: 'date',
- yField: 'value',
- colorField: 'name',
- seriesField: 'name',
- xAxis: {
- type: 'time',
- },
- legend: {
- color: {
- itemLabelFill: '#fff',
- },
- },
- axis: {
- x: {
- labelFill: '#fff',
- },
- y: {
- labelFill: '#fff',
- labelFormatter: (v: any) => `${parseFloat(v)?.toFixed(2)}%`,
- },
- },
- tooltip: {
- channel: 'y',
- valueFormatter: (d: string) => `${parseFloat(d)?.toFixed(2)}%`,
- },
- yAxis: {
- label: {
- formatter: (v: number) => `${v?.toFixed(2)}%`,
- },
- },
- }),
- [graphData, loading],
- );
-
- const memConfig = useMemo(
- () => ({
- ...cpuConfig,
- data: graphMemData,
- // Customize further if needed
- }),
- [graphMemData, loading],
- );
-
- const storageConfig = useMemo(
- () => ({
- ...cpuConfig,
- data: graphStorageData,
- // Customize further if needed
- }),
- [graphStorageData, loading],
- );
-
- const handleTabChange = (key: string) => {
- setType(key as StatsType.DeviceStatsType);
- };
-
- const items: TabsProps['items'] = useMemo(
- () => [
- {
- key: StatsType.DeviceStatsType.CPU,
- label: 'CPU',
- children: (
-
-
-
-
-
-
- CPU Usage % Average Ranking
-
-
- {topTenData?.slice(0, 10).map((item, i) => (
-
-
- {i + 1}
-
-
- {item.name}
-
-
- {item.value?.toFixed(2)}%
-
-
- ))}
-
-
- ),
- },
- {
- key: StatsType.DeviceStatsType.MEM_USED,
- label: 'MEM',
- children: (
-
-
-
-
-
-
- Memory Usage % Average Ranking
-
-
- {topTenData?.slice(0, 10).map((item, i) => (
-
-
- {i + 1}
-
-
- {item.name}
-
-
- {item.value?.toFixed(2)}%
-
-
- ))}
-
-
- ),
- },
- {
- key: StatsType.DeviceStatsType.DISK_USED,
- label: 'DISK',
- children: (
-
-
-
-
-
-
- Disk Usage % Average Ranking
-
-
- {topTenData?.slice(0, 10).map((item, i) => (
-
-
- {i + 1}
-
-
- {item.name}
-
-
- {item.value?.toFixed(2)}%
-
-
- ))}
-
-
- ),
- },
- ],
- [cpuConfig, memConfig, storageConfig, topTenData],
- );
-
- const tabBarExtra = useMemo(
- () => (
-
-
-
-
e.status !== Devicestatus.UNMANAGED)
- .map((e) => ({
- value: e.uuid,
- label: e.name,
- }))}
- onChange={setDevices}
- />
-
-
-
-
- );
-};
-
-export default React.memo(MainChartCard);
diff --git a/client/src/pages/Dashboard/Components/MaintenanceCalendar.tsx b/client/src/pages/Dashboard/Components/MaintenanceCalendar.tsx
new file mode 100644
index 000000000..068849349
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/MaintenanceCalendar.tsx
@@ -0,0 +1,559 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Typography, Calendar, Badge, Modal, Space, Button, Form, Input, Select, DatePicker, TimePicker, message, List, Tag } from 'antd';
+import {
+ PlusOutlined,
+ CalendarOutlined,
+ ToolOutlined,
+ DatabaseOutlined,
+ SecurityScanOutlined,
+ CloudUploadOutlined,
+ EditOutlined,
+ DeleteOutlined,
+ BellOutlined
+} from '@ant-design/icons';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+
+interface MaintenanceTask {
+ id: string;
+ title: string;
+ description: string;
+ type: 'maintenance' | 'backup' | 'update' | 'security' | 'deployment';
+ date: Dayjs;
+ startTime: Dayjs;
+ endTime: Dayjs;
+ status: 'scheduled' | 'in-progress' | 'completed' | 'cancelled';
+ assignee?: string;
+ servers: string[];
+ priority: 'low' | 'medium' | 'high' | 'critical';
+ recurrence?: 'none' | 'daily' | 'weekly' | 'monthly';
+ reminder?: boolean;
+}
+
+interface MaintenanceCalendarProps {
+ title?: string;
+ cardStyle?: React.CSSProperties;
+}
+
+const MaintenanceCalendar: React.FC = ({
+ title = 'Maintenance Calendar',
+ cardStyle,
+}) => {
+ const [tasks, setTasks] = useState([]);
+ const [selectedDate, setSelectedDate] = useState(dayjs());
+ const [showModal, setShowModal] = useState(false);
+ const [editingTask, setEditingTask] = useState(null);
+ const [viewMode, setViewMode] = useState<'calendar' | 'list'>('calendar');
+ const [form] = Form.useForm();
+
+ const taskTypes = [
+ { value: 'maintenance', label: 'System Maintenance', icon:
+ {dayTasks.slice(0, 2).map(task => {
+ const taskType = taskTypes.find(t => t.value === task.type);
+ return (
+
+ {task.title}
+
+ );
+ })}
+ {dayTasks.length > 2 && (
+
+ +{dayTasks.length - 2} more
+
+ )}
+
+
+
+ 📅 {title}
+
+
+ setViewMode('calendar')}
+ style={{ color: viewMode === 'calendar' ? 'white' : '#8c8c8c' }}
+ >
+ Calendar
+
+ setViewMode('list')}
+ style={{ color: viewMode === 'list' ? 'white' : '#8c8c8c' }}
+ >
+ List
+
+
+
+
+
+ {viewMode === 'calendar' ? (
+
+
+
+ {selectedDateTasks.length > 0 && (
+
+
+ Tasks for {selectedDate.format('MMMM D, YYYY')}:
+
+ {selectedDateTasks.map(task => {
+ const taskType = taskTypes.find(t => t.value === task.type);
+ return (
+
+
+
+ {taskType?.icon}
+
+ {task.title}
+
+
+ {task.priority}
+
+
+
+ {task.startTime.format('HH:mm')} - {task.endTime.format('HH:mm')}
+
+
+
+ );
+ })}
+
+ )}
+
+ ) : (
+
+
+ Upcoming Tasks ({upcomingTasks.length})
+
+
{
+ const taskType = taskTypes.find(t => t.value === task.type);
+ return (
+
+
+
+
+
+ {taskType?.icon}
+
+ {task.title}
+
+
+ {task.priority}
+
+
+
+ {task.description}
+
+
+
+
+
+
+
+ {task.date.format('MMM D')} • {task.startTime.format('HH:mm')} - {task.endTime.format('HH:mm')}
+
+ {task.reminder && (
+
+
+ );
+ }}
+ />
+
+ )}
+
+ {tasks.length} total tasks • {upcomingTasks.length} upcoming
+
+
+
+ {/* Add/Edit Task Modal */}
+ setShowModal(false)}
+ width={600}
+ >
+
+
+
+ );
+};
+
+export default MaintenanceCalendar;
\ No newline at end of file
diff --git a/client/src/pages/Dashboard/Components/MetricCardWithMiniLineChart.tsx b/client/src/pages/Dashboard/Components/MetricCardWithMiniLineChart.tsx
new file mode 100644
index 000000000..c9b464e69
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/MetricCardWithMiniLineChart.tsx
@@ -0,0 +1,914 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { Card, Typography, Space } from 'antd';
+import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
+import ReactApexChart from 'react-apexcharts';
+import type { ApexOptions } from 'apexcharts';
+import { WIDGET_TYPOGRAPHY, WIDGET_CARD, WIDGET_COLORS } from '../constants/widgetStyles';
+import {
+ getDashboardDevicesStats,
+ getDeviceStat,
+ getDashboardAveragedDevicesStats,
+ getDashboardSystemPerformance
+} from '@/services/rest/statistics/stastistics';
+import {
+ getContainerStat,
+ getContainerStats,
+ getAveragedStats
+} from '@/services/rest/containers/container-statistics';
+import { entityCacheService } from '@/services/cache/entityCache.service';
+import { API } from 'ssm-shared-lib';
+import moment from 'moment';
+import { useWidgetContext } from './DashboardLayoutEngine/WidgetContext';
+import { useRegisterDebugData } from './DashboardLayoutEngine/DebugDataProvider';
+import DemoOverlay from './DemoOverlay';
+
+interface SummaryStatCardProps {
+ title: string;
+ dataType?: 'device' | 'container';
+ source?: string | string[];
+ metric?: string;
+ icon?: React.ReactNode;
+ illustrationUrl?: string;
+ cardStyle?: React.CSSProperties;
+ defaultValue?: string;
+ defaultTrend?: string;
+ isPreview?: boolean;
+}
+
+const SummaryStatCard: React.FC = ({
+ title,
+ dataType = 'device',
+ source = 'all',
+ metric = 'cpu_usage',
+ icon,
+ illustrationUrl,
+ cardStyle,
+ defaultValue = '0',
+ defaultTrend = '0',
+ isPreview = false,
+}) => {
+ const [loading, setLoading] = useState(false);
+ const [currentValue, setCurrentValue] = useState(0);
+ const [weeklyData, setWeeklyData] = useState([]);
+ const [trendValue, setTrendValue] = useState(0);
+ const [trendDirection, setTrendDirection] = useState<'up' | 'down'>('up');
+ const [rawApiData, setRawApiData] = useState({});
+ const [isUsingMockData, setIsUsingMockData] = useState(false);
+
+ // Get widget context and debug registration
+ const widgetContext = useWidgetContext();
+ const updateDebugData = useRegisterDebugData(widgetContext?.widgetId);
+
+ // Determine if we're looking at all items or specific ones (memoized)
+ const { isAllSelected, sourceIds } = useMemo(() => {
+ const isAll = Array.isArray(source) ? source.includes('all') : source === 'all';
+ let ids: string[] = [];
+
+ if (Array.isArray(source)) {
+ ids = source.filter(s => s && s !== 'all');
+ } else if (source && source !== 'all') {
+ ids = [source];
+ }
+
+ return { isAllSelected: isAll, sourceIds: ids };
+ }, [source]);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ setLoading(true);
+ try {
+ // Use mock data in preview mode
+ if (isPreview) {
+ setCurrentValue(65.5);
+ setTrendValue(12.4);
+ const mockSparklineData = Array.from({ length: 7 }, (_, i) => ({
+ value: Math.floor(Math.random() * 30) + 50,
+ index: i,
+ }));
+ setWeeklyData(mockSparklineData);
+ setIsUsingMockData(true);
+ setLoading(false);
+
+ // Update debug data for preview mode
+ if (updateDebugData) {
+ updateDebugData({
+ componentName: 'SummaryStatCard',
+ fileName: 'SummaryStatCard.tsx',
+ rawApiData: {
+ apiCalls: {
+ mode: 'preview',
+ mockData: true
+ },
+ responses: {
+ mockData: mockSparklineData
+ }
+ } as Record,
+ processedData: {
+ currentValue: 65.5,
+ trendValue: 12.4,
+ weeklyData: mockSparklineData
+ } as Record,
+ config: {
+ dataType,
+ source,
+ metric,
+ isPreview: true
+ } as Record
+ });
+ }
+ return;
+ }
+ const now = moment();
+ const weekAgo = moment().subtract(7, 'days');
+
+ // Reset mock data flag when fetching real data
+ setIsUsingMockData(false);
+
+ if (dataType === 'device' && metric) {
+ if (isAllSelected) {
+ // Get all device IDs from cache
+ console.log('📊 SummaryStatCard: Getting all devices', {
+ component: 'SummaryStatCard',
+ title,
+ timestamp: new Date().toISOString()
+ });
+ const devices = await entityCacheService.getDevices();
+ const allDeviceIds = devices.map(device => device.uuid);
+ console.log('📊 SummaryStatCard API Response: getAllDevices', {
+ component: 'SummaryStatCard',
+ title,
+ deviceCount: allDeviceIds.length,
+ deviceIds: allDeviceIds,
+ timestamp: new Date().toISOString()
+ });
+
+ if (allDeviceIds.length === 0) {
+ // No devices available
+ setCurrentValue(0);
+ setWeeklyData([]);
+ return;
+ }
+
+ // Fetch averaged stats for all devices
+ console.log('📊 SummaryStatCard API Call: getDashboardAveragedDevicesStats & getDashboardDevicesStats', {
+ component: 'SummaryStatCard',
+ title,
+ deviceIds: allDeviceIds,
+ metric,
+ currentRange: {
+ from: moment().subtract(1, 'hour').toDate(),
+ to: moment().toDate()
+ },
+ historicalRange: {
+ from: weekAgo.toDate(),
+ to: moment().toDate()
+ },
+ timestamp: new Date().toISOString()
+ });
+ const [currentStats, historicalStats] = await Promise.all([
+ getDashboardAveragedDevicesStats(allDeviceIds, metric, {
+ from: moment().subtract(1, 'hour').toDate(),
+ to: moment().toDate(),
+ }),
+ getDashboardDevicesStats(allDeviceIds, metric, {
+ from: weekAgo.toDate(),
+ to: moment().toDate(),
+ }),
+ ]);
+
+ console.log('📊 SummaryStatCard API Response: getDashboardAveragedDevicesStats & getDashboardDevicesStats', {
+ component: 'SummaryStatCard',
+ title,
+ currentStatsLength: currentStats.data?.length || 0,
+ historicalStatsLength: historicalStats.data?.length || 0,
+ currentData: currentStats.data,
+ historicalData: historicalStats.data,
+ usingFallback: !currentStats.data || currentStats.data.length === 0,
+ timestamp: new Date().toISOString()
+ });
+
+ // Store raw API data for debugging
+ const apiDebugData = {
+ currentStats: currentStats.data,
+ historicalStats: historicalStats.data,
+ metric,
+ dataType,
+ source: 'all'
+ };
+ setRawApiData(apiDebugData);
+
+ // Set current value (latest average)
+ let finalCurrentValue = 0;
+ if (currentStats.data && currentStats.data.length > 0) {
+ const avgValue = currentStats.data.reduce((sum, item) => sum + item.value, 0) / currentStats.data.length;
+ setCurrentValue(avgValue); // Already in percentage (0-100)
+ finalCurrentValue = avgValue;
+ } else if (historicalStats.data && historicalStats.data.length > 0) {
+ // Fallback: use latest values from historical data if current stats are empty
+ const deviceLatestValues = new Map();
+
+ // Get the most recent value for each device
+ historicalStats.data.forEach((stat: API.DeviceStat) => {
+ const deviceId = stat.name;
+ const existingValue = deviceLatestValues.get(deviceId);
+ if (!existingValue || stat.date > (existingValue as any)?.date) {
+ deviceLatestValues.set(deviceId, stat.value);
+ }
+ });
+
+ // Calculate average of latest values
+ if (deviceLatestValues.size > 0) {
+ const values = Array.from(deviceLatestValues.values());
+ finalCurrentValue = values.reduce((sum, val) => sum + val, 0) / values.length;
+ setCurrentValue(finalCurrentValue);
+ }
+ }
+
+ console.log('📊 SummaryStatCard FINAL VALUE CALCULATED:', {
+ component: 'SummaryStatCard',
+ title,
+ finalCurrentValue,
+ timestamp: new Date().toISOString()
+ });
+
+ // Process historical data for the sparkline
+ let processedData: any[] = [];
+ if (historicalStats.data) {
+ processedData = processHistoricalData(historicalStats.data);
+ console.log('📊 SummaryStatCard: Processed sparkline data', {
+ component: 'SummaryStatCard',
+ title,
+ rawDataLength: historicalStats.data.length,
+ processedDataLength: processedData.length,
+ processedData: processedData
+ });
+ setWeeklyData(processedData);
+ calculateTrend(processedData);
+ }
+
+ // Update debug data
+ if (updateDebugData) {
+ updateDebugData({
+ componentName: 'SummaryStatCard',
+ fileName: 'SummaryStatCard.tsx',
+ rawApiData: {
+ apiCalls: {
+ source: 'all',
+ isAllSelected: true,
+ sourceIds: [],
+ getAllDevices: {
+ method: 'GET',
+ endpoint: '/api/devices',
+ description: 'Get all devices from cache'
+ },
+ getDashboardAveragedDevicesStats: {
+ method: 'POST',
+ endpoint: `/api/statistics/dashboard/averaged/${metric}`,
+ params: {
+ from: moment().subtract(1, 'hour').toDate(),
+ to: moment().toDate()
+ },
+ body: {
+ devices: allDeviceIds
+ }
+ },
+ getDashboardDevicesStats: {
+ method: 'POST',
+ endpoint: `/api/statistics/dashboard/stats/${metric}`,
+ params: {
+ from: weekAgo.toDate(),
+ to: moment().toDate()
+ },
+ body: {
+ devices: allDeviceIds
+ }
+ }
+ },
+ responses: {
+ devices: { data: devices },
+ currentStats: currentStats,
+ historicalStats: historicalStats
+ }
+ } as Record,
+ processedData: {
+ currentValue: finalCurrentValue,
+ weeklyData: processedData,
+ deviceCount: allDeviceIds.length,
+ dateRange: {
+ from: weekAgo.toISOString(),
+ to: moment().toISOString()
+ }
+ } as Record,
+ config: {
+ dataType,
+ source,
+ metric,
+ isAllSelected: true
+ } as Record
+ });
+ }
+ } else {
+ // Fetch stats for specific devices
+ if (sourceIds.length === 0) {
+ // No specific devices selected
+ setCurrentValue(0);
+ setWeeklyData([]);
+ return;
+ }
+
+ console.log('📊 SummaryStatCard API Call: getDeviceStat (multiple)', {
+ component: 'SummaryStatCard',
+ title,
+ deviceIds: sourceIds,
+ metric,
+ timestamp: new Date().toISOString()
+ });
+ const devicePromises = sourceIds.map(deviceId =>
+ getDeviceStat(deviceId, metric)
+ );
+ const deviceStats = await Promise.all(devicePromises);
+ console.log('📊 SummaryStatCard API Response: getDeviceStat (multiple)', {
+ component: 'SummaryStatCard',
+ title,
+ deviceIds: sourceIds,
+ deviceStats: deviceStats.map(stat => ({ deviceId: stat.data?.name, value: stat.data?.value })),
+ timestamp: new Date().toISOString()
+ });
+
+ // Calculate average of current values
+ const validStats = deviceStats.filter(stat => stat.data);
+ if (validStats.length > 0) {
+ const avgValue = validStats.reduce((sum, stat) => sum + (stat.data?.value || 0), 0) / validStats.length;
+ setCurrentValue(avgValue); // Value is already in percentage (0-100)
+ }
+
+ // Fetch historical data
+ console.log('📊 SummaryStatCard API Call: getDashboardDevicesStats (specific devices)', {
+ component: 'SummaryStatCard',
+ title,
+ deviceIds: sourceIds,
+ metric,
+ dateRange: {
+ from: weekAgo.toDate(),
+ to: now.toDate()
+ },
+ timestamp: new Date().toISOString()
+ });
+ const historicalStats = await getDashboardDevicesStats(sourceIds, metric, {
+ from: weekAgo.toDate(),
+ to: now.toDate(),
+ });
+ console.log('📊 SummaryStatCard API Response: getDashboardDevicesStats (specific devices)', {
+ component: 'SummaryStatCard',
+ title,
+ historicalStatsLength: historicalStats.data?.length || 0,
+ historicalData: historicalStats.data,
+ timestamp: new Date().toISOString()
+ });
+
+ let processedData: any[] = [];
+ let finalCurrentValue = 0;
+ if (historicalStats.data) {
+ processedData = processHistoricalData(historicalStats.data);
+ console.log('📊 SummaryStatCard: Processed sparkline data (specific devices)', {
+ component: 'SummaryStatCard',
+ title,
+ rawDataLength: historicalStats.data.length,
+ processedDataLength: processedData.length,
+ processedData: processedData
+ });
+ setWeeklyData(processedData);
+ calculateTrend(processedData);
+ } else {
+ console.log('📊 SummaryStatCard: No historical data for sparkline', {
+ component: 'SummaryStatCard',
+ title,
+ historicalStats
+ });
+ }
+
+ // Get current value from earlier calculation
+ const validDeviceStats = deviceStats.filter(stat => stat.data);
+ if (validDeviceStats.length > 0) {
+ finalCurrentValue = validDeviceStats.reduce((sum, stat) => sum + (stat.data?.value || 0), 0) / validDeviceStats.length;
+ }
+
+ // Update debug data for specific devices
+ if (updateDebugData) {
+ updateDebugData({
+ componentName: 'SummaryStatCard',
+ fileName: 'SummaryStatCard.tsx',
+ rawApiData: {
+ apiCalls: {
+ source: sourceIds,
+ isAllSelected: false,
+ sourceIds: sourceIds,
+ getDeviceStat: {
+ method: 'GET',
+ endpoint: `/api/statistics/device/{deviceId}/${metric}`,
+ description: 'Get current stats for specific devices',
+ deviceIds: sourceIds
+ },
+ getDashboardDevicesStats: {
+ method: 'POST',
+ endpoint: `/api/statistics/dashboard/stats/${metric}`,
+ params: {
+ from: weekAgo.toDate(),
+ to: moment().toDate()
+ },
+ body: {
+ devices: sourceIds
+ }
+ }
+ },
+ responses: {
+ deviceStats: deviceStats,
+ historicalStats: historicalStats
+ }
+ } as Record,
+ processedData: {
+ currentValue: finalCurrentValue,
+ weeklyData: processedData,
+ deviceCount: sourceIds.length,
+ dateRange: {
+ from: weekAgo.toISOString(),
+ to: moment().toISOString()
+ }
+ } as Record,
+ config: {
+ dataType,
+ source,
+ metric,
+ isAllSelected: false,
+ sourceIds
+ } as Record
+ });
+ }
+ }
+ } else if (dataType === 'container' && metric) {
+ if (isAllSelected) {
+ // Fetch averaged stats for all containers
+ const avgStats = await getAveragedStats();
+
+ if (metric === 'container_cpu_usage' && avgStats.data?.cpuStats) {
+ setCurrentValue(avgStats.data.cpuStats); // Already in percentage
+ } else if (metric === 'container_memory_usage' && avgStats.data?.memStats) {
+ setCurrentValue(avgStats.data.memStats); // Already in percentage
+ }
+
+ // Get all containers from cache for historical data
+ const containers = await entityCacheService.getContainers();
+ const allContainerIds = containers.map(container => container.id);
+
+ if (allContainerIds.length > 0 && metric) {
+ // Fetch historical data for sparkline
+ const historicalPromises = allContainerIds.slice(0, 10).map(containerId =>
+ getContainerStats(containerId, metric, {
+ from: weekAgo.toDate(),
+ to: now.toDate(),
+ })
+ );
+
+ try {
+ const historicalResults = await Promise.all(historicalPromises);
+ // Combine and process historical data
+ const combinedData: any[] = [];
+ historicalResults.forEach(result => {
+ if (result.data) {
+ combinedData.push(...result.data);
+ }
+ });
+
+ let processedData: any[] = [];
+ if (combinedData.length > 0) {
+ processedData = processHistoricalData(combinedData);
+ setWeeklyData(processedData);
+ calculateTrend(processedData);
+ } else {
+ // Use mock data if no historical data
+ processedData = generateMockSparklineData();
+ setWeeklyData(processedData);
+ calculateTrend(processedData);
+ setIsUsingMockData(true);
+ }
+
+ // Update debug data for containers (all)
+ if (updateDebugData) {
+ updateDebugData({
+ componentName: 'SummaryStatCard',
+ fileName: 'SummaryStatCard.tsx',
+ rawApiData: {
+ apiCalls: {
+ source: 'all',
+ isAllSelected: true,
+ sourceIds: [],
+ getAveragedStats: {
+ method: 'GET',
+ endpoint: '/api/containers/stats/averaged',
+ description: 'Get averaged container stats'
+ },
+ getContainerStats: {
+ method: 'GET',
+ endpoint: `/api/containers/{containerId}/stats/${metric}`,
+ description: 'Get historical stats for containers',
+ containerIds: allContainerIds.slice(0, 10)
+ }
+ },
+ responses: {
+ avgStats: avgStats,
+ containers: { data: containers },
+ historicalResults: historicalResults
+ }
+ } as Record,
+ processedData: {
+ currentValue: currentValue,
+ weeklyData: processedData,
+ containerCount: allContainerIds.length,
+ metric,
+ dataType
+ } as Record,
+ config: {
+ dataType,
+ source,
+ metric,
+ isAllSelected: true
+ } as Record
+ });
+ }
+ } catch (error) {
+ console.error('Failed to fetch container historical data:', error);
+ const mockData = generateMockSparklineData();
+ setWeeklyData(mockData);
+ calculateTrend(mockData);
+ setIsUsingMockData(true);
+ }
+ } else {
+ // Use mock data for sparkline
+ const mockData = generateMockSparklineData();
+ setWeeklyData(mockData);
+ calculateTrend(mockData);
+ setIsUsingMockData(true);
+ }
+ } else {
+ // Fetch stats for specific containers
+ if (sourceIds.length === 0) {
+ // No specific containers selected
+ setCurrentValue(0);
+ setWeeklyData([]);
+ return;
+ }
+
+ const containerPromises = sourceIds.map(containerId =>
+ getContainerStat(containerId, metric)
+ );
+ const containerStats = await Promise.all(containerPromises);
+
+ // Calculate average of current values
+ const validContainerStats = containerStats.filter(stat => stat.data);
+ let finalCurrentValue = 0;
+ if (validContainerStats.length > 0) {
+ const avgValue = validContainerStats.reduce((sum, stat) => sum + (stat.data?.value || 0), 0) / validContainerStats.length;
+ setCurrentValue(avgValue); // Value is already in percentage (0-100)
+ finalCurrentValue = avgValue;
+ }
+
+ // For now, use mock data for container sparklines
+ // TODO: Implement historical container stats when available
+ const mockData = generateMockSparklineData();
+ setWeeklyData(mockData);
+ calculateTrend(mockData);
+ setIsUsingMockData(true);
+
+ // Update debug data for specific containers
+ if (updateDebugData) {
+ updateDebugData({
+ componentName: 'SummaryStatCard',
+ fileName: 'SummaryStatCard.tsx',
+ rawApiData: {
+ apiCalls: {
+ source: sourceIds,
+ isAllSelected: false,
+ sourceIds: sourceIds,
+ getContainerStat: {
+ method: 'GET',
+ endpoint: `/api/containers/{containerId}/stat/${metric}`,
+ description: 'Get current stats for specific containers',
+ containerIds: sourceIds
+ }
+ },
+ responses: {
+ containerStats: containerStats,
+ mockSparklineData: mockData
+ }
+ } as Record,
+ processedData: {
+ currentValue: finalCurrentValue,
+ weeklyData: mockData,
+ containerCount: sourceIds.length,
+ metric,
+ dataType
+ } as Record,
+ config: {
+ dataType,
+ source,
+ metric,
+ isAllSelected: false,
+ sourceIds
+ } as Record
+ });
+ }
+ }
+
+ // For containers without debug data, still add basic debug info
+ if (!updateDebugData && dataType === 'container') {
+ const mockData = generateMockSparklineData();
+ setWeeklyData(mockData);
+ calculateTrend(mockData);
+ setIsUsingMockData(true);
+ }
+ }
+ } catch (error) {
+ console.error('Failed to fetch stats:', error);
+ // Use default values on error
+ setCurrentValue(parseFloat(defaultValue));
+ setTrendValue(parseFloat(defaultTrend));
+
+ // Update debug data for error case
+ if (updateDebugData) {
+ updateDebugData({
+ componentName: 'SummaryStatCard',
+ fileName: 'SummaryStatCard.tsx',
+ rawApiData: {
+ error: {
+ message: error instanceof Error ? error.message : 'Unknown error',
+ stack: error instanceof Error ? error.stack : undefined,
+ timestamp: new Date().toISOString()
+ },
+ fallbackData: {
+ defaultValue: parseFloat(defaultValue),
+ defaultTrend: parseFloat(defaultTrend)
+ }
+ } as Record,
+ processedData: {
+ currentValue: parseFloat(defaultValue),
+ trendValue: parseFloat(defaultTrend),
+ weeklyData: [],
+ errorOccurred: true
+ } as Record,
+ config: {
+ dataType,
+ source,
+ metric,
+ defaultValue,
+ defaultTrend
+ } as Record
+ });
+ }
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchData();
+ // Refresh every 30 seconds
+ const interval = setInterval(fetchData, 30000);
+ return () => clearInterval(interval);
+ }, [dataType, source, metric, isPreview, defaultValue, defaultTrend]);
+
+ const processHistoricalData = (data: API.DeviceStat[]) => {
+ console.log('📊 SummaryStatCard: Processing historical data', {
+ dataLength: data.length,
+ sampleData: data.slice(0, 3)
+ });
+
+ // Ensure we have valid data
+ if (!data || data.length === 0) {
+ return [];
+ }
+
+ // Group data by time intervals (hourly)
+ const grouped = data.reduce((acc: any, item) => {
+ const hour = moment(item.date).format('YYYY-MM-DD-HH');
+ if (!acc[hour]) {
+ acc[hour] = [];
+ }
+ acc[hour].push(item.value);
+ return acc;
+ }, {});
+
+ // Calculate averages for each hour
+ const processed = Object.keys(grouped)
+ .sort()
+ .map((hour, index) => ({
+ index,
+ value: grouped[hour].reduce((sum: number, val: number) => sum + val, 0) / grouped[hour].length
+ }));
+
+ console.log('📊 SummaryStatCard: Grouped data', {
+ groupedKeys: Object.keys(grouped).length,
+ processedLength: processed.length
+ });
+
+ // Ensure we have at least 2 points for the sparkline to render
+ if (processed.length === 1) {
+ // Duplicate the single point with slight variation
+ const singleValue = processed[0].value;
+ return [
+ { index: 0, value: singleValue * 0.98 },
+ { index: 1, value: singleValue }
+ ];
+ }
+
+ return processed;
+ };
+
+ const calculateTrend = (data: any[]) => {
+ console.log('📊 SummaryStatCard calculateTrend input:', { data, dataType: typeof data[0] });
+ if (data.length < 2) return;
+
+ // Compare last week's average with this week's average
+ const midPoint = Math.floor(data.length / 2);
+ const lastWeekData = data.slice(0, midPoint);
+ const thisWeekData = data.slice(midPoint);
+
+ const lastWeekAvg = lastWeekData.reduce((sum, item) => sum + item.value, 0) / lastWeekData.length;
+ const thisWeekAvg = thisWeekData.reduce((sum, item) => sum + item.value, 0) / thisWeekData.length;
+
+ const percentChange = ((thisWeekAvg - lastWeekAvg) / lastWeekAvg) * 100;
+ console.log('📊 SummaryStatCard calculateTrend result:', {
+ lastWeekAvg, thisWeekAvg, percentChange,
+ trendValue: Math.abs(percentChange),
+ direction: percentChange >= 0 ? 'up' : 'down'
+ });
+ setTrendValue(Math.abs(percentChange));
+ setTrendDirection(percentChange >= 0 ? 'up' : 'down');
+ };
+
+ const generateMockSparklineData = () => {
+ return Array.from({ length: 30 }, (_, i) => {
+ const progress = i / 29;
+ const wave1 = Math.sin(progress * Math.PI * 3) * 15;
+ const wave2 = Math.sin(progress * Math.PI * 5) * 5;
+ const trendLine = trendDirection === 'down' ? progress * -10 : progress * 10;
+ return {
+ index: i,
+ value: 50 + wave1 + wave2 + trendLine
+ };
+ });
+ };
+
+ const formatValue = (value: number) => {
+ // Format based on metric type
+ if (metric === 'containers') {
+ return Math.round(value).toLocaleString();
+ }
+ // For percentages, show one decimal place with % symbol
+ return `${value.toFixed(1)}%`;
+ };
+
+ const chartOptions: ApexOptions = {
+ chart: {
+ type: 'line',
+ sparkline: {
+ enabled: true
+ },
+ animations: {
+ enabled: false
+ }
+ },
+ stroke: {
+ curve: 'smooth',
+ width: 2.5,
+ colors: ['#faad14'] // Golden color as shown in the image
+ },
+ fill: {
+ opacity: 1
+ },
+ tooltip: {
+ enabled: true,
+ theme: 'dark',
+ style: {
+ fontSize: '12px'
+ },
+ custom: function({ series, seriesIndex, dataPointIndex, w }) {
+ const value = series[seriesIndex][dataPointIndex];
+ const dataPoint = weeklyData[dataPointIndex];
+ const timestamp = dataPoint ? new Date(Date.now() - (weeklyData.length - dataPointIndex - 1) * 3600000).toLocaleString() : 'Unknown';
+
+ return `
+
+
${value.toFixed(1)}%
+
${timestamp}
+
+
+
+ {title}
+
+
+
+
+
+ {formatValue(currentValue)}
+
+
+ {trendIcon}
+
+ {trendValue.toFixed(1)}%
+
+
+ last week
+
+
+
+
+
+ {weeklyData.length > 0 ? (
+
+ ) : (
+
+ No data
+
+ )}
+
+
+
+
+ );
+};
+
+export default SummaryStatCard;
\ No newline at end of file
diff --git a/client/src/pages/Dashboard/Components/NotebookWidget.tsx b/client/src/pages/Dashboard/Components/NotebookWidget.tsx
new file mode 100644
index 000000000..fccff6f47
--- /dev/null
+++ b/client/src/pages/Dashboard/Components/NotebookWidget.tsx
@@ -0,0 +1,297 @@
+import React, { useState, useEffect } from 'react';
+import { Card, Typography, Button, Space, Input, message } from 'antd';
+import { EditOutlined, SaveOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+
+const { TextArea } = Input;
+
+interface Note {
+ id: string;
+ title: string;
+ content: string;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+interface NotebookWidgetProps {
+ title?: string;
+ cardStyle?: React.CSSProperties;
+}
+
+const NotebookWidget: React.FC = ({
+ title = 'Notebook',
+ cardStyle,
+}) => {
+ const [notes, setNotes] = useState([]);
+ const [editingId, setEditingId] = useState(null);
+ const [editTitle, setEditTitle] = useState('');
+ const [editContent, setEditContent] = useState('');
+ const [isCreating, setIsCreating] = useState(false);
+
+ // Load notes from localStorage
+ useEffect(() => {
+ const savedNotes = localStorage.getItem('ssm-notebook-notes');
+ if (savedNotes) {
+ try {
+ const parsedNotes = JSON.parse(savedNotes).map((note: any) => ({
+ ...note,
+ createdAt: new Date(note.createdAt),
+ updatedAt: new Date(note.updatedAt),
+ }));
+ setNotes(parsedNotes);
+ } catch (error) {
+ console.error('Failed to load notes:', error);
+ }
+ }
+ }, []);
+
+ // Save notes to localStorage
+ const saveNotes = (updatedNotes: Note[]) => {
+ localStorage.setItem('ssm-notebook-notes', JSON.stringify(updatedNotes));
+ setNotes(updatedNotes);
+ };
+
+ const createNote = () => {
+ if (!editTitle.trim()) {
+ message.warning('Please enter a title');
+ return;
+ }
+
+ const newNote: Note = {
+ id: Date.now().toString(),
+ title: editTitle.trim(),
+ content: editContent.trim(),
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ };
+
+ const updatedNotes = [newNote, ...notes];
+ saveNotes(updatedNotes);
+ setEditTitle('');
+ setEditContent('');
+ setIsCreating(false);
+ message.success('Note created');
+ };
+
+ const startEdit = (note: Note) => {
+ setEditingId(note.id);
+ setEditTitle(note.title);
+ setEditContent(note.content);
+ };
+
+ const saveEdit = () => {
+ if (!editTitle.trim()) {
+ message.warning('Please enter a title');
+ return;
+ }
+
+ const updatedNotes = notes.map(note =>
+ note.id === editingId
+ ? {
+ ...note,
+ title: editTitle.trim(),
+ content: editContent.trim(),
+ updatedAt: new Date(),
+ }
+ : note
+ );
+
+ saveNotes(updatedNotes);
+ setEditingId(null);
+ setEditTitle('');
+ setEditContent('');
+ message.success('Note updated');
+ };
+
+ const deleteNote = (id: string) => {
+ const updatedNotes = notes.filter(note => note.id !== id);
+ saveNotes(updatedNotes);
+ message.success('Note deleted');
+ };
+
+ const cancelEdit = () => {
+ setEditingId(null);
+ setEditTitle('');
+ setEditContent('');
+ setIsCreating(false);
+ };
+
+ const formatDate = (date: Date) => {
+ return new Intl.DateTimeFormat('en-US', {
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ }).format(date);
+ };
+
+ return (
+
+
+
+ 📝 {title}
+
+
+
+
+
+
+ 
+
+ 
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
+ 
+ 
+ 
+ 
+ 
+