Added the TodoCharts to the main Clients page as well.

frontend/src/components/pages/Clients.vue

@@ -3,12 +3,99 @@
 		<H2>Client Contact List</H2>
 
 		<!-- Status Chart Section -->
-		<div class="chart-section">
+		<div class="widgets-grid">
-			<StatusChart
+			<!-- Incomplete Bids Widget -->
-				:statusData="statusCounts"
+			<Card class="widget-card">
-				:onWeekChange="handleWeekChange"
+				<template #header>
-				:loading="chartLoading"
+					<div class="widget-header">
-			/>
+						<Edit class="widget-icon" />
+						<h3>Incomplete Bids</h3>
+					</div>
+				</template>
+				<template #content>
+					<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>
 		</div>
 
 		<DataTable
@@ -27,6 +114,7 @@
 </template>
 <script setup>
 import { onMounted, ref, watch, computed } from "vue";
+import Card from "primevue/card";
 import DataTable from "../common/DataTable.vue";
 import StatusChart from "../common/StatusChart.vue";
 import Api from "../../api";
@@ -37,6 +125,10 @@ import { useFiltersStore } from "../../stores/filters";
 import { useModalStore } from "../../stores/modal";
 import { useRouter, useRoute } from "vue-router";
 import { useNotificationStore } from "../../stores/notifications-primevue";
+import TodoChart from "../common/TodoChart.vue";
+import { Calendar, Community, Hammer, PathArrowSolid, Clock, Shield, ShieldSearch,
+ClipboardCheck, DoubleCheck, CreditCard, CardNoAccess, ChatBubbleQuestion, Edit,
+WateringSoil, Soil, Truck, SoilAlt } from "@iconoir/vue";
 
 const notifications = useNotificationStore();
 const loadingStore = useLoadingStore();
@@ -276,7 +368,7 @@ const handleAppointmentClick = (status, rowData) => {
 		router.push(`/calendar?tab=bids&new=true&address=${address}`);
 	} else {
 		// Navigate to view appointment details
-		router.push('/calendar?tab=bids&address=' + address); 
+		router.push('/calendar?tab=bids&address=' + address);
 	}
 };
 
@@ -287,7 +379,7 @@ const handleEstimateClick = (status, rowData) => {
 		router.push(`/estimate?new=true&address=${address}`);
 	} else {
 		// Navigate to view estimate details
-		router.push('/estimate?address=' + address); 
+		router.push('/estimate?address=' + address);
 	}
 };
 
@@ -300,7 +392,7 @@ const handlePaymentClick = (status, rowData) => {
 	// }
 	// else {
 	// 	// Navigate to view payment details
-	// 	router.push('/payments?address=' + address); 
+	// 	router.push('/payments?address=' + address);
 	// }
 };
 
@@ -312,7 +404,7 @@ const handleJobClick = (status, rowData) => {
 	// 	router.push(`/job?new=true&address=${address}`);
 	// } else {
 	// 	// Navigate to view job details
-	// 	router.push('/job?address=' + address); 
+	// 	router.push('/job?address=' + address);
 	// }
 };
 
@@ -362,8 +454,58 @@ onMounted(async () => {
 		filters: initialFilters,
 	});
 });
-</script>
+</script scoped>
 <style lang="css">
+.widgets-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 20px;
+	margin-bottom: 30px;
+}
+.widget-card {
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	border-radius: 12px;
+	display: flex;
+	justify-content: space-between;
+	transition:
+		transform 0.2s ease,
+		box-shadow 0.2s ease;
+	background-color: var(--theme-surface-alt)
+}
+
+.widget-card:hover {
+	/*transform: translateY(-2px);*/
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.widget-header {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 20px 20px 0;
+}
+
+.widget-icon {
+	color: var(--theme-primary-strong);
+	width: 24px;
+	height: 24px;
+}
+
+.widget-header h3 {
+	margin: 0;
+	color: #2c3e50;
+	font-size: 1.2rem;
+}
+
+.widget-content {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	/*gap: 15px;*/
+}
+.sidebar-button {
+	justify-content: center;
+}
 .page-container {
 	height: 100%;
 }