add warranties page

frontend/src/components/DataTable.vue

@@ -27,7 +27,7 @@
 					v-model="filterModel.value"
 					type="text"
 					@input="filterCallback()"
-					placeholder="Search by name"
+					:placeholder="`Search ${col.label}...`"
 				/>
 			</template>
 			<template v-if="col.type === 'status'" #body="slotProps">
@@ -73,7 +73,7 @@ const props = defineProps({
 	},
 });
 
-const emit = defineEmits(['rowClick']);
+const emit = defineEmits(["rowClick"]);
 
 const filterRef = ref(props.filters);
 const selectedRows = ref();

frontend/src/components/SideBar.vue

@@ -28,29 +28,35 @@ const categories = [
 	},
 ];
 
-const items = ref([
+const createButtons = ref([
 	{
 		label: "Client",
 		command: () => {
 			frappe.new_doc("Customer");
 		},
 	},
-	{
-		label: "Estimate",
-		command: () => {
-			frappe.new_doc("Estimate");
-		},
-	},
 	{
 		label: "Job",
 		command: () => {
 			frappe.new_doc("Job");
 		},
 	},
+	{
+		label: "Estimate",
+		command: () => {
+			frappe.new_doc("Estimate");
+		},
+	},
 	{
 		label: "Invoice",
 		command: () => {
-			frappe.new_doc("Sales Invoice");
+			alert("Create Invoice clicked");
+		},
+	},
+	{
+		label: "Warranty Claim",
+		command: () => {
+			alert("Create Warranty Claim clicked");
 		},
 	},
 ]);
@@ -78,7 +84,7 @@ const handleCategoryClick = (category) => {
 				</button>
 			</template>
 			<template v-else>
-				<SpeedDial :model="items" direction="down" type="linear" radius="50">
+				<SpeedDial :model="createButtons" direction="down" type="linear" radius="50">
 					<template #button="{ toggleCallback }">
 						<button
 							class="sidebar-button"

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>