mirror of
https://github.com/thecyberlearn/digital-branding-system.git
synced 2026-08-18 08:52:56 +00:00
c10d4692e6
- Core Django project structure with branding_system and dashboard apps - Platform, ContentDeliverable, and Strategy models with relationships - Comprehensive Django admin interface with custom displays - Dashboard views with completion tracking and overdue detection - Tailwind CSS styling with custom color scheme - WARP.md documentation for development guidance
244 lines
12 KiB
HTML
244 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Dashboard - Digital Branding Management{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="px-4 sm:px-6 lg:px-8">
|
|
<!-- Page Header -->
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-2">Content Strategy Dashboard</h2>
|
|
<p class="text-gray-600">Monitor your content progress across all platforms</p>
|
|
</div>
|
|
|
|
<!-- Overall Statistics Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
|
|
<!-- Total Platforms -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-globe text-2xl text-brand-blue"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm text-gray-500">Active Platforms</p>
|
|
<p class="text-2xl font-semibold text-gray-900">{{ total_platforms }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Committed -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-clipboard-list text-2xl text-brand-blue"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm text-gray-500">Committed</p>
|
|
<p class="text-2xl font-semibold text-brand-blue">{{ committed_count }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Drafted -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-edit text-2xl text-brand-orange"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm text-gray-500">Drafted</p>
|
|
<p class="text-2xl font-semibold text-brand-orange">{{ drafted_count }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Published -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-check-circle text-2xl text-brand-green"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm text-gray-500">Published</p>
|
|
<p class="text-2xl font-semibold text-brand-green">{{ published_count }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Completion Rate -->
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-chart-line text-2xl text-brand-purple"></i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm text-gray-500">Completion Rate</p>
|
|
<p class="text-2xl font-semibold text-brand-purple">{{ overall_completion_rate }}%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content by Status Chart -->
|
|
<div class="bg-white rounded-lg shadow p-6 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Content Status Overview</h3>
|
|
<div class="w-full bg-gray-200 rounded-full h-6 mb-4">
|
|
{% if total_deliverables > 0 %}
|
|
<div class="bg-gray-200 rounded-full h-6 relative overflow-hidden">
|
|
<div class="bg-brand-green h-full absolute top-0 left-0" style="width: {{ published_percentage }}%"></div>
|
|
<div class="bg-brand-orange h-full absolute top-0" style="left: {{ published_percentage }}%; width: {{ drafted_percentage }}%"></div>
|
|
<div class="bg-brand-blue h-full absolute top-0" style="left: calc({{ published_percentage }}% + {{ drafted_percentage }}%); width: {{ committed_percentage }}%"></div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex justify-between text-sm text-gray-600">
|
|
<span><i class="fas fa-circle text-brand-blue mr-1"></i>Committed ({{ committed_count }})</span>
|
|
<span><i class="fas fa-circle text-brand-orange mr-1"></i>Drafted ({{ drafted_count }})</span>
|
|
<span><i class="fas fa-circle text-brand-green mr-1"></i>Published ({{ published_count }})</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Platform Cards - Kanban Style -->
|
|
<div class="mb-8">
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-6">Platform Progress</h3>
|
|
|
|
{% if platforms %}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{% for platform in platforms %}
|
|
<div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
|
|
<!-- Platform Header -->
|
|
<div class="px-6 py-4 bg-gradient-to-r from-brand-blue to-brand-purple">
|
|
<div class="flex items-center justify-between">
|
|
<h4 class="text-lg font-semibold text-white truncate">{{ platform.name }}</h4>
|
|
<span class="px-2 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white">
|
|
{{ platform.get_platform_type_display }}
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-blue-100 mt-1">{{ platform.primary_content_type }}</p>
|
|
</div>
|
|
|
|
<!-- Platform Stats -->
|
|
<div class="px-6 py-4">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<span class="text-sm text-gray-500">Content Progress</span>
|
|
<span class="text-sm font-semibold text-gray-900">{{ platform.completion_percentage }}%</span>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mb-4">
|
|
<div class="bg-gradient-to-r from-brand-green to-green-400 h-2 rounded-full"
|
|
style="width: {{ platform.completion_percentage }}%"></div>
|
|
</div>
|
|
|
|
<!-- Content Status Breakdown -->
|
|
<div class="grid grid-cols-3 gap-3 mb-4">
|
|
<div class="text-center">
|
|
<div class="text-lg font-semibold text-brand-blue">{{ platform.committed_content }}</div>
|
|
<div class="text-xs text-gray-500">Committed</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-lg font-semibold text-brand-orange">{{ platform.drafted_content }}</div>
|
|
<div class="text-xs text-gray-500">Drafted</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-lg font-semibold text-brand-green">{{ platform.published_content }}</div>
|
|
<div class="text-xs text-gray-500">Published</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Info -->
|
|
<div class="flex justify-between items-center text-sm text-gray-500 mb-4">
|
|
<span><i class="fas fa-list-ul mr-1"></i>Total: {{ platform.total_content }}</span>
|
|
<span><i class="fas fa-lightbulb mr-1"></i>{{ platform.total_strategies }} strategies</span>
|
|
</div>
|
|
|
|
<!-- Action Button -->
|
|
<a href="{% url 'platform-detail' platform.id %}"
|
|
class="w-full bg-brand-blue text-white py-2 px-4 rounded-md text-sm font-medium hover:bg-blue-700 transition duration-200 flex items-center justify-center">
|
|
<i class="fas fa-eye mr-2"></i>View Details
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12 bg-white rounded-lg shadow">
|
|
<i class="fas fa-plus-circle text-4xl text-gray-400 mb-4"></i>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">No platforms yet</h3>
|
|
<p class="text-gray-500 mb-4">Get started by adding your first platform</p>
|
|
<a href="/admin/dashboard/platform/add/" class="bg-brand-blue text-white py-2 px-4 rounded-md text-sm font-medium hover:bg-blue-700">
|
|
Add Platform
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Recent Activity & Alerts -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Recent Deliverables -->
|
|
<div class="bg-white rounded-lg shadow">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-semibold text-gray-900">Recent Activity</h3>
|
|
</div>
|
|
<div class="divide-y divide-gray-200">
|
|
{% for deliverable in recent_deliverables|slice:":5" %}
|
|
<div class="px-6 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-gray-900 truncate">{{ deliverable.title }}</p>
|
|
<p class="text-sm text-gray-500">{{ deliverable.platform.name }} • {{ deliverable.get_content_type_display }}</p>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="px-2 py-1 text-xs rounded-full
|
|
{% if deliverable.status == 'published' %}bg-green-100 text-green-800
|
|
{% elif deliverable.status == 'drafted' %}bg-orange-100 text-orange-800
|
|
{% elif deliverable.status == 'committed' %}bg-blue-100 text-blue-800
|
|
{% else %}bg-gray-100 text-gray-800{% endif %}">
|
|
{{ deliverable.get_status_display }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="px-6 py-8 text-center text-gray-500">
|
|
No recent activity
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overdue & Alerts -->
|
|
<div class="bg-white rounded-lg shadow">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h3 class="text-lg font-semibold text-gray-900">Alerts & Overdue</h3>
|
|
</div>
|
|
<div class="divide-y divide-gray-200">
|
|
{% for deliverable in overdue_deliverables|slice:":5" %}
|
|
<div class="px-6 py-4">
|
|
<div class="flex items-start">
|
|
<i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-gray-900">{{ deliverable.title }}</p>
|
|
<p class="text-sm text-gray-500">{{ deliverable.platform.name }}</p>
|
|
<p class="text-xs text-red-600 mt-1">Due: {{ deliverable.target_date }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="px-6 py-8 text-center text-gray-500">
|
|
<i class="fas fa-check-circle text-green-500 text-2xl mb-2"></i>
|
|
<p>All caught up! No overdue items</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Add any dashboard-specific JavaScript here
|
|
console.log('Dashboard loaded');
|
|
</script>
|
|
{% endblock %}
|