diff --git a/src/app/api/new/donasi/route.ts b/src/app/api/new/donasi/route.ts
new file mode 100644
index 00000000..2782e7de
--- /dev/null
+++ b/src/app/api/new/donasi/route.ts
@@ -0,0 +1,75 @@
+import { prisma } from "@/app/lib";
+import { funGetUserIdByToken } from "@/app_modules/_global/fun/get";
+import _ from "lodash";
+import { NextResponse } from "next/server";
+export const dynamic = "force-dynamic";
+
+
+// GET ALL DATA DONASI
+export async function GET(request: Request) {
+   try {
+      let dataFix
+      const { searchParams } = new URL(request.url)
+      const kategori = searchParams.get("cat")
+      const status = searchParams.get("status")
+      const page = searchParams.get("page")
+      const dataSkip = Number(page) * 5 - 5;
+
+      if (kategori == "beranda") {
+         const data = await prisma.donasi.findMany({
+            take: 5,
+            skip: dataSkip,
+            orderBy: {
+               publishTime: "desc",
+            },
+            where: {
+               donasiMaster_StatusDonasiId: "1",
+               active: true,
+            },
+            select: {
+               id: true,
+               imageId: true,
+               title: true,
+               publishTime: true,
+               progres: true,
+               terkumpul: true,
+               DonasiMaster_Durasi: {
+                  select: {
+                     name: true
+                  }
+               },
+
+            }
+         });
+
+         dataFix = data.map((v: any) => ({
+            ..._.omit(v, ["DonasiMaster_Durasi"]),
+            nameDonasiDurasi: v.DonasiMaster_Durasi.name
+         }))
+      } else {
+         const userLoginId = await funGetUserIdByToken()
+         if (userLoginId == null) {
+            return NextResponse.json({ success: false, message: "Gagal mendapatkan data, user id tidak ada" }, { status: 500 });
+         }
+
+         dataFix = await prisma.donasi.findMany({
+            take: 5,
+            skip: dataSkip,
+            where: {
+               authorId: userLoginId,
+               donasiMaster_StatusDonasiId: status,
+            },
+            orderBy: {
+               updatedAt: "desc",
+            },
+         });
+      }
+
+      return NextResponse.json({ success: true, message: "Berhasil mendapatkan data", data: dataFix }, { status: 200 });
+
+   }
+   catch (error) {
+      console.error(error);
+      return NextResponse.json({ success: false, message: "Gagal mendapatkan data, coba lagi nanti ", reason: (error as Error).message, }, { status: 500 });
+   }
+}
\ No newline at end of file
diff --git a/src/app/dev/donasi/main/beranda/page.tsx b/src/app/dev/donasi/main/beranda/page.tsx
index 21e01bd7..08d64509 100644
--- a/src/app/dev/donasi/main/beranda/page.tsx
+++ b/src/app/dev/donasi/main/beranda/page.tsx
@@ -1,8 +1,8 @@
-import { MainDonasi } from "@/app_modules/donasi";
-import { donasi_funGetAllPublish } from "@/app_modules/donasi/fun/get/get_list_beranda";
+import { MainDonasiNew } from "@/app_modules/donasi";
 
 export default async function Page() {
-  const listDonasi = await donasi_funGetAllPublish({ page: 1 });
-  // console.log(listDonasi)
-  return <MainDonasi listDonasi={listDonasi as any} />;
+  // const listDonasi = await donasi_funGetAllPublish({ page: 1 });
+
+  // return <MainDonasi listDonasi={listDonasi as any} />;
+  return <MainDonasiNew />
 }
