Improve Leads mobile UX and nest leads under Customers nav.

Restore the 5-tab mobile bar, add responsive lead cards with long-press select, and fix stats/filters layout.

apps/web/src/components/nav/NavHubPanel.vue

@@ -1,17 +1,29 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted } from 'vue';
 import UiIcon from '@/components/UiIcon.vue';
-import type { NavHubDef } from '@/lib/nav-hubs';
+import type { NavHubDef, NavHubKey } from '@/lib/nav-hubs';
 
 defineProps<{
   hub: NavHubDef;
+  /** اگر از هاب والد آمده (مثلاً مشتریان → لیدها) */
+  canBack?: boolean;
 }>();
 
 const emit = defineEmits<{
   close: [];
+  back: [];
   go: [to: string];
+  openHub: [key: NavHubKey];
 }>();
 
+function onCard(card: NavHubDef['cards'][number]) {
+  if (card.hub) {
+    emit('openHub', card.hub);
+    return;
+  }
+  emit('go', card.to);
+}
+
 function onKey(event: KeyboardEvent) {
   if (event.key === 'Escape') emit('close');
 }
@@ -29,7 +41,18 @@ onUnmounted(() => {
   <section class="hub" role="dialog" aria-modal="true" :aria-label="hub.title">
     <header class="head">
       <div class="copy">
-        <h1>{{ hub.title }}</h1>
+        <div class="title-row">
+          <button
+            v-if="canBack"
+            type="button"
+            class="back-btn"
+            aria-label="بازگشت"
+            @click="emit('back')"
+          >
+            <UiIcon name="chevron" :size="16" class="back-chev" />
+          </button>
+          <h1>{{ hub.title }}</h1>
+        </div>
         <p>{{ hub.desc }}</p>
       </div>
       <span class="head-ico" :class="hub.tint" aria-hidden="true">
@@ -40,10 +63,10 @@ onUnmounted(() => {
     <div class="grid">
       <button
         v-for="card in hub.cards"
-        :key="card.to + card.title"
+        :key="(card.hub ?? card.to) + card.title"
         class="card"
         type="button"
-        @click="emit('go', card.to)"
+        @click="onCard(card)"
       >
         <span class="card-top">
           <span class="card-title">
@@ -105,6 +128,36 @@ onUnmounted(() => {
   color: #0f172a;
 }
 
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.back-btn {
+  width: 1.75rem;
+  height: 1.75rem;
+  border: 0;
+  border-radius: 999px;
+  background: #f1f5f9;
+  color: #64748b;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.back-btn:hover {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+
+.back-chev {
+  transform: none;
+}
+
 .copy p {
   margin: 0.15rem 0 0;
   color: #94a3b8;