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

upd: redesign

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

NO Issues
This commit is contained in:
amaliadwiy
2026-02-09 17:49:25 +08:00
parent ddfee00410
commit d3802ca26c
157 changed files with 1278 additions and 692 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
GEMINI.md Normal file
View File

@@ -0,0 +1,86 @@
# Project Overview: Desa+
Desa+ is a mobile application built with React Native and Expo, designed to facilitate management and communication within villages/communities. It aims to streamline village administration, inter-community communication, and the management of essential information.
## Key Features:
- Village announcements and information
- Community discussion forum
- Village activity calendar
- Village documentation and archives
- Project and task management
- Member and organizational structure management
- Push notifications for important updates
- Verification and authentication features
## Technologies Used:
- **React Native**: Cross-platform mobile development framework.
- **Expo**: Platform for React Native application development.
- **Firebase**: Backend services including Authentication, Realtime Database, and Cloud Messaging.
- **Redux Toolkit**: State management.
- **React Navigation**: Application navigation.
- **TypeScript**: For type safety.
## Building and Running:
### Installation
1. **Clone the repository:**
```bash
git clone <repository-url>
cd mobile-darmasaba
```
2. **Install dependencies:**
```bash
npm install
```
3. **Configure environment variables:**
Create a `.env` file in the root directory and add the following variables:
```
URL_API=<api-endpoint>
URL_OTP=<otp-service-endpoint>
URL_STORAGE=<storage-endpoint>
URL_FIREBASE_DB=<firebase-database-url>
PASS_ENC=<encryption-password>
WA_SERVER_TOKEN=<whatsapp-server-token>
IOS_GOOGLE_SERVICES_FILE=<path-to-ios-google-services>
```
### Running the Application
- **Start development server:**
```bash
npx expo start
```
- **Run on Android emulator/device:**
```bash
npm run android
```
- **Run on iOS simulator/device:**
```bash
npm run ios
```
### Build Production
- **Build Android production package:**
```bash
npm run build:android
```
## Development Conventions:
### Project Structure:
- `app/`: Main page files.
- `components/`: Reusable UI components, categorized by feature (e.g., `announcement/`, `auth/`, `discussion/`).
- `assets/`: Images and static assets.
- `constants/`: Global constants.
- `lib/`: Libraries and utilities.
### Contribution Guidelines:
1. Fork the repository.
2. Create a new feature branch (`git checkout -b feature/FeatureName`).
3. Commit your changes (`git commit -m 'Add FeatureName feature'`).
4. Push to the branch (`git push origin feature/FeatureName`).
5. Create a pull request.
## Platform Support:
- ✅ Android
- ✅ iOS
- ❌ Web (not yet optimized)

21
app/(application)/announcement/[id].tsx
View File

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

32
app/(application)/announcement/create.tsx
View File

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

16
app/(application)/announcement/edit/[id].tsx
View File

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

5
app/(application)/announcement/index.tsx
View File

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

8
app/(application)/banner/[id].tsx
View File

