big update

frontend/src/components/modals/BidMeetingModal.vue

@@ -1,83 +1,130 @@
 <template>
-	<!-- New Meeting Creation Modal -->
-	<Modal
-		v-model:visible="showModal"
-		:options="modalOptions"
-		@confirm="handleConfirm"
-		@cancel="handleCancel"
-	>
-		<template #title>Schedule New Bid Meeting</template>
-		<div class="new-meeting-form">
-			<div class="form-group">
-				<label for="meeting-address">Address: <span class="required">*</span></label>
-				<div class="address-input-group">
-					<InputText
-						id="meeting-address"
-						v-model="formData.address"
-						class="address-input"
-						placeholder="Enter meeting address"
-						@input="validateForm"
+	<div>
+		<!-- New Meeting Creation Modal -->
+		<Modal
+			:visible="showModal"
+			@update:visible="showModal = $event"
+			:options="modalOptions"
+			@confirm="handleConfirm"
+			@cancel="handleCancel"
+		>
+			<template #title>Schedule New Bid Meeting</template>
+			<div class="new-meeting-form">
+				<div class="form-group">
+					<label for="meeting-address">Address: <span class="required">*</span></label>
+					<div class="address-input-group">
+						<InputText
+							id="meeting-address"
+							v-model="formData.address"
+							class="address-input"
+							placeholder="Enter meeting address"
+							@input="validateForm"
+						/>
+						<Button
+							label="Search"
+							icon="pi pi-search"
+							size="small"
+							:disabled="!formData.address.trim()"
+							@click="searchAddress"
+							class="search-btn"
+						/>
+					</div>
+				</div>
+				<div class="form-group">
+					<label for="meeting-contact">Contact: <span class="required">*</span></label>
+					<Select
+						id="meeting-contact"
+						v-model="formData.contact"
+						:options="availableContacts"
+						optionLabel="label"
+						optionValue="value"
+						:disabled="!formData.addressName || availableContacts.length === 0"
+						placeholder="Select a contact"
+						class="w-full"
+						@change="validateForm"
+					>
+						<template #option="slotProps">
+							<div class="contact-option">
+								<div class="contact-name">{{ slotProps.option.displayName }}</div>
+								<div class="contact-details">
+									<span v-if="slotProps.option.role" class="contact-role">{{ slotProps.option.role }}</span>
+									<span v-if="slotProps.option.email" class="contact-email">{{ slotProps.option.email }}</span>
+									<span v-if="slotProps.option.phone" class="contact-phone">{{ slotProps.option.phone }}</span>
+								</div>
+							</div>
+						</template>
+					</Select>
+				</div>
+				<div class="form-group">
+					<label for="meeting-project-template">Project Template (Optional):</label>
+					<Select
+						id="meeting-project-template"
+						v-model="formData.projectTemplate"
+						:options="availableProjectTemplates"
+						optionLabel="label"
+						optionValue="value"
+						placeholder="Select a project template"
+						class="w-full"
+						showClear
 					/>
-					<Button
-						label="Search"
-						icon="pi pi-search"
-						size="small"
-						:disabled="!formData.address.trim()"
-						@click="searchAddress"
-						class="search-btn"
+				</div>
+				<div class="form-group">
+					<label for="meeting-notes">Notes (Optional):</label>
+					<Textarea
+						id="meeting-notes"
+						v-model="formData.notes"
+						class="w-full"
+						placeholder="Additional notes..."
+						rows="3"
 					/>
 				</div>
 			</div>
-			<div class="form-group">
-				<label for="meeting-notes">Notes (Optional):</label>
-				<Textarea
-					id="meeting-notes"
-					v-model="formData.notes"
-					class="w-full"
-					placeholder="Additional notes..."
-					rows="3"
-				/>
-			</div>
-		</div>
-	</Modal>
+		</Modal>
 
