terra-view/templates/partials/roster_table.html

<!-- Desktop Table View -->
<div class="hidden md:block rounded-xl shadow-lg bg-white dark:bg-slate-800 overflow-hidden">
    <table id="roster-table" class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('status')">
                    <div class="flex items-center gap-1">
                        Status
                        <span class="sort-indicator" data-column="status"></span>
                    </div>
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('id')">
                    <div class="flex items-center gap-1">
                        Unit ID
                        <span class="sort-indicator" data-column="id"></span>
                    </div>
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('type')">
                    <div class="flex items-center gap-1">
                        Type
                        <span class="sort-indicator" data-column="type"></span>
                    </div>
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                    Details
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('last_seen')">
                    <div class="flex items-center gap-1">
                        Last Seen
                        <span class="sort-indicator" data-column="last_seen"></span>
                    </div>
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('age')">
                    <div class="flex items-center gap-1">
                        Age
                        <span class="sort-indicator" data-column="age"></span>
                    </div>
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 select-none" onclick="sortTable('note')">
                    <div class="flex items-center gap-1">
                        Note
                        <span class="sort-indicator" data-column="note"></span>
                    </div>
                </th>
                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                    Actions
                </th>
            </tr>
        </thead>
        <tbody id="roster-tbody" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
            {% for unit in units %}
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                data-status="{{ unit.status }}"
                data-id="{{ unit.id }}"
                data-type="{{ unit.device_type }}"
                data-last-seen="{{ unit.last_seen }}"
                data-age="{{ unit.age }}"
                data-note="{{ unit.note if unit.note else '' }}">
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center space-x-2">
                        {% if unit.status == 'OK' %}
                        <span class="w-3 h-3 rounded-full bg-green-500" title="OK"></span>
                        {% elif unit.status == 'Pending' %}
                        <span class="w-3 h-3 rounded-full bg-yellow-500" title="Pending"></span>
                        {% else %}
                        <span class="w-3 h-3 rounded-full bg-red-500" title="Missing"></span>
                        {% endif %}

                        {% if unit.deployed %}
                        <span class="w-2 h-2 rounded-full bg-blue-500" title="Deployed"></span>
                        {% else %}
                        <span class="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600" title="Benched"></span>
                        {% endif %}
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <a href="/unit/{{ unit.id }}" class="text-sm font-medium text-seismo-orange hover:text-seismo-burgundy hover:underline">
                        {{ unit.id }}
                    </a>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    {% if unit.device_type == 'modem' %}
                        <span class="px-2 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 text-xs font-medium">
                            Modem
                        </span>
                    {% else %}
                        <span class="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs font-medium">
                            Seismograph
                        </span>
                    {% endif %}
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
                        {% if unit.device_type == 'modem' %}
                            {% if unit.ip_address %}
                                <div><span class="font-mono">{{ unit.ip_address }}</span></div>
                            {% endif %}
                            {% if unit.phone_number %}
                                <div>{{ unit.phone_number }}</div>
                            {% endif %}
                            {% if unit.hardware_model %}
                                <div class="text-gray-500 dark:text-gray-500">{{ unit.hardware_model }}</div>
                            {% endif %}
                        {% else %}
                            {% if unit.next_calibration_due %}
                                <div>
                                    <span class="text-gray-500 dark:text-gray-500">Cal Due:</span>
                                    <span class="font-medium">{{ unit.next_calibration_due }}</span>
                                </div>
                            {% endif %}
                            {% if unit.deployed_with_modem_id %}
                                <div>
                                    <span class="text-gray-500 dark:text-gray-500">Modem:</span>
                                    <a href="/unit/{{ unit.deployed_with_modem_id }}" class="text-seismo-orange hover:underline font-medium">
                                        {{ unit.deployed_with_modem_id }}
                                    </a>
                                </div>
                            {% endif %}
                        {% endif %}
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-500 dark:text-gray-400">{{ unit.last_seen }}</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm
                        {% if unit.status == 'Missing' %}text-red-600 dark:text-red-400 font-semibold
                        {% elif unit.status == 'Pending' %}text-yellow-600 dark:text-yellow-400
                        {% else %}text-gray-500 dark:text-gray-400
                        {% endif %}">
                        {{ unit.age }}
                    </div>
                </td>
                <td class="px-6 py-4">
                    <div class="text-sm text-gray-500 dark:text-gray-400 truncate max-w-xs" title="{{ unit.note }}">
                        {{ unit.note if unit.note else '-' }}
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <div class="flex justify-end gap-2">
                        <button onclick="editUnit('{{ unit.id }}')"
                            class="text-seismo-orange hover:text-seismo-burgundy p-1" title="Edit">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                            </svg>
                        </button>
                        {% if unit.deployed %}
                        <button onclick="toggleDeployed('{{ unit.id }}', false)"
                            class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 p-1" title="Mark as Benched">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                            </svg>
                        </button>
                        {% else %}
                        <button onclick="toggleDeployed('{{ unit.id }}', true)"
                            class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300 p-1" title="Mark as Deployed">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </button>
                        {% endif %}
                        <button onclick="moveToIgnore('{{ unit.id }}')"
                            class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 p-1" title="Move to Ignore List">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
                            </svg>
                        </button>
                        <button onclick="deleteUnit('{{ unit.id }}')"
                            class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 p-1" title="Delete Unit">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                        </button>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Last updated indicator -->
    <div class="px-6 py-3 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400 text-right">
        Last updated: <span id="last-updated">{{ timestamp }}</span>
    </div>
