Fixed reporting mechanism

frontend/src/components/Layout.jsx

@@ -120,7 +120,6 @@ const Layout = ({ children }) => {
 				name: "Automation",
 				href: "/automation",
 				icon: RefreshCw,
-				new: true,
 			});
 
 			if (canViewReports()) {

frontend/src/pages/Automation.jsx

@@ -196,6 +196,25 @@ const Automation = () => {
 				year: "numeric",
 			});
 		}
+		if (schedule === "Every 30 minutes") {
+			const now = new Date();
+			const nextRun = new Date(now);
+			// Round up to the next 30-minute mark
+			const minutes = now.getMinutes();
+			if (minutes < 30) {
+				nextRun.setMinutes(30, 0, 0);
+			} else {
+				nextRun.setHours(nextRun.getHours() + 1, 0, 0, 0);
+			}
+			return nextRun.toLocaleString([], {
+				hour12: true,
+				hour: "numeric",
+				minute: "2-digit",
+				day: "numeric",
+				month: "numeric",
+				year: "numeric",
+			});
+		}
 		return "Unknown";
 	};
 
@@ -236,6 +255,18 @@ const Automation = () => {
 			nextHour.setHours(nextHour.getHours() + 1, 0, 0, 0);
 			return nextHour.getTime();
 		}
+		if (schedule === "Every 30 minutes") {
+			const now = new Date();
+			const nextRun = new Date(now);
+			// Round up to the next 30-minute mark
+			const minutes = now.getMinutes();
+			if (minutes < 30) {
+				nextRun.setMinutes(30, 0, 0);
+			} else {
+				nextRun.setHours(nextRun.getHours() + 1, 0, 0, 0);
+			}
+			return nextRun.getTime();
+		}
 		return Number.MAX_SAFE_INTEGER; // Unknown schedules go to bottom
 	};
 
@@ -294,6 +325,8 @@ const Automation = () => {
 				endpoint = "/automation/trigger/docker-inventory-cleanup";
 			} else if (jobType === "agent-collection") {
 				endpoint = "/automation/trigger/agent-collection";
+			} else if (jobType === "system-statistics") {
+				endpoint = "/automation/trigger/system-statistics";
 			}
 
 			const _response = await api.post(endpoint, data);
@@ -615,6 +648,10 @@ const Automation = () => {
 																automation.queue.includes("agent-commands")
 															) {
 																triggerManualJob("agent-collection");
+															} else if (
+																automation.queue.includes("system-statistics")
+															) {
+																triggerManualJob("system-statistics");
 															}
 														}}
 														className="inline-flex items-center justify-center w-6 h-6 border border-transparent rounded text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-colors duration-200"

frontend/src/pages/Dashboard.jsx

