From 550db68a5ffdef7557d692b6cfc212439c15e0c7 Mon Sep 17 00:00:00 2001
From: bartool <bartoolina@gmail.com>
Date: Sun, 29 Mar 2026 19:25:42 +0200
Subject: [PATCH] szkielet wygladau dla mobile

---
 frontend/src/components/OrderCard.vue | 196 +++++++++++
 frontend/src/pages/IndexPage.vue      | 472 +++++++++++++++++++++++++-
 2 files changed, 662 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/OrderCard.vue

diff --git a/frontend/src/components/OrderCard.vue b/frontend/src/components/OrderCard.vue
new file mode 100644
index 0000000..b650f4e
--- /dev/null
+++ b/frontend/src/components/OrderCard.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="my-order-card">
+    <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>
+        <div class="list-month">
+          <span class="month">IV</span>
+          <span class="month">2025-4</span>
+        </div>
+        <span class="finish">MIX</span>
+      </div>
+    </div>
+    <div class="flow">
+      <div class="flow-head">
+        <span class="label">Etapy Produckji</span>
+        <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>
+        <button class="step add">
+          <q-icon class="add-icon" name="add" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup></script>
+<style lang="scss" scoped>
+.my-order-card {
+  overflow: hidden;
+  position: relative;
+  padding: 1.25rem;
+  background: var(--my-surface-container);
+  //   border-left: 2px solid transparent;
+  border-radius: var(--my-radius-lg);
+  transition: background-color var(--my-transition);
+
+  &:hover {
+    background: var(--my-surface-container-high);
+    // border-left-color: color-mix(in srgb, var(--my-primary) 30%, transparent);
+
+    .mark {
+      background: color-mix(in srgb, var(--my-primary) 80%, transparent);
+    }
+  }
+
+  .mark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: transparent;
+    transition: background-color var(--my-transition);
+  }
+
+  .order-info {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-areas:
+      'order-id month month'
+      'model model finish'
+      'client client finish';
+    gap: 4px;
+    .order-id {
+      grid-area: order-id;
+      display: block;
+      color: var(--my-primary);
+      font-size: 0.7rem;
+      font-weight: 700;
+      letter-spacing: -0.05em;
+    }
+    .model {
+      grid-area: model;
+      margin: 0;
+      color: var(--my-on-surface);
+      font-size: 1.125rem;
+      font-weight: 700;
+      line-height: 1.75rem;
+      letter-spacing: -0.025em;
+    }
+    .client {
+      grid-area: client;
+      margin: 0;
+      color: var(--my-on-surface-variant);
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+    .list-month {
+      grid-area: month;
+      justify-self: end;
+      display: flex;
+      flex-wrap: nowrap;
+      flex-direction: row-reverse;
+      gap: 5px;
+      .month {
+        min-width: 50px;
+        text-align: center;
+        padding: 0.1rem 0.5rem;
+        color: var(--my-tertiary);
+        background: var(--my-surface-container-highest);
+        border-radius: var(--my-radius-sm);
+        //   border: 1px solid var(--my-tertiary);
+        font-size: 0.625rem;
+        font-weight: 700;
+        letter-spacing: -0.05em;
+        text-transform: uppercase;
+      }
+    }
+    .finish {
+      grid-area: finish;
+      justify-self: end;
+      align-self: center;
+      color: var(--my-on-surface-variant);
+      display: block;
+      font-size: 0.8rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      text-align: center;
+      padding: 0.5rem;
+      border: 1px solid var(--my-surface-container-highest);
+      border-radius: var(--my-radius-sm);
+    }
+  }
+
+  .flow {
+    margin-top: 1.5rem;
+    .flow-head {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 0.75rem;
+      .label {
+        color: var(--my-on-surface-variant);
+        font-size: 0.625rem;
+        font-weight: 700;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+      }
+
+      .line {
+        flex: 1;
+        height: 1px;
+        background: color-mix(in srgb, var(--my-outline-variant) 30%, transparent);
+      }
+    }
+    .steps {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding-bottom: 0.5rem;
+      overflow-x: auto;
+      .arrow {
+        color: var(--my-outline-variant);
+        font-size: 0.75rem;
+      }
+      .step {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 2rem;
+        height: 2rem;
+
+        font-size: 0.75rem;
+        font-weight: 700;
+        color: var(--my-primary);
+        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);
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/pages/IndexPage.vue b/frontend/src/pages/IndexPage.vue
index dd3100b..5643b03 100644
--- a/frontend/src/pages/IndexPage.vue
+++ b/frontend/src/pages/IndexPage.vue
@@ -1,13 +1,473 @@
 <template>
-  <q-page class="flex flex-center">
-    <img
-      alt="Quasar logo"
-      src="~assets/quasar-logo-vertical.svg"
-      style="width: 200px; height: 200px"
-    >
+  <q-page class="content">
+    <section class="filters">
+      <div class="search-field">
+        <input class="input" placeholder="Search orders or models..." type="text" />
+        <div class="icon-wrap">
+          <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>
+      </div>
+    </section>
+
+    <div class="stats">
+      <div class="stat-card primary">
+        <span class="label">In Progress</span>
+        <span class="value">14 Units</span>
+      </div>
+      <div class="stat-card tertiary">
+        <span class="label">Avg Lead Time</span>
+        <span class="value">22 Days</span>
+      </div>
+    </div>
+
+    <div class="orders">
+      <order-card></order-card>
+      <div class="order-card">
+        <div class="card-head">
+          <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'
+
 //
 </script>
+
+<style lang="scss" scoped>
+@mixin meta-label {
+  font-size: 0.625rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.content {
+  padding: 1rem;
+}
+
+.filters {
+  display: grid;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+
+  .search-field {
+    position: relative;
+
+    .input {
+      width: 100%;
+      padding: 0.75rem 3rem 0.75rem 1rem;
+      color: var(--my-on-surface);
+      background: var(--my-surface-container-highest);
+      border: 0;
+      border-bottom: 2px solid var(--my-outline-variant);
+      transition: border-color var(--my-transition);
+
+      &:focus {
+        outline: none;
+        border-bottom-color: var(--my-primary);
+      }
+
+      &::placeholder {
+        color: var(--my-outline);
+      }
+    }
+
+    .icon-wrap {
+      position: absolute;
+      top: 50%;
+      right: 1rem;
+      color: var(--my-on-surface-variant);
+      transform: translateY(-50%);
+    }
+  }
+
+  .month-tabs {
+    display: flex;
+    gap: 0.5rem;
+    padding-bottom: 0.5rem;
+    overflow-x: auto;
+  }
+
+  .tab {
+    flex: 0 0 auto;
+    padding: 0.5rem 1rem;
+    color: var(--my-on-surface-variant);
+    background: var(--my-surface-container);
+    border-radius: var(--my-radius-md);
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    transition:
+      background-color var(--my-transition),
+      color var(--my-transition),
+      transform var(--my-transition);
+
+    &:hover {
+      background: var(--my-surface-container-high);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &.active {
+      color: var(--my-on-primary);
+      background: var(--my-primary-dim);
+    }
+  }
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+
+  .stat-card {
+    padding: 1rem;
+    background: var(--my-surface-container-low);
+    border-left: 2px solid var(--my-primary);
+    border-radius: var(--my-radius-lg);
+
+    .label {
+      font-size: 0.625rem;
+      font-weight: 700;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      display: block;
+      margin-bottom: 0.25rem;
+      color: var(--my-on-surface-variant);
+    }
+
+    .value {
+      color: var(--my-white);
+      font-size: 1.5rem;
+      font-weight: 800;
+      letter-spacing: -0.025em;
+    }
+
+    &.tertiary {
+      border-left-color: var(--my-tertiary);
+    }
+  }
+}
+
+.orders {
+  display: grid;
+  gap: 1rem;
+}
+
+.order-card {
+  padding: 1.25rem;
+  background: var(--my-surface-container);
+  border-bottom: 2px solid transparent;
+  border-radius: var(--my-radius-lg);
+  transition:
+    background-color var(--my-transition),
+    border-color var(--my-transition);
+
+  &:hover {
+    background: var(--my-surface-container-high);
+    border-bottom-color: color-mix(in srgb, var(--my-primary) 30%, transparent);
+  }
+
+  &.urgent {
+    border-bottom-color: var(--my-error-dim);
+  }
+
+  .card-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .copy {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  .order-id {
+    display: block;
+    color: var(--my-primary);
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: -0.05em;
+
+    &.order-id-error {
+      color: var(--my-error);
+    }
+  }
+
+  .client {
+    margin: 0;
+    color: var(--my-on-surface);
+    font-size: 1.125rem;
+    font-weight: 700;
+    line-height: 1.75rem;
+    letter-spacing: -0.025em;
+  }
+
+  .model {
+    margin: 0;
+    color: var(--my-on-surface-variant);
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .meta {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.5rem;
+  }
+
+  .month {
+    padding: 0.25rem 0.5rem;
+    color: var(--my-tertiary);
+    background: var(--my-surface-container-highest);
+    border-radius: var(--my-radius-sm);
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: -0.05em;
+    text-transform: uppercase;
+
+    &.month-error {
+      color: var(--my-error);
+      background: color-mix(in srgb, var(--my-error-container) 20%, transparent);
+    }
+  }
+
+  .finish {
+    color: var(--my-on-surface-variant);
+    text-align: center;
+
+    .label {
+      display: block;
+      font-size: 0.625rem;
+      font-weight: 700;
+      text-transform: uppercase;
+    }
+  }
+
+  .flow {
+    margin-top: 1.5rem;
+  }
+
+  .flow-head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+
+    .label {
+      @include meta-label;
+      color: var(--my-on-surface-variant);
+    }
+
+    .line {
+      flex: 1;
+      height: 1px;
+      background: color-mix(in srgb, var(--my-outline-variant) 30%, transparent);
+    }
+  }
+
+  .steps {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-bottom: 0.5rem;
+    overflow-x: auto;
+  }
+
+  .arrow {
+    color: var(--my-outline-variant);
+    font-size: 0.75rem;
+  }
+
+  .step {
+    display: grid;
+    place-items: center;
+    flex: 0 0 auto;
+    width: 2.5rem;
+    height: 2.5rem;
+    background: var(--my-surface-container-highest);
+    border: 1px solid color-mix(in srgb, var(--my-outline-variant) 30%, transparent);
+    border-radius: var(--my-radius-sm);
+
+    .text {
+      color: var(--my-on-surface-variant);
+      font-size: 0.75rem;
+      font-weight: 700;
+    }
+
+    &.done {
+      background: color-mix(in srgb, var(--my-primary-dim) 20%, transparent);
+      border-color: color-mix(in srgb, var(--my-primary) 30%, transparent);
+
+      .text {
+        color: var(--my-primary);
+      }
+    }
+
+    // &.current {
+    //   animation: pulse-soft 1.8s ease-in-out infinite;
+    // }
+
+    &.add {
+      background: var(--my-surface-container-lowest);
+      border-style: dashed;
+      border-color: var(--my-outline-variant);
+      transition:
+        background-color var(--my-transition),
+        transform var(--my-transition);
+
+      &:hover {
+        background: var(--my-surface-container-highest);
+      }
+
+      &:active {
+        transform: scale(0.9);
+      }
+    }
+
+    &.alert {
+      background: var(--my-error-container);
+      border-color: var(--my-error);
+
+      .text {
+        color: var(--my-on-error);
+      }
+    }
+
+    &.waiting {
+      border-style: dashed;
+    }
+
+    .add-icon,
+    .wait-icon {
+      color: var(--my-on-surface-variant);
+      font-size: 0.875rem;
+    }
+  }
+}
+</style>