From 5e192a61e18b8d89b41e216e69844d4b432a929a Mon Sep 17 00:00:00 2001
From: rocketdebris <rocketdebris@gmail.com>
Date: Sat, 24 Jan 2026 17:12:22 -0500
Subject: [PATCH] Reading data from APIs for dials.

---
 frontend/src/components/pages/Estimates.vue | 36 +++++++++++++-----
 frontend/src/components/pages/Invoices.vue  | 27 ++++++++++---
 frontend/src/components/pages/Jobs.vue      | 42 ++++++++++++++++-----
 3 files changed, 81 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/pages/Estimates.vue b/frontend/src/components/pages/Estimates.vue
index c83ef9d..86dc4ce 100644
--- a/frontend/src/components/pages/Estimates.vue
+++ b/frontend/src/components/pages/Estimates.vue
@@ -15,8 +15,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Incomplete Bids"
-								:todoNumber="bidsTodoNumber"
-								:completedNumber="bidsCompletedNumber"
+								:categories="chartData.bids"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -38,8 +37,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Unapproved Estimates"
-								:todoNumber="estimatesTodoNumber"
-								:completedNumber="estimatesCompletedNumber"
+								:categories="chartData.estimates"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -61,8 +59,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Half Down Payments"
-								:todoNumber="halfDownTodoNumber"
-								:completedNumber="halfDownCompletedNumber"
+								:categories="chartData.halfDown"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -84,8 +81,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Jobs In Queue"
-								:todoNumber="jobQueueTodoNumber"
-								:completedNumber="jobQueueCompletedNumber"
+								:categories="chartData.jobsInQueue"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -132,22 +128,30 @@ import Card from "../common/Card.vue";
 import DataTable from "../common/DataTable.vue";
 import TodoChart from "../common/TodoChart.vue";
 import { Edit, ChatBubbleQuestion, CreditCard, Hammer } from "@iconoir/vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import Api from "../../api";
 import { useLoadingStore } from "../../stores/loading";
 import { usePaginationStore } from "../../stores/pagination";
 import { useFiltersStore } from "../../stores/filters";
+import { useCompanyStore } from "../../stores/company.js";
 import { useRouter } from "vue-router";
 
 const loadingStore = useLoadingStore();
 const paginationStore = usePaginationStore();
 const filtersStore = useFiltersStore();
+const companyStore = useCompanyStore();
 const router = useRouter();
 
 const tableData = ref([]);
 const totalRecords = ref(0);
 const isLoading = ref(false);
 const showSubmitEstimateModal = ref(true);
+const chartData = ref({
+	bids: {labels: ["Unscheduled"], data: [0], colors: ['red']},
+	estimates: {labels: ["Draft", "Submitted"], data: [0, 0], colors: ['orange', 'blue']},
+	halfDown: {labels: ["Unpaid"], data: [0], colors: ['red']},
+	jobsInQueue: {labels: ["Queued"], data: [0], colors: ['blue']}
+});
 
 //Junk
 const filteredItems= []
@@ -277,6 +281,13 @@ const handleLazyLoad = async (event) => {
 	}
 };
 
+const loadChartData = async () => {
+	chartData.value.bids.data = await Api.getIncompleteBidsCount(companyStore.currentCompany);
+	chartData.value.estimates.data = await Api.getUnapprovedEstimatesCount(companyStore.currentCompany);
+	chartData.value.halfDown.data = await Api.getEstimatesHalfDownCount(companyStore.currentCompany);
+	chartData.value.jobsInQueue.data = await Api.getJobsInQueueCount(companyStore.currentCompany);
+};
+
 // Load initial data
 onMounted(async () => {
 	// Initialize pagination and filters
@@ -297,6 +308,13 @@ onMounted(async () => {
 		sortOrder: initialSorting.order || initialPagination.sortOrder,
 		filters: initialFilters,
 	});
+
+	// Chart Data
+	await loadChartData();
+});
+
+watch(() => companyStore.currentCompany, async (newCompany, oldCompany) => {
+	await loadChartData();
 });
 
 </script>
diff --git a/frontend/src/components/pages/Invoices.vue b/frontend/src/components/pages/Invoices.vue
index a39457a..1270d26 100644
--- a/frontend/src/components/pages/Invoices.vue
+++ b/frontend/src/components/pages/Invoices.vue
@@ -15,8 +15,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Ready To Invoice"
-								:todoNumber="invoiceTodoNumber"
-								:completedNumber="invoiceCompletedNumber"
+								:categories="chartData.jobsToInvoice"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -38,8 +37,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Late Balances"
-								:todoNumber="balancesTodoNumber"
-								:completedNumber="balancesCompletedNumber"
+								:categories="chartData.invoicesLate"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -65,21 +63,28 @@
 import Card from "../common/Card.vue";
 import DataTable from "../common/DataTable.vue";
 import TodoChart from "../common/TodoChart.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import Api from "../../api";
 import { useLoadingStore } from "../../stores/loading";
 import { usePaginationStore } from "../../stores/pagination";
 import { useFiltersStore } from "../../stores/filters";
+import { useCompanyStore } from "../../stores/company.js";
 import { CardNoAccess, CalendarCheck } from "@iconoir/vue";
 
 const loadingStore = useLoadingStore();
 const paginationStore = usePaginationStore();
 const filtersStore = useFiltersStore();
+const companyStore = useCompanyStore();
 
 const tableData = ref([]);
 const totalRecords = ref(0);
 const isLoading = ref(false);
 
