Add comprehensive backend features and mobile UI improvements
Backend: - Add 2FA authentication with TOTP support - Add API keys management system - Add audit logging for security events - Add file upload/management system - Add notifications system with preferences - Add session management - Add webhooks integration - Add analytics endpoints - Add export functionality - Add password policy enforcement - Add new database migrations for core tables Frontend: - Add module position system (top/bottom sidebar sections) - Add search and notifications module configuration tabs - Add mobile logo replacing hamburger menu - Center page title absolutely when no tabs present - Align sidebar footer toggles with navigation items - Add lighter icon color in dark theme for mobile - Add API keys management page - Add notifications page with context - Add admin analytics and audit logs pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
196
frontend/src/styles/AdminAnalytics.css
Normal file
196
frontend/src/styles/AdminAnalytics.css
Normal file
@@ -0,0 +1,196 @@
|
||||
.admin-analytics-root .page-content {
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.analytics-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--section-gap-sm);
|
||||
margin-bottom: var(--section-gap);
|
||||
}
|
||||
|
||||
.analytics-card {
|
||||
border: 1px solid var(--color-card-outline);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
background: var(--color-bg-card);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: box-shadow var(--transition-base), border-color var(--transition-base);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, black, transparent)) {
|
||||
.analytics-card {
|
||||
background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
|
||||
backdrop-filter: blur(14px) saturate(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.analytics-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: rgba(var(--color-accent-rgb), 0.22);
|
||||
}
|
||||
|
||||
.analytics-card-title {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--badge-font-size);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.analytics-card-value {
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: var(--weight-bold);
|
||||
color: var(--color-text-primary);
|
||||
margin-top: var(--space-1);
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
|
||||
.analytics-card-sub {
|
||||
margin-top: var(--space-2);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.analytics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--section-gap-sm);
|
||||
}
|
||||
|
||||
.analytics-panel {
|
||||
border: 1px solid var(--color-card-outline);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
background: var(--color-bg-card);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: box-shadow var(--transition-base), border-color var(--transition-base);
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, black, transparent)) {
|
||||
.analytics-panel {
|
||||
background: color-mix(in srgb, var(--color-bg-card) 88%, transparent);
|
||||
backdrop-filter: blur(14px) saturate(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.analytics-panel:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: rgba(var(--color-accent-rgb), 0.18);
|
||||
}
|
||||
|
||||
.analytics-panel .section-title {
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
}
|
||||
|
||||
.mini-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.mini-chart-row {
|
||||
display: grid;
|
||||
grid-template-columns: 95px 1fr 64px;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mini-chart-label {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.82rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mini-chart-bars {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.mini-bar {
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.mini-bar.bar-accent {
|
||||
background: rgba(var(--color-accent-rgb), 0.75);
|
||||
}
|
||||
|
||||
.mini-bar.bar-muted {
|
||||
background: rgba(156, 163, 175, 0.6);
|
||||
}
|
||||
|
||||
.mini-chart-values {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.82rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.mini-chart-legend {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.legend-dot.accent {
|
||||
background: rgba(var(--color-accent-rgb), 0.75);
|
||||
}
|
||||
|
||||
.legend-dot.muted {
|
||||
background: rgba(156, 163, 175, 0.6);
|
||||
}
|
||||
|
||||
.analytics-footnote {
|
||||
margin-top: 1rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.analytics-cards {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.analytics-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.mini-chart-row {
|
||||
grid-template-columns: 80px 1fr 56px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== DARK THEME + AUTO ACCENT OVERRIDES ========== */
|
||||
|
||||
/* Mini bar accent color */
|
||||
[data-theme='dark'][data-accent='auto'] .mini-bar.bar-accent {
|
||||
background: rgba(229, 231, 235, 0.75);
|
||||
}
|
||||
|
||||
/* Legend dot accent */
|
||||
[data-theme='dark'][data-accent='auto'] .legend-dot.accent {
|
||||
background: rgba(229, 231, 235, 0.75);
|
||||
}
|
||||
Reference in New Issue
Block a user