[FEAT] 商品管理模組重構、UI 清晰度優化與多語系標籤字體調整

app/Http/Controllers/Admin/ProductController.php

@@ -0,0 +1,236 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use App\Models\Product\Product;
+use App\Models\Product\ProductCategory;
+use App\Models\System\Company;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Str;
+
+class ProductController extends Controller
+{
+    public function index(Request $request)
+    {
+        $user = auth()->user();
+        $query = Product::with(['category', 'translations', 'company']);
+        
+        // 租戶隔離由 Global Scope (TenantScoped) 處理，但系統管理員可額外篩選
+        if ($user->isSystemAdmin() && $request->filled('company_id')) {
+            $query->where('company_id', $request->company_id);
+        }
+
+        // 搜尋
+        if ($request->filled('search')) {
+            $search = $request->search;
+            $query->where(function($q) use ($search) {
+                $q->where('name', 'like', "%{$search}%")
+                  ->orWhere('barcode', 'like', "%{$search}%")
+                  ->orWhere('spec', 'like', "%{$search}%");
+            });
+        }
+
+        // 分類篩選
+        if ($request->filled('category_id')) {
+            $query->where('category_id', $request->category_id);
+        }
+
+        $per_page = $request->input('per_page', 10);
+        $products = $query->latest()->paginate($per_page)->withQueryString();
+        $categories = ProductCategory::all();
+        $companies = $user->isSystemAdmin() ? Company::all() : collect();
+        
+        $companySettings = $user->company ? ($user->company->settings ?? []) : [];
+        $routeName = 'admin.data-config.products.index';
+
+        return view('admin.products.index', [
+            'products' => $products,
+            'categories' => $categories,
+            'companies' => $companies,
+            'companySettings' => $companySettings,
+            'routeName' => $routeName
+        ]);
+    }
+
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'names.zh_TW' => 'required|string|max:255',
+            'names.en' => 'nullable|string|max:255',
+            'names.ja' => 'nullable|string|max:255',
+            'barcode' => 'nullable|string|max:100',
+            'spec' => 'nullable|string|max:255',
+            'category_id' => 'nullable|exists:product_categories,id',
+            'manufacturer' => 'nullable|string|max:255',
+            'track_limit' => 'required|integer|min:1',
+            'spring_limit' => 'required|integer|min:1',
+            'price' => 'required|numeric|min:0',
+            'cost' => 'required|numeric|min:0',
+            'member_price' => 'required|numeric|min:0',
+            'metadata' => 'nullable|array',
+            'is_active' => 'nullable|boolean',
+        ]);
+
+        try {
+            DB::beginTransaction();
+
+            $dictKey = (string) Str::uuid();
+            $company_id = auth()->user()->company_id;
+
+            // Store translations
+            foreach ($request->names as $locale => $name) {
+                if (empty($name)) continue;
+                Translation::create([
+                    'group' => 'product',
+                    'key' => $dictKey,
+                    'locale' => $locale,
+                    'text' => $name,
+                    'company_id' => $company_id,
+                ]);
+            }
+
+            $product = Product::create([
+                'company_id' => $company_id,
+                'category_id' => $request->category_id,
+                'name' => $request->names['zh_TW'], // Default name uses zh_TW
+                'name_dictionary_key' => $dictKey,
+                'barcode' => $request->barcode,
+                'spec' => $request->spec,
+                'manufacturer' => $request->manufacturer,
+                'track_limit' => $request->track_limit,
+                'spring_limit' => $request->spring_limit,
+                'price' => $request->price,
+                'cost' => $request->cost,
+                'member_price' => $request->member_price,
+                'metadata' => $request->metadata ?? [],
+                'is_active' => $request->boolean('is_active', true),
+            ]);
+
+            DB::commit();
+
+            if ($request->wantsJson()) {
+                return response()->json([
+                    'success' => true,
+                    'message' => __('Product created successfully'),
+                    'data' => $product
+                ]);
+            }
+
+            return redirect()->back()->with('success', __('Product created successfully'));
+
+        } catch (\Exception $e) {
+            DB::rollBack();
+            if ($request->wantsJson()) {
+                return response()->json(['success' => false, 'message' => $e->getMessage()], 500);
+            }
+            return redirect()->back()->with('error', $e->getMessage());
+        }
+    }
+
+    public function update(Request $request, $id)
+    {
+        $product = Product::findOrFail($id);
+
+        $validated = $request->validate([
+            'names.zh_TW' => 'required|string|max:255',
+            'names.en' => 'nullable|string|max:255',
+            'names.ja' => 'nullable|string|max:255',
+            'barcode' => 'nullable|string|max:100',
+            'spec' => 'nullable|string|max:255',
+            'category_id' => 'nullable|exists:product_categories,id',
+            'manufacturer' => 'nullable|string|max:255',
+            'track_limit' => 'required|integer|min:1',
+            'spring_limit' => 'required|integer|min:1',
+            'price' => 'required|numeric|min:0',
+            'cost' => 'required|numeric|min:0',
+            'member_price' => 'required|numeric|min:0',
+            'metadata' => 'nullable|array',
+            'is_active' => 'nullable|boolean',
+        ]);
+
+        try {
+            DB::beginTransaction();
+
+            $dictKey = $product->name_dictionary_key;
+            $company_id = auth()->user()->company_id;
+
+            // Update or Create translations
+            foreach ($request->names as $locale => $name) {
+                if (empty($name)) {
+                    Translation::where([
+                        'group' => 'product',
+                        'key' => $dictKey,
+                        'locale' => $locale
+                    ])->delete();
+                    continue;
+                }
+
+                Translation::updateOrCreate(
+                    [
+                        'group' => 'product',
+                        'key' => $dictKey,
+                        'locale' => $locale,
+                    ],
+                    [
+                        'text' => $name,
+                        'company_id' => $company_id,
+                    ]
+                );
+            }
+
+            $product->update([
+                'category_id' => $request->category_id,
+                'name' => $request->names['zh_TW'],
+                'barcode' => $request->barcode,
+                'spec' => $request->spec,
+                'manufacturer' => $request->manufacturer,
+                'track_limit' => $request->track_limit,
+                'spring_limit' => $request->spring_limit,
+                'price' => $request->price,
+                'cost' => $request->cost,
+                'member_price' => $request->member_price,
+                'metadata' => $request->metadata ?? [],
+                'is_active' => $request->boolean('is_active', true),
+            ]);
+
+            DB::commit();
+
+            if ($request->wantsJson()) {
+                return response()->json([
+                    'success' => true,
+                    'message' => __('Product updated successfully'),
+                    'data' => $product
+                ]);
+            }
+
+            return redirect()->back()->with('success', __('Product updated successfully'));
+
+        } catch (\Exception $e) {
+            DB::rollBack();
+            if ($request->wantsJson()) {
+                return response()->json(['success' => false, 'message' => $e->getMessage()], 500);
+            }
+            return redirect()->back()->with('error', $e->getMessage());
+        }
+    }
+
+    public function destroy($id)
+    {
+        try {
+            $product = Product::findOrFail($id);
+            
+            // Delete translations associated with this product
+            if ($product->name_dictionary_key) {
+                Translation::where('key', $product->name_dictionary_key)->delete();
+            }
+
+            $product->delete();
+
+            return redirect()->back()->with('success', __('Product deleted successfully'));
+        } catch (\Exception $e) {
+            return redirect()->back()->with('error', $e->getMessage());
+        }
+    }
+}

