Update tmpl landing page

app/tmpl/page.tsx

@@ -1,28 +1,43 @@
-// app/page.tsx (ระบบ B)
+// app/page.tsx
-'use client';
+import fs from 'fs';
+import path from 'path';
 import Link from "next/link";
-import type { ChangeEvent } from 'react';
+import TmplHome from "@/components/TmplHome";
-import DependentDropdown, { DropdownData } from '@/components/utils/DependentDropdown';
+import { DropdownData } from '@/components/utils/DependentDropdown';
 import {
-  Bookmark, ToyBrick, FilePenLine, BicepsFlexed, Rocket, Workflow, Files, Blocks, FileQuestionMark,
+  ToyBrick, FilePenLine, Rocket, Workflow, NotepadTextDashed,
-  ExternalLink,
+  Files, Blocks, FileQuestionMark, ShieldLock, FileUp, GitMerge,
-  FileText,
+  ExternalLink, FileText
-  Highlighter,
-  MessagesSquare,
 } from "lucide-react";
 
 export default function HomePage() {
-  const templateData: DropdownData = {
+  // อ่านไฟล์จากโฟลเดอร์ public/tmpl บน Server
-    T_X: ['T_no_warning', 'TF_no_warning_P2', 'TS_P2_IN'],
+  const tmplDirectory = path.join(process.cwd(), 'public/tmpl');
-    T12_X: ['T12_b2_IN', 'T12_FD155_3s-long'],
+  let filenames: string[] = [];
-  };
+  
-  const handleTmplSelect = (template: string, data: string) => {
+  try {
-    //console.log('Location Selected:', { template, data });
+    filenames = fs.readdirSync(tmplDirectory);
-  };
+  } catch (error) {
-  const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
+    console.error("ไม่พบโฟลเดอร์ public/tmpl", error);
-    // console.log(e.target)
-    return true;
   }
+
+  // กรองเฉพาะไฟล์ .docx และ .json
+  const docxFiles = filenames.filter(file => file.endsWith('.docx'));
+  const jsonFiles = filenames.filter(file => file.endsWith('.json'));
+
+  // สร้างโครงสร้างข้อมูลสำหรับ DependentDropdown แบบอัตโนมัติ (หรือปรับเงื่อนไขการจัดกลุ่มตามต้องการ)
+  // ตัวอย่างนี้จัดกลุ่มตามชื่อไฟล์ตั้งต้น
+  const templateData: DropdownData = {};
+  docxFiles.forEach(docx => {
+    const key = docx.replace('.docx', '');
+    // หาไฟล์ json ที่ชื่อขึ้นต้นตรงกันมาใส่เป็นตัวเลือกย่อย
+    const matchedJsons = jsonFiles
+      .filter(json => json.startsWith(key))
+      .map(json => json.replace('.json', ''));
+    
+    templateData[key] = matchedJsons.length > 0 ? matchedJsons : ['default'];
+  });
+
   return (
     <div style={{ padding: '2rem' }}>
       <div className="mx-auto max-w-4xl px-4 pb-16 pt-12 sm:px-6">
@@ -30,71 +45,81 @@ export default function HomePage() {
           DOCEDIT Template & Add-ins
         </h1>
         <p className="mt-2 text-body text-ink-soft">
-          ระบบเทมเพลตเพื่อสร้างเอกสาร MS Word และจัดการรุ่นของเอกสารผ่าน Word Add-ins ยุคใหม่ แบบอิสระ ที่สามารถ Integrate กับระบบความปลอดภัยของระบบอื่นๆได้
+          ชุดพัฒนาระบบสร้างเอกสาร docx จากข้อมูลและเทมเพลต นำไปแก้ไขจัดหน้าต่อบน MS Word โดยที่ข้อมูลในฟอร์มเอกสารสามารถสะกัดออกมาใช้งานต่อได้ ควบคุมรุ่นของเอกสารด้วย Add-ins สามารถผสานกับระบบงานเดิมได้แบบไร้รอยต่อ
         </p>
 
+        {/* ส่วนเนื้อหาคงที่ (Features, Flow, Add-ins) */}
         <section className="mt-10">
           <div className="border-b border-line pb-3">
             <h2 className="font-display text-section-title text-ink">
-              ระบบนี้ทำอะไรได้
+              คุณสมบัติของระบบ
             </h2>
           </div>
           <div className="mt-5 grid gap-5 sm:grid-cols-2">
             {[
               {
                 icon: FileText,
-                title: "DOCX Template",
+                title: "ออกแบบเทมเพลตด้วย Microsoft Word",
                 detail:
-                  "ออกแบบหน้าของเอกสารจาก Microsoft Word โดยไม่ต้องใช้เครื่องมือพิเศษ " +
+                  "สร้างเทมเพลตเอกสารได้ง่าย ๆ ด้วย Microsoft Word เครื่องมือที่ทุกคนคุ้นเคย " +
-                  "สามารถนำเอกสารตัวเดิมมาใช้ออกแบบได้ทันที " +
+                  "ไม่จำเป็นต้องติดตั้งโปรแกรมเพิ่มเติมหรือเรียนรู้เครื่องมือเฉพาะทาง สามารถนำเอกสาร Word ที่มีอยู่เดิมมาปรับใช้เป็นเทมเพลตได้ทันที " +
-                  "ไม่จำเป็นต้องมีทักษะการเขียนโปรแกรมก็สามารถสร้างเทมเพลตได้ด้วยตัวเอง",
+                  "ไแม้ไม่มีทักษะด้านการเขียนโปรแกรม ก็สามารถออกแบบและสร้างเทมเพลตเอกสารได้ด้วยตนเอง ",
+              },
+              {
+                icon: NotepadTextDashed,
+                title: "รองรับเอกสารที่มีเงื่อนไขซับซ้อน",
+                detail:
+                  "รองรับการสร้างเอกสารที่มีโครงสร้างและเงื่อนไขซับซ้อน ไม่ว่าจะเป็นข้อมูลจำนวนไม่แน่นอน การแสดงผลตามเงื่อนไข " +
+                  "หรือการจัดรูปแบบเนื้อหาแบบไดนามิก สามารถเพิ่มชุดคำสั่งและเขียนโปรแกรมลงในเทมเพลตได้ เช่น FOR, IF, " +
+                  "การแทรกโค้ด และฟังก์ชันเพิ่มเติม พร้อม API สำหรับนักพัฒนา เพื่อทดสอบการสร้างเอกสารจากเทมเพลต DOCX ร่วมกับชุดข้อมูล JSON ได้อย่างสะดวก "
               },
               {
                 icon: FilePenLine,
-                title: "Fill Form",
+                title: "เปลี่ยนเอกสาร Word ให้เป็นแบบฟอร์มอัจฉริยะ",
                 detail:
-                  "รอรับ Rich และ Plain Text Content Control " +
+                  "รองรับ Rich Text และ Plain Text Content Controls ใน Microsoft Word " +
-                  "สามารถสร้างฟอร์มสำหรับกรอกข้อมูลจากไฟล์ docx " +
+                  "สามารถนำไฟล์ DOCX มาสร้างเป็นแบบฟอร์มสำหรับกรอกข้อมูลได้ทันที โดยไม่ต้องเสียเวลาออกแบบฟอร์มใหม่บน " +
-                  "สามารถใช้ API ดึงข้อมูลในฟอร์มกลับมาเพื่อนำไปใช้งานต่อ เช่นเก็บในฐานข้อมูลได้",
+                  "Web Application พร้อม API สำหรับดึงข้อมูลที่ผู้ใช้กรอกกลับมาในรูปแบบ JSON เพื่อนำไปประมวลผล "+
+                  "จัดเก็บลงฐานข้อมูล หรือเชื่อมต่อกับกระบวนการทำงานอื่น ๆ ได้อย่างยืดหยุ่น ",
               },
               {
                 icon: ToyBrick,
-                title: "Integration",
+                title: "เชื่อมต่อระบบงานเดิมได้อย่างอิสร",
                 detail:
-                  "ระบบทำงานเป็นอิสระแบบ Microservice ใช้ API Key เพื่อจำกัดการใช้งาน สามารถออกบัตรผ่านที่ลงลายเซ็นต์ด้วย HmacSha256" +
+                  "ออกแบบให้ทำงานเป็นระบบอิสระ สามารถเชื่อมต่อกับระบบงานที่มีอยู่เดิมผ่าน API ได้อย่างยืดหยุ่น รองรับการออก Access Token " + 
-                  "เพื่อให้ผสาน(Integrate)กับระบบงานที่มีอยู่เดิม ได้อย่างปลอดภัย" +
+                  "สำหรับกำหนดสิทธิ์และควบคุมการเข้าถึง โดยไม่จำเป็นต้องพึ่งพาระบบ Single Sign-On (SSO) " +
-                  "เพื่อให้ผสานกับระบบงานอื่นๆ ได้อย่างปลอดภัย",
+                  "หรือเชื่อมต่อเข้าถึงฐานข้อมูลของระบบงานเดิม ช่วยลดความซับซ้อนในการบูรณาการระบบและเพิ่มความคล่องตัวในการพัฒนา ",
               },
               {
-                icon: FileText,
+                icon: GitMerge,
-                title: "Dynamic Template",
+                title: "จัดการเวอร์ชันเอกสารอย่างเป็นระบบ",
                 detail:
-                  "รองรับเทมเพลตที่ซับซ้อน ข้อมูลที่มีจำนวนไม่แน่นอน การแสดงผลตามเงื่อนไขแบบต่างๆ " +
+                  "รองรับการจัดเก็บและบริหารจัดการเวอร์ชันของเอกสารร่วมกันผ่าน Microsoft Word Add-ins " +
-                  "สามารถเขียนโปรแกรมเพิ่มลงในเทมเพลตได้ รองรับ FOR , IF แทรกโค้ด " +
+                  "สามารถบันทึกเวอร์ชันใหม่ เรียกดูประวัติการแก้ไข และเรียกคืนเวอร์ชันที่ต้องการกลับมาแก้ไขต่อได้ " +
-                  "ฟังก์ชั่นเพื่อสร้าง Content Control Bookmark ฯลฯ" +
+                  "ช่วยให้การทำงานร่วมกันเป็นระบบ ลดความสับสนจากการจัดเก็บไฟล์หลายฉบับ และสามารถตรวจสอบย้อนกลับไปยังเวอร์ชันก่อนหน้าได้",
-                  "มี API ช่วยนักพัฒนาสร้างเอกสารจากเทมเพลต(DOCX)และข้อมูล(JSON) "
               },
               {
                 icon: Rocket,
-                title: "Versioning",
+                title: "ประสิทธิภาพสูง พร้อมรองรับการขยายระบบ",
                 detail:
-                  "จัดการ Veresion(รุ่น)ของเอกสารร่วมกันได้ผ่าน Microsoft Word Add-ins " +
+                  "พัฒนาด้วยสถาปัตยกรรมแบบ Container รองรับการขยายระบบ (Scalability) ได้อย่างยืดหยุ่น " +
-                  "สามารถดึง Veresion ที่ต้องการกลับมาแก้ไขได้ ",
+                  "กระบวนการสร้างเอกสารจากเทมเพลตทำงานแบบ Multi-threading สามารถใช้ประโยชน์จาก CPU หลายแกนประมวลผลพร้อมกัน " +
+                  "รองรับการจัดเก็บไฟล์ผ่าน Object Storage ที่มีความยืดหยุ่นและรองรับการขยายพื้นที่จัดเก็บ ช่วยเพิ่มประสิทธิภาพและรองรับปริมาณงานที่เพิ่มขึ้นในอนาคต ",
               },
               {
-                icon: Rocket,
+                icon: FileUp,
-                title: "High Performance",
+                title: "ส่งออก PDF ด้วยรูปแบบที่ตรงกับต้นฉบับ",
                 detail:
-                  "containerization ขยายระบบได้ง่าย " +
+                  "สร้างไฟล์ PDF โดยอัตโนมัติทุกครั้งที่บันทึกเวอร์ชันเอกสาร ผ่าน Microsoft Word โดยตรง ทำให้รูปแบบและการจัดวางหน้าของ PDF " +
-                  "การสร้าง template ทำงานแบบ Multi-Thread รองรับ CPU หลายแกน " +
+                  "สอดคล้องกับเอกสารต้นฉบับ ลดปัญหาความคลาดเคลื่อนของรูปแบบเอกสารจากความแตกต่างของ Microsoft Office แต่ละเวอร์ชัน " +
-                  "เก็บไฟล์ใน Object Storage มีความทนทานและรับโหลดได้หนัก",
+                  "นอกจากนี้ยังประมวลผลบนเครื่องผู้ใช้งาน (Client-side Processing) ช่วยลดภาระการประมวลผลและการใช้ทรัพยากรของเซิร์ฟเวอร์",
               },
               {
-                icon: Rocket,
+                icon: ShieldLock,
-                title: "PDF Export",
+                title: "ปลอดภัยด้วยมาตรฐานการสื่อสารและการควบคุมการเข้าถึง",
                 detail:
-                  "ทุกครั้งที่ Save Veresion จะสร้าง PDF อัตโนมัติในด้วย MS Word ทำให้ได้เค้าโครงของหน้าตรงกับเอกสารที่แก้ไข " +
+                  "ให้ความสำคัญกับความปลอดภัยของข้อมูล ด้วยการเข้ารหัสการสื่อสารผ่าน HTTPS และควบคุมการเข้าถึงไฟล์ด้วย Access Token " +
-                  "โดยไม่เกิดปัญหาความผิดเพี้ยนของ PDF ที่ใช้ MS Office ต่างเวอร์ชั่นในการแปลง ประมวลผลที่ไคลเอนต์ลดการใช้ทรัพยากรที่เซิร์ฟเวอร์",
+                  "ที่ผ่านการลงลายมือชื่อดิจิทัลด้วย HMAC-SHA256 ช่วยป้องกันการปลอมแปลง Token และจำกัดการเข้าถึงทรัพยากรตามสิทธิ์ที่ได้รับ ลดความเสี่ยงจากการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต",
 
               },
             ].map(({ icon: Icon, title, detail }) => (
@@ -114,97 +139,41 @@ export default function HomePage() {
               </div>
             ))}
           </div>
+
         </section>
 
+
+        {/* ส่วนตัวอย่างการใช้งานที่ต้องการให้อัปเดตอัตโนมัติ */}
         <section className="mt-10">
           <div className="border-b border-line pb-3">
             <h2 className="font-display text-section-title text-ink">
               ตัวอย่างการใช้งาน
             </h2>
           </div>
+          
+          <TmplHome templateData={templateData} />
+
+
+
+        </section>
+        <section className="mt-10">
           <div className="mt-5 grid gap-5 sm:grid-cols-2">
-
             <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
               <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
-                <ExternalLink className="h-5 w-5" aria-hidden />
+                <FileQuestionMark className="h-5 w-5" aria-hidden />
               </span>
               <div>
-                <h3 className="font-display text-subhead text-ink">Link (GET)</h3>
+                <h3 className="font-display text-subhead text-ink">วิธีการใช้งาน</h3>
                 <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">
-
+                  <a target="_blank" href="https://www.youtube.com/watch?v=QxMitSk3S4E" className="text-primary transition hover:underline">
-                  <a href="/docedit/api/template/download-docx?tid=T_X&fid=T_no_warning&uid=john&uname=John%20Doe">T_no_warning_john_xxx.docx</a><br />
+                    แนะนำเทมเพลตของ Docedit เบื้องต้น</a><br />
-                  <a href="/docedit/api/template/download-docx?tid=T_X&fid=TF_no_warning_P2&uid=john&uname=John%20Doe">TF_no_warning_P2_john_xxx.docx</a><br />
+                  <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="text-primary transition hover:underline">
-                  <a href="/docedit/api/template/download-docx?tid=T_X&fid=TS_P2_IN&uid=john&uname=John%20Doe">TS_P2_IN_john_xxx.docx</a><br />
+                    ติดตั้ง MS Word Add-ins</a><br />
-
+                  <a target="_blank" href="https://www.youtube.com/watch?v=P1-xe24nOUo" className="text-primary transition hover:underline">
-                  <a href="/docedit/api/template/download-docx?tid=T12_X&fid=T12_b2_IN&uid=john&uname=John%20Doe">T12_b2_IN_john_xxx.docx</a><br />
+                    ใช้งาน DOCEDIT Add-ins</a><br />
-                  <a href="/docedit/api/template/download-docx?tid=T12_X&fid=T12_FD155_3s-long&uid=john&uname=John%20Doe">T12_FD155_3s-long_john_xxx.docx</a><br />
-
                 </p>
               </div>
             </div>
-
-            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
-              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
-                <Files className="h-5 w-5" aria-hidden />
-              </span>
-              <div>
-                <h3 className="font-display text-subhead text-ink">Template & Data</h3>
-                <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">
-                  <b>Template: </b><Link href="/tmpl/T_X.docx">T_X.docx</Link>, &nbsp;
-                  <Link href="/tmpl/T12_X.docx">T12_X.docx</Link><br />
-                  <b>Data: </b><Link href="tmpl/TF_no_warning_P2.json">TF_no_warning_P2.json</Link>, &nbsp;
-                  <Link href="/tmpl/T_no_warning.json">T_no_warning.json</Link>, &nbsp;
-                  <Link href="/tmpl/TS_P2_IN.json">TS_P2_IN.json</Link><br />
-                  <Link href="/tmpl/T12_b2_IN.json">T12_b2_IN.json</Link>, &nbsp;
-                  <Link href="/tmpl/T12_FD155_3s-long.json">T12_FD155_3s-long.json</Link>
-                  <br />
-                  นำไฟล์ไปทดสอบกับ <Link href="/api/swagger/" target="_top">API</Link>
-
-                </p>
-              </div>
-            </div>
-
-            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
-              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
-                <FilePenLine className="h-5 w-5" aria-hidden />
-              </span>
-              <div>
-                <h3 className="font-display text-subhead text-ink">Form (POST)</h3>
-                <div className="mt-1.5 text-sm leading-relaxed text-ink-soft">
-
-                  <form action="/docedit/api/template/download-docx" method="POST">
-                    <DependentDropdown data={templateData} name1='tid' name2='fid'
-                      label1="Template(tid):" label2="ข้อมูล(fid):" onSelectChange={handleTmplSelect} />
-                    <div className="mb-2"></div>
-                    <div>
-                      <label htmlFor="uid">uid: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                        <input type="text" name="uid" className="p-2 mb-2 border border-gray-300 rounded-md" defaultValue="john" />
-                      </label>
-                    </div>
-                    <div>
-                      <label htmlFor="uname">uname:
-                        <input type="text" name="uname" className="p-2 mb-2  border border-gray-300 rounded-md" defaultValue="John Doe" />
-                      </label>
-                    </div>
-                    <button
-                      type="submit"
-                      style={{
-                        padding: '10px 20px',
-                        backgroundColor: '#0070f3',
-                        color: '#fff',
-                        border: 'none',
-                        borderRadius: '5px',
-                        cursor: 'pointer',
-                      }}
-                    >
-                      ดาวน์โหลดเอกสาร MS Word
-                    </button>
-                  </form>
-
-                </div>
-              </div>
-            </div>
-
             <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
               <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
                 <Workflow className="h-5 w-5" aria-hidden />
@@ -212,7 +181,7 @@ export default function HomePage() {
               <div>
                 <h3 className="font-display text-subhead text-ink">Flow</h3>
                 <div className="mt-1.5 text-sm leading-relaxed text-ink-soft">
-                  <div className="text-xl font-bold text-center">
+                  <div className="text-center">
                     ลิงค์เลือกไฟล์<br />
                     &darr; <br />
                     ตรวจสิทธิ์ สร้าง docx <br />
@@ -229,25 +198,11 @@ export default function HomePage() {
               </div>
             </div>
 
-            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
-              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/[0.08] text-primary">
-                <FileQuestionMark className="h-5 w-5" aria-hidden />
-              </span>
-              <div>
-                <h3 className="font-display text-subhead text-ink">วิธีการใช้งาน</h3>
-                <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">
-                  <a target="_blank" href="https://www.youtube.com/watch?v=QxMitSk3S4E" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
-                    แนะนำเทมเพลตของ Docedit เบื้องต้น</a><br />
-                  <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
-                    ติดตั้ง MS Word Add-ins</a>
-                  <a target="_blank" href="https://www.youtube.com/watch?v=P1-xe24nOUo" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
-                    ใช้งาน DOCEDIT Add-ins</a>
-                </p>
-              </div>
-            </div>
 
           </div>
+          
         </section>
+
         <section className="mt-10">
           <div className="border-b border-line pb-3">
             <h2 className="font-display text-section-title text-ink">
@@ -262,22 +217,25 @@ export default function HomePage() {
               <h3 className="font-display text-subhead text-ink">
                 Word Add-ins<br />
               </h3>
-              <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">
+              <div className="mt-1.5 text-sm leading-relaxed text-ink-soft">
-                การติดตั้งสามารถติดตั้งได้หลายวิธี
+                การนำไปเผยแพร่สามารถติดตั้งได้หลายวิธี (แนะนำ Shared Folder Sideloading)
                 <ol>
-                  <li>1. ติดตั้งผ่าน Office Store (วิธีทั่วไปสำหรับผู้ใช้ทั่วไป)</li>
+                  <li>1. ติดตั้งผ่าน Office Store การเผยแพร่ต้องสมัครบัญชีนักพัฒนาใช้ Microsoft Partner Center ลงทะเบียนในโปรแกรม Office Store</li>
-                  <li>2. Sideloading ด้วยไฟล์ <Link target="_blank" href="/wordaddin/manifest.xml" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
+                  <li>2. การติดตั้งระดับองค์กร (ผ่าน Microsoft 365 Admin Center) ทำตาม
+                    <a target="_blank" className="text-primary transition hover:underline" href="https://www.youtube.com/watch?v=KB_KRfAfJzY">
+                    วีดีโอนี้</a></li>
+                  <li>3. Sideloading ด้วยไฟล์ <Link target="_blank" href="/wordaddin/manifest.xml" className="text-primary transition hover:underline">
                     manifest.xml </Link>(Office 365) Insert&gt;Add-ins&gt;My Add-ins คลิ้ก "Upload My Add-in"</li>
-                  <li>3. Shared Folder Sideloading(Office 2019+) นำไฟล์ <Link target="_blank" href="/wordaddin/manifest.xml" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
+                  <li>4. Shared Folder Sideloading(Office 2019+ รุ่นเดสท็อป) นำไฟล์ <Link target="_blank" href="/wordaddin/manifest.xml" className="text-primary transition hover:underline">
-                    manifest.xml </Link>&nbsp;ไปทำตามวีดีโอ <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
+                    manifest.xml </Link>&nbsp;ไปทำตามวีดีโอ <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="text-primary transition hover:underline">
                       ติดตั้ง MS Word Add-ins</a> </li>
-                  <li>4. ใช้คำสั่ง reg.exe ร่วมกับ <Link target="_blank" href="/wordaddin/manifest.xml" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
+                  <li>5. นักพัฒนา ใช้คำสั่ง reg.exe ร่วมกับ <Link target="_blank" href="/wordaddin/manifest.xml" className="text-primary transition hover:underline">
-                    manifest.xml </Link>&nbsp;ไปทำตามวีดีโอ <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
+                    manifest.xml </Link>&nbsp;ไปทำตามวีดีโอ <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="text-primary transition hover:underline">
                       ติดตั้ง MS Word Add-ins</a> </li>
-                  <li>5. สคริปต์ PowerShell(Dev Install)
+                  <li>6. นักพัฒนาสร้างสคริปต์  
-                    <Link href="/wordaddin/install-word-addins.ps1" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
+                    <Link href="/wordaddin/install-word-addins.ps1" className="text-primary transition hover:underline">
-                      install-word-addins.ps1</Link>&nbsp;
+                      install-word-addins.ps1 (เรียกใช้ reg.exe)</Link>&nbsp;
-                    แล้วเรียกคำสั่งด้านล่างเพื่อติดตั้ง<br />
+                    สำหรับ Power Shell จะต้องให้สิทธิ์ในการเรียกใช้ สามารถเรียกคำสั่งด้านล่างเพื่อติดตั้ง<br />
                     <br />
                     <b className="whitespace-nowrap">Unblock-File .\install-word-addins.ps1</b><br />
                     <b className="whitespace-nowrap">Set-ExecutionPolicy -Scope Process -ExecutionPolicy RemoteSigned -Force</b><br />
@@ -290,16 +248,17 @@ export default function HomePage() {
                   ด้วยข้อกำหนดของ TOR ให้รองรับ Word 2019(Desktop) บนวินโดว์ 10 เป็นขั้นต่ำ ทำให้ถูกจำกัดที่ WordApi 1.3 เท่านั้น
                   ฟึเจอร์บางอย่างบน Add-ins จะถูกจำกัดตามความสามารถตามรุ่นของ WordApi การทดสอบต่างๆตามที่กำหนดใน TOR
                   <br />
-                  สำหรับ Microsoft Office เวอร์ชันขายขาดแบบเก่า (เช่น Office 2016, 2019 หรือ 2021) จะไม่มีปุ่มอัปโหลดไฟล์ XML
+                  สำหรับ Microsoft Office เวอร์ชันขายขาดแบบเก่า (เช่น Office 2016, 2019, 2021 หรือ 2024) จะไม่มีปุ่มอัปโหลดไฟล์ XML
                   บนหน้าต่างเมนูโดยตรงเหมือน Microsoft 365 หากต้องการติดตั้งไฟล์ manifest.xml ในรุ่นดังกล่าว
-                  จำเป็นต้องใช้วิธีแชร์โฟลเดอร์เครือข่าย (Shared Folder Sideloading)
+                  นะนำให้ใช้วิธีแชร์โฟลเดอร์เครือข่าย (Shared Folder Sideloading) หรือผ่าน Microsoft 365 Admin Center
                   <br />
                 </i>
-              </p>
+              </div>
             </div>
           </div>
         </section>
 
+
       </div>
     </div>
   );

components/TmplHome.tsx

@@ -0,0 +1,114 @@
+// components/TemplateFormClient.tsx
+'use client';
+import { useState, type ChangeEvent } from 'react';
+import Link from "next/link";
+import DependentDropdown, { type DropdownData } from '@/components/utils/DependentDropdown';
+
+interface TemplateFormClientProps {
+    templateData: DropdownData;
+}
+
+export default function TemplateFormClient({ templateData }: TemplateFormClientProps) {
+    const handleTmplSelect = (template: string, data: string) => {
+        // Handle selection if needed
+    };
+
+    return (
+
+
+
+        
+        <div className="mt-5 grid gap-5 sm:grid-cols-2">
+            {/* ส่วน Template & Data แสดงรายการไฟล์จริงจากโฟลเดอร์ */}
+            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
+                <div>
+                    <h3 className="font-display text-subhead text-ink">Template & Data</h3>
+                    <div className="mt-1.5 text-sm leading-relaxed text-ink-soft">
+                        {Object.entries(templateData).map(([tid, jsonList]) => (
+                            <div key={tid} className="mb-3">
+                                <b>Template: </b>
+                                <Link href={`/tmpl/${tid}.docx`} className="text-primary transition hover:underline">
+                                    {tid}.docx
+                                </Link>
+                                <br />
+                                <b>Data: </b>
+                                {jsonList.map((fid, idx) => (
+                                    <span key={fid}>
+                                        <Link href={`/tmpl/${fid}.json`} className="text-primary transition hover:underline">
+                                            {fid}.json
+                                        </Link>
+                                        {idx < jsonList.length - 1 ? ', ' : ''}
+                                    </span>
+                                ))}
+                            </div>
+                        ))}
+                        <div className="mt-2">
+                            นำไฟล์ไปทดสอบกับ <Link href="/api/swagger/" target="_top" className="text-primary transition hover:underline">API</Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* ส่วน Form (POST) */}
+            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
+                <div>
+                    <h3 className="font-display text-subhead text-ink">Form (POST)</h3>
+                    <div className="mt-1.5 text-sm leading-relaxed text-ink-soft">
+                        <form action="/docedit/api/template/download-docx" method="POST">
+                            <DependentDropdown data={templateData} name1='tid' name2='fid'
+                                label1="Template(tid):" label2="ข้อมูล(fid):" onSelectChange={handleTmplSelect} />
+                            <div className="mb-2"></div>
+                            <div>
+                                <label htmlFor="uid">uid:
+                                    <input type="text" name="uid" className="p-2 mb-2 border border-gray-300 rounded-md" defaultValue="john" />
+                                </label>
+                            </div>
+                            <div>
+                                <label htmlFor="uname">uname:
+                                    <input type="text" name="uname" className="p-2 mb-2 border border-gray-300 rounded-md" defaultValue="John Doe" />
+                                </label>
+                            </div>
+                            <button
+                                type="submit"
+                                style={{
+                                    padding: '10px 20px',
+                                    backgroundColor: '#0070f3',
+                                    color: '#fff',
+                                    border: 'none',
+                                    borderRadius: '5px',
+                                    cursor: 'pointer',
+                                }}
+                            >
+                                ดาวน์โหลดเอกสาร MS Word
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            {/* ส่วน Link (GET) */}
+            <div className="flex gap-4 rounded-xl border border-line bg-white p-6">
+                <div>
+                    <h3 className="font-display text-subhead text-ink">Link (GET)</h3>
+                    <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">
+                        {Object.entries(templateData).map(([tid, jsonList]) => {
+                            // jsonList คืออาเรย์ของชื่อไฟล์ json (fid) ที่ผูกอยู่กับ template (tid) นี้
+                            return jsonList.map((fid) => {
+                                const linkHref = `/docedit/api/template/download-docx?tid=${tid}&fid=${fid}&uid=john&uname=John%20Doe`;
+                                const displayLabel = `${fid}_john_xxx.docx`; // หรือปรับรูปแบบข้อความแสดงผลตามต้องการ
+
+                                return (
+                                    <span key={`${tid}-${fid}`}>
+                                        <a href={linkHref} className="text-primary transition hover:underline">
+                                            {displayLabel}
+                                        </a>
+                                        <br />
+                                    </span>
+                                );
+                            });
+                        })}
+                    </p>
+                </div>
+            </div>
+
+        </div>
+    );
+}