From 02ff90c204890ae71dc79364211fa650f2e09fc0 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Thu, 13 Mar 2025 10:49:25 +0800
Subject: [PATCH] fix ui layout voting

---
 src/app/dev/vote/main/layout.tsx              |  4 +-
 .../_global/ui/V2_layout_tamplate.tsx         |  8 +-
 .../component/component_footer_voting.tsx     | 76 +++++++++++++++++++
 src/app_modules/vote/create/layout.tsx        | 18 ++++-
 src/app_modules/vote/main/beranda.tsx         |  4 +-
 src/app_modules/vote/main/kontribusi.tsx      |  2 +-
 .../vote/main/new_layout_voting.tsx           | 32 ++++++++
 src/app_modules/vote/main/riwayat/index.tsx   |  2 +-
 src/app_modules/vote/main/riwayat/saya.tsx    |  2 +-
 src/app_modules/vote/main/riwayat/semua.tsx   |  2 +-
 src/app_modules/vote/main/status/draft.tsx    |  2 +-
 src/app_modules/vote/main/status/index.tsx    |  1 -
 src/app_modules/vote/main/status/publish.tsx  |  2 +-
 src/app_modules/vote/main/status/reject.tsx   |  2 +-
 src/app_modules/vote/main/status/review.tsx   |  2 +-
 15 files changed, 139 insertions(+), 20 deletions(-)
 create mode 100644 src/app_modules/vote/component/component_footer_voting.tsx
 create mode 100644 src/app_modules/vote/main/new_layout_voting.tsx

diff --git a/src/app/dev/vote/main/layout.tsx b/src/app/dev/vote/main/layout.tsx
index 6c2e5673..2833de29 100644
--- a/src/app/dev/vote/main/layout.tsx
+++ b/src/app/dev/vote/main/layout.tsx
@@ -1,4 +1,5 @@
 import { LayoutVote_Main } from "@/app_modules/vote";
