Rework admin dashboard filtering, search, and message viewing.
Admins need to find orders quickly and read full letter text without a cramped table column. - Make stat cards clickable filters (Totalt, Att göra, Betalda, Väntar) - Add search by partial order ID or registration number - Show shortened order ID in table with full ID on hover - Replace message column with "Visa meddelande" opening a modal - Keep expanded row for tracking only; remove duplicate brevtext block - Update AdminDashboard unit tests and admin-dashboard e2e specs
This commit is contained in:
parent
b9a0bdb318
commit
01db53860b
3 changed files with 411 additions and 39 deletions
|
|
@ -47,13 +47,30 @@ test.describe('Admin dashboard', () => {
|
|||
await expect(page.getByText('GHI789').first()).toBeVisible()
|
||||
})
|
||||
|
||||
test('click expand button shows letter content', async ({ page }) => {
|
||||
test('show message button opens modal with full letter text', async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto('/admin')
|
||||
|
||||
await page
|
||||
.locator('.admin__row', { hasText: 'ABC123' })
|
||||
.getByRole('button', { name: 'Visa meddelande' })
|
||||
.click()
|
||||
|
||||
const dialog = page.getByRole('dialog', { name: 'Brevtext' })
|
||||
await expect(dialog).toBeVisible()
|
||||
await expect(dialog).toContainText('fin bil')
|
||||
await dialog.getByRole('button', { name: 'Stäng' }).click()
|
||||
await expect(dialog).not.toBeVisible()
|
||||
})
|
||||
|
||||
test('click expand button shows tracking section', async ({ page }) => {
|
||||
await page.goto('/admin')
|
||||
|
||||
const expandBtns = page.locator('.admin__expand-btn')
|
||||
await expandBtns.first().click()
|
||||
|
||||
await expect(page.getByText('Brevtext')).toBeVisible()
|
||||
await expect(page.getByText('Spårnings-ID').first()).toBeVisible()
|
||||
})
|
||||
|
||||
test('click expand button again collapses it', async ({ page }) => {
|
||||
|
|
@ -61,10 +78,10 @@ test.describe('Admin dashboard', () => {
|
|||
|
||||
const expandBtns = page.locator('.admin__expand-btn')
|
||||
await expandBtns.first().click()
|
||||
await expect(page.getByText('Brevtext')).toBeVisible()
|
||||
await expect(page.locator('.admin__tracking-input').first()).toBeVisible()
|
||||
|
||||
await expandBtns.first().click()
|
||||
await expect(page.getByText('Brevtext')).not.toBeVisible()
|
||||
await expect(page.locator('.admin__tracking-input').first()).not.toBeVisible()
|
||||
})
|
||||
|
||||
test('status dropdown changes update order status', async ({ page }) => {
|
||||
|
|
|
|||
|
|
@ -55,6 +55,16 @@ const mockOrders = [
|
|||
amountPaid: null,
|
||||
createdAt: '2026-05-14T13:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 'c3eebc99-9c0b-4ef8-bb6d-6bb9bd380a13',
|
||||
email: 'pending@example.com',
|
||||
plate: 'PND111',
|
||||
letterText: 'Väntar på betalning.',
|
||||
status: 'pending_payment',
|
||||
trackingId: null,
|
||||
amountPaid: null,
|
||||
createdAt: '2026-05-15T14:00:00Z',
|
||||
},
|
||||
]
|
||||
|
||||
describe('AdminDashboard', () => {
|
||||
|
|
@ -91,8 +101,10 @@ describe('AdminDashboard', () => {
|
|||
const { wrapper } = mountPage()
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
expect(wrapper.text()).toContain('Datum')
|
||||
expect(wrapper.text()).toContain('Beställnings-ID')
|
||||
expect(wrapper.text()).toContain('E-post')
|
||||
expect(wrapper.text()).toContain('Regnr')
|
||||
expect(wrapper.text()).toContain('Meddelande')
|
||||
expect(wrapper.text()).toContain('Status')
|
||||
})
|
||||
|
||||
|
|
@ -121,19 +133,30 @@ describe('AdminDashboard', () => {
|
|||
expect(wrapper.text()).toContain('Kunde inte hämta beställningar')
|
||||
})
|
||||
|
||||
it('expands row on button click to show letter content', async () => {
|
||||
it('opens message modal with full letter text', async () => {
|
||||
const { wrapper } = mountPage()
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
const rows = wrapper.findAll('.admin__row')
|
||||
expect(rows.length).toBe(2)
|
||||
|
||||
const expandBtns = wrapper.findAll('.admin__expand-btn')
|
||||
await expandBtns[0].trigger('click')
|
||||
const messageBtns = wrapper.findAll('.admin__message-btn')
|
||||
await messageBtns[0].trigger('click')
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
expect(wrapper.text()).toContain('Hej fin bil!')
|
||||
expect(wrapper.text()).toContain('Brevtext')
|
||||
expect(wrapper.find('.admin-modal').exists()).toBe(true)
|
||||
expect(wrapper.find('.admin-modal__body').text()).toBe('Hej fin bil!')
|
||||
expect(wrapper.text()).toContain('ABC123')
|
||||
expect(wrapper.text()).toContain('c1eebc99')
|
||||
})
|
||||
|
||||
it('closes message modal on close button click', async () => {
|
||||
const { wrapper } = mountPage()
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
await wrapper.findAll('.admin__message-btn')[0].trigger('click')
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
await wrapper.find('.admin-modal__close').trigger('click')
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
expect(wrapper.find('.admin-modal').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('collapses row on second button click', async () => {
|
||||
|
|
@ -143,11 +166,11 @@ describe('AdminDashboard', () => {
|
|||
const expandBtns = wrapper.findAll('.admin__expand-btn')
|
||||
await expandBtns[0].trigger('click')
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
expect(wrapper.text()).toContain('Hej fin bil!')
|
||||
expect(wrapper.find('.admin__expanded-row').exists()).toBe(true)
|
||||
|
||||
await expandBtns[0].trigger('click')
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
expect(wrapper.text()).not.toContain('Hej fin bil!')
|
||||
expect(wrapper.find('.admin__expanded-row').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('only expands one row at a time', async () => {
|
||||
|
|
@ -157,12 +180,12 @@ describe('AdminDashboard', () => {
|
|||
const expandBtns = wrapper.findAll('.admin__expand-btn')
|
||||
await expandBtns[0].trigger('click')
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
expect(wrapper.text()).toContain('Hej fin bil!')
|
||||
expect(wrapper.findAll('.admin__expanded-row')).toHaveLength(1)
|
||||
|
||||
await expandBtns[1].trigger('click')
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
expect(wrapper.text()).not.toContain('Hej fin bil!')
|
||||
expect(wrapper.text()).toContain('Vill köpa din bil.')
|
||||
expect(wrapper.findAll('.admin__expanded-row')).toHaveLength(1)
|
||||
expect(wrapper.find('.admin__tracking-row').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('renders status dropdowns', async () => {
|
||||
|
|
@ -170,7 +193,7 @@ describe('AdminDashboard', () => {
|
|||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
const selects = wrapper.findAll('.admin__status-select')
|
||||
expect(selects.length).toBe(2)
|
||||
expect(selects.length).toBe(3)
|
||||
})
|
||||
|
||||
it('fires status update API on dropdown change', async () => {
|
||||
|
|
@ -309,11 +332,67 @@ describe('AdminDashboard', () => {
|
|||
expect(wrapper.text()).toContain('Att göra')
|
||||
})
|
||||
|
||||
it('shows visa meddelande button in each row', async () => {
|
||||
const { wrapper } = mountPage()
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
expect(wrapper.findAll('.admin__message-btn')).toHaveLength(3)
|
||||
expect(wrapper.text()).toContain('Visa meddelande')
|
||||
})
|
||||
|
||||
it('filters orders when Väntar tab is clicked', async () => {
|
||||
const { wrapper } = mountPage()
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
const stats = wrapper.findAll('.admin__stat')
|
||||
const waitingTab = stats.find((stat) => stat.text().includes('Väntar'))
|
||||
expect(waitingTab).toBeDefined()
|
||||
await waitingTab!.trigger('click')
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
expect(wrapper.text()).toContain('pending@example.com')
|
||||
expect(wrapper.text()).not.toContain('test@bilhalsning.se')
|
||||
expect(wrapper.text()).not.toContain('user@example.com')
|
||||
})
|
||||
|
||||
it('filters orders by partial order id search', async () => {
|
||||
const { wrapper } = mountPage()
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
await wrapper.find('#admin-order-search').setValue('c2eebc99')
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
expect(wrapper.text()).toContain('user@example.com')
|
||||
expect(wrapper.text()).not.toContain('test@bilhalsning.se')
|
||||
expect(wrapper.text()).not.toContain('pending@example.com')
|
||||
})
|
||||
|
||||
it('filters orders by registration number search', async () => {
|
||||
const { wrapper } = mountPage()
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
await wrapper.find('#admin-order-search').setValue('abc123')
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
expect(wrapper.text()).toContain('test@bilhalsning.se')
|
||||
expect(wrapper.text()).not.toContain('user@example.com')
|
||||
expect(wrapper.text()).not.toContain('pending@example.com')
|
||||
})
|
||||
|
||||
it('shows shortened order id with full id in title', async () => {
|
||||
const { wrapper } = mountPage()
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
const orderIdCell = wrapper.find('.admin__order-id')
|
||||
expect(orderIdCell.text()).toBe('c1eebc99')
|
||||
expect(orderIdCell.attributes('title')).toBe(mockOrders[0].id)
|
||||
})
|
||||
|
||||
it('highlights processing rows', async () => {
|
||||
const { wrapper } = mountPage()
|
||||
await new Promise((r) => setTimeout(r, 50))
|
||||
|
||||
const rows = wrapper.findAll('.admin__row')
|
||||
expect(rows[1].classes()).toContain('admin__row--todo')
|
||||
const processingRow = rows.find((row) => row.text().includes('XYZ789'))
|
||||
expect(processingRow?.classes()).toContain('admin__row--todo')
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, reactive, computed } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, reactive, computed } from 'vue'
|
||||
import {
|
||||
fetchAllOrders,
|
||||
updateOrderStatus,
|
||||
|
|
@ -13,7 +13,12 @@ const loading = ref(true)
|
|||
const error = ref('')
|
||||
const statusError = ref('')
|
||||
const trackingError = ref('')
|
||||
const activeFilter = ref<'all' | 'processing' | 'paid_group' | 'pending_payment'>(
|
||||
'all',
|
||||
)
|
||||
const searchQuery = ref('')
|
||||
const trackingInputValues = reactive<Record<string, string>>({})
|
||||
const messageModalOrder = ref<AdminOrder | null>(null)
|
||||
|
||||
const statusLabels: Record<string, string> = {
|
||||
pending_payment: 'Väntar på betalning',
|
||||
|
|
@ -54,6 +59,35 @@ const stats = computed(() => {
|
|||
return { total, todo, paid, pending }
|
||||
})
|
||||
|
||||
const filteredOrders = computed(() => {
|
||||
let result = orders.value
|
||||
|
||||
if (activeFilter.value === 'processing') {
|
||||
result = result.filter((o) => o.status === 'processing')
|
||||
} else if (activeFilter.value === 'paid_group') {
|
||||
result = result.filter((o) =>
|
||||
['paid', 'sent', 'delivered'].includes(o.status),
|
||||
)
|
||||
} else if (activeFilter.value === 'pending_payment') {
|
||||
result = result.filter((o) => o.status === 'pending_payment')
|
||||
}
|
||||
|
||||
const query = searchQuery.value.trim().toLowerCase()
|
||||
if (query) {
|
||||
result = result.filter(
|
||||
(o) =>
|
||||
o.id.toLowerCase().includes(query) ||
|
||||
o.plate.toLowerCase().includes(query),
|
||||
)
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
function shortOrderId(id: string): string {
|
||||
return id.slice(0, 8)
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleDateString('sv-SE', {
|
||||
year: 'numeric',
|
||||
|
|
@ -62,6 +96,20 @@ function formatDate(iso: string): string {
|
|||
})
|
||||
}
|
||||
|
||||
function openMessageModal(order: AdminOrder) {
|
||||
messageModalOrder.value = order
|
||||
}
|
||||
|
||||
function closeMessageModal() {
|
||||
messageModalOrder.value = null
|
||||
}
|
||||
|
||||
function handleModalKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape' && messageModalOrder.value) {
|
||||
closeMessageModal()
|
||||
}
|
||||
}
|
||||
|
||||
function toggleExpand(orderId: string) {
|
||||
if (expandedOrderId.value === orderId) {
|
||||
expandedOrderId.value = null
|
||||
|
|
@ -108,6 +156,7 @@ async function handleTrackingSave(orderId: string) {
|
|||
}
|
||||
|
||||
onMounted(async () => {
|
||||
window.addEventListener('keydown', handleModalKeydown)
|
||||
try {
|
||||
orders.value = await fetchAllOrders()
|
||||
} catch {
|
||||
|
|
@ -116,6 +165,10 @@ onMounted(async () => {
|
|||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', handleModalKeydown)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -138,24 +191,64 @@ onMounted(async () => {
|
|||
|
||||
<template v-else>
|
||||
<div class="admin__stats">
|
||||
<div class="admin__stat">
|
||||
<button
|
||||
type="button"
|
||||
class="admin__stat"
|
||||
:class="{ 'admin__stat--active': activeFilter === 'all' }"
|
||||
@click="activeFilter = 'all'"
|
||||
>
|
||||
<span class="admin__stat-value">{{ stats.total }}</span>
|
||||
<span class="admin__stat-label">Totalt</span>
|
||||
</div>
|
||||
<div class="admin__stat admin__stat--todo">
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="admin__stat"
|
||||
:class="{ 'admin__stat--active': activeFilter === 'processing' }"
|
||||
@click="activeFilter = 'processing'"
|
||||
>
|
||||
<span class="admin__stat-value">{{ stats.todo }}</span>
|
||||
<span class="admin__stat-label">Att göra</span>
|
||||
</div>
|
||||
<div class="admin__stat">
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="admin__stat"
|
||||
:class="{ 'admin__stat--active': activeFilter === 'paid_group' }"
|
||||
@click="activeFilter = 'paid_group'"
|
||||
>
|
||||
<span class="admin__stat-value">{{ stats.paid }}</span>
|
||||
<span class="admin__stat-label">Betalda</span>
|
||||
</div>
|
||||
<div class="admin__stat">
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="admin__stat"
|
||||
:class="{ 'admin__stat--active': activeFilter === 'pending_payment' }"
|
||||
@click="activeFilter = 'pending_payment'"
|
||||
>
|
||||
<span class="admin__stat-value">{{ stats.pending }}</span>
|
||||
<span class="admin__stat-label">Väntar</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="admin__toolbar">
|
||||
<label for="admin-order-search" class="admin__search-label"
|
||||
>Sök beställnings-ID eller regnr</label
|
||||
>
|
||||
<input
|
||||
id="admin-order-search"
|
||||
v-model="searchQuery"
|
||||
class="admin__search-input"
|
||||
type="search"
|
||||
placeholder="t.ex. c1eebc99 eller ABC123"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="filteredOrders.length === 0"
|
||||
class="message message--info admin__filter-empty"
|
||||
>
|
||||
Inga beställningar matchar filtret.
|
||||
</p>
|
||||
|
||||
<p
|
||||
v-if="statusError"
|
||||
class="message message--error admin__status-error"
|
||||
|
|
@ -164,19 +257,21 @@ onMounted(async () => {
|
|||
{{ statusError }}
|
||||
</p>
|
||||
|
||||
<div class="admin__table-wrap">
|
||||
<div v-if="filteredOrders.length > 0" class="admin__table-wrap">
|
||||
<table class="admin__table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datum</th>
|
||||
<th>Beställnings-ID</th>
|
||||
<th>E-post</th>
|
||||
<th>Regnr</th>
|
||||
<th>Meddelande</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="order in orders" :key="order.id">
|
||||
<template v-for="order in filteredOrders" :key="order.id">
|
||||
<tr
|
||||
class="admin__row"
|
||||
:class="{
|
||||
|
|
@ -185,8 +280,20 @@ onMounted(async () => {
|
|||
}"
|
||||
>
|
||||
<td>{{ formatDate(order.createdAt) }}</td>
|
||||
<td class="admin__order-id" :title="order.id">
|
||||
{{ shortOrderId(order.id) }}
|
||||
</td>
|
||||
<td>{{ order.email }}</td>
|
||||
<td class="admin__plate">{{ order.plate }}</td>
|
||||
<td>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn--ghost btn--sm admin__message-btn"
|
||||
@click.stop="openMessageModal(order)"
|
||||
>
|
||||
Visa meddelande
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<select
|
||||
class="admin__status-select"
|
||||
|
|
@ -242,15 +349,8 @@ onMounted(async () => {
|
|||
v-if="expandedOrderId === order.id"
|
||||
class="admin__expanded-row"
|
||||
>
|
||||
<td :colspan="5">
|
||||
<td :colspan="7">
|
||||
<div class="admin__expanded-inner">
|
||||
<div class="admin__section">
|
||||
<div class="admin__section-label">Brevtext</div>
|
||||
<div class="admin__section-body">
|
||||
{{ order.letterText }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin__section">
|
||||
<div class="admin__section-header">
|
||||
<span class="admin__section-label">Spårnings-ID</span>
|
||||
|
|
@ -313,6 +413,52 @@ onMounted(async () => {
|
|||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-if="messageModalOrder"
|
||||
class="admin-modal-overlay"
|
||||
@click.self="closeMessageModal"
|
||||
>
|
||||
<div
|
||||
class="admin-modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="admin-message-modal-title"
|
||||
>
|
||||
<div class="admin-modal__header">
|
||||
<h2 id="admin-message-modal-title" class="admin-modal__title">
|
||||
Brevtext
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="admin-modal__close"
|
||||
aria-label="Stäng"
|
||||
@click="closeMessageModal"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="admin-modal__meta">
|
||||
{{ messageModalOrder.plate }} ·
|
||||
{{ shortOrderId(messageModalOrder.id) }}
|
||||
</p>
|
||||
<div class="admin-modal__body">
|
||||
{{ messageModalOrder.letterText }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -343,13 +489,67 @@ onMounted(async () => {
|
|||
padding: var(--space-md) var(--space-lg);
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
width: 100%;
|
||||
transition:
|
||||
border-color var(--transition-fast),
|
||||
background var(--transition-fast);
|
||||
}
|
||||
|
||||
.admin__stat--todo {
|
||||
.admin__stat:hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.admin__stat--active {
|
||||
background: var(--color-primary-soft);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.admin__toolbar {
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.admin__search-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
|
||||
.admin__search-input {
|
||||
width: 100%;
|
||||
max-width: 24rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-ink);
|
||||
outline: none;
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.admin__search-input:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 2px var(--color-primary-ring);
|
||||
}
|
||||
|
||||
.admin__filter-empty {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.admin__order-id {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.admin__message-btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin__stat-value {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
|
|
@ -559,6 +759,82 @@ onMounted(async () => {
|
|||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.admin-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.admin-modal {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-xl);
|
||||
width: 100%;
|
||||
max-width: 32rem;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: var(--shadow-card);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.admin-modal__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-lg) var(--space-lg) 0;
|
||||
}
|
||||
|
||||
.admin-modal__title {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.admin-modal__close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-muted);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: var(--radius-sm);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition:
|
||||
color var(--transition-fast),
|
||||
background var(--transition-fast);
|
||||
}
|
||||
|
||||
.admin-modal__close:hover {
|
||||
color: var(--color-ink);
|
||||
background: var(--color-border-light);
|
||||
}
|
||||
|
||||
.admin-modal__meta {
|
||||
margin: var(--space-sm) var(--space-lg) 0;
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-muted);
|
||||
font-family: ui-monospace, monospace;
|
||||
}
|
||||
|
||||
.admin-modal__body {
|
||||
margin: var(--space-md) var(--space-lg) var(--space-lg);
|
||||
padding: var(--space-md);
|
||||
background: var(--color-border-light);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-ink);
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
overflow-y: auto;
|
||||
max-height: 60vh;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.admin__stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
|
|
|||
Loading…
Reference in a new issue