diff --git a/src/app/dev/donasi/main/galang_dana/[id]/page.tsx b/src/app/dev/donasi/main/galang_dana/[id]/page.tsx
index e663633a..b4ff467c 100644
--- a/src/app/dev/donasi/main/galang_dana/[id]/page.tsx
+++ b/src/app/dev/donasi/main/galang_dana/[id]/page.tsx
@@ -1,4 +1,4 @@
-import { PostingDonasi } from "@/app_modules/donasi";
+import { GalangDanaDonasiNew, PostingDonasi } from "@/app_modules/donasi";
 import { donasi_funGetAllStatusById } from "@/app_modules/donasi/fun";
 import { donasi_funMasterStatusDonasi } from "@/app_modules/donasi/fun/master/get_status_donasi";
 
@@ -18,6 +18,10 @@ export default async function Page({ params }: { params: { id: string } }) {
         dataStatus={dataDonasi}
         listStatus={listStatus}
       />
+
+
+      {/* NANTI AJA LANJUT -- KEJAR TAYANG :) */}
+      {/* <GalangDanaDonasiNew listStatus={listStatus}/> */}
     </>
   );
 }
diff --git a/src/app_modules/donasi/component/card_view/card_publish_new.tsx b/src/app_modules/donasi/component/card_view/card_publish_new.tsx
new file mode 100644
index 00000000..ae9f6cb6
--- /dev/null
+++ b/src/app_modules/donasi/component/card_view/card_publish_new.tsx
@@ -0,0 +1,57 @@
+"use client";
+import { ComponentGlobal_CardLoadingOverlay, ComponentGlobal_CardStyles, ComponentGlobal_LoadImageCustom, } from "@/app_modules/_global/component";
+import { Grid, Progress, Stack, Text } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import ComponentDonasi_TampilanHitungMundur from "../tampilan_hitung_mundur";
+import TampilanRupiahDonasi from "../tampilan_rupiah";
+
+export default function ComponentDonasi_CardPublishNew({ data, path, }: { data: any; path: string; }) {
+  const router = useRouter();
+  const [visible, setVisible] = useState(false);
+  const [donasiId, setDonasiId] = useState("");
+
+  return (
+    <>
+      <ComponentGlobal_CardStyles
+        onClickHandler={() => {
+          setVisible(true);
+          setDonasiId(data.id);
+          router.push(path + `${data.id}`);
+        }}
+      >
+        <Stack>
+          <Grid>
+            <Grid.Col span={6}>
+              <ComponentGlobal_LoadImageCustom
+                fileId={data.imageId}
+                height={150}
+              />
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Stack spacing={"xs"}>
+                <Stack spacing={0}>
+                  <Text fz={"sm"} fw={"bold"} lineClamp={2}>
+                    {data.title}
+                  </Text>
+                  <ComponentDonasi_TampilanHitungMundur
+                    durasi={data?.nameDonasiDurasi}
+                    publishTime={data.publishTime}
+                    textSize={10}
+                  />
+                </Stack>
+                <Progress value={+data.progres} color="yellow" />
+                <Stack spacing={0}>
+                  <Text fz={"sm"}>Terkumpul</Text>
+                  <Text fz={"sm"} fw={"bold"} c={"orange"} truncate>
+                    <TampilanRupiahDonasi nominal={+data.terkumpul} />
+                  </Text>
+                </Stack>
+              </Stack>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </ComponentGlobal_CardStyles>
+    </>
+  );
+}
diff --git a/src/app_modules/donasi/component/skeleton_donasi.tsx b/src/app_modules/donasi/component/skeleton_donasi.tsx
new file mode 100644
index 00000000..7c27f924
--- /dev/null
+++ b/src/app_modules/donasi/component/skeleton_donasi.tsx
@@ -0,0 +1,31 @@
+import { ComponentGlobal_CardStyles } from "@/app_modules/_global/component";
+import { Box, Grid, Group, Skeleton, Stack } from "@mantine/core";
+
+export default function SkeletonDonasi() {
+   return <>
+      <Box>
+         {[...Array(3)].map((_, index) => (
+            <ComponentGlobal_CardStyles key={index}>
+               <Grid>
+                  <Grid.Col span={6}>
+                     <Skeleton w={"100%"} height={100} radius="md" />
+                  </Grid.Col>
+                  <Grid.Col span={6}>
+                     <Box>
+                        {[...Array(4)].map((_, index) => (
+                           <Box key={index} py={5}>
+                              <Grid align="center">
+                                 <Grid.Col span={12}>
+                                    <Skeleton w={"100%"} h={15} />
+                                 </Grid.Col>
+                              </Grid>
+                           </Box>
+                        ))}
+                     </Box>
+                  </Grid.Col>
+               </Grid>
+            </ComponentGlobal_CardStyles>
+         ))}
+      </Box >
+   </>;
+}
\ No newline at end of file
diff --git a/src/app_modules/donasi/index.ts b/src/app_modules/donasi/index.ts
index e0c0ec64..62da8ec0 100644
--- a/src/app_modules/donasi/index.ts
+++ b/src/app_modules/donasi/index.ts
@@ -1,6 +1,8 @@
 import MainDonasi from "./main/beranda";
