Intergarsi to API

Deskripsi:
- Intergrasi api voting

src/app/dev/vote/detail/kontribusi/[id]/page.tsx

@@ -1,13 +1,9 @@
 import { Vote_DetailKontribusi } from "@/app_modules/vote";
-import { voting_funGetOneVotingbyId } from "@/app_modules/vote/fun/get/fun_get_one_by_id";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  let voteId = params.id;
-  const dataVote = await voting_funGetOneVotingbyId(voteId);
 
+export default async function Page() {
   return (
     <>
-      <Vote_DetailKontribusi dataVote={dataVote as any} />
+      <Vote_DetailKontribusi />
     </>
   );
 }

src/app/dev/vote/detail/main/[id]/page.tsx

@@ -2,7 +2,6 @@ import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
 import { Vote_MainDetail } from "@/app_modules/vote";
 
 export default async function Page({ params }: { params: { id: string } }) {
-  const voteId = params.id;
   const userLoginId = await funGetUserIdByToken();
   return (
     <>

src/app/dev/vote/detail/semua_riwayat/[id]/page.tsx

@@ -1,19 +1,9 @@
 import { Vote_DetailSemuaRiwayat } from "@/app_modules/vote";
-import { Vote_getListKontributorById } from "@/app_modules/vote/fun/get/get_list_kontributor_by_id";
-import { Vote_getOnePublishbyId } from "@/app_modules/vote/fun/get/get_one_publish_by_id";
-
-
-export default async function Page({params}: {params: {id: string}}) {
-  let voteId = params.id
-  const dataVote = await Vote_getOnePublishbyId(voteId)
-  const listKontributor = await Vote_getListKontributorById(voteId)
 
+export default async function Page() {
   return (
     <>
-      <Vote_DetailSemuaRiwayat
+      <Vote_DetailSemuaRiwayat />
-        dataVote={dataVote as any}
-        listKontributor={listKontributor as any}
-      />
     </>
   );
 }

src/app_modules/vote/component/detail/detail_data_setelah_publish.tsx

@@ -6,6 +6,8 @@ import {
 } from "@/app_modules/_global/component";
 import { Badge, Center, Group, Stack, Text, Title } from "@mantine/core";
 import { MODEL_VOTING } from "../../model/interface";
+import moment from "moment"
+import "moment/locale/id"
 
 export default function ComponentVote_DetailDataSetelahPublish({
   data,
@@ -48,19 +50,15 @@ export default function ComponentVote_DetailDataSetelahPublish({
                     },
                   }}
                 >
-                  <Group>
                   <Text>
-                      {data?.awalVote.toLocaleDateString(["id-ID"], {
+                    {data
-                        dateStyle: "medium",
+                      ? moment(data.awalVote).format("ll")
-                      })}
+                      : "tgl awal voting"}{" "}
+                    -{" "}
+                    {data
+                      ? moment(data.akhirVote).format("ll")
+                      : "tgl akhir voting"}
                   </Text>
-                    <Text>-</Text>
-                    <Text>
-                      {data?.akhirVote.toLocaleDateString(["id-ID"], {
-                        dateStyle: "medium",
-                      })}
-                    </Text>
-                  </Group>
                 </Badge>
               </Stack>
             </Stack>

src/app_modules/vote/detail/kontribusi/index.tsx

@@ -1,25 +1,123 @@
 "use client";
 
+import { AccentColor } from "@/app_modules/_global/color";
 import {
-  Stack
+  ComponentGlobal_AvatarAndUsername,
-} from "@mantine/core";
+  ComponentGlobal_CardStyles,
-import ComponentVote_DetailDataSetelahPublish from "../../component/detail/detail_data_setelah_publish";
+} from "@/app_modules/_global/component";
+import { clientLogger } from "@/util/clientLogger";
+import { Badge, Center, Stack, Text, Title } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import moment from "moment";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import {
+  apiGetHasilVotingById,
+  apiGetOneVotingById,
+} from "../../_lib/api_voting";
 import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
+import { Voting_ComponentSkeletonDetail } from "../../component/skeleton_view";
 import { MODEL_VOTING } from "../../model/interface";
+import ComponentVote_DetailDataSetelahPublish from "../../component/detail/detail_data_setelah_publish";
 
-export default function Vote_DetailKontribusi({
+export default function Vote_DetailKontribusi() {
-  dataVote,
+  const params = useParams<{ id: string }>();
-}: {
+  const [data, setData] = useState<MODEL_VOTING | null>(null);
-  dataVote: MODEL_VOTING;
+  const [hasil, setHasil] = useState<any[] | null>(null);
-}) {
+
+  useShallowEffect(() => {
+    onLoadData();
+    onLoadHasil();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetOneVotingById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data detail", error);
+    }
+  }
+
+  async function onLoadHasil() {
+    try {
+      const respone = await apiGetHasilVotingById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setHasil(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data hasil voting", error);
+    }
+  }
+
+  if (_.isNull(data) && _.isNull(hasil)) {
     return (
       <>
-      <Stack py={"md"}>
+        <Voting_ComponentSkeletonDetail />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Stack pb={"md"}>
+        {/* <ComponentGlobal_CardStyles marginBottom={"0px"}>
+          <Stack>
+            <ComponentGlobal_AvatarAndUsername
+              profile={data?.Author.Profile as any}
+            />
+            <Stack spacing={"lg"}>
+              <Center>
+                <Title order={4} align="center">
+                  {data?.title}
+                </Title>
+              </Center>
+              <Text>{data?.deskripsi}</Text>
+
+              <Stack spacing={0} pb={"xs"}>
+                <Stack align="center" spacing={"xs"}>
+                  <Text fz={10} fw={"bold"}>
+                    Batas Voting
+                  </Text>
+                  <Badge
+                    styles={{
+                      root: {
+                        backgroundColor: AccentColor.blue,
+                        border: `1px solid ${AccentColor.skyblue}`,
+                        color: "white",
+                        width: "80%",
+                      },
+                    }}
+                  >
+                    <Text>
+                      {data
+                        ? moment(data.awalVote).format("ll")
+                        : "tgl awal voting"}{" "}
+                      -{" "}
+                      {data
+                        ? moment(data.akhirVote).format("ll")
+                        : "tgl akhir voting"}
+                    </Text>
+                  </Badge>
+                </Stack>
+              </Stack>
+            </Stack>
+          </Stack>
+        </ComponentGlobal_CardStyles> */}
         <ComponentVote_DetailDataSetelahPublish
-          data={dataVote}
+          data={data as any}
           authorName={true}
         />
-        <ComponentVote_HasilVoting data={dataVote.Voting_DaftarNamaVote} />
+        <ComponentVote_HasilVoting data={hasil as any} />
       </Stack>
     </>
   );

src/app_modules/vote/detail/riwayat_saya/index.tsx

@@ -5,6 +5,16 @@ import ComponentVote_DaftarKontributorVoter from "../../component/detail/detail_
 import ComponentVote_DetailDataSetelahPublish from "../../component/detail/detail_data_setelah_publish";
 import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
 import { MODEL_VOTING } from "../../model/interface";
+import { clientLogger } from "@/util/clientLogger";
+import { useShallowEffect } from "@mantine/hooks";
+import _ from "lodash";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import {
+  apiGetOneVotingById,
+  apiGetHasilVotingById,
+} from "../../_lib/api_voting";
+import { Voting_ComponentSkeletonDetail } from "../../component/skeleton_view";
 
 export default function Vote_DetailRiwayatSaya({
   dataVote,
@@ -13,17 +23,58 @@ export default function Vote_DetailRiwayatSaya({
   dataVote: MODEL_VOTING;
   listKontributor: any[];
 }) {
+  const params = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_VOTING | null>(null);
+  const [hasil, setHasil] = useState<any[] | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+    onLoadHasil();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetOneVotingById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data detail", error);
+    }
+  }
+
+  async function onLoadHasil() {
+    try {
+      const respone = await apiGetHasilVotingById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setHasil(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data hasil voting", error);
+    }
+  }
+
+  if (_.isNull(data) || _.isNull(hasil)) {
+    return <Voting_ComponentSkeletonDetail />;
+  }
+
   return (
     <>
       <Stack pb={"md"}>
         <ComponentVote_DetailDataSetelahPublish
-          data={dataVote}
+          data={data}
           authorName={true}
         />
-        <ComponentVote_HasilVoting data={dataVote.Voting_DaftarNamaVote} />
+        <ComponentVote_HasilVoting data={hasil} />
-        <ComponentVote_DaftarKontributorVoter
+        {/* <ComponentVote_DaftarKontributorVoter
           listKontributor={listKontributor}
-        />
+        /> */}
       </Stack>
     </>
   );

src/app_modules/vote/detail/riwayat_saya/layout.tsx

@@ -1,21 +1,56 @@
 "use client";
 
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import { UIGlobal_Drawer } from "@/app_modules/_global/ui";
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import React from "react";
+import { ActionIcon } from "@mantine/core";
+import { IconDotsVertical, IconUsersGroup } from "@tabler/icons-react";
+import { useParams } from "next/navigation";
+import React, { useState } from "react";
 
 export default function LayoutVote_DetailRiwayatSaya({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const params = useParams<{ id: string }>();
+  const [openDrawer, setOpenDrawer] = useState(false);
+
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Detail Riwayat" />}
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Detail Riwayat"
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => {
+                  setOpenDrawer(true);
+                }}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
+          />
+        }
       >
         {children}
       </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={[
+          {
+            id: "1",
+            name: "Daftar Kontribusi",
+            icon: <IconUsersGroup />,
+            path: RouterVote.daftar_kontributor + params.id,
+          },
+        ]}
+      />
     </>
   );
 }

src/app_modules/vote/detail/semua_riwayat/index.tsx

@@ -1,30 +1,73 @@
 "use client";
 
+import { clientLogger } from "@/util/clientLogger";
 import { Stack } from "@mantine/core";
-import ComponentVote_DetailDataTanpaVote from "../../component/detail/detail_data_tanpa_vote";
+import { useShallowEffect } from "@mantine/hooks";
-import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
+import _ from "lodash";
-import ComponentVote_DaftarKontributorVoter from "../../component/detail/detail_daftar_kontributor";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import {
+  apiGetHasilVotingById,
+  apiGetOneVotingById,
+} from "../../_lib/api_voting";
 import ComponentVote_DetailDataSetelahPublish from "../../component/detail/detail_data_setelah_publish";
-import { MODEL_VOTE_KONTRIBUTOR, MODEL_VOTING } from "../../model/interface";
+import ComponentVote_HasilVoting from "../../component/detail/detail_hasil_voting";
+import { Voting_ComponentSkeletonDetail } from "../../component/skeleton_view";
+import { MODEL_VOTING } from "../../model/interface";
+
+export default function Vote_DetailSemuaRiwayat() {
+  const params = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_VOTING | null>(null);
+  const [hasil, setHasil] = useState<any[] | null>(null);
+
+  useShallowEffect(() => {
+    onLoadData();
+    onLoadHasil();
+  }, []);
+
+  async function onLoadData() {
+    try {
+      const respone = await apiGetOneVotingById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setData(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data detail", error);
+    }
+  }
+
+  async function onLoadHasil() {
+    try {
+      const respone = await apiGetHasilVotingById({
+        id: params.id,
+      });
+
+      if (respone) {
+        setHasil(respone.data);
+      }
+    } catch (error) {
+      clientLogger.error("Error get data hasil voting", error);
+    }
+  }
+
+  if (_.isNull(data) || _.isNull(hasil)) {
+    return <Voting_ComponentSkeletonDetail />;
+  }
 
-export default function Vote_DetailSemuaRiwayat({
-  dataVote,
-  listKontributor,
-}: {
-  dataVote: MODEL_VOTING;
-  listKontributor: MODEL_VOTE_KONTRIBUTOR[];
-}) {
   return (
     <>
       <Stack pb={"md"}>
         <ComponentVote_DetailDataSetelahPublish
-          data={dataVote}
+          data={data as any}
           authorName={true}
         />
-        <ComponentVote_HasilVoting data={dataVote.Voting_DaftarNamaVote} />
+        <ComponentVote_HasilVoting data={hasil} />
-        <ComponentVote_DaftarKontributorVoter
+        {/* <ComponentVote_DaftarKontributorVoter
           listKontributor={listKontributor}
-        />
+        /> */}
       </Stack>
     </>
   );

src/app_modules/vote/detail/semua_riwayat/layout.tsx

@@ -1,8 +1,14 @@
 "use client";
 
+import { RouterVote } from "@/app/lib/router_hipmi/router_vote";
+import { UIGlobal_Drawer } from "@/app_modules/_global/ui";
 import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
 import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
-import React from "react";
+import { ActionIcon } from "@mantine/core";
+import { IconDotsVertical } from "@tabler/icons-react";
+import { IconUsersGroup } from "@tabler/icons-react";
+import { IconDots } from "@tabler/icons-react";
+import React, { useState } from "react";
 
 export default function LayoutVote_DetailSemuaRiwayat({
   children,
@@ -13,13 +19,42 @@ export default function LayoutVote_DetailSemuaRiwayat({
   votingId: string;
   userLoginId: string;
 }) {
+  const [openDrawer, setOpenDrawer] = useState(false);
+
   return (
     <>
       <UIGlobal_LayoutTamplate
-        header={<UIGlobal_LayoutHeaderTamplate title="Detail Riwayat" />}
+        header={
+          <UIGlobal_LayoutHeaderTamplate
+            title="Detail Riwayat"
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => {
+                  setOpenDrawer(true);
+                }}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
+          />
+        }
       >
         {children}
       </UIGlobal_LayoutTamplate>
+
+      <UIGlobal_Drawer
+        opened={openDrawer}
+        close={() => setOpenDrawer(false)}
+        component={[
+          {
+            id: "1",
+            name: "Daftar Kontribusi",
+            icon: <IconUsersGroup />,
+            path: RouterVote.daftar_kontributor + votingId,
+          },
+        ]}
+      />
     </>
   );
 }