eCourt-note/app/tmpl/page.tsx

// app/page.tsx (ระบบ B)
'use client';
import Link from "next/link";
import type { ChangeEvent } from 'react';
import DependentDropdown, { DropdownData } from '@/components/utils/DependentDropdown';
import {
  Bookmark, ToyBrick, FilePenLine, BicepsFlexed, Rocket, Workflow, Files, Blocks, FileQuestionMark,
  ExternalLink,
  FileText,
  Highlighter,
  MessagesSquare,
} from "lucide-react";

export default function HomePage() {
  const templateData: DropdownData = {
    T_X: ['T_no_warning', 'TF_no_warning_P2', 'TS_P2_IN'],
    T12_X: ['T12_b2_IN', 'T12_FD155_3s-long'],
  };
  const handleTmplSelect = (template: string, data: string) => {
    //console.log('Location Selected:', { template, data });
  };
  const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
    // console.log(e.target)
    return true;
  }
  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">
          ระบบเทมเพลตเพื่อสร้างเอกสาร MS Word และจัดการรุ่นของเอกสารผ่าน Word Add-ins ยุคใหม่ แบบอิสระ ที่สามารถ Integrate กับระบบความปลอดภัยของระบบอื่นๆได้
        </p>

        <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",
                detail:
                  "ออกแบบหน้าของเอกสารจาก Microsoft Word โดยไม่ต้องใช้เครื่องมือพิเศษ " +
                  "สามารถนำเอกสารตัวเดิมมาใช้ออกแบบได้ทันที " +
                  "ไม่จำเป็นต้องมีทักษะการเขียนโปรแกรมก็สามารถสร้างเทมเพลตได้ด้วยตัวเอง",
              },
              {
                icon: FilePenLine,
                title: "Fill Form",
                detail:
                  "รอรับ Rich และ Plain Text Content Control " +
                  "สามารถสร้างฟอร์มสำหรับกรอกข้อมูลจากไฟล์ docx " +
                  "สามารถใช้ API ดึงข้อมูลในฟอร์มกลับมาเพื่อนำไปใช้งานต่อ เช่นเก็บในฐานข้อมูลได้",
              },
              {
                icon: ToyBrick,
                title: "Integration",
                detail:
                  "ระบบทำงานเป็นอิสระแบบ Microservice ใช้ API Key เพื่อจำกัดการใช้งาน สามารถออกบัตรผ่านที่ลงลายเซ็นต์ด้วย HmacSha256" +
                  "เพื่อให้ผสาน(Integrate)กับระบบงานที่มีอยู่เดิม ได้อย่างปลอดภัย" +
                  "เพื่อให้ผสานกับระบบงานอื่นๆ ได้อย่างปลอดภัย",
              },
              {
                icon: FileText,
                title: "Dynamic Template",
                detail:
                  "รองรับเทมเพลตที่ซับซ้อน ข้อมูลที่มีจำนวนไม่แน่นอน การแสดงผลตามเงื่อนไขแบบต่างๆ " +
                  "สามารถเขียนโปรแกรมเพิ่มลงในเทมเพลตได้ รองรับ FOR , IF แทรกโค้ด " +
                  "ฟังก์ชั่นเพื่อสร้าง Content Control Bookmark ฯลฯ" +
                  "มี API ช่วยนักพัฒนาสร้างเอกสารจากเทมเพลต(DOCX)และข้อมูล(JSON) "
              },
              {
                icon: Rocket,
                title: "Versioning",
                detail:
                  "จัดการ Veresion(รุ่น)ของเอกสารร่วมกันได้ผ่าน Microsoft Word Add-ins " +
                  "สามารถดึง Veresion ที่ต้องการกลับมาแก้ไขได้ ",
              },
              {
                icon: Rocket,
                title: "High Performance",
                detail:
                  "containerization ขยายระบบได้ง่าย " +
                  "การสร้าง template ทำงานแบบ Multi-Thread รองรับ CPU หลายแกน " +
                  "เก็บไฟล์ใน Object Storage มีความทนทานและรับโหลดได้หนัก",
              },
              {
                icon: Rocket,
                title: "PDF Export",
                detail:
                  "ทุกครั้งที่ Save Veresion จะสร้าง PDF อัตโนมัติในด้วย MS Word ทำให้ได้เค้าโครงของหน้าตรงกับเอกสารที่แก้ไข " +
                  "โดยไม่เกิดปัญหาความผิดเพี้ยนของ PDF ที่ใช้ MS Office ต่างเวอร์ชั่นในการแปลง ประมวลผลที่ไคลเอนต์ลดการใช้ทรัพยากรที่เซิร์ฟเวอร์",

              },
            ].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>
          <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 />
              </span>
              <div>
                <h3 className="font-display text-subhead text-ink">Link (GET)</h3>
                <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">

                  <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 />
                  <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 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 />

                  <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 />
                  <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 />
              </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-xl font-bold 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 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">
              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>
              <p className="mt-1.5 text-sm leading-relaxed text-ink-soft">
                การติดตั้งสามารถติดตั้งได้หลายวิธี
                <ol>
                  <li>1. ติดตั้งผ่าน 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">
                    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">
                    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">
                      ติดตั้ง 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">
                    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">
                      ติดตั้ง MS Word Add-ins</a> </li>
                  <li>5. สคริปต์ PowerShell(Dev Install)
                    <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">
                      install-word-addins.ps1</Link>&nbsp;
                    แล้วเรียกคำสั่งด้านล่างเพื่อติดตั้ง<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) จะไม่มีปุ่มอัปโหลดไฟล์ XML
                  บนหน้าต่างเมนูโดยตรงเหมือน Microsoft 365 หากต้องการติดตั้งไฟล์ manifest.xml ในรุ่นดังกล่าว
                  จำเป็นต้องใช้วิธีแชร์โฟลเดอร์เครือข่าย (Shared Folder Sideloading)
                  <br />
                </i>
              </p>
            </div>
          </div>
        </section>

      </div>
    </div>
  );
}