@suphark/ui 0.1.0

package/src/components/design-system/sections/showcase-overlays-navigation.tsx

@@ -0,0 +1,479 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@suphark/ui/components/ui/alert-dialog";
+import { Badge } from "@suphark/ui/components/ui/badge";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@suphark/ui/components/ui/breadcrumb";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@suphark/ui/components/ui/card";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@suphark/ui/components/ui/context-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@suphark/ui/components/ui/dialog";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@suphark/ui/components/ui/drawer";
+import { Field, FieldGroup, FieldLabel } from "@suphark/ui/components/ui/field";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@suphark/ui/components/ui/hover-card";
+import { Input } from "@suphark/ui/components/ui/input";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from "@suphark/ui/components/ui/menubar";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@suphark/ui/components/ui/pagination";
+import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@suphark/ui/components/ui/resizable";
+import { Separator } from "@suphark/ui/components/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@suphark/ui/components/ui/sheet";
+import { Textarea } from "@suphark/ui/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@suphark/ui/components/ui/tooltip";
+import {
+  Building,
+  Compass,
+  FileCheck,
+  Filter,
+  HelpCircle,
+  Layers,
+  Share2,
+  ShieldAlert,
+  Trash2,
+} from "lucide-react";
+
+export function ShowcaseOverlaysNavigation() {
+  return (
+    <TooltipProvider>
+      <div className="flex flex-col gap-8">
+        {/* Section Header */}
+        <div className="flex flex-col gap-1">
+          <div className="flex items-center gap-2">
+            <Badge variant="outline">Overlays & Navigation</Badge>
+            <span className="text-xs text-muted-foreground">
+              Dialogs, Sheets, Drawers, Menus, Breadcrumbs, Tabs & Resizable Panels
+            </span>
+          </div>
+          <h2 className="text-xl font-bold tracking-tight text-foreground">
+            หน้าต่างซ้อนและการนำทาง (Overlays & Navigation)
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Modal Dialogs ที่รองรับ Screen Reader อย่างสมบูรณ์, การจัดการ Destructive Confirmation,
+            และระบบนำทางหลายระดับ
+          </p>
+        </div>
+
+        {/* Modal Overlays & Drawers */}
+        <div className="grid gap-6 lg:grid-cols-2">
+          {/* Dialog & AlertDialog */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base flex items-center gap-2">
+                <ShieldAlert className="size-4 text-primary" /> Dialogs & Consequence Confirmations
+              </CardTitle>
+              <CardDescription className="text-xs">
+                ใช้ <code>Dialog</code> สำหรับแบบฟอร์มแก้ไข และใช้ <code>AlertDialog</code>{" "}
+                สำหรับการยืนยันการลบ
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-wrap items-center gap-3">
+              {/* Standard Form Dialog */}
+              <Dialog>
+                <DialogTrigger render={<Button variant="default" />}>เปิด Form Dialog</DialogTrigger>
+                <DialogContent className="sm:max-w-md">
+                  <DialogHeader>
+                    <DialogTitle>แก้ไขข้อมูลแพ็กเกจจัดซื้อ</DialogTitle>
+                    <DialogDescription>ระบุข้อมูลเพื่อส่งต่อให้คณะกรรมการจัดซื้อพิจารณาอนุมัติ</DialogDescription>
+                  </DialogHeader>
+                  <FieldGroup className="py-2">
+                    <Field>
+                      <FieldLabel htmlFor="dlg-pkg-name">ชื่อแพ็กเกจ</FieldLabel>
+                      <Input id="dlg-pkg-name" defaultValue="งานจัดซื้อโครงสร้างเหล็กอาคาร 1" />
+                    </Field>
+                    <Field>
+                      <FieldLabel htmlFor="dlg-memo">บันทึกเหตุผลความจำเป็น</FieldLabel>
+                      <Textarea
+                        id="dlg-memo"
+                        rows={2}
+                        defaultValue="จำเป็นต้องเร่งเปิดซองราคาเนื่องจากราคาเหล็กเส้นมีแนวโน้มปรับตัวขึ้น"
+                      />
+                    </Field>
+                  </FieldGroup>
+                  <DialogFooter showCloseButton>
+                    <Button type="submit">บันทึกการเปลี่ยนแปลง</Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+
+              {/* Destructive AlertDialog */}
+              <AlertDialog>
+                <AlertDialogTrigger render={<Button variant="destructive" />}>
+                  เปิด Destructive AlertDialog
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>ยืนยันการยกเลิกแพ็กเกจจัดซื้อนี้?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      การกระทำนี้ไม่สามารถย้อนกลับได้ เอกสารเสนอราคา ใบเปรียบเทียบราคา
+                      และประวัติการตรวจสอบทั้งหมดจะถูกเก็บถาวรและไม่สามารถเสนอราคาซ้ำได้
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>ยกเลิก</AlertDialogCancel>
+                    <AlertDialogAction variant="destructive">ยืนยันการยกเลิกแพ็กเกจ</AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </CardContent>
+          </Card>
+
+          {/* Sheet & Drawer */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base flex items-center gap-2">
+                <Layers className="size-4 text-primary" /> Side Sheets & Bottom Drawers
+              </CardTitle>
+              <CardDescription className="text-xs">
+                ใช้ <code>Sheet</code> สำหรับแผงฟิลเตอร์ด้านข้าง และ <code>Drawer</code> สำหรับมุมมองมือถือ
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-wrap items-center gap-3">
+              {/* Side Sheet */}
+              <Sheet>
+                <SheetTrigger render={<Button variant="outline" className="gap-2" />}>
+                  <Filter className="size-4" />
+                  เปิด Filter Sheet
+                </SheetTrigger>
+                <SheetContent side="right" className="w-full sm:max-w-sm">
+                  <SheetHeader>
+                    <SheetTitle>ตัวกรองข้อมูลจัดซื้อ (Filters)</SheetTitle>
+                    <SheetDescription>กรองตามสถานะ, วงเงินงบประมาณ และรายชื่อผู้รับเหมา</SheetDescription>
+                  </SheetHeader>
+                  <div className="flex flex-col gap-4 py-4">
+                    <Field>
+                      <FieldLabel>สถานะแพ็กเกจ</FieldLabel>
+                      <Input placeholder="เช่น Approved, Review..." />
+                    </Field>
+                    <Field>
+                      <FieldLabel>วงเงินต่ำสุด - สูงสุด</FieldLabel>
+                      <Input placeholder="1,000,000 - 10,000,000" />
+                    </Field>
+                  </div>
+                  <SheetFooter>
+                    <Button className="w-full">นำตัวกรองไปใช้</Button>
+                  </SheetFooter>
+                </SheetContent>
+              </Sheet>
+
+              {/* Bottom Drawer */}
+              <Drawer>
+                <DrawerTrigger render={<Button variant="outline" className="gap-2" />}>
+                  <Compass className="size-4" />
+                  เปิด Bottom Drawer
+                </DrawerTrigger>
+                <DrawerContent>
+                  <div className="mx-auto w-full max-w-sm">
+                    <DrawerHeader>
+                      <DrawerTitle>สรุปรายละเอียดผู้รับเหมา</DrawerTitle>
+                      <DrawerDescription>คะแนนประเมินผลงานย้อนหลัง 12 เดือนล่าสุด</DrawerDescription>
+                    </DrawerHeader>
+                    <div className="p-4 flex flex-col gap-2 text-xs">
+                      <div className="flex justify-between border-b pb-2">
+                        <span>ส่งมอบตรงเวลา (On-Time Delivery)</span>
+                        <span className="font-semibold text-emerald-600">96.5%</span>
+                      </div>
+                      <div className="flex justify-between border-b pb-2">
+                        <span>มาตรฐานคุณภาพวัสดุ (Quality Pass Rate)</span>
+                        <span className="font-semibold text-emerald-600">98.2%</span>
+                      </div>
+                    </div>
+                    <DrawerFooter>
+                      <DrawerClose render={<Button variant="outline" />}>ปิดหน้าต่าง</DrawerClose>
+                    </DrawerFooter>
+                  </div>
+                </DrawerContent>
+              </Drawer>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Popovers, Tooltips & Context Menus */}
+        <div className="grid gap-6 lg:grid-cols-2">
+          {/* Popover & Tooltip */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Tooltips, HoverCard & Popovers</CardTitle>
+              <CardDescription className="text-xs">คำอธิบายเพิ่มเติมและเนื้อหาแบบบริบท</CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-wrap items-center gap-4">
+              {/* Tooltip */}
+              <Tooltip>
+                <TooltipTrigger render={<Button variant="outline" size="sm" className="gap-1.5" />}>
+                  <HelpCircle className="size-3.5" />
+                  ชี้เพื่อดู Tooltip
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p className="text-xs">สูตรคำนวณราคากลาง = Median(Q1..Q3) หลังตัดค่า Outlier</p>
+                </TooltipContent>
+              </Tooltip>
+
+              {/* HoverCard */}
+              <HoverCard>
+                <HoverCardTrigger
+                  render={<Button variant="ghost" size="sm" className="gap-1.5 underline" />}
+                >
+                  <Building className="size-3.5" />
+                  Hover เพื่อดูข้อมูลคู่ค้า
+                </HoverCardTrigger>
+                <HoverCardContent className="w-80">
+                  <div className="flex justify-between space-x-4">
+                    <div className="space-y-1">
+                      <h4 className="text-xs font-semibold">Alpha Cement Co., Ltd.</h4>
+                      <p className="text-xs text-muted-foreground">
+                        ผู้ผลิตและจัดจำหน่ายปูนซีเมนต์และวัสดุก่อสร้างชั้นนำในประเทศไทย
+                      </p>
+                      <div className="flex items-center pt-2">
+                        <Badge variant="outline" className="text-xs">
+                          Tier-1 Vendor
+                        </Badge>
+                      </div>
+                    </div>
+                  </div>
+                </HoverCardContent>
+              </HoverCard>
+
+              {/* Popover */}
+              <Popover>
+                <PopoverTrigger render={<Button variant="outline" size="sm" />}>
+                  เปิด Popover
+                </PopoverTrigger>
+                <PopoverContent className="w-64">
+                  <div className="flex flex-col gap-2">
+                    <h4 className="font-medium text-xs">ตัวช่วยการประเมินราคา</h4>
+                    <p className="text-xs text-muted-foreground">
+                      สามารถส่งออกตารางเปรียบเทียบในรูปแบบ Excel หรือ PDF เพื่อเข้าที่ประชุม
+                    </p>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </CardContent>
+          </Card>
+
+          {/* Menubar & ContextMenu */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Menubar & Context Menu</CardTitle>
+              <CardDescription className="text-xs">
+                เมนูบาร์สำหรับระบบบริหารจัดการ และคลิกขวาในพื้นที่ตาราง
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-4">
+              {/* Menubar */}
+              <Menubar className="w-fit">
+                <MenubarMenu>
+                  <MenubarTrigger className="text-xs">แฟ้มข้อมูล (File)</MenubarTrigger>
+                  <MenubarContent>
+                    <MenubarItem className="text-xs">
+                      สร้างแพ็กเกจใหม่ <MenubarShortcut>⌘N</MenubarShortcut>
+                    </MenubarItem>
+                    <MenubarItem className="text-xs">
+                      ส่งออกรายงาน BOQ <MenubarShortcut>⌘E</MenubarShortcut>
+                    </MenubarItem>
+                    <MenubarSeparator />
+                    <MenubarItem className="text-xs">
+                      พิมพ์ตารางเปรียบเทียบ <MenubarShortcut>⌘P</MenubarShortcut>
+                    </MenubarItem>
+                  </MenubarContent>
+                </MenubarMenu>
+                <MenubarMenu>
+                  <MenubarTrigger className="text-xs">ตัวกรอง (View)</MenubarTrigger>
+                  <MenubarContent>
+                    <MenubarItem className="text-xs">แสดงเฉพาะรายการที่ยังไม่อนุมัติ</MenubarItem>
+                    <MenubarItem className="text-xs">ซ่อนรายการที่ถูกปฏิเสธ</MenubarItem>
+                  </MenubarContent>
+                </MenubarMenu>
+              </Menubar>
+
+              {/* ContextMenu Area */}
+              <ContextMenu>
+                <ContextMenuTrigger className="flex h-20 w-full items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground bg-muted/20">
+                  คลิกขวาในกรอบนี้เพื่อทดสอบ Context Menu
+                </ContextMenuTrigger>
+                <ContextMenuContent className="w-48">
+                  <ContextMenuItem className="text-xs gap-2">
+                    <FileCheck className="size-3.5" /> ตรวจสอบเอกสาร
+                  </ContextMenuItem>
+                  <ContextMenuItem className="text-xs gap-2">
+                    <Share2 className="size-3.5" /> ส่งต่อผู้ตรวจสอบ
+                  </ContextMenuItem>
+                  <ContextMenuSeparator />
+                  <ContextMenuItem className="text-xs gap-2 text-destructive">
+                    <Trash2 className="size-3.5" /> ลบรายการ
+                  </ContextMenuItem>
+                </ContextMenuContent>
+              </ContextMenu>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Navigation & Resizable Layout */}
+        <div className="grid gap-6 lg:grid-cols-2">
+          {/* Breadcrumb & Pagination */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Breadcrumbs & Pagination</CardTitle>
+              <CardDescription className="text-xs">
+                ลำดับชั้นของหน้าและตัวแบ่งหน้าสำหรับตารางข้อมูล
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-6">
+              {/* Breadcrumb */}
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem>
+                    <BreadcrumbLink href="#">ระบบจัดซื้อ (Procurement)</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                    <BreadcrumbLink href="#">โครงการอาคารศูนย์การแพทย์</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>แพ็กเกจงานโครงสร้างและสถาปัตย์</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+
+              <Separator />
+
+              {/* Pagination */}
+              <Pagination className="mx-0 justify-start">
+                <PaginationContent>
+                  <PaginationItem>
+                    <PaginationPrevious href="#" />
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationLink href="#" isActive>
+                      1
+                    </PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationLink href="#">2</PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationLink href="#">3</PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationEllipsis />
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationNext href="#" />
+                  </PaginationItem>
+                </PaginationContent>
+              </Pagination>
+            </CardContent>
+          </Card>
+
+          {/* Resizable Panels */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Resizable Layout Panels</CardTitle>
+              <CardDescription className="text-xs">
+                แบ่งพื้นที่หน้าจอระหว่างตารางรายการและรายละเอียดแบบลากปรับขนาดได้
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="h-36 rounded-md border overflow-hidden">
+                <ResizablePanelGroup>
+                  <ResizablePanel defaultSize={40} minSize={25}>
+                    <div className="flex h-full items-center justify-center p-3 text-xs font-medium bg-muted/30">
+                      รายชื่อแพ็กเกจ (40%)
+                    </div>
+                  </ResizablePanel>
+                  <ResizableHandle withHandle />
+                  <ResizablePanel defaultSize={60} minSize={30}>
+                    <div className="flex h-full items-center justify-center p-3 text-xs font-medium bg-card">
+                      รายละเอียด BOQ & เอกสารแนบ (60%)
+                    </div>
+                  </ResizablePanel>
+                </ResizablePanelGroup>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </TooltipProvider>
+  );
+}