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

upd: redesign aplikasi #21

Merged
amaliadwiy merged 1 commits from amalia/10-feb-26 into join 2026-02-10 17:34:55 +08:00
Conversation 0 Commits 1 Files Changed 29 +368 -132
29 changed files with 368 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
import SkeletonContent from "@/components/skeletonContent";
import Text from "@/components/Text";
import WrapTab from "@/components/wrapTab";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetDiscussionGeneral } from "@/lib/api";
@@ -102,22 +103,22 @@ export default function Discussion() {
<View>
{
entityUser.role != "user" && entityUser.role != "coadmin" &&
<View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<WrapTab>
<ButtonTab
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => { setStatus("true") }}
label="Aktif"
icon={<Feather name="check-circle" color={status == "false" ? colors.text : 'white'} size={20} />}
icon={<Feather name="check-circle" color={status == "false" ? colors.dimmed : 'white'} size={20} />}
n={2} />
<ButtonTab
active={status == "false" ? "false" : "true"}
value="false"
onPress={() => { setStatus("false") }}
label="Arsip"
icon={<AntDesign name="closecircleo" color={status == "true" ? colors.text : 'white'} size={20} />}
icon={<AntDesign name="closecircleo" color={status == "true" ? colors.dimmed : 'white'} size={20} />}
n={2} />
</View>
</WrapTab>
}
<InputSearch onChange={setSearch} />

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

