eCourt-note/app/tmpl/page.tsx

export const dynamic = 'force-dynamic'
export const revalidate = 0;

import fs from 'fs';
import path from 'path';
import Link from "next/link";
import TmplHome from "@/components/TmplHome";
import { DropdownData } from '@/components/utils/DependentDropdown';
import {
  ToyBrick, FilePenLine, Rocket, Workflow, NotepadTextDashed,
  Blocks, FileQuestionMark, ShieldLock, FileUp, GitMerge,
  FileText
} from "lucide-react";

export default function HomePage() {
  // อ่านไฟล์จากโฟลเดอร์ public/tmpl บน Server
  const tmplDirectory = path.join(process.cwd(), 'public/tmpl');
  let filenames: string[] = [];
  
  try {
    filenames = fs.readdirSync(tmplDirectory);
  } catch (error) {
    console.error("ไม่พบโฟลเดอร์ public/tmpl", error);
  }

  // กรองเฉพาะไฟล์ .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
    // 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">
        <h1 className="font-display text-3xl tracking-tight text-ink sm:text-headline">
          DOCEDIT Template & Add-ins
        </h1>
        <p className="mt-2 text-body text-ink-soft">
          ชุดพัฒนาระบบสร้างเอกสาร 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: "ออกแบบเทมเพลตด้วย Microsoft Word",
                detail:
                  "สร้างเทมเพลตเอกสารได้ง่าย ๆ ด้วย Microsoft Word เครื่องมือที่ทุกคนคุ้นเคย " +
                  "ไม่จำเป็นต้องติดตั้งโปรแกรมเพิ่มเติมหรือเรียนรู้เครื่องมือเฉพาะทาง สามารถนำเอกสาร Word ที่มีอยู่เดิมมาปรับใช้เป็นเทมเพลตได้ทันที " +
                  "ไแม้ไม่มีทักษะด้านการเขียนโปรแกรม ก็สามารถออกแบบและสร้างเทมเพลตเอกสารได้ด้วยตนเอง ",
              },
              {
                icon: NotepadTextDashed,
                title: "รองรับเอกสารที่มีเงื่อนไขซับซ้อน",
                detail:
                  "รองรับการสร้างเอกสารที่มีโครงสร้างและเงื่อนไขซับซ้อน ไม่ว่าจะเป็นข้อมูลจำนวนไม่แน่นอน การแสดงผลตามเงื่อนไข " +
                  "หรือการจัดรูปแบบเนื้อหาแบบไดนามิก สามารถเพิ่มชุดคำสั่งและเขียนโปรแกรมลงในเทมเพลตได้ เช่น FOR, IF, " +
                  "การแทรกโค้ด และฟังก์ชันเพิ่มเติม พร้อม API สำหรับนักพัฒนา เพื่อทดสอบการสร้างเอกสารจากเทมเพลต DOCX ร่วมกับชุดข้อมูล JSON ได้อย่างสะดวก "
              },
              {
                icon: FilePenLine,
                title: "เปลี่ยนเอกสาร Word ให้เป็นแบบฟอร์มอัจฉริยะ",
                detail:
                  "รองรับ Rich Text และ Plain Text Content Controls ใน Microsoft Word " +
                  "สามารถนำไฟล์ DOCX มาสร้างเป็นแบบฟอร์มสำหรับกรอกข้อมูลได้ทันที โดยไม่ต้องเสียเวลาออกแบบฟอร์มใหม่บน " +
                  "Web Application พร้อม API สำหรับดึงข้อมูลที่ผู้ใช้กรอกกลับมาในรูปแบบ JSON เพื่อนำไปประมวลผล "+
                  "จัดเก็บลงฐานข้อมูล หรือเชื่อมต่อกับกระบวนการทำงานอื่น ๆ ได้อย่างยืดหยุ่น ",
              },
              {
                icon: ToyBrick,
                title: "เชื่อมต่อระบบงานเดิมได้อย่างอิสร",
                detail:
                  "ออกแบบให้ทำงานเป็นระบบอิสระ สามารถเชื่อมต่อกับระบบงานที่มีอยู่เดิมผ่าน API ได้อย่างยืดหยุ่น รองรับการออก Access Token " + 
                  "สำหรับกำหนดสิทธิ์และควบคุมการเข้าถึง โดยไม่จำเป็นต้องพึ่งพาระบบ Single Sign-On (SSO) " +
                  "หรือเชื่อมต่อเข้าถึงฐานข้อมูลของระบบงานเดิม ช่วยลดความซับซ้อนในการบูรณาการระบบและเพิ่มความคล่องตัวในการพัฒนา ",
              },
              {
                icon: GitMerge,
                title: "จัดการเวอร์ชันเอกสารอย่างเป็นระบบ",
                detail:
                  "รองรับการจัดเก็บและบริหารจัดการเวอร์ชันของเอกสารร่วมกันผ่าน Microsoft Word Add-ins " +
                  "สามารถบันทึกเวอร์ชันใหม่ เรียกดูประวัติการแก้ไข และเรียกคืนเวอร์ชันที่ต้องการกลับมาแก้ไขต่อได้ " +
                  "ช่วยให้การทำงานร่วมกันเป็นระบบ ลดความสับสนจากการจัดเก็บไฟล์หลายฉบับ และสามารถตรวจสอบย้อนกลับไปยังเวอร์ชันก่อนหน้าได้",
              },
              {
                icon: Rocket,
                title: "ประสิทธิภาพสูง พร้อมรองรับการขยายระบบ",
                detail:
                  "พัฒนาด้วยสถาปัตยกรรมแบบ Container รองรับการขยายระบบ (Scalability) ได้อย่างยืดหยุ่น " +
                  "กระบวนการสร้างเอกสารจากเทมเพลตทำงานแบบ Multi-threading สามารถใช้ประโยชน์จาก CPU หลายแกนประมวลผลพร้อมกัน " +
                  "รองรับการจัดเก็บไฟล์ผ่าน Object Storage ที่มีความยืดหยุ่นและรองรับการขยายพื้นที่จัดเก็บ ช่วยเพิ่มประสิทธิภาพและรองรับปริมาณงานที่เพิ่มขึ้นในอนาคต ",
              },
              {
                icon: FileUp,
                title: "ส่งออก PDF ด้วยรูปแบบที่ตรงกับต้นฉบับ",
                detail:
                  "สร้างไฟล์ PDF โดยอัตโนมัติทุกครั้งที่บันทึกเวอร์ชันเอกสาร ผ่าน Microsoft Word โดยตรง ทำให้รูปแบบและการจัดวางหน้าของ PDF " +
                  "สอดคล้องกับเอกสารต้นฉบับ ลดปัญหาความคลาดเคลื่อนของรูปแบบเอกสารจากความแตกต่างของ Microsoft Office แต่ละเวอร์ชัน " +
                  "นอกจากนี้ยังประมวลผลบนเครื่องผู้ใช้งาน (Client-side Processing) ช่วยลดภาระการประมวลผลและการใช้ทรัพยากรของเซิร์ฟเวอร์",
              },
              {
                icon: ShieldLock,
                title: "ปลอดภัยด้วยมาตรฐานการสื่อสารและการควบคุมการเข้าถึง",
                detail:
                  "ให้ความสำคัญกับความปลอดภัยของข้อมูล ด้วยการเข้ารหัสการสื่อสารผ่าน HTTPS และควบคุมการเข้าถึงไฟล์ด้วย Access Token " +
                  "ที่ผ่านการลงลายมือชื่อดิจิทัลด้วย HMAC-SHA256 ช่วยป้องกันการปลอมแปลง Token และจำกัดการเข้าถึงทรัพยากรตามสิทธิ์ที่ได้รับ ลดความเสี่ยงจากการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต",

              },
            ].map(({ icon: Icon, title, detail }) => (
              <div
                key={title}
                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">
                  <Icon className="h-5 w-5" aria-hidden />
                </span>
                <div>
                  <h3 className="font-display text-subhead text-ink">{title}</h3>
                  <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">
                    {detail}
                  </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">
              ตัวอย่างการใช้งาน
            </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">
                <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="text-primary transition hover:underline">
                    แนะนำเทมเพลตของ Docedit เบื้องต้น</a><br />
                  <a target="_blank" href="https://www.youtube.com/watch?v=kOBoVN-KQzU" className="text-primary transition hover:underline">
                    ติดตั้ง MS Word Add-ins</a><br />
                  <a target="_blank" href="https://www.youtube.com/watch?v=P1-xe24nOUo" className="text-primary transition hover:underline">
                    ใช้งาน DOCEDIT Add-ins</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">
                <Workflow className="h-5 w-5" aria-hidden />
              </span>
              <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-center">
                    ลิงค์เลือกไฟล์<br />
                    &darr; <br />
                    ตรวจสิทธิ์ สร้าง docx <br />
                    &darr; <br />
                    ดาว์นโหลด เปิด Word<br />
                    &darr; <br />
                    Add-ins ตรวจสอบไฟล์<br />
                    &darr; <br />
                    Versioning<br />
                    &darr; <br />
                    อัปเดตฐานข้อมูลและไฟล์<br />
                  </div>
                </div>
              </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">
              Add-ins
            </h2>
          </div>
          <div className="mt-5 flex max-w-xxl 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">
              <Blocks className="h-5 w-5" aria-hidden />
            </span>
            <div>
              <h3 className="font-display text-subhead text-ink">
                Word Add-ins<br />
              </h3>
              <div className="mt-1.5 text-sm leading-relaxed text-ink-soft">
                การนำไปเผยแพร่สามารถติดตั้งได้หลายวิธี (แนะนำ Shared Folder Sideloading)
                <ol>
                  <li>1. ติดตั้งผ่าน Office Store การเผยแพร่ต้องสมัครบัญชีนักพัฒนาใช้ Microsoft Partner Center ลงทะเบียนในโปรแกรม Office Store</li>
                  <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>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="text-primary transition hover:underline">
                      ติดตั้ง MS Word Add-ins</a> </li>
                  <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="text-primary transition hover:underline">
                      ติดตั้ง MS Word Add-ins</a> </li>
                  <li>6. นักพัฒนาสร้างสคริปต์  
                    <Link href="/wordaddin/install-word-addins.ps1" className="text-primary transition hover:underline">
                      install-word-addins.ps1 (เรียกใช้ reg.exe)</Link>&nbsp;
                    สำหรับ 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 />
                    <b className="whitespace-nowrap">.\install-word-addins.ps1 -Install</b><br /></li>
                </ol>
                <br />
                <b>หมายเหตุ:</b>
                <i>
                  Add-ins เป็นรุ่นใหม่(Office.js) มีความเป็นไปได้ที่จะรองรับรุ่น Desktop(Windows/Mac), Web และ iPad
                  ด้วยข้อกำหนดของ TOR ให้รองรับ Word 2019(Desktop) บนวินโดว์ 10 เป็นขั้นต่ำ ทำให้ถูกจำกัดที่ WordApi 1.3 เท่านั้น
                  ฟึเจอร์บางอย่างบน Add-ins จะถูกจำกัดตามความสามารถตามรุ่นของ WordApi การทดสอบต่างๆตามที่กำหนดใน TOR
                  <br />
                  สำหรับ Microsoft Office เวอร์ชันขายขาดแบบเก่า (เช่น Office 2016, 2019, 2021 หรือ 2024) จะไม่มีปุ่มอัปโหลดไฟล์ XML
                  บนหน้าต่างเมนูโดยตรงเหมือน Microsoft 365 หากต้องการติดตั้งไฟล์ manifest.xml ในรุ่นดังกล่าว
                  นะนำให้ใช้วิธีแชร์โฟลเดอร์เครือข่าย (Shared Folder Sideloading) หรือผ่าน Microsoft 365 Admin Center
                  <br />
                </i>
              </div>
            </div>
          </div>
        </section>


      </div>
    </div>
  );
}