Fix UI Admin

User & Image
- app/(application)/(image)/take-picture/[id]/index.tsx
- app/(application)/(user)/home.tsx

Admin – Forum
- app/(application)/admin/forum/[id]/index.tsx
- app/(application)/admin/forum/[id]/list-comment.tsx
- app/(application)/admin/forum/[id]/list-report-comment.tsx

Admin Screens – Forum
- screens/Admin/Forum/ScreenForumDetailReportPosting.tsx
- screens/Admin/Forum/ScreenForumReportComment.tsx
- screens/Admin/Forum/ScreenForumReportPosting.tsx

New Admin Screens – Forum
- screens/Admin/Forum/ScreenForumDetailReportComment.tsx
- screens/Admin/Forum/ScreenForumListComment.tsx

Home
- screens/Home/bottomFeatureSection.tsx

Service
- service/api-admin/api-admin-forum.ts

Docs
- docs/prompt-for-qwen-code.md

### No Issue

screens/Admin/Forum/ScreenForumDetailReportComment.tsx

@@ -0,0 +1,292 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import {
+  ActionIcon,
+  AlertDefaultSystem,
+  DrawerCustom,
+  MenuDrawerDynamicGrid,
+  StackCustom,
+  TextCustom,
+} from "@/components";
+import { IconDot } from "@/components/_Icon/IconComponent";
+import { IconTrash } from "@/components/_Icon/IconTrash";
+import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+import {
+  apiAdminForumCommentById,
+  apiAdminForumDeactivateComment,
+  apiAdminForumListReportCommentById,
+} from "@/service/api-admin/api-admin-forum";
+import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
+import { useCallback, useMemo, useState } from "react";
+import { RefreshControl } from "react-native";
+import Toast from "react-native-toast-message";
+
+export function Admin_ScreenForumDetailReportComment() {
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+  const [openDrawerPage, setOpenDrawerPage] = useState(false);
+  const [openDrawerAction, setOpenDrawerAction] = useState(false);
+  const [data, setData] = useState<any | null>(null);
+  const [selectedReport, setSelectedReport] = useState({
+    id: "",
+    username: "",
+    kategori: "",
+    keterangan: "",
+    deskripsi: "",
+  });
+
+  // Load data komentar saat screen fokus
+  useFocusEffect(
+    useCallback(() => {
+      onLoadDataKomentar();
+    }, [id]),
+  );
+
+  // Pagination untuk list report comment
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      const response = await apiAdminForumListReportCommentById({
+        id: id as string,
+        page: String(page),
+      });
+
+      if (response.success) {
+        return { data: response.data };
+      }
+      return { data: [] };
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [id],
+  });
+
+  const onLoadDataKomentar = async () => {
+    try {
+      const response = await apiAdminForumCommentById({
+        id: id as string,
+        category: "get-one",
+      });
+
+      if (response.success) {
+        setData(response.data);
+      }
+    } catch (error) {
+      console.log("[ERROR]", error);
+    }
+  };
+
+  // Render item untuk daftar report comment
+  const renderItem = useCallback(
+    ({ item, index }: { item: any; index: number }) => (
+      <AdminBasicBox
+        key={index}
+        style={{ marginHorizontal: 5, marginVertical: 5 }}
+        onPress={() => {
+          setOpenDrawerAction(true);
+          setSelectedReport({
+            id: item?.id,
+            username: item?.User?.username,
+            kategori: item?.ForumMaster_KategoriReport?.title,
+            keterangan: item?.ForumMaster_KategoriReport?.deskripsi,
+            deskripsi: item?.deskripsi,
+          });
+        }}
+      >
+        <StackCustom gap={0}>
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Pelapor</TextCustom>}
+            rightItem={
+              <TextCustom truncate={1}>
+                {item?.User?.username || "-"}
+              </TextCustom>
+            }
+          />
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Jenis Laporan</TextCustom>}
+            rightItem={
+              <TextCustom truncate={2}>
+                {item
+                  ? item?.ForumMaster_KategoriReport?.title
+                    ? item?.ForumMaster_KategoriReport?.title
+                    : "Lainnya"
+                  : "-"}
+              </TextCustom>
+            }
+          />
+        </StackCustom>
+      </AdminBasicBox>
+    ),
+    [],
+  );
+
+  // Header component dengan back button dan menu
+  const headerComponent = useMemo(
+    () => (
+      <AdminBackButtonAntTitle
+        title="Report Komentar"
+        rightComponent={
+          <ActionIcon
+            icon={<IconDot size={16} color={MainColor.darkblue} />}
+            onPress={() => setOpenDrawerPage(true)}
+          />
+        }
+      />
+    ),
+    [],
+  );
+
+  // Detail komentar component
+  const ListHeader = useMemo(
+    () => (
+      <AdminBasicBox>
+        <StackCustom gap={"sm"}>
+          <GridSpan_4_8
+            label={<TextCustom bold>Username</TextCustom>}
+            value={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
+          />
+          <GridSpan_4_8
+            label={<TextCustom bold>Komentar</TextCustom>}
+            value={<TextCustom>{data?.komentar || "-"}</TextCustom>}
+          />
+        </StackCustom>
+      </AdminBasicBox>
+    ),
+    [data],
+  );
+
+  // Buat komponen-komponen pagination
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      emptyMessage: "Belum ada report komentar",
+      emptySearchMessage: "Tidak ada hasil pencarian",
+      isInitialLoad: pagination.isInitialLoad,
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
+      skeletonHeight: 100,
+    });
+
+  return (
+    <>
+      <NewWrapper
+        listData={pagination.listData}
+        renderItem={renderItem}
+        headerComponent={headerComponent}
+        ListHeaderComponent={ListHeader}
+        ListEmptyComponent={ListEmptyComponent}
+        ListFooterComponent={ListFooterComponent}
+        onEndReached={pagination.loadMore}
+        refreshControl={
+          <RefreshControl
+            refreshing={pagination.refreshing}
+            onRefresh={pagination.onRefresh}
+            tintColor={MainColor.yellow}
+            colors={[MainColor.yellow]}
+          />
+        }
+      />
+
+      {/* Drawer untuk menu halaman (hapus komentar) */}
+      <DrawerCustom
+        isVisible={openDrawerPage}
+        closeDrawer={() => setOpenDrawerPage(false)}
+        height={"auto"}
+      >
+        <MenuDrawerDynamicGrid
+          data={[
+            {
+              icon: <IconTrash />,
+              label: "Hapus Komentar",
+              value: "delete",
+              path: "",
+              color: MainColor.red,
+            },
+          ]}
+          onPressItem={(item) => {
+            AlertDefaultSystem({
+              title: "Hapus Komentar",
+              message: "Apakah Anda yakin ingin menghapus komentar ini?",
+              textLeft: "Batal",
+              textRight: "Hapus",
+              onPressRight: async () => {
+                const response = await apiAdminForumDeactivateComment({
+                  id: id as string,
+                  data: {
+                    senderId: user?.id as string,
+                  },
+                });
+
+                if (!response.success) {
+                  Toast.show({
+                    type: "error",
+                    text1: "Komentar gagal dihapus",
+                  });
+                  return;
+                }
+
+                setOpenDrawerPage(false);
+                Toast.show({
+                  type: "success",
+                  text1: "Komentar berhasil dihapus",
+                });
+                router.back();
+              },
+            });
+          }}
+        />
+      </DrawerCustom>
+
+      {/* Drawer untuk detail report comment */}
+      <DrawerCustom
+        isVisible={openDrawerAction}
+        closeDrawer={() => setOpenDrawerAction(false)}
+        height={"auto"}
+      >
+        <StackCustom>
+          <GridSpan_4_8
+            label={<TextCustom bold>Pelapor</TextCustom>}
+            value={<TextCustom>{selectedReport?.username || "-"}</TextCustom>}
+          />
+
+          {selectedReport?.kategori && (
+            <>
+              <GridSpan_4_8
+                label={<TextCustom bold>Kategori Report</TextCustom>}
+                value={
+                  <TextCustom>{selectedReport?.kategori || "-"}</TextCustom>
+                }
+              />
+              <GridSpan_4_8
+                label={<TextCustom bold>Keterangan</TextCustom>}
+                value={
+                  <TextCustom>{selectedReport?.keterangan || "-"}</TextCustom>
+                }
+              />
+            </>
+          )}
+
+          {selectedReport?.deskripsi && (
+            <GridSpan_4_8
+              label={<TextCustom bold>Deskripsi</TextCustom>}
+              value={
+                <TextCustom>{selectedReport?.deskripsi || "-"}</TextCustom>
+              }
+            />
+          )}
+        </StackCustom>
+      </DrawerCustom>
+    </>
+  );
+}

