ปรับปรุง phase 6 ให้ครบถ้วน

web/app/pages/templates/[id]/documents.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+/** FR-12 UI — รายการเอกสารที่สร้างจาก template หนึ่งตัว (เข้าได้แม้ template ถูก deactivate) */
+import type { TemplateDetail, TemplateDocumentListItem } from '~/types/api'
+
+const route = useRoute()
+const { apiJson } = useApi()
+
+const templateId = computed(() => String(route.params.id))
+
+const template = ref<TemplateDetail | null>(null)
+const documents = ref<TemplateDocumentListItem[]>([])
+const loading = ref(true)
+const loadError = ref<string | null>(null)
+
+async function load() {
+  loading.value = true
+  loadError.value = null
+  try {
+    const [tpl, docs] = await Promise.all([
+      apiJson<TemplateDetail>(`/api/templates/${templateId.value}`),
+      apiJson<TemplateDocumentListItem[]>(`/api/templates/${templateId.value}/documents`),
+    ])
+    template.value = tpl!
+    documents.value = docs ?? []
+    useHead({ title: `เอกสารของ ${tpl?.name} — e-Court Documents Versioning` })
+  } catch (err) {
+    loadError.value = err instanceof Error ? err.message : 'โหลดรายการเอกสารไม่สำเร็จ'
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <AuthGate>
+    <section class="space-y-5">
+      <div v-if="loading" class="flex items-center gap-3 py-10 text-sm text-slate-500 dark:text-slate-400">
+        <span
+          class="h-4 w-4 animate-spin rounded-full border-2 border-slate-300 border-t-slate-600 dark:border-slate-600 dark:border-t-slate-300"
+        />
+        กำลังโหลด…
+      </div>
+
+      <AlertBox v-else-if="loadError" type="error">
+        {{ loadError }}
+        <NuxtLink to="/templates" class="ml-1 font-medium underline">กลับรายการ template</NuxtLink>
+      </AlertBox>
+
+      <template v-else-if="template">
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <p class="text-xs text-slate-500 dark:text-slate-400">เอกสารที่สร้างจาก template</p>
+            <h1 class="text-2xl font-bold">{{ template.name }}</h1>
+            <p v-if="template.description" class="mt-1 text-sm text-slate-600 dark:text-slate-300">
+              {{ template.description }}
+            </p>
+          </div>
+          <div class="flex gap-2">
+            <NuxtLink
+              :to="`/templates/${template.id}/edit`"
+              class="rounded-md border border-slate-300 px-3 py-1.5 text-sm hover:bg-slate-100 dark:border-slate-600 dark:hover:bg-slate-800"
+            >
+              แก้ไข template
+            </NuxtLink>
+            <NuxtLink
+              v-if="template.isActive"
+              :to="`/documents/create/${template.id}`"
+              class="rounded-md bg-sky-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-sky-700"
+            >
+              ＋ สร้างเอกสารใหม่
+            </NuxtLink>
+          </div>
+        </div>
+
+        <AlertBox v-if="!template.isActive">
+          template นี้ถูก deactivate แล้ว — สร้างเอกสารใหม่ไม่ได้ แต่เอกสารที่สร้างไว้แล้วยังใช้งานได้ตามปกติ
+        </AlertBox>
+
+        <div
+          v-if="documents.length === 0"
+          class="rounded-lg border border-dashed border-slate-300 p-8 text-center text-sm text-slate-500 dark:border-slate-600 dark:text-slate-400"
+        >
+          ยังไม่มีเอกสารจาก template นี้<template v-if="template.isActive">
+            —
+            <NuxtLink
+              :to="`/documents/create/${template.id}`"
+              class="font-medium text-sky-600 hover:underline dark:text-sky-400"
+            >
+              สร้างเอกสารแรก
+            </NuxtLink></template
+          >
+        </div>
+
+        <div v-else class="overflow-x-auto rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800">
+          <table class="w-full text-sm">
+            <thead class="border-b border-slate-200 text-left text-xs uppercase text-slate-500 dark:border-slate-700 dark:text-slate-400">
+              <tr>
+                <th class="px-4 py-3">ไฟล์เอกสาร</th>
+                <th class="px-4 py-3">สร้างเมื่อ</th>
+                <th class="px-4 py-3 text-center">versions</th>
+                <th class="px-4 py-3">กิจกรรมล่าสุด</th>
+                <th class="px-4 py-3 text-right">การกระทำ</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-100 dark:divide-slate-700">
+              <tr v-for="d in documents" :key="d.documentId">
+                <td class="max-w-72 px-4 py-3">
+                  <NuxtLink
+                    :to="`/documents/${d.documentId}`"
+                    class="font-medium text-sky-700 hover:underline dark:text-sky-400"
+                  >
+                    {{ d.fileName }}
+                  </NuxtLink>
+                </td>
+                <td class="px-4 py-3 text-slate-500 dark:text-slate-400">{{ formatDateTime(d.createdAt) }}</td>
+                <td class="px-4 py-3 text-center">{{ d.versionCount }}</td>
+                <td class="px-4 py-3 text-slate-500 dark:text-slate-400">
+                  <template v-if="d.latestVersionAt">
+                    v{{ d.latestVersionNumber }} · {{ formatDateTime(d.latestVersionAt) }}
+                  </template>
+                  <template v-else>—</template>
+                </td>
+                <td class="px-4 py-3 text-right">
+                  <NuxtLink
+                    :to="`/documents/${d.documentId}`"
+                    class="rounded-md border border-slate-300 px-2.5 py-1 text-xs hover:bg-slate-100 dark:border-slate-600 dark:hover:bg-slate-700"
+                  >
+                    ดูรายละเอียด
+                  </NuxtLink>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </template>
+    </section>
+  </AuthGate>
+</template>

web/app/pages/templates/index.vue

@@ -135,8 +135,14 @@ onMounted(load)
               <td class="px-4 py-3 text-slate-500 dark:text-slate-400">{{ formatDateTime(t.updatedAt) }}</td>
               <td class="px-4 py-3 text-right whitespace-nowrap">
                 <NuxtLink
-                  :to="`/templates/${t.id}/edit`"
+                  :to="`/templates/${t.id}/documents`"
                   class="rounded-md border border-slate-300 px-2.5 py-1 text-xs hover:bg-slate-100 dark:border-slate-600 dark:hover:bg-slate-700"
+                >
+                  เอกสาร
+                </NuxtLink>
+                <NuxtLink
+                  :to="`/templates/${t.id}/edit`"
+                  class="ml-2 rounded-md border border-slate-300 px-2.5 py-1 text-xs hover:bg-slate-100 dark:border-slate-600 dark:hover:bg-slate-700"
                 >
                   แก้ไข
                 </NuxtLink>