This commit is contained in:
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import AdminLayout from '~/components/layouts/AdminLayout.vue';
|
||||
|
||||
definePageMeta({ middleware: 'admin-auth' });
|
||||
|
||||
useHead({
|
||||
@@ -10,34 +12,9 @@ const { getAuth } = useApi();
|
||||
const auth = useAuth();
|
||||
|
||||
const stats = ref<any>(null);
|
||||
const orders = ref<any[]>([]);
|
||||
const loading = ref(true);
|
||||
const errorMsg = ref('');
|
||||
|
||||
const COLOR_HEX: Record<string, string> = {
|
||||
red: '#d64545',
|
||||
gold: '#d4af37',
|
||||
silver: '#c0c0c0',
|
||||
orange: '#e0823c',
|
||||
yellow: '#e2cf3c',
|
||||
green: '#5fae4e',
|
||||
blue: '#4c8be0',
|
||||
purple: '#9b59d0',
|
||||
black: '#1a1a1a',
|
||||
white: '#f2f2f2',
|
||||
pink: '#e88fb3',
|
||||
turquoise: '#40c4b8',
|
||||
teal: '#17857c',
|
||||
navy: '#34549c',
|
||||
lavender: '#b98fe0',
|
||||
magenta: '#cf479f',
|
||||
lime: '#a8d14e',
|
||||
coral: '#ef8368'
|
||||
};
|
||||
|
||||
const orderSwatch = (order: any) =>
|
||||
order.color === 'custom' ? order.customColor : COLOR_HEX[order.color] || 'transparent';
|
||||
|
||||
const formatUptime = (seconds: number) => {
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
@@ -68,28 +45,15 @@ const loadStats = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
const loadOrders = async () => {
|
||||
try {
|
||||
orders.value = await getAuth('/hibolia/orders');
|
||||
} catch (e: any) {
|
||||
if (e?.status === 401) {
|
||||
redirectToLogin();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (value: string) => new Date(value).toLocaleString();
|
||||
|
||||
onMounted(async () => {
|
||||
const me = await auth.fetchMe();
|
||||
if (!me) {
|
||||
redirectToLogin();
|
||||
return;
|
||||
}
|
||||
await Promise.all([loadStats(), loadOrders()]);
|
||||
await loadStats();
|
||||
intervalId = setInterval(() => {
|
||||
loadStats();
|
||||
loadOrders();
|
||||
}, 30000);
|
||||
});
|
||||
|
||||
@@ -97,17 +61,12 @@ let intervalId: ReturnType<typeof setInterval> | null = null;
|
||||
onBeforeUnmount(() => {
|
||||
if (intervalId) clearInterval(intervalId);
|
||||
});
|
||||
|
||||
const onLogout = () => redirectToLogin();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dash-screen">
|
||||
<AdminLayout>
|
||||
<Container class="dash-frame">
|
||||
<div class="dash-top">
|
||||
<h1 class="dash-title">> {{ $t('admin.dashboard.title') }}</h1>
|
||||
<button class="logout-btn" @click="onLogout">>_ {{ $t('admin.dashboard.logout') }}</button>
|
||||
</div>
|
||||
<h1 class="dash-title">{{ $t('admin.dashboard.title') }}</h1>
|
||||
|
||||
<p v-if="auth.user.value" class="dash-welcome">
|
||||
{{ $t('admin.dashboard.welcome') }} <span class="hl">{{ auth.user.value.username }}</span>
|
||||
@@ -117,118 +76,54 @@ const onLogout = () => redirectToLogin();
|
||||
<p v-if="loading" class="dash-loading blink">{{ $t('admin.dashboard.loading') }}</p>
|
||||
|
||||
<template v-if="stats && !loading">
|
||||
<h2 class="dash-section">{{ $t('admin.dashboard.section_status') }}</h2>
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.status') }}</span>
|
||||
<span class="stat-value ok">{{ stats.status }}</span>
|
||||
<section>
|
||||
<h2 class="dash-section">{{ $t('admin.dashboard.section_status') }}</h2>
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.status') }}</span>
|
||||
<span class="stat-value ok">{{ stats.status }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.mongo') }}</span>
|
||||
<span class="stat-value" :class="stats.mongo === 'connected' ? 'ok' : 'bad'">{{ stats.mongo }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.uptime') }}</span>
|
||||
<span class="stat-value">{{ formatUptime(stats.uptime) }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.memory_rss') }}</span>
|
||||
<span class="stat-value">{{ formatMB(stats.memory.rss) }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.memory_heap') }}</span>
|
||||
<span class="stat-value">{{ formatMB(stats.memory.heapUsed) }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.total_cells') }}</span>
|
||||
<span class="stat-value">{{ stats.grid.totalCells }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.mongo') }}</span>
|
||||
<span class="stat-value" :class="stats.mongo === 'connected' ? 'ok' : 'bad'">{{ stats.mongo }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.uptime') }}</span>
|
||||
<span class="stat-value">{{ formatUptime(stats.uptime) }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.memory_rss') }}</span>
|
||||
<span class="stat-value">{{ formatMB(stats.memory.rss) }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.memory_heap') }}</span>
|
||||
<span class="stat-value">{{ formatMB(stats.memory.heapUsed) }}</span>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<span class="stat-label">{{ $t('admin.dashboard.total_cells') }}</span>
|
||||
<span class="stat-value">{{ stats.grid.totalCells }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="dash-section">{{ $t('admin.dashboard.section_orders') }} <span class="hl">[{{ orders.length }}]</span></h2>
|
||||
<p v-if="!orders.length" class="dash-loading">{{ $t('admin.dashboard.orders_empty') }}</p>
|
||||
<table v-else class="orders-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('admin.dashboard.col_date') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_name') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_email') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_message') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_color') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_shipping') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="order in orders" :key="order._id">
|
||||
<td class="nowrap">{{ formatDate(order.createdAt) }}</td>
|
||||
<td>{{ order.name }} {{ order.surname }}</td>
|
||||
<td>{{ order.email }}</td>
|
||||
<td class="msg-cell">{{ order.message }}</td>
|
||||
<td>
|
||||
<span class="color-chip">
|
||||
<span class="swatch" :style="{ background: orderSwatch(order) }" aria-hidden="true"></span>
|
||||
{{ $t(`order.hibolia.colors.${order.color}`) }}<template v-if="order.color === 'custom'"> {{ order.customColor }}</template>
|
||||
</span>
|
||||
</td>
|
||||
<td class="msg-cell">{{ order.shipping }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</template>
|
||||
</Container>
|
||||
</div>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dash-screen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
background: var(--color-background);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dash-frame {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
--container-margin: 0;
|
||||
|
||||
:deep(.tui-inner) {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.dash-title {
|
||||
font-family: 'Hurmit', monospace;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--color-text);
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-border-color);
|
||||
padding: 6px 14px;
|
||||
cursor: pointer;
|
||||
transition: all 120ms steps(3);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link);
|
||||
border-color: var(--color-link);
|
||||
}
|
||||
margin: 44px 0 32px;
|
||||
}
|
||||
|
||||
.dash-welcome {
|
||||
@@ -259,7 +154,7 @@ const onLogout = () => redirectToLogin();
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 1rem;
|
||||
color: var(--color-link);
|
||||
margin: 28px 0 12px;
|
||||
margin: 64px 0 18px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 16px;
|
||||
@@ -270,53 +165,6 @@ const onLogout = () => redirectToLogin();
|
||||
}
|
||||
}
|
||||
|
||||
.orders-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.85rem;
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--color-border-color);
|
||||
padding: 6px 10px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--color-link);
|
||||
background: var(--color-background-line);
|
||||
}
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.msg-cell {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.color-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid var(--color-border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
|
||||
204
frontend/app/pages/admin/orders.vue
Normal file
204
frontend/app/pages/admin/orders.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<script setup lang="ts">
|
||||
import AdminLayout from '~/components/layouts/AdminLayout.vue';
|
||||
|
||||
definePageMeta({ middleware: 'admin-auth' });
|
||||
|
||||
useHead({
|
||||
title: 'Hibolia Orders — Admin',
|
||||
meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
|
||||
});
|
||||
|
||||
const { getAuth } = useApi();
|
||||
const auth = useAuth();
|
||||
|
||||
const orders = ref<any[]>([]);
|
||||
const loading = ref(true);
|
||||
|
||||
const orderCount = useState<number | null>('admin-order-count', () => null);
|
||||
watch(orders, (value) => {
|
||||
orderCount.value = value.length;
|
||||
});
|
||||
|
||||
const COLOR_HEX: Record<string, string> = {
|
||||
red: '#d64545',
|
||||
gold: '#d4af37',
|
||||
silver: '#c0c0c0',
|
||||
orange: '#e0823c',
|
||||
yellow: '#e2cf3c',
|
||||
green: '#5fae4e',
|
||||
blue: '#4c8be0',
|
||||
purple: '#9b59d0',
|
||||
black: '#1a1a1a',
|
||||
white: '#f2f2f2',
|
||||
pink: '#e88fb3',
|
||||
turquoise: '#40c4b8',
|
||||
teal: '#17857c',
|
||||
navy: '#34549c',
|
||||
lavender: '#b98fe0',
|
||||
magenta: '#cf479f',
|
||||
lime: '#a8d14e',
|
||||
coral: '#ef8368'
|
||||
};
|
||||
|
||||
const orderSwatch = (order: any) =>
|
||||
order.color === 'custom' ? order.customColor : COLOR_HEX[order.color] || 'transparent';
|
||||
|
||||
const redirectToLogin = () => {
|
||||
auth.logout();
|
||||
navigateTo('/admin/login');
|
||||
};
|
||||
|
||||
const loadOrders = async () => {
|
||||
try {
|
||||
orders.value = await getAuth('/hibolia/orders');
|
||||
} catch (e: any) {
|
||||
if (e?.status === 401) {
|
||||
redirectToLogin();
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (value: string) => new Date(value).toLocaleString();
|
||||
|
||||
onMounted(async () => {
|
||||
const me = await auth.fetchMe();
|
||||
if (!me) {
|
||||
redirectToLogin();
|
||||
return;
|
||||
}
|
||||
await loadOrders();
|
||||
intervalId = setInterval(() => {
|
||||
loadOrders();
|
||||
}, 30000);
|
||||
});
|
||||
|
||||
let intervalId: ReturnType<typeof setInterval> | null = null;
|
||||
onBeforeUnmount(() => {
|
||||
if (intervalId) clearInterval(intervalId);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AdminLayout>
|
||||
<Container class="dash-frame">
|
||||
<h1 class="dash-title">{{ $t('admin.dashboard.section_orders') }} <span class="hl">[{{ orders.length }}]</span></h1>
|
||||
|
||||
<p v-if="loading" class="dash-loading blink">{{ $t('admin.dashboard.loading') }}</p>
|
||||
|
||||
<p v-if="!loading && !orders.length" class="dash-loading">{{ $t('admin.dashboard.orders_empty') }}</p>
|
||||
<table v-else-if="!loading" class="orders-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('admin.dashboard.col_date') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_name') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_email') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_message') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_color') }}</th>
|
||||
<th>{{ $t('admin.dashboard.col_shipping') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="order in orders" :key="order._id">
|
||||
<td class="nowrap">{{ formatDate(order.createdAt) }}</td>
|
||||
<td>{{ order.name }} {{ order.surname }}</td>
|
||||
<td>{{ order.email }}</td>
|
||||
<td class="msg-cell">{{ order.message }}</td>
|
||||
<td>
|
||||
<span class="color-chip">
|
||||
<span class="swatch" :style="{ background: orderSwatch(order) }" aria-hidden="true"></span>
|
||||
{{ $t(`order.hibolia.colors.${order.color}`) }}<template v-if="order.color === 'custom'"> {{ order.customColor }}</template>
|
||||
</span>
|
||||
</td>
|
||||
<td class="msg-cell">{{ order.shipping }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Container>
|
||||
</AdminLayout>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dash-frame {
|
||||
--container-margin: 0;
|
||||
|
||||
:deep(.tui-inner) {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-title {
|
||||
font-family: 'Hurmit', monospace;
|
||||
margin: 44px 0 32px;
|
||||
|
||||
.hl {
|
||||
color: var(--color-text);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-loading {
|
||||
font-family: 'Hurmit', monospace;
|
||||
color: var(--color-link);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.orders-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.85rem;
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid var(--color-border-color);
|
||||
padding: 6px 10px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
th {
|
||||
font-family: 'Hurmit', monospace;
|
||||
font-size: 0.72rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: var(--color-link);
|
||||
background: var(--color-background-line);
|
||||
}
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.msg-cell {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.color-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.swatch {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid var(--color-border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 50%, 100% { opacity: 1; }
|
||||
25%, 75% { opacity: 0; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user