diff --git a/frontend/src/components/DateTimePicker.vue b/frontend/src/components/DateTimePicker.vue
index 1e6fe12b..a9ff91ec 100644
--- a/frontend/src/components/DateTimePicker.vue
+++ b/frontend/src/components/DateTimePicker.vue
@@ -1,9 +1,17 @@
 <script setup>
-import { computed, defineAsyncComponent } from 'vue';
+import { computed } from 'vue';
 import dayjs from 'dayjs';
+import PersianDatePicker from 'vue3-persian-datetime-picker';
 import { useDatepicker } from '@/composables/useDatepicker.js';
 
-const PersianDatePicker = defineAsyncComponent(() => import('vue3-persian-datetime-picker'));
+// Drop-in replacement for <a-date-picker> that swaps to a real Jalali
+// calendar (vue3-persian-datetime-picker, backed by moment-jalaali)
+// when the panel's "Calendar Type" setting is `jalalian`.
+//
+// The v-model contract matches AD-Vue: the parent works with a dayjs
+// object (or null). For the persian picker we serialize to/from the
+// `YYYY-MM-DD HH:mm:ss` string it expects so callers don't need to
+// know which renderer is active.
 
 const props = defineProps({
   value: { type: [Object, null], default: null },
diff --git a/frontend/src/pages/inbounds/InboundsPage.vue b/frontend/src/pages/inbounds/InboundsPage.vue
index 1563857f..fd4fce8b 100644
--- a/frontend/src/pages/inbounds/InboundsPage.vue
+++ b/frontend/src/pages/inbounds/InboundsPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Modal, message } from 'ant-design-vue';
 import {
@@ -18,17 +18,16 @@ import AppSidebar from '@/components/AppSidebar.vue';
 import CustomStatistic from '@/components/CustomStatistic.vue';
 import { useNodeList } from '@/composables/useNodeList.js';
 import InboundList from './InboundList.vue';
+import InboundFormModal from './InboundFormModal.vue';
+import ClientFormModal from './ClientFormModal.vue';
+import ClientBulkModal from './ClientBulkModal.vue';
+import InboundInfoModal from './InboundInfoModal.vue';
+import QrCodeModal from './QrCodeModal.vue';
+import TextModal from '@/components/TextModal.vue';
+import PromptModal from '@/components/PromptModal.vue';
 import { useInbounds } from './useInbounds.js';
 import { useWebSocket } from '@/composables/useWebSocket.js';
 
-const InboundFormModal = defineAsyncComponent(() => import('./InboundFormModal.vue'));
-const ClientFormModal = defineAsyncComponent(() => import('./ClientFormModal.vue'));
-const ClientBulkModal = defineAsyncComponent(() => import('./ClientBulkModal.vue'));
-const InboundInfoModal = defineAsyncComponent(() => import('./InboundInfoModal.vue'));
-const QrCodeModal = defineAsyncComponent(() => import('./QrCodeModal.vue'));
-const TextModal = defineAsyncComponent(() => import('@/components/TextModal.vue'));
-const PromptModal = defineAsyncComponent(() => import('@/components/PromptModal.vue'));
-
 const { t } = useI18n();
 
 const {
diff --git a/frontend/src/pages/login/LoginPage.vue b/frontend/src/pages/login/LoginPage.vue
index 2df90be2..d24965b5 100644
--- a/frontend/src/pages/login/LoginPage.vue
+++ b/frontend/src/pages/login/LoginPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { UserOutlined, LockOutlined, KeyOutlined, SettingOutlined } from '@ant-design/icons-vue';
 
@@ -9,8 +9,7 @@ import {
   currentTheme,
   theme as themeState,
 } from '@/composables/useTheme.js';
-
-const ThemeSwitchLogin = defineAsyncComponent(() => import('@/components/ThemeSwitchLogin.vue'));
+import ThemeSwitchLogin from '@/components/ThemeSwitchLogin.vue';
 
 const { t } = useI18n();