Big update

frontend/src/components/clientView/QuickActions.vue

@@ -0,0 +1,118 @@
+<template>
+	<div class="quick-actions">
+		<Button
+			@click="handleEdit"
+			icon="pi pi-pencil"
+			label="Edit Information"
+			size="small"
+			severity="secondary"
+		/>
+		<Button
+			@click="handleCreateEstimate"
+			icon="pi pi-file-edit"
+			label="Create Estimate"
+			size="small"
+			severity="secondary"
+		/>
+		<Button
+			@click="handleCreateBidMeeting"
+			icon="pi pi-calendar-plus"
+			label="Create Bid Meeting"
+			size="small"
+			severity="secondary"
+		/>
+
+		<!-- Edit Confirmation Dialog -->
+		<Dialog
+			:visible="showEditConfirmDialog"
+			@update:visible="showEditConfirmDialog = $event"
+			header="Confirm Edit"
+			:modal="true"
+			:closable="false"
+			class="confirm-dialog"
+		>
+			<p>Are you sure you want to edit this client information? This will enable editing mode.</p>
+			<template #footer>
+				<Button
+					label="Cancel"
+					severity="secondary"
+					@click="showEditConfirmDialog = false"
+				/>
+				<Button
+					label="Yes, Edit"
+					@click="confirmEdit"
+				/>
+			</template>
+		</Dialog>
+	</div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Button from "primevue/button";
+import Dialog from "primevue/dialog";
+import { useRouter } from "vue-router";
+import DataUtils from "../../utils";
+
+const props = defineProps({
+	fullAddress: {
+		type: String,
+		required: true,
+	},
+});
+
+const emit = defineEmits(["edit-mode-enabled"]);
+
+const router = useRouter();
+const showEditConfirmDialog = ref(false);
+
+const handleEdit = () => {
+	showEditConfirmDialog.value = true;
+};
+
+const confirmEdit = () => {
+	showEditConfirmDialog.value = false;
+	emit("edit-mode-enabled");
+};
+
+const handleCreateEstimate = () => {
+	router.push({
+		path: "/estimate",
+		query: {
+			new: "true",
+			address: props.fullAddress,
+		},
+	});
+};
+
+const handleCreateBidMeeting = () => {
+	router.push({
+		path: "/calendar",
+		query: {
+			tab: "bids",
+			new: "true",
+			address: props.fullAddress,
+		},
+	});
+};
+</script>
+
+<style scoped>
+.quick-actions {
+	display: flex;
+	gap: 0.75rem;
+	justify-content: flex-end;
+	margin-bottom: 1rem;
+	flex-wrap: wrap;
+}
+
+.confirm-dialog {
+	max-width: 400px;
+}
+
+.confirm-dialog :deep(.p-dialog-footer) {
+	display: flex;
+	gap: 0.5rem;
+	justify-content: flex-end;
+}
+</style>