build

frontend/src/components/DataTable.vue

@@ -0,0 +1,43 @@
+<template lang="">
+	<div id="paging-controls">
+		<p>Show rows:</p>
+		<button class="page-num-button">25</button>
+		<button class="page-num-button">50</button>
+		<button class="page-num-button">100</button>
+		<button class="page-turn-button">Prev</button>
+		<button class="page-turn-button">Next</button>
+	</div>
+	<div ref="dataTableContainer"></div>
+</template>
+<script setup>
+import { defineProps, ref, onMounted } from "vue";
+const dataTableContainer = ref(null);
+const props = defineProps({
+	columns: {
+		type: Array,
+		required: true,
+	},
+	data: {
+		type: Array,
+		required: true,
+	},
+});
+
+onMounted(() => {
+	console.log(dataTableContainer);
+	if (!dataTableContainer.value) {
+		console.error("Datatable container not found!");
+		return;
+	}
+
+	const columnsList = props.columns.map((col) => col.label);
+	const dataList = props.data.map((row) => props.columns.map((col) => row[col.fieldName] || ""));
+
+	// Pass the actual DOM element
+	new frappe.DataTable(dataTableContainer.value, {
+		columns: columnsList,
+		data: dataList,
+	});
+});
+</script>
+<style lang=""></style>

frontend/src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup>
-import { ref } from "vue";
-import SideBar from "./SideBar.vue";
-
-defineProps({
-	msg: String,
-});
-
-const count = ref(0);
-</script>
-
-<template>
-	<SideBar />
-	<h1>{{ msg }}</h1>
-
-	<div class="card">
-		<button type="button" @click="count++">count is {{ count }}</button>
-		<p>
-			Edit
-			<code>components/HelloWorld.vue</code> to test HMR
-		</p>
-	</div>
-
-	<p></p>
-	<p>
-		Learn more about IDE Support for Vue in the
-		<a href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support" target="_blank"
-			>Vue Docs Scaling up Guide</a
-		>.
-	</p>
-	<p class="read-the-docs">Testing cache update</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-	color: #888;
-}
-</style>

frontend/src/components/SideBar.vue

@@ -1,15 +1,86 @@
 <script setup>
 import { ref } from "vue";
-const isOpen = ref(true);
-const selectedItem = ref("home");
+import { useRouter } from "vue-router";
+import {
+	Community,
+	Calendar,
+	Hammer,
+	MultiplePagesPlus,
+	PathArrowSolid,
+	Clock,
+	HistoricShield,
+} from "@iconoir/vue";
 
-const onDisclosure = () => {
-	isOpen = !isOpen;
+const router = useRouter();
+const categories = [
+	{ name: "Calendar", icon: Calendar, url: "/calendar" },
+	{ name: "Clients", icon: Community, url: "/clients" },
+	{ name: "Jobs", icon: Hammer, url: "/jobs" },
+	{ name: "Routes", icon: PathArrowSolid, url: "/routes" },
+	{ name: "Create", icon: MultiplePagesPlus, url: "/create" },
+	{ name: "Time Sheets", icon: Clock, url: "/timesheets" },
+	{ name: "Warranties", icon: HistoricShield, url: "/warranties" },
+];
+const handleCategoryClick = (category) => {
+	router.push(category.url);
 };
 </script>
 
 <template>
-	<div class="snw-side-bar">
-		<button @click="onDisclosure">{{ isOpen ? "Close" : "Open" }}</button>
+	<div id="sidebar" class="sidebar">
+		<button
+			v-for="category in categories"
+			:class="[
+				'sidebar-button',
+				router.currentRoute.value.path === category.url ? 'active' : '',
+			]"
+			:key="category.name"
+			@click="handleCategoryClick(category)"
+		>
+			<component :is="category.icon" class="button-icon" /><span class="button-text">{{
+				category.name
+			}}</span>
+		</button>
 	</div>
 </template>
+
+<style lang="css">
+.sidebar-button.active {
+	background-color: rgb(25, 60, 53);
+	color: white;
+}
+
+.sidebar-button:hover {
+	background-color: rgb(82, 132, 119);
+}
+
+.button-icon {
+	justify-self: flex-start;
+	margin-left: 5px;
+}
+
+.button-text {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.sidebar-button {
+	border-radius: 5px;
+	border: none;
+	background-color: rgb(69, 112, 101);
+	color: white;
+	display: flex;
+	align-items: center;
+}
+
+#sidebar {
+	display: flex;
+	flex-direction: column;
+	width: 150px;
+	align-self: flex-start;
+	gap: 10px;
+	background-color: #f3f3f3;
+	padding: 10px;
+	border-radius: 5px;
+}
+</style>

frontend/src/components/pages/Calendar.vue

@@ -0,0 +1,6 @@
+<template>
+	<div>
+		<h2>Calendar</h2>
+	</div>
+</template>
+<script setup></script>

frontend/src/components/pages/Clients.vue

@@ -0,0 +1,40 @@
+<template>
+	<div>
+		<H2>Client Contact List</H2>
+		<div id="filter-container" class="filter-container">
+			<input placeholder="Type to Search" />
+			<p>Type:</p>
+			<select id="type-selector"></select>
+			<button @click="onClick" id="add-customer-button" class="interaction-button">
+				Add
+			</button>
+		</div>
+		<DataTable v-if="tableData.length > 0" :data="tableData" :columns="columns" />
+	</div>
+</template>
+<script setup>
+import { onMounted, ref } from "vue";
+import DataTable from "../DataTable.vue";
+
+const tableData = ref([]);
+
+const onClick = () => {
+	frappe.new_doc("Customer");
+};
+
+const searchFields = { fields: ["full_name", "address", "email_id", "phone"] };
+const columns = [
+	{ label: "Name", fieldName: "full_name" },
+	{ label: "Location", fieldName: "address" },
+	{ label: "Type", fieldName: "contact_type" },
+	{ label: "Contact", fieldName: "full_name" },
+	{ label: "Email", fieldName: "email_id" },
+	{ label: "Phone", fieldName: "phone" },
+];
+onMounted(async () => {
+	let data = await frappe.db.get_list("Contact", searchFields);
+	console.log(data);
+	tableData.value = data;
+});
+</script>
+<style lang=""></style>

frontend/src/components/pages/Create.vue

@@ -0,0 +1,9 @@
+<template>
+	<div>
+		<h2>Create Page</h2>
+	</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>

frontend/src/components/pages/Home.vue

@@ -0,0 +1,9 @@
+<template lang="">
+	<div>
+		<h2>Hello!</h2>
+	</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>

frontend/src/components/pages/Jobs.vue

@@ -0,0 +1,9 @@
+<template>
+	<div>
+		<h2>Jobs</h2>
+	</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>

frontend/src/components/pages/Routes.vue

@@ -0,0 +1,9 @@
+<template lang="">
+	<div>
+		<h2>Routes Page</h2>
+	</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>

frontend/src/components/pages/TimeSheets.vue

@@ -0,0 +1,9 @@
+<template lang="">
+	<div>
+		<h2>TimeSheets Page</h2>
+	</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>

frontend/src/components/pages/Warranties.vue

@@ -0,0 +1,9 @@
+<template lang="">
+	<div>
+		<h2>Warranties Page</h2>
+	</div>
+</template>
+<script>
+export default {};
+</script>
+<style lang=""></style>