ก่อนขึ้นเว็บ ผมขอไล่ดูให้ทั่วอีกที

ขอดูสภาพปัจจุบันก่อนเริ่ม R008 ให้หน่อย ขอดูงานที่เหลือของ R008 หน่อย รับทราบครับ เดิน R008 ต่อ และรวบตรวจรับทีเดียวตอนจบ เริ่ม S1/S2 ก่อน — เปิด dev server แล้วตรวจ 3 ขนาดจอ จอ 375 หน้า items ผ่าน (ไม่มี scroll แนวนอน) — เช็กจออื่นต่อ ครบ 8 จอที่ 375 ไม่มี overflow — เช็ก 768 กับ 1280 ต่อ SW ทำงานแล้ว — ตรวจแคชแล้วลองปิดเซิร์ฟเวอร์เพื่อพิสูจน์ออฟไลน์ R008 เสร็จแล้วครับ — AI ตรวจผ่าน รอคุณตรวจรับทีเดียวรวม R005–R007 ตามที่ตกลง สรุปงานรอบนี้

• S1 Responsive — ของเดิมผ่าน ไม่ต้องแก้: เทสเบราว์เซอร์จริง 375 (8/8 จอ overflow 0), 768 (การ์ด 2 คอลัมน์ เมนูแถวบน), 1280 (เมนูซ้าย 240px เนื้อหา 960 กลางจอ) · ปุ่มที่เห็นทั้งหมดสูง ≥44px
• S2 ภาษา/สี — ของเดิมผ่าน ไม่ต้องแก้: ข้อความผู้ใช้เป็นไทยหมด ป้ายเหลือง/แดงมีวันที่คู่สีเสมอ
• S3 PWA/ออฟไลน์ — ของใหม่: public/manifest.webmanifest + ไอคอนโถเขียววาดมือ (192/512/maskable/apple-touch 180) + public/sw.js แคช app shell + ต่อ manifest/theme-color ใน index.html + ลงทะเบียน SW เฉพาะบิลด์จริงใน src/main.js

หลักฐานเด็ด: ดับเซิร์ฟเวอร์แล้วเปิด #/shopping ยังแสดงจอครบด้วยข้อมูลจากเครื่อง — ออฟไลน์ได้จริง ไม่ใช่แค่ทฤษฎี ตรวจรับ (ติ๊กใน 02-result.md):

1. เปิด 375/768/1280 ทำภารกิจหลักครบ ไม่มี scroll แนวนอน
2. เพิ่มลงโฮมได้ เปิดจากไอคอนเต็มจอ (ต้องผ่าน HTTPS — รอ R009 หรือลอง vite preview ในเครื่อง)
3. ปิดเน็ตแล้วยังดูข้อมูลได้
4. ย้อนตรวจ R005 (ปรับจำนวน/ย้าย/undo), R006 (ป้ายเหลืองแดง/สรุปตอนเปิด), R007 (สมุดโน้ตต้องซื้อ)

npm test 82/82 ผ่าน · npm run build ผ่าน · ไฟล์ที่แตะมีแค่ index.html, src/main.js, public/, docs/work/R008/ — ไม่แตะโค้ดฟีเจอร์เดิม ถัดไปคือ R009 Deploy ขึ้น Cloudflare Pages (HTTPS จะทำให้ PWA ติดตั้งได้เต็มรูป) — จะให้เริ่มเลยไหมตรวจซ้ำไฟล์สุดท้ายกับสิ่งที่ส่งมอบ R008 ปิดครบ ตรวจซ้ำสุดท้ายแล้ว — สรุปผลการตรวจ: ยืนยันแล้ว (มีหลักฐาน)

• 01-plan.md + 02-result.md เขียนครบ รวมเช็กลิสต์ตรวจรับ R005–R007 ที่รอไว้ด้วย
• npm test 82/82 ผ่าน (รันหลังแก้ไฟล์ครบ ไม่มีการแก้โค้ดหลังเทสต์)
• npm run build ผ่าน · dist/ มี manifest + sw.js + icons ครบ
• Responsive: 375 (8/8 จอ overflow 0), 768 (การ์ด 2 คอลัมน์), 1280 (เมนูซ้าย 240px) — วัดในเบราว์เซอร์จริง
• PWA: manifest JSON valid · PNG 4 ไฟล์ header ถูกต้อง · SW active + แคช 6 ไฟล์ · ดับเซิร์ฟเวอร์แล้วยังเปิด #/shopping ได้พร้อมข้อมูล (ออฟไลน์จริง)
• ไฟล์สุดท้าย (index.html, src/main.js) ตรงตามที่ออกแบบ · สคริปต์ปั่นไอคอนลบแล้ว · ไม่มี process ค้าง

รันไม่ได้ / เป็นข้อจำกัด (ไม่ใช่ผลพลาด)

• การติดตั้งลงโฮมจริง + เปิดเต็มจอจากไอคอน: ต้องใช้ HTTPS บนมือถือจริง ทำได้ตอน R009 (Cloudflare Pages)
• ปุ่มรีเซ็ต/seed/เกณฑ์ 1 วินาที: ไม่ได้รันซ้ำรอบนี้ เพราะ R008 ไม่แตะโค้ดส่วนนั้น (ผลตรวจเดิมจาก R005–R007 ยังมีผล)

เหลือแค่คุณตรวจรับตามเช็กลิสต์ใน 02-result.md แล้วบอกให้เริ่ม R009 Deploy ได้เลย

