add date picker

frontend/src/components/common/DataTable.vue

@@ -135,6 +135,9 @@
 					:severity="getBadgeColor(slotProps.data[col.fieldName])"
 				/>
 			</template>
+			<template v-if="col.type === 'date'" #body="slotProps">
+				<span>{{ formatDate(slotProps.data[col.fieldName]) }}</span>
+			</template>
 			<template v-if="col.type === 'button'" #body="slotProps">
 				<Button
 					:label="slotProps.data[col.fieldName]"
@@ -626,16 +629,47 @@ const handleFilterInput = (fieldName, value, filterCallback) => {
 };
 
 const getBadgeColor = (status) => {
-	console.log("DEBUG: - getBadgeColor status", status);
 	switch (status?.toLowerCase()) {
 		case "completed":
-			return "success"; // green
+		case "open":
+		case "active":
+			return "success";
 		case "in progress":
-			return "warn";
+		case "pending":
+			return "warning";
 		case "not started":
-			return "danger"; // red
+		case "closed":
+		case "cancelled":
+			return "danger";
 		default:
-			return "info"; // blue fallback
+			return "info";
+	}
+};
+
+const formatDate = (dateValue) => {
+	if (!dateValue) return "";
+
+	try {
+		// Handle different date formats
+		let date;
+		if (typeof dateValue === "string") {
+			date = new Date(dateValue);
+		} else if (dateValue instanceof Date) {
+			date = dateValue;
+		} else {
+			return "";
+		}
+
+		// Check if date is valid
+		if (isNaN(date.getTime())) {
+			return dateValue; // Return original value if can't parse
+		}
+
+		// Format as MM/DD/YYYY
+		return date.toLocaleDateString("en-US");
+	} catch (error) {
+		console.error("Error formatting date:", error);
+		return dateValue;
 	}
 };
 console.log("DEBUG: - DataTable props.columns", props.columns);