[FEAT] 移除「商品狀態」冗餘模組、優化麵包屑導航與完善帳號角色過濾邏輯

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

@@ -232,7 +232,7 @@
                                     class="p-2 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 transition-all border border-transparent hover:border-emerald-500/20"
                                     title="{{ __('Enable') }}">
                                     <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="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 Naz 010 1.971l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653z" />
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 0 1 0 1.971l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653z" />
                                     </svg>
                                 </button>
                                 @endif

resources/views/admin/data-config/accounts.blade.php

@@ -743,13 +743,15 @@ $roleSelectConfig = [
             get filteredRoles() {
                 const companyId = this.currentUser.company_id;
                 if (!companyId || companyId.toString().trim() === '') {
+                    // 系統管理層級：僅顯示全域角色 (company_id 為空)
                     return this.allRoles.filter(r => !r.company_id || r.company_id.toString().trim() === '');
                 } else {
                     let companyRoles = this.allRoles.filter(r => r.company_id == companyId);
                     if (companyRoles.length > 0) {
                         return companyRoles;
                     } else {
-                        return this.allRoles.filter(r => !r.company_id || r.company_id.toString().trim() === '');
+                        // 租戶層級 fallback：顯示全域角色但明確排除 super-admin
+                        return this.allRoles.filter(r => (!r.company_id || r.company_id.toString().trim() === '') && r.name !== 'super-admin');
                     }
                 }
             },
@@ -763,7 +765,8 @@ $roleSelectConfig = [
                     roles = this.allRoles.filter(r => !r.company_id || r.company_id.toString().trim() === '');
                 } else {
                     let companyRoles = this.allRoles.filter(r => r.company_id == initialCompanyId);
-                    roles = companyRoles.length > 0 ? companyRoles : this.allRoles.filter(r => !r.company_id || r.company_id.toString().trim() === '');
+                    // 這裡也要同步排除 super-admin
+                    roles = companyRoles.length > 0 ? companyRoles : this.allRoles.filter(r => (!r.company_id || r.company_id.toString().trim() === '') && r.name !== 'super-admin');
                 }
 
                 if (roles.length > 0) {

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

@@ -122,8 +122,6 @@ $roleSelectConfig = [
                         @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>
@@ -132,19 +130,34 @@ $roleSelectConfig = [
                         </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>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 tracking-widest uppercase">{{ __('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>
+                                <span class="inline-flex items-center px-3 py-1 rounded-full text-[11px] font-black bg-rose-500/10 text-rose-500 border border-rose-500/20 tracking-widest uppercase">{{ __('Disabled') }}</span>
                             @endif
                         </td>
                         <td class="px-6 py-6 text-right">
                             <div class="flex justify-end items-center gap-2">
-                                <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') }}">
-                                    <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>
+                                @if($product->is_active)
+                                    <button type="button" 
+                                            @click="toggleFormAction = '{{ route($baseRoute . '.status.toggle', $product->id) }}'; isStatusConfirmOpen = true"
+                                            class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-amber-500 hover:bg-amber-500/5 transition-all border border-transparent hover:border-amber-500/20" 
+                                            title="{{ __('Disable') }}">
+                                        <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="M15.75 5.25v13.5m-7.5-13.5v13.5" /></svg>
+                                    </button>
+                                @else
+                                    <button type="button" 
+                                            @click="toggleFormAction = '{{ route($baseRoute . '.status.toggle', $product->id) }}'; $nextTick(() => $refs.statusToggleForm.submit())"
+                                            class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-emerald-500 hover:bg-emerald-500/5 transition-all border border-transparent hover:border-emerald-500/20" 
+                                            title="{{ __('Enable') }}">
+                                        <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="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347c-.75.412-1.667-.13-1.667-.986V5.653z" /></svg>
+                                    </button>
+                                @endif
                                 <a href="{{ route($baseRoute . '.edit', $product->id) }}" 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>
                                 </a>
+                                <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') }}">
+                                    <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>
                                 <button type="button" @click="viewProductDetail(@js($product))" class="p-2.5 rounded-lg bg-slate-50 dark:bg-slate-800 text-slate-400 hover:text-indigo-500 hover:bg-indigo-500/5 transition-all border border-transparent hover:border-indigo-500/20" title="{{ __('View Details') }}">
                                     <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="M2.036 12.322a1.012 1.012 0 010-.644C3.67 8.5 7.652 5 12 5c4.418 0 8.401 3.5 10.014 6.722a1.012 1.012 0 010 .644C20.33 15.5 16.348 19 12 19c-4.412 0-8.401-3.5-10.014-6.722z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                                 </button>
@@ -169,7 +182,21 @@ $roleSelectConfig = [
 
 
     <!-- Delete Confirm Modal -->
-    <x-delete-confirm-modal :message="__('Are you sure you want to delete this product? All related historical translation data will also be removed.')" />
+    <x-delete-confirm-modal 
+        :title="__('Delete Product Confirmation')"
+        :message="__('Are you sure you want to delete this product? All related historical translation data will also be removed.')" 
+    />
+
+    <!-- Status Toggle Modal -->
+    <x-status-confirm-modal 
+        :title="__('Disable Product Confirmation')" 
+        :message="__('Are you sure you want to change the status of this product? Disabled products will not be visible on the machine.')" 
+    />
+
+    <form x-ref="statusToggleForm" :action="toggleFormAction" method="POST" class="hidden">
+        @csrf
+        @method('PATCH')
+    </form>
 
     <form x-ref="deleteForm" :action="deleteFormAction" method="POST" class="hidden">
         @csrf
@@ -202,139 +229,165 @@ $roleSelectConfig = [
                  x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
                  x-transition:leave-start="translate-x-0"
                  x-transition:leave-end="translate-x-full"
-                 class="relative w-screen max-w-2xl"
+                 class="relative w-screen max-w-md"
                  @click.stop>
                 
                 <div class="h-full flex flex-col bg-white dark:bg-slate-900 shadow-2xl border-l border-slate-200 dark:border-white/10 overflow-y-auto luxury-scrollbar">
-                    <!-- Close Button Overlay -->
-                    <div class="absolute top-6 right-6 z-10">
-                        <button @click="isDetailOpen = false" class="p-2 rounded-full bg-slate-100/80 dark:bg-slate-800/80 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 backdrop-blur-md transition-all hover:rotate-90">
-                            <svg class="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" /></svg>
+                    <div class="px-6 py-3 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between sticky top-0 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md z-20">
+                        <div>
+                            <h2 class="text-xl font-black text-slate-800 dark:text-white">{{ __('Product Details') }}</h2>
+                            <p class="text-[11px] font-bold text-slate-400 uppercase tracking-[0.2em] mt-1" x-text="selectedProduct?.name + ' (' + getCategoryName(selectedProduct?.category_id) + ')'"></p>
+                        </div>
+                        <button @click="isDetailOpen = false"
+                            class="p-2 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
+                            <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M6 18L18 6M6 6l12 12" />
+                            </svg>
                         </button>
                     </div>
 
-                    <div class="p-8 md:p-12">
-                        <!-- Header with Status -->
-                        <div class="flex flex-col md:flex-row gap-10 mb-12 animate-luxury-in">
-                            <!-- Image Section -->
-                            <div class="w-full md:w-48 shrink-0">
-                                <div class="aspect-square rounded-[2rem] bg-slate-50 dark:bg-slate-800 flex items-center justify-center overflow-hidden border border-slate-100 dark:border-white/5 shadow-inner group">
-                                    <template x-if="selectedProduct?.image_url">
-                                        <img :src="selectedProduct.image_url" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
-                                    </template>
-                                    <template x-if="!selectedProduct?.image_url">
-                                        <svg class="size-16 text-slate-200 dark:text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.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>
-                                    </template>
-                                </div>
-                            </div>
-
-                            <!-- Identity Section -->
-                            <div class="flex-1 flex flex-col justify-center">
-                                <div class="inline-flex items-center gap-2 mb-4">
-                                    <span class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest border transition-all duration-300"
-                                          :class="selectedProduct?.is_active ? 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20 shadow-sm shadow-emerald-500/10' : 'bg-slate-500/10 text-slate-500 border-slate-500/20'">
-                                        <span x-text="selectedProduct?.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
-                                    </span>
-                                    <span class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded-lg border border-transparent dark:border-white/5" x-text="getCategoryName(selectedProduct?.category_id)"></span>
-                                </div>
-                                <h2 class="text-4xl font-black text-slate-800 dark:text-white leading-tight font-display tracking-tight" x-text="selectedProduct?.name"></h2>
-                                <p class="text-sm font-mono font-bold text-cyan-500 mt-2 tracking-widest uppercase" x-text="selectedProduct?.barcode"></p>
-                            </div>
+                    <div class="flex-1 overflow-y-auto px-6 py-8 space-y-8 custom-scrollbar">
+                        <!-- Header Status Info (Minimized) -->
+                        <div class="flex items-center gap-3 animate-luxury-in">
+                            <span class="px-3 py-1 rounded-full text-xs font-black uppercase tracking-widest border transition-all duration-300"
+                                  :class="selectedProduct?.is_active ? 'bg-emerald-500/10 text-emerald-600 border-emerald-500/20 shadow-sm shadow-emerald-500/10' : 'bg-slate-500/10 text-slate-500 border-slate-500/20'">
+                                <span x-text="selectedProduct?.is_active ? '{{ __('Active') }}' : '{{ __('Disabled') }}'"></span>
+                            </span>
+                            <span class="text-xs font-bold text-slate-400 dark:text-slate-300" x-text="'ID: #' + (selectedProduct?.id || '-')"></span>
                         </div>
 
-                        <!-- Info Grid -->
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-12">
-                            <!-- Pricing Card -->
-                            <div class="luxury-card p-6 rounded-[1.5rem] border border-slate-100 dark:border-white/5 space-y-6">
-                                <h3 class="text-xs font-black text-slate-400 uppercase tracking-[.2em] flex items-center gap-2">
-                                    <svg class="size-4 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                                    {{ __('Pricing Details') }}
-                                </h3>
-                                <div class="grid grid-cols-2 gap-6">
-                                    <div class="space-y-1">
-                                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('List Price') }}</p>
-                                        <p class="text-2xl font-black text-slate-800 dark:text-white leading-none">$<span x-text="formatNumber(selectedProduct?.price)"></span></p>
+                        <div class="space-y-8">
+                            <!-- Image Section (Square) -->
+                            <template x-if="selectedProduct?.image_url">
+                                <section class="animate-luxury-in">
+                                    <h3 class="text-[10px] font-black text-indigo-500 uppercase tracking-[0.3em] mb-4">{{ __('Product Image') }}</h3>
+                                    <div @click="isImageZoomed = true" 
+                                         class="max-w-xs mx-auto aspect-square rounded-[2rem] bg-slate-50 dark:bg-slate-800 overflow-hidden border border-slate-100 dark:border-white/5 shadow-lg group relative cursor-zoom-in">
+                                        <img :src="selectedProduct.image_url" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000">
+                                        <div class="absolute inset-0 bg-slate-950/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                                            <div class="p-3 rounded-full bg-white/20 backdrop-blur-md text-white border border-white/30 scale-50 group-hover:scale-100 transition-all duration-500 shadow-2xl">
+                                                <svg class="size-6 shadow-glow" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6" /></svg>
+                                            </div>
+                                        </div>
                                     </div>
-                                    <div class="space-y-1">
-                                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Member Price') }}</p>
-                                        <p class="text-2xl font-black text-emerald-500 leading-none">$<span x-text="formatNumber(selectedProduct?.member_price)"></span></p>
+                                </section>
+                            </template>
+
+                             <section class="space-y-4 animate-luxury-in" style="animation-delay: 100ms">
+                                <h3 class="text-xs font-black text-cyan-500 uppercase tracking-[0.3em]">{{ __('Identity & Codes') }}</h3>
+                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
+                                        <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Barcode') }}</span>
+                                        <div class="text-[15px] font-mono font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.barcode || '-'"></div>
                                     </div>
-                                    <div class="space-y-1 col-span-2 pt-4 border-t border-slate-50 dark:border-white/5">
-                                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Cost Basis') }}</p>
-                                        <p class="text-lg font-bold text-slate-500 leading-none">$<span x-text="formatNumber(selectedProduct?.cost)"></span></p>
+                                    <template x-if="selectedProduct?.metadata?.material_code">
+                                        <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
+                                            <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Material Code') }}</span>
+                                            <div class="text-[15px] font-mono font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.metadata?.material_code"></div>
+                                        </div>
+                                    </template>
+                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
+                                        <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Manufacturer') }}</span>
+                                        <div class="text-[15px] font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.manufacturer || '-'"></div>
+                                    </div>
+                                    <template x-if="selectedProduct?.company?.name">
+                                        <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80 group hover:border-cyan-500/30 transition-colors">
+                                            <span class="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1.5">{{ __('Company') }}</span>
+                                            <div class="text-[15px] font-bold text-slate-700 dark:text-slate-200" x-text="selectedProduct?.company?.name"></div>
+                                        </div>
+                                    </template>
+                                </div>
+                            </section>
+
+                            <!-- Pricing Section -->
+                             <section class="space-y-4 animate-luxury-in" style="animation-delay: 200ms">
+                                <h3 class="text-xs font-black text-emerald-500 uppercase tracking-[0.3em]">{{ __('Pricing Information') }}</h3>
+                                <div class="luxury-card divide-y divide-slate-50 dark:divide-white/5 overflow-hidden border border-slate-100 dark:border-white/5 shadow-sm">
+                                    <div class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
+                                        <span class="text-[15px] font-bold text-slate-500">{{ __('Retail Price') }}</span>
+                                        <span class="text-lg font-black text-slate-800 dark:text-white">$<span x-text="formatNumber(selectedProduct?.price)"></span></span>
+                                    </div>
+                                    <div class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
+                                        <span class="text-[15px] font-bold text-slate-500">{{ __('Member Price') }}</span>
+                                        <span class="text-lg font-black text-emerald-500">$<span x-text="formatNumber(selectedProduct?.member_price)"></span></span>
+                                    </div>
+                                    <div class="p-5 flex items-center justify-between group hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
+                                        <span class="text-[15px] font-bold text-slate-400">{{ __('Cost') }}</span>
+                                        <span class="text-sm font-bold text-slate-500 tracking-tight">$<span x-text="formatNumber(selectedProduct?.cost)"></span></span>
                                     </div>
                                 </div>
-                            </div>
+                            </section>
 
-                            <!-- Specs Card -->
-                            <div class="luxury-card p-6 rounded-[1.5rem] border border-slate-100 dark:border-white/5 space-y-6">
-                                <h3 class="text-xs font-black text-slate-400 uppercase tracking-[.2em] flex items-center gap-2">
-                                    <svg class="size-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
-                                    {{ __('Channel Limits') }}
-                                </h3>
-                                <div class="space-y-8">
+                             <!-- Storage & Limits -->
+                            <section class="space-y-4 animate-luxury-in" style="animation-delay: 300ms">
+                                <h3 class="text-xs font-black text-indigo-500 uppercase tracking-[0.3em]">{{ __('Channel Limits Configuration') }}</h3>
+                                <div class="luxury-card p-6 border border-slate-100 dark:border-white/5 space-y-6 shadow-sm">
                                     <div class="flex items-center justify-between">
                                         <div class="space-y-1">
-                                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Track Limit') }}</p>
-                                            <p class="text-3xl font-black text-indigo-500 tracking-tighter" x-text="selectedProduct?.track_limit"></p>
+                                            <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ __('Track Limit') }}</p>
+                                            <p class="text-3xl font-black text-indigo-500 tracking-tighter" x-text="selectedProduct?.track_limit || '0'"></p>
                                         </div>
                                         <div class="h-10 w-px bg-slate-100 dark:bg-white/10"></div>
                                         <div class="space-y-1 text-right">
-                                            <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Spring Limit') }}</p>
-                                            <p class="text-3xl font-black text-amber-500 tracking-tighter" x-text="selectedProduct?.spring_limit"></p>
+                                            <p class="text-xs font-bold text-slate-400 uppercase tracking-widest">{{ __('Spring Limit') }}</p>
+                                            <p class="text-3xl font-black text-amber-500 tracking-tighter" x-text="selectedProduct?.spring_limit || '0'"></p>
                                         </div>
                                     </div>
-                                    <div class="relative h-2 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
-                                        <div class="absolute inset-y-0 left-0 bg-indigo-500 rounded-full transition-all duration-1000" :style="`width: ${Math.min(100, (selectedProduct?.track_limit / 50) * 100)}%`" x-show="isDetailOpen"></div>
+                                </div>
+                            </section>
+
+                             <!-- Loyalty Points -->
+                            <section class="space-y-4 animate-luxury-in" style="animation-delay: 400ms">
+                                <h3 class="text-xs font-black text-rose-500 uppercase tracking-[0.3em]">{{ __('Loyalty & Features') }}</h3>
+                                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
+                                        <span class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Full Points') }}</span>
+                                        <div class="text-lg font-black text-rose-500 font-mono" x-text="selectedProduct?.metadata?.points_full || '0'"></div>
+                                    </div>
+                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
+                                        <span class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Half Points') }}</span>
+                                        <div class="text-lg font-black text-indigo-500 font-mono" x-text="selectedProduct?.metadata?.points_half || '0'"></div>
+                                    </div>
+                                    <div class="bg-slate-50 dark:bg-slate-800/40 p-5 rounded-2xl border border-slate-100 dark:border-slate-800/80">
+                                        <span class="text-xs font-black text-slate-400 uppercase tracking-widest block mb-1">{{ __('Half Points Amount') }}</span>
+                                        <div class="text-lg font-black text-emerald-500 font-mono" x-text="selectedProduct?.metadata?.points_half_amount || '0'"></div>
                                     </div>
                                 </div>
-                            </div>
+                            </section>
                         </div>
 
-                        <!-- Extended Features Section -->
-                        <div class="luxury-card p-8 rounded-[2rem] bg-slate-50/50 dark:bg-slate-800/30 border border-slate-100 dark:border-white/5 mb-12">
-                            <h3 class="text-xs font-black text-slate-800 dark:text-white uppercase tracking-[0.25em] mb-8 flex items-center gap-3">
-                                <span class="size-2 rounded-full bg-cyan-500 animate-pulse"></span>
-                                {{ __('Feature Configurations') }}
-                            </h3>
-                            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
-                                <div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
-                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Material Code') }}</p>
-                                    <p class="text-sm font-black text-slate-700 dark:text-slate-200 font-mono" x-text="selectedProduct?.metadata?.material_code || '-'"></p>
-                                </div>
-                                <div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
-                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Full Points') }}</p>
-                                    <p class="text-sm font-black text-cyan-600 dark:text-cyan-400 font-mono" x-text="selectedProduct?.metadata?.points_full || '0'"></p>
-                                </div>
-                                <div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
-                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Half Points') }}</p>
-                                    <p class="text-sm font-black text-indigo-600 dark:text-indigo-400 font-mono" x-text="selectedProduct?.metadata?.points_half || '0'"></p>
-                                </div>
-                                <div class="space-y-1.5 p-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-50 dark:border-white/5">
-                                    <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ __('Half Amount') }}</p>
-                                    <p class="text-sm font-black text-emerald-600 dark:text-emerald-400 font-mono" x-text="selectedProduct?.metadata?.points_half_amount || '0'"></p>
-                                </div>
-                            </div>
-                        </div>
 