@@ -7,6 +7,7 @@ import Styles from "@/constants/Styles";
import { apiEditBanner, apiGetBanner, apiGetBannerOne } from "@/lib/api"; import { apiEditBanner, apiGetBanner, apiGetBannerOne } from "@/lib/api";
import { setEntities } from "@/lib/bannerSlice"; import { setEntities } from "@/lib/bannerSlice";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Entypo } from "@expo/vector-icons"; import { Entypo } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -24,6 +25,7 @@ import { useDispatch } from "react-redux";
export default function EditBanner() { export default function EditBanner() {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { decryptToken, token } = useAuthSession(); const { decryptToken, token } = useAuthSession();
const { colors } = useTheme();
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const [selectedImage, setSelectedImage] = useState< const [selectedImage, setSelectedImage] = useState<
string | undefined | { uri: string } string | undefined | { uri: string }
@@ -112,7 +114,7 @@ export default function EditBanner() {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -143,7 +145,7 @@ export default function EditBanner() {
) )
}} }}
/> />
<ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}> <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.mb15]}> <View style={[Styles.mb15]}>
{selectedImage != undefined ? ( {selectedImage != undefined ? (
@@ -179,7 +181,7 @@ export default function EditBanner() {
type="default" type="default"
placeholder="Judul" placeholder="Judul"
required required
bg="white" bg={colors.card}
value={title} value={title}
error={error} error={error}
onChange={onValidate} onChange={onValidate}

8
app/(application)/banner/create.tsx
View File

@@ -6,6 +6,7 @@ import Styles from "@/constants/Styles";
import { apiCreateBanner, apiGetBanner } from "@/lib/api"; import { apiCreateBanner, apiGetBanner } from "@/lib/api";
import { setEntities } from "@/lib/bannerSlice"; import { setEntities } from "@/lib/bannerSlice";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Entypo } from "@expo/vector-icons"; import { Entypo } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
@@ -22,6 +23,7 @@ import { useDispatch } from "react-redux";
export default function CreateBanner() { export default function CreateBanner() {
const { decryptToken, token } = useAuthSession(); const { decryptToken, token } = useAuthSession();
const { colors } = useTheme();
const dispatch = useDispatch(); const dispatch = useDispatch();
const [selectedImage, setSelectedImage] = useState<string | undefined>( const [selectedImage, setSelectedImage] = useState<string | undefined>(
undefined undefined
@@ -94,7 +96,7 @@ export default function CreateBanner() {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -133,7 +135,7 @@ export default function CreateBanner() {
) )
}} }}
/> />
<ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}> <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
<View style={[Styles.mb15]}> <View style={[Styles.mb15]}>
{selectedImage != undefined ? ( {selectedImage != undefined ? (
@@ -165,7 +167,7 @@ export default function CreateBanner() {
type="default" type="default"
placeholder="Judul" placeholder="Judul"
required required
bg="white" bg={colors.card}
onChange={onValidate} onChange={onValidate}
error={error} error={error}
errorText="Judul harus diisi" errorText="Judul harus diisi"

13
app/(application)/banner/index.tsx
View File

@@ -11,6 +11,7 @@ import Styles from "@/constants/Styles"
import { apiDeleteBanner, apiGetBanner } from "@/lib/api" import { apiDeleteBanner, apiGetBanner } from "@/lib/api"
import { setEntities } from "@/lib/bannerSlice" import { setEntities } from "@/lib/bannerSlice"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons" import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
import * as FileSystem from 'expo-file-system' import * as FileSystem from 'expo-file-system'
import { startActivityAsync } from 'expo-intent-launcher' import { startActivityAsync } from 'expo-intent-launcher'
@@ -32,6 +33,7 @@ type Props = {
export default function BannerList() { export default function BannerList() {
const { decryptToken, token } = useAuthSession() const { decryptToken, token } = useAuthSession()
const { colors } = useTheme()
const [isModal, setModal] = useState(false) const [isModal, setModal] = useState(false)
const entities = useSelector((state: any) => state.banner) const entities = useSelector((state: any) => state.banner)
const [dataId, setDataId] = useState('') const [dataId, setDataId] = useState('')
@@ -105,7 +107,7 @@ export default function BannerList() {
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -130,9 +132,10 @@ export default function BannerList() {
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={handleRefresh} onRefresh={handleRefresh}
tintColor={colors.primary}
/> />
} }
style={[Styles.h100]} style={[Styles.h100, { backgroundColor: colors.background }]}
> >
{ {
entities.length > 0 entities.length > 0
@@ -170,7 +173,7 @@ export default function BannerList() {
<DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title="Menu"> <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit" title="Edit"
onPress={() => { onPress={() => {
setModal(false) setModal(false)
@@ -178,7 +181,7 @@ export default function BannerList() {
}} }}
/> />
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />} icon={<MaterialCommunityIcons name="file-eye" color={colors.text} size={25} />}
title="Lihat" title="Lihat"
onPress={() => { onPress={() => {
setModal(false) setModal(false)
@@ -189,7 +192,7 @@ export default function BannerList() {
}} }}
/> />
<MenuItemRow <MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />} icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { onPress={() => {
setModal(false) setModal(false)

17
app/(application)/discussion/[id].tsx
View File

@@ -18,6 +18,7 @@ import Styles from "@/constants/Styles";
import { apiDeleteDiscussionGeneralCommentar, apiGetDiscussionGeneralOne, apiSendDiscussionGeneralCommentar, apiUpdateDiscussionGeneralCommentar } from "@/lib/api"; import { apiDeleteDiscussionGeneralCommentar, apiGetDiscussionGeneralOne, apiSendDiscussionGeneralCommentar, apiUpdateDiscussionGeneralCommentar } from "@/lib/api";
import { getDB } from "@/lib/firebaseDatabase"; import { getDB } from "@/lib/firebaseDatabase";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"; import { Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import { ref } from '@react-native-firebase/database'; import { ref } from '@react-native-firebase/database';
import { useHeaderHeight } from '@react-navigation/elements'; import { useHeaderHeight } from '@react-navigation/elements';
@@ -56,6 +57,7 @@ type PropsFile = {
export default function DetailDiscussionGeneral() { export default function DetailDiscussionGeneral() {
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
const entities = useSelector((state: any) => state.entities) const entities = useSelector((state: any) => state.entities)
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
@@ -237,14 +239,15 @@ export default function DetailDiscussionGeneral() {
) )
}} }}
/> />
<View style={{ flex: 1 }}> <View style={{ flex: 1, backgroundColor: colors.background }}>
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
style={[Styles.h100]} style={[Styles.h100, { backgroundColor: colors.background }]}
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={() => handleRefresh()} onRefresh={() => handleRefresh()}
tintColor={colors.primary}
/> />
} }
> >
@@ -333,7 +336,7 @@ export default function DetailDiscussionGeneral() {
<View style={[ <View style={[
Styles.contentItemCenter, Styles.contentItemCenter,
Styles.w100, Styles.w100,
{ backgroundColor: "#f4f4f4" }, { backgroundColor: colors.card },
viewEdit && Styles.borderTop viewEdit && Styles.borderTop
]}> ]}>
{ {
@@ -341,11 +344,11 @@ export default function DetailDiscussionGeneral() {
<> <>
<View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}> <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
<View style={[Styles.rowItemsCenter]}> <View style={[Styles.rowItemsCenter]}>
<Feather name="edit-3" color="black" size={22} style={[Styles.mh05]} /> <Feather name="edit-3" color={colors.text} size={22} style={[Styles.mh05]} />
<Text style={[Styles.textMediumSemiBold]}>Edit Komentar</Text> <Text style={[Styles.textMediumSemiBold]}>Edit Komentar</Text>
</View> </View>
<Pressable onPress={() => handleViewEditKomentar()}> <Pressable onPress={() => handleViewEditKomentar()}>
<MaterialIcons name="close" color="black" size={22} /> <MaterialIcons name="close" color={colors.text} size={22} />
</Pressable> </Pressable>
</View> </View>
<InputForm <InputForm
@@ -415,12 +418,12 @@ export default function DetailDiscussionGeneral() {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Komentar"> <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Komentar">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit" title="Edit"
onPress={() => { handleViewEditKomentar() }} onPress={() => { handleViewEditKomentar() }}
/> />
<MenuItemRow <MenuItemRow
icon={<MaterialIcons name="delete" color="black" size={25} />} icon={<MaterialIcons name="delete" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { onPress={() => {
AlertKonfirmasi({ AlertKonfirmasi({

6
app/(application)/discussion/add-member/[id].tsx
View File

@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
import { apiAddMemberDiscussionGeneral, apiGetDiscussionGeneralOne, apiGetUser } from "@/lib/api"; import { apiAddMemberDiscussionGeneral, apiGetDiscussionGeneralOne, apiGetUser } from "@/lib/api";
import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail"; import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -26,6 +27,7 @@ export default function AddMemberDiscussionDetail() {
const dispatch = useDispatch() const dispatch = useDispatch()
const update = useSelector((state: any) => state.discussionGeneralDetailUpdate) const update = useSelector((state: any) => state.discussionGeneralDetailUpdate)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
const [dataOld, setDataOld] = useState<Props[]>([]) const [dataOld, setDataOld] = useState<Props[]>([])
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
@@ -125,7 +127,7 @@ export default function AddMemberDiscussionDetail() {
) )
}} }}
/> />
<View style={[Styles.p15]}> <View style={[Styles.p15, { backgroundColor: colors.background }]}>
<InputSearch onChange={setSearch} value={search} /> <InputSearch onChange={setSearch} value={search} />
{ {
@@ -175,7 +177,7 @@ export default function AddMemberDiscussionDetail() {
</View> </View>
</View> </View>
{ {
selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} /> selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
} }
</Pressable> </Pressable>
) )

17
app/(application)/discussion/create.tsx
View File

@@ -16,6 +16,7 @@ import { apiCreateDiscussionGeneral } from "@/lib/api";
import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail"; import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
import { setMemberChoose } from "@/lib/memberChoose"; import { setMemberChoose } from "@/lib/memberChoose";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"; import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import * as DocumentPicker from "expo-document-picker"; import * as DocumentPicker from "expo-document-picker";
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
@@ -27,6 +28,7 @@ import { useDispatch, useSelector } from "react-redux";
export default function CreateDiscussionGeneral() { export default function CreateDiscussionGeneral() {
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const entityUser = useSelector((state: any) => state.user); const entityUser = useSelector((state: any) => state.user);
const userLogin = useSelector((state: any) => state.entities) const userLogin = useSelector((state: any) => state.entities)
const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" }); const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
@@ -163,7 +165,7 @@ export default function CreateDiscussionGeneral() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -205,7 +207,7 @@ export default function CreateDiscussionGeneral() {
}} }}
/> />
<LoadingOverlay visible={loading} /> <LoadingOverlay visible={loading} />
<ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}> <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>
{ {
(entityUser.role == "supadmin" || (entityUser.role == "supadmin" ||
@@ -215,6 +217,7 @@ export default function CreateDiscussionGeneral() {
placeholder="Pilih Lembaga Desa" placeholder="Pilih Lembaga Desa"
value={chooseGroup.label} value={chooseGroup.label}
required required
bg={colors.card}
onPress={() => { onPress={() => {
setValChoose(chooseGroup.val); setValChoose(chooseGroup.val);
setValSelect("group"); setValSelect("group");
@@ -231,6 +234,7 @@ export default function CreateDiscussionGeneral() {
placeholder="Judul" placeholder="Judul"
required required
error={error.title} error={error.title}
bg={colors.card}
errorText="Judul tidak boleh kosong" errorText="Judul tidak boleh kosong"
onChange={(val) => { validationForm("title", val) }} onChange={(val) => { validationForm("title", val) }}
/> />
@@ -240,6 +244,7 @@ export default function CreateDiscussionGeneral() {
placeholder="Hal yang didiskusikan" placeholder="Hal yang didiskusikan"
required required
error={error.desc} error={error.desc}
bg={colors.card}
errorText="Diskusi tidak boleh kosong" errorText="Diskusi tidak boleh kosong"
onChange={(val) => { validationForm("desc", val) }} onChange={(val) => { validationForm("desc", val) }}
multiline multiline
@@ -248,14 +253,14 @@ export default function CreateDiscussionGeneral() {
{ {
fileForm.length > 0 fileForm.length > 0
&& &&
<View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}> <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10, { borderColor: colors.icon }]}>
<Text style={[Styles.textDefaultSemiBold]}>File</Text> <Text style={[Styles.textDefaultSemiBold]}>File</Text>
{ {
fileForm.map((item, index) => ( fileForm.map((item, index) => (
<BorderBottomItem <BorderBottomItem
key={index} key={index}
borderType={fileForm.length > 1 ? "bottom" : "none"} 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} title={item.name}
titleWeight="normal" titleWeight="normal"
onPress={() => { setIndexDelFile(index); setModalFile(true) }} onPress={() => { setIndexDelFile(index); setModalFile(true) }}
@@ -291,7 +296,7 @@ export default function CreateDiscussionGeneral() {
<Text>Total {entitiesMember.length} Anggota</Text> <Text>Total {entitiesMember.length} Anggota</Text>
</View> </View>
<View style={[Styles.borderAll, Styles.round10, Styles.p10]}> <View style={[Styles.borderAll, Styles.round10, Styles.p10, { borderColor: colors.icon }]}>
{ {
entitiesMember.map((item: { img: any; name: any; }, index: any) => { entitiesMember.map((item: { img: any; name: any; }, index: any) => {
return ( return (
@@ -327,7 +332,7 @@ export default function CreateDiscussionGeneral() {
<DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu"> <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />} icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { deleteFile(indexDelFile) }} onPress={() => { deleteFile(indexDelFile) }}
/> />

16
app/(application)/discussion/edit/[id].tsx
View File

@@ -11,6 +11,7 @@ import Styles from "@/constants/Styles";
import { apiEditDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api"; import { apiEditDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail"; import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"; import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import * as DocumentPicker from "expo-document-picker"; import * as DocumentPicker from "expo-document-picker";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -21,6 +22,7 @@ import { useDispatch, useSelector } from "react-redux";
export default function EditDiscussionGeneral() { export default function EditDiscussionGeneral() {
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const { colors } = useTheme();
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const [disableBtn, setDisableBtn] = useState(false) const [disableBtn, setDisableBtn] = useState(false)
const dispatch = useDispatch() const dispatch = useDispatch()
@@ -162,7 +164,7 @@ export default function EditDiscussionGeneral() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -198,13 +200,14 @@ export default function EditDiscussionGeneral() {
}} }}
/> />
<LoadingOverlay visible={loading} /> <LoadingOverlay visible={loading} />
<ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100]}> <ScrollView showsVerticalScrollIndicator={false} style={[Styles.h100, { backgroundColor: colors.background }]}>
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
<InputForm <InputForm
label="Judul" label="Judul"
type="default" type="default"
placeholder="Judul" placeholder="Judul"
required required
bg={colors.card}
error={error.title} error={error.title}
value={dataForm.title} value={dataForm.title}
errorText="Judul tidak boleh kosong" errorText="Judul tidak boleh kosong"
@@ -215,6 +218,7 @@ export default function EditDiscussionGeneral() {
type="default" type="default"
placeholder="Hal yang didiskusikan" placeholder="Hal yang didiskusikan"
required required
bg={colors.card}
error={error.desc} error={error.desc}
value={dataForm.desc} value={dataForm.desc}
errorText="Diskusi tidak boleh kosong" errorText="Diskusi tidak boleh kosong"
@@ -225,14 +229,14 @@ export default function EditDiscussionGeneral() {
{ {
(fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0) (fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0)
&& &&
<View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}> <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10, { borderColor: colors.icon }]}>
<Text style={[Styles.textDefaultSemiBold]}>File</Text> <Text style={[Styles.textDefaultSemiBold]}>File</Text>
{ {
dataFile.filter((val) => !val.delete).map((item, index) => ( dataFile.filter((val) => !val.delete).map((item, index) => (
<BorderBottomItem <BorderBottomItem
key={index} key={index}
borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"} 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} title={item.name + '.' + item.extension}
titleWeight="normal" titleWeight="normal"
onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }} onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
@@ -244,7 +248,7 @@ export default function EditDiscussionGeneral() {
<BorderBottomItem <BorderBottomItem
key={index} key={index}
borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"} 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} title={item.name}
titleWeight="normal" titleWeight="normal"
onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }} onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
@@ -259,7 +263,7 @@ export default function EditDiscussionGeneral() {
<DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu"> <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />} icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { deleteFile(indexDelFile.id, indexDelFile.cat) }} onPress={() => { deleteFile(indexDelFile.id, indexDelFile.cat) }}
/> />

11
app/(application)/discussion/index.tsx
View File

@@ -8,6 +8,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetDiscussionGeneral } from "@/lib/api"; import { apiGetDiscussionGeneral } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, Feather, Ionicons, MaterialIcons } from "@expo/vector-icons"; import { AntDesign, Feather, Ionicons, MaterialIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router"; import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -27,6 +28,7 @@ type Props = {
export default function Discussion() { export default function Discussion() {
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>() const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
const [search, setSearch] = useState('') const [search, setSearch] = useState('')
const [nameGroup, setNameGroup] = useState('') const [nameGroup, setNameGroup] = useState('')
@@ -96,24 +98,24 @@ export default function Discussion() {
}) })
return ( return (
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<View> <View>
{ {
entityUser.role != "user" && entityUser.role != "coadmin" && entityUser.role != "user" && entityUser.role != "coadmin" &&
<View style={[Styles.wrapBtnTab]}> <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<ButtonTab <ButtonTab
active={status == "false" ? "false" : "true"} active={status == "false" ? "false" : "true"}
value="true" value="true"
onPress={() => { setStatus("true") }} onPress={() => { setStatus("true") }}
label="Aktif" label="Aktif"
icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />} icon={<Feather name="check-circle" color={status == "false" ? colors.text : 'white'} size={20} />}
n={2} /> n={2} />
<ButtonTab <ButtonTab
active={status == "false" ? "false" : "true"} active={status == "false" ? "false" : "true"}
value="false" value="false"
onPress={() => { setStatus("false") }} onPress={() => { setStatus("false") }}
label="Arsip" label="Arsip"
icon={<AntDesign name="closecircleo" color={status == "true" ? 'black' : 'white'} size={20} />} icon={<AntDesign name="closecircleo" color={status == "true" ? colors.text : 'white'} size={20} />}
n={2} /> n={2} />
</View> </View>
} }
@@ -178,6 +180,7 @@ export default function Discussion() {
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={handleRefresh} onRefresh={handleRefresh}
tintColor={colors.primary}
/> />
} }
/> />

12
app/(application)/discussion/member/[id].tsx
View File

@@ -11,6 +11,7 @@ import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiDeleteMemberDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api"; import { apiDeleteMemberDiscussionGeneral, apiGetDiscussionGeneralOne } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather, MaterialCommunityIcons } from "@expo/vector-icons"; import { Feather, MaterialCommunityIcons } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -26,6 +27,7 @@ type Props = {
export default function MemberDiscussionDetail() { export default function MemberDiscussionDetail() {
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
@@ -71,7 +73,7 @@ export default function MemberDiscussionDetail() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -86,10 +88,10 @@ export default function MemberDiscussionDetail() {
) )
}} }}
/> />
<ScrollView> <ScrollView style={{ backgroundColor: colors.background }}>
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
<Text style={[Styles.textDefault, Styles.mv05]}>{data.length} Anggota</Text> <Text style={[Styles.textDefault, Styles.mv05]}>{data.length} Anggota</Text>
<View style={[Styles.wrapPaper, Styles.mb100]}> <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{ {
entityUser.role != "user" && entityUser.role != "coadmin" && entityUser.role != "user" && entityUser.role != "coadmin" &&
<BorderBottomItem <BorderBottomItem
@@ -135,7 +137,7 @@ export default function MemberDiscussionDetail() {
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title={chooseUser.name}> <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title={chooseUser.name}>
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="account-eye" color="black" size={25} />} icon={<MaterialCommunityIcons name="account-eye" color={colors.text} size={25} />}
title="Lihat Profil" title="Lihat Profil"
onPress={() => { onPress={() => {
setModal(false) setModal(false)
@@ -145,7 +147,7 @@ export default function MemberDiscussionDetail() {
{ {
entityUser.role != "user" && entityUser.role != "coadmin" && entityUser.role != "user" && entityUser.role != "coadmin" &&
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="account-remove" color="black" size={25} />} icon={<MaterialCommunityIcons name="account-remove" color={colors.text} size={25} />}
title="Keluarkan" title="Keluarkan"
onPress={() => { onPress={() => {
setModal(false) setModal(false)

6
app/(application)/division/[id]/(fitur-division)/calendar/[detail]/add-member.tsx
View File

@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
import { apiAddMemberCalendar, apiGetCalendarOne, apiGetDivisionMember } from "@/lib/api"; import { apiAddMemberCalendar, apiGetCalendarOne, apiGetDivisionMember } from "@/lib/api";
import { setUpdateCalendar } from "@/lib/calendarUpdate"; import { setUpdateCalendar } from "@/lib/calendarUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -23,6 +24,7 @@ type Props = {
} }
export default function AddMemberCalendarEvent() { export default function AddMemberCalendarEvent() {
const { colors } = useTheme();
const dispatch = useDispatch() const dispatch = useDispatch()
const update = useSelector((state: any) => state.calendarUpdate) const update = useSelector((state: any) => state.calendarUpdate)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
@@ -100,7 +102,7 @@ export default function AddMemberCalendarEvent() {
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -182,7 +184,7 @@ export default function AddMemberCalendarEvent() {
</View> </View>
</View> </View>
{ {
selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={'black'} /> selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
} }
</Pressable> </Pressable>
) )

14
app/(application)/division/[id]/(fitur-division)/calendar/[detail]/edit.tsx
View File

@@ -9,6 +9,7 @@ import { valueTypeEventRepeat } from "@/constants/TypeEventRepeat"
import { apiGetCalendarOne, apiUpdateCalendar } from "@/lib/api" import { apiGetCalendarOne, apiUpdateCalendar } from "@/lib/api"
import { stringToDateTime } from "@/lib/fun_stringToDate" import { stringToDateTime } from "@/lib/fun_stringToDate"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider";
import { useHeaderHeight } from "@react-navigation/elements" import { useHeaderHeight } from "@react-navigation/elements"
import { Stack, router, useLocalSearchParams } from "expo-router" import { Stack, router, useLocalSearchParams } from "expo-router"
import moment from "moment" import moment from "moment"
@@ -17,6 +18,7 @@ import { KeyboardAvoidingView, Platform, SafeAreaView, ScrollView, View } from "
import Toast from "react-native-toast-message" import Toast from "react-native-toast-message"
export default function EditEventCalendar() { export default function EditEventCalendar() {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const [choose, setChoose] = useState({ val: "", label: "" }) const [choose, setChoose] = useState({ val: "", label: "" })
const [isSelect, setSelect] = useState(false) const [isSelect, setSelect] = useState(false)
@@ -162,7 +164,7 @@ export default function EditEventCalendar() {
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -205,7 +207,7 @@ export default function EditEventCalendar() {
type="default" type="default"
placeholder="Nama Acara" placeholder="Nama Acara"
required required
bg="white" bg={colors.card}
value={data.title} value={data.title}
onChange={(val) => validationForm("title", val)} onChange={(val) => validationForm("title", val)}
error={error.title} error={error.title}
@@ -251,12 +253,12 @@ export default function EditEventCalendar() {
label="Link Meet" label="Link Meet"
type="default" type="default"
placeholder="Link Meet" placeholder="Link Meet"
bg="white" bg={colors.card}
value={data.linkMeet} value={data.linkMeet}
onChange={(val) => validationForm("linkMeet", val)} onChange={(val) => validationForm("linkMeet", val)}
/> />
<SelectForm <SelectForm
bg="white" bg={colors.card}
label="Ulangi Acara" label="Ulangi Acara"
placeholder="Ulangi Acara" placeholder="Ulangi Acara"
value={choose.label} value={choose.label}
@@ -268,7 +270,7 @@ export default function EditEventCalendar() {
type="numeric" type="numeric"
placeholder="Jumlah Pengulangan" placeholder="Jumlah Pengulangan"
required required
bg="white" bg={colors.card}
value={String(data.repeatValue)} value={String(data.repeatValue)}
onChange={(val) => validationForm("repeatValue", val)} onChange={(val) => validationForm("repeatValue", val)}
error={error.repeatValue} error={error.repeatValue}
@@ -279,7 +281,7 @@ export default function EditEventCalendar() {
label="Deskripsi" label="Deskripsi"
type="default" type="default"
placeholder="Deskripsi" placeholder="Deskripsi"
bg="white" bg={colors.card}
value={data.desc} value={data.desc}
onChange={(val) => validationForm("desc", val)} onChange={(val) => validationForm("desc", val)}
multiline multiline

26
app/(application)/division/[id]/(fitur-division)/calendar/[detail]/index.tsx
View File

@@ -13,6 +13,7 @@ import Styles from "@/constants/Styles"
import { apiDeleteCalendarMember, apiGetCalendarOne, apiGetDivisionOneFeature } from "@/lib/api" import { apiDeleteCalendarMember, apiGetCalendarOne, apiGetDivisionOneFeature } from "@/lib/api"
import { setUpdateCalendar } from "@/lib/calendarUpdate" import { setUpdateCalendar } from "@/lib/calendarUpdate"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { MaterialCommunityIcons } from "@expo/vector-icons" import { MaterialCommunityIcons } from "@expo/vector-icons"
import Clipboard from "@react-native-clipboard/clipboard" import Clipboard from "@react-native-clipboard/clipboard"
import { router, Stack, useLocalSearchParams } from "expo-router" import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -45,6 +46,7 @@ type PropsMember = {
} }
export default function DetailEventCalendar() { export default function DetailEventCalendar() {
const { colors } = useTheme()
const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>(); const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
const [data, setData] = useState<Props>() const [data, setData] = useState<Props>()
const [member, setMember] = useState<PropsMember[]>([]) const [member, setMember] = useState<PropsMember[]>([])
@@ -152,14 +154,14 @@ export default function DetailEventCalendar() {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Detail Acara', headerTitle: 'Detail Acara',
headerTitleAlign: 'center', headerTitleAlign: 'center',
// headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} /> // headerRight: () => (entityUser.role == "user" || entityUser.role == "coadmin") && !isMemberDivision ? <></> : <HeaderRightCalendarDetail id={String(data?.idCalendar)} idReminder={String(detail)} />
header:()=>( header: () => (
<AppHeader <AppHeader
title="Detail Acara" title="Detail Acara"
showBack={true} showBack={true}
@@ -181,9 +183,9 @@ export default function DetailEventCalendar() {
} }
> >
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
<View style={[Styles.wrapPaper, Styles.mb15]}> <View style={[Styles.wrapPaper, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
<View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}> <View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
<MaterialCommunityIcons name="calendar-text" size={30} color="black" style={Styles.mr10} /> <MaterialCommunityIcons name="calendar-text" size={30} color={colors.text} style={Styles.mr10} />
{ {
loading ? loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" /> <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -192,7 +194,7 @@ export default function DetailEventCalendar() {
</View> </View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}> <View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="calendar-month-outline" size={30} color="black" style={Styles.mr10} /> <MaterialCommunityIcons name="calendar-month-outline" size={30} color={colors.text} style={Styles.mr10} />
{ {
loading ? loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" /> <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -201,7 +203,7 @@ export default function DetailEventCalendar() {
} }
</View> </View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}> <View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="clock-outline" size={30} color="black" style={Styles.mr10} /> <MaterialCommunityIcons name="clock-outline" size={30} color={colors.text} style={Styles.mr10} />
{ {
loading ? loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" /> <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -210,7 +212,7 @@ export default function DetailEventCalendar() {
} }
</View> </View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}> <View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="repeat" size={30} color="black" style={Styles.mr10} /> <MaterialCommunityIcons name="repeat" size={30} color={colors.text} style={Styles.mr10} />
{ {
loading ? loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" /> <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -228,7 +230,7 @@ export default function DetailEventCalendar() {
} }
</View> </View>
<View style={[Styles.rowItemsCenter, Styles.mt10]}> <View style={[Styles.rowItemsCenter, Styles.mt10]}>
<MaterialCommunityIcons name="link-variant" size={30} color="black" style={Styles.mr10} /> <MaterialCommunityIcons name="link-variant" size={30} color={colors.text} style={Styles.mr10} />
{ {
loading ? loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" /> <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -241,7 +243,7 @@ export default function DetailEventCalendar() {
} }
</View> </View>
<View style={[Styles.rowItemsCenter, Styles.mt10, { alignItems: 'flex-start' }]}> <View style={[Styles.rowItemsCenter, Styles.mt10, { alignItems: 'flex-start' }]}>
<MaterialCommunityIcons name="card-text-outline" size={30} color="black" style={Styles.mr10} /> <MaterialCommunityIcons name="card-text-outline" size={30} color={colors.text} style={Styles.mr10} />
{ {
loading ? loading ?
<Skeleton width={80} height={10} borderRadius={10} widthType="percent" /> <Skeleton width={80} height={10} borderRadius={10} widthType="percent" />
@@ -257,7 +259,7 @@ export default function DetailEventCalendar() {
<Text style={[Styles.textDefault]}>Total {member.length} Anggota</Text> <Text style={[Styles.textDefault]}>Total {member.length} Anggota</Text>
</View> </View>
<View style={[Styles.wrapPaper]}> <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{ {
member.map((item, index) => ( member.map((item, index) => (
<BorderBottomItem <BorderBottomItem
@@ -286,7 +288,7 @@ export default function DetailEventCalendar() {
<DrawerBottom animation="slide" isVisible={isModalMember} setVisible={setModalMember} title={memberChoose.name}> <DrawerBottom animation="slide" isVisible={isModalMember} setVisible={setModalMember} title={memberChoose.name}>
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="account-eye" color="black" size={25} />} icon={<MaterialCommunityIcons name="account-eye" color={colors.text} size={25} />}
title="Lihat Profil" title="Lihat Profil"
onPress={() => { onPress={() => {
setModalMember(false) setModalMember(false)
@@ -295,7 +297,7 @@ export default function DetailEventCalendar() {
/> />
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="account-remove" color="black" size={25} />} icon={<MaterialCommunityIcons name="account-remove" color={colors.text} size={25} />}
title="Keluarkan" title="Keluarkan"
onPress={() => { onPress={() => {
setModalMember(false) setModalMember(false)

6
app/(application)/division/[id]/(fitur-division)/calendar/create-member.tsx
View File

@@ -10,6 +10,7 @@ import { apiCreateCalendar, apiGetDivisionMember } from "@/lib/api";
import { setFormCreateCalendar } from "@/lib/calendarCreate"; import { setFormCreateCalendar } from "@/lib/calendarCreate";
import { setUpdateCalendar } from "@/lib/calendarUpdate"; import { setUpdateCalendar } from "@/lib/calendarUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -24,6 +25,7 @@ type Props = {
} }
export default function CreateCalendarAddMember() { export default function CreateCalendarAddMember() {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
@@ -90,7 +92,7 @@ export default function CreateCalendarAddMember() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -164,7 +166,7 @@ export default function CreateCalendarAddMember() {
</View> </View>
</View> </View>
{ {
selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={'black'} /> selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
} }
</Pressable> </Pressable>
) )

16
app/(application)/division/[id]/(fitur-division)/calendar/create.tsx
View File

@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
import { setFormCreateCalendar } from "@/lib/calendarCreate"; import { setFormCreateCalendar } from "@/lib/calendarCreate";
import { stringToDateTime } from "@/lib/fun_stringToDate"; import { stringToDateTime } from "@/lib/fun_stringToDate";
import { useHeaderHeight } from '@react-navigation/elements'; import { useHeaderHeight } from '@react-navigation/elements';
import { useTheme } from "@/providers/ThemeProvider";
import { Stack, router, useLocalSearchParams } from "expo-router"; import { Stack, router, useLocalSearchParams } from "expo-router";
import { useState } from "react"; import { useState } from "react";
import { import {
@@ -21,6 +22,7 @@ import {
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function CalendarDivisionCreate() { export default function CalendarDivisionCreate() {
const { colors } = useTheme();
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
const [choose, setChoose] = useState({ val: "", label: "" }) const [choose, setChoose] = useState({ val: "", label: "" })
const [isSelect, setSelect] = useState(false) const [isSelect, setSelect] = useState(false)
@@ -126,7 +128,7 @@ export default function CalendarDivisionCreate() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -144,7 +146,7 @@ export default function CalendarDivisionCreate() {
// disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventType == ""} // disable={Object.values(error).some((val) => val == true) || data.title == "" || data.dateStart == "" || data.timeStart == "" || data.timeEnd == "" || data.repeatEventType == ""}
// /> // />
// ), // ),
header:()=>( header: () => (
<AppHeader <AppHeader
title="Tambah Acara" title="Tambah Acara"
showBack={true} showBack={true}
@@ -173,7 +175,7 @@ export default function CalendarDivisionCreate() {
type="default" type="default"
placeholder="Nama Acara" placeholder="Nama Acara"
required required
bg="white" bg={colors.card}
value={data.title} value={data.title}
onChange={(val) => validationForm("title", val)} onChange={(val) => validationForm("title", val)}
error={error.title} error={error.title}
@@ -219,12 +221,12 @@ export default function CalendarDivisionCreate() {
label="Link Meet" label="Link Meet"
type="default" type="default"
placeholder="Link Meet" placeholder="Link Meet"
bg="white" bg={colors.card}
value={data.linkMeet} value={data.linkMeet}
onChange={(val) => validationForm("linkMeet", val)} onChange={(val) => validationForm("linkMeet", val)}
/> />
<SelectForm <SelectForm
bg="white" bg={colors.card}
label="Ulangi Acara" label="Ulangi Acara"
placeholder="Ulangi Acara" placeholder="Ulangi Acara"
value={choose.label} value={choose.label}
@@ -236,7 +238,7 @@ export default function CalendarDivisionCreate() {
type="numeric" type="numeric"
placeholder="Jumlah Pengulangan" placeholder="Jumlah Pengulangan"
required required
bg="white" bg={colors.card}
value={String(data.repeatValue)} value={String(data.repeatValue)}
onChange={(val) => validationForm("repeatValue", val)} onChange={(val) => validationForm("repeatValue", val)}
error={error.repeatValue} error={error.repeatValue}
@@ -247,7 +249,7 @@ export default function CalendarDivisionCreate() {
label="Deskripsi" label="Deskripsi"
type="default" type="default"
placeholder="Deskripsi" placeholder="Deskripsi"
bg="white" bg={colors.card}
value={data.desc} value={data.desc}
onChange={(val) => validationForm("desc", val)} onChange={(val) => validationForm("desc", val)}
multiline multiline

6
app/(application)/division/[id]/(fitur-division)/calendar/history.tsx
View File

@@ -5,6 +5,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetCalendarHistory } from "@/lib/api"; import { apiGetCalendarHistory } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { useLocalSearchParams } from "expo-router"; import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { FlatList, View, VirtualizedList } from "react-native"; import { FlatList, View, VirtualizedList } from "react-native";
@@ -15,6 +16,7 @@ type Props = {
data: [] data: []
} }
export default function CalendarHistory() { export default function CalendarHistory() {
const { colors, activeTheme } = useTheme();
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
@@ -64,7 +66,7 @@ export default function CalendarHistory() {
}) })
return ( return (
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<View> <View>
<InputSearch onChange={(val) => setSearch(val)} /> <InputSearch onChange={(val) => setSearch(val)} />
</View> </View>
@@ -81,7 +83,7 @@ export default function CalendarHistory() {
getItem={getItem} getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => { renderItem={({ item, index }: { item: Props, index: number }) => {
return ( return (
<View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}> <View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, activeTheme === 'dark' ? { backgroundColor: colors.card } : ColorsStatus.lightGreen, Styles.p10, Styles.round10, { borderBottomWidth: 1, borderColor: colors.background }]}>
<View style={[Styles.mr10, Styles.ph05]}> <View style={[Styles.mr10, Styles.ph05]}>
<Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text> <Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text> <Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>

26
app/(application)/division/[id]/(fitur-division)/calendar/index.tsx
View File

@@ -7,6 +7,7 @@ import Text from "@/components/Text";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetCalendarByDateDivision, apiGetIndicatorCalendar } from "@/lib/api"; import { apiGetCalendarByDateDivision, apiGetIndicatorCalendar } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather } from "@expo/vector-icons"; import { Feather } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import 'intl'; import 'intl';
@@ -34,6 +35,7 @@ type Props = {
}; };
export default function CalendarDivision() { export default function CalendarDivision() {
const { colors, activeTheme } = useTheme();
const [selected, setSelected] = useState<any>(new Date()) const [selected, setSelected] = useState<any>(new Date())
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
@@ -117,15 +119,15 @@ export default function CalendarDivision() {
); );
}, },
IconNext: <Pressable onPress={() => !loadingBtn ? setMonth(month + 1) : null}> IconNext: <Pressable onPress={() => !loadingBtn ? setMonth(month + 1) : null}>
<Feather name="chevron-right" size={20} color={loadingBtn ? 'gray' : 'black'} /> <Feather name="chevron-right" size={20} color={loadingBtn ? 'gray' : colors.text} />
</Pressable>, </Pressable>,
IconPrev: <Pressable onPress={() => !loadingBtn ? setMonth(month - 1) : null}> IconPrev: <Pressable onPress={() => !loadingBtn ? setMonth(month - 1) : null}>
<Feather name="chevron-left" size={20} color={loadingBtn ? 'gray' : 'black'} /> <Feather name="chevron-left" size={20} color={loadingBtn ? 'gray' : colors.text} />
</Pressable>, </Pressable>,
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -158,7 +160,7 @@ export default function CalendarDivision() {
style={[Styles.h100]} style={[Styles.h100]}
> >
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Datepicker <Datepicker
components={components} components={components}
mode="single" mode="single"
@@ -167,19 +169,19 @@ export default function CalendarDivision() {
onMonthChange={(month) => setMonth(month)} onMonthChange={(month) => setMonth(month)}
styles={{ styles={{
selected: Styles.selectedDate, selected: Styles.selectedDate,
month_label: Styles.cBlack, month_label: { color: colors.text },
month_selector_label: Styles.cBlack, month_selector_label: { color: colors.text },
year_label: Styles.cBlack, year_label: { color: colors.text },
year_selector_label: Styles.cBlack, year_selector_label: { color: colors.text },
day_label: Styles.cBlack, day_label: { color: colors.text },
time_label: Styles.cBlack, time_label: { color: colors.text },
weekday_label: Styles.cBlack, weekday_label: { color: colors.text },
}} }}
/> />
</View> </View>
<View style={[Styles.mb15, Styles.mt15]}> <View style={[Styles.mb15, Styles.mt15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara</Text> <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Acara</Text>
<View style={[Styles.wrapPaper]}> <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{ {
loading ? loading ?
<> <>

13
app/(application)/division/[id]/(fitur-division)/discussion/[detail]/edit.tsx
View File

@@ -11,6 +11,7 @@ import Styles from "@/constants/Styles";
import { apiEditDiscussion, apiGetDiscussionOne } from "@/lib/api"; import { apiEditDiscussion, apiGetDiscussionOne } from "@/lib/api";
import { setUpdateDiscussion } from "@/lib/discussionUpdate"; import { setUpdateDiscussion } from "@/lib/discussionUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"; import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import * as DocumentPicker from "expo-document-picker"; import * as DocumentPicker from "expo-document-picker";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -20,6 +21,7 @@ import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function DiscussionDivisionEdit() { export default function DiscussionDivisionEdit() {
const { colors } = useTheme();
const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>(); const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const [data, setData] = useState(""); const [data, setData] = useState("");
@@ -127,7 +129,7 @@ export default function DiscussionDivisionEdit() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -177,20 +179,21 @@ export default function DiscussionDivisionEdit() {
value={data} value={data}
onChange={setData} onChange={setData}
multiline multiline
bg={colors.card}
/> />
<ButtonSelect value="Upload File" onPress={pickDocumentAsync} /> <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
{ {
(fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0) (fileForm.length > 0 || dataFile.filter((val) => !val.delete).length > 0)
&& &&
<View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}> <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10, { borderColor: colors.background, backgroundColor: colors.card }]}>
<Text style={[Styles.textDefaultSemiBold]}>File</Text> <Text style={[Styles.textDefaultSemiBold]}>File</Text>
{ {
dataFile.filter((val) => !val.delete).map((item, index) => ( dataFile.filter((val) => !val.delete).map((item, index) => (
<BorderBottomItem <BorderBottomItem
key={index} key={index}
borderType={(fileForm.length + dataFile.length) > 1 ? "bottom" : "none"} 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} title={item.name + '.' + item.extension}
titleWeight="normal" titleWeight="normal"
onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }} onPress={() => { setIndexDelFile({ id: item.id, cat: "oldFile" }); setModalFile(true) }}
@@ -202,7 +205,7 @@ export default function DiscussionDivisionEdit() {
<BorderBottomItem <BorderBottomItem
key={index} key={index}
borderType={fileForm.length > 1 ? "bottom" : "none"} 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} title={item.name}
titleWeight="normal" titleWeight="normal"
onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }} onPress={() => { setIndexDelFile({ id: index, cat: "newFile" }); setModalFile(true) }}
@@ -218,7 +221,7 @@ export default function DiscussionDivisionEdit() {
<DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu"> <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />} icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { deleteFile(indexDelFile.id, indexDelFile.cat) }} onPress={() => { deleteFile(indexDelFile.id, indexDelFile.cat) }}
/> />

18
app/(application)/division/[id]/(fitur-division)/discussion/[detail]/index.tsx
View File

@@ -25,6 +25,7 @@ import { getDB } from "@/lib/firebaseDatabase";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"; import { Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import { ref } from "@react-native-firebase/database"; import { ref } from "@react-native-firebase/database";
import { useTheme } from "@/providers/ThemeProvider";
import { useHeaderHeight } from '@react-navigation/elements'; import { useHeaderHeight } from '@react-navigation/elements';
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -64,6 +65,7 @@ type PropsFile = {
} }
export default function DiscussionDetail() { export default function DiscussionDetail() {
const { colors } = useTheme();
const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>(); const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
const [data, setData] = useState<Props>(); const [data, setData] = useState<Props>();
const [dataComment, setDataComment] = useState<PropsComment[]>([]); const [dataComment, setDataComment] = useState<PropsComment[]>([]);
@@ -306,7 +308,7 @@ export default function DiscussionDetail() {
) )
}} }}
/> />
<View style={{ flex: 1 }}> <View style={{ flex: 1, backgroundColor: colors.background }}>
<ScrollView <ScrollView
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
@@ -410,7 +412,7 @@ export default function DiscussionDetail() {
style={[ style={[
Styles.contentItemCenter, Styles.contentItemCenter,
Styles.w100, Styles.w100,
{ backgroundColor: "#f4f4f4" }, { backgroundColor: colors.background },
viewEdit && Styles.borderTop viewEdit && Styles.borderTop
]} ]}
> >
@@ -419,15 +421,15 @@ export default function DiscussionDetail() {
<> <>
<View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}> <View style={[Styles.w90, Styles.rowSpaceBetween, Styles.pv05]}>
<View style={[Styles.rowItemsCenter]}> <View style={[Styles.rowItemsCenter]}>
<Feather name="edit-3" color="black" size={22} style={[Styles.mh05]} /> <Feather name="edit-3" color={colors.text} size={22} style={[Styles.mh05]} />
<Text style={[Styles.textMediumSemiBold]}>Edit Komentar</Text> <Text style={[Styles.textMediumSemiBold]}>Edit Komentar</Text>
</View> </View>
<Pressable onPress={() => handleViewEditKomentar()}> <Pressable onPress={() => handleViewEditKomentar()}>
<MaterialIcons name="close" color="black" size={22} /> <MaterialIcons name="close" color={colors.text} size={22} />
</Pressable> </Pressable>
</View> </View>
<InputForm <InputForm
bg="white" bg={colors.card}
type="default" type="default"
round round
multiline multiline
@@ -474,7 +476,7 @@ export default function DiscussionDetail() {
isMemberDivision) isMemberDivision)
? ?
<InputForm <InputForm
bg="white" bg={colors.card}
type="default" type="default"
round round
multiline multiline
@@ -531,12 +533,12 @@ export default function DiscussionDetail() {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Komentar"> <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Komentar">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit" title="Edit"
onPress={() => { handleViewEditKomentar() }} onPress={() => { handleViewEditKomentar() }}
/> />
<MenuItemRow <MenuItemRow
icon={<MaterialIcons name="delete" color="black" size={25} />} icon={<MaterialIcons name="delete" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { onPress={() => {
AlertKonfirmasi({ AlertKonfirmasi({

11
app/(application)/division/[id]/(fitur-division)/discussion/create.tsx
View File

@@ -11,6 +11,7 @@ import Styles from "@/constants/Styles"
import { apiCreateDiscussion } from "@/lib/api" import { apiCreateDiscussion } from "@/lib/api"
import { setUpdateDiscussion } from "@/lib/discussionUpdate" import { setUpdateDiscussion } from "@/lib/discussionUpdate"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons" import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
import * as DocumentPicker from "expo-document-picker" import * as DocumentPicker from "expo-document-picker"
import { router, Stack, useLocalSearchParams } from "expo-router" import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -21,6 +22,7 @@ import { useDispatch, useSelector } from "react-redux"
export default function CreateDiscussionDivision() { export default function CreateDiscussionDivision() {
const { colors } = useTheme();
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
const [desc, setDesc] = useState('') const [desc, setDesc] = useState('')
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
@@ -88,7 +90,7 @@ export default function CreateDiscussionDivision() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -127,19 +129,20 @@ export default function CreateDiscussionDivision() {
required required
onChange={setDesc} onChange={setDesc}
multiline multiline
bg={colors.card}
/> />
<ButtonSelect value="Upload File" onPress={pickDocumentAsync} /> <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
{ {
fileForm.length > 0 fileForm.length > 0
&& &&
<View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10]}> <View style={[Styles.borderAll, Styles.round10, Styles.p10, Styles.mb10, { borderColor: colors.background, backgroundColor: colors.card }]}>
<Text style={[Styles.textDefaultSemiBold]}>File</Text> <Text style={[Styles.textDefaultSemiBold]}>File</Text>
{ {
fileForm.map((item, index) => ( fileForm.map((item, index) => (
<BorderBottomItem <BorderBottomItem
key={index} key={index}
borderType={fileForm.length > 1 ? "bottom" : "none"} 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} title={item.name}
titleWeight="normal" titleWeight="normal"
onPress={() => { setIndexDelFile(index); setModalFile(true) }} onPress={() => { setIndexDelFile(index); setModalFile(true) }}
@@ -154,7 +157,7 @@ export default function CreateDiscussionDivision() {
<DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu"> <DrawerBottom animation="slide" isVisible={isModalFile} setVisible={setModalFile} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />} icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { deleteFile(indexDelFile) }} onPress={() => { deleteFile(indexDelFile) }}
/> />

10
app/(application)/division/[id]/(fitur-division)/discussion/index.tsx
View File

@@ -9,6 +9,7 @@ import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetDiscussion, apiGetDivisionOneFeature } from "@/lib/api"; import { apiGetDiscussion, apiGetDivisionOneFeature } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, Feather, Ionicons } from "@expo/vector-icons"; import { AntDesign, Feather, Ionicons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router"; import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -30,6 +31,7 @@ type Props = {
export default function DiscussionDivision() { export default function DiscussionDivision() {
const { colors } = useTheme();
const { id, active } = useLocalSearchParams<{ id: string, active?: string }>() const { id, active } = useLocalSearchParams<{ id: string, active?: string }>()
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
@@ -128,24 +130,24 @@ export default function DiscussionDivision() {
}) })
return ( return (
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
{ {
((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) && ((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) &&
<View> <View>
<View style={[Styles.wrapBtnTab]}> <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<ButtonTab <ButtonTab
active={status == "false" ? "false" : "true"} active={status == "false" ? "false" : "true"}
value="true" value="true"
onPress={() => { setStatus("true") }} onPress={() => { setStatus("true") }}
label="Aktif" label="Aktif"
icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />} icon={<Feather name="check-circle" color={status == "false" ? colors.text : 'white'} size={20} />}
n={2} /> n={2} />
<ButtonTab <ButtonTab
active={status == "false" ? "false" : "true"} active={status == "false" ? "false" : "true"}
value="false" value="false"
onPress={() => { setStatus("false") }} onPress={() => { setStatus("false") }}
label="Arsip" label="Arsip"
icon={<AntDesign name="closecircleo" color={status == "true" ? 'black' : 'white'} size={20} />} icon={<AntDesign name="closecircleo" color={status == "true" ? colors.text : 'white'} size={20} />}
n={2} /> n={2} />
</View> </View>
<InputSearch onChange={setSearch} /> <InputSearch onChange={setSearch} />

8
app/(application)/division/[id]/(fitur-division)/document/index.tsx
View File

@@ -24,6 +24,7 @@ import {
} from "@/lib/api"; } from "@/lib/api";
import { setUpdateDokumen } from "@/lib/dokumenUpdate"; import { setUpdateDokumen } from "@/lib/dokumenUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { import {
AntDesign, AntDesign,
MaterialCommunityIcons, MaterialCommunityIcons,
@@ -66,6 +67,7 @@ type PropsPath = {
}; };
export default function DocumentDivision() { export default function DocumentDivision() {
const { colors } = useTheme();
const [loadingRename, setLoadingRename] = useState(false) const [loadingRename, setLoadingRename] = useState(false)
const [isShare, setShare] = useState(false) const [isShare, setShare] = useState(false)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
@@ -334,7 +336,7 @@ export default function DocumentDivision() {
}, [path]); }, [path]);
return ( return (
<SafeAreaView style={{ flex: 1 }}> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => // headerLeft: () =>
@@ -427,9 +429,9 @@ export default function DocumentDivision() {
}} }}
> >
{item.id != "home" && ( {item.id != "home" && (
<AntDesign name="right" style={[Styles.mh05, Styles.mt02]} color="black" /> <AntDesign name="right" style={[Styles.mh05, Styles.mt02]} color={colors.text} />
)} )}
<Text> {item.name} </Text> <Text style={{ color: colors.text }}> {item.name} </Text>
</Pressable> </Pressable>
)) ))
} }

10
app/(application)/division/[id]/(fitur-division)/task/[detail]/add-file.tsx
View File

@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
import { apiAddFileTask, apiCheckFileTask } from "@/lib/api"; import { apiAddFileTask, apiCheckFileTask } from "@/lib/api";
import { setUpdateTask } from "@/lib/taskUpdate"; import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"; import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import * as DocumentPicker from "expo-document-picker"; import * as DocumentPicker from "expo-document-picker";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -23,6 +24,7 @@ import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function TaskDivisionAddFile() { export default function TaskDivisionAddFile() {
const { colors } = useTheme();
const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>(); const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
const [fileForm, setFileForm] = useState<any[]>([]); const [fileForm, setFileForm] = useState<any[]>([]);
const [listFile, setListFile] = useState<any[]>([]); const [listFile, setListFile] = useState<any[]>([]);
@@ -127,7 +129,7 @@ export default function TaskDivisionAddFile() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -169,13 +171,13 @@ export default function TaskDivisionAddFile() {
listFile.length > 0 && ( listFile.length > 0 && (
<View style={[Styles.mb15]}> <View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text> <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
<View style={[Styles.wrapPaper]}> <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{ {
listFile.map((item, index) => ( listFile.map((item, index) => (
<BorderBottomItem <BorderBottomItem
key={index} key={index}
borderType="all" borderType="all"
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />} icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
title={item} title={item}
titleWeight="normal" titleWeight="normal"
onPress={() => { setIndexDelFile(index); setModal(true) }} onPress={() => { setIndexDelFile(index); setModal(true) }}
@@ -197,7 +199,7 @@ export default function TaskDivisionAddFile() {
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu"> <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />} icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { deleteFile(indexDelFile) }} onPress={() => { deleteFile(indexDelFile) }}
/> />

6
app/(application)/division/[id]/(fitur-division)/task/[detail]/add-member.tsx
View File

@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
import { apiAddMemberTask, apiGetDivisionMember, apiGetTaskOne } from "@/lib/api"; import { apiAddMemberTask, apiGetDivisionMember, apiGetTaskOne } from "@/lib/api";
import { setUpdateTask } from "@/lib/taskUpdate"; import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -23,6 +24,7 @@ type Props = {
} }
export default function AddMemberTask() { export default function AddMemberTask() {
const { colors } = useTheme();
const dispatch = useDispatch() const dispatch = useDispatch()
const update = useSelector((state: any) => state.projectUpdate) const update = useSelector((state: any) => state.projectUpdate)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
@@ -127,7 +129,7 @@ export default function AddMemberTask() {
) )
}} }}
/> />
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<InputSearch onChange={(val) => setSearch(val)} value={search} /> <InputSearch onChange={(val) => setSearch(val)} value={search} />
{ {
@@ -177,7 +179,7 @@ export default function AddMemberTask() {
</View> </View>
</View> </View>
{ {
selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={'black'} /> selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
} }
</Pressable> </Pressable>
) )

26
app/(application)/division/[id]/(fitur-division)/task/[detail]/add-task.tsx
View File

@@ -9,6 +9,7 @@ import { formatDateOnly } from "@/lib/fun_formatDateOnly";
import { getDatesInRange } from "@/lib/fun_getDatesInRange"; import { getDatesInRange } from "@/lib/fun_getDatesInRange";
import { setUpdateTask } from "@/lib/taskUpdate"; import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { useHeaderHeight } from '@react-navigation/elements'; import { useHeaderHeight } from '@react-navigation/elements';
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import 'intl'; import 'intl';
@@ -25,6 +26,7 @@ import DateTimePicker, { DateType } from "react-native-ui-datepicker";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function TaskDivisionAddTask() { export default function TaskDivisionAddTask() {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const dispatch = useDispatch(); const dispatch = useDispatch();
const update = useSelector((state: any) => state.taskUpdate); const update = useSelector((state: any) => state.taskUpdate);
@@ -138,7 +140,7 @@ export default function TaskDivisionAddTask() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -183,7 +185,7 @@ export default function TaskDivisionAddTask() {
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<DateTimePicker <DateTimePicker
mode="range" mode="range"
startDate={range.startDate} startDate={range.startDate}
@@ -193,13 +195,13 @@ export default function TaskDivisionAddTask() {
selected: Styles.selectedDate, selected: Styles.selectedDate,
selected_label: Styles.cWhite, selected_label: Styles.cWhite,
range_fill: Styles.selectRangeDate, range_fill: Styles.selectRangeDate,
month_label: Styles.cBlack, month_label: { color: colors.text },
month_selector_label: Styles.cBlack, month_selector_label: { color: colors.text },
year_label: Styles.cBlack, year_label: { color: colors.text },
year_selector_label: Styles.cBlack, year_selector_label: { color: colors.text },
day_label: Styles.cBlack, day_label: { color: colors.text },
time_label: Styles.cBlack, time_label: { color: colors.text },
weekday_label: Styles.cBlack, weekday_label: { color: colors.text },
}} }}
/> />
</View> </View>
@@ -209,7 +211,7 @@ export default function TaskDivisionAddTask() {
<Text style={[Styles.mb05]}> <Text style={[Styles.mb05]}>
Tanggal Mulai <Text style={Styles.cError}>*</Text> Tanggal Mulai <Text style={Styles.cError}>*</Text>
</Text> </Text>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: "center" }}>{from}</Text> <Text style={{ textAlign: "center" }}>{from}</Text>
</View> </View>
</View> </View>
@@ -217,7 +219,7 @@ export default function TaskDivisionAddTask() {
<Text style={[Styles.mb05]}> <Text style={[Styles.mb05]}>
Tanggal Berakhir <Text style={Styles.cError}>*</Text> Tanggal Berakhir <Text style={Styles.cError}>*</Text>
</Text> </Text>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: "center" }}>{to}</Text> <Text style={{ textAlign: "center" }}>{to}</Text>
</View> </View>
</View> </View>
@@ -238,7 +240,7 @@ export default function TaskDivisionAddTask() {
type="default" type="default"
placeholder="Judul Tugas" placeholder="Judul Tugas"
required required
bg="white" bg={colors.card}
value={title} value={title}
error={error.title} error={error.title}
errorText="Judul tidak boleh kosong" errorText="Judul tidak boleh kosong"

6
app/(application)/division/[id]/(fitur-division)/task/[detail]/cancel.tsx
View File

@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
import { apiCancelTask } from "@/lib/api"; import { apiCancelTask } from "@/lib/api";
import { setUpdateTask } from "@/lib/taskUpdate"; import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native"; import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function TaskDivisionCancel() { export default function TaskDivisionCancel() {
const { colors } = useTheme();
const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>(); const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -69,7 +71,7 @@ export default function TaskDivisionCancel() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -115,7 +117,7 @@ export default function TaskDivisionCancel() {
type="default" type="default"
placeholder="Alasan Pembatalan" placeholder="Alasan Pembatalan"
required required
bg="white" bg={colors.card}
error={error} error={error}
errorText="Alasan pembatalan harus diisi" errorText="Alasan pembatalan harus diisi"
onChange={(val) => onValidation(val)} onChange={(val) => onValidation(val)}

6
app/(application)/division/[id]/(fitur-division)/task/[detail]/edit.tsx
View File

@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
import { apiEditTask, apiGetTaskOne } from "@/lib/api"; import { apiEditTask, apiGetTaskOne } from "@/lib/api";
import { setUpdateTask } from "@/lib/taskUpdate"; import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native"; import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function TaskDivisionEdit() { export default function TaskDivisionEdit() {
const { colors } = useTheme();
const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>(); const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const [judul, setJudul] = useState(""); const [judul, setJudul] = useState("");
@@ -87,7 +89,7 @@ export default function TaskDivisionEdit() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -128,7 +130,7 @@ export default function TaskDivisionEdit() {
type="default" type="default"
placeholder="Judul Kegiatan" placeholder="Judul Kegiatan"
required required
bg="white" bg={colors.card}
value={judul} value={judul}
onChange={(val) => { onValidation(val) }} onChange={(val) => { onValidation(val) }}
error={error} error={error}

4
app/(application)/division/[id]/(fitur-division)/task/[detail]/index.tsx
View File

@@ -10,6 +10,7 @@ import SectionTanggalTugasTask from "@/components/task/sectionTanggalTugasTask";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetDivisionOneFeature, apiGetTaskOne } from "@/lib/api"; import { apiGetDivisionOneFeature, apiGetTaskOne } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native"; import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -25,6 +26,7 @@ type Props = {
} }
export default function DetailTaskDivision() { export default function DetailTaskDivision() {
const { colors } = useTheme();
const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>(); const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const [data, setData] = useState<Props>() const [data, setData] = useState<Props>()
@@ -97,7 +99,7 @@ export default function DetailTaskDivision() {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,

6
app/(application)/division/[id]/(fitur-division)/task/[detail]/report.tsx
View File

@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
import { apiGetTaskOne, apiReportTask } from "@/lib/api"; import { apiGetTaskOne, apiReportTask } from "@/lib/api";
import { setUpdateTask } from "@/lib/taskUpdate"; import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native"; import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function TaskDivisionReport() { export default function TaskDivisionReport() {
const { colors } = useTheme();
const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>(); const { id, detail } = useLocalSearchParams<{ id: string; detail: string }>();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const [laporan, setLaporan] = useState(""); const [laporan, setLaporan] = useState("");
@@ -87,7 +89,7 @@ export default function TaskDivisionReport() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -128,7 +130,7 @@ export default function TaskDivisionReport() {
type="default" type="default"
placeholder="Laporan Kegiatan" placeholder="Laporan Kegiatan"
required required
bg="white" bg={colors.card}
value={laporan} value={laporan}
onChange={(val) => { onValidation(val) }} onChange={(val) => { onValidation(val) }}
error={error} error={error}

13
app/(application)/division/[id]/(fitur-division)/task/create.tsx
View File

@@ -16,6 +16,7 @@ import { setMemberChoose } from "@/lib/memberChoose";
import { setTaskCreate } from "@/lib/taskCreate"; import { setTaskCreate } from "@/lib/taskCreate";
import { setUpdateTask } from "@/lib/taskUpdate"; import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"; import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import * as DocumentPicker from "expo-document-picker"; import * as DocumentPicker from "expo-document-picker";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -26,6 +27,7 @@ import { useDispatch, useSelector } from "react-redux";
export default function CreateTaskDivision() { export default function CreateTaskDivision() {
const { colors } = useTheme();
const { id } = useLocalSearchParams(); const { id } = useLocalSearchParams();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -113,7 +115,7 @@ export default function CreateTaskDivision() {
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -161,6 +163,7 @@ export default function CreateTaskDivision() {
val == "" || val == "null" ? setError(true) : setError(false); val == "" || val == "null" ? setError(true) : setError(false);
}} }}
error={error} error={error}
bg={colors.card}
errorText="Judul Tugas tidak boleh kosong" errorText="Judul Tugas tidak boleh kosong"
/> />
<ButtonSelect value="Tambah Tanggal & Tugas" onPress={() => { router.push(`/division/${id}/task/create/task`); }} /> <ButtonSelect value="Tambah Tanggal & Tugas" onPress={() => { router.push(`/division/${id}/task/create/task`); }} />
@@ -171,13 +174,13 @@ export default function CreateTaskDivision() {
fileForm.length > 0 && ( fileForm.length > 0 && (
<View style={[Styles.mb15]}> <View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text> <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
<View style={[Styles.wrapPaper]}> <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{ {
fileForm.map((item, index) => ( fileForm.map((item, index) => (
<BorderBottomItem <BorderBottomItem
key={index} key={index}
borderType="all" borderType="all"
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />} icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
title={item.name} title={item.name}
titleWeight="normal" titleWeight="normal"
onPress={() => { setIndexDelFile(index); setModal(true) }} onPress={() => { setIndexDelFile(index); setModal(true) }}
@@ -195,7 +198,7 @@ export default function CreateTaskDivision() {
<Text>Total {entitiesMember.length} Anggota</Text> <Text>Total {entitiesMember.length} Anggota</Text>
</View> </View>
<View style={[Styles.borderAll, Styles.round10, Styles.p10]}> <View style={[Styles.borderAll, Styles.round10, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
{entitiesMember.map( {entitiesMember.map(
(item: { img: any; name: any }, index: any) => { (item: { img: any; name: any }, index: any) => {
return ( return (
@@ -223,7 +226,7 @@ export default function CreateTaskDivision() {
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu"> <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />} icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { deleteFile(indexDelFile) }} onPress={() => { deleteFile(indexDelFile) }}
/> />

6
app/(application)/division/[id]/(fitur-division)/task/create/member.tsx
View File

@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
import { apiGetDivisionMember } from "@/lib/api"; import { apiGetDivisionMember } from "@/lib/api";
import { setMemberChoose } from "@/lib/memberChoose"; import { setMemberChoose } from "@/lib/memberChoose";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -23,6 +24,7 @@ type Props = {
} }
export default function AddMemberCreateTask() { export default function AddMemberCreateTask() {
const { colors } = useTheme();
const dispatch = useDispatch() const dispatch = useDispatch()
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string, detail: string }>() const { id } = useLocalSearchParams<{ id: string, detail: string }>()
@@ -97,7 +99,7 @@ export default function AddMemberCreateTask() {
) )
}} }}
/> />
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<InputSearch onChange={(val) => setSearch(val)} value={search} /> <InputSearch onChange={(val) => setSearch(val)} value={search} />
{ {
@@ -143,7 +145,7 @@ export default function AddMemberCreateTask() {
</View> </View>
</View> </View>
{ {
selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={'black'} /> selectMember.some((i: any) => i.idUser == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
} }
</Pressable> </Pressable>
) )

26
app/(application)/division/[id]/(fitur-division)/task/create/task.tsx
View File

@@ -1,5 +1,6 @@
import AppHeader from "@/components/AppHeader"; import AppHeader from "@/components/AppHeader";
import ButtonSaveHeader from "@/components/buttonSaveHeader"; import ButtonSaveHeader from "@/components/buttonSaveHeader";
import { useTheme } from "@/providers/ThemeProvider";
import { InputForm } from "@/components/inputForm"; import { InputForm } from "@/components/inputForm";
import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask"; import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
import Text from "@/components/Text"; import Text from "@/components/Text";
@@ -27,6 +28,7 @@ import DateTimePicker, {
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function CreateTaskAddTugas() { export default function CreateTaskAddTugas() {
const { colors } = useTheme();
const headerHeight = useHeaderHeight(); const headerHeight = useHeaderHeight();
const dispatch = useDispatch() const dispatch = useDispatch()
const [disable, setDisable] = useState(true); const [disable, setDisable] = useState(true);
@@ -118,7 +120,7 @@ export default function CreateTaskAddTugas() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -158,7 +160,7 @@ export default function CreateTaskAddTugas() {
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<DateTimePicker <DateTimePicker
mode="range" mode="range"
startDate={range.startDate} startDate={range.startDate}
@@ -168,13 +170,13 @@ export default function CreateTaskAddTugas() {
selected: Styles.selectedDate, selected: Styles.selectedDate,
selected_label: Styles.cWhite, selected_label: Styles.cWhite,
range_fill: Styles.selectRangeDate, range_fill: Styles.selectRangeDate,
month_label: Styles.cBlack, month_label: { color: colors.text },
month_selector_label: Styles.cBlack, month_selector_label: { color: colors.text },
year_label: Styles.cBlack, year_label: { color: colors.text },
year_selector_label: Styles.cBlack, year_selector_label: { color: colors.text },
day_label: Styles.cBlack, day_label: { color: colors.text },
time_label: Styles.cBlack, time_label: { color: colors.text },
weekday_label: Styles.cBlack, weekday_label: { color: colors.text },
}} }}
/> />
</View> </View>
@@ -184,7 +186,7 @@ export default function CreateTaskAddTugas() {
<Text style={[Styles.mb05]}> <Text style={[Styles.mb05]}>
Tanggal Mulai <Text style={Styles.cError}>*</Text> Tanggal Mulai <Text style={Styles.cError}>*</Text>
</Text> </Text>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: "center" }}>{from}</Text> <Text style={{ textAlign: "center" }}>{from}</Text>
</View> </View>
</View> </View>
@@ -192,7 +194,7 @@ export default function CreateTaskAddTugas() {
<Text style={[Styles.mb05]}> <Text style={[Styles.mb05]}>
Tanggal Berakhir <Text style={Styles.cError}>*</Text> Tanggal Berakhir <Text style={Styles.cError}>*</Text>
</Text> </Text>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: "center" }}>{to}</Text> <Text style={{ textAlign: "center" }}>{to}</Text>
</View> </View>
</View> </View>
@@ -213,7 +215,7 @@ export default function CreateTaskAddTugas() {
type="default" type="default"
placeholder="Judul Tugas" placeholder="Judul Tugas"
required required
bg="white" bg={colors.card}
value={title} value={title}
error={error.title} error={error.title}
errorText="Judul tidak boleh kosong" errorText="Judul tidak boleh kosong"

14
app/(application)/division/[id]/(fitur-division)/task/index.tsx
View File

@@ -11,6 +11,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetTask } from "@/lib/api"; import { apiGetTask } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { import {
AntDesign, AntDesign,
Ionicons, Ionicons,
@@ -31,6 +32,7 @@ type Props = {
}; };
export default function ListTask() { export default function ListTask() {
const { colors } = useTheme()
const { id, status, year } = useLocalSearchParams<{ id: string; status: string; year: string }>() const { id, status, year } = useLocalSearchParams<{ id: string; status: string; year: string }>()
const [isList, setList] = useState(false) const [isList, setList] = useState(false)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
@@ -110,7 +112,7 @@ export default function ListTask() {
}) })
return ( return (
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<View> <View>
<ScrollView horizontal style={[Styles.mb10]} showsHorizontalScrollIndicator={false}> <ScrollView horizontal style={[Styles.mb10]} showsHorizontalScrollIndicator={false}>
<ButtonTab <ButtonTab
@@ -121,7 +123,7 @@ export default function ListTask() {
icon={ icon={
<MaterialCommunityIcons <MaterialCommunityIcons
name="clock-alert-outline" name="clock-alert-outline"
color={statusFix == "0" ? "white" : "black"} color={statusFix == "0" ? "white" : colors.text}
size={20} size={20}
/> />
} }
@@ -135,7 +137,7 @@ export default function ListTask() {
icon={ icon={
<MaterialCommunityIcons <MaterialCommunityIcons
name="progress-check" name="progress-check"
color={statusFix == "1" ? "white" : "black"} color={statusFix == "1" ? "white" : colors.text}
size={20} size={20}
/> />
} }
@@ -149,7 +151,7 @@ export default function ListTask() {
icon={ icon={
<Ionicons <Ionicons
name="checkmark-done-circle-outline" name="checkmark-done-circle-outline"
color={statusFix == "2" ? "white" : "black"} color={statusFix == "2" ? "white" : colors.text}
size={20} size={20}
/> />
} }
@@ -163,7 +165,7 @@ export default function ListTask() {
icon={ icon={
<AntDesign <AntDesign
name="closecircleo" name="closecircleo"
color={statusFix == "3" ? "white" : "black"} color={statusFix == "3" ? "white" : colors.text}
size={20} size={20}
/> />
} }
@@ -179,7 +181,7 @@ export default function ListTask() {
> >
<MaterialCommunityIcons <MaterialCommunityIcons
name={isList ? "format-list-bulleted" : "view-grid"} name={isList ? "format-list-bulleted" : "view-grid"}
color={"black"} color={colors.text}
size={30} size={30}
/> />
</Pressable> </Pressable>

26
app/(application)/division/[id]/(fitur-division)/task/update/[detail].tsx
View File

@@ -4,6 +4,7 @@ import { InputForm } from "@/components/inputForm";
import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask"; import ModalAddDetailTugasTask from "@/components/task/modalAddDetailTugasTask";
import Text from "@/components/Text"; import Text from "@/components/Text";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { apiEditTaskTugas, apiGetTaskTugas } from "@/lib/api"; import { apiEditTaskTugas, apiGetTaskTugas } from "@/lib/api";
import { formatDateOnly } from "@/lib/fun_formatDateOnly"; import { formatDateOnly } from "@/lib/fun_formatDateOnly";
import { getDatesInRange } from "@/lib/fun_getDatesInRange"; import { getDatesInRange } from "@/lib/fun_getDatesInRange";
@@ -28,6 +29,7 @@ import DateTimePicker, { DateType } from "react-native-ui-datepicker";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function UpdateProjectTaskDivision() { export default function UpdateProjectTaskDivision() {
const { colors } = useTheme();
const headerHeight = useHeaderHeight(); const headerHeight = useHeaderHeight();
const { detail } = useLocalSearchParams<{ detail: string }>(); const { detail } = useLocalSearchParams<{ detail: string }>();
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -186,7 +188,7 @@ export default function UpdateProjectTaskDivision() {
}, [range]) }, [range])
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -231,7 +233,7 @@ export default function UpdateProjectTaskDivision() {
> >
<ScrollView> <ScrollView>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
{!loading && ( {!loading && (
<DateTimePicker <DateTimePicker
mode="range" mode="range"
@@ -244,13 +246,13 @@ export default function UpdateProjectTaskDivision() {
selected: Styles.selectedDate, selected: Styles.selectedDate,
selected_label: Styles.cWhite, selected_label: Styles.cWhite,
range_fill: Styles.selectRangeDate, range_fill: Styles.selectRangeDate,
month_label: Styles.cBlack, month_label: { color: colors.text },
month_selector_label: Styles.cBlack, month_selector_label: { color: colors.text },
year_label: Styles.cBlack, year_label: { color: colors.text },
year_selector_label: Styles.cBlack, year_selector_label: { color: colors.text },
day_label: Styles.cBlack, day_label: { color: colors.text },
time_label: Styles.cBlack, time_label: { color: colors.text },
weekday_label: Styles.cBlack, weekday_label: { color: colors.text },
}} }}
/> />
)} )}
@@ -261,7 +263,7 @@ export default function UpdateProjectTaskDivision() {
<Text style={[Styles.mb05]}> <Text style={[Styles.mb05]}>
Tanggal Mulai <Text style={Styles.cError}>*</Text> Tanggal Mulai <Text style={Styles.cError}>*</Text>
</Text> </Text>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: "center" }}>{from}</Text> <Text style={{ textAlign: "center" }}>{from}</Text>
</View> </View>
</View> </View>
@@ -269,7 +271,7 @@ export default function UpdateProjectTaskDivision() {
<Text style={[Styles.mb05]}> <Text style={[Styles.mb05]}>
Tanggal Berakhir <Text style={Styles.cError}>*</Text> Tanggal Berakhir <Text style={Styles.cError}>*</Text>
</Text> </Text>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: "center" }}>{to}</Text> <Text style={{ textAlign: "center" }}>{to}</Text>
</View> </View>
</View> </View>
@@ -292,7 +294,7 @@ export default function UpdateProjectTaskDivision() {
type="default" type="default"
placeholder="Judul Tugas" placeholder="Judul Tugas"
required required
bg="white" bg={colors.card}
value={title} value={title}
error={error.title} error={error.title}
errorText="Judul tidak boleh kosong" errorText="Judul tidak boleh kosong"

6
app/(application)/division/[id]/add-member.tsx
View File

@@ -8,6 +8,7 @@ import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiAddMemberDivision, apiGetDivisionOneDetail, apiGetUser } from "@/lib/api"; import { apiAddMemberDivision, apiGetDivisionOneDetail, apiGetUser } from "@/lib/api";
import { setUpdateDivision } from "@/lib/divisionUpdate"; import { setUpdateDivision } from "@/lib/divisionUpdate";
import { useTheme } from "@/providers/ThemeProvider";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -23,6 +24,7 @@ type Props = {
} }
export default function AddMemberDivision() { export default function AddMemberDivision() {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
const [dataOld, setDataOld] = useState<Props[]>([]) const [dataOld, setDataOld] = useState<Props[]>([])
@@ -130,7 +132,7 @@ export default function AddMemberDivision() {
) )
}} }}
/> />
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<InputSearch onChange={(val) => handleSearch(val)} value={search} /> <InputSearch onChange={(val) => handleSearch(val)} value={search} />
{ {
@@ -180,7 +182,7 @@ export default function AddMemberDivision() {
</View> </View>
</View> </View>
{ {
selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} /> selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
} }
</Pressable> </Pressable>
) )

6
app/(application)/division/[id]/edit.tsx
View File

@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
import { apiEditDivision, apiGetDivisionOneDetail } from "@/lib/api"; import { apiEditDivision, apiGetDivisionOneDetail } from "@/lib/api";
import { setUpdateDivision } from "@/lib/divisionUpdate"; import { setUpdateDivision } from "@/lib/divisionUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native"; import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function EditDivision() { export default function EditDivision() {
const { colors } = useTheme();
const dispatch = useDispatch() const dispatch = useDispatch()
const update = useSelector((state: any) => state.divisionUpdate) const update = useSelector((state: any) => state.divisionUpdate)
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
@@ -63,7 +65,7 @@ export default function EditDivision() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -98,7 +100,7 @@ export default function EditDivision() {
) )
}} }}
/> />
<ScrollView> <ScrollView style={{ backgroundColor: colors.background }}>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>
<InputForm <InputForm
label="Nama Divisi" label="Nama Divisi"

4
app/(application)/division/[id]/index.tsx
View File

@@ -8,6 +8,7 @@ import CaraouselHome from "@/components/home/carouselHome"
import Styles from "@/constants/Styles" import Styles from "@/constants/Styles"
import { apiGetDivisionOneDetail } from "@/lib/api" import { apiGetDivisionOneDetail } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { router, Stack, useLocalSearchParams } from "expo-router" import { router, Stack, useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native" import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
@@ -22,6 +23,7 @@ type Props = {
} }
export default function DetailDivisionFitur() { export default function DetailDivisionFitur() {
const { colors } = useTheme()
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
const [data, setData] = useState<Props>() const [data, setData] = useState<Props>()
@@ -54,7 +56,7 @@ export default function DetailDivisionFitur() {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,

16
app/(application)/division/[id]/info.tsx
View File

@@ -14,6 +14,7 @@ import Styles from "@/constants/Styles"
import { apiDeleteMemberDivision, apiGetDivisionOneDetail, apiGetDivisionOneFeature, apiUpdateStatusAdminDivision } from "@/lib/api" import { apiDeleteMemberDivision, apiGetDivisionOneDetail, apiGetDivisionOneFeature, apiUpdateStatusAdminDivision } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons" import { Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { useTheme } from "@/providers/ThemeProvider"
import { router, Stack, useLocalSearchParams } from "expo-router" import { router, Stack, useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native" import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native"
@@ -39,6 +40,7 @@ type PropsMember = {
} }
export default function InformationDivision() { export default function InformationDivision() {
const { colors } = useTheme()
const [refreshing, setRefreshing] = useState(false) const [refreshing, setRefreshing] = useState(false)
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
@@ -161,7 +163,7 @@ export default function InformationDivision() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -187,7 +189,7 @@ export default function InformationDivision() {
onRefresh={handleRefresh} onRefresh={handleRefresh}
/> />
} }
style={[Styles.h100]} style={[Styles.h100, { backgroundColor: colors.background }]}
> >
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
{ {
@@ -197,7 +199,7 @@ export default function InformationDivision() {
} }
<View style={[Styles.mb15]}> <View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Deskripsi Divisi</Text> <Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Deskripsi Divisi</Text>
<View style={[Styles.wrapPaper]}> <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{loading ? {loading ?
arrSkeleton.map((item, index) => { arrSkeleton.map((item, index) => {
return ( return (
@@ -211,7 +213,7 @@ export default function InformationDivision() {
</View> </View>
<View style={[Styles.mb15]}> <View style={[Styles.mb15]}>
<Text style={[Styles.textDefault, Styles.mv05]}>{dataMember.length} Anggota</Text> <Text style={[Styles.textDefault, Styles.mv05]}>{dataMember.length} Anggota</Text>
<View style={[Styles.wrapPaper]}> <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{ {
((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) && ((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) &&
dataDetail?.isActive && ( dataDetail?.isActive && (
@@ -220,7 +222,7 @@ export default function InformationDivision() {
borderType="none" borderType="none"
icon={ icon={
<View style={[Styles.iconContent, ColorsStatus.gray]}> <View style={[Styles.iconContent, ColorsStatus.gray]}>
<Feather name="user-plus" size={25} color={'#384288'} /> <Feather name="user-plus" size={25} color={colors.primary} />
</View> </View>
} }
title="Tambah Anggota" title="Tambah Anggota"
@@ -261,7 +263,7 @@ export default function InformationDivision() {
<Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberAdmin() }}> <Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberAdmin() }}>
<View style={[Styles.rowItemsCenter]}> <View style={[Styles.rowItemsCenter]}>
<View style={[Styles.iconContent, ColorsStatus.info]}> <View style={[Styles.iconContent, ColorsStatus.info]}>
<MaterialIcons name="verified-user" size={25} color='#19345E' /> <MaterialIcons name="verified-user" size={25} color={colors.primary} />
</View> </View>
<View style={[Styles.rowSpaceBetween, { width: '88%' }]}> <View style={[Styles.rowSpaceBetween, { width: '88%' }]}>
<View style={[Styles.ml10]}> <View style={[Styles.ml10]}>
@@ -274,7 +276,7 @@ export default function InformationDivision() {
<Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberOut() }}> <Pressable style={[Styles.wrapItemBorderBottom]} onPress={() => { handleMemberOut() }}>
<View style={[Styles.rowItemsCenter]}> <View style={[Styles.rowItemsCenter]}>
<View style={[Styles.iconContent, ColorsStatus.info]}> <View style={[Styles.iconContent, ColorsStatus.info]}>
<MaterialCommunityIcons name="close-circle" size={25} color='#19345E' /> <MaterialCommunityIcons name="close-circle" size={25} color={colors.primary} />
</View> </View>
<View style={[Styles.rowSpaceBetween, { width: '88%' }]}> <View style={[Styles.rowSpaceBetween, { width: '88%' }]}>
<View style={[Styles.ml10]}> <View style={[Styles.ml10]}>

6
app/(application)/division/[id]/report.tsx
View File

@@ -6,6 +6,7 @@ import { InputDate } from "@/components/inputDate"
import Styles from "@/constants/Styles" import Styles from "@/constants/Styles"
import { apiGetDivisionReport } from "@/lib/api" import { apiGetDivisionReport } from "@/lib/api"
import { stringToDate } from "@/lib/fun_stringToDate" import { stringToDate } from "@/lib/fun_stringToDate"
import { useTheme } from "@/providers/ThemeProvider"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import dayjs from "dayjs" import dayjs from "dayjs"
import { router, Stack, useLocalSearchParams } from "expo-router" import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -14,6 +15,7 @@ import { SafeAreaView, ScrollView, View } from "react-native"
import Toast from "react-native-toast-message" import Toast from "react-native-toast-message"
export default function ReportDivision() { export default function ReportDivision() {
const { colors } = useTheme();
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const [showReport, setShowReport] = useState(false); const [showReport, setShowReport] = useState(false);
@@ -104,7 +106,7 @@ export default function ReportDivision() {
}, [showReport]); }, [showReport]);
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -119,7 +121,7 @@ export default function ReportDivision() {
) )
}} }}
/> />
<ScrollView> <ScrollView style={{ backgroundColor: colors.background }}>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>
<InputDate <InputDate
onChange={(val) => validationForm("date", val)} onChange={(val) => validationForm("date", val)}

6
app/(application)/division/create.tsx
View File

@@ -8,6 +8,7 @@ import Styles from "@/constants/Styles";
import { apiCheckDivisionName } from "@/lib/api"; import { apiCheckDivisionName } from "@/lib/api";
import { setFormCreateDivision } from "@/lib/divisionCreate"; import { setFormCreateDivision } from "@/lib/divisionCreate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native"; import { SafeAreaView, ScrollView, View } from "react-native";
@@ -15,6 +16,7 @@ import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function CreateDivision() { export default function CreateDivision() {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const [isSelect, setSelect] = useState(false) const [isSelect, setSelect] = useState(false)
const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" }) const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" })
@@ -99,7 +101,7 @@ export default function CreateDivision() {
}, []); }, []);
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -131,7 +133,7 @@ export default function CreateDivision() {
/> />
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
style={[Styles.h100]} style={[Styles.h100, { backgroundColor: colors.background }]}
> >
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
{ {

6
app/(application)/division/create/add-admin-division.tsx
View File

@@ -8,6 +8,7 @@ import { apiCreateDivision } from "@/lib/api";
import { setFormCreateDivision } from "@/lib/divisionCreate"; import { setFormCreateDivision } from "@/lib/divisionCreate";
import { setUpdateDivision } from "@/lib/divisionUpdate"; import { setUpdateDivision } from "@/lib/divisionUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { StackActions, useNavigation } from "@react-navigation/native"; import { StackActions, useNavigation } from "@react-navigation/native";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
@@ -23,6 +24,7 @@ type Props = {
} }
export default function CreateDivisionAddAdmin() { export default function CreateDivisionAddAdmin() {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const navigation = useNavigation() const navigation = useNavigation()
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
@@ -104,7 +106,7 @@ export default function CreateDivisionAddAdmin() {
) )
}} }}
/> />
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<ScrollView> <ScrollView>
{ {
data.length > 0 ? data.length > 0 ?
@@ -128,7 +130,7 @@ export default function CreateDivisionAddAdmin() {
</View> </View>
</View> </View>
{ {
selectMember.some((i: any) => i == item.idUser) && <AntDesign name="check" size={20} color={'black'} /> selectMember.some((i: any) => i == item.idUser) && <AntDesign name="check" size={20} color={colors.text} />
} }
</Pressable> </Pressable>
) )

6
app/(application)/division/create/add-member.tsx
View File

@@ -10,6 +10,7 @@ import { apiGetUser } from "@/lib/api";
import { setFormCreateDivision } from "@/lib/divisionCreate"; import { setFormCreateDivision } from "@/lib/divisionCreate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Pressable, ScrollView, View } from "react-native"; import { Pressable, ScrollView, View } from "react-native";
@@ -22,6 +23,7 @@ type Props = {
} }
export default function CreateDivisionAddMember() { export default function CreateDivisionAddMember() {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
const [dataOld, setDataOld] = useState<Props[]>([]) const [dataOld, setDataOld] = useState<Props[]>([])
@@ -84,7 +86,7 @@ export default function CreateDivisionAddMember() {
) )
}} }}
/> />
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<InputSearch onChange={(val) => setSearch(val)} value={search} /> <InputSearch onChange={(val) => setSearch(val)} value={search} />
{ {
@@ -134,7 +136,7 @@ export default function CreateDivisionAddMember() {
</View> </View>
</View> </View>
{ {
selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} /> selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
} }
</Pressable> </Pressable>
) )

22
app/(application)/division/index.tsx
View File

@@ -10,6 +10,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetDivision } from "@/lib/api"; import { apiGetDivision } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { import {
AntDesign, AntDesign,
Feather, Feather,
@@ -38,9 +39,11 @@ export default function ListDivision() {
const [isList, setList] = useState(false); const [isList, setList] = useState(false);
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const [search, setSearch] = useState("") const [search, setSearch] = useState("")
const [nameGroup, setNameGroup] = useState("") const [nameGroup, setNameGroup] = useState("")
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
// ... state same ...
const update = useSelector((state: any) => state.divisionUpdate) const update = useSelector((state: any) => state.divisionUpdate)
const arrSkeleton = Array.from({ length: 3 }, (_, index) => index) const arrSkeleton = Array.from({ length: 3 }, (_, index) => index)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
@@ -114,11 +117,11 @@ export default function ListDivision() {
return ( return (
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<View> <View>
{ {
entityUser.role != "user" && entityUser.role != "coadmin" ? entityUser.role != "user" && entityUser.role != "coadmin" ?
<View style={[Styles.wrapBtnTab]}> <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<ButtonTab <ButtonTab
active={status == "false" ? "false" : "true"} active={status == "false" ? "false" : "true"}
value="true" value="true"
@@ -127,7 +130,7 @@ export default function ListDivision() {
icon={ icon={
<Feather <Feather
name="check-circle" name="check-circle"
color={status == "false" ? "black" : "white"} color={status == "false" ? colors.text : "white"}
size={20} size={20}
/> />
} }
@@ -141,7 +144,7 @@ export default function ListDivision() {
icon={ icon={
<AntDesign <AntDesign
name="closecircleo" name="closecircleo"
color={status == "true" ? "black" : "white"} color={status == "true" ? colors.text : "white"}
size={20} size={20}
/> />
} }
@@ -149,7 +152,7 @@ export default function ListDivision() {
/> />
</View> </View>
: :
<View style={[Styles.wrapBtnTab]}> <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<ButtonTab <ButtonTab
active={category == "semua" ? "false" : "true"} active={category == "semua" ? "false" : "true"}
value="true" value="true"
@@ -158,7 +161,7 @@ export default function ListDivision() {
icon={ icon={
<Ionicons <Ionicons
name="file-tray-outline" name="file-tray-outline"
color={category == "semua" ? "black" : "white"} color={category == "semua" ? colors.text : "white"}
size={20} size={20}
/> />
} }
@@ -172,7 +175,7 @@ export default function ListDivision() {
icon={ icon={
<Ionicons <Ionicons
name="file-tray-stacked-outline" name="file-tray-stacked-outline"
color={category == "semua" ? "white" : "black"} color={category == "semua" ? "white" : colors.text}
size={20} size={20}
/> />
} }
@@ -190,7 +193,7 @@ export default function ListDivision() {
> >
<MaterialCommunityIcons <MaterialCommunityIcons
name={isList ? "format-list-bulleted" : "view-grid"} name={isList ? "format-list-bulleted" : "view-grid"}
color={"black"} color={colors.text}
size={30} size={30}
/> />
</Pressable> </Pressable>
@@ -232,9 +235,10 @@ export default function ListDivision() {
key={index} key={index}
onPress={() => { router.push(`/division/${item.id}`) }} onPress={() => { router.push(`/division/${item.id}`) }}
borderType="bottom" borderType="bottom"
bgColor={colors.card}
icon={ icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}> <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="group" size={25} color={"#384288"} /> <MaterialIcons name="group" size={25} color={colors.primary} />
</View> </View>
} }
title={item.name} title={item.name}

8
app/(application)/division/report.tsx
View File

@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
import { apiGetDivisionReport } from "@/lib/api"; import { apiGetDivisionReport } from "@/lib/api";
import { stringToDate } from "@/lib/fun_stringToDate"; import { stringToDate } from "@/lib/fun_stringToDate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -16,6 +17,7 @@ import { SafeAreaView, ScrollView, View } from "react-native";
import Toast from "react-native-toast-message"; import Toast from "react-native-toast-message";
export default function Report() { export default function Report() {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" }); const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
const [showReport, setShowReport] = useState(false); const [showReport, setShowReport] = useState(false);
@@ -122,7 +124,7 @@ export default function Report() {
}, [showReport]); }, [showReport]);
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -144,11 +146,11 @@ export default function Report() {
/> />
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
style={[Styles.h100]} style={[Styles.h100, { backgroundColor: colors.background }]}
> >
<View style={[Styles.p15, Styles.mb50]}> <View style={[Styles.p15, Styles.mb50]}>
<SelectForm <SelectForm
bg="white" bg={colors.card}
label="Lembaga Desa" label="Lembaga Desa"
placeholder="Pilih Lembaga Desa" placeholder="Pilih Lembaga Desa"
value={chooseGroup.label} value={chooseGroup.label}

5
app/(application)/edit-profile.tsx
View File

@@ -10,6 +10,7 @@ import { apiEditProfile, apiGetProfile } from "@/lib/api";
import { setEntities } from "@/lib/entitiesSlice"; import { setEntities } from "@/lib/entitiesSlice";
import { validateName } from "@/lib/fun_validateName"; import { validateName } from "@/lib/fun_validateName";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useHeaderHeight } from "@react-navigation/elements"; import { useHeaderHeight } from "@react-navigation/elements";
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
@@ -43,9 +44,11 @@ type Props = {
export default function EditProfile() { export default function EditProfile() {
const headerHeight = useHeaderHeight() const headerHeight = useHeaderHeight()
const dispatch = useDispatch() const dispatch = useDispatch()
const { colors } = useTheme();
const entities = useSelector((state: any) => state.entities) const entities = useSelector((state: any) => state.entities)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const [errorImg, setErrorImg] = useState(false) const [errorImg, setErrorImg] = useState(false)
// ... keeping state same ...
const [selectedImage, setSelectedImage] = useState<string | undefined | { uri: string }>(undefined); const [selectedImage, setSelectedImage] = useState<string | undefined | { uri: string }>(undefined);
const [choosePosition, setChoosePosition] = useState({ val: entities.idPosition, label: entities.position }); const [choosePosition, setChoosePosition] = useState({ val: entities.idPosition, label: entities.position });
const [chooseGender, setChooseGender] = useState({ val: entities.gender, label: entities.gender == "F" ? 'Perempuan' : 'Laki-laki' }); const [chooseGender, setChooseGender] = useState({ val: entities.gender, label: entities.gender == "F" ? 'Perempuan' : 'Laki-laki' });
@@ -213,7 +216,7 @@ export default function EditProfile() {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
headerLeft: () => ( headerLeft: () => (

30
app/(application)/feature.tsx
View File

@@ -1,6 +1,7 @@
import AppHeader from "@/components/AppHeader"; import AppHeader from "@/components/AppHeader";
import { ButtonFiturMenu } from "@/components/buttonFiturMenu"; import { ButtonFiturMenu } from "@/components/buttonFiturMenu";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, Entypo, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"; import { AntDesign, Entypo, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
import { SafeAreaView, View } from "react-native"; import { SafeAreaView, View } from "react-native";
@@ -8,9 +9,10 @@ import { useSelector } from "react-redux";
export default function Feature() { export default function Feature() {
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
const { colors } = useTheme();
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
headerTitle: 'Fitur', headerTitle: 'Fitur',
@@ -22,32 +24,26 @@ export default function Feature() {
/> />
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
<View style={[Styles.rowSpaceBetween, Styles.mb15]}> <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
<ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" onPress={() => { router.push('/division?active=true') }} /> <ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color={colors.text} />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
<ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} /> <ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color={colors.text} />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
<ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" onPress={() => { router.push('/announcement') }} /> <ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color={colors.text} />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
<ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color="black" />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} /> <ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color={colors.text} />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
</View> </View>
<View style={[Styles.rowSpaceBetween, Styles.mb15, (entityUser.role == 'cosupadmin' ? Styles.w70 : entityUser.role == 'supadmin' || entityUser.role == 'developer' ? Styles.w100 : Styles.w40)]}> <View style={[Styles.rowSpaceBetween, Styles.mb15, (entityUser.role == 'cosupadmin' ? Styles.w70 : entityUser.role == 'supadmin' || entityUser.role == 'developer' ? Styles.w100 : Styles.w40)]}>
<ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color="black" />} text="Anggota" onPress={() => { router.push('/member') }} /> <ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color={colors.text} />} text="Anggota" onPress={() => { router.push('/member') }} />
<ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color="black" />} text="Jabatan" onPress={() => { router.push('/position') }} /> <ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color={colors.text} />} text="Jabatan" onPress={() => { router.push('/position') }} />
{ {
entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} /> entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color={colors.text} />} text="Banner" onPress={() => { router.push('/banner') }} />
} }
{ {
(entityUser.role == "supadmin" || entityUser.role == "developer") && (entityUser.role == "supadmin" || entityUser.role == "developer") &&
<> <>
<ButtonFiturMenu icon={<AntDesign name="tags" size={35} color="black" />} text="Lembaga Desa" onPress={() => { router.push('/group') }} /> <ButtonFiturMenu icon={<AntDesign name="tags" size={35} color={colors.text} />} text="Lembaga Desa" onPress={() => { router.push('/group') }} />
{/* <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color="black" />} text="Tema" onPress={() => { }} /> */} {/* <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color={colors.text} />} text="Tema" onPress={() => { }} /> */}
<ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} /> <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color={colors.text} />} text="Banner" onPress={() => { router.push('/banner') }} />
</> </>
} }
</View> </View>
{/* {
(entityUser.role == "supadmin" || entityUser.role == "developer") &&
<View style={[Styles.rowSpaceBetween, Styles.mb15]}>
<ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color="black" />} text="Banner" onPress={() => { router.push('/banner') }} />
</View>
} */}
</View> </View>
</SafeAreaView> </SafeAreaView>
) )

12
app/(application)/group/index.tsx
View File

@@ -13,6 +13,7 @@ import Styles from "@/constants/Styles";
import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api"; import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
import { setUpdateGroup } from "@/lib/groupSlice"; import { setUpdateGroup } from "@/lib/groupSlice";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons"; import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { RefreshControl, View, VirtualizedList } from "react-native"; import { RefreshControl, View, VirtualizedList } from "react-native";
@@ -27,6 +28,7 @@ type Props = {
export default function Index() { export default function Index() {
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const [isModal, setModal] = useState(false) const [isModal, setModal] = useState(false)
const [isVisibleEdit, setVisibleEdit] = useState(false) const [isVisibleEdit, setVisibleEdit] = useState(false)
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
@@ -127,9 +129,9 @@ export default function Index() {
return ( return (
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<View style={[Styles.mb10]}> <View style={[Styles.mb10]}>
<View style={[Styles.wrapBtnTab]}> <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<ButtonTab <ButtonTab
active={status == "false" ? "false" : "true"} active={status == "false" ? "false" : "true"}
value="true" value="true"
@@ -187,6 +189,7 @@ export default function Index() {
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={handleRefresh} onRefresh={handleRefresh}
tintColor={colors.primary}
/> />
} }
/> />
@@ -198,7 +201,7 @@ export default function Index() {
<DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={titleChoose}> <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={titleChoose}>
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color={colors.text} size={25} />}
title={activeChoose ? "Non Aktifkan" : "Aktifkan"} title={activeChoose ? "Non Aktifkan" : "Aktifkan"}
onPress={() => { onPress={() => {
setModal(false) setModal(false)
@@ -210,7 +213,7 @@ export default function Index() {
}} }}
/> />
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit" title="Edit"
onPress={() => { onPress={() => {
setModal(false) setModal(false)
@@ -232,6 +235,7 @@ export default function Index() {
label="Lembaga Desa" label="Lembaga Desa"
value={titleChoose} value={titleChoose}
error={error.title} error={error.title}
bg={colors.card}
errorText="Lembaga Desa tidak boleh kosong & minimal 3 karakter" errorText="Lembaga Desa tidak boleh kosong & minimal 3 karakter"
onChange={(val) => { validationForm(val, 'title') }} /> onChange={(val) => { validationForm(val, 'title') }} />
</View> </View>

22
app/(application)/home.tsx
View File

@@ -12,6 +12,7 @@ import Styles from "@/constants/Styles";
import { apiGetProfile } from "@/lib/api"; import { apiGetProfile } from "@/lib/api";
import { setEntities } from "@/lib/entitiesSlice"; import { setEntities } from "@/lib/entitiesSlice";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Stack } from "expo-router"; import { Stack } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native"; import { Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -23,6 +24,7 @@ export default function Home() {
const entities = useSelector((state: any) => state.entities) const entities = useSelector((state: any) => state.entities)
const dispatch = useDispatch() const dispatch = useDispatch()
const { token, decryptToken, signOut } = useAuthSession() const { token, decryptToken, signOut } = useAuthSession()
const { colors } = useTheme();
const insets = useSafeAreaInsets() const insets = useSafeAreaInsets()
const [refreshing, setRefreshing] = useState(false) const [refreshing, setRefreshing] = useState(false)
@@ -47,13 +49,13 @@ export default function Home() {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
title: 'Home', title: 'Home',
headerTitle: entities.village, headerTitle: entities.village,
header: () => ( header: () => (
<View style={[Styles.rowItemsCenter, Styles.ph20, Platform.OS === 'ios' ? Styles.pb07 : Styles.pb13, { backgroundColor: '#19345E', paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}> <View style={[Styles.rowItemsCenter, Styles.ph20, Platform.OS === 'ios' ? Styles.pb07 : Styles.pb13, { backgroundColor: colors.primary, paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
<Text style={Styles.textHeaderHome}>{entities.village}</Text> <Text style={Styles.textHeaderHome}>{entities.village}</Text>
<HeaderRightHome /> <HeaderRightHome />
</View> </View>
@@ -65,19 +67,21 @@ export default function Home() {
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={handleRefresh} onRefresh={handleRefresh}
tintColor={colors.primary}
/> />
} }
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
style={{ backgroundColor: colors.background }}
> >
<CaraouselHome refreshing={refreshing}/> <CaraouselHome refreshing={refreshing} />
<View style={[Styles.ph15, Styles.mb100]}> <View style={[Styles.ph15, Styles.mb100]}>
<FiturHome /> <FiturHome />
<ProjectHome refreshing={refreshing}/> <ProjectHome refreshing={refreshing} />
<DivisionHome refreshing={refreshing}/> <DivisionHome refreshing={refreshing} />
<ChartProgresHome refreshing={refreshing}/> <ChartProgresHome refreshing={refreshing} />
<ChartDokumenHome refreshing={refreshing}/> <ChartDokumenHome refreshing={refreshing} />
<EventHome refreshing={refreshing}/> <EventHome refreshing={refreshing} />
<DisccussionHome refreshing={refreshing}/> <DisccussionHome refreshing={refreshing} />
</View> </View>
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>

11
app/(application)/member/[id].tsx
View File

@@ -10,6 +10,7 @@ import { ConstEnv } from "@/constants/ConstEnv";
import { valueRoleUser } from "@/constants/RoleUser"; import { valueRoleUser } from "@/constants/RoleUser";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetProfile } from "@/lib/api"; import { apiGetProfile } from "@/lib/api";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native"; import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -33,6 +34,7 @@ type Props = {
export default function MemberDetail() { export default function MemberDetail() {
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const { colors } = useTheme();
const [data, setData] = useState<Props>() const [data, setData] = useState<Props>()
const [errorImg, setErrorImg] = useState(false) const [errorImg, setErrorImg] = useState(false)
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
@@ -74,13 +76,11 @@ export default function MemberDetail() {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Anggota', headerTitle: 'Anggota',
headerTitleAlign: 'center', headerTitleAlign: 'center',
// headerRight: () => (entityUser.role != "user") && isEdit ? <HeaderRightMemberDetail active={data?.isActive} id={id} /> : <></>,
header: () => ( header: () => (
<AppHeader title="Anggota" <AppHeader title="Anggota"
showBack={true} showBack={true}
@@ -93,11 +93,12 @@ export default function MemberDetail() {
}} }}
/> />
<ScrollView <ScrollView
style={[Styles.h100]} style={[Styles.h100, { backgroundColor: colors.background }]}
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={handleRefresh} onRefresh={handleRefresh}
tintColor={colors.text}
/> />
} }
> >
@@ -122,7 +123,7 @@ export default function MemberDetail() {
</View> </View>
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
<View style={[Styles.rowSpaceBetween]}> <View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefaultSemiBold]}>Informasi</Text> <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Informasi</Text>
<LabelStatus <LabelStatus
size="small" size="small"
category={data?.isActive ? 'success' : 'error'} category={data?.isActive ? 'success' : 'error'}

30
app/(application)/member/create.tsx
View File

@@ -10,6 +10,7 @@ import { apiCreateUser } from "@/lib/api";
import { validateName } from "@/lib/fun_validateName"; import { validateName } from "@/lib/fun_validateName";
import { setUpdateMember } from "@/lib/memberSlice"; import { setUpdateMember } from "@/lib/memberSlice";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useHeaderHeight } from '@react-navigation/elements'; import { useHeaderHeight } from '@react-navigation/elements';
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
@@ -32,6 +33,7 @@ export default function CreateMember() {
const dispatch = useDispatch() const dispatch = useDispatch()
const update = useSelector((state: any) => state.memberUpdate) const update = useSelector((state: any) => state.memberUpdate)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const [valSelect, setValSelect] = useState<"group" | "position" | "role" | "gender">("group"); const [valSelect, setValSelect] = useState<"group" | "position" | "role" | "gender">("group");
const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" }); const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
const [choosePosition, setChoosePosition] = useState({ val: "", label: "" }); const [choosePosition, setChoosePosition] = useState({ val: "", label: "" });
@@ -206,25 +208,11 @@ export default function CreateMember() {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => (
// <ButtonBackHeader
// onPress={() => {
// router.back();
// }}
// />
// ),
headerTitle: "Tambah Anggota", headerTitle: "Tambah Anggota",
headerTitleAlign: "center", headerTitleAlign: "center",
// headerRight: () => (
// <ButtonSaveHeader
// disable={disableBtn || loading}
// category="create"
// onPress={() => { handleCreate() }}
// />
// ),
header: () => ( header: () => (
<AppHeader title="Anggota" <AppHeader title="Anggota"
showBack={true} showBack={true}
@@ -241,7 +229,7 @@ export default function CreateMember() {
}} }}
/> />
<KeyboardAvoidingView <KeyboardAvoidingView
style={[Styles.h100]} style={[Styles.h100, { backgroundColor: colors.background }]}
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={headerHeight} keyboardVerticalOffset={headerHeight}
> >
@@ -271,6 +259,7 @@ export default function CreateMember() {
placeholder="Pilih Lembaga Desa" placeholder="Pilih Lembaga Desa"
value={chooseGroup.label} value={chooseGroup.label}
required required
bg={colors.card}
onPress={() => { onPress={() => {
setValChoose(chooseGroup.val); setValChoose(chooseGroup.val);
setValSelect("group"); setValSelect("group");
@@ -285,6 +274,7 @@ export default function CreateMember() {
placeholder="Pilih Jabatan" placeholder="Pilih Jabatan"
value={choosePosition.label} value={choosePosition.label}
required required
bg={colors.card}
onPress={() => { onPress={() => {
setValChoose(choosePosition.val); setValChoose(choosePosition.val);
setValSelect("position"); setValSelect("position");
@@ -298,6 +288,7 @@ export default function CreateMember() {
placeholder="Pilih Role" placeholder="Pilih Role"
value={chooseRole.label} value={chooseRole.label}
required required
bg={colors.card}
onPress={() => { onPress={() => {
setValChoose(chooseRole.val); setValChoose(chooseRole.val);
setValSelect("role"); setValSelect("role");
@@ -311,6 +302,7 @@ export default function CreateMember() {
type="numeric" type="numeric"
placeholder="NIK" placeholder="NIK"
required required
bg={colors.card}
error={error.nik} error={error.nik}
errorText="NIK Harus 16 Karakter" errorText="NIK Harus 16 Karakter"
onChange={val => { onChange={val => {
@@ -322,6 +314,7 @@ export default function CreateMember() {
type="default" type="default"
placeholder="Nama" placeholder="Nama"
required required
bg={colors.card}
error={error.name} error={error.name}
errorText="Nama harus 3–50 karakter (huruf, angka, spasi, dan simbol ringan (. , ' _ -))" errorText="Nama harus 3–50 karakter (huruf, angka, spasi, dan simbol ringan (. , ' _ -))"
onChange={val => { onChange={val => {
@@ -333,6 +326,7 @@ export default function CreateMember() {
type="default" type="default"
placeholder="Email" placeholder="Email"
required required
bg={colors.card}
error={error.email} error={error.email}
errorText="Email tidak valid" errorText="Email tidak valid"
onChange={val => { onChange={val => {
@@ -344,7 +338,8 @@ export default function CreateMember() {
type="numeric" type="numeric"
placeholder="8XX-XXX-XXX" placeholder="8XX-XXX-XXX"
required required
itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02]}>+62</Text>} bg={colors.card}
itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02, { color: colors.text }]}>+62</Text>}
error={error.phone} error={error.phone}
errorText="Nomor Telepon tidak valid" errorText="Nomor Telepon tidak valid"
onChange={val => { onChange={val => {
@@ -356,6 +351,7 @@ export default function CreateMember() {
placeholder="Pilih Jenis Kelamin" placeholder="Pilih Jenis Kelamin"
value={chooseGender.label} value={chooseGender.label}
required required
bg={colors.card}
onPress={() => { onPress={() => {
setValChoose(chooseGender.val); setValChoose(chooseGender.val);
setValSelect("gender"); setValSelect("gender");

31
app/(application)/member/edit/[id].tsx
View File

@@ -10,6 +10,7 @@ import { apiEditUser, apiGetProfile } from "@/lib/api";
import { validateName } from "@/lib/fun_validateName"; import { validateName } from "@/lib/fun_validateName";
import { setUpdateMember } from "@/lib/memberSlice"; import { setUpdateMember } from "@/lib/memberSlice";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useHeaderHeight } from '@react-navigation/elements'; import { useHeaderHeight } from '@react-navigation/elements';
import * as ImagePicker from "expo-image-picker"; import * as ImagePicker from "expo-image-picker";
@@ -47,6 +48,7 @@ export default function EditMember() {
const update = useSelector((state: any) => state.memberUpdate) const update = useSelector((state: any) => state.memberUpdate)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const { colors } = useTheme();
const [errorImg, setErrorImg] = useState(false) const [errorImg, setErrorImg] = useState(false)
const [selectedImage, setSelectedImage] = useState<string | undefined | { uri: string }>(undefined); const [selectedImage, setSelectedImage] = useState<string | undefined | { uri: string }>(undefined);
const [choosePosition, setChoosePosition] = useState({ val: "", label: "" }); const [choosePosition, setChoosePosition] = useState({ val: "", label: "" });
@@ -236,27 +238,11 @@ export default function EditMember() {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => (
// <ButtonBackHeader
// onPress={() => {
// router.back();
// }}
// />
// ),
headerTitle: "Edit Anggota", headerTitle: "Edit Anggota",
headerTitleAlign: "center", headerTitleAlign: "center",
// headerRight: () => (
// <ButtonSaveHeader
// disable={disableBtn || loading}
// category="update"
// onPress={() => {
// handleEdit()
// }}
// />
// ),
header: () => ( header: () => (
<AppHeader <AppHeader
title="Edit Anggota" title="Edit Anggota"
@@ -277,7 +263,7 @@ export default function EditMember() {
/> />
<KeyboardAvoidingView <KeyboardAvoidingView
style={[Styles.h100]} style={[Styles.h100, { backgroundColor: colors.background }]}
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={headerHeight} keyboardVerticalOffset={headerHeight}
> >
@@ -325,6 +311,7 @@ export default function EditMember() {
placeholder="Pilih Jabatan" placeholder="Pilih Jabatan"
value={choosePosition.label} value={choosePosition.label}
required required
bg={colors.card}
onPress={() => { onPress={() => {
setValChoose(choosePosition.val); setValChoose(choosePosition.val);
setValSelect("position"); setValSelect("position");
@@ -338,6 +325,7 @@ export default function EditMember() {
placeholder="Pilih Role" placeholder="Pilih Role"
value={chooseRole.label} value={chooseRole.label}
required required
bg={colors.card}
onPress={() => { onPress={() => {
setValChoose(chooseRole.val); setValChoose(chooseRole.val);
setValSelect("role"); setValSelect("role");
@@ -352,6 +340,7 @@ export default function EditMember() {
placeholder="NIK" placeholder="NIK"
required required
value={data?.nik} value={data?.nik}
bg={colors.card}
error={error.nik} error={error.nik}
errorText="NIK Harus 16 Karakter" errorText="NIK Harus 16 Karakter"
onChange={val => { onChange={val => {
@@ -364,6 +353,7 @@ export default function EditMember() {
placeholder="Nama" placeholder="Nama"
required required
value={data?.name} value={data?.name}
bg={colors.card}
error={error.name} error={error.name}
errorText="Nama harus 3–50 karakter (huruf, angka, spasi, dan simbol ringan (. , ' _ -))" errorText="Nama harus 3–50 karakter (huruf, angka, spasi, dan simbol ringan (. , ' _ -))"
onChange={val => { onChange={val => {
@@ -376,6 +366,7 @@ export default function EditMember() {
placeholder="Email" placeholder="Email"
required required
value={data?.email} value={data?.email}
bg={colors.card}
error={error.email} error={error.email}
errorText="Email tidak valid" errorText="Email tidak valid"
onChange={val => { onChange={val => {
@@ -387,8 +378,9 @@ export default function EditMember() {
type="numeric" type="numeric"
placeholder="8XX-XXX-XXX" placeholder="8XX-XXX-XXX"
required required
itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02]}>+62</Text>} itemLeft={<Text style={[Platform.OS === 'ios' && Styles.mt02, { color: colors.text }]}>+62</Text>}
value={data?.phone} value={data?.phone}
bg={colors.card}
error={error.phone} error={error.phone}
errorText="Nomor Telepon tidak valid" errorText="Nomor Telepon tidak valid"
onChange={val => { onChange={val => {
@@ -400,6 +392,7 @@ export default function EditMember() {
placeholder="Pilih Jenis Kelamin" placeholder="Pilih Jenis Kelamin"
value={chooseGender.label} value={chooseGender.label}
required required
bg={colors.card}
onPress={() => { onPress={() => {
setValChoose(chooseGender.val); setValChoose(chooseGender.val);
setValSelect("gender"); setValSelect("gender");

11
app/(application)/member/index.tsx
View File

@@ -9,6 +9,7 @@ import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetUser } from "@/lib/api"; import { apiGetUser } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, Feather } from "@expo/vector-icons"; import { AntDesign, Feather } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router"; import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -33,6 +34,7 @@ export default function Index() {
const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>() const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
const { colors } = useTheme();
const [search, setSearch] = useState('') const [search, setSearch] = useState('')
const [nameGroup, setNameGroup] = useState('') const [nameGroup, setNameGroup] = useState('')
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
@@ -104,22 +106,22 @@ export default function Index() {
}); });
return ( return (
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<View> <View>
<View style={[Styles.wrapBtnTab]}> <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<ButtonTab <ButtonTab
active={status == "false" ? "false" : "true"} active={status == "false" ? "false" : "true"}
value="true" value="true"
onPress={() => { setStatus("true") }} onPress={() => { setStatus("true") }}
label="Aktif" label="Aktif"
icon={<Feather name="check-circle" color={status == "false" ? 'black' : 'white'} size={20} />} icon={<Feather name="check-circle" color={status == "false" ? colors.text : 'white'} size={20} />}
n={2} /> n={2} />
<ButtonTab <ButtonTab
active={status == "false" ? "false" : "true"} active={status == "false" ? "false" : "true"}
value="false" value="false"
onPress={() => { setStatus("false") }} onPress={() => { setStatus("false") }}
label="Tidak Aktif" label="Tidak Aktif"
icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />} icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.text} size={20} />}
n={2} /> n={2} />
</View> </View>
<InputSearch onChange={setSearch} /> <InputSearch onChange={setSearch} />
@@ -168,6 +170,7 @@ export default function Index() {
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={handleRefresh} onRefresh={handleRefresh}
tintColor={colors.primary}
/> />
} }
/> />

7
app/(application)/notification.tsx
View File

@@ -7,6 +7,7 @@ import { apiGetNotification, apiReadOneNotification } from "@/lib/api";
import { setUpdateNotification } from "@/lib/notificationSlice"; import { setUpdateNotification } from "@/lib/notificationSlice";
import { pushToPage } from "@/lib/pushToPage"; import { pushToPage } from "@/lib/pushToPage";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather } from "@expo/vector-icons"; import { Feather } from "@expo/vector-icons";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { RefreshControl, SafeAreaView, View, VirtualizedList } from "react-native"; import { RefreshControl, SafeAreaView, View, VirtualizedList } from "react-native";
@@ -24,6 +25,7 @@ type Props = {
export default function Notification() { export default function Notification() {
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
const [page, setPage] = useState(1) const [page, setPage] = useState(1)
@@ -97,7 +99,7 @@ export default function Notification() {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
{ {
loading ? loading ?
@@ -124,7 +126,7 @@ export default function Notification() {
title={item.title} title={item.title}
rightTopInfo={item.createdAt} rightTopInfo={item.createdAt}
desc={item.desc} desc={item.desc}
textColor={item.isRead ? 'gray' : 'black'} textColor={item.isRead ? 'gray' : colors.text}
onPress={() => { onPress={() => {
handleReadNotification(item.id, item.category, item.idContent) handleReadNotification(item.id, item.category, item.idContent)
@@ -140,6 +142,7 @@ export default function Notification() {
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={handleRefresh} onRefresh={handleRefresh}
tintColor={colors.primary}
/> />
} }
/> />

12
app/(application)/position/index.tsx
View File

@@ -14,6 +14,7 @@ import Styles from "@/constants/Styles";
import { apiDeletePosition, apiEditPosition, apiGetPosition } from "@/lib/api"; import { apiDeletePosition, apiEditPosition, apiGetPosition } from "@/lib/api";
import { setUpdatePosition } from "@/lib/positionSlice"; import { setUpdatePosition } from "@/lib/positionSlice";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons"; import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
import { useLocalSearchParams } from "expo-router"; import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -33,6 +34,7 @@ export default function Index() {
const arrSkeleton = Array.from({ length: 5 }, (_, index) => index) const arrSkeleton = Array.from({ length: 5 }, (_, index) => index)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme()
const [status, setStatus] = useState<'true' | 'false'>('true') const [status, setStatus] = useState<'true' | 'false'>('true')
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>() const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
@@ -146,9 +148,9 @@ export default function Index() {
}); });
return ( return (
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<View> <View>
<View style={[Styles.wrapBtnTab]}> <View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<ButtonTab <ButtonTab
active={status == "false" ? "false" : "true"} active={status == "false" ? "false" : "true"}
value="true" value="true"
@@ -212,6 +214,7 @@ export default function Index() {
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={handleRefresh} onRefresh={handleRefresh}
tintColor={colors.primary}
/> />
} }
/> />
@@ -222,7 +225,7 @@ export default function Index() {
<DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={chooseData.name}> <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={chooseData.name}>
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color={colors.text} size={25} />}
title={chooseData.active ? 'Non Aktifkan' : "Aktifkan"} title={chooseData.active ? 'Non Aktifkan' : "Aktifkan"}
onPress={() => { onPress={() => {
setModal(false) setModal(false)
@@ -234,7 +237,7 @@ export default function Index() {
}} }}
/> />
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit" title="Edit"
onPress={() => { onPress={() => {
setModal(false) setModal(false)
@@ -255,6 +258,7 @@ export default function Index() {
placeholder="Nama Jabatan" placeholder="Nama Jabatan"
required required
label="Jabatan" label="Jabatan"
bg={colors.card}
value={chooseData.name} value={chooseData.name}
onChange={(val) => { validationForm(val) }} onChange={(val) => { validationForm(val) }}
error={error.name} error={error.name}

87
app/(application)/profile.tsx
View File

@@ -7,22 +7,40 @@ import { assetUserImage } from "@/constants/AssetsError";
import { ConstEnv } from "@/constants/ConstEnv"; import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign } from "@expo/vector-icons"; import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, Ionicons } from "@expo/vector-icons";
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
import { useState } from "react"; import { useState } from "react";
import { Image, Pressable, SafeAreaView, ScrollView, View } from "react-native"; import { Image, Modal, Pressable, SafeAreaView, ScrollView, TouchableOpacity, View } from "react-native";
import ImageViewing from 'react-native-image-viewing'; import ImageViewing from 'react-native-image-viewing';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
export default function Profile() { export default function Profile() {
const { signOut } = useAuthSession() const { signOut } = useAuthSession()
const { theme, setTheme, colors } = useTheme();
const entities = useSelector((state: any) => state.entities) const entities = useSelector((state: any) => state.entities)
const [error, setError] = useState(false) const [error, setError] = useState(false)
const [preview, setPreview] = useState(false) const [preview, setPreview] = useState(false)
const [showThemeModal, setShowThemeModal] = useState(false)
const ThemeOption = ({ label, value, icon }: { label: string, value: 'light' | 'dark' | 'system', icon: string }) => (
<TouchableOpacity
style={[Styles.itemSelectModal, { backgroundColor: theme === value ? colors.primary + '10' : 'transparent', borderColor: colors.icon + '20' }]}
onPress={() => {
setTheme(value);
setShowThemeModal(false);
}}
>
<View style={Styles.rowItemsCenter}>
<Ionicons name={icon as any} size={20} color={theme === value ? colors.primary : colors.text} style={{ marginRight: 10 }} />
<Text style={{ color: colors.text, fontWeight: theme === value ? 'bold' : 'normal' }}>{label}</Text>
</View>
{theme === value && <Ionicons name="checkmark" size={20} color={colors.primary} />}
</TouchableOpacity>
);
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
headerTitle: 'Profile', headerTitle: 'Profile',
@@ -46,21 +64,11 @@ export default function Profile() {
} }
/> />
) )
// headerRight: () => <ButtonHeader
// item={<AntDesign name="logout" size={20} color="white" />}
// onPress={() => {
// AlertKonfirmasi({
// title: 'Keluar',
// desc: 'Apakah anda yakin ingin keluar?',
// onPress: () => { signOut() }
// })
// }}
// />
}} }}
/> />
<ScrollView style={[Styles.h100]}> <ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
<View style={{ flexDirection: 'column' }}> <View style={{ flexDirection: 'column' }}>
<View style={[Styles.wrapHeadViewMember]}> <View style={[Styles.wrapHeadViewMember, { backgroundColor: colors.primary }]}>
<Pressable onPress={() => setPreview(true)}> <Pressable onPress={() => setPreview(true)}>
<Image <Image
source={error ? require("../../assets/images/user.jpg") : { uri: `${ConstEnv.url_storage}/files/${entities.img}` }} source={error ? require("../../assets/images/user.jpg") : { uri: `${ConstEnv.url_storage}/files/${entities.img}` }}
@@ -72,12 +80,33 @@ export default function Profile() {
<Text style={[Styles.textMediumNormal, Styles.cWhite]}>{entities.role}</Text> <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{entities.role}</Text>
</View> </View>
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
<View style={[Styles.rowSpaceBetween]}> <View style={[Styles.rowSpaceBetween, Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold]}>Informasi</Text> <Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Tampilan</Text>
</View>
<TouchableOpacity
onPress={() => setShowThemeModal(true)}
style={[Styles.wrapItemBorderAll, { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderColor: colors.icon + '40', backgroundColor: colors.background }]}
>
<View style={Styles.rowItemsCenter}>
<Ionicons name="color-palette-outline" size={20} color={colors.text} style={{ marginRight: 10 }} />
<Text style={{ color: colors.text }}>Tema Aplikasi</Text>
</View>
<View style={Styles.rowItemsCenter}>
<Text style={{ color: colors.icon, marginRight: 5, fontSize: 13 }}>
{theme === 'light' ? 'Terang' : theme === 'dark' ? 'Gelap' : 'Sistem'}
</Text>
<Ionicons name="chevron-forward" size={16} color={colors.icon} />
</View>
</TouchableOpacity>
<View style={[Styles.rowSpaceBetween, Styles.mt15]}>
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Informasi</Text>
{ {
entities.idUserRole != "developer" && <Text onPress={() => { router.push('/edit-profile') }} style={[Styles.textLink]}>Edit</Text> entities.idUserRole != "developer" && <Text onPress={() => { router.push('/edit-profile') }} style={[Styles.textLink]}>Edit</Text>
} }
</View> </View>
{/* Note: ItemDetailMember might need updates to support dynamic colors if it uses default text colors */}
<ItemDetailMember category="nik" value={entities.nik} /> <ItemDetailMember category="nik" value={entities.nik} />
<ItemDetailMember category="group" value={entities.group} /> <ItemDetailMember category="group" value={entities.group} />
<ItemDetailMember category="position" value={entities.position} /> <ItemDetailMember category="position" value={entities.position} />
@@ -87,6 +116,30 @@ export default function Profile() {
</View> </View>
</View> </View>
</ScrollView> </ScrollView>
<Modal
animationType="fade"
transparent={true}
visible={showThemeModal}
onRequestClose={() => setShowThemeModal(false)}
>
<TouchableOpacity style={Styles.modalBgTransparant} activeOpacity={1} onPress={() => setShowThemeModal(false)}>
<View style={[Styles.modalContent, { backgroundColor: colors.background }]}>
<View style={[Styles.titleContainer, { backgroundColor: colors.background, borderBottomColor: colors.icon + '20', borderBottomWidth: 1 }]}>
<Text style={[Styles.textSubtitle, { color: colors.text }]}>Pilih Tema</Text>
<TouchableOpacity onPress={() => setShowThemeModal(false)}>
<Ionicons name="close" size={24} color={colors.text} />
</TouchableOpacity>
</View>
<View style={{ padding: 10 }}>
<ThemeOption label="Terang" value="light" icon="sunny-outline" />
<ThemeOption label="Gelap" value="dark" icon="moon-outline" />
<ThemeOption label="Sistem" value="system" icon="phone-portrait-outline" />
</View>
</View>
</TouchableOpacity>
</Modal>
<ImageViewing <ImageViewing
images={[{ uri: error ? assetUserImage.uri : `${ConstEnv.url_storage}/files/${entities.img}` }]} images={[{ uri: error ? assetUserImage.uri : `${ConstEnv.url_storage}/files/${entities.img}` }]}
imageIndex={0} imageIndex={0}

12
app/(application)/project/[id]/add-file.tsx
View File

@@ -8,6 +8,7 @@ import Styles from "@/constants/Styles"
import { apiAddFileProject, apiCheckFileProject } from "@/lib/api" import { apiAddFileProject, apiCheckFileProject } from "@/lib/api"
import { setUpdateProject } from "@/lib/projectUpdate" import { setUpdateProject } from "@/lib/projectUpdate"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons" import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
import * as DocumentPicker from "expo-document-picker" import * as DocumentPicker from "expo-document-picker"
import { router, Stack, useLocalSearchParams } from "expo-router" import { router, Stack, useLocalSearchParams } from "expo-router"
@@ -17,6 +18,7 @@ import Toast from "react-native-toast-message"
import { useDispatch, useSelector } from "react-redux" import { useDispatch, useSelector } from "react-redux"
export default function ProjectAddFile() { export default function ProjectAddFile() {
const { colors } = useTheme();
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
const [fileForm, setFileForm] = useState<any[]>([]) const [fileForm, setFileForm] = useState<any[]>([])
const [listFile, setListFile] = useState<any[]>([]) const [listFile, setListFile] = useState<any[]>([])
@@ -127,7 +129,7 @@ export default function ProjectAddFile() {
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -153,20 +155,20 @@ export default function ProjectAddFile() {
) )
}} }}
/> />
<ScrollView> <ScrollView style={{ backgroundColor: colors.background }}>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>
<ButtonSelect value="Upload File" onPress={pickDocumentAsync} /> <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
{ {
listFile.length > 0 && ( listFile.length > 0 && (
<View style={[Styles.mb15]}> <View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text> <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
<View style={[Styles.wrapPaper]}> <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{ {
listFile.map((item, index) => ( listFile.map((item, index) => (
<BorderBottomItem <BorderBottomItem
key={index} key={index}
borderType="all" borderType="all"
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />} icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
title={item} title={item}
titleWeight="normal" titleWeight="normal"
onPress={() => { setIndexDelFile(index); setModal(true) }} onPress={() => { setIndexDelFile(index); setModal(true) }}
@@ -188,7 +190,7 @@ export default function ProjectAddFile() {
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu"> <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />} icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { deleteFile(indexDelFile) }} onPress={() => { deleteFile(indexDelFile) }}
/> />

8
app/(application)/project/[id]/add-member.tsx
View File

@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
import { apiAddMemberProject, apiGetProjectOne, apiGetUser } from "@/lib/api"; import { apiAddMemberProject, apiGetProjectOne, apiGetUser } from "@/lib/api";
import { setUpdateProject } from "@/lib/projectUpdate"; import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
@@ -23,6 +24,7 @@ type Props = {
} }
export default function AddMemberProject() { export default function AddMemberProject() {
const { colors } = useTheme();
const dispatch = useDispatch() const dispatch = useDispatch()
const update = useSelector((state: any) => state.projectUpdate) const update = useSelector((state: any) => state.projectUpdate)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
@@ -127,7 +129,7 @@ export default function AddMemberProject() {
) )
}} }}
/> />
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<InputSearch onChange={(val) => handleSearch(val)} value={search} /> <InputSearch onChange={(val) => handleSearch(val)} value={search} />
{ {
selectMember.length > 0 selectMember.length > 0
@@ -152,7 +154,7 @@ export default function AddMemberProject() {
} }
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
style={[Styles.h100]} style={[Styles.h100, { backgroundColor: colors.background }]}
> >
{ {
data.length > 0 ? data.length > 0 ?
@@ -178,7 +180,7 @@ export default function AddMemberProject() {
</View> </View>
</View> </View>
{ {
selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} /> selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
} }
</Pressable> </Pressable>
) )

38
app/(application)/project/[id]/add-task.tsx
View File

@@ -9,6 +9,7 @@ import { formatDateOnly } from "@/lib/fun_formatDateOnly";
import { getDatesInRange } from "@/lib/fun_getDatesInRange"; import { getDatesInRange } from "@/lib/fun_getDatesInRange";
import { setUpdateProject } from "@/lib/projectUpdate"; import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { useHeaderHeight } from '@react-navigation/elements'; import { useHeaderHeight } from '@react-navigation/elements';
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import 'intl'; import 'intl';
@@ -30,6 +31,7 @@ import DateTimePicker, {
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function ProjectAddTask() { export default function ProjectAddTask() {
const { colors } = useTheme();
const headerHeight = useHeaderHeight(); const headerHeight = useHeaderHeight();
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const dispatch = useDispatch() const dispatch = useDispatch()
@@ -133,7 +135,7 @@ export default function ProjectAddTask() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -158,11 +160,11 @@ export default function ProjectAddTask() {
showBack={true} showBack={true}
onPressLeft={() => router.back()} onPressLeft={() => router.back()}
right={ right={
<ButtonSaveHeader <ButtonSaveHeader
disable={disable || loading} disable={disable || loading}
category="create" category="create"
onPress={() => { handleCreate() }} onPress={() => { handleCreate() }}
/> />
} }
/> />
) )
@@ -172,9 +174,9 @@ export default function ProjectAddTask() {
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={headerHeight} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView style={{ backgroundColor: colors.background }}>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<DateTimePicker <DateTimePicker
mode="range" mode="range"
startDate={range.startDate} startDate={range.startDate}
@@ -184,13 +186,13 @@ export default function ProjectAddTask() {
selected: Styles.selectedDate, selected: Styles.selectedDate,
selected_label: Styles.cWhite, selected_label: Styles.cWhite,
range_fill: Styles.selectRangeDate, range_fill: Styles.selectRangeDate,
month_label: Styles.cBlack, month_label: { color: colors.text },
month_selector_label: Styles.cBlack, month_selector_label: { color: colors.text },
year_label: Styles.cBlack, year_label: { color: colors.text },
year_selector_label: Styles.cBlack, year_selector_label: { color: colors.text },
day_label: Styles.cBlack, day_label: { color: colors.text },
time_label: Styles.cBlack, time_label: { color: colors.text },
weekday_label: Styles.cBlack, weekday_label: { color: colors.text },
}} }}
/> />
</View> </View>
@@ -200,7 +202,7 @@ export default function ProjectAddTask() {
<Text style={[Styles.mb05]}> <Text style={[Styles.mb05]}>
Tanggal Mulai <Text style={Styles.cError}>*</Text> Tanggal Mulai <Text style={Styles.cError}>*</Text>
</Text> </Text>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: "center" }}>{from}</Text> <Text style={{ textAlign: "center" }}>{from}</Text>
</View> </View>
</View> </View>
@@ -208,7 +210,7 @@ export default function ProjectAddTask() {
<Text style={[Styles.mb05]}> <Text style={[Styles.mb05]}>
Tanggal Berakhir <Text style={Styles.cError}>*</Text> Tanggal Berakhir <Text style={Styles.cError}>*</Text>
</Text> </Text>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: "center" }}>{to}</Text> <Text style={{ textAlign: "center" }}>{to}</Text>
</View> </View>
</View> </View>
@@ -229,7 +231,7 @@ export default function ProjectAddTask() {
type="default" type="default"
placeholder="Judul Tugas" placeholder="Judul Tugas"
required required
bg="white" bg={colors.card}
value={title} value={title}
error={error.title} error={error.title}
errorText="Judul tidak boleh kosong" errorText="Judul tidak boleh kosong"

8
app/(application)/project/[id]/cancel.tsx
View File

@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
import { apiCancelProject } from "@/lib/api"; import { apiCancelProject } from "@/lib/api";
import { setUpdateProject } from "@/lib/projectUpdate"; import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native"; import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function ProjectCancel() { export default function ProjectCancel() {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -65,7 +67,7 @@ export default function ProjectCancel() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -106,7 +108,7 @@ export default function ProjectCancel() {
/> />
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
style={[Styles.h100]} style={[Styles.h100, { backgroundColor: colors.background }]}
> >
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
<InputForm <InputForm
@@ -114,7 +116,7 @@ export default function ProjectCancel() {
type="default" type="default"
placeholder="Alasan Pembatalan" placeholder="Alasan Pembatalan"
required required
bg="white" bg={colors.card}
error={error} error={error}
errorText="Alasan pembatalan harus diisi" errorText="Alasan pembatalan harus diisi"
onChange={(val) => onValidation(val)} onChange={(val) => onValidation(val)}

8
app/(application)/project/[id]/edit.tsx
View File

@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
import { apiEditProject, apiGetProjectOne } from "@/lib/api"; import { apiEditProject, apiGetProjectOne } from "@/lib/api";
import { setUpdateProject } from "@/lib/projectUpdate"; import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native"; import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function EditProject() { export default function EditProject() {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const dispatch = useDispatch() const dispatch = useDispatch()
@@ -86,7 +88,7 @@ export default function EditProject() {
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -121,14 +123,14 @@ export default function EditProject() {
) )
}} }}
/> />
<ScrollView> <ScrollView style={{ backgroundColor: colors.background }}>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>
<InputForm <InputForm
label="Judul Kegiatan" label="Judul Kegiatan"
type="default" type="default"
placeholder="Judul Kegiatan" placeholder="Judul Kegiatan"
required required
bg="white" bg={colors.card}
value={judul} value={judul}
onChange={(val) => { onValidation(val) }} onChange={(val) => { onValidation(val) }}
error={error} error={error}

6
app/(application)/project/[id]/index.tsx
View File

@@ -10,6 +10,7 @@ import SectionProgress from "@/components/sectionProgress";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetProjectOne } from "@/lib/api"; import { apiGetProjectOne } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native"; import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -32,6 +33,7 @@ type Props = {
export default function DetailProject() { export default function DetailProject() {
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const [data, setData] = useState<Props>() const [data, setData] = useState<Props>()
const [progress, setProgress] = useState(0) const [progress, setProgress] = useState(0)
@@ -91,7 +93,7 @@ export default function DetailProject() {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -111,10 +113,12 @@ export default function DetailProject() {
}} }}
/> />
<ScrollView <ScrollView
style={{ backgroundColor: colors.background }}
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={handleRefresh} onRefresh={handleRefresh}
tintColor={colors.primary}
/> />
} }
> >

8
app/(application)/project/[id]/report.tsx
View File

@@ -5,6 +5,7 @@ import Styles from "@/constants/Styles";
import { apiGetProjectOne, apiReportProject } from "@/lib/api"; import { apiGetProjectOne, apiReportProject } from "@/lib/api";
import { setUpdateProject } from "@/lib/projectUpdate"; import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, View } from "react-native"; import { SafeAreaView, ScrollView, View } from "react-native";
@@ -12,6 +13,7 @@ import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function ReportProject() { export default function ReportProject() {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const dispatch = useDispatch() const dispatch = useDispatch()
@@ -86,7 +88,7 @@ export default function ReportProject() {
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -123,7 +125,7 @@ export default function ReportProject() {
/> />
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
style={[Styles.h100]} style={[Styles.h100, { backgroundColor: colors.background }]}
> >
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
<InputForm <InputForm
@@ -131,7 +133,7 @@ export default function ReportProject() {
type="default" type="default"
placeholder="Laporan Kegiatan" placeholder="Laporan Kegiatan"
required required
bg="white" bg={colors.card}
value={laporan} value={laporan}
onChange={(val) => { onValidation(val) }} onChange={(val) => { onValidation(val) }}
error={error} error={error}

16
app/(application)/project/create.tsx
View File

@@ -18,6 +18,7 @@ import { setMemberChoose } from "@/lib/memberChoose";
import { setUpdateProject } from "@/lib/projectUpdate"; import { setUpdateProject } from "@/lib/projectUpdate";
import { setTaskCreate } from "@/lib/taskCreate"; import { setTaskCreate } from "@/lib/taskCreate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"; import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import * as DocumentPicker from "expo-document-picker"; import * as DocumentPicker from "expo-document-picker";
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
@@ -31,6 +32,7 @@ import Toast from "react-native-toast-message";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function CreateProject() { export default function CreateProject() {
const { colors } = useTheme();
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" }); const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
@@ -190,7 +192,7 @@ export default function CreateProject() {
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -230,7 +232,7 @@ export default function CreateProject() {
/> />
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
style={[Styles.h100]} style={[Styles.h100, { backgroundColor: colors.background }]}
> >
<View style={[Styles.p15]}> <View style={[Styles.p15]}>
{ {
@@ -242,6 +244,7 @@ export default function CreateProject() {
placeholder="Pilih Lembaga Desa" placeholder="Pilih Lembaga Desa"
value={chooseGroup.label} value={chooseGroup.label}
required required
bg={colors.card}
onPress={() => { onPress={() => {
setValChoose(chooseGroup.val); setValChoose(chooseGroup.val);
setValSelect("group"); setValSelect("group");
@@ -257,6 +260,7 @@ export default function CreateProject() {
type="default" type="default"
placeholder="Nama Kegiatan" placeholder="Nama Kegiatan"
required required
bg={colors.card}
value={dataForm.title} value={dataForm.title}
error={error.title} error={error.title}
errorText="Nama kegiatan tidak boleh kosong" errorText="Nama kegiatan tidak boleh kosong"
@@ -294,13 +298,13 @@ export default function CreateProject() {
fileForm.length > 0 && ( fileForm.length > 0 && (
<View style={[Styles.mb15]}> <View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text> <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
<View style={[Styles.wrapPaper]}> <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{ {
fileForm.map((item, index) => ( fileForm.map((item, index) => (
<BorderBottomItem <BorderBottomItem
key={index} key={index}
borderType="all" borderType="all"
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />} icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
title={item.name} title={item.name}
titleWeight="normal" titleWeight="normal"
onPress={() => { setIndexDelFile(index); setModal(true) }} onPress={() => { setIndexDelFile(index); setModal(true) }}
@@ -318,7 +322,7 @@ export default function CreateProject() {
<Text>Total {entitiesMember.length} Anggota</Text> <Text>Total {entitiesMember.length} Anggota</Text>
</View> </View>
<View style={[Styles.borderAll, Styles.round10, Styles.p10]}> <View style={[Styles.borderAll, Styles.round10, Styles.p10, { borderColor: colors.icon, backgroundColor: colors.card }]}>
{entitiesMember.map( {entitiesMember.map(
(item: { img: any; name: any }, index: any) => { (item: { img: any; name: any }, index: any) => {
return ( return (
@@ -344,7 +348,7 @@ export default function CreateProject() {
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu"> <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />} icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { deleteFile(indexDelFile) }} onPress={() => { deleteFile(indexDelFile) }}
/> />

7
app/(application)/project/create/member.tsx
View File

@@ -9,6 +9,7 @@ import Styles from "@/constants/Styles";
import { apiGetUser } from "@/lib/api"; import { apiGetUser } from "@/lib/api";
import { setMemberChoose } from "@/lib/memberChoose"; import { setMemberChoose } from "@/lib/memberChoose";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
@@ -23,6 +24,7 @@ type Props = {
} }
export default function AddMemberCreateProject() { export default function AddMemberCreateProject() {
const { colors } = useTheme();
const dispatch = useDispatch() const dispatch = useDispatch()
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
@@ -103,7 +105,7 @@ export default function AddMemberCreateProject() {
) )
}} }}
/> />
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<InputSearch onChange={(val) => setSearch(val)} value={search} /> <InputSearch onChange={(val) => setSearch(val)} value={search} />
{ {
@@ -129,6 +131,7 @@ export default function AddMemberCreateProject() {
} }
<ScrollView <ScrollView
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
style={{ backgroundColor: colors.background }}
> >
{ {
@@ -149,7 +152,7 @@ export default function AddMemberCreateProject() {
</View> </View>
</View> </View>
{ {
selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} /> selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={colors.text} />
} }
</Pressable> </Pressable>
) )

16
app/(application)/project/create/task.tsx
View File

@@ -7,6 +7,7 @@ import Styles from "@/constants/Styles";
import { formatDateOnly } from "@/lib/fun_formatDateOnly"; import { formatDateOnly } from "@/lib/fun_formatDateOnly";
import { getDatesInRange } from "@/lib/fun_getDatesInRange"; import { getDatesInRange } from "@/lib/fun_getDatesInRange";
import { setTaskCreate } from "@/lib/taskCreate"; import { setTaskCreate } from "@/lib/taskCreate";
import { useTheme } from "@/providers/ThemeProvider";
import { useHeaderHeight } from '@react-navigation/elements'; import { useHeaderHeight } from '@react-navigation/elements';
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
import 'intl'; import 'intl';
@@ -27,6 +28,7 @@ import DateTimePicker, {
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function CreateProjectAddTask() { export default function CreateProjectAddTask() {
const { colors } = useTheme();
const headerHeight = useHeaderHeight(); const headerHeight = useHeaderHeight();
const dispatch = useDispatch() const dispatch = useDispatch()
const [disable, setDisable] = useState(true); const [disable, setDisable] = useState(true);
@@ -119,7 +121,7 @@ export default function CreateProjectAddTask() {
} }
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => ( // headerLeft: () => (
@@ -158,9 +160,9 @@ export default function CreateProjectAddTask() {
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={headerHeight} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView style={{ backgroundColor: colors.background }}>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<DateTimePicker <DateTimePicker
mode="range" mode="range"
startDate={range.startDate} startDate={range.startDate}
@@ -170,7 +172,7 @@ export default function CreateProjectAddTask() {
selected: Styles.selectedDate, selected: Styles.selectedDate,
selected_label: Styles.cWhite, selected_label: Styles.cWhite,
range_fill: Styles.selectRangeDate, range_fill: Styles.selectRangeDate,
month_label: Styles.cBlack, month_label: { color: colors.text },
month_selector_label: Styles.cBlack, month_selector_label: Styles.cBlack,
year_label: Styles.cBlack, year_label: Styles.cBlack,
year_selector_label: Styles.cBlack, year_selector_label: Styles.cBlack,
@@ -186,7 +188,7 @@ export default function CreateProjectAddTask() {
<Text style={[Styles.mb05]}> <Text style={[Styles.mb05]}>
Tanggal Mulai <Text style={Styles.cError}>*</Text> Tanggal Mulai <Text style={Styles.cError}>*</Text>
</Text> </Text>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: "center" }}>{from}</Text> <Text style={{ textAlign: "center" }}>{from}</Text>
</View> </View>
</View> </View>
@@ -194,7 +196,7 @@ export default function CreateProjectAddTask() {
<Text style={[Styles.mb05]}> <Text style={[Styles.mb05]}>
Tanggal Berakhir <Text style={Styles.cError}>*</Text> Tanggal Berakhir <Text style={Styles.cError}>*</Text>
</Text> </Text>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: "center" }}>{to}</Text> <Text style={{ textAlign: "center" }}>{to}</Text>
</View> </View>
</View> </View>
@@ -215,7 +217,7 @@ export default function CreateProjectAddTask() {
type="default" type="default"
placeholder="Judul Tugas" placeholder="Judul Tugas"
required required
bg="white" bg={colors.card}
value={title} value={title}
error={error.title} error={error.title}
errorText="Judul tidak boleh kosong" errorText="Judul tidak boleh kosong"

15
app/(application)/project/index.tsx
View File

@@ -11,6 +11,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetProject } from "@/lib/api"; import { apiGetProject } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { import {
AntDesign, AntDesign,
Ionicons, Ionicons,
@@ -40,9 +41,11 @@ export default function ListProject() {
}>(); }>();
const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0') const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0')
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const { colors } = useTheme();
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
const [search, setSearch] = useState("") const [search, setSearch] = useState("")
const [nameGroup, setNameGroup] = useState("") const [nameGroup, setNameGroup] = useState("")
// ... state same ...
const [isYear, setYear] = useState("") const [isYear, setYear] = useState("")
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])
const [isList, setList] = useState(false) const [isList, setList] = useState(false)
@@ -122,7 +125,7 @@ export default function ListProject() {
}) })
return ( return (
<View style={[Styles.p15, { flex: 1 }]}> <View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<View> <View>
<ScrollView horizontal style={[Styles.mb10]} showsHorizontalScrollIndicator={false}> <ScrollView horizontal style={[Styles.mb10]} showsHorizontalScrollIndicator={false}>
<ButtonTab <ButtonTab
@@ -133,7 +136,7 @@ export default function ListProject() {
icon={ icon={
<MaterialCommunityIcons <MaterialCommunityIcons
name="clock-alert-outline" name="clock-alert-outline"
color={statusFix == "0" ? "white" : "black"} color={statusFix == "0" ? "white" : colors.text}
size={20} size={20}
/> />
} }
@@ -147,7 +150,7 @@ export default function ListProject() {
icon={ icon={
<MaterialCommunityIcons <MaterialCommunityIcons
name="progress-check" name="progress-check"
color={statusFix == "1" ? "white" : "black"} color={statusFix == "1" ? "white" : colors.text}
size={20} size={20}
/> />
} }
@@ -161,7 +164,7 @@ export default function ListProject() {
icon={ icon={
<Ionicons <Ionicons
name="checkmark-done-circle-outline" name="checkmark-done-circle-outline"
color={statusFix == "2" ? "white" : "black"} color={statusFix == "2" ? "white" : colors.text}
size={20} size={20}
/> />
} }
@@ -175,7 +178,7 @@ export default function ListProject() {
icon={ icon={
<AntDesign <AntDesign
name="closecircleo" name="closecircleo"
color={statusFix == "3" ? "white" : "black"} color={statusFix == "3" ? "white" : colors.text}
size={20} size={20}
/> />
} }
@@ -191,7 +194,7 @@ export default function ListProject() {
> >
<MaterialCommunityIcons <MaterialCommunityIcons
name={isList ? "format-list-bulleted" : "view-grid"} name={isList ? "format-list-bulleted" : "view-grid"}
color={"black"} color={colors.text}
size={30} size={30}
/> />
</Pressable> </Pressable>

28
app/(application)/project/update/[detail].tsx
View File

@@ -9,6 +9,7 @@ import { formatDateOnly } from "@/lib/fun_formatDateOnly";
import { getDatesInRange } from "@/lib/fun_getDatesInRange"; import { getDatesInRange } from "@/lib/fun_getDatesInRange";
import { setUpdateProject } from "@/lib/projectUpdate"; import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { useHeaderHeight } from '@react-navigation/elements'; import { useHeaderHeight } from '@react-navigation/elements';
import { router, Stack, useLocalSearchParams } from "expo-router"; import { router, Stack, useLocalSearchParams } from "expo-router";
import 'intl'; import 'intl';
@@ -21,6 +22,7 @@ import DateTimePicker, { DateType } from "react-native-ui-datepicker";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
export default function UpdateProjectTask() { export default function UpdateProjectTask() {
const { colors } = useTheme();
const headerHeight = useHeaderHeight(); const headerHeight = useHeaderHeight();
const dispatch = useDispatch() const dispatch = useDispatch()
const update = useSelector((state: any) => state.projectUpdate) const update = useSelector((state: any) => state.projectUpdate)
@@ -169,7 +171,7 @@ export default function UpdateProjectTask() {
}, [range]) }, [range])
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
// headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />, // headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
@@ -200,9 +202,9 @@ export default function UpdateProjectTask() {
behavior={Platform.OS === 'ios' ? 'padding' : undefined} behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={headerHeight} keyboardVerticalOffset={headerHeight}
> >
<ScrollView> <ScrollView style={{ backgroundColor: colors.background }}>
<View style={[Styles.p15, Styles.mb100]}> <View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
{ {
!loading !loading
&& &&
@@ -217,13 +219,13 @@ export default function UpdateProjectTask() {
selected: Styles.selectedDate, selected: Styles.selectedDate,
selected_label: Styles.cWhite, selected_label: Styles.cWhite,
range_fill: Styles.selectRangeDate, range_fill: Styles.selectRangeDate,
month_label: Styles.cBlack, month_label: { color: colors.text },
month_selector_label: Styles.cBlack, month_selector_label: { color: colors.text },
year_label: Styles.cBlack, year_label: { color: colors.text },
year_selector_label: Styles.cBlack, year_selector_label: { color: colors.text },
day_label: Styles.cBlack, day_label: { color: colors.text },
time_label: Styles.cBlack, time_label: { color: colors.text },
weekday_label: Styles.cBlack, weekday_label: { color: colors.text },
}} }}
/> />
} }
@@ -233,13 +235,13 @@ export default function UpdateProjectTask() {
<View style={[Styles.rowSpaceBetween]}> <View style={[Styles.rowSpaceBetween]}>
<View style={[{ width: '48%' }]}> <View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Tanggal Mulai <Text style={Styles.cError}>*</Text></Text> <Text style={[Styles.mb05]}>Tanggal Mulai <Text style={Styles.cError}>*</Text></Text>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: 'center' }}>{from}</Text> <Text style={{ textAlign: 'center' }}>{from}</Text>
</View> </View>
</View> </View>
<View style={[{ width: '48%' }]}> <View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Tanggal Berakhir <Text style={Styles.cError}>*</Text></Text> <Text style={[Styles.mb05]}>Tanggal Berakhir <Text style={Styles.cError}>*</Text></Text>
<View style={[Styles.wrapPaper, Styles.p10]}> <View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: 'center' }}>{to}</Text> <Text style={{ textAlign: 'center' }}>{to}</Text>
</View> </View>
</View> </View>
@@ -260,7 +262,7 @@ export default function UpdateProjectTask() {
type="default" type="default"
placeholder="Judul Tugas" placeholder="Judul Tugas"
required required
bg="white" bg={colors.card}
value={title} value={title}
error={error.title} error={error.title}
errorText="Judul tidak boleh kosong" errorText="Judul tidak boleh kosong"

8
app/(application)/search.tsx
View File

@@ -8,12 +8,14 @@ import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiGetSearch } from "@/lib/api"; import { apiGetSearch } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, MaterialIcons } from "@expo/vector-icons"; import { AntDesign, MaterialIcons } from "@expo/vector-icons";
import { router, Stack } from "expo-router"; import { router, Stack } from "expo-router";
import React, { useState } from "react"; import React, { useState } from "react";
import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native"; import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
import Toast from "react-native-toast-message"; import Toast from "react-native-toast-message";
// ... types ...
type PropsUser = { type PropsUser = {
id: string id: string
name: string name: string
@@ -43,6 +45,7 @@ export default function Search() {
const [dataProject, setDataProject] = useState<PropProject[]>([]) const [dataProject, setDataProject] = useState<PropProject[]>([])
const [refreshing, setRefreshing] = useState(false) const [refreshing, setRefreshing] = useState(false)
const [search, setSearch] = useState('') const [search, setSearch] = useState('')
const { colors } = useTheme();
async function handleSearch(cari: string) { async function handleSearch(cari: string) {
try { try {
@@ -79,7 +82,7 @@ export default function Search() {
return ( return (
<> <>
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<Stack.Screen <Stack.Screen
options={{ options={{
headerTitle: 'Pencarian', headerTitle: 'Pencarian',
@@ -100,6 +103,7 @@ export default function Search() {
<RefreshControl <RefreshControl
refreshing={refreshing} refreshing={refreshing}
onRefresh={handleRefresh} onRefresh={handleRefresh}
tintColor={colors.primary}
/> />
} }
> >
@@ -177,7 +181,7 @@ export default function Search() {
</ScrollView> </ScrollView>
: :
<View style={[Styles.contentItemCenter, Styles.mt10]}> <View style={[Styles.contentItemCenter, Styles.mt10]}>
<Text style={[Styles.textInformation, Styles.cGray]}>Tidak ada data</Text> <Text style={[Styles.textInformation, { color: colors.icon }]}>Tidak ada data</Text>
</View> </View>
} }

19
app/_layout.tsx
View File

@@ -1,4 +1,5 @@
import AuthProvider from '@/providers/AuthProvider'; import AuthProvider from '@/providers/AuthProvider';
import ThemeProvider from '@/providers/ThemeProvider';
import { useFonts } from 'expo-font'; import { useFonts } from 'expo-font';
import { Stack } from 'expo-router'; import { Stack } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen'; import * as SplashScreen from 'expo-splash-screen';
@@ -29,14 +30,16 @@ export default function RootLayout() {
return ( return (
<GestureHandlerRootView style={{ flex: 1 }}> <GestureHandlerRootView style={{ flex: 1 }}>
<NotifierWrapper> <NotifierWrapper>
<AuthProvider> <ThemeProvider>
<Stack> <AuthProvider>
<Stack.Screen name="index" options={{ headerShown: false }} /> <Stack>
<Stack.Screen name="verification" options={{ headerShown: false }} /> <Stack.Screen name="index" options={{ headerShown: false }} />
<Stack.Screen name="(application)" options={{ headerShown: false }} /> <Stack.Screen name="verification" options={{ headerShown: false }} />
</Stack> <Stack.Screen name="(application)" options={{ headerShown: false }} />
<StatusBar style="auto" /> </Stack>
</AuthProvider> <StatusBar style="auto" />
</AuthProvider>
</ThemeProvider>
</NotifierWrapper> </NotifierWrapper>
</GestureHandlerRootView> </GestureHandlerRootView>
); );

8
app/verification.tsx
View File

@@ -3,6 +3,7 @@ import Text from '@/components/Text';
import { ConstEnv } from "@/constants/ConstEnv"; import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import CryptoES from "crypto-es"; import CryptoES from "crypto-es";
import React, { useState } from "react"; import React, { useState } from "react";
import { Image, View } from "react-native"; import { Image, View } from "react-native";
@@ -15,6 +16,7 @@ export default function Index() {
value, value,
setValue, setValue,
}); });
const { colors } = useTheme();
const { signIn } = useAuthSession(); const { signIn } = useAuthSession();
const login = (): void => { const login = (): void => {
@@ -24,7 +26,7 @@ export default function Index() {
signIn(encrypted); signIn(encrypted);
} }
return ( return (
<View style={Styles.wrapLogin} > <View style={[Styles.wrapLogin, { backgroundColor: colors.background }]} >
<View style={{ alignItems: "center", marginVertical: 50 }}> <View style={{ alignItems: "center", marginVertical: 50 }}>
<Image <Image
source={require("../assets/images/logo.png")} source={require("../assets/images/logo.png")}
@@ -50,7 +52,7 @@ export default function Index() {
renderCell={({ index, symbol, isFocused }) => ( renderCell={({ index, symbol, isFocused }) => (
<Text <Text
key={index} key={index}
style={[Styles.verificationCell, isFocused && Styles.verificationFocusCell]} style={[Styles.verificationCell, isFocused && Styles.verificationFocusCell, { borderColor: isFocused ? colors.tint : colors.icon, color: colors.text }]}
onLayout={getCellOnLayoutHandler(index)}> onLayout={getCellOnLayoutHandler(index)}>
{symbol || (isFocused ? <Cursor /> : null)} {symbol || (isFocused ? <Cursor /> : null)}
</Text> </Text>
@@ -61,7 +63,7 @@ export default function Index() {
// onPress={() => { router.push("/home") }} // onPress={() => { router.push("/home") }}
onPress={login} onPress={login}
/> />
<Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center' }]}> <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center', color: colors.tint }]}>
Tidak Menerima kode verifikasi? Kirim Ulang Tidak Menerima kode verifikasi? Kirim Ulang
</Text> </Text>
</View> </View>

14
components/Text.tsx
View File

@@ -1,23 +1,19 @@
import { useTheme } from '@/providers/ThemeProvider';
import React from 'react'; import React from 'react';
import { Text as RNText, TextProps as RNTextProps, StyleSheet } from 'react-native'; import { StyleSheet, Text as RNText, TextProps as RNTextProps } from 'react-native';
type TextProps = RNTextProps & { type TextProps = RNTextProps & {
children: React.ReactNode; children: React.ReactNode;
}; };
const Text: React.FC<TextProps> = ({ style, ...props }) => { const Text: React.FC<TextProps> = ({ style, ...props }) => {
const { colors } = useTheme();
return ( return (
<RNText <RNText
style={[styles.defaultText, style]} style={[{ color: colors.text }, style]}
{...props} {...props}
/> />
); );
}; };
const styles = StyleSheet.create({
defaultText: {
color: 'black',
},
});
export default Text; export default Text;

6
components/announcement/headerAnnouncementDetail.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
import { setUpdateAnnouncement } from "@/lib/announcementUpdate" import { setUpdateAnnouncement } from "@/lib/announcementUpdate"
import { apiDeleteAnnouncement } from "@/lib/api" import { apiDeleteAnnouncement } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons" import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
import { router } from "expo-router" import { router } from "expo-router"
import { useState } from "react" import { useState } from "react"
@@ -18,6 +19,7 @@ type Props = {
} }
export default function HeaderRightAnnouncementDetail({ id }: Props) { export default function HeaderRightAnnouncementDetail({ id }: Props) {
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false) const [isVisible, setVisible] = useState(false)
const update = useSelector((state: any) => state.announcementUpdate) const update = useSelector((state: any) => state.announcementUpdate)
const dispatch = useDispatch() const dispatch = useDispatch()
@@ -46,7 +48,7 @@ export default function HeaderRightAnnouncementDetail({ id }: Props) {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu"> <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit" title="Edit"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -54,7 +56,7 @@ export default function HeaderRightAnnouncementDetail({ id }: Props) {
}} }}
/> />
<MenuItemRow <MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />} icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)

4
components/announcement/headerAnnouncementList.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles" import Styles from "@/constants/Styles"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign } from "@expo/vector-icons" import { AntDesign } from "@expo/vector-icons"
import { router } from "expo-router" import { router } from "expo-router"
import { useState } from "react" import { useState } from "react"
@@ -9,6 +10,7 @@ import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow" import MenuItemRow from "../menuItemRow"
export default function HeaderRightAnnouncementList() { export default function HeaderRightAnnouncementList() {
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false) const [isVisible, setVisible] = useState(false)
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
@@ -21,7 +23,7 @@ export default function HeaderRightAnnouncementList() {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu"> <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />} icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
title="Tambah Pengumuman" title="Tambah Pengumuman"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)

6
components/auth/viewLogin.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles" import Styles from "@/constants/Styles"
import { apiCheckPhoneLogin, apiSendOtp } from "@/lib/api" import { apiCheckPhoneLogin, apiSendOtp } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import AsyncStorage from "@react-native-async-storage/async-storage" import AsyncStorage from "@react-native-async-storage/async-storage"
import { StatusBar } from "expo-status-bar" import { StatusBar } from "expo-status-bar"
import { useState } from "react" import { useState } from "react"
@@ -21,6 +22,7 @@ export default function ViewLogin({ onValidate }: Props) {
const [disableLogin, setDisableLogin] = useState(true) const [disableLogin, setDisableLogin] = useState(true)
const [phone, setPhone] = useState('') const [phone, setPhone] = useState('')
const { signIn, encryptToken } = useAuthSession(); const { signIn, encryptToken } = useAuthSession();
const { colors, theme } = useTheme();
const handleCheckPhone = async () => { const handleCheckPhone = async () => {
try { try {
@@ -49,8 +51,8 @@ export default function ViewLogin({ onValidate }: Props) {
}; };
return ( return (
<SafeAreaView> <SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<StatusBar style={Platform.OS === 'ios' ? 'dark' : 'light'} translucent={false} backgroundColor="black" /> <StatusBar style={theme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
<ToastCustom /> <ToastCustom />
<View style={[Styles.p20, Styles.h100]}> <View style={[Styles.p20, Styles.h100]}>
<View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}> <View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}>

14
components/auth/viewVerification.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { apiSendOtp } from "@/lib/api"; import { apiSendOtp } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider"; import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import AsyncStorage from "@react-native-async-storage/async-storage"; import AsyncStorage from "@react-native-async-storage/async-storage";
import { StatusBar } from "expo-status-bar"; import { StatusBar } from "expo-status-bar";
import { useState } from "react"; import { useState } from "react";
@@ -20,6 +21,7 @@ export default function ViewVerification({ phone, otp }: Props) {
const [value, setValue] = useState(''); const [value, setValue] = useState('');
const [otpFix, setOtpFix] = useState(otp) const [otpFix, setOtpFix] = useState(otp)
const { signIn, encryptToken } = useAuthSession(); const { signIn, encryptToken } = useAuthSession();
const { colors, theme } = useTheme();
const login = async () => { const login = async () => {
const valueUser = await AsyncStorage.getItem('user'); const valueUser = await AsyncStorage.getItem('user');
@@ -57,9 +59,9 @@ export default function ViewVerification({ phone, otp }: Props) {
return ( return (
<> <>
<StatusBar style={Platform.OS === 'ios' ? 'dark' : 'light'} translucent={false} backgroundColor="black" /> <StatusBar style={theme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
<ToastCustom /> <ToastCustom />
<View style={Styles.wrapLogin} > <View style={[Styles.wrapLogin, { backgroundColor: colors.background }]} >
<View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}> <View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}>
<Image <Image
source={require("../../assets/images/logo.png")} source={require("../../assets/images/logo.png")}
@@ -77,22 +79,22 @@ export default function ViewVerification({ phone, otp }: Props) {
<OtpInput <OtpInput
numberOfDigits={4} numberOfDigits={4}
onTextChange={(text) => setValue(text)} onTextChange={(text) => setValue(text)}
focusColor={'#19345E'} focusColor={colors.tint}
type="numeric" type="numeric"
theme={{ theme={{
containerStyle: { containerStyle: {
width: '80%', width: '80%',
alignSelf: 'center' alignSelf: 'center'
}, },
pinCodeContainerStyle: Styles.verificationCell, pinCodeContainerStyle: { ...Styles.verificationCell, borderColor: colors.icon },
pinCodeTextStyle: { color: 'black' } pinCodeTextStyle: { color: colors.text }
}} }}
/> />
<ButtonForm <ButtonForm
text="SUBMIT" text="SUBMIT"
onPress={() => { onCheckOtp() }} onPress={() => { onCheckOtp() }}
/> />
<Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center' }]}> <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center', color: colors.tint }]}>
Tidak Menerima kode verifikasi? <Text onPress={() => { resendOtp() }}>Kirim Ulang</Text> Tidak Menerima kode verifikasi? <Text onPress={() => { resendOtp() }}>Kirim Ulang</Text>
</Text> </Text>
</View> </View>

14
components/banner/headerBannerList.tsx
View File

@@ -1,21 +1,23 @@
import { useState } from "react";
import ButtonMenuHeader from "../buttonMenuHeader";
import DrawerBottom from "../drawerBottom";
import { View } from "react-native";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import MenuItemRow from "../menuItemRow"; import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { router } from "expo-router"; import { router } from "expo-router";
import { useState } from "react";
import { View } from "react-native";
import ButtonMenuHeader from "../buttonMenuHeader";
import DrawerBottom from "../drawerBottom";
import MenuItemRow from "../menuItemRow";
export default function HeaderRightBannerList() { export default function HeaderRightBannerList() {
const [isVisible, setVisible] = useState(false) const [isVisible, setVisible] = useState(false)
const { colors } = useTheme()
return ( return (
<> <>
<ButtonMenuHeader onPress={() => { setVisible(true) }} /> <ButtonMenuHeader onPress={() => { setVisible(true) }} />
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={() => setVisible(false)} title="Menu"> <DrawerBottom animation="slide" isVisible={isVisible} setVisible={() => setVisible(false)} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />} icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
title="Tambah Banner" title="Tambah Banner"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)

12
components/borderBottomItem.tsx
View File

@@ -1,5 +1,6 @@
import { ColorsStatus } from "@/constants/ColorsStatus"; import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import React, { useState } from "react"; import React, { useState } from "react";
import { Dimensions, Pressable, View } from "react-native"; import { Dimensions, Pressable, View } from "react-native";
import Text from "./Text"; import Text from "./Text";
@@ -16,7 +17,7 @@ type Props = {
leftBottomInfo?: React.ReactNode | string leftBottomInfo?: React.ReactNode | string
rightBottomInfo?: React.ReactNode | string rightBottomInfo?: React.ReactNode | string
titleWeight?: 'normal' | 'bold' titleWeight?: 'normal' | 'bold'
bgColor?: 'white' | 'transparent' bgColor?: string
width?: number width?: number
descEllipsize?: boolean descEllipsize?: boolean
textColor?: string, textColor?: string,
@@ -26,8 +27,9 @@ type Props = {
export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, onLongPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, width, descEllipsize, textColor, colorPress, titleShowAll }: Props) { export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, onLongPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, width, descEllipsize, textColor, colorPress, titleShowAll }: Props) {
const lebarDim = Dimensions.get("window").width; const lebarDim = Dimensions.get("window").width;
const { colors } = useTheme();
const lebar = width ? lebarDim * width / 100 : 'auto'; const lebar = width ? lebarDim * width / 100 : 'auto';
const textColorFix = textColor ? textColor : 'black'; const textColorFix = textColor ? textColor : colors.text;
const [isTap, setIsTap] = useState(false); const [isTap, setIsTap] = useState(false);
@@ -37,11 +39,11 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
onPressOut={() => setIsTap(false)} onPressOut={() => setIsTap(false)}
style={({ pressed }) => [ style={({ pressed }) => [
borderType == 'bottom' borderType == 'bottom'
? Styles.wrapItemBorderBottom ? [Styles.wrapItemBorderBottom, { borderBottomColor: colors.icon }]
: borderType == 'all' : borderType == 'all'
? Styles.wrapItemBorderAll ? [Styles.wrapItemBorderAll, { borderColor: colors.icon }]
: Styles.wrapItemBorderNone, : Styles.wrapItemBorderNone,
bgColor && bgColor == 'white' && ColorsStatus.white, { backgroundColor: bgColor },
// efek warna saat ditekan (sementara) // efek warna saat ditekan (sementara)
isTap && colorPress && ColorsStatus.pressedGray, isTap && colorPress && ColorsStatus.pressedGray,
]} ]}

14
components/borderBottomItem2.tsx
View File

@@ -2,6 +2,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus";
import { ConstEnv } from "@/constants/ConstEnv"; import { ConstEnv } from "@/constants/ConstEnv";
import { isImageFile } from "@/constants/FileExtensions"; import { isImageFile } from "@/constants/FileExtensions";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons"; import { MaterialCommunityIcons } from "@expo/vector-icons";
import * as FileSystem from 'expo-file-system'; import * as FileSystem from 'expo-file-system';
import { startActivityAsync } from 'expo-intent-launcher'; import { startActivityAsync } from 'expo-intent-launcher';
@@ -45,9 +46,10 @@ type PropsFile = {
export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress, onLongPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, width, descEllipsize, textColor, colorPress, titleShowAll, dataFile }: Props) { export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress, onLongPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight, bgColor, width, descEllipsize, textColor, colorPress, titleShowAll, dataFile }: Props) {
const { colors } = useTheme();
const lebarDim = Dimensions.get("window").width; const lebarDim = Dimensions.get("window").width;
const lebar = width ? lebarDim * width / 100 : 'auto'; const lebar = width ? lebarDim * width / 100 : 'auto';
const textColorFix = textColor ? textColor : 'black'; const textColorFix = textColor ? textColor : colors.text;
const [isTap, setIsTap] = useState(false); const [isTap, setIsTap] = useState(false);
const [loadingOpen, setLoadingOpen] = useState(false) const [loadingOpen, setLoadingOpen] = useState(false)
const [chooseFile, setChooseFile] = useState<PropsFile>() const [chooseFile, setChooseFile] = useState<PropsFile>()
@@ -115,11 +117,11 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
onPressOut={() => setIsTap(false)} onPressOut={() => setIsTap(false)}
style={({ pressed }) => [ style={({ pressed }) => [
borderType == 'bottom' borderType == 'bottom'
? Styles.wrapItemBorderBottom ? [Styles.wrapItemBorderBottom, { borderBottomColor: colors.icon }]
: borderType == 'all' : borderType == 'all'
? Styles.wrapItemBorderAll ? [Styles.wrapItemBorderAll, { borderColor: colors.icon }]
: Styles.wrapItemBorderNone, : Styles.wrapItemBorderNone,
bgColor && bgColor == 'white' && ColorsStatus.white, bgColor && bgColor == 'white' && { backgroundColor: colors.card },
// efek warna saat ditekan (sementara) // efek warna saat ditekan (sementara)
isTap && colorPress && ColorsStatus.pressedGray, isTap && colorPress && ColorsStatus.pressedGray,
]} ]}
@@ -151,7 +153,7 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
{dataFile.map((item, index) => ( {dataFile.map((item, index) => (
<Pressable <Pressable
key={index} key={index}
style={[Styles.rowItemsCenter, Styles.borderAll, Styles.round10, Styles.ph05, Styles.pv03, Styles.mr05]} style={[Styles.rowItemsCenter, Styles.borderAll, Styles.round10, Styles.ph05, Styles.pv03, Styles.mr05, { borderColor: colors.icon }]}
onPress={() => { onPress={() => {
isImageFile(item.extension) ? isImageFile(item.extension) ?
handleChooseFile(item) handleChooseFile(item)
@@ -161,7 +163,7 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
<MaterialCommunityIcons <MaterialCommunityIcons
name={isImageFile(item.extension) ? "file-image-outline" : "file-document-outline"} name={isImageFile(item.extension) ? "file-image-outline" : "file-document-outline"}
size={18} size={18}
color="grey" /> color={colors.icon} />
<Text style={[Styles.textInformation, Styles.cGray]}>{item.name}.{item.extension}</Text> <Text style={[Styles.textInformation, Styles.cGray]}>{item.name}.{item.extension}</Text>
</Pressable> </Pressable>
))} ))}

4
components/buttonFiturMenu.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import React from "react"; import React from "react";
import { TouchableWithoutFeedback, View } from "react-native"; import { TouchableWithoutFeedback, View } from "react-native";
import Text from "./Text"; import Text from "./Text";
@@ -10,10 +11,11 @@ type Props = {
}; };
export function ButtonFiturMenu({ onPress, icon, text }: Props) { export function ButtonFiturMenu({ onPress, icon, text }: Props) {
const { colors } = useTheme();
return ( return (
<TouchableWithoutFeedback onPress={onPress}> <TouchableWithoutFeedback onPress={onPress}>
<View style={{ alignItems: 'center' }}> <View style={{ alignItems: 'center' }}>
<View style={[Styles.btnFiturMenu]}> <View style={[Styles.btnFiturMenu, { backgroundColor: colors.card, borderColor: colors.icon + '20', shadowColor: colors.text }]}>
{icon} {icon}
</View> </View>
<Text style={[Styles.mt05]}>{text}</Text> <Text style={[Styles.mt05]}>{text}</Text>

15
components/buttonSelect.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather } from "@expo/vector-icons"; import { Feather } from "@expo/vector-icons";
import { Pressable, View } from "react-native"; import { Pressable, View } from "react-native";
import Text from "./Text"; import Text from "./Text";
@@ -12,12 +13,20 @@ type Props = {
} }
export default function ButtonSelect({ value, onPress, round, error, errorText }: Props) { export default function ButtonSelect({ value, onPress, round, error, errorText }: Props) {
const { colors } = useTheme();
return ( return (
<View style={[Styles.mv05]}> <View style={[Styles.mv05]}>
<Pressable onPress={onPress}> <Pressable onPress={onPress}>
<View style={[Styles.inputRoundForm, Styles.inputRoundFormRight, round && Styles.round30, Styles.pv10, error && { borderColor: "red" }]}> <View style={[
<Feather name="arrow-right-circle" size={20} color="black" /> Styles.inputRoundForm,
<Text style={[Styles.cBlack]}>{value}</Text> Styles.inputRoundFormRight,
round && Styles.round30,
Styles.pv10,
{ borderColor: colors.icon, backgroundColor: colors.card },
error && { borderColor: "red" }
]}>
<Feather name="arrow-right-circle" size={20} color={colors.text} />
<Text style={[{ color: colors.text }]}>{value}</Text>
</View> </View>
</Pressable> </Pressable>
{error && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cError]}>{errorText}</Text>)} {error && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cError]}>{errorText}</Text>)}

4
components/buttonTab.tsx
View File

@@ -1,5 +1,6 @@
import { ColorsStatus } from "@/constants/ColorsStatus" import { ColorsStatus } from "@/constants/ColorsStatus"
import Styles from "@/constants/Styles" import Styles from "@/constants/Styles"
import { useTheme } from "@/providers/ThemeProvider";
import { TouchableOpacity } from "react-native" import { TouchableOpacity } from "react-native"
import Text from "./Text"; import Text from "./Text";
@@ -14,10 +15,11 @@ type Props = {
export default function ButtonTab({ active, value, onPress, label, n, icon }: Props) { export default function ButtonTab({ active, value, onPress, label, n, icon }: Props) {
const { colors } = useTheme();
return ( return (
<TouchableOpacity style={[Styles.btnTab, (active == value) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}> <TouchableOpacity style={[Styles.btnTab, (active == value) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
{icon} {icon}
<Text numberOfLines={1} style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : 'black' }]}>{label}</Text> <Text numberOfLines={1} style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : colors.text }]}>{label}</Text>
</TouchableOpacity> </TouchableOpacity>
) )
} }

8
components/calendar/headerCalendarDetail.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
import { apiDeleteCalendar } from "@/lib/api" import { apiDeleteCalendar } from "@/lib/api"
import { setUpdateCalendar } from "@/lib/calendarUpdate" import { setUpdateCalendar } from "@/lib/calendarUpdate"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons" import { Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router" import { router } from "expo-router"
import { useState } from "react" import { useState } from "react"
@@ -19,6 +20,7 @@ type Props = {
} }
export default function HeaderRightCalendarDetail({ id, idReminder }: Props) { export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
const { colors } = useTheme()
const [isVisible, setVisible] = useState(false) const [isVisible, setVisible] = useState(false)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const update = useSelector((state: any) => state.calendarUpdate) const update = useSelector((state: any) => state.calendarUpdate)
@@ -49,7 +51,7 @@ export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu"> <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<MaterialIcons name="groups" color="black" size={25} />} icon={<MaterialIcons name="groups" color={colors.text} size={25} />}
title="Tambah Anggota" title="Tambah Anggota"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -57,7 +59,7 @@ export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
}} }}
/> />
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit" title="Edit"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -65,7 +67,7 @@ export default function HeaderRightCalendarDetail({ id, idReminder }: Props) {
}} }}
/> />
<MenuItemRow <MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />} icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus" title="Hapus"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)

6
components/calendar/headerCalendarList.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles" import Styles from "@/constants/Styles"
import { apiGetDivisionOneFeature } from "@/lib/api" import { apiGetDivisionOneFeature } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons" import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons"
import { router, useLocalSearchParams } from "expo-router" import { router, useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
@@ -11,6 +12,7 @@ import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow" import MenuItemRow from "../menuItemRow"
export default function HeaderRightCalendarList() { export default function HeaderRightCalendarList() {
const { colors } = useTheme()
const [isVisible, setVisible] = useState(false) const [isVisible, setVisible] = useState(false)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
@@ -47,7 +49,7 @@ export default function HeaderRightCalendarList() {
<></> <></>
) : ( ) : (
<MenuItemRow <MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />} icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
title="Tambah Acara" title="Tambah Acara"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -57,7 +59,7 @@ export default function HeaderRightCalendarList() {
) )
} }
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="history" color="black" size={25} />} icon={<MaterialCommunityIcons name="history" color={colors.text} size={25} />}
title="Riwayat" title="Riwayat"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)

4
components/calendar/itemDateCalendar.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Pressable, View } from "react-native"; import { Pressable, View } from "react-native";
import Text from "../Text"; import Text from "../Text";
@@ -11,10 +12,11 @@ type Props = {
export default function ItemDateCalendar({ text, isSelected, isSign, onPress }: Props) { export default function ItemDateCalendar({ text, isSelected, isSign, onPress }: Props) {
const { colors } = useTheme()
return ( return (
<> <>
<Pressable style={{ alignItems: 'center' }} onPress={onPress}> <Pressable style={{ alignItems: 'center' }} onPress={onPress}>
<Text style={[isSelected ? Styles.cWhite : Styles.cBlack]}>{text}</Text> <Text style={[isSelected ? Styles.cWhite : { color: colors.text }]}>{text}</Text>
<View style={[Styles.signDate, { backgroundColor: isSign ? 'red' : 'transparent' }]}></View> <View style={[Styles.signDate, { backgroundColor: isSign ? 'red' : 'transparent' }]}></View>
</Pressable> </Pressable>
</> </>

4
components/calendar/itemHistoryEvent.tsx
View File

@@ -1,5 +1,6 @@
import { ColorsStatus } from "@/constants/ColorsStatus"; import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { View } from "react-native"; import { View } from "react-native";
import Text from "../Text"; import Text from "../Text";
@@ -14,12 +15,13 @@ type Props = {
}[] }[]
export default function ItemHistoryEvent({ data }: { data: Props }) { export default function ItemHistoryEvent({ data }: { data: Props }) {
const { colors, activeTheme } = useTheme()
return ( return (
<> <>
{ {
data.length > 0 ? ( data.length > 0 ? (
data.map((item, index) => ( data.map((item, index) => (
<View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, ColorsStatus.lightGreen, Styles.p10, Styles.round10]}> <View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, activeTheme === 'dark' ? { backgroundColor: colors.card } : ColorsStatus.lightGreen, Styles.p10, Styles.round10, { borderBottomWidth: 1, borderColor: colors.background }]}>
<View style={[Styles.mr10, Styles.ph05]}> <View style={[Styles.mr10, Styles.ph05]}>
<Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text> <Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text> <Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>

8
components/discussion/headerDiscussionDetail.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
import { apiArchiveDiscussion, apiOpenCloseDiscussion } from "@/lib/api" import { apiArchiveDiscussion, apiOpenCloseDiscussion } from "@/lib/api"
import { setUpdateDiscussion } from "@/lib/discussionUpdate" import { setUpdateDiscussion } from "@/lib/discussionUpdate"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons" import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router" import { router } from "expo-router"
import { useState } from "react" import { useState } from "react"
@@ -20,6 +21,7 @@ type Props = {
} }
export default function HeaderRightDiscussionDetail({ id, status, isActive }: Props) { export default function HeaderRightDiscussionDetail({ id, status, isActive }: Props) {
const { colors } = useTheme()
const [isVisible, setVisible] = useState(false) const [isVisible, setVisible] = useState(false)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const update = useSelector((state: any) => state.discussionUpdate) const update = useSelector((state: any) => state.discussionUpdate)
@@ -72,7 +74,7 @@ export default function HeaderRightDiscussionDetail({ id, status, isActive }: Pr
isActive && isActive &&
<> <>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit" title="Edit"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -80,7 +82,7 @@ export default function HeaderRightDiscussionDetail({ id, status, isActive }: Pr
}} }}
/> />
<MenuItemRow <MenuItemRow
icon={<MaterialIcons name={status == 1 ? 'close' : 'check'} color="black" size={25} />} icon={<MaterialIcons name={status == 1 ? 'close' : 'check'} color={colors.text} size={25} />}
title={status == 1 ? 'Tutup Diskusi' : 'Buka Diskusi'} title={status == 1 ? 'Tutup Diskusi' : 'Buka Diskusi'}
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -96,7 +98,7 @@ export default function HeaderRightDiscussionDetail({ id, status, isActive }: Pr
</> </>
} }
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="archive-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="archive-outline" color={colors.text} size={25} />}
title={isActive ? 'Arsipkan' : 'Aktifkan Diskusi'} title={isActive ? 'Arsipkan' : 'Aktifkan Diskusi'}
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)

4
components/discussion/headerDiscussionList.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles" import Styles from "@/constants/Styles"
import { apiGetDivisionOneFeature } from "@/lib/api" import { apiGetDivisionOneFeature } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign } from "@expo/vector-icons" import { AntDesign } from "@expo/vector-icons"
import { router, useLocalSearchParams } from "expo-router" import { router, useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
@@ -11,6 +12,7 @@ import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow" import MenuItemRow from "../menuItemRow"
export default function HeaderRightDiscussionList() { export default function HeaderRightDiscussionList() {
const { colors } = useTheme()
const [isVisible, setVisible] = useState(false) const [isVisible, setVisible] = useState(false)
const [isAdminDivision, setIsAdminDivision] = useState(false); const [isAdminDivision, setIsAdminDivision] = useState(false);
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
@@ -45,7 +47,7 @@ export default function HeaderRightDiscussionList() {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu"> <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />} icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
title="Tambah Diskusi" title="Tambah Diskusi"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)

10
components/discussionItem.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles"; import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather, Ionicons } from "@expo/vector-icons"; import { Feather, Ionicons } from "@expo/vector-icons";
import { Pressable, View } from "react-native"; import { Pressable, View } from "react-native";
import Text from "./Text"; import Text from "./Text";
@@ -11,21 +12,22 @@ type Props = {
} }
export default function DiscussionItem({ title, user, date, onPress }: Props) { export default function DiscussionItem({ title, user, date, onPress }: Props) {
const { colors } = useTheme();
return ( return (
<Pressable style={[Styles.wrapItemDiscussion]} onPress={onPress}> <Pressable style={[Styles.wrapItemDiscussion, { backgroundColor: colors.card, borderColor: colors.background }]} onPress={onPress}>
<View style={[Styles.rowItemsCenter, Styles.mb10]}> <View style={[Styles.rowItemsCenter, Styles.mb10]}>
<Ionicons name="chatbox-ellipses-outline" size={22} color="black" style={Styles.mr10} /> <Ionicons name="chatbox-ellipses-outline" size={22} color={colors.text} style={Styles.mr10} />
<View style={[{ flex: 1 }]}> <View style={[{ flex: 1 }]}>
<Text style={{ fontWeight: 'bold' }} numberOfLines={1} ellipsizeMode="tail">{title}</Text> <Text style={{ fontWeight: 'bold' }} numberOfLines={1} ellipsizeMode="tail">{title}</Text>
</View> </View>
</View> </View>
<View style={[Styles.rowSpaceBetween]}> <View style={[Styles.rowSpaceBetween]}>
<View style={[Styles.rowItemsCenter, { flex: 1 }]}> <View style={[Styles.rowItemsCenter, { flex: 1 }]}>
<Feather name="user" size={18} color="grey" style={Styles.mr05} /> <Feather name="user" size={18} color={colors.text} style={Styles.mr05} />
<Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{user}</Text> <Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{user}</Text>
</View> </View>
<View style={[Styles.rowItemsCenter, { flex: 1, justifyContent: 'flex-end' }]}> <View style={[Styles.rowItemsCenter, { flex: 1, justifyContent: 'flex-end' }]}>
<Feather name="clock" size={18} color="grey" style={Styles.mr05} /> <Feather name="clock" size={18} color={colors.text} style={Styles.mr05} />
<Text style={[Styles.textInformation]}>{date}</Text> <Text style={[Styles.textInformation]}>{date}</Text>
</View> </View>
</View> </View>

12
components/discussion_general/headerDiscussionDetail.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
import { apiDeleteDiscussionGeneral, apiUpdateStatusDiscussionGeneral } from "@/lib/api" import { apiDeleteDiscussionGeneral, apiUpdateStatusDiscussionGeneral } from "@/lib/api"
import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail" import { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail"
import { useAuthSession } from "@/providers/AuthProvider" import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons" import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router" import { router } from "expo-router"
import { useState } from "react" import { useState } from "react"
@@ -21,6 +22,7 @@ type Props = {
export default function HeaderRightDiscussionGeneralDetail({ id, active, status }: Props) { export default function HeaderRightDiscussionGeneralDetail({ id, active, status }: Props) {
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false) const [isVisible, setVisible] = useState(false)
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
const dispatch = useDispatch() const dispatch = useDispatch()
@@ -59,7 +61,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu"> <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<MaterialIcons name="groups" color="black" size={25} />} icon={<MaterialIcons name="groups" color={colors.text} size={25} />}
title="Anggota" title="Anggota"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -74,7 +76,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
( (
<> <>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit" title="Edit"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -82,7 +84,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
}} }}
/> />
<MenuItemRow <MenuItemRow
icon={<MaterialIcons name="close" color="black" size={25} />} icon={<MaterialIcons name="close" color={colors.text} size={25} />}
title={status == 1 ? 'Tutup Diskusi' : 'Buka Diskusi'} title={status == 1 ? 'Tutup Diskusi' : 'Buka Diskusi'}
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -99,7 +101,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
) )
: :
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="archive-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="archive-outline" color={colors.text} size={25} />}
title="Aktifkan Diskusi" title="Aktifkan Diskusi"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -119,7 +121,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
entityUser.role != "user" && entityUser.role != "coadmin" && active && entityUser.role != "user" && entityUser.role != "coadmin" && active &&
<View style={[Styles.rowItemsCenter, Styles.mt15]}> <View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="archive-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="archive-outline" color={colors.text} size={25} />}
title="Arsipkan" title="Arsipkan"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)

6
components/discussion_general/headerDiscussionGeneral.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles" import Styles from "@/constants/Styles"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign } from "@expo/vector-icons" import { AntDesign } from "@expo/vector-icons"
import { router } from "expo-router" import { router } from "expo-router"
import { useState } from "react" import { useState } from "react"
@@ -10,6 +11,7 @@ import MenuItemRow from "../menuItemRow"
import ModalFilter from "../modalFilter" import ModalFilter from "../modalFilter"
export default function HeaderDiscussionGeneral() { export default function HeaderDiscussionGeneral() {
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false) const [isVisible, setVisible] = useState(false)
const [isFilter, setFilter] = useState(false) const [isFilter, setFilter] = useState(false)
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
@@ -23,7 +25,7 @@ export default function HeaderDiscussionGeneral() {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu"> <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />} icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
title="Tambah Diskusi" title="Tambah Diskusi"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -33,7 +35,7 @@ export default function HeaderDiscussionGeneral() {
{ {
(entityUser.role == 'supadmin' || entityUser.role == 'developer') && (entityUser.role == 'supadmin' || entityUser.role == 'developer') &&
<MenuItemRow <MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />} icon={<AntDesign name="filter" color={colors.text} size={25} />}
title="Filter" title="Filter"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)

6
components/division/discussionDivisionDetail.tsx
View File

@@ -7,6 +7,7 @@ import { View } from "react-native";
import Text from "../Text"; import Text from "../Text";
import DiscussionItem from "../discussionItem"; import DiscussionItem from "../discussionItem";
import Skeleton from "../skeleton"; import Skeleton from "../skeleton";
import { useTheme } from "@/providers/ThemeProvider";
type Props = { type Props = {
id: string; id: string;
@@ -17,6 +18,7 @@ type Props = {
}; };
export default function DiscussionDivisionDetail({ refreshing }: { refreshing: boolean }) { export default function DiscussionDivisionDetail({ refreshing }: { refreshing: boolean }) {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession(); const { token, decryptToken } = useAuthSession();
const { id } = useLocalSearchParams<{ id: string }>(); const { id } = useLocalSearchParams<{ id: string }>();
const [data, setData] = useState<Props[]>([]); const [data, setData] = useState<Props[]>([]);
@@ -48,11 +50,11 @@ export default function DiscussionDivisionDetail({ refreshing }: { refreshing: b
handleLoad(true) handleLoad(true)
}, []) }, [])
return ( return (
<View style={[Styles.mb15]}> <View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text> <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
<View style={[Styles.wrapPaper]}> <View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{ {
loading ? loading ?

2
components/division/fileDivisionDetail.tsx
View File

@@ -13,6 +13,7 @@ import * as mime from 'react-native-mime-types';
import { ICarouselInstance } from "react-native-reanimated-carousel"; import { ICarouselInstance } from "react-native-reanimated-carousel";
import ModalLoading from "../modalLoading"; import ModalLoading from "../modalLoading";
import Skeleton from "../skeleton"; import Skeleton from "../skeleton";
import { useTheme } from "@/providers/ThemeProvider";
import Text from "../Text"; import Text from "../Text";
type Props = { type Props = {
@@ -25,6 +26,7 @@ type Props = {
} }
export default function FileDivisionDetail({ refreshing }: { refreshing: boolean }) { export default function FileDivisionDetail({ refreshing }: { refreshing: boolean }) {
const { colors } = useTheme();
const ref = React.useRef<ICarouselInstance>(null); const ref = React.useRef<ICarouselInstance>(null);
const width = Dimensions.get("window").width; const width = Dimensions.get("window").width;
const [data, setData] = useState<Props[]>([]) const [data, setData] = useState<Props[]>([])

18
components/division/fiturDivisionDetail.tsx
View File

@@ -7,6 +7,7 @@ import { router, useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { View } from "react-native" import { View } from "react-native"
import BorderBottomItem from "../borderBottomItem" import BorderBottomItem from "../borderBottomItem"
import { useTheme } from "@/providers/ThemeProvider"
import Text from "../Text" import Text from "../Text"
type Props = { type Props = {
@@ -17,6 +18,7 @@ type Props = {
} }
export default function FiturDivisionDetail({ refreshing }: { refreshing: boolean }) { export default function FiturDivisionDetail({ refreshing }: { refreshing: boolean }) {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>() const { id } = useLocalSearchParams<{ id: string }>()
const [data, setData] = useState<Props>({ const [data, setData] = useState<Props>({
@@ -51,11 +53,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
<View> <View>
<View style={[Styles.rowSpaceBetween]}> <View style={[Styles.rowSpaceBetween]}>
<BorderBottomItem <BorderBottomItem
bgColor="white" bgColor={colors.card}
borderType="all" borderType="all"
icon={ icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}> <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="filetext1" size={25} color={'#384288'} /> <AntDesign name="filetext1" size={25} color={colors.primary} />
</View> </View>
} }
title="Tugas" title="Tugas"
@@ -65,11 +67,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
/> />
<BorderBottomItem <BorderBottomItem
bgColor="white" bgColor={colors.card}
borderType="all" borderType="all"
icon={ icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}> <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="attach-file" size={25} color={'#384288'} /> <MaterialIcons name="attach-file" size={25} color={colors.primary} />
</View> </View>
} }
title="Dokumen" title="Dokumen"
@@ -81,11 +83,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
<View style={[Styles.rowSpaceBetween]}> <View style={[Styles.rowSpaceBetween]}>
<BorderBottomItem <BorderBottomItem
bgColor="white" bgColor={colors.card}
borderType="all" borderType="all"
icon={ icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}> <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<SimpleLineIcons name="bubbles" size={25} color={'#384288'} /> <SimpleLineIcons name="bubbles" size={25} color={colors.primary} />
</View> </View>
} }
title="Diskusi" title="Diskusi"
@@ -95,11 +97,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
/> />
<BorderBottomItem <BorderBottomItem
bgColor="white" bgColor={colors.card}
borderType="all" borderType="all"
icon={ icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}> <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="calendar" size={25} color={'#384288'} /> <AntDesign name="calendar" size={25} color={colors.primary} />
</View> </View>
} }
title="Kalender" title="Kalender"

6
components/division/headerDivisionDetail.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles" import Styles from "@/constants/Styles"
import { useTheme } from "@/providers/ThemeProvider"
import { MaterialCommunityIcons } from "@expo/vector-icons" import { MaterialCommunityIcons } from "@expo/vector-icons"
import { useState } from "react" import { useState } from "react"
import { View } from "react-native" import { View } from "react-native"
@@ -12,6 +13,7 @@ type Props = {
} }
export default function HeaderRightDivisionDetail({ id }: Props) { export default function HeaderRightDivisionDetail({ id }: Props) {
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false) const [isVisible, setVisible] = useState(false)
return ( return (
@@ -20,7 +22,7 @@ export default function HeaderRightDivisionDetail({ id }: Props) {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu"> <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="information-variant" color="black" size={25} />} icon={<MaterialCommunityIcons name="information-variant" color={colors.text} size={25} />}
title="Informasi Divisi" title="Informasi Divisi"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -28,7 +30,7 @@ export default function HeaderRightDivisionDetail({ id }: Props) {
}} }}
/> />
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="chart-bar" color="black" size={25} />} icon={<MaterialCommunityIcons name="chart-bar" color={colors.text} size={25} />}
title="Laporan Divisi" title="Laporan Divisi"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)

6
components/division/headerDivisionInfo.tsx
View File

@@ -12,6 +12,7 @@ import AlertKonfirmasi from "../alertKonfirmasi"
import ButtonMenuHeader from "../buttonMenuHeader" import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom" import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow" import MenuItemRow from "../menuItemRow"
import { useTheme } from "@/providers/ThemeProvider"
type Props = { type Props = {
id: string | string[] id: string | string[]
@@ -19,6 +20,7 @@ type Props = {
} }
export default function HeaderRightDivisionInfo({ id, active }: Props) { export default function HeaderRightDivisionInfo({ id, active }: Props) {
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false) const [isVisible, setVisible] = useState(false)
const { token, decryptToken } = useAuthSession() const { token, decryptToken } = useAuthSession()
const update = useSelector((state: any) => state.divisionUpdate) const update = useSelector((state: any) => state.divisionUpdate)
@@ -48,7 +50,7 @@ export default function HeaderRightDivisionInfo({ id, active }: Props) {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu"> <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit Divisi" title="Edit Divisi"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -56,7 +58,7 @@ export default function HeaderRightDivisionInfo({ id, active }: Props) {
}} }}
/> />
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />} icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color={colors.text} size={25} />}
title={active ? "Non Aktifkan" : "Aktifkan"} title={active ? "Non Aktifkan" : "Aktifkan"}
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)

10
components/division/headerDivisionList.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles" import Styles from "@/constants/Styles"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons" import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons"
import { router } from "expo-router" import { router } from "expo-router"
import { useState } from "react" import { useState } from "react"
@@ -10,6 +11,7 @@ import MenuItemRow from "../menuItemRow"
import ModalFilter from "../modalFilter" import ModalFilter from "../modalFilter"
export default function HeaderRightDivisionList() { export default function HeaderRightDivisionList() {
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false) const [isVisible, setVisible] = useState(false)
const [isFilter, setFilter] = useState(false) const [isFilter, setFilter] = useState(false)
const entityUser = useSelector((state: any) => state.user) const entityUser = useSelector((state: any) => state.user)
@@ -23,7 +25,7 @@ export default function HeaderRightDivisionList() {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu"> <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}> <View style={Styles.rowItemsCenter}>
<MenuItemRow <MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />} icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
title="Tambah Divisi" title="Tambah Divisi"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -31,9 +33,9 @@ export default function HeaderRightDivisionList() {
}} }}
/> />
{ {
(entityUser.role == "supadmin" || entityUser.role == "developer") && (entityUser.role == "userRole" || entityUser.role == "developer") &&
<MenuItemRow <MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />} icon={<AntDesign name="filter" color={colors.text} size={25} />}
title="Filter" title="Filter"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)
@@ -47,7 +49,7 @@ export default function HeaderRightDivisionList() {
{ {
(entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin") && (entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin") &&
<MenuItemRow <MenuItemRow
icon={<MaterialCommunityIcons name="chart-bar" color="black" size={25} />} icon={<MaterialCommunityIcons name="chart-bar" color={colors.text} size={25} />}
title="Laporan" title="Laporan"
onPress={() => { onPress={() => {
setVisible(false) setVisible(false)

Some files were not shown because too many files have changed in this diff Show More