Instructor Dashboard Interface - Copy this Html, Tailwind Component to your project
<template>-<div-class="dashboard">-<!---Header-Section--->-<header-class="header">-<div-class="welcome">-<span-class="text-gray-600-mr-2"><i-data-feather="user"></i></span>-Hello,-Instructor!-</div>-<nav-class="nav">-<button-class="nav-button"-@click="goToMilestones">Milestones</button>-<button-class="nav-button"-@click="goToTeamOverview">Team-Overview</button>-<!---<button-class="nav-button"-@click="notifications">🔔</button>--->-<button-class="nav-button"-@click="logout">Logout</button>-</nav>-</header>-<!---Main-Content--->-<main>-<h1-class="dashboard-title">Dashboard</h1>-<section-class="stats">-<p>Number-of-Students-Enrolled:-60</p>-<p>Number-of-Teams:-10</p>-</section>-<section-class="content">-<!---Team-Progress--->-<div-class="card-progress-card">-<h2>Teams-Progress</h2>-<ul>-<li>Team-1:-<progress-:value="20"-max="100"></progress>-20%-completed</li>-<li>Team-2:-<progress-:value="52"-max="100"></progress>-52%-completed</li>-<li>Team-3:-<progress-:value="30"-max="100"></progress>-30%-completed</li>-</ul>-</div>-<!---Deadlines--->-<div-class="card-deadlines-card">-<h2>Deadlines</h2>-<ul>-<li>Milestone-1:-xx.xx.20xx-(due-date-passed)</li>-<li>Milestone-2:-xx.xx.20xx-(Due-in-2-days)</li>-</ul>-</div>-<!---GitHub-Activity--->-<div-class="card-github-card">-<h2>GitHub-Activity</h2>-<select-v-model="selectedTeam"-@change="filterByTeam">-<option-value="">Filter-By-Team</option>-<option-v-for="team-in-teams"-:key="team.id"-:value="team.name">{{-team.name-}}</option>-</select>-<canvas-id="githubActivityChart"></canvas>-</div>-</section>-<!---AI-Generated-Insights--->-<section-class="insights">-<div-class="card-insights-card">-<h2>-<img-src="@/assets/ai-technology.png"-alt="Gen-AI-Icon"-class="gen-ai-icon">-AI-Generated-Insights-</h2>-<ul>-<li>Team-2's-commit-frequency-has-decreased.-They-may-need-assistance.</li>-<li>Based-on-current-progress,-75%-of-teams-are-on-track-to-complete-the-next-milestone-on-time.</li>-</ul>-</div>-</section>-</main>-</div>-</template>-<script>-import-feather-from-'feather-icons';-import-{-onMounted,-ref-}-from-'vue';-import-{-Chart,-registerables-}-from-'chart.js';-Chart.register(...registerables);-export-default-{-name:-'Instructor-Dashboard',-setup()-{-const-teams-=-ref([-{-id:-1,-name:-'Team-1'-},-{-id:-2,-name:-'Team-2'-},-{-id:-3,-name:-'Team-3'-},-]);-const-selectedTeam-=-ref('');-const-filterByTeam-=-()-=>-{-//-Add-filtering-logic-here-if-needed-};-onMounted(()-=>-{-feather.replace()-const-ctx-=-document.getElementById('githubActivityChart').getContext('2d');-new-Chart(ctx,-{-type:-'line',-data:-{-labels:-['Mon',-'Tue',-'Wed',-'Thu',-'Fri'],-datasets:-[-{-label:-'Commits',-data:-[5,-3,-7,-4,-2],-borderColor:-'rgba(75,-192,-192,-1)',-borderWidth:-2,-},-],-},-options:-{-responsive:-true,-plugins:-{-legend:-{-display:-false,-},-},-scales:-{-y:-{-beginAtZero:-true,-},-},-},-});-});-return-{-teams,-selectedTeam,-filterByTeam,-};-},-methods:-{-goToMilestones()-{-this.$router.push('/milestone-list');-},-goToTeamOverview()-{-this.$router.push('/teams-overview');-},-notifications()-{-//-Trigger-notifications-},-logout()-{-this.$router.push('/login');-},-},-};-</script>-<style-scoped>-.dashboard-{-font-family:-Arial,-sans-serif;-color:-#333;-padding:-20px;-}-.header-{-display:-flex;-justify-content:-space-between;-align-items:-center;-background-color:-#f8f9fa;-padding:-10px-20px;-border-radius:-8px;-box-shadow:-0px-2px-5px-rgba(0,-0,-0,-0.1);-}-.welcome-{-font-weight:-bold;-font-size:-1.2em;-display:-flex;-align-items:-center;-color:-#333;-}-.nav-button-{-background-color:-#170528;-color:-#fff;-border:-none;-padding:-8px-14px;-margin:-0-5px;-border-radius:-5px;-cursor:-pointer;-font-size:-0.9em;-transition:-background-0.3s;-}-.nav-button:hover-{-background-color:-#d4bfd4;-}-.dashboard-title-{-font-size:-2em;-margin-top:-20px;-text-align:-center;-color:-#555;-}-.stats-{-text-align:-center;-font-size:-1.1em;-color:-#555;-margin-bottom:-20px;-}-.content-{-display:-grid;-grid-template-columns:-repeat(auto-fit,-minmax(250px,-1fr));-gap:-20px;-margin-top:-20px;-}-.card-{-padding:-20px;-background-color:-#ffffff;-border:-1px-solid-#e0e0e0;-border-radius:-8px;-box-shadow:-0px-4px-8px-rgba(0,-0,-0,-0.1);-transition:-transform-0.2s;-}-.card:hover-{-transform:-translateY(-5px);-}-h2-{-margin-bottom:-10px;-font-size:-1.3em;-color:green;-}-.progress-card,-.deadlines-card,-.github-card-{-background-color:-#f1f9ff;-}-.progress-progress,-.deadlines-progress,-.github-progress-{-width:-100%;-height:-12px;-margin-top:-5px;-}-select-{-width:-100%;-padding:-8px;-border:-1px-solid-#ccc;-border-radius:-4px;-margin-top:-10px;-}-canvas-{-width:-100%-!important;-max-height:-200px;-}-.insights-{-margin-top:-20px;-}-.gen-ai-icon-{-width:-24px;-height:-24px;-margin-right:-8px;-}-.insights-card-{-background-color:-#eaf9e1;-color:-#093602;-padding:-15px;-border-radius:-8px;-font-size:-0.9em;-}-.insights-card-ul-{-list-style-type:-disc;-padding-left:-20px;-}-.insights-card-li-{-margin-bottom:-5px;-}-</style>