ขอถามรายละเอียดก่อน เลือกแบบร่างยอดก่อนบันทึก — ลงมือแก้ stepper ใน src/views/items.js บันทึกได้ ยอดเปลี่ยน 4→2 พร้อม toast undo — ลองยกเลิกกับเช็ก overflow เสร็จแล้วครับ — ปุ่ม +/− ไม่เปลี่ยนยอดทันทีอีกต่อไป พฤติกรรมใหม่ (แก้เฉพาะ src/views/items.js)

• กด +/−/ใช้หมดแล้ว → เปลี่ยนแค่ตัวเลขบนการ์ด พร้อมโน้ตบอก เช่น จะเปลี่ยน 4 → 2 ถ้วย สต็อกจริงยังไม่ขยับ
• มีแถว บันทึก / ยกเลิก โผล่ใต้ stepper · กดบันทึกถึงตัดสต็อกจริงทีเดียว (ลดแบบ FEFO / เพิ่มเข้าล็อตเดิม / เป็น 0 เข้ามุมใช้หมดแล้ว + toast undo ขั้นเดียวเหมือนเดิม)
• แก้กลับเท่าเดิมหรือกดยกเลิก แถวบันทึกหาย · ติดลบไม่ได้ (ล็อกที่ 0)

ตรวจแล้ว

• npm test 82/82 ผ่าน · npm run build ผ่าน
• เบราว์เซอร์จริงจอ 375: ลดโยเกิร์ต 4→2 + บันทึก (ยอดเปลี่ยน มี undo) · เพิ่มข้าวสาร + ยกเลิก (กลับเท่าเดิม) · ใช้หมดแล้ว น้ำปลา + บันทึก (หลุดจากรายการ มี undo) · มีแถวบันทึกโผล่ก็ไม่มี scroll แนวนอน
• บันทึกการเปลี่ยนไว้ท้าย 02-result.md แล้ว

ลองเล่นดูก่อนได้ครับ ถ้าอยากปรับต่อ เช่น ให้โน้ตแสดงผลต่างแบบอื่น หรืออยากให้ปุ่มบันทึกอยู่ตำแหน่งอื่น บอกได้เลย ตรวจสุดท้ายครบ — สรุป: ยืนยันแล้ว

• src/views/items.js: +/−/ใช้หมดแล้ว เป็นร่างยอดบนจอ + แถวบันทึก/ยกเลิก · บันทึกครั้งเดียวตัดสต็อกจริง (FEFO/ล็อตเดิม/เข้ามุม) + undo ขั้นเดียว · ไม่มีฟังก์ชันตาย (mutate/setLotQuantity ถูกถอดเกลี้ยง)
• npm test 82/82 ผ่าน · npm run build ผ่าน (รันหลังแก้โค้ด ไม่มีแก้โค้ดหลังจากนั้น)
• เบราว์เซอร์จริง 375px: บันทึกลด 4→2 / ยกเลิกเพิ่ม / บันทึกใช้หมดแล้ว — ผ่านทั้ง 3 ทาง · overflow 0 ขณะแถวบันทึกโผล่
• บันทึกการเปลี่ยนไว้ใน 02-result.md §6 · dev server ปิดแล้ว

รันไม่ได้ / ข้อจำกัด

• ไม่มี — ไม่มีการข้ามเทสต์หรือผ่อนปรน assertion ใด ๆ (เทสต์ชั้นข้อมูล 82 ตัวไม่ต้องแก้เพราะพฤติกรรมชั้นข้อมูลไม่เปลี่ยน)

พร้อมให้ตรวจรับบนจอจริงได้เลย

เสร็จแล้วครับ — หน้า "ต้องซื้อ" เลือกชื่อจากของเดิมได้แล้ว ที่ทำ (แก้เฉพาะ src/views/shopping.js)

• พิมพ์ ≥2 ตัวอักษร → มี chip ชื่อ Product ที่ตรงให้แตะ (แบบเดียวกับจอเพิ่มของ เรียง ก-ฮ สูงสุด 5 ชื่อ ซ่อนชื่อที่มีในรายการแล้ว)
• แตะ chip แล้วแค่กรอกข้อความลงช่องให้ ยังไม่เพิ่ม — ต้องกดเพิ่ม/Enter เองอีกที
• ไม่ผูกสต็อกเหมือนเดิม: ลองเพิ่ม นมสด 1 ลิตร เข้ารายการ ของในสต็อกยัง 1 กล่อง เท่าเดิม (OQ-15 ไม่เปลี่ยน)

ตรวจแล้ว: npm test 82/82 ผ่าน · เบราว์เซอร์จริงทั้งทางพิมพ์-แตะ-เพิ่ม · dev server ปิดแล้ว ตรวจสุดท้ายครบ — สรุป: ยืนยันแล้ว

• src/views/shopping.js ฉบับสุดท้ายถูกต้อง: chip เติมข้อความอย่างเดียว ไม่เรียก stock mutation ใด ๆ (import เพิ่มแค่ listProducts ไว้อ่านชื่อ)
• npm test 82/82 ผ่าน · npm run build ผ่าน (รันหลังแก้ไฟล์นี้โดยตรง)
• เบราว์เซอร์จริง: พิมพ์ "นมสด" → chip ขึ้น → แตะ → เพิ่ม → อยู่ในรายการ 3 ชิ้น · สต็อกนมสดยัง 1 กล่อง (ไม่ผูกกันตาม OQ-15)

รันไม่ได้ / ข้อจำกัด

• ไม่มี — ไม่มีการข้ามหรือผ่อนปรนเช็กใด ๆ

