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
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>
)
}
}