BetterDesk/web-nodejs/views/activity.ejs

<%- include('layouts/main', {
    title: typeof title !== 'undefined' ? title : 'Activity',
    pageStyles: ['activity'],
    pageScripts: ['activity'],
    currentPage: 'activity',
    breadcrumb: [{ label: _('nav.management') }, { label: _('activity.title') }],
    body: `
    <div class="page-header">
        <h1>${_('activity.title')}</h1>
    </div>

    <!-- Filters -->
    <div class="page-filters">
        <div class="search-wrapper">
            <span class="material-icons">search</span>
            <input type="text" id="activity-search" placeholder="${_('activity.search')}" />
        </div>
        <div class="filter-group">
            <label>${_('activity.date_range')}</label>
            <input type="date" id="activity-from" />
            <span class="range-sep">—</span>
            <input type="date" id="activity-to" />
        </div>
        <button class="btn btn-secondary" id="activity-refresh-btn">
            <span class="material-icons">refresh</span>
        </button>
    </div>

    <!-- Activity list -->
    <div class="table-wrapper">
        <table class="data-table">
            <thead>
                <tr>
                    <th>${_('activity.device_id')}</th>
                    <th>${_('activity.hostname')}</th>
                    <th>${_('activity.session_count')}</th>
                    <th>${_('activity.active_time')}</th>
                    <th>${_('activity.idle_time')}</th>
                    <th>${_('activity.reported_at')}</th>
                    <th>${_('common.actions')}</th>
                </tr>
            </thead>
            <tbody id="activity-body"></tbody>
        </table>
    </div>

    <!-- Detail modal -->
    <div class="modal-overlay" id="detail-modal" style="display:none">
        <div class="modal modal-lg">
            <div class="modal-header">
                <h2 id="detail-modal-title">${_('activity.detail')}</h2>
                <button class="modal-close" data-modal="detail-modal"><span class="material-icons">close</span></button>
            </div>
            <div class="modal-body">
                <!-- Sessions -->
                <div class="detail-section" id="detail-sessions">
                    <h3><span class="material-icons">schedule</span> ${_('activity.sessions')}</h3>
                    <div id="sessions-list"></div>
                </div>
                <!-- Top apps -->
                <div class="detail-section" id="detail-apps">
                    <h3><span class="material-icons">apps</span> ${_('activity.top_apps')}</h3>
                    <div id="apps-list"></div>
                </div>
            </div>
        </div>
    </div>
    `
}) %>