From 784ea62d51f2a2efc2971bd9fe084965f01eceb7 Mon Sep 17 00:00:00 2001 From: Thanakarn Klangkasame <77600906+Simulationable@users.noreply.github.com> Date: Thu, 9 Oct 2025 13:30:38 +0700 Subject: [PATCH] Reorder Orders Table --- src/app/(protected)/orders/page.tsx | 8 +- src/app/component/layout/AppShell.tsx | 105 +++++++++++++++++++++++++- 2 files changed, 105 insertions(+), 8 deletions(-) diff --git a/src/app/(protected)/orders/page.tsx b/src/app/(protected)/orders/page.tsx index f11d991..a404e3f 100644 --- a/src/app/(protected)/orders/page.tsx +++ b/src/app/(protected)/orders/page.tsx @@ -431,8 +431,8 @@ function defaultCell(v: unknown): ReactNode { const ALL_COLS: Column[] = [ { key: "id", labelTH: "ไอดี", groupTH: "เอกลักษณ์ & ช่องทาง" }, { key: "orderNo", labelTH: "เลขออเดอร์", groupTH: "เอกลักษณ์ & ช่องทาง" }, - { key: "orderRef", labelTH: "อ้างอิงภายใน", groupTH: "เอกลักษณ์ & ช่องทาง" }, { key: "channel", labelTH: "ช่องทาง", groupTH: "เอกลักษณ์ & ช่องทาง" }, + { key: "orderRef", labelTH: "อ้างอิงภายใน", groupTH: "เอกลักษณ์ & ช่องทาง" }, { key: "channelOrderId", labelTH: "เลขออเดอร์ช่องทาง", groupTH: "เอกลักษณ์ & ช่องทาง" }, { key: "marketplaceShopId", labelTH: "รหัสร้าน", groupTH: "เอกลักษณ์ & ช่องทาง" }, { key: "marketplaceShopName", labelTH: "ชื่อร้าน", groupTH: "เอกลักษณ์ & ช่องทาง" }, @@ -440,10 +440,10 @@ const ALL_COLS: Column[] = [ { key: "createdByEmail", labelTH: "อีเมลผู้เปิด", groupTH: "ผู้เปิดออเดอร์" }, { key: "createdById", labelTH: "รหัสผู้เปิด", groupTH: "ผู้เปิดออเดอร์" }, { key: "dateCreated", labelTH: "สร้างเมื่อ", groupTH: "วัน–เวลา", format: (v) => fmtDate(v as string | null | undefined) }, + { key: "dateDelivered", labelTH: "ถึงปลายทาง", groupTH: "วัน–เวลา", format: (v) => fmtDate(v as string | null | undefined) }, { key: "datePaid", labelTH: "ชำระเงิน", groupTH: "วัน–เวลา", format: (v) => fmtDate(v as string | null | undefined) }, { key: "datePacked", labelTH: "แพ็คของ", groupTH: "วัน–เวลา", format: (v) => fmtDate(v as string | null | undefined) }, { key: "dateShipped", labelTH: "ส่งของ", groupTH: "วัน–เวลา", format: (v) => fmtDate(v as string | null | undefined) }, - { key: "dateDelivered", labelTH: "ถึงปลายทาง", groupTH: "วัน–เวลา", format: (v) => fmtDate(v as string | null | undefined) }, { key: "dateCancelled", labelTH: "ยกเลิก", groupTH: "วัน–เวลา", format: (v) => fmtDate(v as string | null | undefined) }, { key: "customerId", labelTH: "รหัสลูกค้า", groupTH: "ลูกค้า" }, { key: "customerName", labelTH: "ชื่อลูกค้า", groupTH: "ลูกค้า" }, @@ -527,9 +527,9 @@ const DEFAULT_VISIBLE: ColumnKey[] = [ ]; const GROUPS: { titleTH: string; keys: ColumnKey[] }[] = [ - { titleTH: "เอกลักษณ์ & ช่องทาง", keys: ["id", "orderNo", "orderRef", "channel", "channelOrderId", "marketplaceShopId", "marketplaceShopName"] }, + { titleTH: "เอกลักษณ์ & ช่องทาง", keys: ["id", "orderNo", "channel", "orderRef", "channelOrderId", "marketplaceShopId", "marketplaceShopName"] }, { titleTH: "ผู้เปิดออเดอร์", keys: ["createdByName", "createdByEmail", "createdById"] }, - { titleTH: "วัน–เวลา", keys: ["dateCreated", "datePaid", "datePacked", "dateShipped", "dateDelivered", "dateCancelled"] }, + { titleTH: "วัน–เวลา", keys: ["dateCreated", "dateDelivered", "datePaid", "datePacked", "dateShipped", "dateCancelled"] }, { titleTH: "ลูกค้า", keys: ["customerId", "customerName", "customerEmail", "customerPhone"] }, { titleTH: "ที่อยู่จัดส่ง", keys: ["shippingName", "shippingPhone", "shippingAddressLine1", "shippingAddressLine2", "shippingSubdistrict", "shippingDistrict", "shippingProvince", "shippingPostcode", "shippingCountry"] }, { titleTH: "ออกใบเสร็จ/ภาษี", keys: ["billingName", "billingTaxId", "billingAddressLine1", "billingSubdistrict", "billingDistrict", "billingProvince", "billingPostcode", "billingCountry"] }, diff --git a/src/app/component/layout/AppShell.tsx b/src/app/component/layout/AppShell.tsx index 0cb253a..9d7cb34 100644 --- a/src/app/component/layout/AppShell.tsx +++ b/src/app/component/layout/AppShell.tsx @@ -1,6 +1,6 @@ "use client"; -import { ReactNode, useMemo, useState } from "react"; +import { ReactNode, useEffect, useMemo, useState } from "react"; import Link from "next/link"; import { usePathname } from "next/navigation"; import type { UserSession } from "@/types/auth"; @@ -9,7 +9,11 @@ type NavItem = { label: string; href: string; icon?: React.ReactNode; match?: Re type Props = { user: UserSession; nav: NavItem[]; children: ReactNode }; export default function AppShell({ user, nav, children }: Props) { + // เดสก์ท็อป: พับ/กางไซด์บาร์ const [sidebarOpen, setSidebarOpen] = useState(true); + // มือถือ: เปิด/ปิด drawer + const [mobileOpen, setMobileOpen] = useState(false); + const pathname = usePathname(); const initials = useMemo(() => { @@ -22,6 +26,23 @@ export default function AppShell({ user, nav, children }: Props) { const isActive = (item: NavItem): boolean => Boolean((item.match && item.match.test(pathname)) || pathname === item.href); + // ปิด drawer อัตโนมัติเมื่อเปลี่ยนหน้า + useEffect(() => { + setMobileOpen(false); + }, [pathname]); + + // ล็อกสกอลล์หน้าเมื่อ drawer เปิด (กันเลื่อนพื้นหลัง) + useEffect(() => { + const el = document.documentElement; + if (mobileOpen) { + const prev = el.style.overflow; + el.style.overflow = "hidden"; + return () => { + el.style.overflow = prev; + }; + } + }, [mobileOpen]); + return (
{/* Sidebar (desktop) */} @@ -91,14 +112,13 @@ export default function AppShell({ user, nav, children }: Props) { > {item.icon ?? } - {sidebarOpen && {item.label}} ); })} - {/* Subtle footer in sidebar */} + {/* Footer in sidebar */}
v1.0 • {year}
@@ -110,14 +130,27 @@ export default function AppShell({ user, nav, children }: Props) {
+ {/* ปุ่มมือถือ: เปิด/ปิด drawer */} + {/* (ทางเลือก) ปุ่มเดสก์ท็อป: พับ/กาง sidebar */} + +
Dashboard • @@ -154,6 +187,70 @@ export default function AppShell({ user, nav, children }: Props) {
+ + {/* Mobile drawer + backdrop */} + {mobileOpen && ( +