wibu/hipmi-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix UI Admin

Browse Source 
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
This commit is contained in:
bagasbanuna
2026-02-20 16:48:26 +08:00
parent 107d4312e1
commit 32a42d1b60
13 changed files with 547 additions and 533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/(application)/(image)/take-picture/[id]/index.tsx
View File

@@ -105,7 +105,7 @@ export default function TakePicture() {
</Pressable>
<Pressable onPress={pickImage}>
<AntDesign name="folderopen" size={32} color="white" />
<AntDesign name="folder-open" size={32} color="white" />
</Pressable>
</View>
</View>

17
app/(application)/(user)/home.tsx
View File

@@ -77,14 +77,14 @@ export default function Application() {
);
}
if (data && data?.masterUserRoleId !== "1") {
console.log("User is not admin");
return (
<BasicWrapper>
<Redirect href={`/admin/dashboard`} />
</BasicWrapper>
);
}
// if (data && data?.masterUserRoleId !== "1") {
// console.log("User is not admin");
// return (
// <BasicWrapper>
// <Redirect href={`/admin/dashboard`} />
// </BasicWrapper>
// );
// }
return (
<>
@@ -115,6 +115,7 @@ export default function Application() {
}
footerComponent={
<TabSection
tabs={tabsHome({
acceptedForumTermsAt: data?.acceptedForumTermsAt,
profileId: data?.Profile?.id,

13
app/(application)/admin/forum/[id]/index.tsx
View File

@@ -26,7 +26,7 @@ export default function AdminForumDetailPosting() {
useFocusEffect(
useCallback(() => {
onLoadData();
}, [id])
}, [id]),
);
const onLoadData = async () => {
@@ -72,6 +72,10 @@ export default function AdminForumDetailPosting() {
label: "Total Report",
value: data?.JumlahReportPosting || 0,
},
{
label: "Postingan",
value: (data && data?.diskusi) || "-",
},
];
return (
@@ -111,13 +115,6 @@ export default function AdminForumDetailPosting() {
))}
</StackCustom>
</BaseBox>
<BaseBox>
<StackCustom gap={"sm"}>
<TextCustom bold>Postingan</TextCustom>
<TextCustom>{(data && data?.diskusi) || "-"}</TextCustom>
</StackCustom>
</BaseBox>
</ViewWrapper>
<DrawerCustom

90
app/(application)/admin/forum/[id]/list-comment.tsx
View File

@@ -1,91 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
LoaderCustom,
StackCustom,
TextCustom,
ViewWrapper
} from "@/components";
import { IconOpenTo } from "@/components/_Icon/IconOpenTo";
import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
import AdminTitleTable from "@/components/_ShareComponent/Admin/TableTitle";
import AdminTableValue from "@/components/_ShareComponent/Admin/TableValue";
import { apiAdminForumCommentById } from "@/service/api-admin/api-admin-forum";
import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
import { Divider } from "react-native-paper";
import { Admin_ScreenForumListComment } from "@/screens/Admin/Forum/ScreenForumListComment";
export default function AdminForumListComment() {
const { id } = useLocalSearchParams();
const [listComment, setListComment] = useState<any[] | null>(null);
const [loadList, setLoadList] = useState(false);
useFocusEffect(
useCallback(() => {
onLoadComment();
}, [id])
);
const onLoadComment = async () => {
try {
setLoadList(true);
const response = await apiAdminForumCommentById({
id: id as string,
category: "get-all",
});
if (response.success) {
setListComment(response.data);
}
} catch (error) {
console.log("[ERROR]", error);
setListComment([]);
} finally {
setLoadList(false);
}
};
return (
<>
<ViewWrapper
headerComponent={<AdminBackButtonAntTitle title="Daftar Komentar" />}
>
<StackCustom>
<AdminTitleTable title1="Aksi" title2="Report" title3="Komentar" />
<Divider />
{loadList ? (
<LoaderCustom />
) : _.isEmpty(listComment) ? (
<TextCustom align="center" color="gray">
Tidak ada komentar
</TextCustom>
) : (
listComment?.map((item: any, index: number) => (
<AdminTableValue
key={index}
value1={
<IconOpenTo
onPress={() => {
router.push(
`/admin/forum/${item.id}/list-report-comment`
);
}}
/>
}
value2={
<TextCustom truncate={1}>
{item?.countReport || 0}
</TextCustom>
}
value3={
<TextCustom truncate={2}>{item?.komentar || "-"}</TextCustom>
}
/>
))
)}
</StackCustom>
</ViewWrapper>
</>
);
return <Admin_ScreenForumListComment />;
}

261
app/(application)/admin/forum/[id]/list-report-comment.tsx
View File

@@ -1,262 +1,5 @@
/* eslint-disable react-hooks/exhaustive-deps */
import {
ActionIcon,
AlertDefaultSystem,
BaseBox,
CenterCustom,
DrawerCustom,
LoaderCustom,
MenuDrawerDynamicGrid,
StackCustom,
TextCustom,
ViewWrapper,
} from "@/components";
import { IconDot, IconView } from "@/components/_Icon/IconComponent";
import { IconTrash } from "@/components/_Icon/IconTrash";
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 { MainColor } from "@/constants/color-palet";
import { ICON_SIZE_BUTTON } from "@/constants/constans-value";
import { useAuth } from "@/hooks/use-auth";
import {
apiAdminForumCommentById,
apiAdminForumDeactivateComment,
apiAdminForumListReportCommentById,
} from "@/service/api-admin/api-admin-forum";
import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
import _ from "lodash";
import { useCallback, useState } from "react";
import { View } from "react-native";
import { Divider } from "react-native-paper";
import Toast from "react-native-toast-message";
import { Admin_ScreenForumDetailReportComment } from "@/screens/Admin/Forum/ScreenForumDetailReportComment";
export default function AdminForumReportComment() {
const { id } = useLocalSearchParams();
const { user } = useAuth();
const [data, setData] = useState<any | null>(null);
const [listReport, setListReport] = useState<any[] | null>(null);
const [loadList, setLoadList] = useState(false);
const [openDrawer, setOpenDrawer] = useState(false);
const [openDrawerAction, setOpenDrawerAction] = useState(false);
const [selectedReport, setSelectedReport] = useState({
id: "",
username: "",
kategori: "",
keterangan: "",
deskripsi: "",
});
useFocusEffect(
useCallback(() => {
onLoadData();
}, [id])
);
const onLoadData = async () => {
try {
setLoadList(true);
const response = await apiAdminForumCommentById({
id: id as string,
category: "get-one",
});
const responseReport = await apiAdminForumListReportCommentById({
id: id as string,
});
if (response.success) {
setData(response.data);
}
if (responseReport.success) {
setListReport(responseReport.data);
}
} catch (error) {
console.log("[ERROR]", error);
setData(null);
setListReport([]);
} finally {
setLoadList(false);
}
};
return (
<>
<ViewWrapper
headerComponent={
<AdminBackButtonAntTitle
title="Report Komentar"
rightComponent={
<ActionIcon
icon={<IconDot size={16} color={MainColor.darkblue} />}
onPress={() => setOpenDrawer(true)}
/>
}
/>
}
>
<BaseBox>
<StackCustom gap={"sm"}>
<GridSpan_NewComponent
text1={<TextCustom bold>Username</TextCustom>}
text2={<TextCustom>{data?.Author?.username || "-"}</TextCustom>}
/>
<GridSpan_NewComponent
text1={<TextCustom bold>Komentar</TextCustom>}
text2={<TextCustom>{data?.komentar || "-"}</TextCustom>}
/>
</StackCustom>
</BaseBox>
<AdminComp_BoxTitle title="Daftar Report Komentar" />
<StackCustom gap={"sm"}>
<GridSpan_NewComponent
text1={
<TextCustom bold align="center">
Aksi
</TextCustom>
}
text2={<TextCustom bold>Pelapor</TextCustom>}
text3={<TextCustom bold>Kategori Report</TextCustom>}
/>
<Divider />
{loadList ? (
<LoaderCustom />
) : _.isEmpty(listReport) ? (
<TextCustom align="center" color="gray">
Tidak ada report
</TextCustom>
) : (
listReport?.map((item: any, index: number) => (
<View key={index}>
<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={1}>
{item?.User?.username || "-"}
</TextCustom>
}
text3={
<TextCustom truncate={2}>
{item?.ForumMaster_KategoriReport?.title || "-"}
</TextCustom>
}
/>
<Divider />
</View>
))
)}
</StackCustom>
</ViewWrapper>
<DrawerCustom
isVisible={openDrawer}
closeDrawer={() => setOpenDrawer(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 deleteComment = await apiAdminForumDeactivateComment({
id: id as string,
data: {
senderId: user?.id as string,
},
});
// if (!deleteComment.success) {
// Toast.show({
// type: "error",
// text1: "Komentar gagal dihapus",
// });
// return;
// }
setOpenDrawer(false);
Toast.show({
type: "success",
text1: "Komentar berhasil dihapus",
});
router.back();
},
});
}}
/>
</DrawerCustom>
<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>
</>
);
return <Admin_ScreenForumDetailReportComment />;
}

