x

apps/admin/src/components/products/ProductOptionUxModal.tsx

@@ -0,0 +1,326 @@
+import React, { useState, useEffect } from 'react'
+import { 
+  X, 
+  Sparkles, 
+  LayoutGrid, 
+  ListFilter, 
+  Maximize2, 
+  Check, 
+  Loader2, 
+  SlidersHorizontal,
+  Info
+} from 'lucide-react'
+import { API_BASE, type Product } from '@homaroma/types'
+
+export type OptionDisplayType = 'auto' | 'pills' | 'dropdown' | 'modal'
+
+interface OptionConfig {
+  name: any
+  values: any[]
+  displayType?: OptionDisplayType
+}
+
+interface Props {
+  isOpen: boolean
+  product: Product | null
+  onClose: () => void
+  onSaveSuccess: (updatedProduct: Product) => void
+}
+
+function getOptionLabel(nameObj: any): string {
+  if (!nameObj) return 'Option'
+  if (typeof nameObj === 'string') return nameObj
+  return nameObj.th || nameObj.en || Object.values(nameObj)[0] || 'Option'
+}
+
+function getValueLabel(valObj: any): string {
+  if (!valObj) return ''
+  if (typeof valObj === 'string') return valObj
+  return valObj.th || valObj.en || Object.values(valObj)[0] || ''
+}
+
+const DISPLAY_OPTIONS: Array<{
+  type: OptionDisplayType
+  title: string
+  subtitle: string
+  icon: React.ComponentType<{ className?: string }>
+  badgeText: string
+  badgeColor: string
+}> = [
+  {
+    type: 'auto',
+    title: 'Auto (Smart Adaptive)',
+    subtitle: 'ระบบเลือกให้อัตโนมัติ: มี Swatch จะแสดงกล่องสี, ≤ 8 ตัวเลือกแสดงปุ่มกด, > 8 ตัวเลือกสลับเป็น Dropdown',
+    icon: Sparkles,
+    badgeText: 'แนะนำ',
+    badgeColor: 'bg-cyan-glow/15 text-cyan-glow border-cyan-glow/30'
+  },
+  {
+    type: 'pills',
+    title: '1. แบบเดิม (Pills / Swatches)',
+    subtitle: 'ปุ่มกดเรียงกันแบบ Flex-wrap ทุกตัวเลือก เหมาะกับตัวเลือกน้อย (2–8 ตัวเลือก เช่น Size S/M/L/XL)',
+    icon: LayoutGrid,
+    badgeText: 'ปุ่มกด',
+    badgeColor: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30'
+  },
+  {
+    type: 'dropdown',
+    title: '2. Searchable Dropdown',
+    subtitle: 'กล่อง Dropdown กะทัดรัด เมื่อคลิกจะกางเมนูพร้อมช่องค้นหา เหมาะกับตัวเลือกปานกลาง (10–30 ตัวเลือก)',
+    icon: ListFilter,
+    badgeText: 'Dropdown',
+    badgeColor: 'bg-amber-500/15 text-amber-400 border-amber-500/30'
+  },
+  {
+    type: 'modal',
+    title: '3. Modal Dialog / Bottom Sheet',
+    subtitle: 'ปุ่มกดเปิดหน้าต่าง Pop-up กลางจอ (Desktop) หรือ Bottom Sheet (Mobile) ค้นหาเต็มตา เหมาะกับตัวเลือกเยอะมาก (30–100+ ตัวเลือก)',
+    icon: Maximize2,
+    badgeText: 'Modal ค้นหา',
+    badgeColor: 'bg-purple-500/15 text-purple-400 border-purple-500/30'
+  }
+]
+
+export default function ProductOptionUxModal({ isOpen, product, onClose, onSaveSuccess }: Props) {
+  const [optionsConfig, setOptionsConfig] = useState<OptionConfig[]>([])
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!product) {
+      setOptionsConfig([])
+      return
+    }
+    const rawOptions = (product.options as any[]) || []
+    setOptionsConfig(
+      rawOptions.map(opt => ({
+        name: opt.name,
+        values: opt.values || [],
+        displayType: (opt.displayType as OptionDisplayType) || 'auto'
+      }))
+    )
+    setError(null)
+  }, [product, isOpen])
+
+  if (!isOpen || !product) return null
+
+  const handleTypeChange = (optIndex: number, type: OptionDisplayType) => {
+    setOptionsConfig(prev => {
+      const next = [...prev]
+      next[optIndex] = { ...next[optIndex], displayType: type }
+      return next
+    })
+  }
+
+  const handleSave = async () => {
+    try {
+      setSaving(true)
+      setError(null)
+
+      const payloadOptions = optionsConfig.map(opt => ({
+        name: opt.name,
+        values: opt.values,
+        displayType: opt.displayType
+      }))
+
+      const res = await fetch(`${API_BASE}/products/${product.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          options: payloadOptions
+        })
+      })
+
+      if (!res.ok) {
+        const errJson = await res.json().catch(() => ({}))
+        throw new Error(errJson.message || `บันทึกไม่สำเร็จ (Status ${res.status})`)
+      }
+
+      const data = await res.json()
+      const updatedProduct = data.product || { ...product, options: payloadOptions }
+      onSaveSuccess(updatedProduct)
+      onClose()
+    } catch (err: any) {
+      setError(err.message || 'เกิดข้อผิดพลาดในการบันทึก')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const rawName = product.name
+  const resolvedName = typeof rawName === 'string' ? rawName : (rawName?.th || rawName?.en || Object.values(rawName || {})[0] || '')
+  const productName = resolvedName || (product.brand?.name ? `${product.brand.name} Product` : `Product #${product.id}`)
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md animate-fade-in">
+      <div 
+        className="w-full max-w-2xl bg-night-900 border border-white/10 rounded-3xl p-6 shadow-2xl space-y-6 max-h-[90vh] overflow-y-auto custom-scrollbar"
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-start justify-between gap-4 pb-4 border-b border-white/10">
+          <div className="flex items-center gap-3">
+            <div className="p-3 rounded-2xl bg-cyan-glow/10 border border-cyan-glow/20 text-cyan-glow">
+              <SlidersHorizontal className="w-5 h-5" />
+            </div>
+            <div>
+              <h2 className="text-lg font-bold text-white flex items-center gap-2">
+                ตั้งค่ารูปแบบการเลือก Option (UX/UI Selector)
+              </h2>
+              <p className="text-xs text-slate-400 mt-0.5 line-clamp-1">
+                {productName}
+              </p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-white/5 transition-all cursor-pointer"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Options List */}
+        {optionsConfig.length === 0 ? (
+          <div className="py-12 text-center space-y-3">
+            <div className="w-12 h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center mx-auto text-slate-500">
+              <Info className="w-6 h-6" />
+            </div>
+            <p className="text-sm font-semibold text-slate-300">สินค้านี้ไม่มีตัวเลือก (Options / Variants)</p>
+            <p className="text-xs text-slate-500 max-w-sm mx-auto">
+              สินค้านี้เป็นสินค้าเดี่ยวที่ไม่มีตัวเลือกขนาด สี หรือรุ่น จึงไม่ต้องตั้งค่า Option UX/UI
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {optionsConfig.map((opt, optIdx) => {
+              const optLabel = getOptionLabel(opt.name)
+              const count = opt.values.length
+              const currentType = opt.displayType || 'auto'
+
+              return (
+                <div key={optIdx} className="p-5 rounded-2xl bg-night-950 border border-white/10 space-y-4">
+                  {/* Option Header */}
+                  <div className="flex items-center justify-between flex-wrap gap-2">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs uppercase font-mono tracking-wider px-2 py-0.5 rounded-md bg-white/5 text-slate-400 border border-white/10">
+                        Option {optIdx + 1}
+                      </span>
+                      <h3 className="text-sm font-bold text-white">
+                        {optLabel}
+                      </h3>
+                      <span className="text-xs text-cyan-glow font-semibold px-2 py-0.5 rounded-full bg-cyan-glow/10 border border-cyan-glow/20">
+                        {count} ตัวเลือก
+                      </span>
+                    </div>
+
+                    {/* Quick values preview */}
+                    <div className="text-[11px] text-slate-400 max-w-xs truncate">
+                      ตัวอย่าง: {opt.values.slice(0, 3).map(getValueLabel).join(', ')}{count > 3 ? ` ... (+${count - 3})` : ''}
+                    </div>
+                  </div>
+
+                  {/* Selector Style Cards */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
+                    {DISPLAY_OPTIONS.map((style) => {
+                      const Icon = style.icon
+                      const isSelected = currentType === style.type
+
+                      return (
+                        <button
+                          key={style.type}
+                          type="button"
+                          onClick={() => handleTypeChange(optIdx, style.type)}
+                          className={`relative text-left p-3.5 rounded-2xl border transition-all cursor-pointer flex flex-col justify-between gap-2.5 ${
+                            isSelected
+                              ? 'border-cyan-glow bg-cyan-glow/10 ring-1 ring-cyan-glow/30 shadow-lg shadow-cyan-glow/10'
+                              : 'border-white/10 bg-white/[0.02] hover:bg-white/[0.05] hover:border-white/20'
+                          }`}
+                        >
+                          <div className="flex items-start justify-between gap-2">
+                            <div className="flex items-center gap-2">
+                              <div className={`p-1.5 rounded-lg border ${
+                                isSelected ? 'bg-cyan-glow/20 text-cyan-glow border-cyan-glow/30' : 'bg-white/5 text-slate-400 border-white/10'
+                              }`}>
+                                <Icon className="w-4 h-4" />
+                              </div>
+                              <span className={`text-xs font-bold ${isSelected ? 'text-white' : 'text-slate-300'}`}>
+                                {style.title}
+                              </span>
+                            </div>
+
+                            <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full border ${style.badgeColor}`}>
+                              {style.badgeText}
+                            </span>
+                          </div>
+
+                          <p className="text-[11px] leading-relaxed text-slate-400 line-clamp-3">
+                            {style.subtitle}
+                          </p>
+
+                          <div className="flex items-center justify-between pt-1 border-t border-white/5">
+                            <span className="text-[10px] text-slate-500 font-medium">
+                              {isSelected ? 'กำลังเลือกรูปแบบนี้' : 'คลิกเพื่อเลือก'}
+                            </span>
+                            {isSelected && (
+                              <div className="w-4 h-4 rounded-full bg-cyan-glow text-night-950 flex items-center justify-center">
+                                <Check className="w-3 h-3 stroke-[3]" />
+                              </div>
+                            )}
+                          </div>
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+
+        {/* Error Feedback */}
+        {error && (
+          <div className="p-3 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-xs flex items-center gap-2">
+            <X className="w-4 h-4 shrink-0" />
+            <span>{error}</span>
+          </div>
+        )}
+
+        {/* Footer */}
+        <div className="flex items-center justify-between gap-3 pt-4 border-t border-white/10">
+          <p className="text-xs text-slate-500 hidden sm:block">
+            * การตั้งค่านี้จะมีผลกับหน้า Storefront ของสินค้านี้ทันที
+          </p>
+          <div className="flex items-center gap-3 w-full sm:w-auto justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              disabled={saving}
+              className="px-4 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white text-xs font-semibold cursor-pointer transition-all"
+            >
+              ยกเลิก
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={saving || optionsConfig.length === 0}
+              className="flex items-center gap-2 px-6 py-2.5 rounded-xl bg-gradient-to-r from-cyan-glow to-blue-500 hover:from-cyan-400 hover:to-blue-400 text-night-950 font-bold text-xs shadow-lg shadow-cyan-glow/20 disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-all"
+            >
+              {saving ? (
+                <>
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  <span>กำลังบันทึก...</span>
+                </>
+              ) : (
+                <>
+                  <Check className="w-4 h-4" />
+                  <span>บันทึกการตั้งค่า</span>
+                </>
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/admin/src/pages/ProductsPage.tsx

@@ -16,12 +16,14 @@ import {
   FileJson,
   Download,
   CheckCircle2,
-  Sparkles
+  Sparkles,
+  SlidersHorizontal
 } from 'lucide-react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { API_BASE, getCategoryImage, formatPrice, type Category, type Product } from '@homaroma/types'
 import ProductJsonGuideModal from '../components/ProductJsonGuideModal'
+import ProductOptionUxModal from '../components/products/ProductOptionUxModal'
 
 
 interface PaginationMeta {
@@ -58,6 +60,10 @@ export default function ProductsPage() {
   const [isGuideModalOpen, setIsGuideModalOpen] = useState(false)
   const [importJsonText, setImportJsonText] = useState('')
   const [importLoading, setImportLoading] = useState(false)
+
+  // Option UX/UI Selector Modal State
+  const [optionUxProduct, setOptionUxProduct] = useState<Product | null>(null)
+  const [isOptionUxModalOpen, setIsOptionUxModalOpen] = useState(false)
   const [importError, setImportError] = useState<string | null>(null)
   const [importSuccessMessage, setImportSuccessMessage] = useState<string | null>(null)
 
@@ -649,6 +655,16 @@ export default function ProductsPage() {
                          >
                            <LayoutTemplate className="w-4 h-4" />
                          </button>
+                         <button 
+                           onClick={() => {
+                             setOptionUxProduct(product)
+                             setIsOptionUxModalOpen(true)
+                           }}
+                           title={t('products.optionUxSelector', 'Option UX/UI Selector (ตั้งค่ารูปแบบการเลือก Option)')}
+                           className="p-2 rounded-lg hover:bg-cyan-glow/10 text-slate-500 hover:text-cyan-glow transition-all cursor-pointer"
+                         >
+                           <SlidersHorizontal className="w-4 h-4" />
+                         </button>
                          <button 
                            onClick={() => navigate(`/products/${product.id}/edit`)}
                            title={t('products.editProduct', 'Edit Product')}
@@ -1053,6 +1069,19 @@ export default function ProductsPage() {
         onOpenImport={() => setIsImportModalOpen(true)}
       />
 
+      {/* Product Option UX/UI Selector Modal */}
+      <ProductOptionUxModal
+        isOpen={isOptionUxModalOpen}
+        product={optionUxProduct}
+        onClose={() => {
+          setIsOptionUxModalOpen(false)
+          setOptionUxProduct(null)
+        }}
+        onSaveSuccess={(updatedProduct) => {
+          setProducts(prev => prev.map(p => p.id === updatedProduct.id ? { ...p, options: updatedProduct.options } : p))
+        }}
+      />
+
     </div>
   )
 }