app/Models/Product/Product.php

@@ -15,21 +15,31 @@ class Product extends Model
         'company_id',
         'category_id',
         'name',
+        'name_dictionary_key',
         'sku',
         'barcode',
+        'spec',
+        'manufacturer',
         'description',
         'price',
+        'member_price',
         'cost',
+        'track_limit',
+        'spring_limit',
         'type',
         'image_url',
         'status',
-        'name_dictionary_key',
+        'is_active',
         'metadata',
     ];
 
     protected $casts = [
         'price' => 'decimal:2',
+        'member_price' => 'decimal:2',
         'cost' => 'decimal:2',
+        'track_limit' => 'integer',
+        'spring_limit' => 'integer',
+        'is_active' => 'boolean',
         'metadata' => 'array',
     ];
 
@@ -37,4 +47,13 @@ class Product extends Model
     {
         return $this->belongsTo(ProductCategory::class, 'category_id');
     }
+
+    /**
+     * Get the translations for the product name.
+     */
+    public function translations()
+    {
+        return $this->hasMany(\App\Models\System\Translation::class, 'key', 'name_dictionary_key')
+            ->where('group', 'product');
+    }
 }

app/Models/Product/ProductCategory.php

@@ -21,4 +21,13 @@ class ProductCategory extends Model
     {
         return $this->hasMany(Product::class, 'category_id');
     }
+
+    /**
+     * Get the translations for the category name.
+     */
+    public function translations()
+    {
+        return $this->hasMany(\App\Models\System\Translation::class, 'key', 'name_dictionary_key')
+            ->where('group', 'category');
+    }
 }

app/Models/System/Company.php

@@ -23,11 +23,13 @@ class Company extends Model
         'status',
         'valid_until',
         'note',