10
docs/prompt-for-qwen-code.md
View File

@@ -55,10 +55,10 @@ Component yang digunakan: components/_ShareComponent/NewWrapper.tsx
<!-- START Prompt Admin Refactoring -->
<!-- Pindah kode ke Screen Component -->
File source: app/(application)/admin/forum/[id]/list-report-posting.tsx
File source: app/(application)/admin/forum/[id]/list-comment.tsx
Folder tujuan: screens/Admin/Forum
Nama file utama: ScreenForumDetailReportPosting.tsx
Nama function utama: Admin_ScreenForumDetailReportPosting
Nama file utama: ScreenForumListComment.tsx
Nama function utama: Admin_ScreenForumListComment
File komponen wrapper: components/_ShareComponent/NewWrapper.tsx
Buat file baru pada "Folder tujuan" dengan nama "Nama file utama" dan ubah nama function menjadi "Nama function utama" kemudian clean code, import dan panggil function tersebut pada file "File source"
@@ -66,7 +66,7 @@ Analisa juga file "Nama file utama" , jika belum menggunakan NewWrapper pada fil
<!-- Penerapan Pagination -->
Function fecth: apiAdminForumListReportPostingById
Function fecth: apiAdminForumCommentById
File function fetch: service/api-admin/api-admin-forum.ts
Terapkan pagination pada file "Nama file utama"
@@ -80,7 +80,7 @@ Gunakan bahasa indonesia pada cli agar saya mudah membacanya.
<!-- END Prompt Admin Refactoring -->
<!-- Additional -->
File refrensi: screens/Admin/Forum/ScreenForumReportPosting.tsx
File refrensi: screens/Admin/Forum/ScreenForumDetailReportPosting.tsx
Anda bisa menggunakan refrensi dari "File refrensi" jika butuh pemahaman dengan tipe fitur yang hampir sama
Untuk refrensi tampilan Box bisa anda gunakan dari file: screens/Admin/Donation/BoxDonationListOfDonatur.tsx dan buatkan komponen yang mirip untuk list of donatur dengan nama file: BoxDonationListOfInvestor.tsx

