refaktoryzacja paneli i widokow

frontend/src/pages/IndexPage.vue

@@ -1,28 +1,57 @@
 <template>
   <q-page class="content">
+    <section class="drawer-test-actions">
+      <q-btn
+        color="primary"
+        label="Open Advanced Search"
+        unelevated
+        @click="openAdvancedSearch"
+      />
+      <q-btn
+        color="secondary"
+        label="Open Product Specification"
+        unelevated
+        @click="openProductSpecification"
+      />
+      <q-btn
+        color="accent"
+        label="Open Production Statuses"
+        unelevated
+        @click="openProductionStatuses"
+      />
+    </section>
+
     <section class="filters">
       <div class="search-field">
-        <input class="input" placeholder="Search orders or models..." type="text" />
-        <div class="icon-wrap">
+        <input
+          v-model="searchQuery"
+          class="input"
+          placeholder="Search orders or models..."
+          type="text"
+          @keyup.enter="applySearch"
+        />
+        <div class="icon-wrap" @click="applySearch">
           <span class="material-symbols-outlined" data-icon="tune">tune</span>
         </div>
       </div>
 
       <div class="month-tabs no-scrollbar">
-        <button class="tab active">All</button>
-        <button class="tab">Jan</button>
-        <button class="tab">Feb</button>
-        <button class="tab">Mar</button>
-        <button class="tab">Apr</button>
-        <button class="tab">May</button>
-        <button class="tab">Jun</button>
+        <button
+          v-for="month in monthFilters"
+          :key="month.value"
+          class="tab"
+          :class="{ active: activeMonth === month.value }"
+          @click="selectMonth(month.value)"
+        >
+          {{ month.label }}
+        </button>
       </div>
     </section>
 
     <div class="stats">
       <div class="stat-card primary">
         <span class="label">In Progress</span>
-        <span class="value">14 Units</span>
+        <span class="value">{{ loadedProductsCount }} Units</span>
       </div>
       <div class="stat-card tertiary">
         <span class="label">Avg Lead Time</span>
@@ -31,49 +60,87 @@
     </div>
 
     <div class="orders">
-      <order-card :order="order[0]" />
-      <order-card :order="order[1]" />
-      <order-card :order="order[2]" />
+      <order-card
+        v-for="product in productsStore.items"
+        :key="product.id"
+        :product="product"
+        @add-production-event="openProductionStatuses"
+      />
     </div>
   </q-page>
 </template>
 
 <script setup>
+import { computed, onMounted, ref, watch } from 'vue'
 import OrderCard from 'src/components/OrderCard.vue'
-const order = [
-  {
-    orderId: '0112/2025/12',
-    model: 'Duvell 6',
-    client: 'Sleek Elite',
-    assignedOrders: ['PAZ-25'],
-    finish: 'GLOSS',
-    steps: {
-      body: ['B', 'IZ', 'AK', 'LD', 'LD', 'LD', 'UV'],
-      neck: ['B', 'IZ', 'AK'],
-    },
-  },
-  {
-    orderId: '0029/2024/1',
-    model: 'Legend 6',
-    client: 'Heindeburs Indonesia',
-    assignedOrders: ['STY-25'],
-    finish: 'MAT',
-    steps: {
-      body: ['B', 'M'],
-    },
-  },
-  {
-    orderId: '0001/2025/20',
-    model: 'Regius 6 Core',
-    client: 'Mayo Stock',
-    assignedOrders: ['KWI-25', 'SUMMIT'],
-    finish: 'MIX',
-    steps: {
-      body: ['B', 'IZ', 'AK', 'LD'],
-    },
-  },
+import { UI_PANELS, useUiStore } from 'src/stores/uiStore'
+import { useProductsStore } from 'src/stores/productsStore'
+
+const productsStore = useProductsStore()
+const uiStore = useUiStore()
+const searchQuery = ref(productsStore.filters.search)
+const activeMonth = ref('all')
+
+const monthFilters = [
+  { label: 'All', value: 'all' },
+  { label: 'Jan', value: 1 },
+  { label: 'Feb', value: 2 },
+  { label: 'Mar', value: 3 },
+  { label: 'Apr', value: 4 },
+  { label: 'May', value: 5 },
+  { label: 'Jun', value: 6 },
 ]
-//
+
+const loadedProductsCount = computed(() => productsStore.count)
+
+onMounted(() => {
+  productsStore.fetchFirstPage()
+})
+
+watch(searchQuery, (value) => {
+  productsStore.setFilters({ search: value })
+})
+
+function openAdvancedSearch() {
+  uiStore.openDrawer(UI_PANELS.ADVANCED_SEARCH, {
+    source: 'index-page',
+  })
+}
+
+function openProductSpecification() {
+  const product = productsStore.items[0]
+
+  if (!product) {
+    return
+  }
+
+  uiStore.openDrawer(UI_PANELS.PRODUCT_SPECIFICATION, {
+    productId: product.id,
+    mode: 'edit',
+  })
+}
+
+function openProductionStatuses({ product, partType } = {}) {
+  const selectedProduct = product ?? productsStore.items[0]
+
+  if (!selectedProduct) {
+    return
+  }
+
+  uiStore.openDrawer(UI_PANELS.PRODUCTION_STATUSES, {
+    orderId: selectedProduct.orderId,
+    productId: selectedProduct.id,
+    partType,
+  })
+}
+
+function applySearch() {
+  productsStore.applyFilters({ search: searchQuery.value })
+}
+
+function selectMonth(month) {
+  activeMonth.value = month
+}
 </script>
 
 <style lang="scss" scoped>
@@ -88,6 +155,13 @@ const order = [
   padding: 1rem;
 }
 
+.drawer-test-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
 .filters {
   display: grid;
   gap: 1rem;