More things

frontend/app/pages/admin/orders.vue

@@ -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>