Redesign orders/cart/search flows and fix RTL/auth edge cases in user-app

- Fix silent redirect-to-home for unauthenticated users on protected routes;
  now redirects to login with a return path
- Restyle OrderCard, SearchInput, Filters, DropDown, and product card image
  sizing/centering to match the app's LESS-token design language
- Fix ant-design Slider handle placement/drag under RTL and seed a valid
  default range so handles actually render
- Fix chip-row edge padding and top spacing across Orders/Cart/Search lists
- Add pull-to-refresh to the dashboard and fix its header/padding to match
  the fixed PageBar pattern
- Remove the floating WhatsApp button from index.html

apps/user-app/src/components/product/CartItem.vue

@@ -90,26 +90,30 @@ const wageLabel = computed(() => {
 <style scoped lang="less">
 .ci {
   display: flex;
-  gap: 12px;
-  padding: 11px;
+  gap: 14px;
+  padding: 16px;
   background: @canvas;
   border: 1px solid @hairline;
   border-radius: 18px;
 }
 
 .ci__art {
-  flex: 0 0 76px;
-  width: 76px;
-  height: 76px;
+  flex: 0 0 84px;
+  width: 84px;
+  height: 84px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border-radius: 13px;
   overflow: hidden;
   background: @hairlineSoft;
 }
 
 .ci__art img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  width: 90px;
+  height: 90px;
+  object-fit: contain;
+  object-position: center;
   display: block;
 }
 

apps/user-app/src/components/product/OrderCard.vue

@@ -3,44 +3,47 @@
   components/home/* and HomeView). Ported originally from legacy
   henza_pwa/src/components/product/order.vue.
 
+  Layout follows the same leading-icon-badge row pattern as every other list
+  row in the app (TransactionsView's .tx__row, OrderItemCard's .oi__art) —
+  a status-coloured circular badge on the lead edge, content stacked beside
+  it — instead of the previous all-stacked-text block, which was the one
+  list card in the app with no leading visual anchor.
+
   Status colours still come from utils/orderStatus.ts, which is the single
   source of truth shared with the detail view — not re-declared here.
 -->
 <template>
   <article class="oc" @click="emit('view', value)">
-    <div class="oc__head">
-      <div class="oc__id">
-        <span class="oc__idLabel">سفارش</span>
-        <span class="oc__idValue">{{ value.orderNumber }}</span>
-      </div>
-      <span class="oc__status" :style="{ background: color?.background, color: color?.font }">
-        {{ statusLabel }}
-      </span>
-    </div>
+    <span class="oc__mark" :style="{ background: color?.background, color: color?.font }" aria-hidden="true">
+      <Icon icon="vuesax-linear:receipt-text" size="16" />
+    </span>
 
-    <div class="oc__figures">
-      <div class="oc__figure">
-        <span class="oc__figureLabel">تعداد</span>
-        <span class="oc__figureValue">
+    <div class="oc__main">
+      <div class="oc__head">
+        <h3 class="oc__id">{{ value.orderNumber }}</h3>
+        <span class="oc__status" :style="{ background: color?.background, color: color?.font }">
+          {{ statusLabel }}
+        </span>
+      </div>
+
+      <div class="oc__figures">
+        <span class="oc__figure">
           {{ value.items.length }}
           <i>آیتم</i>
         </span>
-      </div>
-      <div class="oc__figure">
-        <span class="oc__figureLabel">وزن</span>
-        <span class="oc__figureValue">
+        <span class="oc__figure">
           {{ parseFloat(value.totalGoldWeightGrams).toFixed(2) }}
           <i>گرم</i>
         </span>
       </div>
-    </div>
 
-    <div class="oc__foot">
-      <span class="oc__date">{{ jdate(value.createdAt) }}</span>
-      <span class="oc__more">
-        جزئیات
-        <Icon icon="vuesax-linear:arrow-left-2" size="14" />
-      </span>
+      <div class="oc__foot">
+        <span class="oc__date">{{ jdate(value.createdAt) }}</span>
+        <span class="oc__more">
+          جزئیات
+          <Icon icon="vuesax-linear:arrow-left-2" size="14" />
+        </span>
+      </div>
     </div>
   </article>
 </template>
@@ -61,8 +64,10 @@ const color = computed(() => ORDER_STATUS_COLORS[props.value.status])
 
 <style scoped lang="less">
 .oc {
+  display: flex;
+  gap: 11px;
   cursor: pointer;
-  padding: 13px 14px;
+  padding: 12px;
   background: @canvas;
   border: 1px solid @hairline;
   border-radius: 18px;
@@ -73,6 +78,22 @@ const color = computed(() => ORDER_STATUS_COLORS[props.value.status])
   transform: scale(0.99);
 }
 
+.oc__mark {
+  flex: 0 0 36px;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: @hairlineSoft;
+  color: @inkFaint;
+}
+
+.oc__main {
+  flex: 1;
+  min-width: 0;
+}
+
 .oc__head {
   display: flex;
   align-items: center;
@@ -81,18 +102,7 @@ const color = computed(() => ORDER_STATUS_COLORS[props.value.status])
 }
 
 .oc__id {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  min-width: 0;
-}
-
-.oc__idLabel {
-  font-size: 11px;
-  color: @inkFaint;
-}
-
-.oc__idValue {
+  margin: 0;
   font-size: 13.5px;
   font-weight: 800;
   color: @ink;
@@ -112,32 +122,21 @@ const color = computed(() => ORDER_STATUS_COLORS[props.value.status])
 
 .oc__figures {
   display: flex;
-  gap: 26px;
-  padding: 12px 0 11px;
+  gap: 14px;
+  padding-top: 6px;
 }
 
 .oc__figure {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
+  font-size: 12px;
+  font-weight: 700;
+  color: @inkSoft;
 }
-
-.oc__figureLabel {
-  font-size: 10.5px;
-  color: @inkFaint;
-}
-
-.oc__figureValue {
-  font-size: 14px;
-  font-weight: 800;
-  color: @ink;
-}
-.oc__figureValue i {
+.oc__figure i {
   font-style: normal;
-  font-size: 10.5px;
+  font-size: 10px;
   font-weight: 600;
   color: @inkFaint;
-  padding-inline-start: 3px;
+  padding-inline-start: 2px;
 }
 
 .oc__foot {
@@ -145,8 +144,7 @@ const color = computed(() => ORDER_STATUS_COLORS[props.value.status])
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  padding-top: 10px;
-  border-top: 1px solid @hairlineSoft;
+  padding-top: 8px;
 }
 
 .oc__date {

apps/user-app/src/components/product/ProductCard.vue

@@ -105,13 +105,19 @@ const wageLabel = computed(() => {
 .pc__art {
   position: relative;
   aspect-ratio: 1 / 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: @hairlineSoft;
 }
 
 .pc__art img {
   width: 100%;
+  max-width: 150px;
   height: 100%;
-  object-fit: cover;
+  max-height: 150px;
+  object-fit: contain;
+  object-position: center;
   display: block;
 }