</div>

<!-- Mobile Card View -->
<div class="md:hidden space-y-3">
    {% for unit in units %}
    <div class="unit-card"
         onclick="openUnitModal('{{ unit.id }}', '{{ unit.status }}', '{{ unit.age }}')"
         data-unit-id="{{ unit.id }}"
         data-status="{{ unit.status }}"
         data-age="{{ unit.age }}">
        <!-- Header: Status Dot + Unit ID + Status Badge -->
        <div class="flex items-center justify-between mb-2">
            <div class="flex items-center gap-2">
                {% if unit.status == 'OK' %}
                <span class="w-4 h-4 rounded-full bg-green-500" title="OK"></span>
                {% elif unit.status == 'Pending' %}
                <span class="w-4 h-4 rounded-full bg-yellow-500" title="Pending"></span>
                {% elif unit.status == 'Missing' %}
                <span class="w-4 h-4 rounded-full bg-red-500" title="Missing"></span>
                {% else %}
                <span class="w-4 h-4 rounded-full bg-gray-400" title="No Data"></span>
                {% endif %}
                <span class="font-bold text-lg text-seismo-orange dark:text-seismo-orange">{{ unit.id }}</span>
            </div>
            <span class="px-3 py-1 rounded-full text-xs font-medium
                {% if unit.status == 'OK' %}bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300
                {% elif unit.status == 'Pending' %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300
                {% elif unit.status == 'Missing' %}bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300
                {% else %}bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400
                {% endif %}">
                {% if unit.status in ['N/A', 'Unknown'] %}Benched{% else %}{{ unit.status }}{% endif %}
            </span>
        </div>

        <!-- Type Badge -->
        <div class="mb-2">
            {% if unit.device_type == 'modem' %}
            <span class="px-2 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 text-xs font-medium">
                Modem
            </span>
            {% else %}
            <span class="px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 text-xs font-medium">
                Seismograph
            </span>
            {% endif %}
        </div>

        <!-- Location -->
        {% if unit.address %}
        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">
            📍 {{ unit.address }}
        </div>
        {% elif unit.coordinates %}
        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">
            📍 {{ unit.coordinates }}
        </div>
        {% endif %}

        <!-- Project ID -->
        {% if unit.project_id %}
        <div class="text-sm text-gray-600 dark:text-gray-400 mb-1">
            🏗️ {{ unit.project_id }}
        </div>
        {% endif %}

        <!-- Last Seen -->
        <div class="text-sm text-gray-500 dark:text-gray-500 mt-2">
            🕐 {{ unit.age }}
        </div>

        <!-- Deployed/Benched Indicator -->
        <div class="mt-2">
            {% if unit.deployed %}
            <span class="text-xs text-blue-600 dark:text-blue-400">
                ⚡ Deployed
            </span>
            {% else %}
            <span class="text-xs text-gray-500 dark:text-gray-500">
                📦 Benched
            </span>
            {% endif %}
        </div>

        <!-- Tap Hint -->
        <div class="text-xs text-gray-400 mt-2 text-center border-t border-gray-200 dark:border-gray-700 pt-2">
            Tap for details
        </div>
    </div>
    {% endfor %}

    <!-- Mobile Last Updated -->
    <div class="text-xs text-gray-500 dark:text-gray-400 text-center py-2">
        Last updated: <span id="last-updated-mobile">{{ timestamp }}</span>
    </div>
</div>

<!-- Unit Detail Modal -->
<div id="unitModal" class="unit-modal">
    <!-- Backdrop -->
    <div class="unit-modal-backdrop" onclick="closeUnitModal(event)"></div>

    <!-- Modal Content -->
    <div class="unit-modal-content">
        <!-- Handle Bar (Mobile Only) -->
        <div class="modal-handle"></div>

        <!-- Header -->
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 id="modalUnitId" class="text-xl font-bold text-gray-900 dark:text-white"></h3>
            <button onclick="closeUnitModal(event)" data-close-modal class="w-10 h-10 flex items-center justify-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <!-- Content -->
        <div id="modalContent" class="p-6">
            <!-- Content will be populated by JavaScript -->
        </div>

        <!-- Actions -->
        <div class="p-6 border-t border-gray-200 dark:border-gray-700 space-y-3">
            <button id="modalEditBtn" class="w-full h-12 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg font-medium transition-colors">
                Edit Unit
            </button>
            <div class="grid grid-cols-2 gap-3">
                <button id="modalDeployBtn" class="h-12 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                    Deploy/Bench
                </button>
                <button id="modalDeleteBtn" class="h-12 border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors">
                    Delete
                </button>
            </div>
        </div>
    </div>
</div>

<style>
    .sort-indicator::after {
        content: '⇅';
        opacity: 0.3;
        font-size: 12px;
    }
    .sort-indicator.asc::after {
        content: '↑';
        opacity: 1;
    }
    .sort-indicator.desc::after {
        content: '↓';
        opacity: 1;
    }
</style>

<script>
(function() {
    // Update timestamp
    const timestampElement = document.getElementById('last-updated');
    if (timestampElement) {
        timestampElement.textContent = new Date().toLocaleTimeString();
    }
    const timestampMobileElement = document.getElementById('last-updated-mobile');
    if (timestampMobileElement) {
        timestampMobileElement.textContent = new Date().toLocaleTimeString();
    }

    // Keep a lightweight status map around for the mobile modal
    const rosterUnits = {{ units | tojson }};
    window.rosterStatusMap = rosterUnits.reduce((acc, unit) => {
        acc[unit.id] = {
            status: unit.status || 'Unknown',
            age: unit.age || 'N/A',
            last: unit.last_seen || 'Never'
        };
        return acc;
    }, {});
})();

    // Sorting state (needs to persist across swaps)
    if (typeof window.currentSort === 'undefined') {
        window.currentSort = { column: null, direction: 'asc' };
    }

    function sortTable(column) {
        const tbody = document.getElementById('roster-tbody');
        const rows = Array.from(tbody.getElementsByTagName('tr'));

        // Determine sort direction
        if (window.currentSort.column === column) {
            window.currentSort.direction = window.currentSort.direction === 'asc' ? 'desc' : 'asc';
        } else {
            window.currentSort.column = column;
            window.currentSort.direction = 'asc';
        }

        // Sort rows
        rows.sort((a, b) => {
            let aVal = a.getAttribute(`data-${column}`) || '';
            let bVal = b.getAttribute(`data-${column}`) || '';

            // Special handling for different column types
            if (column === 'age') {
                // Parse age strings like "2h 15m" or "45m" or "3d 5h"
                aVal = parseAge(aVal);
                bVal = parseAge(bVal);
            } else if (column === 'status') {
                // Sort by status priority: Missing > Pending > OK
                const statusOrder = { 'Missing': 0, 'Pending': 1, 'OK': 2, '': 3 };
                aVal = statusOrder[aVal] !== undefined ? statusOrder[aVal] : 999;
                bVal = statusOrder[bVal] !== undefined ? statusOrder[bVal] : 999;
            } else if (column === 'last_seen') {
                // Sort by date
                aVal = new Date(aVal).getTime() || 0;
                bVal = new Date(bVal).getTime() || 0;
            } else {
                // String comparison (case-insensitive)
                aVal = aVal.toLowerCase();
                bVal = bVal.toLowerCase();
            }

            if (aVal < bVal) return window.currentSort.direction === 'asc' ? -1 : 1;
            if (aVal > bVal) return window.currentSort.direction === 'asc' ? 1 : -1;
            return 0;
        });

        // Re-append rows in sorted order
        rows.forEach(row => tbody.appendChild(row));

        // Update sort indicators
        updateSortIndicators();
    }

    function parseAge(ageStr) {
        // Parse age strings like "2h 15m", "45m", "3d 5h", "2w 3d"
        if (!ageStr) return 0;

        let totalMinutes = 0;
        const weeks = ageStr.match(/(\d+)w/);
        const days = ageStr.match(/(\d+)d/);
        const hours = ageStr.match(/(\d+)h/);
        const minutes = ageStr.match(/(\d+)m/);

        if (weeks) totalMinutes += parseInt(weeks[1]) * 7 * 24 * 60;
        if (days) totalMinutes += parseInt(days[1]) * 24 * 60;
        if (hours) totalMinutes += parseInt(hours[1]) * 60;
        if (minutes) totalMinutes += parseInt(minutes[1]);

        return totalMinutes;
    }

    function updateSortIndicators() {
        // Clear all indicators
        document.querySelectorAll('.sort-indicator').forEach(indicator => {
            indicator.className = 'sort-indicator';
        });

        // Set current indicator
        if (window.currentSort.column) {
            const indicator = document.querySelector(`.sort-indicator[data-column="${window.currentSort.column}"]`);
            if (indicator) {
                indicator.className = `sort-indicator ${window.currentSort.direction}`;
            }
        }
    }
</script>