From d154c28ed2c01a69d7e3527e1632df40b018e9f1 Mon Sep 17 00:00:00 2001
From: rocketdebris <rocketdebris@gmail.com>
Date: Mon, 15 Dec 2025 19:39:54 -0500
Subject: [PATCH] Added a TodoChart component, adding a reactive Todo/Completed
 items tracker.

---
 frontend/src/components/common/TodoChart.vue | 280 ++++++++++++
 frontend/src/components/pages/Home.vue       | 429 ++++++++++++-------
 2 files changed, 552 insertions(+), 157 deletions(-)
 create mode 100644 frontend/src/components/common/TodoChart.vue

diff --git a/frontend/src/components/common/TodoChart.vue b/frontend/src/components/common/TodoChart.vue
new file mode 100644
index 0000000..e62f0a7
--- /dev/null
+++ b/frontend/src/components/common/TodoChart.vue
@@ -0,0 +1,280 @@
+<template>
+	<!--<div class="todo-chart-container"> -->
+		<!-- Loading Overlay -->
+		<!--<div v-if="loading" class="loading-overlay">-->
+		<!--	<div class="spinner"></div>-->
+		<!--	<div class="loading-text">Loading chart data...</div>-->
+		<!--</div>-->
+		<!-- Chart Container -->
+		<div class="chart-wrapper">
+			<canvas ref="chartCanvas" class="chart-canvas" v-show="!loading"></canvas>
+			<!-- Center Data Display -->
+			<div class="center-data" v-if="centerData && !loading">
+				<div class="center-label">{{ centerData.label }}</div>
+				<div class="center-value">{{ centerData.value }}</div>
+				<div class="center-percentage" v-if="centerData.percentage">
+					{{ centerData.percentage }}
+				</div>
+			</div>
+		</div>
+		<!--</div> -->
+</template>
+
+<script setup>
+import { ref, onMounted, watch, nextTick, computed, onUnmounted} from "vue";
+import { Chart, registerables } from "chart.js";
+
+// Register Chart.js components
+Chart.register(...registerables);
+
+const props = defineProps({
+	title: String,
+	todoNumber: Number,
+	completedNumber: Number,
+	loading: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+//Constants
+const categories = ["To-do", "Completed"];
+
+//Reactive data
+const centerData = ref(null);
+const hoveredSegment = ref(null);
+const chartCanvas = ref(null);
+const chartInstance = ref(null);
+
+// Handle view changes
+const handleViewChange = () => {
+	updateChart();
+};
+
+const getHoveredCategoryIndex = () => {
+	return hoveredSegment.value
+}
+
+const getCategoryValue = (categoryIndex) => {
+	if (categoryIndex === 0) {
+		return props.todoNumber
+	} else {
+		return props.completedNumber
+	}
+}
+
+const getChartData = () => {
+	const chartData = {
+		name: props.title,
+		datasets: [
+			{
+				label: "",
+				data: [props.todoNumber, props.completedNumber],
+				backgroundColor: ["#b22222", "#4caf50"]
+			},
+		]
+	};
+	return chartData;
+};
+
+
+const updateCenterData = () => {
+	const total = props.todoNumber + props.completedNumber;
+	const todos = props.todoNumber;
+
+	if (todos === 0 && total > 0) {
+		centerData.value = {
+			label: "Completed",
+			value: "0",
+			percentage: "100%",
+		};
+		return;
+	}
+
+	if (todos === 0 || isNaN(todos)){
+		centerData.value = {
+			label: "No To-Dos",
+			value: "0",
+			percentage: null,
+		};
+		return;
+	}
+
+	const hoveredCategoryIndex = getHoveredCategoryIndex()
+	if (hoveredCategoryIndex !== null) {
+		// Show specific segment data when hovered
+		const value = getCategoryValue(hoveredCategoryIndex);
+		const percentage = total > 0 ? ((value / total) * 100).toFixed(1) + "%" : "0%";
+
+		centerData.value = {
+			label: categories[hoveredCategoryIndex],
+			value: value,
+			percentage: percentage,
+		};
+	} else {
+		centerData.value = {
+			label: "To-do",
+			value: props.todoNumber,
+			percentage: null,
+		};
+	}
+};
+
+// Chart options
+const getChartOptions = () => {
+	return {
+		responsive: true,
+		maintainAspectRatio: false,
+		cutout: "60%",
+		plugins: {
+			legend: {
+				position: "bottom",
+				labels: {
+					padding: 20,
+					usePointStyle: true,
+					font: { size: 12 },
+				},
+			},
+			tooltip: { enabled: false },
+			title: {
+				display: true,
+				text: props.title,
+			},
+		},
+		elements: {
+			arc: {
+				borderWidth: 2,
+				borderColor: "#ffffff",
+			},
+		},
+		animation: {
+			animateRotate: true,
+			animateScale: true,
+			duration: 1000,
+			easing: "easeOutQuart",
+		},
+		interaction: {
+			mode: "nearest",
+			intersect: true,
+		},
+		onHover: (event, elements) => {
+			const categoryIndex = getHoveredCategoryIndex();
+			const total = getCategoryValue(categoryIndex);
+
+			if (elements && elements.length > 0) {
+				const elementIndex = elements[0].index;
+				if (hoveredSegment.value !== elementIndex) {
+					hoveredSegment.value = elementIndex;
+					updateCenterData();
+				}
+			} else {
+				if (hoveredSegment.value !== null) {
+					hoveredSegment.value = null;
+					updateCenterData();
+				}
+			}
+		},
+	};
+};
+
+const createChart = () => {
+	if (!chartCanvas.value || props.loading) return;
+
+	console.log(`DEBUG: Creating chart for ${props.title}`);
+	console.log(props);
+
+	const ctx = chartCanvas.value.getContext("2d");
+	if (chartInstance.value) {
+		chartInstance.value.destroy();
+	}
+	const chart = new Chart(ctx, {
+		type: "doughnut",
+		data: getChartData(),
+		options: getChartOptions(),
+	});
+	// Don't let Vue mutate Chart members for reactivity
+	Object.seal(chart);
+	chartInstance.value = chart;
+	// Populate Chart display
+	updateCenterData();
+}
+
+// Update chart
+const updateChart = () => {
+	if (props.loading || !chartInstance.value) {
+		return;
+	}
+	const newData = getChartData();
+	chartInstance.value.data = newData;
+	chartInstance.value.update("none");
+	updateCenterData();
+};
+
+onMounted(() => {
+	createChart();
+});
+
+watch(() => props.completedNumber, (newValue) => {
+	updateChart();
+});
+
+</script>
+
+<style scoped>
+/*.todo-chart-container {
+	background: white;
+	border-radius: 8px;
+	padding: 20px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	position: relative;
+	min-height: 400px;
+}*/
+
+.chart-wrapper {
+	position: relative;
+	height: 300px;
+	margin-top: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.chart-canvas {
+	max-height: 100%;
+	width: 100% !important;
+	height: 100% !important;
+}
+
+.center-data {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	text-align: center;
+	pointer-events: none;
+	transition: all 0.3s ease;
+}
+
+.center-label {
+	font-size: 14px;
+	font-weight: 500;
+	color: #6b7280;
+	margin-bottom: 5px;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.center-value {
+	font-size: 32px;
+	font-weight: bold;
+	color: #111827;
+	line-height: 1;
+	margin-bottom: 2px;
+}
+
+.center-percentage {
+	font-size: 16px;
+	font-weight: 600;
+	color: #3b82f6;
+}
+</style>
diff --git a/frontend/src/components/pages/Home.vue b/frontend/src/components/pages/Home.vue
index 4fa141e..6c60720 100644
--- a/frontend/src/components/pages/Home.vue
+++ b/frontend/src/components/pages/Home.vue
@@ -1,203 +1,300 @@
 <template>
 	<div class="dashboard">
-		<h1 class="dashboard-title">Dashboard</h1>
+		<h1 class="dashboard-title">Today's Tasks</h1>
 
 		<div class="widgets-grid">
-			<!-- Calendar Widget -->
+			<!-- Locates Widget -->
 			<Card class="widget-card">
 				<template #header>
 					<div class="widget-header">
-						<Calendar class="widget-icon" />
-						<h3>Service Calendar</h3>
+						<ShieldSearch class="widget-icon" />
+						<h3>Locates</h3>
 					</div>
 				</template>
 				<template #content>
 					<div class="widget-content">
-						<div class="metric">
-							<span class="metric-number">8</span>
-							<span class="metric-label">Services Scheduled Today</span>
-						</div>
-						<div class="metric">
-							<span class="metric-number">15</span>
-							<span class="metric-label">Services This Week</span>
-						</div>
-						<Button
-							label="View Calendar"
-							size="small"
-							outlined
-							@click="navigateTo('/calendar')"
-						/>
+						<TodoChart
+								title="Locates"
+								:todoNumber="locatesTodoNumber"
+								:completedNumber="locatesCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button" @click="navigateTo('/jobs')">
+							View Locates
+						</button>
 					</div>
 				</template>
 			</Card>
-
-			<!-- Clients Widget -->
+			<!-- Permits Widget -->
 			<Card class="widget-card">
 				<template #header>
 					<div class="widget-header">
-						<Community class="widget-icon" />
-						<h3>Client Contact List</h3>
+						<ClipboardCheck class="widget-icon" />
+						<h3>Permits</h3>
 					</div>
 				</template>
 				<template #content>
 					<div class="widget-content">
-						<div class="status-row">
-							<Tag severity="success" value="5 Active Jobs" />
-							<Tag severity="warning" value="3 Pending Estimates" />
-						</div>
-						<div class="metric">
-							<span class="metric-number">{{ clientData.length }}</span>
-							<span class="metric-label">Total Client Records</span>
-						</div>
-						<Button
-							label="View Client List"
-							size="small"
-							outlined
-							@click="navigateTo('/clients')"
-						/>
+						<TodoChart
+								title="Permits"
+								:todoNumber="permitsTodoNumber"
+								:completedNumber="permitsCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button" @click="navigateTo('/jobs')">
+							View Permits
+						</button>
 					</div>
 				</template>
 			</Card>
-
-			<!-- Jobs Widget -->
+			<!-- Permits Finalization Widget -->
 			<Card class="widget-card">
 				<template #header>
 					<div class="widget-header">
-						<Hammer class="widget-icon" />
-						<h3>Job Management</h3>
+						<DoubleCheck class="widget-icon" />
+						<h3>Permit Finalizations</h3>
 					</div>
 				</template>
 				<template #content>
 					<div class="widget-content">
-						<div class="status-row">
-							<Tag severity="info" value="4 In Progress" />
-							<Tag severity="success" value="2 Completed" />
-						</div>
-						<div class="metric">
-							<span class="metric-number">{{
-								jobData.filter((job) => job.overAllStatus === "in progress").length
-							}}</span>
-							<span class="metric-label">Jobs In Progress</span>
-						</div>
-						<Button
-							label="View All Jobs"
-							size="small"
-							outlined
-							@click="navigateTo('/jobs')"
-						/>
+						<TodoChart
+								title="Permit Finalization"
+								:todoNumber="permitFinalizationsTodoNumber"
+								:completedNumber="permitFinalizationsCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button" @click="navigateTo('/jobs')">
+							View Finalizations
+						</button>
 					</div>
 				</template>
 			</Card>
-
-			<!-- Routes Widget -->
-			<Card class="widget-card">
-				<template #header>
-					<div class="widget-header">
-						<PathArrowSolid class="widget-icon" />
-						<h3>Service Routes</h3>
-					</div>
-				</template>
-				<template #content>
-					<div class="widget-content">
-						<div class="metric">
-							<span class="metric-number">6</span>
-							<span class="metric-label">Active Routes Today</span>
-						</div>
-						<div class="metric">
-							<span class="metric-number">45.2</span>
-							<span class="metric-label">Avg. Miles per Route</span>
-						</div>
-						<Button
-							label="View Routes"
-							size="small"
-							outlined
-							@click="navigateTo('/routes')"
-						/>
-					</div>
-				</template>
-			</Card>
-
-			<!-- Time Sheets Widget -->
-			<Card class="widget-card">
-				<template #header>
-					<div class="widget-header">
-						<Clock class="widget-icon" />
-						<h3>Employee Timesheets</h3>
-					</div>
-				</template>
-				<template #content>
-					<div class="widget-content">
-						<div class="metric">
-							<span class="metric-number">32.5</span>
-							<span class="metric-label">Total Hours This Week</span>
-						</div>
-						<div class="status-row">
-							<Tag severity="success" value="5 Approved" />
-							<Tag severity="warning" value="2 Pending Approval" />
-						</div>
-						<Button
-							label="View Timesheets"
-							size="small"
-							outlined
-							@click="navigateTo('/timesheets')"
-						/>
-					</div>
-				</template>
-			</Card>
-
 			<!-- Warranties Widget -->
 			<Card class="widget-card">
 				<template #header>
 					<div class="widget-header">
-						<HistoricShield class="widget-icon" />
-						<h3>Warranty Claims</h3>
+						<Shield class="widget-icon" />
+						<h3>Warranties</h3>
 					</div>
 				</template>
 				<template #content>
 					<div class="widget-content">
-						<div class="metric">
-							<span class="metric-number">10</span>
-							<span class="metric-label">Open Claims</span>
-						</div>
-						<div class="status-row">
-							<Tag severity="success" value="3 Completed" />
-							<Tag severity="warning" value="4 In Progress" />
-						</div>
-						<Button
-							label="View Claims"
-							size="small"
-							outlined
-							@click="navigateTo('/warranties')"
-						/>
+						<TodoChart
+								title="Warranty Claims"
+								:todoNumber="warrantyTodoNumber"
+								:completedNumber="warrantyCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button" @click="navigateTo('/jobs')">
+							View Warranties
+						</button>
 					</div>
 				</template>
 			</Card>
-		</div>
-
-		<!-- Quick Stats Summary -->
-		<div class="summary-section">
-			<Card>
+			<!-- Incomplete Bids Widget -->
+			<Card class="widget-card">
 				<template #header>
-					<h3>Quick Stats</h3>
+					<div class="widget-header">
+						<Edit class="widget-icon" />
+						<h3>Incomplete Bids</h3>
+					</div>
 				</template>
 				<template #content>
-					<div class="stats-grid">
-						<div class="stat-item">
-							<span class="stat-value">{{ totalRevenue }}</span>
-							<span class="stat-label">Monthly Revenue</span>
-						</div>
-						<div class="stat-item">
-							<span class="stat-value">{{ completedJobs }}</span>
-							<span class="stat-label">Jobs Completed</span>
-						</div>
-						<div class="stat-item">
-							<span class="stat-value">{{ clientSatisfaction }}%</span>
-							<span class="stat-label">Client Satisfaction</span>
-						</div>
-						<div class="stat-item">
-							<span class="stat-value">{{ avgResponseTime }}h</span>
-							<span class="stat-label">Avg Response Time</span>
-						</div>
+					<div class="widget-content">
+						<TodoChart
+								title="Incomplete Bids"
+								:todoNumber="bidsTodoNumber"
+								:completedNumber="bidsCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="navigateTo('/calendar')">
+							Incomplete Bids
+						</button>
+					</div>
+				</template>
+			</Card>
+			<!-- Unapproved Estimates Widget -->
+			<Card class="widget-card">
+				<template #header>
+					<div class="widget-header">
+						<ChatBubbleQuestion class="widget-icon" />
+						<h3>Unapproved Estimates</h3>
+					</div>
+				</template>
+				<template #content>
+					<div class="widget-content">
+						<TodoChart
+								title="Unapproved Estimates"
+								:todoNumber="estimatesTodoNumber"
+								:completedNumber="estimatesCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="navigateTo('/estimates')">
+							Unapproved Estimates
+						</button>
+					</div>
+				</template>
+			</Card>
+			<!-- Half Down Widget -->
+			<Card class="widget-card">
+				<template #header>
+					<div class="widget-header">
+						<CreditCard class="widget-icon" />
+						<h3>Half Down Payments</h3>
+					</div>
+				</template>
+				<template #content>
+					<div class="widget-content">
+						<TodoChart
+								title="Half Down Payments"
+								:todoNumber="halfDownTodoNumber"
+								:completedNumber="halfDownCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="navigateTo('/jobs')">
+							Half Down Payments
+						</button>
+					</div>
+				</template>
+			</Card>
+			<!-- Late Balances Widget -->
+			<Card class="widget-card">
+				<template #header>
+					<div class="widget-header">
+						<CardNoAccess class="widget-icon" />
+						<h3>Late Balances</h3>
+					</div>
+				</template>
+				<template #content>
+					<div class="widget-content">
+						<TodoChart
+								title="Late Balances"
+								:todoNumber="balancesTodoNumber"
+								:completedNumber="balancesCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="navigateTo('/jobs')">
+							Late Balances
+						</button>
+					</div>
+				</template>
+			</Card>
+			<!-- Backflow Tests Widget -->
+			<Card class="widget-card">
+				<template #header>
+					<div class="widget-header">
+						<WateringSoil class="widget-icon" />
+						<h3>Backflow Tests</h3>
+					</div>
+				</template>
+				<template #content>
+					<div class="widget-content">
+						<TodoChart
+								title="Backflow Tests"
+								:todoNumber="backflowsTodoNumber"
+								:completedNumber="backflowsCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="navigateTo('/jobs')">
+							Late Balances
+						</button>
+					</div>
+				</template>
+			</Card>
+			<!-- Curbing Widget -->
+			<Card class="widget-card">
+				<template #header>
+					<div class="widget-header">
+						<SoilAlt class="widget-icon" />
+						<h3>Curbing</h3>
+					</div>
+				</template>
+				<template #content>
+					<div class="widget-content">
+						<TodoChart
+								title="Curbing"
+								:todoNumber="curbingTodoNumber"
+								:completedNumber="curbingCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="navigateTo('/jobs')">
+							Curbing
+						</button>
+					</div>
+				</template>
+			</Card>
+			<!-- Hyrdoseeding Widget -->
+			<Card class="widget-card">
+				<template #header>
+					<div class="widget-header">
+						<SoilAlt class="widget-icon" />
+						<h3>Hydroseeding</h3>
+					</div>
+				</template>
+				<template #content>
+					<div class="widget-content">
+						<TodoChart
+								title="Hydroseeding"
+								:todoNumber="hydroseedingTodoNumber"
+								:completedNumber="hydroseedingCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="navigateTo('/jobs')">
+							Hydroseeding
+						</button>
+					</div>
+				</template>
+			</Card>
+			<!-- Machines Widget -->
+			<Card class="widget-card">
+				<template #header>
+					<div class="widget-header">
+						<Truck class="widget-icon" />
+						<h3>Machines</h3>
+					</div>
+				</template>
+				<template #content>
+					<div class="widget-content">
+						<TodoChart
+								title="Machines"
+								:todoNumber="machinesTodoNumber"
+								:completedNumber="machinesCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="navigateTo('/jobs')">
+							Machines
+						</button>
+					</div>
+				</template>
+			</Card>
+			<!-- Deliveries Widget -->
+			<Card class="widget-card">
+				<template #header>
+					<div class="widget-header">
+						<Truck class="widget-icon" />
+						<h3>Deliveries</h3>
+					</div>
+				</template>
+				<template #content>
+					<div class="widget-content">
+						<TodoChart
+								title="Deliveries"
+								:todoNumber="deliveriesTodoNumber"
+								:completedNumber="delivieriesCompletedNumber"
+								>
+						</TodoChart>
+						<button class="sidebar-button"
+								@click="navigateTo('/jobs')">
+							Deliveries
+						</button>
 					</div>
 				</template>
 			</Card>
@@ -209,17 +306,29 @@
 import { ref, computed, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import Card from "primevue/card";
-import Button from "primevue/button";
 import Tag from "primevue/tag";
-import { Calendar, Community, Hammer, PathArrowSolid, Clock, HistoricShield } from "@iconoir/vue";
+import { Calendar, Community, Hammer, PathArrowSolid, Clock, Shield, ShieldSearch,
+ClipboardCheck, DoubleCheck, CreditCard, CardNoAccess, ChatBubbleQuestion, Edit,
+WateringSoil, Soil, Truck, SoilAlt } from "@iconoir/vue";
 import DataUtils from "../../utils.js";
 import { useNotificationStore } from "../../stores/notifications-primevue";
+//import SimpleChart from "../common/SimpleChart.vue";
+import TodoChart from "../common/TodoChart.vue";
 
 const router = useRouter();
 
 // Dummy data from utils
 const clientData = ref(DataUtils.dummyClientData);
 const jobData = ref(DataUtils.dummyJobData);
+const locatesTodoNumber = ref(45);
+const locatesCompletedNumber = ref(5);
+const permitsTodoNumber = ref(24);
+const permitsCompletedNumber = ref(7);
+const permitFinalizationsTodoNumber = ref(35);
+const permitFinalizationsCompletedNumber = ref(2);
+const warrantyTodoNumber = ref(0);
+const warrantyCompletedNumber = ref(10);
+
 const notifications = useNotificationStore();
 
 // Computed values for dashboard metrics
@@ -266,10 +375,11 @@ onMounted(() => {
 	transition:
 		transform 0.2s ease,
 		box-shadow 0.2s ease;
+	background-color: var(--theme-surface-alt)
 }
 
 .widget-card:hover {
-	transform: translateY(-2px);
+	/*transform: translateY(-2px);*/
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }
 
@@ -281,7 +391,7 @@ onMounted(() => {
 }
 
 .widget-icon {
-	color: rgb(69, 112, 101);
+	color: var(--theme-primary-strong);
 	width: 24px;
 	height: 24px;
 }
@@ -295,7 +405,8 @@ onMounted(() => {
 .widget-content {
 	display: flex;
 	flex-direction: column;
-	gap: 15px;
+	margin: 0;
+	/*gap: 15px;*/
 }
 
 .metric {
@@ -353,6 +464,10 @@ onMounted(() => {
 	font-size: 0.9rem;
 }
 
+.sidebar-button {
+	justify-content: center;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
 	.widgets-grid {