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

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

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

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

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

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

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

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

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

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

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

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

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

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

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