feat: migrate CRM screens to Ant Design Vue and expand home dashboard

Preserve the local Ant UI work across views/components and add the new home dashboard chart panels before merging latest main.

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

@@ -1,15 +1,20 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
+import { Menu as AMenu } from 'ant-design-vue';
+import type { MenuProps } 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: 'دریافت‌ها و درآمدها' },
@@ -27,40 +32,29 @@ function on(path: string, exact?: boolean) {
   if (exact) return route.path === path;
   return route.path === path || route.path.startsWith(`${path}/`);
 }
+
+const selectedKeys = computed(() => {
+  const match = links.value.find((link) => on(link.to, link.exact));
+  return match ? [match.to] : [];
+});
+
+const items = computed<MenuProps['items']>(() =>
+  links.value.map((link) => ({
+    key: link.to,
+    label: link.label,
+  })),
+);
+
+const onClick: MenuProps['onClick'] = ({ key }) => {
+  void router.push(String(key));
+};
 </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>
+  <a-menu
+    mode="horizontal"
+    :selected-keys="selectedKeys"
+    :items="items"
+    @click="onClick"
+  />
 </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>