+        'settings',
     ];
 
     protected $casts = [
         'valid_until' => 'date',
         'status' => 'integer',
+        'settings' => 'array',
     ];
 
     /**

database/migrations/2026_03_26_163012_add_fields_to_products_and_companies_table.php

@@ -0,0 +1,50 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        // 擴充 products 表
+        Schema::table('products', function (Blueprint $table) {
+            $table->string('spec')->nullable()->after('name')->comment('規格');
+            $table->string('manufacturer')->nullable()->after('barcode')->comment('生產公司');
+            $table->integer('track_limit')->default(0)->after('manufacturer')->comment('履帶貨道上限');
+            $table->integer('spring_limit')->default(0)->after('track_limit')->comment('彈簧貨道上限');
+            $table->decimal('member_price', 10, 2)->default(0)->after('price')->comment('會員價');
+            $table->json('metadata')->nullable()->after('is_active')->comment('進階 Metadata (點數、物料代碼等)');
+        });
+
+        // 擴充 companies 表
+        Schema::table('companies', function (Blueprint $table) {
+            $table->json('settings')->nullable()->after('note')->comment('客戶功能設定 (Feature Toggles)');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('products', function (Blueprint $table) {
+            $table->dropColumn([
+                'spec',
+                'manufacturer',
+                'track_limit',
+                'spring_limit',
+                'member_price',
+                'metadata'
+            ]);
+        });
+
+        Schema::table('companies', function (Blueprint $table) {
+            $table->dropColumn('settings');
+        });
+    }
+};

lang/en.json

@@ -708,5 +708,35 @@
     "Yes, regenerate": "Yes, regenerate",
     "Regenerating the token will disconnect the physical machine until it is updated. Continue?": "Regenerating the token will disconnect the physical machine until it is updated. Continue?",
     "Error processing request": "Error processing request",
-    "API Token regenerated successfully.": "API Token regenerated successfully."
+    "API Token regenerated successfully.": "API Token regenerated successfully.",
+    "Product Name (Multilingual)": "Product Name (Multilingual)",
+    "Material Code": "Material Code",
+    "Full Points": "Full Points",
+    "Half Points": "Half Points",
+    "Half Points Amount": "Half Points Amount",
+    "Name in Traditional Chinese": "Name in Traditional Chinese",
+    "Name in English": "Name in English",
+    "Name in Japanese": "Name in Japanese",
+    "Track Limit": "Track Limit",
+    "Spring Limit": "Spring Limit",
+    "Inventory Limits Configuration": "Inventory Limits Configuration",
+    "Manage your catalog, prices, and multilingual details.": "Manage your catalog, prices, and multilingual details.",
+    "Product created successfully": "Product created successfully",
+    "Product updated successfully": "Product updated successfully",
+    "Product deleted successfully": "Product deleted successfully",
+    "Fill in the product details below": "Fill in the product details below",
+    "Uncategorized": "Uncategorized",
+    "Track Channel Limit": "Track Channel Limit",
+    "Spring Channel Limit": "Spring Channel Limit",
+    "Product Details": "Product Details",
+    "Production Company": "Production Company",
+    "Barcode": "Barcode",
+    "Specifications": "Specifications",
+    "Cost": "Cost",
+    "Member Price": "Member Price",
+    "Sale Price": "Sale Price",
+    "Update Product": "Update Product",
+    "Edit Product": "Edit Product",
+    "Create Product": "Create Product",
+    "Are you sure you want to delete this product?": "Are you sure you want to delete this product?"
 }

lang/ja.json

@@ -709,5 +709,35 @@
     "Yes, regenerate": "はい、再生成します",
     "Regenerating the token will disconnect the physical machine until it is updated. Continue?": "トークンを再生成すると、更新されるまで物理マシンの接続が切断されます。続行しますか？",
     "Error processing request": "リクエストの処理中にエラーが発生しました",
-    "API Token regenerated successfully.": "APIトークンが正常に再生成されました。"
+    "API Token regenerated successfully.": "APIトークンが正常に再生成されました。",
+    "Product Name (Multilingual)": "商品名 (多言語)",
+    "Material Code": "物料コード",
+    "Full Points": "フルポイント",
+    "Half Points": "ハーフポイント",
+    "Half Points Amount": "ハーフポイント金額",
+    "Name in Traditional Chinese": "繁体字中国語名",
+    "Name in English": "英語名",
+    "Name in Japanese": "日本語名",
+    "Track Limit": "ベルトコンベア上限",
+    "Spring Limit": "スプリング上限",
+    "Inventory Limits Configuration": "在庫上限設定",
+    "Manage your catalog, prices, and multilingual details.": "カタログ、価格、多言語詳細を管理します。",
+    "Product created successfully": "商品が正常に作成されました",
+    "Product updated successfully": "商品が正常に更新されました",
+    "Product deleted successfully": "商品が正常に削除されました",
+    "Fill in the product details below": "以下に商品の詳細を入力してください",
+    "Uncategorized": "未分類",
+    "Track Channel Limit": "ベルトコンベア上限",
+    "Spring Channel Limit": "スプリング上限",
+    "Product Details": "商品詳細",
+    "Production Company": "製造会社",
+    "Barcode": "バーコード",
+    "Specifications": "規格",
+    "Cost": "原価",
+    "Member Price": "会員価格",
+    "Sale Price": "販売価格",
+    "Update Product": "商品を更新",
+    "Edit Product": "商品を編集",
+    "Create Product": "商品を作成",
+    "Are you sure you want to delete this product?": "この商品を削除してもよろしいですか？"
 }

lang/zh_TW.json

@@ -41,8 +41,8 @@
     "Alerts Pending": "待處理告警",
     "All": "全部",
     "All Affiliations": "全部單位",
-    "All Categories": "所有類別",
-    "All Companies": "全部單位",
+    "All Categories": "所有分類",
+    "All Companies": "所有公司",
     "All Levels": "所有層級",
     "All Machines": "所有機台",
     "All Times System Timezone": "所有時間為系統時區",
@@ -97,7 +97,7 @@
     "Click here to re-send the verification email.": "點擊此處重新發送驗證郵件。",
     "Click to upload": "點擊上傳",
     "Close Panel": "關閉控制面板",
-    "Company": "所屬單位",
+    "Company": "所屬公司",
     "Company Code": "公司代碼",
     "Company Information": "公司資訊",
     "Company Level": "客戶層級",
@@ -390,6 +390,7 @@
     "PARTNER_KEY": "PARTNER_KEY",
     "PI_MERCHANT_ID": "Pi 拍錢包 商店代號",
     "PS_MERCHANT_ID": "全盈+Pay 商店代號",
+    "PS_LEVEL": "PS_LEVEL",
     "Parameters": "參數設定",
     "Pass Code": "通行碼",
     "Pass Codes": "通行碼",
@@ -707,5 +708,50 @@
     "Yes, regenerate": "確認重新產生",
     "Regenerating the token will disconnect the physical machine until it is updated. Continue?": "重新產生金鑰將導致實體機台暫時失去連線，必須於機台端更新此新金鑰才能恢復。確定繼續嗎？",
     "Error processing request": "處理請求時發生錯誤",
-    "API Token regenerated successfully.": "API 金鑰重新產生成功。"
+    "API Token regenerated successfully.": "API 金鑰重新產生成功。",
+    "Product Name (Multilingual)": "商品名稱 (多語系)",
+    "Material Code": "物料代碼",
+    "Full Points": "全點數",
+    "Half Points": "半點數",
+    "Half Points Amount": "半點數金額",
+    "Name in Traditional Chinese": "繁體中文名稱",
+    "Name in English": "英文名稱",
+    "Name in Japanese": "日文名稱",
+    "Track Limit": "履帶貨道上限",
+    "Spring Limit": "彈簧貨道上限",
+    "Inventory Limits Configuration": "庫存上限配置",
+    "Manage your catalog, prices, and multilingual details.": "管理您的商品型錄、價格及多語系詳情。",
+    "Product created successfully": "商品已成功建立",
+    "Product updated successfully": "商品已成功更新",
+    "Product deleted successfully": "商品已成功刪除",
+    "Fill in the product details below": "請在下方填寫商品的詳細資訊",
+    "Uncategorized": "未分類",
+    "Track Channel Limit": "履帶貨道上限",
+    "Spring Channel Limit": "彈簧貨道上限",
+    "Product Details": "商品詳情",
+    "Production Company": "生產公司",
+    "Barcode": "條碼",
+    "Specifications": "規格",
+    "Cost": "成本",
+    "Member Price": "會員價",
+    "Retail Price": "零售價",
+    "Sale Price": "售價",
+    "Update Product": "更新商品",
+    "Edit Product": "編輯商品",
+    "Create Product": "建立商品",
+    "Are you sure you want to delete this product?": "您確定要刪除此商品嗎？",
+    "Limits (Track/Spring)": "庫存上限 (履帶/彈簧)",
+    "Member": "會員價",
+    "Search products...": "搜尋商品...",
+    "Product Info": "商品資訊",
+    "Price / Member": "售價 / 會員價",
+    "Add Product": "新增商品",
+    "Delete Product": "刪除商品",
+    "Specification": "規格",
+    "e.g. 500ml / 300g": "例如：500ml / 300g",
+    "Active Status": "啟用狀態",
+    "Traditional Chinese": "繁體中文",
+    "English": "英文",
+    "Japanese": "日文",
+    "Select Category": "選擇類別"
 }

resources/views/admin/products/create-modal.blade.php

@@ -0,0 +1,201 @@
+<div x-data="{ 
+    step: 1, 
+    loading: false,
+    settings: @js(auth()->user()->company->settings ?? []),
+    formData: {
+        names: { zh_TW: '', en: '', ja: '' },
+        barcode: '',
+        spec: '',
+        category_id: '',
+        manufacturer: '',
+        track_limit: 10,
+        spring_limit: 10,
+        price: 0,
+        cost: 0,
+        member_price: 0,
+        metadata: {
+            material_code: '',
+            full_points: 0,
+            half_points: 0,
+            half_points_cash: 0
+        }
+    },
+    async submit() {
+        this.loading = true;
+        try {
+            const response = await fetch('{{ route('admin.products.store') }}', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                },
+                body: JSON.stringify(this.formData)
+            });
+            const result = await response.json();
+            if (result.success) {
+                window.location.reload();
+            } else {
+                alert(result.message || 'Saving failed');
+            }
+        } catch (e) {
+            console.error(e);
+        } finally {
+            this.loading = false;
+        }
+    }
+}" class="p-4 sm:p-7">
+    <!-- Header -->
+    <div class="text-center mb-8">
+        <h3 class="text-2xl font-black text-slate-800 dark:text-white tracking-tight uppercase">
+            {{ __('Create New Product') }}
+        </h3>
+        <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
+            {{ __('Add a new item to your product collection') }}
+        </p>
+    </div>
+
+    <!-- Stepper (Optional but adds luxury feel) -->
+    <div class="flex items-center justify-center gap-4 mb-8">
+        <div :class="step >= 1 ? 'bg-cyan-500 text-white' : 'bg-slate-100 dark:bg-slate-800 text-slate-400'" class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-black transition-all">1</div>
+        <div class="w-12 h-px bg-slate-200 dark:border-slate-700"></div>
+        <div :class="step >= 2 ? 'bg-cyan-500 text-white' : 'bg-slate-100 dark:bg-slate-800 text-slate-400'" class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-black transition-all">2</div>
+    </div>
+
+    <form @submit.prevent="submit">
+        <!-- Step 1: Basic Info & Multilingual Names -->
+        <div x-show="step === 1" x-transition class="space-y-6">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <!-- Multilingual Names -->
+                <div class="md:col-span-3 space-y-4">
+                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Product Name') }} ({{ __('Multilingual') }})</label>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <div class="relative">
+                            <span class="absolute top-2.5 left-3 text-[10px] font-black text-cyan-500/50 uppercase">ZH</span>
+                            <input type="text" x-model="formData.names.zh_TW" required placeholder="{{ __('Traditional Chinese') }}" class="luxury-input pl-10">
+                        </div>
+                        <div class="relative">
+                            <span class="absolute top-2.5 left-3 text-[10px] font-black text-cyan-500/50 uppercase">EN</span>
+                            <input type="text" x-model="formData.names.en" placeholder="{{ __('English') }}" class="luxury-input pl-10">
+                        </div>
+                        <div class="relative">
+                            <span class="absolute top-2.5 left-3 text-[10px] font-black text-cyan-500/50 uppercase">JA</span>
+                            <input type="text" x-model="formData.names.ja" placeholder="{{ __('Japanese') }}" class="luxury-input pl-10">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Barcode & Spec -->
+                <div class="space-y-2">
+                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Barcode') }}</label>
+                    <input type="text" x-model="formData.barcode" class="luxury-input">
+                </div>
+                <div class="space-y-2">
+                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Specification') }}</label>
+                    <input type="text" x-model="formData.spec" class="luxury-input">
+                </div>
+                <div class="space-y-2">
+                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Category') }}</label>
+                    <select x-model="formData.category_id" class="luxury-input">
+                        <option value="">{{ __('Select Category') }}</option>
+                        @foreach($categories as $cat)
+                            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
+                        @endforeach
+                    </select>
+                </div>
+            </div>
+
+            <div class="flex justify-end pt-4">
+                <button type="button" @click="step = 2" class="px-8 py-3 bg-slate-900 dark:bg-slate-700 text-white rounded-xl font-black text-xs uppercase tracking-[0.2em] hover:bg-cyan-600 transition-all shadow-lg shadow-cyan-500/10">
+                    {{ __('Next') }}
+                </button>
+            </div>
+        </div>
+
+        <!-- Step 2: Logistics & Pricing -->
+        <div x-show="step === 2" x-transition class="space-y-6">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <!-- Track & Spring Limits -->
+                <div class="space-y-2">
+                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Track Limit') }}</label>
+                    <input type="number" x-model="formData.track_limit" class="luxury-input">
+                </div>
+                <div class="space-y-2">
+                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Spring Limit') }}</label>
+                    <input type="number" x-model="formData.spring_limit" class="luxury-input">
+                </div>
+                <div class="col-span-2 space-y-2">
+                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Manufacturer') }}</label>
+                    <input type="text" x-model="formData.manufacturer" class="luxury-input">
+                </div>
+
+                <!-- Pricing -->
+                <div class="space-y-2">
+                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Price') }}</label>
+                    <input type="number" x-model="formData.price" class="luxury-input">
+                </div>
+                <div class="space-y-2">
+                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Cost') }}</label>
+                    <input type="number" x-model="formData.cost" class="luxury-input">
+                </div>
+                <div class="space-y-2">
+                    <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Member Price') }}</label>
+                    <input type="number" x-model="formData.member_price" class="luxury-input">
+                </div>
+
+                <!-- Feature Toggled Fields: Material Code -->
+                <template x-if="settings.show_material_code">
+                    <div class="space-y-2">
+                        <label class="block text-xs font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Material Code') }}</label>
+                        <input type="text" x-model="formData.metadata.material_code" class="luxury-input border-cyan-500/30">
+                    </div>
+                </template>
+            </div>
+
+            <!-- Points Settings Area (Feature Toggled) -->
+            <template x-if="settings.show_points_management">
+                <div class="p-6 bg-slate-50 dark:bg-slate-800/50 rounded-2xl border border-slate-100 dark:border-slate-700/50 space-y-6 mt-4">
+                    <div class="flex items-center gap-2 mb-2">
+                        <div class="w-1.5 h-1.5 rounded-full bg-cyan-500"></div>
+                        <h4 class="text-[11px] font-black text-slate-400 uppercase tracking-widest">{{ __('Points Management') }}</h4>
+                    </div>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div class="space-y-2">
+                            <label class="block text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Full Points') }}</label>
+                            <input type="number" x-model="formData.metadata.full_points" class="luxury-input bg-white dark:bg-slate-900">
+                        </div>
+                        <div class="space-y-2">
+                            <label class="block text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Half Points') }}</label>
+                            <input type="number" x-model="formData.metadata.half_points" class="luxury-input bg-white dark:bg-slate-900">
+                        </div>
+                        <div class="space-y-2">
+                            <label class="block text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest pl-1">{{ __('Half Points Cash') }}</label>
+                            <input type="number" x-model="formData.metadata.half_points_cash" class="luxury-input bg-white dark:bg-slate-900">
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <div class="flex justify-between items-center pt-8 border-t border-slate-100 dark:border-slate-800">
+                <button type="button" @click="step = 1" class="text-xs font-black text-slate-400 uppercase tracking-widest hover:text-slate-600 transition-colors">
+                    {{ __('Back') }}
+                </button>
+                <div class="flex gap-4">
+                    <button type="button" @click="$dispatch('close-modal', 'create-product')" class="px-6 py-3 text-slate-400 font-black text-xs uppercase tracking-widest hover:text-slate-600">
+                        {{ __('Cancel') }}
+                    </button>
+                    <button type="submit" 
+                        :disabled="loading"
+                        class="px-10 py-3 bg-cyan-600 text-white rounded-xl font-black text-xs uppercase tracking-[0.2em] hover:bg-cyan-500 transition-all shadow-xl shadow-cyan-500/20 flex items-center gap-2">
+                        <template x-if="loading">
+                            <svg class="animate-spin h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                            </svg>
+                        </template>
+                        <span x-text="loading ? '{{ __('Saving...') }}' : '{{ __('Save Product') }}'"></span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>

resources/views/admin/products/index.blade.php

@@ -0,0 +1,520 @@
+@extends('layouts.admin')
+
+@php
+$routeName = request()->route()->getName();
+$baseRoute = 'admin.data-config.products';
+
+$roleSelectConfig = [
+    "placeholder" => __('Select Category'),
+    "hasSearch" => true,
+    "searchPlaceholder" => __('Search Category...'),
+    "toggleClasses" => "hs-select-toggle luxury-select-toggle",
+    "dropdownClasses" => "hs-select-menu w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 rounded-xl shadow-2xl mt-2 z-[100]",
+    "optionClasses" => "hs-select-option py-2.5 px-3 text-sm text-slate-800 dark:text-slate-300 cursor-pointer hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex items-center justify-between",
+];
+@endphp
+
+@section('content')
+<div class="space-y-6 pb-20" 
+     x-data="productManager"
+     data-categories="{{ json_encode($categories) }}"
+     data-settings="{{ json_encode($companySettings) }}"
+     data-errors="{{ json_encode($errors->any()) }}"
+     data-store-url="{{ route($baseRoute . '.store') }}"
+     data-index-url="{{ route($baseRoute . '.index') }}">
+    
+    <!-- Header -->
+    <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
+        <div>
+            <h1 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Product Management') }}</h1>
+            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">
+                {{ __('Manage your catalog, prices, and multilingual details.') }}
+            </p>
+        </div>
+        <div class="flex items-center gap-3">
+            <button @click="openCreateModal()" class="btn-luxury-primary">
+                <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                </svg>
+                <span>{{ __('Add Product') }}</span>
+            </button>
+        </div>
+    </div>
+
+
+    <!-- Main Content Card -->
+    <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
+        <!-- Filters & Search -->
+        <form action="{{ route($routeName) }}" method="GET" class="flex flex-col md:flex-row md:items-center gap-4 mb-10">
+            <div class="relative group">
+                <span class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none z-10">
+                    <svg class="h-4 w-4 text-slate-400 group-focus-within:text-cyan-500 transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                    </svg>
+                </span>
+                <input type="text" name="search" value="{{ request('search') }}" class="py-2.5 pl-12 pr-6 block w-full md:w-80 luxury-input" placeholder="{{ __('Search products...') }}">
+            </div>
+
+            @if(auth()->user()->isSystemAdmin())
+            <div class="relative min-w-[200px]">
+                <x-searchable-select name="company_id" :options="$companies" :selected="request('company_id')" :placeholder="__('All Companies')" onchange="this.form.submit()" />
+            </div>
+            @endif
+        </form>
+
+        <!-- Table -->
+        <div class="overflow-x-auto">
+            <table class="w-full text-left border-separate border-spacing-y-0">
+                <thead>
+                    <tr class="bg-slate-50/50 dark:bg-slate-900/10">
+                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Product Info') }}</th>
+                        @if(auth()->user()->isSystemAdmin())
+                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Company') }}</th>
+                        @endif
+                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Price / Member') }}</th>
+                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Limits (Track/Spring)') }}</th>
+                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Status') }}</th>
+                        <th class="px-6 py-4 text-xs font-bold text-slate-500 dark:text-slate-400 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Actions') }}</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
+                    @forelse($products as $product)
+                    <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
+                        <td class="px-6 py-6">
+                            <div class="flex items-center gap-x-4">
+                                <div class="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400 group-hover:bg-cyan-500 group-hover:text-white transition-all overflow-hidden shadow-sm">
+                                    @if($product->image_url)
+                                        <img src="{{ $product->image_url }}" class="w-full h-full object-cover">
+                                    @else
+                                        <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /></svg>
+                                    @endif
+                                </div>
+                                <div class="flex flex-col">
+                                    <span class="text-base font-extrabold text-slate-800 dark:text-slate-100 group-hover:text-cyan-600 dark:group-hover:text-cyan-400 transition-colors">{{ $product->name }}</span>
+                                    <div class="flex items-center gap-2 mt-0.5">
+                                        @php
+                                            $catName = $product->category->name ?? __('Uncategorized');
+                                            if ($product->category && $product->category->name_dictionary_key) {
+                                                $translatedCat = __($product->category->name_dictionary_key);
+                                                if ($translatedCat !== $product->category->name_dictionary_key) {
+                                                    $catName = $translatedCat;
+                                                }
+                                            }
+                                        @endphp
+                                        <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest bg-slate-100 dark:bg-slate-800 px-1.5 py-0.5 rounded transition-colors group-hover:text-slate-600 dark:group-hover:text-slate-300">{{ $catName }}</span>
+                                        <span class="text-[10px] font-mono font-bold text-cyan-500 tracking-tighter transition-colors group-hover:text-cyan-600 dark:group-hover:text-cyan-400">{{ $product->barcode }}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        @if(auth()->user()->isSystemAdmin())
+                        <td class="px-6 py-6 text-center">
+                            <span class="text-xs font-bold text-slate-600 dark:text-slate-400 group-hover:text-slate-900 dark:group-hover:text-slate-200 transition-colors">{{ $product->company->name ?? '-' }}</span>
+                        </td>
+                        @endif
+                        <td class="px-6 py-6 text-center whitespace-nowrap">
+                            <span class="text-sm font-black text-slate-800 dark:text-white">${{ number_format($product->price, 0) }}</span>
+                            <span class="text-xs font-bold text-slate-400 mx-1">/</span>
+                            <span class="text-sm font-black text-emerald-500">${{ number_format($product->member_price, 0) }}</span>
+                        </td>
+                        <td class="px-6 py-6 text-center whitespace-nowrap">
+                            <span class="text-sm font-black text-indigo-500 dark:text-indigo-400">{{ $product->track_limit }}</span>
+                            <span class="text-xs font-bold text-slate-400 mx-1">/</span>
+                            <span class="text-sm font-black text-amber-500 dark:text-amber-400">{{ $product->spring_limit }}</span>
+                        </td>
+                        <td class="px-6 py-6 text-center">
+                            @if($product->is_active)
+                                <span class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-emerald-500/10 text-emerald-600 border border-emerald-500/20 shadow-sm shadow-emerald-500/10">{{ __('Active') }}</span>
+                            @else
+                                <span class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-slate-500/10 text-slate-500 border border-slate-500/20">{{ __('Disabled') }}</span>
+                            @endif
+                        </td>
+                        <td class="px-6 py-6 text-right">
+                            <div class="flex justify-end items-center gap-2">
+                                <button @click='openEditModal(@js($product))' class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-cyan-500 hover:bg-cyan-500/5 transition-all border border-transparent hover:border-cyan-500/20" title="{{ __('Edit') }}">
+                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
+                                </button>
+                                <button type="button" @click="confirmDelete('{{ route($baseRoute . '.destroy', $product->id) }}')" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-rose-500 hover:bg-rose-500/5 transition-all border border-transparent hover:border-rose-500/20" title="{{ __('Delete Product') }}">
+                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                    @empty
+                    <tr>
+                        <td colspan="5" class="px-6 py-32 text-center text-slate-400 italic">{{ __('No products found matching your criteria.') }}</td>
+                    </tr>
+                    @endforelse
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="mt-10 pt-6 border-t border-slate-100 dark:border-slate-800/50">
+            {{ $products->links('vendor.pagination.luxury') }}
+        </div>
+    </div>
+
+    <!-- User Modal (Unified for Create/Edit) -->
+    <div x-show="showModal" class="fixed inset-0 z-[100] overflow-y-auto" x-cloak>
+        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
+            <div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 transition-opacity bg-slate-900/60 backdrop-blur-sm" @click="showModal = false"></div>
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
+            <div x-show="showModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" class="inline-block px-8 py-10 text-left align-bottom transition-all transform luxury-card rounded-[2.5rem] dark:bg-slate-900 border-slate-200/50 dark:border-slate-700/50 shadow-2xl sm:my-8 sm:align-middle sm:max-w-3xl sm:w-full overflow-visible">
+                
+                <div class="flex justify-between items-center mb-10">
+                    <div>
+                        <h2 class="text-xl font-black text-slate-800 dark:text-white font-display tracking-tight flex items-center gap-2">
+                            <span x-text="editing ? '{{ __('Edit Product') }}' : '{{ __('Create Product') }}'"></span>
+                        </h2>
+                    </div>
+                    <button @click="showModal = false" class="p-2 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 transition-colors">
+                        <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
+                    </button>
+                </div>
+
+                <form :action="formAction" method="POST" class="space-y-8">
+                    @csrf
+                    <template x-if="editing"><input type="hidden" name="_method" value="PUT"></template>
+
+                    <!-- Language Tabs Custom Implementation -->
+                    <div class="space-y-6">
+                        <div class="space-y-4">
+                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Product Name (Multilingual)') }} <span class="text-rose-500">*</span></label>
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                                <div class="space-y-2">
+                                    <div class="flex items-center gap-2 mb-1">
+                                         <span class="px-3 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-sm font-black text-slate-500">{{ __('Traditional Chinese') }}</span>
+                                     </div>
+                                     <input type="text" name="names[zh_TW]" x-model="currentProduct.names.zh_TW" required class="luxury-input !py-3">
+                                 </div>
+                                 <div class="space-y-2">
+                                     <div class="flex items-center gap-2 mb-1">
+                                         <span class="px-3 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-sm font-black text-slate-500">{{ __('English') }}</span>
+                                     </div>
+                                     <input type="text" name="names[en]" x-model="currentProduct.names.en" class="luxury-input !py-3">
+                                 </div>
+                                 <div class="space-y-2">
+                                     <div class="flex items-center gap-2 mb-1">
+                                         <span class="px-3 py-1 rounded-md bg-slate-100 dark:bg-slate-800 text-sm font-black text-slate-500">{{ __('Japanese') }}</span>
+                                     </div>
+                                     <input type="text" name="names[ja]" x-model="currentProduct.names.ja" class="luxury-input !py-3">
+                                 </div>
+                            </div>
+                        </div>
+
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                            <div class="space-y-2">
+                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Barcode') }}</label>
+                                <input type="text" name="barcode" x-model="currentProduct.barcode" class="luxury-input">
+                            </div>
+                            <div class="space-y-2">
+                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Specification') }}</label>
+                                <input type="text" name="spec" x-model="currentProduct.spec" class="luxury-input">
+                            </div>
+                            <div class="space-y-2">
+                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Category') }}</label>
+                                <x-searchable-select id="modal-product-category" name="category_id" x-model="currentProduct.category_id" :placeholder="__('Select Category')">
+                                    <option value="">{{ __('Uncategorized') }}</option>
+                                    @foreach($categories as $category)
+                                        @php
+                                            $catName = $category->name;
+                                            if ($category->name_dictionary_key) {
+                                                $catName = __($category->name_dictionary_key);
+                                                if ($catName === $category->name_dictionary_key) {
+                                                    $catName = $category->name;
+                                                }
+                                            }
+                                        @endphp
+                                        <option value="{{ $category->id }}" data-title="{{ $catName }}">{{ $catName }}</option>
+                                    @endforeach
+                                </x-searchable-select>
+                            </div>
+                        </div>
+
+                            <div class="space-y-2">
+                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Retail Price') }} <span class="text-rose-500">*</span></label>
+                                <div class="flex items-center gap-2">
+                                    <button type="button" @click="currentProduct.price = Math.max(0, parseInt(currentProduct.price || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                    </button>
+                                    <div class="relative flex-1">
+                                        <input type="number" name="price" x-model="currentProduct.price" required class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                    </div>
+                                    <button type="button" @click="currentProduct.price = parseInt(currentProduct.price || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="space-y-2">
+                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Member Price') }} <span class="text-rose-500">*</span></label>
+                                <div class="flex items-center gap-2">
+                                    <button type="button" @click="currentProduct.member_price = Math.max(0, parseInt(currentProduct.member_price || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                    </button>
+                                    <div class="relative flex-1">
+                                        <input type="number" name="member_price" x-model="currentProduct.member_price" required class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                    </div>
+                                    <button type="button" @click="currentProduct.member_price = parseInt(currentProduct.member_price || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="space-y-2">
+                                <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Cost') }} <span class="text-rose-500">*</span></label>
+                                <div class="flex items-center gap-2">
+                                    <button type="button" @click="currentProduct.cost = Math.max(0, parseInt(currentProduct.cost || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                    </button>
+                                    <div class="relative flex-1">
+                                        <input type="number" name="cost" x-model="currentProduct.cost" required class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                    </div>
+                                    <button type="button" @click="currentProduct.cost = parseInt(currentProduct.cost || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                        <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                    </button>
+                                </div>
+                            </div>
+
+                        <!-- Inventory Limits -->
+                        <div class="p-6 rounded-3xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800">
+                             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div class="space-y-2">
+                                    <label class="text-xs font-black text-indigo-500 uppercase tracking-widest pl-1">{{ __('Track Channel Limit') }} <span class="text-rose-500">*</span></label>
+                                    <div class="flex items-center gap-2">
+                                        <button type="button" @click="currentProduct.track_limit = Math.max(0, parseInt(currentProduct.track_limit || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                        </button>
+                                        <input type="number" name="track_limit" x-model="currentProduct.track_limit" required class="luxury-input border-indigo-500/20 focus:border-indigo-500 focus:ring-indigo-500 text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                        <button type="button" @click="currentProduct.track_limit = parseInt(currentProduct.track_limit || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="space-y-2">
+                                    <label class="text-xs font-black text-amber-500 uppercase tracking-widest pl-1">{{ __('Spring Channel Limit') }} <span class="text-rose-500">*</span></label>
+                                    <div class="flex items-center gap-2">
+                                        <button type="button" @click="currentProduct.spring_limit = Math.max(0, parseInt(currentProduct.spring_limit || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                        </button>
+                                        <input type="number" name="spring_limit" x-model="currentProduct.spring_limit" required class="luxury-input border-amber-500/20 focus:border-amber-500 focus:ring-amber-500 text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                        <button type="button" @click="currentProduct.spring_limit = parseInt(currentProduct.spring_limit || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                            <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                        </button>
+                                    </div>
+                                </div>
+                             </div>
+                        </div>
+
+                        <!-- Feature Toggles Section -->
+                        <template x-if="companySettings.enable_points || companySettings.enable_material_code">
+                            <div class="space-y-6">
+                                <div class="h-px bg-slate-100 dark:bg-slate-800"></div>
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                    <template x-if="companySettings.enable_material_code">
+                                        <div class="space-y-2">
+                                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Material Code') }}</label>
+                                            <input type="text" name="metadata[material_code]" x-model="currentProduct.metadata.material_code" class="luxury-input">
+                                        </div>
+                                    </template>
+                                    <div class="space-y-2">
+                                        <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Active Status') }}</label>
+                                        <div class="flex items-center mt-2">
+                                            <label class="relative inline-flex items-center cursor-pointer">
+                                                <input type="checkbox" name="is_active" value="1" x-model="currentProduct.is_active" class="sr-only peer">
+                                                <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-800 peer-checked:after:translate-x-full 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-cyan-500"></div>
+                                                <span class="ml-3 text-sm font-bold text-slate-500 dark:text-slate-400" x-text="currentProduct.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
+                                            </label>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <template x-if="companySettings.enable_points">
+                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 animate-luxury-in">
+                                        <div class="space-y-2">
+                                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Full Points') }}</label>
+                                            <div class="flex items-center gap-2">
+                                                <button type="button" @click="currentProduct.metadata.points_full = Math.max(0, parseInt(currentProduct.metadata.points_full || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                                </button>
+                                                <input type="number" name="metadata[points_full]" x-model="currentProduct.metadata.points_full" class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                                <button type="button" @click="currentProduct.metadata.points_full = parseInt(currentProduct.metadata.points_full || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                                </button>
+                                            </div>
+                                        </div>
+                                        <div class="space-y-2">
+                                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Half Points') }}</label>
+                                            <div class="flex items-center gap-2">
+                                                <button type="button" @click="currentProduct.metadata.points_half = Math.max(0, parseInt(currentProduct.metadata.points_half || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                                </button>
+                                                <input type="number" name="metadata[points_half]" x-model="currentProduct.metadata.points_half" class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                                <button type="button" @click="currentProduct.metadata.points_half = parseInt(currentProduct.metadata.points_half || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                                </button>
+                                            </div>
+                                        </div>
+                                        <div class="space-y-2">
+                                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Half Points Amount') }}</label>
+                                            <div class="flex items-center gap-2">
+                                                <button type="button" @click="currentProduct.metadata.points_half_amount = Math.max(0, parseInt(currentProduct.metadata.points_half_amount || 0) - 1)" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/></svg>
+                                                </button>
+                                                <input type="number" name="metadata[points_half_amount]" x-model="currentProduct.metadata.points_half_amount" class="luxury-input text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
+                                                <button type="button" @click="currentProduct.metadata.points_half_amount = parseInt(currentProduct.metadata.points_half_amount || 0) + 1" class="size-10 flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors">
+                                                    <svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </template>
+
+                        <div class="flex justify-end gap-x-4 pt-10">
+                            <button type="button" @click="showModal = false" class="btn-luxury-ghost px-8">{{ __('Cancel') }}</button>
+                            <button type="submit" class="btn-luxury-primary px-16">
+                                <span x-text="editing ? '{{ __('Update Product') }}' : '{{ __('Save Product') }}'"></span>
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <!-- Delete Confirm Modal (Reuse Global Component if available, or inline) -->
+    <x-delete-confirm-modal :message="__('Are you sure you want to delete this product? All related historical translation data will also be removed.')" />
+
+    <form x-ref="deleteForm" :action="deleteFormAction" method="POST" class="hidden">
+        @csrf
+        @method('DELETE')
+    </form>
+</div>
+@endsection
+
+@section('scripts')
+<script>
+    document.addEventListener('alpine:init', () => {
+        Alpine.data('productManager', () => ({
+            showModal: false,
+            editing: false,
+            categories: [],
+            companySettings: {},
+            urls: {
+                store: '',
+                index: ''
+            },
+            
+            init() {
+                this.categories = JSON.parse(this.$el.dataset.categories || '[]');
+                this.companySettings = JSON.parse(this.$el.dataset.settings || '{}');
+                this.showModal = JSON.parse(this.$el.dataset.errors || 'false');
+                this.urls.store = this.$el.dataset.storeUrl;
+                this.urls.index = this.$el.dataset.indexUrl;
+            },
+            currentProduct: {
+                id: '',
+                names: { zh_TW: '', en: '', ja: '' },
+                barcode: '',
+                spec: '',
+                category_id: '',
+                manufacturer: '',
+                track_limit: 10,
+                spring_limit: 10,
+                price: 0,
+                cost: 0,
+                member_price: 0,
+                metadata: {
+                    material_code: '',
+                    points_full: 0,
+                    points_half: 0,
+                    points_half_amount: 0
+                },
+                is_active: true
+            },
+            isDeleteConfirmOpen: false,
+            deleteFormAction: '',
+            
+            confirmDelete(action) {
+                this.deleteFormAction = action;
+                this.isDeleteConfirmOpen = true;
+            },
+
+            formAction() {
+                if (!this.editing) return this.urls.store;
+                return this.urls.index + '/' + this.currentProduct.id;
+            },
+            openCreateModal() {
+                this.editing = false;
+                this.currentProduct = {
+                    id: '',
+                    names: { zh_TW: '', en: '', ja: '' },
+                    barcode: '',
+                    spec: '',
+                    category_id: '',
+                    manufacturer: '',
+                    track_limit: 10,
+                    spring_limit: 10,
+                    price: 0,
+                    cost: 0,
+                    member_price: 0,
+                    metadata: {
+                        material_code: '',
+                        points_full: 0,
+                        points_half: 0,
+                        points_half_amount: 0
+                    },
+                    is_active: true
+                };
+                this.showModal = true;
+                this.$nextTick(() => {
+                    this.syncSelect('modal-product-category', '');
+                });
+            },
+
+            openEditModal(product) {
+                this.editing = true;
+                
+                // Extract translations
+                let names = { zh_TW: product.name, en: '', ja: '' };
+                if (product.translations) {
+                   product.translations.forEach(t => {
+                       names[t.locale] = t.text;
+                   });
+                }
+
+                this.currentProduct = {
+                    ...product,
+                    names: names,
+                    category_id: product.category_id || '',
+                    metadata: {
+                        material_code: product.metadata?.material_code || '',
+                        points_full: product.metadata?.points_full || 0,
+                        points_half: product.metadata?.points_half || 0,
+                        points_half_amount: product.metadata?.points_half_amount || 0
+                    },
+                    is_active: !!product.is_active
+                };
+                this.showModal = true;
+                this.$nextTick(() => {
+                    this.syncSelect('modal-product-category', this.currentProduct.category_id);
+                });
+            },
+
+            syncSelect(id, value) {
+                const selectElement = document.getElementById(id);
+                if (selectElement) {
+                    selectElement.value = value;
+                    selectElement.dispatchEvent(new Event('change'));
+                    
+                    // Preline HSSelect specifically handles the UI sync
+                    if (window.HSSelect && window.HSSelect.getInstance(selectElement)) {
+                        window.HSSelect.getInstance(selectElement).setValue(value);
+                    }
+                }
+            }
+        }));
+    });
+</script>
+@endsection

resources/views/layouts/partials/sidebar-menu.blade.php

@@ -200,7 +200,7 @@
     </button>
     <div x-show="open" x-collapse>
         <ul class="luxury-submenu" data-sidebar-sub>
-            <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.data-config.products') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.data-config.products') }}">{{ __('Product Management') }}</a></li>
+            <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.data-config.products.*') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.data-config.products.index') }}">{{ __('Product Management') }}</a></li>
             <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.data-config.advertisements') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.data-config.advertisements') }}">{{ __('Advertisement Management') }}</a></li>
             <li><a class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm transition-colors rounded-lg {{ request()->routeIs('admin.data-config.admin-products') ? 'text-slate-900 dark:text-white bg-slate-100 dark:bg-white/5' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white' }}" href="{{ route('admin.data-config.admin-products') }}">{{ __('Product Status') }}</a></li>
             @can('menu.data-config.sub-accounts')

routes/web.php

@@ -113,7 +113,7 @@ Route::middleware(['auth', 'verified', 'tenant.access'])->prefix('admin')->name(
 
         // 9. 資料設定
         Route::prefix('data-config')->name('data-config.')->group(function () {
-            Route::get('/products', [App\Http\Controllers\Admin\DataConfigController::class , 'products'])->name('products');
+            Route::resource('products', App\Http\Controllers\Admin\ProductController::class)->except(['show']);
             Route::get('/advertisements', [App\Http\Controllers\Admin\DataConfigController::class , 'advertisements'])->name('advertisements');
             Route::get('/admin-products', [App\Http\Controllers\Admin\DataConfigController::class , 'adminProducts'])->name('admin-products');
             Route::get('/sub-accounts', [App\Http\Controllers\Admin\PermissionController::class , 'accounts'])->name('sub-accounts')->middleware('can:menu.data-config.sub-accounts');