ตอบตรง ๆ: ตอนนี้หน้า ใกล้หมดอายุ (#/expiring) ทำอะไรไม่ได้เลยครับ เป็นจออ่านอย่างเดียว — เห็นแถวละ 1 ล็อต (ชื่อ · จำนวน · จุดเก็บ · ป้ายวันที่) แยกกลุ่มหมดอายุแล้ว/ใกล้หมดอายุ แต่ไม่มีปุ่มใด ๆ ถ้าจะจัดการของ เช่น ของหมดอายุแล้วอยากกด "ใช้หมดแล้ว" ทิ้ง หรือลดจำนวน ต้องย้อนไปหาใบการ์ดที่ #/items เอง — ซึ่งไม่สะดวกจริง โดยเฉพาะของแดงที่ควรรีบเคลียร์ ผมแนะนำให้ติดปุ่มจัดการบนแถวนั้นเลยครับ

จัดให้แล้วครับ — หน้าใกล้หมดอายุไม่ต้องย้อนไปไหนแล้ว ที่ทำ (แก้ src/views/expiring.js + CSS 1 กฎ)

• ทุกแถว (ทั้งกลุ่มแดงและเหลือง) มีปุ่ม − / ตัวเลข / + ปรับทีละล็อต และปุ่ม ใช้หมดแล้ว อยู่ในแถวเลย ปุ่มขึ้นบรรทัดใหม่เต็มแถวไม่เบียดชื่อ
• ลดถึง 0 หรือกดใช้หมดแล้ว → หลุดจากจอนี้เข้ามุมใช้หมดแล้วทันที + มี toast ย้อนกลับ ขั้นเดียวเหมือนจอรายการ

ลองแล้วที่จอ 375: กดใช้หมดแล้วที่ผักกาดขาว (ของแดง) หลุดจากจอ + undo ได้ · ลบโยเกิร์ต 4→3 ได้ · ไม่มี scroll แนวนอน npm test 82/82 · build ผ่าน · จดไว้ใน 02-result.md แล้ว ตรวจสุดท้ายครบ — สรุป: ยืนยันแล้ว

• src/views/expiring.js ฉบับสุดท้ายถูกต้อง: ปุ่ม −/+/ใช้หมดแล้ว ทีละล็อตผ่าน setLotQuantity + undo ขั้นเดียว · import ครบ (on, setLotQuantity, undo, toast, ValidationError) ไม่มีของขาด/เกิน
• npm test 82/82 ผ่าน · npm run build ผ่าน (รันหลังแก้ไฟล์นี้ หลังจากนั้นแตะแค่ docs)
• เบราว์เซอร์จริง 375px: ใช้หมดแล้วผักกาดขาวหลุดจากจอ + toast undo · ลบโยเกิร์ต 4→3 · overflow 0

รันไม่ได้ / ข้อจำกัด

• ไม่มี — ไม่มีการข้ามหรือผ่อนปรนเช็กใด ๆ

มีเหตุผลนะ 5555 — และข่าวดีคือชั้นข้อมูลเตรียมที่ไว้ให้แล้ว: movement มี type discard แยกจาก out (ใช้) และมี discardProduct + เทสต์ไว้ตั้งแต่ R005 แต่จอไม่เคยเรียกใช้เลย ตอนนี้ทุกอย่างที่หายไปถูกบันทึกเป็น "ใช้" หมด ของหมดอายุที่ทิ้งถังขยะก็โดนนับว่า "ใช้หมด" ด้วย ติดอยู่นิดเดียว: จอ "ใช้หมดแล้ว" ทุกวันนี้ไม่อ่านประวัติ movement เลยแยกไม่ออกว่าอันไหนทิ้งอันไหนใช้ ถ้าจะทำปุ่มทิ้งให้มีความหมายต้องแตะ 2 จุด

ข้อมูลมีครบแล้ว เหลือแค่จอแสดงผล — ประวัติทุกครั้งถูกเก็บใน movement หมด (in รับเข้า · out หยิบใช้ · discard ทิ้ง · adjust แก้ยอด · restore นำกลับ มีวันเวลาและยอดหลังทำทุกแถว) แค่ยังไม่มีจอไหนอ่านมาโชว์เลย ขอเช็กขอบเขตก่อนทำ

ถ้าให้ผมออกแบบ — ไม่ต้องเพิ่มเมนูใหม่ครับ เมนูมี 7 รายการอยู่แล้ว แน่นพอดีจอ ผมเสนอแบบนี้: 1. ประวัติรายของ — ซ่อนไว้ใต้การ์ด #/items (ที่หลัก)

• ใต้ใบการ์ดมีลิงก์/ปุ่มเล็ก ๆ ว่า "ดูประวัติ" กดแล้วกางไทม์ไลน์ย้อนหลังของสินค้านั้น (เช่น 12 ต.ค. รับเข้า +4 → 14 ต.ค. หยิบใช้ −1 → 15 ต.ค. ทิ้ง −3)
• อยู่ตรงบริบทของของชิ้นนั้นเลย ไม่ต้องจำชื่อแล้วไปค้นอีกจอ · ไม่กางตั้งแต่แรก การ์ดไม่รก คนส่วนใหญ่ไม่ดูประวัติทุกวันอยู่แล้ว

2. มุม "ใช้หมดแล้ว" — เพิ่มคำบอกเหตุผล (ของแถมชิ้นเล็ก)

• แถวที่เคยมีแค่ชื่อ+วันที่ เติมป้ายว่า ทิ้ง หรือ ใช้หมด (อ่านจาก movement ตัวสุดท้ายของล็อต) — ตอบคำถามรอบก่อนเรื่องปุ่มทิ้งไปในตัว ถ้ามีปุ่มทิ้งเมื่อไหร่ ประวัติก็แยกได้ทันทีไม่ต้องรื้อจอ

ทำไมไม่เอาหน้า "ประวัติรวม" แยกอีกจอ: บ้านเดียวดูทีละของเป็นหลัก ไทม์ไลน์รวมทั้งบ้านมีประโยชน์น้อยกว่า แต่เสียเมนูไป 1 ช่อง + ต้องทำตัวกรองเพิ่ม งานใหญ่กว่าแต่ใช้น้อยกว่า ถ้าโอเค ผมทำ 2 ชิ้นนี้เลย (ประมาณ: listMovements({productId}) มีแล้ว แค่ปั้น UI + ข้อความไทยของแต่ละ type) — ยืนยันมาได้เลย

เห็นด้วยครับ การ์ดตอนนี้แน่นจริง — นับปุ่มบนการ์ดล็อตเดียว: −, +, ใช้หมดแล้ว, ย้ายไปจุดเก็บ…, บันทึก, ยกเลิก = 6 ปุ่ม แถมของหลายล็อตมีปุ่มย้ายทุกแถวอีก ปัญหาคือทุกปุ่มตะโกนเท่ากันหมด ทั้งที่ความถี่ใช้ต่างกันมาก ผมเสนอจัดระเบียบแบบนี้ (ไม่ตัดฟีเจอร์ แค่จัดลำดับ):

┌ ผักกาดขาว              [ป้ายแดง] ┐
│ 1 หัว · ตะกร้าผัก-ผลไม้ · วัตถุดิบ │
│ ───────────────────────────── │
│  [−]  1  [+]        ← พระเอกตัวเดียวที่โชว์ตลอด
│ ───────────────────────────── │
│  ⋯ จัดการ / ดูประวัติ          ← กดแล้วค่อยกาง
└────────────────────────────────┘

หลักการ 3 ข้อ:

1. โชว์แค่สิ่งที่ทำทุกวัน — ปรับจำนวน (±) คือกิจวัตรประจำ อยู่เด่นตัวเดียวพร้อมร่างยอด+บันทึกเหมือนเดิม
2. ของทำนาน ๆ ครั้งซ่อนหลัง "⋯ จัดการ" — ใช้หมดแล้ว · ย้ายจุดเก็บ · ดูประวัติ กดกางออกมาเป็นแถวเดียว ไม่รกสายตาคนที่แค่อยากดูว่าบ้านมีอะไร
3. ของอันตรายแยกชั้น — ใช้หมดแล้ว/ทิ้ง (ถ้ามี) อยู่ในชั้นที่ต้องกางก่อน + ผ่านดราฟต์บันทึกอีกที กดพลาดยากขึ้นสองชั้น

ผลพลอยได้: ที่ว่างที่ได้คืนมาเอาไปวางไทม์ไลน์ประวัติ (ที่เพิ่งตกลงกัน) ใต้ชั้นจัดการได้พอดี ไม่ต้องยัดเพิ่ม ถ้าโอเค ผมรื้อการ์ดตามนี้เลย + ย้ายปุ่มย้ายรายล็อตให้ไปอยู่โหมดเดียวกัน (กด "ย้าย" ทีนึงค่อยเลือกปลายทางทีละล็อต แทนปุ่มย้ายทุกแถว) — ยืนยันมาได้เลย

ดีครับ — activity set ชัดเจน + ซ่อนตามบริบท ผมต่อยอดเป็นตารางกฎแบบนี้:

มี 2 จุดที่ผมอยากเบรกนิดนึง:

1. ไอคอนล้วนประหยัดที่จริง แต่เสี่ยงไม่รู้เรื่อง — เกณฑ์ 4.2 สั่งว่าข้อความต้องเข้าใจทันที และผู้ใช้คือคนทั้งบ้าน (รวมคนที่ไม่คุ้นไอคอน) ผมเสนอ compromise: ไอคอน + คำสั้นภาษาไทย (⇄ ย้าย ✓ บันทึก 🗑 ทิ้ง) ปุ่มยังกะทัดรัดลงเยอะ แต่ไม่ต้องเดา ส่วน aria-label ใส่เต็มประโยคเหมือนเดิมให้โปรแกรมอ่านหน้าจอ
2. "ทิ้ง" กับ "ใช้หมดแล้ว" ต้องแยกประวัติให้ชัด — ทั้งคู่จบที่ยอด 0 เหมือนกัน แต่ movement ต่างกัน (discard vs out) ไม่งั้นป้ายเหตุผลในมุมใช้หมดแล้วที่คุยกันไว้แยกไม่ได้

สรุปชุด activity ต่อการ์ด = − / + (พระเอก) + แถวไอคอน ⇄ ✓ 🗑 ⛔ (โผล่เฉพาะตัวที่ใช้ได้) + ประวัติพับใต้การ์ด — ถ้าโอเคผมลงมือเลย รวมปุ่มทิ้ง (เขียน discardLot ระดับล็อตใน db + เทสต์) ทีเดียว

อ่านแบบเทสต์กับ helper ที่มีก่อน เสร็จครบชุดครับ — การ์ดรื้อใหม่ทุกที่ พฤติกรรมเหมือนกัน activity set ใหม่ (ไอคอน + คำสั้นไทย มี aria-label เต็มให้โปรแกรมอ่านจอ)

• พระเอกตัวเดียวที่โชว์ตลอด: stepper −/+ (ร่างยอดก่อนบันทึกเหมือนเดิม)
• แถวกิจกรรม: ⇄ ย้าย 🗑 ทิ้ง ⛔ หมดแล้ว 📜 ประวัติ — ซ่อนตามบริบท (ย้ายโผล่เมื่อมีจุดอื่นให้ไป · บันทึก/ยกเลิกโผล่เฉพาะมีร่างค้าง)
• จอต้องใช้ก่อนใช้ชุดเดียวกัน (เว้นย้ายกับประวัติไว้ที่จอรายการตามตารางที่ตกลง)

ของใหม่

• ปุ่มทิ้ง: discardLot ระดับล็อตใน db เขียนประวัติ discard แยกจาก "ใช้" + undo ได้ · ทิ้งทั้งสินค้าจากการ์ด หรือทีละล็อตก็ได้
• ประวัติใต้การ์ด: กด 📜 กางไทม์ไลน์ (ใหม่สุดก่อน — วัน · รับเข้า/หยิบใช้/ทิ้ง/ปรับยอด/นำกลับ · คงเหลือ)
• มุมใช้หมดแล้ว: ป้าย ทิ้ง (แดง) / ใช้หมด (จาง) อ่านจากประวัติ ไม่ต้องเก็บฟิลด์เพิ่ม

ตรวจแล้ว: npm test 84/84 (เทสต์ใหม่ 2 ตัว) · build ผ่าน · เบราว์เซอร์ 375: เปิดประวัติ · ทิ้งนมสด (+undo แล้วยอดไปโผล่มุมใช้หมดแล้วป้าย "ทิ้ง") · ลดโยเกิร์ตในจอ expiring + บันทึกตรวจสุดท้ายครบ — สรุป: ยืนยันแล้ว

• src/data/db.js: discardLot(lotId, quantity?) เขียน movement discard + จำยอดก่อนหมด + commit/notify ครบ
• src/data/db.test.js: เทสต์ใหม่ 2 ตัว (ทิ้งทั้งล็อต / บางส่วน + เคสผิด) — npm test 84/84 ผ่าน, npm run build ผ่าน (รันหลังแก้ซอร์สครบทุกไฟล์)
• src/ui/components.js: draftStepper/iconButton/historyTimeline ใช้ร่วม 2 จอจริง (items + expiring) ไม่มีโค้ดซ้ำ
• เบราว์เซอร์จริง 375px: เปิดประวัติ · ทิ้งทั้งสินค้า + undo · ป้าย "ทิ้ง/ใช้หมด" ในมุมใช้หมดแล้ว · ร่างยอด+บันทึกในจอ expiring · overflow 0
• การเปลี่ยนแปลงจดใน 02-result.md แล้ว

รันไม่ได้ / ข้อจำกัด

• ไม่มี — ไม่มีการข้ามหรือผ่อนปรนเช็กใด ๆ

No changes to existing files. เสร็จครับ — ตอนนี้ใบเดียวกันจริง ๆ ไม่ใช่แค่หน้าตาเหมือน ที่ทำ

• สกัด src/ui/product-card.js ใหม่: ย้าย productCard + ฟอร์มย้าย + เรียงการ์ด + toast-undo ออกจาก items.js ทั้งก้อน (ไม่เปลี่ยนพฤติกรรม) รับ state ผ่าน createCardState() จอละตัว
• items.js เหลือแค่ค้น/กรอง/เรียง · expiring.js เหลือแค่จัดกลุ่มแดง/เหลือง + เรียงตามวัน — การ์ดเรียกใบเดียวกัน
• ผลพลอยได้: จอต้องใช้ก่อนได้ย้ายจุดเก็บ + ประวัติไปด้วยฟรี (จากที่เคยไม่มี)

ตรวจแล้ว: npm test 84/84 · build ผ่าน · 375px ทั้งสองจอ: items การ์ดครบ 8 ใบ (ร่างบันทึกซ่อนทุกใบ) · expiring เป็นกลุ่มการ์ดเต็ม เปิดฟอร์มย้ายแล้วยกเลิกได้ · overflow 0ตรวจสุดท้ายครบ — สรุป: ยืนยันแล้ว

• src/ui/product-card.js (ใหม่): productCard + sortForDisplay + createCardState ย้ายจาก items ทั้งก้อน พฤติกรรมเดิม
• src/views/items.js: เหลือค้น/กรอง/เรียง เรียกการ์ดกลาง · src/views/expiring.js: เหลือจัดกลุ่มแดง/เหลือง เรียกการ์ดกลางใบเดียวกัน
• npm test 84/84 · npm run build ผ่าน (รันหลังแก้ซอร์สครบ หลังจากนั้นแตะแค่ docs)
• เบราว์เซอร์จริง 375px: items การ์ด 8 ใบ (ร่างบันทึกซ่อนทุกใบ) · expiring กลุ่มแดง/เหลืองเป็นการ์ดเต็ม เปิดฟอร์มย้าย + ยกเลิกได้ · overflow 0 ทั้งสองจอ

รันไม่ได้ / ข้อจำกัด

• ไม่มี — ไม่มีการข้ามหรือผ่อนปรนเช็กใด ๆ

เสร็จครับ กวาดปุ่มทั้งแอปแล้ว pattern เดียวที่ใช้ทุกจอ

ที่แก้: ปุ่มกิจกรรมเหลือ ⛔ หมด (aria-label ยังบอกเต็มว่าใช้หมดแล้ว) · เก็บตกปุ่ม btn เปลือย 3 ตัวในจอตั้งค่า → ghost · ชื่อเมนู/หัวมุม/ประวัติยังใช้คำเต็ม "ใช้หมดแล้ว" (เป็นชื่อมุม ไม่ใช่ปุ่ม action) ตรวจแล้ว: npm test 84/84 · build ผ่าน · เปิดจอจริงเห็น ⛔ หมด บนการ์ด + ปุ่มตั้งค่าเป็น ghost ครบตรวจสุดท้ายครบ — สรุป: ยืนยันแล้ว

• src/ui/product-card.js: ปุ่มกิจกรรมเป็น ⛔ หมด (aria-label เต็มเหมือนเดิม)
• src/views/settings.js: ปุ่มเปลือย 3 ตัว → btn btn-ghost ครบ (เช็กแล้วไม่มี class: 'btn'} เหลือในซอร์ส)
• npm test 84/84 · npm run build ผ่าน (รันหลังแก้ครบ)
• เบราว์เซอร์จริง: การ์ดแสดง ⛔ หมด · ปุ่มจอตั้งค่าเป็น ghost ครบ

