From d5d17f2b7516a524dcd04b8360ddf5b815023c70 Mon Sep 17 00:00:00 2001
From: Bagasbanuna02 <bagasbanuna02@gmail.com>
Date: Tue, 18 Mar 2025 12:03:55 +0800
Subject: [PATCH] fix layout donasi: - fix detail status galang dana - fix
 detail donasi saya

---
 .../_global/ui/ui_header_tamplate.tsx         |   2 +-
 .../_global/ui/ui_image_preview.tsx           |   2 +-
 .../_global/ui/ui_new_image_preview.tsx       | 187 ++++++++++++++++++
 .../detail/detail_donasi_saya/layout.tsx      |  50 +++--
 .../donasi/detail/detail_draft/layout.tsx     |  23 ++-
 .../donasi/detail/detail_reject/layout.tsx    |  18 +-
 .../donasi/detail/detail_review/layout.tsx    |  23 ++-
 .../edit/edit_cerita_penggalang/layout.tsx    |  22 ++-
 .../donasi/edit/edit_donasi/layout.tsx        |  20 +-
 9 files changed, 312 insertions(+), 35 deletions(-)
 create mode 100644 src/app_modules/_global/ui/ui_new_image_preview.tsx

diff --git a/src/app_modules/_global/ui/ui_header_tamplate.tsx b/src/app_modules/_global/ui/ui_header_tamplate.tsx
index 36c6fc23..ef2e4fd2 100644
--- a/src/app_modules/_global/ui/ui_header_tamplate.tsx
+++ b/src/app_modules/_global/ui/ui_header_tamplate.tsx
@@ -50,7 +50,7 @@ export default function UIGlobal_LayoutHeaderTamplate({
       <Box
         h={"8vh"}
         style={{
-          borderBottom: `1px solid ${AccentColor.blue}`,
+          borderBottom: `2px solid ${AccentColor.blue}`,
           borderBottomLeftRadius: "10px",
           borderBottomRightRadius: "10px",
         }}
diff --git a/src/app_modules/_global/ui/ui_image_preview.tsx b/src/app_modules/_global/ui/ui_image_preview.tsx
index 5e09762a..d867ebed 100644
--- a/src/app_modules/_global/ui/ui_image_preview.tsx
+++ b/src/app_modules/_global/ui/ui_image_preview.tsx
@@ -80,7 +80,7 @@ export function UIGlobal_ImagePreview({ fileId }: { fileId: string }) {
             }
           />
 
-          <Box style={{ zIndex: 0 }} h={"90vh"} pos={"static"} px={"lg"}>
+          <Box style={{ zIndex: 0 }} h={"90vh"} pos={"static"} px={"lg"} pt={"sm"}>
             {isImage === null ? (
               <Skeleton height={200} radius={"sm"} />
             ) : isImage ? (
diff --git a/src/app_modules/_global/ui/ui_new_image_preview.tsx b/src/app_modules/_global/ui/ui_new_image_preview.tsx
new file mode 100644
index 00000000..11bb080b
--- /dev/null
+++ b/src/app_modules/_global/ui/ui_new_image_preview.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { APIs } from "@/lib";
+import { pathAssetImage } from "@/lib/path_asset_image";
+import {
+  ActionIcon,
+  Box,
+  Center,
+  Container,
+  Image,
+  rem,
+  ScrollArea,
+  Skeleton,
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconX } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { MainColor } from "../color";
+import ComponentGlobal_Loader from "../component/loader";
+import UIGlobal_LayoutHeaderTamplate from "./ui_header_tamplate";
+import { UIHeader } from "./ui_layout_tamplate";
+import { Component_Header } from "../component/new/component_header";
+import UI_NewLayoutTamplate, { UI_NewHeader, UI_NewChildren } from "./V2_layout_tamplate";
+
+export function UIGlobal_NewImagePreview({ fileId }: { fileId: string }) {
+  const router = useRouter();
+  const [isImage, setIsImage] = useState<boolean | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const url = APIs.GET({ fileId: fileId, size: "500" });
+
+  useShallowEffect(() => {
+    onLoadImage();
+  }, []);
+
+  async function onLoadImage() {
+    const res = await fetch(url);
+    try {
+      if (res.ok) {
+        return setIsImage(true);
+      }
+      setIsImage(false);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return (
+    <>
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header
+            title="Preview Image"
+            hideButtonLeft
+            customButtonRight={
+              <ActionIcon
+                onClick={() => {
+                  router.back(), setIsLoading(true);
+                }}
+                variant="transparent"
+              >
+                {isLoading ? (
+                  <ComponentGlobal_Loader />
+                ) : (
+                  <IconX color={MainColor.yellow} />
+                )}
+              </ActionIcon>
+            }
+          />
+        </UI_NewHeader>
+        <UI_NewChildren>
+          <Box
+            style={{ zIndex: 0 }}
+            h={"90vh"}
+            pos={"static"}
+            px={"lg"}
+          >
+            {isImage === null ? (
+              <Skeleton height={200} radius={"sm"} />
+            ) : isImage ? (
+              <ScrollArea h={"100%"}>
+                <Center>
+                  <Image alt="Image" src={url} maw={500} miw={200} />
+                </Center>
+              </ScrollArea>
+            ) : (
+              <Box
+                bg={"gray"}
+                style={{
+                  borderColor: "white",
+                  borderStyle: "solid",
+                  borderWidth: "0.5px",
+                  borderRadius: "5px",
+                  height: 300,
+                }}
+              >
+                <Center h={"100%"}>
+                  <Image
+                    alt="Image"
+                    height={100}
+                    width={100}
+                    src={pathAssetImage.no_image}
+                  />
+                </Center>
+              </Box>
+            )}
+          </Box>
+        </UI_NewChildren>
+      </UI_NewLayoutTamplate>
+
+      {/* <Box
+        w={"100%"}
+        h={"100%"}
+        style={{
+          overflowY: "auto",
+          overflowX: "auto",
+          backgroundColor: MainColor.black,
+          position: "fixed",
+        }}
+      >
+        <Container mih={"100vh"} p={0} size={rem(500)} bg={MainColor.darkblue}>
+          <UIHeader
+            header={
+              <UIGlobal_LayoutHeaderTamplate
+                title="Preview Image"
+                hideButtonLeft
+                customButtonRight={
+                  <ActionIcon
+                    onClick={() => {
+                      router.back(), setIsLoading(true);
+                    }}
+                    variant="transparent"
+                  >
+                    {isLoading ? (
+                      <ComponentGlobal_Loader />
+                    ) : (
+                      <IconX color={MainColor.yellow} />
+                    )}
+                  </ActionIcon>
+                }
+              />
+            }
+          />
+
+          <Box
+            style={{ zIndex: 0 }}
+            h={"90vh"}
+            pos={"static"}
+            px={"lg"}
+            pt={"sm"}
+          >
+            {isImage === null ? (
+              <Skeleton height={200} radius={"sm"} />
+            ) : isImage ? (
+              <ScrollArea h={"100%"}>
+                <Center>
+                  <Image alt="Image" src={url} maw={500} miw={200} />
+                </Center>
+              </ScrollArea>
+            ) : (
+              <Box
+                bg={"gray"}
+                style={{
+                  borderColor: "white",
+                  borderStyle: "solid",
+                  borderWidth: "0.5px",
+                  borderRadius: "5px",
+                  height: 300,
+                }}
+              >
+                <Center h={"100%"}>
+                  <Image
+                    alt="Image"
+                    height={100}
+                    width={100}
+                    src={pathAssetImage.no_image}
+                  />
+                </Center>
+              </Box>
+            )}
+          </Box>
+        </Container>
+      </Box> */}
+    </>
+  );
+}
diff --git a/src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx b/src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx
index 3f86e6b8..c9ce241c 100644
--- a/src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_donasi_saya/layout.tsx
@@ -1,16 +1,40 @@
-"use client"
+"use client";
 
-import { RouterDonasi } from "@/lib/router_hipmi/router_donasi"
-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 { 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 { RouterDonasi } from "@/lib/router_hipmi/router_donasi";
+import React from "react";
 
-export default function LayoutDetailDonasiSaya({children}: {children: React.ReactNode}){
-    return<>
-    <UIGlobal_LayoutTamplate
-    header={<UIGlobal_LayoutHeaderTamplate title="Detail Donasi Saya" routerLeft={RouterDonasi.main_donasi_saya} />}
-    >
-        {children}
-    </UIGlobal_LayoutTamplate>
+export default function LayoutDetailDonasiSaya({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      {/* <UIGlobal_LayoutTamplate
+          header={
+            <UIGlobal_LayoutHeaderTamplate
+              title="Detail Donasi Saya"
+              routerLeft={RouterDonasi.main_donasi_saya}
+            />
+          }
+        >
+          {children}
+        </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header
+            title="Detail Donasi Saya"
+            routerLeft={RouterDonasi.main_donasi_saya}
+          />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
-}
\ No newline at end of file
+  );
+}
diff --git a/src/app_modules/donasi/detail/detail_draft/layout.tsx b/src/app_modules/donasi/detail/detail_draft/layout.tsx
index 1cdd8e18..49bce7da 100644
--- a/src/app_modules/donasi/detail/detail_draft/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_draft/layout.tsx
@@ -13,6 +13,8 @@ import {
 } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
+import { Component_Header } from "@/app_modules/_global/component/new/component_header";
+import UI_NewLayoutTamplate, { UI_NewHeader, UI_NewChildren } from "@/app_modules/_global/ui/V2_layout_tamplate";
 
 export default function LayoutDetailDraftDonasi({
   children,
@@ -50,7 +52,7 @@ export default function LayoutDetailDraftDonasi({
 
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={
           <UIGlobal_LayoutHeaderTamplate
             title="Detail Draft"
@@ -66,7 +68,24 @@ export default function LayoutDetailDraftDonasi({
         }
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header
+            title="Detail Draft"
+            customButtonRight={
+              <ActionIcon
+                variant="transparent"
+                onClick={() => setOpenDrawer(true)}
+              >
+                <IconDotsVertical color="white" />
+              </ActionIcon>
+            }
+          />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
 
       <UIGlobal_Drawer
         opened={openDrawer}
diff --git a/src/app_modules/donasi/detail/detail_reject/layout.tsx b/src/app_modules/donasi/detail/detail_reject/layout.tsx
index cb5dc695..25560032 100644
--- a/src/app_modules/donasi/detail/detail_reject/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_reject/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 LayoutDetailRejectDonasi({
@@ -11,11 +14,18 @@ export default function LayoutDetailRejectDonasi({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate
+      {/* <UIGlobal_LayoutTamplate
         header={<UIGlobal_LayoutHeaderTamplate title="Detail Reject" />}
       >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Detail Reject" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/donasi/detail/detail_review/layout.tsx b/src/app_modules/donasi/detail/detail_review/layout.tsx
index 0b9caa13..52954732 100644
--- a/src/app_modules/donasi/detail/detail_review/layout.tsx
+++ b/src/app_modules/donasi/detail/detail_review/layout.tsx
@@ -1,20 +1,31 @@
 "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 LayoutDetailReviewDonasi({
+export default function LayoutDetailReviewDonasi({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  
   return (
     <>
-      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Detail Review"  />}>
+      {/* <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Detail Review" />}
+      >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Detail Review" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/donasi/edit/edit_cerita_penggalang/layout.tsx b/src/app_modules/donasi/edit/edit_cerita_penggalang/layout.tsx
index bee2d3fd..1d8beb7f 100644
--- a/src/app_modules/donasi/edit/edit_cerita_penggalang/layout.tsx
+++ b/src/app_modules/donasi/edit/edit_cerita_penggalang/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 LayoutEditCeritaPenggalangDonasi({
@@ -11,9 +14,20 @@ export default function LayoutEditCeritaPenggalangDonasi({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Update Cerita Penggalang" />}>
+      {/* <UIGlobal_LayoutTamplate
+        header={
+          <UIGlobal_LayoutHeaderTamplate title="Update Cerita Penggalang" />
+        }
+      >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Update Cerita Penggalang" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }
diff --git a/src/app_modules/donasi/edit/edit_donasi/layout.tsx b/src/app_modules/donasi/edit/edit_donasi/layout.tsx
index 788dc93c..fe973c72 100644
--- a/src/app_modules/donasi/edit/edit_donasi/layout.tsx
+++ b/src/app_modules/donasi/edit/edit_donasi/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 LayoutEditDonasi({
@@ -11,9 +14,18 @@ export default function LayoutEditDonasi({
 }) {
   return (
     <>
-      <UIGlobal_LayoutTamplate header={<UIGlobal_LayoutHeaderTamplate title="Edit Donasi" />}>
+      {/* <UIGlobal_LayoutTamplate
+        header={<UIGlobal_LayoutHeaderTamplate title="Edit Donasi" />}
+      >
         {children}
-      </UIGlobal_LayoutTamplate>
+      </UIGlobal_LayoutTamplate> */}
+
+      <UI_NewLayoutTamplate>
+        <UI_NewHeader>
+          <Component_Header title="Edit Donasi" />
+        </UI_NewHeader>
+        <UI_NewChildren>{children}</UI_NewChildren>
+      </UI_NewLayoutTamplate>
     </>
   );
 }