-                        <!-- Footer Timestamps -->
-                        <div class="flex flex-col md:flex-row items-center justify-between gap-4 pt-10 border-t border-slate-100 dark:border-white/5 text-[10px] font-bold text-slate-400 uppercase tracking-[.25em]">
-                            <div class="flex items-center gap-6">
-                                <div class="flex flex-col gap-1">
-                                    <span>{{ __('Created At') }}</span>
-                                    <span class="text-slate-500 dark:text-slate-300 font-mono" x-text="formatDate(selectedProduct?.created_at)"></span>
-                                </div>
-                                <div class="w-px h-8 bg-slate-100 dark:bg-white/10 hidden md:block"></div>
-                                <div class="flex flex-col gap-1">
-                                    <span>{{ __('Updated At') }}</span>
-                                    <span class="text-slate-500 dark:text-slate-300 font-mono" x-text="formatDate(selectedProduct?.updated_at)"></span>
-                                </div>
-                            </div>
-                            <button @click="isDetailOpen = false" class="btn-luxury-secondary px-8 py-3">
-                                {{ __('Close Panel') }}
-                            </button>
-                        </div>
                     </div>
+
+                    <div class="p-6 border-t border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
+                        <button @click="isDetailOpen = false" class="w-full btn-luxury-ghost">{{ __('Close Panel') }}</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Image Zoom Modal -->
+        <div x-show="isImageZoomed" 
+             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 z-[110] flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl"
+             @keydown.escape.window="isImageZoomed = false"
+             x-cloak>
+            
+            <button @click="isImageZoomed = false" class="absolute top-6 right-6 p-3 rounded-full bg-white/10 text-white hover:bg-white/20 transition-all border border-white/10 active:scale-95">
+                <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 class="relative max-w-5xl w-full aspect-square md:aspect-auto md:max-h-[90vh] flex items-center justify-center" @click.away="isImageZoomed = false">
+                <img :src="selectedProduct?.image_url" class="max-w-full max-h-full rounded-[2.5rem] shadow-2xl border border-white/10 animate-luxury-in">
+                
+                <div class="absolute bottom-[-4rem] left-1/2 -translate-x-1/2 text-white/60 text-sm font-bold tracking-widest uppercase animate-luxury-in" style="animation-delay: 200ms">
+                    <span x-text="selectedProduct?.name"></span>
                 </div>
             </div>
         </div>
@@ -348,10 +401,17 @@ $roleSelectConfig = [
         Alpine.data('productManager', () => ({
             isDeleteConfirmOpen: false,
             isDetailOpen: false,
+            isImageZoomed: false,
+            isStatusConfirmOpen: false,
             deleteFormAction: '',
+            toggleFormAction: '',
             selectedProduct: null,
             categories: [],
 
+            submitConfirmedForm() {
+                this.$refs.statusToggleForm.submit();
+            },
+
             init() {
                 this.categories = JSON.parse(this.$el.dataset.categories || '[]');
             },
@@ -368,7 +428,7 @@ $roleSelectConfig = [
 
             getCategoryName(id) {
                 const category = this.categories.find(c => c.id == id);
-                return category ? (category.name || '{{ __('Uncategorized') }}') : '{{ __('Uncategorized') }}';
+                return category ? (category.name || "{{ __('Uncategorized') }}") : "{{ __('Uncategorized') }}";
             },
 
             formatNumber(val) {