create tempalte functionality

frontend/src/components/modals/SaveTemplateModal.vue

@@ -0,0 +1,82 @@
+<template>
+	<Modal
+		:visible="visible"
+		@update:visible="$emit('update:visible', $event)"
+		@close="$emit('update:visible', false)"
+		:options="{ showActions: false }"
+	>
+		<template #title>Save As Template</template>
+		<div class="modal-content">
+			<div class="field-group">
+				<label for="templateName" class="field-label">Template Name</label>
+				<InputText id="templateName" v-model="templateData.templateName" fluid />
+			</div>
+			<div class="field-group">
+				<label for="templateDescription" class="field-label">Description</label>
+				<InputText id="templateDescription" v-model="templateData.description" fluid />
+			</div>
+			<div class="confirmation-buttons">
+				<Button label="Cancel" @click="$emit('update:visible', false)" severity="secondary" />
+				<Button label="Submit" @click="submit" :disabled="!templateData.templateName" />
+			</div>
+		</div>
+	</Modal>
+</template>
+
+<script setup>
+import { reactive, watch } from "vue";
+import Modal from "../common/Modal.vue";
+import InputText from "primevue/inputtext";
+import Button from "primevue/button";
+
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		required: true,
+	},
+});
+
+const emit = defineEmits(["update:visible", "save"]);
+
+const templateData = reactive({
+	templateName: "",
+	description: "",
+});
+
+watch(
+	() => props.visible,
+	(newVal) => {
+		if (newVal) {
+			templateData.templateName = "";
+			templateData.description = "";
+		}
+	},
+);
+
+const submit = () => {
+	emit("save", { ...templateData });
+};
+</script>
+
+<style scoped>
+.field-label {
+	display: block;
+	margin-bottom: 0.5rem;
+	font-weight: 500;
+}
+
+.field-group {
+	margin-bottom: 1rem;
+}
+
+.confirmation-buttons {
+	display: flex;
+	gap: 1rem;
+	justify-content: flex-end;
+	margin-top: 1rem;
+}
+
+.modal-content {
+	padding: 1rem;
+}
+</style>