+import MainDonasiNew from "./main/beranda_new";
 import LayoutDonasi from "./main/layout";
 import GalangDanaDonasi from "./main/galang_dana/ui_galang_dana";
+import GalangDanaDonasiNew from "./main/galang_dana/ui_galang_dana_new";
 import DonasiSayaDonasi from "./main/donasi_saya";
 import CreateDonasi from "./create/create_donasi";
 import LayoutCreateDonasi from "./create/layout";
@@ -99,4 +101,6 @@ export {
   LayoutDonasi_CreateKabar,
   Donasi_EditRekening,
   LayoutDonasi_EditRekening,
+  MainDonasiNew,
+  GalangDanaDonasiNew,
 };
diff --git a/src/app_modules/donasi/lib/api_donasi.ts b/src/app_modules/donasi/lib/api_donasi.ts
new file mode 100644
index 00000000..36e2f5f6
--- /dev/null
+++ b/src/app_modules/donasi/lib/api_donasi.ts
@@ -0,0 +1,4 @@
+export const apiGetAllDonasi = async (path?: string) => {
+   const response = await fetch(`/api/new/donasi${(path) ? path : ''}`)
+   return await response.json().catch(() => null)
+}
\ No newline at end of file
diff --git a/src/app_modules/donasi/lib/type_donasi.ts b/src/app_modules/donasi/lib/type_donasi.ts
new file mode 100644
index 00000000..fabb23d5
--- /dev/null
+++ b/src/app_modules/donasi/lib/type_donasi.ts
@@ -0,0 +1,9 @@
+export interface IDataAllDonasi {
+   id: string
+   imageId: string
+   title: string
+   publishTime: Date
+   progres: string
+   terkumpul: string
+   nameDonasiDurasi: string
+}
\ No newline at end of file
diff --git a/src/app_modules/donasi/main/beranda_new.tsx b/src/app_modules/donasi/main/beranda_new.tsx
new file mode 100644
index 00000000..87f9a696
--- /dev/null
+++ b/src/app_modules/donasi/main/beranda_new.tsx
@@ -0,0 +1,135 @@
+"use client";
+import { gs_donasiTriggerBeranda } from "@/app/lib/global_state";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { AccentColor } from "@/app_modules/_global/color";
+import ComponentGlobal_CreateButton from "@/app_modules/_global/component/button_create";
+import ComponentGlobal_IsEmptyData from "@/app_modules/_global/component/is_empty_data";
+import ComponentGlobal_Loader from "@/app_modules/_global/component/loader";
+import { Affix, Box, Button, Center, rem } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useAtom } from "jotai";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useState } from "react";
+import ComponentDonasi_CardPublishNew from "../component/card_view/card_publish_new";
+import SkeletonDonasi from "../component/skeleton_donasi";
+import { apiGetAllDonasi } from "../lib/api_donasi";
+import { IDataAllDonasi } from "../lib/type_donasi";
+
+export default function MainDonasiNew() {
+   const [data, setData] = useState<IDataAllDonasi[]>([]);
+   const [activePage, setActivePage] = useState(1);
+   const [loading, setLoading] = useState(true)
+
+   // Realtime
+   const [isTriggerDonasiBeranda, setIsTriggerDonasiBeranda] = useAtom(
+      gs_donasiTriggerBeranda
+   );
+   const [isShowUpdate, setIsShowUpdate] = useState(false);
+   const [isLoading, setIsLoading] = useState(false);
+
+   useShallowEffect(() => {
+      if (isTriggerDonasiBeranda) {
+         setIsShowUpdate(true);
+      }
+   }, [isTriggerDonasiBeranda, setIsShowUpdate]);
+
+   async function onLoadData({ onPublish }: { onPublish: (val: any) => void }) {
+      setIsLoading(true);
+      const loadData = await apiGetAllDonasi(`?cat=beranda&page=1`)
+      onPublish(loadData);
+
+      setIsShowUpdate(false);
+      setIsTriggerDonasiBeranda(false);
+      setIsLoading(false);
+   }
+
+
+   async function getDataDonasi() {
+      try {
+         setLoading(true)
+         const response = await apiGetAllDonasi(`?cat=beranda&page=1`)
+         if (response.success) {
+            setData(response.data);
+         }
+      } catch (error) {
+         console.error(error);
+      } finally {
+         setLoading(false)
+      }
+   }
+
+
+   useShallowEffect(() => {
+      getDataDonasi()
+   }, []);
+
+   return (
+      <>
+         <Box>
+            {isShowUpdate && (
+               <Affix position={{ top: rem(100) }} w={"100%"}>
+                  <Center>
+                     <Button
+                        style={{
+                           transition: "0.5s",
+                           border: `1px solid ${AccentColor.skyblue}`,
+                        }}
+                        bg={AccentColor.blue}
+                        loaderPosition="center"
+                        loading={isLoading}
+                        radius={"xl"}
+                        opacity={0.8}
+                        onClick={() => {
+                           onLoadData({
+                              onPublish(val) {
+                                 setData(val);
+                              },
+                           });
+                        }}
+                     >
+                        Update beranda
+                     </Button>
+                  </Center>
+               </Affix>
+            )}
+
+            <ComponentGlobal_CreateButton path={RouterDonasi.create_donasi} />
+            {
+               loading
+                  ? <SkeletonDonasi />
+                  :
+                  _.isEmpty(data) ? (
+                     <ComponentGlobal_IsEmptyData />
+                  ) : (
+                     <ScrollOnly
+                        height="82vh"
+                        renderLoading={() => (
+                           <Center>
+                              <ComponentGlobal_Loader size={25} />
+                           </Center>
+                        )}
+                        data={data}
+                        setData={setData}
+                        moreData={async () => {
+                           const pageNew = activePage + 1
+                           const loadData = await apiGetAllDonasi(`?cat=beranda&page=${pageNew}`)
+
+                           setActivePage((val) => val + 1);
+
+                           return loadData;
+                        }}
+                     >
+                        {(item) => (
+                           <ComponentDonasi_CardPublishNew
+                              data={item as any}
+                              path={RouterDonasi.detail_main}
+                           />
+                        )}
+                     </ScrollOnly>
+                  )
+            }
+         </Box>
+      </>
+   );
+}
diff --git a/src/app_modules/donasi/main/galang_dana/ui_galang_dana_new.tsx b/src/app_modules/donasi/main/galang_dana/ui_galang_dana_new.tsx
new file mode 100644
index 00000000..dea0613a
--- /dev/null
+++ b/src/app_modules/donasi/main/galang_dana/ui_galang_dana_new.tsx
@@ -0,0 +1,69 @@
+"use client";
+import { RouterDonasi } from "@/app/lib/router_hipmi/router_donasi";
+import { AccentColor, MainColor, } from "@/app_modules/_global/color/color_pallet";
+import { MODEL_NEW_DEFAULT_MASTER } from "@/app_modules/model_global/interface";
+import { Stack, Tabs } from "@mantine/core";
+import { useParams, useRouter } from "next/navigation";
+
+export default function GalangDanaDonasiNew({listStatus,}: {listStatus: MODEL_NEW_DEFAULT_MASTER[]; }) {
+  const router = useRouter();
+  const param = useParams<{ id: string }>();
+
+  async function onChangeStatus({ statusId }: { statusId: string }) {
+    router.replace(RouterDonasi.status_galang_dana({ id: statusId }));
+  }
+
+  return (
+    <>
+      <Tabs
+        color="orange"
+        variant="pills"
+        radius="xl"
+        value={param.id}
+        onTabChange={(val: any) => {
+          onChangeStatus({ statusId: val });
+        }}
+        styles={{
+          tabsList: {
+            backgroundColor: MainColor.darkblue,
+            position: "sticky",
+            top: 0,
+            zIndex: 99,
+          },
+        }}
+      >
+        <Stack>
+          <Tabs.List grow>
+            {listStatus.map((e, i) => (
+              <Tabs.Tab
+                key={e.id}
+                value={e.id}
+                fw={"bold"}
+                c={"black"}
+                style={{
+                  transition: "0.5s",
+                  backgroundColor:
+                    param.id === e.id ? MainColor.yellow : "white",
+                  border:
+                    param.id === e.id
+                      ? `1px solid ${AccentColor.yellow}`
+                      : `1px solid white`,
+                }}
+              >
+                {e.name}
+              </Tabs.Tab>
+            ))}
+          </Tabs.List>
+
+          {/* {param.id == "1" && <PostingPublishDonasi listPublish={dataStatus} />}
+
+          {param.id == "2" && <PostingReviewDonasi listReview={dataStatus} />}
+
+          {param.id == "3" && <PostingDraftDonasi listDraft={dataStatus} />}
+
+          {param.id == "4" && <PostingRejectDonasi listReject={dataStatus} />} */}
+        </Stack>
+      </Tabs>
+    </>
+  );
+}
diff --git a/src/app_modules/katalog/portofolio/component/card_view_daftar.tsx b/src/app_modules/katalog/portofolio/component/card_view_daftar.tsx
index 671b0ee6..4335c846 100644
--- a/src/app_modules/katalog/portofolio/component/card_view_daftar.tsx
+++ b/src/app_modules/katalog/portofolio/component/card_view_daftar.tsx
@@ -43,11 +43,16 @@ export function ComponentPortofolio_DaftarBoxView({
           </Stack>
 
           <Stack>
-            {isLoading ? (
+            {/* PAKE LOADING */}
+            {/* {isLoading ? (
               <ComponentGlobal_Loader />
             ) : (
               <IconCaretRight color="white" size={25} />
-            )}
+            )} */}
+
+
+            {/* GA PAKE LOADING */}
+            <IconCaretRight color="white" size={25} />
           </Stack>
         </Group>
       </Paper>
diff --git a/src/app_modules/user_search/component/ui_user_search.tsx b/src/app_modules/user_search/component/ui_user_search.tsx
index cdefcc7c..56b3c28c 100644
--- a/src/app_modules/user_search/component/ui_user_search.tsx
+++ b/src/app_modules/user_search/component/ui_user_search.tsx
@@ -115,11 +115,15 @@ function CardView({ data }: { data: MODEL_USER }) {
           <Group position="right" align="center" h={"100%"}>
             <Center>
               <ActionIcon variant="transparent">
-                {loading ? (
+                {/* PAKE LOADING */}
+                {/* {loading ? (
                   <ComponentGlobal_Loader />
                 ) : (
                   <IconChevronRight color="white" />
-                )}
+                )} */}
+
+                {/* GA PAKE LOADING */}
+                <IconChevronRight color="white" />
               </ActionIcon>
             </Center>
           </Group>