fix ui tamplate

2025-03-12 11:30:17 +08:00
parent 509b26894c
commit fca06c707d
19 changed files with 949 additions and 347 deletions
--- a/src/app_modules/_global/component/button_create.tsx
+++ b/src/app_modules/_global/component/button_create.tsx
@@ -5,49 +5,62 @@ import {
  AccentColor,
  MainColor,
 } from "@/app_modules/_global/color/color_pallet";
-import { ActionIcon, Loader } from "@mantine/core";
+import { ActionIcon, createStyles, Loader } from "@mantine/core";
 import { IconPencilPlus } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";

+const useStyles = createStyles((theme) => ({
+  button: {
+    position: "fixed", // Menggunakan fixed untuk memastikan posisi tetap
+    zIndex: 10, // Pastikan z-index tinggi
+    bottom: "150px", // Jarak dari bawah
+    right: "20px", // Jarak dari kanan
+    transition: "0.5s",
+    border: `1px solid ${AccentColor.skyblue}`,
+    backgroundColor: AccentColor.softblue,
+    padding: 3,
+    // maxWidth: "500px", // Batasi lebar maksimum
+    // margin: "0 auto", // Pusatkan layout
+    borderRadius: "50%",
+
+    // Media query untuk desktop
+    [`@media (min-width: 769px)`]: {
+      right: "calc(50% - 250px + 20px)", // Sesuaikan dengan lebar container (500px)
+    },
+  },
+}));
+
 export default function ComponentGlobal_CreateButton({
  path,
 }: {
  path: string;
 }) {
  const router = useRouter();
+  const { classes, cx } = useStyles();
  const [isLoading, setLoading] = useState(false);

  return (
    <>
      <ActionIcon
-        // bg={"blue"}
-        // variant="light"
-        radius={"xl"}
+        className={classes.button}
        size={"xl"}
-        style={{
-          position: "absolute",
-          zIndex: 1,
-          bottom: 100,
-          right: 30,
-          transition: "0.5s",
-          border: `1px solid ${AccentColor.skyblue}`,
-          backgroundColor: AccentColor.softblue,
-          padding: 3,
-        }}
+        // radius={"xl"}
+        // size={"xl"}
+        // style={{
+        //   position: "fixed", // Menggunakan fixed untuk memastikan posisi tetap
+        //   zIndex: 1000, // Pastikan z-index tinggi
+        //   bottom: "20px", // Jarak dari bawah
+        //   right: "20px", // Jarak dari kanan
+        //   transition: "0.5s",
+        //   border: `1px solid ${AccentColor.skyblue}`,
+        //   backgroundColor: AccentColor.softblue,
+        //   padding: 3,
+        // }}
        onClick={() => {
-          setLoading(true);
          router.push(path);
        }}
      >
-        {/* PAKE LOADING */}
-        {/* {isLoading ? (
-          <Loader color={AccentColor.blue} size={25} />
-        ) : (
-          <IconPencilPlus color="white" />
-        )} */}
-
-        {/* GA PAKE LOADING */}
        <IconPencilPlus color={MainColor.white} />
      </ActionIcon>
    </>
--- a/src/app_modules/_global/component/new/component_header.tsx
+++ b/src/app_modules/_global/component/new/component_header.tsx
@@ -0,0 +1,105 @@
+import { ActionIcon, Box, Group, Title, Loader } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { IconChevronLeft } from "@tabler/icons-react";
+import { AccentColor, MainColor } from "../../color";
+
+export function Component_Header({
+  title,
+  posotion,
+  // left button
+  hideButtonLeft,
+  iconLeft,
+  routerLeft,
+  customButtonLeft,
+  // right button
+  iconRight,
+  routerRight,
+  customButtonRight,
+  backgroundColor,
+}: {
+  title: string;
+  posotion?: any;
+  // left button
+  hideButtonLeft?: boolean;
+  iconLeft?: any;
+  routerLeft?: any;
+  customButtonLeft?: React.ReactNode;
+  // right button
+  iconRight?: any;
+  routerRight?: any;
+  customButtonRight?: React.ReactNode;
+  backgroundColor?: string;
+}) {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRightLoading, setRightLoading] = useState(false);
+
+  return (
+    <>
+      <Group
+        w={"100%"}
+        h={"100%"}
+        position={posotion ? posotion : "apart"}
+        px={"md"}
+      >
+        {hideButtonLeft ? (
+          <ActionIcon disabled variant="transparent"></ActionIcon>
+        ) : customButtonLeft ? (
+          customButtonLeft
+        ) : (
+          <ActionIcon
+            c={MainColor.white}
+            variant="transparent"
+            radius={"xl"}
+            onClick={() => {
+              setIsLoading(true);
+              routerLeft === undefined
+                ? router.back()
+                : router.push(routerLeft, { scroll: false });
+            }}
+          >
+            {/* PAKE LOADING SAAT KLIK BACK */}
+            {/* {isLoading ? (
+                       <Loader color={AccentColor.yellow} size={20} />
+                     ) : iconLeft ? (
+                       iconLeft
+                     ) : (
+                       <IconChevronLeft />
+                     )} */}
+
+            {/* GA PAKE LOADING SAAT KLIK BACK */}
+            {iconLeft ? iconLeft : <IconChevronLeft />}
+          </ActionIcon>
+        )}
+
+        <Title order={5} c={MainColor.yellow}>
+          {title}
+        </Title>
+
+        {customButtonRight ? (
+          customButtonRight
+        ) : iconRight === undefined ? (
+          <ActionIcon disabled variant="transparent"></ActionIcon>
+        ) : routerRight === undefined ? (
+          <Box>{iconRight}</Box>
+        ) : (
+          <ActionIcon
+            c={"white"}
+            variant="transparent"
+            onClick={() => {
+              setRightLoading(true);
+              router.push(routerRight);
+            }}
+          >
+            {isRightLoading ? (
+              <Loader color={AccentColor.yellow} size={20} />
+            ) : (
+              iconRight
+            )}
+          </ActionIcon>
+        )}
+      </Group>
+    </>
+  );
+}
--- a/src/app_modules/_global/component/new/new_button_create.tsx
+++ b/src/app_modules/_global/component/new/new_button_create.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { RouterJob } from "@/lib/router_hipmi/router_job";
+import {
+  AccentColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { ActionIcon, Loader } from "@mantine/core";
+import { IconPencilPlus } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function Component_NewCreateButton({ path }: { path: string }) {
+  const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
+  return (
+    <>
+      <ActionIcon
+        radius={"xl"}
+        size={"xl"}
+        style={{
+          position: "absolute",
+          zIndex: 1,
+          bottom: 100,
+          right: 30,
+          transition: "0.5s",
+          border: `1px solid ${AccentColor.skyblue}`,
+          backgroundColor: AccentColor.softblue,
+          padding: 3,
+          maxWidth: "500px", // Batasi lebar maksimum
+          margin: "0 auto", // Pusatkan layout
+        }}
+        onClick={() => {
+          setLoading(true);
+          router.push(path);
+        }}
+      >
+        {/* PAKE LOADING */}
+        {/* {isLoading ? (
+          <Loader color={AccentColor.blue} size={25} />
+        ) : (
+          <IconPencilPlus color="white" />
+        )} */}
+
+        {/* GA PAKE LOADING */}
+        <IconPencilPlus color={MainColor.white} />
+      </ActionIcon>
+    </>
+  );
+}
--- a/src/app_modules/_global/ui/V2_layout_tamplate.tsx
+++ b/src/app_modules/_global/ui/V2_layout_tamplate.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { AccentColor, MainColor } from "@/app_modules/_global/color";
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Container,
+  Group,
+  Text,
+  Title,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { createStyles } from "@mantine/styles";
+import { IconBell, IconSearch } from "@tabler/icons-react";
+import { ReactNode, useEffect, useState } from "react";
+
+// Styling langsung didefinisikan di dalam komponen
+const useStyles = createStyles((theme) => ({
+  pageContainer: {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "100dvh", // dynamic viewport height untuk mobile
+    width: "100%",
+    maxWidth: "500px", // Batasi lebar maksimum
+    margin: "0 auto", // Pusatkan layout
+    boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)", // Tambahkan shadow untuk efek mobile-like
+    backgroundColor: MainColor.darkblue, // Warna latar belakang fallback
+
+    [`@media (max-width: 768px)`]: {
+      maxWidth: "100%", // Pada layar mobile, gunakan lebar penuh
+      boxShadow: "none", // Hilangkan shadow pada mobile
+    },
+  },
+
+  header: {
+    position: "sticky",
+    top: 0,
+    width: "100%",
+    maxWidth: "500px", // Batasi lebar header sesuai container
+    margin: "0 auto", // Pusatkan header
+    backgroundColor: MainColor.darkblue,
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
+    zIndex: 100, // Pastikan z-index tinggi
+    transition: "all 0.3s ease",
+    color: MainColor.yellow,
+  },
+
+  scrolled: {
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+  },
+
+  headerContainer: {
+    height: "8vh",
+    display: "flex",
+    alignItems: "center",
+    padding: "0 16px", // Padding untuk mobile view
+
+    [`@media (max-width: 768px)`]: {
+      height: "8vh",
+    },
+    borderBottom: `1px solid ${AccentColor.blue}`,
+    borderBottomLeftRadius: "10px",
+    borderBottomRightRadius: "10px",
+  },
+
+  content: {
+    flex: 1,
+    width: "100%",
+    overflowY: "hidden", // Izinkan scrolling pada konten
+    paddingBottom: "8vh", // Sesuaikan dengan tinggi footer
+  },
+
+  footer: {
+    width: "100%",
+    backgroundColor: MainColor.darkblue,
+    borderTop: `1px solid ${AccentColor.blue}`,
+    height: "10vh", // Tinggi footer
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "fixed",
+    bottom: 0,
+    left: "50%", // Pusatkan footer
+    transform: "translateX(-50%)", // Pusatkan footer
+    maxWidth: "500px", // Batasi lebar footer
+    color: MainColor.white,
+    borderTopLeftRadius: "10px",
+    borderTopRightRadius: "10px",
+  },
+}));
+
+interface ClientLayoutProps {
+  children: ReactNode;
+}
+
+export default function UI_NewLayoutTamplate({ children }: ClientLayoutProps) {
+  const { classes } = useStyles();
+
+  return <Box className={classes.pageContainer}>{children}</Box>;
+}
+
+export function UI_NewHeader({ children }: { children: ReactNode }) {
+  const { classes, cx } = useStyles();
+  const [scrolled, setScrolled] = useState<boolean>(false);
+
+  // Effect untuk mendeteksi scroll
+  useEffect(() => {
+    function handleScroll() {
+      if (window.scrollY > 10) {
+        setScrolled(true);
+      } else {
+        setScrolled(false);
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <Box
+      className={cx(classes.header, { [classes.scrolled]: scrolled })}
+      component="header"
+    >
+      <Container size="xl" className={classes.headerContainer}>
+        {children}
+      </Container>
+    </Box>
+  );
+}
+
+export function UI_NewChildren({ children }: { children: ReactNode }) {
+  const { classes } = useStyles();
+  return (
+    <Box className={classes.content}>
+      <Container size="xl" py="md">
+        {children}
+      </Container>
+    </Box>
+  );
+}
+
+export function UI_NewFooter({ children }: { children: ReactNode }) {
+  const { classes } = useStyles();
+  return (
+    <Box className={classes.footer} component="footer">
+      {children}
+    </Box>
+  );
+}
--- a/src/app_modules/_global/ui/new_ui_content.tsx
+++ b/src/app_modules/_global/ui/new_ui_content.tsx
@@ -11,7 +11,6 @@ export function NewUI_Content({
    <>
      <Box
        style={{
-          position: "fixed",
          top: "8vh", // Mulai di bawah header
          bottom: "10vh", // Berakhir di atas footer
          left: 0,
--- a/src/app_modules/_global/ui/new_ui_tamplate.tsx
+++ b/src/app_modules/_global/ui/new_ui_tamplate.tsx
@@ -8,7 +8,7 @@ export function NewUI_Tamplate({ children }: { children: React.ReactNode }) {
    <Box
      style={{
        width: "100%",
-        height: "100vh",
+        minHeight: "100dvh",
        overflow: "hidden",
        backgroundColor: MainColor.darkblue,
        position: "relative",
--- a/src/app_modules/_global/ui/ui_drawer_custom.tsx
+++ b/src/app_modules/_global/ui/ui_drawer_custom.tsx
@@ -44,6 +44,7 @@ export default function UIGlobal_DrawerCustom({
            left: 0,
            right: 0,
            width: 500,
+            zIndex:10
          },
          body: {
            backgroundColor: AccentColor.darkblue,