upd: redesign

Deskripsi:
- fitur ganti mode tema
- penerapan tema pada semua fitur

NO Issues
This commit is contained in:
2026-02-09 17:49:25 +08:00
parent ddfee00410
commit d3802ca26c
157 changed files with 1278 additions and 692 deletions

View File

@@ -8,6 +8,7 @@ import { isImageFile } from "@/constants/FileExtensions";
import Styles from "@/constants/Styles";
import { apiGetAnnouncementOne } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Entypo, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import * as FileSystem from 'expo-file-system';
import { startActivityAsync } from 'expo-intent-launcher';
@@ -51,6 +52,7 @@ interface ApiResponse {
export default function DetailAnnouncement() {
const { id } = useLocalSearchParams<{ id: string }>();
const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const [data, setData] = useState<AnnouncementData>({ id: '', title: '', desc: '' })
const [dataMember, setDataMember] = useState<Record<string, MemberData[]>>({})
const [dataFile, setDataFile] = useState<FileData[]>([])
@@ -175,7 +177,7 @@ export default function DetailAnnouncement() {
};
return (
<SafeAreaView>
<SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen
options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -193,16 +195,17 @@ export default function DetailAnnouncement() {
/>
<ScrollView
showsVerticalScrollIndicator={false}
style={[Styles.h100]}
style={[Styles.h100, { backgroundColor: colors.background }]}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => handleRefresh()}
tintColor={colors.primary}
/>
}
>
<View style={[Styles.p15, Styles.mb50]}>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
loading ?
<View>
@@ -219,7 +222,7 @@ export default function DetailAnnouncement() {
:
<>
<View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
<MaterialIcons name="campaign" size={25} color="black" style={[Styles.mr05]} />
<MaterialIcons name="campaign" size={25} color={colors.text} style={[Styles.mr05]} />
<Text style={[Styles.textDefaultSemiBold, Styles.w90, Styles.mt02]}>{data?.title}</Text>
</View>
<View style={[Styles.mt10]}>
@@ -228,7 +231,7 @@ export default function DetailAnnouncement() {
<RenderHTML
contentWidth={contentWidth}
source={{ html: data?.desc }}
baseStyle={{ color: 'black' }}
baseStyle={{ color: colors.text }}
/>
:
<Text>{data?.desc}</Text>
@@ -240,7 +243,7 @@ export default function DetailAnnouncement() {
</View>
{
dataFile.length > 0 && (
<View style={[Styles.wrapPaper, Styles.mt10]}>
<View style={[Styles.wrapPaper, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<View style={[Styles.mb05]}>
<Text style={[Styles.textDefaultSemiBold]}>File</Text>
</View>
@@ -251,7 +254,7 @@ export default function DetailAnnouncement() {
icon={<MaterialCommunityIcons
name={isImageFile(item.extension) ? "file-image-outline" : "file-document-outline"}
size={25}
color="black"
color={colors.text}
/>}
title={item.name + '.' + item.extension}
titleWeight="normal"
@@ -265,7 +268,7 @@ export default function DetailAnnouncement() {
</View>
)
}
<View style={[Styles.wrapPaper, Styles.mt10]}>
<View style={[Styles.wrapPaper, Styles.mt10, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
loading ?
arrSkeleton.map((item, index) => {
@@ -286,7 +289,7 @@ export default function DetailAnnouncement() {
dataMember[v].map((item: any, x: any) => {
return (
<View key={x} style={[Styles.rowItemsCenter, Styles.w90]}>
<Entypo name="dot-single" size={24} color="black" />
<Entypo name="dot-single" size={24} color={colors.text} />
<Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{item.division}</Text>
</View>
)

View File

@@ -12,6 +12,7 @@ import Styles from "@/constants/Styles";
import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
import { apiCreateAnnouncement } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Entypo, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import * as DocumentPicker from "expo-document-picker";
import { router, Stack } from "expo-router";
@@ -24,6 +25,7 @@ export default function CreateAnnouncement() {
const dispatch = useDispatch()
const update = useSelector((state: any) => state.announcementUpdate)
const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const [disableBtn, setDisableBtn] = useState(true);
const [modalDivisi, setModalDivisi] = useState(false);
const [divisionMember, setDivisionMember] = useState<any>([])
@@ -129,7 +131,7 @@ export default function CreateAnnouncement() {
}
return (
<SafeAreaView>
<SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen
options={{
// headerLeft: () => (
@@ -158,15 +160,15 @@ export default function CreateAnnouncement() {
showBack={true}
onPressLeft={() => router.back()}
right={
<ButtonSaveHeader
disable={disableBtn || divisionMember.length == 0 || loading ? true : false}
category="create"
onPress={() => {
divisionMember.length == 0
? Toast.show({ type: 'small', text1: "Anda belum memilih divisi", })
: handleCreate();
}}
/>
<ButtonSaveHeader
disable={disableBtn || divisionMember.length == 0 || loading ? true : false}
category="create"
onPress={() => {
divisionMember.length == 0
? Toast.show({ type: 'small', text1: "Anda belum memilih divisi", })
: handleCreate();
}}
/>
}
/>
)
@@ -175,7 +177,7 @@ export default function CreateAnnouncement() {
<LoadingOverlay visible={loading} />
<ScrollView
showsVerticalScrollIndicator={false}
style={[Styles.h100]}
style={[Styles.h100, { backgroundColor: colors.background }]}
>
<View style={[Styles.p15]}>
<InputForm
@@ -184,6 +186,7 @@ export default function CreateAnnouncement() {
placeholder="Judul Pengumuman"
required
error={error.title}
bg={colors.card}
errorText="Judul harus diisi"
onChange={(val) => validationForm("title", val)}
/>
@@ -193,6 +196,7 @@ export default function CreateAnnouncement() {
placeholder="Deskripsi Pengumuman"
required
error={error.desc}
bg={colors.card}
errorText="Pengumuman harus diisi"
onChange={(val) => validationForm("desc", val)}
multiline
@@ -208,7 +212,7 @@ export default function CreateAnnouncement() {
<BorderBottomItem
key={index}
borderType={fileForm.length > 1 ? "bottom" : "none"}
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
title={item.name}
titleWeight="normal"
onPress={() => { setIndexDelFile(index); setModalFile(true) }}
@@ -237,7 +241,7 @@ export default function CreateAnnouncement() {
{
item.Division.map((division: any, i: any) => (
<View key={i} style={[Styles.rowItemsCenter, Styles.w90]}>
<Entypo name="dot-single" size={24} color="black" />
<Entypo name="dot-single" size={24} color={colors.text} />
<Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{division.name}</Text>
</View>
))
@@ -266,7 +270,7 @@ export default function CreateAnnouncement() {
<DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus"
onPress={() => { deleteFile(indexDelFile) }}
/>

View File

@@ -12,6 +12,7 @@ import Styles from "@/constants/Styles";
import { setUpdateAnnouncement } from "@/lib/announcementUpdate";
import { apiEditAnnouncement, apiGetAnnouncementOne } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Entypo, Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import * as DocumentPicker from "expo-document-picker";
import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -35,6 +36,7 @@ export default function EditAnnouncement() {
const dispatch = useDispatch()
const update = useSelector((state: any) => state.announcementUpdate)
const { token, decryptToken } = useAuthSession();
const { colors } = useTheme();
const [modalDivisi, setModalDivisi] = useState(false);
const [disableBtn, setDisableBtn] = useState(true);
const [dataMember, setDataMember] = useState<any>([]);
@@ -180,7 +182,7 @@ export default function EditAnnouncement() {
}
return (
<SafeAreaView>
<SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen
options={{
// headerLeft: () => (
@@ -226,7 +228,7 @@ export default function EditAnnouncement() {
<LoadingOverlay visible={loading} />
<ScrollView
showsVerticalScrollIndicator={false}
style={[Styles.h100]}
style={[Styles.h100, { backgroundColor: colors.background }]}
>
<View style={[Styles.p15]}>
<InputForm
@@ -235,6 +237,7 @@ export default function EditAnnouncement() {
placeholder="Judul Pengumuman"
required
error={error.title}
bg={colors.card}
errorText="Judul harus diisi"
onChange={(val) => validationForm("title", val)}
value={dataForm.title}
@@ -245,6 +248,7 @@ export default function EditAnnouncement() {
placeholder="Deskripsi Pengumuman"
required
error={error.desc}
bg={colors.card}
errorText="Pengumuman harus diisi"
onChange={(val) => validationForm("desc", val)}
value={dataForm.desc}
@@ -261,7 +265,7 @@ export default function EditAnnouncement() {
<BorderBottomItem
key={index}
borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
title={item.name + '.' + item.extension}
titleWeight="normal"
onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
@@ -273,7 +277,7 @@ export default function EditAnnouncement() {
<BorderBottomItem
key={index}
borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"}
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
title={item.name}
titleWeight="normal"
onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
@@ -300,7 +304,7 @@ export default function EditAnnouncement() {
{
item.Division.map((division: any, i: any) => (
<View key={i} style={[Styles.rowItemsCenter, Styles.w90]}>
<Entypo name="dot-single" size={24} color="black" />
<Entypo name="dot-single" size={24} color={colors.text} />
<Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode='tail'>{division.name}</Text>
</View>
))
@@ -330,7 +334,7 @@ export default function EditAnnouncement() {
<DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus"
onPress={() => { deleteFile(indexDelFile.id, indexDelFile.cat) }}
/>

View File

@@ -6,6 +6,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetAnnouncement } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialIcons } from "@expo/vector-icons";
import { router } from "expo-router";
import { useEffect, useState } from "react";
@@ -22,6 +23,7 @@ type Props = {
export default function Announcement() {
const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const [data, setData] = useState<Props[]>([])
const [search, setSearch] = useState('')
const update = useSelector((state: any) => state.announcementUpdate)
@@ -83,7 +85,7 @@ export default function Announcement() {
})
return (
<View style={[Styles.p15, { flex: 1 }]}>
<View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<View>
<InputSearch onChange={setSearch} />
</View>
@@ -127,6 +129,7 @@ export default function Announcement() {
<RefreshControl
refreshing={refreshing}
onRefresh={handleRefresh}
tintColor={colors.primary}
/>
}
/>