[V0_FILE]typescriptreact:file="dashboard.tsx" isEdit="true" "use client" import React from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { ChartContainer, ChartTooltipContent } from "@/components/ui/chart" import { LineChart, Line, XAxis, YAxis, BarChart, Bar, PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend, } from "recharts" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" const incidentData = [ { date: "2023-01", incidents: 120, resolvedWithinSLA: 96 }, { date: "2023-02", incidents: 150, resolvedWithinSLA: 120 }, { date: "2023-03", incidents: 180, resolvedWithinSLA: 135 }, { date: "2023-04", incidents: 140, resolvedWithinSLA: 112 }, { date: "2023-05", incidents: 160, resolvedWithinSLA: 136 }, { date: "2023-06", incidents: 190, resolvedWithinSLA: 152 }, ] const categoryData = [ { category: "Network", count: 80, avgResolutionTime: 4.5 }, { category: "Software", count: 65, avgResolutionTime: 3.2 }, { category: "Hardware", count: 50, avgResolutionTime: 5.1 }, { category: "Security", count: 40, avgResolutionTime: 2.8 }, { category: "User Access", count: 35, avgResolutionTime: 1.5 }, ] const priorityData = [ { name: "High", value: 30, avgResponseTime: 0.5 }, { name: "Medium", value: 50, avgResponseTime: 2 }, { name: "Low", value: 20, avgResponseTime: 4 }, ] const COLORS = ["hsl(var(--chart-1))", "hsl(var(--chart-2))", "hsl(var(--chart-3))"] export default function ServiceNowDashboard() { const [activeCard, setActiveCard] = React.useState(0) const cards = [ { title: "Incident Trends and SLA Compliance", description: "Monthly trend of incident volume and SLA compliance", chart: ( } /> ), question: "Given this trend, which incident categories are most impacting our SLA compliance?", }, { title: "Incident Categories and Resolution Time", description: "Distribution of incidents by category and their average resolution time", chart: ( } /> ), question: "How does the priority distribution of these incidents affect our response times?", }, { title: "Incident Priority and Response Time", description: "Breakdown of incidents by priority and their average response time", chart: ( `${name} ${(percent * 100).toFixed(0)}%`} > {priorityData.map((entry, index) => ( ))} } /> ), question: "Based on this data, what actionable insights can we derive to improve our incident management process?", }, ] return (

ServiceNow Incident Analytics Dashboard

{cards.map((card, index) => ( activeCard ? "opacity-50" : ""}> {card.title} {card.description} {card.chart} {index < cards.length - 1 && (

{card.question}

)} ))} Key Insights and Action Items

Incident Volume Trend: There's a 58% increase in incidents from January to June, with an average monthly growth rate of 9.6%.
Action: Conduct a root cause analysis to identify factors contributing to this growth and implement preventive measures.
SLA Compliance: On average, 80% of incidents are resolved within SLA, but this rate has decreased from 83% in Q1 to 78% in Q2.
Action: Review and optimize the incident resolution process, focusing on Network and Hardware categories which have the longest average resolution times (4.5 and 5.1 hours respectively).
Category Impact: Network issues account for 29.6% of all incidents, followed by Software at 24.1%.
Action: Allocate additional resources to the Network team and implement proactive monitoring for early detection of network issues.
Priority Distribution: 50% of incidents are Medium priority, with an average response time of 2 hours.
Action: Reevaluate the priority assignment criteria and consider automating initial triage to improve response times across all priority levels.

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This