eCourt-Doc-Edit/web/app/pages/index.vue

<script setup lang="ts">
/** FR-10 UI — หน้าหลัก: card รายการ template ที่ active ให้เลือกสร้างเอกสาร */
import type { TemplateListItem } from '~/types/api'

const { apiJson } = useApi()

const templates = ref<TemplateListItem[]>([])
const loading = ref(true)
const error = ref<string | null>(null)

onMounted(async () => {
  try {
    templates.value = (await apiJson<TemplateListItem[]>('/api/templates')) ?? []
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'โหลดรายการ template ไม่สำเร็จ'
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <AuthGate>
    <section class="space-y-6 sm:space-y-8">
      <div>
        <div class="h-1 w-10 rounded-pill bg-accent" aria-hidden="true" />
        <h1 class="mt-3 text-display">สร้างเอกสารจาก template</h1>
        <p class="mt-2 text-body-lg text-muted">
          เลือก template กรอกค่า fields แล้วดาวน์โหลด .docx ที่เป็น <strong>version 1</strong> พร้อม metadata
          ไว้เปิดต่อใน Word พร้อม add-in
        </p>
      </div>

      <div v-if="loading" class="flex items-center gap-3 py-10 text-sm text-muted">
        <span class="spinner" />
        กำลังโหลดรายการ template…
      </div>

      <AlertBox v-else-if="error" type="error">{{ error }}</AlertBox>

      <div v-else-if="templates.length === 0" class="empty-state">
        ยังไม่มี template — ไปที่
        <NuxtLink to="/templates/new" class="link">สร้าง template ตัวแรก</NuxtLink>
      </div>

      <div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <div
          v-for="t in templates"
          :key="t.id"
          class="card flex flex-col p-5 transition hover:border-primary/50 hover:shadow-soft-lg"
        >
          <NuxtLink :to="`/documents/create/${t.id}`" class="flex-1">
            <h2 class="font-semibold">{{ t.name }}</h2>
            <p class="mt-1 line-clamp-2 min-h-10 text-sm text-muted">
              {{ t.description ?? '—' }}
            </p>
            <p class="mt-3 text-xs text-muted">
              {{ t.fieldCount }} fields · อัปเดต {{ formatDateTime(t.updatedAt) }}
            </p>
          </NuxtLink>
          <div class="mt-auto flex gap-4 border-t border-line pt-3 text-xs">
            <NuxtLink :to="`/documents/create/${t.id}`" class="link">สร้างเอกสาร →</NuxtLink>
            <NuxtLink :to="`/templates/${t.id}/documents`" class="text-muted hover:text-primary hover:underline">
              ดูเอกสารที่สร้างแล้ว
            </NuxtLink>
          </div>
        </div>
      </div>
    </section>
  </AuthGate>
</template>