aranroig.com/frontend/app/pages/admin/orders.vue

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