attempt chart component

frontend/src/components/pages/Clients.vue

@@ -1,6 +1,16 @@
 <template>
 	<div class="page-container">
 		<H2>Client Contact List</H2>
+
+		<!-- Status Chart Section -->
+		<div class="chart-section">
+			<StatusChart
+				:statusData="statusCounts"
+				:onWeekChange="handleWeekChange"
+				:loading="chartLoading"
+			/>
+		</div>
+
 		<div id="filter-container" class="filter-container">
 			<button @click="onClick" id="add-customer-button" class="interaction-button">
 				Add
@@ -19,8 +29,9 @@
 	</div>
 </template>
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch, computed } from "vue";
 import DataTable from "../common/DataTable.vue";
+import StatusChart from "../common/StatusChart.vue";
 import Api from "../../api";
 import { FilterMatchMode } from "@primevue/core";
 import { useLoadingStore } from "../../stores/loading";
@@ -36,12 +47,67 @@ const modalStore = useModalStore();
 const tableData = ref([]);
 const totalRecords = ref(0);
 const isLoading = ref(false);
+const statusCounts = ref({}); // Start with empty object
+const currentWeekParams = ref({});
+const chartLoading = ref(true); // Start with loading state
+
+// Computed property to get current filters for the chart
+const currentFilters = computed(() => {
+	return filtersStore.getTableFilters("clients");
+});
 
 const onClick = () => {
 	//frappe.new_doc("Customer");
 	modalStore.openCreateClient();
 };
 
+// Handle week change from chart
+const handleWeekChange = async (weekParams) => {
+	console.log("handleWeekChange called with:", weekParams);
+	currentWeekParams.value = weekParams;
+	await refreshStatusCounts();
+};
+
+// Refresh status counts with current week and filters
+const refreshStatusCounts = async () => {
+	chartLoading.value = true;
+	try {
+		let params = {};
+
+		// Only apply weekly filtering if weekParams is provided (not null)
+		if (currentWeekParams.value) {
+			params = {
+				weekly: true,
+				weekStartDate: currentWeekParams.value.weekStartDate,
+				weekEndDate: currentWeekParams.value.weekEndDate,
+			};
+			console.log("Using weekly filter:", params);
+		} else {
+			// No weekly filtering - get all time data
+			params = {
+				weekly: false,
+			};
+			console.log("Using all-time data (no weekly filter)");
+		}
+
+		// Add current filters to the params
+		const currentFilters = filtersStore.getTableFilters("clients");
+		if (currentFilters && Object.keys(currentFilters).length > 0) {
+			params.filters = currentFilters;
+		}
+
+		const response = await Api.getClientStatusCounts(params);
+		statusCounts.value = response || {};
+
+		console.log("Status counts updated:", statusCounts.value);
+	} catch (error) {
+		console.error("Error refreshing status counts:", error);
+		statusCounts.value = {};
+	} finally {
+		chartLoading.value = false;
+	}
+};
+
 const filters = {
 	addressTitle: { value: null, matchMode: FilterMatchMode.CONTAINS },
 };
@@ -78,7 +144,6 @@ const handleLazyLoad = async (event) => {
 
 		// Get sorting information from filters store first (needed for cache key)
 		const sorting = filtersStore.getTableSorting("clients");
-		console.log("Current sorting state:", sorting);
 
 		// Get pagination parameters
 		const paginationParams = {
@@ -176,8 +241,15 @@ const handleLazyLoad = async (event) => {
 		isLoading.value = false;
 	}
 };
+// Watch for filters change to update status counts
+watch(
+	() => filtersStore.getTableFilters("clients"),
+	async () => {
+		await refreshStatusCounts();
+	},
+	{ deep: true },
+);
 
-// Load initial data
 onMounted(async () => {
 	// Initialize pagination and filters
 	paginationStore.initializeTablePagination("clients", { rows: 10 });
@@ -189,6 +261,9 @@ onMounted(async () => {
 	const initialFilters = filtersStore.getTableFilters("clients");
 	const initialSorting = filtersStore.getTableSorting("clients");
 
+	// Don't load initial status counts here - let the chart component handle it
+	// The chart will emit the initial week parameters and trigger refreshStatusCounts
+
 	await handleLazyLoad({
 		page: initialPagination.page,
 		rows: initialPagination.rows,
@@ -203,4 +278,28 @@ onMounted(async () => {
 .page-container {
 	height: 100%;
 }
+
+.chart-section {
+	margin-bottom: 20px;
+}
+
+.filter-container {
+	margin-bottom: 15px;
+}
+
+.interaction-button {
+	background: #3b82f6;
+	color: white;
+	border: none;
+	padding: 10px 20px;
+	border-radius: 6px;
+	cursor: pointer;
+	font-size: 14px;
+	font-weight: 500;
+	transition: background 0.2s;
+}
+
+.interaction-button:hover {
+	background: #2563eb;
+}
 </style>