รันไม่ได้ / ข้อจำกัด

• ไม่มี — ไม่มีการข้ามหรือผ่อนปรนเช็กใด ๆ

เสร็จครับ — ตอนนี้แถว stepper เป็น − 3 + ✓ ✕ แถวเดียวจบ ที่เปลี่ยน (draftStepper ใน components — มีผลทั้งจอรายการและจอต้องใช้ก่อนพร้อมกัน)

• ✓/✕ ย้ายจากแถวล่างขึ้นไปต่อหลังตัวเลข เหลือโน้ต จะเปลี่ยน 2 → 3 ไว้ใต้แถวอย่างเดียว
• ✓/✕ เป็นปุ่มจัตุรัส 44px เท่าปุ่ม −/+ (pattern ปุ่มกิจกรรมเดียวกัน · ความหมายอยู่ใน aria-label + โน้ตกำกับ ไม่ใช่ไอคอนลอย ๆ)

ตรวจแล้ว: npm test 84/84 · build ผ่าน · จอ 375 แถวเดียวไม่ล้น (ปุ่มที่โชว์กว้าง 44px พอดี) · กด ✓ บันทึกข้าวสาร 2→3 ได้ปกติตรวจสุดท้ายครบ — สรุป: ยืนยันแล้ว

• src/ui/components.js (draftStepper): ✓/✕ อยู่ในแถว stepper ต่อหลังตัวเลข (− 3 + ✓ ✕) โผล่เฉพาะมีร่างค้าง · โน้ตผลลัพธ์อยู่ใต้แถว · มีผลทั้งจอรายการและจอต้องใช้ก่อน (component กลาง)
• src/styles/main.css: ปุ่มจัตุรัส 44px เท่าปุ่ม −/+ · กฎเก่าที่เลิกใช้ลบแล้ว
• npm test 84/84 · npm run build ผ่าน (รันหลังแก้ครบ)
• เบราว์เซอร์จริง 375px: แถวเดียวไม่ล้น · ปุ่มที่โชว์กว้าง 44px · กด ✓ บันทึกข้าวสาร 2→3 สำเร็จ

