Added a button to create an invoice. VERY PLACEHOLDER.

frontend/src/components/pages/Job.vue

@@ -13,7 +13,7 @@
 					</template>
 					<template #content>
 						<div class="widget-content">
-							{{ job.customInstallationAddress || "" }}
+							{{ job.jobAddress["fullAddress"] || "" }}
 						</div>
 					</template>
 				</Card>
@@ -32,6 +32,26 @@
 					</template>
 				</Card>
 			</div>
+			<div class="job-info">
+				<Card>
+					<template #header>
+						<div class="widget-header">
+							<h3>Job Status</h3>
+						</div>
+					</template>
+					<template #content>
+						<div class="widget-content">
+							Job is {{ job.status }}.
+							<button
+								class="sidebar-button"
+								@click="createInvoiceForJob()"
+							>
+								Create Invoice
+							</button>
+						</div>
+					</template>
+				</Card>
+			</div>
 		</div>
 		<div class="task-list">
 			<DataTable
@@ -124,6 +144,11 @@ const tableActions = computed(() => [
 	},
 ]);
 
+const createInvoiceForJob = async () => {
+	console.log(job);
+	await Api.createInvoiceForJob(job.value.name);
+}
+
 const handleLazyLoad = async (event) => {
 	console.log("Task list on Job Page - handling lazy load:", event);
 	try {
@@ -232,7 +257,7 @@ const handleLazyLoad = async (event) => {
 
 onMounted(async () => {
 	console.log("DEBUG: Query params:", route.query);
-	
+
 	try {
 		const optionsResult = await Api.getTaskStatusOptions();
 		if (optionsResult && optionsResult.length > 0) {