-	<!-- Address Search Results Modal -->
-	<Modal
-		v-model:visible="showAddressSearchModal"
-		:options="searchModalOptions"
-		@confirm="closeAddressSearch"
-	>
-		<template #title>Address Search Results</template>
-		<div class="address-search-results">
-			<div v-if="addressSearchResults.length === 0" class="no-results">
-				<i class="pi pi-info-circle"></i>
-				<p>No addresses found matching your search.</p>
-			</div>
-			<div v-else class="results-list">
-				<div
-					v-for="(address, index) in addressSearchResults"
-					:key="index"
-					class="address-result-item"
-					@click="selectAddress(address)"
-				>
-					<i class="pi pi-map-marker"></i>
-					<span>{{ address }}</span>
+		<!-- Address Search Results Modal -->
+		<Modal
+			:visible="showAddressSearchModal"
+			@update:visible="showAddressSearchModal = $event"
+			:options="searchModalOptions"
+			@confirm="closeAddressSearch"
+		>
+			<template #title>Address Search Results</template>
+			<div class="address-search-results">
+				<div v-if="addressSearchResults.length === 0" class="no-results">
+					<i class="pi pi-info-circle"></i>
+					<p>No addresses found matching your search.</p>
+				</div>
+				<div v-else class="results-list">
+					<div
+						v-for="(address, index) in addressSearchResults"
+						:key="index"
+						class="address-result-item"
+						@click="selectAddress(address)"
+					>
+						<i class="pi pi-map-marker"></i>
+						<span>{{ typeof address === 'string' ? address : (address.fullAddress || address.name) }}</span>
+					</div>
 				</div>
 			</div>
-		</div>
-	</Modal>
+		</Modal>
+	</div>
 </template>
 
 <script setup>
 import { ref, computed, watch } from "vue";
+import { useRoute } from "vue-router";
 import Modal from "../common/Modal.vue";
 import InputText from "primevue/inputtext";
 import Textarea from "primevue/textarea";
 import Button from "primevue/button";
+import Select from "primevue/select";
 import { useNotificationStore } from "../../stores/notifications-primevue";
+import { useCompanyStore } from "../../stores/company";
 import Api from "../../api";
 
 const notificationStore = useNotificationStore();
