upd: page kosong atau data udah di hapus pada pengumuman

app/(application)/announcement/[id].tsx

@@ -3,6 +3,7 @@ import AppHeader from "@/components/AppHeader";
 import BorderBottomItem from "@/components/borderBottomItem";
 import Skeleton from "@/components/skeleton";
 import Text from '@/components/Text';
+import ErrorView from "@/components/ErrorView";
 import { ConstEnv } from "@/constants/ConstEnv";
 import { isImageFile } from "@/constants/FileExtensions";
 import Styles from "@/constants/Styles";
@@ -65,6 +66,7 @@ export default function DetailAnnouncement() {
    const [loadingOpen, setLoadingOpen] = useState(false)
    const [preview, setPreview] = useState(false)
    const [chooseFile, setChooseFile] = useState<FileData>()
+   const [isError, setIsError] = useState(false)
 
    /**
     * Opens the image preview modal for the selected image file
@@ -79,6 +81,7 @@ export default function DetailAnnouncement() {
 
    async function handleLoad(loading: boolean) {
       try {
+         setIsError(false)
          setLoading(loading)
          const hasil = await decryptToken(String(token?.current))
          const response: ApiResponse = await apiGetAnnouncementOne({ id: id, user: hasil })
@@ -87,10 +90,12 @@ export default function DetailAnnouncement() {
             setDataMember(response.member)
             setDataFile(response.file)
          } else {
+            setIsError(true)
             Toast.show({ type: 'small', text1: response.message })
          }
       } catch (error: any) {
          console.error(error);
+         setIsError(true)
          const message = error?.response?.data?.message || "Gagal mengambil data"
 
          Toast.show({ type: 'small', text1: message })
@@ -206,6 +211,11 @@ export default function DetailAnnouncement() {
                />
             }
          >
+            {isError && !loading ? (
+               <View style={[Styles.mv50]}>
+                  <ErrorView />
+               </View>
+            ) : (
                <View style={[Styles.p15, Styles.mb50]}>
                   <View style={[Styles.wrapPaper, Styles.borderAll, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
                      {
@@ -304,6 +314,7 @@ export default function DetailAnnouncement() {
                      }
                   </View>
                </View>
+            )}
          </ScrollView>
 
          <ImageViewing

components/ErrorView.tsx

@@ -0,0 +1,42 @@
+import Text from '@/components/Text';
+import Styles from '@/constants/Styles';
+import { useTheme } from '@/providers/ThemeProvider';
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import React from 'react';
+import { View } from 'react-native';
+
+interface ErrorViewProps {
+   title?: string;
+   message?: string;
+   icon?: keyof typeof MaterialCommunityIcons.glyphMap;
+}
+
+/**
+ * ErrorView component to display error or empty states.
+ * Used when data is not found, deleted, or an error occurs during fetching.
+ */
+export default function ErrorView({ 
+   title = "Terjadi Kesalahan", 
+   message = "Data tidak ditemukan atau sudah dihapus.",
+   icon = "alert-circle-outline"
+}: ErrorViewProps) {
+   const { colors } = useTheme();
+
+   return (
+      <View style={[Styles.flex1, Styles.contentItemCenter, Styles.ph20]}>
+         <View style={[Styles.mb10]}>
+            <MaterialCommunityIcons 
+               name={icon} 
+               size={40} 
+               color={colors.dimmed} 
+            />
+         </View>
+         <Text style={[Styles.textDefaultSemiBold, { color: colors.text, textAlign: 'center' }]}>
+            {title}
+         </Text>
+         <Text style={[Styles.textMediumNormal, { color: colors.dimmed, textAlign: 'center', marginTop: 4 }]}>
+            {message}
+         </Text>
+      </View>
+   );
+}