create tempalte functionality

frontend/src/components/pages/Estimate.vue

@@ -60,24 +60,29 @@
 		</div>
 
 		<!-- Template Section -->
-		<div v-if="isNew" class="template-section">
-			<label for="template" class="field-label">Template</label>
-			<Select
-				v-model="selectedTemplate"
-				:options="templates"
-				optionLabel="templateName"
-				optionValue="templateName"
-				placeholder="Select a template"
-				fluid
-				@change="onTemplateChange"
-			>
-				<template #option="slotProps">
-					<div class="template-option">
-						<div class="template-name">{{ slotProps.option.templateName }}</div>
-						<div class="template-desc">{{ slotProps.option.description }}</div>
-					</div>
-				</template>
-			</Select>
+		<div class="template-section">
+			<div v-if="isNew">
+				<label for="template" class="field-label">Template</label>
+				<Select
+					v-model="selectedTemplate"
+					:options="templates"
+					optionLabel="templateName"
+					optionValue="name"
+					placeholder="Select a template"
+					fluid
+					@change="onTemplateChange"
+				>
+					<template #option="slotProps">
+						<div class="template-option">
+							<div class="template-name">{{ slotProps.option.templateName }}</div>
+							<div class="template-desc">{{ slotProps.option.description }}</div>
+						</div>
+					</template>
+				</Select>
+			</div>
+			<div v-else>
+				<Button label="Save As Template" icon="pi pi-save" @click="openSaveTemplateModal" />
+			</div>
 		</div>
 
 		<!-- Items Section -->
@@ -198,6 +203,13 @@
 			<Button label="Submit" @click="submitResponse"/>
 		</Modal>
 
+		<!-- Save Template Modal -->
+		<SaveTemplateModal
+			:visible="showSaveTemplateModal"
+			@update:visible="showSaveTemplateModal = $event"
+			@save="confirmSaveTemplate"
+		/>
+
 		<!-- Address Search Modal -->
 		<Modal
 			:visible="showAddressModal"
@@ -311,6 +323,7 @@
 import { ref, reactive, computed, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import Modal from "../common/Modal.vue";
+import SaveTemplateModal from "../modals/SaveTemplateModal.vue";
 import DataTable from "../common/DataTable.vue";
 import DocHistory from "../common/DocHistory.vue";
 import InputText from "primevue/inputtext";
@@ -362,6 +375,7 @@ const showAddressModal = ref(false);
 const showAddItemModal = ref(false);
 const showConfirmationModal = ref(false);
 const showResponseModal = ref(false);
+const showSaveTemplateModal = ref(false);
 const addressSearchResults = ref([]);
 const itemSearchTerm = ref("");
 
@@ -394,7 +408,7 @@ const fetchTemplates = async () => {
 };
 
 const onTemplateChange = () => {
-	const template = templates.value.find(t => t.templateName === selectedTemplate.value);
+	const template = templates.value.find(t => t.name === selectedTemplate.value);
 	if (template && template.items) {
 		selectedItems.value = template.items.map(item => ({
 			itemCode: item.itemCode,
@@ -414,6 +428,35 @@ const onTemplateChange = () => {
 	}
 };
 
+const openSaveTemplateModal = () => {
+	showSaveTemplateModal.value = true;
+};
+
+const confirmSaveTemplate = async (templateData) => {
+	try {
+		const data = {
+			templateName: templateData.templateName,
+			description: templateData.description,
+			company: company.currentCompany,
+			sourceQuotation: estimate.value.name,
+			items: selectedItems.value.map(item => ({
+				itemCode: item.itemCode,
+				itemName: item.itemName,
+				description: item.description,
+				qty: item.qty,
+				standardRate: item.standardRate,
+				discountPercentage: item.discountPercentage
+			}))
+		};
+		await Api.createEstimateTemplate(data);
+		notificationStore.addSuccess("Template saved successfully", "success");
+		showSaveTemplateModal.value = false;
+	} catch (error) {
+		console.error("Error saving template:", error);
+		notificationStore.addNotification("Failed to save template", "error");
+	}
+};
+
 const searchAddresses = async () => {
 	const searchTerm = formData.address.trim();
 	if (!searchTerm) return;
@@ -1092,5 +1135,9 @@ onMounted(async () => {
 	font-size: 0.85rem;
 	color: #666;
 }
+
+.field-group {
+	margin-bottom: 1rem;
+}
 </style>
 <parameter name="filePath"></parameter>