@@ -55,6 +55,8 @@ const Dashboard = () => {
 	const [cardPreferences, setCardPreferences] = useState([]);
 	const [packageTrendsPeriod, setPackageTrendsPeriod] = useState("1"); // days
 	const [packageTrendsHost, setPackageTrendsHost] = useState("all"); // host filter
+	const [systemStatsJobId, setSystemStatsJobId] = useState(null); // Track job ID for system statistics
+	const [isTriggeringJob, setIsTriggeringJob] = useState(false);
 	const navigate = useNavigate();
 	const { isDark } = useTheme();
 	const { user } = useAuth();
@@ -772,56 +774,108 @@ const Dashboard = () => {
 							<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
 								Package Trends Over Time
 							</h3>
-							<div className="flex items-center gap-3">
-								{/* Refresh Button */}
-								<button
-									type="button"
-									onClick={() => refetchPackageTrends()}
-									disabled={packageTrendsFetching}
-									className="px-3 py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white hover:bg-secondary-50 dark:hover:bg-secondary-700 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-									title="Refresh data"
-								>
-									<RefreshCw
-										className={`h-4 w-4 ${packageTrendsFetching ? "animate-spin" : ""}`}
-									/>
-									Refresh
-								</button>
+							<div className="flex flex-col gap-2">
+								<div className="flex items-center gap-3">
+									{/* Refresh Button */}
+									<button
+										type="button"
+										onClick={async () => {
+											if (packageTrendsHost === "all") {
+												// For "All Hosts", trigger system statistics collection job
+												setIsTriggeringJob(true);
+												try {
+													const response =
+														await dashboardAPI.triggerSystemStatistics();
+													if (response.data?.data?.jobId) {
+														setSystemStatsJobId(response.data.data.jobId);
+														// Wait a moment for the job to complete, then refetch
+														setTimeout(() => {
+															refetchPackageTrends();
+														}, 2000);
+														// Clear the job ID message after 2 seconds
+														setTimeout(() => {
+															setSystemStatsJobId(null);
+														}, 2000);
+													}
+												} catch (error) {
+													console.error(
+														"Failed to trigger system statistics:",
+														error,
+													);
+													// Still refetch data even if job trigger fails
+													refetchPackageTrends();
+												} finally {
+													setIsTriggeringJob(false);
+												}
+											} else {
+												// For individual host, just refetch the data
+												refetchPackageTrends();
+											}
+										}}
+										disabled={packageTrendsFetching || isTriggeringJob}
+										className="px-3 py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white hover:bg-secondary-50 dark:hover:bg-secondary-700 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+										title={
+											packageTrendsHost === "all"
+												? "Trigger system statistics collection"
+												: "Refresh data"
+										}
+									>
+										<RefreshCw
+											className={`h-4 w-4 ${
+												packageTrendsFetching || isTriggeringJob
+													? "animate-spin"
+													: ""
+											}`}
+										/>
+										Refresh
+									</button>
 
-								{/* Period Selector */}
-								<select
-									value={packageTrendsPeriod}
-									onChange={(e) => setPackageTrendsPeriod(e.target.value)}
-									className="px-3 py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
-								>
-									<option value="1">Last 24 hours</option>
-									<option value="7">Last 7 days</option>
-									<option value="30">Last 30 days</option>
-									<option value="90">Last 90 days</option>
-									<option value="180">Last 6 months</option>
-									<option value="365">Last year</option>
-								</select>
+									{/* Period Selector */}
+									<select
+										value={packageTrendsPeriod}
+										onChange={(e) => setPackageTrendsPeriod(e.target.value)}
+										className="px-3 py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+									>
+										<option value="1">Last 24 hours</option>
+										<option value="7">Last 7 days</option>
+										<option value="30">Last 30 days</option>
+										<option value="90">Last 90 days</option>
+										<option value="180">Last 6 months</option>
+										<option value="365">Last year</option>
+									</select>
 
-								{/* Host Selector */}
-								<select
-									value={packageTrendsHost}
-									onChange={(e) => setPackageTrendsHost(e.target.value)}
-									className="px-3 py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
-								>
-									<option value="all">All Hosts</option>
-									{packageTrendsData?.hosts?.length > 0 ? (
-										packageTrendsData.hosts.map((host) => (
-											<option key={host.id} value={host.id}>
-												{host.friendly_name || host.hostname}
+									{/* Host Selector */}
+									<select
+										value={packageTrendsHost}
+										onChange={(e) => {
+											setPackageTrendsHost(e.target.value);
+											// Clear job ID message when host selection changes
+											setSystemStatsJobId(null);
+										}}
+										className="px-3 py-1.5 text-sm border border-secondary-300 dark:border-secondary-600 rounded-md bg-white dark:bg-secondary-800 text-secondary-900 dark:text-white focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+									>
+										<option value="all">All Hosts</option>
+										{packageTrendsData?.hosts?.length > 0 ? (
+											packageTrendsData.hosts.map((host) => (
+												<option key={host.id} value={host.id}>
+													{host.friendly_name || host.hostname}
+												</option>
+											))
+										) : (
+											<option disabled>
+												{packageTrendsLoading
+													? "Loading hosts..."
+													: "No hosts available"}
 											</option>
-										))
-									) : (
-										<option disabled>
-											{packageTrendsLoading
-												? "Loading hosts..."
-												: "No hosts available"}
-										</option>
-									)}
-								</select>
+										)}
+									</select>
+								</div>
+								{/* Job ID Message */}
+								{systemStatsJobId && packageTrendsHost === "all" && (
+									<p className="text-xs text-secondary-600 dark:text-secondary-400 ml-1">
+										Ran collection job #{systemStatsJobId}
+									</p>
+								)}
 							</div>
 						</div>
 
@@ -1167,13 +1221,40 @@ const Dashboard = () => {
 					title: (context) => {
 						const label = context[0].label;
 
+						// Handle "Now" label
+						if (label === "Now") {
+							return "Now";
+						}
+
 						// Handle empty or invalid labels
 						if (!label || typeof label !== "string") {
 							return "Unknown Date";
 						}
 
+						// Check if it's a full ISO timestamp (for "Last 24 hours")
+						// Format: "2025-01-15T14:30:00.000Z" or "2025-01-15T14:30:00.000"
+						if (label.includes("T") && label.includes(":")) {
+							try {
+								const date = new Date(label);
+								// Check if date is valid
+								if (Number.isNaN(date.getTime())) {
+									return label; // Return original label if date is invalid
+								}
+								// Format full ISO timestamp with date and time
+								return date.toLocaleDateString("en-US", {
+									month: "short",
+									day: "numeric",
+									hour: "numeric",
+									minute: "2-digit",
+									hour12: true,
+								});
+							} catch (_error) {
+								return label; // Return original label if parsing fails
+							}
+						}
+
 						// Format hourly labels (e.g., "2025-10-07T14" -> "Oct 7, 2:00 PM")
-						if (label.includes("T")) {
+						if (label.includes("T") && !label.includes(":")) {
 							try {
 								const date = new Date(`${label}:00:00`);
 								// Check if date is valid
@@ -1233,13 +1314,41 @@ const Dashboard = () => {
 					callback: function (value, _index, _ticks) {
 						const label = this.getLabelForValue(value);
 
+						// Handle "Now" label
+						if (label === "Now") {
+							return "Now";
+						}
+
 						// Handle empty or invalid labels
 						if (!label || typeof label !== "string") {
 							return "Unknown";
 						}
 
+						// Check if it's a full ISO timestamp (for "Last 24 hours")
+						// Format: "2025-01-15T14:30:00.000Z" or "2025-01-15T14:30:00.000"
+						if (label.includes("T") && label.includes(":")) {
+							try {
+								const date = new Date(label);
+								// Check if date is valid
+								if (Number.isNaN(date.getTime())) {
+									return label; // Return original label if date is invalid
+								}
+								// Extract hour from full ISO timestamp
+								const hourNum = date.getHours();
+								return hourNum === 0
+									? "12 AM"
+									: hourNum < 12
+										? `${hourNum} AM`
+										: hourNum === 12
+											? "12 PM"
+											: `${hourNum - 12} PM`;
+							} catch (_error) {
+								return label; // Return original label if parsing fails
+							}
+						}
+
 						// Format hourly labels (e.g., "2025-10-07T14" -> "2 PM")
-						if (label.includes("T")) {
+						if (label.includes("T") && !label.includes(":")) {
 							try {
 								const hour = label.split("T")[1];
 								const hourNum = parseInt(hour, 10);

frontend/src/pages/HostDetail.jsx

@@ -281,6 +281,67 @@ const HostDetail = () => {
 		},
 	});
 
+	// Fetch integration status
+	const {
+		data: integrationsData,
+		isLoading: isLoadingIntegrations,
+		refetch: refetchIntegrations,
+	} = useQuery({
+		queryKey: ["host-integrations", hostId],
+		queryFn: () =>
+			adminHostsAPI.getIntegrations(hostId).then((res) => res.data),
+		staleTime: 30 * 1000, // 30 seconds
+		refetchOnWindowFocus: false,
+		enabled: !!hostId && activeTab === "integrations",
+	});
+
+	// Refetch integrations when WebSocket status changes (e.g., after agent restart)
+	useEffect(() => {
+		if (
+			wsStatus?.connected &&
+			activeTab === "integrations" &&
+			integrationsData?.data?.connected === false
+		) {
+			// Agent just reconnected, refetch integrations to get updated connection status
+			refetchIntegrations();
+		}
+	}, [
+		wsStatus?.connected,
+		activeTab,
+		integrationsData?.data?.connected,
+		refetchIntegrations,
+	]);
+
+	// Toggle integration mutation
+	const toggleIntegrationMutation = useMutation({
+		mutationFn: ({ integrationName, enabled }) =>
+			adminHostsAPI
+				.toggleIntegration(hostId, integrationName, enabled)
+				.then((res) => res.data),
+		onSuccess: (data) => {
+			// Optimistically update the cache with the new state
+			queryClient.setQueryData(["host-integrations", hostId], (oldData) => {
+				if (!oldData) return oldData;
+				return {
+					...oldData,
+					data: {
+						...oldData.data,
+						integrations: {
+							...oldData.data.integrations,
+							[data.data.integration]: data.data.enabled,
+						},
+					},
+				};
+			});
+			// Also invalidate to ensure we get fresh data
+			queryClient.invalidateQueries(["host-integrations", hostId]);
+		},
+		onError: () => {
+			// On error, refetch to get the actual state
+			refetchIntegrations();
+		},
+	});
+
 	const handleDeleteHost = async () => {
 		if (
 			window.confirm(
@@ -666,6 +727,17 @@ const HostDetail = () => {
 						>
 							Notes
 						</button>
+						<button
+							type="button"
+							onClick={() => handleTabChange("integrations")}
+							className={`px-4 py-2 text-sm font-medium ${
+								activeTab === "integrations"
+									? "text-primary-600 dark:text-primary-400 border-b-2 border-primary-500"
+									: "text-secondary-500 dark:text-secondary-400 hover:text-secondary-700 dark:hover:text-secondary-300"
+							}`}
+						>
+							Integrations
+						</button>
 					</div>
 
 					<div className="p-4">
@@ -1446,6 +1518,101 @@ const HostDetail = () => {
 
 						{/* Agent Queue */}
 						{activeTab === "queue" && <AgentQueueTab hostId={hostId} />}
+
+						{/* Integrations */}
+						{activeTab === "integrations" && (
+							<div className="max-w-2xl space-y-4">
+								{isLoadingIntegrations ? (
+									<div className="flex items-center justify-center h-32">
+										<RefreshCw className="h-6 w-6 animate-spin text-primary-600" />
+									</div>
+								) : (
+									<div className="space-y-4">
+										{/* Docker Integration */}
+										<div className="bg-secondary-50 dark:bg-secondary-700 rounded-lg p-4 border border-secondary-200 dark:border-secondary-600">
+											<div className="flex items-start justify-between gap-4">
+												<div className="flex-1">
+													<div className="flex items-center gap-3 mb-2">
+														<Database className="h-5 w-5 text-primary-600 dark:text-primary-400" />
+														<h4 className="text-sm font-medium text-secondary-900 dark:text-white">
+															Docker
+														</h4>
+														{integrationsData?.data?.integrations?.docker ? (
+															<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+																Enabled
+															</span>
+														) : (
+															<span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-gray-200 text-gray-600 dark:bg-gray-600 dark:text-gray-400">
+																Disabled
+															</span>
+														)}
+													</div>
+													<p className="text-xs text-secondary-600 dark:text-secondary-300">
+														Monitor Docker containers, images, volumes, and
+														networks. Collects real-time container status
+														events.
+													</p>
+												</div>
+												<div className="flex-shrink-0">
+													<button
+														type="button"
+														onClick={() =>
+															toggleIntegrationMutation.mutate({
+																integrationName: "docker",
+																enabled:
+																	!integrationsData?.data?.integrations?.docker,
+															})
+														}
+														disabled={
+															toggleIntegrationMutation.isPending ||
+															!wsStatus?.connected
+														}
+														title={
+															!wsStatus?.connected
+																? "Agent is not connected"
+																: integrationsData?.data?.integrations?.docker
+																	? "Disable Docker integration"
+																	: "Enable Docker integration"
+														}
+														className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
+															integrationsData?.data?.integrations?.docker
+																? "bg-primary-600 dark:bg-primary-500"
+																: "bg-secondary-200 dark:bg-secondary-600"
+														} ${
+															toggleIntegrationMutation.isPending ||
+															!integrationsData?.data?.connected
+																? "opacity-50 cursor-not-allowed"
+																: ""
+														}`}
+													>
+														<span
+															className={`inline-block h-3 w-3 transform rounded-full bg-white transition-transform ${
+																integrationsData?.data?.integrations?.docker
+																	? "translate-x-5"
+																	: "translate-x-1"
+															}`}
+														/>
+													</button>
+												</div>
+											</div>
+											{!wsStatus?.connected && (
+												<p className="text-xs text-warning-600 dark:text-warning-400 mt-2">
+													Agent must be connected via WebSocket to toggle
+													integrations
+												</p>
+											)}
+											{toggleIntegrationMutation.isPending && (
+												<p className="text-xs text-secondary-600 dark:text-secondary-400 mt-2">
+													Updating integration...
+												</p>
+											)}
+										</div>
+
+										{/* Future integrations can be added here with the same pattern */}
+									</div>
+								)}
+							</div>
+						)}
 					</div>
 				</div>
 			</div>
@@ -1639,7 +1806,8 @@ const CredentialsModal = ({ host, isOpen, onClose }) => {
 								>
 									<option value="amd64">AMD64 (x86_64) - Default</option>
 									<option value="386">386 (i386) - 32-bit</option>
-									<option value="arm64">ARM64 (aarch64) - ARM</option>
+									<option value="arm64">ARM64 (aarch64) - ARM 64-bit</option>
+									<option value="arm">ARM (armv7l/armv6l) - ARM 32-bit</option>
 								</select>
 								<p className="text-xs text-primary-600 dark:text-primary-400 mt-1">
 									Select the architecture of the target host

frontend/src/utils/api.js

@@ -99,6 +99,8 @@ export const dashboardAPI = {
 	},
 	getRecentUsers: () => api.get("/dashboard/recent-users"),
 	getRecentCollection: () => api.get("/dashboard/recent-collection"),
+	triggerSystemStatistics: () =>
+		api.post("/automation/trigger/system-statistics"),
 };
 
 // Admin Hosts API (for management interface)
@@ -129,6 +131,11 @@ export const adminHostsAPI = {
 		api.patch(`/hosts/${hostId}/notes`, {
 			notes: notes,
 		}),
+	getIntegrations: (hostId) => api.get(`/hosts/${hostId}/integrations`),
+	toggleIntegration: (hostId, integrationName, enabled) =>
+		api.post(`/hosts/${hostId}/integrations/${integrationName}/toggle`, {
+			enabled,
+		}),
 };
 
 // Host Groups API