fix: exhaustive click handlers and hoisting in Admin.vue

src/components/admin/OrderCard.vue

@@ -15,8 +15,8 @@
     </div>
 
     <div class="flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-border/50">
-      <!-- Info Column -->
-      <div class="p-6 lg:w-1/2">
+      <!-- Info Column (Clickable for editing) -->
+      <div class="p-6 lg:w-1/2 cursor-pointer hover:bg-primary/5 transition-colors" @click="$emit('edit-order', order)">
         <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>

src/pages/Admin.vue

@@ -386,6 +386,26 @@ const postForm = reactive({ slug: "", title_en: "", title_me: "", title_ru: "",
 const userForm = reactive({ email: "", password: "", first_name: "", last_name: "", phone: "" });
 const orderForm = reactive({ total_price: 0, material_name: "", color_name: "", quantity: 1, first_name: "", last_name: "", email: "", phone: "", shipping_address: "", notes: "", review_text: "", rating: 0 });
 
+const handleEditOrder = (order: any) => {
+  console.log("CLICK DETECTED: Order #", order.id);
+  editingOrder.value = order;
+  Object.assign(orderForm, {
+    total_price: order.invoice_amount || 0,
+    material_name: order.material_name || "",
+    color_name: order.color_name || "",
+    quantity: order.quantity || 1,
+    first_name: order.first_name || "",
+    last_name: order.last_name || "",
+    email: order.email || "",
+    phone: order.phone || "",
+    shipping_address: order.shipping_address || "",
+    notes: order.notes || "",
+    review_text: order.review_text || "",
+    rating: order.rating || 0
+  });
+  showAddModal.value = true;
+};
+
 const newColor = ref("");
 
 // Fetching Logic
@@ -444,25 +464,6 @@ const handleUpdateFiscal = async (id: number, data: any) => {
   } catch (err: any) { toast.error(err.message); }
 };
 
-const handleEditOrder = (order: any) => {
-  console.log("Editing order:", order.id);
-  editingOrder.value = order;
-  Object.assign(orderForm, {
-    total_price: order.invoice_amount || 0,
-    material_name: order.material_name || "",
-    color_name: order.color_name || "",
-    quantity: order.quantity || 1,
-    first_name: order.first_name || "",
-    last_name: order.last_name || "",
-    email: order.email || "",
-    phone: order.phone || "",
-    shipping_address: order.shipping_address || "",
-    notes: order.notes || "",
-    review_text: order.review_text || "",
-    rating: order.rating || 0
-  });
-  showAddModal.value = true;
-};
 
 const handleApproveReview = async (id: number) => {
   try {