sankalp
71b700388b
Enhances user experience with dark‑mode detection, responsive layout, and streamlined role selection workflow
77 lines
3.7 KiB
HTML
77 lines
3.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Project Timeline{% endblock %}
|
|
{% block breadcrumb %}
|
|
<nav class="mb-4" aria-label="Breadcrumb">
|
|
<ol class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
|
|
<li><a href="{% url 'dashboard' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Dashboard</a></li>
|
|
<li class="text-gray-300 dark:text-gray-600">/</li>
|
|
<li class="text-gray-900 dark:text-white font-medium" aria-current="page">Project Timeline</li>
|
|
</ol>
|
|
</nav>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="space-y-6">
|
|
|
|
<div class="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">Project Timeline</h1>
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Gantt chart view of project schedules</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gantt Chart Section -->
|
|
<div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 overflow-hidden">
|
|
<div class="px-6 py-3 border-b border-gray-100 dark:border-gray-600">
|
|
<div class="flex items-center justify-between w-full">
|
|
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">Timeline View</h3>
|
|
<div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
|
|
<i class="fas fa-eye"></i>
|
|
<span>Read Only Mode</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full">
|
|
{% if has_data %}
|
|
{% include "components/gantt_chart.html" with gantt_data=gantt_data_json name_column_label="Project Name" is_project_timeline=True gantt_height=calculated_height %}
|
|
{% else %}
|
|
<div class="flex flex-col items-center justify-center h-64 text-gray-500 dark:text-gray-400 gap-4">
|
|
<svg class="w-12 h-12 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2m0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
<h3 class="text-lg font-medium text-gray-500 dark:text-gray-400">No project data available</h3>
|
|
<p class="text-sm text-gray-400 dark:text-gray-500">Add start and end dates to projects to view timeline</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Legend -->
|
|
<div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 overflow-hidden">
|
|
<div class="px-6 py-3 border-b border-gray-100 dark:border-gray-600">
|
|
<h3 class="text-sm font-semibold text-gray-900 dark:text-white">Status Legend</h3>
|
|
</div>
|
|
<div class="px-6 py-5">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 rounded" style="background-color: #3b82f6;"></div>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">In Progress</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 rounded" style="background-color: #10b981;"></div>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Nearly Complete</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 rounded" style="background-color: #f59e0b;"></div>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Approaching Deadline</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-3 h-3 rounded" style="background-color: #ef4444;"></div>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">Overdue</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% endblock %} |