dodalem props

frontend/src/components/OrderCard.vue

@@ -3,14 +3,15 @@
     <div class="mark"></div>
     <div class="card-head">
       <div class="order-info">
-        <span class="order-id">0112/2025/12</span>
-        <h3 class="model">Regius 6 Core</h3>
-        <p class="client">Mayo Stock</p>
+        <span class="order-id">{{ order.orderId }}</span>
+        <h3 class="model">{{ order.model }}</h3>
+        <p class="client">{{ order.client }}</p>
         <div class="list-month">
-          <span class="month">IV</span>
-          <span class="month">2025-4</span>
+          <span v-for="assignedOrder in order.assignedOrders" :key="assignedOrder" class="month">
+            {{ assignedOrder }}
+          </span>
         </div>
-        <span class="finish">MIX</span>
+        <span class="finish">{{ order.finish }}</span>
       </div>
     </div>
     <div class="flow">
@@ -19,24 +20,10 @@
         <div class="line"></div>
       </div>
       <div class="steps no-scrollbar">
-        <div class="step">B</div>
-        <span class="arrow">&#x2192;</span>
-        <div class="step">IZ</div>
-        <span class="arrow">&#x2192;</span>
-        <div class="step">AK</div>
-        <span class="arrow">&#x2192;</span>
-        <div class="step">LD</div>
-        <span class="arrow">&#x2192;</span>
-        <div class="step">LD</div>
-        <span class="arrow">&#x2192;</span>
-        <div class="step">LD</div>
-        <span class="arrow">&#x2192;</span>
-        <div class="step">LD</div>
-        <span class="arrow">&#x2192;</span>
-        <div class="step">LD</div>
-        <span class="arrow">&#x2192;</span>
-        <div class="step">LD</div>
-        <span class="arrow">&#x2192;</span>
+        <template v-for="(step, index) in order.steps" :key="`${step}-${index}`">
+          <div class="step">{{ step }}</div>
+          <span class="arrow">&#x2192;</span>
+        </template>
         <button class="step add">
           <q-icon class="add-icon" name="add" />
         </button>
@@ -44,7 +31,14 @@
     </div>
   </div>
 </template>
-<script setup></script>
+<script setup>
+defineProps({
+  order: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
 <style lang="scss" scoped>
 .my-order-card {
   overflow: hidden;
@@ -168,7 +162,6 @@
       display: flex;
       align-items: center;
       gap: 0.5rem;
-      padding-bottom: 0.5rem;
       overflow-x: auto;
       .arrow {
         color: var(--my-outline-variant);
@@ -189,6 +182,14 @@
         background: color-mix(in srgb, var(--my-primary-dim) 20%, transparent);
         border: 1px solid color-mix(in srgb, var(--my-primary) 30%, transparent);
         border-radius: var(--my-radius-sm);
+
+        &.add {
+          background: var(--my-surface-container-lowest);
+          border-style: dashed;
+          border-color: var(--my-outline-variant);
+          color: var(--my-on-surface-variant);
+          font-size: 0.875rem;
+        }
       }
     }
   }

frontend/src/pages/IndexPage.vue

@@ -31,7 +31,7 @@
     </div>
 
     <div class="orders">
-      <order-card></order-card>
+      <order-card :order="order" />
       <div class="order-card">
         <div class="card-head">
           <div class="copy">
@@ -146,7 +146,14 @@
 
 <script setup>
 import OrderCard from 'src/components/OrderCard.vue'
-
+const order = {
+  orderId: '0112/2025/12',
+  model: 'Regius 6 Core',
+  client: 'Mayo Stock',
+  assignedOrders: ['IV', '2025-4'],
+  finish: 'MIX',
+  steps: ['B', 'IZ', 'AK', 'LD'],
+}
 //
 </script>