fix ui layout voting

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>
     </>
   );
 }

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",
+    borderBottomLeftRadius: "20px",
-    borderBottomRightRadius: "10px",
+    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",
+    borderTopLeftRadius: "20px",
-    borderTopRightRadius: "10px",
+    borderTopRightRadius: "20px",
   },
 }));
 

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>
+    </>
+  );
+}

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 { Component_Header } from "@/app_modules/_global/component/new/component_header";
-import UIGlobal_LayoutTamplate from "@/app_modules/_global/ui/ui_layout_tamplate";
+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>
     </>
   );
 }

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"} />

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"} />

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>
+    </>
+  );
+}

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}

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"} />

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"} />

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"} />

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}

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"} />

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"} />

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"} />