From d53ec34ffe2567de13619b9e4699ce6854e67aa2 Mon Sep 17 00:00:00 2001
From: Md Gulam Gaush <gulamgaush.dev@gmail.com>
Date: Tue, 10 Feb 2026 23:54:25 +0530
Subject: [PATCH] feat: migrate simple Vue components to TypeScript - Add
 lang=ts to Layout, BackButton, SuccessMessage, LanguageSwitcher, Navbar -
 Type props and emits using defineProps<>() and defineEmits<>() - Split
 global.d.ts into global.d.ts &  env.d.ts for proper module declarations - Add
 ~icons/* module declaration for icons imports

---
 dashboard/src/components/LanguageSwitcher.vue | 10 ++++++--
 dashboard/src/components/Navbar.vue           |  2 +-
 dashboard/src/components/SuccessMessage.vue   | 19 +++++++-------
 .../src/components/common/BackButton.vue      | 25 +++++++++++--------
 dashboard/src/env.d.ts                        | 21 ++++++++++++++++
 dashboard/src/global.d.ts                     | 17 +++----------
 dashboard/src/layouts/Layout.vue              |  2 +-
 7 files changed, 58 insertions(+), 38 deletions(-)
 create mode 100644 dashboard/src/env.d.ts

diff --git a/dashboard/src/components/LanguageSwitcher.vue b/dashboard/src/components/LanguageSwitcher.vue
index ef0ce3fb..63310424 100644
--- a/dashboard/src/components/LanguageSwitcher.vue
+++ b/dashboard/src/components/LanguageSwitcher.vue
@@ -8,12 +8,18 @@
 	</Dropdown>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from "vue";
 import { Dropdown, Button } from "frappe-ui";
 import LucideLanguages from "~icons/lucide/languages";
 import { useLanguage } from "@/composables/useLanguage";
 
+interface Language {
+	name: string;
+	language_name?: string;
+	language_code: string;
+}
+
 const { availableLanguages, currentLanguage, changeLanguage, isSwitching } = useLanguage();
 
 const languageOptions = computed(() => {
@@ -21,7 +27,7 @@ const languageOptions = computed(() => {
 		return [];
 	}
 
-	return availableLanguages.data.map((lang) => ({
+	return availableLanguages.data.map((lang: Language) => ({
 		label: lang.language_name || lang.name,
 		icon: currentLanguage.value === lang.language_code ? "check" : undefined,
 		onClick: () => changeLanguage(lang.language_code),
diff --git a/dashboard/src/components/Navbar.vue b/dashboard/src/components/Navbar.vue
index 7746094b..5321cf7b 100644
--- a/dashboard/src/components/Navbar.vue
+++ b/dashboard/src/components/Navbar.vue
@@ -39,7 +39,7 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import LucideSun from "~icons/lucide/sun";
 import LucideMoon from "~icons/lucide/moon";
 import { session } from "../data/session";
diff --git a/dashboard/src/components/SuccessMessage.vue b/dashboard/src/components/SuccessMessage.vue
index 61bc4699..9ad2e07f 100644
--- a/dashboard/src/components/SuccessMessage.vue
+++ b/dashboard/src/components/SuccessMessage.vue
@@ -35,17 +35,16 @@
 	</Transition>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import LucideCheckCircle from "~icons/lucide/check-circle";
 
-const props = defineProps({
-	show: {
-		type: Boolean,
-		default: false,
-	},
-	isWebinar: {
-		type: Boolean,
-		default: false,
-	},
+interface Props {
+	show?: boolean;
+	isWebinar?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	show: false,
+	isWebinar: false,
 });
 </script>
diff --git a/dashboard/src/components/common/BackButton.vue b/dashboard/src/components/common/BackButton.vue
index 24fb005f..6ba7e9f1 100644
--- a/dashboard/src/components/common/BackButton.vue
+++ b/dashboard/src/components/common/BackButton.vue
@@ -4,17 +4,20 @@
 	</Button>
 </template>
 
-<script setup>
-defineProps({
-	to: {
-		type: [String, Object],
-		default: null,
-	},
-	label: {
-		type: String,
-		default: "Back",
-	},
+<script setup lang="ts">
+import type { RouteLocationRaw } from "vue-router";
+
+interface Props {
+	to?: RouteLocationRaw | null;
+	label?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+	to: null,
+	label: "Back",
 });
 
-defineEmits(["click"]);
+defineEmits<{
+	(e: "click", event: MouseEvent): void;
+}>();
 </script>
diff --git a/dashboard/src/env.d.ts b/dashboard/src/env.d.ts
new file mode 100644
index 00000000..736151ed
--- /dev/null
+++ b/dashboard/src/env.d.ts
@@ -0,0 +1,21 @@
+
+declare module "*.wav" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.mp3" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}
+
+declare module "~icons/*" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/dashboard/src/global.d.ts b/dashboard/src/global.d.ts
index 7cf4dc52..d045ee8c 100644
--- a/dashboard/src/global.d.ts
+++ b/dashboard/src/global.d.ts
@@ -10,19 +10,10 @@ declare global {
   }
 
   function __(str: string, values?: any[]): string;
+}
 
-  declare module "*.wav" {
-    const value: string;
-    export default value;
-  }
-
-  declare module "*.mp3" {
-    const value: string;
-    export default value;
-  }
-
-  declare module "*.svg" {
-    const value: string;
-    export default value;
+declare module "@vue/runtime-core" {
+  interface ComponentCustomProperties {
+    __(str: string, values?: any[]): string;
   }
 }
diff --git a/dashboard/src/layouts/Layout.vue b/dashboard/src/layouts/Layout.vue
index dffd4767..461dd64d 100644
--- a/dashboard/src/layouts/Layout.vue
+++ b/dashboard/src/layouts/Layout.vue
@@ -9,6 +9,6 @@
 	</div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import Navbar from "@/components/Navbar.vue";
 </script>