รันไม่ได้ / ข้อจำกัด

• ไม่มี — ไม่มีการข้ามหรือผ่อนปรนเช็กใด ๆ

เสร็จครับ — ฟอร์มย้ายใช้ pattern เดียวกับส่วนอื่นแล้ว ที่เปลี่ยน (moveForm ใน product-card — มีผลทุกที่ที่ใช้) Dropdown:* เดิม select เปลือยลูกศรเบราว์เซอร์ → ตอนนี้ห่อ .field.field-inline มีป้ายชื่อด้านบน + ลูกศรวาดเอง .select-chevron เหมือน dropdown ตัวกรองจอรายการเป๊ะ *ช่องจำนวน:* เดิม input เปลือย → ตอนนี้มีป้าย จำนวนที่ย้าย (มี 2 ถุง) เหมือน field ในฟอร์มเพิ่มของ *ปุ่ม: ย้าย (primary) + ยกเลิก (ghost) ใน .form-row เหมือนฟอร์ม inline ที่อื่น (คลาสเดิมอยู่แล้ว แค่ตอนนี้บริบทรอบข้างเหมือนกันเลยดูเป็นชุดเดียว) ตรวจแล้ว: เปิดฟอร์มที่จอ 375 หน้าตาตรงกัน · กดยกเลิกได้ปกติ · npm test 84/84 · build ผ่านตรวจสุดท้ายครบ — สรุป: ยืนยันแล้ว

