custom_ui/frontend/src/components/clientView/InstallStatus.vue

<template>
	<div class="install-status-card">
		<h4>SNW Install</h4>
		<div class="status-items">
			<div 
				class="status-item"
				:class="getStatusClass(onsiteMeetingStatus)"
				@click="handleBidMeetingClick"
			>
				<span class="status-label">Meeting</span>
				<span class="status-badge">{{ onsiteMeetingStatus }}</span>
			</div>

			<div 
				class="status-item"
				:class="getStatusClass(estimateSentStatus)"
				@click="handleEstimateClick"
			>
				<span class="status-label">Estimate</span>
				<span class="status-badge">{{ estimateSentStatus }}</span>
			</div>

			<div 
				class="status-item"
				:class="getStatusClass(jobStatus)"
				@click="handleJobClick"
			>
				<span class="status-label">Job</span>
				<span class="status-badge">{{ jobStatus }}</span>
			</div>

			<div 
				class="status-item"
				:class="getStatusClass(paymentStatus)"
				@click="handlePaymentClick"
			>
				<span class="status-label">Payment</span>
				<span class="status-badge">{{ paymentStatus }}</span>
			</div>
		</div>
	</div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useNotificationStore } from "../../stores/notifications-primevue";

const props = defineProps({
	onsiteMeetingStatus: {
		type: String,
		default: "Not Started",
	},
	estimateSentStatus: {
		type: String,
		default: "Not Started",
	},
	jobStatus: {
		type: String,
		default: "Not Started",
	},
	paymentStatus: {
		type: String,
		default: "Not Started",
	},
	fullAddress: {
		type: String,
		required: true,
	},
	bidMeeting: {
		type: String,
		default: "",
	},
	estimate: {
		type: String,
		default: "",
	},
	job: {
		type: String,
		default: "",
	},
	payment: {
		type: String,
		default: "",
	},
});

const router = useRouter();
const notificationStore = useNotificationStore();

const getStatusClass = (status) => {
	switch (status) {
		case "Not Started":
			return "status-not-started";
		case "In Progress":
			return "status-in-progress";
		case "Completed":
			return "status-completed";
		default:
			return "";
	}
};

const handleBidMeetingClick = () => {
	if (props.onsiteMeetingStatus === "Not Started") {
		router.push(`/calendar?tab=bid&new=true&address=${encodeURIComponent(props.fullAddress)}&template=SNW%20Install`);
	} else {
		router.push(`/calendar?tab=bid&name=${encodeURIComponent(props.bidMeeting)}`);
	}
};

const handleEstimateClick = () => {
	if (props.estimateSentStatus === "Not Started") {
		router.push(`/estimate?new=true&address=${encodeURIComponent(props.fullAddress)}&template=SNW%20Install`);
	} else {
		router.push(`/estimate?name=${encodeURIComponent(props.estimate)}`);
	}
};

const handleJobClick = () => {
	if (props.jobStatus === "Not Started") {
		notificationStore.addWarning(
			"The job will be created automatically once a quotation has been accepted by the customer."
		);
	} else {
		router.push(`/job?name=${encodeURIComponent(props.job)}`);
	}
};

const handlePaymentClick = () => {
	if (props.paymentStatus === "Not Started") {
		notificationStore.addWarning(
			"An Invoice will be automatically created once the job has been completed."
		);
	} else {
		notificationStore.addWarning("Page coming soon.");
	}
};
</script>

<style scoped>
.install-status-card {
	background: var(--surface-card);
	border-radius: 6px;
	padding: 0.75rem;
	border: 1px solid var(--surface-border);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	min-width: 240px;
	max-width: 280px;
}

.install-status-card h4 {
	margin: 0 0 0.5rem 0;
	color: var(--text-color);
	font-size: 0.9rem;
	font-weight: 600;
}

.status-items {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.status-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.4rem 0.6rem;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.15s ease;
	border: 1px solid transparent;
}

.status-item:hover {
	transform: translateX(2px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.status-label {
	font-weight: 500;
	color: var(--text-color);
	font-size: 0.8rem;
}

.status-badge {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border-radius: 10px;
	white-space: nowrap;
}

/* Status color variants */
.status-not-started {
	background: rgba(239, 68, 68, 0.08);
	border-color: rgba(239, 68, 68, 0.15);
}

.status-not-started .status-badge {
	background: #ef4444;
	color: white;
}

.status-not-started:hover {
	background: rgba(239, 68, 68, 0.12);
	border-color: rgba(239, 68, 68, 0.25);
}

.status-in-progress {
	background: rgba(59, 130, 246, 0.08);
	border-color: rgba(59, 130, 246, 0.15);
}

.status-in-progress .status-badge {
	background: #3b82f6;
	color: white;
}

.status-in-progress:hover {
	background: rgba(59, 130, 246, 0.12);
	border-color: rgba(59, 130, 246, 0.25);
}

.status-completed {
	background: rgba(34, 197, 94, 0.08);
	border-color: rgba(34, 197, 94, 0.15);
}

.status-completed .status-badge {
	background: #22c55e;
	color: white;
}

.status-completed:hover {
	background: rgba(34, 197, 94, 0.12);
	border-color: rgba(34, 197, 94, 0.25);
}

@media (max-width: 768px) {
	.install-status-card {
		max-width: 100%;
	}
}
</style>