feat(admin): show primary preview next to order ID and increase thumbnail sizes

src/components/admin/OrderCard.vue

@@ -18,8 +18,12 @@
       <!-- Info Column (Clickable for editing) -->
       <div class="p-6 lg:w-1/2 cursor-pointer hover:bg-primary/5 transition-colors" @click="triggerEditOrder">
         <div class="flex items-center justify-between mb-4">
-          <div class="flex items-center gap-2">
-            <span class="text-xl font-black text-foreground bg-primary/10 px-3 py-1 rounded-xl tracking-tight">#{{ order.id }}</span>
+          <div class="flex items-center gap-3">
+            <div class="w-12 h-12 bg-background/80 rounded-xl flex items-center justify-center border border-border/50 shadow-inner group-hover:border-primary/50 transition-colors overflow-hidden shrink-0">
+               <img v-if="order.files?.[0]?.preview_path" :src="`${resourcesBaseUrl}/${order.files[0].preview_path}`" class="w-full h-full object-contain p-1" />
+               <Package v-else class="w-6 h-6 text-primary" />
+            </div>
+            <span class="text-xl font-black text-foreground bg-primary/5 px-3 py-1 rounded-xl tracking-tight">#{{ order.id }}</span>
           </div>
           <span :class="['flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider', statusColor]">
             <component :is="statusIcon" class="w-3.5 h-3.5" />
@@ -122,12 +126,12 @@
 
         <div class="space-y-3">
           <template v-for="(f, i) in order.files" :key="f.id || i">
-            <div v-if="f.id" class="relative group/file bg-background/30 border border-border/50 rounded-2xl overflow-hidden hover:border-primary/30 transition-all flex h-20">
-              <div class="w-20 bg-muted/20 flex items-center justify-center border-r border-border/50 overflow-hidden">
+            <div v-if="f.id" class="relative group/file bg-background/30 border border-border/50 rounded-2xl overflow-hidden hover:border-primary/30 transition-all flex h-24">
+              <div class="w-24 bg-muted/20 flex items-center justify-center border-r border-border/50 overflow-hidden relative">
                 <img v-if="f.preview_path" :src="`${resourcesBaseUrl}/${f.preview_path}`" class="w-full h-full object-contain p-1" />
-                <FileBox v-else class="w-6 h-6 text-muted-foreground/30" />
+                <FileBox v-else class="w-8 h-8 text-muted-foreground/30" />
                 <div class="absolute inset-0 bg-primary/20 opacity-0 group-hover/file:opacity-100 transition-opacity flex items-center justify-center">
-                  <a :href="`${resourcesBaseUrl}/${f.file_path}`" target="_blank" class="bg-card w-8 h-8 rounded-full flex items-center justify-center shadow-lg"><Download class="w-4 h-4 text-primary" /></a>
+                  <a :href="`${resourcesBaseUrl}/${f.file_path}`" target="_blank" class="bg-card w-10 h-10 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition-transform"><Download class="w-5 h-5 text-primary" /></a>
                 </div>
               </div>
               <div class="flex-1 p-3 flex flex-col justify-center min-w-0">
@@ -159,7 +163,7 @@
             </label>
           </div>
           <div class="flex flex-wrap gap-2">
-            <div v-for="(p, i) in order.photos" :key="i" class="relative group/img overflow-hidden rounded-lg border border-border/50 w-12 h-12 bg-background/50">
+            <div v-for="(p, i) in order.photos" :key="i" class="relative group/img overflow-hidden rounded-xl border border-border/50 w-20 h-20 bg-background/50 hover:border-primary/50 transition-all">
               <img :src="`${resourcesBaseUrl}/${p.file_path}`" class="w-full h-full object-cover" />
               <button @click="$emit('toggle-photo-public', p.id, p.is_public)" :class="`absolute top-0 right-0 p-0.5 rounded-bl-md bg-black/60 z-10 transition-colors ${p.is_public ? 'text-blue-400 hover:text-blue-300' : 'text-gray-400 hover:text-white'}`">
                 <Eye v-if="p.is_public" class="w-2.5 h-2.5" /><EyeOff v-else class="w-2.5 h-2.5" />