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);

frontend/src/components/common/Form.vue

@@ -267,17 +267,35 @@
 						<DatePicker
 							:id="field.name"
 							v-model="fieldValues[field.name]"
-							:placeholder="field.placeholder"
+							:placeholder="field.placeholder || getDatePlaceholder(field)"
 							:disabled="field.disabled || isFormDisabled"
 							:readonly="field.readonly"
-							:minDate="field.minDate"
-							:maxDate="field.maxDate"
+							:minDate="parseDateValue(field.minDate)"
+							:maxDate="parseDateValue(field.maxDate)"
 							:invalid="!!getFieldError(field.name)"
 							fluid
 							showIcon
 							iconDisplay="input"
-							:dateFormat="field.dateFormat || 'dd/mm/yy'"
-							@update:model-value="handleFieldChange(field, $event)"
+							:dateFormat="getDateFormat(field)"
+							:showTime="field.showTime || false"
+							:timeOnly="field.timeOnly || false"
+							:hourFormat="field.hourFormat || '24'"
+							:stepHour="field.stepHour || 1"
+							:stepMinute="field.stepMinute || 1"
+							:showSeconds="field.showSeconds || false"
+							:stepSecond="field.stepSecond || 1"
+							:showButtonBar="field.showButtonBar !== false"
+							:todayButtonLabel="field.todayButtonLabel || 'Today'"
+							:clearButtonLabel="field.clearButtonLabel || 'Clear'"
+							:showWeek="field.showWeek || false"
+							:manualInput="field.manualInput !== false"
+							:yearNavigator="field.yearNavigator || false"
+							:monthNavigator="field.monthNavigator || false"
+							:yearRange="field.yearRange || '1900:2100'"
+							:inline="field.inline || false"
+							:view="field.view || 'date'"
+							:touchUI="field.touchUI || false"
+							@update:model-value="handleDateChange(field, $event)"
 							@blur="handleFieldBlur(field, fieldValues[field.name])"
 						/>
 						<small v-if="field.helpText" class="field-help">{{
@@ -293,7 +311,7 @@
 						</Message>
 					</div>
 
-					<!-- DateTime Input -->
+					<!-- DateTime Input (Legacy - use date with showTime: true) -->
 					<div v-else-if="field.type === 'datetime'" class="field-wrapper">
 						<label v-if="field.label" :for="field.name" class="field-label">
 							{{ field.label }}
@@ -302,19 +320,35 @@
 						<DatePicker
 							:id="field.name"
 							v-model="fieldValues[field.name]"
-							:placeholder="field.placeholder"
+							:placeholder="
+								field.placeholder ||
+								getDatePlaceholder({ ...field, showTime: true })
+							"
 							:disabled="field.disabled || isFormDisabled"
 							:readonly="field.readonly"
-							:minDate="field.minDate"
-							:maxDate="field.maxDate"
+							:minDate="parseDateValue(field.minDate)"
+							:maxDate="parseDateValue(field.maxDate)"
 							:invalid="!!getFieldError(field.name)"
 							fluid
 							showIcon
 							iconDisplay="input"
 							showTime
 							:hourFormat="field.hourFormat || '24'"
-							:dateFormat="field.dateFormat || 'dd/mm/yy'"
-							@update:model-value="handleFieldChange(field, $event)"
+							:dateFormat="getDateFormat({ ...field, showTime: true })"
+							:stepHour="field.stepHour || 1"
+							:stepMinute="field.stepMinute || 1"
+							:showSeconds="field.showSeconds || false"
+							:stepSecond="field.stepSecond || 1"
+							:showButtonBar="field.showButtonBar !== false"
+							:todayButtonLabel="field.todayButtonLabel || 'Today'"
+							:clearButtonLabel="field.clearButtonLabel || 'Clear'"
+							:manualInput="field.manualInput !== false"
+							:yearNavigator="field.yearNavigator || false"
+							:monthNavigator="field.monthNavigator || false"
+							:yearRange="field.yearRange || '1900:2100'"
+							:inline="field.inline || false"
+							:touchUI="field.touchUI || false"
+							@update:model-value="handleDateChange(field, $event)"
 							@blur="handleFieldBlur(field, fieldValues[field.name])"
 						/>
 						<small v-if="field.helpText" class="field-help">{{
@@ -536,6 +570,105 @@ const initializeFormData = () => {
 	});
 };
 
+// Date utility functions
+const getDateDefaultValue = (field) => {
+	if (field.defaultValue !== undefined) {
+		// Handle string date values
+		if (typeof field.defaultValue === "string") {
+			if (field.defaultValue === "today" || field.defaultValue === "now") {
+				return new Date();
+			}
+			// Try to parse the string as a date
+			const parsed = new Date(field.defaultValue);
+			return !isNaN(parsed.getTime()) ? parsed : null;
+		}
+		// Handle Date objects or null/undefined
+		return field.defaultValue;
+	}
+
+	// Set default based on field configuration
+	if (field.defaultToToday || field.defaultToNow) {
+		const now = new Date();
+		if (field.type === "date" && !field.showTime) {
+			// For date-only fields, set to start of day
+			return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+		}
+		return now;
+	}
+
+	// No default value
+	return null;
+};
+
+const parseDateValue = (value) => {
+	if (!value) return null;
+	if (value instanceof Date) return value;
+	if (typeof value === "string") {
+		const parsed = new Date(value);
+		return !isNaN(parsed.getTime()) ? parsed : null;
+	}
+	return null;
+};
+
+const getDateFormat = (field) => {
+	// Return custom format if provided
+	if (field.dateFormat) {
+		return field.dateFormat;
+	}
+
+	// Handle predefined format strings
+	if (field.format) {
+		switch (field.format.toLowerCase()) {
+			case "yyyy-mm-dd":
+				return "yy-mm-dd";
+			case "mm/dd/yyyy":
+				return "mm/dd/yy";
+			case "dd/mm/yyyy":
+				return "dd/mm/yy";
+			case "dd-mm-yyyy":
+				return "dd-mm-yy";
+			case "mm-dd-yyyy":
+				return "mm-dd-yy";
+			default:
+				break;
+		}
+	}
+
+	// Default formats based on field configuration
+	if (field.showTime || field.type === "datetime") {
+		return "dd/mm/yy"; // PrimeVue will append time format automatically
+	}
+
+	return "dd/mm/yy"; // Default date format
+};
+
+const getDatePlaceholder = (field) => {
+	if (field.placeholder) return field.placeholder;
+
+	const format = field.format || (field.showTime ? "dd/mm/yyyy hh:mm" : "dd/mm/yyyy");
+
+	if (field.timeOnly) {
+		return "Select time";
+	} else if (field.showTime || field.type === "datetime") {
+		return `Enter date and time (${format})`;
+	} else {
+		return `Enter date (${format})`;
+	}
+};
+
+const handleDateChange = (field, value) => {
+	// Convert Date object to appropriate format if needed
+	let processedValue = value;
+
+	// Apply custom formatting if specified
+	if (field.onDateChange && typeof field.onDateChange === "function") {
+		processedValue = field.onDateChange(value);
+	}
+
+	// Call the standard field change handler
+	handleFieldChange(field, processedValue);
+};
+
 // Get default value for a field based on its type
 const getDefaultValue = (field) => {
 	switch (field.type) {
@@ -548,6 +681,9 @@ const getDefaultValue = (field) => {
 			return field.defaultValue !== undefined ? field.defaultValue : "";
 		case "file":
 			return null;
+		case "date":
+		case "datetime":
+			return getDateDefaultValue(field);
 		default:
 			return field.defaultValue !== undefined ? field.defaultValue : "";
 	}
@@ -634,6 +770,29 @@ const validateField = (field, value) => {
 		}
 	}
 
+	// Date validation
+	if ((field.type === "date" || field.type === "datetime") && value) {
+		const dateValue = value instanceof Date ? value : parseDateValue(value);
+
+		if (!dateValue || isNaN(dateValue.getTime())) {
+			errors.push("Please enter a valid date");
+		} else {
+			// Min/Max date validation
+			if (field.minDate) {
+				const minDate = parseDateValue(field.minDate);
+				if (minDate && dateValue < minDate) {
+					errors.push(`Date must be on or after ${minDate.toLocaleDateString()}`);
+				}
+			}
+			if (field.maxDate) {
+				const maxDate = parseDateValue(field.maxDate);
+				if (maxDate && dateValue > maxDate) {
+					errors.push(`Date must be on or before ${maxDate.toLocaleDateString()}`);
+				}
+			}
+		}
+	}
+
 	// Custom validation (always runs last)
 	if (field.validate && typeof field.validate === "function") {
 		const customError = field.validate(value);

frontend/src/components/pages/TestDateForm.vue

@@ -0,0 +1,204 @@
+<template>
+	<div class="test-date-form">
+		<h2>Enhanced Date Picker Test</h2>
+		<p>This page demonstrates the enhanced date picker functionality in the Form component.</p>
+
+		<Form
+			:fields="dateFields"
+			:form-data="formData"
+			@submit="handleSubmit"
+			@change="handleFieldChange"
+			submit-button-text="Save Dates"
+		/>
+
+		<div v-if="Object.keys(formData).length" class="results mt-6">
+			<h3>Current Form Values:</h3>
+			<div class="results-grid">
+				<div v-for="(value, key) in formData" :key="key" class="result-item">
+					<strong>{{ formatFieldLabel(key) }}:</strong>
+					<span v-if="value instanceof Date" class="date-value">
+						{{ formatDateValue(key, value) }}
+					</span>
+					<span v-else-if="value" class="value">{{ value }}</span>
+					<span v-else class="empty">Not set</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import Form from "../common/Form.vue";
+
+const formData = ref({});
+
+const dateFields = [
+	// Basic date picker with US format
+	{
+		name: "birthDate",
+		label: "Birth Date",
+		type: "date",
+		format: "mm/dd/yyyy",
+		required: true,
+		maxDate: "today",
+		yearNavigator: true,
+		yearRange: "1920:2010",
+		cols: 12,
+		md: 6,
+		helpText: "Your date of birth",
+	},
+
+	// Date with default to today
+	{
+		name: "startDate",
+		label: "Project Start Date",
+		type: "date",
+		format: "YYYY-MM-DD",
+		defaultToToday: true,
+		minDate: "today",
+		cols: 12,
+		md: 6,
+		helpText: "When should this project start?",
+	},
+
+	// Date and time picker
+	{
+		name: "appointmentDateTime",
+		label: "Appointment Date & Time",
+		type: "date",
+		showTime: true,
+		hourFormat: "12",
+		stepMinute: 15,
+		defaultToNow: true,
+		minDate: "today",
+		cols: 12,
+		md: 6,
+		helpText: "Select appointment date and time",
+	},
+
+	// Time-only picker
+	{
+		name: "preferredTime",
+		label: "Preferred Contact Time",
+		type: "date",
+		timeOnly: true,
+		hourFormat: "12",
+		stepMinute: 30,
+		defaultValue: "09:00",
+		cols: 12,
+		md: 6,
+		helpText: "Best time to contact you",
+	},
+
+	// European date format with week numbers
+	{
+		name: "eventDate",
+		label: "Event Date",
+		type: "date",
+		format: "dd/mm/yyyy",
+		showWeek: true,
+		monthNavigator: true,
+		yearNavigator: true,
+		yearRange: "2024:2026",
+		cols: 12,
+		md: 6,
+	},
+
+	// Date with seconds
+	{
+		name: "preciseTime",
+		label: "Precise Timestamp",
+		type: "date",
+		showTime: true,
+		showSeconds: true,
+		hourFormat: "24",
+		stepSecond: 1,
+		cols: 12,
+		md: 6,
+		helpText: "Precise time with seconds",
+	},
+];
+
+const handleSubmit = (data) => {
+	console.log("Date form submitted:", data);
+	alert("Form submitted! Check console for details.");
+};
+
+const handleFieldChange = (event) => {
+	console.log("Field changed:", event.fieldName, "->", event.value);
+};
+
+const formatFieldLabel = (fieldName) => {
+	const field = dateFields.find((f) => f.name === fieldName);
+	return field ? field.label : fieldName;
+};
+
+const formatDateValue = (fieldName, dateValue) => {
+	if (!dateValue) return "Not set";
+
+	const field = dateFields.find((f) => f.name === fieldName);
+
+	if (field?.timeOnly) {
+		return dateValue.toLocaleTimeString();
+	} else if (field?.showTime) {
+		return dateValue.toLocaleString();
+	} else {
+		return dateValue.toLocaleDateString();
+	}
+};
+</script>
+
+<style scoped>
+.test-date-form {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 2rem;
+}
+
+.results {
+	background: #f8f9fa;
+	border-radius: 8px;
+	padding: 1.5rem;
+	border: 1px solid #e9ecef;
+}
+
+.results-grid {
+	display: grid;
+	gap: 1rem;
+	margin-top: 1rem;
+}
+
+.result-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0.5rem;
+	background: white;
+	border-radius: 4px;
+	border: 1px solid #dee2e6;
+}
+
+.date-value {
+	color: #0066cc;
+	font-weight: 500;
+}
+
+.value {
+	color: #28a745;
+	font-weight: 500;
+}
+
+.empty {
+	color: #6c757d;
+	font-style: italic;
+}
+
+@media (max-width: 768px) {
+	.result-item {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.25rem;
+	}
+}
+</style>

frontend/src/components/pages/Warranties.vue

@@ -59,8 +59,8 @@ const columns = [
 		filterable: true,
 	},
 	{
-		label: "Address",
-		fieldName: "address",
+		label: "Service Address",
+		fieldName: "serviceAddress",
 		type: "text",
 		sortable: true,
 		filterable: true,
@@ -69,38 +69,50 @@ const columns = [
 		label: "Issue Description",
 		fieldName: "issueDescription",
 		type: "text",
-		sortable: true,
+		sortable: false,
+		filterable: false,
 	},
 	{
 		label: "Priority",
 		fieldName: "priority",
 		type: "status",
 		sortable: true,
+		filterable: false,
 	},
 	{
 		label: "Status",
 		fieldName: "status",
 		type: "status",
 		sortable: true,
+		filterable: true,
 	},
 	{
-		label: "Assigned Technician",
-		fieldName: "assignedTechnician",
+		label: "Complaint Date",
+		fieldName: "complaintDate",
+		type: "date",
+		sortable: true,
+		filterable: false,
+	},
+	{
+		label: "Raised By",
+		fieldName: "complaintRaisedBy",
 		type: "text",
 		sortable: true,
 		filterable: true,
 	},
 	{
-		label: "Date Reported",
-		fieldName: "dateReported",
+		label: "Territory",
+		fieldName: "territory",
 		type: "text",
 		sortable: true,
+		filterable: true,
 	},
 	{
-		label: "Est. Completion",
-		fieldName: "estimatedCompletionDate",
-		type: "text",
+		label: "Warranty Status",
+		fieldName: "warrantyStatus",
+		type: "status",
 		sortable: true,
+		filterable: true,
 	},
 ];
 
@@ -155,21 +167,18 @@ const handleLazyLoad = async (event) => {
 
 		console.log("Making API call with:", { paginationParams, filters });
 
-		// For now, use existing API but we should create a paginated version
-		// TODO: Create Api.getPaginatedWarrantyData() method
-		let data = await Api.getWarrantyData();
+		// Get sorting from store for proper API call
+		const sorting = filtersStore.getTableSorting("warranties");
 
-		// Simulate pagination on client side for now
-		const startIndex = paginationParams.page * paginationParams.pageSize;
-		const endIndex = startIndex + paginationParams.pageSize;
-		const paginatedData = data.slice(startIndex, endIndex);
+		// Use the new paginated API method
+		const result = await Api.getPaginatedWarrantyData(paginationParams, filters, sorting);
 
 		// Update local state
-		tableData.value = paginatedData;
-		totalRecords.value = data.length;
+		tableData.value = result.data;
+		totalRecords.value = result.pagination.total;
 
 		// Update pagination store with new total
-		paginationStore.setTotalRecords("warranties", data.length);
+		paginationStore.setTotalRecords("warranties", result.pagination.total);
 
 		// Cache the result
 		paginationStore.setCachedPage(
@@ -180,14 +189,14 @@ const handleLazyLoad = async (event) => {
 			paginationParams.sortOrder,
 			filters,
 			{
-				records: paginatedData,
-				totalRecords: data.length,
+				records: result.data,
+				totalRecords: result.pagination.total,
 			},
 		);
 
 		console.log("Loaded from API:", {
-			records: paginatedData.length,
-			total: data.length,
+			records: result.data.length,
+			total: result.pagination.total,
 			page: paginationParams.page + 1,
 		});
 	} catch (error) {