REFACTOR: Belonging → Property system migration + dashboard + map improvements

Property system:
- Add PropertyService.js and PropertyStatusService.js
- Add Property pages: CreateProperty.vue, ListProperties.vue, TransactionDialog.vue
- Remove legacy BelongingService.js and Belonging pages (CreateBelonging, ListBelongings, TransactionDialog)

Dashboard:
- Update RecentSalesWidget.vue
- Update RevenueStreamWidget.vue
- Update StatsWidget.vue

UI & config:
- Major MapComponent.vue improvements (extended functionality)
- Update ListCategories.vue
- Update ListTransactions.vue
- Update vite.config.mjs

src/components/dashboard/RecentSalesWidget.vue

@@ -1,43 +1,38 @@
 <script setup>
-import { ProductService } from '@/service/ProductService';
 import { onMounted, ref } from 'vue';
-import { BelongingService } from '@/service/BelongingService';
+import { PropertyService } from '@/service/PropertyService';
 import { useRouter } from 'vue-router';
 
-const products = ref(null);
-
-function formatCurrency(value) {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-}
+const properties = ref(null);
 
 onMounted(() => {
-    BelongingService.getAllBelongings().then((data) => (products.value = data));
+    PropertyService.getAllProperties().then((data) => (properties.value = data));
 });
 
 const router = useRouter();
-function editBelonging(belongingId) {
-    router.push('/belonging/edit-belonging/' + belongingId);
+function editProperty(propertyId) {
+    router.push('/property/edit-property/' + propertyId);
 }
 </script>
 
 <template>
     <div class="card">
-        <div class="font-semibold text-xl mb-4">آخرین دارایی های افزوده شده</div>
-        <DataTable :value="products" :rows="5" :paginator="true" responsiveLayout="scroll">
-            <Column style="min-width: 15%" header="Image">
+        <div class="font-semibold text-xl mb-4">آخرین املاک افزوده شده</div>
+        <DataTable :value="properties" :rows="5" :paginator="true" responsiveLayout="scroll">
+            <Column style="min-width: 15%" header="تصویر">
                 <template #body="slotProps">
-                    <img :src="`${slotProps.data.mainImageUrl}`" :alt="slotProps.data.name" width="50" class="shadow" />
+                    <img :src="`${slotProps.data.mainImageUrl || slotProps.data.mainImageUrls?.[0]}`" :alt="slotProps.data.name" width="50" class="shadow" />
                 </template>
             </Column>
             <Column field="name" header="نام" :sortable="true" style="min-width: 35%"></Column>
-            <Column field="price" header="دسته بندی" :sortable="true" style="min-width: 30%">
+            <Column field="category" header="دسته بندی" :sortable="true" style="min-width: 30%">
                 <template #body="slotProps">
                     {{ slotProps.data.category?.nativeName }}
                 </template>
             </Column>
             <Column style="min-width: 15%" header="نمایش">
                 <template #body="slotProps">
-                    <Button icon="pi pi-search" type="button" class="p-button-text" @click="editBelonging(slotProps.data._id)"></Button>
+                    <Button icon="pi pi-search" type="button" class="p-button-text" @click="editProperty(slotProps.data._id)"></Button>
                 </template>
             </Column>
         </DataTable>

src/components/dashboard/RevenueStreamWidget.vue

@@ -11,17 +11,17 @@ function setChartData() {
     const documentStyle = getComputedStyle(document.documentElement);
 
     return {
-        labels: ['زمین', 'ساختمان', 'خودرو', 'ارز'],
+        labels: ['زمین', 'ساختمان'],
         datasets: [
             {
                 type: 'bar',
-                label: 'تعداد دارایی ها',
+                label: 'تعداد املاک',
                 backgroundColor: documentStyle.getPropertyValue('--p-primary-400'),
                 font: {
-                    family: 'Estedad', // Set custom font for y-axis labels
-                    size: 14 // Set font size
+                    family: 'Estedad',
+                    size: 14
                 },
-                data: [18, 13, 5, 11],
+                data: [18, 13],
                 barThickness: 32
             }
         ]
@@ -42,8 +42,8 @@ function setChartOptions() {
                 ticks: {
                     color: textMutedColor,
                     font: {
-                        family: 'Estedad', // Set custom font for y-axis labels
-                        size: 14 // Set font size
+                        family: 'Estedad',
+                        size: 14
                     }
                 },
                 grid: {
@@ -56,8 +56,8 @@ function setChartOptions() {
                 ticks: {
                     color: textMutedColor,
                     font: {
-                        family: 'Estedad', // Set custom font for y-axis labels
-                        size: 14 // Set font size
+                        family: 'Estedad',
+                        size: 14
                     }
                 },
                 grid: {
@@ -83,7 +83,7 @@ onMounted(() => {
 
 <template>
     <div class="card">
-        <div class="font-semibold text-xl mb-4">تقسیم بندی دارایی ها</div>
+        <div class="font-semibold text-xl mb-4">تقسیم بندی املاک</div>
         <Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
     </div>
 </template>

src/components/dashboard/StatsWidget.vue

@@ -3,7 +3,7 @@
         <div class="card mb-0">
             <div class="flex justify-between mb-4">
                 <div>
-                    <span class="block text-muted-color font-medium mb-4">تعداد دارایی ها</span>
+                    <span class="block text-muted-color font-medium mb-4">تعداد املاک</span>
                     <div class="text-surface-900 dark:text-surface-0 font-medium text-xl">100</div>
                 </div>
                 <div class="flex items-center justify-center bg-blue-100 dark:bg-blue-400/10 rounded-border" style="width: 2.5rem; height: 2.5rem">