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">
          eCourt Template
        </h1>
        <p className="mt-2 text-body text-ink-soft">
          ระบบสร้างเทมเพลตเอกสารแบบใหม่ MS Word จากไฟล์ JSON และ Template docx
        </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 โดยไม่ต้องใช้เครื่องมือพิเศษ " +
                  "สามารถนำเอกสารตัวเดิมมาใช้ออกแบบได้เลย " +
                  "ไม่จำเป็นต้องมีความรู้ด้านการเขียนโปรแกรมหรือ XML ก็สามารถสร้างเทมเพลตได้",
              },
              {
                icon: FilePenLine,
                title: "Fill Form",
                detail:
                  "รอรับ Rich และ Plain Text Content Control " +
                  "สามารถสร้างฟอร์มสำหรับกรอกข้อมูลพร้อมข้อมูลตั้งต้น " +
                  "ผู้ใช้สามารถนำไปกรอกข้อมูลใน Word ได้เลย และสามารถเใช้โปรแกรมดึงข้อมูลกับมาเก็บในฐานข้อมูลได้",
              },
              {
                icon: ToyBrick,
                title: "Integrate with Other System",
                detail:
                  "มี Web API สำหรับสร้างเอกสารจากเทมเพลต(DOCX) กับข้อมูล(JSON) " +
                  "มี API Key เพื่อจำกัดการใช้งาน สามารถออกบัตรผ่านที่ลงลายเซ็นต์ด้วย HmacSha256" +
                  "เพื่อให้ผสานกับระบบงานอื่นๆ ได้อย่างปลอดภัย",
              },
              {
                icon: FileText,
                title: "Dynamic Document",
                detail:
                  "รองรับเทมเพลตที่ซับซ้อน ข้อมูลที่มีไม่แน่นอนอย่างอาเรย์ การแสดงผลตามเงื่อนไขแบบต่างๆ " +
                  "สามารถเขียนโปรแกรมเพิ่มลงในเทมเพลตได้ รองรับ FOR , IF แทรกโค้ด " +
                  "ฟังก์ชั่นในตัวเพื่อรองรับการสร้าง Content Control Bookmark ฯลฯ",
              },
              {
                icon: Rocket,
                title: " High Performance",
                detail:
                  "containerization ขยายระบบได้ง่าย, ระบบเทมเพลตใช้การ XML โดยตรง  " +
                  "การสร้าง template เป็นแบบ Multi-Thread รองรับ CPU หลายแกน " +
                  "",
              },
            ].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">
                  <Link href="/api/template/download-docx?tid=T_X&fid=T_no_warning&uid=john&uname=John%20Doe">T_no_warning_john_xxx.docx</Link><br />
                  <Link href="/api/template/download-docx?tid=T_X&fid=TF_no_warning_P2&uid=john&uname=John%20Doe">TF_no_warning_P2_john_xxx.docx</Link><br />
                  <Link href="/api/template/download-docx?tid=T_X&fid=TS_P2_IN&uid=john&uname=John%20Doe">TS_P2_IN_john_xxx.docx</Link><br />

                  <Link href="/api/template/download-docx?tid=T12_X&fid=T12_b2_IN&uid=john&uname=John%20Doe">T12_b2_IN_john_xxx.docx</Link><br />
                  <Link href="/api/template/download-docx?tid=T12_X&fid=T12_FD155_3s-long&uid=john&uname=John%20Doe">T12_FD155_3s-long_john_xxx.docx</Link><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">
                  <h2 className="font-semibold text-blue-600 mb-2"></h2>
                  Template: <Link href="/tmpl/T_X.docx">T_X.docx</Link>, &nbsp;
                  <Link href="/tmpl/T12_X.docx">T12_X.docx</Link><br />
                  Data: <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>

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

                </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>
                <p 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>
                </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">
                <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">
                  <Link 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 เบื้องต้น</Link><br />
                  <Link href="https://www.youtube.com/watch?v=3emGNqRZgMs" className="focus-ring -m-1 inline-block rounded-md px-1 py-0.5 font-medium text-primary transition hover:underline">
                    Sideload Office add-ins</Link>
                </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">
                ดาวน์โหลด&nbsp;
                <Link 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;
                ไว้ที่ SharePoint แชร์เน็ตเวิร์ก หรือดาวน์โหลดสคริปต์ PowerShell(Dev Install) &nbsp;
                <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;
                  แล้วใช้คำสั่ง PowerShell ด้านล่างเพื่อติดตั้ง Add-ins ใน Word<br />
                <br />
                <p className="whitespace-nowrap">Unblock-File .\install-word-addins.ps1</p>
                <p className="whitespace-nowrap">Set-ExecutionPolicy -Scope Process -ExecutionPolicy RemoteSigned -Force</p>
                <p className="whitespace-nowrap">.\install-word-addins.ps1 -Install</p>

              </p>
            </div>
          </div>
        </section>

      </div>
    </div>
  );
}