+const chartData = ref({
+	jobsToInvoice: {labels: ["Ready To Invoice"], data: [0], colors: ['green']},
+	invoicesLate: {labels: ["Due", "30 Days", "60 Days", "80 Days"], data: [0, 0, 0, 0], colors: ["blue", "yellow", "orange", "red"]}
+})
+
 const columns = [
 	{ label: "Customer Address", fieldName: "address", type: "text", sortable: true },
 	{ label: "Customer", fieldName: "customer", type: "text", sortable: true, filterable: true },
@@ -168,6 +173,12 @@ const handleLazyLoad = async (event) => {
 	}
 };
 
+// Load Chart Data
+const loadChartData = async () => {
+	chartData.value.jobsToInvoice.data = await Api.getJobsToInvoiceCount(companyStore.currentCompany);
+	chartData.value.invoicesLate.data = await Api.getInvoicesLateCount(companyStore.currentCompany);
+};
+
 // Load initial data
 onMounted(async () => {
 	// Initialize pagination and filters
@@ -188,6 +199,12 @@ onMounted(async () => {
 		sortOrder: initialSorting.order || initialPagination.sortOrder,
 		filters: initialFilters,
 	});
+
+	await loadChartData();
+});
+
+watch(() => companyStore.currentCompany, async (newCompany, oldCompany) => {
+	await loadChartData();
 });
 
 </script>
diff --git a/frontend/src/components/pages/Jobs.vue b/frontend/src/components/pages/Jobs.vue
index 879691e..32221b1 100644
--- a/frontend/src/components/pages/Jobs.vue
+++ b/frontend/src/components/pages/Jobs.vue
@@ -15,8 +15,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Jobs In Queue"
-								:todoNumber="jobQueueTodoNumber"
-								:completedNumber="jobQueueCompletedNumber"
+								:categories="chartData.jobsInQueue"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -38,8 +37,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Jobs in Progress"
-								:todoNumber="progressTodoNumber"
-								:completedNumber="progressCompletedNumber"
+								:categories="chartData.jobsInProgress"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -61,8 +59,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Late Jobs"
-								:todoNumber="lateTodoNumber"
-								:completedNumber="lateCompletedNumber"
+								:categories="chartData.jobsLate"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -84,8 +81,7 @@
 					<div class="widget-content">
 						<TodoChart
 								title="Ready To Invoice"
-								:todoNumber="invoiceTodoNumber"
-								:completedNumber="invoiceCompletedNumber"
+								:categories="chartData.jobsToInvoice"
 								>
 						</TodoChart>
 						<button class="sidebar-button"
@@ -112,29 +108,39 @@
 import Card from "../common/Card.vue";
 import DataTable from "../common/DataTable.vue";
 import TodoChart from "../common/TodoChart.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import Api from "../../api";
 import { useLoadingStore } from "../../stores/loading";
 import { usePaginationStore } from "../../stores/pagination";
 import { useFiltersStore } from "../../stores/filters";
+import { useCompanyStore } from "../../stores/company.js";
 import { useNotificationStore } from "../../stores/notifications-primevue";
 import { Alarm, CalendarCheck, Hammer } from "@iconoir/vue";
 
 const loadingStore = useLoadingStore();
 const paginationStore = usePaginationStore();
 const filtersStore = useFiltersStore();
+const companyStore = useCompanyStore();
 const notifications = useNotificationStore();
 
 const tableData = ref([]);
 const totalRecords = ref(0);
 const isLoading = ref(false);
 
+const chartData = ref({
+	jobsInQueue: {labels: ["Queued"], data: [0], colors: ['blue']},
+	jobsInProgress: {labels: ["In Progress"], data: [0], colors: ['blue']},
+	jobsLate: {labels: ["Late"], data: [0], colors: ['red']},
+	jobsToInvoice: {labels: ["Ready To Invoice"], data: [0], colors: ['green']},
+})
+
 const columns = [
 	{ label: "Job ID", fieldName: "name", type: "text", sortable: true, filterable: true },
-	{ label: "Address", fieldName: "customInstallationAddress", type: "text", sortable: true },
+	{ label: "Address", fieldName: "jobAddress", type: "text", sortable: true },
 	{ label: "Customer", fieldName: "customer", type: "text", sortable: true, filterable: true },
 	{ label: "Overall Status", fieldName: "status", type: "status", sortable: true },
+	{ label: "Invoice Status", fieldName: "invoiceStatus", type: "text", sortable: true },
 	{ label: "Progress", fieldName: "percentComplete", type: "text", sortable: true }
 ];
 
@@ -260,6 +266,13 @@ const handleRowClick = (event) => {
 	router.push(`/job?name=${rowData.name}`);
 }
 
+const loadChartData = async () => {
+	chartData.value.jobsInQueue.data = await Api.getJobsInQueueCount(companyStore.currentCompany);
+	chartData.value.jobsInProgress.data = await Api.getJobsInProgressCount(companyStore.currentCompany);
+	chartData.value.jobsLate.data = await Api.getJobsLateCount(companyStore.currentCompany);
+	chartData.value.jobsToInvoice.data = await Api.getJobsToInvoiceCount(companyStore.currentCompany);
+}
+
 // Load initial data
 onMounted(async () => {
 	notifications.addWarning("Jobs page coming soon");
@@ -280,7 +293,16 @@ onMounted(async () => {
 		sortField: initialSorting.field || initialPagination.sortField,
 		sortOrder: initialSorting.order || initialPagination.sortOrder,
 	});
+
+	// Chart Data
+	await loadChartData();
+
 });
+
+watch(() => companyStore.currentCompany, async (newCompany, oldCompany) => {
+	await loadChartData();
+});
+
 </script>
 <style lang="css">
 .widgets-grid {