dodalem liste dla gryfu i male porzadki

frontend/src/components/OrderCard.vue

@@ -6,8 +6,12 @@
         <span class="order-id">{{ order.orderId }}</span>
         <h3 class="model">{{ order.model }}</h3>
         <p class="client">{{ order.client }}</p>
-        <div class="list-month">
+        <div class="order-lists">
-          <span v-for="assignedOrder in order.assignedOrders" :key="assignedOrder" class="month">
+          <span
+            v-for="assignedOrder in order.assignedOrders"
+            :key="assignedOrder"
+            class="order-list"
+          >
             {{ assignedOrder }}
           </span>
         </div>
@@ -16,11 +20,26 @@
     </div>
     <div class="flow">
       <div class="flow-head">
-        <span class="label">Etapy Produckji</span>
+        <span class="label">Deska</span>
         <div class="line"></div>
       </div>
       <div class="steps no-scrollbar">
-        <template v-for="(step, index) in order.steps" :key="`${step}-${index}`">
+        <template v-for="(step, index) in order.steps.body" :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>
+      </div>
+    </div>
+    <div class="flow" v-if="order.steps.neck">
+      <div class="flow-head">
+        <span class="label">Gryf</span>
+        <div class="line"></div>
+      </div>
+      <div class="steps no-scrollbar">
+        <template v-for="(step, index) in order.steps.neck" :key="`${step}-${index}`">
           <div class="step">{{ step }}</div>
           <span class="arrow">&#x2192;</span>
         </template>
@@ -72,7 +91,7 @@ defineProps({
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-areas:
-      'order-id month month'
+      'order-id order-list order-list'
       'model model finish'
       'client client finish';
     gap: 4px;
@@ -100,14 +119,14 @@ defineProps({
       font-size: 0.875rem;
       font-weight: 500;
     }
-    .list-month {
+    .order-lists {
-      grid-area: month;
+      grid-area: order-list;
       justify-self: end;
       display: flex;
       flex-wrap: nowrap;
       flex-direction: row-reverse;
       gap: 5px;
-      .month {
+      .order-list {
         min-width: 50px;
         text-align: center;
         padding: 0.1rem 0.5rem;
@@ -138,7 +157,7 @@ defineProps({
   }
 
   .flow {
-    margin-top: 1.5rem;
+    margin-top: 1rem;
     .flow-head {
       display: flex;
       align-items: center;

frontend/src/pages/IndexPage.vue

@@ -31,129 +31,48 @@
     </div>
 
     <div class="orders">
-      <order-card :order="order" />
+      <order-card :order="order[0]" />
-      <div class="order-card">
+      <order-card :order="order[1]" />
-        <div class="card-head">
+      <order-card :order="order[2]" />
-          <div class="copy">
-            <span class="order-id">0026/2025/1</span>
-            <h3 class="client">Regius 6 CLS</h3>
-            <p class="model">Mayo Stock</p>
-          </div>
-          <div class="meta">
-            <span class="month">Month 08</span>
-            <div class="finish">
-              <span
-                class="material-symbols-outlined icon"
-                data-icon="flare"
-                style="font-variation-settings: 'FILL' 1"
-                >flare</span
-              >
-              <span class="label">Gloss</span>
-            </div>
-          </div>
-        </div>
-        <div class="flow">
-          <div class="flow-head">
-            <span class="label">Production Flow</span>
-            <div class="line"></div>
-          </div>
-          <div class="steps no-scrollbar">
-            <div class="step done"><span class="text">ST</span></div>
-            <span class="arrow">→</span>
-            <div class="step done"><span class="text">IS</span></div>
-            <span class="arrow">→</span>
-            <div class="step current"><span class="text">AC</span></div>
-            <span class="arrow">→</span>
-            <button class="step add" type="button">
-              <!-- <span class="material-symbols-outlined add-icon" data-icon="add">add</span> -->
-              <q-icon class="add-icon" name="add" />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="order-card">
-        <div class="card-head">
-          <div class="copy">
-            <span class="order-id">#2024-079</span>
-            <h3 class="client">Annie Clark</h3>
-            <p class="model">St. Vincent Signature Relic</p>
-          </div>
-          <div class="meta">
-            <span class="month">Month 07</span>
-            <span class="month">Month 07</span>
-            <div class="finish">
-              <span class="material-symbols-outlined icon" data-icon="texture">texture</span>
-              <span class="label">Satin</span>
-            </div>
-          </div>
-        </div>
-        <div class="flow">
-          <div class="flow-head">
-            <span class="label">Production Flow</span>
-            <div class="line"></div>
-          </div>
-          <div class="steps no-scrollbar">
-            <div class="step done"><span class="text">ST</span></div>
-            <span class="arrow">→</span>
-            <div class="step done"><span class="text">IS</span></div>
-            <span class="arrow">→</span>
-            <div class="step done"><span class="text">AC</span></div>
-            <span class="arrow">→</span>
-            <div class="step done"><span class="text">LD</span></div>
-            <span class="arrow">→</span>
-            <button class="step add" type="button">
-              <span class="material-symbols-outlined add-icon" data-icon="add">add</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div class="order-card urgent">
-        <div class="card-head">
-          <div class="copy">
-            <span class="order-id order-id-error">#2024-085 [URGENT]</span>
-            <h3 class="client">Kevin Parker</h3>
-            <p class="model">Psychedelic Dream Strut</p>
-          </div>
-          <div class="meta">
-            <span class="month month-error">Month 08</span>
-            <div class="finish">
-              <span class="material-symbols-outlined icon" data-icon="layers">layers</span>
-              <span class="label">Mix</span>
-            </div>
-          </div>
-        </div>
-        <div class="flow">
-          <div class="flow-head">
-            <span class="label">Production Flow</span>
-            <div class="line"></div>
-          </div>
-          <div class="steps no-scrollbar">
-            <div class="step alert"><span class="text">ST</span></div>
-            <span class="arrow">→</span>
-            <div class="step waiting">
-              <span class="material-symbols-outlined wait-icon" data-icon="hourglass_empty"
-                >hourglass_empty</span
-              >
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   </q-page>
 </template>
 
 <script setup>
 import OrderCard from 'src/components/OrderCard.vue'
-const order = {
+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: ['IV', '2025-4'],
+    assignedOrders: ['KWI-25', 'SUMMIT'],
     finish: 'MIX',
-  steps: ['B', 'IZ', 'AK', 'LD'],
+    steps: {
-}
+      body: ['B', 'IZ', 'AK', 'LD'],
+    },
+  },
+]
 //
 </script>