big updates

frontend/src/components/common/DataTable.vue

@@ -272,6 +272,21 @@
 					:severity="getBadgeColor(slotProps.data[col.fieldName])"
 				/>
 			</template>
+			<template v-if="col.type === 'status-button'" #body="slotProps">
+				<Button
+					:label="slotProps.data[col.fieldName]"
+					:severity="getBadgeColor(slotProps.data[col.fieldName])"
+					size="small"
+					:variant="col.buttonVariant || 'filled'"
+					@click="handleStatusButtonClick(col, slotProps.data)"
+					:disabled="
+						loading ||
+						(col.disableCondition &&
+							col.disableCondition(slotProps.data[col.fieldName]))
+					"
+					class="status-button"
+				/>
+			</template>
 			<template v-if="col.type === 'date'" #body="slotProps">
 				<span>{{ formatDate(slotProps.data[col.fieldName]) }}</span>
 			</template>
@@ -1044,6 +1059,17 @@ const handleBulkAction = (action, selectedRows) => {
 	}
 };
 
+// Handle status button clicks
+const handleStatusButtonClick = (column, rowData) => {
+	try {
+		if (column.onStatusClick && typeof column.onStatusClick === "function") {
+			column.onStatusClick(rowData[column.fieldName], rowData);
+		}
+	} catch (error) {
+		console.error("Error executing status button click:", error);
+	}
+};
+
 const getBadgeColor = (status) => {
 	switch (status?.toLowerCase()) {
 		case "completed":
@@ -1547,4 +1573,29 @@ defineExpose({
 		transform: translateX(0);
 	}
 }
+
+/* Status Button Styles */
+.status-button {
+	font-weight: 500;
+	font-size: 0.8rem;
+	border-radius: 4px;
+	transition: all 0.2s ease;
+	min-width: 100px;
+	text-align: center;
+}
+
+.status-button:not(:disabled):hover {
+	transform: translateY(-1px);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.status-button:disabled {
+	cursor: default;
+	opacity: 0.8;
+}
+
+.status-button:disabled:hover {
+	transform: none;
+	box-shadow: none;
+}
 </style>