From 877f2170e40f5a6af14bd8065cd35ddcf5e18206 Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Sun, 29 Jun 2025 17:53:03 +0700
Subject: [PATCH] feat:visitor count

---
 components/main/dashboard/chart/visitor-chart.tsx | 6 +++++-
 components/main/dashboard/dashboard-container.tsx | 7 ++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/main/dashboard/chart/visitor-chart.tsx b/components/main/dashboard/chart/visitor-chart.tsx
index ff601b3..26a6738 100644
--- a/components/main/dashboard/chart/visitor-chart.tsx
+++ b/components/main/dashboard/chart/visitor-chart.tsx
@@ -86,8 +86,9 @@ const ApexChartColumnVisitors = (props: {
   type: string;
   date: string;
   range: { start: any; end: any };
+  total: (data: number) => void;
 }) => {
-  const { date, type, range } = props;
+  const { date, type, range, total } = props;
   const [categories, setCategories] = useState<string[]>([]);
   const [series, setSeries] = useState<{ name: string; data: number[] }[]>([]);
   const [seriesVisitors, setSeriesVisitors] = useState<number[]>([]);
@@ -124,6 +125,7 @@ const ApexChartColumnVisitors = (props: {
     if (getDatas) {
       if (type == "monthly") {
         setSeriesVisitors(getDatas.data);
+        total(getDatas.data.reduce((a: number, b: number) => a + b, 0));
       }
       if (type === "daily") {
         const mappedData = getRangeAcrossMonths(
@@ -135,6 +137,8 @@ const ApexChartColumnVisitors = (props: {
         );
 
         setSeriesVisitors(mappedData.visitors);
+        total(mappedData.visitors.reduce((a: number, b: number) => a + b, 0));
+
         setCategories(mappedData.labels);
       }
       // if (type === "weekly") {
diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx
index 9077509..0ba669d 100644
--- a/components/main/dashboard/dashboard-container.tsx
+++ b/components/main/dashboard/dashboard-container.tsx
@@ -215,7 +215,7 @@ export default function DashboardContainer() {
   }>();
   const roleId = Cookies.get("urie");
   const today = new Date();
-
+  const [chartVisitorTotal, setChartVisitorTotal] = useState(0);
   const [recapArticlePage, setRecapArticlePage] = useState(1);
   const [recapArticleTotalPage, setRecapArticleTotalPage] = useState(1);
 
@@ -1123,9 +1123,14 @@ export default function DashboardContainer() {
                       ).split("-")[0]
                     }`}
                     range={visitorDailyDate}
+                    total={(data) => setChartVisitorTotal(data)}
                   />
                 </div>
               </div>
+              <div className="flex flex-row gap-2 mt-5 border-1 p-5 rounded-lg">
+                <div className="w-1/5 text-center">Chart Total</div>
+                <div className="w-4/5 text-center">{chartVisitorTotal}</div>
+              </div>
             </div>
           </div>
         )}