add template get

frontend/src/components/clientSubPages/History.vue

@@ -1,24 +1,26 @@
 <template>
-	<h3>History</h3>
-	<Tabs value="0" class="tabs">
-		<TabList>
-			<Tab value="0">Communication History</Tab>
-			<Tab value="1">Site Visits</Tab>
-			<Tab value="2">Ownership History</Tab>
-		</TabList>
-		<TabPanels>
-			<TabPanel value="0">
-				<div>Descending order of communications with the customer go here.</div>
-				<button class="sidebar-button">Add New</button>
-			</TabPanel>
-			<TabPanel value="1">
-				<div>Site Visits</div>
-			</TabPanel>
-			<TabPanel value="2">
-				<div>Ownership History</div>
-			</TabPanel>
-		</TabPanels>
-	</Tabs>
+	<div>
+		<h3>History</h3>
+		<Tabs value="0" class="tabs">
+			<TabList>
+				<Tab value="0">Communication History</Tab>
+				<Tab value="1">Site Visits</Tab>
+				<Tab value="2">Ownership History</Tab>
+			</TabList>
+			<TabPanels>
+				<TabPanel value="0">
+					<div>Descending order of communications with the customer go here.</div>
+					<button class="sidebar-button">Add New</button>
+				</TabPanel>
+				<TabPanel value="1">
+					<div>Site Visits</div>
+				</TabPanel>
+				<TabPanel value="2">
+					<div>Ownership History</div>
+				</TabPanel>
+			</TabPanels>
+		</Tabs>
+	</div>
 </template>
 
 <script setup>

frontend/src/components/pages/Estimate.vue

@@ -59,6 +59,27 @@
 			</div>
 		</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>
+
 		<!-- Items Section -->
 		<div class="items-section">
 			<h3>Items</h3>
@@ -334,6 +355,8 @@ const contactOptions = ref([]);
 const quotationItems = ref([]);
 const selectedItems = ref([]);
 const responses = ref(["Accepted", "Rejected"]);
+const templates = ref([]);
+const selectedTemplate = ref(null);
 
 const showAddressModal = ref(false);
 const showAddItemModal = ref(false);
@@ -359,6 +382,38 @@ const itemColumns = [
 ];
 
 // Methods
+const fetchTemplates = async () => {
+	if (!isNew.value) return;
+	try {
+		const result = await Api.getEstimateTemplates(company.currentCompany);
+		templates.value = result;
+	} catch (error) {
+		console.error("Error fetching templates:", error);
+		notificationStore.addNotification("Failed to fetch templates", "error");
+	}
+};
+
+const onTemplateChange = () => {
+	const template = templates.value.find(t => t.templateName === selectedTemplate.value);
+	if (template && template.items) {
+		selectedItems.value = template.items.map(item => ({
+			itemCode: item.itemCode,
+			itemName: item.itemName,
+			qty: item.quantity,
+			standardRate: item.rate,
+			discountAmount: null,
+			discountPercentage: item.discountPercentage,
+			discountType: item.discountPercentage > 0 ? 'percentage' : 'currency'
+		}));
+		// Calculate discount amounts
+		selectedItems.value.forEach(item => {
+			if (item.discountType === 'percentage') {
+				updateDiscountFromPercentage(item);
+			}
+		});
+	}
+};
+
 const searchAddresses = async () => {
 	const searchTerm = formData.address.trim();
 	if (!searchTerm) return;
@@ -574,6 +629,10 @@ watch(
 	},
 );
 
+watch(() => company.currentCompany, () => {
+	fetchTemplates();
+});
+
 // Watch for query param changes to refresh page behavior
 watch(
 	() => route.query,
@@ -672,6 +731,10 @@ onMounted(async () => {
 		console.error("Error loading quotation items:", error);
 	}
 
+	if (isNew.value) {
+		fetchTemplates();
+	}
+
 	if (addressQuery.value && isNew.value) {
 		// Creating new estimate - pre-fill address
 		await selectAddress(addressQuery.value);
@@ -747,7 +810,8 @@ onMounted(async () => {
 }
 
 .address-section,
-.contact-section {
+.contact-section,
+.template-section {
 	margin-bottom: 1.5rem;
 }
 
@@ -1014,5 +1078,19 @@ onMounted(async () => {
 	font-size: 0.9em;
 	color: #333;
 }
+
+.template-option {
+	display: flex;
+	flex-direction: column;
+}
+
+.template-name {
+	font-weight: bold;
+}
+
+.template-desc {
+	font-size: 0.85rem;
+	color: #666;
+}
 </style>
 <parameter name="filePath"></parameter>