big updates

frontend/src/components/modals/MeetingDetailsModal.vue

@@ -0,0 +1,117 @@
+<template>
+	<Modal v-model:visible="showModal" :options="modalOptions" @confirm="handleClose">
+		<template #title>Meeting Details</template>
+		<div v-if="meeting" class="meeting-details">
+			<div class="detail-row">
+				<v-icon class="mr-2">mdi-map-marker</v-icon>
+				<strong>Address:</strong> {{ meeting.address }}
+			</div>
+			<div class="detail-row" v-if="meeting.client">
+				<v-icon class="mr-2">mdi-account</v-icon>
+				<strong>Client:</strong> {{ meeting.client }}
+			</div>
+			<div class="detail-row">
+				<v-icon class="mr-2">mdi-calendar</v-icon>
+				<strong>Date:</strong> {{ formatDate(meeting.date) }}
+			</div>
+			<div class="detail-row">
+				<v-icon class="mr-2">mdi-clock</v-icon>
+				<strong>Time:</strong> {{ formatTimeDisplay(meeting.scheduledTime) }}
+			</div>
+			<div class="detail-row" v-if="meeting.duration">
+				<v-icon class="mr-2">mdi-timer</v-icon>
+				<strong>Duration:</strong> {{ meeting.duration }} minutes
+			</div>
+			<div class="detail-row" v-if="meeting.notes">
+				<v-icon class="mr-2">mdi-note-text</v-icon>
+				<strong>Notes:</strong> {{ meeting.notes }}
+			</div>
+			<div class="detail-row" v-if="meeting.status">
+				<v-icon class="mr-2">mdi-check-circle</v-icon>
+				<strong>Status:</strong> {{ meeting.status }}
+			</div>
+		</div>
+	</Modal>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import Modal from "../common/Modal.vue";
+
+// Props
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: false,
+	},
+	meeting: {
+		type: Object,
+		default: null,
+	},
+});
+
+// Emits
+const emit = defineEmits(["update:visible", "close"]);
+
+// Local state
+const showModal = computed({
+	get() {
+		return props.visible;
+	},
+	set(value) {
+		emit("update:visible", value);
+	},
+});
+
+// Modal options
+const modalOptions = computed(() => ({
+	maxWidth: "600px",
+	showCancelButton: false,
+	confirmButtonText: "Close",
+	confirmButtonColor: "primary",
+}));
+
+// Methods
+const handleClose = () => {
+	emit("close");
+};
+
+const formatTimeDisplay = (time) => {
+	if (!time) return "";
+	const [hours, minutes] = time.split(":").map(Number);
+	const displayHour = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
+	const ampm = hours >= 12 ? "PM" : "AM";
+	return `${displayHour}:${minutes.toString().padStart(2, "0")} ${ampm}`;
+};
+
+const formatDate = (dateStr) => {
+	if (!dateStr) return "";
+	const date = new Date(dateStr);
+	return date.toLocaleDateString("en-US", {
+		weekday: "long",
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	});
+};
+</script>
+
+<style scoped>
+.meeting-details {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.detail-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 8px 0;
+}
+
+.detail-row strong {
+	margin-right: 8px;
+	color: #333;
+}
+</style>