up1 · September 24, 2026 05:34
diff --git a/add_slip.html b/add_slip.html
 <!DOCTYPE html><html lang="th" style=""><head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><meta content="web_dashboard" name="shell-type"><style>@layer base{html,body{margin:0;padding:0;}body{overscroll-behavior:none;}main>:first-child{margin-top:0!important;}main>:last-child{margin-bottom:0!important;}}::-webkit-scrollbar{display:none;}</style><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&amp;family=Plus+Jakarta+Sans:wght@100..900&amp;display=swap" rel="stylesheet"><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config = { darkMode: "class", theme: { extend: { "colors": { "on-surface": "#0b1c30", "surface-container-high": "#dce9ff", "on-secondary": "#ffffff", "on-secondary-fixed-variant": "#3c475a", "on-surface-variant": "#3f4945", "outline-variant": "#bec9c4", "on-tertiary-fixed-variant": "#004b73", "on-primary-fixed-variant": "#005141", "surface-container": "#e5eeff", "error": "#ba1a1a", "tertiary": "#004064", "on-error": "#ffffff", "on-tertiary-container": "#96ceff", "tertiary-fixed-dim": "#93ccff", "on-secondary-container": "#586377", "secondary": "#545f73", "on-error-container": "#93000a", "surface-tint": "#1e6a58", "surface-bright": "#f8f9ff", "surface-container-low": "#eff4ff", "primary-container": "#0d5f4e", "inverse-surface": "#213145", "background": "#f8f9ff", "primary": "#004638", "surface-dim": "#cbdbf5", "error-container": "#ffdad6", "surface-container-highest": "#d3e4fe", "surface-container-lowest": "#ffffff", "on-tertiary": "#ffffff", "secondary-fixed-dim": "#bcc7de", "secondary-container": "#d5e0f8", "on-primary-container": "#8fd6c1", "tertiary-fixed": "#cce5ff", "surface-variant": "#d3e4fe", "on-secondary-fixed": "#111c2d", "primary-fixed": "#a8f1da", "on-background": "#0b1c30", "on-primary": "#ffffff", "secondary-fixed": "#d8e3fb", "primary-fixed-dim": "#8dd4bf", "surface": "#f8f9ff", "outline": "#6f7975", "on-primary-fixed": "#002019", "tertiary-container": "#005887", "on-tertiary-fixed": "#001d31", "inverse-on-surface": "#eaf1ff", "inverse-primary": "#8dd4bf" }, "borderRadius": { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" }, "spacing": { "space-sm": "0.5rem", "space-xs": "0.25rem", "space-xl": "2rem", "gutter": "1.5rem", "gutter-mobile": "1rem", "space-lg": "1.5rem", "margin": "2rem", "margin-mobile": "1rem", "space-md": "1rem" }, "fontFamily": { "body-sm": ["Inter"], "headline-lg": ["Plus Jakarta Sans"], "body-md": ["Inter"], "body-lg": ["Inter"], "label-md": ["Inter"], "headline-xl-mobile": ["Plus Jakarta Sans"], "title-lg": ["Plus Jakarta Sans"], "label-sm": ["Inter"], "headline-md": ["Plus Jakarta Sans"], "label-lg": ["Inter"], "headline-lg-mobile": ["Plus Jakarta Sans"], "headline-xl": ["Plus Jakarta Sans"], "title-md": ["Inter"] }, "fontSize": { "body-sm": ["12px", { "lineHeight": "18px", "fontWeight": "400" }], "headline-lg": ["28px", { "lineHeight": "36px", "fontWeight": "600" }], "body-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }], "body-lg": ["16px", { "lineHeight": "24px", "fontWeight": "400" }], "label-md": ["12px", { "lineHeight": "16px", "fontWeight": "500" }], "headline-xl-mobile": ["28px", { "lineHeight": "36px", "fontWeight": "700" }], "title-lg": ["18px", { "lineHeight": "26px", "fontWeight": "600" }], "label-sm": ["11px", { "lineHeight": "14px", "fontWeight": "600" }], "headline-md": ["20px", { "lineHeight": "28px", "fontWeight": "600" }], "label-lg": ["14px", { "lineHeight": "20px", "fontWeight": "500" }], "headline-lg-mobile": ["24px", { "lineHeight": "32px", "fontWeight": "600" }], "headline-xl": ["36px", { "lineHeight": "44px", "fontWeight": "700" }], "title-md": ["16px", { "lineHeight": "24px", "fontWeight": "600" }] } } } };</script></head><body class="bg-surface font-body-md text-on-surface antialiased"><aside class="fixed left-0 top-0 h-full w-72 bg-surface-container-lowest shadow-[0_1px_8px_rgba(0,0,0,0.04)] z-50 flex flex-col justify-between py-6"><div class="flex flex-col"><div class="px-6 pb-6 flex items-center gap-3"><img alt="SlipLedger Brand Logo" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida/AEtjO1UKPY5I3RVnwnNOvul1m1EZ3LJITW3FMcmWIgdWq4QOej2HBOFoU2HJRhrTJzVrSglRbcKTe5MFgC1tr2BeiQGnUQ1vwyp5Gc2Wf_3OsfQ8QMhdRHIzQ2kU9DuNnB8iUlMU3hbUNT6d2A9RaCMwJVIqwoW7T598Rmhq00HQTctF65MqCm5UiSduPhqXBw4NKlvK_gWiQiujTJU7-72wPJXhr24BYrpMdoIVMk0RrZ8FTuFY7E7ufdbi3w"><div class="flex flex-col"><span class="font-title-lg text-title-lg tracking-tight text-primary leading-tight">SlipLedger</span><span class="font-label-sm text-label-sm text-on-surface-variant">สลิปอัจฉริยะ บัญชีอัตโนมัติ</span></div></div><nav class="px-4 flex flex-col gap-1" data-active-classes="bg-primary-container text-on-primary-container font-bold rounded-xl"><a class="flex items-center justify-between px-3.5 py-2.5 rounded-xl text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all group" data-path="dashboard-overview" href="#"><div class="flex items-center gap-3"><span class="material-symbols-outlined text-[20px]">dashboard</span><div class="flex flex-col text-left"><span class="font-label-lg text-label-lg leading-tight">ภาพรวมการเงิน</span><span class="font-label-sm text-label-sm opacity-70">Overview</span></div></div><span class="font-label-sm text-label-sm bg-surface-container text-on-surface-variant px-2 py-0.5 rounded-full">ก.พ. 67</span></a><a aria-current="page" class="flex items-center justify-between px-3.5 py-2.5 transition-all group bg-primary-container text-on-primary-container font-bold rounded-xl" data-path="upload-scan-slips" href="#"><div class="flex items-center gap-3"><span class="material-symbols-outlined text-[20px]">document_scanner</span><div class="flex flex-col text-left"><span class="font-label-lg text-label-lg leading-tight">อัปโหลดและสแกนสลิป</span><span class="font-label-sm text-label-sm opacity-70">Upload &amp; Scan</span></div></div><span class="font-label-sm text-label-sm bg-primary-fixed text-on-primary-fixed px-2 py-0.5 rounded-full font-semibold">AI OCR</span></a><a class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all group" data-path="transaction-history" href="#"><span class="material-symbols-outlined text-[20px]">receipt_long</span><div class="flex flex-col text-left"><span class="font-label-lg text-label-lg leading-tight">ประวัติรายการธุรกรรม</span><span class="font-label-sm text-label-sm opacity-70">Transactions</span></div></a><a class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all group" data-path="expense-categories-budgets" href="#"><span class="material-symbols-outlined text-[20px]">pie_chart</span><div class="flex flex-col text-left"><span class="font-label-lg text-label-lg leading-tight">หมวดหมู่ค่าใช้จ่าย</span><span class="font-label-sm text-label-sm opacity-70">Categories &amp; Budgets</span></div></a><a class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all group" data-path="connected-banks-promptpay" href="#"><span class="material-symbols-outlined text-[20px]">account_balance</span><div class="flex flex-col text-left"><span class="font-label-lg text-label-lg leading-tight">บัญชีธนาคารที่เชื่อมต่อ</span><span class="font-label-sm text-label-sm opacity-70">Connected Banks</span></div></a><a class="flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all group" data-path="reports-tax-export" href="#"><span class="material-symbols-outlined text-[20px]">description</span><div class="flex flex-col text-left"><span class="font-label-lg text-label-lg leading-tight">รายงานและภาษี</span><span class="font-label-sm text-label-sm opacity-70">Tax &amp; Reports</span></div></a></nav></div><div class="px-4 flex flex-col gap-3"><div class="bg-surface-container-low p-3.5 rounded-xl flex flex-col gap-2"><div class="flex justify-between items-center"><span class="font-label-sm text-label-sm text-on-surface-variant">โควตาสลิปเดือนนี้</span><span class="font-label-sm text-label-sm font-semibold text-primary">142 / 500</span></div><div class="w-full bg-surface-container-high h-2 rounded-full overflow-hidden"><div class="bg-primary h-full w-[28.4%]"></div></div><div class="flex justify-between items-center text-on-surface-variant"><span class="font-label-sm text-label-sm">เหลืออีก 358 สลิป</span><a class="font-label-sm text-label-sm text-primary font-semibold hover:underline" data-path="pricing-quota-upgrade" href="#">อัปเกรด</a></div></div><div class="flex flex-col gap-0.5"><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="account-settings" href="#"><span class="material-symbols-outlined text-[18px]">settings</span><span class="font-label-md text-label-md">ตั้งค่าระบบ (Settings)</span></a><a class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-all" data-path="help-support" href="#"><span class="material-symbols-outlined text-[18px]">help</span><span class="font-label-md text-label-md">คู่มือและความช่วยเหลือ (Help)</span></a></div></div></aside><div class="pl-72 flex flex-col min-h-screen"><header class="fixed top-0 left-72 right-0 h-16 bg-surface/80 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.04)] z-40 flex items-center justify-between px-gutter"><div class="flex items-center gap-3 flex-1 max-w-xl"><div class="relative w-full"><span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[20px]">search</span><input class="w-full bg-surface-container-lowest text-on-surface placeholder:text-outline pl-10 pr-4 py-2 rounded-lg font-body-sm text-body-sm focus:outline-none focus:ring-1 focus:ring-primary shadow-[0_1px_3px_0_rgba(15,23,42,0.05)]" placeholder="ค้นหารายการ, ชื่อผู้รับ, ธนาคาร, หรือเลขอ้างอิงสลิป..." type="search"></div></div><div class="flex items-center gap-4"><a class="flex items-center gap-2 bg-primary text-on-primary hover:bg-primary-container hover:text-on-primary-container px-4 py-2 rounded-lg font-label-md text-label-md font-semibold transition-all shadow-[0_1px_3px_0_rgba(15,23,42,0.05)]" data-path="upload-scan-slips" href="#"><span class="material-symbols-outlined text-[18px]">add</span><span class="">+ อัปโหลดสลิปใหม่</span></a><div class="relative"><button aria-label="Notifications" class="p-2 rounded-full text-on-surface-variant hover:bg-surface-container-high hover:text-on-surface transition-colors flex items-center justify-center" type="button"><span class="material-symbols-outlined text-[22px]">notifications</span><span class="absolute top-1.5 right-1.5 w-2.5 h-2.5 bg-error rounded-full ring-2 ring-surface"></span></button></div><div class="flex items-center gap-3 pl-2"><img alt="Profile" class="w-8 h-8 rounded-full object-cover ring-1 ring-outline-variant" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKttV6cJDq6RcYjjlJHUGTVa1pmC9FzUrjm35RqjsxRI71yVyt7RMCMEKu9E9XxCvvaljRUJjK-Ict5WKqe7JUoqHXgAgGbonc9jk_o0A1PIeU1DF2Q5VwnmDBkKj9zAS0-NQHdrbEQZcWIZOtwWIGo4_5nph83k_rg3Wv60bA5-HYVAnnPkxQdQ9hpqwvHJgKDalldBKEJ9CySHCdVxazlI7vk5AcsqzMEh4Oimm5TkyCmh9mHp3V"><div class="hidden xl:flex flex-col text-left"><span class="font-label-md text-label-md font-semibold text-on-surface leading-tight">กัญญาณัฐ สุขใจ</span><span class="font-label-sm text-label-sm text-on-surface-variant leading-tight">บัญชีส่วนบุคคล / SME</span></div></div></div></header><main class="relative pt-16 bg-surface w-full px-gutter pb-space-xl flex-1"><div class="flex flex-col w-full">
 <!-- Progress Stepper Header -->
 <div class="bg-surface-container-lowest shadow-sm rounded-xl p-6 mb-8">
 <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 border-b-0 pb-2">
 <div>
 <div class="flex items-center gap-2 mb-1">
 <span class="bg-primary-fixed text-on-primary-fixed font-label-sm text-label-sm px-2.5 py-0.5 rounded-full uppercase tracking-wider font-semibold">AI Assistant 4.2</span>
 <span class="text-on-surface-variant font-label-sm text-label-sm">Batch ID: #SLIP-202410-098</span>
 </div>
 <h1 class="font-headline-md text-headline-md text-on-surface font-semibold tracking-tight">อัปโหลดและตรวจสอบสลิปโอนเงิน</h1>
 <p class="font-body-sm text-body-sm text-on-surface-variant">ดึงข้อมูลอัตโนมัติจากสลิปธนาคารไทยด้วยระบบ Computer Vision &amp; AI PromptPay Inspector</p>
 </div>
 <div class="flex items-center gap-3 self-start md:self-auto">
 <span class="font-label-sm text-label-sm text-on-surface-variant">ความคืบหน้าภาพรวม</span>
 <div class="flex items-center gap-1.5 bg-surface-container px-3 py-1.5 rounded-lg">
 <span class="material-symbols-outlined text-primary text-[18px]">verified</span>
 <span class="font-label-md text-label-md font-semibold text-primary">1 / 3 รายการเสร็จสมบูรณ์</span>
 </div>
 </div>
 </div>
 <!-- Step Indicator Nodes -->
 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
 <!-- Step 1: Completed -->
 <div class="flex items-center gap-3 bg-surface-container-low p-3 rounded-lg">
 <div class="w-8 h-8 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center shrink-0">
 <span class="material-symbols-outlined text-[18px]">check</span>
 </div>
 <div class="flex flex-col">
 <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">ขั้นตอนที่ 1</span>
 <span class="font-label-md text-label-md font-semibold text-on-surface">อัปโหลดไฟล์สลิป (3 ไฟล์)</span>
 </div>
 </div>
 <!-- Step 2: Active Focused -->
 <div class="flex items-center gap-3 bg-primary text-on-primary p-3 rounded-lg shadow-sm">
 <div class="w-8 h-8 rounded-full bg-primary-fixed text-on-primary-fixed font-title-md text-title-md flex items-center justify-center font-bold shrink-0">
          2
        </div>
 <div class="flex flex-col">
 <span class="font-label-sm text-label-sm text-primary-fixed opacity-90 uppercase tracking-wider">ขั้นตอนปัจจุบัน</span>
 <span class="font-label-md text-label-md font-semibold text-on-primary">ตรวจสอบผล AI OCR &amp; แก้ไข</span>
 </div>
 <span class="material-symbols-outlined ml-auto text-primary-fixed animate-pulse text-[20px]">sync</span>
 </div>
 <!-- Step 3: Pending -->
 <div class="flex items-center gap-3 bg-surface-container-low p-3 rounded-lg opacity-60">
 <div class="w-8 h-8 rounded-full bg-surface-container-high text-secondary flex items-center justify-center font-semibold shrink-0">
          3
        </div>
 <div class="flex flex-col">
 <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">ขั้นตอนสุดท้าย</span>
 <span class="font-label-md text-label-md font-semibold text-on-surface-variant">บันทึกเข้าสมุดบัญชี</span>
 </div>
 </div>
 </div>
 </div>
 <!-- Workspace: 12-Column Split Master Detail -->
 <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
 <!-- LEFT PANEL (5 Columns): Original Slip & Dropzone & Queue -->
 <div class="lg:col-span-5 flex flex-col gap-6">
 <!-- Multi-file Dropzone Compact -->
 <div class="bg-surface-container-lowest p-5 rounded-xl shadow-sm">
 <div class="flex items-center justify-between mb-3">
 <span class="font-title-md text-title-md text-on-surface font-semibold flex items-center gap-2">
 <span class="material-symbols-outlined text-primary text-[20px]">add_photo_alternate</span>
            ลากวางไฟล์สลิปเพิ่มเติม
          </span>
 <span class="font-label-sm text-label-sm text-on-surface-variant bg-surface-container px-2 py-0.5 rounded">JPG, PNG, PDF ≤ 10MB</span>
 </div>
 <label class="cursor-pointer flex flex-col items-center justify-center p-5 rounded-lg bg-surface-container-low hover:bg-surface-container transition-all group text-center">
 <input accept="image/*,.pdf" class="hidden" multiple="" type="file">
 <div class="w-10 h-10 rounded-full bg-primary-fixed flex items-center justify-center text-on-primary-fixed mb-2 group-hover:scale-105 transition-transform">
 <span class="material-symbols-outlined text-[20px]">upload_file</span>
 </div>
 <span class="font-label-md text-label-md font-semibold text-on-surface">ลากไฟล์มาวางที่นี่ หรือ <span class="text-primary underline">กดเลือกไฟล์</span></span>
 <span class="font-body-sm text-body-sm text-on-surface-variant mt-0.5">ระบบรองรับการสแกนสลิปพร้อมกันสูงสุด 20 รูป</span>
 </label>
 </div>
 <!-- Realistic Thai Bank Slip Preview Card -->
 <div class="bg-surface-container-lowest p-5 rounded-xl shadow-md flex flex-col gap-4">
 <div class="flex items-center justify-between">
 <div class="flex items-center gap-2">
 <span class="w-2.5 h-2.5 rounded-full bg-primary animate-ping"></span>
 <span class="font-title-md text-title-md font-semibold text-on-surface">พรีวิวสลิปต้นฉบับ</span>
 </div>
 <div class="flex items-center gap-1">
 <button aria-label="Zoom in" class="p-1.5 rounded-md hover:bg-surface-container text-secondary transition-colors" type="button">
 <span class="material-symbols-outlined text-[20px]">zoom_in</span>
 </button>
 <button aria-label="Rotate" class="p-1.5 rounded-md hover:bg-surface-container text-secondary transition-colors" type="button">
 <span class="material-symbols-outlined text-[20px]">crop_rotate</span>
 </button>
 <button aria-label="Download original" class="p-1.5 rounded-md hover:bg-surface-container text-secondary transition-colors" type="button">
 <span class="material-symbols-outlined text-[20px]">download</span>
 </button>
 </div>
 </div>
 <!-- Realistic E-Slip Simulator (KBank Style) -->
 <div class="relative bg-gradient-to-b from-surface-container-low to-surface-container-lowest p-5 rounded-xl shadow-inner text-on-surface overflow-hidden">
 <!-- Decorative Top Ribbon -->
 <div class="absolute top-0 left-0 right-0 h-2 bg-[#138f2d]"></div>
 <!-- Bank Branding Header -->
 <div class="flex items-center justify-between pt-2 pb-4">
 <div class="flex items-center gap-2.5">
 <div class="w-10 h-10 rounded-xl bg-[#00A950] text-white flex items-center justify-center font-bold font-headline-md text-headline-md shadow-sm">
                K+
              </div>
 <div class="flex flex-col">
 <span class="font-title-md text-title-md font-bold text-[#138f2d] leading-none">ธนาคารกสิกรไทย</span>
 <span class="font-label-sm text-label-sm text-on-surface-variant">โอนเงินสำเร็จ (Transfer Successful)</span>
 </div>
 </div>
 <span class="bg-[#e8f7ee] text-[#0e5b1d] font-label-sm text-label-sm font-semibold px-2 py-1 rounded-md">
              KBANK e-Slip
            </span>
 </div>
 <!-- Slip Main Value -->
 <div class="bg-surface-container-lowest p-4 rounded-lg shadow-sm flex flex-col items-center justify-center my-2 text-center">
 <span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">จำนวนเงินโอน</span>
 <div class="font-headline-xl text-headline-xl text-[#004638] font-bold tracking-tight">
              ฿1,450.00
            </div>
 <span class="font-label-sm text-label-sm text-primary font-semibold mt-1">ค่าธรรมเนียม: ฿0.00</span>
 </div>
 <!-- Transfer Source / Destination Info -->
 <div class="flex flex-col gap-3 py-3">
 <!-- From -->
 <div class="flex items-start gap-3 bg-surface-container-lowest/60 p-2.5 rounded-lg">
 <div class="w-2 h-2 rounded-full bg-primary mt-1.5 shrink-0"></div>
 <div class="flex flex-col flex-1">
 <span class="font-label-sm text-label-sm text-on-surface-variant">จาก: บจก. สลิปเลดเจอร์ โฮลดิ้ง</span>
 <span class="font-body-sm text-body-sm font-semibold text-on-surface">กสิกรไทย (KBank) •••-•-•1234-5</span>
 </div>
 </div>
 <!-- To -->
 <div class="flex items-start gap-3 bg-surface-container-lowest/60 p-2.5 rounded-lg">
 <div class="w-2 h-2 rounded-full bg-tertiary-container mt-1.5 shrink-0"></div>
 <div class="flex flex-col flex-1">
 <span class="font-label-sm text-label-sm text-on-surface-variant">ไปยัง: พร้อมเพย์ นิติบุคคล</span>
 <span class="font-body-sm text-body-sm font-semibold text-on-surface">บจก. ออฟฟิศ ดีโป้ (ไทยแลนด์)</span>
 <span class="font-label-sm text-label-sm text-on-surface-variant">PromptPay ID: 0105559874123</span>
 </div>
 </div>
 </div>
 <!-- Slip Metadata Grid -->
 <div class="bg-surface-container p-3 rounded-lg grid grid-cols-2 gap-2 text-left">
 <div>
 <span class="font-label-sm text-label-sm text-on-surface-variant block">วันที่ทำรายการ:</span>
 <span class="font-label-md text-label-md font-semibold text-on-surface">24 ต.ค. 2567</span>
 </div>
 <div>
 <span class="font-label-sm text-label-sm text-on-surface-variant block">เวลาที่ทำรายการ:</span>
 <span class="font-label-md text-label-md font-semibold text-on-surface">14:32:18 น.</span>
 </div>
 <div class="col-span-2 pt-1">
 <span class="font-label-sm text-label-sm text-on-surface-variant block">รหัสอ้างอิงธุรกรรม:</span>
 <span class="font-label-md text-label-md font-mono text-on-surface font-semibold select-all">20241024KB0987654321</span>
 </div>
 </div>
 <!-- QR Verification Simulation -->
 <div class="mt-4 pt-3 flex items-center justify-between">
 <div class="flex items-center gap-3">
 <!-- Inline QR Code SVG Mock -->
 <div class="w-12 h-12 bg-on-surface text-surface-container-lowest p-1 rounded flex items-center justify-center">
 <svg aria-label="QR Code" class="w-10 h-10 fill-current" viewBox="0 0 32 32">
 <path d="M2 2h10v10H2zm2 2v6h6V4H4zm14-2h10v10H18zm2 2v6h6V4h-6zM2 18h10v10H2zm2 2v6h6v-6H4zm16 0h2v2h-2zm4 0h2v2h-2zm-4 4h2v2h-2zm4 2h2v2h-2zm2-4h2v2h-2zm0 4h2v2h-2zm-6-2h2v2h-2zM6 6h2v2H6zm16 0h2v2h-2zM6 22h2v2H6zm10-8h2v4h-2zm-4 2h2v2h-2zm6 2h2v2h-2z"></path>
 </svg>
 </div>
 <div class="flex flex-col">
 <span class="font-label-sm text-label-sm font-semibold text-on-surface">สแกนตรวจสอบ e-Slip</span>
 <span class="font-label-sm text-label-sm text-on-surface-variant">Thai QR Payment Standard</span>
 </div>
 </div>
 <span class="material-symbols-outlined text-primary text-[28px]" title="ตรวจสอบแล้ว ข้อมูลตรงกับฐานข้อมูล BOT">verified_user</span>
 </div>
 <!-- Bounding Boxes OCR Mock Indicator -->
 <div class="mt-3 bg-primary-fixed/40 text-on-primary-fixed p-2 rounded flex items-center gap-2 text-left">
 <span class="material-symbols-outlined text-[16px]">visibility</span>
 <span class="font-label-sm text-label-sm">AI จับพิกัด 6 จุดตรวจจับ พร้อมค่าความเชื่อมั่น 99.4%</span>
 </div>
 </div>
 <!-- Carousel / Queue in Batch -->

 </div>
 </div>
 <!-- RIGHT PANEL (7 Columns): Editable OCR Data Form -->
 <div class="lg:col-span-7 flex flex-col gap-6">
 <!-- AI OCR Status Toast Banner -->

 <!-- Main Interactive Verification Form Card -->
 <div class="bg-surface-container-lowest p-6 rounded-xl shadow-md flex flex-col gap-6">
 <!-- Field 1: Transaction Type Segmented Toggle -->
 <div>
 <label class="block font-label-md text-label-md font-semibold text-on-surface mb-2">
            ประเภทรายการ (Transaction Type) <span class="text-error">*</span>
 </label>
 <div class="grid grid-cols-3 gap-2 bg-surface-container-low p-1.5 rounded-lg">
 <button class="py-2 px-3 rounded-md font-label-md text-label-md font-semibold bg-primary text-on-primary shadow-sm flex items-center justify-center gap-2 transition-all" id="type-expense" type="button">
 <span class="material-symbols-outlined text-[18px]">arrow_outward</span>
              รายจ่าย (Expense)
            </button>
 <button class="py-2 px-3 rounded-md font-label-md text-label-md font-semibold text-on-surface-variant hover:bg-surface-container flex items-center justify-center gap-2 transition-all" id="type-income" type="button">
 <span class="material-symbols-outlined text-[18px]">call_received</span>
              รายรับ (Income)
            </button>
 <button class="py-2 px-3 rounded-md font-label-md text-label-md font-semibold text-on-surface-variant hover:bg-surface-container flex items-center justify-center gap-2 transition-all" id="type-transfer" type="button">
 <span class="material-symbols-outlined text-[18px]">sync_alt</span>
              โอนย้าย (Transfer)
            </button>
 </div>
 </div>
 <!-- Field 2 & 3: Amount & Date Time In Grid -->
 <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
 <!-- Amount Highlighted -->
 <div class="md:col-span-6 flex flex-col">
 <div class="flex items-center justify-between mb-1.5">
 <label class="font-label-md text-label-md font-semibold text-on-surface flex items-center gap-1.5" for="amount">
                จำนวนเงินสุทธิ (Amount)
                <span class="w-2 h-2 rounded-full bg-[#00A950]" title="ตรวจพบความถูกต้องสูง"></span>
 </label>
 <span class="font-label-sm text-label-sm text-primary font-semibold">THB (บาท)</span>
 </div>
 <div class="relative">
 <span class="absolute left-3.5 top-1/2 -translate-y-1/2 font-title-lg text-title-lg font-bold text-primary">฿</span>
 <input class="w-full pl-8 pr-4 py-3 bg-surface-container-low text-on-surface font-headline-md text-headline-md font-bold rounded-lg focus:bg-surface-container-lowest focus:outline-none shadow-inner" id="amount" type="text" value="1,450.00">
 </div>
 </div>
 <!-- Date & Time -->
 <div class="md:col-span-6 flex flex-col">
 <div class="flex items-center justify-between mb-1.5">
 <label class="font-label-md text-label-md font-semibold text-on-surface flex items-center gap-1.5" for="datetime">
                วันและเวลาที่ทำรายการ (Timestamp)
                <span class="w-2 h-2 rounded-full bg-[#00A950]"></span>
 </label>
 <span class="font-label-sm text-label-sm text-on-surface-variant">Auto OCR</span>
 </div>
 <div class="relative">
 <span class="material-symbols-outlined absolute left-3.5 top-1/2 -translate-y-1/2 text-outline text-[20px]">calendar_today</span>
 <input class="w-full pl-11 pr-4 py-3 bg-surface-container-low text-on-surface font-body-md text-body-md font-semibold rounded-lg focus:bg-surface-container-lowest focus:outline-none" id="datetime" type="text" value="24 ต.ค. 2567, 14:32 น.">
 </div>
 </div>
 </div>
 <!-- Field 4 & 5: Sender and Beneficiary Accounts -->
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <!-- Sender Bank -->
 <div class="bg-surface-container-low p-4 rounded-lg flex flex-col gap-2">
 <div class="flex items-center justify-between">
 <span class="font-label-sm text-label-sm text-on-surface-variant font-semibold">บัญชีต้นทาง (Sender Account)</span>
 <span class="bg-[#e8f7ee] text-[#0e5b1d] font-label-sm text-label-sm font-semibold px-2 py-0.5 rounded">KBANK</span>
 </div>
 <div class="flex items-center gap-2.5">
 <div class="w-8 h-8 rounded-lg bg-[#00A950] text-white flex items-center justify-center font-bold text-sm shrink-0">
                K+
              </div>
 <div class="flex flex-col">
 <span class="font-body-md text-body-md font-semibold text-on-surface">บัญชีหลัก บจก. สลิปเลดเจอร์</span>
 <span class="font-body-sm text-body-sm text-on-surface-variant">เลขที่: xxx-x-x1234-x</span>
 </div>
 </div>
 </div>
 <!-- Receiver / Beneficiary -->
 <div class="bg-surface-container-low p-4 rounded-lg flex flex-col gap-2">
 <div class="flex items-center justify-between">
 <span class="font-label-sm text-label-sm text-on-surface-variant font-semibold">ผู้รับเงิน / ร้านค้า (Receiver)</span>
 <span class="bg-tertiary-fixed text-on-tertiary-fixed font-label-sm text-label-sm font-semibold px-2 py-0.5 rounded">PromptPay</span>
 </div>
 <div class="flex items-center gap-2.5">
 <div class="w-8 h-8 rounded-lg bg-tertiary text-white flex items-center justify-center shrink-0">
 <span class="material-symbols-outlined text-[18px]">storefront</span>
 </div>
 <div class="flex flex-col">
 <span class="font-body-md text-body-md font-semibold text-on-surface">บริษัท ออฟฟิศ ดีโป้ (ไทยแลนด์) จำกัด</span>
 <span class="font-body-sm text-body-sm text-on-surface-variant">ID: 0105559874123</span>
 </div>
 </div>
 </div>
 </div>
 <!-- Field 6: Smart Expense Category with AI suggestion badge -->
 <div>
 <div class="flex items-center justify-between mb-1.5">
 <label class="font-label-md text-label-md font-semibold text-on-surface flex items-center gap-2" for="category-select">
              หมวดหมู่ค่าใช้จ่าย (Expense Category) <span class="text-error">*</span>
 <span class="bg-primary-fixed text-on-primary-fixed font-label-sm text-label-sm px-2 py-0.2 rounded-full flex items-center gap-1 font-semibold">
 <span class="material-symbols-outlined text-[14px]">psychology</span> AI แนะนำ
              </span>
 </label>
 <button class="font-label-sm text-label-sm text-primary hover:underline font-semibold" type="button">+ เพิ่มหมวดหมู่ใหม่</button>
 </div>
 <div class="relative">
 <select class="w-full bg-surface-container-low text-on-surface pl-4 pr-10 py-3 rounded-lg font-body-md text-body-md appearance-none focus:outline-none focus:bg-surface-container-lowest" id="category-select">
 <option selected="" value="stationery">📁 ค่าเครื่องเขียนและอุปกรณ์สำนักงาน (Office Supplies &amp; Stationery)</option>
 <option value="marketing">📢 ค่าการตลาดและโฆษณา (Marketing &amp; Advertising)</option>
 <option value="utility">💡 ค่าสาธารณูปโภคและไฟฟ้า (Utilities)</option>
 <option value="travel">🚕 ค่าเดินทางและพาหนะ (Travel &amp; Logistics)</option>
 <option value="meals">🍱 ค่าอาหารและรับรองลูกค้า (Meals &amp; Entertainment)</option>
 <option value="maintenance">🔧 ค่าซ่อมแซมและบำรุงรักษา (Repairs &amp; Maintenance)</option>
 </select>
 <span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant pointer-events-none text-[20px]">expand_more</span>
 </div>
 </div>
 <!-- Field 7: Tags & Projects -->
 <div>
 <label class="block font-label-md text-label-md font-semibold text-on-surface mb-1.5">
            แท็กและโครงการ (Tags &amp; Project Allocations)
          </label>
 <div class="flex flex-wrap items-center gap-2">
 <span class="bg-surface-container-high text-on-surface px-3 py-1.5 rounded-full font-label-md text-label-md flex items-center gap-1.5">
              #เบิกค่าใช้จ่ายบริษัท
              <button aria-label="Remove tag" class="hover:text-error transition-colors" type="button"><span class="material-symbols-outlined text-[16px]">close</span></button>
 </span>
 <span class="bg-surface-container-high text-on-surface px-3 py-1.5 rounded-full font-label-md text-label-md flex items-center gap-1.5">
              #บิลภาษี
              <button aria-label="Remove tag" class="hover:text-error transition-colors" type="button"><span class="material-symbols-outlined text-[16px]">close</span></button>
 </span>
 <span class="bg-surface-container-high text-on-surface px-3 py-1.5 rounded-full font-label-md text-label-md flex items-center gap-1.5">
              #สาขาสยาม
              <button aria-label="Remove tag" class="hover:text-error transition-colors" type="button"><span class="material-symbols-outlined text-[16px]">close</span></button>
 </span>
 <button class="bg-surface-container hover:bg-surface-container-high text-on-surface-variant px-3 py-1.5 rounded-full font-label-md text-label-md flex items-center gap-1 transition-colors" type="button">
 <span class="material-symbols-outlined text-[16px]">add</span>
              เพิ่มแท็ก
            </button>
 </div>
 </div>
 <!-- Field 8: Reference No & Duplicate Check Badge -->
 <div>
 <div class="flex items-center justify-between mb-1.5">
 <label class="font-label-md text-label-md font-semibold text-on-surface" for="ref-no">
              รหัสอ้างอิงสลิป (Bank Transaction Reference)
            </label>
 <span class="flex items-center gap-1 text-[#004638] font-label-sm text-label-sm font-semibold bg-primary-fixed/40 px-2 py-0.5 rounded">
 <span class="material-symbols-outlined text-[14px]">check_circle</span>
              ไม่พบรายการซ้ำในระบบ (Unique Slip)
            </span>
 </div>
 <div class="relative">
 <input class="w-full bg-surface-container-low text-on-surface font-body-md text-body-md pl-4 pr-10 py-2.5 rounded-lg focus:outline-none focus:bg-surface-container-lowest font-mono" id="ref-no" type="text" value="20241024KB0987654321">
 <button class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-outline hover:text-on-surface text-[18px]" title="คัดลอกรหัสอ้างอิง" type="button">
              content_copy
            </button>
 </div>
 </div>
 <!-- Field 9: Notes -->
 <div>
 <label class="block font-label-md text-label-md font-semibold text-on-surface mb-1.5" for="note">
            บันทึกช่วยจำ (Accounting Note / Memo)
          </label>
 <textarea class="w-full bg-surface-container-low text-on-surface p-3 rounded-lg font-body-md text-body-md focus:outline-none focus:bg-surface-container-lowest" id="note" placeholder="ระบุรายละเอียดเพิ่มเติมเพื่อใช้อ้างอิงการจัดทำภาษี..." rows="2">ซื้อกระดาษพิมพ์เอกสาร หมึกเครื่องพิมพ์ A4 ใบเสร็จเบิกงวดสิ้นเดือน บจก. ออฟฟิศ ดีโป้</textarea>
 </div>
 <!-- Field 10: VAT 7% Toggle Switch -->
 <div class="flex items-center justify-between bg-surface-container-low p-4 rounded-lg">
 <div class="flex items-center gap-3">
 <div class="w-9 h-9 rounded-lg bg-surface-container flex items-center justify-center text-primary">
 <span class="material-symbols-outlined text-[20px]">receipt</span>
 </div>
 <div class="flex flex-col">
 <span class="font-title-md text-title-md font-semibold text-on-surface">ต้องการขอใบกำกับภาษีเต็มรูป (VAT 7%)</span>
 <span class="font-body-sm text-body-sm text-on-surface-variant">ระบบจะเตรียมจัดสรรภาษีซื้อ (Input VAT ฿94.86) เข้าสู่แฟ้มรายงาน ภ.พ.30</span>
 </div>
 </div>
 <label class="relative inline-flex items-center cursor-pointer">
 <input checked="" class="sr-only peer" type="checkbox">
 <div class="w-11 h-6 bg-secondary-container peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
 </label>
 </div>
 <!-- Confirmation Action Bar -->
 <div class="pt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
 <div class="flex items-center gap-2 w-full sm:w-auto">
 <button class="w-full sm:w-auto px-4 py-2.5 rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface-variant font-label-md text-label-md font-semibold transition-colors" type="button">
              ยกเลิก / ละทิ้งสลิปนี้
            </button>
 <button class="w-full sm:w-auto px-4 py-2.5 rounded-lg bg-surface-container hover:bg-surface-container-high text-on-surface font-label-md text-label-md font-semibold flex items-center justify-center gap-1 transition-colors" type="button">
 <span class="">ข้ามไปใบถัดไป</span>
 <span class="material-symbols-outlined text-[18px]">skip_next</span>
 </button>
 </div>
 <div class="flex items-center gap-3 w-full sm:w-auto justify-end">
 <button class="w-full sm:w-auto px-6 py-3 rounded-lg bg-primary hover:bg-primary-container text-on-primary hover:text-on-primary-container font-label-lg text-label-lg font-semibold shadow-md flex items-center justify-center gap-2 transition-all" id="btn-save-record" type="button">
 <span class="material-symbols-outlined text-[20px]">check_circle</span>
 <span class="">ยืนยันและบันทึกข้อมูล (Save)</span>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 <!-- Interactive JavaScript Handling Tabs and Notification Feedback -->
 <script>
    (function() {
      // Toggle Transaction Types
      const btnExpense = document.getElementById('type-expense');
      const btnIncome = document.getElementById('type-income');
      const btnTransfer = document.getElementById('type-transfer');

      function setActiveType(activeBtn) {
        [btnExpense, btnIncome, btnTransfer].forEach(btn => {
          btn.className = 'py-2 px-3 rounded-md font-label-md text-label-md font-semibold text-on-surface-variant hover:bg-surface-container flex items-center justify-center gap-2 transition-all';
        });
        activeBtn.className = 'py-2 px-3 rounded-md font-label-md text-label-md font-semibold bg-primary text-on-primary shadow-sm flex items-center justify-center gap-2 transition-all';
      }

      if (btnExpense && btnIncome && btnTransfer) {
        btnExpense.addEventListener('click', () => setActiveType(btnExpense));
        btnIncome.addEventListener('click', () => setActiveType(btnIncome));
        btnTransfer.addEventListener('click', () => setActiveType(btnTransfer));
      }

      // Save confirmation micro-feedback
      const saveBtn = document.getElementById('btn-save-record');
      if (saveBtn) {
        saveBtn.addEventListener('click', () => {
          const originalHTML = saveBtn.innerHTML;
          saveBtn.innerHTML = '<span class="material-symbols-outlined text-[20px] animate-spin">progress_activity</span> บันทึกสำเร็จแล้ว...';
          saveBtn.classList.add('opacity-90');
          setTimeout(() => {
            saveBtn.innerHTML = '<span class="material-symbols-outlined text-[20px]">task_alt</span> บันทึกเรียบร้อย!';
            setTimeout(() => {
              saveBtn.innerHTML = originalHTML;
              saveBtn.classList.remove('opacity-90');
            }, 1800);
          }, 600);
        });
      }
    })();
  </script>
 </div></main></div>

 </body></html>
No results found