[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import MachineHealthTimeline from "../machine-health-timeline" export default function Page() { return } [V0_FILE]typescriptreact:file="types/machine-health.ts" isQuickEdit="true" export interface MachineStatus { time: string status: "Connected" | "Disconnected" | "Degraded" code?: number type?: string category?: string subCategory?: string } export interface Machine { id: string name: string status: MachineStatus[] } export interface DateRange { label: string days: number } [V0_FILE]typescriptreact:file="components/legend.tsx" isQuickEdit="true" export function Legend() { const legendItems = [ { color: "bg-green-500", label: "Connected" }, { color: "bg-yellow-500", label: "Degraded Performance" }, { color: "bg-red-500", label: "Disconnected" }, ] return (

Status Legend

{legendItems.map((item) => (

{item.label}

))}

) } [V0_FILE]typescriptreact:file="utils/date-utils.ts" isQuickEdit="true" export function formatTime(date: Date): string { return date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false, }) } export function formatDate(date: Date): string { return date.toLocaleDateString("en-US", { month: "short", day: "numeric", }) } export function getDateRange(days: number): { start: Date; end: Date } { const end = new Date() const start = new Date() start.setDate(start.getDate() - days + 1) start.setHours(0, 0, 0, 0) end.setHours(23, 59, 59, 999) return { start, end } } export function calculateUptime(statuses: any[]): number { const connectedCount = statuses.filter((s) => s.status === "Connected").length const degradedCount = statuses.filter((s) => s.status === "Degraded").length if (statuses.length === 0) return 0 // Count degraded as 50% uptime const effectiveUptime = connectedCount + degradedCount * 0.5 return (effectiveUptime / statuses.length) * 100 } [V0_FILE]typescriptreact:file="components/status-tooltip.tsx" isQuickEdit="true" "use client" import type { MachineStatus } from "../types/machine-health" import { formatTime, formatDate } from "../utils/date-utils" interface StatusTooltipProps { status: MachineStatus position: { x: number; y: number } onClose: () => void } export function StatusTooltip({ status, position, onClose }: StatusTooltipProps) { const date = new Date(status.time) return (

Status Details

Time: {formatDate(date)} {formatTime(date)}

Status: {status.status}

{(status.status === "Disconnected" || status.status === "Degraded") && ( <>

Type: {status.type}

Category: {status.category}

Subcategory: {status.subCategory}

Code: {status.code}

)}

) } [V0_FILE]typescriptreact:file="components/timeline-bar.tsx" isQuickEdit="true" "use client" import type React from "react" import type { MachineStatus } from "../types/machine-health" interface TimelineBarProps { status: MachineStatus onHover: (status: MachineStatus, event: React.MouseEvent) => void onLeave: () => void } export function TimelineBar({ status, onHover, onLeave }: TimelineBarProps) { const getBarColor = () => { switch (status.status) { case "Connected": return "bg-green-400" case "Degraded": return "bg-yellow-400" case "Disconnected": return "bg-red-500" default: return "bg-gray-400" } } return (

onHover(status, e)} onMouseLeave={onLeave} title={`${status.status} - ${new Date(status.time).toLocaleString()}`} /> ) } [V0_FILE]typescriptreact:file="machine-health-timeline.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { CheckCircle, AlertCircle } from "lucide-react" import type { Machine, MachineStatus, DateRange } from "./types/machine-health" import { generateMockData } from "./utils/mock-data-generator" import { calculateUptime, formatDate } from "./utils/date-utils" import { TimelineBar } from "./components/timeline-bar" import { StatusTooltip } from "./components/status-tooltip" import { Legend } from "./components/legend" const dateRanges: DateRange[] = [ { label: "24h", days: 1 }, { label: "7d", days: 7 }, { label: "30d", days: 30 }, { label: "90d", days: 90 }, ] export default function MachineHealthTimeline() { const [machines, setMachines] = useState([]) const [selectedDateRange, setSelectedDateRange] = useState(dateRanges[1]) const [selectedMachine, setSelectedMachine] = useState("all") const [hoveredStatus, setHoveredStatus] = useState<{ status: MachineStatus position: { x: number; y: number } } | null>(null) useEffect(() => { const mockData = generateMockData(selectedDateRange.days) setMachines(mockData) }, [selectedDateRange]) const filteredMachines = selectedMachine === "all" ? machines : machines.filter((m) => m.id === selectedMachine) const handleStatusHover = (status: MachineStatus, event: React.MouseEvent) => { setHoveredStatus({ status, position: { x: event.clientX, y: event.clientY }, }) } const handleStatusLeave = () => { setHoveredStatus(null) } const overallUptime = machines.length > 0 ? machines.reduce((acc, machine) => acc + calculateUptime(machine.status), 0) / machines.length : 0 const allOperational = overallUptime > 95 // Generate time labels for the timeline const getTimeLabels = () => { if (selectedDateRange.days === 1) { return ["00:00", "06:00", "12:00", "18:00", "24:00"] } else if (selectedDateRange.days <= 7) { const labels = [] for (let i = selectedDateRange.days - 1; i >= 0; i--) { const date = new Date() date.setDate(date.getDate() - i) labels.push(formatDate(date)) } return labels } else { const labels = [] const interval = Math.ceil(selectedDateRange.days / 5) for (let i = selectedDateRange.days - 1; i >= 0; i -= interval) { const date = new Date() date.setDate(date.getDate() - i) labels.push(formatDate(date)) } return labels.reverse() } } const timeLabels = getTimeLabels() return (

