refactor(PWA): Handle tab buttons translations

frontend/src/components/ListView.vue

@@ -53,7 +53,7 @@
 				<TabButtons
 					v-if="props.tabButtons"
 					class="mt-5"
-					:buttons="[{ label: tabButtons[0] }, { label: tabButtons[1] }]"
+					:buttons="props.tabButtons"
 					v-model="activeTab"
 				/>
 
@@ -186,6 +186,8 @@ const props = defineProps({
 	},
 })
 
+const getButtonKey = (tab) => tab?.key ?? tab
+
 const listItemComponent = {
 	"Employee Checkin": markRaw(EmployeeCheckinItem),
 	"Attendance Request": markRaw(AttendanceRequestItem),
@@ -201,7 +203,7 @@ const dayjs = inject("$dayjs")
 const socket = inject("$socket")
 const employee = inject("$employee")
 const filterMap = reactive({})
-const activeTab = ref(props.tabButtons ? props.tabButtons[0] : undefined)
+const activeTab = ref(props.tabButtons ? getButtonKey(props.tabButtons[0]) : undefined)
 const areFiltersApplied = ref(false)
 const appliedFilters = ref([])
 const workflowStateField = ref(null)
@@ -221,7 +223,7 @@ const listOptions = ref({
 
 // computed properties
 const isTeamRequest = computed(() => {
-	return props.tabButtons && activeTab.value === props.tabButtons[1]
+	return props.tabButtons && activeTab.value === getButtonKey(props.tabButtons[1])
 })
 
 const formViewRoute = computed(() => {

frontend/src/components/RequestPanel.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="w-full">
 		<TabButtons
-			:buttons="[{ label: 'My Requests' }, { label: 'Team Requests' }]"
+			:buttons="TAB_BUTTONS"
 			v-model="activeTab"
 		/>
 		<RequestList v-if="activeTab == 'My Requests'" :items="myRequests" />
@@ -33,6 +33,8 @@ import { useListUpdate } from "@/composables/realtime"
 const activeTab = ref("My Requests")
 const socket = inject("$socket")
 
+const TAB_BUTTONS = ["My Requests", "Team Requests"] // __("My Requests"), __("Team Requests")
+
 const myRequests = computed(() =>
 	updateRequestDetails(myLeaves, myClaims, myShiftRequests, myAttendanceRequests)
 )

frontend/src/components/TabButtons.vue

@@ -2,16 +2,16 @@
 	<div class="flex p-1 bg-gray-200 rounded">
 		<button
 			v-for="button in buttons"
-			:key="button.label"
+			:key="button.key ?? button.label ?? button"
 			class="px-8 py-2.5 transition-all rounded-[7px] flex-auto font-medium text-base"
 			:class="
-				modelValue === button.label
+				modelValue === (button.key ?? button.label ?? button)
 					? 'bg-white drop-shadow text-gray-900'
 					: 'text-gray-600'
 			"
-			@click="$emit('update:modelValue', button.label)"
+			@click="$emit('update:modelValue', button.key ?? button.label ?? button)"
 		>
-			{{ __(button.label) }}
+			{{ button.label ?? __(button) }}
 		</button>
 	</div>
 </template>

frontend/src/views/employee_advance/List.vue

@@ -14,7 +14,7 @@
 import { IonPage } from "@ionic/vue"
 import ListView from "@/components/ListView.vue"
 
-const TAB_BUTTONS = ["My Advances", "Team Advances"]
+const TAB_BUTTONS = ["My Advances", "Team Advances"] // __("My Advances"), __("Team Advances")
 const EMPLOYEE_ADVANCE_FIELDS = [
 	"name",
 	"employee",

frontend/src/views/expense_claim/List.vue

@@ -15,7 +15,7 @@
 import { IonPage } from "@ionic/vue"
 import ListView from "@/components/ListView.vue"
 
-const TAB_BUTTONS = ["My Claims", "Team Claims"]
+const TAB_BUTTONS = ["My Claims", "Team Claims"] // __("My Claims"), __("Team Claims")
 const EXPENSE_CLAIM_FIELDS = [
 	"`tabExpense Claim`.name",
 	"`tabExpense Claim`.employee",

frontend/src/views/leave/List.vue

@@ -14,7 +14,7 @@
 import { IonPage } from "@ionic/vue"
 import ListView from "@/components/ListView.vue"
 
-const TAB_BUTTONS = ["My Leaves", "Team Leaves"]
+const TAB_BUTTONS = ["My Leaves", "Team Leaves"] // __("My Leaves"), __("Team Leaves")
 const LEAVE_FIELDS = [
 	"name",
 	"employee",