+const companyStore = useCompanyStore();
+const route = useRoute();
 
 // Props
 const props = defineProps({
@@ -106,11 +153,17 @@ const showModal = computed({
 
 const showAddressSearchModal = ref(false);
 const addressSearchResults = ref([]);
+const availableContacts = ref([]);
+const availableProjectTemplates = ref([]);
+const selectedAddressDetails = ref(null);
 const isFormValid = ref(false);
 
 // Form data
 const formData = ref({
 	address: "",
+	addressName: "",
+	contact: "",
+	projectTemplate: "",
 	notes: "",
 });
 
@@ -140,7 +193,9 @@ const searchModalOptions = computed(() => ({
 // Methods
 const validateForm = () => {
 	const hasValidAddress = formData.value.address && formData.value.address.trim().length > 0;
-	isFormValid.value = hasValidAddress;
+	const hasValidAddressName = formData.value.addressName && formData.value.addressName.trim().length > 0;
+	const hasValidContact = formData.value.contact && formData.value.contact.trim().length > 0;
+	isFormValid.value = hasValidAddress && hasValidAddressName && hasValidContact;
 };
 
 const searchAddress = async () => {
@@ -151,8 +206,7 @@ const searchAddress = async () => {
 		const results = await Api.searchAddresses(searchTerm);
 		console.info("Address search results:", results);
 
-		// Ensure results is always an array
-		// const safeResults = Array.isArray(results) ? results : [];
+		// Store full address objects instead of just strings
 		addressSearchResults.value = results;
 
 		if (results.length === 0) {
@@ -167,33 +221,125 @@ const searchAddress = async () => {
 	}
 };
 
-const selectAddress = (address) => {
-	formData.value.address = address;
+const selectAddress = async (addressData) => {
+	// Get the address string for the API call
+	const addressString = typeof addressData === 'string' ? addressData : (addressData.fullAddress || addressData.name);
+	
+	// Set the display address immediately
+	formData.value.address = addressString;
 	showAddressSearchModal.value = false;
-	validateForm();
+	
+	try {
+		// Fetch the full address details with contacts
+		const fullAddressDetails = await Api.getAddressByFullAddress(addressString);
+		console.info("Fetched address details:", fullAddressDetails);
+		
+		// Store the fetched address details
+		selectedAddressDetails.value = fullAddressDetails;
+		
+		// Set the address name for the API request
+		formData.value.addressName = fullAddressDetails.name;
+		
+		// Populate contacts from the fetched address
+		if (fullAddressDetails.contacts && Array.isArray(fullAddressDetails.contacts)) {
+			availableContacts.value = fullAddressDetails.contacts.map(contact => ({
+				label: contact.fullName || `${contact.firstName || ''} ${contact.lastName || ''}`.trim(),
+				value: contact.name,
+				displayName: contact.fullName || `${contact.firstName || ''} ${contact.lastName || ''}`.trim(),
+				role: contact.role || contact.designation || '',
+				email: contact.email || contact.emailId || '',
+				phone: contact.phone || contact.mobileNo || ''
+			}));
+			
+			// Auto-select primary contact if available, otherwise first contact if only one
+			if (fullAddressDetails.primaryContact) {
+				formData.value.contact = fullAddressDetails.primaryContact;
+			} else if (availableContacts.value.length === 1) {
+				formData.value.contact = availableContacts.value[0].value;
+			} else {
+				formData.value.contact = "";
+			}
+		} else {
+			availableContacts.value = [];
+			formData.value.contact = "";
+			notificationStore.addWarning("No contacts found for this address.");
+		}
+		
+		validateForm();
+	} catch (error) {
+		console.error("Error fetching address details:", error);
+		notificationStore.addError("Failed to fetch address details. Please try again.");
+		
+		// Reset on error
+		formData.value.addressName = "";
+		availableContacts.value = [];
+		formData.value.contact = "";
+		selectedAddressDetails.value = null;
+		validateForm();
+	}
 };
 
 const closeAddressSearch = () => {
 	showAddressSearchModal.value = false;
 };
 
+const fetchProjectTemplates = async () => {
+	try {
+		const company = companyStore.currentCompany;
+		if (!company) {
+			console.warn("No company selected, cannot fetch project templates");
+			return;
+		}
+		
+		const templates = await Api.getJobTemplates(company);
+		console.info("Fetched project templates:", templates);
+		
+		if (templates && Array.isArray(templates)) {
+			availableProjectTemplates.value = templates.map(template => ({
+				label: template.name,
+				value: template.name
+			}));
+		} else {
+			availableProjectTemplates.value = [];
+		}
+	} catch (error) {
+		console.error("Error fetching project templates:", error);
+		availableProjectTemplates.value = [];
+		notificationStore.addWarning("Failed to load project templates.");
+	}
+};
+
 const handleConfirm = () => {
 	if (!isFormValid.value) return;
 
-	emit("confirm", { ...formData.value });
+	// Send only the necessary data (addressName and contact, not full address)
+	const confirmData = {
+		address: formData.value.addressName,
+		contact: formData.value.contact,
+		projectTemplate: formData.value.projectTemplate || null,
+		notes: formData.value.notes,
+	};
+	
+	console.log("BidMeetingModal - Emitting confirm with data:", confirmData);
+	
+	emit("confirm", confirmData);
 	resetForm();
 };
 
 const handleCancel = () => {
-	emit("cancel");
+	showModal.value = false;
 	resetForm();
 };
 
 const resetForm = () => {
 	formData.value = {
 		address: props.initialAddress || "",
+		addressName: "",
+		contact: "",
+		projectTemplate: "",
 		notes: "",
 	};
+	availableContacts.value = [];
 	validateForm();
 };
 
@@ -207,11 +353,66 @@ watch(
 	{ immediate: true },
 );
 
+watch(
+	() => companyStore.currentCompany,
+	async (newCompany) => {
+		if (newCompany && props.visible) {
+			await fetchProjectTemplates();
+		}
+	},
+);
+
 watch(
 	() => props.visible,
-	(isVisible) => {
+	async (isVisible) => {
 		if (isVisible) {
 			resetForm();
+			
+			// Fetch project templates
+			await fetchProjectTemplates();
+			
+			// Auto-select template from query parameter if provided
+			if (route.query.template) {
+				const templateName = decodeURIComponent(route.query.template);
+				const templateExists = availableProjectTemplates.value.some(
+					t => t.value === templateName
+				);
+				if (templateExists) {
+					formData.value.projectTemplate = templateName;
+				}
+			}
+			
+			// If there's an initial address, automatically search and fetch it
+			if (formData.value.address && formData.value.address.trim()) {
+				try {
+					const results = await Api.searchAddresses(formData.value.address.trim());
+					console.info("Auto-search results for initial address:", results);
+					
+					if (results.length === 1) {
+						// Auto-select if only one result
+						await selectAddress(results[0]);
+					} else if (results.length > 1) {
+						// Try to find exact match
+						const exactMatch = results.find(addr => {
+							const addrString = typeof addr === 'string' ? addr : (addr.fullAddress || addr.name);
+							return addrString === formData.value.address;
+						});
+						
+						if (exactMatch) {
+							await selectAddress(exactMatch);
+						} else {
+							// Show search results if multiple matches
+							addressSearchResults.value = results;
+							showAddressSearchModal.value = true;
+						}
+					} else {
+						notificationStore.addWarning("No addresses found for the provided address.");
+					}
+				} catch (error) {
+					console.error("Error auto-searching address:", error);
+					notificationStore.addError("Failed to load address details.");
+				}
+			}
 		}
 	},
 );
@@ -308,4 +509,42 @@ validateForm();
 	font-size: 0.9em;
 	color: #333;
 }
+
+.contact-option {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 4px 0;
+}
+
+.contact-name {
+	font-weight: 500;
+	color: #333;
+}
+
+.contact-details {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	font-size: 0.85em;
+	color: #666;
+}
+
+.contact-role {
+	color: #2196f3;
+	font-weight: 500;
+}
+
+.contact-email,
+.contact-phone {
+	color: #666;
+}
+
+.contact-email::before {
+	content: "📧 ";
+}
+
+.contact-phone::before {
+	content: "📞 ";
+}
 </style>

frontend/src/components/modals/MeetingDetailsModal.vue

@@ -2,41 +2,128 @@
 	<Modal v-model:visible="showModal" :options="modalOptions" @confirm="handleClose">
 		<template #title>Meeting Details</template>
 		<div v-if="meeting" class="meeting-details">
+			<!-- Meeting ID -->
+			<div class="detail-row">
+				<v-icon class="mr-2">mdi-identifier</v-icon>
+				<strong>Meeting ID:</strong>
+				<span class="detail-value">{{ meeting.name }}</span>
+			</div>
+
+			<!-- Address -->
 			<div class="detail-row">
 				<v-icon class="mr-2">mdi-map-marker</v-icon>
-				<strong>Addresss:</strong> {{ meeting.address.fullAddress }}
+				<strong>Address:</strong>
+				<span class="detail-value">{{ meeting.address?.fullAddress || meeting.address }}</span>
 			</div>
-			<div class="detail-row" v-if="meeting.client">
+
+			<!-- Contact -->
+			<div class="detail-row" v-if="meeting.contact">
 				<v-icon class="mr-2">mdi-account</v-icon>
-				<strong>Client:</strong> {{ meeting.client }}
+				<strong>Contact:</strong>
+				<span class="detail-value">{{ meeting.contact }}</span>
 			</div>
-			<div class="detail-row">
-				<v-icon class="mr-2">mdi-calendar</v-icon>
-				<strong>Date:</strong> {{ formatDate(meeting.date) }}
+
+			<!-- Party Name (Customer) -->
+			<div class="detail-row" v-if="meeting.partyName">
+				<v-icon class="mr-2">mdi-account-group</v-icon>
+				<strong>Customer:</strong>
+				<span class="detail-value">{{ meeting.partyName }} ({{ meeting.partyType }})</span>
 			</div>
-			<div class="detail-row">
-				<v-icon class="mr-2">mdi-clock</v-icon>
-				<strong>Time:</strong> {{ formatTimeDisplay(meeting.scheduledTime) }}
+
+			<!-- Project Template -->
+			<div class="detail-row" v-if="meeting.projectTemplate">
+				<v-icon class="mr-2">mdi-folder-outline</v-icon>
+				<strong>Template:</strong>
+				<span class="detail-value">{{ meeting.projectTemplate }}</span>
 			</div>
-			<div class="detail-row" v-if="meeting.duration">
+
+			<!-- Scheduled Time -->
+			<div class="detail-row" v-if="meeting.startTime">
+				<v-icon class="mr-2">mdi-calendar-clock</v-icon>
+				<strong>Scheduled:</strong>
+				<span class="detail-value">{{ formatDateTime(meeting.startTime) }}</span>
+			</div>
+
+			<!-- Duration -->
+			<div class="detail-row" v-if="meeting.startTime && meeting.endTime">
 				<v-icon class="mr-2">mdi-timer</v-icon>
-				<strong>Duration:</strong> {{ meeting.duration }} minutes
+				<strong>Duration:</strong>
+				<span class="detail-value">{{ calculateDuration(meeting.startTime, meeting.endTime) }} minutes</span>
 			</div>
+
+			<!-- Status -->
+			<div class="detail-row">
+				<v-icon class="mr-2">mdi-check-circle</v-icon>
+				<strong>Status:</strong>
+				<v-chip size="small" :color="getStatusColor(meeting.status)">
+					{{ meeting.status }}
+				</v-chip>
+			</div>
+
+			<!-- Assigned Employee -->
+			<div class="detail-row" v-if="meeting.assignedEmployee">
+				<v-icon class="mr-2">mdi-account-tie</v-icon>
+				<strong>Assigned To:</strong>
+				<span class="detail-value">{{ meeting.assignedEmployee }}</span>
+			</div>
+
+			<!-- Completed By -->
+			<div class="detail-row" v-if="meeting.completedBy">
+				<v-icon class="mr-2">mdi-account-check</v-icon>
+				<strong>Completed By:</strong>
+				<span class="detail-value">{{ meeting.completedBy }}</span>
+			</div>
+
+			<!-- Company -->
+			<div class="detail-row" v-if="meeting.company">
+				<v-icon class="mr-2">mdi-domain</v-icon>
+				<strong>Company:</strong>
+				<span class="detail-value">{{ meeting.company }}</span>
+			</div>
+
+			<!-- Notes -->
 			<div class="detail-row" v-if="meeting.notes">
 				<v-icon class="mr-2">mdi-note-text</v-icon>
-				<strong>Notes:</strong> {{ meeting.notes }}
+				<strong>Notes:</strong>
+				<span class="detail-value">{{ meeting.notes }}</span>
 			</div>
-			<div class="detail-row" v-if="meeting.status">
-				<v-icon class="mr-2">mdi-check-circle</v-icon>
-				<strong>Status:</strong> {{ meeting.status }}
+
+			<!-- Action Buttons -->
+			<div class="action-buttons">
+				<v-btn
+					v-if="meeting.status !== 'Completed'"
+					@click="handleMarkComplete"
+					color="success"
+					variant="elevated"
+					:loading="isUpdating"
+				>
+					<v-icon left>mdi-check</v-icon>
+					Mark as Completed
+				</v-btn>
+
+				<v-btn
+					v-if="meeting.status === 'Completed'"
+					@click="handleCreateEstimate"
+					color="primary"
+					variant="elevated"
+				>
+					<v-icon left>mdi-file-document-outline</v-icon>
+					Create Estimate
+				</v-btn>
 			</div>
 		</div>
 	</Modal>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
 import Modal from "../common/Modal.vue";
+import Api from "../../api";
+import { useNotificationStore } from "../../stores/notifications-primevue";
+
+const router = useRouter();
+const notificationStore = useNotificationStore();
 
 // Props
 const props = defineProps({
@@ -51,9 +138,11 @@ const props = defineProps({
 });
 
 // Emits
-const emit = defineEmits(["update:visible", "close"]);
+const emit = defineEmits(["update:visible", "close", "meetingUpdated"]);
 
 // Local state
+const isUpdating = ref(false);
+
 const showModal = computed({
 	get() {
 		return props.visible;
@@ -65,7 +154,7 @@ const showModal = computed({
 
 // Modal options
 const modalOptions = computed(() => ({
-	maxWidth: "600px",
+	maxWidth: "700px",
 	showCancelButton: false,
 	confirmButtonText: "Close",
 	confirmButtonColor: "primary",
@@ -76,6 +165,89 @@ const handleClose = () => {
 	emit("close");
 };
 
+const handleMarkComplete = async () => {
+	if (!props.meeting?.name) return;
+
+	try {
+		isUpdating.value = true;
+
+		await Api.updateBidMeeting(props.meeting.name, {
+			status: "Completed",
+		});
+
+		notificationStore.addNotification({
+			type: "success",
+			title: "Meeting Completed",
+			message: "The meeting has been marked as completed.",
+			duration: 4000,
+		});
+
+		// Emit event to refresh the calendar
+		emit("meetingUpdated");
+		handleClose();
+	} catch (error) {
+		console.error("Error marking meeting as complete:", error);
+		notificationStore.addNotification({
+			type: "error",
+			title: "Error",
+			message: "Failed to update meeting status.",
+			duration: 5000,
+		});
+	} finally {
+		isUpdating.value = false;
+	}
+};
+
+const handleCreateEstimate = () => {
+	if (!props.meeting) return;
+
+	const addressText = props.meeting.address?.fullAddress || props.meeting.address || "";
+	const template = props.meeting.projectTemplate || "";
+	const fromMeeting = props.meeting.name || "";
+
+	router.push({
+		path: "/estimate",
+		query: {
+			new: "true",
+			address: addressText,
+			template: template,
+			from: fromMeeting,
+		},
+	});
+};
+
+const formatDateTime = (dateTimeStr) => {
+	if (!dateTimeStr) return "";
+	const date = new Date(dateTimeStr);
+	return date.toLocaleString("en-US", {
+		weekday: "short",
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+		hour: "numeric",
+		minute: "2-digit",
+		hour12: true,
+	});
+};
+
+const calculateDuration = (startTime, endTime) => {
+	if (!startTime || !endTime) return 0;
+	const start = new Date(startTime);
+	const end = new Date(endTime);
+	const diffMs = end - start;
+	return Math.round(diffMs / (1000 * 60)); // Convert to minutes
+};
+
+const getStatusColor = (status) => {
+	const statusColors = {
+		Unscheduled: "warning",
+		Scheduled: "info",
+		Completed: "success",
+		Cancelled: "error",
+	};
+	return statusColors[status] || "default";
+};
+
 const formatTimeDisplay = (time) => {
 	if (!time) return "";
 	const [hours, minutes] = time.split(":").map(Number);
@@ -101,17 +273,39 @@ const formatDate = (dateStr) => {
 	display: flex;
 	flex-direction: column;
 	gap: 12px;
+	padding: 8px 0;
 }
 
 .detail-row {
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	gap: 8px;
 	padding: 8px 0;
+	border-bottom: 1px solid #f0f0f0;
+}
+
+.detail-row:last-of-type {
+	border-bottom: none;
 }
 
 .detail-row strong {
-	margin-right: 8px;
+	min-width: 120px;
+	color: #666;
+	font-size: 0.9em;
+}
+
+.detail-value {
+	flex: 1;
 	color: #333;
+	word-break: break-word;
+}
+
+.action-buttons {
+	display: flex;
+	gap: 12px;
+	margin-top: 16px;
+	padding-top: 16px;
+	border-top: 2px solid #e0e0e0;
+	justify-content: center;
 }
 </style>