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

<script setup lang="ts">
import AdminLayout from '~/components/layouts/AdminLayout.vue';

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 loading = ref(true);
const errorMsg = ref('');

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

onMounted(async () => {
  const me = await auth.fetchMe();
  if (!me) {
    redirectToLogin();
    return;
  }
  await loadStats();
  intervalId = setInterval(() => {
    loadStats();
  }, 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.title') }}</h1>

      <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">
        <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>
        </section>
      </template>
    </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;
}

.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: 64px 0 18px;
  display: flex;
  align-items: baseline;
  gap: 16px;

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

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