292
screens/Admin/Forum/ScreenForumDetailReportComment.tsx Normal file
View File

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

180
screens/Admin/Forum/ScreenForumDetailReportPosting.tsx
View File

@@ -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)}

105
screens/Admin/Forum/ScreenForumListComment.tsx Normal file
View File

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

68
screens/Admin/Forum/ScreenForumReportComment.tsx
View File

@@ -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>
),

29
screens/Admin/Forum/ScreenForumReportPosting.tsx
View File

@@ -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>

5
screens/Home/bottomFeatureSection.tsx
View File

@@ -6,6 +6,7 @@ import Icon from "react-native-vector-icons/FontAwesome";
import { stylesHome } from "./homeViewStyle";
import { router, useFocusEffect } from "expo-router";
import { apiJobGetAll } from "@/service/api-client/api-job";
import CustomSkeleton from "@/components/_ShareComponent/SkeletonCustom";
export default function Home_BottomFeatureSection() {
const [listData, setListData] = useState<any>([]);
@@ -35,6 +36,10 @@ export default function Home_BottomFeatureSection() {
}, [])
);
if (!listData || listData.length === 0) {
return <CustomSkeleton height={200}/>
}
return (
<>
<ClickableCustom onPress={() => router.push("/job")}>

8
service/api-admin/api-admin-forum.ts
View File

@@ -30,13 +30,15 @@ export async function apiAdminForumPostingById({ id }: { id: string }) {
export async function apiAdminForumCommentById({
id,
category,
page = "1",
}: {
id: string;
category: "get-all" | "get-one";
page?: string;
}) {
try {
const response = await apiConfig.get(
`/mobile/admin/forum/${id}/comment?category=${category}`
`/mobile/admin/forum/${id}/comment?category=${category}&page=${page}`
);
return response.data;
} catch (error) {
@@ -46,12 +48,14 @@ export async function apiAdminForumCommentById({
export async function apiAdminForumListReportCommentById({
id,
page = "1",
}: {
id: string;
page?: string;
}) {
try {
const response = await apiConfig.get(
`/mobile/admin/forum/${id}/report-comment`
`/mobile/admin/forum/${id}/report-comment?page=${page}`
);
return response.data;
} catch (error) {