screens/Admin/Forum/ScreenForumDetailReportPosting.tsx

@@ -2,39 +2,31 @@
 import {
   ActionIcon,
   AlertDefaultSystem,
-  BadgeCustom,
-  BaseBox,
-  CenterCustom,
   DrawerCustom,
   MenuDrawerDynamicGrid,
   StackCustom,
   TextCustom,
 } from "@/components";
-import { IconDot, IconView } from "@/components/_Icon/IconComponent";
+import { IconDot } from "@/components/_Icon/IconComponent";
 import { IconTrash } from "@/components/_Icon/IconTrash";
+import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
 import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
-import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
 import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
-import { GridSpan_NewComponent } from "@/components/_ShareComponent/GridSpan_NewComponent";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
-import {
-  ICON_SIZE_BUTTON,
-  PAGINATION_DEFAULT_TAKE,
-} from "@/constants/constans-value";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
-import { usePagination } from "@/hooks/use-pagination";
 import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
 import {
   apiAdminForumDeactivatePosting,
   apiAdminForumListReportPostingById,
   apiAdminForumPostingById,
 } from "@/service/api-admin/api-admin-forum";
 import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
-import _ from "lodash";
 import { useCallback, useMemo, useState } from "react";
-import { RefreshControl, View } from "react-native";
-import { Divider } from "react-native-paper";
+import { RefreshControl } from "react-native";
 import Toast from "react-native-toast-message";
 
 export function Admin_ScreenForumDetailReportPosting() {
@@ -55,12 +47,12 @@ export function Admin_ScreenForumDetailReportPosting() {
   useFocusEffect(
     useCallback(() => {
       onLoadDataPosting();
-    }, [id])
+    }, [id]),
   );
 
   // Pagination untuk list report
   const pagination = usePagination({
-    fetchFunction: async (page, searchQuery) => {
+    fetchFunction: async (page) => {
       const response = await apiAdminForumListReportPostingById({
         id: id as string,
         page: String(page),
@@ -91,41 +83,50 @@ export function Admin_ScreenForumDetailReportPosting() {
 
   // Render item untuk daftar report
   const renderItem = useCallback(
-    ({ item }: { item: any }) => (
-      <View>
-        <GridSpan_NewComponent
-          text1={
-            <CenterCustom>
-              <ActionIcon
-                icon={<IconView size={ICON_SIZE_BUTTON} color="black" />}
-                onPress={() => {
-                  setOpenDrawerAction(true);
-                  setSelectedReport({
-                    id: item?.id,
-                    username: item?.User?.username,
-                    kategori: item?.ForumMaster_KategoriReport?.title,
-                    keterangan: item?.ForumMaster_KategoriReport?.deskripsi,
-                    deskripsi: item?.deskripsi,
-                  });
-                }}
-              />
-            </CenterCustom>
-          }
-          text2={
-            <TextCustom truncate>
-              {item?.User?.username || "-"}
-            </TextCustom>
-          }
-          text3={
-            <TextCustom truncate={2}>
-              {item?.ForumMaster_KategoriReport?.title || "-"}
-            </TextCustom>
-          }
-        />
-        <Divider />
-      </View>
+    ({ item, index }: { item: any; index: number }) => (
+      <AdminBasicBox
+        key={index}
+        style={{ marginHorizontal: 5, marginVertical: 5 }}
+        onPress={() => {
+          setOpenDrawerAction(true);
+          setSelectedReport({
+            id: item?.id,
+            username: item?.User?.username,
+            kategori: item?.ForumMaster_KategoriReport?.title,
+            keterangan: item?.ForumMaster_KategoriReport?.deskripsi,
+            deskripsi: item?.deskripsi,
+          });
+        }}
+      >
+        <StackCustom gap={0}>
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Pelapor</TextCustom>}
+            rightItem={
+              <TextCustom truncate={1}>
+                {item?.User?.username || "-"}
+              </TextCustom>
+            }
+          />
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Jenis Laporan</TextCustom>}
+            rightItem={
+              <TextCustom truncate={2}>
+                {item
+                  ? item?.ForumMaster_KategoriReport?.title
+                    ? item?.ForumMaster_KategoriReport?.title
+                    : "Lainnya"
+                  : "-"}
+              </TextCustom>
+            }
+          />
+        </StackCustom>
+      </AdminBasicBox>
     ),
-    []
+    [],
   );
 
   // Header component dengan detail postingan
@@ -141,75 +142,33 @@ export function Admin_ScreenForumDetailReportPosting() {
         }
       />
     ),
-    []
+    [],
   );
 
   // Detail postingan component
-  const postingDetailComponent = useMemo(
+  const ListHeader = useMemo(
     () => (
-      <BaseBox>
-        <StackCustom gap={"sm"}>
-          <GridSpan_NewComponent
-            text1={<TextCustom bold>Username</TextCustom>}
-            text2={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
-          />
-
-          <GridSpan_NewComponent
-            text1={<TextCustom bold>Status</TextCustom>}
-            text2={
-              data && data?.ForumMaster_StatusPosting?.status ? (
-                <BadgeCustom
-                  color={
-                    data?.ForumMaster_StatusPosting?.status === "Open"
-                      ? MainColor.green
-                      : MainColor.red
-                  }
-                >
-                  {data?.ForumMaster_StatusPosting?.status === "Open"
-                    ? "Open"
-                    : "Close"}
-                </BadgeCustom>
-              ) : (
-                <TextCustom>{"-"}</TextCustom>
-              )
+      <AdminBasicBox>
+        <StackCustom gap={0}>
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom bold>Username</TextCustom>}
+            rightItem={
+              <TextCustom>{data ? data?.Author?.username : "-"}</TextCustom>
             }
           />
 
-          <GridSpan_NewComponent
-            text1={<TextCustom bold>Postingan</TextCustom>}
-            text2={<TextCustom>{data?.diskusi || "-"}</TextCustom>}
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom bold>Postingan</TextCustom>}
+            rightItem={<TextCustom>{data ? data?.diskusi : "-"}</TextCustom>}
           />
         </StackCustom>
-      </BaseBox>
+      </AdminBasicBox>
     ),
-    [data]
-  );
-
-  // Box title untuk daftar report
-  const reportListTitleComponent = useMemo(
-    () => <AdminComp_BoxTitle title="Daftar Report Posting" />,
-    []
-  );
-
-  // Header untuk kolom daftar report
-  const reportListHeaderComponent = useMemo(
-    () => (
-      <StackCustom gap={"sm"}>
-        {postingDetailComponent}
-        {reportListTitleComponent}
-        <GridSpan_NewComponent
-          text1={
-            <TextCustom bold align="center">
-              Aksi
-            </TextCustom>
-          }
-          text2={<TextCustom bold>Pelapor</TextCustom>}
-          text3={<TextCustom bold>Kategori Report</TextCustom>}
-        />
-        <Divider />
-      </StackCustom>
-    ),
-    [postingDetailComponent, reportListTitleComponent]
+    [data],
   );
 
   // Buat komponen-komponen pagination
@@ -231,7 +190,7 @@ export function Admin_ScreenForumDetailReportPosting() {
         listData={pagination.listData}
         renderItem={renderItem}
         headerComponent={headerComponent}
-        ListHeaderComponent={reportListHeaderComponent}
+        ListHeaderComponent={ListHeader}
         ListEmptyComponent={ListEmptyComponent}
         ListFooterComponent={ListFooterComponent}
         onEndReached={pagination.loadMore}
@@ -295,7 +254,6 @@ export function Admin_ScreenForumDetailReportPosting() {
         />
       </DrawerCustom>
 
-      {/* Drawer untuk detail report */}
       <DrawerCustom
         isVisible={openDrawerAction}
         closeDrawer={() => setOpenDrawerAction(false)}

screens/Admin/Forum/ScreenForumListComment.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { StackCustom, TextCustom } from "@/components";
+import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
+import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
+import NewWrapper from "@/components/_ShareComponent/NewWrapper";
+import { MainColor } from "@/constants/color-palet";
+import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
+import { createPaginationComponents } from "@/helpers/paginationHelpers";
+import { useAuth } from "@/hooks/use-auth";
+import { usePagination } from "@/hooks/use-pagination";
+import { apiAdminForumCommentById } from "@/service/api-admin/api-admin-forum";
+import { router, useLocalSearchParams } from "expo-router";
+import { useCallback, useMemo, useState } from "react";
+import { RefreshControl } from "react-native";
+import { Divider } from "react-native-paper";
+
+export function Admin_ScreenForumListComment() {
+  const { user } = useAuth();
+  const { id } = useLocalSearchParams();
+  const [openDrawerAction, setOpenDrawerAction] = useState(false);
+  const [selectedComment, setSelectedComment] = useState({
+    id: "",
+    komentar: "",
+  });
+
+  // Pagination untuk list comment
+  const pagination = usePagination({
+    fetchFunction: async (page) => {
+      const response = await apiAdminForumCommentById({
+        id: id as string,
+        category: "get-all",
+        page: String(page),
+      });
+
+      if (response.success) {
+        return { data: response.data };
+      }
+      return { data: [] };
+    },
+    pageSize: PAGINATION_DEFAULT_TAKE,
+    dependencies: [id],
+  });
+
+  // Render item untuk daftar komentar
+  const renderItem = useCallback(
+    ({ item, index }: { item: any; index: number }) => (
+      <AdminBasicBox
+        key={index}
+        style={{ marginHorizontal: 5, marginVertical: 5 }}
+        onPress={() => {
+          router.push(`/admin/forum/${item.id}/list-report-comment`);
+        }}
+      >
+        <StackCustom gap={"md"}>
+          <TextCustom truncate={1}>
+            Report : {item?.countReport || 0}
+          </TextCustom>
+          <Divider />
+          <TextCustom truncate={2}>{item?.komentar || "-"}</TextCustom>
+        </StackCustom>
+      </AdminBasicBox>
+    ),
+    [],
+  );
+
+  // Header component dengan back button
+  const headerComponent = useMemo(
+    () => <AdminBackButtonAntTitle title="Daftar Komentar" />,
+    [],
+  );
+
+  // Buat komponen-komponen pagination
+  const { ListEmptyComponent, ListFooterComponent } =
+    createPaginationComponents({
+      loading: pagination.loading,
+      refreshing: pagination.refreshing,
+      listData: pagination.listData,
+      emptyMessage: "Belum ada komentar",
+      emptySearchMessage: "Tidak ada hasil pencarian",
+      isInitialLoad: pagination.isInitialLoad,
+      skeletonCount: PAGINATION_DEFAULT_TAKE,
+      skeletonHeight: 100,
+    });
+
+  return (
+    <>
+      <NewWrapper
+        listData={pagination.listData}
+        renderItem={renderItem}
+        headerComponent={headerComponent}
+        ListEmptyComponent={ListEmptyComponent}
+        ListFooterComponent={ListFooterComponent}
+        onEndReached={pagination.loadMore}
+        refreshControl={
+          <RefreshControl
+            refreshing={pagination.refreshing}
+            onRefresh={pagination.onRefresh}
+            tintColor={MainColor.yellow}
+            colors={[MainColor.yellow]}
+          />
+        }
+      />
+    </>
+  );
+}

screens/Admin/Forum/ScreenForumReportComment.tsx

@@ -1,16 +1,15 @@
 import { SearchInput, StackCustom, TextCustom } from "@/components";
 import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
 import { apiAdminForum } from "@/service/api-admin/api-admin-forum";
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
 import { useCallback, useMemo, useState } from "react";
 import { RefreshControl } from "react-native";
-import { Divider } from "react-native-paper";
 
 export function Admin_ScreenForumReportComment() {
   const [search, setSearch] = useState("");
@@ -25,7 +24,6 @@ export function Admin_ScreenForumReportComment() {
       });
 
       if (response.success) {
-        console.log("CEK", JSON.stringify(response.data, null, 2));
         return { data: response.data };
       } else {
         return { data: [] };
@@ -36,6 +34,12 @@ export function Admin_ScreenForumReportComment() {
     dependencies: [],
   });
 
+  useFocusEffect(
+    useCallback(() => {
+      pagination.onRefresh();
+    }, []),
+  );
+
   // Komponen search input
   const searchComponent = useMemo(
     () => (
@@ -73,47 +77,27 @@ export function Admin_ScreenForumReportComment() {
         }}
       >
         <StackCustom gap={0}>
-          <GridSpan_4_8
-            label={<TextCustom>Pelapor</TextCustom>}
-            value={
-              <TextCustom truncate={1}>
-                {item?.User?.username || "-"}
+           <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Jumlah Report</TextCustom>}
+            rightItem={
+              <TextCustom truncate={2}>
+                {item?.count || "-"}
               </TextCustom>
             }
           />
-          <GridSpan_4_8
-            label={<TextCustom>Komentar</TextCustom>}
-            value={
-              <TextCustom truncate={2}>
-                {item?.Forum_Komentar?.komentar || "-"}
-              </TextCustom>
-            }
-          />
-          {item?.deskripsi ?
-         <GridSpan_4_8
-            label={<TextCustom>Deskripsi</TextCustom>}
-            value={
-              <TextCustom truncate={2}>
-                {item?.deskripsi|| "-"}
-              </TextCustom>
-            }
-          />   :  <GridSpan_4_8
-            label={<TextCustom>Jenis Laporan</TextCustom>}
-            value={
-              <TextCustom truncate={2}>
-                {item?.ForumMaster_KategoriReport?.title || "-"}
-              </TextCustom>
-            }
-          />
-        }
-          {/* <GridSpan_4_8
-            label={<TextCustom>Jenis Laporan</TextCustom>}
-            value={
-              <TextCustom truncate={2}>
-                {item?.ForumMaster_KategoriReport?.title || "-"}
-              </TextCustom>
-            }
-          /> */}
+
+            <GridTwoView
+              spanLeft={5}
+              spanRight={7}
+              leftItem={<TextCustom>Komentar</TextCustom>}
+              rightItem={
+                <TextCustom truncate={2}>
+                  {item?.Forum_Komentar?.komentar || "-"}
+                </TextCustom>
+              }
+            />
         </StackCustom>
       </AdminBasicBox>
     ),

screens/Admin/Forum/ScreenForumReportPosting.tsx

@@ -1,14 +1,14 @@
 import { SearchInput, StackCustom, TextCustom } from "@/components";
 import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
 import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
-import { GridSpan_4_8 } from "@/components/_ShareComponent/GridSpan_4_8";
+import GridTwoView from "@/components/_ShareComponent/GridTwoView";
 import NewWrapper from "@/components/_ShareComponent/NewWrapper";
 import { MainColor } from "@/constants/color-palet";
 import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
 import { createPaginationComponents } from "@/helpers/paginationHelpers";
 import { usePagination } from "@/hooks/use-pagination";
 import { apiAdminForum } from "@/service/api-admin/api-admin-forum";
-import { router } from "expo-router";
+import { router, useFocusEffect } from "expo-router";
 import { useCallback, useMemo, useState } from "react";
 import { RefreshControl } from "react-native";
 
@@ -25,6 +25,7 @@ export function Admin_ScreenForumReportPosting() {
       });
 
       if (response.success) {
+
         return { data: response.data };
       } else {
         return { data: [] };
@@ -35,6 +36,12 @@ export function Admin_ScreenForumReportPosting() {
     dependencies: [],
   });
 
+  useFocusEffect(
+    useCallback(() => {
+      pagination.onRefresh();
+    }, []),
+  );
+
   // Komponen search input
   const searchComponent = useMemo(
     () => (
@@ -72,17 +79,21 @@ export function Admin_ScreenForumReportPosting() {
         }}
       >
         <StackCustom gap={0}>
-          <GridSpan_4_8
-            label={<TextCustom>Pelapor</TextCustom>}
-            value={
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Jumlah Report</TextCustom>}
+            rightItem={
               <TextCustom truncate={1}>
-                {item?.User?.username || "-"}
+                {item?.count|| "-"}
               </TextCustom>
             }
           />
-          <GridSpan_4_8
-            label={<TextCustom>Postingan</TextCustom>}
-            value={
+          <GridTwoView
+            spanLeft={5}
+            spanRight={7}
+            leftItem={<TextCustom>Postingan</TextCustom>}
+            rightItem={
               <TextCustom truncate={2}>
                 {item?.Forum_Posting?.diskusi || "-"}
               </TextCustom>