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

14
components/Text.tsx
View File

@@ -1,23 +1,19 @@
import { useTheme } from '@/providers/ThemeProvider';
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 & {
children: React.ReactNode;
};
const Text: React.FC<TextProps> = ({ style, ...props }) => {
const { colors } = useTheme();
return (
<RNText
style={[styles.defaultText, style]}
<RNText
style={[{ color: colors.text }, style]}
{...props}
/>
);
};
const styles = StyleSheet.create({
defaultText: {
color: 'black',
},
});
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 { apiDeleteAnnouncement } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"
import { router } from "expo-router"
import { useState } from "react"
@@ -18,6 +19,7 @@ type Props = {
}
export default function HeaderRightAnnouncementDetail({ id }: Props) {
const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false)
const update = useSelector((state: any) => state.announcementUpdate)
const dispatch = useDispatch()
@@ -46,7 +48,7 @@ export default function HeaderRightAnnouncementDetail({ id }: Props) {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit"
onPress={() => {
setVisible(false)
@@ -54,7 +56,7 @@ export default function HeaderRightAnnouncementDetail({ id }: Props) {
}}
/>
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus"
onPress={() => {
setVisible(false)

4
components/announcement/headerAnnouncementList.tsx
View File

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

6
components/auth/viewLogin.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles"
import { apiCheckPhoneLogin, apiSendOtp } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import AsyncStorage from "@react-native-async-storage/async-storage"
import { StatusBar } from "expo-status-bar"
import { useState } from "react"
@@ -21,6 +22,7 @@ export default function ViewLogin({ onValidate }: Props) {
const [disableLogin, setDisableLogin] = useState(true)
const [phone, setPhone] = useState('')
const { signIn, encryptToken } = useAuthSession();
const { colors, theme } = useTheme();
const handleCheckPhone = async () => {
try {
@@ -49,8 +51,8 @@ export default function ViewLogin({ onValidate }: Props) {
};
return (
<SafeAreaView>
<StatusBar style={Platform.OS === 'ios' ? 'dark' : 'light'} translucent={false} backgroundColor="black" />
<SafeAreaView style={{ flex: 1, backgroundColor: colors.background }}>
<StatusBar style={theme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
<ToastCustom />
<View style={[Styles.p20, Styles.h100]}>
<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 { apiSendOtp } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { StatusBar } from "expo-status-bar";
import { useState } from "react";
@@ -20,6 +21,7 @@ export default function ViewVerification({ phone, otp }: Props) {
const [value, setValue] = useState('');
const [otpFix, setOtpFix] = useState(otp)
const { signIn, encryptToken } = useAuthSession();
const { colors, theme } = useTheme();
const login = async () => {
const valueUser = await AsyncStorage.getItem('user');
@@ -57,9 +59,9 @@ export default function ViewVerification({ phone, otp }: Props) {
return (
<>
<StatusBar style={Platform.OS === 'ios' ? 'dark' : 'light'} translucent={false} backgroundColor="black" />
<StatusBar style={theme === 'dark' ? 'light' : 'dark'} translucent={false} backgroundColor={colors.background} />
<ToastCustom />
<View style={Styles.wrapLogin} >
<View style={[Styles.wrapLogin, { backgroundColor: colors.background }]} >
<View style={{ alignItems: "center", marginTop: 70, marginBottom: 50 }}>
<Image
source={require("../../assets/images/logo.png")}
@@ -77,22 +79,22 @@ export default function ViewVerification({ phone, otp }: Props) {
<OtpInput
numberOfDigits={4}
onTextChange={(text) => setValue(text)}
focusColor={'#19345E'}
focusColor={colors.tint}
type="numeric"
theme={{
containerStyle: {
width: '80%',
alignSelf: 'center'
},
pinCodeContainerStyle: Styles.verificationCell,
pinCodeTextStyle: { color: 'black' }
pinCodeContainerStyle: { ...Styles.verificationCell, borderColor: colors.icon },
pinCodeTextStyle: { color: colors.text }
}}
/>
<ButtonForm
text="SUBMIT"
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>
</Text>
</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 MenuItemRow from "../menuItemRow";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons";
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() {
const [isVisible, setVisible] = useState(false)
const { colors } = useTheme()
return (
<>
<ButtonMenuHeader onPress={() => { setVisible(true) }} />
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={() => setVisible(false)} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
title="Tambah Banner"
onPress={() => {
setVisible(false)

12
components/borderBottomItem.tsx
View File

@@ -1,5 +1,6 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import React, { useState } from "react";
import { Dimensions, Pressable, View } from "react-native";
import Text from "./Text";
@@ -16,7 +17,7 @@ type Props = {
leftBottomInfo?: React.ReactNode | string
rightBottomInfo?: React.ReactNode | string
titleWeight?: 'normal' | 'bold'
bgColor?: 'white' | 'transparent'
bgColor?: string
width?: number
descEllipsize?: boolean
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) {
const lebarDim = Dimensions.get("window").width;
const { colors } = useTheme();
const lebar = width ? lebarDim * width / 100 : 'auto';
const textColorFix = textColor ? textColor : 'black';
const textColorFix = textColor ? textColor : colors.text;
const [isTap, setIsTap] = useState(false);
@@ -37,11 +39,11 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
onPressOut={() => setIsTap(false)}
style={({ pressed }) => [
borderType == 'bottom'
? Styles.wrapItemBorderBottom
? [Styles.wrapItemBorderBottom, { borderBottomColor: colors.icon }]
: borderType == 'all'
? Styles.wrapItemBorderAll
? [Styles.wrapItemBorderAll, { borderColor: colors.icon }]
: Styles.wrapItemBorderNone,
bgColor && bgColor == 'white' && ColorsStatus.white,
{ backgroundColor: bgColor },
// efek warna saat ditekan (sementara)
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 { isImageFile } from "@/constants/FileExtensions";
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import * as FileSystem from 'expo-file-system';
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) {
const { colors } = useTheme();
const lebarDim = Dimensions.get("window").width;
const lebar = width ? lebarDim * width / 100 : 'auto';
const textColorFix = textColor ? textColor : 'black';
const textColorFix = textColor ? textColor : colors.text;
const [isTap, setIsTap] = useState(false);
const [loadingOpen, setLoadingOpen] = useState(false)
const [chooseFile, setChooseFile] = useState<PropsFile>()
@@ -115,11 +117,11 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
onPressOut={() => setIsTap(false)}
style={({ pressed }) => [
borderType == 'bottom'
? Styles.wrapItemBorderBottom
? [Styles.wrapItemBorderBottom, { borderBottomColor: colors.icon }]
: borderType == 'all'
? Styles.wrapItemBorderAll
? [Styles.wrapItemBorderAll, { borderColor: colors.icon }]
: Styles.wrapItemBorderNone,
bgColor && bgColor == 'white' && ColorsStatus.white,
bgColor && bgColor == 'white' && { backgroundColor: colors.card },
// efek warna saat ditekan (sementara)
isTap && colorPress && ColorsStatus.pressedGray,
]}
@@ -151,7 +153,7 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
{dataFile.map((item, index) => (
<Pressable
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={() => {
isImageFile(item.extension) ?
handleChooseFile(item)
@@ -161,7 +163,7 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
<MaterialCommunityIcons
name={isImageFile(item.extension) ? "file-image-outline" : "file-document-outline"}
size={18}
color="grey" />
color={colors.icon} />
<Text style={[Styles.textInformation, Styles.cGray]}>{item.name}.{item.extension}</Text>
</Pressable>
))}

4
components/buttonFiturMenu.tsx
View File

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

15
components/buttonSelect.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather } from "@expo/vector-icons";
import { Pressable, View } from "react-native";
import Text from "./Text";
@@ -12,12 +13,20 @@ type Props = {
}
export default function ButtonSelect({ value, onPress, round, error, errorText }: Props) {
const { colors } = useTheme();
return (
<View style={[Styles.mv05]}>
<Pressable onPress={onPress}>
<View style={[Styles.inputRoundForm, Styles.inputRoundFormRight, round && Styles.round30, Styles.pv10, error && { borderColor: "red" }]}>
<Feather name="arrow-right-circle" size={20} color="black" />
<Text style={[Styles.cBlack]}>{value}</Text>
<View style={[
Styles.inputRoundForm,
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>
</Pressable>
{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 Styles from "@/constants/Styles"
import { useTheme } from "@/providers/ThemeProvider";
import { TouchableOpacity } from "react-native"
import Text from "./Text";
@@ -14,10 +15,11 @@ type Props = {
export default function ButtonTab({ active, value, onPress, label, n, icon }: Props) {
const { colors } = useTheme();
return (
<TouchableOpacity style={[Styles.btnTab, (active == value) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
{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>
)
}

8
components/calendar/headerCalendarDetail.tsx
View File

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

6
components/calendar/headerCalendarList.tsx
View File

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

4
components/calendar/itemDateCalendar.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Pressable, View } from "react-native";
import Text from "../Text";
@@ -11,10 +12,11 @@ type Props = {
export default function ItemDateCalendar({ text, isSelected, isSign, onPress }: Props) {
const { colors } = useTheme()
return (
<>
<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>
</Pressable>
</>

4
components/calendar/itemHistoryEvent.tsx
View File

@@ -1,5 +1,6 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { View } from "react-native";
import Text from "../Text";
@@ -14,12 +15,13 @@ type Props = {
}[]
export default function ItemHistoryEvent({ data }: { data: Props }) {
const { colors, activeTheme } = useTheme()
return (
<>
{
data.length > 0 ? (
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]}>
<Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</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 { setUpdateDiscussion } from "@/lib/discussionUpdate"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router"
import { useState } from "react"
@@ -20,6 +21,7 @@ type Props = {
}
export default function HeaderRightDiscussionDetail({ id, status, isActive }: Props) {
const { colors } = useTheme()
const [isVisible, setVisible] = useState(false)
const { token, decryptToken } = useAuthSession()
const update = useSelector((state: any) => state.discussionUpdate)
@@ -72,7 +74,7 @@ export default function HeaderRightDiscussionDetail({ id, status, isActive }: Pr
isActive &&
<>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit"
onPress={() => {
setVisible(false)
@@ -80,7 +82,7 @@ export default function HeaderRightDiscussionDetail({ id, status, isActive }: Pr
}}
/>
<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'}
onPress={() => {
setVisible(false)
@@ -96,7 +98,7 @@ export default function HeaderRightDiscussionDetail({ id, status, isActive }: Pr
</>
}
<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'}
onPress={() => {
setVisible(false)

4
components/discussion/headerDiscussionList.tsx
View File

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

10
components/discussionItem.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather, Ionicons } from "@expo/vector-icons";
import { Pressable, View } from "react-native";
import Text from "./Text";
@@ -11,21 +12,22 @@ type Props = {
}
export default function DiscussionItem({ title, user, date, onPress }: Props) {
const { colors } = useTheme();
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]}>
<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 }]}>
<Text style={{ fontWeight: 'bold' }} numberOfLines={1} ellipsizeMode="tail">{title}</Text>
</View>
</View>
<View style={[Styles.rowSpaceBetween]}>
<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>
</View>
<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>
</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 { setUpdateDiscussionGeneralDetail } from "@/lib/discussionGeneralDetail"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router"
import { useState } from "react"
@@ -21,6 +22,7 @@ type Props = {
export default function HeaderRightDiscussionGeneralDetail({ id, active, status }: Props) {
const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false)
const entityUser = useSelector((state: any) => state.user)
const dispatch = useDispatch()
@@ -59,7 +61,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialIcons name="groups" color="black" size={25} />}
icon={<MaterialIcons name="groups" color={colors.text} size={25} />}
title="Anggota"
onPress={() => {
setVisible(false)
@@ -74,7 +76,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
(
<>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit"
onPress={() => {
setVisible(false)
@@ -82,7 +84,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
}}
/>
<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'}
onPress={() => {
setVisible(false)
@@ -99,7 +101,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
)
:
<MenuItemRow
icon={<MaterialCommunityIcons name="archive-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="archive-outline" color={colors.text} size={25} />}
title="Aktifkan Diskusi"
onPress={() => {
setVisible(false)
@@ -119,7 +121,7 @@ export default function HeaderRightDiscussionGeneralDetail({ id, active, status
entityUser.role != "user" && entityUser.role != "coadmin" && active &&
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow
icon={<MaterialCommunityIcons name="archive-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="archive-outline" color={colors.text} size={25} />}
title="Arsipkan"
onPress={() => {
setVisible(false)

6
components/discussion_general/headerDiscussionGeneral.tsx
View File

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

6
components/division/discussionDivisionDetail.tsx
View File

@@ -7,6 +7,7 @@ import { View } from "react-native";
import Text from "../Text";
import DiscussionItem from "../discussionItem";
import Skeleton from "../skeleton";
import { useTheme } from "@/providers/ThemeProvider";
type Props = {
id: string;
@@ -17,6 +18,7 @@ type Props = {
};
export default function DiscussionDivisionDetail({ refreshing }: { refreshing: boolean }) {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession();
const { id } = useLocalSearchParams<{ id: string }>();
const [data, setData] = useState<Props[]>([]);
@@ -48,11 +50,11 @@ export default function DiscussionDivisionDetail({ refreshing }: { refreshing: b
handleLoad(true)
}, [])
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
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 ModalLoading from "../modalLoading";
import Skeleton from "../skeleton";
import { useTheme } from "@/providers/ThemeProvider";
import Text from "../Text";
type Props = {
@@ -25,6 +26,7 @@ type Props = {
}
export default function FileDivisionDetail({ refreshing }: { refreshing: boolean }) {
const { colors } = useTheme();
const ref = React.useRef<ICarouselInstance>(null);
const width = Dimensions.get("window").width;
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 { View } from "react-native"
import BorderBottomItem from "../borderBottomItem"
import { useTheme } from "@/providers/ThemeProvider"
import Text from "../Text"
type Props = {
@@ -17,6 +18,7 @@ type Props = {
}
export default function FiturDivisionDetail({ refreshing }: { refreshing: boolean }) {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>()
const [data, setData] = useState<Props>({
@@ -51,11 +53,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
<View>
<View style={[Styles.rowSpaceBetween]}>
<BorderBottomItem
bgColor="white"
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="filetext1" size={25} color={'#384288'} />
<AntDesign name="filetext1" size={25} color={colors.primary} />
</View>
}
title="Tugas"
@@ -65,11 +67,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
/>
<BorderBottomItem
bgColor="white"
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="attach-file" size={25} color={'#384288'} />
<MaterialIcons name="attach-file" size={25} color={colors.primary} />
</View>
}
title="Dokumen"
@@ -81,11 +83,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
<View style={[Styles.rowSpaceBetween]}>
<BorderBottomItem
bgColor="white"
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<SimpleLineIcons name="bubbles" size={25} color={'#384288'} />
<SimpleLineIcons name="bubbles" size={25} color={colors.primary} />
</View>
}
title="Diskusi"
@@ -95,11 +97,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
/>
<BorderBottomItem
bgColor="white"
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="calendar" size={25} color={'#384288'} />
<AntDesign name="calendar" size={25} color={colors.primary} />
</View>
}
title="Kalender"

6
components/division/headerDivisionDetail.tsx
View File

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

6
components/division/headerDivisionInfo.tsx
View File

@@ -12,6 +12,7 @@ import AlertKonfirmasi from "../alertKonfirmasi"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow"
import { useTheme } from "@/providers/ThemeProvider"
type Props = {
id: string | string[]
@@ -19,6 +20,7 @@ type Props = {
}
export default function HeaderRightDivisionInfo({ id, active }: Props) {
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false)
const { token, decryptToken } = useAuthSession()
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">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit Divisi"
onPress={() => {
setVisible(false)
@@ -56,7 +58,7 @@ export default function HeaderRightDivisionInfo({ id, active }: Props) {
}}
/>
<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"}
onPress={() => {
setVisible(false)

10
components/division/headerDivisionList.tsx
View File

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

8
components/division/reportChartDocument.tsx
View File

@@ -1,9 +1,11 @@
import Styles from "@/constants/Styles";
import { Dimensions, View } from "react-native";
import { BarChart } from "react-native-gifted-charts";
import { useTheme } from "@/providers/ThemeProvider";
import Text from "../Text";
export default function ReportChartDocument({ data }: { data: { label: string; value: number; }[] }) {
const { colors } = useTheme();
const maxValue = Math.max(...data.map(i => i.value))
const barData = [
{ value: 23, label: 'Gambar', },
@@ -12,9 +14,11 @@ export default function ReportChartDocument({ data }: { data: { label: string; v
const width = Dimensions.get("window").width;
return (
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
<BarChart
xAxisLabelTextStyle={{ color: colors.text }}
yAxisTextStyle={{ color: colors.text }}
showFractionalValues={false}
showYAxisIndices
noOfSections={maxValue < 5 ? 2 : 4}
@@ -32,7 +36,7 @@ export default function ReportChartDocument({ data }: { data: { label: string; v
justifyContent: 'center',
width: width * 0.25
}}>
<Text>{item.value}</Text>
<Text style={{ color: colors.text }}>{item.value}</Text>
</View>
);
}}

8
components/division/reportChartEvent.tsx
View File

@@ -1,9 +1,11 @@
import Styles from "@/constants/Styles";
import { Dimensions, View } from "react-native";
import { BarChart } from "react-native-gifted-charts";
import { useTheme } from "@/providers/ThemeProvider";
import Text from "../Text";
export default function ReportChartEvent({ data }: { data: { label: string; value: number; }[] }) {
const { colors } = useTheme();
const width = Dimensions.get("window").width;
const maxValue = Math.max(...data.map(i => i.value))
const barData = [
@@ -12,9 +14,11 @@ export default function ReportChartEvent({ data }: { data: { label: string; valu
];
return (
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={[Styles.textSubtitle, Styles.mv15]}>ACARA DIVISI</Text>
<BarChart
xAxisLabelTextStyle={{ color: colors.text }}
yAxisTextStyle={{ color: colors.text }}
showFractionalValues={false}
showYAxisIndices
noOfSections={maxValue < 5 ? 2 : 4}
@@ -32,7 +36,7 @@ export default function ReportChartEvent({ data }: { data: { label: string; valu
justifyContent: 'center',
width: width * 0.25
}}>
<Text>{item.value}</Text>
<Text style={{ color: colors.text }}>{item.value}</Text>
</View>
);
}}

6
components/division/reportChartProgress.tsx
View File

@@ -1,9 +1,11 @@
import Styles from "@/constants/Styles";
import { View } from "react-native";
import { PieChart } from "react-native-gifted-charts";
import { useTheme } from "@/providers/ThemeProvider";
import Text from "../Text";
export default function ReportChartProgress({ data }: { data: { color: string; text: string; value: number; }[] }) {
const { colors } = useTheme();
const pieData = [
{ value: 54, text: "54%", color: '#177AD5' },
{ value: 40, text: "40%", color: '#92cc76' },
@@ -12,13 +14,13 @@ export default function ReportChartProgress({ data }: { data: { color: string; t
];
return (
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
<PieChart
data={data}
showText
showValuesAsTooltipText
textColor="black"
textColor={colors.text}
radius={120}
textSize={15}
focusOnPress={false}

6
components/division/taskDivisionDetail.tsx
View File

@@ -7,6 +7,7 @@ import React, { useEffect, useState } from "react";
import { Dimensions, Pressable, View } from "react-native";
import { ICarouselInstance } from "react-native-reanimated-carousel";
import Skeleton from "../skeleton";
import { useTheme } from "@/providers/ThemeProvider";
import Text from "../Text";
type Props = {
@@ -19,6 +20,7 @@ type Props = {
}
export default function TaskDivisionDetail({ refreshing }: { refreshing: boolean }) {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>()
const [data, setData] = useState<Props[]>([])
@@ -57,10 +59,10 @@ export default function TaskDivisionDetail({ refreshing }: { refreshing: boolean
:
data.length > 0 ?
data.map((item, index) => (
<Pressable key={index} style={[Styles.wrapPaper, Styles.mb05]} onPress={() => { router.push(`/division/${id}/task/${item.idProject}`) }}>
<Pressable key={index} style={[Styles.wrapPaper, Styles.mb05, { backgroundColor: colors.card, borderColor: colors.background }]} onPress={() => { router.push(`/division/${id}/task/${item.idProject}`) }}>
<Text style={[Styles.textDefaultSemiBold]} numberOfLines={1} ellipsizeMode="tail">{item.title} - {item.projectTitle}</Text>
<View style={[Styles.rowItemsCenter, Styles.mt10]}>
<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]} numberOfLines={1} ellipsizeMode="tail">{item.dateStart} - {item.dateEnd}</Text>
</View>
</Pressable>

6
components/document/headerDocument.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles";
import { apiCreateFolderDocument, apiUploadFileDocument } from "@/lib/api";
import { setUpdateDokumen } from "@/lib/dokumenUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import * as DocumentPicker from "expo-document-picker";
import { useLocalSearchParams } from "expo-router";
@@ -16,6 +17,7 @@ import MenuItemRow from "../menuItemRow";
import ModalFloat from "../modalFloat";
export default function HeaderRightDocument({ path, isMember }: { path: string, isMember: boolean }) {
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false);
const [newFolder, setNewFolder] = useState(false);
const { id } = useLocalSearchParams<{ id: string }>();
@@ -129,7 +131,7 @@ export default function HeaderRightDocument({ path, isMember }: { path: string,
icon={
<MaterialCommunityIcons
name="folder-open"
color="black"
color={colors.text}
size={25}
/>
}
@@ -143,7 +145,7 @@ export default function HeaderRightDocument({ path, isMember }: { path: string,
/>
<MenuItemRow
icon={<MaterialIcons name="upload-file" color="black" size={25} />}
icon={<MaterialIcons name="upload-file" color={colors.text} size={25} />}
title="Upload File"
onPress={pickDocumentAsync}
/>

8
components/document/itemFile.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { Pressable, View } from "react-native";
import Text from "../Text";
@@ -15,8 +16,9 @@ type Props = {
}
export default function ItemFile({ category, checked, dateTime, title, onChecked, onPress, canChecked }: Props) {
const { colors } = useTheme();
return (
<View style={[Styles.wrapItemBorderBottom]}>
<View style={[Styles.wrapItemBorderBottom, { borderColor: colors.background }]}>
<View style={[Styles.rowItemsCenter]}>
<Pressable onPress={onPress}>
{
@@ -54,8 +56,8 @@ export default function ItemFile({ category, checked, dateTime, title, onChecked
<Pressable onPress={onChecked}>
{
checked
? <MaterialCommunityIcons name="checkbox-marked-circle" size={25} color={'black'} />
: <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={25} color={'#ced4da'} />
? <MaterialCommunityIcons name="checkbox-marked-circle" size={25} color={colors.text} />
: <MaterialCommunityIcons name="checkbox-blank-circle-outline" size={25} color={colors.icon} />
}
</Pressable>

40
components/document/menuBottomSelectDocument.tsx
View File

@@ -1,5 +1,6 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { useState } from "react";
import { Pressable, ScrollView, View } from "react-native";
@@ -22,6 +23,7 @@ type Props = {
}
export default function MenuBottomSelectDocument({ onDone }: Props) {
const { colors } = useTheme();
const [isModal, setModal] = useState(false)
const [isInformasi, setInformasi] = useState(false)
const [isRename, setRename] = useState(false)
@@ -106,17 +108,17 @@ export default function MenuBottomSelectDocument({ onDone }: Props) {
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialCommunityIcons name="folder-move-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="folder-move-outline" color={colors.text} size={25} />}
title="Pindah"
onPress={() => { handleMoveCopy('move') }}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="folder-multiple-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="folder-multiple-outline" color={colors.text} size={25} />}
title="Salin"
onPress={() => { handleMoveCopy('copy') }}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="information-variant" color="black" size={25} />}
icon={<MaterialCommunityIcons name="information-variant" color={colors.text} size={25} />}
title="Informasi"
onPress={() => { setModal(false); setInformasi(true) }}
/>
@@ -134,65 +136,65 @@ export default function MenuBottomSelectDocument({ onDone }: Props) {
<ItemDetailMember category="location" value="home" border />
<ItemDetailMember category="owner" value="Sosial Kemasyarakatan" border />
<ItemDetailMember category="calendar" value="12 Maret 2025" border />
<Pressable style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.wrapItemBorderBottom]} onPress={onPress}>
<Pressable style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.wrapItemBorderBottom, { borderColor: colors.background }]} onPress={onPress}>
<View style={[Styles.rowItemsCenter]}>
<MaterialCommunityIcons name="share-variant-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="share-variant-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Telah dibagikan ke divisi</Text>
</View>
<MaterialCommunityIcons name="chevron-down" size={22} color="black" />
<MaterialCommunityIcons name="chevron-down" size={22} color={colors.text} />
</Pressable>
<ItemAccordion isExpanded={open} viewKey="Accordion" duration={500}>
<ScrollView style={[Styles.w100, { height: 200 }]} >
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Keamanan Masyarakat</Text>
</View>
<View style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>

10
components/document/modalInformasi.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles";
import { apiGetDocumentInformasi } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { useEffect, useState } from "react";
import { ActivityIndicator, Pressable, ScrollView, View } from "react-native";
@@ -26,6 +27,7 @@ type PropsShare = {
}
export default function ModalInformasi({ data }: { data: any }) {
const { colors } = useTheme();
const open = useSharedValue(false)
const [dataInformasi, setDataInformasi] = useState<Props>()
const { token, decryptToken } = useAuthSession()
@@ -76,12 +78,12 @@ export default function ModalInformasi({ data }: { data: any }) {
<ItemDetailMember category="location" value={dataInformasi?.path} border />
<ItemDetailMember category="owner" value={dataInformasi?.division} border />
<ItemDetailMember category="calendar" value={dataInformasi?.createdAt} border />
<Pressable style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.wrapItemBorderBottom]} onPress={() => { open.value = !open.value; }}>
<Pressable style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, Styles.wrapItemBorderBottom, { borderColor: colors.background }]} onPress={() => { open.value = !open.value; }}>
<View style={[Styles.rowItemsCenter]}>
<MaterialCommunityIcons name="share-variant-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="share-variant-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>Telah dibagikan ke divisi</Text>
</View>
<MaterialCommunityIcons name="chevron-down" size={22} color="black" />
<MaterialCommunityIcons name="chevron-down" size={22} color={colors.text} />
</Pressable>
<ItemAccordion isExpanded={open} viewKey="Accordion" duration={500}>
<ScrollView style={[Styles.w100, { height: 200 }]} >
@@ -89,7 +91,7 @@ export default function ModalInformasi({ data }: { data: any }) {
dataShare.length > 0 ? (
dataShare.map((item, index) => (
<View key={index} style={[Styles.rowOnly, Styles.ml10, Styles.mt02]}>
<MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
<MaterialCommunityIcons name="account-group-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>{item.name}</Text>
</View>
))

8
components/document/modalMore.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles";
import { apiCopyDocument, apiMoveDocument } from "@/lib/api";
import { setUpdateDokumen } from "@/lib/dokumenUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
@@ -35,6 +36,7 @@ export default function ModalMore({
data: Props[];
share: boolean;
}) {
const { colors } = useTheme();
const { id } = useLocalSearchParams<{ id: string }>();
const [isInformasi, setInformasi] = useState(false);
const [isCut, setIsCut] = useState(false);
@@ -110,7 +112,7 @@ export default function ModalMore({
icon={
<MaterialCommunityIcons
name="folder-move-outline"
color="black"
color={colors.text}
size={25}
/>
}
@@ -125,7 +127,7 @@ export default function ModalMore({
icon={
<MaterialCommunityIcons
name="folder-multiple-outline"
color="black"
color={colors.text}
size={25}
/>
}
@@ -140,7 +142,7 @@ export default function ModalMore({
icon={
<MaterialCommunityIcons
name="information-variant"
color="black"
color={colors.text}
size={25}
/>
}

4
components/document/modalNewFolder.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles";
import { apiCreateFolderDocument } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { useLocalSearchParams } from "expo-router";
import { useState } from "react";
import { Pressable, View } from "react-native";
@@ -10,6 +11,7 @@ import { InputForm } from "../inputForm";
import ModalFloat from "../modalFloat";
export function ModalNewFolder({ path, onCreated }: { path: string, onCreated: () => void }) {
const { colors } = useTheme()
const { token, decryptToken } = useAuthSession()
const [newFolder, setNewFolder] = useState(false)
const [name, setName] = useState("")
@@ -39,7 +41,7 @@ export function ModalNewFolder({ path, onCreated }: { path: string, onCreated: (
return (
<>
<Pressable style={[Styles.pv05, Styles.borderRight, { width: '50%' }]} onPress={() => setNewFolder(true)}>
<Pressable style={[Styles.pv05, Styles.borderRight, { width: '50%', borderColor: colors.background }]} onPress={() => setNewFolder(true)}>
<Text style={[Styles.textDefaultSemiBold, { textAlign: 'center' }]}>FOLDER BARU</Text>
</Pressable>

10
components/document/modalSalinMove.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles"
import { apiGetDocument } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign, Ionicons } from "@expo/vector-icons"
import { useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react"
@@ -37,6 +38,7 @@ type PropsPath = {
};
export default function ModalSalinMove({ open, close, category, onConfirm, dataChoose }: Props) {
const { colors } = useTheme()
const [data, setData] = useState<DataProps[]>([])
const { token, decryptToken } = useAuthSession()
const [path, setPath] = useState('home')
@@ -73,9 +75,9 @@ export default function ModalSalinMove({ open, close, category, onConfirm, dataC
}}
>
{item.id != "home" && (
<AntDesign name="right" style={[Styles.mh05, Styles.mt02]} />
<AntDesign name="right" style={[Styles.mh05, Styles.mt02]} color={colors.text} />
)}
<Text> {item.name} </Text>
<Text style={{ color: colors.text }}> {item.name} </Text>
</Pressable>
))
}
@@ -106,7 +108,7 @@ export default function ModalSalinMove({ open, close, category, onConfirm, dataC
<Text style={[Styles.textDefault, Styles.cGray, Styles.mt15, { textAlign: 'center' }]}>Tidak ada data</Text>
}
</View>
<View style={[Styles.rowOnly, Styles.mt15, Styles.absolute0]}>
<View style={[Styles.rowOnly, Styles.mt15, Styles.absolute0, { backgroundColor: colors.background }]}>
<ModalNewFolder path={path} onCreated={() => getData()} />
<Pressable style={[Styles.pv05, { width: '50%' }]} onPress={() => onConfirm(path)}>
<Text style={[Styles.textDefaultSemiBold, { textAlign: 'center' }]}>{category == 'copy' ? 'SALIN' : 'PINDAH'}</Text>
@@ -114,4 +116,4 @@ export default function ModalSalinMove({ open, close, category, onConfirm, dataC
</View>
</DrawerBottom>
)
}
}

14
components/drawerBottom.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialIcons } from "@expo/vector-icons";
import { Dimensions, KeyboardAvoidingView, Platform, Pressable, View } from "react-native";
import Modal from 'react-native-modal';
@@ -17,6 +18,7 @@ type Props = {
export default function DrawerBottom({ isVisible, setVisible, title, children, animation, height, backdropPressable = true, keyboard = false }: Props) {
const tinggiScreen = Dimensions.get("window").height;
const { colors } = useTheme();
const tinggiInput = height != undefined ? height : 25
const tinggiFix = tinggiScreen * tinggiInput / 100;
@@ -43,11 +45,11 @@ export default function DrawerBottom({ isVisible, setVisible, title, children, a
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
keyboardVerticalOffset={0}
>
<View style={[Styles.modalContentNew, { height: tinggiFix }]}>
<View style={[Styles.titleContainerNew]}>
<View style={[Styles.modalContentNew, { height: tinggiFix, backgroundColor: colors.background }]}>
<View style={[Styles.titleContainerNew, { borderBottomColor: colors.icon + '20' }]}>
<Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.textDefault, Styles.w90]}>{title}</Text>
<Pressable onPress={() => setVisible(false)}>
<MaterialIcons name="close" color="black" size={22} />
<MaterialIcons name="close" color={colors.text} size={22} />
</Pressable>
</View>
<View style={Styles.contentContainer}>
@@ -56,11 +58,11 @@ export default function DrawerBottom({ isVisible, setVisible, title, children, a
</View>
</KeyboardAvoidingView>
:
<View style={[Styles.modalContentNew, { height: tinggiFix }]}>
<View style={[Styles.titleContainerNew]}>
<View style={[Styles.modalContentNew, { height: tinggiFix, backgroundColor: colors.background }]}>
<View style={[Styles.titleContainerNew, { borderBottomColor: colors.icon + '20' }]}>
<Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.textDefault, Styles.w90]}>{title}</Text>
<Pressable onPress={() => setVisible(false)}>
<MaterialIcons name="close" color="black" size={22} />
<MaterialIcons name="close" color={colors.text} size={22} />
</Pressable>
</View>
<View style={[Styles.contentContainer, { flex: 1 }]}>

12
components/eventItem.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Pressable, View } from "react-native";
import Text from "./Text";
@@ -12,8 +13,17 @@ type Props = {
}
export default function EventItem({ category, title, user, jamAwal, jamAkhir, onPress }: Props) {
const { theme } = useTheme();
const getBackgroundColor = (cat: 'purple' | 'orange') => {
if (theme === 'dark') {
return cat === 'orange' ? '#5A2D0C' : '#1F2255';
}
return cat === 'orange' ? '#FED6C5' : '#D8D8F1';
};
return (
<Pressable style={[Styles.itemEvent, { backgroundColor: category == 'orange' ? '#FED6C5' : '#D8D8F1' }]} onPress={onPress}>
<Pressable style={[Styles.itemEvent, { backgroundColor: getBackgroundColor(category) }]} onPress={onPress}>
<View style={[Styles.dividerEvent, { backgroundColor: category == 'orange' ? '#FB804C' : '#535FCA' }]} />
<View style={[Styles.w90]}>
<Text>{jamAwal} - {jamAkhir}</Text>

5
components/group/headerGroupList.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
import { apiCreateGroup } from "@/lib/api"
import { setUpdateGroup } from "@/lib/groupSlice"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign } from "@expo/vector-icons"
import { useState } from "react"
import { View } from "react-native"
@@ -17,6 +18,7 @@ export default function HeaderRightGroupList() {
const dispatch = useDispatch()
const update = useSelector((state: any) => state.groupUpdate)
const { token, decryptToken } = useAuthSession()
const { colors } = useTheme()
const [isVisible, setVisible] = useState(false)
const [isVisibleTambah, setVisibleTambah] = useState(false)
const [title, setTitle] = useState('')
@@ -62,7 +64,7 @@ export default function HeaderRightGroupList() {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={() => setVisible(false)} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
title="Tambah Lembaga"
onPress={() => {
setVisible(false);
@@ -86,6 +88,7 @@ export default function HeaderRightGroupList() {
placeholder="Nama Lembaga Desa"
required label="Lembaga Desa"
error={error.title}
bg={colors.card}
errorText="Lembaga Desa tidak boleh kosong & minimal 3 karakter"
onChange={(val) => { validationForm(val, 'title') }}
/>

6
components/home/carouselHome.tsx
View File

@@ -4,6 +4,7 @@ import { apiGetBanner, apiGetProfile } from "@/lib/api";
import { setEntities } from "@/lib/bannerSlice";
import { setEntityUser } from "@/lib/userSlice";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import React, { useEffect } from "react";
import { Dimensions, Image, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
@@ -13,6 +14,7 @@ import Text from "../Text";
export default function CaraouselHome({ refreshing }: { refreshing: boolean }) {
const { decryptToken, token } = useAuthSession()
const { colors } = useTheme();
const ref = React.useRef<ICarouselInstance>(null);
const width = Dimensions.get("window").width;
const progress = useSharedValue<number>(0);
@@ -66,12 +68,12 @@ export default function CaraouselHome({ refreshing }: { refreshing: boolean }) {
renderItem={({ index }) => (
<Image
source={{ uri: `${ConstEnv.url_storage}/files/${entities[index].image}` }}
style={[Styles.caraoselContent]}
style={[Styles.caraoselContent, { backgroundColor: colors.primary }]}
/>
)}
/>
:
<View style={[Styles.caraoselContent, { height: width / 2.5 }]}>
<View style={[Styles.caraoselContent, { height: width / 2.5, backgroundColor: colors.primary }]}>
<Text style={[Styles.textDefault, Styles.cWhite, { textAlign: 'center' }]}>BANNER</Text>
</View>
}

6
components/home/chartDokumenHome.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles";
import { apiGetDataHome } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { useEffect, useState } from "react";
import { Dimensions, View } from "react-native";
import { BarChart } from "react-native-gifted-charts";
@@ -16,6 +17,7 @@ type Props = {
export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }) {
const [loading, setLoading] = useState(true)
const { decryptToken, token } = useAuthSession()
const { colors } = useTheme();
const [data, setData] = useState<Props>([])
const [maxValue, setMaxValue] = useState(5)
const barData = [
@@ -56,7 +58,7 @@ export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }
}, []);
return (
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
<Text style={[Styles.textSubtitle, Styles.mv15]}>JUMLAH DOKUMEN</Text>
{
loading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
@@ -70,6 +72,8 @@ export default function ChartDokumenHome({ refreshing }: { refreshing: boolean }
isAnimated
width={width - 140}
barWidth={width * 0.25}
yAxisTextStyle={{ color: colors.text }}
xAxisLabelTextStyle={{ color: colors.text }}
renderTooltip={(item: any, index: any) => {
return (
<View

6
components/home/chartProgresHome.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles";
import { apiGetDataHome } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { useEffect, useState } from "react";
import { View } from "react-native";
import { PieChart } from "react-native-gifted-charts";
@@ -15,6 +16,7 @@ type Props = {
export default function ChartProgresHome({ refreshing }: { refreshing: boolean }) {
const { decryptToken, token } = useAuthSession()
const { colors } = useTheme();
const [data, setData] = useState<Props>([])
const [loading, setLoading] = useState(true)
@@ -46,7 +48,7 @@ export default function ChartProgresHome({ refreshing }: { refreshing: boolean }
}, []);
return (
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15]}>
<View style={[Styles.wrapPaper, Styles.contentItemCenter, Styles.mb15, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
<Text style={[Styles.textSubtitle, Styles.mv15]}>PROGRES KEGIATAN</Text>
{
loading ? <Skeleton width={100} height={200} borderRadius={10} widthType="percent" />
@@ -56,7 +58,7 @@ export default function ChartProgresHome({ refreshing }: { refreshing: boolean }
data={data}
showText
showValuesAsTooltipText
textColor="black"
textColor={colors.text}
radius={120}
textSize={15}
focusOnPress={false}

6
components/home/divisionHome.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles";
import { apiGetDataHome } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather } from "@expo/vector-icons";
import { router } from "expo-router";
import React, { useEffect, useState } from "react";
@@ -17,6 +18,7 @@ type Props = {
export default function DivisionHome({ refreshing }: { refreshing: boolean }) {
const { decryptToken, token } = useAuthSession()
const { colors } = useTheme();
const ref = React.useRef<ICarouselInstance>(null)
const width = Dimensions.get("window").width
const [data, setData] = useState<Props[]>([])
@@ -58,13 +60,13 @@ export default function DivisionHome({ refreshing }: { refreshing: boolean }) {
:
data.length > 0 ?
data.map((item, index) => (
<Pressable style={[Styles.wrapPaper, Styles.mb05,]} key={index} onPress={() => { router.push(`/division/${item.id}`) }}>
<Pressable style={[Styles.wrapPaper, Styles.mb05, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]} key={index} onPress={() => { router.push(`/division/${item.id}`) }}>
<View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
<View>
<Text style={[Styles.textDefaultSemiBold]}>{item.name}</Text>
<Text style={[Styles.textDefault]}>{item.jumlah} Kegiatan</Text>
</View>
<Feather name="chevron-right" size={20} color="black" />
<Feather name="chevron-right" size={20} color={colors.text} />
</View>
</Pressable>
))

4
components/home/eventHome.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles";
import { apiGetDataHome } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router } from "expo-router";
import { useEffect, useState } from "react";
import { View } from "react-native";
@@ -24,6 +25,7 @@ type Props = {
export default function EventHome({ refreshing }: { refreshing: boolean }) {
const { decryptToken, token } = useAuthSession()
const { colors } = useTheme();
const [data, setData] = useState<Props[]>([])
const [loading, setLoading] = useState(true)
@@ -52,7 +54,7 @@ export default function EventHome({ refreshing }: { refreshing: boolean }) {
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Acara Hari Ini</Text>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
{
loading ?

4
components/home/fiturHome.tsx
View File

@@ -1,12 +1,14 @@
import Styles from "@/constants/Styles"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router"
import React from "react"
import { View } from "react-native"
import { ButtonFiturMenu } from "../buttonFiturMenu"
import { router } from "expo-router"
import Text from "../Text"
export default function FiturHome() {
const { colors } = useTheme();
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Fitur</Text>

6
components/inputDate.tsx
View File

@@ -1,6 +1,7 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { stringToDate, stringToDateTime } from "@/lib/fun_stringToDate";
import { useTheme } from "@/providers/ThemeProvider";
import DateTimePicker from "@react-native-community/datetimepicker";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
@@ -26,6 +27,7 @@ type Props = {
export function InputDate({ label, value, placeholder, onChange, info, disable, error, errorText, required, mode, round, width, }: Props) {
const { colors } = useTheme();
const [modal, setModal] = useState(false);
const [valueFix, setValueFix] = useState(new Date())
const [valueFirst, setValueFirst] = useState(mode == "date" ? dayjs(new Date()).format("DD-MM-YYYY") : mode == "time" ? dayjs(new Date()).format("HH:mm") : "")
@@ -84,7 +86,7 @@ export function InputDate({ label, value, placeholder, onChange, info, disable,
</Text>
)
}
<Pressable style={[Styles.inputRoundForm, disable && ColorsStatus.gray, error && { borderColor: "red" }, { backgroundColor: 'white' }]} onPress={() => setModal(true)} disabled={disable}>
<Pressable style={[Styles.inputRoundForm, disable && ColorsStatus.gray, error && { borderColor: "red" }, { backgroundColor: colors.card }]} onPress={() => setModal(true)} disabled={disable}>
<Text style={!value && [Styles.cGray]}>{value ? value : placeholder}</Text>
</Pressable>
{error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
@@ -104,7 +106,7 @@ export function InputDate({ label, value, placeholder, onChange, info, disable,
display="spinner"
onChange={(event, date) => { onChangeDate(event.type, date) }}
onTouchCancel={() => setModal(false)}
textColor="black"
textColor={colors.text}
/>
</ModalFloat>
)

46
components/inputForm.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Dimensions, Platform, TextInput, View } from "react-native";
import Text from "./Text";
@@ -15,7 +16,7 @@ type Props = {
type: 'default' | 'visible-password' | 'numeric'
round?: boolean
width?: number
bg?: 'white' | 'transparent'
bg?: string
value?: string
disable?: boolean
multiline?: boolean
@@ -26,13 +27,14 @@ type Props = {
export function InputForm({ label, value, placeholder, onChange, info, disable, error, errorText, required, itemLeft, itemRight, type, round, width, bg, multiline, mb = true, focus }: Props) {
const lebar = Dimensions.get("window").width;
const { colors } = useTheme();
if (itemLeft != undefined || itemRight != undefined) {
return (
<View style={[mb && Styles.mb10]}>
{
label != undefined && (
<Text style={[{ marginBottom: 5, textTransform: "capitalize" }, error && Styles.cError]}>
<Text style={[{ marginBottom: 5, textTransform: "capitalize", color: colors.text }, error && Styles.cError]}>
{label}
{required && (<Text style={Styles.cError}>*</Text>)}
</Text>
@@ -43,13 +45,18 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft,
multiline && { alignItems: 'flex-end' },
round && Styles.round30,
{ backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' },
{
backgroundColor: bg
? (bg === 'white' ? (colors.background === '#151718' ? '#2d2e2f' : 'white') : bg)
: 'transparent',
borderColor: colors.icon
},
error && { borderColor: "red" },
Platform.OS == 'ios' ? { paddingVertical: 10 } : { paddingVertical: 0, minHeight: 40 },
{ alignItems: 'center' },
multiline
? { alignItems: "flex-end" } // multiline: tombol send di bawah
: { alignItems: "center" }, // default: tetap di tengah
? { alignItems: "flex-end" }
: { alignItems: "center" },
]}>
{itemRight != undefined ? itemRight : itemLeft}
<TextInput
@@ -58,19 +65,19 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
placeholder={placeholder}
keyboardType={type}
onChangeText={onChange}
placeholderTextColor={'gray'}
placeholderTextColor={colors.icon}
multiline={multiline}
numberOfLines={3}
style={[
Styles.mh05,
multiline && { height: '100%', maxHeight: 100 },
{ width: width ? lebar * width / 100 : lebar * 0.78, color: 'black' },
{ width: width ? lebar * width / 100 : lebar * 0.78, color: colors.text },
Platform.OS == 'ios' ? { paddingVertical: 1, paddingTop: 3 } : { paddingVertical: 0 },
]}
/>
</View>
{error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.cGray, Styles.mt05]}>{info}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, { color: colors.icon }, Styles.mt05]}>{info}</Text>)}
</View>
)
}
@@ -81,7 +88,7 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
<View style={[Styles.mb10]}>
{
label != undefined && (
<Text style={[Styles.mb05, error && Styles.cError]}>
<Text style={[Styles.mb05, error && Styles.cError, { color: colors.text }]}>
{label}
{required && (<Text style={Styles.cError}>*</Text>)}
</Text>
@@ -92,14 +99,27 @@ export function InputForm({ label, value, placeholder, onChange, info, disable,
placeholder={placeholder}
keyboardType={type}
editable={!disable}
style={[Styles.inputRoundForm, Platform.OS == 'ios' ? { paddingVertical: 11 } : { paddingVertical: 6 }, error && { borderColor: "red" }, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }, { color: 'black' }, multiline && { height: 150, textAlignVertical: 'top' }]}
style={[
Styles.inputRoundForm,
Platform.OS == 'ios' ? { paddingVertical: 11 } : { paddingVertical: 6 },
error && { borderColor: "red" },
round && Styles.round30,
{
backgroundColor: bg
? (bg === 'white' ? (colors.background === '#151718' ? '#2d2e2f' : 'white') : bg)
: 'transparent',
borderColor: colors.icon
},
{ color: colors.text },
multiline && { height: 150, textAlignVertical: 'top' }
]}
onChangeText={onChange}
placeholderTextColor={'gray'}
placeholderTextColor={colors.icon}
multiline={multiline}
numberOfLines={multiline ? 5 : undefined}
/>
{error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, { color: colors.icon }]}>{info}</Text>)}
</View>
)
}
}

36
components/itemDetailMember.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import { View } from "react-native";
import Text from "./Text";
@@ -10,66 +11,69 @@ type Props = {
}
const data = {
const getData = (color: string) => ({
nik: {
label: 'NIK',
icon: <MaterialCommunityIcons name="card-account-details" size={22} color="black" style={[Styles.mr10]} />
icon: <MaterialCommunityIcons name="card-account-details" size={22} color={color} style={[Styles.mr10]} />
},
group: {
label: 'Lembaga Desa',
icon: <AntDesign name="tags" size={22} color="black" style={[Styles.mr10]} />
icon: <AntDesign name="tags" size={22} color={color} style={[Styles.mr10]} />
},
position: {
label: 'Jabatan',
icon: <MaterialCommunityIcons name="account-tie" size={22} color="black" style={[Styles.mr10]} />
icon: <MaterialCommunityIcons name="account-tie" size={22} color={color} style={[Styles.mr10]} />
},
phone: {
label: 'No Telepon',
icon: <MaterialIcons name="phone" size={22} color="black" style={[Styles.mr10]} />
icon: <MaterialIcons name="phone" size={22} color={color} style={[Styles.mr10]} />
},
email: {
label: 'Email',
icon: <MaterialIcons name="email" size={22} color="black" style={[Styles.mr10]} />
icon: <MaterialIcons name="email" size={22} color={color} style={[Styles.mr10]} />
},
gender: {
label: 'Jenis Kelamin',
icon: <MaterialCommunityIcons name="gender-male-female" size={22} color="black" style={[Styles.mr10]} />
icon: <MaterialCommunityIcons name="gender-male-female" size={22} color={color} style={[Styles.mr10]} />
},
dokumen: {
label: 'Dokumen',
icon: <MaterialCommunityIcons name="file-document-outline" size={22} color="black" style={[Styles.mr10]} />
icon: <MaterialCommunityIcons name="file-document-outline" size={22} color={color} style={[Styles.mr10]} />
},
type: {
label: 'Tipe',
icon: <MaterialIcons name="category" size={22} color="black" style={[Styles.mr10]} />
icon: <MaterialIcons name="category" size={22} color={color} style={[Styles.mr10]} />
},
location: {
label: 'Lokasi',
icon: <MaterialIcons name="location-pin" size={22} color="black" style={[Styles.mr10]} />
icon: <MaterialIcons name="location-pin" size={22} color={color} style={[Styles.mr10]} />
},
owner: {
label: 'Pemilik',
icon: <MaterialCommunityIcons name="account-group-outline" size={22} color="black" style={[Styles.mr10]} />
icon: <MaterialCommunityIcons name="account-group-outline" size={22} color={color} style={[Styles.mr10]} />
},
calendar: {
label: 'Tanggal',
icon: <MaterialCommunityIcons name="calendar-blank" size={22} color="black" style={[Styles.mr10]} />
icon: <MaterialCommunityIcons name="calendar-blank" size={22} color={color} style={[Styles.mr10]} />
},
share: {
label: 'Bagikan',
icon: <MaterialCommunityIcons name="share-variant-outline" size={22} color="black" style={[Styles.mr10]} />
icon: <MaterialCommunityIcons name="share-variant-outline" size={22} color={color} style={[Styles.mr10]} />
}
}
})
export default function ItemDetailMember({ category, value, border }: Props) {
const { colors } = useTheme();
const data = getData(colors.text);
return (
<View style={[Styles.rowSpaceBetween, Styles.rowItemsCenter, !border && Styles.mt10, border && Styles.wrapItemBorderBottom]}>
<View style={[Styles.rowItemsCenter]}>
{data[category].icon}
<Text style={[Styles.textDefault]}>{data[category].label}</Text>
<Text style={[Styles.textDefault, { color: colors.text }]}>{data[category].label}</Text>
</View>
<Text style={[Styles.textDefault, Styles.w60, { textAlign: 'right' }]} numberOfLines={1} ellipsizeMode="tail">{value}</Text>
<Text style={[Styles.textDefault, Styles.w60, { textAlign: 'right', color: colors.text }]} numberOfLines={1} ellipsizeMode="tail">{value}</Text>
</View>
)
}

19
components/itemSectionTanggalTugas.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Pressable, View } from "react-native";
import Text from "./Text";
@@ -12,19 +13,21 @@ type Props = {
}
export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd, onPress }: Props) {
const { colors } = useTheme();
return (
<Pressable style={[Styles.mb15, { borderBottomColor: '#d6d8f6', borderBottomWidth: 1 }]} onPress={onPress}>
<Pressable style={[Styles.mb15, { borderBottomColor: colors.icon, borderBottomWidth: 1 }]} onPress={onPress}>
<View style={[Styles.rowItemsCenter]}>
{
done != undefined ?
done ?
<>
<MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
<MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.cGray]}>Selesai</Text>
</>
:
<>
<MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
<MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color={colors.text} style={[Styles.mr10]} />
<Text style={[Styles.cGray]}>Belum Selesai</Text>
</>
:
@@ -32,9 +35,9 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
}
</View>
<View style={[Styles.wrapPaper, Styles.mv10, Styles.p10]}>
<View style={[Styles.rowItemsCenter, {alignItems:'flex-start'}]}>
<MaterialCommunityIcons name="file-table-outline" size={25} color="black" style={[Styles.mr10]} />
<View style={[Styles.wrapPaper, Styles.mv10, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<View style={[Styles.rowItemsCenter, { alignItems: 'flex-start' }]}>
<MaterialCommunityIcons name="file-table-outline" size={25} color={colors.text} style={[Styles.mr10]} />
<View style={[Styles.w90]}>
<Text style={[Styles.textDefault]}>{title}</Text>
</View>
@@ -43,13 +46,13 @@ export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEn
<View style={[Styles.rowSpaceBetween, Styles.mb15]}>
<View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Tanggal Mulai</Text>
<View style={[Styles.wrapPaper, Styles.p10]}>
<View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: 'center' }}>{dateStart}</Text>
</View>
</View>
<View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Tanggal Berakhir</Text>
<View style={[Styles.wrapPaper, Styles.p10]}>
<View style={[Styles.wrapPaper, Styles.p10, { backgroundColor: colors.card, borderColor: colors.background }]}>
<Text style={{ textAlign: 'center' }}>{dateEnd}</Text>
</View>
</View>

6
components/member/headerMemberDetail.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
import { apiDeleteUser } from "@/lib/api"
import { setUpdateMember } from "@/lib/memberSlice"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { MaterialCommunityIcons } from "@expo/vector-icons"
import { router } from "expo-router"
import { useState } from "react"
@@ -22,6 +23,7 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
const { token, decryptToken } = useAuthSession()
const [isVisible, setVisible] = useState(false)
const update = useSelector((state: any) => state.memberUpdate)
const { colors } = useTheme();
const dispatch = useDispatch()
async function handleActive() {
@@ -48,7 +50,7 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<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"}
onPress={() => {
setVisible(false)
@@ -62,7 +64,7 @@ export default function HeaderRightMemberDetail({ active, id }: Props) {
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit"
onPress={() => {
setVisible(false)

6
components/member/headerMemberList.tsx
View File

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

7
components/modalFloat.tsx
View File

@@ -1,4 +1,5 @@
import Styles from '@/constants/Styles';
import { useTheme } from '@/providers/ThemeProvider';
import { Pressable, View } from 'react-native';
import Modal from 'react-native-modal';
import Text from './Text';
@@ -14,6 +15,8 @@ type Props = {
}
export default function ModalFloat({ isVisible, setVisible, title, children, onSubmit, disableSubmit, buttonHide }: Props) {
const { colors } = useTheme();
return (
<Modal
animationIn={"fadeIn"}
@@ -22,8 +25,8 @@ export default function ModalFloat({ isVisible, setVisible, title, children, onS
hideModalContentWhileAnimating={true}
onBackdropPress={() => { setVisible(false) }}
>
<View style={[Styles.modalFloatContent]}>
<View style={[Styles.titleContainerModalFloat]}>
<View style={[Styles.modalFloatContent, { backgroundColor: colors.card, borderColor: colors.icon }]}>
<View style={[Styles.titleContainerModalFloat, { borderBottomColor: colors.icon }]}>
<Text style={Styles.textDefaultSemiBold}>{title}</Text>
</View>
<View style={[Styles.mb10]}>

8
components/modalSelect.tsx
View File

@@ -7,6 +7,7 @@ import { apiGetGroup, apiGetPosition, apiGetUser } from "@/lib/api"
import { setEntityFilterGroup } from "@/lib/filterSlice"
import { setMemberChoose } from "@/lib/memberChoose"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign } from "@expo/vector-icons"
import { useEffect, useState } from "react"
import { Pressable, ScrollView, View } from "react-native"
@@ -33,6 +34,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
const entityUser = useSelector((state: any) => state.user)
const dispatch = useDispatch()
const entitiesGroup = useSelector((state: any) => state.filterGroup)
const { colors } = useTheme();
const [chooseValue, setChooseValue] = useState({ val: valChoose, label: '' })
const [data, setData] = useState<any>([])
const [search, setSearch] = useState('')
@@ -174,9 +176,9 @@ export default function ModalSelect({ open, close, title, category, idParent, on
{
(category == 'member')
?
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} />
:
chooseValue.val == item.id && <AntDesign name="check" size={20} color={'black'} />
chooseValue.val == item.id && <AntDesign name="check" size={20} color={colors.text} />
}
</Pressable>
))
@@ -192,7 +194,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
}}>
<Text style={[chooseValue.val == item.val ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.label}</Text>
{
valChoose == item.val && <AntDesign name="check" size={20} color={'black'} />
valChoose == item.val && <AntDesign name="check" size={20} color={colors.text} />
}
</Pressable>
))

10
components/modalSelectMultiple.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles"
import { apiGetDivisionGroup, apiGetDocumentInformasi, apiGetListDivisionByIdDivision } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign } from "@expo/vector-icons"
import { useEffect, useState } from "react"
import { Pressable, ScrollView, View } from "react-native"
@@ -34,6 +35,7 @@ type GroupData = {
}
export default function ModalSelectMultiple({ open, close, title, category, choose, onSelect, value, item }: Props) {
const { colors } = useTheme()
const [isChoose, setChoose] = useState(choose)
const { token, decryptToken } = useAuthSession()
const [data, setData] = useState<any>([])
@@ -161,7 +163,7 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
<Text numberOfLines={1} style={[Styles.w80]}>{item.name}</Text>
{
selectedDivision.some((i: any) => i.id == item.id)
? <AntDesign name="check" size={18} color={'black'}/>
? <AntDesign name="check" size={18} color={colors.text} />
: <></>
}
</Pressable>
@@ -177,9 +179,9 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
<Text style={[Styles.textMediumSemiBold]}>{item.name}</Text>
{
checked[item.id] && checked[item.id]?.length === item.Division?.length
? <AntDesign name="check" size={20} color={'black'}/>
? <AntDesign name="check" size={20} color={colors.text} />
: (checked[item.id] && checked[item.id]?.length > 0 && checked[item.id]?.length < item.Division?.length)
? <AntDesign name="minus" size={20} color={'black'}/>
? <AntDesign name="minus" size={20} color={colors.text} />
: <></>
}
</Pressable>
@@ -189,7 +191,7 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
<Pressable key={v} style={[Styles.itemSelectModal]} onPress={() => { handleCheck(item.id, child.id) }}>
<Text style={[Styles.ml10, Styles.textMediumNormal, Styles.w80]} numberOfLines={1} ellipsizeMode="tail" >{child.name}</Text>
{
checked[item.id] && checked[item.id].includes(child.id) && <AntDesign name="check" size={20} color={'black'}/>
checked[item.id] && checked[item.id].includes(child.id) && <AntDesign name="check" size={20} color={colors.text} />
}
</Pressable>
)

15
components/paperGridContent.tsx
View File

@@ -1,5 +1,6 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Pressable, View } from "react-native";
import Text from "./Text";
@@ -11,15 +12,21 @@ type Props = {
onPress?: () => void
contentPosition?: 'top' | 'center'
titleTail?: number
height?: number
};
export default function PaperGridContent({ content, children, title, headerColor, onPress, contentPosition, titleTail }: Props) {
export default function PaperGridContent({ content, children, title, headerColor, onPress, contentPosition, titleTail, height }: Props) {
const { colors } = useTheme();
return (
<Pressable onPress={onPress}>
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : ColorsStatus.primary]}>
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : { backgroundColor: colors.primary }]}>
<View style={[Styles.headerPaperGrid]}>
<Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, {textAlign: 'center' }]}>{title}</Text>
<Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, { textAlign: 'center' }]}>{title}</Text>
</View>
<View style={[contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid]}>
<View style={[
contentPosition && contentPosition == 'top' ? Styles.contentPaperGrid2 : Styles.contentPaperGrid,
{ backgroundColor: colors.card },
height ? { height: height } : {}
]}>
{children}
</View>
</View>

6
components/position/headerRightPositionList.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign } from "@expo/vector-icons"
import { useState } from "react"
import { View } from "react-native"
@@ -14,6 +15,7 @@ export default function HeaderRightPositionList() {
const [isVisible, setVisible] = useState(false)
const [isVisibleTambah, setVisibleTambah] = useState(false)
const [isFilter, setFilter] = useState(false)
const { colors } = useTheme()
return (
<>
@@ -21,7 +23,7 @@ export default function HeaderRightPositionList() {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
title="Tambah Jabatan"
onPress={() => {
setVisible(false)
@@ -33,7 +35,7 @@ export default function HeaderRightPositionList() {
{
(entityUser.role == 'supadmin' || entityUser.role == 'developer') &&
<MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />}
icon={<AntDesign name="filter" color={colors.text} size={25} />}
title="Filter"
onPress={() => {
setVisible(false)

5
components/position/modalFormCreatePosition.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
import { apiCreatePosition } from "@/lib/api"
import { setUpdatePosition } from "@/lib/positionSlice"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { update } from "@react-native-firebase/database"
import { useEffect, useState } from "react"
import { View } from "react-native"
@@ -9,13 +10,14 @@ import Toast from "react-native-toast-message"
import { useDispatch, useSelector } from "react-redux"
import { ButtonForm } from "../buttonForm"
import { InputForm } from "../inputForm"
import SelectForm from "../selectForm"
import ModalSelect from "../modalSelect"
import SelectForm from "../selectForm"
export default function ModalFormCreatePosition({ onClose }: { onClose: () => void }) {
const dispatch = useDispatch()
const { token, decryptToken } = useAuthSession()
const entityUser = useSelector((state: any) => state.user)
const { colors } = useTheme()
const [choose, setChoose] = useState({ val: '', label: '' })
const [isSelect, setSelect] = useState(false)
const [disable, setDisable] = useState(true)
@@ -104,6 +106,7 @@ export default function ModalFormCreatePosition({ onClose }: { onClose: () => vo
label="Jabatan"
onChange={(value) => { validationForm(value, 'name') }}
error={error.name}
bg={colors.card}
errorText="Nama jabatan harus diisi"
value={dataForm.name}
/>

4
components/progressBar.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { useEffect, useState } from "react";
import { Animated, View } from "react-native";
@@ -10,6 +11,7 @@ type Props = {
}
export default function ProgressBar({ margin, value, category }: Props) {
const { colors } = useTheme();
const [progress, setProgress] = useState(new Animated.Value(0));
const [totalProgress, setTotalProgress] = useState(category == 'carousel' ? 232 : category == 'page' ? 245 : 290);
const [componentWidth, setComponentWidth] = useState(0);
@@ -34,7 +36,7 @@ export default function ProgressBar({ margin, value, category }: Props) {
return (
<View style={[Styles.contentItemCenter]}>
<View style={[Styles.wrapBar, { margin: margin && margin }]} onLayout={handleLayout}>
<View style={[Styles.wrapBar, { margin: margin && margin, backgroundColor: colors.icon + '30' }]} onLayout={handleLayout}>
<Animated.View style={[Styles.contentBar, { width: progress }]} />
</View>
</View>

19
components/project/headerProjectDetail.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
import { apiAddLinkProject, apiDeleteProject } from "@/lib/api"
import { setUpdateProject } from "@/lib/projectUpdate"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign, Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router"
import { useState } from "react"
@@ -23,6 +24,7 @@ type Props = {
export default function HeaderRightProjectDetail({ id, status }: Props) {
const entityUser = useSelector((state: any) => state.user)
const { token, decryptToken } = useAuthSession()
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false)
const dispatch = useDispatch()
const update = useSelector((state: any) => state.projectUpdate)
@@ -70,7 +72,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu" height={35}>
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
title="Tambah Tugas"
onPress={() => {
if (status == 3) return
@@ -80,7 +82,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
disabled={status == 3}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="file-plus" color="black" size={25} />}
icon={<MaterialCommunityIcons name="file-plus" color={colors.text} size={25} />}
title="Tambah File"
onPress={() => {
if (status == 3) return
@@ -90,7 +92,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
disabled={status == 3}
/>
<MenuItemRow
icon={<Feather name="link" color="black" size={25} />}
icon={<Feather name="link" color={colors.text} size={25} />}
title="Tambah Link"
onPress={() => {
if (status == 3) return
@@ -104,7 +106,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
</View>
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow
icon={<MaterialCommunityIcons name="file-document" color="black" size={25} />}
icon={<MaterialCommunityIcons name="file-document" color={colors.text} size={25} />}
title="Laporan"
onPress={() => {
if (status == 3) return
@@ -117,7 +119,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
entityUser.role != "user" && entityUser.role != "coadmin" &&
<>
<MenuItemRow
icon={<MaterialIcons name="groups" color="black" size={25} />}
icon={<MaterialIcons name="groups" color={colors.text} size={25} />}
title="Tambah Anggota"
onPress={() => {
if (status == 3) return
@@ -127,7 +129,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
disabled={status == 3}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit"
onPress={() => {
if (status == 3) return
@@ -146,7 +148,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
status == 3
?
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus"
onPress={() => {
setVisible(false)
@@ -159,7 +161,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
/>
:
<MenuItemRow
icon={<MaterialIcons name="close" color="black" size={25} />}
icon={<MaterialIcons name="close" color={colors.text} size={25} />}
title="Batal"
onPress={() => {
setVisible(false)
@@ -182,6 +184,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
<InputForm
type="default"
placeholder="Masukkan link"
bg={colors.card}
value={link}
onChange={(text) => { setLink(text) }}
/>

6
components/project/headerProjectList.tsx
View File

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

6
components/project/modalAddDetailTugasProject.tsx
View File

@@ -1,5 +1,6 @@
import Styles from "@/constants/Styles";
import { stringToDateTime } from "@/lib/fun_stringToDate";
import { useTheme } from "@/providers/ThemeProvider";
import { useEffect, useState } from "react";
import { Dimensions, View, VirtualizedList } from "react-native";
import { InputDate } from "../inputDate";
@@ -13,6 +14,7 @@ interface Props {
}
export default function ModalAddDetailTugasProject({ isVisible, setVisible, dataTanggal, onSubmit }: { isVisible: boolean, setVisible: (value: boolean) => void, dataTanggal: Props[], onSubmit: (data: Props[]) => void }) {
const { colors } = useTheme();
const [data, setData] = useState<Props[]>(dataTanggal)
const tinggiScreen = Dimensions.get("window").height;
const tinggiFix = tinggiScreen * 70 / 100;
@@ -89,14 +91,14 @@ export default function ModalAddDetailTugasProject({ isVisible, setVisible, data
setVisible(false)
}}
>
<View style={[{ height: tinggiFix }]} >
<View style={[{ height: tinggiFix, }]} >
<VirtualizedList
data={data}
getItemCount={() => data.length}
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return (
<View key={index} style={[Styles.borderBottom, Styles.pv05]}>
<View key={index} style={[Styles.borderBottom, Styles.pv05, { borderBottomColor: colors.icon }]}>
<Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
<View style={[Styles.rowSpaceBetween]}>
<View style={[{ width: "48%" }]}>

4
components/project/modalListDetailTugasProject.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles";
import { apiGetProjectTask } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { useEffect, useState } from "react";
import { Dimensions, View, VirtualizedList } from "react-native";
import { InputDate } from "../inputDate";
@@ -16,6 +17,7 @@ interface Props {
}
export default function ModalListDetailTugasProject({ isVisible, setVisible, idTask }: { isVisible: boolean, setVisible: (value: boolean) => void, idTask: string }) {
const { colors } = useTheme();
const [data, setData] = useState<Props[]>([])
const [loading, setLoading] = useState(false)
const { token, decryptToken } = useAuthSession()
@@ -75,7 +77,7 @@ export default function ModalListDetailTugasProject({ isVisible, setVisible, idT
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return (
<View key={index} style={[Styles.borderBottom, Styles.pv05]}>
<View key={index} style={[Styles.borderBottom, Styles.pv05, { borderBottomColor: colors.icon }]}>
<Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
<View style={[Styles.rowSpaceBetween]}>
<View style={[{ width: "48%" }]}>

10
components/project/sectionFile.tsx
View File

@@ -3,6 +3,7 @@ import Styles from "@/constants/Styles";
import { apiDeleteFileProject, apiGetProjectOne } from "@/lib/api";
import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import * as FileSystem from 'expo-file-system';
import { startActivityAsync } from 'expo-intent-launcher';
@@ -30,6 +31,7 @@ type Props = {
}
export default function SectionFile({ status, member, refreshing }: { status: number | undefined, member: boolean, refreshing?: boolean }) {
const { colors } = useTheme();
const entityUser = useSelector((state: any) => state.user)
const [isModal, setModal] = useState(false)
const { token, decryptToken } = useAuthSession();
@@ -135,7 +137,7 @@ export default function SectionFile({ status, member, refreshing }: { status: nu
<ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
loading ?
arrSkeleton.map((item, index) => {
@@ -150,7 +152,7 @@ export default function SectionFile({ status, member, refreshing }: { status: nu
<BorderBottomItem
key={index}
borderType="all"
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
title={item.name + '.' + item.extension}
titleWeight="normal"
onPress={() => { setSelectFile(item); setModal(true) }}
@@ -167,7 +169,7 @@ export default function SectionFile({ status, member, refreshing }: { status: nu
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
icon={<MaterialCommunityIcons name="file-eye" color={colors.text} size={25} />}
title="Lihat / Share"
onPress={() => {
openFile()
@@ -177,7 +179,7 @@ export default function SectionFile({ status, member, refreshing }: { status: nu
!member && (entityUser.role == "user" || entityUser.role == "coadmin") ? <></>
:
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus"
disabled={status == 3}
onPress={() => {

10
components/project/sectionLink.tsx
View File

@@ -3,6 +3,7 @@ import { apiDeleteLinkProject, apiGetProjectOne } from "@/lib/api";
import { urlCompleted } from "@/lib/fun_urlCompleted";
import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather, Ionicons } from "@expo/vector-icons";
import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
@@ -22,6 +23,7 @@ type Props = {
}
export default function SectionLink({ status, member, refreshing }: { status: number | undefined, member: boolean, refreshing?: boolean }) {
const { colors } = useTheme();
const entityUser = useSelector((state: any) => state.user)
const [isModal, setModal] = useState(false)
const { token, decryptToken } = useAuthSession();
@@ -82,14 +84,14 @@ export default function SectionLink({ status, member, refreshing }: { status: nu
<>
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Link</Text>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
data.map((item, index) => {
return (
<BorderBottomItem
key={index}
borderType="all"
icon={<Feather name="link" size={25} color="black" />}
icon={<Feather name="link" size={25} color={colors.text} />}
title={item.link}
titleWeight="normal"
onPress={() => { setSelectLink(item); setModal(true) }}
@@ -104,7 +106,7 @@ export default function SectionLink({ status, member, refreshing }: { status: nu
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<Feather name="external-link" color="black" size={25} />}
icon={<Feather name="external-link" color={colors.text} size={25} />}
title="Buka Link"
onPress={() => {
Linking.openURL(urlCompleted(String(selectLink?.link)))
@@ -114,7 +116,7 @@ export default function SectionLink({ status, member, refreshing }: { status: nu
!member && (entityUser.role == "user" || entityUser.role == "coadmin") ? <></>
:
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus"
disabled={status == 3}
onPress={() => {

6
components/project/sectionListAddTask.tsx
View File

@@ -1,5 +1,6 @@
import Styles from "@/constants/Styles";
import { deleteTaskCreate } from "@/lib/taskCreate";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons } from "@expo/vector-icons";
import { Key, useState } from "react";
import { View } from "react-native";
@@ -10,6 +11,7 @@ import MenuItemRow from "../menuItemRow";
import Text from "../Text";
export default function SectionListAddTask() {
const { colors } = useTheme();
const taskCreate = useSelector((state: any) => state.taskCreate)
const [select, setSelect] = useState<any>(null)
const [isModal, setModal] = useState(false)
@@ -30,7 +32,7 @@ export default function SectionListAddTask() {
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
Tanggal & Tugas
</Text>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
taskCreate.map((item: { status: number; title: string; dateStart: string; dateEnd: string; }, index: Key | null | undefined) => {
return (
@@ -58,7 +60,7 @@ export default function SectionListAddTask() {
>
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus Tugas"
onPress={() => { handleDelete() }}
/>

8
components/project/sectionMember.tsx
View File

@@ -3,6 +3,7 @@ import Styles from "@/constants/Styles";
import { apiDeleteProjectMember, apiGetProjectOne } from "@/lib/api";
import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
@@ -27,6 +28,7 @@ type Props = {
};
export default function SectionMember({ status, refreshing }: { status: number | undefined, refreshing?: boolean }) {
const { colors } = useTheme();
const dispatch = useDispatch()
const entityUser = useSelector((state: any) => state.user)
const update = useSelector((state: any) => state.projectUpdate)
@@ -97,7 +99,7 @@ export default function SectionMember({ status, refreshing }: { status: number |
<Text style={[Styles.textDefault]}>Total {data.length} Anggota</Text>
</View>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
loading ?
arrSkeleton.map((item, index) => {
@@ -143,7 +145,7 @@ export default function SectionMember({ status, refreshing }: { status: number |
icon={
<MaterialCommunityIcons
name="account-eye"
color="black"
color={colors.text}
size={25}
/>
}
@@ -159,7 +161,7 @@ export default function SectionMember({ status, refreshing }: { status: number |
icon={
<MaterialCommunityIcons
name="account-remove"
color="black"
color={colors.text}
size={25}
/>
}

4
components/project/sectionReportProject.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles";
import { apiGetProjectOne } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { View } from "react-native";
@@ -9,6 +10,7 @@ import Text from "../Text";
import TextExpandable from "../textExpandable";
export default function SectionReportProject({ refreshing }: { refreshing?: boolean }) {
const { colors } = useTheme();
const update = useSelector((state: any) => state.projectUpdate)
const { token, decryptToken } = useAuthSession();
const { id } = useLocalSearchParams<{ id: string }>();
@@ -45,7 +47,7 @@ export default function SectionReportProject({ refreshing }: { refreshing?: bool
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
Laporan Kegiatan
</Text>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
<TextExpandable content={data} maxLines={2} />
</View>
</View>

12
components/project/sectionTanggalTugas.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles";
import { apiDeleteProjectTask, apiGetProjectOne, apiUpdateStatusProjectTask } from "@/lib/api";
import { setUpdateProject } from "@/lib/projectUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
@@ -28,6 +29,7 @@ type Props = {
};
export default function SectionTanggalTugasProject({ status, member, refreshing }: { status: number | undefined, member: boolean, refreshing?: boolean }) {
const { colors } = useTheme();
const entityUser = useSelector((state: any) => state.user)
const dispatch = useDispatch()
const update = useSelector((state: any) => state.projectUpdate)
@@ -116,7 +118,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
Tanggal & Tugas
</Text>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
loading ?
arrSkeleton.map((item, index) => {
@@ -163,7 +165,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
icon={
<MaterialCommunityIcons
name="list-status"
color="black"
color={colors.text}
size={25}
/>
}
@@ -179,7 +181,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
icon={
<MaterialCommunityIcons
name="pencil-outline"
color="black"
color={colors.text}
size={25}
/>
}
@@ -194,7 +196,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
icon={
<MaterialCommunityIcons
name="clock-time-three-outline"
color="black"
color={colors.text}
size={25}
/>
}
@@ -209,7 +211,7 @@ export default function SectionTanggalTugasProject({ status, member, refreshing
</View>
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus Tugas"
onPress={() => {
setModal(false)

7
components/sectionCancel.tsx
View File

@@ -1,5 +1,6 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons";
import Text from "./Text";
import { View } from "react-native";
@@ -10,10 +11,12 @@ type Props = {
}
export default function SectionCancel({ text, title }: Props) {
const { colors } = useTheme();
return (
<View style={[ColorsStatus.lightRed, Styles.p10, Styles.round10, Styles.mb15]}>
<View style={[Styles.p10, Styles.round10, Styles.mb15, { backgroundColor: colors.card }]}>
<View style={[Styles.rowItemsCenter]}>
<AntDesign name="warning" size={22} style={[Styles.mr10]} color={'black'}/>
<AntDesign name="warning" size={22} style={[Styles.mr10]} color={colors.text} />
<Text style={[Styles.textDefaultSemiBold]}>{title ? title : 'Kegiatan Dibatalkan'}</Text>
</View>
{

7
components/sectionProgress.tsx
View File

@@ -1,5 +1,6 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign } from "@expo/vector-icons";
import Text from "./Text";
import { View } from "react-native";
@@ -11,9 +12,11 @@ type Props = {
}
export default function SectionProgress({ text, progress }: Props) {
const { colors } = useTheme();
return (
<View style={[ColorsStatus.lightGreen, Styles.p15, { flexDirection: 'row', borderRadius: 10, alignItems: 'center' }]}>
<View style={[Styles.iconContent, ColorsStatus.orange, { alignItems: 'center', justifyContent: 'center' }]}>
<View style={[Styles.p15, { flexDirection: 'row', borderRadius: 10, alignItems: 'center', backgroundColor: colors.card }]}>
<View style={[Styles.iconContent, { alignItems: 'center', justifyContent: 'center', backgroundColor: colors.primary }]}>
<AntDesign name="areachart" size={30} color={'#384288'} />
</View>
<View style={[Styles.ml10, { flex: 1 }]}>

30
components/selectForm.tsx
View File

@@ -1,4 +1,5 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather } from "@expo/vector-icons";
import { Pressable, View } from "react-native";
import Text from "./Text";
@@ -15,10 +16,11 @@ type Props = {
errorText?: string;
required?: boolean;
round?: boolean
bg?: 'white' | 'transparent'
bg?: string
};
export default function SelectForm({ label, value, placeholder, onPress, info, error, errorText, required, itemLeft, round, bg }: Props) {
export default function SelectForm({ label, value, placeholder, onPress, info, error, errorText, required, round, bg }: Props) {
const { colors } = useTheme();
return (
<View style={[Styles.mb10]}>
{
@@ -30,19 +32,27 @@ export default function SelectForm({ label, value, placeholder, onPress, info, e
)
}
<Pressable onPress={onPress}>
<View style={[Styles.inputRoundForm, Styles.inputRoundFormRight, error && { borderColor: "red" }, round && Styles.round30, Styles.pv10, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }]}>
<Feather name="chevron-right" size={20} color="grey" />
<View style={[
Styles.inputRoundForm,
Styles.inputRoundFormRight,
error && { borderColor: "red" },
round && Styles.round30,
Styles.pv10,
{ backgroundColor: bg ? bg : 'transparent', borderColor: colors.icon }
]}>
<Feather name="chevron-right" size={20} color={colors.icon} />
{
value ? (
<Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.cBlack, Styles.w90]}>{value}</Text>
<Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.w90]}>{value}</Text>
) : (
<Text numberOfLines={1} ellipsizeMode='tail' style={[Styles.cGray, Styles.w90]}>{placeholder}</Text>
<Text numberOfLines={1} ellipsizeMode='tail' style={[{ color: colors.icon }, Styles.w90]}>{placeholder}</Text>
)
}
</View>
</Pressable>
{error && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cError]}>{errorText}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
</View>
</Pressable >
{error && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cError]}>{errorText}</Text>)
}
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, { color: colors.icon }]}>{info}</Text>)}
</View >
)
}

19
components/task/headerTaskDetail.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles"
import { apiAddLinkTask, apiDeleteTask } from "@/lib/api"
import { setUpdateTask } from "@/lib/taskUpdate"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign, Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router"
import { useState } from "react"
@@ -23,6 +24,7 @@ type Props = {
}
export default function HeaderRightTaskDetail({ id, division, status, isAdminDivision }: Props) {
const { colors } = useTheme()
const { token, decryptToken } = useAuthSession()
const [isVisible, setVisible] = useState(false)
const entityUser = useSelector((state: any) => state.user);
@@ -72,7 +74,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu" height={35}>
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
title="Tambah Tugas"
onPress={() => {
if (status == 3) return
@@ -82,7 +84,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
disabled={status == 3}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="file-plus" color="black" size={25} />}
icon={<MaterialCommunityIcons name="file-plus" color={colors.text} size={25} />}
title="Tambah File"
onPress={() => {
if (status == 3) return
@@ -93,7 +95,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
/>
<MenuItemRow
icon={<Feather name="link" color="black" size={25} />}
icon={<Feather name="link" color={colors.text} size={25} />}
title="Tambah Link"
onPress={() => {
if (status == 3) return
@@ -107,7 +109,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
</View>
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow
icon={<MaterialCommunityIcons name="file-document" color="black" size={25} />}
icon={<MaterialCommunityIcons name="file-document" color={colors.text} size={25} />}
title="Laporan"
onPress={() => {
if (status == 3) return
@@ -122,7 +124,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
&&
<>
<MenuItemRow
icon={<MaterialIcons name="groups" color="black" size={25} />}
icon={<MaterialIcons name="groups" color={colors.text} size={25} />}
title="Tambah Anggota"
onPress={() => {
if (status == 3) return
@@ -132,7 +134,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
disabled={status == 3}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit"
onPress={() => {
if (status == 3) return
@@ -152,7 +154,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
status == 3
?
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus"
onPress={() => {
setVisible(false)
@@ -166,7 +168,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
:
<MenuItemRow
icon={<MaterialIcons name="close" color="black" size={25} />}
icon={<MaterialIcons name="close" color={colors.text} size={25} />}
title="Batal"
onPress={() => {
setVisible(false)
@@ -191,6 +193,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
placeholder="Masukkan link"
value={link}
onChange={(text) => { setLink(text) }}
bg={colors.card}
/>
</View>
</ModalFloat>

6
components/task/headerTaskList.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles"
import { apiGetDivisionOneFeature } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider"
import { useTheme } from "@/providers/ThemeProvider"
import { AntDesign } from "@expo/vector-icons"
import { router, useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react"
@@ -12,6 +13,7 @@ import MenuItemRow from "../menuItemRow"
import ModalFilter from "../modalFilter"
export default function HeaderRightTaskList() {
const { colors } = useTheme()
const [isVisible, setVisible] = useState(false)
const [isAdminDivision, setIsAdminDivision] = useState(false);
const { token, decryptToken } = useAuthSession()
@@ -52,7 +54,7 @@ export default function HeaderRightTaskList() {
(entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision
&&
<MenuItemRow
icon={<AntDesign name="pluscircle" color="black" size={25} />}
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
title="Tambah Tugas Divisi"
onPress={() => {
setVisible(false)
@@ -61,7 +63,7 @@ export default function HeaderRightTaskList() {
/>
}
<MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />}
icon={<AntDesign name="filter" color={colors.text} size={25} />}
title="Filter"
onPress={() => {
setVisible(false)

4
components/task/modalAddDetailTugasTask.tsx
View File

@@ -1,5 +1,6 @@
import Styles from "@/constants/Styles";
import { stringToDateTime } from "@/lib/fun_stringToDate";
import { useTheme } from "@/providers/ThemeProvider";
import { useEffect, useState } from "react";
import { Dimensions, View, VirtualizedList } from "react-native";
import { InputDate } from "../inputDate";
@@ -13,6 +14,7 @@ interface Props {
}
export default function ModalAddDetailTugasTask({ isVisible, setVisible, dataTanggal, onSubmit }: { isVisible: boolean, setVisible: (value: boolean) => void, dataTanggal: Props[], onSubmit: (data: Props[]) => void }) {
const { colors } = useTheme()
const [data, setData] = useState<Props[]>(dataTanggal)
const tinggiScreen = Dimensions.get("window").height;
const tinggiFix = tinggiScreen * 70 / 100;
@@ -96,7 +98,7 @@ export default function ModalAddDetailTugasTask({ isVisible, setVisible, dataTan
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return (
<View key={index} style={[Styles.borderBottom, Styles.pv05]}>
<View key={index} style={[Styles.borderBottom, Styles.pv05, { borderBottomColor: colors.background }]}>
<Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
<View style={[Styles.rowSpaceBetween]}>
<View style={[{ width: "48%" }]}>

4
components/task/modalListDetailTugasTask.tsx
View File

@@ -1,5 +1,6 @@
import Styles from "@/constants/Styles";
import { apiGetProjectTask, apiGetTaskTugas } from "@/lib/api";
import { useTheme } from "@/providers/ThemeProvider";
import { useAuthSession } from "@/providers/AuthProvider";
import { useEffect, useState } from "react";
import { Dimensions, View, VirtualizedList } from "react-native";
@@ -16,6 +17,7 @@ interface Props {
}
export default function ModalListDetailTugasTask({ isVisible, setVisible, idTask }: { isVisible: boolean, setVisible: (value: boolean) => void, idTask: string }) {
const { colors } = useTheme()
const [data, setData] = useState<Props[]>([])
const [loading, setLoading] = useState(false)
const { token, decryptToken } = useAuthSession()
@@ -75,7 +77,7 @@ export default function ModalListDetailTugasTask({ isVisible, setVisible, idTask
getItem={getItem}
renderItem={({ item, index }: { item: Props, index: number }) => {
return (
<View key={index} style={[Styles.borderBottom, Styles.pv05]}>
<View key={index} style={[Styles.borderBottom, Styles.pv05, { borderBottomColor: colors.background }]}>
<Text style={[Styles.textDefaultSemiBold]}>{item.date}</Text>
<View style={[Styles.rowSpaceBetween]}>
<View style={[{ width: "48%" }]}>

10
components/task/sectionFileTask.tsx
View File

@@ -3,6 +3,7 @@ import Styles from "@/constants/Styles";
import { apiDeleteFileTask, apiGetTaskOne } from "@/lib/api";
import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import * as FileSystem from 'expo-file-system';
import { startActivityAsync } from 'expo-intent-launcher';
@@ -29,6 +30,7 @@ type Props = {
}
export default function SectionFileTask({ refreshing, isMemberDivision }: { refreshing: boolean, isMemberDivision: boolean }) {
const { colors } = useTheme()
const [isModal, setModal] = useState(false)
const { token, decryptToken } = useAuthSession()
const { detail } = useLocalSearchParams<{ detail: string }>()
@@ -126,7 +128,7 @@ export default function SectionFileTask({ refreshing, isMemberDivision }: { refr
<ModalLoading isVisible={loadingOpen} setVisible={setLoadingOpen} />
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
loading ?
arrSkeleton.map((item, index) => {
@@ -141,7 +143,7 @@ export default function SectionFileTask({ refreshing, isMemberDivision }: { refr
<BorderBottomItem
key={index}
borderType="all"
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
icon={<MaterialCommunityIcons name="file-outline" size={25} color={colors.text} />}
title={item.name + '.' + item.extension}
titleWeight="normal"
onPress={() => { setSelectFile(item); setModal(true) }}
@@ -158,7 +160,7 @@ export default function SectionFileTask({ refreshing, isMemberDivision }: { refr
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialCommunityIcons name="file-eye" color="black" size={25} />}
icon={<MaterialCommunityIcons name="file-eye" color={colors.text} size={25} />}
title="Lihat / Share"
onPress={() => {
openFile()
@@ -168,7 +170,7 @@ export default function SectionFileTask({ refreshing, isMemberDivision }: { refr
(entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision
?
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus"
onPress={() => {
setModal(false)

10
components/task/sectionLinkTask.tsx
View File

@@ -3,6 +3,7 @@ import { apiDeleteLinkTask, apiGetTaskOne } from "@/lib/api";
import { urlCompleted } from "@/lib/fun_urlCompleted";
import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather, Ionicons } from "@expo/vector-icons";
import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
@@ -21,6 +22,7 @@ type Props = {
}
export default function SectionLinkTask({ refreshing, isMemberDivision }: { refreshing: boolean, isMemberDivision: boolean }) {
const { colors } = useTheme()
const [isModal, setModal] = useState(false)
const { token, decryptToken } = useAuthSession()
const { detail } = useLocalSearchParams<{ detail: string }>()
@@ -74,14 +76,14 @@ export default function SectionLinkTask({ refreshing, isMemberDivision }: { refr
<>
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Link</Text>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
data.map((item, index) => {
return (
<BorderBottomItem
key={index}
borderType="all"
icon={<Feather name="link" size={25} color="black" />}
icon={<Feather name="link" size={25} color={colors.text} />}
title={item.link}
titleWeight="normal"
onPress={() => { setSelectLink(item); setModal(true) }}
@@ -96,7 +98,7 @@ export default function SectionLinkTask({ refreshing, isMemberDivision }: { refr
<DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<Feather name="external-link" color="black" size={25} />}
icon={<Feather name="external-link" color={colors.text} size={25} />}
title="Buka Link"
onPress={() => {
Linking.openURL(urlCompleted(String(selectLink?.link)))
@@ -106,7 +108,7 @@ export default function SectionLinkTask({ refreshing, isMemberDivision }: { refr
(entityUser.role != "user" && entityUser.role != "coadmin") || isMemberDivision
?
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus"
onPress={() => {
setModal(false)

8
components/task/sectionMemberTask.tsx
View File

@@ -3,6 +3,7 @@ import Styles from "@/constants/Styles";
import { apiDeleteTaskMember, apiGetTaskOne } from "@/lib/api";
import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
@@ -27,6 +28,7 @@ type Props = {
};
export default function SectionMemberTask({ refreshing, isAdminDivision }: { refreshing: boolean, isAdminDivision: boolean }) {
const { colors } = useTheme()
const [isModal, setModal] = useState(false);
const entityUser = useSelector((state: any) => state.user);
const { token, decryptToken } = useAuthSession();
@@ -100,7 +102,7 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
<Text style={[Styles.textDefault]}>Total {data.length} Anggota</Text>
</View>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
loading ?
arrSkeleton.map((item, index) => {
@@ -155,7 +157,7 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
icon={
<MaterialCommunityIcons
name="account-eye"
color="black"
color={colors.text}
size={25}
/>
}
@@ -174,7 +176,7 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
icon={
<MaterialCommunityIcons
name="account-remove"
color="black"
color={colors.text}
size={25}
/>
}

4
components/task/sectionReportTask.tsx
View File

@@ -1,6 +1,7 @@
import Styles from "@/constants/Styles";
import { apiGetTaskOne } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { View } from "react-native";
@@ -10,6 +11,7 @@ import TextExpandable from "../textExpandable";
export default function SectionReportTask({ refreshing }: { refreshing: boolean }) {
const { colors } = useTheme()
const update = useSelector((state: any) => state.taskUpdate)
const { token, decryptToken } = useAuthSession()
const { id, detail } = useLocalSearchParams<{ id: string, detail: string }>();
@@ -43,7 +45,7 @@ export default function SectionReportTask({ refreshing }: { refreshing: boolean
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>
Laporan Kegiatan
</Text>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
<TextExpandable content={data} maxLines={2} />
</View>
</View>

12
components/task/sectionTanggalTugasTask.tsx
View File

@@ -2,6 +2,7 @@ import Styles from "@/constants/Styles";
import { apiDeleteTaskTugas, apiGetTaskOne, apiUpdateStatusTaskDivision } from "@/lib/api";
import { setUpdateTask } from "@/lib/taskUpdate";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
@@ -27,6 +28,7 @@ type Props = {
}
export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }: { refreshing: boolean, isMemberDivision: boolean }) {
const { colors } = useTheme()
const dispatch = useDispatch()
const entityUser = useSelector((state: any) => state.user);
const update = useSelector((state: any) => state.taskUpdate)
@@ -119,7 +121,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
<>
<View style={[Styles.mb15, Styles.mt10]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
loading ?
arrSkeleton.map((item, index) => {
@@ -160,7 +162,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
icon={
<MaterialCommunityIcons
name="clock-time-three-outline"
color="black"
color={colors.text}
size={25}
/>
}
@@ -177,7 +179,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
?
<>
<MenuItemRow
icon={<MaterialCommunityIcons name="list-status" color="black" size={25} />}
icon={<MaterialCommunityIcons name="list-status" color={colors.text} size={25} />}
title="Update Status"
onPress={() => {
setModal(false)
@@ -187,7 +189,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit Tugas"
onPress={() => {
setModal(false)
@@ -205,7 +207,7 @@ export default function SectionTanggalTugasTask({ refreshing, isMemberDivision }
?
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow
icon={<Ionicons name="trash" color="black" size={25} />}
icon={<Ionicons name="trash" color={colors.text} size={25} />}
title="Hapus Tugas"
onPress={() => {
setModal(false)