1338 lines
46 KiB
HTML
1338 lines
46 KiB
HTML
|
<div class="business-reports-container">
|
||
|
|
<div class="reports-tabs">
|
||
|
|
<button
|
||
|
|
class="report-tab active"
|
||
|
|
data-tab="crm"
|
||
|
|
onclick="switchReportTab('crm')"
|
||
|
|
>
|
||
|
|
<span class="tab-icon">👤</span>
|
||
|
|
<span data-i18n="crm-title">CRM</span>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="report-tab"
|
||
|
|
data-tab="billing"
|
||
|
|
onclick="switchReportTab('billing')"
|
||
|
|
>
|
||
|
|
<span class="tab-icon">💰</span>
|
||
|
|
<span data-i18n="billing-title">Billing</span>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="report-tab"
|
||
|
|
data-tab="support"
|
||
|
|
onclick="switchReportTab('support')"
|
||
|
|
>
|
||
|
|
<span class="tab-icon">🎫</span>
|
||
|
|
<span data-i18n="tickets-title">Support</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="report-panels">
|
||
|
|
<div class="report-panel active" id="crm-reports">
|
||
|
|
<h3 class="report-section-title" data-i18n="analytics-crm-reports">
|
||
|
|
CRM Reports
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div class="report-grid">
|
||
|
|
<div
|
||
|
|
class="report-card"
|
||
|
|
hx-get="/api/reports/crm/pipeline"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>
|
||
|
|
<div class="report-card-header">
|
||
|
|
<h4 data-i18n="analytics-sales-pipeline">
|
||
|
|
Sales Pipeline
|
||
|
|
</h4>
|
||
|
|
<span class="report-badge">Funnel</span>
|
||
|
|
</div>
|
||
|
|
<div class="report-card-body">
|
||
|
|
<div class="chart-placeholder">
|
||
|
|
<div class="funnel-chart">
|
||
|
|
<div
|
||
|
|
class="funnel-stage"
|
||
|
|
style="--width: 100%; --color: #4caf50"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="stage-label"
|
||
|
|
data-i18n="crm-pipeline-new"
|
||
|
|
>New</span
|
||
|
|
>
|
||
|
|
<span class="stage-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="funnel-stage"
|
||
|
|
style="--width: 80%; --color: #8bc34a"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="stage-label"
|
||
|
|
data-i18n="crm-pipeline-contacted"
|
||
|
|
>Contacted</span
|
||
|
|
>
|
||
|
|
<span class="stage-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="funnel-stage"
|
||
|
|
style="--width: 60%; --color: #cddc39"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="stage-label"
|
||
|
|
data-i18n="crm-pipeline-qualified"
|
||
|
|
>Qualified</span
|
||
|
|
>
|
||
|
|
<span class="stage-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="funnel-stage"
|
||
|
|
style="--width: 40%; --color: #ffc107"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="stage-label"
|
||
|
|
data-i18n="crm-pipeline-proposal"
|
||
|
|
>Proposal</span
|
||
|
|
>
|
||
|
|
<span class="stage-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="funnel-stage"
|
||
|
|
style="--width: 25%; --color: #ff9800"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="stage-label"
|
||
|
|
data-i18n="crm-pipeline-negotiation"
|
||
|
|
>Negotiation</span
|
||
|
|
>
|
||
|
|
<span class="stage-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class="funnel-stage"
|
||
|
|
style="--width: 15%; --color: #2196f3"
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
class="stage-label"
|
||
|
|
data-i18n="crm-won"
|
||
|
|
>Won</span
|
||
|
|
>
|
||
|
|
<span class="stage-value">--</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="report-card"
|
||
|
|
hx-get="/api/reports/crm/conversion"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>
|
||
|
|
<div class="report-card-header">
|
||
|
|
<h4 data-i18n="analytics-lead-conversion">
|
||
|
|
Lead Conversion Rate
|
||
|
|
</h4>
|
||
|
|
<span class="report-badge">KPI</span>
|
||
|
|
</div>
|
||
|
|
<div class="report-card-body">
|
||
|
|
<div class="kpi-display">
|
||
|
|
<div class="kpi-main">
|
||
|
|
<span class="kpi-value">--%</span>
|
||
|
|
<span class="kpi-trend positive">↑ --%</span>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-details">
|
||
|
|
<div class="kpi-detail-item">
|
||
|
|
<span
|
||
|
|
class="detail-label"
|
||
|
|
data-i18n="crm-leads"
|
||
|
|
>Leads</span
|
||
|
|
>
|
||
|
|
<span class="detail-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-detail-item">
|
||
|
|
<span
|
||
|
|
class="detail-label"
|
||
|
|
data-i18n="crm-opportunities"
|
||
|
|
>Opportunities</span
|
||
|
|
>
|
||
|
|
<span class="detail-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-detail-item">
|
||
|
|
<span
|
||
|
|
class="detail-label"
|
||
|
|
data-i18n="crm-won"
|
||
|
|
>Won</span
|
||
|
|
>
|
||
|
|
<span class="detail-value">--</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="report-card"
|
||
|
|
hx-get="/api/reports/crm/won-lost"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>
|
||
|
|
<div class="report-card-header">
|
||
|
|
<h4 data-i18n="analytics-won-lost">
|
||
|
|
Won/Lost Analysis
|
||
|
|
</h4>
|
||
|
|
<span class="report-badge">Chart</span>
|
||
|
|
</div>
|
||
|
|
<div class="report-card-body">
|
||
|
|
<div class="donut-chart-container">
|
||
|
|
<div class="donut-chart">
|
||
|
|
<svg viewBox="0 0 100 100" class="donut-svg">
|
||
|
|
<circle
|
||
|
|
cx="50"
|
||
|
|
cy="50"
|
||
|
|
r="40"
|
||
|
|
fill="none"
|
||
|
|
stroke="#4CAF50"
|
||
|
|
stroke-width="15"
|
||
|
|
stroke-dasharray="75 125"
|
||
|
|
stroke-dashoffset="25"
|
||
|
|
class="donut-segment won"
|
||
|
|
/>
|
||
|
|
<circle
|
||
|
|
cx="50"
|
||
|
|
cy="50"
|
||
|
|
r="40"
|
||
|
|
fill="none"
|
||
|
|
stroke="#F44336"
|
||
|
|
stroke-width="15"
|
||
|
|
stroke-dasharray="50 200"
|
||
|
|
stroke-dashoffset="-50"
|
||
|
|
class="donut-segment lost"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<div class="donut-center">
|
||
|
|
<span class="donut-total">--</span>
|
||
|
|
<span
|
||
|
|
class="donut-label"
|
||
|
|
data-i18n="label-all"
|
||
|
|
>Total</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="donut-legend">
|
||
|
|
<div class="legend-item">
|
||
|
|
<span
|
||
|
|
class="legend-color"
|
||
|
|
style="background: #4caf50"
|
||
|
|
></span>
|
||
|
|
<span data-i18n="crm-won">Won</span>
|
||
|
|
<span class="legend-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="legend-item">
|
||
|
|
<span
|
||
|
|
class="legend-color"
|
||
|
|
style="background: #f44336"
|
||
|
|
></span>
|
||
|
|
<span data-i18n="crm-lost">Lost</span>
|
||
|
|
<span class="legend-value">--</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="report-card"
|
||
|
|
hx-get="/api/reports/crm/forecast"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>
|
||
|
|
<div class="report-card-header">
|
||
|
|
<h4 data-i18n="analytics-sales-forecast">
|
||
|
|
Sales Forecast
|
||
|
|
</h4>
|
||
|
|
<span class="report-badge">Projection</span>
|
||
|
|
</div>
|
||
|
|
<div class="report-card-body">
|
||
|
|
<div class="forecast-display">
|
||
|
|
<div class="forecast-main">
|
||
|
|
<span
|
||
|
|
class="forecast-label"
|
||
|
|
data-i18n="billing-this-month"
|
||
|
|
>This Month</span
|
||
|
|
>
|
||
|
|
<span class="forecast-value">$--</span>
|
||
|
|
</div>
|
||
|
|
<div class="forecast-bar">
|
||
|
|
<div
|
||
|
|
class="forecast-progress"
|
||
|
|
style="width: 0%"
|
||
|
|
></div>
|
||
|
|
<span class="forecast-target">Target: $--</span>
|
||
|
|
</div>
|
||
|
|
<div class="forecast-breakdown">
|
||
|
|
<div class="breakdown-item">
|
||
|
|
<span data-i18n="status-complete"
|
||
|
|
>Closed</span
|
||
|
|
>
|
||
|
|
<span>$--</span>
|
||
|
|
</div>
|
||
|
|
<div class="breakdown-item">
|
||
|
|
<span data-i18n="status-pending"
|
||
|
|
>Pipeline</span
|
||
|
|
>
|
||
|
|
<span>$--</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="report-panel" id="billing-reports">
|
||
|
|
<h3
|
||
|
|
class="report-section-title"
|
||
|
|
data-i18n="analytics-billing-reports"
|
||
|
|
>
|
||
|
|
Billing Reports
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div class="report-grid">
|
||
|
|
<div
|
||
|
|
class="report-card wide"
|
||
|
|
hx-get="/api/reports/billing/revenue"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>
|
||
|
|
<div class="report-card-header">
|
||
|
|
<h4 data-i18n="analytics-revenue-summary">
|
||
|
|
Revenue Summary
|
||
|
|
</h4>
|
||
|
|
<span class="report-badge">Overview</span>
|
||
|
|
</div>
|
||
|
|
<div class="report-card-body">
|
||
|
|
<div class="revenue-grid">
|
||
|
|
<div class="revenue-stat">
|
||
|
|
<span
|
||
|
|
class="revenue-label"
|
||
|
|
data-i18n="billing-this-month"
|
||
|
|
>This Month</span
|
||
|
|
>
|
||
|
|
<span class="revenue-value">$--</span>
|
||
|
|
<span class="revenue-change positive"
|
||
|
|
>↑ --%</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="revenue-stat">
|
||
|
|
<span
|
||
|
|
class="revenue-label"
|
||
|
|
data-i18n="billing-last-month"
|
||
|
|
>Last Month</span
|
||
|
|
>
|
||
|
|
<span class="revenue-value">$--</span>
|
||
|
|
</div>
|
||
|
|
<div class="revenue-stat">
|
||
|
|
<span
|
||
|
|
class="revenue-label"
|
||
|
|
data-i18n="billing-outstanding"
|
||
|
|
>Outstanding</span
|
||
|
|
>
|
||
|
|
<span class="revenue-value warning">$--</span>
|
||
|
|
</div>
|
||
|
|
<div class="revenue-stat">
|
||
|
|
<span
|
||
|
|
class="revenue-label"
|
||
|
|
data-i18n="billing-total-overdue"
|
||
|
|
>Overdue</span
|
||
|
|
>
|
||
|
|
<span class="revenue-value danger">$--</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="report-card"
|
||
|
|
hx-get="/api/reports/billing/aging"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>
|
||
|
|
<div class="report-card-header">
|
||
|
|
<h4 data-i18n="analytics-aging-report">Aging Report</h4>
|
||
|
|
<span class="report-badge">Receivables</span>
|
||
|
|
</div>
|
||
|
|
<div class="report-card-body">
|
||
|
|
<div class="aging-breakdown">
|
||
|
|
<div class="aging-item">
|
||
|
|
<span class="aging-label">Current</span>
|
||
|
|
<div class="aging-bar-container">
|
||
|
|
<div
|
||
|
|
class="aging-bar current"
|
||
|
|
style="width: 0%"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<span class="aging-value">$--</span>
|
||
|
|
</div>
|
||
|
|
<div class="aging-item">
|
||
|
|
<span class="aging-label">1-30 days</span>
|
||
|
|
<div class="aging-bar-container">
|
||
|
|
<div
|
||
|
|
class="aging-bar days-30"
|
||
|
|
style="width: 0%"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<span class="aging-value">$--</span>
|
||
|
|
</div>
|
||
|
|
<div class="aging-item">
|
||
|
|
<span class="aging-label">31-60 days</span>
|
||
|
|
<div class="aging-bar-container">
|
||
|
|
<div
|
||
|
|
class="aging-bar days-60"
|
||
|
|
style="width: 0%"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<span class="aging-value">$--</span>
|
||
|
|
</div>
|
||
|
|
<div class="aging-item">
|
||
|
|
<span class="aging-label">61-90 days</span>
|
||
|
|
<div class="aging-bar-container">
|
||
|
|
<div
|
||
|
|
class="aging-bar days-90"
|
||
|
|
style="width: 0%"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<span class="aging-value">$--</span>
|
||
|
|
</div>
|
||
|
|
<div class="aging-item">
|
||
|
|
<span class="aging-label">90+ days</span>
|
||
|
|
<div class="aging-bar-container">
|
||
|
|
<div
|
||
|
|
class="aging-bar days-over"
|
||
|
|
style="width: 0%"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<span class="aging-value">$--</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="report-card"
|
||
|
|
hx-get="/api/reports/billing/payments"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>
|
||
|
|
<div class="report-card-header">
|
||
|
|
<h4 data-i18n="analytics-payment-history">
|
||
|
|
Payment History
|
||
|
|
</h4>
|
||
|
|
<span class="report-badge">Trend</span>
|
||
|
|
</div>
|
||
|
|
<div class="report-card-body">
|
||
|
|
<div class="mini-chart-placeholder">
|
||
|
|
<div class="sparkline-container">
|
||
|
|
<svg
|
||
|
|
class="sparkline"
|
||
|
|
viewBox="0 0 100 30"
|
||
|
|
preserveAspectRatio="none"
|
||
|
|
>
|
||
|
|
<polyline
|
||
|
|
fill="none"
|
||
|
|
stroke="#4CAF50"
|
||
|
|
stroke-width="2"
|
||
|
|
points="0,25 20,20 40,15 60,18 80,10 100,12"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="chart-summary">
|
||
|
|
<span
|
||
|
|
class="summary-label"
|
||
|
|
data-i18n="billing-total-paid"
|
||
|
|
>Total Paid</span
|
||
|
|
>
|
||
|
|
<span class="summary-value">$--</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="report-card"
|
||
|
|
hx-get="/api/reports/billing/monthly"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>
|
||
|
|
<div class="report-card-header">
|
||
|
|
<h4 data-i18n="analytics-monthly-revenue">
|
||
|
|
Monthly Revenue
|
||
|
|
</h4>
|
||
|
|
<span class="report-badge">Chart</span>
|
||
|
|
</div>
|
||
|
|
<div class="report-card-body">
|
||
|
|
<div class="bar-chart-container">
|
||
|
|
<div class="bar-chart">
|
||
|
|
<div class="bar" style="--height: 60%">
|
||
|
|
<span class="bar-value">$--</span>
|
||
|
|
<span class="bar-label">Jan</span>
|
||
|
|
</div>
|
||
|
|
<div class="bar" style="--height: 75%">
|
||
|
|
<span class="bar-value">$--</span>
|
||
|
|
<span class="bar-label">Feb</span>
|
||
|
|
</div>
|
||
|
|
<div class="bar" style="--height: 45%">
|
||
|
|
<span class="bar-value">$--</span>
|
||
|
|
<span class="bar-label">Mar</span>
|
||
|
|
</div>
|
||
|
|
<div class="bar" style="--height: 80%">
|
||
|
|
<span class="bar-value">$--</span>
|
||
|
|
<span class="bar-label">Apr</span>
|
||
|
|
</div>
|
||
|
|
<div class="bar" style="--height: 90%">
|
||
|
|
<span class="bar-value">$--</span>
|
||
|
|
<span class="bar-label">May</span>
|
||
|
|
</div>
|
||
|
|
<div class="bar current" style="--height: 70%">
|
||
|
|
<span class="bar-value">$--</span>
|
||
|
|
<span class="bar-label">Jun</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="report-panel" id="support-reports">
|
||
|
|
<h3
|
||
|
|
class="report-section-title"
|
||
|
|
data-i18n="analytics-support-reports"
|
||
|
|
>
|
||
|
|
Support Reports
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div class="report-grid">
|
||
|
|
<div
|
||
|
|
class="report-card"
|
||
|
|
hx-get="/api/reports/support/by-priority"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>
|
||
|
|
<div class="report-card-header">
|
||
|
|
<h4 data-i18n="analytics-cases-priority">
|
||
|
|
Open Cases by Priority
|
||
|
|
</h4>
|
||
|
|
<span class="report-badge">Distribution</span>
|
||
|
|
</div>
|
||
|
|
<div class="report-card-body">
|
||
|
|
<div class="priority-breakdown">
|
||
|
|
<div class="priority-item urgent">
|
||
|
|
<span class="priority-icon">🔴</span>
|
||
|
|
<span
|
||
|
|
class="priority-label"
|
||
|
|
data-i18n="tickets-priority-urgent"
|
||
|
|
>Urgent</span
|
||
|
|
>
|
||
|
|
<span class="priority-count">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="priority-item high">
|
||
|
|
<span class="priority-icon">🟠</span>
|
||
|
|
<span
|
||
|
|
class="priority-label"
|
||
|
|
data-i18n="tickets-priority-high"
|
||
|
|
>High</span
|
||
|
|
>
|
||
|
|
<span class="priority-count">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="priority-item medium">
|
||
|
|
<span class="priority-icon">🟡</span>
|
||
|
|
<span
|
||
|
|
class="priority-label"
|
||
|
|
data-i18n="tickets-priority-medium"
|
||
|
|
>Medium</span
|
||
|
|
>
|
||
|
|
<span class="priority-count">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="priority-item low">
|
||
|
|
<span class="priority-icon">🟢</span>
|
||
|
|
<span
|
||
|
|
class="priority-label"
|
||
|
|
data-i18n="tickets-priority-low"
|
||
|
|
>Low</span
|
||
|
|
>
|
||
|
|
<span class="priority-count">--</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="report-card"
|
||
|
|
hx-get="/api/reports/support/resolution-time"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>
|
||
|
|
<div class="report-card-header">
|
||
|
|
<h4 data-i18n="analytics-resolution-time">
|
||
|
|
Resolution Time (Avg)
|
||
|
|
</h4>
|
||
|
|
<span class="report-badge">KPI</span>
|
||
|
|
</div>
|
||
|
|
<div class="report-card-body">
|
||
|
|
<div class="time-kpi">
|
||
|
|
<div class="time-main">
|
||
|
|
<span class="time-value">--</span>
|
||
|
|
<span class="time-unit">hours</span>
|
||
|
|
</div>
|
||
|
|
<div class="time-comparison">
|
||
|
|
<span class="comparison-label"
|
||
|
|
>vs. last period</span
|
||
|
|
>
|
||
|
|
<span class="comparison-value positive"
|
||
|
|
>↓ --%</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div class="time-breakdown">
|
||
|
|
<div class="time-item">
|
||
|
|
<span data-i18n="tickets-response-time"
|
||
|
|
>First Response</span
|
||
|
|
>
|
||
|
|
<span>-- min</span>
|
||
|
|
</div>
|
||
|
|
<div class="time-item">
|
||
|
|
<span data-i18n="tickets-resolution-time"
|
||
|
|
>Full Resolution</span
|
||
|
|
>
|
||
|
|
<span>-- hrs</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="report-card"
|
||
|
|
hx-get="/api/reports/support/by-category"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>
|
||
|
|
<div class="report-card-header">
|
||
|
|
<h4 data-i18n="analytics-cases-category">
|
||
|
|
Cases by Category
|
||
|
|
</h4>
|
||
|
|
<span class="report-badge">Breakdown</span>
|
||
|
|
</div>
|
||
|
|
<div class="report-card-body">
|
||
|
|
<div class="category-list">
|
||
|
|
<div class="category-item">
|
||
|
|
<span class="category-name"
|
||
|
|
>Technical Issue</span
|
||
|
|
>
|
||
|
|
<div class="category-bar-container">
|
||
|
|
<div
|
||
|
|
class="category-bar"
|
||
|
|
style="width: 0%"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<span class="category-count">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="category-item">
|
||
|
|
<span class="category-name"
|
||
|
|
>Billing Question</span
|
||
|
|
>
|
||
|
|
<div class="category-bar-container">
|
||
|
|
<div
|
||
|
|
class="category-bar"
|
||
|
|
style="width: 0%"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<span class="category-count">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="category-item">
|
||
|
|
<span class="category-name"
|
||
|
|
>Feature Request</span
|
||
|
|
>
|
||
|
|
<div class="category-bar-container">
|
||
|
|
<div
|
||
|
|
class="category-bar"
|
||
|
|
style="width: 0%"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<span class="category-count">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="category-item">
|
||
|
|
<span class="category-name"
|
||
|
|
>General Inquiry</span
|
||
|
|
>
|
||
|
|
<div class="category-bar-container">
|
||
|
|
<div
|
||
|
|
class="category-bar"
|
||
|
|
style="width: 0%"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<span class="category-count">--</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="report-card"
|
||
|
|
hx-get="/api/reports/support/ai-rate"
|
||
|
|
hx-trigger="load"
|
||
|
|
hx-swap="innerHTML"
|
||
|
|
>
|
||
|
|
<div class="report-card-header">
|
||
|
|
<h4 data-i18n="analytics-ai-resolution">
|
||
|
|
AI Resolution Rate
|
||
|
|
</h4>
|
||
|
|
<span class="report-badge">AI</span>
|
||
|
|
</div>
|
||
|
|
<div class="report-card-body">
|
||
|
|
<div class="ai-kpi">
|
||
|
|
<div class="ai-gauge">
|
||
|
|
<svg viewBox="0 0 100 50" class="gauge-svg">
|
||
|
|
<path
|
||
|
|
d="M10,50 A40,40 0 0,1 90,50"
|
||
|
|
fill="none"
|
||
|
|
stroke="#333"
|
||
|
|
stroke-width="8"
|
||
|
|
stroke-linecap="round"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
d="M10,50 A40,40 0 0,1 90,50"
|
||
|
|
fill="none"
|
||
|
|
stroke="#4CAF50"
|
||
|
|
stroke-width="8"
|
||
|
|
stroke-linecap="round"
|
||
|
|
stroke-dasharray="0 126"
|
||
|
|
class="gauge-fill"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
<div class="gauge-value">--%</div>
|
||
|
|
</div>
|
||
|
|
<div class="ai-stats">
|
||
|
|
<div class="ai-stat">
|
||
|
|
<span
|
||
|
|
class="stat-label"
|
||
|
|
data-i18n="tickets-ai-suggestion"
|
||
|
|
>AI Resolved</span
|
||
|
|
>
|
||
|
|
<span class="stat-value">--</span>
|
||
|
|
</div>
|
||
|
|
<div class="ai-stat">
|
||
|
|
<span class="stat-label"
|
||
|
|
>Human Resolved</span
|
||
|
|
>
|
||
|
|
<span class="stat-value">--</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.business-reports-container {
|
||
|
|
padding: 20px;
|
||
|
|
background: var(--background, #0a0a0f);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reports-tabs {
|
||
|
|
display: flex;
|
||
|
|
gap: 8px;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
border-bottom: 1px solid var(--border, #2a2a2a);
|
||
|
|
padding-bottom: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-tab {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
padding: 10px 20px;
|
||
|
|
background: transparent;
|
||
|
|
border: 1px solid var(--border, #2a2a2a);
|
||
|
|
border-radius: 8px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-tab:hover {
|
||
|
|
background: var(--hover, rgba(255, 255, 255, 0.05));
|
||
|
|
color: var(--text, #fff);
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-tab.active {
|
||
|
|
background: var(--accent, #3b82f6);
|
||
|
|
border-color: var(--accent, #3b82f6);
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-icon {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-panel {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-panel.active {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-section-title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-card {
|
||
|
|
background: var(--surface, var(--card, #1a1a24));
|
||
|
|
border: 1px solid var(--border, #2a2a2a);
|
||
|
|
border-radius: 12px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-card.wide {
|
||
|
|
grid-column: span 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-card-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 16px;
|
||
|
|
border-bottom: 1px solid var(--border, #2a2a2a);
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-card-header h4 {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-badge {
|
||
|
|
font-size: 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
text-transform: uppercase;
|
||
|
|
padding: 4px 8px;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: var(--accent-glow, rgba(59, 130, 246, 0.15));
|
||
|
|
color: var(--accent, #3b82f6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-card-body {
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.funnel-chart {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.funnel-stage {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 10px 16px;
|
||
|
|
background: var(--color);
|
||
|
|
border-radius: 6px;
|
||
|
|
width: var(--width);
|
||
|
|
margin: 0 auto;
|
||
|
|
transition: width 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stage-label,
|
||
|
|
.stage-value {
|
||
|
|
color: #fff;
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.kpi-display,
|
||
|
|
.time-kpi,
|
||
|
|
.ai-kpi {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.kpi-main,
|
||
|
|
.time-main {
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.kpi-value {
|
||
|
|
font-size: 48px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
}
|
||
|
|
|
||
|
|
.kpi-trend,
|
||
|
|
.comparison-value {
|
||
|
|
font-size: 14px;
|
||
|
|
margin-left: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.kpi-trend.positive,
|
||
|
|
.comparison-value.positive {
|
||
|
|
color: #4caf50;
|
||
|
|
}
|
||
|
|
|
||
|
|
.kpi-trend.negative,
|
||
|
|
.comparison-value.negative {
|
||
|
|
color: #f44336;
|
||
|
|
}
|
||
|
|
|
||
|
|
.kpi-details,
|
||
|
|
.time-breakdown,
|
||
|
|
.ai-stats {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
padding-top: 16px;
|
||
|
|
border-top: 1px solid var(--border, #2a2a2a);
|
||
|
|
}
|
||
|
|
|
||
|
|
.kpi-detail-item,
|
||
|
|
.time-item,
|
||
|
|
.ai-stat {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-label,
|
||
|
|
.time-item span:first-child,
|
||
|
|
.stat-label {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-value,
|
||
|
|
.time-item span:last-child,
|
||
|
|
.stat-value {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
}
|
||
|
|
|
||
|
|
.donut-chart-container {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.donut-chart {
|
||
|
|
position: relative;
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.donut-svg {
|
||
|
|
transform: rotate(-90deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
.donut-center {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.donut-total {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.donut-label {
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
}
|
||
|
|
|
||
|
|
.donut-legend {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
font-size: 13px;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-color {
|
||
|
|
width: 12px;
|
||
|
|
height: 12px;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-value {
|
||
|
|
margin-left: auto;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.revenue-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(4, 1fr);
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.revenue-stat {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.revenue-label {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.revenue-value {
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.revenue-value.warning {
|
||
|
|
color: #ff9800;
|
||
|
|
}
|
||
|
|
|
||
|
|
.revenue-value.danger {
|
||
|
|
color: #f44336;
|
||
|
|
}
|
||
|
|
|
||
|
|
.revenue-change {
|
||
|
|
font-size: 12px;
|
||
|
|
display: block;
|
||
|
|
margin-top: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.revenue-change.positive {
|
||
|
|
color: #4caf50;
|
||
|
|
}
|
||
|
|
|
||
|
|
.aging-breakdown,
|
||
|
|
.category-list {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.aging-item,
|
||
|
|
.category-item {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 80px 1fr 60px;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.aging-label,
|
||
|
|
.category-name {
|
||
|
|
font-size: 13px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
}
|
||
|
|
|
||
|
|
.aging-bar-container,
|
||
|
|
.category-bar-container {
|
||
|
|
height: 8px;
|
||
|
|
background: var(--hover, rgba(255, 255, 255, 0.05));
|
||
|
|
border-radius: 4px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.aging-bar,
|
||
|
|
.category-bar {
|
||
|
|
height: 100%;
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: width 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.aging-bar.current {
|
||
|
|
background: #4caf50;
|
||
|
|
}
|
||
|
|
.aging-bar.days-30 {
|
||
|
|
background: #8bc34a;
|
||
|
|
}
|
||
|
|
.aging-bar.days-60 {
|
||
|
|
background: #ffc107;
|
||
|
|
}
|
||
|
|
.aging-bar.days-90 {
|
||
|
|
background: #ff9800;
|
||
|
|
}
|
||
|
|
.aging-bar.days-over {
|
||
|
|
background: #f44336;
|
||
|
|
}
|
||
|
|
|
||
|
|
.category-bar {
|
||
|
|
background: var(--accent, #3b82f6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.aging-value,
|
||
|
|
.category-count {
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.priority-breakdown {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.priority-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 12px;
|
||
|
|
padding: 12px;
|
||
|
|
background: var(--hover, rgba(255, 255, 255, 0.03));
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.priority-icon {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.priority-label {
|
||
|
|
flex: 1;
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
}
|
||
|
|
|
||
|
|
.priority-count {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-value {
|
||
|
|
font-size: 48px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-unit {
|
||
|
|
font-size: 16px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
margin-left: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-comparison {
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-label {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ai-gauge {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gauge-svg {
|
||
|
|
width: 150px;
|
||
|
|
height: 75px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gauge-fill {
|
||
|
|
transition: stroke-dasharray 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gauge-value {
|
||
|
|
font-size: 32px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
margin-top: -10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bar-chart-container {
|
||
|
|
height: 150px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bar-chart {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-end;
|
||
|
|
justify-content: space-around;
|
||
|
|
height: 100%;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bar {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
width: 40px;
|
||
|
|
height: var(--height);
|
||
|
|
background: var(--accent-glow, rgba(59, 130, 246, 0.3));
|
||
|
|
border-radius: 4px 4px 0 0;
|
||
|
|
position: relative;
|
||
|
|
transition: height 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bar.current {
|
||
|
|
background: var(--accent, #3b82f6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.bar-value {
|
||
|
|
position: absolute;
|
||
|
|
top: -20px;
|
||
|
|
font-size: 10px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bar-label {
|
||
|
|
position: absolute;
|
||
|
|
bottom: -20px;
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkline-container {
|
||
|
|
height: 60px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sparkline {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-summary {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-label {
|
||
|
|
font-size: 13px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-value {
|
||
|
|
font-size: 20px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-display {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-main {
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-label {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-value {
|
||
|
|
font-size: 36px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-bar {
|
||
|
|
height: 8px;
|
||
|
|
background: var(--hover, rgba(255, 255, 255, 0.1));
|
||
|
|
border-radius: 4px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-progress {
|
||
|
|
height: 100%;
|
||
|
|
background: var(--accent, #3b82f6);
|
||
|
|
border-radius: 4px;
|
||
|
|
transition: width 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-target {
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
}
|
||
|
|
|
||
|
|
.forecast-breakdown {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
margin-top: 16px;
|
||
|
|
padding-top: 16px;
|
||
|
|
border-top: 1px solid var(--border, #2a2a2a);
|
||
|
|
}
|
||
|
|
|
||
|
|
.breakdown-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.breakdown-item span:first-child {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--text-secondary, #888);
|
||
|
|
}
|
||
|
|
|
||
|
|
.breakdown-item span:last-child {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--text, #fff);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.report-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.report-card.wide {
|
||
|
|
grid-column: span 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.revenue-grid {
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
}
|
||
|
|
|
||
|
|
.reports-tabs {
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function switchReportTab(tab) {
|
||
|
|
document.querySelectorAll(".report-tab").forEach(function (btn) {
|
||
|
|
btn.classList.toggle(
|
||
|
|
"active",
|
||
|
|
btn.getAttribute("data-tab") === tab,
|
||
|
|
);
|
||
|
|
});
|
||
|
|
document.querySelectorAll(".report-panel").forEach(function (panel) {
|
||
|
|
panel.classList.toggle("active", panel.id === tab + "-reports");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|