@@ -5,6 +5,7 @@ import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
import SkeletonContent from "@/components/skeletonContent";
import Text from "@/components/Text";
import WrapTab from "@/components/wrapTab";
import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles";
import { apiGetDiscussion, apiGetDivisionOneFeature } from "@/lib/api";
@@ -134,22 +135,22 @@ export default function DiscussionDivision() {
{
((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision) &&
<View>
<View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<WrapTab>
<ButtonTab
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => { setStatus("true") }}
label="Aktif"
icon={<Feather name="check-circle" color={status == "false" ? colors.text : 'white'} size={20} />}
icon={<Feather name="check-circle" color={status == "false" ? colors.dimmed : 'white'} size={20} />}
n={2} />
<ButtonTab
active={status == "false" ? "false" : "true"}
value="false"
onPress={() => { setStatus("false") }}
label="Arsip"
icon={<AntDesign name="closecircleo" color={status == "true" ? colors.text : 'white'} size={20} />}
icon={<AntDesign name="closecircleo" color={status == "true" ? colors.dimmed : 'white'} size={20} />}
n={2} />
</View>
</WrapTab>
<InputSearch onChange={setSearch} />
</View>
}

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

@@ -123,7 +123,7 @@ export default function ListTask() {
icon={
<MaterialCommunityIcons
name="clock-alert-outline"
color={statusFix == "0" ? "white" : colors.text}
color={statusFix == "0" ? "white" : colors.dimmed}
size={20}
/>
}
@@ -137,7 +137,7 @@ export default function ListTask() {
icon={
<MaterialCommunityIcons
name="progress-check"
color={statusFix == "1" ? "white" : colors.text}
color={statusFix == "1" ? "white" : colors.dimmed}
size={20}
/>
}
@@ -151,7 +151,7 @@ export default function ListTask() {
icon={
<Ionicons
name="checkmark-done-circle-outline"
color={statusFix == "2" ? "white" : colors.text}
color={statusFix == "2" ? "white" : colors.dimmed}
size={20}
/>
}
@@ -165,7 +165,7 @@ export default function ListTask() {
icon={
<AntDesign
name="closecircleo"
color={statusFix == "3" ? "white" : colors.text}
color={statusFix == "3" ? "white" : colors.dimmed}
size={20}
/>
}

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

@@ -6,6 +6,7 @@ import PaperGridContent from "@/components/paperGridContent";
import Skeleton from "@/components/skeleton";
import SkeletonTwoItem from "@/components/skeletonTwoItem";
import Text from "@/components/Text";
import WrapTab from "@/components/wrapTab";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetDivision } from "@/lib/api";
@@ -121,7 +122,7 @@ export default function ListDivision() {
<View>
{
entityUser.role != "user" && entityUser.role != "coadmin" ?
<View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<WrapTab>
<ButtonTab
active={status == "false" ? "false" : "true"}
value="true"
@@ -130,7 +131,7 @@ export default function ListDivision() {
icon={
<Feather
name="check-circle"
color={status == "false" ? colors.text : "white"}
color={status == "false" ? colors.dimmed : "white"}
size={20}
/>
}
@@ -144,15 +145,15 @@ export default function ListDivision() {
icon={
<AntDesign
name="closecircleo"
color={status == "true" ? colors.text : "white"}
color={status == "true" ? colors.dimmed : "white"}
size={20}
/>
}
n={2}
/>
</View>
</WrapTab>
:
<View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<WrapTab>
<ButtonTab
active={category == "semua" ? "false" : "true"}
value="true"
@@ -161,7 +162,7 @@ export default function ListDivision() {
icon={
<Ionicons
name="file-tray-outline"
color={category == "semua" ? colors.text : "white"}
color={category == "semua" ? colors.dimmed : "white"}
size={20}
/>
}
@@ -175,13 +176,13 @@ export default function ListDivision() {
icon={
<Ionicons
name="file-tray-stacked-outline"
color={category == "semua" ? "white" : colors.text}
color={category == "semua" ? "white" : colors.dimmed}
size={20}
/>
}
n={2}
/>
</View>
</WrapTab>
}
<View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>

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

@@ -2,7 +2,7 @@ import AppHeader from "@/components/AppHeader";
import { ButtonFiturMenu } from "@/components/buttonFiturMenu";
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, Entypo, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import { AntDesign, Entypo, Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import { router, Stack } from "expo-router";
import { SafeAreaView, View } from "react-native";
import { useSelector } from "react-redux";
@@ -24,23 +24,23 @@ export default function Feature() {
/>
<View style={[Styles.p15]}>
<View style={[Styles.rowSpaceBetween, Styles.mb15]}>
<ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color={colors.text} />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
<ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color={colors.text} />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
<ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color={colors.text} />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
<ButtonFiturMenu icon={<Ionicons name="chatbubbles-sharp" size={35} color={colors.text} />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
<ButtonFiturMenu icon={<Feather name="users" size={30} color={colors.icon} />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
<ButtonFiturMenu icon={<Feather name="bar-chart" size={30} color={colors.icon} />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
<ButtonFiturMenu icon={<Ionicons name="megaphone-outline" size={30} color={colors.icon} />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
<ButtonFiturMenu icon={<Ionicons name="chatbubbles-outline" size={30} color={colors.icon} />} text="Diskusi" onPress={() => { router.push('/discussion?active=true') }} />
</View>
<View style={[Styles.rowSpaceBetween, Styles.mb15, (entityUser.role == 'cosupadmin' ? Styles.w70 : entityUser.role == 'supadmin' || entityUser.role == 'developer' ? Styles.w100 : Styles.w40)]}>
<ButtonFiturMenu icon={<MaterialIcons name="groups" size={35} color={colors.text} />} text="Anggota" onPress={() => { router.push('/member') }} />
<ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie" size={35} color={colors.text} />} text="Jabatan" onPress={() => { router.push('/position') }} />
<ButtonFiturMenu icon={<MaterialCommunityIcons name="account-group-outline" size={30} color={colors.icon} />} text="Anggota" onPress={() => { router.push('/member') }} />
<ButtonFiturMenu icon={<MaterialCommunityIcons name="account-tie-outline" size={30} color={colors.icon} />} text="Jabatan" onPress={() => { router.push('/position') }} />
{
entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color={colors.text} />} text="Banner" onPress={() => { router.push('/banner') }} />
entityUser.role == "cosupadmin" && <ButtonFiturMenu icon={<Ionicons name="images-outline" size={30} color={colors.icon} />} text="Banner" onPress={() => { router.push('/banner') }} />
}
{
(entityUser.role == "supadmin" || entityUser.role == "developer") &&
<>
<ButtonFiturMenu icon={<AntDesign name="tags" size={35} color={colors.text} />} text="Lembaga Desa" onPress={() => { router.push('/group') }} />
{/* <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={35} color={colors.text} />} text="Tema" onPress={() => { }} /> */}
<ButtonFiturMenu icon={<Entypo name="image-inverted" size={35} color={colors.text} />} text="Banner" onPress={() => { router.push('/banner') }} />
<ButtonFiturMenu icon={<Feather name="layers" size={30} color={colors.icon} />} text="Lembaga Desa" onPress={() => { router.push('/group') }} />
{/* <ButtonFiturMenu icon={<Ionicons name="color-palette-sharp" size={30} color={colors.icon} />} text="Tema" onPress={() => { }} /> */}
<ButtonFiturMenu icon={<Ionicons name="images-outline" size={30} color={colors.icon} />} text="Banner" onPress={() => { router.push('/banner') }} />
</>
}
</View>

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

@@ -8,6 +8,7 @@ import InputSearch from "@/components/inputSearch";
import MenuItemRow from "@/components/menuItemRow";
import SkeletonTwoItem from "@/components/skeletonTwoItem";
import Text from "@/components/Text";
import WrapTab from "@/components/wrapTab";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiDeleteGroup, apiEditGroup, apiGetGroup } from "@/lib/api";
@@ -131,22 +132,22 @@ export default function Index() {
return (
<View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<View style={[Styles.mb10]}>
<View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<WrapTab>
<ButtonTab
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => { setStatus("true") }}
label="Aktif"
icon={<Feather name="check-circle" color={status == "true" ? 'white' : 'black'} size={20} />}
icon={<Feather name="check-circle" color={status == "true" ? 'white' : colors.dimmed} size={20} />}
n={2} />
<ButtonTab
active={status == "false" ? "false" : "true"}
value="false"
onPress={() => { setStatus("false") }}
label="Tidak Aktif"
icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.dimmed} size={20} />}
n={2} />
</View>
</WrapTab>
<InputSearch onChange={setSearch} />
</View>
<View style={[{ flex: 2 }, Styles.mt05]}>

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

@@ -1,10 +1,9 @@
import CaraouselHome from "@/components/home/carouselHome";
import CaraouselHome2 from "@/components/home/carouselHome2";
import ChartDokumenHome from "@/components/home/chartDokumenHome";
import ChartProgresHome from "@/components/home/chartProgresHome";
import DisccussionHome from "@/components/home/discussionHome";
import DivisionHome from "@/components/home/divisionHome";
import EventHome from "@/components/home/eventHome";
import FiturHome from "@/components/home/fiturHome";
import { HeaderRightHome } from "@/components/home/headerRightHome";
import ProjectHome from "@/components/home/projectHome";
import Text from "@/components/Text";
@@ -13,9 +12,10 @@ import { apiGetProfile } from "@/lib/api";
import { setEntities } from "@/lib/entitiesSlice";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { LinearGradient } from "expo-linear-gradient";
import { Stack } from "expo-router";
import { useEffect, useState } from "react";
import { Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
import { Dimensions, Platform, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useDispatch, useSelector } from "react-redux";
@@ -55,7 +55,7 @@ export default function Home() {
title: 'Home',
headerTitle: entities.village,
header: () => (
<View style={[Styles.rowItemsCenter, Styles.ph20, Platform.OS === 'ios' ? Styles.pb07 : Styles.pb13, { backgroundColor: colors.primary, paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
<View style={[Styles.rowItemsCenter, Styles.ph20, Platform.OS === 'ios' ? Styles.pb07 : Styles.pb13, { backgroundColor: colors.header, paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
<Text style={Styles.textHeaderHome}>{entities.village}</Text>
<HeaderRightHome />
</View>
@@ -73,9 +73,22 @@ export default function Home() {
showsVerticalScrollIndicator={false}
style={{ backgroundColor: colors.background }}
>
<CaraouselHome refreshing={refreshing} />
<View style={[Styles.ph15, Styles.mb100]}>
<FiturHome />
<LinearGradient
colors={[colors.header, colors.header, colors.header, colors.header, colors.homeGradient]}
style={{
position: 'absolute',
width: Dimensions.get('window').width * 1.5,
height: Dimensions.get('window').width * 1.5,
borderRadius: Dimensions.get('window').width * 0.5,
top: -Dimensions.get('window').width * 1, // Positioned to show the bottom part of the circle as an arc
left: -Dimensions.get('window').width * 0.25,
zIndex: -1,
}}
/>
{/* <CaraouselHome refreshing={refreshing} /> */}
<View style={[Styles.ph15]}>
<CaraouselHome2 refreshing={refreshing} />
{/* <FiturHome /> */}
<ProjectHome refreshing={refreshing} />
<DivisionHome refreshing={refreshing} />
<ChartProgresHome refreshing={refreshing} />

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

@@ -11,6 +11,7 @@ import { valueRoleUser } from "@/constants/RoleUser";
import Styles from "@/constants/Styles";
import { apiGetProfile } from "@/lib/api";
import { useTheme } from "@/providers/ThemeProvider";
import { LinearGradient } from "expo-linear-gradient";
import { router, Stack, useLocalSearchParams } from "expo-router";
import React, { useEffect, useState } from "react";
import { Pressable, RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
@@ -102,7 +103,10 @@ export default function MemberDetail() {
/>
}
>
<View style={[Styles.wrapHeadViewMember]}>
<LinearGradient
colors={[colors.header, colors.homeGradient]}
style={[Styles.wrapHeadViewMember]}
>
{
loading ?
<>
@@ -120,7 +124,7 @@ export default function MemberDetail() {
</>
}
</View>
</LinearGradient>
<View style={[Styles.p15]}>
<View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Informasi</Text>

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

@@ -5,6 +5,7 @@ import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
import SkeletonTwoItem from "@/components/skeletonTwoItem";
import Text from "@/components/Text";
import WrapTab from "@/components/wrapTab";
import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles";
import { apiGetUser } from "@/lib/api";
@@ -108,22 +109,22 @@ export default function Index() {
return (
<View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<View>
<View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<WrapTab>
<ButtonTab
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => { setStatus("true") }}
label="Aktif"
icon={<Feather name="check-circle" color={status == "false" ? colors.text : 'white'} size={20} />}
icon={<Feather name="check-circle" color={status == "false" ? colors.dimmed : 'white'} size={20} />}
n={2} />
<ButtonTab
active={status == "false" ? "false" : "true"}
value="false"
onPress={() => { setStatus("false") }}
label="Tidak Aktif"
icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.text} size={20} />}
icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.dimmed} size={20} />}
n={2} />
</View>
</WrapTab>
<InputSearch onChange={setSearch} />
{
(entityUser.role == "supadmin" || entityUser.role == "developer") &&

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

@@ -9,6 +9,7 @@ import LabelStatus from "@/components/labelStatus";
import MenuItemRow from "@/components/menuItemRow";
import SkeletonTwoItem from "@/components/skeletonTwoItem";
import Text from "@/components/Text";
import WrapTab from "@/components/wrapTab";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiDeletePosition, apiEditPosition, apiGetPosition } from "@/lib/api";
@@ -150,22 +151,22 @@ export default function Index() {
return (
<View style={[Styles.p15, { flex: 1, backgroundColor: colors.background }]}>
<View>
<View style={[Styles.wrapBtnTab, { backgroundColor: colors.card }]}>
<WrapTab>
<ButtonTab
active={status == "false" ? "false" : "true"}
value="true"
onPress={() => { setStatus("true") }}
label="Aktif"
icon={<Feather name="check-circle" color={status == "true" ? 'white' : 'black'} size={20} />}
icon={<Feather name="check-circle" color={status == "true" ? 'white' : colors.dimmed} size={20} />}
n={2} />
<ButtonTab
active={status == "false" ? "false" : "true"}
value="false"
onPress={() => { setStatus("false") }}
label="Tidak Aktif"
icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : 'black'} size={20} />}
icon={<AntDesign name="closecircleo" color={status == "false" ? 'white' : colors.dimmed} size={20} />}
n={2} />
</View>
</WrapTab>
<InputSearch onChange={setSearch} />
{
(entityUser.role == "supadmin" || entityUser.role == "developer") &&

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

@@ -10,6 +10,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { AntDesign, Ionicons } from "@expo/vector-icons";
import { router, Stack } from "expo-router";
import { LinearGradient } from "expo-linear-gradient";
import { useState } from "react";
import { Image, Modal, Pressable, SafeAreaView, ScrollView, TouchableOpacity, View } from "react-native";
import ImageViewing from 'react-native-image-viewing';
@@ -68,7 +69,10 @@ export default function Profile() {
/>
<ScrollView style={[Styles.h100, { backgroundColor: colors.background }]}>
<View style={{ flexDirection: 'column' }}>
<View style={[Styles.wrapHeadViewMember, { backgroundColor: colors.primary }]}>
<LinearGradient
colors={[colors.header, colors.homeGradient]}
style={[Styles.wrapHeadViewMember]}
>
<Pressable onPress={() => setPreview(true)}>
<Image
source={error ? require("../../assets/images/user.jpg") : { uri: `${ConstEnv.url_storage}/files/${entities.img}` }}
@@ -78,7 +82,7 @@ export default function Profile() {
</Pressable>
<Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>{entities.name}</Text>
<Text style={[Styles.textMediumNormal, Styles.cWhite]}>{entities.role}</Text>
</View>
</LinearGradient>
<View style={[Styles.p15]}>
<View style={[Styles.rowSpaceBetween, Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, { color: colors.text }]}>Tampilan</Text>

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

@@ -136,7 +136,7 @@ export default function ListProject() {
icon={
<MaterialCommunityIcons
name="clock-alert-outline"
color={statusFix == "0" ? "white" : colors.text}
color={statusFix == "0" ? "white" : colors.dimmed}
size={20}
/>
}
@@ -150,7 +150,7 @@ export default function ListProject() {
icon={
<MaterialCommunityIcons
name="progress-check"
color={statusFix == "1" ? "white" : colors.text}
color={statusFix == "1" ? "white" : colors.dimmed}
size={20}
/>
}
@@ -164,7 +164,7 @@ export default function ListProject() {
icon={
<Ionicons
name="checkmark-done-circle-outline"
color={statusFix == "2" ? "white" : colors.text}
color={statusFix == "2" ? "white" : colors.dimmed}
size={20}
/>
}
@@ -178,7 +178,7 @@ export default function ListProject() {
icon={
<AntDesign
name="closecircleo"
color={statusFix == "3" ? "white" : colors.text}
color={statusFix == "3" ? "white" : colors.dimmed}
size={20}
/>
}

23
components/AppHeader.tsx
View File

@@ -1,4 +1,5 @@
import Styles from '@/constants/Styles';
import { useTheme } from "@/providers/ThemeProvider";
import { useRouter } from 'expo-router';
import { Platform, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -15,20 +16,22 @@ type Props = {
export default function AppHeader({ title, right, showBack = true, onPressLeft, left }: Props) {
const insets = useSafeAreaInsets();
const router = useRouter();
const { colors } = useTheme();
return (
<View style={[Styles.headerContainer, Platform.OS === 'ios' ? Styles.pb05 : Styles.pb13, { paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
<View style={[Styles.headerContainer, Platform.OS === 'ios' ? Styles.pb05 : Styles.pb13, { backgroundColor: colors.header, paddingTop: Platform.OS === 'ios' ? insets.top : 10 }]}>
<View style={Styles.headerApp}>
{showBack ? (
<ButtonBackHeader onPress={onPressLeft} />
) :
left ? left :
(
<View style={Styles.headerSide} />
)}
<Text style={Styles.headerTitle}>{title}</Text>
<View style={[Styles.rowItemsCenter]}>
{showBack ? (
<ButtonBackHeader onPress={onPressLeft} />
) :
left ? left :
(
<View style={Styles.headerSide} />
)}
<Text style={[Styles.headerTitle, Styles.ml05]}>{title}</Text>
</View>
<View style={Styles.headerSide}>{right}</View>
</View>
</View>

2
components/buttonBackHeader.tsx
View File

@@ -9,7 +9,7 @@ export default function ButtonBackHeader({ onPress }: Props) {
return (
<>
<ButtonHeader
item={<Feather name="chevron-left" size={20} color="white" />}
item={<Feather name="chevron-left" size={25} color="white" />}
onPress={() => { onPress && onPress() }}
/>
</>

2
components/buttonFiturMenu.tsx
View File

@@ -18,7 +18,7 @@ export function ButtonFiturMenu({ onPress, icon, text }: Props) {
<View style={[Styles.btnFiturMenu, { backgroundColor: colors.card, borderColor: colors.icon + '20', shadowColor: colors.text }]}>
{icon}
</View>
<Text style={[Styles.mt05]}>{text}</Text>
<Text style={[Styles.mt05, { color: colors.text }]}>{text}</Text>
</View>
</TouchableWithoutFeedback>
)

9
components/buttonTab.tsx
View File

@@ -1,7 +1,6 @@
import { ColorsStatus } from "@/constants/ColorsStatus"
import Styles from "@/constants/Styles"
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { TouchableOpacity } from "react-native"
import { TouchableOpacity } from "react-native";
import Text from "./Text";
type Props = {
@@ -17,9 +16,9 @@ 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() }}>
<TouchableOpacity style={[Styles.btnTab, (active == value) && { backgroundColor: colors.tabActive }, { width: n == 2 ? '50%' : 'auto' }]} onPress={() => { onPress() }}>
{icon}
<Text numberOfLines={1} style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : colors.text }]}>{label}</Text>
<Text numberOfLines={1} style={[Styles.textMediumSemiBold, Styles.ml10, { color: active == value ? 'white' : colors.dimmed }]}>{label}</Text>
</TouchableOpacity>
)
}

10
components/discussionItem.tsx
View File

@@ -14,7 +14,7 @@ type Props = {
export default function DiscussionItem({ title, user, date, onPress }: Props) {
const { colors } = useTheme();
return (
<Pressable style={[Styles.wrapItemDiscussion, { backgroundColor: colors.card, borderColor: colors.background }]} onPress={onPress}>
<Pressable style={[Styles.wrapItemDiscussion, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]} onPress={onPress}>
<View style={[Styles.rowItemsCenter, Styles.mb10]}>
<Ionicons name="chatbox-ellipses-outline" size={22} color={colors.text} style={Styles.mr10} />
<View style={[{ flex: 1 }]}>
@@ -23,12 +23,12 @@ export default function DiscussionItem({ title, user, date, onPress }: Props) {
</View>
<View style={[Styles.rowSpaceBetween]}>
<View style={[Styles.rowItemsCenter, { flex: 1 }]}>
<Feather name="user" size={18} color={colors.text} style={Styles.mr05} />
<Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{user}</Text>
<Feather name="user" size={18} color={colors.dimmed} style={Styles.mr05} />
<Text style={[Styles.textInformation, { color: colors.dimmed }]} numberOfLines={1} ellipsizeMode="tail">{user}</Text>
</View>
<View style={[Styles.rowItemsCenter, { flex: 1, justifyContent: 'flex-end' }]}>
<Feather name="clock" size={18} color={colors.text} style={Styles.mr05} />
<Text style={[Styles.textInformation]}>{date}</Text>
<Feather name="clock" size={18} color={colors.dimmed} style={Styles.mr05} />
<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{date}</Text>
</View>
</View>
</Pressable>

143
components/home/carouselHome2.tsx Normal file
View File

@@ -0,0 +1,143 @@
import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles";
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 { AntDesign, Feather, FontAwesome5, Ionicons, MaterialCommunityIcons, MaterialIcons, } from "@expo/vector-icons";
import { router } from "expo-router";
import React, { useEffect } from "react";
import { Dimensions, Image, View } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
import { useDispatch, useSelector } from "react-redux";
import { ButtonFiturMenu } from "../buttonFiturMenu";
import Text from "../Text";
export default function CaraouselHome2({ 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);
const dispatch = useDispatch()
const entities = useSelector((state: any) => state.banner)
const entityUser = useSelector((state: any) => state.user)
async function handleBannerView() {
const hasil = await decryptToken(String(token?.current))
apiGetBanner({ user: hasil }).then((data) => {
if (data.data.length > 0) {
dispatch(setEntities(data.data))
} else {
dispatch(setEntities([]))
}
})
}
async function handleUser() {
const hasil = await decryptToken(String(token?.current))
const response = await apiGetProfile({ id: hasil })
dispatch(setEntityUser({ role: response.data.idUserRole, admin: false }))
}
useEffect(() => {
if (refreshing)
handleBannerView()
}, [refreshing]);
useEffect(() => {
handleBannerView()
}, [dispatch]);
useEffect(() => {
handleUser()
}, []);
return (
<View
style={[
Styles.mv15,
Styles.p15,
Styles.round05,
{ backgroundColor: colors.card },
Styles.wrapHomeCarousel
]}
>
{/* WRAPPER CAROUSEL */}
<View
style={{
justifyContent: 'center', // ⬅️ vertical center
alignItems: 'center',
}}
>
{entities.length > 0 ? (
<Carousel
ref={ref}
width={width - 30} // ⬅️ biar ga nabrak padding hijau
height={width / 2.6}
data={entities}
loop
autoPlay
autoPlayInterval={5000}
onProgressChange={progress}
renderItem={({ index }) => (
<Image
source={{ uri: `${ConstEnv.url_storage}/files/${entities[index].image}` }}
style={[
Styles.caraoselContent,
Styles.round05,
{
backgroundColor: colors.primary
},
]}
resizeMode="cover"
/>
)}
/>
) : (
<View
style={[
Styles.caraoselContent,
{
height: width / 2.5,
backgroundColor: colors.primary,
justifyContent: 'center',
alignItems: 'center',
},
]}
>
<Text style={[Styles.textDefault, Styles.cWhite]}>BANNER</Text>
</View>
)}
</View>
{/* FITUR */}
<View style={[Styles.mt15]}>
<View style={Styles.rowSpaceBetween}>
<ButtonFiturMenu
icon={<Feather name="users" size={30} color={colors.icon} />}
text="Divisi"
onPress={() => router.push('/division?active=true')}
/>
<ButtonFiturMenu
icon={<Feather name="bar-chart" size={30} color={colors.icon} />}
text="Kegiatan"
onPress={() => router.push('/project?status=0')}
/>
<ButtonFiturMenu
icon={<Ionicons name="megaphone-outline" size={30} color={colors.icon} />}
text="Pengumuman"
onPress={() => router.push('/announcement')}
/>
<ButtonFiturMenu
icon={<Ionicons name="grid-outline" size={30} color={colors.icon} />}
text="Semua"
onPress={() => router.push('/feature')}
/>
</View>
</View>
</View>
)
}

2
components/home/chartProgresHome.tsx
View File

@@ -58,7 +58,7 @@ export default function ChartProgresHome({ refreshing }: { refreshing: boolean }
data={data}
showText
showValuesAsTooltipText
textColor={colors.text}
textColor={'black'}
radius={120}
textSize={15}
focusOnPress={false}

4
components/home/discussionHome.tsx
View File

@@ -7,6 +7,7 @@ import { View } from "react-native";
import DiscussionItem from "../discussionItem";
import Skeleton from "../skeleton";
import Text from "../Text";
import { useTheme } from "@/providers/ThemeProvider";
type Props = {
id: string
@@ -21,6 +22,7 @@ export default function DisccussionHome({ refreshing }: { refreshing: boolean })
const { decryptToken, token } = useAuthSession()
const [data, setData] = useState<Props[]>([])
const [loading, setLoading] = useState(true)
const { colors } = useTheme();
async function handleData(loading: boolean) {
@@ -48,7 +50,7 @@ export default function DisccussionHome({ refreshing }: { refreshing: boolean })
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.icon + '20' }, Styles.p0]}>
{
loading ?
<>

8
components/home/fiturHome.tsx
View File

@@ -13,10 +13,10 @@ export default function FiturHome() {
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Fitur</Text>
<View style={[Styles.rowSpaceBetween]}>
<ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color="black" />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
<ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color="black" />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
<ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color="black" />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
<ButtonFiturMenu icon={<MaterialCommunityIcons name="view-grid" size={35} color="black" />} text="Semua" onPress={() => { router.push('/feature') }} />
<ButtonFiturMenu icon={<MaterialIcons name="group" size={35} color={colors.icon} />} text="Divisi" onPress={() => { router.push('/division?active=true') }} />
<ButtonFiturMenu icon={<AntDesign name="areachart" size={35} color={colors.icon} />} text="Kegiatan" onPress={() => { router.push('/project?status=0') }} />
<ButtonFiturMenu icon={<MaterialIcons name="campaign" size={35} color={colors.icon} />} text="Pengumuman" onPress={() => { router.push('/announcement') }} />
<ButtonFiturMenu icon={<MaterialCommunityIcons name="view-grid" size={35} color={colors.icon} />} text="Semua" onPress={() => { router.push('/feature') }} />
</View>
</View>
)

2
components/home/headerRightHome.tsx
View File

@@ -29,7 +29,7 @@ export function HeaderRightHome() {
return (
<View style={[Styles.rowSpaceBetween, { width: 140 }]}>
<View style={[Styles.rowSpaceBetween, { width: 90 }]}>
<ButtonHeader item={<Feather name="search" size={18} color="white" />} onPress={() => { router.push('/search') }} />
<ButtonHeader valueTop={notification > 0 ? true : false} item={<Feather name="bell" size={18} color="white" />} onPress={() => { router.push('/notification') }} />
<ButtonHeader item={<Feather name="user" size={18} color="white" />} onPress={() => { router.push('/profile') }} />

4
components/home/projectHome.tsx
View File

@@ -10,6 +10,7 @@ import PaperGridContent from "../paperGridContent";
import ProgressBar from "../progressBar";
import Skeleton from "../skeleton";
import Text from "../Text";
import { useTheme } from "@/providers/ThemeProvider";
type Props = {
id: string
@@ -26,6 +27,7 @@ export default function ProjectHome({ refreshing }: { refreshing: boolean }) {
const width = Dimensions.get("window").width;
const [data, setData] = useState<Props[]>([])
const [loading, setLoading] = useState(true)
const { colors } = useTheme();
async function handleData(loading: boolean) {
try {
@@ -72,7 +74,7 @@ export default function ProjectHome({ refreshing }: { refreshing: boolean }) {
<PaperGridContent titleTail={1} content="carousel" onPress={() => { router.push(`/project/${data[index].id}`) }} title={data[index].title} headerColor="primary">
<ProgressBar value={data[index].progress} category="carousel" />
<View style={[Styles.rowSpaceBetween]}>
<Text style={[Styles.textDefault, Styles.cGray]}>{data[index].createdAt}</Text>
<Text style={[Styles.textDefault, { color: colors.dimmed }]}>{data[index].createdAt}</Text>
<LabelStatus
size="default"
category={

14
components/labelStatus.tsx
View File

@@ -1,4 +1,4 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import { useTheme } from "@/providers/ThemeProvider";
import Styles from "@/constants/Styles";
import { View, StyleProp, ViewStyle } from "react-native";
import Text from "./Text";
@@ -10,10 +10,20 @@ type Props = {
style?: StyleProp<ViewStyle>
}
export default function LabelStatus({ category, text, size, style }: Props) {
const { colors } = useTheme();
const backgroundColor = {
primary: colors.primary,
success: colors.success,
warning: colors.warning,
error: colors.error,
secondary: colors.dimmed,
}[category] || 'gray'; // Removed ColorsStatus[category]?.backgroundColor as ColorsStatus is removed
return (
<View style={[
size == "small" ? Styles.labelStatusSmall : Styles.labelStatus,
ColorsStatus[category],
{ backgroundColor },
Styles.round10,
Styles.contentItemCenter,
style

4
components/paperGridContent.tsx
View File

@@ -18,8 +18,8 @@ export default function PaperGridContent({ content, children, title, headerColor
const { colors } = useTheme();
return (
<Pressable onPress={onPress}>
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent, headerColor == 'warning' ? ColorsStatus.warning : { backgroundColor: colors.primary }]}>
<View style={[Styles.headerPaperGrid]}>
<View style={[content == 'carousel' ? Styles.wrapGridCaraousel : Styles.wrapGridContent]}>
<View style={[Styles.headerPaperGrid, headerColor == 'warning' ? ColorsStatus.warning : { backgroundColor: colors.primary }]}>
<Text numberOfLines={titleTail ? titleTail : undefined} style={[Styles.textSubtitle, headerColor == 'warning' ? Styles.cDefault : Styles.cWhite, { textAlign: 'center' }]}>{title}</Text>
</View>
<View style={[

16
components/wrapTab.tsx Normal file
View File

@@ -0,0 +1,16 @@
import Styles from "@/constants/Styles";
import { useTheme } from "@/providers/ThemeProvider";
import { View } from "react-native";
type Props = {
children: React.ReactNode
}
export default function WrapTab({ children }: Props) {
const { colors } = useTheme()
return (
<View style={[Styles.wrapBtnTab, { backgroundColor: colors.card, borderColor: colors.icon + '20' }]}>
{children}
</View>
)
}

26
constants/Colors.ts
View File

@@ -4,22 +4,34 @@ const tintColorDark = '#fff';
export const Colors = {
light: {
text: '#11181C',
background: '#f4f9fd',
background: '#f7f7f7ff',
tint: tintColorLight,
primary: '#19345E',
icon: '#687076',
icon: '#1F3C88',
card: '#ffffff',
tabIconDefault: '#687076',
tabIconSelected: tintColorLight,
tabActive: '#2563EB',
header: '#234881',
homeGradient: '#346CC4',
dimmed: '#6B7280',
success: '#40C057',
warning: '#FBBF24',
error: '#F87171',
},
dark: {
text: '#ECEDEE',
background: '#151718',
background: '#0F1B2D',
tint: tintColorDark,
primary: '#19345E',
icon: '#9BA1A6',
card: '#232526', // slightly lighter than background #151718
icon: '#9DB9E8',
card: '#16233A', // slightly lighter than background #151718
tabIconDefault: '#9BA1A6',
tabIconSelected: tintColorDark,
tabActive: '#0166FE',
header: '#0E294C',
homeGradient: '#123A6F',
dimmed: '#9AAED1',
success: '#1F6F43',
warning: '#D97706',
error: '#DC2626',
},
};

2
constants/Headers.ts
View File

@@ -1,4 +1,4 @@
const bgColorDefault = '#19345E';
const bgColorDefault = '#a5e816ff';
export const Headers = {
shadow: {

86
constants/Styles.ts
View File

@@ -151,6 +151,9 @@ const Styles = StyleSheet.create({
ml25: {
marginLeft: 25
},
p0: {
padding: 0
},
pb05: {
paddingBottom: 5
},
@@ -202,9 +205,18 @@ const Styles = StyleSheet.create({
p20: {
padding: 20
},
round05: {
borderRadius: 5
},
round08: {
borderRadius: 8
},
round10: {
borderRadius: 10
},
round15: {
borderRadius: 15
},
h100: {
height: '100%'
},
@@ -265,14 +277,12 @@ const Styles = StyleSheet.create({
flexDirection: 'row'
},
btnIconHeader: {
backgroundColor: '#384288',
padding: 7,
borderRadius: 100,
padding: 3,
},
btnFiturMenu: {
backgroundColor: '#FCAA4B',
padding: 10,
borderRadius: 100,
padding: 13,
borderRadius: 15,
borderWidth: 1,
},
btnRound: {
backgroundColor: '#19345E',
@@ -285,7 +295,7 @@ const Styles = StyleSheet.create({
},
btnTab: {
alignItems: 'center',
paddingVertical: 10,
paddingVertical: 5,
paddingHorizontal: 15,
borderRadius: 20,
flexDirection: 'row',
@@ -352,35 +362,36 @@ const Styles = StyleSheet.create({
},
wrapGridContent: {
shadowColor: '#171717',
shadowOffset: { width: -2, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 3,
elevation: 10,
borderRadius: 15,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 10,
elevation: 5,
borderRadius: 5,
marginBottom: 15
},
wrapGridCaraousel: {
width: '95%',
height: 200,
shadowColor: '#171717',
shadowOffset: { width: -2, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 3,
elevation: 10,
borderRadius: 15,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 5,
borderRadius: 5,
marginLeft: 5
},
headerPaperGrid: {
paddingVertical: 25,
paddingHorizontal: 20,
alignItems: 'center',
borderTopStartRadius: 15,
borderTopEndRadius: 15
borderTopStartRadius: 5,
borderTopEndRadius: 5
},
contentPaperGrid: {
backgroundColor: 'white',
height: 150,
borderBottomEndRadius: 15,
borderBottomStartRadius: 15,
borderBottomEndRadius: 5,
borderBottomStartRadius: 5,
paddingHorizontal: 20,
justifyContent: 'space-evenly'
},
@@ -402,15 +413,20 @@ const Styles = StyleSheet.create({
},
contentBar: {
height: 20,
backgroundColor: 'orange',
backgroundColor: '#3B82F6',
borderRadius: 10,
},
wrapPaper: {
padding: 15,
padding: 10,
backgroundColor: 'white',
borderRadius: 10,
borderWidth: 1,
borderColor: '#d6d8f6',
borderRadius: 5,
// borderWidth: 1,
// borderColor: '#d6d8f6',
shadowColor: '#171717',
shadowOffset: { width: 0, height: 0 },
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 5,
},
contentItemCenter: {
justifyContent: 'center',
@@ -429,11 +445,10 @@ const Styles = StyleSheet.create({
marginRight: 10
},
wrapItemDiscussion: {
padding: 10,
borderRadius: 10,
padding: 15,
borderRadius: 5,
borderColor: '#d6d8f6',
borderWidth: 1,
marginBottom: 10
borderBottomWidth: 1,
},
wrapItemBorderBottom: {
padding: 10,
@@ -543,7 +558,7 @@ const Styles = StyleSheet.create({
marginBottom: 10,
borderRadius: 20,
padding: 5,
backgroundColor: 'white',
borderWidth: 1,
},
itemSelectModal: {
padding: 10,
@@ -644,7 +659,7 @@ const Styles = StyleSheet.create({
},
headerTitle: {
color: '#fff',
fontSize: 16,
fontSize: 18,
fontWeight: '600',
},
headerSide: {
@@ -686,6 +701,13 @@ const Styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
wrapHomeCarousel: {
shadowColor: '#171717',
shadowOffset: { width: 0, height: 5 },
shadowOpacity: 0.2,
shadowRadius: 5,
elevation: 50,
}
})