terra-view/templates/partials/projects/project_list.html

<!-- Project List Grid -->
{% if projects %}
    {% for item in projects %}
    {% set p = item.project %}
    {% set mods = item.modules or [] %}
    {% set mstatus = item.module_status or {} %}
    {% set has_sound = 'sound_monitoring' in mods %}
    {% set has_vib = 'vibration_monitoring' in mods %}
    <div class="group relative flex flex-col bg-white dark:bg-slate-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200 hover:-translate-y-0.5 overflow-hidden">
        <!-- Accent strip — reflects the project's module mix -->
        <div class="absolute inset-x-0 top-0 h-1
            {% if has_sound and has_vib %}bg-gradient-to-r from-seismo-orange to-blue-500
            {% elif has_sound %}bg-seismo-orange
            {% elif has_vib %}bg-blue-500
            {% else %}bg-gray-300 dark:bg-gray-600{% endif %}"></div>

        <a href="/projects/{{ p.id }}" class="block flex-1 p-6 pt-7">
            <!-- Header: name + identity + status -->
            <div class="flex items-start justify-between gap-3 mb-3">
                <div class="min-w-0">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white truncate">{{ p.name }}</h3>
                    {% set idbits = [] %}
                    {% if p.project_number %}{% set _ = idbits.append(p.project_number) %}{% endif %}
                    {% if p.client_name %}{% set _ = idbits.append(p.client_name) %}{% endif %}
                    {% if idbits %}
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate">{{ idbits | join(' · ') }}</p>
                    {% endif %}
                </div>
                {% if p.status == 'active' %}
                    <span class="shrink-0 px-2 py-1 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 rounded-full">Active</span>
                {% elif p.status == 'upcoming' %}
                    <span class="shrink-0 px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 rounded-full">Upcoming</span>
                {% elif p.status == 'on_hold' %}
                    <span class="shrink-0 px-2 py-1 text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 rounded-full">On Hold</span>
                {% elif p.status == 'completed' %}
                    <span class="shrink-0 px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 rounded-full">Completed</span>
                {% elif p.status == 'archived' %}
                    <span class="shrink-0 px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 rounded-full">Archived</span>
                {% endif %}
            </div>

            <!-- Module chips (with per-module status) -->
            {% if mods %}
            <div class="flex flex-wrap items-center gap-1.5 mb-3">
                {% for m in mods %}
                {% set st = mstatus.get(m, 'active') %}
                <span class="inline-flex items-center gap-1 pl-2 pr-2 py-0.5 rounded-full text-[11px] font-medium
                    {% if m == 'sound_monitoring' %}bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300
                    {% elif m == 'vibration_monitoring' %}bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300
                    {% else %}bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300{% endif %}">
                    {% if m == 'sound_monitoring' %}
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M12 6v12M9 8.464a5 5 0 000 7.072"/></svg>
                    Sound
                    {% elif m == 'vibration_monitoring' %}
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                    Vibration
                    {% else %}{{ m }}{% endif %}
                    {% if st == 'completed' %}<span class="text-blue-600 dark:text-blue-300" title="Completed">✓</span>
                    {% elif st == 'on_hold' %}<span class="opacity-70" title="On hold">⏸</span>{% endif %}
                </span>
                {% endfor %}
            </div>
            {% endif %}

            <!-- Description -->
            {% if p.description %}
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">{{ p.description }}</p>
            {% endif %}

            <!-- Stats -->
            <div class="grid grid-cols-3 gap-3 pt-4 border-t border-gray-100 dark:border-gray-700/60">
                <div>
                    <p class="text-[11px] uppercase tracking-wide text-gray-400 dark:text-gray-500">Locations</p>
                    <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ item.location_count }}</p>
                </div>
                <div>
                    <p class="text-[11px] uppercase tracking-wide text-gray-400 dark:text-gray-500">Units</p>
                    <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ item.unit_count }}</p>
                </div>
                <div>
                    <p class="text-[11px] uppercase tracking-wide text-gray-400 dark:text-gray-500">Active</p>
                    <p class="text-lg font-semibold {% if item.active_session_count > 0 %}text-green-600 dark:text-green-400{% else %}text-gray-900 dark:text-white{% endif %}">{{ item.active_session_count }}</p>
                </div>
            </div>
        </a>

        <!-- Per-module quick-open footer — jumps straight into that module's tab -->
        {% if has_sound or has_vib %}
        <div class="flex items-stretch border-t border-gray-100 dark:border-gray-700/60 divide-x divide-gray-100 dark:divide-gray-700/60">
            {% if has_sound %}
            <a href="/projects/{{ p.id }}#sound"
               class="flex-1 flex items-center justify-center gap-1.5 py-2.5 text-xs font-semibold text-orange-600 dark:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20 transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M12 6v12M9 8.464a5 5 0 000 7.072"/></svg>
                Sound
            </a>
            {% endif %}
            {% if has_vib %}
            <a href="/projects/{{ p.id }}#vibration"
               class="flex-1 flex items-center justify-center gap-1.5 py-2.5 text-xs font-semibold text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                Vibration
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>
    {% endfor %}
{% else %}
    <!-- Empty State -->
    <div class="col-span-full flex flex-col items-center justify-center py-12 text-gray-400 dark:text-gray-500">
        <svg class="w-16 h-16 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
        </svg>
        <p class="text-lg font-medium">No projects found</p>
        <p class="text-sm mt-1">Create your first project to get started</p>
    </div>
{% endif %}