BetterDesk/web-nodejs/views/reports.ejs

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

    <!-- Tab bar -->
    <div class="tab-bar">
        <button class="tab-btn active" data-tab="generate">${_('reports.tab_generate')}</button>
        <button class="tab-btn" data-tab="saved">${_('reports.tab_saved')}</button>
    </div>

    <!-- Generate panel -->
    <div class="tab-panel active" id="tab-generate">
        <div class="report-type-grid">
            <div class="report-type-card" data-type="devices">
                <span class="material-icons">devices</span>
                <h3>${_('reports.type_devices')}</h3>
                <p>${_('reports.type_devices_desc')}</p>
            </div>
            <div class="report-type-card" data-type="activity">
                <span class="material-icons">timeline</span>
                <h3>${_('reports.type_activity')}</h3>
                <p>${_('reports.type_activity_desc')}</p>
            </div>
            <div class="report-type-card" data-type="security">
                <span class="material-icons">security</span>
                <h3>${_('reports.type_security')}</h3>
                <p>${_('reports.type_security_desc')}</p>
            </div>
            <div class="report-type-card" data-type="tickets">
                <span class="material-icons">confirmation_number</span>
                <h3>${_('reports.type_tickets')}</h3>
                <p>${_('reports.type_tickets_desc')}</p>
            </div>
            <div class="report-type-card" data-type="network">
                <span class="material-icons">lan</span>
                <h3>${_('reports.type_network')}</h3>
                <p>${_('reports.type_network_desc')}</p>
            </div>
            <div class="report-type-card" data-type="inventory">
                <span class="material-icons">inventory_2</span>
                <h3>${_('reports.type_inventory')}</h3>
                <p>${_('reports.type_inventory_desc')}</p>
            </div>
            <div class="report-type-card" data-type="alerts">
                <span class="material-icons">notifications</span>
                <h3>${_('reports.type_alerts')}</h3>
                <p>${_('reports.type_alerts_desc')}</p>
            </div>
        </div>

        <!-- Report options -->
        <div class="report-options" id="report-options" style="display:none">
            <h3 id="report-options-title"></h3>
            <div class="form-row">
                <label for="report-from">${_('reports.date_from')}</label>
                <input type="date" id="report-from" />
            </div>
            <div class="form-row">
                <label for="report-to">${_('reports.date_to')}</label>
                <input type="date" id="report-to" />
            </div>
            <div class="form-row">
                <label for="report-format">${_('reports.format')}</label>
                <select id="report-format">
                    <option value="json">JSON</option>
                    <option value="csv">CSV</option>
                </select>
            </div>
            <div class="form-actions">
                <button class="btn btn-primary" id="generate-btn">
                    <span class="material-icons">play_arrow</span> ${_('reports.generate')}
                </button>
                <button class="btn btn-secondary" id="save-report-btn">
                    <span class="material-icons">save</span> ${_('reports.save')}
                </button>
            </div>
        </div>

        <!-- Preview -->
        <div class="report-preview" id="report-preview" style="display:none">
            <div class="report-preview-header">
                <h3>${_('reports.preview')}</h3>
                <button class="btn btn-sm btn-secondary" id="download-btn">
                    <span class="material-icons" style="font-size:16px">download</span> ${_('reports.download')}
                </button>
            </div>
            <div id="preview-content" class="report-output"></div>
        </div>
    </div>

    <!-- Saved panel -->
    <div class="tab-panel" id="tab-saved">
        <div class="table-wrapper">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>${_('reports.report_name')}</th>
                        <th>${_('reports.report_type')}</th>
                        <th>${_('reports.created_at')}</th>
                        <th>${_('common.actions')}</th>
                    </tr>
                </thead>
                <tbody id="saved-body"></tbody>
            </table>
        </div>
    </div>
    `
}) %>