• src/ui/product-card.js (moveForm): dropdown ห่อ .field.field-inline + ป้าย + .select-chevron (ชุดเดียวกับตัวกรองจอรายการ) · ช่องจำนวนมีป้าย + ใช้สไตล์ .field input (ชุดเดียวกับฟอร์มเพิ่มของ) · ปุ่มย้าย/ยกเลิก primary/ghost ใน .form-row (ชุดเดียวกับฟอร์ม inline ที่อื่น)
• npm test 84/84 · npm run build ผ่าน (รันหลังแก้ครบ)
• เบราว์เซอร์จริง 375px: เปิดฟอร์มย้ายเห็นป้าย+ลูกศร+ปุ่มตรง pattern · กดยกเลิกปิดได้ปกติ · dev server ปิดแล้ว

รันไม่ได้ / ข้อจำกัด

• ไม่มี — ไม่มีการข้ามหรือผ่อนปรนเช็กใด ๆ

เสร็จครบ 3 เรื่องครับ 1. ใช้หมดแล้ว + ต้องซื้อเป็นการ์ดแล้ว — เลิกใช้แถว item-row ทั้งสองจอ เหลือโครง card-top (ชื่อ+ป้าย) · card-meta · card-actions เหมือนการ์ดสินค้า (ปุ่มซื้อแล้วเป็น primary เต็ม ✓ ซื้อแล้ว คู่ลบ ghost) 2. จุดเก็บ/หมวดหมู่ภาษาเดียวกับการ์ดสินค้า — ปุ่มเป็นไอคอนชุดเดียวกัน: ✏️ แก้ชื่อ (ghost) · ⏸ พักใช้ (danger คงสีเดิม) / ▶️ เปิดใช้ (primary) 3. dropdown ฟอร์มย้ายที่แปลก — ผมเปิดดูเองเจอแล้ว: ป้ายฟิลด์เป็นวลีกริยา ย้าย "โยเกิร์ต" ไปจุดเก็บ วางทับกับค่าที่เลือกในกล่อง (ช่องแช่แข็ง) เลยอ่านงงว่าบรรทัดไหนคือคำถาม บรรทัดไหนคือคำตอบ เปลี่ยนป้ายเป็นคำนาม จุดเก็บปลายทาง ตรง pattern dropdown ช่องอื่นแล้ว (ป้าย = ชื่อฟิลด์, กล่อง = ค่าที่เลือก) ตรวจแล้ว: เปิดดูจริง 4 จอ (used-up/shopping/locations/categories) · ฟอร์มย้ายป้ายถูก + มี chevron + overflow 0 · npm test 84/84 · build ผ่านตรวจสุดท้ายครบ — สรุป: ยืนยันแล้ว

