MediaCollectorLibary/resources/views/dashboard/index.twig

{% extends 'layouts/app.twig' %}

{% block content %}
    <div class="p-6">
        <div class="mb-6">
            <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
            <p class="text-lg text-gray-600 mt-2">Overview of your media collection</p>
        </div>

        {% if error %}
            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
                {{ error }}
            </div>
        {% endif %}

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- Total Media -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="text-blue-600 w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
                        </svg>
                    </div>
                    <div class="ml-4 flex-1">
                        <dt class="text-sm font-medium text-gray-500 truncate">Total Media</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.total_media|number_format }}</dd>
                    </div>
                </div>
            </div>

            <!-- Games -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="text-green-600 w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <div class="ml-4 flex-1">
                        <dt class="text-sm font-medium text-gray-500 truncate">Games</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.total_games|number_format }}</dd>
                        <div class="text-sm text-gray-500">{{ stats.favorite_games }} favorites</div>
                    </div>
                </div>
            </div>

            <!-- Movies & TV -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="text-red-600 w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
                        </svg>
                    </div>
                    <div class="ml-4 flex-1">
                        <dt class="text-sm font-medium text-gray-500 truncate">Movies & TV</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ (stats.total_movies + stats.total_tv_shows)|number_format }}</dd>
                        <div class="text-sm text-gray-500">{{ stats.watched_movies }} watched</div>
                    </div>
                </div>
            </div>

            <!-- Music -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="text-yellow-600 w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"></path>
                        </svg>
                    </div>
                    <div class="ml-4 flex-1">
                        <dt class="text-sm font-medium text-gray-500 truncate">Music</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.total_music|number_format }}</dd>
                        <div class="text-sm text-gray-500">{{ stats.favorite_music }} favorites</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Additional Stats -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <!-- Total Playtime -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="text-cyan-600 w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div class="ml-4 flex-1">
                        <dt class="text-sm font-medium text-gray-500 truncate">Total Playtime</dt>
                        <dd class="text-2xl font-semibold text-gray-900">
                            {% if stats.total_playtime %}
                                {{ (stats.total_playtime / 60)|round }}h
                            {% else %}
                                0h
                            {% endif %}
                        </dd>
                    </div>
                </div>
            </div>

            <!-- Total Episodes -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="text-gray-600 w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2h4a1 1 0 010 2h-1v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6H3a1 1 0 010-2h4z"></path>
                        </svg>
                    </div>
                    <div class="ml-4 flex-1">
                        <dt class="text-sm font-medium text-gray-500 truncate">TV Episodes</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ stats.total_episodes|number_format }}</dd>
                    </div>
                </div>
            </div>

            <!-- Sync Status -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <svg class="text-gray-600 w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                        </svg>
                    </div>
                    <div class="ml-4 flex-1">
                        <dt class="text-sm font-medium text-gray-500 truncate">Sync Status</dt>
                        <dd class="text-2xl font-semibold text-gray-900">
                            {% if sync_stats.successful_syncs > 0 %}
                                {{ sync_stats.successful_syncs }}/{{ sync_stats.total_syncs }} Success
                            {% else %}
                                No syncs yet
                            {% endif %}
                        </dd>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="space-y-8">
            <div>
                <h2 class="text-2xl font-semibold text-gray-900 mb-6">Recent Activity</h2>
            </div>

            <!-- Recent Games -->
            {% if recent_games %}
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4">Recently Played Games</h3>
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <ul class="divide-y divide-gray-200">
                        {% for game in recent_games %}
                        <li class="px-6 py-4">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    {% if game.image_url %}
                                    <img class="w-10 h-10 rounded-lg object-cover mr-4" src="{{ game.image_url }}" alt="">
                                    {% else %}
                                    <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center mr-4">
                                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                                        </svg>
                                    </div>
                                    {% endif %}
                                    <div>
                                        <p class="text-sm font-medium text-gray-900">{{ game.title }}</p>
                                        <p class="text-sm text-gray-500">{{ game.source_name }}</p>
                                    </div>
                                </div>
                                <div class="text-sm text-gray-500">
                                    {% if game.playtime_minutes %}
                                        {{ (game.playtime_minutes / 60)|round }}h played
                                    {% endif %}
                                </div>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {% endif %}

            <!-- Recent Movies -->
            {% if recent_movies %}
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4">Recently Watched Movies</h3>
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <ul class="divide-y divide-gray-200">
                        {% for movie in recent_movies %}
                        <li class="px-6 py-4">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    {% if movie.poster_url %}
                                    <img class="w-10 h-10 rounded-lg object-cover mr-4" src="{{ movie.poster_url }}" alt="">
                                    {% else %}
                                    <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center mr-4">
                                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
                                        </svg>
                                    </div>
                                    {% endif %}
                                    <div>
                                        <p class="text-sm font-medium text-gray-900">{{ movie.title }}</p>
                                        <p class="text-sm text-gray-500">{{ movie.source_name }}</p>
                                    </div>
                                </div>
                                <div class="text-sm text-gray-500">
                                    {% if movie.watch_count %}
                                        Watched {{ movie.watch_count }} times
                                    {% endif %}
                                </div>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {% endif %}

            <!-- Recent Syncs -->
            {% if recent_syncs %}
            <div>
                <h3 class="text-lg font-medium text-gray-900 mb-4">Recent Sync Activities</h3>
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
                    <ul class="divide-y divide-gray-200">
                        {% for sync in recent_syncs %}
                        <li class="px-6 py-4">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0">
                                        {% if sync.status == 'completed' %}
                                        <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                        </svg>
                                        {% elseif sync.status == 'failed' %}
                                        <svg class="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                        </svg>
                                        {% else %}
                                        <svg class="w-5 h-5 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm2 6a2 2 0 114 0 2 2 0 01-4 0zm8 0a2 2 0 114 0 2 2 0 01-4 0z" clip-rule="evenodd"></path>
                                        </svg>
                                        {% endif %}
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm font-medium text-gray-900">{{ sync.source_name }}</p>
                                        <p class="text-sm text-gray-500">{{ sync.sync_type|title }} sync</p>
                                    </div>
                                </div>
                                <div class="text-sm text-gray-500">
                                    {{ sync.processed_items }} items • {{ sync.created_at|date('M j, Y') }}
                                </div>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            {% endif %}

            {% if not recent_games and not recent_movies and not recent_syncs %}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-12">
                <div class="text-center">
                    <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <h3 class="text-lg font-medium text-gray-900 mb-2">No recent activity</h3>
                    <p class="text-gray-500">Start adding media to see your activity here.</p>
                </div>
            </div>
            {% endif %}
        </div>
{% endblock %}