96 lines
4.8 KiB
Vue
96 lines
4.8 KiB
Vue
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia'
|
|
import { useDashboardStore } from '~/stores/dashboard'
|
|
|
|
const dashboardStore = useDashboardStore()
|
|
const { kpiCards, trendBars, runningProjects } = storeToRefs(dashboardStore)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-4">
|
|
<header class="rounded-xl border border-slate-700/80 bg-gradient-to-r from-slate-900 via-indigo-950/70 to-slate-900 px-5 py-4">
|
|
<p class="text-xs uppercase tracking-[0.18em] text-cyan-300">대시보드</p>
|
|
<div class="mt-2 flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-slate-100">운영 대시보드</h1>
|
|
<p class="mt-1 text-sm text-slate-400">진행중 프로젝트, 전체 프로젝트, 신규 리드를 가로형 위젯으로 확인하세요.</p>
|
|
</div>
|
|
<NuxtLink
|
|
to="/admin/projects"
|
|
class="rounded-md border border-cyan-300/30 bg-cyan-500/10 px-3 py-1.5 text-sm font-semibold text-cyan-100 hover:bg-cyan-500/20"
|
|
>
|
|
프로젝트 더 보기
|
|
</NuxtLink>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="grid gap-3 xl:grid-cols-[2fr_1fr]">
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<article
|
|
v-for="card in kpiCards"
|
|
:key="card.label"
|
|
class="rounded-xl border bg-gradient-to-br from-slate-900 to-slate-950 p-5"
|
|
:class="[card.border]"
|
|
>
|
|
<p class="text-xs uppercase tracking-[0.16em] text-slate-200">{{ card.label }}</p>
|
|
<div class="mt-3 flex items-center gap-3">
|
|
<p class="text-3xl font-black" :class="card.color">{{ card.value }}</p>
|
|
<span class="inline-flex h-2.5 w-2.5 rounded-full bg-gradient-to-r" :class="card.band"></span>
|
|
</div>
|
|
<p class="mt-2 text-sm text-slate-400">{{ card.note }}</p>
|
|
</article>
|
|
</div>
|
|
|
|
<section class="rounded-xl border border-slate-800 bg-gradient-to-b from-slate-900 to-indigo-950/50 p-5">
|
|
<h2 class="text-sm font-semibold">리드 추이(샘플)</h2>
|
|
<div class="mt-3 h-36 rounded-lg border border-cyan-300/20 bg-slate-950/80">
|
|
<div class="flex h-full items-end gap-2 px-4 pb-4">
|
|
<span v-for="bar in trendBars" :key="bar" class="w-full bg-gradient-to-t from-cyan-300 to-indigo-300/80" :style="{ height: `${bar}%` }"></span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="grid gap-3 xl:grid-cols-[1fr_1fr]">
|
|
<article class="rounded-xl border border-slate-800 bg-gradient-to-b from-slate-900 to-slate-950 p-5">
|
|
<h2 class="text-lg font-semibold">진행중 프로젝트 목록</h2>
|
|
<p class="mt-1 text-sm text-slate-400">운영 중인 핵심 프로젝트</p>
|
|
<div class="mt-4 overflow-hidden rounded-lg border border-slate-800">
|
|
<table class="w-full text-left text-sm">
|
|
<thead class="bg-slate-900">
|
|
<tr class="text-slate-300">
|
|
<th class="px-4 py-3">프로젝트</th>
|
|
<th class="px-4 py-3">도메인</th>
|
|
<th class="px-4 py-3">상태</th>
|
|
<th class="px-4 py-3 text-right">리드</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="project in runningProjects" :key="project.domain" class="border-t border-slate-800 text-slate-200">
|
|
<td class="px-4 py-3">{{ project.name }}</td>
|
|
<td class="px-4 py-3">{{ project.domain }}</td>
|
|
<td class="px-4 py-3">
|
|
<span class="inline-flex items-center gap-1 rounded-full bg-indigo-900/40 px-2.5 py-0.5 text-xs font-medium text-indigo-200">
|
|
{{ project.status }}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-right">{{ project.leads }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="rounded-xl border border-slate-800 bg-gradient-to-b from-slate-900 to-indigo-950/40 p-5">
|
|
<h2 class="text-lg font-semibold">빠른 액션</h2>
|
|
<p class="mt-1 text-sm text-slate-400">바로 이동해 바로 시작</p>
|
|
<div class="mt-4 flex flex-col gap-2">
|
|
<NuxtLink to="/admin/projects" class="rounded-md bg-gradient-to-r from-indigo-600 to-cyan-500 px-4 py-2 text-sm font-semibold text-white">새 프로젝트 만들기</NuxtLink>
|
|
<NuxtLink to="/admin/pages" class="rounded-md border border-indigo-300/30 bg-indigo-950/20 px-4 py-2 text-sm text-indigo-100 hover:bg-indigo-900/30">페이지 바로가기</NuxtLink>
|
|
<NuxtLink to="/admin/leads" class="rounded-md border border-cyan-300/30 bg-cyan-950/20 px-4 py-2 text-sm text-cyan-100 hover:bg-cyan-900/30">리드 조회</NuxtLink>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
</template>
|