Create videos frontend

src/views/pages/ksDocuments/KsDocuments.vue

@@ -12,7 +12,7 @@
 			:globalFilterFields="['ingestionInfo.metadata.KsApplicationName', 'ingestionInfo.metadata.KsFileSources', 'ingestionInfo.metadata.KsDocSource', 'ingestionStatus', 'ingestionDateFormat']"
 			tableStyle="min-width: 70rem" removableSort>
 			<template #header>
-				<div class="flex items-center justify-between gap-4 p-4 ">
+				<div class="flex items-center justify-between gap-8 p-6 ">
 					<span class="text-xl font-bold">Knowledge Source Documents</span>
 					<div class="flex items-center gap-2 flex-grow">
 						<IconField class="flex-grow">
@@ -66,9 +66,9 @@
 						placeholder="Search by File" />
 				</template>
 			</Column>
-			<Column field="ingestionInfo.metadata.KsDocSource" header="DocType" sortable style="min-width: 12rem">
+			<Column field="ingestionInfo.metadata.KsDoctype" header="DocType" sortable style="min-width: 12rem">
 				<template #body="{ data }">
-					{{ data.ingestionInfo.metadata.KsDoctype }}
+					{{ mapDocType(data.ingestionInfo.metadata.KsDoctype) }}
 				</template>
 				<template #filter="{ filterModel, filterCallback }">
 					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
@@ -388,6 +388,16 @@ const getFileIcon = (filename) => {
 	}
 }
 
+const mapDocType = (type) => {
+	const mapping = {
+		'functional': 'Functional',
+		'code_instruction': 'Code Instruction',
+		'specification': 'Specification',
+		'other': 'Other'
+	};
+	return mapping[type] || type;
+};
+
 // Function to format date string
 function formatDate(dateString) {
 	// Parse the date string using moment