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

upd: redesign aplikasi

Browse Source 
Deskripsi:
- update home, profile dll
- blm selesai

NO Issues
This commit is contained in:
amaliadwiy
2026-02-10 17:32:56 +08:00
parent d3802ca26c
commit 064a8ccaad
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}
/>
}