| {% extends 'base.html' %}
|
| {% block title %}Dashboard{% endblock %}
|
| {% block page_title %}Dashboard{% endblock %}
|
|
|
| {% block content %}
|
|
|
|
|
| <div class="dashboard-banner" style="background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#06b6d4 100%);border-radius:var(--radius-xl);padding:28px 32px;margin-bottom:28px;color:white;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:hidden;position:relative;">
|
| <div style="position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:rgba(255,255,255,.07);border-radius:50%;"></div>
|
| <div style="position:absolute;bottom:-60px;right:120px;width:160px;height:160px;background:rgba(255,255,255,.05);border-radius:50%;"></div>
|
| <div>
|
| <h1 style="font-size:22px;font-weight:700;margin-bottom:6px;">Good morning! 👋</h1>
|
| <p style="opacity:.85;font-size:14px;">Here's what's happening at your school today.</p>
|
| </div>
|
| <div style="display:flex;gap:10px;flex-shrink:0;">
|
| <a href="{% url 'student_add' %}" class="btn" style="background:rgba(255,255,255,.2);color:white;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);">
|
| <i data-lucide="user-plus" style="width:15px;height:15px;"></i>
|
| Add Student
|
| </a>
|
| <a href="{% url 'notice_add' %}" class="btn" style="background:white;color:var(--primary);">
|
| <i data-lucide="bell-plus" style="width:15px;height:15px;"></i>
|
| New Notice
|
| </a>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="stat-grid">
|
| <div class="stat-card" style="--stat-color:#4f46e5;--stat-soft:#eef2ff;">
|
| <div class="stat-icon">👨🎓</div>
|
| <div class="stat-info">
|
| <div class="stat-value" data-count="{{ total_students }}">{{ total_students }}</div>
|
| <div class="stat-label">Total Students</div>
|
| <div class="stat-change up">↑ Active enrollment</div>
|
| </div>
|
| </div>
|
| <div class="stat-card" style="--stat-color:#06b6d4;--stat-soft:#ecfeff;">
|
| <div class="stat-icon">👩🏫</div>
|
| <div class="stat-info">
|
| <div class="stat-value" data-count="{{ total_teachers }}">{{ total_teachers }}</div>
|
| <div class="stat-label">Teachers</div>
|
| <div class="stat-change up">↑ On staff</div>
|
| </div>
|
| </div>
|
| <div class="stat-card" style="--stat-color:#10b981;--stat-soft:#d1fae5;">
|
| <div class="stat-icon">🏫</div>
|
| <div class="stat-info">
|
| <div class="stat-value" data-count="{{ total_classes }}">{{ total_classes }}</div>
|
| <div class="stat-label">Classes</div>
|
| <div class="stat-change up">↑ This year</div>
|
| </div>
|
| </div>
|
| <div class="stat-card" style="--stat-color:#f59e0b;--stat-soft:#fef3c7;">
|
| <div class="stat-icon">✅</div>
|
| <div class="stat-info">
|
| <div class="stat-value" data-count="{{ today_attendance }}">{{ today_attendance }}</div>
|
| <div class="stat-label">Today's Attendance</div>
|
| <div class="stat-change">Records today</div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
|
|
|
|
|
| <div class="card">
|
| <div class="card-header">
|
| <span class="card-title">📢 Recent Notices</span>
|
| <a href="{% url 'notice_add' %}" class="btn btn-primary btn-sm">
|
| <i data-lucide="plus" style="width:13px;height:13px;"></i> New
|
| </a>
|
| </div>
|
| <div class="card-body" style="padding:0;">
|
| {% if recent_notices %}
|
| {% for notice in recent_notices %}
|
| <a href="{% url 'notice_detail' notice.pk %}" class="notice-card" style="display:flex;align-items:flex-start;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border-light);text-decoration:none;transition:background var(--transition);" onmouseover="this.style.background='var(--surface-2)'" onmouseout="this.style.background=''">
|
| <div style="width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;background:{% if notice.priority == 'urgent' %}#7c3aed{% elif notice.priority == 'high' %}var(--danger){% elif notice.priority == 'medium' %}var(--warning){% else %}var(--success){% endif %};"></div>
|
| <div style="flex:1;min-width:0;">
|
| <div style="font-size:14px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ notice.title }}</div>
|
| <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">{{ notice.created_at|date:"M d, Y" }} · {{ notice.get_audience_display }}</div>
|
| </div>
|
| <span class="badge {% if notice.priority == 'urgent' %}badge-primary{% elif notice.priority == 'high' %}badge-danger{% elif notice.priority == 'medium' %}badge-warning{% else %}badge-success{% endif %}">
|
| {{ notice.get_priority_display }}
|
| </span>
|
| </a>
|
| {% endfor %}
|
| {% else %}
|
| <div class="empty-state">
|
| <div class="empty-state-icon">📭</div>
|
| <div class="empty-state-title">No notices yet</div>
|
| <div class="empty-state-text">Post your first announcement</div>
|
| </div>
|
| {% endif %}
|
| </div>
|
| <div class="card-footer">
|
| <a href="{% url 'notice_list' %}" style="font-size:13px;color:var(--primary);text-decoration:none;font-weight:500;">View all notices →</a>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="card">
|
| <div class="card-header">
|
| <span class="card-title">📊 Recent Grades</span>
|
| <a href="{% url 'grade_add' %}" class="btn btn-primary btn-sm">
|
| <i data-lucide="plus" style="width:13px;height:13px;"></i> Add
|
| </a>
|
| </div>
|
| <div class="card-body" style="padding:0;">
|
| {% if recent_grades %}
|
| <table style="width:100%;">
|
| <thead>
|
| <tr>
|
| <th>Student</th>
|
| <th>Subject</th>
|
| <th>Score</th>
|
| <th>Grade</th>
|
| </tr>
|
| </thead>
|
| <tbody>
|
| {% for grade in recent_grades %}
|
| <tr>
|
| <td>
|
| <div style="display:flex;align-items:center;gap:8px;">
|
| <div class="avatar-sm">{{ grade.student.first_name|first }}</div>
|
| <span style="font-size:13px;">{{ grade.student.full_name }}</span>
|
| </div>
|
| </td>
|
| <td><span class="badge badge-secondary">{{ grade.subject.name }}</span></td>
|
| <td style="font-weight:600;">{{ grade.score }}/{{ grade.max_score }}</td>
|
| <td>
|
| <span class="grade-{% if grade.letter_grade == 'A+' %}a-plus{% elif grade.letter_grade == 'A' %}a{% elif grade.letter_grade == 'B' %}b{% elif grade.letter_grade == 'C' %}c{% elif grade.letter_grade == 'D' %}d{% else %}f{% endif %}">
|
| {{ grade.letter_grade }}
|
| </span>
|
| </td>
|
| </tr>
|
| {% endfor %}
|
| </tbody>
|
| </table>
|
| {% else %}
|
| <div class="empty-state">
|
| <div class="empty-state-icon">📝</div>
|
| <div class="empty-state-title">No grades recorded</div>
|
| </div>
|
| {% endif %}
|
| </div>
|
| <div class="card-footer">
|
| <a href="{% url 'grade_list' %}" style="font-size:13px;color:var(--primary);text-decoration:none;font-weight:500;">View all grades →</a>
|
| </div>
|
| </div>
|
|
|
| </div>
|
|
|
|
|
| <div class="card" style="margin-top:20px;">
|
| <div class="card-header">
|
| <span class="card-title">⚡ Quick Actions</span>
|
| </div>
|
| <div class="card-body">
|
| <div style="display:flex;flex-wrap:wrap;gap:10px;">
|
| <a href="{% url 'student_add' %}" class="btn btn-outline"><i data-lucide="user-plus" style="width:15px;height:15px;"></i> Add Student</a>
|
| <a href="{% url 'teacher_add' %}" class="btn btn-outline"><i data-lucide="user-check" style="width:15px;height:15px;"></i> Add Teacher</a>
|
| <a href="{% url 'class_add' %}" class="btn btn-outline"><i data-lucide="book-open" style="width:15px;height:15px;"></i> New Class</a>
|
| <a href="{% url 'mark_attendance' %}" class="btn btn-outline"><i data-lucide="calendar-check" style="width:15px;height:15px;"></i> Mark Attendance</a>
|
| <a href="{% url 'grade_add' %}" class="btn btn-outline"><i data-lucide="bar-chart-2" style="width:15px;height:15px;"></i> Record Grade</a>
|
| <a href="{% url 'notice_add' %}" class="btn btn-outline"><i data-lucide="bell" style="width:15px;height:15px;"></i> Post Notice</a>
|
| <a href="{% url 'subject_add' %}" class="btn btn-outline"><i data-lucide="library" style="width:15px;height:15px;"></i> Add Subject</a>
|
| <a href="{% url 'attendance_report' %}" class="btn btn-outline"><i data-lucide="file-bar-chart" style="width:15px;height:15px;"></i> Attendance Report</a>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| {% endblock %} |
