fix(finance): shared treasury layout so tab switches stop jumping

Keep title and nav mounted in TreasuryLayout with stable header height, and finish Ant form chrome (MoneyInput, Jalali) on finance pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/treasury/TreasuryNav.vue

@@ -1,66 +1,68 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
+import { Segmented as ASegmented } from 'ant-design-vue';
 import { useAuthStore } from '@/stores/auth';
 
 const route = useRoute();
+const router = useRouter();
 const auth = useAuthStore();
-const canPayroll = computed(() =>
-  auth.user?.role === 'owner'
-  || auth.user?.role === 'admin'
-  || Boolean(auth.user?.permissions?.includes('treasury_payroll')),
+
+const canPayroll = computed(
+  () =>
+    auth.user?.role === 'owner' ||
+    auth.user?.role === 'admin' ||
+    Boolean(auth.user?.permissions?.includes('treasury_payroll')),
 );
+
 const links = computed(() => [
-  { to: '/finance', label: 'داشبورد', exact: true },
-  { to: '/finance/incomes', label: 'دریافت‌ها و درآمدها' },
-  { to: '/finance/expenses', label: 'پرداخت‌ها و هزینه‌ها' },
-  { to: '/finance/receivables', label: 'اقساط و مطالبات' },
-  { to: '/finance/accounts', label: 'صندوق و حساب‌ها' },
-  ...(canPayroll.value ? [{ to: '/finance/payroll', label: 'حقوق' }] : []),
-  { to: '/finance/recurring', label: 'تکرارشونده' },
-  { to: '/finance/reports', label: 'گزارش' },
-  { to: '/finance/audit', label: 'سوابق' },
-  { to: '/finance/categories', label: 'دسته‌بندی‌ها' },
+  { value: '/finance', label: 'داشبورد', exact: true },
+  { value: '/finance/incomes', label: 'دریافت‌ها و درآمدها' },
+  { value: '/finance/expenses', label: 'پرداخت‌ها و هزینه‌ها' },
+  { value: '/finance/receivables', label: 'اقساط و مطالبات' },
+  { value: '/finance/accounts', label: 'صندوق و حساب‌ها' },
+  ...(canPayroll.value ? [{ value: '/finance/payroll', label: 'حقوق' }] : []),
+  { value: '/finance/recurring', label: 'تکرارشونده' },
+  { value: '/finance/reports', label: 'گزارش' },
+  { value: '/finance/audit', label: 'سوابق' },
+  { value: '/finance/categories', label: 'دسته‌بندی‌ها' },
 ]);
 
-function on(path: string, exact?: boolean) {
-  if (exact) return route.path === path;
-  return route.path === path || route.path.startsWith(`${path}/`);
+const options = computed(() => links.value.map((l) => ({ value: l.value, label: l.label })));
+
+const active = computed(() => {
+  const path = route.path;
+  for (const link of links.value) {
+    if (link.exact) {
+      if (path === link.value) return link.value;
+    } else if (path === link.value || path.startsWith(`${link.value}/`)) {
+      return link.value;
+    }
+  }
+  return '/finance';
+});
+
+function onChange(value: string | number) {
+  const next = String(value);
+  if (next && next !== route.path) void router.push(next);
 }
 </script>
 
 <template>
-  <nav class="treasury-nav" aria-label="مدیریت مالی">
-    <RouterLink
-      v-for="link in links"
-      :key="link.to"
-      :to="link.to"
-      :class="{ on: on(link.to, link.exact) }"
-    >
-      {{ link.label }}
-    </RouterLink>
-  </nav>
+  <div
+    :style="{
+      width: '100%',
+      overflowX: 'auto',
+      flexShrink: 0,
+      minHeight: '36px',
+    }"
+  >
+    <a-segmented
+      :value="active"
+      :options="options"
+      dir="rtl"
+      :style="{ minWidth: 'max-content' }"
+      @change="onChange"
+    />
+  </div>
 </template>
-
-<style scoped>
-.treasury-nav {
-  display: flex;
-  gap: 0.35rem;
-  overflow: auto;
-  padding-bottom: 0.25rem;
-}
-.treasury-nav a {
-  flex: 0 0 auto;
-  border-radius: 999px;
-  padding: 0.4rem 0.8rem;
-  color: #475569;
-  text-decoration: none;
-  font-weight: 700;
-  font-size: 0.86rem;
-  background: #f8fafc;
-}
-.treasury-nav a.on {
-  background: #0f766e;
-  color: #fff;
-}
-</style>