Interactive Dashboard Component - Copy this Html, Bootstrap Component to your project
<template> <div class="container mt 4"> <header class="text start mb 5"> <h1 class="mb 4">KM System Dashboard</h1> </header> <div class="row mb 5"> <div class="col md 4 mb 3"> <div class="card h 100 shadow sm border 0 bg light"> <div class="card body"> <h5 class="card title fw bold mb 3 border bottom pb 2 text primary">Data Sources</h5> <ul class="list unstyled"> <li class="mb 2 d flex align items center"> <i class="bi bi hdd network me 2 text secondary"></i> <span>HR SharePoint</span> </li> <li class="mb 2 d flex align items center"> <i class="bi bi cloud me 2 text secondary"></i> <span>Finance OneDrive</span> </li> <li class="mb 2 d flex align items center"> <i class="bi bi folder me 2 text secondary"></i> <span>Local Files</span> </li> </ul> </div> </div> </div> <! Recent Sync Activities Card > <div class="col md 4 mb 3"> <div class="card h 100 shadow sm border 0 bg light"> <div class="card body"> <h5 class="card title fw bold mb 3 border bottom pb 2 text primary">Recent Sync Activities</h5> <ul class="list unstyled"> <li class="mb 2 d flex align items center"> <i class="bi bi check circle fill me 2 text success"></i> <span>Sync completed 10 mins ago</span> </li> <li class="mb 2 d flex align items center"> <i class="bi bi x circle fill me 2 text danger"></i> <span>Sync failed 5 mins ago</span> </li> <li class="mb 2 d flex align items center"> <i class="bi bi dash circle fill me 2 text secondary"></i> <span>No sync required</span> </li> </ul> </div> </div> </div> <! Users Card > <div class="col md 4 mb 3"> <div class="card h 100 shadow sm border 0 bg light"> <div class="card body"> <h5 class="card title fw bold mb 3 border bottom pb 2 text primary">Users</h5> <ul class="list unstyled"> <li class="mb 2 d flex align items center justify content between"> <span><i class="bi bi person fill gear me 2 text info"></i>Admins</span> <span class="badge bg info rounded pill">2</span> </li> <li class="mb 2 d flex align items center justify content between"> <span><i class="bi bi people fill me 2 text primary"></i>Users</span> <span class="badge bg primary rounded pill">15</span> </li> <li class="mb 2 d flex align items center justify content between"> <span><i class="bi bi pencil square me 2 text success"></i>Editors</span> <span class="badge bg success rounded pill">5</span> </li> </ul> </div> </div> </div> </div> <div class=" d flex justify content end"> <router link to="/app/datasource" custom v slot="{ navigate }"> <button class="btn btn primary " @click="navigate">Add data source</button> </router link> <router link to="/app/file management" custom v slot="{ navigate }"> <button class="btn btn primary mx 3 " @click="navigate">Upload files</button> </router link> <button class="btn btn primary ">Manage users</button> <button class="btn btn primary mx 3 ">View logs</button> </div> </div> </template> <script> export default { name: 'AppDashboard', // Add any necessary component logic here } </script> <style scoped> .card { transition: transform 0.3s ease in out, box shadow 0.3s ease in out; } .card:hover { transform: translateY( 5px); box shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; } .card title { font size: 1.25rem; } .list unstyled li { font size: 1rem; } </style> make this dashboard more proffesioanl with cards and charts,