• src/views/used-up.js + src/views/shopping.js: แถว item-row → article.card (card-top/card-meta/card-actions) ครบทั้งสองจอ
• src/views/locations.js + src/views/categories.js: ปุ่มไอคอน ✏️ แก้ชื่อ/⏸ พักใช้/▶️ เปิดใช้ สี variant เดิม · src/ui/components.js: iconButton รองรับ danger
• src/ui/product-card.js: ป้าย dropdown ฟอร์มย้ายเป็น จุดเก็บปลายทาง
• เปิดดูจริง 4 จอ + ฟอร์มย้าย (ป้ายถูก มี chevron overflow 0) · npm test 84/84 · npm run build ผ่าน (รันหลังแก้ครบ)

รันไม่ได้ / ข้อจำกัด

• ไม่มี — ไม่มีการข้ามหรือผ่อนปรนเช็กใด ๆ

เสร็จครับ — ตอนนี้ 1 การ์ด = 1 ล็อต ทั้งแอป ที่เปลี่ยน

• lotCard ใบละล็อต: ป้ายวันหมดอายุของล็อตนั้น · ยอด+จุดเก็บ+หมวด · stepper/ย้าย/ทิ้ง/หมด/ประวัติจัดการล็อตนั้นตรง ๆ ไม่ต้องเดาว่าโดนล็อตไหน
• จอรายการ: กรองจุดเก็บ/หมวดหมู่ + ค้นชื่อ/หมายเหตุระดับล็อต (เกณฑ์เดียวกับของเดิม) เรียงแดง→เหลือง→ที่เหลือเหมือนเดิม
• จอต้องใช้ก่อน: แสดงเฉพาะล็อตที่ต้องใช้ แยกกลุ่มแดง/เหลืองเหมือนเดิม

โบนัส: โยเกิร์ต 2 ล็อตแยกเป็น 2 ใบอัตโนมัติ · ฟอร์มย้ายที่เคยเป็น li ใต้การ์ดกลายเป็น div ถูกต้องตาม HTML แล้ว ตรวจแล้ว: การ์ด 8 ใบ · กรองตู้เย็นเหลือ 3 · ค้น ยาย เจอข้าวสาร (เกณฑ์ US-002 ครบ) · ร่าง+บันทึกระดับล็อต + undo · npm test 84/84 · build ผ่านตรวจสุดท้ายครบ — สรุป: ยืนยันแล้ว

• src/ui/product-card.js: lotCard(lot, product, …) ใบละ 1 ล็อต (ป้าย/ยอด/จุดเก็บของล็อตนั้น · stepper/ย้าย/ทิ้ง/หมด/ประวัติระดับล็อต) + sortLotCards เรียงแดง→เหลือง→ที่เหลือ
• src/views/items.js: กรอง/ค้นหาระดับล็อตเกณฑ์เดียวกับ filterStockRows เดิม · src/views/expiring.js: เฉพาะล็อตที่ต้องใช้ แยกกลุ่มแดง/เหลือง
• เบราว์เซอร์จริง 375px: การ์ด 8 ใบ · กรองตู้เย็นเหลือ 3 · ค้น ยาย เจอข้าวสาร · ร่าง+บันทึกระดับล็อต + undo · overflow 0
• npm test 84/84 · npm run build ผ่าน (รันหลังแก้ครบ)

รันไม่ได้ / ข้อจำกัด

• ไม่มี — ไม่มีการข้ามหรือผ่อนปรนเช็กใด ๆ

เสร็จครับ เจอต้นตอทั้งสองจุดแล้ว 1. ลูกศรซ้อนสองอัน — ใช่ CSS ครับ: กฎ appearance: none (ซ่อนลูกศรเบราว์เซอร์) อยู่ใน selector .filter-row select อย่างเดียว พอฟอร์มย้ายเอาโครงเดียวกันไปใช้ใน .inline-form ลูกศรเดิมเลยไม่โดนซ่อน → ซ้อนกับลูกศรวาดเอง แก้โดยขยายกฎคลุม .inline-form select เหลือลูกศรเดียว เปิดดูแล้วหายจริง 2. ฟอร์มนำกลับอาการเดียวกัน — ช่องจำนวนเป็น input เปลือยไม่มีป้ายเหมือนกัน จับห่อ .field + ป้าย จำนวนที่นำกลับ (หน่วย) แล้ว ลองกดนำกลับเนยจืดกลับเข้าสต็อกได้ปกติ ตรวจแล้ว: เปิดดูฟอร์มย้าย (ลูกศรเดียว) + ฟอร์มนำกลับ (มีป้าย) ที่ 375 · npm test 84/84 · build ผ่านตรวจสุดท้ายครบ — สรุป: ยืนยันแล้ว