+import NewLayout_Voting from "@/app_modules/vote/main/new_layout_voting";
 import React from "react";
 
 export default async function Layout({
@@ -8,7 +9,8 @@ export default async function Layout({
 }) {
   return (
     <>
-      <LayoutVote_Main>{children}</LayoutVote_Main>
+      {/* <LayoutVote_Main>{children}</LayoutVote_Main> */}
+      <NewLayout_Voting>{children}</NewLayout_Voting>
     </>
   );
 }
diff --git a/src/app_modules/_global/ui/V2_layout_tamplate.tsx b/src/app_modules/_global/ui/V2_layout_tamplate.tsx
index fe6c511b..aea17c24 100644
--- a/src/app_modules/_global/ui/V2_layout_tamplate.tsx
+++ b/src/app_modules/_global/ui/V2_layout_tamplate.tsx
@@ -60,8 +60,8 @@ const useStyles = createStyles((theme) => ({
       height: "8vh",
     },
     borderBottom: `1px solid ${AccentColor.blue}`,
-    borderBottomLeftRadius: "10px",
-    borderBottomRightRadius: "10px",
+    borderBottomLeftRadius: "20px",
+    borderBottomRightRadius: "20px",
   },
 
   content: {
@@ -85,8 +85,8 @@ const useStyles = createStyles((theme) => ({
     transform: "translateX(-50%)", // Pusatkan footer
     maxWidth: "500px", // Batasi lebar footer
     color: MainColor.white,
-    borderTopLeftRadius: "10px",
-    borderTopRightRadius: "10px",
+    borderTopLeftRadius: "20px",
+    borderTopRightRadius: "20px",
   },
 }));
 
diff --git a/src/app_modules/vote/component/component_footer_voting.tsx b/src/app_modules/vote/component/component_footer_voting.tsx
new file mode 100644
index 00000000..93d35625
--- /dev/null
+++ b/src/app_modules/vote/component/component_footer_voting.tsx
@@ -0,0 +1,76 @@
+import { RouterVote } from "@/lib/router_hipmi/router_vote";
+import {
+  IconHome,
+  IconReservedLine,
+  IconClick,
+  IconHistory,
+} from "@tabler/icons-react";
+import { useAtom } from "jotai";
+import { useRouter } from "next/navigation";
+import { gs_vote_hotMenu } from "../global_state";
+import { MainColor } from "@/app_modules/_global/color";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
+import { SimpleGrid, Stack, ActionIcon, Text } from "@mantine/core";
+
+export function Voting_ComponentFooterLayout() {
+  const router = useRouter();
+  const [hotMenu, setHotMenu] = useAtom(gs_vote_hotMenu);
+
+  const listFooter = [
+    {
+      id: 1,
+      name: "Beranda",
+      path: RouterVote.beranda,
+      icon: <IconHome />,
+    },
+
+    {
+      id: 2,
+      name: "Status",
+      path: RouterVote.status({ id: "1" }),
+      icon: <IconReservedLine />,
+    },
+    {
+      id: 3,
+      name: "Kontribusi",
+      path: RouterVote.kontribusi,
+      icon: <IconClick />,
+    },
+    {
+      id: 4,
+      name: "Riwayat",
+      path: RouterVote.riwayat({ id: "1" }),
+      icon: <IconHistory />,
+    },
+  ];
+
+  return (
+    <>
+      <SimpleGrid cols={4} mx={"xs"} w={"100%"}>
+        {listFooter.map((e, i) => (
+          <Stack key={i} align="center" justify="center" spacing={0}>
+            <ActionIcon
+              // disabled={e.path === "" ? true : false}
+              variant="transparent"
+              c={hotMenu === e.id ? MainColor.yellow : MainColor.white}
+              onClick={() =>
+                e.path === ""
+                  ? ComponentGlobal_NotifikasiPeringatan("Cooming Soon")
+                  : (router.replace(e.path), setHotMenu(e.id))
+              }
+            >
+              {e.icon}
+            </ActionIcon>
+            <Text
+              c={hotMenu === e.id ? MainColor.yellow : "white"}
+              fz={"xs"}
+              lineClamp={1}
+            >
+              {e.name}
+            </Text>
+          </Stack>
+        ))}
+      </SimpleGrid>
+    </>
+  );
+}
diff --git a/src/app_modules/vote/create/layout.tsx b/src/app_modules/vote/create/layout.tsx
index 48fb1dfd..8ab0fca2 100644
--- a/src/app_modules/vote/create/layout.tsx
+++ b/src/app_modules/vote/create/layout.tsx
@@ -1,7 +1,10 @@
 "use client";
 
-import UIGlobal_LayoutHeaderTamplate from "@/app_modules/_global/ui/ui_header_tamplate";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
 import React from "react";
 
 export default function LayoutVote_Create({
@@ -11,9 +14,16 @@ export default function LayoutVote_Create({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Tambah Vote" />}>
+      {/* <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Tambah Vote" />}>
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Tambah Voting" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/vote/main/beranda.tsx b/src/app_modules/vote/main/beranda.tsx
index 2ee7a624..ccea2e53 100644
--- a/src/app_modules/vote/main/beranda.tsx
+++ b/src/app_modules/vote/main/beranda.tsx
@@ -91,7 +91,7 @@ export default function Vote_Beranda() {
   }
 
   return (
-    <Stack mt={"1vh"}>
+    <Stack>
       {isShowUpdate && (
         <Affix position={{ top: rem(100) }} w={"100%"}>
           <Center>
@@ -131,7 +131,7 @@ export default function Vote_Beranda() {
       ) : (
         <Box>
           <ScrollOnly
-            height="75vh"
+            height="73vh"
             renderLoading={() => (
               <Center mt={"lg"}>
                 <Loader color={"yellow"} />
diff --git a/src/app_modules/vote/main/kontribusi.tsx b/src/app_modules/vote/main/kontribusi.tsx
index eb538cef..7a6d172d 100644
--- a/src/app_modules/vote/main/kontribusi.tsx
+++ b/src/app_modules/vote/main/kontribusi.tsx
@@ -43,7 +43,7 @@ export default function Vote_Kontribusi() {
         ) : (
           <Box>
             <ScrollOnly
-              height="82vh"
+              height="80vh"
               renderLoading={() => (
                 <Center mt={"lg"}>
                   <Loader color={"yellow"} />
diff --git a/src/app_modules/vote/main/new_layout_voting.tsx b/src/app_modules/vote/main/new_layout_voting.tsx
new file mode 100644
index 00000000..08236e9c
--- /dev/null
+++ b/src/app_modules/vote/main/new_layout_voting.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, {
+  UI_NewChildren,
+  UI_NewFooter,
+  UI_NewHeader,
+} from "@/app_modules/_global/ui/V2_layout_tamplate";
+import { RouterHome } from "@/lib/router_hipmi/router_home";
+import React from "react";
+import { Voting_ComponentFooterLayout } from "../component/component_footer_voting";
+
+
+export default function NewLayout_Voting({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Voting" routerLeft={RouterHome.main_home} />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+        <UI_NewFooter>
+          <Voting_ComponentFooterLayout />
+        </UI_NewFooter>
+      </UI_NewLayoutTamplate>
+    </>
+  );
+}
diff --git a/src/app_modules/vote/main/riwayat/index.tsx b/src/app_modules/vote/main/riwayat/index.tsx
index cb648940..2ef45b1b 100644
--- a/src/app_modules/vote/main/riwayat/index.tsx
+++ b/src/app_modules/vote/main/riwayat/index.tsx
@@ -30,7 +30,6 @@ export default function Vote_Riwayat() {
   return (
     <>
       <Tabs
-        mt={1}
         variant="pills"
         radius={"xl"}
         value={params.id}
@@ -65,6 +64,7 @@ export default function Vote_Riwayat() {
                     params.id === e.id
                       ? `1px solid ${AccentColor.yellow}`
                       : `1px solid ${MainColor.white}`,
+                  color: "black",
                 }}
               >
                 {e.label}
diff --git a/src/app_modules/vote/main/riwayat/saya.tsx b/src/app_modules/vote/main/riwayat/saya.tsx
index df148727..1833da78 100644
--- a/src/app_modules/vote/main/riwayat/saya.tsx
+++ b/src/app_modules/vote/main/riwayat/saya.tsx
@@ -47,7 +47,7 @@ export default function Vote_RiwayatSaya() {
         // --- Main component --- //
         <Box>
           <ScrollOnly
-            height="76vh"
+            height="73vh"
             renderLoading={() => (
               <Center mt={"lg"}>
                 <Loader color={"yellow"} />
diff --git a/src/app_modules/vote/main/riwayat/semua.tsx b/src/app_modules/vote/main/riwayat/semua.tsx
index 931e025a..a83f67a7 100644
--- a/src/app_modules/vote/main/riwayat/semua.tsx
+++ b/src/app_modules/vote/main/riwayat/semua.tsx
@@ -47,7 +47,7 @@ export default function Vote_SemuaRiwayat() {
         // --- Main component --- //
         <Box>
           <ScrollOnly
-            height="76vh"
+            height="73vh"
             renderLoading={() => (
               <Center mt={"lg"}>
                 <Loader color={"yellow"} />
diff --git a/src/app_modules/vote/main/status/draft.tsx b/src/app_modules/vote/main/status/draft.tsx
index 2cc846bf..b8dc3ec3 100644
--- a/src/app_modules/vote/main/status/draft.tsx
+++ b/src/app_modules/vote/main/status/draft.tsx
@@ -47,7 +47,7 @@ export default function Vote_StatusDraft() {
         // --- Main component --- //
         <Box>
           <ScrollOnly
-            height="75vh"
+            height="73vh"
             renderLoading={() => (
               <Center mt={"lg"}>
                 <Loader color={"yellow"} />
diff --git a/src/app_modules/vote/main/status/index.tsx b/src/app_modules/vote/main/status/index.tsx
index 2482524e..0e3e9a4b 100644
--- a/src/app_modules/vote/main/status/index.tsx
+++ b/src/app_modules/vote/main/status/index.tsx
@@ -37,7 +37,6 @@ export default function Vote_Status() {
   return (
     <>
       <Tabs
-        mt={1}
         variant="pills"
         radius={"xl"}
         value={params.id}
diff --git a/src/app_modules/vote/main/status/publish.tsx b/src/app_modules/vote/main/status/publish.tsx
index 43776683..ac09310b 100644
--- a/src/app_modules/vote/main/status/publish.tsx
+++ b/src/app_modules/vote/main/status/publish.tsx
@@ -48,7 +48,7 @@ export default function Vote_StatusPublish() {
           // --- Main component --- //
           <Box>
             <ScrollOnly
-              height="75vh"
+              height="73vh"
               renderLoading={() => (
                 <Center mt={"lg"}>
                   <Loader color={"yellow"} />
diff --git a/src/app_modules/vote/main/status/reject.tsx b/src/app_modules/vote/main/status/reject.tsx
index da13b67c..24c5a0db 100644
--- a/src/app_modules/vote/main/status/reject.tsx
+++ b/src/app_modules/vote/main/status/reject.tsx
@@ -47,7 +47,7 @@ export default function Vote_StatusReject() {
         // --- Main component --- //
         <Box>
           <ScrollOnly
-            height="75vh"
+            height="73vh"
             renderLoading={() => (
               <Center mt={"lg"}>
                 <Loader color={"yellow"} />
diff --git a/src/app_modules/vote/main/status/review.tsx b/src/app_modules/vote/main/status/review.tsx
index 86a21386..bb2dff22 100644
--- a/src/app_modules/vote/main/status/review.tsx
+++ b/src/app_modules/vote/main/status/review.tsx
@@ -47,7 +47,7 @@ export default function Vote_StatusReview() {
         // --- Main component --- //
         <Box>
           <ScrollOnly
-            height="75vh"
+            height="73vh"
             renderLoading={() => (
               <Center mt={"lg"}>
                 <Loader color={"yellow"} />