add history component

frontend/src/components/pages/Estimate.vue

@@ -76,7 +76,7 @@
 					:disabled="!isEditable"
 					showButtons
 					buttonLayout="horizontal"
-					@input="updateTotal"
+					@input="onQtyChange(item)"
 					class="qty-input"
 				/>
 				<span>Price: ${{ (item.standardRate || 0).toFixed(2) }}</span>
@@ -90,7 +90,7 @@
 							locale="en-US"
 							:min="0"
 							:disabled="!isEditable"
-							@input="updateTotal"
+							@input="updateDiscountFromAmount(item)"
 							placeholder="$0.00"
 							class="discount-input"
 						/>
@@ -101,7 +101,7 @@
 							:min="0"
 							:max="100"
 							:disabled="!isEditable"
-							@input="updateTotal"
+							@input="updateDiscountFromPercentage(item)"
 							placeholder="0%"
 							class="discount-input"
 						/>
@@ -123,7 +123,7 @@
 						/>
 					</div>
 				</div>
-				<span>Total: ${{ ((item.qty || 0) * (item.standardRate || 0) - (item.discountType === 'percentage' ? ((item.qty || 0) * (item.standardRate || 0) * ((item.discountPercentage || 0) / 100)) : (item.discountAmount || 0))).toFixed(2) }}</span>
+				<span>Total: ${{ ((item.qty || 0) * (item.standardRate || 0) - (item.discountAmount || 0)).toFixed(2) }}</span>
 				<Button
 					v-if="isEditable"
 					icon="pi pi-trash"
@@ -158,6 +158,11 @@
 					{{ getResponseText(estimateResponse) }}
 				</span>
 			</div>
+			<DocHistory
+				v-if="!isNew && estimate && estimate.history"
+				:events="estimate.history"
+				doctype="Estimate"
+			/>
 		</div>
 
 		<!-- Manual Response Modal -->
@@ -286,6 +291,7 @@ import { ref, reactive, computed, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import Modal from "../common/Modal.vue";
 import DataTable from "../common/DataTable.vue";
+import DocHistory from "../common/DocHistory.vue";
 import InputText from "primevue/inputtext";
 import InputNumber from "primevue/inputnumber";
 import Button from "primevue/button";
@@ -429,8 +435,26 @@ const clearItems = () => {
 	selectedItems.value = [];
 };
 
-const updateTotal = () => {
-	// Computed will update
+const updateDiscountFromAmount = (item) => {
+	const total = (item.qty || 0) * (item.standardRate || 0);
+	if (total === 0) {
+		item.discountPercentage = 0;
+	} else {
+		item.discountPercentage = ((item.discountAmount || 0) / total) * 100;
+	}
+};
+
+const updateDiscountFromPercentage = (item) => {
+	const total = (item.qty || 0) * (item.standardRate || 0);
+	item.discountAmount = total * ((item.discountPercentage || 0) / 100);
+};
+
+const onQtyChange = (item) => {
+	if (item.discountType === 'percentage') {
+		updateDiscountFromPercentage(item);
+	} else {
+		updateDiscountFromAmount(item);
+	}
 };
 
 const saveDraft = async () => {
@@ -443,8 +467,8 @@ const saveDraft = async () => {
 			items: selectedItems.value.map((i) => ({
 				itemCode: i.itemCode,
 				qty: i.qty,
-				discountAmount: i.discountType === 'currency' ? i.discountAmount : 0,
-				discountPercentage: i.discountType === 'percentage' ? i.discountPercentage : 0
+				discountAmount: i.discountAmount,
+				discountPercentage: i.discountPercentage
 			})),
 			estimateName: formData.estimateName,
 			requiresHalfPayment: formData.requiresHalfPayment,
@@ -509,12 +533,6 @@ const confirmAndSendEstimate = async () => {
 
 const toggleDiscountType = (item, type) => {
 	item.discountType = type;
-	if (type === 'currency') {
-		item.discountPercentage = null;
-	} else {
-		item.discountAmount = null;
-	}
-	updateTotal();
 };
 
 const tableActions = [
@@ -531,12 +549,7 @@ const totalCost = computed(() => {
 	return (selectedItems.value || []).reduce((sum, item) => {
 		const qty = item.qty || 0;
 		const rate = item.standardRate || 0;
-		let discount = 0;
-		if (item.discountType === 'percentage') {
-			discount = (qty * rate) * ((item.discountPercentage || 0) / 100);
-		} else {
-			discount = item.discountAmount || 0;
-		}
+		const discount = item.discountAmount || 0;
 		return sum + (qty * rate) - discount;
 	}, 0);
 });

frontend/src/components/pages/Estimates.vue

@@ -163,7 +163,9 @@ const columns = [
 		type: "status-button",
 		sortable: true,
 		buttonVariant: "outlined",
-		onStatusClick: (status, rowData) => handleEstimateClick(status, rowData),
+		onStatusClick: (status, rowData) => {
+			router.push(`/estimate?name=${encodeURIComponent(rowData.id)}`);
+		},
 		//disableCondition: (status) => status?.toLowerCase() === "draft",
 		disableCondition: false
 	},
@@ -188,11 +190,6 @@ const tableActions = [
 	},
 ];
 
-const handleEstimateClick = (status, rowData) => {
-	// Navigate to estimate details page with the name
-	router.push(`/estimate?name=${encodeURIComponent(rowData.name)}`);
-};
-
 const closeSubmitEstimateModal = () => {
 	showSubmitEstimateModal.value = false;
 };