Spaces:
Running
Running
generate a comprehensive html code from this link https://cataler.samanage.com/incidents?&report_id=9437665 I want it to have the HOME, DASHBOARD, SERVICE DESK, ASSETS, TASKS, PROCUMENT, RISK MANAGEMENT, ANALYTICS WITH AI FEATURES, HELP AND SETUP SIDE LELT MENU, all these left Menu should be accessible through Java and Make them Active when you select them, this side should have a Dark Mode Toggle feature on the top right corner, just make everything alive and the ccs UI much alive and modern.
06f81ca
verified
| <html lang="en" class="h-full" data-theme="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Samanage Sentinel</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| dark: { | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .sidebar-item.active { | |
| background-color: rgba(14, 165, 233, 0.1); | |
| border-left: 4px solid #0ea5e9; | |
| } | |
| .sidebar-item.active i { | |
| color: #0ea5e9; | |
| } | |
| .sidebar-item:hover:not(.active) { | |
| background-color: rgba(241, 245, 249, 0.5); | |
| } | |
| .dark .sidebar-item:hover:not(.active) { | |
| background-color: rgba(30, 41, 59, 0.5); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .transition-all { | |
| transition-property: all; | |
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
| transition-duration: 150ms; | |
| } | |
| </style> | |
| </head> | |
| <body class="h-full bg-gray-50 dark:bg-gray-900 transition-colors duration-300"> | |
| <div class="flex h-full overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 h-full border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-900"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center"> | |
| <i data-feather="shield" class="text-primary-600 dark:text-primary-400 h-6 w-6"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-800 dark:text-white">Samanage</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <nav class="flex-1 space-y-2"> | |
| <a href="#" class="sidebar-item active flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="home" class="mr-3 h-5 w-5"></i> | |
| Home | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="activity" class="mr-3 h-5 w-5"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="life-buoy" class="mr-3 h-5 w-5"></i> | |
| Service Desk | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="hard-drive" class="mr-3 h-5 w-5"></i> | |
| Assets | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="check-square" class="mr-3 h-5 w-5"></i> | |
| Tasks | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="shopping-cart" class="mr-3 h-5 w-5"></i> | |
| Procurement | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="alert-octagon" class="mr-3 h-5 w-5"></i> | |
| Risk Management | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="bar-chart-2" class="mr-3 h-5 w-5"></i> | |
| Analytics with AI | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="help-circle" class="mr-3 h-5 w-5"></i> | |
| Help | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="settings" class="mr-3 h-5 w-5"></i> | |
| Setup | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top navbar --> | |
| <div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-dark-900"> | |
| <div class="flex items-center"> | |
| <button class="md:hidden mr-2 text-gray-500 dark:text-gray-400"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <h1 class="text-lg font-semibold text-gray-800 dark:text-white">Dashboard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-dark-800 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm w-64"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400 dark:text-gray-500 h-4 w-4"></i> | |
| </div> | |
| <button id="theme-toggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400"> | |
| <i data-feather="moon" id="theme-icon-dark" class="h-5 w-5 hidden"></i> | |
| <i data-feather="sun" id="theme-icon-light" class="h-5 w-5"></i> | |
| </button> | |
| <button class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| <div class="flex items-center"> | |
| <div class="h-8 w-8 rounded-full bg-primary-500 flex items-center justify-center text-white font-medium">JD</div> | |
| <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-200 hidden md:inline">John Doe</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile sidebar --> | |
| <div id="mobile-sidebar" class="fixed inset-0 z-40 hidden"> | |
| <div class="absolute inset-0 bg-gray-600 bg-opacity-75" aria-hidden="true"></div> | |
| <div class="relative flex flex-col w-full max-w-xs h-full bg-white dark:bg-dark-900"> | |
| <div class="absolute top-0 right-0 -mr-12 pt-2"> | |
| <button type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"> | |
| <span class="sr-only">Close sidebar</span> | |
| <i data-feather="x" class="h-6 w-6 text-white"></i> | |
| </button> | |
| </div> | |
| <div class="flex-shrink-0 flex items-center px-4 h-16 border-b border-gray-200 dark:border-gray-700"> | |
| <i data-feather="shield" class="text-primary-600 dark:text-primary-400 h-6 w-6"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-800 dark:text-white">Samanage</span> | |
| </div> | |
| <div class="flex-1 flex flex-col overflow-y-auto"> | |
| <nav class="flex-1 px-2 py-4 space-y-2"> | |
| <a href="#" class="sidebar-item active flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="home" class="mr-3 h-5 w-5"></i> | |
| Home | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="activity" class="mr-3 h-5 w-5"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="life-buoy" class="mr-3 h-5 w-5"></i> | |
| Service Desk | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="hard-drive" class="mr-3 h-5 w-5"></i> | |
| Assets | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="check-square" class="mr-3 h-5 w-5"></i> | |
| Tasks | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="shopping-cart" class="mr-3 h-5 w-5"></i> | |
| Procurement | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="alert-octagon" class="mr-3 h-5 w-5"></i> | |
| Risk Management | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="bar-chart-2" class="mr-3 h-5 w-5"></i> | |
| Analytics with AI | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="help-circle" class="mr-3 h-5 w-5"></i> | |
| Help | |
| </a> | |
| <a href="#" class="sidebar-item flex items-center px-4 py-2 text-sm font-medium rounded-lg text-gray-700 dark:text-gray-300"> | |
| <i data-feather="settings" class="mr-3 h-5 w-5"></i> | |
| Setup | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main content area --> | |
| <div class="flex-1 overflow-auto p-6 bg-gray-50 dark:bg-gray-900"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="card-hover bg-white dark:bg-dark-800 rounded-lg shadow p-6 transition-all"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400"> | |
| <i data-feather="alert-triangle" class="h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Open Incidents</p> | |
| <p class="text-2xl font-semibold text-gray-800 dark:text-white">42</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-blue-600 dark:text-blue-400"> | |
| <span>+2.5% from yesterday</span> | |
| <i data-feather="arrow-up" class="ml-1 h-4 w-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-hover bg-white dark:bg-dark-800 rounded-lg shadow p-6 transition-all"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400"> | |
| <i data-feather="check-circle" class="h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Resolved Today</p> | |
| <p class="text-2xl font-semibold text-gray-800 dark:text-white">18</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-green-600 dark:text-green-400"> | |
| <span>+15% from yesterday</span> | |
| <i data-feather="arrow-up" class="ml-1 h-4 w-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-hover bg-white dark:bg-dark-800 rounded-lg shadow p-6 transition-all"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400"> | |
| <i data-feather="clock" class="h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Avg. Resolution Time</p> | |
| <p class="text-2xl font-semibold text-gray-800 dark:text-white">4.2h</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-yellow-600 dark:text-yellow-400"> | |
| <span>-0.5h from last week</span> | |
| <i data-feather="arrow-down" class="ml-1 h-4 w-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-hover bg-white dark:bg-dark-800 rounded-lg shadow p-6 transition-all"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400"> | |
| <i data-feather="bar-chart-2" class="h-6 w-6"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-500 dark:text-gray-400">SLA Compliance</p> | |
| <p class="text-2xl font-semibold text-gray-800 dark:text-white">92%</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center text-sm text-purple-600 dark:text-purple-400"> | |
| <span>+3% from last month</span> | |
| <i data-feather="arrow-up" class="ml-1 h-4 w-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts and Incident List --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Incident Trend Chart --> | |
| <div class="lg:col-span-2 bg-white dark:bg-dark-800 rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Incident Trends</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-xs font-medium rounded-lg bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400">Week</button> | |
| <button class="px-3 py-1 text-xs font-medium rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">Month</button> | |
| <button class="px-3 py-1 text-xs font-medium rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">Quarter</button> | |
| </div> | |
| </div> | |
| <div class="h-80"> | |
| <canvas id="incidentTrendChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Priority Distribution --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow p-6"> | |
| <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Priority Distribution</h2> | |
| <div class="h-80"> | |
| <canvas id="priorityChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Incidents --> | |
| <div class="bg-white dark:bg-dark-800 rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700"> | |
| <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Recent Incidents</h2> | |
| </div> | |
| <div class="divide-y divide-gray-200 dark:divide-gray-700"> | |
| <!-- Incident 1 --> | |
| <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <a href="#" class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">#INC-987654</a> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Unable to access company VPN</p> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-400">Critical</span> | |
| <span class="text-sm text-gray-500 dark:text-gray-400">Today, 10:30</span> | |
| <i data-feather="chevron-right" class="h-4 w-4 text-gray-400 dark:text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Incident 2 --> | |
| <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <a href="#" class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">#INC-987653</a> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Email server outage - inbound emails delayed</p> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-400">High</span> | |
| <span class="text-sm text-gray-500 dark:text-gray-400">Today, 09:15</span> | |
| <i data-feather="chevron-right" class="h-4 w-4 text-gray-400 dark:text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Incident 3 --> | |
| <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <a href="#" class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">#INC-987652</a> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Printer not working in Marketing department</p> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-400">Medium</span> | |
| <span class="text-sm text-gray-500 dark:text-gray-400">Today, 08:45</span> | |
| <i data-feather="chevron-right" class="h-4 w-4 text-gray-400 dark:text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Incident 4 --> | |
| <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <a href="#" class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">#INC-987651</a> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Request for new software license</p> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400">Low</span> | |
| <span class="text-sm text-gray-500 dark:text-gray-400">Yesterday, 16:30</span> | |
| <i data-feather="chevron-right" class="h-4 w-4 text-gray-400 dark:text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Incident 5 --> | |
| <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <a href="#" class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">#INC-987650</a> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Password reset for accounting system</p> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-400">Info</span> | |
| <span class="text-sm text-gray-500 dark:text-gray-400">Yesterday, 15:20</span> | |
| <i data-feather="chevron-right" class="h-4 w-4 text-gray-400 dark:text-gray-500"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 dark:bg-gray-800 text-right"> | |
| <a href="#" class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">View all incidents</a> | |
| </div> | |
| </div> | |
| <!-- AI Recommendations --> | |
| <div class="mt-6 bg-white dark:bg-dark-800 rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between"> | |
| <h2 class="text-lg font-semibold text-gray-800 dark:text-white">AI Recommendations</h2> | |
| <span class="px-2 py-1 text-xs font-medium rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 flex items-center"> | |
| <i data-feather="zap" class="h-3 w-3 mr-1"></i> | |
| Powered by AI | |
| </span> | |
| </div> | |
| <div class="divide-y divide-gray-200 dark:divide-gray-700"> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400"> | |
| <i data-feather="trending-up" class="h-5 w-5"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-800 dark:text-white">Increase in VPN-related incidents</h3> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">AI has detected a 45% increase in VPN access issues over the past week compared to the monthly average.</p> | |
| <div class="mt-2"> | |
| <button class="text-xs font-medium text-primary-600 dark:text-primary-400 hover:underline">View analysis</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center text-green-600 dark:text-green-400"> | |
| <i data-feather="clock" class="h-5 w-5"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-800 dark:text-white">Resolution time improvement</h3> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">AI suggests implementing the new knowledge base could reduce resolution time by ~15% based on similar cases.</p> | |
| <div class="mt-2"> | |
| <button class="text-xs font-medium text-primary-600 dark:text-primary-400 hover:underline">Learn more</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center text-yellow-600 dark:text-yellow-400"> | |
| <i data-feather="users" class="h-5 w-5"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-sm font-medium text-gray-800 dark:text-white">Team workload alert</h3> | |
| <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">The AI has identified that 3 team members are handling 65% of high-priority incidents. Consider redistributing workload.</p> | |
| <div class="mt-2"> | |
| <button class="text-xs font-medium text-primary-600 dark:text-primary-400 hover:underline">View distribution</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Dark mode toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const themeIconDark = document.getElementById('theme-icon-dark'); | |
| const themeIconLight = document.getElementById('theme-icon-light'); | |
| themeToggle.addEventListener('click', () => { | |
| const html = document.documentElement; | |
| if (html.getAttribute('data-theme') === 'dark') { | |
| html.setAttribute('data-theme', 'light'); | |
| themeIconDark.classList.add('hidden'); | |
| themeIconLight.classList.remove('hidden'); | |
| localStorage.setItem('theme', 'light'); | |
| } else { | |
| html.setAttribute('data-theme', 'dark'); | |
| themeIconLight.classList.add('hidden'); | |
| themeIconDark.classList.remove('hidden'); | |
| localStorage.setItem('theme', 'dark'); | |
| } | |
| }); | |
| // Check for saved theme preference | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| document.documentElement.setAttribute('data-theme', 'dark'); | |
| themeIconLight.classList.add('hidden'); | |
| themeIconDark.classList.remove('hidden'); | |
| } else { | |
| document.documentElement.setAttribute('data-theme', 'light'); | |
| themeIconDark.classList.add('hidden'); | |
| themeIconLight.classList.remove('hidden'); | |
| } | |
| // Mobile sidebar toggle | |
| document.querySelector('.md\\:hidden button').addEventListener('click', () => { | |
| document.getElementById('mobile-sidebar').classList.remove('hidden'); | |
| }); | |
| document.querySelector('#mobile-sidebar button').addEventListener('click', () => { | |
| document.getElementById('mobile-sidebar').classList.add('hidden'); | |
| }); | |
| // Sidebar navigation | |
| document.querySelectorAll('.sidebar-item').forEach(item => { | |
| item.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active')); | |
| this.classList.add('active'); | |
| // Close mobile sidebar if open | |
| document.getElementById('mobile-sidebar').classList.add('hidden'); | |
| }); | |
| }); | |
| // Charts | |
| const incidentTrendCtx = document.getElementById('incidentTrendChart').getContext('2d'); | |
| const incidentTrendChart = new Chart(incidentTrendCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], | |
| datasets: [ | |
| { | |
| label: 'New Incidents', | |
| data: [12, 19, 15, 22, 18, 8, 10], | |
| borderColor: '#0ea5e9', | |
| backgroundColor: 'rgba(14, 165, 233, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Resolved Incidents', | |
| data: [8, 12, 10, 14, 16, 6, 9], | |
| borderColor: '#10b981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| labels: { | |
| color: '#6b7280' | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(229, 231, 235, 0.3)' | |
| }, | |
| ticks: { | |
| color: '#6b7280' | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| }, | |
| ticks: { | |
| color: '#6b7280' | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| const priorityCtx = document.getElementById('priorityChart').getContext('2d'); | |
| const priorityChart = new Chart(priorityCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Critical', 'High', 'Medium', 'Low', 'Info'], | |
| datasets: [{ | |
| data: [5, 12, 20, 15, 8], | |
| backgroundColor: [ | |
| '#ef4444', | |
| '#f59e0b', | |
| '#3b82f6', | |
| '#10b981', | |
| '#9ca3af' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| labels: { | |
| color: '#6b7280' | |
| } | |
| } | |
| }, | |
| cutout: '70%' | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |