diff --git a/roster/index.d.ts b/roster/index.d.ts
new file mode 100644
index 0000000000..b7da2476a2
--- /dev/null
+++ b/roster/index.d.ts
@@ -0,0 +1 @@
+declare module "frappe-ui";
diff --git a/roster/src/components/MonthView.vue b/roster/src/components/MonthView.vue
index c61fef5be8..8d2dd6ec4f 100644
--- a/roster/src/components/MonthView.vue
+++ b/roster/src/components/MonthView.vue
@@ -25,7 +25,7 @@
 						<th />
 						<th
 							v-for="(day, idx) in daysOfMonth"
-							:key="day"
+							:key="idx"
 							:class="{ 'border-l': idx }"
 						>
 							{{ day.dayName }} {{ dayjs(day.date).format("DD") }}
@@ -53,7 +53,7 @@
 						</td>
 						<td
 							v-for="(day, idx) in daysOfMonth"
-							:key="day"
+							:key="idx"
 							class="border-t"
 							:class="{
 								'border-l': idx,
@@ -74,9 +74,9 @@
 										showShiftAssignmentDialog = true;
 									"
 								>
-									<div class="truncate mb-1">{{ shift["shiftType"] }}</div>
+									<div class="truncate mb-1">{{ shift["shift_type"] }}</div>
 									<div class="text-xs text-gray-500">
-										{{ shift["startTime"] }} - {{ shift["endTime"] }}
+										{{ shift["start_time"] }} - {{ shift["end_time"] }}
 									</div>
 								</div>
 								<Button
@@ -117,19 +117,20 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import dayjs from "../utils/dayjs";
-import {
-	Avatar,
-	Dialog,
-	FormControl,
-	createListResource,
-	createResource,
-	createDocumentResource,
-} from "frappe-ui";
+import { Avatar, createListResource, createResource } from "frappe-ui";
 
 import ShiftAssignmentDialog from "./ShiftAssignmentDialog.vue";
 
+interface ShiftAssignment {
+	name: string;
+	shift_type: string;
+	status: string;
+	start_time: string;
+	end_time: string;
+}
+
 const firstOfMonth = ref(dayjs().date(1).startOf("D"));
-const shiftAssignment = ref(null);
+const shiftAssignment = ref();
 const showShiftAssignmentDialog = ref(false);
 const hoveredCell = ref({ employee: "", date: "" });
 
@@ -137,7 +138,10 @@ const daysOfMonth = computed(() => {
 	const daysOfMonth = [];
 	for (let i = 1; i <= firstOfMonth.value.daysInMonth(); i++) {
 		const date = firstOfMonth.value.date(i);
-		daysOfMonth.push({ dayName: date.format("ddd"), date: date.format("YYYY-MM-DD") });
+		daysOfMonth.push({
+			dayName: date.format("ddd"),
+			date: date.format("YYYY-MM-DD"),
+		});
 	}
 	return daysOfMonth;
 });
@@ -161,15 +165,15 @@ const shifts = createResource({
 			month_end: firstOfMonth.value.endOf("month").format("YYYY-MM-DD"),
 		};
 	},
-	transform: (data) => {
+	transform: (data: Record<string, ShiftAssignment>) => {
 		// convert employee -> shift assignments to employee -> day -> shifts
-		const mappedData = {};
+		const mappedData: Record<string, Record<string, ShiftAssignment[]>> = {};
 		for (const employee in data) {
 			mappedData[employee] = {};
 			for (let d = 1; d <= firstOfMonth.value.daysInMonth(); d++) {
 				const date = firstOfMonth.value.date(d);
 				const key = date.format("YYYY-MM-DD");
-				for (const assignment of data[employee]) {
+				for (const assignment of Object.values(data[employee])) {
 					if (
 						dayjs(assignment.start_date).isSameOrBefore(date) &&
 						(dayjs(assignment.end_date).isSameOrAfter(date) || !assignment.end_date)
@@ -177,17 +181,17 @@ const shifts = createResource({
 						if (!mappedData[employee][key]) mappedData[employee][key] = [];
 						mappedData[employee][key].push({
 							name: assignment.name,
-							shiftType: assignment.shift_type,
+							shift_type: assignment.shift_type,
 							status: assignment.status,
-							startTime: assignment.start_time.split(":").slice(0, 2).join(":"),
-							endTime: assignment.end_time.split(":").slice(0, 2).join(":"),
+							start_time: assignment.start_time.split(":").slice(0, 2).join(":"),
+							end_time: assignment.end_time.split(":").slice(0, 2).join(":"),
 						});
 					}
 				}
 				// sort shifts by start time
 				if (mappedData[employee][key])
-					mappedData[employee][key].sort((a, b) =>
-						a.startTime.localeCompare(b.startTime),
+					mappedData[employee][key].sort((a: ShiftAssignment, b: ShiftAssignment) =>
+						a.start_time.localeCompare(b.start_time),
 					);
 			}
 		}
diff --git a/roster/src/components/ShiftAssignmentDialog.vue b/roster/src/components/ShiftAssignmentDialog.vue
index 28ca027add..95c377d54a 100644
--- a/roster/src/components/ShiftAssignmentDialog.vue
+++ b/roster/src/components/ShiftAssignmentDialog.vue
@@ -88,29 +88,39 @@ import {
 	createListResource,
 } from "frappe-ui";
 
-const props = defineProps({
-	isDialogOpen: {
-		type: Boolean,
-		required: true,
-	},
-	shiftAssignmentName: {
-		type: String,
-		required: false,
-	},
+interface Form {
+	employee: string | { value: string };
+	company: string;
+	employee_name: string;
+	start_date: string;
+	shift_type: string | { value: string };
+	end_date: string;
+	status: "Active" | "Inactive";
+	department: string;
+}
+
+interface Props {
+	isDialogOpen: boolean;
+	shiftAssignmentName?: string;
 	selectedCell: {
-		type: Object,
-		required: true,
-	},
-	employees: {
-		type: Array,
-		required: false,
-		default: [],
-	},
+		employee: string;
+		date: string;
+	};
+	employees?: {
+		name: string;
+		employee_name: string;
+	}[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	employees: () => [],
 });
 
-const emit = defineEmits(["fetchShifts"]);
+const emit = defineEmits<{
+	(e: "fetchShifts"): void;
+}>();
 
-const defaultForm = {
+const defaultForm: Form = {
 	employee: "",
 	company: "",
 	employee_name: "",
@@ -188,23 +198,26 @@ const updateShiftAssigment = () => {
 };
 
 const createShiftAssigment = () => {
+	const employee = (form.employee as { value: string }).value;
+	const shiftType = (form.shift_type as { value: string }).value;
+
 	shiftAssignments.insert.submit({
 		...form,
-		employee: form.employee.value,
-		shift_type: form.shift_type.value,
+		employee: employee,
+		shift_type: shiftType,
 		docstatus: 1,
 	});
 };
 
 // RESOURCES
 
-const getShiftAssignment = (name) =>
+const getShiftAssignment = (name: string) =>
 	createDocumentResource({
 		doctype: "Shift Assignment",
 		name: name,
-		onSuccess: (data) => {
+		onSuccess: (data: Record<string, any>) => {
 			Object.keys(form).forEach((key) => {
-				form[key] = data[key];
+				form[key as keyof Form] = data[key];
 			});
 		},
 		setValue: {
@@ -217,13 +230,14 @@ const getShiftAssignment = (name) =>
 const employee = createResource({
 	url: "hrms.api.roster.get_values",
 	makeParams() {
+		const employee = (form.employee as { value: string }).value;
 		return {
 			doctype: "Employee",
-			name: form.employee.value,
+			name: employee,
 			fields: ["employee_name", "company", "department"],
 		};
 	},
-	onSuccess: (data) => {
+	onSuccess: (data: { employee_name: string; company: string; department: string }) => {
 		form.employee_name = data.employee_name;
 		form.company = data.company;
 		form.department = data.department;
@@ -233,7 +247,7 @@ const employee = createResource({
 const shiftTypes = createListResource({
 	doctype: "Shift Type",
 	fields: ["name"],
-	transform: (data) => data.map((shiftType) => shiftType.name),
+	transform: (data: { name: string }[]) => data.map((shiftType) => shiftType.name),
 	auto: true,
 });
 
diff --git a/roster/tsconfig.json b/roster/tsconfig.json
index feeb51776c..986bad1d32 100644
--- a/roster/tsconfig.json
+++ b/roster/tsconfig.json
@@ -16,5 +16,5 @@
 		"skipLibCheck": true,
 		"types": ["vite/client"]
 	},
-	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
+	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "index.d.ts"]
 }