{/* Header */}

{allOperational ? ( ) : ( )}

{allOperational ? "All Systems Operational" : "Some Systems Need Attention"}

Machine Health Dashboard

{/* Filters and Tabs */}

{dateRanges.map((range) => ( ))}

{/* Timeline */}

{filteredMachines.map((machine) => { const uptime = calculateUptime(machine.status) const isOperational = uptime > 95 return (

{isOperational ? ( ) : ( )}

{machine.name}

{isOperational ? "Operational" : "Issues Detected"}

{uptime.toFixed(3)}%

Uptime

{/* Timeline Container */}

{/* Timeline Bars */}

{machine.status.map((status, index) => ( ))}

{/* Time Labels */}

{timeLabels.map((label, index) => ( {label} ))}

{/* Status Summary */}

{( (machine.status.filter((s) => s.status === "Connected").length / machine.status.length) * 100 ).toFixed(1)} % Connected

{( (machine.status.filter((s) => s.status === "Degraded").length / machine.status.length) * 100 ).toFixed(1)} % Degraded

{( (machine.status.filter((s) => s.status === "Disconnected").length / machine.status.length) * 100 ).toFixed(1)} % Down

) })}

{/* Legend */} {/* Tooltip */} {hoveredStatus && ( setHoveredStatus(null)} /> )}

) } [V0_FILE]typescriptreact:file="utils/mock-data-generator.ts" isQuickEdit="true" import type { MachineStatus, Machine } from "../types/machine-health" const breakdownCategories = [ { category: "Mechanical Failure", subCategory: "Bearing wear", code: 41 }, { category: "Electrical Issue", subCategory: "Power fluctuation", code: 42 }, { category: "Software Error", subCategory: "Control system fault", code: 43 }, { category: "Network Issue", subCategory: "Communication loss", code: 44 }, { category: "Maintenance", subCategory: "Scheduled downtime", code: 45 }, { category: "Sensor Failure", subCategory: "Temperature sensor", code: 46 }, { category: "Performance", subCategory: "Reduced efficiency", code: 47 }, ] export function generateMockData(days = 7): Machine[] { const machines = [ "Production Line A", "Production Line B", "Packaging Unit 1", "Packaging Unit 2", "Quality Control Station", ] return machines.map((machineName, machineIndex) => { const status: MachineStatus[] = [] const now = new Date() // Different reliability profiles for each machine const baseReliability = 0.92 + machineIndex * 0.015 // Generate intervals based on selected time range const intervalsPerDay = days === 1 ? 96 : days <= 7 ? 48 : days <= 30 ? 24 : 12 const intervalMinutes = days === 1 ? 15 : days <= 7 ? 30 : days <= 30 ? 60 : 120 for (let day = days - 1; day >= 0; day--) { for (let interval = 0; interval < intervalsPerDay; interval++) { const time = new Date(now) time.setDate(time.getDate() - day) time.setHours(0, 0, 0, 0) time.setMinutes(interval * intervalMinutes) // Create some patterns - more issues during certain hours or days let reliability = baseReliability // Weekend effect (slightly more reliable) if (time.getDay() === 0 || time.getDay() === 6) { reliability += 0.02 } // Night shift effect (slightly less reliable) const hour = time.getHours() if (hour >= 22 || hour <= 6) { reliability -= 0.01 } // Random incidents const rand = Math.random() if (rand < reliability) { status.push({ time: time.toISOString(), status: "Connected", }) } else if (rand < reliability + 0.05) { // Degraded performance const breakdown = breakdownCategories[Math.floor(Math.random() * breakdownCategories.length)] status.push({ time: time.toISOString(), status: "Degraded", code: breakdown.code, type: "Performance Issue", category: breakdown.category, subCategory: breakdown.subCategory, }) } else { // Disconnected const breakdown = breakdownCategories[Math.floor(Math.random() * breakdownCategories.length)] status.push({ time: time.toISOString(), status: "Disconnected", code: breakdown.code, type: "Breakdown", category: breakdown.category, subCategory: breakdown.subCategory, }) } } } return { id: `machine-${machineIndex + 1}`, name: machineName, status, } }) }