add warranties page

frontend/src/components/pages/Warranties.vue

@@ -1,9 +1,125 @@
-<template lang="">
+<template>
 	<div>
-		<h2>Warranties Page</h2>
+		<h2>Warranty Claims</h2>
+		<div id="filter-container" class="filter-container">
+			<button @click="addNewWarranty" id="add-warranty-button" class="interaction-button">
+				Add New Warranty Claim
+			</button>
+		</div>
+		<DataTable :data="tableData" :columns="columns" :filters="filters" />
 	</div>
 </template>
-<script>
-export default {};
+
+<script setup>
+import { onMounted, ref } from "vue";
+import DataTable from "../DataTable.vue";
+import Api from "../../api";
+import { FilterMatchMode } from "@primevue/core";
+
+const tableData = ref([]);
+
+const addNewWarranty = () => {
+	// TODO: Open modal or navigate to create warranty form
+	console.log("Add new warranty claim clicked");
+	// In the future, this could open a modal or navigate to a form
+	// For now, just log the action
+};
+
+const filters = {
+	customer: { value: null, matchMode: FilterMatchMode.CONTAINS },
+	warrantyId: { value: null, matchMode: FilterMatchMode.CONTAINS },
+	address: { value: null, matchMode: FilterMatchMode.CONTAINS },
+	assignedTechnician: { value: null, matchMode: FilterMatchMode.CONTAINS },
+};
+
+const columns = [
+	{
+		label: "Warranty ID",
+		fieldName: "warrantyId",
+		type: "text",
+		sortable: true,
+		filterable: true,
+	},
+	{
+		label: "Customer",
+		fieldName: "customer",
+		type: "text",
+		sortable: true,
+		filterable: true,
+	},
+	{
+		label: "Address",
+		fieldName: "address",
+		type: "text",
+		sortable: true,
+		filterable: true,
+	},
+	{
+		label: "Issue Description",
+		fieldName: "issueDescription",
+		type: "text",
+		sortable: true,
+	},
+	{
+		label: "Priority",
+		fieldName: "priority",
+		type: "status",
+		sortable: true,
+	},
+	{
+		label: "Status",
+		fieldName: "status",
+		type: "status",
+		sortable: true,
+	},
+	{
+		label: "Assigned Technician",
+		fieldName: "assignedTechnician",
+		type: "text",
+		sortable: true,
+		filterable: true,
+	},
+	{
+		label: "Date Reported",
+		fieldName: "dateReported",
+		type: "text",
+		sortable: true,
+	},
+	{
+		label: "Est. Completion",
+		fieldName: "estimatedCompletionDate",
+		type: "text",
+		sortable: true,
+	},
+];
+
+onMounted(async () => {
+	if (tableData.value.length > 0) {
+		return;
+	}
+	let data = await Api.getWarrantyData();
+	tableData.value = data;
+});
 </script>
-<style lang=""></style>
+
+<style scoped>
+.filter-container {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: 1rem;
+}
+
+.interaction-button {
+	background-color: #007bff;
+	color: white;
+	border: none;
+	padding: 0.5rem 1rem;
+	border-radius: 4px;
+	cursor: pointer;
+	font-size: 0.9rem;
+}
+
+.interaction-button:hover {
+	background-color: #0056b3;
+}
+</style>