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/division/discussionDivisionDetail.tsx
View File

@@ -7,6 +7,7 @@ import { View } from "react-native";
import Text from "../Text";
import DiscussionItem from "../discussionItem";
import Skeleton from "../skeleton";
import { useTheme } from "@/providers/ThemeProvider";
type Props = {
id: string;
@@ -17,6 +18,7 @@ type Props = {
};
export default function DiscussionDivisionDetail({ refreshing }: { refreshing: boolean }) {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession();
const { id } = useLocalSearchParams<{ id: string }>();
const [data, setData] = useState<Props[]>([]);
@@ -48,11 +50,11 @@ export default function DiscussionDivisionDetail({ refreshing }: { refreshing: b
handleLoad(true)
}, [])
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
<View style={[Styles.wrapPaper]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
{
loading ?

2
components/division/fileDivisionDetail.tsx
View File

@@ -13,6 +13,7 @@ import * as mime from 'react-native-mime-types';
import { ICarouselInstance } from "react-native-reanimated-carousel";
import ModalLoading from "../modalLoading";
import Skeleton from "../skeleton";
import { useTheme } from "@/providers/ThemeProvider";
import Text from "../Text";
type Props = {
@@ -25,6 +26,7 @@ type Props = {
}
export default function FileDivisionDetail({ refreshing }: { refreshing: boolean }) {
const { colors } = useTheme();
const ref = React.useRef<ICarouselInstance>(null);
const width = Dimensions.get("window").width;
const [data, setData] = useState<Props[]>([])

18
components/division/fiturDivisionDetail.tsx
View File

@@ -7,6 +7,7 @@ import { router, useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react"
import { View } from "react-native"
import BorderBottomItem from "../borderBottomItem"
import { useTheme } from "@/providers/ThemeProvider"
import Text from "../Text"
type Props = {
@@ -17,6 +18,7 @@ type Props = {
}
export default function FiturDivisionDetail({ refreshing }: { refreshing: boolean }) {
const { colors } = useTheme();
const { token, decryptToken } = useAuthSession()
const { id } = useLocalSearchParams<{ id: string }>()
const [data, setData] = useState<Props>({
@@ -51,11 +53,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
<View>
<View style={[Styles.rowSpaceBetween]}>
<BorderBottomItem
bgColor="white"
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="filetext1" size={25} color={'#384288'} />
<AntDesign name="filetext1" size={25} color={colors.primary} />
</View>
}
title="Tugas"
@@ -65,11 +67,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
/>
<BorderBottomItem
bgColor="white"
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="attach-file" size={25} color={'#384288'} />
<MaterialIcons name="attach-file" size={25} color={colors.primary} />
</View>
}
title="Dokumen"
@@ -81,11 +83,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
<View style={[Styles.rowSpaceBetween]}>
<BorderBottomItem
bgColor="white"
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<SimpleLineIcons name="bubbles" size={25} color={'#384288'} />
<SimpleLineIcons name="bubbles" size={25} color={colors.primary} />
</View>
}
title="Diskusi"
@@ -95,11 +97,11 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
/>
<BorderBottomItem
bgColor="white"
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="calendar" size={25} color={'#384288'} />
<AntDesign name="calendar" size={25} color={colors.primary} />
</View>
}
title="Kalender"

6
components/division/headerDivisionDetail.tsx
View File

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

6
components/division/headerDivisionInfo.tsx
View File

@@ -12,6 +12,7 @@ import AlertKonfirmasi from "../alertKonfirmasi"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow"
import { useTheme } from "@/providers/ThemeProvider"
type Props = {
id: string | string[]
@@ -19,6 +20,7 @@ type Props = {
}
export default function HeaderRightDivisionInfo({ id, active }: Props) {
const { colors } = useTheme();
const [isVisible, setVisible] = useState(false)
const { token, decryptToken } = useAuthSession()
const update = useSelector((state: any) => state.divisionUpdate)
@@ -48,7 +50,7 @@ export default function HeaderRightDivisionInfo({ id, active }: Props) {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="pencil-outline" color={colors.text} size={25} />}
title="Edit Divisi"
onPress={() => {
setVisible(false)
@@ -56,7 +58,7 @@ export default function HeaderRightDivisionInfo({ id, active }: Props) {
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />}
icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color={colors.text} size={25} />}
title={active ? "Non Aktifkan" : "Aktifkan"}
onPress={() => {
setVisible(false)

10
components/division/headerDivisionList.tsx
View File

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

8
components/division/reportChartDocument.tsx
View File

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

8
components/division/reportChartEvent.tsx
View File

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

6
components/division/reportChartProgress.tsx
View File

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

6
components/division/taskDivisionDetail.tsx
View File

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