From 28c94c52309db9c0a52dd717a406e1b34a283c06 Mon Sep 17 00:00:00 2001 From: Rama Priyanto Date: Thu, 6 Feb 2025 16:49:20 +0700 Subject: [PATCH] feat:dashboard analytics --- components/landing/HeaderNews.tsx | 10 +- components/landing/MedolUpdate.tsx | 4 +- .../main/dashboard/dashboard-container.tsx | 232 ++++++++++++++++-- 3 files changed, 214 insertions(+), 32 deletions(-) diff --git a/components/landing/HeaderNews.tsx b/components/landing/HeaderNews.tsx index dd5779f..2e66c4b 100644 --- a/components/landing/HeaderNews.tsx +++ b/components/landing/HeaderNews.tsx @@ -201,14 +201,16 @@ export default function HeaderNews() { radius="lg" className="border-none h-[67vh] shadow-none" > - headernews @@ -216,7 +218,7 @@ export default function HeaderNews() { -

+

{newsItem.title}

diff --git a/components/landing/MedolUpdate.tsx b/components/landing/MedolUpdate.tsx index e791f56..bdec410 100644 --- a/components/landing/MedolUpdate.tsx +++ b/components/landing/MedolUpdate.tsx @@ -228,7 +228,7 @@ export default function MedolUpdate() { - {/* + - */} +
diff --git a/components/main/dashboard/dashboard-container.tsx b/components/main/dashboard/dashboard-container.tsx index cae54d1..3b403c3 100644 --- a/components/main/dashboard/dashboard-container.tsx +++ b/components/main/dashboard/dashboard-container.tsx @@ -33,11 +33,86 @@ type ArticleData = Article & { createdAt: string; }; +interface TopPages { + id: number; + no: number; + title: string; + visits: number; +} + +interface PostCount { + id: number; + no: number; + name: string; + count: number; +} + +const dummyTopPages = [ + { id: 1, title: "Home Page", visits: 830 }, + { id: 2, title: "Media Update", visits: 762 }, + { id: 3, title: "Polda Metro Jaya", visits: 532 }, + { id: 4, title: "Kapolri: Transformasi Menuju Polri Presisi", visits: 500 }, + { id: 5, title: "Polda Jawa Barat Ungkap Kasus Narkoba", visits: 480 }, + { id: 6, title: "Polri Perketat Pengamanan Jelang Pemilu", visits: 460 }, + { id: 7, title: "Polda Jawa Tengah Berhasil Tangkap Buronan", visits: 440 }, + { + id: 8, + title: "Divisi Humas Polri Rilis Data Kejahatan Terbaru", + visits: 420, + }, + { id: 9, title: "Polda Sumatera Utara Gerebek Pabrik Narkoba", visits: 400 }, + { + id: 10, + title: "Kapolda Bali Imbau Wisatawan Waspada Kejahatan", + visits: 380, + }, +]; + +const dummyPostCount = [ + { id: 1, name: "Polda Sumatera Utara", count: 132 }, + { id: 2, name: "Polda Metro Jaya", count: 128 }, + { id: 3, name: "Polda Jawa Barat", count: 120 }, + { id: 4, name: "Polda Jawa Timur", count: 115 }, + { id: 5, name: "Polda Bali", count: 110 }, + { id: 6, name: "Polda Daerah Istimewa Yogyakarta", count: 105 }, + { id: 7, name: "Polda Riau", count: 98 }, + { id: 8, name: "Polda Sulawesi Selatan", count: 92 }, + { id: 9, name: "Polda Kalimantan Timur", count: 85 }, + { id: 10, name: "Polda Jawa Tengah", count: 78 }, + { id: 11, name: "Polda Kalimantan Selatan", count: 72 }, + { id: 12, name: "Polda Sumatera Barat", count: 65 }, + { id: 13, name: "Polda Papua", count: 60 }, + { id: 14, name: "Polda Nusa Tenggara Barat", count: 54 }, + { id: 15, name: "Polda Maluku", count: 49 }, + { id: 16, name: "Polda Bengkulu", count: 43 }, + { id: 17, name: "Polda Lampung", count: 37 }, + { id: 18, name: "Polda Sulawesi Tenggara", count: 30 }, + { id: 19, name: "Polda Gorontalo", count: 24 }, + { id: 20, name: "Polda Kalimantan Barat", count: 18 }, + { id: 21, name: "Polda Kepulauan Riau", count: 10 }, + { id: 22, name: "Polda Sulawesi Barat", count: 8 }, + { id: 23, name: "Polda Papua Barat", count: 5 }, + { id: 24, name: "Polda Maluku Utara", count: 3 }, + { id: 25, name: "Polda Nusa Tenggara Timur", count: 2 }, + { id: 26, name: "Polda Kalimantan Tengah", count: 1 }, + { id: 27, name: "Polda Sulawesi Tengah", count: 1 }, + { id: 28, name: "Polda Bangka Belitung", count: 1 }, + { id: 29, name: "Polda Jambi", count: 0 }, + { id: 30, name: "Polda Banten", count: 0 }, + { id: 31, name: "Polda Aceh", count: 0 }, + { id: 32, name: "Polda Kalimantan Utara", count: 0 }, + { id: 33, name: "Polda Sulawesi Utara", count: 0 }, + { id: 34, name: "Polda Kepulauan Bangka Belitung", count: 0 }, + { id: 35, name: "Polda Sumatera Selatan", count: 0 }, +]; + export default function DashboardContainer() { const username = Cookies.get("username"); const fullname = Cookies.get("ufne"); const [page, setPage] = useState(1); const [totalPage, setTotalPage] = useState(1); + const [topPagespage, setTopPagesPage] = useState(1); + const [topPagesTotalPage, setTopPagesTotalPage] = useState(1); const [article, setArticle] = useState([]); const [analyticsView, setAnalyticView] = useState([ "visit", @@ -49,10 +124,20 @@ export default function DashboardContainer() { endDate: new Date(), }); + const [postContentDate, setPostContentDate] = useState({ + startDate: new Date(new Date().setDate(new Date().getDate() - 7)), + endDate: new Date(), + }); + const [typeDate, setTypeDate] = useState("monthly"); + const [topPages, setTopPages] = useState([]); + const [postCount, setPostCount] = useState([]); + useEffect(() => { initState(); + fetchTopPages(); + fetchPostCount(); }, [page]); async function initState() { @@ -66,6 +151,28 @@ export default function DashboardContainer() { setTotalPage(res?.data?.meta?.totalPage); } + async function fetchTopPages() { + setTopPages(getTableNumber(10, dummyTopPages)); + setTopPagesTotalPage(1); + } + async function fetchPostCount() { + setPostCount(getTableNumber(10, dummyPostCount)); + setTopPagesTotalPage(1); + } + + const getTableNumber = (limit: number, data: any) => { + if (data) { + const startIndex = limit * (page - 1); + let iterate = 0; + const newData = data.map((value: any) => { + iterate++; + value.no = startIndex + iterate; + return value; + }); + return newData; + } + }; + const getMonthYear = (date: Date | string) => { const newDate = new Date(date); @@ -140,6 +247,89 @@ export default function DashboardContainer() {
530
+
+
+
+

+ Rekapitulasi Post Berita Polda Pada Website +

+
+ setPostContentDate(e)} + inputClassName="z-50 w-full text-xs lg:text-sm bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-sm lg:rounded-lg h-[30px] lg:h-[40px] text-gray-600 dark:text-gray-300" + /> +
+
+
+
NO
+
POLDA
+
+ JUMLAH POST BERITA +
+
+
+ {postCount?.map((list) => ( +
+
{list?.no}
+
{list?.name}
+
+ {list?.count} +
+
+ ))} +
+
+
+
+

Recent Article

+ + + +
+ {article?.map((list: any) => ( +
+ +
+

{textEllipsis(list?.title, 78)}

+

+ {convertDateFormat(list?.createdAt)} +

+
+
+ ))} +
+ setPage(page)} + /> +
+
+
@@ -221,30 +411,20 @@ export default function DashboardContainer() {
-
-
-

Recent Article

- - - +
+
+

Top Pages

- {article?.map((list: any) => ( -
- -
-

{textEllipsis(list?.title, 58)}

-

- {convertDateFormat(list?.createdAt)} -

-
+
+
No
+
Title
+
Visits
+
+ {topPages?.map((list) => ( +
+
{list?.no}
+
{list?.title}
+
{list?.visits}
))}
@@ -257,9 +437,9 @@ export default function DashboardContainer() { base: "bg-transparent", wrapper: "bg-transparent", }} - page={page} - total={totalPage} - onChange={(page) => setPage(page)} + page={topPagespage} + total={topPagesTotalPage} + onChange={(page) => setTopPagesPage(page)} />