feat: added smart material and color selectors to order edit

src/pages/Admin.vue

@@ -184,11 +184,18 @@
                 </div>
                 <div class="space-y-1">
                   <label class="text-[10px] font-bold uppercase text-primary/60 ml-1">{{ t("admin.fields.material") }}</label>
-                  <input v-model="orderForm.material_name" class="w-full bg-background border border-border/50 rounded-xl px-3 py-2 text-sm" />
+                  <select v-model="orderForm.material_name" class="w-full bg-background border border-border/50 rounded-xl px-3 py-2 text-sm">
+                    <option value="">{{ t("admin.fields.material") }}...</option>
+                    <option v-for="m in activeMaterials" :key="m.id" :value="m.name">{{ m.name }}</option>
+                  </select>
                 </div>
                 <div class="space-y-1">
                   <label class="text-[10px] font-bold uppercase text-primary/60 ml-1">{{ t("admin.fields.colors") }}</label>
-                  <input v-model="orderForm.color_name" class="w-full bg-background border border-border/50 rounded-xl px-3 py-2 text-sm" />
+                  <select v-model="orderForm.color_name" class="w-full bg-background border border-border/50 rounded-xl px-3 py-2 text-sm" :disabled="!orderForm.material_name">
+                    <option value="">{{ t("admin.fields.colors") }}...</option>
+                    <option v-for="c in materialColors" :key="c" :value="c">{{ c }}</option>
+                    <option v-if="orderForm.color_name && !materialColors.includes(orderForm.color_name)" :value="orderForm.color_name">{{ orderForm.color_name }} (Current)</option>
+                  </select>
                 </div>
             </div>
 
@@ -429,6 +436,17 @@ onUnmounted(() => {
 
 const newColor = ref("");
 
+const activeMaterials = computed(() => materials.value.filter(m => m.is_active));
+const selectedMaterialObj = computed(() => activeMaterials.value.find(m => m.name === orderForm.material_name));
+const materialColors = computed(() => {
+  if (!selectedMaterialObj.value) return [];
+  try {
+    return Array.isArray(selectedMaterialObj.value.available_colors) 
+      ? selectedMaterialObj.value.available_colors 
+      : JSON.parse(selectedMaterialObj.value.available_colors || "[]");
+  } catch { return []; }
+});
+
 // Fetching Logic
 let fetchTimeout: any = null;
 function debouncedFetchData() {
@@ -606,6 +624,8 @@ onMounted(async () => {
   if (!authStore.user || authStore.user.role !== "admin") { router.push("/auth"); return; }
   await loadAdminTranslations();
   fetchData();
+  // Ensure materials are loaded for order edit selectors
+  adminGetMaterials().then(res => materials.value = res).catch(() => {});
   window.addEventListener('paste', handlePaste);
 });