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

<script setup lang="ts">
definePageMeta({ middleware: 'admin-auth' });

useHead({
  title: 'Admin Dashboard',
  meta: [{ name: 'robots', content: 'noindex, nofollow', tagPriority: 'high' }]
});

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);
  const s = seconds % 60;
  return `${h}h ${m}m ${s}s`;
};

const formatMB = (bytes: number) => `${(bytes / 1024 / 1024).toFixed(1)} MB`;

const redirectToLogin = () => {
  auth.logout();
  navigateTo('/admin/login');
};

const loadStats = async () => {
  errorMsg.value = '';
  try {
    const res = await getAuth('/admin/stats');
    stats.value = res;
  } catch (e: any) {
    if (e?.status === 401) {
      redirectToLogin();
      return;
    }
    errorMsg.value = $t('admin.dashboard.load_error');
  } finally {
    loading.value = false;
  }
};

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()]);
  intervalId = setInterval(() => {
    loadStats();
    loadOrders();
  }, 30000);
});

let intervalId: ReturnType<typeof setInterval> | null = null;
onBeforeUnmount(() => {
  if (intervalId) clearInterval(intervalId);
});

const onLogout = () => redirectToLogin();
</script>

<template>
  <div class="dash-screen">
    <Container class="dash-frame">
      <div class="dash-top">
        <h1 class="dash-title">&gt; {{ $t('admin.dashboard.title') }}</h1>
        <button class="logout-btn" @click="onLogout">&gt;_ {{ $t('admin.dashboard.logout') }}</button>
      </div>

      <p v-if="auth.user.value" class="dash-welcome">
        {{ $t('admin.dashboard.welcome') }} <span class="hl">{{ auth.user.value.username }}</span>
      </p>

      <p v-if="errorMsg" class="dash-error">✗ {{ errorMsg }}</p>
      <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>
          </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>
      </template>
    </Container>
  </div>
</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;

  :deep(.tui-inner) {
    flex: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
  }
}

.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);
  }
}

.dash-welcome {
  font-size: 0.92rem;
  color: var(--color-text);
  opacity: 0.75;

  .hl {
    color: var(--color-link);
    opacity: 1;
  }
}

.dash-loading {
  font-family: 'Hurmit', monospace;
  color: var(--color-link);
  margin-top: 16px;
}

.dash-error {
  font-family: 'Hurmit', monospace;
  font-size: 0.85rem;
  color: #e05c5c;
  margin-top: 16px;
}

.dash-section {
  font-family: 'Hurmit', monospace;
  font-size: 1rem;
  color: var(--color-link);
  margin: 28px 0 12px;
  display: flex;
  align-items: baseline;
  gap: 16px;

  .hl {
    color: var(--color-text);
    opacity: 0.6;
  }
}

.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));
  gap: 10px;
}

.stat-card {
  background: var(--color-background);
  border: 1px solid var(--color-border-color);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.6;
}

.stat-value {
  font-family: 'Hurmit', monospace;
  font-size: 1.05rem;

  &.ok {
    color: #62ac4c;
  }

  &.bad {
    color: #e05c5c;
  }
}

.blink {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}
</style>