517 lines
13 KiB
HTML
517 lines
13 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="kanban-overview-container">
|
|
<div class="overview-header">
|
|
<h2>Kanban Board Overview</h2>
|
|
<p class="overview-description">Manage your tasks visually across all projects</p>
|
|
</div>
|
|
|
|
{% if project_boards %}
|
|
<div class="projects-grid">
|
|
{% for project, boards in project_boards.items() %}
|
|
<div class="project-card">
|
|
<div class="project-header">
|
|
<div class="project-info">
|
|
<h3 class="project-name">
|
|
<span class="project-code">{{ project.code }}</span>
|
|
{{ project.name }}
|
|
</h3>
|
|
{% if project.category %}
|
|
<span class="category-badge" style="background-color: {{ project.category.color }}20; color: {{ project.category.color }};">
|
|
{{ project.category.icon or '📁' }} {{ project.category.name }}
|
|
</span>
|
|
{% endif %}
|
|
{% if project.description %}
|
|
<p class="project-description">{{ project.description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
<div class="project-actions">
|
|
<a href="{{ url_for('project_kanban', project_id=project.id) }}" class="btn btn-primary">Open Kanban</a>
|
|
<a href="{{ url_for('manage_project_tasks', project_id=project.id) }}" class="btn btn-secondary">Task List</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="boards-section">
|
|
<h4>Kanban Boards ({{ boards|length }})</h4>
|
|
<div class="boards-list">
|
|
{% for board in boards %}
|
|
<div class="board-item" onclick="openBoard({{ project.id }}, {{ board.id }})">
|
|
<div class="board-info">
|
|
<div class="board-name">
|
|
{{ board.name }}
|
|
{% if board.is_default %}
|
|
<span class="default-badge">Default</span>
|
|
{% endif %}
|
|
</div>
|
|
{% if board.description %}
|
|
<div class="board-description">{{ board.description }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="board-stats">
|
|
<span class="column-count">{{ board.columns|length }} columns</span>
|
|
<span class="card-count">
|
|
{% set board_cards = 0 %}
|
|
{% for column in board.columns %}
|
|
{% set board_cards = board_cards + column.cards|selectattr('is_active')|list|length %}
|
|
{% endfor %}
|
|
{{ board_cards }} cards
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Board Preview -->
|
|
<div class="board-preview">
|
|
{% set default_board = boards|selectattr('is_default')|first %}
|
|
{% if not default_board %}
|
|
{% set default_board = boards|first %}
|
|
{% endif %}
|
|
{% if default_board and default_board.columns %}
|
|
<h5>{{ default_board.name }} Preview</h5>
|
|
<div class="preview-columns">
|
|
{% for column in default_board.columns %}
|
|
{% if loop.index <= 4 %}
|
|
<div class="preview-column" style="border-top: 3px solid {{ column.color }};">
|
|
<div class="preview-column-header">
|
|
<span class="preview-column-name">{{ column.name }}</span>
|
|
<span class="preview-card-count">{{ column.cards|selectattr('is_active')|list|length }}</span>
|
|
</div>
|
|
<div class="preview-cards">
|
|
{% set active_cards = column.cards|selectattr('is_active')|list %}
|
|
{% for card in active_cards %}
|
|
{% if loop.index <= 3 %}
|
|
<div class="preview-card" {% if card.color %}style="background-color: {{ card.color }};"{% endif %}>
|
|
<div class="preview-card-title">
|
|
{% if card.title|length > 30 %}
|
|
{{ card.title|truncate(30, True) }}
|
|
{% else %}
|
|
{{ card.title }}
|
|
{% endif %}
|
|
</div>
|
|
{% if card.assigned_to %}
|
|
<div class="preview-card-assignee">{{ card.assigned_to.username }}</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if active_cards|length > 3 %}
|
|
<div class="preview-more">+{{ active_cards|length - 3 }} more</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% if default_board.columns|length > 4 %}
|
|
<div class="preview-more-columns">
|
|
+{{ default_board.columns|length - 4 }} more columns
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Quick Stats -->
|
|
<div class="quick-stats">
|
|
<div class="stat-card">
|
|
<h3>{{ project_boards.keys()|list|length }}</h3>
|
|
<p>Projects with Kanban</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
{% set total_boards = 0 %}
|
|
{% for project, boards in project_boards.items() %}
|
|
{% set total_boards = total_boards + boards|length %}
|
|
{% endfor %}
|
|
<h3>{{ total_boards }}</h3>
|
|
<p>Total Boards</p>
|
|
</div>
|
|
<div class="stat-card">
|
|
{% set total_cards = 0 %}
|
|
{% for project, boards in project_boards.items() %}
|
|
{% for board in boards %}
|
|
{% for column in board.columns %}
|
|
{% set total_cards = total_cards + column.cards|selectattr('is_active')|list|length %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
<h3>{{ total_cards }}</h3>
|
|
<p>Total Cards</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% else %}
|
|
<!-- No Kanban Boards -->
|
|
<div class="no-kanban">
|
|
<div class="no-kanban-content">
|
|
<div class="no-kanban-icon">📋</div>
|
|
<h3>No Kanban Boards Yet</h3>
|
|
<p>Start organizing your projects with visual Kanban boards.</p>
|
|
<div class="getting-started">
|
|
<h4>Getting Started:</h4>
|
|
<ol>
|
|
<li>Go to a project from <a href="{{ url_for('admin_projects') }}">Project Management</a></li>
|
|
<li>Click the <strong>"Kanban"</strong> button</li>
|
|
<li>Create your first board and start organizing tasks</li>
|
|
</ol>
|
|
</div>
|
|
{% if g.user.role.value in ['Team Leader', 'Supervisor', 'Administrator', 'System Administrator'] %}
|
|
<a href="{{ url_for('admin_projects') }}" class="btn btn-primary">Go to Projects</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<style>
|
|
.kanban-overview-container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.overview-header {
|
|
margin-bottom: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.overview-header h2 {
|
|
margin: 0 0 0.5rem 0;
|
|
color: #333;
|
|
}
|
|
|
|
.overview-description {
|
|
color: #666;
|
|
margin: 0;
|
|
}
|
|
|
|
.projects-grid {
|
|
display: grid;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.project-card {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.project-card:hover {
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.project-header {
|
|
padding: 1.5rem;
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #dee2e6;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.project-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.project-name {
|
|
margin: 0 0 0.5rem 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.project-code {
|
|
background: #007bff;
|
|
color: white;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.project-description {
|
|
color: #666;
|
|
margin: 0.5rem 0 0 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.project-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.boards-section {
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
|
|
.boards-section h4 {
|
|
margin: 0 0 1rem 0;
|
|
color: #333;
|
|
}
|
|
|
|
.boards-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.board-item {
|
|
background: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.board-item:hover {
|
|
background: #e7f3ff;
|
|
border-color: #007bff;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.board-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.board-name {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.default-badge {
|
|
background: #28a745;
|
|
color: white;
|
|
padding: 0.15rem 0.4rem;
|
|
border-radius: 12px;
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.board-description {
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.board-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
font-size: 0.8rem;
|
|
color: #666;
|
|
text-align: right;
|
|
}
|
|
|
|
.board-preview {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.board-preview h5 {
|
|
margin: 0 0 1rem 0;
|
|
color: #333;
|
|
}
|
|
|
|
.preview-columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.preview-column {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.preview-column-header {
|
|
padding: 0.75rem;
|
|
background: white;
|
|
border-bottom: 1px solid #dee2e6;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.preview-column-name {
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.preview-card-count {
|
|
background: #e9ecef;
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 8px;
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.preview-cards {
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.preview-card {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 4px;
|
|
padding: 0.5rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.preview-card-title {
|
|
font-weight: 500;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.preview-card-assignee {
|
|
color: #666;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.preview-more {
|
|
color: #666;
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.preview-more-columns {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #666;
|
|
font-size: 0.9rem;
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.quick-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
border: 1px solid #dee2e6;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-card h3 {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 2rem;
|
|
color: #007bff;
|
|
}
|
|
|
|
.stat-card p {
|
|
margin: 0;
|
|
color: #666;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.no-kanban {
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
}
|
|
|
|
.no-kanban-content {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.no-kanban-icon {
|
|
font-size: 4rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.no-kanban h3 {
|
|
color: #666;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.no-kanban p {
|
|
color: #999;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.getting-started {
|
|
background: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.getting-started h4 {
|
|
margin: 0 0 1rem 0;
|
|
color: #333;
|
|
}
|
|
|
|
.getting-started ol {
|
|
margin: 0;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.getting-started li {
|
|
margin-bottom: 0.5rem;
|
|
color: #666;
|
|
}
|
|
|
|
.category-badge {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.project-header {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.project-actions {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.preview-columns {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.quick-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function openBoard(projectId, boardId) {
|
|
window.location.href = `/admin/projects/${projectId}/kanban?board=${boardId}`;
|
|
}
|
|
</script>
|
|
|
|
{% endblock %} |