• src/styles/main.css: กฎซ่อนลูกศรเบราว์เซอร์คลุม .inline-form select แล้ว (สาเหตุลูกศรซ้อน) — เปิดดูฟอร์มย้ายเหลือลูกศรเดียวจริง
• src/views/used-up.js: ช่องจำนวนห่อ .field + ป้าย จำนวนที่นำกลับ (หน่วย) — เปิดดู + กดนำกลับเนยจืดกลับสต็อกสำเร็จ
• npm test 84/84 · npm run build ผ่าน (รันหลังแก้ครบ) · dev server ปิดแล้ว

รันไม่ได้ / ข้อจำกัด

• ไม่มี — ไม่มีการข้ามหรือผ่อนปรนเช็กใด ๆ

ตรวจครั้งสุดท้ายเสร็จ — ผ่านหมดครับ ✅ ผลตรวจรอบนี้

• เทสต์ + บิลด์: 84/84 ผ่าน · build ผ่าน · dist/ ครบ (JS/CSS + manifest + sw + icons)
• ครบ 8 จอที่ 375: items 8 ใบ · add · locations 5 · categories 4 · expiring แดง 1/เหลือง 2 · used-up 2 · shopping 2 · settings — overflow 0 ทุกจอ · console ไม่มี error
• 768/1280: การ์ด 2 คอลัมน์ · เมนูซ้าย · overflow 0
• ความเร็ว: เรนเดอร์จอแรก 131 ms (เกณฑ์ 1 วิ)
• ภารกิจหลักครบวงจร: เพิ่มของ → ปรับ/ย้าย/ทิ้ง/หมด + undo → นำกลับจากใช้หมดแล้ว → ทางลัดชื่อ (ไม่ผูกสต็อก)

งาน R008 + ส่วนปรับปรุงที่ขอเพิ่มมาทั้งหมด (ร่างยอด, ประวัติ, ทิ้ง, การ์ดใบละล็อต, ปุ่ม pattern เดียว) รวมอยู่ใน 02-result.md แล้ว เหลือแค่คุณติ๊กตรวจรับ — รายการที่รอติ๊กรวม R005–R007 อยู่ในไฟล์เดียวกัน ถัดไปที่ค้างคือ R009 Deploy ขึ้น Cloudflare Pages (ได้ HTTPS → PWA ติดตั้งเต็มรูป) บอกได้เลยเมื่อพร้อมตรวจสุดท้ายครบ — สรุปสถานะส่งมอบ: ยืนยันแล้ว (รอบตรวจครั้งสุดท้าย)

• npm test 84/84 · npm run build ผ่าน · dist/ ครบ (JS/CSS/manifest/sw/icons 5 ไฟล์)
• ครบ 8 เส้นทางที่ 375px: overflow 0 ทุกจอ · console ไม่มี error · เรนเดอร์จอแรก 131ms (เกณฑ์ 1000ms)
• 768px (การ์ด 2 คอลัมน์) และ 1280px (เมนูซ้าย 240px): overflow 0
• ภารกิจหลักครบวงจรบนเบราว์เซอร์จริง: เพิ่ม/ปรับ/ย้าย/ทิ้ง/หมด + undo/นำกลับ/ทางลัดชื่อ
• เอกสารตรวจรับรวม R005–R008 อยู่ใน docs/work/R008/02-result.md

รันไม่ได้ / ข้อจำกัด

• การติดตั้ง PWA ลงโฮม + เปิดเต็มจอจากไอคอน: ต้องใช้ HTTPS บนอุปกรณ์จริง ทำได้ตอน R009 Deploy (งานถัดไปที่ยังไม่เริ่ม)
• ไม่มีเช็กใดล้มเหลว ไม่มีการข้ามหรือผ่อนปรนเช็ก

ปิด R008 เรียบร้อยครับ ✅ ที่อัปเดต (เอกสารอย่างเดียว ไม่แตะโค้ด)

• R008/01-plan.md: ติ๊กครบ 7 task + 8 เกณฑ์ (รวมของ R005–R007)
• R005/R006/R007/R008 02-result.md: สถานะ → ปิดแล้ว 2026-10-17 (ตรวจรับรวมตอนจบ R008)
• ROADMAP.md: ตาราง R005–R008 → ปิดแล้ว + ติ๊ก DoD ที่จริงแล้ว (US-001…008 · NFR 4.1–4.4 · seed · ปุ่มรีเซ็ต) — เหลือค้างแค่ฝั่ง R009 (HTTPS/deploy + ติดตั้ง PWA จริง)

สถานะตอนนี้: R001–R008 ปิดครบ เหลือ R009 Deploy ตัวเดียว บอกได้เลยเมื่อพร้อมขึ้น Cloudflare Pages ตรวจสุดท้ายครบ — สรุป: ยืนยันแล้ว (แก้เอกสารอย่างเดียว ไม่แตะโค้ด จึงไม่ต้องรันเทสต์ซ้ำ)

• R008/01-plan.md: ติ๊กครบ 7 task + 8 เกณฑ์ตรวจรับ
• R005/R006/R007/R008 02-result.md: สถานะปิดแล้ว 2026-10-17 ครบทั้ง 4 ไฟล์
• ROADMAP.md: R005–R008 ปิดแล้ว + DoD ติ๊กเฉพาะข้อที่จริง (US, NFR 4.1–4.4, seed, รีเซ็ต)
• ไม่มีคำว่า "รอตรวจรับ" ค้างในรอบ R005–R008 แล้ว (ที่เหลือ 2 จุดเป็นบันทึกประวัติศาสตร์ใน R001)

รันไม่ได้ / ข้อจำกัด

• ไม่มี — เหลือ R009 Deploy เป็นงานถัดไปตามแผน