APK FET
The School Management Dashboard, utilizing a professional and organized aesthetic based on clear visual hierarchy, is designed to provide administrators and faculty with immediate oversight of core educational metrics. The primary aesthetic centers on high information density paired with clean organizational grouping, ensuring that data related to students, staff, and academics is instantly accessible. The color palette prioritizes soft, reliable blues and greens for primary data indicators, such as overall Enrollment and positive Attendance rates, while reserving a more alert color, like a strong gold or orange, for critical items such as disciplinary reports or overdue assignment submission tasks. The central layout divides the screen into distinct sections for quick enrollment statistics, student performance summaries, and staff deployment information, optimizing the interface for glanceability and efficient task management across all device sizes.
The main navigation is handled by a fixed, clean sidebar that groups related functions logically, such as Student Records, Financials, Timetables, and Curriculum Management. This sidebar utilizes a light background to integrate seamlessly with the modern, professional feel of the system, contrasting it with bold, easily readable icons and text for its navigation links. The links use a soft blue accent when active to clearly and calmly indicate the current view the user is focused on. The top bar is reserved for universal utility functions, including a high-speed global search feature that allows users to locate any student or teacher record instantly, alongside a personalized notification center that alerts users to pending approvals, high-priority attendance issues, or approaching grade submission deadlines.
Data presentation is primarily achieved through modular summary cards and integrated, interactive data tables. The summary cards are designed with minimal borders and feature clear, large numbers, using small, context-appropriate icons (such as a book for classes or an academic cap for students) to clearly denote the type of metric being displayed. These cards employ subtle internal color blocks that correspond to performance status, using green for favorable metrics like high current attendance rates and a softer red for less favorable ones like low grade averages. Tables, where detailed records are displayed, feature sortable columns and immediate filtering options, which ensures that managing large datasets of students or classes remains an efficient process. Key interactive features include smooth transitions when users navigate between different modules and a fully responsive design that intelligently adapts dense list views into easily scrollable, card-like displays on mobile devices, guaranteeing that administrators and staff maintain full functionality while operating remotely or on the go. Finally, the system enforces a robust user permission model in all views, ensuring that staff members only see metrics and controls that are explicitly relevant to their specific roles, such as teachers accessing only their assigned class grades and school principals viewing school-wide operational summaries.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>School Management Admin Dashboard</title>
<!-- Load Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #f9fafb; /* Light background */
}
/* Custom scrollbar for aesthetics */
.custom-scroll::-webkit-scrollbar {
width: 6px;
}
.custom-scroll::-webkit-scrollbar-thumb {
background-color: #d1d5db;
border-radius: 3px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #f3f4f6;
}
/* Card styling */
.metric-card {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
}
.metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
/* Active sidebar link style (Soft Blue Accent) */
.nav-link.active {
color: #2563eb; /* blue-600 */
background-color: #eff6ff; /* blue-50 */
font-weight: 600;
}
</style>
</head>
<body>
<!-- Sidebar (Fixed, Clean, Light Background) -->
<div id="sidebar" class="fixed inset-y-0 left-0 transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out z-40 w-64 bg-white border-r border-gray-200 p-4 flex flex-col custom-scroll">
<!-- School Logo/Branding -->
<div class="flex items-center pb-6 border-b border-gray-100">
<svg class="w-8 h-8 text-blue-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l-9 5 9 5 9-5-9-5zm0 0v-5m0 10v-5m0-5V4"></path></svg>
<h1 class="text-xl font-bold text-gray-800">School Admin Pro</h1>
<!-- Mobile close button -->
<button id="close-sidebar" class="md:hidden ml-auto p-2 text-gray-500 hover:text-gray-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Navigation Links (Organized) -->
<nav class="mt-8 flex-grow space-y-1">
<a href="#" data-target="dashboard" class="nav-link flex items-center p-3 text-sm text-gray-600 rounded-lg hover:bg-gray-100 transition duration-150">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
Dashboard
</a>
<a href="#" data-target="records" class="nav-link flex items-center p-3 text-sm text-gray-600 rounded-lg hover:bg-gray-100 transition duration-150">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M10 20v-2a3 3 0 00-3-3H4a3 3 0 00-3 3v2M18 20v-2a3 3 0 01-3-3h-4a3 3 0 01-3-3v-2M18 12a4 4 0 100-8 4 4 0 000 8z"></path></svg>
Student Records
</a>
<a href="#" data-target="curriculum" class="nav-link flex items-center p-3 text-sm text-gray-600 rounded-lg hover:bg-gray-100 transition duration-150">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5A3.5 3.5 0 004 8.5c0 1.188.75 2.158 1.875 2.5v.5C6.75 12.342 7.5 13.312 7.5 14.5A3.5 3.5 0 0011 18c1.618 0 3.093-.538 4.25-1.464m-4.25-6.75C13.168 5.477 14.754 5 16.5 5A3.5 3.5 0 0120 8.5c0 1.188-.75 2.158-1.875 2.5v.5C17.25 12.342 16.5 13.312 16.5 14.5A3.5 3.5 0 0113 18c-1.618 0-3.093-.538-4.25-1.464"></path></svg>
Curriculum Mgmt
</a>
<a href="#" data-target="timetable" class="nav-link flex items-center p-3 text-sm text-gray-600 rounded-lg hover:bg-gray-100 transition duration-150">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
Timetables
</a>
<a href="#" data-target="financials" class="nav-link flex items-center p-3 text-sm text-gray-600 rounded-lg hover:bg-gray-100 transition duration-150">
<svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8v8m0-8h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Financials
</a>
</nav>
<!-- User Permission Info (Placeholder for robust model) -->
<div class="mt-8 pt-4 border-t border-gray-100">
<p class="text-xs text-gray-500 font-semibold mb-2 uppercase">Current Access Level</p>
<div class="flex items-center p-3 bg-gray-50 rounded-lg">
<span class="inline-block w-2 h-2 mr-2 bg-blue-500 rounded-full"></span>
<span class="text-sm font-medium text-gray-700">Administrator Full Access</span>
</div>
<button class="w-full mt-3 p-2 text-sm text-red-500 font-medium hover:bg-red-50 rounded-lg transition duration-150 text-center">
Sign Out
</button>
</div>
</div>
<!-- Main Content Area Wrapper -->
<div class="md:ml-64 min-h-screen">
<!-- Header / Top Nav Bar (Universal Utility) -->
<header class="bg-white shadow-sm sticky top-0 z-30 border-b border-gray-200">
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Mobile Menu Button -->
<button id="open-sidebar" class="md:hidden p-2 rounded-lg text-gray-500 hover:bg-gray-100 mr-4">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
<!-- Global Search Feature -->
<div class="flex-1 max-w-xl">
<div class="relative">
<input type="text" placeholder="Global search: student name, staff ID, class..." class="w-full p-2 pl-10 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 bg-gray-50 text-sm">
<svg class="absolute left-3 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
</div>
<!-- Right Side: Notifications and Profile -->
<div class="flex items-center space-x-4 ml-4">
<!-- Notification Center (Critical Alerts) -->
<button class="p-2 rounded-full text-gray-500 hover:bg-gray-100 transition duration-200 relative">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
<!-- Alert: Amber/Gold for critical items -->
<span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white bg-amber-500"></span>
</button>
<!-- Profile Avatar -->
<img class="w-9 h-9 rounded-full object-cover cursor-pointer ring-2 ring-blue-500" src="https://placehold.co/40x40/2563eb/ffffff?text=AD" alt="Admin Profile">
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<main class="p-4 sm:p-6 lg:p-8">
<div id="content-container">
<!-- DASHBOARD OVERVIEW SECTION (Default View) -->
<section id="dashboard-section" class="main-section">
<h1 class="text-2xl font-semibold text-gray-800 mb-6">Administrative Overview</h1>
<!-- 1. Stats Cards Grid (Enrollment, Attendance, Critical) -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<!-- Card 1: Total Enrollment (Primary Blue Data) -->
<div class="bg-white metric-card p-5 rounded-lg border-b-4 border-blue-500">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500 uppercase">Total Enrollment</p>
<svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M10 20v-2a3 3 0 00-3-3H4a3 3 0 00-3 3v2M18 20v-2a3 3 0 01-3-3h-4a3 3 0 01-3-3v-2M18 12a4 4 0 100-8 4 4 0 000 8z"></path></svg>
</div>
<div class="mt-2">
<p class="text-4xl font-extrabold text-gray-900">1,245</p>
<span class="text-xs text-green-600 font-medium">+3% YTD</span>
</div>
</div>
<!-- Card 2: Average Attendance (Favorable Green Data) -->
<div class="bg-white metric-card p-5 rounded-lg border-b-4 border-green-500">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500 uppercase">Avg. Attendance Rate</p>
<svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5h6"></path></svg>
</div>
<div class="mt-2">
<p class="text-4xl font-extrabold text-gray-900">96.8%</p>
<span class="text-xs text-gray-500 font-medium">Daily average</span>
</div>
</div>
<!-- Card 3: Overdue Assignments (Critical Amber Data) -->
<div class="bg-white metric-card p-5 rounded-lg border-b-4 border-amber-500">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500 uppercase">Overdue Submissions</p>
<svg class="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.372 17c-.77 1.333.192 3 1.732 3z"></path></svg>
</div>
<div class="mt-2">
<p class="text-4xl font-extrabold text-gray-900">42</p>
<span class="text-xs text-amber-600 font-medium">Needs Follow Up</span>
</div>
</div>
<!-- Card 4: Disciplinary Reports (Alert Orange Data) -->
<div class="bg-white metric-card p-5 rounded-lg border-b-4 border-red-500">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500 uppercase">Active Disciplinary Cases</p>
<svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<div class="mt-2">
<p class="text-4xl font-extrabold text-gray-900">7</p>
<span class="text-xs text-red-600 font-medium">Urgent review</span>
</div>
</div>
</div>
<!-- 2. Performance Summaries and Staff Deployment (Two-column layout) -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Student Performance Summary (2/3 width) -->
<div class="lg:col-span-2 bg-white metric-card p-6 rounded-lg">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Grade Distribution Summary (Current Term)</h2>
<div class="h-64 flex items-center justify-center bg-gray-50 rounded-lg border border-gray-200">
<p class="text-gray-500">Placeholder for Bar Chart / Grade Distribution Visualization</p>
</div>
<div class="mt-4 text-sm text-gray-600">
<p>Overall GPA: <span class="font-bold text-blue-600">3.45</span>. Only 15% of students are currently performing below a C average (soft red metric).</p>
</div>
</div>
<!-- Staff Deployment Information (1/3 width) -->
<div class="lg:col-span-1 bg-white metric-card p-6 rounded-lg">
<h2 class="text-xl font-semibold text-gray-800 mb-4">Staff & Resource Status</h2>
<ul class="space-y-3">
<li class="flex justify-between items-center text-sm">
<span class="text-gray-600">Teachers Active:</span>
<span class="font-semibold text-green-600">45 / 45</span>
</li>
<li class="flex justify-between items-center text-sm">
<span class="text-gray-600">Substitute Needs:</span>
<span class="font-semibold text-amber-600">2 Requests</span>
</li>
<li class="flex justify-between items-center text-sm">
<span class="text-gray-600">Classrooms Utilized:</span>
<span class="font-semibold text-blue-600">40 / 48</span>
</li>
<li class="pt-2 border-t mt-3 border-gray-100">
<button class="w-full text-blue-600 hover:text-blue-700 text-sm font-medium py-1 rounded-lg">
Manage Staff Absences
</button>
</li>
</ul>
</div>
</div>
</section>
<!-- STUDENT RECORDS SECTION (Placeholder) -->
<section id="records-section" class="main-section hidden">
<h1 class="text-2xl font-semibold text-gray-800 mb-6">Detailed Student Records</h1>
<div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-blue-500">
<p class="text-gray-600">This view features interactive data tables with powerful filtering to manage and view individual student data, including enrollment history, medical records, and disciplinary logs.</p>
<button class="mt-4 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition duration-200 shadow-md">
Access Database
</button>
</div>
</section>
<!-- CURRICULUM MANAGEMENT SECTION (Placeholder) -->
<section id="curriculum-section" class="main-section hidden">
<h1 class="text-2xl font-semibold text-gray-800 mb-6">Curriculum and Course Management</h1>
<div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-blue-500">
<p class="text-gray-600">This section allows for defining course structures, assigning teachers, and tracking curriculum completion across grade levels.</p>
</div>
</section>
<!-- TIMETABLES SECTION (Placeholder) -->
<section id="timetable-section" class="main-section hidden">
<h1 class="text-2xl font-semibold text-gray-800 mb-6">Timetable Generation & Management</h1>
<div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-blue-500">
<p class="text-gray-600">Centralized tool for generating, viewing, and resolving conflicts within student and teacher schedules.</p>
</div>
</section>
<!-- FINANCIALS SECTION (Placeholder) -->
<section id="financials-section" class="main-section hidden">
<h1 class="text-2xl font-semibold text-gray-800 mb-6">School Financials Overview</h1>
<div class="bg-white p-6 rounded-lg shadow-md border-l-4 border-blue-500">
<p class="text-gray-600">This module tracks fees collection, budget allocations, and staff payroll summaries.</p>
</div>
</section>
</div>
<!-- Footer -->
<footer class="mt-12 text-center text-sm text-gray-500 pt-6 border-t border-gray-200">
School Admin Pro © 2025. Built with Efficiency in Mind.
</footer>
</main>
</div>
<script>
const sidebar = document.getElementById('sidebar');
const openSidebarBtn = document.getElementById('open-sidebar');
const closeSidebarBtn = document.getElementById('close-sidebar');
// --- NAVIGATION LOGIC ---
function navigateTo(targetId) {
// 1. Hide all main sections
document.querySelectorAll('.main-section').forEach(section => {
section.classList.add('hidden');
});
// 2. Show the target section
const targetSection = document.getElementById(targetId + '-section');
if (targetSection) {
targetSection.classList.remove('hidden');
} else {
// Default back to Dashboard if target not found
navigateTo('dashboard');
return;
}
// 3. Update active link styling (Soft Blue Accent)
document.querySelectorAll('.nav-link').forEach(link => {
link.classList.remove('active');
if (link.getAttribute('data-target') === targetId) {
link.classList.add('active');
}
});
// 4. Close mobile sidebar after navigation
if (window.innerWidth < 768) {
sidebar.classList.add('-translate-x-full');
sidebar.classList.remove('translate-x-0');
}
}
// 5. Setup Navigation Listeners
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const targetId = link.getAttribute('data-target');
window.location.hash = targetId;
navigateTo(targetId);
});
});
// 6. Initial page load and hash check
(function() {
const hash = window.location.hash.substring(1);
const initialTarget = hash || 'dashboard';
navigateTo(initialTarget);
})();
// --- MOBILE SIDEBAR TOGGLER LOGIC ---
if (openSidebarBtn && sidebar) {
openSidebarBtn.addEventListener('click', () => {
sidebar.classList.remove('-translate-x-full');
sidebar.classList.add('translate-x-0');
});
}
if (closeSidebarBtn && sidebar) {
closeSidebarBtn.addEventListener('click', () => {
sidebar.classList.add('-translate-x-full');
sidebar.classList.remove('translate-x-0');
});
}
</script>
</body>
</html>
