upd: redesign

This commit is contained in:
2026-02-12 17:52:19 +08:00
parent 8012f7f322
commit 4df0a44ac9
44 changed files with 127 additions and 105 deletions

View File

@@ -23,7 +23,7 @@ export default function HeaderRightAnnouncementList() {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
icon={<AntDesign name="pluscircleo" color={colors.text} size={25} />}
title="Tambah Pengumuman"
onPress={() => {
setVisible(false)

View File

@@ -17,7 +17,7 @@ export default function HeaderRightBannerList() {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={() => setVisible(false)} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
icon={<AntDesign name="pluscircleo" color={colors.text} size={25} />}
title="Tambah Banner"
onPress={() => {
setVisible(false)

View File

@@ -56,14 +56,14 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
{
subtitle &&
typeof subtitle == "string"
? <Text style={[Styles.textMediumNormal, { lineHeight: 15, color: textColorFix }]}>{subtitle}</Text>
? <Text style={[Styles.textMediumNormal, { lineHeight: 15, color: colors.dimmed }]}>{subtitle}</Text>
: <View style={{ alignItems: 'flex-start' }}>
{subtitle}
</View>
}
</View>
{
rightTopInfo && <Text style={[Styles.textInformation, Styles.mt05, { color: textColorFix }]}>{rightTopInfo}</Text>
rightTopInfo && <Text style={[Styles.textInformation, Styles.mt05, { color: colors.dimmed }]}>{rightTopInfo}</Text>
}
</View>

View File

@@ -215,7 +215,7 @@ export default function BorderBottomItem2({ title, subtitle, icon, desc, onPress
accessibilityLabel="Download or share image"
disabled={loadingOpen}
>
<Text style={{ color: loadingOpen ? 'gray' : 'white', fontSize: 22 }}></Text>
<Text style={{ color: loadingOpen ? 'gray' : 'white', fontSize: 26 }}></Text>
</Pressable>
</View>
)}

View File

@@ -49,7 +49,7 @@ export default function HeaderRightCalendarList() {
<></>
) : (
<MenuItemRow
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
icon={<AntDesign name="pluscircleo" color={colors.text} size={25} />}
title="Tambah Acara"
onPress={() => {
setVisible(false)

View File

@@ -21,7 +21,7 @@ export default function ItemHistoryEvent({ data }: { data: Props }) {
{
data.length > 0 ? (
data.map((item, index) => (
<View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, activeTheme === 'dark' ? { backgroundColor: colors.card } : ColorsStatus.lightGreen, Styles.p10, Styles.round10, { borderBottomWidth: 1, borderColor: colors.background }]}>
<View key={index} style={[{ flexDirection: 'row' }, Styles.mv05, activeTheme === 'dark' ? { backgroundColor: colors.card } : ColorsStatus.lightGreen, Styles.p10, Styles.round05, { borderBottomWidth: 1, borderColor: colors.background }]}>
<View style={[Styles.mr10, Styles.ph05]}>
<Text style={[Styles.textSubtitle]}>{String(item.dateStart)}</Text>
<Text style={[Styles.textDefault, { textAlign: 'center' }]}>{item.year}</Text>

View File

@@ -47,7 +47,7 @@ export default function HeaderRightDiscussionList() {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
icon={<AntDesign name="pluscircleo" color={colors.text} size={25} />}
title="Tambah Diskusi"
onPress={() => {
setVisible(false)

View File

@@ -1,13 +1,13 @@
import Styles from "@/constants/Styles";
import { apiGetDivisionOneFeature } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
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;
@@ -54,8 +54,7 @@ export default function DiscussionDivisionDetail({ refreshing }: { refreshing: b
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Diskusi</Text>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.background }]}>
<View style={[Styles.wrapPaper, { backgroundColor: colors.card, borderColor: colors.icon + '20' }, Styles.p0]}>
{
loading ?
<>

View File

@@ -112,8 +112,8 @@ export default function FileDivisionDetail({ refreshing }: { refreshing: boolean
data.map((item, index) => (
<Pressable style={[Styles.mr05, { width: '24%' }]} key={index} onPress={() => openFile(item)}>
<View style={{ alignItems: 'center' }}>
<View style={[Styles.wrapPaper, { alignItems: 'center' }]}>
<Feather name="file-text" size={50} color="black" style={Styles.mr05} />
<View style={[Styles.wrapPaper, { alignItems: 'center', backgroundColor: colors.card, borderWidth: 1, borderColor: colors.icon + '20' }]}>
<Feather name="file-text" size={50} color={colors.text} style={Styles.mr05} />
</View>
</View>
<View style={[Styles.contentItemCenter]}>

View File

@@ -2,7 +2,7 @@ import { ColorsStatus } from "@/constants/ColorsStatus"
import Styles from "@/constants/Styles"
import { apiGetDivisionOneFeature } from "@/lib/api"
import { useAuthSession } from "@/providers/AuthProvider"
import { AntDesign, MaterialIcons, SimpleLineIcons } from "@expo/vector-icons"
import { AntDesign, Feather, MaterialIcons, SimpleLineIcons } from "@expo/vector-icons"
import { router, useLocalSearchParams } from "expo-router"
import { useEffect, useState } from "react"
import { View } from "react-native"
@@ -56,13 +56,13 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="filetext1" size={25} color={colors.primary} />
<View style={[Styles.p05]}>
<AntDesign name="filetext1" size={28} color={colors.text} />
</View>
}
title="Tugas"
subtitle={`${data.tugas} Tugas`}
width={28}
width={30}
onPress={() => { router.push(`/division/${id}/task?status=0`) }}
/>
@@ -70,13 +70,13 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="attach-file" size={25} color={colors.primary} />
<View style={[Styles.p05]}>
<Feather name="paperclip" size={28} color={colors.text} />
</View>
}
title="Dokumen"
subtitle={`${data.dokumen} File`}
width={28}
width={30}
onPress={() => { router.push(`/division/${id}/document`) }}
/>
</View>
@@ -86,13 +86,13 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<SimpleLineIcons name="bubbles" size={25} color={colors.primary} />
<View style={[Styles.p05]}>
<SimpleLineIcons name="bubbles" size={28} color={colors.text} />
</View>
}
title="Diskusi"
subtitle={`${data.diskusi} Diskusi`}
width={28}
width={30}
onPress={() => { router.push(`/division/${id}/discussion?active=true`) }}
/>
@@ -100,13 +100,13 @@ export default function FiturDivisionDetail({ refreshing }: { refreshing: boolea
bgColor={colors.card}
borderType="all"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<AntDesign name="calendar" size={25} color={colors.primary} />
<View style={[Styles.p05]}>
<AntDesign name="calendar" size={28} color={colors.text} />
</View>
}
title="Kalender"
subtitle={`${data.kalender} Acara`}
width={28}
width={30}
onPress={() => { router.push(`/division/${id}/calendar`) }}
/>
</View>

View File

@@ -25,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={colors.text} size={25} />}
icon={<AntDesign name="pluscircleo" color={colors.text} size={25} />}
title="Tambah Divisi"
onPress={() => {
setVisible(false)

View File

@@ -1,13 +1,13 @@
import Styles from "@/constants/Styles";
import { apiGetDivisionOneFeature } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import { Feather } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
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 = {
@@ -59,11 +59,11 @@ export default function TaskDivisionDetail({ refreshing }: { refreshing: boolean
:
data.length > 0 ?
data.map((item, index) => (
<Pressable key={index} style={[Styles.wrapPaper, Styles.mb05, { backgroundColor: colors.card, borderColor: colors.background }]} onPress={() => { router.push(`/division/${id}/task/${item.idProject}`) }}>
<Pressable key={index} style={[Styles.wrapPaper, Styles.mb10, { backgroundColor: colors.card, borderWidth: 1, borderColor: colors.icon + '20' }]} 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={colors.text} style={Styles.mr05} />
<Text style={[Styles.textInformation]} numberOfLines={1} ellipsizeMode="tail">{item.dateStart} - {item.dateEnd}</Text>
<Feather name="clock" size={18} color={colors.dimmed} style={Styles.mr05} />
<Text style={[Styles.textInformation, { color: colors.dimmed }]} numberOfLines={1} ellipsizeMode="tail">{item.dateStart} - {item.dateEnd}</Text>
</View>
</Pressable>
))

View File

@@ -26,13 +26,13 @@ export default function ItemFile({ category, checked, dateTime, title, onChecked
?
<>
<Ionicons name="folder-open-sharp" color={'#f9cc40'} size={40} />
<MaterialCommunityIcons name="share" color={'gray'} size={25} style={[Styles.absoluteIcon]} />
<MaterialCommunityIcons name="share" color={colors.tint} size={25} style={[Styles.absoluteIcon]} />
</>
: category == 'file-shared'
?
<>
<Ionicons name="document-text-sharp" color={'#9fcff8'} size={40} />
<MaterialCommunityIcons name="share" color={'gray'} size={25} style={[Styles.absoluteIcon]} />
<MaterialCommunityIcons name="share" color={colors.tint} size={25} style={[Styles.absoluteIcon]} />
</>
:
category == 'folder'
@@ -47,8 +47,8 @@ export default function ItemFile({ category, checked, dateTime, title, onChecked
</Pressable>
<View style={[Styles.rowSpaceBetween, { flex: 1, alignItems: 'center' }]}>
<Pressable style={[Styles.ml10, { flex: 1 },]} onPress={onPress}>
<Text style={[Styles.textDefault]} numberOfLines={1} ellipsizeMode="tail">{title}</Text>
<Text style={[Styles.textInformation]}>{dateTime}</Text>
<Text style={[Styles.textDefault, { color: colors.text }]} numberOfLines={1} ellipsizeMode="tail">{title}</Text>
<Text style={[Styles.textInformation, { color: colors.dimmed }]}>{dateTime}</Text>
</Pressable>
{
!canChecked ? <></>

View File

@@ -94,6 +94,7 @@ export default function ModalSalinMove({ open, close, category, onConfirm, dataC
icon={<Ionicons name="folder-open-sharp" style={[found ? Styles.cGray : Styles.cFolder]} size={30} />}
title={item.name}
titleWeight="normal"
bgColor="transparent"
onPress={() => {
if (found) return;
setPath(item.id);
@@ -108,7 +109,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, { backgroundColor: colors.background }]}>
<View style={[Styles.rowOnly, Styles.mt15, Styles.absolute0, { backgroundColor: colors.modalBackground }]}>
<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>

View File

@@ -13,18 +13,25 @@ type Props = {
}
export default function EventItem({ category, title, user, jamAwal, jamAkhir, onPress }: Props) {
const { theme } = useTheme();
const { theme, colors } = useTheme();
const getBackgroundColor = (cat: 'purple' | 'orange') => {
if (theme === 'dark') {
return cat === 'orange' ? '#5A2D0C' : '#1F2255';
return cat === 'orange' ? '#547792' : '#1D546D';
}
return cat === 'orange' ? '#FED6C5' : '#D8D8F1';
return cat === 'orange' ? '#D6E6F2' : '#A9B5DF';
};
const getStickColor = (cat: 'purple' | 'orange') => {
if (theme === 'dark') {
return cat === 'orange' ? '#94B4C1' : '#5F9598';
}
return cat === 'orange' ? '#F5F5F5' : '#7886C7' ;
};
return (
<Pressable style={[Styles.itemEvent, { backgroundColor: getBackgroundColor(category) }]} onPress={onPress}>
<View style={[Styles.dividerEvent, { backgroundColor: category == 'orange' ? '#FB804C' : '#535FCA' }]} />
<View style={[Styles.dividerEvent, { backgroundColor: getStickColor(category) }]} />
<View style={[Styles.w90]}>
<Text>{jamAwal} - {jamAkhir}</Text>
<Text numberOfLines={1} ellipsizeMode="tail" style={[Styles.textDefaultSemiBold, Styles.mv05]}>{title}</Text>

View File

@@ -80,17 +80,17 @@ export function InputDate({ label, value, placeholder, onChange, info, disable,
<View style={[Styles.mb10]}>
{
label != undefined && (
<Text style={[Styles.mb05, error && Styles.cError]}>
<Text style={[Styles.mb05, error && { color: colors.error }]}>
{label}
{required && (<Text style={Styles.cError}>*</Text>)}
{required && (<Text style={{ color: colors.error }}>*</Text>)}
</Text>
)
}
<Pressable style={[Styles.inputRoundForm, disable && ColorsStatus.gray, error && { borderColor: "red" }, { backgroundColor: colors.card }]} onPress={() => setModal(true)} disabled={disable}>
<Text style={!value && [Styles.cGray]}>{value ? value : placeholder}</Text>
<Pressable style={[Styles.inputRoundForm, disable && ColorsStatus.gray, { borderColor: colors.icon + '20' }, error && { borderColor: colors.error }, { backgroundColor: colors.card }]} onPress={() => setModal(true)} disabled={disable}>
<Text style={!value && [{ color: colors.dimmed }]}>{value ? value : placeholder}</Text>
</Pressable>
{error && (<Text style={[Styles.textInformation, Styles.cError, Styles.mt05]}>{errorText}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, Styles.cGray]}>{info}</Text>)}
{error && (<Text style={[Styles.textInformation, { color: colors.error }, Styles.mt05]}>{errorText}</Text>)}
{info != undefined && (<Text style={[Styles.textInformation, Styles.mt05, { color: colors.icon }]}>{info}</Text>)}
</View>
{
Platform.OS === 'ios' ? (

View File

@@ -2,7 +2,7 @@ import { useTheme } from "@/providers/ThemeProvider";
import { Feather } from "@expo/vector-icons";
import { InputForm } from "./inputForm";
export default function InputSearch({ onChange, width, value }: { onChange?: (val: string) => void, width?: number, value?: string }) {
export default function InputSearch({ onChange, width, value, bg }: { onChange?: (val: string) => void, width?: number, value?: string, bg?: string }) {
const { colors } = useTheme();
return (
<InputForm
@@ -12,7 +12,7 @@ export default function InputSearch({ onChange, width, value }: { onChange?: (va
itemLeft={<Feather name="search" size={20} color={colors.dimmed} />}
onChange={onChange}
width={width}
bg="white"
bg={bg}
value={value}
mb={false}
/>

View File

@@ -24,7 +24,7 @@ export default function LabelStatus({ category, text, size, style }: Props) {
<View style={[
size == "small" ? Styles.labelStatusSmall : Styles.labelStatus,
{ backgroundColor },
Styles.round10,
Styles.round05,
Styles.contentItemCenter,
style
]}>

View File

@@ -35,10 +35,10 @@ export default function ModalFloat({ isVisible, setVisible, title, children, onS
{
!buttonHide && (
<View style={[Styles.rowItemsCenter, { justifyContent: 'flex-end' }]}>
<Pressable style={[Styles.ph15, Styles.pv05, Styles.round10, Styles.mr10]} onPress={() => { setVisible(false) }}>
<Pressable style={[Styles.ph15, Styles.pv05, Styles.round05, Styles.mr10]} onPress={() => { setVisible(false) }}>
<Text style={[Styles.textDefaultSemiBold]}>Batal</Text>
</Pressable>
<Pressable style={[Styles.ph15, Styles.pv05, Styles.round10]} onPress={onSubmit} disabled={disableSubmit}>
<Pressable style={[Styles.ph15, Styles.pv05, Styles.round05]} onPress={onSubmit} disabled={disableSubmit}>
<Text style={[Styles.textDefaultSemiBold, disableSubmit && Styles.cGray]}>Simpan</Text>
</Pressable>
</View>

View File

@@ -132,7 +132,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
{
category == 'member' &&
<>
<InputSearch onChange={setSearch} value={search} />
<InputSearch onChange={setSearch} value={search} bg={"transparent"} />
{
selectMember.length > 0
?

View File

@@ -163,7 +163,7 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
<Text numberOfLines={1} style={[Styles.w80]}>{item.name}</Text>
{
selectedDivision.some((i: any) => i.id == item.id)
? <AntDesign name="check" size={18} color={colors.text} />
? <AntDesign name="check" size={17} color={colors.text} />
: <></>
}
</Pressable>
@@ -179,9 +179,9 @@ export default function ModalSelectMultiple({ open, close, title, category, choo
<Text style={[Styles.textMediumSemiBold]}>{item.name}</Text>
{
checked[item.id] && checked[item.id]?.length === item.Division?.length
? <AntDesign name="check" size={20} color={colors.text} />
? <AntDesign name="check" size={17} color={colors.text} />
: (checked[item.id] && checked[item.id]?.length > 0 && checked[item.id]?.length < item.Division?.length)
? <AntDesign name="minus" size={20} color={colors.text} />
? <AntDesign name="minus" size={17} color={colors.text} />
: <></>
}
</Pressable>

View File

@@ -72,7 +72,7 @@ export default function HeaderRightProjectDetail({ id, status }: Props) {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu" height={35}>
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
icon={<AntDesign name="pluscircleo" color={colors.text} size={25} />}
title="Tambah Tugas"
onPress={() => {
if (status == 3) return

View File

@@ -24,7 +24,7 @@ export default function HeaderRightProjectList() {
{
entityUser.role != "user" && entityUser.role != "coadmin" &&
<MenuItemRow
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
icon={<AntDesign name="pluscircleo" color={colors.text} size={25} />}
title="Tambah Kegiatan"
onPress={() => {
setVisible(false)

View File

@@ -14,7 +14,7 @@ export default function SectionCancel({ text, title }: Props) {
const { colors } = useTheme();
return (
<View style={[Styles.p10, Styles.round10, Styles.mb15, { backgroundColor: colors.card }]}>
<View style={[Styles.p10, Styles.round05, Styles.mb15, { backgroundColor: colors.card }]}>
<View style={[Styles.rowItemsCenter]}>
<AntDesign name="warning" size={22} style={[Styles.mr10]} color={colors.text} />
<Text style={[Styles.textDefaultSemiBold]}>{title ? title : 'Kegiatan Dibatalkan'}</Text>

View File

@@ -74,7 +74,7 @@ export default function HeaderRightTaskDetail({ id, division, status, isAdminDiv
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu" height={35}>
<View style={Styles.rowItemsCenter}>
<MenuItemRow
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
icon={<AntDesign name="pluscircleo" color={colors.text} size={25} />}
title="Tambah Tugas"
onPress={() => {
if (status == 3) return

View File

@@ -51,10 +51,10 @@ export default function HeaderRightTaskList() {
<DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
<View style={Styles.rowItemsCenter}>
{
(entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision
((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision)
&&
<MenuItemRow
icon={<AntDesign name="pluscircle" color={colors.text} size={25} />}
icon={<AntDesign name="pluscircleo" color={colors.text} size={25} />}
title="Tambah Tugas Divisi"
onPress={() => {
setVisible(false)

View File

@@ -170,7 +170,7 @@ export default function SectionMemberTask({ refreshing, isAdminDivision }: { ref
{
(entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision
((entityUser.role != "user" && entityUser.role != "coadmin") || isAdminDivision)
?
<MenuItemRow
icon={